/* Plug - one look for every screen. Every colour is a variable from theme.css (a blue top bar, a grey-blue
   ground, white cards, blue table headers, a yellow highlight; and a dark version); nothing here writes one.
   DM Serif Display headings, DM Sans body; white cards with a thin border and 16px corners. Spacing only from the scale 8 / 12 / 16 / 24 (--s1..--s4); --s0 (4px) is for
   the inside of small inline tags only. */
:root {
  /* every colour lives in theme.css; these are the sizes, spaces and fonts */
  --radius: 16px;
  --radius-s: 12px;
  --s0: 4px;
  --s1: 8px;
  --s2: 12px;
  --s3: 16px;
  --s4: 24px;
  --shadow: 0 2px 8px var(--shadow-c);
  --fs-body: 15px;
  --fs-small: 13px;
  --fs-card-title: 16px;
  --frame: 1100px;
  --top-h: 48px;
  --shadow-float: 0 8px 24px var(--shadow-float-c), 0 2px 8px var(--shadow-c);
  --sans: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "DM Serif Display", Georgia, serif;
  --tabs-h: 64px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--ivory); color: var(--ink); font: var(--fs-body)/1.5 var(--sans);
  min-height: 100vh; overflow-x: hidden;
  padding-bottom: calc(var(--tabs-h) + env(safe-area-inset-bottom));
}
h1, h2, h3, .serif { font-family: var(--serif); font-weight: 400; letter-spacing: 0.01em; }
button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: not-allowed; }
input, select, textarea { font: inherit; color: var(--ink); max-width: 100%; }
img, svg, table { max-width: 100%; }
.muted { color: var(--muted); }
.small { font-size: var(--fs-small); }
/* figures line up: tabular numbers wherever an amount is shown */
.num, .v, .fig, .total, .data td, .lines td, .mini b, .ai-total, .kv dd { font-variant-numeric: tabular-nums; }
.card-title { font-size: var(--fs-card-title); font-weight: 600; color: var(--navy); }
code { font-size: 13px; background: var(--ivory); padding: 0 var(--s0); border-radius: var(--s0); }
[hidden] { display: none !important; }

/* pressed: every button sinks a little and darkens while held */
button, .btn, a.btn { transition: transform .08s var(--ease), background-color .15s, border-color .15s, box-shadow .15s; }
button:not(:disabled):active, a.btn:active { transform: scale(0.97); }
.btn.primary:not(:disabled):active, .send:not(:disabled):active { background: var(--btn-press); }
.choice:not(:disabled):active { background: var(--brass-press); color: var(--on-color); }

/* ---------------------------------------------------------------- top bar */
/* header: the brand left, then the company and when it last synced; the bell and the user's initial right */
.top { position: sticky; top: 0; z-index: 5; background: var(--bar); color: var(--bar-ink); }
.top-in { height: var(--top-h); max-width: var(--frame); margin: 0 auto; padding: 0 var(--s3);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.brand { min-width: 0; display: flex; align-items: center; gap: var(--s2); }
.logo { font-family: var(--serif); font-size: 22px; line-height: 1; flex: none; }
.co { min-width: 0; display: flex; flex-direction: column; line-height: 1.2; padding-left: var(--s2);
  border-left: 1px solid var(--bar-line); }
.company { font-size: var(--fs-small); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.synced { font-size: 12px; opacity: 0.7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pilot { flex: none; padding: 0 var(--s1); border-radius: 999px; font-size: 11px;
  letter-spacing: .02em; background: var(--brass-soft); color: var(--navy); font-weight: 600; }
.top-right { display: flex; align-items: center; gap: var(--s1); flex: none; }
.bell { position: relative; flex: none; background: none; border: 0; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; }
.bell:hover { background: var(--bar-tint); }
.bell svg { width: 22px; height: 22px; fill: var(--bar-ink); display: block; }
.user-initial { position: relative; width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--brass);
  color: var(--on-brass); font: 600 14px/32px var(--sans); text-align: center; padding: 0; margin: 0 6px; }
.user-initial::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; }   /* a 44px tap area */
.badge {
  position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px; padding: 0 var(--s0);
  border-radius: 9px; background: var(--brass); color: var(--on-brass); font-size: 11px; font-weight: 700; display: grid; place-items: center;
}

main { max-width: 560px; margin: 0 auto; padding: var(--s3); }
.page-title { font-size: 28px; margin: 0 0 var(--s0); color: var(--navy); }

/* the one card */
.card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--s3); box-shadow: var(--shadow);
}
.card + .card { margin-top: var(--s2); }

/* skeleton rows while anything loads - never a blank page */
.skeleton { display: flex; flex-direction: column; gap: var(--s2); }
.skeleton .sk { height: 14px; border-radius: 7px; background: linear-gradient(90deg, var(--ivory-deep) 0%, var(--paper-soft) 50%, var(--ivory-deep) 100%);
  background-size: 200% 100%; animation: shimmer 1.2s linear infinite; }
.skeleton .sk.w60 { width: 60%; } .skeleton .sk.w80 { width: 80%; } .skeleton .sk.w40 { width: 40%; }
.skeleton .sk.big { height: 24px; width: 50%; }
.skeleton.card { padding: var(--s3); }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ---------------------------------------------------------------- home */
.note h1 { font-size: 24px; margin: 0 0 var(--s1); color: var(--navy); }
.note ul { margin: 0; padding: 0; list-style: none; }
.note li { padding: var(--s1) 0; border-top: 1px solid var(--line); }
.note li:first-child { border-top: 0; padding-top: 0; }
.note.short li.extra { display: none; }
.note li.more-li { padding: var(--s0) 0 0; }
.note li.more-li .btn { padding: var(--s1) var(--s2); color: var(--navy); font-weight: 600; }
.note-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s1); }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); margin-top: var(--s3); }
.tile {
  text-align: left; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: var(--s3); min-height: 104px; display: flex; flex-direction: column; justify-content: space-between;
}
.tile:hover { border-color: var(--navy); }
.tile .t { font-size: 13px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.tile .v { font-family: var(--serif); font-size: 22px; color: var(--navy); line-height: 1.15; word-break: break-word; }
.tile .s { font-size: 12px; color: var(--muted); }
.tile.alert .v { color: var(--danger); }
.banner { background: var(--warn-bg); border: 1px solid var(--warn-line); color: var(--warn); border-radius: var(--radius);
  padding: var(--s2) var(--s3); margin: 0 0 var(--s2); }

/* dashboard cards */
.dash { display: grid; grid-template-columns: 1fr; gap: var(--s2); margin-top: var(--s3); }
.dcard { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s3); box-shadow: var(--shadow); min-width: 0; }
.dcard.openable { cursor: pointer; }
.dcard.openable:hover { border-color: var(--navy); }
.dcard.openable:active { transform: scale(0.99); }
.dcard .t { font-size: var(--fs-card-title); color: var(--navy); font-weight: 600; }
/* the one figure a person decides on: cash and bank in hand plus what is left to draw */
.dcard .usable { margin-top: var(--s1); padding: var(--s1) var(--s2); border-radius: var(--radius-s);
  background: var(--ivory); border: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--navy); }
.prow.tap-opens > .prow-1, .prow.tap-opens > .prow-2 { cursor: pointer; }
.bell .badge { position: absolute; top: 4px; right: 2px; }
.view-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); }
.notif-card { padding: 0; }
.notif { display: flex; align-items: flex-start; gap: var(--s2); padding: var(--s2) var(--s3); cursor: pointer;
  border-top: 1px solid var(--line); min-width: 0; }
.notif:first-child { border-top: 0; }
.notif-dot { flex: none; width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; background: transparent; }
.notif.unread .notif-dot { background: var(--brass); }
.notif.unread .notif-title { font-weight: 700; }
.notif-body { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.notif-word { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.notif-text { font-size: var(--fs-small); color: var(--muted); }
.notif-acts { margin-top: var(--s1); }
.notif-go { flex: none; color: var(--muted); font-size: 20px; line-height: 1; }
.boot { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: var(--s1); background: var(--bar); color: var(--bar-ink);
  animation: boot-gone 0s 15s forwards; }  /* the splash while Plug opens; app.js takes it away, and if a script
  ever fails it goes by itself after 15 s rather than hiding the page for good */
.boot img { border-radius: 20px; margin-bottom: var(--s1); }
.boot b { font-family: var(--serif); font-size: 26px; font-weight: 400; }
.boot span { color: var(--bar-muted); font-size: var(--fs-small); }
@keyframes boot-gone { to { visibility: hidden; opacity: 0; } }
.install-card .steps { margin: var(--s1) 0; padding-left: var(--s4); }
.install-card .steps li { margin: var(--s1) 0; }
.install-card details { margin-top: var(--s2); }
.install-card summary { cursor: pointer; color: var(--navy); font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.update-banner { position: fixed; left: 50%; top: 12px; transform: translateX(-50%); z-index: 60; display: flex;
  align-items: center; gap: var(--s2); padding: var(--s1) var(--s2) var(--s1) var(--s3); background: var(--btn);
  color: var(--on-color); border-radius: var(--radius-s); box-shadow: 0 4px 16px var(--shade); max-width: calc(100% - 32px); }
.dcard .extra-open { padding: 0; margin-top: var(--s1); font-size: var(--fs-small); text-align: left;
  white-space: normal; max-width: 100%; min-width: 0; } /* a sentence, not a label: on a phone it wraps (it ran 412 px
  wide on a 390 px screen, the whole page went sideways and taps landed on the wrong button) */
.dcard .v { font-family: var(--serif); font-size: 26px; color: var(--navy); line-height: 1.2; margin-top: var(--s0); word-break: break-word; }
/* the whole figure in Indian style with paise (19 Oct): a longer one smaller, so it fits a 390 px phone whole */
.dcard .v.fig-l { font-size: 21px; } .dcard .v.fig-xl { font-size: 18px; }
.dcard.alert .v { color: var(--danger); }
.dcard .s { font-size: var(--fs-small); color: var(--muted); }
.dcard .go { font-size: var(--fs-small); color: var(--brass-ink); font-weight: 600; margin-top: var(--s1); }
.agebar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; margin: var(--s2) 0 var(--s1); background: var(--ivory); }
.agebar span { display: block; height: 100%; }
.a0 { background: var(--ok); } .a1 { background: var(--brass); } .a2 { background: var(--warn); } .a3 { background: var(--danger); }
.legend { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s0) var(--s2); font-size: 12px; }
.legend li { display: flex; align-items: center; gap: var(--s1); min-width: 0; }
.legend i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; flex: none; }
.legend b { margin-left: auto; font-weight: 600; }
.chart { display: flex; align-items: flex-end; gap: var(--s0); height: 72px; margin-top: var(--s2); }
.chart .col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; }
.chart .bar { width: 100%; background: var(--btn); border-radius: 3px 3px 0 0; min-height: 1px; }
.chart .barea { flex: 1 1 auto; min-height: 0; width: 100%; display: flex; align-items: flex-end; }
.chart .col.now .bar { background: var(--brass); }
.chart em { font-style: normal; font-size: 10px; color: var(--muted); margin-top: 2px; }
.mini { list-style: none; padding: 0; margin: var(--s1) 0 0; font-size: var(--fs-small); }
.mini li { display: flex; justify-content: space-between; gap: var(--s2); padding: var(--s0) 0; border-top: 1px solid var(--line); }
.mini li:first-child { border-top: 0; }
.mini li > :first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.mini b { font-weight: 600; white-space: nowrap; }
.xlink { border: 0; background: none; padding: 0; font: inherit; color: var(--navy); text-align: left; text-decoration: underline;
  text-decoration-color: var(--focus); text-underline-offset: 2px; cursor: pointer; }
.xlink:hover { color: var(--brass-ink); }

/* ---------------------------------------------------------------- chat */
.chat-grid { display: block; }
.side { display: none; }
.chat-tools { display: flex; justify-content: flex-end; margin: 0 0 var(--s0); }
.chat-tools .btn { padding: var(--s0) var(--s1); font-size: 13px; }
.messages { display: flex; flex-direction: column; gap: var(--s2); padding-bottom: 140px; }
.messages > * { scroll-margin-top: calc(var(--top-h) + var(--s2)); }      /* opens below the header, not under it */   /* room for the floating composer */
.hello { text-align: center; padding: var(--s3) var(--s1); }
.hello h2 { font-size: 24px; margin: 0 0 var(--s0); color: var(--navy); }
.suggest { display: flex; flex-wrap: wrap; gap: var(--s1); justify-content: center; margin-top: var(--s2); }
.suggest button, .chip {
  border: 1px solid var(--line); background: var(--paper); border-radius: 999px; padding: var(--s1) var(--s2); font-size: 13px;
}
.suggest button:hover { border-color: var(--navy); }
.big-quick { display: grid !important; grid-template-columns: repeat(2, 1fr); gap: var(--s1); }
.big-quick button { padding: var(--s2) var(--s2); font-size: 15px; border-radius: var(--radius-s); }

.msg { position: relative; max-width: 92%; min-width: 0; }
.msg.me { align-self: flex-end; background: var(--btn); color: var(--on-color); padding: var(--s1) var(--s2); border-radius: 16px 16px 4px 16px;
  overflow-wrap: anywhere; animation: rise .22s var(--ease); }
.msg.me .file { display: block; font-size: 12px; opacity: 0.8; }
/* bot messages: a small avatar on the first of a run */
.msg.bot { align-self: flex-start; width: 100%; max-width: 100%; padding-left: 36px; }
.msg.bot::before {
  content: "T"; position: absolute; left: 0; top: 2px; width: 28px; height: 28px; border-radius: 50%;
  background: var(--btn); color: var(--brass); font: 16px/28px var(--serif); text-align: center;
  box-shadow: inset 0 0 0 1.5px var(--brass);
}
.msg.bot + .msg.bot::before { visibility: hidden; }
.msg.bot:empty::before { visibility: hidden; }
.bubble { background: var(--paper); border: 1px solid var(--line); padding: var(--s1) var(--s2); border-radius: 16px 16px 16px 4px;
  overflow-wrap: anywhere; box-shadow: var(--shadow); }
.bubble p { margin: 0; }
.bubble p + * { margin-top: var(--s1); }
.bubble .label { font-size: var(--fs-small); color: var(--muted); font-weight: 600; }
.bubble .w { animation: word .18s var(--ease) both; }
@keyframes word { from { opacity: 0; } to { opacity: 1; } }
/* typing: three dots while the reply is on its way */
.bubble.typing { display: inline-flex; gap: 5px; align-items: center; padding: var(--s2) var(--s3); width: auto; }
.bubble.typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); opacity: .35; animation: dot 1.1s infinite; }
.bubble.typing span:nth-child(2) { animation-delay: .15s; } .bubble.typing span:nth-child(3) { animation-delay: .3s; }
.bubble.typing em { font-style: normal; font-size: 12.5px; color: var(--muted); margin-left: var(--s1); }
@keyframes dot { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.greeting .hello-line { font: 400 22px/1.2 var(--serif); color: var(--navy); margin: 0 0 var(--s1); }
.greeting ul { margin: 0; padding-left: var(--s3); font-size: var(--fs-small); }
.greeting li { margin: var(--s0) 0; }
/* the greeting: rows, not bullets - a line icon, the label, the figure in bold, a chevron */
.note-short { display: flex; flex-direction: column; }
.grow-row { display: flex; align-items: center; gap: var(--s2); width: 100%; min-height: 44px; padding: var(--s1) 0;
  border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; color: var(--ink); border-radius: 0; }
.grow-row:last-child { border-bottom: 0; }
.grow-row:not(.plain):hover .lbl { color: var(--navy); }
.grow-row:not(:disabled):active { transform: none; background: var(--ivory); }
.grow-row .ico { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--brass); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; }
.grow-row .lbl { flex: 1; min-width: 0; }
.grow-row .fig { font-weight: 700; color: var(--navy); white-space: nowrap; }
.grow-row .chev { color: var(--muted); opacity: .6; font-size: 18px; line-height: 1; }
.greeting .note-toggle { padding: var(--s0) 0 0; color: var(--navy); font-weight: 600; }
/* Today: the name, the amount in bold, a brass pill; Remind (primary) and Open (a link); rows split by hairlines */
.bubble.greeting, .bubble.today { padding: var(--s3); }
.bubble.today .tsec { margin-top: var(--s2); }
.bubble.today .label { font-size: var(--fs-small); color: var(--muted); font-weight: 600; margin-bottom: var(--s0); }
.bubble.today .trow { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2); align-items: center; justify-content: space-between;
  padding: var(--s2) 0; border-bottom: 1px solid var(--line); }
.bubble.today .who-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s0) var(--s2); min-width: 0; flex: 1 1 220px; }
.bubble.today .name { min-width: 0; }
.bubble.today .fig { font-weight: 700; color: var(--navy); white-space: nowrap; }
.pill { display: inline-block; padding: 2px var(--s2); border-radius: 999px; background: var(--brass-soft); color: var(--warn);
  border: 1px solid var(--brass-line); font-size: 12px; font-weight: 600; white-space: nowrap; }
/* Done · Snooze · the row's own action: they wrap on a narrow phone rather than push the screen sideways */
.bubble.today .acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1); flex: 0 1 auto; min-width: 0; }
.more-link { padding-left: 0; color: var(--navy); font-weight: 600; }
.cost { font-size: 11.5px; color: var(--muted); margin-top: var(--s1); }
/* a card still being filled: the tax is not a figure yet, so it says what is coming, in grey */
.lines tr.minor.waiting td { color: var(--muted); font-style: italic; }

/* a pin is kept for a reason: "Fix" goes to the box still waiting, and the x takes it off without a menu */
.pin-wrap { display: inline-flex; align-items: center; gap: 2px; }
.pin-fix, .pin-x { border: 1px solid var(--line); background: var(--paper); color: var(--navy); border-radius: var(--radius-s);
  min-height: 28px; padding: 0 var(--s1); font-size: 12px; font-weight: 600; }
.pin-x { min-width: 28px; font-size: 16px; line-height: 1; color: var(--muted); }
.pin-fix:hover, .pin-x:hover { border-color: var(--brass); color: var(--warn); }
/* a device signed in: the owner's own name for it, and the one thing they may want to do */
.lan-devs .lan-dev { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1); margin-bottom: var(--s1); }
.lan-devs .dev-name { min-width: 150px; flex: 1 1 150px; }
/* the top of More: whose books, which year, how old */
.more-head { margin-bottom: var(--s2); }
.more-head .mh-name { font-family: var(--serif); font-size: 20px; color: var(--navy); }
.more-head .mh-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); margin-top: var(--s1); }
.words-find { display: block; margin-bottom: var(--s2); }
.words-find input { width: 100%; }

/* the reminder sheet: how late they already are, and WhatsApp's own mark on the button that opens it */
.rem-owed { margin: var(--s1) 0; padding: var(--s1) var(--s2); border-radius: var(--radius-s);
  background: var(--brass-soft); border: 1px solid var(--brass-line); color: var(--warn); font-size: 13px; font-weight: 600; }
.wa-icon { width: 20px; height: 20px; fill: currentColor; vertical-align: -4px; margin-right: 6px; flex: none; }
/* the promise sheet: the dates people actually say */
.chips-row { display: flex; flex-wrap: wrap; gap: var(--s1); margin: var(--s1) 0 var(--s2); }
.chips-row .choice.on { background: var(--brass); color: var(--on-brass); }

/* Tally refused it: the plain sentence, what to do, and Tally's own words behind Details */
.tally-said { margin-top: var(--s2); padding: var(--s2); border-radius: var(--radius-s);
  background: var(--warn-bg); border: 1px solid var(--warn-line); }
.tally-said .ts-line { color: var(--warn); font-weight: 600; font-size: 14px; }
.tally-said .choices { margin-top: var(--s1); }
.tally-said .small { word-break: break-word; color: var(--muted); }
/* one thing to tap, one way back, and the housekeeping behind "···" */
.card-menu { position: relative; }
.card-menu > summary { list-style: none; cursor: pointer; min-width: 44px; min-height: 36px; display: inline-flex;
  align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: var(--radius-s);
  color: var(--navy); font-weight: 700; letter-spacing: 1px; background: var(--paper); }
.card-menu > summary::-webkit-details-marker { display: none; }
.card-menu[open] > summary { border-color: var(--navy); }
.card-menu .menu-items { position: absolute; right: 0; bottom: calc(100% + var(--s1)); z-index: 7; min-width: 180px;
  display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius-s); box-shadow: var(--shadow); overflow: hidden; }
.card-menu .menu-items button { text-align: left; padding: var(--s2); min-height: 44px; border: 0;
  background: none; color: var(--navy); font-size: 14px; }
.card-menu .menu-items button:hover { background: var(--ivory); }

/* why a senior has to tap it, on its own line right above the button */
.senior-why { margin-top: var(--s2); padding: var(--s1) var(--s2); border-radius: var(--radius-s);
  background: var(--brass-soft); border: 1px solid var(--brass-line); color: var(--warn); font-size: 13px; font-weight: 600; }
.choices { display: flex; flex-wrap: wrap; gap: var(--s1); margin-top: var(--s2); }
.choice {
  border: 1px solid var(--brass); color: var(--warn); background: var(--brass-soft);
  border-radius: 999px; padding: var(--s0) var(--s2); min-height: 32px; font-size: 13px; font-weight: 500;
}
.choice:hover { background: var(--brass); color: var(--on-brass); }
.thinking { font-size: 13px; color: var(--muted); padding: var(--s0) var(--s1); }
.err { color: var(--danger); background: var(--danger-bg); border: 1px solid var(--danger-line); padding: var(--s1) var(--s2); border-radius: var(--radius-s); }
.day-divider { align-self: stretch; display: flex; align-items: center; gap: var(--s2); margin: var(--s3) 0 var(--s0);
  color: var(--muted); font-size: 12px; }
.day-divider::before, .day-divider::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
/* the chips scroll sideways; the right edge fades instead of cutting a word off */
.quick-chips { display: flex; gap: var(--s1); overflow-x: auto; padding: 2px var(--s4) 6px 2px; margin: 0 auto var(--s1);
  position: relative; z-index: 1;                 /* under a card's sticky actions, never over them */
  scrollbar-width: none; max-width: 528px; scroll-snap-type: x proximity;
  -webkit-mask-image: linear-gradient(to right, var(--ink) calc(100% - 40px), transparent);
  mask-image: linear-gradient(to right, var(--ink) calc(100% - 40px), transparent); }
.quick-chips.at-end { -webkit-mask-image: none; mask-image: none; }
.quick-chips:empty { display: none; }
.quick-chips::-webkit-scrollbar { display: none; }
.quick-chips .chip-q { flex: 0 0 auto; border: 1px solid var(--line); background: var(--paper); border-radius: 999px;
  padding: 0 var(--s2); min-height: 36px; font-size: var(--fs-small); cursor: pointer; white-space: nowrap;
  scroll-snap-align: start; box-shadow: var(--shadow); }
.quick-chips .chip-q:hover { border-color: var(--navy); }

/* the composer floats above the bottom bar */
.composer {
  position: fixed; left: 0; right: 0; bottom: calc(var(--tabs-h) + env(safe-area-inset-bottom)); z-index: 4;
  padding: var(--s3) var(--s3) var(--s1); pointer-events: none;
  background: linear-gradient(to top, var(--ivory) 0%, var(--ivory) 78%, transparent 100%);
}
.composer > * { pointer-events: auto; }
.composer-row {
  max-width: 528px; height: 52px; margin: 0 auto; display: flex; align-items: center; gap: var(--s0);
  background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 0 6px 0 var(--s1);
  box-shadow: var(--shadow-float);
}
.composer-row:focus-within { border-color: var(--brass); }
.composer-row input[type=text] { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; padding: var(--s1) var(--s0); }
.icon-btn { position: relative; flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 0; background: none; cursor: pointer; }
.icon-btn svg { width: 21px; height: 21px; fill: var(--navy); }
.icon-btn:hover { background: var(--ivory); }
.send { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--btn); display: grid; place-items: center; }
.send svg { width: 19px; height: 19px; fill: var(--on-color); }
.send:disabled { opacity: 0.5; }
/* voice in: hold the mic to talk */
.mic { touch-action: none; user-select: none; -webkit-user-select: none; }
.mic.unsupported svg { fill: var(--faint); }
.mic.live { background: var(--danger); }
.mic.live svg { fill: var(--on-color); }
.mic.live::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--danger); animation: pulse 1.2s infinite; }
@keyframes pulse { from { opacity: .8; transform: scale(.9); } to { opacity: 0; transform: scale(1.3); } }
.mic-lang { flex: none; border: 1px solid var(--line); background: var(--ivory); color: var(--navy); border-radius: 999px;
  font-size: 11px; font-weight: 700; padding: 2px var(--s1); min-width: 32px; }
