/* Focus Score — component CSS. Plain classes, no framework. Requires tokens.css. */

/* ---------- Button ---------- */
.fs-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--hit-min);padding:0 16px;font-family:var(--font-display);font-size:14px;font-weight:600;letter-spacing:-.01em;line-height:1.2;text-align:center;border:1px solid var(--accent);border-radius:var(--radius-2);background:var(--accent);color:var(--text-on-accent);cursor:pointer;transition:background var(--dur-tap) var(--ease-instrument),border-color var(--dur-tap) var(--ease-instrument)}
.fs-btn:active{background:var(--accent-press);border-color:var(--accent-press)}
.fs-btn--secondary{background:var(--surface-raised);color:var(--text);border-color:var(--line-strong)}
.fs-btn--secondary:active{background:var(--surface)}
.fs-btn--ghost{background:transparent;color:var(--text-dim);border-color:var(--line-strong)}
.fs-btn--ghost:active{background:var(--accent-wash)}
.fs-btn--danger{background:transparent;color:var(--status-bad);border-color:var(--status-bad)}
.fs-btn--lg{min-height:var(--hit-comfortable);padding:0 20px;font-size:16px}
.fs-btn--block{width:100%}
.fs-btn[disabled],.fs-btn.is-disabled{opacity:.38;pointer-events:none}

