/* TICKET 118: account settings -- read-only cards, one modal to add or edit, archive
   instead of delete. Design A, from the prototype's `?variant=A&view=settings`: a grid
   of cards that state what is on file, the actions on the right of each card, and no
   control on a card that changes anything by itself.

   Every value here is a token. The two dialogs are native <dialog>, so the backdrop,
   the focus trap and Escape are the platform's; what this file sets is how they look. */

/* --- The page: intro, toolbar, the count line. ------------------------------------ */
/* TICKET 157 (SI-01, SI-10, SI-11): a full-width page of its own, as design A draws it --
   the intro, "เพิ่มบัญชี" on its own row at the end edge, the search under it, the cards in
   three columns at 1280, the pager, and nothing after it. It is not a card any more. */
.account-settings-page{display:flex;flex-direction:column;gap:var(--space-20)}
/* Every child keeps its own height: `.accounts-search` below carries a flex basis for the
   accounts page's row of filters, which in this COLUMN would be a height. */
.account-settings-page>*{flex:0 0 auto}
.account-settings-toolbar{display:flex;justify-content:flex-end}
.account-settings-toolbar>button{min-block-size:var(--size-44)}
.account-settings-page>.accounts-search{flex:0 0 auto;max-inline-size:calc(var(--space-64)*8)}
.account-settings-status:empty{display:none}
.accounts-intro{display:flex;align-items:center;gap:var(--space-16);margin-bottom:var(--space-8)}
.accounts-intro h2{margin:0;font-size:var(--text-lg);font-weight:var(--weight-semibold)}
.accounts-intro-mark{display:grid;place-items:center;width:var(--size-48);height:var(--size-48);flex-shrink:0;background:var(--color-surface-selected);color:var(--color-action-primary);border-radius:var(--radius-control)}
.accounts-intro h3{margin:0;font-size:var(--text-lg);font-weight:var(--weight-semibold)}
.accounts-intro p{margin:var(--space-4) 0 0;font-size:var(--text-sm);color:var(--color-text-secondary)}
.accounts-toolbar{display:flex;align-items:end;flex-wrap:wrap;gap:var(--space-16)}
.accounts-toolbar>button{flex:0 0 auto}
.accounts-search{display:flex;flex-direction:column;gap:var(--space-6);flex:1 1 calc(var(--space-64)*4);min-inline-size:0;font-size:var(--text-sm);color:var(--color-text-secondary)}
.accounts-search input{inline-size:100%;min-inline-size:0;font-size:var(--text-md)}
.accounts-note{margin:0;font-size:var(--text-sm);color:var(--color-text-secondary)}
.accounts-error{margin:0;color:var(--color-feedback-error-text);font-size:var(--text-sm)}
.accounts-error:empty{display:none}

/* --- The cards. One card is a record to read; the two actions sit on its right. ---- */
/* auto-fill rather than a fixed three: a card that holds a bank mark, a Thai account name
   and two actions stops being readable below about 272 CSS pixels, so the track floor is
   that and the column count follows the room. TICKET 157 (SI-01): with the settings rail
   gone the page is full width, which is three columns at 1280, as design A draws it. */
.accounts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,calc(var(--space-64)*4 + var(--space-16))),1fr));gap:var(--space-20)}
/* TICKET 157 (SI-11): one account is one wide card, not a third-width card beside two
   empty columns: the name and bank lead, the number and the limit read across. */
.accounts-grid[data-count=one]{grid-template-columns:minmax(0,1fr)}
@media (min-width:761px){
  .accounts-grid[data-count=one] .account-card{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);align-items:start;gap:var(--space-16) var(--space-32)}
  .accounts-grid[data-count=one] .account-card-head{margin-bottom:0}
  .accounts-grid[data-count=one] .account-field+.account-field{margin-top:0}
  .accounts-grid[data-count=one] .account-card-flag{grid-column:1 / -1;justify-self:start;margin-top:0}
}
.account-card{display:flex;flex-direction:column;min-inline-size:0;padding:var(--space-24);background:var(--color-surface-card);border:1px solid var(--color-border-default);border-radius:var(--radius-card)}
.account-card-head{display:flex;align-items:start;gap:var(--space-12);margin-bottom:var(--space-20)}
/* TICKET 130 (box), TICKET 138 (label). The bank renderer's rules are in
   finance_app/static/bank-catalog.css, the one copy, loaded before this file. The three
   places this page draws a badge keep only what they want differently: a fixed box
   rather than one that grows with the initials, because a card head is a fixed grid, and
   the mark FILLING the box instead of sitting inside it, which is this page's own
   reading of an account card. The label used to be set smaller and lighter here
   (`--text-xs` weight 600) -- ticket 138: that put it under WCAG 1.4.3's small-text
   4.5:1 floor, and two of the catalog's inks only clear 3:1 (`kbank` 4.22:1, `gsb`
   4.27:1, ticket 117's measurements, re-measured by scripts/contrast.py under
   .scratch/ux-a-implementation/evidence/138/). The label now takes the shared sheet's
   `--text-lg` bold, the same look as the other four screens that draw this badge, and
   clears large text. The box stays fixed at --size-40 (the rendered font size and
   weight, --text-xs/weight-semibold before and --text-lg/weight-bold after, are read
   off the node under evidence/138/). */
.account-card-head .bank-icon{inline-size:var(--size-40);block-size:var(--size-40)}
.account-card-head .bank-mark{position:absolute;inset:0;padding:var(--space-4)}
.account-card-id{min-inline-size:0;flex:1 1 auto}
.account-card-id h3{margin:0;font-size:var(--text-md);font-weight:var(--weight-semibold);overflow-wrap:break-word}
/* TICKET 237: the name and, for a withdrawal staff account, its type badge beside it; the badge
   drops under a long name rather than squeezing it. */
