/* Colours and sizes from plan/index.html (.phone mockups). One screen, no scrolling. */
:root{
  --phone-bg:#fffdf8; --phone-fg:#17201b; --phone-muted:#55605a; --phone-line:#d6d9d0;
  --accent:#0f7a4d;
  --heb:"Heebo",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--phone-bg)}
body{color:var(--phone-fg);font-family:var(--heb);font-size:20px;line-height:1.4;-webkit-text-size-adjust:100%}
#app{height:100vh;height:100dvh;max-width:560px;margin:0 auto;display:flex;flex-direction:column;
  padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) 0 env(safe-area-inset-left,0px)}

.top{display:flex;justify-content:space-between;align-items:center;margin:10px 18px 0}
.prog-t{font-size:16px;color:var(--phone-muted);font-weight:500}
.back{font:inherit;font-size:18px;font-weight:500;color:var(--phone-muted);background:none;border:0;
  padding:8px 0 8px 4px;min-height:44px;cursor:pointer}
.prog{margin:4px 18px 0;height:10px;background:#e4e7df;border-radius:999px;overflow:hidden;flex:none}
.prog i{display:block;height:100%;background:var(--accent);border-radius:999px}

.body{padding:12px 18px 0;display:flex;flex-direction:column;gap:12px;flex:1;min-height:0;overflow-y:auto}
.q{font-size:24px;font-weight:700;line-height:1.3;margin:0}
.note{font-size:17px;color:var(--phone-muted);line-height:1.4;margin:0}
.lead{font-size:20px;line-height:1.4;margin:0}
.hello{font-size:40px;font-weight:800;line-height:1.1;margin:18px 0 0}
.bad{font-size:22px;font-weight:500;margin:40px 24px;line-height:1.4}

/* Photos take whatever height is left; each keeps its aspect ratio (contain) so rings land right. */
.photos{flex:1 1 0;min-height:80px;display:grid;gap:6px}
.photos.pics{grid-template-columns:1fr 1fr;grid-template-rows:repeat(2,minmax(0,1fr))}
.photos.two{grid-template-rows:minmax(0,1fr)}
.cell{position:relative;min-width:0;min-height:0;cursor:zoom-in}
.cell img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.ring{position:absolute;border:4px solid #ffd400;border-radius:50%;pointer-events:none;
  box-shadow:0 0 0 2px rgba(0,0,0,.75),inset 0 0 0 2px rgba(0,0,0,.75)}

.opts{display:grid;gap:8px;margin-top:auto;padding-bottom:max(16px,env(safe-area-inset-bottom,0px));flex:none}
.btn{display:block;width:100%;min-height:58px;padding:6px 14px;border-radius:14px;border:2px solid var(--accent);
  background:#fff;color:var(--phone-fg);font:inherit;font-size:21px;font-weight:600;text-align:center;line-height:1.2;
  cursor:pointer;-webkit-tap-highlight-color:transparent}
.btn.primary{background:var(--accent);color:#fff;border-color:var(--accent);font-size:24px;min-height:68px}
.btn.quiet{border-color:#b9bfb5;color:#3b433e;background:#f1f3ee;font-weight:500}
.btn small{display:block;font-size:15px;font-weight:400;color:inherit;opacity:.85}
.btn.on{background:#e3f1e8}
.btn:disabled{opacity:.6}
.ltr{direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums}
.err{font-size:18px;font-weight:500;color:#9a3412;margin:0;text-align:center}

/* Short screens: tighter gaps, same button sizes. */
@media (max-height:720px){.body{gap:8px}.opts{gap:6px}.top{margin-top:4px}}

/* Full-screen photo: pinch to zoom, one tap closes. */
.zoom{position:fixed;inset:0;background:#000;z-index:10;touch-action:none;overflow:hidden}
.zoom .cell{position:absolute;inset:0;cursor:zoom-out;transform-origin:50% 50%}