/* Lenses.fyi components, "Blueprint × Lens barrel". Every colour, size and timing comes from
   tokens.css. Step 1 covers the foundations and the signature pieces; the rest follows in step 2. */

/* ---------- base ---------- */
.lf { background: var(--paper); color: var(--ink); font: var(--t-base)/var(--lh) var(--font-text); -webkit-font-smoothing: antialiased; }
.lf *, .lf *::before, .lf *::after { box-sizing: border-box; }
.lf :focus-visible { outline: none; box-shadow: var(--focus); }
.ic { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; display: block; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.caps { font-size: var(--t-xs); font-weight: 700; letter-spacing: var(--caps); text-transform: uppercase; color: var(--ink-2); }
.drafting { 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); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  height: 36px; padding: 0 var(--s-4); border: var(--line-strong); border-radius: var(--r);
  background: var(--sheet); color: var(--ink); font: 700 var(--t-base)/1 var(--font-text); cursor: pointer;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast), transform var(--dur-fast);
}
.btn:hover { border-color: var(--accent); color: var(--link); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); }
.btn.quiet { border-color: transparent; background: none; color: var(--link); padding: 0 var(--s-2); }
.btn.quiet:hover { background: var(--accent-soft); }
.btn.icon { width: 36px; padding: 0; }
.btn.sm { height: 30px; padding: 0 var(--s-3); font-size: var(--t-sm); }

/* ---------- filter buttons (the row above the results) ---------- */
.fbtn {
  display: inline-flex; align-items: center; gap: var(--s-2); height: 36px; padding: 0 var(--s-3);
  border: var(--line-strong); border-radius: var(--r); background: var(--sheet); color: var(--ink-2);
  font: 400 var(--t-sm)/1 var(--font-text); cursor: pointer; transition: border-color var(--dur-fast), background var(--dur-fast);
}
.fbtn b { font: 500 var(--t-sm)/1 var(--font-mono); color: var(--ink); }
.fbtn .ic { width: 15px; height: 15px; color: var(--ink-3); }
.fbtn:hover { border-color: var(--accent); }
.fbtn[aria-pressed="true"], .fbtn.is-set { border-color: var(--accent); background: var(--accent-soft); color: var(--link); }
.fbtn.is-set b { color: var(--link); }

/* ---------- chips (active filters) ---------- */
.chip {
  display: inline-flex; align-items: center; gap: var(--s-1); height: 28px; padding: 0 var(--s-1) 0 var(--s-3);
  border: var(--line); border-radius: var(--r); background: var(--sheet); font-size: var(--t-sm); color: var(--ink);
}
.chip .ic { width: 15px; height: 15px; }
.chip.cam { background: var(--accent-soft); border-color: transparent; color: var(--link); font-weight: 700; }
.chip button { display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: var(--r-mark); background: none; color: var(--ink-3); cursor: pointer; }
.chip button .ic { width: 14px; height: 14px; stroke-width: 2.2; }
.chip button:hover { background: var(--coral-soft); color: var(--coral-ink); }

/* ---------- segmented choice ---------- */
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: var(--line-strong); border-radius: var(--r); overflow: hidden; background: var(--sheet); }
.seg button { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: 34px; padding: 0 var(--s-2); border: 0; border-left: var(--line); background: none; color: var(--ink-2); font: 400 var(--t-sm)/1.2 var(--font-text); cursor: pointer; }
.seg button:first-child { border-left: 0; }
.seg button .ic { width: 16px; height: 16px; }
.seg button[aria-pressed="true"] { background: var(--accent-soft); color: var(--link); font-weight: 700; }

/* ---------- tags ---------- */
.tag { display: inline-flex; align-items: center; gap: 3px; 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); }
.tag .ic { width: 12px; height: 12px; stroke-width: 2; }
.tag.good { color: var(--good); border-color: color-mix(in srgb, var(--good) 40%, transparent); background: var(--good-soft); }

