/* Application styles built on brand/website-tokens.css (copied to brand-tokens.css). Logo is SVG artwork, never typeset. */
@font-face { font-family: "Montserrat"; font-weight: 700; font-style: normal; font-display: swap; src: url("/fonts/montserrat-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/open-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-weight: 700; font-style: normal; font-display: swap; src: url("/fonts/open-sans-latin-700-normal.woff2") format("woff2"); }
/* TR-010 layout stability: until a brand font arrives, text shows in a system font scaled to the brand font's width, so
   lines wrap the same way before and after and nothing moves. The scale is the measured width ratio of the two fonts. */
@font-face { font-family: "Montserrat Fallback"; font-weight: 700; size-adjust: 109.8%; src: local("Arial Bold"), local("Arial-BoldMT"), local("Roboto Bold"), local("Roboto-Bold"), local("Helvetica Bold"), local("Helvetica-Bold"); }
@font-face { font-family: "Open Sans Fallback"; font-weight: 400; size-adjust: 105.6%; src: local("Segoe UI"); }
@font-face { font-family: "Open Sans Fallback"; font-weight: 700; size-adjust: 105.8%; src: local("Segoe UI Bold"); }
@font-face { font-family: "Open Sans Fallback Arial"; font-weight: 400; size-adjust: 104.6%; src: local("Arial"), local("ArialMT"), local("Roboto"), local("Roboto-Regular"), local("Helvetica"); }
@font-face { font-family: "Open Sans Fallback Arial"; font-weight: 700; size-adjust: 103.7%; src: local("Arial Bold"), local("Arial-BoldMT"), local("Roboto Bold"), local("Roboto-Bold"), local("Helvetica Bold"), local("Helvetica-Bold"); }
:root { --font-heading: "Montserrat", "Montserrat Fallback", "Arial", sans-serif; --font-body: "Open Sans", "Open Sans Fallback", "Open Sans Fallback Arial", "Segoe UI", sans-serif; }

/* System preference applies when no explicit choice is stored (data-theme absent). */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --color-canvas: #FAF7EE; --color-surface: #F0F3EA; --color-raised: #E4EBDD; --color-text: #14261F; --color-muted: #4F6254;
    --color-primary: #286345; --color-primary-text: #FAF7EE; --color-picks: #796018; --color-drop: #B52D35; --color-border: #CDD8C8; --color-control-border: #70816F;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--color-text); background: var(--color-canvas); font: 400 var(--type-body)/1.6 var(--font-body); }
h1, h2, h3 { font-family: var(--font-heading); font-weight: 700; line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: var(--type-h1); }
h2 { font-size: var(--type-h2); }
h3 { font-size: var(--type-h3); }
p { margin: 0 0 1em; max-width: 65ch; }
a { color: var(--color-primary); }
img { max-width: 100%; height: auto; }
:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; border-radius: 4px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 1rem; top: -4rem; background: var(--color-primary); color: var(--color-primary-text); padding: .5rem 1rem; border-radius: var(--radius-control); z-index: 100; }
.skip-link:focus { top: 1rem; }
.muted { color: var(--color-muted); }
.small { font-size: var(--type-small); }
.caption { font-size: var(--type-caption); }
.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1rem; }
main { padding: 2rem 0 4rem; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* Environment banner */
.env-banner { background: var(--color-raised); color: var(--color-text); font-size: var(--type-small); text-align: center; padding: .4rem 1rem; border-bottom: 1px solid var(--color-border); }

/* Header + navigation */
.site-header { border-bottom: 1px solid var(--color-border); background: var(--color-canvas); }
.header-row { display: flex; align-items: center; gap: 1rem; min-height: 72px; flex-wrap: wrap; }
.brand-link { display: inline-flex; align-items: center; padding: .5rem 0; }
.brand-link img { height: 36px; width: auto; }
img.logo-dark { display: block; }
img.logo-light { display: none; }
:root[data-theme="light"] img.logo-dark { display: none; }
:root[data-theme="light"] img.logo-light { display: block; }
@media (prefers-color-scheme: light) { :root:not([data-theme]) img.logo-dark { display: none; } :root:not([data-theme]) img.logo-light { display: block; } }
.button.nav-toggle { margin-left: auto; display: none; }
.site-nav { display: flex; align-items: center; gap: 1.25rem; margin-left: auto; flex-wrap: wrap; }
.site-nav a { color: var(--color-text); text-decoration: none; font-weight: 700; padding: .5rem 0; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--color-primary); text-decoration: underline; }
.header-search { display: flex; gap: .5rem; }
.header-search input { width: 14rem; }
@media (max-width: 860px) {
  .header-row { gap: .5rem; }
  .button.nav-toggle { display: inline-flex; }
  .site-nav { order: 1; } /* the theme toggle follows the nav in the markup but stays on the first row */
  .js .site-nav { display: none; width: 100%; flex-direction: column; align-items: stretch; gap: .25rem; padding-bottom: 1rem; }
  .js .site-nav.open { display: flex; }
  .header-search { width: 100%; }
  .header-search input { width: 100%; flex: 1 1 auto; min-width: 0; } /* shrinks so a longer busy label (FR-036) fits */
  .header-search .button { flex: none; }
}
@media (max-width: 420px) { .site-header .brand-link img { height: 30px; } } /* keeps the logo, Menu and the theme toggle on one row */

