/* JoshBytes shared theme layer ("v2"), PREVIEW ONLY as of 2026-10-01.
 *
 * Loaded AFTER style.css by pages rendered with JOSHBYTES_THEME=v2 (see
 * site_chrome.theme_active()). Default builds do not link this file, so the
 * production site is unchanged until the theme is deliberately rolled out
 * (design_preview/README.md has the rollout plan and the merge-into-style.css
 * follow-up).
 *
 * Contents, in order:
 *   1. Palette tokens: repaired dark (default) and light. Same token names
 *      style.css already uses, so every existing rule recolors for free.
 *      tools/design_preview/contrast.py checks every pairing used here.
 *   2. Links: normal / visited / hover / focus, with components that must NOT
 *      take the body-link color re-asserted afterwards.
 *   3. Typography and spacing.
 *   4. Layout alignment: header, main, .doc, footer share one column.
 *   5. Retailer buttons: one size / shape for Amazon, eBay and secondary.
 *   6. Tables: scroll affordance and stacked cards on phones.
 *
 * Theme selection: <html data-theme="light|dark"> forces a palette; with no
 * attribute the visitor's prefers-color-scheme decides (dark when unknown).
 */

/* ---------- 1. Palettes ---------- */

:root,
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f1115;
  --panel: #171a21;
  --panel-2: #1e222b;
  --border: #343a48;
  --text: #e9ebf0;
  --text-dim: #aeb5c2;
  --accent: #6db0ff;
  --accent-dim: #2a5cab;       /* active chip / tab fill, white text on it */
  --link: #7ab8ff;
  --link-visited: #c5a8ff;
  --link-hover: #ffffff;
  --focus: #ffd166;
  --good: #4cd9a0;
  --bad: #ff8585;
  --warn: #f2b13c;
  --btn-amazon-bg: #ff9900;
  --btn-amazon-fg: #111111;
  --btn-ebay-bg: #1a68d6;
  --btn-ebay-fg: #ffffff;
  --score-bg: #173f2d;
  --score-fg: #75e2a7;
  --shadow: rgba(0, 0, 0, 0.35);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #f6f7f9;
    --panel: #ffffff;
    --panel-2: #eef0f4;
    --border: #d3d8e0;
    --text: #161a22;
    --text-dim: #4b5363;
    --accent: #0a58ca;
    --accent-dim: #0a58ca;
    --link: #0a58ca;
    --link-visited: #6b3aa8;
    --link-hover: #062f6e;
    --focus: #b35c00;
    --good: #0a7a4b;
    --bad: #b42318;
    --warn: #8a5600;
    --btn-amazon-bg: #ff9900;
    --btn-amazon-fg: #111111;
    --btn-ebay-bg: #0b57d0;
    --btn-ebay-fg: #ffffff;
    --score-bg: #d9f2e5;
    --score-fg: #0a5c38;
    --shadow: rgba(22, 26, 34, 0.14);
  }
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f6f7f9;
  --panel: #ffffff;
  --panel-2: #eef0f4;
  --border: #d3d8e0;
  --text: #161a22;
  --text-dim: #4b5363;
  --accent: #0a58ca;
  --accent-dim: #0a58ca;
  --link: #0a58ca;
  --link-visited: #6b3aa8;
  --link-hover: #062f6e;
  --focus: #b35c00;
  --good: #0a7a4b;
  --bad: #b42318;
  --warn: #8a5600;
  --btn-amazon-bg: #ff9900;
  --btn-amazon-fg: #111111;
  --btn-ebay-bg: #0b57d0;
  --btn-ebay-fg: #ffffff;
  --score-bg: #d9f2e5;
  --score-fg: #0a5c38;
  --shadow: rgba(22, 26, 34, 0.14);
}

/* ---------- 2. Links ---------- */

