:root{
  /* Day — warm white, near-black, orange. The script page itself is strictly
     black on white; only the surround carries warmth. */
  --surround:#FAF9F5; --page:#FFFFFF; --ink:#000000; --muted:#8A867F;
  --accent:#D97757; --rule:rgba(0,0,0,.13);
  --chrome:#1F1E1C; --chrome-muted:#6E6B66; --shadow:0 1px 3px rgba(0,0,0,.07), 0 12px 32px rgba(0,0,0,.06);
}
:root[data-mode="night"]{
  /* Night — Dusk Convoy, as originally chosen: blue-grey surround, amber accent. */
  --surround:#12171C; --page:#1A212A; --ink:#C9D2DA; --muted:#7C8B99;
  --accent:#D89434; --rule:rgba(201,210,218,.16);
  --chrome:#C9D2DA; --chrome-muted:#6F7E8C; --shadow:0 18px 50px rgba(0,0,0,.6);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--surround); color:var(--chrome);
  font-family:'Courier New',Courier,monospace;
  display:flex; flex-direction:column; overflow:hidden;
}
button,input{font-family:inherit}
[hidden]{display:none !important}

/* ---------- shared ---------- */
.btn{background:transparent; color:var(--chrome-muted); border:1px solid var(--rule);
  padding:.55rem .85rem; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; cursor:pointer;
  white-space:nowrap}
.btn:hover{color:var(--accent); border-color:var(--accent)}
.btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.btn.primary{color:var(--accent); border-color:var(--accent)}
.btn.primary:hover{background:var(--accent); color:var(--surround)}
.btn.wide{width:100%; margin-top:.4rem; padding:.75rem}
.panel{border:1px solid var(--rule); padding:1.2rem}
.panel h2{margin:0 0 1rem; font-size:.68rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--chrome-muted); font-weight:400}
label{display:block; font-size:.64rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--chrome-muted); margin-bottom:.35rem}
input[type=text],input[type=email],input[type=password]{
  width:100%; padding:.62rem .65rem; margin-bottom:1rem; background:transparent;
  color:var(--chrome); border:1px solid var(--rule); border-radius:0; font-size:.9rem}
input:focus{outline:2px solid var(--accent); outline-offset:1px}
.row{display:flex; gap:.6rem; flex-wrap:wrap}
.msg{min-height:1.3rem; margin:.7rem 0 0; font-size:.72rem; letter-spacing:.05em; color:var(--chrome-muted)}
.msg[data-bad]{color:var(--accent)}
.linklike{background:none; border:0; padding:0; font:inherit; color:var(--accent);
  text-decoration:underline; cursor:pointer}
.tagline{color:var(--chrome-muted); font-size:.74rem; letter-spacing:.1em; margin:.5rem 0 0}
.screen{flex:1 1 auto; overflow:auto}

/* ---------- auth ---------- */
.auth{display:flex; align-items:center; justify-content:center; padding:2rem 1.25rem}
.auth-inner{width:min(24rem,100%); text-align:center}
.auth-inner .brandmark{justify-content:center}
.auth h1{margin:0; font-size:1.5rem; letter-spacing:.24em; text-transform:uppercase}
.auth .panel{margin-top:2rem}
.tabs{display:flex; margin-bottom:1.3rem; border-bottom:1px solid var(--rule)}
.tab{background:transparent; border:0; color:var(--chrome-muted); cursor:pointer;
  padding:.5rem .2rem; margin-right:1.3rem; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase}
.tab.on{color:var(--accent); box-shadow:inset 0 -2px 0 var(--accent)}

/* ---------- home ---------- */
.home{padding:2.5rem 1.25rem 5rem}
.home-inner{max-width:46rem; margin:0 auto}
.home-head{display:flex; align-items:flex-start; gap:1rem; margin-bottom:2.4rem}
/* margin-left:auto on the button row, not flex-grow on the title — an auto margin
   eats all leftover space and pushes the row flush right without ever compressing
   it, so adding another item (like the toggle) can't tip it into wrapping the way
   competing flex-grow on both sides could. */
.home-head .row{margin-left:auto; flex-wrap:nowrap}
.home h1{margin:0; font-size:clamp(1.4rem,5vw,2.1rem); letter-spacing:.3em; text-transform:uppercase}

/* The logo ships as one black-on-transparent PNG. Rather than keep a separate light
   and dark copy in sync, it's used as a CSS mask over a plain background-color — the
   shape comes from the file, the color comes from --chrome, so it repaints itself
   the instant day/night mode flips, same as every other icon in the app. */