.voice-note { max-width: 528px; margin: 0 auto var(--s1); font-size: 12.5px; color: var(--warn); background: var(--warn-bg);
  border: 1px solid var(--warn-line); border-radius: var(--radius-s); padding: var(--s1) var(--s2); }
.attached, .replying { max-width: 528px; margin: 0 auto var(--s1); display: flex; gap: var(--s1); align-items: center; font-size: 12.5px; }
.attached span { background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 2px var(--s2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attached button, .replying button { border: 0; background: none; font-size: 18px; line-height: 1; color: var(--muted); }
.replying span { flex: 1; min-width: 0; border-left: 3px solid var(--brass); padding: 2px var(--s1); background: var(--paper);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* reply and pin */
.msg-menu { position: absolute; top: 2px; right: 2px; border: 0; background: var(--paper); color: var(--muted);
  border-radius: 999px; width: 24px; height: 24px; line-height: 20px; opacity: 0; cursor: pointer; }
.msg:hover > .msg-menu, .msg-menu:focus { opacity: 1; }
.msg.me .msg-menu { right: auto; left: -32px; }
.msg-pop { position: fixed; z-index: 50; display: flex; flex-direction: column; padding: var(--s0); min-width: 120px; }
.msg-pop button { border: 0; background: none; text-align: left; padding: var(--s1) var(--s2); cursor: pointer; border-radius: var(--s1); }
.msg-pop button:hover { background: var(--ivory); }
.quote { border-left: 3px solid var(--brass); padding: 2px var(--s1); margin-bottom: var(--s0); font-size: 12px; opacity: 0.85; }
.pins { display: flex; flex-direction: column; gap: var(--s0); padding: var(--s1) 0; position: sticky; top: 0; z-index: 2; background: var(--ivory); }
.pins .pin { text-align: left; border: 1px solid var(--line); background: var(--paper); border-radius: var(--radius-s);
  padding: var(--s0) var(--s2); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.msg.flash { outline: 2px solid var(--brass); border-radius: var(--radius-s); }

/* ---------------------------------------------------------------- the draft card */
/* "clip" not "hidden": clip keeps the round corners without making the card its own scroll box, so the sticky
   action row below can stick to the page's scroll on a phone as it already does in the desktop panel. */
.draft { padding: 0; overflow: clip; animation: card-in .32s var(--ease) both; }
@keyframes card-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.draft-head { display: flex; justify-content: space-between; gap: var(--s2); align-items: flex-start; padding: var(--s3) var(--s3) var(--s2); border-bottom: 1px solid var(--line); }
.draft-head > :first-child { min-width: 0; }
.draft-head .kind { font-family: var(--serif); font-size: 21px; color: var(--navy); line-height: 1.15; }
.draft-head .meta { font-size: var(--fs-small); color: var(--muted); }
.lane { flex: none; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; padding: var(--s0) var(--s1); border-radius: 6px; white-space: nowrap; }
.lane.tap { background: var(--brass); color: var(--on-brass); }
.lane.senior { background: var(--danger); color: var(--on-color); }
.lane.refused { background: var(--muted); color: var(--on-color); }
.lane.status { background: var(--btn); color: var(--on-color); }
.lane.posted { background: var(--ok); color: var(--on-color); }
.draft-body { padding: var(--s2) var(--s3) var(--s3); }
.flags { display: flex; flex-direction: column; gap: var(--s1); margin-bottom: var(--s2); }
.flag { font-size: 13.5px; padding: var(--s1) var(--s2); border-radius: var(--radius-s); border: 1px solid; }
.flag b { font-weight: 700; }
.flag.soft { color: var(--warn); background: var(--warn-bg); border-color: var(--warn-line); }
.flag.hard { color: var(--danger); background: var(--danger-bg); border-color: var(--danger-line); }
.who { display: grid; grid-template-columns: auto 1fr; gap: 2px var(--s2); font-size: 14px; margin-bottom: var(--s2); }
.who dt { color: var(--muted); font-size: 12.5px; padding-top: 1px; }
.who dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.pc { color: var(--warn); font-size: 11.5px; font-weight: 600; background: var(--warn-bg); border-radius: var(--s0); padding: 0 var(--s0); margin-left: var(--s0); }
.lines { width: 100%; border-collapse: collapse; font-size: 13.5px; margin: var(--s1) 0 var(--s0); }
.lines th { text-align: left; font-weight: 600; font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; padding: var(--s0) 0; border-bottom: 1px solid var(--line); }
.lines td { padding: var(--s1) 0; border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
.lines .num { text-align: right; white-space: nowrap; padding-left: var(--s1); }
.lines .sub { display: block; font-size: 11.5px; color: var(--muted); }
.lines tr.minor td { color: var(--muted); font-size: 12.5px; border-bottom: 0; padding: 2px 0; }
tr.needs td { background: var(--warn-bg); }
.qty-in { display: inline-flex; gap: var(--s0); align-items: center; }
.qty-in input { width: 64px; padding: 2px var(--s1); border: 2px solid var(--brass); border-radius: var(--s1); background: var(--warn-bg); }
.qty-in button { padding: 2px var(--s1); border-radius: var(--s1); border: 1px solid var(--navy); background: var(--paper); }
details.packs { font-size: 12px; margin: 2px 0; }
details.packs summary { cursor: pointer; color: var(--muted); }
details.packs .choice { font-size: 12px; padding: 2px var(--s1); margin: 2px; min-height: 0; }
.total { display: flex; justify-content: space-between; align-items: baseline; padding-top: var(--s2); margin-top: var(--s0); border-top: 2px solid var(--navy); }
.total .t { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; color: var(--muted); }
.total .v { font-family: var(--serif); font-size: 26px; color: var(--navy); }
.questions { margin-top: var(--s2); display: flex; flex-direction: column; gap: var(--s2); }
.question { background: var(--warn-bg); border: 1px solid var(--warn-line); border-radius: var(--radius-s); padding: var(--s2); font-size: 13.5px; color: var(--warn); }
.question.blank-rate { background: var(--warn-bg); border-left: 3px solid var(--warn); }
.question .free { display: flex; gap: var(--s1); margin-top: var(--s1); }
.question .free input { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: var(--s1); padding: var(--s1); }
.question .free button { border: 0; background: var(--btn); color: var(--on-color); border-radius: var(--s1); padding: var(--s1) var(--s2); }
form.rate-in { display: flex; gap: var(--s1); margin-top: var(--s1); }
form.rate-in input { width: 140px; min-width: 0; }
.result { margin-top: var(--s2); font-size: 13.5px; padding: var(--s1) var(--s2); border-radius: var(--radius-s); background: var(--tbl-head-bg); color: var(--navy); }
/* Approve, Change and Why stay on the card wherever it is scrolled, on a phone and on a desktop: a long card
   never hides the three taps that matter. The chips above the composer sit below them (z-index), so they can
   never cover them. */
.actions { display: flex; flex-wrap: wrap; gap: var(--s1); padding: var(--s2) var(--s3) var(--s3); border-top: 1px solid var(--line); align-items: center;
  position: sticky; bottom: 0; z-index: 3; background: var(--paper);
  box-shadow: 0 -6px 12px -10px var(--scrim-strong); }
.actions .grow { flex: 1; }
.btn { border-radius: var(--radius-s); padding: 0 var(--s3); min-height: 40px; display: inline-flex; align-items: center;
  justify-content: center; gap: var(--s1); font-weight: 600; border: 1px solid var(--navy); background: var(--paper); color: var(--navy); }
.btn.sm { min-height: 36px; padding: 0 var(--s2); font-size: 14px; }
.btn.link.sm { padding: 0 var(--s1); color: var(--navy); font-weight: 600; text-decoration: underline;
  text-decoration-color: var(--focus); text-underline-offset: 3px; }
.btn.primary { background: var(--btn); color: var(--on-color); }
.btn.primary:hover { background: var(--btn-soft); }
.btn.primary.senior { background: var(--danger); border-color: var(--danger); }
.btn.link { border: 0; background: none; padding: var(--s1); color: var(--muted); font-weight: 500; }
.btn:disabled { opacity: 0.45; }
a.btn { display: inline-block; text-decoration: none; }
.why { margin-top: var(--s2); border-top: 1px dashed var(--line); padding-top: var(--s2); font-size: 13px; }
.why h4 { margin: var(--s2) 0 var(--s0); font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.why ul { margin: 0; padding-left: 0; list-style: none; }
.why li { padding: 2px 0 2px var(--s4); position: relative; }
.why li::before { position: absolute; left: 0; top: 3px; font-size: 11px; font-weight: 700; width: 20px; text-align: center; border-radius: var(--s0); }
.why li.pass::before { content: "ok"; color: var(--ok); }
.why li.soft::before { content: "!"; color: var(--warn); background: var(--warn-bg); }
.why li.hard::before { content: "!!"; color: var(--danger); background: var(--danger-bg); }
.why li.plain::before { content: "·"; color: var(--muted); }
.why .entries { width: 100%; font-size: 12.5px; border-collapse: collapse; }
.why .entries td { padding: 2px 0; }
.why .entries .num { text-align: right; }
.edit { display: grid; gap: var(--s1); margin-top: var(--s0); }
.edit label { display: grid; gap: 2px; font-size: 12px; color: var(--muted); font-weight: 600; min-width: 0; }
.edit input, .edit select, .edit textarea { border: 1px solid var(--line); border-radius: var(--s1); padding: var(--s1); font-size: 14px; background: var(--paper-soft); min-width: 0; }
.edit input:focus, .edit select:focus, .edit textarea:focus { outline: 2px solid var(--brass); border-color: var(--brass); }
.edit .line-edit { border: 1px solid var(--line); border-radius: var(--radius-s); padding: var(--s1); display: grid; grid-template-columns: 1fr 1fr; gap: var(--s1); }
.edit .line-edit label:first-child { grid-column: 1 / -1; }
.edit .line-edit .h { grid-column: 1 / -1; font-size: 12px; font-weight: 700; color: var(--navy); }
details.more { margin: var(--s1) 0; }
details.more summary { cursor: pointer; color: var(--navy); font-weight: 600; font-size: 13px; }
details.more dl.who { margin-top: var(--s1); }
.against { display: flex; flex-wrap: wrap; gap: var(--s1); align-items: center; margin: var(--s1) 0; }
.against .now { font-size: 12.5px; font-weight: 600; background: var(--ivory); border-radius: 999px; padding: 2px var(--s2); }
/* a pill is one word-shape: it never breaks across two lines, which drew the role as "Owner /" above "Partner"
   with the second half sitting under the name beside it (More, 390 px) */
.src { display: inline-block; white-space: nowrap; font-size: 11px; padding: 1px var(--s1); border-radius: var(--s1);
  background: var(--ivory-deep); color: var(--muted); }
.stub { display: none; }
#view-chat .open-chat { display: none; }

/* "Posted to Tally" - a one-second tick over the card after Approve */
.posted-tick { position: fixed; left: 50%; top: 40%; z-index: 60; transform: translate(-50%, -50%); display: flex; flex-direction: column;
  align-items: center; gap: var(--s1); background: var(--btn); color: var(--on-color); border-radius: var(--radius); padding: var(--s4);
  box-shadow: var(--shadow-float); text-align: center; animation: tick-in .25s var(--ease) both, tick-out .25s ease-in .85s forwards; pointer-events: none; }
.posted-tick .ring { width: 48px; height: 48px; border-radius: 50%; background: var(--ok); display: grid; place-items: center; }
.posted-tick .ring svg { width: 28px; height: 28px; fill: none; stroke: var(--on-color); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 30; stroke-dashoffset: 30; animation: draw .35s .1s var(--ease) forwards; }
.posted-tick b { font-family: var(--serif); font-weight: 400; font-size: 20px; }
.posted-tick span { font-size: 13px; opacity: .85; }
@keyframes tick-in { from { opacity: 0; transform: translate(-50%, -50%) scale(.9); } to { opacity: 1; transform: translate(-50%, -50%); } }
@keyframes tick-out { to { opacity: 0; transform: translate(-50%, -50%) scale(.96); } }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ---------------------------------------------------------------- inbox, sheets, placeholders */
.inbox-list { display: flex; flex-direction: column; gap: var(--s3); margin-top: var(--s2); }
.empty { text-align: center; padding: var(--s4) var(--s2); }
.placeholder p:first-child { margin-top: 0; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: var(--s1) var(--s3); margin: 0 0 var(--s2); }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.sheet { position: fixed; inset: 0; z-index: 10; background: var(--scrim-strong); display: flex; align-items: flex-end; justify-content: center; }
.sheet-body { width: 100%; max-width: 760px; max-height: 86vh; overflow: auto; border-radius: var(--radius) var(--radius) 0 0; animation: sheet-up .25s var(--ease); }
@keyframes sheet-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.sheet-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); }
.sheet-head h2 { margin: 0; font-size: 22px; color: var(--navy); }
.sheet-head button { border: 0; background: none; font-size: 26px; line-height: 1; color: var(--muted); }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.data { width: 100%; border-collapse: collapse; font-size: 13px; }
.data th { text-align: left; font-size: 11.5px; color: var(--muted); font-weight: 600; padding: var(--s1) var(--s1) var(--s1) 0; border-bottom: 1px solid var(--line); white-space: nowrap; }
.data td { padding: var(--s1) var(--s1) var(--s1) 0; border-bottom: 1px solid var(--line); }
.data td.num, .data th.num { text-align: right; white-space: nowrap; }
.data tr.tot td { font-weight: 700; border-top: 2px solid var(--navy); border-bottom: 0; }
.more { font-size: 12px; color: var(--muted); margin-top: var(--s1); }
.table-note { font-size: 12.5px; color: var(--warn); background: var(--warn-bg); border-radius: var(--s1); padding: var(--s1) var(--s2); margin: var(--s1) 0 0; }
.block-title { font-size: 19px; color: var(--navy); margin: var(--s3) 0 var(--s0); }
.share-sheet { position: fixed; inset: 0; background: var(--scrim-strong); display: flex; align-items: flex-end; justify-content: center; z-index: 50; }
.share-box { width: min(480px, 100%); margin: 0; border-radius: var(--radius) var(--radius) 0 0; padding: var(--s3); background: var(--paper); animation: sheet-up .25s var(--ease); }
.share-head { display: flex; justify-content: space-between; align-items: center; }
.share-summary { margin: var(--s1) 0 var(--s2); }
.share-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s1); }
.share-btns .btn { padding: var(--s1); }
.menu-wrap { position: relative; } .dots { font-size: 20px; line-height: 1; }
.menu { position: absolute; right: 0; top: 100%; z-index: 20; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius-s); box-shadow: var(--shadow-float); display: flex; flex-direction: column; min-width: 160px; padding: var(--s0); }
.menu button { border: 0; background: none; text-align: left; padding: var(--s1) var(--s2); border-radius: var(--s1); }
.menu button:hover { background: var(--ivory); }
button.print { border: 0; background: none; cursor: pointer; padding: 0 2px; font-size: 14px; }
a.print { text-decoration: none; margin-left: var(--s0); }
pre.log { font-size: 11.5px; background: var(--ivory); border-radius: var(--s1); padding: var(--s1); overflow-x: auto; white-space: pre; }
.quick-box { max-height: 88vh; overflow-y: auto; }
.qform .q-row { display: grid; grid-template-columns: 2.5fr 1fr 1fr 1fr; gap: var(--s1); margin: var(--s0) 0; }
.qform .q-row > * { min-width: 0; }
.qform .q-row .src { grid-column: 1 / -1; font-size: 12px; }
.q-bill { display: flex; gap: var(--s1); align-items: center; font-size: 13px; padding: 2px 0; flex-wrap: wrap; }
/* What this money puts against each bill, and what is left over as an advance (quick.allocate). */
.q-against { font-size: 12px; }
.q-split { margin: 4px 0 0; }
.q-cashwarn:not([hidden]) { color: var(--danger); margin: 4px 0 0; }

/* ---------------------------------------------------------------- reports */
.rgroup h2 { font-size: 21px; color: var(--navy); margin: var(--s3) 0 var(--s1); }
.rlist { display: grid; grid-template-columns: 1fr; gap: var(--s1); }
.ritem { text-align: left; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s2) var(--s3);
  display: grid; gap: 2px; box-shadow: var(--shadow); min-height: 44px; }
.ritem:hover { border-color: var(--navy); }
.ritem b { color: var(--navy); font-size: var(--fs-card-title); font-weight: 600; }
.ritem span { font-size: var(--fs-small); color: var(--muted); }
.back { padding-left: 0; }
/* Back stays in sight while the screen scrolls (16 Oct): just under the top bar on a phone, at the top of the
   frame on the desktop face, where the phone's top bar is hidden */
.view .back, .cback { position: sticky; top: var(--top-h); z-index: 4; background: var(--ivory); }
.view .back { padding: 6px 10px 6px 0; margin-bottom: 2px; }
body.desk .view .back, body.desk .cback { top: 0; }
.report-head .back, .report-head .btn.link { padding-left: 0; }
.rsub { margin-bottom: var(--s2); }
.rcontrols { display: flex; flex-wrap: wrap; gap: var(--s1); align-items: center; margin: var(--s1) 0 var(--s2); }
.rcontrols select, .rcontrols input { border: 1px solid var(--line); border-radius: var(--s1); padding: var(--s1); font-size: 14px; background: var(--paper); min-width: 0; }
.rcontrols input[type=search] { flex: 1; min-width: 140px; }
.rcontrols .btn { padding: var(--s1) var(--s2); font-size: 13.5px; }
.rbtns { display: flex; gap: var(--s1); flex-wrap: wrap; }
.rline { font-size: 15px; margin: var(--s1) 0 var(--s2); }
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--navy); }
#report-view .data td { white-space: nowrap; }
/* words are never cut off: a text cell wraps inside its width (a figure stays on one line) */
#report-view .data td:not(.num) { white-space: normal; overflow-wrap: anywhere; min-width: 90px; max-width: 320px; vertical-align: top; }
#report-view .table-wrap { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s0) var(--s2); }
.pick { display: flex; gap: var(--s1); margin-top: var(--s2); }
.pick input { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: var(--s1); padding: var(--s1) var(--s2); }

/* ---------------------------------------------------------------- settings */
.setblock { margin-top: var(--s2); }
.setblock h2 { font-size: 20px; color: var(--navy); margin: 0 0 var(--s1); }
body.ai-off .tabs button[data-go="chat"], body.ai-off #rask, body.ai-off .open-chat { display: none !important; }
body.demo .dev-only, body.demo .plan-only, body.demo [data-more-entries] { display: none !important; }
.switch { display: flex; align-items: center; gap: var(--s2); font-weight: 600; cursor: pointer; }
.switch input { width: 20px; height: 20px; accent-color: var(--navy); flex: none; }
.switch.auto { gap: var(--s1); align-items: flex-start; margin: var(--s1) 0; }
.ai-total { font-family: var(--serif); font-size: 22px; color: var(--navy); margin: var(--s1) 0 2px; }
.ai-total.neg { color: var(--danger); }
.imgs { display: flex; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s2); }
.img-up { display: flex; flex-direction: column; gap: var(--s0); font-size: 13px; }
.img-up img { max-width: 120px; max-height: 72px; object-fit: contain; border: 1px solid var(--line); background: var(--paper); }
#invoice-form textarea { width: 100%; }
.score { font-size: 12px; color: var(--muted); white-space: nowrap; margin-right: var(--s1); }

/* ---------------------------------------------------------------- collections and bank */
.ctabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s1); margin: var(--s2) 0; }
.ctab { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: var(--s2); border-radius: var(--radius-s);
  border: 1px solid var(--line); background: var(--paper); cursor: pointer; text-align: left; min-width: 0; }
.ctab.on { border-color: var(--navy); box-shadow: inset 0 -3px 0 var(--navy); }
.ctab b { font-size: 16px; } .ctab span { font-size: 12px; color: var(--muted); }
.crow { display: flex; align-items: center; gap: var(--s2); padding: var(--s1) 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.crow > span { flex: 1; min-width: 0; overflow-wrap: anywhere; } .crow .sub { display: block; font-size: var(--fs-small); color: var(--muted); }
.crow.closed { opacity: .75; } .row-head { display: flex; align-items: center; gap: var(--s2); justify-content: space-between; }
.cdrafts { border-left: 3px solid var(--warn); }
table.bills { margin: var(--s0) 0 var(--s1) var(--s4); width: calc(100% - var(--s4)); }
form.cprefs { display: flex; gap: var(--s1); flex-wrap: wrap; margin: 0 0 var(--s2) var(--s4); align-items: flex-end; }
.chip { display: inline-block; padding: 0 var(--s1); border-radius: var(--s1); font-size: 11px; background: var(--line-soft); }
.chip.green { background: var(--ok-bg); color: var(--ok); } .chip.amber { background: var(--warn-bg); color: var(--warn); }
.chip.red { background: var(--danger-bg); color: var(--danger); } .chip.grey { background: var(--line-soft); color: var(--muted); }
b.in { color: var(--ok); } b.out { color: var(--danger); } .bcard { margin: 0 0 var(--s2) var(--s4); }

/* ---------------------------------------------------------------- the books on this PC are old */
.stale-banner { position: sticky; top: var(--top-h); z-index: 5; margin: 0; padding: var(--s1) var(--s3);
  background: var(--warn-bg); border-bottom: 1px solid var(--warn-line); color: var(--warn);
  font-size: 13px; font-weight: 600; text-align: center; }
/* while it is up, every headline figure says when it was true, so a number read off the screen is never taken for
   today's. One marker per figure, from --as-of; tables carry the banner above them instead of a mark per cell. */
/* Only figures read out of the books carry it. A draft's own total is this card's arithmetic, done just now, so
   marking it "as of" an old sync would be a lie about where the figure came from. */
body.stale .tile .v::after, body.stale .dcard > .tb > .v::after, body.stale .dcard > .tb > .v-row > .v::after, body.stale .coll-head .big-v::after {
  content: var(--as-of, ""); font-family: var(--sans); font-size: 11px; font-weight: 500; color: var(--muted);
  white-space: nowrap;
}
/* Tally shut or not answering: the books may be fresh, but what the stock and the balances ARE right now is
   Tally's to say and nobody has asked it since. Same stamp, in amber, because this one is worth noticing. */
body.tally-shut .tile .v::after, body.tally-shut .dcard > .tb > .v::after, body.tally-shut .dcard > .tb > .v-row > .v::after, body.tally-shut .coll-head .big-v::after {
  content: var(--as-of, ""); font-family: var(--sans); font-size: 11px; font-weight: 500;
  color: var(--warn); white-space: nowrap;
}

/* ---------------------------------------------------------------- bottom bar: always in view */
.tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 6;
  height: calc(var(--tabs-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  /* Five tabs, five equal columns. Starting an entry is an action, not a place to be, so it lives in the header
     and in the composer - the bar is only for the five screens. */
  display: grid; grid-template-columns: repeat(5, 1fr); background: var(--paper); border-top: 1px solid var(--line);
}
.tabs button { position: relative; border: 0; background: none; display: flex; flex-direction: column; align-items: center;
  justify-content: flex-start; gap: 2px; font-size: 11.5px; color: var(--muted); min-width: 0; padding: 9px 2px 0;
  line-height: 1.1; }
.tabs svg { width: 22px; height: 22px; fill: currentColor; flex: none; }
.tabs button span { display: block; }              /* every label on the same baseline, whatever the icon */
.tabs button.on { color: var(--navy); font-weight: 700; }
.tabs button.on::before { content: ""; position: absolute; top: 0; left: 30%; right: 30%; height: 3px; border-radius: 0 0 3px 3px; background: var(--brass); }
.tabs .badge { top: var(--s1); right: calc(50% - 24px); }
/* The header's "+": the same tiles, one tap from anywhere. A circle on a phone, a worded button where there is room. */
.new-entry { display: inline-flex; align-items: center; justify-content: center; gap: var(--s0); border: 1px solid var(--brass);
  background: var(--brass); color: var(--paper); border-radius: 999px; width: 34px; height: 34px; padding: 0; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 600; }
.new-entry svg { width: 20px; height: 20px; fill: currentColor; }
.new-entry .ne-word { display: none; }
.new-entry:hover, .new-entry:focus-visible { filter: brightness(1.08); }

/* the tiles of "+ New entry": one for each kind of voucher */
.etiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s1); margin: var(--s1) 0 var(--s2); }
.etiles button { border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--paper); color: var(--navy);
  padding: var(--s2) var(--s1); font-weight: 600; min-height: 56px; text-align: center; }
