/* ═══════════════════════════════════════════════════════════════════════════
   A CORRESPONDENCE, NOT A DASHBOARD.
   You open this to hear from her. Everything else on the page is context.

   THE SIGNATURE: her voice changes colour as she stops listening to you. Warm
   lamplight when she is close; cold slate when she has drifted. The palette IS
   the mechanic — you catch it in your peripheral vision before you read a word.

   THE STRUCTURE: this is a world of rolls and ledgers, where the watching power
   COUNTS. So the record is ruled and tabular, with a day gutter — and her voice
   breaks out of it, unruled and unaligned. The world counts her. Her voice is
   the part that cannot be counted. The dead are struck through, like a name
   taken off a roll.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --unlit:   #14120f;   /* an unlit room. warm brown-black, never true black */
  --card:    #1c1915;   /* the ledger card, barely lifted off the table */
  --rule:    #2b2620;   /* ruled lines */
  --rule-lo: #221e19;

  --ink:     #ded5c4;   /* aged paper-white. the record. */
  --ink-mid: #948b7c;
  --ink-low: #635c51;

  --close:   #e8b95c;   /* HER, while she still listens. lamplight. */
  --cold:    #7c95a8;   /* HER, once she has drifted. the cold outside. */
  --blood:   #a4453c;   /* loss. */

  --serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
  --mono:  ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;

  --measure: 34rem;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--unlit);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

button { font: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--close); outline-offset: 3px; }

/* ─────────────────────────────────────────────────────────── shared atoms */
.eyebrow {
  font-family: var(--mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ink-low);
  margin: 0 0 0.75rem;
}
.eyebrow.warm  { color: var(--close); }
.eyebrow.blood { color: var(--blood); }

.quiet { color: var(--ink-mid); }
.small { font-size: 0.86rem; line-height: 1.5; }
.k {
  font-family: var(--mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-low);
}