/* Controls */
.button, button.button { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 44px; background: var(--color-primary); color: var(--color-primary-text);
  border: 0; border-radius: var(--radius-control); padding: .65rem 1.15rem; font: 700 1rem/1.3 var(--font-body); text-decoration: none; cursor: pointer; }
.button.secondary { background: transparent; color: var(--color-text); border: 1px solid var(--color-control-border); }
.button.danger { background: var(--color-drop); color: var(--color-canvas); }
.button.small { min-height: 36px; padding: .35rem .8rem; font-size: var(--type-small); }
.link-button { min-height: 24px; min-width: 24px; display: inline-block; background: none; border: 0; padding: .2rem 0; color: var(--color-primary); font: inherit; text-decoration: underline; cursor: pointer; }
input, select, textarea { font: inherit; color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-control-border); border-radius: var(--radius-control); padding: .55rem .75rem; min-height: 44px; max-width: 100%; }
textarea { min-height: 6rem; width: 100%; }
/* A one-line value (a use case) that wraps so the whole text stays visible; it grows with its text where supported. */
textarea.one-line { min-height: 44px; resize: vertical; field-sizing: content; }
label { font-weight: 700; display: block; margin-bottom: .25rem; }
.field { margin-bottom: 1rem; }
.field .hint { font-size: var(--type-small); color: var(--color-muted); font-weight: 400; }
.field-error, .validation-summary { color: var(--color-drop); font-weight: 700; }
.input-validation-error { border-color: var(--color-drop); border-width: 2px; }
.checkbox { display: flex; gap: .5rem; align-items: center; font-weight: 400; }
.checkbox input { min-height: auto; width: 1.25rem; height: 1.25rem; }
.row { display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-end; }
.row > .field { flex: 1 1 12rem; }

/* Verdict pills: solid, fully rounded, labelled (selected option 01). */
.verdict { display: inline-block; border: 0; border-radius: 999px; padding: .3rem .8rem; font: 700 .875rem/1.4 var(--font-body); letter-spacing: .02em; }
.verdict-dibs { background: var(--color-primary); color: var(--color-primary-text); }
.verdict-maybe { background: var(--color-text); color: var(--color-canvas); }
.verdict-pass, .verdict-drop { background: var(--color-drop); color: var(--color-canvas); }
.verdict-review { background: var(--color-raised); color: var(--color-text); border: 1px solid var(--color-control-border); }
.status-pill { display: inline-block; border-radius: 999px; padding: .15rem .6rem; font-size: var(--type-caption); font-weight: 700; background: var(--color-raised); color: var(--color-text); border: 1px solid var(--color-border); }
.needs-update { border: 2px solid var(--color-drop); background: var(--color-surface); border-radius: var(--radius-card); padding: 1rem 1.25rem; margin: 0 0 1.5rem; }
.needs-update strong { color: var(--color-drop); }
.fixture-note { font-size: var(--type-caption); color: var(--color-muted); border: 1px dashed var(--color-control-border); border-radius: 999px; padding: .1rem .6rem; display: inline-block; }

