/* ===== styles/base.css ===== */
body{margin:0;background:var(--kv-ground);color:var(--kv-text);font-family:var(--kv-sans);font-size:16px;line-height:1.6}
a{color:var(--kv-link);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
a:focus-visible{outline:2px solid var(--kv-clay);outline-offset:2px}

/* Grain overlay. Apply .kv-grain to any coloured surface; add .kv-on-dark on dark grounds. */
.kv-grain{position:relative;isolation:isolate}
.kv-grain::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:var(--kv-grain);background-size:160px 160px;opacity:.08;mix-blend-mode:multiply}
.kv-grain.kv-on-dark::after{opacity:.12;mix-blend-mode:overlay}

/* Layout */
.kv-container{max-width:var(--kv-w-std);margin:0 auto;padding:0 var(--kv-space-5)}
.kv-container--read{max-width:var(--kv-w-read)}
.kv-container--wide{max-width:var(--kv-w-wide)}
@media (min-width:768px){.kv-container{padding:0 var(--kv-space-7)}}
@media (min-width:1280px){.kv-container{padding:0 var(--kv-space-8)}}
.kv-section{padding-block:var(--kv-space-8)}
@media (min-width:768px){.kv-section{padding-block:var(--kv-space-9)}}
.kv-hr{border:0;border-top:1px solid var(--kv-hairline);margin:0}

@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}


/* ===== styles/type.css ===== */
.kv-h1{font-family:var(--kv-serif);font-size:var(--kv-fs-h1);line-height:var(--kv-lh-h1);font-weight:600;letter-spacing:var(--kv-ls-h1);color:var(--kv-heading);margin:0}
.kv-h2{font-family:var(--kv-serif);font-size:var(--kv-fs-h2);line-height:var(--kv-lh-h2);font-weight:600;letter-spacing:var(--kv-ls-h2);color:var(--kv-heading);margin:0}
.kv-h3{font-family:var(--kv-serif);font-size:var(--kv-fs-h3);line-height:var(--kv-lh-h3);font-weight:500;color:var(--kv-heading);margin:0}
.kv-lede{font-family:var(--kv-serif);font-size:var(--kv-fs-lede);line-height:var(--kv-lh-lede);font-weight:300;font-style:italic;color:var(--kv-text-muted);margin:0}
.kv-body{font-family:var(--kv-serif);font-size:var(--kv-fs-body);line-height:var(--kv-lh-body);font-weight:400;max-width:66ch;margin:0}
.kv-verdict-text{font-family:var(--kv-serif);font-size:var(--kv-fs-verdict);line-height:var(--kv-lh-verdict);font-weight:500;color:var(--kv-heading);margin:0}
.kv-quote{font-family:var(--kv-serif);font-size:var(--kv-fs-quote);line-height:var(--kv-lh-quote);font-weight:300;font-style:italic;color:var(--kv-heading);margin:0}
.kv-nav{font-family:var(--kv-sans);font-size:var(--kv-fs-nav);line-height:var(--kv-lh-nav);font-weight:500}
.kv-label{font-family:var(--kv-sans);font-size:var(--kv-fs-label);line-height:var(--kv-lh-label);font-weight:600;letter-spacing:var(--kv-ls-label);text-transform:uppercase;color:var(--kv-text-muted)}
.kv-table-text{font-family:var(--kv-sans);font-size:var(--kv-fs-table);line-height:var(--kv-lh-table);font-variant-numeric:tabular-nums}
.kv-table-dense{font-family:var(--kv-sans-condensed);font-stretch:85%}
.kv-caption{font-family:var(--kv-sans);font-size:var(--kv-fs-caption);line-height:var(--kv-lh-caption);color:var(--kv-text-muted)}

/* Emphasis. In prose the serif at 600. In a card the sans at 700, 0.94em, so the
   two match optically. A paragraph is read; a card is scanned. */