.primary {
  width: 100%;
  background: var(--close);
  color: #1a1305;
  border: 0;
  border-radius: 2px;
  padding: 0.9rem 1rem;
  font-family: var(--mono);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  min-height: 48px;
}
.primary:hover { background: #f0c66e; }

.ghost {
  background: none;
  border: 1px solid var(--rule);
  border-radius: 2px;
  color: var(--ink-mid);
  padding: 0.5rem 0.8rem;
  font-family: var(--mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.ghost:hover { color: var(--ink); border-color: var(--ink-low); }
.ghost.tiny { padding: 0.4rem 0.6rem; font-size: 0.6rem; min-height: 36px; }

/* ────────────────────────────────────────────────────────── the assignment */
.boot { min-height: 100dvh; display: grid; place-items: center; padding: 2rem 1.25rem; }
.boot-inner { width: 100%; max-width: var(--measure); }

.boot h1 {
  font-size: clamp(2.4rem, 10vw, 3.4rem);
  line-height: 1.04;
  font-weight: 400;
  letter-spacing: -0.02em;
  margin: 0 0 1.5rem;
  text-wrap: balance;
}
.lede { max-width: 30rem; margin: 0 0 1rem; }
.lede.quiet { color: var(--ink-mid); }

.boot-form { margin-top: 2.5rem; display: grid; gap: 1.5rem; }
.field { display: grid; gap: 0.4rem; }
.field input, .field select {
  width: 100%;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 2px;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.95rem;
  padding: 0.75rem;
  min-height: 48px;
}
.hint { font-size: 0.8rem; color: var(--ink-low); font-family: var(--serif); }

/* ─────────────────────────────────────────────────────────────── the vigil */
#game { max-width: var(--measure); margin: 0 auto; padding: 0 1.25rem 5rem; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: max(1rem, env(safe-area-inset-top)) 0 0.9rem;
  background: var(--unlit);
  box-shadow: 0 12px 16px -8px var(--unlit);
}
.topbar h1 { font-size: 1.35rem; font-weight: 400; margin: 0; letter-spacing: 0.01em; }
.whereabouts {
  margin: 0.15rem 0 0;
  font-family: var(--mono);
  font-size: 0.66rem;
  color: var(--ink-low);
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.whereabouts span + span::before { content: '· '; }

/* ══════════════════════════════════════════════════════════════ HER VOICE ══
   The hero. Unruled, unaligned, and the only warm thing on the page.
   `data-mood` carries the mechanic straight into the hue. */
.voice {
  padding: 2.5rem 0 2.75rem;
  border-bottom: 1px solid var(--rule);
}
.voice blockquote {
  margin: 0;
  font-size: clamp(1.45rem, 5.5vw, 1.9rem);
  line-height: 1.42;
  letter-spacing: -0.005em;
  text-wrap: pretty;
  color: var(--close);
  transition: color 1.2s ease;
  position: relative;
  padding-left: 1.1rem;
}
/* the hanging mark. she is speaking, and it is not part of the record. */
.voice blockquote::before {
  content: '“';
  position: absolute;
  left: -0.25rem;
  top: -0.35rem;
  font-size: 2.6em;
  line-height: 1;
  color: currentColor;
  opacity: 0.28;
}
.voice[data-mood="cold"]    blockquote { color: var(--cold); }
.voice[data-mood="absent"]  blockquote { color: var(--cold); }
.voice[data-mood="grief"]   blockquote { color: var(--blood); }
.voice[data-mood="silent"]  blockquote { color: var(--ink-low); font-style: italic; }

.voice-when {
  margin: 1.25rem 0 0;
  padding-left: 1.1rem;
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-low);
}

@media (prefers-reduced-motion: reduce) {
  .voice blockquote { transition: none; }
}

/* ───────────────────────────────────────────────────────────── she is asking */
.asking {
  margin: 1.75rem 0;
  padding: 1.25rem;
  background: var(--card);
  border: 1px solid var(--rule);
  border-left: 2px solid var(--close);
  border-radius: 2px;
}
.ask-prompt { margin: 0 0 0.75rem; font-size: 1.08rem; line-height: 1.5; }
.ask-facts {
  margin: 0 0 1.25rem;
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--ink-mid);
  padding-left: 0.85rem;
  border-left: 1px solid var(--rule);
}
.ask-options { display: grid; gap: 0.5rem; }
.ask-options button {
  width: 100%;
  text-align: left;
  background: none;
  border: 1px solid var(--rule);
  border-radius: 2px;
  color: var(--ink);
  padding: 0.85rem 0.9rem;
  min-height: 48px;
}
.ask-options button:hover { border-color: var(--close); color: var(--close); }
.ask-due {
  margin: 0.9rem 0 0;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-low);
}

/* ────────────────────────────────────────────────────────────────── the end */
.death {
  margin: 1.75rem 0;
  padding: 1.5rem 1.25rem;
  border: 1px solid color-mix(in srgb, var(--blood) 40%, var(--rule));
  border-radius: 2px;
}
.death-line { font-size: 1.15rem; margin: 0 0 1rem; color: var(--blood); }
.death .primary { margin-top: 1.25rem; }

/* ══════════════════════════════════════════════════════════════ THE RECORD ══
   Ruled. Tabular. Counted. This is the world's account of her, and it is not
   the same thing as her. */
.ledger { padding-top: 2rem; }
.ledger-head { display: flex; align-items: baseline; justify-content: space-between; }
.tick { font-family: var(--mono); font-size: 0.62rem; color: var(--ink-low); font-variant-numeric: tabular-nums; }

/* ═══════════════════════════════════════════════════════════════════ THE TWO FEEDS
   Her account (first person, only what she knows) and what is closing on her (what you can
   see and she cannot). Side by side on a wide screen; stacked on a phone. */
