/* Lenses.fyi site styles, "Blueprint × Lens barrel".
   Colours, type, spacing and motion come from design/tokens.css; shared components (buttons,
   filter buttons, panels, chips, inputs, the focal scale, lens drawings, cards, tables, messages,
   compare) from design/components.css. This file lays out the site and styles its own parts. */

[hidden] { display: none !important; }
html { scroll-padding-top: 72px; }
body { margin: 0; min-height: 100vh; }
a { color: var(--link); }
button, input, select { font: inherit; color: inherit; }
h1, h2, h3 { text-wrap: balance; }
.ic { width: 18px; height: 18px; }
.unknown { color: var(--ink-3); }
.none { color: var(--ink-2); }
.yes { color: var(--good); font-weight: 700; }
.no { color: var(--ink-2); }
.hint, .note { margin: 0; font-size: var(--t-sm); color: var(--ink-2); }
mark { background: color-mix(in srgb, var(--dof) 35%, transparent); color: inherit; border-radius: 2px; padding: 0 1px; }

/* ---------- top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: var(--s-6);
  height: 56px; padding: 0 max(var(--s-8), calc((100vw - 1880px) / 2)); background: var(--bar); color: var(--on-bar);
}
.brand { display: inline-flex; align-items: center; gap: var(--s-2); color: inherit; text-decoration: none; font: 900 var(--t-md)/1 var(--font-text); letter-spacing: .08em; }
.brand svg { width: 24px; height: 24px; fill: none; stroke: var(--coral); stroke-width: 1.8; stroke-linecap: round; }
.tabs { display: flex; gap: var(--s-1); min-width: 0; overflow-x: auto; scrollbar-width: none; }
.tabs [data-view] { flex: none; }
.tabs [data-view] { height: 34px; padding: 0 var(--s-3); border: 0; border-radius: var(--r); background: none; color: inherit; opacity: .78; cursor: pointer; font-weight: 700; transition: opacity var(--dur-fast), background var(--dur-fast); }
.tabs [data-view]:hover { opacity: 1; }
.tabs a[data-view] { display: inline-flex; align-items: center; text-decoration: none; }
.tabs [aria-current="page"] { opacity: 1; background: color-mix(in srgb, var(--on-bar) 14%, transparent); box-shadow: inset 0 -2px 0 var(--coral); }
.catalog-intro { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-bottom: 12px; }
.catalog-intro h1 { margin: 0; font-size: 21px; line-height: 1.3; }
.catalog-intro p { margin: 0; font-size: 12px; color: var(--ink-2); }
.crawl-snapshot { max-width: 1060px; margin: 0 auto; padding: 24px; }
.crawl-snapshot dl { display: grid; grid-template-columns: minmax(120px,1fr) 2fr; gap: 6px 16px; }
.crawl-snapshot dd { margin: 0; }
.crawl-snapshot h2 { margin-top: 24px; }
.crawl-snapshot > article { max-width: 85ch; }
.catalog-index { display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: 12px; padding: 0; list-style: none; }
.catalog-index li { padding: 12px; border: var(--line); background: var(--sheet); }
.index-pages { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0; }
.index-pages a, .index-pages strong { padding: 4px 8px; border: var(--line); }
.tabs [data-view][aria-selected="true"] { opacity: 1; background: color-mix(in srgb, var(--on-bar) 14%, transparent); box-shadow: inset 0 -2px 0 var(--coral); }
.support-link { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 var(--s-3); border-radius: var(--r); background: var(--coral); color: #1b1e23; font-size: var(--t-sm); font-weight: 700; text-decoration: none; white-space: nowrap; transition: filter var(--dur-fast); }
.support-link:hover { filter: brightness(1.08); }
.support-link .ic { width: 16px; height: 16px; }
.support { position: relative; margin-left: auto; }
.support .support-link { margin-left: 0; }
.support + .theme-switch { margin-left: 0; }
/* hover card: what the button is for and where it goes */
.support-card { position: absolute; top: calc(100% + 10px); right: 0; z-index: 40; width: 300px; padding: var(--s-4); border: var(--line); border-radius: var(--r); background: var(--sheet); color: var(--ink); box-shadow: var(--float); font-size: var(--t-sm); line-height: 1.5;
  opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity var(--dur-fast), transform var(--dur-fast) var(--ease), visibility 0s linear var(--dur-fast); }
.support-card::before { content: ""; position: absolute; top: -6px; right: 28px; width: 10px; height: 10px; border-left: var(--line); border-top: var(--line); background: var(--sheet); transform: rotate(45deg); }
.support-card::after { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; } /* keeps the hover while the pointer moves down */
.support:hover .support-card, .support:focus-within .support-card { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.support-card p { margin: 0 0 var(--s-2); color: var(--ink-2); }
.support-card .support-title { margin-bottom: var(--s-1); font: 700 var(--t-md)/1.3 var(--font-text); color: var(--ink); }
.support-card .support-dest { display: flex; align-items: center; gap: var(--s-2); margin: var(--s-3) 0 0; padding-top: var(--s-3); border-top: var(--line); font-size: var(--t-xs); color: var(--ink-3); }
.support-card .support-dest b { font-family: var(--font-mono); font-weight: 500; color: var(--ink); }
.support-card .support-dest .ic { width: 14px; height: 14px; }
.theme-switch { margin-left: auto; display: flex; padding: 2px; border: 1px solid color-mix(in srgb, var(--on-bar) 28%, transparent); border-radius: var(--r); }
.theme-switch button { display: grid; place-items: center; width: 30px; height: 26px; padding: 0; border: 0; border-radius: var(--r-mark); background: none; color: inherit; opacity: .7; cursor: pointer; }
.theme-switch button > span { display: grid; place-items: center; line-height: 0; }
.theme-switch .ic { width: 16px; height: 16px; }
.theme-switch button[aria-pressed="true"] { opacity: 1; background: color-mix(in srgb, var(--on-bar) 18%, transparent); }
.admin-link { font-size: var(--t-sm); font-weight: 700; color: var(--on-bar); text-decoration: none; padding: 4px 10px; border: 1px solid color-mix(in srgb, var(--on-bar) 35%, transparent); border-radius: var(--r); }
.bug-report { border: 1px solid color-mix(in srgb,var(--on-bar) 35%,transparent); background: transparent; color: var(--on-bar); border-radius: var(--r); width: 36px; height: 36px; flex-shrink: 0; display: inline-grid; place-items: center; cursor: pointer; }
.bug-report span { width: 20px; height: 20px; background: currentColor; mask: url('/assets/bug.svg') center / contain no-repeat; }
.bug-report:hover { background: color-mix(in srgb,var(--on-bar) 12%,transparent); }
.bug-report:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.bug-report + .theme-switch { margin-left: 0; }
.visitor-report { width: min(520px,calc(100vw - 32px)); max-height: 90vh; overflow: auto; padding: 20px; border: var(--line-strong); border-radius: var(--r); background: var(--sheet); color: var(--ink); }
.visitor-report::backdrop { background: #0008; }
.visitor-report form { display: grid; gap: 12px; }
.visitor-report label { display: grid; gap: 5px; font-size: 13px; font-weight: 600; }
.visitor-report textarea { resize: vertical; min-height: 110px; }
.report-heading, .report-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.report-heading h2 { margin: 0; font-size: 21px; }
.report-actions { justify-content: flex-end; }
.report-honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
#report-message { margin: 0; font-size: 13px; }
#report-context { overflow-wrap: anywhere; }

main { max-width: 1880px; margin: 0 auto; padding: var(--s-6) var(--s-8) var(--s-12); }
footer { max-width: 1880px; margin: 0 auto; padding: var(--s-6) var(--s-8) 110px; display: flex; flex-wrap: wrap; gap: var(--s-4); border-top: var(--line); font-size: var(--t-sm); color: var(--ink-3); }
footer a { color: var(--ink-2); }
.brand-foot { font-weight: 900; letter-spacing: .08em; color: var(--ink-2); }

/* icons inside buttons sit in the exact middle */
button > span[data-icon], .btn > span[data-icon] { display: grid; place-items: center; line-height: 0; }
.input-wrap > span[data-icon] { position: absolute; left: var(--s-3); display: grid; color: var(--ink-3); pointer-events: none; }

/* ---------- camera box ---------- */
.camera-box { margin-bottom: var(--s-5); }
.cam-pick {
  display: grid; grid-template-columns: minmax(0, 1.7fr) auto minmax(0, 1fr); gap: var(--s-6); align-items: center;
  padding: var(--s-6); border: var(--line); border-radius: var(--r);
  background-color: var(--sheet);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
}
.hero-main { display: grid; gap: var(--s-3); min-width: 0; }
.cam-head { display: flex; align-items: center; gap: var(--s-3); }
.cam-head h2 { margin: 0; font: 900 var(--t-xl)/1.15 var(--font-text); letter-spacing: -.01em; }
.cam-head p { margin: 2px 0 0; color: var(--ink-2); }
.cam-ico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r); background: var(--accent); color: var(--on-accent); }
.cam-ico .ic { width: 22px; height: 22px; }
.guide-ico { background: var(--coral); color: #fff; }
.quick-cams { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); font-size: var(--t-sm); color: var(--ink-3); }
.qcam { height: 28px; padding: 0 var(--s-3); border: var(--line-strong); border-radius: var(--r); background: var(--sheet); color: var(--ink); font-size: var(--t-sm); cursor: pointer; transition: border-color var(--dur-fast), color var(--dur-fast); }
.qcam:hover { border-color: var(--accent); color: var(--link); }
#cam-cancel { justify-self: start; }
.hero-or { align-self: stretch; display: grid; place-items: center; position: relative; }
.hero-or::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 50%; border-left: 1px dashed var(--rule-strong); }
.hero-or span { position: relative; padding: var(--s-1) 0; background: var(--sheet); font: 500 var(--t-xs) var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.hero-guide { display: grid; gap: var(--s-2); justify-items: start; }
.hero-guide h3 { margin: 0; font: 700 var(--t-md)/1.25 var(--font-text); }
.hero-guide p { margin: 0; color: var(--ink-2); font-size: var(--t-sm); }
.hero-guide .guide-btn { margin-top: var(--s-1); }
.combo-list { z-index: 25; }

.cam-set { padding: var(--s-4) var(--s-5); border: var(--line); border-radius: var(--r); background: var(--sheet); }
.cam-chip { display: flex; align-items: center; gap: var(--s-4); }
.cam-chip > .ic { width: 28px; height: 28px; color: var(--link); }
.cam-chip .who { flex: 1; min-width: 0; display: grid; gap: 1px; }
.cam-chip .who small { font-size: var(--t-xs); font-weight: 700; letter-spacing: var(--caps); text-transform: uppercase; color: var(--ink-3); }
.cam-chip .who b { font: 900 var(--t-lg)/1.2 var(--font-text); }
.cam-chip .who span { font: var(--t-sm) var(--font-mono); color: var(--ink-2); }
.cam-chip .acts { display: flex; gap: var(--s-2); }
.cam-chip .guide-link { border-color: transparent; background: var(--coral-soft); color: var(--coral-ink); }
.cam-chip .guide-link .ic { width: 16px; height: 16px; }
.cam-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s-3) var(--s-6); margin-top: var(--s-4); padding-top: var(--s-4); border-top: var(--line); }
/* on/off switch used in the camera box */
.toggle { position: relative; display: flex; align-items: flex-start; gap: var(--s-3); cursor: pointer; }
.toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.toggle .sw { flex: none; position: relative; width: 36px; height: 20px; margin-top: 1px; border-radius: var(--r-round); background: var(--rule-strong); transition: background var(--dur); }
.toggle .sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--sheet); box-shadow: 0 1px 2px rgb(0 0 0 / 25%); transition: transform var(--dur) var(--ease); }
.toggle input:checked + .sw { background: var(--accent); }
.toggle input:checked + .sw::after { transform: translateX(16px); }
.toggle input:focus-visible + .sw { box-shadow: var(--focus); }
.toggle b { display: block; }
.toggle b .n { font: 500 var(--t-sm) var(--font-mono); color: var(--link); margin-left: var(--s-1); }
.toggle small { display: block; margin-top: 2px; font-size: var(--t-sm); color: var(--ink-2); }