a:link, .doc a:link, footer a:link, .breadcrumb a:link { color: var(--link); }
a:visited, .doc a:visited, footer a:visited, .breadcrumb a:visited { color: var(--link-visited); }
a:hover, .doc a:hover, footer a:hover { color: var(--link-hover); }
a:link, a:visited {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a:hover { text-decoration-thickness: 2px; }
a:focus-visible, button:focus-visible, summary:focus-visible,
select:focus-visible, input:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Navigation-style links keep their own (dim / active) colors in every
   link state: a visited "Guides" tab should not turn purple. */
.site-nav a:link, .site-nav a:visited,
.platform-switch a:link, .platform-switch a:visited { color: var(--text-dim); text-decoration: none; }
.site-nav a:hover, .platform-switch a:hover { color: var(--text); }
.site-nav a.active:link, .site-nav a.active:visited,
.platform-switch a.active:link, .platform-switch a.active:visited { color: var(--accent); }
.breadcrumb a:link, .breadcrumb a:visited { color: var(--text-dim); }
.breadcrumb a:hover { color: var(--text); }
.pagination-nav a:link, .pagination-nav a:visited { color: var(--text); text-decoration: none; }
.pagination-jump a:link, .pagination-jump a:visited { color: var(--text-dim); text-decoration: none; }
.card h3 a:link, .card h3 a:visited { color: var(--text); }
.site-brand:link, .site-brand:visited { text-decoration: none; }
.site-wordmark { color: var(--text); }

/* Links inside tables read as a list of destinations, not a paragraph of
   emphasis: normal weight, lighter underline. */
.reference-table a, .shortlist-table a, .stack-mobile a { font-weight: 500; }
.reference-table a:link, .reference-table a:visited,
.shortlist-table a:link, .shortlist-table a:visited {
  text-decoration-color: color-mix(in srgb, currentColor 55%, transparent);
}

/* ---------- 3. Typography and spacing ---------- */

html { -webkit-text-size-adjust: 100%; }
body { font-size: 1rem; line-height: 1.6; }
h1, h2, h3 { line-height: 1.25; letter-spacing: -0.012em; }
.site-header h1 { font-size: clamp(1.65rem, 3.2vw, 2.15rem); margin-bottom: 8px; }
main h2, .doc h2 { font-size: 1.4rem; margin: 2.25rem 0 0.6rem; }
main h3, .doc h3 { font-size: 1.1rem; margin: 1.6rem 0 0.4rem; }
.site-header p.tagline { font-size: 1.05rem; line-height: 1.5; max-width: 62ch; }
.section-blurb, .callout, .calc-note { font-size: 0.95rem; line-height: 1.6; }
.section-blurb { max-width: 72ch; color: var(--text-dim); }
main > p, .doc > p { max-width: 72ch; }
main > p:first-child { margin-top: 1.25rem; }
.doc p, .doc li { color: var(--text); line-height: 1.65; }
.doc .dek, .doc .footnote, .doc figcaption { color: var(--text-dim); }
.doc ul, main > ul { padding-left: 1.3rem; max-width: 72ch; }
.doc li, main li { margin: 0.3rem 0; }
.value-score { background: var(--score-bg); color: var(--score-fg); }
.value-gauge-arrow { text-shadow: 0 0 2px var(--bg), 0 0 2px var(--bg); }
.filter-shell { box-shadow: 0 8px 24px var(--shadow); }
[data-tooltip]::after { box-shadow: 0 8px 24px var(--shadow); }

/* ---------- 4. One column for header, content and footer ---------- */

.site-header, main, footer, .doc {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(16px, 4vw, 24px);
  padding-right: clamp(16px, 4vw, 24px);
}
.doc { margin-top: 24px; margin-bottom: 60px; }
/* Long-form measure applies to text blocks only; tables, picks and the
   related box use the full column so they line up with the header. */
.doc > :is(p, ul, ol, h2, h3, .footnote) { max-width: 72ch; }
.doc .related { max-width: 72ch; }
/* Footer rule spans the content column, not the padded box. */
footer {
  border-top: 0;
  padding-top: 28px;
  font-size: 0.85rem;
  line-height: 1.6;
  background: linear-gradient(var(--border), var(--border)) top left / calc(100% - 2 * clamp(16px, 4vw, 24px)) 1px no-repeat;
  background-position: center top;
}
footer p { max-width: 80ch; }
.nas-callout { background: linear-gradient(135deg, var(--panel) 0%, var(--panel-2) 100%); }

@media (max-width: 760px) {
  /* style.css hides the last two nav links on phones (Guides, About) -
     including on the Guides pages. Keep all four and let them wrap. */
  .site-nav a:nth-last-child(-n + 2) { display: inline; }
  .site-header-bar { flex-wrap: wrap; row-gap: 4px; padding: 10px 0; }
  .site-nav { gap: 4px 16px; font-size: 0.86rem; }
  .context-row { flex-direction: row; flex-wrap: wrap; align-items: center; }
  main h2, .doc h2 { font-size: 1.25rem; }
}

/* ---------- 5. Retailer buttons ---------- */
/* Amazon = amber, eBay = blue, everything else (compatibility, manufacturer,
   "View details") = outlined .btn-secondary. Same height, radius, type. The
   a:link/a:visited selectors repeat the colors because style.css's global
   link rule would otherwise win. Class names are unchanged: tracking reads
   data-track-* and the href, never these classes. */

.btn, .btn-amazon, .btn-ebay {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  min-height: 40px;
  padding: 8px 16px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 0.92rem;
  font-weight: 650;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
}
.btn-amazon { background: var(--btn-amazon-bg); color: var(--btn-amazon-fg); }
.btn-ebay { background: var(--btn-ebay-bg); color: var(--btn-ebay-fg); }
.btn-secondary, .btn-amazon.btn-secondary, .btn-ebay.btn-secondary {
  background: var(--panel);
  border-color: var(--border);
  color: var(--text);
}
a.btn-amazon:link, a.btn-amazon:visited { color: var(--btn-amazon-fg); text-decoration: none; }
a.btn-ebay:link, a.btn-ebay:visited { color: var(--btn-ebay-fg); text-decoration: none; }
a.btn-secondary:link, a.btn-secondary:visited,
a.btn-amazon.btn-secondary:link, a.btn-amazon.btn-secondary:visited { color: var(--text); text-decoration: none; }
a.btn-amazon:hover, a.btn-ebay:hover { color: inherit; filter: brightness(1.07); }
a.btn-amazon:hover { color: var(--btn-amazon-fg); }
a.btn-ebay:hover { color: var(--btn-ebay-fg); }
a.btn-secondary:hover { border-color: var(--accent); color: var(--text); filter: none; }
.btn-ebay .ebay-price { font-weight: 400; opacity: 0.9; }

.cta, .pick .cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 1rem;
}
/* Buttons that sit inside table cells and list rows are compact. */
td .btn-ebay, td .btn-amazon { min-height: 34px; padding: 5px 12px; font-size: 0.88rem; white-space: nowrap; }

