/* Chronicle — the interface for a campaign folio.
 *
 * Layout, palette and type scale are documented in
 * docs/CHRONICLE_VISUAL_DIRECTION.md. Comments here cover behaviour and
 * constraints only.
 */

@font-face {
  font-family: "Spectral";
  src: url("fonts/spectral-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Spectral";
  src: url("fonts/spectral-latin-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Spectral";
  src: url("fonts/spectral-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plex Condensed";
  src: url("fonts/ibm-plex-sans-condensed-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plex Condensed";
  src: url("fonts/ibm-plex-sans-condensed-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light dark;

  --paper: #f4f1ea;
  --paper-sunk: #ebe6db;
  --paper-raised: #fbf9f5;
  --ink: #23201c;
  --ink-soft: #4a453d;
  --ink-faint: #6f6859;
  --rule: #d3ccbd;
  --rule-strong: #b3a996;
  --accent: #7a2e2a;
  --accent-soft: #a8574f;
  --danger: #8a3b2a;

  --serif: "Spectral", Georgia, "Times New Roman", serif;
  --sans: "Plex Condensed", "IBM Plex Sans Condensed", "Helvetica Neue", Arial, sans-serif;

  --measure: 36rem;
  --rail-left: 14rem;
  --rail-right: 15rem;
  --gutter: 2.25rem;
}

[data-theme="night"] {
  --paper: #171613;
  --paper-sunk: #100f0d;
  --paper-raised: #1e1c18;
  --ink: #e7e1d4;
  --ink-soft: #b3ac9c;
  --ink-faint: #877f6d;
  --rule: #35322b;
  --rule-strong: #4a4539;
  --accent: #c07a55;
  --accent-soft: #a86a4a;
  --danger: #c2603f;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
  display: flex;
  flex-direction: column;
}

button, input, textarea {
  font: inherit;
  color: inherit;
}

/* Numerals that line up in columns: hit points, hours, dice, dates. */
.tabular, .ledger dd, .note, .hour, .toc .where, .sb-time {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* --------------------------------------------------------------- running head */

.head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 1.25rem 0.55rem;
  border-bottom: 1px solid var(--rule-strong);
  background: var(--paper-raised);
  flex: 0 0 auto;
}

.head-left, .head-right {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  min-width: 0;
  overflow: hidden;
}

.head-left { flex: 1 1 auto; }
.head-right { flex: 0 1 auto; }

.head .title {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}

.head .who {
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--ink-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The state line reports a player-typed character name, so it can be any length.
   It must give way to the Shelf button rather than growing across it: an
   overflowing nowrap span sat on top of that button and swallowed every click. */
.head .state {
  font-family: var(--sans);
  font-size: 0.8rem;
  color: var(--ink-soft);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 1 auto;
  min-width: 0;
}

.head .fight { color: var(--danger); font-weight: 600; }

.head button {
  flex: 0 0 auto;
  position: relative;
  z-index: 1;
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: transparent;
  color: var(--ink-soft);
  border: 1px solid var(--rule-strong);
  padding: 0.32rem 0.7rem;
  cursor: pointer;
  min-height: 34px;
}

.head button:hover { color: var(--ink); border-color: var(--ink-soft); }

/* The phone's replacement for the rails. Never truncated, never scrolled away. */
.standing-bar {
  display: none;
  gap: 0.9rem;
  padding: 0.4rem 1.25rem;
  border-bottom: 1px solid var(--rule);
  background: var(--paper-sunk);
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--ink-soft);
  flex: 0 0 auto;
}

.sb-place { font-weight: 600; color: var(--ink); }
.sb-flow { margin-left: auto; color: var(--accent); }

/* --------------------------------------------------------------- the folio */

#page {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: var(--rail-left) minmax(0, 1fr) var(--rail-right);
  gap: var(--gutter);
  padding: 1.5rem clamp(1rem, 3vw, 2.5rem);
  overflow: hidden;
}

.rail {
  overflow-y: auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
  align-content: start;
}

.rail-left { border-right: 1px solid var(--rule); padding-right: var(--gutter); }
.rail-right { border-left: 1px solid var(--rule); padding-left: var(--gutter); }

.folio h3 {
  margin: 0 0 0.45rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--rule);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.ledger { margin: 0; font-family: var(--sans); font-size: 0.86rem; }
.ledger div { display: flex; justify-content: space-between; gap: 0.6rem; padding: 0.12rem 0; }
.ledger dt { color: var(--ink-faint); }
.ledger dd { margin: 0; color: var(--ink); font-weight: 600; }
.ledger div.hurt dd { color: var(--danger); }

.plain { margin: 0; padding: 0; list-style: none; font-family: var(--sans); font-size: 0.86rem; }
.plain li { padding: 0.16rem 0; color: var(--ink-soft); }

.people { margin: 0; padding: 0; list-style: none; }
.people li { padding: 0.28rem 0; border-bottom: 1px solid var(--rule); }
.people li:last-child { border-bottom: 0; }
.people .name { display: block; font-family: var(--sans); font-weight: 600; font-size: 0.86rem; color: var(--ink); }
.people .role { display: block; font-family: var(--sans); font-size: 0.78rem; color: var(--ink-faint); line-height: 1.3; }

.place { margin: 0; font-family: var(--sans); font-weight: 600; font-size: 0.9rem; }
.hour { margin: 0.1rem 0 0; font-family: var(--sans); font-size: 0.82rem; color: var(--ink-faint); }

/* --------------------------------------------------------------- the record */

.record { overflow-y: auto; min-width: 0; padding-bottom: 1rem; }

/* The measure sits against the left rail rather than centred inside its column:
   centring it opened a band of dead space between the character ledger and the
   first line of prose, which is the emptiness this layout exists to remove. */
.column { max-width: var(--measure); margin: 0; }

/* Narration. The body of the chronicle. */
.passage {
  margin: 0 0 1.15rem;
  color: var(--ink);
}

/* What the player declared. An entry in the record, not a chat message: it stays
   in the same column, left-aligned, marked by a rule and a label rather than by
   being pushed to the other side of the page. */
.said {
  margin: 1.5rem 0 1.15rem;
  padding: 0.1rem 0 0.1rem 0.95rem;
  border-left: 2px solid var(--accent);
  color: var(--ink-soft);
  font-style: italic;
}

.said .nib {
  display: block;
  font-family: var(--sans);
  font-style: normal;
  font-weight: 600;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.15rem;
}

/* Mechanics. Compact, exact, in the margin of the passage they belong to —
   never inside the prose. */
.note {
  margin: 0.5rem 0 0;
  padding: 0.4rem 0 0.1rem;
  border-top: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--ink-faint);
  text-transform: uppercase;
}

.note div + div { margin-top: 0.15rem; }

.recap {
  margin: 0 0 1rem;
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--ink-faint);
}

/* A scene or time heading. */
.opening {
  margin: 0 0 1.15rem;
}

.opening.lede {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--rule-strong);
}

.opening.hint { color: var(--ink-faint); font-size: 0.92rem; }

.trouble {
  margin: 0.75rem 0;
  padding: 0.6rem 0.85rem;
  border-left: 2px solid var(--danger);
  background: var(--paper-sunk);
  font-family: var(--sans);
  font-size: 0.86rem;
  color: var(--danger);
}

.ending {
  margin: 1.5rem 0;
  padding-top: 0.9rem;
  border-top: 2px solid var(--rule-strong);
}

.ending h3 {
  margin: 0 0 0.4rem;
  font-family: var(--sans);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ending p { margin: 0 0 0.75rem; color: var(--ink-soft); }
.ending .answers { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* --------------------------------------------------------------- declaration */

#form {
  flex: 0 0 auto;
  border-top: 1px solid var(--rule-strong);
  background: var(--paper-raised);
  padding: 0.7rem clamp(1rem, 3vw, 2.5rem) 0.9rem;
}

.declare-label {
  display: block;
  max-width: var(--measure);
  margin: 0 auto 0.3rem;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.line {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
  max-width: var(--measure);
  margin: 0 auto;
}

#box {
  flex: 1 1 auto;
  min-width: 0;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  padding: 0.55rem 0.7rem;
  font-family: var(--serif);
  font-size: 1rem;
  min-height: 44px;
}

#box:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
#box::placeholder { color: var(--ink-faint); font-style: italic; }

.act {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  padding: 0.5rem 1rem;
  cursor: pointer;
  min-height: 44px;
  white-space: nowrap;
}

.act:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); }
.act:disabled { opacity: 0.45; cursor: default; }
.act:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.roll, .confirm-yes, .confirm-no { display: none; }
.roll.on, .confirm-yes.on, .confirm-no.on { display: inline-flex; align-items: center; gap: 0.4rem; }
.roll svg { width: 1.05em; height: 1.05em; }
.confirm-yes.on { background: var(--accent); border-color: var(--accent); }
.confirm-no.on { background: transparent; color: var(--ink); }

