/* Focus Score — screen layouts. Requires tokens.css + components.css. */

/* ---------- phone shell ---------- */
.fs-phone{width:var(--screen-w);height:var(--screen-h);position:relative;display:flex;flex-direction:column;overflow:hidden;background:var(--bg);color:var(--text);font-family:var(--font-body)}
@media (display-mode:standalone){.fs-phone{width:100%;height:100dvh}}
.fs-statusbar{height:44px;flex:none;display:flex;align-items:flex-end;justify-content:space-between;padding:0 22px 6px;font-family:var(--font-mono);font-size:12px;color:var(--text-dim);font-variant-numeric:tabular-nums;position:relative;z-index:5}
.fs-scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden}
.fs-scroll::-webkit-scrollbar{width:0}
.fs-pad{padding:0 var(--gutter)}
.fs-stack{display:flex;flex-direction:column;gap:16px}
.fs-bottombar{flex:none;display:flex;gap:10px;padding:10px var(--gutter) var(--safe-bottom);border-top:1px solid var(--line-hair);background:var(--bg)}
.fs-bottombar>.fs-btn{flex:1}

/* ---------- live camera view ---------- */
.fs-view{position:absolute;inset:0;overflow:hidden;background:var(--bg-sunk);touch-action:none}
.fs-view video,.fs-view canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fs-view__vignette{position:absolute;inset:0;background:var(--vignette);pointer-events:none}
.fs-view__grain{position:absolute;inset:0;background-image:var(--texture-grain);opacity:.07;mix-blend-mode:overlay;pointer-events:none}
.fs-protect-bottom{background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.88) 34%)}
.fs-protect-fade{position:absolute;left:0;right:0;bottom:0;height:64px;background:linear-gradient(180deg,transparent,var(--bg));pointer-events:none}

/* ---------- main menu ---------- */
.fs-menu__brand{margin:0;padding-top:18px;display:flex;align-items:center;gap:10px;font-size:var(--size-display);line-height:var(--lh-display);font-weight:700;letter-spacing:var(--track-tight)}
.fs-menu__dot{width:10px;height:10px;flex:none;border-radius:50%;background:var(--status-good);box-shadow:var(--focus-dot-glow)}
.fs-menu__tagline{margin:10px 0 0;font-size:var(--size-small);line-height:1.4;color:var(--text-dim);text-wrap:pretty}
.fs-gearline{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:var(--hit-min);margin-top:16px;padding:8px 0;background:transparent;border:0;border-bottom:1px solid var(--line-hair);font-family:var(--font-mono);font-size:13px;color:var(--text-dim);cursor:pointer;text-align:left}
.fs-menu__list{display:flex;flex-direction:column;padding-top:4px}
.fs-menu__foot{padding:14px 0 var(--safe-bottom);display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:11px;color:var(--text-faint)}

/* ---------- Focus Score screen (layered over the camera view) ---------- */
.fs-focus__corner-tl{position:absolute;left:16px;top:52px}
.fs-focus__corner-tr{position:absolute;right:16px;top:52px;display:flex;gap:10px}
.fs-focus__corner-tr2{position:absolute;right:16px;top:106px}
.fs-focus__score{position:absolute;left:0;right:0;top:118px;display:grid;place-items:center;pointer-events:none}  /* ALWAYS outside the circle */
.fs-focus__status{position:absolute;left:0;right:0;top:calc(46% + 118px);display:flex;justify-content:center;pointer-events:none}
.fs-focus__travel{position:absolute;left:var(--gutter);right:var(--gutter);bottom:172px}
.fs-focus__badges{position:absolute;left:var(--gutter);bottom:98px;display:flex;gap:8px}
.fs-shutter{position:absolute;left:50%;bottom:92px;transform:translateX(-50%);width:64px;height:64px;padding:0;display:grid;place-items:center;border-radius:50%;border:2px solid rgba(245,246,247,.6);background:rgba(0,0,0,.35);cursor:pointer}
.fs-shutter__inner{width:48px;height:48px;border-radius:50%;background:var(--text);opacity:.95}
.fs-expstrip{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px var(--gutter) var(--safe-bottom)}
.fs-expstrip__values{display:flex;gap:16px;min-height:var(--hit-min);align-items:center;background:transparent;border:0;padding:0;cursor:pointer;text-align:left}
.fs-expstrip__label{font-size:11px;font-weight:600;letter-spacing:var(--track-engrave);text-transform:uppercase;color:var(--text-dim)}
.fs-expstrip__value{margin-top:1px;font-family:var(--font-mono);font-weight:600;font-size:16px;color:var(--text);font-variant-numeric:tabular-nums}

/* ---------- Light Meter ---------- */
.fs-meter__view{position:absolute;left:0;right:0;top:0;height:268px;overflow:hidden}
.fs-meter__badges{position:absolute;left:var(--gutter);top:108px;display:flex;gap:8px}
.fs-meter__body{position:absolute;left:0;right:0;top:268px;bottom:0;display:flex;flex-direction:column}
.fs-meter__dials{display:flex;gap:9px;justify-content:space-between}
.fs-meter__modes{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.fs-meter__modes .fs-btn{margin-left:auto}
.fs-spotlist{display:flex;gap:6px;flex-wrap:wrap}
.fs-contrast{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding-top:4px;border-top:1px solid var(--line-hair)}
.fs-contrast__label{font-size:var(--size-small);color:var(--text-dim)}
.fs-contrast__value{font-family:var(--font-mono);font-weight:700;font-size:20px;color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap}
.fs-contrast.is-wide .fs-contrast__value{color:var(--status-warn)}

/* ---------- list / form screens (Film Log, Choose Gear, Settings, Help) ---------- */
.fs-section{display:flex;flex-direction:column;gap:8px}
.fs-section__title{margin:0;font-size:var(--size-caption);font-weight:600;letter-spacing:var(--track-engrave);text-transform:uppercase;color:var(--text-faint)}
.fs-steps{display:flex;align-items:center;gap:6px}
.fs-steps__step{flex:1;height:30px;padding:0;display:flex;flex-direction:column;gap:6px;justify-content:center;background:transparent;border:0;cursor:pointer}
.fs-steps__bar{height:3px;border-radius:2px;background:var(--line-strong)}
.fs-steps__label{font-size:11px;font-weight:500;color:var(--text-faint);text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fs-steps__step.is-done .fs-steps__bar{background:var(--text-faint)}
.fs-steps__step.is-done .fs-steps__label{color:var(--text-dim)}
.fs-steps__step.is-current .fs-steps__bar{background:var(--accent)}
.fs-steps__step.is-current .fs-steps__label{color:var(--text);font-weight:600}
.fs-dofband{position:relative;height:46px;background:var(--surface);border-radius:var(--radius-2);overflow:hidden}
.fs-dofband__zone{position:absolute;top:0;bottom:0;left:var(--near,20%);right:var(--far,30%);background:var(--status-good-wash);border-left:2px solid var(--status-good);border-right:2px solid var(--status-good)}