/* ---------- news strip ---------- */
.news-strip { display: flex; align-items: stretch; gap: var(--s-4); margin-bottom: var(--s-5); padding: var(--s-3) var(--s-4); border: var(--line); border-left: 3px solid var(--coral); border-radius: var(--r); background: var(--sheet); }
.news-strip .label { display: flex; align-items: center; gap: var(--s-2); white-space: nowrap; font-size: var(--t-xs); font-weight: 700; letter-spacing: var(--caps); text-transform: uppercase; color: var(--coral-ink); }
.news-strip .items { flex: 1; display: flex; gap: var(--s-5); overflow-x: auto; }
.news-strip .item { min-width: 220px; max-width: 360px; color: var(--ink); text-decoration: none; }
.news-strip .item b { display: block; font-size: var(--t-sm); line-height: 1.35; }
.news-strip .item:hover b { color: var(--link); }
.news-strip .item small { font: var(--t-xs) var(--font-mono); color: var(--ink-3); }
.news-strip .close { align-self: flex-start; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: var(--r-mark); background: none; color: var(--ink-3); cursor: pointer; }
.news-strip .close:hover { background: var(--sheet-sunk); color: var(--ink); }
.news-strip .close .ic { width: 15px; height: 15px; }

/* ---------- search, filter bar, active filters ---------- */
.lenses-view > .searchbar { margin-bottom: var(--s-3); }
.search-hint { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; margin: 0 0 var(--s-3); padding: var(--s-3) var(--s-4); border: var(--line); border-left: 3px solid var(--accent); border-radius: var(--r); background: var(--accent-soft); }
.search-hint > .ic { color: var(--link); }
.search-hint span { flex: 1; min-width: 200px; }


/* the filter side panel (lenses) */
.side-sec { display: grid; gap: var(--s-3); }
.side-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); min-height: 30px; }
.side-head h3 { display: flex; align-items: center; gap: var(--s-2); margin: 0; font: 700 var(--t-base)/1.2 var(--font-text); }
.side-head h3 .ic { width: 17px; height: 17px; color: var(--ink-3); }
.side-sec.is-set .side-head h3 .ic { color: var(--link); }
.side-body { display: grid; gap: var(--s-3); }
.side-more-label { margin: 0; padding: var(--s-4) var(--s-4) var(--s-1); border-top: var(--line); font-size: var(--t-xs); font-weight: 700; letter-spacing: var(--caps); text-transform: uppercase; color: var(--ink-3); }
.filters .scale { --thumb: 16px; }
.filters .scale-num { font-size: 13px; }
.filters #more-filters .fsec > summary { display: flex; align-items: center; list-style: none; cursor: pointer; }
.filters #more-filters .fsec > summary::-webkit-details-marker { display: none; }
.filters #more-filters .fsec > summary .fsec-title { margin: 0; }
.filters #more-filters .fsec > summary::after { content: ""; width: 7px; height: 7px; margin: -3px 2px 0 var(--s-3); border-right: 1.5px solid var(--ink-3); border-bottom: 1.5px solid var(--ink-3); transform: rotate(45deg); transition: transform var(--dur-fast); }
.filters #more-filters .fsec[open] > summary::after { transform: rotate(225deg); margin-top: 3px; }
.filters #more-filters .fsec[open] > summary { margin-bottom: var(--s-3); }
.side-more-label .count { margin-left: var(--s-2); color: var(--link); letter-spacing: 0; text-transform: none; font-weight: 500; }
.show-filters .count { min-width: 18px; padding: 0 5px; border-radius: var(--r-mark); background: var(--accent); color: var(--on-accent); font: 500 var(--t-xs)/18px var(--font-mono); text-align: center; }
.fsec-sub { margin: 0; font-size: var(--t-sm); color: var(--ink-2); line-height: 1.45; }

