/* The all-accounts page (lean-rollout ticket 121). Every colour, size, radius, weight and
   duration below is a token from finance_app/static/tokens.css, generated from
   tokens/moneyos.json; this sheet defines none of its own and contains no literal.

   Everything is scoped to #accounts-panel or to a class this page owns, because three
   other pages are being built against the same shell this week and a rule that reaches
   outside this panel would land on one of them. TICKET 130: the bank renderer's own
   classes (.bank-account and friends, finance_app/static/bank-catalog.js, ticket 117)
   were the one deliberate exception -- they had no stylesheet anywhere in the product,
   so this file styled them scoped to this panel until a shared sheet owned them.
   finance_app/static/bank-catalog.css is that sheet now, and what is left here is
   overrides, marked as overrides.

   TICKET 158: the page matches design A. The composition the page is in is
   `#accounts-panel[data-layout]` (page-accounts.js `layoutOf`): `full`, `compact` (one
   or two accounts: no toolbar, no pager), `single` (one account, one card), `empty` (no
   account) and `pending` (nothing read yet). Which parts are on screen is the `hidden`
   attribute, set by the script; how they are drawn is here. Below tablet width (767.98
   and narrower) every row is a summary row instead of a table row. */

/* --- The page, and the summary that leads it. ---------------------------------------
   One thing leads: the remaining allowance across the whole filter is set at the display
   step over the body step (--text-display-sm over --text-base), and everything else on
   the page is quieter than it.
   TICKET 158 (SI-17): the prototype's order -- the figure, then the count beside it
   behind a divider, then the action at the far end -- rather than the count pushed over
   to the button. The count is set at the figure's own step, as the prototype sets it. */
#accounts-panel{display:flex;flex-direction:column;gap:var(--space-16)}
.accounts-summary{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-16) var(--space-32);
  margin:0;padding:var(--space-24) var(--space-28);background:var(--color-surface-card);
  border:1px solid var(--color-border-default);border-radius:var(--radius-card-lg);box-shadow:var(--shadow-sm)}
.accounts-summary-lead{flex:0 1 auto;min-inline-size:0;display:flex;flex-direction:column;gap:var(--space-8)}
.accounts-summary-figure{margin:0;display:flex;align-items:baseline;gap:var(--space-8);flex-wrap:wrap;
  color:var(--color-text-primary);font-size:var(--text-display-sm);font-weight:var(--weight-semibold);
  line-height:var(--leading-snug);letter-spacing:-0.02em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.accounts-summary-unit{font-size:var(--text-base);font-weight:var(--weight-regular);letter-spacing:normal;color:var(--color-text-secondary)}
.accounts-summary-count{margin:0;display:flex;flex-direction:column;justify-content:center;gap:var(--space-4);
  min-inline-size:0;align-self:stretch;padding-inline-start:var(--space-32);border-inline-start:1px solid var(--color-border-default)}
.accounts-summary-count strong{font-size:var(--text-display-sm);font-weight:var(--weight-semibold);line-height:var(--leading-snug);
  font-variant-numeric:tabular-nums}
.accounts-summary-count span{font-size:var(--text-sm);color:var(--color-text-secondary)}
.accounts-summary-actions{display:flex;gap:var(--space-8);flex-wrap:wrap;margin-inline-start:auto}
/* The caveat line: only money spent past a limit and accounts the figure leaves out,
   and only when there is one (page-accounts.js `paintSummary`). */
.accounts-summary-note{flex:1 1 100%;margin:0;font-size:var(--text-sm);color:var(--color-text-secondary)}

/* --- Freshness. Five states, and the words carry each one; the colour only supports it.
   `loading`, `partial`, `stale` and `error` all keep the retry or the caveat visible, and
   only `ready` and `empty` are allowed to stand beside a figure. --- */
.accounts-freshness{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-8);
  margin:0;padding:var(--space-8) var(--space-12);border:1px solid var(--color-border-default);
  border-radius:var(--radius-control);background:var(--color-surface-sunken);
  color:var(--color-text-secondary);font-size:var(--text-sm);max-width:none}
.accounts-freshness[data-state=ready]{display:none}
.accounts-freshness[data-state=partial]{background:var(--color-feedback-warning-bg);
  border-color:var(--color-border-lead);color:var(--color-feedback-warning-text)}
.accounts-freshness[data-state=stale]{background:var(--color-feedback-hold-bg);
  border-color:var(--color-border-lead);color:var(--color-feedback-hold-text)}
.accounts-freshness[data-state=error]{background:var(--color-feedback-error-bg);
  border-color:var(--color-border-danger);color:var(--color-feedback-error-text)}
