/* Urda's Forged Status Line - per-site styles, layered on top of anvil-core.css.
   Holds only FSL-specific styling: the status line itself, the demo gallery,
   and install-block highlighting. All design tokens and shared chrome
   (including the terminal window, tabs, and buttons) come from anvil-core.css.
   Nothing here redefines a shared class; additions to shared classes (footer,
   sections) are additive only. */

.brand img { border-radius: 7px; display: block; }

/* status line */
.statusline {
  font-family: var(--mono);
  /* shrink the fixed-width line to fit. cqi sizes to the real container (beats iOS
     safe-area insets). the vw line is a fallback if container queries don't apply, so
     the font can never fall back to a full 16px that overflows and scrolls. */
  font-size: clamp(6px, 2vw, 14px);
  font-size: clamp(6px, 1.8cqi, 16px);
  line-height: 1.35;
}
.cap {
  white-space: normal;     /* the narration line is prose; let it wrap */
  font-size: .82em;
  margin-bottom: .55em;
}
.dim { opacity: .55; }
.line {
  white-space: pre;  /* preserve the literal spaces in the empty bar track */
  /* terminal-tight rows: a real terminal's cell height is ~1.0-1.1x the font's
     em-box, so the block glyph (see the bar fill spans) reaches the row's top
     and bottom edge instead of floating inside extra leading. */
  line-height: 1.05;
}

/* status line color runs */
.sl-green  { color: var(--sl-green); }
.sl-yellow { color: var(--sl-yellow); }
.sl-red    { color: var(--sl-red); }
.sl-cyan   { color: var(--sl-cyan); }
.sl-blue   { color: var(--sl-blue); }
.sl-gray   { color: var(--sl-gray); }
.sl-white  { color: var(--sl-white); }
/* Light-theme-only runs: the renderer emits these codes only under THEME=light
   (see gen_site.py's _CLS). Their defaults keep the palette's ink/gray/cyan; the .light card
   below restyles them for its pale surface. */
.sl-ink     { color: var(--ink); }
.sl-gray240 { color: var(--sl-gray); }
.sl-teal30  { color: var(--sl-cyan); }

.caption {
  margin: 16px 6px 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
}
.caption a { color: var(--ember); text-decoration: none; }
.caption a:hover { text-decoration: underline; }

/* explore nav: prominent buttons to the gallery and config */
.explore {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin: 0 0 48px;
}

/* highlights */
.highlights { margin: 0 0 48px; }
.highlights h2 { font-size: 18px; margin: 0 0 14px; }
.hi {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 28px;
}
.hi li { color: var(--muted); font-size: 14px; line-height: 1.6; }
.hi b { color: var(--ink); font-weight: 600; }
.hi code { font-family: var(--mono); color: var(--ember); font-size: .92em; }
@media (max-width: 620px) { .hi { grid-template-columns: 1fr; } }

/* install */
.install { margin: 0 0 48px; }
.install h2 { font-size: 18px; margin: 0 0 14px; }
.install p { color: var(--muted); margin: 16px 2px; font-size: 14px; }
.install p code { font-family: var(--mono); color: var(--ember); font-size: .92em; }
pre {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  overflow-x: auto;
  margin: 0;
}
pre code {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink);
  line-height: 1.7;
}

/* install code highlighting (hand-rolled spans, no JS), over the shared palette */
.hl-key   { color: var(--sl-blue); }   /* json property names    */
.hl-str   { color: var(--sl-green); }  /* strings, incl the url  */
.hl-num   { color: var(--sl-yellow); } /* numbers                */
.hl-cmd   { color: var(--ember); }     /* shell commands         */
.hl-path  { color: var(--sl-cyan); }   /* paths                  */
.hl-punct { color: var(--sl-gray); }   /* braces, colons, commas */

/* footer: version stamp styling (base .foot comes from anvil-core.css) */
.foot .version a {
  color: inherit;   /* stay muted so the stamp reads as provenance, not a primary link */
  text-decoration: underline dotted;
  text-underline-offset: 2px;
}
.foot .version a:hover,
.foot .version a:focus-visible {
  color: var(--ember);
  text-decoration-style: solid;
}