/* choice chips inside panels and the drawer */
.chipset { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.fchip {
  display: inline-flex; align-items: center; gap: var(--s-1); min-height: 32px; padding: 0 var(--s-3);
  border: var(--line-strong); border-radius: var(--r); background: var(--sheet); color: var(--ink-2); font-size: var(--t-sm); cursor: pointer;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.fchip .ic { width: 16px; height: 16px; }
.fchip small { font: var(--t-xs) var(--font-mono); color: var(--ink-3); }
.fchip:hover { border-color: var(--accent); color: var(--link); }
.fchip[aria-pressed="true"] { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.fchip[aria-pressed="true"] small, .fchip[aria-pressed="true"] .ic { color: inherit; }
.fchip:disabled { opacity: .45; cursor: default; }
.chipset.tiles { display: grid; grid-template-columns: repeat(3, 1fr); }
.chipset.tiles .fchip { flex-direction: column; justify-content: center; gap: 2px; padding: var(--s-2) var(--s-1); text-align: center; }
.chipset.tiles .fchip .ic { width: 22px; height: 22px; }
.chipset.segmented { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; border: var(--line-strong); border-radius: var(--r); overflow: hidden; }
.chipset.segmented .fchip { justify-content: center; border: 0; border-left: var(--line); border-radius: 0; }
.chipset.segmented .fchip:first-child { border-left: 0; }
.chipset.segmented .fchip[aria-pressed="true"] { background: var(--accent-soft); color: var(--link); font-weight: 700; }
.coverage { display: grid; gap: var(--s-2); }
.coverage.idle .chipset { opacity: .7; }
.focal-controls { display: grid; gap: 8px; min-width: 0; }
.focal-controls .chipset.tiles { gap: 6px; }
.focal-controls .chipset.tiles .fchip { min-height: 46px; padding: 4px 2px; font-size: 12px; }
.focal-controls .chipset.tiles .fchip small { font-size: 10px; }
.focal-controls .scale { padding-bottom: 24px; }
.focal-exact > span { display: none; }
.focal-controls .focal-exact input { height: 34px; padding: 4px 8px; }
.focal-controls .coverage .fchip { white-space: nowrap; padding: 0 5px; font-size: 12px; }
.focal-controls .coverage .ic { width: 14px; height: 14px; }
.zoom-ap { display: grid; gap: var(--s-2); margin-top: var(--s-2); }
.range-ends { display: flex; justify-content: space-between; margin-top: -4px; font: var(--t-xs) var(--font-mono); color: var(--ink-3); }

/* the prime dot slider and the weight slider: value bubble, lens-count chart, track */
.range { position: relative; height: 84px; margin: 0 4px; }
.range .hist { position: absolute; left: 0; right: 0; top: 26px; height: 30px; display: flex; align-items: flex-end; gap: 1px; }
.range .hist i { flex: 1; height: 0; border-radius: 1px 1px 0 0; background: color-mix(in srgb, var(--ink-3) 30%, transparent); transition: height var(--dur-slow) var(--ease), background var(--dur); }
.range .hist i.in { background: color-mix(in srgb, var(--accent) 60%, transparent); }
.range .track { position: absolute; left: 0; right: 0; top: 60px; height: 4px; border-radius: var(--r-mark); background: var(--sheet-sunk); box-shadow: inset 0 0 0 1px var(--rule); }
.range .fill { position: absolute; top: 60px; height: 4px; border-radius: var(--r-mark); background: color-mix(in srgb, var(--accent) 30%, transparent); }
.range.set .fill { background: var(--accent); }
.range input[type="range"] { position: absolute; left: 0; top: 48px; width: 100%; height: 28px; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
.range.single input[type="range"] { pointer-events: auto; cursor: pointer; }
.range input[type="range"]::-webkit-slider-runnable-track { background: none; }
.range input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid var(--accent); background: var(--sheet); cursor: grab; pointer-events: auto; box-shadow: var(--lift); }
.range input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; border: 2.5px solid var(--accent); background: var(--sheet); cursor: grab; pointer-events: auto; }
.range input[type="range"]::-moz-range-track { background: none; }
.range input[type="range"]:focus-visible { box-shadow: none; }
.range input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: var(--focus); }
.range.single.idle input[type="range"]::-webkit-slider-thumb { border-style: dashed; opacity: .7; }
.range .bubble { position: absolute; top: 0; padding: 2px var(--s-2); border-radius: var(--r-mark); background: var(--sheet); border: 1px solid var(--draw); color: var(--ink); font: 500 var(--t-sm) var(--font-mono); white-space: nowrap; pointer-events: none; }
.range.dragging .bubble, .range.focused .bubble { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* drawer sections (More filters) */
.drawer .fsec { border-bottom: var(--line); }
.drawer .fsec > summary { display: flex; align-items: center; list-style: none; padding: var(--s-4) 0; cursor: pointer; }
.drawer .fsec > summary::-webkit-details-marker { display: none; }
.drawer .fsec[open] > summary { padding-bottom: var(--s-3); }
.fsec-title { flex: 1; display: flex; align-items: center; gap: var(--s-2); margin: 0; font-weight: 700; }
.fsec-title .ic { color: var(--ink-3); }
.fsec-title .val { margin-left: auto; }
.drawer .fsec > summary::after { content: ""; width: 7px; height: 7px; margin: -3px 2px 0 var(--s-3); border-right: 1.5px solid var(--ink-3); border-bottom: 1.5px solid var(--ink-3); transform: rotate(45deg); transition: transform var(--dur-fast); }
.drawer .fsec[open] > summary::after { transform: rotate(225deg); margin-top: 3px; }
.drawer .fsec > :not(summary) { margin-bottom: var(--s-3); }
.drawer .fsec[open] { padding-bottom: var(--s-2); }
.badge-count { min-width: 18px; padding: 0 5px; border-radius: var(--r-mark); background: var(--accent); color: var(--on-accent); font: 500 var(--t-xs)/18px var(--font-mono); text-align: center; }
.facet { display: grid; gap: 2px; max-height: 260px; overflow-y: auto; margin-top: var(--s-2); }
.facet-wrap.short > input[type=search] { display: none; }
.facet-wrap.short .facet { margin-top: 0; max-height: none; }
.facet-more { justify-self: start; margin-top: var(--s-1); padding: 0; border: 0; background: none; color: var(--link); font: 700 var(--t-sm) var(--font-text); cursor: pointer; }
.cam-note { padding: var(--s-2) var(--s-3); border-radius: var(--r); background: var(--sheet-sunk); }
.facet label { display: flex; align-items: center; gap: var(--s-2); padding: 4px 2px; border-radius: var(--r-mark); cursor: pointer; }
.facet label:hover { background: var(--sheet-sunk); }
.facet label input { accent-color: var(--accent); width: 16px; height: 16px; }
.facet label .n { margin-left: auto; font: var(--t-sm) var(--font-mono); color: var(--ink-3); }
.facet label.zero { color: var(--ink-3); }
.fsec input[type="search"], .fsec input[type="number"] { width: 100%; height: 36px; padding: 0 var(--s-3); border: var(--line-strong); border-radius: var(--r); background: var(--sheet); }
.fsec input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.field-row { display: grid; gap: var(--s-1); margin-top: var(--s-2); }
.field-row > span { font-size: var(--t-sm); color: var(--ink-2); }
.pair { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s-2); }
.pair input { font-family: var(--font-mono); }
.pair span { color: var(--ink-3); }
.opts { display: grid; gap: var(--s-2); margin-top: var(--s-3); }

/* active filters (chips) */
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-bottom: var(--s-4); }
/* the active-filter summary: one compact line above the results */
#active-chips:not(:empty) { padding: var(--s-2) var(--s-3); border: var(--line); border-radius: var(--r); background: var(--sheet); }
.as-label { margin-right: var(--s-1); font-size: var(--t-xs); font-weight: 700; letter-spacing: var(--caps); text-transform: uppercase; color: var(--ink-3); }
#active-chips .chip { height: 28px; }
#active-chips .chip > .ic { color: var(--ink-3); }
#active-chips .chip.cam > .ic { color: inherit; }
.chips:empty { display: none; }
.chip.q { font-style: italic; }
.chip.new { animation: lf-chip-in var(--dur) var(--ease); }
.clear-all { display: inline-flex; align-items: center; gap: 5px; height: 28px; margin-left: auto; padding: 0 var(--s-3); border: 0; border-radius: var(--r); background: none; color: var(--link); font-weight: 700; font-size: var(--t-sm); cursor: pointer; }
.clear-all .ic { width: 15px; height: 15px; }
.clear-all:hover { background: var(--accent-soft); }
@keyframes lf-chip-in { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }

/* ---------- results bar ---------- */
.results-bar { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-4); padding-bottom: var(--s-3); border-bottom: var(--line); }
#lens-count, #cam-count { margin: 0; color: var(--ink-2); }
.count-n { font: 600 28px/1 var(--font-num); color: var(--ink); margin-right: 2px; font-variant-numeric: tabular-nums; }
.count-x .link { border: 0; background: none; color: var(--link); cursor: pointer; padding: 0 var(--s-1); font-size: var(--t-sm); }
.layout-toggle { margin-left: auto; grid-auto-columns: 38px; }
.layout-toggle button { min-height: 34px; }
.layout-toggle .ic { width: 17px; height: 17px; }
.sort { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-sm); color: var(--ink-2); }
.sort select { width: auto; min-width: 170px; height: 36px; }
#sort-dir .ic { width: 17px; height: 17px; }
.show-filters { display: none; }

