/* ============================================================================
   DEPARTMENT OF MONETARY RESOURCE RESPONSIBILITY
   Aesthetic: parchment / oxblood / racing-green / gold / brushed silver
   Inspiration: Treasury bond certificates, Federal Reserve stationery,
                19th-c. railroad ledgers, classical bank vaults.
   ============================================================================ */

:root {
  /* Palette */
  --parchment:        #F2EAD3;
  --parchment-warm:   #E8DCC0;
  --parchment-deep:   #DBC9A2;
  --ink:              #1C1410;
  --ink-soft:         #3A2D24;
  --oxblood:          #5C1A1B;
  --oxblood-deep:     #4A1313;
  --green:            #1F3A2C;
  --green-soft:       #2E5240;
  --gold:             #B89D5B;
  --gold-bright:      #D4B870;
  --silver:           #A8ACAD;
  --silver-deep:      #7A7C7D;

  /* Typography */
  --font-display: "Cinzel", "Trajan Pro", "Times New Roman", serif;
  --font-body:    "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --font-figures: "JetBrains Mono", "IBM Plex Mono", "Courier New", monospace;

  /* Geometry */
  --rule-thick: 1.2px;
  --rule-thin: 0.4px;
  --content-max: 1180px;
  --gutter: clamp(1rem, 3vw, 2.5rem);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--parchment);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.55;
  font-feature-settings: "lnum" 1, "tnum" 0;
  min-height: 100%;
}

body {
  position: relative;
  overflow-x: hidden;
  /* index.html asks for viewport-fit=cover so the parchment reaches the edges
     of the phone; keep the text clear of the rounded corners and any cutout.
     Zero on every desktop and in portrait on a Pixel, so nothing shifts. */
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* ---------- Background atmosphere ---------- */

.paper-grain {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.18;
  mix-blend-mode: multiply;
  background-image:
    /* layered noise via SVG turbulence */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.10  0 0 0 0 0.06  0 0 0 0 0.04  0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/></svg>"),
    /* faint horizontal grain — paper fiber */
    repeating-linear-gradient(
      90deg,
      rgba(70, 50, 30, 0.04) 0px,
      rgba(70, 50, 30, 0.04) 1px,
      transparent 1px,
      transparent 3px
    );
}

.vault-vignette {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(184,157,91,0.10), transparent 60%),
    radial-gradient(ellipse at 50% 120%, rgba(28,20,16,0.18), transparent 55%);
}

/* ---------- Decorative gold rules ---------- */

.gold-rule {
  height: 0;
  border-top: var(--rule-thick) solid var(--gold);
  margin: 0;
  position: relative;
}
.gold-rule::after {
  content: "";
  display: block;
  position: absolute;
  inset-inline: 0;
  top: 3px;
  height: 0;
  border-top: var(--rule-thin) solid var(--ink);
}
.gold-rule.double { border-top-width: 2px; }
.gold-rule.double::after { top: 4px; border-top-width: 0.6px; }

/* ---------- Masthead / Letterhead ---------- */

.masthead {
  position: relative;
  z-index: 1;
  padding-top: 2rem;
}

.masthead-inner {
  max-width: var(--content-max);
  margin: 0 auto 1.25rem;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1.25rem;
  align-items: center;
}

.dept-eyebrow {
  font-family: var(--font-display);
  font-size: 0.65rem;
  letter-spacing: 0.32em;
  color: var(--silver-deep);
  text-align: center;
  margin-bottom: 0.6rem;
}

.dept-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.4rem, 3.2vw, 2.4rem);
  letter-spacing: 0.04em;
  line-height: 1.05;
  color: var(--ink);
  text-align: center;
  margin: 0 0 0.55rem;
}

.dept-tagline {
  font-family: var(--font-body);
  text-align: center;
  color: var(--oxblood);
  font-size: 0.95rem;
}
.dept-tagline span {
  color: var(--silver-deep);
  font-style: italic;
  font-size: 0.82rem;
}

.seal-left, .seal-right {
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 640px) {
  .masthead-inner { grid-template-columns: 1fr; }
  .seal-left, .seal-right { display: none; }
}

/* ---------- Department nav ---------- */

.dept-nav {
  max-width: var(--content-max);
  margin: 0.6rem auto 0.3rem;
  padding: 0 var(--gutter);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
}

.dept-nav a {
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-soft);
  padding: 0.55rem 1.1rem;
  position: relative;
  transition: color 180ms ease;
}

.dept-nav a + a::before {
  content: "·";
  position: absolute;
  left: -0.15rem;
  color: var(--gold);
}

.dept-nav a:hover { color: var(--oxblood); }
.dept-nav a.active {
  color: var(--oxblood);
  font-weight: 600;
}
.dept-nav a.active::after {
  content: "";
  position: absolute;
  left: 1.1rem; right: 1.1rem;
  bottom: 0.15rem;
  border-bottom: 1.5px solid var(--gold);
}

/* ---------- Main vault ---------- */

.vault-main {
  position: relative;
  z-index: 1;
  max-width: var(--content-max);
  margin: 2rem auto 4rem;
  padding: 0 var(--gutter);
  min-height: 60vh;
  animation: fade-up 600ms ease both;
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.loading-state {
  text-align: center;
  font-style: italic;
  color: var(--silver-deep);
  padding: 4rem 0;
}

.hall { animation: fade-up 500ms ease both; }

/* ---------- Section titles ---------- */

.section-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 2.4rem 0 1.2rem;
  text-align: center;
  display: flex;
  align-items: center;
  gap: 1.2rem;
}
.section-title::before,
.section-title::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--gold);
  position: relative;
}
.section-title::before { border-top-color: var(--gold); }
/* The flanking rules want the title on one line, and it stays on one line for
   as long as it fits. But a section title carries a department's name, and a
   department can be called "Department of Human Resources, Continuing
   Education and Professional Development Contingency Reserve Fund" — held to
   one line that pushed the whole page sideways, at every width. Let a title
   that cannot fit wrap; the rules simply flank two lines instead of one. */
.section-title span {
  white-space: normal;
}

.subsection-title {
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--green);
  margin: 1.8rem 0 0.8rem;
}

.page-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.page-toolbar .section-title {
  text-align: left;
  margin: 1.5rem 0;
  flex: 0 1 auto;
}
.page-toolbar .section-title::before { display: none; }
.page-toolbar .section-title::after { display: block; }

/* ---------- Cycle banner & treasury total ---------- */

.cycle-banner {
  padding: 1.4rem 1.6rem 1.1rem;
  background: var(--parchment-warm);
  border: 1px solid var(--gold);
  position: relative;
  margin-top: 1rem;
}
.cycle-banner-top {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 1.5rem;
}
.cycle-standing { min-width: 0; }
.cycle-banner::before {
  content: "";
  position: absolute; inset: 4px;
  border: 0.4px solid var(--ink);
  pointer-events: none;
}

.cycle-pill {
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  color: var(--silver-deep);
}
.cycle-pill .cycle-label {
  color: var(--green);
  font-weight: 600;
}

.treasury-total { text-align: right; }
.treasury-total-label {
  font-family: var(--font-display);
  font-size: 0.65rem;
  letter-spacing: 0.28em;
  color: var(--silver-deep);
}
.treasury-total-amount {
  font-family: var(--font-figures);
  font-feature-settings: "tnum" 1;
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 600;
  color: var(--oxblood);
  margin-top: 0.2rem;
}

/* Cycle progress rail — how far through the current pay cycle we are. */
.cycle-progress { margin-top: 0.75rem; max-width: 22rem; }
.cycle-rail {
  height: 4px;
  background: var(--parchment-deep);
  border-radius: 2px;
  overflow: hidden;
}
.cycle-rail-fill {
  height: 100%;
  width: 0%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--green-soft), var(--green));
  transition: width 700ms ease;
}
.cycle-progress-meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.3rem;
  font-family: var(--font-figures);
  font-size: 0.68rem;
  color: var(--silver-deep);
}

/* Footing figures — read like the summary line of a ledger page, not cards. */
.hall-footing {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 1.25rem;
  padding-top: 0.85rem;
  border-top: 0.5px solid var(--gold);
}
.hall-figure {
  min-width: 0;
  padding: 0 1rem;
  border-left: 0.4px solid rgba(28, 20, 16, 0.20);
}
.hall-figure:first-child { padding-left: 0; border-left: none; }
.hall-figure-label {
  font-family: var(--font-display);
  font-size: 0.58rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--silver-deep);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hall-figure-value {
  font-family: var(--font-figures);
  font-feature-settings: "tnum" 1;
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--ink-soft);
  margin-top: 0.15rem;
}
.hall-figure-value .unit { font-size: 0.72rem; color: var(--silver-deep); }
.hall-figure[data-tone="inflow"] .hall-figure-value { color: var(--green); }
.hall-figure[data-tone="due"] .hall-figure-value { color: var(--oxblood); }

@media (max-width: 560px) {
  .cycle-banner-top { grid-template-columns: 1fr; text-align: left; }
  .treasury-total { text-align: left; }
  .cycle-progress { max-width: none; }
  .hall-footing { grid-template-columns: 1fr; gap: 0.7rem; }
  .hall-figure { padding: 0; border-left: none; }
}

/* ---------- Account cards ---------- */

.account-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}

.account-card {
  position: relative;
  background:
    linear-gradient(180deg, var(--parchment) 0%, var(--parchment-warm) 100%);
  border: 1px solid var(--gold);
  padding: 1.1rem 1.2rem 1.0rem;
  transition: transform 220ms ease, box-shadow 220ms ease;
  cursor: pointer;
}
.account-card::before {
  content: "";
  position: absolute; inset: 4px;
  border: 0.4px solid var(--ink);
  pointer-events: none;
}
.account-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -16px rgba(28, 20, 16, 0.4);
}

.account-card[data-role="inflow"]   { border-color: var(--green); }
.account-card[data-role="treasury"] { border-color: var(--oxblood); border-width: 1.5px; }
.account-card[data-role="treasury"]::before { border-color: var(--gold); }

.account-card-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-display);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  color: var(--silver-deep);
  margin-bottom: 0.6rem;
}
.account-card[data-role="inflow"] .account-role   { color: var(--green); }
.account-card[data-role="treasury"] .account-role { color: var(--oxblood); }

.account-name {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.18rem;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 0.3rem;
}

