/*
  Stylesheet for the wa-antidelete portal: fonts, tokens, running head,
  the capture log, capture detail, cover sheets, tables, and responsive rules.
*/

@font-face {
  font-family: "Literata";
  src: url("/static/fonts/literata-normal.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Literata";
  src: url("/static/fonts/literata-italic.woff2") format("woff2");
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("/static/fonts/archivo-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("/static/fonts/archivo-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: italic;
  font-display: swap;
}

:root {
  --paper: #fbf8f1;
  --paper-deep: #f4efe4;
  --paper-edge: #ece5d6;
  --ink: #1c1a17;
  --ink-soft: #46423b;
  --margin: #6b6559;
  --margin-soft: #8d867a;
  --rule: #d8d0bf;
  --rule-soft: #e6dfd0;
  --red: #b3261e;
  --red-deep: #8e1d17;
  --red-wash: rgba(179, 38, 30, 0.10);
  --red-wash-strong: rgba(179, 38, 30, 0.18);
  --serif: "Literata", "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, "Noto Naskh Arabic", serif;
  --sans: "Archivo", "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --measure: 72ch;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --head-h: 3.5rem;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--margin-soft) var(--paper-deep); scrollbar-width: thin; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.5;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  caret-color: var(--red);
  min-height: 100dvh;
}
::selection { background: var(--red-wash-strong); color: var(--ink); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--paper-deep); }
::-webkit-scrollbar-thumb { background: var(--margin-soft); border: 2px solid var(--paper-deep); border-radius: 6px; }
a { color: inherit; text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 0.16em; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--red); }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 2px; }
.num { font-family: var(--sans); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.dim { color: var(--margin); }
s, .strike { text-decoration: none; }
img, video { max-width: 100%; height: auto; display: block; }
button, input, select { font: inherit; color: inherit; }
h1, h2, h3 { font-weight: 500; margin: 0; text-wrap: balance; }

/* Running head */
.head {
  position: sticky;
  top: 0;
  z-index: 10;
  height: var(--head-h);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.5rem;
  padding: 0 1.5rem;
  background: var(--red);
  color: var(--paper);
  font-family: var(--sans);
  font-stretch: 88%;
  border-bottom: 1px solid var(--red-deep);
}
.head a { text-decoration: none; }
.head-mark { display: flex; align-items: baseline; gap: 0.6rem; }
.head-title { font-weight: 700; letter-spacing: 0.01em; font-size: 1.05rem; }
.head-sub { font-weight: 400; font-style: italic; font-family: var(--serif); font-size: 0.9rem; opacity: 0.85; }
.head-count { display: flex; align-items: baseline; gap: 0.45rem; font-size: 0.95rem; }
.head-count .num { font-weight: 700; font-size: 1.15rem; font-stretch: 100%; }
.head-count-label { opacity: 0.9; }
.head-count-recent { margin-left: 0.6rem; padding-left: 0.8rem; border-left: 1px solid rgba(251, 248, 241, 0.4); opacity: 0.9; }
.head-count-recent .num { font-size: 0.95rem; font-weight: 600; }
.head-nav { display: flex; align-items: center; gap: 1.25rem; font-size: 0.92rem; font-weight: 500; }
.head-nav a { padding: 0.3rem 0; border-bottom: 1.5px solid transparent; display: inline-flex; align-items: center; gap: 0.4rem; }
.head-nav a[aria-current="page"] { border-bottom-color: var(--paper); }
.head-nav a:hover { border-bottom-color: rgba(251, 248, 241, 0.6); }
.head-signout button { background: none; border: 1px solid rgba(251, 248, 241, 0.55); color: inherit; padding: 0.3rem 0.7rem; border-radius: 2px; cursor: pointer; font-size: 0.85rem; font-stretch: 92%; }
.head-signout button:hover { background: rgba(251, 248, 241, 0.12); }
.pip { width: 0.5rem; height: 0.5rem; border-radius: 50%; display: inline-block; background: var(--paper); }
.pip-down { background: transparent; border: 1.5px solid var(--paper); }

/* Proof layout */
.proof-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(14rem, 16rem);
  gap: 3rem;
  max-width: 82rem;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 6rem;
}
.legend { position: sticky; top: calc(var(--head-h) + 1.5rem); align-self: start; font-family: var(--sans); font-size: 0.9rem; color: var(--margin); }
.legend-title, .record-title, .panel-title { font-family: var(--sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--margin); }
.marks { list-style: none; margin: 0.6rem 0 1.6rem; padding: 0; border-top: 1px solid var(--rule); }
.marks a { display: grid; grid-template-columns: 3.2rem 1fr auto; align-items: center; gap: 0.6rem; padding: 0.55rem 0; border-bottom: 1px solid var(--rule); text-decoration: none; color: var(--ink-soft); }
.marks a:hover { color: var(--ink); }
.marks a[aria-current="true"] { color: var(--red); }
.marks a[aria-current="true"] .mark-name::after { content: " (on)"; font-size: 0.8em; }
.mark-sample { font-family: var(--serif); color: var(--ink); justify-self: start; }
.mark-strike { color: var(--margin-soft); display: inline-flex; }
.mark-strike svg { display: block; }
.mark-strike-line { color: var(--red); }
.marks a .mark-sample.caret { color: var(--red); }
.mark-ring { color: var(--red); display: inline-flex; }
.mark-ring svg { display: block; }
.legend-bot-live { color: var(--margin); }
.legend-bot-stale, .legend-bot-disconnected { color: var(--red); }
.mark-name { font-weight: 500; }
.mark-count { color: var(--margin); }