/* ---------- lens cards ---------- */
.lens-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: var(--s-4); }
.lcard:focus-visible { box-shadow: var(--focus); }
/* selected for comparison: a heavy ring, a coral band across the top and a filled button */
.lcard.selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.lcard.selected::before { content: ""; position: absolute; inset: 0 0 auto; z-index: 1; height: 4px; background: var(--coral); border-radius: var(--r) var(--r) 0 0; }
.lcard.selected .lcard-art { background-color: color-mix(in srgb, var(--coral) 7%, var(--sheet)); }
.lcard.new { animation: lf-card-in var(--dur-slow) var(--ease) both; animation-delay: calc(var(--i) * 18ms); }
.lcard-art { min-height: 128px; }
.lcard-trust { display: inline-flex; align-items: center; gap: 3px; margin-left: auto; }
.lcard-trust > .ic { width: 13px; height: 13px; stroke-width: 2.4; color: var(--good); }
.lcard-tags { align-items: center; }
.lcard-tags .feat { font-size: var(--t-xs); font-weight: 700; color: var(--ink-2); }
.lcard-tags .feat + .feat::before { content: "·"; margin: 0 5px 0 -1px; color: var(--ink-3); font-weight: 400; }
.lcard-key { flex-wrap: wrap; row-gap: 2px; }
.lcard-key .numeral { font-size: 28px; white-space: nowrap; }
.lcard .eq { font: var(--t-xs) var(--font-mono); color: var(--ink-3); margin-top: -4px; }
.lcard-tags .mounts { margin-left: auto; display: inline-flex; align-items: center; gap: 3px; font: var(--t-xs) var(--font-mono); color: var(--ink-3); }
.lcard-tags .mounts .ic { width: 13px; height: 13px; }
.lcard-cmp { z-index: 1; background: color-mix(in srgb, var(--sheet) 90%, transparent); }
.lcard-cmp input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.lcard-cmp .ic { width: 15px; height: 15px; }
.lcard-cmp:has(input:focus-visible) { box-shadow: var(--focus); }
.lcard.selected .lcard-cmp { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
@keyframes lf-card-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* confidence meter, verified and fit badges */
.conf { display: inline-flex; gap: 2px; align-items: center; cursor: help; }
.conf i { display: block; width: 6px; height: 6px; border-radius: 1px; background: var(--rule); }
.conf i.on { background: var(--accent); }
.conf.q5 i.on { background: var(--good); }
.conf.q2 i.on, .conf.q1 i.on { background: var(--warn); }
.verified { display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 var(--s-2); border: 1px solid color-mix(in srgb, var(--good) 40%, transparent); border-radius: var(--r-mark); background: var(--good-soft); color: var(--good); font-size: var(--t-xs); font-weight: 700; }
.verified .ic { width: 12px; height: 12px; stroke-width: 2.4; }
.badge { display: inline-flex; align-items: center; height: 20px; padding: 0 var(--s-2); border: var(--line); border-radius: var(--r-mark); font-size: var(--t-xs); font-weight: 700; color: var(--ink-2); }
.badge.good { color: var(--good); background: var(--good-soft); border-color: color-mix(in srgb, var(--good) 40%, transparent); }
.badge.warn { color: var(--warn); background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }

/* ---------- lens table ---------- */
#lens-table-wrap { container-type: inline-size; }
#lens-table { table-layout: fixed; }
#lens-table th, #lens-table td { padding: 10px 8px; white-space: normal; vertical-align: top; }
#lens-table th:first-child { width: 22px; }
#lens-table th:nth-child(2) { width: 29%; }
#lens-table th:nth-child(3) { width: 16%; }
#lens-table th:nth-child(4) { width: 20%; }
#lens-table th:nth-child(5) { width: 17%; }
#lens-table .lens-name { min-width: 0; overflow-wrap: anywhere; }
#lens-table .lens-name .model { font-size: 14px; line-height: 1.35; }
#lens-table .list-system { display: block; margin-top: 6px; font-size: 11px; color: var(--ink-2); }
#lens-table .list-spec { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 6px; margin-bottom: 3px; font-size: 12px; line-height: 1.5; }
#lens-table .list-spec > span { color: var(--ink-3); font-size: 11px; }
#lens-table .list-spec > b { font: 400 12px/1.5 var(--font-mono); white-space: nowrap; }
#lens-table .list-optics > small { display: block; margin-bottom: 4px; }
#lens-table .list-select { vertical-align: middle; }
#lens-table .meta .verified-badge { font-size: 10px; }
@container (max-width: 800px) {
  #lens-table thead { display: none; }
  #lens-table, #lens-table tbody { display: block; }
  #lens-table tbody tr { display: grid; grid-template-columns: 26px repeat(2, minmax(0,1fr)); padding: 10px; gap: 10px; border-bottom: var(--line); }
  #lens-table tbody tr:last-child { border-bottom: 0; }
  #lens-table td { padding: 0; border: 0; }
  #lens-table .list-select { grid-column: 1; grid-row: 1; }
  #lens-table .lens-name { grid-column: 2 / -1; }
  #lens-table .list-optics, #lens-table .list-focus { grid-column: 2; }
  #lens-table .list-size { grid-column: 3; grid-row: 2 / span 2; }
  #lens-table .list-features { grid-column: 2 / -1; display: flex; gap: 16px; flex-wrap: wrap; }
  #lens-table .list-features .list-spec { gap: 6px; }
}
.tbl .lens-name { white-space: normal; min-width: 240px; }
.tbl .lens-name .maker { display: block; font-size: 10px; font-weight: 700; letter-spacing: var(--caps); text-transform: uppercase; color: var(--ink-3); }
.tbl .lens-name .model { display: block; font-weight: 700; font-size: var(--t-base); }
.tbl .lens-name .meta { display: flex; flex-wrap: wrap; gap: var(--s-1); align-items: center; margin-top: 3px; }
.tbl tbody tr.selected { background: var(--accent-soft); }
.tbl .sel-box { width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; }
.tbl td small { font: 400 10.5px var(--font-text); color: var(--ink-3); }
.btn.more { display: flex; margin: var(--s-6) auto 0; }
#lens-empty { margin-top: var(--s-2); }
.empty-box { display: grid; justify-items: center; gap: var(--s-2); }
.empty-box .big { width: 28px; height: 28px; color: var(--ink-3); }
.empty-box p { margin: 0; }
.relax { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); margin: var(--s-2) 0; }
.pill.soft { margin-left: var(--s-1); font: 500 var(--t-xs) var(--font-mono); color: var(--ink-3); }
.empty-box .link { border: 0; background: none; color: var(--link); font-weight: 700; cursor: pointer; }

/* where a value comes from (hover or focus the small link button) */
.src-wrap { position: relative; display: inline-block; margin-left: var(--s-2); vertical-align: 1px; }
.src-btn { display: inline-flex; align-items: center; gap: 2px; height: 20px; padding: 0 6px 0 4px; border: var(--line); border-radius: var(--r-mark); background: var(--sheet); color: var(--ink-3); font: 500 var(--t-xs)/1 var(--font-mono); cursor: pointer; }
.src-btn .ic { width: 12px; height: 12px; }
.src-btn:hover, .src-wrap:focus-within .src-btn { border-color: var(--accent); color: var(--link); }
.src-wrap .src-pop { position: fixed; inset: 0; margin: auto; width: fit-content; height: fit-content; max-width: calc(100vw - 32px); max-height: 75vh; padding: 0; border: none; background: var(--sheet); color: var(--ink); overflow: auto; }
.src-pop:popover-open { display: block; }
.src-pop::backdrop { background: #0002; }
.src-box q { display: block; margin: 6px 0; font-style: italic; }
.src-box li { padding: 8px 0; border-bottom: var(--line); }
.src-box { max-width: min(520px, calc(100vw - 32px)); }
.src-box > button { margin-top: 12px; }
.src-box { display: block; min-width: 240px; max-width: 340px; padding: var(--s-3) var(--s-4); border: var(--line-strong); border-radius: var(--r); background: var(--sheet); box-shadow: var(--float); font: var(--t-sm)/1.45 var(--font-text); }
.src-box small { display: block; margin-bottom: var(--s-2); color: var(--ink-2); }
.src-box .why { color: var(--ink); }
.src-box ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s-1); }
.src-box a { color: var(--link); }