.etiles button:hover { border-color: var(--brass); }
.etiles button.soon { color: var(--muted); font-weight: 500; }
.qform .j-row { display: grid; grid-template-columns: 2.5fr 1fr 1.2fr; gap: var(--s1); margin: var(--s0) 0; }
.qform .j-row > * { min-width: 0; }
.qform .q-note { color: var(--muted); font-size: 13px; margin: 0 0 var(--s1); }
.qform .q-copied { color: var(--brass); font-size: 13px; }

/* ---------------------------------------------------------------- phone: nothing wider than the screen */
@media (max-width: 480px), (pointer: coarse) {
  .btn, .btn.sm, .choice, .quick-chips .chip-q, .ctab, .grow-row, .tabs button, .icon-btn, .send, .mic-lang, .ritem,
  .menu button, .msg-pop button, .note-toggle, .more-link, details.more summary, details.packs summary { min-height: 44px; }
  .xlink, details.more summary, details.packs summary { display: inline-flex; align-items: center; min-height: 44px; }
  .mic-lang { min-width: 44px; }
  .icon-btn, .send { width: 44px; height: 44px; }
  .composer-row { height: 56px; }
  /* the rest of this rule is at the FOOT of the file, after every screen's own sizes - see "a finger is 9 mm" */
}
@media (max-width: 480px) {
  main { padding: var(--s2); }
  .logo { font-size: 20px; }
  .top-in { padding: 0 var(--s1) 0 var(--s3); }
  .composer { padding: 0 var(--s2); }
  .page-title { font-size: 24px; }
  .qform .q-row { grid-template-columns: 1fr 1fr 1fr; }
  .qform .q-row > :first-child { grid-column: 1 / -1; }
  .etiles { grid-template-columns: 1fr 1fr; }
  .share-btns { grid-template-columns: repeat(2, 1fr); }
  .ctabs { gap: var(--s0); }
  .ctab { padding: var(--s1); }
  table.bills, form.cprefs, .bcard { margin-left: 0; width: 100%; }
  .msg.me .msg-menu { left: auto; right: 2px; }
  .lines { font-size: 13px; }
  .draft-head { flex-wrap: wrap; }
}

/* ---------------------------------------------------------------- desktop: chat left, draft card right */
@media (min-width: 700px) {
  .share-sheet { align-items: center; }
  .share-box { border-radius: var(--radius); }
}
@media (min-width: 1024px) {
  :root { --top-h: 56px; }
  .new-entry { width: auto; height: 36px; padding: 0 var(--s2); }   /* room for the word beside the + */
  .new-entry .ne-word { display: block; }
  /* everything in a centred 1100px frame: chat 640, panel 420, 24px gutter */
  main { max-width: var(--frame); width: calc(100% - 2 * var(--s4)); padding: var(--s4) 0; }
  #view-inbox, #view-settings, #view-collections, #view-bank, #view-import { max-width: 760px; margin: 0 auto; }
  #view-home, #view-reports { max-width: var(--frame); margin: 0 auto; }
  .tiles { grid-template-columns: repeat(4, 1fr); }
  .dash { grid-template-columns: repeat(3, 1fr); }
  .rlist { grid-template-columns: repeat(3, 1fr); }
  .chat-grid { display: grid; grid-template-columns: minmax(0, 640px) 420px; gap: var(--s4); align-items: start; justify-content: center; }
  .side { display: block; position: sticky; top: calc(var(--top-h) + var(--s4)); max-height: calc(100vh - var(--top-h) - var(--tabs-h) - 2 * var(--s4)); overflow: auto; }
  .side-empty .small { text-align: center; margin: var(--s3) 0 0; }
  .side .draft { overflow: clip; }          /* round corners kept; the action row can still stick to the panel */
  .side .actions { position: sticky; bottom: 0; z-index: 1; background: var(--paper);
    box-shadow: 0 -6px 12px -10px var(--scrim); }               /* Approve stays in view on a short screen */
  .side-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
  .tile-s { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s0); text-align: left; min-height: 124px;
    font: inherit; color: inherit; }
  .tile-s .v { font-family: var(--serif); font-size: 22px; color: var(--navy); line-height: 1.15; word-break: break-word; }
  .tile-s .v.fig-l { font-size: 18px; } .tile-s .v.fig-xl { font-size: 16px; }
  .tile-s.alert .v { color: var(--danger); }
  .tile-s .s { font-size: var(--fs-small); color: var(--muted); }
  .chat-col { position: relative; }
  .msg.bot .card.draft { display: none; }
  .msg.bot .stub { display: flex; }
  .stub { align-items: center; justify-content: space-between; gap: var(--s2); background: var(--paper); border: 1px solid var(--line);
    border-radius: var(--radius); padding: var(--s2); cursor: pointer; animation: card-in .32s var(--ease) both; }
  .stub.active { border-color: var(--navy); box-shadow: inset 3px 0 0 var(--brass); }
  .stub .s1 { font-weight: 600; font-size: var(--fs-card-title); }
  .stub .s2 { font-size: 12px; color: var(--muted); }
  /* the composer sits over the chat column only (the right panel stays clear) */
  .composer { left: max(var(--s4), calc((100% - 1084px) / 2)); right: auto; transform: none;
    width: min(640px, calc(100% - 2 * var(--s4) - 444px)); padding: var(--s3) 0 var(--s1); bottom: calc(var(--tabs-h) + var(--s3)); }
  .composer-row, .attached, .replying, .voice-note, .quick-chips { max-width: 640px; margin-left: 0; }
  .sheet { align-items: center; }
  .sheet-body { border-radius: var(--radius); }
  .tabs { left: 50%; right: auto; transform: translateX(-50%); width: 560px; bottom: var(--s2); border: 1px solid var(--line);
    border-radius: var(--radius); height: var(--tabs-h); box-shadow: var(--shadow-float); }
  body { padding-bottom: calc(var(--tabs-h) + var(--s4)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition: none !important; }
}

/* ---------------------------------------------------------------- greeting v3: big figures, then what needs attention */
.headline { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); margin: var(--s2) 0 var(--s1); }
.hl { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; text-align: left;
  border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--ivory); padding: var(--s2); color: var(--ink); }
.hl:hover { border-color: var(--navy); }
.hl-l { font-size: var(--fs-small); color: var(--muted); }
.hl-v { font: 400 24px/1.15 var(--serif); color: var(--navy); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hl-s { font-size: 12px; color: var(--warn); }
.att { margin-top: var(--s2); }
.att .label { font-size: var(--fs-small); color: var(--muted); font-weight: 600; }
.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.dot.red { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-bg); }
.dot.brass { background: var(--brass); box-shadow: 0 0 0 3px var(--brass-soft); }
.bubble.today .sent { margin: 0; flex: 1 1 220px; min-width: 0; }
.bubble.today .trow.done .sent { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line); }

/* ---------------------------------------------------------------- one continuous chat: search, older days, back to today */
.chat-tools { align-items: center; gap: var(--s1); }
.chat-search { position: relative; flex: 1; min-width: 0; }
.chat-search input { width: 100%; height: 40px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper);
  padding: 0 var(--s3); font-size: 14px; box-shadow: var(--shadow); }
.chat-search input:focus { outline: 2px solid var(--brass); border-color: var(--brass); }
.search-results { position: absolute; left: 0; right: 0; top: calc(100% + var(--s1)); z-index: 30; padding: var(--s1);
  max-height: 60vh; overflow: auto; box-shadow: var(--shadow-float); }
.search-results .hit { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s2); align-items: baseline; width: 100%;
  min-height: 44px; border: 0; background: none; text-align: left; padding: var(--s1); border-radius: var(--s1); }
.search-results .hit:hover { background: var(--ivory); }
.search-results .hk { font-size: 11px; font-weight: 700; color: var(--brass); text-transform: uppercase; letter-spacing: .04em; }
.search-results .ht { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-results .hd { font-size: 12px; color: var(--muted); white-space: nowrap; }
.search-results .none { padding: var(--s2); }
.older { align-self: center; font-size: var(--fs-small); color: var(--muted); padding: var(--s1) var(--s3); }
.older.busy::after { content: ""; display: inline-block; width: 10px; height: 10px; margin-left: var(--s1); border-radius: 50%;
  border: 2px solid var(--line); border-top-color: var(--brass); animation: spin .8s linear infinite; vertical-align: -1px; }
@keyframes spin { to { transform: rotate(360deg); } }
.to-today { display: block; margin: 0 auto var(--s1); border: 0; border-radius: 999px; background: var(--btn); color: var(--on-color);
  min-height: 36px; padding: 0 var(--s3); font-size: var(--fs-small); font-weight: 600; box-shadow: var(--shadow-float); pointer-events: auto; }
@media (max-width: 480px) {
  .headline { grid-template-columns: 1fr 1fr; }
  .headline .hl:last-child { grid-column: 1 / -1; }
  .hl-v { font-size: 22px; }
}

/* More, Collections header */
.more-list { display: grid; gap: var(--s2); margin-top: var(--s2); }
/* Collections: the rows are ticked for a reminder, and narrowed by area or salesman where the books name them */
/* a party's money by the age of its bills: far more use than the age of its single oldest bill */
.agebits { display: inline-flex; flex-wrap: wrap; gap: var(--s0); }
.agebit { font-size: 12px; padding: 1px var(--s1); border-radius: 999px; border: 1px solid var(--line);
  background: var(--ivory); color: var(--muted); white-space: nowrap; }
.agebit.b6190, .agebit.b90 { border-color: var(--brass-line); background: var(--brass-soft); color: var(--warn); }
.coll-head .headline { margin-top: 0; }
.coll-head .label { font-size: var(--fs-small); color: var(--muted); font-weight: 600; margin-top: var(--s2); }
.coll-head > .btn.primary { margin-top: var(--s2); }
@media (min-width: 1024px) { .more-list { grid-template-columns: 1fr 1fr; } }
.hl.on { border-color: var(--navy); background: var(--paper); box-shadow: inset 0 -3px 0 var(--brass); }

/* ---------------------------------------------------------------- one party row (Collections, Today, Who owes me, Bank, Inbox) */
.prow { border-bottom: 1px solid var(--line); padding: var(--s2) 0; }
.prow:last-child { border-bottom: 0; }
.prow-1 { display: flex; align-items: center; gap: var(--s1); min-height: 28px; }
.prow-1 .xlink, .prow-1 .pname { flex: 1; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.prow-1 .fig { font-weight: 700; color: var(--navy); white-space: nowrap; font-variant-numeric: tabular-nums; }
.prow-1 .fig.in { color: var(--ok); } .prow-1 .fig.out { color: var(--danger); }
.prow-chev { flex: none; width: 28px; height: 28px; border: 0; background: none; color: var(--muted); font-size: 18px; line-height: 1;
  border-radius: 50%; transition: transform .15s var(--ease); padding: 0; }
.prow-chev:hover { background: var(--ivory); }
.prow.open > .prow-1 .prow-chev { transform: rotate(90deg); }
.prow-2, .prow-3 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s0) var(--s1); margin-top: 2px;
  font-size: var(--fs-small); color: var(--muted); }
.prow-2 .lane { font-size: 10px; padding: 2px var(--s1); }
.dot-sep { color: var(--line); }
.pill.soft { background: var(--ivory); color: var(--muted); border-color: var(--line); }
.prow-body { padding: var(--s2) 0 0 36px; }
.prow-body .bills { margin: 0 0 var(--s1); width: 100%; }
.prow-body .kv { margin: var(--s1) 0; }
.prow-body .cprefs { margin-left: 0; }
.prow-acts { display: flex; flex-wrap: wrap; gap: var(--s1); align-items: center; padding: var(--s1) 0 0 36px; }
.prow-body .prow-acts { padding-left: 0; }
.prows { margin-top: var(--s1); }
@media (max-width: 480px) { .prow-2, .prow-3, .prow-acts, .prow-body { padding-left: 0; } .prow-chev { width: 44px; height: 44px; } }

/* the pay score badge */
.score-badge { display: inline-flex; align-items: center; gap: 2px; padding: 1px var(--s1); border-radius: 999px; font-size: 12px;
  font-weight: 600; white-space: nowrap; border: 1px solid; font-family: var(--sans); letter-spacing: 0; vertical-align: middle; }
.score-badge.green { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-line); }
.score-badge.brass { background: var(--brass-soft); color: var(--warn); border-color: var(--brass-line); }
.score-badge.red { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-line); }
.score-badge.none { background: var(--ivory); color: var(--muted); border-color: var(--line); }
.score-badge .arr { font-size: 11px; }
h1 .score-badge { font-size: 13px; margin-left: var(--s1); }

/* Share: WhatsApp first */
.share-wa { width: 100%; margin-bottom: var(--s2); }

/* the header's sync */
.synced { border: 0; background: none; padding: 0; color: inherit; text-align: left; cursor: pointer; font: inherit; font-size: 12px; opacity: .75; }
.synced:hover { opacity: 1; }
.sync-btn { width: 44px; height: 44px; border: 0; background: none; border-radius: 50%; display: grid; place-items: center; flex: none; }
.sync-btn:hover { background: var(--bar-tint); }
.sync-btn svg { width: 20px; height: 20px; fill: none; stroke: var(--bar-ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sync-btn.spin svg { animation: spin .9s linear infinite; }
.pull { position: fixed; top: var(--top-h); left: 50%; transform: translateY(-50px); z-index: 4; margin-left: -70px; width: 140px; text-align: center;
  background: var(--btn); color: var(--on-color); border-radius: 999px; padding: var(--s1); font-size: var(--fs-small); box-shadow: var(--shadow-float); }
.toast { position: fixed; left: 50%; bottom: calc(var(--tabs-h) + 96px); transform: translateX(-50%); z-index: 70; max-width: min(92vw, 460px);
  background: var(--btn); color: var(--on-color); border-radius: var(--radius-s); padding: var(--s2) var(--s3); box-shadow: var(--shadow-float);
  font-size: 14px; animation: rise .2s var(--ease); }
.toast.bad { background: var(--danger); }

.btn { white-space: nowrap; }
.row-head { flex-wrap: wrap; row-gap: var(--s1); }
.prow.flat .prow-2, .prow.flat .prow-acts { padding-left: 0; }
.prow { scroll-margin-top: calc(var(--top-h) + var(--s2)); }
.prow-body .bills td, .prow-body .bills th { white-space: nowrap; }
@media (max-width: 480px) {
  .prow-body .bills th:nth-child(2), .prow-body .bills td:nth-child(2) { display: none; }   /* the bill date: the due date says enough */
  .prow-body .bills td .muted { display: block; font-size: 12px; }
}

/* TDS journal and payment amount boxes on the card */
.tds-box { display: grid; gap: var(--s1); margin: var(--s2) 0; padding: var(--s2); border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--ivory); }
.tds-box .label { font-size: var(--fs-small); color: var(--muted); font-weight: 600; }
.tds-in, .amount-in { display: flex; align-items: flex-end; gap: var(--s1); }
.tds-in label, .amount-in label { flex: 1; display: grid; gap: 2px; font-size: var(--fs-small); color: var(--muted); }
.tds-in input, .amount-in input { border: 1px solid var(--line); border-radius: var(--s1); padding: var(--s1); font-size: 14px; background: var(--paper); }
.tds-in.needs input, .amount-in.needs input { border: 2px solid var(--brass); background: var(--warn-bg); }

.why .why-links { margin: 8px 0 2px; }

/* sign-in page (python app.py --lan) */
/* the sign-in page has no header, tab bar or frame: a card centred both ways, nothing else */
body.login-page { min-height: 100vh; min-height: 100dvh; margin: 0; padding: 16px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; background: var(--ivory); }
.login-page .login { width: 100%; max-width: 420px; box-sizing: border-box; margin: 0 auto; padding: 24px; }
.login-page .login h1 { margin: 0 0 4px; }
.login-page .login-form { display: flex; flex-direction: column; gap: 12px; margin: 16px 0 8px; }
.login-page .pin-input { display: block; width: 100%; box-sizing: border-box; min-height: 56px; padding: 10px 12px;
  font: 600 28px/1.2 var(--sans); letter-spacing: 0.45em; text-indent: 0.45em; text-align: center;
  font-variant-numeric: tabular-nums; border: 1px solid var(--line); border-radius: 12px; background: var(--paper);
  color: var(--ink); }
.login-page .pin-input:focus { outline: 2px solid var(--navy); outline-offset: 1px; }
.login-page .pin-input::placeholder { color: var(--muted); letter-spacing: 0.3em; }
.login-page .remember { display: flex; align-items: center; gap: 10px; font-size: 15px; cursor: pointer; }
.login-page .remember input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--navy); }
.login-page .face-switch, .face-switch-foot { text-align: center; margin: var(--s2) 0 0; }
.login-page .face-switch .btn, .face-switch-foot .btn { font-size: var(--fs-small); color: var(--muted); }
.login-page .signin { width: 100%; min-height: 48px; }
.login-page .small { font-size: 13px; }

/* "Who are you?" - the people on this company's Plug as buttons, then that person's own PIN (people.py).
   One button a row, big enough for a thumb on a phone; the role in small letters under the name. */
.who-list { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 4px; }
.who-btn { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; width: 100%;
  min-height: 52px; text-align: left; }
.who-role { font-size: 13px; color: var(--muted); font-weight: 400; }
.who-picked { font-weight: 600; margin: 0 0 4px; }
.who-pin { display: flex; flex-direction: column; gap: 12px; }

/* People (More > People) */
.person .prow-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.person .saved-box { flex: 1; min-width: 0; }
.person .people-form { margin-top: 8px; }
.person .row-head { margin-top: 12px; gap: 8px; }
.people-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.people-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.people-form input, .people-form select { min-height: 40px; padding: 6px 10px; border: 1px solid var(--line);
  border-radius: 8px; font: 400 15px/1.3 var(--sans); background: var(--paper); color: var(--ink); }
.people-form input[name="pin"] { max-width: 120px; letter-spacing: 0.2em; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.mh-who { border-top: 1px solid var(--line); margin-top: var(--s1); padding-top: var(--s1); }
/* Settings and People are the owner's (people.py). The server refuses them to anybody else whatever the screen
   shows; this only spares the others a row that would answer with a refusal. */
body.not-owner .owner-only { display: none; }

/* The company name in the header is the switcher when there is more than one to switch to. */
.top .company { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-align: left; }
.top .company.switchable { cursor: pointer; }
.top .company.switchable::after { content: " \25be"; opacity: 0.75; }

/* Home, above this company's own figures: the company switch - every company by name, this one ticked. */
.home-companies { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 var(--s1); }
.home-companies[hidden] { display: none; }
.co-pick { padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper);
  font: 600 14px/1.3 var(--sans); color: var(--ink); cursor: pointer; max-width: 100%; overflow-wrap: anywhere; }
.co-pick.on { background: var(--hi-bg); border-color: var(--hi-bg); color: var(--hi-ink); cursor: default; }

/* Companies (More > Companies): the name, what Tally is doing with it, then the one switch and the one action. */
.company-row .co-name { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
/* "Look again" and the sentence beside it: the screen's own row, not only the one inside a company's row - without
   this the button was an inline box the sentence wrapped AROUND, so its last words sat under the button */
.co-acts { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s1); }
.co-acts > .btn { flex: 0 1 auto; max-width: 100%; white-space: normal; text-align: left; }
.co-acts > span { flex: 1 1 200px; min-width: 0; }
.company-row .co-acts { justify-content: space-between; }

/* Plug collects (collect.py): the paid blocks above Collections, and Home's own line. */
.did-list { margin: 8px 0 0; padding-left: 18px; }
.did-list li { margin-bottom: 6px; }
.needs-row .prow-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.chase-card { display: block; width: 100%; text-align: left; }
.chase-card b { display: block; }
.chase-card .muted { display: block; margin: 2px 0 6px; }

/* Which company a draft is for - only ever shown when there is more than one */
.card-company { font-size: 12px; color: var(--muted); }

/* "Drafted by Ravi - Posted by Samarth", under the draft's own heading */
.by-line { font-size: 12px; color: var(--muted); margin-top: 2px; }
#settings-lan .row-form { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; margin-top: 12px; }
#settings-lan .plain-list { margin: 4px 0 0; padding-left: 18px; }

/* message times, WhatsApp-style: small and grey at the bottom right of each bubble */
.msg .time, .card .meta .time { font-size: 11px; color: var(--muted); white-space: nowrap; }
.msg .bubble > .time, .msg.me > .time { display: block; text-align: right; margin-top: 2px; line-height: 1; }
.msg.me > .time { color: var(--bar-muted); }

/* a sent file: the chip and the card's file name open it full screen */
button.file, button.link-file { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px; text-align: left; }
.msg.me button.file { display: block; font-size: 12px; opacity: 0.85; }
.viewer { position: fixed; inset: 0; z-index: 1000; background: var(--viewer-bg); display: flex; flex-direction: column; }
.viewer-bar { display: flex; gap: 8px; align-items: center; padding: 10px 16px; color: var(--on-color); }
.viewer-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.viewer-body { flex: 1; overflow: auto; display: flex; align-items: flex-start; justify-content: center; touch-action: pan-x pan-y; }
.viewer-body img { width: 100%; max-width: 1100px; height: auto; touch-action: none; user-select: none; }
.viewer-body iframe { width: 100%; height: 100%; border: 0; background: var(--paper); }
body.viewing { overflow: hidden; }

/* an uploaded bill's own block on the card, and "matched:" under a line */
.bill-box { font-size: 13px; background: var(--ivory-deep); border-radius: 10px; padding: 8px 12px; margin: 8px 0; }
.bill-box .warn { color: var(--brass); }
.line-match { display: block; font-size: 12px; color: var(--muted); }
.line-twin { display: block; font-size: 12px; color: var(--brass); }
.line-twin .btn.link { padding: 0 2px; font-size: 12px; }
#settings-aka .row-form { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; margin-top: 8px; }
#settings-aka .plain-list { margin: 4px 0 0; padding-left: 18px; }
.bill-box .snap-line { margin: 6px 0; }
.bill-box .snap-qr { display: inline-block; margin-right: 8px; cursor: pointer; }
.bill-box .snap-state { font-size: 12px; }


/* The one plain line under a card's title: why it is waiting, in the owner's words. */
.draft-head .headline { font-size: var(--fs-small); color: var(--muted); margin-top: 2px; }
.why .why-head { font-weight: 600; margin-bottom: var(--s1); }
.why .why-details { margin-top: var(--s2); border-top: 1px solid var(--line); padding-top: var(--s1); }
.why .why-details > summary { cursor: pointer; font-weight: 600; color: var(--muted); }
.why .kv-line { font-size: var(--fs-small); color: var(--muted); margin: 2px 0; }

/* The row's chevron sits on the right, after the figure (one party row everywhere: Collections, Today, Inbox). */
.prow-chev.right { margin-left: var(--s1); }

/* Inbox: the group chips, the plain reason on each row, and the collapsed "Incomplete" group. */
.inbox-chips { display: flex; gap: var(--s1); flex-wrap: wrap; margin-bottom: var(--s2); }
.inbox-chips .chip-q { border: 1px solid var(--line); background: var(--paper); border-radius: 999px;
  padding: 0 var(--s2); min-height: 36px; font-size: var(--fs-small); cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; gap: var(--s0); color: var(--navy); }
.inbox-chips .chip-q.on { border-color: var(--navy); font-weight: 600; }
.inbox-reason { color: var(--muted); }
.incomplete-group { padding: var(--s2) var(--s3); }
.incomplete-group > summary { cursor: pointer; font-weight: 600; color: var(--muted); }

/* Settings > Phone access: the address line and its QR. */
.lan-addr { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; margin: var(--s1) 0; }
.lan-addr .addr { font-size: var(--fs-small); overflow-wrap: anywhere; }
.lan-qr { width: 160px; height: 160px; image-rendering: pixelated; border: 1px solid var(--line);
  border-radius: var(--radius-s); background: var(--paper); padding: var(--s1); }
.sync-line { margin: 0; }
.sync-line.warn { color: var(--danger); }

/* A sent file in the chat: a thumbnail and what it is, never the stored file name. */
.file { display: inline-flex; align-items: center; gap: var(--s1); }
.file .file-thumb { width: 28px; height: 28px; object-fit: cover; border-radius: 4px; border: 1px solid var(--line); background: var(--paper); }

/* A card still being filled: no total yet, and Approve waits for the boxes. */
.total.waiting .v { color: var(--muted); font-family: inherit; }

/* Sale card: what the books hold of the item, the HSN behind the line's own fold, and the one amber line
   above Approve when billing this customer is already a question. */
.lines .line-stock { display: block; font-size: var(--fs-small); color: var(--muted); margin-top: 2px; }
/* what the books know about a line still waiting for a figure: the stock held, what this party last paid */
.lines .line-help { display: block; font-size: var(--fs-small); color: var(--warn); margin-top: 2px; }
/* Where this line goes out of, and what this party last paid (godowns.py). Both are facts about the line, so
   they read as the quantity and the rate do - small, under the item, never wider than the card. */