.feeds { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem 1.75rem; margin-top: 0.75rem; }
.feed { min-width: 0; }
.feed-head { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-low); margin: 0 0 0.6rem; }
.feed-head.warm { color: var(--close); }
.feed-sub { text-transform: none; letter-spacing: 0; color: var(--ink-low); }
.feed-around { border-left: 1px solid var(--rule); padding-left: 1.5rem; }
.log.around .entry p { color: var(--ink-mid); }   /* the world's voice, cooler than hers */
@media (max-width: 720px) {
  .feeds { grid-template-columns: 1fr; }
  .feed-around { border-left: none; padding-left: 0; border-top: 1px solid var(--rule); padding-top: 1rem; }
}

/* WHAT IS CLOSING ON HER — the cards you act on. Blood edge: this is danger, and it is the
   one place on the page you can reach into the world before it reaches her. */
.threats { display: flex; flex-direction: column; gap: 0.7rem; margin-bottom: 1rem; }
.threat-card {
  border: 1px solid var(--blood); border-left-width: 3px; border-radius: 2px;
  background: var(--card); padding: 0.7rem 0.8rem; display: grid; gap: 0.55rem;
}
.threat-what { margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--ink); }
.threat-acts { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.threat-acts button { font-size: 0.74rem; padding: 0.35rem 0.75rem; }
.threat-note { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-low); line-height: 1.5; }

.log { display: flex; flex-direction: column-reverse; }

.entry {
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  gap: 0 0.9rem;
  padding: 0.5rem 0;
  border-top: 1px solid var(--rule-lo);
}
.entry .d {
  font-family: var(--mono);
  font-size: 0.64rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-low);
  text-align: right;
  padding-top: 0.32rem;
}
.entry p { margin: 0; font-size: 0.94rem; line-height: 1.52; }

/* her voice, INSIDE the record, still refuses to be part of it */
.entry.k-her { border-top-color: var(--rule); }
.entry.k-her p {
  color: var(--close);
  padding-left: 0.75rem;
  border-left: 1px solid color-mix(in srgb, var(--close) 40%, transparent);
}
.entry.k-her[data-mood="cold"] p,
.entry.k-her[data-mood="absent"] p {
  color: var(--cold);
  border-left-color: color-mix(in srgb, var(--cold) 45%, transparent);
}
.entry.k-her[data-mood="grief"] p { color: var(--blood); border-left-color: color-mix(in srgb, var(--blood) 45%, transparent); }

.entry.k-loss p, .entry.k-death p { color: var(--blood); }
.entry.k-became p { color: var(--ink); }
.entry.k-became p::before {
  content: 'she is not who she was';
  display: block;
  font-family: var(--mono);
  font-size: 0.56rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-low);
  margin-bottom: 0.2rem;
}
.entry.k-rumour p, .entry.k-witness p { color: var(--ink-mid); font-style: italic; }
.entry.k-judgment p { color: var(--ink-mid); }
.entry.k-hook p::before {
  content: 'she has worked something out';
  display: block;
  font-family: var(--mono);
  font-size: 0.56rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--close);
  margin-bottom: 0.2rem;
}

/* ─────────────────────────────────────────────────────────── her state panel */
.panel { padding-top: 2.5rem; display: grid; gap: 2.5rem; }
.block > .eyebrow { margin-bottom: 0.5rem; }

/* traits: what it gave, and what it took. shown as a ledger, because this world
   counts everything and so does she. */
.traits { display: grid; gap: 0.6rem; margin-top: 1rem; }
.trait {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.2rem 1rem;
  padding: 0.7rem 0.8rem;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 2px;
}
.trait b { font-weight: 400; font-size: 1rem; }
.trait .cost {
  grid-column: 1 / -1;
  font-size: 0.82rem;
  color: var(--ink-mid);
}
.trait .cost::before { content: 'it cost her — '; color: var(--ink-low); }

.people, .ghosts { display: grid; gap: 0.5rem; margin-top: 0.75rem; }
.person { padding: 0.7rem 0.8rem; background: var(--card); border: 1px solid var(--rule); border-radius: 2px; }
.person b { font-weight: 400; }
.person .want { display: block; font-size: 0.84rem; color: var(--ink-mid); margin-top: 0.15rem; }

