/* The log book: the counter's daily cash close-out and the admin's deposit
   register. Sorts after 60_counter so it can lean on the counter layout, and
   before 70_print so none of it reaches a thermal receipt.

   Runs inside body.admin on both sides, so the --a-* tokens, a-btn, a-stat,
   a-panel, a-pill and a-table all apply; this only adds what is new. */

/* ── Stage pills ──────────────────────────────────── */
/* Open → counted → deposited, the one vocabulary both sides read. */
.a-pill--stage-open      { background: var(--a-warn-bg); color: var(--a-warn); }
.a-pill--stage-counted   { background: var(--a-soft); color: var(--a-accent-d); }
.a-pill--stage-deposited { background: var(--a-accent-d); color: #fff; }

/* Payment methods, so a card says how it was paid at a glance. */
.a-pill--pay-cash    { background: var(--a-soft); color: var(--a-accent-d); }
.a-pill--pay-gcash,
.a-pill--pay-paymaya,
.a-pill--pay-others  { background: #EEF1FA; color: #3B4A7A; }

/* ── Day picker ───────────────────────────────────── */
.lb-days { display: flex; flex-wrap: wrap; gap: 8px; }
.lb-days a { display: inline-flex; align-items: center; gap: 6px; }
.lb-days__dot { font-size: 9px; line-height: 1; }
.lb-days__dot--counted { color: var(--a-accent); }
.lb-days__dot--banked { color: var(--a-accent-d); }
.lb-days a.is-active .lb-days__dot { color: #fff; }

/* ── The day's figures ────────────────────────────── */
/* What is left to bank, so it reads as a total rather than another line item. */
.lb-stat--hand {
  background: var(--a-accent-d);
  border-color: var(--a-accent-d);
}
.lb-stat--hand .a-stat__value { color: #fff; }
.lb-stat--hand .a-stat__label { color: rgba(255,255,255,.78); }

/* A method nobody used still gets a tile, so the row reads the same every day. */
.lb-stat--nil .a-stat__value { color: var(--a-muted); font-weight: 600; }

/* Two counts in one tile, side by side with each one's name under it, so a
   three-digit day still fits a 160px card without the pair wrapping into each
   other. The names are the key, small and muted under the figures. */
.lb-supplies { display: flex; gap: 12px; }
.lb-supplies > span { display: flex; flex-direction: column; min-width: 0; }
.lb-supplies > span + span { padding-left: 12px; border-left: 1px solid var(--a-line); }
.lb-supplies small { font-size: 11px; font-weight: 600; line-height: 1.3; color: var(--a-muted); }

.lb-note { margin: 4px 0 0; }

/* ── The envelope ─────────────────────────────────── */
/* The arithmetic staff write on the front of the envelope, in the order they
   would do it by hand. Ruled like a column of figures, because that is what it
   is — the totals pick themselves out by weight and rule, not by colour. */
.lb-ladder { margin: 14px 0 0; font-variant-numeric: tabular-nums; }
.lb-ladder__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 7px 0; font-size: 14.5px;
}
.lb-ladder__row dt { color: var(--a-muted); }
.lb-ladder__row dd { margin: 0; font-weight: 600; }
.lb-ladder__row--nil dd { color: var(--a-muted); font-weight: 500; }
.lb-ladder__row--sum { border-top: 1px solid var(--a-line); }
.lb-ladder__row--sum dt, .lb-ladder__row--count dt { color: var(--a-ink); }
.lb-ladder__row--sum dd, .lb-ladder__row--count dd { font-weight: 700; }
/* The count is what somebody physically found, so it is what the eye lands on. */
.lb-ladder__row--count dd { font-size: 17px; }
.lb-ladder__row--total {
  border-top: 2px solid var(--a-accent-d); margin-top: 2px;
  font-size: 16px;
}
.lb-ladder__row--total dt { color: var(--a-ink); font-weight: 600; }
.lb-ladder__row--total dd { font-weight: 700; color: var(--a-accent-d); }
/* Short or over. The word carries it — the colour only seconds it, so this
   still reads on a printout and to anyone who cannot tell the two apart. */
.lb-ladder__row--gap dd { color: var(--a-muted); font-weight: 600; }
.lb-ladder__row--gap.is-off dd,
.lb-ladder__row--sum.is-off dd { color: var(--a-warn); }
.lb-ladder__note { margin: 8px 0 0; font-size: 14px; }

/* What actually came out of the envelope, so the figures can be checked. */
.lb-payouts { list-style: none; margin: 12px 0 0; padding: 12px 0 0; border-top: 1px dashed var(--a-line); }
.lb-payouts li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 4px 0; font-size: 13.5px; font-variant-numeric: tabular-nums;
}

/* ── Close-out steps ──────────────────────────────── */
.lb-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.lb-step {
  padding: 14px 16px 16px;
  border: 1px solid var(--a-line);
  border-left: 4px solid var(--a-line);
  border-radius: 8px;
  background: #FBFDFC;
}
.lb-step.is-now  { border-left-color: var(--a-accent); background: var(--a-surface); }
.lb-step.is-done { border-left-color: var(--a-accent-d); }
/* Stage two before stage one is possible: visibly not yet its turn. */
.lb-step.is-waiting { opacity: .62; }

.lb-step__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.lb-step__head h3 { margin: 0 0 6px; font-size: 15px; font-weight: 700; }
.lb-step__stamp { font-size: 13px; color: var(--a-muted); }
.lb-step__sum { margin: 0 0 12px; font-size: 14.5px; }
.lb-step .c-notice { margin: 0 0 12px; }

.lb-step--done { border-left-color: var(--a-accent-d); }
.lb-step--done + .lb-step--done { margin-top: 16px; }
/* The line under a sealed day ("₱X moved into the petty cash fund") sits outside
   the step box, so it needs its own gap from it. */
.lb-step + .lb-step__sum { margin-top: 14px; }
.lb-moved {
  margin: 14px 0 0; padding: 12px 16px;
  background: var(--a-soft); border-left: 4px solid var(--a-accent-d); border-radius: 8px;
  font-size: 16px; color: var(--a-ink);
}
.lb-moved strong { font-size: 18px; color: var(--a-accent-d); }

.lb-seal .a-fields { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.lb-seal .a-form__actions { margin-top: 14px; padding-top: 14px; }
.lb-seal .hint { display: block; margin-top: 4px; }
.lb-seal + .c-hint { margin-top: 14px; }

/* ── The bank run ─────────────────────────────────── */
/* The petty cash fund heads the form in large type: sealing a day moves its
   cash there, so it is where the money for the bank is. The line under it says
   what the fund keeps once the deposit goes. */
.lb-fund-card {
  padding: 16px 18px; margin-bottom: 16px;
  background: var(--a-soft); border-left: 5px solid var(--a-accent-d); border-radius: 10px;
}
.lb-fund-card__label {
  font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--a-accent-d);
}
.lb-fund-card__value { margin-top: 2px; font-size: 32px; font-weight: 700; line-height: 1.15; color: var(--a-ink); }
.lb-fund-card__after { margin: 6px 0 0; font-size: 14.5px; color: var(--a-ink); }
.lb-fund-card__after.is-over { color: var(--a-bad); font-weight: 600; }

.lb-bank-run .lb-pending { border: 1px solid var(--a-line); border-radius: 8px; }
.lb-bank-run .lb-pending li { padding: 10px 14px; }
.lb-bank-run label { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.lb-bank-run input[type="checkbox"] { width: 18px; height: 18px; }
.lb-bank-run .a-fields { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-top: 16px; }
.lb-bank-run .a-field .hint { display: block; margin: 4px 0 0; }
.lb-bank-run .lb-run-note { margin-top: 12px; }
.lb-bank-run .a-form__actions { margin-top: 14px; padding-top: 14px; }

/* What is being carried, ruled off the ticks above it the way the ladder's
   totals are ruled off their lines. */
.lb-run-sum {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 11px 14px; margin-bottom: 4px;
  border: 1px solid var(--a-line); border-top: 0; border-radius: 0 0 8px 8px;
  background: var(--a-soft);
  font-variant-numeric: tabular-nums;
}
.lb-run-sum dt { font-weight: 600; }
.lb-run-sum dd { margin: 0; font-size: 17px; font-weight: 700; color: var(--a-accent-d); }

.lb-run-title { margin: 20px 0 12px; font-size: 15px; font-weight: 700; }

/* ── Awaiting deposit ─────────────────────────────── */
.lb-pending { list-style: none; margin: 0; padding: 0; }
.lb-pending li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 18px; border-bottom: 1px solid var(--a-line);
  font-variant-numeric: tabular-nums;
}
.lb-pending li:last-child { border-bottom: 0; }

/* ── The day's orders ─────────────────────────────── */
.lb-daybar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; margin-bottom: 12px;
  background: var(--a-soft); border-radius: 9px;
  font-size: 14.5px; font-variant-numeric: tabular-nums;
}
.lb-daybar__mix { display: flex; gap: 14px; flex-wrap: wrap; color: var(--a-accent-d); }

.lb-orders { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
/* Two up once there is room; one card per row on a counter tablet. */
@media (min-width: 720px) { .lb-orders { grid-template-columns: 1fr 1fr; } }

.lb-order {
  background: var(--a-surface); border: 1px solid var(--a-line); border-radius: 10px;
  padding: 14px 16px;
}
.lb-order__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.lb-order__id { display: flex; align-items: baseline; gap: 10px; }
.lb-order__no { font-weight: 700; font-size: 15px; text-decoration: none; color: var(--a-accent-d); }
.lb-order__time { font-size: 13px; color: var(--a-muted); font-variant-numeric: tabular-nums; }
.lb-order__pills { display: flex; gap: 6px; flex-wrap: wrap; }
.lb-order__who { margin-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; font-size: 14.5px; }
.lb-order__who .muted { font-size: 13.5px; }

.lb-lines { list-style: none; margin: 10px 0 0; padding: 10px 0 0; border-top: 1px dashed var(--a-line); }
.lb-lines li {
  display: grid; grid-template-columns: 1fr auto auto; gap: 10px;
  padding: 3px 0; font-size: 13.5px; font-variant-numeric: tabular-nums;
}
.lb-lines__amt { min-width: 62px; text-align: right; }
.lb-lines__qty { min-width: 34px; text-align: right; }

.lb-order__foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--a-line);
  font-size: 15px; font-variant-numeric: tabular-nums;
}