.lines .line-place, .lines .line-last { display: block; font-size: var(--fs-small); color: var(--muted);
  margin-top: 2px; }
.lines .line-place b { color: var(--ink); font-weight: 600; }
.lines .line-place .btn.link.sm { padding: 0 2px; font-size: var(--fs-small); }
.lines .line-more > summary { font-size: var(--fs-small); color: var(--muted); cursor: pointer; }
/* the customer in one line, above the items: owed, last paid, how long they usually take */
.party-ctx { margin: 0 0 var(--s2); padding: var(--s1) var(--s2); border-radius: var(--radius-s);
  background: var(--ivory); border: 1px solid var(--line); color: var(--navy); font-size: 13px; }
.party-ctx.amber { background: var(--brass-soft); border-color: var(--brass-line); color: var(--warn); font-weight: 600; }
.party-ctx .why-bit { display: block; font-weight: 600; margin-top: 2px; }

/* The bill a card was read from, beside its header: tap it to open the photo full screen. */
.draft-head { align-items: flex-start; gap: var(--s2); }
.head-thumb { flex: none; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line);
  border-radius: var(--radius-s); overflow: hidden; background: var(--paper); cursor: pointer; }
.head-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Approvals: one group per thing the owner can do about it. */
.approval-group { margin-bottom: var(--s3); }
.approval-group .group-title { font-size: 18px; margin: 0 0 var(--s1); display: flex; gap: var(--s1); align-items: baseline; }
.approval-group .group-title .muted { font-family: var(--sans); font-size: var(--fs-small); }

/* The reminder sheet: read the message over, change it, then open WhatsApp. */
.rem-msg { display: block; margin: var(--s2) 0; }
.rem-msg textarea { width: 100%; font: inherit; padding: var(--s2); border: 1px solid var(--line);
  border-radius: var(--radius-s); background: var(--paper); }
.plain-list.small { font-size: var(--fs-small); }

/* What leaves this PC: four plain columns that fit a phone; the numbers are behind "Technical details". */
table.data.leaves { font-size: var(--fs-small); }
table.data.leaves td, table.data.leaves th { padding: var(--s1) var(--s1); vertical-align: top; }
.auto.soon { display: flex; align-items: center; gap: var(--s1); padding: var(--s1) 0; }

/* Sign-in: whose books these are, above the PIN box. */
.login .company-name { font-weight: 600; margin: 0 0 var(--s1); }

/* A phone has one screen to spare: a shorter header leaves room for the card and its buttons together. */
@media (max-width: 480px) {
  :root { --top-h: 48px; }
  .top-in { padding: 0 var(--s1) 0 var(--s2); }
  .logo { font-size: 18px; }
  .company { font-size: 12px; }
  .synced { font-size: 11px; }
  .user-initial { width: 32px; height: 32px; }
  .note .serif { font-size: 20px; }
}

/* A message the person spoke rather than typed. */
.msg .spoken { opacity: .75; }
#settings-vocab .vocab-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
#settings-vocab .vocab-w.off { opacity: 0.5; text-decoration: line-through; }
#settings-vocab .row-form { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.change-party { display: inline-block; margin-left: 8px; }
.change-party > summary { display: inline-block; font-size: 12px; padding: 2px 10px; cursor: pointer; list-style: none; }
.change-party > summary::-webkit-details-marker { display: none; }
.change-party .choices { margin-top: 6px; }

/* bank rows: the likeliest ledgers as buttons, the counts line; the in-app yes/no sheet */
.bpicks { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s0) var(--s1); margin: var(--s1) 0 0 52px; }
.chip-btn { border: 1px solid var(--line); background: var(--paper); color: var(--navy); border-radius: 999px; padding: 4px 12px;
  font: inherit; font-size: 13px; cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-btn:hover, .chip-btn:focus-visible { border-color: var(--brass); }
.bcounts { margin: 0 0 var(--s1); }
.ask-acts { display: flex; gap: var(--s1); justify-content: flex-end; margin-top: var(--s2); }
@media (max-width: 480px) { .bpicks { margin-left: 0; } }

/* share sheet: the main action, then one row - PDF · Print · WhatsApp · Email · Copy (· Share… on a phone) */
.share-row { display: flex; flex-wrap: wrap; gap: var(--s1); margin-bottom: var(--s2); }
.share-row .btn { flex: 1 1 0; min-width: 72px; padding: var(--s1); }
@media (max-width: 480px) { .share-row .btn { flex: 1 1 28%; } }

/* Collections top: one big overdue figure, then due today and the next 7 days */
.coll-big { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; }
.coll-big .big-v { display: block; font-family: "DM Serif Display", serif; font-size: 36px; line-height: 1.15; color: var(--navy); }
.coll-next { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s0) var(--s1); margin-top: var(--s1); }
.link-like { background: none; border: 0; padding: 0; font: inherit; color: var(--navy); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.link-like.on, .coll-big.on .hl-l { font-weight: 600; }

/* What Plug knows about this company: a fact, the value, and why it believes it - one line each, so a page
   with hundreds of facts still reads top to bottom on a phone. */
.prof-tabs { display: flex; gap: var(--s1); margin-bottom: var(--s2); }
.prof-tabs .badge { margin-left: 6px; }
.prof-sec h2 { margin-bottom: 2px; }
.psub { font-family: "DM Serif Display", serif; font-size: 16px; color: var(--navy); margin: var(--s2) 0 var(--s0); }
.prow { padding: var(--s1) 0; border-top: 1px solid var(--line); }
.prow:first-of-type { border-top: 0; }
.prow-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s0) var(--s1); justify-content: space-between; }
.prow-top .pval { text-align: right; flex: 1 1 40%; min-width: 0; overflow-wrap: anywhere; }
.prow-why { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s0) var(--s1); margin-top: 2px; }
.prow-why .btn.link { margin-left: auto; }
.prow.yours { border-left: 3px solid var(--brass); padding-left: var(--s1); }
@media (max-width: 480px) { .prow-top .pval { text-align: left; flex: 1 1 100%; } }

/* Home: under the four lines about the books, one quieter line about the bot's own drafts */
.note li.as-drafted { color: var(--muted); font-size: 14px; padding: var(--s0) 0 0; list-style: none; }
.note li.as-drafted .link-like { color: inherit; font: inherit; text-align: left; }
.as-drafted-block { margin-top: var(--s2); border-top: 1px solid var(--line); padding-top: var(--s2); }
.as-drafted-block h3 { font-size: 16px; color: var(--navy); margin: 0 0 var(--s0); }

/* Once Tally has it: a confirmation, not a draft. Green when every field matched, amber when one came back
   different - the entry is in Tally either way, so the card never reads like a failure. */
.done { border: 1px solid var(--line); border-left: 4px solid var(--ok); border-radius: var(--radius);
  padding: var(--s2); margin-top: var(--s2); background: var(--ok-bg); }
.done.amber { border-left-color: var(--brass); background: var(--brass-soft); }
.done.waiting { border-left-color: var(--navy); background: var(--paper); }
.done-head { display: flex; align-items: center; gap: var(--s1); font-size: 17px; color: var(--navy); }
.done-head .tick { width: 22px; height: 22px; flex: 0 0 22px; fill: var(--ok); }
.done.amber .tick { fill: var(--warn); }
.done-checked { color: var(--muted); font-size: 14px; margin-top: 2px; }
.done-lines { margin: var(--s1) 0 0; padding: 0; list-style: none; }
.done-lines li { padding: 2px 0; }
.done-trouble { margin-top: var(--s1); color: var(--navy); }
.done-safe { margin-top: var(--s0); color: var(--muted); font-size: 14px; }
.in-tally-said { color: var(--muted); }
.in-tally-said.amber { color: var(--warn); }
table.in-tally td:first-child { color: var(--muted); white-space: nowrap; padding-right: var(--s2); }
.in-tally-fields { margin-top: var(--s2); }
.in-tally-fields td { font-size: 13px; overflow-wrap: anywhere; }

/* Party ledger reconciliation: the two sides, then every difference with what can be done about it */
.recon-sides { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); margin-bottom: var(--s2); }
.recon-sides > div { display: flex; flex-direction: column; }
.recon-sides b { font-size: 17px; color: var(--navy); }
.recon-head-line { font-family: var(--serif); font-size: 20px; color: var(--warn); }
.recon-head-line.ok { color: var(--ok); }
.recon-head .share-row .btn { flex: 1 1 auto; }     /* a long label wraps to its own line, never clipped */
.recon-group h2 { margin-bottom: 2px; }
.rrow { border-top: 1px solid var(--line); padding: var(--s1) 0; }
.rrow:first-of-type { border-top: 0; }
.rrow-top { display: flex; justify-content: space-between; gap: var(--s2); align-items: baseline; }
.rrow.set-aside { opacity: .62; }
.rrow .acts { display: flex; flex-wrap: wrap; gap: var(--s1); margin-top: var(--s0); }
/* Stock problems: a card per item that went below zero, in the owner's words, with what can be done */
.stock-item h2 { margin-bottom: 2px; }
.stock-item .stock-head { font-family: var(--serif); font-size: 18px; color: var(--navy); }
.stock-item.set-aside { opacity: .62; }
.stock-item .mini b { white-space: normal; text-align: right; font-weight: 500; }
.stock-item .acts { display: flex; flex-wrap: wrap; gap: var(--s1); margin-top: var(--s2); }

.ask-text { white-space: pre-wrap; background: var(--ivory); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--s2); font: inherit; font-size: 14px; max-height: 40vh; overflow: auto; }

/* Collections: Overdue and Over 180 days side by side, both always shown */
.coll-bigs { display: flex; flex-wrap: wrap; gap: var(--s3); }
.coll-bigs .coll-big { width: auto; flex: 1 1 140px; }
.coll-big.old .big-v { color: var(--muted); }
/* Three figures in one row (the paid Collections header). The two-figure row above gives each a 140px basis,
   which three of them cannot have on a phone - so these share the row equally and shrink instead, and a figure
   stays on one line rather than breaking in half ("4.88" above and "L" below). */
.coll-bigs.three { gap: var(--s1); }
.coll-bigs.three .coll-big { flex: 1 1 0; min-width: 0; }
/* The figure itself never breaks in half; the "as of ..." that staleness adds after it goes on its own line. */
.coll-bigs.three .big-v { font-size: 20px; line-height: 1.2; white-space: nowrap; }
body.stale .coll-bigs.three .big-v { white-space: normal; }
body.stale .coll-bigs.three .big-v::after { display: block; }
.coll-bigs.three .hl-l, .coll-bigs.three .hl-s { overflow-wrap: anywhere; }
.coll-bigs.three .hl-s { display: block; }
@media (min-width: 480px) { .coll-bigs.three .big-v { font-size: 26px; } }
@media (min-width: 760px) { .coll-bigs.three .big-v { font-size: 32px; } }

/* The Collections scoreboard (C1b): one big figure, a 2x2 grid, two strips - the first screen, and it fits one
   phone (390x844) without scrolling. A figure never wraps: .long shrinks it instead of breaking it in half. */
.score-big { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; border: 0;
  background: var(--paper); cursor: pointer; }
.score-big .sb-l { font-size: var(--fs-small); color: var(--muted); font-weight: 600; }
.score-big .sb-v { font-family: var(--serif); font-size: 40px; line-height: 1.1; color: var(--navy);
  white-space: nowrap; font-variant-numeric: tabular-nums; }
.score-big .sb-v.long { font-size: 32px; }
.score-big .sb-s { font-size: 13px; color: var(--ink); }
.score-big .sb-asof { font-size: 11px; color: var(--muted); }
body.stale .score-big .sb-v::after { content: ""; }      /* the stamp is already on the card, in its own line */

.score-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); margin: var(--s2) 0; }
.score-tile { display: flex; flex-direction: column; gap: 2px; min-width: 0; text-align: left;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--s2); cursor: pointer; }
.score-tile:hover { border-color: var(--brass); }
.score-tile .st-v { font-size: 22px; font-weight: 700; color: var(--navy); white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.score-tile .st-v.long { font-size: 17px; }
.score-tile .st-l { font-size: 12px; color: var(--muted); line-height: 1.25; }
.score-tile .st-s { font-size: 11px; color: var(--muted); }

/* A strip: one line and a chevron. "Reminders ready to send" carries its own Send all and is hidden when 0. */
.strip-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s1) var(--s2);
  flex-wrap: wrap; width: 100%; padding: var(--s2) var(--s3); text-align: left; border: 0;
  background: var(--paper); cursor: pointer; font: inherit; font-size: 15px; }
.strip-row > span:first-child { min-width: 0; }
.strip-row .chev { flex: none; color: var(--muted); font-size: 18px; }
/* The words stay on one line; on a narrow phone it is "Send all" that drops below them, not the sentence. */
.strip-row .strip-main { display: flex; align-items: center; justify-content: space-between; gap: var(--s1);
  flex: 1 1 auto; min-width: 0; border: 0; background: none; padding: 0; text-align: left; font: inherit;
  white-space: nowrap; cursor: pointer; }
.strip-row .btn { flex: none; white-space: nowrap; margin-left: auto; }

/* "All parties": the free screen, whole and unchanged, one tap below the scoreboard. */
details.allparties > summary { cursor: pointer; font-weight: 600; color: var(--navy); list-style: none; }
details.allparties > summary::after { content: " \203a"; color: var(--muted); }
details.allparties[open] > summary::after { content: ""; }
details.allparties > summary::-webkit-details-marker { display: none; }
details.allparties .card { border: 0; box-shadow: none; padding-left: 0; padding-right: 0; }
details.allparties > summary + * { margin-top: var(--s2); }
.rep-day + .rep-day { margin-top: var(--s2); border-top: 1px solid var(--line); padding-top: var(--s2); }
.rep-day .label { font-size: var(--fs-small); color: var(--muted); font-weight: 600; }

/* "Your action": the first thing on Collections, because it is the only thing on it that cannot wait. */
.score-action { padding: var(--s2) var(--s3); }
.act-head { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: var(--s2);
  border: 0; background: none; padding: 0; text-align: left; font: inherit; cursor: pointer; }
.act-head .ah-l { font-size: 16px; color: var(--navy); }
.act-why { font-size: 12px; color: var(--muted); margin: 2px 0 var(--s2); }
.act-row { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--s2); align-items: start;
  padding: var(--s2) 0 var(--s1); border-top: 1px solid var(--line); }
.act-row .ar-name { grid-column: 1; border: 0; background: none; padding: 0; text-align: left; font: inherit;
  cursor: pointer; min-width: 0; }
.act-row .ar-n { display: block; font-weight: 700; color: var(--navy); overflow-wrap: anywhere; }
.act-row .ar-a { display: block; font-size: 12px; color: var(--muted); }
/* The money sits at one right edge down the whole list, so three rows can be read as a column. */
.act-row .ar-amt { grid-column: 2; grid-row: 1; font-weight: 700; color: var(--navy); white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.act-row .ar-why { grid-column: 1 / -1; font-size: 12px; color: var(--muted); line-height: 1.35; }
.act-row .ar-acts { grid-column: 1 / -1; display: flex; gap: var(--s1); margin-top: 6px; flex-wrap: wrap; }
.act-row .ar-acts .btn { flex: 0 1 auto; min-height: 36px; padding: 6px var(--s2); font-size: 13px;
  text-align: center; justify-content: center; }
.act-more { padding-left: 0; }

/* Payment overdue: a third shorter than it was, with the age bar under the figure. */
.score-big { padding: var(--s2) var(--s3); }
.score-big .sb-v { font-size: 32px; }
.score-big .sb-v.long { font-size: 26px; }
.age-bar { display: flex; gap: 2px; height: 6px; margin-top: var(--s1); border-radius: 3px; overflow: hidden; }
.age-bar i { display: block; height: 100%; background: var(--line); }
.age-bar .ab-0-30 { background: var(--ok); } .age-bar .ab-31-60 { background: var(--brass); }
.age-bar .ab-61-90 { background: var(--warn); } .age-bar .ab-90p { background: var(--danger); }

/* The four small tiles: the label above the figure, so the eye reads what a number is before the number. */
.score-tile .st-l { order: -1; font-size: 12px; }
.score-tile .st-v { font-size: 20px; }
.score-tile .st-v.long { font-size: 16px; }
/* Nothing is "none", in the muted weight of an absence rather than the weight of a figure. */
.score-tile .st-v.none { font-size: 18px; font-weight: 600; color: var(--muted); }
.act-why .why-i { min-height: 0; padding: 0 6px; border: 1px solid var(--line); border-radius: 999px;
  font-size: 11px; line-height: 16px; margin-left: 4px; }
.act-list .act-row:first-child { border-top: 0; }
/* A customer's name in a list is a name, not a link to read past: bold navy, with the chevron as the way in.
   The underline stays everywhere else, where an xlink really is one word inside a sentence. */
#view-collections .prow-1 .xlink, .batch-row .xlink { text-decoration: none; font-weight: 700; }
.next-batch { margin-top: var(--s2); }
/* Settings > Collections: the chase ladder, one step under another. */
.lstep { padding: var(--s2) 0; border-top: 1px solid var(--line); }
.lstep:first-of-type { border-top: 0; }
.lstep.quiet { opacity: 0.75; }
.lstep .lsay { margin: 4px 0 0; line-height: 1.45; }
.lstep .prow-acts { padding-left: 0; }
.strip-row.thin { padding: var(--s2) var(--s3); font-size: 14px; }
.warn-card { border-color: var(--brass); background: var(--warn-bg); display: flex; gap: var(--s2);
  align-items: center; justify-content: space-between; flex-wrap: wrap; font-size: 13px;
  padding: var(--s2) var(--s3); }
.warn-card .btn { flex: none; min-height: 36px; padding: 6px var(--s2); }
.batch-row .held { color: var(--warn); font-size: 12px; }
/* The message itself, exactly as it would go: wrapped, never cut, and never a line scrolling sideways. */
.batch-msg { white-space: pre-wrap; overflow-wrap: anywhere; font: 400 12px/1.45 var(--sans, inherit);
  color: var(--navy); background: var(--paper-soft); border: 1px solid var(--line);
  border-radius: 8px; padding: var(--s2); margin: var(--s1) 0 0; }
.cfind { display: block; margin: var(--s2) 0; }
.cfind input { width: 100%; }
/* The area and salesman filters as chips: a raw dropdown on a phone is the system wheel for what is two taps. */
.chip-row { display: flex; gap: var(--s1); flex-wrap: wrap; }
.chip-f { border: 1px solid var(--line); background: var(--paper); border-radius: 999px;
  padding: 4px var(--s2); font-size: 13px; color: var(--navy); }
.chip-f.on { background: var(--hi-bg); color: var(--hi-ink); border-color: var(--hi-bg); font-weight: 600; }
/* The "+" writes an entry; on Collections the action is chasing money. */
body.on-collections .new-entry { display: none; }

/* The customer's page: the four facts a person wants before they ring, then the brief, then two buttons. */
.pfacts { margin: 0 0 var(--s2); display: grid; gap: 4px; }
.pfacts > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); }
.pfacts dt { font-size: 13px; color: var(--muted); }
.pfacts dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.pfacts dd b { font-size: 20px; color: var(--navy); }
/* The pay-day is a sentence, not a figure, so it stacks under its label instead of being squeezed
   against the right edge the money lines share. */
.pfacts > div.wide { display: block; }
.pfacts > div.wide dd { text-align: left; font-size: 14px; }
.before-call { border-top: 1px solid var(--line); padding-top: var(--s2); margin-bottom: var(--s2); }
.before-call .label { font-size: var(--fs-small); color: var(--muted); font-weight: 600; }
.before-call ul { margin: 4px 0 0; padding-left: 18px; }
.before-call li { margin: 2px 0; line-height: 1.45; }
.party-acts { padding-left: 0; align-items: center; }
.pmenu { margin: 0; }
.pmenu > summary { list-style: none; padding: 0 var(--s2); color: var(--muted); font-size: 18px; }
.pmenu > summary::-webkit-details-marker { display: none; }
.pmenu-box { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding-top: var(--s1); }
td .b-date { display: block; }

/* Settings: a saved value reads as text with "Edit"; Edit opens the box again (app.js savedBox/showSaved) */
.saved-box[data-state="view"] > form { display: none; }
.saved-box[data-state="edit"] > .sv-view { display: none; }
.saved-box .sv-view { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.saved-box .sv-text { font-weight: 500; }
.saved-box .sv-kv { margin: 0; }

/* the + sheet's amount box: the rupee sign sits in the box, the figure is typed after it */
.rupee-box { display: flex; align-items: center; gap: 4px; }
.rupee-box > span { color: var(--muted); }
.rupee-box > input { flex: 1; }
/* a bill on the Receipt/Payment sheet: the tick beside its words, on one line */
.qform .q-bill { display: flex; flex-direction: row; align-items: baseline; flex-wrap: wrap; font-weight: 400; color: inherit; }
.qform .q-bill input[type="checkbox"] { width: auto; flex: none; margin: 0 4px 0 0; }

/* Plug's notes on this company: the summary as plain lines, the questions one under another */
ul.notes { margin: 0 0 var(--s2); padding-left: 18px; }
ul.notes li { margin: 4px 0; line-height: 1.45; }
/* Confirm / Edit under a line the books worked out: one tap makes it the owner's word
   (company_profile.correct). Its own line rather than trailing the sentence, so a learned line reads as a
   sentence with two small actions under it and nothing has to be held on one unbreakable line. */
.nf-acts { display: block; margin-top: 2px; }
.nf-acts .btn.link.sm { padding: 0 8px 0 0; }
.nf-acts .src { padding-right: 8px; }
.nq { padding: var(--s2) 0; border-top: 1px solid var(--line); }
.nq:first-child { border-top: 0; }
/* A day-one question's choices. They are whole sentences now that every choice carries its own label (the
   business shape has eight of them, the longest 60 characters), so the row WRAPS and a button is allowed to
   be as wide as the card and to break its own text - laid out in one unwrapped row they came to 2,843 px and
   pushed the notes screen sideways on a phone. */
.nq .acts { display: flex; flex-wrap: wrap; gap: var(--s1); margin-top: 6px; }
.nq .acts .btn { max-width: 100%; white-space: normal; text-align: left; }
.nq-box { display: flex; gap: var(--s1); margin-top: 6px; }
.nq-box input { flex: 1; min-width: 0; }
/* A question's own box: a ₹ in front of a money figure, the unit after a day count, so nobody types the word. */
.nq-pre, .nq-post { color: var(--muted); font-size: 13px; align-self: center; white-space: nowrap; }
.nq-box input[type="number"] { flex: 0 0 auto; max-width: 7em; }
.nq-box input[type="date"] { flex: 0 0 auto; }
form.wrong-in { display: flex; gap: var(--s1); align-items: flex-end; flex-wrap: wrap; margin-top: 4px; }

/* The early-payment offer on a sale card: the one line a customer will read, what it is worth and why, and
   the two things the owner may do about it before posting. Brass, because it is an offer and not a warning. */
.early-pay { margin: var(--s2) 0 0; padding: var(--s2); border: 1px solid var(--line);
  border-left: 3px solid var(--brass); border-radius: 8px; background: var(--brass-soft); }
.early-pay .ep-line { font-size: 15px; color: var(--navy); }
.early-pay .ep-why { margin-top: 4px; font-size: 13px; color: var(--muted); }
.early-pay .prow-acts { margin-top: 6px; }
.ep-ask { margin-top: var(--s2); padding-top: var(--s2); border-top: 1px solid var(--line); }

/* The credit decision on a sale card: what the books know about this customer, above the items, in the amber
   a card already uses for "something to look at" rather than the red of a refusal. */
.credit-line { margin: 0 0 var(--s2); padding: var(--s2); border: 1px solid var(--line);
  border-left: 3px solid var(--brass); border-radius: 8px; background: var(--brass-soft); }
.credit-line.held { border-left-color: var(--danger); background: var(--danger-bg); }
.credit-line .cl-text { font-size: 15px; color: var(--navy); }
.credit-line .cl-why { margin-top: 4px; font-size: 13px; color: var(--muted); }
.credit-line .prow-acts { margin-top: 8px; }

/* Supply on hold, at the top of a customer's page: the first thing anybody reading it should know, in the
   colour a refusal uses rather than the amber of something merely worth a look. */
.held-band { margin: 0 0 var(--s2); padding: var(--s2); border-radius: 8px; background: var(--danger-bg);
  border: 1px solid var(--danger-line); color: var(--danger); }
.held-band .muted { color: var(--muted); }

/* More > Companies: the first load of a ticked company, one line that moves on by itself */
.co-load { font-size: 13px; margin: 6px 0; color: var(--navy); }
.co-load.failed { color: var(--danger); }
.co-load.done { color: var(--ok); }
/* One state per company, in one line (companies.state_of): reading, failed, Tally not answering, or ready. */
.co-state { font-size: 13px; margin: 6px 0; color: var(--muted); }
.co-state.reading { color: var(--navy); }
.co-state.failed { color: var(--danger); }
.co-state.ready { color: var(--ok); }

/* Tally closed or not answering: the header line in amber (freshness.tally_words) */
.synced.warn { color: var(--brass); opacity: 1; font-weight: 600; }

/* The Recovery desk (recovery.py): one card per customer, the roads under them. A road that is shut is still
   listed, greyed, because "why not" is the useful part of it. */
.recov .roads { margin: var(--s2) 0 0; }
.recov .road { padding: var(--s2) 0; border-top: 1px solid var(--line); }
.recov .road.shut { opacity: 0.62; }
.recov .road .row-head { margin: 0; gap: var(--s1); }
.recov .road .btn { margin-top: var(--s1); }
/* A deadline the law is running, not one of ours: the warning reads as a warning. */
.pill.red { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-line); }
.warn-band { padding: var(--s2); border-radius: 8px; background: var(--brass-soft); color: var(--warn);
  border: 1px solid var(--brass-line); font-weight: 600; }
.warn-band.small { font-weight: 500; font-size: 13px; margin-top: var(--s2); }

/* The paid layer, seen from a free plan (plans.py): the same small card on every one of those screens -
   what Plug would do, one line of their own figures, and the way to see the whole of it. */
.paid-card .paid-own { margin: 12px 0 0; padding: 12px; border-radius: 10px; background: var(--brass-soft);
  border-left: 3px solid var(--brass); }
.paid-card .acts { margin-top: 16px; display: flex; gap: 8px; flex-wrap: wrap; }
/* A preview that is a picture: the first page of their own notice, blurred. It never scrolls sideways and the
   caption under it says whose letter it is. */
.paid-card .paid-shot { margin: 12px 0 0; }
.paid-card .paid-shot img { display: block; width: 100%; max-width: 100%; height: auto; border-radius: 10px;
  border: 1px solid var(--line); background: var(--paper); }
.paid-card .paid-shot figcaption { margin-top: 6px; }

/* The month-end checklist (monthend.py): every line always there - clean, to look at, or not for this
   organisation - one rule between them, the state in the lane pill's own colours. */
.me-item { padding: var(--s2) 0; border-top: 1px solid var(--line); }
.me-item p { margin: var(--s1) 0; }
.me-item.warn .row-head b { color: var(--warn); }
.me-figs td.num a { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; }

/* Bank stage 2: what the proposals would leave On Account - green when nothing, amber when something. */
.bunadj { margin: var(--s1) 0; font-size: 0.92em; }
.bunadj.warn { color: var(--warn); }
.bunadj.ok { color: var(--ok); }

/* ---- Collections tab (collections_tab.py): the sentence, four tiles, the ageing list ---- */
.coll-sentence { margin: 0 0 var(--s3); font-size: 17px; line-height: 1.45; color: var(--navy); }
.ctiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); margin-bottom: var(--s3); }
@media (min-width: 900px) { .ctiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ctile { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: var(--s2) var(--s3);
  display: flex; flex-direction: column; gap: 2px; min-width: 0; cursor: pointer; }
.ctile.on { border-color: var(--navy); box-shadow: 0 0 0 1px var(--navy) inset; }
.ct-l { font-size: 13px; color: var(--muted); }
.ct-v { font-size: 22px; font-weight: 700; color: var(--navy); white-space: nowrap; }
.ct-v.long { font-size: 18px; }
.ct-s { font-size: 12px; color: var(--muted); }
.ct-bands { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin-top: var(--s1); }
.ct-band { border: 0; background: var(--ivory); border-radius: 8px; padding: 4px 2px; display: flex;
  flex-direction: column; align-items: center; min-width: 0; cursor: pointer; font: inherit; }
.ct-band i { font-style: normal; font-size: 10px; color: var(--muted); }
.ct-band b { font-size: 11px; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ct-band.on, .ct-day.on { background: var(--btn); }
.ct-band.on i, .ct-band.on b, .ct-day.on { color: var(--on-color); }
.ct-days { display: flex; gap: 3px; margin-top: var(--s1); flex-wrap: wrap; }
.ct-day { border: 0; background: var(--ivory); border-radius: 6px; width: 26px; height: 26px; font: inherit;
  font-size: 12px; cursor: pointer; color: var(--navy); margin: 0; padding: 0; line-height: 26px;
  min-height: 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; }
.ct-days { align-items: flex-start; }
.ct-v.none { font-weight: 400; color: var(--muted); font-size: 18px; }
.ct-band { margin: 0; min-height: 0; }
.ct-day.empty { opacity: .45; }
.aglist { padding: var(--s2) 0 var(--s2); }
.ag-tools { padding: 0 var(--s3) var(--s2); display: flex; flex-direction: column; gap: var(--s1); }
.ag-filter { display: inline-flex; align-items: center; gap: 4px; }
.ag-filter .x { border: 0; background: none; cursor: pointer; font-size: 15px; line-height: 1; padding: 0 2px; }
.ag-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--s2); padding: var(--s2) var(--s3);
  border-top: 1px solid var(--line); min-width: 0; }
.ag-row[data-agparty] { cursor: pointer; }
.ag-row[data-agparty]:hover { background: var(--ivory); }
.ag-name { min-width: 0; overflow-wrap: anywhere; }
.ag-name small { display: block; color: var(--muted); font-size: 12px; }
.ag-total { font-weight: 700; text-align: right; white-space: nowrap; }
.ag-total small { display: block; font-weight: 400; font-size: 11px; color: var(--muted); }
.ag-bands { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.ag-b { font-size: 12px; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-b::before { content: attr(data-label) " "; color: var(--muted); font-size: 10px; }
.ag-meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 2px var(--s2); font-size: 12px;
  color: var(--muted); align-items: center; }
.ag-meta:empty { display: none; }
.ag-head { display: none; }
.ag-tot { font-weight: 700; background: var(--ivory); }
@media (min-width: 900px) {
  .ag-row { grid-template-columns: minmax(180px, 2.2fr) minmax(90px, 1fr) repeat(4, minmax(70px, 1fr))
    minmax(120px, 1.3fr) minmax(110px, 1.1fr) minmax(110px, 1.1fr); align-items: center; }
  .ag-bands, .ag-meta { display: contents; }
  .ag-b::before { content: none; }
  .ag-head { display: grid; font-size: 12px; color: var(--muted); font-weight: 600; }
  .ag-head .ag-b, .ag-head .ag-total { text-align: right; }
  .ag-paid, .ag-chip, .ag-pays { font-size: 13px; }
}

/* ---- the customer's page (party_ledger.py): the header, the ledger with its notes, the history ---- */
.ph-owes { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--s2); margin-bottom: var(--s1); }
.ph-l { font-size: 13px; color: var(--muted); width: 100%; }
.ph-v { font-size: 26px; color: var(--navy); }
.ph-s { color: var(--muted); }
.ph-both { margin: 0 0 var(--s1); font-size: 13px; }
.ph-reach { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1); margin: var(--s1) 0; }
.ph-facts { margin-top: var(--s1); }
.pfacts-more summary { cursor: pointer; color: var(--muted); font-size: 13px; margin-top: var(--s2); }
.ledger-card { padding-left: 0; padding-right: 0; }
.ledger-card > .row-head, .ledger-card > p { padding: 0 var(--s3); }
.lg-exports { display: flex; flex-wrap: wrap; gap: 0 var(--s1); }
.lg-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 2px var(--s2); padding: var(--s2) var(--s3);
  border-top: 1px solid var(--line); font-size: 13px; min-width: 0; }
.lg-date { color: var(--muted); white-space: nowrap; }
.lg-part { min-width: 0; overflow-wrap: anywhere; }
.lg-part small { display: block; color: var(--muted); font-size: 11px; }
.lg-dr, .lg-cr, .lg-bal { text-align: right; white-space: nowrap; }
.lg-dr:empty, .lg-cr:empty { display: none; }
.lg-bal { grid-column: 3; font-weight: 600; }
.lg-note { grid-column: 1 / -1; color: var(--muted); font-size: 12px; }
.lg-head { display: none; }
.lg-pdcs { padding: var(--s2) var(--s3) 0; display: flex; flex-wrap: wrap; gap: var(--s1); }
@media (min-width: 900px) {
  .lg-row { grid-template-columns: 90px minmax(160px, 1.6fr) 110px 110px 130px minmax(200px, 2fr); align-items: start; }
  .lg-dr:empty, .lg-cr:empty { display: block; }
  .lg-bal { grid-column: auto; }
  .lg-note { grid-column: auto; }
  .lg-head { display: grid; font-weight: 600; color: var(--muted); font-size: 12px; }
  .lg-head .lg-dr, .lg-head .lg-cr, .lg-head .lg-bal { text-align: right; }
}
.hist { margin-top: var(--s2); }
.hist-list { margin: var(--s1) 0 0; padding-left: 18px; font-size: 13px; }
.hist-list li { margin-bottom: 2px; overflow-wrap: anywhere; }

/* ---- the actions on the customer's page (part 3): four on the row, four under More, all eight on a desktop ---- */
.pa-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1); margin-top: var(--s2); }
.pa-four { display: flex; flex-wrap: wrap; gap: var(--s1); }
.pa-more { position: relative; }
.pa-more summary { list-style: none; cursor: pointer; padding: 6px 10px; border-radius: var(--radius-s); color: var(--navy); font-weight: 600; }
.pa-more summary::-webkit-details-marker { display: none; }
.pa-more-box { position: absolute; right: 0; z-index: 20; background: var(--paper); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: 0 6px 20px var(--shade); padding: var(--s1); display: flex; flex-direction: column;
  min-width: 190px; align-items: flex-start; }
.pa-wide { display: none; }
@media (min-width: 900px) {
  .pa-more { display: none; }
  .pa-wide { display: flex; flex-wrap: wrap; gap: var(--s1); }
}
.rs-bills, .rs-files { display: flex; flex-direction: column; gap: 4px; margin: var(--s1) 0; font-size: 13px; }
.tick { display: flex; gap: 6px; align-items: flex-start; }
.chip-f.off { opacity: .4; cursor: not-allowed; }
.rem-lead { display: flex; flex-direction: column; gap: 4px; font-size: 13px; margin-top: var(--s1); }
.rec-item { border-top: 1px solid var(--line); padding: var(--s2) 0; }
.rec-item.shut b { color: var(--muted); }
.pa-dates li { margin-bottom: 2px; }

/* ---- Tidy bill-wise in Tally (tidy.py) ---- */
.tidy-band { margin: 0 var(--s3) var(--s2); padding: var(--s2) var(--s3); border-radius: 12px; background: var(--warn-bg);
  border: 1px solid var(--brass-line); }
.tidy-band p { margin: 0 0 var(--s1); }
.tidy-ok { margin: 0 var(--s3) var(--s2); color: var(--ok); }

/* The reports under Collections, at the foot of the tab: chips that wrap, never a sideways scroll. */
.coll-reports { margin: var(--s4, 24px) 0 var(--s3, 16px); }
.coll-reports h3 { margin: 0 0 var(--s2, 8px); font-size: 15px; color: var(--navy); }
.cr-list { display: flex; flex-wrap: wrap; gap: 8px; }
.cr-list .cr { min-height: 40px; padding: 8px 14px; border-radius: 20px; border: 1px solid var(--line); background: var(--paper);
  color: var(--navy); font: inherit; font-size: 14px; cursor: pointer; }
.cr-list .cr:hover { border-color: var(--brass); }
/* A UPI link is one long word: it wraps inside the sheet rather than running past its edge on a phone. */
.rem-upi { overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- Collections (rebuilt 12 Oct, Docs/collections-mock.html)
   Every screen fits a 390 px phone; a wide table slides inside its own card (.twrap), never the page. */
.cbar { display: flex; align-items: center; gap: var(--s1); margin: 0 0 var(--s2); min-width: 0; }
.cbar-t { flex: 1; min-width: 0; }
.cbar .page-title { font-size: 22px; line-height: 1.2; margin: 0; overflow-wrap: anywhere; }
/* the line under the title says the period and the group: it wraps rather than being cut, because "1-Apr-26 to
   19-Oct-26 · Sundry Debtors" in 114 px of room showed "1-Apr-26 to 19-O…" and nothing else (party page, 390 px) */
.cbar .rsub { font-size: var(--fs-small); color: var(--muted); }
.cbar .rsub.ell { white-space: normal; overflow: visible; text-overflow: clip; }
.ell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cback, .cdots { flex: none; min-width: 40px; min-height: 40px; border: 0; background: none; color: var(--navy);
  font-size: 26px; line-height: 1; padding: 0; border-radius: var(--radius-s); }
.cdots { font-size: 22px; font-weight: 700; }
.cback:active, .cdots:active { background: var(--ivory-deep); }
.cgreet { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s3);
  margin-bottom: var(--s2); line-height: 1.5; }
.ctls { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.ctl { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0;
  text-align: left; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--s2) var(--s3); min-height: 104px; box-shadow: var(--shadow); }
.ctl.wide { grid-column: 1 / -1; min-height: 0; padding-right: 40px; }
.ctl .ctk { font-size: var(--fs-small); color: var(--muted); font-weight: 600; line-height: 1.3; }
.ctl .cv { font-size: 20px; font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ctl.wide .cv { font-size: 24px; }
.ctl .cn { font-size: 12px; color: var(--muted); }
.ctl.t-od .cv, .ctl.t-od2 .cv { color: var(--danger); }
.ctl.t-dsp .cv { color: var(--warn); }
.ctl.na .cv { color: var(--muted); font-weight: 600; }
.ctl .chev { position: absolute; right: var(--s3); top: 50%; transform: translateY(-50%); font-size: 24px; color: var(--muted); }
.ctl:active { border-color: var(--tbl-rule); }
.cmini { display: flex; align-items: flex-end; gap: 3px; height: 28px; margin-top: var(--s0); width: 100%; }
.cmini i { flex: 1; border-radius: 2px 2px 0 0; min-height: 2px; }
.b0 { background: var(--b0); } .b1 { background: var(--b1); } .b2 { background: var(--b2); }
.b3 { background: var(--b3); } .b4 { background: var(--b4); } .b5 { background: var(--b5); }
.csearch input { width: 100%; min-height: 44px; padding: var(--s1) var(--s2); border: 1px solid var(--line);
  border-radius: var(--radius-s); background: var(--paper); margin-bottom: var(--s2); }
.csum { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s0) var(--s2);
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s2) var(--s3);
  margin-bottom: var(--s2); }
.csum b { font-size: 22px; color: var(--navy); font-variant-numeric: tabular-nums; }
.csum span { font-size: var(--fs-small); color: var(--muted); }
.csum.od b, .csum.od2 b { color: var(--danger); }
.csum.dsp b { color: var(--warn); }
.cfilters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1); margin-bottom: var(--s2); }
.cfilters .lbl { font-size: 12px; color: var(--muted); }
.chip-f.on { background: var(--hi-bg); color: var(--hi-ink); border-color: var(--hi-bg); font-weight: 600; }
.twrap { overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); margin-bottom: var(--s2); }
.ctab { border-collapse: collapse; width: 100%; font-size: 13px; font-variant-numeric: tabular-nums; max-width: none; }
.ctab th { background: var(--tbl-head-bg); color: var(--navy); font-weight: 600; text-align: left; padding: var(--s1);
  border-bottom: 2px solid var(--tbl-rule); white-space: nowrap; }
.ctab td { padding: var(--s1); border-bottom: 1px solid var(--line); vertical-align: top; white-space: nowrap; }
.ctab .r { text-align: right; }
.ctab .sno { color: var(--muted); width: 1%; }
.ctab .w { white-space: normal; min-width: 160px; }
.ctab td.p { white-space: normal; min-width: 120px; max-width: 150px; }
.ctab .od { color: var(--danger); font-weight: 600; }
.ctab .soon { color: var(--soon); font-weight: 600; }
.ctab .amt { font-weight: 600; }
.ctab tr.tot td { font-weight: 700; border-top: 1px solid var(--ink); border-bottom: 3px double var(--ink); }
.ctab tr.grp td { font-weight: 700; background: var(--ivory); }
.ctab .stick { position: sticky; left: 0; background: var(--paper); z-index: 1; min-width: 150px; max-width: 52vw; white-space: normal; box-shadow: 1px 0 0 var(--line); }
.ctab th.stick { background: var(--tbl-head-bg); }
.ctab tr.grp .stick { background: var(--ivory); }
.plink { border: 0; background: none; padding: 0; text-align: left; color: var(--navy); font: inherit; font-weight: 600;
  text-decoration: none; }
/* the ledger statement is a real table across its card: .ctab is also the tab buttons' class, whose flex column
   shrank the table to its content on a wide screen (16 Oct) */
table.ctab.led { display: table; width: 100%; padding: 0; border: 0; border-radius: 0; cursor: auto; }
.csum.tone-neg b { color: var(--amt-neg); }
.csum.tone-pos b { color: var(--amt-pos); }
/* the ledger as a proper report on a wide screen (16 Oct): the whole width, larger text */
@media (min-width: 900px) { #view-party .ctab.led { font-size: 15px; } #view-party .ctab.led td, #view-party .ctab.led th { padding: 9px 14px; }
  #view-party .ctab.led .d, #view-party .ctab.led .vt { font-size: 13px; } #view-party .csum b { font-size: 26px; } }
.ctab.led .d { width: 1%; color: var(--muted); }
.ctab.led td, .ctab.led th { padding: 6px 5px; }
.ctab.led .d { font-size: 12px; }
.ctab.led .pt { white-space: normal; min-width: 110px; }
.ctab.led .vt { display: block; font-size: 11px; color: var(--muted); }
.ctab.led tr.det td { font-size: 12px; color: var(--muted); white-space: normal; border-bottom-style: dashed; }
.ctab.led tr.cnote-row td { white-space: normal; font-size: 12px; color: var(--warn); background: var(--warn-bg); }
.ctab.led tr.ob td, .ctab.led tr.ct td, .ctab.led tr.cb td { font-weight: 600; }
.ctab.led tr.ct td { border-top: 1px solid var(--ink); }
.ctab.led tr.gt td { font-weight: 700; border-top: 1px solid var(--ink); border-bottom: 3px double var(--ink); }
.cpills { display: flex; gap: var(--s1); margin-bottom: var(--s2); }
.cnote { font-size: 12px; color: var(--muted); margin: 0 2px var(--s3); line-height: 1.5; }
.cacts { display: flex; flex-direction: column; gap: var(--s1); margin-bottom: var(--s3); }
.cacts .btn, .cwide { width: 100%; min-height: 44px; }
.ctoggle { display: flex; background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 3px;
  margin-bottom: var(--s2); }
.ctoggle button { flex: 1; border: 0; background: none; border-radius: 999px; padding: var(--s1); font-size: var(--fs-small); }
.ctoggle button.on { background: var(--hi-bg); color: var(--hi-ink); font-weight: 600; }
.ckpis { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); margin-bottom: var(--s2); }
.ckpi { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s2) var(--s3); }
.ckpi .k { font-size: 12px; color: var(--muted); }
.ckpi .v { font-size: 22px; font-weight: 700; color: var(--navy); }
.ckpi .v.red { color: var(--danger); }
.cchart { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s2) var(--s2) 28px; }
.cchart .cap { font-size: 12px; color: var(--muted); margin-bottom: var(--s1); }
.cbars { display: flex; align-items: flex-end; gap: 6px; height: 170px; border-bottom: 1px solid var(--ink); }
.cbk { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.cbk .amt { font-size: 10px; color: var(--ink); white-space: nowrap; margin-bottom: 2px; }
.cbk .col { width: 100%; border-radius: 3px 3px 0 0; }
.cbk .lab { font-size: 10px; color: var(--muted); white-space: nowrap; position: relative; top: 18px; height: 0; }
.ch { font-size: 18px; color: var(--navy); margin: var(--s3) 0 var(--s1); }
.cins { display: flex; flex-direction: column; gap: var(--s1); }
.cins div { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-s); padding: var(--s2);
  font-size: 14px; line-height: 1.45; }
.cmenu-wrap { position: fixed; inset: 0; z-index: 60; background: var(--scrim); }
.cmenu { position: absolute; top: calc(var(--top-h) + 8px); right: 12px; width: min(300px, calc(100vw - 24px));
  padding: var(--s1) 0; max-height: 75vh; overflow-y: auto; }
.cmenu .mi { display: flex; align-items: center; justify-content: space-between; width: 100%; border: 0; background: none;
  text-align: left; padding: var(--s2) var(--s3); min-height: 44px; font-size: 15px; }
.cmenu .mi small { display: block; font-size: 12px; color: var(--muted); }
.cmenu .mi:active { background: var(--tbl-head-bg); }
.cmenu .ar, .opt .ar { color: var(--muted); margin-left: var(--s1); }
.cmenu .tick { color: var(--tbl-rule); font-weight: 700; }
.cmenu .mh { display: flex; align-items: center; gap: var(--s1); padding: var(--s1) var(--s3); font-weight: 600;
  background: var(--tbl-head-bg); color: var(--navy); }
.cmenu .bk2 { border: 0; background: none; font-size: 22px; line-height: 1; padding: 0 var(--s1) 0 0; color: var(--navy); }
.cmenu .mlab { font-size: 12px; color: var(--muted); padding: var(--s1) var(--s3) 0; }
.cmenu .mrow { display: flex; flex-wrap: wrap; gap: var(--s1); padding: var(--s1) var(--s3); }
.cmenu .go { display: block; margin: var(--s2) var(--s3); width: calc(100% - 2 * var(--s3)); }
.cmenu .mdates { display: flex; gap: var(--s2); padding: var(--s2) var(--s3); }
.cmenu .mdates label { flex: 1; font-size: 12px; color: var(--muted); }
.cmenu .mdates input { width: 100%; min-height: 40px; }
.lb { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin: var(--s2) 0 var(--s1); }
.rmsg { white-space: pre-wrap; background: var(--ivory); border: 1px solid var(--line); border-radius: var(--radius-s);
  padding: var(--s2); font-size: 14px; line-height: 1.5; margin-bottom: var(--s1); overflow-wrap: anywhere; }
.opt { display: flex; align-items: center; gap: var(--s1); width: 100%; text-align: left; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--radius-s); padding: var(--s2); margin-bottom: var(--s1); min-height: 52px; }
.opt > span:first-child { flex: 1; min-width: 0; }
.opt small { display: block; font-size: 12px; color: var(--muted); line-height: 1.4; }
.tag { font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px var(--s1); }
.tag.free { background: var(--ok-bg); color: var(--ok); }
.tag.pay { background: var(--warn-bg); color: var(--warn); }
.cwallet { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s1); background: var(--warn-bg);
  border: 1px solid var(--warn-line); border-radius: var(--radius-s); padding: var(--s2); font-size: 13px; margin: var(--s2) 0; }
.sel-links { display: flex; gap: var(--s3); margin-bottom: var(--s1); }
.plist { max-height: 46vh; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius-s); margin-bottom: var(--s2); }
.pk-row { display: flex; align-items: center; gap: var(--s2); padding: var(--s1) var(--s2); border-bottom: 1px solid var(--line); min-height: 48px; }
.pk-row b { flex: 1; min-width: 0; font-weight: 600; font-size: 14px; }
.ck { flex: none; width: 26px; height: 26px; border-radius: 6px; border: 2px solid var(--tbl-rule); background: var(--paper);
  color: var(--paper); font-weight: 700; padding: 0; line-height: 1; }
.ck.on { background: var(--tbl-rule); }
.tp { flex: none; border: 1px solid var(--line); border-radius: 999px; padding: 4px var(--s2); font-size: 12px; background: var(--paper); }
.tp.t-Firm { background: var(--warn-bg); color: var(--warn); }
.tp.t-Strict { background: var(--danger-bg); color: var(--danger); }
.tp.t-Legal { background: var(--danger); color: var(--paper); }
.rq-row { padding: var(--s2) 0; border-bottom: 1px solid var(--line); }
.rq-acts { display: flex; flex-wrap: wrap; gap: var(--s1); margin-top: var(--s1); }
@media (min-width: 900px) {
  .ctls { grid-template-columns: repeat(3, 1fr); }
  .ctab .stick { max-width: 320px; }
  .cacts { flex-direction: row; }
  .cacts .btn { width: auto; }
}

/* Tally's own reports (reports_tally.py): Tally's headings and rows, the first column fixed while the figures slide */
.trhead { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; margin: var(--s1) 0; }
.trhead b { font-size: 15px; color: var(--navy); }
.trhead span { font-size: var(--fs-small); color: var(--ink); }
.trread { text-align: center; margin-bottom: var(--s2); }
.trupd { color: var(--soon); font-weight: 600; }
.trwait { color: var(--muted); }
.ttab { border-collapse: collapse; width: 100%; font-size: 13px; font-variant-numeric: tabular-nums; }
.ttab th { background: var(--tbl-head-bg); color: var(--navy); font-weight: 600; text-align: left; padding: 6px var(--s1);
  white-space: nowrap; }
.ttab thead tr:last-child th { border-bottom: 1px solid var(--tbl-rule); }
.ttab tr.sub th { font-weight: 500; font-size: 12px; }
.ttab td { padding: 5px var(--s1); white-space: nowrap; vertical-align: top; border-bottom: 1px solid var(--line-soft); }
.ttab .r { text-align: right; }
.ttab .amt { font-weight: 600; }
.ttab .stick { position: sticky; left: 0; background: var(--paper); z-index: 1; min-width: 150px; max-width: 52vw;
  white-space: normal; box-shadow: 1px 0 0 var(--line); }
.ttab th.stick { background: var(--tbl-head-bg); }
.ttab .k-group, .ttab .k-top { font-weight: 700; color: var(--ink); }
.ttab .k-ledger, .ttab .k-item { font-style: italic; }
.ttab .k-detail { font-style: italic; color: var(--muted); font-size: 12px; }
.ttab.sides .rside { white-space: normal; min-width: 150px; border-left: 1px solid var(--line); }
.ttab tr.stot td { font-weight: 700; border-top: 1px solid var(--ink); }
.ttab tr.tot td { font-weight: 700; border-top: 1px solid var(--ink); border-bottom: 3px double var(--ink); }
.ttab [data-tdrill] { cursor: pointer; }
.ttab [data-tdrill]:hover { color: var(--navy); text-decoration: underline; text-decoration-color: var(--line); }
.trwarn { color: var(--warn); background: var(--warn-bg); border-color: var(--warn-line); font-size: var(--fs-small); }
.ttab th.c { text-align: center; }
.bk-list { display: grid; gap: 4px; margin: var(--s1) 0; }
.bk-row { display: flex; justify-content: space-between; align-items: center; gap: var(--s1); padding: 6px 0;
  border-bottom: 1px solid var(--line-soft); }
.bk-row span { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.bk-log { overflow-wrap: anywhere; }
.ctab tr.held td { color: var(--muted); }

/* A report drawn as Collections draws a list (renderWatchReport): each table under its own heading and three dots,
   its rows as Collections' table, and the cash line as one plain bar a day. Colours only from theme.css. */
.wtable { margin-bottom: var(--s3); }
.whead { display: flex; align-items: center; justify-content: space-between; gap: var(--s1); margin: var(--s2) 0 var(--s1); }
.whead h2 { font-size: 17px; margin: 0; color: var(--navy); }
.wtable table.data { border-collapse: collapse; width: 100%; font-size: 13px; font-variant-numeric: tabular-nums; }
.wtable table.data th { background: var(--tbl-head-bg); color: var(--navy); font-weight: 600; text-align: left;
  padding: var(--s1); border-bottom: 2px solid var(--tbl-rule); white-space: nowrap; }
.wtable table.data th.num, .wtable table.data td.num { text-align: right; }
.wtable table.data td { padding: var(--s1); border-bottom: 1px solid var(--line); vertical-align: top; }
.wtable table.data tr.tot td { font-weight: 600; border-top: 3px double var(--tbl-rule); }
.daybars { position: relative; display: flex; align-items: stretch; gap: 2px; height: 140px; padding: var(--s1);
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-sizing: border-box; }
.daybars .db { position: relative; flex: 1 1 0; min-width: 0; }
.daybars .db span { position: absolute; left: 0; right: 0; background: var(--btn); border-radius: 2px; }
.daybars .db.under span { background: var(--danger); }
.daybars .db.low span { outline: 2px solid var(--hi-bg); outline-offset: 1px; }
.daybars .dbfloor { position: absolute; left: var(--s1); right: var(--s1); border-top: 1px dashed var(--danger); pointer-events: none; }
.dbaxis { display: flex; justify-content: space-between; gap: var(--s1); font-size: 12px; color: var(--muted);
  margin: var(--s0) 0 var(--s2); }
/* Home's Stock watch line (stockwatch.home_line): the speed line's shape, the warning's colour, a tap to the report */
.stock-watch-line { color: var(--warn); border-color: var(--warn); cursor: pointer; }

/* Approvals > Looks wrong: an entry in Tally a person should look at (looks_wrong.py) */
.lw-row { padding: var(--s1) var(--s2); border-bottom: 1px solid var(--line); }
.lw-row:last-child { border-bottom: 0; }
.lw-title { font-weight: 600; }
.lw-reason { font-size: 14px; margin: 4px 0 var(--s1); }
.lw-acts { display: flex; gap: var(--s1); flex-wrap: wrap; }

/* the first run (first_run.py): two boxes, then the one-time code in large figures */
.welcome-l { display: block; text-align: left; margin: 10px 0; font-size: 14px; }
.welcome-in { margin-top: 6px; letter-spacing: 0; text-align: left; font-size: 16px; }
.welcome-code { font-size: 40px; font-weight: 700; letter-spacing: .3em; margin: 8px 0 12px; }

/* every error toast says where to report it; the report's own sheet */
.toast .toast-report { display: block; margin-top: 4px; font-size: 12px; opacity: .85; }
.problem-path { font-family: var(--sans); font-size: 13px; word-break: break-all; background: var(--ivory);
  padding: 6px 8px; border-radius: 6px; }

/* ---- Home, rebuilt (13 Oct, Docs/home-mock.html): Items | Party, the tip of the day, the period line, and the
   card parts it added - a figure with its line beside it, tool chips, a returns table, an amber line */
.home-two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.home-btn { display: flex; flex-direction: column; align-items: center; gap: var(--s1); padding: var(--s2);
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
  color: var(--navy); font: 600 15px var(--sans); cursor: pointer; min-height: 44px; }
.home-btn:hover { border-color: var(--navy); }
.home-btn svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.know { position: relative; display: flex; align-items: center; gap: var(--s2); margin-top: var(--s2);
  padding: var(--s2) var(--s3); background: var(--tbl-head-bg); border-radius: var(--radius); cursor: pointer; }
.know[hidden] { display: none; }
.know-ic { width: 34px; height: 34px; border-radius: 50%; background: var(--bar); color: var(--bar-ink);
  display: grid; place-items: center; font-weight: 700; flex: none; }
.know-t { min-width: 0; font-size: var(--fs-small); color: var(--muted); }
.know-t b { display: block; color: var(--ink); font-size: 14px; }
.know-ch { margin-left: auto; color: var(--navy); font-size: 22px; }
.know-x { position: absolute; top: -8px; right: -8px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--paper); border: 1px solid var(--line); color: var(--muted); font-size: 14px; line-height: 1;
  display: grid; place-items: center; cursor: pointer; padding: 0; }
.period { display: flex; align-items: center; justify-content: space-between; margin-top: var(--s2);
  font-weight: 600; font-size: 14px; }
.period[hidden] { display: none; }
.period-ar { background: none; border: 0; color: var(--navy); font-size: 22px; min-width: 44px; min-height: 44px;
  cursor: pointer; }
.period-ar:disabled { color: var(--faint); cursor: default; }
#view-home .dash { margin-top: var(--s1); }
.dcard .v-row { display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap; }
.dcard .v-row .beside { margin: 0; }
.chips-row { display: flex; flex-wrap: wrap; gap: var(--s1); margin-top: var(--s1); }
.tool-chip { font: 600 13px var(--sans); color: var(--navy); background: var(--ivory); border: 0;
  border-radius: 999px; padding: 8px 12px; min-height: 36px; cursor: pointer; }
.tool-chip:hover { background: var(--ivory-deep); }
.dcard .amber-line { color: var(--warn); font-weight: 600; margin-top: var(--s1); }
.lines-mini li b { font-weight: 600; }

/* ---- Home's lists: Items and Party (13 Oct, Docs/home-mock.html) - a search box, how to show them, one row each
   (name and its small line on the left, the figure and its word on the right), group headers, a double-ruled foot */
.lhead { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.lsearch { width: 100%; box-sizing: border-box; margin: var(--s2) 0 var(--s1); padding: 10px 12px; font: 500 15px var(--sans);
  color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-s); min-height: 44px; }
.lseg { margin-bottom: var(--s1); }
.lseg .chip-f { min-height: 36px; }
.lcap { display: flex; justify-content: space-between; padding: var(--s0) var(--s2); font-size: 12px; font-weight: 600;
  color: var(--faint); }
.llist { padding: 0; overflow: hidden; }
.lrow { display: flex; align-items: flex-start; gap: var(--s2); width: 100%; box-sizing: border-box; padding: 12px var(--s2);
  background: none; border: 0; border-bottom: 1px solid var(--line-soft); text-align: left; cursor: pointer;
  font: inherit; color: inherit; }
.lrow:hover { background: var(--paper-soft); }
.lname { min-width: 0; flex: 1; }
.lname b { display: block; font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.lname small, .lfig small { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.lfig { margin-left: auto; text-align: right; white-space: nowrap; }
.lfig b { display: block; font-size: 15px; font-variant-numeric: tabular-nums; }
.lrow.dim .lname b, .lrow.dim .lfig b { color: var(--faint); }
/* a report row whose own figure has gone below nought (Item movement's running balance): the whole row red */
table.data tr.row-neg td, table.data tr.row-neg td a { color: var(--amt-neg); }
/* Items (16 Oct): the name, then three right-aligned columns - Quantity, Avg rate, Amount - under headings */
.icap, .irow { display: grid; grid-template-columns: minmax(0, 1fr) 58px 54px 76px; column-gap: 6px; }
.irow .lfig b { font-size: 13px; }
.irow .lname b { font-size: 14px; overflow-wrap: break-word; }
.icap > span:not(:first-child) { text-align: right; }
.irow .lfig { text-align: right; min-width: 0; }
.irow .lfig b { white-space: nowrap; font-variant-numeric: tabular-nums; }
.irow .lname small.tone-neg { color: var(--amt-neg); }
.irow.igrp .lname b { color: var(--navy); }
.lpath { font-size: 13px; margin: 0 0 var(--s1); color: var(--muted); }
.lacts { display: inline-flex; gap: 6px; align-items: center; }
.plus-new { font-size: 18px; line-height: 1; min-width: 40px; font-weight: 700; }
.gpick-list { max-height: 60vh; overflow: auto; margin-top: var(--s1); }
.gpick-row { display: block; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line-soft);
  padding: 10px 12px; font: inherit; color: var(--ink); cursor: pointer; min-height: 40px; }
.gpick-row:hover { background: var(--paper-soft); }
.nm-form { display: grid; gap: 8px; }
.nm-f { display: grid; gap: 2px; font-size: 13px; color: var(--muted); }
.nm-f input, .nm-f select { font: inherit; font-size: 15px; padding: 8px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--paper); color: var(--ink); width: 100%; box-sizing: border-box; }
.nm-lines { font-size: 13px; display: grid; gap: 2px; margin: 4px 0; }
.nm-warn { font-size: 13px; color: var(--warn); background: var(--warn-bg); padding: 6px 8px;
  border-radius: 6px; margin: 4px 0; }
.lpath .btn.link { padding: 0; font-size: 13px; }
@media (min-width: 700px) { .icap, .irow { grid-template-columns: minmax(0, 1fr) 110px 100px 120px; column-gap: 8px; }
  .irow .lfig b { font-size: 15px; } }
.lgrp { padding: var(--s1) var(--s2) var(--s0); font-size: 12px; font-weight: 700; color: var(--faint);
  background: var(--paper-soft); }
.ltot { display: flex; justify-content: space-between; padding: 12px var(--s2); font-weight: 700;
  border-top: 1px solid var(--ink); border-bottom: 3px double var(--ink); background: var(--paper-soft); }
.lmore, .lempty { padding: var(--s2); margin: 0; font-size: var(--fs-small); }
.lfig .amber { color: var(--warn); }
.lfig .red { color: var(--danger); }

/* Collections: under a bill's date, where its due date comes from in two words ("30 days" / "usual") */
td small.term { display: block; color: var(--muted); font-size: 11px; font-weight: 500; }

/* the update line (updater.py): Home and Settings > About, the owner's only */
.update-line { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 12px; margin: 8px 0;
  background: var(--hi-bg); border-radius: 12px; }
.update-line span, .update-about span { font-weight: 600; margin-right: 4px; }
.update-about { margin: 8px 0; }

/* Settings > Names (Name memory) */
.name-row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.name-row.gone b { text-decoration: line-through; }
.name-acts { display: flex; gap: 4px; align-items: flex-start; flex-shrink: 0; }

/* Paper memory: a line read off a bill that differs from the last bill or the item master */
.line-match.amber { color: var(--warn); font-weight: 600; }

/* Settings > Items and recipes */
.name-row.recipe { display: block; }
table.mini { width: 100%; border-collapse: collapse; margin-top: 6px; font-size: 13px; }
table.mini td { padding: 3px 6px 3px 0; border-top: 1px solid var(--line); }
table.mini td.num { text-align: right; white-space: nowrap; }
.name-row select { max-width: 46%; }

/* A different company open in Tally under this one's identity: Plug has paused (companies.check_pairing) */
.paused-banner { position: sticky; top: var(--top-h); z-index: 6; margin: 0; padding: var(--s2) var(--s3);
  background: var(--danger-bg); color: var(--danger); border-bottom: 1px solid var(--danger-line); }
.paused-card { border-left: 4px solid var(--danger); }

/* phones outside the office (relay_office.py) */
.relay-box { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 12px; }
.relay-box h5 { margin: 12px 0 4px; font-size: 13px; }
.relay-alert-line { color: var(--warn); font-weight: 600; }
.banner.relay-alert p { margin: 0 0 4px; }

/* the invoice designer (invoice_layout.py) */
.inv-designer { margin-top: 20px; border-top: 1px solid var(--line); padding-top: 12px; }
.inv-designer h5 { margin: 12px 0 4px; font-size: 13px; }
.dz-kinds { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.dz-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .dz-grid { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); } }
.dz-form input, .dz-form select, .dz-form textarea { width: 100%; box-sizing: border-box; }
.dz-form [data-dz-line] { margin-bottom: 4px; }
.dz-col { display: flex; align-items: center; gap: 4px; }
.dz-col label { flex: 1; }
.dz-accents { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.dz-swatch { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line); cursor: pointer; padding: 0; }
.dz-swatch.on { outline: 3px solid var(--hi-bg); outline-offset: 1px; }
.dz-preview iframe { width: 100%; height: 78vh; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }

.ad-days { width: 5em; display: inline-block; }

/* ---- Home's period tiles (trade.py): the chip and Gross / Net under the title, the period under the figure */
.tile-ctl { display: flex; gap: var(--s1); margin: var(--s1) 0 var(--s0); flex-wrap: wrap; }
.pchip, .mtog { font: inherit; font-size: 12px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--paper-soft); color: var(--navy); cursor: pointer; min-height: 28px; }
.pchip:focus-visible, .mtog:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.period-under { font-size: 12px; }
.pchip-list { display: grid; gap: var(--s1); margin-bottom: var(--s2); }
.pick-row { display: flex; justify-content: space-between; align-items: center; text-align: left; gap: var(--s2); }
.pick-row.on { background: var(--hi-bg); color: var(--hi-ink); }
.pick-row small { color: var(--muted); }
.pick-row.on small { color: var(--hi-ink); }
.up { color: var(--up); } .down { color: var(--down); } .flat { color: var(--flat); }
/* a Sales / Purchases tile's months: coloured against the same dates last year, each with its mark */
.chart.vs .bar.up { background: var(--up); } .chart.vs .bar.down { background: var(--down); }
.chart.vs .bar.flat { background: var(--flat); }
.chart.vs em.pm { font-size: 9px; line-height: 11px; }
/* ---- the top of a tile's detail screen */
.ttop { padding: var(--s3); margin: var(--s2) 0 var(--s3); min-width: 0; }
.ttop-v { font-family: var(--serif); font-size: 28px; line-height: 1.15; overflow-wrap: anywhere; }
.tboxes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); margin: var(--s3) 0 var(--s2); }
.tbox { border: 1px solid var(--line); border-radius: var(--radius-s); padding: var(--s2); background: var(--paper-soft); min-width: 0; }
.tbox span { display: block; font-size: 12px; color: var(--muted); }
.tbox b { display: block; font-size: 15px; overflow-wrap: anywhere; }
.tline { font-weight: 600; margin: var(--s1) 0 var(--s3); }
.tnote { font-size: 12px; color: var(--muted); margin: var(--s1) 0 0; line-height: 1.4; }
.tby { display: flex; align-items: center; gap: var(--s1); margin: var(--s2) 0; flex-wrap: wrap; }
.tby .ctab { flex-direction: row; flex: 0 0 auto; width: auto; padding: 4px 12px; font-size: 13px; }
.tgroup td.num, .tgroup th.num { text-align: right; white-space: nowrap; }
.tchart { border: 1px solid var(--line); border-radius: var(--radius-s); padding: var(--s2) var(--s2) var(--s3);
  background: var(--paper); margin: 0 0 var(--s3); min-width: 0; max-width: 640px; }
.tchart > .t { font-weight: 600; margin-bottom: var(--s2); }
.tsvg { width: 100%; height: auto; display: block; overflow: visible; }
.tsvg .grid { stroke: var(--line-soft); stroke-width: 1; }
.tsvg .tick { font-size: 9px; fill: var(--muted); }
.tsvg .ax-title { font-size: 9px; fill: var(--muted); }
.tsvg .ln { fill: none; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.tsvg .ln.now { stroke: var(--navy); } .tsvg .ln.then { stroke: var(--last-year); stroke-width: 3; }
.tsvg .ln.count { stroke: var(--brass); stroke-width: 2; }
.tsvg .cdot { fill: var(--brass); } .tsvg .ndot { fill: var(--navy); }
.tsvg .vbar { fill: var(--navy-soft); }
.tsvg .end { font-size: 10px; font-weight: 600; } .tsvg .end.now { fill: var(--navy); } .tsvg .end.then { fill: var(--muted); }
/* month by month against last year: two bars a month, last year light grey beside this year */
.tlegend { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); font-size: 11px; color: var(--muted); margin: var(--s2) 0; }
.tlegend span { display: inline-flex; align-items: center; gap: 4px; }
.vbar-key, .count-key, .line-key { display: inline-block; width: 12px; height: 10px; border-radius: 2px; }
.vbar-key { background: var(--navy-soft); } .count-key { height: 3px; background: var(--brass); }
.line-key { height: 3px; } .line-key.now { background: var(--navy); } .line-key.then { background: var(--last-year); }
.tlist { list-style: none; padding: 0; margin: var(--s2) 0 0; font-size: 12px; display: grid; gap: 2px; }
.tlist li { display: grid; grid-template-columns: minmax(4.5em, auto) 1fr auto auto; gap: var(--s2); align-items: baseline; }
.tlist b { text-align: right; font-weight: 600; }
.chg { font-size: 12px; }
p.chg { font-size: 13px; font-weight: 600; margin: var(--s2) 0 0; }
.ax-cap { font-size: 11px; color: var(--muted); margin: 0 0 var(--s1); text-align: right; }
/* a share: the donut with the total in it, each slice named with its % */
.donut-wrap { display: grid; grid-template-columns: minmax(120px, 160px) 1fr; gap: var(--s3); align-items: center; }
.donut { width: 100%; height: auto; transform: rotate(-90deg); }
.donut text { transform: rotate(90deg); transform-origin: 80px 80px; }
.donut .seg { fill: none; stroke-width: 22; }
.donut .d-total { font-size: 15px; font-weight: 600; fill: var(--ink); } .donut .d-sub { font-size: 10px; fill: var(--muted); }
.dlegend { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; font-size: 12px; min-width: 0; }
.dlegend li { display: grid; grid-template-columns: 10px 1fr auto; gap: 2px var(--s1); align-items: center; }
.dlegend i { width: 10px; height: 10px; border-radius: 2px; }
.dlegend .dn { overflow-wrap: anywhere; min-width: 0; }
.dlegend .muted { grid-column: 2 / -1; font-size: 11px; }
.dk0 { stroke: var(--sh0); background: var(--sh0); } .dk1 { stroke: var(--sh1); background: var(--sh1); }
.dk2 { stroke: var(--sh2); background: var(--sh2); } .dk3 { stroke: var(--sh3); background: var(--sh3); }
.dk4 { stroke: var(--sh4); background: var(--sh4); } .dk5 { stroke: var(--sh5); background: var(--sh5); }
.dkx { stroke: var(--shx); background: var(--shx); }
@media (max-width: 420px) { .donut-wrap { grid-template-columns: 1fr; } .donut { max-width: 180px; margin: 0 auto; } }
/* top parties and the year-end estimate: horizontal bars */
.hb { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s2); font-size: 13px; }
.hb li { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--s2); }
.hb-n { grid-column: 1 / -1; overflow-wrap: anywhere; }
.hb-bar { display: block; height: 8px; background: var(--ivory); border-radius: 4px; overflow: hidden; align-self: center; }
.hb-bar i { display: block; height: 100%; background: var(--navy-soft); }
.hb-bar i.last { background: var(--last-year); }
.hb b { font-weight: 600; }
.hb .chg { grid-column: 1 / -1; }
.rate { display: grid; gap: var(--s2); margin: var(--s1) 0 var(--s3); }
.rate span { display: block; font-size: 12px; }
.rate b { font-size: 17px; }
.rate-pick { display: flex; gap: var(--s2); align-items: center; font-size: 13px; margin-bottom: var(--s2); }
.rate-pick select { flex: 1; min-width: 0; max-width: 100%; }
.agebar.shades .g0, .legend .g0 { background: var(--age0); } .agebar.shades .g1, .legend .g1 { background: var(--age1); }
.agebar.shades .g2, .legend .g2 { background: var(--age2); } .agebar.shades .g3, .legend .g3 { background: var(--age3); }
/* month by month, drawn as one SVG with its axis */
.tsvg .axis0 { stroke: var(--line); stroke-width: 1; }
.tsvg rect.last { fill: var(--last-year); } .tsvg rect.now.up { fill: var(--up); } .tsvg rect.now.down { fill: var(--down); }
.tsvg rect.now.flat { fill: var(--flat); }
.tsvg .pm { font-size: 10px; fill: var(--flat); } .tsvg .pm.up { fill: var(--up); } .tsvg .pm.down { fill: var(--down); }
.tsvg .sofar { font-size: 8px; }
.tlegend .key { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.tlegend .key.last { background: var(--last-year); } .tlegend .key.up { background: var(--up); }
.tlegend .key.down { background: var(--down); } .tlegend .key.flat { background: var(--flat); }
.rate-line { font-size: 13px; margin: var(--s1) 0 0; }

/* ---- ONE COLOUR RULE (tones.py; theme.css --amt-* and --vt-*): a figure's tone and a voucher's tag, every screen */
.tone-pos, td.tone-pos, b.tone-pos, span.tone-pos { color: var(--amt-pos); }
.tone-neg, td.tone-neg, b.tone-neg, span.tone-neg { color: var(--amt-neg); }
.dcard .v.tone-pos { color: var(--amt-pos); } .dcard .v.tone-neg { color: var(--amt-neg); }
.vtag { display: inline-block; font-size: 11px; line-height: 16px; padding: 0 6px; border-radius: 4px; font-weight: 600;
  white-space: nowrap; font-style: normal; vertical-align: baseline; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.vtag.vt-rc, .vt .vtag.vt-rc { color: var(--vt-rc-ink); background: var(--vt-rc-bg); } .vtag.vt-py, .vt .vtag.vt-py { color: var(--vt-py-ink); background: var(--vt-py-bg); }
.vtag.vt-sl, .vt .vtag.vt-sl { color: var(--vt-sl-ink); background: var(--vt-sl-bg); } .vtag.vt-pu, .vt .vtag.vt-pu { color: var(--vt-pu-ink); background: var(--vt-pu-bg); }
.vtag.vt-cn, .vt .vtag.vt-cn { color: var(--vt-cn-ink); background: var(--vt-cn-bg); } .vtag.vt-dn, .vt .vtag.vt-dn { color: var(--vt-dn-ink); background: var(--vt-dn-bg); }
.vtag.vt-ct, .vt .vtag.vt-ct { color: var(--vt-ct-ink); background: var(--vt-ct-bg); } .vtag.vt-jr, .vt .vtag.vt-jr { color: var(--vt-jr-ink); background: var(--vt-jr-bg); }
.vtag.vt-sj, .vt .vtag.vt-sj { color: var(--vt-sj-ink); background: var(--vt-sj-bg); } .vtag.vt-ot, .vt .vtag.vt-ot { color: var(--vt-ot-ink); background: var(--vt-ot-bg); }
/* the cash card: an account a row, an OD / CC account's limit and what is available under it */
.mini.accts li { flex-wrap: wrap; }
.mini.accts .od-line { flex-basis: 100%; font-size: 12px; color: var(--muted); }
/* a heading with a bracket: the bracket part a second, smaller line when the heading will not fit on one */
.dcard > .t .t-br { white-space: nowrap; }
.dcard > .t.wrapped .t-br { display: block; font-size: 13px; color: var(--muted); font-weight: 500; }

/* ---------------------------------------------------------------- Utilities (utilities.py, 15 Oct)
   The Utilities screen's sections, and the three blocks a utility screen adds to a report: the facts at the
   top, a chip row per choice, and the rings. Every colour is a theme variable - nothing here names one. */
/* the Utilities list (16 Oct): one column, a plain label per group, a row per tool - never boxes or two across */
.ulist-all { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  max-width: 720px; }
.usec { margin: 0; }
.ugroup { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; color: var(--muted); padding: 14px 16px 4px; }
.urow { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 8px; width: 100%;
  text-align: left; background: none; border: 0; border-top: 1px solid var(--line); padding: 10px 16px; cursor: pointer;
  font: inherit; color: inherit; min-height: 44px; }
.usec .ugroup + .urow { border-top: 0; }
.urow:hover, .urow:focus-visible { background: var(--ivory); }
.urow b { grid-column: 1; color: var(--navy); font-weight: 600; font-size: 0.95rem; }
.urow span { grid-column: 1; color: var(--muted); font-size: 0.8rem; line-height: 1.3; }
.urow i { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-style: normal; color: var(--muted); }
/* a Home line that must stay one line on a phone: it is cut with "..." rather than wrapped */
.dcard .one-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* the facts at the top: a label over its figure, as many across as fit */
.ufacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin: 12px 0; }
.ufact { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.ufact > span { display: block; color: var(--muted); font-size: 0.78rem; line-height: 1.3; }
.ufact > b { display: block; margin-top: 2px; font-size: 1.15rem; color: var(--navy); }

/* a chip row per choice. The label sits with its chips and wraps with them, so a long row never runs off a phone. */
.uchips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0; }
.uchips .ulabel { font-size: 0.8rem; margin-right: 2px; }
.uchips .small { font-size: 0.75rem; }
.udate { border: 1px solid var(--line); border-radius: 999px; padding: 5px 10px; background: var(--paper);
  color: var(--ink); font: inherit; font-size: 0.85rem; }

/* the rings: the ring, then its own legend. One per row on a phone, side by side once there is room. */
.udonuts { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 12px 0; }
.udonut { display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 12px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 12px; }
.udonut svg { width: 108px; height: 108px; flex: 0 0 auto; }
.udonut .arc { fill: none; stroke-width: 24; }
.udonut figcaption { min-width: 0; flex: 1 1 auto; }
.udonut figcaption > b { display: block; font-size: 0.95rem; }
.udonut figcaption > .muted { display: block; font-size: 0.8rem; margin-bottom: 4px; }
/* ONE column, not the two the ageing legend uses: a party's name is long, and in two columns the share beside
   it is pushed off the row. The NAME is the part that may be cut, never the share or the money. */
.udonut .legend { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 2px; }
.udonut .legend li { display: flex; align-items: baseline; gap: 6px; font-size: 0.8rem; padding: 1px 0;
  min-width: 0; }
.udonut .legend li > i { width: 9px; height: 9px; border-radius: 2px; flex: 0 0 auto;
  align-self: center; }
/* the name wraps onto a second line rather than being cut: at 390 px every name in the ring was ellipsised, and
   two branches of one firm ("Navrang Beej Bhandar - Tarsoda", "Navrang Krishi Kendra - Sonpura") came out as the
   same few words, so the legend could not say which slice was which */
.udonut .legend li { align-items: flex-start; }
.udonut .legend li > i { margin-top: 5px; }
.udonut .legend li > .lb { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; line-height: 1.35; }
.udonut .legend li > b { flex: 0 0 auto; font-weight: 600; align-self: baseline; }
.udonut .legend li > em { flex: 0 0 auto; font-style: normal; color: var(--muted); font-size: 0.74rem; align-self: baseline; }
.arc.s0, .legend li > i.s0 { stroke: var(--sh0); background: var(--sh0); }
.arc.s1, .legend li > i.s1 { stroke: var(--sh1); background: var(--sh1); }
.arc.s2, .legend li > i.s2 { stroke: var(--sh2); background: var(--sh2); }
.arc.s3, .legend li > i.s3 { stroke: var(--sh3); background: var(--sh3); }
.arc.s4, .legend li > i.s4 { stroke: var(--sh4); background: var(--sh4); }
.arc.s5, .legend li > i.s5 { stroke: var(--sh5); background: var(--sh5); }
.arc.sx, .legend li > i.sx { stroke: var(--shx); background: var(--shx); }

/* Call and WhatsApp in a report row: compact, side by side, and never the reason a phone has to scroll the
   table sideways to reach the one button the screen is for. */
.data td .btn.sm { padding: 4px 8px; font-size: 0.78rem; white-space: nowrap; }
.data td .btn.sm + .btn.sm { margin-left: 4px; }

@media (min-width: 760px) {
  .udonuts { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
}

/* The bank statement's push stage: Approve marks a row, Push is the one place money reaches Tally. Colours all
   come from theme.css - nothing here names one. */
.bstaged { color: var(--ok); font-weight: 600; font-size: 0.92em; }
.bscan { margin: 0 0 var(--s1); color: var(--warn); font-size: 0.92em; }
.bpush { display: flex; flex-wrap: wrap; gap: var(--s1); align-items: center; justify-content: space-between;
  margin-top: var(--s2); padding-top: var(--s2); border-top: 1px solid var(--line); }
.bpush-err { display: flex; flex-wrap: wrap; gap: var(--s1); align-items: center; padding: var(--s0) 0 0 36px;
  color: var(--warn); font-size: 0.92em; }
.prow.bpart { padding-left: var(--s2); }
.prow.bpart .pname::before { content: "↳ "; color: var(--muted); }
.bsplit-row { display: flex; gap: var(--s1); margin-bottom: var(--s1); }
.bsplit-row input:first-child { flex: 2 1 0; }
.bsplit-row input:last-child { flex: 1 1 0; }

/* Photos of a statement: the pages in the order they will be read, each one movable or taken again. */
.bphotos { display: flex; flex-wrap: wrap; gap: var(--s1); align-items: center; margin-top: var(--s2); }
label.btn { cursor: pointer; }
.bpagelist { margin: var(--s1) 0; }
.bpage { display: flex; flex-wrap: wrap; gap: var(--s1); align-items: center; padding: var(--s0) 0;
  border-bottom: 1px solid var(--line); }
.bpage-n { font-weight: 600; min-width: 4.5em; }
.bpage-name { flex: 1 1 8em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.slip-pick { display: inline-flex; margin: var(--s1) 0 0; text-align: left; }

/* Auto-reminders: one rule per customer group, and today's list ready to send. */
.arule { padding: var(--s1) 0; border-bottom: 1px solid var(--line); }
.arule label { display: block; margin-bottom: var(--s0); }
.amsg { white-space: pre-wrap; font: inherit; margin: 0; }

/* Utilities > Documents (documents.py, papers.py): the paper beside what was read off it, and the papers Plug
   writes. The paper is shown WITH the draft on purpose - a line read off a photo is for a person to check, and
   checking means reading one against the other. */
.dsaid { margin: 0 0 var(--s1); font-weight: 600; }
.dsplit { display: flex; gap: var(--s3); align-items: flex-start; flex-wrap: wrap; margin-top: var(--s2); }
.dpaper { flex: 1 1 240px; max-width: 320px; }
.dpaper img { width: 100%; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); }
.dside { flex: 2 1 280px; min-width: 240px; }
.dlines { display: flex; flex-direction: column; gap: var(--s2); }
.dline { padding-bottom: var(--s2); border-bottom: 1px solid var(--line-soft); }
.dline:last-child { border-bottom: 0; padding-bottom: 0; }
.dline-1 { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.dline-2 { font-size: 13px; }
.dline-acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
/* a stock item's own name is as long as it is: the button carrying it wraps rather than pushing the page sideways */
.dline-acts .btn { white-space: normal; text-align: left; max-width: 100%; overflow-wrap: anywhere; }
.plines { display: flex; flex-direction: column; gap: var(--s2); }
.pline { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.pline input { flex: 1 1 110px; min-width: 0; }
.pline input[name="item"] { flex: 2 1 160px; }
@media (max-width: 480px) { .dpaper { max-width: 100%; } }

/* The Sales and Purchase registers (16 Oct, renderRegister): the period, Share, Download and Print top right; the big
   figure with its Gross / Net switch; View by and its table; one chart card. Colours only from theme.css. */
.rg-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s1); }
.rg-head .page-title { margin: 0; }
.rg-acts { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.rg-total { display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s2); }
.rg-v { font-family: var(--serif); font-size: 30px; line-height: 1.15; overflow-wrap: anywhere; }
.rg-viewby { margin: var(--s2) 0 var(--s1); }
.rg-wrap { margin-bottom: var(--s3); }
.rg-table { width: 100%; }
.rg-table td.rg-name { white-space: normal; overflow-wrap: anywhere; }
.rg-table td.lv1 { padding-left: 22px; } .rg-table td.lv2 { padding-left: 36px; }
.rg-table td.lv3 { padding-left: 50px; } .rg-table td.lv4 { padding-left: 64px; }
.rg-table td.lv0 { font-weight: 600; }
.rg-row { cursor: pointer; }
.rg-row:hover td, .rg-row:focus td { background: var(--hi-bg); color: var(--hi-ink); }
.rg-table tfoot td { font-weight: 700; border-top: 1px solid var(--ink); border-bottom: 3px double var(--ink); }
.rg-chart { padding: var(--s3); margin-bottom: var(--s3); min-width: 0; }
.rg-ch-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s1); margin-bottom: var(--s1); }
.rg-chart .tsvg { max-width: 560px; margin: 0 auto; }
.rg-chart .hitbox { fill: transparent; cursor: pointer; }
.rg-chart .hit.on .hitbox { fill: var(--hi-bg); opacity: .35; }
.rg-legend { margin: var(--s1) 0 0; }
.rg-tip { min-height: 1.3em; margin: var(--s1) 0 0; font-size: 13px; }
.tlegend .key.bar { background: var(--navy-soft); } .tlegend .key.count { background: var(--brass); }
@media (min-width: 900px) { .rg-v { font-size: 36px; } }

/* Settings > Sales & purchase heads */
.heads-list { margin: var(--s2) 0 var(--s3); }
.heads-list h3 { font-size: 14px; margin: 0 0 var(--s1); }
.heads-ul { list-style: none; padding: 0; margin: 0 0 var(--s1); }
.heads-ul li { display: flex; justify-content: space-between; align-items: center; gap: var(--s1); padding: 6px 0;
  border-bottom: 1px solid var(--line-soft); }
.heads-ul li span { display: grid; min-width: 0; } .heads-ul li small { font-size: 12px; }
.heads-add { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.heads-add input { font: inherit; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; min-width: 0;
  flex: 1 1 160px; background: var(--paper); color: var(--ink); }

/* Settings, tidied (17 Oct): the section list and one section's page; on the desktop side by side */
.set-search { margin-bottom: var(--s2); }
.set-results { display: grid; gap: 4px; margin-bottom: var(--s2); }
.set-hit-row { display: grid; text-align: left; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--paper); color: var(--ink); font: inherit; cursor: pointer; min-height: 44px; }
.set-nav { display: grid; padding: 4px 0; align-self: start; }
.set-item { display: flex; justify-content: space-between; align-items: center; gap: var(--s1); text-align: left; padding: 12px 16px;
  border: 0; border-bottom: 1px solid var(--line-soft); background: none; color: var(--ink); font: inherit; cursor: pointer; min-height: 44px; }
.set-item:last-child { border-bottom: 0; }
.set-item.on { background: var(--hi-bg); color: var(--hi-ink); font-weight: 600; }
.set-item .ar { color: var(--muted); }
.set-pane { min-width: 0; }
.set-title { margin: 0 0 var(--s2); }
.set-off { display: none !important; }
.set-adv { margin: 0 0 var(--s3); }
.set-adv > summary { cursor: pointer; font-weight: 600; padding: var(--s1) 0; color: var(--muted); }
.set-hit { outline: 2px solid var(--focus); outline-offset: 2px; }
#view-settings.set-list .set-pane { display: none; }
#view-settings.set-open .set-nav { display: none; }
#view-settings .set-back { display: inline-block; margin-bottom: var(--s1); }
@media (min-width: 900px) {
  .set-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--s3); align-items: start; }
  #view-settings.set-open .set-nav { display: grid; }
  #view-settings .set-back { display: none; }
}
@media (min-width: 900px) { .set-title { display: none; } .set-nav { position: sticky; top: 8px; } }

/* The Today tile at the top of Home (17 Oct, today_tile.py) */
.today-tile { padding: var(--s2) var(--s3); margin-bottom: var(--s2); }
.today-h { margin: 0 0 var(--s1); font-size: 20px; }
.today-lines { display: grid; }
.today-line { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--s2); align-items: center; text-align: left;
  padding: 10px 0; border: 0; border-bottom: 1px solid var(--line-soft); background: none; color: var(--ink); font: inherit;
  cursor: pointer; min-height: 44px; }
.today-line:last-child { border-bottom: 0; }
.today-line:hover .tl-label, .today-line:focus .tl-label { text-decoration: underline; }
.tl-label { font-weight: 600; overflow-wrap: anywhere; }
.tl-value { color: var(--muted); font-size: 14px; text-align: right; overflow-wrap: anywhere; max-width: 55vw; }
.today-line .ar { color: var(--muted); }
.today-none { margin: 0; }
@media (min-width: 900px) { .today-lines { grid-template-columns: 1fr 1fr; column-gap: var(--s4, 32px); } .tl-value { max-width: none; } }
.set-adv:not([open]) > :not(summary) { display: none; }   /* a card's own display would otherwise show it */

/* Home's Stock tile (17 Oct): as dense as the Sales tile - the figure, the godowns and the three counts close
   together, each a row with its name left and its figure right in one column, ONE thin divider (between the godowns
   and the counts), no button height on the count rows, and the card as tall as what is on it ("Open report" right
   under the last line, never stretched to the row beside it). The bars are the Sales tile's own (.chart.vs). */
.dcard.k-stock { align-self: start; }
.k-stock .mini { margin-top: var(--s1); }
.k-stock .mini li { border-top: 0; padding: 2px 0; align-items: baseline; }
.k-stock .mini li b { font-variant-numeric: tabular-nums; text-align: right; }
.k-stock .stock-counts { border-top: 1px solid var(--line); padding-top: var(--s0); margin-top: var(--s1); }
.k-stock .stock-counts li { padding: 0; }
.k-stock .count-open { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2); width: 100%;
  min-height: 0; padding: 2px 0; font: inherit; font-size: var(--fs-small); color: var(--ink); text-decoration: none; }
.k-stock .godown-open { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2); width: 100%;
  min-height: 0; padding: 0; font: inherit; color: var(--ink); text-decoration: none; text-align: left; }
.k-stock .count-open b { font-weight: 600; font-variant-numeric: tabular-nums; }
.k-stock .count-open.alert b { color: var(--amt-neg); }
.k-stock .chart { margin-top: var(--s1); }
/* stock above the same month-end last year is the theme's blue (the request: blue higher, red lower, grey level) */
.k-stock .chart.vs .bar.up { background: var(--btn); }
.k-stock .go { margin-top: var(--s1); }

/* ---- Home: every tile as tidy as the Stock tile (18 Oct). A tile is as tall as what is in it; rows are name left,
   figure right in one column, small even gaps, no rule between rows; "Open report" right under the last line. */
#dash > .dcard { align-self: start; }
.dcard .mini li { border-top: 0; padding: 2px 0; align-items: baseline; }
.dcard .mini li b { text-align: right; font-variant-numeric: tabular-nums; }
.dcard .go { margin-top: var(--s1); }
/* Receivables / Payables: one age bucket a row, so the figures never run past the tile's right edge */
.dcard .legend { grid-template-columns: 1fr; gap: 0; font-size: var(--fs-small); }
.dcard .legend li { padding: 2px 0; }
.dcard .legend li span { flex: 1 1 auto; min-width: 0; }
.dcard .legend b { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Cash and Bank: an account a row, each opening its own statement; the limit in a small line under it */
.mini.accts li { display: block; }
.k-cash .acct-open { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2); width: 100%;
  min-height: 0; padding: 0; font: inherit; font-size: var(--fs-small); color: var(--ink); text-decoration: none; text-align: left; }
.k-cash .acct-open .an { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-cash .acct-open b { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.k-cash .acct-open .aw { font-style: normal; font-weight: 400; color: var(--muted); font-size: 12px; }
.k-cash .od-line { display: block; padding-left: var(--s2); font-size: 12px; color: var(--muted); }
.k-cash .od-line.tone-neg { color: var(--amt-neg); }
/* One account's statement (account_ledger.py) */
.acc-kinds { margin: var(--s2) 0; }
.acc-table .acc-p small { display: block; white-space: normal; }
.acc-table .acc-closing td { border-top: 2px solid var(--line); }
.acc-table .acc-total td { border-top: 1px solid var(--line); }
.acc-table .c-meta .nw { white-space: nowrap; }
.acc-table td:first-child, .acc-table th:first-child { padding-left: 8px; }
/* a statement row tinted by its voucher type (19 Oct) - the tags' own colours, the type still written beside it */
tr.vtr-rc > td, .ttab tr.vtr-rc > td.stick { background: var(--vt-rc-bg); } tr.vtr-py > td, .ttab tr.vtr-py > td.stick { background: var(--vt-py-bg); }
tr.vtr-ct > td, .ttab tr.vtr-ct > td.stick { background: var(--vt-ct-bg); } tr.vtr-jr > td, .ttab tr.vtr-jr > td.stick { background: var(--vt-jr-bg); }
tr.vtr-sl > td, .ttab tr.vtr-sl > td.stick { background: var(--vt-sl-bg); } tr.vtr-pu > td, .ttab tr.vtr-pu > td.stick { background: var(--vt-pu-bg); }
tr.vtr-cn > td, .ttab tr.vtr-cn > td.stick { background: var(--vt-cn-bg); } tr.vtr-dn > td, .ttab tr.vtr-dn > td.stick { background: var(--vt-dn-bg); }
tr.vtr-sj > td, .ttab tr.vtr-sj > td.stick { background: var(--vt-sj-bg); } tr.vtr-ot > td, .ttab tr.vtr-ot > td.stick { background: var(--vt-ot-bg); }
.vt-legend { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); font-size: var(--fs-small); color: var(--muted); margin: var(--s1) 0; }
.vt-legend span { display: inline-flex; align-items: center; gap: 6px; }
.vt-legend .vt-key { width: 14px; height: 10px; border-radius: 2px; display: inline-block; border: 1px solid var(--line); }
.vt-key.vtr-rc { background: var(--vt-rc-bg); } .vt-key.vtr-py { background: var(--vt-py-bg); } .vt-key.vtr-ct { background: var(--vt-ct-bg); }
.vt-key.vtr-jr { background: var(--vt-jr-bg); } .vt-key.vtr-sl { background: var(--vt-sl-bg); } .vt-key.vtr-pu { background: var(--vt-pu-bg); }
.vt-key.vtr-cn { background: var(--vt-cn-bg); } .vt-key.vtr-dn { background: var(--vt-dn-bg); } .vt-key.vtr-sj { background: var(--vt-sj-bg); }
.vt-key.vtr-ot { background: var(--vt-ot-bg); }
.acc-table td { white-space: nowrap; }
.acc-table td.acc-p { white-space: normal; min-width: 160px; }
.acc-table .c-amt, .acc-table .acc-p small.c-meta { display: none; }
.acc-table td { vertical-align: top; }
@media (max-width: 699px) {
  .acc-table .c-date, .acc-table .c-type, .acc-table .c-no, .acc-table .c-in, .acc-table .c-out { display: none; }
  .acc-table .c-amt { display: table-cell; }
  .acc-table .acc-p small.c-meta { display: block; }
  .acc-table td.acc-p { min-width: 0; }
  .acc-table { table-layout: auto; width: 100%; }
}

/* The terms and the upload notice: a plain list of sentences, nothing else. No colour here - every one of them
   lives in theme.css. */
.terms-list { margin: 0; padding-left: 18px; }
.terms-list li { margin: 0 0 var(--s2); }
.terms-list li:last-child { margin-bottom: 0; }

/* The company drop-down under the header's company name (19 Oct): the companies ticked on, a tick on the one shown */
.codrop-wrap { position: fixed; inset: 0; z-index: 70; }
.codrop { position: fixed; min-width: 220px; max-width: calc(100vw - 16px); padding: var(--s1); display: flex;
  flex-direction: column; gap: 2px; box-shadow: 0 6px 24px var(--shadow-float-c); }
.codrop-i { display: flex; align-items: center; gap: var(--s2); width: 100%; min-height: 44px; padding: 0 var(--s2);
  border: 0; border-radius: 8px; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.codrop-i .tick { width: 1.2em; color: var(--btn); font-weight: 700; }
.codrop-i.on { background: var(--sel-bg); color: var(--sel-ink); font-weight: 600; }
.codrop-i .nm { overflow-wrap: anywhere; }
.codrop-more { border: 0; background: none; color: var(--muted); font: inherit; font-size: var(--fs-small); text-align: left;
  padding: var(--s1) var(--s2); cursor: pointer; border-top: 1px solid var(--line); margin-top: 2px; }

/* Inventory: one table, every figure under its own heading (19 Oct). The folded columns (an item and its godown on a
   batch list) are their own columns on a wide screen and a small line under the first column on a phone. */
.inv-table th.num, .inv-table td.num { text-align: right; }
.inv-table .fold-line { display: none; }
.inv-table .nw { white-space: nowrap; }
@media (max-width: 640px) {
  .inv-table th.fold, .inv-table td.fold { display: none; }
  .inv-table .fold-line { display: block; white-space: normal; }
  .inv-table td, .inv-table th { padding-left: 6px; padding-right: 6px; }
}

/* A plain box to type in, wherever a screen or a sheet asks for one word or one figure (Party details' find box
   and its values, the Change-a-detail sheet, askNumber / askText). It had NO rule of its own, so it was drawn at
   the browser's own default size - about 170 px wide and 24 px tall - and "Find a party by name" was cut off
   inside it on a 390 px phone. */
.box { width: 100%; box-sizing: border-box; display: block; margin: var(--s1) 0; padding: 10px 12px;
  font: 500 15px var(--sans); color: var(--ink); background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius-s); min-height: 44px; }
.box:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

/* Party details (19 Oct): one row a detail - its heading, the value with where it came from, Change / Add */
.pd-acts { display: flex; gap: var(--s1); flex-wrap: wrap; justify-content: flex-end; margin: 0 0 var(--s2); }
.pd-card h2 { margin-bottom: var(--s1); }
.pd-row { display: grid; grid-template-columns: minmax(96px, 30%) 1fr auto; gap: var(--s2); align-items: baseline;
  padding: var(--s1) 0; border-top: 1px solid var(--line-soft); }
.pd-card h2 + .pd-row { border-top: 0; }
.pd-l { color: var(--muted); font-size: var(--fs-small); }
.pd-v { overflow-wrap: anywhere; min-width: 0; }
.pd-v small { display: block; }
.pd-src { display: inline-block; font-size: 11px; padding: 0 6px; border-radius: 4px; background: var(--tbl-head-bg);
  color: var(--navy); margin-left: 4px; }
.pd-src.plug { background: var(--sel-bg); color: var(--sel-ink); }
.pd-aad-acts { display: flex; gap: var(--s1); }
.pd-tally { display: flex; gap: var(--s1); align-items: baseline; margin: var(--s2) 0; }
.pd-list .pick-row { display: flex; flex-direction: column; align-items: flex-start; width: 100%; text-align: left; }
.cbar .pd-open { white-space: nowrap; margin-left: auto; }
/* on a phone the button goes under the title instead of taking half the row from it: beside it, a party's own name
   was broken over three lines and its period line had no room left at all */
@media (max-width: 480px) {
  .cbar { flex-wrap: wrap; }
  .cbar .pd-open { order: 10; flex-basis: 100%; margin-left: 0; justify-content: center; }
}
.cp-line { display: block; text-align: left; margin: var(--s1) 0 var(--s2); white-space: normal; max-width: 100%; height: auto; }
.cd-chips { margin: var(--s1) 0; }

/* Check my setup (19 Oct, setup_check.py / static/setup-check.js): one line a check, a dot in the theme's own ok /
   warn / danger colour, the fix as numbered steps */
.sc-top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s1); }
.sc-list { list-style: none; margin: 0; padding: 0; }
.sc-line { display: flex; gap: var(--s2); padding: var(--s2) 0; border-top: 1px solid var(--line-soft); text-align: left; }
.sc-line:first-child { border-top: 0; }
.sc-dot { flex: none; width: 12px; height: 12px; border-radius: 50%; margin-top: 5px; background: var(--faint); }
.sc-ok .sc-dot { background: var(--ok); }
.sc-warn .sc-dot { background: var(--brass); }
.sc-bad .sc-dot { background: var(--danger); }
.sc-body { min-width: 0; flex: 1; }
.sc-head { display: flex; justify-content: space-between; gap: var(--s1); }
.sc-mark { font-size: 12px; padding: 0 8px; border-radius: 10px; white-space: nowrap; align-self: center; }
.sc-ok .sc-mark { background: var(--ok-bg); color: var(--ok); }
.sc-warn .sc-mark { background: var(--warn-bg); color: var(--warn); }
.sc-bad .sc-mark { background: var(--danger-bg); color: var(--danger); }
.sc-said { margin: 2px 0 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.sc-steps { margin: var(--s1) 0 0; padding-left: 20px; font-size: var(--fs-small); overflow-wrap: anywhere; }
.sc-steps li { margin: 2px 0; }
.sc-acts { display: flex; gap: var(--s1); flex-wrap: wrap; margin-top: var(--s1); }
.sc-act { white-space: normal; text-align: left; }
.sc-done { margin: var(--s1) 0 0; color: var(--ok); font-size: var(--fs-small); overflow-wrap: anywhere; }
.sc-foot { display: flex; gap: var(--s1); flex-wrap: wrap; margin-top: var(--s2); }
.sc-report { margin-top: var(--s2); overflow-wrap: anywhere; }
.welcome-check { margin-top: var(--s3); text-align: left; }
.welcome-check h2 { font-size: 18px; margin: 0 0 var(--s1); }
.forgot-here { margin-top: var(--s1); text-align: left; }
.forgot-here summary { cursor: pointer; }
.forgot-here .btn { white-space: normal; }
.forgot-code { font-size: 28px; letter-spacing: 6px; font-weight: 700; margin: var(--s1) 0; }

.forgot-win { display: grid; gap: var(--s1); margin: var(--s1) 0; text-align: left; }
.forgot-win label { display: grid; gap: 4px; }
.forgot-in { font-size: 16px; letter-spacing: normal; }
.forgot-said { font-size: 14px; letter-spacing: normal; font-weight: 400; }

/* ---------------------------------------------------------------- a finger is 9 mm (19 Oct, the phone check)
   The phone rule above is a LIST OF NAMES, so every control written after it was left out of it and shipped at
   whatever height its own rule happened to give: a period chip at 28 px, a filter chip at 30, the tip card's ×
   at 26, the invoice designer's colour swatches at 26, a party's name in the Payables list at 20, the rows
   inside the Stock and Cash tiles at 20, a drop-down with no rule of its own at 24. This block sits at the FOOT
   of the file, after every screen's own sizes, because that is the only place a rule about all of them can win.
   Two heights, both already in use here: 44 px for a control (a drop-down, a name that opens a screen, a round
   icon on its own) and 36 px for a chip in a row of chips - what .tool-chip, .lseg .chip-f and .card-menu >
   summary already use, and what keeps the register's chip row from taking a quarter of the screen. */
@media (max-width: 480px), (pointer: coarse) {
  select, .plink, .vocab-w, .msg-menu, .know-x { min-height: 44px; }
  select { padding: 0 var(--s1); }
  .plink, .vocab-w { display: inline-flex; align-items: center; }
  .msg-menu, .know-x { width: 44px; height: 44px; line-height: 1; }
  .know-x { top: -10px; right: -6px; }          /* a 44 px circle still sits on the card's own corner */
  .pchip, .mtog, .chip-f, button.chip, .gpick, .dz-swatch { min-height: 36px; }
  .codrop-more { min-height: 44px; }           /* the last row of the company drop-down, beside rows of 44 */
  .pchip, .mtog, .chip-f, button.chip, .gpick { display: inline-flex; align-items: center; justify-content: center; }
  .dz-swatch { width: 36px; height: 36px; }
  /* The rows inside a Home tile (each godown, each count, each account) are wide, so they were left with no
     height of their own to keep the tile dense. 20 px is still thinner than a fingertip, and these rows are how
     a person opens Inventory and an account statement, so they get a height - 32 px, not 44, so the tile stays
     the dense one Home was rebuilt to have. */
  .k-stock .count-open, .k-stock .godown-open, .k-cash .acct-open { min-height: 32px; }
  /* A figure in a table that opens the entries behind it (Month-end's own figures) is a 17 px line of text, and
     it is the link that takes the tap, not the row. The padding is given back as margin, so nothing moves. */
  .data td a, .me-figs td a { display: inline-block; min-height: 32px; line-height: 32px; min-width: 28px;
    padding: 0 6px; margin: 0 -6px; }
}

/* ---- E-invoice and e-way bill (einv_status.py, 21 Oct): the Home tile and its screen. Colours are the theme's
   own --ok / --warn / --danger with their -bg and -line, so Light and Dark both read. */
.einv-tile .einv-top { display: flex; justify-content: space-between; align-items: center; gap: var(--s1); }
.einv-tile .einv-top .t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.einv-subs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s1); margin: var(--s2) 0; }
.einv-sub { border: 1px solid var(--line-soft); border-radius: var(--radius-s); padding: 10px 12px; min-width: 0;
  background: var(--paper-soft); }