/* ---------- IconButton ---------- */
.fs-iconbtn{width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:var(--radius-pill);background:var(--surface-glass);border:1px solid rgba(245,246,247,.14);backdrop-filter:blur(8px);color:var(--text);cursor:pointer;transition:background var(--dur-tap) var(--ease-instrument),color var(--dur-tap) var(--ease-instrument)}
.fs-iconbtn svg{width:20px;height:20px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.fs-iconbtn--solid{background:var(--surface-raised);border-color:var(--line-strong);backdrop-filter:none}
.fs-iconbtn--bare{background:transparent;border-color:transparent;backdrop-filter:none}
.fs-iconbtn.is-active{background:var(--accent);border-color:var(--accent);color:var(--text-on-accent)}

/* ---------- Chip ---------- */
.fs-chipgroup{display:flex;flex-direction:column;gap:8px}
.fs-chipgroup__label,.fs-label{font-size:var(--size-caption);font-weight:600;letter-spacing:var(--track-engrave);text-transform:uppercase;color:var(--text-faint)}
.fs-chipgroup__row{display:flex;flex-wrap:wrap;gap:8px}
.fs-chip{min-height:var(--hit-min);padding:0 16px;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;font-family:var(--font-display);font-size:14px;font-weight:500;letter-spacing:-.01em;border:1px solid var(--line-strong);border-radius:var(--radius-pill);background:transparent;color:var(--text-dim);cursor:pointer;transition:all var(--dur-fast) var(--ease-instrument)}
.fs-chip[aria-pressed="true"],.fs-chip.is-selected{background:var(--accent);border-color:var(--accent);color:var(--text-on-accent);font-weight:600}
.fs-chip[disabled]{opacity:.38;pointer-events:none}

/* ---------- Badge (AF-L, MACRO, HOLD) ---------- */
.fs-badge{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;min-height:26px;padding:0 8px;border:1px solid var(--line-strong);border-radius:var(--radius-1);background:var(--surface-glass);color:var(--text-faint);font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:.06em;transition:all var(--dur-fast) var(--ease-instrument)}
button.fs-badge{min-height:var(--hit-min);padding:0 14px;cursor:pointer}
.fs-badge.is-on{border-color:var(--status-warn);color:var(--status-warn);background:transparent}   /* mode engaged */
.fs-badge--good{border-color:var(--status-good);color:var(--status-good);background:transparent}   /* a correct reading only */
.fs-badge--neutral{border-color:var(--text);color:var(--text);background:transparent}

/* ---------- StatusPill ---------- */
.fs-status{display:inline-flex;align-items:center;gap:9px;padding:8px 16px;border-radius:var(--radius-pill);background:var(--surface-glass);border:1px solid var(--line-strong);color:var(--text);font-family:var(--font-display);font-size:15px;font-weight:600;letter-spacing:-.01em}
.fs-status__dot{width:9px;height:9px;border-radius:50%;background:currentColor;flex:none}
.fs-status__glyph{font-size:14px;line-height:1;flex:none}   /* ▲ or ▼ INSTEAD of the dot — never both */
.fs-status--good{color:var(--status-good);border-color:var(--status-good)}
.fs-status--warn{color:var(--status-warn);border-color:var(--status-warn)}
.fs-status--bad{color:var(--status-bad);border-color:var(--status-bad)}
.fs-status--glow .fs-status__dot{box-shadow:var(--focus-dot-glow)}

/* ---------- ListRow ---------- */
.fs-row{display:flex;align-items:center;gap:14px;width:100%;min-height:var(--hit-comfortable);padding:11px 0;background:transparent;border:0;border-bottom:1px solid var(--line-hair);text-align:left;color:inherit;cursor:pointer}
.fs-row:last-child,.fs-row--last{border-bottom:0}
.fs-row__index{width:20px;flex:none;font-family:var(--font-mono);font-size:12px;font-variant-numeric:tabular-nums;color:var(--text-disabled)}
.fs-row__text{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.fs-row__title{font-family:var(--font-display);font-size:17px;font-weight:600;letter-spacing:-.01em;color:var(--text);text-wrap:pretty}
.fs-row__desc{font-size:var(--size-small);line-height:1.3;color:var(--text-dim);text-wrap:pretty}
.fs-row__value{font-family:var(--font-mono);font-size:13px;color:var(--text-dim);flex:none}
.fs-chevron{width:8px;height:8px;flex:none;transform:rotate(45deg);border-right:1.5px solid var(--text-faint);border-top:1.5px solid var(--text-faint)}

/* ---------- Toggle ---------- */
.fs-toggle{width:52px;height:30px;flex:none;padding:3px;display:flex;align-items:center;justify-content:flex-start;border:1px solid var(--line-strong);border-radius:var(--radius-pill);background:transparent;cursor:pointer;transition:all var(--dur-fast) var(--ease-instrument)}
.fs-toggle__knob{width:22px;height:22px;border-radius:50%;background:var(--grey-500);transition:all var(--dur-fast) var(--ease-instrument)}
.fs-toggle[aria-checked="true"]{justify-content:flex-end;background:var(--accent);border-color:var(--accent)}
.fs-toggle[aria-checked="true"] .fs-toggle__knob{background:var(--text-on-accent)}

/* ---------- DialWheel (ISO / aperture / shutter) ---------- */
.fs-dial{width:var(--dial-w)}
.fs-dial__label{display:block;text-align:center;margin-bottom:6px;font-size:var(--size-caption);font-weight:600;letter-spacing:var(--track-engrave);text-transform:uppercase;color:var(--text-faint)}
.fs-dial__window{position:relative;height:var(--dial-h);overflow:hidden;border:1px solid var(--line);border-radius:var(--radius-2);background:var(--surface)}
.fs-dial__list{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.fs-dial__item{height:30px;width:100%;border:0;background:transparent;cursor:pointer;font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:13px;font-weight:500;color:var(--text-faint);opacity:.55}
.fs-dial__item.is-near{font-size:15px;color:var(--text-dim);opacity:1}
.fs-dial__item.is-selected{font-size:21px;font-weight:700;color:var(--text);opacity:1}
.fs-dial__rails{position:absolute;left:0;right:0;top:calc(50% - 17px);height:34px;border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong);pointer-events:none}
.fs-dial__fade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,var(--surface),transparent 32%,transparent 68%,var(--surface))}

/* ---------- EVScale (match needle, −2…+2 EV) ---------- */
.fs-ev__head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.fs-ev__value{font-family:var(--font-mono);font-weight:700;font-size:var(--size-readout);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--text)}
.fs-ev.is-good .fs-ev__value{color:var(--status-good)}
.fs-ev.is-near .fs-ev__value{color:var(--status-warn)}
.fs-ev.is-off .fs-ev__value{color:var(--status-bad)}
.fs-ev__track{position:relative;height:48px}
.fs-ev__line{position:absolute;left:0;right:0;top:26px;height:1px;background:var(--line-strong)}
.fs-ev__tick{position:absolute;top:19px;width:1px;height:8px;background:var(--tick)}
.fs-ev__tick.is-major{top:14px;height:13px;background:var(--tick-major)}
.fs-ev__zero{position:absolute;left:50%;top:4px;width:1px;height:33px;background:var(--text-faint)}
.fs-ev__needle{position:absolute;left:var(--pos,50%);top:0;width:3px;height:40px;border-radius:2px;background:var(--text);transform:translateX(-1.5px);transition:left var(--dur-needle) var(--ease-instrument),background var(--dur-needle) linear}
.fs-ev.is-good .fs-ev__needle{background:var(--status-good);box-shadow:0 0 14px rgba(46,232,111,.55)}
.fs-ev.is-near .fs-ev__needle{background:var(--status-warn)}
.fs-ev.is-off .fs-ev__needle{background:var(--status-bad)}
.fs-ev__labels{position:absolute;left:0;right:0;top:36px;display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:11px;color:var(--text-faint);font-variant-numeric:tabular-nums}

