/* The overview (lean-rollout ticket 110), design A; TICKET 267, the owner's mockup (19 ต.ค. 2026).
   Every value is a token from finance_app/static/tokens.css, generated from
   tokens/moneyos.json. Nothing here is a hex, a pixel or a duration.

   The composition, as the mockup draws it. "ภาพรวมวันนี้": ONE thing leads, the remaining allowance at the display
   step on a white card with the primary rule along its top, and beside it the balance a person recorded; then the
   table of the accounts, the quiet strip of today's slips, and the app's own sections the mockup has no place for
   (the totals by sender, the work that needs a person, the slips being read), which end the page on purpose.
   "งานบัญชี": the withdrawals waiting for a person lead, at the display step, with the file's results as a bar;
   the slips no withdrawal holds beside the day being closed and its ring; the balances to check by account.
   "งานต้องแก้ไข": the work queue alone. A region of another view is out of the layout, not merely out of sight.

   TICKET 155: the prototype's composition (board-prototype/board.css) where it differed,
   the two dialogs, and the rules that used to reach other pages (`.money-button`,
   `.badge`, `.breakdown-*`) scoped to this page. */

/* ---------------------------------------------------------------- the page grid --- */
/* TICKET 153 owns the heading row (`app.css .page-heading`); TICKET 267 gives its corner the mockup's look: the day
   as a quiet tag and "อัปเดต 12:42" beside it. The dot keeps the five states' colour; the words carry them too. */
.board-heading>div{min-inline-size:0}
.board-freshness{display:inline-flex;align-items:center;gap:var(--space-8) var(--space-12);flex-wrap:wrap;margin:0;font-size:var(--text-sm);color:var(--color-text-secondary)}
.board-today{padding:var(--space-4) var(--space-8);border-radius:var(--radius-sm);background:var(--color-surface-sunken);font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--color-text-primary)}
.board-freshness .status-dot{display:none}
#operations-panel:is([data-board-state=stale],[data-board-state=error],[data-board-state=partial],[data-board-state=loading]) .board-freshness .status-dot{display:inline-block}
#operations-panel[data-board-state=stale] .board-freshness,
#operations-panel[data-board-state=error] .board-freshness{color:var(--color-feedback-error-text)}
#operations-panel[data-board-state=partial] .board-freshness{color:var(--color-feedback-warning-text)}
#operations-panel[data-board-state=partial] .board-freshness .status-dot{background:var(--color-feedback-warning-text)}
#operations-panel[data-board-state=stale] .board-freshness .status-dot,
#operations-panel[data-board-state=error] .board-freshness .status-dot{background:var(--color-feedback-error-text)}
/* Loading shows NO figures. A skeleton that dimmed the last ones would be the "0 that is
   really a failed read" the brief forbids, one step removed. */
#operations-panel[data-board-state=loading] .board-grid{opacity:var(--opacity-disabled)}
#operations-panel[data-board-state=loading] .board-grid,
#operations-panel[data-board-state=error] .board-grid{pointer-events:none}

.board-notice{display:flex;align-items:center;gap:var(--space-16);padding:var(--space-16) var(--space-20);background:var(--color-feedback-warning-bg);color:var(--color-feedback-hold-text);border:1px solid var(--color-border-lead);border-radius:var(--radius-card);margin-block-end:var(--space-24)}
.board-notice>div{flex:1 1 auto;min-inline-size:0}
.board-notice p{margin:0;font-size:var(--text-sm);color:inherit}
.board-notice .icon{flex:0 0 auto}
.board-error{display:flex;align-items:center;gap:var(--space-16);flex-wrap:wrap;margin:0 0 var(--space-24);padding:var(--space-16) var(--space-20);background:var(--color-feedback-error-bg);color:var(--color-feedback-error-text);border:1px solid var(--color-border-danger);border-radius:var(--radius-card)}
.board-error p{margin:0;flex:1 1 auto;min-inline-size:0;color:inherit}
/* TICKET 155 (SB-22): one stale notice on the overview. The shell's offline line
   (live-update.js) and this page's banner say the same thing when both reads failed; the
   banner is the prototype's and names the figures it is about, so while it is on screen
   the shell's line steps aside. On every other page, and on this one while the board
   itself is not stale, the shell's line stands. */
body:has(#operations-panel:not([hidden]) #board-stale:not([hidden])) #live-offline{display:none}

/* TICKET 210: the page's one range, between the heading and the figures it scopes. TICKET 267: the mockup's bar --
   the select with its label on one line, and the line that says what is counted on which day beside it. */
.board-scope{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-8) var(--space-20);margin:0 0 var(--space-24)}
.board-scope .board-range .date-range-field-wrap{flex:0 1 auto;inline-size:auto;max-inline-size:100%}
.board-scope .board-range-help{flex:0 1 auto;min-inline-size:0;max-inline-size:none;margin:0;font-size:var(--text-xs);color:var(--color-text-secondary);text-align:end}
.board-range{flex:0 1 auto;min-inline-size:0}
.board-scope .date-range-preset-field{flex-direction:row;align-items:center;flex-wrap:wrap;gap:var(--space-8) var(--space-12)}
.board-scope .date-range-preset-field .date-range-field-label{flex:0 1 auto;inline-size:auto}
.board-scope .date-range-preset-field .date-range-select{flex:1 1 auto}
.board-scope .date-range[data-form=compact] .date-range-field-label{font-size:var(--text-sm);font-weight:var(--weight-regular);color:var(--color-text-primary)}
.board-scope .date-range-select{inline-size:auto;min-inline-size:calc(var(--space-44) * 4)}
.board-range .date-range-select{max-inline-size:100%}

.board-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-20) var(--space-24);align-items:start}
.board-grid>*{min-inline-size:0;grid-column:1 / -1}
.sender-panel{grid-column:1}
.queue-panel{grid-column:2}
.board-orphans{grid-column:1}
.board-close{grid-column:2}
.board-orphans,.board-close{align-self:stretch}

/* The shared shells this page draws its sections in: the mockup's panel (the frame radius and its faint shadow). */
.panel,.allowance-panel,.board-recorded,.board-accounts-card,.board-withdrawals,.board-acc-card{border:1px solid var(--color-border-default);border-radius:var(--radius-frame);background:var(--color-surface-card);box-shadow:var(--shadow-sm);overflow:hidden}
.section-heading{display:flex;align-items:center;justify-content:space-between;gap:var(--space-12);padding:var(--space-20)}
.section-heading>div{min-inline-size:0}
.section-heading .eyebrow{margin-block-end:var(--space-4)}
.section-heading h2{margin:0;font-size:var(--text-lg);font-weight:var(--weight-semibold);display:flex;align-items:center;gap:var(--space-8);flex-wrap:wrap}
.section-heading h2:focus-visible{outline:var(--space-2) solid var(--color-focus-ring);outline-offset:var(--space-4)}
.section-description{margin:var(--space-4) 0 0;font-size:var(--text-xs);color:var(--color-text-secondary)}
.section-heading>.icon{color:var(--color-text-caption);flex:0 0 auto}
/* TICKET 166: the bulk button sits beside the panel's own icon, at the end of the row,
   whether or not it is drawn -- `hidden` already removes it from layout when there is
   nothing eligible. */
#board-reread-all{flex:0 0 auto;margin-inline-start:auto}
.count{display:inline-flex;align-items:center;justify-content:center;min-inline-size:var(--space-24);block-size:var(--space-24);padding-inline:var(--space-8);border-radius:var(--radius-pill);background:var(--color-surface-sunken);color:var(--color-text-secondary);font-size:var(--text-xs);font-weight:var(--weight-semibold)}
.count.warning{background:var(--color-feedback-warning-bg);color:var(--color-feedback-warning-text)}
/* A card's head as the mockup's: the title and its line on the start, a quiet link on the end. */
.board-card-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-12);padding:var(--space-20);border-block-end:1px solid var(--color-border-default)}
.board-card-head>div{min-inline-size:0}
.board-card-head h2{margin:0;font-size:var(--text-lg);font-weight:var(--weight-semibold)}
.board-card-sub{margin:var(--space-4) 0 0;font-size:var(--text-xs);color:var(--color-text-secondary);max-inline-size:none}
.board-card-foot{margin:0;padding:var(--space-12) var(--space-20);font-size:var(--text-xs);color:var(--color-text-secondary)}
.board-card-foot:has(small:empty){display:none}