.accounts-retry{min-height:var(--size-36);padding-inline:var(--space-12);font-size:var(--text-sm)}

/* --- The toolbar: search, bank, order. ---------------------------------------------- */
.accounts-toolbar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--space-16);padding:0 0 var(--space-12)}
.accounts-toolbar .accounts-search-field{flex:2 1 var(--size-280);min-inline-size:0}
.accounts-toolbar label{flex:1 1 var(--size-150);min-inline-size:0}
.accounts-search-box{position:relative;display:flex;align-items:center;min-inline-size:0}
.accounts-search-box svg{position:absolute;inset-inline-start:var(--space-12);color:var(--color-text-secondary);pointer-events:none}
.accounts-search-box input{padding-inline-start:var(--space-40)}

/* --- The table. Money is read down a column: the three figure columns are right
   aligned, tabular, and never wrap mid-number. TICKET 158 (SI-17): the used figure is at
   the regular weight, as the prototype sets it; only the remaining figure is heavy. --- */
.accounts-table{margin:0}
/* TICKET 158: the shared `table` rule's 680 minimum made this table scroll by four
   pixels inside its own card at exactly 768 (measured: 680 in a 676 scroller), which put
   the scroll cue under a table that showed every column. Here the table fits its card
   and scrolls only when its columns' own content cannot fit, which the cue measures. */
#accounts-panel .accounts-table table{min-width:0}
.accounts-table th,.accounts-table td{vertical-align:middle}
/* page-board.css lets every `.badge` wrap (a board rule without a scope); in this
   table's status column the word stays on one line, as the prototype draws it. */
#accounts-panel .accounts-table .badge{white-space:nowrap}
.accounts-table .number{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.accounts-table td.number{font-size:var(--text-base);font-weight:var(--weight-regular);color:var(--color-text-secondary)}
.accounts-table td.accounts-remaining{font-size:var(--text-md);font-weight:var(--weight-semibold);color:var(--color-text-primary)}
.accounts-unset{color:var(--color-text-secondary);font-size:var(--text-sm);font-weight:var(--weight-regular);white-space:normal}
/* The pieces only the summary row shows (page-accounts.js `accountRow`). */
.accounts-narrow{display:none}
/* A figure that opens to the list behind it (ticket 106). It reads as the figure and
   behaves as a control: underlined on hover, focus ring from the shared rule.
   TICKET 158: scoped to this panel. page-board.css draws the board's own figure buttons
   under the same class name, loads after this sheet and sets them semibold, which is
   what made the used column bold here; the panel's id outranks it. */
#accounts-panel .money-button{min-height:var(--size-28);padding:var(--space-2) var(--space-4);margin-inline-end:calc(-1 * var(--space-4));
  background:transparent;border-color:transparent;color:inherit;font:inherit;font-weight:inherit;
  font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
#accounts-panel .money-button:hover{background:transparent;border-color:transparent;color:var(--color-text-link);text-decoration:underline}
/* The prototype sets the account name at the medium weight; the shared renderer's
   semibold is for the screens where the name is the only line. Override, this page. */
#accounts-panel .bank-account-name{font-weight:var(--weight-medium)}
.accounts-foot{margin:0;font-size:var(--text-sm);color:var(--color-text-secondary)}

/* --- The footer row (TICKET 158, SI-17): the page line on the left, the two buttons on
   the right, one row under a rule, as the prototype's table footer is. --- */
.accounts-pagination{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-8) var(--space-12);
  padding-block-start:var(--space-16);border-block-start:1px solid var(--color-border-subtle)}
.accounts-pagination p{flex:1 1 auto;min-inline-size:0;max-width:none;margin:0;font-size:var(--text-sm);color:var(--color-text-secondary)}

/* --- Nothing to list. A filter that matched nothing is a block inside the list card
   with the way back; a company with no account (TICKET 158, SI-22) is the whole page:
   the mark, one sentence, the one action, centred in a card tall enough to read as a
   considered page and not as a list that failed to load. --- */
.accounts-empty{display:flex;flex-direction:column;align-items:center;gap:var(--space-12);
  margin:var(--space-16) 0;padding:var(--space-24);text-align:center;
  border:1px dashed var(--color-border-default);border-radius:var(--radius-card);background:var(--color-surface-sunken)}
.accounts-empty p{margin:0;max-inline-size:60ch}
#accounts-panel svg.accounts-empty-mark{inline-size:var(--size-48);block-size:var(--size-48);color:var(--color-text-secondary)}
#accounts-panel[data-layout=empty] .accounts-empty{justify-content:center;min-block-size:calc(var(--size-280) * 1.5);
  margin:0;gap:var(--space-16);border:0;background:transparent;font-size:var(--text-md)}