.account-card-name{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4) var(--space-8);min-inline-size:0}
.account-card-name>:is(h3,h4){min-inline-size:0}
.account-card-id p{margin:var(--space-4) 0 0;font-size:var(--text-sm);color:var(--color-text-secondary);overflow-wrap:break-word}
.account-card-actions{display:flex;flex-direction:column;align-items:end;flex-shrink:0;gap:var(--space-4)}
.account-card-actions button{min-height:var(--size-44);padding:var(--space-4) 0;background:transparent;border-color:transparent;color:var(--color-text-link);font-size:var(--text-base);font-weight:var(--weight-semibold);text-align:right}
.account-card-actions button:hover{background:transparent;border-color:transparent;text-decoration:underline}
.account-card-actions .account-remove{color:var(--color-action-destructive)}
.account-field+.account-field{margin-top:var(--space-20)}
.account-field>span{display:block;font-size:var(--text-base);color:var(--color-text-secondary);margin-bottom:var(--space-6)}
.account-field>strong{display:block;font-size:var(--text-lg);font-weight:var(--weight-semibold);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.account-field>strong small{font-size:var(--text-sm);font-weight:var(--weight-regular)}
.account-number-full{font-family:var(--font-mono);letter-spacing:0.04em}
.account-card-flag{display:inline-block;margin-top:var(--space-12);padding:var(--space-2) var(--space-8);background:var(--color-badge-pending-bg);color:var(--color-badge-pending-text);border-radius:var(--radius-pill);font-size:var(--text-sm);font-weight:var(--weight-semibold)}
.account-settings-empty{grid-column:1 / -1;margin:0;padding:var(--space-40) var(--space-24);text-align:center;background:var(--color-surface-card);border:1px solid var(--color-border-default);border-radius:var(--radius-card);color:var(--color-text-secondary)}
.accounts-pager{display:flex;align-items:center;justify-content:center;gap:var(--space-12);flex-wrap:wrap}
.accounts-pager span{font-size:var(--text-sm);color:var(--color-text-secondary)}

/* --- The two dialogs. Native <dialog>; the trap, Escape and the top layer are the
       browser's, and the backdrop is the prototype's own scrim tokens. ------------- */
.app-modal{width:min(calc(var(--space-64)*9),100%);max-height: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)}
.app-modal::backdrop{background:var(--color-text-primary);opacity:var(--opacity-disabled)}
/* app.css styles every form as a wrapping row of flexible fields (`form` is a flex row
   ending its items, and every `label` grows from a basis), which is right for filter bars
   it was written for and wrong for a dialog: unset, the fields stretch down the dialog's
   full height and sit against its right edge. These two lines are the whole override. */
.app-modal-body{display:flex;flex-direction:column;align-items:stretch;gap:var(--space-16);padding:var(--space-24);margin:0}
.app-modal-body>*{flex:0 0 auto}
.app-modal-body h2{margin:0;font-size:var(--text-xl);font-weight:var(--weight-semibold)}
/* TICKET 157 (SI-14, SI-18): design A's dialogs close from their header as well as from
   Cancel. The button is an icon with the catalog's "ปิด" / "Close" as its name. */
.app-modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-12)}
.app-modal-head h2{min-inline-size:0;padding-block-start:var(--space-6)}
.app-modal-close{display:inline-grid;place-items:center;flex:0 0 auto;inline-size:var(--size-44);block-size:var(--size-44);min-block-size:var(--size-44);margin:calc(var(--space-6) * -1) calc(var(--space-10) * -1) 0 0;padding:0;background:transparent;border:1px solid transparent;border-radius:var(--radius-control);color:var(--color-text-secondary)}
.app-modal-close:hover{background:var(--color-action-ghost-hover);color:var(--color-text-primary)}
/* TICKET 157 (SI-09): a field the modal refused wears the error ink, with the sentence
   that says what to fix under the fields. The destructive ink rather than
   `--color-border-danger`, which ticket 153 measured at 1.90:1 on a white field. */
.app-modal-body label :is(input,select)[aria-invalid=true]{border-color:var(--color-action-destructive)}
.app-modal-note{margin:0;font-size:var(--text-sm);color:var(--color-text-secondary)}
.app-modal-body label{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)}
.app-modal-body label :is(input,select){inline-size:100%;min-inline-size:0;font-size:var(--text-md);color:var(--color-text-primary);font-weight:var(--weight-regular)}
/* The two fields an account with history holds shut. They have to LOOK held as well as
   be held, or the sentence above them is the only sign and a person types into a box
   that will not take it. The disabled ink is the readable one the theme carries, because
   a field nobody may change is still a field somebody has to read. */
.app-modal-body label :is(input,select):disabled,.app-modal-body label input[readonly]{background:var(--color-action-disabled-bg);border-color:var(--color-action-disabled-border);color:var(--color-action-disabled-text);cursor:not-allowed}
.app-modal-actions{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-12);flex-wrap:wrap;margin:var(--space-8) calc(var(--space-24) * -1) calc(var(--space-24) * -1);padding:var(--space-16) var(--space-24);background:var(--color-surface-page);border-top:1px solid var(--color-border-default);border-radius:0 0 var(--radius-card) var(--radius-card)}
.account-bank-preview{display:flex;align-items:center;gap:var(--space-12);padding:var(--space-12);background:var(--color-surface-page);border-radius:var(--radius-control);font-size:var(--text-sm)}
/* TICKET 130 (box), TICKET 138 (label). The same box override as the card head, one size
   down, because this is a preview line inside a dialog and not the head of a card.
   `min-inline-size` is set as well as `inline-size`: the shared sheet's floor is a step
   larger than this. The label override is gone (ticket 138): it takes the shared
   sheet's --text-lg bold, the same as everywhere else this badge is drawn. */
.account-bank-preview .bank-icon{inline-size:var(--size-36);block-size:var(--size-36);
  min-inline-size:var(--size-36)}
.account-bank-preview .bank-mark{position:absolute;inset:0;padding:var(--space-4)}
/* The one checkbox in this dialog. app.css already draws `.check` as a box beside its
   words; the two rules above would otherwise stack them and stretch the box across the
   dialog, because a column of fields is not what a checkbox is. */