/* ---------- engraved focal scale ---------- */
.scale { --thumb: 18px; position: relative; padding: 26px 0 38px; }
.scale .pos { left: calc(var(--thumb) / 2 + (100% - var(--thumb)) * var(--p)); }
.scale-strip { position: relative; height: 38px; border-radius: var(--r); background: var(--barrel); box-shadow: inset 0 1px 0 rgb(255 255 255 / 6%), inset 0 -1px 0 rgb(0 0 0 / 40%); cursor: pointer; }
/* the chosen range, lit up on the barrel */
.scale-strip::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--thumb) / 2 + (100% - var(--thumb)) * var(--pa)); right: calc(100% - (var(--thumb) / 2 + (100% - var(--thumb)) * var(--pb))); background: rgb(255 255 255 / 9%); border-top: 2px solid var(--coral); border-bottom: 2px solid var(--coral); opacity: 0; transition: opacity var(--dur); pointer-events: none; }
.scale.is-set .scale-strip::before { opacity: 1; }
.scale-num, .scale-idx { position: absolute; left: calc(var(--thumb) / 2 + (100% - var(--thumb)) * var(--p)); transform: translateX(-50%); }
.scale-num { top: 50%; margin-top: -9px; font: 600 15px/18px var(--font-num); letter-spacing: .02em; color: var(--engrave-dim); transition: color var(--dur); pointer-events: none; }
.scale-num.in { color: var(--engrave); }
/* each end is a handle: a coral index line across the barrel and a grip tab below it */
.scale-idx { top: 0; width: 0; height: 100%; pointer-events: none; }
.scale-idx::before { content: ""; position: absolute; left: -1px; top: 0; width: 2px; height: 100%; background: var(--coral); }
.scale-idx::after { content: ""; position: absolute; left: -8px; top: calc(100% + 2px); width: 16px; height: 18px; border-radius: 0 0 var(--r) var(--r); background: var(--coral) linear-gradient(90deg, transparent 5px, rgb(0 0 0 / 35%) 5px 6px, transparent 6px 9.5px, rgb(0 0 0 / 35%) 9.5px 10.5px, transparent 10.5px) center 4px / 100% 10px no-repeat; box-shadow: var(--lift); transition: transform var(--dur-fast) var(--ease); }
.scale:not(.is-set) .scale-idx::before { background: var(--engrave-dim); }
.scale:not(.is-set) .scale-idx::after { background-color: var(--rule-strong); }
.scale.is-drag .scale-idx::after, .scale.is-focus .scale-idx::after { transform: translateY(2px); }
.scale-in { position: absolute; top: 0; left: 0; width: 100%; height: calc(100% + 22px); margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
.scale-in::-webkit-slider-runnable-track { background: none; height: 100%; }
.scale-in::-webkit-slider-thumb { -webkit-appearance: none; width: var(--thumb); height: 60px; border-radius: var(--r-mark); background: transparent; cursor: grab; pointer-events: auto; }
.scale-in::-moz-range-thumb { width: var(--thumb); height: 60px; border: 0; border-radius: var(--r-mark); background: transparent; cursor: grab; pointer-events: auto; }
.scale-in::-moz-range-track { background: none; }
.scale-in:focus-visible { box-shadow: none; }
.scale-in:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--accent); }
.scale-in:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 2px var(--accent); }
.is-drag .scale-in::-webkit-slider-thumb, .is-drag .scale-strip { cursor: grabbing; }

.scale-dim { position: absolute; top: 0; height: 22px; left: calc(var(--thumb) / 2 + (100% - var(--thumb)) * var(--pa)); right: calc(100% - (var(--thumb) / 2 + (100% - var(--thumb)) * var(--pb))); }
.scale-dim-line { position: absolute; left: 0; right: 0; bottom: 5px; height: 1px; background: var(--draw); }
.scale-dim::before, .scale-dim::after { content: ""; position: absolute; bottom: 0; width: 1px; height: 11px; background: var(--draw); }
.scale-dim::before { left: 0; }
.scale-dim::after { right: 0; }
.scale-dim-text { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); padding: 0 var(--s-1); background: var(--sheet); font: 500 var(--t-sm)/1.2 var(--font-mono); color: var(--ink); white-space: nowrap; }
/* depth-of-field style bracket below: the lens must span all of it */
.scale-dof { position: absolute; bottom: 2px; height: 12px; left: calc(var(--thumb) / 2 + (100% - var(--thumb)) * var(--pa)); right: calc(100% - (var(--thumb) / 2 + (100% - var(--thumb)) * var(--pb))); border: 2.5px solid var(--dof); border-top: 0; border-radius: 0 0 var(--r-mark) var(--r-mark); opacity: 0; transform: translateY(-4px); transition: opacity var(--dur), transform var(--dur) var(--ease); }
.scale.is-covers .scale-dof { opacity: 1; transform: none; }
.scale-ends { display: flex; justify-content: space-between; font: var(--t-xs)/1 var(--font-mono); color: var(--ink-3); margin-top: 2px; }