/* ---------- 6. Tables ---------- */

.reference-table th, .reference-table td,
.shortlist-table th, .shortlist-table td { padding: 12px 14px; vertical-align: middle; }
.reference-table thead th, .shortlist-table thead th {
  color: var(--text-dim);
  font-size: 0.85rem;
  font-weight: 650;
  white-space: nowrap;
}
.reference-table td, .shortlist-table td { font-variant-numeric: tabular-nums; }
.nas-detail-summary .reference-table th { width: 38%; color: var(--text-dim); }
.reference-table tbody tr:hover, .shortlist-table tbody tr:hover { background: var(--panel); }
.shortlist-scroll, .table-scroll { overflow-x: auto; max-width: 100%; }
.shortlist-table { width: 100%; border-collapse: collapse; }
.reference-table th, .reference-table td, .shortlist-table th, .shortlist-table td { text-align: left; }
.shortlist-table th, .shortlist-table td { border-bottom: 1px solid var(--border); }

/* Pick cards on the guide. */
.pick { display: grid; grid-template-columns: 180px 1fr; gap: 24px; padding: 28px 0; border-bottom: 1px solid var(--border); }
.pick img { width: 100%; height: 180px; object-fit: contain; background: #fff; border-radius: 12px; border: 1px solid var(--border); }
.pick h2 { margin-top: 0; }
.pick p { max-width: 68ch; }
.score { font-size: 1.15rem; font-weight: 700; color: var(--accent); }
.pick sup a { text-decoration: none; }
.doc .footnote { font-size: 0.85rem; border-top: 1px solid var(--border); padding-top: 12px; margin-top: 24px; }
.pick-photo-missing {
  display: grid; place-items: center; width: 100%; height: 180px; padding: 12px; text-align: center;
  background: var(--panel-2); border: 1px dashed var(--border); border-radius: 12px;
  color: var(--text-dim); font-size: 0.8rem;
}

@media (max-width: 760px) {
  /* Generic multi-column tables scroll horizontally, with a visible edge
     shadow so the clipped columns are discoverable. */
  .reference-table, .shortlist-scroll, .table-scroll {
    display: block;
    overflow-x: auto;
    background:
      linear-gradient(to right, var(--bg) 30%, transparent) left center / 24px 100% no-repeat local,
      linear-gradient(to left, var(--bg) 30%, transparent) right center / 24px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, var(--shadow), transparent) left center / 12px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, var(--shadow), transparent) right center / 12px 100% no-repeat scroll;
  }
  .nas-detail-summary .reference-table { display: table; background: none; }
  .nas-detail-summary .reference-table th { width: 42%; }
  .pick { grid-template-columns: 1fr; gap: 16px; }
  .pick img, .pick-photo-missing { width: 160px; height: 160px; }
}