.filters { border-bottom: 1px solid var(--rule); padding-bottom: 1rem; }
.filters summary { list-style: none; cursor: pointer; display: flex; gap: 0.5rem; align-items: center; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.4rem 0; }
.filters summary:hover { color: var(--ink); }
.filters-clear { margin-left: auto; }
.filters summary::-webkit-details-marker { display: none; }
.filters-toggle { color: var(--red); display: inline-flex; }
.filters-toggle svg { display: block; }
.filters[open] .tog-v { display: none; }
.filters-clear { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--red); }
.filter-form { display: grid; gap: 0.8rem; padding-top: 0.6rem; }
.field { display: grid; gap: 0.25rem; }
.field-label { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--margin); font-weight: 600; }
.field-hint { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--margin-soft); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
input[type="text"], input[type="search"], input[type="password"], input[type="date"], select {
  width: 100%;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 0.5rem 0.6rem;
  font-family: var(--sans);
  font-size: 0.95rem;
  color: var(--ink);
  transition: border-color 160ms var(--ease-out);
}
input::placeholder { color: var(--margin-soft); opacity: 1; }
input:focus, select:focus { border-color: var(--red); outline: none; box-shadow: 0 0 0 3px var(--red-wash); }
select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236b6559' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.6rem center; padding-right: 1.8rem; }
.btn {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.55rem 1rem;
  border: 1px solid var(--ink);
  border-radius: 2px;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  transition: background-color 160ms var(--ease-out), color 160ms var(--ease-out), border-color 160ms var(--ease-out);
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn-primary { background: var(--red); border-color: var(--red); color: var(--paper); }
.btn-primary:hover { background: var(--red-deep); border-color: var(--red-deep); }
.btn-danger { border-color: var(--red); color: var(--red); background: transparent; }
.btn-danger:hover { background: var(--red); color: var(--paper); }
.btn-small { padding: 0.3rem 0.6rem; font-size: 0.8rem; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.legend-foot { margin-top: 1.2rem; font-size: 0.82rem; line-height: 1.5; color: var(--margin); }
.legend-foot p { margin: 0 0 0.5rem; }

/* Proof column */
.proof-page { min-width: 0; max-width: calc(var(--measure) + 16rem); }
.dayrule {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--margin);
  display: grid;
  grid-template-columns: 13rem 1fr;
  align-items: center;
  margin: 2.6rem 0 0.4rem;
}
.dayrule:first-child { margin-top: 0; }
.dayrule span { grid-column: 2; padding-bottom: 0.4rem; border-bottom: 1px solid var(--ink); }

.cap {
  display: grid;
  grid-template-columns: 13rem minmax(0, 1fr);
  gap: 0 0;
  border-bottom: 1px solid var(--rule-soft);
  position: relative;
}
.cap-margin {
  font-family: var(--sans);
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--margin);
  padding: 1.1rem 1.25rem 1.1rem 0;
  display: grid;
  align-content: start;
  gap: 0.15rem;
  border-right: 1px solid var(--rule-soft);
}
.cap-mark { font-family: var(--serif); font-style: italic; font-size: 0.95rem; color: var(--margin); margin-bottom: 0.2rem; transition: color 180ms var(--ease-out); }
.cap:hover .cap-mark, .cap:focus-within .cap-mark { color: var(--red); }
.cap-sender { text-decoration: none; display: grid; }
.cap-name { color: var(--ink); font-weight: 600; font-size: 0.9rem; }
.cap-number { font-size: 0.78rem; }
.cap-chat { color: var(--margin); }
.cap-chat-kind { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; }
.cap-time { color: var(--ink-soft); margin-top: 0.35rem; }
.cap-lived { font-size: 0.76rem; }
.cap-lived-unknown { font-style: italic; }
.cap-body {
  display: block;
  padding: 1rem 0 1.15rem 1.5rem;
  text-decoration: none;
  color: var(--ink);
  font-size: 1.06rem;
  line-height: 1.55;
  max-width: var(--measure);
  transition: background-color 180ms var(--ease-out);
  position: relative;
}
.cap:hover .cap-body, .cap:focus-within .cap-body { background: var(--paper-deep); }
.proof { white-space: pre-wrap; overflow-wrap: anywhere; }
.proof[dir="rtl"] { display: inline-block; text-align: right; font-size: 1.15em; line-height: 1.7; }
.proof-absent { font-style: italic; color: var(--margin); }

