/* theme.css — THE design-system tokens (fonts + colour/radius custom properties) PLUS the
   components every page shares: the site nav bar (.topbar) and the site footer
   (.sitefoot), both further down this file.
   Linked by all six pages (/, /home/, /advisor/, /advisor-full/, /stats/, /help/). The SPA's SVG
   theme object `T` (constructor.js) reads these tokens off getComputedStyle at startup, so
   this file is the single source of truth for the palette. */
@font-face{font-family:'Fontin';src:url('/fonts/Fontin-Regular.ttf') format('truetype');font-weight:1 500;font-style:normal;font-display:swap;}
@font-face{font-family:'Fontin';src:url('/fonts/Fontin-Bold.ttf') format('truetype');font-weight:501 1000;font-style:normal;font-display:swap;}
@font-face{font-family:'Fontin SmallCaps';src:url('/fonts/Fontin-SmallCaps.ttf') format('truetype');font-weight:1 1000;font-style:normal;font-display:swap;}
@font-face{font-family:'Space Grotesk';src:url('/fonts/SpaceGrotesk-Variable.woff2') format('woff2');font-weight:300 700;font-style:normal;font-display:swap;}
@font-face{font-family:'JetBrains Mono';src:url('/fonts/JetBrainsMono-Variable.woff2') format('woff2');font-weight:100 800;font-style:normal;font-display:swap;}
:root{
  color-scheme: dark;
  /* surfaces */
  --canvas:#0B0E13; --surface:#121723; --surface-2:#18202E; --surface-3:#232D3D;
  --surface-3-hover:#2A3648; --border:#283242; --border-strong:#3A4659;
  /* text */
  --text:#E6EBF2; --text-2:#9AA6B8; --text-muted:#5F6B7E; --text-faint:#44505F;
  /* accent (steel) — TWEAKABLE: change --accent, soft/line follow (and the SVG graph
     picks it up automatically via T). */
  --accent:#5AA9E6; --accent-hover:#7DBAF0; --accent-deep:#2B5E84;
  --accent-soft: color-mix(in srgb, var(--accent) 13%, transparent);
  --accent-line: color-mix(in srgb, var(--accent) 33%, transparent);
  /* rarity-as-data */
  --rarity-normal:#E6EBF2; --rarity-magic:#8A9CFF; --rarity-rare:#E9D36A; --rarity-unique:#C87F3E;
  /* semantic */
  --ok:#4EC98A; --profit:#4EC98A; --bad:#E5675F; --loss:#E5675F;
  --edge:#4DB6C4; --reached:#4DB6C4; --info:#8A9CFF; --loop:#8A9CFF;
  /* misc */
  --popover:#1E2636; --popover-border:#3A4659; --grid-dot:#18202E;
  --shadow-panel:0 8px 30px rgba(0,0,0,.5);
  --overlay: color-mix(in srgb, var(--canvas) 62%, transparent);
  /* radii */
  --r-input:4px; --r-node:6px; --r-panel:8px; --r-pill:999px;
  /* site nav height — the constructor subtracts it from its 100vh layout */
  --topbar-h:46px;
  /* fonts — three tiers (all self-hosted): Space Grotesk = UI/body/small running text
     (crisp at small sizes); Fontin (PoE's own) = display headings, node titles & modifier
     names (the game-familiar text); JetBrains Mono = numbers/code in aligned tables. */
  --font-ui:'Space Grotesk',-apple-system,'Segoe UI',Roboto,system-ui,sans-serif;
  --font-display:'Fontin','Space Grotesk',-apple-system,'Segoe UI',serif;
  --font-smallcaps:'Fontin SmallCaps','Fontin',-apple-system,'Segoe UI',serif;
  --font-mono:'JetBrains Mono',ui-monospace,Menlo,'Cascadia Code',monospace;
}

/* --- site nav (poe.ninja-style top line) — the SAME markup on every page, copied
   verbatim into each HTML; only the `on` class moves. Static markup rather than a
   JS-injected bar so /home/, /help/ and /stats/ stay crawlable and the links work before any
   script runs. The rule the pages must keep: THE CURRENT PAGE IS NOT A LINK — its
   item is a <span class="tb-link on"> (accent + underline), everything else an <a>.
   The brand IS the home link, so on /home/ the brand carries `on` and no href.
   Sticky and full-bleed: the pages below it are centred wraps (home/help/advisor)
   or a full-width app (constructor), and a full-bleed bar is the one shape that
   sits right on both. z-index 25 keeps it under the SPA's #flash toast (30) and
   its modal panels/overlays, so nothing the app opens is covered by the nav. */
/* in-page anchors (help's TOC) must land BELOW the sticky bar, not under it */
html { scroll-padding-top: calc(var(--topbar-h) + 8px); }
.topbar { position:sticky; top:0; z-index:25; height:var(--topbar-h); display:flex; align-items:center;
          gap:24px; padding:0 18px; background:var(--surface); border-bottom:1px solid var(--border); }
.topbar .tb-brand { display:flex; align-items:center; gap:9px; height:100%; position:relative;
                    font:700 16px var(--font-smallcaps); letter-spacing:.02em; color:var(--text); text-decoration:none; }
