/* PATRON curation — an illustrated naturalist's field journal of the lilypond.
 *
 * Warm parchment and sepia ink, a soft display serif (Fraunces) for headings,
 * and a muted Canadian-wilderness palette: reed sage, pond teal, field-guide
 * ochre, monarch terracotta, and iris plum. Editorial and hand-made rather than
 * institutional. The PATRON brand reds live on as the "edit/attention" colour
 * (a warm maple). Light, warm, and legible — the text panel reads like paper.
 */

:root {
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Warm naturalist palette. */
  --parchment: #f6efdc;       /* page background */
  --parchment-deep: #efe4c8;  /* header / sunk surface */
  --paper: #fcf8ec;           /* card + text-panel "paper" */
  --ink: #322a1b;             /* sepia ink */
  --ink-soft: #6c5f46;
  --ink-faint: #a09171;       /* faint sepia */

  --reed: #7c8a55;            /* reed / lilypad sage */
  --reed-deep: #56603a;
  --forest: #38502f;          /* deep foliage */
  --pond: #4a8a84;            /* muted pond teal */
  --pond-deep: #2f5e5b;
  --pond-soft: #e2eee8;
  --ochre: #d3a23c;           /* field-guide gold */
  --ochre-deep: #ac7d24;
  --ochre-soft: #f5e7c2;
  --terracotta: #c4673c;      /* muted monarch wing */
  --terracotta-deep: #9e4d29;
  --plum: #835a78;            /* iris / butterfly accent */
  --maple: #b23a2c;           /* PATRON red — edits / attention */
  --maple-deep: #872619;

  --line: #e3d6b6;            /* sepia hairline */
  --line-soft: #ede2c6;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(86, 96, 58, 0.08), 0 12px 30px rgba(47, 94, 91, 0.10);
  --spectrum: linear-gradient(90deg, var(--reed), var(--pond), var(--ochre), var(--terracotta), var(--plum));
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  font-family: var(--body);
  color: var(--ink);
}
/* The body must GROW with its content (not be capped at one viewport), or a
   position:sticky header un-sticks after the first screen. min-height fills
   the viewport when content is short; the page scrolls when it is tall. */
html { height: 100%; }
body { min-height: 100vh; }
/* Paper: a seamless sepia grain that scrolls with the page, over two corner
   glows pinned to the viewport (fixed, so they never tile into seams). */
html {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.36 0 0 0 0 0.30 0 0 0 0 0.19 0 0 0 0.045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E") repeat,
    radial-gradient(60% 50% at 85% -10%, rgba(211, 162, 60, 0.10), transparent 60%),
    radial-gradient(55% 45% at 5% 110%, rgba(74, 138, 132, 0.10), transparent 60%),
    var(--parchment);
  background-attachment: scroll, fixed, fixed;
}
body { display: flex; flex-direction: column; }
.faint { color: #9c8d6c; }

::selection { background: rgba(211, 162, 60, 0.38); color: var(--ink); }

/* One warm, consistent keyboard-focus ring; inputs keep their own inset ring. */
:focus-visible { outline: 2px solid var(--pond); outline-offset: 2px; border-radius: 4px; }
input:focus-visible, [contenteditable]:focus-visible, textarea:focus-visible, select:focus-visible {
  outline-offset: -1px;
  border-radius: inherit;
}

html { scrollbar-width: thin; scrollbar-color: #cdbe96 transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: #d6c8a1;
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background-color: #c3b285; }

/* An engraver's rule: hairlines flanking a centred aldus-leaf ornament. */
.ornament-rule {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 auto;
  max-width: 26rem;
  color: var(--ochre-deep);
  font-size: 1rem;
  line-height: 1;
}
.ornament-rule::before, .ornament-rule::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ── Chrome: the masthead ─────────────────────────────────────────────────
   Two tiers under one sticky roof. The brand strip is identical on every
   page — mark + wordmark left, the review inbox and the identity chip right —
   so the chrome reads as designed, not assembled. The context row beneath it
   is the page's own: breadcrumb, a title finally larger than the brand, and
   quiet editorial action links. A dotted engraver's rule divides the tiers. */

header.masthead {
  flex: none;
  position: sticky;
  top: 0;
  z-index: 50;
  color: var(--ink);
  background: linear-gradient(180deg, var(--paper), var(--parchment-deep));
  border-bottom: 1px solid var(--line);
}
.masthead .spacer { margin-left: auto; }

.mh-brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.4rem 1.15rem;
}
.mh-context {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
  padding: 0.42rem 1.15rem 0.5rem;
  border-top: 1px dotted #d0bf94;
}

.brand { display: inline-flex; align-items: center; gap: 0.55rem; text-decoration: none; }
.brand .mark { width: 26px; height: 26px; flex: none; transition: transform 0.2s ease; }
.brand:hover .mark { transform: rotate(-8deg) scale(1.06); }
/* One family, one size, two voices: italic "Living", roman "LiPaD". */
.brand-word {
  font-family: var(--display);
  font-size: 1.14rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--forest);
  white-space: nowrap;
}
.brand-word em { font-style: italic; font-weight: 500; }