/* --------------------------------------------- "ภาพรวมวันนี้": the allowance and the balance --- */
.board-finance{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(0,1fr);gap:var(--space-20);align-items:stretch}
.board-finance>*{min-inline-size:0}
.allowance-panel{border-block-start:var(--space-4) solid var(--color-action-primary)}
.allowance-hero{display:grid;gap:var(--space-24);padding:var(--space-28);container-type:inline-size}
.allowance-hero p{max-inline-size:none}
.hero-top{display:flex;flex-direction:column;gap:var(--space-4);min-inline-size:0}
.hero-overline{margin:0;font-size:var(--text-md);color:var(--color-text-primary)}
.hero-heading{margin:0;font-size:inherit;font-weight:inherit;line-height:inherit}
/* Nine digits at 320 px: the figure is sized against the card's OWN width, up to the display step, and is never
   abbreviated, ellipsised or broken (ticket 105): the unit may drop to its own line, the digits may not.
   TICKET 155 (SB-02): the figure is the button that opens the list behind it; it wears no button chrome. */
.hero-number{display:inline-flex;align-items:baseline;gap:var(--space-12);flex-wrap:wrap;max-inline-size:100%;min-block-size:0;margin:0;padding:0;background:transparent;border:0;border-radius:var(--radius-control);color:var(--color-text-primary);text-align:start;white-space:normal;font-size:clamp(var(--text-xl),11cqi,var(--text-display));font-weight:var(--weight-medium);line-height:var(--leading-snug);letter-spacing:-0.04em;cursor:pointer}
.hero-number:hover,.hero-number:active{background:transparent;border-color:transparent}
.hero-number:hover .hero-figure{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:var(--space-6)}
.hero-number:disabled{opacity:1;cursor:default}
.hero-number:disabled:hover .hero-figure{text-decoration:none}
.hero-figure{white-space:nowrap;font-variant-numeric:tabular-nums}
.hero-unit{flex:0 0 auto;font-size:var(--text-md);font-weight:var(--weight-regular);letter-spacing:normal;color:var(--color-text-secondary)}
.hero-empty-title{display:block;font-size:var(--text-xl);font-weight:var(--weight-semibold);line-height:var(--leading-normal)}
.hero-note{margin:0;font-size:var(--text-xs);color:var(--color-text-secondary)}
.hero-caution{margin:var(--space-4) 0 0;font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-feedback-hold-text)}
.hero-bottom{display:grid;gap:var(--space-12)}
.hero-equation{display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--space-12);font-size:var(--text-xs);color:var(--color-text-primary)}
.hero-equation strong{font-weight:var(--weight-medium);font-variant-numeric:tabular-nums}
.hero-equation>span:last-child{color:var(--color-text-secondary)}
.hero-equation-quiet{color:var(--color-text-secondary)}
.hero-equation:has(>span:empty:first-child + span:empty){display:none}
.hero-meter{block-size:var(--space-8);border-radius:var(--radius-pill);background:var(--color-meter-track);overflow:hidden}
.hero-meter>span{display:block;block-size:100%;inline-size:0;background:var(--color-action-primary)}
.hero-meter>span[data-over=true]{background:var(--color-feedback-warning-text)}
.hero-links{display:flex;flex-wrap:wrap;gap:var(--space-12)}
.hero-link{display:inline-flex;align-items:center;gap:var(--space-6);min-block-size:var(--size-36);min-height:var(--size-36);padding:var(--space-4);background:transparent;border-color:transparent;color:var(--color-text-link);font-size:var(--text-xs);font-weight:var(--weight-medium)}
.hero-link:hover{background:var(--color-surface-selected);border-color:transparent}
.hero-link:active{background:var(--color-surface-selected);border-color:transparent}
/* The card's foot: the money transferred out in the page's range (`/transferred`), the mockup's period summary. */
.hero-period{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--space-8) var(--space-16);padding-block-start:var(--space-16);border-block-start:1px solid var(--color-border-default)}
.hero-period>div{min-inline-size:0}
.hero-period-label{margin:0;font-size:var(--text-xs);color:var(--color-text-primary)}
.hero-period-span{margin:0;font-size:var(--text-xs);color:var(--color-text-secondary)}
.hero-period-figure{display:inline-flex;align-items:baseline;gap:var(--space-8);min-block-size:var(--size-44);padding:var(--space-4) var(--space-8);margin-inline-end:calc(-1 * var(--space-8));background:transparent;border-color:transparent;color:var(--color-text-primary);font-size:var(--text-xl);font-weight:var(--weight-medium);font-variant-numeric:tabular-nums;white-space:nowrap}
.hero-period-figure:hover{background:var(--color-action-ghost-hover);border-color:transparent}
.hero-period-figure:active{background:var(--color-action-ghost-hover);border-color:transparent}
.hero-period-figure:disabled{opacity:1;cursor:default;background:transparent}
.hero-period>.hero-caution{flex:1 1 100%;margin:0}
/* SB-18: a company with no source account. The card says so once and offers account settings; there is no figure,
   no meter and no table to be empty beside it. */
.allowance-panel[data-empty=true] .hero-period{display:none}
.board-accounts-card[data-empty=true]{display:none}

/* TICKET 267: the balance a person recorded, the mockup's card beside the allowance. */
.board-recorded{display:flex;flex-direction:column;gap:var(--space-16);padding:var(--space-24)}
.board-recorded-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-12)}
.board-recorded-head h2{margin:0;font-size:var(--text-lg);font-weight:var(--weight-semibold)}
.board-recorded-head .icon{color:var(--color-text-secondary);flex:0 0 auto}
.board-recorded-body{display:flex;flex-direction:column;gap:var(--space-12);flex:1 1 auto;min-inline-size:0}
.board-recorded-figure{margin:0;font-size:var(--text-xxl);font-weight:var(--weight-medium);line-height:var(--leading-tight);letter-spacing:-0.02em;color:var(--color-text-primary);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.board-recorded-unit{font-size:var(--text-xs);font-weight:var(--weight-regular);letter-spacing:normal;color:var(--color-text-secondary)}
.board-recorded-none{font-size:var(--text-lg)}
.board-recorded-note{margin:0;font-size:var(--text-xs);color:var(--color-text-secondary);max-inline-size:none}
.board-recorded-empty{margin:0;font-size:var(--text-md);font-weight:var(--weight-semibold);color:var(--color-text-primary)}
.board-recorded-stale{display:flex;align-items:flex-start;gap:var(--space-8);margin:0;font-size:var(--text-sm);color:var(--color-feedback-hold-text);max-inline-size:none}
.board-recorded-stale .icon{flex:0 0 auto;margin-block-start:var(--space-2)}
.board-recorded-go{align-self:flex-start;margin-block-start:auto;padding-inline:var(--space-4);font-size:var(--text-xs)}
/* TICKET 272: the balance now leads the card; the recorded balance it may start from is under it, smaller, under its
   own name. "อาจไม่ครบ" is the warning tone, with its words, never colour alone. */
.board-now{display:flex;flex-direction:column;gap:var(--space-8);min-inline-size:0}
.board-now-start{display:flex;align-items:flex-start;gap:var(--space-8);margin:0;font-size:var(--text-sm);color:var(--color-text-secondary);max-inline-size:none}
.board-now-warning{display:flex;align-items:flex-start;gap:var(--space-8);margin:0;padding:var(--space-8) var(--space-12);border-radius:var(--radius-control);background:var(--color-feedback-warning-bg);color:var(--color-feedback-warning-text);font-size:var(--text-sm);max-inline-size:none}
.board-now-untimed{display:flex;align-items:flex-start;gap:var(--space-8);margin:0;font-size:var(--text-sm);color:var(--color-feedback-hold-text);max-inline-size:none}
.board-now-start .icon,.board-now-warning .icon,.board-now-untimed .icon{flex:0 0 auto;margin-block-start:var(--space-2)}
.board-recorded-subtitle{margin:var(--space-4) 0 0;padding-block-start:var(--space-16);border-block-start:1px solid var(--color-border-default);font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--color-text-secondary)}
.board-recorded-figure.board-recorded-second{font-size:var(--text-xl)}
.board-recorded-second .board-recorded-none{font-size:var(--text-md)}
.account-now strong{display:block;font-weight:var(--weight-semibold);font-variant-numeric:tabular-nums}
.account-now-meta,.account-now-warning{display:block;margin-block-start:var(--space-4);font-size:var(--text-sm);color:var(--color-text-secondary)}
.account-now-warning{color:var(--color-feedback-warning-text);font-weight:var(--weight-medium)}
.account-now-untimed{display:block;margin-block-start:var(--space-4);font-size:var(--text-xs);color:var(--color-feedback-hold-text)}
.account-now[data-now=start_too_old] .account-now-meta{color:var(--color-feedback-hold-text)}