.topbar .tb-logo { width:26px; height:26px; border-radius:6px; flex:none; color:var(--canvas);
                   background:linear-gradient(150deg, var(--accent), var(--accent-deep));
                   display:flex; align-items:center; justify-content:center; font:700 15px var(--font-smallcaps); }
a.tb-brand:hover { color:var(--accent-hover); }
.topbar nav { display:flex; align-items:center; gap:22px; height:100%; }
.topbar .tb-link { display:flex; align-items:center; height:100%; position:relative;
                   font:700 13.5px var(--font-ui); color:var(--text-2); text-decoration:none; white-space:nowrap; }
a.tb-link:hover { color:var(--text); }
/* current page: accent + the underline tab, and no href on the element */
.topbar .on { color:var(--accent); cursor:default; }
.topbar .on::after { content:''; position:absolute; left:-2px; right:-2px; bottom:-1px; height:2px;
                     background:var(--accent); border-radius:2px 2px 0 0; }
.topbar .tb-right { margin-left:auto; display:flex; align-items:center; gap:16px; }
/* The door to the policy map (/policy/), on both advisor pages. Deliberately
   quiet: it is a diagnostic view of the same answer, not a feature to steer
   people into, so it sits at the edge of legibility until it is hovered. */
.dnc { display:inline-block; margin-top:6px; font:500 10.5px var(--font-mono);
       color:var(--border-strong); text-decoration:none; letter-spacing:.03em; }
a.dnc:hover { color:var(--accent); text-decoration:underline; }

.topbar .tb-alt { font:500 11.5px var(--font-mono); color:var(--text-muted); text-decoration:none; white-space:nowrap; }
a.tb-alt:hover { color:var(--accent); }
.topbar .tb-alt.on::after { display:none; }   /* secondary links get colour only, no tab */
.topbar .tb-tag { font:500 11px var(--font-mono); color:var(--text-faint); white-space:nowrap; }
/* The bar must never be the thing that makes a page scroll sideways, so on narrow
   screens it sheds from the outside in: tagline, then the brand word and the secondary
   links (help / classic — both still reachable from the page footers), never the two
   nav items. Last rung (measured 2026-08-07 on a 320–390px phone): the words are gone
   but the pages that hang their own pill on the bar — the advisor's ✉ feedback — still
   pushed `.tb-right` past the edge, so the gaps close up too and the pill sheds its
   label on its own (the page owns that rule, next to where it styles the pill). */
@media (max-width:820px) { .topbar { gap:16px; padding:0 12px; } .topbar nav { gap:15px; }
                           .topbar .tb-tag { display:none; } }
@media (max-width:620px) { .topbar .tb-brand .tb-name, .topbar .tb-alt { display:none; } }
@media (max-width:430px) { .topbar { gap:11px; padding:0 10px; } .topbar nav { gap:13px; }
                           .topbar .tb-right { gap:10px; } }

/* --- site footer ---------------------------------------------------------
   The second piece of markup every document page shares, copied verbatim into
   each HTML like the bar above — same reason (no JS needed for the links to
   exist) and same rule: THE CURRENT PAGE IS NOT A LINK, it is a
   <span class="here">, and on /home/ the brand carries it.
   Columns, not one running sentence: the footer is the site map — the bar only
   carries the three places you go WHILE crafting — and a sentence with six
   middots in it buries the one link the reader scrolled down here for. Four
   grid cells: the brand + what this is, then craft / learn / project, then a
   full-width bottom strip for whatever provenance the PAGE owns (stats: the
   pace and the market date; home: the prices are live). The full-viewport
   pages — the constructor SPA, /policy/, /sim/ — carry no footer at all: they
   have no bottom to scroll to.
   The /files/ link is a comment placeholder (see `with_files_link` in
   server.rs); a host started without `--files` renders nothing there, which is
   why it must be a whole list item and never a middot-joined tail. */
.sitefoot { margin-top:44px; border-top:1px solid var(--border); padding:22px 0 4px;
            display:grid; gap:20px 34px; align-items:start;
            grid-template-columns:minmax(230px,2.1fr) repeat(3, minmax(120px,1fr)); }
.sitefoot .fcol { display:flex; flex-direction:column; gap:8px; min-width:0; }
.sitefoot .ft { font:600 10px var(--font-mono); letter-spacing:.16em; text-transform:uppercase;
                color:var(--text-faint); }
/* the brand is an <a> inside a .fcol too, and it keeps its own display type — hence
   :not(.fbrand) rather than a plain `a` (which would out-specify .fbrand and shrink it). */
.sitefoot .fcol a:not(.fbrand), .sitefoot .fcol .here { font:500 12.5px var(--font-ui);
                                                        text-decoration:none; color:var(--text-2); }
.sitefoot .fcol a:not(.fbrand):hover { color:var(--accent); }
.sitefoot .fcol .here { color:var(--text-faint); cursor:default; }
.sitefoot .fbrand { display:flex; align-items:center; gap:9px; text-decoration:none;
                    font:700 15px var(--font-smallcaps); letter-spacing:.02em; color:var(--text); }