/* The strike: drawn once, lifted on hover */
s.proof, s.react-old {
  position: relative;
  text-decoration: none;
  background-image: linear-gradient(var(--red), var(--red));
  background-repeat: no-repeat;
  background-size: 100% 2px;
  background-position: 0 58%;
  animation: strike-draw 700ms var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 28ms + 120ms);
  transition: background-size 220ms var(--ease-out), color 220ms var(--ease-out);
  color: var(--ink-soft);
  padding: 0 0.05em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
@keyframes strike-draw { from { background-size: 0% 2px; } to { background-size: 100% 2px; } }
.cap:hover s.proof, .cap:focus-within s.proof, .exhibit s.proof:hover { background-size: 100% 1px; background-position: 0 100%; color: var(--ink); }
.caret { color: var(--red); display: inline-block; vertical-align: -0.1em; margin: 0 0.15em 0 0.35em; }
.caret svg { display: inline-block; }
ins.proof-ins { text-decoration: none; color: var(--red); font-style: italic; }
ins.proof-ins.proof-absent { color: var(--margin); }
.proof-context { color: var(--ink); }
.react { display: inline-flex; align-items: center; gap: 0.2rem; margin-left: 0.6rem; font-size: 1.15em; vertical-align: middle; }
.react-old { color: var(--ink-soft); }
.ring { display: inline-grid; place-items: center; min-width: 1.9em; height: 1.9em; padding: 0 0.35em; border: 1.5px solid var(--red); border-radius: 999px; color: var(--ink); font-size: 0.95em; font-family: var(--sans); }
.flag { display: inline-block; margin-left: 0.6rem; font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--red); border: 1px solid var(--red); padding: 0.1rem 0.4rem; border-radius: 2px; vertical-align: middle; }

/* Media plates */
.plate { position: relative; display: inline-block; margin: 0.2rem 1rem 0.5rem 0; float: left; max-width: 11rem; }
.plate img { width: 100%; max-height: 9rem; object-fit: cover; border: 1px solid var(--rule); background: var(--paper-deep); }
.plate-label { display: inline-block; font-family: var(--sans); font-size: 0.8rem; padding: 0.45rem 0.7rem; border: 1px solid var(--rule); color: var(--ink-soft); background: var(--paper-deep); }
.plate-file { color: var(--margin); }
.plate-missing { float: none; }
.strike-plate { position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: var(--red); transform-origin: left; animation: plate-draw 700ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 28ms + 120ms); transition: opacity 220ms var(--ease-out); }
@keyframes plate-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.cap:hover .strike-plate { opacity: 0.25; }
.cap-body::after { content: ""; display: table; clear: both; }

