/* register.css — AT-A-GLANCE-1 (R-328). The register's own page rules, and
 * nothing that canon.css already holds (S-1: a page never duplicates a token).
 *
 * WHAT WENT WRONG ON R-327, in the Chairman's words on 20 September: "This
 * looks amateur — I wanted it to look like the website — where are the grid
 * with bronze lines, the H1 style etc?" The register had borrowed the site's
 * TOKENS and none of its LAYOUT. So every structural rule below is COPIED,
 * not approximated, out of the site's own paper-register page, and the source
 * line is named on each block:
 *
 *   SOURCE: website/ark-theme-v2/page-institutions.hbs  (418 lines, the paper
 *           register; its <style> block is lines 15-165)
 *   SOURCE: website/ark-theme-v2/page-registry.hbs      (959 lines; the
 *           sealed-entries ledger rows, lines 57-66, recoloured for paper)
 *
 * The register is the PAPER register (ruled 19 September), so where
 * page-registry.hbs reads --machine-*, the paper page's own --ink / --rule /
 * --bronze-paper stand in its place — which is exactly what
 * page-institutions.hbs does with the same mechanism.
 * ======================================================================== */

/* ---- THE SPINE — page-institutions.hbs:27-45, verbatim -------------------
   Segments abut with zero vertical section padding; all spacing lives inside
   the cells, so the bronze grid rules run unbroken and always meet the bronze
   divider above and below. */
body { --pcol-pad: 48px; }   /* cell inset from the grid rules */
.pgrid { display: grid; grid-template-columns: minmax(0,1fr) min(100%,854px) minmax(0,1fr); }
/* THE ONE DEVIATION FROM page-institutions.hbs, and it is deliberate.
   That page lets its hero BREAK the grid (DESIGN.md #7) — at >=1201px the hero
   column runs to the content's right edge and .hero-cell drops both vertical
   borders, so the bronze rules start below the hero. The Chairman's whole
   complaint on R-327 was "where are the grid with bronze lines", and the hero
   is the first thing he sees. So the register keeps the SPINE rule instead,
   which page-institutions.hbs states in its own header and then excepts: the
   bronze rules run UNBROKEN from the nav to the footer, every cell on the same
   two lines. The cost is that the display headline wraps inside the 854 cell,
   which is what every other display on the site already does ("Sovereign /
   Intelligence.", "For Institutions / That Must Hold / Their Own Record."). */