/* ── Admin register ───────────────────────────────── */
/* An envelope reads across thirteen columns — the day's takings, both halves of
   what came out of it, expected against counted, and where it went. At the
   table's usual 18px of side padding that comes to about 1340px, which overflows
   a 1280px window by a hair and leaves the Reopen button off the end.
   Halving the padding buys back some 200px across thirteen columns and the whole
   row fits, which is worth more here than roomier cells: this table is read by
   scanning across one envelope, so nothing may sit off-screen.
   A pinned actions column was the other way to do it, and it is worse — a sticky
   cell sits *over* whatever scrolls beneath it, so it covered the Banked
   column. */
.lb-register .a-table th,
.lb-register .a-table td { padding-left: 10px; padding-right: 10px; }
/* The bank run's date and slip reference, which is text rather than a figure —
   it needs its own width, or the nowrap number columns either side squeeze it
   until the reference wraps a character at a time. */
.lb-register .lb-run-col { white-space: nowrap; }

/* The log book is dressed as the yellow ruled notebook the shop kept it in
   before it was an app: pale ruled paper, blue rules, a red margin, and the
   glued binding along the top. `.lb-paper` is the pad itself, worn by the
   register and by the day page's envelope; the cards and bars around them stay
   the admin's own, so the notebook reads as the book and the rest as the tool
   around it. */