.pager { display: flex; justify-content: space-between; align-items: center; margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--ink); font-family: var(--sans); font-size: 0.9rem; }
.pager a { text-decoration: none; font-weight: 600; }
.pager a:hover { color: var(--red); }
.pager-dead { color: var(--margin-soft); }
.empty { padding: 4rem 0 4rem 14.5rem; max-width: 40rem; color: var(--ink-soft); }
.empty-title { font-size: 1.4rem; margin: 0 0 0.6rem; color: var(--ink); }
.empty p { margin: 0 0 0.6rem; }

/* Detail */
.detail-layout, .page-layout { max-width: 52rem; margin: 0 auto; padding: 2rem 1.5rem 6rem; }
.crumbs { display: flex; gap: 0.6rem; align-items: baseline; font-family: var(--sans); font-size: 0.85rem; color: var(--margin); margin-bottom: 2rem; }
.crumbs a { text-decoration: none; color: var(--ink-soft); }
.crumbs a:hover { color: var(--red); }
.crumbs-sep { color: var(--rule); }
.crumbs-nav { margin-left: auto; display: flex; gap: 1rem; }
.crumbs-nav a { font-weight: 600; }
.exhibit-head { border-bottom: 1px solid var(--ink); padding-bottom: 1rem; margin-bottom: 1.6rem; }
.exhibit-line { font-size: 1.35rem; line-height: 1.35; margin: 0 0 0.4rem; text-wrap: pretty; }
.exhibit-who { font-weight: 600; text-decoration: none; }
.exhibit-who:hover { color: var(--red); }
.exhibit-line a:not(.exhibit-who) { text-decoration-color: var(--rule); }
.exhibit-when { margin: 0; font-family: var(--sans); font-size: 0.85rem; color: var(--margin); }
.exhibit-body { margin-bottom: 2.4rem; }
.exhibit-text { font-size: 1.3rem; line-height: 1.55; margin: 0 0 1rem; max-width: var(--measure); }
.exhibit s.proof { color: var(--ink-soft); }
.exhibit-media { margin: 0 0 1.4rem; }
.exhibit-media img, .exhibit-media video { max-height: 32rem; border: 1px solid var(--rule); background: var(--paper-deep); }
.exhibit-media audio { width: 100%; max-width: 30rem; }
.exhibit-media figcaption { font-family: var(--sans); font-size: 0.82rem; color: var(--margin); margin-top: 0.5rem; display: flex; gap: 1rem; align-items: baseline; }
.dl { font-weight: 600; color: var(--ink-soft); }
.exhibit-doc { font-family: var(--sans); padding: 0.8rem 1rem; border: 1px solid var(--rule); background: var(--paper-deep); display: inline-block; margin: 0; }
.exhibit-nomedia { font-style: italic; color: var(--margin); }
.exhibit-ins .caret { margin: 0 0.4rem 0 0; vertical-align: -0.15em; }
.exhibit-react { font-size: 1.6rem; display: flex; align-items: center; gap: 0.3rem; margin: 0; }
.exhibit-react .ring { font-size: 0.9em; }
.record, .history, .panel { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--rule); }
.record-list { display: grid; grid-template-columns: max-content 1fr; gap: 0.45rem 1.5rem; margin: 0.8rem 0 0; font-size: 0.95rem; }
.record-list dt { font-family: var(--sans); font-size: 0.8rem; color: var(--margin); padding-top: 0.15rem; }
.record-list dd { margin: 0; overflow-wrap: anywhere; }
.history-list { list-style: none; padding: 0; margin: 0.8rem 0 0; }
.history-list a { display: grid; grid-template-columns: 12rem 6rem 1fr; gap: 1rem; padding: 0.5rem 0; border-bottom: 1px solid var(--rule-soft); text-decoration: none; font-size: 0.92rem; }
.history-list a:hover { color: var(--red); }
.history-list time { font-size: 0.82rem; color: var(--margin); }
.history-kind { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--red); padding-top: 0.15rem; }
.history-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exhibit-foot { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--rule); display: flex; justify-content: flex-end; }
.confirm { border: 1px solid var(--ink); background: var(--paper); color: var(--ink); padding: 1.5rem; max-width: 24rem; border-radius: 2px; }
.confirm::backdrop { background: rgba(28, 26, 23, 0.35); }
.confirm-text { margin: 0 0 1.2rem; font-size: 1.05rem; }
.confirm-actions { display: flex; justify-content: flex-end; gap: 0.6rem; }

