:root {
  /* --amber darkened from #C89B32: 3.85:1+ on both page backgrounds so amber
     strokes/borders clear the 3:1 non-text minimum (M1). */
  --paper: #F9F6F0; --ink: #1B2A49; --seal: #C85A32; --sand: #E2D8C9; --amber: #99781C;
  /* --seal-text: the seal for TEXT-sized use (M1 contrast pass). WCAG ratios,
     computed with the relative-luminance formula, not eyeballed:
       #B04E28 on --paper #F9F6F0 = 4.91:1   (≥ 4.5:1 ✓)
       #B04E28 on card    #fffdf9 = 5.21:1   (≥ 4.5:1 ✓)
     The original --seal #C85A32 measures 3.92:1 / 4.16:1 — below AA for normal
     text, so --seal is now reserved for large/bold/decorative use only. */
  --seal-text: #B04E28;
  --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 40px; --space-5: 64px;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink);
  font-family: 'Source Sans 3', sans-serif; font-size: 16px; line-height: 1.6; }
.wrap { max-width: 1100px; margin: 0 auto; padding: var(--space-4) var(--space-3); }
header.site { border-bottom: 1px solid var(--ink); padding-bottom: var(--space-2); margin-bottom: var(--space-4);
  display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: var(--space-1); }
.brand { font-family: 'Playfair Display', serif; font-size: 1.5rem; font-weight: 700; color: var(--ink); text-decoration: none; }
.brand em { color: var(--seal); font-style: italic; }
h1 { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 2.6rem; line-height: 1.15; margin: 0 0 var(--space-3); }
h2 { font-family: 'Playfair Display', serif; font-weight: 600; font-size: 1.5rem; border-bottom: 1px solid var(--sand); padding-bottom: var(--space-1); }
h3 { font-family: 'Playfair Display', serif; font-weight: 600; font-size: 1.15rem; margin: var(--space-3) 0 var(--space-1); }
a { color: var(--seal-text); }
nav a { color: var(--ink); text-decoration: none; }
nav a:hover, nav a.active { color: var(--seal-text); }
.rule { border: 0; border-top: 1px solid var(--ink); margin: var(--space-4) 0; }
/* White on #B04E28 = 5.29:1 (white on #C85A32 was 4.23:1, short of AA for
   16px/600 text). */
.btn { display: inline-block; background: var(--seal-text); color: #fff; border: 0; cursor: pointer;
  font-family: 'Source Sans 3', sans-serif; font-size: 1rem; font-weight: 600;
  padding: 12px 28px; min-height: 44px; border-radius: 2px; text-decoration: none; }