/* ---------- one lens: its page ---------- */
.lens-page { display: grid; gap: var(--s-6); }
#lens-page { display: grid; gap: var(--s-6); }
.lens-page { display: grid; gap: var(--s-5); }
.lp-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-6); flex-wrap: wrap; padding-bottom: var(--s-4); border-bottom: var(--line); }
.lp-title { display: grid; justify-items: start; gap: 2px; }
.lp-back { margin: 0 0 var(--s-2) calc(var(--s-2) * -1); }
.lp-back .ic { width: 16px; height: 16px; }
.lp-head h1 { margin: 0 0 var(--s-1); font: 900 var(--t-2xl)/1.1 var(--font-text); letter-spacing: -.02em; }
.lp-key { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin: 0; }
.lp-conf { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--t-sm); color: var(--ink-2); }
.lp-actions { display: flex; gap: var(--s-2); }
.lp-actions .ic { width: 16px; height: 16px; }
.lp-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-6); align-items: start; }
.lp-side { display: grid; gap: var(--s-4); }
.lp-drawing { margin: 0; padding: var(--s-4); border: var(--line); border-radius: var(--r); overflow-x: auto; }
.lp-drawing .lens-draw { margin: 0 auto; }
.lp-drawing figcaption { margin-top: var(--s-2); font-size: var(--t-xs); color: var(--ink-3); }
.lp-box { padding: var(--s-4); border: var(--line); border-radius: var(--r); background: var(--sheet); }
.lp-box h2 { margin: 0 0 var(--s-3); font: 700 var(--t-md)/1.2 var(--font-text); }
.cam-more { margin-top: var(--s-2); }
.cam-more summary { width: max-content; color: var(--link); font-size: var(--t-sm); font-weight: 700; cursor: pointer; }
.cam-more[open] summary { margin-bottom: var(--s-2); }
/* the spec sheet flows into two columns of groups */
.spec-groups { columns: 2 300px; column-gap: var(--s-6); }
.spec-group { break-inside: avoid; margin-bottom: var(--s-4); }
.spec-group h3 { margin: 0 0 var(--s-1); font-size: var(--t-xs); font-weight: 700; letter-spacing: var(--caps); text-transform: uppercase; color: var(--link); }
.spec-group .spec-sheet { grid-template-columns: minmax(0, 11em) minmax(0, 1fr); }
.spec-group .spec-sheet dt, .spec-group .spec-sheet dd { padding: 6px 0; }
.spec-group .spec-sheet dt { padding-right: var(--s-3); }
.spec-sheet .alt { display: block; font: 400 var(--t-xs)/1.4 var(--font-text); color: var(--ink-3); }
.lp-section h2 { margin: 0 0 var(--s-3); font: 700 var(--t-lg)/1.2 var(--font-text); }
.cam-list { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.cam-list span { padding: 2px var(--s-2); border: var(--line); border-radius: var(--r-mark); background: var(--sheet); font-size: var(--t-sm); }

/* ---------- compare ---------- */
.compare-view { display: grid; gap: var(--s-5); }
.compare-view, #compare-body { grid-template-columns: minmax(0, 1fr); }
.compare-top { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.compare-top h1 { flex: 1; margin: 0; font: 900 var(--t-2xl)/1.1 var(--font-text); }
.compare-top .btn .ic { width: 16px; height: 16px; }
.compare-share-fallback { margin-top: 12px; display: grid; gap: 6px; }
.compare-share-fallback label { font-size: 12px; font-weight: 700; }
.compare-share-fallback small { color: var(--ink-2); }
#compare-body { display: grid; gap: var(--s-5); }
.cmp-visual { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--s-4); align-items: start; }
.cmp-overlay { padding: var(--s-4); border: var(--line); border-radius: var(--r); }
.cmp-bars { padding: var(--s-4) var(--s-5); border: var(--line); border-radius: var(--r); background: var(--sheet); }
.tbl.cmp { table-layout: fixed; min-width: 700px; }
.tbl.cmp th, .tbl.cmp td { white-space: normal; vertical-align: top; }
.tbl.cmp thead th:first-child, .tbl.cmp tbody th { width: 180px; }
.tbl.cmp tbody th { position: sticky; left: 0; z-index: 1; background: var(--sheet); font-weight: 400; color: var(--ink-2); text-transform: none; letter-spacing: 0; font-size: var(--t-sm); }
.tbl.cmp thead th { text-transform: none; letter-spacing: 0; color: var(--ink); background: var(--sheet); border-bottom: var(--line-strong); }
.cmp-head { display: grid; gap: var(--s-1); }
.cmp-head .caps { display: flex; align-items: center; gap: 6px; }
.cmp-head .sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; background: var(--c); }
.cmp-head .model { font: 700 var(--t-md)/1.25 var(--font-text); color: var(--ink); text-decoration: none; }
.cmp-head .model:hover { color: var(--link); text-decoration: underline; }
.cmp-head .row { display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; }
.cmp-head .rm { justify-self: start; padding: 0; border: 0; background: none; color: var(--ink-3); font-size: var(--t-sm); text-decoration: underline; cursor: pointer; }
.cmp-head .rm:hover { color: var(--bad); }
.tbl.cmp tr.group th, .tbl.cmp tr.group td { position: static; background: var(--sheet-sunk); color: var(--link); font-size: var(--t-xs); font-weight: 700; letter-spacing: var(--caps); text-transform: uppercase; }
.tbl.cmp td { font-family: var(--font-mono); font-size: var(--t-sm); }
.tbl.cmp td.is-best { font-weight: 700; color: var(--good); }
.tbl.cmp td .best { display: inline-block; margin-left: var(--s-2); padding: 0 5px; border-radius: var(--r-mark); background: var(--good-soft); color: var(--good); font: 700 10px/16px var(--font-text); letter-spacing: .04em; text-transform: uppercase; }
.tbl.cmp tr.same td { color: var(--ink-3); }
.tbl.cmp .bar { max-width: 160px; height: 3px; margin-top: 6px; background: var(--sheet-sunk); }
.tbl.cmp .bar i { display: block; height: 100%; background: var(--accent); opacity: .6; }
.tbl.cmp tbody tr { cursor: default; }
.tbl.cmp tbody tr:hover { background: none; }
.cmp-add { display: inline-flex; align-items: center; gap: var(--s-2); width: 100%; min-height: 76px; justify-content: center; border: 1px dashed var(--rule-strong); border-radius: var(--r); background: none; color: var(--ink-2); cursor: pointer; }
.cmp-add:hover { border-color: var(--accent); color: var(--link); }
.compare-empty { padding: var(--s-12) 0; text-align: center; color: var(--ink-2); }

/* ---------- compare tray (bottom) ---------- */
.tray { position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; border-top: var(--line-strong); background: var(--sheet); box-shadow: 0 -8px 24px rgb(10 20 40 / 12%); animation: lf-tray-up var(--dur-slow) var(--ease); }
.tray-inner { max-width: 1880px; margin: 0 auto; display: flex; align-items: center; gap: var(--s-4); padding: var(--s-3) var(--s-8); }
.tray-items { flex: 1; display: flex; gap: var(--s-2); overflow-x: auto; }
.tray-item { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-1) var(--s-1) var(--s-1) var(--s-3); border: var(--line); border-radius: var(--r); white-space: nowrap; font-size: var(--t-sm); font-weight: 700; }
.tray-item small { display: block; font-size: 10px; font-weight: 700; letter-spacing: var(--caps); text-transform: uppercase; color: var(--ink-3); }
.tray-item button { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: var(--r-mark); background: none; color: var(--ink-3); cursor: pointer; }
.tray-item button:hover { background: var(--coral-soft); color: var(--coral-ink); }
.tray-item button .ic { width: 14px; height: 14px; }
.tray-slot { display: flex; align-items: center; padding: 0 var(--s-3); border: 1px dashed var(--rule-strong); border-radius: var(--r); color: var(--ink-3); font-size: var(--t-sm); white-space: nowrap; }
.tray-actions { display: flex; align-items: center; gap: var(--s-2); }
.tray-note { font-size: var(--t-sm); color: var(--warn); }
.tray-count { font: 500 var(--t-sm) var(--font-mono); color: var(--ink-2); white-space: nowrap; }
#tray-compare { height: 44px; padding: 0 var(--s-5); font-size: var(--t-md); }
#tray-compare:disabled { border: var(--line-strong); background: var(--sheet-sunk); color: var(--ink-2); opacity: 1; font-size: var(--t-sm); }
#tray-compare .ic { width: 18px; height: 18px; }
body.has-tray .toast { bottom: 92px; }
@keyframes lf-tray-up { from { transform: translateY(100%); } to { transform: none; } }

/* ---------- guide ("Help me choose") ---------- */
dialog { color: var(--ink); }
dialog.guide { width: min(660px, calc(100vw - 32px)); max-height: min(780px, calc(100vh - 48px)); padding: 0; border: var(--line-strong); border-radius: var(--r); background: var(--sheet); box-shadow: var(--float); display: none; flex-direction: column; overflow: hidden; }
dialog.guide[open] { display: flex; }
dialog.guide::backdrop { background: rgb(5 15 40 / 45%); }
.guide-top { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4) var(--s-5) 0; }
.guide-progress { flex: 1; display: flex; gap: 4px; }
.guide-progress i { flex: 1; height: 4px; border-radius: 1px; background: var(--sheet-sunk); }
.guide-progress i.done { background: color-mix(in srgb, var(--accent) 45%, transparent); }
.guide-progress i.on { background: var(--coral); }
.guide-body { flex: 1; overflow-y: auto; padding: var(--s-5) var(--s-6) var(--s-6); }
.guide-body h2 { margin: 0 0 var(--s-2); font: 900 var(--t-xl)/1.2 var(--font-text); }
.guide-body .lead { margin: 0 0 var(--s-5); color: var(--ink-2); }
.guide-body .eyebrow { display: flex; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-2); font-size: var(--t-xs); font-weight: 700; letter-spacing: var(--caps); text-transform: uppercase; color: var(--coral-ink); }
.guide-body .eyebrow .ic { width: 15px; height: 15px; }
.guide-body .q { margin: 0 0 var(--s-3); font-weight: 700; }
.guide-body .searchbar { margin-bottom: var(--s-3); }
.guide-body .searchbar input { width: 100%; height: 38px; padding: 0 var(--s-3) 0 38px; border: var(--line-strong); border-radius: var(--r); background: var(--sheet); }
.guide-body .searchbar { position: relative; display: flex; align-items: center; }
.guide-body .searchbar .ico { position: absolute; left: var(--s-3); display: grid; color: var(--ink-3); }
.g-opts { display: grid; gap: var(--s-2); }
.g-opt { position: relative; display: flex; align-items: center; gap: var(--s-3); width: 100%; padding: var(--s-3) var(--s-4); border: var(--line-strong); border-radius: var(--r); background: var(--sheet); color: var(--ink); text-align: left; cursor: pointer; transition: border-color var(--dur-fast), background var(--dur-fast); }
.g-opt > .ic { width: 24px; height: 24px; color: var(--link); }
.g-opt span { display: grid; gap: 2px; }
.g-opt b { font-size: var(--t-md); }
.g-opt small { color: var(--ink-2); font-size: var(--t-sm); }
.g-opt em { margin-left: auto; padding: 1px var(--s-2); border-radius: var(--r-mark); background: var(--good-soft); color: var(--good); font: 700 var(--t-xs) var(--font-text); font-style: normal; white-space: nowrap; }
.g-opt:hover, .g-brand:hover, .g-cam:hover { border-color: var(--accent); }
.g-opt[aria-pressed="true"], .g-brand[aria-pressed="true"], .g-cam[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.g-brands { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: var(--s-2); }
.g-brand, .g-cam { display: grid; gap: 2px; padding: var(--s-2) var(--s-3); border: var(--line-strong); border-radius: var(--r); background: var(--sheet); color: var(--ink); text-align: left; cursor: pointer; }
.g-brand small, .g-cam small { font: var(--t-xs) var(--font-mono); color: var(--ink-3); }
.g-more { margin-top: var(--s-3); }
.g-more summary { color: var(--link); cursor: pointer; margin-bottom: var(--s-2); }
.g-cams { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--s-2); }
.g-summary { display: grid; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.g-summary li { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border: var(--line); border-radius: var(--r); background: var(--sheet-sunk); }
.g-summary .ic { color: var(--good); }
.g-relax { display: grid; justify-items: start; gap: var(--s-2); margin-top: var(--s-4); padding: var(--s-3) var(--s-4); border: var(--line); border-left: 3px solid var(--warn); border-radius: var(--r); background: var(--warn-soft); }
.g-relax p { margin: 0; }
.guide-foot { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-3) var(--s-5); border-top: var(--line); }
.guide-foot .spacer { flex: 1; }
.guide-foot .btn .ic { width: 16px; height: 16px; }