.account-number {
  font-family: var(--font-figures);
  font-size: 0.78rem;
  color: var(--silver-deep);
  margin-bottom: 0.9rem;
}

.account-balance {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-top: 0.5px solid var(--gold);
  padding-top: 0.55rem;
}
.account-balance-label {
  font-family: var(--font-display);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  color: var(--silver-deep);
}
.account-balance-amount {
  font-family: var(--font-figures);
  font-feature-settings: "tnum" 1;
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--oxblood);
}

.account-fullness {
  margin-top: 0.7rem;
}
.fullness-bar {
  height: 4px;
  background: var(--parchment-deep);
  border-radius: 1px;
  overflow: hidden;
  position: relative;
}
.fullness-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--gold-bright));
  width: 0%;
  transition: width 600ms ease;
}
.fullness-meta {
  display: flex;
  justify-content: space-between;
  margin-top: 0.25rem;
  font-family: var(--font-figures);
  font-size: 0.7rem;
  color: var(--silver-deep);
}
.fullness-meta .fullness-current { color: var(--ink-soft); }

/* ---------- Hall columns (dashboard 2-col) ---------- */

.hall-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-top: 1rem;
}
@media (max-width: 760px) {
  .hall-columns { grid-template-columns: 1fr; }
}

/* ---------- Ledger list (dashboard items + paystubs list) ---------- */

.ledger-list {
  border: 1px solid var(--gold);
  background: var(--parchment-warm);
  position: relative;
}
.ledger-list::before {
  content: "";
  position: absolute; inset: 4px;
  border: 0.4px solid var(--ink);
  pointer-events: none;
}

.ledger-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1rem;
  padding: 0.85rem 1rem;
  align-items: center;
  border-bottom: 0.4px solid var(--silver);
  position: relative;
  z-index: 1;
}
.ledger-row:last-child { border-bottom: none; }
.ledger-row:hover { background: rgba(184, 157, 91, 0.08); cursor: pointer; }

.ledger-row-date {
  font-family: var(--font-figures);
  font-size: 0.78rem;
  color: var(--silver-deep);
  white-space: nowrap;
}
.ledger-row-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.ledger-row-title {
  font-weight: 500;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ledger-row-sub {
  font-size: 0.85rem;
  color: var(--silver-deep);
  font-style: italic;
}
.ledger-row-amount {
  font-family: var(--font-figures);
  font-feature-settings: "tnum" 1;
  font-weight: 500;
  color: var(--oxblood);
  text-align: right;
  white-space: nowrap;
}

.ledger-row-status {
  font-family: var(--font-display);
  font-size: 0.55rem;
  letter-spacing: 0.20em;
  padding: 2px 8px;
  border: 0.5px solid;
  margin-left: 0.6rem;
}
.status-pending  { color: var(--silver-deep); border-color: var(--silver); }
.status-planned  { color: var(--green); border-color: var(--green); }
.status-executed { color: var(--oxblood); border-color: var(--oxblood); }

.empty-state {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--silver-deep);
  font-style: italic;
  position: relative;
  z-index: 1;
}

/* ============================================================================
   Treasury Hall — the home screen only
   ============================================================================ */

/* ---------- Order of Business (the docket) ---------- */

.docket {
  border: 1px solid var(--gold);
  background: var(--parchment-warm);
  position: relative;
}
.docket::before {
  content: "";
  position: absolute; inset: 4px;
  border: 0.4px solid var(--ink);
  pointer-events: none;
}

.docket-item {
  display: grid;
  grid-template-columns: 2.4rem 1fr auto;
  gap: 0.9rem;
  align-items: baseline;
  padding: 0.95rem 1.1rem;
  border-bottom: 0.4px solid var(--silver);
  position: relative;
  z-index: 1;
  cursor: pointer;
}
.docket-item:last-child { border-bottom: none; }
.docket-item:hover { background: rgba(184, 157, 91, 0.10); }

.docket-numeral {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--silver-deep);
  text-align: right;
}
/* A matter that moves money or is already late gets an oxblood tab. */
.docket-item[data-urgency="high"] .docket-numeral { color: var(--oxblood); }
.docket-item[data-urgency="high"]::after {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--oxblood);
}

.docket-matter { min-width: 0; }
.docket-title {
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}
.docket-sub {
  margin-top: 0.1rem;
  font-size: 0.86rem;
  font-style: italic;
  color: var(--silver-deep);
  overflow: hidden;
  text-overflow: ellipsis;
}
.docket-take {
  font-family: var(--font-display);
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--green);
  white-space: nowrap;
}
.docket-item:hover .docket-take { color: var(--oxblood); }

.docket-clear {
  padding: 1.7rem 1.1rem;
  text-align: center;
  position: relative;
  z-index: 1;
}
.docket-clear-mark {
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--green);
}
.docket-clear-note {
  margin-top: 0.3rem;
  font-style: italic;
  color: var(--silver-deep);
}

/* Matters answered in place — a repayment to send, or a payment whose
   recipient the app refused to guess. These are the only docket rows that
   are not links, so they get no pointer and no hover lift. */
.docket-item-act { cursor: default; }
.docket-item-act:hover { background: none; }

.docket-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.5rem;
}
.docket-btn {
  /* 40px clears the fingertip minimum; these buttons settle real debts and
     sit inches from each other, so a mis-tap is expensive. */
  min-height: 40px;
  padding: 0.4rem 0.8rem;
  font-size: 0.62rem;
}
.docket-btn-quiet { color: var(--silver-deep); border-color: var(--silver); }
.docket-btn[disabled] { opacity: 0.45; cursor: progress; }

/* A question mark, not a numeral: this matter has no place in the order. */
.docket-item[data-urgency="high"] .docket-numeral { color: var(--oxblood); }

@media (max-width: 560px) {
  .docket-item { grid-template-columns: 1.6rem 1fr; gap: 0.7rem; }
  .docket-take { grid-column: 2; margin-top: 0.35rem; }
  /* Stack the answers full-width so neither thumb nor eye has to aim. */
  .docket-choices { gap: 0.45rem; }
  .docket-choices .docket-btn { flex: 1 1 8rem; }
}

/* ---------- Three-month obligation outlook ---------- */

.outlook {
  padding: 0.95rem 1.1rem 1.05rem;
  border-bottom: 0.4px solid var(--silver);
  position: relative;
  z-index: 1;
}
.outlook-caption {
  font-family: var(--font-display);
  font-size: 0.56rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--silver-deep);
  margin-bottom: 0.6rem;
}
.outlook-row {
  display: grid;
  grid-template-columns: 2.6rem 1fr 5.4rem;
  gap: 0.7rem;
  align-items: center;
  margin-top: 0.42rem;
}
.outlook-month {
  font-family: var(--font-display);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  color: var(--silver-deep);
}
.outlook-bar {
  height: 4px;
  background: var(--parchment-deep);
  border-radius: 2px;
  overflow: hidden;
}
.outlook-fill {
  height: 100%;
  width: 0%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-bright));
  transition: width 700ms ease;
}
.outlook-amt {
  font-family: var(--font-figures);
  font-feature-settings: "tnum" 1;
  font-size: 0.76rem;
  text-align: right;
  color: var(--ink-soft);
}
/* The month you're standing in, distinguished by colour *and* by position. */
.outlook-row.is-current .outlook-month,
.outlook-row.is-current .outlook-amt { color: var(--oxblood); }
.outlook-row.is-current .outlook-fill { background: var(--oxblood); }

/* ---------- The Register (money in / money out) ---------- */

.ledger-row-amount.amount-in   { color: var(--green); }
.ledger-row-amount.amount-out  { color: var(--oxblood); }
.ledger-row-amount.amount-move { color: var(--ink-soft); }

/* ---------- Standing-business row: three narrow registers ---------- */

.hall-col { min-width: 0; }