.brandmark{display:flex; align-items:center; gap:.1rem}   /* mark IS the S, so it sits tight against CRIPTNIB */
.logo-mark{display:inline-block; flex:0 0 auto; width:1.05em; height:.87em;
  background-color:var(--chrome);
  -webkit-mask:url(/logo.png) center/contain no-repeat;
  mask:url(/logo.png) center/contain no-repeat}

.plist{list-style:none; margin:0 0 0; padding:0}
.panel + .plist{margin-top:2.4rem}
.plist-foot{border-bottom:1px solid var(--rule); display:flex; justify-content:flex-end;
  padding:1rem .2rem; margin:0 0 2.5rem}
.acct-row{margin:0 0 2rem}

/* ---------- breakdown header ---------- */
.plist li{border-bottom:1px solid var(--rule); display:flex; align-items:baseline; gap:.75rem; padding:1rem .2rem}
.plist .open{flex:1 1 auto; background:transparent; border:0; text-align:left; cursor:pointer; color:var(--chrome)}
.plist .open:hover .pt{color:var(--accent)}
.pt{display:block; font-size:1.05rem; letter-spacing:.06em; text-transform:uppercase}
.pm{display:block; margin-top:.3rem; color:var(--chrome-muted); font-size:.66rem; letter-spacing:.1em}
.del{background:transparent; border:0; color:var(--chrome-muted); cursor:pointer;
  font-size:.62rem; letter-spacing:.14em; text-transform:uppercase}
.del:hover{color:var(--accent)}
.del[data-armed]{color:var(--accent)}
.none{color:var(--chrome-muted); font-size:.8rem; padding:1.5rem 0 2.5rem}

/* ---------- editor chrome ---------- */
.topbar{display:flex; align-items:center; gap:.75rem; padding:.6rem .9rem;
  border-color:var(--rule); flex-wrap:wrap; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase}
.topbar{border-bottom:1px solid var(--rule); flex:0 0 auto}
.botbar{flex:0 0 auto; display:flex; align-items:center; gap:.75rem; flex-wrap:wrap;
  border-top:1px solid var(--rule); padding:.6rem .9rem;
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase}
/* In-flow, below the script — never floats over the page you're writing on.
   First thing to go on a narrow window, since the stats matter more than the hint. */
.hint-stat{color:var(--chrome-muted); order:-1}
@media(max-width:760px){ .hint-stat{display:none} }
.doctitle{font-size:.85rem; letter-spacing:.24em; font-weight:700; margin-right:auto;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:45vw}
.stat{color:var(--chrome-muted)}
.stat b{color:var(--chrome); font-weight:400}
.spacer{margin-left:auto}
.toggle{display:flex; border:1px solid var(--rule)}
.toggle button{border:0; background:transparent; color:var(--chrome-muted);
  padding:.4rem .8rem; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; cursor:pointer}
.toggle button[aria-pressed="true"]{background:var(--accent); color:var(--surround)}
.ham{width:2.2rem; height:2.1rem; border:1px solid var(--rule); background:transparent;
  display:flex; flex-direction:column; justify-content:center; gap:4px; align-items:center; cursor:pointer}
.ham span{display:block; width:14px; height:1px; background:var(--chrome-muted)}
.ham:hover span{background:var(--accent)}

.scrim{position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:40}
.menu{position:fixed; top:0; left:0; bottom:0; width:min(18rem,82vw); z-index:41;
  background:var(--surround); border-right:1px solid var(--rule); padding:1.1rem .9rem; overflow:auto}
.menu h3{margin:.4rem .3rem 1rem; font-size:.66rem; letter-spacing:.24em; color:var(--chrome-muted);
  text-transform:uppercase; font-weight:400}
.menu button{display:block; width:100%; text-align:left; background:transparent; border:0;
  color:var(--chrome); padding:.72rem .3rem; cursor:pointer; font-size:.74rem;
  letter-spacing:.13em; text-transform:uppercase; border-bottom:1px solid var(--rule)}
.menu button:hover{color:var(--accent)}
.menu button small{display:block; margin-top:.25rem; color:var(--chrome-muted);
  font-size:.6rem; letter-spacing:.1em; text-transform:none}
.menu .sub{padding-left:1.1rem}
.menu .grp{margin-top:1.4rem}

/* Breakdown's reduced menu is handled in JS (toggling .hidden on the same elements
   every other optional menu item already uses) rather than a CSS class — [hidden]
   is !important in this stylesheet by design, so a class-based override can't win
   against it, and JS matches the pattern mShare/mCollab already use above. */

.dialog{position:fixed; z-index:50; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(30rem,92vw); max-height:86vh; overflow:auto; background:var(--surround);
  border:1px solid var(--accent); padding:1.2rem}