/* The held moment. */
#tablecard {
  max-width: var(--measure);
  margin: 0 auto 0.6rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--accent);
  background: var(--paper-sunk);
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

#cardtitle {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--ink);
}

#cardbody { font-size: 0.9rem; color: var(--ink-soft); margin-top: 0.15rem; }
.card-copy { flex: 1 1 auto; min-width: 0; }

/* Reporting. Discreet: available on every resolved turn, never in the way. */
.report {
  display: block;
  margin: 0.35rem auto 0;
  max-width: var(--measure);
  background: none;
  border: 0;
  padding: 0.2rem 0;
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  cursor: pointer;
}

.report:hover { color: var(--accent); }
.report:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.report-panel {
  max-width: var(--measure);
  margin: 0.5rem auto 0;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--rule-strong);
  background: var(--paper-sunk);
}

.report-panel .ask { margin: 0 0 0.5rem; font-family: var(--sans); font-weight: 600; font-size: 0.85rem; }
.report-panel .answers { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.report-panel input {
  width: 100%;
  margin-top: 0.6rem;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  padding: 0.5rem 0.6rem;
  font-family: var(--serif);
  min-height: 44px;
}

/* --------------------------------------------------------------- the shelf */

.signin {
  flex: 1 1 auto;
  min-height: 100%;
  overflow-y: auto;
  display: grid;
  place-items: center;
  padding: 2rem 1rem;
}

.signin-card {
  width: min(100%, 31rem);
  padding: clamp(1.4rem, 5vw, 2.4rem);
  background: var(--paper-raised);
  border: 1px solid var(--rule-strong);
  box-shadow: 0 1rem 3rem color-mix(in srgb, var(--ink) 12%, transparent);
}

.signin-kicker {
  margin: 0 0 0.35rem;
  font-family: var(--sans);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
}

.signin-card h1 {
  margin: 0;
  font-size: clamp(2.2rem, 8vw, 3.15rem);
  line-height: 1;
}

.signin-copy { margin: 0.75rem 0 1.35rem; color: var(--ink-soft); }

.signin-card form { display: grid; gap: 0.7rem; }
.signin-card form > div { display: grid; gap: 0.35rem; }

.signin-card label {
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.signin-card input {
  width: 100%;
  min-height: 46px;
  padding: 0.6rem 0.7rem;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
}

.signin-card input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.signin-card .act { justify-self: start; margin-top: 0.35rem; }
.signin-card .setup-error { margin: 0.25rem 0 0; }

.signin-privacy {
  margin: 1.35rem 0 0;
  padding-top: 0.8rem;
  border-top: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 0.76rem;
  line-height: 1.45;
  color: var(--ink-faint);
}

#title {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 2.5rem clamp(1rem, 4vw, 3rem) 3rem;
}

.plate {
  max-width: 46rem;
  margin: 0 auto 2.5rem;
  display: grid;
  grid-template-columns: 12rem 1fr;
  gap: 2rem;
  align-items: center;
}

/* A credited plate, at the size of a plate — not a hero image, and not the
   identity of the application. */
.frontispiece { margin: 0; }
.frontispiece img {
  display: block;
  width: 100%;
  height: auto;
  filter: grayscale(1) contrast(1.05);
  border: 1px solid var(--rule-strong);
}

.frontispiece figcaption {
  margin-top: 0.35rem;
  font-family: var(--sans);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* The wordmark and the region are one block. Left to the grid they landed in
   separate cells, so the title sat beside the plate and the region sat under the
   photo credit, reading as a caption for it. */
.masthead { display: flex; flex-direction: column; justify-content: center; }

.plate h1 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(2.1rem, 5vw, 2.9rem);
  letter-spacing: -0.01em;
  line-height: 1.05;
}

.plate .sub {
  font-family: var(--sans);
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 0.3rem;
}



.section { max-width: 46rem; margin: 0 auto 2.25rem; }

.section > h2 {
  margin: 0 0 0.75rem;
  padding-bottom: 0.3rem;
  border-bottom: 2px solid var(--ink);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Saved chronicles. Each is a distinct row with its own facts, and the one you
   are about to open is unmistakable. */
.toc { margin: 0; padding: 0; list-style: none; }

.toc li {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: 0.9rem;
  padding: 0.7rem 0.6rem;
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
  min-height: 56px;
}

.toc li:hover { background: var(--paper-raised); }
.toc li.on { background: var(--paper-raised); box-shadow: inset 3px 0 0 var(--accent); }
.toc li.busy { opacity: 0.5; pointer-events: none; }

.toc .name {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
}

.toc .who-where {
  display: block;
  font-family: var(--sans);
  font-size: 0.79rem;
  color: var(--ink-faint);
  margin-top: 0.1rem;
}

.toc .leaders { display: none; }

.toc .where {
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--ink-faint);
  text-align: right;
  white-space: nowrap;
}

/* The primary action on a saved chronicle. Before this, the only thing on the row
   that looked like a button was the one that deleted it. */
.toc .open {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  padding: 0.36rem 0.8rem;
  cursor: pointer;
  min-height: 38px;
}

.toc .open:hover { background: var(--accent); border-color: var(--accent); }
.toc .open:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.toc .drop {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--rule-strong);
  color: var(--ink-faint);
  padding: 0.3rem 0.55rem;
  cursor: pointer;
  min-height: 34px;
}