/* --- One account (TICKET 158, SI-11): one wide card, led by the remaining figure. The
   row is the same row the table draws; here its cells stack -- the account and its
   status, the figure at the display step, then used over limit -- and the card ends on
   the settings action the hidden summary card would otherwise carry. --- */
#accounts-panel[data-layout=single] .accounts-list-card{padding:var(--space-24) var(--space-28)}
#accounts-panel[data-layout=single] .accounts-table{overflow:visible;margin:0;border:0;border-radius:0;background:transparent}
#accounts-panel[data-layout=single] .accounts-table table{display:block;min-width:0}
#accounts-panel[data-layout=single] .accounts-table caption,
#accounts-panel[data-layout=single] .accounts-table thead{display:none}
#accounts-panel[data-layout=single] .accounts-table tbody{display:block}
#accounts-panel[data-layout=single] .accounts-table tr{display:grid;grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"who status" "remaining remaining" "used used";align-items:center;gap:var(--space-8) var(--space-16);
  padding:0;border:0}
#accounts-panel[data-layout=single] .accounts-table td{display:block;min-inline-size:0;padding:0;border:0;text-align:start;white-space:normal}
#accounts-panel[data-layout=single] .accounts-table td.accounts-identity{grid-area:who}
#accounts-panel[data-layout=single] .accounts-table td.accounts-limit{display:none}
#accounts-panel[data-layout=single] .accounts-table td.accounts-status{grid-area:status;justify-self:end}
#accounts-panel[data-layout=single] .accounts-table td.accounts-remaining{grid-area:remaining;display:flex;flex-direction:column;
  align-items:flex-start;gap:var(--space-4);margin-block-start:var(--space-12);text-align:start}
#accounts-panel[data-layout=single] .accounts-table td.accounts-used{grid-area:used;display:flex;flex-wrap:wrap;align-items:baseline;
  gap:var(--space-4);font-size:var(--text-base)}
#accounts-panel[data-layout=single] .accounts-narrow{display:inline}
#accounts-panel[data-layout=single] .accounts-narrow.accounts-row-only{display:none}
#accounts-panel[data-layout=single] .accounts-table .accounts-narrow.accounts-card-only{display:inline}
#accounts-panel[data-layout=single] .accounts-remaining-label{font-size:var(--text-xs);font-weight:var(--weight-semibold);
  letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-caption)}
#accounts-panel[data-layout=single] .accounts-remaining .money-button{margin-inline:calc(-1 * var(--space-4)) 0;
  font-size:var(--text-display-sm);line-height:var(--leading-snug);letter-spacing:-0.02em;text-align:start}
#accounts-panel[data-layout=single] .accounts-remaining .accounts-unset{font-size:var(--text-lg)}
#accounts-panel[data-layout=single] tr:not([data-cap-state=unset]) .accounts-used .money-button{display:none}
.accounts-single-foot{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--space-8);
  padding-block-start:var(--space-16);border-block-start:1px solid var(--color-border-subtle)}

/* --- The bank renderer (finance_app/static/bank-catalog.js, ticket 117). ------------
   TICKET 130: the rules themselves are in finance_app/static/bank-catalog.css, the one
   copy, loaded before this file. What stays here is what this page alone wants: the
   widest badge of the five screens, because this is the table where the mark is the
   first column and has the room, and a card radius rather than a control radius,
   because it sits in a row of a card-shaped table. The mark is smaller than the badge
   so the bank's own colour stays visible as a ring around it. */
#accounts-panel .bank-icon{min-inline-size:var(--size-44);block-size:var(--size-44);
  padding-inline:var(--space-6);border-radius:var(--radius-card)}
#accounts-panel .bank-mark{inline-size:var(--space-28);block-size:var(--space-28)}

/* --- The breakdown a figure opens to (ticket 106), in a native dialog. -------------- */
.breakdown-dialog{inline-size:min(calc(100vw - var(--space-32)),calc(var(--size-280) * 2 + var(--space-64)));max-block-size:calc(100vh - var(--space-64));
  padding:0;border:1px solid var(--color-border-default);border-radius:var(--radius-card-lg);
  background:var(--color-surface-card);color:var(--color-text-primary);box-shadow:var(--shadow-sm)}
.breakdown-dialog::backdrop{background:var(--color-text-primary);opacity:var(--opacity-disabled)}
.breakdown-body{display:flex;flex-direction:column;gap:var(--space-12);padding:var(--space-20);max-block-size:inherit}
.breakdown-head{display:flex;align-items:flex-start;gap:var(--space-12)}
.breakdown-head>div{flex:1 1 auto;min-inline-size:0}
.breakdown-head h2{margin:0;font-size:var(--text-lg);overflow-wrap:anywhere}
.breakdown-basis{margin:0;font-size:var(--text-sm);color:var(--color-text-secondary);overflow-wrap:anywhere}
.breakdown-figures{display:flex;flex-wrap:wrap;gap:var(--space-16);margin:0;padding:var(--space-12);
  background:var(--color-surface-sunken);border-radius:var(--radius-card)}