.mh-title {
  font-family: var(--display);
  font-size: 1.28rem;
  font-weight: 600;
  margin: 0;
  color: var(--ink);
  line-height: 1.15;
}
.mh-meta {
  font-size: 0.78rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Nav in the chrome is quiet text, not boxes; hover draws an ochre baseline. */
.nav-link {
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.015em;
  color: var(--reed-deep);
  text-decoration: none;
  padding: 0.18rem 0.05rem;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
  transition: color 0.12s ease, border-color 0.12s ease;
}
.nav-link:hover { color: var(--forest); border-bottom-color: var(--ochre); }
.nav-back { color: var(--ink-soft); font-weight: 500; }
.nav-back:hover { color: var(--forest); }

/* The review inbox: the one emphasized action in the chrome. */
.review-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex: none;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--reed-deep);
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0.22rem 0.75rem;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.review-pill:hover { color: var(--forest); background: var(--ochre-soft); border-color: var(--ochre); }
.review-pill.has-pending { background: var(--ochre-soft); border-color: var(--ochre); color: var(--ochre-deep); }
.review-pill.has-pending:hover { background: var(--ochre); color: #fffdf5; }
.review-count {
  display: inline-grid;
  place-items: center;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.28rem;
  border-radius: 999px;
  background: var(--ochre);
  color: #fffdf5;
  font-size: 0.68rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.review-pill.has-pending:hover .review-count { background: #fffdf5; color: var(--ochre-deep); }

/* The signed-in identity: a round specimen tag; its menu holds Sign out. */
.id-tag { position: relative; flex: none; }
.id-chip {
  display: inline-grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  border: 1px solid var(--reed-deep);
  border-radius: 50%;
  background: var(--paper);
  color: var(--reed-deep);
  font-family: var(--display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}
.id-chip:hover { background: var(--reed-deep); color: #fffdf5; }
.id-chip[aria-expanded="true"] {
  background: var(--reed-deep);
  color: #fffdf5;
  box-shadow: 0 0 0 3px rgba(124, 138, 85, 0.25);
}
.id-menu {
  position: absolute;
  top: calc(100% + 0.45rem);
  right: 0;
  z-index: 80;
  min-width: 12rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 0.65rem 0.75rem 0.6rem;
}
.id-name { font-family: var(--display); font-weight: 600; font-size: 0.95rem; color: var(--ink); }
.id-role {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 0.15rem;
  white-space: nowrap;
}
.id-signout {
  display: block;
  width: 100%;
  margin-top: 0.6rem;
  padding: 0.32rem 0.6rem;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--maple);
  font-size: 0.8rem;
  font-weight: 600;
}
.id-signout:hover { background: var(--maple); border-color: var(--maple-deep); color: #fffdf5; }

/* ── Correction view: the specimen-label header ───────────────────────── */

header.specimen {
  flex: none;
  background: linear-gradient(180deg, var(--paper), var(--parchment-deep));
  border-bottom: 1px solid var(--line);
}
.specimen-top { display: flex; align-items: center; gap: 0.9rem; padding: 0.55rem 1.15rem 0.45rem; }
.specimen-label { flex: 1; min-width: 0; text-align: center; line-height: 1.25; }
.specimen-title {
  font-family: var(--display);
  font-style: italic;
  font-weight: 600;
  color: var(--forest);
  font-size: 1.16rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.specimen-sub { display: flex; align-items: center; justify-content: center; gap: 0.6rem; margin-top: 0.15rem; }
.folio { font-size: 0.74rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.pg {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1;
  color: #fffdf5;
  background: var(--reed-deep);
  border-radius: 50%;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(46, 52, 30, 0.18);
  transition: background 0.12s ease, transform 0.12s ease;
}
.pg:hover { background: var(--forest); transform: scale(1.06); }
.pg.is-disabled { opacity: 0.3; pointer-events: none; }
.crumb { flex: none; font-family: var(--body); font-size: 0.82rem; color: var(--reed-deep); text-decoration: none; padding: 0.22rem 0.55rem; border-radius: 6px; white-space: nowrap; transition: background 0.12s ease, color 0.12s ease; }
.crumb:hover { background: var(--ochre-soft); color: var(--forest); }

/* Cross-page carry-over: this page continues a speech from the previous page.
   A curator confirms the carried speaker, reattributes it, or rules that a new
   speaker begins here — the banner's status- class colours which state it's in. */
.continues-banner {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 1.15rem;
  font-size: 0.86rem;
  color: var(--ink);
  background: var(--ochre-soft);
  border-bottom: 1px solid #e6d3a6;
  box-shadow: inset 3px 0 0 var(--terracotta);
}
.continues-banner strong { font-family: var(--display); color: var(--forest); font-weight: 600; }
.continues-arrow { color: var(--terracotta); font-size: 1.1rem; line-height: 1; }
.continues-text { min-width: 0; }
.continues-link { font-size: 0.78rem; color: var(--pond-deep); text-decoration: none; white-space: nowrap; }
.continues-link:hover { text-decoration: underline; }
.continues-id { margin-left: 0.3rem; font-size: 0.78rem; font-family: ui-monospace, monospace; color: var(--reed-deep); text-decoration: none; vertical-align: 0.05em; }
.continues-id:hover { text-decoration: underline; }
.continues-via {
  flex: none;
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--pond-deep);
  background: var(--pond-soft);
  border: 1px solid #c9e0d6;
  border-radius: 999px;
  padding: 0.14rem 0.55rem;
}

/* The confirmed/dismissed chip that supersedes the raw "continues…" phrasing. */
.continues-state {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  padding: 0.14rem 0.55rem;
  border-radius: 999px;
}
.status-confirmed .continues-state { color: var(--forest); background: var(--pond-soft); border: 1px solid #c9e0d6; }
.status-dismissed .continues-state { color: var(--reed-deep); background: #efe7d6; border: 1px solid var(--line); }
/* A dismissed page is not a continuation: strike through the carried name. */
.status-dismissed { background: #f3ecdb; }
.status-dismissed .continues-text { color: var(--reed-deep); }
.status-dismissed #continues-name { text-decoration: line-through; text-decoration-thickness: 1px; color: var(--reed-deep); }

.continues-controls { margin-left: auto; display: inline-flex; gap: 0.3rem; white-space: nowrap; }
.cc-btn {
  font-family: var(--body);
  font-size: 0.74rem;
  line-height: 1;
  color: var(--reed-deep);
  background: #fffdf5;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.26rem 0.62rem;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.cc-btn:hover { background: var(--ochre-soft); border-color: var(--ochre); color: var(--forest); }
.cc-confirm.active { background: var(--forest); border-color: var(--forest); color: #fffdf5; }
.cc-dismiss.active { background: var(--reed-deep); border-color: var(--reed-deep); color: #fffdf5; }
.cc-clear { color: var(--ink-faint); }
.cc-clear:hover { color: var(--maple); }
/* The banner's ruling saves with the page — this chip says so until it lands. */
.cc-save {
  font-family: var(--body);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  color: #fffdf5;
  background: var(--maple);
  border: 1px solid var(--maple-deep);
  border-radius: 999px;
  padding: 0.28rem 0.66rem;
  cursor: pointer;
}
.cc-save:hover { background: var(--maple-deep); }

.undo-redo { display: inline-flex; gap: 0.25rem; }
.undo-redo .btn-ghost { padding: 0.3rem 0.55rem; font-size: 0.95rem; line-height: 1; }
.undo-redo .btn-ghost:disabled { opacity: 0.35; cursor: default; background: transparent; }
.cc-confirm.active:hover { background: var(--forest); color: #fffdf5; }
.cc-dismiss.active:hover { background: var(--reed-deep); color: #fffdf5; }
.specimen-tools {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
  padding: 0.4rem 1.15rem;
  border-top: 1px dotted #d0bf94;
  background: rgba(246, 239, 220, 0.45);
}
.specimen-tools .spacer { margin-left: auto; }

.model-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--pond-deep);
  background: var(--pond-soft);
  border: 1px solid #c9e0d6;
  border-radius: 999px;
  padding: 0.16rem 0.6rem;
}
.model-badge::before { content: "✦"; color: var(--ochre-deep); }
.era-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--reed-deep);
  background: var(--ochre-soft);
  border: 1px solid #e6d3a6;
  border-radius: 999px;
  padding: 0.16rem 0.6rem;
}
.era-badge::before { content: "❧"; color: var(--terracotta); }
.era-badge.muted-badge { color: var(--ink-faint); background: var(--line-soft); border-color: var(--line); }
.era-badge.muted-badge::before { content: "○"; color: var(--ink-faint); }

/* OCR-source switcher: a small segmented control shown when a page has more
 * than one OCR source (e.g. a Claude recovery alongside the Qwen original). */
.source-switch,
.lang-switch {
  display: inline-flex;
  border: 1px solid #cfe0d3;
  border-radius: 999px;
  overflow: hidden;
  background: var(--paper);
}
.lang-switch { border-color: #e6d3a6; }
.lang-switch .src-opt { color: var(--terracotta-deep); }
.lang-switch .src-opt + .src-opt { border-left: 1px solid #e6d3a6; }
.lang-switch .src-opt:hover:not(.active) { background: var(--ochre-soft); }
.lang-switch .src-opt.active { background: var(--terracotta); color: #fff; }
.src-opt {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.16rem 0.62rem;
  color: var(--pond-deep);
  text-decoration: none;
}
.src-opt + .src-opt { border-left: 1px solid #cfe0d3; }
.src-opt:hover:not(.active) { background: var(--pond-soft); }
.src-opt.active { background: var(--pond); color: #fff; }

/* View switcher (Correction / Details). */
.views { display: inline-flex; gap: 0.25rem; }
.view-btn {
  background: transparent;
  color: var(--reed-deep);
  border: 1px solid var(--line);
  font-size: 0.78rem;
  padding: 0.38rem 0.7rem;
}
.view-btn:hover { background: var(--ochre-soft); color: var(--forest); }
.view-btn.active { background: var(--reed); color: #fff; border-color: var(--reed-deep); }
.view-btn.view-link { text-decoration: none; display: inline-grid; place-items: center; }

/* Fold the page scan away on a narrow screen (shown only when it stacks). */
.scan-toggle {
  display: none;
  align-items: center;
  font-family: var(--body);
  font-size: 0.76rem;
  color: var(--reed-deep);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.34rem 0.66rem;
  cursor: pointer;
}
.scan-toggle:hover { background: var(--ochre-soft); color: var(--forest); }
.scan-toggle[aria-expanded="false"] { background: var(--ochre-soft); border-color: var(--ochre); color: var(--ochre-deep); }

/* ── Details view: People (parlinfo) + provenance ─────────────────────── */

#details-panel {
  flex: 1;
  overflow: auto;
  padding: 1.5rem 1.9rem;
  background: var(--paper);
  border-left: 1px solid var(--line);
}
#details-panel h2 {
  font-family: var(--display);
  color: var(--forest);
  font-size: 1.18rem;
  font-weight: 600;
  margin: 1.6rem 0 0.6rem;
}
#details-panel h2:first-child { margin-top: 0; }
#details-panel .note {
  font-family: var(--body);
  font-size: 0.74rem;
  font-weight: 400;
  font-style: italic;
  color: var(--ink-soft);
}
table.people, table.kv { border-collapse: collapse; width: 100%; max-width: 54rem; }
table.people th {
  text-align: left;
  color: var(--reed-deep);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.35rem 0.6rem;
  border-bottom: 2px solid var(--line);
}
table.people td, table.kv td, table.kv th {
  padding: 0.38rem 0.6rem;
  border-bottom: 1px solid var(--line-soft);
  font-size: 0.86rem;
  vertical-align: top;
}
table.people tbody tr:hover td { background: rgba(211, 162, 60, 0.07); }
table.kv th {
  width: 12rem;
  text-align: left;
  font-weight: 600;
  color: var(--ink-soft);
}
.p-name { font-weight: 700; color: var(--pond-deep); }
.p-conf { color: var(--reed-deep); white-space: nowrap; }
.p-aliases { color: var(--ink-faint); font-size: 0.8rem; }
.pid {
  font: inherit;
  font-size: 0.82rem;
  width: 7rem;
  padding: 0.2rem 0.4rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fffdf5;
  color: var(--ink);
}
.pid:focus { outline: 2px solid var(--pond); outline-offset: -1px; }
.mono { font-family: ui-monospace, monospace; font-size: 0.78rem; color: var(--ink-soft); word-break: break-all; }

button, .btn {
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 0.42rem 0.85rem;
  background: var(--pond);
  color: #fff;
  text-decoration: none;
  display: inline-block;
  transition: background 0.12s ease, transform 0.04s ease, border-color 0.12s ease;
}
button:hover, .btn:hover { background: var(--pond-deep); }
button:active, .btn:active { transform: translateY(1px); }
button:disabled { opacity: 0.4; cursor: default; }

.btn-ghost { background: transparent; color: var(--reed-deep); border-color: var(--line); }
.btn-ghost:hover { background: var(--ochre-soft); color: var(--forest); border-color: var(--ochre); }
.btn-ghost.active { background: var(--ochre); color: #fff; border-color: var(--ochre-deep); }
.btn.is-disabled { opacity: 0.35; pointer-events: none; background: transparent; border-color: var(--line); color: var(--ink-soft); }
.btn-save {
  background: var(--reed);
  border-color: var(--reed-deep);
  box-shadow: 0 2px 0 var(--reed-deep);
  min-width: 13rem;
  padding: 0.45rem 1.4rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.btn-save:hover { background: var(--reed-deep); }
/* Unsaved work: the save button warms to the attention maple until it lands. */
.btn-save.attention { background: var(--maple); border-color: var(--maple-deep); box-shadow: 0 2px 0 var(--maple-deep); }
.btn-save.attention:hover { background: var(--maple-deep); }

/* The page's identification queue: how many speakers still lack a confirmed
   parlinfo identity; clicking walks the pending lines. */
.unresolved-nav {
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--terracotta-deep);
  background: var(--ochre-soft);
  border: 1px dashed var(--ochre);
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.unresolved-nav:hover { background: var(--ochre); color: #fffdf5; }

.kbd-hint { font-size: 0.7rem; color: var(--ink-faint); white-space: nowrap; }
.kbd-hint kbd {
  font-family: var(--body);
  font-size: 0.64rem;
  color: var(--ink-soft);
  background: #fffdf5;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 0.06rem 0.32rem;
}
@media (max-width: 62rem) { .kbd-hint { display: none; } }

.pager { display: inline-flex; align-items: center; gap: 0.25rem; }
.pager .btn { padding: 0.42rem 0.72rem; }
.pager-pos { font-size: 0.75rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; min-width: 3.6rem; text-align: center; }

#status { font-size: 0.78rem; min-width: 5rem; text-align: right; color: var(--reed-deep); }
#status.unsaved { color: var(--terracotta-deep); font-weight: 600; }
#status.error { color: var(--maple); font-weight: 600; }
#edit-count { font-size: 0.74rem; color: var(--ink-soft); }
#edit-count.has-edits { color: var(--terracotta-deep); font-weight: 700; }

/* ── Workspace (Correction view) ──────────────────────────────────────── */

/* The correction view is a fixed-height workbench: the specimen header (and any
   continuation banner) stay pinned while the scan + text panels scroll inside
   `main`. Bounding the body to the viewport is what lets the panels scroll
   INTERNALLY rather than the whole document growing — which in turn keeps the
   scan aligned to the text (see the scan↔text scroll-sync in correction.js) and
   keeps the save button reachable. Scoped to this view's body class, so the
   sticky `.app-bar` on the reading/calendar pages (which scroll the document) is
   untouched. `dvh` tracks the mobile address bar; `vh` is the fallback. */
body.view-correction { height: 100vh; height: 100dvh; overflow: hidden; }

main { display: flex; flex: 1; min-height: 0; }

#image-panel {
  flex: 1;
  overflow: auto;
  padding: 1.1rem;
  background:
    radial-gradient(120% 80% at 50% -10%, var(--pond-soft), transparent 55%),
    linear-gradient(160deg, #eae7cf, #dfe7d3);
}
#image-panel.empty { display: flex; align-items: center; justify-content: center; }
.scan-placeholder {
  max-width: 22rem;
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.86rem;
  line-height: 1.65;
  padding: 1.6rem;
  border: 1px dashed var(--reed);
  border-radius: var(--radius);
  background: rgba(252, 248, 236, 0.7);
}
#image-stage { position: relative; }
#page-image {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 0 0 1px rgba(50, 42, 27, 0.10), 0 1px 2px rgba(86, 96, 58, 0.08), 0 12px 30px rgba(47, 94, 91, 0.10);
}

.ocr-box {
  position: absolute;
  cursor: pointer;
  border-radius: 14px;
  background: radial-gradient(ellipse at center, rgba(74, 138, 132, 0.16), rgba(74, 138, 132, 0) 62%);
}
.ocr-box.active {
  background: radial-gradient(ellipse at center, rgba(211, 162, 60, 0.6), rgba(211, 162, 60, 0.12) 55%, rgba(211, 162, 60, 0) 100%);
  box-shadow: 0 0 26px 12px rgba(211, 162, 60, 0.3);
}

#text-panel {
  flex: 1;
  overflow: auto;
  padding: 0.85rem 1.05rem;
  border-left: 1px solid var(--line);
  background: var(--paper);
}

.ocr-row { display: flex; align-items: baseline; gap: 0.45rem; padding: 1px 0; border-radius: 5px; }

/* ── The structure gutter: speech rails, start brackets, topic ticks ────── */
.gutter { flex: none; width: 13px; align-self: stretch; position: relative; cursor: pointer; border-radius: 3px; }
.gutter:hover { background: rgba(211, 162, 60, 0.18); }
/* Ghost bracket on hover over an unmarked line: "a speech could begin here". */
.ocr-row:hover .gutter:not(.g-start):not(.g-topic):not(.g-scene):not(.g-proc)::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 3px;
  width: 7px;
  height: 2px;
  background: rgba(86, 96, 58, 0.3);
}
.gutter.g-rail::before {
  content: "";
  position: absolute;
  left: 5px;
  top: -1px;
  bottom: -1px;
  width: 2px;
  background: rgba(124, 138, 85, 0.5);
}
.gutter.g-start::before { top: 3px; background: rgba(86, 96, 58, 0.75); }
.gutter.g-start::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 3px;
  width: 7px;
  height: 2px;
  background: rgba(86, 96, 58, 0.75);
}
.gutter.g-asserted::after { width: 9px; background: var(--pond); }
.gutter.g-carried::before { background: rgba(211, 162, 60, 0.6); }
.gutter.g-scene::after {
  content: "\2768";
  position: absolute;
  left: 3px;
  top: 50%;
  transform: translateY(-55%);
  font-size: 0.6rem;
  color: var(--plum);
}
.gutter.g-proc::after {
  content: "\00a7";
  position: absolute;
  left: 3px;
  top: 50%;
  transform: translateY(-55%);
  font-size: 0.6rem;
  color: var(--ink-soft);
}
.gutter.g-proc-start::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 2px;
  bottom: -2px;
  width: 5px;
  border-left: 2px solid var(--ink-soft);
  border-top: 2px solid var(--ink-soft);
}
.gutter.g-end::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 1px;
  width: 8px;
  height: 2px;
  background: rgba(166, 76, 58, 0.7);
}
.gutter.g-quote::after {
  content: "\275d";
  position: absolute;
  left: 3px;
  top: 50%;
  transform: translateY(-55%);
  font-size: 0.55rem;
  color: var(--reed-deep);
}
.gutter.g-ref::after {
  content: "\2317";
  position: absolute;
  left: 3px;
  top: 50%;
  transform: translateY(-55%);
  font-size: 0.6rem;
  color: var(--ink-faint);
}
.gutter.g-topic::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 50%;
  width: 9px;
  height: 3px;
  border-top: 1px solid var(--ochre);
  border-bottom: 1px solid var(--ochre);
}
.carry-out {
  margin: 0.4rem 0 0 2.4rem;
  font-family: var(--display);
  font-style: italic;
  font-size: 0.82rem;
  color: var(--terracotta-deep);
}
.ocr-row .idx { color: #b0a07e; font-size: 0.7rem; width: 2.4rem; text-align: right; flex: none; }
.line-edit {
  flex: 1;
  font-family: ui-monospace, "SF Mono", monospace;
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--ink);
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 0.12rem 0.35rem;
  white-space: pre-wrap;
}
.line-edit:hover { border-color: var(--line); }
.line-edit:focus { outline: 2px solid var(--pond); outline-offset: -1px; background: #fffdf4; }
.ocr-row.active { background: rgba(211, 162, 60, 0.18); box-shadow: inset 3px 0 0 var(--ochre); }
.line-edit .word { cursor: pointer; border-radius: 2px; }
.line-edit .word:hover { background: rgba(74, 138, 132, 0.12); }
.line-edit .word.changed { color: var(--maple-deep); font-weight: 600; }

/* A line edited away from the raw OCR: monarch-terracotta marker + revert. */
.ocr-row.edited { background: rgba(196, 103, 60, 0.07); }
.ocr-row.edited .idx { color: var(--terracotta); font-weight: 700; }
.ocr-row.edited .idx::after { content: " ●"; font-size: 0.55rem; }
.revert {
  flex: none;
  opacity: 0;
  padding: 0 0.3rem;
  font-size: 0.9rem;
  line-height: 1;
  color: var(--ink-faint);
  background: transparent;
  border-color: transparent;
}
.revert:hover { color: var(--maple); background: var(--ochre-soft); }
.ocr-row:hover .revert, .ocr-row.edited .revert { opacity: 1; }

/* The line-kind toggle: assert a turn the detector missed (⊕) or rule a
   detected turn a false positive (⊖) — the curator's word over the grammar. */
.kind-toggle {
  flex: none;
  opacity: 0;
  padding: 0 0.3rem;
  font-size: 0.9rem;
  line-height: 1;
  color: var(--ink-faint);
  background: transparent;
  border-color: transparent;
}
.kind-toggle:hover { color: var(--pond-deep); background: var(--pond-soft); }
.ocr-row:hover .kind-toggle { opacity: 1; }

/* Deterministic annotation in the Correction view: topic headings, speaker
 * names, hidden running headers, and the inline parlinfo-id widget. */
.line-edit.topic { color: var(--terracotta-deep); font-weight: 700; letter-spacing: 0.02em; }
/* A continuation catchword ([Mr. Mackenzie (Lambton)]) — the printer's continuity
   aid naming the speaker who crosses the page break. Shown as a quiet aside, not a
   speech turn: muted, italic, centred. */
.line-edit.catchword { color: var(--reed-deep); font-style: italic; text-align: center; font-size: 0.9em; opacity: 0.85; }
/* Curator-ruled kinds: a stage direction, and the House acting. */
.line-edit.scene { color: var(--plum); font-style: italic; background: rgba(131, 90, 120, 0.07); border-radius: 4px; }
/* A character-anchored cue WITHIN a line: "(Laughter.)" mid-sentence. */
.line-edit .word.cue, .word.cue { color: var(--plum); font-style: italic; background: rgba(131, 90, 120, 0.10); border-radius: 3px; }
/* The grammar's own find, unconfirmed: dotted underline whispers "detected". */
.word.cue.detected { background: none; border-bottom: 1px dotted var(--plum); border-radius: 0; }
.line-edit.procedural { color: var(--ink-soft); font-style: italic; background: rgba(108, 95, 70, 0.07); border-radius: 4px; }
.line-edit.procedural[data-procedure]::before {
  content: "\00a7 " attr(data-procedure);
  display: inline-block;
  margin-right: 0.5rem;
  font-style: normal;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ochre-deep);
  vertical-align: 0.06em;
}
/* Quoted matter read into the record: the member's reading, set apart. */
.line-edit.quotation { font-style: italic; border-left: 2px solid var(--reed); padding-left: 0.5rem; background: rgba(124, 138, 85, 0.05); border-radius: 0 4px 4px 0; }
/* Hansard apparatus (page numbers, running headers): the book, not the debate. */
.line-edit.reference { color: var(--ink-faint); font-size: 0.82em; letter-spacing: 0.04em; }
.line-edit.reference[data-apparatus]::before {
  content: attr(data-apparatus);
  display: inline-block;
  margin-right: 0.5rem;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pond-deep);
  vertical-align: 0.08em;
}
.line-edit .word.person-name { color: var(--pond-deep); font-weight: 700; }
/* A member MENTIONED in another's words: dotted, never bold — bold is who
   holds the floor. */
.line-edit .word.mention { color: var(--pond-deep); border-bottom: 1px dotted var(--pond); }

/* ── Layers: look through a kind's styling without touching the record ── */
.tk-layers { display: flex; flex-direction: column; gap: 0.14rem; margin-top: 0.45rem; padding-top: 0.45rem; border-top: 1px dashed var(--line); }
.ly-head { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 0.1rem; }
.ly-row { display: flex; align-items: center; gap: 0.35rem; width: 100%; font: inherit; font-size: 0.7rem; color: var(--ink-soft); background: none; border: none; border-radius: 5px; padding: 0.14rem 0.2rem; cursor: pointer; text-align: left; }
.ly-row:hover { background: rgba(124, 138, 85, 0.10); }
.ly-eye { width: 0.9em; color: var(--pond-deep); font-size: 0.72rem; line-height: 1; }
.ly-row.off .ly-eye { color: var(--ink-faint); }
.ly-row.off .ly-label { color: var(--ink-faint); }
.ly-swatch { display: inline-block; width: 0.62rem; height: 0.62rem; border-radius: 3px; flex: none; }
.ly-swatch.ly-speakers { background: var(--pond-deep); }
.ly-swatch.ly-topics { background: var(--terracotta-deep); }
.ly-swatch.ly-scene { background: var(--plum); }
.ly-swatch.ly-procedural { background: rgba(108, 95, 70, 0.55); }
.ly-swatch.ly-mentions { background: var(--pond); }
.ly-swatch.ly-quotation { background: var(--reed-deep); }
.ly-swatch.ly-reference { background: var(--ink-faint); }
.ly-row.off .ly-swatch { opacity: 0.35; }
.ly-count { margin-left: auto; color: var(--ink-faint); font-size: 0.64rem; font-variant-numeric: tabular-nums; }

/* Each layer off: that kind renders as plain print. Structure (gutter) stays. */
body.layer-off-speakers .line-edit .word.person-name { color: inherit; font-weight: inherit; }
body.layer-off-topics .line-edit.topic { color: inherit; font-weight: inherit; letter-spacing: inherit; }
body.layer-off-scene .line-edit.scene,
body.layer-off-scene .line-edit .word.cue,
body.layer-off-scene .word.cue { color: inherit; font-style: normal; background: none; border-bottom: none; }
body.layer-off-procedural .line-edit.procedural { color: inherit; font-style: normal; background: none; }
body.layer-off-reference .line-edit.reference { color: inherit; font-size: inherit; letter-spacing: inherit; }
body.layer-off-quotation .line-edit.quotation { font-style: normal; border-left: none; padding-left: 0; background: none; }
body.layer-off-mentions .line-edit .word.mention { color: inherit; border-bottom: none; }

/* ── Welcome tour: four field-journal callouts on a first visit ── */
.tour-card {
  position: fixed;
  z-index: 300;
  width: 340px;
  background: #fffdf5;
  border: 1px solid var(--reed);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(46, 52, 30, 0.22);
  padding: 0.85rem 1rem 0.75rem;
}
.tour-step { font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); }
.tour-title { font-family: "Fraunces", Georgia, serif; font-style: italic; font-size: 1.05rem; color: var(--forest); margin: 0.15rem 0 0.3rem; }
.tour-body { font-size: 0.82rem; line-height: 1.5; color: var(--ink-soft); margin: 0 0 0.6rem; }
.tour-actions { display: flex; justify-content: space-between; align-items: center; }
.tour-skip { font: inherit; font-size: 0.72rem; color: var(--ink-faint); background: none; border: none; cursor: pointer; padding: 0.2rem 0; }
.tour-skip:hover { color: var(--ink-soft); text-decoration: underline; }
.tour-next {
  font: inherit; font-size: 0.8rem; font-weight: 600;
  color: #fffdf5; background: var(--reed-deep);
  border: none; border-radius: 7px; padding: 0.3rem 0.8rem; cursor: pointer;
}
.tour-next:hover { background: var(--forest); }
/* The spotlight: a reed ring around the step's target; everything else dims
   softly through the ring's shadow. Pointer-events off — it only shows. */
.tour-spot {
  position: fixed;
  z-index: 295;
  pointer-events: none;
  border: 2px solid var(--reed-deep);
  border-radius: 8px;
  box-shadow: 0 0 0 4px rgba(124, 138, 85, 0.28), 0 0 0 9999px rgba(46, 52, 30, 0.16);
  transition: top 0.25s ease, left 0.25s ease, width 0.25s ease, height 0.25s ease;
}
@media (prefers-reduced-motion: reduce) { .tour-spot { transition: none; } }
.tour-caret {
  position: absolute;
  width: 12px;
  height: 12px;
  background: #fffdf5;
  transform: rotate(45deg);
}
.tour-card.caret-top .tour-caret { top: -7px; border-left: 1px solid var(--reed); border-top: 1px solid var(--reed); }
.tour-card.caret-bottom .tour-caret { bottom: -7px; border-right: 1px solid var(--reed); border-bottom: 1px solid var(--reed); }
.tk-head { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; }
.tk-help {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 1.3rem;
  height: 1.3rem;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  color: var(--ink-soft);
  background: rgba(124, 138, 85, 0.12);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.tk-help:hover { color: #fffdf5; background: var(--reed-deep); }

/* ── Tool recipes: a sentence and a tiny before/after beside the kit ── */
.tk-recipe {
  position: fixed;
  z-index: 290;
  width: 295px;
  background: #fffdf5;
  border: 1px solid var(--line);
  border-radius: 9px;
  box-shadow: 0 8px 22px rgba(46, 52, 30, 0.18);
  padding: 0.6rem 0.75rem 0.65rem;
  pointer-events: none;
}
.rx-head { font-family: "Fraunces", Georgia, serif; font-style: italic; font-size: 0.9rem; color: var(--forest); }
.rx-body { font-size: 0.73rem; line-height: 1.45; color: var(--ink-soft); margin: 0.25rem 0 0.45rem; }
.rx-demo {
  font-family: "Special Elite", ui-monospace, monospace;
  font-size: 0.68rem; line-height: 1.5; color: var(--ink);
  background: rgba(124, 138, 85, 0.07);
  border-radius: 6px; padding: 0.35rem 0.45rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rx-rule { font-size: 0.7rem; line-height: 1.45; margin: 0.25rem 0; }
.rx-rule.rx-yes { color: var(--forest); }
.rx-rule.rx-no { color: var(--terracotta-deep); }
.rx-red { color: var(--terracotta-deep); text-decoration: line-through; }
.rx-topic { color: var(--terracotta-deep); font-weight: 700; letter-spacing: 0.02em; }
.rx-flag { color: var(--ochre-deep); font-style: italic; }
.rx-mention { color: var(--pond-deep); border-bottom: 1px dotted var(--pond); }
.rx-quote { font-style: italic; color: var(--reed-deep); }
.rx-arrow { color: var(--ink-faint); }
.rx-name { color: var(--pond-deep); font-weight: 700; }
.rx-bracket { color: var(--reed-deep); font-weight: 700; }
.rx-fold { color: var(--ink-faint); font-style: italic; }
.rx-cue { color: var(--plum); font-style: italic; }
.rx-proc { color: var(--ink-soft); font-style: italic; }
.rx-proc { display: block; }

/* The procedure-kind chooser: name the business when tagging it procedural. */
.proc-chooser {
  position: fixed;
  z-index: 320;
  width: 260px;
  background: #fffdf5;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(46, 52, 30, 0.22);
  padding: 0.5rem;
}
.pc-head { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; color: var(--ink-soft); padding: 0.15rem 0.35rem 0.4rem; }
.pc-opt { display: block; width: 100%; text-align: left; font: inherit; background: #fffdf5; border: 1px solid var(--line); border-radius: 7px; padding: 0.4rem 0.55rem; margin-bottom: 0.28rem; cursor: pointer; }
.pc-opt:last-child { margin-bottom: 0; }
.pc-opt:hover { border-color: var(--ochre); background: var(--ochre-soft); }
.pc-label { display: block; font-weight: 600; font-size: 0.86rem; color: var(--ink); }
.pc-hint { display: block; font-size: 0.72rem; color: var(--ink-faint); margin-top: 0.05rem; }
.rx-ref { color: var(--ink-faint); font-size: 0.62rem; letter-spacing: 0.04em; }
.ocr-row.meta-line { display: none; }
@keyframes land-pulse { 0% { background: rgba(211, 162, 60, 0.35); } 100% { background: transparent; } }
.ocr-row.landed { animation: land-pulse 2.2s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .ocr-row.landed { animation: none; background: rgba(211, 162, 60, 0.18); }
}
.speaker-meta { display: inline-flex; align-items: center; gap: 0.25rem; flex: none; margin-left: 0.4rem; }
.speaker-meta input {
  width: 5.5rem;
  font: inherit;
  font-size: 0.72rem;
  padding: 0.1rem 0.3rem;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #fffdf5;
  color: var(--ink);
}
.speaker-meta input:focus { outline: 2px solid var(--pond); outline-offset: -1px; }
/* A resolver suggestion the curator has not yet confirmed: dashed and muted.
   Editing, picking a candidate, or ✓ rules the line and solidifies it. */
.speaker-meta input.unconfirmed, .pid.unconfirmed {
  border-style: dashed;
  border-color: #d3bd8a;
  color: var(--ink-soft);
  background: #fbf5e4;
}
.pid-confirm {
  flex: none;
  border: 1px solid var(--line);
  background: #fffdf5;
  color: var(--reed-deep);
  border-radius: 5px;
  font-size: 0.72rem;
  line-height: 1;
  padding: 0.14rem 0.34rem;
  cursor: pointer;
}
.pid-confirm:hover { background: var(--forest); border-color: var(--forest); color: #fffdf5; }
.speaker-meta a { font-size: 0.85rem; text-decoration: none; color: var(--pond-deep); }
.speaker-meta a.disabled { opacity: 0.3; pointer-events: none; }
.cp-open { border: 0; background: transparent; cursor: pointer; font-size: 0.82rem; line-height: 1; padding: 0.1rem; opacity: 0.6; }
.cp-open:hover { opacity: 1; }

/* ── In-context review: a proposal card beneath the line it changes ────── */

.ocr-row.has-proposal { background: rgba(211, 162, 60, 0.10); box-shadow: inset 3px 0 0 var(--ochre); }
.proposal-card {
  margin: 0.25rem 0 0.55rem 2.85rem;
  padding: 0.55rem 0.75rem;
  background: var(--ochre-soft);
  border: 1px solid #e6d3a6;
  border-left: 3px solid var(--ochre);
  border-radius: 8px;
  font-size: 0.8rem;
}
.proposal-card.settled { opacity: 0.75; border-left-color: var(--line); background: #f3ecdb; }
.proposal-card.settled.accepted { border-left-color: var(--reed); }
.pp-head { display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: 0.2rem; }
.pp-kind { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--terracotta-deep); }
.pp-meta { font-size: 0.72rem; color: var(--ink-soft); }
.pp-summary { font-family: ui-monospace, "SF Mono", monospace; font-size: 0.82rem; color: var(--ink); margin-bottom: 0.4rem; }
.pp-actions { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }
.pp-note {
  font: inherit;
  font-size: 0.74rem;
  width: 15rem;
  padding: 0.24rem 0.45rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fffdf5;
  color: var(--ink);
}
.pp-state { font-size: 0.74rem; font-weight: 600; color: var(--forest); }

/* ── Ranked candidate picker (floating card) ──────────────────────────── */

.candidate-picker {
  position: fixed;
  z-index: 40;
  width: 360px;
  max-width: 92vw;
  max-height: 70vh;
  overflow-y: auto;
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 3px solid var(--pond);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(86, 96, 58, 0.10), 0 18px 44px rgba(47, 94, 91, 0.18);
  padding: 0.7rem 0.8rem 0.8rem;
}
@media (prefers-reduced-motion: no-preference) {
  .candidate-picker:not([hidden]) { animation: cp-in 0.16s ease; }
}
@keyframes cp-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}
.cp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.cp-title { font-family: var(--display); font-weight: 600; color: var(--forest); font-size: 1.02rem; }
.cp-close { border: 0; background: transparent; cursor: pointer; font-size: 1.1rem; line-height: 1; color: var(--ink-faint); }
.cp-close:hover { color: var(--maple); }
.cp-search {
  display: block;
  width: 100%;
  margin: 0.5rem 0 0.35rem;
  font: inherit;
  font-size: 0.85rem;
  padding: 0.38rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fffdf5;
  color: var(--ink);
}
.cp-search:focus { outline: 2px solid var(--pond); outline-offset: -1px; }
.cp-hint { font-size: 0.68rem; color: var(--ink-faint); margin: 0.25rem 0 0.35rem; }
.cp-date { font-size: 0.74rem; color: var(--ink-soft); margin: 0.1rem 0 0.5rem; font-style: italic; }

/* ── The selection action bar: highlight text, pick a verb ─────────────── */
.select-bar {
  position: fixed;
  z-index: 45;
  display: flex;
  gap: 0.25rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow);
  padding: 0.25rem 0.35rem;
  flex-wrap: wrap;
  max-width: 30rem;
}
.select-bar button {
  font: inherit;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--reed-deep);
  background: transparent;
  border: 0;
  border-radius: 999px;
  padding: 0.28rem 0.6rem;
  cursor: pointer;
  white-space: nowrap;
}
.select-bar button:hover { background: var(--ochre-soft); color: var(--forest); }
.select-bar .sb-more { color: var(--ink-faint); font-weight: 700; letter-spacing: 0.06em; }

/* ── The curator's kit: a quiet reference panel (not a toolbar) ─────────── */
.toolkit {
  position: fixed;
  right: 1rem;
  top: 10rem;
  z-index: 30;
  width: 12rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 0.65rem 0.7rem 0.7rem;
}
.tk-head {
  font-family: var(--display);
  font-style: italic;
  font-weight: 600;
  color: var(--forest);
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
}
.tk-howto { font-size: 0.72rem; line-height: 1.5; color: var(--ink-soft); }
.tk-howto p { margin: 0 0 0.4rem; }
.tk-howto strong { color: var(--reed-deep); font-weight: 700; }
.tk-hint { font-size: 0.68rem; color: var(--ink-faint); line-height: 1.45; margin-top: 0.45rem; padding-top: 0.45rem; border-top: 1px dashed var(--line); }
.tk-legend { display: flex; flex-direction: column; gap: 0.22rem; font-size: 0.66rem; color: var(--ink-soft); margin-top: 0.45rem; padding-top: 0.45rem; border-top: 1px dashed var(--line); }
.tk-legend i { display: inline-block; width: 14px; height: 8px; margin-right: 0.25rem; position: relative; }
.tk-legend .lg-rail::before, .tk-legend .lg-start::before, .tk-legend .lg-carried::before { content: ""; position: absolute; left: 5px; top: 0; bottom: 0; width: 2px; background: rgba(124, 138, 85, 0.55); }
.tk-legend .lg-start::before { background: rgba(86, 96, 58, 0.8); }
.tk-legend .lg-start::after { content: ""; position: absolute; left: 5px; top: 0; width: 7px; height: 2px; background: rgba(86, 96, 58, 0.8); }
.tk-legend .lg-carried::before { background: rgba(211, 162, 60, 0.7); }
.tk-legend .lg-topic::after { content: ""; position: absolute; left: 2px; top: 2px; width: 9px; height: 3px; border-top: 1px solid var(--ochre); border-bottom: 1px solid var(--ochre); }
.tk-legend .lg-scene::after { content: "\2768"; position: absolute; left: 4px; top: -3px; font-size: 0.6rem; color: var(--plum); font-style: normal; }
.tk-legend .lg-proc::after { content: "\00a7"; position: absolute; left: 4px; top: -3px; font-size: 0.6rem; color: var(--ink-soft); font-style: normal; }
.tk-legend .lg-end::after { content: ""; position: absolute; left: 3px; top: 2px; width: 8px; height: 2px; background: rgba(166, 76, 58, 0.7); }
.tk-legend .lg-quote::after { content: "\275d"; position: absolute; left: 4px; top: -3px; font-size: 0.55rem; color: var(--reed-deep); font-style: normal; }
.tk-legend .lg-ref::after { content: "\2317"; position: absolute; left: 4px; top: -3px; font-size: 0.6rem; color: var(--ink-faint); font-style: normal; }
.tk-legend .lg-tip { font-style: italic; color: var(--ink-faint); }
/* Reserve the kit's column so it never floats over the row controls. */
@media (min-width: 68.01rem) { #text-panel { padding-right: 14.6rem; } }
/* Below the kit's own width, it becomes a bottom drawer (see the MOBILE
   section at the foot of this file) rather than simply vanishing — the Layers
   panel and legend still matter to a contributor on a phone. */
.cp-alias { margin-top: 0.55rem; }
.cp-alias-btn {
  display: block;
  width: 100%;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 600;
  text-align: center;
  color: var(--ochre-deep);
  background: var(--ochre-soft);
  border: 1px dashed var(--ochre);
  border-radius: 7px;
  padding: 0.38rem 0.55rem;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.cp-alias-btn:hover:not(:disabled) { background: var(--ochre); color: #fffdf5; }
.cp-alias-btn:disabled { cursor: default; opacity: 0.7; }
.cp-alias-done { display: block; text-align: center; font-size: 0.76rem; font-weight: 600; color: var(--forest); padding: 0.34rem 0; }
.cp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.cp-empty { font-size: 0.8rem; color: var(--ink-faint); padding: 0.3rem 0; }
.cp-cand {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "name id" "meta id";
  gap: 0 0.5rem;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font: inherit;
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fffdf5;
  color: var(--ink);
}
.cp-cand:hover { border-color: var(--pond); background: var(--pond-soft); }
.cp-cand:disabled { cursor: not-allowed; opacity: 0.55; }
.cp-cand.active { border-color: var(--reed-deep); background: var(--ochre-soft); box-shadow: inset 0 0 0 1px var(--reed); }
.cp-cand.serves { border-left: 3px solid var(--reed); }
.cp-name { grid-area: name; font-weight: 600; }
.cp-meta { grid-area: meta; font-size: 0.72rem; color: var(--ink-soft); }
.cp-id { grid-area: id; align-self: center; font-family: ui-monospace, monospace; font-size: 0.72rem; color: var(--pond-deep); white-space: nowrap; }
.cp-none { display: block; text-align: center; color: var(--ink-soft); font-size: 0.8rem; }
.cp-note-label { display: block; margin-top: 0.6rem; font-size: 0.74rem; color: var(--ink-soft); font-weight: 600; }
.cp-note {
  display: block;
  width: 100%;
  margin-top: 0.25rem;
  font: inherit;
  font-size: 0.82rem;
  padding: 0.35rem 0.45rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fffdf5;
  color: var(--ink);
  resize: vertical;
  box-sizing: border-box;
}
.cp-note:focus { outline: 2px solid var(--pond); outline-offset: -1px; }

/* ── Beyond the roster: the unknown verdict and external people ── */
.cp-beyond { margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px dashed var(--line); display: flex; flex-direction: column; gap: 0.35rem; }
.cp-unknown {
  width: 100%; text-align: left; font: inherit; font-size: 0.8rem;
  color: var(--ink-soft); background: #fffdf5;
  border: 1px solid var(--line); border-radius: 7px;
  padding: 0.4rem 0.55rem; cursor: pointer;
}
.cp-unknown:hover { border-color: var(--ochre); background: var(--ochre-soft); }
.cp-unknown.active { border-color: var(--ochre-deep); background: var(--ochre-soft); box-shadow: inset 0 0 0 1px var(--ochre); color: var(--ink); }
.cp-ext > summary { font-size: 0.8rem; color: var(--pond-deep); cursor: pointer; list-style: none; padding: 0.25rem 0; }
.cp-ext > summary::-webkit-details-marker { display: none; }
.cp-ext-body { display: flex; flex-direction: column; gap: 0.35rem; padding: 0.3rem 0 0.1rem; }
.cp-ext-auth { display: flex; gap: 0.8rem; font-size: 0.76rem; color: var(--ink-soft); }
.cp-ext-auth label { display: inline-flex; align-items: center; gap: 0.25rem; cursor: pointer; }
.cp-ext-id, .cp-ext-name {
  font: inherit; font-size: 0.82rem; padding: 0.32rem 0.45rem;
  border: 1px solid var(--line); border-radius: 6px; background: #fffdf5; color: var(--ink);
  box-sizing: border-box; width: 100%;
}
.cp-ext-id:focus, .cp-ext-name:focus { outline: 2px solid var(--pond); outline-offset: -1px; }
.cp-ext-use {
  font: inherit; font-size: 0.8rem; font-weight: 600; color: #fffdf5;
  background: var(--pond-deep); border: none; border-radius: 7px;
  padding: 0.35rem 0.7rem; cursor: pointer; align-self: flex-start;
}
.cp-ext-use:hover { background: var(--pond); }
.cp-ext-state { font-size: 0.74rem; color: var(--terracotta-deep); }

/* A linked person mention: solid underline (identified), vs dotted (tagged, unlinked). */
.line-edit .word.mention.linked { border-bottom: 1px solid var(--pond-deep); }

/* ── Login + index ────────────────────────────────────────────────────── */

.centered { flex: 1; display: flex; align-items: center; justify-content: center; gap: 2.5rem; padding: 2rem; flex-wrap: wrap; }
.hero { width: 300px; max-width: 80vw; color: var(--reed-deep); }
.hero .cap { font-family: var(--display); font-size: 1.05rem; color: var(--forest); margin: 0.6rem 0 0; text-align: center; font-style: italic; }
/* The project tagline lives here, by the hero — not in the everyday chrome. */
.hero .cap-sub {
  margin: 0.3rem 0 0;
  text-align: center;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--terracotta-deep);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

/* The pond breathes: reeds sway, the butterfly drifts, ripples wander.
   Each animated group is nested inside its positioning transform, so the CSS
   transform never fights the SVG placement. Stilled under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .h-reeds {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: reed-sway 6.5s ease-in-out infinite alternate;
  }
  .h-fly {
    transform-box: fill-box;
    transform-origin: 50% 50%;
    animation: fly-drift 9s ease-in-out infinite;
  }
  .h-ripple-1 { animation: ripple-drift 8s ease-in-out infinite alternate; }
  .h-ripple-2 { animation: ripple-drift 11s ease-in-out infinite alternate-reverse; }
}
@keyframes reed-sway {
  from { transform: rotate(-1.1deg); }
  to { transform: rotate(1.5deg); }
}
@keyframes fly-drift {
  0%   { transform: translate(0, 0) rotate(-2deg); }
  33%  { transform: translate(-7px, -9px) rotate(3deg); }
  66%  { transform: translate(6px, -3px) rotate(-1deg); }
  100% { transform: translate(0, 0) rotate(-2deg); }
}
@keyframes ripple-drift {
  from { transform: translateX(-5px); }
  to { transform: translateX(5px); }
}

.card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 2rem 2.1rem;
  width: 100%;
  max-width: 23rem;
  overflow: hidden;
}
.card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: var(--spectrum); }
.card h2 { font-family: var(--display); margin: 0 0 0.3rem; color: var(--forest); font-size: 1.5rem; font-weight: 600; }
.card p.lede { margin: 0 0 1.3rem; color: var(--ink-soft); font-size: 0.88rem; line-height: 1.5; }
.field { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.95rem; }
.field label { font-size: 0.72rem; font-weight: 700; color: var(--reed-deep); text-transform: uppercase; letter-spacing: 0.06em; }
.field input, .field select {
  font: inherit;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fffdf5;
  color: var(--ink);
}
.field input:focus, .field select:focus { outline: 2px solid var(--pond); outline-offset: -1px; }
.full { width: 100%; text-align: center; margin-top: 0.3rem; }
.form-error { color: var(--maple); font-size: 0.82rem; min-height: 1.1rem; margin: 0.2rem 0 0.6rem; }
@media (prefers-reduced-motion: no-preference) {
  .form-error.shake { animation: form-shake 0.3s ease; }
}
@keyframes form-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  50% { transform: translateX(4px); }
  75% { transform: translateX(-2px); }
}

.picker { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }

.page-list { max-width: 56rem; margin: 1.6rem auto; padding: 0 1.6rem; }
.page-list h3 { font-family: var(--display); color: var(--forest); font-size: 1.05rem; font-weight: 600; }
.page-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.page-chip {
  display: inline-block;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--reed);
  border-radius: var(--radius);
  background: #eef0da;
  color: var(--reed-deep);
  text-decoration: none;
  font-size: 0.8rem;
  font-family: ui-monospace, monospace;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease, transform 0.05s ease;
}
.page-chip:hover { background: var(--terracotta); border-color: var(--terracotta-deep); color: #fff; transform: translateY(-1px); }
.page-chip { min-width: 2.2rem; text-align: center; font-variant-numeric: tabular-nums; }
.page-lede { color: var(--ink-soft); font-size: 0.9rem; line-height: 1.5; margin: 0.2rem 0 1.2rem; max-width: 40rem; }
.muted { color: #9c8d6c; font-size: 0.86rem; }
a { color: var(--pond-deep); }

/* ── The reading scroll: the living record as a continuous stream ──────── */

.reading { display: flex; gap: 0; max-width: 72rem; margin: 0 auto;   overflow-anchor: none;  /* prepends are anchored by hand — don't double-compensate */
}
.read-rail { flex: 0 0 11rem; }
.read-rail-inner { position: sticky; top: 1.4rem; padding: 1.8rem 0 0 1.6rem; text-align: right; }
.read-rail-session { display: block; font-family: var(--display); font-style: italic; color: var(--ink-faint); font-size: 0.9rem; }
.read-rail-date { display: block; font-family: var(--display); font-style: italic; color: var(--terracotta-deep); font-size: 1rem; margin-top: 0.2rem; }
.read-column { flex: 1; min-width: 0; max-width: 46rem; padding: 1.8rem 1.6rem 4rem; }
.read-masthead { text-align: center; margin-bottom: 2.2rem; }
.read-masthead .ornament-rule { margin-top: 1.4rem; }

.read-day { display: flex; align-items: center; gap: 1rem; margin: 2.6rem 0 1.6rem; }
.read-day-rule { flex: 1; height: 1px; background: var(--line); }
.read-day-label { font-family: var(--display); font-style: italic; font-weight: 600; color: var(--forest); font-size: 1.15rem; white-space: nowrap; }

.read-topic {
  font-family: var(--body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--terracotta-deep);
  margin: 2rem 0 0.9rem;
}

.read-speech { display: flex; gap: 1rem; margin-bottom: 1.5rem; }
.read-speaker { flex: 0 0 5.2rem; text-align: center; padding-top: 0.2rem; }
.read-speaker-disc {
  display: inline-grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #faf4e3, var(--parchment-deep));
  box-shadow: inset 0 0 0 1px var(--line);
  font-family: var(--display);
  font-weight: 600;
  color: var(--reed-deep);
}
.read-speaker-name { display: block; font-size: 0.72rem; font-weight: 700; color: var(--pond-deep); margin-top: 0.3rem; line-height: 1.25; }
.read-speaker-id { display: block; font-family: ui-monospace, monospace; font-size: 0.66rem; color: var(--ink-soft); text-decoration: none; margin-top: 0.12rem; }
.read-speaker-id:hover { color: var(--pond-deep); text-decoration: underline; }
.read-speaker-via { display: block; font-size: 0.6rem; font-weight: 600; color: var(--forest); margin-top: 0.15rem; }
.read-speech.unattributed .read-speaker-disc { color: var(--ink-faint); }
.read-speech.unattributed .read-speaker-name { color: var(--ink-faint); font-weight: 500; font-style: italic; }
.read-body { flex: 1; min-width: 0; }
.read-text { font-family: var(--display); font-size: 1.02rem; line-height: 1.75; color: var(--ink); margin: 0; }
.read-actions { display: flex; align-items: center; gap: 0.8rem; margin-top: 0.35rem; }
.read-correct { display: inline-block; font-size: 0.7rem; color: var(--ink-faint); text-decoration: none; }
.read-correct:hover { color: var(--maple); }
.read-cite { font: inherit; font-size: 0.7rem; color: var(--ink-faint); background: none; border: none; padding: 0; cursor: pointer; }
.read-cite:hover { color: var(--pond-deep); }

/* The citation card: the printed reference, copyable. */
.read-cite-card {
  position: fixed;
  z-index: 340;
  width: 340px;
  background: #fffdf5;
  border: 1px solid var(--pond);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(46, 52, 30, 0.22);
  padding: 0.7rem 0.85rem 0.75rem;
}
.rc-head { display: flex; justify-content: space-between; align-items: center; font-family: "Fraunces", Georgia, serif; font-style: italic; font-size: 0.9rem; color: var(--pond-deep); }
.rc-close { font: inherit; font-size: 0.95rem; color: var(--ink-faint); background: none; border: none; cursor: pointer; line-height: 1; }
.rc-text {
  font-size: 0.8rem; line-height: 1.5; color: var(--ink);
  background: rgba(124, 138, 85, 0.07); border-radius: 6px;
  padding: 0.45rem 0.55rem; margin: 0.4rem 0 0.5rem;
  user-select: all;
}
.rc-actions { display: flex; align-items: center; gap: 0.6rem; }
.rc-copy { font: inherit; font-size: 0.78rem; font-weight: 600; color: #fffdf5; background: var(--pond-deep); border: none; border-radius: 7px; padding: 0.3rem 0.7rem; cursor: pointer; }
.rc-copy:hover { background: var(--pond); }
.rc-state { font-size: 0.76rem; color: var(--forest); }
.rc-note { font-size: 0.68rem; line-height: 1.4; color: var(--ink-faint); margin: 0.5rem 0 0; }

.read-scene {
  text-align: center;
  font-family: var(--display);
  font-style: italic;
  color: var(--plum);
  font-size: 0.95rem;
  margin: 0.9rem 0;
}
.read-procedural {
  font-family: var(--display);
  font-style: italic;
  color: var(--ink-soft);
  font-size: 0.95rem;
  margin: 1.1rem 0 1.1rem 6.2rem;
  padding-left: 0.8rem;
  border-left: 2px solid var(--line);
}
.read-proc-mover { font-family: var(--body); font-style: normal; font-size: 0.78rem; color: var(--pond-deep); }
.read-proc-mover a { color: var(--pond-deep); }
.read-proc-kind {
  display: inline-block;
  margin-right: 0.5rem;
  font-family: var(--body);
  font-style: normal;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ochre-deep);
  vertical-align: 0.1em;
}
.read-seg.seg-scene { color: var(--plum); font-style: italic; }
.seg-cue { color: var(--plum); font-style: italic; }
.read-seg.seg-quote { font-style: italic; color: var(--ink-soft); background: rgba(124, 138, 85, 0.07); border-radius: 3px; }

/* ── The flag form: a question on its way to a curator (both views) ── */
.flag-form {
  position: fixed;
  z-index: 320;
  width: 340px;
  background: #fffdf5;
  border: 1px solid var(--ochre);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(46, 52, 30, 0.22);
  padding: 0.7rem 0.85rem;
}
.ff-head { font-family: "Fraunces", Georgia, serif; font-style: italic; font-size: 0.92rem; color: var(--ochre-deep); margin-bottom: 0.4rem; }
.ff-note { display: block; width: 100%; box-sizing: border-box; font: inherit; font-size: 0.82rem; padding: 0.35rem 0.45rem; border: 1px solid var(--line); border-radius: 6px; background: #fffdf5; color: var(--ink); resize: vertical; }
.ff-note:focus { outline: 2px solid var(--ochre); outline-offset: -1px; }
.ff-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 0.45rem; }
.ff-cancel { font: inherit; font-size: 0.72rem; color: var(--ink-faint); background: none; border: none; cursor: pointer; }
.ff-cancel:hover { color: var(--ink-soft); text-decoration: underline; }
.ff-send { font: inherit; font-size: 0.8rem; font-weight: 600; color: #fffdf5; background: var(--ochre-deep); border: none; border-radius: 7px; padding: 0.3rem 0.8rem; cursor: pointer; }
.ff-send:hover { background: var(--ochre); }
.ff-state { font-size: 0.76rem; color: var(--forest); margin-top: 0.4rem; }

/* ── Reading view: the highlight bar and its slim tools ── */
.read-bar {
  position: fixed;
  z-index: 260;
  display: flex;
  gap: 0.25rem;
  background: #fffdf5;
  border: 1px solid var(--reed);
  border-radius: 9px;
  box-shadow: 0 8px 22px rgba(46, 52, 30, 0.18);
  padding: 0.25rem;
}
.read-bar button { font: inherit; font-size: 0.76rem; color: var(--ink); background: none; border: none; border-radius: 6px; padding: 0.3rem 0.55rem; cursor: pointer; white-space: nowrap; }
.read-bar button:hover { background: rgba(124, 138, 85, 0.14); }
.read-picker {
  position: fixed;
  z-index: 320;
  width: 340px;
  background: #fffdf5;
  border: 1px solid var(--pond);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(46, 52, 30, 0.22);
  padding: 0.7rem 0.85rem;
}
.rp-head { font-family: "Fraunces", Georgia, serif; font-style: italic; font-size: 0.92rem; color: var(--pond-deep); margin-bottom: 0.4rem; }
.rp-search { display: block; width: 100%; box-sizing: border-box; font: inherit; font-size: 0.85rem; padding: 0.35rem 0.45rem; border: 1px solid var(--line); border-radius: 6px; background: #fffdf5; }
.rp-search:focus { outline: 2px solid var(--pond); outline-offset: -1px; }
.rp-list { list-style: none; margin: 0.4rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; max-height: 220px; overflow-y: auto; }
.rp-cand { display: flex; justify-content: space-between; gap: 0.5rem; width: 100%; text-align: left; font: inherit; font-size: 0.8rem; padding: 0.32rem 0.5rem; border: 1px solid var(--line); border-radius: 7px; background: #fffdf5; cursor: pointer; }
.rp-cand:hover { border-color: var(--pond); background: var(--pond-soft); }
.rp-cand.serves { border-left: 3px solid var(--reed); }
.rp-id { font-family: ui-monospace, monospace; font-size: 0.72rem; color: var(--pond-deep); white-space: nowrap; }
.rp-state { font-size: 0.76rem; color: var(--ink-soft); margin-top: 0.4rem; }
.rp-state a { color: var(--pond-deep); }
.rp-close { float: right; font: inherit; font-size: 0.8rem; color: var(--ink-faint); background: none; border: none; cursor: pointer; }
/* The printed folio flowing past, quietly, inside the stream. */
.read-pagemark {
  display: inline-block;
  margin: 0 0.45rem;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  text-decoration: none;
  vertical-align: 0.08em;
}
.read-pagemark:hover { color: var(--reed-deep); text-decoration: underline; }
.read-toast {
  position: fixed;
  z-index: 330;
  background: var(--forest);
  color: #fffdf5;
  font-size: 0.78rem;
  border-radius: 8px;
  padding: 0.4rem 0.7rem;
  box-shadow: 0 8px 20px rgba(46, 52, 30, 0.3);
}
.read-sentinel { text-align: center; font-family: var(--display); font-style: italic; color: var(--ink-faint); padding: 2rem 0; }
.read-sentinel.done { color: var(--ochre-deep); }

/* The session interstitial: the verified narrative that opens the scroll. */
.read-interstitial {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.4rem 1.7rem;
  margin-bottom: 2.4rem;
  position: relative;
}
.read-interstitial::before { content: ""; position: absolute; inset: 5px; border: 1px solid var(--line-soft); border-radius: 7px; pointer-events: none; }
.ri-context { font-family: var(--display); font-style: italic; font-size: 1.02rem; line-height: 1.6; color: var(--forest); margin: 0; }
.ri-list { margin: 0.8rem 0 0; padding-left: 1.1rem; }
.ri-list li { font-size: 0.85rem; line-height: 1.55; color: var(--ink-soft); margin-bottom: 0.3rem; }
.ri-list li::marker { content: "❧ "; color: var(--terracotta); }
.ri-figures { font-family: var(--display); font-style: italic; font-size: 0.84rem; color: var(--ink-faint); margin: 0.8rem 0 0; }

/* Portraits in the speaker medallion (initials disc is the fallback). */
.read-portrait { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; filter: sepia(0.25); }
.read-speaker-disc { overflow: hidden; }

/* Inline correction: each printed line is a segment you can click to fix. */
.read-seg { border-radius: 3px; cursor: pointer; transition: background 0.12s ease; }
.read-seg:hover { background: rgba(211, 162, 60, 0.18); box-shadow: 0 1px 0 var(--ochre); }
.read-seg.seg-saved { background: rgba(124, 138, 85, 0.14); }
.read-seg.seg-proposed { background: rgba(211, 162, 60, 0.16); box-shadow: 0 1px 0 var(--ochre); }

.read-edit {
  position: fixed;
  z-index: 40;
  width: 400px;
  max-width: 92vw;
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 3px solid var(--maple);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 0.7rem 0.8rem 0.6rem;
}
.re-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 0.4rem; }
.re-title { font-family: var(--display); font-weight: 600; color: var(--forest); font-size: 1rem; }
.re-close { border: 0; background: transparent; cursor: pointer; font-size: 1.1rem; line-height: 1; color: var(--ink-faint); }
.re-close:hover { color: var(--maple); }
.re-text {
  display: block;
  width: 100%;
  font-family: ui-monospace, "SF Mono", monospace;
  font-size: 0.86rem;
  line-height: 1.5;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fffdf5;
  color: var(--ink);
  resize: vertical;
  box-sizing: border-box;
}
.re-text:focus { outline: 2px solid var(--pond); outline-offset: -1px; }
.re-actions { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.45rem; }
.re-state { font-size: 0.76rem; font-weight: 600; color: var(--forest); }
.re-hint { font-size: 0.7rem; color: var(--ink-faint); margin: 0.4rem 0 0; }

@media (max-width: 56rem) {
  .read-rail { display: none; }
  .read-speech { flex-direction: column; gap: 0.35rem; }
  .read-speaker { flex: none; display: flex; align-items: center; gap: 0.5rem; text-align: left; }
  .read-speaker-name { margin-top: 0; }
}

/* ── Curator inbox: contributions awaiting review ─────────────────────── */

.inbox { max-width: 54rem; margin: 0 auto; padding: 1.8rem 1.6rem 3rem; }
.inbox-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.9rem; }
.inbox-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 3px solid var(--ochre);
  border-radius: var(--radius);
  padding: 0.85rem 1.05rem;
  box-shadow: var(--shadow);
}
.inbox-row.settled { opacity: 0.75; border-left-color: var(--line); }
.inbox-row.settled.accepted { border-left-color: var(--reed); }
.inbox-main { flex: 1; min-width: 16rem; }
.inbox-head { display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: 0.25rem; }
.inbox-kind { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--terracotta-deep); }
.inbox-where { font-size: 0.75rem; color: var(--ink-soft); }
.inbox-summary { font-family: ui-monospace, "SF Mono", monospace; font-size: 0.85rem; color: var(--ink); margin-bottom: 0.3rem; }
.inbox-meta { font-size: 0.75rem; color: var(--ink-soft); }
.inbox-meta a { color: var(--pond-deep); }
.inbox-actions { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.inbox-note {
  font: inherit;
  font-size: 0.78rem;
  width: 13rem;
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fffdf5;
  color: var(--ink);
}
.inbox-state { font-size: 0.78rem; font-weight: 600; color: var(--forest); }
.inbox-empty { text-align: center; font-family: var(--display); font-style: italic; color: var(--ink-soft); padding: 3rem 0; }

/* ── Contents: the field-guide landing ────────────────────────────────── */

.contents { max-width: 60rem; margin: 0 auto; padding: 2.2rem 1.6rem 3rem; }
.contents-head { text-align: center; margin: 1rem 0 2.4rem; }
.contents-head .ornament-rule { margin-top: 1.7rem; }
.kicker { font-family: var(--body); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--terracotta-deep); margin: 0 0 0.7rem; }
.contents-title { font-family: var(--display); font-weight: 600; color: var(--forest); font-size: clamp(1.8rem, 4vw, 2.9rem); line-height: 1.12; margin: 0; }
.contents-sub { font-family: var(--display); font-style: italic; color: var(--ink-soft); font-size: 1.02rem; line-height: 1.5; margin: 0.9rem 0 0; }

/* Field-guide plates in a grid; each reveals — and glides its context in — on scroll. */
.plate-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1.3rem; align-items: start; }
.plate {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.35rem 1.3rem 1.2rem;
  box-shadow: var(--shadow);
}
.plate::before { content: ""; position: absolute; inset: 5px; border: 1px solid var(--line-soft); border-radius: 7px; pointer-events: none; }
.plate-no { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ochre-deep); margin-bottom: 0.75rem; }
.plate-motif {
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  margin-bottom: 0.8rem;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #faf4e3, var(--parchment-deep));
  box-shadow: inset 0 0 0 1px var(--line);
}
.motif { width: 62px; height: 62px; transition: transform 0.25s ease; }
.plate:hover .motif { transform: rotate(-5deg) scale(1.08); }
.plate-title { font-family: var(--display); font-weight: 600; color: var(--forest); font-size: 1.34rem; margin: 0.12rem 0 0.05rem; }
.plate-years { font-family: var(--display); font-style: italic; color: var(--terracotta-deep); font-size: 0.98rem; }
.plate-context { color: var(--ink-soft); font-size: 0.85rem; line-height: 1.55; margin: 0.75rem 0 0; }
.plate-figures { font-family: var(--display); font-style: italic; font-size: 0.84rem; color: var(--ink-faint); line-height: 1.5; margin: 0.55rem 0 1rem; }
.plate-figures::before { content: "❧ "; color: var(--terracotta); font-style: normal; }
.plate-foot { width: 100%; margin-top: auto; padding-top: 0.9rem; display: flex; flex-direction: column; align-items: center; gap: 0.3rem; }
.plate-meta { font-size: 0.75rem; color: var(--ink-soft); }
.plate-bar {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: var(--line-soft);
  box-shadow: inset 0 1px 1px rgba(50, 42, 27, 0.07);
  overflow: hidden;
}
.plate-bar span { display: block; height: 100%; border-radius: inherit; background: var(--spectrum); }
.plate-pct { font-size: 0.72rem; font-weight: 600; color: var(--ochre-deep); font-variant-numeric: tabular-nums; }
.plate-pct.untouched { font-weight: 400; font-style: italic; color: var(--ink-faint); }

.colophon { margin-top: 3.2rem; text-align: center; }
.colophon p { font-family: var(--display); font-style: italic; font-size: 0.88rem; color: var(--ink-faint); margin: 0; }
.colophon::before { content: "❦"; display: block; color: var(--ochre-deep); margin-bottom: 0.55rem; }

@media (prefers-reduced-motion: no-preference) {
  .plate { opacity: 0; transform: translateY(22px); transition: opacity 0.55s ease, transform 0.55s ease, box-shadow 0.14s ease, border-color 0.14s ease; }
  .plate.in-view { opacity: 1; transform: none; }
  /* the context glides in a beat after its plate settles */
  .plate-context { opacity: 0; transform: translateY(12px); transition: opacity 0.55s ease 0.22s, transform 0.55s ease 0.22s; }
  .plate.in-view .plate-context { opacity: 1; transform: none; }
}
.plate:hover { transform: translateY(-3px); border-color: var(--reed); box-shadow: 0 3px 6px rgba(86, 96, 58, 0.12), 0 18px 40px rgba(47, 94, 91, 0.16); }

/* ── Session calendar: the by-date moving timeline of sitting days ─────── */

.calendar { max-width: 54rem; margin: 0 auto; padding: 1.8rem 1.6rem 3rem; }
.cal-masthead { text-align: center; margin: 0.4rem 0 2.4rem; }
.mast-title { font-family: var(--display); font-weight: 600; color: var(--forest); font-size: clamp(1.55rem, 3vw, 2.15rem); margin: 0; }
.mast-years { font-style: italic; font-weight: 500; color: var(--terracotta-deep); }
.cal-lede { color: var(--ink-soft); font-size: 0.9rem; line-height: 1.5; margin: 0.7rem auto 0; max-width: 42rem; }
.cal-timeline { position: relative; list-style: none; margin: 0; padding: 0; }
.cal-timeline::before { content: ""; position: absolute; top: 0.4rem; bottom: 0.4rem; left: 7.4rem; width: 2px; background: linear-gradient(var(--reed), var(--pond), var(--ochre)); opacity: 0.4; }

/* Month bands: small chips seated on the spine, marking the calendar's turning. */
.cal-month { position: relative; height: 2.1rem; margin: 1.5rem 0 1.2rem; }
.cal-month:first-child { margin-top: 0.2rem; }
.cal-month span {
  position: absolute;
  left: 7.4rem;
  top: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ochre-deep);
  background: var(--parchment-deep);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.32rem 0.9rem;
  box-shadow: 0 1px 0 rgba(50, 42, 27, 0.06);
}
.cal-day { position: relative; display: grid; grid-template-columns: 6.6rem 1fr; gap: 1.7rem; margin-bottom: 1.1rem; align-items: start; }
.cal-day::before { content: ""; position: absolute; left: 7.03rem; top: 0.95rem; width: 0.8rem; height: 0.8rem; border-radius: 50%; background: var(--paper); border: 2px solid var(--reed-deep); z-index: 1; transition: background 0.15s ease, border-color 0.15s ease; }
.cal-day:hover::before { background: var(--ochre); border-color: var(--ochre-deep); }
.cal-date { text-align: right; padding-top: 0.55rem; line-height: 1.2; }
.cal-weekday { display: block; font-family: var(--body); font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ochre-deep); }
.cal-daynum { display: block; font-family: var(--display); font-style: italic; color: var(--terracotta-deep); font-size: 0.98rem; }
.cal-card {
  display: block;
  text-decoration: none;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.85rem 1.05rem;
  box-shadow: var(--shadow);
  transition: transform 0.13s ease, box-shadow 0.13s ease, border-color 0.13s ease;
}
.cal-card:hover { transform: translateX(3px); border-color: var(--reed); box-shadow: 0 3px 6px rgba(86, 96, 58, 0.12), 0 14px 30px rgba(47, 94, 91, 0.14); }
.cal-topics { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.5rem; }
.cal-topic { font-family: var(--display); font-size: 0.9rem; color: var(--forest); background: var(--ochre-soft); border: 1px solid #e6d3a6; border-radius: 6px; padding: 0.1rem 0.5rem; }
.cal-topics.cal-quiet { font-style: italic; color: var(--ink-faint); }
.cal-speakers { font-size: 0.78rem; color: var(--pond-deep); margin-bottom: 0.45rem; }
.cal-foot { font-size: 0.72rem; color: var(--ink-soft); }
.cal-frontmatter { margin-top: 2rem; padding-top: 1.2rem; border-top: 1px dashed var(--line); }
.cal-frontmatter h3 { font-family: var(--display); color: var(--forest); font-size: 1.1rem; margin: 0 0 0.2rem; }
@media (prefers-reduced-motion: no-preference) {
  .cal-day, .cal-month { opacity: 0; transform: translateY(16px); transition: opacity 0.5s ease, transform 0.5s ease; }
  .cal-day.in-view, .cal-month.in-view { opacity: 1; transform: none; }
}
@media (max-width: 40rem) {
  .cal-timeline::before, .cal-day::before { display: none; }
  .cal-day { grid-template-columns: 1fr; gap: 0.3rem; }
  .cal-date { text-align: left; padding-top: 0; }
  .cal-month { height: auto; margin: 1.4rem 0 0.9rem; }
  .cal-month span { position: static; transform: none; display: inline-block; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE & TOUCH  —  Living LiPaD on a phone or tablet (the public surface).

   The record is meant to be read and improved by anyone; most of them arrive on
   a phone. Two independent axes govern the adaptation:
     • pointer: coarse   → touch affordances (bigger hit areas, visible controls).
       Native touch selection replaces the mouse-only "owned drag" — that switch
       lives in correction.js, gated on the same `(pointer: coarse)` query.
     • width breakpoints → layout reflow (stack the panels, reflow the header)
       and floating popovers dock as bottom sheets.
   The field journal is preserved throughout: parchment grounds, sepia hairlines,
   Fraunces display, ochre ornament; every movement stays gated on reduced-motion.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Touch affordances: any coarse pointer (phone OR tablet) ─────────────── */
@media (pointer: coarse) {
  /* The gutter is the speech-boundary surface a finger must land on. Widen its
     column and give each row vertical room so the tap target clears a fingertip
     (the marks stay pinned to the gutter's left edge, so nothing shifts). */
  .gutter { width: 22px; }
  .ocr-row { padding: 3px 0; }
  /* Revert / kind-toggle reveal on hover on the desktop — there is no hover on
     touch, so keep them faintly present and reachable. */
  .ocr-row .revert, .ocr-row .kind-toggle { opacity: 0.5; }
  /* Roomier taps for the small chrome controls. */
  .cc-btn, .view-btn, .src-opt, .pid-confirm, .cp-open, .btn-ghost { min-height: 2.1rem; }
  /* The reading segments: a comfortable tap target on touch. */
  .read-seg { padding: 0.06rem 0.1rem; }
}

/* ── Correction workspace: stack scan under text on a narrow screen ──────────
   Side-by-side flex panels leave the text column too narrow to read; stack them
   (text first — you are correcting text). `main` becomes the single scroll area
   so the specimen header stays pinned above it (the save button stays reachable),
   and the scan is a collapsible panel below. */
@media (max-width: 60rem) {
  main { flex-direction: column; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  #text-panel {
    order: 1;
    overflow: visible;         /* main scrolls; the panel flows */
    border-left: none;
    padding-right: 1.05rem;    /* no reserved kit column at this width */
  }
  #image-panel {
    order: 2;
    flex: none;
    overflow: visible;
    border-top: 1px solid var(--line);
  }
  #image-panel.collapsed { display: none; }
  /* The toggle that folds the scan away for more reading room. */
  .scan-toggle { display: inline-flex; }

  /* On a speaker line the inline parlinfo widget shared the flex row and
     squeezed the text to a sliver (one word per line). Let the row wrap and
     drop the widget onto its own line, indented under the text. */
  .ocr-row { flex-wrap: wrap; }
  .line-edit { flex: 1 1 62%; }
  .speaker-meta { flex-basis: 100%; margin-left: 2.85rem; margin-top: 0.15rem; }
}

/* ── Correction specimen header: a two-row grid on a small screen ────────────
   Row 1: brand · back-crumb · identity chip.  Row 2: ‹ · label · ›  (the pager
   flanks the caption). The two .pg arrows carry no stable id (a disabled edge
   is a <span>), so the trailing one is targeted by its position after the label. */
@media (max-width: 44rem) {
  .specimen-top {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    grid-template-areas:
      "brand brand crumb chip"
      "prev  label label next";
    align-items: center;
    column-gap: 0.4rem;
    row-gap: 0.3rem;
    padding: 0.5rem 0.85rem;
  }
  /* Brand spans the two left columns so it never collapses the label column;
     the arrows sit in the narrow outer cells, hugging the screen edges. */
  .specimen-top > .brand { grid-area: brand; }
  .specimen-top > .crumb { grid-area: crumb; justify-self: end; }
  .specimen-top > .pg { grid-area: prev; justify-self: start; }
  .specimen-top > .specimen-label { grid-area: label; }
  .specimen-top > .specimen-label ~ .pg { grid-area: next; justify-self: end; }
  .specimen-top > .id-tag { grid-area: chip; justify-self: end; }
  .specimen-title { font-size: 1.02rem; white-space: normal; }
  .specimen-sub { flex-wrap: wrap; }
  .pg { width: 2.35rem; height: 2.35rem; font-size: 1.5rem; }
  .specimen-tools { gap: 0.4rem; padding: 0.4rem 0.85rem; }
  /* The continuation banner: let its controls wrap rather than overflow. */
  .continues-banner { flex-wrap: wrap; }
  .continues-controls { margin-left: 0; width: 100%; flex-wrap: wrap; }
  /* The masthead tightens with the screen; the context row already wraps. */
  .mh-brand { padding: 0.38rem 0.85rem; }
  .mh-context { padding: 0.4rem 0.85rem 0.45rem; gap: 0.6rem; }
  .mh-title { font-size: 1.12rem; }
}

/* ── The curator's kit becomes a bottom drawer below its own width ───────────
   It used to simply vanish under 68rem, taking the Layers panel and legend with
   it. Now it slides up from the foot on demand (the ❧ Kit button), so a phone
   contributor can still toggle layers and read the legend.

   The base appearance (display:none + the pill/✕ styling) is declared FIRST so
   the media-query `display` overrides below win at equal specificity — a later
   non-media `display:none` would otherwise re-hide the button on a phone. */
.kit-toggle {
  display: none;
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 370;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--display);
  font-style: italic;
  font-size: 0.92rem;
  color: #fffdf5;
  background: var(--reed-deep);
  border: 1px solid var(--forest);
  border-radius: 999px;
  padding: 0.5rem 0.95rem;
  box-shadow: 0 6px 18px rgba(46, 52, 30, 0.28);
  cursor: pointer;
}
.kit-toggle:hover { background: var(--forest); }
/* While the drawer is open it covers the FAB — hide the FAB so there's no dead
   button beneath the sheet; close via the ✕, a tap outside, or Escape. */
body.kit-open .kit-toggle { display: none; }
.tk-close {
  display: none;
  float: right;
  margin: -0.2rem -0.2rem 0 0;
  border: 0;
  background: transparent;
  color: var(--ink-faint);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}
.tk-close:hover { color: var(--maple); }

@media (max-width: 68rem) {
  .toolkit {
    right: 0;
    left: 0;
    top: auto;
    bottom: 0;
    width: auto;
    max-height: 74vh;
    overflow-y: auto;
    border-radius: 16px 16px 0 0;
    transform: translateY(calc(100% + 2rem));
    box-shadow: 0 -6px 24px rgba(46, 52, 30, 0.22);
    padding-bottom: calc(0.7rem + env(safe-area-inset-bottom));
    z-index: 380;
  }
  body.kit-open .toolkit { transform: none; }
  .kit-toggle { display: inline-flex; }
  .tk-close { display: inline-flex; }
}
@media (max-width: 68rem) and (prefers-reduced-motion: no-preference) {
  .toolkit { transition: transform 0.24s ease; }
}

/* ── Bottom sheets: floating popovers dock to the foot on a phone ────────────
   The JS positions these with inline top/left (getBoundingClientRect math); a
   stylesheet !important beats a *non-important* inline style, so the sheet wins
   on a narrow screen without any change to the positioning code — and a popover
   can never land off-screen. Tablets (wider) keep the floating popovers. */
@media (max-width: 34rem) {
  .select-bar,
  .candidate-picker,
  .proc-chooser,
  .flag-form,
  .read-bar,
  .read-picker,
  .read-cite-card,
  .read-edit {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: 0 !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    border-radius: 16px 16px 0 0 !important;
    box-shadow: 0 -6px 24px rgba(46, 52, 30, 0.22) !important;
    padding-top: 1.15rem !important;
    padding-bottom: calc(0.8rem + env(safe-area-inset-bottom)) !important;
    z-index: 400 !important;
  }
  /* A ribbon grabber, like a field notebook marking its open page. */
  .select-bar::before,
  .candidate-picker::before,
  .proc-chooser::before,
  .flag-form::before,
  .read-bar::before,
  .read-picker::before,
  .read-cite-card::before,
  .read-edit::before {
    content: "";
    position: absolute;
    top: 7px;
    left: 50%;
    width: 2.4rem;
    height: 4px;
    transform: translateX(-50%);
    background: var(--line);
    border-radius: 999px;
  }
  /* The contextual bars: verbs wrap into a row of comfortable, full-height taps. */
  .select-bar,
  .read-bar {
    flex-wrap: wrap !important;
    gap: 0.4rem !important;
    justify-content: center;
    padding-left: 0.7rem !important;
    padding-right: 0.7rem !important;
  }
  .select-bar button,
  .read-bar button {
    flex: 1 1 auto;
    min-height: 2.6rem;
    font-size: 0.9rem !important;
    padding: 0.5rem 0.85rem !important;
    text-align: center;
  }
  .candidate-picker { max-height: 82vh !important; overflow-y: auto !important; }
  .cp-search, .rp-search, .re-text, .ff-note { font-size: 16px; }  /* iOS: no zoom-on-focus */
}
@media (max-width: 34rem) and (prefers-reduced-motion: no-preference) {
  .select-bar:not([hidden]),
  .read-bar:not([hidden]),
  .candidate-picker:not([hidden]),
  .proc-chooser:not([hidden]),
  .flag-form:not([hidden]),
  .read-picker:not([hidden]),
  .read-cite-card:not([hidden]),
  .read-edit:not([hidden]) {
    animation: sheet-up 0.22s ease;
  }
  @keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }
}

/* ── Parliaments: a year-scaled timeline through the 1867→present arc ───────
   A stationary specimen card beside a scrollable TRUE chronological axis: each
   parliament's tick sits at its start year on a fixed px-per-year scale, so
   close elections huddle and long parliaments stretch. Decade rules and margin
   numerals give the measure; each parliament lays a duration segment on the
   rail, coloured by curation state, so the rail reads as the curation frontier
   through time. Scrolling moves only this thin strip; the card crossfades in a
   fixed frame — nothing large ever moves, scales, or tilts (calm, no motion
   sickness) and no transforms are animated / no scroll-driven CSS is used (so
   it renders in every browser). Without JS the cards are a plain readable list. */

/* width: 100% — body is a column flex container and .contents carries
   margin:0 auto, so without an explicit width this page would shrink-to-fit
   its widest header line and squeeze the card + timeline row. */
.parl-contents { width: 100%; max-width: 60rem; padding-top: 1.3rem; }
.parl-contents .contents-head { margin: 0.2rem 0 1.3rem; }
.parl-contents .contents-title { font-size: clamp(1.6rem, 3.4vw, 2.5rem); }
.parl-contents .contents-head .ornament-rule { margin-top: 0.9rem; }

.parl-timeline { display: flex; gap: 2rem; align-items: center; justify-content: center; }

/* The stationary card stage. Default (no JS): a plain vertical list of cards. */
.parl-stage { position: relative; flex: 0 1 34rem; display: flex; flex-direction: column; gap: 1rem; }
.parl-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  color: var(--ink);
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 1.6rem 1.8rem 1.7rem;
}
/* JS mode: the STAGE is the one constant paper plate — sized by JS to the
   tallest parliament, so the frame NEVER changes size — and the cards are
   transparent text layers crossfading inside it (no frame flicker, no
   brightness dip mid-fade). */
.js-timeline .parl-stage {
  display: block; min-height: 29rem; /* pre-measurement / JS-failure fallback */
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden;
}
.js-timeline .parl-card {
  position: absolute; inset: 0; justify-content: center;
  background: none; border: 0; box-shadow: none;
  opacity: 0; visibility: hidden; z-index: 1;
  /* Outgoing: a quick dissolve, then hidden (visibility also drops its Enter
     link from the tab order). This opacity fade is deliberately KEPT under
     prefers-reduced-motion — a fade is not vestibular motion, and an instant
     swap reads as a glitch. */
  transition: opacity 0.15s ease, visibility 0s linear 0.15s;
}
.js-timeline .parl-card.is-active {
  opacity: 1; visibility: visible; z-index: 2; /* incoming paints on top */
  /* Incoming: a slow bloom over the fast exit — one card resolving, never two
     texts interleaving. */
  transition: opacity 0.4s ease;
}
/* The gentle rise on arrival IS motion, so it exists only when welcome. The
   hidden card resets its offset only after it has finished hiding, so the
   outgoing card never visibly slides. */
@media (prefers-reduced-motion: no-preference) {
  .js-timeline .parl-card {
    transform: translateY(6px);
    transition: opacity 0.15s ease, visibility 0s linear 0.15s, transform 0s linear 0.15s;
  }
  .js-timeline .parl-card.is-active {
    transform: none;
    transition: opacity 0.4s ease, transform 0.4s ease;
  }
}
/* One-frame measuring geometry: natural card height at the final wrap width. */
.js-timeline .parl-stage.is-measuring .parl-card { bottom: auto; height: auto; }

.parl-head { display: flex; align-items: baseline; gap: 0.6rem; justify-content: center; }
.parl-ord { font-family: var(--display); font-weight: 600; color: var(--forest); font-size: 2rem; line-height: 1.05; }
.parl-years { font-family: var(--display); font-style: italic; color: var(--terracotta-deep); font-size: 1.05rem; }
.parl-gov { font-size: 0.85rem; color: var(--ink-soft); margin-top: 0.2rem; }
.parl-motif { display: grid; place-items: center; width: 66px; height: 66px; margin: 0.7rem 0 0.15rem; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #faf4e3, var(--parchment-deep)); box-shadow: inset 0 0 0 1px var(--line); }
.parl-motif .motif { width: 42px; height: 42px; }
/* A specimen not yet collected: the motif waits in half-tone until its
   parliament's pages are in hand. */
.parl-motif--scanned .motif, .parl-motif--future .motif { filter: saturate(0.35); opacity: 0.55; }
.parl-desc { font-family: var(--display); font-style: italic; color: var(--ink-soft); font-size: 1.06rem; line-height: 1.55; margin: 0.7rem auto 0; max-width: 30rem; }
.parl-foot { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; margin-top: 0.9rem; }
.parl-meta { font-size: 0.74rem; color: var(--ink-soft); }
.parl-bar { width: 14rem; max-width: 100%; height: 6px; border-radius: 999px; background: var(--line-soft); box-shadow: inset 0 1px 1px rgba(50, 42, 27, 0.07); overflow: hidden; }
.parl-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--spectrum); }
.parl-pct { font-size: 0.74rem; font-weight: 600; color: var(--ochre-deep); font-variant-numeric: tabular-nums; }
.parl-pct.untouched { font-weight: 400; font-style: italic; color: var(--ink-faint); }
.parl-state { font-family: var(--display); font-style: italic; font-size: 0.9rem; color: var(--reed-deep); }
.parl-state--future { color: var(--ink-faint); }
.parl-enter { font-family: var(--body); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.03em; color: var(--pond-deep); background: var(--pond-soft); border: 1px solid #cfe4dd; border-radius: 999px; padding: 0.42rem 1rem; margin-top: 0.3rem; text-decoration: none; transition: background 0.14s ease; }
.parl-enter:hover { background: #d6e8e2; }

/* The timeline strip (only shown when JS drives it). Layout, left to right:
   decade numerals in a ruled margin · the rail of duration segments · ticks. */
.parl-dial-wrap { position: relative; display: none; flex: 0 0 13.5rem; width: 13.5rem; }
.js-timeline .parl-dial-wrap { display: block; }
/* No z-index: the scroller is a later sibling, so ticks and segments paint
   over the band — the glow reads as a highlight BEHIND the current tick,
   never a veil over it. */
.parl-dial-marker {
  position: absolute; left: 0; right: 0; top: 50%; height: 2.4rem; transform: translateY(-50%);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, transparent, var(--ochre-soft), transparent);
  opacity: 0.7; pointer-events: none;
}
/* The scroller itself carries NO decoration (no mask/filter/clip): Firefox's
   async scrolling has a history of refusing wheel input over adorned scroll
   containers, so the edge fade lives in overlay caps instead (below).
   overscroll-behavior keeps a wheel at either end from yanking the page. */
.parl-dial {
  position: relative; height: 29rem; overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain;
}
/* Edge fades: parchment caps over the strip's ends — visually the old mask,
   structurally inert (pointer-events: none; placed after the nav in the DOM
   so they paint on top without z-index games). */
.parl-dial-fade { position: absolute; left: 0; right: 0; height: 20%; pointer-events: none; }
.parl-dial-fade--top { top: 0; background: linear-gradient(180deg, var(--parchment), rgba(246, 239, 220, 0)); }
.parl-dial-fade--bottom { bottom: 0; background: linear-gradient(0deg, var(--parchment), rgba(246, 239, 220, 0)); }
/* The decorative year scale: decade rules + numerals and the duration
   segments, all positioned by JS through the same year→y mapping as the
   ticks (so the scale can never disagree with them). aria-hidden — screen
   readers get the same facts from each tick's label. */
.parl-axis { position: absolute; top: 0; left: 0; right: 0; pointer-events: none; }
.parl-axis-rule { position: absolute; left: 2.5rem; right: 0.4rem; height: 1px; background: var(--line-soft); }
.parl-axis-year {
  position: absolute; left: 0; width: 2.1rem; text-align: right;
  transform: translateY(-50%);
  font-family: var(--display); font-style: italic; font-size: 0.72rem;
  color: var(--ink-soft); font-variant-numeric: tabular-nums;
}
.parl-seg { position: absolute; left: 2.95rem; width: 5px; border-radius: 3px; background: var(--line); }
.parl-seg--curatable { background: var(--ochre); }
.parl-seg--scanned { background: var(--reed); opacity: 0.55; }
.parl-seg--future { background: var(--line); }
.parl-seg--open { background: linear-gradient(180deg, var(--line) 15%, rgba(227, 214, 182, 0)); }
.parl-seg--curatable.is-active { background: var(--ochre-deep); }
.parl-seg--scanned.is-active { background: var(--reed-deep); opacity: 1; }
.parl-seg--future.is-active { background: var(--ink-faint); }
.parl-seg--open.is-active { background: linear-gradient(180deg, var(--ink-faint) 15%, rgba(160, 145, 113, 0)); }

.parl-dial-track { list-style: none; margin: 0; padding: 0; position: relative; }
.parl-tick { position: absolute; left: 0; right: 0; }
.parl-tick-btn {
  display: flex; align-items: baseline; gap: 0.45rem; width: 100%;
  background: none; border: 0; cursor: pointer; font: inherit; text-align: left;
  padding: 0.2rem 0.4rem 0.2rem 4rem; line-height: 1.1;
  color: var(--ink-soft); transition: color 0.14s ease;
}
.parl-tick-btn:focus-visible { outline: 2px solid var(--pond); outline-offset: 1px; border-radius: 4px; }
.parl-tick-ord { font-family: var(--display); font-weight: 600; font-size: 1rem; }
.parl-tick-year { font-family: var(--display); font-style: italic; font-size: 0.78rem; }
.parl-tick-btn:hover { color: var(--ink); }
.parl-tick.is-current .parl-tick-btn { color: var(--forest); }
.parl-tick.is-current .parl-tick-ord { color: var(--terracotta-deep); }
.parl-tick--scanned.is-current .parl-tick-btn { color: var(--reed-deep); }

.parl-scrollhint { text-align: center; font-family: var(--display); font-style: italic; font-size: 0.85rem; color: var(--ink-faint); margin: 1rem 0 0; }

@media (max-width: 720px) {
  .parl-contents { max-width: 100%; }
  .parl-timeline { flex-direction: column; align-items: stretch; gap: 1rem; }
  .parl-dial-wrap { width: 100%; flex-basis: auto; }
  .parl-dial { height: 11rem; }
  .js-timeline .parl-stage { min-height: 24rem; }
  .parl-desc { font-size: 1rem; }
}