/* THE DEAD ARE STRUCK OFF. In this world a name coming off a roll is how a person
   stops existing, so that is how the page does it too. */
.ghost { font-size: 0.95rem; color: var(--ink-low); }
.ghost b { font-weight: 400; text-decoration: line-through; text-decoration-thickness: 1px; }
.ghost .never { display: block; font-size: 0.82rem; color: var(--ink-low); }

/* the map */
.map { display: grid; gap: 0.4rem; margin-top: 0.75rem; }
.place {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  text-align: left;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 2px;
  color: var(--ink);
  padding: 0.7rem 0.8rem;
  min-height: 46px;
}
.place:hover { border-color: var(--ink-low); }
.place.here { border-color: var(--close); color: var(--close); }
.place.want { border-color: var(--cold); }
.place .tag {
  font-family: var(--mono);
  font-size: 0.56rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-low);
  white-space: nowrap;
}
.place.here .tag { color: var(--close); }
.place.want .tag { color: var(--cold); }

/* dials */
.dials { display: grid; gap: 1.35rem; margin-top: 1rem; }
.dials label { display: grid; gap: 0.35rem; }
.dials label > span:first-child {
  font-family: var(--mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-low);
}
.boot-dials { border: 0; padding: 0; margin: 0; }
.boot-dials legend { padding: 0 0 0.75rem; font-family: var(--mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-low); }
.boot-dials label { display: grid; grid-template-columns: 1fr auto; gap: 0.3rem 0.75rem; align-items: center; margin-bottom: 1rem; }
.boot-dials label span { font-family: var(--mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-low); }
.boot-dials output { font-family: var(--mono); font-size: 0.8rem; color: var(--ink); }
.boot-dials input { grid-column: 1 / -1; }

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 28px;
  background: none;
}
input[type="range"]::-webkit-slider-runnable-track { height: 1px; background: var(--rule); }
input[type="range"]::-moz-range-track { height: 1px; background: var(--rule); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 15px; height: 15px;
  margin-top: -7px;
  border-radius: 50%;
  background: var(--ink);
  border: 0;
}
input[type="range"]::-moz-range-thumb { width: 15px; height: 15px; border-radius: 50%; background: var(--ink); border: 0; }

/* the true mark: who she has actually become, under the slider you set */
.track { position: relative; }
.mark {
  position: absolute;
  bottom: 1px;
  width: 1px;
  height: 9px;
  background: var(--cold);
  pointer-events: none;
}
.mark::after {
  content: attr(data-v);
  position: absolute;
  top: 11px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 0.56rem;
  color: var(--cold);
}

.heeds { margin-top: 2rem; }
.heeds-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 0.5rem; }
.heeds-head b { font-family: var(--mono); font-weight: 400; font-size: 0.95rem; color: var(--close); }
.meter { height: 2px; background: var(--rule); }
#heeds-bar { height: 100%; background: var(--close); transition: width 0.6s ease, background 1s ease; }
#heeds-bar.cold { background: var(--cold); }
.heeds p { margin: 0.6rem 0 0; }

.vitals { display: grid; grid-template-columns: 1fr auto; gap: 0.35rem 1rem; margin: 0.75rem 0 1.5rem; }
.vitals dt { font-family: var(--mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-low); }
.vitals dd { margin: 0; font-family: var(--mono); font-size: 0.85rem; text-align: right; font-variant-numeric: tabular-nums; }

@media (min-width: 46rem) {
  :root { --measure: 38rem; }
  .vitals { grid-template-columns: 1fr auto 1fr auto; }
}

/* ══════════════════════════════════════════════════════════════ WHAT SHE IS ══
   The digit going up is the pleasure of an idle game. The sentence underneath is
   what stops her being a stat block. Both, always, together. */