.breakdown-figures>div{display:flex;flex-direction:column;gap:var(--space-2);min-inline-size:0}
/* --color-text-caption is the eyebrow ink and clears 4.5:1 on the page surface; on the
   sunken surface this block sits on, axe measured it at 4.34:1. The secondary ink is the
   same family and clears it there. */
.breakdown-figures dt{font-size:var(--text-xs);font-weight:var(--weight-semibold);letter-spacing:.08em;
  text-transform:uppercase;color:var(--color-text-secondary)}
.breakdown-figures dd{margin:0;font-size:var(--text-md);font-weight:var(--weight-semibold);font-variant-numeric:tabular-nums}
/* The shared `table` rule carries an intrinsic 680-wide minimum so the records table
   scrolls rather than squeezing; inside a dialog narrower than that it clipped the last
   column instead (measured on the harness: the status badge was cut in half). In here the
   table shrinks to the dialog and the cells wrap, and the stamp stacks under its own day
   basis rather than running on after it. */
.breakdown-scroll{overflow:auto;border:1px solid var(--color-border-default);border-radius:var(--radius-card)}
.breakdown-scroll table{min-width:0}
.breakdown-scroll td,.breakdown-scroll th{padding:var(--space-8) var(--space-10);font-size:var(--text-sm)}
.breakdown-scroll td small{display:block;color:var(--color-text-secondary)}
.breakdown-scroll .number{text-align:right;font-variant-numeric:tabular-nums}
.breakdown-when{font-variant-numeric:tabular-nums;white-space:nowrap}
.breakdown-excluded{margin:0;font-size:var(--text-sm)}
.breakdown-foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-10)}
.breakdown-foot p{flex:1 1 var(--size-150);margin:0;font-size:var(--text-sm)}

/* --- Below tablet width (TICKET 158, SI-02): the table becomes summary rows. The
   handoff's phone rule is "ยุบแถวตารางเป็นรายการสรุป อ่านยอดและเลขบัญชีเต็มได้": each row is
   the account (badge, name, bank and full number) with its remaining figure beside it
   on the first line, and used over limit with the status on the second. Nothing
   scrolls sideways, so every remaining figure is on screen at 320; the column heads go,
   and the words they carried are printed in the row. The table stays at 768 and up. --- */
@media (max-width: 767.98px){
  #accounts-panel .accounts-list-card{padding:var(--space-16)}
  #accounts-panel .accounts-table{overflow:visible;margin:0;border:0;border-radius:0;background:transparent}
  #accounts-panel .accounts-table table{display:block;min-width:0}
  #accounts-panel .accounts-table caption{display:block;padding:0 0 var(--space-4);font-size:var(--text-sm)}
  #accounts-panel .accounts-table thead{display:none}
  #accounts-panel .accounts-table tbody{display:block}
  #accounts-panel .accounts-table tr{display:grid;grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"who remaining" "used status";align-items:center;gap:var(--space-8) var(--space-12);
    padding-block:var(--space-16);border-block-start:1px solid var(--color-border-subtle)}
  #accounts-panel .accounts-table td{display:block;min-inline-size:0;padding:0;border:0}
  #accounts-panel .accounts-table td.accounts-identity{grid-area:who}
  #accounts-panel .accounts-table td.accounts-limit{display:none}
  #accounts-panel .accounts-table td.accounts-remaining{grid-area:remaining;display:flex;flex-direction:column;
    align-items:flex-end;gap:var(--space-2);text-align:end}
  #accounts-panel .accounts-table td.accounts-used{grid-area:used;display:flex;flex-wrap:wrap;align-items:baseline;
    gap:var(--space-4);text-align:start;white-space:normal;font-size:var(--text-sm)}
  #accounts-panel .accounts-table td.accounts-status{grid-area:status;justify-self:end}
  #accounts-panel .accounts-table .accounts-narrow{display:inline}
  #accounts-panel .accounts-table .accounts-narrow.accounts-card-only{display:none}
  #accounts-panel .accounts-remaining-label{font-size:var(--text-xs);font-weight:var(--weight-regular);color:var(--color-text-secondary)}
  /* No negative end margin here: in a row with no column to align to it only pushed the
     figure four pixels past its own card (measured at 390). */
  #accounts-panel .accounts-remaining .money-button{margin-inline-end:0;font-size:var(--text-lg);line-height:var(--leading-snug)}
  /* A long status word may take two lines on a phone rather than squeeze the account. */
  #accounts-panel .accounts-table .badge{white-space:normal;text-align:end}
  #accounts-panel .accounts-used-figure{color:var(--color-text-primary)}
  /* One opener per row, the remaining figure; an account with no limit keeps its used
     figure as the opener because it has no remaining figure to open. */
  #accounts-panel .accounts-table tr:not([data-cap-state=unset]) .accounts-used .money-button{display:none}
  #accounts-panel .bank-icon{min-inline-size:var(--size-36);block-size:var(--size-36);padding-inline:var(--space-4)}
  #accounts-panel .bank-mark{inline-size:var(--space-24);block-size:var(--space-24)}
  /* At 320 the account shares its line with the figure: the name at the body step and a
     tighter gap keep "SCB · 4000090033" on one line (measured wrapping at the phone's
     own larger body step). */
  #accounts-panel .accounts-table .bank-account{gap:var(--space-8)}
  #accounts-panel .accounts-table .bank-account-name{font-size:var(--text-base)}
  #accounts-panel[data-layout=single] .accounts-list-card{padding:var(--space-20)}
  #accounts-panel[data-layout=single] .accounts-remaining .money-button{font-size:var(--text-xxl)}
  .accounts-pagination p{flex-basis:100%}
  .accounts-pagination button{flex:1 1 0}
  .accounts-single-foot button{flex:1 1 auto}
}