/* ---------- cameras view (keeps a side panel) ---------- */
.view.with-filters { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: var(--s-6); align-items: start; }
.filters { position: sticky; top: 72px; max-height: calc(100vh - 88px); overflow-y: auto; overscroll-behavior: contain; border: var(--line); border-radius: var(--r); background: var(--sheet); }
.filters-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: var(--s-2); padding: var(--s-4) var(--s-4) var(--s-2); background: var(--sheet); box-shadow: 0 1px 0 var(--rule); }
.filters-head h2 { flex: 1; margin: 0; font: 700 var(--t-md) var(--font-text); }
.close-filters { display: none; }
.filters .fsec { padding: var(--s-3) var(--s-4) var(--s-4); border-top: var(--line); }
.filters .fsec-title { margin-bottom: var(--s-2); }
.results { min-width: 0; }
.results > .searchbar { margin-bottom: var(--s-3); }

/* ---------- pages: news, about ---------- */
.camera-page-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin-bottom: 16px; }
.camera-page-head h1 { margin: 0; font-size: 28px; line-height: 1.2; }
.camera-page-head p { margin: 0; color: var(--ink-2); font-size: var(--t-sm); }
#cam-count { margin: 0; font-weight: 700; color: var(--ink); }
#cam-table-wrap { container-type: inline-size; }
#cam-table { table-layout: fixed; }
#cam-table th, #cam-table td { white-space: normal; padding: 10px 12px; }
#cam-table th:first-child { width: 38%; }
#cam-table .lens-name { min-width: 0; }
#cam-table .model { font-size: 14px; }
.camera-crop { display: block; margin-top: 2px; }
.cam-use { display: inline-flex; gap: 6px; white-space: nowrap; }
#cam-table tr:not([data-cam]) { cursor: default; }
@container (max-width: 600px) {
  #cam-table, #cam-table tbody { display: block; }
  #cam-table thead { display: none; }
  #cam-table tr { display: grid; grid-template-columns: 1fr 1fr; padding: 12px; gap: 8px 12px; border-bottom: var(--line); }
  #cam-table tr:last-child { border-bottom: 0; }
  #cam-table td { padding: 0; border: 0; font-size: 12px; }
  #cam-table td:first-child { grid-column: 1 / -1; }
  #cam-table td:last-child { grid-column: 1 / -1; text-align: left; }
}
.page { max-width: 780px; margin: 0 auto; }
.page h1 { margin: var(--s-4) 0 var(--s-1); font: 900 var(--t-3xl)/1.05 var(--font-text); letter-spacing: -.02em; }
.page .lead { margin: 0 0 var(--s-6); font-size: var(--t-md); color: var(--ink-2); }
.page h2 { margin: var(--s-8) 0 var(--s-2); font: 700 var(--t-xl)/1.2 var(--font-text); }
.news-tools { display: grid; gap: var(--s-3); margin-bottom: var(--s-6); }
.news-search { display: flex; gap: var(--s-2); }
.news-search .searchbar { flex: 1; }
.news-search select { width: auto; max-width: 45%; }
.news-list { display: grid; gap: var(--s-4); }
.news-day { margin: var(--s-4) 0 calc(var(--s-1) * -1); font: 500 var(--t-xs) var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.news-card { padding: var(--s-5); border: var(--line); border-radius: var(--r); background: var(--sheet); }
.news-card h3 { margin: 0 0 var(--s-2); font: 700 var(--t-lg)/1.3 var(--font-text); }
.news-card p { margin: 0 0 var(--s-3); }
.news-card .kicker { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0 0 var(--s-1); font-size: var(--t-xs); font-weight: 700; letter-spacing: var(--caps); text-transform: uppercase; color: var(--ink-3); }
.news-card .kicker .cat { color: var(--coral-ink); }
.news-card .tags { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-bottom: var(--s-2); }
.news-card .tags .badge { text-decoration: none; }
.news-card .links { font-size: var(--t-sm); margin: 0; }
.score-list { display: grid; gap: var(--s-2); margin: var(--s-3) 0; padding: 0; list-style: none; }
.score-list li { display: grid; grid-template-columns: 80px 1fr; gap: var(--s-3); align-items: center; }
.credits { display: grid; gap: var(--s-2); padding: 0; list-style: none; }
#view-news, #view-about { max-width: 1060px; }
.news-tools { margin-bottom: 16px; padding: 16px; border: var(--line); background: var(--sheet); border-radius: var(--r); gap: 10px; }
.news-tools .choices { display: flex; flex-wrap: wrap; gap: 6px; }
.news-search .searchbar { min-width: 0; }
.news-status { margin: 0; font-size: 12px; color: var(--ink-3); }
.news-date-group { display: grid; grid-template-columns: 135px minmax(0,1fr); gap: 16px; align-items: start; }
.page .news-day { margin: 0; padding-top: 16px; font: 600 12px/1.5 var(--font-text); color: var(--ink-2); letter-spacing: 0; text-transform: none; text-wrap: initial; }
.news-day-posts { display: grid; gap: 12px; }
.news-card { padding: 16px; }
.news-card p { font-size: 14px; line-height: 1.55; margin-bottom: 10px; }
.news-card .links { padding-top: 8px; border-top: var(--line); margin-bottom: 0; }
.about-intro { margin-bottom: 24px; }
.about-intro .lead { max-width: 75ch; margin-bottom: 16px; }
.about-stats { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-bottom: 16px; font-size: 13px; color: var(--ink-2); }
.about-stats b { font: 700 24px/1.2 var(--font-num); color: var(--ink); margin-right: 4px; }
.about-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.about-grid { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); gap: 16px; align-items: start; }
.about-section { padding: 20px; border: var(--line); border-radius: var(--r); background: var(--sheet); font-size: 14px; line-height: 1.55; }
.about-section h2 { margin: 0 0 12px; font-size: 21px; }
.about-section p:last-child { margin-bottom: 0; }
.about-confidence { grid-row: span 2; }
.about-accuracy { grid-column: 1 / -1; }
.footer-accuracy { flex-basis: 100%; font-size: 12px; line-height: 1.5; }
.launch-price-source { font: 500 14px var(--font-mono); }
.launch-price-note { display: block; margin-top: 3px; font: 400 11px/1.5 var(--font-text); color: var(--ink-3); }
.about-confidence .score-list { gap: 0; }
.about-confidence .score-list li { grid-template-columns: 42px minmax(0,1fr); gap: 10px; padding: 10px 0; border-bottom: var(--line); }
@media (max-width: 700px) {
  .about-grid { grid-template-columns: minmax(0,1fr); }
  .about-confidence { grid-row: auto; }
  .about-section { padding: 16px; }
  .news-date-group { grid-template-columns: minmax(0,1fr); gap: 6px; }
  .page .news-day { padding-top: 4px; }
  .news-search { flex-wrap: wrap; }
  .news-search .searchbar { flex-basis: 100%; }
  .news-search select { max-width: 100%; width: 100%; }
}

/* ---------- smaller windows (the phone layout comes later) ---------- */
@media (max-width: 980px) {
  .cam-pick { grid-template-columns: minmax(0, 1fr); }
  .hero-or { height: 18px; }
  .hero-or::before { top: 50%; bottom: auto; left: 0; right: 0; border-left: 0; border-top: 1px dashed var(--rule-strong); }
  .hero-or span { padding: 0 var(--s-2); }
  .lp-grid, .cmp-visual { grid-template-columns: minmax(0, 1fr); }
  .view.with-filters { grid-template-columns: minmax(0, 1fr); }
  .filters { position: fixed; inset: 0; z-index: 40; max-height: none; border-radius: 0; display: none; }
  .filters.open { display: block; }
  .close-filters, .show-filters { display: inline-flex; }
}
@media (max-width: 700px) {
  /* two rows: brand and actions, then the tabs as their own scrollable row */
  .topbar { flex-wrap: wrap; height: auto; row-gap: 0; gap: var(--s-2) var(--s-3); padding: var(--s-2) var(--s-4) 0; }
  .tabs { order: 10; flex: 1 0 100%; margin: 0 calc(var(--s-4) * -1); padding: var(--s-1) var(--s-4) var(--s-2); overflow-x: auto; scrollbar-width: none; }
  .tabs [data-view] { flex: none; }
  .brand span { display: none; }
  .tbl.cmp thead th:first-child, .tbl.cmp tbody th { width: 112px; }
  .tbl.cmp { min-width: 520px; }
  .cam-chip { flex-wrap: wrap; }
  .cam-chip .acts { flex: 1 0 100%; flex-wrap: wrap; }
  .compare-top h1 { flex-basis: 100%; order: -1; font-size: var(--t-xl); }
  .support-card { position: fixed; top: 52px; left: var(--s-4); right: var(--s-4); width: auto; }
  .support-card::before { display: none; }
  main { padding: var(--s-4) var(--s-4) var(--s-10); }
  .tray-inner { padding: var(--s-3) var(--s-4); flex-direction: column; align-items: stretch; }
}
@media (max-width: 900px) { .brand span { display: none; } }
@media (max-width: 480px) {
  .support-link { width: 34px; padding: 0; justify-content: center; font-size: 0; gap: 0; }
  .support-link .ic { width: 18px; height: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0s !important; transition-duration: 1ms !important; }
}