.hall-columns.triple { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.hall-columns.triple .section-title {
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  gap: 0.7rem;
}
.hall-columns.triple .section-title span { white-space: normal; }
@media (max-width: 1000px) {
  .hall-columns.triple { grid-template-columns: 1fr; }
}

.ledger-row.two-col { grid-template-columns: 1fr auto; }
.ledger-list.compact .ledger-row { padding: 0.7rem 0.9rem; gap: 0.7rem; }
.ledger-list.compact .ledger-row-title { font-size: 0.95rem; }
.ledger-list.compact .ledger-row-sub { font-size: 0.8rem; }
.ledger-list.compact .ledger-row-amount { font-size: 0.86rem; }

.contract-meter { margin-top: 0.4rem; max-width: 11rem; }
.contract-meter .fullness-bar { height: 3px; }
.contract-of {
  display: block;
  font-size: 0.68rem;
  font-weight: 400;
  color: var(--silver-deep);
}

.warehouse-total {
  background: rgba(184, 157, 91, 0.10);
  border-top: 0.5px solid var(--gold);
}
/* Specificity note: must out-rank `.ledger-list.compact .ledger-row-title`
   above, which would otherwise reset this back to body size. */
.ledger-row.warehouse-total .ledger-row-title {
  font-family: var(--font-display);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* Rows are links; keep them reachable and visibly focused. */
.ledger-row[data-nav],
.docket-item[data-nav] { cursor: pointer; }
.ledger-row[data-nav]:focus-visible,
.docket-item[data-nav]:focus-visible {
  outline: 1.5px solid var(--green);
  outline-offset: -3px;
}

/* ---------- Allocation table (paystub detail) ---------- */

.allocation-table {
  border: 1px solid var(--gold);
  background: var(--parchment-warm);
  position: relative;
  overflow-x: auto;
}
.allocation-table::before {
  content: "";
  position: absolute; inset: 4px;
  border: 0.4px solid var(--ink);
  pointer-events: none;
}
.allocation-table table {
  width: 100%;
  border-collapse: collapse;
  position: relative;
  z-index: 1;
  font-family: var(--font-body);
}
.allocation-table th {
  font-family: var(--font-display);
  font-size: 0.65rem;
  letter-spacing: 0.20em;
  color: var(--green);
  text-align: left;
  padding: 0.7rem 0.9rem;
  border-bottom: 0.5px solid var(--gold);
  background: var(--parchment-deep);
}
.allocation-table td {
  padding: 0.7rem 0.9rem;
  border-bottom: 0.4px solid var(--silver);
  vertical-align: middle;
}
.allocation-table tr:nth-child(even) td { background: rgba(220, 200, 160, 0.18); }
.allocation-table tr:last-child td { border-bottom: none; }

.alloc-amount-input {
  font-family: var(--font-figures);
  font-feature-settings: "tnum" 1;
  font-size: 1rem;
  font-weight: 500;
  color: var(--oxblood);
  background: var(--parchment);
  border: 0.5px solid var(--silver);
  padding: 4px 8px;
  width: 110px;
  text-align: right;
}
.alloc-amount-input:focus {
  outline: none;
  border-color: var(--oxblood);
  background: #fff;
}

.alloc-pass-tag {
  font-family: var(--font-display);
  font-size: 0.55rem;
  letter-spacing: 0.18em;
  padding: 1px 6px;
  border: 0.4px solid var(--silver);
  color: var(--silver-deep);
  text-transform: uppercase;
}
.alloc-pass-tag.minimum    { color: var(--green); border-color: var(--green); }
.alloc-pass-tag.percentage { color: var(--oxblood); border-color: var(--oxblood); }
.alloc-pass-tag.overflow   { color: var(--gold); border-color: var(--gold); background: rgba(184,157,91,0.1); }
.alloc-pass-tag.manual     { color: var(--ink-soft); border-color: var(--ink-soft); }
.alloc-pass-tag.repayment  { color: var(--oxblood); border-color: var(--oxblood); background: rgba(92,26,27,0.08); }

.alloc-edited-mark {
  display: inline-block;
  margin-left: 0.4rem;
  font-size: 0.7rem;
  color: var(--gold);
  font-style: italic;
}

.allocation-total-row td {
  background: var(--parchment-deep) !important;
  font-weight: 600;
  border-top: 1px solid var(--gold) !important;
  border-bottom: none !important;
}
.allocation-total-row .alloc-total-amount {
  font-family: var(--font-figures);
  font-feature-settings: "tnum" 1;
  color: var(--oxblood);
  font-size: 1.1rem;
}

/* ---------- Paystub meta + actions ---------- */

.paystub-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.5rem;
  padding: 1.2rem 1.4rem;
  background: var(--parchment-warm);
  border: 1px solid var(--gold);
  position: relative;
  margin-bottom: 1.5rem;
}
.paystub-meta::before {
  content: "";
  position: absolute; inset: 4px;
  border: 0.4px solid var(--ink);
  pointer-events: none;
}
.meta-field {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  position: relative;
  z-index: 1;
}
.meta-field-label {
  font-family: var(--font-display);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  color: var(--silver-deep);
}
.meta-field-value {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
}
.meta-field-value.figures {
  font-family: var(--font-figures);
  font-feature-settings: "tnum" 1;
  font-weight: 500;
  color: var(--oxblood);
  font-size: 1.3rem;
}

.shortfall-warnings {
  margin: 1rem 0;
}
.shortfall-warnings:empty { display: none; }
.shortfall-notice {
  background: rgba(92, 26, 27, 0.06);
  border-left: 3px solid var(--oxblood);
  padding: 0.7rem 1rem;
  margin-bottom: 0.5rem;
  font-style: italic;
  color: var(--oxblood-deep);
  font-size: 0.95rem;
}

.paystub-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 1.5rem;
  padding-top: 1.2rem;
  border-top: 0.5px solid var(--gold);
}

/* ---------- Buttons ---------- */

.btn {
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.6rem 1.2rem;
  border: 1px solid var(--ink-soft);
  background: var(--parchment);
  color: var(--ink);
  cursor: pointer;
  position: relative;
  transition: all 180ms ease;
  font-weight: 500;
}
.btn:hover {
  background: var(--parchment-warm);
  border-color: var(--gold);
}
.btn:active { transform: translateY(1px); }
.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--oxblood);
  color: var(--parchment);
  border-color: var(--oxblood-deep);
  box-shadow: inset 0 0 0 0.5px var(--gold);
}
.btn-primary:hover {
  background: var(--oxblood-deep);
  border-color: var(--gold);
}

.btn-secondary {
  background: var(--green);
  color: var(--parchment);
  border-color: var(--green);
  box-shadow: inset 0 0 0 0.5px var(--gold);
}
.btn-secondary:hover { background: var(--green-soft); }

.btn-ghost {
  background: transparent;
  color: var(--ink-soft);
  border-color: var(--silver);
}

.btn-danger {
  background: transparent;
  color: var(--oxblood);
  border-color: var(--oxblood);
}
.btn-danger:hover { background: var(--oxblood); color: var(--parchment); }

.back-link {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--silver-deep);
  text-decoration: none;
  margin-bottom: 0.5rem;
  transition: color 180ms;
}
.back-link:hover { color: var(--oxblood); }

/* ---------- Tables (rules, ledger, contracts) ---------- */

.rules-table-wrap, .ledger-table-wrap, .contracts-table-wrap {
  border: 1px solid var(--gold);
  background: var(--parchment-warm);
  position: relative;
  overflow-x: auto;
  margin-top: 1rem;
}
.rules-table-wrap::before, .ledger-table-wrap::before, .contracts-table-wrap::before {
  content: "";
  position: absolute; inset: 4px;
  border: 0.4px solid var(--ink);
  pointer-events: none;
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  position: relative;
  z-index: 1;
}
.data-table th {
  font-family: var(--font-display);
  font-size: 0.6rem;
  letter-spacing: 0.20em;
  color: var(--green);
  text-align: left;
  padding: 0.7rem 0.9rem;
  border-bottom: 0.5px solid var(--gold);
  background: var(--parchment-deep);
  white-space: nowrap;
}
.data-table td {
  padding: 0.65rem 0.9rem;
  border-bottom: 0.3px solid var(--silver);
  vertical-align: middle;
  font-size: 0.95rem;
}
.data-table tr:nth-child(even) td { background: rgba(220, 200, 160, 0.15); }
.data-table tr:last-child td { border-bottom: none; }
.data-table .figures {
  font-family: var(--font-figures);
  font-feature-settings: "tnum" 1;
}
.data-table .figures.amount { color: var(--oxblood); font-weight: 500; }
.data-table .num-input {
  width: 80px;
  font-family: var(--font-figures);
  font-size: 0.9rem;
  padding: 3px 6px;
  border: 0.5px solid var(--silver);
  background: var(--parchment);
  text-align: right;
}

/* ---------- Modal ---------- */

.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(28, 20, 16, 0.55);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  animation: fade-in 200ms ease;
}
@keyframes fade-in { from { opacity: 0 } to { opacity: 1 } }

.modal {
  background: var(--parchment);
  border: 1px solid var(--gold);
  max-width: 540px;
  width: 100%;
  max-height: 90vh;
  /* dvh, where supported, so a modal isn't cut off by Chrome's URL bar. */
  max-height: 90dvh;
  overflow-y: auto;
  position: relative;
  padding: 1.8rem 2rem 1.5rem;
  animation: modal-rise 280ms ease;
}
.modal::before {
  content: "";
  position: absolute; inset: 5px;
  border: 0.4px solid var(--ink);
  pointer-events: none;
}
@keyframes modal-rise {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-title {
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 0.4rem;
  text-align: center;
}
.modal-subtitle {
  text-align: center;
  font-style: italic;
  color: var(--silver-deep);
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
  border-bottom: 0.5px solid var(--gold);
  padding-bottom: 1rem;
}

.modal-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.modal-actions {
  display: flex;
  gap: 0.6rem;
  justify-content: flex-end;
  margin-top: 1.2rem;
  padding-top: 1.1rem;
  border-top: 0.5px solid var(--gold);
}

/* ---------- Form fields ---------- */

.field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.field label {
  font-family: var(--font-display);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  color: var(--silver-deep);
  text-transform: uppercase;
}
.field input, .field select, .field textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.5rem 0.7rem;
  background: var(--parchment-warm);
  border: 0.6px solid var(--silver);
  color: var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--oxblood);
  background: #fff;
}
.field input[type="number"] {
  font-family: var(--font-figures);
  font-feature-settings: "tnum" 1;
  text-align: right;
}
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
}
@media (max-width: 480px) { .field-row { grid-template-columns: 1fr; } }

.help-text {
  font-style: italic;
  color: var(--silver-deep);
  font-size: 0.85rem;
}

/* ---------- Toast ---------- */

#toast-mount {
  position: fixed;
  bottom: calc(1.5rem + env(safe-area-inset-bottom)); left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
}
.toast {
  background: var(--ink);
  color: var(--parchment);
  border: 1px solid var(--gold);
  padding: 0.7rem 1.2rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  animation: toast-in 240ms ease;
  pointer-events: auto;
  max-width: 90vw;
}
.toast.error  { border-color: var(--oxblood); color: #FFD8D8; }
.toast.success { border-color: var(--green); }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Prose notes ---------- */

.prose-note {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 1rem;
  color: var(--ink-soft);
  border-left: 2px solid var(--gold);
  padding: 0.4rem 1rem;
  margin: 0.8rem 0 1.4rem;
  max-width: 720px;
}

.csv-format {
  background: var(--parchment-warm);
  border: 0.6px solid var(--silver);
  padding: 0.9rem 1.1rem;
  font-family: var(--font-figures);
  font-size: 0.78rem;
  color: var(--ink-soft);
  overflow-x: auto;
  margin: 0.5rem 0 1.5rem;
}

.import-zone {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.4rem 1.6rem;
  border: 1.5px dashed var(--gold);
  background: var(--parchment-warm);
  margin-bottom: 1.5rem;
}
.import-filename {
  font-family: var(--font-figures);
  font-size: 0.85rem;
  color: var(--green);
}

/* ---------- Footer ---------- */

.masthead-foot {
  position: relative;
  z-index: 1;
  margin-top: auto;
}
.footer-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 1.2rem var(--gutter) calc(2.2rem + env(safe-area-inset-bottom));
  text-align: center;
}
.footer-mark {
  font-family: var(--font-display);
  font-size: 0.62rem;
  letter-spacing: 0.32em;
  color: var(--silver-deep);
}

/* ---------- Utility ---------- */

