/* ============================================================
   Enterprise Rising — Purchase Eligibility Ledger
   Aesthetic: dark warm "ledger book" — ink, gold leaf, parchment type.
   The badge is black + gold, so the interface is the inside of the ledger
   and the PDF is the paper that comes out of it.
   ============================================================ */

@font-face {
  font-family: 'Bodoni Moda';
  src: url('/fonts/bodoni-moda-var.woff2') format('woff2-variations');
  font-weight: 400 900;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('/fonts/archivo-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Courier Prime';
  src: url('/fonts/courier-prime-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Courier Prime';
  src: url('/fonts/courier-prime-700.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

:root {
  --ink:        #14120e;
  --ink-2:      #1a1712;
  --ink-3:      #221d16;
  --ink-4:      #2c261c;
  --gold:       #d3a03a;
  --gold-hi:    #f2d79c;
  --gold-dim:   #8a6c2b;
  --cream:      #f2e9d7;
  --cream-dim:  #b8ac97;
  --muted:      #8b8171;
  --allow:      #8aa95c;
  --cond:       #d68f2c;
  --deny:       #b95448;
  --hair:       color-mix(in oklab, var(--gold) 22%, transparent);
  --hair-soft:  color-mix(in oklab, var(--gold) 11%, transparent);
  --shadow:     0 22px 60px -28px rgb(0 0 0 / 0.85);
  --display:    'Bodoni Moda', 'Iowan Old Style', Georgia, serif;
  --body:       'Archivo', 'Helvetica Neue', Helvetica, sans-serif;
  --mono:       'Courier Prime', 'Courier New', monospace;
  --rail:       clamp(2.6rem, 7vw, 4.5rem);
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background:
    radial-gradient(120% 70% at 50% -10%, #221c13 0%, transparent 62%),
    radial-gradient(90% 60% at 110% 20%, #1d1811 0%, transparent 55%),
    var(--ink);
  color: var(--cream);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
  overflow-x: hidden;
  padding-bottom: env(safe-area-inset-bottom);
}

/* Fixed grain overlay — never on a scrolling container. */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 40;
  opacity: 0.05;
  mix-blend-mode: overlay;
  /* A pre-rendered tile, not a live SVG feTurbulence filter: the filter had to
     be rasterised for a full-viewport blended layer, which made every scroll
     frame expensive on low-end phones. */
  background-image: url("/assets/grain.png");
  background-size: 128px 128px;
}

img { max-width: 100%; height: auto; }

/* ---------------- topbar ---------------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .55rem clamp(.85rem, 3vw, 2rem);
  padding-top: calc(.55rem + env(safe-area-inset-top));
  background: color-mix(in oklab, var(--ink) 88%, transparent);
  /* Safari only took the unprefixed property in 18; without the prefix the
     bar loses its blur on every earlier iPhone, iPad, and Mac in the field. */
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--hair-soft);
}
/* With the step tracker on board the bar is two rows: brand and actions, then
   the steps across the full width. A grid rather than a wrapping flex row, so a
   narrow phone squeezes the brand instead of dropping the actions to a line of
   their own. */
.topbar:has(.steps) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  row-gap: .45rem;
}
.topbar .steps { grid-column: 1 / -1; }
.brandlink { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: inherit; }
.topmark { border-radius: 50%; box-shadow: 0 0 0 1px var(--hair); }
.topwords { display: flex; flex-direction: column; line-height: 1.05; }
.topwords b {
  font-family: var(--display); font-weight: 700; font-size: .98rem;
  letter-spacing: .01em; color: var(--gold-hi);
}
.topwords i {
  font-style: normal; font-size: .62rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--muted);
}
.topactions { display: flex; align-items: center; gap: .5rem; }

.netpill {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .64rem; letter-spacing: .16em; text-transform: uppercase;
  padding: .34rem .6rem; border-radius: 999px;
  border: 1px solid var(--hair); color: var(--cream-dim);
  white-space: nowrap;
}
.netdot { width: 6px; height: 6px; border-radius: 50%; background: var(--allow); box-shadow: 0 0 0 3px color-mix(in oklab, var(--allow) 22%, transparent); }
.netpill[data-state="offline"] { border-color: color-mix(in oklab, var(--cond) 40%, transparent); color: var(--cond); }
.netpill[data-state="offline"] .netdot { background: var(--cond); box-shadow: 0 0 0 3px color-mix(in oklab, var(--cond) 22%, transparent); }

/* ---------------- buttons ---------------- */
.goldbtn, .ghostbtn {
  font-family: var(--body); font-size: .78rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  padding: .78rem 1.25rem; border-radius: 2px; cursor: pointer;
  transition: transform .16s cubic-bezier(.2,.8,.3,1), box-shadow .2s, background .2s, color .2s, border-color .2s;
}
.goldbtn {
  border: 1px solid var(--gold);
  background: linear-gradient(178deg, var(--gold-hi), var(--gold) 55%, #a97f24);
  color: #1a1409;
  box-shadow: 0 10px 26px -14px rgb(211 160 58 / .7), inset 0 1px 0 rgb(255 255 255 / .35);
}
.goldbtn:hover { transform: translateY(-1px); box-shadow: 0 16px 32px -14px rgb(211 160 58 / .85), inset 0 1px 0 rgb(255 255 255 / .45); }
.goldbtn:active { transform: translateY(1px) scale(.995); }
.goldbtn[disabled] { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.ghostbtn {
  border: 1px solid var(--hair);
  background: transparent; color: var(--cream-dim);
}
.ghostbtn:hover { border-color: var(--gold); color: var(--gold-hi); background: color-mix(in oklab, var(--gold) 8%, transparent); }
.ghostbtn.small, .netpill { padding: .42rem .7rem; font-size: .66rem; }
/* The same chrome is used on links (manual, back to the ledger). */
a.goldbtn, a.ghostbtn { display: inline-block; text-decoration: none; }
:where(button, a, input, select, textarea):focus-visible {
  outline: 2px solid var(--gold-hi); outline-offset: 2px;
}

/* ---------------- grant snapshot ---------------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.snapshot {
  margin: 0 0 clamp(1rem, 3vw, 1.8rem);
  padding: clamp(1.2rem, 3.4vw, 2rem) clamp(1.1rem, 3.4vw, 2rem) clamp(1.3rem, 3.4vw, 1.9rem);
  border: 1px solid var(--hair);
  border-radius: 3px;
  background:
    linear-gradient(168deg, color-mix(in oklab, var(--gold) 7%, var(--ink-3)) 0%, var(--ink-2) 46%, var(--ink-2) 100%);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
/* Gold leaf along the top edge — the same treatment the record PDF uses. */
.snapshot::before {
  content: '';
  position: absolute; inset: 0 0 auto; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold) 18%, var(--gold-hi) 50%, var(--gold) 82%, transparent);
  opacity: .8;
}

.snapshead {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  justify-content: space-between; gap: 1rem 1.6rem;
}
.snapshead-copy { min-width: 0; flex: 1 1 22rem; }
.snapshot h2 {
  margin: .2rem 0 .5rem;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .8rem;
  font-family: var(--display); font-weight: 400; line-height: 1.05;
}
.snapaward {
  font-family: var(--display); font-weight: 700; font-style: normal;
  font-size: clamp(1.9rem, 6vw, 2.9rem);
  letter-spacing: -.01em;
  color: var(--gold-hi);
  text-shadow: 0 1px 0 rgb(0 0 0 / .5);
}
.snapshot h2 em {
  font-style: italic; font-size: clamp(1rem, 2.6vw, 1.35rem); color: var(--cream);
}
/* Recipient and period of performance — the grant file, restated where the
   money is, so nobody reads the snapshot as belonging to another award. */
.snapwho {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .7rem;
  margin: 0 0 .6rem;
  font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
}
.snapwho b { color: var(--cream); font-weight: 600; }
.snapwho span { color: var(--muted); letter-spacing: .06em; text-transform: none; font-size: .8rem; }

.snapshead-acts { display: flex; flex-direction: column; align-items: stretch; gap: .5rem; flex: 0 0 auto; }
.snapshead-acts .goldbtn, .snapshead-acts .ghostbtn { text-align: center; text-decoration: none; }

.snapfigures {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1px; margin: 1.3rem 0 .9rem;
  background: var(--hair-soft); border: 1px solid var(--hair-soft); border-radius: 2px;
  overflow: hidden;
}
.snapfigures > div { background: color-mix(in oklab, var(--ink) 50%, var(--ink-3)); padding: .7rem .85rem; }
.snapfigures dt { font-size: .58rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.snapfigures dd {
  margin: .2rem 0 0; font-size: clamp(1.05rem, 3vw, 1.3rem);
  font-family: var(--mono); color: var(--cream);
}
.snapfigures > div:last-child dd { color: var(--gold-hi); }
.snapfigures > div[data-over="true"] dd { color: var(--deny); }

.snapmeter {
  display: flex; height: 9px; border-radius: 999px; overflow: hidden;
  background: color-mix(in oklab, var(--ink) 65%, transparent);
  border: 1px solid var(--hair-soft); margin-bottom: 1.3rem;
}
.snapmeter-fill { background: linear-gradient(90deg, var(--gold-dim), var(--gold)); transition: width .5s cubic-bezier(.2,.8,.25,1); }
.snapmeter-over { background: var(--deny); transition: width .5s cubic-bezier(.2,.8,.25,1); }

.snaptablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.snaptable { width: 100%; border-collapse: collapse; font-size: .86rem; min-width: 30rem; }
.snaptable th, .snaptable td { text-align: left; padding: .6rem .7rem; }
.snaptable thead th {
  font-family: var(--body); font-weight: 500; font-size: .58rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
  border-bottom: 1px solid var(--hair); white-space: nowrap;
}
.snaptable .num, .snaptable td.num { text-align: right; font-family: var(--mono); white-space: nowrap; }
.snaptable tbody tr { border-bottom: 1px solid var(--hair-soft); }
.snaptable tbody tr:hover { background: color-mix(in oklab, var(--gold) 4%, transparent); }
.snaptable tbody th { font-weight: 500; color: var(--cream); }
.snapcode {
  display: inline-block; width: 1.1rem; font-family: var(--mono); font-size: .68rem;
  color: var(--gold-dim); text-transform: lowercase;
}
.snapspent { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .5rem; }
.snapspent b { font-family: var(--mono); font-weight: 400; color: var(--cream); }
.snapspent i { font-style: normal; color: var(--muted); }
.snapspent i b { color: var(--gold-hi); }
.snaptable tr[data-state="over"] .snapspent i b { color: var(--deny); }
.snaptable tr[data-state="tight"] .snapspent i b { color: var(--cond); }
.snaptable tr[data-state="unfunded"] th { color: var(--muted); }
.snapline {
  display: block; height: 3px; margin-top: .38rem; border-radius: 999px;
  background: color-mix(in oklab, var(--ink) 65%, transparent);
  overflow: hidden;
}
.snapline span { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-dim), var(--gold)); }
.snaptable tr[data-state="over"] .snapline span { background: var(--deny); }
.snaptable tr[data-state="tight"] .snapline span { background: var(--cond); }
.snaptable tfoot th, .snaptable tfoot td {
  border-top: 1px solid var(--hair); padding-top: .75rem;
  font-family: var(--display); font-size: .95rem; color: var(--gold-hi);
}
.snaptable tfoot td.mono, .snaptable tfoot td.num { font-family: var(--mono); }
.snapfoot { margin: 1rem 0 0; font-size: .78rem; color: var(--muted); min-height: 1.2em; }
.snapfoot a { color: var(--gold); text-decoration: none; border-bottom: 1px solid var(--hair); }

/* approved-budget grid in the grant file */
.awardgrid .allocrow { border-color: var(--hair-soft); }
.awardsum {
  display: flex; align-items: baseline; justify-content: flex-end; gap: .7rem;
  margin: .7rem 0 0; padding-top: .6rem; border-top: 1px solid var(--hair-soft);
  font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
}
.awardsum b { font-size: 1.02rem; letter-spacing: 0; text-transform: none; color: var(--gold-hi); font-weight: 400; }
.subhead .optional {
  margin-left: .5rem; font-size: .55rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--hair); border-radius: 999px; padding: .12rem .45rem;
  vertical-align: middle;
}

/* ---------------- masthead ---------------- */
main { max-width: 1180px; margin: 0 auto; padding: 0 clamp(.85rem, 3vw, 2rem); }

.masthead {
  display: grid;
  gap: clamp(1.2rem, 4vw, 3rem);
  align-items: center;
  padding: clamp(2rem, 6vw, 4.2rem) 0 clamp(1.6rem, 4vw, 2.6rem);
  border-bottom: 1px solid var(--hair-soft);
}
@media (min-width: 860px) {
  .masthead { grid-template-columns: minmax(240px, 34%) 1fr; }
}
.masthead-seal { position: relative; justify-self: center; max-width: 340px; }
.masthead-seal::after {
  content: ''; position: absolute; inset: -12%;
  background: radial-gradient(circle, color-mix(in oklab, var(--gold) 26%, transparent) 0%, transparent 66%);
  filter: blur(26px); z-index: -1;
  animation: breathe 9s ease-in-out infinite;
}
/* Set by app.js while the masthead is scrolled out of view, so the blurred glow
   stops repainting behind content nobody can see. */
.masthead-seal.is-offscreen::after { animation-play-state: paused; }
@keyframes breathe { 0%,100% { opacity: .55; transform: scale(1); } 50% { opacity: .95; transform: scale(1.05); } }
.masthead-seal img { display: block; filter: drop-shadow(0 18px 34px rgb(0 0 0 / .6)); }

.eyebrow {
  margin: 0 0 .9rem; font-size: .64rem; letter-spacing: .28em;
  text-transform: uppercase; color: var(--gold); font-weight: 600;
}
.eyebrow span { font-family: var(--mono); letter-spacing: .06em; color: var(--cream-dim); }