.kv-body strong{font-weight:600}
.kv-card-line b{font-family:var(--kv-sans);font-weight:700;font-size:.94em}
.kv-card-line i{font-style:italic}


/* ===== styles/components.css ===== */
/* Buttons. Signal is the only button on the site that uses clay. Gold never appears. */
.kv-btn{display:inline-block;font-family:var(--kv-sans);font-size:var(--kv-fs-button);line-height:var(--kv-lh-button);font-weight:600;padding:var(--kv-space-3) var(--kv-space-5);border-radius:var(--kv-radius);border:1px solid transparent;text-decoration:none;cursor:pointer}
.kv-btn--primary{background:var(--kv-damson);color:var(--kv-chalk);border-color:var(--kv-damson)}
.kv-btn--secondary{background:transparent;color:var(--kv-heading);border-color:currentColor}
.kv-btn--signal{background:var(--kv-clay);color:var(--kv-chalk);border-color:var(--kv-clay)}
.kv-btn:hover{filter:brightness(.92);text-decoration:none}
.kv-btn:active{filter:brightness(.86)}
.kv-btn:focus-visible{outline:2px solid var(--kv-clay);outline-offset:2px}
.kv-btn[aria-disabled="true"],.kv-btn:disabled{opacity:.45;pointer-events:none}

/* Verdict block */
.kv-verdict{border-top:2px solid var(--kv-heading);padding-top:var(--kv-space-4)}
.kv-verdict__label{font-family:var(--kv-sans);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--kv-text-muted);margin-bottom:var(--kv-space-2)}
.kv-verdict__meta{display:flex;gap:var(--kv-space-5);flex-wrap:wrap;font-family:var(--kv-sans);font-size:13px;color:var(--kv-text-muted);border-top:1px solid var(--kv-hairline);padding-top:var(--kv-space-3);font-variant-numeric:tabular-nums}

/* Judgement labels. Colour, glyph and word together. Never colour alone. */
.kv-judge{display:inline-block;font-family:var(--kv-sans);font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:2px 7px;border-radius:var(--kv-radius);border:1px solid currentColor}
.kv-judge--ok{color:var(--kv-ok)}
.kv-judge--watch{color:var(--kv-watch)}
.kv-judge--stop{color:var(--kv-stop)}
.kv-on-dark .kv-judge--ok{color:var(--kv-ok-dark)}
.kv-on-dark .kv-judge--watch{color:var(--kv-watch-dark)}
.kv-on-dark .kv-judge--stop{color:var(--kv-stop-dark)}

/* Review card. Optional Karivue screenshot, never a provider logo or marketing image. */
.kv-review-card{background:var(--kv-surface);border:1px solid var(--kv-hairline);border-radius:var(--kv-radius);padding:var(--kv-space-5);display:flex;flex-direction:column;gap:var(--kv-space-3)}
.kv-review-card:is(a){color:inherit;text-decoration:none}
.kv-review-card:is(a):hover{filter:brightness(.98);text-decoration:none}
.kv-review-card:is(a):focus-visible{outline:2px solid var(--kv-clay);outline-offset:2px}
.kv-review-card__title{max-width:38ch}
.kv-review-card__summary{font-family:var(--kv-serif);font-size:16px;line-height:26px;color:var(--kv-text);margin:0;max-width:52ch}
.kv-review-card__foot{display:flex;gap:var(--kv-space-4);align-items:baseline;justify-content:space-between;border-top:1px solid var(--kv-hairline);padding-top:var(--kv-space-3);margin-top:auto}
.kv-review-card__foot span{font-family:var(--kv-sans);font-size:var(--kv-fs-caption);line-height:var(--kv-lh-caption);color:var(--kv-text-muted);font-variant-numeric:tabular-nums}

/* Comparison table. Wide tables scroll inside their own container; the page body
   never scrolls sideways at 360px. */