.dialog h3{margin:0 0 1rem; font-size:.8rem; letter-spacing:.18em; text-transform:uppercase}
.dialog .rev{display:flex; gap:.75rem; align-items:baseline; padding:.6rem .1rem;
  border-bottom:1px solid var(--rule); font-size:.72rem; letter-spacing:.06em}
.dialog .rev span{flex:1 1 auto; color:var(--chrome-muted)}

/* ---------- the page ---------- */
.scroll{flex:1 1 auto; overflow:auto; padding:2rem 1rem 2.5rem}
.sheet{width:min(100%,52rem); margin:0 auto; background:var(--page); color:var(--ink);
  box-shadow:var(--shadow); padding:3rem 1.5rem 4rem}
.inner{width:60ch; max-width:100%; margin:0 auto; font-size:16px; line-height:1.35}
@media(max-width:700px){ .inner{font-size:13px} .sheet{padding:1.5rem .75rem 3rem} }

.el{outline:none; white-space:pre-wrap; word-break:break-word; min-height:1.35em; caret-color:var(--accent)}
.el:empty::after{content:attr(data-ph); color:var(--muted); opacity:.55}
.el.slug{text-transform:uppercase; font-weight:700; margin-top:1.35em}
/* In-flow, not absolutely positioned — the earlier version used a negative-offset
   pseudo-element that could get clipped by the scroll container and was easy to
   miss. This is guaranteed visible, at the cost of not sitting in the true margin
   the way the PDF export does (which positions it precisely, on both sides). */
.el.slug[data-num]::before{ content: attr(data-num) "   "; color: var(--muted); font-weight:400; }
.el.action{margin-top:1.35em}
.el.char{text-transform:uppercase; margin-left:22ch; margin-top:1.35em; width:38ch}
.el.paren{margin-left:16ch; width:20ch}
.el.dial{margin-left:10ch; width:35ch}
.el.trans{text-transform:uppercase; text-align:right; margin-top:1.35em}
.el.center{text-align:center; text-transform:uppercase; margin-top:2.7em}
.el.fadein{text-transform:uppercase}
.el:first-child{margin-top:0}
@media(max-width:700px){
  .el.char{margin-left:14ch;width:auto} .el.paren{margin-left:10ch;width:22ch} .el.dial{margin-left:6ch;width:40ch}
}
.pbreak{position:relative; height:0; border-top:1px dashed var(--rule); margin:2.4em 0}
.pbreak span{position:absolute; right:0; top:-.55em; background:var(--page); padding-left:.6em;
  font-size:.62rem; letter-spacing:.2em; color:var(--muted); text-transform:uppercase}

/* A split dialogue's continuation — real block flow, not the plain break's
   absolute-positioned label, since this needs three stacked lines: (MORE) where
   the dialogue left off, the page rule, and CONT'D where it picks back up. (MORE)
   sits at the parenthetical indent and CONT'D at the character indent, same as
   the columns they're echoing. */
.pbreak.split{height:auto; border-top:0; margin:1.6em 0; font-size:.78rem}
.pbreak.split .pb-more{margin-left:16ch; color:var(--chrome-muted)}
.pbreak.split .pb-pagerow{border-top:1px solid var(--rule); position:relative; height:0; margin:.6em 0}
.pbreak.split .pb-pagerow span{position:absolute; right:0; top:-.55em; background:var(--page);
  padding-left:.6em; font-size:.62rem; letter-spacing:.2em; color:var(--muted); text-transform:uppercase}
.pbreak.split .pb-contd{margin-left:22ch; text-transform:uppercase; color:var(--chrome-muted)}

.ac{position:absolute; z-index:20; background:var(--surround); color:var(--chrome);
  border:1px solid var(--accent); font-size:.75rem; max-width:34ch; box-shadow:0 8px 24px rgba(0,0,0,.4)}
.ac div{padding:.35rem .6rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer}
.ac div.sel{background:var(--accent); color:var(--surround)}


/* ---------- suggestion review ---------- */
.sugg{border-bottom:1px solid var(--rule); padding:1rem 0}
.sugg .why{margin:.5rem 0 .8rem; font-size:.76rem; line-height:1.5; color:var(--chrome)}
.sugg .was,.sugg .now{margin-bottom:.7rem; padding-left:.7rem; border-left:2px solid var(--rule)}
.sugg .now{border-left-color:var(--accent)}
.sugg .was>span,.sugg .now>span{display:block; font-size:.58rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--chrome-muted); margin-bottom:.35rem}
.sugg .dl{font-size:.74rem; line-height:1.45; margin-bottom:.25rem; color:var(--chrome)}
.sugg .dl i{font-style:normal; color:var(--chrome-muted); font-size:.6rem;
  letter-spacing:.12em; text-transform:uppercase; margin-right:.5rem}
