/* AutoStance. Two modes: planning screens (start, photo list) are light, like a showroom board; the camera is dark so
   the outline reads over any scene. The number plate is the one signature element: it names the car and the shot.
   Type: Barlow Condensed for headings and plates (road-sign vernacular), Barlow for reading. Scale 13 / 15 / 17 / 22 / 30 / 44. */
:root{
  --plate:#ffc933; --plate-ink:#15120a; --plate-blue:#1c3f94;
  --bg:#f6eee2; --surface:#fffaf2; --surface-2:#f0e5d4; --line:#e3d4bf;
  --fg:#2b1e12; --muted:#6b5642;
  --ok:#2a6b37; --warn:#a8441a;
  /* Panels laid over the camera picture: always dark, warm-tinted, so they read over any scene. */
  --ov-bg:rgba(34,24,14,.88); --ov-fg:#fff6e8; --ov-muted:#e0cfb8; --ov-line:rgba(255,236,210,.28);
  --ov-ok:#8fdba0; --ov-warn:#ffb37f;
  --font-display:'Barlow Condensed','Arial Narrow','Helvetica Neue',sans-serif;
  --font-body:'Barlow','Helvetica Neue',Arial,sans-serif;
  --r-lg:20px; --r-md:14px; --r-sm:10px;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font:17px/1.45 var(--font-body);
  padding-top:max(14px,env(safe-area-inset-top,0px));
  padding-bottom:max(12px,env(safe-area-inset-bottom,0px));
  padding-left:max(16px,env(safe-area-inset-left,0px));
  padding-right:max(16px,env(safe-area-inset-right,0px));
  -webkit-tap-highlight-color:transparent;
  -webkit-font-smoothing:antialiased;
}
button{font:inherit;color:inherit}
.app{height:100%}
.screen{height:100%;display:flex;flex-direction:column;gap:16px;min-height:0;max-width:640px;margin-inline:auto}
:focus-visible{outline:3px solid var(--plate-blue);outline-offset:2px}

