/* app.css — extracted from chitchat-mockups.html.
   The mockups are the visual spec: palette, type scale and component structure come
   from there unchanged. What changed is the frame — the mockups drew phones on a page,
   this is the phone. Design target is a 390x844 handset; desktop is a centred column,
   not a redesign. */

:root{
  --ground:#0F2E29;
  --ground-2:#173C36;
  --ground-3:#1F4B44;
  --line:rgba(243,237,225,.14);
  --line-2:rgba(243,237,225,.28);
  --ink:#F3EDE1;
  --ink-dim:rgba(243,237,225,.62);
  --ink-faint:rgba(243,237,225,.40);
  --paper:#F3EDE1;
  --paper-ink:#16302B;
  --ochre:#E9B44C;
  --ochre-soft:rgba(233,180,76,.16);
  --mint:#7FD8C0;
  --mint-soft:rgba(127,216,192,.14);
  --alert:#E5645B;
  --display:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
  --body:"Chivo","Helvetica Neue",Arial,sans-serif;
  --mono:"DM Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --tap:44px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;height:100%}
body{
  margin:0;min-height:100%;
  background:var(--ground);color:var(--ink);
  font-family:var(--body);font-size:16px;line-height:1.55;
  font-variant-ligatures:none;
  -webkit-font-smoothing:antialiased;
}
body.paper{background:var(--paper);color:var(--paper-ink)}

/* The one layout rule: a centred column that is the phone on a phone. */
.screen{
  max-width:430px;margin:0 auto;padding:14px 18px calc(28px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;min-height:100dvh;
}
.screen.chat-screen{padding-bottom:calc(12px + env(safe-area-inset-bottom))}

a{color:inherit}
button,input,textarea{font-family:inherit}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ─── app chrome ────────────────────────────────── */
.apphead{display:flex;align-items:center;justify-content:space-between;padding:6px 0 16px;gap:12px}
.mark{
  font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-.02em;
  font-variation-settings:"wdth" 84;text-decoration:none
}
.mark s{color:var(--ochre);text-decoration:none}
.av{
  width:32px;height:32px;border-radius:50%;background:var(--ochre-soft);
  border:1px solid rgba(233,180,76,.4);color:var(--ochre);
  display:grid;place-items:center;font-family:var(--mono);font-size:12px;flex:0 0 auto;
  text-decoration:none;
}
.av.m{background:var(--mint-soft);border-color:rgba(127,216,192,.4);color:var(--mint)}
.back{
  font-family:var(--mono);font-size:13px;color:var(--ink-faint);text-decoration:none;
  display:inline-flex;align-items:center;min-height:var(--tap);padding-right:8px
}
body.paper .back{color:rgba(22,48,43,.5)}

h3.greet{
  font-family:var(--display);font-weight:600;font-variation-settings:"wdth" 92;
  font-size:26px;line-height:1.1;letter-spacing:-.02em;margin:2px 0 3px
}
.greet + .date{font-family:var(--mono);font-size:11px;color:var(--ink-faint);margin:0 0 20px}
h3.title{
  font-family:var(--display);font-weight:600;font-variation-settings:"wdth" 92;
  font-size:23px;letter-spacing:-.022em;margin:2px 0 16px;line-height:1.1
}

/* ─── the ledger strip ──────────────────────────── */
.ledger{margin:0 0 22px}
.ledger-lab{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:9px
}
.chips{display:flex;gap:5px;align-items:flex-end;height:34px}
.chip{flex:1 1 0;border-radius:3px;position:relative;overflow:hidden;background:rgba(243,237,225,.08);height:34px}
.chip i{position:absolute;left:0;bottom:0;width:100%;display:block;border-radius:3px}
.chip.full i{height:100%;background:var(--mint)}
.chip.half i{height:52%;background:var(--ochre)}
.chip.now{box-shadow:0 0 0 1px var(--ochre)} .chip.now i{height:26%;background:var(--ochre)}
.chip.none i{height:0}
.chip-key{
  display:flex;gap:14px;margin-top:9px;font-family:var(--mono);
  font-size:9.5px;color:var(--ink-faint);letter-spacing:.03em;flex-wrap:wrap
}
.chip-key u{text-decoration:none;display:inline-flex;align-items:center;gap:5px}
.chip-key u::before{content:"";width:7px;height:7px;border-radius:2px;background:var(--mint)}
.chip-key u.b::before{background:var(--ochre)}
.chip-key u.c::before{background:rgba(243,237,225,.18)}

/* ─── cards ─────────────────────────────────────── */
.card{border-radius:16px;padding:17px 17px 16px;margin-bottom:12px}
.card.hero{background:var(--ochre);color:#3A2A06}
.card.ghost{background:var(--ground-2);border:1px solid var(--line)}
.card.voice{background:var(--ground-2);border:1px solid rgba(127,216,192,.3)}
.card-lab{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  opacity:.62;margin-bottom:8px
}
.card.hero .card-lab{opacity:.7}
.card h4{
  font-family:var(--display);font-weight:600;font-variation-settings:"wdth" 92;
  font-size:19px;line-height:1.16;letter-spacing:-.018em;margin:0 0 7px
}
.card p{margin:0;font-size:13.5px;line-height:1.5;opacity:.78}
.card .meta{font-family:var(--mono);font-size:10.5px;opacity:.62;margin-top:11px}

.btn{
  display:block;width:100%;text-align:center;border:0;border-radius:12px;
  padding:15px;min-height:var(--tap);
  font-family:var(--body);font-weight:600;font-size:16px;
  letter-spacing:-.005em;margin-top:14px;cursor:pointer;text-decoration:none
}
.btn:disabled{opacity:.5;cursor:default}
.btn.dark{background:#16302B;color:var(--paper)}
.btn.ochre{background:var(--ochre);color:#3A2A06}
.btn.mint{background:var(--mint);color:#0B2A24}
.btn.line{background:transparent;border:1px solid var(--line-2);color:var(--ink)}
.btn.alert{background:transparent;border:1px solid var(--alert);color:var(--alert)}
.rowlink{
  display:flex;justify-content:space-between;align-items:center;
  padding:15px 2px;border-top:1px solid var(--line);min-height:var(--tap);
  font-size:15px;color:var(--ink-dim);margin-top:6px;text-decoration:none
}
.rowlink b{font-weight:500;color:var(--ink)}
.spacer{flex:1 1 auto}

/* ─── lesson (paper) screen ─────────────────────── */
.paper-eyebrow{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(22,48,43,.5);margin:4px 0 10px
}
.concept{
  font-family:var(--display);font-weight:700;font-variation-settings:"wdth" 90;
  font-size:25px;line-height:1.1;letter-spacing:-.028em;margin:0 0 13px;color:var(--paper-ink)
}
.pt{font-size:15px;line-height:1.62;color:rgba(22,48,43,.82);margin:0 0 16px}
.ex{border-left:2px solid var(--ochre);padding:2px 0 2px 12px;margin:0 0 12px}
/* Examples are often a two-line exchange; keep the line break the planner wrote. */
.ex .en{font-size:15px;font-weight:500;color:var(--paper-ink);margin:0 0 3px;line-height:1.4;white-space:pre-line}
.ex .gl{font-size:12.5px;color:rgba(22,48,43,.58);margin:0;font-style:italic}
.warn{
  background:rgba(229,100,91,.1);border-radius:10px;padding:11px 13px;margin:4px 0 0;
  font-size:13px;line-height:1.5;color:rgba(22,48,43,.8)
}
.warn b{color:#B33A32}
.paper-meta{
  text-align:center;font-family:var(--mono);font-size:10px;
  color:rgba(22,48,43,.5);margin-top:10px;letter-spacing:.05em
}

/* ─── chat ──────────────────────────────────────── */
.chathead{
  display:flex;align-items:center;gap:11px;padding:6px 0 12px;
  border-bottom:1px solid var(--line);margin-bottom:14px;flex:0 0 auto
}
.chathead .av{width:34px;height:34px;font-size:13px}
.chathead .who{flex:1 1 auto;min-width:0}
.chathead .who b{display:block;font-size:15px;font-weight:600;letter-spacing:-.01em}
.chathead .who span{font-family:var(--mono);font-size:10px;color:var(--mint)}
.turns{display:flex;gap:3px;align-items:center}
.turns i{width:5px;height:5px;border-radius:50%;background:rgba(243,237,225,.2);display:block}
.turns i.on{background:var(--ochre)}
.turns em{font-family:var(--mono);font-size:9.5px;color:var(--ink-faint);font-style:normal;margin-left:5px}

.stream{
  flex:1 1 auto;overflow-y:auto;display:flex;flex-direction:column;
  gap:9px;padding-bottom:4px;overscroll-behavior:contain;scrollbar-width:thin
}
.msg{max-width:82%;padding:10px 13px;border-radius:15px;font-size:15px;line-height:1.46;white-space:pre-wrap;word-wrap:break-word}
.msg.them{background:var(--ground-2);border-bottom-left-radius:5px;align-self:flex-start}
.msg.me{background:var(--ochre);color:#3A2A06;border-bottom-right-radius:5px;align-self:flex-end}
.msg time{display:block;font-family:var(--mono);font-size:9px;opacity:.45;margin-top:4px;text-align:right}
.caret{
  display:inline-block;width:2px;height:14px;background:var(--mint);
  vertical-align:-2px;margin-left:2px;animation:blink 1.05s steps(1) infinite
}
@keyframes blink{0%,50%{opacity:1}51%,100%{opacity:0}}
.dots{display:inline-flex;gap:3px;align-items:center;padding:2px 0}
.dots i{width:5px;height:5px;border-radius:50%;background:var(--ink-faint);animation:bob 1.2s infinite}
.dots i:nth-child(2){animation-delay:.16s}.dots i:nth-child(3){animation-delay:.32s}
@keyframes bob{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-3px);opacity:1}}

.composer{
  flex:0 0 auto;display:flex;gap:8px;align-items:flex-end;margin-top:10px;
  background:var(--ground-2);border:1px solid var(--line);border-radius:22px;padding:6px 6px 6px 15px
}
.composer textarea{
  flex:1 1 auto;background:transparent;border:0;color:var(--ink);resize:none;
  /* 16px minimum, or iOS zooms the whole page on focus. */
  font-size:16px;line-height:1.4;padding:9px 0;max-height:120px;outline:none
}
.composer textarea::placeholder{color:var(--ink-faint)}
.composer button{
  width:var(--tap);height:var(--tap);border-radius:50%;background:var(--ochre);color:#3A2A06;
  display:grid;place-items:center;font-size:18px;border:0;cursor:pointer;flex:0 0 auto
}
.composer button:disabled{opacity:.4;cursor:default}
.endbar{
  flex:0 0 auto;margin-top:9px;text-align:center;font-family:var(--mono);
  font-size:10px;color:var(--ink-faint);letter-spacing:.05em
}
.endbar a,.endbar button{
  color:var(--ochre);font-family:var(--mono);font-size:11px;letter-spacing:.05em;
  background:none;border:0;text-decoration:none;cursor:pointer;
  display:inline-flex;align-items:center;min-height:var(--tap);padding:0 8px
}
.stream-error{
  background:rgba(229,100,91,.12);border:1px solid rgba(229,100,91,.3);border-radius:11px;
  padding:10px 13px;font-size:13px;color:var(--ink);align-self:stretch
}

/* ─── summary ───────────────────────────────────── */
.blk{border-radius:14px;padding:14px 15px;margin-bottom:11px}
.blk.good{background:var(--mint-soft);border:1px solid rgba(127,216,192,.26)}
.blk.next{background:var(--ochre-soft);border:1px solid rgba(233,180,76,.26)}
.blk-lab{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;margin-bottom:10px}
.blk.good .blk-lab{color:var(--mint)}
.blk.next .blk-lab{color:var(--ochre)}
.blk ul{margin:0;padding:0}
.blk li{font-size:14px;line-height:1.52;margin-bottom:9px;list-style:none}
.blk li:last-child{margin-bottom:0}
.blk q{font-style:italic;quotes:'"' '"'}
.said{display:block;font-size:12.5px;color:var(--ink-faint);margin-top:3px}
.said b{color:var(--ochre);font-weight:500}
.close-note{font-size:14px;line-height:1.55;color:var(--ink-dim);margin:14px 2px 0}

/* ─── progress (student notes) ──────────────────── */
.notes-warm{font-size:15px;line-height:1.68;color:var(--ink);margin:0 0 18px;white-space:pre-wrap}
.notes-warm em{color:var(--ochre);font-style:normal;font-weight:500}
.tag-list{display:flex;flex-direction:column;gap:8px}
.tag{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:12px 13px;border-radius:11px;background:var(--ground-2);border:1px solid var(--line)
}
.tag b{font-size:14px;font-weight:500}
.tag u{
  text-decoration:none;font-family:var(--mono);font-size:9.5px;letter-spacing:.07em;
  padding:3px 8px;border-radius:5px;white-space:nowrap
}
.tag u.ok{background:var(--mint-soft);color:var(--mint)}
.tag u.rv{background:var(--ochre-soft);color:var(--ochre)}
.tag u.nw{background:rgba(243,237,225,.07);color:var(--ink-faint)}
.stamp{font-family:var(--mono);font-size:10px;color:var(--ink-faint);margin-top:16px;letter-spacing:.05em}

/* ─── coach ─────────────────────────────────────── */
.status{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin:2px 0 4px}
.status b{font-family:var(--display);font-weight:600;font-variation-settings:"wdth" 92;font-size:24px;letter-spacing:-.022em}
.status u{
  text-decoration:none;font-family:var(--mono);font-size:10px;letter-spacing:.06em;
  color:var(--mint);border:1px solid rgba(127,216,192,.32);border-radius:5px;padding:2.5px 7px
}
.status + p{font-size:12.5px;color:var(--ink-dim);margin:0 0 20px}

.feed{border-top:1px solid var(--line)}
.feed-row{display:flex;gap:11px;padding:13px 0;border-bottom:1px solid var(--line);align-items:flex-start}
.feed-row i{flex:0 0 auto;width:3px;align-self:stretch;border-radius:2px;background:var(--ochre);display:block;margin-top:2px}
.feed-row.v i{background:var(--mint)}
.feed-row div{flex:1 1 auto;min-width:0}
.feed-row b{display:block;font-size:14px;font-weight:500;margin-bottom:3px;letter-spacing:-.005em}
.feed-row span{font-family:var(--mono);font-size:10px;color:var(--ink-faint);letter-spacing:.03em}
.feed-row em{
  font-style:normal;font-family:var(--mono);font-size:10px;border-radius:4px;
  padding:2.5px 7px;align-self:flex-start;background:rgba(243,237,225,.07);color:var(--ink-faint)
}
.feed-row em.s3{background:var(--mint-soft);color:var(--mint)}
.feed-row em.s2{background:var(--ochre-soft);color:var(--ochre)}
.feed-row em.s1{background:rgba(229,100,91,.14);color:var(--alert)}
/* A speaking row is itself the link — reading rows are not links at all, because there
   is no transcript behind them. */
a.feed-row{text-decoration:none;color:inherit}

/* guide */
.guide-h{
  font-family:var(--display);font-weight:700;font-variation-settings:"wdth" 90;
  font-size:23px;line-height:1.12;letter-spacing:-.025em;margin:4px 0 7px
}
.guide-meta{font-family:var(--mono);font-size:10px;color:var(--mint);letter-spacing:.06em;margin:0 0 18px}
.guide{font-size:15px}
.guide h2{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-faint);margin:18px 0 6px;font-weight:400
}
.guide p{margin:0 0 10px;font-size:15px;line-height:1.5}
.guide p strong{color:var(--mint);font-weight:500}
/* The lead line the guide opens with: reinforcement, target length, last score. */
.guide > p:first-child em{
  color:var(--mint);font-style:normal;font-family:var(--mono);font-size:10px;
  letter-spacing:.06em;text-transform:uppercase
}
.guide em{color:var(--ink-faint);font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.06em}
.guide ul{margin:0 0 10px;padding-left:16px}
.guide li{font-size:14.5px;line-height:1.5;margin-bottom:6px}
.guide li strong{color:var(--ink);font-weight:600}

/* score */
.opt{
  display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:13px;
  border:1px solid var(--line);margin-bottom:9px;background:var(--ground-2);cursor:pointer
}
.opt:has(input:checked){border-color:var(--mint);background:var(--mint-soft)}
.opt input{position:absolute;opacity:0;width:0;height:0}
.opt s{
  flex:0 0 auto;text-decoration:none;width:28px;height:28px;border-radius:8px;
  display:grid;place-items:center;font-family:var(--mono);font-size:13px;
  background:rgba(243,237,225,.08);color:var(--ink-faint)
}
.opt:has(input:checked) s{background:var(--mint);color:#0B2A24}
.opt div b{display:block;font-size:14.5px;font-weight:600;margin-bottom:2px}
.opt div span{font-size:13px;color:var(--ink-dim);line-height:1.42;display:block}
.field{border:1px solid var(--line);border-radius:12px;padding:12px 13px;margin-top:14px;background:var(--ground-2)}
.field b,.field label{
  display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-faint);margin-bottom:8px;font-weight:400
}
.field textarea,.field input{
  width:100%;background:transparent;border:0;color:var(--ink);resize:vertical;
  font-size:16px;line-height:1.5;outline:none;min-height:72px
}
.field input{min-height:var(--tap)}
.field textarea::placeholder,.field input::placeholder{color:var(--ink-faint)}
.verbatim-hint{
  font-family:var(--mono);font-size:9.5px;color:var(--ink-faint);text-align:center;
  margin:11px 0 0;letter-spacing:.05em
}

/* coach notes */
.verbatim-note{
  display:flex;gap:9px;background:var(--mint-soft);border:1px solid rgba(127,216,192,.26);
  border-radius:11px;padding:10px 12px;margin-bottom:14px;font-size:12.5px;line-height:1.45;
  color:var(--ink-dim)
}
.verbatim-note b{color:var(--mint);font-weight:500}
pre.raw{
  font-family:var(--mono);font-size:12px;line-height:1.62;color:var(--ink-dim);
  background:#0A241F;border:1px solid var(--line);border-radius:11px;
  padding:13px;margin:0 0 13px;white-space:pre-wrap;word-break:break-word
}
.table-scroll{overflow-x:auto}
table.led{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:11px}
table.led th{
  text-align:left;color:var(--ink-faint);font-weight:400;letter-spacing:.08em;
  text-transform:uppercase;font-size:9px;padding:0 8px 7px 0;border-bottom:1px solid var(--line);white-space:nowrap
}
table.led td{padding:8px 8px 8px 0;border-bottom:1px solid var(--line);color:var(--ink-dim)}
table.led td:first-child{color:var(--ink)}
table.led td.s3{color:var(--mint)} table.led td.s2{color:var(--ochre)} table.led td.s1{color:var(--alert)}
.disclose{
  margin-top:13px;font-family:var(--mono);font-size:11px;color:var(--ink-faint);
  border:1px dashed var(--line-2);border-radius:9px;padding:12px;display:block;
  text-decoration:none;min-height:var(--tap)
}
.section-lab{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-faint);margin:22px 0 9px
}
.kv{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
.kv span{color:var(--ink-faint);font-family:var(--mono);font-size:11px}
.danger{
  margin-top:22px;border:1px solid rgba(229,100,91,.35);border-left:2px solid var(--alert);
  border-radius:13px;padding:16px;background:var(--ground-2)
}
.danger h4{font-family:var(--display);font-weight:600;font-size:17px;margin:0 0 8px;letter-spacing:-.02em}
.danger p{margin:0 0 12px;font-size:13.5px;line-height:1.55;color:var(--ink-dim)}

/* ─── login ─────────────────────────────────────── */
.login{max-width:360px;margin:0 auto;display:flex;flex-direction:column;justify-content:center;min-height:100dvh;padding:24px 20px}
.login .mark{font-size:34px;margin-bottom:6px}
.login p.sub{color:var(--ink-dim);font-size:14px;margin:0 0 26px}

/* ─── flashes ───────────────────────────────────── */
.flash{
  border-radius:11px;padding:11px 13px;margin-bottom:14px;font-size:13.5px;line-height:1.45;
  background:rgba(229,100,91,.12);border:1px solid rgba(229,100,91,.3)
}
.flash.ok{background:var(--mint-soft);border-color:rgba(127,216,192,.3);color:var(--ink-dim)}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .caret{opacity:1}
}