/* Cards + grids */
.grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: 1.25rem; display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.card h3 { margin: 0; font-size: 1.25rem; }
.card h3 a { color: var(--color-text); text-decoration: none; }
.card h3 a:hover { text-decoration: underline; }
.card .media { aspect-ratio: 4 / 3; background: var(--color-raised); border-radius: .75rem; overflow: hidden; }
.card .media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card .card-action { margin-top: auto; }
.card dl { margin: 0; }
.card dt { font-size: var(--type-caption); color: var(--color-muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.card dd { margin: 0 0 .5rem; }
/* Verdict legend (homepage + /how-we-decide): pill | meaning over muted next step; stacks on phones and at 200% zoom */
.verdict-legend { display: grid; gap: .75rem; margin: 1rem 0; padding: 0; }
.verdict-legend-row { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); column-gap: 1rem; row-gap: .15rem; align-items: start; padding: .9rem 1rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); }
.verdict-legend dt { grid-row: 1 / span 2; margin: 0; }
.verdict-legend dd { margin: 0; grid-column: 2; overflow-wrap: anywhere; }
.verdict-legend-action { font-size: var(--type-small); color: var(--color-muted); }
@media (max-width: 40em) {
    .verdict-legend-row { grid-template-columns: minmax(0, 1fr); row-gap: .35rem; }
    .verdict-legend dt { grid-row: auto; }
    .verdict-legend dd { grid-column: 1; }
}
.verdict-row { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }

.hero { padding: 2.5rem 0 2rem; }
.hero h1 { font-size: var(--type-hero); max-width: 18ch; }
.hero .tagline { font-family: var(--font-heading); font-weight: 700; color: var(--color-primary); font-size: 1.25rem; margin-bottom: .25rem; }
.section { margin-top: 3rem; }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.pill-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.pill-list a { display: inline-block; padding: .45rem .9rem; border: 1px solid var(--color-control-border); border-radius: 999px; color: var(--color-text); text-decoration: none; }
.pill-list a:hover { border-color: var(--color-primary); }
.empty-state { background: var(--color-surface); border: 1px dashed var(--color-control-border); border-radius: var(--radius-card); padding: 2rem; text-align: center; }
.empty-state p { margin-inline: auto; }
.notice { background: var(--color-surface); border-left: 4px solid var(--color-primary); padding: .75rem 1rem; border-radius: .5rem; margin: 0 0 1rem; }
.notice.warn { border-left-color: var(--color-drop); }
/* FR-036: an action's result moved next to the form that sent it. */
.action-result { margin: .75rem 0; }
.action-result > :last-child { margin-bottom: 0; }

/* Discover layout */
.discover { display: grid; grid-template-columns: 260px 1fr; gap: 2rem; }
@media (max-width: 860px) { .discover { grid-template-columns: 1fr; } }
.filters fieldset { border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: 1rem; margin: 0 0 1rem; }
.filters legend { font-weight: 700; padding: 0 .25rem; }
.pagination { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 2rem; align-items: center; }

/* Review detail */
.review-head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 2rem; align-items: start; }
@media (max-width: 860px) { .review-head { grid-template-columns: 1fr; } }
.review-media { background: var(--color-raised); border-radius: var(--radius-card); overflow: hidden; }
.review-media > img { display: block; width: 100%; height: auto; }
.review-media.has-spec-card { background: none; }
/* FR-037 generated spec card (HTML/CSS from saved specifications, never an image of the product). */
.spec-card { padding: 1.5rem; display: grid; gap: 1rem; align-content: start; min-height: 100%; color: var(--color-text);
  background: radial-gradient(circle at 85% 15%, color-mix(in srgb, var(--color-picks) 22%, transparent) 0 18%, transparent 19%), linear-gradient(160deg, var(--color-raised), var(--color-surface)); }