/* ---------- lens drawing ---------- */
.lens-draw { display: block; max-width: 100%; height: auto; overflow: visible; }
.ld-body { fill: var(--barrel); }
.ld-ring { fill: var(--barrel-2); }
.ld-engrave { fill: var(--engrave); font-family: var(--font-num); font-weight: 600; }
.ld-mount { fill: var(--metal); }
.ld-glass { fill: var(--glass); }
.ld-index { stroke: var(--coral); stroke-width: 1.6; }
.ld-center { stroke: var(--draw); stroke-width: .7; stroke-dasharray: 10 3 2 3; opacity: .55; }
.ld-ext { stroke: var(--draw); stroke-width: .7; opacity: .8; }
.ld-dim { stroke: var(--draw); stroke-width: .9; }
.ld-arrow { fill: var(--draw); }
.ld-dim-text { fill: var(--draw); font-family: var(--font-mono); font-size: 10px; }
.ld-unknown { fill: none; stroke: var(--ink-3); stroke-dasharray: 3 3; }

/* ---------- lens card ---------- */
.lcard { position: relative; display: flex; flex-direction: column; min-width: 0; border: var(--line); border-radius: var(--r); background: var(--sheet); transition: border-color var(--dur), box-shadow var(--dur), transform var(--dur) var(--ease); cursor: pointer; }
.lcard:hover { border-color: var(--rule-strong); box-shadow: var(--float); transform: translateY(-2px); }
.lcard-art { display: flex; align-items: center; min-height: 140px; padding: var(--s-4); border-bottom: var(--line); overflow: hidden; }
.lcard-body { display: grid; gap: var(--s-2); padding: var(--s-4); }
.lcard-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); }
.lcard-model { margin: 0; font: 700 var(--t-md)/1.25 var(--font-text); letter-spacing: -.005em; }
.lcard-key { display: flex; align-items: baseline; gap: var(--s-4); margin: 0; }
.numeral { font: 600 30px/1 var(--font-num); letter-spacing: .01em; color: var(--ink); }
.numeral small { font-size: 15px; color: var(--ink-3); margin-left: 2px; }
.lcard-specs { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; margin: var(--s-1) 0 0; padding-top: var(--s-3); border-top: var(--line); }
.lcard-specs > div { padding: 0 var(--s-2); border-left: var(--line); }
.lcard-specs > div:first-child { padding-left: 0; border-left: 0; }
.lcard-specs > div:last-child { padding-right: 0; }
.lcard-specs dt { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.lcard-specs dd { margin: 3px 0 0; font: 500 var(--t-sm)/1.2 var(--font-mono); white-space: nowrap; }
.lcard-specs dd small { margin-left: 2px; font: 400 10.5px var(--font-text); color: var(--ink-3); }
.lcard-tags { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-top: var(--s-1); }
.lcard-cmp { position: absolute; top: var(--s-3); right: var(--s-3); }

/* =====================================================================================
   Step 2: menus and filter panels, inputs, messages, tables, compare
   ===================================================================================== */

/* ---------- filter panels (open from a filter button; native popover, placed by lfPlace) ---------- */
.pop {
  position: fixed; inset: auto; margin: 0; width: 340px; max-width: calc(100vw - 32px); max-height: min(560px, calc(100vh - 32px)); overflow: auto;
  padding: var(--s-4); border: var(--line-strong); border-radius: var(--r); background: var(--sheet); color: var(--ink); box-shadow: var(--float);
}
.pop::backdrop { background: transparent; }
.pop:popover-open { animation: lf-pop-in var(--dur) var(--ease); }
.pop-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); margin-bottom: var(--s-3); }
.pop-head h3 { margin: 0; font: 700 var(--t-base)/1.2 var(--font-text); }
.pop-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); margin-top: var(--s-4); padding-top: var(--s-3); border-top: var(--line); }
.pop-section { display: grid; gap: var(--s-2); }
.pop-section + .pop-section { margin-top: var(--s-4); }
@keyframes lf-pop-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* choice chips inside panels (aperture, features...) */
.choices { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.choice {
  display: inline-flex; align-items: center; gap: var(--s-1); height: 30px; padding: 0 var(--s-3);
  border: var(--line-strong); border-radius: var(--r); background: var(--sheet); color: var(--ink-2);
  font: 500 var(--t-sm)/1 var(--font-mono); cursor: pointer; transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.choice.text { font-family: var(--font-text); font-weight: 400; }
.choice .ic { width: 15px; height: 15px; }
.choice:hover { border-color: var(--accent); color: var(--link); }
.choice[aria-pressed="true"] { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.choice small { font: 400 var(--t-xs) var(--font-mono); opacity: .75; }

/* side drawer (More filters) */
.drawer {
  position: fixed; inset: 0 0 0 auto; margin: 0; width: min(400px, 100vw); height: 100%; max-height: none; max-width: none;
  padding: 0; border: 0; border-left: var(--line-strong); background: var(--sheet); color: var(--ink); box-shadow: var(--float); display: none; flex-direction: column;
}
.drawer[open] { display: flex; animation: lf-drawer-in var(--dur-slow) var(--ease); }
.drawer::backdrop { background: rgb(5 15 40 / 35%); }
.drawer-head, .drawer-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-4) var(--s-5); }
.drawer-head { border-bottom: var(--line); }
.drawer-head h2 { margin: 0; font: 700 var(--t-lg)/1.2 var(--font-text); }
.drawer-body { flex: 1; overflow: auto; padding: 0 var(--s-5); }
.drawer-foot { border-top: var(--line); }
.acc { border-bottom: var(--line); }
.acc > summary { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-4) 0; list-style: none; cursor: pointer; font-weight: 700; }
.acc > summary::-webkit-details-marker { display: none; }
.acc > summary .ic { color: var(--ink-3); }
.acc > summary .count { margin-left: auto; font: 500 var(--t-xs)/18px var(--font-mono); min-width: 18px; padding: 0 5px; border-radius: var(--r-mark); background: var(--accent); color: var(--on-accent); text-align: center; }
.acc > summary::after { content: ""; width: 7px; height: 7px; margin-left: var(--s-2); border-right: 1.5px solid var(--ink-3); border-bottom: 1.5px solid var(--ink-3); transform: rotate(45deg) translateY(-2px); transition: transform var(--dur-fast); }
.acc:not(:has(.count)) > summary::after { margin-left: auto; }
.acc[open] > summary::after { transform: rotate(225deg) translateY(-1px); }
.acc-body { display: grid; gap: var(--s-2); padding-bottom: var(--s-4); }
@keyframes lf-drawer-in { from { transform: translateX(24px); opacity: .4; } to { transform: none; opacity: 1; } }

