/* ============================================================
   yakhchigram — brand layer  (v2)
   Palette from Tabriz carpet dyes: indigo (nil), madder root,
   saffron, undyed wool, pistachio.
   Type: Vazirmatn only, 100-900. Hierarchy from weight, not from
   a second family — it covers Perso-Arabic AND Latin, so the
   bilingual UI reads as one system.
   Fonts self-hosted: CSP is font-src 'self' (no data: allowed).
   ============================================================ */

@font-face {
  font-family: 'Vazirmatn';
  src: url('/system/brand/vazirmatn-arabic.woff2') format('woff2');
  font-weight: 100 900; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('/system/brand/vazirmatn-latin.woff2') format('woff2');
  font-weight: 100 900; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122;
}

:root {
  --yakh-indigo:    #17263F;
  --yakh-ink:       #0D1728;
  --yakh-madder:    #C2402D;
  --yakh-madder-hi: #D95340;
  --yakh-saffron:   #E0A32E;
  --yakh-ivory:     #EDE4D3;
  --yakh-pistachio: #7C9A6B;
  --yakh-muted:     #A8B4C9;      /* lifted for contrast on indigo */
  --yakh-line:      rgba(237,228,211,0.14);
  --font-body: 'Vazirmatn', system-ui, sans-serif;
}

/* ---------- full-bleed ground ---------- */
html, body, .app-holder, .ui, .columns-area,
.public-layout, .landing-page, .container-alt, #mastodon {
  background-color: var(--yakh-ink) !important;
  color: var(--yakh-ivory) !important;
}

/* ---------- type ---------- */
html, body, button, input, select, textarea, optgroup,
.status__content, .compose-form__textarea, .app-holder, .simple_form {
  font-family: var(--font-body) !important;
}
h1, h2, h3, .column-header__title, .logo-container h1 {
  font-family: var(--font-body) !important;
  font-weight: 900 !important;
  letter-spacing: -0.01em;
}
/* Perso-Arabic needs more leading than Mastodon's Latin defaults */
.status__content, .account__header__content,
.compose-form__textarea, .simple_form p, .form-container p {
  line-height: 1.85 !important;
}

/* ---------- legibility: the v1 failure ----------
   Mastodon styles these for its own surface; on the indigo
   ground they fell to near-invisible.                        */
label, .simple_form label, .simple_form .hint, .simple_form p,
.form-container p, .hint, .lead, .authorize-follow__avatar + p,
.simple_form .input span, .simple_form__overlay-area__blurred {
  color: var(--yakh-ivory) !important;
  opacity: 1 !important;
}
.hint, .simple_form .hint, .status__relative-time,
.display-name__account, .text-muted {
  color: var(--yakh-muted) !important;
}
abbr[title], .simple_form abbr { color: var(--yakh-madder-hi) !important; text-decoration: none; }

/* ---------- surfaces ---------- */
.drawer__inner, .column-header, .compose-form,
.status, .account__header__bar, .navigation-bar, .search__input,
.column > .scrollable {
  background-color: var(--yakh-indigo) !important;
  color: var(--yakh-ivory) !important;
}
.status { border-bottom: 1px solid var(--yakh-line) !important; }

/* ---------- signature: بوته جقه (boteh jeqeh) ----------
   The paisley motif. On termeh, on every grandmother's shawl,
   on Tabriz carpets — it carries recognition and warmth that
   abstract geometry doesn't. Used three ways: a repeating band
   under column headers, a large watermark behind auth pages,
   and a marker on empty states.                              */

/* The boteh silhouette, closed: bulbous body, tip bent over and
   hooked inward. Drawn once here, reused at three scales.
   d = M48 136 C14 132 6 100 10 72 C14 40 34 14 58 10
       C78 7 92 20 88 38 C85 52 72 58 62 52 C54 47 54 36 62 32
       C78 44 84 80 78 104 C72 126 60 136 48 136 Z            */

/* A repeating boteh band under the column header was tried and
   removed: at 13px the motif reads as noise, and the watermark
   already carries it. One ornament, not three. */
