:root {
  /* Neutrals tinted toward the brand ochre. Never pure black or white. */
  --bg:        oklch(98.4% 0.006 85);
  --bg-sunk:   oklch(96.2% 0.008 85);
  --panel:     oklch(99.4% 0.004 85);
  --line:      oklch(89% 0.010 85);
  --line-firm: oklch(80% 0.014 85);
  --ink:       oklch(26% 0.014 75);
  --ink-soft:  oklch(48% 0.012 75);
  --ink-faint: oklch(62% 0.010 75);

  --accent:    oklch(58% 0.115 62);
  --accent-in: oklch(97% 0.020 62);

  --ok:        oklch(52% 0.098 152);
  --ok-in:     oklch(96.5% 0.024 152);
  --warn:      oklch(58% 0.106 78);
  --warn-in:   oklch(96.5% 0.030 78);
  --no:        oklch(52% 0.045 30);
  --no-in:     oklch(96% 0.014 30);
  /* The only high-chroma value in the file. Reserved for hardware damage. */
  --danger:    oklch(52% 0.196 27);
  --danger-in: oklch(95% 0.040 27);

  --r: 7px;
  --ease: cubic-bezier(.22,1,.36,1);
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:        oklch(19% 0.012 80);
    --bg-sunk:   oklch(16% 0.012 80);
    --panel:     oklch(23% 0.013 80);
    --line:      oklch(31% 0.014 80);
    --line-firm: oklch(41% 0.016 80);
    --ink:       oklch(93% 0.008 80);
    --ink-soft:  oklch(74% 0.010 80);
    --ink-faint: oklch(58% 0.010 80);
    --accent:    oklch(76% 0.115 65);
    --accent-in: oklch(28% 0.036 62);
    --ok:        oklch(76% 0.105 152);  --ok-in:     oklch(25% 0.032 152);
    --warn:      oklch(80% 0.108 80);   --warn-in:   oklch(27% 0.036 78);
    --no:        oklch(72% 0.040 30);   --no-in:     oklch(25% 0.016 30);
    --danger:    oklch(70% 0.180 27);   --danger-in: oklch(28% 0.070 27);
  }
}
:root[data-theme="dark"] {
  --bg:oklch(19% 0.012 80); --bg-sunk:oklch(16% 0.012 80); --panel:oklch(23% 0.013 80);
  --line:oklch(31% 0.014 80); --line-firm:oklch(41% 0.016 80);
  --ink:oklch(93% 0.008 80); --ink-soft:oklch(74% 0.010 80); --ink-faint:oklch(58% 0.010 80);
  --accent:oklch(76% 0.115 65); --accent-in:oklch(28% 0.036 62);
  --ok:oklch(76% 0.105 152); --ok-in:oklch(25% 0.032 152);
  --warn:oklch(80% 0.108 80); --warn-in:oklch(27% 0.036 78);
  --no:oklch(72% 0.040 30); --no-in:oklch(25% 0.016 30);
  --danger:oklch(70% 0.180 27); --danger-in:oklch(28% 0.070 27);
}

* { box-sizing: border-box; }
html { color-scheme: light dark; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 15px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 860px; margin: 0 auto; padding: 0 20px 96px; }

/* ---- masthead ---- */
header { border-bottom: 1px solid var(--line); margin-bottom: 34px; }
.mast { max-width: 860px; margin: 0 auto; padding: 22px 20px 18px;
        display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.mast h1, .brand { font-size: 1.0625rem; font-weight: 620;
                   letter-spacing: -0.012em; margin: 0; }
.tag { color: var(--ink-faint); font-size: .8125rem; }
.stats { margin-left: auto; display: flex; gap: 14px;
         font: 500 .75rem/1 var(--mono); color: var(--ink-faint); }
.stats b { color: var(--ink-soft); font-weight: 600; }
.dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block;
       background: var(--ok); margin-right: 5px; vertical-align: 1px; }
.dot.off { background: var(--no); }

/* ---- the ask ---- */
.ask { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; align-items: end; }
@media (max-width: 620px) { .ask { grid-template-columns: 1fr; } }
label { display: block; font-size: .75rem; font-weight: 560; letter-spacing: .02em;
        text-transform: uppercase; color: var(--ink-faint); margin-bottom: 6px; }
.combo { position: relative; }
input[type=text] {
  width: 100%; padding: 9px 11px; font: inherit; color: var(--ink);
  background: var(--panel); border: 1px solid var(--line-firm); border-radius: var(--r);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
input[type=text]:hover { border-color: var(--ink-faint); }
input[type=text]:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 22%, transparent);
}
input[type=text]::placeholder { color: var(--ink-faint); }