/* ---------- inputs ---------- */
.field { display: grid; gap: 6px; }
.field > label, .field-label { font-size: var(--t-sm); font-weight: 700; color: var(--ink); }
.field .help { font-size: var(--t-sm); color: var(--ink-3); }
.input {
  width: 100%; height: 38px; padding: 0 var(--s-3); border: var(--line-strong); border-radius: var(--r); background: var(--sheet); color: var(--ink);
  font: var(--t-base)/1 var(--font-text); transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.input::placeholder { color: var(--ink-3); }
.input:hover { border-color: var(--ink-3); }
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.input.mono { font-family: var(--font-mono); }
.input-wrap { position: relative; display: flex; align-items: center; }
.input-wrap > .ic { position: absolute; left: var(--s-3); color: var(--ink-3); pointer-events: none; }
.input-wrap .input { padding-left: 38px; }
.input-wrap .input-clear { position: absolute; right: 5px; width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border: 0; border-radius: var(--r-mark); background: none; color: var(--ink-3); cursor: pointer; }
.input-wrap .input-clear:hover { background: var(--sheet-sunk); color: var(--ink); }
.input-wrap .input-clear .ic { width: 15px; height: 15px; }
.input-wrap.lg .input { height: 46px; font-size: var(--t-md); }
select.input {
  -webkit-appearance: none; appearance: none; padding-right: 34px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat;
}
.range-pair { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s-2); }
.range-pair span { color: var(--ink-3); font-family: var(--font-mono); }
.input-unit { position: relative; }
.input-unit .input { padding-right: 34px; font-family: var(--font-mono); }
.input-unit::after { content: attr(data-unit); position: absolute; right: var(--s-3); top: 50%; transform: translateY(-50%); font-size: var(--t-sm); color: var(--ink-3); pointer-events: none; }