.pcol { border-left: 1px solid var(--bronze-paper-rule); border-right: 1px solid var(--bronze-paper-rule); padding: 0 var(--pcol-pad); min-width: 0; }
.pmargin { text-align: right; padding: 0 20px 0 0; font-family: var(--mono); font-size: 11px; line-height: 2; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.pmargin-r { text-align: left; padding: 0 0 0 20px; font-family: var(--mono); font-size: 11px; line-height: 2; letter-spacing: .06em; color: var(--ink-2); text-transform: uppercase; }
/* the segment divider is FULL PAGE WIDTH (1px bronze) — lives on the section
   border, not the 854 cell, so it spans edge to edge; the vertical grid rules run
   the full segment height and meet it top and bottom. */
.seg { position: relative; border-bottom: 1px solid var(--bronze-paper-rule); }
.seg-last { border-bottom: 0; }   /* footer's own border-top is the final divider */

/* section head rule (mono label + meta, 2px ink underscore) — page-institutions.hbs:47-49,
   verbatim; the black rule bleeds to the grid lines */
.phead { display: flex; justify-content: space-between; align-items: flex-end; border-bottom: var(--stroke-heavy) solid var(--ink); margin: 0 calc(-1 * var(--pcol-pad)); padding: 0 var(--pcol-pad) 14px; font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.phead .meta { font-size: 11px; color: var(--ink-2); letter-spacing: .08em; }
/* a link in a section-head's meta reads as one — canon.css's .btn-link
   bronze underscore, at the meta's own size */
.phead .meta a { color: var(--ink-2); border-bottom: 1px solid var(--bronze-paper-rule); padding-bottom: 2px; }
.phead .meta a:hover { color: var(--bronze-paper); }
.phead .meta code { font-family: var(--mono); color: var(--bronze-paper); }

/* THE POP TEMPLATE — page-institutions.hbs:52, verbatim. The lede under a display. */
.p-pop { font-size: var(--f-deck); font-weight: var(--w-deck); line-height: var(--lh-deck); letter-spacing: var(--ls-deck); color: var(--ink); max-width: 28em; margin: 0; }

/* ---- HERO — page-institutions.hbs:55-62, verbatim (class names kept) ---- */
.seg-hero { overflow: hidden; background: var(--paper); }
.seg-hero .wrap { position: relative; z-index: 1; }
.seg-hero .wm-bg { position: absolute; inset: 0; z-index: 0; display: flex; align-items: center; pointer-events: none; overflow: hidden; }
.seg-hero .wm-bg span { font-family: var(--mono); white-space: nowrap; font-size: clamp(140px,22vw,340px); color: var(--stone); opacity: .6; line-height: .9; transform: translateX(-6%); }
.hero-cell { padding: 112px var(--pcol-pad) 96px; }   /* borders kept — see THE ONE DEVIATION above */
.hero-meta { padding-top: 114px; line-height: 1.3; }
.reg-h1 { font-size: var(--f-display); font-weight: var(--w-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); margin: 0 0 40px; }
.hero-cell .eyebrow { margin-bottom: 44px; }

/* ---- THE CHECK — the drop zone, inside the grid cell -------------------- */
.check-ledgerhead { padding: 88px var(--pcol-pad) 8px; }
.check-cell { padding: 40px var(--pcol-pad) 88px; }
.check-row .pmargin { padding-top: 46px; line-height: 1.3; }
.check-row .pmargin-r { padding-top: 46px; line-height: 1.3; }
/* The drop zone is a framed proof container on the paper container ground —
   canon.css's own .frame idiom (a hairline bronze border), never a dashed
   browser default. It sits INSIDE the .pcol, framed by the grid rules. */
#drop { border: 1px solid var(--bronze-paper-rule); background: var(--paper-container); padding: 56px 32px; text-align: center; }
#drop.over { background: var(--paper); box-shadow: inset 0 0 0 2px var(--bronze-paper-rule); }
#drop .drop-prompt { font-size: var(--f-pull); font-weight: var(--w-pull); line-height: var(--lh-pull); color: var(--ink); margin: 0 0 1.4rem; }
#drop .drop-picker { font-family: var(--mono); font-size: var(--m-data); letter-spacing: .03em; color: var(--ink-2); margin: 0; }
#drop input[type=file] { font-family: var(--mono); font-size: 12px; margin-top: .9rem; color: var(--ink-2); }
/* the picker's own button, in the house's secondary (bronze-stroke) shape
   rather than the browser's — canon.css .btn-secondary, at the label's size */
#drop input[type=file]::file-selector-button {
  font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .05em;
  background: none; color: var(--ink); border: 1px solid var(--bronze-paper-rule);
  border-radius: 0; padding: 7px 14px; margin-right: .8rem; cursor: pointer;
}
#drop input[type=file]::file-selector-button:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ---- THE RESULT — a phead whose label IS the verdict, then ledger rows ---
   SOURCE: page-registry.hbs:57-66 (.entry-cell and its siblings), recoloured
   for the paper register. The verdict heads the rows the way "Sealed entries"
   heads the registry's own table. */
#result { margin: 0; }
/* The verdict is the section head's label, so it must NOT inherit the head's
   mono/uppercase/12px — it is a SENTENCE, and a sentence on this site is never
   mono (R-300). Scoped by the class, never by #result: /verify/<hash> renders
   the same heading in the same .phead with no id above it, and that is how it
   came out 52px mono uppercase the first time.
   scroll-margin clears the sticky nav when front.js scrolls it into view. */
.phead .verdict {
  scroll-margin-top: 96px;
  font-family: var(--serif); font-size: var(--f-pull); font-weight: var(--w-pull);
  line-height: var(--lh-pull); letter-spacing: 0; text-transform: none;
  color: var(--ink); margin: 0; max-width: 34em;
}
#result .phead, .result .phead { align-items: baseline; }
#result .phead .meta { white-space: nowrap; }
#result p { font-family: var(--mono); font-size: var(--m-data); letter-spacing: .03em; line-height: 1.8; color: var(--ink-2); margin: 1.1rem 0 0; }
#result dl { display: grid; grid-template-columns: 9rem minmax(0,1fr); gap: 0; margin: 1.6rem 0 0; font-family: var(--mono); font-size: 12px; letter-spacing: .03em; }
#result dt { border-top: 1px solid var(--rule); padding: .95rem 0; color: var(--bronze-paper); text-transform: uppercase; }
#result dd { border-top: 1px solid var(--rule); padding: .95rem 0; margin: 0; color: var(--ink-2); word-break: break-all; }
/* The one red on this register: the note really has changed since it was
   sealed. Broken or unsigned cryptographic states are --dead-grey, never red
   and never green (canon.css's own two state tokens, and its only two). */
#result.changed .verdict, .result.changed .verdict { color: var(--error); }
#result.changed dt, .result.changed .kv dt { color: var(--error); }
#result.voided .verdict, #result.no-match .verdict,
.result.voided .verdict, .result.no-match .verdict { color: var(--dead-grey); }
#result.voided dt, #result.no-match dt,
.result.voided .kv dt, .result.no-match .kv dt { color: var(--dead-grey); }
.btn-check-another { display: inline-block; margin-top: 2.2rem; font-family: var(--mono); font-size: var(--m-label); letter-spacing: .04em; background: none; border: 0; border-bottom: 1px solid var(--bronze-paper-rule); padding: 0 0 3px; color: var(--ink); cursor: pointer; }
.btn-check-another:hover { color: var(--bronze-paper); }

/* Focus is bronze on this paper, never the browser's blue. R-327 carried this
   in style.css; canon.css has no focus rule of its own, so it lives here. */
:focus-visible { outline: 2px solid var(--bronze-paper); outline-offset: 3px; }

/* ---- THE CLAIMS — a ruled ledger list, never browser bullets ------------
   SOURCE: page-institutions.hbs:129-131 (.term-row), paper colours. */
.claims-cell { padding: 88px var(--pcol-pad) 96px; }
.claims-cell .eyebrow { margin-bottom: 1.8rem; }
.claim-row { display: grid; grid-template-columns: 2.6rem minmax(0,1fr); gap: 1.2rem; border-top: 1px solid var(--rule); padding: 1.1rem 0; }
.claim-row .n { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--bronze-paper); }
.claim-row .body { font-size: 18px; line-height: 1.6; color: var(--ink); margin: 0; }