.column-header { border-bottom: 1px solid var(--yakh-line) !important; }

/* ---------- Mastodon 4.6 light surfaces ----------
   4.6 ships no semantic background variables (only raw
   --color-grey-* scales), so these are targeted by class.
   Found by enumerating every element with luminance > 140.  */
.columns-area__panels__main,
.tabs-bar__wrapper,
.ui__navigation-bar,
.search__popout,
.upload-area__background,
.dropdown-menu,
.modal-root__modal,
.compose-form__upload,
[class*='skip_links'] {
  background-color: var(--yakh-ink) !important;
  color: var(--yakh-ivory) !important;
}
.compose-form__highlightable,
textarea, .autosuggest-textarea__textarea, .spoiler-input__input {
  background-color: var(--yakh-indigo) !important;
  color: var(--yakh-ivory) !important;
}
.search__popout, .dropdown-menu, .modal-root__modal {
  border: 1px solid var(--yakh-line) !important;
}
.columns-area__panels__main { border-inline: 1px solid var(--yakh-line) !important; }

/* watermark behind auth / landing pages — termeh, very quiet */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='140' viewBox='0 0 100 145'%3E%3Cpath d='M48 136 C14 132 6 100 10 72 C14 40 34 14 58 10 C78 7 92 20 88 38 C85 52 72 58 62 52 C54 47 54 36 62 32 C78 44 84 80 78 104 C72 126 60 136 48 136 Z' fill='none' stroke='%23EDE4D3' stroke-width='4' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 150px 210px;
  opacity: 0.05;
}
.app-holder, .public-layout, .form-container, .columns-area,
.container-alt, .landing-page { position: relative; z-index: 1; }

/* empty states get a boteh instead of Mastodon's default glyph.
   These containers are flex rows by default, so the motif landed
   beside the text instead of above it. */
.empty-column-indicator, .regeneration-indicator {
  flex-direction: column !important;
  align-items: center !important;
  text-align: center;
}
.empty-column-indicator::before, .regeneration-indicator::before {
  content: '';
  display: block;
  flex: none;
  width: 76px; height: 106px;
  margin: 0 auto 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='145' viewBox='0 0 100 145'%3E%3Cpath d='M48 136 C14 132 6 100 10 72 C14 40 34 14 58 10 C78 7 92 20 88 38 C85 52 72 58 62 52 C54 47 54 36 62 32 C78 44 84 80 78 104 C72 126 60 136 48 136 Z' fill='none' stroke='%23E0A32E' stroke-width='5' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.5;
}

/* ---------- accents ---------- */
a, .status__content a, .link-button { color: var(--yakh-saffron) !important; }
a:hover { color: var(--yakh-ivory) !important; }

/* every button variant Mastodon ships, including auth submits */
.button, button.button, .btn, button.btn, input[type=submit],
button[type=submit], .block-button, .button--block, .button.button--block {
  background-color: var(--yakh-madder) !important;
  background-image: none !important;
  color: var(--yakh-ivory) !important;
  border: none !important;
  border-radius: 6px !important;
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
}
.button:hover, button.button:hover, .btn:hover,
button[type=submit]:hover, input[type=submit]:hover {
  background-color: var(--yakh-madder-hi) !important;
}

.icon-button.active, .status__action-bar-button.active,
.column-link--transparent.active { color: var(--yakh-saffron) !important; }

/* Mastodon's primary #5638cc still leaked into the compose bar,
   dropdown chips and icon buttons. */
.icon-button, .dropdown-button, .dropdown-button__label,
.compose-form__upload-button-icon, .compose-form__poll-button-icon,
.compose-form__highlightable .icon-button {
  color: var(--yakh-saffron) !important;
}
.dropdown-button { border-color: var(--yakh-line) !important; }
.icon-button:hover, .dropdown-button:hover { color: var(--yakh-ivory) !important; }
.icon-button svg, .dropdown-button svg { color: inherit !important; fill: currentColor; }
:root { --outline-focus-default: 2px solid var(--yakh-saffron); }