/* Pages: security, health */
.page-head { border-bottom: 1px solid var(--ink); padding-bottom: 1rem; margin-bottom: 0.5rem; }
.page-title { font-size: 1.8rem; }
.page-lede { margin: 0.4rem 0 0; color: var(--ink-soft); }
.verdict-live { color: var(--ink-soft); }
.verdict-disconnected, .verdict-stale { color: var(--red); }
.panel-count { color: var(--margin-soft); margin-left: 0.4rem; }
.panel-sub { font-family: var(--sans); font-size: 0.8rem; font-weight: 600; margin: 1.4rem 0 0.4rem; color: var(--margin); }
.panel-action { margin-top: 0.8rem; }
.table { width: 100%; border-collapse: collapse; font-size: 0.9rem; margin-top: 0.8rem; }
.table th { text-align: left; white-space: nowrap; font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--margin); font-weight: 600; padding: 0.4rem 0.6rem 0.4rem 0; border-bottom: 1px solid var(--ink); }
.table td { padding: 0.5rem 0.6rem 0.5rem 0; border-bottom: 1px solid var(--rule-soft); vertical-align: top; }
.table .th-num, .table .td-num { text-align: right; padding-right: 1rem; }
.table-tight td, .table-tight th { padding-top: 0.3rem; padding-bottom: 0.3rem; }
.td-action { text-align: right; white-space: nowrap; }
.ua { color: var(--margin); font-family: var(--sans); font-size: 0.8rem; overflow-wrap: anywhere; }
.row-current td { background: var(--paper-deep); }
.row-bad td:nth-child(2) { color: var(--red); }
.row-ok td:nth-child(2) { color: var(--ink); }
.tally { display: flex; gap: 2px; align-items: center; flex-wrap: wrap; }
.tally span { display: inline-block; width: 3px; height: 0.9rem; background: var(--red); }
.tally span:nth-child(5n) { transform: rotate(-70deg) translateX(-0.35rem); width: 2px; }
.form-grid { display: grid; gap: 0.9rem; max-width: 26rem; margin-top: 0.8rem; }
.form-actions { padding-top: 0.2rem; }
.notice { font-family: var(--sans); font-size: 0.9rem; padding: 0.7rem 0.9rem; border: 1px solid; border-radius: 2px; margin: 0.8rem 0; }
.notice-error { color: var(--red); border-color: var(--red); background: var(--red-wash); }
.notice-ok { color: var(--ink); border-color: var(--ink); background: var(--paper-deep); }