/* ---- THE HASH FORM — the side door, on the public record ---------------- */
.record-cell { padding: 88px var(--pcol-pad) 104px; }
form.hash { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; margin: 2rem 0 0; }
form.hash label { flex: 1 1 100%; font-family: var(--mono); font-size: var(--m-data); letter-spacing: .03em; color: var(--ink-2); }
form.hash input {
  flex: 1 1 26rem;
  /* The HTML size="64" attribute gives the input an intrinsic min-content
     width flexbox won't shrink below on its own (min-width defaults to
     auto) — this is what overflowed 390px on R-327. Kept. */
  min-width: 0;
  font-family: var(--mono); font-size: var(--m-data); letter-spacing: .03em;
  padding: 15px 14px; border: 1px solid var(--rule); border-radius: 0;
  background: var(--paper); color: var(--ink);
}
form.hash input:focus-visible { outline: 2px solid var(--bronze-paper); outline-offset: 1px; }

/* ---- /key and /verify/<hash> — the same frame, their own cells ---------- */
.plain-cell { padding: 88px var(--pcol-pad) 104px; }
.plain-cell .eyebrow { margin-bottom: 1.8rem; }
.plain-cell h2:not(.verdict) { font-size: var(--f-title); font-weight: var(--w-title); line-height: var(--lh-title); letter-spacing: var(--ls-title); margin: 2.4rem 0 1rem; }
.plain-cell p { font-size: 18px; line-height: 1.7; color: var(--ink-2); max-width: 62ch; margin: 0 0 1.1rem; }
.plain-cell p.mono { font-family: var(--mono); font-size: var(--m-data); letter-spacing: .03em; word-break: break-all; color: var(--ink); }
.kv { display: grid; grid-template-columns: 9rem minmax(0,1fr); gap: 0; margin: 1.6rem 0 0; font-family: var(--mono); font-size: 12px; letter-spacing: .03em; }
.kv dt { border-top: 1px solid var(--rule); padding: .95rem 0; color: var(--bronze-paper); text-transform: uppercase; }
.kv dd { border-top: 1px solid var(--rule); padding: .95rem 0; margin: 0; color: var(--ink-2); word-break: break-all; }
.keypem { background: var(--paper-container); border: 1px solid var(--rule); padding: 20px 18px; overflow-x: auto; margin: 1.8rem 0 0; }
.keypem pre { margin: 0; font-family: var(--mono); font-size: 12px; line-height: 1.8; color: var(--ink-2); white-space: pre; }
/* The neutral not-on-record state. A stranger's own seal is never on this
   register by decision (Ruling A, 8 Sep), so its absence is not evidence and
   is never drawn in red. */
