/* ============================================================
   TOKENS — the entire palette lives here and nowhere else.

   Blue, from the redesign (Tim's call, 13 August). Replaces Eleanor's
   paper-and-brown scheme: the paper stock and the warm palette are gone, so
   the whole app restyles from this block alone. The old brand values are kept
   below, commented, because they were chosen deliberately and may return.
     --brand-ochre:#A66D03  --brand-rust:#A6550F  --brand-darkbrown:#59381C
     --brand-tan:#D9C6BF    --brand-paper:#FFFBEF
   ============================================================ */
:root{
  --blue:#17789B;          /* the one accent — actions, links, focus */
  --blue-press:#0F5C79;
  --blue-wash:#E4F0F5;     /* quiet panels that still read as "ours" */

  --bg:#F2F5F7;            /* a grey with a blue bias, not a neutral one */
  --surface:#FFFFFF;
  --surface-2:#EDF2F5;
  --line:#DDE4E9;
  --text:#14181B;
  --text-dim:#55626C;
  --text-faint:#8A97A0;

  --go:var(--blue);
  --go-press:var(--blue-press);
  --rec:#C8306B;           /* recording is the only other colour that speaks */
  --rec-press:#A62255;
  --warn:#B8791B;
  --bad:#B23A3A;

  --radius:14px;
  --radius-sm:10px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background-color:var(--bg);color:var(--text);
  font-family:-apple-system,"Helvetica Neue",Arial,sans-serif;-webkit-text-size-adjust:100%}
#app{max-width:560px;margin:0 auto;padding:20px 18px calc(96px + env(safe-area-inset-bottom,0px));min-height:100vh}
#app.no-bar{padding-bottom:40px}

h1{font-size:1.5rem;margin:0 0 4px;font-weight:800;letter-spacing:-.02em}
.subtitle{color:var(--text-dim);margin:0 0 22px;font-size:1.02rem;line-height:1.5}
.screen{display:none}
.screen.active{display:block}
.hidden{display:none !important}
.center{text-align:center}

