:root {
  --ink:#1c1a17; --muted:#6f6862; --faint:#9a938c; --line:#ddd7ce;
  --paper:#faf9f6; --card:#ffffff; --panel:#f4f1ea; --rule:#e6e0d6;
  --red:#b3261e; --red-bg:#fde7e5; --green:#1a6b40; --green-bg:#e2f2e8;
  --amber:#a24d00; --amber-line:#e08a2e; --amber-bg:#fff4e2; --amber-tint:#fffaf1;
  --proposed:#3f5c8f; --proposed-bg:#e9eef7; --proposed-line:#c2cee5;
  --implemented:#1a6b40; --implemented-bg:#e2f2e8; --implemented-line:#bcdfc9;
  --grey:#6f6862; --grey-bg:#eeebe4; --grey-line:#ddd7ce;
  --focus:#1f4fd8;
  --serif:Charter,"Iowan Old Style",Georgia,"Times New Roman",serif;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink);
  font:16px/1.55 var(--serif); }
a { color:var(--ink); }
:focus-visible { outline:2px solid var(--focus); outline-offset:2px;
  border-radius:3px; }

/* Rules like .app below set display, which would otherwise beat the hidden
   attribute and show the app behind the sign-in gate. */
[hidden] { display:none !important; }

.app { display:flex; align-items:flex-start; min-height:100vh; }
.panel { width:320px; flex:0 0 320px; position:sticky; top:0; height:100vh;
  overflow-y:auto; background:var(--panel); border-right:1px solid var(--rule);
  padding:20px 18px 40px; font-family:var(--sans); font-size:13px; }
.main { flex:1 1 auto; min-width:0; padding:22px 26px 120px; }

.panel h1 { font:600 18px/1.25 var(--serif); margin:0 0 2px; letter-spacing:-.2px; }
.panel .stamp { color:var(--faint); font-size:11px; margin:0 0 14px; }
.panel h2 { font:600 11px/1 var(--sans); letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); margin:20px 0 8px; }
.panel h2 .side { float:right; font-weight:400; letter-spacing:.02em;
  text-transform:none; }
.panel .linkbtn { background:none; border:0; padding:0 0 0 8px; margin:0;
  font:inherit; color:var(--proposed); cursor:pointer; text-decoration:underline; }

/* -- who you are, and the two tabs ------------------------------------- */
.whoami { background:var(--card); border:1px solid var(--rule);
  border-radius:7px; padding:10px 12px; margin:0 0 14px; font-size:12px; }
.whoami .name { font-weight:600; display:block; }
.whoami .role { color:var(--muted); display:block; margin-top:1px; }
.whoami button { margin-top:8px; font:inherit; font-family:var(--sans);
  background:none; border:1px solid var(--line); border-radius:6px;
  padding:4px 10px; cursor:pointer; color:var(--ink); }
.whoami button:hover { border-color:var(--ink); }

.tabs { display:flex; gap:6px; margin:0 0 14px; }
.tabs button { flex:1; font:inherit; font-family:var(--sans); font-size:12px;
  padding:7px 8px; border:1px solid var(--line); background:var(--card);
  border-radius:6px; cursor:pointer; color:var(--muted); }
.tabs button[aria-selected="true"] { background:var(--ink); color:#fff;
  border-color:var(--ink); }

.summary { background:var(--card); border:1px solid var(--rule);
  border-radius:7px; padding:12px 13px; margin:0 0 4px; }
.summary .big { font:600 20px/1.2 var(--sans); display:block; }
.summary .cap { color:var(--muted); font-size:12px; display:block;
  margin-bottom:9px; }
.summary .row { display:flex; justify-content:space-between; gap:8px;
  padding:3px 0; font-size:12px; }
.summary .row .n { font-variant-numeric:tabular-nums; font-weight:600; }
.summary .dash { border-top:1px solid var(--rule); margin:9px 0 7px; }
.summary p.desc { font-size:12px; line-height:1.45; color:var(--muted);
  margin:8px 0 0; }
.summary .chart { margin:10px 0 0; }
.summary .chart h3 { font:600 11px/1 var(--sans); letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); margin:0 0 6px; }
.summary .chart svg { width:100%; height:auto; display:block; }
.summary .chart .key { font-size:11px; color:var(--muted); margin:5px 0 0; }
.summary .chart .key i { display:inline-block; width:9px; height:9px;
  border-radius:2px; margin-right:4px; font-style:normal; }