/* ---------- forms ---------- */
.simple_form input[type=text], .simple_form input[type=email],
.simple_form input[type=password], .simple_form textarea,
.search__input, input.string, input.email, input.password {
  background-color: var(--yakh-indigo) !important;
  color: var(--yakh-ivory) !important;
  border: 1px solid var(--yakh-line) !important;
  border-radius: 6px !important;
}
.simple_form input::placeholder, .simple_form textarea::placeholder {
  color: var(--yakh-muted) !important;
}
.simple_form input:focus, .simple_form textarea:focus {
  border-color: var(--yakh-saffron) !important;
  outline: 2px solid rgba(224,163,46,0.35) !important;
  outline-offset: 1px;
}

/* ---------- wordmark ---------- */
.logo--wordmark, .nav-title img, .navbar .logo { display: none !important; }
.logo-container h1::before, .nav-title::before {
  content: 'یاخچی‌گرام';
  font-family: var(--font-body);
  font-weight: 900;
  font-size: 1.6rem;
  color: var(--yakh-saffron);
}

/* ---------- about page ----------
   .prose renders at rgb(24,24,32) — near-black on the dark
   ground — and defaults to ltr, which is wrong for Azeri.     */
.prose, .prose p, .prose li, .prose strong, .prose em,
.about__section__body, .about__section__body p {
  color: var(--yakh-ivory) !important;
}
.prose h1, .prose h2, .prose h3, .prose h4 {
  color: var(--yakh-saffron) !important;
  font-weight: 900 !important;
}
.about__section__body .prose {
  direction: rtl;
  text-align: right;
}
.about__section__body .prose h1,
.about__section__body .prose h2,
.about__section__body .prose h3 { text-align: right; }

.about__section__title, .about__section__title button,
.about__section button, .about h3, .about h4 {
  color: var(--yakh-saffron) !important;
}
.about__section { border: 1px solid var(--yakh-line) !important; }
.about__header__hero { border-radius: 8px; }

/* ---------- sign-up: the gate ----------
   Two strings here are supplied by Mastodon's English locale and
   cannot be changed from admin settings before the Stage 2 build:
   (a) p.lead claims users can follow anyone on the fediverse,
       which is FALSE under LIMITED_FEDERATION_MODE;
   (b) the reason-field hint is generic and carries no question.
   Replaced by hiding the source text and injecting ours. This is
   a stopgap; the locale build supersedes it.                    */

p.lead { font-size: 0 !important; line-height: 0 !important; }
p.lead::after {
  content: 'بۇرا بیزیم‌کیلرین یئریدیر. فیس‌بوک دئییل، اینستاگرام دئییل. ایکی هفته‌لیک بیر زارافاتدیر.';
  display: block;
  font-size: 1.05rem; line-height: 1.9;
  direction: rtl; text-align: right;
  color: var(--yakh-ivory);
}

.user_invite_request_text > label { font-size: 0 !important; }
.user_invite_request_text > label::after {
  content: 'سوال';
  display: block;
  font-size: 1.15rem; font-weight: 900;
  direction: rtl; text-align: right;
  color: var(--yakh-saffron);
  margin-bottom: 6px;
}
.user_invite_request_text .hint { font-size: 0 !important; line-height: 0 !important; }
.user_invite_request_text .hint::after {
  content: 'بیر دنه تبریز سؤزو یاز کی، فارسلار باشا دوشمه‌سین. جاوابلاری اؤزوموز اوخویوروق — گوگل ترجمه بۇردا ایشله‌مز.';
  display: block;
  font-size: 0.98rem; line-height: 1.85;
  direction: rtl; text-align: right;
  color: var(--yakh-ivory);
  margin-bottom: 10px;
}
.user_invite_request_text textarea { direction: rtl; text-align: right; }