.figures {
  font-family: var(--font-figures);
  font-feature-settings: "tnum" 1;
}
.amount-pos { color: var(--green); }
.amount-neg { color: var(--oxblood); }
.muted { color: var(--silver-deep); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Statutes column guide (collapsible) */
.column-guide {
  margin: 0 0 1.5rem 0;
  border: var(--rule-thin) solid var(--ink-soft);
  background: var(--parchment-warm);
  padding: 0.5rem 1rem;
  font-family: var(--font-body);
}
.column-guide summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--oxblood);
  padding: 0.35rem 0;
  list-style: none;
}
.column-guide summary::-webkit-details-marker { display: none; }
.column-guide summary::before {
  content: "B8";   /* U+25B8, written as an escape so it survives re-encoding */
  display: inline-block;
  margin-right: 0.6rem;
  transition: transform 0.15s ease;
  color: var(--gold);
}
.column-guide[open] summary::before { transform: rotate(90deg); }
.column-guide .guide-table {
  margin-top: 0.75rem;
  background: var(--parchment);
}
.column-guide .guide-table th,
.column-guide .guide-table td {
  padding: 0.4rem 0.7rem;
  vertical-align: top;
  font-size: 0.95rem;
}
.column-guide .guide-table td:first-child { white-space: nowrap; color: var(--oxblood); }
.column-guide code {
  font-family: var(--font-figures);
  font-size: 0.85em;
  background: var(--parchment-deep);
  padding: 0 0.25rem;
  border-radius: 2px;
}

/* ============================================================================
   LOGIN PAGE
   ============================================================================ */
.login-body {
  min-height: 100vh;
  min-height: 100dvh;   /* Chrome's URL bar must not push the card off-screen */
  display: grid;
  place-items: center;
}
.login-shell {
  width: 100%;
  max-width: 460px;
  padding: 2rem 1rem;
}
.login-card {
  background: var(--parchment-warm);
  border: var(--rule-thick) solid var(--ink-soft);
  padding: 2.5rem 2rem 1.5rem;
  box-shadow: 0 8px 40px rgba(28, 20, 16, 0.25);
  text-align: center;
  position: relative;
}
.login-seal { margin: 0 auto 0.5rem; }
.login-eyebrow {
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  color: var(--oxblood);
  margin-bottom: 0.5rem;
}
.login-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin: 0 0 1rem;
  color: var(--ink);
  line-height: 1.25;
}
.login-form {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin-top: 1.5rem;
  text-align: left;
}
.login-label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.login-label span {
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.login-label input {
  font-family: var(--font-body);
  font-size: 1.05rem;
  padding: 0.55rem 0.7rem;
  background: var(--parchment);
  border: var(--rule-thin) solid var(--ink-soft);
  color: var(--ink);
}
.login-label input:focus {
  outline: none;
  border-color: var(--oxblood);
  box-shadow: 0 0 0 2px rgba(92, 26, 27, 0.15);
}
.login-error {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--oxblood);
  background: rgba(92, 26, 27, 0.08);
  border-left: 3px solid var(--oxblood);
  padding: 0.4rem 0.6rem;
}
.login-submit {
  margin-top: 0.5rem;
  padding: 0.7rem 1rem;
  font-size: 0.95rem;
  letter-spacing: 0.1em;
}
.login-foot {
  margin-top: 1.5rem;
  font-family: var(--font-display);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  color: var(--silver-deep);
}

/* Masthead logout link */
.masthead-logout {
  position: absolute;
  top: 1rem;
  right: 1.25rem;
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
  border: var(--rule-thin) solid var(--ink-soft);
  padding: 0.25rem 0.6rem;
  background: var(--parchment-warm);
  cursor: pointer;
}
.masthead-logout:hover { color: var(--oxblood); border-color: var(--oxblood); }
.masthead { position: relative; }

/* Counterparties panel + segmented toggles + external badges */
.counterparties-panel {
  margin: 0 0 1.5rem 0;
  border: var(--rule-thin) solid var(--ink-soft);
  background: var(--parchment-warm);
  padding: 0.5rem 1rem;
}
.counterparties-panel summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--oxblood);
  padding: 0.35rem 0;
  list-style: none;
}
.counterparties-panel summary::-webkit-details-marker { display: none; }
.counterparties-panel summary::before {
  content: "B8";   /* U+25B8, written as an escape so it survives re-encoding */
  display: inline-block;
  margin-right: 0.6rem;
  color: var(--gold);
  transition: transform 0.15s ease;
}
.counterparties-panel[open] summary::before { transform: rotate(90deg); }
.counterparties-panel .data-table { background: var(--parchment); margin-top: 0.5rem; }
.text-input {
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 0.3rem 0.5rem;
  background: var(--parchment);
  border: var(--rule-thin) solid var(--ink-soft);
  color: var(--ink);
  width: 100%;
}
.cp-add-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.75rem;
  padding: 0.5rem 0 0.25rem;
  border-top: var(--rule-thin) solid var(--ink-soft);
}
.cp-add-row .text-input { max-width: 260px; }

/* Segmented toggle (radio-as-tabs) inside modals */
.seg-toggle {
  display: inline-flex;
  gap: 1rem;
  margin-bottom: 0.4rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
}
.seg-toggle label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  color: var(--ink-soft);
}
.seg-toggle input[type=radio]:checked + * { font-weight: 600; }

/* External-party badge in the contracts table */
.party-external {
  font-style: italic;
  color: var(--oxblood);
}
.party-badge {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  background: var(--oxblood);
  color: var(--parchment);
  padding: 0.05rem 0.35rem;
  margin-left: 0.4rem;
  vertical-align: middle;
  border-radius: 1px;
}

/* ============================================================================
   WAREHOUSE
   ============================================================================ */
.warehouse-status-pills {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0.5rem 0 1.25rem;
}
.status-pill {
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
  border: var(--rule-thin) solid var(--ink-soft);
  background: var(--parchment-warm);
  color: var(--ink-soft);
  text-decoration: none;
}
.status-pill:hover { color: var(--oxblood); border-color: var(--oxblood); }
.status-pill.active {
  background: var(--oxblood);
  color: var(--parchment);
  border-color: var(--oxblood);
}

.warehouse-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}
.warehouse-card {
  display: flex;
  flex-direction: column;
  background: var(--parchment-warm);
  border: var(--rule-thin) solid var(--ink-soft);
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.warehouse-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(28, 20, 16, 0.15);
}
.warehouse-card-photo {
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  background-color: var(--parchment-deep);
  border-bottom: var(--rule-thin) solid var(--ink-soft);
}
.warehouse-card-photo-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--silver-deep);
  text-transform: uppercase;
}
.warehouse-card-body {
  padding: 0.7rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.warehouse-card-name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--ink);
}
.warehouse-card-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
}
.warehouse-card-status { margin-top: 0.3rem; }

/* Detail page */
.warehouse-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.warehouse-detail-grid {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 1.4fr;
  gap: 2rem;
  align-items: start;
}
@media (max-width: 760px) {
  .warehouse-detail-grid { grid-template-columns: 1fr; }
}
.warehouse-photo-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.warehouse-photo-tile {
  position: relative;
  width: 110px;
  height: 110px;
  background-size: cover;
  background-position: center;
  background-color: var(--parchment-deep);
  border: var(--rule-thin) solid var(--ink-soft);
}
.warehouse-photo-del {
  position: absolute;
  top: 2px;
  right: 2px;
  background: var(--oxblood);
  color: var(--parchment);
  border: none;
  width: 22px;
  height: 22px;
  line-height: 18px;
  font-size: 1rem;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.warehouse-photo-tile:hover .warehouse-photo-del { opacity: 1; }
.warehouse-fields .field { margin-bottom: 0.75rem; }
.warehouse-detail-actions {
  display: flex;
  gap: 0.6rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}
.wh-danger { color: var(--oxblood); }
.wh-danger:hover { background: var(--oxblood); color: var(--parchment); }

/* ============================================================================
   RECEIPTS
   ============================================================================ */
.receipts-upload-buttons { display: flex; gap: 0.5rem; }
.receipts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
  margin-top: 0.5rem;
}
.receipt-card {
  display: flex;
  flex-direction: column;
  background: var(--parchment-warm);
  border: var(--rule-thin) solid var(--ink-soft);
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.receipt-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(28, 20, 16, 0.15);
}
.receipt-card-photo {
  aspect-ratio: 3 / 4;
  background-size: cover;
  background-position: center;
  background-color: var(--parchment-deep);
  border-bottom: var(--rule-thin) solid var(--ink-soft);
}
.receipt-card-body { padding: 0.6rem 0.8rem; display: flex; flex-direction: column; gap: 0.3rem; }
.receipt-card-vendor { font-family: var(--font-display); font-size: 1rem; }
.receipt-card-meta { display: flex; justify-content: space-between; font-size: 0.9rem; }
.receipt-card-status { margin-top: 0.3rem; }

.receipt-detail-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 1.5fr;
  gap: 2rem;
  align-items: start;
}
@media (max-width: 760px) {
  .receipt-detail-grid { grid-template-columns: 1fr; }
}
.receipt-photo-pane {
  background: var(--parchment-deep);
  border: var(--rule-thin) solid var(--ink-soft);
  padding: 0.5rem;
}
.receipt-photo-full {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}
.receipt-detail-status { margin-bottom: 0.75rem; }
.receipt-detail-actions { display: flex; gap: 0.5rem; margin: 1rem 0; flex-wrap: wrap; }
.receipt-error {
  margin-top: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-left: 3px solid var(--oxblood);
  background: rgba(92, 26, 27, 0.08);
  color: var(--oxblood);
  font-size: 0.9rem;
}
.tx-suggestions { display: flex; flex-direction: column; gap: 0.5rem; }
.tx-card {
  border: var(--rule-thin) solid var(--ink-soft);
  background: var(--parchment);
  padding: 0.6rem 0.8rem;
}
.tx-card-linked { border-color: var(--green); background: rgba(31, 58, 44, 0.05); }
.tx-card-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.3rem; }
.tx-card-desc { font-size: 0.95rem; margin-bottom: 0.4rem; }

/* ============================================================================
   RECURRING / FORECAST
   ============================================================================ */