label{display:block;font-size:1rem;font-weight:600;margin:16px 0 8px}
input[type="text"],input[type="email"],input[type="password"]{width:100%;padding:15px 16px;font-size:1.12rem;
  border-radius:var(--radius-sm);border:2px solid var(--line);background:#fff;color:var(--text)}
input::placeholder{color:var(--text-faint)}
input:focus{outline:none;border-color:var(--go)}

button{font-size:1.06rem;font-weight:700;padding:16px 20px;border-radius:var(--radius);
  border:none;width:100%;margin-top:12px;cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:transform .1s ease}
button:active{transform:scale(.985)}
button:disabled{opacity:.4}
.btn-primary{background:var(--go);color:#fff}
.btn-secondary{background:var(--surface-2);color:var(--text)}
.btn-danger{background:var(--rec);color:#fff}
.btn-record{background:var(--rec);color:#fff}
.btn-record.recording{background:var(--rec-press)}
.btn-row{display:flex;gap:10px}
.btn-row button{flex:1}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin-top:14px}

/* ---------- working header ---------- */
.workbar{display:flex;align-items:center;gap:10px;padding:2px 0 10px}
.workbar .back{background:none;border:0;width:auto;margin:0;padding:6px 10px 6px 0;
  color:var(--text-dim);font-size:1.45rem;line-height:1;cursor:pointer}
.workbar .who{flex:1;min-width:0;font-size:.96rem;color:var(--text-dim);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.workbar .count{font-size:.92rem;color:var(--text-faint);font-weight:700;flex-shrink:0}

/* Pages saved so far. Deliberately no denominator — the app cannot know how
   long a book is, and a made-up total is a lie the user would catch. */
.progress{display:flex;gap:3px;margin-bottom:14px;min-height:4px}
.progress i{flex:1;height:4px;border-radius:9px;background:var(--line);min-width:2px}
.progress i.done{background:var(--go)}
.progress i.now{background:var(--warn)}

/* ---------- step panel: one job per screen ---------- */
.step{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px 18px;
  display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.step .lead{font-size:1.16rem;font-weight:700;margin:0}
.step .hint{font-size:.92rem;color:var(--text-faint);margin:0;line-height:1.5}

.dropzone{width:100%;border:2px dashed var(--line);border-radius:var(--radius);
  padding:30px 16px;display:flex;flex-direction:column;align-items:center;gap:10px;
  background:var(--surface-2);cursor:pointer}
.dropzone .glyph{font-size:2.4rem;line-height:1;filter:saturate(.6)}
.dropzone .zlead{font-size:1.02rem;font-weight:700}
.dropzone .zsub{font-size:.88rem;color:var(--text-faint)}

.thumb{max-width:100%;max-height:180px;object-fit:contain;border-radius:var(--radius-sm);
  display:none;background:var(--surface-2);border:1px solid var(--line)}
.thumb.has-image{display:block;margin:0 auto}
video.thumb{background:#111A1E}

.pagestrip{display:flex;align-items:center;gap:11px;width:100%;text-align:left}
.pagestrip img{width:50px;height:64px;object-fit:cover;border-radius:8px;flex-shrink:0;
  background:var(--surface-2);border:1px solid var(--line)}
.pagestrip .note{font-size:.88rem;color:var(--text-faint);line-height:1.45}

.rec-big{width:94px;height:94px;border-radius:50%;background:var(--rec);color:#fff;border:0;
  margin:4px 0;font-size:2.2rem;display:flex;align-items:center;justify-content:center;padding:0}
.rec-big.recording{background:var(--rec-press)}

/* Review as a visible step, not the grey browser widget nobody noticed. */
.review{display:inline-flex;align-items:center;gap:9px;background:var(--surface-2);
  border:1px solid var(--line);border-radius:99px;padding:12px 20px;width:auto;margin:0;
  color:var(--text);font-size:.98rem;font-weight:600}
.review .dur{color:var(--text-faint)}
audio{width:100%;margin-top:10px}

/* ---------- the action never moves ---------- */
#actionbar{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--surface);
  border-top:1px solid var(--line);padding:12px 18px calc(12px + env(safe-area-inset-bottom,0px))}
#actionbar .inner{max-width:560px;margin:0 auto}
#actionbar button{margin:0}
#actionbar .pair{display:flex;gap:10px}
#actionbar .pair button{flex:1}
#actionbar.hidden{display:none !important}

.linkrow{text-align:center;margin-top:14px}
.linklike{display:inline-block;width:auto;margin:0;padding:6px 2px;background:none;border:0;
  color:var(--text-dim);font-size:.92rem;font-weight:600;text-decoration:underline;
  text-underline-offset:3px;cursor:pointer}

.book-item{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:14px 2px;
  border-bottom:1px solid var(--line);font-size:1.02rem}
.book-item:last-child{border-bottom:none}
.book-actions{display:flex;flex-wrap:wrap;gap:8px;width:100%}
.book-item button,.book-item .btn-download{width:auto;margin:0;padding:11px 16px;font-size:.96rem}
.btn-download{display:inline-block;background:var(--go);color:#fff;border-radius:12px;
  font-weight:700;text-decoration:none;text-align:center}

.status-row{display:flex;gap:10px;align-items:center;margin-top:10px;font-size:.96rem;color:var(--text-dim)}
.status-ok{color:var(--go);font-weight:700}
.save-error{background:#FBE9EF;border:1px solid var(--rec);border-radius:var(--radius-sm);
  color:var(--bad);font-weight:600;padding:12px 14px;margin:14px 0 0;font-size:.96rem;line-height:1.45}

.tip{background:var(--surface-2);border-radius:var(--radius-sm);padding:12px 14px;
  font-size:.9rem;color:var(--text-dim);line-height:1.5;margin-bottom:0}

.spinner{border:5px solid var(--line);border-top:5px solid var(--go);border-radius:50%;
  width:46px;height:46px;animation:spin 1s linear infinite;margin:26px auto}
@keyframes spin{to{transform:rotate(360deg)}}

.checkbox-row{display:flex;align-items:center;gap:10px;font-size:1rem;font-weight:500}
.checkbox-row input[type="checkbox"]{width:24px;height:24px;flex-shrink:0}

#crop-stage{position:relative;display:inline-block;touch-action:none}
#crop-canvas{display:block;max-width:100%;border-radius:8px;touch-action:none}

.render-chip{display:inline-block;padding:9px 14px;border-radius:12px;font-size:.88rem;font-weight:700}
.render-chip.working{background:var(--surface-2);color:var(--text-dim)}
.render-chip.failed{background:#FBE9EF;color:var(--bad)}

.bulk-list{margin:0 0 4px;padding-left:0;list-style:none}
.bulk-row{display:flex;align-items:center;gap:10px;padding:10px 2px;border-bottom:1px solid var(--line)}
.bulk-row:last-child{border-bottom:none}
.bulk-name{flex:1;font-size:.94rem;line-height:1.35;word-break:break-word}
.bulk-name small{display:block;color:var(--text-faint);font-weight:600;font-size:.8rem}
.bulk-ctrl{display:flex;gap:6px;flex-shrink:0}
.bulk-ctrl button{width:38px;height:38px;margin:0;padding:0;border-radius:9px;
  background:var(--surface-2);color:var(--text);font-size:1rem}
.bulk-ctrl button:disabled{opacity:.35}

/* ============================================================
   FRONT DOOR — inherits the tokens above, so restyling the app restyles the
   front door with it. They can no longer drift.

   Laid out to fit one screen without scrolling where it can: the sample video
   is the only flexible element, so it takes the slack on a tall phone and
   gives it back on a short one, and the actions stay in view either way.
   ============================================================ */
#frontdoor{position:fixed;inset:0;z-index:1000;background:var(--bg);overflow-y:auto;
  -webkit-overflow-scrolling:touch}
#frontdoor[hidden]{display:none}
/* height, not min-height: the flex column needs a definite height before it can
   hand the leftover space to the video. With min-height the container simply
   grew and nothing ever shrank. */
.fd-inner{height:100%;box-sizing:border-box;display:flex;flex-direction:column;
  max-width:520px;margin:0 auto;
  padding:calc(26px + env(safe-area-inset-top,0px)) 24px
          calc(22px + env(safe-area-inset-bottom,0px))}
.fd-eyebrow{margin:0 0 14px;color:var(--text-faint);font-size:12px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase}
.fd-title{margin:0 0 12px;color:var(--text);font-size:clamp(28px,7.4vw,38px);line-height:1.12;
  font-weight:800;letter-spacing:-.02em;text-wrap:balance}
.fd-lead{margin:0 0 18px;color:var(--text-dim);font-size:clamp(15px,4vw,17px);line-height:1.5}
/* The sample is the only element that gives. Everything else is its natural
   height; the video takes whatever vertical space is left and no more, so the
   screen fits on a short phone — and still fits when the staging banner steals
   70px at the bottom. Sized by height, left to find its own width, so it never
   letterboxes. */
.fd-sample{margin:0;flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.fd-sample video,
.fd-sample img{flex:1 1 auto;min-height:0;align-self:center;
  width:auto;max-width:100%;aspect-ratio:4/3;object-fit:cover;
  border-radius:var(--radius);border:1px solid var(--line);
  background:var(--surface-2)}
.fd-sample figcaption{flex:0 0 auto;margin-top:8px;color:var(--text-faint);font-size:13px}
.fd-cost{margin:0;padding-top:16px;color:var(--text-dim);font-size:14.5px;line-height:1.45}
.fd-actions{margin-top:16px;flex:0 0 auto}
.fd-actions .btn-primary{width:100%}
.fd-link{display:block;width:auto;margin:12px auto 0;padding:8px 12px;background:none;border:0;
  color:var(--go);font-size:15.5px;font-weight:700;text-decoration:underline;
  text-underline-offset:3px;cursor:pointer}
.howto-link{display:inline-block;margin-top:6px;background:none;border:0;width:auto;padding:4px 0;
  color:var(--text-dim);font-size:.92rem;font-weight:600;text-decoration:underline;cursor:pointer}

/* ============================================================
   REDESIGN SCREENS — 4, 6 and 10.
   4 and 6 are deliberate shells: Tim is writing their content, and the screen
   exists so the sequence is real and the step has somewhere to land.
   ============================================================ */
.eyebrow{margin:0 0 6px;color:var(--blue);font-size:12px;font-weight:800;
  letter-spacing:.15em;text-transform:uppercase}
.lead-xl{margin:0 0 18px;font-size:clamp(26px,7vw,34px);line-height:1.14;
  font-weight:800;letter-spacing:-.02em;color:var(--text)}

.teach{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:18px;min-height:180px;
  display:flex;align-items:center;justify-content:center}
.teach .placeholder{margin:0;color:var(--text-faint);font-size:.95rem;
  text-align:center}

.cover{display:block;width:100%;max-width:280px;margin:0 auto 20px;
  aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius);
  border:1px solid var(--line);background:var(--surface-2)}
.cover:not([src]){display:none}
.thanks-body{margin:0 0 12px;color:var(--text-dim);font-size:1rem;line-height:1.55}
.thanks-body strong{color:var(--text);font-weight:700}
.askrow{margin:12px 0 0;color:var(--text-dim);font-size:.94rem}
.askrow .linklike{color:var(--blue);margin-left:2px}

/* ---------- screens 3a / 3b: asking for a way in ---------- */
.ask-quote{margin:0 0 20px;color:var(--text-dim);font-size:1.02rem;font-style:italic;
  line-height:1.5}
.fieldnote{margin:6px 0 0;color:var(--text-faint);font-size:.86rem}
.opt{color:var(--text-faint);font-weight:500;font-size:.86rem}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.chip{width:auto;margin:0;padding:9px 13px;font-size:.9rem;font-weight:600;
  border-radius:9px;background:var(--surface);color:var(--blue);
  border:1px solid var(--line)}
.chip.on{background:var(--blue-wash);border-color:var(--blue)}
.checkrow{display:flex;align-items:flex-start;gap:10px;margin:14px 0 0;
  font-size:.94rem;font-weight:500;color:var(--text-dim);line-height:1.45}
.checkrow input{width:20px;height:20px;flex:0 0 auto;margin-top:1px;accent-color:var(--blue)}
.hr{border:0;border-top:1px solid var(--line);margin:24px 0 18px}
.lead-md{margin:0 0 10px;font-size:1.24rem;font-weight:800;letter-spacing:-.01em}

/* ---------- screen 8: the contact sheet ---------- */
/* A gallery is the one place scrolling is right — a 28-page book cannot show
   its pages in a viewport, and shrinking them to fit defeats the point. */
.sheet{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));
  gap:10px;margin:4px 0 18px}
.sheet .cell{position:relative;border:0;padding:0;margin:0;width:100%;
  aspect-ratio:4/3;border-radius:var(--radius-sm);overflow:hidden;
  background:var(--surface-2);border:1px solid var(--line);cursor:pointer}
.sheet .cell img{width:100%;height:100%;object-fit:cover;display:block}
.sheet .cell .num{position:absolute;left:5px;top:5px;background:rgba(0,0,0,.62);
  color:#fff;font-size:11px;font-weight:700;border-radius:5px;padding:2px 6px;
  line-height:1.3}
.sheet .cell .mark{position:absolute;right:5px;bottom:5px;font-size:11px;
  font-weight:700;border-radius:5px;padding:2px 6px;line-height:1.3}
.sheet .cell .mark.silent{background:var(--warn);color:#fff}
.sheet .cell.gap{border:2px dashed var(--bad);background:#FBE9EF;
  display:flex;align-items:center;justify-content:center}
.sheet .cell.gap span{color:var(--bad);font-size:11px;font-weight:700;
  text-align:center;padding:4px}
.sheet-warn{background:#FBE9EF;border:1px solid var(--bad);color:var(--bad);
  border-radius:var(--radius-sm);padding:11px 13px;font-size:.93rem;
  font-weight:600;margin:0 0 14px;line-height:1.45}
.detail-photo{width:100%;border-radius:var(--radius);border:1px solid var(--line);
  background:var(--surface-2);display:block;margin-bottom:14px}
.detail-photo:not([src]){display:none}

/* ---------- screen 5: photographing the whole book ---------- */
.shootbar{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:2px 0 10px}
.shoot-count{font-size:1.5rem;font-weight:800;letter-spacing:-.02em}
.shoot-sub{font-size:.92rem;color:var(--text-faint)}
.rule{height:3px;background:var(--line);border-radius:2px;margin-bottom:16px;
  position:relative;overflow:hidden}
.rule i{position:absolute;inset:0 auto 0 0;width:0;background:var(--blue);
  border-radius:2px;transition:width .25s ease}
/* named apart from .wayup, the amber panel below — sharing the class
   meant the panel's padding landed on the 3px rule. */
.rule.flagged{background:var(--warn)}

.viewfinder{position:relative;width:100%;aspect-ratio:4/3;border-radius:var(--radius);
  overflow:hidden;background:var(--surface-2);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center}
.viewfinder img{width:100%;height:100%;object-fit:cover;display:block}
.viewfinder img:not([src]){display:none}
.viewfinder .guide{position:absolute;inset:14px;border:2px dashed rgba(255,255,255,.85);
  border-radius:4px;pointer-events:none}
.viewfinder.empty .guide{border-color:var(--text-faint)}
.guide-label{position:absolute;left:0;right:0;bottom:10px;text-align:center;
  font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:#fff;
  text-shadow:0 1px 4px rgba(0,0,0,.75);pointer-events:none}
.viewfinder.empty .guide-label{color:var(--text-faint);text-shadow:none}

.shoot-hint{margin:12px 0 0;font-size:.95rem;line-height:1.45;text-align:center;
  color:var(--text-dim)}
.strip{display:flex;gap:6px;margin-top:14px;min-height:0}
.strip img{flex:1;min-width:0;aspect-ratio:4/3;object-fit:cover;display:block;
  border-radius:6px;border:1px solid var(--line);background:var(--surface-2)}
.wayup{margin:12px 0 0;padding:11px 13px;border-radius:var(--radius-sm);
  background:#FDF3E2;border:1px solid var(--warn);color:#7A5210;
  font-size:.93rem;font-weight:600;line-height:1.45;text-align:center}
.shoot-links{display:flex;justify-content:space-between;align-items:center;
  margin-top:6px}
.shoot-links .linklike{color:var(--blue)}

/* ---------- screen 7: reading it aloud ---------- */
/* Read from two or three feet away, with the reader looking at the book, not
   the phone. Nothing here is set below 20px. */
.readbar{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:2px 0 10px}
.read-page{font-size:1.35rem;font-weight:800;letter-spacing:-.02em}
.read-state{font-size:1.05rem;font-weight:700;color:var(--text-faint)}
.read-state.live{color:var(--rec)}

/* The page is the button. */
.readframe{position:relative;width:100%;aspect-ratio:4/3;padding:0;margin:0;
  border-radius:var(--radius);overflow:hidden;background:var(--surface-2);
  border:2px solid var(--line);display:block;cursor:pointer}
.readframe img{width:100%;height:100%;object-fit:cover;display:block}
.readframe img:not([src]){display:none}
.readframe.live{border-color:var(--rec)}
.readframe-label{position:absolute;left:0;right:0;bottom:0;padding:10px 12px;
  background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,0));
  color:#fff;font-size:1.05rem;font-weight:700;text-align:center}
.readframe-label:empty{display:none}

.read-hint{margin:14px 0 0;font-size:1.05rem;line-height:1.45;text-align:center;
  color:var(--text-dim)}
#btn-read-main{font-size:1.2rem;min-height:64px}

/* ---------- screen 9: make my video ---------- */
.shapenote{display:flex;gap:11px;align-items:flex-start;margin:0 0 4px;
  color:var(--text-dim);font-size:.94rem;line-height:1.5}
.shapenote::before{content:"";flex:0 0 auto;width:34px;height:26px;border-radius:4px;
  background:var(--blue-wash);border:1px solid var(--blue);margin-top:2px}
.shapenote.mixed::before{background:#FDF3E2;border-color:var(--warn)}