/* Frank Hardware — Theme 1 "Super Famicom console". Shared by every page.
   Light = grey plastic; dark = charcoal console with the face buttons lit.
   The four face-button colors are the only accents. */
:root {
  --bg: #dcdad4; --panel: #ecebe7; --panel-2: #f4f3ef; --line: #a9a7a1; --line-2: #c9c7c1;
  --ink: #1c1c21; --ink-2: #3a3a41; --muted: #5e5e66;
  --switch: #5b5b60; --switch-2: #3d3d42; --switch-ink: #ecebe7;
  --cart: #b9b7b2; --cart-top: #d4d2cc; --cart-shadow: #8f8d88; --cart-locked: #c6c4bf; --cart-locked-top: #d9d7d1; --cart-locked-shadow: #a3a19c;
  --pad: #c9c7c1; --pad-hi: #ecebe7; --pad-lo: #a9a7a1;
  --red: #d62d30; --yellow: #f0be2e; --yellow-ink: #8a6a0e; --green: #2f9c53; --green-ink: #22703c; --blue: #2a5db0;
  --red-hi: #ef5a5c; --yellow-hi: #f7d35a; --green-hi: #4fbf73; --blue-hi: #4a7fd6;
  --red-lo: #8f1c1e; --yellow-lo: #a8811a; --green-lo: #1f6b38; --blue-lo: #1c3f7a;
  --glow-red: transparent; --glow-yellow: transparent; --glow-green: transparent; --glow-blue: transparent;
  --led: #ff3b3b; --ok: #22703c; --bad: #b3201f;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1f1f24; --panel: #2a2a30; --panel-2: #26262c; --line: #44444c; --line-2: #3a3a41;
    --ink: #f1efea; --ink-2: #d2d0ca; --muted: #b3b1ac;
    --switch: #f1efea; --switch-2: #b3b1ac; --switch-ink: #1f1f24;
    --cart: #3a3a41; --cart-top: #4b4b53; --cart-shadow: #141418; --cart-locked: #2f2f36; --cart-locked-top: #3c3c44; --cart-locked-shadow: #141418;
    --pad: #2a2a30; --pad-hi: #3a3a41; --pad-lo: #141418;
    --red: #ff4d50; --yellow: #ffd04a; --yellow-ink: #ffd04a; --green: #4fd37a; --green-ink: #4fd37a; --blue: #5a8ef0;
    --red-hi: #ff7a7c; --yellow-hi: #ffe07a; --green-hi: #6fe08f; --blue-hi: #6ea0ff;
    --red-lo: #6e1516; --yellow-lo: #7d5f10; --green-lo: #17522b; --blue-lo: #16305c;
    --glow-red: rgba(255,77,80,0.55); --glow-yellow: rgba(255,208,74,0.5); --glow-green: rgba(79,211,122,0.5); --glow-blue: rgba(90,142,240,0.55);
    --ok: #4fd37a; --bad: #ff4d50;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #1f1f24; --panel: #2a2a30; --panel-2: #26262c; --line: #44444c; --line-2: #3a3a41;
  --ink: #f1efea; --ink-2: #d2d0ca; --muted: #b3b1ac;
  --switch: #f1efea; --switch-2: #b3b1ac; --switch-ink: #1f1f24;
  --cart: #3a3a41; --cart-top: #4b4b53; --cart-shadow: #141418; --cart-locked: #2f2f36; --cart-locked-top: #3c3c44; --cart-locked-shadow: #141418;
  --pad: #2a2a30; --pad-hi: #3a3a41; --pad-lo: #141418;
  --red: #ff4d50; --yellow: #ffd04a; --yellow-ink: #ffd04a; --green: #4fd37a; --green-ink: #4fd37a; --blue: #5a8ef0;
  --red-hi: #ff7a7c; --yellow-hi: #ffe07a; --green-hi: #6fe08f; --blue-hi: #6ea0ff;
  --red-lo: #6e1516; --yellow-lo: #7d5f10; --green-lo: #17522b; --blue-lo: #16305c;
  --glow-red: rgba(255,77,80,0.55); --glow-yellow: rgba(255,208,74,0.5); --glow-green: rgba(79,211,122,0.5); --glow-blue: rgba(90,142,240,0.55);
  --ok: #4fd37a; --bad: #ff4d50;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  line-height: 1.5; min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
  padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right);
}
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.px { font-family: 'Press Start 2P', 'IBM Plex Mono', monospace; letter-spacing: 1px; line-height: 1.6; }
.mono { font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; }
.wrap { width: min(100% - 2rem, 1120px); margin-inline: auto; }
.hide { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
main { flex: 1; }

/* HUD */
.hud { position: sticky; top: 0; z-index: 10; background: var(--panel); border-bottom: 4px solid var(--line); padding-top: env(safe-area-inset-top); }
.hud .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; }
.brand { display: flex; align-items: center; gap: 12px; font-size: 10px; padding: 12px 0; }
.dots { display: inline-flex; gap: 4px; }
.dots span { width: 10px; height: 10px; border-radius: 50%; }
.dots .r { background: var(--red); box-shadow: 0 0 8px var(--glow-red); }
.dots .y { background: var(--yellow); box-shadow: 0 0 8px var(--glow-yellow); }
.dots .g { background: var(--green); box-shadow: 0 0 8px var(--glow-green); }
.dots .b { background: var(--blue); box-shadow: 0 0 8px var(--glow-blue); }
.nav { display: flex; align-items: center; gap: 24px; font-size: 9px; }
.nav a { padding: 14px 0; }
.nav a:hover { color: var(--blue); }
.switch {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px;
  border: 0; border-radius: 4px; background: var(--switch); color: var(--switch-ink);
  box-shadow: inset 0 -3px 0 var(--switch-2); cursor: pointer; font-size: 9px;
}
.switch:active { transform: translateY(2px); box-shadow: inset 0 -1px 0 var(--switch-2); }
.led { width: 8px; height: 8px; border-radius: 50%; background: var(--led); box-shadow: 0 0 8px var(--led); }
@media (max-width: 560px) { .nav .lnk { display: none; } .nav { gap: 12px; } }