.btn:hover { background: #a94a28; }
.btn-quiet { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.btn-quiet:hover { background: var(--sand); }
table.ledger { width: 100%; border-collapse: collapse; }
table.ledger th { text-align: left; font-weight: 600; font-size: .85rem; letter-spacing: .06em;
  text-transform: uppercase; color: #6d6455; padding: var(--space-1); border-bottom: 2px solid var(--ink); }
table.ledger td { padding: var(--space-2) var(--space-1); border-bottom: 1px solid var(--sand); vertical-align: top; }
.status { font-size: .85rem; padding: 3px 10px; border-radius: 2px; white-space: nowrap; }
.status.done { background: #e6efe6; color: #2c5e2e; }
.status.reading, .status.cleaning, .status.queued { background: var(--sand); color: var(--ink); }
.status.error { background: #f6e0da; color: #8c2f14; }
.status.verified { background: var(--ink); color: var(--paper); }
/* #6d6455 verified: 5.40:1 on --paper #F9F6F0, 5.73:1 on card #fffdf9 — passes
   AA (≥ 4.5:1) on both backgrounds; no change needed. */
.muted { color: #6d6455; font-size: .9rem; }
.dropzone { border: 1px dashed var(--ink); padding: var(--space-5) var(--space-3); text-align: center;
  border-radius: 2px; background: #fffdf9; }
.dropzone.drag { background: var(--sand); }
.kv th { text-align: left; color: #6d6455; font-weight: 400; padding: 4px 14px 4px 0; white-space: nowrap; vertical-align: top; }
.kv td { padding: 4px 0; }
.flag { display: flex; gap: 10px; align-items: flex-start; padding: 10px 8px; border-bottom: 1px solid var(--sand); }
.flag input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--seal); cursor: pointer; }
.flag b { background: #fbeedb; padding: 0 4px; cursor: zoom-in; }
.flag.confirmed b { background: #e6efe6; }
.extract { display: none; width: 100%; height: 110px; border: 1px solid var(--sand); margin: 6px 0 2px;
  background-repeat: no-repeat; border-radius: 2px; }
.extract.open { display: block; }
/* Per-field source receipts: any extracted value with a recorded source region
   is a real button that opens the same .extract crop the flags use. Quiet
   styling (dotted underline, not the amber flag highlight) — the flags list
   stays the loud "check these first" queue. */
.fieldsrc { font: inherit; color: inherit; background: none; border: 0; text-align: left;
  padding: 10px 2px; min-height: 44px; cursor: zoom-in;
  text-decoration: underline dotted; text-underline-offset: 3px; }
.fieldsrc:hover { background: #fbeedb; }
.fieldsrc:focus-visible, .valbtn:focus-visible { outline: 2px solid var(--seal-text); outline-offset: 1px; }
.cols { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-4); align-items: start; }
@media (max-width: 900px) { .cols { grid-template-columns: 1fr; } }
.pageimg { width: 100%; border: 1px solid var(--sand); }
.spin { width: 16px; height: 16px; border: 2px solid var(--sand); border-top-color: var(--seal);
  border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation: none; } }
footer { margin-top: var(--space-5); border-top: 1px solid var(--sand); padding-top: var(--space-2);
  font-size: .85rem; color: #6d6455; }

/* review — Document Story */
.story { font-family: 'Playfair Display', serif; font-size: 1.25rem; font-style: italic;
  line-height: 1.5; max-width: 52ch; margin: var(--space-1) 0 var(--space-2);
  padding-bottom: var(--space-2); border-bottom: 1px solid var(--sand); }
.fieldrow { display: flex; gap: var(--space-2); padding: 6px 0; border-bottom: 1px solid var(--sand); }
.fieldrow:last-child { border-bottom: 0; }
.fieldlabel { flex: 0 0 110px; color: var(--ink); font-weight: 600; }
.fieldlabel .legal { display: block; font-weight: 400; }
.fieldvalue { flex: 1; }
.legal { font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: #6d6455; }
details.disclosure { margin: var(--space-3) 0; }
details.disclosure summary { display: flex; align-items: center; min-height: 44px;
  color: var(--seal-text); font-weight: 600; cursor: pointer; list-style-position: inside; }
details.disclosure summary:hover { text-decoration: underline; }
details.disclosure pre { white-space: pre-wrap; font-size: .9rem; line-height: 1.55; margin: var(--space-1) 0 0;
  padding: var(--space-2); background: #fffdf9; border: 1px solid var(--sand); border-radius: 2px; }
details.imgpanel summary { display: flex; align-items: center; min-height: 44px;
  color: var(--seal-text); font-weight: 600; cursor: pointer; list-style-position: inside; }
@media (min-width: 901px) {
  /* desktop: the image column is always open, so hide its toggle */
  details.imgpanel summary { display: none; }
}
/* Mobile-only folds on the review page (same pattern as imgpanel: markup ships
   open, a script closes them below 900px, desktop hides the toggle entirely so
   the desktop layout is untouched). Keeps the default phone view near one
   screen: story + first fields lead; the rest opens on demand. */
details.mobilefold summary { display: flex; align-items: center; min-height: 44px;
  color: var(--seal-text); font-weight: 600; cursor: pointer; list-style-position: inside; }
details.mobilefold summary:hover { text-decoration: underline; }
@media (min-width: 901px) {
  details.mobilefold summary { display: none; }
}

/* landing */
.hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--space-5); align-items: center; margin: var(--space-5) 0; }
@media (max-width: 900px) { .hero { grid-template-columns: 1fr; } }
.hero h1 { font-size: 3.4rem; }
.hero .kicker { font-size: .85rem; letter-spacing: .14em; text-transform: uppercase; color: var(--seal-text); font-weight: 600; }
.hero-card { border: 1px solid var(--ink); background: #fffdf9; padding: var(--space-3); border-radius: 2px;
  box-shadow: 6px 6px 0 var(--sand); }
.hero-card .doc-line { border-bottom: 1px solid var(--sand); padding: 8px 0; display: flex; justify-content: space-between; gap: 8px; font-size: .92rem; }
.hero-card .doc-line b { background: #fbeedb; padding: 0 4px; }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); margin: var(--space-4) 0; }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); } }
.step { border-top: 2px solid var(--ink); padding-top: var(--space-2); }
.step .n { font-family: 'Playfair Display', serif; font-size: 2rem; color: var(--seal); font-style: italic; }
.pull { font-family: 'Playfair Display', serif; font-size: 1.7rem; font-style: italic; text-align: center;
  border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); padding: var(--space-3) 0; margin: var(--space-5) 0; }
/* "Built for the people who run title" — editorial prose, one column, hairline
   rules between paragraphs (charter principle 6: no feature grids). */
.people { max-width: 62ch; }
.people p { margin: 0; padding: var(--space-2) 0; border-top: 1px solid var(--sand); }
.people p:first-child { border-top: 0; padding-top: var(--space-1); }
.people .who { font-family: 'Playfair Display', serif; font-style: italic; font-size: 1.1rem; }

/* trace */
#stage { border: 1px solid var(--sand); background: #fffdf9; border-radius: 2px; width: 100%; height: 560px; cursor: grab; }
#stage:active { cursor: grabbing; }
.node rect { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; }
.node text { font-family: 'Source Sans 3', sans-serif; font-size: 14px; fill: var(--ink); font-weight: 600; }
.node.dim { opacity: .35; }
.edgepath { fill: none; stroke: var(--ink); stroke-width: 1.5; marker-end: url(#arrow); }
/* Dash carries instrument type; colour carries trust (charter principle 5). */
.edgepath.lease { stroke-dasharray: 6 5; }
/* Unverified: amber + heavier weight (weight is the extra non-colour cue).
   Declared before .sel so .sel's stroke-width still wins when both apply. */
.edgepath.unverified { stroke: var(--amber); stroke-width: 2; marker-end: url(#arrow-amber); }
.edgepath.sel { stroke-width: 3; }
/* Dimmed = filtered out of the current slice (never meaning on its own — the
   role=status count states it in words). Raised from .15 so dimmed labels stay
   legible against the paper. */
.edgepath.dim { opacity: .35; }
.edgelabel { font-family: 'Source Sans 3', sans-serif; font-size: 12px; fill: #6d6455; }
.edgelabel .ok { fill: var(--ink); }
/* Text amber darker still: 5.5:1 on the stage background (12px text). */
.edgelabel .uv { fill: #7a5a10; text-decoration: underline dotted; }
/* Year-axis labels are 13px text, so they get the full 4.5:1 text minimum.
   WCAG relative-luminance math (not eyeballed): #7f6e53 = 4.85:1 on the stage
   card #fffdf9 — the yearmarks render only inside #stage, whose background is
   #fffdf9, so that is their actual background — and 4.57:1 on --paper #F9F6F0
   as well, so the ratio holds even if the stage ever went transparent.
   (Previous #857458 was 4.46:1 on the stage, 0.04 short of AA.) */
.yearmark { font-family: 'Playfair Display', serif; font-size: 13px; fill: #7f6e53; }
/* Keyboard focus on SVG elements: CSS outline does not render on SVG children
   in all engines, so the ring is drawn with stroke changes + a drop-shadow
   halo instead (M1 keyboard operability). */
.edgepath:focus { stroke-width: 4; filter: drop-shadow(0 0 4px var(--seal-text)); outline: none; }
.edgelabel:focus { fill: var(--ink); filter: drop-shadow(0 0 3px var(--seal-text)); outline: none; }
.node:focus { outline: none; }
.node:focus rect { stroke: var(--seal-text); stroke-width: 3;
  filter: drop-shadow(0 0 3px var(--seal-text)); }
#stage:focus-visible { outline: 3px solid var(--seal-text); outline-offset: 2px; }
/* Zoom controls: keyboard/touch alternative to wheel zoom; 44px targets. */
.stagectl { display: flex; gap: 8px; margin: 0 0 var(--space-1); }
.zoombtn { min-width: 44px; min-height: 44px; padding: 0 12px; border: 1px solid var(--ink);
  background: #fffdf9; color: var(--ink); font: inherit; font-weight: 600; font-size: 1.15rem;
  border-radius: 2px; cursor: pointer; }
.zoombtn:hover { background: var(--sand); }
.zoombtn:focus-visible { outline: 2px solid var(--seal-text); outline-offset: 1px; }
.zoomreset { font-size: 1rem; }
#detail { border-left: 3px solid var(--seal); background: #fffdf9; padding: var(--space-2) var(--space-3); min-height: 90px; }
.verify-cta { display: inline-block; margin: 4px 0; padding: 4px 0 4px 10px;
  border-left: 3px solid var(--amber); color: var(--seal-text); font-weight: 600; }
.legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); font-size: .85rem; color: #6d6455; margin: var(--space-1) 0 var(--space-3); align-items: center; }
.legend .lg-title { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.legend span::before { content: ""; display: inline-block; width: 26px; height: 0; border-top: 2px solid #6d6455; margin-right: 6px; vertical-align: middle; }
.legend span.lg-dash::before { border-top-style: dashed; }
.legend span.lg-verified::before { border-top-color: var(--ink); }
.legend span.lg-unverified::before { border-top-color: var(--amber); border-top-width: 3px; }
.legend span.lg-unverified u { text-decoration: underline dotted var(--amber); }

/* trace — M5 filter bar, ownership ledger, cite link */
.filterbar { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: flex-start;
  border-top: 1px solid var(--sand); border-bottom: 1px solid var(--sand);
  padding: var(--space-2) 0; margin: 0 0 var(--space-2); }
.filterbar .ff { border: 0; padding: 0; margin: 0; min-width: 0; }
.filterbar label, .filterbar legend { display: block; font-weight: 600; font-size: .9rem;
  color: var(--ink); padding: 0; margin: 0 0 4px; }
.filterbar .legal { margin-left: 4px; }
.filterbar input, .filterbar select { min-height: 44px; padding: 0 10px; border: 1px solid var(--sand);
  background: #fffdf9; color: var(--ink); font: inherit; border-radius: 2px; }
.filterbar input:focus, .filterbar select:focus, .chip:focus, .citelink:focus {
  outline: 2px solid var(--seal); outline-offset: 1px; }
.filterbar .pairrow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.filterbar .pairrow .sub { font-weight: 400; font-size: .85rem; color: #6d6455; margin: 0; display: inline; }
.filterbar .num { width: 6.5em; }
#f-party { width: 15em; max-width: 100%; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { min-height: 44px; min-width: 44px; padding: 0 14px; border: 1px solid var(--ink);
  background: transparent; color: var(--ink); font: inherit; font-weight: 600;
  border-radius: 2px; cursor: pointer; }
/* On/off carries a glyph as well as colour (charter principle 5). */
.chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.chip[aria-pressed="true"]::before { content: "✓ "; }
.chip[aria-pressed="false"] { color: #6d6455; border-color: #6d6455; }
.filtermeta { display: flex; justify-content: space-between; align-items: baseline;
  flex-wrap: wrap; gap: var(--space-1) var(--space-2); margin: 0 0 var(--space-2); }
#filter-status { font-size: .9rem; color: var(--ink); }
.citelink { font-weight: 600; }
@media (max-width: 420px) { #f-party { width: 100%; } .filterbar { gap: var(--space-2); } }
.edgelabel.dim { opacity: .35; }
#detail .detail-h { margin-top: 0; font-size: 1.15rem; border-bottom: 0; padding-bottom: 0; }
#ownership { border: 1px solid var(--sand); background: #fffdf9; border-radius: 2px;
  padding: var(--space-2) var(--space-3); margin: var(--space-2) 0; }
#ownership .own-title { margin-top: 0; font-size: 1.3rem; border-bottom: 1px solid var(--sand);
  padding-bottom: var(--space-1); }
.ownsteps { margin: 0 0 var(--space-2); padding-left: 1.2em; }
.ownsteps li { padding: 6px 0 6px 10px; border-left: 3px solid transparent; }
/* Unverified steps: amber edge + the word "unverified", never colour alone. */
.ownsteps li.uv-step { border-left-color: var(--amber); }
.stepmeta { font-size: .85rem; color: #6d6455; }
.tag-ok { color: var(--ink); font-weight: 600; }
.tag-uv { background: #fbeedb; color: #7a5a10; padding: 0 6px; border-radius: 2px; font-weight: 600; }
.candidates { list-style: none; padding: 0; margin: 0 0 var(--space-2); }
.candidates li { padding: 4px 0; border-bottom: 1px solid var(--sand); }
.candidates li:last-child { border-bottom: 0; }
#ownership .caveat { margin: 0; }
/* Honesty notes from the ownership engine, under the caveat. */
#ownership .ownnote { margin: 4px 0 0; }
/* Possible missing links: amber-accented suggestions, never assertions.
   The "?" glyph + words carry the meaning, never colour alone. */
#ownership .gaps-h { display: flex; align-items: center; gap: 8px;
  margin: var(--space-3) 0 var(--space-1); border-bottom: 0; }
.gap-glyph { display: inline-flex; align-items: center; justify-content: center;
  flex: none; width: 20px; height: 20px; border: 2px solid var(--amber);
  border-radius: 50%; color: #7a5a10; font-family: 'Source Sans 3', sans-serif;
  font-size: .85rem; font-weight: 700; font-style: normal; }
.gaps { list-style: none; margin: 0; padding: 0; }
.gaps li { border-left: 3px solid var(--amber); padding: 6px 0 6px 10px; margin: 4px 0; }
.gap-suggest { display: block; }
#ownership .gapnote { margin: 4px 0 0; font-style: italic; }

/* trace — runsheet export links (quiet: the diagram stays the primary action) */
.metalinks { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2);
  align-items: baseline; }
/* 44px in BOTH dimensions — the short "CSV" link would otherwise be a 23px target. */
.metalinks .citelink { display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 44px; }
.quietlink { font-weight: 400; font-size: .9rem; }

/* trace — severance + net mineral acres (contract 3).
   Estate headings are structure, not decoration: each candidate list says in
   words which estate it answers for, so the two are never confusable. */
.estate-h { font-family: 'Playfair Display', serif; font-weight: 600; font-size: 1rem;
  margin: var(--space-2) 0 4px; }
.estatenote { margin: 0 0 4px; }
.sevsteps { list-style: none; margin: 0 0 var(--space-1); padding: 0; }
.sevsteps li { border-left: 3px solid var(--ink); padding: 4px 0 4px 10px; margin: 4px 0; }
/* The severance step inside the main ledger, marked by weight + edge, never
   colour alone (the narrative itself says "minerals severed from surface"). */
.ownsteps li.sev-step { border-left-color: var(--ink); font-weight: 600; }
.nma { color: #6d6455; font-size: .9rem; }
#ownership .acreline { margin: 4px 0 var(--space-1); }

/* trace detail panel — defect observations (contract 2) + working notes.
   Amber edge plus the "!" glyph and the words "Possible defects — review":
   an observation queue, never an assertion. */
#detail .defects, #detail .worknotes { border-left: 3px solid var(--amber);
  padding-left: 10px; margin: var(--space-1) 0; }
#detail .worknotes { border-left-color: var(--sand); }
#detail .defects-h { display: flex; align-items: center; gap: 8px; font-size: 1rem;
  margin: 0 0 4px; border-bottom: 0; }
#detail .defectlist, #detail .notelist { list-style: none; margin: 0; padding: 0; }
#detail .defectlist li, #detail .notelist li { padding: 2px 0; }
#detail .defectnote { margin: 4px 0 0; font-style: italic; }

/* trace detail panel — source snippets ("Where it says this").
   The review page's receipt idea on the diagram: a cropped window onto the
   scanned page showing the words behind the selected conveyance. Same crop
   technique and same quiet framing as .extract, just smaller and side by side.
   Only ever rendered for the selected edge, and only where the reading recorded
   a source region — never a placeholder for one it did not. */
#detail .receipts { margin: var(--space-2) 0 0; padding-top: var(--space-1);
  border-top: 1px solid var(--sand); }
#detail .receipts-h { font-size: 1rem; margin: 0 0 6px; border-bottom: 0; }
.receiptrow { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 6px; }
/* The whole card is the target: 220x116 clears 44px in both dimensions. */
.receipt { display: block; width: 220px; max-width: 100%; min-height: 44px;
  color: var(--ink); text-decoration: none; }
.receipt .snip { display: block; height: 72px; border: 1px solid var(--sand);
  border-radius: 2px; background-color: #fffdf9; background-repeat: no-repeat; }
.receipt .receipt-label { display: block; padding: 6px 2px; font-size: .9rem;
  font-weight: 600; line-height: 1.35; }
.receipt:hover .snip { border-color: var(--ink); }
.receipt:hover .receipt-label { text-decoration: underline; }
.receipt:focus-visible { outline: 2px solid var(--seal-text); outline-offset: 2px; }
#detail .receiptnote { margin: 0; font-style: italic; }
@media (max-width: 520px) { .receipt { width: 100%; } }

/* matters home — editorial ledger of matters */
.mattername { font-family: 'Playfair Display', serif; font-style: italic; font-size: 1.05rem;
  color: #6d6455; margin-left: var(--space-2); }
.archived-banner { border: 1px solid var(--sand); background: #fffdf9; color: var(--ink);
  padding: 10px 14px; margin: calc(-1 * var(--space-3)) 0 var(--space-3); font-size: .95rem; }
.newmatter { margin: var(--space-2) 0 0; }
/* summary-as-button: keep the one primary action, keyboard operable natively */
.newmatter > summary { list-style: none; width: fit-content; }
.newmatter > summary::-webkit-details-marker { display: none; }
.newmatter > summary:focus-visible { outline: 2px solid var(--seal-text); outline-offset: 2px; }
.newmatter-form { margin: var(--space-2) 0 0; padding: var(--space-2) var(--space-3);
  border: 1px solid var(--sand); background: #fffdf9; border-radius: 2px;
  display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: flex-end; }
.mf-field label { display: block; font-weight: 600; font-size: .9rem; margin: 0 0 4px; }
.mf-field input { font: inherit; min-height: 44px; padding: 0 10px; border: 1px solid var(--ink);
  background: #fff; color: var(--ink); border-radius: 2px; width: 16em; max-width: 100%; }
.mf-field input:focus-visible { outline: 2px solid var(--seal-text); outline-offset: 1px; }
/* quiet per-row folds (rename, archived list) */
details.rowfold { font-size: .9rem; margin-top: 2px; }
details.rowfold summary { display: inline-flex; align-items: center; min-height: 44px;
  color: var(--seal-text); cursor: pointer; font-weight: 400; }
details.rowfold summary:hover { text-decoration: underline; }
details.rowfold summary:focus-visible { outline: 2px solid var(--seal-text); outline-offset: 1px; }
.renameform { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 4px 0; }
.renameform input[type="text"] { font: inherit; min-height: 44px; padding: 0 10px;
  border: 1px solid var(--ink); background: #fff; border-radius: 2px; width: 14em; max-width: 100%; }
.renameform input[type="text"]:focus-visible { outline: 2px solid var(--seal-text); outline-offset: 1px; }
details.archivedfold summary { display: flex; align-items: center; min-height: 44px;
  color: #6d6455; font-weight: 600; cursor: pointer; list-style-position: inside; }
details.archivedfold summary:hover { color: var(--ink); }
details.archivedfold summary:focus-visible { outline: 2px solid var(--seal-text); outline-offset: 1px; }
/* screen-reader-only labels (matters rename fields) */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; }

/* belonging hint — informational line under a document name; never a block.
   .errhelp visual weight but quieter tone: hairline seal edge, no alarm colours. */
.belonghint { margin: 6px 0 2px; font-size: .9rem; color: var(--ink); max-width: 34em;
  font-style: italic; padding-left: 10px; border-left: 3px solid var(--sand); }
.belonghint-glyph { font-style: normal; color: var(--seal-text); margin-right: 4px; }

/* guardrail notices — the limit page, the running usage line, the admin form.
   Editorial calm (charter principle 6): a sentence and a way forward, never an
   alarm and never a countdown pressuring anyone to hurry. */
.notice { max-width: 56ch; }
.notice-lead { font-family: 'Playfair Display', serif; font-size: 1.25rem;
  font-style: italic; line-height: 1.5; margin: 0 0 var(--space-2);
  padding-bottom: var(--space-2); border-bottom: 1px solid var(--sand); }
.notice-detail { margin: 0 0 var(--space-3); max-width: 52ch; }
.notice-actions { margin: 0 0 var(--space-3); }
/* Quiet running total under the dropzone: information, not pressure. */
.usageline { color: #6d6455; font-size: .9rem; margin: var(--space-2) 0 0; }
/* .upmsg is shared by the upload zone and the admin code form. */
.upmsg { border: 1px solid #8c2f14; background: #f6e0da; color: #8c2f14;
  padding: 10px 14px; margin: 10px 0 0; }
.adminform { display: flex; flex-wrap: wrap; gap: var(--space-2);
  align-items: flex-end; margin: var(--space-2) 0; }
.adminform input { font: inherit; min-height: 44px; padding: 0 10px;
  border: 1px solid var(--ink); background: #fff; color: var(--ink);
  border-radius: 2px; width: 16em; max-width: 100%; }
.adminform input:focus-visible { outline: 2px solid var(--seal-text); outline-offset: 1px; }