.list {
  position: absolute; z-index: 20; top: calc(100% + 5px); left: 0; right: 0;
  max-height: 290px; overflow-y: auto; background: var(--panel);
  border: 1px solid var(--line-firm); border-radius: var(--r);
  box-shadow: 0 10px 28px -12px oklch(20% 0.02 80 / .30); padding: 4px;
}
.list[hidden] { display: none; }
.opt { padding: 7px 9px; border-radius: 5px; cursor: pointer; display: flex;
       gap: 10px; align-items: baseline; }
.opt:hover { background: var(--bg-sunk); }
.opt[aria-selected=true] { background: var(--accent-in); }
.opt .nm { font-weight: 500; }
.opt .cls { margin-left: auto; font: .7rem var(--mono); color: var(--ink-faint);
            white-space: nowrap; }
.opt .curated { color: var(--accent); font: .7rem var(--mono); }

/* ---- results ---- */
.meta { margin: 30px 0 16px; font: .75rem var(--mono); color: var(--ink-faint);
        display: flex; gap: 16px; flex-wrap: wrap; }
.answer { border: 1px solid var(--line); border-radius: 10px; background: var(--panel);
          padding: 18px 20px 16px; margin-bottom: 14px; }
.answer + .answer { opacity: .93; }
.vhead { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.verdict { font: 600 .75rem/1 var(--mono); letter-spacing: .04em; padding: 5px 9px;
           border-radius: 5px; border: 1px solid; }
.v-COMPATIBLE { color: var(--ok); background: var(--ok-in);
                border-color: color-mix(in oklch, var(--ok) 34%, transparent); }
.v-COMPATIBLE_WITH_CONDITIONS { color: var(--warn); background: var(--warn-in);
                border-color: color-mix(in oklch, var(--warn) 34%, transparent); }
.v-INCOMPATIBLE { color: var(--no); background: var(--no-in);
                  border-color: color-mix(in oklch, var(--no) 34%, transparent); }
.rank { font: 500 .75rem var(--mono); color: var(--ink-faint); }
.overridden { font-size: .75rem; color: var(--accent); margin-left: auto; }

/* the signal chain: devices are nodes on a path, not cards in a grid */
.chain { display: flex; flex-direction: column; gap: 0; margin-bottom: 16px; }
.node { display: flex; align-items: baseline; gap: 10px; padding: 3px 0; }
.node .bead { width: 9px; height: 9px; border-radius: 50%; flex: none;
              background: var(--panel); border: 2px solid var(--accent); }
.node .name { font-weight: 540; }
.node .role { font: .7rem var(--mono); color: var(--ink-faint); }
.node a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--line-firm); }
.node a:hover { border-bottom-color: var(--accent); }
.link { margin-left: 4px; padding: 2px 0 2px 16px; border-left: 1px solid var(--line-firm);
        font: .7rem var(--mono); color: var(--ink-faint); min-height: 16px; }
.tierbadge { font: .65rem var(--mono); color: var(--ink-faint);
             border: 1px solid var(--line); border-radius: 3px; padding: 1px 4px; }

/* findings: full-bordered blocks with a tinted ground. No side stripes. */
.finding { display: flex; gap: 10px; padding: 8px 11px; border-radius: 6px;
           border: 1px solid var(--line); font-size: .875rem; margin-top: 7px;
           background: var(--bg-sunk); }
.finding .glyph { font: 600 .75rem/1.5 var(--mono); flex: none; color: var(--ink-faint); }
.finding.advisory { background: var(--warn-in);
  border-color: color-mix(in oklch, var(--warn) 30%, transparent); }
.finding.advisory .glyph { color: var(--warn); }
.finding.blocking { background: var(--no-in);
  border-color: color-mix(in oklch, var(--no) 30%, transparent); }
.finding.blocking .glyph { color: var(--no); }
.finding.danger { background: var(--danger-in);
  border-color: color-mix(in oklch, var(--danger) 46%, transparent); }
.finding.danger .glyph, .finding.danger strong { color: var(--danger); }
.rulename { font: .7rem var(--mono); color: var(--ink-faint); }

.claim { margin-top: 9px; padding: 9px 11px; border: 1px dashed var(--line-firm);
         border-radius: 6px; font-size: .8125rem; color: var(--ink-soft); }