.suggestion-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}
.suggestion-card {
  border: var(--rule-thin) solid var(--ink-soft);
  background: var(--parchment-warm);
  padding: 0.6rem 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.suggestion-vendor { font-family: var(--font-display); font-size: 1rem; color: var(--ink); }
.suggestion-meta { display: flex; gap: 0.5rem; flex-wrap: wrap; font-size: 0.9rem; }
.suggestion-actions { display: flex; gap: 0.4rem; margin-top: 0.25rem; }

.recurring-table-wrap { margin-bottom: 1.5rem; }
.recurring-table-wrap .text-input { padding: 0.25rem 0.4rem; font-size: 0.9rem; }

.forecast-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.forecast-month {
  border: var(--rule-thin) solid var(--ink-soft);
  background: var(--parchment-warm);
  padding: 0.6rem 0.8rem;
}
.forecast-month-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--oxblood);
  margin-bottom: 0.4rem;
  padding-bottom: 0.25rem;
  border-bottom: var(--rule-thin) solid var(--ink-soft);
}
.forecast-month-total { font-size: 1rem; color: var(--ink); }
.forecast-dept { margin-bottom: 0.5rem; }
.forecast-dept-name {
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 0.25rem;
}
.forecast-line {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  padding: 0.15rem 0;
}
.forecast-empty { padding: 0.4rem 0; }
.forecast-total {
  margin-top: 0.5rem;
  font-family: var(--font-display);
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  color: var(--ink);
}

/* ============================================================================
   HOW TO PAGE
   ============================================================================ */
.howto { max-width: 760px; }
.howto p { line-height: 1.6; }
.howto ol, .howto ul { line-height: 1.6; padding-left: 1.5rem; }
.howto code {
  font-family: var(--font-figures);
  font-size: 0.85em;
  background: var(--parchment-deep);
  padding: 0 0.25rem;
  border-radius: 2px;
}
.howto-toc {
  margin: 0 0 1.5rem 0;
  border: var(--rule-thin) solid var(--ink-soft);
  background: var(--parchment-warm);
  padding: 0.5rem 1rem 0.75rem;
}
.howto-toc summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--oxblood);
  padding: 0.35rem 0;
  list-style: none;
}
.howto-toc summary::-webkit-details-marker { display: none; }
.howto-toc summary::before {
  content: "B8";   /* U+25B8, written as an escape so it survives re-encoding */
  display: inline-block;
  margin-right: 0.6rem;
  color: var(--gold);
  transition: transform 0.15s ease;
}
.howto-toc[open] summary::before { transform: rotate(90deg); }
.howto-toc ol { columns: 2; column-gap: 1.5rem; margin: 0.4rem 0 0; }
@media (max-width: 600px) { .howto-toc ol { columns: 1; } }
.howto-toc li { margin-bottom: 0.2rem; break-inside: avoid; }
.howto-toc a { color: var(--ink-soft); text-decoration: none; }
.howto-toc a:hover { color: var(--oxblood); }
.howto-table th, .howto-table td { vertical-align: top; padding: 0.4rem 0.7rem; }
.howto-glossary {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.35rem 1rem;
  margin: 0.5rem 0;
}
.howto-glossary dt {
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--oxblood);
  padding-top: 0.1rem;
}
.howto-glossary dd { margin: 0; }
.howto .subsection-title { scroll-margin-top: 90px; margin-top: 1.5rem; }

/* ============================================================================
   Bank Feed
   ============================================================================ */

.bankfeed-status-card {
  border: var(--rule-thin) solid var(--gold);
  background: var(--parchment-warm);
  padding: 0.9rem 1.1rem;
  margin-bottom: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.bankfeed-status-card code {
  font-family: var(--font-figures);
  font-size: 0.78rem;
}

.bankfeed-paste {
  border: var(--rule-thin) solid var(--silver);
  background: var(--parchment-warm);
  padding: 1rem 1.1rem;
  margin-bottom: 1.4rem;
}
.bankfeed-paste textarea {
  width: 100%;
  font-family: var(--font-figures);
  font-size: 0.78rem;
  margin: 0.6rem 0;
}
.bankfeed-paste-actions {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  justify-content: flex-end;
}

.feed-dir, .feed-status {
  font-family: var(--font-display);
  font-size: 0.55rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 2px 8px;
  border: 0.5px solid;
  white-space: nowrap;
}
.feed-dir-flip { cursor: pointer; }
.feed-dir-flip:hover { filter: brightness(1.15); }
.feed-dir-deposit    { color: var(--green); border-color: var(--green); }
.feed-dir-withdrawal { color: var(--oxblood); border-color: var(--oxblood); }
.feed-dir-unknown    { color: var(--silver-deep); border-color: var(--silver); }

.feed-status-posted            { color: var(--green); border-color: var(--green); }
.feed-status-pending           { color: var(--silver-deep); border-color: var(--silver); }
.feed-status-duplicate_suspect { color: var(--gold); border-color: var(--gold); background: rgba(184, 157, 91, 0.12); }
.feed-status-dismissed         { color: var(--silver-deep); border-color: var(--silver); text-decoration: line-through; }

.bill-overdue {
  font-family: var(--font-display);
  font-size: 0.55rem;
  letter-spacing: 0.18em;
  color: var(--oxblood);
  border: 0.5px solid var(--oxblood);
  padding: 1px 6px;
  margin-left: 0.4rem;
}

/* ============================================================================
   How-To — getting-started guide
   ============================================================================ */

.howto-toc-lead {
  margin: 0 0 0.6rem;
  padding-bottom: 0.55rem;
  border-bottom: var(--rule-thin) solid var(--gold);
}
.howto-toc-lead a {
  font-family: var(--font-display);
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  color: var(--oxblood);
  text-decoration: none;
}
.howto-toc-lead a:hover { color: var(--oxblood-deep); text-decoration: underline; }

.howto-step {
  font-family: var(--font-display);
  font-size: 1.02rem;
  color: var(--green);
  margin: 1.6rem 0 0.5rem;
  padding-bottom: 0.25rem;
  border-bottom: var(--rule-thin) solid var(--silver);
  scroll-margin-top: 90px;
}

.howto-matrix { margin: 0.8rem 0 1rem; }
.howto-matrix th, .howto-matrix td {
  text-align: left;
  vertical-align: top;
  font-size: 0.92rem;
  line-height: 1.35;
}
.howto-matrix td.figures {
  font-size: 0.78rem;
  white-space: nowrap;
  color: var(--ink-soft);
}

.howto-code {
  font-family: var(--font-figures);
  font-size: 0.82rem;
  background: var(--ink);
  color: var(--parchment);
  padding: 0.8rem 1rem;
  overflow-x: auto;
  border-left: 3px solid var(--gold);
  margin: 0.6rem 0 0.9rem;
}

/* ============================================================================
   Setup page
   ============================================================================ */

.setup-fields {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  max-width: 640px;
}
.setup-field {
  border: var(--rule-thin) solid var(--silver);
  background: var(--parchment-warm);
  padding: 0.85rem 1rem;
}
.setup-field-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
}
.setup-field-head label {
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--ink);
}
.setup-help {
  margin: 0.25rem 0 0.55rem;
  font-size: 0.88rem;
  color: var(--ink-soft);
  line-height: 1.35;
}
.setup-input { width: 100%; font-family: var(--font-figures); font-size: 0.85rem; }

.setup-chip {
  font-family: var(--font-display);
  font-size: 0.55rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 2px 8px;
  border: 0.5px solid;
  white-space: nowrap;
}
.setup-chip-set   { color: var(--green); border-color: var(--green); }
.setup-chip-unset { color: var(--silver-deep); border-color: var(--silver); }

.setup-foot { margin-top: 1.2rem; max-width: 640px; }

/* ============================================================================
   Statutes (streamlined)
   ============================================================================ */

.rules-summary {
  border: var(--rule-thin) solid var(--gold);
  background: var(--parchment-warm);
  padding: 0.7rem 1rem;
  margin-bottom: 1rem;
  font-size: 0.95rem;
}
.rules-summary-over {
  border-color: var(--oxblood);
  color: var(--oxblood);
  background: rgba(92, 26, 27, 0.06);
}

.reorder-cell { white-space: nowrap; text-align: center; }
.reorder-btn {
  font-family: var(--font-body);
  font-size: 0.7rem;
  line-height: 1;
  padding: 4px 7px;
  margin: 0 1px;
  border: var(--rule-thin) solid var(--silver);
  background: var(--parchment);
  color: var(--ink-soft);
  cursor: pointer;
}
.reorder-btn:hover:not([disabled]) { background: var(--green); color: var(--parchment); border-color: var(--green); }
.reorder-btn[disabled] { opacity: 0.25; cursor: default; }

.acct-sub { font-size: 0.72rem; margin-top: 1px; }

/* $ / % affixes sit inline against the number input */
.field-money, .field-pct { white-space: nowrap; }
.field-affix { color: var(--silver-deep); font-family: var(--font-figures); font-size: 0.8rem; }
.rules-table .num-input { max-width: 84px; }

.row-saved {
  font-family: var(--font-display);
  font-size: 0.55rem;
  letter-spacing: 0.14em;
  color: var(--green);
  opacity: 0;
  transition: opacity 160ms ease;
  white-space: nowrap;
}
.row-saved.show { opacity: 1; }

.rules-foot { margin-top: 0.8rem; }

/* ============================================================================
   Zero allocations, cash take-outs, the trial dispersal, and the bank study
   ============================================================================ */

/* A department that this paycheck couldn't reach. Present — so it never looks
   deleted — but stated in a quieter voice than the funded rows. */
.alloc-pass-tag.none {
  color: var(--silver-deep);
  border-color: var(--silver);
  border-style: dotted;
  background: rgba(168, 172, 173, 0.10);
}
tr.alloc-row-zero > td { color: var(--silver-deep); background: rgba(168, 172, 173, 0.07); }
tr.alloc-row-zero .alloc-pass-tag { opacity: 0.85; }

/* $0.00 stated as a figure, not offered as an empty field that reads like an
   error. It still yields to a click, so the steward can overrule the statutes. */
.alloc-zero-amount {
  font-family: var(--font-figures);
  font-feature-settings: "tnum" 1;
  font-size: 0.9rem;
  color: var(--silver-deep);
  background: none;
  border: none;
  border-bottom: 0.4px dotted var(--silver);
  padding: 2px 0;
  cursor: text;
}
.alloc-zero-amount:hover, .alloc-zero-amount:focus {
  color: var(--ink-soft);
  border-bottom-color: var(--gold);
}

/* Money taken at the window instead of transferred. */
.cash-chip {
  display: inline-block;
  margin-left: 0.45rem;
  font-family: var(--font-display);
  font-size: 0.55rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 1px 6px;
  color: var(--green);
  border: 0.4px solid var(--green);
  background: rgba(31, 58, 44, 0.08);
  white-space: nowrap;
  vertical-align: 1px;
}
tr.alloc-row-zero .cash-chip { color: var(--silver-deep); border-color: var(--silver); background: none; }