.review-media > img + .spec-card { border-top: 1px solid var(--color-border); min-height: 0; }
.spec-card .eyebrow { font: 700 var(--type-caption)/1.4 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--color-muted); margin: 0; }
.spec-card .spec-card-heading { font-family: var(--font-heading); font-weight: 700; font-size: 1.5rem; line-height: 1.2; margin: 0; overflow-wrap: anywhere; }
.spec-card .chips { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 0; }
.spec-card .chips li { border: 1px solid var(--color-border); background: var(--color-canvas); border-radius: 999px; padding: .35rem .8rem; font-size: var(--type-small); overflow-wrap: anywhere; }
.spec-card .chips strong { color: var(--color-primary); }
.spec-card .src { font-size: var(--type-caption); color: var(--color-muted); margin: 0; }
/* FR-038 click-to-load video facade. */
.video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-card); overflow: hidden; background: #000; max-width: 760px; }
.video .video-facade { position: absolute; inset: 0; display: grid; place-items: center; text-decoration: none; }
.video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.video .play { position: relative; display: inline-flex; align-items: center; gap: .6rem; min-height: 44px; background: var(--color-primary); color: var(--color-primary-text); padding: .75rem 1.25rem; border-radius: 999px; font-weight: 700; box-shadow: 0 6px 24px rgba(0, 0, 0, .4); }
.video .video-facade:focus-visible { outline: none; }
.video .video-facade:focus-visible .play { outline: 3px solid var(--color-primary-text); outline-offset: 4px; box-shadow: 0 0 0 7px var(--color-primary); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-note { max-width: 760px; }
.verdict-box { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: 1.25rem; }
.basis { font-size: var(--type-small); color: var(--color-muted); }
.disclosure { font-size: var(--type-small); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: .75rem; padding: .75rem 1rem; }
.offer-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
.offer-list li { display: flex; justify-content: space-between; gap: 1rem; align-items: center; flex-wrap: wrap; border: 1px solid var(--color-border); border-radius: .75rem; padding: .75rem 1rem; background: var(--color-surface); }

/* Tables (scroll inside their container) */
.table-wrap { position: relative; overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-card); } /* contains visually-hidden text */
table { border-collapse: collapse; width: 100%; min-width: 540px; }
th, td { text-align: left; vertical-align: top; padding: .65rem .8rem; border-bottom: 1px solid var(--color-border); }
th { font-size: var(--type-small); background: var(--color-surface); }
caption { text-align: left; padding: .75rem .8rem; font-weight: 700; }
tbody th[scope="row"] { position: sticky; left: 0; background: var(--color-surface); z-index: 1; }

/* Footer */
.site-footer { border-top: 1px solid var(--color-border); padding: 2rem 0; font-size: var(--type-small); color: var(--color-muted); }
.site-footer nav { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.site-footer a { color: var(--color-text); }

/* Theme toggle (FR-001): shows the moon while the page is light and the sun while it is dark. */
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; padding: 0; background: transparent;
  color: var(--color-picks); border: 1px solid var(--color-control-border); border-radius: 999px; cursor: pointer; }
.theme-toggle[hidden] { display: none; }
.theme-toggle:hover { background: var(--color-raised); }
.theme-toggle:focus-visible { border-radius: 999px; }
.theme-toggle svg { display: block; width: 22px; height: 22px; }
.theme-toggle .icon-moon { display: none; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: block; }
:root[data-theme="light"] .theme-toggle .icon-sun { display: none; }
@media (prefers-color-scheme: light) { :root:not([data-theme]) .theme-toggle .icon-moon { display: block; } :root:not([data-theme]) .theme-toggle .icon-sun { display: none; } }
@media (forced-colors: active) { .theme-toggle { color: ButtonText; } }