.app-modal-body label.check{display:grid;grid-template-columns:var(--size-24) 1fr;align-items:center;gap:var(--space-10);font-size:var(--text-base);color:var(--color-text-primary)}
.app-modal-body label.check input{inline-size:var(--size-24)}
.accounts-lock{margin:0;padding:var(--space-12);background:var(--color-feedback-hold-bg);color:var(--color-feedback-hold-text);border-radius:var(--radius-control);font-size:var(--text-sm)}
.account-archive-identity{display:flex;align-items:center;gap:var(--space-12);padding:var(--space-16);background:var(--color-surface-page);border-radius:var(--radius-control)}
/* TICKET 130: the same box override again. The three rules that followed them --
   `.bank-account-copy`, `.bank-account-name` and `.bank-account-meta` -- were a copy of
   the shared sheet's own and are gone; this dialog is the one place that calls the
   renderer's `render()` rather than its `badge()`, so it also picks up `.bank-account`
   itself, which nothing here ever styled. TICKET 138: the label override is gone here
   too, for the same reason as the other two spots on this page. */
.account-archive-identity .bank-icon{inline-size:var(--size-40);block-size:var(--size-40)}
.account-archive-identity .bank-mark{position:absolute;inset:0;padding:var(--space-4)}
.danger-fill{background:var(--color-action-destructive);border-color:var(--color-action-destructive);color:var(--color-text-on-primary)}
.danger-fill:hover{background:var(--color-action-destructive);border-color:var(--color-action-destructive);filter:brightness(0.92)}

/* --- TICKET 200: removed accounts, on request, and the add form's way back. --------
   The list sits after the accounts in use, behind one control, and reads as records that
   are out of use: the page's own ground instead of the card white, the name a step down
   under the list's heading, and a quiet "removed" flag where a draft has its own. */
.account-removed{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-16);padding-block-start:var(--space-20);border-top:1px solid var(--color-border-default)}
.account-removed>button{min-block-size:var(--size-44)}
.account-removed-body{display:flex;flex-direction:column;gap:var(--space-12);align-self:stretch}
.account-removed-title{margin:0;font-size:var(--text-md);font-weight:var(--weight-semibold)}
.account-card-removed{background:var(--color-surface-page)}
.account-card-id h4{margin:0;font-size:var(--text-md);font-weight:var(--weight-semibold);overflow-wrap:break-word}
.account-card-flag-removed{align-self:flex-start;background:var(--color-surface-sunken);color:var(--color-text-secondary)}
/* The offer in the add form: what the number belongs to, and what bringing it back does. */
.account-restore-offer{display:flex;flex-direction:column;gap:var(--space-12);padding:var(--space-16);background:var(--color-surface-accent-soft);border:1px solid var(--color-border-default);border-radius:var(--radius-control);color:var(--color-text-primary);font-size:var(--text-sm)}
.account-restore-offer p{margin:0}
.account-restore-offer .account-archive-identity{flex-wrap:wrap;justify-content:space-between;padding:var(--space-12);background:var(--color-surface-card)}
.account-restore-offer .account-field>span{font-size:var(--text-sm);margin-bottom:var(--space-2)}
.account-restore-offer .account-field>strong{font-size:var(--text-md)}

/* --- TICKET 201: an account in use outside the group that receives slips. -----------
   The note sits at the foot of its card in the hold colours `.accounts-lock` already
   uses for "this needs a look, nothing is broken", with its one action under the
   sentence. A refused move is said on the same card, in the page's error line. */
.account-card-elsewhere{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-12);margin-top:var(--space-16);padding:var(--space-12) var(--space-16);background:var(--color-feedback-hold-bg);color:var(--color-feedback-hold-text);border:1px solid var(--color-border-lead);border-radius:var(--radius-control);font-size:var(--text-sm)}
.account-card-elsewhere p{margin:0}
.account-card-elsewhere button{min-block-size:var(--size-44);font-size:var(--text-base);white-space:normal;text-align:center}
.account-move-error{margin-top:var(--space-12)}
@media (min-width:761px){
  .accounts-grid[data-count=one] .account-card-elsewhere,.accounts-grid[data-count=one] .account-move-error{grid-column:1 / -1;margin-top:0}
}

/* --- Narrow widths. Three cards become two, then one; the modal fills the screen. -- */
@media (max-width:760px){
  .account-card{padding:var(--space-20)}
  .accounts-toolbar>button{width:100%}
  .accounts-search{flex-basis:100%}
  .account-settings-toolbar>button{inline-size:100%}
  .account-removed>button{inline-size:100%}
  .account-card-elsewhere{align-items:stretch}
  .account-card-elsewhere button{inline-size:100%}
  .app-modal{width:100%;max-height:100vh;border-radius:0;border:0}
  .app-modal-body{padding:var(--space-20)}
  .app-modal-actions{flex-direction:column-reverse;align-items:stretch;margin-inline:calc(var(--space-20) * -1);padding:var(--space-16) var(--space-20)}
  .app-modal-actions button{width:100%}
  .accounts-pager{justify-content:space-between}
  .accounts-pager button{flex:1 1 auto}
}

/* ===== TICKET 233 begin: รับ SMS ธนาคาร -- the phones, the account card line, the wizard ======
   Every value is a token. The danger look is the destructive and error inks, used only for a
   filter that is not working, a phone-number sender and the destructive actions; the hold
   look is "a person should look", never "broken". */

/* --- The band that leads the page while a phone's filter is not working. ------------- */
.sms-alert{display:flex;flex-direction:column;gap:var(--space-12)}
.sms-alert-band{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:var(--space-12) var(--space-16);padding:var(--space-16) var(--space-20);background:var(--color-feedback-error-bg);border:1px solid var(--color-action-destructive);border-radius:var(--radius-card);color:var(--color-feedback-error-text)}
.sms-alert-band>.sms-icon{inline-size:var(--size-24);block-size:var(--size-24);margin-top:var(--space-2)}
.sms-alert-text h2{margin:0;font-size:var(--text-lg);font-weight:var(--weight-semibold);color:var(--color-feedback-error-text)}
.sms-alert-text p{margin:var(--space-4) 0 0;color:var(--color-feedback-error-text);font-size:var(--text-base);max-width:none}
.sms-alert-text .sms-alert-do{font-weight:var(--weight-semibold);font-size:var(--text-md)}
.sms-alert-band>button{min-block-size:var(--size-44);white-space:normal}