/* checkbox and switch */
.check { display: flex; align-items: flex-start; gap: var(--s-2); cursor: pointer; font-size: var(--t-base); }
.check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.check .tick { flex: none; width: 18px; height: 18px; margin-top: 1px; display: grid; place-items: center; border: var(--line-strong); border-radius: var(--r-mark); background: var(--sheet); transition: background var(--dur-fast), border-color var(--dur-fast); }
.check .tick .ic { width: 13px; height: 13px; stroke-width: 3; color: var(--on-accent); opacity: 0; }
.check input:checked + .tick { background: var(--accent); border-color: var(--accent); }
.check input:checked + .tick .ic { opacity: 1; }
.check input:focus-visible + .tick { box-shadow: var(--focus); }
.check .n { margin-left: auto; font: var(--t-sm) var(--font-mono); color: var(--ink-3); }
.check.zero { color: var(--ink-3); }
.switch { display: flex; align-items: flex-start; gap: var(--s-3); cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch .track { flex: none; position: relative; width: 36px; height: 20px; margin-top: 1px; border-radius: var(--r-round); background: var(--rule-strong); transition: background var(--dur); }
.switch .track::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); }
.switch input:checked + .track { background: var(--accent); }
.switch input:checked + .track::after { transform: translateX(16px); }
.switch input:focus-visible + .track { box-shadow: var(--focus); }
.switch b { display: block; font-size: var(--t-base); }
.switch b .more { font: 500 var(--t-sm) var(--font-mono); color: var(--link); margin-left: var(--s-1); }
.switch small { display: block; color: var(--ink-2); font-size: var(--t-sm); margin-top: 2px; }

/* camera picker (combobox) */
.combo { position: relative; }
.combo-list {
  position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: var(--s-1); list-style: none;
  border: var(--line-strong); border-radius: var(--r); background: var(--sheet); box-shadow: var(--float); max-height: 300px; overflow: auto;
}
.combo-list li { display: grid; gap: 1px; padding: var(--s-2) var(--s-3); border-radius: var(--r-mark); cursor: pointer; }
.combo-list li b { font-weight: 700; }
.combo-list li small { font: var(--t-xs) var(--font-mono); color: var(--ink-3); }
.combo-list li[aria-selected="true"], .combo-list li:hover { background: var(--accent-soft); }
.combo-list li[aria-selected="true"] b { color: var(--link); }
.combo-list .none { color: var(--ink-3); cursor: default; }
.combo-list mark { background: none; color: inherit; text-decoration: underline 2px var(--coral); text-underline-offset: 2px; }