@media (max-width: 720px){
  /* Four columns in a dialog the width of a phone. The stamp and the status word stop
     refusing to wrap, which is what was cutting the last column off inside its own
     scroller (measured on the harness at 390). */
  .breakdown-when{white-space:normal}
  .breakdown-scroll .badge{white-space:normal;height:auto;padding-block:var(--space-2)}
  .breakdown-scroll td,.breakdown-scroll th{padding:var(--space-8) var(--space-6)}
  /* The summary as the prototype folds it: the figure and the count side by side while
     they fit, the action on its own full-width line under them. */
  .accounts-summary{padding:var(--space-20);gap:var(--space-16) var(--space-20)}
  .accounts-summary-figure,.accounts-summary-count strong{font-size:var(--text-xxl)}
  .accounts-summary-count{padding-inline-start:var(--space-20)}
  .accounts-summary-actions{margin-inline-start:0;flex:1 1 100%}
  .accounts-summary-actions button{flex:1 1 auto}
  .breakdown-body{padding:var(--space-16)}
}

/* --- TICKET 155: the breakdown dialog on a phone. -------------------------------------
   A sheet over the whole screen, as the overview's dialogs are, and the page behind it is
   not drawn while it is open: nothing behind a full-screen sheet can be seen or pressed.
   Floating, its Close sat over the shell's Refresh behind the backdrop at 414, which
   `verify_overflow` measured as a 27% overlap (ticket 158 recorded the same class of
   result against the old sidebar). The dialogs opened from inside it, and the two live
   regions, stay drawn. */