/* ------------------------------------- "วงเงินและยอดโอนรายบัญชี": the mockup's table ---- */
.account-rows{min-inline-size:0}
.board-accounts-table{inline-size:100%;min-inline-size:0;border-collapse:collapse;table-layout:fixed;font-size:var(--text-sm)}
.board-accounts-table th{padding:var(--space-12) var(--space-16);background:var(--color-surface-page);font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text-secondary);text-align:start;white-space:normal;border-block-end:1px solid var(--color-border-default)}
.board-accounts-table th.number{text-align:end}
.board-accounts-table th:first-child{inline-size:31%}
/* The mockup's proportions: the remaining figure at its step gets the widest figure column, so it never breaks. */
.board-accounts-table[data-columns="5"] th:nth-child(1){inline-size:24%}
.board-accounts-table[data-columns="5"] th:nth-child(2){inline-size:22%}
.board-accounts-table[data-columns="5"] th:nth-child(3){inline-size:17%}
.board-accounts-table[data-columns="5"] th:nth-child(4){inline-size:17%}
/* TICKET 272: six columns, the balance now before the recorded balance; the account keeps the widest share. */
.board-accounts-table[data-columns="6"] th:nth-child(1){inline-size:19%}
.board-accounts-table[data-columns="6"] th:nth-child(2){inline-size:18%}
.board-accounts-table[data-columns="6"] th:nth-child(3){inline-size:14%}
.board-accounts-table[data-columns="6"] th:nth-child(4){inline-size:13%}
.board-accounts-table[data-columns="6"] th:nth-child(5){inline-size:19%}
.board-accounts-table[data-columns="4"] th:nth-child(1){inline-size:30%}
.board-accounts-table[data-columns="4"] th:nth-child(2){inline-size:26%}
.board-accounts-table td{padding:var(--space-16);border-block-start:1px solid var(--color-border-default);vertical-align:middle;overflow-wrap:anywhere}
.board-accounts-table td.number{text-align:end}
.board-accounts-table tbody tr:first-child td{border-block-start:0}
.account-person{display:flex;align-items:center;gap:var(--space-10);min-inline-size:0}
/* TICKET 130: the mark is ticket 117's badge (bank-catalog.css); what is left here is this page's own size. */
.account-mark{min-inline-size:var(--size-36);block-size:var(--size-36);padding-inline:var(--space-4)}
.account-mark img,.account-mark svg{inline-size:var(--space-24);block-size:var(--space-24);object-fit:contain}
.account-mark-text{font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--color-text-secondary)}
.account-copy{display:flex;flex-direction:column;min-inline-size:0;flex:1 1 auto}
.account-name{font-weight:var(--weight-semibold);overflow-wrap:anywhere}
.account-number{font-size:var(--text-xs);color:var(--color-text-secondary)}
.account-digits{display:inline-block;max-inline-size:100%;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.account-value{display:inline-flex;align-items:baseline;justify-content:flex-end;min-height:var(--size-40);padding:var(--space-4) var(--space-8);margin-inline-end:calc(-1 * var(--space-8));background:transparent;border-color:transparent;color:var(--color-text-primary);text-align:end;white-space:normal}
.account-value:hover{background:var(--color-action-ghost-hover);border-color:transparent;color:var(--color-text-link)}
.account-value:active{background:var(--color-action-ghost-hover);border-color:transparent}
.account-amount{font-size:var(--text-xl);font-weight:var(--weight-medium);font-variant-numeric:tabular-nums}
.account-range-amount{font-size:var(--text-md)}
.account-meter{block-size:var(--space-4);margin-block:var(--space-8);border-radius:var(--radius-pill);background:var(--color-meter-track);overflow:hidden}
.account-meter>span{display:block;block-size:100%;inline-size:0;background:var(--color-action-primary)}
.account-under,.account-of{display:block;font-size:var(--text-xs);font-weight:var(--weight-regular);color:var(--color-text-secondary)}
.account-used strong{display:block;font-weight:var(--weight-semibold);font-variant-numeric:tabular-nums}
.account-recorded strong{display:block;font-weight:var(--weight-semibold);font-variant-numeric:tabular-nums}
.account-recorded-meta,.account-recorded-picture{display:block;margin-block-start:var(--space-4);font-size:var(--text-sm);color:var(--color-text-secondary)}
.account-recorded[data-recorded=earlier] .account-recorded-meta{color:var(--color-feedback-hold-text)}
.account-recorded-picture{display:inline-flex;align-items:center;gap:var(--space-4);font-size:var(--text-xs)}
.account-missing{color:var(--color-text-secondary);font-weight:var(--weight-regular)}
.account-row[data-day-state=over] .account-amount{color:var(--color-feedback-error-text)}
.account-row[data-day-state=over] .account-under{color:var(--color-feedback-error-text)}
.account-foot{display:flex;align-items:center;gap:var(--space-8);flex-wrap:wrap}
.account-foot .text-button{padding-inline:var(--space-4)}
.board-empty-note{margin:var(--space-20);font-size:var(--text-sm)}

/* --------------------------------------------------- today's slips: the mockup's strip --- */
.board-intake{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-8) var(--space-16);padding-block:var(--space-8)}
.board-counters{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-4) var(--space-12);min-inline-size:0}
.counter{display:inline-flex;align-items:baseline;gap:var(--space-4);min-inline-size:0;font-size:var(--text-sm);color:var(--color-text-secondary)}
.board-counters>.counter+.counter::before{content:'\00B7';margin-inline-end:var(--space-8);color:var(--color-text-secondary)}
/* TICKET 155 (SB-09): three of them are buttons. They keep the strip's look -- no fill, no outline -- and answer a
   pointer with the link colour; "สลิปต้องแก้ไข" is the mockup's link. */
.counter-button{min-height:var(--size-36);padding:var(--space-4);background:transparent;border:0;border-radius:var(--radius-control);color:var(--color-text-secondary);font-size:var(--text-sm);font-weight:var(--weight-regular);text-align:start;white-space:normal;cursor:pointer}
.counter-button:hover,.counter-button:active{background:var(--color-surface-selected);border-color:transparent}
.counter-button:hover .counter-value{color:var(--color-text-link)}
.counter-button:disabled{opacity:1;cursor:default;background:transparent}
.counter-label{font-size:inherit;color:inherit}
.counter-value{font-size:inherit;font-weight:var(--weight-regular);font-variant-numeric:tabular-nums;color:inherit}
.counter[data-counter=needs-a-fix]{color:var(--color-text-link);font-weight:var(--weight-medium)}
.counter[data-counter=needs-a-fix][data-count=some] .counter-value{color:var(--color-text-link);font-weight:var(--weight-semibold)}
.board-to-accounting{padding-inline:var(--space-4);font-size:var(--text-xs);font-weight:var(--weight-medium)}
.board-counter-split{margin:0;font-size:var(--text-xs);color:var(--color-text-secondary)}

/* ------------------------------------------------------------- the sender table -- */
/* TICKET 155 (SB-04) put the compact range select in this panel's heading. TICKET 210
   moved it to the top of the page (`.board-scope`, under the page heading), because the
   range is the whole page's now; the select keeps ticket 154's own look. */
.board-range{flex:0 1 auto;min-inline-size:0}
.board-range .date-range-select{max-inline-size:100%}
/* SB-03: the search, a full-width field with its icon inside the outline. */
.table-toolbar{display:flex;align-items:center;gap:var(--space-12);padding:0 var(--space-24) var(--space-20)}
.board-search{display:flex;flex:1 1 auto;flex-direction:row;align-items:center;gap:var(--space-8);min-inline-size:0;min-block-size:var(--size-44);padding:0 var(--space-12);border:1px solid var(--color-border-strong);border-radius:var(--radius-control);background:var(--color-surface-field);color:var(--color-text-secondary);font-weight:var(--weight-regular)}
.board-search:focus-within{outline:var(--space-2) solid var(--color-focus-ring);outline-offset:var(--space-2)}
.board-search .icon{flex:0 0 auto}
.board-search input{flex:1 1 auto;inline-size:100%;min-inline-size:0;min-height:var(--size-40);padding:0;border:0;background:transparent;color:var(--color-text-primary);font-size:var(--text-md)}
.board-search input:focus-visible{outline:0;box-shadow:none}
.board-search input::placeholder{color:var(--color-text-secondary)}
.quiet-note{flex:0 0 auto;font-size:var(--text-xs);color:var(--color-text-secondary)}
.table-container{max-inline-size:100%;overflow:auto}
/* app.css gives every table a 680px intrinsic minimum so a wide records table
   scrolls inside its own box rather than squeezing its data columns. This table
   is five short columns beside a queue, and it is the WHOLE panel: a sideways
   scroller here hides the amount, which is the one figure the row exists for. It
   shrinks instead, and at phone width it stops being a table at all. */
