/* The English face. «فونت انگلیسی سایت را این فونت بکن» — the owner pointed at
   Anthropic Serif, which is Anthropic's own and not licensed to anyone else.
   Source Serif 4 (SIL Open Font License, /assets/source-serif-4-OFL.txt) is
   the nearest open face: a text serif with optical sizes, so it holds up at
   12px in a menu and at 30px in a heading. Latin only, by unicode-range:
   Persian letters fall through to Estedad, and the joiners (U+200C/D) stay
   out of this range so a word like «می‌شود» never splits across two fonts.
   Self-hosted, like every face here: Google's hosts are unreliable from Iran. */
@font-face{font-family:'Navidix Serif';src:url('/assets/source-serif-4-latin.woff2')format('woff2');font-weight:200 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-200B,U+2010-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Navidix Serif';src:url('/assets/source-serif-4-latin-italic.woff2')format('woff2');font-weight:200 900;font-style:italic;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-200B,U+2010-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* nvx-brand.css — the Navidix design system. One file, one source of truth.
 *
 * Before this there were two identities on the same screen: the shell painted
 * itself red (--red #ef3d4b) and the console inside it painted itself gold
 * (--s-brass #C9A227). A designer moving from the rail to the prompt bench
 * crossed a brand boundary without leaving the page. Colours were also
 * declared in four places — studio.html's <style>, and three CSS files — so
 * changing one changed a third of the product.
 *
 * The hierarchy, and it matters more than the hues:
 *
 *     black / near-black        the ground, almost everything
 *       graphite / cool gray    surfaces, borders, metadata, technical UI
 *         deep blue undertone   the neutrals are blue-biased, never flat gray
 *           RED                 signature, and rationed
 *
 * Red is the brand accent, not the page. It marks what a person acts on or
 * must notice — primary buttons, the active destination, the selected model,
 * credit figures, progress, notifications — and nothing else. Saturating the
 * screen with it would destroy the very hierarchy that makes it read as a
 * signature.
 *
 * The neutrals carry a slight blue bias (they are mixed toward the steel, not
 * toward the red) because a pure gray next to a warm red reads as unconsidered,
 * and because the blue undertone is what makes the whole thing feel technical
 * rather than decorative.
 *
 * Anything below the ALIASES rule is legacy: the old token names of the shell
 * and the console, pointed at this system. New work uses --navidix-*.
 */

:root {
  /* ── signature ─────────────────────────────────────────────────────────
     One red, three pressures. The soft and line variants exist so a surface
     can carry the brand without a fill — which is how it stays rationed. */
  --navidix-red:          #E4323F;
  --navidix-red-hover:    #F04C57;
  --navidix-red-press:    #B81B27;
  --navidix-red-soft:     rgba(228, 50, 63, .12);
  --navidix-red-line:     rgba(228, 50, 63, .38);
  --navidix-red-glow:     rgba(228, 50, 63, .24);
  --navidix-red-ink:      #FF8F93;   /* red as text on a dark ground, legible */

  /* ── black and the graphite stack ──────────────────────────────────────
     Five steps, all blue-biased. Deeper than the surface they sit on, never
     lighter, so depth reads the same everywhere. */
  --navidix-black:        #06080C;
  --navidix-sunk:         #04060A;
  --navidix-surface:      #0D1117;
  --navidix-surface-2:    #131923;
  --navidix-surface-3:    #1A2130;
  --navidix-graphite:     #39424F;

  /* ── the technical layer ───────────────────────────────────────────────
     Steel and deep blue do the structural work: metadata, kickers, model ids,
     request ids, anything a person reads rather than presses. */
  --navidix-blue:         #6E9AE0;
  --navidix-blue-deep:    #1E2C42;
  --navidix-blue-soft:    rgba(110, 154, 224, .11);
  --navidix-blue-bright:  #7FB8FF;   /* blue as an ACTION, not as metadata */

  /* ── violet ────────────────────────────────────────────────────────────
     The third colour the mark is mixed from, and until now the only one with
     no token: it existed as a literal in two gradients and nowhere else.
     Blue is what a reader reads and red is what the brand signs with, which
     left the one thing a person PRESSES with no colour of its own — «بساز»
     borrowed the red, and a primary action painted the same red as every
     warning strip beside it is a fourth thing on the screen shouting in the
     same voice. Blue into violet is the action. */
  --navidix-violet:       #8B5CF6;
  --navidix-violet-deep:  #6D3FE0;
  --navidix-violet-soft:  rgba(139, 92, 246, .13);
  --navidix-violet-line:  rgba(139, 92, 246, .42);
  --navidix-steel:        #7E8CA0;
  --navidix-gray:         #8A94A6;

  /* ── lines ─────────────────────────────────────────────────────────────
     Tinted with the steel, not with white: a white hairline on this ground
     goes gray-purple and looks like a rendering artefact. */
  --navidix-border:       rgba(174, 200, 236, .16);
  --navidix-border-2:     rgba(174, 200, 236, .30);
  --navidix-border-3:     rgba(174, 200, 236, .46);

  /* ── text ──────────────────────────────────────────────────────────────
     Night backlight legibility pass: every ink step lifted so body text,
     buttons and labels read clearly on the dark ground. */
  --navidix-text:         #F4F7FC;
  --navidix-text-2:       #C9D2E0;
  --navidix-muted:        #A2ADBF;
  --navidix-dim:          #7E8AA0;

  /* ── state ─────────────────────────────────────────────────────────────
     Semantic colour is separate from the accent, and deliberately so: when
     the brand colour is red, an error painted the same red is invisible. So
     failure is a lighter, warmer red used as ink on a tinted surface with an
     icon — never as a filled button, which is the signature's job alone. */
  --navidix-ok:           #4FB286;
  --navidix-ok-soft:      rgba(79, 178, 134, .11);
  --navidix-warn:         #D9A441;
  --navidix-warn-soft:    rgba(217, 164, 65, .10);
  --navidix-warn-line:    rgba(217, 164, 65, .30);
  --navidix-bad:          #FF6B5A;
  --navidix-bad-soft:     rgba(255, 107, 90, .09);
  --navidix-bad-line:     rgba(255, 107, 90, .30);

  /* ── data visualisation ────────────────────────────────────────────────
     Ordered so the first series is the brand and the rest recede. Semantic
     colours above are never used here — a bar is not an error. */
  --navidix-viz-1:        #E4323F;
  --navidix-viz-2:        #6E9AE0;
  --navidix-viz-3:        #7E8CA0;
  --navidix-viz-4:        #D9A441;
  --navidix-viz-5:        #4FB286;
  --navidix-viz-6:        #39424F;

  /* ── channels ──────────────────────────────────────────────────────────
     The same colours as raw RGB triples, so any alpha can be composed from a
     token instead of a literal — rgba(var(--navidix-red-rgb), .18). Without
     these, every translucent fill in the product is a hardcoded colour that
     no theme change can reach, which is how the studio ended up with ninety
     of them. Keep each in step with its opaque partner above. */
  --navidix-red-rgb:      228, 50, 63;
  --navidix-blue-rgb:     110, 154, 224;
  --navidix-blue-bright-rgb: 127, 184, 255;
  --navidix-violet-rgb:   139, 92, 246;
  --navidix-steel-rgb:    126, 140, 160;
  --navidix-warn-rgb:     217, 164, 65;
  --navidix-ok-rgb:       79, 178, 134;
  --navidix-bad-rgb:      255, 107, 90;
  --navidix-line-rgb:     158, 180, 214;
  --navidix-black-rgb:    6, 8, 12;
  --navidix-surface-rgb:  13, 17, 23;
  --navidix-surface-2-rgb: 19, 25, 35;
  --navidix-surface-3-rgb: 26, 33, 48;

  /* ── scrims ────────────────────────────────────────────────────────────
     Translucent grounds. A colour with alpha cannot be composed from an opaque
     token, so these are the only place a literal is allowed to live — and they
     live here, with everything else. */
  --navidix-scrim:        rgba(6, 8, 12, .92);
  --navidix-scrim-2:      rgba(13, 17, 23, .97);
  --navidix-scrim-deep:   rgba(4, 6, 10, .70);
  --navidix-steel-soft:   rgba(158, 180, 214, .06);

  /* ── form ──────────────────────────────────────────────────────────────*/
  --navidix-r:            10px;
  --navidix-r-lg:         14px;
  --navidix-r-pill:       999px;
  --navidix-shadow:       0 24px 70px rgba(0, 0, 0, .34);
  --navidix-shadow-red:   0 12px 30px rgba(228, 50, 63, .20);
  --navidix-mono:         'DM Mono',Estedad, ui-monospace, SFMono-Regular, Menlo, monospace;
  --navidix-sans:         'Navidix Serif', Estedad, system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ══ ALIASES ══════════════════════════════════════════════════════════
     Everything below is an old name kept working. The shell's palette and
     the console's palette both land here, which is what makes the two halves
     of the studio one product. Do not add to this list — it should only ever
     shrink. */

  /* the shell (studio.html) */
  --bg:                   var(--navidix-black);
  --panel:                var(--navidix-surface);
  --panel2:               var(--navidix-surface-2);
  --line:                 var(--navidix-border-2);
  --line2:                var(--navidix-border-2);
  --text:                 var(--navidix-text);
  --muted:                var(--navidix-muted);
  --dim:                  var(--navidix-dim);
  --red:                  var(--navidix-red);
  --red2:                 var(--navidix-red-press);
  --blue:                 var(--navidix-blue);
  --mint:                 var(--navidix-ok);
  --gold:                 var(--navidix-warn);
  --shadow:               var(--navidix-shadow);

  /* the console (nvx-studio-console.css). --s-brass was gold; it is the
     signature now, because everything it marked — the cost figure, the make
     button, the chosen model — is exactly what the signature is for. */
  --s-bg:                 var(--navidix-black);
  --s-pane:               var(--navidix-surface);
  --s-pane2:              var(--navidix-surface-2);
  --s-sunk:               var(--navidix-sunk);
  --s-line:               var(--navidix-border);
  --s-line2:              var(--navidix-border-2);
  --s-ink:                var(--navidix-text);
  --s-ink2:               var(--navidix-text-2);
  --s-mute:               var(--navidix-muted);
  --s-dim:                var(--navidix-dim);
  --s-brass:              var(--navidix-red);
  --s-brass-soft:         var(--navidix-red-soft);
  --s-brass-line:         var(--navidix-red-line);
  --s-steel:              var(--navidix-steel);
  --s-ok:                 var(--navidix-ok);
  --s-warn:               var(--navidix-warn);
  --s-bad:                var(--navidix-bad);
  --s-r:                  var(--navidix-r);
  --s-r-lg:               var(--navidix-r-lg);
  --s-mono:               var(--navidix-mono);
}

/* ── brand primitives ─────────────────────────────────────────────────────
   Shared shapes rather than repeated declarations, so a change lands
   everywhere at once. */

/* The one filled red control on a screen. More than one and neither is
   primary any more. */
.nvx-primary {
  border: 0;
  background: linear-gradient(135deg, var(--navidix-red), var(--navidix-red-press));
  color: #fff;
  font-weight: 700;
  border-radius: var(--navidix-r);
  box-shadow: var(--navidix-shadow-red);
  transition: filter .18s, transform .18s;
}
.nvx-primary:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }
.nvx-primary:active:not(:disabled) { transform: translateY(0); filter: brightness(.94); }
.nvx-primary:disabled { opacity: .45; box-shadow: none; cursor: not-allowed; }

/* A figure the reader is meant to weigh — credits, a cost, a balance. Lining
   digits, monospace, brand red. */
.nvx-figure {
  font: 600 15px var(--navidix-mono);
  color: var(--navidix-red);
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: isolate;
}

/* Technical metadata: a model id, a request id, a token count. Steel, never
   red — it is read, not acted on. */
.nvx-meta {
  font: 11px var(--navidix-mono);
  color: var(--navidix-steel);
  letter-spacing: .04em;
  direction: ltr;
  unicode-bidi: isolate;
}

/* Section eyebrows. */
.nvx-kicker {
  font: 10px var(--navidix-mono);
  letter-spacing: .15em;
  color: var(--navidix-blue);
  direction: ltr;
  unicode-bidi: isolate;
}

/* Keyboard focus has to be visible, and on this ground the brand red is both
   the clearest ring and free brand presence. */
:where(button, a, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--navidix-red);
  outline-offset: 2px;
  border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .nvx-primary { transition: none; }
  .nvx-primary:hover:not(:disabled) { transform: none; }
}

/* ══ HIERARCHY CORRECTIONS ════════════════════════════════════════════════
 *
 * Pointing the old gold token at the signature red made everything gold had
 * marked turn red at once — the make button, the cost, the active rail item,
 * and also a service notice and a finished-generation heading, which are not
 * things anyone acts on. The result read as a red page rather than a page
 * with a red signature, which is the one failure mode the brand can't have.
 *
 * So red is taken back off everything that is merely *read*, and the blue and
 * steel layer the brand calls for is put where it belongs: eyebrows, section
 * labels, rail icons, model ids, request ids — the technical furniture a
 * designer reads past on the way to the work.
 */

/* ── the technical layer, made visible ─────────────────────────────────────
   Eyebrows and section labels take the blue outright rather than a steel that
   is only technically not-gray: the brand is black + red + a blue/steel
   substrate, and a substrate nobody can see is not part of an identity. Blue
   here also does real work — it separates the furniture you read past
   (MAKE, SUBJECT, OPTIONS) from the content you read. */
.studio-console .kicker,
.s-card__head span,
.ag__kicker,
.nvx-kicker {
  color: var(--navidix-blue);
  opacity: .82;
}
.studio-console .nav-label,
.studio-console .crumb {
  color: var(--navidix-steel);
}
.studio-console .nav button svg { color: var(--navidix-steel); opacity: .9; }
.studio-console .nav button:hover svg { color: var(--navidix-blue); opacity: 1; }
.studio-console .nav button.active svg { color: var(--navidix-red); opacity: 1; }

/* Panels get the deep-blue undertone as a wash rather than a fill, so the
   ground stays near-black and the surface still reads as a distinct layer. */
.studio-console .s-card,
.studio-console .s-out__c {
  background:
    linear-gradient(180deg, rgba(var(--navidix-blue-rgb), .028), transparent 60%),
    var(--navidix-surface);
}

/* A model id, a request id, a token count: read, never pressed. */
.s-model__id, .s-chip__id, .nvx-meta {
  color: var(--navidix-steel);
  font-family: var(--navidix-mono);
  direction: ltr;
  unicode-bidi: isolate;
}

/* ── things that are not the signature ───────────────────────────────────── */

/* A standing notice about the shop is information, not an alarm and not a
   call to action. Amber on the technical ground, and its emphasis is the
   text weight rather than the brand colour. */
.studio-console .service-notice {
  border-color: var(--navidix-warn-line) !important;
  background: var(--navidix-warn-soft) !important;
}
.studio-console .service-notice strong { color: var(--navidix-warn); }

/* A finished generation announces itself by the card's red edge, not by
   painting the word "done" in the brand colour — success is not an action. */
.s-out__c--done { border-inline-start: 2px solid var(--navidix-red); }
.s-out__c--done .s-out__h b { color: var(--navidix-text); }

/* The credit figure keeps the signature — it is the number the whole product
   is about — but only the headline one. The lane under it (what you have,
   what this takes, what is left) is arithmetic to be read, not a call to
   action, so it stays on the text and technical colours. Scoped tightly for
   exactly that reason: `.s-cost b` would have swept the lane in with it. */
.s-cost > div:first-child > .s-quote__h > b { color: var(--navidix-red); }
.s-cost > div:first-child > b { color: var(--navidix-red); }