/* ---------------------------------------------------------------
   Top bar: fuzzymono's shell verbatim (fixed 2.75rem height, left
   origin 62rem column, 24px padding), so the hairline sits at the
   same y and the version chip's right edge lands where fuzzymono's
   "03 Resume" ends.
------------------------------------------------------------------*/
.topnav{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);
  flex-wrap:wrap;height:var(--nav-height);max-width:var(--max-width);margin:0;
  padding:0 var(--space-3);border-bottom:1px solid var(--border);
  font-size:13px;
}
.topnav__brand{display:inline-flex;align-items:center;gap:0.45em;font-size:13px;}
.topnav__mark{width:1.5em;height:1.5em;display:block;fill:var(--fg);}
.topnav__version{
  font-size:12px;color:var(--fg-muted);
  border:1px solid var(--border);
  padding:0.15em 0.6em;
}

/* ---------------------------------------------------------------
   HUD footer: the key legend, the hidden hint, and the touch theme
   control. Visibility is CSS-gated off `data-hud` on <html> plus a
   coarse-pointer query, never off JS, so a phone cannot paint the
   legend before the seed script runs.
------------------------------------------------------------------*/
.hud{
  position:fixed;left:0;right:0;bottom:0;height:var(--hud-height);z-index:50;
  display:flex;flex-wrap:wrap;align-content:flex-start;align-items:center;gap:var(--space-3);
  padding:0 var(--space-3);background:var(--bg);border-top:1px solid var(--border);
  font-size:12px;color:var(--fg-muted);overflow:hidden;white-space:nowrap;
}
/* Groups keep their natural width and wrap onto a second flex line rather
   than shrink; that line starts below the fixed height, so overflow clips
   it. Ordered most important first. The tail is the stable cross-site order:
   theme, contrast, keys. */
.hud__group{display:flex;flex-direction:column;justify-content:center;gap:1px;flex:0 0 auto;height:var(--hud-height);}
.hud__keys{display:inline-flex;align-items:center;}
.hud__label{line-height:1.2;}
.hud kbd{margin-right:0.35em;}
.hud__keys kbd:last-child{margin-right:0;}

.hud__hint{position:fixed;left:var(--space-3);bottom:var(--space-1);font-size:12px;color:var(--fg-muted);z-index:50;}
.hud__theme{
  position:fixed;right:var(--space-3);bottom:var(--space-1);z-index:50;
  font-family:var(--font-mono);font-size:12px;padding:0.15em 0.5em;
  border:1px solid transparent;cursor:pointer;background:none;
}
.hud__theme-label--dark,.hud__theme-label--light{display:none;}

/* Light page: offer dark, painted dark. Dark page: offer light. */
[data-theme="light"] .hud__theme{background:#0d0d0d;color:#ededed;border-color:#2a2a2a;}
[data-theme="light"] .hud__theme-label--dark{display:inline;}
[data-theme="dark"] .hud__theme{background:#f4f4f2;color:#111111;border-color:#d8d8d4;}
[data-theme="dark"] .hud__theme-label--light{display:inline;}
[data-theme="light"][data-contrast="high"] .hud__theme{background:#000000;color:#ffffff;border-color:currentColor;}
[data-theme="dark"][data-contrast="high"] .hud__theme{background:#ffffff;color:#000000;border-color:currentColor;}

.hud__hint,.hud__theme{display:none;}
[data-hud="hidden"] .hud{display:none;}
[data-hud="hidden"] .hud__hint{display:block;}

/* Only a keyboard can bring the legend back, so the hint only makes sense
   where a keyboard might exist. On a finger, offer the theme control. */
@media (pointer: coarse){
  [data-hud="hidden"] .hud__hint{display:none;}
  [data-hud="hidden"] .hud__theme{display:inline-block;}
}

/* Transient centered feedback for a preference change. */
.splash{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:100;
  background:var(--bg);border:1px solid var(--border);padding:var(--space-1) var(--space-2);
  font-size:13px;color:var(--fg);white-space:nowrap;pointer-events:none;
  animation:splash-fade 1200ms ease forwards;
}
.splash:empty{display:none;}
@keyframes splash-fade{
  0%{opacity:0;} 10%{opacity:1;} 75%{opacity:1;} 100%{opacity:0;}
}
@media (prefers-reduced-motion: reduce){
  .splash{animation:none;}
}

/* Credits, in the content column above the fixed legend. */
.colophon{
  margin: var(--space-4) 0 var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--fg-muted);
}
.colophon p{ margin: 0; line-height: 1.6; }
.colophon a{ color: var(--fg); text-decoration: underline; text-underline-offset: 2px; }
.colophon a:hover{ color: var(--fg-muted); }

.visually-hidden{
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}