:root{
  /* The look of the mockups: light grey ground, white panels, one blue. */
  --paper:#F3F3F3; --surface:#FFFFFF; --surface-2:#FAFAFA;
  --ink:#1B1B1B; --ink-2:#3D3D3D; --ink-3:#5F5F5F;
  --line:#D7D7D7; --line-2:#E8E8E8;
  --accent:#0067C0; --accent-ink:#00539B; --accent-soft:#EEF5FC; --accent-line:#BCDCF7;
  /* text that sits ON the accent: the accent goes pale in dark, so white
     would fail there and the ink has to flip with it */
  --on-accent:#FFFFFF;
  --gold:#8A6D1C; --gold-soft:#FFF6DF; --gold-line:#F0DFA2;
  --green:#3F6B45; --green-soft:#EAF5EB; --green-line:#C4E0C7;
  --plum:#5B4E8C; --plum-soft:#F0EEF9; --plum-line:#D8D2EE;
  --red:#A4262C;
  --sans:'Segoe UI',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  --serif:Georgia,'Times New Roman',Times,serif;
  --mono:'Cascadia Mono',Consolas,ui-monospace,Menlo,monospace;
  /* The font you write in, chosen in Settings. It is its own token so a
     choice reaches the writing without touching the chrome, and every
     stack below is already on the machine — nothing is downloaded,
     so a page reads the same with no connection. */
  --write:var(--sans);
  --r:4px; --r-lg:8px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#1B1B1B; --surface:#252525; --surface-2:#2B2B2B;
    --ink:#F0F0F0; --ink-2:#C8C8C8; --ink-3:#9A9A9A;
    --line:#3F3F3F; --line-2:#333333;
    --accent:#4CC2FF; --accent-ink:#8ED6FF; --accent-soft:#1E2F3D; --accent-line:#2F4A60;
    --on-accent:#0A2233;
    --gold:#E3C169; --gold-soft:#2E2812; --gold-line:#4A3F1E;
    --green:#8FD19A; --green-soft:#1C2B1F; --green-line:#2E4633;
    --plum:#B9AEDE; --plum-soft:#27223A; --plum-line:#3D3560;
    --red:#FF99A4;
  }
}
:root[data-theme="dark"]{
    --paper:#1B1B1B; --surface:#252525; --surface-2:#2B2B2B;
    --ink:#F0F0F0; --ink-2:#C8C8C8; --ink-3:#9A9A9A;
    --line:#3F3F3F; --line-2:#333333;
    --accent:#4CC2FF; --accent-ink:#8ED6FF; --accent-soft:#1E2F3D; --accent-line:#2F4A60;
    --on-accent:#0A2233;
    --gold:#E3C169; --gold-soft:#2E2812; --gold-line:#4A3F1E;
    --green:#8FD19A; --green-soft:#1C2B1F; --green-line:#2E4633;
    --plum:#B9AEDE; --plum-soft:#27223A; --plum-line:#3D3560;
    --red:#FF99A4;
}

*{box-sizing:border-box}
html,body{height:100%}
[hidden]{display:none!important}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.5;-webkit-text-size-adjust:100%}
button{font:inherit;color:inherit;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

.shell{display:flex;height:100%;overflow:hidden}

/* Rail */
.rail{flex:0 0 194px;background:var(--paper);border-right:1px solid var(--line-2);display:flex;flex-direction:column;padding:14px 10px calc(10px + env(safe-area-inset-bottom,0px));gap:3px;overflow-y:auto}
.brand{display:flex;align-items:center;gap:9px;padding:2px 8px 14px}
.brand b{font-size:15px;font-weight:600;letter-spacing:-.01em}
.mark{width:27px;height:27px;border-radius:6px;background:var(--accent);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:15px;flex:0 0 auto}
.dot{width:7px;height:7px;border-radius:50%;background:var(--ink-3);flex:0 0 auto}
.dot.ok{background:var(--green)}.dot.syncing{background:var(--gold)}.dot.offline{background:var(--red)}
#storeState{display:flex;align-items:center;gap:6px}
.dev{display:flex;align-items:center;gap:9px;padding:9px 0;border-top:1px solid var(--line-2);font-size:13px}
.dev .n{flex:1;min-width:0}
.dev .w{font-size:11.5px;color:var(--ink-3)}
.navbtn{display:flex;align-items:center;gap:10px;padding:8px 10px;border:0;background:none;border-radius:var(--r);text-align:left;color:var(--ink-2);font-size:13.5px;width:100%}
.navbtn:hover{background:var(--line-2)}
.navbtn[aria-current="true"]{background:var(--accent-soft);color:var(--accent-ink);font-weight:600}
.navbtn svg{flex:0 0 auto;opacity:.85}
.railfoot{margin-top:auto;padding:10px 8px 0;font-size:11px;color:var(--ink-3);border-top:1px solid var(--line);display:flex;flex-direction:column;gap:5px}

/* Main */
.main{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden}
.topbar{flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--line-2);background:var(--surface-2);flex-wrap:wrap}
.topbar h1{margin:0;font-size:16px;font-weight:600;letter-spacing:-.01em;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spacer{flex:1 1 auto}
.body{flex:1;min-height:0;overflow-y:auto;padding:18px 16px 60px}
.wrap{max-width:820px;margin:0 auto}
.two{display:flex;gap:18px;align-items:flex-start;max-width:1180px;margin:0 auto}
.two>.col-main{flex:1 1 auto;min-width:0}
.two>.col-side{flex:0 0 288px}
@media (max-width:900px){ .two{flex-direction:column} .two>.col-side{flex:1 1 auto;width:100%} }

/* Controls */
.btn{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border:1px solid var(--line);background:var(--surface);border-radius:var(--r);font-size:13px;color:var(--ink-2)}
.btn:hover{border-color:var(--accent);color:var(--ink)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:500}
.btn.primary:hover{background:var(--accent-ink);border-color:var(--accent-ink);color:#fff}
.btn.ghost{border-color:transparent;background:none}
.btn.ghost:hover{background:var(--line-2)}
.btn.danger:hover{border-color:var(--red);color:var(--red)}
.btn small{color:inherit;opacity:.7;font-size:11px}
.field{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);color:var(--ink)}
.field:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.lbl{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.pill{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:3px;font-size:11.5px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2)}
.pill.blue{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent-ink)}
.pill.gold{background:var(--gold-soft);border-color:var(--gold-line);color:var(--gold)}
.pill.green{background:var(--green-soft);border-color:var(--green-line);color:var(--green)}
.card{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-lg)}
.muted{color:var(--ink-3);font-size:12.5px}
.empty{padding:34px 20px;text-align:center;color:var(--ink-3);font-size:13px}

/* Talk list */
.tlist{display:flex;flex-direction:column;gap:8px}
.titem{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-lg);width:100%;text-align:left}
.titem:hover{border-color:var(--accent-line)}
.titem .t1{font-size:14px;font-weight:600;margin-bottom:3px}
.titem .t2{font-size:12px;color:var(--ink-3)}
.titem .meta{margin-left:auto;display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:flex-end}

/* Editor */
.blocks{display:flex;flex-direction:column;gap:3px;padding-bottom:20px}
.blk{position:relative;display:flex;gap:9px;align-items:flex-start;border-radius:var(--r);padding:2px 4px 2px 0}
.blk:hover{background:var(--line-2)}
.blk .handle{flex:0 0 22px;padding-top:7px;text-align:center;color:var(--ink-3);opacity:0;font-size:11px}
.blk:hover .handle,.blk:focus-within .handle{opacity:1}
.blk .ta{flex:1;min-width:0;border:0;background:none;resize:none;overflow:hidden;padding:5px 2px;line-height:1.65;font-size:15px;white-space:pre-wrap;word-break:break-word;min-height:1.65em}
.blk .ta:focus{outline:none}
.blk[data-kind="point"] .ta{font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);padding-top:14px}
.blk[data-kind="bullet"]{padding-left:6px}
.blk[data-kind="bullet"] .ta{padding-left:16px}
.blk[data-kind="bullet"]::before{content:"";position:absolute;left:34px;top:16px;width:5px;height:5px;border-radius:50%;background:var(--ink-3)}
.blk[data-kind="note"] .ta{font-size:14px;color:var(--gold);background:var(--gold-soft);border:1px solid var(--gold-line);border-radius:var(--r);padding:9px 11px}
.blk[data-kind="cite"] .ta{font-size:14px;color:var(--ink-2);background:var(--surface-2);border-left:3px solid var(--ink-3);border-radius:0 var(--r) var(--r) 0;padding:9px 11px}
.blk .del{opacity:0;flex:0 0 auto;border:0;background:none;color:var(--ink-3);padding:6px;border-radius:5px}
.blk:hover .del,.blk:focus-within .del{opacity:1}
.blk .del:hover{color:var(--red);background:var(--line-2)}
.scrip{flex:1;display:flex;flex-direction:column;gap:5px;background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:var(--r);padding:10px 12px;min-width:0}
.scrip .ref{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.scrip .ref b{font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--accent-ink)}
.scrip .vt{font-family:var(--serif);font-size:15px;line-height:1.55;color:var(--ink)}
.scrip a{color:var(--accent-ink);font-size:11.5px;text-decoration:none;border-bottom:1px solid var(--accent-line)}
.scrip a:hover{border-bottom-color:var(--accent-ink)}
.rule{flex:1;height:1px;background:var(--line);margin:14px 0}

/* slash menu */
.menu{position:absolute;z-index:40;width:270px;max-width:calc(100vw - 32px);background:var(--surface);border:1px solid var(--line);border-radius:9px;box-shadow:0 14px 34px rgba(0,0,0,.18);overflow:hidden;padding:4px}
.menu .mi{display:flex;align-items:center;gap:9px;width:100%;padding:8px 10px;border:0;background:none;border-radius:6px;text-align:left;font-size:13px}
.menu .mi[aria-selected="true"]{background:var(--accent-soft);color:var(--accent-ink)}
.menu .mi span.d{margin-left:auto;font-size:11px;color:var(--ink-3)}
.menu .mh{padding:7px 10px 4px;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.menu .mi .mt{display:flex;flex-direction:column;gap:1px;min-width:0}
.menu .mi .mt .desc{font-size:11.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.menu .mi[aria-selected="true"] .mt .desc{color:inherit;opacity:.75}
.menu .mfoot{margin:4px -4px -4px;padding:7px 12px;border-top:1px solid var(--line);font-size:11px;color:var(--ink-3)}
/* the / menu: a list that scrolls, so it never covers the line being typed on */
.menu.slash{width:300px;max-height:min(360px,calc(100vh - 20px));overflow-y:auto;overscroll-behavior:contain;scroll-padding-bottom:40px}
.menu.slash .mfoot{position:sticky;bottom:-4px;background:var(--surface)}
.menu .mnone{padding:8px 10px;font-size:13px;color:var(--ink-3)}

/* Talk mode */
.tm{position:fixed;inset:0;z-index:100;background:var(--paper);display:flex;flex-direction:column;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.tm .tmbar{flex:0 0 auto;display:flex;align-items:center;gap:12px;padding:12px 18px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.tm .clock{font-family:var(--mono);font-size:22px;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.tm .pace{height:6px;border-radius:3px;background:var(--line);overflow:hidden;flex:1 1 140px;min-width:100px}
.tm .pace i{display:block;height:100%;background:var(--green)}
.tm .stage{flex:1;min-height:0;overflow-y:auto;padding:26px 24px}
.tm .stage .inner{max-width:900px;margin:0 auto;display:flex;flex-direction:column;gap:18px}
.tm h2{margin:0;font-size:clamp(22px,3.4vw,34px);line-height:1.25;letter-spacing:-.02em;text-wrap:balance}
.tm .tmscrip{background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:12px;padding:20px 22px}
.tm .tmscrip b{font-size:13px;letter-spacing:.05em;text-transform:uppercase;color:var(--accent-ink)}
.tm .tmscrip p{font-family:var(--serif);font-size:clamp(17px,2.2vw,25px);line-height:1.5;margin:8px 0 0}
.tm .tmtext{font-size:clamp(15px,1.7vw,20px);line-height:1.6}
.tm .tmnote{background:var(--gold-soft);border:1px solid var(--gold-line);color:var(--gold);border-radius:9px;padding:13px 16px;font-size:clamp(14px,1.5vw,17px)}
.tm .tmnav{flex:0 0 auto;display:flex;border-top:1px solid var(--line)}
.tm .tmnav button{flex:1;padding:18px 10px;border:0;background:none;font-size:14px;font-weight:600;color:var(--ink-2)}
.tm .tmnav button:hover:not(:disabled){background:var(--surface-2)}
.tm .tmnav button:disabled{opacity:.35;cursor:default}
.tm .tmnav .mid{flex:0 0 auto;padding:18px 16px;font-size:12px;color:var(--ink-3);align-self:center}

/* Listening */
.cap{display:flex;gap:12px;align-items:flex-start;padding:7px 0;border-bottom:1px solid var(--line-2)}
.cap .kd{flex:0 0 72px}
.cap .tx{flex:1;min-width:0;font-size:14.5px;line-height:1.55}
.capbar{position:sticky;bottom:0;background:var(--surface);border-top:1px solid var(--line);padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:9px;margin:0 -16px -60px}
.chips{display:flex;gap:7px;flex-wrap:wrap}

/* Search */
.hit{display:block;width:100%;text-align:left;padding:12px 14px;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-lg)}
.hit:hover{border-color:var(--accent-line)}
mark{background:#F6E6A8;color:inherit;border-radius:2px;padding:0 2px}
:root[data-theme="dark"] mark{background:#4A3F1E;color:#F0E6C8}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) mark{background:#4A3F1E;color:#F0E6C8}}

/* toast */
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(22px + env(safe-area-inset-bottom,0px));z-index:200;background:#262626;color:#fff;padding:9px 16px;border-radius:6px;font-size:13px;box-shadow:0 8px 24px rgba(0,0,0,.24)}

@media (max-width:760px){
  .shell{flex-direction:column-reverse}
  .rail{flex:0 0 auto;flex-direction:row;overflow-x:auto;border-right:0;border-top:1px solid var(--line);padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px));gap:4px}
  .brand,.railfoot{display:none}
  .navbtn{flex-direction:column;gap:3px;font-size:10.5px;padding:7px 10px;white-space:nowrap}
}

/* speech */
.micbar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:150;width:min(640px,calc(100vw - 32px));background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 38px rgba(0,0,0,.2);padding:12px 14px;display:flex;flex-direction:column;gap:9px}
.micbar .row{display:flex;align-items:center;gap:10px}
.micbar .live{font-size:14px;line-height:1.5;color:var(--ink-3);min-height:21px;max-height:76px;overflow:hidden}
.micbar .live b{color:var(--ink);font-weight:400}
.dot{width:9px;height:9px;border-radius:50%;background:var(--red);flex:0 0 auto;animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.dot{animation:none}}
.covbar{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--ink-3)}
.covbar i{display:block;height:6px;border-radius:3px;background:var(--green)}
[data-bid].covered{opacity:.42}
[data-bid].covered .bd,[data-bid].covered.tmtext{text-decoration:line-through;text-decoration-color:var(--ink-3);text-decoration-thickness:1px}
[data-bid].missed{background:var(--gold-soft);border-left:3px solid var(--gold);border-radius:0 7px 7px 0;padding:6px 12px;margin-left:-15px}
[data-bid].saying{border-left:3px solid var(--accent);padding-left:12px;margin-left:-15px}

/* conversation */
.who{flex:0 0 auto;margin-top:7px;border:1px solid var(--line);background:var(--surface);border-radius:11px;padding:2px 9px;font-size:11px;color:var(--ink-2);white-space:nowrap;max-width:110px;overflow:hidden;text-overflow:ellipsis}
.who.b{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent-ink)}
.blk.roleB .ta{color:var(--ink-2)}
.dlg{display:flex;flex-direction:column;gap:15px}
.dlg .ln{display:flex;gap:16px;align-items:flex-start}
.dlg .ln .rl{flex:0 0 104px;text-align:right;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);padding-top:7px;font-weight:600}
.dlg .ln .bd{flex:1;min-width:0;font-size:clamp(14px,1.5vw,18px);line-height:1.6;color:var(--ink-3)}
.dlg .ln.mine .rl{color:var(--accent)}
.dlg .ln.mine .bd{color:var(--ink);font-size:clamp(17px,2.1vw,24px);line-height:1.5}
.dlg .ln.mine .bd .tmscrip{margin-top:6px}
@media (max-width:640px){.dlg .ln{flex-direction:column;gap:2px}.dlg .ln .rl{text-align:left;flex:0 0 auto}}