/* ---------- buttons ---------- */
.btn{
  min-height:48px;border-radius:var(--r-md);border:1.5px solid var(--line);background:var(--surface);
  padding:0 18px;font-weight:600;font-size:16px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  transition:background-color .12s,border-color .12s;
}
.btn:hover{border-color:var(--muted)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--plate);color:var(--plate-ink);border-color:var(--plate);font:700 23px/1 var(--font-display);letter-spacing:.01em;min-height:58px}
.btn.primary:hover{border-color:var(--plate-ink)}
.btn.dark{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.btn.ghost{background:transparent}
.btn.sm{min-height:44px;padding:0 14px;font-size:15px;border-radius:var(--r-sm)}
.btn[disabled]{opacity:.45;cursor:not-allowed}

/* ---------- number plate ---------- */
.plate{
  display:inline-flex;align-items:center;min-width:0;max-width:100%;
  background:var(--plate);color:var(--plate-ink);
  font:700 21px/1 var(--font-display);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
  border-radius:6px;padding:7px 12px 6px 8px;border:2px solid var(--plate-ink);
}
.plate::before{content:"";width:9px;align-self:stretch;margin:-7px 9px -6px -8px;background:var(--plate-blue);border-radius:3px 0 0 3px;flex:none}
.plate span{overflow:hidden;text-overflow:ellipsis}

/* ---------- start ---------- */
#s-start{overflow-y:auto;gap:18px}
.brand{display:flex;align-items:center;gap:10px}
.brand .mark{width:32px;height:32px;color:var(--fg)}
.wordmark{font:700 26px/1 var(--font-display);letter-spacing:.01em}
.intro h1{margin:0 0 8px;font:700 clamp(40px,12vw,56px)/.95 var(--font-display);letter-spacing:-.01em;text-wrap:balance}
.lede{margin:0;color:var(--muted);max-width:34em;text-wrap:pretty}
.hero{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 12px 10px;display:flex;flex-direction:column;gap:4px}
.hero svg{display:block;width:100%;height:auto}
/* The start-screen car is shown like a showroom render: warm paint, tinted glass, dark tyres on light rims. */
.hero .body{fill:url(#paint);stroke:var(--fg);stroke-width:3.5;stroke-linejoin:round}
.hero .line{fill:none;stroke:#fff6e0;stroke-width:3;stroke-linecap:round;opacity:.9}
.hero .glass{fill:#3a2a1c;stroke:var(--fg);stroke-width:2.5;stroke-linejoin:round}
.hero .thin{fill:none;stroke:var(--fg);stroke-width:2.5;stroke-linejoin:round;opacity:.75}
.hero .tyre{fill:#2b1e12;stroke:var(--fg);stroke-width:3}
.hero .rim{fill:#e9dcc6;stroke:#fff6e0;stroke-width:2}
.hero .hub{fill:#8a7660}
.hero .shadow{fill:url(#shade)}
.hero .ground{stroke:var(--fg);stroke-width:2.5;stroke-dasharray:12 9;opacity:.6}
.hero .br{fill:none;stroke:var(--fg);stroke-width:6;stroke-linecap:round}
.hero.unpicked .body{fill:var(--surface-2)}
.hero.unpicked .glass{fill:#e6d9c5}
.hero.unpicked .tyre{fill:#d9cab3}
.hero.unpicked .line{opacity:0}
.hero.unpicked .thin,.hero.unpicked .tyre,.hero.unpicked .body,.hero.unpicked .glass{stroke:#ad9a80}
.hero figcaption{text-align:center;font-size:15px;color:var(--muted)}
.hero figcaption b{color:var(--fg)}

.pick{display:flex;flex-direction:column;gap:12px}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px;display:flex;flex-direction:column;gap:12px}
.find{text-align:center}
.q{display:block;margin:0 0 12px;font:700 22px/1.1 var(--font-display)}
.regrow{display:flex;flex-direction:column;align-items:center;gap:10px}
.regplate{
  position:relative;display:flex;align-items:center;width:260px;max-width:100%;min-height:64px;background:var(--plate);
  border:2px solid var(--plate-ink);border-radius:8px;overflow:hidden;
}
.regplate::before{content:"";align-self:stretch;width:30px;flex:none;background:var(--plate-blue)}
.regplate input{
  flex:1;min-width:0;width:100%;border:0;background:transparent;color:var(--plate-ink);outline:none;
  font:700 34px/1 var(--font-display);letter-spacing:.05em;text-transform:uppercase;text-align:center;padding:6px 4px 4px;
}
.regplate input::placeholder{color:rgba(21,18,10,.36)}
.regplate:focus-within{box-shadow:0 0 0 3px var(--surface),0 0 0 6px var(--plate-blue)}
.find .btn.dark{width:260px;max-width:100%;min-height:52px}
.hint{margin:4px 0 0;font-size:14px;color:var(--muted)}
.regmsg{margin:0;text-align:center;font-size:15px;color:var(--muted)}
.regmsg:empty{display:none}
.regmsg.ok{color:var(--ok);font-weight:600}
.regmsg.bad{color:var(--warn);font-weight:600}
.or{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:14px}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
#manualBtn{width:100%}
#manual{display:flex;flex-direction:column;gap:10px}
.seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.seg button{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  min-height:84px;border-radius:var(--r-md);border:1.5px solid var(--line);background:var(--surface);cursor:pointer;
  font:700 19px/1 var(--font-display);letter-spacing:.01em;padding:8px 6px 10px;
}
.seg button svg{width:100%;max-width:96px;height:auto}
.seg .body{fill:none;stroke:currentColor;stroke-width:16;stroke-linejoin:round}
.seg .thin,.seg .line,.seg .glass,.seg .rim,.seg .hub{display:none}
.seg .tyre{fill:none;stroke:currentColor;stroke-width:16}
.seg button:hover{border-color:var(--muted)}
.seg button[aria-checked="true"]{background:var(--fg);color:var(--plate);border-color:var(--fg)}
.seg button[aria-checked="true"] span{color:var(--bg)}
.blurb{margin:0;color:var(--muted);font-size:15px}
.blurb:empty{display:none}

.car{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.car-k{margin:0;color:var(--muted);font-size:14px;font-weight:600}
.car-name{margin:0;font:700 30px/1.05 var(--font-display);overflow-wrap:anywhere}
.car-shape{margin:0;color:var(--muted);font-size:15px}

.dock{margin-top:auto;padding-top:4px;display:flex;flex-direction:column;gap:8px}
/* Once a car is chosen, Start stays in reach while the seller scrolls. */
#s-start.ready .dock{position:sticky;bottom:0;padding-top:16px;background:linear-gradient(to top,var(--bg) 80%,rgba(246,238,226,0))}
.fine{margin:0;color:var(--muted);font-size:14px;text-align:center}
.banner{margin:0;background:var(--surface);border:1.5px solid var(--warn);border-radius:var(--r-md);padding:10px 14px;font-size:15px}

/* ---------- camera ---------- */
#s-cam{gap:12px}
.top{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px}
.top .plate{justify-self:center}
.top .count{font-variant-numeric:tabular-nums}
/* On narrow phones the shot name needs the room; the back button keeps its accessible name. */
@media (max-width:430px){#typeName{display:none}.top .back{min-width:44px;padding:0;font-size:22px}}
.prog{display:flex;gap:3px}
.prog i{flex:1;height:5px;border-radius:3px;background:var(--surface-2)}
.prog i.done{background:var(--ok)}
.prog i.warn{background:var(--warn)}
.prog i.on{background:var(--plate)}
.vf{
  position:relative;flex:1;min-height:0;border-radius:var(--r-lg);overflow:hidden;background:#17110b;border:1px solid var(--line);
  --g:var(--plate);
}
.vf.locked{--g:var(--ov-ok)}
.vf video,.vf img.rv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vf svg.layer{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.vf .idle{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 100%,#3a2a1a 0%,#120c07 62%)}
.vf .grid line{stroke:rgba(255,255,255,.18);stroke-width:1;vector-effect:non-scaling-stroke}
.guide{--gs:var(--g);filter:drop-shadow(0 0 2px rgba(0,0,0,.85));transition:opacity .15s}
/* Over the camera: one crisp bold silhouette, lighter windows and wheels, everything with rounded ends. */
.guide path,.guide ellipse,.guide rect{stroke-linecap:round;stroke-linejoin:round}
.guide .body{fill:rgba(255,201,51,.05);stroke:var(--gs);stroke-width:3.6}
.guide .line{fill:none;stroke:var(--gs);stroke-width:1.6;opacity:.5}
.guide .glass{fill:rgba(255,201,51,.1);stroke:var(--gs);stroke-width:2.2;opacity:.9}
.guide .thin{fill:none;stroke:var(--gs);stroke-width:2.2;opacity:.8}
.guide .tyre{fill:rgba(0,0,0,.35);stroke:var(--gs);stroke-width:3.6}
.guide .rim{fill:none;stroke:var(--gs);stroke-width:2;opacity:.75}
.guide .hub{fill:var(--gs);opacity:.75}
.guide .plt{stroke:var(--gs);stroke-width:2.6}
.guide .ground{stroke:var(--gs);stroke-width:2;stroke-dasharray:12 9;opacity:.9}
.guide .centre{stroke:var(--gs);stroke-width:1.6;stroke-dasharray:3 9;opacity:.7}
.guide .br{fill:none;stroke:var(--gs);stroke-width:5;stroke-linecap:round}
.guide .dash{fill:rgba(255,201,51,.05);stroke:var(--gs);stroke-width:3;stroke-dasharray:14 9;stroke-linejoin:round}
.guide text{fill:var(--gs);font:600 18px var(--font-body);letter-spacing:.02em}
.vf.reviewing .guide{opacity:.5}
.vf.hideguide .guide{opacity:0}

.chip{
  position:absolute;background:var(--ov-bg);border:1px solid var(--ov-line);border-radius:99px;
  padding:6px 12px;font-size:14px;color:var(--ov-fg);
}
.hud{position:absolute;inset:0;pointer-events:none}
.hud .ref,.hud .hz{position:absolute;left:18%;right:18%;height:0}
.hud .ref{border-top:2px solid rgba(255,255,255,.5);top:50%}
.hud .hz{border-top:3px solid var(--g);top:50%;transform-origin:50% 50%}
.hud .msg{
  position:absolute;bottom:12px;left:50%;transform:translateX(-50%);
  background:var(--ov-bg);border:1.5px solid var(--g);color:var(--g);
  font:600 16px var(--font-body);padding:6px 14px;border-radius:99px;white-space:nowrap;
}
/* In the right place: a soft green edge around the picture, then a 3-2-1 countdown in the middle. */
.vf .glow{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .25s;
  box-shadow:inset 0 0 0 5px var(--ov-ok),inset 0 0 60px 10px rgba(143,219,160,.55)}
.vf.ready .glow{opacity:1}
.countdown{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:120px;height:120px;border-radius:50%;
  display:grid;place-items:center;background:rgba(34,24,14,.55);border:3px solid var(--ov-ok);color:#fff;
  font:700 72px/1 var(--font-display);pointer-events:none}
.hud.nolevel .ref,.hud.nolevel .hz{display:none}
@media (prefers-reduced-motion:reduce){.vf .glow{transition:none}}
.turn{top:10px;left:10px;max-width:calc(100% - 150px)}
.flipbtn{
  position:absolute;top:10px;right:10px;min-height:44px;padding:0 16px;border-radius:99px;border:1px solid var(--ov-line);
  background:var(--ov-bg);color:var(--ov-fg);font:600 15px var(--font-body);cursor:pointer;z-index:2;
}
.flipbtn[aria-pressed="true"]{border-color:var(--plate);color:var(--plate)}
/* "Where to stand" map for interior shots. Tap to shrink it to a small map in the corner. */
.plan{
  position:absolute;top:10px;left:10px;width:min(calc(100% - 20px),340px);padding:10px 12px;border-radius:var(--r-md);
  background:var(--ov-bg);border:1px solid var(--ov-line);color:var(--ov-fg);text-align:left;
  display:flex;flex-direction:column;gap:6px;font:500 15px/1.35 var(--font-body);z-index:2;
}
.plan p{margin:0}
.plan.small{width:130px;padding:6px 8px 4px}
.plan.small .plan-k,.plan.small .plan-lead,.plan.small .plan-acts{display:none}
.plan-k{color:var(--plate);font-weight:600}
.plan-map{display:block;padding:0;border:0;background:none;cursor:pointer;min-height:44px}
.plan-map svg{display:block;width:100%;height:auto}
.plan-acts{display:grid;grid-template-columns:1fr 1.3fr;gap:8px;margin-top:2px}
.plan-acts .btn{background:transparent;color:var(--ov-fg);border-color:var(--ov-line)}
.plan-acts .btn.ok{background:var(--plate);color:var(--plate-ink);border-color:var(--plate);font-weight:700}
.coach .card.help{max-height:calc(100% - 8px);overflow-y:auto;gap:10px}
.help h3{margin:6px 0 0;font:700 21px/1 var(--font-display)}
.help-eg{margin:0;display:flex;flex-direction:column;gap:4px}
.help-eg img{width:100%;border-radius:var(--r-md);aspect-ratio:4/3;object-fit:cover;background:var(--surface-2)}
.help-eg figcaption{font-size:12.5px;color:var(--muted)}
.help-eg a{color:var(--muted)}
.help-steps,.help-blocked{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:6px;color:var(--fg)}
.help-blocked{color:var(--muted)}
.pl-body{fill:rgba(255,246,232,.06);stroke:var(--ov-muted);stroke-width:2.5;stroke-linejoin:round}
.pl-line{fill:none;stroke:var(--ov-muted);stroke-width:1.5;opacity:.7}
.pl-seat{fill:rgba(255,246,232,.08);stroke:var(--ov-muted);stroke-width:1.2;opacity:.8}
.pl-open{fill:none;stroke:var(--ov-fg);stroke-width:4;stroke-linecap:round}
.pl-focus{fill:rgba(255,201,51,.18);stroke:var(--plate);stroke-width:2;stroke-dasharray:5 4;stroke-linejoin:round}
.pl-cone{fill:rgba(255,201,51,.28);stroke:none}
.pl-cam{fill:var(--plate);stroke:var(--plate-ink);stroke-width:2}
.pl-text{fill:var(--ov-muted);font:600 13px var(--font-body)}
.note{
  position:absolute;left:10px;right:10px;bottom:10px;
  background:var(--ov-bg);border:1px solid var(--ov-line);border-radius:var(--r-md);padding:12px 14px;
  font-size:15px;color:var(--ov-fg);
}
.note b{color:var(--plate)}
.flash::after{content:"";position:absolute;inset:0;background:#fff;animation:fl .28s ease-out forwards;pointer-events:none}
@keyframes fl{from{opacity:.85}to{opacity:0}}
@media (prefers-reduced-motion:reduce){.flash::after{animation-duration:.01s}.guide{transition:none}}

.qual{position:absolute;left:10px;right:10px;bottom:10px;pointer-events:none}
.qual .box{background:var(--ov-bg);border:1px solid var(--ov-line);color:var(--ov-fg);border-radius:var(--r-md);padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.qual h3{margin:0;font:700 26px/1 var(--font-display);color:var(--ov-ok)}
.qual h3.bad{color:var(--ov-warn)}
.qual p{margin:0;font-size:15px}
.qual .hint{color:var(--ov-muted);font-size:13px;margin:0}
.qual .chips{display:flex;flex-wrap:wrap;gap:6px}
.qchip{font-size:13px;font-weight:600;padding:3px 10px;border-radius:99px;border:1px solid var(--ov-line)}
.qchip::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;background:var(--ov-ok)}
.qchip.bad{border-color:var(--ov-warn)}
.qchip.bad::before{background:var(--ov-warn)}

.tip{margin:0;font-size:15px;min-height:2.9em;color:var(--muted)}
.tip b{display:block;font-weight:600;font-size:16px;color:var(--fg)}

.controls{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px}
.controls .l{justify-self:start}
.controls .r{justify-self:end}
.shutter{position:relative;width:80px;height:80px;border-radius:50%;border:0;background:transparent;cursor:pointer;padding:0}
.shutter svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.shutter .core{position:absolute;inset:9px;border-radius:50%;background:var(--plate);box-shadow:inset 0 0 0 2px var(--plate-ink);transition:transform .08s}
.shutter:active .core{transform:scale(.9)}
.shutter circle{fill:none;stroke-width:5}
.shutter .track{stroke:var(--line)}
.shutter .prog{stroke:var(--ok);stroke-dasharray:226.2;stroke-dashoffset:226.2;stroke-linecap:round}
.toggle{display:inline-flex;align-items:center;gap:8px;min-height:44px;background:none;border:0;padding:0;cursor:pointer;font-size:15px;font-weight:600;color:var(--muted)}
.toggle i{width:42px;height:24px;border-radius:99px;background:var(--surface-2);border:1px solid var(--line);position:relative;transition:background .15s;flex:none}
.toggle i::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--muted);transition:transform .15s,background .15s}
.toggle[aria-pressed="true"] i{background:var(--plate)}
.toggle[aria-pressed="true"] i::after{transform:translateX(18px);background:var(--plate-ink)}
.toggle[aria-pressed="true"]{color:var(--fg)}
.toggle[disabled]{cursor:not-allowed}
.reviewbar{display:grid;grid-template-columns:1fr 1.7fr;gap:10px}

.coach{position:fixed;inset:0;z-index:30;background:rgba(43,30,18,.55);display:flex;align-items:flex-end;justify-content:center;
  padding:16px max(16px,env(safe-area-inset-right,0px)) calc(16px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.coach .card{background:var(--surface);color:var(--fg);border-radius:24px;padding:22px;max-width:460px;width:100%;display:flex;flex-direction:column;gap:16px}
.coach h2{margin:0;font:700 32px/1 var(--font-display)}
.coach ol{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:14px;counter-reset:s}
.coach li{display:grid;grid-template-columns:30px 1fr;gap:12px;align-items:start;counter-increment:s}
.coach li::before{content:counter(s);width:30px;height:30px;border-radius:50%;background:var(--plate);color:var(--plate-ink);display:grid;place-items:center;font:700 18px var(--font-display)}
.coach li span{color:var(--muted);font-size:15px}

/* ---------- photo list ---------- */
#s-sum{overflow:hidden;gap:12px}
.sumhead{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px}
.sumhead h2{margin:0;font:700 30px/1 var(--font-display);white-space:nowrap}
.sumhead .count{color:var(--muted);font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.meter{height:6px;border-radius:3px;background:var(--surface);overflow:hidden}
.meter i{display:block;height:100%;width:0;background:var(--ok);border-radius:3px;transition:width .3s}
.flag{margin:0;background:var(--surface);border:1.5px solid var(--warn);border-radius:var(--r-md);padding:10px 14px;font-size:15px}
.tiles{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:18px;padding-bottom:6px}
.group h3{margin:0 0 8px;font:700 21px/1 var(--font-display)}
.group .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));grid-auto-rows:max-content;gap:10px}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;display:flex;flex-direction:column;min-width:0}
.tile .ph{aspect-ratio:4/3;background:var(--surface-2);position:relative;display:grid;place-items:center;color:var(--muted);font-size:14px}
.tile .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile.empty .ph{background:repeating-linear-gradient(135deg,var(--surface-2) 0 10px,#f5ecdf 10px 20px)}
.tile .meta{padding:10px;display:flex;flex-direction:column;gap:4px}
.tile .nm{font-weight:600;font-size:16px}
.tile .st{font-size:14px;color:var(--ok);font-weight:600}
.tile .st.bad{color:var(--warn)}
.tile .acts{display:flex;gap:6px;margin-top:4px}
.tile .acts .btn{flex:1;min-height:44px;padding:0 8px;font-size:15px;border-radius:var(--r-sm)}
.sumacts{display:flex;flex-direction:column;gap:8px}
.left{margin:0;text-align:center;font-weight:600;color:var(--muted)}

.ph-view{position:absolute;inset:0;padding:0;border:0;background:none;cursor:zoom-in}
.viewer{position:fixed;inset:0;z-index:35;background:#120c07;display:flex;flex-direction:column;
  padding:max(12px,env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) max(12px,env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px))}
.viewer img{flex:1;min-height:0;width:100%;object-fit:contain}
.viewer-bar{display:flex;flex-direction:column;gap:6px;padding-top:10px;color:var(--ov-fg)}
.viewer-bar p{margin:0}
#viewName{font:700 26px/1 var(--font-display)}
.viewer-st{color:var(--ov-ok);font-size:15px}
.viewer-st.bad{color:var(--ov-warn)}
.viewer-acts{display:grid;grid-template-columns:1fr 1.4fr;gap:10px;margin-top:4px}
.sheet-p{margin:0;color:var(--muted)}
.toast{
  position:fixed;left:50%;transform:translateX(-50%);bottom:calc(16px + env(safe-area-inset-bottom,0px));
  background:var(--fg);color:var(--bg);padding:10px 18px;border-radius:99px;font-weight:600;font-size:15px;z-index:40;
  opacity:0;pointer-events:none;transition:opacity .2s;max-width:90vw;text-align:center
}
.toast.show{opacity:1}

/* ---------- wide screens ---------- */
@media (min-width:720px){
  #s-start{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto 1fr auto;align-content:start;gap:18px 28px;max-width:960px}
  #s-start .brand,#s-start .intro{grid-column:1/-1}
  #s-start .hero{grid-column:1;grid-row:3;align-self:start}
  #s-start .pick{grid-column:2;grid-row:3}
  #s-start .dock{grid-column:1/-1;grid-row:4}
}

/* ---------- phone on its side ---------- */
@media (orientation:landscape) and (max-height:520px){
  #s-cam{display:grid;grid-template-columns:minmax(0,1fr) 240px;grid-template-rows:auto auto minmax(0,1fr) auto;gap:8px 12px;max-width:none}
  #s-cam .vf{grid-column:1;grid-row:1/-1}
  #s-cam .top{grid-column:2;grid-row:1;grid-template-columns:auto 1fr;}
  #s-cam .top .plate{grid-column:1/-1;grid-row:1;justify-self:start}
  #s-cam .prog{grid-column:2;grid-row:2}
  #s-cam .tip{grid-column:2;grid-row:3;min-height:0;font-size:14px;overflow-y:auto}
  #s-cam .controls{grid-column:2;grid-row:4;grid-template-columns:1fr 1fr}
  #s-cam .controls .shutter{grid-column:1/-1;grid-row:1;justify-self:center}
  #s-cam .controls .l{grid-row:2}
  #s-cam .controls .r{grid-row:2}
  #s-cam .reviewbar{grid-column:2;grid-row:4}
  #s-start{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto 1fr auto;align-content:start;gap:12px 24px;max-width:none}
  #s-start .intro h1{font-size:38px}
  #s-start .brand,#s-start .intro,#s-start .hero{grid-column:1}
  #s-start .pick{grid-column:2;grid-row:1/4}
  #s-start .dock{grid-column:2;grid-row:4;margin-top:0}
}
/* Help sheet: numbered circles for the steps (as in the first-run guide), plain bullets for the fixes. */
.help .help-steps{padding-left:0;counter-reset:s}
.help .help-blocked li{display:list-item}
.help .help-blocked li::before{content:none}