/* ==========================================================================
   VAO theme: "Technical paper" (Oct 22 2026). Loads AFTER /styles.css.
   Colour, texture and type detail only: no layout, markup or content changes. No web fonts.
   ========================================================================== */
/* ---- Palette B: "Lagoon" - deep teal #0f766e + coral #ff6f61 ---- */
:root{
  --accent:#0f766e; --accent-ink:#115e59; --spark:#ff6f61; --on-spark:#15181d; --em:#c2412d; --blue:#0f766e;
  --tint:#e7f5f2; --tint-hover:#cdebe5; --tint-edge:#93cfc4; --ring:#0f766e33; --badge-fg:#ffb3a8;
  --meter:#e3f4f0; --needle:#ff6f61; --plate:#eaf5f3; --plate-grid:#0f766e1f;
  --grid:rgba(15,118,110,.05); --grid-major:rgba(15,118,110,.09);
}
/* ---- Shared base: neutrals, texture, surfaces, type details. Every accent comes from the palette block above. ---- */
:root{
  --bg:#fafbfc; --bg2:#f2f4f7; --wood:#eef1f5; --card:#ffffff; --sunk:#f5f7f9; --thumb:#eceff3;
  --line:#d9dde3; --line2:#b3bac4; --edge:#7d8592;          /* edge = UI control borders (>= 3:1 on paper) */
  --text:#15181d; --ink:#15181d; --muted:#434a55; --dim:#59616d; --red:#b3261e; --alu:#59616d;
  --amber:var(--accent); --amber2:var(--accent-ink); --glow:var(--spark);   /* styles.css names -> palette */
  --mono:ui-monospace,"SFMono-Regular","SF Mono",Menlo,Consolas,"Liberation Mono","DejaVu Sans Mono",monospace;
}
/* Engineering-paper grid: 24px minor / 120px major. Reading areas sit on solid paper (below). */
body{background:
  linear-gradient(var(--grid-major) 1px,transparent 1px) 0 0/120px 120px,
  linear-gradient(90deg,var(--grid-major) 1px,transparent 1px) 0 0/120px 120px,
  linear-gradient(var(--grid) 1px,transparent 1px) 0 0/24px 24px,
  linear-gradient(90deg,var(--grid) 1px,transparent 1px) 0 0/24px 24px,
  var(--bg)}
main:has(.g-prose),main:has(.g-list){background:var(--bg)}
::selection{background:var(--tint-hover);color:var(--ink)}
a{color:var(--accent-ink)}