.toc .drop:hover { color: var(--danger); border-color: var(--danger); }

.empty { font-family: var(--sans); font-size: 0.88rem; color: var(--ink-faint); }

.dial { margin: 0 0 1.35rem; }

.dial .ask {
  margin: 0 0 0.45rem;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.86rem;
  color: var(--ink);
}

.dial .answers, .answers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.6rem;
}

.answer {
  text-align: left;
  background: var(--paper-raised);
  border: 1px solid var(--rule-strong);
  padding: 0.6rem 0.75rem;
  cursor: pointer;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--ink);
  min-height: 44px;
}

.answer:hover { border-color: var(--ink-soft); }
.answer.on { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.answer:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.answer .why {
  display: block;
  font-weight: 400;
  font-size: 0.78rem;
  color: var(--ink-faint);
  margin-top: 0.15rem;
  line-height: 1.35;
}

.begin { display: flex; gap: 0.6rem; margin-top: 1rem; flex-wrap: wrap; }

.begin input {
  flex: 1 1 16rem;
  min-width: 0;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  padding: 0.55rem 0.7rem;
  font-family: var(--serif);
  min-height: 44px;
}

.begin input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

.notice { font-family: var(--sans); font-size: 0.84rem; color: var(--ink-faint); }

.setup-error {
  font-family: var(--sans);
  font-size: 0.86rem;
  color: var(--danger);
  border-left: 2px solid var(--danger);
  padding: 0.4rem 0.7rem;
  background: var(--paper-sunk);
}

/* What the machine is doing, where the player is already looking. */
.op-status {
  font-family: var(--sans);
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--accent);
  padding: 0.4rem 0.7rem;
  border-left: 2px solid var(--accent);
  background: var(--paper-sunk);
}