/* --- The line on each account card (account settings and the accounts page). -------- */
.sms-line{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-6) var(--space-8);margin-top:var(--space-16);padding:var(--space-10) var(--space-12);background:var(--color-surface-page);border:1px solid var(--color-border-subtle);border-radius:var(--radius-control);font-size:var(--text-sm);color:var(--color-text-primary)}
.sms-line .sms-icon{inline-size:var(--space-16);block-size:var(--space-16);color:var(--color-text-secondary)}
.sms-line-text{flex:1 1 0;font-weight:var(--weight-semibold);min-inline-size:0;overflow-wrap:anywhere}
.sms-line-hint{flex:1 1 100%;color:var(--color-text-secondary);font-size:var(--text-sm)}
.sms-line[data-sms-state=none] .sms-line-text{font-weight:var(--weight-regular);color:var(--color-text-secondary)}
.sms-line[data-sms-state=never],.sms-line[data-sms-state=silent],.sms-line[data-sms-state=held]{background:var(--color-feedback-hold-bg);border-color:var(--color-border-lead)}
.sms-line[data-sms-state=never] .sms-line-text,.sms-line[data-sms-state=silent] .sms-line-text,.sms-line[data-sms-state=held] .sms-line-text{color:var(--color-feedback-hold-text)}
.sms-line[data-sms-state=broken]{background:var(--color-feedback-error-bg);border-color:var(--color-action-destructive-border)}
.sms-line[data-sms-state=broken] .sms-line-text,.sms-line[data-sms-state=broken] .sms-line-hint{color:var(--color-feedback-error-text)}
.sms-line-connect{margin-inline-start:auto;min-block-size:var(--size-36);padding-block:var(--space-4);font-size:var(--text-sm)}
/* The accounts page draws the line inside a table cell: no frame, the row is the frame. */
.bank-account-copy .sms-line{margin-top:var(--space-6);padding:var(--space-4) var(--space-8)}

/* --- The section. --------------------------------------------------------------------- */
.sms-section{display:flex;flex-direction:column;gap:var(--space-20);padding-block-start:var(--space-24);border-top:1px solid var(--color-border-default)}
.sms-head{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:var(--space-16)}
.sms-head-text{flex:1 1 calc(var(--space-64)*6);min-inline-size:0}
.sms-head h2{margin:0;font-size:var(--text-xl);font-weight:var(--weight-semibold)}
.sms-head h2:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}
.sms-intro{margin:var(--space-6) 0 0;font-size:var(--text-base)}
.sms-connect{flex:0 0 auto}
.sms-readonly{margin:0;padding:var(--space-12) var(--space-16);background:var(--color-surface-sunken);border-radius:var(--radius-control);color:var(--color-text-primary);font-size:var(--text-base);max-width:none}
.sms-failure{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-12);padding:var(--space-12) var(--space-16);background:var(--color-feedback-error-bg);border-radius:var(--radius-control)}
.sms-failure p{margin:0;color:var(--color-feedback-error-text);max-width:none}
.sms-status{margin:0;font-size:var(--text-base);color:var(--color-text-primary)}
.sms-status:empty{display:none}
.sms-caption{margin:0;font-size:var(--text-sm);color:var(--color-text-secondary);max-width:none}
.sms-mono{font-family:var(--font-mono);overflow-wrap:anywhere}
.sms-empty{padding:var(--space-24);background:var(--color-surface-card);border:1px dashed var(--color-border-strong);border-radius:var(--radius-card)}
.sms-empty p{margin:0;color:var(--color-text-primary);max-width:none}

/* --- Senders waiting for a person. ------------------------------------------------------ */
.sms-pending-list{display:flex;flex-direction:column;gap:var(--space-12)}
.sms-pending-list h3{margin:0;font-size:var(--text-md)}
.sms-pending{display:flex;flex-direction:column;gap:var(--space-8);padding:var(--space-16);background:var(--color-feedback-hold-bg);border:1px solid var(--color-border-lead);border-radius:var(--radius-card)}
.sms-pending p{margin:0;max-width:none}
.sms-pending-question{color:var(--color-text-primary);font-size:var(--text-md);font-weight:var(--weight-semibold)}
.sms-pending-facts{color:var(--color-text-secondary);font-size:var(--text-sm)}
.sms-pending-phone{background:var(--color-feedback-error-bg);border-color:var(--color-action-destructive)}
.sms-pending-warning{padding:var(--space-10) var(--space-12);background:var(--color-surface-card);border-inline-start:var(--size-marker) solid var(--color-action-destructive);border-radius:var(--radius-sm);color:var(--color-feedback-error-text);font-weight:var(--weight-semibold)}
.sms-pending-actions{display:flex;flex-wrap:wrap;gap:var(--space-12)}
.sms-pending-actions button{min-block-size:var(--size-44)}

