/* Daily Closing web. Same palette and rules as the phone app: white ground, hairline cards,
   green for income, amber for expense.

   Type is sized for a screen read at desk distance, not a phone at hand's length: 12px is fine
   print only, 13 captions and sub-lines, 15 body and table text, 16-17 row and card titles, 20-22
   page titles, 24 and up the big figures. Secondary text is one readable grey (--muted); the paler
   greys are for borders and disabled marks, never for words. */
:root {
  --green: #107c41;
  --green-dark: #0b5c2f;
  --mint: #e7f4eb;
  --ink: #1f2a24;
  --muted: #56655b;
  --line: #e7e9eb;
  --inset: #f6f7f8;
  --amber: #b8690c;
  --amber-bg: #fff7d6;
  --amber-line: #f0d878;
  --blue: #1f5fa8;
  --red: #b3261e;
}

@font-face { font-family: "Open Sans"; src: url("../fonts/OpenSans-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Open Sans"; src: url("../fonts/OpenSans-Semibold.ttf") format("truetype"); font-weight: 600; font-display: swap; }

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 15px; line-height: 1.45; color: var(--ink); background: #fff; }
h1 { margin: 0; font-size: 20px; font-weight: 600; }
a { color: var(--green); }
.muted { color: var(--muted); }
.income { color: var(--green); }
.expense { color: var(--amber); }
.transfer { color: var(--blue); }
.spacer { flex: 1; }

/* Boot */
.boot { min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: 14px; color: var(--muted); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 9px; padding: 9px 16px; font: inherit; font-weight: 600; background: var(--green); color: #fff; cursor: pointer; text-decoration: none; }
.btn:hover { background: var(--green-dark); }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn.wide { width: 100%; padding: 12px; }
.btn.plain { background: #fff; color: var(--ink); border: 1.5px solid var(--line); }
.btn.plain:hover { background: var(--inset); }
button.link { border: 0; background: none; padding: 0; font: inherit; color: var(--green); cursor: pointer; }
button.link.block { display: block; margin-top: 10px; }

/* Shell. The drawer is the phone's: pinned open beside the page on a wide window, slid over it on a narrow one. */
/* The drawer and the page are one white frame, centred in the window. Spare width is soft grey outside it,
   so the gap between menu and page never depends on the monitor. */
body:has(.app-shell) { background: #fff; }
/* The frame is exactly the window. Nothing here grows past it: a page that is longer than the
   window scrolls inside itself, the way every screen in the app does. */
/* Everything sits against the window's leading edge: the drawer on the edge, the page beside it at
   its own width, and whatever is left over is plain white on the far side. Nothing is centred, so
   nothing moves when the window is resized. --card-x is the middle of the page column, which is
   where the cards that open over it are centred. */
.app-shell { display: flex; height: 100vh; background: #fff; --page-max: 1200px; --card-x: calc(288px + min(var(--page-max), 100vw - 288px) / 2); }
.app-shell.drawer-hidden { --card-x: calc(min(var(--page-max), 100vw) / 2); }
.app-main { flex: 0 1 var(--page-max); min-width: 0; min-height: 0; display: flex; flex-direction: column; align-items: flex-start; overflow-y: auto; }
.narrow-screen { display: none; }
.drawer-scrim { display: none; }

.sidebar { width: 288px; flex: none; border-inline-end: 1px solid var(--line); padding: 10px 0 14px; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; background: #fff; }
.sidebar .biz { display: flex; gap: 12px; align-items: center; width: 100%; padding: 10px 18px 14px; border: 0; border-bottom: 1px solid var(--line); background: none; font: inherit; text-align: start; text-decoration: none; color: var(--ink); cursor: pointer; }
.sidebar .biz:hover { background: var(--inset); }
.sidebar .avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--mint); color: var(--green-dark); display: grid; place-items: center; font-weight: 600; font-size: 15px; flex: none; }
.sidebar .biz-text { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.sidebar .biz-text strong { font-weight: 600; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar .biz-text small { color: var(--muted); font-size: 13px; }
.sidebar .biz .chev { color: #b5bcc4; }
.sidebar nav { display: flex; flex-direction: column; flex: 1; }
.sidebar .rule { border-top: 1px solid var(--line); margin: 4px 0; }
.sidebar .row { display: flex; align-items: center; gap: 16px; padding: 10px 20px; color: var(--ink); text-decoration: none; font: inherit; font-size: 16px; }
.sidebar .row:hover { background: var(--inset); }
.sidebar .row.active { background: var(--mint); color: var(--green-dark); font-weight: 600; }
.sidebar .row img { width: 22px; height: 22px; flex: none; object-fit: contain; }
.sidebar .row.off { color: #b5bcc4; cursor: default; }
.sidebar .row.off:hover { background: none; }
.sidebar .row.off img { opacity: 0.35; }
.sidebar .row.off small { font-size: 13px; margin-inline-start: auto; }
.sidebar .row .plan-value { margin-inline-start: auto; white-space: nowrap; color: #9a5b07; font-size: 15px; font-weight: 600; }
.sidebar .row.as-button { border: 0; background: none; width: 100%; text-align: start; cursor: pointer; }
.sidebar .row.signout { color: var(--red); }

.app-shell.drawer-hidden .sidebar { display: none; }

.menu-button { width: 42px; height: 42px; border-radius: 50%; border: 0; background: #fff; box-shadow: 0 2px 10px rgba(31, 42, 36, 0.10); display: grid; place-items: center; cursor: pointer; color: var(--ink); flex: none; padding: 0; }
.menu-button:hover { background: var(--inset); }
.menu-button svg { width: 22px; height: 22px; }

@media (max-width: 1024px) {
  .app-main { flex: 1; }
}

@media (max-width: 999px) {
  .app-shell, .app-shell.drawer-hidden { --card-x: 50vw; }
  .sidebar { position: fixed; inset-inline-start: 0; top: 0; z-index: 61; transform: translateX(-100%); transition: transform 0.18s ease; box-shadow: none; width: min(300px, 82vw); }
  [dir="rtl"] .sidebar { transform: translateX(100%); }
  .app-shell.drawer-over .sidebar { transform: none; box-shadow: 0 0 40px rgba(31, 42, 36, 0.25); }
  .app-shell.drawer-over .drawer-scrim { display: block; position: fixed; inset: 0; z-index: 60; background: rgba(31, 42, 36, 0.35); }
  .app-shell.drawer-hidden .sidebar { display: flex; }
}

/* Pages */
.page-col { width: 100%; max-width: 760px; }
.page-top { display: flex; align-items: center; gap: 12px; padding: 14px 22px; border-bottom: 1px solid var(--line); min-height: 62px; }
.page-body { padding: 18px 22px; flex: 1; }
.empty-card { border: 1.5px solid var(--line); border-radius: 14px; padding: 22px; max-width: 520px; }
.empty-card p { margin: 8px 0 0; }

.date-pill { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid #d2dad3; border-radius: 16px; padding: 5px 8px; font-weight: 600; font-size: 16px; background: #fff; }
.date-pill span { padding: 0 8px; min-width: 116px; text-align: center; }
.date-pill button { border: 0; background: none; width: 32px; height: 32px; border-radius: 50%; font-size: 22px; line-height: 1; cursor: pointer; color: var(--ink); }
.date-pill button:hover { background: var(--inset); }
.date-pill { position: relative; }
.date-pill button.day { width: auto; min-width: 116px; border-radius: 12px; padding: 0 8px; font: inherit; font-weight: 600; font-size: 16px; }
.date-pill button:disabled { opacity: 0.35; cursor: default; background: none; }
.date-pill .arrow-gap { width: 32px; height: 32px; padding: 0; min-width: 0; }
.date-pill .pill-calendar { position: absolute; inset-inline-start: 50%; bottom: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; border: 0; padding: 0; }

/* Ledger. Same places as the phone: tools left, date right, balances stacked, the table filling
   the height with Total pinned to its foot, then Day result left and closing balances right. */
/* Every page is one centred column holding what the phone screen holds. A wider window adds white. */
.ledger-page { flex: 1; min-height: 0; height: 100%; display: flex; flex-direction: column; padding: 16px 20px 14px; width: 100%; max-width: var(--page-max); }
/* Lists and tables grow with the window, up to --page-max, and the text column takes the room.
   A form, a keypad or one bill does not: a 1200-wide form is worse than a 760-wide one. */
.ledger-page.editor-page, .ledger-page.payment-page, .ledger-page.keypad-page, .ledger-page.bill-page { max-width: 760px; }
.ledger-top { display: flex; align-items: center; gap: 10px; }
.tool-circle { width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--line); background: #fff; display: grid; place-items: center; padding: 0; flex: none; }
.tool-circle img { width: 22px; height: 22px; }
.tool-circle.track { color: #2f6fd0; font-size: 20px; line-height: 1; }
.tool-circle[aria-disabled="true"] { cursor: default; }
button.tool-circle { cursor: pointer; }
button.tool-circle:hover { background: var(--inset); }
button.tool-circle:disabled { opacity: 0.5; cursor: default; }
.tool-circle.refresh { background: var(--inset); border-color: var(--inset); }

.ledger-openings { display: flex; align-items: center; margin: 12px 0; }
.ledger-openings .balances { font-size: 16px; line-height: 1.45; color: #444; }
.ledger-openings .balances b { font-weight: 400; color: var(--green); font-variant-numeric: tabular-nums; }

.ledger-card { flex: 1; min-height: 0; display: flex; flex-direction: column; border: 1.5px solid #d2dad3; border-radius: 14px; overflow: hidden; transition: opacity 0.15s ease; }
.ledger-card.is-loading { opacity: 0.55; }
.ledger-card > table.grid:first-child { flex: none; }
/* The head and the Total bar hold still; the rows scroll between them. */
.ledger-card > .grid-scroll > table.grid { flex: none; }

table.grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.grid col.c-no { width: 54px; }
.grid col.c-ac { width: 96px; }
.grid col.c-num { width: 140px; }
.grid th { text-align: start; font-weight: 600; padding: 12px; border-bottom: 1.5px solid #d2dad3; border-inline-end: 1px solid var(--line); background: #fff; }
.grid td { padding: 11px 12px; border-bottom: 1px solid var(--line); border-inline-end: 1px solid var(--line); vertical-align: middle; background: var(--row, transparent); overflow: hidden; text-overflow: ellipsis; }
.grid th:last-child, .grid td:last-child { border-inline-end: 0; }
.grid .num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
.grid td.no, .grid th.no { background: var(--inset); text-align: center; white-space: nowrap; }
.grid tr[style] td.no { background: var(--row); }
.grid .time { font-variant-numeric: tabular-nums; white-space: nowrap; }
.grid .ref { display: block; font-size: 13px; color: var(--green); }
.grid .sub { display: block; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grid .track { color: #7a52b3; margin-inline-end: 2px; }
.grid tr.sale td { background: var(--inset); }

.grid tr.new-entry { cursor: pointer; outline: none; }
.grid tr.new-entry td { background: #eaf5ee; }
.grid tr.new-entry:hover td, .grid tr.new-entry:focus-visible td { background: #dff0e5; }
.grid tr.new-entry td.no { color: var(--green); font-size: 20px; }
.grid tr.new-entry strong { display: block; color: var(--green); font-weight: 600; font-size: 16px; }
.grid tr.new-entry small { color: var(--muted); font-size: 13px; }
.grid tr.new-entry .chev { float: inline-end; margin-top: 8px; color: var(--green); font-size: 20px; }

/* The row being typed */
/* The hairline under the fields stays, as on the phone: the row being typed and the buttons under
   it are two rows with a rule between them, not one tall cell. */
.grid tr.draft td { background: #fff; padding-top: 8px; padding-bottom: 8px; }
.grid tr.draft td.no { background: var(--inset); color: var(--green); font-size: 20px; }
.grid .cell { width: 100%; font: inherit; border: 1.5px solid #cfd4d9; border-radius: 8px; padding: 8px 10px; background: #fff; color: var(--ink); outline: none; }
.grid .cell:focus { border-color: var(--green); }
.grid tr.draft.expense .cell.amount, .grid tr.draft.expense .cell.account { border-color: var(--amber); }
.grid tr.draft.income .cell.amount, .grid tr.draft.income .cell.account { border-color: var(--green); }
.grid .cell.amount { text-align: end; font-variant-numeric: tabular-nums; font-weight: 600; }
.grid .cell.account { cursor: pointer; text-align: start; }
.grid tr.draft.expense .cell.account { color: var(--amber); }
.grid tr.draft.income .cell.account { color: var(--green); }
.grid .type-name { border: 0; background: none; font: inherit; color: var(--ink); padding: 0; cursor: pointer; text-align: start; }
.grid .type-name:hover { color: var(--green); }
.grid tr.draft-actions td { background: #fff; text-align: end; padding-top: 2px; padding-bottom: 10px; }
.grid tr.draft-actions td.no { background: var(--inset); }
.grid tr.draft-actions .btn { padding: 7px 18px; margin-inline-start: 6px; }
.grid tr.draft-actions .btn.grey { background: #eef0f2; color: var(--ink); }
.grid tr.draft-actions .btn.grey:hover { background: #e3e6e9; }
.grid tr.draft-actions .keys { font-size: 13px; color: var(--muted); margin-inline-end: 6px; }
.grid tr.draft-actions .error { color: var(--red); float: inline-start; margin-top: 7px; }

/* Choose type card */
.scrim { position: fixed; inset: 0; background: rgba(31, 42, 36, 0.28); z-index: 40; }
.chooser { position: fixed; z-index: 41; inset-inline-start: var(--card-x, 50%); top: 84px; transform: translateX(-50%); width: min(440px, calc(100vw - 40px)); max-height: calc(100vh - 140px); display: flex; flex-direction: column; background: #fff; border-radius: 18px; box-shadow: 0 24px 60px rgba(31, 42, 36, 0.25); padding: 16px; }
.chooser-head { display: flex; align-items: center; gap: 12px; font-size: 16px; }
.chooser-head strong { font-weight: 600; }
.chooser-head .x { border: 0; background: none; font-size: 16px; cursor: pointer; color: var(--ink); width: 30px; height: 30px; border-radius: 50%; }
.chooser-head .x:hover { background: var(--inset); }
.chooser-tabs { display: flex; gap: 8px; margin: 12px 0; }
.chooser-tabs .tab { border: 1.5px solid var(--line); background: #fff; border-radius: 999px; padding: 6px 16px; font: inherit; font-size: 15px; cursor: pointer; color: var(--ink); }
.chooser-tabs .tab.expense.on { background: #fdf0dc; border-color: #f0cf9a; color: #8a4b00; font-weight: 600; }
.chooser-tabs .tab.income.on { background: var(--mint); border-color: #bfe0cb; color: var(--green-dark); font-weight: 600; }
.chooser-tabs .tab.off { color: #b5bcc4; cursor: default; }
.chooser-search { display: flex; gap: 8px; }
.chooser-search input { flex: 1; min-width: 0; border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 12px; font: inherit; outline: none; }
.chooser-search input:focus { border-color: var(--green); }
.chooser-search .add { border: 0; border-radius: 999px; padding: 0 16px; font: inherit; font-weight: 600; color: #fff; cursor: pointer; white-space: nowrap; }
.chooser-search .add.expense { background: var(--amber); }
.chooser-search .add.income { background: var(--green); }
.chooser .error { color: var(--red); margin: 8px 2px 0; font-size: 15px; }
.chooser-list { margin-top: 10px; overflow-y: auto; border: 1px solid var(--line); border-radius: 12px; min-height: 120px; }
.chooser-list .type { display: block; width: 100%; text-align: start; border: 0; border-bottom: 1px solid var(--line); background: #fff; padding: 12px 14px; font: inherit; cursor: pointer; color: var(--ink); }
.chooser-list .type:last-child { border-bottom: 0; }
.chooser-list .type.hi { background: var(--inset); }
.chooser-list .pad { padding: 16px 14px; margin: 0; }

/* The empty ruled area between the last row and Total. */
.grid-fill { flex: 1; min-height: 0; overflow: hidden; display: flex; }
.grid-fill table.grid { height: 100%; }
.grid-fill td { border-bottom: 0; padding: 0; }

table.grid.total { flex: none; border-top: 1.5px solid #d2dad3; }
.grid.total td { background: var(--inset); font-weight: 600; font-size: 16px; border-bottom: 0; border-inline-end: 0; padding: 13px 12px; }

.ledger-foot { display: flex; align-items: flex-end; border-top: 1px solid var(--line); margin-top: 12px; padding-top: 10px; }
.ledger-foot .label { font-size: 15px; color: var(--muted); }
.ledger-foot .result { flex: 1; display: flex; flex-direction: column; border-inline-end: 1px solid var(--line); }
.ledger-foot .result strong { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ledger-foot .closing { display: grid; grid-template-columns: auto auto; gap: 2px 40px; align-items: baseline; padding-inline-start: 28px; }
.ledger-foot .closing strong { font-size: 20px; font-weight: 600; color: var(--green); text-align: end; font-variant-numeric: tabular-nums; }

/* Sign in */
.auth-shell { min-height: 100vh; display: grid; place-items: center; background: var(--inset); padding: 20px; }
.auth-card { width: min(400px, 100%); background: #fff; border: 1.5px solid var(--line); border-radius: 18px; padding: 30px 28px; }
.auth-card h1 { font-size: 24px; margin-top: 14px; }
.auth-card .fine.rule { margin: 8px 0 0; }
.auth-card .btn.wide { margin-top: 16px; }
.business-picker { width: min(420px, calc(100vw - 40px)); outline: none; }
.business-picker .pick-row .lead { display: grid; gap: 1px; }
.business-picker .pick-row .lead strong { font-size: 16px; font-weight: 600; }
.business-picker .pick-row .lead small { font-size: 13px; color: var(--muted); }
.business-picker .picker-list { max-height: none; margin-bottom: 4px; }
.auth-card .muted { margin: 4px 0 20px; }
.auth-card label { display: block; font-size: 15px; color: var(--muted); margin-bottom: 6px; }
.auth-card input { width: 100%; border: 1.5px solid #cfd4d9; border-radius: 10px; padding: 11px 12px; font: inherit; font-size: 16px; outline: none; }
.auth-card input:focus { border-color: var(--green); }
.auth-card .btn.wide { margin-top: 16px; }
.auth-card .who { display: flex; justify-content: space-between; gap: 10px; background: var(--inset); border-radius: 10px; padding: 9px 12px; margin-bottom: 14px; font-weight: 600; overflow-wrap: anywhere; }
.auth-card .error { color: var(--red); margin: 10px 0 0; font-size: 15px; }
.auth-card .fine { margin: 18px 0 0; font-size: 15px; color: var(--muted); }
.auth-card .fine.centre, .auth-card .centre { text-align: center; }

/* The app's own sign-in screen: the language pill above everything, the mark, the green heading,
   one field, then Create Account and support under a rule, with the version at the foot. */
.auth-card.first { text-align: center; padding: 22px 28px 20px; }
.lang-pill { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; padding: 4px 6px; border: 0; background: none; font: inherit; font-size: 16px; font-weight: 600; color: var(--green-dark); cursor: pointer; }
.lang-pill img { width: 19px; height: 19px; }
.lang-pill .drop { color: var(--muted); font-weight: 400; }
.auth-card .mark { margin: 10px auto 0; display: block; }
.auth-card h1.green { color: var(--green-dark); font-size: 26px; margin: 6px 0 18px; }
.auth-card input.big { padding: 14px 16px; border-radius: 14px; font-size: 16px; text-align: center; }
.auth-card input.big.code { letter-spacing: 0.4em; font-variant-numeric: tabular-nums; }
.auth-card.first .btn.wide { margin-top: 12px; padding: 15px; border-radius: 14px; font-size: 16px; }
.auth-card .rule { height: 1px; background: var(--line); margin: 20px 0 14px; }
.auth-card .first-time { margin: 0 0 12px; color: var(--muted); font-size: 16px; }
.btn.outline { background: #fff; color: var(--green-dark); border: 1.5px solid #cde7d7; gap: 10px; }
.btn.outline:hover { background: #f5fbf7; }
.btn.outline img { width: 22px; height: 22px; }
.auth-card .btn.plain.support { margin-top: 10px; gap: 10px; color: var(--green-dark); font-weight: 600; border: 0; background: none; }
.auth-card .btn.plain.support img { width: 22px; height: 22px; }
.auth-card .version { margin: 26px 0 0; font-size: 15px; color: var(--muted); }

/* Every step after the first: the app's back arrow and the step's own title. */
.auth-card .step-head { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.auth-card .step-head .back { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--inset); font-size: 24px; line-height: 1; color: var(--ink); cursor: pointer; flex: none; }
.auth-card .step-head strong { font-size: 20px; font-weight: 600; }
.auth-card .ask { margin: 0 0 10px; font-size: 17px; font-weight: 600; color: var(--ink); }
.auth-card .welcome { font-size: 22px; font-weight: 600; margin: 0 0 4px; }
.auth-card .whoami { display: flex; align-items: baseline; gap: 12px; margin: 0 0 18px; color: var(--green-dark); font-size: 16px; overflow-wrap: anywhere; }
.auth-card .whoami .link { color: var(--ink); font-weight: 600; text-decoration: underline; }
.auth-card label.caps { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.auth-card .peek { position: relative; }
.auth-card .peek input { padding-inline-end: 46px; border-color: var(--green); border-radius: 12px; padding-top: 14px; padding-bottom: 14px; }
.auth-card .peek .eye { position: absolute; inset-inline-end: 6px; top: 50%; margin-top: -18px; width: 36px; height: 36px; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.auth-card .peek .eye img { width: 22px; height: 22px; }
.auth-card .or { display: flex; align-items: center; gap: 12px; margin: 18px 0 14px; color: var(--muted); }
.auth-card .or::before, .auth-card .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* Below tablet width: point people to the phone app instead of a second mobile product. */
@media (max-width: 760px) {
  .app-shell { display: none; }
  .narrow-screen { display: grid; min-height: 100vh; background: #fff; place-content: center; justify-items: center; text-align: center; gap: 12px; padding: 28px; }
  .narrow-screen h1 { font-size: 22px; max-width: 320px; }
  .narrow-screen p { color: var(--muted); margin: 0; max-width: 300px; }
  .narrow-screen .store-row { display: flex; gap: 10px; margin-top: 8px; }
}

#blazor-error-ui { display: none; position: fixed; inset-inline-start: 0; inset-inline-end: 0; bottom: 0; background: var(--amber-bg); border-top: 1px solid var(--amber-line); padding: 10px 18px; z-index: 1000; }
#blazor-error-ui .dismiss { cursor: pointer; float: inline-end; }

/* Editing a saved row, and the delete question */
.grid tr.can-edit { cursor: pointer; outline: none; }
.grid tr.can-edit:hover td, .grid tr.can-edit:focus-visible td { box-shadow: inset 0 0 0 9999px rgba(31, 42, 36, 0.035); }
.btn.grey { background: #eef0f2; color: var(--ink); }
.btn.grey:hover { background: #e3e6e9; }
.btn.danger { background: #fff; color: var(--red); border: 1.5px solid #f0c4c0; }
.btn.danger:hover { background: #fdecea; }
/* Delete sits in the group between Note and Cancel, where the phone puts it — not floated off to
   the far left — and wears the phone's tinted pill rather than an outline. */
.grid tr.draft-actions .btn.danger { background: #fde8e8; color: #b42318; border: 0; }
.grid tr.draft-actions .btn.danger:hover { background: #fadcdc; }
.confirm { position: fixed; z-index: 51; inset-inline-start: var(--card-x, 50%); top: 30%; transform: translateX(-50%); width: min(360px, calc(100vw - 40px)); background: #fff; border-radius: 16px; box-shadow: 0 24px 60px rgba(31, 42, 36, 0.3); padding: 22px; }
.confirm strong { font-size: 17px; font-weight: 600; }
.confirm p { margin: 8px 0 18px; color: var(--muted); }
[dir="rtl"] .chooser, [dir="rtl"] .confirm, [dir="rtl"] .money-card { transform: translateX(50%); }
[dir="rtl"] .language-card { transform: translate(50%, -50%); }
.confirm-actions { display: flex; justify-content: flex-end; gap: 10px; }
.confirm ~ .scrim, .scrim:has(+ .confirm) { z-index: 50; }

/* Bills. The phone's list: search + funnel, day bands, receipt rows led by the amount. */
.bills-page, .bill-page { flex: 1; min-height: 0; height: 100vh; display: flex; flex-direction: column; padding: 16px 20px 0; max-width: 760px; width: 100%; }
.bills-page { max-width: var(--page-max); }
.bills-top, .bill-top { display: flex; align-items: center; gap: 10px; min-height: 42px; }
.bills-search { position: relative; display: flex; gap: 10px; margin: 12px 0 10px; }
.search-box { flex: 1; display: flex; align-items: center; gap: 8px; border: 1.5px solid #d2dad3; border-radius: 14px; padding: 0 12px; }
.search-box img { width: 18px; height: 18px; opacity: 0.55; }
.search-box input { flex: 1; border: 0; outline: none; font: inherit; font-size: 16px; padding: 11px 0; background: none; }
.funnel { width: 46px; border: 1.5px solid #d2dad3; border-radius: 14px; background: #fff; color: var(--ink); cursor: pointer; display: grid; place-items: center; }
.funnel svg { width: 20px; height: 20px; }
.funnel.on { border-color: var(--green); color: var(--green); background: var(--mint); }
.scrim.clear { background: transparent; }
.filter-menu { position: absolute; inset-inline-end: 0; top: 52px; z-index: 41; width: 230px; background: #fff; border-radius: 14px; box-shadow: 0 18px 44px rgba(31, 42, 36, 0.22); padding: 6px; display: flex; flex-direction: column; }
.filter-menu button, .filter-menu .pick-date { text-align: start; border: 0; background: none; font: inherit; padding: 10px 12px; border-radius: 9px; cursor: pointer; color: var(--ink); position: relative; }
.filter-menu button:hover, .filter-menu .pick-date:hover { background: var(--inset); }
.filter-menu .on { color: var(--green-dark); font-weight: 600; }
.filter-menu .on::after { content: "✓"; position: absolute; inset-inline-end: 12px; }
.filter-menu .menu-head { font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); padding: 10px 12px 4px; border-top: 1px solid var(--line); margin-top: 4px; }
.filter-menu .pick-date input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.bills-summary { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; color: var(--muted); font-size: 15px; margin-bottom: 8px; }
.bills-summary .link { margin-inline-start: auto; }
.due { color: #9a5b07; }
.bills-list { flex: 1; min-height: 0; overflow-y: auto; border-top: 1px solid #e3e6e9; transition: opacity 0.15s ease; }
.bills-list.is-loading { opacity: 0.55; }
.bills-list .pad, .bill-page .pad { padding: 16px 4px; margin: 0; }
.bills-list .empty-card { margin-top: 18px; }
.day-band { position: sticky; top: 0; z-index: 1; display: flex; flex-wrap: wrap; gap: 5px; background: #f7f9f8; border-bottom: 1px solid #e3e6e9; border-top: 1px solid #e3e6e9; margin-top: -1px; padding: 8px 12px; font-size: 15px; color: var(--muted); }
.day-band strong { color: var(--ink); font-weight: 600; }
.bill-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 9px; border-bottom: 1px solid #e3e6e9; border-inline-start: 3px solid transparent; color: inherit; text-decoration: none; }
.bill-row:hover { background: var(--inset); }
.bill-row.owes { border-inline-start-color: #d9962b; }
.pay-glyph { width: 20px; height: 20px; flex: none; color: #96a09a; }
.pay-glyph.due { color: #d9962b; }
.bill-row .lead { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bill-row .lead strong { font-size: 17px; font-weight: 600; color: var(--green); font-variant-numeric: tabular-nums; }
.bill-row small { font-size: 15px; color: var(--muted); }
.bill-row .tail { display: flex; flex-direction: column; align-items: flex-end; }
.bills-list .more { display: block; margin: 16px auto 24px; }

/* One bill */
.bill-top .back { background: #fff; cursor: pointer; padding: 0; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; font-size: 24px; line-height: 1; color: var(--ink); text-decoration: none; }
.bill-top .back:hover { background: var(--inset); }
.bill-page { overflow-y: auto; }
.bill-sheet { border: 1.5px solid #d2dad3; border-radius: 16px; padding: 24px; margin-top: 14px; max-width: 720px; }
.bill-sheet header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.bill-sheet .tax-invoice { font-size: 13px; letter-spacing: 0.08em; color: var(--muted); }
.bill-sheet .business { font-weight: 600; font-size: 16px; }
.bill-sheet .total-big { font-size: 32px; font-weight: 600; color: var(--green); font-variant-numeric: tabular-nums; margin: 4px 0; }
.bill-sheet .status { border-radius: 999px; padding: 4px 12px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.bill-sheet .status.paid { background: var(--mint); color: var(--green-dark); }
.bill-sheet .status.due { background: #fdf0dc; color: #8a4b00; }
.bill-lines { width: 100%; border-collapse: collapse; margin-top: 20px; }
.bill-lines th { text-align: start; font-size: 13px; font-weight: 600; color: var(--muted); border-bottom: 1.5px solid #d2dad3; padding: 8px 6px; }
.bill-lines td { padding: 10px 6px; border-bottom: 1px solid var(--line); }
.bill-lines .num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bill-totals { margin: 14px 0 0 auto; width: min(320px, 100%); }
.bill-totals div { display: flex; justify-content: space-between; padding: 5px 6px; }
.bill-totals dt { color: var(--muted); }
.bill-totals dd { margin: 0; font-variant-numeric: tabular-nums; }
.bill-totals .grand { border-top: 1.5px solid #d2dad3; margin-top: 6px; padding-top: 9px; font-weight: 600; font-size: 16px; }
.bill-totals .grand dt { color: var(--ink); }
.bill-sheet .entered { margin: 16px 0 0; font-size: 13px; }

@media print {
  body:has(.app-shell) { background: #fff; }
  .sidebar, .no-print, .narrow-screen { display: none !important; }
  .app-shell { display: block; }
  .bill-page { height: auto; padding: 0; overflow: visible; }
  .bill-sheet { border: 0; margin: 0; padding: 0; max-width: none; }
}

/* Dues: the Ledger's table, for people. */
.ledger-top h1 { font-size: 20px; }
.ledger-top .back, .bill-top .back { background: #fff; cursor: pointer; padding: 0; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; font-size: 24px; line-height: 1; color: var(--ink); }
.ledger-top .back:hover { background: var(--inset); }
.grid col.c-num.wide { width: 150px; }
.grid col.c-date { width: 130px; }
.ledger-card.dues > table.grid { flex: none; }
.grid-scroll { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }
.grid-scroll > table.grid { flex: none; }
.grid-scroll .more { margin: 14px auto; flex: none; }
.grid th.search-cell { padding: 0 12px 0 0; position: relative; }
.grid th.search-cell input { width: 100%; border: 0; outline: none; font: inherit; font-weight: 600; padding: 12px 34px 12px 12px; background: none; color: var(--ink); }
.grid th.search-cell input::placeholder { color: var(--ink); opacity: 1; }
.grid th.search-cell input:focus::placeholder { color: var(--muted); font-weight: 400; }
.grid th.search-cell img { position: absolute; inset-inline-end: 12px; top: 50%; width: 17px; height: 17px; margin-top: -8px; opacity: 0.55; pointer-events: none; }
.grid th.search-cell .clear { position: absolute; inset-inline-end: 8px; top: 50%; margin-top: -13px; width: 26px; height: 26px; border: 0; border-radius: 50%; background: var(--inset); cursor: pointer; font-size: 13px; }
.grid tr.divider td { background: var(--inset); color: var(--muted); font-size: 13px; padding: 7px 12px; }
.grid tr.struck td:not(.no) { text-decoration: line-through; color: var(--muted); }
.grid .muted-strong { color: var(--muted); font-weight: 400; }
.grid .empty-row { text-align: center; padding: 34px 12px; }
.web-note { margin: 10px 2px 0; font-size: 15px; }
.pills { display: flex; gap: 8px; margin: 12px 0; }
.pill { border: 0; border-radius: 999px; padding: 7px 18px; font: inherit; background: #f2f3f5; color: var(--ink); cursor: pointer; }
.pill.on { background: var(--mint); color: var(--green-dark); font-weight: 600; }
.expense-strong { color: var(--amber) !important; }

.due-card { width: min(420px, calc(100vw - 40px)); outline: none; }
.due-card .status, .chooser-head .status { border-radius: 999px; padding: 3px 11px; font-size: 13px; font-weight: 600; }
.status.paid { background: var(--mint); color: var(--green-dark); }
.status.due { background: #fdf0dc; color: #8a4b00; }
.status.cancelled { background: #eef0f2; color: #555; }
.due-figure { font-size: 30px; font-weight: 600; margin-top: 14px; font-variant-numeric: tabular-nums; }
.due-facts { width: 100%; margin: 14px 0 6px; }
.due-card .menu-head { font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin: 12px 2px 6px; }
.due-card .chooser-list { min-height: 0; margin-top: 0; }
.pay-line { display: flex; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.pay-line:last-child { border-bottom: 0; }
.pay-line.struck { text-decoration: line-through; color: var(--muted); }
.fine-print { font-size: 13px; margin: 12px 2px 0; }
.door { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; padding: 11px 14px; border-radius: 12px; background: var(--inset); color: var(--ink); text-decoration: none; }
.door:hover { background: #eceff1; }
.door span { color: var(--muted); }

/* Customers */
.bill-row.person .avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--mint); color: var(--green-dark); display: grid; place-items: center; font-weight: 600; flex: none; }
.bill-row.person .lead strong.name { color: var(--ink); font-size: 16px; }

/* The customer page stacks, as the phone's does: header, account, bills, then the two rows about
   the record itself. A two-up grid put the person's money beside their name, which reads as a
   dashboard rather than a page about somebody. */
.customer-cards { display: block; margin-top: 8px; }
.who { padding: 4px 6px 2px; }
.who .name { display: block; font-size: 22px; font-weight: 600; color: var(--ink); }
.who small { display: block; color: var(--muted); font-size: 15px; margin-top: 2px; }
.who .contact-row { display: flex; gap: 8px; margin-top: 10px; }
.section-head { margin: 16px 6px 6px; font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.card-block { border: 1.5px solid var(--line); border-radius: 16px; padding: 18px; }
.card-block.rows { padding: 0; overflow: hidden; }
.card-block .block-head { font-weight: 600; margin-bottom: 8px; }
.card-block .contact-row { display: flex; gap: 8px; }
.card-block .kv { display: flex; justify-content: space-between; padding: 6px 0; color: var(--muted); }
.card-block .kv strong { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.card-block.rows .kv { padding: 12px 16px; border-bottom: 1px solid #eef0f1; color: var(--ink); }
.card-block.rows .kv strong.nil { color: var(--muted); font-weight: 400; }
.card-block.rows .door { margin: 0; border-radius: 0; background: #fff; }
.card-block.rows .door:hover { background: var(--inset); }
.card-block.rows .empty-line { padding: 14px 16px; margin: 0; font-size: 15px; }
.bill-line { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid #eef0f1; text-decoration: none; color: var(--ink); }
.bill-line:hover { background: var(--inset); }
.bill-line .lead { flex: 1; font-size: 16px; }
.bill-line .tail { text-align: end; display: grid; }
.bill-line .tail strong { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.bill-line .tail small { font-size: 13px; }
.bill-line .tail small.due { color: var(--amber); font-weight: 600; }
.bill-line .chev { color: #c3c6ca; font-size: 20px; }
.person-actions { margin-top: 8px; }
.person-actions .door { width: 100%; border: 0; font: inherit; text-align: start; cursor: pointer; font-size: 16px; }
.person-actions .door + .door { border-top: 1px solid #eef0f1; }
.person-actions .door.danger { color: #b23a2e; }

/* Adding a customer: a pill at rest, and from the first letter the row under the search box. */
.bills-top .btn.add-person { padding: 8px 14px; }
.add-row { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 10px; padding: 12px 16px; border: 0; border-radius: 16px; background: #eaf5ee; font: inherit; font-size: 16px; color: var(--green); cursor: pointer; text-align: start; }
.add-row:hover { background: #dff0e5; }
.add-row .mark { font-size: 20px; font-weight: 600; width: 22px; text-align: center; }
.add-row .lead { flex: 1; }
.add-row .chev { font-size: 20px; }

/* The name in the Dues bar is the door to the person themself. */
h1 .name-door { border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; }
h1 .name-door:hover { text-decoration: underline; }

/* Add a customer, and what can be done to one */
.new-person-card, .person-card { width: min(420px, calc(100vw - 40px)); outline: none; }
.new-person-card .dup-hint { margin: 12px 2px 6px; }
.new-person-card .person-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 16px; border: 1px solid var(--line); border-radius: 28px; background: #fff; font: inherit; cursor: pointer; text-align: start; }
.new-person-card .person-row:hover { background: var(--inset); }
.new-person-card .person-row .avatar { width: 38px; height: 38px; border-radius: 50%; background: #e9eaec; color: var(--ink); display: grid; place-items: center; font-weight: 600; font-size: 16px; flex: none; }
.new-person-card .person-row .lead { flex: 1; font-size: 17px; color: var(--ink); }
.new-person-card .person-row .chev { color: #c3c6ca; font-size: 20px; }
.person-menu { margin: 14px 0 4px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.person-menu .menu-row { display: flex; align-items: center; gap: 8px; width: 100%; padding: 12px 16px; border: 0; background: #fff; font: inherit; cursor: pointer; text-align: start; }
.person-menu .menu-row + .menu-row { border-top: 1px solid #e3e6e9; }
.person-menu .menu-row:hover { background: var(--inset); }
.person-menu .menu-row .lead { flex: 1; display: grid; gap: 2px; }
.person-menu .menu-row .lead strong { font-size: 16px; font-weight: 400; color: var(--ink); }
.person-menu .menu-row .lead small { font-size: 13px; color: var(--muted); }
.person-menu .menu-row.danger .lead strong { color: #b23a2e; }
.person-menu .menu-row .chev { color: var(--muted); font-size: 22px; }
.person-card .step-head { display: flex; align-items: center; gap: 6px; }
.person-card .step-head .back { border: 0; background: none; padding: 0 4px 0 0; font-size: 26px; line-height: 1; color: var(--ink); cursor: pointer; }

/* The Note button under a row being typed, and its card */
.grid tr.draft-actions .btn.note { background: var(--mint); color: var(--green-dark); padding: 7px 14px; margin-inline-start: 0; gap: 6px; }
.grid tr.draft-actions .btn.note:hover { background: #d7ecdf; }
.grid tr.draft-actions .btn.note img { width: 15px; height: 15px; }
.note-card textarea { width: 100%; margin: 14px 0; border: 1.5px solid #cfd4d9; border-radius: 12px; padding: 10px 12px; font: inherit; resize: vertical; outline: none; }
.note-card textarea:focus { border-color: var(--green); }

/* Bills, in the phone's words */
.caps { text-transform: uppercase; letter-spacing: 0.08em; font-size: 13px; }
.bills-summary .caps { color: var(--muted); }
.day-band { justify-content: space-between; align-items: center; }
.day-band .caps { color: var(--muted); }
.day-band .figures { color: var(--ink); font-size: 15px; }
.funnel { border-radius: 50%; width: 46px; height: 46px; }
.funnel.on { background: var(--green); border-color: var(--green); color: #fff; }
.bills-top .back, .bills-top .menu-button { margin-inline-end: 2px; }
.bills-top .back { background: #fff; cursor: pointer; padding: 0; width: 42px; height: 42px; border-radius: 50%; border: 0; box-shadow: 0 2px 10px rgba(31, 42, 36, 0.10); display: grid; place-items: center; font-size: 26px; line-height: 1; color: var(--ink); }
.ledger-top .back, .bill-top .back { border: 0; box-shadow: 0 2px 10px rgba(31, 42, 36, 0.10); width: 42px; height: 42px; font-size: 26px; }

/* Taking a payment on a due */
.btn.amber { background: var(--amber); }
.btn.amber:hover { background: #9a5708; }
.due-card .btn.pay { margin: 14px 0 2px; }
.due-card .owes { margin: 14px 0 12px; font-weight: 600; font-size: 15px; }
.due-card .pay-label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.due-card .pay-amount { width: 100%; border: 1.5px solid #cfd4d9; border-radius: 12px; padding: 12px 14px; font: inherit; font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; outline: none; }
.due-card .pay-amount:focus { border-color: var(--green); }
.due-card .pay-amount.bad { border-color: var(--red); color: var(--red); }
.account-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0 8px; }
.account-card { text-align: start; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; padding: 10px 12px; font: inherit; cursor: pointer; display: flex; flex-direction: column; gap: 1px; color: var(--ink); }
.account-card strong { font-weight: 600; }
.account-card small { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.account-card.on { border-color: var(--green); background: var(--mint); }
.account-card.on.amber { border-color: var(--amber); background: #fdf3e3; }
.account-card .after { color: var(--ink); }
.due-card .consequence { margin: 4px 2px 10px; font-size: 15px; color: var(--muted); }
.due-card .consequence.bad { color: var(--red); }
.due-card .pay-note { width: 100%; border: 1.5px solid #cfd4d9; border-radius: 12px; padding: 10px 12px; font: inherit; outline: none; margin-bottom: 12px; }
.due-card .pay-note:focus { border-color: var(--green); }

/* Reports. The hub is the phone's page: a small grey heading, then a hairline card of rows. */
.reports-hub h2 { font-size: 15px; font-weight: 600; color: var(--muted); margin: 18px 4px 8px; }
.reports-hub h2:first-child { margin-top: 0; }
.report-doors { border: 1px solid #e7e9eb; border-radius: 14px; overflow: hidden; }
.report-door { display: flex; align-items: center; gap: 10px; padding: 12px 20px; color: var(--ink); text-decoration: none; border-top: 1px solid #e7e9eb; font-size: 16px; }
.report-door:first-child { border-top: 0; }
.report-door .icon { width: 38px; display: grid; place-items: center; flex: none; }
.report-door .icon img, .report-door .icon svg { width: 24px; height: 24px; object-fit: contain; }
.report-door .name { flex: 1; }
.report-door .chev { color: var(--muted); font-size: 22px; line-height: 1; }
a.report-door:hover { background: var(--inset); }
.report-door.off { color: var(--muted); cursor: default; }
.report-door.off .icon { opacity: 0.45; }
.report-door.off small { font-size: 13px; }

.print-only { display: none; }
.report-page .ledger-top h1 { font-size: 20px; }
.funnel-wrap { position: relative; display: inline-flex; }
.filter-menu .menu-head.first { border-top: 0; margin-top: 0; }
.filter-menu .menu-hint { margin: 2px 12px 8px; font-size: 15px; color: var(--muted); }
.filter-menu button:disabled { color: #b7bdc4; cursor: default; background: none; }
.grid.total.breakdown tr.part td { background: #fff; font-size: 15px; padding: 9px 12px; border-bottom: 1px solid var(--line); }

/* From / To, and Report year: the phone's two boxed fields with a small grey caption. */
.date-fields { display: flex; gap: 12px; margin: 12px 0; }
.date-fields label { flex: 1; display: flex; flex-direction: column; gap: 2px; border: 1.5px solid #d2dad3; border-radius: 12px; padding: 7px 12px; background: #fff; }
.date-fields label span { font-size: 13px; font-weight: 600; color: var(--muted); }
.date-fields input, .date-fields select { border: 0; outline: 0; font: inherit; font-size: 16px; color: var(--ink); background: none; padding: 0; }
.date-fields label:focus-within { border-color: var(--green); }

/* The app's filter card at the head of a report: the range, the filter field, and what it found. */
.filter-card { border: 1px solid #e3e6e9; border-radius: 8px; padding: 10px; margin: 12px 0 8px; }
.filter-card .date-fields { margin: 0 0 6px; }
.filter-field { display: block; position: relative; width: 100%; text-align: start; font: inherit; border: 1px solid #e3e6e9; border-radius: 8px; background: #f7f8f9; padding: 7px 34px 7px 12px; cursor: pointer; }
.filter-field:hover { background: #f1f3f5; }
.filter-field .cap { display: block; font-size: 13px; font-weight: 600; color: var(--muted); }
.filter-field .val { display: block; font-size: 16px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.filter-field .drop { position: absolute; inset-inline-end: 12px; top: 50%; margin-top: -11px; color: var(--muted); font-weight: 600; }
.filter-status { margin: 8px 2px 0; }
.grid col.c-mid { width: 130px; }
.grid td.mid, .grid th.mid { text-align: center; }

/* The Sales reports: quick-period chips, two answer tiles, and the proportional split bar. */
.period-chips { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.period-chip { border: 1px solid #d7dbde; border-radius: 14px; background: #fff; padding: 5px 12px; font: inherit; font-size: 13px; font-weight: 600; color: #4b5350; cursor: pointer; }
.period-chip:hover { background: var(--inset); }
.period-chip.on { background: var(--mint); border-color: var(--mint); color: var(--green-dark); }
.report-tiles { display: grid; grid-template-columns: 1.5fr 1fr; gap: 8px; margin-bottom: 6px; }
.report-tiles .tile { border: 1px solid #e7e9eb; border-radius: 12px; padding: 9px 12px; display: grid; gap: 1px; }
.report-tiles .caps { font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.report-tiles .figure { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.report-tiles .tile small { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.report-tiles .tile small.amber { color: var(--amber); }
.split-bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: #e3e6e9; margin: 2px 2px 0; }
.split-bar .part.cash { background: #0b6e4f; }
.split-bar .part.bank { background: #6fb59a; }
.split-bar .part.credit { background: #f1d58a; }
.split-words { display: flex; justify-content: space-between; gap: 6px; margin: 2px 2px 8px; font-size: 13px; color: var(--muted); }
.split-words .mid { text-align: center; }
.split-words .amber { color: #9a5b07; }
.scope-note { border: 1px solid #f0dfb4; background: #fffbf0; border-radius: 8px; padding: 7px 10px; margin: 0 0 8px; font-size: 13px; color: #7a5b12; }
.grid col.c-small { width: 78px; }
.grid td.nil { color: var(--muted); }
/* Credit, and a shelf that is short, are the figures worth catching across the counter. */
.grid td.amber { color: #9a5b07; font-weight: 600; }
.grid tr.out td { background: #fdf3e3; }
.grid td.gone { color: var(--muted); }
.report-tiles.narrow-first { grid-template-columns: 1fr 1.3fr; }
.report-tiles .figure.amber-ink { color: #9a5b07; }
.stock-tabs { margin: 12px 0 0; }

/* Business: the settings-list grammar the app's doors are drawn in. One white card, rows inside it,
   an inset hairline between them — the shape that reads as a list rather than a sliced table. */
.settings-page { overflow-y: auto; min-height: 0; padding-bottom: 24px; }
.settings-card { border: 1px solid #e7e9eb; border-radius: 18px; overflow: hidden; margin: 12px 0 10px; background: #fff; }
.settings-row { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 18px; min-height: 56px; border: 0; background: #fff; font: inherit; color: var(--ink); text-align: start; text-decoration: none; cursor: pointer; }
.settings-row + .settings-row { border-top: 1px solid #eff1f3; }
/* Inset to where the words start: the row's padding, the icon, and the gap after it. */
.settings-card .settings-row:not(:first-child) { border-top-width: 1px; }
.settings-row .ico { width: 26px; display: grid; place-items: center; flex: none; }
.settings-row .ico img { width: 24px; height: 24px; object-fit: contain; }
.settings-row .lead { flex: 1; display: grid; gap: 1px; min-width: 0; }
.settings-row .title { font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-row .lead small { font-size: 15px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-row .chev { color: #c3c6ca; font-size: 20px; font-weight: 600; }
.settings-row:hover { background: var(--inset); }
.switch-row { display: flex; align-items: center; gap: 10px; margin-top: 14px; cursor: pointer; }
.switch-row .lead { flex: 1; display: grid; gap: 1px; }
.switch-row .lead strong { font-size: 16px; font-weight: 600; }
.switch-row .lead small { font-size: 13px; color: var(--muted); }
.switch-row input { width: 20px; height: 20px; accent-color: var(--green); }
.name-card, .tax-card, .currency-card, .new-staff-card, .staff-field-card, .staff-made-card { width: min(440px, calc(100vw - 40px)); outline: none; }
.currency-card .picker-list, .tax-card .opening-fields { margin-top: 12px; }
.tax-card { max-height: calc(100vh - 80px); overflow-y: auto; }
.staff-made-card .tick { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--mint); color: var(--green); font-size: 20px; margin-bottom: 10px; }
.staff-made-card .credentials { margin: 14px 0 10px; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: grid; gap: 8px; }
.staff-made-card .kv { display: flex; justify-content: space-between; gap: 12px; }
.staff-made-card .kv span { color: var(--muted); }
.staff-made-card .kv strong { font-weight: 600; }

/* One member of staff */
.settings-page .who { display: flex; align-items: center; gap: 12px; padding: 4px 6px 2px; }
.avatar.big { width: 48px; height: 48px; border-radius: 50%; background: var(--mint); color: var(--green-dark); display: grid; place-items: center; font-weight: 600; font-size: 17px; flex: none; }
.settings-page .who .lead { display: grid; gap: 1px; min-width: 0; }
.status-chip.off { border-radius: 999px; padding: 3px 11px; font-size: 13px; font-weight: 600; background: #fdecea; color: #a24747; }
.bill-row.person .lead small.off { color: #a24747; font-weight: 600; }
.btn.wide.danger-outline { background: #fff; color: #b23a2e; border: 1.5px solid #f0c4c0; margin-top: 8px; }
.btn.wide.danger-outline:hover { background: #fdecea; }
.permission-help { margin: 10px 6px 0; }
.permission-card { margin-top: 6px; }
.permission-row { display: flex; align-items: center; gap: 12px; padding: 11px 18px; cursor: pointer; }
.permission-row + .permission-row { border-top: 1px solid #eff1f3; }
.permission-row:hover { background: var(--inset); }
.permission-row input { width: 19px; height: 19px; accent-color: var(--green); flex: none; }
.permission-row .lead { flex: 1; font-size: 16px; }
/* A dot for the ones worth thinking twice about: they delete records or change the whole shop. */
.impact { width: 8px; height: 8px; border-radius: 50%; background: #e0a800; display: inline-block; flex: none; }
.legend { margin: 10px 6px 0; display: flex; align-items: center; gap: 7px; }
.month-bar { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 12px 0 4px; font-size: 16px; font-weight: 600; }
.month-bar button { border: 0; background: none; font: inherit; font-size: 22px; line-height: 1; color: var(--green); cursor: pointer; padding: 0 6px; }
.salary-figures { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0 4px; border: 1px solid #e7e9eb; border-radius: 16px; padding: 14px 10px; }
.salary-figures div { display: grid; gap: 2px; text-align: center; }
.salary-figures span { font-size: 13px; color: var(--muted); }
.salary-figures strong { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pay-row { display: flex; align-items: center; gap: 12px; padding: 12px 18px; min-height: 56px; }
.pay-row + .pay-row { border-top: 1px solid #eff1f3; }
.pay-row .lead { flex: 1; display: grid; gap: 1px; min-width: 0; }
.pay-row .lead strong { font-size: 17px; font-weight: 400; }
.pay-row .lead small { font-size: 15px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-card .empty-line { padding: 16px 18px; margin: 0; }

/* Account, Subscription and App settings */
.password-card, .language-card { width: min(420px, calc(100vw - 40px)); outline: none; }
.password-card .saved { color: var(--green); font-weight: 600; margin: 12px 0 0; font-size: 15px; }
/* The app's Language page: × | title | spacer, two captioned cards, 64pt rows with a code chip. */
.language-card { top: 50%; transform: translate(-50%, -50%); padding: 14px 0 18px; background: #f7f8f9; }
.language-card .lang-head { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; padding: 0 12px 8px; }
.language-card .lang-head strong { text-align: center; font-size: 20px; color: #185c37; }
.language-card .lang-close { width: 44px; height: 44px; border-radius: 22px; border: 1px solid #e3e6e9; background: #fff; color: #185c37; font-size: 26px; line-height: 1; cursor: pointer; }
.language-card .lang-scroll { max-height: 70vh; overflow-y: auto; padding-bottom: 6px; }
.language-card .lang-section { margin: 8px 18px 2px 34px; font-size: 15px; font-weight: 600; color: var(--muted); }
.language-card .lang-group { margin: 0 18px 8px; background: #fff; border: 1px solid #e3e6e9; border-radius: 12px; overflow: hidden; }
.language-card .lang-row { display: grid; grid-template-columns: 38px 1fr 28px; gap: 12px; align-items: center; width: 100%; min-height: 64px; padding: 11px 16px; border: 0; border-bottom: 1px solid #eff1f3; background: #fff; font: inherit; text-align: start; cursor: pointer; }
.language-card .lang-row:last-child { border-bottom: 0; }
.language-card .lang-row:hover { background: #f7f8f9; }
.language-card .lang-row.on { background: #eff1f3; }
.language-card .chip { width: 38px; height: 38px; border-radius: 19px; display: grid; place-items: center; background: #eff1f3; border: 1px solid #e3e6e9; color: #555; font-size: 15px; font-weight: 600; }
.language-card .on .chip { border-color: #d6e8db; color: #107c41; }
.language-card .names { display: grid; gap: 1px; min-width: 0; }
.language-card .own { font-size: 17px; color: #1f2a24; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.language-card .on .own { font-weight: 600; color: #185c37; }
.language-card .names small { font-size: 15px; color: var(--muted); }
.language-card .tick { color: #107c41; font-size: 20px; font-weight: 600; text-align: end; }
.language-card .lang-changing { padding: 24px 18px; text-align: center; }
.plan-card { padding: 16px 18px; }
.plan-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.plan-head strong { font-size: 15px; font-weight: 600; color: var(--muted); }
.plan-card .plan-status { display: block; font-size: 20px; font-weight: 600; margin-top: 10px; }
.plan-card .muted { margin: 4px 0 0; }
.plan-card .btn.wide { margin-top: 12px; }
.status-pill.on.good { background: var(--mint); color: var(--green-dark); }
.status-pill.on.amber { background: #fff3e5; color: #9b5b00; }
.status-pill.on.bad { background: #fbeaea; color: #b3261e; }
.version { text-align: center; margin: 18px 20px 0; }

/* Top or Bottom, as two picture cards: the words alone say little, so each carries a drawing. */
.layout-question { margin: 16px 6px 2px; font-size: 16px; font-weight: 600; }
.layout-card { display: flex; align-items: flex-start; gap: 16px; width: 100%; margin: 12px 0 0; padding: 14px; border: 1.5px solid #e7e9eb; border-radius: 16px; background: #fff; font: inherit; text-align: start; cursor: pointer; }
.layout-card.on { border-color: var(--green); background: #f5fbf7; }
.layout-card .preview { width: 116px; flex: none; display: grid; gap: 4px; padding: 6px; }
.layout-card .preview .line { height: 7px; border-radius: 2px; background: #f4f5f6; border: 1px solid #c9cfcb; }
.layout-card .preview .line.newest { background: #fff; }
.layout-card .preview .strip { height: 9px; border-radius: 3px; background: #eaf6ee; border: 1px solid var(--green); }
.layout-card .preview .bar { height: 8px; border-radius: 2px; background: #e7e9eb; }
.layout-card .words { display: grid; gap: 8px; }
.layout-card .title { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 600; color: var(--ink); }
.layout-card .radio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #b8c0bb; background: #fff; flex: none; }
.layout-card.on .radio { border-color: var(--green); box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 10px var(--green); }
.layout-card .words small { font-size: 15px; color: var(--muted); }

/* Managing types as a page of its own, not a card over the Ledger. */
.chooser.page { position: static; transform: none; width: 100%; max-height: none; box-shadow: none; border: 1px solid #e7e9eb; padding: 14px; margin-top: 12px; }

/* The Dues report: the whole filter stack folded to one line, and the table it sits over. */
.filter-fold { display: flex; align-items: center; gap: 10px; width: 100%; margin: 12px 0 0; padding: 10px 14px; border: 1.2px solid #bfe0cb; border-radius: 14px; background: #eaf5ef; font: inherit; text-align: start; cursor: pointer; }
.filter-fold .lead { flex: 1; display: grid; gap: 2px; min-width: 0; }
.filter-fold .lead strong { font-size: 15px; font-weight: 600; color: var(--ink); }
.filter-fold .lead small { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* White, not mint: on the card's own pale green wash a mint disc disappears, and the disc is what
   says the whole line is a control before it is touched. */
.filter-fold .disc { width: 30px; height: 30px; border-radius: 50%; background: #fff; display: grid; place-items: center; color: var(--green); font-size: 16px; font-weight: 600; flex: none; }
.filter-panel { display: grid; gap: 12px; margin-top: 12px; }
.filter-panel .date-fields { margin: 0; }
.status-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.status-pill { border: 1px solid #e3e6e9; border-radius: 999px; background: #fff; padding: 7px 4px; font: inherit; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; }
.status-pill.on { color: #fff; }
.status-pill.all.on { background: #555; border-color: #555; }
.status-pill.open.on { background: var(--ink); border-color: var(--ink); }
.status-pill.settled.on { background: var(--green); border-color: var(--green); }
.status-pill.cancelled.on { background: #b42318; border-color: #b42318; }
.history-row { display: flex; align-items: center; gap: 8px; border: 1px solid #e3e6e9; border-radius: 14px; padding: 8px 12px; cursor: pointer; }
.history-row .lead { flex: 1; display: grid; gap: 1px; }
.history-row .lead strong { font-size: 15px; font-weight: 600; }
.history-row .lead small { font-size: 13px; color: var(--muted); }
.history-row input { width: 20px; height: 20px; accent-color: var(--green); }
.segments .collect.on { background: var(--mint); color: var(--green-dark); }
.segments .pay.on { background: #fdf3e3; color: #9a5b07; }
.grid tr.part td { font-size: 13px; color: var(--muted); padding: 5px 12px 5px 28px; background: #fff; }
.grid tr.part.cancel td { color: #b42318; font-weight: 600; }
.grid tr.part .when { margin-inline-end: 12px; }
.grid tr.void td:not(.no) { color: var(--muted); }
.grid td.danger-ink { color: #b42318; }
.grid .empty-row .sub { color: var(--muted); font-weight: 400; }
.party-picker { width: min(420px, calc(100vw - 40px)); outline: none; }
.party-picker .picker-list { margin-top: 12px; }

/* Money track: a card per money, its spending hanging under it on a thread. */
.track-cards { display: grid; gap: 10px; overflow-y: auto; min-height: 0; padding-bottom: 20px; }
.track-card { border: 1px solid #e3e6e9; border-radius: 12px; background: #fff; }
.track-head { display: flex; align-items: center; gap: 7px; padding: 10px 12px 6px; }
.track-head .dot { width: 9px; height: 9px; border-radius: 50%; background: #2f7fd8; flex: none; }
.track-head .batch { color: #2f7fd8; font-size: 15px; font-weight: 600; }
.track-head .name { flex: 1; font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.track-head .in { font-size: 16px; font-weight: 600; color: var(--green); font-variant-numeric: tabular-nums; }
.track-caption { margin: 0 12px 10px 38px; font-size: 13px; color: var(--muted); }
.track-card .track-row:first-of-type { border-top: 1px solid #e3e6e9; }
.track-row { display: flex; align-items: stretch; gap: 8px; padding: 0 12px; min-height: 34px; }
.track-row .gutter { position: relative; width: 18px; flex: none; }
.track-row .gutter .line { position: absolute; left: 50%; top: 0; bottom: 0; width: 1.6px; margin-left: -0.8px; background: #2f7fd8; }
.track-row.last .gutter .line { bottom: 17px; }
.track-row .gutter .node { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: #fff; border: 1.6px solid #2f7fd8; }
.track-row .when { font-size: 12px; color: var(--muted); width: 52px; flex: none; align-self: center; white-space: nowrap; }
.track-row .what { flex: 1; font-size: 15px; align-self: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 7px 0; }
.track-row .out { font-size: 15px; color: #c2410c; align-self: center; font-variant-numeric: tabular-nums; }
.track-empty { text-align: center; margin: 24px 16px; }

/* Select types: the app's sheet as a card — chips with their counts, search, Clear, boxes, Apply (N). */
.type-picker { width: min(460px, calc(100vw - 40px)); outline: none; }
.type-picker .chooser-tabs { margin: 14px 0 10px; }
.picker-search { display: flex; gap: 8px; align-items: center; }
.picker-search .search-box { flex: 1; }
.picked-count { margin: 10px 4px 6px; font-weight: 600; }
.picker-list { max-height: 44vh; overflow-y: auto; border: 1px solid #e3e6e9; border-radius: 14px; }
.picker-list .empty-line { padding: 24px 12px; margin: 0; text-align: center; }
.pick-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 13px 16px; border: 0; background: #fff; font: inherit; font-size: 16px; color: var(--ink); cursor: pointer; text-align: start; }
.pick-row + .pick-row { border-top: 1px solid #eff1f3; }
.pick-row.on { background: #f7f8f9; }
.pick-row .box { width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid #c3c6ca; display: grid; place-items: center; font-size: 15px; color: #fff; flex: none; }
.pick-row.on .box { background: var(--green); border-color: var(--green); }
.pick-row .lead { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Monthly and Yearly. One scroller; the header, the Total and the first two columns stay put. */
.ledger-card.period { display: block; position: relative; }
.period-scroll { height: 100%; overflow: auto; }
.period-grid { border-collapse: separate; border-spacing: 0; min-width: 100%; height: 100%; font-size: 16px; }
.period-grid th, .period-grid td { width: 120px; min-width: 120px; padding: 0 12px; height: 41px; border-inline-end: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fff; text-align: end; white-space: nowrap; font-variant-numeric: tabular-nums; }
.period-grid th { position: sticky; top: 0; z-index: 2; background: var(--inset); font-size: 15px; font-weight: 600; text-align: center; white-space: normal; line-height: 1.2; height: 46px; border-bottom: 1.5px solid #d2dad3; }
.period-grid .fix { position: sticky; z-index: 1; text-align: center; background: #f7f8f9; }
.period-grid th.fix { z-index: 3; background: var(--inset); font-size: 16px; }
.period-grid .fix.no { inset-inline-start: 0; width: 46px; min-width: 46px; padding: 0 4px; font-weight: 600; }
.period-grid .fix.label { inset-inline-start: 46px; width: var(--label-w); min-width: var(--label-w); border-inline-end: 1.5px solid #d2dad3; }
.period-grid .fix.label.start { text-align: start; }
.period-grid tbody tr { cursor: pointer; }
.period-grid tbody tr.selected td { background: #e6f3ec; }
.period-grid tr.fill { cursor: default; }
.period-grid tr.fill td { height: auto; border-bottom: 0; }
.period-grid tfoot td { position: sticky; bottom: 0; z-index: 2; background: var(--inset); font-weight: 600; border-top: 1.5px solid #d2dad3; border-bottom: 0; height: 46px; }
.period-grid tfoot td.total { inset-inline-start: 0; z-index: 3; text-align: start; padding-inline-start: 14px; border-inline-end: 1.5px solid #d2dad3; }
.period-grid .income { color: var(--green); }
.period-grid .expense { color: #cc5348; }

.columns-card { top: 14%; }
.column-list { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 14px; margin: 14px 0 16px; }
.column-list label { display: flex; align-items: center; gap: 9px; padding: 7px 4px; cursor: pointer; }
.column-list input { width: 18px; height: 18px; accent-color: var(--green); }

@media print {
  .print-only { display: block; font-size: 16px; margin: 0 0 10px; }
  .app-shell, .app-main { height: auto; overflow: visible; }
  .report-page { height: auto; max-width: none; padding: 0; }
  .report-page .ledger-card { border-radius: 0; overflow: visible; display: block; }
  .report-page .grid-scroll, .period-scroll { overflow: visible; height: auto; }
  .period-grid { font-size: 12px; width: 100%; }
  .period-grid th, .period-grid td, .period-grid .fix { position: static; width: auto; min-width: 0; padding: 0 5px; height: 24px; }
  .period-grid th, .period-grid th.fix { font-size: 12px; }
  .period-grid tr.fill { display: none; }
  .wide-print { page: wide; }
}
@page wide { size: A4 landscape; margin: 10mm; }

/* A balance below zero is red wherever it stands, as on the phone. */
.ledger-openings .balances b.expense, .ledger-foot .closing strong.neg { color: #cc5348; }

/* Items. The phone's page: the category is the title, search and the funnel share a row, the count
   line sits on the list, and a card is the name over its stock with the rate on the right. */
.title-menu { display: flex; align-items: baseline; gap: 5px; border: 0; background: none; padding: 0; font: inherit; cursor: pointer; color: var(--ink); }
.title-menu h1 { font-size: 20px; }
.title-menu .count { font-size: 15px; color: var(--muted); }
.title-menu .caret { font-size: 17px; line-height: 1; }
.category-menu { position: absolute; inset-inline-start: 56px; top: 58px; z-index: 41; width: 240px; max-height: 60vh; overflow-y: auto; background: #fff; border-radius: 14px; box-shadow: 0 18px 44px rgba(31, 42, 36, 0.22); padding: 6px; display: flex; flex-direction: column; }
.category-menu button { display: flex; justify-content: space-between; gap: 10px; align-items: center; text-align: start; border: 0; background: none; font: inherit; padding: 10px 12px; border-radius: 9px; cursor: pointer; color: var(--ink); }
.category-menu button:hover { background: var(--inset); }
.category-menu button small { color: var(--muted); font-size: 15px; }
.category-menu .on { color: var(--green-dark); font-weight: 600; }

.items-page .bills-search { margin: 14px 0 8px; }
.filter-menu button small { position: absolute; inset-inline-end: 30px; color: var(--muted); font-size: 15px; font-weight: 400; }
.filter-menu button.trouble small { color: #9a5b07; font-weight: 600; }
.items-summary { font-size: 13px; font-weight: 600; color: var(--muted); padding: 0 2px 8px; }
.items-summary.amber { color: #9a5b07; }
.items-list { flex: 1; min-height: 0; overflow-y: auto; border-top: 1px solid var(--line); }
.items-list.is-loading { opacity: 0.55; }
.item-row { display: flex; align-items: center; gap: 12px; padding: 11px 4px; border-bottom: 1px solid var(--line); }
.item-row.can-edit { cursor: pointer; }
.item-row.can-edit:hover { background: var(--inset); }
.item-row .what { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.item-row .name { font-size: 17px; }
.item-row .stock { font-size: 15px; color: var(--muted); }
.item-row .stock.amber { color: #9a5b07; font-weight: 600; }
.item-row .rate { font-size: 17px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.item-row .rate.none { color: #b4bac0; }
.item-row .chev { color: #a0a5a9; font-size: 20px; line-height: 1; }
.letter-band { position: sticky; top: 0; z-index: 1; background: #fff; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); padding: 9px 4px 4px; }



/* The item editor: the app's rows, on one rail, parted by air. Caption 13 over value 17, a hairline
   under every row, and no third size on the page. */
.editor-page { overflow-y: auto; }
.editor-body { padding: 12px 0 18px; }
.editor-body.is-loading { opacity: 0.55; pointer-events: none; }
.field-group { padding: 0 20px; }
.field-group.parted { margin-top: 28px; }
.field { position: relative; padding-top: 4px; background: #fff; }
.field .caption { display: block; font-size: 15px; color: var(--muted); opacity: 0; transition: opacity 0.12s ease; }
.field .caption.up { opacity: 1; }
.field .value { display: flex; align-items: center; gap: 8px; height: 40px; }
.field .value input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: 17px; color: var(--ink); padding: 0; height: 40px; }
.field .value input::placeholder { color: var(--muted); }
.field .suffix { font-size: 15px; color: var(--muted); white-space: nowrap; }
.field .line { height: 1px; background: #d7dbde; }
.field:focus-within .caption { color: var(--green); }
.field:focus-within .line { background: var(--green); height: 1.5px; }
.field.bad .caption, .field.bad .value input { color: #b42318; }
.field.bad .line { background: #b42318; }
.field.opener .value span { flex: 1; min-width: 0; font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.field.opener .value .rest { color: var(--muted); }
.field.opener .value .ink { color: var(--ink); }
.field.opener .value .amber { color: #9a5b07; }
.field.opener .value .done { color: #0b6e4f; }
.field.opener .chev { flex: none; font-size: 17px; color: var(--muted); }
.field.opener.opens { cursor: pointer; }
.field.opener.opens:hover .line { background: #b9c2bc; }

.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; font-size: 17px; }
.switch { position: relative; display: inline-block; width: 51px; height: 31px; flex: none; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.switch .track { position: absolute; inset: 0; background: #e3e6e9; border-radius: 16px; transition: background 0.15s ease; }
.switch .track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: transform 0.15s ease; }
.switch input:checked + .track { background: var(--green); }
.switch input:checked + .track::after { transform: translateX(20px); }

.save-word { border: 0; background: none; font: inherit; font-weight: 600; font-size: 16px; color: var(--muted); padding: 8px; cursor: pointer; }
.save-word.ready { color: var(--green); }
.save-word:disabled { cursor: default; }

.delete-item { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 48px; margin-top: 28px; border: 1px solid #f1c4bf; border-radius: 24px; background: #fff; font: inherit; font-weight: 600; font-size: 16px; color: #b42318; cursor: pointer; }
.delete-item:hover { background: #fdecea; }
.delete-item svg { width: 18px; height: 18px; }

/* Choose category and Sold by: the app's picker pages. */
.picker-search { position: relative; display: flex; align-items: center; margin: 14px 20px 6px; border-bottom: 1px solid #d7dbde; }
.picker-search input { flex: 1; border: 0; outline: 0; background: none; font: inherit; font-size: 17px; color: var(--ink); padding: 10px 0; }
.picker-search input::placeholder { color: #b4bac0; }
.picker-search .clear { border: 0; width: 20px; height: 20px; border-radius: 50%; background: #c3c6ca; color: #fff; font-size: 13px; line-height: 1; cursor: pointer; padding: 0; }
.picker-list { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 20px 20px; }
.picker-list h2 { font-size: 15px; color: var(--muted); font-weight: 400; margin: 20px 0 6px; }
.picker-list h2:first-child { margin-top: 6px; }
.picker-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: start; border: 0; border-bottom: 1px solid var(--line); background: none; font: inherit; font-size: 17px; color: var(--ink); padding: 12px 2px; cursor: pointer; }
.picker-row:hover { background: var(--inset); }
.picker-row span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-row .on { color: var(--green-dark); font-weight: 600; }
.picker-row small { color: var(--muted); font-size: 15px; }
.picker-row .tick { color: var(--green); font-weight: 600; font-size: 20px; }
.picker-row.create { color: var(--green-dark); font-weight: 600; }

/* Edit stock. */
.stock-body { padding: 12px 20px 18px; }
.stock-heading strong { display: block; font-size: 17px; font-weight: 600; }
.stock-heading .muted { font-size: 15px; }
.segments { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; background: #e7e9eb; border-radius: 26px; padding: 4px; margin: 18px 0 10px; }
.segments button { border: 0; background: none; font: inherit; font-size: 16px; color: var(--ink); height: 40px; border-radius: 22px; cursor: pointer; }
.segments button.on { background: #fff; font-weight: 600; box-shadow: 0 1px 3px rgba(31, 42, 36, 0.14); }
.stock-preview { margin: 10px 0 0; font-size: 16px; color: var(--green-dark); font-variant-numeric: tabular-nums; }
.reason-title { margin: 18px 0 8px; font-size: 15px; color: var(--muted); }
.reason-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.reason-chips button { border: 1px solid #d7dbde; border-radius: 18px; background: #fff; font: inherit; font-size: 15px; color: var(--ink); height: 36px; padding: 0 14px; cursor: pointer; }
.reason-chips button.on { border-color: var(--green); background: var(--mint); color: var(--green-dark); font-weight: 600; }

/* The Ledger's opening balances are a door, as on the phone. */
.ledger-openings .balances.can-edit { position: relative; cursor: pointer; border-radius: 8px; padding: 2px 20px 2px 6px; margin-inline-start: -6px; }
.ledger-openings .balances.can-edit .chev { position: absolute; inset-inline-end: 6px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 17px; }
.ledger-openings .balances.can-edit:hover { background: var(--inset); }
.opening-card { width: min(380px, calc(100vw - 40px)); }
.opening-fields { margin: 6px 0 4px; }
.opening-fields .field + .field { margin-top: 12px; }

/* The Choose type card's Other tab: four fixed rows, each saying what it does. */
.chooser-tabs .tab.other.on { background: #eef1f3; color: #1f2a24; }
.chooser-list.moves { background: #eff1f3; gap: 1px; display: flex; flex-direction: column; }
.chooser-list .move { display: flex; align-items: center; gap: 12px; width: 100%; text-align: start; border: 0; background: #fff; font: inherit; padding: 14px 16px; cursor: pointer; color: var(--ink); }
.chooser-list .move:hover { background: var(--inset); }
.chooser-list .move img { width: 26px; height: 26px; object-fit: contain; flex: none; }
.chooser-list .move .what { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.chooser-list .move .what strong { font-size: 16px; font-weight: 400; }
.chooser-list .move .what small { font-size: 15px; color: var(--muted); }
.chooser-list .move .chev { color: var(--muted); font-size: 20px; }

/* The four money screens. One bar, one rail, a 24pt amount, and the Save pill. */
.money-card { position: fixed; z-index: 51; inset-inline-start: var(--card-x, 50%); top: 6vh; transform: translateX(-50%); width: min(440px, calc(100vw - 32px)); max-height: 88vh; overflow-y: auto; background: #fff; border-radius: 18px; box-shadow: 0 24px 60px rgba(31, 42, 36, 0.3); outline: 0; }
.money-bar { display: flex; align-items: center; gap: 12px; padding: 14px 16px 16px; }
.money-bar .round { width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--inset); font-size: 16px; line-height: 1; cursor: pointer; color: var(--ink); flex: none; }
.money-bar .titles { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.money-bar .titles strong { font-size: 17px; font-weight: 600; }
.money-bar .titles span { font-size: 15px; color: var(--muted); }
.money-bar .btn.save-pill { border-radius: 20px; padding: 8px 18px; }
.money-bar .btn.save-pill.idle { background: #8a8f94; }
.money-body { padding: 0 20px 18px; }
.money-body.is-loading { opacity: 0.55; pointer-events: none; }
.rail-caption { margin: 0 0 8px; font-size: 15px; font-weight: 600; color: var(--muted); }
.money-body .account-cards { margin-bottom: 4px; }
.money-amount { margin-top: 14px; }
.money-amount .field .value input { font-size: 24px; font-weight: 600; height: 44px; }
.money-amount .consequence { margin: 8px 0 0; font-size: 15px; color: var(--muted); }
.money-amount .consequence.bad { color: #b42318; font-weight: 600; }
.money-body > .field { margin-top: 14px; }
.money-body .delete-item { margin-top: 24px; }

.staff-box { display: flex; align-items: center; gap: 10px; width: 100%; height: 56px; padding: 0 16px; border: 1px solid #e7e9eb; border-radius: 14px; background: #fff; font: inherit; font-size: 17px; color: var(--ink); cursor: pointer; text-align: start; }
.staff-box:hover { background: var(--inset); }
.staff-box span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.staff-box .rest { color: var(--muted); }
.staff-box .chev { color: var(--muted); font-size: 20px; }
.staff-picker { width: min(360px, calc(100vw - 40px)); }
.staff-picker .picker-list { max-height: 46vh; padding: 6px 0 10px; }

.transfer-card { display: flex; align-items: center; gap: 12px; border: 1px solid #e7e9eb; border-radius: 14px; padding: 6px 16px; }
.transfer-rows { flex: 1; min-width: 0; }
.transfer-row { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; }
.transfer-row + .transfer-row { border-top: 1px solid var(--line); }
.transfer-row .line1 small { font-size: 15px; color: var(--muted); margin-inline-end: 6px; }
.transfer-row .line1 strong { font-size: 17px; font-weight: 600; }
.transfer-row .line2 { font-size: 16px; color: #4a5058; font-variant-numeric: tabular-nums; }
.transfer-row .line2 b { font-weight: 600; color: var(--ink); }
.transfer-card .swap { width: 44px; height: 44px; flex: none; border: 0; border-radius: 22px; background: #f2f3f5; display: grid; place-items: center; cursor: pointer; }
.transfer-card .swap:hover { background: #e7e9eb; }
.transfer-card .swap svg { width: 18px; height: 18px; }

/* Paint and Track: tools held over the sheet. Their tray is pinned at its foot. */
.tool-circle.armed { border-color: var(--green); background: var(--mint); position: relative; }
.tool-circle .swatch { position: absolute; inset-inline-end: -2px; bottom: -2px; width: 14px; height: 14px; border-radius: 5px; border: 1px solid; }
.tool-bar { flex: none; margin-top: 10px; background: #fff; border: 1px solid #e3e6e9; border-radius: 14px; padding: 12px; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.10); }
.tool-bar .swatches { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 10px; }
.tool-bar .swatches .swatch { width: 32px; height: 32px; flex: none; border-radius: 9px; border: 1px solid; cursor: pointer; padding: 0; }
.tool-bar .swatches .swatch.on { border-width: 2px; }
.tool-bar .tool-line { display: flex; align-items: center; gap: 10px; }
.tool-bar .tool-line > span { flex: 1; min-width: 0; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tool-bar .told { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.tool-bar .told strong { font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tool-bar .told small { font-size: 15px; color: var(--muted); }
.tool-bar .told small.bad { color: #b42318; }
.tool-bar .btn { padding: 7px 16px; border-radius: 10px; font-size: 15px; }
.grid tr.held td { box-shadow: inset 0 0 0 1.5px var(--green); }

/* The tree over the money list. */
.tree-card { width: min(420px, calc(100vw - 40px)); top: 12%; padding: 18px; }
.tree-head { display: flex; align-items: center; gap: 10px; }
.tree-head strong { flex: 1; font-size: 16px; }
.tree-head .round { width: 30px; height: 30px; border-radius: 50%; border: 0; background: var(--inset); cursor: pointer; font-size: 15px; line-height: 1; color: var(--ink); }
.tree-body { max-height: 52vh; overflow-y: auto; margin-top: 14px; }
.tree-body .node { display: flex; gap: 12px; padding: 8px 0 8px 4px; position: relative; }
.tree-body .node + .node { border-inline-start: 1px solid var(--line); margin-inline-start: 9px; padding-inline-start: 15px; }
.tree-body .node .dot { width: 11px; height: 11px; flex: none; margin-top: 5px; border-radius: 50%; background: var(--green); }
.tree-body .node .dot.hollow { background: #fff; border: 1.5px solid #b9c2bc; }
.tree-body .node.root .what strong { font-size: 16px; }
.tree-body .what { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tree-body .what strong { font-weight: 600; }
.tree-body .what small { font-size: 13px; color: var(--muted); }
.tree-body .batch { color: #2f6fd0; font-weight: 600; margin-inline-start: 4px; }

/* The photo viewer: the picture on a dark ground, as in the app. */
.photo-viewer { position: fixed; inset: 0; z-index: 60; background: #14181a; display: flex; flex-direction: column; outline: 0; }
.photo-bar { display: flex; align-items: center; gap: 14px; padding: 14px 18px; color: #fff; }
.photo-bar .round { width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.16); color: #fff; font-size: 16px; line-height: 1; cursor: pointer; }
.photo-bar .count { font-size: 15px; color: #cdd3d6; font-variant-numeric: tabular-nums; }
.photo-bar .danger-word { border: 0; background: none; font: inherit; font-weight: 600; font-size: 16px; color: #ff6b5e; cursor: pointer; padding: 6px 4px; }
.photo-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0 12px 24px; }
.photo-stage img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; }
.photo-stage .muted { color: #9aa19d; }
.photo-stage .step { width: 44px; height: 44px; flex: none; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.14); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; }
.photo-stage .step:hover { background: rgba(255, 255, 255, 0.24); }
.grid .clip { border: 0; background: none; font: inherit; font-size: 13px; color: var(--muted); cursor: pointer; padding: 0 2px; display: block; }
.grid .clip:hover { color: var(--green-dark); }
.chooser-head .spacer { flex: 1; }
.chooser-head .link { font-weight: 600; font-size: 15px; }
.chooser-list .type.manage { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: #fff; }
.chooser-list .type.manage .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chooser-list .type.manage small { color: var(--muted); font-size: 13px; }
.chooser-list .type.manage .link { font-size: 15px; font-weight: 600; }
.chooser-list .type.manage .link.red { color: var(--red); }
.chooser-list .type.manage .rename { flex: 1; min-width: 0; border: 0; border-bottom: 1.5px solid var(--green); outline: 0; font: inherit; font-size: 16px; padding: 4px 0; background: none; }
/* A question asked from inside the viewer has to sit on top of it, not behind. */
.photo-viewer ~ .scrim { z-index: 70; }
.photo-viewer ~ .confirm { z-index: 71; }

/* The photo strip on the note card: three pictures at most, and the tile that adds one. */
.photo-strip { margin-top: 16px; }
.photo-strip .rail-caption { margin-bottom: 8px; }
.photo-strip .tiles { display: flex; gap: 10px; flex-wrap: wrap; }
.photo-strip .tile { position: relative; width: 84px; height: 84px; border-radius: 12px; overflow: hidden; background: var(--inset); border: 1px solid var(--line); flex: none; }
.photo-strip .tile img { width: 100%; height: 100%; object-fit: cover; }
.photo-strip .tile .drop { position: absolute; top: 4px; inset-inline-end: 4px; width: 22px; height: 22px; border: 0; border-radius: 50%; background: rgba(20, 24, 26, 0.65); color: #fff; font-size: 13px; line-height: 1; cursor: pointer; padding: 0; }
.photo-strip .tile.add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; background: #fff; border-style: dashed; border-color: #c7d0ca; padding: 6px; }
.photo-strip .tile.add img { width: 24px; height: 24px; object-fit: contain; }
.photo-strip .tile.add small { font-size: 12px; color: var(--muted); text-align: center; line-height: 1.2; }
.photo-strip .tile.add:hover { background: var(--inset); }
.photo-strip .hint { margin: 8px 0 0; font-size: 15px; color: var(--muted); }
.photo-strip .hint.bad { color: #b42318; }

/* The till. The bar carries the bill; the shelf is tiles; a tap adds one. */
.till-page .till-bar { gap: 10px; }
.ticket { text-decoration: none; display: inline-flex; align-items: center; gap: 8px; background: var(--green); color: #fff; border-radius: 16px; padding: 7px 12px; font-size: 15px; }
.ticket .word { color: #d5ebdd; font-size: 15px; }
.ticket strong { font-weight: 600; font-variant-numeric: tabular-nums; }
a.ticket { cursor: pointer; }
a.ticket:hover { background: var(--green-dark); }
.ticket .count { background: #fff; color: var(--green); border-radius: 9px; min-width: 20px; height: 20px; display: grid; place-items: center; font-size: 13px; font-weight: 600; padding: 0 5px; }
.saved-bill { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid #9cd3b4; border-radius: 16px; background: #e7f4ec; color: #0b6e4f; font-size: 15px; font-weight: 600; text-decoration: none; max-width: 60vw; }
.saved-bill .tick { font-size: 13px; }
.saved-bill .number { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.saved-bill .chev { opacity: 0.8; }
.saved-bill:hover { background: #dcefe3; }
.ticket.idle { background: var(--inset); color: var(--muted); font-weight: 600; font-size: 17px; padding: 5px 14px; }
.clear-bill { width: 30px; height: 30px; border-radius: 50%; border: 0; background: var(--inset); color: #41504a; font-size: 15px; line-height: 1; cursor: pointer; padding: 0; flex: none; }
.clear-bill:hover { background: #e3e6e9; }
.cleared-bill { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border: 1px solid #d7dbde; border-radius: 16px; background: #fff; font: inherit; font-size: 13px; color: #41504a; cursor: pointer; }
.cleared-bill strong { font-weight: 600; color: #0b6e4f; }
.cleared-bill:hover { background: #f7f8f9; }

.till-filter { position: relative; display: flex; gap: 8px; margin: 12px 0 10px; }
.till-filter .face { display: flex; align-items: center; gap: 7px; border: 1px solid #e3e6e9; border-radius: 14px; background: #fff; font: inherit; padding: 9px 14px; cursor: pointer; color: var(--ink); }
.till-filter .face strong { font-weight: 600; font-size: 15px; }
.till-filter .face .count { font-size: 13px; color: var(--muted); }
.till-filter .face .caret { font-size: 15px; color: #41504a; }
.till-filter .face.search { flex: 1; color: #b4bac0; font-size: 15px; }
.till-filter .face.search img { width: 15px; height: 15px; opacity: 0.6; }
.till-filter .search-face { flex: 1; display: flex; align-items: center; gap: 10px; border: 1px solid var(--green); border-radius: 14px; background: #fff; padding: 0 14px; }
.till-filter .search-face img { width: 15px; height: 15px; }
.till-filter .search-face input { flex: 1; min-width: 0; border: 0; outline: 0; font: inherit; font-size: 15px; padding: 10px 0; background: none; }
.till-filter .search-face .x { border: 0; background: none; font-size: 15px; color: #41504a; cursor: pointer; padding: 4px; }
.till-filter .category-menu { inset-inline-start: 0; top: 48px; }

.shelf { flex: 1; min-height: 0; overflow-y: auto; }
.shelf.is-loading { opacity: 0.55; }
.shelf-band { display: flex; align-items: baseline; gap: 8px; padding: 10px 2px 6px; }
.shelf-band span { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; color: var(--muted); text-transform: uppercase; }
.shelf-band small { font-size: 13px; color: var(--muted); font-weight: 600; }
.shelf .tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.shelf .tile { position: relative; display: flex; flex-direction: column; gap: 3px; align-items: flex-start; text-align: start; min-height: 62px; border: 1px solid #e3e6e9; border-radius: 12px; background: #fff; padding: 10px 12px; font: inherit; cursor: pointer; color: var(--ink); }
.shelf .tile:hover { border-color: #b9c2bc; }
.shelf .tile:disabled { cursor: default; opacity: 0.6; }
.shelf .tile .name { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.shelf .tile .rate { font-size: 13px; color: var(--muted); }
.shelf .tile.out { background: #fdf4e7; border-color: #e9c68d; }
.shelf .tile .out-word { font-size: 12px; font-weight: 600; color: #9a5b07; }
.shelf .tile .badge { position: absolute; top: 6px; inset-inline-end: 6px; background: var(--green); color: #fff; border-radius: 9px; min-width: 22px; height: 20px; display: grid; place-items: center; font-size: 13px; font-weight: 600; padding: 0 6px; }

/* The till's keypad: the mode, the presets, the figure, and the pad that types it. Add is the pad's
   own bottom-right key, so the last thing under the thumb is the figure being agreed to. */
.keypad-page { padding-bottom: 0; }
.keypad-sub { margin: 2px 0 10px; font-size: 13px; color: var(--muted); }
.keypad-modes { margin: 0 0 12px; }
.presets { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 10px; }
.presets button { flex: none; height: 32px; padding: 0 13px; border: 1px solid #d7dbde; border-radius: 16px; background: #fff; font: inherit; font-size: 15px; font-weight: 600; color: var(--ink); cursor: pointer; }
.presets button.on { background: #1c1c1e; border-color: #1c1c1e; color: #fff; }
.figure-row { display: flex; align-items: flex-end; gap: 10px; margin-top: 2px; }
.figure-row .figure { display: flex; align-items: flex-end; gap: 5px; min-width: 0; }
.figure-row .figure b { font-size: 36px; font-weight: 600; line-height: 1.05; font-variant-numeric: tabular-nums; }
.figure-row .figure b.rest { color: #b4bac0; }
.figure-row .figure .unit { font-size: 16px; color: var(--muted); padding-bottom: 7px; }
.figure-row .figure .prefix { font-size: 20px; color: var(--muted); padding-bottom: 6px; }
.figure-row .backspace { width: 64px; height: 52px; border: 0; background: none; font-size: 34px; line-height: 1; color: #41504a; cursor: pointer; padding: 0; }
.figure-row .backspace:hover { color: var(--ink); }
.preview { min-height: 34px; margin: 6px 0 10px; }
.preview .line { display: flex; align-items: center; gap: 10px; min-height: 24px; }
.preview .detail { flex: 1; min-width: 0; font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preview .line strong { font-size: 20px; font-weight: 600; color: var(--green); font-variant-numeric: tabular-nums; }
.preview .amber, .preview .detail.amber { color: #9a5b07; font-weight: 600; }
.preview .helper { display: block; font-size: 13px; color: var(--muted); margin-top: 4px; }
.preview .remove { border: 0; background: none; font: inherit; font-weight: 600; font-size: 15px; color: #b42318; cursor: pointer; padding: 6px 0 0; }
.numberpad { flex: 1; min-height: 240px; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(4, 1fr); gap: 1px; background: var(--line); margin: 0 -20px; border-top: 1px solid var(--line); }
.numberpad .key { border: 0; background: #fff; font: inherit; font-size: 30px; color: var(--ink); cursor: pointer; }
.numberpad .key:hover { background: #f7f8f9; }
.numberpad .key.soft { color: var(--muted); }
.numberpad .key.commit { font-size: 22px; font-weight: 600; color: var(--muted); }
.numberpad .key.commit.ready { background: var(--green); color: #fff; }
.numberpad .key.commit.ready:hover { background: var(--green-dark); }
.shelf .tile .badge { cursor: pointer; }

/* The Bill page: what is on it, the total, and one green Charge. */
.bill-lines { flex: 1; min-height: 0; overflow-y: auto; }
.bill-line { display: flex; align-items: center; gap: 12px; padding: 11px 2px; border-bottom: 1px solid var(--line); }
.bill-line .what { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.bill-line .name { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bill-line .what small { font-size: 13px; color: var(--muted); }
.bill-line .stepper { display: inline-flex; align-items: center; border: 1px solid #d7dbde; border-radius: 16px; overflow: hidden; flex: none; }
.bill-line .stepper button { border: 0; background: #fff; font: inherit; font-size: 17px; line-height: 1; width: 32px; height: 32px; cursor: pointer; color: var(--ink); }
.bill-line .stepper button:hover { background: var(--inset); }
.bill-line .stepper .figure { width: auto; min-width: 42px; padding: 0 8px; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.bill-line .qty-open { border: 1px solid #d7dbde; border-radius: 16px; background: #fff; font: inherit; font-size: 13px; color: var(--muted); height: 32px; padding: 0 12px; cursor: pointer; flex: none; }
.bill-line .amount { min-width: 92px; text-align: end; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.bill-line .drop { width: 26px; height: 26px; border: 0; border-radius: 50%; background: var(--inset); color: #41504a; font-size: 13px; line-height: 1; cursor: pointer; padding: 0; flex: none; }
.bill-line .drop:hover { background: #e3e6e9; }
.add-more { display: block; width: 100%; border: 0; background: none; font: inherit; font-weight: 600; font-size: 15px; color: var(--green-dark); cursor: pointer; padding: 16px 0; text-align: start; }
.bill-foot { flex: none; border-top: 1px solid var(--line); padding-top: 12px; }
.bill-foot .total-row { display: flex; align-items: baseline; justify-content: space-between; }
.bill-foot .total-row span { font-size: 16px; color: var(--muted); }
.bill-foot .total-row strong { font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; }
.bill-foot .tax-hint { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
.bill-foot .charge { margin-top: 12px; background: #1c1c1e; font-size: 16px; padding: 15px; border-radius: 14px; }
.bill-foot .charge:hover:not(:disabled) { background: #000; }

/* Paying. Cash and Bank are the commit. */
.payment-page .pay-head { margin: 4px 0 18px; }
.payment-page .pay-head strong { display: block; font-size: 34px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.1; }
.payment-page .pay-head span { font-size: 15px; color: var(--muted); }
.payment-page .pay-error { margin: 0 0 12px; }
.pay-buttons { display: flex; flex-direction: column; gap: 10px; }
.pay-buttons .pay { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 58px; border: 1px solid #d7dbde; border-radius: 14px; background: #fff; font: inherit; font-size: 17px; font-weight: 600; color: var(--ink); cursor: pointer; }
.pay-buttons .pay:hover:not(:disabled) { background: var(--inset); }
.pay-buttons .pay:disabled { opacity: 0.5; cursor: default; }
.pay-buttons .pay.cash, .pay-buttons .pay.bank { border-color: var(--green); color: var(--green-dark); }
.pay-buttons .pay small { font-size: 13px; font-weight: 400; color: #6e7a74; }
.pay-buttons .pay small.amber { color: #9a5b07; font-weight: 600; }
.customer-card { margin-top: 18px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.customer-row { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: #fff; font: inherit; font-size: 16px; color: var(--ink); padding: 14px 16px; cursor: pointer; text-align: start; }
.customer-row:hover { background: var(--inset); }
.customer-row span:first-child { flex: 1; min-width: 0; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.customer-row span.named { color: var(--ink); }
.customer-row .chev { color: var(--muted); font-size: 20px; }
.customer-row .drop { width: 22px; height: 22px; border-radius: 50%; background: var(--inset); color: #41504a; font-size: 13px; display: grid; place-items: center; }
.credit-step { width: min(380px, calc(100vw - 40px)); }
.credit-step .account-cards { margin: 4px 0 0; }
.credit-step .consequence { margin: 10px 0 0; font-size: 15px; color: var(--muted); }
.credit-step .consequence.bad { color: #b42318; font-weight: 600; }
.picker-row small.owed { color: #9a5b07; font-weight: 600; }
a.picker-row { text-decoration: none; }
.picker-list .field-error.pad, .picker-list .muted.pad { padding: 14px 2px; margin: 0; }
.editor-body .btn.wide { margin-top: 24px; }
.picker-row .tick.chev { color: #a0a5a9; font-weight: 400; }
.category-editor { width: min(380px, calc(100vw - 40px)); }
.category-editor .confirm-actions { align-items: center; }
.category-editor .link.red.delete { margin-inline-end: auto; color: var(--red); font-weight: 600; font-size: 15px; }
.more-wrap { position: relative; display: inline-flex; }
.more-wrap .more { width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--line); background: #fff; font-size: 20px; line-height: 1; color: var(--ink); cursor: pointer; padding: 0; }
.more-wrap .more:hover { background: var(--inset); }
.more-wrap .filter-menu { width: 180px; top: 46px; }
.filter-menu button.red { color: var(--red); }
.editing-note { font-size: 13px; color: #9a5b07; font-weight: 600; }
.whatsapp-sheet { width: min(420px, calc(100vw - 40px)); top: 8%; max-height: 84vh; overflow-y: auto; }
.preview-heading { margin: 22px 0 8px; font-size: 13px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.whatsapp-preview { background: #e7f6ea; border-radius: 12px; padding: 12px 14px; font-size: 15px; line-height: 1.5; }
.whatsapp-preview p { margin: 0; min-height: 6px; white-space: pre-wrap; }
.whatsapp-sheet .muted.small { font-size: 13px; margin: 12px 0 0; }

/* What happened to a due: two answers, each stating what it does. */
.ending-card { width: min(400px, calc(100vw - 40px)); }
.endings { display: flex; flex-direction: column; gap: 10px; margin: 14px 0 12px; }
.endings .ending { display: flex; flex-direction: column; align-items: center; gap: 2px; border: 1px solid #d7dbde; border-radius: 14px; background: #fff; font: inherit; padding: 14px 16px; cursor: pointer; text-align: center; }
.endings .ending .statement { font-size: 16px; font-weight: 600; color: var(--ink); }
.endings .ending small { font-size: 13px; color: var(--muted); }
.endings .ending.keep { border-color: #e9c68d; background: #fdf8ec; }
.endings .ending.keep .statement { color: #8a5a12; }
.endings .ending.drop { border-color: #f1c4bf; background: #fdf3f2; }
.endings .ending.drop .statement { color: var(--red); }
.endings .ending:disabled { opacity: 0.5; cursor: default; }
.ending-card .add-reason { font-weight: 600; font-size: 15px; }
.ending-card .muted.small { font-size: 13px; margin: 6px 0 0; }
.due-card .end-due { display: block; width: 100%; text-align: center; font-weight: 600; font-size: 15px; margin: 14px 0 2px; }
.pay-line .drop { width: 22px; height: 22px; border: 0; border-radius: 50%; background: var(--inset); color: #41504a; font-size: 13px; line-height: 1; cursor: pointer; padding: 0; margin-inline-start: 8px; flex: none; }
.pay-line .drop:hover { background: #fdecea; color: var(--red); }
.pay-line { display: flex; align-items: center; }
.settle-card { width: min(380px, calc(100vw - 40px)); }
.settle-card .owing { margin: 14px 0 4px; font-size: 16px; color: var(--ink); }
.settle-card .account-cards { margin-top: 4px; }
.settle-card .consequence { margin: 10px 0 0; font-size: 15px; color: var(--muted); }
.settle-card .consequence.bad { color: #b42318; font-weight: 600; }

/* The Ledger's right-hand pane. Below 1240 wide it is not there at all (display: contents), so its
   cards open over the page exactly as before. From 1240 the cards that make or change an entry dock
   into it: the sheet shrinks to make room and stays usable beside them. Small yes/no questions and
   a card opened from inside a card (the staff picker) still open over everything. */
.ledger-split { display: contents; }
.side-pane { display: contents; }
@media (min-width: 1240px) {
  .ledger-split { display: flex; flex: 1; min-height: 0; width: 100%; height: 100%; }
  .ledger-split > .ledger-page { flex: 1 1 auto; min-width: 0; }
  .app-main:has(.ledger-split.pane-open) { flex: 1 1 auto; }
  .side-pane { display: flex; flex-direction: column; flex: 0 0 420px; height: 100vh; position: sticky; top: 0; overflow-y: auto; padding-block: 16px; padding-inline: 4px 16px; box-sizing: border-box; }
  .ledger-split .side-pane > .scrim:has(+ .chooser), .ledger-split .side-pane > .scrim:has(+ .money-card), .ledger-split .side-pane > .scrim:has(+ .opening-card), .ledger-split .side-pane > .scrim:has(+ .tree-card) { display: none; }
  .ledger-split .side-pane > .chooser, .ledger-split .side-pane > .money-card, .ledger-split .side-pane > .opening-card, .ledger-split .side-pane > .tree-card {
    top: auto; height: auto; border-radius: 18px; border-inline-start: 1.5px solid #e3e6e9;
    position: static; transform: none; inset: auto; width: 100%; max-width: none; max-height: none; box-shadow: none; border: 1.5px solid #e3e6e9; z-index: auto; }
  .side-pane > .chooser:not(.note-card) { flex: 1; min-height: 0; }
  .side-pane > .money-card { max-height: none; overflow: visible; }
}

/* Sales: shelf left, the step in hand right (SalesSplit). Narrow: one screen at a time — the till
   shows the shelf alone, every other step shows its own screen alone. */
.sales-split { display: contents; }
.sales-shelf, .sales-pane { display: contents; }
.sales-split.at-till > .sales-pane, .sales-split:not(.at-till) > .sales-shelf { display: none; }
@media (min-width: 1240px) {
  .app-main:has(.sales-split) { flex: 1 1 auto; }
  .sales-split { display: flex; flex: 1; min-height: 0; width: 100%; height: 100vh; }
  .sales-split > .sales-shelf, .sales-split.at-till > .sales-pane, .sales-split:not(.at-till) > .sales-shelf { display: flex; }
  .sales-shelf { flex: 1 1 auto; min-width: 0; flex-direction: column; }
  .sales-pane { flex: 0 0 420px; flex-direction: column; min-height: 0; border-inline-start: 1px solid var(--line); }
  .sales-pane > .ledger-page { max-width: none; height: 100vh; }
  /* The bill is already in sight, so the ticket that opens it gives way; ✕, Undo and the saved
     bill's pill stay in the bar. */
  .sales-shelf a.ticket, .sales-shelf .editing-note { display: none; }
}

/* Bills: the list on the left and the open bill on the right (BillDetailPage). Below 1240 the bill
   stands alone and the list column is not drawn. */
.bills-split, .bills-bill-col { display: contents; }
.bills-list-col { display: none; }
.bill-row.on { background: #eaf5ee; }
@media (min-width: 1240px) {
  .app-main:has(.bills-split) { flex: 1 1 auto; }
  .bills-split { display: flex; flex: 1; min-height: 0; width: 100%; height: 100vh; }
  .bills-list-col { display: flex; flex: 1 1 auto; min-width: 0; }
  .bills-list-col > .bills-page { max-width: none; }
  .bills-bill-col { display: flex; flex: 0 0 520px; min-height: 0; border-inline-start: 1px solid var(--line); }
  .bills-bill-col > .bill-page { max-width: none; height: 100vh; overflow-y: auto; }
}
@media print {
  .bills-split, .bills-bill-col { display: block !important; height: auto; }
  .bills-list-col { display: none !important; }
}

/* A list and the row opened from it (ListDetail): list left, the row's screen right. */
.list-split, .detail-col { display: contents; }
.list-col { display: none; }
.item-row.on { background: #eaf5ee; }
.grid tr.on td { background: #eaf5ee; }
@media (min-width: 1240px) {
  .app-main:has(.list-split) { flex: 1 1 auto; }
  .list-split { display: flex; flex: 1; min-height: 0; width: 100%; height: 100vh; }
  .list-col { display: flex; flex: 1 1 auto; min-width: 0; }
  .list-col > .bills-page, .list-col > .ledger-page { max-width: none; height: 100vh; }
  .detail-col { display: flex; flex-direction: column; flex: 0 0 520px; min-height: 0; overflow-y: auto; border-inline-start: 1px solid var(--line); }
  .detail-col > .ledger-page, .detail-col > .bills-page, .detail-col > .bill-page, .detail-col > .page-col { max-width: none; height: auto; min-height: 100vh; }
}
@media print {
  .list-split, .detail-col { display: block !important; height: auto; }
  .list-col { display: none !important; }
}

/* Every card that opens over a page — a form, a picker, a sheet — opens on the right on a wide
   window, the full height of it, with the page left in view beside it. A click on the page closes
   it, as a click on the dimmed page did. Yes/no questions (role="alertdialog") stay in the middle:
   they want an answer before anything else. */
@media (min-width: 1240px) {
  body .confirm[role="dialog"], body .money-card[role="dialog"], body .chooser[role="dialog"] {
    position: fixed; top: 0; bottom: 0; inset-inline-start: auto; inset-inline-end: 0; transform: none;
    width: var(--panel-w, 440px); max-width: var(--panel-w, 440px); height: 100vh; max-height: none; overflow-y: auto; border-radius: 0;
    border-inline-start: 1px solid #dfe3e6; box-shadow: -16px 0 40px rgba(31, 42, 36, 0.08); box-sizing: border-box; }
  body .scrim:has(+ .confirm[role="dialog"]), body .scrim:has(+ .money-card[role="dialog"]), body .scrim:has(+ .chooser[role="dialog"]) { background: transparent; }
  [dir="rtl"] body .confirm[role="dialog"], [dir="rtl"] body .money-card[role="dialog"], [dir="rtl"] body .chooser[role="dialog"] { transform: none; box-shadow: 16px 0 40px rgba(31, 42, 36, 0.08); }
  body .language-card[role="dialog"] { top: 0; transform: none; }
  /* The panel covers the right-hand column exactly, so it reads as that column changing. */
  body:has(.list-split), body:has(.bills-split) { --panel-w: 520px; }
  /* A list inside a panel runs down the full height instead of stopping where a small card ended. */
  body .confirm[role="dialog"] .picker-list { max-height: calc(100vh - 190px); }
  body:has(.sales-split), body:has(.ledger-split.pane-open) { --panel-w: 420px; }
}

/* Choose type: the app's 30pt plus disc at the end of the search box, in the tab's own colours. */
.chooser-search { position: relative; }
.chooser-search .add-disc { position: absolute; inset-inline-end: 8px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 15px; border: 0; font: inherit; font-size: 20px; font-weight: 600; line-height: 1; cursor: pointer; background: #fdf3e3; color: #9a5b07; }
.chooser-search .add-disc.income { background: #eaf5ee; color: var(--green); }

/* The till's "+ New item": a dashed green tile, the app's #9CB5A8 stroke, green words. */
.shelf .tile.new-item-tile, .new-item-tile { border: 1px dashed #9cb5a8; background: transparent; color: #0b6e4f; font: inherit; font-weight: 600; font-size: 15px; align-items: center; justify-content: center; cursor: pointer; border-radius: 12px; min-height: 58px; padding: 0 12px; }
.new-item-tile.wide { width: 100%; }
.new-item-tile:hover { background: #f3f8f5; }

/* Settle all: the phone's amount step (balances on the cards, the plan box, + Note) and "Which dues?". */
.settle-card .account-card small { font-size: 13px; color: var(--muted); }
.settle-card .account-card small b { color: var(--green); font-weight: 600; }
.settle-card .account-card small b.bad { color: var(--red); }
.plan-box { margin: 10px 0 4px; padding: 9px 12px; border: 1.2px solid #bfe0cb; border-radius: 10px; background: #f7f8f9; }
.plan-box.pay { border-color: #efc9a8; background: #fdf6f1; }
.plan-box .plan-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.plan-box .plan-head strong { font-size: 15px; color: var(--green); }
.plan-box.pay .plan-head strong { color: #b4541f; }
.plan-box .plan-head .link { font-size: 15px; font-weight: 600; }
.plan-box p { margin: 4px 0 0; font-size: 15px; color: var(--muted); max-height: 140px; overflow-y: auto; }
.plan-box p.bad { color: var(--red); }
.settle-card .note-toggle { display: block; margin: 8px 0 2px; font-weight: 600; font-size: 15px; }
.settle-card .note-row { display: flex; align-items: flex-start; gap: 4px; margin-top: 8px; }
.settle-card .note-row > :first-child { flex: 1; }
.settle-card .note-x { border: 0; background: none; color: var(--muted); font-size: 15px; width: 26px; height: 30px; cursor: pointer; margin-top: 10px; }
.settle-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.settle-head strong { font-size: 17px; }
.settle-head .spacer { flex: 1; }
.settle-head .btn { padding: 6px 16px; }
.settle-head .btn.pay { background: #b4541f; }
.choose-head { display: flex; justify-content: space-between; gap: 8px; font-size: 15px; padding-bottom: 8px; border-bottom: 1px solid #e3e6e9; }
.choose-rows { display: grid; }
.choose-row { display: grid; grid-template-columns: 34px 1fr 120px; align-items: center; gap: 6px; min-height: 48px; border-bottom: 1px solid #f0f2f3; }
.choose-row .tick { width: 22px; height: 22px; border-radius: 6px; border: 1.4px solid #c3c6ca; background: #fff; color: #fff; font-size: 13px; font-weight: 700; cursor: pointer; padding: 0; line-height: 1; }
.choose-row .tick.on { background: var(--green); border-color: var(--green); }
.choose-row .when { display: grid; font-size: 15px; }
.choose-row:not(.on) .when > span { color: #c3c6ca; }
.choose-row .when small { font-size: 13px; color: var(--muted); }
.choose-row .slice { height: 32px; border: 1.2px solid var(--green); border-radius: 8px; text-align: center; font: inherit; font-size: 15px; width: 100%; box-sizing: border-box; outline: none; }
.choose-row .slice.bad { border-color: var(--red); color: var(--red); }
.choose-row .slice.off { display: grid; place-items: center; border-color: #e3e6e9; background: #f7f8f9; color: #c3c6ca; }
.choose-summary { display: flex; justify-content: space-between; gap: 8px; margin-top: 10px; padding: 8px 12px; border-radius: 9px; font-size: 13px; font-weight: 600; border: 1.2px solid; }
.choose-summary.ok { background: #eff1f3; border-color: #bfe0cb; color: var(--green); }
.choose-summary.warn { background: #fdf4e7; border-color: #e9c68d; color: #8a5a12; }

/* The bill page's links to the person: a row to their dues, and Receive payment while something is owed. */
.bill-sheet .bill-no { border: 0; background: none; padding: 0; font: inherit; cursor: copy; }
.dues-row { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; max-width: 720px; padding: 14px 16px; border: 1.5px solid #e3e6e9; border-radius: 14px; color: var(--ink); text-decoration: none; font-weight: 600; }
.dues-row span { color: var(--muted); }
.dues-row:hover { background: #f7f8f9; }
.btn.receive { display: block; margin-top: 12px; max-width: 720px; text-align: center; text-decoration: none; box-sizing: border-box; }

/* The due page (DueCard), as the app's DueDetailPage: a summary card, then the numbered activity table. */
.due-summary { border: 1px solid #e3e6e9; border-radius: 14px; padding: 12px 14px; display: grid; gap: 6px; margin: 6px 0 10px; }
.due-caption { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--muted); }
.due-caption .overdue { color: #b42318; font-weight: 600; }
.due-amount-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.due-amount-row .due-figure { font-size: 26px; font-weight: 700; margin: 0; }
.due-figure.done { color: var(--muted); }
.due-actions { display: grid; justify-items: end; gap: 4px; }
.due-summary .outline { border: 1.4px solid; border-radius: 10px; background: #fff; padding: 7px 12px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.due-summary .outline.red { color: #b42318; border-color: #e8b4a4; }
.due-summary .outline.green { color: var(--green); border-color: #bfe0cb; }
.due-summary .link.red { color: #b42318; font-size: 13px; font-weight: 600; }
.due-summary .written-off { margin: 0; color: #b42318; font-size: 13px; font-weight: 600; }
.due-progress { height: 6px; border-radius: 3px; background: #eef0f2; overflow: hidden; }
.due-progress span { display: block; height: 100%; background: var(--green); }
.due-progress.pay span { background: #b4541f; }
.due-summary .due-note { white-space: pre-wrap; }
.due-summary .bill-door { display: flex; justify-content: space-between; border-top: 1px solid #eef0f2; padding-top: 10px; margin-top: 4px; color: var(--ink); text-decoration: none; }
.grid.due-activity { margin-top: 10px; border: 1px solid #e3e6e9; border-radius: 12px; overflow: hidden; table-layout: auto; width: 100%; }
.grid.due-activity td { padding: 8px 10px; vertical-align: middle; }
.grid.due-activity td strong { display: block; font-weight: 600; font-size: 15px; }
.grid.due-activity td small { display: block; color: var(--muted); font-size: 13px; }
.grid.due-activity td.no { width: 36px; padding: 0; text-align: center; background: #f7f8f9; color: var(--muted); font-size: 13px; }
.grid.due-activity td.x-col { width: 40px; padding: 0; text-align: center; }
.grid.due-activity td.num { width: 1%; }
.grid.due-activity tr.struck td { color: var(--muted); }
.grid.due-activity tr.struck .num { text-decoration: line-through; }
.grid.due-activity td.hint { text-align: center; color: var(--muted); font-size: 13px; }
.grid.due-activity .overdue { color: #b42318; }