/* Echo Session. Layout: one quiet column with wide margins; navigation and controls stay folded away until asked for. */
:root{
  --bg:#FFFFFF; --ink:#111111; --muted:#8C8C8C; --faint:#C4C4C4; --line:#ECECEC; --wash:#F6F6F6;
  --sel:rgba(17,17,17,.08); --bad:#B23A2E;
  --f-text:"Newsreader", "Iowan Old Style", Georgia, serif;
  --f-ui:"Schibsted Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-mono:"IBM Plex Mono", ui-monospace, Menlo, monospace;
  --gut:max(28px, env(safe-area-inset-left, 0px));
  --gut-r:max(28px, env(safe-area-inset-right, 0px));
  --bar:64px;
}
@media (prefers-color-scheme: dark){:root{
  --bg:#0D0D0D; --ink:#ECECEC; --muted:#7D7D7D; --faint:#4A4A4A; --line:#1E1E1E; --wash:#151515;
  --sel:rgba(236,236,236,.10); --bad:#E0796E; color-scheme:dark }}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;background:var(--bg);color:var(--ink)}
body{font:400 14px/1.55 var(--f-ui);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
a{color:inherit}
:focus-visible{outline:1px solid var(--ink);outline-offset:3px}
::selection{background:var(--sel)}

/* ---------- top bar ---------- */
.top{position:fixed;inset:0 0 auto;z-index:30;display:flex;align-items:center;gap:28px;padding:calc(22px + env(safe-area-inset-top,0px)) var(--gut-r) 22px var(--gut);background:linear-gradient(var(--bg) 70%, transparent)}
.mark{font-weight:500;letter-spacing:.01em;text-decoration:none;margin-right:auto}
.langs{display:flex;gap:14px}
.langs button,.menu-btn{color:var(--faint);font-weight:500}
.langs button[aria-pressed="true"],.menu-btn{color:var(--ink)}
.langs button:hover{color:var(--ink)}

/* ---------- page ---------- */
main{padding:150px var(--gut-r) calc(var(--bar) + 120px) var(--gut);max-width:1180px;margin:0 auto}
.eyebrow{color:var(--muted);font-size:13px;display:flex;gap:18px;align-items:baseline;flex-wrap:wrap}
.eyebrow b{color:var(--ink);font-weight:500}
.link{color:var(--muted);text-decoration:none;border-bottom:1px solid transparent;padding-bottom:1px}
.link:hover,.link.on{color:var(--ink);border-color:var(--ink)}
.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--ink);padding:10px 18px;font-weight:500;border-radius:999px}
.btn:hover{background:var(--ink);color:var(--bg)}
.btn.solid{background:var(--ink);color:var(--bg)}
.btn.solid:hover{opacity:.85}
.btn:disabled{opacity:.4;cursor:default}
.muted{color:var(--muted)}
.num{font-family:var(--f-mono);font-size:11px;letter-spacing:.04em;color:var(--muted);font-variant-numeric:tabular-nums}
h1{font:400 clamp(36px,5vw,56px)/1.05 var(--f-text);letter-spacing:-.01em;margin:18px 0 0;text-wrap:balance}
h2{font:400 26px/1.2 var(--f-text);margin:0}
.empty{padding:60px 0;color:var(--muted);max-width:52ch;font-size:15px}
.empty b{color:var(--ink);font-weight:500}

/* ---------- session index ---------- */
.index-head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin-bottom:56px;flex-wrap:wrap}
.rows{border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:52px minmax(0,1fr) 230px 110px;gap:20px;align-items:baseline;padding:26px 0;border-bottom:1px solid var(--line);text-decoration:none;cursor:pointer}
.row .t{font:400 28px/1.2 var(--f-text);min-width:0}
.row .m,.row .d{color:var(--muted);font-size:13px}
.row .d{text-align:right}
.row:hover .t{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}

/* ---------- session ---------- */
.s-head{margin-bottom:48px}
.s-meta{color:var(--muted);font-size:13px;margin-top:14px;display:flex;gap:16px;flex-wrap:wrap}
.tabs{display:flex;gap:26px;margin:44px 0 40px;border-bottom:1px solid var(--line)}
.tabs button{padding:0 0 12px;color:var(--muted);font-weight:500;border-bottom:1px solid transparent;margin-bottom:-1px}
.tabs button[aria-selected="true"]{color:var(--ink);border-color:var(--ink)}