.kv-table-wrap{overflow-x:auto;border:1px solid var(--kv-hairline);border-radius:var(--kv-radius);background:var(--kv-surface)}
.kv-tbl{width:100%;border-collapse:collapse;font-family:var(--kv-sans);font-size:var(--kv-fs-table);line-height:var(--kv-lh-table);font-variant-numeric:tabular-nums}
.kv-tbl th{text-align:left;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--kv-text-muted);border-bottom:1px solid var(--kv-rule);padding:var(--kv-space-3) var(--kv-space-4);white-space:nowrap}
.kv-tbl td{padding:var(--kv-space-3) var(--kv-space-4);border-bottom:1px solid var(--kv-hairline);vertical-align:top}
.kv-tbl tr:last-child td{border-bottom:0}
.kv-tbl tbody tr:nth-child(even){background:var(--kv-surface-alt)}

/* Score row. 0 to 3 each, 24 maximum. A bare number is not evidence. */
.kv-score{display:grid;grid-template-columns:1fr auto;gap:var(--kv-space-3) var(--kv-space-4);align-items:baseline;padding:var(--kv-space-3) 0;border-bottom:1px solid var(--kv-hairline)}
.kv-score__n{font-family:var(--kv-sans);font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--kv-heading)}
.kv-score__bar{display:flex;gap:3px}
.kv-score__pip{width:9px;height:9px;background:var(--kv-hairline)}
.kv-score__pip--on{background:var(--kv-damson)}

/* Chips, used for the eight category filters on /reviews */
.kv-chip{font-family:var(--kv-sans);font-size:13px;font-weight:500;padding:5px 11px;border:1px solid var(--kv-rule);border-radius:var(--kv-radius);background:transparent;color:var(--kv-text);cursor:pointer}
.kv-chip:hover{border-color:var(--kv-heading)}
.kv-chip[aria-pressed="true"]{background:var(--kv-damson);border-color:var(--kv-damson);color:var(--kv-chalk)}
.kv-chip:focus-visible{outline:2px solid var(--kv-clay);outline-offset:2px}

/* Forms */
.kv-input{font-family:var(--kv-sans);font-size:15px;padding:var(--kv-space-3) var(--kv-space-4);border:1px solid var(--kv-rule);border-radius:var(--kv-radius);background:var(--kv-surface);color:var(--kv-text);width:100%}
.kv-input::placeholder{color:var(--kv-text-muted)}
.kv-input:focus-visible{outline:2px solid var(--kv-clay);outline-offset:1px}

/* Social card, 1080 x 1350 */
.kv-card{aspect-ratio:4/5;display:flex;flex-direction:column;justify-content:space-between;padding:var(--kv-space-9) var(--kv-space-9) var(--kv-space-8);border-radius:var(--kv-radius)}
.kv-card__eyebrow{font-family:var(--kv-sans);font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;opacity:.62}
.kv-card__line{font-family:var(--kv-serif);font-size:34px;line-height:1.34;font-weight:400;margin:0}
.kv-card__wordmark{display:flex;align-items:baseline;gap:var(--kv-space-2);border-top:1px solid currentColor;padding-top:var(--kv-space-3)}

/* Feed rotation ground utilities */
.kv-g-chalk{background:var(--kv-g-chalk);color:var(--kv-ink)}
.kv-g-lilac-mist{background:var(--kv-g-lilac-mist);color:var(--kv-ink)}
.kv-g-apricot-wash{background:var(--kv-g-apricot-wash);color:var(--kv-ink)}
.kv-g-heather-wash{background:var(--kv-g-heather-wash);color:var(--kv-ink)}   /* no verdict labels */
.kv-g-apricot{background:var(--kv-g-apricot);color:var(--kv-ink)}             /* no verdict labels */
.kv-g-clay{background:var(--kv-g-clay);color:var(--kv-chalk)}                 /* verdict in chalk */
.kv-g-fern{background:var(--kv-g-fern);color:var(--kv-chalk)}                 /* verdict in chalk */
.kv-g-plum{background:var(--kv-g-plum);color:var(--kv-chalk)}                 /* verdict in chalk */
.kv-g-damson{background:var(--kv-g-damson);color:var(--kv-chalk)}
.kv-g-ink{background:var(--kv-g-ink);color:var(--kv-chalk)}