/* --- Phone cards. ------------------------------------------------------------------------ */
.sms-phones{display:flex;flex-direction:column;gap:var(--space-16)}
.sms-phone-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,calc(var(--space-64)*6)),1fr));gap:var(--space-20)}
.sms-phone{display:flex;flex-direction:column;gap:var(--space-12);min-inline-size:0;padding:var(--space-20) var(--space-24);background:var(--color-surface-card);border:1px solid var(--color-border-default);border-radius:var(--radius-card)}
.sms-phone[data-state=filter_broken]{border-color:var(--color-action-destructive);box-shadow:inset var(--size-marker) 0 0 var(--color-action-destructive)}
.sms-phone[data-state=silent]{box-shadow:inset var(--size-marker) 0 0 var(--color-feedback-hold-text)}
.sms-phone[data-state=revoked]{background:var(--color-surface-page)}
.sms-phone-head{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:var(--space-8) var(--space-16)}
.sms-phone-title{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-8);min-inline-size:0}
.sms-phone-title h3{margin:0;font-size:var(--text-lg);font-weight:var(--weight-semibold);overflow-wrap:anywhere}
.sms-owner-tag{display:inline-flex;align-items:center;padding:var(--space-2) var(--space-8);background:var(--color-surface-sunken);border-radius:var(--radius-pill);font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--color-text-secondary)}
.sms-phone-actions{display:flex;flex-wrap:wrap;gap:0 var(--space-16)}
.text-action{min-block-size:var(--size-44);padding:var(--space-4) 0;background:transparent;border-color:transparent;color:var(--color-text-link);font-size:var(--text-base);font-weight:var(--weight-semibold);white-space:normal;text-align:start}
.text-action:hover{background:transparent;border-color:transparent;text-decoration:underline}
.text-action.sms-revoke{color:var(--color-action-destructive)}
.sms-state-line{margin:0;font-size:var(--text-base);color:var(--color-text-primary);max-width:none}
.sms-state-line[data-tone=hold]{padding:var(--space-10) var(--space-12);background:var(--color-feedback-hold-bg);border-radius:var(--radius-control);color:var(--color-feedback-hold-text)}
.sms-state-line[data-tone=info]{color:var(--color-badge-processing-text)}
.sms-state-line[data-tone=danger]{padding:var(--space-10) var(--space-12);background:var(--color-feedback-error-bg);border-radius:var(--radius-control);color:var(--color-feedback-error-text);font-weight:var(--weight-semibold)}
.sms-warning{margin:0;padding:var(--space-10) var(--space-12);border-radius:var(--radius-control);font-size:var(--text-sm);max-width:none}
.sms-warning[data-tone=danger]{background:var(--color-feedback-error-bg);color:var(--color-feedback-error-text)}
.sms-warning[data-tone=note]{background:var(--color-surface-sunken);color:var(--color-text-secondary)}
.sms-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,calc(var(--space-64)*3)),1fr));gap:var(--space-8) var(--space-16);margin:0}
.sms-facts-wide{grid-template-columns:minmax(0,1fr)}
.sms-fact{min-inline-size:0}
.sms-fact dt{font-size:var(--text-sm);color:var(--color-text-secondary)}
.sms-fact dd{margin:var(--space-2) 0 0;font-size:var(--text-base);color:var(--color-text-primary);overflow-wrap:anywhere}
.sms-phone-accounts h4{margin:0 0 var(--space-6);font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--color-text-secondary)}
.sms-account-list{display:flex;flex-direction:column;gap:var(--space-6);margin:0;padding:0;list-style:none}
.sms-account{display:flex;align-items:center;gap:var(--space-10);min-inline-size:0}
.sms-account .bank-icon,.sms-pick-name .bank-icon{inline-size:var(--size-28);block-size:var(--size-28);min-inline-size:var(--size-28);font-size:var(--text-xs)}
.sms-account .bank-mark,.sms-pick-name .bank-mark{position:absolute;inset:0;padding:var(--space-2)}
.sms-account-words{display:flex;flex-wrap:wrap;gap:0 var(--space-8);min-inline-size:0}
.sms-account-name{font-weight:var(--weight-medium);overflow-wrap:anywhere}
.sms-account-mask{font-family:var(--font-mono);color:var(--color-text-secondary)}
.sms-counts{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-6);margin:0;font-size:var(--text-sm);color:var(--color-text-secondary);max-width:none}
.sms-counts-label{font-weight:var(--weight-semibold)}
.sms-count{padding:var(--space-2) var(--space-8);background:var(--color-surface-sunken);border-radius:var(--radius-pill);color:var(--color-text-primary)}
.sms-count-problem{background:var(--color-feedback-error-bg);color:var(--color-feedback-error-text);font-weight:var(--weight-semibold)}
/* The platform's own disclosure marker stays: a fold has to look like one that opens. */
.sms-fold>summary{cursor:pointer;display:list-item;min-block-size:var(--size-44);padding-block:var(--space-10);font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--color-text-secondary)}
.sms-fold>summary:hover{color:var(--color-text-primary)}
.sms-fold[open]{display:flex;flex-direction:column;gap:var(--space-8)}
.sms-details h4{margin:var(--space-8) 0 0;font-size:var(--text-sm)}

