/* omkarux site header for the pages outside Horizons (case studies, notes, résumé, 404).
   The same capsule as the Horizons header (site-stopgap/next/_generate.py, HEADER-SPEC.md), with class names
   namespaced (site-hd, hd-*) because live pages already use .row, .tabs and .cta for their own content.
   Needs /css/tokens.css first. Behaviour: /js/site.js. */
html { scroll-padding-top: calc(var(--hd) + 16px); }
body.has-hd { padding-top: var(--hd); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; box-shadow: 0 0 0 5px color-mix(in srgb, var(--paper) 80%, transparent); }
.hd-skip { position: absolute; left: 12px; top: -60px; background: var(--accent); color: var(--on-accent); padding: 10px 14px; border-radius: var(--r-pill); z-index: 100; font: 600 15px var(--font); text-decoration: none; }
.hd-skip:focus { top: 12px; }
.hd-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; vertical-align: -3px; }

.site-hd { position: fixed; left: 0; right: 0; top: 0; z-index: 20; font-family: var(--font); transition: transform var(--t-move) var(--ease-out); }
.site-hd .hd-row { max-width: 1080px; margin: 0 auto; padding: 0 22px; min-height: var(--hd); display: flex; flex-wrap: nowrap; align-items: center; gap: 14px; border: 1px solid transparent; border-radius: var(--r-pill); transition: margin var(--t-move) var(--ease-spring), padding var(--t-move) var(--ease-spring), min-height var(--t-move) var(--ease-spring), background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-move); }
.site-hd.solid .hd-row { margin: 10px auto 0; width: calc(100% - 24px); max-width: 1056px; min-height: 52px; padding-inline: 18px 6px; background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border-color: var(--glass-edge); box-shadow: var(--shadow); }
.site-hd .hd-brand { font-weight: 700; font-stretch: 112%; text-decoration: none; white-space: nowrap; font-size: 17px; color: var(--ink); }
.site-hd .hd-sp { flex: 1; }
.site-hd .hd-tabs { display: flex; flex-wrap: nowrap; gap: 2px; margin: 0; padding: 3px; background: var(--chip); border: 1px solid var(--hairline); border-radius: var(--r-pill); max-width: 420px; overflow: hidden; transition: max-width var(--t-move) var(--ease-spring), opacity var(--t-fast), padding var(--t-move), border-width var(--t-move); }
.site-hd .hd-tabs a { position: relative; display: inline-flex; align-items: baseline; line-height: 1; text-decoration: none; font-size: 15px; font-weight: 550; padding: 11px 14px; border-radius: var(--r-pill); color: var(--muted); white-space: nowrap; }
.site-hd .hd-tabs a:hover { color: var(--ink); }
.site-hd .hd-tabs a[aria-current] { background: var(--card); color: var(--ink); font-weight: 650; box-shadow: var(--shadow); }
.site-hd .hd-tabs small { font-size: 15px; font-weight: 400; color: var(--muted); }
.site-hd .hd-tabs small::before { content: "·"; margin: 0 6px 0 7px; opacity: .6; }
.site-hd .hd-cta { background: var(--accent); color: var(--on-accent); text-decoration: none; font-weight: 650; font-size: 15px; border-radius: var(--r-pill); padding: 10px 18px; white-space: nowrap; transition: background var(--t-fast); }
.site-hd .hd-cta:hover { background: var(--accent-hover); }
.site-hd .hd-cta.quiet { background: none; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.site-hd .hd-where { font: 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); display: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.site-hd.read .hd-tabs { max-width: 0; opacity: 0; padding-inline: 0; border-width: 0; visibility: hidden; }
.site-hd.read .hd-where { display: inline; }
.site-hd .hd-new { position: absolute; top: 7px; right: 5px; width: 5px; height: 5px; border-radius: 50%; background: var(--mood-dot); }
.hd-float { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 21; opacity: 0; visibility: hidden; pointer-events: none; background: var(--accent); color: var(--on-accent); text-decoration: none; font: 650 15px var(--font); border-radius: var(--r-pill); padding: 10px 16px; box-shadow: var(--shadow); transition: opacity var(--t-fast); }
@media (max-width: 800px) { .site-hd .hd-tabs small { display: none; } .site-hd .hd-tabs a { padding-block: 10px; } }
@media (max-width: 640px) {
  .site-hd .hd-row { gap: 8px; }
  .site-hd.solid .hd-row { width: calc(100% - 16px); padding-inline: 14px 5px; min-height: 48px; }
  .site-hd .hd-tabs a { padding: 9px 10px; font-size: 14px; }
  .site-hd .hd-cta { padding: 8px 12px; font-size: 14px; }
  .site-hd .hd-blast { display: none; }
  .site-hd.read { transform: translateY(calc(-100% - 12px)); }
  .site-hd.read ~ .hd-float { opacity: 1; visibility: visible; pointer-events: auto; }
}
@media (max-width: 400px) {
  .site-hd .hd-row { gap: 6px; padding: 0 12px; }
  .site-hd .hd-brand { font-size: 0; }
  .site-hd .hd-brand::before { content: "OK"; font-size: 15px; }
  .site-hd .hd-tabs a { padding-inline: 8px; font-size: 13px; }
  .site-hd .hd-cta { padding: 8px 10px; font-size: 13px; }
}
@media (max-width: 360px) {
  .site-hd .hd-row { gap: 4px; padding: 0 10px; }
  .site-hd.solid .hd-row { padding-inline: 10px 4px; }
  .site-hd .hd-tabs a { padding-inline: 6px; }
  .site-hd .hd-cta { padding: 8px 9px; }
}
@media (prefers-reduced-motion: reduce) { .site-hd, .site-hd *, .hd-float { transition: none !important; } }
@media print { .site-hd, .hd-float, .hd-skip { display: none; } body.has-hd { padding-top: 0; } }
@media (forced-colors: active) { .site-hd .hd-new { forced-color-adjust: none; background: CanvasText; } .site-hd .hd-tabs a[aria-current] { outline: 1px solid CanvasText; } }
@media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } }

/* end-of-page doors (HEADER-SPEC rule 4): "Next: <title> →", "← All work", "← <parent>" */
.hd-doors { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; margin: 40px 0 8px; padding-top: 18px; border-top: 1px solid var(--hairline); }
.hd-doors a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 16px; border: 1px solid var(--hairline); border-radius: var(--r-pill); background: var(--card); color: var(--ink); text-decoration: none; font: 500 15px var(--font); transition: border-color var(--t-fast), transform var(--t-move) var(--ease-spring); }
.hd-doors a:hover { border-color: var(--ink); }
/* a chevron's 16px box has ~5px of air beside its stroke: take 4px off the padding on the icon's side, as .hd-back does,
   so the space either side of the content looks even (Omkar, 1 Oct) */
.hd-doors a:has(> .ic use[href="#i-chev-left"]) { padding-left: 12px; }
.hd-doors a:has(> .ic use[href="#i-chev-right"]) { padding-right: 12px; }
@media (hover: hover) and (pointer: fine) { .hd-doors a:hover { transform: var(--lift); } }
@media (prefers-reduced-motion: reduce) { .hd-doors a:hover { transform: none; } }
.hd-back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 16px 8px 12px; border: 1px solid var(--hairline); border-radius: var(--r-pill); background: var(--card); color: var(--ink); text-decoration: none; font: 500 15px var(--font); margin: 8px 0 18px; }
.hd-back:hover { border-color: var(--ink); }

/* status vocabulary (locked): one word, one colour; the only red on the site is .status.critical.
   Maturity labels are a neutral outlined .tag, never a status. */
.status { display: inline-flex; align-items: center; gap: 6px; font: 500 11.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: var(--r-xs); line-height: 1.3; }
.status.critical { background: var(--st-critical-bg); color: var(--st-critical-fg); }
.status.high { background: var(--st-high-bg); color: var(--st-high-fg); }
.status.attn { background: var(--st-attn-bg); color: var(--st-attn-fg); }
.status.ok { background: var(--st-ok-bg); color: var(--st-ok-fg); }
@media (forced-colors: active) { .status { border: 1px solid CanvasText; } }