/* Header: full-bleed white strip with a hairline rule (border-image outset = ink overflow, no scrollbars) */
.top{border-image:linear-gradient(#fff calc(100% - 1px),var(--line2) 0) fill 0/0/0 100vmax}
.wordmark{color:var(--ink)}
.vu rect{fill:var(--meter);stroke:var(--ink);stroke-width:1.2}.vu .arc{stroke:var(--ink);stroke-width:1.2}.vu .needle{stroke:var(--needle)}
.jump a,.seo-nav a{color:var(--muted)}
.jump a:hover{color:var(--accent-ink);border-color:var(--edge)}.seo-nav a:hover{color:var(--accent-ink)}

/* Type details: monospace for labels, specs, numbers */
.kicker{font:600 11.5px/1 var(--mono);letter-spacing:.16em;color:var(--accent)}
.kicker::before{background:var(--spark);box-shadow:none;border-radius:0;width:7px;height:7px}
h1 em{color:var(--em);text-shadow:none}
.sec-head h2 .pip{background:var(--spark);box-shadow:none;border-radius:1px}
.sec-head h2 .pip.blue{background:var(--accent);box-shadow:none;border-radius:1px}
.sec-head h2 .pip.green{background:#2f7a3b;box-shadow:none;border-radius:1px}
.sec-head .more,.tl-cta,.slink{color:var(--accent)}
.frame-label{font-family:var(--mono);font-size:11px;color:var(--dim);border-bottom:1px dashed var(--line2)}
.crumbs{font-family:var(--mono);font-size:12px;letter-spacing:.01em}
.price,.tbl .pr{font-family:var(--mono);letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--accent-ink)}
.price small{font-family:var(--font);letter-spacing:0}
.facts span{font-family:var(--mono);font-size:11px;background:var(--sunk);border-radius:3px}
.facts .hot{color:#a3321f;border-color:#e2b3a8}
.meta,.status{font-variant-numeric:tabular-nums}
.meta time{font-family:var(--mono);font-size:.95em}
.tl-kicker,.paid-links,.sugg .k{font-family:var(--mono)}
.chips button .n{font-family:var(--mono)}
.top-entry .rank{font-family:var(--mono);font-weight:700;color:var(--accent)}
.vote-count,.vcell .vc,.vcount{font-family:var(--mono);font-variant-numeric:tabular-nums}
.tl-count{font-family:var(--mono);font-weight:700;letter-spacing:-.03em}
.spinner{border-top-color:var(--accent)}

/* Search + autocomplete */
.search{background:#fff;border-color:var(--edge);border-radius:6px;box-shadow:0 1px 2px #15181d0d}
.search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--ring)}
.search input::placeholder{color:#656d79}
.search button{background:var(--ink);color:#fff;border-radius:4px}
.search button:hover{filter:none;background:var(--accent)}
.popular a{background:#fff;border-color:var(--line2);border-radius:4px;color:var(--muted)}
.popular a:hover{color:var(--accent-ink);border-color:var(--accent)}
.sugg{background:#fff;border-color:var(--edge);border-radius:6px;box-shadow:0 10px 28px #15181d26}
.sugg li[aria-selected=true],.sugg li:hover{background:var(--tint)}
.sugg .ic{color:var(--accent)}.sugg mark{color:var(--accent-ink)}

/* Listings frame + cards */
.listings-frame{background:var(--bg2);border-color:var(--line2);border-radius:8px;box-shadow:none}
.card{border-radius:5px}
.card:hover{border-color:var(--ink);box-shadow:0 6px 16px #15181d14}
.thumb{background:var(--thumb)}
.thumb .noimg{color:var(--dim);font-family:var(--mono);font-size:11px}
.badge{background:#15181de6;color:var(--badge-fg);border-radius:3px;font-family:var(--mono)}
.badge.auction{color:#ffc2b5}
.btn{border-color:var(--accent);color:var(--accent-ink);border-radius:4px}
.btn:hover{background:var(--accent);color:#fff}
.bar{background:var(--bg)}
.chips button,.view button{background:#fff;border-color:var(--line2);border-radius:4px}
.chips button.on,.view button.on{background:var(--accent);border-color:var(--accent);color:#fff}
select{background:#fff;border-color:var(--edge);border-radius:4px}
.tbl th{border-bottom-color:var(--ink)}
.tbl th button.on{color:var(--accent-ink)}
.tbl tr:hover td{background:var(--tint)}
.chip{border-radius:4px;border-color:var(--line2);background:#fff;color:var(--accent-ink)}
.chip:hover{border-color:var(--accent)}

/* Top lists */
.toplists-all{background:var(--accent);color:#fff;border-radius:4px}
.toplists-all:hover{background:var(--accent-ink)}
.toplist-card{background:#fff;border-color:var(--line2);border-radius:6px;box-shadow:none}
.toplist-card:hover,.toplist-card:focus-visible{border-color:var(--ink);box-shadow:0 8px 20px #15181d1a,0 0 0 1px var(--ink)}
.tl-media{background:
  linear-gradient(var(--plate-grid) 1px,transparent 1px) 0 0/12px 12px,
  linear-gradient(90deg,var(--plate-grid) 1px,transparent 1px) 0 0/12px 12px,
  var(--plate);border-bottom:1px solid var(--line)}
.tl-media.has-img{background-size:cover;background-position:center}
.tl-media.has-img::after{background:none}
.tl-count{color:var(--on-spark);background:var(--spark);border-radius:4px;box-shadow:none;border:1px solid var(--ink)}
.tl-body{background:#fff}
.tl-title{color:var(--accent-ink)}
.toplist-card:hover .tl-cta{color:var(--accent-ink)}
.top-entry{border-color:var(--line2);background:#fff;border-radius:6px}
.top-entry .te-img{background:linear-gradient(var(--plate-grid) 1px,transparent 1px) 0 0/12px 12px,linear-gradient(90deg,var(--plate-grid) 1px,transparent 1px) 0 0/12px 12px,var(--plate);border-radius:4px}
.te-commentary{background:var(--sunk);border-left-color:var(--accent)}
.vote,.vote:hover{background:var(--accent);color:#fff;box-shadow:none;border:0}
.vote:hover{background:var(--accent-ink);box-shadow:0 2px 8px var(--ring)}
.vote:focus-visible{outline-color:var(--accent)}
.vote-count{background:#fff;border-color:var(--line2)}
.vcell .vc,.vote-hint{color:var(--accent-ink)}
.readers-pick{color:var(--accent-ink);border-color:var(--accent);border-radius:4px}
.readers-pick:hover{background:var(--tint)}
.suggest-box{background:#fff;border-color:var(--line2)}
.suggest-form input{background:#fff;border-color:var(--edge)}
.suggest-form button{background:var(--accent);color:#fff;border-radius:4px}
.toast{box-shadow:0 8px 24px #15181d40}
/* topvintagehifi banner: toned down to a white hairline plate with a palette stripe */
.thv-banner{background:#fff;color:var(--ink);border:1px solid var(--line2);border-left:4px solid var(--spark);border-radius:6px;box-shadow:none}
.thv-banner:hover{filter:none;border-color:var(--ink);border-left-color:var(--spark)}
.thv-k{background:var(--accent);color:#fff;border-radius:3px;font-family:var(--mono);font-weight:700}

/* Spec tables (top lists + guides): white plate, hairlines, tabular figures */
.spec-wrap{background:#fff;border-color:var(--line2);border-radius:4px}
.spec-table td{font-variant-numeric:tabular-nums}
.spec-table thead th{background:var(--wood);border-bottom:1px solid var(--ink);font-family:var(--mono);font-size:12px;letter-spacing:.03em}
.spec-table th button{color:var(--ink)}
.spec-table th button[data-dir=asc]::after,.spec-table th button[data-dir=desc]::after{color:var(--accent)}
.spec-table tbody tr:nth-child(odd){background:var(--sunk)}
.spec-table tbody tr:hover{background:var(--tint)}
.spec-table a{color:var(--accent-ink)}

/* Filters */
.filters{background:#fff;border-color:var(--line2);border-radius:6px}
.filters select,.filters input[type=number]{background:#fff;border-color:var(--edge);border-radius:4px;font-variant-numeric:tabular-nums}
.filters button{background:var(--accent);color:#fff;border-radius:4px}
.filters .reset{color:var(--accent-ink)}

/* Affiliate disclosures: same elements, wording and placement; colours follow the theme */
.disclosure{background:var(--tint);border-color:var(--tint-edge);color:var(--text);border-radius:4px}

/* Guides: figures on a clean white plate with a thin border; images never filtered or darkened */
.g-prose blockquote{background:#fff;border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:0 4px 4px 0}
.g-prose th,.g-prose td{border-color:var(--line2)}
.g-photo{background:#fff;border:1px solid var(--line2);border-radius:3px;padding:10px}
.g-prose img,.g-photo img{border-radius:0;box-shadow:none;filter:none;opacity:1;mix-blend-mode:normal}
.g-photo figcaption{color:var(--muted);font-size:14px;line-height:1.45;margin-top:10px;padding-top:8px;border-top:1px solid var(--line)}
.g-prose code,.g-prose kbd{font-family:var(--mono);font-size:.9em;background:var(--sunk);border:1px solid var(--line);border-radius:3px;padding:0 4px}
.g-prose a{text-decoration-color:var(--spark);text-decoration-thickness:1.5px;text-underline-offset:3px}
hr{border:0;border-top:1px solid var(--line2)}

/* Footer: solid paper (text not on the grid) */
.foot{background:var(--bg);border-top-color:var(--line2)}