/* Statutes: the cash column. */
.field-cash { white-space: nowrap; }
.cash-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-family: var(--font-display);
  font-size: 0.55rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  cursor: pointer;
}
.denom-input {
  display: block;
  margin-top: 3px;
  max-width: 96px;
  font-size: 0.8rem;
  padding: 2px 5px;
}
.denom-input[disabled] { opacity: 0.35; }

/* ---------- Trial dispersal (Statutes rehearsal) ---------- */

.trial-panel {
  border: var(--rule-thin) solid var(--ink-soft);
  background: var(--parchment-warm);
  padding: 0.9rem 1.1rem;
  margin-bottom: 1.2rem;
}
.trial-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.9rem;
}
.trial-title {
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--oxblood);
}
.trial-note { font-size: 0.9rem; margin-top: 0.15rem; max-width: 46ch; }
.trial-controls { display: flex; align-items: center; gap: 0.4rem; }
.trial-amount {
  max-width: 130px;
  font-family: var(--font-figures);
  font-feature-settings: "tnum" 1;
  text-align: right;
}
.trial-result { margin-top: 0.9rem; }
.trial-result:empty { display: none; }
.trial-empty { font-style: italic; color: var(--silver-deep); font-size: 0.95rem; }
.trial-table { background: var(--parchment); border: var(--rule-thin) solid var(--gold); }
.trial-table th, .trial-table td { padding: 0.35rem 0.7rem; }
.trial-unspent td {
  color: var(--oxblood);
  font-style: italic;
  border-top: 0.4px solid var(--silver);
}
.trial-foot { margin-top: 0.5rem; font-size: 0.88rem; font-style: italic; }

/* The equal split the creditors' share implies, shown under the rehearsal so
   "divided equally, summing exactly to the share" can be checked, not taken
   on trust. */
.trial-debts {
  margin-top: 0.7rem;
  padding: 0.6rem 0.8rem;
  border-left: 2px solid var(--oxblood);
  background: rgba(92, 26, 27, 0.05);
}
.trial-debts-title {
  font-family: var(--font-display);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--oxblood);
}
.trial-debts-list { list-style: none; margin: 0.4rem 0 0; padding: 0; }
.trial-debts-list li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.12rem 0;
  border-bottom: 0.4px dotted var(--silver);
}
.trial-debts-list li:last-child { border-bottom: none; }
.trial-debts-foot { margin-top: 0.35rem; font-size: 0.85rem; font-style: italic; }

/* ---------- Debts of Honour (Statutes) ---------- */

.debts-panel {
  border: var(--rule-thin) solid var(--oxblood);
  background: var(--parchment-warm);
  padding: 0.9rem 1.1rem 1rem;
  margin-bottom: 1.2rem;
}
/* Suspended: still legible, plainly not in force. */
.debts-panel[data-on="no"] .debts-note,
.debts-panel[data-on="no"] .debts-controls,
.debts-panel[data-on="no"] .debts-table,
.debts-panel[data-on="no"] .debts-empty { opacity: 0.5; }

.debts-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.8rem;
}
.debts-title {
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--oxblood);
}
.debts-quote {
  font-style: italic;
  color: var(--silver-deep);
  font-size: 0.92rem;
  margin-top: 0.1rem;
}
.debts-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-display);
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  cursor: pointer;
  /* A switch you hunt for is a switch you mis-tap. Give it a real target. */
  padding: 0.35rem 0.55rem;
  border: 0.4px solid var(--silver);
  background: var(--parchment);
  min-height: 40px;
}
.debts-panel[data-on="yes"] .debts-switch {
  border-color: var(--green);
  color: var(--green);
}
/* The department's own colour, at every width. (The app only sets
   accent-color inside the mobile query; this switch is prominent enough that
   a stock blue tick on the desktop reads as somebody else's control.) */
.debts-switch input { width: 18px; height: 18px; accent-color: var(--oxblood); }

.debts-note { font-size: 0.94rem; margin: 0.7rem 0 0; max-width: 66ch; }

.debts-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.8rem 0 0.9rem;
}
.debts-controls label {
  font-family: var(--font-display);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.debts-controls .num-input { max-width: 76px; text-align: right; }
.debts-saved {
  font-size: 0.8rem;
  font-style: italic;
  color: var(--green);
  opacity: 0;
  transition: opacity 200ms ease;
}
.debts-saved.show { opacity: 1; }

.debts-table { background: var(--parchment); border: var(--rule-thin) solid var(--gold); }
.debts-table th, .debts-table td { padding: 0.35rem 0.7rem; }
.debts-empty { font-style: italic; color: var(--silver-deep); font-size: 0.95rem; }

/* ---------- Contracts: how far along a debt is ---------- */

/* A one-line gloss under a form field that means something different
   depending on the choice above it. */
.field-hint {
  margin-top: 0.3rem;
  font-size: 0.86rem;
  font-style: italic;
  color: var(--silver-deep);
}

.repay-progress { display: inline-block; min-width: 8.5rem; }
.repay-figure { white-space: nowrap; }
.repay-of { color: var(--silver-deep); font-size: 0.8em; }
.repay-progress .fullness-bar { height: 3px; margin-top: 0.25rem; }

/* ---------- Bank export study (read-only) ---------- */

/* The whole point of this panel is that handing over a bank file is safe. */
.reassurance {
  border-left: 3px solid var(--green);
  background: rgba(31, 58, 44, 0.06);
  padding: 0.7rem 1rem;
  margin: 0.9rem 0;
  font-size: 0.98rem;
  color: var(--green);
  max-width: 68ch;
}
.reassurance-done { margin: 1rem 0; }

.study-options {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  margin-top: 0.7rem;
  font-size: 0.95rem;
  color: var(--ink-soft);
}
.study-opt { display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; }
.study-num { max-width: 62px; text-align: center; padding: 2px 4px; }

.study-report { margin-top: 1.2rem; }
.study-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 0.85rem 0;
  border-top: 0.5px solid var(--gold);
  border-bottom: 0.5px solid var(--gold);
}
.study-figure {
  min-width: 0;
  padding: 0 1rem;
  border-left: 0.4px solid rgba(28, 20, 16, 0.20);
}
.study-figure:first-child { padding-left: 0; border-left: none; }
.study-figure-label {
  font-family: var(--font-display);
  font-size: 0.58rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--silver-deep);
}
.study-figure-value {
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink-soft);
  margin-top: 0.15rem;
}
.study-figure-value .unit { font-size: 0.72rem; color: var(--silver-deep); }
.study-figure[data-tone="found"] .study-figure-value { color: var(--green); }

/* A warning here is a note in the margin, not an alarm. */
.study-note {
  border-left: 3px solid var(--gold);
  background: rgba(184, 157, 91, 0.10);
  padding: 0.55rem 0.9rem;
  margin: 0.6rem 0;
  font-size: 0.95rem;
  color: var(--ink-soft);
}
.study-errors {
  margin: 0.6rem 0;
  border: var(--rule-thin) solid var(--silver);
  background: var(--parchment-warm);
  padding: 0.4rem 0.9rem;
}
.study-errors summary {
  cursor: pointer;
  font-size: 0.95rem;
  color: var(--silver-deep);
  padding: 0.25rem 0;
}
.study-errors .data-table { background: var(--parchment); margin: 0.5rem 0; }

.study-table td { vertical-align: top; }
.study-tracked {
  display: inline-block;
  margin-top: 2px;
  font-family: var(--font-display);
  font-size: 0.52rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 1px 5px;
  color: var(--silver-deep);
  border: 0.4px solid var(--silver);
}
.study-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem;
  margin-top: 1rem;
}

@media (max-width: 720px) {
  .study-summary { grid-template-columns: repeat(2, 1fr); gap: 0.7rem 0; }
  .study-figure:nth-child(3) { padding-left: 0; border-left: none; }
  .trial-head { flex-direction: column; align-items: stretch; }
}

/* A rule that separates two halves of a page, rather than framing the page. */
.gold-rule.section-divider { margin: 2.6rem 0 0.4rem; }

/* The disclosure triangle on the collapsible panels. The literal ▸ in the three
   rules above was mangled to a control character at some point and rendered as
   a stray "B8"; restate it as an escape, which cannot be re-mangled. */
.column-guide summary::before,
.counterparties-panel summary::before,
.howto-toc summary::before { content: "\25B8"; }

/* ============================================================================
   THE PHONE EDITION
   ----------------------------------------------------------------------------
   This department is consulted standing at a credit-union counter, one-handed,
   on a 412px screen. Nothing below changes the desktop stationery — every rule
   is inside a max-width query — but the ledger is re-set for the hand:

     · a nine-column table becomes a stack of labelled records, because a
       sideways scroller hides precisely the controls you came for;
     · thirteen departments become one scrolling rail instead of six rows;
     · anything you tap is at least a finger wide;
     · every field is 16px, below which Chrome zooms the page on focus.
   ============================================================================ */

/* ---------------------------------------------------------------- tables ---
   `.stacks` is applied by labelTables() in app.js, which also copies each
   column heading onto its cells as `data-label`. A table that is genuinely a
   grid to compare across keeps `keep-table` and scrolls in place instead. */