/* Compact desktop discovery and explicit evidence/variant controls. */
@media (min-width: 900px) {
  .cam-pick { padding: var(--s-4); gap: var(--s-4); grid-template-columns: minmax(0, 1fr) auto; }
  .cam-head h2 { font-size: var(--t-lg); }
  .cam-head p, .hero-or, .hero-guide p, .hero-guide h3, .hero-guide > .cam-ico { display: none; }
  .hero-guide { align-self: center; }
  .camera-box { margin-bottom: var(--s-3); }
  .quick-cams { gap: 5px; }
  .results { display: flex; flex-direction: column; }
  .news-strip { order: 2; margin-top: var(--s-5); }
}
.lcard-model a { color: inherit; text-decoration: none; }
.lcard-model a:hover { color: var(--link); text-decoration: underline; }
.variant-picker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0; font-size: var(--t-sm); font-weight: normal; }
.variant-picker select { width: auto; max-width: 100%; }
.compare-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 12px 0; }
.compare-tools small { color: var(--ink-2); }
.cmp-delta { display: block; margin-top: 4px; font: normal var(--t-xs)/1.4 var(--font-text); color: var(--ink-2); }
.cmp-side { display: flex; align-items: end; flex-wrap: wrap; gap: 16px; }
.cmp-side figure { margin: 0; }
.cmp-side figcaption { max-width: 220px; font-size: var(--t-xs); }
.cmp thead th { position: sticky; top: 0; background: var(--sheet); z-index: 2; }
.exact-range { margin-top: 10px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* rings drawn inside, where a rounded container would clip an outer ring */
.seg button:focus-visible, .chipset.segmented .fchip:focus-visible, .theme-switch button:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--coral); }
/* on the black bar a black ring would vanish */
.topbar :focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; box-shadow: none; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 100; padding: var(--s-2) var(--s-4); border: 0; border-radius: var(--r); background: var(--coral); color: #1b1e23; font: 700 var(--t-sm) var(--font-text); cursor: pointer; transform: translateY(-150%); }
.skip-link:focus-visible { transform: none; outline: 2px solid var(--accent); }

.system-filters { border-bottom: var(--line); }
.system-filters > summary { padding: 14px 0; font-weight: 700; cursor: pointer; }
.system-filters .side-sec { margin-left: 8px; }
.quality-summary { padding: 12px 16px; border: var(--line); border-radius: var(--r); color: var(--ink-2); }
.quality-summary summary { color: var(--ink); cursor: pointer; }

.coverage-note { display: block; margin-top: 3px; color: var(--ink-2); font-size: var(--t-xs); }