.lb-paper {
  --lb-paper:     #FFF9D6;
  --lb-paper-alt: #FCF0B4;
  --lb-rule:      #B9CFE6;
  --lb-margin:    #E39A9A;
  --lb-binding:   #F3DE7C;
  background: var(--lb-paper);
  border-color: #E6D58C;
  box-shadow: 0 1px 0 #EADB95, 0 3px 0 -1px #FBF3C8, 0 4px 0 -1px #E6D58C;
}
/* The top of the pad: the glued binding, torn off along a perforation. */
.lb-paper .a-panel__head {
  background: var(--lb-binding);
  border-bottom: 2px dashed #D9C165;
}
.lb-paper .a-panel__title { font-family: var(--font-serif); font-style: italic; font-size: 19px; }
.lb-paper .a-panel__title small { font-family: var(--font-sans); font-style: normal; color: #6E6436; }
.lb-register .a-table th,
.lb-register .a-table td { border-bottom-color: var(--lb-rule); }
.lb-register .a-table thead th {
  background: var(--lb-paper); color: #5C6E86;
  border-bottom: 2px solid var(--lb-rule);
}
.lb-register .a-table tbody tr:nth-child(even) { background: var(--lb-paper-alt); }
.lb-register .a-table tbody tr:hover { background: #F7E68E; }
/* The margin line: drawn on the day column's right edge, top to bottom. */
.lb-register .a-table th:first-child,
.lb-register .a-table td:first-child { border-right: 3px double var(--lb-margin); }
.lb-register .a-table tbody tr:last-child td { border-bottom: 1px solid var(--lb-rule); }
.lb-register .a-table tfoot th {
  background: var(--lb-paper-alt);
  border-top: 3px double var(--lb-rule);
}
.lb-register .a-table .muted,
.lb-register .a-empty { color: #7A7150; }
.lb-register .a-entered-note { padding-bottom: 12px; }

/* The day column, written the way a diary heads a page: the date's number large
   in the brochure's italic, weekday over month beside it. Its spans are in
   reading order in the markup ("Thu 10 Sep"), and the grid places them. */
.lb-register .lb-day { min-width: 150px; padding-top: 7px; padding-bottom: 7px; position: relative; cursor: pointer; }
/* The whole cell opens the day, not just the date: the link's ::after is
   stretched over the cell, so the sealed note under the date is a target too
   and there is still exactly one link (one tab stop, one thing a reader says). */
.lb-date::after { content: ""; position: absolute; inset: 0; }
.lb-date:focus-visible { outline: none; }
.lb-date:focus-visible::after { outline: 2px solid var(--a-accent); outline-offset: -3px; }
.lb-register .a-table tbody .lb-day:hover { background: rgba(47, 74, 107, .07); }
.lb-date {
  display: inline-block; vertical-align: middle;
  color: var(--a-ink); text-decoration: none;
}
.lb-date strong {
  display: inline-grid;
  grid-template-columns: auto auto;
  grid-template-areas: "num dow" "num mon";
  column-gap: 7px; align-items: center;
  font-weight: 400;
}
.lb-date__num {
  grid-area: num; min-width: 1.3em; text-align: right;
  font-family: var(--font-serif); font-style: italic; font-weight: 700;
  font-size: 26px; line-height: 1; color: #2F4A6B;
}
.lb-date__dow {
  grid-area: dow; align-self: end;
  font-size: 10.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
  line-height: 1.15; color: #5C6E86;
}
.lb-date__mon {
  grid-area: mon; align-self: start;
  font-size: 12px; line-height: 1.15; color: #7A7150;
}
/* Sunday in the margin's red, as a printed diary marks it. */
.lb-date--sun .lb-date__num,
.lb-date--sun .lb-date__dow { color: #B4474A; }
.lb-day:hover .lb-date__num { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.lb-day .a-entered { margin-left: 4px; vertical-align: middle; }

/* Who sealed it and when, written small under the date like an initialled
   note — a tick rather than a word's worth of weight. */
.lb-sealed {
  margin-top: 3px;
  font-size: 11.5px; font-style: italic; line-height: 1.3; color: #7A7150;
}
.lb-sealed::before { content: "✓ "; font-style: normal; font-weight: 700; color: var(--a-accent); }

/* ── Admin day page ───────────────────────────────── */
/* The way back to the month sits over the heading, and the stage pill beside
   it, so the page says which day and how far along it is in one line. */
.lb-dayhead__back {
  display: inline-block; margin-bottom: 4px;
  font-size: 13px; font-weight: 600; color: var(--a-muted); text-decoration: none;
}
.lb-dayhead__back:hover { color: var(--a-accent-d); }
.lb-dayhead h1 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lb-dayhead h1 .a-pill { font-size: 12px; letter-spacing: .3px; }
.lb-daynav { display: flex; align-items: center; gap: 8px; align-self: center; }
.lb-daynav .so-step { width: 34px; height: 34px; font-size: 20px; }

/* The envelope and its close-out side by side. The envelope takes the wider
   share because it carries the payouts under its figures; below 900px they
   stack, envelope first. */
.lb-dayview {
  display: grid; gap: 18px; align-items: start;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  margin-bottom: 18px;
}
.lb-dayview > .a-panel { margin-bottom: 0; }
@media (max-width: 900px) { .lb-dayview { grid-template-columns: minmax(0, 1fr); } }

/* The ladder written on the pad: every line on a blue rule, the sums on the
   double rule a bookkeeper draws under a column before totalling it. */
.lb-envelope .a-panel__body { padding-top: 4px; }
.lb-envelope .lb-ladder__row {
  padding: 8px 2px; border-bottom: 1px solid var(--lb-rule);
}
.lb-envelope .lb-ladder__row dt { color: #5C5530; }
.lb-envelope .lb-ladder__row--sum { border-top: 3px double var(--lb-rule); }
.lb-envelope .lb-ladder__row--total { border-top: 2px solid var(--a-accent-d); border-bottom: 0; }
.lb-envelope .lb-payouts { border-top-color: var(--lb-rule); }
.lb-envelope .lb-payouts li:nth-child(even) { background: var(--lb-paper-alt); }
.lb-envelope .lb-payouts li { padding: 5px 6px; border-radius: 3px; }
.lb-envelope .muted { color: #7A7150; }

/* The close-out's facts read one under the other in the narrower column. */
.lb-closeout .a-def { grid-template-columns: 120px 1fr; }
.lb-closeout .a-def dd { overflow-wrap: anywhere; }

.lb-section-title { margin: 26px 0 12px; font-size: 16px; font-weight: 700; }

.lb-variance { font-size: 12.5px; color: var(--a-warn); font-weight: 600; }
.lb-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.lb-locked { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
             border-top: 1px solid var(--a-line); color: var(--a-muted); font-size: 14px; }
.lb-locked a { color: var(--a-accent); }

/* Undoing a run sits below the form that saves it, so it needs air between the
   two: the save button's own rule already draws a rule above itself, and the
   two borders would otherwise meet. */
.lb-undo { margin-top: 24px; padding-top: 18px; }

/* The photo of the bank's slip. The thumbnail is a link to the image itself,
   so "click for full size" needs no JavaScript. */
.lb-slip { display: inline-block; line-height: 0; border-radius: 8px; }
.lb-slip img {
  display: block; border: 1px solid var(--a-line); border-radius: 8px; background: #fff;
  object-fit: contain;
}
.lb-slip--thumb img { width: 54px; height: 54px; }
.lb-slip--wide img { width: 100%; max-width: 260px; max-height: 320px; }
.lb-slip:focus-visible { outline: 3px solid rgba(22,115,106,.35); outline-offset: 2px; }
.a-field .lb-slip { margin-bottom: 8px; }

/* Picking the slip photo. Two tap targets rather than one file input, because
   the machine holding this form is usually a phone. */
.lb-slip-field { margin: 18px 0 16px; }
.lb-slip-field > label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.lb-slip-field__current { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.lb-slip-field__pick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lb-slip-field__chosen { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; }
.lb-slip-field__preview {
  display: block; width: 120px; max-height: 160px; object-fit: contain;
  border: 1px solid var(--a-line); border-radius: 8px; background: #fff;
}
.lb-slip-field .c-hint { margin: 12px 0 0; }

@media (max-width: 520px) {
  .lb-slip-field__pick { grid-template-columns: 1fr; }
}

/* ── The counter's deposit history ────────────────── */
/* The list itself is the passbook (below); what is left here is the stamp the
   deposit's own page prints under its heading. */
.lb-run-card__stamp { margin: 2px 0 0; font-size: 13px; color: var(--a-muted); }
.lb-runs__more { margin: 12px 0 0; }

/* ── Takings entered by hand ──────────────────────── */
/* A day whose orders are not in the app types what it took straight onto the
   envelope. The panel sits above the day's figures, because on such a day it is
   where they come from. */
.lb-takings__title { margin: 0 0 12px; font-size: 16px; }
.lb-takings__title small { display: block; font-size: 13px; font-weight: 400; color: var(--a-muted); margin-top: 3px; }
.lb-takings__form .a-fields { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.lb-takings__figures { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 10px 0 14px; }
.lb-takings__figures div { min-width: 0; }
.lb-takings__figures dt { font-size: 12px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--a-muted); }
.lb-takings__figures dd { margin: 0; font-size: 17px; font-weight: 700; }

/* The mark carried by every row whose figures were typed — on the register, on
   the sheet, and explained once under the table. Colour is never the only cue:
   the glyph is the cue, and it has a title. */
.a-entered { font-size: 13px; color: var(--a-warn); }
.a-entered-note { margin: 10px 14px 0; }

@media (max-width: 560px) {
  .lb-takings__form .a-fields { grid-template-columns: repeat(2, 1fr); }
}

/* ── The petty cash fund ──────────────────────────── */
/* The top-up form borrows the bank run's frame — a list of envelopes with the
   figures ruled off underneath it — because it is the same act read the other
   way round: cash coming off the pile rather than leaving the shop. */
.pc-need { margin-bottom: 14px; }
.pc-need input { font-size: 17px; }

.pc-draws { border: 1px solid var(--a-line); border-radius: 8px 8px 0 0; }
.pc-draws__row { padding: 9px 14px; }
.pc-draws__day { display: flex; flex-direction: column; gap: 1px; line-height: 1.35; }
.pc-draws__day small { font-size: 12.5px; }
.pc-draws__amount {
  width: 124px; flex: 0 0 auto; text-align: right;
  font-variant-numeric: tabular-nums;
}

/* The count sits between the envelopes and the totals, which is the order the
   job is done in: count what is there, then put more in. */
.pc-count { margin: 16px 0 14px; }
.pc-count .c-hint { margin-top: 5px; }

/* The admin page's h2 carries no margin of its own (h2 is reset), so the
   heading sat on the panel; the counter's .c-section__title already has this.
   The two fields under the count had nothing between them and the totals. */
.pc-title { margin-bottom: 10px; }
.pc-gap { margin-bottom: 14px; }

.pc-form .lb-run-sum { border-radius: 0; }
.pc-form .pc-after { border-radius: 0 0 8px 8px; margin-bottom: 4px; }
.pc-form .pc-after dd { font-size: 19px; }

/* What one movement was, and its undo — printed inside the cash book. */
.pc-moves__what { display: flex; flex-direction: column; gap: 1px; line-height: 1.35; min-width: 0; }
.pc-moves__undo { margin: 0; }

@media (max-width: 480px) {
  .pc-draws__amount { width: 96px; }
}

/* Cash going the other way. Ghosted rather than a second primary button: the
   fund is filled far more often than it is emptied. */
.pc-return .a-fields { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.pc-return .a-form__actions { margin-top: 14px; padding-top: 14px; }
.pc-return .c-hint { margin: 14px 0 0; }
/* The direct top-up stacks three rows; each needs its own gap from the last. */
.pc-direct > .a-field, .pc-direct > .a-field + .a-fields { margin-top: 14px; }

/* The fund's cash book, on both sides: the same movements as a ledger, with the running
   balance in its own column. The brought-forward line and the totals are what
   make it read as one, so they are set apart from the lines between them. */
.pc-ledger td, .pc-ledger th { vertical-align: top; }
.pc-ledger .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pc-ledger td.pc-moves__what { display: table-cell; }
.pc-ledger td.pc-moves__what small { display: block; }
.pc-ledger .actions .pc-moves__undo { display: inline-block; }
.pc-ledger__note { margin: 0; padding: 10px 18px 14px; }
.pc-ledger__note a { color: var(--a-accent-d); font-weight: 600; white-space: nowrap; }
.pc-ledger tfoot small { display: block; font-weight: 400; color: var(--bk-note); }

/* A column heading that sorts: it reads as the heading it is, with the
   arrow saying which way the active one runs. */
.bk-sort { color: inherit; text-decoration: none; white-space: nowrap; }
.bk-sort:hover { text-decoration: underline; text-underline-offset: 3px; }
.bk-sort.is-active { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.bk-sort span { font-size: 9px; }

/* The full history's bar: small labelled fields in one row, the search taking
   whatever is left. */
.pc-history-bar__field { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--a-muted); }
.pc-history-bar select {
  padding: 7px 9px; border: 1.5px solid var(--a-line); border-radius: 6px;
  font: inherit; font-size: 14px; background: #fff; color: var(--a-ink);
}

/* Page links under a long list. */
.a-pager {
  display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap;
  padding: 14px 16px; border-top: 1px solid var(--a-line);
}
.a-pager__page, .a-pager__step {
  min-width: 34px; padding: 6px 10px; border: 1px solid var(--a-line); border-radius: 8px;
  background: #fff; color: var(--a-ink); font-size: 13.5px; font-weight: 600;
  text-align: center; text-decoration: none;
}
.a-pager a:hover { border-color: var(--a-accent); color: var(--a-accent-d); }
.a-pager__page.is-active { background: var(--a-accent); border-color: var(--a-accent); color: #fff; }
.a-pager__gap { color: var(--a-muted); }

/* ── The bank's deposits, as a passbook ───────────── */
/* Dressed as the bank's own book the way the log book is dressed as the
   notebook: pale green security-printed paper, the bank's ink for the ruled
   headings, and every entry in the monospaced type a passbook printer strikes.
   Only the list is the book; the figures and the bar around it stay the admin's. */
.bk-passbook {
  --bk-paper: #F1F7EE;
  --bk-ink:   #1F4E5F;
  --bk-rule:  #C4D8CB;
  --bk-type:  #22303A;
  --bk-hatch: rgba(31,78,95,.035);
  --bk-trim:  #C9A64A;
  --bk-note:  #5E6F69;
  --bk-mono:  ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace;
  background:
    repeating-linear-gradient(45deg,  var(--bk-hatch) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(-45deg, var(--bk-hatch) 0 1px, transparent 1px 7px),
    var(--bk-paper);
  border-color: var(--bk-rule);
}
/* The same book bound in the admin's colours (Settings → Appearance): every
   shade is mixed from the theme's tokens, so picking a theme recolours it with
   no rule of its own — the bargain AdminTheme makes with every other token. */
.bk-passbook--theme {
  --bk-paper: color-mix(in srgb, var(--a-soft) 55%, #fff);
  --bk-ink:   var(--a-bar);
  --bk-rule:  color-mix(in srgb, var(--a-accent) 28%, #fff);
  --bk-type:  var(--a-ink);
  --bk-hatch: color-mix(in srgb, var(--a-accent) 6%, transparent);
  --bk-trim:  var(--a-bar-pill);
  --bk-note:  var(--a-muted);
}
/* The counter has no admin theme — its tokens are the section's tint (see
   60_counter.css) — so the book is bound in the section's own colour there. */
body.counter .bk-passbook--theme {
  --bk-ink:  var(--a-accent-d);
  --bk-trim: var(--a-soft);
}
/* The cover's edge: the bank's colour, with the book's name on it. */
.bk-passbook .a-panel__head {
  background: var(--bk-ink); border-bottom: 3px double var(--bk-trim);
}
.bk-passbook .a-panel__title { color: #fff; letter-spacing: 2px; text-transform: uppercase; font-size: 15px; }
.bk-passbook .a-panel__title small { color: #CFE3DC; letter-spacing: 0; text-transform: none; }

.bk-book { background: transparent; }
.bk-book th, .bk-book td { border-bottom: 1px dotted var(--bk-rule); vertical-align: top; }
.bk-book thead th {
  background: transparent; color: var(--bk-ink);
  font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase;
  border-bottom: 2px solid var(--bk-ink);
}
.bk-book tbody tr:hover { background: color-mix(in srgb, var(--bk-ink) 5%, transparent); }
/* The printed columns. */
.bk-book .bk-book__no,
.bk-book .bk-book__date,
.bk-book .num { font-family: var(--bk-mono); font-size: 13.5px; color: var(--bk-type); white-space: nowrap; }
.bk-book .bk-book__no { color: var(--bk-note); width: 1%; }
.bk-book .bk-book__date a { color: var(--bk-type); text-decoration: underline dotted; text-underline-offset: 3px; }
.bk-book .bk-book__date a:hover { color: var(--bk-ink); text-decoration: underline; }
.bk-book .bk-book__bal { font-weight: 700; }
.bk-book__what strong { display: block; font-weight: 600; color: var(--bk-type); }
.bk-book__what small { display: block; color: var(--bk-note); font-size: 12.5px; }
.bk-book__slip { display: inline-block; margin-top: 2px; font-size: 12px; }
.bk-book__noslip { font-size: 12px; }
.bk-book__slip a { color: var(--bk-ink); font-weight: 600; }
.bk-book__carry td { font-style: italic; color: var(--bk-note); }
.bk-book tfoot th {
  background: transparent; color: var(--bk-ink);
  border-top: 3px double var(--bk-ink); border-bottom: 0;
}
.bk-book tfoot .num { font-family: var(--bk-mono); color: var(--bk-ink); }
/* The counter's copy has no cover strip: the section title above it names it. */
.bk-passbook > .a-table-wrap:first-child { border-top: 4px solid var(--bk-ink); }

/* ── The shop's accounts, as passbook covers ──────── */
/* One small bound book per account on /admin/bank: the bank's ink for the
   cover band, the security paper underneath, and the balance struck in the
   passbook printer's type. The same --bk-* tokens the book itself reads. */
.bk-accounts { margin-bottom: 20px; }
.bk-accounts__row {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.bk-account {
  --bk-paper: #F1F7EE; --bk-ink: #1F4E5F; --bk-rule: #C4D8CB; --bk-type: #22303A;
  --bk-hatch: rgba(31,78,95,.035); --bk-trim: #C9A64A; --bk-note: #5E6F69;
  --bk-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace;
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--bk-rule); border-radius: 10px;
  background:
    repeating-linear-gradient(45deg,  var(--bk-hatch) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(-45deg, var(--bk-hatch) 0 1px, transparent 1px 7px),
    var(--bk-paper);
  color: var(--bk-type); text-decoration: none;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
  transition: transform .12s ease, box-shadow .12s ease;
}
a.bk-account:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.08); }
.bk-account__cover {
  min-height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 14px; background: var(--bk-ink); border-bottom: 3px double var(--bk-trim);
}
.bk-account__bank { color: #fff; font-size: 11.5px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; }
.bk-account__pill {
  font-size: 10.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  color: var(--bk-ink); background: var(--bk-trim); border-radius: 999px; padding: 2px 8px;
}
.bk-account__body { display: flex; flex-direction: column; padding: 12px 14px 14px; }
.bk-account__name { font-weight: 700; font-size: 15px; }
.bk-account__no { font-family: var(--bk-mono); font-size: 12.5px; color: var(--bk-note); }
.bk-account__bal {
  margin-top: 12px; padding-top: 8px; border-top: 1px dotted var(--bk-rule);
  font-family: var(--bk-mono); font-size: 22px; font-weight: 700; color: var(--bk-ink);
}
.bk-account__label { font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--bk-note); }
.bk-account--total { --bk-ink: #22303A; }
.bk-account--new {
  align-items: center; justify-content: center; gap: 4px; min-height: 140px;
  background: transparent; border-style: dashed; color: var(--a-muted); font-weight: 600;
}
.bk-account--new:hover { color: var(--a-accent); border-color: var(--a-accent); }
.bk-account__plus { font-size: 28px; line-height: 1; }
.bk-accounts__closed { margin: 10px 0 0; font-size: 13px; }

/* An account's own passbook: the cover band carries the balance. */
.bk-cover { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.bk-cover__bal { text-align: right; color: #fff; }
.bk-cover__bal span { display: block; font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: #CFE3DC; }
.bk-cover__bal strong { font-family: var(--bk-mono); font-size: 22px; }
.bk-book .bk-book__out { color: #9B3B2E; }
.bk-book__what a { color: var(--bk-ink); }
.bk-book--account .actions form { display: inline; }
.bk-head__actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* The GCash wallet: the same passbook in a wallet's blue, so it is never read
   as one of the bank accounts beside it. Tokens only — no rules of its own. */
.bk-passbook--gcash,
.bk-account--gcash {
  --bk-paper: #EFF5FC; --bk-ink: #1B4F8C; --bk-rule: #C3D5EA;
  --bk-hatch: rgba(27,79,140,.035); --bk-trim: #8EC1F0;
}
.bk-book .bk-book__bal.is-negative,
.bk-book tfoot .num.is-negative { color: #9B3B2E; }
.gc-picked { margin: 12px 0 4px; font-size: 14px; }

.bk-entry__kinds { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.bk-entry__kind { display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 7px 14px; border: 1px solid var(--a-line); border-radius: 999px; font-weight: 600; font-size: 14px; }
.bk-entry__kind:has(input:checked) { border-color: var(--a-accent); background: var(--a-soft); color: var(--a-accent-d, var(--a-accent)); }

.lb-run-account { margin: 12px 0 0; font-size: 14px; color: var(--a-muted); }
.lb-bank-run .lb-run-into { margin-top: 12px; }
.c-hat .c-hat__account strong { display: inline; font-size: inherit; color: inherit; }

/* On a phone the book keeps what answers "has Tuesday's gone in?" — the date,
   what went, and how much. The entry number and the running total step aside
   rather than scrolling the page sideways, and the date is a tap target. */
@media (max-width: 600px) {
  .bk-book .bk-book__no,
  .bk-book .bk-book__balcol { display: none; }
  .bk-book th, .bk-book td { padding-left: 8px; padding-right: 8px; }
  .bk-book .bk-book__date, .bk-book .num { font-size: 12.5px; }
  .bk-book .bk-book__date a { display: inline-block; padding: 4px 0; }
}