/* write-theme.css: design tokens + shared refinements for both clients.
   Light (warm paper) by default, dark automatically via the OS setting, and
   a manual override with <html data-theme="light|dark"> (set by WU.initTheme).
   Legacy token names (--ink-*, --paper, --brass-*) are kept, but now mean ROLES:
   ink-950 page chrome, ink-900 recessed surface, ink-800 raised surface/card,
   ink-700 hairline, ink-600 border, paper primary text, pencil muted text,
   brass accent, brass-soft accent text, brass-dim eyebrow text. */
:root{
  --serif:'Fraunces', Georgia, serif; --sans:'Source Sans 3', system-ui, sans-serif; --mono:'Source Sans 3', system-ui, sans-serif;
  color-scheme:light;
  --ink-950:#f7f4ed; --ink-900:#efeadf; --ink-800:#ffffff; --ink-700:#e6dfcf; --ink-600:#d3caB4;
  --paper:#1c2427; --paper-dim:#e2dac6; --text-soft:#3c474b; --pencil:#667378;
  --brass:#1d6b64; --brass-soft:#17564f; --brass-dim:#8a7440; --on-accent:#ffffff;
  --ok:#2c8a56; --danger:#c8372d; --danger-text:#b42318;
  --page:#fffdf8; --page-text:#241e12; --page-muted:#6b6252; --page-line:#ece4d2;
  --hover:rgba(28,36,39,.06); --chip-bg:rgba(255,255,255,.9); --scrim:rgba(20,28,30,.45);
  --diff-old-bg:rgba(200,55,45,.10); --diff-old-text:#a1302a; --diff-new-bg:rgba(44,138,86,.12); --diff-new-text:#1f6a40;
  --sel:rgba(29,107,100,.22); --shadow:0 1px 2px rgba(28,36,39,.06), 0 6px 18px rgba(28,36,39,.07);
  --warn:#b7791f; --info:#2f5fb3;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --ink-950:#0e1416; --ink-900:#131b1e; --ink-800:#1a2428; --ink-700:#27333a; --ink-600:#36474f;
    --paper:#ece7dc; --paper-dim:#2a3438; --text-soft:#cfc9ba; --pencil:#93a3a9;
    --brass:#4db3a5; --brass-soft:#86d3c8; --brass-dim:#c2a765; --on-accent:#05201c;
    --ok:#5fbf8a; --danger:#e0564d; --danger-text:#f2b8b5;
    --page:#161d1f; --page-text:#e8e2d3; --page-muted:#8f9a96; --page-line:#263034;
    --hover:rgba(255,255,255,.06); --chip-bg:rgba(14,20,22,.8); --scrim:rgba(0,0,0,.6);
    --diff-old-bg:rgba(224,86,77,.15); --diff-old-text:#e3aaa6; --diff-new-bg:rgba(95,191,138,.15); --diff-new-text:#a9d8bc;
    --sel:rgba(77,179,165,.3); --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 22px rgba(0,0,0,.28);
    --warn:#e0b05a; --info:#8fb2f0;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --ink-950:#0e1416; --ink-900:#131b1e; --ink-800:#1a2428; --ink-700:#27333a; --ink-600:#36474f;
  --paper:#ece7dc; --paper-dim:#2a3438; --text-soft:#cfc9ba; --pencil:#93a3a9;
  --brass:#4db3a5; --brass-soft:#86d3c8; --brass-dim:#c2a765; --on-accent:#05201c;
  --ok:#5fbf8a; --danger:#e0564d; --danger-text:#f2b8b5;
  --page:#161d1f; --page-text:#e8e2d3; --page-muted:#8f9a96; --page-line:#263034;
  --hover:rgba(255,255,255,.06); --chip-bg:rgba(14,20,22,.8); --scrim:rgba(0,0,0,.6);
  --diff-old-bg:rgba(224,86,77,.15); --diff-old-text:#e3aaa6; --diff-new-bg:rgba(95,191,138,.15); --diff-new-text:#a9d8bc;
  --sel:rgba(77,179,165,.3); --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 22px rgba(0,0,0,.28);
  --warn:#e0b05a; --info:#8fb2f0;
}
body{font-variant-numeric:tabular-nums; -webkit-font-smoothing:antialiased;}
button{font-family:inherit;}
:focus-visible{outline:2px solid var(--brass); outline-offset:2px;}