.masthead h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.9rem, 11vw, 5.4rem);
  line-height: .87;
  letter-spacing: -.02em;
  margin: 0 0 1.1rem;
  color: var(--cream);
  text-wrap: balance;
}
.masthead h1 em {
  font-style: italic; font-weight: 600;
  color: transparent;
  background: linear-gradient(96deg, var(--gold-hi), var(--gold) 48%, #b0812a);
  -webkit-background-clip: text; background-clip: text;
}
.lede { margin: 0 0 1.7rem; max-width: 56ch; color: var(--cream-dim); font-size: clamp(.96rem, 2.4vw, 1.06rem); }
.lede strong { color: var(--cream); font-weight: 600; }

.masthead-meta { display: flex; flex-wrap: wrap; gap: 1.6rem 2.4rem; }
.masthead-meta div { display: flex; flex-direction: column-reverse; gap: .1rem; }
.masthead-meta dt { font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.masthead-meta dd {
  margin: 0; font-family: var(--display); font-weight: 700;
  font-size: 1.7rem; line-height: 1; color: var(--gold-hi);
}

/* ---------------- ledger rail + stations ---------------- */
.rail { position: relative; padding: clamp(1.6rem, 5vw, 3rem) 0 1rem; }
.rail::before {
  content: ''; position: absolute; top: 0; bottom: 3rem;
  left: calc(var(--rail) / 2); width: 1px;
  background: linear-gradient(var(--hair), var(--hair-soft) 70%, transparent);
}

.station { position: relative; padding-left: var(--rail); margin-bottom: clamp(1.5rem, 4vw, 2.4rem); }
/* Jumps land below the sticky header and step tracker, not under them. */
.station, .snapshot { scroll-margin-top: calc(var(--headh, 7.5rem) + .8rem); }

.stationhead {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .4rem 1rem;
  align-items: start;
  margin-bottom: 1rem;
}
.stationhead > div { grid-column: 1; }
.stationhead > button { grid-column: 2; grid-row: 1; align-self: center; }
.stationhead-acts {
  grid-column: 2; grid-row: 1; align-self: center;
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .4rem;
}

.stationno {
  position: absolute;
  left: 0; top: -.1rem;
  width: var(--rail);
  display: grid; place-items: center;
  font-family: var(--mono); font-weight: 700; font-size: .72rem;
  color: var(--gold);
  background: var(--ink);
  border: 1px solid var(--hair);
  border-radius: 50%;
  aspect-ratio: 1;
  max-width: 2.6rem;
  margin-left: calc((var(--rail) - min(2.6rem, var(--rail))) / 2);
}
.station h2 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.35rem, 4.4vw, 1.85rem);
  margin: 0; line-height: 1.05; letter-spacing: -.01em;
}
.stationsub { margin: .3rem 0 0; color: var(--muted); font-size: .86rem; max-width: 62ch; }

.stationbody {
  background: linear-gradient(168deg, var(--ink-3), var(--ink-2) 70%);
  border: 1px solid var(--hair-soft);
  border-radius: 3px;
  padding: clamp(1rem, 3.2vw, 1.7rem);
  box-shadow: var(--shadow);
}

/* ---------------- forms ---------------- */
.fieldgrid { display: grid; grid-template-columns: 1fr; gap: .9rem; }
@media (min-width: 620px) {
  .fieldgrid { grid-template-columns: repeat(3, 1fr); }
  .span2 { grid-column: span 2; }
  .span3 { grid-column: span 3; }
}
.field { display: flex; flex-direction: column; gap: .34rem; min-width: 0; }
.field > span,
.field > label {
  font-size: .62rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
}
.field .req { color: var(--gold-dim); font-weight: 600; letter-spacing: .1em; }
/* The caption and its guidance mark, on one row that is not the label — see
   `js/coach.js` for why the mark may not live inside it. */
.fieldtop { display: flex; align-items: center; flex-wrap: wrap; }
/* 1rem is not a style choice: iOS Safari zooms the whole page in when a focused
   field is under 16px, which on a signing form means the layout jumps and the
   rest of the record scrolls out of view part-way through entry. */
input, select, textarea {
  font-family: var(--body); font-size: 1rem;
  background: color-mix(in oklab, var(--ink) 70%, transparent);
  border: 1px solid var(--hair-soft);
  border-bottom-color: var(--hair);
  color: var(--cream);
  border-radius: 2px;
  padding: .7rem .78rem;
  width: 100%;
  transition: border-color .18s, background .18s;
}
textarea { resize: vertical; }
/* iOS paints an inset shadow and its own corner radius over any field it
   recognises, and a date field it has skinned ignores the width of the column
   it sits in. Prefixed only, and deliberately: the unprefixed property would
   also take the spinners off number fields in Chrome and Firefox, which is a
   change to how the form looks everywhere rather than a fix for Safari. */
:is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
    input[type="date"], input[type="search"], input[type="url"], textarea) {
  -webkit-appearance: none;
}
/* Left, because iOS centres the date in a field it no longer skins. */
input[type="date"] { text-align: left; }
input::placeholder, textarea::placeholder { color: color-mix(in oklab, var(--muted) 70%, transparent); }
input:hover, select:hover, textarea:hover { border-color: var(--hair); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--gold);
  background: color-mix(in oklab, var(--gold) 5%, var(--ink));
}
select { -webkit-appearance: none; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(135deg, var(--gold) 50%, transparent 50%); background-position: calc(100% - 18px) 52%, calc(100% - 12px) 52%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 2.2rem; }
select option { background: var(--ink-3); color: var(--cream); }
.moneywrap { position: relative; display: flex; align-items: stretch; }
.moneywrap > span {
  display: grid; place-items: center; padding: 0 .7rem;
  font-family: var(--mono); color: var(--gold);
  border: 1px solid var(--hair-soft); border-right: 0;
  background: color-mix(in oklab, var(--ink) 80%, transparent);
}
.moneywrap input { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.field > :is(span, label) .opt {
  margin-left: .45rem; font-style: normal; font-size: .52rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted);
  border: 1px solid var(--hair); border-radius: 999px; padding: .1rem .4rem;
}
.err { display: none; font-style: normal; font-size: .72rem; color: var(--deny); }
.field.invalid .err { display: block; }
.field.invalid input, .field.invalid select { border-color: var(--deny); }

.subhead {
  font-family: var(--display); font-weight: 700; font-size: 1.05rem;
  margin: 1.7rem 0 .3rem; padding-top: 1.2rem;
  border-top: 1px solid var(--hair-soft);
}
.hint { margin: 0 0 .9rem; font-size: .78rem; color: var(--muted); max-width: 64ch; }
.formfoot { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; margin-top: 1.3rem; }
.savenote { font-size: .74rem; color: var(--allow); letter-spacing: .04em; }

.allocgrid { display: grid; grid-template-columns: 1fr; gap: .55rem; }
@media (min-width: 700px) { .allocgrid { grid-template-columns: 1fr 1fr; } }
.allocrow {
  display: grid; grid-template-columns: 1fr 8.5rem; gap: .6rem; align-items: center;
  padding: .42rem .55rem; border-radius: 2px;
  border: 1px solid transparent;
  transition: border-color .18s, background .18s;
}
.allocrow:hover { border-color: var(--hair-soft); background: color-mix(in oklab, var(--gold) 3%, transparent); }
.allocrow > label { font-size: .82rem; color: var(--cream-dim); line-height: 1.25; }
.allocrow .grp { display: block; font-size: .58rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-dim); }
.allocrow input { padding: .45rem .55rem; font-family: var(--mono); font-size: 1rem; text-align: right; }

/* ---------------- empty / locked ---------------- */
.emptyslate, .locked {
  display: flex; flex-direction: column; align-items: center; gap: .8rem;
  text-align: center; padding: 2.2rem 1rem; color: var(--muted);
  border: 1px dashed var(--hair-soft); border-radius: 3px;
}
.emptyslate svg { color: var(--gold-dim); }
.emptyslate[hidden], .locked[hidden] { display: none; }
.emptyslate p, .locked p { margin: 0; font-size: .86rem; max-width: 44ch; }

/* ---------------- determination card ---------------- */
.verdictbanner {
  position: relative; overflow: hidden;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1rem;
  padding: 1.05rem 1.2rem;
  border-radius: 2px;
  border: 1px solid;
  margin-bottom: 1.3rem;
  animation: stampin .5s cubic-bezier(.2,1.3,.4,1) both;
}
@keyframes stampin {
  from { opacity: 0; transform: scale(1.06) rotate(-.6deg); }
  to   { opacity: 1; transform: none; }
}
.verdictbanner b {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.4rem, 5vw, 2rem); line-height: 1;
  letter-spacing: -.01em;
}
.verdictbanner span { font-size: .82rem; color: var(--cream-dim); }
.verdictbanner::after {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(115deg, transparent 0 12px, rgb(255 255 255 / .028) 12px 24px);
  pointer-events: none;
}
.v-allowable    { border-color: color-mix(in oklab, var(--allow) 55%, transparent); background: color-mix(in oklab, var(--allow) 14%, var(--ink-3)); }
.v-allowable b  { color: color-mix(in oklab, var(--allow) 80%, var(--cream)); }
.v-conditional  { border-color: color-mix(in oklab, var(--cond) 55%, transparent); background: color-mix(in oklab, var(--cond) 13%, var(--ink-3)); }
.v-conditional b{ color: color-mix(in oklab, var(--cond) 82%, var(--cream)); }
.v-unallowable  { border-color: color-mix(in oklab, var(--deny) 58%, transparent); background: color-mix(in oklab, var(--deny) 15%, var(--ink-3)); }
.v-unallowable b{ color: color-mix(in oklab, var(--deny) 78%, var(--cream)); }

.factstrip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: .1rem; margin-bottom: 1.4rem;
  border: 1px solid var(--hair-soft); border-radius: 2px; overflow: hidden;
  background: var(--hair-soft);
}
.factstrip > div { background: var(--ink-2); padding: .75rem .85rem; }
.factstrip dt { font-size: .58rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-bottom: .22rem; }
.factstrip dd { margin: 0; font-size: .95rem; color: var(--cream); }
.factstrip dd.mono { font-family: var(--mono); }

.findings { list-style: none; margin: 0 0 1.4rem; padding: 0; counter-reset: f; }
.findings li {
  counter-increment: f;
  display: grid; grid-template-columns: 2rem 1fr; gap: .1rem .8rem;
  padding: .85rem 0; border-top: 1px solid var(--hair-soft);
  animation: slidein .45s ease both;
}
@keyframes slidein { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
.findings li::before {
  content: counter(f, decimal-leading-zero);
  grid-row: 1 / span 3;
  font-family: var(--mono); font-size: .72rem; color: var(--gold-dim); padding-top: .2rem;
}
.findings h4 { margin: 0; font-size: .95rem; font-weight: 600; line-height: 1.35; }
.findings p { margin: .28rem 0 0; font-size: .84rem; color: var(--cream-dim); }
.findings cite {
  display: inline-block; margin-top: .4rem; font-style: normal;
  font-family: var(--mono); font-size: .7rem; color: var(--gold-dim);
}
.flevel {
  display: inline-block; margin-right: .5rem; vertical-align: 2px;
  font-size: .56rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700;
  padding: .16rem .42rem; border-radius: 2px; border: 1px solid;
}
.fl-block     { color: var(--deny);  border-color: color-mix(in oklab, var(--deny) 45%, transparent);  background: color-mix(in oklab, var(--deny) 12%, transparent); }
.fl-condition { color: var(--cond);  border-color: color-mix(in oklab, var(--cond) 45%, transparent);  background: color-mix(in oklab, var(--cond) 12%, transparent); }
.fl-ok        { color: var(--allow); border-color: color-mix(in oklab, var(--allow) 45%, transparent); background: color-mix(in oklab, var(--allow) 12%, transparent); }
.fl-note      { color: var(--cream-dim); border-color: var(--hair); }

.doclist { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.doclist li { display: flex; gap: .55rem; font-size: .85rem; color: var(--cream-dim); }
.doclist li::before { content: '▢'; color: var(--gold-dim); }

.budgetbar { margin: 0 0 1.3rem; }
.budgetbar .track { height: 8px; border-radius: 999px; background: color-mix(in oklab, var(--ink) 60%, transparent); border: 1px solid var(--hair-soft); overflow: hidden; display: flex; }
.budgetbar .used { background: linear-gradient(90deg, var(--gold-dim), var(--gold)); }
.budgetbar .this { background: repeating-linear-gradient(45deg, var(--cond) 0 4px, color-mix(in oklab, var(--cond) 60%, transparent) 4px 8px); }
.budgetbar .over { background: var(--deny); }
.budgetlegend { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; margin-top: .5rem; font-size: .72rem; color: var(--muted); }
.budgetlegend b { color: var(--cream); font-family: var(--mono); font-weight: 400; }

/* ---------------- signature ---------------- */
.sigmodes { display: inline-flex; border: 1px solid var(--hair); border-radius: 999px; padding: .18rem; gap: .18rem; margin-bottom: 1rem; }
.sigmode {
  border: 0; background: transparent; cursor: pointer; color: var(--cream-dim);
  font-family: var(--body); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
  padding: .48rem .9rem; border-radius: 999px; transition: background .2s, color .2s;
}
.sigmode.is-on { background: color-mix(in oklab, var(--gold) 88%, #fff 0%); color: #1a1409; }

.sigcanvaswrap {
  position: relative;
  background:
    linear-gradient(var(--ink-2), var(--ink-2)),
    repeating-linear-gradient(0deg, transparent 0 27px, var(--hair-soft) 27px 28px);
  background-blend-mode: normal;
  border: 1px solid var(--hair);
  border-radius: 2px;
  aspect-ratio: 10 / 3;
  overflow: hidden;
  touch-action: none;
}
#sigCanvas { display: block; width: 100%; height: 100%; cursor: crosshair; position: relative; z-index: 2; }
.sigbaseline { position: absolute; left: 6%; right: 6%; bottom: 24%; border-bottom: 1px dashed var(--hair); z-index: 1; }
.sigplaceholder {
  position: absolute; left: 0; right: 0; bottom: 27%; text-align: center;
  font-size: .78rem; color: var(--muted); pointer-events: none; z-index: 1;
  transition: opacity .25s;
}
.sigcanvaswrap.inked .sigplaceholder, .sigcanvaswrap.inked .sigbaseline { opacity: 0; }
.sigtools { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin-top: .7rem; }
.sigtools .hint { margin: 0; }

.typedpreview {
  margin-top: .9rem; min-height: 5.5rem;
  display: grid; place-items: center;
  border: 1px solid var(--hair); border-radius: 2px;
  background: var(--ink-2);
  font-family: var(--display); font-style: italic; font-weight: 600;
  font-size: clamp(1.6rem, 7vw, 2.6rem);
  color: var(--gold-hi);
  padding: .8rem;
  word-break: break-word; text-align: center;
}

.stamp {
  font-family: var(--mono); font-size: .86rem; color: var(--gold-hi);
  padding: .7rem .78rem; border: 1px dashed var(--hair);
  border-radius: 2px; background: color-mix(in oklab, var(--gold) 5%, transparent);
}

.attest {
  display: grid; grid-template-columns: auto 1fr; gap: .8rem;
  margin-top: 1.3rem; padding: 1rem;
  border: 1px solid var(--hair-soft); border-radius: 2px;
  background: color-mix(in oklab, var(--ink) 45%, transparent);
  font-size: .8rem; color: var(--cream-dim); line-height: 1.55;
}
.attest input { width: 1.15rem; height: 1.15rem; accent-color: var(--gold); margin-top: .15rem; }

/* ---------------- share ---------------- */
.issuedbar {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .9rem;
  padding: .95rem 1.05rem; margin-bottom: 1.3rem;
  border: 1px solid color-mix(in oklab, var(--gold) 30%, transparent);
  border-left: 3px solid var(--gold);
  border-radius: 2px;
  background: color-mix(in oklab, var(--gold) 7%, transparent);
}
.issuedlabel { display: block; font-size: .58rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.issuedbar strong { font-size: .95rem; font-weight: 600; color: var(--cream); }
.issuedbar .mono { font-family: var(--mono); font-weight: 400; }
.issuedbar .digest { font-size: .74rem; word-break: break-all; color: var(--gold-hi); }

.sharegrid { display: grid; grid-template-columns: 1fr; gap: .7rem; }
@media (min-width: 560px) { .sharegrid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .sharegrid { grid-template-columns: repeat(3, 1fr); } }
.sharecard {
  display: grid; gap: .3rem; text-align: left; cursor: pointer;
  padding: 1rem 1.05rem 1.05rem;
  border: 1px solid var(--hair-soft); border-radius: 2px;
  background: linear-gradient(170deg, var(--ink-4), var(--ink-2));
  color: var(--cream); font-family: var(--body);
  transition: transform .18s cubic-bezier(.2,.8,.3,1), border-color .18s, box-shadow .18s;
}
.sharecard:hover { transform: translateY(-2px); border-color: var(--gold); box-shadow: 0 14px 30px -18px rgb(211 160 58 / .6); }
.sharecard:active { transform: translateY(0) scale(.99); }
.sharecard svg { width: 22px; height: 22px; fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; margin-bottom: .35rem; }
.sharecard b { font-size: .95rem; font-weight: 600; }
.sharecard i { font-style: normal; font-size: .76rem; color: var(--muted); line-height: 1.4; }
.sharecard[hidden] { display: none; }
.sharefoot { margin: 1rem 0 0; font-size: .78rem; color: var(--allow); min-height: 1.2em; }

/* ---------------- ledger ---------------- */
.ledger { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; background: var(--hair-soft); border: 1px solid var(--hair-soft); border-radius: 2px; overflow: hidden; }
.ledger li {
  display: grid; gap: .2rem .9rem;
  grid-template-columns: 1fr auto;
  padding: .9rem 1rem; background: var(--ink-2);
}
.ledger .lrow1 { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem .7rem; }
.ledger .lno { font-family: var(--mono); font-size: .78rem; color: var(--gold); }
.ledger .litem { font-weight: 600; font-size: .94rem; }
.ledger .lmeta { grid-column: 1; font-size: .77rem; color: var(--muted); }
.ledger .lnums {
  grid-column: 1; display: flex; flex-wrap: wrap; gap: .25rem .5rem; margin-top: .25rem;
}
.ledger .lnums span {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .02em;
  color: var(--cream-dim); border: 1px solid var(--hair-soft);
  padding: .1rem .35rem; border-radius: 2px;
}
.ledger .lnums span:empty { display: none; }
.ledger .lacts { grid-column: 2; grid-row: 1 / -1; display: flex; align-items: center; gap: .4rem; }
.vchip {
  font-size: .56rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700;
  padding: .2rem .45rem; border-radius: 2px; border: 1px solid;
}
.vchip.allowable   { color: var(--allow); border-color: color-mix(in oklab, var(--allow) 45%, transparent); }
.vchip.conditional { color: var(--cond);  border-color: color-mix(in oklab, var(--cond) 45%, transparent); }
.vchip.unallowable { color: var(--deny);  border-color: color-mix(in oklab, var(--deny) 45%, transparent); }
.syncchip { font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.syncchip[data-synced="true"] { color: var(--allow); }
.iconbtn {
  display: grid; place-items: center; width: 2.2rem; height: 2.2rem;
  border: 1px solid var(--hair); border-radius: 2px; background: transparent;
  cursor: pointer; transition: border-color .18s, background .18s;
}
.iconbtn svg { width: 16px; height: 16px; fill: none; stroke: var(--gold); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.iconbtn:hover { border-color: var(--gold); background: color-mix(in oklab, var(--gold) 9%, transparent); }

/* ---------------- ledger: filters, status, lifecycle ---------------- */
.ledgerfilter { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .9rem; }
.filtertab {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--body); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); background: transparent; cursor: pointer;
  border: 1px solid var(--hair-soft); border-radius: 2px; padding: .42rem .7rem;
  transition: color .18s, border-color .18s, background .18s;
}
.filtertab:hover { color: var(--cream-dim); border-color: var(--hair); }
.filtertab[aria-selected="true"] {
  color: var(--gold-hi); border-color: var(--gold);
  background: color-mix(in oklab, var(--gold) 10%, transparent);
}
.fcount { font-family: var(--mono); font-size: .62rem; color: var(--muted); }
.filtertab[aria-selected="true"] .fcount { color: var(--gold); }

/* A record's lifecycle state reads as loudly as its verdict, because a void
   record that still looks active is the one that gets filed twice. */
.schip {
  font-size: .56rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700;
  padding: .2rem .45rem; border-radius: 2px; border: 1px solid;
}
.schip.void { color: var(--deny); border-color: color-mix(in oklab, var(--deny) 55%, transparent); background: color-mix(in oklab, var(--deny) 12%, transparent); }
.schip.archived { color: var(--muted); border-color: var(--hair-soft); }
.schip.amended { color: var(--cond); border-color: color-mix(in oklab, var(--cond) 45%, transparent); }

/* Void rows stay legible but visibly withdrawn — greyed, never hidden. */
.ledger li[data-status="void"] { background: color-mix(in oklab, var(--deny) 5%, var(--ink-2)); }
.ledger li[data-status="void"] .litem { text-decoration: line-through; text-decoration-color: color-mix(in oklab, var(--deny) 70%, transparent); }
.ledger li[data-status="archived"] { background: color-mix(in oklab, var(--ink) 55%, var(--ink-2)); }
.ledger li[data-status="archived"] .litem, .ledger li[data-status="void"] .lno { opacity: .78; }

.lwhy { grid-column: 1; margin: .3rem 0 0; font-size: .74rem; color: var(--cream-dim); }
.lwhy b { color: var(--deny); font-weight: 600; }
.lwhy.arch b { color: var(--muted); }

.lmanage {
  grid-column: 1 / -1; margin-top: .7rem; padding-top: .7rem;
  border-top: 1px solid var(--hair-soft);
  display: flex; flex-wrap: wrap; gap: .4rem;
}
.lmanage[hidden] { display: none; }
.lmanage .ghostbtn.danger { border-color: color-mix(in oklab, var(--deny) 40%, transparent); color: var(--deny); }
.lmanage .ghostbtn.danger:hover { border-color: var(--deny); color: #e08d80; background: color-mix(in oklab, var(--deny) 10%, transparent); }
.lamend { grid-column: 1 / -1; margin: .5rem 0 0; padding: 0; list-style: none; display: grid; gap: .3rem; }
.lamend li {
  display: block; padding: .45rem .6rem; background: transparent;
  border-left: 2px solid var(--gold-dim); font-size: .76rem; color: var(--cream-dim);
}
.lamend .amwhen { display: block; font-family: var(--mono); font-size: .62rem; color: var(--muted); }

/* The correction banner on station 02 — the reviewer must not lose track of the
   fact that this check is replacing a record they already signed. */
.correcting {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .9rem;
  margin: 0 0 1rem; padding: .7rem .9rem; font-size: .8rem; color: var(--cream);
  border: 1px solid color-mix(in oklab, var(--cond) 40%, transparent);
  background: color-mix(in oklab, var(--cond) 8%, transparent); border-radius: 2px;
}
.correcting[hidden] { display: none; }
.correcting .mono { color: var(--gold); }

/* ---------------- station 02: saved draft purchases ---------------- */
/* A shelf, not a ledger: these are unsigned working papers, so the panel is
   deliberately quieter than the record rows in station 07. */
.draftbar {
  margin: 0 0 1.1rem; padding: .85rem .95rem 1rem;
  border: 1px solid var(--hair-soft); border-radius: 2px;
  background: color-mix(in oklab, var(--gold) 3%, var(--ink-2));
}
.draftbar[hidden] { display: none; }
.draftbarhead h3 {
  margin: 0; display: flex; align-items: center; gap: .5rem;
  font-family: var(--display); font-size: 1rem; font-weight: 500; color: var(--gold-hi);
}
.dcount {
  font-family: var(--mono); font-size: .66rem; color: var(--gold);
  border: 1px solid var(--hair); border-radius: 2px; padding: .05rem .35rem;
}
.drafts { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.drafts li {
  display: grid; gap: .15rem .9rem; grid-template-columns: 1fr auto;
  padding: .65rem .8rem; background: var(--ink-2);
  border: 1px solid var(--hair-soft); border-radius: 2px;
}
.drafts li.dcurrent {
  border-color: color-mix(in oklab, var(--gold) 45%, transparent);
  background: color-mix(in oklab, var(--gold) 7%, var(--ink-2));
}
.drafts .dtitle { font-weight: 600; font-size: .9rem; }
.drafts .dtitle .damount { font-family: var(--mono); color: var(--gold); font-weight: 400; }
.drafts .dmeta { grid-column: 1; font-size: .74rem; color: var(--muted); }
.drafts .dnums { grid-column: 1; display: flex; flex-wrap: wrap; gap: .25rem .45rem; margin-top: .3rem; }
.drafts .dnums span {
  font-family: var(--mono); font-size: .62rem; color: var(--cream-dim);
  border: 1px solid var(--hair-soft); border-radius: 2px; padding: .08rem .32rem;
}
.drafts .dnums span:empty { display: none; }
.drafts .dnums span.dcorrect { color: var(--cond); border-color: color-mix(in oklab, var(--cond) 45%, transparent); }
.drafts .dacts { grid-column: 2; grid-row: 1 / -1; display: flex; align-items: center; gap: .4rem; }
.drafts .ghostbtn.danger { border-color: color-mix(in oklab, var(--deny) 40%, transparent); color: var(--deny); }
.drafts .ghostbtn.danger:hover { border-color: var(--deny); color: #e08d80; background: color-mix(in oklab, var(--deny) 10%, transparent); }
@media (max-width: 620px) {
  .drafts li { grid-template-columns: 1fr; }
  .drafts .dacts { grid-column: 1; grid-row: auto; margin-top: .5rem; }
}

/* ---------------- confirm / reason dialog ---------------- */
.askbox {
  width: min(30rem, calc(100vw - 2rem)); padding: 0; border: 1px solid var(--hair);
  border-radius: 2px; background: var(--ink-2); color: var(--cream);
  box-shadow: 0 40px 80px -30px rgb(0 0 0 / .9);
}
.askbox::backdrop { background: rgb(8 6 4 / .78); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.askbox form { display: grid; gap: .7rem; padding: 1.1rem 1.2rem 1.2rem; }
.askbox h3 { margin: 0; font-family: var(--display); font-size: 1.15rem; font-weight: 500; color: var(--gold-hi); }
.askbox p { margin: 0; font-size: .82rem; color: var(--cream-dim); }
.askbox textarea, .askbox input {
  font: inherit; font-size: 1rem; color: var(--cream); background: var(--ink-3);
  border: 1px solid var(--hair-soft); border-radius: 2px; padding: .55rem .65rem; resize: vertical;
}
.askbox textarea:focus, .askbox input:focus { outline: 2px solid var(--gold-hi); outline-offset: 1px; }
.askbox #askConfirm { font-family: var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.askbox .err { display: block; min-height: 1.1em; }
.askacts { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .2rem; }
.askbox[data-danger="true"] .goldbtn {
  background: linear-gradient(180deg, #c8604f, #a8382c); color: #fff2ee; box-shadow: none;
}

/* ---------------- share the app (station 08) ---------------- */
.invitebar {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .9rem;
  margin: 0 0 1.2rem; padding: .8rem 1rem;
  border: 1px solid var(--hair-soft); border-left: 3px solid var(--gold-dim);
  border-radius: 2px; background: color-mix(in oklab, var(--gold) 4%, transparent);
}
.invitebar b { font-size: .84rem; font-weight: 400; color: var(--gold-hi); overflow-wrap: anywhere; }

.handoff {
  padding: 1rem 1.1rem 1.1rem;
  border: 1px solid color-mix(in oklab, var(--cond) 34%, transparent);
  border-left: 3px solid var(--cond);
  border-radius: 2px;
  background: color-mix(in oklab, var(--cond) 6%, transparent);
}
.handoffwhy { margin: 0; font-size: .82rem; color: var(--cream-dim); line-height: 1.6; max-width: 68ch; }
.handofflist {
  list-style: none; margin: .95rem 0; padding: 0;
  display: grid; grid-template-columns: 1fr; gap: .1rem;
  border: 1px solid var(--hair-soft); border-radius: 2px; overflow: hidden;
  background: var(--hair-soft);
}
@media (min-width: 620px) { .handofflist { grid-template-columns: 1fr 1fr; } }
.handofflist li {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: .2rem .8rem; padding: .5rem .7rem; background: var(--ink-2);
}
.handofflist dt, .handofflist .k {
  font-size: .58rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
.handofflist .v { font-size: .82rem; color: var(--cream); font-family: var(--mono); overflow-wrap: anywhere; }
.handoffnames {
  display: flex; align-items: flex-start; gap: .55rem;
  font-size: .8rem; color: var(--cream-dim); line-height: 1.5; cursor: pointer;
}
.handoffnames input { width: 1.1rem; height: 1.1rem; accent-color: var(--gold); margin-top: .2rem; flex: none; }
.handoffnames em { font-style: normal; color: var(--muted); }
.handoffacts { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 1rem 0 0; }
.handoffwarn {
  margin: .9rem 0 0; font-size: .74rem; line-height: 1.55;
  color: color-mix(in oklab, var(--cond) 72%, var(--cream)); max-width: 66ch;
}

/* ---------------- the monthly reimbursement draw ---------------- */
/* The draw asks for money, so it takes the gold of the feed rather than the
   amber of a caution — but the gaps and the warnings inside it are amber and
   red, because a figure that would go onto a signed federal form wrong is the
   one thing on this screen worth interrupting somebody over. */
.draw {
  padding: 1rem 1.1rem 1.1rem;
  border: 1px solid var(--hair-soft); border-left: 3px solid var(--gold);
  border-radius: 2px; background: color-mix(in oklab, var(--gold) 5%, transparent);
}
.drawcycle {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: .7rem 1.1rem;
  margin: 1rem 0 0;
}
.drawcycle .field { flex: 0 1 17rem; }
.drawcyclenote {
  flex: 1 1 16rem; margin: 0 0 .5rem;
  font-size: .74rem; line-height: 1.5; color: var(--muted); max-width: 44ch;
}
.drawfacts { margin: .95rem 0 0; }
/* The amount being asked for reads as the figure it is, not as another row. */
.drawfacts li.ask { background: color-mix(in oklab, var(--gold) 12%, var(--ink-2)); }
.drawfacts li.ask .v { font-size: 1.02rem; color: var(--gold-hi); }
.drawfacts li.warnrow .v { color: var(--cond); }

.drawgaps, .drawwarn {
  margin: .95rem 0 0; padding: .75rem .9rem;
  border: 1px solid transparent; border-radius: 2px;
}
.drawgaps { border-color: color-mix(in oklab, var(--deny) 40%, transparent); background: color-mix(in oklab, var(--deny) 8%, transparent); }
.drawwarn { border-color: color-mix(in oklab, var(--cond) 34%, transparent); background: color-mix(in oklab, var(--cond) 6%, transparent); }
.drawgapshead, .drawwarnhead {
  margin: 0 0 .45rem; font-size: .58rem; letter-spacing: .18em; text-transform: uppercase;
  font-weight: 600;
}
.drawgapshead { color: var(--deny); }
.drawwarnhead { color: var(--cond); }
.drawgaps ul, .drawwarn ul { margin: 0; padding-left: 1.1rem; }
.drawgaps li, .drawwarn li {
  font-size: .78rem; line-height: 1.55; color: var(--cream-dim); max-width: 66ch;
}
.drawgaps li + li, .drawwarn li + li { margin-top: .35rem; }

.drawfold { margin: .95rem 0 0; border-top: 1px solid var(--hair-soft); }
.drawfold > summary {
  cursor: pointer; padding: .6rem 0 .1rem; list-style: none;
  font-size: .62rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold); font-weight: 600;
}
.drawfold > summary::-webkit-details-marker { display: none; }
.drawfold > summary::before { content: '+ '; font-family: var(--mono); }
.drawfold[open] > summary::before { content: '\2212 '; }
.drawfold > summary:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; }
.drawfold .fieldgrid { margin-top: .9rem; }
.drawswitch { justify-content: center; }
.boxnote { margin: .9rem 0 .4rem; font-size: .72rem; line-height: 1.55; color: var(--muted); max-width: 64ch; }

/* The form read back box by box: the number in the margin, the caption above
   the value, monospaced, so it can be checked against the paper form. */
.boxlist { list-style: none; margin: .9rem 0 0; padding: 0; display: grid; gap: .1rem; background: var(--hair-soft); border: 1px solid var(--hair-soft); border-radius: 2px; overflow: hidden; }
@media (min-width: 640px) { .boxlist { grid-template-columns: 1fr 1fr; } }
.boxlist li { display: grid; grid-template-columns: 2.4rem 1fr; gap: .1rem .7rem; padding: .5rem .7rem; background: var(--ink-2); }
.boxlist .no { grid-row: span 2; font-family: var(--mono); font-size: .8rem; color: var(--gold); padding-top: .1rem; }
.boxlist .cap { font-size: .55rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.boxlist .val { font-family: var(--mono); font-size: .8rem; color: var(--cream); white-space: pre-line; overflow-wrap: anywhere; }
.boxlist li.empty .val { color: var(--deny); }
.boxlist li.span { grid-column: 1 / -1; }

.drawsubhead {
  margin: 1.5rem 0 .2rem; font-family: var(--display); font-weight: 700; font-size: .96rem;
  color: var(--gold-hi);
}
.drawcheck { list-style: none; margin: .6rem 0 0; padding: 0; }
.drawcheck li {
  display: grid; grid-template-columns: 1fr auto; gap: .15rem .8rem;
  padding: .55rem 0; border-top: 1px solid var(--hair-soft);
}
.drawcheck .what { font-size: .84rem; color: var(--cream); }
.drawcheck .detail { grid-column: 1; font-size: .74rem; line-height: 1.5; color: var(--muted); max-width: 62ch; }
.drawcheck .state {
  align-self: start; font-size: .54rem; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 600; padding: .18rem .45rem; border-radius: 999px;
  border: 1px solid currentColor; white-space: nowrap;
}
.drawcheck li[data-state="ready"] .state { color: var(--allow); }
.drawcheck li[data-state="partial"] .state { color: var(--cond); }
.drawcheck li[data-state="blocked"] .state { color: var(--deny); }
.drawcheck li[data-state="yours"] .state { color: var(--muted); }
.drawacts { margin-top: 1.2rem; }

/* ---------------- SF-270 feed ---------------- */
/* Informational, not cautionary: this takes the gold hairline the other
   addresses on the page take rather than the amber of the setup link, which is
   amber because handing one out copies the award document. */
.feed {
  padding: 1rem 1.1rem 1.1rem;
  border: 1px solid var(--hair-soft); border-left: 3px solid var(--gold-dim);
  border-radius: 2px; background: color-mix(in oklab, var(--gold) 4%, transparent);
}
.feedwhy { margin: 0; font-size: .82rem; color: var(--cream-dim); line-height: 1.6; max-width: 68ch; }
.feedwhy b { font-weight: 500; color: var(--gold-hi); }
/* .invitebar carries its own bottom margin for the place it was written for;
   here it sits between the facts and the buttons and needs none. */
.feed .invitebar { margin-bottom: 0; }
.feedwarn { margin: .9rem 0 0; font-size: .74rem; line-height: 1.55; color: var(--muted); max-width: 66ch; }

/* ---------------- QR sheet ---------------- */
.qrbox {
  width: min(24rem, calc(100vw - 2rem)); padding: 1.1rem 1.2rem 1.2rem;
  border: 1px solid var(--hair); border-radius: 2px;
  background: var(--ink-2); color: var(--cream);
  box-shadow: 0 40px 80px -30px rgb(0 0 0 / .9);
}
.qrbox::backdrop { background: rgb(8 6 4 / .82); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.qrhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.qrhead h3 { margin: 0; font-family: var(--display); font-size: 1.15rem; font-weight: 500; color: var(--gold-hi); }
.qrhead p { margin: .25rem 0 0; font-size: .78rem; color: var(--cream-dim); max-width: 34ch; }
/* Cream behind the code, always: a scanner wants dark modules on light ground,
   and the rest of this app is the other way round. */
.qrframe {
  margin: 1rem 0 .8rem; padding: .5rem;
  background: var(--cream); border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / .12);
}
.qrframe svg { display: block; width: 100%; height: auto; }
.qrfoot {
  margin: 0; font-size: .62rem; line-height: 1.5; color: var(--muted);
  overflow-wrap: anywhere; max-height: 4.6em; overflow: hidden;
}
.qracts { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .8rem; }

/* ---------------- receipt camera ---------------- */
.capturebar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .8rem; margin-bottom: .9rem; }
.goldbtn .btnicon {
  width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round; vertical-align: -2px; margin-right: .45rem;
}
/* The file input is the fallback camera on browsers with no getUserMedia, so the
   label has to look and behave exactly like the buttons beside it. */
.filebtn { cursor: pointer; }
/* The input carries the disabled state; the label has to show it. */
.filebtn:has(input:disabled) { opacity: .45; cursor: not-allowed; }

.switch { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; user-select: none; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
/* The label text is a flex row so the pill is a laid-out box rather than an
   inline-block the knob has to be walked back over: the knob is positioned
   against this box, not against wherever the text happens to end. */
.switch span {
  position: relative; display: inline-flex; align-items: center; gap: .5rem;
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.switch span::before {
  content: ''; flex: 0 0 auto; width: 2rem; height: 1.05rem;
  border: 1px solid var(--hair); border-radius: 999px;
  background: var(--ink-3); transition: background .18s, border-color .18s;
}
/* .165rem in from the pill's edge; the .95rem travel below lands the knob the
   same distance in from the far edge. */
.switch span::after {
  content: ''; position: absolute; left: .165rem; top: 50%; margin-top: -.36rem;
  width: .72rem; height: .72rem; border-radius: 50%;
  background: var(--muted); transition: transform .18s, background .18s;
}
.switch input:checked + span { color: var(--gold-hi); }
.switch input:checked + span::before { border-color: var(--gold); background: color-mix(in oklab, var(--gold) 22%, var(--ink-3)); }
.switch input:checked + span::after { background: var(--gold-hi); transform: translateX(.95rem); }
.switch input:focus-visible + span::before { outline: 2px solid var(--gold-hi); outline-offset: 2px; }

.livewrap { margin: 0 0 1.1rem; }
.liveframe {
  position: relative; overflow: hidden; border-radius: 3px;
  border: 1px solid var(--hair); background: #0b0906;
  aspect-ratio: 3 / 4;
  /* vh on iOS is measured with the Safari toolbars hidden, so the viewfinder is
     taller than what is actually on screen until the page is scrolled. */
  max-height: 62vh;
  max-height: 62dvh;
}
@media (min-width: 720px) { .liveframe { aspect-ratio: 4 / 3; } }
#rcVideo { width: 100%; height: 100%; object-fit: cover; display: block; background: #0b0906; }
/* Corner marks: a viewfinder that tells you to fill the frame with paper. */
.guide { position: absolute; width: 26px; height: 26px; border: 2px solid var(--gold); opacity: .8; }
.guide-tl { top: 12px; left: 12px; border-right: 0; border-bottom: 0; }
.guide-tr { top: 12px; right: 12px; border-left: 0; border-bottom: 0; }
.guide-bl { bottom: 12px; left: 12px; border-right: 0; border-top: 0; }
.guide-br { bottom: 12px; right: 12px; border-left: 0; border-top: 0; }
.livetag {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  font-size: .58rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold-hi); background: rgb(0 0 0 / .45);
  border: 1px solid var(--hair); border-radius: 999px; padding: .18rem .6rem;
}
.livetools { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: .8rem; }
.shutter {
  width: 3.4rem; height: 3.4rem; border-radius: 50%; cursor: pointer;
  border: 2px solid var(--gold); background: color-mix(in oklab, var(--gold) 14%, transparent);
  display: grid; place-items: center; transition: transform .14s, box-shadow .2s;
}
.shutter span { display: block; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: linear-gradient(178deg, var(--gold-hi), var(--gold) 60%, #a97f24); }
.shutter:hover { box-shadow: 0 0 0 6px color-mix(in oklab, var(--gold) 12%, transparent); }
.shutter:active { transform: scale(.94); }
.shutter[disabled] { opacity: .5; cursor: progress; }
#rcTorch[aria-pressed="true"] { border-color: var(--gold); color: var(--gold-hi); background: color-mix(in oklab, var(--gold) 14%, transparent); }

.shotcount {
  font-family: var(--mono); font-size: .72rem; color: var(--gold);
  border: 1px solid var(--hair); border-radius: 999px; padding: .16rem .6rem;
  align-self: start; white-space: nowrap;
}

.shotgrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .7rem; }
.shotcard {
  position: relative; border: 1px solid var(--hair-soft); border-radius: 2px;
  background: var(--ink-2); overflow: hidden; display: flex; flex-direction: column;
}
.shotcard .shotthumb {
  display: block; width: 100%; aspect-ratio: 3 / 4;
  background: #0b0906; cursor: zoom-in; border: 0; padding: 0;
}
/* The thumbnail crops; the lightbox is where the whole receipt is read. */
.shotcard .shotthumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.shotcard .shotthumb:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.shotcard .shotmeta { padding: .5rem .55rem .6rem; display: grid; gap: .18rem; }
.shotcard .shotex { font-family: var(--mono); font-size: .7rem; color: var(--gold); }
.shotcard .shotfine { font-size: .64rem; color: var(--muted); font-family: var(--mono); overflow-wrap: anywhere; }
.shotcard .shotacts { display: flex; gap: .3rem; padding: 0 .55rem .55rem; }
.shotcard .shotacts .iconbtn { width: 1.9rem; height: 1.9rem; }
.shotcard .shotacts .iconbtn[data-act="delete"] svg { stroke: var(--deny); }
.shotcard .shotsource { font-size: .64rem; color: var(--cream-dim); overflow-wrap: anywhere; }
.shotbadge {
  position: absolute; top: .4rem; right: .4rem;
  font-size: .54rem; letter-spacing: .12em; text-transform: uppercase;
  padding: .12rem .35rem; border-radius: 2px;
  background: rgb(0 0 0 / .55); border: 1px solid var(--hair-soft); color: var(--cream-dim);
}
/* A rendered PDF page has to be distinguishable from a photograph at a glance. */
.shotbadge.is-pdf { border-color: var(--gold); color: var(--gold-hi); }
/* PDF pages are portrait documents, not snapshots: show the whole page. */
.shotcard:has(.shotbadge.is-pdf) .shotthumb img { object-fit: contain; background: #fff; }

/* ---------------- the receipt readout ---------------- */
/* What the reader took off the paper, laid out as claims about station 02 rather
   than as a summary: field, value, what happened to it, and the way back. The
   colour carries the meaning — gold for a box that was filled, red for a figure
   that disagrees with one already typed — so a reviewer can scan it before
   signing without reading a word of it. */
.readout {
  margin-top: 1rem; padding: .85rem .9rem 1rem;
  border: 1px solid var(--hair); border-left: 2px solid var(--gold);
  border-radius: 2px; background: var(--ink-3);
}
.readouthead {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .8rem;
  margin-bottom: .6rem;
}
.readouthead h3 {
  margin: 0; font-family: var(--display); font-weight: 400;
  font-size: 1.02rem; color: var(--gold-hi);
}
.readsource { font-size: .64rem; color: var(--muted); overflow-wrap: anywhere; }

.readrows { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.readrow {
  display: grid; align-items: baseline;
  grid-template-columns: minmax(7.5rem, auto) 1fr auto auto;
  gap: .2rem .7rem; padding: .5rem .55rem; background: var(--ink-2);
  border-left: 2px solid var(--hair-soft);
}
.readfield {
  font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
.readvalue { font-size: .87rem; color: var(--cream); overflow-wrap: anywhere; }
.readpill {
  font-family: var(--mono); font-size: .58rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); white-space: nowrap;
}
/* The reason a line is here — the keyword a budget line was proposed from, or
   the value already in the box a receipt disagrees with. */
.readwhy {
  grid-column: 2 / -1; font-size: .7rem; color: var(--cream-dim); overflow-wrap: anywhere;
}
.readwhy:empty { display: none; }
.readwhy b { color: var(--gold-hi); font-weight: 600; }
.readacts { display: flex; gap: .3rem; justify-self: end; }

.readrow.is-filled { border-left-color: var(--gold); }
.readrow.is-filled .readpill { color: var(--gold); }
.readrow.is-proposed { border-left-color: var(--gold-dim); }
.readrow.is-proposed .readpill { color: var(--gold-dim); }
.readrow.is-matched .readpill { color: var(--allow); }
/* A disagreement between the paper and the typed box is the one line on this
   panel that must not be skimmed past. */
.readrow.is-conflict { border-left-color: var(--deny); }
.readrow.is-conflict .readpill { color: var(--deny); }
.readrow.is-undone { opacity: .62; }
.readrow.is-undone .readvalue { text-decoration: line-through; }

.ghostbtn.tiny { padding: .3rem .5rem; font-size: .6rem; letter-spacing: .1em; }

.readnote { margin: .7rem 0 0; font-size: .78rem; color: var(--cream-dim); min-height: 1.2em; }
.readfoot { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .7rem; }
.readfine { margin: .55rem 0 0; font-size: .69rem; color: var(--muted); max-width: 66ch; }

@media (max-width: 560px) {
  .readrow { grid-template-columns: 1fr auto; }
  .readfield { grid-column: 1 / -1; }
  .readacts { grid-column: 1 / -1; justify-self: start; }
}

/* ---------------- drag and drop ---------------- */
.dropzone { position: relative; }
/* Armed the moment a file enters the window, so the target is obvious before
   the pointer gets there. */
.dropzone.is-armed { outline: 1px dashed var(--hair); outline-offset: .5rem; border-radius: 3px; }
.dropzone.is-over { outline: 1px solid var(--gold); outline-offset: .5rem; }
.dropveil {
  position: absolute; inset: -.35rem; z-index: 4;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .45rem;
  text-align: center; padding: 1rem; border-radius: 3px;
  background: color-mix(in oklab, var(--ink) 82%, transparent);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  border: 1px dashed var(--gold);
  opacity: 0; pointer-events: none; transition: opacity .16s;
}
.dropzone.is-over .dropveil { opacity: 1; }
.dropveil svg { color: var(--gold); }
.dropveil b {
  font-family: var(--display); font-weight: 400; font-size: 1.05rem; color: var(--gold-hi);
}
.dropveil span { font-size: .74rem; color: var(--cream-dim); max-width: 34ch; }
@media (prefers-reduced-motion: reduce) {
  .dropveil { transition: none; }
}

/* Full-size review, because an unreadable exhibit is a finding waiting to happen. */
.lightbox {
  position: fixed; inset: 0; z-index: 60; display: grid;
  grid-template-rows: auto 1fr auto; gap: .6rem; padding: .8rem;
  padding-top: max(.8rem, env(safe-area-inset-top));
  background: rgb(8 6 4 / .96); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.lightbox[hidden] { display: none; }
.lightbox-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.lightbox-bar strong { font-size: .8rem; color: var(--gold); }
#lightboxImg { min-height: 0; max-width: 100%; max-height: 100%; margin: 0 auto; object-fit: contain; border: 1px solid var(--hair-soft); background: #0b0906; }
.lightbox-cap { margin: 0; font-size: .64rem; color: var(--muted); text-align: center; overflow-wrap: anywhere; }

/* ---------------- offline note + footer ---------------- */
.offlinenote { padding: clamp(2rem, 6vw, 3.4rem) 0; border-top: 1px solid var(--hair-soft); }
.offlinemore { margin: .6rem 0 0; }
.offlinenote h2 {
  font-family: var(--display); font-weight: 700; font-size: clamp(1.5rem, 5vw, 2.1rem);
  margin: 0 0 1.4rem;
}
.offlinecols { display: grid; gap: 1.4rem; }
@media (min-width: 760px) { .offlinecols { grid-template-columns: repeat(3, 1fr); gap: 2.2rem; } }
.offlinecols h3 {
  font-size: .64rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 .5rem; padding-top: .8rem;
  border-top: 1px solid var(--hair);
}
.offlinecols p { margin: 0; font-size: .86rem; color: var(--cream-dim); }

.foot {
  max-width: 1180px; margin: 0 auto;
  display: grid; gap: 1.1rem; align-items: center;
  padding: 2rem clamp(.85rem, 3vw, 2rem) 3rem;
  border-top: 1px solid var(--hair-soft);
}
@media (min-width: 640px) { .foot { grid-template-columns: auto 1fr; gap: 1.8rem; } }
.footmark { width: 84px; opacity: .85; }
.foot p { margin: 0 0 .5rem; font-size: .82rem; color: var(--cream-dim); }
.foot .fine { font-size: .74rem; color: var(--muted); max-width: 80ch; }

/* ---------------- update bar ---------------- */
/* Raised only when a newer build is waiting. It sits above the toast so a sync
   message cannot bury the one notice that asks for a decision. */
.updatebar {
  position: fixed;
  left: 50%; bottom: calc(1.4rem + env(safe-area-inset-bottom));
  transform: translate(-50%, 160%);
  z-index: 55; width: min(94vw, 38rem);
  display: grid; gap: .9rem;
  padding: 1rem 1.15rem;
  background:
    linear-gradient(178deg, color-mix(in oklab, var(--gold) 9%, var(--ink-4)), var(--ink-3));
  border: 1px solid var(--gold);
  border-radius: 2px;
  box-shadow: var(--shadow);
  transition: transform .38s cubic-bezier(.2,1.05,.3,1);
}
.updatebar.up { transform: translate(-50%, 0); }
@media (min-width: 40rem) {
  .updatebar { grid-template-columns: 1fr auto; align-items: end; gap: 1.2rem; }
}
.updatebar-head {
  display: flex; align-items: center; gap: .5rem;
  margin: 0 0 .45rem;
  font-family: var(--display); font-size: 1.02rem; color: var(--gold-hi);
}
.updatebar-dot {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--gold);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--gold) 24%, transparent);
  animation: updatepulse 2.4s ease-in-out infinite;
}
@keyframes updatepulse {
  50% { box-shadow: 0 0 0 8px color-mix(in oklab, var(--gold) 6%, transparent); }
}
.updatebar-list {
  margin: 0; padding-left: 1.1rem;
  font-size: .82rem; line-height: 1.5; color: var(--cream);
}
.updatebar-list li + li { margin-top: .3rem; }
.updatebar-list .updatebar-ver {
  list-style: none; margin-left: -1.1rem; margin-top: .5rem;
  font-family: var(--mono); font-size: .72rem; color: var(--muted);
}
.updatebar-fine { margin: .6rem 0 0; font-size: .72rem; color: var(--muted); }
.updatebar-acts { display: flex; gap: .5rem; flex-wrap: wrap; }
.goldbtn.small { padding: .5rem .9rem; font-size: .7rem; }
/* The topbar control, once there is something to refresh onto. */
#refreshBtn.is-new { border-color: var(--gold); color: var(--gold-hi); }
@media (prefers-reduced-motion: reduce) {
  .updatebar { transition: none; }
  .updatebar-dot { animation: none; }
}

/* ---------------- toast ---------------- */
.toast {
  position: fixed; left: 50%; bottom: calc(1.4rem + env(safe-area-inset-bottom));
  transform: translate(-50%, 140%);
  z-index: 50; max-width: min(92vw, 30rem);
  padding: .8rem 1.1rem;
  background: var(--ink-4); color: var(--cream);
  border: 1px solid var(--gold); border-radius: 2px;
  box-shadow: var(--shadow);
  font-size: .85rem;
  transition: transform .34s cubic-bezier(.2,1.1,.3,1);
}
.toast.up { transform: translate(-50%, 0); }
.toast[data-kind="bad"] { border-color: var(--deny); }
/* Not an error — something was attached, but not all of it. */
.toast[data-kind="warn"] { border-color: var(--cond); }

/* ---------------- reveal ---------------- */
.reveal { animation: rise .7s cubic-bezier(.2,.8,.25,1) both; }
/* The masthead holds the page's largest paint (the logo), and LCP is not
   counted until that element is visibly painted — so it rises without the fade
   or a delay, and is opaque from the first frame. */
.masthead { animation: settle .7s cubic-bezier(.2,.8,.25,1) both; }
@keyframes settle { from { transform: translateY(16px); } to { transform: none; } }
#station-profile { animation-delay: .1s; }
#station-check   { animation-delay: .16s; }
#station-result  { animation-delay: .22s; }
#station-receipt { animation-delay: .28s; }
#station-sign    { animation-delay: .34s; }
#station-share   { animation-delay: .4s; }
#station-ledger  { animation-delay: .46s; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; transition-duration: .001ms !important; }
  html { scroll-behavior: auto; }
}


/* ---------------- document numbers + parties ---------------- */
.mintwrap { display: flex; gap: .4rem; align-items: stretch; }
.mintwrap input { flex: 1 1 auto; min-width: 0; }
.mintwrap .ghostbtn { flex: 0 0 auto; white-space: nowrap; }

.field .hint { display: block; margin: .3rem 0 0; font-style: normal; }
.field .hint code {
  font-family: var(--mono); font-size: .92em; color: var(--gold);
}

.footlinks { font-size: .78rem; }
.footlinks a { color: var(--gold); text-decoration: none; border-bottom: 1px solid var(--hair); }
.footlinks a:hover { color: var(--gold-hi); border-bottom-color: var(--gold); }
.hint a { color: var(--gold); text-decoration: none; border-bottom: 1px solid var(--hair-soft); }
.hint a:hover { color: var(--gold-hi); }

/* ============================================================
   Operating Manual & Definitions (/manual.html)
   Same ledger-book surface, set as a long document: one measure,
   a persistent contents block, and print styles that put it on paper.
   ============================================================ */
.manualmain { padding: 0 clamp(1rem, 4vw, 2.4rem) 3rem; max-width: 1180px; margin: 0 auto; }

.manhero {
  display: grid; gap: 1.6rem; align-items: center;
  padding: clamp(1.6rem, 5vw, 3.2rem) 0 clamp(1.6rem, 4vw, 2.6rem);
  border-bottom: 1px solid var(--hair-soft);
}
@media (min-width: 860px) { .manhero { grid-template-columns: minmax(220px, 30%) 1fr; } }
.manhero-seal { position: relative; justify-self: center; max-width: 300px; }
.manhero-seal::after {
  content: ''; position: absolute; inset: -12%; z-index: -1;
  background: radial-gradient(circle, color-mix(in oklab, var(--gold) 24%, transparent) 0%, transparent 66%);
}
.manhero-seal img { display: block; width: 100%; height: auto; filter: drop-shadow(0 18px 34px rgb(0 0 0 / .6)); }
.manhero h1 {
  font-family: var(--display); font-weight: 700; line-height: .92;
  font-size: clamp(2.1rem, 8vw, 3.5rem); margin: .3rem 0 1rem; color: var(--cream);
}
.manhero h1 em { font-style: italic; color: var(--gold-hi); }
.manactions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-bottom: .8rem; }

.mancontents {
  padding: clamp(1.4rem, 4vw, 2.2rem) 0;
  border-bottom: 1px solid var(--hair-soft);
}
.mancontents h2 {
  font-family: var(--display); font-size: 1.5rem; font-weight: 700; margin: 0 0 1rem;
  color: var(--cream);
}
.man-toc { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
@media (min-width: 720px) { .man-toc { grid-template-columns: 1fr 1fr; gap: .1rem 1.6rem; } }
.man-toc a {
  display: grid; grid-template-columns: 2.4rem 1fr; align-items: baseline; gap: .5rem;
  padding: .5rem .2rem; text-decoration: none; color: var(--cream-dim);
  border-bottom: 1px solid var(--hair-soft);
}
.man-toc a:hover { color: var(--gold-hi); background: color-mix(in oklab, var(--gold) 7%, transparent); }
.man-toc-no { font-family: var(--mono); font-size: .78rem; color: var(--gold); }
.man-toc-title { font-size: .92rem; }

.manbody { padding-top: clamp(1.4rem, 4vw, 2.4rem); }
.man-section { padding: 0 0 clamp(1.8rem, 5vw, 2.8rem); scroll-margin-top: 5rem; }
.man-h2 {
  font-family: var(--display); font-weight: 700; color: var(--cream);
  font-size: clamp(1.4rem, 4vw, 1.95rem); line-height: 1.12;
  margin: 0 0 .9rem; padding-bottom: .6rem;
  border-bottom: 2px solid var(--gold);
  display: flex; align-items: baseline; gap: .7rem;
}
.man-sec-no { font-family: var(--mono); font-size: .8em; color: var(--gold); font-weight: 400; }
.man-p { margin: 0 0 .95rem; max-width: 74ch; color: var(--cream-dim); line-height: 1.62; font-size: .93rem; }
.man-block { margin: 0 0 1.1rem; }
.man-h4 {
  font-size: .62rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold); margin: 1.1rem 0 .6rem; font-weight: 700;
}
.man-list, .man-steps { margin: 0 0 1rem; padding-left: 1.4rem; max-width: 74ch; }
.man-list li, .man-steps li { margin-bottom: .5rem; color: var(--cream-dim); line-height: 1.58; font-size: .91rem; }
.man-list { list-style: none; padding-left: 1rem; }
.man-list li::before { content: '·'; color: var(--gold); font-weight: 700; margin-right: .5rem; }
.man-steps li::marker { color: var(--gold); font-family: var(--mono); font-size: .85em; }

.man-note {
  margin: 1.1rem 0 1.3rem; padding: 1rem 1.1rem;
  border-left: 3px solid var(--gold);
  background: color-mix(in oklab, var(--gold) 8%, var(--ink-2));
  max-width: 78ch;
}
.man-note h4 {
  margin: 0 0 .45rem; font-size: .6rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold-hi);
}
.man-note p { margin: 0; font-size: .89rem; line-height: 1.6; color: var(--cream); }

.man-tablewrap { margin: 0 0 1.4rem; overflow-x: auto; border: 1px solid var(--hair-soft); border-radius: 2px; }
.man-table { width: 100%; border-collapse: collapse; min-width: 34rem; }
.man-table th {
  text-align: left; font-size: .56rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted); padding: .6rem .7rem; background: var(--ink-3);
  border-bottom: 1px solid var(--hair);
}
.man-table td {
  padding: .6rem .7rem; font-size: .84rem; color: var(--cream-dim);
  border-bottom: 1px solid var(--hair-soft); vertical-align: top; line-height: 1.5;
}
.man-table tbody tr:nth-child(even) { background: color-mix(in oklab, var(--gold) 3%, transparent); }
.man-table .man-td-key { color: var(--cream); font-weight: 600; }

.man-defs { margin: 0 0 1.3rem; display: grid; gap: 0; }
@media (min-width: 700px) { .man-defs { grid-template-columns: minmax(9rem, 15rem) 1fr; } }
.man-defs dt {
  font-family: var(--display); font-weight: 700; font-size: .96rem; color: var(--gold-hi);
  padding: .7rem 0 .1rem; border-top: 1px solid var(--hair-soft);
}
.man-defs dd {
  margin: 0; padding: .7rem 0 .8rem; font-size: .88rem; line-height: 1.58; color: var(--cream-dim);
  border-top: 1px solid var(--hair-soft);
}
@media (max-width: 699px) {
  .man-defs dt { border-top: 1px solid var(--hair-soft); }
  .man-defs dd { border-top: 0; padding-top: .2rem; }
}
.man-cite {
  display: block; margin-top: .3rem; font-family: var(--mono); font-size: .7rem; color: var(--gold);
}

.man-numbers { display: grid; gap: .9rem; margin: 0 0 1.4rem; }
@media (min-width: 780px) { .man-numbers { grid-template-columns: 1fr 1fr; } }
.man-number {
  border: 1px solid var(--hair); border-radius: 2px; padding: 1rem 1.1rem;
  background: var(--ink-2);
}
.man-number h4 { margin: 0 0 .5rem; font-family: var(--display); font-size: 1.05rem; color: var(--cream); }
.man-format {
  display: block; font-family: var(--mono); font-size: .8rem; color: var(--gold);
  padding: .4rem .5rem; background: color-mix(in oklab, var(--gold) 9%, transparent);
  border-radius: 2px; word-break: break-word;
}
.man-example { margin: .55rem 0 .6rem; display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.man-example-k { font-size: .55rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.man-example code { font-family: var(--mono); font-size: .84rem; color: var(--gold-hi); }
.man-number-meta {
  margin: 0 0 .6rem; display: grid; grid-template-columns: auto 1fr; gap: .2rem .7rem;
}
.man-number-meta dt { font-size: .55rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); padding-top: .15rem; }
.man-number-meta dd { margin: 0; font-size: .82rem; color: var(--cream-dim); }
.man-number-detail { margin: 0; font-size: .84rem; line-height: 1.55; color: var(--cream-dim); }

.man-back {
  display: inline-block; margin-top: .4rem; font-size: .68rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); text-decoration: none;
}
.man-back:hover { color: var(--gold); }
.man-p a, .man-list a, .man-steps a { color: var(--gold); text-decoration: none; border-bottom: 1px solid var(--hair); }

@media print {
  .grain, .topbar, .manactions, .man-back, .manhero-seal, .footmark { display: none !important; }
  .snapshead-acts { display: none !important; }
  .snapshot { box-shadow: none; break-inside: avoid; page-break-inside: avoid; }
  body.manualpage { background: #fff; color: #111; }
  .manualpage .man-p, .manualpage .man-table td, .manualpage .man-defs dd,
  .manualpage .man-list li, .manualpage .man-steps li, .manualpage .man-number-detail { color: #222; }
  .manualpage .man-h2, .manualpage .manhero h1, .manualpage .mancontents h2 { color: #111; }
  .manualpage .man-defs dt { color: #6b4c12; }
  .man-section { break-inside: auto; page-break-inside: auto; }
  .man-h2 { break-after: avoid; page-break-after: avoid; }
  .man-table, .man-number, .man-note { break-inside: avoid; page-break-inside: avoid; }
}


/* ---------------- shared program ledger ----------------
   Scope tabs, the reach note under them, and the treatment for a row that came
   off another device: present and counted, but not ours to render or amend. */
.ledgerscope { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .5rem; }
.scopetab {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--body); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); background: transparent; cursor: pointer;
  border: 1px solid var(--hair-soft); border-bottom-width: 2px; border-radius: 2px;
  padding: .45rem .8rem;
  transition: color .18s, border-color .18s, background .18s;
}
.scopetab:hover { color: var(--cream-dim); border-color: var(--hair); }
.scopetab[aria-selected="true"] {
  color: var(--gold-hi); border-color: var(--hair-soft); border-bottom-color: var(--gold);
  background: color-mix(in oklab, var(--gold) 8%, transparent);
}
.scopetab[aria-selected="true"] .fcount { color: var(--gold); }
.scopenote {
  margin: 0 0 .9rem; font-size: .76rem; line-height: 1.5; color: var(--muted);
  padding-left: .1rem;
}

.schip.peer {
  color: var(--cream-dim); border-color: var(--hair);
  background: color-mix(in oklab, var(--cream) 6%, transparent);
  text-transform: none; letter-spacing: .04em; font-weight: 600; font-size: .6rem;
}
.ledger li[data-origin="peer"] {
  background: color-mix(in oklab, var(--ink) 62%, var(--ink-2));
  border-left: 2px solid var(--hair);
}
.ledger li[data-origin="peer"] .lno { color: var(--cream-dim); }
.peernote {
  max-width: 15rem; font-size: .68rem; line-height: 1.45; color: var(--muted); text-align: right;
}
.lwhy.ovr b { color: var(--cond); }
.lwhy.dupe b { color: var(--deny); }
.lwhy.dupe {
  border-left: 2px solid color-mix(in oklab, var(--deny) 55%, transparent);
  padding-left: .55rem;
}

/* ---------------- similar purchases + written override ----------------
   The duplicate finding says it in prose; this says it as a list, because the
   reviewer's question is "who do I ask about that one". */
.simpanel { margin-top: 1.1rem; }
.simintro { margin: -.35rem 0 .7rem; font-size: .76rem; color: var(--muted); }
.simlist { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem;
  background: var(--hair-soft); border: 1px solid var(--hair-soft); border-radius: 2px; overflow: hidden; }
.simlist li { padding: .7rem .85rem; background: var(--ink-2); }
.simlist li[data-strength="same"] { border-left: 2px solid var(--deny); }
.simlist li[data-strength="near"] { border-left: 2px solid var(--cond); }
.simhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .6rem; }
.simhead .mono { font-size: .74rem; color: var(--gold); }
.simhead b { font-weight: 600; font-size: .9rem; }
.simchip {
  font-size: .56rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700;
  padding: .16rem .4rem; border-radius: 2px; border: 1px solid var(--hair);
  color: var(--cream-dim);
}
.simlist li[data-strength="same"] .simchip {
  color: var(--deny); border-color: color-mix(in oklab, var(--deny) 50%, transparent);
}
.simlist li[data-strength="near"] .simchip {
  color: var(--cond); border-color: color-mix(in oklab, var(--cond) 50%, transparent);
}
.simmeta { margin-top: .2rem; font-size: .76rem; color: var(--muted); }
.simmeta b { color: var(--cream-dim); font-weight: 600; }

.ovrpanel {
  margin-top: 1.1rem; padding: 1rem 1.05rem;
  border: 1px solid color-mix(in oklab, var(--cond) 38%, transparent);
  border-left-width: 3px; border-radius: 2px;
  background: color-mix(in oklab, var(--cond) 6%, transparent);
}
.ovrpanel .subhead { margin-top: 0; }
.ovrpanel p { font-size: .82rem; line-height: 1.55; color: var(--cream-dim); }
.ovrpanel .field { margin-top: .7rem; }
.ovrpanel textarea { resize: vertical; }
.ovrpanel button { margin-top: .8rem; }
.ovrpanel[data-state="recorded"] {
  border-color: color-mix(in oklab, var(--cond) 55%, transparent);
}
.ovrpanel blockquote {
  margin: .7rem 0 0; padding: .55rem .8rem;
  border-left: 2px solid var(--cond); background: color-mix(in oklab, var(--ink) 60%, transparent);
  font-size: .84rem; line-height: 1.55; color: var(--cream);
}
.findings li[data-overridden="true"] { opacity: .95; }

@media (max-width: 640px) {
  .peernote { max-width: none; text-align: left; }
  .ledger li[data-origin="peer"] .lacts { grid-column: 1; grid-row: auto; }
}

/* ============================================================
   Coach bubbles — the guidance that used to be prose on the page.
   A gilt marker beside a label or a heading; one shared bubble that
   opens over the box it is about. Peeked bubbles let clicks fall
   through them, so nothing they cover becomes unreachable.
   ============================================================ */

.coachmark {
  display: inline-grid; place-items: center;
  width: 1.05rem; height: 1.05rem;
  margin-left: .4rem;
  vertical-align: middle;
  flex: none;
  padding: 0;
  border: 1px solid var(--hair);
  border-radius: 50%;
  background: color-mix(in oklab, var(--gold) 7%, var(--ink));
  color: var(--gold);
  font-family: var(--display);
  font-size: .72rem; font-weight: 700; line-height: 1;
  letter-spacing: 0; text-transform: none;
  cursor: help;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .18s, color .18s, background .18s, transform .18s;
}
.coachmark > span[aria-hidden] { transform: translateY(.03em); }
.coachmark:hover,
.coachmark[aria-expanded='true'] {
  border-color: var(--gold);
  color: var(--gold-hi);
  background: color-mix(in oklab, var(--gold) 20%, var(--ink));
  transform: translateY(-1px);
}
.coachmark:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 2px; }
/* On a heading the mark rides the cap height rather than the baseline. */
h2 > .coachmark, h3 > .coachmark { vertical-align: .12em; }
.station h2 > .coachmark { width: 1.25rem; height: 1.25rem; font-size: .84rem; }

/* The switches on station 04, so the mark sits beside the toggle without
   living inside its label — a click on it must not flip the switch. */
.switchgroup { display: inline-flex; align-items: center; }
.capturetip {
  display: inline-flex; align-items: center;
  font-size: .62rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted);
}

/* Live guidance that changes with what is selected — not an explanation, so it
   stays on the page where the reviewer will see it without asking. */
.livenote {
  font-style: normal; font-size: .74rem; line-height: 1.45;
  color: var(--gold-dim);
  border-left: 1px solid var(--hair);
  padding-left: .55rem;
}

.coach {
  position: fixed;
  z-index: 45;
  width: min(23.5rem, calc(100vw - 1.4rem));
  padding: .85rem .95rem .9rem;
  background:
    linear-gradient(168deg, color-mix(in oklab, var(--gold) 6%, var(--ink-3)) 0%, var(--ink-2) 62%);
  border: 1px solid var(--hair);
  border-radius: 3px;
  box-shadow: 0 26px 54px -26px rgb(0 0 0 / .92), 0 0 0 1px rgb(0 0 0 / .35);
  opacity: 0;
  transform: translateY(-.35rem) scale(.985);
  transform-origin: top center;
  transition: opacity .16s ease, transform .18s cubic-bezier(.2,.85,.25,1);
  pointer-events: none;
}
.coach.is-in { opacity: 1; transform: none; }
.coach.is-over { transform-origin: bottom center; transform: translateY(.35rem) scale(.985); }
.coach.is-over.is-in { transform: none; }
/* Only a pinned bubble takes the pointer; a peek is glass. */
.coach.is-pinned { pointer-events: auto; }

/* Gold hairline along the top edge, the same seam the stations use. */
.coach::before {
  content: '';
  position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold) 22%, var(--gold-hi) 50%, var(--gold) 78%, transparent);
  opacity: .7;
}

.coacharrow {
  position: absolute;
  left: var(--ax, 50%);
  width: 9px; height: 9px;
  margin-left: -4.5px;
  background: color-mix(in oklab, var(--gold) 6%, var(--ink-3));
  border: 1px solid var(--hair);
  transform: rotate(45deg);
}
.coach:not(.is-over) .coacharrow { top: -5px; border-right: 0; border-bottom: 0; }
.coach.is-over .coacharrow {
  bottom: -5px; top: auto; border-left: 0; border-top: 0;
  background: var(--ink-2);
}

.coachkicker {
  margin: 0;
  font-size: .55rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold-dim); font-weight: 600;
}
.coachtitle {
  margin: .2rem 0 .4rem;
  font-family: var(--display); font-weight: 700; font-size: 1.02rem;
  line-height: 1.15; color: var(--gold-hi);
  letter-spacing: -.005em;
}
.coachbody p { margin: 0 0 .45rem; font-size: .82rem; line-height: 1.5; color: var(--cream-dim); }
.coachbody p:last-child { margin-bottom: 0; }
.coachbody p + p { color: var(--muted); font-size: .78rem; }
.coacheg {
  display: flex; align-items: baseline; gap: .5rem;
  margin-top: .55rem !important;
  padding-top: .5rem;
  border-top: 1px dashed var(--hair-soft);
}
.coacheg span {
  font-size: .52rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold-dim); flex: none;
}
.coacheg b { font-size: .8rem; color: var(--gold); font-weight: 400; }

.coachfoot { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .7rem; }
.coachfoot[hidden] { display: none; }
.coachlink {
  font-family: var(--body);
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  padding: .34rem .6rem;
  border: 1px solid var(--hair);
  border-radius: 2px;
  background: transparent;
  color: var(--gold);
  text-decoration: none;
  cursor: pointer;
  transition: border-color .18s, color .18s, background .18s;
}
.coachlink:hover {
  border-color: var(--gold); color: var(--gold-hi);
  background: color-mix(in oklab, var(--gold) 9%, transparent);
}

.coachmore {
  margin: .6rem 0 0;
  font-size: .58rem; letter-spacing: .16em; text-transform: uppercase;
  color: color-mix(in oklab, var(--muted) 75%, transparent);
}
.coachmore[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .coach { transition: opacity .12s linear; transform: none; }
  .coach.is-over { transform: none; }
  .coachmark:hover, .coachmark[aria-expanded='true'] { transform: none; }
}

/* ---------------- Ledger AI ---------------- */
/* The assistant rides on every page: a gold-sealed tab in the corner that opens
   into a page torn from the same ledger — ink ground, gold seam, cream type. */
.ledgerai {
  position: fixed;
  right: calc(clamp(.75rem, 2.5vw, 1.5rem) + env(safe-area-inset-right));
  bottom: calc(clamp(.75rem, 2.5vw, 1.5rem) + env(safe-area-inset-bottom));
  z-index: 49;
  display: flex; flex-direction: column; align-items: flex-end; gap: .7rem;
  pointer-events: none;
}
.ledgerai > * { pointer-events: auto; }

/* The seal is the Enterprise Rising badge itself, so the assistant wears the program's mark. */
.ledgerai-seal {
  display: block; flex: none;
  width: 2.3rem; height: 2.3rem; border-radius: 50%;
  object-fit: contain;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--gold) 18%, transparent);
}

.ledgerai-launch {
  display: inline-flex; align-items: center; gap: .65rem;
  padding: .4rem 1rem .4rem .4rem;
  border: 1px solid var(--gold); border-radius: 999px;
  background: linear-gradient(178deg, color-mix(in oklab, var(--gold) 10%, var(--ink-4)), var(--ink-2));
  color: var(--cream); cursor: pointer;
  box-shadow: var(--shadow), 0 0 0 1px rgb(0 0 0 / .4);
  transition: transform .18s cubic-bezier(.2,.8,.3,1), box-shadow .2s, border-color .2s;
}
.ledgerai-launch:hover { transform: translateY(-2px); border-color: var(--gold-hi); }
.ledgerai-launch-words { display: flex; flex-direction: column; line-height: 1.1; text-align: left; }
.ledgerai-launch-words b { font-family: var(--display); font-size: .98rem; color: var(--gold-hi); }
.ledgerai-launch-words i {
  font-style: normal; font-size: .58rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted);
}
.ledgerai.is-open .ledgerai-launch { padding-right: .4rem; }
.ledgerai.is-open .ledgerai-launch-words { display: none; }
.ledgerai.is-busy .ledgerai-launch .ledgerai-seal { animation: ledgeraipulse 1.6s ease-in-out infinite; }
@keyframes ledgeraipulse {
  50% { box-shadow: 0 0 0 7px color-mix(in oklab, var(--gold) 8%, transparent); }
}

.ledgerai-panel {
  position: relative;
  display: flex; flex-direction: column;
  width: min(25.5rem, calc(100vw - 1.5rem));
  height: min(38rem, calc(100dvh - 7.5rem - env(safe-area-inset-top)));
  background:
    linear-gradient(168deg, color-mix(in oklab, var(--gold) 6%, var(--ink-3)) 0%, var(--ink-2) 55%, var(--ink) 100%);
  border: 1px solid var(--hair);
  border-radius: 3px;
  box-shadow: 0 30px 70px -28px rgb(0 0 0 / .95), 0 0 0 1px rgb(0 0 0 / .4);
  overflow: hidden;
  animation: ledgeraiin .26s cubic-bezier(.2,1,.3,1);
}
.ledgerai-panel[hidden] { display: none; }
.ledgerai-panel::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold) 20%, var(--gold-hi) 50%, var(--gold) 80%, transparent);
}
@keyframes ledgeraiin { from { opacity: 0; transform: translateY(.6rem) scale(.985); } }

.ledgerai-head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .55rem .6rem;
  padding: .85rem .8rem .75rem .95rem;
  border-bottom: 1px solid var(--hair-soft);
}
.ledgerai-title { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.ledgerai-title > div { min-width: 0; }
.ledgerai-title .ledgerai-seal { width: 1.9rem; height: 1.9rem; }
.ledgerai-title h2 {
  margin: 0; font-family: var(--display); font-weight: 700; font-size: 1.15rem; line-height: 1.05; color: var(--gold-hi);
}
.ledgerai-title h2 em { font-style: italic; font-weight: 500; color: var(--gold); }
.ledgerai-title p {
  margin: .1rem 0 0; font-size: .58rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
  line-height: 1.35;
}
.ledgerai-tools { grid-column: 1 / -1; display: flex; align-items: center; justify-content: flex-end; gap: .3rem; }
.ledgerai-toggle {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .32rem .5rem; border: 1px solid var(--hair); border-radius: 2px;
  background: transparent; color: var(--cream-dim); cursor: pointer;
  font-family: var(--body); font-size: .6rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  transition: border-color .2s, color .2s, background .2s;
}
.ledgerai-toggle svg { width: .85rem; height: .85rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ledgerai-toggle:hover { border-color: var(--gold); color: var(--gold-hi); }
.ledgerai-toggle.is-on {
  border-color: var(--gold); color: var(--gold-hi);
  background: color-mix(in oklab, var(--gold) 12%, transparent);
}
.ledgerai-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); }
.ledgerai-toggle.is-on .ledgerai-dot {
  background: var(--allow); box-shadow: 0 0 0 3px color-mix(in oklab, var(--allow) 25%, transparent);
}
.ledgerai-close {
  display: grid; place-items: center; width: 1.9rem; height: 1.9rem;
  border: 0; background: transparent; color: var(--cream-dim); cursor: pointer; border-radius: 2px;
}
.ledgerai-close:hover { color: var(--gold-hi); background: color-mix(in oklab, var(--gold) 8%, transparent); }
.ledgerai-close svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

.ledgerai-log {
  flex: 1; overflow-y: auto; overscroll-behavior: contain;
  padding: 1rem .95rem .5rem;
  display: flex; flex-direction: column; gap: .9rem;
  scrollbar-width: thin; scrollbar-color: var(--gold-dim) transparent;
}
.ledgerai-msg { display: flex; flex-direction: column; gap: .2rem; max-width: 100%; }
.ledgerai-who {
  font-size: .56rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted);
}
.ledgerai-listen {
  align-self: flex-start; display: inline-flex; align-items: center; gap: .3rem;
  margin-top: .15rem; padding: .22rem .45rem; border: 1px solid var(--hair); border-radius: 2px;
  background: transparent; color: var(--muted); cursor: pointer;
  font-family: var(--body); font-size: .56rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  transition: border-color .2s, color .2s, background .2s;
}
.ledgerai-listen svg { width: .8rem; height: .8rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ledgerai-listen:hover, .ledgerai-listen:focus-visible { border-color: var(--gold); color: var(--gold-hi); }
.ledgerai-listen.is-on {
  border-color: var(--gold); color: var(--gold-hi);
  background: color-mix(in oklab, var(--gold) 12%, transparent);
}
.ledgerai-body { font-size: .9rem; line-height: 1.55; color: var(--cream); overflow-wrap: anywhere; }
.ledgerai-body p { margin: 0 0 .5rem; }
.ledgerai-body p:last-child, .ledgerai-body ul:last-child, .ledgerai-body ol:last-child { margin-bottom: 0; }
.ledgerai-body ul, .ledgerai-body ol { margin: 0 0 .5rem; padding-left: 1.15rem; }
.ledgerai-body li + li { margin-top: .2rem; }
.ledgerai-body b { color: var(--gold-hi); font-weight: 650; }
.ledgerai-body code { font-family: var(--mono); font-size: .85em; color: var(--gold-hi); }
.ledgerai-body a { color: var(--gold-hi); text-decoration-color: var(--gold-dim); text-underline-offset: 2px; }
.ledgerai-body a:hover { text-decoration-color: var(--gold-hi); }

.ledgerai-msg.is-assistant .ledgerai-body {
  border-left: 1px solid var(--gold-dim); padding-left: .7rem;
}
.ledgerai-msg.is-user { align-items: flex-end; }
.ledgerai-msg.is-user .ledgerai-body {
  max-width: 88%; white-space: pre-wrap;
  padding: .55rem .75rem;
  background: var(--ink-4); border: 1px solid var(--hair); border-radius: 2px;
}
.ledgerai-msg.is-streaming .ledgerai-body > :last-child:not(.ledgerai-typing)::after {
  content: ''; display: inline-block; width: .45rem; height: .95em; margin-left: .15rem;
  vertical-align: -.12em; background: var(--gold); animation: ledgeraicaret 1s steps(2) infinite;
}
@keyframes ledgeraicaret { 50% { opacity: 0; } }
.ledgerai-typing { display: inline-flex; gap: .25rem; padding: .3rem 0; }
.ledgerai-typing i {
  width: 5px; height: 5px; border-radius: 50%; background: var(--gold);
  animation: ledgeraidot 1.1s ease-in-out infinite;
}
.ledgerai-typing i:nth-child(2) { animation-delay: .15s; }
.ledgerai-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes ledgeraidot { 40% { transform: translateY(-4px); opacity: 1; } 0%, 80%, 100% { opacity: .35; } }

.ledgerai-empty { margin: auto 0; padding: .5rem 0; }
.ledgerai-hello {
  margin: 0 0 .35rem; font-family: var(--display); font-size: 1.2rem; line-height: 1.25; color: var(--cream);
}
.ledgerai-hello-sub { margin: 0 0 1rem; font-size: .8rem; color: var(--cream-dim); }
.ledgerai-chips { display: flex; flex-direction: column; gap: .4rem; }
.ledgerai-chip {
  text-align: left; cursor: pointer;
  padding: .55rem .75rem; border: 1px solid var(--hair); border-radius: 2px;
  background: color-mix(in oklab, var(--ink) 50%, transparent); color: var(--cream-dim);
  font-family: var(--body); font-size: .8rem;
  transition: border-color .2s, color .2s, background .2s;
}
.ledgerai-chip:hover { border-color: var(--gold); color: var(--gold-hi); background: color-mix(in oklab, var(--gold) 7%, transparent); }

.ledgerai-status {
  margin: 0; padding: .35rem .95rem;
  font-family: var(--mono); font-size: .72rem; color: var(--gold);
  border-top: 1px solid var(--hair-soft);
}
.ledgerai-status[hidden] { display: none; }
.ledgerai-status[data-tone="error"] { color: var(--deny); }
.ledgerai-status[data-tone="listening"] { color: var(--allow); }

.ledgerai-compose {
  display: flex; align-items: flex-end; gap: .4rem;
  padding: .65rem .7rem .55rem .8rem;
  border-top: 1px solid var(--hair-soft);
  background: color-mix(in oklab, var(--ink) 60%, transparent);
}
.ledgerai-input {
  flex: 1; resize: none; min-height: 2.5rem; max-height: 140px;
  padding: .6rem .7rem;
  font-family: var(--body); font-size: 16px; line-height: 1.4; color: var(--cream);
  background: var(--ink); border: 1px solid var(--hair); border-radius: 2px;
}
.ledgerai-input::placeholder { color: var(--muted); }
.ledgerai-input:focus { border-color: var(--gold); outline: none; }
.ledgerai-mic, .ledgerai-send {
  display: grid; place-items: center; flex: none;
  width: 2.5rem; height: 2.5rem; border-radius: 2px; cursor: pointer;
  transition: transform .16s, border-color .2s, color .2s, box-shadow .2s;
}
.ledgerai-mic svg, .ledgerai-send svg {
  width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.ledgerai-mic { border: 1px solid var(--hair); background: transparent; color: var(--cream-dim); }
.ledgerai-mic:hover { border-color: var(--gold); color: var(--gold-hi); }
.ledgerai-mic.is-on {
  border-color: var(--allow); color: var(--allow);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--allow) 18%, transparent);
  animation: ledgeraimic 1.4s ease-in-out infinite;
}
@keyframes ledgeraimic { 50% { box-shadow: 0 0 0 8px color-mix(in oklab, var(--allow) 6%, transparent); } }
.ledgerai-send {
  border: 1px solid var(--gold); color: #1a1409;
  background: linear-gradient(178deg, var(--gold-hi), var(--gold) 55%, #a97f24);
}
.ledgerai-send:hover { transform: translateY(-1px); }
.ledgerai-send rect { fill: currentColor; stroke: none; }
.ledgerai.is-offline .ledgerai-send, .ledgerai.is-offline .ledgerai-mic { opacity: .45; }
.ledgerai-fine { margin: 0; padding: 0 .95rem .6rem; font-size: .62rem; line-height: 1.4; color: var(--muted); }

@media (max-width: 640px) {
  .ledgerai.is-open { left: .5rem; right: .5rem; }
  .ledgerai.is-open .ledgerai-panel { width: 100%; height: calc(100dvh - 6.2rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
  .ledgerai-launch-words i { display: none; }
  .ledgerai-toggle span:not(.ledgerai-dot) { display: none; }
  .ledgerai-toggle { padding: .4rem; }
  .ledgerai-toggle:has(.ledgerai-dot) span:last-child { display: inline; }
}
@media (prefers-reduced-motion: reduce) {
  .ledgerai-panel, .ledgerai-mic.is-on, .ledgerai.is-busy .ledgerai-launch .ledgerai-seal,
  .ledgerai-typing i, .ledgerai-msg.is-streaming .ledgerai-body > :last-child:not(.ledgerai-typing)::after { animation: none; }
}
@media print { .ledgerai { display: none; } }

/* ---------------- step tracker ---------------- */
.steps { min-width: 0; margin: 0 calc(-1 * clamp(.85rem, 3vw, 2rem)); }
.steps ol {
  list-style: none; margin: 0; padding: 0 clamp(.85rem, 3vw, 2rem) .1rem;
  display: flex; gap: .3rem; overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.steps ol::-webkit-scrollbar { display: none; }
.steps li { flex: 0 0 auto; display: flex; align-items: center; }
.steps li + li::before {
  content: ''; width: .9rem; height: 1px; margin-right: .3rem;
  background: var(--hair);
}
.steps li:not(.stepaside) + li.stepaside::before {
  width: 1px; height: .9rem; margin: 0 .45rem 0 .25rem; background: var(--hair);
}
.steps a {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .26rem .6rem .26rem .3rem; border-radius: 999px;
  border: 1px solid transparent;
  color: var(--cream-dim); text-decoration: none;
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600;
  white-space: nowrap;
  transition: border-color .2s, background .2s, color .2s;
}
.steps a:hover { color: var(--gold-hi); border-color: var(--hair); }
.steps a:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 2px; }
.stepno {
  display: inline-grid; place-items: center; width: 1.45rem; height: 1.45rem;
  border-radius: 50%; border: 1px solid var(--hair);
  font-family: var(--mono); font-size: .64rem; letter-spacing: 0; color: var(--gold);
  background: var(--ink);
}
.steps a[data-state="done"] .stepno {
  background: var(--gold); border-color: var(--gold); color: var(--ink);
}
.steps a[data-state="done"] .stepno { font-size: 0; }
.steps a[data-state="done"] .stepno::before { content: '\2713'; font-size: .72rem; font-family: var(--body); }
.steps a[data-state="optional"] .stepno { border-style: dashed; }
.steps a[data-state="locked"] { color: var(--muted); opacity: .62; }
.steps a[aria-current="step"] {
  color: var(--gold-hi); border-color: var(--gold-dim);
  background: color-mix(in oklab, var(--gold) 10%, transparent);
}
.steps a[aria-current="step"] .stepno { border-color: var(--gold); }
.steps .stepaside a { color: var(--muted); }
@media (max-width: 560px) {
  .steps .steplabel { display: none; }
  .steps a { padding: .2rem; }
  .steps a[aria-current="step"] .steplabel { display: inline; }
  .steps a[aria-current="step"] { padding-right: .6rem; }
  .steps li + li::before { width: .5rem; }
}

/* The way on from a station to the next one. */
.stepnext {
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem;
  margin-top: 1.1rem; padding-top: 1rem;
  border-top: 1px dashed var(--hair-soft);
}
.stepnext[hidden] { display: none; }
.stepnext a { text-decoration: none; }

/* Issued: one tap to clear the bench for the next purchase. */
.nextpurchase {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1.2rem;
  margin-bottom: 1.1rem; padding: .85rem 1rem;
  border: 1px solid color-mix(in oklab, var(--allow) 40%, transparent);
  background: color-mix(in oklab, var(--allow) 8%, transparent);
  border-radius: 3px;
}
.nextpurchase p { margin: 0; font-size: .9rem; color: var(--cream-dim); max-width: 52ch; }
.nextpurchase b { color: var(--cream); }

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

/* ============================================================
   Staff sign-in, account & security
   ============================================================ */
a.ledgerai-toggle { text-decoration: none; }
.acctbtn { max-width: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 620px) {
  .topactions { gap: .3rem; }
  .topactions .ghostbtn { padding: .42rem .55rem; font-size: .6rem; letter-spacing: .08em; }
  .acctbtn { max-width: 6.5rem; }
}

.authmain {
  min-height: calc(100dvh - 4rem);
  display: grid; place-items: start center;
  padding: clamp(1.5rem, 6vw, 4rem) clamp(.85rem, 4vw, 2rem) 4rem;
}
.authcard { width: min(100%, 30rem); position: relative; z-index: 1; }
.authmain.wide .authcard { width: min(100%, 40rem); }
.authtitle {
  font-family: var(--display); font-weight: 700; line-height: 1;
  font-size: clamp(1.9rem, 6vw, 2.5rem); margin: 0 0 .6rem; letter-spacing: -.01em;
}
.authlede { color: var(--cream-dim); margin: 0 0 1.3rem; font-size: .95rem; }
.authlede b { color: var(--cream); }
.authstep { margin: 0 0 .4rem; font-family: var(--mono); font-size: .72rem; color: var(--gold); letter-spacing: .06em; }
.authnote { color: var(--muted); font-size: .84rem; margin: .4rem 0 .8rem; }
.authwide { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: .6rem; }
.authswitch { margin: 1.2rem 0 0; font-size: .86rem; color: var(--muted); }
.authswitch a, .authalt summary { color: var(--gold-hi); }
.authrow { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .8rem 0; }
.authrow input { flex: 1 1 12rem; width: auto; }
.authmsg {
  margin: 0 0 1rem; padding: .7rem .9rem; border-radius: 2px; font-size: .88rem;
  border: 1px solid color-mix(in oklab, var(--deny) 55%, transparent);
  background: color-mix(in oklab, var(--deny) 12%, transparent); color: var(--cream);
}
.authmsg[data-tone="ok"] { border-color: color-mix(in oklab, var(--allow) 55%, transparent); background: color-mix(in oklab, var(--allow) 12%, transparent); }
.authmsg[data-tone="warn"] { border-color: color-mix(in oklab, var(--cond) 55%, transparent); background: color-mix(in oklab, var(--cond) 12%, transparent); }
.authalt { margin-top: 1.2rem; border-top: 1px solid var(--hair-soft); padding-top: 1rem; }
.authalt summary { cursor: pointer; font-size: .88rem; margin-bottom: .9rem; }
.authcheck { display: flex; gap: .55rem; align-items: center; margin: 1rem 0; font-size: .9rem; color: var(--cream-dim); }
.authcheck input { width: 1.1rem; height: 1.1rem; accent-color: var(--gold); }
.codeinput { font-family: var(--mono); font-size: 1.35rem; letter-spacing: .3em; text-align: center; }
.authrow .codeinput { font-size: 1rem; letter-spacing: .2em; }

.totpsetup { display: grid; grid-template-columns: 9.5rem 1fr; gap: 1.1rem; align-items: center; margin-bottom: 1.2rem; }
.totpqr { display: block; border-radius: 3px; overflow: hidden; box-shadow: 0 0 0 1px var(--hair); }
.totpqr svg { display: block; width: 100%; height: auto; }
.totpkey {
  display: block; font-family: var(--mono); font-size: .92rem; color: var(--gold-hi);
  word-break: break-all; margin: .2rem 0 .6rem; user-select: all;
}
@media (max-width: 420px) { .totpsetup { grid-template-columns: 1fr; } .totpqr { max-width: 12rem; } }

.codelist {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: .45rem 1.2rem;
  margin: 0 0 .4rem; padding: 1rem 1rem 1rem 2.4rem;
  background: var(--ink); border: 1px dashed var(--hair); border-radius: 2px;
  font-family: var(--mono); font-size: 1rem; color: var(--cream);
}
.codelist li::marker { color: var(--muted); font-size: .8rem; }

.acctblock { border-top: 1px solid var(--hair-soft); padding-top: 1.1rem; margin-top: 1.3rem; }
.acctblock h2 { font-family: var(--display); font-size: 1.3rem; margin: 0 0 .2rem; }
.acctblock h2 small { font-family: var(--body); font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-left: .5rem; }
.acctlist { list-style: none; margin: .6rem 0; padding: 0; display: grid; gap: .45rem; }
.acctlist li {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  padding: .6rem .8rem; border: 1px solid var(--hair-soft); border-radius: 2px; background: var(--ink);
}
.acctlist li span { display: flex; flex-direction: column; min-width: 0; }
.acctlist small { color: var(--muted); font-size: .76rem; }
.codesleft { margin: .3rem 0 0; color: var(--cream-dim); }
.codesleft b { font-family: var(--display); font-size: 1.6rem; color: var(--gold-hi); margin-right: .2rem; }

.authexpired {
  position: fixed; left: 50%; bottom: calc(1rem + env(safe-area-inset-bottom)); transform: translateX(-50%);
  z-index: 60; display: flex; align-items: center; gap: .9rem; flex-wrap: wrap;
  width: min(94vw, 36rem); padding: .8rem 1rem; border-radius: 3px;
  background: var(--ink-3); border: 1px solid var(--cond); box-shadow: var(--shadow); font-size: .86rem;
}
.authexpired span { flex: 1 1 14rem; }
.goldbtn.small { padding: .5rem .8rem; font-size: .66rem; }

@media print {
  .authpage .topbar, .authpage .grain, .authpage .authrow, .authpage .authcheck, .authpage #finishBtn,
  .authpage .authmsg, .authpage .acctblock:not(:has(#newCodes:not([hidden]))) { display: none !important; }
  .authpage, .authpage .stationbody { background: #fff !important; color: #000 !important; box-shadow: none !important; }
  .codelist { background: #fff; color: #000; }
}

/* ============================================================
   Ledger AI agent workspace
   ============================================================ */
.agentmain {
  display: grid; grid-template-columns: minmax(15rem, 20rem) minmax(0, 1fr); gap: clamp(1rem, 3vw, 2.4rem);
  max-width: 78rem; margin: 0 auto; padding: clamp(1rem, 3vw, 2rem) clamp(.85rem, 3vw, 2rem);
  height: calc(100dvh - 3.6rem);
}
.agentside { position: relative; z-index: 1; overflow-y: auto; padding-right: .3rem; }
.agentseal { border-radius: 50%; filter: drop-shadow(0 10px 22px rgb(0 0 0 / .55)); margin-bottom: .8rem; }
.agenttitle {
  font-family: var(--display); font-weight: 700; font-size: clamp(1.9rem, 4vw, 2.6rem);
  line-height: .98; margin: 0 0 .8rem; letter-spacing: -.015em;
}
.agenttitle em {
  font-style: italic; color: transparent;
  background: linear-gradient(96deg, var(--gold-hi), var(--gold) 48%, #b0812a);
  -webkit-background-clip: text; background-clip: text;
}
.agentlede { color: var(--cream-dim); font-size: .92rem; margin: 0 0 1rem; }
.agentcan { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .5rem; font-size: .84rem; color: var(--muted); }
.agentcan li { padding-left: 1.1rem; position: relative; }
.agentcan li::before { content: '§'; position: absolute; left: 0; color: var(--gold-dim); font-family: var(--display); }
.agentcan b { color: var(--cream); font-weight: 600; }
.agentnote { font-size: .78rem; color: var(--muted); border-left: 2px solid var(--gold-dim); padding-left: .7rem; margin: 0 0 1rem; }

.agentwork {
  position: relative; z-index: 1; display: flex; flex-direction: column; min-height: 0;
  background: linear-gradient(168deg, var(--ink-3), var(--ink-2) 70%);
  border: 1px solid var(--hair-soft); border-radius: 3px; box-shadow: var(--shadow);
}
.agentlog { flex: 1; overflow-y: auto; padding: clamp(1rem, 3vw, 1.8rem); scroll-behavior: smooth; }
.agentempty h2 { font-family: var(--display); font-size: 1.5rem; margin: 0 0 1rem; }
.agentsuggest { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .55rem; }
.agentchip {
  text-align: left; font: inherit; font-size: .86rem; color: var(--cream-dim); cursor: pointer;
  padding: .75rem .9rem; border-radius: 2px; border: 1px solid var(--hair-soft); background: var(--ink);
  transition: border-color .2s, color .2s, background .2s;
}
.agentchip:hover { border-color: var(--gold); color: var(--gold-hi); background: color-mix(in oklab, var(--gold) 6%, var(--ink)); }

.agentturn { margin: 0 0 1.4rem; }
.agentturn.is-user { display: flex; justify-content: flex-end; }
.agentq {
  margin: 0; max-width: 80%; padding: .65rem .95rem; border-radius: 3px 3px 0 3px; white-space: pre-wrap;
  background: color-mix(in oklab, var(--gold) 14%, var(--ink-2)); border: 1px solid var(--hair);
}
.agentsteps { list-style: none; margin: 0 0 .6rem; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.agentsteps:empty { display: none; }
.agentstep {
  display: inline-flex; align-items: center; gap: .55rem; align-self: flex-start;
  font-family: var(--mono); font-size: .76rem; color: var(--cream-dim);
  padding: .28rem .65rem; border: 1px solid var(--hair-soft); border-radius: 999px; background: var(--ink);
}
.agentstep::before {
  content: ''; width: .55rem; height: .55rem; border-radius: 50%; flex: none;
  border: 1.5px solid var(--gold); border-right-color: transparent; animation: agentspin .8s linear infinite;
}
.agentstep[data-state="done"]::before { animation: none; border: 0; background: var(--allow); }
.agentstep[data-state="error"]::before { animation: none; border: 0; background: var(--deny); }
@keyframes agentspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .agentstep::before { animation: none; } }

.agentans { color: var(--cream); font-size: .95rem; max-width: 72ch; }
.agentans p { margin: 0 0 .7rem; }
.agentans h3 { font-family: var(--display); font-size: 1.15rem; margin: 1rem 0 .4rem; color: var(--gold-hi); }
.agentans ul, .agentans ol { margin: 0 0 .8rem; padding-left: 1.3rem; }
.agentans li { margin: .2rem 0; }
.agentans a { color: var(--gold-hi); }
.agentans code { font-family: var(--mono); font-size: .88em; color: var(--gold-hi); }
.agentturn.is-streaming .agentans:empty::after { content: '…'; color: var(--muted); }
.agenttable { overflow-x: auto; margin: 0 0 .9rem; border: 1px solid var(--hair-soft); border-radius: 2px; }
.agenttable table { border-collapse: collapse; width: 100%; font-size: .84rem; }
.agenttable th, .agenttable td { padding: .45rem .7rem; text-align: left; border-bottom: 1px solid var(--hair-soft); }
.agenttable th { font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); font-weight: 600; background: var(--ink); }
.agenttable tr:last-child td { border-bottom: 0; }

.agentcompose { display: flex; gap: .6rem; align-items: flex-end; padding: .8rem; border-top: 1px solid var(--hair-soft); }
.agentcompose textarea { flex: 1; resize: none; min-height: 2.9rem; max-height: 13.75rem; }
.agentstatus { margin: 0; padding: 0 .9rem .7rem; min-height: 1.4rem; font-size: .78rem; color: var(--muted); }
.agentstatus[data-tone="error"] { color: var(--deny); }
.agentstatus[data-tone="busy"] { color: var(--gold); }
.agentstatus[data-tone="listening"] { color: var(--allow); }
.agentstatus[data-tone="speaking"] { color: var(--gold-hi); }
.agentvoice { display: flex; justify-content: flex-end; gap: .3rem; padding: .55rem .8rem 0; border-top: 1px solid var(--hair-soft); }
.agentvoice:has(> :not([hidden])) + .agentcompose { border-top: 0; }
.agentvoice:not(:has(> :not([hidden]))) { display: none; }
.agentcompose .ledgerai-mic { width: 2.9rem; height: 2.9rem; }
.agentvoice > [hidden], .agentcompose > [hidden], .agentturn .ledgerai-listen[hidden] { display: none; }
.agentturn .ledgerai-listen { margin-top: 0; }

@media (max-width: 820px) {
  .agentmain { grid-template-columns: 1fr; height: auto; }
  .agentside { overflow: visible; }
  .agentcan, .agentseal { display: none; }
  .agentwork { height: calc(100dvh - 5rem); }
}

/* The set-up-a-passkey prompt shares the session banner's place, in gold. */
.authexpired.passkeynudge { border-color: var(--gold); }

/* Invite links and feed keys are long single tokens; let them wrap. */
#inviteLink, #feedKey { display: block; word-break: break-all; user-select: all; }