/* progress tracker: labels were invisible, circles Mastodon purple */
.progress-tracker { color: var(--yakh-ivory) !important; }
.progress-tracker li, .progress-tracker span, .progress-tracker div {
  color: var(--yakh-muted) !important;
}
.progress-tracker .active, .progress-tracker li.active span { color: var(--yakh-saffron) !important; }
.progress-tracker .circle, .progress-tracker li::before, .progress-tracker span.circle {
  background-color: var(--yakh-indigo) !important;
  border-color: var(--yakh-saffron) !important;
}
.progress-tracker li.active .circle, .progress-tracker .active::before {
  background-color: var(--yakh-madder) !important;
  border-color: var(--yakh-madder) !important;
}

input[type=checkbox] { accent-color: var(--yakh-madder); }

/* ---------- quality floor ---------- */
:focus-visible { outline: 2px solid var(--yakh-saffron) !important; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- sign-up rules step ----------
   Rule text rendered near-black on the dark ground; the ordinal
   badges kept Mastodon purple.                                 */
.rules-list li, .rules-list__text, ol.rules-list li,
.rules-list li div, .rules-list p {
  color: var(--yakh-ivory) !important;
}
.rules-list li { border-bottom: 1px solid var(--yakh-line) !important; }
.rules-list li::before, .rules-list__number, .rules-list li > span:first-child {
  background-color: var(--yakh-madder) !important;
  color: var(--yakh-ivory) !important;
}
/* Azeri rule text is RTL; scope it to the rule body only so no
   English string is dragged into a mixed-direction context. */
.rules-list li, .rules-list__text { direction: rtl; text-align: right; }

/* ---------- de-branding ----------
   Mastodon's name and fediverse pitch leak into six surfaces.
   Nobody cares what the code is; and the fediverse copy is false
   here anyway under LIMITED_FEDERATION_MODE.
   NOTE: the "view source" link is deliberately KEPT — Mastodon is
   AGPL and §13 obliges offering source to network users. Only its
   prominence is reduced.                                        */

/* "<domain> is one of the many independent Mastodon servers…" */
.server-banner__introduction { font-size: 0 !important; line-height: 0 !important; }
.server-banner__introduction::after {
  content: 'یاخچی‌گرام بیزیم‌کیلرین یئریدیر. دعوتنامه ایله گیرمک اولار.';
  display: block; font-size: 0.95rem; line-height: 1.85;
  direction: rtl; text-align: right; color: var(--yakh-ivory);
}

/* "Mastodon is the best way to keep up with what's happening." */
.sign-in-banner strong { font-size: 0 !important; line-height: 0 !important; }
.sign-in-banner strong::after {
  content: 'بیزیم‌کیلرین یئری.';
  display: block; font-size: 1.05rem; font-weight: 900; line-height: 1.9;
  direction: rtl; text-align: right; color: var(--yakh-ivory);
}
.sign-in-banner p:not(:has(strong)) { font-size: 0 !important; line-height: 0 !important; }
.sign-in-banner p:not(:has(strong))::after {
  content: 'دعوتنامه ایله، یا دا بیر سوالا جاواب وئرمکله.';
  display: block; font-size: 0.95rem; line-height: 1.85;
  direction: rtl; text-align: right; color: var(--yakh-ivory);
}

/* footer section headed "Mastodon:" */
[class*='link_footer__heading'] { font-size: 0 !important; }
[class*='link_footer__heading']::after {
  content: 'یاخچی‌گرام';
  font-size: 0.85rem; font-weight: 900; color: var(--yakh-saffron);
}

/* the Mastodon glyph in the nav rail */
a.column-link--logo svg, a.column-link--logo img { display: none !important; }
a.column-link--logo::after {
  content: 'یاخچی‌گرام';
  font-weight: 900; font-size: 1.25rem; color: var(--yakh-saffron);
}

/* ---------- autofill ----------
   Browser autofill paints its own light background over inputs,
   which broke the dark form styling on any returning visitor. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--yakh-ivory) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--yakh-indigo) inset !important;
  box-shadow: 0 0 0 1000px var(--yakh-indigo) inset !important;
  caret-color: var(--yakh-ivory);
  border: 1px solid var(--yakh-line) !important;
}