.colophon {
  max-width: 46rem;
  margin: 2.5rem auto 0;
  padding-top: 0.8rem;
  border-top: 1px solid var(--rule);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--sans);
  font-size: 0.74rem;
  color: var(--ink-faint);
}

.colophon button {
  margin-left: auto;
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--rule-strong);
  color: var(--ink-faint);
  padding: 0.3rem 0.6rem;
  cursor: pointer;
  min-height: 34px;
}

.colophon button + button { margin-left: 0; }
.colophon button:hover { color: var(--ink); border-color: var(--ink-soft); }

/* --------------------------------------------------------------- drawers */

.sheet {
  display: none;
  border-bottom: 1px solid var(--rule-strong);
  background: var(--paper-sunk);
  padding: 0.9rem clamp(1rem, 3vw, 2.5rem);
  flex: 0 0 auto;
  max-height: 45vh;
  overflow-y: auto;
}

.sheet.open { display: block; }
.sheet b { font-family: var(--sans); font-size: 0.82rem; }

.tabs {
  display: flex;
  gap: 0.15rem;
  overflow-x: auto;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 0.6rem;
}

.tabs::-webkit-scrollbar { display: none; }

.tab {
  font-family: var(--sans);
  font-size: 0.76rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--ink-faint);
  padding: 0.45rem 0.65rem;
  cursor: pointer;
  white-space: nowrap;
  min-height: 40px;
}