.claim .k { font: .7rem var(--mono); color: var(--ink-faint); }
.unver { color: var(--warn); font: .7rem var(--mono); }

/* ---- empty + loading ---- */
.empty { margin-top: 34px; color: var(--ink-soft); font-size: .9375rem; max-width: 60ch; }
.empty h2 { font-size: .8125rem; font-weight: 560; letter-spacing: .02em;
            text-transform: uppercase; color: var(--ink-faint); margin: 0 0 12px; }
.egs { display: flex; flex-direction: column; gap: 7px; margin-top: 4px; }
.eg { text-align: left; background: none; border: 1px solid var(--line);
      border-radius: var(--r); padding: 10px 13px; font: inherit; color: var(--ink);
      cursor: pointer; transition: border-color .15s var(--ease), background .15s var(--ease); }
.eg:hover { border-color: var(--line-firm); background: var(--panel); }
.eg:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.eg .q { font-weight: 540; }
.eg .why { display: block; color: var(--ink-faint); font-size: .8125rem; margin-top: 2px; }
.skel { height: 12px; border-radius: 4px; background: var(--bg-sunk); margin: 9px 0; }
.skel.a { width: 62%; } .skel.b { width: 88%; } .skel.c { width: 44%; }
@keyframes pulse { 50% { opacity: .48; } }
.loading .skel { animation: pulse 1.15s var(--ease) infinite; }

.rulebook { margin-top: 40px; border-top: 1px solid var(--line); padding-top: 16px; }
.rulebook > summary { cursor: pointer; font-size: .8125rem; font-weight: 560;
  letter-spacing: .02em; text-transform: uppercase; color: var(--ink-faint);
  list-style: none; }
.rulebook > summary::-webkit-details-marker { display: none; }
.rulebook > summary::before { content: "+ "; font-family: var(--mono); }
.rulebook[open] > summary::before { content: "\2212 "; }
.rulebook > summary:hover { color: var(--ink-soft); }
.rulerow { display: grid; grid-template-columns: 210px 1fr; gap: 4px 16px;
  padding: 11px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
@media (max-width: 620px) { .rulerow { grid-template-columns: 1fr; } }
.rulerow:target { background: var(--accent-in); border-radius: 6px;
  padding-left: 10px; padding-right: 10px; }
.ruleid { font: 500 .75rem var(--mono); color: var(--ink); word-break: break-all; }
.rulesev { font: .65rem var(--mono); letter-spacing: .04em; border: 1px solid;
  border-radius: 3px; padding: 1px 5px; margin-left: 6px; white-space: nowrap; }
.sev-blocking { color: var(--no); border-color: color-mix(in oklch, var(--no) 40%, transparent); }
.sev-advisory { color: var(--warn); border-color: color-mix(in oklch, var(--warn) 40%, transparent); }
.sev-safety { color: var(--danger); border-color: color-mix(in oklch, var(--danger) 52%, transparent); }
.ruletext { font-size: .875rem; color: var(--ink-soft); max-width: 68ch; }
a.rulename { text-decoration: none; border-bottom: 1px dotted var(--line-firm); }
a.rulename:hover { color: var(--accent); border-bottom-color: var(--accent); }
footer { margin-top: 42px; padding-top: 18px; border-top: 1px solid var(--line);
         font-size: .8125rem; color: var(--ink-faint); }
footer a { color: var(--ink-soft); }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* --- server-rendered hub pages --- */
table.ports { width: 100%; border-collapse: collapse; margin: 10px 0 22px;
  font-size: .875rem; }
table.ports th { text-align: left; font: 500 .7rem/1.6 var(--mono);
  letter-spacing: .04em; text-transform: uppercase; color: var(--ink-faint);
  border-bottom: 1px solid var(--line-firm); padding: 4px 10px 6px 0; }
table.ports td { padding: 7px 10px 7px 0; border-bottom: 1px solid var(--line);
  vertical-align: top; }
table.ports tr:last-child td { border-bottom: none; }
table.ports td:first-child { font: .8125rem var(--mono); color: var(--ink); white-space: nowrap; }
main.wrap h1, main.wrap h2 { font-size: 1rem; font-weight: 600;
  letter-spacing: -.008em; margin: 30px 0 8px; }
main.wrap .meta a { color: var(--ink-soft); text-decoration: none;
  border-bottom: 1px solid var(--line-firm); }
main.wrap .meta a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.ruletext a { color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--line-firm); }
.ruletext a:hover { color: var(--accent); border-bottom-color: var(--accent); }