/* Tables marked .stack-mobile (the $/TB ranking and the guide's shortlist)
   become one card per row on phones. Every <td> carries data-label so the
   column name is printed beside its value; .col-rank / .col-title form the
   card heading. The header row stays in the DOM, visually hidden. */
@media (max-width: 640px) {
  table.stack-mobile { display: block; background: none; overflow: visible; min-width: 0; }
  table.stack-mobile thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  table.stack-mobile tbody { display: block; }
  table.stack-mobile tr {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 10px;
    margin: 0 0 12px;
    padding: 10px 14px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 10px;
  }
  table.stack-mobile td {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
    border: 0;
    border-top: 1px solid var(--border);
    text-align: right;
  }
  table.stack-mobile td::before {
    content: attr(data-label);
    flex: none;
    color: var(--text-dim);
    font-size: 0.85rem;
    font-weight: 600;
    text-align: left;
  }
  table.stack-mobile td.col-rank { grid-column: 1; border-top: 0; padding: 4px 0; font-weight: 700; color: var(--text-dim); }
  table.stack-mobile td.col-rank::before { content: "#"; }
  table.stack-mobile td.col-title { grid-column: 2; border-top: 0; padding: 4px 0; justify-content: flex-start; text-align: left; font-size: 1.02rem; }
  table.stack-mobile td.col-title::before { content: none; }
  table.stack-mobile td.col-title:first-child { grid-column: 1 / -1; }
  /* Columns repeated in the pick cards below (guide shortlist) are dropped
     from the phone cards; they stay in the DOM and on wider screens. */
  table.stack-mobile td.col-extra { display: none; }
  table.stack-mobile td.col-action .btn-ebay, table.stack-mobile td.col-action .btn-amazon { white-space: normal; }
}

/* ---------- 7. NAS detail extras (inline styles removed under theme v2) ---------- */

.section-note { font-size: 0.85rem; max-width: 80ch; margin: 10px 0 0; }
.section-foot { margin-top: 2.25rem; }
summary { cursor: pointer; font-weight: 600; }
.calc-panel > summary { padding: 4px 0; }
.drive-filter-controls { margin: 12px 0; }
.reference-table td .btn-ebay, .reference-table td .btn-amazon { margin: 2px 0; }
@media (max-width: 760px) {
  /* keep model numbers / SKUs on one line in wide scrolling tables */
  .reference-table:not(.stack-mobile) td:first-child { white-space: nowrap; }
  .nas-detail-summary .reference-table td:first-child { white-space: normal; }
}