/* ---- calmer chrome: softer radii, real elevation, no all-caps mono eyebrows */
.eyebrow,.wu-sub,.wu-sec,.wu-label,.modal-card label{letter-spacing:.07em;}
.book-cover{box-shadow:var(--shadow) !important; border-radius:6px 10px 10px 6px !important; position:relative;}
.book-cover::before{content:''; position:absolute; left:0; top:0; bottom:0; width:7px; background:linear-gradient(90deg, rgba(0,0,0,.22), rgba(0,0,0,0)); z-index:1; pointer-events:none;}
.book-cover{background:linear-gradient(155deg, #1f5f5a, #143f3c) !important;}
.book-cover .cover-fallback{color:#f3e7c4 !important; font-size:16px !important;}
.book-card .row-title{font-weight:500;}
.library-add,.fab{transition:transform .12s ease, box-shadow .12s ease;}
.library-add{background:var(--brass) !important; color:var(--on-accent) !important; box-shadow:var(--shadow) !important;}
.library-add:active,.fab:active{transform:scale(.94);}
.wu-btn.primary,#loginSubmit,.modal-create{background:var(--brass) !important; border-color:var(--brass) !important; color:var(--on-accent) !important;}
.wu-btn,.modal-cancel{box-shadow:0 1px 0 rgba(0,0,0,.03);}
.wu-card,.modal-card{box-shadow:0 24px 60px rgba(10,16,18,.28) !important;}
.toast{background:var(--paper) !important; color:var(--ink-950) !important; border:none !important; box-shadow:var(--shadow);}
.toast.error{background:var(--danger) !important; color:#fff !important;}
.login-mark,.rail-mark{border-color:var(--brass) !important; color:var(--brass-soft) !important;}

/* ---- chapter rows: number, title, status chip, progress */
.chapter-list-row{background:var(--ink-800) !important; border:1px solid var(--ink-700) !important; border-radius:12px !important; padding:14px 14px !important; margin-bottom:10px !important; box-shadow:var(--shadow); transition:border-color .12s, transform .12s;}
.chapter-list-row:hover{border-color:var(--brass) !important;}
.chapter-list-row .wu-ch-num{flex:none; width:32px; height:32px; border-radius:50%; background:var(--ink-900); color:var(--pencil); font-family:var(--serif); font-size:14px; display:flex; align-items:center; justify-content:center;}
.chapter-list-row.is-final .wu-ch-num{background:var(--brass); color:var(--on-accent);}
.chapter-list-row .row-title{font-size:16.5px !important; font-weight:500; color:var(--paper) !important;}
.chapter-list-row .row-meta{font-family:var(--sans) !important; font-size:12.5px !important; color:var(--pencil) !important; display:flex; align-items:center; gap:8px; margin-top:4px;}
.wu-status{display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; padding:2px 9px; border-radius:10px; background:var(--ink-900); color:var(--pencil);}
.wu-status::before{content:''; width:6px; height:6px; border-radius:50%; background:currentColor;}
.wu-status.drafted{color:var(--warn); background:color-mix(in srgb, var(--warn) 14%, transparent);}
.wu-status.editing{color:var(--info); background:color-mix(in srgb, var(--info) 14%, transparent);}
.wu-status.dictating{color:var(--danger-text); background:color-mix(in srgb, var(--danger) 12%, transparent);}
.wu-status.final{color:var(--ok); background:color-mix(in srgb, var(--ok) 14%, transparent);}
.wu-summary{background:var(--ink-800); border:1px solid var(--ink-700); border-radius:14px; padding:16px; margin:0 0 16px; box-shadow:var(--shadow);}
.wu-summary .top{display:flex; justify-content:space-between; align-items:baseline; gap:10px;}
.wu-summary .big{font-family:var(--serif); font-size:20px; font-weight:500; color:var(--paper);}
.wu-summary .sub{font-size:12.5px; color:var(--pencil);}
.wu-meter{height:8px; background:var(--ink-900); border-radius:6px; overflow:hidden; margin:12px 0 4px; display:flex;}
.wu-meter i{display:block; height:100%; background:var(--brass); transition:width .3s;}
.wu-meter i.part{background:color-mix(in srgb, var(--brass) 40%, transparent);}
.wu-callout{display:flex; align-items:center; gap:12px; background:color-mix(in srgb, var(--brass) 9%, var(--ink-800)); border:1px solid color-mix(in srgb, var(--brass) 40%, var(--ink-700)); border-radius:12px; padding:12px 14px; margin:0 0 14px; font-size:13.5px; color:var(--text-soft);}
.wu-callout .msg{flex:1; line-height:1.45;}
.wu-callout b{color:var(--paper);}
.wu-ready{background:color-mix(in srgb, var(--ok) 10%, var(--ink-800)) !important; border-color:color-mix(in srgb, var(--ok) 45%, var(--ink-700)) !important;}

/* ---- empty states */
.wu-hero{text-align:center; padding:34px 22px 10px; color:var(--text-soft);}
.wu-hero .ic{width:56px; height:56px; border-radius:50%; background:color-mix(in srgb, var(--brass) 12%, transparent); color:var(--brass); display:flex; align-items:center; justify-content:center; margin:0 auto 14px;}
.wu-hero .ic svg{width:26px; height:26px;}
.wu-hero h3{font-family:var(--serif); font-weight:500; font-size:19px; color:var(--paper); margin-bottom:6px;}
.wu-hero p{font-size:14px; line-height:1.55; max-width:320px; margin:0 auto 16px;}
.wu-hero .wu-btn{flex:none; padding:11px 20px;}
.page-empty{border:1.5px dashed var(--page-line); border-radius:14px; padding:30px 20px; text-align:center; color:var(--page-muted);}
.page-empty h3{font-family:var(--serif); font-weight:500; font-size:18px; color:var(--page-text); margin-bottom:6px;}
.page-empty p{font-size:14px; line-height:1.55; margin:0 auto; max-width:300px;}
.page-empty .mic{width:46px; height:46px; border-radius:50%; background:var(--danger); color:#fff; display:flex; align-items:center; justify-content:center; margin:0 auto 12px;}
.page-empty .mic svg{width:20px; height:20px;}

/* ---- theme toggle */
.wu-theme-btn svg{width:18px; height:18px;}

/* ================= batch 2: dictation, editor chat, desktop reading width ================= */

/* ---- recording sheet / modal */
.sheet,.record-modal{background:var(--ink-950) !important; box-shadow:0 -10px 40px rgba(10,16,18,.25);}
.sheet .chapter-label,.record-modal .chapter-label{display:inline-flex; align-items:center; gap:8px; color:var(--danger-text) !important; font-weight:600; letter-spacing:.12em !important;}
.sheet .chapter-label::before,.record-modal .chapter-label::before{content:''; width:9px; height:9px; border-radius:50%; background:var(--danger); animation:wu-blink 1.2s ease-in-out infinite;}
@keyframes wu-blink{0%,100%{opacity:1;}50%{opacity:.25;}}
.sheet .timer,.record-modal .timer{font-family:var(--serif) !important; font-weight:400 !important; font-size:44px !important; letter-spacing:.02em; color:var(--paper) !important;}
.waveform span{background:var(--danger) !important; width:4px !important; opacity:.85 !important;}
.big-stop{position:relative; box-shadow:0 6px 18px color-mix(in srgb,var(--danger) 40%,transparent);}
.big-stop::after{content:''; position:absolute; inset:-9px; border-radius:50%; border:2px solid var(--danger); opacity:.35; animation:wu-ring 1.8s ease-out infinite;}
@keyframes wu-ring{0%{transform:scale(.85); opacity:.5;}100%{transform:scale(1.25); opacity:0;}}
.stop-label{font-size:13.5px !important; line-height:1.45; padding:0 14px;}
.fab{box-shadow:0 8px 22px color-mix(in srgb,var(--danger) 45%,transparent), 0 0 0 5px var(--page) !important;}
.dictate-btn{border-width:1.5px !important; background:color-mix(in srgb,var(--danger) 7%,transparent) !important;}
.dictate-btn:hover{background:color-mix(in srgb,var(--danger) 14%,transparent) !important;}
.dictation-banner{font-family:var(--sans) !important; font-size:13px !important; color:var(--text-soft) !important; border-style:solid !important; border-color:color-mix(in srgb,var(--brass) 45%,transparent) !important;}
.dictation-banner.failed{color:var(--danger-text) !important;}
.dictation-banner .spinner{border-color:var(--brass) !important; border-top-color:transparent !important; width:14px !important; height:14px !important;}

/* ---- editor conversation: bubbles instead of rails */
#notesThread,.thread{display:flex; flex-direction:column; gap:14px;}
.note{padding:0 !important; max-width:92%; display:flex; flex-direction:column;}
.note::before{display:none !important;}
.note .who{font-family:var(--sans) !important; font-size:11px !important; font-weight:600; letter-spacing:.04em !important; text-transform:none !important; margin:0 0 4px 4px;}
.note .body{padding:10px 13px; border-radius:14px; font-size:14px !important; line-height:1.55 !important;}
.note.author{align-self:flex-end; align-items:flex-end;}
.note.author .who{margin:0 4px 4px 0;}
.note.author .body{background:var(--brass); color:var(--on-accent) !important; border-bottom-right-radius:4px;}
.note.author .who{color:var(--pencil) !important;}
.note.editor{align-self:flex-start;}
.note.editor .body{background:var(--ink-800); border:1px solid var(--ink-700); color:var(--paper) !important; border-bottom-left-radius:4px; box-shadow:var(--shadow);}
.diff-box{border-radius:10px !important; border-color:var(--ink-700) !important; background:var(--ink-800); box-shadow:var(--shadow);}
.diff-old,.diff-new{padding:10px 13px !important; font-size:14px !important;}
.note-actions{gap:8px !important;}
.note-actions button{min-height:36px; padding:0 16px !important; border-radius:18px !important; font-size:13px !important;}
.note-actions .accept{background:var(--brass) !important; border-color:var(--brass) !important; color:var(--on-accent) !important;}
.applied-label,.note-actions .applied-label{font-family:var(--sans) !important; font-weight:600; color:var(--ok) !important;}
.thinking{font-family:var(--sans) !important; font-size:13px !important; padding-left:4px !important; color:var(--pencil); animation:wu-blink 1.4s ease-in-out infinite;}
#notesThread:empty::before,.thread:empty::before{content:'Ask the editor for anything: “make this opening punchier”, “shorten this paragraph”. Select a line in the manuscript to point at it.'; display:block; text-align:center; color:var(--pencil); font-size:13.5px; line-height:1.55; padding:30px 22px;}
.chat-input .box,.thread-input .box{background:var(--ink-800) !important; box-shadow:var(--shadow); border-color:var(--ink-700) !important;}
.chat-input .box:focus-within,.thread-input .box:focus-within{border-color:var(--brass) !important;}
.send-btn{background:var(--brass) !important; color:var(--on-accent);}
.send-btn svg{color:var(--on-accent); stroke:var(--on-accent);}
.hint{font-family:var(--sans) !important; font-size:11.5px !important;}
.style-chip{font-family:var(--sans) !important; font-size:12px !important; font-weight:600; cursor:pointer;}
.sel-bubble,.sel-toolbar{background:var(--paper) !important; border-color:var(--paper) !important;}
.sel-bubble::after{background:var(--paper) !important; border-color:var(--paper) !important;}
.sel-bubble button,.sel-toolbar button{color:var(--ink-950) !important;}
.sel-bubble button.primary{color:var(--brass-soft) !important;}
.sel-bubble button.primary,.sel-toolbar button:hover{filter:none;}
.tabbar{background:var(--ink-950) !important;}
.tab.active{color:var(--brass) !important;}
.tab .badge{background:var(--danger) !important; color:#fff !important;}

/* ---- desktop: comfortable reading column, centred under the header */
@media (min-width:900px){
  .manuscript-col .doc-header{padding-inline:max(56px, calc((100% - 720px) / 2)) !important;}
  .manuscript-scroll{padding-inline:max(56px, calc((100% - 720px) / 2)) !important;}
  .manuscript-col .dictation-banner{margin-inline:max(56px, calc((100% - 720px) / 2)) !important;}
  .manuscript{max-width:none !important; font-size:19.5px !important; line-height:1.9 !important;}
  .rail{background:var(--ink-900);}
  .rail button{border-radius:10px !important; padding:9px !important; transition:background .12s,color .12s;}
  .rail button:hover{background:var(--hover); color:var(--brass-soft);}
}
.manuscript{font-feature-settings:"onum","kern"; hyphens:auto; text-wrap:pretty;}

/* ================= batch 3: dialogs, login, admin, dark-mode polish ================= */
input[type=checkbox]{accent-color:var(--brass); width:16px; height:16px;}
.wu-card,.modal-card{background:var(--ink-800) !important; border-color:var(--ink-700) !important;}
.wu-card .wu-input,.modal-card input[type=text],.wu-card input.wu-input{background:var(--ink-950) !important;}
.wu-input:focus,#loginForm input:focus,.modal-card input[type=text]:focus{border-color:var(--brass) !important; box-shadow:0 0 0 3px color-mix(in srgb,var(--brass) 20%,transparent);}
.wu-opt{background:var(--ink-950) !important;}
.wu-opt.on{border-color:var(--brass) !important; background:color-mix(in srgb,var(--brass) 10%,var(--ink-800)) !important;}
.wu-fmt{background:var(--ink-950) !important;}
.wu-fmt:hover:not(:disabled){background:color-mix(in srgb,var(--brass) 8%,var(--ink-950)) !important;}
.wu-screen{background:var(--ink-950);}
.wu-screen-head{border-bottom-color:var(--ink-700) !important;}
.wu-sec,.wu-sub{font-family:var(--sans) !important; font-weight:600; font-size:11.5px !important; color:var(--pencil) !important;}
.wu-person{background:var(--ink-800); border:1px solid var(--ink-700) !important; border-radius:12px; padding:12px 14px !important; margin-bottom:8px; box-shadow:var(--shadow); gap:12px !important;}
.wu-person .nm{font-size:16.5px !important; font-weight:500;}
.wu-person .em{font-family:var(--sans) !important; font-size:12.5px !important;}
.wu-av{flex:none; width:38px; height:38px; border-radius:50%; background:color-mix(in srgb,var(--brass) 16%,var(--ink-900)); color:var(--brass-soft); font-weight:600; font-size:14px; display:flex; align-items:center; justify-content:center;}
.wu-tag{font-family:var(--sans) !important; font-size:10.5px !important; font-weight:600; border-color:transparent !important; background:color-mix(in srgb,var(--brass) 16%,transparent); color:var(--brass-soft) !important;}
.wu-tag.off{background:color-mix(in srgb,var(--danger) 14%,transparent); color:var(--danger-text) !important;}
.wu-voice,.wu-metric,.wu-src,.wu-sbanner{box-shadow:none;}
.wu-voice{background:var(--ink-800) !important;}
.wu-savebar{background:var(--ink-950) !important;}
.wu-hdr-btn,.wu-kebab{border-radius:10px !important; min-width:36px; min-height:36px; justify-content:center;}
.wu-hdr-btn:hover,.wu-kebab:hover{background:var(--hover) !important; color:var(--brass-soft) !important;}
.wu-menu-item{border-bottom-color:var(--ink-700) !important;}
.wu-menu-item.danger{color:var(--danger-text) !important;}
.wu-seg{background:var(--ink-900); border-color:var(--ink-700) !important; border-radius:10px !important;}
.wu-seg button.on{border-radius:8px;}

/* login */
.login-screen{background:radial-gradient(120% 70% at 50% 0%, color-mix(in srgb,var(--brass) 10%,var(--ink-950)), var(--ink-950) 60%) !important;}
.login-mark{width:54px !important; height:54px !important; font-size:28px !important; border-radius:12px !important; background:var(--ink-800); box-shadow:var(--shadow);}
.login-card h1{font-size:30px !important; margin-bottom:6px !important;}
.login-tag{font-size:14px; color:var(--pencil); margin:0 0 28px;}
#loginForm input{background:var(--ink-800) !important; border-color:var(--ink-600) !important; padding:13px 14px !important; border-radius:10px !important;}
#loginSubmit{padding:13px !important; border-radius:10px !important;}

/* library cards: lift on hover, softer meta */
.book-card .row-meta{font-family:var(--sans) !important; font-size:12.5px !important;}
.book-card:hover .book-cover{transform:translateY(-3px); transition:transform .15s;}
.library-header h1,.wu-screen-head h1{letter-spacing:-.01em;}
.library-header{border-bottom-color:var(--ink-700) !important;}
.topbar{border-bottom:1px solid var(--ink-700);}
.topbar .eyebrow{font-family:var(--sans) !important; font-size:11px !important; font-weight:600; letter-spacing:.06em;}
.tabbar{border-top-color:var(--ink-700) !important;}


/* ================= batch 4: scrolling + desktop navigation ================= */
/* Flex/grid children need min-height:0 or long content grows the box instead of scrolling. */
.library-screen{overflow:hidden;}
.library-list{min-height:0 !important; overflow-y:auto !important; -webkit-overflow-scrolling:touch;}
.app{grid-template-rows:minmax(0,1fr);}
.manuscript-col,.manuscript-scroll,.margin,.thread{min-height:0 !important;}
.manuscript-scroll{overflow-y:auto !important;}
.thread{overflow-y:auto !important;}

.app{grid-template-columns:248px minmax(0,1fr) 340px !important;}
.rail{align-items:stretch !important; padding:16px 12px !important; gap:0 !important; min-height:0; overflow:hidden;}
.rail-top{display:flex; align-items:center; gap:10px; margin-bottom:14px;}
.rail-top .rail-mark{flex:none;}
.rail-top .wm{font-family:var(--serif); font-size:18px; color:var(--paper);}
.rail-back{display:flex; align-items:center; gap:8px; width:100%; text-align:left; background:none; border:none; color:var(--pencil); font-size:13px; font-weight:600; padding:8px 10px !important; cursor:pointer;}
.rail-back svg{width:14px; height:14px; flex:none;}
.rail-book{margin:10px 0 6px; padding:10px 10px 6px; border-top:1px solid var(--ink-700); cursor:pointer;}
.rail-book:hover .t{color:var(--brass-soft);}
.rail-book .k{font-size:11px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--brass-dim);}
.rail-book .t{font-family:var(--serif); font-size:17px; line-height:1.25; color:var(--paper); margin-top:3px;}
.rail-book .s{font-size:12px; color:var(--pencil); margin-top:4px;}
.rail-chapters{flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:2px; padding:2px 0;}
.rail-ch{display:flex; align-items:center; gap:10px; width:100%; text-align:left; background:none; border:none; color:var(--text-soft); font-size:14px; padding:8px 10px !important; border-radius:10px !important; cursor:pointer;}
.rail-ch .n{flex:none; width:24px; height:24px; border-radius:50%; background:var(--ink-800); color:var(--pencil); font-family:var(--serif); font-size:12px; display:flex; align-items:center; justify-content:center;}
.rail-ch .nm{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.rail-ch .d{flex:none; width:8px; height:8px; border-radius:50%; background:var(--ink-600);}
.rail-ch .d.drafted{background:var(--warn);} .rail-ch .d.editing{background:var(--info);} .rail-ch .d.final{background:var(--ok);} .rail-ch .d.dictating{background:var(--danger);}
.rail-ch:hover{background:var(--hover) !important;}
.rail-ch.cur{background:color-mix(in srgb,var(--brass) 14%,transparent) !important; color:var(--paper); font-weight:600;}
.rail-ch.cur .n{background:var(--brass); color:var(--on-accent);}
.rail-foot{display:flex; gap:6px; align-items:center; border-top:1px solid var(--ink-700); padding-top:10px; margin-top:8px;}
.rail-foot .sp{flex:1;}
.rail-foot button{display:flex; align-items:center; justify-content:center; background:none; border:none; color:var(--pencil); cursor:pointer; min-width:36px; min-height:36px;}
@media (max-width:1180px){ .app{grid-template-columns:210px minmax(0,1fr) 300px !important;} }