/* ============================================================
   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}
/* Sits above every screen, so it is charged to every screen. A quiet wordmark,
   not a headline — the tagline lives on the front door where there is room. */
#brand{font-size:1.02rem;font-weight:800;letter-spacing:-.01em;margin:0 0 16px;
  color:var(--text)}
.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}

.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)}

/* ---------- carried over from the production markup ----------
   Three classes the rebuild had stopped using but the old flow still needs.
   Restyled to the blue palette rather than left warm. */
.link-back{display:inline-block;margin-bottom:10px;color:var(--blue);font-weight:600;
  text-decoration:none;cursor:pointer}
/* A label, not a control. As a solid blue pill it read as a button and invited
   a tap that does nothing. */
.page-badge{display:block;color:var(--text-dim);font-size:12px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;margin:0 0 8px}
.photo-preview{width:100%;height:auto;max-height:40vh;object-fit:contain;
  border-radius:var(--radius-sm);margin-top:10px;display:none;
  border:1px solid var(--line);background:var(--surface-2)}
video.photo-preview{background:#111A1E}
/* The rename from .thumb to .photo-preview dropped this rule, so the JS added
   .has-image to an element that stayed display:none. The photo loaded and was
   never seen. */
.photo-preview.has-image{display:block}

/* ---------- the front door ---------- */
#frontdoor{position:fixed;inset:0;z-index:1000;background:var(--bg);overflow-y:auto;
  -webkit-overflow-scrolling:touch}
#frontdoor[hidden]{display:none}
.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)) 22px
          calc(22px + env(safe-area-inset-bottom,0px))}
.fd-eyebrow{margin:0 0 10px;color:var(--blue);font-size:12px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase}
.fd-title{margin:0 0 2px;color:var(--text);font-size:clamp(34px,9vw,44px);
  line-height:1.05;font-weight:800;letter-spacing:-.025em}
.fd-tagline{margin:2px 0 12px;font-size:1.12rem;font-weight:600;color:var(--text)}
.fd-def{margin:0 0 18px;color:var(--text);font-size:clamp(17px,4.6vw,20px);
  line-height:1.38}
.fd-def em{font-style:italic}

/* The still stands in for the introduction video, so it carries a play mark. */
.fd-sample{position:relative;margin:0;flex:1 1 auto;min-height:0;
  display:flex;align-items:center;justify-content:center}
.fd-sample img{max-width:100%;max-height:100%;width:auto;object-fit:contain;
  display:block;border:1px solid var(--line);background:var(--surface-2)}
.fd-play{position:absolute;width:0;height:0;pointer-events:none;
  border-top:26px solid transparent;border-bottom:26px solid transparent;
  border-left:44px solid rgba(255,255,255,.82);
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.45));margin-left:10px}
.fd-cost{margin:auto 0 0;padding-top:18px;color:var(--text-dim);
  font-size:14.5px;line-height:1.5}
.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(--blue);font-size:15.5px;font-weight:700;
  text-decoration:underline;text-underline-offset:3px;cursor:pointer}