@media (max-width: 720px) {

  table.stacks { display: block; width: 100%; }
  table.stacks thead { display: none; }
  table.stacks tbody { display: block; }

  /* Flex, not block, so a record can lead with the thing that names it. */
  table.stacks tr {
    display: flex;
    flex-direction: column;
    padding: 0.4rem 0 0.5rem;
    border-bottom: 0.6px solid var(--gold);
  }
  table.stacks tr:last-child { border-bottom: none; }
  table.stacks tbody tr:nth-child(even) { background: rgba(220, 200, 160, 0.15); }
  table.stacks tbody tr:nth-child(even) td { background: none; }

  /* The heading is positioned, not laid out, so the cell's own contents stay
     in ordinary inline flow. A grid or flex cell would split "Housing Fund
     <span>*8642-S03</span>" into two separately-placed boxes. */
  table.stacks td {
    display: block;
    position: relative;
    min-height: 1.85rem;
    padding: 0.3rem 0.95rem 0.3rem 8rem;
    border-bottom: none;
    text-align: left !important;
    overflow-wrap: anywhere;
  }
  table.stacks td::before {
    content: attr(data-label);
    position: absolute;
    left: 0.95rem;
    top: 0.42rem;
    width: 6.6rem;
    font-family: var(--font-display);
    font-size: 0.55rem;
    line-height: 1.35;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--silver-deep);
  }
  /* An unlabelled cell is an action or a total — it takes the whole width. */
  table.stacks td:not([data-label]),
  table.stacks td[data-label=""] { padding-left: 0.95rem; }
  table.stacks td:not([data-label])::before,
  table.stacks td[data-label=""]::before { content: none; }
  /* A cell with nothing in it would otherwise leave a band of dead space. */
  table.stacks td:empty { display: none; }

  /* Prose needs the width of the page, so its heading sits above it. */
  table.stacks td[data-label="Description"],
  .guide-table.stacks td,
  .howto-matrix.stacks td,
  .howto-table.stacks td {
    padding-left: 0.95rem;
    padding-top: 1.5rem;
  }
  table.stacks td[data-label="Description"]::before,
  .guide-table.stacks td::before,
  .howto-matrix.stacks td::before,
  .howto-table.stacks td::before { width: auto; top: 0.32rem; }
  /* …but the first column of a prose table is its subject: state it plainly. */
  .guide-table.stacks td:first-child,
  .howto-matrix.stacks td:first-child,
  .howto-table.stacks td:first-child {
    padding-top: 0.7rem;
    font-size: 1.02rem;
    color: var(--ink);
  }
  .guide-table.stacks td:first-child::before,
  .howto-matrix.stacks td:first-child::before,
  .howto-table.stacks td:first-child::before { content: none; }
  .howto-matrix.stacks td.figures { white-space: normal; }

  /* Every stacked record is one entry — don't let them run together. */
  .rules-table-wrap, .ledger-table-wrap, .contracts-table-wrap { margin-top: 0.8rem; }

  /* A table that stays a table scrolls inside itself, never the page. */
  table.keep-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  /* ---- The allocation plan: the department names the line, the figure is
          what you read out to the teller. ---- */
  .allocation-table td[data-label="Department"],
  .trial-table.stacks td[data-label="Department"] {
    padding: 0.6rem 0.95rem 0.5rem;
    margin-bottom: 0.3rem;
    background: rgba(184, 157, 91, 0.14);
    border-bottom: 0.4px solid var(--gold);
    font-size: 1.05rem;
  }
  .allocation-table td[data-label="Department"]::before,
  .trial-table.stacks td[data-label="Department"]::before { content: none; }
  .allocation-table tr, .trial-table.stacks tr { padding-top: 0; }

  .allocation-table td[data-label="Amount"],
  .allocation-table td[data-label="Would receive"],
  .trial-table.stacks td[data-label="Would receive"] { min-height: 3rem; }
  .allocation-table .alloc-amount-input {
    width: 9rem;
    min-height: 44px;
    font-size: 16px;
  }
  .alloc-zero-amount {
    min-height: 44px;
    min-width: 5.5rem;
    font-size: 1rem;
    text-align: left;
  }
  table.stacks .allocation-total-row,
  table.stacks .trial-unspent {
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.8rem;
    padding: 0.7rem 0.95rem;
  }
  table.stacks .allocation-total-row td,
  table.stacks .trial-unspent td { padding: 0; min-height: 0; }
  /* A total is a sum of the whole table, not a field of a record — its own
     words name it, so no column heading goes behind the figure. */
  table.stacks .allocation-total-row td::before,
  table.stacks .trial-unspent td::before { content: none; }
  /* "TOTAL OF A $2,500.00 PAYCHECK" is long enough to squeeze the figure it
     announces; the words give way first, never the money. */
  table.stacks .allocation-total-row td:last-child,
  table.stacks .trial-unspent td:last-child { flex: 0 0 auto; white-space: nowrap; }

  /* ---- Statutes: the department names the record, so it leads. ---- */
  .rules-table.stacks tr { padding: 0 0 0.5rem; }
  .rules-table.stacks td:nth-child(2) {
    order: -1;
    padding: 0.65rem 0.95rem 0.55rem;
    margin-bottom: 0.35rem;
    background: rgba(184, 157, 91, 0.14);
    border-bottom: 0.4px solid var(--gold);
    font-size: 1.08rem;
    font-weight: 600;
  }
  .rules-table.stacks td:nth-child(2)::before { content: none; }
  .rules-table.stacks td:nth-child(2) .acct-sub { font-size: 0.78rem; font-weight: 400; }

  /* Reorder is the one control a sideways scroller hid completely. */
  .rules-table.stacks td.reorder-cell { padding-top: 0.15rem; padding-bottom: 0.4rem; }
  .rules-table.stacks .reorder-btn {
    min-width: 3.4rem;
    min-height: 44px;
    font-size: 1rem;
    margin-right: 0.4rem;
  }
  .rules-table .num-input, .rules-table.stacks .num-input {
    max-width: 8.5rem;
    width: 8.5rem;
    min-height: 44px;
  }
  .rules-table.stacks .field-cash .cash-toggle {
    min-height: 44px;
    font-size: 0.62rem;
  }
  .rules-table.stacks .denom-input {
    width: 11rem;
    max-width: 11rem;
    min-height: 44px;
    margin-top: 0.35rem;
  }
  .rules-table.stacks .row-saved { padding-left: 0.95rem; }

  /* ---- Bank Feed: the direction word is a control, so make it look tappable
          and make it big enough to hit. ---- */
  .feed-dir-flip {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 0.85rem;
    font-size: 0.62rem;
  }
  .feed-dir-flip::after {
    content: " \21C4";
    margin-left: 0.45rem;
    opacity: 0.65;
  }
  .feed-status { display: inline-flex; align-items: center; min-height: 32px; padding: 0 0.7rem; }

  /* ---- Action cells: a row's buttons, side by side, thumb-sized. ---- */
  table.stacks td:not([data-label]) .btn,
  table.stacks td[data-label=""] .btn { margin: 0.3rem 0.4rem 0.1rem 0; }
}

/* ------------------------------------------------------------------ nav ---
   Thirteen routes wrapped to six centred rows ate a quarter of the screen on
   every page. One rail, one row: the tabs of a ledger book. */

@media (max-width: 860px) {
  .dept-nav {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    margin: 0.35rem auto 0;
    padding: 0 0.6rem;
    /* Fade the trailing edge so it reads as "there is more this way". */
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent);
            mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent);
  }
  .dept-nav::-webkit-scrollbar { display: none; }
  .dept-nav a {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    min-height: 44px;
    scroll-snap-align: center;
    padding: 0.5rem 0.8rem;
    font-size: 0.66rem;
    letter-spacing: 0.14em;
  }
  .dept-nav a + a::before { left: -0.1rem; }
  .dept-nav a.active::after { left: 0.8rem; right: 0.8rem; bottom: 0.45rem; }
}

/* -------------------------------------------------------------- letterhead
   The seal is dropped below 640px already; here the titles give back the
   vertical room, and Sign Out stops landing on top of the eyebrow. */

@media (max-width: 640px) {
  .masthead { padding-top: 3rem; }
  .masthead-logout {
    top: 0.5rem;
    right: 0.6rem;
    font-size: 0.6rem;
    letter-spacing: 0.16em;
    padding: 0.5rem 0.75rem;
    /* Sign Out is the one control in the letterhead — give it a thumb. */
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .masthead-inner { margin-bottom: 0.9rem; }
  .dept-eyebrow { font-size: 0.47rem; letter-spacing: 0.16em; margin-bottom: 0.45rem; }
  /* Small enough that the department's name still breaks where the <br> says
     it should — two lines, not three. */
  .dept-title { font-size: clamp(1.1rem, 5.4vw, 1.45rem); letter-spacing: 0.02em; }
  .dept-tagline { font-size: 0.85rem; }
  .dept-tagline span { font-size: 0.75rem; }
  .vault-main { margin: 1.4rem auto 2.5rem; }
}

/* ----------------------------------------------------------- typography ---
   Cinzel small caps at 0.18em tracking is a wide setting. It still has to be
   a heading at 412px, so it gives back tracking before it gives back size. */

@media (max-width: 560px) {
  .section-title {
    font-size: 0.92rem;
    letter-spacing: 0.1em;
    gap: 0.7rem;
    margin: 1.9rem 0 0.9rem;
  }
  .page-toolbar .section-title { margin: 1.1rem 0 0.7rem; }
  .subsection-title { font-size: 0.76rem; letter-spacing: 0.14em; }
  .modal-title { font-size: 0.84rem; letter-spacing: 0.11em; }
  .footer-mark { font-size: 0.5rem; letter-spacing: 0.16em; }
  .prose-note { font-size: 0.95rem; padding: 0.3rem 0.85rem; }
  /* A long token — an env var, a shell line — must break rather than push. */
  code, .howto code, .column-guide code { overflow-wrap: anywhere; }
  .howto-glossary { grid-template-columns: 1fr; gap: 0.1rem; }
  .howto-glossary dd { margin-bottom: 0.6rem; }
}

/* ------------------------------------------------------------ the thumb ---
   44px is the smallest thing a finger reliably hits. 16px is the largest text
   Chrome will zoom the page for on focus — so fields are exactly 16px. */

@media (max-width: 720px) {
  .btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 1.05rem;
  }
  .status-pill, .back-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.4rem 0.8rem;
  }
  .back-link { padding-left: 0; }
  .reorder-btn { min-height: 44px; min-width: 44px; }

  input[type="checkbox"], input[type="radio"] {
    width: 22px;
    height: 22px;
    accent-color: var(--oxblood);
  }
  .cash-toggle, .study-opt, .seg-toggle label {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  select, textarea,
  .text-input, .num-input, .setup-input, .denom-input,
  .study-num, .trial-amount, .alloc-amount-input { font-size: 16px; }
  /* A bare <select> — the counterparty's Lender/Borrower, say — carries no
     class of its own, so name the element as well as the classes or it stays
     a 21px sliver. */
  .field input, .field select, .field textarea, select,
  .text-input, .num-input, .setup-input,
  .recurring-table-wrap .text-input { min-height: 44px; }
  .text-input, .num-input, .recurring-table-wrap .text-input { padding: 0.45rem 0.55rem; }
  .study-num { max-width: 4.5rem; }
  /* A textarea sized by rows, not by min-height — but still 16px, or Chrome
     zooms the page the moment you tap into it to paste an alert. */
  .bankfeed-paste textarea, textarea.text-input { min-height: 0; font-size: 16px; }

  /* An empty label wrapped around a tick box exists only to be a target. */
  .check-hit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    cursor: pointer;
  }

  /* A disclosure heading is a control — the whole strip should be the target. */
  .column-guide summary, .counterparties-panel summary, .howto-toc summary {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
  /* A table of contents is a list of destinations you tap, not prose. Space
     the entries so a fingertip lands on the one it aimed at. (Links inside a
     sentence are left alone — padding them would break the line.) */
  .howto-toc li { margin-bottom: 0; }
  .howto-toc ol a { display: block; padding: 0.55rem 0; }

  /* Rows of controls wrap instead of pushing the page sideways. */
  .cp-add-row, .bankfeed-paste-actions, .import-zone,
  .trial-controls, .study-actions, .receipts-upload-buttons,
  .page-toolbar > div { flex-wrap: wrap; gap: 0.5rem; }
  .cp-add-row .text-input { max-width: 100%; }
  /* Narrow enough that "$ [amount] [Try it]" still reads as one line. */
  .trial-amount { max-width: 9rem; }
  .import-zone { padding: 1rem 1rem; }
}