.recital{font:400 clamp(24px,2.6vw,32px)/1.6 var(--f-text);max-width:860px}
.recital p{margin:0 0 .9em}
.recital .who{display:block;font:500 11px/1 var(--f-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.ln{cursor:text;border-radius:2px;transition:color .25s}
.playing .recital .ln{color:var(--faint)}
.playing .recital .ln.cur{color:var(--ink)}
.recital .ln.cur{background:linear-gradient(var(--ink),var(--ink)) 0 100%/100% 1px no-repeat}
.hid,.hid .w{color:transparent!important;background:linear-gradient(var(--faint),var(--faint)) 0 88%/100% 1px no-repeat;user-select:none;cursor:pointer}
.recital .ln.cur.hid{background:linear-gradient(var(--ink),var(--ink)) 0 88%/100% 1px no-repeat}
.w{cursor:pointer;border-radius:2px}
.w:hover{background:var(--sel)}
.w.on{background:var(--ink);color:var(--bg)}
.w.marked{text-decoration:underline dotted var(--muted);text-underline-offset:5px}

.lines{border-top:1px solid var(--line)}
.l{display:grid;grid-template-columns:44px minmax(0,1.15fr) minmax(0,1fr) 112px;gap:24px;padding:20px 0;border-bottom:1px solid var(--line);align-items:start}
.l .t{font:400 22px/1.45 var(--f-text)}
.l .e{color:var(--muted);font-size:15px;padding-top:4px}
.l .who{display:block;font:500 11px/1 var(--f-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.l .n{padding-top:7px}
.l.cur .n{color:var(--ink)}
.l.cur .n::before{content:"● "}
.acts{display:flex;gap:4px;justify-content:flex-end;padding-top:4px;opacity:0;transition:opacity .2s}
.l:hover .acts,.l.cur .acts,.v:hover .acts{opacity:1}
@media (hover:none){.acts{opacity:1}}
.ic{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:var(--muted);font-size:12px}
.ic:hover{color:var(--ink);background:var(--wash)}
.ic.on{color:var(--ink)}
.hide-en .e,.hide-en .recital-en{display:none}
.mine{opacity:1}

.vlist{border-top:1px solid var(--line)}
.v{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) 150px 70px 112px;gap:20px;padding:16px 0;border-bottom:1px solid var(--line);align-items:baseline}
.v .t{font:400 20px/1.35 var(--f-text)}
.v .g{color:var(--muted);font-size:13px;margin-left:8px;font-family:var(--f-ui)}
.v .e{color:var(--muted)}
.v .src,.v .due{color:var(--muted);font-size:12px}
.v .acts{opacity:.0}
.sugg{margin:28px 0 0;display:grid;gap:0;border-top:1px solid var(--line)}
.sugg .v{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) 112px}

.filters{display:flex;gap:20px;align-items:baseline;flex-wrap:wrap;margin:-24px 0 32px}
.search{border:0;border-bottom:1px solid var(--line);background:transparent;padding:6px 0;min-width:200px;margin-left:auto}
.search:focus{outline:0;border-color:var(--ink)}

/* ---------- review ---------- */
.review{max-width:760px;margin:20px auto 0;text-align:center;display:grid;gap:34px;justify-items:center}
.review .prompt{font:400 clamp(34px,4.5vw,54px)/1.2 var(--f-text);text-wrap:balance}
.review .answer{font:italic 400 clamp(26px,3vw,36px)/1.3 var(--f-text)}
.review .meta{color:var(--muted);font-size:13px;max-width:52ch}
.grades{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.grades button{border:1px solid var(--line);border-radius:999px;padding:10px 18px;font-weight:500;display:flex;gap:10px;align-items:baseline}
.grades button:hover{border-color:var(--ink)}
.grades small{font-family:var(--f-mono);font-size:11px;color:var(--muted)}

/* ---------- progress ---------- */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;margin:10px 0 70px}
.stat .v2{font:300 clamp(44px,6vw,72px)/1 var(--f-text);font-variant-numeric:tabular-nums}
.stat .k{color:var(--muted);font-size:13px;margin-top:10px}
.chart svg{width:100%;height:auto;display:block}
.chart text{fill:var(--muted);font:10px var(--f-mono)}
.chart .bar{fill:var(--ink)}
.chart .base{stroke:var(--line)}

/* ---------- player ---------- */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:28;background:var(--bg);border-top:1px solid var(--line);padding:0 var(--gut-r) env(safe-area-inset-bottom,0px) var(--gut)}
.bar-row{height:var(--bar);display:flex;align-items:center;gap:22px;max-width:1180px;margin:0 auto}
.play{display:flex;align-items:center;gap:10px;font-weight:500}
.play i{width:30px;height:30px;border-radius:50%;background:var(--ink);color:var(--bg);display:grid;place-items:center;font-style:normal;font-size:10px}
.now{color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1}
.turn{color:var(--ink);font-weight:500}
.ctl-toggle{color:var(--muted);font-weight:500}
.ctl-toggle:hover,.ctl-toggle[aria-expanded="true"]{color:var(--ink)}
.ctl{max-height:62vh;overflow:auto;max-width:1180px;margin:0 auto;border-bottom:1px solid var(--line);padding:26px 0 24px;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:22px 36px}
.c{display:grid;gap:9px;align-content:start}
.c>span{color:var(--muted);font-size:12px}
.seg{display:flex;gap:14px;flex-wrap:wrap}
.seg button{color:var(--faint);font-weight:500}
.seg button[aria-pressed="true"]{color:var(--ink);text-decoration:underline;text-underline-offset:5px}
.sw{display:inline-flex;align-items:center;gap:10px;font-weight:500}
.sw i{width:30px;height:18px;border-radius:9px;background:var(--line);position:relative;transition:background .2s}
.sw i::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--bg);box-shadow:0 0 0 1px var(--faint);transition:transform .2s}
.sw[aria-checked="true"] i{background:var(--ink)}
.sw[aria-checked="true"] i::after{transform:translateX(12px);box-shadow:none}
input[type=range]{width:100%;accent-color:var(--ink)}
.c select,.field select{border:0;border-bottom:1px solid var(--line);background:transparent;padding:6px 0;border-radius:0}
.keys{grid-column:1/-1;color:var(--faint);font-size:12px}
.prog-line{position:absolute;left:0;top:-1px;height:1px;background:var(--ink);width:0}