/* --- Dialogs: the small ones and the wizard. -------------------------------------------- */
.sms-dialog-content{display:flex;flex-direction:column;gap:var(--space-12)}
.sms-dialog-content p{margin:0;max-width:none;color:var(--color-text-primary)}
.sms-field{display:flex;flex-direction:column;gap:var(--space-6);font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text-secondary)}
.sms-field :is(input,textarea){inline-size:100%;font-size:var(--text-md);color:var(--color-text-primary);font-weight:var(--weight-regular)}
.sms-field :is(input,textarea)[aria-invalid=true]{border-color:var(--color-action-destructive)}
.sms-hint{margin:0;font-size:var(--text-sm);font-weight:var(--weight-regular);color:var(--color-text-secondary);max-width:none}
.sms-wizard{width:min(calc(var(--space-64)*12),100%)}
.sms-wizard .app-modal-head h2:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}
.sms-progress{display:flex;flex-direction:column;gap:var(--space-8)}
.sms-progress-text{margin:0;font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--color-text-secondary)}
.sms-progress-bar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-6);margin:0;padding:0;list-style:none}
.sms-progress-bar li{padding-block-start:var(--space-6);border-top:var(--space-4) solid var(--color-border-default);font-size:var(--text-xs);color:var(--color-text-secondary)}
.sms-progress-bar li[data-state=done]{border-top-color:var(--color-action-primary)}
.sms-progress-bar li[data-state=current]{border-top-color:var(--color-action-primary);color:var(--color-text-primary);font-weight:var(--weight-semibold)}
.sms-wizard-content{display:flex;flex-direction:column;gap:var(--space-16)}
.sms-lead{margin:0;font-size:var(--text-md);color:var(--color-text-primary);max-width:none}
.sms-account-pick{display:flex;flex-direction:column;gap:var(--space-8);margin:0;padding:var(--space-16);border:1px solid var(--color-border-default);border-radius:var(--radius-card)}
.sms-account-pick legend{padding:0 var(--space-4);font-size:var(--text-md);font-weight:var(--weight-semibold);color:var(--color-text-primary)}
.app-modal-body .sms-pick,.sms-pick{display:grid;grid-template-columns:var(--size-24) minmax(0,1fr);align-items:start;gap:var(--space-12);padding:var(--space-10) var(--space-12);border:1px solid var(--color-border-subtle);border-radius:var(--radius-control);font-size:var(--text-base);color:var(--color-text-primary);cursor:pointer}
.sms-pick:hover{background:var(--color-action-secondary-hover)}
.sms-pick:has(input:checked){background:var(--color-surface-selected);border-color:var(--color-action-primary)}
.sms-pick:has(input:focus-visible){outline:2px solid var(--color-focus-ring);outline-offset:2px}
.app-modal-body .sms-pick input,.sms-pick input{inline-size:var(--size-24);block-size:var(--size-24);min-block-size:0;margin:0;accent-color:var(--color-action-primary)}
.sms-pick-words{display:flex;flex-direction:column;gap:var(--space-4);min-inline-size:0}
.sms-pick[data-disabled=true]{background:var(--color-surface-page);cursor:not-allowed}
.sms-pick[data-disabled=true] .sms-pick-name{color:var(--color-text-secondary)}
.sms-pick-name{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-8);font-weight:var(--weight-medium)}
.sms-pick-note{color:var(--color-feedback-hold-text);font-size:var(--text-sm)}
/* Step 2: the code a phone scans, and the code a person types. */
.sms-pair{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:var(--space-24)}
.sms-qr{inline-size:min(var(--size-280),100%);padding:var(--space-8);background:var(--color-surface-card);border:1px solid var(--color-border-default);border-radius:var(--radius-card)}
/* A code that expired or was used is not left scannable: the box stays, the code goes. */
.sms-pair[data-state=expired] .sms-qr-svg,.sms-pair[data-state=claimed] .sms-qr-svg{visibility:hidden}
.sms-qr-svg{display:block;inline-size:100%;block-size:auto}
.sms-qr-light{fill:var(--color-surface-card)}
.sms-qr-dark{fill:var(--color-text-primary)}
.sms-code{display:flex;flex-direction:column;gap:var(--space-8);min-inline-size:0}
.sms-code p{margin:0;max-width:none}
.sms-code-label{font-size:var(--text-base);color:var(--color-text-secondary)}
.sms-code-text{font-family:var(--font-mono);font-size:var(--text-display-sm);font-weight:var(--weight-medium);line-height:var(--leading-tight);letter-spacing:0.08em;color:var(--color-text-primary);overflow-wrap:anywhere}
.sms-pair[data-state=expired] .sms-code-text{text-decoration:line-through;color:var(--color-text-secondary)}
.sms-code-where{font-size:var(--text-base);color:var(--color-text-primary)}
.sms-code-left{font-size:var(--text-base);font-weight:var(--weight-semibold);color:var(--color-text-primary);font-variant-numeric:tabular-nums}
.sms-pair-state{margin:0;padding:var(--space-10) var(--space-12);border-radius:var(--radius-control);font-size:var(--text-base);max-width:none}
.sms-pair-state[data-tone=wait]{background:var(--color-surface-sunken);color:var(--color-text-primary)}
.sms-pair-state[data-tone=ok]{background:var(--color-feedback-success-bg);color:var(--color-feedback-success-text);font-weight:var(--weight-semibold)}
.sms-pair-state[data-tone=bad]{background:var(--color-feedback-error-bg);color:var(--color-feedback-error-text);font-weight:var(--weight-semibold)}
/* Step 3: the checklist. The mark and the word say the state; the colour only supports it. */
.sms-checks{display:flex;flex-direction:column;gap:var(--space-12);margin:0;padding:0;list-style:none}
.sms-check{display:grid;grid-template-columns:var(--size-36) minmax(0,1fr);gap:var(--space-12);padding:var(--space-14) var(--space-16);border:1px solid var(--color-border-default);border-radius:var(--radius-card);background:var(--color-surface-card)}
.sms-check-mark{display:grid;place-items:center;inline-size:var(--size-36);block-size:var(--size-36);border-radius:var(--radius-pill);background:var(--color-surface-sunken);color:var(--color-text-secondary)}
.sms-check-mark .sms-icon{inline-size:var(--space-20);block-size:var(--space-20)}
.sms-check[data-state=ok]{border-color:var(--color-feedback-success-text)}
.sms-check[data-state=ok] .sms-check-mark{background:var(--color-feedback-success-bg);color:var(--color-feedback-success-text)}
.sms-check[data-state=bad]{border-color:var(--color-action-destructive);background:var(--color-feedback-error-bg)}
.sms-check[data-state=bad] .sms-check-mark{background:var(--color-action-destructive);color:var(--color-text-on-primary)}
.sms-check-text{display:flex;flex-direction:column;gap:var(--space-8);min-inline-size:0}
.sms-check-text h3{margin:0;font-size:var(--text-md);font-weight:var(--weight-semibold)}
.sms-check-verdict{font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--color-text-secondary)}
.sms-check[data-state=ok] .sms-check-verdict{color:var(--color-feedback-success-text)}
.sms-check[data-state=bad] .sms-check-verdict{color:var(--color-feedback-error-text)}
.sms-check-detail{margin:0;font-size:var(--text-base);color:var(--color-text-primary);max-width:none}
.sms-check-detail[data-tone=hold]{padding:var(--space-8) var(--space-10);background:var(--color-feedback-hold-bg);border-radius:var(--radius-control);color:var(--color-feedback-hold-text)}
.sms-check-text>button{align-self:flex-start;min-block-size:var(--size-44);white-space:normal}
.sms-message{display:flex;flex-direction:column;gap:var(--space-6);padding:var(--space-12);background:var(--color-surface-page);border:1px solid var(--color-border-subtle);border-radius:var(--radius-control)}
.sms-message[data-state=ok]{border-color:var(--color-feedback-success-text)}
.sms-message[data-state=bad]{border-color:var(--color-action-destructive)}
.sms-message h4{margin:0;font-size:var(--text-sm);font-weight:var(--weight-semibold)}
.sms-message-body{display:flex;align-items:flex-start;flex-wrap:wrap;gap:var(--space-8)}
.sms-message-text{flex:1 1 calc(var(--space-64)*4);min-inline-size:0;margin:0;padding:var(--space-8) var(--space-10);background:var(--color-surface-card);border:1px solid var(--color-border-default);border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:var(--text-base);white-space:pre-wrap;overflow-wrap:anywhere}
.sms-copy{min-block-size:var(--size-44)}
.sms-copied{align-self:center;font-size:var(--text-sm);color:var(--color-text-secondary)}
.sms-message-verdict{margin:0;font-size:var(--text-base);color:var(--color-text-primary);max-width:none}
.sms-message[data-state=ok] .sms-message-verdict{color:var(--color-feedback-success-text);font-weight:var(--weight-semibold)}
.sms-message[data-state=bad] .sms-message-verdict{color:var(--color-feedback-error-text);font-weight:var(--weight-semibold)}
.sms-message>button{align-self:flex-start;min-block-size:var(--size-44)}
.sms-fingerprint{margin:0;font-family:var(--font-mono);font-size:var(--text-xxl);font-weight:var(--weight-medium);letter-spacing:0.16em;color:var(--color-text-primary)}
.sms-ready{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:var(--space-16);padding:var(--space-16) var(--space-20);background:var(--color-feedback-success-bg);border:1px solid var(--color-feedback-success-text);border-radius:var(--radius-card);color:var(--color-feedback-success-text)}
.sms-ready>.sms-icon{inline-size:var(--size-40);block-size:var(--size-40)}
.sms-ready h3{margin:0;font-size:var(--text-xl);font-weight:var(--weight-semibold);color:var(--color-feedback-success-text)}
.sms-ready p{margin:var(--space-4) 0 0;color:var(--color-feedback-success-text);max-width:none}
.sms-leave{padding-block-start:var(--space-4)}