.sender-panel table{inline-size:100%;min-inline-size:0;border-collapse:collapse;table-layout:auto}
.sender-panel th,.sender-panel td{padding:var(--space-16) var(--space-12);text-align:start;border-block-end:1px solid var(--color-border-subtle);vertical-align:middle}
.sender-panel th:first-child,.sender-panel td:first-child{padding-inline-start:var(--space-24)}
.sender-panel th:last-child,.sender-panel td:last-child{padding-inline-end:var(--space-24)}
/* SB-15: the column names on one line, in the prototype's case and weight. The head sits
   on `surface.sunken`, which app.css gives every `thead`; `text.secondary` is 6.87:1 on it
   (scripts/contrast.py, ticket 110). */
.sender-panel th{padding-block:var(--space-12);font-size:var(--text-xs);font-weight:var(--weight-medium);color:var(--color-text-secondary);white-space:nowrap}
.th-unit{margin-inline-start:var(--space-4);font-weight:var(--weight-regular)}
.sender-panel .number{text-align:end;white-space:nowrap;font-variant-numeric:tabular-nums}
.sender-panel tbody tr{cursor:pointer}
.sender-panel tbody tr:hover{background:var(--color-surface-page)}
.sender-latest{white-space:nowrap;font-size:var(--text-sm);color:var(--color-text-secondary)}
.sender-open{inline-size:var(--size-36);color:var(--color-text-secondary);text-align:center}
.sender-open .icon{vertical-align:middle}
.person{display:flex;align-items:center;gap:var(--space-10);min-inline-size:0}
.person-copy{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2);min-inline-size:0}
.person-copy strong{font-size:var(--text-base);font-weight:var(--weight-medium);overflow-wrap:anywhere}
.person-id{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-text-secondary)}
.mobile-count{display:none;margin-inline-start:var(--space-4)}
/* SB-25: a quiet round mark, the prototype's, not the shell's profile colour. */
.sender-panel .avatar{inline-size:var(--size-36);block-size:var(--size-36);background:var(--color-surface-sunken);color:var(--color-text-secondary);border:1px solid var(--color-border-default);font-size:var(--text-sm);font-weight:var(--weight-semibold);font-variant-numeric:tabular-nums}
/* SB-15: a sender's problems are a chip under the name, not a column that wraps. */
.sender-problems{display:inline-flex;align-items:center;padding:0 var(--space-8);border-radius:var(--radius-pill);background:var(--color-feedback-warning-bg);color:var(--color-feedback-warning-text);font-size:var(--text-xs);font-weight:var(--weight-semibold);white-space:nowrap}
#operations-panel .money-button{min-height:var(--size-40);padding:var(--space-4) var(--space-8);background:transparent;border-color:transparent;color:var(--color-text-primary);font-size:var(--text-md);font-weight:var(--weight-semibold);font-variant-numeric:tabular-nums;white-space:nowrap}
#operations-panel .money-button:hover{background:var(--color-action-ghost-hover);border-color:transparent;color:var(--color-text-link);text-decoration:underline}
#operations-panel .money-button:active{background:var(--color-action-ghost-hover);border-color:transparent}
.sender-none{white-space:nowrap}
.sender-ungrouped{margin:0;padding:var(--space-12) var(--space-24);font-size:var(--text-sm);color:var(--color-feedback-warning-text);background:var(--color-feedback-warning-bg)}
.table-footer{display:flex;align-items:center;justify-content:space-between;gap:var(--space-12);flex-wrap:wrap;padding:var(--space-16) var(--space-24);border-block-start:1px solid var(--color-border-default);background:var(--color-surface-page);font-size:var(--text-xs);color:var(--color-text-secondary)}
.table-footer strong{font-size:var(--text-base);color:var(--color-text-primary);font-variant-numeric:tabular-nums}
.pager{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-12);flex-wrap:wrap;padding:var(--space-12) var(--space-24);font-size:var(--text-sm);color:var(--color-text-secondary)}
/* An empty state owns the space it is in rather than floating as one grey line. */
.empty-state{padding:var(--space-48) var(--space-24);text-align:center}
.empty-state-icon{inline-size:var(--size-24);block-size:var(--size-24);color:var(--color-text-secondary);margin-block-end:var(--space-16)}
.empty-state h3{margin:0 0 var(--space-8);font-size:var(--text-md);font-weight:var(--weight-semibold)}
.empty-state p{margin:0 auto var(--space-20);max-inline-size:52ch;font-size:var(--text-sm);color:var(--color-text-secondary)}
.empty-state p:last-child{margin-block-end:0}

/* ------------------------------------------------------------- the work queue ---- */
.queue-list{display:flex;flex-direction:column}
.queue-card{padding:var(--space-16) var(--space-24);border-block-start:1px solid var(--color-border-default);display:flex;flex-direction:column;gap:var(--space-6);min-inline-size:0}
.queue-card:first-child{border-block-start:0}
/* The one differentiator a long list needs, so the eye has somewhere to land: a card the
   system is handling by itself sits on the quiet surface and a person's work does not. */
.queue-card[data-kind=retrying]{background:var(--color-surface-sunken)}
.queue-card[data-kind=over_the_cap]{background:var(--color-feedback-warning-bg)}
.queue-top{display:flex;align-items:center;justify-content:space-between;gap:var(--space-8);flex-wrap:wrap}
.queue-age{font-size:var(--text-xs);color:var(--color-text-secondary);white-space:nowrap}
.queue-card h3{margin:0;font-size:var(--text-base);font-weight:var(--weight-medium);overflow-wrap:anywhere}
.queue-who{margin:0;font-size:var(--text-xs);color:var(--color-text-secondary);overflow-wrap:anywhere}
.queue-meta{display:flex;flex-wrap:wrap;gap:var(--space-4) var(--space-8);margin:0;font-size:var(--text-xs);color:var(--color-text-secondary)}
.queue-backlog{padding-inline:var(--space-8);border-radius:var(--radius-pill);background:var(--color-feedback-warning-bg);color:var(--color-feedback-warning-text);font-weight:var(--weight-semibold)}
/* TICKET 179 (C): the probable account a card names; data, so the primary text colour. */
.queue-probable{margin:0;font-size:var(--text-xs);color:var(--color-text-primary);overflow-wrap:anywhere}
.queue-counted,.queue-retrying{margin:0;font-size:var(--text-xs);color:var(--color-text-secondary)}
.queue-locked{margin:0;font-size:var(--text-xs);color:var(--color-text-secondary);font-style:italic}
/* SB-24: the card's actions share one left edge. A text button carries no inline padding
   inside a card, so "ตรวจบัญชีต้นทาง" (a button) and "ดูวิธีส่งรูปใหม่" (a summary) start
   where the words above them start. */
.queue-actions{display:flex;align-items:flex-start;gap:var(--space-4) var(--space-16);flex-wrap:wrap}
.queue-actions>*{min-inline-size:0}
.queue-card .text-button{padding-inline:0}
.queue-card .text-button:hover,.queue-card .text-button:active{background:transparent}
.queue-open{color:var(--color-text-secondary);font-weight:var(--weight-regular)}
.queue-open:hover{color:var(--color-text-link)}
/* TICKET 166: "Read again" is quiet, the same ink as the opener beside it -- it is not
   the card's own call to action, only a second thing an eligible card may do. */