.tab:hover { color: var(--ink); }
.tab.on { color: var(--ink); border-bottom-color: var(--accent); }
.tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.tabbody .row { font-family: var(--sans); font-size: 0.86rem; padding: 0.2rem 0; }
.tabbody .row.muted { color: var(--ink-faint); font-size: 0.8rem; }

.tabbody .entry {
  padding: 0.45rem 0;
  border-top: 1px solid var(--rule);
  font-size: 0.92rem;
}

.tabbody .entry:first-child { border-top: 0; }

.tabbody .pin { cursor: pointer; color: var(--ink-faint); background: none; border: 0; padding: 0.2rem 0.35rem; }
.tabbody .pin.on { color: var(--accent); }
.tabbody .pin:focus-visible { outline: 2px solid var(--accent); }

.journal { margin: 0.5rem 0; }
.journal .entry { margin: 0.25rem 0; line-height: 1.35; }
.journal .pin { cursor: pointer; opacity: 0.6; }
.journal .pin.on { opacity: 1; color: var(--accent); }

.hidden { display: none !important; }

/* --------------------------------------------------------------- narrower */

@media (max-width: 1180px) {
  :root { --rail-left: 12rem; --rail-right: 13rem; --gutter: 1.5rem; }
}

@media (max-width: 960px) {
  /* The left rail's contents live in the character drawer on smaller screens;
     the right rail carries what the table needs at a glance. */
  #page { grid-template-columns: minmax(0, 1fr) 13rem; }
  .rail-left { display: none; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  #page { grid-template-columns: minmax(0, 1fr); padding: 1rem; overflow-y: auto; }
  .rail-right { display: none; }
  .record { overflow: visible; }
  .standing-bar { display: flex; }
  .head .who { display: none; }
  /* The standing bar below already carries place, hour and table state, so the
     header line only has to stay tappable — it is the way into the character
     sheet. It truncates; it never grows across the Shelf button. */
  .head .state { font-size: 0.74rem; max-width: 46vw; }
  .head .title { font-size: 0.74rem; }
  .plate { grid-template-columns: 1fr; gap: 1rem; }
  .frontispiece { max-width: 11rem; }
  #form { padding: 0.6rem 1rem 0.75rem; }
  .toc li { grid-template-columns: 1fr auto auto; }
  .toc .where { grid-column: 1; text-align: left; }
}

/* Nothing here animates by default. This is a guard against anything added later
   moving under a reader who has asked the system for stillness. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Higher contrast where the system asks for it: the faint rules and soft ink are
   the first things to go. */
@media (prefers-contrast: more) {
  :root {
    --ink-faint: #4a453d;
    --ink-soft: #33302a;
    --rule: #9c9484;
    --rule-strong: #6f6859;
  }
}