.stats { display: grid; gap: 1rem; margin-top: 1rem; }
.stat { display: grid; gap: 0.35rem; }
.stat-head { display: flex; align-items: baseline; justify-content: space-between; }
.stat-head b { font-weight: 400; font-size: 1rem; }
.stat .n {
  font-family: var(--mono);
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
/* what the time did to her while you were not looking */
.stat .n .up {
  font-style: normal;
  margin-left: 0.4rem;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  color: var(--close);
}
.bar { position: relative; height: 3px; background: var(--rule); }
.bar .fill { height: 100%; background: var(--ink-mid); transition: width 0.8s ease; }
/* the mark showing where she was when you last looked in on her */
.bar .was {
  position: absolute;
  top: -3px; bottom: -3px;
  width: 1px;
  background: var(--close);
}
.stat .rank { font-size: 0.85rem; color: var(--ink-mid); line-height: 1.45; }

@media (prefers-reduced-motion: reduce) { .bar .fill { transition: none; } }

/* domains. and CONDITION reads differently from a skill, because it can be SPENT —
   a low Heart is not a woman who has not trained. It is a woman who has paid. */
.domain { margin-bottom: 1.75rem; }
.domain-head { display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: 0.85rem; }
.domain-blurb { font-size: 0.8rem; color: var(--ink-low); }

.stat.condition .fill { background: var(--close); }
.stat.condition .rank { color: var(--ink); }
.stat .n .down {
  font-style: normal;
  margin-left: 0.4rem;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  color: var(--blood);
}
/* Faith is the only number you are responsible for. It gets the warm colour, and when
   it is gone the whole row goes cold — because that is what has happened. */
.stat.faith .fill { background: var(--close); }
.stat.faith .n { color: var(--close); }

/* ══════════════════════════════════════════════════════════════ THE PEOPLE ══
   Not a friends list. Every relationship runs on two axes at once — closeness and
   friction — and the interesting ones have BOTH. So both bars are always shown,
   even when one of them is empty, because an empty friction bar is information. */
.person { display: grid; gap: 0.45rem; }
.person-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.person .kind {
  font-family: var(--mono);
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-low);
  white-space: nowrap;
}
.person.lover .kind, .person.lovers-badly .kind { color: var(--close); }
.person.feud .kind, .person.enemy .kind { color: var(--blood); }
.person.rival .kind, .person.complicated .kind { color: var(--cold); }

.person .says { font-size: 0.88rem; line-height: 1.5; color: var(--ink-mid); }

.axes { display: grid; gap: 0.25rem; }
.axis { display: grid; grid-template-columns: 3.6rem 1fr; align-items: center; gap: 0.6rem; }
.axis-bar { height: 2px; background: var(--rule); }
.axis-fill { height: 100%; }
.axis-fill.warm { background: var(--close); }
.axis-fill.hot { background: var(--blood); }

.person .tagline {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-low);
}
.person .tagline.secret { color: var(--close); }
.person .tagline.bad { color: var(--blood); }
.person .moment { font-size: 0.8rem; color: var(--ink-low); font-style: italic; line-height: 1.45; }

/* ═══════════════════════════════════════════════════════ WHAT SHE HAS, AND WHAT SHE IS
   Three additions, and one of them is the point of the whole sheet.

   THE GAP. `.bar .knew` is everything she has LEARNED; `.bar .fill` is how much of it
   she can still reach today. When a mark takes a hand, the pale bar stays where it was
   and the solid one retreats — so the sheet shows you, without a word, a woman standing
   next to the part of herself she cannot get to. That gap IS the character, and it is
   the only thing on this page I would refuse to remove. */
.bar .knew {
  position: absolute;
  top: 0; left: 0; height: 100%;
  background: var(--rule);
  border-right: 1px solid var(--ink-low);
  transition: width 0.8s ease;
}
.bar .fill { position: relative; z-index: 1; }
.stat .gap { font-size: 0.78rem; font-style: italic; line-height: 1.45; }
.stat .gap.short { color: var(--blood); }
.stat .gap.over { color: var(--close); }

/* the shared vocabulary of a small card: a name, a sentence, and some cold small print */
.item, .scar, .calling-now {
  display: grid;
  gap: 0.3rem;
  padding: 0.7rem 0.8rem;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 2px;
}
.kit, .marks, .calling { display: grid; gap: 0.6rem; margin-top: 1rem; }

.item b, .scar b, .calling-now b { font-weight: 400; font-size: 1rem; }
.item .from {
  font-size: 0.82rem;
  font-style: italic;
  color: var(--ink-low);
}
.scar .says, .calling-now .says { font-size: 0.88rem; line-height: 1.5; color: var(--ink-mid); }

.item .tagline, .scar .tagline, .calling-now .tagline {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-low);
}
.item .tagline.bad, .scar .tagline.bad, .calling-now .tagline.bad { color: var(--blood); }
.item .tagline.warm { color: var(--close); }
.item .moment, .scar .moment, .calling .moment {
  font-size: 0.8rem;
  color: var(--ink-low);
  font-style: italic;
  line-height: 1.45;
}
.calling-does { display: flex; flex-wrap: wrap; gap: 0.5rem 0.9rem; }

/* A THING SHE CANNOT USE. It is still hers, it is still in the pack, and it is doing
   nothing for her — so it is struck back, the way the dead are struck off the roll. */
.item.dead { border-style: dashed; }
.item.dead b { color: var(--ink-low); }

/* and the one she gave away, which is not hers and is not gone */
.item.lent { background: transparent; border-style: dotted; }
.item.lent b { color: var(--ink-mid); }

/* THE NAME SHE ANSWERS TO. The only warm-bordered thing in the panel: she chose it,
   out loud, in front of people, and she cannot put it back down. */
.calling-now { border-left: 2px solid var(--close); }

/* ═══════════════════════════════════════════════════════════════════ CAN SHE REACH YOU
   And the honest part: turning it on does not mean she will use it. The knock is gated on
   Faith exactly as her voice is, so a phone that has gone quiet has not broken — she has
   stopped believing anybody is there. This panel has to be able to say so. */
.reach { display: grid; gap: 0.6rem; margin-top: 1rem; }
.reach button { justify-self: start; }
.reach .reach-on {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--close);
}
.reach .reach-how {
  padding: 0.6rem 0.7rem;
  background: var(--card);
  border-left: 2px solid var(--ink-low);
  font-size: 0.84rem;
  color: var(--ink-mid);
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════════════ THE TWO TABS
   THE RECORD is the world's account of her: ruled, counted, third person — the file the
   watching power would keep on her. HER is what she actually is. The whole subject of this
   game is that those are not the same document, so they are not the same page.

   Her voice and her question are NOT in here. They sit above both tabs and are never tabbed
   away — you open this to hear from her, and a question hidden behind a tab is a question
   you miss, and missing it costs her Faith. That is too high a price for tidiness. */
.tabs {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  gap: 1.75rem;
  margin-top: 2.25rem;
  padding-top: 0.75rem;
  border-bottom: 1px solid var(--rule);
  background: var(--unlit);
}

.tab {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  margin-bottom: -1px;              /* sit the underline ON the rule, not under it */
  padding: 0.5rem 0.1rem 0.7rem;
  cursor: pointer;

  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-low);
  transition: color 0.15s ease;
}
.tab:hover { color: var(--ink-mid); }

/* The selected tab is lit, and it is the ONLY warm thing outside her voice — because the
   thing you are looking at is the thing the lamp is on. */
.tab.on {
  color: var(--ink);
  border-bottom-color: var(--close);
}
.tab:focus-visible { outline: 1px solid var(--ink-low); outline-offset: 3px; }

.ledger { padding-top: 1.5rem; }

@media (prefers-reduced-motion: reduce) { .tab { transition: none; } }

/* ══════════════════════════════════════════════════════════════ SINCE YOU LAST LOOKED
   The reason anybody opens the Her tab. Sentences, not deltas: "Hand +1 · Heart −4" is a
   diff, and "She buried Kessa Vane" is what happened. */
.changed { display: grid; gap: 0.55rem; margin-top: 1rem; }
.changed-when {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-low);
  margin: 0 0 0.35rem;
}
.change {
  margin: 0;
  padding-left: 0.8rem;
  border-left: 2px solid var(--rule);
  font-size: 0.94rem;
  line-height: 1.5;
  color: var(--ink-mid);
}
/* what it cost her, and what she gained. the only two colours this game has. */
.change.bad  { border-left-color: var(--blood); color: var(--ink); }
.change.warm { border-left-color: var(--close); color: var(--ink); }

/* ═══════════════════════════════════════════════════════════ WHAT YOU CAN DO FOR HER
   The only thing you do TO her. The cost is printed on every one of them, always, because
   the cost IS the mechanic: a blessed woman glows, and something is looking for exactly
   that. And when she has stopped believing in you, the reason is spelled out rather than
   greyed out — that message is the bill for months of not turning up. */
.bless { display: grid; gap: 0.9rem; margin-top: 1rem; }
.gift {
  display: grid;
  gap: 0.35rem;
  padding: 0.75rem 0.85rem;
  background: var(--card);
  border: 1px solid var(--rule);
  border-left: 2px solid var(--close);
  border-radius: 2px;
}
.gift.shut { border-left-color: var(--rule); opacity: 0.62; }
.gift-do { justify-self: start; }
.gift-do:disabled { cursor: not-allowed; opacity: 0.5; }
.gift-what { font-size: 0.88rem; line-height: 1.5; color: var(--ink-mid); }
.gift-cost, .gift-shut {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--ink-low);
}
.gift-shut { color: var(--blood); }

/* THE VISIT — a blessing's warmer, rarer cousin. Thicker lamplight edge; it is the one
   thing you can do that is not a gift but a presence. */
.visit { margin-top: 0.9rem; }
.visit-gift { border-left-width: 3px; box-shadow: -1px 0 12px -6px var(--close); }

/* ═══════════════════════════════════════════════════════════ ASK HER SOMETHING */
.commune { margin-top: 1rem; }
.commune-grid { display: grid; gap: 0.5rem; grid-template-columns: 1fr 1fr; }
.ask-q {
  width: 100%;
  text-align: left;
  background: none;
  border: 1px solid var(--rule);
  border-radius: 2px;
  color: var(--ink);
  padding: 0.6rem 0.7rem;
  font-size: 0.82rem;
  line-height: 1.4;
  cursor: pointer;
}
.ask-q:hover { border-color: var(--close); color: var(--close); }
.commune-pending { font-size: 0.92rem; line-height: 1.5; color: var(--ink); margin: 0 0 0.3rem; }
@media (max-width: 480px) { .commune-grid { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════════════ WHAT SHE IS HUNTING */
.hunt { display: grid; gap: 0.7rem; margin-top: 1rem; }
.quarry {
  display: grid;
  gap: 0.3rem;
  padding: 0.75rem 0.85rem;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 2px;
}
.quarry b { font-weight: 400; font-size: 1rem; }
.quarry .says { font-size: 0.88rem; line-height: 1.5; color: var(--ink-mid); }
.quarry .moment { font-size: 0.8rem; font-style: italic; color: var(--ink-low); line-height: 1.45; }
.quarry .tagline {
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-low);
}
.quarry .tagline.bad { color: var(--blood); }
.quarry.taken { border-left: 2px solid var(--close); }
.quarry.here  { border-left: 2px solid var(--blood); }
/* THE GREAT ONE. It gets the only border in the game that is all the way blood. */
.quarry.great { border: 1px solid var(--blood); }
.quarry.dead b { color: var(--close); }

/* the chronicle, when she hunts */
.entry.k-hunt p { color: var(--ink); }
.entry.k-bounty p { color: var(--ink-mid); }
.entry.k-bless p { color: var(--close); }

/* A blessing sits in the same list as her scars — because that is what it is: a thing that
   happened to her, that she did not choose, that she cannot put down. The difference is
   only that the world did not leave it. You did. */
.scar.given { border-left: 2px solid var(--close); }
.scar.given b { color: var(--close); }