.queue-reread{color:var(--color-text-secondary);font-weight:var(--weight-regular)}
.queue-reread:hover{color:var(--color-text-link)}
/* Closed, the guide is one action among the others on the row; open, it takes the row. */
.queue-guide{font-size:var(--text-sm);flex:0 1 auto}
.queue-guide[open]{flex:1 1 100%}
.queue-guide>summary{display:inline-flex;align-items:center;gap:var(--space-6);min-block-size:var(--size-36);cursor:pointer;color:var(--color-text-link);font-weight:var(--weight-semibold);list-style:none}
.queue-guide>summary::-webkit-details-marker{display:none}
.queue-guide>summary:hover{text-decoration:underline}
.queue-guide>summary:focus-visible{outline:var(--space-2) solid var(--color-focus-ring);outline-offset:var(--space-4)}
.queue-guide[open]>summary .icon{transform:rotate(90deg)}
/* SB-31: who acts, as the prototype's owner chip. */
.queue-owner-chip{display:inline-block;margin:var(--space-4) 0 var(--space-8);padding:var(--space-4) var(--space-10);border-radius:var(--radius-control);background:var(--color-surface-selected);color:var(--color-action-primary-hover);font-size:var(--text-xs);font-weight:var(--weight-medium)}
.queue-steps{margin:0;padding-inline-start:var(--space-20);font-size:var(--text-xs);line-height:var(--leading-relaxed);color:var(--color-text-secondary)}
.queue-steps li+li{margin-block-start:var(--space-4)}
.queue-reply-toggle{margin-block-start:var(--space-4);font-size:var(--text-xs)}
.queue-reply{margin-block-start:var(--space-4);padding:var(--space-12);border-radius:var(--radius-control);background:var(--color-surface-sunken)}
.queue-reply-note{margin:0 0 var(--space-6);font-size:var(--text-xs);color:var(--color-text-secondary)}
.queue-reply-text{margin:0;font-size:var(--text-sm);line-height:var(--leading-normal);color:var(--color-text-primary);overflow-wrap:anywhere}
.queue-guide-note{margin:var(--space-6) 0 0;font-size:var(--text-xs);color:var(--color-text-caption)}
.queue-more{display:flex;align-items:center;justify-content:space-between;gap:var(--space-12);flex-wrap:wrap;padding:var(--space-12) var(--space-24);border-block-start:1px solid var(--color-border-default);font-size:var(--text-xs);color:var(--color-text-secondary)}
.queue-foot{display:flex;align-items:center;gap:var(--space-8);margin:0;max-inline-size:none;padding:var(--space-12) var(--space-24);background:var(--color-surface-page);border-block-start:1px solid var(--color-border-default);font-size:var(--text-xs);color:var(--color-text-secondary)}

/* ------------------------------------- taking a card off the board (ticket 111) --- */
/* The control is the quietest thing on the card: it is never the move the card is
   about, and it carries no fill. Caption ink at rest, the link colour on hover, so it is
   legible without competing with the call to action beside it. The confirmation it opens
   is where the destructive colour lives (SB-11). */
.queue-remove{color:var(--color-text-secondary);font-weight:var(--weight-regular);margin-inline-start:auto}
.queue-remove:hover{color:var(--color-text-link)}

/* ---------------------------------------------- the cards that were taken off ---- */
/* It sits under the queue's own foot, so the count above it is the work still on the
   board and this one is what came off it; the two figures are never added together. */
.queue-hidden{border-block-start:1px solid var(--color-border-default);background:var(--color-surface-page);font-size:var(--text-xs);color:var(--color-text-secondary)}
.queue-hidden>summary{display:flex;align-items:center;gap:var(--space-8);min-block-size:var(--size-36);padding:var(--space-12) var(--space-24);cursor:pointer;color:var(--color-text-link);font-size:var(--text-sm);font-weight:var(--weight-semibold);list-style:none}
.queue-hidden>summary::-webkit-details-marker{display:none}
.queue-hidden>summary>span{flex:1 1 auto;min-inline-size:0}
.queue-hidden>summary:hover{text-decoration:underline}
.queue-hidden>summary:focus-visible{outline:var(--space-2) solid var(--color-focus-ring);outline-offset:calc(var(--space-2) * -1)}
.queue-hidden[open]>summary .icon:last-child{transform:rotate(90deg)}
.queue-hidden-note{margin:0;padding:0 var(--space-24) var(--space-12);max-inline-size:52ch}
.queue-hidden-list{display:flex;flex-direction:column}
.queue-hidden-row{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-12);flex-wrap:wrap;padding:var(--space-12) var(--space-24);border-block-start:1px solid var(--color-border-subtle)}
.queue-hidden-copy{display:flex;flex-direction:column;gap:var(--space-2);flex:1 1 14ch;min-inline-size:0}
.queue-hidden-copy strong{font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text-primary);overflow-wrap:anywhere}
.queue-hidden-who,.queue-hidden-why,.queue-hidden-meta{margin:0;overflow-wrap:anywhere}
.queue-restore{flex:0 0 auto;min-height:var(--size-36);display:inline-flex;align-items:center;gap:var(--space-6)}
.queue-hidden-more{margin:0;padding:var(--space-12) var(--space-24);border-block-start:1px solid var(--color-border-subtle)}

/* A text button: the quiet action, never a coloured fill (the kit's intent rule keeps a
   filled action for the one main affirmative thing on a screen, and this page's is none
   of these). Shared on purpose: the transactions list and the detail view draw theirs
   with this rule (tickets 107, 114), so it is not scoped to this page. */
.text-button{display:inline-flex;align-items:center;gap:var(--space-6);min-height:var(--size-36);padding:var(--space-4) var(--space-8);background:transparent;border-color:transparent;color:var(--color-text-link);font-size:var(--text-sm);font-weight:var(--weight-semibold);white-space:normal;text-align:start}
.text-button:hover{background:var(--color-action-ghost-hover);border-color:transparent;text-decoration:underline}
.text-button:active{background:var(--color-action-ghost-hover);border-color:transparent}
.text-button:disabled{background:transparent;border-color:transparent}

/* The badge tones. The colour is never the only carrier: the badge is words, and the
   next step under it says the same thing in a sentence. TICKET 155: this page's badges
   only; the unscoped `.badge` rule made every other page's badges wrap (ticket 158). */
#operations-panel .badge[data-tone=error]{background:var(--color-feedback-error-bg);color:var(--color-feedback-error-text)}
#operations-panel .badge[data-tone=warning]{background:var(--color-badge-review-bg);color:var(--color-badge-review-text)}
#operations-panel .badge[data-tone=success]{background:var(--color-feedback-success-bg);color:var(--color-feedback-success-text)}
#operations-panel .badge[data-tone=neutral]{background:var(--color-surface-sunken);color:var(--color-badge-pending-text)}
#operations-panel .badge{white-space:normal;block-size:auto;padding-block:var(--space-2)}


/* -------------------------------------------------------- where the page ends ---- */
/* The slips being read, and (TICKET 267) the two counts the mockup's strip has no place for, with the basis and the
   parts of "กำลังอ่าน" under them. */
.board-reading{display:flex;flex-direction:column;gap:var(--space-12);padding:var(--space-16) var(--space-20);background:var(--color-surface-card);border:1px dashed var(--color-border-strong);border-radius:var(--radius-frame)}
.board-reading[data-reading=true]{border-style:solid;border-color:var(--color-action-primary)}
.board-reading-head{display:flex;align-items:center;gap:var(--space-16)}
.reading-mark{display:inline-flex;align-items:center;justify-content:center;inline-size:var(--size-36);block-size:var(--size-36);flex:0 0 auto;border-radius:var(--radius-control);background:var(--color-surface-sunken);color:var(--color-text-secondary)}
.reading-copy{display:flex;flex-direction:column;min-inline-size:0}
.reading-copy strong{font-weight:var(--weight-medium)}
.reading-copy small{font-size:var(--text-xs);color:var(--color-text-secondary)}
.board-counters-more{padding-inline-start:calc(var(--size-36) + var(--space-16))}
.board-reading-basis{display:flex;flex-wrap:wrap;gap:var(--space-4) var(--space-16);margin:0;padding-inline-start:calc(var(--size-36) + var(--space-16));max-inline-size:none;font-size:var(--text-xs);color:var(--color-text-secondary)}

/* ------------------------------------------------------------ the two dialogs ---- */
/* TICKET 155 (SB-02, SB-05..SB-07, SB-09, SB-11). Native modal <dialog>s in the
   prototype's modal shape: a header with the title and a close mark, a body that
   scrolls, a footer with the way out. Twelve 64-step columns wide at most, the
   prototype's own measure; a sheet over the whole screen on a phone. */