.summary .chart .none { font-size:11px; color:var(--faint); margin:0; }

.search { width:100%; font:14px/1.3 var(--sans); padding:9px 11px;
  border:1px solid var(--line); border-radius:6px; background:var(--card);
  color:var(--ink); }
.matches { list-style:none; margin:6px 0 0; padding:0; max-height:320px;
  overflow-y:auto; border:1px solid var(--rule); border-radius:6px;
  background:var(--card); }
.listhead { display:flex; justify-content:space-between; margin:10px 0 0;
  font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.matches li { display:flex; align-items:stretch;
  border-bottom:1px solid var(--rule); }
.matches li:last-child { border-bottom:0; }
.matches li button { flex:1; }
.matches .readicon { display:flex; align-items:center; padding:0 10px;
  text-decoration:none; font-size:16px; border-left:1px solid var(--rule);
  color:var(--ink); }
.matches .readicon:hover { background:var(--panel); }
.matches .readicon:focus-visible { outline:2px solid #e08a2e; outline-offset:-2px; }
.matches button.on { background:var(--ink); color:#fff; }
.matches button.on .who { color:#ddd; }
.matches button { display:block; width:100%; text-align:left; background:none;
  border:0; padding:7px 10px; font:inherit; color:var(--ink); cursor:pointer; }
.matches button:hover { background:var(--panel); }
.matches .who { display:block; color:var(--faint); font-size:11px; }
.scopebar { display:flex; align-items:center; gap:6px; margin-top:8px;
  font-size:12px; color:var(--muted); }

.pills { display:flex; flex-direction:column; gap:6px; }
.pill { display:flex; align-items:center; gap:9px; width:100%;
  border:1px solid var(--line); background:var(--card); border-radius:999px;
  padding:7px 12px; font:inherit; color:var(--muted); cursor:pointer;
  text-align:left; }
.pill:hover { border-color:var(--ink); }
.pill .box { width:14px; height:14px; flex:0 0 14px; border-radius:3px;
  border:1px solid var(--faint); background:var(--card); position:relative; }
.pill .name { flex:1 1 auto; }
.pill .n { font-variant-numeric:tabular-nums; font-size:12px; color:var(--faint); }
.pill[aria-pressed="true"] { color:var(--ink); border-color:var(--ink); }
.pill[aria-pressed="true"] .box { background:var(--ink); border-color:var(--ink); }
.pill[aria-pressed="true"] .box::after { content:""; position:absolute;
  left:4px; top:1px; width:4px; height:8px; border:solid var(--card);
  border-width:0 2px 2px 0; transform:rotate(42deg); }
.pill[aria-pressed="true"] .n { color:var(--muted); }
.pill.st-proposed[aria-pressed="true"] { color:var(--proposed);
  border-color:var(--proposed-line); background:var(--proposed-bg); }
.pill.st-proposed[aria-pressed="true"] .box { background:var(--proposed);
  border-color:var(--proposed); }
.pill.st-implemented[aria-pressed="true"] { color:var(--implemented);
  border-color:var(--implemented-line); background:var(--implemented-bg); }
.pill.st-implemented[aria-pressed="true"] .box { background:var(--implemented);
  border-color:var(--implemented); }

.help { font-size:12px; line-height:1.5; color:var(--muted);
  border-top:1px solid var(--rule); margin-top:22px; padding-top:14px; }
.help p { margin:0 0 8px; }
.help p:last-child { margin:0; }
.help .swatch { display:inline-block; padding:1px 6px; border-radius:4px;
  font-size:11px; font-weight:700; letter-spacing:.06em; }

.lede { background:var(--card); border:1px solid var(--rule);
  border-left:4px solid var(--ink); border-radius:5px; padding:14px 18px;
  margin:0 0 20px; max-width:900px; font-size:15px; }
.lede p { margin:0 0 8px; } .lede p:last-child { margin:0; }
.lede .key { font-family:var(--sans); font-size:13px; }

.booksec { border-top:1px solid var(--rule); padding:18px 0 6px;
  max-width:900px; }
.booksec:first-child { border-top:0; padding-top:0; }
.booksec.focused { box-shadow:-14px 0 0 -11px var(--focus); }
.readbtn { display:inline-block; background:#1c1a17; color:#fff !important;
  text-decoration:none; font-weight:600; font-size:13px; padding:5px 12px;
  border-radius:6px; margin-right:10px; vertical-align:middle; }
.readbtn:hover { background:#6f6862; }
.readbtn:focus-visible { outline:2px solid #e08a2e; outline-offset:2px; }
.bookhead h3 { font:600 19px/1.3 var(--serif); margin:0; }
.bookhead .who { color:var(--muted); font-size:13px; font-family:var(--sans);
  margin:2px 0 0; }
.bookhead .links { font-family:var(--sans); font-size:12px; margin:6px 0 0; }
.bookhead .links a { margin-right:14px; }
.bookhead .links .none { color:var(--faint); }

.probrow { margin:12px 0 0; padding:10px 12px; border:1px solid var(--rule);
  border-radius:8px; background:var(--card); }
.probrow .chips { display:flex; flex-wrap:wrap; gap:7px; margin:0; }
.chip { font:12px/1.3 var(--sans); border-radius:999px; padding:5px 11px;
  border:1px solid var(--line); background:var(--card); color:var(--muted); }
.chip b { font-weight:700; letter-spacing:.06em; font-size:10.5px;
  text-transform:uppercase; margin-left:6px; }
.chip.st-proposed { color:var(--proposed); background:var(--proposed-bg);
  border-color:var(--proposed-line); }
.chip.st-implemented { color:var(--implemented);
  background:var(--implemented-bg); border-color:var(--implemented-line); }

/* -- decisions ---------------------------------------------------------- */
.decide { display:flex; flex-wrap:wrap; align-items:center; gap:7px;
  margin:9px 0 0; font-family:var(--sans); font-size:12px; }
.decide .dbtn { font:inherit; font-weight:600; padding:5px 12px;
  border-radius:6px; border:1px solid var(--line); background:var(--card);
  color:var(--ink); cursor:pointer; }
.decide .dbtn:hover:not(:disabled) { border-color:var(--ink); }
.decide .dbtn:disabled { opacity:.45; cursor:not-allowed; }
.decide .dbtn[data-decision="approve"] { color:var(--green);
  border-color:var(--implemented-line); }
.decide .dbtn[data-decision="reject"] { color:var(--red);
  border-color:#e6b7b3; }
.decide .dbtn[data-decision="unsure"] { color:var(--amber);
  border-color:#f0d2a6; }
.decide .dbtn.busy { opacity:.6; }
.decide input.note { flex:1 1 180px; min-width:140px; font:inherit;
  font-family:var(--sans); padding:5px 9px; border:1px solid var(--line);
  border-radius:6px; background:var(--card); color:var(--ink); }
.dbadge { font:11px/1.4 var(--sans); padding:4px 9px; border-radius:999px;
  border:1px solid var(--grey-line); background:var(--grey-bg);
  color:var(--muted); }
.dbadge.d-approve { color:var(--green); background:var(--green-bg);
  border-color:var(--implemented-line); }
.dbadge.d-reject { color:var(--red); background:var(--red-bg);
  border-color:#e6b7b3; }
.dbadge.d-unsure { color:var(--amber); background:var(--amber-bg);
  border-color:#f0d2a6; }
.dbadge.err { color:var(--red); background:var(--red-bg); border-color:#e6b7b3; }

.cards { margin:14px 0 0; }
.showing { font:12px/1.5 var(--sans); color:var(--faint); margin:0 0 8px; }
.loading { font:12px/1.5 var(--sans); color:var(--faint); margin:0 0 8px; }

.card { border:1px solid var(--line); background:var(--card);
  border-radius:8px; padding:14px 17px 13px; margin:0 0 14px; }
.card.flagged { border:2px solid var(--amber-line); background:var(--amber-tint); }
.card-head { display:flex; align-items:baseline; gap:9px; flex-wrap:wrap;
  border-bottom:1px solid var(--rule); padding-bottom:9px; }
.card.flagged .card-head { border-bottom-color:#f0dcc0; }
.card-head .what { font:600 13px/1.3 var(--sans); }
.badge { font:700 10.5px/1 var(--sans); letter-spacing:.09em;
  text-transform:uppercase; border-radius:4px; padding:5px 8px;
  border:1px solid transparent; }
.badge.st-proposed { background:var(--proposed-bg); color:var(--proposed);
  border-color:var(--proposed-line); }
.badge.st-implemented { background:var(--implemented-bg);
  color:var(--implemented); border-color:var(--implemented-line); }
.badge.warn { background:var(--amber); color:#ffffff; }
.card-head .where { margin-left:auto; font:11px/1.4 var(--sans);
  color:var(--faint); text-align:right; }

/* The sentence id, "chapter.sentence". One click copies it. */
.refchip { font:600 11.5px/1 var(--mono); letter-spacing:.02em;
  padding:5px 8px; border-radius:5px; border:1px solid var(--line);
  background:var(--panel); color:var(--ink); cursor:pointer;
  white-space:nowrap; }
.refchip:hover { border-color:var(--ink); }
.refchip.copied { background:var(--green-bg); color:var(--green);
  border-color:var(--implemented-line); }
.card-head .spotlink { font:11px/1.4 var(--sans); color:var(--proposed);
  text-decoration:underline; white-space:nowrap; }
.context { margin-top:11px; }
.para { margin:0; padding:8px 4px 8px 46px; position:relative; font-size:15.5px; }
.para .pn { position:absolute; left:6px; top:11px;
  font:10px/1 var(--mono); color:#c9c2b9; }
.para.around { color:#918a83; font-size:14px; }
.para.focus { background:#fffdf7; border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule); box-shadow:inset 3px 0 0 var(--ink);
  color:#6f6862; }
.card.flagged .para.focus { box-shadow:inset 3px 0 0 var(--amber-line); }
.edited { color:var(--ink); }
del.cutout { color:var(--red); background:var(--red-bg); border-radius:3px;
  padding:0 3px; font-weight:600; text-decoration:line-through;
  text-decoration-thickness:2px; }
ins.patch { color:var(--green); background:var(--green-bg); border-radius:3px;
  padding:0 3px; font-weight:600; text-decoration:none; }
.sib { background:#efece6; color:#918a83; border-radius:3px; padding:0 3px; }
.amb { background:var(--amber-bg); border:1px solid #f0d2a6; border-radius:5px;
  padding:10px 12px; font-size:13.5px; line-height:1.5; margin:11px 0 0; }
.thin { font:12px/1.5 var(--sans); color:var(--faint); margin:9px 0 0; }
.nothing { font-family:var(--sans); color:var(--faint); padding:40px 0; }

/* -- login -------------------------------------------------------------- */
.gate { max-width:520px; margin:70px auto; background:var(--card);
  border:1px solid var(--rule); border-radius:9px; padding:28px 30px 30px; }
.gate h1 { font:600 22px/1.25 var(--serif); margin:0 0 6px; }
.gate p { font-size:14px; color:var(--muted); margin:0 0 16px; }
.gate label + input + label { margin-top:14px; }
.gate label { display:block; font:600 11px/1 var(--sans); letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); margin:0 0 6px; }
.gate input { width:100%; font:15px/1.3 var(--sans); padding:10px 12px;
  border:1px solid var(--line); border-radius:6px; background:var(--paper);
  color:var(--ink); }
.gate button { margin-top:12px; font:600 14px/1 var(--sans); padding:11px 18px;
  border:0; border-radius:6px; background:var(--ink); color:#fff;
  cursor:pointer; }
.gate button:hover { background:var(--muted); }
.gate .msg { margin:14px 0 0; font-size:13px; font-family:var(--sans); }
.gate .msg.bad { color:var(--red); }
.gate .msg.good { color:var(--green); }

/* -- activity ----------------------------------------------------------- */
.actbar { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 16px;
  font-family:var(--sans); font-size:13px; align-items:center; }
.actbar select, .actbar input { font:inherit; font-family:var(--sans);
  padding:6px 9px; border:1px solid var(--line); border-radius:6px;
  background:var(--card); color:var(--ink); }
.actbar .note { color:var(--faint); font-size:12px; margin-left:auto; }
.acts { list-style:none; margin:0; padding:0; max-width:900px; }
.acts li { display:flex; gap:12px; align-items:baseline; padding:9px 2px;
  border-bottom:1px solid var(--rule); font-family:var(--sans); font-size:13px; }
.acts li:last-child { border-bottom:0; }
.acts .actor { font-weight:600; flex:0 0 auto; }
.acts .what { flex:1 1 auto; color:var(--muted); }
.acts .what b { color:var(--ink); font-weight:600; }
.acts .when { flex:0 0 auto; color:var(--faint); font-size:12px; }

@media (max-width:820px) {
  .app { display:block; }
  .panel { width:auto; flex:none; position:static; height:auto;
    border-right:0; border-bottom:1px solid var(--rule); }
  .main { padding:18px 16px 90px; }
}

/* -- the section links at the top of the panel -------------------------- */
.topnav { display:flex; gap:6px; margin:0 0 14px; }
.topnav a { flex:1; text-align:center; font-family:var(--sans); font-size:12px;
  padding:6px 8px; border:1px solid var(--line); border-radius:6px;
  background:var(--card); color:var(--muted); text-decoration:none; }
.topnav a:hover { border-color:var(--ink); color:var(--ink); }
.topnav a.here { background:var(--panel); color:var(--ink);
  border-color:var(--ink); font-weight:600; }

.bookhead .links .histlink { font-weight:600; }

/* -- the note Philip wrote about a problem ------------------------------ */
.pill.hasnote .name::after { content:" i"; font:600 9px/1 var(--sans);
  display:inline-block; margin-left:5px; padding:2px 4px; border-radius:999px;
  border:1px solid var(--faint); color:var(--faint); vertical-align:1px; }
.rnote { background:var(--proposed-bg); border:1px solid var(--proposed-line);
  border-radius:5px; padding:9px 12px; font:13px/1.5 var(--sans);
  color:var(--proposed); margin:11px 0 0; }
.rnote b { font-weight:700; }

/* -- show ten more examples --------------------------------------------- */
.morerow { margin:0 0 18px; font-family:var(--sans); }
.morebtn { font:600 12px/1 var(--sans); padding:7px 14px; border-radius:6px;
  border:1px solid var(--line); background:var(--card); color:var(--ink);
  cursor:pointer; }
.morebtn:hover:not(:disabled) { border-color:var(--ink); }
.morebtn:disabled { opacity:.5; cursor:default; }
.moreerr { font:11px/1.4 var(--sans); color:var(--red); margin-left:9px; }

/* -- the random audit panel --------------------------------------------- */
.queue { margin-top:18px; }
.queue .queue-lede { font-size:12px; line-height:1.45; color:var(--muted);
  margin:0 0 8px; }
.queue .qhead { font:600 10px/1 var(--sans); letter-spacing:.1em;
  text-transform:uppercase; color:var(--faint); margin:10px 0 5px; }
.queue .qnone { font-size:12px; color:var(--faint); margin:0; }
.qlist { list-style:none; margin:0; padding:0; }
.qrow { background:var(--card); border:1px solid var(--rule); border-radius:7px;
  padding:9px 11px; margin:0 0 7px; font-size:12px; }
.qrow[data-mine="1"] { border-color:var(--amber-line);
  background:var(--amber-tint); }
.qrow .qtitle { display:block; font-weight:600; }
.qrow .qwho { display:block; color:var(--faint); font-size:11px; }
.qrow .qread { display:inline-block; margin-top:5px; font-size:11px; }
.qbtns { display:flex; flex-wrap:wrap; gap:5px; margin-top:7px;
  align-items:center; }
.qbtn { font:600 11px/1 var(--sans); padding:5px 9px; border-radius:6px;
  border:1px solid var(--line); background:var(--card); color:var(--ink);
  cursor:pointer; text-decoration:none; }
.qbtn:hover:not(:disabled) { border-color:var(--ink); }
.qbtn:disabled { opacity:.45; cursor:not-allowed; }
.qbtn.ok { color:var(--green); border-color:var(--implemented-line); }
.qbtn.warn { color:var(--amber); border-color:#f0d2a6; }
.qtaken { color:var(--faint); font-size:11px; }
.qmsg { display:block; margin-top:6px; font-size:11px; color:var(--muted); }
.qmsg.bad { color:var(--red); }