.sugg .was .dl{color:var(--chrome-muted); text-decoration:line-through; text-decoration-thickness:1px}

/* ---------- notes ---------- */
.selpop{position:fixed; z-index:60; display:flex; gap:.3rem}
.selpop button{padding:.4rem .8rem; font-family:inherit; font-size:.64rem;
  letter-spacing:.14em; text-transform:uppercase; cursor:pointer; border:0}
.selpop #noteBtn{background:var(--accent); color:var(--surround)}
.selpop #hlBtn{background:var(--chrome); color:var(--surround)}
.el.hasnote{box-shadow:-0.6rem 0 0 -0.5rem var(--accent)}
.quote{border-left:2px solid var(--accent); padding:.35rem .6rem; margin:.5rem 0;
  font-size:.72rem; line-height:1.45; color:var(--chrome-muted)}
.noteitem{border-bottom:1px solid var(--rule); padding:.9rem 0}
.noteitem .nbody{margin:.45rem 0 0; font-size:.78rem; line-height:1.5; white-space:pre-wrap}
.noteitem .row{margin-top:.6rem}
.noteitem.orphan .quote{border-left-style:dashed}
.orphanflag{font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; color:var(--accent)}
textarea{width:100%; min-height:6rem; padding:.6rem; background:transparent; color:var(--chrome);
  border:1px solid var(--rule); border-radius:0; font-family:inherit; font-size:.85rem; resize:vertical}
textarea:focus{outline:2px solid var(--accent); outline-offset:1px}
.linkrow{border-bottom:1px solid var(--rule); padding:.8rem 0; font-size:.72rem}
.linkrow .u{word-break:break-all; color:var(--chrome-muted); margin:.35rem 0}
.linkrow.dead{opacity:.5}
.codebox{font-size:1rem; letter-spacing:.24em; color:var(--accent); margin:.3rem 0}

/* ---------- menu polish ---------- */
.menu h3{margin:.2rem .3rem .7rem}
.menu .grp{margin-top:1.6rem; padding-top:1.1rem; border-top:1px solid var(--rule)}

/* Review / Send / With Claude collapse — the list outgrew one screen once the
   Claude prompts landed. Script stays open above them; these use the same
   details/summary and the same +/- indicator as the Breakdown rows, so the
   interaction is one the app already teaches elsewhere. Declared after the
   polish block above so the summary's own h3 margin wins on source order. */
.menu details.grp > summary{cursor:pointer; list-style:none; display:flex;
  align-items:baseline; gap:.5rem; padding:.1rem .3rem}
.menu details.grp > summary::-webkit-details-marker{display:none}
.menu details.grp > summary::before{content:'+'; color:var(--chrome-muted);
  font-size:.8rem; width:.7rem}
.menu details.grp[open] > summary::before{content:'–'}
.menu details.grp > summary h3{margin:0}
.menu details.grp > summary:hover h3{color:var(--accent)}
.menu details.grp > button:first-of-type{margin-top:.7rem}
.menu button{border-bottom:0; padding:.62rem .3rem}
.menu button:hover{color:var(--accent)}

/* ---------- big choice buttons (export) ---------- */
.bigopt{display:block; width:100%; text-align:left; cursor:pointer;
  background:transparent; color:var(--chrome); border:1px solid var(--rule);
  padding:.85rem .9rem; margin-bottom:.6rem; font-family:inherit}
.bigopt:hover{border-color:var(--accent)}
.bigopt b{display:block; font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; font-weight:400}
.bigopt:hover b{color:var(--accent)}
.bigopt span{display:block; margin-top:.4rem; font-size:.68rem; line-height:1.5;
  color:var(--chrome-muted); letter-spacing:.02em; text-transform:none}