/* Cover sheet: login, setup, errors */
.cover { background: var(--paper-deep); }
.cover-layout { min-height: 100dvh; display: grid; place-items: center; padding: 2rem 1rem; }
.sheet { width: 100%; max-width: 24rem; background: var(--paper); border: 1px solid var(--rule); padding: 0 2rem 2rem; }
.sheet-wide { max-width: 34rem; }
.sheet-head { display: flex; justify-content: space-between; align-items: baseline; background: var(--red); color: var(--paper); margin: 0 -2rem 1.8rem; padding: 0.8rem 2rem; font-family: var(--sans); font-stretch: 88%; }
.sheet-title { font-weight: 700; }
.sheet-sub { font-family: var(--serif); font-style: italic; font-size: 0.9rem; opacity: 0.9; }
.sheet-h { font-size: 1.5rem; margin-bottom: 0.5rem; }
.sheet-p { color: var(--ink-soft); margin: 0 0 1.2rem; }
.sheet-form { display: grid; gap: 1rem; margin-top: 1.2rem; }
.sheet-form .btn { margin-top: 0.4rem; justify-self: start; }
.sheet-fine { font-family: var(--sans); font-size: 0.78rem; color: var(--margin); margin: 1.2rem 0 0; line-height: 1.5; }
.sheet-code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.82rem; background: var(--paper-deep); border: 1px solid var(--rule); padding: 0.7rem 0.9rem; overflow-x: auto; }
.code-input { letter-spacing: 0.25em; font-size: 1.2rem; }
.enrol { display: grid; grid-template-columns: 11rem 1fr; gap: 1.5rem; align-items: start; margin: 1.2rem 0; }
.qr { border: 1px solid var(--rule); padding: 0.4rem; background: #fff; }
.qr svg { width: 100%; height: auto; display: block; }
.secret { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.3rem 0 0.6rem; font-size: 0.95rem; }
.secret span { background: var(--paper-deep); border: 1px solid var(--rule); padding: 0.1rem 0.4rem; }

/* Responsive */
@media (max-width: 64rem) {
  .proof-layout { grid-template-columns: 1fr; gap: 1rem; padding-top: 1rem; }
  .legend { position: static; order: -1; display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.25rem; border-bottom: 1px solid var(--rule); padding-bottom: 0.5rem; }
  .legend-title { display: none; }
  .marks { display: flex; gap: 1rem; margin: 0; border-top: 0; }
  .marks a { display: inline-flex; gap: 0.35rem; padding: 0.4rem 0; border-bottom: 0; }
  .mark-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .legend-foot { display: none; }
  .filters { flex: 1 1 100%; border-bottom: 0; padding-bottom: 0; order: 3; }
  .filters summary { display: inline-flex; }
  .filters[open] summary { display: flex; }
  .filter-form { grid-template-columns: 1fr 1fr; }
  .filter-form .field-row, .filter-form .btn { grid-column: span 2; }
  .dayrule { grid-template-columns: 1fr; }
  .dayrule span { grid-column: 1; }
  .cap { grid-template-columns: 1fr; }
  .cap-margin { border-right: 0; padding: 0.9rem 0 0; grid-template-columns: auto 1fr auto; grid-auto-flow: dense; gap: 0 0.75rem; }
  .cap-mark { grid-column: 1; grid-row: 1; margin: 0; align-self: baseline; }
  .cap-sender { grid-column: 2; grid-row: 1; }
  .cap-chat { grid-column: 1 / 3; grid-row: 2; }
  .cap-time { grid-column: 3; grid-row: 1; margin: 0; justify-self: end; }
  .cap-lived { grid-column: 3; grid-row: 2; justify-self: end; }
  .cap-body { padding: 0.5rem 0 1rem; }
  .empty { padding-left: 0; }
  .history-list a { grid-template-columns: 1fr; gap: 0.2rem; }
}
@media (max-width: 44rem) {
  .head { grid-template-columns: 1fr auto; gap: 0.75rem; padding: 0 1rem; height: auto; min-height: var(--head-h); row-gap: 0; }
  .head-count { grid-column: 1 / -1; font-size: 0.85rem; padding-bottom: 0.5rem; }
  .head-count .num { font-size: 1rem; }
  .head-sub { display: none; }
  .head-nav { gap: 0.9rem; font-size: 0.85rem; }
  .proof-layout, .detail-layout, .page-layout { padding-left: 1rem; padding-right: 1rem; }
  .filter-form { grid-template-columns: 1fr; }
  .filter-form .field-row, .filter-form .btn { grid-column: auto; }
  .cap-body { font-size: 1rem; }
  .plate { max-width: 7rem; }
  .exhibit-line { font-size: 1.15rem; }
  .exhibit-text { font-size: 1.1rem; }
  .record-list { grid-template-columns: 1fr; gap: 0.1rem 0; }
  .record-list dt { margin-top: 0.6rem; }
  .enrol { grid-template-columns: 1fr; }
  .qr { max-width: 12rem; }
  .table { display: block; overflow-x: auto; }
  .crumbs-nav { margin-left: 0; }
  .sheet { padding: 0 1.25rem 1.5rem; }
  .sheet-head { margin: 0 -1.25rem 1.4rem; padding: 0.7rem 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  s.proof, s.react-old, .strike-plate { animation: none; }
  * { transition-duration: 0.01ms !important; }
}

/* Word diffs, transcripts, context, people, quiet note */
.proof-word { padding: 0 0.05em; }
s.proof-word { color: var(--ink-soft); }
ins.proof-word { text-decoration: none; }
.proof-diff ins.proof-ins { font-style: italic; }
.transcript-label { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--margin); margin-right: 0.3rem; vertical-align: 0.15em; }
.transcript-meta { font-family: var(--sans); font-size: 0.8rem; margin: 0.3rem 0 0; }
.quiet-note { font-family: var(--sans); font-size: 0.82rem; color: var(--margin); margin: 0 0 1.2rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--rule-soft); }
.quiet-note a { color: var(--red); text-decoration-color: var(--red); }
.context { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--rule); }
.context-note { font-family: var(--sans); font-size: 0.8rem; color: var(--margin); margin: 0.3rem 0 0.8rem; }
.context-list { list-style: none; margin: 0; padding: 0; }
.context-msg { display: grid; grid-template-columns: 6.5rem 9rem 1fr; gap: 0.8rem; padding: 0.45rem 0; border-bottom: 1px solid var(--rule-soft); font-size: 0.95rem; align-items: baseline; }
.context-msg time { font-size: 0.8rem; color: var(--margin); }
.context-who { font-family: var(--sans); font-size: 0.85rem; font-weight: 600; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.context-text { overflow-wrap: anywhere; }
.context-this { background: var(--paper-deep); margin: 0 -0.6rem; padding: 0.45rem 0.6rem; }
.context-this .context-who { color: var(--red); }
.verbatim { white-space: pre-wrap; }
.warn { color: var(--red); }
.exhibit-foot { justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.exhibit-export { display: flex; gap: 0.6rem; }
.page-wide { max-width: 64rem; }
.table-people td { vertical-align: middle; }
.td-person a { text-decoration: none; font-weight: 500; }
.td-person a:hover { color: var(--red); }
.td-sub { display: block; font-size: 0.78rem; }
.td-strong { font-weight: 700; }
.person-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 3rem; }
.person-head { margin-bottom: 0; }
.hours { table-layout: fixed; }
.hours td { padding: 0.4rem 0.3rem; border-bottom: 1px solid var(--rule-soft); }
.hour-cell { display: grid; gap: 0.1rem; }
.hour-name { font-family: var(--sans); font-size: 0.72rem; color: var(--margin); letter-spacing: 0.05em; }
.hour-n { font-size: 0.85rem; }
.hour-zero .hour-n { color: var(--margin-soft); }
.hours .tally span { height: 0.6rem; }
.proof-page-wide { max-width: none; margin-top: 2rem; }
.proof-page-wide .record-title { margin-bottom: 0.4rem; }
@media (max-width: 64rem) {
  .person-grid { grid-template-columns: 1fr; }
  .context-msg { grid-template-columns: 5.5rem 1fr; }
  .context-text { grid-column: 1 / -1; }
}
s.proof-word + ins.proof-word { margin-left: 0.18em; }

/* Media sheet: plates on a contact sheet, retained ones struck */
.sheet-page { min-width: 0; }
.dayrule-sheet { grid-template-columns: 1fr; }
.dayrule-sheet span { grid-column: 1; }
.plates { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 1.25rem 1rem; padding: 1rem 0 0.5rem; }
.plate-card { position: relative; display: grid; gap: 0.45rem; align-content: start; animation: plate-in 500ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 18ms); }
@keyframes plate-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.plate-face { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--rule); background: var(--paper-deep); color: var(--margin); text-decoration: none; transition: border-color 160ms var(--ease-out); }
.plate-face img { width: 100%; height: 100%; object-fit: cover; }
.plate-card:hover .plate-face, .plate-card:focus-within .plate-face { border-color: var(--ink); }
.plate-play { position: absolute; inset: 0; display: grid; place-items: center; color: var(--paper); background: rgba(28, 26, 23, 0.18); }
.plate-play svg { filter: drop-shadow(0 1px 2px rgba(28, 26, 23, 0.5)); }
.plate-glyph { color: var(--margin-soft); display: inline-flex; }
.plate-glyph svg { display: block; }
.plate-glyph-doc { align-self: end; margin-bottom: 0.4rem; }
.plate-filename { align-self: start; font-family: var(--sans); font-size: 0.78rem; color: var(--ink-soft); padding: 0 0.6rem; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.plate-card-retained .strike-plate { top: 50%; animation-delay: calc(var(--i, 0) * 18ms + 200ms); }
.plate-card-retained:hover .strike-plate { opacity: 0.25; }
.plate-audio { width: 100%; height: 2.2rem; }
.plate-cap { display: grid; gap: 0.1rem; font-family: var(--sans); font-size: 0.8rem; color: var(--margin); line-height: 1.35; }
.plate-who { color: var(--ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plate-kind { font-family: var(--serif); font-style: italic; color: var(--red); }
.plate-kind-quiet { color: var(--margin); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; font-style: normal; font-family: var(--sans); }
.plate-pick { position: absolute; top: 0.45rem; left: 0.45rem; z-index: 2; cursor: pointer; }
.plate-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.plate-pick-box { display: block; width: 1.15rem; height: 1.15rem; border: 1.5px solid var(--paper); background: rgba(28, 26, 23, 0.35); border-radius: 2px; opacity: 0; transition: opacity 160ms var(--ease-out), background-color 160ms var(--ease-out); }
.plate-card:hover .plate-pick-box, .plate-card:focus-within .plate-pick-box, .plate-card-picked .plate-pick-box { opacity: 1; }
.plate-pick input:checked + .plate-pick-box { background: var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpath d='M1.5 5.5l3 3 6-7' fill='none' stroke='%23fbf8f1' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px 10px no-repeat; border-color: var(--red); }
.plate-pick input:focus-visible + .plate-pick-box { outline: 2px solid var(--red); outline-offset: 2px; }
.plate-card-picked .plate-face { border-color: var(--red); box-shadow: 0 0 0 3px var(--red-wash); }
.bulkbar { position: sticky; bottom: 1rem; z-index: 5; display: flex; align-items: center; gap: 0.6rem; margin-top: 1.5rem; padding: 0.6rem 0.9rem; background: var(--paper); border: 1px solid var(--ink); font-family: var(--sans); font-size: 0.85rem; box-shadow: 0 6px 24px rgba(28, 26, 23, 0.12); }
.bulkbar[hidden] { display: none; }
.bulkbar-count { margin-right: auto; color: var(--ink-soft); }
.bulkbar-count .num { font-weight: 700; color: var(--ink); }
.kinds a, .sources a { grid-template-columns: 1fr auto; }
.sources a { grid-template-columns: 3.2rem 1fr auto; }
.sources li:first-child a { grid-template-columns: 1fr auto; }
.sources .mark-strike { color: var(--margin-soft); }
.cleanup { margin-top: 0.4rem; }
.empty-sheet { padding-left: 0; }
@media (max-width: 64rem) {
  .kinds, .sources { flex-wrap: wrap; gap: 0 1rem; }
  .kinds .mark-name, .sources .mark-name { position: static; width: auto; height: auto; clip-path: none; }
  .kinds a, .sources a { gap: 0.3rem; }
  .sources .mark-sample { display: none; }
  .plates { grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 1rem 0.75rem; }
  .cleanup { order: 4; flex: 1 1 100%; }
}
@media (max-width: 44rem) {
  .plates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bulkbar { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .plate-card { animation: none; }
}
.context-mine .context-who { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--margin); }
.context-mine .context-text { color: var(--ink-soft); padding-left: 1.5rem; border-left: 1px solid var(--rule); }
.context-msg:not(.context-mine):not(.context-this) .context-text { padding-left: 0; }