/* ---------- messages ---------- */
.toast {
  position: fixed; left: 50%; bottom: var(--s-6); z-index: 60; transform: translateX(-50%);
  display: flex; align-items: center; gap: var(--s-4); padding: var(--s-2) var(--s-2) var(--s-2) var(--s-4);
  border-radius: var(--r); background: var(--bar); color: var(--on-bar); box-shadow: var(--float); font-weight: 700;
  animation: lf-toast-in var(--dur-slow) var(--ease);
}
.toast.out { animation: lf-toast-out var(--dur) ease forwards; }
.toast.static { position: static; transform: none; animation: none; display: inline-flex; }
.toast .btn { height: 30px; border-color: color-mix(in srgb, var(--on-bar) 30%, transparent); background: none; color: var(--on-bar); font-size: var(--t-sm); }
.toast .btn:hover { background: color-mix(in srgb, var(--on-bar) 14%, transparent); }
.toast .btn .ic { width: 15px; height: 15px; }
@keyframes lf-toast-in { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes lf-toast-out { to { opacity: 0; transform: translate(-50%, 10px); } }

.notice { display: flex; align-items: flex-start; gap: 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); }
.notice > .ic { color: var(--link); margin-top: 1px; }
.notice p { margin: 0; flex: 1; }
.notice b { display: block; }
.notice .btn { flex: none; }
.notice.good { border-left-color: var(--good); background: var(--good-soft); }
.notice.good > .ic { color: var(--good); }
.notice.warn { border-left-color: var(--warn); background: var(--warn-soft); }
.notice.warn > .ic { color: var(--warn); }
.notice.bad { border-left-color: var(--bad); background: var(--bad-soft); }
.notice.bad > .ic { color: var(--bad); }

.empty { display: grid; justify-items: center; gap: var(--s-2); padding: var(--s-8) var(--s-4); text-align: center; border: 1px dashed var(--rule-strong); border-radius: var(--r); }
.empty > .ic { width: 28px; height: 28px; color: var(--ink-3); }
.empty h3 { margin: 0; font: 700 var(--t-md)/1.3 var(--font-text); }
.empty p { margin: 0; color: var(--ink-2); }
.empty .relax { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); margin-top: var(--s-2); }
.empty .relax .n { font: 500 var(--t-xs) var(--font-mono); color: var(--ink-3); }

.skel { border-radius: var(--r-mark); background: linear-gradient(90deg, var(--sheet-sunk) 25%, color-mix(in srgb, var(--sheet-sunk) 55%, var(--sheet)) 50%, var(--sheet-sunk) 75%); background-size: 200% 100%; animation: lf-skel 1.4s linear infinite; }
@keyframes lf-skel { to { background-position: -200% 0; } }

/* small source button + its popover (where a value comes from) */
.src { display: inline-flex; align-items: center; gap: 2px; height: 20px; margin-left: var(--s-2); 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; vertical-align: 1px; }
.src .ic { width: 12px; height: 12px; }
.src:hover { border-color: var(--accent); color: var(--link); }
.pop.src-pop { width: 300px; padding: var(--s-3) var(--s-4); font-size: var(--t-sm); }
.src-pop p { margin: 0 0 var(--s-2); color: var(--ink-2); }
.src-pop ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s-1); }
.src-pop a { color: var(--link); }