/* Buttons */
.btn-start {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px;
  border: 0; border-radius: 6px; background: var(--switch); color: var(--switch-ink); cursor: pointer;
  font-family: 'Press Start 2P', monospace; font-size: 10px; letter-spacing: 1px; box-shadow: inset 0 -4px 0 var(--switch-2);
}
.btn-start:active { transform: translateY(2px); box-shadow: inset 0 -2px 0 var(--switch-2); }
.btn-start:disabled { opacity: 0.5; cursor: default; }
.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px;
  border: 3px solid var(--line); border-radius: 6px; background: transparent; color: var(--ink); cursor: pointer;
  font-family: 'Press Start 2P', monospace; font-size: 9px; letter-spacing: 1px;
}
.btn-ghost:hover { border-color: var(--ink); }
.btn-ghost[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* Forms */
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field label { font-family: 'Press Start 2P', monospace; font-size: 8px; letter-spacing: 1px; color: var(--muted); }
input[type="text"], input[type="search"], select {
  min-height: 48px; padding: 0 14px; border: 3px solid var(--line); border-radius: 6px; background: var(--panel-2); color: var(--ink);
  font: 500 16px 'IBM Plex Mono', ui-monospace, monospace; width: 100%;
}
input:focus, select:focus { border-color: var(--blue); }

/* Page header for a tool */
.tool-head { padding: clamp(32px, 5vw, 56px) 0 clamp(20px, 3vw, 32px); display: flex; flex-direction: column; gap: 14px; }
.crumb { display: flex; align-items: center; gap: 12px; font-size: 9px; color: var(--muted); }
.crumb::before { content: ""; width: 28px; height: 4px; background: var(--tag, var(--red)); }
.tool-head h1 { margin: 0; font-family: Syne, sans-serif; font-weight: 800; font-size: clamp(34px, 6vw, 64px); line-height: 0.95; letter-spacing: -0.02em; }
.tool-head p { margin: 0; color: var(--ink-2); max-width: 46em; font-size: clamp(15px, 1.4vw, 18px); }
.promise { display: inline-flex; align-items: center; gap: 10px; font-size: 8px; color: var(--green-ink); }
.promise::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--glow-green); }

/* Cartridge-label panel */
.panel {
  background: var(--panel-2); border-radius: 6px; border-left: 14px solid var(--tag, var(--blue));
  box-shadow: inset 0 0 0 3px var(--line-2); padding: clamp(18px, 2.4vw, 26px) clamp(18px, 2.4vw, 28px);
  display: flex; flex-direction: column; gap: 16px; min-width: 0;
}
.panel h2 { margin: 0; font-family: 'Press Start 2P', monospace; font-weight: 400; font-size: 11px; letter-spacing: 1px; }
.panel h2 small { font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: 0; color: var(--muted); margin-left: 10px; letter-spacing: 0; }
.panel .note { font-size: 13px; color: var(--muted); margin: 0; }
.stack { display: flex; flex-direction: column; gap: clamp(18px, 2.4vw, 28px); padding-bottom: clamp(32px, 5vw, 56px); }
.cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 28px); }
@media (max-width: 760px) { .cols { grid-template-columns: 1fr; } }

/* Stat grid */
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.stat { background: var(--panel); border-radius: 4px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.stat .k { font-family: 'Press Start 2P', monospace; font-size: 7px; letter-spacing: 1px; color: var(--muted); }
.stat .v { font-family: 'IBM Plex Mono', monospace; font-size: 17px; font-weight: 500; overflow-wrap: anywhere; }
.stat .s { font-size: 12px; color: var(--muted); }
.stat.big .v { font-size: 28px; }
.ok { color: var(--ok); } .bad { color: var(--bad); }

/* Tables */
.tbl { width: 100%; border-collapse: collapse; font-family: 'IBM Plex Mono', monospace; font-size: 13px; }
.tbl th { text-align: left; font-family: 'Press Start 2P', monospace; font-weight: 400; font-size: 7px; letter-spacing: 1px; color: var(--muted); padding: 8px 10px; border-bottom: 3px solid var(--line-2); }
.tbl td { padding: 10px; border-bottom: 1px solid var(--line-2); vertical-align: top; overflow-wrap: anywhere; }
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Footer */
footer { padding: 36px 0 calc(40px + env(safe-area-inset-bottom)); border-top: 4px solid var(--line); margin-top: clamp(24px, 4vw, 48px); }
footer .wrap { display: flex; justify-content: space-between; align-items: center; gap: 16px 24px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
footer a:hover { color: var(--ink); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }