/* ============================================================
   EH Professional
   A money-changer's ledger. Every colour is a token; the palette chosen on
   <html data-palette> supplies the values, and dark overrides them again.
   ============================================================ */

@font-face {
  font-family: "Instrument Sans Variable";
  src: url("fonts/instrument-sans.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------------- tokens
   Three palettes, chosen with data-palette on <html>, each with a dark
   counterpart. Variable names never change: only their values do, so every
   rule below this block is written once and works in all six combinations.

   Cascade order matters. Bare :root carries the shared tokens and the slate
   light values, so a page with no data-palette still renders. Each light
   palette then overrides at [data-palette] (0,2,0), the shared dark block at
   [data-theme="dark"] (0,2,0) comes after them, and each dark palette wins
   last at [data-palette][data-theme] (0,3,0).
   ------------------------------------------------------------------- */

:root {
  /* --- shared, palette-independent --- */
  --credit: #1b7248;
  --credit-soft: #e1f1e7;
  --loss: #b3261e;
  --loss-soft: #fbe8e5;
  --blue: #2c5a86;
  --blue-soft: #e2ebf5;
  --violet: #6a4c9c;
  --violet-soft: #ece6f6;

  /* Radii carry the hierarchy: the bigger the surface, the softer the corner. */
  --r-hero: 20px;
  --r-card: 14px;
  --r-input: 9px;
  --r-pill: 99px;

  /* One hue per country, named so the mapping is changed in one place. */
  --country-af: var(--credit);
  --country-pk: var(--blue);
  --country-ae: var(--violet);

  --rail: 248px;
  --gap: 16px;

  /* --- slate, the default --- */
  --paper: #f4f6f8;
  --surface: #ffffff;
  --surface-2: #f1f4f7;
  --ink: #1b2430;
  --muted: #5b6776;
  --line: #dde3ea;
  --line-2: #e9edf2;

  --chrome: #1f2a37;
  --chrome-2: #2b3848;
  --on-chrome: #dbe3ec;
  --on-chrome-dim: #93a1b3;
  --chrome-hover: rgba(255, 255, 255, .07);
  --chrome-active: rgba(255, 255, 255, .12);

  /* The accent. Named "bronze" since the first palette; it is whatever the
     current palette's accent happens to be. */
  --bronze: #2d6a8f;
  --bronze-2: #3f82ab;
  --bronze-soft: #e3eef6;
  /* Accent at body-text size. Same as --bronze unless the accent is too light
     against the surface to clear 4.5:1, which is the case for navy on white. */
  --accent-text: var(--bronze);

  --guilloche-hero: .14;

  --shadow: 0 1px 2px rgba(27, 36, 48, .05), 0 8px 24px -16px rgba(27, 36, 48, .3);
  --shadow-lift: 0 2px 4px rgba(27, 36, 48, .06), 0 16px 40px -24px rgba(27, 36, 48, .4);
}

/* --------------------------------------------------------- slate light */
:root[data-palette="slate"] {
  --paper: #f4f6f8;
  --surface: #ffffff;
  --surface-2: #f1f4f7;
  --ink: #1b2430;
  --muted: #5b6776;
  --line: #dde3ea;
  --line-2: #e9edf2;

  --chrome: #1f2a37;
  --chrome-2: #2b3848;
  --on-chrome: #dbe3ec;
  --on-chrome-dim: #93a1b3;

  --bronze: #2d6a8f;
  --bronze-2: #3f82ab;
  --bronze-soft: #e3eef6;

  --guilloche-hero: .14;

  --shadow: 0 1px 2px rgba(27, 36, 48, .05), 0 8px 24px -16px rgba(27, 36, 48, .3);
  --shadow-lift: 0 2px 4px rgba(27, 36, 48, .06), 0 16px 40px -24px rgba(27, 36, 48, .4);
}

/* ---------------------------------------------------------- navy light */
:root[data-palette="navy"] {
  --paper: #f3f5f9;
  --surface: #ffffff;
  --surface-2: #eef1f7;
  --ink: #16203a;
  --muted: #5a6580;
  --line: #dae0ec;
  --line-2: #e7ebf4;

  --chrome: #13233f;
  --chrome-2: #1d3157;
  --on-chrome: #dbe3f2;
  --on-chrome-dim: #93a2bd;

  --bronze: #a8843f;
  --bronze-2: #c29b52;
  --bronze-soft: #f3ead8;
  --accent-text: #8a6b2e;   /* #a8843f is only 3.48:1 on white */

  --guilloche-hero: .14;

  --shadow: 0 1px 2px rgba(22, 32, 58, .05), 0 8px 24px -16px rgba(22, 32, 58, .32);
  --shadow-lift: 0 2px 4px rgba(22, 32, 58, .06), 0 16px 40px -24px rgba(22, 32, 58, .42);
}

/* --------------------------------------------------------- green light */
/* The original ledger palette, unchanged. */
:root[data-palette="green"] {
  --paper: #eceee6;
  --surface: #fbfcf8;
  --surface-2: #f4f6f0;
  --ink: #15211c;
  --muted: #5d6a63;
  --line: #d5dbd0;
  --line-2: #e4e8df;

  --chrome: #0e3a30;
  --chrome-2: #15493c;
  --on-chrome: #dbe7e0;
  --on-chrome-dim: #8aa79b;

  --bronze: #9d6a22;
  --bronze-2: #c38a38;
  --bronze-soft: #f2e6cf;

  --guilloche-hero: .28;

  --shadow: 0 1px 2px rgba(21, 33, 28, .05), 0 8px 24px -16px rgba(21, 33, 28, .3);
  --shadow-lift: 0 2px 4px rgba(21, 33, 28, .06), 0 16px 40px -24px rgba(21, 33, 28, .45);
}

/* ===================================================== dark counterparts */
/* Shared dark values plus slate dark, so an unset data-palette still works. */
:root[data-theme="dark"] {
  --credit: #4fbf85;
  --credit-soft: #113024;
  --loss: #f07a70;
  --loss-soft: #37191a;
  --blue: #79a9d8;
  --blue-soft: #14283a;
  --violet: #b299e0;
  --violet-soft: #241d3a;

  --chrome-hover: rgba(255, 255, 255, .06);
  --chrome-active: rgba(255, 255, 255, .11);

  --paper: #0f141a;
  --surface: #161d25;
  --surface-2: #1c2530;
  --ink: #e5eaf0;
  --muted: #98a4b3;
  --line: #2a3542;
  --line-2: #222d38;

  --chrome: #0b1016;
  --chrome-2: #121a22;
  --on-chrome: #ccd7e4;
  --on-chrome-dim: #8494a6;

  --bronze: #6fa8cf;
  --bronze-2: #8fc0e0;
  --bronze-soft: #17293a;

  --guilloche-hero: .14;

  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -16px rgba(0, 0, 0, .7);
  --shadow-lift: 0 2px 4px rgba(0, 0, 0, .45), 0 16px 40px -24px rgba(0, 0, 0, .8);
}

/* ---------------------------------------------------------- slate dark */
:root[data-palette="slate"][data-theme="dark"] {
  --paper: #0f141a;
  --surface: #161d25;
  --surface-2: #1c2530;
  --ink: #e5eaf0;
  --muted: #98a4b3;
  --line: #2a3542;
  --line-2: #222d38;

  --chrome: #0b1016;
  --chrome-2: #121a22;
  --on-chrome: #ccd7e4;
  --on-chrome-dim: #8494a6;

  --bronze: #6fa8cf;
  --bronze-2: #8fc0e0;
  --bronze-soft: #17293a;

  --guilloche-hero: .14;
}

/* ----------------------------------------------------------- navy dark */
:root[data-palette="navy"][data-theme="dark"] {
  --paper: #0b1020;
  --surface: #121a2e;
  --surface-2: #182238;
  --ink: #e4e9f5;
  --muted: #97a3bd;
  --line: #27324a;
  --line-2: #202b40;

  --chrome: #080d1a;
  --chrome-2: #101829;
  --on-chrome: #d5deef;
  --on-chrome-dim: #8998b5;

  --bronze: #d3ad63;
  --bronze-2: #e4c485;
  --bronze-soft: #332a17;

  --guilloche-hero: .14;
}

/* ---------------------------------------------------------- green dark */
:root[data-palette="green"][data-theme="dark"] {
  --paper: #0b1411;
  --surface: #121e19;
  --surface-2: #172620;
  --ink: #e3ebe6;
  --muted: #92a39a;
  --line: #26372f;
  --line-2: #1f2f28;

  --chrome: #07100d;
  --chrome-2: #0e1c17;
  --on-chrome: #cfded6;
  --on-chrome-dim: #7e968b;

  --bronze: #d39e52;
  --bronze-2: #e6bb7c;
  --bronze-soft: #33271a;

  --guilloche-hero: .28;
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Instrument Sans Variable", "Instrument Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-text); }
h1, h2, h3 { line-height: 1.25; }

:focus-visible {
  outline: 2px solid var(--bronze-2);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection { background: var(--bronze-soft); color: var(--ink); }

/* ------------------------------------------------------------ utility */
.hidden { display: none !important; }
.muted { color: var(--muted); }
.mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.small { font-size: .8rem; }
.r { text-align: right; }
.sprite { display: none; }
.ico { width: 18px; height: 18px; flex: 0 0 18px; stroke-width: 1.6; }

/* ============================================================ the rail
   One full-height sticky column in ink green. It is the whole chrome:
   there is no top bar above it on the desktop.
   ============================================================ */
.shell {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  min-height: 100vh;
}

.rail {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--chrome);
  color: var(--on-chrome);
  border-right: 1px solid rgba(0, 0, 0, .35);
  overflow: hidden;
}

/* The guilloche, tinted bronze, sits behind the rail head as a watermark. */
.rail-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 18px 16px 16px;
  isolation: isolate;
}
.rail-head::before {
  content: "";
  position: absolute;
  inset: -30px -120px -20px -40px;
  background: var(--bronze);
  opacity: .17;
  -webkit-mask: url("guilloche.svg") right center / cover no-repeat;
  mask: url("guilloche.svg") right center / cover no-repeat;
  z-index: -1;
  pointer-events: none;
}

.rail-logo {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: var(--r-pill);
  padding: 2px;
  background: var(--chrome-2);
  box-shadow: 0 0 0 1.5px var(--bronze);
  display: grid;
  place-items: center;
}
.rail-logo img {
  width: 100%;
  height: 100%;
  border-radius: var(--r-pill);
  object-fit: cover;
  display: block;
}

.rail-name { min-width: 0; }
.rail-name strong {
  display: block;
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: -.01em;
}
.rail-name small {
  display: block;
  font-size: .7rem;
  color: var(--on-chrome-dim);
  line-height: 1.3;
  margin-top: 1px;
}

.rail-nav {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 6px 10px 14px;
}

.nav-group + .nav-group { margin-top: 16px; }
.nav-group-title {
  margin: 0 0 5px;
  padding: 0 8px;
  font-size: .7rem;
  font-weight: 600;
  color: var(--on-chrome-dim);
}

.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  margin-bottom: 2px;
  border-radius: var(--r-input);
  color: var(--on-chrome);
  text-decoration: none;
  font-size: .92rem;
  transition: background-color .15s ease, color .15s ease;
}
.nav-item .ico { color: var(--on-chrome-dim); }
.nav-item span { flex: 1 1 auto; min-width: 0; }
.nav-item:hover { background: var(--chrome-hover); }
.nav-item:hover .ico { color: var(--on-chrome); }

/* Active: a lighter bed plus a bronze bar welded to its left edge. */
.nav-item.active {
  background: var(--chrome-active);
  font-weight: 600;
}
.nav-item.active .ico { color: var(--bronze-2); }
.nav-item.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--bronze-2);
}

.dot {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: var(--r-pill);
  background: currentColor;
}
.dot-hawala { color: var(--credit); }
.dot-debit { color: var(--blue); }
.dot-tt { color: var(--violet); }

/* -------------------------------------------------------- rail bottom */
.rail-foot {
  flex: 0 0 auto;
  padding: 12px 12px 14px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  background: var(--chrome-2);
}

.rail-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: var(--r-input);
  text-decoration: none;
  color: var(--on-chrome);
  min-width: 0;
}
.rail-user:hover { background: var(--chrome-hover); }
.rail-user strong {
  display: block;
  font-size: .88rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rail-user small { display: block; font-size: .72rem; color: var(--on-chrome-dim); }
.rail-user > span:last-child { min-width: 0; }

.avatar {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border-radius: var(--r-pill);
  display: grid;
  place-items: center;
  background: var(--bronze);
  color: #fff;
  font-weight: 600;
  font-size: .95rem;
}
:root[data-theme="dark"] .avatar { color: #1b1206; }

.rail-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}
.rail-actions form { margin: 0; flex: 1 1 auto; }

.chrome-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--r-input);
  background: transparent;
  color: var(--on-chrome);
  font: inherit;
  font-size: .84rem;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.chrome-btn:hover { background: var(--chrome-hover); border-color: rgba(255, 255, 255, .3); }

.theme-toggle { width: 36px; flex: 0 0 36px; padding: 8px 0; }
.theme-toggle .ico { flex: 0 0 18px; }
/* One button, two glyphs: show the theme you would switch to. */
.theme-toggle .ico-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .ico-moon { display: block; }
:root[data-theme="dark"] .theme-toggle .ico-sun { display: none; }

.install-app {
  width: auto;
  margin: 0 0 8px;
  padding: 8px 12px;
  border: 0;
  border-radius: var(--r-input);
  background: var(--bronze);
  color: #fff;
  font: inherit;
  font-size: .84rem;
  font-weight: 600;
  cursor: pointer;
}
:root[data-theme="dark"] .install-app { color: #1b1206; }
.install-app[hidden] { display: none; }

/* =========================================================== the page */
.content {
  padding: 26px 28px 40px;
  min-width: 0;
  max-width: 1500px;
}

.page-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.page-heading h2 {
  margin: 3px 0 0;
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -.02em;
}
.eyebrow {
  margin: 0;
  color: var(--accent-text);
  font-size: .8rem;
  font-weight: 600;
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 20px;
  margin-bottom: var(--gap);
  box-shadow: var(--shadow);
}
.card h3 { margin: 0 0 12px; font-size: 1.02rem; font-weight: 600; }
.card.narrow { max-width: 460px; }

.notice {
  padding: 11px 14px;
  border-radius: var(--r-input);
  border: 1px solid transparent;
  font-size: .9rem;
  margin: 0 0 14px;
}
.notice-ok { background: var(--credit-soft); border-color: var(--credit); color: var(--credit); }
.notice-info { background: var(--blue-soft); border-color: var(--blue); color: var(--blue); }
.notice-error { background: var(--loss-soft); border-color: var(--loss); color: var(--loss); font-weight: 600; }

.foot { margin-top: 8px; font-size: .82rem; }

/* ---------------------------------------------------------- buttons */
.save {
  border: 0;
  border-radius: var(--r-input);
  background: var(--chrome);
  color: #fff;
  padding: 12px 20px;
  font: inherit;
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s ease, transform .1s ease;
}
.save:hover { background: var(--chrome-2); }
.save:active { transform: translateY(1px); }
.save.small { padding: 9px 15px; font-size: .88rem; }
.save:disabled { opacity: .55; cursor: default; transform: none; }
:root[data-theme="dark"] .save { background: var(--bronze); color: #1b1206; }
:root[data-theme="dark"] .save:hover { background: var(--bronze-2); }

.btn-light {
  display: inline-block;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  padding: 9px 14px;
  border-radius: var(--r-input);
  text-decoration: none;
  font: inherit;
  font-size: .88rem;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.btn-light:hover { border-color: var(--bronze); background: var(--surface-2); }

.danger {
  border: 1px solid var(--loss);
  background: var(--loss-soft);
  color: var(--loss);
  padding: 8px 12px;
  border-radius: var(--r-input);
  font: inherit;
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
}
.danger:hover { background: var(--loss); color: var(--surface); }

/* ------------------------------------------------------------ forms */
.field { display: block; }
.field > span {
  display: block;
  font-size: .82rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 6px;
}

.field input,
.field select,
textarea,
.inline input,
.void-box input {
  width: 100%;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: var(--r-input);
  padding: 0 11px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field select {
  appearance: none;
  padding-right: 32px;
  /* Caret drawn in CSS so no extra file is fetched. */
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-size: 6px 6px, 6px 6px;
  background-position: right 15px center, right 9px center;
  background-repeat: no-repeat;
}
textarea {
  height: auto;
  padding: 11px;
  font-size: .85rem;
  line-height: 1.55;
  margin-bottom: 10px;
}

.field input:hover,
.field select:hover,
textarea:hover { border-color: #b9c4bb; }

.field input:focus,
.field select:focus,
textarea:focus,
.inline input:focus,
.void-box input:focus {
  outline: none;
  border-color: var(--bronze);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bronze) 22%, transparent);
}
/* Only after the user has actually touched it -- an untouched required
   field must not greet them in red. */
.field input:user-invalid,
.field select:user-invalid { border-color: var(--loss); }
::placeholder { color: var(--muted); opacity: .7; }

.field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
}
.span2 { grid-column: 1 / -1; }

.check {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-size: .88rem;
  align-self: end;
  padding-bottom: 10px;
}
.check input { margin-top: 3px; accent-color: var(--bronze); }

.field > .date-wrap,
.date-wrap { display: flex; gap: 6px; margin: 0; }
.date-wrap .uk-date { flex: 1 1 auto; }
.date-pick {
  width: 46px !important;
  flex: 0 0 46px;
  padding: 0 6px !important;
  color: transparent;
}
.date-pick::-webkit-datetime-edit { display: none; }

.inline { display: inline-flex; gap: 6px; align-items: center; margin: 0; }
.inline input { height: 36px; width: 160px; font-size: .85rem; }

/* ------------------------------------------------------------ entry */
/* A 4px stripe across the top says which book you are writing in. */
.entry {
  border-top: 4px solid var(--credit);
  padding-top: 22px;
}
.entry-gbp_debit { border-top-color: var(--blue); }
.entry-tt { border-top-color: var(--violet); }

.preview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  margin-top: 22px;
}
.pbox {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-input);
  padding: 13px 14px;
}
.pbox span {
  display: block;
  font-size: .78rem;
  color: var(--muted);
  margin-bottom: 5px;
}
.pbox strong { font-size: 1.25rem; font-weight: 600; letter-spacing: -.01em; }
.pbox.accent {
  background: var(--bronze-soft);
  border-color: var(--bronze);
}
.pbox.accent span { color: var(--bronze); }
/* The running total lands on ink green: it is the figure that matters. */
.pbox.featured {
  background: var(--chrome);
  border-color: var(--chrome);
  color: #fff;
}
.pbox.featured span { color: var(--on-chrome-dim); }

.locked { font-size: .8rem; color: var(--muted); margin: 14px 0 0; }

.receipt-mini p { margin: 8px 0 12px; }

/* -------------------------------------------------------- dashboard */
.page-sub { margin: 4px 0 0; color: var(--muted); font-size: .9rem; }

.dash-row { display: grid; gap: var(--gap); margin-bottom: var(--gap); }
.dash-row-hero { grid-template-columns: 1.35fr 1fr; align-items: stretch; }
.dash-row-2 { grid-template-columns: 1fr 1fr; }
.dash-row-wide { grid-template-columns: 1.6fr 1fr; align-items: start; }
.dash-row > .card { margin-bottom: 0; }
/* Grid items default to min-width:auto and refuse to shrink below their
   content, which would push a scrolling child out of the page instead. */
.dash-row > * { min-width: 0; }
.dash-stack { display: flex; flex-direction: column; gap: var(--gap); }
.dash-stack > .card { margin-bottom: 0; }

/* ---- the safe hero: the one banknote on the page ---- */
.safe-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--chrome);
  border: 1px solid var(--chrome);
  border-radius: var(--r-hero);
  padding: 24px 26px;
  color: #fff;
  box-shadow: var(--shadow-lift);
}
.safe-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bronze);
  opacity: var(--guilloche-hero);
  -webkit-mask: url("guilloche.svg") right center / cover no-repeat;
  mask: url("guilloche.svg") right center / cover no-repeat;
  z-index: -1;
  pointer-events: none;
}
.safe-hero h3 { margin: 0; font-size: .95rem; font-weight: 600; color: var(--on-chrome); }
.safe-figure {
  margin: 10px 0 6px;
  font-size: clamp(2.4rem, 5.2vw, 3.6rem);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.05;
  animation: figure-rise .55s cubic-bezier(.2, .7, .3, 1) both;
}
.safe-hero.is-neg .safe-figure { color: var(--loss); }
.safe-formula { margin: 0; font-size: .78rem; color: var(--on-chrome-dim); }