/* One measurement at a time, directly labeled for every lens. */
.cmp-measurements { min-width: 0; padding: var(--s-5); border: var(--line); border-radius: var(--r); background: var(--sheet); }
.cmp-metric-switch { display: flex; flex-wrap: wrap; gap: 6px; }
.cmp-metric-switch button { padding: 7px 10px; border: var(--line); border-radius: var(--r); background: var(--sheet); color: var(--ink-2); font: inherit; font-size: var(--t-sm); cursor: pointer; }
.cmp-metric-switch button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--sheet); }
.cmp-metric-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 24px 0 8px; }
.cmp-metric-heading h2 { margin: 0; font-size: var(--t-lg); }
.cmp-metric-heading > span { font-size: var(--t-xs); color: var(--ink-2); }
.cmp-measurement-list { list-style: none; padding: 0; margin: 0; }
.cmp-measurement-list li { padding: 16px 0; border-bottom: var(--line); }
.cmp-measurement-label { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.cmp-measurement-label a { color: var(--ink); font-size: var(--t-sm); line-height: 1.5; text-decoration: none; }
.cmp-measurement-label a:hover { text-decoration: underline; }
.cmp-measurement-label strong { flex-shrink: 0; font: 600 var(--t-base)/1.5 var(--font-mono); }
.cmp-measurement-detail { display: grid; grid-template-columns: minmax(0,1fr); gap: 4px; align-items: center; min-height: 22px; margin-top: 8px; }
.cmp-extreme { color: var(--good); font-size: var(--t-xs); text-align: right; }
.cmp-scale-note { margin: 14px 0 0; color: var(--ink-2); font-size: var(--t-xs); line-height: 1.5; }
@media (max-width: 600px) { .cmp-measurements { padding: var(--s-4); } }


.cmp-measurement-label a { min-width: 0; overflow-wrap: anywhere; }
.cmp-measurement-label strong { max-width: 48%; overflow-wrap: anywhere; }
.cmp-extreme { min-height: 16px; }
.cmp-weight-set { display: flex; flex-wrap: wrap; gap: 5px; align-items: end; min-height: 45px; padding-top: 4px; }
.cmp-weight-set svg { flex: 0 0 30px; width: 30px; height: 35px; }
.cmp-weight-empty { fill: var(--sheet-sunk); stroke: var(--rule-strong); stroke-width: 1.1; }
.cmp-weight-fill { fill: color-mix(in srgb, var(--c) 20%, var(--sheet)); stroke: var(--c); stroke-width: 1.5; }
.cmp-illustration { display: block; width: 100%; height: auto; max-height: 104px; color: var(--c); overflow: hidden; }
.cmp-illustration text { fill: var(--ink-2); font: 11px var(--font-mono); }
.cmp-guide { fill: none; stroke: var(--rule-strong); stroke-width: 1; }
.cmp-lens-body { fill: color-mix(in srgb, var(--c) 14%, var(--sheet)); stroke: var(--c); stroke-width: 1.4; }
.cmp-sensor { fill: none; stroke: var(--c); stroke-width: 2; }
.cmp-sensor-frame { fill: var(--sheet-sunk); stroke: var(--rule-strong); stroke-width: 1; }
@media (max-width: 600px) { .cmp-measurement-label { gap: 8px; } .cmp-weight-set svg { flex-basis: 24px; width: 24px; height: 28px; } }

@media (max-width: 600px) { .cmp-illustration text { font-size: 14px; } }

/* Keep illustrations compact so the specification table is discoverable. */
.compare-view, #compare-body { gap: 16px; }
.compare-tools { margin: 0; gap: 10px; }
.cmp-visual { grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 16px; align-items: stretch; }
.cmp-size-panel { min-width: 0; padding: 12px; border: var(--line); border-radius: var(--r); background: var(--sheet); }
.cmp-size-tools { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.cmp-size-tools h2 { margin: 0; font-size: var(--t-sm); }
.cmp-size-panel .cmp-overlay { padding: 6px; margin-top: 10px; max-height: 172px; overflow: auto; }
.cmp-size-panel .cmp-overlay > svg { display: block; width: 100%; height: 155px; }
.cmp-size-panel .cmp-side { flex-wrap: nowrap; gap: 10px; }
.cmp-size-panel .cmp-side figure { flex: 1 0 90px; min-width: 0; }
.cmp-size-panel .cmp-side svg { width: 100%; height: 115px; }
.cmp-size-panel .cmp-side figcaption { font-size: 11px; line-height: 1.3; }
.cmp-size-panel .cmp-legend { margin-top: 8px; gap: 4px 12px; font-size: 11px; line-height: 1.4; }
.cmp-size-panel .cmp-legend li { min-width: 0; }
.cmp-size-panel .cmp-legend i { flex-shrink: 0; }
.cmp-size-note { margin: 6px 0 0; font-size: 11px; color: var(--ink-2); }
.cmp-measurements { padding: 12px; }
.cmp-metric-switch { gap: 4px; }
.cmp-metric-switch button { padding: 6px 9px; }
.cmp-metric-heading { margin: 12px 0 6px; }
.cmp-metric-heading h2 { font-size: var(--t-sm); }
.cmp-measurement-list { display: grid; grid-template-columns: repeat(var(--compare-count),minmax(0,1fr)); gap: 0; }
.cmp-measurement-list li { min-width: 0; padding: 8px 10px; border-bottom: 0; border-left: var(--line); }
.cmp-measurement-list li:first-child { border-left: 0; padding-left: 0; }
.cmp-measurement-list li:last-child { padding-right: 0; }
.cmp-measurement-label { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.cmp-measurement-label a { font-size: 12px; line-height: 1.4; }
.cmp-measurement-label strong { max-width: 100%; font-size: var(--t-sm); }
.cmp-measurement-detail { margin-top: 6px; }
.cmp-weight-set { gap: 2px; min-height: 34px; align-content: start; }
.cmp-weight-set svg { flex-basis: 21px; width: 21px; height: 25px; }
.cmp-measurement-detail .cmp-illustration { max-height: 72px; }
.cmp-extreme { font-size: 11px; text-align: left; min-height: 0; }
.cmp-extreme:empty { display: none; }
.cmp-scale-note { margin: 8px 0 0; padding-top: 8px; border-top: var(--line); font-size: 11px; }
.cmp-specs-heading { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 16px; margin: 4px 0 10px; }
.cmp-specs-heading h2 { margin: 0; font-size: var(--t-lg); scroll-margin-top: 80px; }
.cmp-specs-heading span { color: var(--ink-2); font-size: var(--t-xs); }
@media (max-width: 900px) {
  .cmp-visual { grid-template-columns: minmax(0,1fr); }
  .cmp-size-panel .cmp-overlay { max-height: 138px; }
  .cmp-size-panel .cmp-overlay > svg { height: 120px; }
}
@media (max-width: 600px) {
  .cmp-measurement-list { grid-template-columns: repeat(2,minmax(0,1fr)); row-gap: 12px; }
  .cmp-measurement-list li:nth-child(odd) { border-left: 0; padding-left: 0; }
  .cmp-measurement-detail .cmp-illustration { max-height: 88px; }
}

.cmp-measurement-detail .cmp-illustration text { display: none; }
@supports (grid-template-rows: subgrid) {
  .cmp-measurement-list { grid-template-rows: auto auto auto; }
  .cmp-measurement-list li { display: grid; grid-template-rows: subgrid; grid-row: 1 / span 3; row-gap: 4px; }
  .cmp-measurement-label { display: contents; }
  .cmp-measurement-label strong { align-self: end; }
  .cmp-measurement-detail { align-content: start; }
  @media (max-width: 600px) {
    .cmp-measurement-list { grid-template-rows: none; }
    .cmp-measurement-list li { grid-row: auto / span 3; }
  }
}

/* Lens search is primary; camera selection is an optional, compact filter. */
.camera-box { margin-bottom: 16px; }
#cam-pick.cam-pick { grid-template-columns: minmax(0,1fr) auto; padding: 16px; background-image: none; }
#cam-pick .hero-main { gap: 10px; }
#cam-pick .cam-head h2 { font-size: var(--t-md); }
#cam-pick .cam-head p { display: block; font-size: var(--t-sm); }
#cam-pick .combo { width: min(100%,360px); }
#cam-pick .input-wrap.lg { min-height: 40px; }
#cam-pick .input-wrap.lg input { font-size: var(--t-sm); }
#cam-pick .cam-ico { width: 32px; height: 32px; }
.lens-search-label { display: block; margin: 0 0 6px; font-size: var(--t-sm); font-weight: 700; }

.camera-field-label { font-size: var(--t-sm); font-weight: 700; }
.camera-quiz { max-width: 240px; }
.camera-quiz p { margin: 4px 0 0; color: var(--ink-2); font-size: var(--t-xs); line-height: 1.4; }
#cam-pick .quick-cams { flex-wrap: wrap; gap: 4px; font-size: 11px; }
#cam-pick .qcam { flex-shrink: 0; height: 25px; padding: 0 8px; font-size: 11px; }
@media (max-width: 700px) { #cam-pick.cam-pick { grid-template-columns: minmax(0,1fr); } .camera-quiz { max-width: none; } }

/* Rendered filter groups use the same inset and disclosure affordance. */
.system-filters > summary { display: flex; align-items: center; gap: 8px; padding: 14px 16px; list-style: none; }
.system-filters > summary::-webkit-details-marker { display: none; }
.system-filters > summary::after { content: ''; width: 7px; height: 7px; margin-left: auto; border-right: 1.5px solid var(--ink-3); border-bottom: 1.5px solid var(--ink-3); transform: rotate(45deg); }
.system-filters[open] > summary::after { transform: rotate(225deg); }
.system-filters .side-sec { margin-left: 0; }
#cam-pick.cam-pick { grid-template-columns: minmax(0,1fr); gap: 12px; }
#cam-pick .hero-main { display: grid; grid-template-columns: minmax(0,360px) minmax(0,1fr); gap: 10px 20px; align-items: center; }
#cam-pick .cam-head { grid-column: 1 / -1; }
#cam-pick .quick-cams { margin: 0; }
#cam-pick .camera-quiz { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; max-width: none; padding-top: 8px; border-top: var(--line); }
#cam-pick .camera-quiz .btn { padding: 4px 0; min-height: 30px; }
#cam-pick .camera-quiz p { margin: 0; }
#cam-cancel { grid-column: 1 / -1; }
@media (max-width: 1000px) { #cam-pick .hero-main { grid-template-columns: minmax(0,1fr); } }

/* Original brand colors sit on a small light tile, including in dark themes. */
.brand-label { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 7px; min-width: 0; }
/* --lw/--lh come from brandLogo(): every logo gets the same visual weight; --logo-scale enlarges it in roomy places. */
.brand-logo { --logo-scale: 1; display: inline-flex; align-items: center; justify-content: center; flex: none; height: calc(28px * var(--logo-scale)); padding: 0 calc(5px * var(--logo-scale)); border: 1px solid #d9dde3; border-radius: 3px; background: #fff; vertical-align: middle; }
.brand-logo img { display: block; width: calc(var(--lw) * var(--logo-scale)); height: calc(var(--lh) * var(--logo-scale)); object-fit: contain; }
.cam-chip > .brand-logo { --logo-scale: 1.25; }

.brand-wordmark { display: inline-flex; align-items: center; }
.lp-brand-line { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 4px 0; }
.lp-brand-line .brand-logo { --logo-scale: 1.25; }

/* missing values */
.unknown.nr { font: 400 var(--t-xs)/1.3 var(--font-text); letter-spacing: 0; color: var(--ink-3); }
.lcard-specs dd .unknown.nr { display: block; padding-top: 3px; }

/* Align the information hierarchy and give every card a dedicated footer. */
.lcard-body { flex: 1; align-content: start; }
.lcard-optics { display: grid; align-content: start; gap: 4px; }
.lcard-specs { grid-template-columns: repeat(4,minmax(0,1fr)); justify-content: stretch; }
.lcard-specs > div { min-width: 0; padding: 0 5px; }
.lcard-specs dt { white-space: normal; min-height: 2.6em; line-height: 1.3; letter-spacing: .025em; }
.lcard-specs dd { white-space: normal; overflow-wrap: anywhere; line-height: 1.4; }
.lcard-tags { align-content: start; align-items: flex-start; gap: 5px; min-height: 22px; margin-top: 2px; }
.lcard-tags .badge { height: auto; min-height: 22px; padding: 2px 6px; font: 600 11px/1.4 var(--font-text); text-transform: none; }
.lcard-tags .feat + .feat::before { content: none; }
.lcard-tags .badge:not(.warn):not(.good) { background: var(--sheet-sunk); color: var(--ink-2); }
.lcard-mount { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; border-top: var(--line); padding-top: 8px; margin-top: auto; font-size: var(--t-xs); }
.lcard-mount-label { color: var(--ink-3); }
.lcard-mount .mounts { display: inline-flex; align-items: baseline; justify-content: flex-end; gap: 5px; text-align: right; color: var(--ink-2); font: 400 var(--t-xs)/1.4 var(--font-text); }
.lcard-mount .mounts .ic { width: 13px; height: 13px; flex-shrink: 0; align-self: center; }
@supports (grid-template-rows: subgrid) {
  .lens-grid > .lcard { display: grid; grid-template-rows: subgrid; grid-row: span 7; row-gap: 0; }
  .lens-grid > .lcard > .lcard-art { grid-row: 1; }
  .lens-grid > .lcard > .lcard-body { display: grid; grid-template-rows: subgrid; grid-row: 2 / span 6; row-gap: 8px; }
}

.lcard-spec-block { container-type: inline-size; }
.lcard-specs dd small { display: inline-block; white-space: nowrap; }
@container (max-width: 330px) {
  .lcard-specs dd { font-size: 12px; }
}

/* Compact cards retain the shared baselines and fixed mount footer. */
.lcard-art { min-height: 104px; height: 104px; padding: 10px 12px; }
.lcard-art .lens-draw { max-height: 82px; width: auto; max-width: 100%; }
.lcard-body { padding: 12px; gap: 6px; }
.lens-grid > .lcard > .lcard-body { row-gap: 6px; }
.lcard-optics { gap: 2px; }
.lcard-key { column-gap: 10px; }
.lcard-key .numeral { font-size: 24px; }
.lcard-key .caps { font-size: 10px; letter-spacing: .03em; }
.lcard-specs { padding-top: 8px; margin-top: 0; }
.lcard-specs dt { font-size: 10px; }
.lcard-tags { min-height: 20px; margin-top: 0; gap: 4px; }
.lcard-tags .badge { min-height: 20px; padding: 1px 5px; }
.lcard-mount { padding-top: 6px; }