/* gallery (gallery/index.html) */
.gallery { display: flex; flex-direction: column; gap: 16px; margin: 0 0 48px; }
.card {
  background: var(--screen);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  overflow-x: auto;
  container-type: inline-size;   /* each card's status line sizes to the card, not the viewport */
}

/* A tab card's static subtitle: sits above the tab row, outside the fieldset, so it can't
   change or reflow when a tab is clicked (unlike the monospace .cap inside each status line). */
.cardsub {
  margin: 0 0 12px;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.5;
}

/* The Theme gallery card floods light when its Light tab is selected. The tabs are pure CSS
   radios, so :has() lets the card react to the checked radio (id g-theme-1, the Light tab in
   gen_site.py) with no JS: the whole card, edge to edge (cardsub and tab row included), turns
   into a light-terminal surface, and reverts to the shared dark card when Dark is checked.
   The shared .card already supplies the border, radius, and padding, so this only recolors.
   All rules are additive and scoped under the :has() state; no shared class is redefined, and
   every other card (and this card's Dark state) is untouched. */
.card:has(#g-theme-1:checked) {
  background: #f6f8fa;   /* pale terminal surface, like a light-mode terminal */
  color: #1f2328;        /* default ink for unspanned text and emoji on the surface */
}
/* The static subtitle sits on the light surface here; the shared muted token is too faint on
   pale, so darken it to readable dark-on-light prose. */
.card:has(#g-theme-1:checked) .cardsub { color: #57606a; }
/* Inactive tabs: dark label on a pale chip so the tab row stays legible on the light surface.
   The checked tab keeps the shared ember styling (this rule only matches the unchecked ones),
   and its higher specificity also holds the label dark through the shared :hover rule. */
.card:has(#g-theme-1:checked) .tabradio:not(:checked) + .tab {
  color: #1f2328;
  background: #eaeef2;
  border-color: #d0d7de;
}
/* Scoped color overrides: the shared tokens are tuned for a black terminal, so the brighter
   ones wash out on the pale surface. These darker tones keep each run recognizably itself
   (green/yellow/red bars, cyan/blue accents) while meeting contrast on the light surface. */
.card:has(#g-theme-1:checked) .sl-ink     { color: #1f2328; }   /* model name: dark ink       */
.card:has(#g-theme-1:checked) .sl-gray240 { color: #585858; }   /* mid-gray of 256-color 240  */
.card:has(#g-theme-1:checked) .sl-teal30  { color: #008787; }   /* dark teal of 256-color 30  */
.card:has(#g-theme-1:checked) .sl-green   { color: #1a7f37; }   /* bar fill: darker green     */
.card:has(#g-theme-1:checked) .sl-yellow  { color: #9a6700; }   /* bar fill: amber            */
.card:has(#g-theme-1:checked) .sl-red     { color: #cf222e; }   /* bar fill: darker red       */
.card:has(#g-theme-1:checked) .sl-cyan    { color: #1b7c83; }   /* accent: darker teal        */
.card:has(#g-theme-1:checked) .sl-blue    { color: #0969da; }   /* accent: darker blue        */

/* generic content section: the config page "note" variant (base .section comes
   from anvil-core.css) */
.section .note { font-size: 13px; }

/* the only inline prose link on the site lives in a note. core styles links
   per chrome component (.navlinks, .tagline, .foot), none of which reach here,
   so without this the browser default blue wins. same treatment as .caption a. */
.note a { color: var(--ember); text-decoration: none; }
.note a:hover { text-decoration: underline; }

/* portrait phones: the fixed-width line is wider than the screen, so it stays
   scrollable (the .screen / .card overflow-x) and this hint nudges toward
   landscape, where it fits at full size. hidden in landscape and on desktop. */
.rotate-hint { display: none; }
@media (max-width: 620px) and (orientation: portrait) {
  .rotate-hint {
    display: block;
    margin: 12px 2px;
    text-align: center;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
  }
}