/* ============================================================================
   ankle96-chrome.css — THE canonical ANKLE96 chrome baseline.
   Load order on every page:  <link theme.css>  <link ankle96-chrome.css>  <script theme.js>
   - theme.css      = per-theme TOKEN sets (silver default + phosphor, paper, … skins)
   - ankle96-chrome = the shared COMPONENTS (nav/hero/section/panel/btn/badge/table/relief), token-driven
   - theme.js       = the user skin + wallpaper switcher (uploaded image -> desktop wallpaper)
   Everything here reads var(--*) tokens, so it renders the silver default
   but RE-SKINS automatically when the user changes theme/wallpaper. The wallpaper is
   a separate fixed ::before layer (theme.css) BEHIND content — never paint an opaque
   image on the body here or you'll hide it; use background-color only. Do not hardcode
   palette hex in pages — use these classes. Hard edges, 1px lines, bevel relief, no
   soft rgba shadows / gradients / web-fonts / border-radius.
   ============================================================================ */

:root{
  /* derive chrome tokens from theme.css's canonical tokens (with safe fallbacks) */
  --serif: var(--body-font, "Times New Roman", Times, serif);
  --mono:  var(--mono-font, "Courier New", Courier, monospace);
  --warn:  var(--highlight, #ffffe0);
  --chip:  #e8e8e8;
  --bevel-out: 2px outset #fff;
  --bevel-in:  2px inset #fff;
  /* chiseled Win95 relief (silver default) */
  --raise: inset 1px 1px 0 #fff, inset -1px -1px 0 #404040, inset 2px 2px 0 #dfdfdf, inset -2px -2px 0 #808080;
  --sink:  inset 1px 1px 0 #404040, inset -1px -1px 0 #fff, inset 2px 2px 0 #808080, inset -2px -2px 0 #dfdfdf;
  --chip-ink-bg: #000;   /* numbered step chips — BLACK, never blue */
  --chip-ink-fg: #fff;
}
/* per-theme relief so the bevels read correctly on non-silver skins */
body.theme-phosphor   { --raise: inset 1px 1px 0 #2c5224, inset -1px -1px 0 #000, inset 2px 2px 0 #1c3a16, inset -2px -2px 0 #050a04;
                        --sink:  inset 1px 1px 0 #000, inset -1px -1px 0 #2c5224, inset 2px 2px 0 #050a04, inset -2px -2px 0 #1c3a16; }
body.theme-paper      { --raise: inset 1px 1px 0 #fffdf5, inset -1px -1px 0 #b8a98a, inset 2px 2px 0 #f3ecd8, inset -2px -2px 0 #cabfa0;
                        --sink:  inset 1px 1px 0 #b8a98a, inset -1px -1px 0 #fffdf5, inset 2px 2px 0 #cabfa0, inset -2px -2px 0 #f3ecd8; }
body.theme-graphpaper { --raise: inset 1px 1px 0 #fff, inset -1px -1px 0 #8a93a8, inset 2px 2px 0 #eef0f6, inset -2px -2px 0 #b9c0d0; }
body.theme-ankle96-next { --raise: inset 1px 1px 0 #f4f2e8, inset -1px -1px 0 #5a5660, inset 2px 2px 0 #e8e6dc, inset -2px -2px 0 #8a8690; }

*{box-sizing:border-box}
.a96 a{color:var(--link);text-decoration:underline}
.a96 a:visited{color:var(--visited,#551a8b)}
.a96 a:hover{color:var(--hover,#ff0000)}
.a96 img{max-width:100%;display:block}
.a96{font-family:var(--serif);background-color:var(--bg);color:var(--fg);font-size:15px;line-height:1.5;min-height:100vh;margin:0}

/* ── NAV ─────────────────────────────────────────────────────────────── */
.a96 .nav{padding:6px 14px;background:var(--bg);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px;flex-wrap:wrap;position:sticky;top:0;z-index:50;font-family:var(--serif);font-size:14px}
.a96 .nav-brand{display:flex;align-items:center;gap:6px;flex-shrink:0}
.a96 .nav-brand img{width:18px;height:18px;image-rendering:pixelated}
.a96 .nav-brand a{font-weight:bold;text-decoration:none;color:var(--fg)}
.a96 .nav-brand a:hover{color:var(--link);text-decoration:underline}
.a96 .nav-brand .page{color:var(--muted);font-style:italic}
.a96 .nav-mid{display:flex;gap:1px;align-items:center;flex:1;justify-content:center;flex-wrap:wrap;min-width:0}
.a96 .nav-mid a{padding:1px 6px;font-size:13px}
.a96 .nav-mid .sep{color:var(--muted);margin:0 2px}
.a96 .nav-right{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px;flex-shrink:0}
.a96 .status-pill{display:inline-flex;align-items:center;gap:4px;border:var(--bevel-in);background:var(--panel);padding:1px 6px}
.a96 .status-pill .dot{width:8px;height:8px;background:var(--muted);border:1px solid var(--line);display:inline-block}
.a96 .status-pill .dot.on{background:var(--ok,#008000)}
.a96 .clock{border:var(--bevel-in);background:var(--panel);padding:1px 6px;font-variant-numeric:tabular-nums}
.a96 #atcmd-inline,.a96 .nav-action{border:var(--bevel-out);background:var(--bg);color:var(--link);padding:1px 8px;cursor:pointer;font-family:var(--mono);font-size:11px;display:inline-flex;align-items:center;gap:4px;text-decoration:none}
.a96 #atcmd-inline:hover,.a96 .nav-action:hover{filter:brightness(1.06)}
.a96 #atcmd-inline:active,.a96 .nav-action:active{border:var(--bevel-in)}
@media(min-width:760px){body.a96 #atcmd-fab,body.a96 .atcmd-fab{display:none !important}}

/* ── SHELL / HERO / SECTION ──────────────────────────────────────────── */
.a96 .shell{max-width:1100px;margin:0 auto;padding:14px 18px 60px}
.a96 .hero{background:var(--panel);border:0;box-shadow:var(--raise);padding:20px 22px;margin-bottom:14px;display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
.a96 .hero-ico{width:64px;height:64px;border:var(--bevel-out);background:var(--panel);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.a96 .hero-ico img{width:56px;height:56px;image-rendering:pixelated}
.a96 .hero-body{flex:1;min-width:240px}
.a96 .hero-title{font-family:var(--serif);font-weight:bold;font-size:36px;letter-spacing:1px;line-height:1;margin-bottom:2px}
.a96 .hero-title::first-letter{font-size:44px}
.a96 .hero-sub{font-family:var(--mono);font-size:11px;color:var(--muted);margin-bottom:8px;letter-spacing:.06em}
.a96 .hero-tag{font-family:var(--serif);font-size:14px;line-height:1.55;max-width:680px}
.a96 .section{margin:22px 0}
.a96 .section-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;border-bottom:1px solid var(--line);padding-bottom:4px;margin-bottom:10px;flex-wrap:wrap}
.a96 .section-title{font-family:var(--serif);font-weight:bold;font-size:20px;letter-spacing:.5px}
.a96 .section-title::first-letter{font-size:24px}
.a96 .section-meta{font-family:var(--mono);font-size:11px;color:var(--muted)}
.a96 .panel{background:var(--panel);border:0;box-shadow:var(--raise);padding:16px 18px;color:var(--fg)}
.a96 .panel h3{font-family:var(--serif);font-size:18px;margin-bottom:4px}
.a96 .panel p{margin:0 0 8px}.a96 .panel p:last-child{margin-bottom:0}
.a96 .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}

/* ── BUTTONS ─────────────────────────────────────────────────────────── */
.a96 .btn{display:inline-flex;align-items:center;gap:6px;border:var(--bevel-out);background:var(--bg);color:var(--link);padding:6px 14px;font-family:var(--mono);font-size:12px;text-decoration:none;margin:4px 8px 4px 0}
.a96 .btn:hover{filter:brightness(1.06);color:var(--hover,#ff0000)}
.a96 .btn:active{border:var(--bevel-in)}
.a96 .btn.primary{background:var(--warn);color:var(--fg);font-weight:bold;font-size:13px;padding:7px 15px;box-shadow:var(--raise);border:0}
.a96 .btn.primary:hover{filter:brightness(1.04);color:var(--fg)}
.a96 code{background:var(--panel);border:1px solid var(--muted);padding:0 4px;font-family:var(--mono);font-size:12px}
.a96 .mono{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.03em}

/* ── BADGE / LISTS / TABLE ───────────────────────────────────────────── */
.a96 .badge{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);background:var(--panel);padding:1px 7px;font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px}
.a96 .badge .d{width:8px;height:8px;border:1px solid var(--line);display:inline-block}
.a96 .badge.live .d{background:var(--ok,#008000)}
.a96 .badge.manual .d{background:#c87a00}
.a96 ol,.a96 ul{padding-left:0;list-style:none}
.a96 ol li,.a96 ul li{padding:4px 0;border-top:1px dotted var(--muted);display:flex;gap:10px}
.a96 ol li:first-child,.a96 ul li:first-child{border-top:0}
.a96 ol{counter-reset:n}
.a96 ol li .n{counter-increment:n;font-family:var(--mono);font-size:11px;font-weight:bold;background:var(--chip-ink-bg);color:var(--chip-ink-fg);width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.a96 ol li .n::before{content:counter(n)}
.a96 ul li::before{content:"\2022";color:var(--fg);font-weight:bold;flex-shrink:0}
.a96 .warning{box-shadow:var(--raise);background:var(--warn);padding:10px 12px;margin-top:12px}
.a96 table{width:100%;border-collapse:collapse;margin:10px 0;font-family:var(--mono);font-size:12px;background:var(--panel)}
.a96 th,.a96 td{border:1px solid var(--line);padding:6px 8px;text-align:left;vertical-align:top}
.a96 th{background:var(--bg);font-weight:bold}
.a96 .footer-links{margin-top:30px;padding-top:10px;border-top:1px solid var(--line);font-family:var(--mono);font-size:11px;color:var(--muted)}