/* ---------------------------------------------------------------- modals ---
   A form must fit above the keyboard, scroll inside itself, and never strand
   its Save button below the fold. */

@media (max-width: 720px) {
  .modal-backdrop {
    align-items: flex-start;
    padding: 0.75rem;
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
  }
  .modal {
    padding: 1.3rem 1.1rem 0;
    max-height: calc(100vh - 1.5rem);
    max-height: calc(100dvh - 1.5rem);
  }
  .modal-subtitle { margin-bottom: 1.1rem; padding-bottom: 0.8rem; }
  /* Confirm and cancel ride along at the foot of the sheet. */
  .modal-actions {
    position: sticky;
    bottom: 0;
    margin: 1.2rem -1.1rem 0;
    padding: 0.85rem 1.1rem calc(0.85rem + env(safe-area-inset-bottom));
    background: var(--parchment);
    border-top: 0.5px solid var(--gold);
    justify-content: stretch;
  }
  .modal-actions .btn { flex: 1 1 0; }
}

/* ---------------------------------------------------- the hall, condensed ---
   Thirteen departments down one column is a long walk. Tighten the card
   without taking away the figure you came to read. */

@media (max-width: 560px) {
  .account-grid { gap: 0.7rem; }
  .account-card { padding: 0.85rem 0.95rem 0.8rem; }
  .account-name { font-size: 1.06rem; }
  .account-number { margin-bottom: 0.6rem; }
  .account-balance-amount { font-size: 1.15rem; }
  .cycle-banner { padding: 1.1rem 1rem 0.9rem; }
  .paystub-meta { padding: 1rem 1.1rem; gap: 1rem; }
  .setup-field { padding: 0.75rem 0.85rem; }
  .warehouse-photo-tile { width: 92px; height: 92px; }
  /* Touch has no hover, so a delete that only appears on hover never appears. */
  .warehouse-photo-del { opacity: 1; width: 30px; height: 30px; line-height: 26px; }
}

/* ============================================================================
   FINDING AID — the filter bar at the head of a register

   A bound ledger has a card at the front telling you what is inside and how
   to get at one entry; that is what this is. The search box stays out in the
   open because it is the fast path at a teller's window. Everything else
   folds into one line whose summary NAMES the filters that are on, so a
   narrowed view can never be mistaken for the whole file — and the tally
   underneath states the counts in full.
   ============================================================================ */

.filter-bar { margin: 0.5rem 0 0; }

.filter-search { display: flex; gap: 0.5rem; align-items: center; }
.filter-search .filter-q { flex: 1 1 auto; }
.filter-search .filter-clear { flex: 0 0 auto; }

.filter-panel { border-bottom: var(--rule-thin) solid var(--ink-soft); }
.filter-panel > summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0.5rem 0;
  font-family: var(--font-display);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  list-style: none;
  cursor: pointer;
}
.filter-panel > summary::-webkit-details-marker { display: none; }
.filter-panel > summary::before {
  content: "\25B8";
  color: var(--gold);
  transition: transform 0.15s ease;
}
.filter-panel[open] > summary::before { transform: rotate(90deg); }
.filter-panel-label { color: var(--oxblood); }

.filter-chips { display: inline-flex; gap: 0.35rem; flex-wrap: wrap; }
.filter-chips.muted { font-family: var(--font-body); font-size: 0.85rem; letter-spacing: 0; text-transform: none; }
.filter-chip {
  font-family: var(--font-body);
  font-size: 0.85rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  background: rgba(184, 157, 91, 0.22);
  border: var(--rule-thin) solid var(--gold);
  padding: 0 0.4rem;
}

.filter-groups { display: grid; gap: 0.9rem; padding: 0.5rem 0 1rem; }
.filter-legend {
  font-family: var(--font-display);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--silver-deep);
  margin-bottom: 0.35rem;
}
.filter-pills { display: flex; gap: 0.4rem; flex-wrap: wrap; }
button.status-pill {
  appearance: none;
  -webkit-appearance: none;
  border-radius: 0;
  line-height: 1.25;
  cursor: pointer;
}
.filter-dates { display: flex; gap: 0.7rem; flex-wrap: wrap; margin-top: 0.5rem; }
.filter-dates label { display: flex; align-items: center; gap: 0.4rem; }
.filter-dates label span {
  font-family: var(--font-display);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--silver-deep);
}
.filter-dates .text-input { width: auto; }
.filter-group select.text-input { max-width: 24rem; }

/* The honest line: what you are looking at, and how much there really is. */
.filter-tally { padding: 0.6rem 0 0.1rem; color: var(--ink-soft); font-size: 0.95rem; }
.filter-tally:empty { padding: 0; }
.tally-label {
  font-family: var(--font-display);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green);
  margin-right: 0.45rem;
}
.filter-tally .figures { color: var(--ink); }

/* The mobile block below gives every .btn `display: inline-flex`, which would
   otherwise beat the browser's own [hidden] rule and leave Clear on screen
   when there is nothing to clear. */
.filter-search .filter-clear[hidden] { display: none; }

/* The ledger's own three tones, on the figure itself: money arriving is
   racing green, money leaving is oxblood, a transfer between the user's own
   departments is neither. The Direction filter draws the line in the same
   place, so the pill you tapped and the colour on the row always agree. */
.data-table .figures.amount.amount-in   { color: var(--green); }
.data-table .figures.amount.amount-out  { color: var(--oxblood); }
.data-table .figures.amount.amount-move { color: var(--ink-soft); }

/* A date is one word. Don't let a squeezed column break it in half. */
@media (min-width: 721px) {
  .ledger-table th:first-child, .ledger-table td:first-child { white-space: nowrap; }
}

.filter-more { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; padding-top: 0.7rem; }
.filter-more:empty { padding: 0; }
.filter-more .muted { font-size: 0.9rem; }

@media (max-width: 720px) {
  .filter-panel > summary { min-height: 44px; }
  .filter-dates { flex-direction: column; align-items: stretch; gap: 0.45rem; }
  .filter-dates label { justify-content: space-between; }
  .filter-dates .text-input { width: 60%; }
  .filter-group select.text-input { max-width: 100%; }
  .filter-more { padding-bottom: 0.4rem; }

  /* ---------------------------------------------------- the ledger entry ---
     Seven fields stacked one per line made a single entry about a third of a
     metre tall, so even a filtered page was a twenty-screen scroll. The short
     fields pair up two to a row — the heading rides above its value instead
     of beside it — and the same entry, with nothing left out, reads in a
     third of the height. */
  .ledger-table.stacks tr {
    flex-flow: row wrap;
    align-items: flex-start;
    padding: 0.3rem 0 0.5rem;
  }
  .ledger-table.stacks td {
    flex: 0 0 50%;
    min-height: 0;
    padding: 0.8rem 0.95rem 0.1rem;
  }
  .ledger-table.stacks td::before { top: 0.12rem; width: auto; }
  .ledger-table.stacks td[data-label="Description"] {
    flex: 1 0 100%;
    padding: 0.8rem 0.95rem 0.1rem;
  }
  .ledger-table.stacks td[data-label="Description"]::before { top: 0.12rem; }
  .ledger-table.stacks td[data-label="Amount"] { font-size: 1.05rem; }
  /* Set tighter than running prose — these are fields, not sentences. */
  .ledger-table.stacks td { line-height: 1.3; }
  /* The account number rides on the same line as the department it belongs
     to, rather than costing the entry a line of its own. */
  .ledger-table.stacks td[data-label="From"] .figures,
  .ledger-table.stacks td[data-label="To"] .figures { font-size: 0.78rem; }
  /* The Void button sits opposite the figure it would strike out. */
  .ledger-table.stacks td:not([data-label]) {
    text-align: right !important;
    padding: 0.3rem 0.95rem 0;
  }

  /* ------------------------------------------------------- a feed alert ---
     The same treatment for the Bank Feed, whose rows carry the same seven
     fields. The controls — the account picker, the direction word, Post and
     Dismiss — stay full width, because those are what you came to tap. */
  .feed-table.stacks tr {
    flex-flow: row wrap;
    align-items: flex-start;
    padding: 0.3rem 0 0.5rem;
  }
  .feed-table.stacks td {
    flex: 1 0 100%;
    min-height: 0;
    line-height: 1.3;
    padding: 0.8rem 0.95rem 0.1rem;
  }
  .feed-table.stacks td::before { top: 0.12rem; width: auto; }
  .feed-table.stacks td[data-label="Date"],
  .feed-table.stacks td[data-label="Amount"],
  .feed-table.stacks td[data-label="Status"] { flex: 0 0 50%; }
  /* An account still waiting to be identified is a dropdown, and needs the
     width; one that is already known is just a name, and can share a line. */
  .feed-table.stacks td[data-label="Account"]:not(:has(select)),
  .feed-table.stacks td[data-label="Direction"]:not(:has(select)) { flex: 0 0 50%; }
  .feed-table.stacks td[data-label="Amount"] { font-size: 1.05rem; }
}