@media (max-width:700px){
  #accounts-breakdown{inline-size:100vw;max-inline-size:100vw;block-size:100vh;max-block-size:100vh;
    margin:0;border:0;border-radius:0}
  body:has(#accounts-breakdown[open]){visibility:hidden}
  body:has(#accounts-breakdown[open]) dialog[open],
  body:has(#accounts-breakdown[open]) #live-region,
  body:has(#accounts-breakdown[open]) #message{visibility:visible}
}

/* --- TICKET 227: the withdrawal review, per source account. --------------------------------
   The last column on the table; a line of its own across the row in the summary rows and the
   one-account card. Two quiet lines and the link to the results, under the figures the page
   is about, never in place of one. */
.accounts-review{min-inline-size:var(--size-150);vertical-align:middle}
.accounts-review-line,.accounts-review-quiet{display:block;font-size:var(--text-sm);color:var(--color-text-secondary)}
.accounts-review-line[data-review-figure=confirmed]{color:var(--color-text-primary);font-variant-numeric:tabular-nums}
.accounts-review-line[data-tone=waiting]{color:var(--color-feedback-warning-text);font-weight:var(--weight-semibold)}
.accounts-review-link{display:inline-flex;align-items:center;min-height:var(--size-28);margin-block-start:var(--space-2);
  margin-inline-start:calc(-1 * var(--space-4));padding:var(--space-2) var(--space-4);background:transparent;
  border-color:transparent;color:var(--color-text-link);font-size:var(--text-sm);white-space:normal;text-align:start}
.accounts-review-link:hover,.accounts-review-link:active{background:var(--color-action-ghost-hover);border-color:transparent;text-decoration:underline}
#accounts-panel[data-layout=single] .accounts-table tr{grid-template-areas:"who status" "remaining remaining" "used used" "review review"}
#accounts-panel[data-layout=single] .accounts-table td.accounts-review{grid-area:review;margin-block-start:var(--space-8);
  padding-block-start:var(--space-12);border-block-start:1px solid var(--color-border-subtle)}
@media (max-width: 767.98px){
  #accounts-panel .accounts-table tr{grid-template-areas:"who remaining" "used status" "review review"}
  #accounts-panel .accounts-table td.accounts-review{grid-area:review;display:flex;flex-wrap:wrap;align-items:baseline;
    gap:var(--space-2) var(--space-12)}
  #accounts-panel .accounts-review-link{flex:1 1 100%}
  #accounts-panel[data-layout=single] .accounts-table tr{grid-template-areas:"who status" "remaining remaining" "used used" "review review"}
}

/* --- TICKET 237: the account type. -------------------------------------------------------
   A withdrawal staff account wears its type as a badge beside its name, on the table row, the
   phone summary row and the one-account card alike (a general account wears none). The name
   and the badge share one line while they fit, and the badge drops under the name rather than
   squeezing it; the badge itself never breaks inside its words. The type filter is one more
   field of the toolbar and takes the toolbar's own rules. */
#accounts-panel .accounts-name-line{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-8);min-inline-size:0}
#accounts-panel .accounts-name-line .bank-account-name{min-inline-size:0}
#accounts-panel .accounts-table .accounts-type-badge{white-space:nowrap;text-align:start}
/* Four fields now share the toolbar, and a select narrower than its longest option cuts the
   chosen words off ("บัญชีพนักงานถอ", measured at 390 with the shared 150 basis: 154 wide, the
   native arrow inside it). The three selects take the widest option's room as their basis
   (about 130 of text, the arrow and the padding), so they wrap to a row of their own before
   they cut a word: one row at 1280, two at 768, one select a row on a phone. */
#accounts-panel .accounts-toolbar label:not(.accounts-search-field){flex:1 1 calc(var(--size-150) + var(--size-36))}
@media (max-width: 767.98px){
  #accounts-panel .accounts-table .accounts-type-badge{white-space:nowrap;text-align:start}
}

/* --- TICKET 268 (the owner's mockup, approved 19 ต.ค. 2026): the list as the mockup draws it -------------------------
   The heading carries "ตั้งค่าบัญชี" beside the title. The summary is one card of up to three figures side by side
   behind hairlines -- the SMS balance (a role that may see one), the allowance left today, the accounts shown -- each
   a small label, the figure at the large step and a line under it; on a phone they stack. The list card's head is
   its title with the day (and the numbers switch) on the right; the caption is for assistive technology. Four
   columns: the account, the SMS balance, what is left to transfer (the figure, a bar of used over the limit, used
   over limit and the status word) and the withdrawal review's work. */
#accounts-panel>.page-heading.accounts-heading{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;column-gap:var(--space-16)}
#accounts-panel>.page-heading.accounts-heading>:not(.accounts-heading-actions,.ad-heading-actions){grid-column:1}
#accounts-panel>.page-heading.accounts-heading>:is(.accounts-heading-actions,.ad-heading-actions){grid-column:2;grid-row:1 / span 3;align-self:start;
  display:flex;gap:var(--space-8)}
#accounts-panel .accounts-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,calc(var(--size-150) + var(--size-72))),1fr));
  align-items:start;gap:var(--space-16) 0;padding:var(--space-20) 0}
#accounts-panel .accounts-stat{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-4);min-inline-size:0;
  margin:0;padding:0 var(--space-24);border:0}
#accounts-panel .accounts-stat:not([hidden])~.accounts-stat{border-inline-start:1px solid var(--color-border-default)}
#accounts-panel .accounts-stat-label{margin:0;max-width:none;font-size:var(--text-xs);font-weight:var(--weight-regular);letter-spacing:normal;
  text-transform:none;color:var(--color-text-secondary)}
#accounts-panel .accounts-stat-figure,#accounts-panel .accounts-summary-figure{margin:0;display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--space-6);
  font-size:var(--text-xxl);font-weight:var(--weight-semibold);line-height:var(--leading-snug);letter-spacing:-0.01em;
  font-variant-numeric:tabular-nums;color:var(--color-text-primary);overflow-wrap:anywhere}
#accounts-panel .accounts-stat-figure[data-known=false]{font-size:var(--text-lg)}
#accounts-panel .accounts-summary-count strong{font-size:inherit;line-height:inherit}
#accounts-panel .accounts-summary-count-unit,#accounts-panel .accounts-summary-unit{font-size:inherit;font-weight:inherit;letter-spacing:inherit;color:inherit}
#accounts-panel .accounts-summary-unit{font-size:var(--text-base);font-weight:var(--weight-regular);color:var(--color-text-secondary)}
#accounts-panel .accounts-stat-note,#accounts-panel .accounts-summary-note{flex:0 0 auto;margin:0;max-width:none;font-size:var(--text-xs);color:var(--color-text-secondary)}
#accounts-panel .accounts-list-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-8) var(--space-16);
  margin:0 0 var(--space-12)}
#accounts-panel .accounts-list-head[hidden]{display:none}
#accounts-panel .accounts-list-title{margin:0;font-size:var(--text-lg);font-weight:var(--weight-semibold);color:var(--color-text-primary)}
#accounts-panel .accounts-list-side{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-8) var(--space-12)}
#accounts-panel .accounts-day{font-size:var(--text-sm);color:var(--color-text-secondary);font-variant-numeric:tabular-nums}
#accounts-panel .accounts-table caption{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:-1px;padding:0}
#accounts-panel .accounts-table td.accounts-balance{white-space:normal;text-align:end;font-size:var(--text-sm)}
#accounts-panel .accounts-balance .balance-line{justify-content:flex-end;margin:0}
#accounts-panel .accounts-balance .balance-line-label{display:none}
#accounts-panel .accounts-balance .balance-line-value{font-size:var(--text-base)}
/* The phone's line (ticket 233) under the balance, as the mockup's "ล่าสุด 12:42 · รับ SMS อยู่": words, not a box. */
#accounts-panel .accounts-balance .sms-line{justify-content:flex-end;gap:var(--space-4);margin:var(--space-4) 0 0;padding:0;background:transparent;border:0;
  border-radius:0;font-size:var(--text-xs);text-align:end;color:var(--color-text-secondary)}
#accounts-panel .accounts-balance .sms-line-text{flex:0 1 auto;font-weight:var(--weight-regular)}
#accounts-panel .accounts-balance .sms-line .sms-icon{inline-size:var(--space-14);block-size:var(--space-14)}
#accounts-panel[data-balances=off] .accounts-balance-head,#accounts-panel[data-balances=off] td.accounts-balance{display:none}
/* The label goes with its line: a balance the server refused (ticket 235) draws no line, so no label either. */
#accounts-panel td.accounts-balance:not(:has(.balance-line:not([hidden]))) .accounts-balance-label{display:none}
#accounts-panel .accounts-table td.accounts-remaining{min-inline-size:calc(var(--size-150) + var(--size-36))}
.accounts-meter{display:block;inline-size:100%;max-inline-size:calc(var(--size-150) + var(--size-36));block-size:var(--space-4);
  margin:var(--space-6) 0 var(--space-4) auto;background:var(--color-surface-sunken);border-radius:var(--radius-pill);overflow:hidden}
.accounts-meter-fill{display:block;block-size:100%;background:var(--color-action-primary);border-radius:var(--radius-pill)}
.accounts-meter-fill:is([data-cap-state=near_cap],[data-cap-state=exhausted]){background:var(--color-feedback-warning-text)}
.accounts-meter-fill[data-cap-state=over]{background:var(--color-feedback-error-text)}
#accounts-panel .accounts-used{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:baseline;gap:var(--space-2) var(--space-4);
  font-size:var(--text-xs);font-weight:var(--weight-regular);color:var(--color-text-secondary);white-space:normal}
#accounts-panel .accounts-used .money-button{min-height:var(--size-24);padding-block:0;font-size:var(--text-xs)}
#accounts-panel .accounts-limit{display:inline-flex;flex-wrap:wrap;gap:var(--space-4)}
#accounts-panel .accounts-status{display:block;margin-block-start:var(--space-4)}
#accounts-panel td.accounts-review{min-inline-size:var(--size-150)}
.accounts-review-tag{display:inline-flex;align-items:center;min-height:var(--size-24);padding:var(--space-2) var(--space-8);border-radius:var(--radius-sm);
  background:var(--color-surface-sunken);color:var(--color-text-secondary);font-size:var(--text-xs);font-weight:var(--weight-medium)}
#accounts-panel .accounts-review-link[data-tone=waiting]{font-weight:var(--weight-semibold)}
#accounts-panel .accounts-review .accounts-review-line{margin-block-start:var(--space-2);font-size:var(--text-xs)}
.accounts-notice{margin:0;max-width:none;padding:var(--space-12) var(--space-16);border-radius:var(--radius-control);background:var(--color-surface-sunken);
  font-size:var(--text-sm);color:var(--color-text-primary)}
.accounts-notice[hidden]{display:none}
/* One account (TICKET 158's card): the figure leads, the SMS balance and the review under it. */
#accounts-panel[data-layout=single] .accounts-table tr{grid-template-columns:minmax(0,1fr);grid-template-areas:"who" "remaining" "balance" "review"}
#accounts-panel[data-layout=single] .accounts-table td.accounts-balance{grid-area:balance;text-align:start}
#accounts-panel[data-layout=single] .accounts-balance .balance-line,#accounts-panel[data-layout=single] .accounts-balance .sms-line{justify-content:flex-start;text-align:start}
#accounts-panel[data-layout=single] .accounts-meter{margin-inline:0 auto}
#accounts-panel[data-layout=single] .accounts-used{justify-content:flex-start;font-size:var(--text-base)}
#accounts-panel[data-layout=single] .accounts-balance-label{display:block;font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--color-text-caption)}
#accounts-panel[data-layout=single] td.accounts-balance:not(:has(.balance-line:not([hidden]))) .accounts-balance-label{display:none}
@media (max-width: 767.98px){
  #accounts-panel .accounts-table tr{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"who who" "balance remaining" "review review"}
  #accounts-panel[data-balances=off] .accounts-table tr{grid-template-areas:"who remaining" "review review"}
  #accounts-panel .accounts-table td.accounts-balance{grid-area:balance;text-align:start;align-self:start}
  #accounts-panel .accounts-balance .balance-line,#accounts-panel .accounts-balance .sms-line{justify-content:flex-start;text-align:start}
  #accounts-panel .accounts-balance-label{display:block;font-size:var(--text-xs);font-weight:var(--weight-regular);color:var(--color-text-secondary)}
  #accounts-panel td.accounts-balance:not(:has(.balance-line:not([hidden]))) .accounts-balance-label{display:none}
  #accounts-panel .accounts-table td.accounts-remaining{min-inline-size:0;align-self:start}
  #accounts-panel .accounts-used .accounts-used-label{display:inline}
  #accounts-panel[data-layout=single] .accounts-table tr{grid-template-columns:minmax(0,1fr);grid-template-areas:"who" "remaining" "balance" "review"}
}
@media (max-width: 720px){
  #accounts-panel>.page-heading.accounts-heading{grid-template-columns:minmax(0,1fr)}
  #accounts-panel>.page-heading.accounts-heading>:is(.accounts-heading-actions,.ad-heading-actions){grid-column:1;grid-row:auto;margin-block-start:var(--space-12)}
  #accounts-panel .accounts-summary{grid-template-columns:minmax(0,1fr);padding:var(--space-4) 0}
  #accounts-panel .accounts-stat{padding:var(--space-16) var(--space-20)}
  #accounts-panel .accounts-stat:not([hidden])~.accounts-stat{border-inline-start:0;border-block-start:1px solid var(--color-border-default)}
  #accounts-panel .accounts-stat-figure,#accounts-panel .accounts-summary-figure{font-size:var(--text-xxl)}
}
/* TICKET 287 begin: the group's warnings at 80% and 95% under an account's allowance (page-accounts.js
   `limitNotices`): small words in the figure's own column, the sent one in the primary text, a notice that did
   not get through in the warning colour. Words carry the state; the colour only supports it. */
/* The words never widen the column: they wrap inside the width the figure, the meter and the status give it
   (`contain:inline-size`). Measured at 390: without it the column grew and pushed the SMS balance under the meter. */
#accounts-panel .accounts-limit-notices{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--space-2) var(--space-8);
  contain:inline-size;align-self:stretch;margin:var(--space-4) 0 0;font-size:var(--text-xs);
  font-weight:var(--weight-regular);line-height:var(--leading-snug);color:var(--color-text-secondary);white-space:normal;text-align:end}
/* The percent on its own line; the label and the two thresholds under it. */
#accounts-panel .accounts-limit-percent{flex-basis:100%}
#accounts-panel .accounts-limit-label{font-weight:var(--weight-semibold)}
#accounts-panel .accounts-limit-notice[data-notice-state=sent]{color:var(--color-text-primary);font-weight:var(--weight-medium)}
#accounts-panel .accounts-limit-notice:is([data-notice-state=unconfirmed],[data-notice-state=not_delivered]){color:var(--color-feedback-warning-text)}
#accounts-panel[data-layout=single] .accounts-limit-notices{justify-content:flex-start;text-align:start}
/* On a phone the figure's column is only as wide as the figure; the words get a column of their own size there,
   which still leaves the SMS balance beside it its room at 320. */
@media (max-width: 767.98px){
  #accounts-panel .accounts-limit-notices{min-inline-size:var(--size-150)}
}
/* TICKET 287 end */