.sitefoot .flogo { width:22px; height:22px; border-radius:5px; flex:none; color:var(--canvas);
                   background:linear-gradient(150deg, var(--accent), var(--accent-deep));
                   display:flex; align-items:center; justify-content:center;
                   font:700 13px var(--font-smallcaps); }
a.fbrand:hover { color:var(--accent-hover); }
.sitefoot .fsay { margin:0; max-width:48ch; font:500 11.5px/1.65 var(--font-ui);
                  color:var(--text-muted); text-wrap:pretty; }
.sitefoot .fbase { grid-column:1/-1; display:flex; align-items:baseline; gap:6px 18px; flex-wrap:wrap;
                   margin-top:2px; border-top:1px solid var(--surface-2); padding-top:12px;
                   font:500 11px var(--font-mono); color:var(--text-faint); }
.sitefoot .fbase a { color:var(--text-muted); text-decoration:none; }
.sitefoot .fbase a:hover { color:var(--accent); }
.sitefoot .fbase .fright { margin-left:auto; }
/* Narrow: the brand paragraph takes the full row and the three link columns share
   the next one; on a phone they fold to two columns and the bottom strip stops
   pushing its right-hand note away (nothing to push it against). */
@media (max-width:860px) { .sitefoot { grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px 22px; }
                           .sitefoot .brandcol { grid-column:1/-1; } }
@media (max-width:520px) { .sitefoot { grid-template-columns:repeat(2, minmax(0,1fr)); }
                           .sitefoot .fbase .fright { margin-left:0; } }

/* --- the item card ------------------------------------------------------
   The game's own layout for an item: centred name over base, a rule, then one
   line per modifier with the plan's reading of it underneath. Drawn by
   `item_view.js` and shared by both advisor pages and the simulation viewer —
   which is why it lives HERE rather than in a page's <style>: the card is how a
   player reads which mods count, and three copies of these rules would be three
   chances for one item to look like three items. */
.itemframe { border:1px solid #46402f; border-radius:5px; background:#0c0b0a; box-shadow:inset 0 0 40px rgba(0,0,0,.55); overflow:hidden; }
.ihead { text-align:center; padding:8px 16px 7px; background:linear-gradient(180deg, #1d1912, #131009); border-bottom:1px solid #46402f; }
.ihead .iname { font:700 18px/1.25 var(--font-smallcaps); letter-spacing:.02em; }
.ihead .ibase { font:15px/1.3 var(--font-smallcaps); opacity:.9; }
.ihead.rare .iname, .ihead.rare .ibase { color:var(--rarity-rare); }
.ihead.magic .iname, .ihead.magic .ibase { color:var(--rarity-magic); }
.ihead.unique .iname, .ihead.unique .ibase { color:var(--rarity-unique); }
.ihead.normal .iname, .ihead.normal .ibase { color:var(--rarity-normal); }
.ibody { padding:9px 10px 12px; }
.iline { text-align:center; font:500 12px var(--font-ui); color:#8b8578; }
.isep { height:1px; margin:8px auto; width:62%; background:linear-gradient(90deg, transparent, #6d5b39, transparent); }
.mrow { text-align:center; padding:5px 8px; border-radius:5px; transition:background .12s, box-shadow .12s; }
.mrow.hl { background:var(--accent-soft); box-shadow:inset 0 0 0 1px var(--accent-line); }
.mrow .ml { font:400 14.5px/1.5 var(--font-display); color:var(--rarity-magic); }
.mrow.junkline .ml { opacity:.5; }
.mrow.fracline .ml { color:#b3a88f; }
.mrow.parked .ml { color:#9d8fb8; font-style:italic; }
.mtags { display:flex; gap:6px; justify-content:center; flex-wrap:wrap; margin-top:3px; }
.tag { font:500 10.5px var(--font-mono); border:1px solid var(--border-strong); border-radius:4px; padding:1px 6px; color:var(--text-2); white-space:nowrap; }
.tag.hi { color:var(--ok); border-color:color-mix(in srgb, var(--ok) 40%, transparent); }
.tag.low { color:var(--loss); border-color:color-mix(in srgb, var(--loss) 40%, transparent); }
.tag.junk { color:var(--text-muted); }
.tag.frac { color:var(--loop); border-color:color-mix(in srgb, var(--loop) 40%, transparent); }
.tag.deso { color:var(--rarity-unique); border-color:color-mix(in srgb, var(--rarity-unique) 40%, transparent); }
.tag.meta { border:none; padding:1px 0; color:var(--text-muted); }

/* The door to the simulation viewer (/sim/), beside the policy map's `.dnc` on
   both advisor pages. NOT quiet like that one: the graph is a diagnostic and was
   hidden on purpose, but watching an attempt play out is a thing a player wants
   and would not otherwise know exists. */
.simlink { display:inline-block; margin-top:8px; margin-right:14px;
           font:600 11px var(--font-mono); letter-spacing:.03em; text-decoration:none;
           color:var(--accent); background:var(--accent-soft);
           border:1px solid var(--accent-line); border-radius:var(--r-pill); padding:3px 10px; }
a.simlink:hover { border-color:var(--accent); }