/* ---------- drawer (word panel) ---------- */
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(400px,100%);z-index:35;background:var(--bg);border-left:1px solid var(--line);padding:calc(26px + env(safe-area-inset-top,0px)) var(--gut-r) 120px 32px;overflow:auto;transform:translateX(102%);transition:transform .28s cubic-bezier(.2,.7,.2,1)}
.drawer.open{transform:none}
.drawer .close{position:absolute;top:calc(24px + env(safe-area-inset-top,0px));right:var(--gut-r);color:var(--muted)}
.drawer .hw{font:400 38px/1.15 var(--f-text);margin:44px 0 6px}
.drawer .pos{color:var(--muted);font-size:13px}
.drawer .blk{border-top:1px solid var(--line);padding:18px 0;display:grid;gap:8px;font-size:15px}
.drawer .lbl{color:var(--muted);font-size:12px}
.drawer .fam{display:flex;flex-wrap:wrap;gap:6px 14px}
.drawer .fam span i{font-style:normal;color:var(--muted)}
.drawer .chunk{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.drawer .chunk .t{font:400 19px/1.35 var(--f-text)}
.drawer .row2{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.thinking{color:var(--muted)}

/* selection pill */
.pill{position:fixed;z-index:36;background:var(--ink);color:var(--bg);border-radius:999px;padding:6px 6px;display:flex;gap:2px;transform:translate(-50%,-120%);font-size:13px;font-weight:500}
.pill button{padding:6px 12px;border-radius:999px}
.pill button:hover{background:rgba(127,127,127,.25)}

/* ---------- overlays: menu, new session, settings ---------- */
.sheet{position:fixed;inset:0;z-index:40;background:var(--bg);overflow:auto;padding:calc(22px + env(safe-area-inset-top,0px)) var(--gut-r) 80px var(--gut);opacity:0;pointer-events:none;transition:opacity .22s}
.sheet.open{opacity:1;pointer-events:auto}
.sheet-top{display:flex;justify-content:space-between;align-items:center;max-width:1180px;margin:0 auto}
.sheet-body{max-width:1180px;margin:110px auto 0}
.biglinks{display:grid;gap:4px}
.biglinks button{font:400 clamp(44px,7vw,84px)/1.1 var(--f-text);text-align:left;color:var(--ink);letter-spacing:-.01em;width:fit-content}
.biglinks button:hover{font-style:italic}
.biglinks small{font:400 13px var(--f-ui);color:var(--muted);margin-left:16px;font-style:normal}
.smalllinks{display:flex;gap:26px;margin-top:70px;flex-wrap:wrap}

.form{max-width:760px;display:grid;gap:34px}
.field{display:grid;gap:8px}
.field>span{color:var(--muted);font-size:12px}
.field input,.field textarea{border:0;border-bottom:1px solid var(--line);background:transparent;padding:8px 0;border-radius:0;width:100%}
.field input:focus,.field textarea:focus{outline:0;border-color:var(--ink)}
.field textarea{border:1px solid var(--line);padding:14px;min-height:240px;line-height:1.6;resize:vertical}
.field .t-in{font:400 30px/1.2 var(--f-text)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:34px}
.status{color:var(--muted);font-size:13px;min-height:20px}
.status.err{color:var(--bad)}

/* ---------- sign in ---------- */
.auth{min-height:100vh;display:grid;align-content:center;padding:60px var(--gut-r) 60px var(--gut);max-width:1180px;margin:0 auto}
.auth h1{margin:0 0 60px;font-size:clamp(44px,7vw,84px)}
.auth form{max-width:380px;display:grid;gap:28px}

#toast{position:fixed;left:50%;bottom:calc(var(--bar) + 24px);transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:9px 18px;border-radius:999px;font-size:13px;font-weight:500;z-index:50}

@media (max-width:820px){
  .row{grid-template-columns:36px minmax(0,1fr);gap:6px 14px}
  .row .m{grid-column:2}.row .d{display:none}
  .l{grid-template-columns:30px minmax(0,1fr);gap:6px 14px}
  .l .e,.l .acts{grid-column:2}.l .acts{justify-content:flex-start}
  .v{grid-template-columns:minmax(0,1fr) auto;gap:4px 14px}
  .v .src,.v .due{display:none}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid2{grid-template-columns:1fr}
  main{padding-top:120px}
  .top{gap:18px}
}
@media (prefers-reduced-motion: reduce){*{transition:none!important}}