/* ---------- FocusReticle — ALWAYS EMPTY, movable ---------- */
.fs-reticle{position:absolute;left:var(--x,50%);top:var(--y,46%);width:var(--reticle-size);height:var(--reticle-size);transform:translate(-50%,-50%);pointer-events:none;transition:left var(--dur-fast) var(--ease-instrument),top var(--dur-fast) var(--ease-instrument)}
.fs-reticle.is-moving{transition:none}
.fs-reticle__ring{position:absolute;inset:0;border-radius:50%;border:var(--reticle-stroke) solid rgba(245,246,247,.85);box-shadow:0 0 0 1px rgba(0,0,0,.4);transition:border-color var(--dur-lock) var(--ease-instrument),box-shadow var(--dur-lock) var(--ease-instrument)}
.fs-reticle.is-locked .fs-reticle__ring{border-color:var(--status-good);box-shadow:0 0 0 1px rgba(0,0,0,.4),0 0 22px rgba(46,232,111,.35)}
.fs-reticle__tick{position:absolute;background:rgba(245,246,247,.85)}
.fs-reticle.is-locked .fs-reticle__tick{background:var(--status-good)}
.fs-reticle__tick--n{left:50%;top:-12px;width:1px;height:9px;transform:translateX(-.5px)}
.fs-reticle__tick--s{left:50%;bottom:-12px;width:1px;height:9px;transform:translateX(-.5px)}
.fs-reticle__tick--w{top:50%;left:-12px;height:1px;width:9px;transform:translateY(-.5px)}
.fs-reticle__tick--e{top:50%;right:-12px;height:1px;width:9px;transform:translateY(-.5px)}
.fs-reticle__hint{position:absolute;left:50%;bottom:-30px;transform:translateX(-50%);white-space:nowrap;font-size:var(--size-caption);font-weight:600;letter-spacing:var(--track-engrave);text-transform:uppercase;color:rgba(245,246,247,.75);text-shadow:0 1px 8px rgba(0,0,0,.85)}

/* ---------- ScoreReadout ---------- */
.fs-score{text-align:center}
.fs-score__line{display:flex;align-items:baseline;justify-content:center;gap:6px}
.fs-score__value{font-family:var(--font-mono);font-weight:700;font-size:var(--size-score);line-height:var(--lh-score);letter-spacing:-.04em;color:var(--text);font-variant-numeric:tabular-nums lining-nums;text-shadow:0 2px 20px rgba(0,0,0,.75)}
.fs-score__outof{font-family:var(--font-mono);font-weight:500;font-size:18px;color:var(--text-dim);text-shadow:0 1px 10px rgba(0,0,0,.8)}
.fs-score__caption{margin-top:2px;font-size:var(--size-caption);font-weight:600;letter-spacing:var(--track-engrave);text-transform:uppercase;color:var(--text-dim);text-shadow:0 1px 8px rgba(0,0,0,.8)}