.safe-today {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 18px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: .84rem;
  color: var(--on-chrome-dim);
}
.safe-today strong { color: #fff; font-weight: 600; }

/* ---- loss or profit ---- */
.profit-card h3 { margin: 0 0 8px; }
.profit-figure {
  margin: 0 0 4px;
  font-size: clamp(1.7rem, 3vw, 2.15rem);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.1;
}
.profit-figure.is-credit { color: var(--credit); }
.profit-figure.is-loss { color: var(--loss); }
.profit-formula { margin: 0; font-size: .76rem; color: var(--muted); line-height: 1.45; }
.profit-split { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.profit-label { display: block; font-size: .8rem; font-weight: 600; color: var(--muted); }
.profit-usd { margin: 4px 0 4px; font-size: 1.35rem; font-weight: 600; letter-spacing: -.02em; }
.profit-usd.is-loss { color: var(--loss); }

/* ---- the two account cards ---- */
.acct-card { border-top: 3px solid var(--line); }
.acct-debit { border-top-color: var(--blue); }
.acct-tt { border-top-color: var(--violet); }
.acct-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.acct-tile { background: var(--surface-2); border-radius: var(--r-input); padding: 13px 14px; }
.acct-tile span { display: block; font-size: .78rem; color: var(--muted); margin-bottom: 5px; }
.acct-tile strong { font-size: 1.3rem; font-weight: 600; letter-spacing: -.02em; }
.acct-tile strong.is-loss { color: var(--loss); }

/* ---- the bar chart ---- */
.chart-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.chart-head h3 { margin: 0; }
.chart-legend {
  list-style: none;
  display: flex;
  gap: 14px;
  margin: 0;
  padding: 0;
  font-size: .78rem;
  color: var(--muted);
}
.chart-legend li { display: flex; align-items: center; gap: 6px; }
.swatch { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.swatch-in { background: var(--credit); }
.swatch-out { background: var(--blue); }

.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart-grid line { stroke: var(--line); stroke-width: 1; }
/* Font sizes are in viewBox units: the SVG scales, so these must be set
   large enough to survive being shrunk into a narrow card. */
.chart-tick { fill: var(--muted); font-size: 12px; }
.chart-day { fill: var(--muted); font-size: 12px; }
.chart-day.is-today { fill: var(--ink); font-weight: 700; }
.chart .bar { transform-box: fill-box; transform-origin: bottom; animation: bar-grow .5s ease-out both; }
.chart .bar-in { fill: var(--credit); }
.chart .bar-out { fill: var(--blue); }
.chart-empty { margin: 0; padding: 26px 0; text-align: center; }

@keyframes figure-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@keyframes bar-grow {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

/* ---- busiest stations ---- */
.top-stations {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: none;
}
.top-stations li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.top-stations li:last-child { border-bottom: 0; }
.ts-rank {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: var(--r-pill);
  background: var(--bronze-soft);
  color: var(--bronze);
  font-size: .76rem;
  font-weight: 600;
}
.ts-name {
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  font-size: .92rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ts-name:hover { color: var(--accent-text); text-decoration: underline; }
.ts-figures { text-align: right; white-space: nowrap; }
.ts-figures strong { display: block; font-weight: 600; font-size: .92rem; }
.ts-figures small { display: block; font-size: .76rem; color: var(--muted); margin-top: 2px; }

/* ---- rates, read-only ---- */
.rate-read { margin: 0 0 8px; display: grid; gap: 8px; }
.rate-read div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.rate-read dt { color: var(--muted); font-size: .85rem; }
.rate-read dd { margin: 0; font-weight: 600; }

/* ---- recent entries ---- */
.recent-all { font-size: .85rem; color: var(--accent-text); text-decoration: none; font-weight: 600; }
.recent-all:hover { text-decoration: underline; }
.recent-list { list-style: none; margin: 0; padding: 0; }
.recent-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.recent-row:last-child { border-bottom: 0; }
.recent-row .type { justify-self: start; white-space: nowrap; }
.recent-who { min-width: 0; }
.recent-who strong {
  display: block;
  font-weight: 600;
  font-size: .92rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.recent-who small { display: block; font-size: .76rem; color: var(--muted); margin-top: 2px; }
.recent-amt { text-align: right; white-space: nowrap; }
.recent-amt strong { display: block; font-weight: 600; font-size: .95rem; }
.recent-amt small { display: block; font-size: .76rem; color: var(--muted); margin-top: 2px; }
.recent-row.is-void .recent-who strong,
.recent-row.is-void .recent-amt strong,
.recent-row.is-void .recent-amt small { text-decoration: line-through; color: var(--muted); }
.rate-form {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 12px;
  align-items: end;
}

table.mini { width: 100%; border-collapse: collapse; font-size: .88rem; }
table.mini th, table.mini td {
  padding: 8px 4px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}
table.mini th { color: var(--muted); font-weight: 600; font-size: .78rem; }
table.mini tr:last-child td { border-bottom: 0; }
table.mini .r { text-align: right; }

/* ---------------------------------------------------------- records */
.books { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.books a {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 8px 14px;
  border-radius: var(--r-pill);
  text-decoration: none;
  color: var(--ink);
  font-size: .88rem;
}
.books a:hover { border-color: var(--bronze); }
.books a span {
  background: var(--surface-2);
  border-radius: var(--r-pill);
  padding: 1px 8px;
  margin-left: 5px;
  font-size: .78rem;
  color: var(--muted);
}
.books a.active { background: var(--chrome); color: #fff; border-color: var(--chrome); }
.books a.active span { background: rgba(255, 255, 255, .16); color: #fff; }

.filters {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr auto;
  gap: 12px;
  align-items: end;
}
.filter-actions { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; }

/* The header can only stick if this wrapper is itself the scroller: with no
   height limit it grows to fit the table and nothing ever sticks. */
.table-wrap {
  padding: 4px 14px;
  overflow: auto;
  max-height: calc(100vh - 150px);
  overscroll-behavior: contain;
}
.table-wrap table { border-collapse: collapse; width: 100%; }
.table-wrap th {
  color: var(--muted);
  font-weight: 600;
  font-size: .78rem;
  text-align: left;
  padding: 11px 8px;
  border-bottom: 1px solid var(--bronze);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface);
}
.table-wrap td {
  font-size: .86rem;
  white-space: nowrap;
  padding: 10px 8px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.table-wrap tr:last-child td { border-bottom: 0; }
.table-wrap tbody tr:hover td { background: var(--surface-2); }
.table-wrap th.r, .table-wrap td.r { text-align: right; }
.table-wrap td.note { white-space: normal; min-width: 160px; max-width: 260px; }

tr.voided td { color: var(--muted); text-decoration: line-through; }
tr.voided td:first-child, tr.voided td.actions { text-decoration: none; }
.badge-void {
  background: var(--loss);
  color: #fff;
  font-size: .68rem;
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
}
.negv { color: var(--loss); }

.type { font-size: .76rem; font-weight: 600; padding: 2px 9px; border-radius: var(--r-pill); }
.type-hawala { background: var(--credit-soft); color: var(--credit); }
.type-gbp_debit { background: var(--blue-soft); color: var(--blue); }
.type-tt { background: var(--violet-soft); color: var(--violet); }

.role { font-size: .72rem; padding: 2px 9px; border-radius: var(--r-pill); font-weight: 600; }
.role-admin { background: var(--bronze-soft); color: var(--bronze); }
.role-staff { background: var(--credit-soft); color: var(--credit); }

.actions { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; }
.void-box summary { cursor: pointer; color: var(--loss); font-weight: 600; font-size: .85rem; }
.void-box form { display: flex; gap: 6px; margin-top: 7px; }
.void-box input { height: 36px; width: 190px; font-size: .85rem; }

.pager { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.pager a {
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-input);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  font-size: .88rem;
}
.pager a:hover { border-color: var(--bronze); }
.pager a.active { background: var(--chrome); color: #fff; border-color: var(--chrome); }

/* --------------------------------------------------------- stations */
/* The "other countries" picker sits on the same row as the country tabs. */
.station-books { align-items: center; }
.other-countries { display: flex; gap: 6px; align-items: center; margin: 0; }
.other-countries select {
  height: 36px;
  max-width: 220px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: .88rem;
  padding: 0 30px 0 14px;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-size: 6px 6px, 6px 6px;
  background-position: right 14px center, right 8px center;
  background-repeat: no-repeat;
}
.other-countries select:hover { border-color: var(--bronze); }
.other-countries .btn-light { padding: 7px 12px; border-radius: var(--r-pill); }

/* Visible to screen readers only. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

.station-form { border-top: 3px solid var(--bronze); padding: 0; }
.station-form > summary {
  padding: 16px 20px;
  font-weight: 600;
  font-size: 1.02rem;
  cursor: pointer;
  list-style: none;
  border-radius: var(--r-card);
}
.station-form > summary::-webkit-details-marker { display: none; }
.station-form > summary:hover { color: var(--accent-text); }
.station-form[open] > summary { border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.station-form > form { padding: 0 20px 20px; }
.station-form-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.station-filters { grid-template-columns: 2fr auto; }

.station-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--gap);
  margin-bottom: var(--gap);
}
.station-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 18px;
  box-shadow: var(--shadow);
}
/* A country-coloured left edge, so a long list reads by colour before text. */
.station-card { border-left: 4px solid var(--line); }
.station-c-afghanistan { border-left-color: var(--country-af); }
.station-c-pakistan { border-left-color: var(--country-pk); }
.station-c-uae { border-left-color: var(--country-ae); }

.station-card.is-inactive { background: var(--surface-2); border-style: dashed; }
.station-card.is-inactive .station-id h3 { color: var(--muted); }
/* An inactive station keeps its country colour, at half strength. */
.station-card.is-inactive { border-left-style: solid; opacity: .78; }

.station-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.station-id h3 { margin: 0; font-size: 1.05rem; font-weight: 600; }
.station-id p { margin: 2px 0 0; }

.pill { font-size: .72rem; font-weight: 600; padding: 3px 10px; border-radius: var(--r-pill); white-space: nowrap; }
.pill-on { background: var(--credit-soft); color: var(--credit); }
.pill-off { background: var(--loss-soft); color: var(--loss); }

.station-flag { margin-right: 7px; font-size: 1.05em; }
.station-contact-name { margin: 0; }

/* Phone, WhatsApp, email and website on one wrapping row. */
.station-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
}
.station-links li { min-width: 0; }
.station-links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--ink);
  text-decoration: none;
  font-size: .8rem;
}
.station-links a:hover { border-color: var(--bronze); color: var(--accent-text); }
.station-links .ico { width: 14px; height: 14px; flex: 0 0 14px; color: var(--muted); }
.station-links a:hover .ico { color: var(--accent-text); }
.station-links span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Notes can be long, so they stay folded until asked for. */
.station-notes > summary {
  cursor: pointer;
  font-size: .8rem;
  color: var(--muted);
  list-style: none;
}
.station-notes > summary::-webkit-details-marker { display: none; }
.station-notes > summary::before { content: "▸ "; }
.station-notes[open] > summary::before { content: "▾ "; }
.station-notes > summary:hover { color: var(--accent-text); }
.station-notes p {
  margin: 7px 0 0;
  font-size: .84rem;
  line-height: 1.55;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.station-stats {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 10px 0;
}
.station-stats ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  font-size: .84rem;
  color: var(--muted);
}
.station-stats strong { color: var(--ink); font-weight: 600; }
.station-payouts { margin: 8px 0 0; font-size: .8rem; color: var(--muted); }

.station-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: auto; }
.station-actions form { margin: 0; }

/* the station hint under the entry form's dropdown */
.station-hint { margin: 8px 0 0; font-size: .82rem; color: var(--muted); }

/* removable filter chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bronze-soft);
  color: var(--bronze);
  border: 1px solid var(--bronze);
  border-radius: var(--r-pill);
  padding: 5px 8px 5px 12px;
  font-size: .84rem;
}
.chip strong { font-weight: 600; }
.chip a {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: var(--r-pill);
  background: var(--bronze);
  color: var(--surface);
  text-decoration: none;
  font-size: .9rem;
  line-height: 1;
}
.chip a:hover { background: var(--ink); }

/* ---------------------------------------------------------- analytics */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  margin-bottom: var(--gap);
}
.kpi {
  display: grid;
  gap: 3px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
}
.kpi-label { font-size: .76rem; color: var(--muted); }
.kpi-value { font-size: 1.45rem; font-weight: 700; letter-spacing: -.02em; }
.kpi-change { font-size: .74rem; font-weight: 600; display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; }
.kpi-change small { font-weight: 400; color: var(--muted); }
.kpi-change.is-up { color: var(--credit); }
.kpi-change.is-down { color: var(--loss); }
.kpi-change.is-flat { color: var(--muted); font-weight: 400; }

/* Horizontal bar charts are SVG, so widths are attributes, not styles. */
.hbar-svg { width: 100%; height: auto; }
.hbar-bg { fill: var(--surface-2); }
.hbar-fill { fill: var(--bronze-2); }
.hbar-name { font-size: 12px; fill: var(--ink); }
.hbar-name a { fill: var(--accent-text); text-decoration: underline; }
.hbar-value { font-size: 12px; fill: var(--muted); font-variant-numeric: tabular-nums; }

.inline-bar { width: 100px; height: 10px; display: block; }
.inline-bar-cell { width: 110px; }
.inline-bar-table td, .inline-bar-table th { vertical-align: middle; }

/* the daily orders area */
.area-fill { fill: var(--credit); opacity: .16; }
.area-line { fill: none; stroke: var(--credit); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.area-dot { fill: var(--credit); }

.swatch-new { background: var(--bronze-2); }
.swatch-ret { background: var(--blue); }
.chart .bar-new { fill: var(--bronze-2); }
.chart .bar-ret { fill: var(--blue); }

/* weekday x hour heatmap */
/* Fixed layout so all 24 hour cells are the same width; auto layout would
   size them by content and make the grid uneven. */
.heatmap { border-collapse: separate; border-spacing: 2px; width: 100%; table-layout: fixed; }
.heatmap tbody th { width: 44px; }
.heatmap th { font-size: .68rem; font-weight: 600; color: var(--muted); padding: 0 2px; text-align: center; }
.heatmap tbody th { text-align: right; padding-right: 6px; white-space: nowrap; }
.heatmap td { height: 17px; border-radius: 3px; background: var(--surface-2); }
/* These must out-specify `.heatmap td` above, which also sets a background. */
.heatmap td.heat-1 { background: color-mix(in srgb, var(--credit) 25%, var(--surface-2)); }
.heatmap td.heat-2 { background: color-mix(in srgb, var(--credit) 45%, var(--surface-2)); }
.heatmap td.heat-3 { background: color-mix(in srgb, var(--credit) 68%, var(--surface-2)); }
.heatmap td.heat-4 { background: var(--credit); }
.heat-key { margin: 8px 0 0; }

.chart-data { margin-top: 12px; }
.chart-data > summary { cursor: pointer; font-size: .8rem; color: var(--muted); }
.chart-data > summary:hover { color: var(--accent-text); }
.chart-data table { margin-top: 8px; }

/* ------------------------------------------------------------- ledger */
.ledger-filters { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; }
.ledger-table td, .ledger-table th { font-variant-numeric: tabular-nums; }
.ledger-table .mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .82rem; }
.ledger-total td { border-top: 2px solid var(--bronze); border-bottom: 0; }
.tab-bad {
  background: var(--loss) !important;
  color: #fff !important;
}
.journal-entry { padding: 14px 16px; }
.journal-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.journal-date { font-weight: 600; font-size: .88rem; }
.journal-order { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .84rem; }
.journal-type { background: var(--surface-2); color: var(--muted); }
.journal-entry.is-bad { border-color: var(--loss); }
.journal-lines { margin-top: 4px; }
.journal-void { margin: 0; }
.check-ok { color: var(--credit); font-weight: 600; }
.check-bad { color: var(--loss); font-weight: 600; }

/* ------------------------------------------------------------ counter */
.entry-otc { border-top-color: var(--bronze); }

.otc-dir { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: var(--gap); }
.otc-dir-opt { position: relative; cursor: pointer; }
.otc-dir-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.otc-dir-opt span {
  display: grid;
  gap: 2px;
  padding: 14px 16px;
  border: 2px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
  transition: border-color .15s ease, background-color .15s ease;
}
.otc-dir-opt strong { font-size: 1.05rem; font-weight: 700; }
.otc-dir-opt small { font-size: .76rem; color: var(--muted); }
.otc-dir-opt:hover span { border-color: var(--muted); }
.otc-buy:has(input:checked) span { border-color: var(--credit); background: var(--credit-soft); }
.otc-buy:has(input:checked) strong { color: var(--credit); }
.otc-sell:has(input:checked) span { border-color: var(--blue); background: var(--blue-soft); }
.otc-sell:has(input:checked) strong { color: var(--blue); }
.otc-dir-opt:has(input:focus-visible) span { outline: 2px solid var(--bronze-2); outline-offset: 2px; }

#otcIdNote.is-required { color: var(--loss); font-weight: 600; }

.counter-tiles { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.counter-card { border-top: 3px solid var(--bronze); }

.till-card .till-table { margin-top: 4px; }
.till-table td, .till-table th { font-variant-numeric: tabular-nums; }
.till-gbp td { border-bottom: 2px solid var(--line); }
.till-warning {
  margin: 10px 0 0;
  padding: 9px 12px;
  border-radius: var(--r-input);
  background: var(--loss-soft);
  border: 1px solid var(--loss);
  color: var(--loss);
  font-size: .82rem;
  font-weight: 600;
}

.type-otc { background: var(--bronze-soft); color: var(--accent-text); }

/* branches */
.branch-code { background: var(--surface-2); color: var(--muted); font-family: ui-monospace, Menlo, Consolas, monospace; }
.branch-switch { margin: 0 10px 8px; }
.branch-switch select {
  width: 100%;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--r-input);
  background: var(--chrome-2);
  color: var(--on-chrome);
  font: inherit;
  font-size: .84rem;
  padding: 0 10px;
}
.branch-switch select:hover { border-color: rgba(255, 255, 255, .3); }
.branch-fixed {
  margin: 0 12px 8px;
  padding: 6px 10px;
  border-radius: var(--r-input);
  background: var(--chrome-2);
  color: var(--on-chrome-dim);
  font-size: .76rem;
}
.safe-counter { margin-top: 3px; }
.safe-counter strong { color: #fff; font-weight: 600; }

.rate-table { margin-top: 12px; }
.rate-input { width: 100%; max-width: 120px; height: 32px; text-align: right; font-size: .85rem;
  border: 1px solid var(--line); border-radius: var(--r-input); padding: 0 8px; background: var(--surface); color: var(--ink); }

/* ------------------------------------------------------- world clocks */
.clocks {
  display: flex;
  gap: 8px;
  margin-bottom: var(--gap);
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.clocks::-webkit-scrollbar { display: none; }
.clock {
  flex: 1 1 0;
  min-width: 132px;
  display: grid;
  gap: 1px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-input);
  background: var(--surface);
  white-space: nowrap;
}
.clock.is-uk { border-color: var(--bronze); background: var(--bronze-soft); }
.clock-label { font-size: .72rem; font-weight: 600; color: var(--muted); }
.clock.is-uk .clock-label { color: var(--accent-text); }
.clock-offset { font-style: normal; font-weight: 600; color: var(--muted); }
.clock-city { font-size: .68rem; color: var(--muted); }
.clock-time {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.clock.is-uk .clock-time { color: var(--accent-text); }
.clock-date { font-size: .7rem; color: var(--muted); }
.clock-roll { font-style: normal; font-weight: 600; color: var(--violet); }

/* version pill and the credit line in the rail */
.ver-pill {
  font-style: normal;
  font-size: .62rem;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: var(--r-pill);
  background: var(--bronze);
  color: #fff;
  vertical-align: middle;
  margin-left: 4px;
}
:root[data-theme="dark"] .ver-pill { color: #10171d; }
.rail-credit { margin: 10px 2px 0; font-size: .68rem; line-height: 1.4; }
.rail-credit a { color: var(--on-chrome-dim); text-decoration: none; }
.rail-credit a:hover { color: var(--on-chrome); text-decoration: underline; }

/* --------------------------------------------------------- reminders */
/* Priority is carried by a left edge, so a list scans by colour. */
.reminder-list { list-style: none; margin: 0 0 var(--gap); padding: 0; display: grid; gap: 10px; }
.reminder {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--muted);
  border-radius: var(--r-card);
  padding: 14px 16px;
  box-shadow: var(--shadow);
}
.reminder.pri-high { border-left-color: var(--loss); }
.reminder.pri-normal { border-left-color: var(--blue); }
.reminder.pri-low { border-left-color: var(--muted); }
.reminder.is-overdue { background: var(--loss-soft); border-color: var(--loss); }
.reminder.is-done { opacity: .7; }
.reminder.is-done .reminder-title { text-decoration: line-through; }

.reminder-main { min-width: 0; flex: 1 1 320px; }
.reminder-title { margin: 0; font-weight: 600; font-size: .95rem; }
.reminder-meta { margin: 4px 0 0; font-size: .8rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.reminder-due { font-weight: 600; color: var(--ink); }
.reminder-flag { color: var(--loss); font-weight: 600; }
.reminder-details { margin: 8px 0 0; font-size: .84rem; color: var(--muted); line-height: 1.55; }
.reminder-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.reminder-actions form { margin: 0; }

.pri-pill { font-size: .7rem; }
.pri-pill.pri-high { background: var(--loss-soft); color: var(--loss); }
.pri-pill.pri-normal { background: var(--blue-soft); color: var(--blue); }
.pri-pill.pri-low { background: var(--surface-2); color: var(--muted); }

.reminder-filters, .note-filters { grid-template-columns: repeat(2, minmax(0, 1fr)) auto; }

/* nav badge */
.nav-badge {
  flex: 0 0 auto;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: var(--r-pill);
  background: var(--loss);
  color: #fff;
  font-size: .7rem;
  font-weight: 600;
  font-style: normal;
  display: grid;
  place-items: center;
}

/* dashboard card */
.due-card { border-top: 3px solid var(--loss); }
.due-list { list-style: none; margin: 0; padding: 0; }
.due-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 0 10px 10px;
  border-bottom: 1px solid var(--line);
  border-left: 3px solid transparent;
}
.due-row:last-child { border-bottom: 0; }
.due-row.pri-high { border-left-color: var(--loss); }
.due-row.pri-normal { border-left-color: var(--blue); }
.due-row.pri-low { border-left-color: var(--muted); }
.due-main { min-width: 0; }
.due-main strong { display: block; font-size: .9rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.due-main small { display: block; font-size: .76rem; color: var(--muted); margin-top: 2px; }
.due-row form { margin: 0; }

/* ------------------------------------------------------------- notes */
.note-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--gap); margin-bottom: var(--gap); }
.note-card {
  display: flex;
  flex-direction: column;
  gap: 9px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 16px;
  box-shadow: var(--shadow);
}
.note-card.is-pinned { border-color: var(--bronze); }
.note-card.is-private { border-style: dashed; }
.note-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.note-top h3 { margin: 0; font-size: 1rem; font-weight: 600; }
.note-tags { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.note-cat { background: var(--surface-2); color: var(--muted); }
.note-station { background: var(--bronze-soft); color: var(--accent-text); text-decoration: none; }
.pill-pin { background: var(--bronze-soft); color: var(--accent-text); }
.pill-private { background: var(--violet-soft); color: var(--violet); }
.note-excerpt { margin: 0; font-size: .86rem; line-height: 1.55; color: var(--muted); overflow-wrap: anywhere; }
.note-byline { margin: 0; }
.note-card .station-actions { margin-top: auto; }
.note-open { border-top: 3px solid var(--bronze); }
.note-meta { margin: 0 0 10px; }
.note-body { margin: 0; font-size: .92rem; line-height: 1.65; overflow-wrap: anywhere; }

/* ---------------------------------------------------------- calendar */
.cal-nav { display: flex; gap: 6px; flex-wrap: wrap; }
.cal-card { padding: 16px; }
.cal-weekdays, .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal-weekdays { margin-bottom: 6px; font-size: .74rem; font-weight: 600; color: var(--muted); text-align: center; }
.cal-cell {
  min-height: 92px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-input);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  transition: border-color .15s ease, background-color .15s ease;
}
.cal-cell:hover { border-color: var(--bronze); background: var(--surface-2); }
.cal-cell.is-empty { background: var(--surface-2); border-style: dashed; opacity: .45; pointer-events: none; }
.cal-cell.is-today { border-color: var(--bronze); box-shadow: inset 0 0 0 1px var(--bronze); }
.cal-cell.is-selected { background: var(--bronze-soft); border-color: var(--bronze); }
.cal-date { font-size: .82rem; font-weight: 600; }
.cal-cell.is-today .cal-date { color: var(--accent-text); }
.cal-dots { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; }
.cal-dot { width: 7px; height: 7px; border-radius: var(--r-pill); display: block; background: var(--muted); }
.cal-dot.pri-high { background: var(--loss); }
.cal-dot.pri-normal { background: var(--blue); }
.cal-dot.pri-low { background: var(--muted); }
.cal-more { font-size: .66rem; color: var(--muted); font-style: normal; }
.cal-activity { margin-top: auto; font-size: .68rem; color: var(--muted); line-height: 1.3; }
.cal-day { margin-top: var(--gap); }
.cal-sub { margin: 16px 0 8px; font-size: .9rem; font-weight: 600; }
.cal-sub:first-of-type { margin-top: 0; }
.cal-add { margin: 12px 0 0; }
.cal-day-reminders { margin-bottom: 0; }

/* station card additions */
.station-jots { margin: 0; font-size: .8rem; }
.station-jots a { color: var(--accent-text); text-decoration: none; font-weight: 600; }
.station-jots a:hover { text-decoration: underline; }
.overdue-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 7px;
  border-radius: var(--r-pill);
  background: var(--loss);
  vertical-align: middle;
}

/* ------------------------------------------------------- palette picker */
/* The swatches must show each palette's own colours, not the active one, so
   these few literals are deliberate rather than tokens. */
.palette-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin: 14px 0 16px;
}
.palette-option {
  position: relative;
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.palette-option:hover { border-color: var(--bronze); }
.palette-option input { position: absolute; opacity: 0; width: 0; height: 0; }
.palette-option:has(input:checked) {
  border-color: var(--bronze);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--bronze) 30%, transparent);
}
.palette-option:has(input:focus-visible) { outline: 2px solid var(--bronze-2); outline-offset: 2px; }

.palette-chip {
  display: flex;
  height: 46px;
  border-radius: var(--r-input);
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, .12);
}
.palette-rail { width: 32%; }
.palette-body { flex: 1 1 auto; display: grid; place-items: center; }
.palette-accent { width: 26px; height: 8px; border-radius: var(--r-pill); }

.palette-slate .palette-rail { background: #1f2a37; }
.palette-slate .palette-body { background: #f4f6f8; }
.palette-slate .palette-accent { background: #3f82ab; }

.palette-navy .palette-rail { background: #13233f; }
.palette-navy .palette-body { background: #f3f5f9; }
.palette-navy .palette-accent { background: #c29b52; }

.palette-green .palette-rail { background: #0e3a30; }
.palette-green .palette-body { background: #eceee6; }
.palette-green .palette-accent { background: #c38a38; }

.palette-name { font-weight: 600; font-size: .92rem; }
.palette-desc { font-size: .78rem; color: var(--muted); }

/* ----------------------------------------------------- permissions */
.perms-card { border-top: 3px solid var(--bronze); }
.perms-note { margin: 14px 0 10px; }

.perms-grid {
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
}
.perms-head, .perms-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(4, 62px);
  align-items: center;
  gap: 4px;
  padding: 9px 14px;
}
.perms-head {
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  font-size: .76rem;
  font-weight: 600;
  color: var(--muted);
}
.perms-head span + span, .perms-row > *:not(.perms-label) { text-align: center; justify-self: center; }
.perms-row + .perms-row { border-top: 1px solid var(--line); }
.perms-row:hover { background: var(--surface-2); }
.perms-label { font-size: .88rem; font-weight: 600; }
.perms-na { color: var(--line); font-size: .9rem; }

.perms-cell { display: grid; place-items: center; }
.perms-cell input { accent-color: var(--bronze); width: 17px; height: 17px; cursor: pointer; }
.perms-cell input:disabled { cursor: not-allowed; opacity: .35; }
.perms-cell label { display: block; cursor: pointer; }

.preset-pill { display: inline-block; }
.preset-admin { background: var(--bronze-soft); color: var(--bronze); }
.preset-manager { background: var(--blue-soft); color: var(--blue); }
.preset-staff { background: var(--credit-soft); color: var(--credit); }
.preset-viewer { background: var(--surface-2); color: var(--muted); }
.preset-custom { background: var(--violet-soft); color: var(--violet); }

.reset-box summary { color: var(--ink); }
.reset-box form { margin-top: 7px; }

.forbidden-card p { margin: 0 0 10px; }
.forbidden-card p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------- receipt */
/* Named pages: the sheet's own class picks the paper size. */
@page a4 { size: A4 portrait; margin: 12mm; }
@page a5 { size: A5 portrait; margin: 8mm; }
/* CSS has no "80mm by auto": the grammar takes one or two lengths, and mixing
   a length with `auto` makes the whole declaration invalid, which silently
   drops the page back to the printer default. A tall second value is the
   working equivalent for a roll: the printer feeds and cuts at the content. */
@page thermal { size: 80mm 297mm; margin: 3mm; }

.rc-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: var(--gap);
}
.rc-formats, .rc-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.rc-formats .btn-light.is-on, .rc-actions .btn-light.is-on {
  background: var(--bronze-soft);
  border-color: var(--bronze);
  color: var(--accent-text);
  font-weight: 600;
}
/* The plain-text copy lives off-screen: it is only there for Copy details. */
.rc-plain { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.rc-sheet { display: grid; gap: var(--gap); justify-items: center; }
.rc {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 190mm;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 22px 24px;
  box-shadow: var(--shadow);
}
.rc-a5 .rc { max-width: 140mm; }
.rc-thermal .rc { max-width: 80mm; padding: 14px 12px; font-size: .82rem; }

.rc-head { display: flex; align-items: flex-start; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.rc-logo { width: 46px; height: 46px; flex: 0 0 46px; border-radius: 10px; }
.rc-thermal .rc-logo { width: 34px; height: 34px; flex: 0 0 34px; }
.rc-co { display: grid; gap: 1px; min-width: 0; }
.rc-co strong { font-size: 1.02rem; font-weight: 700; }
.rc-co span { font-size: .76rem; color: var(--muted); overflow-wrap: anywhere; }
.rc-copy-tag {
  margin-left: auto;
  font-size: .68rem;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--muted);
  white-space: nowrap;
}

.rc-title { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin: 14px 0 12px; }
.rc-title h1 { margin: 0; font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; }
.rc-thermal .rc-title h1 { font-size: 1.15rem; }
.rc-ref { margin: 0; display: grid; gap: 2px; }
.rc-ref div { display: flex; gap: 8px; justify-content: flex-end; font-size: .78rem; }
.rc-ref dt { color: var(--muted); }
.rc-ref dd { margin: 0; font-weight: 600; }

.rc-table { width: 100%; border-collapse: collapse; margin-bottom: 10px; }
.rc-table th, .rc-table td { padding: 6px 0; border-bottom: 1px solid var(--line-2); font-size: .82rem; vertical-align: top; text-align: left; }
.rc-table th { color: var(--muted); font-weight: 500; width: 45%; }
.rc-table td { font-weight: 600; overflow-wrap: anywhere; }
.rc-table td.r { text-align: right; }
.rc-table tr:last-child th, .rc-table tr:last-child td { border-bottom: 0; }
.rc-figures { border-top: 1px solid var(--line); padding-top: 4px; }

.rc-headline {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin: 12px 0;
  padding: 12px 14px;
  border-radius: var(--r-input);
  background: var(--surface-2);
}
.rc-headline span { font-size: .8rem; color: var(--muted); }
.rc-headline strong { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; }
.rc-thermal .rc-headline strong { font-size: 1.15rem; }

.rc-notes th { width: 28%; }
.rc-signs { display: flex; gap: 22px; margin: 26px 0 12px; }
.rc-sign { flex: 1 1 0; display: grid; gap: 5px; }
.rc-line { display: block; height: 30px; border-bottom: 1px solid var(--ink); }
.rc-sign small { font-size: .72rem; color: var(--muted); }
.rc-foot { border-top: 1px solid var(--line); padding-top: 9px; }
.rc-foot p { margin: 0; font-size: .7rem; color: var(--muted); }
.rc-footer-text { margin-top: 4px !important; }

/* The void stamp is drawn, not an image. */
.rc.is-void { border-color: var(--loss); }
.rc-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-28deg);
  font-size: clamp(3rem, 22vw, 7rem);
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--loss);
  opacity: .16;
  pointer-events: none;
  white-space: nowrap;
  z-index: 2;
}
.rc-void-note { margin: 0 0 12px; font-size: .8rem; font-weight: 600; color: var(--loss); }
.rc-cut { display: none; }

/* ------------------------------------------------------------ login */
.login-page {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 24px 16px;
  background: var(--chrome);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
/* The same security print, run faint across the whole sign-in page. */
.login-page::before {
  content: "";
  position: absolute;
  inset: -5%;
  background: var(--bronze);
  opacity: .16;
  -webkit-mask: url("guilloche.svg") center / cover no-repeat;
  mask: url("guilloche.svg") center / cover no-repeat;
  z-index: -1;
  pointer-events: none;
}

.login-card {
  background: var(--surface);
  border-radius: var(--r-hero);
  padding: 30px 28px;
  width: min(94vw, 390px);
  display: grid;
  gap: 14px;
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .7);
}
.login-card h1 { margin: 0; font-size: 1.4rem; font-weight: 600; letter-spacing: -.02em; }
.login-card p { margin: 0; }
.login-card .save { margin-top: 4px; }
.login-logo {
  width: 56px;
  height: 56px;
  border-radius: var(--r-pill);
  padding: 3px;
  background: var(--surface-2);
  box-shadow: 0 0 0 2px var(--bronze);
  object-fit: cover;
  display: block;
}

/* ============================================================== small
   Under 900px the rail unrolls into a sticky top bar whose nav scrolls
   sideways. Everything below it goes to a single column.
   ============================================================ */
@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }

  .rail {
    position: sticky;
    top: 0;
    height: auto;
    z-index: 20;
    border-right: 0;
    border-bottom: 1px solid rgba(0, 0, 0, .35);
  }
  .rail-head { padding: 10px 14px; }
  .rail-head::before { inset: -20px -40px; }
  .rail-name small { display: none; }
  .rail-logo { width: 32px; height: 32px; flex: 0 0 32px; }

  /* The account block moves up beside the logo; the nav gets the full row. */
  .rail-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    padding: 0;
    border-top: 0;
    background: transparent;
    position: absolute;
    right: 12px;
    top: 10px;
  }
  .rail-user { padding: 3px; }
  .rail-user > span:last-child { display: none; }
  .rail-actions { margin-top: 0; }
  .rail-actions .chrome-btn { padding: 8px; width: 36px; }
  .btn-label { display: none; }
  .install-app { margin: 0; }

  .rail-nav {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 10px 8px;
    scrollbar-width: none;
  }
  .rail-nav::-webkit-scrollbar { display: none; }
  .nav-group { display: flex; gap: 4px; align-items: center; }
  .nav-group + .nav-group {
    margin-top: 0;
    margin-left: 4px;
    padding-left: 8px;
    border-left: 1px solid rgba(255, 255, 255, .14);
  }
  .nav-group-title { display: none; }
  .nav-item { white-space: nowrap; margin-bottom: 0; padding: 8px 11px; }
  .nav-item.active::before { top: auto; bottom: 0; left: 8px; right: 8px; width: auto; height: 3px; border-radius: 3px 3px 0 0; }

  .content { padding: 18px 16px 32px; }
  .dash-row-hero, .dash-row-2, .dash-row-wide,
  .field-grid, .filters, .rate-form, .station-filters { grid-template-columns: 1fr; }
  .station-grid { grid-template-columns: 1fr; }
  .page-heading h2 { font-size: 1.35rem; }
  .safe-hero { padding: 20px; }
}

@media (max-width: 560px) {
  .grid4 { grid-template-columns: 1fr; }
  .content { padding: 16px 12px 28px; }
  .card { padding: 16px; }
  .acct-tiles { grid-template-columns: 1fr; }
  .kpi-grid { grid-template-columns: 1fr 1fr; }
  .heatmap { font-size: .6rem; }
  .ledger-filters { grid-template-columns: 1fr; }
  .otc-dir { grid-template-columns: 1fr; }
  .counter-tiles { grid-template-columns: 1fr 1fr; }
  /* The strip scrolls sideways rather than squeezing four clocks in. */
  .clock { flex: 0 0 auto; min-width: 124px; }
  /* A 7-column month is unreadable on a phone, so it becomes a day list. */
  .cal-weekdays { display: none; }
  .cal-grid { grid-template-columns: 1fr; gap: 4px; }
  .cal-cell { min-height: 0; flex-direction: row; align-items: center; gap: 10px; flex-wrap: wrap; }
  .cal-cell.is-empty { display: none; }
  .cal-date { min-width: 2ch; }
  .cal-activity { margin-top: 0; margin-left: auto; font-size: .74rem; }
  .reminder-filters, .note-filters { grid-template-columns: 1fr; }
  .perms-head, .perms-row { grid-template-columns: minmax(0, 1fr) repeat(4, 44px); padding: 9px 10px; }
  .perms-label { font-size: .82rem; }
  /* Below this the chart would shrink past legibility, so let it scroll. */
  .chart-wrap { overflow-x: auto; }
  .chart { min-width: 520px; }
  .void-box form { flex-direction: column; }
  .void-box input { width: 100%; }
  .inline { display: flex; }
  .inline input { width: 100%; }
}

/* Down to 380px: nothing may overflow the viewport. */
@media (max-width: 400px) {
  body { font-size: 14px; }
  .rail-name strong { font-size: 1rem; }
  .hero-box { padding: 18px; }
  .hero-box strong { font-size: 1.5rem; }
  .page-heading { align-items: flex-start; }
  .recent-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
  .recent-row .type { grid-column: 1 / -1; }
  .safe-today { gap: 6px 16px; }
  .login-card { padding: 24px 20px; }
  .rc-actions .btn-light, .rc-actions .save { flex: 1 1 auto; text-align: center; }
  .rc-toolbar { flex-direction: column; align-items: stretch; }
}

/* --------------------------------------------------------- restraint */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  /* Every piece of app chrome goes; only the sheet is printed. */
  /* .rc-plain sits at left:-9999px for the Copy button; left in place it
     would stretch the printed page box and add a blank sheet. */
  .rail, .no-print, .notice, .clocks, .rc-toolbar, .page-heading,
  .rc-plain { display: none !important; }
  .shell { display: block; }
  .content { padding: 0; max-width: none; }
  .card { border: 0; box-shadow: none; }
  body { background: #fff; color: #000; }

  .rc-a4 { page: a4; }
  .rc-a5 { page: a5; }
  .rc-thermal { page: thermal; }

  .rc-sheet { display: block; }
  .rc {
    max-width: none;
    width: auto;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    background: #fff;
    color: #000;
    break-inside: avoid;
  }
  .rc-table th, .rc-table td, .rc-co span, .rc-foot p, .rc-sign small { color: #000; }
  .rc-headline { background: none; border: 1px solid #000; }
  .rc-line { border-bottom-color: #000; }
  .rc-watermark { color: #000; opacity: .12; }

  /* Two copies on one A4 sheet, with a line to cut along. Each half gets
     roughly 130mm, so the pair is set tighter than a single receipt. */
  .rc-two .rc { padding: 0 0 2mm; font-size: 7.6pt; line-height: 1.22; }
  .rc-two .rc-cut { display: block; border-top: 1px dashed #666; margin: 0 0 3mm; }
  .rc-two .rc-head { padding-bottom: 6px; }
  .rc-two .rc-logo { width: 32px; height: 32px; flex: 0 0 32px; }
  .rc-two .rc-co strong { font-size: 10pt; }
  .rc-two .rc-co span { font-size: 7pt; }
  .rc-two .rc-title { margin: 7px 0 6px; }
  .rc-two .rc-title h1 { font-size: 13pt; }
  .rc-two .rc-ref div { font-size: 7.5pt; }
  .rc-two .rc-table th, .rc-two .rc-table td { padding: 2px 0; font-size: 8pt; }
  .rc-two .rc-headline { margin: 6px 0; padding: 5px 8px; }
  .rc-two .rc-headline strong { font-size: 12pt; }
  .rc-two .rc-signs { margin: 7px 0 4px; gap: 14px; }
  .rc-two .rc-line { height: 12px; }
  .rc-two .rc-sign small, .rc-two .rc-foot p { font-size: 6pt; }
  .rc-two .rc-foot { padding-top: 3px; }
  .rc-two .rc-head { padding-bottom: 4px; }
  .rc-two .rc-title { margin: 5px 0 4px; }
  .rc-two .rc-title h1 { font-size: 11pt; }
  .rc-two .rc-headline { margin: 4px 0; padding: 4px 7px; }
  .rc-two .rc-headline strong { font-size: 10.5pt; }
  .rc-two .rc-table { margin-bottom: 5px; }

  /* A5 is only 132 x 194mm of printable area, so the body is set smaller to
     keep a full hawala receipt on a single sheet. */
  .rc-a5 .rc { font-size: 9pt; line-height: 1.35; }
  .rc-a5 .rc-logo { width: 34px; height: 34px; flex: 0 0 34px; }
  .rc-a5 .rc-co strong { font-size: 10.5pt; }
  .rc-a5 .rc-co span { font-size: 7.5pt; }
  .rc-a5 .rc-title { margin: 8px 0 7px; }
  .rc-a5 .rc-title h1 { font-size: 15pt; }
  .rc-a5 .rc-ref div { font-size: 8pt; }
  .rc-a5 .rc-table th, .rc-a5 .rc-table td { padding: 3px 0; font-size: 8.5pt; }
  .rc-a5 .rc-headline { margin: 8px 0; padding: 7px 10px; }
  .rc-a5 .rc-headline strong { font-size: 14pt; }
  .rc-a5 .rc-signs { margin: 14px 0 7px; }
  .rc-a5 .rc-line { height: 20px; }
  .rc-a5 .rc-sign small, .rc-a5 .rc-foot p { font-size: 7pt; }

  /* 80mm paper: 72mm of content, no fills, black on white only. */
  .rc-thermal .rc {
    width: 72mm;
    font-size: 10pt;
    line-height: 1.35;
  }
  .rc-thermal .rc-headline { padding: 6px 0; border: 0; border-top: 1px solid #000; border-bottom: 1px solid #000; }
  .rc-thermal .rc-copy-tag { background: none; border: 1px solid #000; }
  .rc-thermal .rc-signs { gap: 10px; margin: 16px 0 8px; }
  .rc-thermal .rc-title h1 { font-size: 13pt; }
  .rc-thermal .rc-headline strong { font-size: 13pt; }
}

/* ---- pay-outs and the partner portal -------------------------------------
   Two audiences in one file. The staff half is a handful of additions to
   pages that already exist; the .pp- half is a separate shell, built for a
   phone held at a counter, and shares nothing with the staff layout but this
   file's variables. */

/* ---- status badge, on the records list and the order ---- */
.payout-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: var(--r-pill);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
  border: 1px solid transparent;
}
.payout-pending { background: var(--bronze-soft); color: var(--accent-text); border-color: var(--bronze); }
.payout-on-hold { background: var(--loss-soft); color: var(--loss); border-color: var(--loss); }
.payout-paid    { background: var(--credit-soft); color: var(--credit); border-color: var(--credit); }
.payout-legacy  { background: var(--surface-2); color: var(--muted); border-color: var(--line); }

/* ---- the office's pay-out panel on an order ---- */
.payout-panel { margin-bottom: var(--gap); }
.payout-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px 18px; margin: 12px 0 8px; }
.payout-facts div { display: grid; gap: 2px; }
.payout-facts dt { font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.payout-facts dd { margin: 0; }
.payout-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.5rem;
  letter-spacing: .22em;
}
.payout-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; margin-top: 12px; }
.payout-box { border: 1px solid var(--line); border-radius: var(--r-input); }
.payout-box > summary { padding: 9px 14px; cursor: pointer; font-size: .88rem; font-weight: 600; }
.payout-box form { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 14px 12px; }
.payout-box input[type="text"], .payout-box input:not([type]), .payout-box input[type="password"] { flex: 1 1 220px; }
.payout-wa { margin: 12px 0 0; }

/* ---- the dashboard card ---- */
.payout-currencies { display: flex; flex-wrap: wrap; gap: 8px 18px; list-style: none; margin: 10px 0 0; padding: 0; }
.payout-currencies li { font-size: .92rem; color: var(--muted); }
.payout-currencies strong { color: var(--ink); font-size: 1.05rem; }
.payout-hold-head { display: flex; align-items: center; gap: 8px; margin: 14px 0 6px; font-size: .76rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.payout-hold-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.payout-hold-list li {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border-radius: var(--r-input);
  background: var(--loss-soft);
  border-left: 3px solid var(--loss);
}
.payout-hold-list a { font-weight: 700; }
.payout-hold-list span { font-size: .84rem; color: var(--muted); }
.payout-hold-list small { font-size: .78rem; color: var(--loss); }

/* ---- partner logins, on the Stations page ---- */
.partner-admin > summary { padding: 4px 0; cursor: pointer; font-weight: 700; }
.partner-count {
  display: inline-block;
  min-width: 22px;
  padding: 1px 8px;
  margin-left: 6px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--muted);
  font-size: .76rem;
  font-weight: 700;
}
.partner-form { margin-top: 12px; }
.partner-stations { border: 1px solid var(--line); border-radius: var(--r-input); padding: 10px 12px; }
.partner-stations legend { padding: 0 6px; font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.partner-stations .check { display: inline-flex; margin: 4px 14px 4px 0; }
.partner-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.partner-row { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface-2); }
.partner-row.is-inactive { opacity: .62; }
.partner-id { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.partner-id strong { font-size: 1.02rem; }
.pill-warn { background: var(--bronze-soft); color: var(--accent-text); }
.partner-stations-read { margin: 4px 0 10px; }
.partner-edit { margin-top: 12px; display: grid; gap: 10px; }

/* ---- the code on a printed receipt ---- */
.rc-code strong { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .2em; }
.rc-code-warn { margin: -6px 0 12px; font-size: .78rem; color: var(--muted); text-align: center; }

/* ==== the partner portal ================================================= */
/* One column, thumb-sized targets, nothing that needs a second tap to read. */
.pp-body { background: var(--paper); color: var(--ink); }
.pp-shell { max-width: 620px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; padding-bottom: 92px; }

.pp-head {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--chrome);
  color: var(--on-chrome);
  padding: 12px 16px;
}
.pp-head-id { display: flex; align-items: center; gap: 10px; }
.pp-logo { width: 30px; height: 30px; flex: 0 0 30px; }
.pp-head-name { display: grid; }
.pp-head-name strong { font-size: 1rem; }
.pp-head-name small { font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--on-chrome-dim); }
.pp-stations { margin: 8px 0 0; font-size: .84rem; color: var(--on-chrome-dim); }

.pp-main { flex: 1 1 auto; padding: 14px 14px 0; display: grid; gap: 14px; align-content: start; }
.pp-h1 { margin: 0; font-size: 1.32rem; }
.pp-count { margin: -8px 0 0; color: var(--muted); font-size: .88rem; }

.pp-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  padding: 16px;
}
.pp-card h1 { margin: 0 0 6px; font-size: 1.28rem; }
.pp-card h2 { margin: 0 0 10px; font-size: 1.02rem; }
.pp-card .field { margin-bottom: 12px; }
.pp-empty { text-align: center; color: var(--muted); }
.pp-signin { margin-top: 24px; }
.pp-back { margin: 0; }
.pp-back a { font-weight: 600; }

/* Buttons are 52px tall because the person tapping one is standing up. */
.pp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  width: 100%;
  padding: 12px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-input);
  background: var(--surface-2);
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.pp-btn-go { background: var(--bronze); border-color: var(--bronze); color: #fff; }
.pp-btn-go:hover { background: var(--bronze-2); border-color: var(--bronze-2); }
.pp-btn-warn { background: var(--loss-soft); border-color: var(--loss); color: var(--loss); }
.pp-btn-quiet { background: none; border-color: var(--line); color: var(--muted); }
:root[data-theme="dark"] .pp-btn-go { color: #1b1206; }
.pp-signout-alt { margin-top: 10px; }

.pp-orders { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pp-order {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--bronze);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
}
.pp-order.is-hold { border-left-color: var(--loss); }
.pp-order > a, .pp-orders-done .pp-order { display: grid; gap: 8px; padding: 14px 16px; color: inherit; text-decoration: none; }
.pp-order > a:hover { background: var(--surface-2); border-radius: var(--r-card); }
.pp-order-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.pp-order-no { font-size: .94rem; letter-spacing: .02em; }
.pp-order-date { font-size: .82rem; color: var(--muted); }
.pp-amount { font-size: 1.85rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.pp-cur { font-size: .82rem; font-weight: 700; color: var(--muted); letter-spacing: .06em; }
.pp-order-people { display: grid; gap: 2px; font-size: .94rem; }
.pp-order-people i { font-style: normal; display: inline-block; min-width: 40px; font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.pp-order-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.pp-order-note { font-size: .86rem; color: var(--muted); }
.pp-tag {
  padding: 2px 9px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: .74rem;
  font-weight: 600;
  color: var(--muted);
}
.pp-tag-hold { background: var(--loss-soft); border-color: var(--loss); color: var(--loss); }

.pp-detail { display: grid; gap: 6px; }
.pp-order-no-big { margin: 0; font-size: .92rem; font-weight: 700; color: var(--muted); letter-spacing: .04em; }
.pp-amount-big { font-size: 2.4rem; }
.pp-facts { display: grid; gap: 8px; margin: 10px 0 0; }
.pp-facts div { display: flex; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--line-2); padding-bottom: 7px; }
.pp-facts div:last-child { border-bottom: 0; padding-bottom: 0; }
.pp-facts dt { font-size: .82rem; color: var(--muted); }
.pp-facts dd { margin: 0; text-align: right; }
.pp-hold { border-left: 4px solid var(--loss); }

/* The code is typed once, from someone reading it aloud. Big and spaced out. */
.pp-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.7rem;
  letter-spacing: .3em;
  text-align: center;
  min-height: 58px;
}
.pp-problem > summary { cursor: pointer; font-weight: 600; }
.pp-problem form { margin-top: 12px; }

.pp-filter { display: grid; gap: 10px; }
.pp-filter-actions { display: flex; gap: 10px; }
.pp-totals ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 20px; }
.pp-totals strong { font-size: 1.3rem; }

.pp-tabs {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  display: flex;
  max-width: 620px;
  margin: 0 auto;
  background: var(--chrome);
  border-top: 1px solid var(--chrome-2);
}
.pp-tabs a, .pp-tabs button {
  flex: 1 1 0;
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 4px;
  border: 0;
  background: none;
  color: var(--on-chrome-dim);
  font: inherit;
  font-size: .86rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.pp-tabs form { flex: 1 1 0; display: flex; }
.pp-tabs a.active { color: #fff; box-shadow: inset 0 -3px 0 var(--bronze); }
.pp-tabs a:hover, .pp-tabs button:hover { background: var(--chrome-hover); color: #fff; }
.pp-foot { margin: 18px 14px 0; font-size: .8rem; color: var(--muted); text-align: center; }

@media (max-width: 560px) {
  .pp-amount { font-size: 1.6rem; }
  .pp-amount-big { font-size: 2.1rem; }
  .pp-main { padding: 12px 10px 0; }
}

@media print {
  /* The code prints with the receipt; the sentence under it is the reason
     the code is on the sheet at all, so it prints too. */
  .rc-code-warn { color: #000; font-size: 7.5pt; }
  .rc-code strong { letter-spacing: .18em; }
}

/* === Compact density ===
   Sizes and spacing only. No colour, no font-family, no border or shadow
   colour, nothing structural: every rule below changes how much room a thing
   takes, never what it is or how it reads. Appended last so it wins on
   specificity ties without any !important.

   :focus-visible rings and the prefers-reduced-motion block are deliberately
   not touched -- they are accessibility behaviour, not density. The pay-out
   partner portal (.pp-*) is also left alone: it is a phone held at a counter
   and its targets are sized for a thumb, which is the opposite requirement. */

/* ---- clock strip: one slim row, each clock on a single line ---- */
.clocks { gap: 8px; margin-bottom: 12px; }
.clock {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 5px 10px;
}
.clock-label { font-size: .72rem; }
.clock-city { font-size: .72rem; }
.clock-time { font-size: 1rem; font-weight: 700; line-height: 1.2; }
.clock-date { font-size: .72rem; }

/* ---- page heading ---- */
.page-heading { margin-bottom: 12px; }
.page-heading h2 { font-size: 1.35rem; margin: 2px 0 0; }
.page-sub { font-size: .8rem; margin-top: 3px; }
.eyebrow { font-size: .76rem; }
.page-heading .btn-light,
.page-heading .save,
.page-heading .save.small,
.cal-nav .btn-light,
.cal-nav .save { padding: 6px 12px; font-size: .85rem; }

/* ---- pound in safe hero ---- */
.safe-hero { padding: 16px 20px; min-height: auto; border-radius: 16px; }
.safe-hero h3 { font-size: .85rem; }
.safe-figure { font-size: clamp(1.7rem, 2.8vw, 2.3rem); margin: 4px 0 8px; line-height: 1.1; }
.safe-formula { font-size: .72rem; }
.safe-today { gap: 6px 18px; margin-top: 10px; padding-top: 10px; font-size: .78rem; }

/* ---- generic card ---- */
.card { padding: 14px 16px; margin-bottom: 12px; border-radius: 12px; }
.card h3 { font-size: .95rem; margin-bottom: 8px; }

/* ---- loss or profit ---- */
.profit-card { padding: 14px 18px; }
.profit-figure { font-size: 1.6rem; }
.profit-usd { font-size: 1.15rem; margin: 3px 0; }
.profit-formula { font-size: .7rem; line-height: 1.4; }
.profit-split { margin-top: 8px; padding-top: 8px; }
.profit-label { font-size: .76rem; }

/* ---- account cards and every tile cut from the same cloth ---- */
.acct-card { padding: 12px 14px; }
.acct-tiles { gap: 10px; }
.acct-tile { padding: 8px 10px; }
.acct-tile span { font-size: .72rem; margin-bottom: 3px; }
.acct-tile strong { font-size: 1.05rem; }

/* ---- stat and KPI tiles on the other pages, to the same scale ---- */
.kpi-grid { gap: 12px; margin-bottom: 12px; }
.kpi { padding: 8px 10px; gap: 2px; }
.kpi-label { font-size: .72rem; }
.kpi-value { font-size: 1.05rem; }
.kpi-change { font-size: .72rem; }
.station-stats { padding: 7px 0; }
.payout-facts { gap: 8px 14px; margin: 8px 0 6px; }
.payout-facts dt { font-size: .72rem; }

/* ---- dashboard grids ---- */
.dash-row { gap: 12px; margin-bottom: 12px; }

/* ---- chart ---- */
.chart { max-height: 170px; }
.chart-head { margin-bottom: 8px; }
.chart-legend { font-size: .72rem; }
.chart-empty { padding: 16px 0; }

/* ---- rates form ---- */
.rate-form { gap: 10px; }
.rate-form .field input { height: 38px; font-size: .95rem; }
.rate-form .save { padding: 8px 14px; }

/* ---- tables ---- */
.table-wrap th,
.table-wrap td { padding: 7px 8px; }
.table-wrap td { font-size: .84rem; }
table.mini th,
table.mini td { padding: 6px 8px; }
table.mini { font-size: .84rem; }

/* ---- forms, everywhere ---- */
.field > span { margin-bottom: 4px; font-size: .8rem; }
.field input,
.field select,
.inline input,
.void-box input { height: 40px; }
.field-grid { gap: 12px 14px; }
.filters { padding: 12px 14px; }

/* ---- mobile: compact, but never cramped ----
   The floor for body-ish text is .7rem and the hero figure never goes below
   1.6rem. The clocks stop sharing the row and scroll instead, so four of them
   on a narrow screen stay legible rather than squeezing to nothing. */
@media (max-width: 900px) {
  .safe-figure { font-size: clamp(1.6rem, 6vw, 2.1rem); }
  .clock { flex: 0 0 auto; }
  .clock-label,
  .clock-city,
  .clock-date { font-size: .7rem; }
  .safe-formula,
  .profit-formula,
  .chart-legend,
  .kpi-label,
  .kpi-change,
  .acct-tile span,
  .payout-facts dt { font-size: .72rem; }
  .table-wrap td { font-size: .82rem; }
}

/* === Reports and Customers ===
   Layout only, reusing the existing card, table, chip and kpi pieces. The one
   new colour is the totals row's tint, taken from the same variable the rest
   of the table furniture uses. */

/* A table's heading line: title on the left, its own CSV button on the right. */
.rep-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.rep-head h3 { margin: 0; }

.rep-block { margin-bottom: 14px; }

/* The window the figures cover. On paper this is the only thing that says
   which dates the sheet is about, so it is not chrome and does not print
   away with the filters. */
.rep-window {
  font-weight: 600;
  margin: 0 0 10px;
}

/* The totals row under the daily table. */
.rep-total td {
  font-weight: 700;
  border-top: 2px solid var(--line, #d6dbd3);
  background: var(--tint, rgba(14, 58, 48, .04));
}

/* The selected quick range. */
.chip.active {
  border-color: var(--accent, #0e3a30);
  font-weight: 700;
}

/* === Print: the reports sheet ===
   The receipt print block above hides .page-heading along with the rest of
   the app chrome, which is right for a receipt and wrong for a report: a
   printed report with no title and no dates is not a document. So the report
   page restates both, and only the controls are dropped. */
@media print {
  .rep-block {
    break-inside: avoid;
    page-break-inside: avoid;
    border: 0;
    box-shadow: none;
    padding: 0;
    margin-bottom: 10mm;
  }
  .rep-head { border-bottom: 1px solid #000; }
  .rep-head h3 { font-size: 11pt; }
  .rep-window {
    display: block;
    font-size: 10pt;
    color: #000;
  }
  /* Tables print in full: no inner scrollbox, and a header row that repeats
     when a table runs over a page. */
  .rep-block .table-wrap {
    overflow: visible;
    max-height: none;
  }
  .rep-block table { width: 100%; font-size: 8.5pt; }
  .rep-block thead { display: table-header-group; }
  .rep-block tfoot { display: table-footer-group; }
  .rep-block th,
  .rep-block td {
    border-bottom: 1px solid #999;
    color: #000;
  }
  .rep-total td { background: none; border-top: 2px solid #000; }
  /* The tiles print as a plain row of figures rather than cards. */
  .kpi-grid { display: flex; flex-wrap: wrap; gap: 6mm; }
  .kpi { border: 0; box-shadow: none; padding: 0; }
}

/* === Inter record ===
   Layout only, on the existing card/table/chip pieces. The one colour that is
   not already a token is the amber edge, reused from the reminder flag so
   "someone needs to act" looks the same wherever it appears. */

.inter-balance-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.inter-balance-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.inter-balance-words { font-weight: 700; }
.inter-pending-part { font-size: .82rem; color: var(--muted); }

/* A decision card: bigger than a table row because it is a decision. */
.inter-card { border-left: 3px solid var(--line); }
.inter-card.is-stale { border-left-color: var(--amber, #b8860b); }
.inter-card-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px; }
.inter-card-head h3 { margin: 2px 0 0; font-size: 1.6rem; }
.inter-age { margin: 0; font-size: .82rem; color: var(--muted); }
.inter-purpose { margin: 8px 0 0; }
.inter-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; margin-top: 12px; }
.inter-actions .save { padding: 10px 22px; font-size: 1rem; }

.inter-status { font-size: .78rem; font-weight: 600; white-space: nowrap; }
.inter-pending { color: var(--amber, #b8860b); }
.inter-approved { color: var(--credit, #1c7c4a); }
.inter-declined,
.inter-cancelled { color: var(--muted); }
.inter-void { color: var(--muted); text-decoration: line-through; }

.inter-dash.is-stale { border-left: 3px solid var(--amber, #b8860b); }
.inter-dash-counts { margin: 4px 0 8px; }
.inter-dash-counts a { text-decoration: none; color: inherit; }
.inter-dash-counts a:hover { text-decoration: underline; }

/* The line under the safe figure that says what is NOT in it. */
.safe-inter { opacity: .9; }

@media print {
  .inter-actions { display: none; }
  .inter-card { border-left: 0; }
}

/* ---- inter record: loans --------------------------------------------- */
/* The two balance panels sit side by side and are never one figure. */
.inter-balance-split { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; align-items: start; }
@media (max-width: 860px) { .inter-balance-split { grid-template-columns: 1fr; } }
.inter-loan-balances { border-left: 3px solid var(--violet, #6a4c9c); }
.inter-loan-lines { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }

/* A field the Type select has switched off. .field is display:block, which
   would otherwise win over the hidden attribute's own display:none. */
.field[hidden], [data-kind-only][hidden] { display: none; }

.pill-kind-payment { background: var(--bronze-soft); color: var(--accent-text); }
.pill-kind-loan { background: var(--violet-soft); color: var(--violet); }
.pill-kind-repayment { background: var(--credit-soft); color: var(--credit); }
.pill-kind-settlement { background: var(--line-2); color: var(--muted); }

.pill-loan-open { background: var(--bronze-soft); color: var(--accent-text); }
.pill-loan-part-repaid { background: var(--violet-soft); color: var(--violet); }
.pill-loan-repaid { background: var(--credit-soft); color: var(--credit); }

/* Overdue: a row somebody has to act on, in the same amber the rest of the
   app uses for "waiting too long". */
tr.is-overdue > td { background: rgba(184, 134, 11, .08); }
tr.is-overdue > td:first-child { box-shadow: inset 3px 0 0 var(--amber, #b8860b); }
li.is-overdue .inter-balance-words { color: var(--amber, #b8860b); }

.inter-loans + .inter-loans { margin-top: 12px; }
.inter-loan-detail > td { padding-top: 0; border-top: 0; }
.inter-loan-detail summary { cursor: pointer; font-size: .82rem; color: var(--muted); }
.inter-repayments { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }
.inter-repayments li { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; font-size: .86rem; }

.inter-filter { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
.inter-filter .filter-actions { display: flex; gap: 8px; }

/* =====================================================================
   MOBILE (task MOB)
   Everything below is phone and tablet only. The desktop layout is the
   one above it and is untouched at 1100px and over: the widest rule here
   stops at 900px, and the two-column card rules stop at 900/700px.

   Three things drove this block, measured rather than guessed:
   the nav rail was 2278 tap targets under 44px, the four world clocks
   and the nav groups were the only things pushing the page wider than
   the viewport, and every form control was under 16px, which is what
   makes iOS zoom the page on focus.
   ===================================================================== */

/* ---- the floor for text ---------------------------------------------
   A phone shrinking body text to 14px took every .8rem label under 12px.
   The base stays 16px on a phone and the small classes get an explicit
   floor, so nothing is ever set smaller than 12px. */
@media (max-width: 900px) {
  body { font-size: 16px; }
  .field > span,
  .muted.small, .small, small, .kpi-label, .kpi-change,
  .clock-label, .clock-city, .clock-date, .clock-offset,
  .nav-group-title, .rail-user small, .rail-credit,
  .table-wrap th, dt, .pill, .badge-void, .type,
  .payout-badge, .inter-status, .ver-pill, .profit-formula,
  .safe-formula, .chart-legend, .nav-badge { font-size: 12px; }
  .table-wrap td small, .note small, td small { font-size: 12px; }
  .heatmap { font-size: 12px; }
}

/* ---- form controls: 16px stops iOS zooming on focus ------------------ */
@media (max-width: 900px) {
  input, select, textarea, .rate-input, #branchPick {
    font-size: 16px;
    min-height: 44px;
  }
  textarea { min-height: 88px; }
  input[type="checkbox"], input[type="radio"] { min-height: 0; }
  /* The picker button stays beside the text field, not under it. */
  .date-wrap { display: flex; gap: 6px; align-items: stretch; }
  .date-wrap .uk-date { flex: 1 1 auto; min-width: 0; }
  .date-pick { flex: 0 0 48px; width: 48px !important; min-height: 44px; }
}

/* ---- tap targets ----------------------------------------------------
   44x44 is the floor. Inline links inside a sentence are left alone --
   padding them out would break the sentence -- so this names the things
   a finger actually aims at. */
@media (max-width: 900px) {
  .nav-item, .btn-light, .save, .danger, .chrome-btn, .install-app,
  .books a, .chips .chip a, .rc-formats a, .pp-tabs a, .pp-tabs button,
  button[type="submit"], summary, .owner-tabs a, .rail-user {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }
  .nav-item, .rail-user { justify-content: flex-start; }
  .btn-light, .save, .danger, button[type="submit"] { padding-inline: 16px; }
  summary { padding: 10px 2px; }
  /* Room between things, so a thumb cannot take two at once. */
  .inter-actions { display: flex; flex-direction: column; gap: 14px; }
  .actions, .rc-actions, .filter-actions { display: flex; flex-wrap: wrap; gap: 10px; }
}

/* An approve and a decline must never sit thumb-width apart. */
@media (max-width: 900px) {
  .inter-actions > form, .inter-actions > .void-box { width: 100%; }
  .inter-actions .save, .inter-actions .danger { width: 100%; }
  .inter-actions .void-box { margin-top: 6px; border-top: 1px solid var(--line); padding-top: 14px; }
  td.actions { display: flex; flex-wrap: wrap; gap: 12px; }
  td.actions form, td.actions .void-box { flex: 1 1 auto; }
}

/* ---- the world clocks ----------------------------------------------
   One row that scrolls sideways under the thumb rather than four boxes
   squeezed to nothing or pushing the page wide. The UK is first in the
   config and is marked so it can be found without reading. */
@media (max-width: 900px) {
  .clocks {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    /* full-bleed inside the padded content column, so the last clock can
       scroll past the edge instead of forcing the page wider */
    margin-inline: calc(var(--content-pad, 16px) * -1);
    padding-inline: var(--content-pad, 16px);
    max-width: 100vw;
  }
  .clock {
    flex: 0 0 auto;
    min-width: 0;
    width: auto;
    scroll-snap-align: start;
    padding: 8px 12px;
  }
  .clock.is-uk {
    border-color: var(--bronze);
    box-shadow: inset 3px 0 0 var(--bronze);
  }
  .clock.is-uk .clock-label { color: var(--accent-text); font-weight: 700; }
}

/* ---- navigation: a top bar and a slide-in menu ---------------------- */
.topbar { display: none; }
.nav-backdrop { display: none; }

@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }

  .topbar {
    display: flex;
    align-items: center;
    gap: 10px;
    position: sticky;
    top: 0;
    z-index: 40;
    padding: 8px 12px;
    background: var(--chrome);
    color: var(--on-chrome, #fff);
    border-bottom: 1px solid rgba(0, 0, 0, .35);
  }
  .topbar-burger {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: var(--r-input);
    color: inherit;
    cursor: pointer;
  }
  .topbar-burger .ico { width: 22px; height: 22px; }
  .topbar-name { font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar-spacer { margin-left: auto; }

  /* The rail becomes the menu: off canvas, full height, slid in. */
  .rail {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(86vw, 330px);
    max-width: 86vw;
    height: 100dvh;
    height: 100vh;
    z-index: 60;
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(-102%);
    transition: transform .22s ease;
    border-right: 1px solid rgba(0, 0, 0, .35);
    border-bottom: 0;
    display: flex;
    flex-direction: column;
  }
  body.nav-open .rail { transform: translateX(0); }

  .nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(0, 0, 0, .5);
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease;
  }
  body.nav-open .nav-backdrop { opacity: 1; pointer-events: auto; }
  body.nav-open { overflow: hidden; }

  .rail-close {
    min-width: 44px;
    min-height: 44px;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: var(--r-input);
    color: inherit;
    cursor: pointer;
  }

  /* Inside the menu the nav is a list again, not a scrolling strip. */
  .rail-nav {
    display: block;
    overflow: visible;
    padding: 8px 10px 14px;
  }
  .nav-group { display: block; }
  .nav-group + .nav-group {
    margin-top: 10px;
    margin-left: 0;
    padding-left: 0;
    padding-top: 10px;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, .14);
  }
  .nav-group-title { display: block; margin: 0 0 4px; padding: 0 8px; }
  .nav-item {
    width: 100%;
    white-space: normal;
    margin-bottom: 2px;
    padding: 10px 12px;
  }
  .nav-item.active::before { top: 8px; bottom: 8px; left: 0; right: auto; width: 3px; height: auto; border-radius: 0 3px 3px 0; }
  .nav-item[aria-current="page"] { background: var(--chrome-active); }

  /* The branch switcher and the account block come back into the menu. */
  .rail-foot {
    position: static;
    display: block;
    margin-left: 0;
    padding: 12px 10px;
    border-top: 1px solid rgba(255, 255, 255, .14);
    margin-top: auto;
  }
  .rail-user { padding: 8px; width: 100%; }
  .rail-user > span:last-child { display: block; }
  .rail-actions { margin-top: 10px; display: flex; gap: 8px; }
  .rail-actions .chrome-btn { width: auto; flex: 1 1 auto; padding: 10px 12px; }
  .btn-label { display: inline; }
  .branch-switch { padding: 10px; }
  .branch-switch select { width: 100%; }
  .rail-name small { display: block; }
}

/* ---- tables become cards -------------------------------------------
   One card per row. Each cell carries its column heading in data-label,
   written by the view, and ::before prints it -- so a cell still says
   what it is once the header row is gone. Numbers stay right-aligned
   and a void row keeps its strikethrough. */
@media (max-width: 900px) {
  .table-wrap { max-height: none; overflow: visible; padding: 0; }
  .table-wrap table.stacked,
  .table-wrap table.stacked thead,
  .table-wrap table.stacked tbody,
  .table-wrap table.stacked tr,
  .table-wrap table.stacked td { display: block; width: auto; }
  .table-wrap table.stacked thead { display: none; }
  .table-wrap table.stacked tr {
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    padding: 10px 12px;
    margin: 0 0 10px;
  }
  .table-wrap table.stacked td {
    border: 0;
    padding: 6px 0;
    display: flex;
    gap: 12px;
    align-items: baseline;
    justify-content: space-between;
    text-align: right;
    min-width: 0;
    word-break: break-word;
  }
  .table-wrap table.stacked td + td { border-top: 1px dashed var(--line-2); }
  .table-wrap table.stacked td::before {
    content: attr(data-label);
    flex: 0 0 42%;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
  }
  /* A cell with no label of its own (actions, spacers) takes the row. */
  .table-wrap table.stacked td:not([data-label])::before { content: ""; flex: 0; }
  .table-wrap table.stacked td.r { text-align: right; font-variant-numeric: tabular-nums; }
  .table-wrap table.stacked td.actions { justify-content: flex-start; }
  .table-wrap table.stacked tr.voided { opacity: .72; }
  .table-wrap table.stacked tr.voided td:not(.actions) { text-decoration: line-through; }
  .table-wrap table.stacked tr.is-overdue { box-shadow: inset 3px 0 0 var(--amber, #b8860b); }
  .table-wrap table.stacked td[colspan] { justify-content: center; }
  .table-wrap table.stacked td[colspan]::before { content: ""; flex: 0; }
}

/* ---- cards and tiles ------------------------------------------------ */
@media (max-width: 900px) {
  .kpi-grid, .counter-tiles, .acct-tiles, .grid4, .station-grid { grid-template-columns: 1fr 1fr; }
  .dash-row-hero, .dash-row-2, .dash-row-wide { grid-template-columns: 1fr; }
  .hero-box strong, .kpi-value, .safe-figure, .profit-figure { font-size: clamp(1.4rem, 7vw, 2rem); }
}
@media (max-width: 700px) {
  .kpi-grid, .counter-tiles, .acct-tiles, .grid4, .station-grid,
  .field-grid, .filters, .rate-form, .station-filters,
  .ledger-filters, .reminder-filters, .note-filters, .otc-dir { grid-template-columns: 1fr; }
  .field-grid .span2 { grid-column: auto; }
}

/* ---- charts --------------------------------------------------------- */
@media (max-width: 900px) {
  .chart-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .chart, .chart svg, svg.chart { max-width: 100%; height: auto; }
  .chart { min-width: 0; width: 100%; }
  .chart-legend { flex-wrap: wrap; gap: 8px 14px; }
}

/* ---- filters fold away ---------------------------------------------- */
@media (max-width: 900px) {
  .filter-fold { padding: 0; }
  .filter-fold > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    font-weight: 600;
    cursor: pointer;
    min-height: 44px;
  }
  .filter-fold > summary::-webkit-details-marker { display: none; }
  .filter-fold > summary::after { content: "▾"; margin-left: auto; }
  .filter-fold[open] > summary::after { content: "▴"; }
  .filter-fold .filter-count {
    background: var(--bronze-soft);
    color: var(--accent-text);
    border-radius: var(--r-pill);
    padding: 2px 9px;
    font-size: 12px;
    font-weight: 700;
  }
  .filter-fold > form, .filter-fold > .filters { padding: 0 14px 14px; }
}
/* On a desktop the fold is not a fold: it is always open and has no summary. */
@media (min-width: 901px) {
  .filter-fold > summary { display: none; }
}

/* ---- a long form keeps its save button in reach --------------------- */
@media (max-width: 900px) {
  .form-sticky {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin: 12px -16px -16px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: var(--surface);
    border-top: 1px solid var(--line);
  }
  .form-sticky .save, .form-sticky button[type="submit"] { width: 100%; }
}

/* ---- content padding, used by the clock full-bleed above ------------ */
@media (max-width: 900px) { .content { --content-pad: 16px; padding: 16px; } }
@media (max-width: 560px) { .content { --content-pad: 12px; padding: 12px 12px 28px; } }

/* ---- nothing may push the page sideways ----------------------------- */
@media (max-width: 900px) {
  /* clip, not hidden: `overflow: hidden` on an ancestor turns it into a
     scroll container and silently kills `position: sticky` on everything
     inside it -- which is how the phone top bar is pinned. */
  html, body { max-width: 100%; overflow-x: clip; }
  .content img, .content svg, .content video, .content iframe { max-width: 100%; }
  pre, code { overflow-x: auto; }
}

/* ---- restraint ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .rail, .nav-backdrop { transition: none !important; }
}

/* =====================================================================
   PARTNER PAGES
   These are used on a phone more than anywhere else: somebody standing at
   a counter, one hand on the till. One action per screen, an amount big
   enough to read at arm's length, and a keypad for the pay-out code.
   ===================================================================== */
@media (max-width: 900px) {
  .pp-shell { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .pp-main { padding: 14px 14px 20px; }

  /* The figure the person is actually looking for. */
  .pp-amount, .pp-order-amount, .po-amount {
    font-size: clamp(2rem, 11vw, 3rem);
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    word-break: break-word;
  }

  /* One action per screen, and it is hard to miss. */
  .pp-main .save, .pp-main button[type="submit"], .pp-main .btn-light {
    width: 100%;
    min-height: 56px;
    font-size: 1.05rem;
    justify-content: center;
  }
  .pp-main form + form,
  .pp-main .save + .btn-light, .pp-main .btn-light + .save { margin-top: 12px; }

  /* The code is digits, so the phone should offer digits. */
  .pp-main input[inputmode="numeric"], .pp-code {
    font-size: 1.5rem;
    letter-spacing: .18em;
    text-align: center;
    min-height: 56px;
    font-variant-numeric: tabular-nums;
  }

  /* The tab bar sits at the bottom, where a thumb is. */
  .pp-tabs {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 30;
    display: flex;
    gap: 2px;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    background: var(--surface);
    border-top: 1px solid var(--line);
  }
  .pp-tabs a, .pp-tabs button {
    flex: 1 1 0;
    min-height: 48px;
    justify-content: center;
    text-align: center;
    font-size: 12px;
  }
  .pp-tabs form { flex: 1 1 0; margin: 0; }
  .pp-tabs form button { width: 100%; }
  .pp-foot { display: none; }
  .pp-head { position: sticky; top: 0; z-index: 20; }
}

/* =====================================================================
   RECEIPTS
   The paper sizes are paper sizes and do not change. On screen a sheet
   that is wider than the phone is scrolled, never reflowed -- a receipt
   that reflowed would not be the document that prints.
   ===================================================================== */
@media (max-width: 900px) {
  .rc-toolbar { flex-wrap: wrap; gap: 8px; }
  .rc-formats { display: flex; flex-wrap: wrap; gap: 8px; }
  .rc-sheet-wrap, .rc-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* A4 and A5 keep their millimetre widths and scroll sideways. */
  .rc-sheet.rc-a4, .rc-sheet.rc-a5 { transform-origin: top left; }
  /* Thermal is 72mm, which already fits a phone. It must not be stretched. */
  .rc-sheet.rc-thermal { width: 72mm; max-width: 72mm; margin-inline: auto; }
}
@media print {
  /* The menu furniture is screen-only and must never reach paper. */
  .topbar, .nav-backdrop, .rail-close, .pp-tabs { display: none !important; }
}

/* =====================================================================
   MOBILE, second pass
   The first pass was written from the audit; this one is written from
   what the audit still found afterwards. Each rule here answers a
   measurement, and the selector matches the one it has to beat -- a bare
   `dt` never wins against `.payout-facts dt`, which is why the first
   pass missed these.
   ===================================================================== */

/* ---- nothing is set below 12px on a phone --------------------------
   These are every selector in this stylesheet that asks for less than
   .75rem. They keep their size on a desktop and are floored here. */
@media (max-width: 900px) {
  .rail-user small, .rail-name small, .rail-credit, .rail-credit a,
  .badge-void, .role, .pill, .kpi-change, .kpi-label,
  .heatmap th, .heatmap td,
  .clock-label, .clock-city, .clock-date, .ver-pill,
  .cal-weekdays, .cal-more, .cal-activity,
  .rc-copy-tag, .rc-sign small,
  .payout-badge, .payout-facts dt, .payout-facts dd,
  .pp-head-name small, .pp-tag,
  .safe-formula, .acct-tile span, .chart-legend, .chart-legend li,
  .ro-facts dt, .ro-facts dd, .counter-tile span, .pbox span {
    font-size: 12px;
  }
}

/* ---- a checkbox is a tap target too --------------------------------
   13x13 and 17x17 boxes were the smallest things on the page. The
   permissions grid already reserves 44px columns, so they fit. */
@media (max-width: 900px) {
  input[type="checkbox"], input[type="radio"] {
    width: 24px;
    height: 24px;
    min-width: 44px;
    min-height: 44px;
    accent-color: var(--bronze);
  }
  .perms-cell { display: flex; align-items: center; justify-content: center; min-height: 44px; }
  label.check { display: flex; align-items: center; gap: 10px; min-height: 44px; }
}

/* ---- the narrow inline forms (reset password, void reason) ---------- */
@media (max-width: 900px) {
  .inline { display: flex; flex-wrap: wrap; gap: 10px; }
  .inline input, .void-box input, .reset-box input, td.actions input {
    font-size: 16px;
    min-height: 44px;
    min-width: 12ch;
    flex: 1 1 auto;
  }
  .inline button, .void-box button, .reset-box button { min-height: 44px; }
}

/* ---- links that are rows, cells or tiles, not prose ----------------- */
@media (max-width: 900px) {
  .table-wrap td a, .recent-all, .ts-name, .cal-cell,
  .rail-credit a, .inter-balance-list a, .stat-link, .client-badge a,
  .page-heading a, .chips a, .rc-actions a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .cal-cell { display: flex; }
  /* Inside a stacked cell the link fills the value side, so the whole
     right-hand half of the row is tappable. */
  .table-wrap table.stacked td > a:only-child { min-height: 44px; }
}

/* ---- a stacked cell must not be pushed wide by a long value --------- */
@media (max-width: 900px) {
  .table-wrap table.stacked td { flex-wrap: wrap; }
  .table-wrap table.stacked td > * { min-width: 0; max-width: 100%; }
  .table-wrap table.stacked td small,
  .table-wrap table.stacked td .muted { display: block; word-break: break-word; }
}

/* ---- the last tables that are not .stacked -------------------------- */
/* .mini tables live inside cards rather than a .table-wrap, so they get
   their own scroller instead of being reflowed. */
@media (max-width: 900px) {
  .card table.mini, table.mini { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
  .heatmap { display: block; overflow-x: auto; }
}

/* ---- the sign-in card ----------------------------------------------- */
@media (max-width: 900px) {
  .login-shell, .login-card { max-width: 100%; }
  .login-card { margin-inline: 12px; }
  .login-card input { font-size: 16px; min-height: 44px; }
  .login-card button { min-height: 48px; width: 100%; }
}

@media (max-width: 900px) {
  /* The sign-in card was 94vw plus its own margin, which put its right
     edge past the viewport on a 360px screen. */
  .login-card { width: min(100% - 24px, 390px); margin-inline: auto; }
  /* The padding sat on <body> itself, so a full-width child made the body's
     own scrollWidth 20px wider than the viewport. The gap belongs to the
     card. */
  .login-page { overflow-x: clip; padding: 0; }
  .login-card { margin: 16px auto; }

  /* Two counts on the dashboard's inter card are links, not prose. */
  .inter-dash-counts a { min-height: 44px; display: inline-flex; align-items: center; }

  /* The rate form styles its own inputs and beat the general rule. */
  .rate-form input, .rate-form select, .rate-input { font-size: 16px; min-height: 44px; }

  /* A short value in a stacked cell is still a 44px target. */
  .table-wrap table.stacked td a { min-width: 44px; justify-content: flex-end; }

  /* The receipt's "Printed by" line is the last thing under 12px. */
  .rc-foot p, .rc-foot, .rc-footer-text { font-size: 12px; }
}

/* ---- MOBILE, third pass: the last five, each from a measurement ----- */
@media (max-width: 900px) {
  /* body IS .login-page, so its padding was adding to a 100%-wide child
     and pushing the document 20px past the viewport. */
  .login-page { box-sizing: border-box; width: 100%; max-width: 100%; margin: 0; }
  .login-page * { box-sizing: border-box; }

  /* .rate-form .field input is two classes deep and beat the general rule. */
  .rate-form .field input, .rate-form .field select {
    height: 44px;
    min-height: 44px;
    font-size: 16px;
  }

  /* "Void" is 33px of text; the target around it is not. */
  .void-box > summary, .reset-box > summary, td .void-box > summary {
    min-width: 44px;
    padding-inline: 12px;
    justify-content: center;
  }

  /* A chip is the target; the link inside it fills the chip. */
  .chips .chip { display: inline-flex; min-height: 44px; align-items: center; }
  .chips .chip a { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding-inline: 10px; }

  /* A station's phone number and email are things people tap. */
  .station-links li { display: block; }
  .station-links li a { min-height: 44px; display: inline-flex; align-items: center; word-break: break-all; }
}

/* ---- MOBILE, last two ----------------------------------------------- */
@media (max-width: 900px) {
  /* The sign-in page's security print is inset -5%, so it reaches 20px past
     the viewport on a phone. `overflow: hidden` on its parent clips it, but
     the overflow region is still there and still measured. On a phone it
     covers the page exactly. */
  .login-page::before { inset: 0; }

  /* The sticky save passes over the fields as they scroll under it -- that is
     what "sticks to the bottom" means. It is opaque and on top, so a tap
     lands on the button and never on a half-covered field, and the form ends
     with enough room that the last field is never left underneath it. */
  .form-sticky { z-index: 20; box-shadow: 0 -8px 20px -14px rgba(0, 0, 0, .5); }
  form:has(.form-sticky) { padding-bottom: 8px; }
  .field-grid > .form-sticky { grid-column: 1 / -1; }
}

/* ---- desktop must not notice any of this ---------------------------- */
/* The menu's close button belongs to the slide-in panel and to nothing
   else. Without this it sat in the rail head on a desktop, where there is
   no menu to close. */
.rail-close { display: none; }
@media (max-width: 900px) { .rail-close { display: inline-flex; } }

/* The filters used to be ONE element carrying both .card and .filters, so
   .filters' padding won and the box was 24px tall inside. Wrapping it in a
   <details class="card"> made both paddings apply and the card grew 28px.
   The wrapper holds the border and background; the form keeps the padding,
   exactly as before. */
.filter-fold { padding: 0; }