@media (max-width:760px){
  .sms-alert-band{grid-template-columns:auto minmax(0,1fr)}
  .sms-alert-band>button{grid-column:1 / -1;inline-size:100%}
  .sms-connect{inline-size:100%}
  .sms-phone{padding:var(--space-16)}
  .sms-pending-actions button{flex:1 1 100%}
  .sms-pair{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center}
  .sms-code{align-items:center}
  .sms-code-text{font-size:var(--text-xxl)}
  .sms-line-connect{margin-inline-start:0;inline-size:100%}
}
/* ===== TICKET 233 end ===== */

/* ===== TICKET 269 begin: the settings tabs as the owner's mockup (19 ต.ค. 2569) ===========================
   "บัญชี": one card, "บัญชีของบริษัทนี้" with "เพิ่มบัญชี" in its head and a row per account (the bank's mark, the
   name and its last four digits, the daily limit under it, "แก้ไข" and "เพิ่มเติม" on the right). "มือถือรับ SMS": one
   card the same way, a row per phone with its state on the right, then each account's bank SMS line. Every value
   is a token; the card is the mockup's panel (the card radius, the default border, the head's hairline). */
.account-settings-card,.sms-section{background:var(--color-surface-card);border:1px solid var(--color-border-default);
  border-radius:var(--radius-card-lg);box-shadow:var(--shadow-sm);overflow:hidden}
.account-settings-head,.sms-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-16);
  padding:var(--space-20);border-bottom:1px solid var(--color-border-default)}
.account-settings-titles{min-inline-size:0;flex:1 1 calc(var(--space-64)*4)}
.account-settings-titles h2,.sms-head h2{margin:0;font-size:var(--text-lg);font-weight:var(--weight-semibold)}
.account-settings-titles p,.sms-intro{margin:var(--space-4) 0 0;font-size:var(--text-xs);color:var(--color-text-secondary)}
.account-settings-card .account-settings-toolbar{justify-content:flex-end}
.account-settings-card>.accounts-search{display:flex;margin:var(--space-16) var(--space-20) 0;max-inline-size:calc(var(--space-64)*8)}
.account-settings-card>.accounts-note{margin:var(--space-12) var(--space-20) 0}
.account-settings-card>.accounts-pager{padding:var(--space-16) var(--space-20);border-top:1px solid var(--color-border-default)}
.account-settings-card>.accounts-pager[hidden]{display:none}

/* The rows. `.accounts-grid` keeps its name for the shared count rule; here it is one column of rows. */
.accounts-grid.account-rows,.accounts-grid.account-rows[data-count=one]{display:flex;flex-direction:column;gap:0}
.account-rows .account-card,.account-removed .account-card{display:flex;flex-direction:column;gap:var(--space-12);padding:var(--space-16) var(--space-20);
  background:transparent;border:0;border-top:1px solid var(--color-border-default);border-radius:0}
.account-rows .account-card:first-child{border-top:0}
.account-rows .account-card-head,.account-removed .account-card-head{align-items:center;margin-bottom:0}
.account-card-head .bank-icon{inline-size:var(--size-36);block-size:var(--size-36);min-inline-size:var(--size-36)}
.account-card-name h3,.account-card-name h4{font-size:var(--text-base)}
.account-card-ending{font-size:var(--text-base);font-weight:var(--weight-semibold);color:var(--color-text-primary);white-space:nowrap}
.account-card-id .account-card-limit{margin:var(--space-4) 0 0;font-size:var(--text-xs);color:var(--color-text-secondary)}
.account-card-id .account-card-bank{margin:var(--space-2) 0 0;font-size:var(--text-xs);color:var(--color-text-caption);overflow-wrap:anywhere}
.account-card-bank .account-number-full{font-family:var(--font-mono);letter-spacing:0}
.account-rows .account-card-actions,.account-removed .account-card-actions{flex-direction:row;align-items:center;gap:var(--space-8)}
.account-rows .account-card-actions .account-edit{min-height:var(--size-40);padding:var(--space-6) var(--space-14);background:var(--color-action-secondary-bg);
  border:1px solid var(--color-action-secondary-border);color:var(--color-action-secondary-text);font-size:var(--text-sm);font-weight:var(--weight-medium);text-align:center}
.account-rows .account-card-actions .account-edit:hover{background:var(--color-action-secondary-hover);border-color:var(--color-action-secondary-border);text-decoration:none}
.account-more{position:relative}
.account-more-toggle{display:inline-flex;align-items:center;min-height:var(--size-40);padding:var(--space-6) var(--space-8);border-radius:var(--radius-control);
  color:var(--color-text-link);font-size:var(--text-sm);font-weight:var(--weight-medium);list-style:none;cursor:pointer}
.account-more-toggle::-webkit-details-marker{display:none}
.account-more-toggle:hover{background:var(--color-surface-selected)}
.account-more-toggle:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}
.account-more-menu{position:absolute;inset-block-start:calc(100% + var(--space-4));inset-inline-end:0;z-index:var(--z-tooltip);display:flex;flex-direction:column;
  min-inline-size:calc(var(--space-64)*2 + var(--space-32));padding:var(--space-6);background:var(--color-surface-card);border:1px solid var(--color-border-default);
  border-radius:var(--radius-control);box-shadow:var(--shadow-sm)}