/* Day mode: the sheet is paper, so give it an edge rather than a heavy shadow. */
:root[data-mode="day"] .sheet{border:1px solid var(--rule)}
:root[data-mode="day"] .el:empty::after{color:#B4B0A8}

/* ---------- note threads ---------- */
.reply{margin:.6rem 0 .6rem 1rem; padding-left:.75rem; border-left:2px solid var(--rule)}
.reply .nbody{font-size:.75rem}
.btn.tiny{padding:.25rem .5rem; font-size:.58rem; margin-top:.35rem}
.replybox{margin-top:.6rem}
.replybox textarea{min-height:4rem; font-size:.8rem}
/* A line carrying notes is clickable — say so. */
.el.hasnote{cursor:pointer}

/* ---------- breakdown ---------- */
.bd{padding:2rem 1.25rem 4rem}
.bd .home-head{align-items:center}
.bd-inner{max-width:56rem; margin:0 auto}
.bdtabs{display:flex; align-items:center; gap:.3rem; flex-wrap:wrap; border-bottom:1px solid var(--rule); margin-bottom:1.4rem}
.bdtabs .stat{margin-left:auto; font-size:.7rem}
.bdtab{background:transparent; border:0; color:var(--chrome-muted); cursor:pointer;
  padding:.6rem .9rem; font-family:inherit; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase}
.bdtab.on{color:var(--accent); box-shadow:inset 0 -2px 0 var(--accent)}
.bdtab:hover{color:var(--accent)}

.bdrow{border-bottom:1px solid var(--rule)}
.bdrow summary{padding:.85rem .2rem; cursor:pointer; display:flex; align-items:baseline;
  gap:.6rem; flex-wrap:wrap; list-style:none}
.bdrow summary::-webkit-details-marker{display:none}
.bdrow summary::before{content:'+'; color:var(--chrome-muted); font-size:.8rem; width:.8rem}
.bdrow[open] summary::before{content:'–'}
.bdrow summary b{font-size:.95rem; letter-spacing:.05em; text-transform:uppercase}
.bdrow summary:hover b{color:var(--accent)}
.bddetail{padding:.2rem .2rem 1.1rem 1.4rem}
.swatch{display:inline-block; width:.7rem; height:.7rem; border-radius:2px; flex:0 0 auto}

.bdtable{width:100%; border-collapse:collapse; font-size:.76rem}
.bdtable td{padding:.4rem .5rem .4rem 0; vertical-align:top; border-bottom:1px solid var(--rule)}
.bdtable tr:last-child td{border-bottom:0}
.bdtable .tnum{width:2.5rem; color:var(--chrome-muted)}
.bdtable .nowrap{white-space:nowrap; text-align:right}
.tagname{width:100%; padding:.3rem .4rem; background:transparent; color:var(--chrome);
  border:1px solid var(--rule); border-radius:0; font-family:inherit; font-size:.76rem; margin:0}
.flagword{font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent)}

/* ---------- tag highlighting ---------- */
mark.tg{
  background:color-mix(in srgb, var(--tg) 34%, transparent);
  color:inherit; border-radius:2px; padding:0 1px;
  box-shadow:inset 0 -2px 0 color-mix(in srgb, var(--tg) 70%, transparent);
}
/* Proposed tags read as tentative — dashed rather than solid, the paper convention. */
mark.tg.prop{
  background:color-mix(in srgb, var(--tg) 16%, transparent);
  box-shadow:inset 0 -2px 0 transparent;
  border-bottom:1px dashed var(--tg);
}

.tagpanel{
  position:fixed; right:.9rem; bottom:3.6rem; z-index:45; width:min(17rem,88vw);
  background:var(--surround); border:1px solid var(--rule); padding:.8rem;
  box-shadow:0 12px 34px rgba(0,0,0,.35); max-height:70vh; overflow:auto;
}
.tp-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:.6rem}
.tp-head b{font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; font-weight:400}
.tpitem{display:flex; align-items:center; gap:.5rem; padding:.32rem .1rem;
  font-size:.72rem; letter-spacing:.02em; text-transform:none; color:var(--chrome); cursor:pointer; margin:0}
.tpitem.empty{opacity:.45}
.tpitem .tplabel{flex:1 1 auto}
.tpitem input, .tpstatus input{width:auto; margin:0; accent-color:var(--accent)}
.tpstatus{display:flex; align-items:center; gap:.5rem; font-size:.66rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--chrome-muted); padding:.4rem .1rem .6rem;
  border-bottom:1px solid var(--rule); margin-bottom:.4rem; cursor:pointer}

/* ---------- connection steps ---------- */
.dialog .steps{margin:0 0 1rem; padding-left:1.3rem; font-size:.78rem; line-height:1.8; color:var(--chrome)}
.dialog .steps li{margin-bottom:.15rem}
.dialog code{background:var(--rule); padding:.1rem .35rem; font-family:inherit}

/* ---------- connect-to-Claude dialog ---------- */
/* The URL field is readonly and exists to be copied, not typed in — it reads as a
   value being handed to you rather than an empty box asking for input. */
.dialog #mcpUrl{flex:1 1 14rem; min-width:0; font-size:.78rem; color:var(--accent)}
.dialog .rule{border:0; border-top:1px solid var(--rule); margin:1.4rem 0 1rem}
.dialog .rule + h3{margin-top:0}