/* ---------- Supporting parts used by the screens ---------- */
.fs-alert{display:flex;gap:11px;align-items:flex-start;padding:12px 14px;border-radius:var(--radius-2);background:var(--accent-wash)}
.fs-alert__dot{width:8px;height:8px;border-radius:50%;background:var(--text);margin-top:6px;flex:none}
.fs-alert__title{display:block;font-size:14px;font-weight:600;letter-spacing:-.01em;color:var(--text)}
.fs-alert__detail{display:block;margin-top:3px;font-size:var(--size-small);line-height:1.35;color:var(--text-dim);text-wrap:pretty}
.fs-alert--warn{background:var(--status-warn-wash)}.fs-alert--warn .fs-alert__dot{background:var(--status-warn)}.fs-alert--warn .fs-alert__title{color:var(--status-warn)}
.fs-alert--bad{background:var(--status-bad-wash)}.fs-alert--bad .fs-alert__dot{background:var(--status-bad)}.fs-alert--bad .fs-alert__title{color:var(--status-bad)}
.fs-alert--good{background:var(--status-good-wash)}.fs-alert--good .fs-alert__dot{background:var(--status-good)}.fs-alert--good .fs-alert__title{color:var(--status-good)}

.fs-header{display:flex;align-items:center;gap:12px;min-height:var(--hit-comfortable);padding:4px var(--gutter);border-bottom:1px solid var(--line-hair);flex:none}
.fs-header__title{margin:0;font-size:var(--size-title);font-weight:700;letter-spacing:var(--track-tight);line-height:1.15;color:var(--text)}
.fs-header__caption{margin-top:2px;font-family:var(--font-mono);font-size:12px;color:var(--text-dim);font-variant-numeric:tabular-nums}

.fs-search{display:flex;align-items:center;gap:10px;min-height:var(--hit-comfortable);padding:0 14px;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius-2)}
.fs-search input{flex:1;min-width:0;background:transparent;border:0;outline:none;color:var(--text);font-family:var(--font-body);font-size:16px}

.fs-readout{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--line-hair)}
.fs-readout__label{font-size:var(--size-small);color:var(--text-dim)}
.fs-readout__value{font-family:var(--font-mono);font-weight:700;font-size:28px;letter-spacing:-.03em;color:var(--text);font-variant-numeric:tabular-nums}
.fs-readout--lead .fs-readout__value{font-size:var(--size-readout)}
.fs-readout__unit{font-family:var(--font-mono);font-size:13px;color:var(--text-faint);margin-left:4px}

.fs-sheet__scrim{position:absolute;inset:0;background:var(--scrim)}
.fs-sheet{position:absolute;left:0;right:0;bottom:0;background:var(--surface-sheet);border-top:1px solid var(--line);border-radius:var(--radius-sheet) var(--radius-sheet) 0 0;box-shadow:var(--shadow-sheet);padding:10px var(--gutter) var(--safe-bottom);animation:fs-sheet-in var(--dur-sheet) var(--ease-out)}
.fs-sheet__grip{width:38px;height:4px;border-radius:2px;background:var(--line-strong);margin:0 auto 16px}
@keyframes fs-sheet-in{from{transform:translateY(100%)}to{transform:translateY(0)}}

.fs-slider{display:flex;flex-direction:column;gap:6px}
.fs-slider__head{display:flex;justify-content:space-between;align-items:baseline}
.fs-slider input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:44px;background:transparent}
.fs-slider input[type=range]::-webkit-slider-runnable-track{height:2px;background:rgba(245,246,247,.35)}
.fs-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:var(--accent);border:2px solid rgba(0,0,0,.5);margin-top:-12px}
.fs-slider input[type=range]::-moz-range-track{height:2px;background:rgba(245,246,247,.35)}
.fs-slider input[type=range]::-moz-range-thumb{width:26px;height:26px;border:2px solid rgba(0,0,0,.5);border-radius:50%;background:var(--accent)}

.fs-collapsible{border-bottom:1px solid var(--line-hair)}
.fs-collapsible__head{display:flex;align-items:center;gap:12px;width:100%;min-height:var(--hit-comfortable);padding:11px 0;background:transparent;border:0;cursor:pointer;text-align:left;color:inherit}
.fs-collapsible__body{padding-bottom:16px;font-size:var(--size-body);line-height:var(--lh-body);color:var(--text-dim);text-wrap:pretty}
.fs-collapsible__caret{width:9px;height:9px;flex:none;margin-top:-4px;border-right:1.5px solid var(--text-faint);border-bottom:1.5px solid var(--text-faint);transform:rotate(45deg);transition:transform var(--dur-fast) var(--ease-instrument)}
.fs-collapsible[open] .fs-collapsible__caret,.fs-collapsible.is-open .fs-collapsible__caret{margin-top:4px;transform:rotate(-135deg)}