.account-rows .account-more-menu .account-remove{justify-content:flex-start;min-height:var(--size-40);padding:var(--space-6) var(--space-10);text-align:start;font-size:var(--text-sm)}
.account-rows .account-more-menu .account-remove:hover{background:var(--color-action-destructive-hover);text-decoration:none}
.account-rows .account-card-elsewhere,.account-rows .account-move-error{margin-top:0}
.account-rows .account-card-flag{align-self:flex-start;margin-top:0}
.account-settings-card .account-settings-empty{margin:var(--space-20);border-style:dashed}
.account-removed .accounts-grid{display:flex;flex-direction:column;gap:0;border:1px solid var(--color-border-default);border-radius:var(--radius-card);overflow:hidden}
.account-removed .account-card:first-child{border-top:0}

/* "มือถือรับ SMS": the phones, the senders waiting, the accounts' lines, the fold for the technical team. */
.sms-phones-page{display:flex;flex-direction:column;gap:var(--space-20)}
.sms-section{gap:0;padding-block-start:0;border-top:1px solid var(--color-border-default)}
.sms-section>:not(.sms-head){margin:0}
.sms-section>.sms-readonly,.sms-section>.sms-failure,.sms-section>.sms-status{margin:var(--space-16) var(--space-20) 0}
.sms-section>.sms-status:last-child{margin-block-end:var(--space-16)}
.sms-section .sms-phones{gap:0}
.sms-section .sms-phone-list{display:flex;flex-direction:column;gap:0}
.sms-section .sms-phone{gap:var(--space-8);padding:var(--space-16) var(--space-20);background:transparent;border:0;border-top:1px solid var(--color-border-default);border-radius:0;box-shadow:none}
.sms-section .sms-phones>.sms-phone-list:first-child>.sms-phone:first-child{border-top:0}
.sms-section .sms-phone[data-state=filter_broken]{box-shadow:inset var(--size-marker) 0 0 var(--color-action-destructive)}
.sms-section .sms-phone[data-state=silent]{box-shadow:inset var(--size-marker) 0 0 var(--color-feedback-hold-text)}
.sms-phone-head{align-items:center}
.sms-phone-title{flex-direction:column;align-items:flex-start;gap:var(--space-2);flex:1 1 calc(var(--space-64)*4)}
.sms-section .sms-phone-title h3{font-size:var(--text-base)}
.sms-phone-meta{margin:0;font-size:var(--text-xs);color:var(--color-text-secondary);overflow-wrap:anywhere;max-width:none}
.sms-phone-side{flex:0 0 auto}
.sms-phone-side .badge[data-badge=reviewed]{background:var(--color-feedback-success-bg);color:var(--color-action-primary-hover)}
.sms-section .sms-state-line{font-size:var(--text-sm)}
.sms-section .sms-phone-actions{gap:0 var(--space-12)}
.sms-section .sms-phone-actions button{min-block-size:var(--size-36);font-size:var(--text-sm)}
.sms-section .sms-empty{margin:var(--space-16) var(--space-20);border-radius:var(--radius-control)}
.sms-section .sms-gone,.sms-section .sms-owner-phones{padding:0 var(--space-20) var(--space-8);border-top:1px solid var(--color-border-default)}
.sms-section .sms-owner-phones h3{margin:var(--space-16) 0 var(--space-4);font-size:var(--text-sm)}
.sms-section .sms-pending-list{padding:var(--space-16) var(--space-20);border-bottom:1px solid var(--color-border-default)}
.sms-accounts-block{display:flex;flex-direction:column;border-top:1px solid var(--color-border-default)}
.sms-block-title{margin:0;padding:var(--space-16) var(--space-20) var(--space-4);font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--color-text-secondary)}
.sms-account-rows{display:flex;flex-direction:column}
.sms-account-rows>.sms-caption{padding:var(--space-8) var(--space-20) var(--space-16)}
.sms-account-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-8) var(--space-16);padding:var(--space-12) var(--space-20);
  border-top:1px solid var(--color-border-subtle)}
.sms-account-row:first-child{border-top:0}
.sms-account-who{display:flex;align-items:center;gap:var(--space-10);min-inline-size:0;flex:1 1 calc(var(--space-64)*3)}
.sms-account-who .bank-icon{inline-size:var(--size-28);block-size:var(--size-28);min-inline-size:var(--size-28);font-size:var(--text-xs)}
.sms-account-who .bank-mark{position:absolute;inset:0;padding:var(--space-2)}
.sms-account-who .sms-account-words{flex-direction:column}
.sms-account-who .sms-account-mask{font-family:var(--font-sans);font-size:var(--text-xs)}
.sms-account-row .sms-line{flex:1 1 calc(var(--space-64)*5);margin-top:0}
.sms-section .sms-details{padding:0 var(--space-20) var(--space-8);border-top:1px solid var(--color-border-default)}
.sms-section .sms-phone-details{border:0}
.sms-section .sms-phone-details>summary{min-block-size:var(--size-36);padding-block:var(--space-6)}

@media (max-width:760px){
  .account-settings-head,.sms-head{padding:var(--space-16);flex-wrap:nowrap;align-items:flex-start}   /* the step stays on the title's right */
  .account-settings-titles,.sms-head-text{flex:1 1 0;min-inline-size:0}
  .account-settings-head>button,.sms-head>button{flex:0 0 auto}
  .account-settings-card>.accounts-search{margin-inline:var(--space-16)}
  .account-rows .account-card,.sms-section .sms-phone,.sms-account-row{padding:var(--space-16)}
  .account-rows .account-card-head{flex-wrap:wrap}
  .account-rows .account-card-id{flex:1 1 0}   /* beside its bank's mark, as the mockup's row; the buttons wrap under it */
  .account-rows .account-card-actions{inline-size:100%;justify-content:flex-start;padding-inline-start:calc(var(--size-36) + var(--space-12))}
  .account-settings-toolbar>button{inline-size:auto}
  .sms-connect{inline-size:auto}
}
/* ===== TICKET 269 end ===== */