/* SPDX-License-Identifier: AGPL-3.0-only
   Copyright (C) 2026 Vaibhav Chhajer */
/* Scriptavera
   A mathematician's desk: a slate board on the left for the plan, white paper
   on the right for the work. Blue pencil for actions, red pencil for doubts,
   highlighter for anything the author must look at. Headings and the paper
   itself are set in the Computer Modern faces that ship with KaTeX. */

:root {
  --slate: #21352f;
  --slate-2: #2c463d;
  --slate-3: #3a5a4f;
  --chalk: #f3f5f1;
  --chalk-dim: #a8b9b0;
  --desk: #eceeea;
  --paper: #ffffff;
  --ink: #18212b;
  --graphite: #56616b;
  --rule: #d5dad4;
  --rule-soft: #e6e9e4;
  --line: #c2c9c1;              /* the edge of every button: visible on white and on the desk */
  --blue: #2747c7;
  --blue-deep: #1c3496;
  --blue-soft: #e9edfb;
  --red: #c2362b;
  --red-soft: #fbebe9;
  --hl: #ffe45c;
  --hl-soft: #fff7cc;
  --green: #2c7a55;
  --green-soft: #e4f2ea;
  --ui: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --tex: "KaTeX_Main", "Latin Modern Roman", "CMU Serif", Georgia, "Times New Roman", serif;
  --mono: "Cascadia Mono", Consolas, "SF Mono", ui-monospace, monospace;
  --rail-w: 268px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--desk); color: var(--ink); font: 14.5px/1.5 var(--ui); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p { margin: 0; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
[hidden] { display: none !important; }

#app { display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); height: 100vh; }
#app.bare { grid-template-columns: minmax(0, 1fr); }            /* home and the new-paper form: no steps to show */
#app.bare #rail { display: none; }
#stage { display: flex; flex-direction: column; min-width: 0; height: 100vh; }
#main { flex: 1; overflow: auto; outline: none; }

/* ------------------------------------------------------------- rail */
#rail { background: var(--slate); color: var(--chalk); display: flex; flex-direction: column; overflow-y: auto; }
.rail-home { padding: 16px 14px 8px; }
.home-btn { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 0 13px; background: transparent;
  color: var(--chalk); border: 1px solid var(--slate-3); border-radius: 7px; cursor: pointer; font-size: 14.5px; text-align: left; }
.home-btn:hover { background: var(--slate-2); border-color: var(--chalk-dim); }
.home-btn svg, .hb-btn svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.rail-sec { padding: 6px 12px 14px; }
.rail-foot { margin-top: auto; padding: 12px; border-top: 1px solid var(--slate-2); }
.rail-foot button { width: 100%; background: transparent; border: 0; color: var(--chalk-dim); text-align: left; padding: 8px 10px; border-radius: 6px; cursor: pointer; display: flex; justify-content: space-between; gap: 8px; }
.rail-foot button:hover { background: var(--slate-2); color: var(--chalk); }
.key-dot { width: 8px; height: 8px; border-radius: 50%; background: #e8776c; align-self: center; flex: none; }
.key-dot.ok { background: #7fd0a4; }

/* the steps: a chalk line with a mark for each step */
.steps { list-style: none; margin: 0; padding: 0 2px; position: relative; }
.steps::before { content: ""; position: absolute; left: 21px; top: 14px; bottom: 14px; width: 1px; background: var(--slate-3); }
.step { position: relative; display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start; width: 100%; background: transparent; border: 0; color: var(--chalk-dim); padding: 5px 8px; border-radius: 7px; cursor: pointer; text-align: left; }
.phase { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 12px 10px 4px; color: var(--chalk-dim); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; }
.phase:first-child { padding-top: 2px; }
.phase-n { letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; }
.step:hover { background: var(--slate-2); }
.step.on { background: var(--slate-2); color: var(--chalk); }
.step .mark { width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid var(--slate-3); background: var(--slate); margin: 3px 0 0 5px; position: relative; z-index: 1; }
.step.done .mark { background: #7fd0a4; border-color: #7fd0a4; }
.step.done .mark::after { content: ""; position: absolute; left: 4px; top: 1.5px; width: 3.5px; height: 7px; border: solid var(--slate); border-width: 0 1.8px 1.8px 0; transform: rotate(40deg); }
.step.running .mark { border-color: var(--chalk); border-top-color: transparent; animation: spin .9s linear infinite; }
.step.waiting .mark { background: var(--hl); border-color: var(--hl); }
.step.error .mark { background: #e8776c; border-color: #e8776c; }
.step.paused .mark { border-color: var(--hl); box-shadow: inset 0 0 0 3px var(--slate), inset 0 0 0 8px var(--hl); }
.step.paused .step-note { color: var(--hl); }
.step.done, .step.running, .step.waiting, .step.error, .step.paused { color: var(--chalk); }
.step-name { display: block; font-size: 14px; }
.step-note { display: block; font-size: 11.5px; color: var(--chalk-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.step.waiting .step-note { color: var(--hl); }
.step.gate .step-name::after { content: "you"; font-size: 10.5px; margin-left: 7px; padding: 0 5px; border: 1px solid var(--slate-3); border-radius: 8px; color: var(--chalk-dim); vertical-align: 1px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ----------------------------------------------------------- topbar */
#topbar { display: flex; align-items: center; gap: 12px; padding: 10px 26px; background: var(--paper); border-bottom: 1px solid var(--rule); min-height: 54px; }
#topbar:empty { display: none; }
.tb-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-dom { color: var(--graphite); font-size: 13px; white-space: nowrap; }
.tb-space { flex: 1; }
#topbar > .chip { min-height: 30px; padding: 0 12px; border-radius: 15px; }   /* the same height as the buttons beside them */

/* the home header: the slate of the rail, across the top */
#topbar.homebar { background: var(--slate); color: var(--chalk); border-bottom: 0; padding: 0 28px; min-height: 60px; gap: 10px; }
.homebar .brand { display: flex; align-items: center; gap: 10px; background: none; border: 0; color: var(--chalk); padding: 6px 6px 6px 0; cursor: pointer; border-radius: 7px; }
.brand-mark { width: 27px; height: 27px; flex: none; }
.brand-name { font: 400 24px/1 var(--tex); letter-spacing: .01em; }
.brand-name i { color: #a9bcff; }
.hb-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; border: 1px solid var(--slate-3);
  background: transparent; color: var(--chalk); border-radius: 7px; cursor: pointer; font-size: 13.5px; white-space: nowrap; }
.hb-btn:hover { background: var(--slate-2); border-color: var(--chalk-dim); }
.hb-btn.on { border-color: var(--hl); color: var(--hl); }
.hb-btn .key-dot { margin-left: 1px; }

/* ---------------------------------------------------------- controls */
/* One button language: every button has an edge; buttons that stand together have one height. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 36px; padding: 0 15px; border: 1px solid var(--line);
  background: var(--paper); color: var(--ink); border-radius: 7px; font-size: 14px; line-height: 1.25; cursor: pointer; white-space: nowrap; text-decoration: none; }
.btn:hover { border-color: var(--graphite); text-decoration: none; }
.btn svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.btn.primary { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 600; }
.btn.primary:hover { background: var(--blue-deep); border-color: var(--blue-deep); }
.btn.danger { color: var(--red); border-color: #e2b6b1; }
.btn.danger:hover { border-color: var(--red); background: var(--red-soft); }
.btn.danger.solid { background: var(--red); border-color: var(--red); color: #fff; font-weight: 600; }
.btn.danger.solid:hover { background: #a32c22; border-color: #a32c22; }
.btn.quiet { border-color: transparent; background: transparent; color: var(--graphite); }
.btn.quiet:hover { background: var(--rule-soft); color: var(--ink); }
.btn.small { min-height: 30px; padding: 0 11px; font-size: 13px; gap: 6px; }
.btn.small svg { width: 15px; height: 15px; }
.btn.big { min-height: 44px; padding: 0 22px; font-size: 15.5px; }
.btn.icon-btn { padding: 0; width: 30px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* a "More" menu */
.menu-wrap { position: relative; z-index: 3; display: inline-flex; }
.menu-wrap:has(.menu) { z-index: 60; }
.menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 200px; background: var(--paper); border: 1px solid var(--rule); border-radius: 8px;
  box-shadow: 0 12px 30px -10px rgba(24,33,43,.35); padding: 5px; display: flex; flex-direction: column; }
.menu-item { text-align: left; background: none; border: 0; padding: 8px 11px; border-radius: 5px; cursor: pointer; font-size: 13.5px; color: var(--ink); white-space: nowrap; }
.menu-item:hover, .menu-item:focus-visible { background: var(--rule-soft); outline: none; }
.menu-item.danger { color: var(--red); }
.menu-item.danger:hover, .menu-item.danger:focus-visible { background: var(--red-soft); }
.field { display: block; }
.field > span { display: block; font-size: 13px; color: var(--graphite); margin-bottom: 4px; }
.field small { color: var(--graphite); font-size: 12.5px; display: block; margin-top: 5px; }
/* fields one above the other: a clear gap, so that a field's help line is read with its own box, not the next one */
.sec > .field + .field, .sec > .field + .grid2, .sec > .grid2 + .field, .sec > .grid2 + .grid2 { margin-top: 20px; }
input[type=text], input[type=search], input[type=email], input[type=password], textarea, select {
  width: 100%; border: 1px solid var(--rule); border-radius: 6px; padding: 8px 10px; background: var(--paper); }
input:focus, textarea:focus, select:focus { border-color: var(--blue); outline: 2px solid var(--blue-soft); outline-offset: 0; }
textarea { resize: vertical; line-height: 1.5; }
.chip { display: inline-flex; align-items: center; gap: 6px; background: var(--rule-soft); border-radius: 12px; padding: 2px 10px; font-size: 12.5px; white-space: nowrap; }
.chip.blue { background: var(--blue-soft); color: var(--blue-deep); }
.chip.big { font-size: 14px; padding: 4px 6px 4px 13px; border-radius: 15px; }
.chip.big button.chip { background: transparent; padding: 0 7px; font-size: 15px; }
.picked { align-items: center; }
.chip.green { background: var(--green-soft); color: var(--green); }
.chip.red { background: var(--red-soft); color: var(--red); white-space: normal; }
.chip.hl { background: var(--hl-soft); color: #6b5800; }
button.chip { border: 0; cursor: pointer; }
button.chip:hover { filter: brightness(.95); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.muted { color: var(--graphite); }
.small { font-size: 12.5px; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }

/* ------------------------------------------------------- page frame */
.wrap { max-width: 1120px; margin: 0 auto; padding: 30px 30px 80px; }
.wrap.wide { max-width: 1500px; }
.head { margin-bottom: 22px; }
.head h1 { font: 400 31px/1.2 var(--tex); }
.head p { color: var(--graphite); margin-top: 6px; max-width: 70ch; }
.head-row { display: flex; align-items: flex-start; gap: 16px; }
.sheet { background: var(--paper); border: 1px solid var(--rule); border-radius: 4px; }
.sec { padding: 22px 26px; border-bottom: 1px solid var(--rule-soft); }
.sec:last-child { border-bottom: 0; }
.sec h2 { font: 400 20px/1.3 var(--tex); margin-bottom: 4px; }
.sec h2 + p { color: var(--graphite); margin-bottom: 14px; max-width: 72ch; }
.sec h3 { font-size: 13.5px; font-weight: 600; margin: 16px 0 6px; }
.banner { display: flex; gap: 12px; align-items: center; padding: 11px 16px; border-radius: 6px; margin-bottom: 16px; background: var(--hl-soft); border: 1px solid #ecd97a; }
.banner.red { background: var(--red-soft); border-color: #eab4ae; }
.banner.blue { background: var(--blue-soft); border-color: #c5cff3; }
.banner .grow { min-width: 200px; }

/* --------------------------------------------------------- new paper */
.domain-search { max-width: 380px; }
.dom-group { margin-top: 16px; }
.dom-group-h { font-size: 13px; color: var(--graphite); margin-bottom: 6px; }
.dom-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 6px; }
.dom { text-align: left; border: 1px solid var(--rule); background: var(--paper); border-radius: 6px; padding: 8px 11px; cursor: pointer; display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; }
.dom:hover { border-color: var(--graphite); }
.dom.on { border-color: var(--blue); background: var(--blue-soft); box-shadow: inset 0 0 0 1px var(--blue); }
.dom-name { font-weight: 600; }
.dom-code { font-size: 12px; color: var(--graphite); }
.dom-blurb { grid-column: 1 / -1; font-size: 12.5px; color: var(--graphite); line-height: 1.35; }
.picked { min-height: 30px; margin: 12px 0 0; }
.drop { border: 1.5px dashed var(--rule); border-radius: 8px; padding: 30px 20px; text-align: center; cursor: pointer; background: #fafbf9; }
.drop:hover, .drop.over { border-color: var(--blue); background: var(--blue-soft); }
.drop strong { display: block; font: 400 19px var(--tex); margin-bottom: 3px; }
.files { margin-top: 10px; }
.file { display: flex; justify-content: space-between; gap: 10px; padding: 6px 2px; border-bottom: 1px solid var(--rule-soft); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid3 { display: grid; grid-template-columns: 1.1fr 1.3fr 1fr auto; gap: 8px; align-items: end; margin-bottom: 8px; }
.grid-auth { display: grid; grid-template-columns: 1.1fr 1.5fr 1.1fr 1fr auto; gap: 8px; align-items: end; margin-bottom: 8px; }
.declare-line { align-items: flex-start; margin-top: 12px; max-width: 72ch; line-height: 1.5; }
.declare-line input { margin-top: 2px; flex: none; }
blockquote.decl { margin: 4px 0 8px; padding: 2px 0 2px 12px; border-left: 3px solid var(--rule); font-style: italic; font-size: 13.5px; }
details.more > summary { cursor: pointer; color: var(--blue); padding: 4px 0; }
details.more[open] > summary { margin-bottom: 12px; }
.startbar { display: flex; align-items: center; gap: 16px; padding: 18px 26px; }

/* ------------------------------------------------------- page strip */
.strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
.pg { position: relative; border: 1px solid var(--rule); background: var(--paper); border-radius: 3px; padding: 0; cursor: zoom-in; overflow: hidden; aspect-ratio: 3 / 4; }
.pg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pg-n { position: absolute; left: 0; bottom: 0; background: rgba(255,255,255,.92); font-size: 11.5px; padding: 0 6px; border-top-right-radius: 4px; }
.pg-mark { position: absolute; right: 5px; top: 5px; width: 17px; height: 17px; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--rule); }
.pg.read .pg-mark { background: var(--green); border-color: var(--green); }
.pg.read .pg-mark::after { content: ""; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(40deg); }
.pg.flag .pg-mark { background: var(--hl); border-color: #d6bd2e; }
.pg.skip { opacity: .4; }
.pg.skip .pg-mark { display: none; }
.pg.on { outline: 2px solid var(--blue); outline-offset: 1px; }
.pg.now::after { content: ""; position: absolute; inset: 0; border: 2px solid var(--blue); animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .25; } }

/* ------------------------------------------------------ stage screen */
.bar { height: 6px; background: var(--rule-soft); border-radius: 3px; overflow: hidden; margin: 10px 0 4px; }
.bar > i { display: block; height: 100%; background: var(--blue); transition: width .4s ease; }
.kv { display: grid; grid-template-columns: 150px 1fr; gap: 8px 16px; }
.kv dt { color: var(--graphite); font-size: 13px; }
.kv dd { margin: 0; }
.meter { display: inline-block; width: 110px; height: 7px; background: var(--rule-soft); border-radius: 4px; vertical-align: 1px; margin-right: 8px; overflow: hidden; }
.meter > i { display: block; height: 100%; background: var(--green); }
.meter.mid > i { background: #c79a12; }
.meter.low > i { background: var(--red); }
.log { font-size: 13px; max-height: 280px; overflow: auto; border-top: 1px solid var(--rule-soft); }
.log-line { display: grid; grid-template-columns: 64px 1fr; gap: 10px; padding: 4px 0; border-bottom: 1px solid var(--rule-soft); }
.log-line time { color: var(--graphite); font-variant-numeric: tabular-nums; }
.log-line.warn span { color: #8a6500; }
.log-line.error span { color: var(--red); font-weight: 600; }
.log-line.wait span { color: var(--graphite); font-style: italic; }
.log-line.done span, .log-line.stage span { font-weight: 600; }
.calls { width: 100%; border-collapse: collapse; font-size: 13px; }
.calls th { text-align: left; font-weight: 600; color: var(--graphite); padding: 6px 10px 6px 0; border-bottom: 1px solid var(--rule); }
.calls td { padding: 5px 10px 5px 0; border-bottom: 1px solid var(--rule-soft); vertical-align: top; }
.calls .num { text-align: right; font-variant-numeric: tabular-nums; }
.calls tr.bad td { color: var(--red); }

/* --------------------------------------------------------- literature */
.lit { border-top: 1px solid var(--rule-soft); }
.lit-item { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--rule-soft); align-items: start; }
.lit-score { font: 400 21px/1 var(--tex); text-align: center; padding-top: 3px; color: var(--graphite); }
.lit-score small { display: block; font: 11px var(--ui); margin-top: 3px; }
.lit-item.sel .lit-score { color: var(--green); }
.lit-item.exc { opacity: .5; }
.lit-title { font-weight: 600; line-height: 1.35; }
.lit-by { color: var(--graphite); font-size: 13px; }
.lit-why { font-size: 13px; margin-top: 3px; }
.lit-notes { font-size: 13px; margin-top: 8px; padding: 8px 12px; background: #f7f8f6; border-left: 2px solid var(--rule); }
.lit-notes ul { margin: 4px 0; padding-left: 18px; }
.lit-actions { display: flex; flex-direction: column; gap: 5px; align-items: flex-end; }
.src-row { display: flex; flex-wrap: wrap; gap: 6px 8px; margin-bottom: 12px; }

/* ------------------------------------------------------ confirm gate */
.gate-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr); gap: 20px; align-items: start; }
.term { display: grid; grid-template-columns: 150px 1fr; gap: 6px 20px; padding: 16px 0; border-bottom: 1px solid var(--rule-soft); }
.term:last-child { border-bottom: 0; }
.term-sym { font-size: 21px; line-height: 1.3; overflow-wrap: anywhere; }
.term-sym.word { font: 400 19px var(--tex); }
.term-side { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.term-q { font-weight: 600; margin-bottom: 6px; }
.term-basis { font-size: 13px; color: var(--graphite); margin-top: 6px; }
.term-alts { margin-top: 8px; }
.term-ctl { display: flex; gap: 16px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.check { display: inline-flex; gap: 7px; align-items: center; cursor: pointer; }
.check input { width: 17px; height: 17px; accent-color: var(--blue); }
.term.ok { background: linear-gradient(90deg, var(--green-soft) 0, var(--green-soft) 4px, transparent 4px); padding-left: 14px; margin-left: -14px; }
.term.off { opacity: .5; }
.preview { font-size: 13.5px; color: var(--graphite); margin-top: 4px; min-height: 1.3em; }
.gatebar { position: sticky; bottom: 0; background: var(--paper); border-top: 1px solid var(--rule); padding: 12px 26px; display: flex; align-items: center; gap: 16px; z-index: 5; box-shadow: 0 -6px 14px -10px rgba(24,33,43,.25); }
.settled { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.settled td { padding: 7px 10px 7px 0; border-bottom: 1px solid var(--rule-soft); vertical-align: top; }
.settled td:first-child { width: 130px; font-size: 16px; }

.guess { border: 1px solid var(--rule); border-radius: 6px; padding: 10px 14px; background: #fafbf9; }
.guess p { margin: 2px 0 0; }
.guess-h { font-size: 12px; color: var(--graphite); }
.guess .term-basis { margin-top: 8px; }
.picks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pick { border: 1.5px solid var(--rule); background: var(--paper); border-radius: 18px; padding: 6px 14px; cursor: pointer; }
.pick:hover { border-color: var(--graphite); }
.pick.on { border-color: var(--blue); background: var(--blue); color: #fff; font-weight: 600; }
.ownbox { margin-top: 10px; }
.ansline { margin-top: 10px; font-size: 13.5px; }
.ans.ok { color: var(--green); font-weight: 600; }
.ans.todo { color: #8a6500; }
.where { margin-top: 4px; display: flex; flex-direction: column; gap: 4px; }
.locate .dlg-b { padding-top: 14px; }
.loc-status { padding: 9px 13px; border-radius: 6px; background: var(--hl-soft); border: 1px solid #ecd97a; margin-bottom: 10px; }
.loc-status.warn { background: var(--red-soft); border-color: #eab4ae; }
.loc-ctx { font: 16px/1.5 var(--tex); margin-bottom: 6px; }
.loc-ctx p { margin: 3px 0; }
.loc-ctx mark, .loc-ctx .math.unc { background: var(--hl); }
.loc-img { position: relative; border: 1px solid var(--rule); }
.loc-img img { display: block; width: 100%; }
.loc-box { position: absolute; border: 3px solid #f2c200; background: rgba(255, 228, 92, .28); border-radius: 4px; box-shadow: 0 0 0 2px rgba(24,33,43,.35); min-width: 14px; min-height: 14px; }
.loc-box i { position: absolute; left: -3px; top: -22px; background: #f2c200; color: #18212b; font: 600 12px var(--ui); padding: 1px 6px; border-radius: 3px; }

/* ------------------------------------------------------- review gate */
.review { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; height: calc(100vh - 54px); }
.rv-left { background: #3b3f3c; overflow: auto; display: flex; flex-direction: column; }
.rv-tools { position: sticky; top: 0; z-index: 2; display: flex; gap: 8px; align-items: center; padding: 8px 12px; background: rgba(33,53,47,.96); color: var(--chalk); }
.rv-tools .btn { background: transparent; color: var(--chalk); border-color: var(--slate-3); }
.rv-tools .btn:hover { background: var(--slate-2); }
.rv-img { padding: 16px; flex: 1; }
.rv-img img { display: block; width: 100%; background: #fff; box-shadow: 0 2px 12px rgba(0,0,0,.4); transform-origin: top left; }
.rv-right { background: var(--paper); overflow: auto; display: flex; flex-direction: column; border-left: 1px solid var(--rule); }
.rv-head { padding: 12px 20px; border-bottom: 1px solid var(--rule-soft); display: flex; align-items: center; gap: 12px; }
.rv-head h1 { font: 400 22px var(--tex); }
.rv-pages { display: flex; gap: 5px; padding: 10px 20px; overflow-x: auto; border-bottom: 1px solid var(--rule-soft); flex: none; }
.rv-p { min-width: 34px; height: 30px; border: 1px solid var(--rule); background: var(--paper); border-radius: 5px; cursor: pointer; font-variant-numeric: tabular-nums; position: relative; }
.rv-p.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.rv-p.flag::after { content: ""; position: absolute; right: -3px; top: -3px; width: 9px; height: 9px; border-radius: 50%; background: var(--hl); border: 1px solid #b89f17; }
.rv-p.edited { border-color: var(--blue); }
.rv-body { padding: 16px 20px 24px; flex: 1; }
.rv-flags { margin-bottom: 14px; }
.flag { border: 1px solid #ecd97a; background: var(--hl-soft); border-radius: 6px; padding: 9px 12px; margin-bottom: 7px; font-size: 13.5px; }
.flag.red { border-color: #eab4ae; background: var(--red-soft); }
.flag.green { border-color: #b9dcc9; background: var(--green-soft); }
.flag code { font-family: var(--mono); font-size: 12.5px; background: rgba(255,255,255,.7); padding: 1px 4px; border-radius: 3px; overflow-wrap: anywhere; }
.flag-line { margin-top: 6px; display: grid; grid-template-columns: 5.5em 1fr; align-items: baseline; }
.flag-k { color: var(--graphite); font-size: 12.5px; }
.occ { margin: 6px 0 2px; display: grid; gap: 4px; }
.occ-row { display: flex; gap: 8px; align-items: baseline; background: rgba(255,255,255,.6); border-radius: 4px; padding: 4px 8px; cursor: pointer; }
.occ-row input { flex: none; }
.occ-row .math.unc, .flag mark { background: var(--hl); }
.ownread { margin-top: 8px; }
.ownprev { margin-top: 5px; }
.flag-act { margin-top: 6px; align-items: center; display: flex; gap: 6px; flex-wrap: wrap; }
.rv-rendered { border: 1px solid var(--rule-soft); border-radius: 4px; padding: 16px 20px; font: 16.5px/1.6 var(--tex); min-height: 120px; }
.rv-rendered p { margin: .5em 0; }
.rv-rendered mark, .math.unc { background: var(--hl); }
.math.unc { padding: 2px 3px; border-radius: 3px; }
.rv-rendered .fig { display: block; font: 13.5px var(--ui); color: var(--graphite); border-left: 3px solid var(--rule); padding: 4px 10px; margin: .6em 0; }
.rv-src { width: 100%; min-height: 260px; font: 13px/1.55 var(--mono); margin-top: 10px; }
.rv-foot { position: sticky; bottom: 0; background: var(--paper); border-top: 1px solid var(--rule); padding: 10px 20px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--rule); }
.tab { border: 0; background: transparent; padding: 9px 14px; cursor: pointer; color: var(--graphite); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tab:hover { color: var(--ink); }
.tab.on { color: var(--ink); border-bottom-color: var(--blue); font-weight: 600; }
.tab .count { font-size: 11.5px; background: var(--rule-soft); border-radius: 9px; padding: 0 6px; margin-left: 5px; font-weight: 400; }
.tab .count.warn { background: var(--hl); }

/* -------------------------------------------------------- paper view */
.pv { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: start; }
.pv-side { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 14px; }
.pv-side .sheet { padding: 16px 18px; }
.pv-side h3 { font: 400 17px var(--tex); margin-bottom: 8px; }
.dl { display: flex; flex-direction: column; gap: 6px; }
.dl .btn { justify-content: space-between; }
.stat { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--rule-soft); font-size: 13.5px; }
.stat:last-child { border: 0; }
.stat b.good { color: var(--green); }
.stat b.warn { color: #8a6500; }
.stat b.bad { color: var(--red); }

.paper { max-width: 47rem; margin: 0 auto; padding: 3.6rem 4.2rem 4rem; background: #fff; box-shadow: 0 1px 2px rgba(24,33,43,.12), 0 8px 28px -14px rgba(24,33,43,.3); font: 17.5px/1.56 var(--tex); color: #111; }
.p-title { font-size: 1.62rem; line-height: 1.25; text-align: center; font-weight: 400; margin: 0 0 .9rem; }
.p-authors { text-align: center; font-variant: small-caps; letter-spacing: .04em; }
.p-affil { text-align: center; font-size: .86rem; color: #444; margin-top: .3rem; }
.p-abstract { margin: 1.9rem 2.2rem 1rem; font-size: .92rem; }
.p-abstract-h { font-variant: small-caps; letter-spacing: .03em; }
.p-meta { margin: 0 2.2rem 1.4rem; font-size: .8rem; color: #333; display: flex; flex-direction: column; gap: .15rem; }
.p-sec { font-size: 1.08rem; font-weight: 400; font-variant: small-caps; letter-spacing: .03em; text-align: center; margin: 2rem 0 .7rem; }
.p-subsec { font-size: 1rem; font-weight: 700; margin: 1.3rem 0 .4rem; }
.paper .num { margin-right: .35em; }
.paper p { margin: .5rem 0; text-align: justify; hyphens: auto; }
.thm.plain p { font-style: italic; }
.thm.plain .math { font-style: normal; }
.thm-head { font-weight: 700; font-style: normal; }
.thm.rem .thm-head { font-weight: 400; font-style: italic; }
.thm-note { font-weight: 400; font-style: normal; }
.proof-head { font-style: italic; }
.proof { position: relative; }
.proof .qed { display: block; text-align: right; margin-top: -1.55rem; }
.fignote { font-size: .88rem; color: #444; border-left: 3px solid #ccc; padding: .2rem 0 .2rem .8rem; margin: .8rem 0; }
.fig-head { font-style: italic; }
.math.display { display: block; margin: .75rem 0; overflow: visible; text-align: center; }   /* scaled to fit by fitMath, never scrolled */
.paper a { color: #1c3496; }
.paper a.cite, .paper a.ref { text-decoration: none; }
.paper a.cite:hover, .paper a.ref:hover { background: var(--blue-soft); }
.cite.missing { color: var(--red); font-weight: 700; }
.p-refs { font-size: .88rem; list-style: none; padding-left: 0; }
.p-refs li { margin: .4rem 0; padding-left: 3.2em; text-indent: -3.2em; }
.ref-label { display: inline-block; min-width: 2.9em; text-indent: 0; }
.p-fig { margin: 1.3rem 0; text-align: center; }
.p-fig img { max-width: 66%; max-height: 21rem; height: auto; width: auto; }
.p-fig figcaption { font-size: .9rem; margin-top: .45rem; }
.p-stmt p { font-size: .92rem; }
.p-refs li:target, .paper .hit { background: var(--hl-soft); transition: background .3s; }
.ref-link { white-space: nowrap; margin-left: .25rem; }
.sc { font-variant: small-caps; }
.center { text-align: center; }
.paper [data-block], .paper [data-part] { cursor: pointer; border-radius: 2px; transition: background .12s; }
.paper [data-block]:hover, .paper [data-part]:hover { background: #f1f4fd; box-shadow: -10px 0 0 #f1f4fd, 10px 0 0 #f1f4fd; }
.paper [data-block].on, .paper [data-part].on { background: var(--blue-soft); box-shadow: -10px 0 0 var(--blue-soft), 10px 0 0 var(--blue-soft); }
.paper .p-title { cursor: pointer; }
.paper .p-title:hover { background: #f1f4fd; }
.paper .katex-error { color: var(--red) !important; font: 13px var(--mono); }

.editor h3 { display: flex; justify-content: space-between; align-items: center; }
.editor textarea { font: 12.5px/1.5 var(--mono); min-height: 190px; }
.editor .btnrow { display: flex; gap: 6px; margin: 8px 0 14px; flex-wrap: wrap; }
.aud { border-top: 1px solid var(--rule-soft); }
.aud-item { padding: 12px 0; border-bottom: 1px solid var(--rule-soft); display: grid; grid-template-columns: 76px 1fr; gap: 12px; }
.aud-pair { display: grid; grid-template-columns: 96px 1fr; gap: 4px 10px; font-size: 13px; align-items: baseline; }
.aud-pair .math { font-size: 15px; }
.src { font: 12.5px/1.55 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; background: #fafbf9; border: 1px solid var(--rule-soft); border-radius: 4px; padding: 16px 18px; max-height: 70vh; overflow: auto; }

/* ----------------------------------------------- typeset passages in the app */
.tex-block { border: 1px solid var(--rule-soft); border-radius: 4px; padding: 10px 16px; font: 16px/1.55 var(--tex); background: #fff; overflow-wrap: anywhere; }
.tex-block p { margin: .35em 0; }
.tex-block.plain { border: 0; padding: 0; background: transparent; max-width: 78ch; }
.tex-block.serif { font-size: 17px; padding: 18px 26px; max-width: 46rem; }
.tex-block.new { border-color: #b9c6f2; background: #f7f9ff; }
.tex-block .fig, .tex-cell .fig { font: 13px var(--ui); color: var(--graphite); }
.tex-cell { font: 15.5px/1.5 var(--tex); }
.tex-cell p { margin: .2em 0; }
.cite-chip { font: 12.5px var(--ui); color: var(--blue-deep); background: var(--blue-soft); border-radius: 4px; padding: 0 4px; }
.cite-link { color: var(--blue-deep); text-decoration: underline; text-decoration-color: rgba(28,52,150,.35); }
.cite-link:hover { text-decoration-color: currentColor; }
.dlabel { font-size: 12.5px; color: var(--graphite); margin-bottom: 4px; }
.grid-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.grid-table th { text-align: left; font-weight: 600; color: var(--graphite); padding: 6px 12px 6px 0; border-bottom: 1px solid var(--rule); }
.grid-table td { padding: 8px 12px 8px 0; border-bottom: 1px solid var(--rule-soft); vertical-align: top; }
.grid-table td:last-child, .grid-table th:last-child { padding-right: 0; }
.grid-table.req td:first-child { width: 250px; color: var(--graphite); }
.grid-table.req td:last-child { text-align: right; }
.plain-list { margin: 4px 0 0; padding-left: 20px; }
.plain-list li { margin: 3px 0; }

/* ------------------------------------------------ figures, at the review step */
.figpair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 10px 0 12px; }
.figpair figure { margin: 0; border: 1px solid var(--rule); border-radius: 4px; background: #fff; display: flex; flex-direction: column; min-height: 140px; }
.figpair img { display: block; max-width: 100%; max-height: 300px; margin: auto; padding: 8px; object-fit: contain; }
.figpair figcaption { font-size: 12px; color: var(--graphite); padding: 4px 10px; border-top: 1px solid var(--rule-soft); background: #fafbf9; }
.figpair .nofig > div { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; padding: 18px; color: var(--graphite); font-size: 13px; }
.figcard { border-bottom: 1px solid var(--rule-soft); padding: 10px 0 14px; }
.figcard.ask { border: 1.5px solid #ecd97a; background: #fffdf2; border-radius: 6px; padding: 14px 16px; margin-bottom: 14px; }
.figcard.ask.ok { border-color: #b9dcc9; background: #f6fbf8; }
.figq { font-weight: 600; }
.figpair figcaption { text-transform: uppercase; letter-spacing: .06em; font-size: 11px; font-weight: 600; }
.figstep { margin-top: 14px; }
.figlbl { display: block; font-size: 12.5px; font-weight: 600; color: var(--graphite); margin-bottom: 6px; }
.choices { display: grid; gap: 6px; }
.choice { display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left; border: 1px solid var(--rule); border-radius: 6px;
  background: var(--paper); padding: 8px 12px; cursor: pointer; }
.choice:hover:not(:disabled) { border-color: var(--graphite); }
.choice:disabled { opacity: .55; cursor: default; }
.choice b { font-weight: 600; display: block; }
.choice small { display: block; color: var(--graphite); font-size: 12.5px; }
.choice .dot { flex: none; width: 15px; height: 15px; margin-top: 3px; border-radius: 50%; border: 1.5px solid var(--graphite); background: #fff; }
.choice.on { border-color: var(--blue); background: var(--blue-soft); }
.choice.on .dot { border-color: var(--blue); background: radial-gradient(circle, var(--blue) 0 4px, #fff 4.5px); }
.figwhy { width: 100%; margin-top: 8px; }
.capbox { width: 100%; background: #fff; font-family: var(--tex); font-size: 15px; }
.figfoot { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.leftout { display: flex; align-items: center; gap: 12px; margin: 10px 20px 0; }
.leftout img { width: 54px; height: 70px; object-fit: cover; border: 1px solid var(--rule); border-radius: 3px; background: #fff; }

/* ------------------------------------------------------ the author's decisions */
.dcard { border: 1px solid var(--rule); border-radius: 6px; padding: 16px 18px; margin: 12px 0; background: #fff; }
.dcard.ok { border-color: #b9dcc9; box-shadow: inset 4px 0 0 var(--green-soft); }
.dcard-h { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; margin-bottom: 8px; }
.dcard > p { margin: 6px 0; max-width: 84ch; }
.dcard textarea { margin-top: 8px; }
.dcard .flag { margin-top: 8px; }
.dnew { border-left: 3px solid #b9c6f2; padding: 2px 0 2px 14px; margin: 12px 0; }
.twocol { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.col-h { font-size: 12px; color: var(--graphite); margin-bottom: 3px; }
.vrow { padding: 12px 0; border-bottom: 1px solid var(--rule-soft); }
.vrow:last-child { border-bottom: 0; }
.vrow-h { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.banner-acts { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
#draftHost .paper { box-shadow: none; border: 1px solid var(--rule-soft); margin-top: 12px; padding: 2.4rem 3rem; font-size: 16.5px; }
#draftHost .paper [data-block], #draftHost .paper [data-part], #draftHost .paper .p-title { cursor: default; }
#draftHost .paper [data-block]:hover, #draftHost .paper [data-part]:hover, #draftHost .paper .p-title:hover { background: transparent; box-shadow: none; }

/* --------------------------------------------------------------- journal */
.tb-journal { max-width: 300px; overflow: hidden; text-overflow: ellipsis; }
.tb-proof { max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
#topbar .tb-title { min-width: 0; }                  /* the title gives way first; the chips keep their words */
#topbar .tb-journal, #topbar .tb-proof, #topbar .btn { flex-shrink: 0; }
#topbar a.btn { text-decoration: none; }
.jr-list { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; max-height: 330px; overflow: auto; }
.jr-item { text-align: left; border: 1px solid var(--rule); background: var(--paper); border-radius: 6px; padding: 8px 12px; cursor: pointer; }
.jr-item:hover { border-color: var(--blue); background: var(--blue-soft); }
.jr-name { display: block; font-weight: 600; }
.jr-meta { display: block; font-size: 12.5px; color: var(--graphite); }
.jr-current { display: flex; gap: 10px; align-items: center; border: 1px solid var(--rule); border-radius: 6px; padding: 12px 16px; background: #fafbf9; }
.jr-dlg { padding: 0; }
.jr-dlg > .sheet { border: 0; }
.check-row { display: grid; grid-template-columns: 26px 1fr; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--rule-soft); }
.check-row:last-child { border-bottom: 0; }
.check-mark { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; }
.check-row.ok .check-mark { background: var(--green-soft); color: var(--green); }
.check-row.open .check-mark { background: var(--hl); color: #5b4a00; }
.guide-out { border: 1px solid #b9c6f2; background: #f7f9ff; border-radius: 6px; padding: 12px 16px; margin-top: 14px; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 14px; margin-bottom: 14px; }

/* ------------------------------------------------------------ dialogs */
#overlay { position: fixed; inset: 0; background: rgba(24,33,43,.5); z-index: 50; display: flex; align-items: flex-start; justify-content: center; padding: 4vh 20px; overflow: auto; }
.dialog { background: var(--paper); border-radius: 8px; width: min(880px, 100%); box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.dialog.wide { width: min(1060px, 100%); }
.dlg-h { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; border-bottom: 1px solid var(--rule-soft); position: sticky; top: 0; background: var(--paper); border-radius: 8px 8px 0 0; z-index: 1; }
.dlg-h h2 { font: 400 22px var(--tex); }
.dlg-b { padding: 6px 24px 24px; }
.dlg-b h3 { font: 400 18px var(--tex); margin: 20px 0 4px; }
.dlg-b h3 + p { color: var(--graphite); font-size: 13.5px; margin-bottom: 10px; }
.dialog.narrow { width: min(540px, 100%); margin-top: 8vh; }
.dialog.narrow .dlg-b { padding: 16px 24px 18px; }
.dialog.narrow .dlg-b p + p { margin-top: 8px; }
.dialog.narrow .dlg-b .flag { margin: 12px 0 0; font-size: 13.5px; }
.dlg-f { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; padding: 14px 24px 18px; border-top: 1px solid var(--rule-soft); }
.prov { display: grid; grid-template-columns: 170px 1fr 170px; gap: 6px 14px; padding: 12px 0; border-bottom: 1px solid var(--rule-soft); align-items: center; }
.prov-name { font-weight: 600; }
.prov-extra { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.prov-why { grid-column: 1 / -1; font-size: 13px; color: var(--graphite); }
.prov-st { font-size: 13px; text-align: right; }
.role { display: grid; grid-template-columns: 190px 1fr; gap: 4px 16px; padding: 11px 0; border-bottom: 1px solid var(--rule-soft); }
.role-name { font-weight: 600; }
.role-job { font-size: 13px; color: var(--graphite); }
.role select { max-width: 420px; }
.lightbox { background: #2a2d2b; padding: 0; width: min(1000px, 100%); }
.lightbox img { display: block; width: 100%; }
.lightbox .dlg-h { background: #2a2d2b; color: #fff; border-color: #444; }
.lightbox .btn { background: transparent; color: #fff; border-color: #666; }

#toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 10px 18px; border-radius: 7px; z-index: 80; max-width: 80vw; box-shadow: 0 6px 20px rgba(0,0,0,.3); }
#toast.bad { background: var(--red); }

.empty { text-align: center; padding: 50px 20px; color: var(--graphite); }
.empty strong { display: block; font: 400 21px var(--tex); color: var(--ink); margin-bottom: 6px; }
.spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--rule); border-top-color: var(--blue); border-radius: 50%; animation: spin .8s linear infinite; vertical-align: -2px; }

@media (max-width: 1100px) {
  .gate-grid, .pv { grid-template-columns: 1fr; }
  .grid4 { grid-template-columns: 1fr 1fr; }
  .pv-side { position: static; }
}
@media (max-width: 860px) {
  #app { grid-template-columns: 1fr; height: auto; }
  #rail { max-height: 46vh; }
  #stage { height: auto; }
  #topbar { flex-wrap: wrap; padding: 10px 14px; }
  #topbar.homebar { flex-wrap: nowrap; padding: 0 14px; min-height: 56px; }
  .hb-label { display: none; }
  .home { padding: 22px 16px 60px; }
  .home h1 { font-size: 28px; }
  .home-acts { width: 100%; }
  .home-acts .btn { flex: 1 1 100%; }
  .pgrid { grid-template-columns: 1fr; }
  .howto { grid-template-columns: 1fr 1fr; }
  .bare .test-banner { padding: 8px 16px; }
  .wrap { padding: 20px 16px 70px; }
  .review { grid-template-columns: 1fr; height: auto; }
  .grid2, .grid3, .grid4, .grid-auth, .term, .kv, .prov, .role, .twocol, .figpair { grid-template-columns: 1fr; }
  .paper { padding: 1.6rem 1.2rem; font-size: 16px; }
  .p-abstract, .p-meta { margin-left: .6rem; margin-right: .6rem; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}
@media print {
  #rail, #topbar, .pv-side, .tabs, .head { display: none !important; }
  #app, #stage, #main { display: block; height: auto; overflow: visible; }
  body { background: #fff; }
  .paper { box-shadow: none; padding: 0; max-width: none; }
}

#stale { position: sticky; top: 0; z-index: 50; background: var(--red); color: #fff; padding: 10px 18px; font-size: 14px; line-height: 1.45; }
#stale code { background: rgba(255,255,255,.18); padding: 1px 5px; border-radius: 3px; }

/* decisions: a queue on the left; on the right, one item at a time, next to the draft's text and the page of
   the notes it comes from. A settled item leaves the queue for the "Settled" tab, with a tick. */
.dq { display: grid; grid-template-columns: 310px minmax(0, 1fr); height: calc(100vh - 54px - 67px); }
.dq-list { background: var(--desk); border-right: 1px solid var(--rule); overflow: auto; display: flex; flex-direction: column; }
.dq-head { padding: 20px 18px 12px; }
.dq-head h1 { font: 400 25px/1.2 var(--tex); margin-bottom: 4px; }
.dq-prog { height: 6px; background: var(--rule); border-radius: 3px; margin: 12px 0 5px; overflow: hidden; }
.dq-prog div { height: 100%; background: #2f8a5b; border-radius: 3px; transition: width .25s; }
.dq-tabs { display: flex; gap: 4px; padding: 0 12px 8px; border-bottom: 1px solid var(--rule); }
.dq-tab { flex: 1; border: 1px solid transparent; background: none; padding: 7px 8px; border-radius: 6px; cursor: pointer; font-size: 14px; color: var(--graphite); }
.dq-tab.on { background: var(--paper); border-color: var(--rule); color: var(--ink); font-weight: 600; }
.dq-n { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 10px; background: var(--rule); font-size: 12px; margin-left: 4px; color: var(--ink); }
.dq-tab.on .dq-n { background: var(--blue-soft); color: var(--blue-deep); }
.dq-items { flex: 1; padding: 6px 8px; }
.dq-g { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--graphite); padding: 12px 8px 4px; }
.dq-item { display: flex; gap: 10px; width: 100%; text-align: left; border: 1px solid transparent; background: none; border-radius: 7px; padding: 9px 10px; cursor: pointer; margin-bottom: 2px; color: var(--ink); }
.dq-item:hover { background: rgba(255,255,255,.6); }
.dq-item.on { background: var(--paper); border-color: var(--blue); box-shadow: 0 1px 4px rgba(24,33,43,.12); }
.dq-mark { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid #b3bab3; margin-top: 1px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; }
.dq-mark.need { border-color: var(--red); }
.dq-mark.ok { background: #2f8a5b; border-color: #2f8a5b; }
.dq-body { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.dq-t { font-weight: 600; font-size: 14px; }
.dq-s { font-size: 12.5px; color: var(--graphite); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dq-p { font-size: 11.5px; color: var(--blue-deep); }
.dq-item.ok .dq-t { color: var(--graphite); }
.dq-draft { margin: 6px 8px 14px; width: auto; border-top: 1px solid var(--rule); border-radius: 0; padding-top: 12px; }
.dq-draft .dq-mark { border: none; color: var(--graphite); font-size: 16px; }
.dq-detail { overflow: auto; padding: 18px 26px 30px; background: var(--paper); }
.dq-top { display: flex; align-items: center; gap: 8px; }
.dq-title { font: 400 25px/1.25 var(--tex); margin: 6px 0 12px; }
.dq-done { display: flex; align-items: center; gap: 8px; background: #e8f4ed; border: 1px solid #b9dcc9; color: #1f5c3d; border-radius: 7px; padding: 8px 12px; margin-bottom: 12px; font-size: 14px; }
.dq-tick { width: 20px; height: 20px; border-radius: 50%; background: #2f8a5b; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.dq-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.dq-card .dcard { margin: 0; }
.dq-card .twocol { grid-template-columns: 1fr; }
.dq-ref { position: sticky; top: 0; max-height: calc(100vh - 54px - 67px - 40px); overflow: auto; background: #fbfbf9; border: 1px solid var(--rule); border-radius: 8px; padding: 14px 16px; }
.dq-ref-h { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--blue-deep); margin-bottom: 10px; }
.dp-tabs { display: flex; gap: 4px; margin: -2px 0 12px; border-bottom: 1px solid var(--rule); }
.dp-tab { white-space: nowrap; border: none; background: none; padding: 7px 10px 8px; cursor: pointer; font-size: 14px; color: var(--graphite); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.dp-tab.on { color: var(--ink); font-weight: 600; border-bottom-color: var(--blue); }
.dp-tab:disabled { opacity: .5; cursor: default; }
.dp-sec + .dp-sec { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--rule-soft); }
.dp-h { font: 400 19px/1.3 var(--tex); margin-bottom: 8px; }
.dp-tools { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 8px 0 10px; }
.dp-img { display: block; border: 1px solid var(--rule); border-radius: 4px; overflow: hidden; background: #fff; cursor: zoom-in; }
.dp-img img { display: block; width: 100%; height: auto; }
.dp-empty { color: var(--graphite); font-size: 14px; }
.hl-para { background: var(--hl-soft); outline: 2px solid var(--hl); border-radius: 3px; }
@media (max-width: 1250px) { .dq-cols { grid-template-columns: 1fr; } .dq-ref { position: static; max-height: none; } }
@media (max-width: 900px) { .dq { grid-template-columns: 1fr; height: auto; } .dq-list { max-height: 45vh; } }

/* the plan for the paper, and the last step */
.kinds { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.kind { text-align: left; border: 1px solid var(--rule); background: var(--paper); border-radius: 8px; padding: 12px 14px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; color: var(--ink); }
.kind span { font-size: 13px; color: var(--graphite); }
.kind.on { border-color: var(--blue); box-shadow: 0 0 0 2px var(--blue-soft); }
.tlist { display: grid; gap: 6px; }
.trow, .prow { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--rule); border-radius: 7px; padding: 9px 12px; cursor: pointer; background: var(--paper); }
.trow.on, .prow.on { border-color: var(--blue); background: var(--blue-soft); }
.trow input[type=radio], .prow input[type=checkbox] { margin-top: 4px; flex: none; }
.trow input[type=text] { width: 100%; }
.plist { display: grid; gap: 6px; }
.prow .grow { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.prow-s { color: var(--graphite); }
.prow-l { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.plain-list { margin: 6px 0 0 18px; }
.flag.green { border-color: #b9dcc9; background: var(--green-soft, #e8f4ed); }
textarea.mono { font-family: var(--mono); font-size: 13px; width: 100%; }
.reqmark { font-weight: 600; font-size: 11px; color: var(--red); text-transform: uppercase; letter-spacing: .04em; margin-left: 6px; }

/* review: one list of items, To check / Settled / Page text / Approve */
.rv-tabs { padding: 8px 16px; flex: none; }
.rv-body { overflow: auto; }
.rv-left .rv-pages.dark { background: #2f3431; border-bottom: 1px solid #262a28; padding: 8px 12px; }
.rv-left .rv-pages.dark .rv-p { background: #444a46; color: #e8ece8; border-color: #555c57; }
.rv-left .rv-pages.dark .rv-p.on { background: #fff; color: var(--ink); border-color: #fff; }
#rvpgno { font-variant-numeric: tabular-nums; min-width: 4.5em; text-align: center; }
.rv-head .dq-prog { max-width: 360px; margin: 8px 0 4px; }
.qgroup { margin-bottom: 18px; }
.qgroup-h { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em; color: var(--graphite); margin: 4px 0 8px; }
.qcard { border: 1px solid #ecd97a; background: #fffdf2; border-radius: 8px; padding: 14px 16px; margin-bottom: 12px; font-size: 14px; }
.qcard.red { border-color: #eab4ae; background: #fff8f7; }
.qcard.figcard { border-color: #c9d3ea; background: #f8faff; }
.qcard-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.qcard-h b { font-size: 14.5px; }
.qcard-issue { margin-bottom: 4px; }
.qcard .choices { margin-top: 4px; }
.qcard .ownread { margin-top: 8px; }
.capbox.small { font-size: 14px; margin-top: 6px; }
.live { border: 1px solid #b9c6ec; background: var(--blue-soft); border-radius: 8px; padding: 12px 16px; margin-bottom: 16px; }
.live.stopped { border-color: #eab4ae; background: var(--red-soft); }
.live-h { font-weight: 600; display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.live-steps { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 6px; }
.live-steps li { display: flex; align-items: center; gap: 10px; color: var(--graphite); }
.live-steps li.now { color: var(--ink); font-weight: 600; }
.live-steps li.done { color: var(--ink); }
.rv-empty { text-align: center; padding: 34px 20px; }
.rv-empty p { margin: 8px auto 16px; max-width: 420px; }
.big-tick { width: 52px; height: 52px; border-radius: 50%; background: #2f8a5b; color: #fff; font: 700 28px/52px var(--ui); margin: 0 auto 12px; }
.srow { display: flex; gap: 12px; align-items: flex-start; padding: 12px 4px; border-bottom: 1px solid var(--rule-soft); }
.srow .dq-mark { margin-top: 2px; }
.srow-t { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--graphite); margin-bottom: 2px; }
.approve-card { text-align: center; padding: 28px 20px; }
.approve-card h2 { font: 400 24px var(--tex); margin-bottom: 10px; }
.sumlist { list-style: none; padding: 0; margin: 0 auto 14px; display: inline-grid; gap: 4px; text-align: left; }
.sumlist li::before { content: "✓"; color: #2f8a5b; font-weight: 700; margin-right: 8px; }
.approve-card p { max-width: 460px; margin: 0 auto 16px; }
.leftline { font-size: 13px; color: var(--graphite); margin: 6px 0 12px; }
.linkbtn { border: 0; background: none; padding: 0; color: var(--blue); cursor: pointer; text-decoration: underline; font: inherit; }
.capwrap { margin-top: 14px; border-top: 1px solid var(--rule-soft); padding-top: 10px; }
.cappv { font: 15px/1.5 var(--tex); }
.capwrap details { margin-top: 4px; }
/* what the app made of a drawing: for the paper, or only an explanation of the argument */
.figverdict { font-size: 13.5px; margin: 2px 0 8px; padding: 6px 10px; border-left: 3px solid var(--blue); background: var(--blue-soft); border-radius: 0 4px 4px 0; }
.figverdict.v-explanation { border-left-color: var(--green); background: var(--green-soft); }
.figverdict.v-annotation { border-left-color: #c9a227; background: var(--hl-soft); }
.figdesc { font: 15px/1.5 var(--tex); border: 1px solid var(--rule); border-radius: 4px; background: #fff; padding: 10px 14px; margin: 6px 0 12px; }
.figdesc .muted { font-family: var(--ui); margin-top: 4px; }
.figdesc-s { font-family: var(--tex); font-size: 14.5px; color: var(--graphite); margin-top: 2px; }
/* what the checks of a redrawn figure found */
.figcheck { font-size: 13.5px; margin: -4px 0 10px; padding: 6px 10px; border-left: 3px solid var(--blue); background: var(--blue-soft); border-radius: 0 4px 4px 0; }
.figcheck.c-ok { border-left-color: var(--green); background: var(--green-soft); }
.figcheck.c-warn { border-left-color: #c9a227; background: var(--hl-soft); }
.figcheck ul { margin: 4px 0 2px 18px; padding: 0; }
.figcheck a { margin-left: 4px; }
.figcheck details { margin-top: 2px; }
.figweak { font-size: 13px; margin: -4px 0 10px; padding: 6px 10px; border: 1px solid #ecd97a; background: var(--hl-soft); border-radius: 4px; }
.autoline { font-size: 13.5px; margin: 0 0 14px; padding: 10px 14px; border: 1px solid #b9dcc9; background: var(--green-soft); border-radius: 8px; }
.fig-sub { font: 600 13px var(--ui); color: var(--graphite); text-transform: uppercase; letter-spacing: .05em; margin: 18px 0 4px; }
/* --------------------------------------------------------------------- home: your papers
   Each paper is a sheet on the desk: the first page of its notes, its title set as on a title page, and one mark per
   step of its way to a paper (highlighter where it waits for you). The whole sheet opens the paper. */
.home { max-width: 1240px; margin: 0 auto; padding: 34px 32px 72px; }
.home-head { display: flex; align-items: flex-end; gap: 16px 28px; flex-wrap: wrap; }
.home h1 { font: 400 32px/1.15 var(--tex); }
.home-head p { color: var(--graphite); margin-top: 6px; max-width: 62ch; }
.home-acts { display: flex; gap: 10px; flex-wrap: wrap; }
.home-acts .btn { min-height: 40px; padding: 0 18px; font-size: 14.5px; }
.home-empty { max-width: 640px; padding: 40px 0 12px; }
.home-empty .lead { font-size: 16px; line-height: 1.6; margin: 12px 0 22px; max-width: 60ch; }
.home-empty .home-acts + p { margin-top: 18px; max-width: 60ch; }
.howto { list-style: none; counter-reset: how; padding: 0; margin: 44px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 1040px; border-top: 1px solid var(--rule); }
.howto li { counter-increment: how; padding: 16px 24px 4px 0; }
.howto li::before { content: counter(how); display: block; font: 400 27px/1 var(--tex); color: var(--slate-3); margin-bottom: 10px; }
.howto b { display: block; font-weight: 600; margin-bottom: 4px; }
.howto span { color: var(--graphite); font-size: 13.5px; line-height: 1.5; }
.home > .about, .wrap > .about { margin-top: 34px; }
.home > .banner { margin-bottom: 22px; }

.pgroup { margin-top: 32px; }
.pgroup h2 { font: 600 15px/1.3 var(--ui); display: flex; align-items: center; gap: 8px; }
.pg-n2 { font-size: 12px; font-weight: 600; min-width: 22px; padding: 1px 7px; border-radius: 10px; background: var(--rule); color: var(--ink); text-align: center; }
.pgroup-sub { color: var(--graphite); font-size: 13px; margin-top: 2px; max-width: 80ch; }
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; margin-top: 12px; }

.pcard { position: relative; background: var(--paper); border: 1px solid var(--rule); border-radius: 4px; padding: 12px 14px 12px 16px; display: flex; flex-direction: column; gap: 12px; }
.pcard:hover { border-color: #9ea89f; }
.pcard:has(.pc-link:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px; }
.pc-link { color: inherit; }
.pc-link:hover { text-decoration: none; }
.pc-link:focus-visible { outline: none; }
.pc-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }       /* the whole sheet is the link */
.pc-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 30px; }
.pc-status { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--graphite); min-width: 0; }
.pc-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.pc-status.hl { background: var(--hl); color: #3a3000; padding: 3px 10px 3px 9px; border-radius: 3px; margin-left: -2px; }
.pc-status.green { color: var(--green); }
.pc-status.red { color: var(--red); }
.pc-status.blue { color: var(--blue-deep); }
.pc-status .spinner { width: 12px; height: 12px; }
.pc-body { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 14px; align-items: start; }
.pc-thumb { display: block; width: 60px; height: 80px; object-fit: cover; object-position: top; background: #fafbf9; border: 1px solid var(--rule);
  border-radius: 2px; box-shadow: 3px 3px 0 -1px var(--paper), 3px 3px 0 0 var(--rule); }        /* the notes, a few sheets thick */
.pc-thumb.tex { display: flex; align-items: center; justify-content: center; background: var(--paper); font: 400 20px/1 var(--tex); color: var(--slate); }
.pc-thumb.tex span { position: relative; top: .22em; margin: 0 -.11em; }
.pc-title { font: 400 18px/1.3 var(--tex); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.pc-name { font-size: 12.5px; color: var(--graphite); margin-top: 2px; }
.pc-authors { font: 400 14px/1.35 var(--tex); font-variant: small-caps; letter-spacing: .03em; color: #2b333c; margin-top: 4px; }
.pc-meta { font-size: 12.5px; color: var(--graphite); margin-top: 6px; line-height: 1.5; }
.pc-steps { display: flex; align-items: center; gap: 12px; padding-top: 10px; border-top: 1px solid var(--rule-soft); min-height: 31px; }
.pc-ticks { display: flex; gap: 7px; flex: 1; min-width: 0; flex-wrap: wrap; }
.tk-ph { display: flex; gap: 2px; }
.tk { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid #b4bdb5; background: var(--paper); }
.tk.done { background: var(--slate-3); border-color: var(--slate-3); }
.tk.waiting { background: var(--hl); border-color: #b99c0f; transform: scale(1.35); }
.tk.running { border-color: var(--blue); background: var(--blue-soft); animation: pulse 1.2s ease-in-out infinite; }
.tk.error { background: var(--red); border-color: var(--red); }
.tk.paused { border-color: #b99c0f; background: var(--hl-soft); }
.pc-count { font-size: 12px; color: var(--graphite); white-space: nowrap; font-variant-numeric: tabular-nums; margin-left: auto; }
.crumbs { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }

.computed { margin: 6px 0 8px; }
.computed summary { cursor: pointer; list-style: none; display: flex; gap: 8px; align-items: center; }
.computed .crow { padding: 6px 0 6px 10px; border-left: 2px solid var(--rule); margin: 4px 0; }

.nv-r { margin: 10px 0; }
.nv-p { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; padding: 4px 0 4px 12px; border-left: 2px solid var(--rule); margin: 4px 0; }
.nv-t { flex: 1 1 260px; min-width: 0; }
.nv-map { margin: 8px 0 12px; }
.nv-map svg { width: 100%; height: auto; display: block; background: var(--paper); border: 1px solid var(--rule); border-radius: 6px; }
.nv-map line { stroke: var(--graphite); stroke-opacity: .35; }
.nv-map circle { fill: var(--graphite); }
.nv-map circle.close { fill: var(--blue); }
.nv-map circle.seed { stroke: var(--ink); stroke-width: 2.5; }

.test-banner { background: #fff4cc; border-bottom: 1px solid #e8cf70; color: #5a4500; padding: 8px 16px; font-size: 14px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bare .test-banner { padding: 8px 32px; }

.cost-table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 14px; }
.cost-table th, .cost-table td { text-align: right; padding: 4px 8px; border-bottom: 1px solid var(--rule-soft); }
.cost-table th:first-child, .cost-table td:first-child { text-align: left; }

.qr { display: flex; justify-content: center; margin: 10px 0; }
.qr svg { width: 240px; height: 240px; }

/* a completed sketch: the passages added to the author's steps */
.addition { border-left: 3px solid var(--blue); background: #f2f5ff; padding: 4px 10px 4px 12px; margin: 8px 0; border-radius: 0 4px 4px 0; }
.add-tag { display: block; font: 600 11.5px var(--ui); color: var(--blue-deep); margin-bottom: 2px; }
.addition p { margin: .2em 0; }

/* scriptavera.com: the account, the free papers, Google sign-in (hosted.js) */
.hb-btn.sv-me { gap: 7px; }
.hb-btn.sv-me img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.hb-btn.primary-ish { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 600; }
.hb-btn.primary-ish:hover { background: var(--blue-deep); border-color: var(--blue-deep); }
.homebar .chip { margin-right: 6px; font-size: 13px; padding: 5px 12px; }
.homebar .chip:not(.green):not(.red) { background: var(--slate-2); color: var(--chalk); border: 1px solid var(--slate-3); }
.banner .sv-gbtn { min-height: 40px; }
.sv-guest { align-items: flex-start; }
@media (max-width: 640px) { .homebar .chip { display: none; } }
.sv-prov { border-top: 1px solid var(--rule-soft); padding: 14px 0 6px; }
.sv-prov-h { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; }
.sv-key { display: grid; grid-template-columns: minmax(130px, auto) 1fr auto; gap: 4px 10px; align-items: center; padding: 4px 0; }
.sv-key > div { grid-column: 1 / -1; }
.sv-key-name { font-size: 13.5px; }
.sv-leak { color: var(--red); }
.sv-steps { margin-top: 8px; padding: 10px 14px; border: 1px solid #c5cff3; background: var(--blue-soft); border-radius: 6px; font-size: 13px; }
.sv-steps ol { margin: 6px 0 6px 18px; padding: 0; }
.sv-steps li { margin: 2px 0; }
.sv-consent { margin: 6px 0 0 16px; padding: 0; }
.sv-consent li { margin: 3px 0; }
@media (max-width: 640px) { .sv-key { grid-template-columns: 1fr auto; } }