/* Admin */
.admin-shell { display: grid; grid-template-columns: 230px 1fr; min-height: 100vh; }
@media (max-width: 900px) { .admin-shell { grid-template-columns: 1fr; } }
.admin-nav { background: var(--color-surface); border-right: 1px solid var(--color-border); padding: 1rem; }
.admin-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }
.admin-nav a { display: block; padding: .45rem .6rem; border-radius: .5rem; color: var(--color-text); text-decoration: none; }
.admin-nav a:hover, .admin-nav a[aria-current="page"] { background: var(--color-raised); }
.admin-nav .nav-group { margin: .9rem 0 .2rem; padding: 0 .6rem; font-size: var(--type-caption); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-muted); }
.admin-nav .nav-group .help { text-transform: none; letter-spacing: normal; }
.admin-nav .nav-end { margin-top: .9rem; padding-top: .6rem; border-top: 1px solid var(--color-border); }
.admin-main { padding: 1.5rem; min-width: 0; }
.stat-row { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); margin-bottom: 1.5rem; }
.stat { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: 1rem; }
.stat .n { font-family: var(--font-heading); font-size: 1.75rem; font-weight: 700; display: block; }
.toolbar { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }
.inline-form { display: inline; }
.research-list { display: flex; flex-direction: column; gap: .25rem; }
.research-links { display: inline-flex; flex-wrap: wrap; gap: .25rem .75rem; }
.research-products { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1rem; }
.kv dt { color: var(--color-muted); }
.kv dd { margin: 0; }
pre.json { white-space: pre-wrap; word-break: break-word; background: var(--color-surface); border: 1px solid var(--color-border); padding: .75rem; border-radius: .5rem; font-size: var(--type-small); max-height: 24rem; overflow: auto; }
.crop-previews { display: flex; gap: .75rem; flex-wrap: wrap; }
.crop-previews figure { margin: 0; }
.crop-previews .frame { background: var(--color-raised); overflow: hidden; border-radius: .5rem; width: 140px; }
.crop-previews img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ai-label { display: inline-block; font-size: var(--type-caption); font-weight: 700; border: 1px solid var(--color-control-border); border-radius: 999px; padding: .1rem .5rem; }
details > summary { cursor: pointer; font-weight: 700; }

/* Utilities (CSP forbids inline style attributes) */
.mt-1 { margin-top: 1rem; }
.mb-1 { margin-bottom: 1rem; }
.w-100 { width: 100%; }
.mono { font-family: ui-monospace, Consolas, monospace; }
.ar-43 { aspect-ratio: 4 / 3; }
.ar-11 { aspect-ratio: 1 / 1; }
.ar-169 { aspect-ratio: 16 / 9; }
.h3 { font-size: var(--type-h3); }
/* M6 staff pages show raw JSON evidence; keep it inside the viewport on small screens. */
pre { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 100%; }
code { overflow-wrap: anywhere; }
.card .field, .card select, .card input, .card textarea { max-width: 100%; min-width: 0; }

/* FR-042: retailer link in the verdict box and a bar that follows the reader (DIBS and MAYBE only). */
.verdict-cta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--color-border); }
.verdict-cta .cta-link { font-size: var(--type-small); }
.verdict-cta .cta-disclosure { flex-basis: 100%; margin: 0; font-size: var(--type-small); color: var(--color-muted); }
.buy-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; background: var(--color-raised); border-top: 1px solid var(--color-border);
  box-shadow: 0 -4px 14px rgb(0 0 0 / .2); padding: .6rem max(1rem, env(safe-area-inset-right)) max(.6rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)); }
.buy-bar[hidden] { display: none; }
.buy-bar-inner { max-width: 72rem; margin: 0 auto; display: flex; align-items: center; gap: .75rem; }
.buy-bar-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.buy-bar-title { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.buy-bar-note { font-size: var(--type-small); color: var(--color-muted); }
.buy-bar .button { flex-shrink: 0; }
/* Fixed space at the page end for the bar plus back to top, so showing or hiding the bar never changes the page height. */
html.has-buy-bar-space body { padding-bottom: 10rem; }
.has-buy-bar .back-to-top { bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
@media (max-width: 40em) {
  .buy-bar-inner { flex-wrap: wrap; gap: .4rem .6rem; }
  .buy-bar .verdict { flex-shrink: 0; }
  .buy-bar .button { flex-basis: 100%; }
  html.has-buy-bar-space body { padding-bottom: 12.5rem; }
  .has-buy-bar .back-to-top { bottom: calc(8rem + env(safe-area-inset-bottom)); }
}
@media print { .buy-bar { display: none !important; } }
@media (forced-colors: active) { .buy-bar { border-top: 2px solid CanvasText; } }