.board-dialog{inline-size:min(calc(100vw - var(--space-48)),calc(var(--space-64) * 12));max-inline-size:none;max-block-size:calc(100vh - var(--space-48));padding:0;border:1px solid var(--color-border-strong);border-radius:var(--radius-card);background:var(--color-surface-card);color:var(--color-text-primary);overflow:hidden}
.board-dialog-narrow{inline-size:min(calc(100vw - var(--space-48)),calc(var(--space-64) * 8))}
/* The hero's total lists six columns (the sender AND the account), two more than the
   prototype's four, so its dialog is two 64-steps wider than the others. */
.board-dialog[data-kind=total]{inline-size:min(calc(100vw - var(--space-48)),calc(var(--space-64) * 14))}
.board-dialog[open]{display:flex;flex-direction:column}
.board-dialog::backdrop{background:var(--color-text-primary);opacity:var(--opacity-disabled)}
.board-dialog-frame{display:flex;flex-direction:column;flex:1 1 auto;min-block-size:0}
.board-dialog-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-16);padding:var(--space-20) var(--space-24);border-block-end:1px solid var(--color-border-default)}
.board-dialog-head h2{margin:0;min-inline-size:0;font-size:var(--text-lg);font-weight:var(--weight-semibold);line-height:var(--leading-normal);overflow-wrap:anywhere}
.board-dialog-head h2:focus-visible{outline:var(--space-2) solid var(--color-focus-ring);outline-offset:var(--space-4)}
.board-dialog-x{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-inline-size:var(--size-44);min-height:var(--size-44);padding:0;background:transparent;border-color:transparent;color:var(--color-text-secondary)}
.board-dialog-x:hover,.board-dialog-x:active{background:var(--color-action-ghost-hover);border-color:transparent;color:var(--color-text-primary)}
.board-dialog-body{display:flex;flex-direction:column;gap:var(--space-12);flex:1 1 auto;min-block-size:0;overflow:auto;padding:var(--space-24)}
.board-dialog-body>*{flex:0 0 auto}
.board-dialog-note{margin:0;max-inline-size:none;font-size:var(--text-sm);color:var(--color-text-secondary);overflow-wrap:anywhere}
.board-dialog-extra{margin:0;max-inline-size:none;font-size:var(--text-sm);color:var(--color-feedback-warning-text);overflow-wrap:anywhere}
/* The figure the list proves, at the display step: the one thing that leads here too. */
.board-dialog-total{color:var(--color-text-primary);display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--space-4) var(--space-8);margin:var(--space-4) 0 var(--space-8)}
.board-dialog-figure{font-size:var(--text-display-sm);font-weight:var(--weight-medium);line-height:var(--leading-tight);letter-spacing:-0.03em;font-variant-numeric:tabular-nums;white-space:nowrap}
.board-dialog-unit{font-size:var(--text-base)}
.board-dialog-total small{flex:0 0 100%;font-size:var(--text-sm);color:var(--color-text-secondary)}
.board-dialog-status-row{display:flex;align-items:center;gap:var(--space-12);flex-wrap:wrap}
.board-dialog-status{margin:0;flex:1 1 auto;min-inline-size:0;font-size:var(--text-sm);color:var(--color-text-secondary)}
.board-dialog[aria-busy=true] .board-dialog-table{opacity:var(--opacity-disabled)}
/* The cue is drawn whenever the table is wider than its box (page-board.js measures it),
   at any width: a sideways scroller nobody can see is a column nobody reads. */
.board-dialog-cue{margin:0;font-size:var(--text-xs);color:var(--color-text-secondary)}
.board-dialog-table{overflow:auto;border:1px solid var(--color-border-default);border-radius:var(--radius-card)}
.board-dialog-table:empty{display:none}
.board-dialog-table table{inline-size:100%;min-inline-size:0;border-collapse:collapse}
.board-dialog-table th,.board-dialog-table td{padding:var(--space-10);font-size:var(--text-sm);text-align:start;vertical-align:top;border-block-end:1px solid var(--color-border-subtle)}
.board-dialog-table th{font-size:var(--text-xs);font-weight:var(--weight-medium);color:var(--color-text-secondary);white-space:nowrap}
.board-dialog-table tr:last-child td{border-block-end:0}
.board-dialog-table .number{text-align:end;white-space:nowrap;font-variant-numeric:tabular-nums}
.board-dialog-table td small{display:block;margin-block-start:var(--space-2);font-size:var(--text-xs);color:var(--color-text-secondary)}
.board-dialog-when time{font-variant-numeric:tabular-nums;white-space:nowrap}
.board-dialog-unknown{color:var(--color-text-secondary)}
.board-dialog-who small{white-space:nowrap}
.board-dialog-open-cell{inline-size:1%;white-space:nowrap}
.board-dialog-open{white-space:nowrap}
#operations-panel .board-dialog-table .badge{white-space:nowrap}
.board-dialog .text-button{padding-inline:0;min-height:var(--size-36)}
.board-dialog .text-button:hover,.board-dialog .text-button:active{background:transparent}
.board-dialog-empty{text-align:center;color:var(--color-text-secondary)}
.board-dialog-pager{display:flex;align-items:center;gap:var(--space-8);flex-wrap:wrap}
.board-dialog-pager p{flex:1 1 var(--size-150);margin:0;font-size:var(--text-xs);color:var(--color-text-secondary)}
.board-dialog-excluded{padding:var(--space-16);border-radius:var(--radius-control);background:var(--color-surface-sunken);font-size:var(--text-sm)}
.board-dialog-excluded p{margin:0}
.board-dialog-excluded ul{margin:var(--space-4) 0 0;padding-inline-start:var(--space-20)}
.board-dialog-foot{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-12);flex-wrap:wrap;padding:var(--space-16) var(--space-24);border-block-start:1px solid var(--color-border-default);background:var(--color-surface-page)}
/* The remove confirmation. */
.board-remove-card{margin:0;font-size:var(--text-md);font-weight:var(--weight-semibold);overflow-wrap:anywhere}
.board-remove-who{margin:0;font-size:var(--text-sm);color:var(--color-text-secondary);overflow-wrap:anywhere}
/* `app.css` makes every label a 210-pixel flex item; inside a column that is a basis in
   the wrong axis, so the field is as tall as its words and its input and no taller. */
.board-remove-field{display:flex;flex:0 0 auto;flex-direction:column;gap:var(--space-6);font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text-secondary)}
.board-remove-field input{inline-size:100%;min-inline-size:0;font-size:var(--text-md);color:var(--color-text-primary)}
.board-remove-error{margin:0;padding:var(--space-12);border-radius:var(--radius-control);background:var(--color-feedback-error-bg);color:var(--color-feedback-error-text);font-size:var(--text-sm)}


/* ----------------------------------------------------------------- narrow width -- */
/* The four defences the kit names: every grid track is minmax(0,1fr), every flex item
   declares min-inline-size:0, an unbreakable account number wraps with
   overflow-wrap:anywhere, and nothing has a fixed pixel width that cannot shrink. */
@media (max-width:1200px){
  /* The prototype's 1200 step: the aside notes go, the table's padding tightens. */
  .quiet-note{display:none}
  .section-heading{padding-inline:var(--space-20)}
  .table-toolbar{padding-inline:var(--space-20)}
  .sender-panel th,.sender-panel td{padding-inline:var(--space-8)}
  .sender-panel th:first-child,.sender-panel td:first-child{padding-inline-start:var(--space-16)}
  .sender-panel th:last-child,.sender-panel td:last-child{padding-inline-end:var(--space-16)}
  .board-accounts-table th,.board-accounts-table td{padding-inline:var(--space-12)}
  .account-amount{font-size:var(--text-lg)}
}
@media (min-width:1101px) and (max-width:1200px){
  .sender-panel .avatar{display:none}
}
@media (max-width:1100px){
  .board-grid{grid-template-columns:minmax(0,1fr)}
  .sender-panel,.queue-panel,.board-orphans,.board-close{grid-column:1}
  .board-finance{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
  .allowance-hero,.board-recorded{padding:var(--space-20)}
}
@media (max-width:820px){
  .board-finance{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:700px){
  .allowance-hero{padding:var(--space-20)}
  .hero-number{font-size:clamp(var(--text-xl),11cqi,var(--text-display-sm))}
  .board-intake{flex-direction:column;align-items:flex-start}
  /* The accounts as one card per account at a phone's width, each figure under its own label (the mockup's). */
  .board-accounts-table thead{display:none}
  .board-accounts-table,.board-accounts-table tbody{display:block}
  .board-accounts-table tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-16);padding:var(--space-20);border-block-start:1px solid var(--color-border-default)}
  .board-accounts-table tbody tr:first-child{border-block-start:0}
  .board-accounts-table td{display:block;padding:0;border:0;text-align:start}
  .board-accounts-table td.number{text-align:start}
  .board-accounts-table td:first-child{grid-column:1 / -1}
  .board-accounts-table td[data-label]::before{content:attr(data-label);display:block;margin-block-end:var(--space-8);font-size:var(--text-xs);color:var(--color-text-secondary)}
  .board-accounts-table td.account-range,.board-accounts-table td.account-recorded{grid-column:1 / -1}
  .board-accounts-table td.account-now{grid-column:1 / -1}                                    /* TICKET 272 */
  .account-value{justify-content:flex-start;margin-inline:calc(-1 * var(--space-8)) 0}
  .board-card-head{align-items:flex-start;padding:var(--space-16)}
  .table-footer,.queue-card,.queue-more,.queue-foot,.pager,.sender-ungrouped{padding-inline:var(--space-16)}
  .section-heading{flex-wrap:wrap;padding:var(--space-16)}
  /* TICKET 210: on a phone the range takes its own row and the line goes under it. One line, not a wrapping one: a
     wrapping column's line is as wide as its widest item, so the custom field's stated width spilled past a 280 px
     screen (measured). */
  .board-scope{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:var(--space-4)}
  .board-scope .board-range-help{text-align:start}
  .table-toolbar{padding-inline:var(--space-16)}
  /* TICKET 111: the same phone-width gutter as everything else in this panel. */
  .queue-hidden>summary,.queue-hidden-note,.queue-hidden-row,.queue-hidden-more{padding-inline:var(--space-16)}
  .queue-restore{inline-size:100%;justify-content:center}
  /* SB-16: a sender is a summary row on a phone. */
  .sender-panel thead{display:none}
  .sender-panel tbody{display:block}
  .sender-panel tr{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-8);padding:var(--space-16);border-block-start:1px solid var(--color-border-default)}
  .sender-panel tr:first-child{border-block-start:0}
  .sender-panel td,.sender-panel td:first-child,.sender-panel td:last-child{display:block;padding:0;border:0}
  .sender-panel td.sender-who{flex:0 0 100%}
  .sender-panel td.sender-count{display:none}
  .sender-panel td.sender-amount{margin-inline-end:auto;text-align:start}
  .sender-panel td.sender-open{inline-size:auto}
  #operations-panel .sender-panel .money-button{padding-inline:0;font-size:var(--text-lg)}
  .mobile-count{display:inline}
  .board-counters-more,.board-reading-basis{padding-inline-start:0}
  /* A dialog is a sheet over the whole screen. Its table keeps its columns and scrolls
     sideways inside its own box, and the line above it says so (the prototype's cue). */
  .board-dialog,.board-dialog-narrow,.board-dialog[data-kind=total]{inline-size:100vw;max-inline-size:100vw;block-size:100vh;max-block-size:100vh;margin:0;border:0;border-radius:0}
  .board-dialog-head{padding:var(--space-16) var(--space-20)}
  .board-dialog-body{padding:var(--space-20)}
  .board-dialog-foot{padding:var(--space-12) var(--space-20)}
  .board-dialog-foot button{flex:1 1 auto}
  .board-dialog-figure{font-size:var(--text-xxl)}
  .board-dialog-table table{inline-size:max-content;min-inline-size:100%}
  .board-dialog-table th,.board-dialog-table td{white-space:nowrap}
  body:has(#operations-panel .board-dialog[open]){visibility:hidden}
  body:has(#operations-panel .board-dialog[open]) dialog[open],
  body:has(#operations-panel .board-dialog[open]) #live-region,
  body:has(#operations-panel .board-dialog[open]) #message{visibility:visible}
}
@media (max-width:380px){
  .board-accounts-table tr{padding:var(--space-16);gap:var(--space-12)}
  .account-amount{font-size:var(--text-md)}
  .counter-label{overflow-wrap:anywhere}
}
@media (prefers-reduced-motion:reduce){
  .queue-guide[open]>summary .icon,.queue-hidden[open]>summary .icon:last-child{transition:none}
}

/* --- TICKET 227: the withdrawal review's card; TICKET 267: the accounting view's hero ----------------------------
   The mockup's "งานบัญชีที่ควรทำต่อ": the count of withdrawals waiting for a person at the display step with its
   money line and the one step to them, a primary bar along its start; beside it the file's results as one bar of the
   summary's four buckets with its legend; the file, its badge and the way to the results at its foot. */
.board-withdrawals{position:relative;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:var(--space-20) var(--space-32);align-items:center;padding:var(--space-28)}
.board-withdrawals::before{content:'';position:absolute;inset-block:var(--space-24);inset-inline-start:0;inline-size:var(--space-4);border-radius:var(--radius-pill);background:var(--color-action-primary)}
.board-withdrawals-lead{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-8);min-inline-size:0}
.board-withdrawals-eyebrow{display:flex;align-items:center;gap:var(--space-8);margin:0 0 var(--space-4);color:var(--color-text-link);font-size:var(--text-xs);font-weight:var(--weight-semibold)}
.board-withdrawals-figures{margin:0}
.board-withdrawals-count{display:flex;align-items:baseline;gap:var(--space-12)}
.board-withdrawals-number{font-size:var(--text-display);font-weight:var(--weight-semibold);line-height:var(--leading-none);letter-spacing:-0.045em;font-variant-numeric:tabular-nums;color:var(--color-text-primary)}
.board-withdrawals-words span{display:block}
.board-withdrawals-words{margin:0;font-size:var(--text-xl);font-weight:var(--weight-semibold);line-height:var(--leading-snug)}
.board-withdrawals-none{margin:0;font-size:var(--text-xl);font-weight:var(--weight-semibold)}
.board-withdrawals-money{margin:0;font-size:var(--text-sm);color:var(--color-text-secondary);max-inline-size:none}
.board-withdrawals-review{display:inline-flex;align-items:center;gap:var(--space-8);margin-block-start:var(--space-12)}
.board-withdrawals-status{display:grid;gap:var(--space-16);align-content:center;min-inline-size:0}
.board-withdrawals-status-top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--space-8);font-size:var(--text-xs);color:var(--color-text-secondary)}
.board-withdrawals-status-top>span:first-child{color:var(--color-text-secondary)}
.board-withdrawals-track{display:flex;gap:var(--space-2);block-size:var(--space-14);border-radius:var(--radius-control);overflow:hidden;background:var(--color-surface-sunken)}
.board-withdrawals-segment{flex:1 1 0;min-inline-size:var(--space-2);background:var(--color-meter-track)}
.board-withdrawals-segment[data-part=confirmed],.board-withdrawals-legend [data-part=confirmed] .board-withdrawals-swatch{background:var(--color-action-primary)}
.board-withdrawals-segment[data-part=unresolved],.board-withdrawals-legend [data-part=unresolved] .board-withdrawals-swatch{background:var(--color-feedback-warning-text)}
.board-withdrawals-segment[data-part=waiting],.board-withdrawals-legend [data-part=waiting] .board-withdrawals-swatch{background:var(--color-badge-processing-text)}
.board-withdrawals-segment[data-part=not_paid],.board-withdrawals-legend [data-part=not_paid] .board-withdrawals-swatch{background:var(--color-text-tertiary)}
/* TICKET 271: the fifth bucket, a withdrawal a person settled with no slip. */
.board-withdrawals-segment[data-part=settled_no_slip],.board-withdrawals-legend [data-part=settled_no_slip] .board-withdrawals-swatch{background:var(--color-feedback-hold-text)}
.board-withdrawals-legend{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-8) var(--space-12);margin:0;padding:0;list-style:none}
.board-withdrawals-legend li{display:flex;align-items:center;gap:var(--space-8);min-block-size:var(--size-24);font-size:var(--text-xs);color:var(--color-text-secondary)}
.board-withdrawals-legend strong{color:var(--color-text-primary);font-weight:var(--weight-semibold)}
.board-withdrawals-amounts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-8) var(--space-12);margin:0;padding-block-start:var(--space-12);border-block-start:1px solid var(--color-border-default)}
.board-withdrawals-amounts>div{min-inline-size:0}
.board-withdrawals-amounts dt{font-size:var(--text-xs);color:var(--color-text-secondary)}
.board-withdrawals-amounts dd{margin:var(--space-2) 0 0;font-size:var(--text-sm);font-weight:var(--weight-semibold);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.board-withdrawals-amounts small{display:block;font-size:var(--text-xs);color:var(--color-text-secondary)}
.board-withdrawals-swatch{inline-size:var(--space-8);block-size:var(--space-8);flex:0 0 auto;border-radius:var(--radius-pill);background:var(--color-meter-track)}
.board-withdrawals-foot{grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-8) var(--space-16);padding-block-start:var(--space-16);border-block-start:1px solid var(--color-border-default)}
.board-withdrawals-filebox{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-8);margin:0;min-inline-size:0;max-inline-size:none}
.board-withdrawals-file{font-size:var(--text-xs);color:var(--color-text-secondary);overflow-wrap:anywhere}
.board-withdrawals .badge{flex:0 0 auto;white-space:normal;block-size:auto;min-block-size:var(--space-20);padding-block:var(--space-2);line-height:var(--leading-normal)}
.board-withdrawals-note{flex:1 1 var(--size-280);min-inline-size:0;margin:0;max-inline-size:none;font-size:var(--text-xs);color:var(--color-text-secondary)}
.board-withdrawals[data-review-state=error] .board-withdrawals-note{color:var(--color-feedback-error-text)}
.board-withdrawals-foot .text-button{flex:0 0 auto;font-size:var(--text-xs)}
.board-withdrawals[data-review-state=none],.board-withdrawals[data-review-state=error]{grid-template-columns:minmax(0,1fr)}

/* --- TICKET UX-PR (the production review's F02): "ภาพรวมวันนี้" and "งานบัญชี"; TICKET 267: and "งานต้องแก้ไข" ---- */
.board-tabs{margin-block:calc(-1 * var(--space-8)) var(--space-24)}
#operations-panel[data-board-view=accounting] :is(.board-scope,.board-finance,.board-accounts-card,.board-intake,.sender-panel,.queue-panel,.board-reading){display:none}
#operations-panel:not([data-board-view=accounting]) :is(#board-withdrawals,#board-orphans,#board-close,#board-checks){display:none}
#operations-panel[data-board-view=queue] :is(.board-scope,.board-finance,.board-accounts-card,.board-intake,.sender-panel,.board-reading){display:none}
#operations-panel[data-board-view=queue] .queue-panel{grid-column:1 / -1}
#operations-panel[data-board-view=queue] .queue-panel .section-heading :is(.eyebrow,.section-description){display:none}
.board-acc-card{display:flex;flex-direction:column;gap:var(--space-16);padding:var(--space-20)}
.board-acc-head{display:flex;align-items:center;gap:var(--space-12)}
.board-acc-chip{display:grid;place-items:center;inline-size:var(--size-40);block-size:var(--size-40);flex:0 0 auto;border-radius:var(--radius-card);background:var(--color-surface-sunken);color:var(--color-text-secondary)}
.board-acc-titles{min-inline-size:0}
.board-acc-head h2{margin:0;font-size:var(--text-md);font-weight:var(--weight-semibold)}
.board-acc-note{margin:var(--space-2) 0 0;max-width:none;font-size:var(--text-xs);color:var(--color-text-secondary)}
.board-acc-empty{margin:0;font-size:var(--text-sm);color:var(--color-text-secondary)}
.board-acc-pad{padding:var(--space-20)}
.board-acc-figure{display:flex;align-items:baseline;gap:var(--space-8);margin:0;color:var(--color-text-secondary)}
.board-acc-figure strong{font-size:var(--text-xxl);font-weight:var(--weight-semibold);line-height:var(--leading-tight);letter-spacing:-0.025em;font-variant-numeric:tabular-nums;color:var(--color-text-primary)}
.board-acc-go{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-8);align-self:flex-start}
.board-close{gap:var(--space-20);padding:var(--space-24)}
.board-close-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-16);align-items:center}
.board-close-copy{min-inline-size:0}
.board-close-label{margin:0;font-size:var(--text-xs);color:var(--color-text-secondary)}
.board-close-headline{margin:var(--space-4) 0 0;font-size:var(--text-lg);font-weight:var(--weight-semibold);line-height:var(--leading-normal)}
.board-close-go{align-self:stretch}
/* The readiness ring: one arc per condition the server answered, a passed one in the primary colour. */
.board-ring{position:relative;display:grid;place-items:center;inline-size:var(--size-150);block-size:var(--size-150);flex:0 0 auto}
.board-ring-svg{position:absolute;inset:0;inline-size:100%;block-size:100%;overflow:visible}
.board-ring-svg circle{fill:none;stroke:var(--color-meter-track);stroke-width:8;stroke-linecap:round}
.board-ring-svg circle[data-pass=true]{stroke:var(--color-action-primary)}
.board-ring-centre{display:grid;gap:var(--space-4);text-align:center}
.board-ring-centre strong{font-size:var(--text-xl);font-weight:var(--weight-semibold);line-height:var(--leading-none);letter-spacing:-0.03em;font-variant-numeric:tabular-nums;color:var(--color-text-primary)}
.board-ring-centre strong span{font-size:var(--text-xs);font-weight:var(--weight-regular);color:var(--color-text-secondary);letter-spacing:normal}
.board-ring-centre>span{font-size:var(--text-xs);color:var(--color-text-secondary)}
.board-checks{gap:0;padding:0}
.board-acc-link{display:inline-flex;align-items:center;gap:var(--space-8);min-height:var(--size-44);font-size:var(--text-xs);font-weight:var(--weight-medium)}
.board-acc-table-wrap{max-inline-size:100%;overflow-x:auto}
.board-acc-table{inline-size:100%;border-collapse:collapse;font-size:var(--text-sm)}
.board-acc-table th{padding:var(--space-12) var(--space-16);background:var(--color-surface-page);text-align:start;font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text-secondary);border-block-end:1px solid var(--color-border-default)}
.board-acc-table td{padding:var(--space-16);vertical-align:middle;border-block-start:1px solid var(--color-border-default)}
.board-acc-table tbody tr:first-child td{border-block-start:0}
.board-acc-table .number{text-align:end;font-variant-numeric:tabular-nums;white-space:nowrap}
/* The account's cell stays a table cell (a grid cell drops its row's rule); its lines stack inside it. */
.board-acc-who>*{display:block}
.board-acc-who small{margin-block-start:var(--space-2);color:var(--color-text-secondary)}
.board-acc-who>.badge{display:inline-flex;margin-block-start:var(--space-6)}
.board-acc-label{display:none}
.board-acc-missing{color:var(--color-text-primary)}
@media (max-width:1100px){
  .board-close-top{grid-template-columns:minmax(0,1fr)}
  .board-ring{justify-self:start}
}
@media (max-width:820px){
  .board-withdrawals{grid-template-columns:minmax(0,1fr);gap:var(--space-20)}
}
@media (max-width:700px){
  .board-withdrawals{padding:var(--space-20)}
  .board-withdrawals-number{font-size:var(--text-display-sm)}
  .board-withdrawals-review{align-self:stretch;justify-content:center}
  .board-withdrawals-legend li{min-block-size:var(--size-44)}
  .board-withdrawals-foot .text-button{inline-size:100%;justify-content:space-between;padding-inline:0}
  .board-acc-card{padding:var(--space-16)}
  .board-close-top{grid-template-columns:minmax(0,1fr) auto}
  .board-ring{justify-self:end}
  .board-acc-go{align-self:stretch}
  /* The balances as one card per account at a phone's width. */
  .board-acc-table thead{display:none}
  .board-acc-table,.board-acc-table tbody,.board-acc-table tr,.board-acc-table td{display:block}
  .board-acc-table{min-inline-size:0}   /* app.css's table minimum would push the figures out of the card */
  .board-acc-table tr{padding:var(--space-12) var(--space-16);border-block-start:1px solid var(--color-border-default)}
  .board-acc-table td{display:flex;justify-content:space-between;gap:var(--space-12);padding:var(--space-4) 0;border:0}
  .board-acc-table td.board-acc-who{display:grid}
  .board-acc-label{display:inline;color:var(--color-text-secondary)}
}
@media (max-width:380px){
  .board-close-top{grid-template-columns:minmax(0,1fr)}
  .board-ring{justify-self:center}
}