.einv-sub > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.es-t { font-size: 12px; color: var(--muted); }
.es-n { display: flex; align-items: baseline; gap: 6px; margin: 2px 0; }
.es-n b { font-size: 28px; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.es-n span { font-size: 12px; color: var(--muted); }
.es-s { font-size: 12px; display: flex; align-items: center; gap: 6px; }
.es-s.tone-warn { color: var(--warn); }
.es-s.tone-ok, .tone-ok { color: var(--ok); }
.es-s.tone-muted { color: var(--muted); }
.es-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--warn); flex: none; }
.einv-foot { border-top: 1px solid var(--line); padding-top: var(--s1); }
.einv-foot > div { min-width: 0; }
.einv-foot .go { white-space: nowrap; }
.att-pill { font-size: 12px; white-space: nowrap; padding: 2px 10px; border-radius: 999px; background: var(--warn-bg);
  color: var(--warn); border: 1px solid var(--warn-line); }
.es-alldone { font-size: 12px; white-space: nowrap; }
.einv-empty { color: var(--muted); font-size: 13px; padding: var(--s2) 0; }
.einv-tile.loading { position: relative; }
.einv-tile.loading .einv-subs, .einv-tile.loading .einv-foot { visibility: hidden; }
.einv-tile.loading::after { content: ""; position: absolute; left: 18px; right: 18px; top: 56px; height: 110px;
  border-radius: var(--radius-s); background: linear-gradient(90deg, var(--line-soft), var(--paper-soft), var(--line-soft));
  background-size: 200% 100%; animation: einv-shimmer 1.2s linear infinite; }
@keyframes einv-shimmer { from { background-position: 200% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .einv-tile.loading::after { animation: none; } }

.einv-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s2); flex-wrap: wrap; }
.eh-l { min-width: 0; }
.eh-sub { margin-top: 2px; }
.eh-pchip { display: none; margin-top: var(--s1); }
.eh-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.einv-act { display: inline-flex; align-items: center; gap: 6px; }
.einv-note { background: var(--paper-soft); border: 1px solid var(--line); border-radius: var(--radius-s); padding: var(--s1) var(--s2); }
.esums { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s2); margin: var(--s2) 0; }
.esum { font: inherit; text-align: left; display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; cursor: pointer;
  background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; min-width: 0; }
.esum:hover, .esum.on { border-color: var(--navy); }
.esum:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.esum-t { font-size: 12px; color: var(--muted); }
.esum-n { display: flex; align-items: baseline; gap: 6px; }
.esum-n b { font-size: 24px; }
.esum-n small { color: var(--muted); }
.esum-l { font-size: 12px; color: var(--muted); }
.esum-warn .esum-l { color: var(--warn); }
.esum-bad { background: var(--danger-bg); border-color: var(--danger-line); }
.esum-bad .esum-n b, .esum-bad .esum-l { color: var(--danger); }
.etabs { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--line); margin: var(--s2) 0; scrollbar-width: thin; }
.etab { font: inherit; font-size: 14px; white-space: nowrap; background: none; border: 0; border-bottom: 3px solid transparent;
  padding: 8px 12px; color: var(--muted); cursor: pointer; }
.etab.on { color: var(--navy); border-bottom-color: var(--navy); font-weight: 600; }
.etab:focus-visible { outline: 2px solid var(--focus); }
.ebadge { font-size: 11px; padding: 1px 7px; border-radius: 999px; background: var(--warn-bg); color: var(--warn); border: 1px solid var(--warn-line); }
.einv-search input { width: 100%; max-width: 420px; font: inherit; padding: 8px 12px; border: 1px solid var(--line);
  border-radius: var(--radius-s); background: var(--paper); color: var(--ink); }
.echip { display: inline-block; font-size: 12px; padding: 1px 8px; border-radius: 999px; white-space: nowrap; border: 1px solid; }
.echip-ok { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-line); }
.echip-warn { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-line); }
.echip-bad { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-line); }
.echip-muted { background: var(--paper-soft); color: var(--muted); border-color: var(--line); }
.einv-table td small { display: block; font-size: 11px; color: var(--muted); }
.einv-table .ep { max-width: 260px; white-space: normal; }
.einv-table .ew { min-width: 180px; white-space: normal; }
.einv-table tr[data-einv-row] { cursor: pointer; }
.einv-table tr[data-einv-row]:hover td { background: var(--sel-bg); }
.nw { white-space: nowrap; }
.einv-cards { list-style: none; margin: 0; padding: 0; display: none; }
.ecard { border: 1px solid var(--line); border-radius: 14px; background: var(--paper); padding: 12px 14px; margin-bottom: var(--s1); cursor: pointer; }
.ecard > div { display: flex; justify-content: space-between; gap: var(--s1); }
.ecard .ep { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ecard .ec-2, .ecard .ec-3 { margin-top: 4px; }
.ecard .ec-3 { justify-content: flex-start; gap: var(--s2); font-size: 12px; }
.ecard .ec-4 { font-size: 12px; color: var(--muted); margin-top: 4px; }
.ecard .ec-5 { justify-content: flex-end; }
.einv-more { text-align: center; }
.einv-g1 { margin: var(--s2) 0; }
.einv-g1 ol { margin: var(--s1) 0; padding-left: 20px; }
.einv-g1-up { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s1); }
.einv-drawer-wrap { position: fixed; inset: 0; background: var(--scrim); z-index: 60; display: flex; justify-content: flex-end; }
.einv-drawer { width: 400px; max-width: 100%; height: 100%; overflow: auto; border-radius: 0; margin: 0; padding: var(--s3); }
.ed-head { display: flex; justify-content: space-between; gap: var(--s1); align-items: flex-start; }
.ed-chips { display: flex; gap: var(--s2); margin: var(--s2) 0; font-size: 13px; }
.ed-why { color: var(--warn); }
.ed-row { display: grid; grid-template-columns: 110px 1fr auto; gap: var(--s1); align-items: center; padding: 6px 0;
  border-bottom: 1px solid var(--line-soft); font-size: 13px; }
.ed-l { color: var(--muted); }
.ed-v { word-break: break-all; font-variant-numeric: tabular-nums; }
@media (max-width: 699px) {
  .esums { grid-template-columns: 1fr 1fr; gap: var(--s1); }
  .einv-table { display: none; }
  .einv-cards { display: block; }
  .eh-acts { width: 100%; flex-wrap: nowrap; justify-content: space-between; }
  .einv-act span { display: none; }
  .einv-act { padding: 6px 10px; }
  .eh-acts [data-einv-period] { display: none; }
  .eh-pchip { display: inline-block; }
  .einv-drawer-wrap { align-items: flex-end; }
  .einv-drawer { width: 100%; height: auto; max-height: 85vh; border-radius: 16px 16px 0 0; }
}

/* ---- Home: ONE tile template and the grid (21 Oct). 3 equal columns from 1024 px, 2 from 600 px, 1 on a phone;
   every tile exactly 340 px tall from 600 px up (auto on a phone). A tile is a column: the title (14 px), its period
   chip under it, the body - growing, its rows spread evenly, scrolling inside the tile if it would overflow - and the
   foot: a thin line, then "Open ... ›" pinned to the bottom. The same hover on every tile; keyboard focus always
   visible, never a ring left behind by a tap. */
#dash { gap: 16px; }
#dash > .dcard { display: flex; flex-direction: column; align-self: stretch; border-radius: 14px; padding: 16px 18px 14px;
  min-width: 0; outline: none; transition: border-color 0.15s, box-shadow 0.15s; }
#dash > .dcard:focus-visible, #dash > .dcard :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
#dash > .dcard:focus:not(:focus-visible), #dash > .dcard :focus:not(:focus-visible) { outline: none; }
@media (hover: hover) {
  #dash > .dcard.openable:hover { border-color: var(--navy); box-shadow: var(--shadow-float, var(--shadow)); }
}
@media (hover: none) { #dash > .dcard.openable:hover { border-color: var(--line); } }
#dash > .dcard > .t { font-size: 14px; font-weight: 600; line-height: 1.35; }
#dash > .dcard > .tile-ctl { margin-top: 6px; }
#dash > .dcard > .tb { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: space-evenly;
  gap: 4px; padding-top: 4px; }
#dash > .dcard .v { font-size: 28px; margin-top: 0; }
#dash > .dcard .v.fig-l { font-size: 23px; }
#dash > .dcard .v.fig-xl { font-size: 20px; }
#dash > .dcard .s, #dash > .dcard .extra-open { font-size: 12px; }
#dash > .dcard .mini, #dash > .dcard .legend { margin: 0; }
#dash > .dcard .mini li, #dash > .dcard .legend li { font-size: 12px; line-height: 1.6; padding: 0; }
#dash > .dcard > .go { flex: none; border-top: 1px solid var(--line); margin-top: 8px; padding-top: 8px; }
/* the e-invoice tile keeps its title and chip on one row; its own foot carries "Open ›" */
#dash > .einv-tile > .tb { justify-content: center; }
#dash > .einv-tile .einv-subs { margin: 0; }
#dash > .einv-tile .einv-foot { flex: none; margin-top: 8px; }
/* Sales / Purchases: bars 90 px with 10 px labels */
#dash > .k-sales .chart, #dash > .k-purchases .chart { height: 90px; margin-top: 4px; }
#dash .chart em { font-size: 10px; }
/* Receivables / Payables: the ageing bar 12 px and its four rows spaced evenly */
#dash .agebar { height: 12px; margin: 4px 0; }
#dash > .k-receivables .legend, #dash > .k-payables .legend { display: flex; flex-direction: column; justify-content: space-evenly; }
/* Stock: the month strip 44 px */
#dash > .k-stock .chart { height: 44px; margin-top: 4px; }
#dash > .k-stock .stock-counts { margin-top: 4px; padding-top: 2px; }
/* Collections: three boxes */
.tboxes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.tbox { border: 1px solid var(--line-soft); border-radius: 10px; padding: 6px 8px; background: var(--paper-soft); min-width: 0;
  display: flex; flex-direction: column; gap: 2px; }
.tbox span { font-size: 11px; color: var(--muted); white-space: nowrap; }
.tbox b { font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trows li b { font-variant-numeric: tabular-nums; }
.tnote { font-style: italic; }
@media (min-width: 600px) {
  #dash { grid-template-columns: repeat(2, 1fr); }
  #dash > .dcard { height: 340px; }
  #dash > .dcard > .tb { overflow-y: auto; overflow-x: hidden; }
}
@media (min-width: 1024px) { #dash { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 599px) {
  #dash { gap: 12px; grid-template-columns: 1fr; }
  #dash > .dcard { height: auto; }
}
/* a tablet (600-1023 px): Home's two columns take the screen's width, not the phone's 560 px column */
@media (min-width: 600px) and (max-width: 1023px) { body.on-home main { max-width: 980px; } }
/* a narrow tile (the desktop face at 1024 px): the Collections boxes become rows, so no figure is ever cut */
#dash > .dcard { container-type: inline-size; }
@container (max-width: 300px) {
  .tboxes { grid-template-columns: 1fr; gap: 4px; }
  .tbox { flex-direction: row; justify-content: space-between; align-items: baseline; padding: 4px 8px; }
  .einv-sub { padding: 8px; }
  .es-n b { font-size: 24px; }
}
.pchip, .mtog { white-space: nowrap; }
@container (max-width: 310px) {
  .einv-tile .einv-top .t { white-space: normal; font-size: 13px; }
  .einv-sub > .es-n { flex-wrap: wrap; row-gap: 0; }
  .einv-sub > .es-n span { flex-basis: 100%; }
}

/* ---- E-invoice screen, from the phone tests (21 Oct): ONE solid sticky header (Back and a short title) with the
   tab strip held under it, both on the page's own opaque ground and running the full width, so nothing scrolls
   through them; a small spinner while another period loads; a fade where more tabs are off the screen. */
.einv-bar { position: sticky; top: var(--top-h); z-index: 6; display: flex; align-items: center; gap: var(--s1);
  height: 44px; background: var(--ivory); border-bottom: 1px solid var(--line-soft);
  box-shadow: 0 0 0 100vmax var(--ivory); clip-path: inset(0 -100vmax); }
body.desk .einv-bar { top: 0; }
.einv-bar .back, .view .einv-bar .back { position: static; background: none; margin: 0; padding: 6px 8px 6px 0; flex: none; }
.einv-bar .eb-t { font-size: 14px; font-weight: 600; color: var(--navy); min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; flex: 1 1 auto; }
.einv-spin { display: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line);
  border-top-color: var(--navy); flex: none; animation: einv-turn 0.8s linear infinite; }
.einv-root.busy .einv-spin { display: inline-block; }
.einv-root.busy .einv-list, .einv-root.busy .esums { opacity: 0.55; transition: opacity 0.2s; }
@keyframes einv-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .einv-spin { animation: none; } }
.etabs-wrap { position: sticky; top: calc(var(--top-h) + 44px); z-index: 5; background: var(--ivory);
  box-shadow: 0 0 0 100vmax var(--ivory); clip-path: inset(0 -100vmax); margin: var(--s2) 0; }
body.desk .etabs-wrap { top: 44px; }
.etabs-wrap .etabs { margin: 0; }
.etabs-wrap::after { content: ""; position: absolute; top: 0; right: 0; bottom: 1px; width: 36px; pointer-events: none;
  background: linear-gradient(to right, transparent, var(--ivory)); opacity: 0; transition: opacity 0.15s; }
.etabs-wrap.more::after { opacity: 1; }
.esum .esum-l { display: block; }
/* each problem on its own line, with what to do about it as a small link on the right */
.ew-line { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s1); }
.ew-line + .ew-line { margin-top: 2px; }
.ew-line > span { min-width: 0; }
.ew-act { white-space: nowrap; flex: none; padding: 0 0 0 4px; min-height: 0; font-size: 12px; }
.ecard .ec-4 { display: block; }
.ed-why { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s1); color: var(--warn);
  padding: 2px 0; }
.ed-box { border: 1px solid var(--line); border-radius: var(--radius-s); padding: var(--s1) var(--s2); margin: var(--s1) 0;
  background: var(--paper-soft); font-size: 13px; }
.ed-box ol { margin: var(--s1) 0 0; padding-left: 20px; }
.ed-cmp { display: grid; grid-template-columns: 1fr auto; gap: 4px var(--s2); margin-top: var(--s1); }
.ed-cmp b { text-align: right; font-variant-numeric: tabular-nums; }
.einv-set-h { font-size: 14px; margin: var(--s3) 0 var(--s1); }
.einv-rules li { display: flex; justify-content: space-between; align-items: center; gap: var(--s1); padding: 6px 0;
  border-bottom: 1px solid var(--line-soft); }
.einv-rules small { display: block; }
.einv-act .ea-s { display: none; }
@media (max-width: 699px) {
  .einv-act { flex-direction: column; gap: 2px; padding: 4px 8px; min-width: 52px; }
  .einv-act .ea-l { display: none; }
  .einv-act .ea-s { display: block; font-size: 10px; line-height: 1.1; }
  .einv-head .page-title { font-size: 22px; }
}
/* the tile's foot: what the total is, the total with the documents counted, any problems, then the pill and Open */
.einv-foot { display: block; }
.einv-foot .ef-lbl { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.einv-foot .ef-fig { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s1); }
.einv-foot .ef-fig b { font-size: 14px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.einv-foot .ef-fig span { font-size: 12px; color: var(--muted); white-space: nowrap; }
.einv-foot .ef-prob { font-size: 12px; color: var(--danger); white-space: nowrap; }
.einv-foot .ef-row { display: flex; justify-content: space-between; align-items: center; gap: var(--s1); margin-top: 4px; }
.einv-foot .ef-row .go { margin: 0; }
@container (max-width: 340px) {
  .einv-foot .ef-fig { flex-direction: column; align-items: flex-start; gap: 0; }
}

/* ---- the books being read from Tally (22 Oct, first_load.py): one card on Home and over the Workspace - the %, a
   bar that keeps moving (never a frozen screen), the step, the months, the time left; tiles say "still reading". */
.reading-card { padding: var(--s3); margin-bottom: var(--s3); border-left: 4px solid var(--btn); }
.reading-card .rd-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2); flex-wrap: wrap; }
.reading-card .rd-head b { font-size: 16px; color: var(--ink); }
.rd-bar { position: relative; height: 10px; border-radius: 5px; background: var(--line-soft); overflow: hidden; margin: var(--s2) 0; }
.rd-bar > span { position: relative; display: block; height: 100%; min-width: 4%; border-radius: 5px; background: var(--btn);
  overflow: hidden; transition: width 0.6s ease; }
.rd-bar > span::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--paper) 45%, transparent), transparent);
  transform: translateX(-100%); animation: rd-move 1.4s linear infinite; }
.rd-bar.still > span::after { animation-duration: 3s; }
@keyframes rd-move { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .rd-bar > span::after { animation: none; } }
.reading-card .rd-step { margin: 0 0 var(--s1); color: var(--ink); }
.reading-card .rd-away { margin: var(--s1) 0; color: var(--warn); }
.dk-reading { margin: var(--s2); flex: none; }
.dk-work.app .dk-reading { display: none; }            /* Home inside the frame carries its own card */
/* while a read goes on, the Workspace's screen sits under the card instead of behind it */
html.books-reading .dk-work:not(.app) .dk-centre { display: flex; flex-direction: column; }
html.books-reading .dk-work:not(.app) .dk-pane { position: relative; inset: auto; flex: 1 1 auto; min-height: 0; }
body.books-reading #dash > .dcard { position: relative; }
body.books-reading #dash > .dcard::before { content: "Still reading"; position: absolute; top: 10px; right: 12px; z-index: 1;
  font-size: 11px; padding: 1px 8px; border-radius: 10px; background: var(--warn-bg); color: var(--ink);
  border: 1px solid var(--warn-line); }
/* More > Companies: the one question for a shared Tally ID, hidden companies, the two-line foot */
.share-opts { display: grid; gap: var(--s2); margin: var(--s2) 0; }
.share-opt { display: flex; gap: var(--s2); align-items: flex-start; padding: var(--s2); border: 1px solid var(--line);
  border-radius: var(--radius-s, 8px); cursor: pointer; background: var(--paper); }
.share-opt:has(input:checked) { border-color: var(--btn); background: var(--sel-bg); }
.share-opt:has(input:disabled) { opacity: 0.6; cursor: default; }
.share-opt small { display: block; color: var(--muted); margin-top: 2px; }
.share-opt input { margin-top: 3px; flex: none; }
.co-twin { margin: 4px 0 0; }
.co-hidden { margin: var(--s2) 0; }
.co-hidden summary { cursor: pointer; color: var(--muted); padding: var(--s1) 0; }
.co-hidden .hidden-row { opacity: 0.85; }
.co-foot { margin: var(--s1) 0 var(--s3); line-height: 1.5; }
.person-cos { border: 0; padding: 0; margin: var(--s1) 0; display: flex; flex-wrap: wrap; gap: 4px var(--s3); align-items: center; }
.person-cos legend { padding: 0; margin-bottom: 2px; }
.pc-tick { display: inline-flex; gap: 6px; align-items: center; min-height: 32px; }