/* ===== styles/marking.css ===== */
/* Text marking, v2.1. Six mechanisms, one per meaning. NO ACCENT RAIL on any of
   them: a coloured bar on the left edge tells a reader only that a category
   exists, then makes them look up which one. Register, measure, ground and
   position each carry information on their own. */

/* 1. Register shift — editorial note, aside. Use freely. */
.kv-note{font-family:var(--kv-sans);font-size:14.5px;line-height:1.6;color:var(--kv-text-muted);max-width:52ch;margin:0 0 0 var(--kv-space-6)}
.kv-note__label{display:block;font-family:var(--kv-sans);font-size:10.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--kv-clay);margin-bottom:6px}

/* 2. Run-in label — caveat, disclosure. Use freely. One to three lines. */
.kv-runin{max-width:64ch;border-top:1px solid var(--kv-rule);padding-top:14px}
.kv-runin__label{font-family:var(--kv-sans);font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--kv-clay);margin-right:.6em;white-space:nowrap}

/* 3. Hairline sandwich — principle, commitment. Max twice per page. */
.kv-sandwich{border-top:1px solid var(--kv-hairline);border-bottom:1px solid var(--kv-hairline);padding:var(--kv-space-4) 0;max-width:62ch}
.kv-sandwich p{font-family:var(--kv-serif);font-style:italic;font-weight:300;font-size:18px;color:var(--kv-heading);margin:0}
.kv-sandwich cite{display:block;font-family:var(--kv-sans);font-style:normal;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--kv-text-muted);margin-top:12px}

/* 4. Flat field — the verdict. ONCE per page. Grounds: damson, plum, ink only.
      Clay and Fern are excluded: they already carry judgement. */
.kv-field{background:var(--kv-damson);color:var(--kv-chalk);padding:var(--kv-space-7) var(--kv-space-7);max-width:60ch;position:relative;isolation:isolate;border-radius:0}
.kv-field--plum{background:var(--kv-plum)}
.kv-field--ink{background:var(--kv-ink)}
.kv-field__label{display:block;font-family:var(--kv-sans);font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--kv-apricot);margin-bottom:12px}
.kv-field--plum .kv-field__label{color:var(--kv-sprout)}  /* apricot on plum is 4.34:1, fails */
.kv-field p{font-family:var(--kv-serif);font-size:20px;line-height:1.45;margin:0;color:var(--kv-chalk)}
.kv-field__verdict-row{display:flex;align-items:center;flex-wrap:wrap;gap:var(--kv-space-3)}
.kv-maturity{font-family:var(--kv-sans);font-size:var(--kv-fs-caption);line-height:var(--kv-lh-caption);color:var(--kv-chalk)}

/* 5. Margin note — qualification on one claim. Reviews only. */
.kv-margin-note{display:grid;grid-template-columns:1fr;gap:14px}
@media (min-width:900px){.kv-margin-note{grid-template-columns:1fr 232px;gap:var(--kv-space-6);align-items:start}}
.kv-margin-note aside{font-family:var(--kv-sans);font-size:12.5px;line-height:1.55;color:var(--kv-text-muted);border-top:2px solid var(--kv-clay);padding-top:10px}
.kv-margin-note aside b{display:block;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--kv-clay);margin-bottom:6px}
.kv-marker{font-family:var(--kv-sans);font-size:.62em;font-weight:700;color:var(--kv-clay);vertical-align:super}