.result.not-on-record .verdict { color: var(--ink); }
.timeline { list-style: none; padding: 0; margin: 1.6rem 0 0; font-family: var(--mono); font-size: 12px; letter-spacing: .03em; }
.timeline li { border-top: 1px solid var(--rule); padding: .95rem 0; color: var(--ink-2); display: flex; gap: 1.2rem; flex-wrap: wrap; }
.timeline .v { color: var(--bronze-paper); }
.timeline .h { color: var(--ink); }

/* ---- the vertical proof-rail (wide screens only) — page-institutions.hbs:145 */
.reg-rail { position: fixed; right: 10px; top: 50%; transform: translateY(-50%) rotate(180deg); writing-mode: vertical-rl; font-family: var(--mono); font-size: 11px; letter-spacing: .2em; color: var(--ink-2); opacity: .55; z-index: 5; pointer-events: none; }

/* ---- RESPONSIVE — page-institutions.hbs:147-163, the site's own breakpoints */
@media (max-width: 1200px) {
  body { --pcol-pad: calc(var(--edge) + var(--gutter)); }
  .pgrid { grid-template-columns: 1fr; }
  .pmargin, .pmargin-r, .reg-rail { display: none; }
  .pcol { border-left: 0; border-right: 0; }   /* no vertical rules at mobile; dividers stay */
}
@media (max-width: 900px) {
  .claim-row { grid-template-columns: 1fr; gap: .3rem; }
  #result dl, .kv { grid-template-columns: 1fr; }
  #result dt, .kv dt { padding-bottom: 0; border-top-width: 1px; }
  #result dd, .kv dd { border-top: 0; padding-top: .3rem; }
}
@media (max-width: 640px) {
  .hero-cell { padding: 64px var(--pcol-pad) 56px; }
  .check-cell { padding: 32px var(--pcol-pad) 56px; }
  .claims-cell, .record-cell, .plain-cell { padding: 56px var(--pcol-pad) 64px; }
  #drop { padding: 36px 20px; }
  form.hash input { flex-basis: 100%; }
}