/* ---------- tables ---------- */
.tbl-wrap { overflow: auto; border: var(--line); border-radius: var(--r); background: var(--sheet); }
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--t-sm); }
.tbl th, .tbl td { padding: var(--s-2) var(--s-3); border-bottom: var(--line); text-align: left; white-space: nowrap; }
.tbl thead th { position: sticky; top: 0; z-index: 1; background: var(--sheet-sunk); font-size: var(--t-xs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); }
.tbl th[aria-sort] button { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.tbl th[aria-sort] button .ic { width: 13px; height: 13px; opacity: .3; }
.tbl th[aria-sort="ascending"] button, .tbl th[aria-sort="descending"] button { color: var(--link); }
.tbl th[aria-sort="ascending"] button .ic, .tbl th[aria-sort="descending"] button .ic { opacity: 1; }
.tbl td.num, .tbl th.num { text-align: right; }
.tbl td.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.tbl th.num button { flex-direction: row-reverse; }
.tbl td.num small { font: 400 10.5px var(--font-text); color: var(--ink-3); margin-left: 2px; }
.tbl tbody tr { cursor: pointer; transition: background var(--dur-fast); }
.tbl tbody tr:hover { background: color-mix(in srgb, var(--accent-soft) 55%, transparent); }
.tbl tbody tr[aria-selected="true"] { background: var(--accent-soft); }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl .name { white-space: normal; min-width: 220px; }
.tbl .name .caps { display: block; font-size: 10px; }
.tbl .name b { display: block; font-weight: 700; font-size: var(--t-base); }
.tbl .unknown { color: var(--ink-3); }
.tbl .yes { color: var(--good); font-weight: 700; }

/* spec sheet (lens page) */
.spec-sheet { display: grid; grid-template-columns: max-content 1fr; margin: 0; border-top: var(--line); }
.spec-sheet dt, .spec-sheet dd { margin: 0; padding: var(--s-2) 0; border-bottom: var(--line); }
.spec-sheet dt { padding-right: var(--s-6); color: var(--ink-2); font-size: var(--t-sm); }
.spec-sheet dd { font: 500 var(--t-base)/1.4 var(--font-mono); }
.spec-sheet dd.txt { font-family: var(--font-text); font-weight: 400; }
.spec-sheet dd small { font: 400 var(--t-xs) var(--font-text); color: var(--ink-3); margin-left: 2px; }
.spec-sheet dd .alt { display: block; font: 400 var(--t-xs)/1.4 var(--font-text); color: var(--ink-3); }
.spec-sheet .group { grid-column: 1 / -1; padding: var(--s-4) 0 var(--s-1); border-bottom: 0; font-size: var(--t-xs); font-weight: 700; letter-spacing: var(--caps); text-transform: uppercase; color: var(--link); }

/* ---------- compare ---------- */
.cmp-legend { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin: 0; padding: 0; list-style: none; font-size: var(--t-sm); }
.cmp-legend li { display: flex; align-items: center; gap: var(--s-2); }
.cmp-legend i { width: 18px; height: 0; border-top: 2.5px solid var(--c); }
.cmp-legend li:nth-child(2) i { border-top-style: dashed; }
.cmp-legend li:nth-child(3) i { border-top-style: dotted; border-top-width: 3px; }
.cmp-overlay { padding: var(--s-4); overflow-x: auto; }
.co-body { fill: color-mix(in srgb, var(--c) 7%, transparent); stroke: var(--c); stroke-width: 1.8; }
.co-mount { fill: none; stroke: var(--c); stroke-width: 1.2; }
.co-label { fill: var(--c); font: 500 10px var(--font-mono); }
.co-center { stroke: var(--draw); stroke-width: .7; stroke-dasharray: 10 3 2 3; opacity: .5; }
.co-axis { stroke: var(--rule-strong); stroke-width: 1; }
.co-tick { stroke: var(--rule-strong); }
.co-tick-label { fill: var(--ink-3); font: 10px var(--font-mono); }

.cmp-bars { display: grid; gap: var(--s-4); }
.cmp-bar-row { display: grid; grid-template-columns: 120px 1fr; gap: var(--s-3); align-items: start; }
.cmp-bar-row > span { font-size: var(--t-sm); color: var(--ink-2); padding-top: 2px; }
.cmp-bar-list { display: grid; gap: 6px; }
.cmp-bar { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--s-3); }
.cmp-bar i { display: block; height: 10px; border-radius: 0 var(--r-mark) var(--r-mark) 0; background: var(--c); transform-origin: left; animation: lf-grow var(--dur-slow) var(--ease) both; }
.cmp-bar b { font: 500 var(--t-sm) var(--font-mono); white-space: nowrap; }
.cmp-bar b.best::after { content: "best"; margin-left: var(--s-2); padding: 1px 5px; border-radius: var(--r-mark); background: var(--good-soft); color: var(--good); font: 700 10px var(--font-text); letter-spacing: .04em; text-transform: uppercase; }
@keyframes lf-grow { from { transform: scaleX(0); } to { transform: none; } }

.cmp-tbl td.same { color: var(--ink-3); }
.cmp-tbl td.best { font-weight: 700; color: var(--good); }
.cmp-tbl thead th { text-transform: none; letter-spacing: 0; font-size: var(--t-sm); color: var(--ink); }
.cmp-tbl thead th .sw { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 2px; background: var(--c); vertical-align: 0; }