@media print{
  .rail,.topbar,.capbar,.noprint,.tm{display:none!important}
  .shell,.main,.body{display:block;overflow:visible;height:auto}
  body{background:#fff;color:#000}
  .blk .del,.blk .handle{display:none}
  .blk .ta{border:0!important;background:none!important;color:#000!important}
  .scrip{background:#fff;border:1px solid #bbb}
}

/* ---------------- sign-in gate ---------------- */
.gate{position:fixed;inset:0;z-index:300;background:var(--paper);display:flex;align-items:center;justify-content:center;padding:24px;overflow-y:auto}
.gate[hidden]{display:none}
.gatecard{width:100%;max-width:400px;display:flex;flex-direction:column;gap:14px;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:30px 28px calc(26px + env(safe-area-inset-bottom,0px));box-shadow:0 14px 40px rgba(22,32,43,.09)}
.gatehead{display:flex;align-items:center;gap:11px}
.gatehead b{font-size:17px;font-weight:600;letter-spacing:-.01em}
.mark-lg{width:38px;height:38px;border-radius:11px}
.gatecard h2{margin:6px 0 0;font-family:var(--serif);font-size:24px;font-weight:600;line-height:1.25;letter-spacing:-.015em}
.gatep{margin:0;font-size:13.5px;line-height:1.6;color:var(--ink-2)}
.gatep.small{font-size:12.5px;color:var(--ink-3)}
.gatebuild{margin-top:4px;font-size:11.5px;color:var(--ink-3);font-family:var(--mono)}
.gateform{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.btn.big{padding:11px 16px;font-size:14px;justify-content:center}
.btn.wide{width:100%}
.gateor{text-align:center;font-size:12px;color:var(--ink-3);position:relative}
.gateok{font-size:13.5px;line-height:1.6;color:var(--accent-ink);background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:var(--r);padding:11px 13px}
.gatewarn{font-size:13px;line-height:1.55;color:var(--gold);background:var(--gold-soft);border:1px solid var(--gold-line);border-radius:var(--r);padding:10px 12px}
.linkbtn{border:0;background:none;color:var(--ink-3);font-size:12.5px;text-decoration:underline;text-underline-offset:3px;padding:6px 0 0;align-self:center}
.linkbtn:hover{color:var(--ink-2)}
@media (max-width:520px){ .gatecard{border:0;box-shadow:none;padding:24px 20px} .gate{padding:0;align-items:flex-start;padding-top:calc(28px + env(safe-area-inset-top,0px))} }

/* ---------------- the editor: references, marks, menus ---------------- */
.scrip .ref{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:5px;color:var(--accent-ink);font-size:12px}
.chip b{font-weight:600}
.chip:hover{border-color:var(--accent)}
.iconbtn{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border:1px solid var(--line);background:var(--surface);border-radius:5px;color:var(--ink-2)}
.iconbtn:hover{border-color:var(--accent-line);color:var(--accent-ink)}
.iconbtn.on{background:var(--accent);border-color:var(--accent);color:var(--paper)}
select.mini{padding:3px 6px;border:1px solid var(--line);background:var(--surface);border-radius:5px;font-size:11.5px;color:var(--ink-2)}
.scrip .vt sup{font-family:var(--sans);font-size:10px;color:var(--accent-ink);vertical-align:super}
.vt.small{font-size:13px;line-height:1.6;margin-top:7px}

/* Highlights, as a highlighter pen: a soft fill the height of the line,
   slightly rounded, carried across a wrap. Six colours in the order
   people know from reading on a tablet: yellow, green, blue, purple,
   pink, orange. Dark mode uses the same hues, deeper, so the words stay
   readable on top. */
:root{--hl-gold:#FDEB8A;--hl-green:#C8EDB8;--hl-blue:#BFE0F7;--hl-plum:#DDCBF3;--hl-red:#F9C6D9;--hl-orange:#FCD3A6}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--hl-gold:#6B5A12;--hl-green:#2F5A2A;--hl-blue:#1F4A68;--hl-plum:#4B3470;--hl-red:#6A2A44;--hl-orange:#6E4219}}
:root[data-theme="dark"]{--hl-gold:#6B5A12;--hl-green:#2F5A2A;--hl-blue:#1F4A68;--hl-plum:#4B3470;--hl-red:#6A2A44;--hl-orange:#6E4219}
mark.hl{border-radius:3px;padding:0 1px;margin:0 -1px;background:var(--hl-gold);color:inherit;-webkit-box-decoration-break:clone;box-decoration-break:clone}
mark.hl.gold{background:var(--hl-gold)}
mark.hl.green{background:var(--hl-green)}
mark.hl.blue{background:var(--hl-blue)}
mark.hl.plum{background:var(--hl-plum)}
mark.hl.red{background:var(--hl-red)}
mark.hl.orange{background:var(--hl-orange)}
.sw{display:inline-block;width:13px;height:13px;border-radius:3px;border:1px solid rgba(0,0,0,.28);flex:0 0 auto}
.sw.gold{background:var(--hl-gold)}.sw.green{background:var(--hl-green)}.sw.blue{background:var(--hl-blue)}
.sw.red{background:var(--hl-red)}.sw.plum{background:var(--hl-plum)}.sw.orange{background:var(--hl-orange)}
.sw.none{background:linear-gradient(135deg,transparent 45%,var(--red,#c33) 45%,var(--red,#c33) 55%,transparent 55%),var(--paper,#fff)}
.selbar .sw{width:16px;height:16px;border-radius:50%;border-color:rgba(255,255,255,.5)}
.selbar button.hloff{font-size:11px;opacity:.8}
.fmtbtn.hlpen .pen{display:inline-block;padding:0 4px;border-radius:3px;font-weight:700;color:var(--ink)}
.fmtbtn.hlpen .pen.gold{background:var(--hl-gold)}.fmtbtn.hlpen .pen.green{background:var(--hl-green)}.fmtbtn.hlpen .pen.blue{background:var(--hl-blue)}.fmtbtn.hlpen .pen.plum{background:var(--hl-plum)}.fmtbtn.hlpen .pen.red{background:var(--hl-red)}.fmtbtn.hlpen .pen.orange{background:var(--hl-orange)}
.fmtbtn.hlmore{min-width:18px;padding-left:2px;padding-right:2px;font-size:10px}
.hlmenu .mi .sw{margin-right:8px}
.mnote{display:flex;gap:8px;align-items:flex-start;margin-top:8px;padding:8px 10px;background:var(--gold-soft);border:1px solid var(--gold-line);border-radius:var(--r);font-size:12.5px;line-height:1.55}

.selbar{position:fixed;z-index:180;display:flex;align-items:center;gap:1px;padding:4px;background:var(--ink);border-radius:8px;box-shadow:0 8px 26px rgba(0,0,0,.3)}
.selbar button{display:flex;align-items:center;gap:5px;padding:5px 8px;border:0;background:none;border-radius:5px;color:var(--paper);font-size:12px}
.selbar button:hover{background:rgba(255,255,255,.14)}
.selbar button.q{color:#B9C4CE;cursor:default}
.selbar .sep{width:1px;height:18px;background:rgba(255,255,255,.22);margin:0 3px}

.refedit{margin-top:9px;padding:11px 12px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);display:flex;flex-direction:column;gap:7px}
.refedit .field{font-family:var(--mono);font-size:13.5px}
.btnrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.btn.sm{padding:5px 12px;font-size:12px}

.scroller{margin-top:10px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden}
.scroller .shead{display:flex;align-items:center;gap:9px;padding:8px 12px;background:var(--surface-2);border-bottom:1px solid var(--line);font-size:12.5px}
.scroller .shead .linkbtn{margin-left:auto;padding:0}
.scroller .sbody{max-height:300px;overflow-y:auto;padding:4px 0}
.sv{padding:7px 12px;border-left:3px solid transparent;display:flex;align-items:flex-start;gap:9px}
.sv p{margin:0;flex:1;min-width:0;font-family:var(--serif);font-size:13.5px;line-height:1.7;color:var(--ink-3)}
.sv sup{font-family:var(--sans);font-size:9.5px;vertical-align:super}
.sv.in{background:var(--accent-soft);border-left-color:var(--accent)}
.sv.in p{color:var(--ink)}
.sv .tag{flex:0 0 auto;align-self:center;font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--accent-ink)}
.sv .btn{flex:0 0 auto;align-self:center;opacity:0;transition:opacity .12s}
.sv:hover .btn,.sv:focus-within .btn{opacity:1}

.mi.ref{flex-direction:column;align-items:stretch;gap:3px;padding:9px 12px}
.mi.ref .t{display:flex;align-items:center;gap:8px}
.mi.ref .t b{color:var(--accent-ink);font-weight:600}
.mi.ref .p{font-family:var(--serif);font-size:12.5px;line-height:1.55;color:var(--ink-3)}
.blk[data-kind="cue"] .ta{color:var(--ink-3);font-style:italic}
.blk[data-kind="todo"] .ta::before{content:"";}

/* ---------------- prose you can format ---------------- */
.blk .ta[contenteditable]:empty::before{content:attr(data-ph);color:var(--ink-3);pointer-events:none}
.blk .ta strong{font-weight:600}
.blk .ta em{font-style:italic}
.selbar button.bo{font-weight:700}
.selbar button.it{font-style:italic}
.selbar button.w{padding-right:10px}
.menu.turn .mi.here{color:var(--ink-3)}
.linewrap{flex:1;min-width:0;display:flex;flex-direction:column}
.linewrap .ta{flex:0 0 auto}
.bnote{display:flex;gap:8px;align-items:flex-start;margin:4px 0 2px 2px;padding:7px 10px;background:var(--gold-soft);border:1px solid var(--gold-line);border-radius:var(--r);font-size:12.5px;line-height:1.55;color:var(--ink-2)}
.bnote q{font-style:italic;color:var(--ink-3)}

/* ---------------- listening: his words, and yours ---------------- */
.cap .sidebtn{flex:0 0 auto;align-self:flex-start;margin-top:3px;border:1px solid var(--line);background:var(--surface);border-radius:11px;padding:1px 8px;font-size:10.5px;letter-spacing:.03em;color:var(--ink-3);opacity:0;transition:opacity .12s}
.cap:hover .sidebtn,.cap:focus-within .sidebtn{opacity:1}
.sideswitch{display:flex;border:1px solid var(--plum-line);border-radius:var(--r-lg);overflow:hidden}
.sideswitch button{flex:1;padding:10px 8px;border:0;background:var(--surface);font-size:13px;color:var(--ink-2)}
.sideswitch button+button{border-left:1px solid var(--plum-line)}
.sideswitch button.on{background:var(--plum-soft);color:var(--plum);font-weight:600}
.filters{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.vt .vtx{display:inline}
.tm .tmtext strong{font-weight:700}
.tm .tmtext em{font-style:italic}
.tm .tmtext mark.hl{background:none;color:inherit;padding:0;box-shadow:inset 0 -0.42em 0 rgba(199,154,78,.28)}
@media print{
  .blk .ta mark.hl{background:none!important;box-shadow:none!important;border-bottom:1px solid #999}
  .bnote{display:none!important}
}
.railfoot .build{font-family:var(--mono);font-size:10.5px;letter-spacing:-.01em}
.railfoot .build.ready{color:var(--gold);font-weight:600;font-family:var(--sans);letter-spacing:0}
.updatebar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:190;width:min(520px,calc(100vw - 24px));display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--gold-line);border-left:3px solid var(--gold);border-radius:12px;box-shadow:0 14px 38px rgba(0,0,0,.2);padding:12px 14px;font-size:13.5px}
.updatebar span{flex:1 1 180px;min-width:0}
.updatebar .linkbtn{padding:0}

/* ---------------- where the minutes go ---------------- */
.secbudget{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:0 2px 6px;font-size:11.5px;color:var(--ink-2);text-transform:none;letter-spacing:0;font-weight:400}
.secbudget .bud{width:54px;padding:2px 6px;border:1px solid var(--line);border-radius:4px;background:var(--surface);font-family:var(--mono);font-size:11.5px;color:var(--ink);text-align:center}
.secbudget .bud.auto{color:var(--ink-3);border-style:dashed}
.secbudget .bud:focus{outline:none;border-color:var(--accent);color:var(--ink)}
.secbudget .sep{color:var(--line)}
.diff{font-weight:600}
.diff.over{color:var(--red)}
.diff.under{color:var(--ink-3);font-weight:400}
.diff.on{color:var(--green)}
.planbar{display:flex;gap:2px;height:14px;margin-top:10px;border-radius:4px;overflow:hidden}
.planbar .seg{position:relative;background:var(--line-2);min-width:6px}
.planbar .seg i{position:absolute;left:0;top:0;bottom:0;background:var(--accent);opacity:.75}
.planbar .seg i.over{background:var(--red)}
.plantbl{display:flex;flex-direction:column;gap:5px;margin-top:9px;font-size:12px}
.prow{display:grid;grid-template-columns:auto auto 1fr;gap:2px 10px;align-items:baseline;padding-bottom:4px;border-bottom:1px solid var(--line-2)}
.prow:last-child{border-bottom:0}
.prow .nm{grid-column:1/-1;color:var(--ink-2);line-height:1.4}
.prow .num::before{font-family:var(--sans);font-size:10.5px;color:var(--ink-3);margin-right:4px}
.prow .num:nth-child(3)::before{content:"written"}
/* the budget is set here now, so its cell is a field rather than a figure */
.prow .bud{width:56px;box-sizing:border-box;font-family:var(--mono);font-size:11.5px;
  font-variant-numeric:tabular-nums;text-align:right;padding:2px 5px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--surface);color:var(--ink)}
.prow .bud.auto{color:var(--ink-3);border-style:dashed}
.prow .bud:focus{outline:none;border-color:var(--accent);color:var(--ink)}
.prow .bud[readonly]{border-color:transparent;background:none}
.prow .small{grid-column:1/-1;text-align:right}
.prow .num{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right;color:var(--ink-3)}
.prow .diff{text-align:right;font-size:11.5px}
.tm .secbar{display:flex;align-items:center;gap:10px;padding:9px 22px 0;font-size:13px}
.tm .secbar .sclock{font-family:var(--mono);font-size:19px;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.tm .secbar .strack{flex:1;height:6px;border-radius:3px;background:var(--line);overflow:hidden;min-width:80px}
.tm .secbar .strack i{display:block;height:100%;background:var(--accent);width:0}
.tm .secbar .sstate{font-weight:600;color:var(--gold);min-width:60px;text-align:right}
.switchrow{display:flex;gap:12px;align-items:flex-start;margin-top:12px;cursor:pointer}
.switchrow input{margin-top:4px;width:16px;height:16px;accent-color:var(--accent);flex:0 0 auto}

/* ---------------- the five tabs ---------------- */
.tabs{display:flex;gap:2px;border-bottom:0}
.tab{padding:7px 12px;border:0;border-bottom:2px solid transparent;background:none;font-size:13px;color:var(--ink-3);border-radius:var(--r) var(--r) 0 0}
.tab .tabic{display:inline-flex;vertical-align:-3px;margin-right:6px}
.tab .tabic:empty{display:none}
.tab:hover{color:var(--ink);background:var(--line-2)}
.tab.on{color:var(--accent);border-bottom-color:var(--accent);font-weight:600}
.two.wide{max-width:980px}
.two.wide>.col-main{width:100%}
.card.pad{padding:16px 18px}
.cardhead{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.pill.plum{background:var(--plum-soft);border-color:var(--plum-line);color:var(--plum)}
.small{font-size:11.5px}
.btn.sm{padding:5px 10px;font-size:12px}
.btn.big{padding:10px 18px;font-size:14px}
.blk.flash{animation:flash 1.6s ease-out}
@keyframes flash{0%{background:var(--accent-soft)}100%{background:transparent}}

/* framework */
.fw{display:flex;flex-direction:column;gap:14px}
.fwgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;margin-top:10px}
.frow{display:flex;flex-direction:column;gap:4px;min-width:0}
.frow.span2{grid-column:1/-1}
.fwlist{display:flex;flex-direction:column;gap:10px;margin-top:10px}
/* a main point is a block: grip, then everything about the point */
.fwpt{display:flex;gap:12px;padding:12px 13px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.fwpt.on{border-color:var(--accent-line);box-shadow:inset 3px 0 0 var(--accent)}
.fwpt.dragging{opacity:.45}
.fwpt.over{border-color:var(--accent);box-shadow:0 -2px 0 var(--accent)}
.fwgrip{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:6px;padding-top:2px;cursor:grab}
.fwgrip .num{font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.fwpt.on .fwgrip .num{color:var(--accent-ink)}
.fwgrip .dots{color:var(--line);font-size:15px;line-height:1}
.fwbody{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:9px}
.fwhead{display:flex;align-items:baseline;gap:12px}
.fwhead .pt{flex:1 1 auto;min-width:0;font-family:var(--serif);font-size:17px;font-weight:600;padding:4px 6px;border-color:transparent;background:none}
.fwhead .pt:hover{border-color:var(--line-2)}
.fwhead .pt:focus{border-color:var(--accent);background:var(--surface)}
.fwpt.on .fwhead .pt{color:var(--accent-ink)}
.fwhead .mins{flex:0 0 auto;font-family:var(--mono);font-size:12px;color:var(--ink-3)}
.fwbar{height:3px;border-radius:2px;background:var(--line-2);overflow:hidden}
.fwbar .fill{height:3px;background:var(--accent-line)}
.fwpt.on .fwbar .fill{background:var(--accent)}
.fwbar .fill.over{background:var(--gold)}
/* the sub-points, hung off the point, each with its references under it */
.fwsubs{display:flex;flex-direction:column;gap:9px;border-left:2px solid var(--line-2);padding-left:14px}
.fwpt.on .fwsubs{border-left-color:var(--accent-line)}
.fwsubs.bare{border-left-style:dashed}
.fwsub{display:flex;flex-direction:column;gap:4px}
.fwsub .tt{font-size:13px;line-height:1.5;color:var(--ink-2)}
.fwsub .tt.strong{color:var(--ink);font-weight:600}
.fwchips{display:flex;flex-wrap:wrap;gap:6px;padding-left:15px}
.chip.ref,.chip.pub,.chip.own,.chip.read{display:inline-block;font-size:11.5px;border-radius:3px;padding:1px 6px;white-space:nowrap}
/* a chip never runs out of its column, whatever is in it */
.chip.ref,.chip.pub,.chip.own,.chip.read{max-width:100%;box-sizing:border-box;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom}
.chip.ref{font-weight:600;color:var(--accent-ink);background:var(--accent-soft);border:1px solid var(--accent-line)}
.chip.pub{color:var(--ink-3);background:var(--surface-2);border:1px solid var(--line-2)}
.chip.own{color:var(--plum);background:var(--plum-soft);border:1px solid var(--plum-line)}
.chip.read{display:inline-flex;align-items:center;gap:5px;font-weight:700;color:var(--on-accent);background:var(--accent);border:1px solid var(--accent-ink)}
.chip.read .tag{font-size:9.5px;letter-spacing:.06em}
.readkey{display:flex;align-items:center;gap:7px}
.fwctl{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding-top:2px}
.fwctl .bud{width:58px;padding:4px 6px;border:1px solid var(--line);border-radius:4px;background:var(--surface);font-family:var(--mono);font-size:12px;text-align:center}
.fwctl .bud.auto{color:var(--ink-3);border-style:dashed}
.fwctl .iconbtn:disabled{opacity:.3}
.planbar.split .seg.who0{background:var(--accent)}
.planbar.split .seg.who1{background:var(--plum)}
@media (max-width:640px){.fwgrid{grid-template-columns:1fr}.fwhead{flex-wrap:wrap}.fwhead .pt{flex-basis:100%}.readkey{display:none}}

/* a heading in the outline preview that is a direction, not a point */
.outsec.aside{background:var(--gold-soft);border:1px solid var(--gold-line)}
.outsec.aside .pt{color:var(--gold)}
.outsec.aside .pt .pill{margin-left:8px;font-weight:600}
.briefcard textarea{font-family:var(--serif);font-size:14px;line-height:1.6}

/* a card head that folds its own card */
.cardhead.fold{width:100%;background:none;border:0;padding:0;margin:0;font:inherit;text-align:left;cursor:pointer;color:inherit;
  display:flex;align-items:baseline;gap:9px;border-radius:var(--r)}
.cardhead.fold:hover .lbl{color:var(--accent)}
.cardhead.fold:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.cardhead.fold .foldmark{color:var(--ink-3);font-size:13px;line-height:1;width:10px;flex:0 0 auto}
/* the minutes card supplies its own heading, so the one inside it goes */
.mincard #plancard{margin-top:10px}
.mincard #plancard > .lbl{display:none}

/* research — three columns: the talk, the point, where to look next.
   Research is done a point at a time, so the middle column is the widest
   and the rails stay narrow enough to read at a glance. */
.rs3{display:grid;grid-template-columns:270px minmax(0,1fr) 300px;gap:16px;align-items:start}
.rscol{display:flex;flex-direction:column;gap:14px;min-width:0}
.rspanel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:13px 14px;display:flex;flex-direction:column;gap:9px}
.rspanel.nudge{background:var(--gold-soft);border-color:var(--gold-line)}
.rspanel.nudge .lbl{color:var(--gold)}
.rspanel > .btn{align-self:flex-start}
.rspanel .empty{padding:10px 0}
/* the framework, in Research's rail */
.rsfw{gap:5px}
.rsfwpt{display:flex;flex-direction:column;gap:5px;border-radius:var(--r);padding:2px}
.rsfwpt.on{background:var(--accent-soft);border:1px solid var(--accent-line);padding:6px 7px}
.rsfwhead{display:flex;align-items:baseline;gap:8px;width:100%;text-align:left;font:inherit;cursor:pointer;
  background:none;border:0;padding:6px 7px;border-radius:var(--r)}
.rsfwhead:hover{background:var(--paper)}
.rsfwpt.on .rsfwhead{padding:0}
.rsfwhead:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.rsfwhead .num{flex:0 0 auto;font-family:var(--mono);font-size:10.5px;color:var(--ink-3)}
.rsfwhead .tt{flex:1 1 auto;min-width:0;font-family:var(--serif);font-size:13.5px;font-weight:600;line-height:1.3}
.rsfwpt.on .rsfwhead .tt,.rsfwpt.on .rsfwhead .num{color:var(--accent-ink)}
.rsfwhead .mins{flex:0 0 auto;font-family:var(--mono);font-size:10.5px;color:var(--ink-3)}
.rsfwsubs{display:flex;flex-direction:column;gap:5px;border-left:2px solid var(--accent);padding-left:10px;margin-left:12px}
.rsfwsub{display:flex;flex-direction:column;gap:3px;width:100%;text-align:left;font:inherit;cursor:pointer;
  background:none;border:1px solid transparent;border-radius:var(--r);padding:4px 6px}
.rsfwsub:hover{background:var(--surface)}
.rsfwsub:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.rsfwsub.on{background:var(--surface);border-color:var(--accent-line)}
.rsfwsub .tt{font-size:12px;line-height:1.45;color:var(--ink-2)}
.rsfwsub.on .tt{color:var(--ink);font-weight:600}
.rsfwsub .fwchips{padding-left:0;display:flex;flex-wrap:wrap;gap:5px}
.brieftext{font-family:var(--serif);font-size:13px;line-height:1.6;color:var(--ink-2)}
.subline{font-family:var(--serif);font-size:17px;line-height:1.5;color:var(--ink)}

/* a point in the rail */
.rspoint{display:flex;gap:10px;align-items:flex-start;width:100%;text-align:left;font:inherit;cursor:pointer;
  background:none;border:1px solid transparent;border-radius:var(--r);padding:7px 8px}
.rspoint:hover{background:var(--paper)}
.rspoint:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.rspoint.on{background:var(--accent-soft);border-color:var(--accent-line)}
.rspoint .num{flex:0 0 auto;font-family:var(--mono);font-size:11.5px;color:var(--ink-3);padding-top:1px;min-width:3.2em}
.rspoint.on .num{color:var(--accent-ink)}
.rspoint .col{display:flex;flex-direction:column;gap:2px;min-width:0}
.rspoint .tt{font-weight:600;font-size:13px;line-height:1.35}
.rspoint.on .tt{color:var(--accent-ink)}
/* the point you are on */
.rshead{display:flex;flex-direction:column;gap:6px}
.rshead .pt.big{margin:0;font-family:var(--serif);font-size:20px;font-weight:600;line-height:1.3}
.keybox .vt{font-family:var(--serif);font-size:15px;line-height:1.6;color:var(--ink-2)}
.rsouts{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12.5px}
.rsq{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.rsq .qk{flex:0 0 auto;min-width:4.5em;font-weight:700;font-size:12.5px;color:var(--ink-2)}
.rsq .field{flex:1 1 12em;min-width:0}
/* the trail */
.rstrail{display:flex;gap:9px;align-items:baseline;font-size:12.5px}
.rstrail label{flex:1 1 auto;cursor:pointer;line-height:1.45}
.rstrail.done label{color:var(--ink-3);text-decoration:line-through}
.rstrail input{flex:0 0 auto;margin:0}
.rstrail a{flex:0 0 auto;text-decoration:none}
@media (max-width:1180px){
  .rs3{grid-template-columns:240px minmax(0,1fr)}
  .rscol.right{grid-column:1 / -1}
  .rscol.right{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;align-items:start}
}
@media (max-width:760px){
  .rs3{grid-template-columns:1fr}
  .rscol.right{grid-column:auto;display:flex;flex-direction:column}
}
.rs{display:flex;flex-direction:column;gap:16px}
.addctl{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:9px}
.addctl .mini{width:auto;padding:5px 8px}
.rsec{display:flex;flex-direction:column;gap:8px}
/* the heading folds the point's cards away, so it is a button */
.rhead{display:flex;align-items:baseline;gap:10px;width:100%;background:none;border:0;padding:4px 2px;margin:0;text-align:left;cursor:pointer;font:inherit;border-radius:var(--r)}
.rhead:hover{background:var(--paper)}
.rhead:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.rhead .fold{color:var(--ink-3);font-size:13px;line-height:1;width:10px;flex:0 0 auto}
.rhead .pt{font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
/* One list, read top to bottom. A grid of cards of every height made
   the eye jump back and forth across rows; clips are read in turn. */
.cards{display:flex;flex-direction:column;gap:8px}
/* A clip: one quiet line saying what it is and where it came from, then
   the words. Colour says one thing — what kind of clip — and only in
   its label; the coloured edges are gone. */
.rcard{display:flex;flex-direction:column;gap:5px;padding:8px 8px 11px 14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);min-width:0}
.rcard .ctop{display:flex;align-items:center;gap:8px;flex-wrap:wrap;row-gap:2px;font-size:12px;color:var(--ink-3);min-height:30px}
.rcard .ctop .spacer{flex:1 1 0}
.rcard .grip{color:var(--ink-3);opacity:.55;letter-spacing:-2px;cursor:grab}
.rcard .klabel{font-weight:600;color:var(--ink-2)}
.rcard .klabel.blue{color:var(--accent-ink)}
.rcard .klabel.gold{color:var(--gold)}
.rcard .klabel.plum{color:var(--plum)}
.rcard .csrc{display:inline-flex;flex-wrap:wrap;align-items:center;gap:2px 6px;min-width:0}
.rcard .cwho{color:var(--ink-2)}
/* the card measures itself, not the window: the same card sits in a
   wide middle column, a 290px side column and a phone */
.rcard{container-type:inline-size}
@container (max-width:360px){ .rcard .cinto .cintotx{display:none} }
/* a line of reading length, however wide the column */
.rcard .body,.rcard .vt{max-width:78ch}
.rcard .cused{color:var(--green);font-weight:600}
.rcard .cused::before{content:"\2713\00a0"}
.rcard .ctop .btn.sm{min-height:30px;padding:4px 10px;font-size:12px}
.cmore{width:30px;height:30px;font-size:16px;line-height:1}
.cmore[aria-expanded=true]{background:var(--paper);border-color:var(--line)}
.rcard .body{display:block;flex:0 0 auto;width:100%;box-sizing:border-box;font:inherit;font-size:14.5px;line-height:1.6;color:var(--ink);border:1px solid transparent;border-radius:var(--r);padding:1px 4px;margin:0 -4px;background:none;resize:none;overflow:hidden}
.rcard .body:hover{border-color:var(--line-2)}
.rcard .body:focus{border-color:var(--accent-line);background:var(--surface-2);outline:none}
.rcard .body.quote{font-family:var(--serif);color:var(--ink-2);border-left:2px solid var(--line);border-radius:0 var(--r) var(--r) 0;padding-left:12px;margin-left:0}
.rcard .body.clamped{max-height:calc(1.6em * 6 + 4px)}
.rcard .cshow{align-self:flex-start;font-size:12px}
.rcard .vt{font-family:var(--serif);font-size:14.5px;line-height:1.6;color:var(--ink)}
/* the groups a point's clips are set out in, by what they are for */
.rsclips{gap:14px}
.rsgroup{display:flex;flex-direction:column;gap:8px;border-radius:var(--r-lg)}
.rsgroup.over{outline:2px dashed var(--accent-line);outline-offset:4px}
.rsghead{display:flex;align-items:baseline;gap:8px;border-bottom:1px solid var(--line);padding-bottom:5px}
.rsghead .nm{font-size:13px;font-weight:600;color:var(--ink)}
.rsghead .n{font-size:12px;color:var(--ink-3)}
.rsgroup.loose .rsghead .nm{color:var(--ink-3)}
.rsgempty{font-size:12.5px;color:var(--ink-3);border:1px dashed var(--line);border-radius:var(--r);padding:9px 11px}
.rsnudge{display:flex;flex-direction:column;align-items:flex-start;gap:8px;font-size:12.5px;line-height:1.55;color:var(--gold);background:var(--gold-soft);border:1px solid var(--gold-line);border-radius:var(--r);padding:9px 11px}
.fwcount{font-size:11px;color:var(--ink-3);align-self:center}
/* the sub-point's line, editable where it is shown */
.keybox textarea.subline{display:block;width:calc(100% + 8px);box-sizing:border-box;margin:0 -4px;padding:2px 4px;font-family:var(--serif);font-size:17px;line-height:1.45;color:var(--ink);background:none;border:1px solid transparent;border-radius:var(--r);resize:none;overflow:hidden}
.keybox textarea.subline:hover{border-color:var(--line-2)}
.keybox textarea.subline:focus{border-color:var(--accent-line);background:var(--surface-2);outline:none}
.rsoutsfold summary{font-size:12.5px;color:var(--accent);cursor:pointer;min-height:32px;display:flex;align-items:center}
.rsoutsfold .rsouts{margin-top:4px}
/* the \22ef menu */
.cmenu{position:absolute;z-index:1000;width:270px;max-width:calc(100vw - 16px);box-sizing:border-box;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:0 8px 24px rgba(0,0,0,.16);padding:6px;display:flex;flex-direction:column;gap:1px;font-size:13px}
.cmlbl{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);padding:6px 8px 3px}
.cmuses{display:flex;gap:4px;padding:0 6px 4px}
.cmuse{flex:1 1 0;font:inherit;font-size:12.5px;min-height:32px;padding:4px 6px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);color:var(--ink);cursor:pointer}
.cmuse.on{background:var(--accent);border-color:var(--accent);color:#fff}
.cmenu select{margin:0 6px 4px;width:calc(100% - 12px)}
.cmitem{display:flex;align-items:center;width:100%;box-sizing:border-box;text-align:left;font:inherit;font-size:13px;min-height:34px;padding:6px 8px;border:0;border-radius:var(--r);background:none;color:var(--ink);cursor:pointer;text-decoration:none}
.cmitem:hover,.cmitem:focus-visible{background:var(--paper)}
a.cmitem{color:var(--accent)}
.cmitem.danger{color:var(--red)}
.cmsep{height:1px;background:var(--line-2);margin:4px 0}
@media (pointer:coarse){
  .cmore{width:44px;height:44px}
  .rcard .ctop .btn.sm{min-height:40px}
  .cmitem{min-height:44px}
  .cmuse{min-height:40px}
}
.rcard .ref{display:flex;align-items:center;gap:8px}
.rcard .obj,.rcard .ans{display:flex;gap:8px;align-items:flex-start;font-size:13.5px;line-height:1.55}
.rcard .ans{color:var(--ink);font-weight:500}
.rcard .who{flex:0 0 auto;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);padding-top:3px;min-width:56px}

/* preparation */
.prep{display:flex;flex-direction:column;gap:14px}

/* final */
.fin{display:flex;flex-direction:column;gap:14px}
.finbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.finbar .muted{margin-left:auto}
.sheet{max-width:none}
.fsec{padding:10px 0 4px}
.fsec+.fsec{border-top:1px solid var(--line-2);margin-top:8px}
.fsec h2{margin:0 0 10px;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.fline{display:flex;gap:10px;align-items:flex-start;margin:0 0 9px;font-size:15px;line-height:1.65}
.fline .who{flex:0 0 78px;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);padding-top:4px}
.fline.theirs .ftext{color:var(--ink-3)}
.fline.note .ftext{color:var(--gold)}
.fline.cite .ftext{border-left:3px solid var(--ink-3);padding-left:10px;color:var(--ink-2)}
.fline .gist{font-weight:600;color:var(--accent-ink)}
.fcue{font-style:italic;color:var(--ink-3);font-size:13px;margin:0 0 8px;padding-left:12px;border-left:2px dashed var(--line)}
.fscrip{background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:var(--r-lg);padding:10px 14px;margin:0 0 10px}
.fscrip.theirs{opacity:.6}
.fscrip b{font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--accent-ink)}
.fscrip p{font-family:var(--serif);font-size:15px;line-height:1.7;margin:5px 0 0}

/* organisation */
.org{display:flex;flex-direction:column;gap:18px}
.ogroup .ohead{display:flex;align-items:baseline;gap:10px;margin-bottom:8px}
.ogroup h2{margin:0;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.upnext{margin-bottom:16px}
.uprow{display:flex;gap:8px;overflow-x:auto;margin-top:8px;padding-bottom:2px}
.upitem{flex:0 0 auto;display:flex;flex-direction:column;gap:2px;align-items:flex-start;min-width:150px;padding:9px 12px;background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:var(--r-lg);text-align:left}
.upitem .d{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--accent-ink)}
.upitem .t{font-size:13px;font-weight:600}
@media (max-width:760px){
  .topbar .tabs{order:10;flex-basis:100%;overflow-x:auto;margin:4px -4px 0;padding-bottom:2px}
  .tab{white-space:nowrap;padding:7px 10px}
}
.bibrow{display:flex;gap:11px;align-items:flex-start;padding:9px 0;border-top:1px solid var(--line-2);cursor:pointer}
.bibrow:first-child{border-top:0}
.bibrow input[type=radio]{margin-top:4px;accent-color:var(--accent)}
.ownbox{margin-top:12px;padding:12px;background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r)}
.scrip .ref a.jwl{color:var(--plum)}
select.mini.tr{max-width:110px}

/* ---------------- listening -> research, and the Library ---------------- */
.cap .tobtn{flex:0 0 auto;align-self:flex-start;margin-top:3px;border:1px solid var(--line);background:var(--surface);border-radius:4px;padding:1px 8px;font-size:11px;color:var(--ink-3);opacity:0;transition:opacity .12s}
.cap:hover .tobtn,.cap:focus-within .tobtn{opacity:1}
.cap .sentto{font-size:11px;color:var(--accent-ink);margin-bottom:2px}
.wrap.wide{max-width:980px}
.libbar{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.libbar .btn .sw{margin-right:6px}
.libsec{margin-top:16px;display:flex;flex-direction:column;gap:8px}
.libsec h2{margin:0 0 2px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.libitem{background:var(--surface);border:1px solid var(--line-2);border-left:3px solid var(--line);border-radius:var(--r-lg);padding:10px 12px;display:flex;flex-direction:column;gap:6px}
.libitem.gold{border-left-color:var(--gold)}.libitem.green{border-left-color:var(--green)}.libitem.blue{border-left-color:var(--accent)}.libitem.red{border-left-color:var(--red)}.libitem.plum{border-left-color:var(--plum)}
.libitem .phrase{font-family:var(--serif);font-size:14px;line-height:1.6}
.libitem .note{font-size:13px;line-height:1.55;color:var(--ink-2)}
.libitem .meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.libitem .meta .spacer{flex:1}
.libitem .linkbtn{padding:0;font-size:12px;color:var(--accent-ink)}

/* ---- given / past talks ---- */
.givencard .givenlist{display:flex;flex-direction:column;gap:4px;margin:6px 0 10px}
.grow{display:grid;grid-template-columns:120px 1fr 64px 28px;gap:10px;align-items:center;font-size:13px;padding:6px 8px;background:var(--paper);border-radius:var(--r)}
.grow .v{color:var(--ink-2)}
.grow .del{border:0;background:none;color:var(--ink-3);cursor:pointer;font-size:16px;line-height:1}
.grow .del:hover{color:var(--red)}
.givenform{display:grid;grid-template-columns:150px 1fr 110px auto;gap:8px;align-items:center}
@media (max-width:640px){.givenform{grid-template-columns:1fr 1fr}.grow{grid-template-columns:1fr 1fr 60px 24px}}
.num{font-variant-numeric:tabular-nums}
.num.over{color:var(--red);font-weight:600}
.num.under{color:var(--plum)}
.num.on{color:var(--green)}
.pastbar{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.facet{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.facet .lbl{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin-right:4px;min-width:70px}
.drift{margin:4px 0 8px;padding:8px 12px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line-2)}
.drift.warn{border-color:var(--red);color:var(--red)}
.pasttbl{display:flex;flex-direction:column;gap:4px;margin-top:8px}
.pastrow{display:grid;grid-template-columns:minmax(160px,1.6fr) 1fr 110px 64px 1.4fr auto;gap:10px;align-items:center;padding:9px 12px;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-lg);font-size:13px}
.pastrow.head{background:none;border:0;padding:2px 12px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.pastrow .tt{border:0;background:none;text-align:left;font:inherit;font-weight:600;color:var(--accent-ink);cursor:pointer;padding:0}
.pastrow .used{display:flex;flex-wrap:wrap;gap:4px}
.pastrow .used .pill.hit{background:var(--accent);color:#fff}
@media (max-width:900px){.pastrow{grid-template-columns:1fr 1fr 90px 60px;}.pastrow .used,.pastrow.head span:nth-child(5),.pastrow.head span:nth-child(6){display:none}.pastrow .btn{grid-column:1/-1;justify-self:start}}
/* a red pill for something that has gone wrong — a device that cannot
   sync, a report with an error on it */
.alert{display:inline-block;font-size:11px;font-weight:600;color:var(--red);background:color-mix(in srgb,var(--red) 10%,transparent);padding:1px 7px;border-radius:999px}

/* ---- paste an outline ---- */
.outlinecard .cardhead{display:flex;align-items:center;gap:8px}
.outlinecard textarea{font-family:var(--mono);font-size:12.5px;line-height:1.5;white-space:pre}
.outprev{margin-top:10px;display:flex;flex-direction:column;gap:8px}
.outsec{background:var(--paper);border-radius:var(--r);padding:8px 10px;display:flex;flex-direction:column;gap:4px}
.outsec .pt{font-weight:600;font-size:13px;color:var(--accent-ink)}
.outitem{display:flex;gap:8px;align-items:baseline;font-size:12.5px}
.outitem .pill{flex:0 0 auto}
/* the outline's own minutes, and the offer to fit them to this talk */
.outtime{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:9px 11px;display:flex;flex-direction:column;gap:6px;font-size:13px}
.outtime .optrow{display:flex;gap:8px;align-items:flex-start;cursor:pointer}
.outtime .optrow input{margin:2px 0 0}
.rcard .ctx{margin-top:-4px}

/* ---- split screen: research beside the draft ---- */
.two.split{max-width:1320px}
.two.split>.col-side.research{flex:0 0 360px;position:sticky;top:12px;max-height:calc(100vh - 24px);overflow:auto;display:flex;flex-direction:column;gap:14px}
.rescol{display:flex;flex-direction:column;gap:10px}
.reshead{display:flex;align-items:center;gap:8px}
.rsec.compact .rcard{padding:8px 10px;gap:6px;font-size:12.5px}
.rsec.compact .rcard textarea.body{font-size:12.5px}
.rcard[draggable=true]{cursor:grab}
.rcard.dragging{opacity:.5}
.blk.dropafter{box-shadow:inset 0 -3px 0 var(--accent)}
@media (max-width:900px){ .two.split>.col-side.research{position:static;max-height:none} }

/* ---- clip from wol.jw.org ---- */
.clipcard.live{border-color:var(--accent-line);box-shadow:0 0 0 3px var(--accent-soft)}
.clipcard .pill.hint{background:var(--accent-soft);color:var(--accent-ink)}
.clipempty{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.clipempty textarea{width:100%;box-sizing:border-box}
.clippasted{background:var(--paper);border-left:3px solid var(--accent);border-radius:var(--r);padding:8px 12px;display:flex;flex-direction:column;gap:4px;margin:8px 0}
.clippasted .body{font-family:var(--serif);font-size:14px;line-height:1.55;max-height:160px;overflow:auto}
.cliprow{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.clipitems{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.clipitem{display:flex;align-items:center;gap:10px;padding:7px 10px;border:1px solid var(--line-2);border-radius:var(--r);font-size:13px;cursor:pointer}
.clipitem input{width:16px;height:16px;margin:0}
.clipitem .what{flex:1;min-width:0}

/* ---- Google and Apple on the gate ---- */
.gateprov{display:flex;flex-direction:column;gap:10px}
.btn.prov{gap:10px;background:var(--surface);border-color:var(--line)}
.btn.prov.apple{background:#000;color:#fff;border-color:#000}
.btn.prov.apple:hover{background:#1B1B1B}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .btn.prov.apple{background:#fff;color:#000;border-color:#fff} }
:root[data-theme="dark"] .btn.prov.apple{background:#fff;color:#000;border-color:#fff}

/* ---- report a problem, support console ---- */
.diagbox{margin-top:10px;display:flex;flex-direction:column;gap:8px;background:var(--paper);border-radius:var(--r);padding:10px 12px}
.diaggrid{display:grid;grid-template-columns:130px 1fr;gap:5px 10px;font-size:13px}
.kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:10px 0 14px}
@media (max-width:900px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
.kpi{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:12px 14px;display:flex;flex-direction:column;gap:3px}
.kpi b{font-size:26px;font-weight:600;font-variant-numeric:tabular-nums}
.attn{display:grid;grid-template-columns:14px 200px 1fr auto;gap:12px;align-items:center;text-align:left;width:100%;padding:10px 12px;border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--surface);font:inherit;color:inherit;cursor:pointer}
.attn.done{opacity:.6}
.attn .dot.bad{background:var(--red)}
.attn .dot.warn{background:var(--gold)}
.attn .dot.ok{background:var(--green)}
@media (max-width:700px){.attn{grid-template-columns:14px 1fr auto}.attn>span:nth-child(3){grid-column:2/-1}}
.openrep{border-color:var(--red)}
.repmsg{margin:8px 0;padding:8px 12px;background:var(--paper);border-left:3px solid var(--red);border-radius:var(--r);font-size:14px;line-height:1.5}
.synclog{font-family:var(--mono);font-size:11.5px;line-height:1.5;white-space:pre;overflow:auto;background:var(--paper);padding:8px 10px;border-radius:var(--r);margin:6px 0 0}
.devrow{display:flex;flex-direction:column;gap:2px;padding:8px 10px;background:var(--paper);border-radius:var(--r);margin-top:6px;font-size:13px}
.devrow.bad{background:color-mix(in srgb,var(--red) 10%,transparent)}

/* ---- the front page ---- */
.gate.wide{display:block;padding:0;align-items:stretch}
.wel{max-width:1200px;margin:0 auto;padding:0 28px 0}
.wel h1{margin:0;font-family:var(--serif);font-size:clamp(34px,4.4vw,56px);line-height:1.09;letter-spacing:-.02em;font-weight:600}
.wel h2{margin:0;font-family:var(--serif);font-size:clamp(23px,2.4vw,30px);line-height:1.2;letter-spacing:-.015em;font-weight:600}
.wel h3{margin:0;font-size:17px;font-weight:600;line-height:1.35}
.wel p{margin:0;font-size:15px;line-height:1.65;color:var(--ink-2)}
.wel p.lede{font-size:17px;line-height:1.6;max-width:36em}
.wel p.small{font-size:13px;color:var(--ink-3);line-height:1.55}
.wel code{font-family:var(--mono);font-size:13px;background:var(--paper);padding:1px 5px;border-radius:3px}
.welbar{display:flex;align-items:center;gap:14px;padding:18px 0;border-bottom:1px solid var(--line-2)}
.welbar b{font-size:17px;letter-spacing:-.01em}
.welbar a{font-size:14px;color:var(--ink-2);text-decoration:none}
.welbar a:hover{color:var(--accent)}
.welbar a.btn{text-decoration:none}
.welbar a.btn.primary{color:#FFFFFF}
/* Visually hidden, still read out: the email fields carry no visible label,
   because the placeholder and the button between them say what it is. */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* An address and a button, side by side until there is no room for both. */
.welrow{display:flex;gap:10px;flex-wrap:wrap;margin-top:2px}
.welrow .field{flex:1 1 15em;min-width:0;font-size:16px;padding:13px 13px}
.welrow .btn{flex:0 0 auto}
.welico{width:38px;height:38px;border-radius:10px;background:var(--accent-soft);color:var(--accent-ink);display:flex;align-items:center;justify-content:center}
.welico svg{width:21px;height:21px}
/* The way back in. It has to be operable, so it is a real button with a name
   for a screen reader, but nothing about it reads as a door. */
.welmark{border:0;padding:0;cursor:pointer;font:inherit}
.welhero{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center;padding:72px 0 64px}
.welhero-t{display:flex;flex-direction:column;gap:20px}
.welshot{background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:0 18px 44px rgba(20,30,45,.13);overflow:hidden}
.welshot-top{display:flex;align-items:center;gap:8px;padding:11px 14px;background:var(--surface-2);border-bottom:1px solid var(--line-2)}
.welshot-top .d{width:9px;height:9px;border-radius:50%;background:var(--line);display:inline-block}
.welshot-top .t{flex:1;text-align:center;font-size:12px;color:var(--ink-3)}
.welshot-body{padding:16px 18px 20px;display:flex;flex-direction:column;gap:11px}
.welshot-body p{font-size:13.5px;line-height:1.65;color:var(--ink)}
.weltabs{display:flex;gap:2px;background:var(--paper);border-radius:6px;padding:3px}
.weltabs span{flex:1;text-align:center;font-size:11.5px;padding:6px 0;color:var(--ink-3);border-radius:4px}
.weltabs span.on{background:var(--surface);color:var(--ink);font-weight:600}
.welsec{display:flex;align-items:baseline;gap:10px;padding-bottom:6px;border-bottom:1px solid var(--line-2)}
.welsec b{font-size:13px;color:var(--accent-ink)}
.welsec .num{font-size:11px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.welverse{background:var(--paper);border-left:3px solid var(--accent);border-radius:4px;padding:9px 12px;display:flex;flex-direction:column;gap:5px}
.welverse-h{display:flex;align-items:center;gap:8px}
.welverse .vt{font-family:var(--serif);font-size:13px;line-height:1.55;color:var(--ink-2)}
.wel .small.warn{color:var(--gold)}
.welsteps{padding:52px 0 56px;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);display:flex;flex-direction:column;gap:10px}
.welgrid5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;margin-top:18px}
.welstep{display:flex;flex-direction:column;gap:7px;padding-top:13px;border-top:3px solid var(--line)}
.welstep b{font-size:15px}
.welstep p{font-size:13.5px;line-height:1.6}
.welstep.s1{border-top-color:var(--accent)}
.welstep.s2{border-top-color:#2E86D9}
.welstep.s3{border-top-color:var(--plum)}
.welstep.s4{border-top-color:var(--gold)}
.welstep.s5{border-top-color:var(--green)}
.welfeat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;padding:56px 0 0}
.welfeat article{background:var(--surface);border:1px solid var(--line-2);border-radius:10px;padding:24px 24px 26px;display:flex;flex-direction:column;gap:10px}
.welfeat article p{font-size:14.5px}
.welnotes{margin:52px 0 0;background:var(--surface);border:1px solid var(--accent-line);border-radius:10px;padding:32px 36px;display:grid;grid-template-columns:1.1fr 1fr;gap:40px}
.welnotes>div{display:flex;flex-direction:column;gap:11px}
.welnotes ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:11px;align-self:center}
.welnotes li{position:relative;padding-left:27px;font-size:14.5px;line-height:1.5}
.welnotes li::before{content:"";position:absolute;left:1px;top:3px;width:16px;height:9px;border-left:2.4px solid var(--green);border-bottom:2.4px solid var(--green);transform:rotate(-45deg)}
.weljoin{display:grid;grid-template-columns:1fr 1.05fr;gap:52px;align-items:start;padding:56px 0 0}
.weljoin-t{display:flex;flex-direction:column;gap:13px;padding-top:4px}
.weljoin-t .lbl{color:var(--accent-ink)}
.welmeanwhile{margin-top:6px;padding:14px 16px;background:var(--surface);border:1px solid var(--line-2);border-radius:8px;display:flex;flex-direction:column;gap:5px;align-items:flex-start}
.welmeanwhile p{font-size:14px}
.welform{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:26px 28px 28px;display:flex;flex-direction:column;gap:15px;box-shadow:0 10px 30px rgba(20,30,45,.07)}
.welform .welrow{margin-top:0}
.welform.done{align-items:flex-start;gap:12px}
.welform.done h3{font-family:var(--serif);font-size:21px}
.welfoot{margin-top:56px;padding:36px 0 44px;border-top:1px solid var(--line-2)}
.welfoot-b{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.welfoot-b b{font-size:14px}
.welfoot p{font-size:13px;color:var(--ink-3);line-height:1.6;max-width:58em;margin-bottom:6px}
@media (max-width:980px){
  .welhero,.welnotes,.weljoin{grid-template-columns:1fr;gap:32px}
  .welfeat{grid-template-columns:repeat(2,minmax(0,1fr))}
  .welgrid5{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* The links fold away on a narrow screen; the one that matters does not. */
  .welbar a:not(.btn){display:none}
}
@media (max-width:620px){
  .wel{padding:0 16px}
  .welfeat,.welgrid5{grid-template-columns:1fr}
  .welhero{padding:44px 0 40px}
  /* Stacked, the row's main axis is vertical, so the field's flex-basis would
     become its HEIGHT. Take the basis off before turning the row. */
  .welrow{flex-direction:column}
  .welrow .field{flex:0 0 auto;width:100%}
  .welrow .btn{width:100%;justify-content:center}
}

/* ---- the waiting list in Support ---- */
.pastrow.wlrow{grid-template-columns:minmax(220px,2fr) 130px 110px minmax(200px,auto);align-items:center}
.wlwho{display:flex;flex-direction:column;gap:2px;min-width:0}
.wlnote{line-height:1.5;color:var(--ink-2)}
.wlact{display:flex;gap:8px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.wlin{font-size:12px;font-weight:600;color:var(--green)}
@media (max-width:900px){.pastrow.wlrow{grid-template-columns:1fr}.wlact{justify-content:flex-start}}

/* ---- a page of notes: one column, typed into directly ---- */
/* The page of notes is the Draft's sheet: white, bordered, the same
   padding. One page for writing on, wherever you are writing. */
.npage{max-width:820px;margin:0 auto;box-sizing:border-box;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg,10px);padding:26px 34px 30px}
@media (max-width:900px){ .npage{padding:16px 14px 22px} }
.npagetitle{border:0;background:none;width:100%;padding:0;font:inherit;font-family:var(--serif);font-size:38px;font-weight:600;letter-spacing:-.02em;line-height:1.15;color:var(--ink)}
.npagetitle::placeholder{color:var(--line)}
.npagemeta{display:flex;align-items:center;gap:8px;margin:10px 0 2px;flex-wrap:wrap}
.npagemeta .mfield{border:0;background:none;font:inherit;font-size:13px;color:var(--ink-3);padding:2px 0;min-width:0;width:auto;max-width:190px}
.npagemeta .mfield:hover,.npagemeta .mfield:focus{color:var(--ink-2)}
.npagemeta .mfield.date{max-width:130px}
.npagemeta .dot2{color:var(--line)}
.npage .tagrow{margin:6px 0 22px}
.tagrow{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.tagrow .pill.tag{display:inline-flex;align-items:center;gap:5px;background:var(--accent-soft);color:var(--accent-ink);border:1px solid var(--accent-line)}
.tagrow .del{border:0;background:none;color:inherit;opacity:.6;font-size:13px;line-height:1;padding:0}
.tagrow .del:hover{opacity:1}
.tagrow .field{flex:0 0 110px;border:0;background:none;font-size:12.5px;color:var(--ink-3);padding:2px 0}

.ndoc{display:flex;flex-direction:column}
.nline{display:flex;gap:6px;align-items:flex-start;padding:1px 0;position:relative}
.nline .nmain{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.nline.d1 .nmain{padding-left:18px}
.nline.d2 .nmain{padding-left:36px}
.nline.d3 .nmain{padding-left:54px}
.edline{outline:none;white-space:pre-wrap;word-break:break-word}
.edline[data-ph]:empty::before{content:attr(data-ph);color:var(--line);pointer-events:none}
.ned{font-size:15.5px;line-height:1.7;padding:2px 0;color:var(--ink)}
.nline.k-part .nmain{padding-left:0;margin-top:30px}
.nline.k-part .ned{font-family:var(--serif);font-size:26px;font-weight:600;letter-spacing:-.015em;line-height:1.25;padding-bottom:6px;border-bottom:1px solid var(--line-2)}
.nline.k-talk .nmain{margin-top:20px}
.nline.k-talk .ned{font-size:19px;font-weight:600;line-height:1.35;letter-spacing:-.01em}
.nline.k-sub .nmain{margin-top:14px}
.nline.k-sub .ned{font-size:16px;font-weight:600;line-height:1.4;color:var(--ink-2)}
.nline.k-bullet .ned{position:relative;padding-left:18px}
.nline.k-bullet .ned::after{content:"\2022";position:absolute;left:4px;top:2px;color:var(--ink-3)}
.nline.k-quote .ned{font-family:var(--serif);font-size:15.5px;color:var(--ink-2);padding-left:14px;border-left:3px solid var(--line)}
.nlabel{font-size:15.5px;line-height:1.7}
.nlabel b{color:var(--accent-ink)}
.nlabel .ned{display:inline}
.nref{display:flex;align-items:baseline;gap:9px;font-size:14px;font-weight:600;padding-top:3px}
.nref a{color:var(--accent-ink);text-decoration:none}
.nref a:hover{text-decoration:underline}
.nvt{font-family:var(--serif);font-size:15px;line-height:1.65;color:var(--ink-2);padding-left:14px;border-left:3px solid var(--accent-line);margin-bottom:3px}
.nbox{background:var(--paper);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:12px 14px;display:flex;flex-direction:column;gap:6px;margin:4px 0}
.nboxh{display:flex;gap:10px;align-items:baseline}
.nicon{border:0;background:none;font-size:16px;line-height:1;padding:0;cursor:pointer}
.nboxt{flex:1;font-size:15px;font-weight:600;line-height:1.55}
.nboxi{display:flex;flex-direction:column;gap:2px;padding-left:4px}
.nboxe{font-size:14.5px;line-height:1.6;position:relative;padding-left:16px}
.nboxe::after{content:"\2022";position:absolute;left:2px;top:0;color:var(--ink-3)}
.nline .rule{width:100%;height:1px;background:var(--line);margin:14px 0}
.ntail{width:100%;text-align:left;border:0;background:none;color:var(--line);font:inherit;font-size:15px;padding:10px 0 0;cursor:text}
.ntail:hover{color:var(--ink-3)}
.notemenu{width:250px}
@media (max-width:620px){
  /* the sheet keeps the Draft's phone padding; this rule used to strip it */
  .npagetitle{font-size:29px}
  .nline.k-part .ned{font-size:22px}
}

/* ---- what's new: the public changelog ---- */
.cllist{display:flex;flex-direction:column;gap:2px;margin-top:10px}
.clentry{padding:12px 0;border-top:1px solid var(--line-2)}
.cllist .clentry:first-child{border-top:0;padding-top:4px}
.clhead{display:flex;align-items:baseline;gap:10px}
.clhead .muted{white-space:nowrap}
.clhead b{font-size:14.5px;line-height:1.35}
.cllines{margin:8px 0 6px;padding-left:18px;display:flex;flex-direction:column;gap:6px}
.cllines li{font-size:13.5px;line-height:1.6;color:var(--ink-2)}
.clentry.newest .clhead b{color:var(--accent-ink)}
/* Sits above the rail on a phone, and stays until it is dismissed: somebody
   opening TalkPrep on the way into a hall should be able to ignore it and
   still find it there afterwards. */
.whatsnew{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;justify-content:center;padding:14px;pointer-events:none}
.whatsnew-in{pointer-events:auto;width:100%;max-width:440px;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:0 14px 40px rgba(20,30,45,.2);padding:14px 16px 15px}
.whatsnew-in .clentry{padding-top:6px;border-top:0;max-height:52vh;overflow:auto}
.whatsnew-act{display:flex;align-items:center;gap:12px;margin-top:4px;flex-wrap:wrap}

/* ---- the segment at the top of Organisation ---- */
.seg{display:inline-flex;background:var(--paper);border:1px solid var(--line-2);border-radius:6px;padding:2px;gap:2px}
.segbtn{display:flex;align-items:center;gap:7px;padding:5px 13px;border:0;background:none;border-radius:var(--r);font-size:12.5px;color:var(--ink-3)}
.segbtn:hover{color:var(--ink)}
.segbtn.on{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.segn{font-size:11px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.segbtn.on .segn{color:var(--ink-3)}
.ggroup{margin-bottom:22px}
.ggroup .pasttbl{margin-top:8px}
.pastrow{grid-template-columns:minmax(0,1fr) 120px 140px 100px minmax(160px,auto)}

/* ---- search: an action, so a button on every page and an overlay ---- */
.topsearch{margin-left:auto;color:var(--ink-3)}
.topsearch .kbd{font-family:var(--mono);font-size:11px;color:var(--ink-3);border:1px solid var(--line-2);border-radius:3px;padding:0 4px}
.searchback{position:fixed;inset:0;z-index:210;background:rgba(20,24,30,.42);display:flex;justify-content:center;align-items:flex-start;padding:80px 16px 24px}
.searchbox{width:min(660px,100%);max-height:calc(100vh - 120px);display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:0 24px 60px rgba(20,30,45,.28);overflow:hidden}
.searchhead{display:flex;align-items:center;gap:11px;padding:13px 15px;border-bottom:1px solid var(--line-2);color:var(--ink-3)}
.searchhead input{flex:1;min-width:0;border:0;outline:0;background:none;color:var(--ink);font-size:16px}
.searchhead .linkbtn{font-family:var(--mono);font-size:11px;border:1px solid var(--line-2);border-radius:3px;padding:2px 6px;color:var(--ink-3)}
.searchhits{padding:10px 12px 12px;display:flex;flex-direction:column;gap:8px;overflow:auto}
.libtagrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0 2px}
.librow{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.librow>.lbl{flex:0 0 52px;padding-top:5px}
@media (max-width:620px){ .librow>.lbl{flex:0 0 100%} }
@media (max-width:620px){
  /* No keyboard, so no point naming the shortcut. */
  .topsearch .kbd{display:none}
  .searchback{padding:0}
  .searchbox{max-height:100vh;height:100%;border:0;border-radius:0}
  .pastrow{grid-template-columns:1fr}
}

/* ================= the draft as a document =================
   Drafting looks and works like a page of notes: a serif heading with
   a hairline under it, plain lines between, a verse set as a quotation.
   Everything that is machinery — which translation, how much to show,
   the ways out to wol.jw.org — waits until the line is under the
   pointer or has the caret, so the page reads as words. */
.blocks.doc{gap:2px}
.two.draft{max-width:1340px;align-items:flex-start}
.two.draft>.col-main{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg,10px);padding:26px 34px 30px;min-width:0}
.two.draft.folded{max-width:1180px}
@media (max-width:900px){ .two.draft>.col-main{padding:16px 14px 22px} }
/* No columns beside a line for its own controls, so the words have the
   whole width of the sheet. The handle, which only marks the line, sits
   in the page margin; there is no × (Backspace and Undo do that job). */
.blocks.doc .blk{padding-right:0}
/* "+ Add a line" starts where the words do */
.addrow>.btn{padding-left:2px;margin-left:0}
.blocks.doc .blk>.handle{position:absolute;left:-28px;top:2px}
@media (max-width:900px){
  /* a phone's margin is narrow: the handle is left out */
  .blocks.doc .blk>.handle{display:none}
}

/* a main point is the heading of its section */
.blocks.doc .blk[data-kind="point"]{margin-top:16px}
.blocks.doc .blk[data-kind="point"] .pthead{display:flex;flex-direction:row;align-items:baseline;gap:8px;border-bottom:1px solid var(--line);padding-bottom:6px;min-width:0}
/* .linewrap .ta is flex:0 0 auto, which is right in a column but sizes
   the line to the whole of its text in a row \u2014 a long line then ran
   off the side of the page instead of wrapping. These two are the rows. */
.blocks.doc .blk[data-kind="point"] .pthead>.ta,
.blocks.doc .blk[data-kind="bullet"] .linewrap>.ta{flex:1 1 auto;min-width:0}
.blocks.doc .blk[data-kind="point"] .ta{font-family:var(--serif);font-size:19px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink);padding-top:2px;flex:1 1 auto;min-width:0}
.blocks.doc .ptnum{font-family:var(--serif);font-size:22px;font-weight:600;color:var(--ink-3)}
.blocks.doc .blk[data-kind="point"] .secbudget{opacity:.6;padding-top:5px}
.blocks.doc .blk[data-kind="point"]:hover .secbudget,.blocks.doc .blk[data-kind="point"]:focus-within .secbudget{opacity:1}
.blocks.doc .blk[data-kind="bullet"]::before{display:none}
.blocks.doc .blk[data-kind="bullet"] .ta{padding-left:0}
.blocks.doc .blk[data-kind="bullet"] .linewrap{display:flex;flex-direction:row;gap:9px;align-items:flex-start;min-width:0}
.blocks.doc .blk[data-kind="bullet"] .linewrap::before{content:"\00b7";color:var(--ink-3);padding:5px 0 0}

/* a scripture set as a quotation */
.scrip.doc{background:none;border:0;border-radius:0;padding:4px 0;gap:4px}
.scrip.doc>*{order:1}
.scrip.doc .ref{align-items:center;gap:9px}
.scrip.doc .refname{font:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:left}
.scrip.doc .refname b{font-size:14px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--accent-ink)}
.scrip.doc .refname:hover b{text-decoration:underline}
.scrip.doc .refname:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
.scrip.doc .secs{font-size:11px;color:var(--ink-3)}
.scrip.doc .vt{font-family:var(--serif);font-size:14.5px;line-height:1.7;color:var(--ink-2);border-left:2px solid var(--accent-line);padding-left:13px}
/* The machinery stays on the page — it is reachable by keyboard and by
   touch at every moment — but it steps back until the line is wanted,
   so what reads as the page is the reference and the words. */
.scrip.doc .refctl{display:flex;align-items:center;gap:8px;flex-wrap:wrap;opacity:.28;transition:opacity .12s ease}
.blk:hover .scrip.doc .refctl,.blk:focus-within .scrip.doc .refctl{opacity:1}
@media (hover:none){ .scrip.doc .refctl{opacity:.75} }

/* ---- the rail down the left of the draft ---- */
.dfrail{flex:0 0 330px;position:sticky;top:12px;max-height:calc(100vh - 24px);overflow:auto;display:flex;flex-direction:column;gap:12px}
.dfrail.shut{flex:0 0 44px;align-items:center;gap:18px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 0;max-height:360px;overflow:visible}
.dfrail.shut .railopen{font:inherit;font-size:15px;background:none;border:0;color:var(--ink-3);cursor:pointer;padding:0}
.dfrail.shut .railrule{width:22px;height:1px;background:var(--line)}
.dfpanel{display:flex;flex-direction:column;gap:9px}
.dfpanel .fwsubs{margin-left:12px;padding-left:10px;gap:6px}
.dfpanel .fwsub .tt{font-size:12px;line-height:1.45}
.dfpanel .rsfwhead .mins.done{color:var(--green)}
.dfpanel .rsfwhead .mins.todo{color:var(--gold)}
.railcard{border:1px solid var(--line);border-left:3px solid var(--ink-3);border-radius:var(--r);padding:9px 10px;display:flex;flex-direction:column;gap:5px;background:var(--surface);cursor:grab}
.railcard.blue{border-left-color:var(--accent)}
.railcard.gold{border-left-color:var(--gold)}
.railcard.plum{border-left-color:var(--plum,#5B4E8C)}
.railcard.dragging{opacity:.5}
.railcard .ctop{display:flex;align-items:center;gap:6px}
.railcard .grip{color:var(--line);font-size:13px;line-height:1}
.railcard .railbody{font-size:12.5px;line-height:1.5;color:var(--ink-2)}
.railplaced{display:flex;align-items:center;gap:8px;border-top:1px solid var(--line);padding-top:8px}
.railnum{font-size:10.5px;font-weight:700;color:var(--on-accent);background:var(--accent);border-radius:999px;padding:1px 6px}

/* ---- on a phone the two of them come up over the document ---- */
.dfchips{display:flex;gap:8px;align-items:center;padding:0 0 10px;flex-wrap:wrap}
.dfchip{font:inherit;font-size:12.5px;min-height:36px;padding:7px 11px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.dfchip .mk{color:var(--ink-3)}
.dfsheet{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.34);display:flex;align-items:flex-end}
.dfsheetbody{width:100%;max-height:82vh;overflow:auto;background:var(--surface);border-radius:12px 12px 0 0;padding:14px 16px 22px;display:flex;flex-direction:column;gap:12px}
.btn.icon{width:34px;padding:0;justify-content:center;font-size:15px}

/* ---- the font you write in ----
   The stacks live in js/app.js, which sets --write on the html element:
   one list, so the chooser can set its samples in the very faces it is
   offering rather than a second copy of them that could drift. */
.blocks.doc .ta,.blocks.doc .scrip .vt,.ndoc .ned,.ndoc .nlabel,.ndoc .nboxt,.ndoc .nboxe,.fline .ftext{font-family:var(--write)}
/* a main point stays a serif heading against the body, whichever font
   the body is set in — unless the body is itself that serif */
.blocks.doc .blk[data-kind="point"] .ta,.blocks.doc .ptnum{font-family:var(--serif)}
.fontrow{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.fontopt,.baropt{font:inherit;font-size:14px;padding:9px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);color:var(--ink);cursor:pointer;text-align:left;line-height:1.35}
.fontopt .nm,.baropt .nm{display:block;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.fontopt.on,.baropt.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.baropt{flex:1 1 240px;max-width:360px}

/* ---- the formatting bar ----
   Along the top of whatever you are writing in, and it stays there as
   the page scrolls. Small, quiet and lit where the line already is
   what a button would make it, so the bar reads as the state of the
   line rather than a list of things you could do to it. */
/* top is minus the scroller's own top padding (.body, 18px): at 0 the
   pinned bar sat 18px down with the page showing through above it */
.fmtbar{position:sticky;top:-18px;z-index:6;display:flex;align-items:center;gap:3px;flex-wrap:wrap;
  padding:6px 4px;margin:0 0 10px;background:var(--surface);border-bottom:1px solid var(--line)}
.fmtbtn{font:inherit;font-size:13px;min-width:30px;min-height:30px;padding:0 7px;border:1px solid transparent;
  border-radius:var(--r);background:none;color:var(--ink-2);cursor:pointer;line-height:1;
  display:inline-flex;align-items:center;justify-content:center}
.fmtbtn:hover{background:var(--line-2);color:var(--ink)}
.fmtbtn:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.fmtbtn.on{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent-ink)}
.fmtbtn.b{font-weight:800}
.fmtbtn.i{font-style:italic;font-family:var(--serif)}
.fmtbtn.u{text-decoration:underline}
/* Undo or Redo with nothing to take back: still there, so the bar does
   not jump about, but plainly not doing anything */
.fmtbtn[aria-disabled="true"]{opacity:.35;cursor:default}
.fmtbtn[aria-disabled="true"]:hover{background:none;color:var(--ink-2)}
.fmtsep{width:1px;align-self:stretch;margin:3px 5px;background:var(--line)}
.fmtbar .hint{white-space:nowrap}
@media (max-width:760px){ .fmtbar .hint{display:none} }
.briefmins{font-size:12px;color:var(--accent-ink);background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:var(--r);padding:4px 9px;align-self:flex-start;margin-bottom:2px}
/* the reference, editable where it sits */
.scrip.doc input.refname{font:inherit;font-size:14px;font-weight:700;color:var(--accent-ink);background:none;
  border:1px solid transparent;border-radius:3px;padding:1px 4px;margin-left:-4px;min-width:0}
.scrip.doc input.refname:hover{border-color:var(--line)}
.scrip.doc input.refname:focus{outline:none;border-color:var(--accent);background:var(--surface)}
.refsay{font-size:11px;color:var(--ink-3)}
.refsay.ok{color:var(--green)}
.refsay.many{color:var(--gold)}
.refsay.bad{color:var(--red)}

/* ---- the sidebar, narrowed to its icons ---- */
.railtoggle{position:absolute;top:10px;right:8px;width:26px;height:26px;display:flex;align-items:center;
  justify-content:center;border:1px solid transparent;border-radius:var(--r);background:none;color:var(--ink-3);opacity:0;transition:opacity .12s}
.rail:hover .railtoggle,.railtoggle:focus-visible{opacity:1}
.railtoggle:hover{background:var(--line-2);color:var(--ink)}
.rail{position:relative;transition:flex-basis .14s ease}
.rail.narrow{flex:0 0 56px;padding-left:6px;padding-right:6px;align-items:center}
.rail.narrow .brand b,.rail.narrow .navbtn span,.rail.narrow .railfoot span:not(.dot){display:none}
.rail.narrow .brand{justify-content:center;padding-left:0;padding-right:0}
.rail.narrow .navbtn{justify-content:center;padding-left:0;padding-right:0;width:100%}
.rail.narrow .railtoggle{position:static;opacity:1;margin:0 0 4px;transform:rotate(180deg)}
.rail.narrow .railfoot{align-items:center;padding-left:0;padding-right:0}
.rail.narrow .railfoot .dot{margin:0}
@media (max-width:760px){ .railtoggle{display:none} .rail.narrow{flex:0 0 auto;padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px))} .rail.narrow .navbtn span{display:block} }
.iconbtn.rangebtn{width:auto;padding:0 7px;font-size:11px;letter-spacing:.02em}

/* ---- panels fold sideways, into the edge ----
   Against the sidebar, a folded panel is its name written down the
   edge. Folding upwards saved the height and kept the width, which is
   the wrong way round beside something you are writing. */
.dfrail{flex-direction:row;align-items:flex-start;gap:10px}
.dfrail.shut{flex:0 0 auto;background:none;border:0;padding:0;max-height:none}
.railshelf{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:10px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:10px 5px}
.railopenpanels{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:12px}
.railshelf .railtab{position:relative;display:flex;align-items:center;justify-content:center;width:34px;height:34px;border:0;background:none;
  padding:0;border-radius:var(--r);color:var(--ink-3);cursor:pointer}
.railshelf .railtab .ic{display:flex}
.railshelf .railtab .ic svg{width:18px;height:18px}
/* folded, icons only: the name stays for screen readers and the tooltip */
.railshelf .railtab .nm{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.railshelf .railtab .railnum{position:absolute;top:-3px;right:-5px;font-size:9.5px;padding:0 5px;line-height:15px;min-width:15px;text-align:center}
.railshelf .railtab:hover{color:var(--accent-ink);background:var(--line-2)}
.railshelf .railtab:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.cardhead.fold .foldmark{font-size:13px}
.rsshelf{align-self:flex-start}
.rs3 > .rsshelf{flex:0 0 auto}
@media (max-width:900px){
  .dfrail{flex-direction:column}
  .railshelf{flex-direction:row;width:100%;box-sizing:border-box;justify-content:flex-start;padding:7px 9px}
}
.timingpanel #plancard{margin-top:0}
.timingpanel > .card{padding:0;border:0;background:none}
/* folded, the framework's column is the width of the shelf, not the
   width the open panel had */
.rs3.fwshut{grid-template-columns:auto minmax(0,1fr) 300px}

/* ---- the reading window is on the right, so the app keeps left ----
   A page may not move its own window, but it may decline to use part
   of the screen. With wol.jw.org open on the right, the shell keeps to
   the left of it and none of the talk is hidden underneath. */
body.wolbeside .shell{padding-right:var(--wolw,0px);transition:padding-right .16s ease}
body.wolbeside .toast,body.wolbeside .micbar{margin-right:var(--wolw,0px)}

/* ---- Research on a phone ----
   One column, the width of the screen, with everything that is beside
   it on a big screen behind the chips above. The Draft's arrangement,
   because the two pages should not need learning twice. */
.rs1{display:flex;flex-direction:column;gap:14px;min-width:0}
.rs1 > .dfchips{padding:0;margin:0}
.rs1 .ptpick{width:100%;box-sizing:border-box;font-size:14px;min-height:42px}
.rs1 .rscol.mid{gap:14px}
.rs1 .rspanel{padding:13px 14px}
.rssheet{display:flex;flex-direction:column;gap:12px}
.rssheet .rspanel{border:0;padding:0;background:none}
.dfchip.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-ink)}
.dfchip.on .mk{color:var(--accent-ink);transform:rotate(90deg)}
.dfchips{overflow-x:auto;scrollbar-width:none}
.dfchips::-webkit-scrollbar{display:none}
.dfchip{flex:0 0 auto}
/* the five parts of a talk do not fit across a phone, so they scroll */
@media (max-width:760px){
  .tabs{overflow-x:auto;scrollbar-width:none;min-width:0;flex:1 1 auto;-webkit-overflow-scrolling:touch}
  .tabs::-webkit-scrollbar{display:none}
  .tab{flex:0 0 auto}
}
/* a panel inside a sheet does not need its own title: the sheet has
   one already, and two of the same words is one too many */
.rssheet .rspanel > .cardhead > .lbl,.rssheet .rspanel > .cardhead > .foldmark{display:none}
.rssheet .rspanel > .cardhead{justify-content:flex-end}
@media (max-width:760px){ .tab{padding:7px 9px;font-size:12.5px}
  /* a phone has room for one name: the stage you are on; the others are their icons */
  .tab:not(.on) .tabnm{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .tab:not(.on) .tabic{margin-right:0} }

/* ---- Research is given the screen ----
   It is three columns of working material, not a single column of
   form, so it is not held to the 980px the other pages read best at.
   The middle column is the work and takes what is left over. */
.two.research{max-width:1680px}
.two.research > .col-main{width:100%}
.rs3{grid-template-columns:300px minmax(0,1fr) 320px}
.rs3.fwshut{grid-template-columns:auto minmax(0,1fr) 320px}


/* On a phone the point picker above already names the point, so its
   heading is kept for screen readers and taken off the screen: that is
   the room the first clip needed to start on the first screen. */
.rs1 .rshead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- support levels ---- */
.lvtag{display:inline-block;margin-left:8px;padding:1px 7px;border-radius:999px;font-size:10.5px;font-weight:600;letter-spacing:.03em;border:1px solid var(--line);color:var(--ink-2);vertical-align:1px}
.lvtag.owner{color:var(--accent-ink);border-color:var(--accent-line,var(--line))}
.lvtag.support{color:var(--gold);border-color:var(--gold-line,var(--line))}
.lvpick{margin-top:14px;padding-top:12px;border-top:1px solid var(--line-2);display:flex;flex-direction:column;gap:8px}
.lvpick .lbl{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.lvopt{font:inherit;display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:8px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);color:var(--ink);cursor:pointer;text-align:left;max-width:230px}
.lvopt.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-ink)}

/* ---- the framework's headings on the Draft ----
   Heading 1 is a main point, heading 2 a sub-point; both are the
   framework's and are read-only here (changed on the Framework page). */
.blocks.doc .lockhead{margin:0;cursor:default;min-width:0;padding:2px 2px;flex:1 1 auto}
.blocks.doc .lockhead.h1{font-family:var(--serif);font-size:22px;font-weight:600;line-height:1.3;color:var(--ink)}
.blocks.doc .lockhead.h2{font-size:17px;font-weight:600;line-height:1.4;color:var(--ink);margin-top:10px}
.blocks.doc .blk[data-kind="subpt"]:hover{background:none}
.blocks.doc .blk[data-kind="point"]:hover{background:none}

/* ---- the framework as a tree ----
   The outline's own indents: a point's lines hang off it, and a line
   the outline set further in hangs off the line above it. Each row has
   a cell per level: a line running on (pipe), nothing (none), or its
   own elbow (tee when more follow at that level, elbow when it is the
   last). The cells stretch the row's height so the lines meet. */
.fwsubs.tree{border-left:0;padding-left:2px;gap:0}
.fwsubs.tree .fwsub{flex-direction:row;align-items:stretch;gap:0}
.fwtree{display:flex;flex:0 0 auto}
.fwtree .tg{position:relative;width:20px;flex:0 0 20px}
.fwtree .tg::before,.fwtree .tg::after{content:"";position:absolute;border-color:var(--line)}
.fwtree .tg.pipe::before,.fwtree .tg.tee::before{left:7px;top:0;bottom:0;border-left:1.5px solid var(--line)}
.fwtree .tg.elbow::before{left:7px;top:0;height:15px;border-left:1.5px solid var(--line)}
.fwtree .tg.tee::after,.fwtree .tg.elbow::after{left:7px;top:14px;width:10px;border-top:1.5px solid var(--line)}
.fwpt.on .fwtree .tg::before,.fwpt.on .fwtree .tg::after{border-color:var(--accent-line)}
.fwbody{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:4px;padding:4px 0 6px 4px}
.fwsub.lv1 .tt,.fwsub.lv2 .tt,.fwsub.lv3 .tt,.fwsub.lv4 .tt{font-size:12.5px}
.dfpanel .fwtree .tg{width:14px;flex-basis:14px}
.dfpanel .fwtree .tg.tee::after,.dfpanel .fwtree .tg.elbow::after{width:6px}
.dfpanel .fwsubs.tree{margin-left:6px}
/* Research's list of a point's lines, set in the same way */
.rsfwsub.lv1{margin-left:16px}.rsfwsub.lv2{margin-left:32px}.rsfwsub.lv3,.rsfwsub.lv4{margin-left:48px}
/* on the Draft, a line under a sub-point is heading 3 */
.blocks.doc .lockhead.h3{font-size:15px;font-weight:600;line-height:1.45;color:var(--ink-2);margin-top:6px}

/* ---- a page of notes reads like the talk's Draft ----
   The same three headings at the same sizes as the Draft's H1, H2 and
   H3, so an outline laid out on a page looks the way it does in a
   talk. A citation an outline carried is a link into the library. */
.nline.k-part .ned{font-size:22px;line-height:1.3}
.nline.k-talk .ned{font-size:17px;line-height:1.4}
.nline.k-sub .ned{font-size:15px;line-height:1.45}
.nref.ncite{font-weight:500;font-size:13px;padding-top:1px}
.nref.ncite a{color:var(--accent-ink)}

/* the handles at each end of a selection, on a touchscreen */
.spanknob{position:fixed;z-index:60;width:22px;height:22px;touch-action:none}
.spanknob::before{content:"";position:absolute;left:5px;top:0;width:12px;height:12px;border-radius:0 50% 50% 50%;background:var(--accent,#0067C0)}
.spanknob.start::before{border-radius:50% 0 50% 50%}

/* a scripture's reference highlighted as a whole */
.refhl{border-radius:4px;padding:0 4px;-webkit-box-decoration-break:clone;box-decoration-break:clone;color:var(--ink)!important}
.refhl.gold{background:var(--hl-gold)}.refhl.green{background:var(--hl-green)}.refhl.blue{background:var(--hl-blue)}
.refhl.plum{background:var(--hl-plum)}.refhl.red{background:var(--hl-red)}.refhl.orange{background:var(--hl-orange)}
.refpen{padding:1px 4px;margin-left:4px;opacity:.45;vertical-align:middle}
.refpen.on,.refpen:hover,.refpen:focus-visible,.nline:hover .refpen,.blk:hover .refpen,.nboxi:hover .refpen{opacity:1}
.refpen .pen{display:inline-block;min-width:14px;padding:0 3px;border-radius:3px;font-size:11px;font-weight:700;line-height:15px;text-align:center;color:var(--ink)}
.refpen .pen.blank{border:1px dashed var(--line,#bbb)}
.refpen .pen.gold{background:var(--hl-gold)}.refpen .pen.green{background:var(--hl-green)}.refpen .pen.blue{background:var(--hl-blue)}
.refpen .pen.plum{background:var(--hl-plum)}.refpen .pen.red{background:var(--hl-red)}.refpen .pen.orange{background:var(--hl-orange)}
@media (pointer:coarse){.refpen{opacity:1}}
.iconbtn.refpen.on{background:none;border-color:transparent;box-shadow:none}

/* A scripture says which translation it reads in, beside its reference,
   and is changed or taken out from there — the Draft and Notes alike. */
select.mini.trchip{max-width:none;width:auto;padding:1px 4px;font-size:11px;font-weight:600;letter-spacing:.03em;
  color:var(--accent-ink);background:transparent;border:1px solid var(--accent-line);border-radius:999px;cursor:pointer;font-family:var(--sans)}
select.mini.trchip:hover,select.mini.trchip:focus-visible{background:var(--surface);border-color:var(--accent)}
select.mini.trchip.own{background:var(--accent-soft)}
.iconbtn.scripdel,.iconbtn.scripchg{width:auto;gap:4px;padding:0 7px;font-size:11px;font-weight:500;font-family:var(--sans)}
.iconbtn.scripdel:hover{border-color:var(--red);color:var(--red)}
.nref{flex-wrap:wrap;align-items:center}
.nref .scripchg,.nref .scripdel{opacity:.45;transition:opacity .12s ease}
.nline:hover .nref .scripchg,.nline:hover .nref .scripdel,.nref .scripchg:focus-visible,.nref .scripdel:focus-visible{opacity:1}
@media (hover:none){ .nref .scripchg,.nref .scripdel{opacity:.85} }
.nref input.refname{font:inherit;font-weight:700;color:var(--accent-ink);background:var(--surface);border:1px solid var(--accent);border-radius:4px;padding:1px 5px}
a.jwl{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;font-family:var(--sans);color:var(--plum);
  text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:1px 7px;line-height:1.5;white-space:nowrap}
a.jwl:hover{border-color:var(--plum)}
.scrip.doc .ref a.jwl{border-bottom:1px solid var(--line)}
.nboxi a.jwl{margin-left:6px;vertical-align:middle}

/* choosing where a part-verse is cut */
.cutter{margin:8px 0 4px;padding:10px 12px;border:1px dashed var(--line,#ccc);border-radius:8px;background:var(--paper)}
.cutrow+.cutrow{margin-top:10px}
.cutwords{margin:6px 0;line-height:2;font-family:var(--serif,Georgia,serif)}
.cutw{border:0;background:none;padding:1px 2px;border-radius:4px;color:var(--muted,#888);font:inherit;cursor:pointer}
.cutw.in{color:var(--ink);background:var(--accent-soft)}
.cutw:hover{outline:1px solid var(--accent)}

/* a scripture folded to its reference */
.foldbtn{padding:2px 3px;margin-right:2px;color:var(--muted,#777);vertical-align:middle}
.foldbtn svg{transition:transform .15s}
.foldbtn.folded svg{transform:rotate(-90deg)}
.scrip.folded > :not(.ref){display:none!important}
.scrip.folded .ref > :not(.foldbtn):not(.refname):not(.refpen):not(.jwl){display:none!important}
.nmain.folded > :not(.nref){display:none!important}
.nmain.folded .nref .trchip,.nmain.folded .nref .scripchg,.nmain.folded .nref .scripdel,.nmain.folded .nref .cutbtn,.nmain.folded .nref .muted{display:none!important}

/* ---- S3: a scripture with its reference in the margin ----
   The reference, its translation and how it is read sit in a margin of
   their own; the verse is on a soft tint beside them; every tool is in a
   dark bar that shows over the scripture while it is pointed at or
   tapped. The same on the Draft and in Notes. */
.scrip.doc.s3,.nmain.s3{position:relative;display:grid;grid-template-columns:156px minmax(0,1fr);column-gap:14px;row-gap:0;align-items:start;outline:none}
.scrip.doc.s3>*,.nmain.s3>*{grid-column:2;min-width:0}
.scrip.doc.s3>*+*,.nmain.s3>*+*{margin-top:4px}
.scrip.doc.s3>.ref,.nmain.s3>.nref{grid-column:1;grid-row:1 / span 12;margin-top:0;display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;column-gap:2px;row-gap:1px;text-align:right;padding-top:5px;font-weight:600}
.scrip.doc.s3 input.refname{width:calc(100% - 26px);text-align:right;box-sizing:border-box;font-size:13px;padding:1px 3px;text-overflow:ellipsis}
.nmain.s3>.nref>a{font-size:13px;font-weight:700;line-height:1.35;max-width:calc(100% - 26px)}
.nmain.s3>.nref>.muted{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.s3 .smeta{flex-basis:100%;font-size:11px;font-weight:400;color:var(--ink-3);text-align:right}
.s3 .refsay{flex-basis:100%;text-align:right}
.nmain.s3>.nref>.muted{flex-basis:100%;text-align:right;font-weight:400}
.scrip.doc.s3 .vt,.nmain.s3 .nvt{background:var(--accent-soft);border-left:2px solid var(--accent);border-radius:0 6px 6px 0;padding:6px 12px 6px 14px;color:var(--ink)}
.scrip.doc.s3 .vt+.muted{font-size:11px}
/* the tools, in a dark bar over the scripture */
.scrip.doc.s3 .refctl,.nmain.s3 .refctl{position:absolute;left:170px;bottom:calc(100% - 2px);max-width:calc(100% - 170px);box-sizing:border-box;z-index:40;display:flex;flex-wrap:wrap;align-items:center;gap:1px;
  white-space:nowrap;background:#1B1B1B;border-radius:8px;padding:3px;box-shadow:0 6px 18px rgba(0,0,0,.22);opacity:0;pointer-events:none;transition:opacity .12s ease}
.scrip.doc.s3:hover .refctl,.scrip.doc.s3:focus-within .refctl,.nmain.s3:hover .refctl,.nmain.s3:focus-within .refctl{opacity:1;pointer-events:auto}
.s3 .refctl>button,.s3 .refctl>a,.s3 .refctl>select,.s3 .refctl .iconbtn{color:#FFFFFF!important;background:none!important;border:0!important;border-radius:5px;font-size:12px;font-weight:400;padding:5px 8px;opacity:1!important;text-decoration:none;display:inline-flex;align-items:center;gap:5px;box-shadow:none}
.s3 .refctl>button:hover,.s3 .refctl>a:hover,.s3 .refctl>select:hover,.s3 .refctl .iconbtn.on{background:rgba(255,255,255,.16)!important}
.s3 .refctl option{color:#1B1B1B}
.s3 .refctl a.jwl{color:#9FD3FF!important}
.s3 .refctl .refpen .pen.blank{color:#FFFFFF;border-color:rgba(255,255,255,.55)}
/* folded: the reference in the margin and a hairline where the verse was */
.scrip.doc.s3.folded::after,.nmain.s3.folded::after{content:"";grid-column:2;grid-row:1;align-self:center;height:1px;background:var(--accent-line);margin-top:4px}
.nmain.s3.folded .ntools,.s3.folded .smeta{display:none!important}
/* a narrow screen has no room for a margin: the reference goes above the
   verse and the tools sit under it while the scripture is tapped */
@media (max-width:700px){
  .scrip.doc.s3,.nmain.s3{display:block}
  .scrip.doc.s3>.ref,.nmain.s3>.nref{justify-content:flex-start;text-align:left}
  .scrip.doc.s3 input.refname{width:auto;text-align:left}
  .s3 .smeta{flex-basis:auto;text-align:left;margin-left:6px}
  .s3 .refsay,.nmain.s3>.nref>.muted{text-align:left}
  /* the bar floats over the line above, as on a wide screen, so a tap
     never moves the words under the finger */
  .scrip.doc.s3 .refctl,.nmain.s3 .refctl{left:0;max-width:100%}
  .scrip.doc.s3.folded::after,.nmain.s3.folded::after{display:none}
}
@media print{ .s3 .refctl{display:none!important} }
/* the JW Library switch on the formatting bar */
.fmtbtn.jwlsw{display:inline-flex;align-items:center;gap:5px;padding-left:6px;padding-right:6px}
.fmtbtn.jwlsw .sw2{width:24px;height:14px;border-radius:7px;background:var(--line,#ccc);position:relative;transition:background .15s}
.fmtbtn.jwlsw .sw2 span{position:absolute;top:2px;left:2px;width:10px;height:10px;border-radius:50%;background:#fff;transition:left .15s}
.fmtbtn.jwlsw[aria-checked="true"] .sw2{background:var(--accent)}
.fmtbtn.jwlsw[aria-checked="true"] .sw2 span{left:12px}
.s3 .refctl>select{width:auto!important;max-width:120px;flex:0 0 auto}

/* links in a line you write in */
a.ln{color:var(--accent-ink);text-decoration:underline;text-decoration-color:var(--accent-line);text-underline-offset:2px;cursor:pointer}
a.ln[href^="jwlibrary:"]{text-decoration-style:dotted;text-decoration-color:var(--accent)}
.nref.ncite a.jwl{font-size:12px;font-weight:400;display:inline-flex;align-items:center;gap:4px;color:var(--plum,#5F4B8B);margin-left:6px}

/* ---- a page of notes with its framework down the side ---- */
.wrap.nlayout{max-width:1120px;display:flex;align-items:flex-start;gap:18px}
.wrap.nlayout>.npage{flex:1;min-width:0;margin:0}
.nrail{flex:0 0 var(--nrailw,232px);position:sticky;top:12px;max-height:calc(100vh - 90px);overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg,10px);padding:10px 8px 12px;box-sizing:border-box}
.nrail.folded{flex:0 0 auto;padding:0;background:none;border:0}
/* the grip between the framework and the page: drag it to set the width */
.nrailgrip{flex:0 0 10px;align-self:flex-start;position:sticky;top:12px;height:calc(100vh - 90px);margin:0 -14px;cursor:col-resize;touch-action:none;z-index:2}
.nrailgrip::after{content:"";position:absolute;left:4px;top:8px;bottom:8px;width:2px;border-radius:2px;background:transparent;transition:background .15s}
.nrailgrip:hover::after,.nrailgrip.on::after,.nrailgrip:focus-visible::after{background:var(--accent-line)}
.nrailgrip:focus-visible{outline:none}
body.dragwide{cursor:col-resize;user-select:none}
.nrailhead{display:flex;align-items:center;gap:6px;padding:0 4px 8px}
.nseg{display:flex;gap:1px;background:var(--bg,#f3f3f3);border-radius:6px;padding:2px}
.nsegb{display:inline-flex;align-items:center;justify-content:center;width:26px;height:22px;border:0;background:none;border-radius:4px;padding:0;color:var(--muted,var(--ink-2));cursor:pointer}
.nsegb:hover{color:var(--ink)}
.nsegb.on{background:var(--surface);color:var(--accent-ink,var(--ink));box-shadow:0 1px 2px rgba(0,0,0,.12)}
.nsegb svg{display:block}
.nrailist{display:flex;flex-direction:column;gap:0}
.nri{display:flex;align-items:stretch;border:0;background:none;text-align:left;font:inherit;font-size:13px;line-height:1.35;color:var(--ink-2);border-radius:6px;padding:0 8px 0 4px;cursor:pointer;min-width:0}
.nri .lab{flex:1 1 auto;min-width:0;padding:5px 0 5px 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nri:hover{background:var(--bg,#f3f3f3);color:var(--ink)}
.nri.here{background:var(--accent-soft);color:var(--accent-ink);font-weight:600}
.nri.lv0{font-weight:700;color:var(--ink);margin-top:8px;font-size:12px;letter-spacing:.03em;text-transform:uppercase}
.nri.lv0:first-child{margin-top:0}
.nri.lv2{font-size:12.5px}
/* the tree's lines, the Framework page's at the rail's narrower width */
.nri .fwtree{margin-left:4px}
.nri .fwtree .tg{width:14px;flex-basis:14px}
.nri .fwtree .tg.tee::after,.nri .fwtree .tg.elbow::after{width:7px}
.nri.here .fwtree .tg::before,.nri.here .fwtree .tg::after{border-color:var(--accent-line,var(--line))}
.npagenav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:22px;padding-top:14px;border-top:1px solid var(--line)}
.npagenav .btn{max-width:42%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.toast.long{max-width:min(520px,92vw);display:flex;gap:12px;align-items:flex-start;line-height:1.45}
@media (max-width:900px){
  .wrap.nlayout{flex-direction:column;gap:10px}
  .wrap.nlayout>.npage{width:100%}
  .nrail{position:static;flex:none;width:100%;max-height:none}
  .nrail.folded{width:auto}
  .nrailgrip{display:none}
}

/* ---- lines kept together ----
   Enter starts a new line, not a new paragraph: the step from one line
   to the next is the same as the step between the rows of a wrapped
   line, so lines typed one under another read as one block, the way a
   word processor sets them. Headings keep the space above them. */
.ndoc .nline.k-text,.ndoc .nline.k-bullet,.ndoc .nline.k-label,.ndoc .nline.k-quote{padding-top:0;padding-bottom:0}
.ndoc .nline.k-text .ned,.ndoc .nline.k-bullet .ned,.ndoc .nline.k-label .ned,.ndoc .nline.k-quote .ned{line-height:1.55;padding-top:0;padding-bottom:0}
.blocks.doc .blk[data-kind="text"],.blocks.doc .blk[data-kind="bullet"],.blocks.doc .blk[data-kind="todo"],.blocks.doc .blk[data-kind="cite"]{padding-top:0;padding-bottom:0}
.blocks.doc .blk[data-kind="text"] .ta,.blocks.doc .blk[data-kind="bullet"] .ta,.blocks.doc .blk[data-kind="todo"] .ta,.blocks.doc .blk[data-kind="cite"] .ta{padding-top:0;padding-bottom:0;line-height:1.6;min-height:1.6em}
/* the tools of a scripture, when not shown, are not there to be hit by a
   click or a drag selecting across lines; nor while one is selecting */
.scrip.doc.s3 .refctl,.nmain.s3 .refctl{visibility:hidden}
.scrip.doc.s3:hover .refctl,.scrip.doc.s3:focus-within .refctl,.nmain.s3:hover .refctl,.nmain.s3:focus-within .refctl{visibility:visible}
body.spanning .s3 .refctl{visibility:hidden!important;opacity:0!important}