/* 6. Substrate shift — test record, scores, price. Once per review. */
.kv-substrate{background:var(--kv-surface-alt);padding:var(--kv-space-5) var(--kv-space-6);max-width:62ch;position:relative;isolation:isolate;border:0;border-radius:0}
.kv-substrate__label{display:block;font-family:var(--kv-sans);font-size:10.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--kv-fern);margin-bottom:10px}
.kv-substrate .row{display:flex;gap:16px;padding:7px 0;border-bottom:1px solid var(--kv-hairline);font-family:var(--kv-sans);font-size:13px}
.kv-substrate .row:last-child{border-bottom:none}
.kv-substrate dt{flex:0 0 132px;color:var(--kv-text-muted);margin:0}
.kv-substrate dd{margin:0;font-variant-numeric:tabular-nums;color:var(--kv-text)}


/* ===== v2.2 component additions ===== */
/* v2.2 additions to styles/components.css.
   Factor read, data handling, trade-off table, card thumbnail, audio player. */

/* ---------- Factor read. Five factors, three bands, no scale. ---------- */
.kv-fr{display:grid;gap:0}
.kv-fr__row{display:grid;grid-template-columns:1fr;gap:6px;padding:var(--kv-space-4) 0;border-bottom:1px solid var(--kv-hairline)}
.kv-fr__row:last-child{border-bottom:0}
@media (min-width:600px){.kv-fr__row{grid-template-columns:1fr 190px;gap:var(--kv-space-4);align-items:baseline}}
.kv-fr--collapsed .kv-fr__row{grid-template-columns:1fr 190px;padding:10px 0}
.kv-fr__name{font-family:var(--kv-sans);font-size:15px;font-weight:600;color:var(--kv-heading)}
.kv-fr__reason{font-family:var(--kv-sans);font-size:13px;line-height:20px;color:var(--kv-text-muted);max-width:52ch}
.kv-fr__untested{font-family:var(--kv-sans);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--kv-band-untested)}
.kv-fr-compact{font-family:var(--kv-sans);font-size:13px;color:var(--kv-text-muted)}
.kv-fr-compact b{font-weight:400;color:var(--kv-text)}
.kv-fr-compact .kv-judge{margin-left:6px}

/* ---------- Data handling. A run-in, never a field. ---------- */
.kv-dh{max-width:58ch}
.kv-dh .kv-judge{margin-right:var(--kv-space-2)}
.kv-dh__line{font-family:var(--kv-serif);font-size:16px;line-height:26px;color:var(--kv-text)}
@media (max-width:520px){
  .kv-dh .kv-runin__label{display:block;margin-bottom:6px}
  .kv-dh__line{display:block;margin-top:var(--kv-space-2);font-size:15px;line-height:24px}
}

/* ---------- Trade-off table. Three to six options, no zebra, pinned column.
   Seven columns resolve by scrolling inside .kv-table-wrap, never by squeezing
   a chip onto two lines. ---------- */
.kv-tbl--tradeoff{min-width:1080px}
.kv-tbl.kv-tbl--tradeoff tbody tr:nth-child(even){background:transparent}
.kv-tbl--tradeoff th:first-child,.kv-tbl--tradeoff td:first-child{position:sticky;left:0;background:var(--kv-surface);border-right:1px solid var(--kv-rule);font-weight:600;color:var(--kv-heading)}
.kv-tbl--tradeoff td:first-child,.kv-tbl--tradeoff td:last-child,.kv-tbl--tradeoff .kv-judge{white-space:nowrap}
.kv-tbl--tradeoff td.kv-tbl__conclusion{white-space:normal;position:static;border-top:2px solid var(--kv-heading);background:transparent}
.kv-tbl__conclusion p{font-family:var(--kv-serif);font-size:18px;line-height:28px;max-width:70ch;margin:6px 0 0;color:var(--kv-text)}
.kv-tradeoff-stack{display:grid;gap:var(--kv-space-3)}
.kv-tradeoff-stack article{border:1px solid var(--kv-hairline);background:var(--kv-surface);border-radius:var(--kv-radius);padding:var(--kv-space-4)}
.kv-tradeoff-stack h4{font-family:var(--kv-sans);font-size:15px;font-weight:600;color:var(--kv-heading);margin:0}
.kv-tradeoff-stack .row{display:flex;gap:var(--kv-space-3);padding:6px 0;border-bottom:1px solid var(--kv-hairline);font-family:var(--kv-sans);font-size:13px}
.kv-tradeoff-stack .row:last-child{border-bottom:0}
.kv-tradeoff-stack dt{flex:0 0 116px;color:var(--kv-text-muted);margin:0}
.kv-tradeoff-stack dd{margin:0;font-variant-numeric:tabular-nums}

