/* Clean Arcade: CHROME ONLY.
   ---------------------------------------------------------------------------
   This is the site header and nothing else. It exists because the 24 Tools
   Suite pages each carry their own complete, self-contained design, and they
   must keep it. The full clean-arcade.css is a content design system: it
   styles h1-h6, p, a, table, th, td, code, input, label, footer and generic
   class names like .wrap / .card / .note / .warn / .pill. Linking that sheet
   into a tool page silently repaints the tool. Measured on 2026-08-10 across
   the suite, it dimmed every table body cell, turned every table header
   uppercase mono, cost data tables 84-124px of width via .wrap, and on
   resume-patcher turned an inline <span class="warn"> into a padded box that
   painted over the paragraph behind it.

   So tool pages link THIS file instead. It styles only elements the rebrand
   itself injects, all of which are namespaced .ah*. It defines no :root, no
   bare-element rules, and no generic classes, so it cannot reach page content.

   Tokens are pinned on .ah rather than :root for the same reason: several tool
   pages define --bg / --ink / --gold / --accent to mean their own things, and
   an inheriting header renders wrong. Pinning here also keeps the header
   identical across all 24 pages, which is the entire point of the rebrand.

   The full clean-arcade.css remains correct for the main site and for
   tools/index.html, which was authored against it. Do not link both.
   --------------------------------------------------------------------------- */

.ah{
  /* pinned: page palettes must not reach the chrome */
  --bg:#0e1418; --surface:#161d23; --surface2:#1c242c; --line:#2a333c;
  --ink:#eef1f2; --ink-dim:#9fb0b8; --accent:#ec6a2f; --gold:#d8a94a;
  --rp:999px; --r1:6px; --t-sm:14px; --s2:8px;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px; line-height:normal; text-align:left;
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb,var(--bg) 90%,transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.ah-in{max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:var(--s2);padding:10px 18px}
.ah-logo{display:flex;align-items:center;gap:9px;font-weight:800;letter-spacing:-.02em;font-size:18px;color:var(--ink);text-decoration:none;margin-right:10px}
.ah-logo:hover{text-decoration:none;color:var(--ink)}
.ah-mk{width:28px;height:28px;flex:none;display:block}
.ah-nav{display:flex;align-items:center;gap:2px;flex-wrap:wrap;margin:0;padding:0}
.ah-link{position:relative;font-size:var(--t-sm);font-weight:400;color:var(--ink-dim);padding:8px 13px;border-radius:var(--r1);white-space:nowrap;display:inline-flex;align-items:center;gap:6px;text-decoration:none}
.ah-link:hover{color:var(--ink);background:var(--surface2);text-decoration:none}
.ah-link.on{color:var(--ink);font-weight:600}
.ah-link.on::after{content:"";position:absolute;left:13px;right:13px;bottom:1px;height:2px;border-radius:2px;background:var(--accent)}
.ah-sp{flex:1}
.ah-cta{font-size:13px;font-weight:600;color:var(--gold);border:1px solid color-mix(in srgb,var(--gold) 45%,transparent);padding:7px 13px;border-radius:var(--rp);background:color-mix(in srgb,var(--gold) 9%,transparent);text-decoration:none;white-space:nowrap}
.ah-cta:hover{background:color-mix(in srgb,var(--gold) 16%,transparent);text-decoration:none;color:var(--gold)}

/* Keyboard focus ring. Literal colour, not var(--accent): outside .ah the token
   is undefined, an invalid var() would drop the property, and the ring would
   silently vanish for keyboard users on every tool page. */
.ah a:focus-visible,.ah button:focus-visible{outline:2px solid #ec6a2f;outline-offset:2px}

@media(max-width:720px){ .ah-nav{display:none} }