/* ---------- Card thumbnail. Karivue's own screenshot of the tested product.
   Never a provider logo, never provider marketing artwork, never grain: grain
   over a screenshot reads as a fault in the screenshot. ---------- */
.kv-thumb{aspect-ratio:var(--kv-thumb-ratio);background:var(--kv-surface-alt);border:1px solid var(--kv-hairline);overflow:hidden}
.kv-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.kv-review-card--rail{flex:0 0 268px;padding:var(--kv-space-4);gap:10px}

/* ---------- Audio player. A skin over the native element. Two glyphs. ---------- */
.kv-audio__entry{font-family:var(--kv-sans);font-size:13px;font-weight:600;color:var(--kv-link);display:inline-flex;align-items:center;gap:6px;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;background:none;border:0;padding:0;cursor:pointer}
.kv-audio__entry:hover{text-decoration-thickness:2px}
.kv-audio__entry:focus-visible{outline:2px solid var(--kv-clay);outline-offset:2px}
.kv-audio{border-top:1px solid var(--kv-rule);padding-top:var(--kv-space-4)}
.kv-audio__row{display:flex;gap:14px;align-items:center}
.kv-audio__btn{width:36px;height:36px;flex:0 0 36px;display:grid;place-items:center;background:var(--kv-damson);color:var(--kv-chalk);border:1px solid var(--kv-damson);border-radius:var(--kv-radius);cursor:pointer;padding:0}
.kv-audio__btn:hover{filter:brightness(.92)}
.kv-audio__btn:active{filter:brightness(.86)}
.kv-audio__btn:focus-visible{outline:2px solid var(--kv-clay);outline-offset:2px}
.kv-audio__btn[disabled]{opacity:.45;pointer-events:none}
.kv-audio__time{font-family:var(--kv-sans);font-size:12.5px;font-variant-numeric:tabular-nums;color:var(--kv-text-muted);white-space:nowrap}
.kv-audio__scrub{flex:1;-webkit-appearance:none;appearance:none;height:12px;background:transparent;cursor:pointer;margin:0}
.kv-audio__scrub:focus-visible{outline:2px solid var(--kv-clay);outline-offset:2px}
.kv-audio__scrub::-webkit-slider-runnable-track{height:var(--kv-track-h);background:var(--kv-hairline)}
.kv-audio__scrub::-moz-range-track{height:var(--kv-track-h);background:var(--kv-hairline)}
.kv-audio__scrub::-moz-range-progress{height:var(--kv-track-h);background:var(--kv-damson)}
.kv-audio__scrub::-webkit-slider-thumb{-webkit-appearance:none;width:2px;height:12px;background:var(--kv-heading);border:0;border-radius:0;margin-top:-4px}
.kv-audio__scrub::-moz-range-thumb{width:2px;height:12px;background:var(--kv-heading);border:0;border-radius:0}
.kv-audio__speed{font-family:var(--kv-sans);font-size:12px;font-weight:700;letter-spacing:.06em;padding:4px 8px;border:1px solid var(--kv-rule);border-radius:var(--kv-radius);background:transparent;color:var(--kv-text);cursor:pointer;font-variant-numeric:tabular-nums}
.kv-audio__speed:hover{border-color:var(--kv-heading)}
.kv-audio__speed:focus-visible{outline:2px solid var(--kv-clay);outline-offset:2px}
.kv-audio__transcript{font-family:var(--kv-sans);font-size:12.5px}