/* TICKET 119: intake setup in four steps, the last one a confirmation.
   TICKET 157: a full-width page of its own (no settings rail, no card around it).

   Design A, from the prototype's `?variant=A&view=intake`: a stepper of four across the
   top, a wide work panel with the open step and a narrow status panel beside it, and a
   native <dialog> for the one popup. Every value is a token; the dialog's backdrop, its
   focus trap and Escape are the platform's, and what this file sets is how they look. */

/* --- The stepper. Four marks, each one a button that opens its step. --------------- */
.intake-steps{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-12);padding:0;margin:0 0 var(--space-24)}
/* A grid item keeps `min-width:auto`, so a Thai step name with no space in it sets the
   item's own minimum and runs past the track the template gave it. Measured: "บัญชีและ
   วงเงิน" was cut off at the card's edge at 1280 until this line. */
.intake-steps>li{min-inline-size:0}
.intake-step{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-4) var(--space-12);align-items:center;inline-size:100%;min-inline-size:0;text-align:left;white-space:normal;background:var(--color-surface-card);border:1px solid var(--color-border-strong);border-radius:var(--radius-control);padding:var(--space-16);font-size:var(--text-sm);color:var(--color-text-primary)}
.intake-step:hover:not(:disabled){background:var(--color-surface-sunken)}
.intake-step>.intake-step-n{grid-row:1 / 3;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);font-weight:var(--weight-semibold)}
.intake-step>strong{min-inline-size:0;overflow-wrap:anywhere;font-size:var(--text-base);font-weight:var(--weight-semibold)}
.intake-step>small{min-inline-size:0;font-size:var(--text-sm);color:var(--color-text-secondary)}
.intake-step[aria-current=step]{border-color:var(--color-action-primary);background:var(--color-surface-selected)}
.intake-step[aria-current=step]>.intake-step-n,.intake-step[data-done=true]>.intake-step-n{background:var(--color-action-primary);color:var(--color-action-primary-text)}
.intake-step:disabled{opacity:var(--opacity-disabled);pointer-events:none}

/* --- The two panels. Work on the left, what this company stands at on the right. --- */
.intake-layout{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:var(--space-24);align-items:start}
.intake-work,.intake-side{min-inline-size:0;padding:var(--space-28);background:var(--color-surface-card);border:1px solid var(--color-border-default);border-radius:var(--radius-card)}
.intake-work>h2{margin:var(--space-4) 0 0;font-size:var(--text-xl);font-weight:var(--weight-semibold)}
.intake-lede{margin:var(--space-12) 0 var(--space-20);color:var(--color-text-secondary);font-size:var(--text-base);max-inline-size:65ch}
.intake-side h2{margin:0 0 var(--space-16);font-size:var(--text-lg);font-weight:var(--weight-semibold)}
.intake-side-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-8);padding:var(--space-12) 0;border-block-start:1px solid var(--color-border-default);font-size:var(--text-base)}
.intake-side-row:first-of-type{border-block-start:0}
.intake-side-row>span{color:var(--color-text-secondary)}
.intake-note{margin:var(--space-16) 0 0;padding:var(--space-14);background:var(--color-surface-sunken);border-radius:var(--radius-control);color:var(--color-text-secondary);font-size:var(--text-sm)}

/* --- Fields, the one-time command, the result a server read produced. -------------- */
.intake-field{display:flex;flex-direction:column;gap:var(--space-6);margin-block-end:var(--space-20);font-size:var(--text-sm);color:var(--color-text-secondary)}
.intake-field>input,.intake-field>textarea{inline-size:100%;min-inline-size:0;font-size:var(--text-md)}
.intake-field>small{font-size:var(--text-sm);color:var(--color-text-secondary)}
.intake-actions{display:flex;flex-wrap:wrap;gap:var(--space-12);margin-block-start:var(--space-20)}
.intake-actions>button{min-block-size:var(--size-44)}
.intake-command{display:grid;gap:var(--space-12);padding:var(--space-20);margin-block-start:var(--space-20);background:var(--color-surface-page);border:1px solid var(--color-border-default);border-radius:var(--radius-control)}
.intake-command span,.intake-command small{font-size:var(--text-sm);color:var(--color-text-secondary)}
.intake-command code{font-family:var(--font-mono);font-size:var(--text-base);overflow-wrap:anywhere;color:var(--color-text-primary)}
.intake-result{margin-block-start:var(--space-20);padding:var(--space-20);background:var(--color-surface-selected);border:1px solid var(--color-border-default);border-radius:var(--radius-control);font-size:var(--text-base)}
.intake-result strong{display:block;overflow-wrap:anywhere}
.intake-result p{margin:var(--space-8) 0 0;font-size:var(--text-sm);color:var(--color-text-secondary);overflow-wrap:anywhere}
.intake-feedback{margin:var(--space-20) 0 0;color:var(--color-feedback-error-text);font-size:var(--text-base)}
.intake-feedback:empty{display:none}
.intake-back{margin-block-start:var(--space-24);padding-block-start:var(--space-16);border-block-start:1px solid var(--color-border-default)}

/* --- The sender policy. Two radios; the id list is hidden under the second. -------- */
.intake-policy{border:0;padding:0;margin:0 0 var(--space-20);min-inline-size:0}
.intake-policy>legend{padding:0;margin-block-end:var(--space-12);font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--color-text-secondary)}
.intake-policy-choice{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:var(--space-12);padding:var(--space-14);border:1px solid var(--color-border-strong);border-radius:var(--radius-control);margin-block-end:var(--space-8);cursor:pointer}
.intake-policy-choice:has(input:checked){border-color:var(--color-action-primary);background:var(--color-surface-selected)}
.intake-policy-choice:focus-within{outline:var(--space-2) solid var(--color-focus-ring);outline-offset:var(--space-2)}
.intake-policy-choice input{inline-size:var(--space-20);block-size:var(--space-20);min-block-size:var(--space-20);margin:0;accent-color:var(--color-action-primary);flex-shrink:0}
.intake-policy-choice strong{display:block;font-size:var(--text-base);font-weight:var(--weight-semibold);color:var(--color-text-primary)}
.intake-policy-choice small{display:block;margin-block-start:var(--space-4);font-size:var(--text-sm);color:var(--color-text-secondary)}

/* --- The account checklist. ------------------------------------------------------- */
.intake-account-tools{display:flex;align-items:end;flex-wrap:wrap;gap:var(--space-16);margin-block-end:var(--space-20)}
.intake-account-tools .intake-field{flex:1 1 calc(var(--space-64)*2);min-inline-size:0;margin:0}
.intake-account-tools>button{flex:0 0 auto;min-block-size:var(--size-44)}
.intake-selection-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-12);font-size:var(--text-base);margin-block-end:var(--space-12)}
.intake-selection-actions{display:flex;flex-wrap:wrap;gap:var(--space-16)}
.intake-selection-actions button{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)}
.intake-selection-actions button:hover{background:transparent;border-color:transparent;text-decoration:underline}
/* The prototype puts the checklist in its own scroller. This does not, for two reasons
   measured here. A region that scrolls inside the page hides rows with no cue that they
   are there, which is the composition rule about hidden overflow; and `verify_overflow`
   reported the clipped rows overlapping the save button beneath them at the narrow
   width, because a rect scrolled out of a container is still a rect. The search, the
   count and "select all shown" are what keep a long list manageable instead. */
.intake-checklist{margin-block-end:var(--space-16);border:1px solid var(--color-border-default);border-radius:var(--radius-card)}
/* `flex-direction` is declared on purpose: `app.css` makes every <label> a column, and
   a checklist row is a row. */
.intake-choice{display:flex;flex-direction:row;align-items:center;gap:var(--space-16);padding:var(--space-16);border-block-end:1px solid var(--color-border-default);cursor:pointer;flex:0 0 auto}
.intake-choice:last-child{border-block-end:0}
.intake-choice:has(input:checked){background:var(--color-surface-selected)}
.intake-choice:focus-within{outline:var(--space-2) solid var(--color-focus-ring);outline-offset:calc(-1 * var(--space-2))}
.intake-choice>input{inline-size:var(--space-20);block-size:var(--space-20);min-block-size:var(--space-20);accent-color:var(--color-action-primary);flex-shrink:0}
.intake-choice-identity{display:flex;align-items:center;gap:var(--space-12);flex:1 1 auto;min-inline-size:0}
/* TICKET 117 measured two catalog inks between 3:1 and 4.5:1 (`kbank` 4.22:1, `gsb`
   4.27:1) and recorded the rule: the initials label is large-text size or it is treated
   as a graphic. It is large text here, and the bank NAME is printed as text beside it in
   every case.
   TICKET 130: that step and weight, and everything else these two rules used to restate,
   are in finance_app/static/bank-catalog.css now, the one copy, loaded before this file.
   What stays is this page's own reading: the largest badge of the five screens, because
   a checklist row is a target a person presses and the mark is the only thing in it that
   is not words, and a mark that fills the box rather than sitting inside it. */
.intake-choice-identity .bank-icon{inline-size:var(--size-48);block-size:var(--size-48);
  min-inline-size:var(--size-48)}
.intake-choice-identity .bank-mark{position:absolute;inset:0;padding:var(--space-4)}
.intake-choice-text{min-inline-size:0}
.intake-choice-text strong{display:block;font-size:var(--text-md);font-weight:var(--weight-semibold);overflow-wrap:anywhere}
.intake-choice-text small,.intake-choice-text .intake-choice-number{display:block;font-size:var(--text-base);color:var(--color-text-secondary);overflow-wrap:anywhere}
.intake-choice-limit{text-align:right;flex-shrink:0}
.intake-choice-limit>small{display:block;font-size:var(--text-sm);color:var(--color-text-secondary)}
/* TICKET 157: the unit sits beside the figure ("50,000 บาท"), as design A prints it; the
   label rule above used to reach it too and put "บาท" on a line of its own. */
.intake-choice-limit strong small{font-size:var(--text-sm);font-weight:var(--weight-regular);color:var(--color-text-secondary)}
.intake-choice-limit strong{display:block;font-size:var(--text-md);font-variant-numeric:tabular-nums}
.intake-choice-off{display:inline-block;margin-block-start:var(--space-4);padding:var(--space-2) var(--space-8);border-radius:var(--radius-pill);background:var(--color-surface-draft);color:var(--color-text-secondary);font-size:var(--text-xs);font-weight:var(--weight-semibold)}
.intake-empty{margin:0;padding:var(--space-20);font-size:var(--text-sm);color:var(--color-text-secondary)}
.intake-warning{margin:0 0 var(--space-16);padding:var(--space-14);background:var(--color-feedback-warning-bg);color:var(--color-feedback-hold-text);border-radius:var(--radius-control);font-size:var(--text-sm)}
.intake-warning:empty{display:none}

/* --- Step 4: the confirmation. ---------------------------------------------------- */
.intake-confirm{border:1px solid var(--color-border-default);border-radius:var(--radius-card);overflow:hidden}
.intake-confirm-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--space-8) var(--space-16);align-items:baseline;padding:var(--space-16) var(--space-20);border-block-start:1px solid var(--color-border-default)}
.intake-confirm-row:first-child{border-block-start:0}
.intake-confirm-row>dt{color:var(--color-text-secondary);font-size:var(--text-sm)}
.intake-confirm-row>dd{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--space-8) var(--space-16);margin:0;min-inline-size:0;font-size:var(--text-base);font-weight:var(--weight-semibold);overflow-wrap:anywhere}
.intake-confirm-value{min-inline-size:0;overflow-wrap:anywhere}
.intake-confirm-row>dd small{display:block;font-weight:var(--weight-regular);color:var(--color-text-secondary);font-size:var(--text-sm)}
.intake-confirm-row>dd>button{flex:0 0 auto;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)}
.intake-confirm-row>dd>button:hover{background:transparent;border-color:transparent;text-decoration:underline}
.intake-confirm-accounts{margin-block-start:var(--space-24)}
.intake-confirm-heading{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--space-12);margin-block-end:var(--space-12)}
.intake-confirm-heading h3{margin:0;font-size:var(--text-lg);font-weight:var(--weight-semibold)}
.intake-confirm-heading button{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)}
.intake-confirm-heading button:hover{background:transparent;border-color:transparent;text-decoration:underline}
.intake-confirm-account{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-12);padding:var(--space-16) var(--space-20);border-block-start:1px solid var(--color-border-default)}
.intake-confirm-account:first-child{border-block-start:0}
.intake-go{display:flex;flex-wrap:wrap;gap:var(--space-12);justify-content:flex-end;margin-block-start:var(--space-24)}
.intake-go button{min-block-size:var(--size-44)}
.intake-go-primary{display:flex}

/* TICKET 157 (SI-07): a worker that ended without anybody pressing Stop, said where the
   intake entry lands for it (step 4), in the error ink, above the details it asks the
   person to check. */
.intake-interrupted{margin:0 0 var(--space-20);padding:var(--space-14) var(--space-16);border:1px solid var(--color-action-destructive-border);border-radius:var(--radius-control);background:var(--color-feedback-error-bg);color:var(--color-feedback-error-text)}
.intake-interrupted strong{display:block;font-size:var(--text-base);font-weight:var(--weight-semibold)}
.intake-interrupted p{margin:var(--space-4) 0 0;font-size:var(--text-sm);line-height:var(--leading-normal)}

/* TICKET 132: the separate receiving page (`.intake-receiving-state`,
   `.intake-receiving-actions`) is retired -- Stop is step 4's own button now, in
   `.intake-go` below, and whether receiving is open is the side panel's own row
   (`.intake-side-row`, above), not a second line repeating it. */

/* --- The popup. A native dialog, one check, one way out, one automatic return. ----- */
.intake-success-dialog{inline-size:calc(100% - var(--space-32));max-inline-size:calc(var(--space-64)*7);margin:auto;padding:var(--space-40) var(--space-32);border:1px solid var(--color-border-default);border-radius:var(--radius-card);background:var(--color-surface-card);color:var(--color-text-primary);text-align:center;box-shadow:var(--shadow-sm)}
.intake-success-dialog::backdrop{background:color-mix(in srgb,var(--color-text-primary) 40%,transparent)}
.intake-success-dialog[open]{animation:intake-success-enter var(--duration-slow) var(--ease-out) both}
.intake-success-icon{display:grid;place-items:center;inline-size:var(--size-64);block-size:var(--size-64);margin:0 auto var(--space-24);border-radius:var(--radius-pill);background:var(--color-surface-selected);color:var(--color-action-primary)}
.intake-success-icon svg{inline-size:var(--size-48);block-size:var(--size-48);stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.intake-success-icon circle{stroke-opacity:var(--opacity-muted)}
/* About half a second for the check to draw itself, which is what the owner asked for:
   `--duration-slow` is the theme's longest step and the check runs at twice it. */
.intake-success-dialog[open] .intake-success-check{stroke-dasharray:1;animation:intake-success-check calc(var(--duration-slow)*2) var(--ease-out) both}
.intake-success-dialog h2{margin:0;font-size:var(--text-xl);line-height:var(--leading-normal)}
.intake-success-dialog p{font-size:var(--text-base);line-height:var(--leading-relaxed);color:var(--color-text-secondary);margin:var(--space-12) 0 var(--space-24)}
.intake-success-dialog .intake-success-return{min-block-size:var(--size-44);inline-size:100%}
@keyframes intake-success-enter{from{opacity:0;transform:translateY(var(--space-12))}to{opacity:1;transform:translateY(0)}}
@keyframes intake-success-check{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){
  /* The content is in the markup and is never revealed BY an animation, so stopping the
     motion loses nothing: the dialog and its check are simply already finished. */
  .intake-success-dialog[open],.intake-success-dialog[open] .intake-success-check{animation:none}
  .intake-success-dialog[open] .intake-success-check{stroke-dasharray:none;stroke-dashoffset:0}
}

/* --- Narrow. Measured against the COLUMN this page is drawn in, not the window.
   TICKET 157 (SI-01): the page is full width now that the settings rail is gone, so at a
   1280 viewport the work panel and the status panel sit side by side again, as in design A,
   and at 768 they stack under a two-by-two stepper. -------------------------------- */
#telegram-wizard{container-type:inline-size}
@container (max-width:860px){
  .intake-layout{grid-template-columns:minmax(0,1fr)}
  .intake-work,.intake-side{padding:var(--space-20)}
}
@container (max-width:780px){
  /* Four across stops holding a Thai step name at about 150px; two by two is what the
     design's own phone layout does and what the column has room for. */
  .intake-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-8)}
}
@container (max-width:420px){
  /* TICKET 157 (SI-05): the stepper STAYS two by two on a phone, as design A's does; it
     used to become four full-width rows here, a screen of its own before the step. */
  .intake-step{gap:var(--space-2) var(--space-8);padding:var(--space-10) var(--space-12)}
  .intake-step>.intake-step-n{inline-size:var(--size-28);block-size:var(--size-28);font-size:var(--text-sm)}
  .intake-step>strong{font-size:var(--text-sm)}
  .intake-step>small{font-size:var(--text-xs)}
  .intake-work,.intake-side{padding:var(--space-16)}
  .intake-confirm-row{grid-template-columns:minmax(0,1fr);padding:var(--space-12) var(--space-16)}
  .intake-confirm-row>button{justify-self:start}
  .intake-actions>button,.intake-account-tools>button{inline-size:100%}
  .intake-choice{flex-wrap:wrap}
  .intake-choice-limit{text-align:left}
  /* A confirmed account is one short block: the mark, the name, the bank and number, and
     the daily limit on ONE line under them ("วงเงินโอนออกรายวัน 50,000 บาท"), where it
     used to take three. */
  .intake-confirm-account{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-4);padding:var(--space-12) var(--space-16)}
  .intake-confirm-account .intake-choice-identity{align-items:flex-start}
  .intake-confirm-account .intake-choice-identity .bank-icon{inline-size:var(--size-36);block-size:var(--size-36);min-inline-size:var(--size-36)}
  .intake-confirm-account>.intake-choice-limit{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-6);padding-inline-start:calc(var(--size-36) + var(--space-12));text-align:left}
  .intake-confirm-account>.intake-choice-limit small,.intake-confirm-account>.intake-choice-limit strong{display:inline}
  .intake-go{justify-content:stretch}
  .intake-go>button,.intake-go-primary{flex:1 1 0}
  .intake-go-primary>button{inline-size:100%}
}
/* TICKET 157 (SI-05, ticket 141): on a phone the step's one live action -- "ยืนยันและเปิด
   รับสลิป" while it can be pressed -- is a bar pinned to the bottom of the screen, so it is
   reachable wherever the person has scrolled to. One control: Stop (disabled until
   receiving is open) stays in the page. Ticket 141's two-button bar measured 124 CSS pixels at
   320 and ran into the old eight-hundred-pixel collapsed sidebar; ticket 153's phone
   header is one row, and this bar is one button high. The page keeps room at its end so
   the bar never covers the last of it. */
@media (max-width:700px){
  .intake-go[data-bar=true] .intake-go-primary{position:fixed;inset-inline:0;inset-block-end:0;z-index:var(--z-sticky);padding:var(--space-12) var(--space-16);background:var(--color-surface-card);border-block-start:1px solid var(--color-border-default);box-shadow:var(--shadow-sm)}
  .intake-go[data-bar=true] .intake-go-primary>button{inline-size:100%}
  #telegram-wizard:has(.intake-go[data-bar=true]){padding-block-end:calc(var(--size-44) + var(--space-48))}
}

/* --- TICKET 199: "Change bot". On the bot step, a secondary action under the connected
   bot that opens a small form; on the confirmation's bot row while receiving, the same
   action disabled, with the reason beside it in plain text (not only a greyed button). */
.intake-change-bot-action{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-8) var(--space-12);margin-block-start:var(--space-16)}
.intake-change-bot-action>button{min-block-size:var(--size-44)}
.intake-change-bot-reason{font-size:var(--text-sm);font-weight:var(--weight-regular);color:var(--color-text-secondary);overflow-wrap:anywhere}
.intake-confirm-row>dd>.intake-change-bot-action{margin:0;justify-content:flex-end}
.intake-change-bot{display:grid;grid-template-columns:minmax(0,1fr);gap:0;align-items:stretch;margin-block-start:var(--space-20);padding:var(--space-20);background:var(--color-surface-page);border:1px solid var(--color-border-default);border-radius:var(--radius-control)}
.intake-change-bot code{font-family:var(--font-mono);white-space:nowrap}
.intake-change-bot>h3{margin:0 0 var(--space-12);font-size:var(--text-lg);font-weight:var(--weight-semibold)}
.intake-change-bot>.intake-warning{margin:0 0 var(--space-20);line-height:var(--leading-normal)}
.intake-change-bot>.check{margin-block-end:var(--space-12)}
.intake-change-bot>.intake-feedback{margin:0}
.intake-change-bot>.intake-actions{justify-content:flex-end}
.intake-bot-changed{margin:0 0 var(--space-4)}
@container (max-width:420px){
  .intake-change-bot{padding:var(--space-16)}
  .intake-confirm-row>dd>.intake-change-bot-action{justify-content:flex-start}
  .intake-change-bot-action>button{inline-size:100%}
}

/* --- TICKET 263: the daily summary groups, under step 4's actions. A section of its own, the
   same row and command shapes the step already draws; every control in it is secondary. --- */
.intake-summary{margin-block-start:var(--space-32);padding-block-start:var(--space-24);border-block-start:1px solid var(--color-border-default)}
/* TICKET UX-AF (the owner's mockup, C): a card of its own with its one primary action in its head. */
.intake-summary{padding:var(--space-20) var(--space-24);background:var(--color-surface-card);border:1px solid var(--color-border-default);
  border-radius:var(--radius-card-lg);box-shadow:var(--shadow-sm)}
.intake-summary-head{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:var(--space-12) var(--space-16)}
.intake-summary-head{margin-block-end:var(--space-12)}
.intake-summary-head h3{margin:0;font-size:var(--text-lg);font-weight:var(--weight-semibold)}
.intake-summary-sub{margin:var(--space-4) 0 0;font-size:var(--text-sm);color:var(--color-text-secondary)}
.intake-summary-add{flex:0 0 auto}
.intake-summary-why{margin:0 0 var(--space-12);color:var(--color-feedback-error-text)}
.intake-summary-status[data-delivered=false]{color:var(--color-feedback-error-text)}
.intake-summary-note{margin:var(--space-16) 0 0;font-size:var(--text-sm);color:var(--color-text-secondary)}
.intake-summary-copied{align-self:center;color:var(--color-text-secondary)}
.intake-summary-lede{margin:0 0 var(--space-16);font-size:var(--text-sm);line-height:var(--leading-normal);color:var(--color-text-secondary)}
.intake-summary-group .intake-choice-text small{display:block;overflow-wrap:anywhere}
.intake-summary-remove{display:flex;flex-wrap:wrap;gap:var(--space-8)}
.intake-summary-remove>button{min-block-size:var(--size-44)}
.intake-summary>.check{margin-block-start:var(--space-16)}
@container (max-width:420px){
  .intake-summary-remove,.intake-summary-remove>button{inline-size:100%}
  .intake-summary{padding:var(--space-16)}
  .intake-summary-add{inline-size:100%}
}

/* ===== TICKET 269 begin: the "รับสลิป" tab as the owner's mockup (19 ต.ค. 2569) =============================
   The setup is one card, its title the step on screen and the steps one line of words under it ("1 เชื่อมบอต →
   2 ยืนยันกลุ่ม → ..."), each still the button that opens its step; what the company stands at is a quiet row under
   the card; the daily summary groups are a card of their own under both, the mockup's panel: its head with the one
   action, a row per group, "ดูตัวอย่างข้อความ Telegram", and the note. Every value is a token. */
.intake-layout{grid-template-columns:minmax(0,1fr);gap:var(--space-16)}
.intake-work{padding:var(--space-20);border-radius:var(--radius-card-lg);box-shadow:var(--shadow-sm)}
.intake-work>h2{font-size:var(--text-lg)}
.intake-work>.intake-steps{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4) var(--space-8);margin:var(--space-12) 0 var(--space-16)}
.intake-work>.intake-steps>li{display:flex;align-items:center;gap:var(--space-8)}
/* The arrow ends its step, so a line that wraps on a phone starts with a step, never with an arrow. */
.intake-work>.intake-steps>li:not(:last-child)::after{content:"\2192";color:var(--color-text-secondary);font-size:var(--text-sm)}
.intake-work .intake-step{display:inline-flex;align-items:baseline;gap:var(--space-4);inline-size:auto;min-block-size:var(--size-36);padding:var(--space-4) var(--space-6);
  background:transparent;border:0;border-radius:var(--radius-control);font-size:var(--text-sm);color:var(--color-text-secondary)}
.intake-work .intake-step:hover:not(:disabled){background:var(--color-surface-sunken)}
.intake-work .intake-step>.intake-step-n{display:inline;inline-size:auto;block-size:auto;background:transparent;color:inherit;font-weight:var(--weight-regular)}
.intake-work .intake-step[aria-current=step]>.intake-step-n,.intake-work .intake-step[data-done=true]>.intake-step-n{background:transparent;color:inherit}
.intake-work .intake-step>strong{font-size:var(--text-sm);font-weight:var(--weight-regular)}
.intake-work .intake-step>small{font-size:var(--text-xs)}
.intake-work .intake-step>small{font-weight:var(--weight-regular)}
.intake-work .intake-step>small::before{content:"\00b7\00a0"}
.intake-work .intake-step[aria-current=step]{background:transparent;color:var(--color-action-primary)}
.intake-work .intake-step[aria-current=step]>strong{font-weight:var(--weight-semibold)}
.intake-work .intake-step:disabled{opacity:1;color:var(--color-text-caption)}
.intake-side{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-4) var(--space-20);padding:var(--space-12) var(--space-16);background:var(--color-surface-sunken);
  border:0;border-radius:var(--radius-control)}
.intake-side>h2{flex:1 1 100%;margin:0;font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--color-text-secondary)}
.intake-side>#intake-setup-side-rows{display:flex;flex-wrap:wrap;gap:var(--space-4) var(--space-20)}
.intake-side .intake-side-row{display:inline-flex;gap:var(--space-6);padding:0;border:0;font-size:var(--text-xs)}
.intake-side .intake-side-row>strong{font-weight:var(--weight-medium);color:var(--color-text-primary)}
.intake-side>.intake-note{flex:1 1 100%;margin:0;padding:0;background:transparent;font-size:var(--text-xs)}

/* The summary groups: the mockup's panel. */
.intake-summary-host{container:intake-summary / inline-size;margin-block-start:var(--space-20)}
.intake-summary-host:empty{display:none}
.intake-summary-host>.intake-summary{margin:0;padding:0;overflow:hidden}
.intake-summary-host .intake-summary-head{align-items:center;margin:0;padding:var(--space-20);border-bottom:1px solid var(--color-border-default)}
.intake-summary-host .intake-summary-sub{font-size:var(--text-xs)}
.intake-summary-host .intake-summary>:not(.intake-summary-head){margin-inline:var(--space-20)}
.intake-summary-host #intake-summary-groups{margin-block-start:var(--space-4);border:0;border-radius:0}
.intake-summary-host .intake-summary-group{padding:var(--space-12) 0;border-block-start:1px solid var(--color-border-subtle)}
.intake-summary-host .intake-summary-group:first-child{border-block-start:0}
.intake-summary-host .intake-summary-group .intake-choice-text strong{font-size:var(--text-base)}
.intake-summary-host .intake-summary-group .intake-choice-text small{font-size:var(--text-xs)}
.intake-summary-host .intake-summary-remove>button{min-block-size:var(--size-36);padding-block:var(--space-4);font-size:var(--text-sm)}
.intake-summary-host .intake-empty{padding:var(--space-16) 0}
.intake-summary-preview{display:flex;justify-content:center;margin-block-start:var(--space-8)}
.intake-summary-preview>.intake-note{margin:0;inline-size:100%;text-align:center}
.intake-summary-preview-open{min-block-size:var(--size-44);border-color:transparent;background:transparent;color:var(--color-text-link);font-weight:var(--weight-medium)}
.intake-summary-preview-open:hover{background:var(--color-surface-selected);border-color:transparent}
#intake-summary-preview-status:empty{display:none}
.intake-summary-host .intake-summary-note{margin-block:var(--space-12) var(--space-20);font-size:var(--text-xs)}
.intake-summary-host .intake-summary-why{margin-block:var(--space-12) 0}
/* The preview: the message as the group would see it, in a bubble. */
.intake-preview-dialog{width:min(calc(var(--space-64)*9),100%)}
.intake-preview-label{margin:0;font-size:var(--text-xs);font-weight:var(--weight-medium);color:var(--color-text-secondary)}
.intake-preview-message{display:flex;flex-direction:column;gap:var(--space-6);padding:var(--space-14) var(--space-16);background:var(--color-surface-sunken);
  border:1px solid var(--color-border-subtle);border-radius:var(--radius-card)}
.intake-preview-sender{font-size:var(--text-sm);color:var(--color-text-link)}
.intake-preview-text{margin:0;font-family:var(--font-sans);font-size:var(--text-sm);line-height:var(--leading-relaxed);white-space:pre-wrap;overflow-wrap:anywhere;color:var(--color-text-primary)}
.intake-preview-foot{font-size:var(--text-xs);color:var(--color-text-secondary)}
@container intake-summary (max-width:420px){
  .intake-summary-host .intake-summary-head{padding:var(--space-16)}
  .intake-summary-host .intake-summary>:not(.intake-summary-head){margin-inline:var(--space-16)}
  .intake-summary-add{inline-size:100%}
}
@media (max-width:760px){
  .intake-work{padding:var(--space-16)}
}
/* ===== TICKET 269 end ===== */
/* ===== TICKET 292 begin: the system alert group's card (page-intake-setup.js), the summary card's own rules; the
   line that says where the alerts go, and the owner's warning in the warning colour while neither group is linked. */
.intake-summary-host #intake-alert-group{margin-block-start:var(--space-4);border:0;border-radius:0}
.intake-summary-host .intake-alerts-where{margin-block:var(--space-16) 0;line-height:var(--leading-normal)}
/* ===== TICKET 292 end ===== */
/* ===== TICKET 294 begin: the link command addressed to the bot, under the bare one in the same box (the summary
   group's and the alert group's cards), with its own Copy; a hairline keeps the two forms apart. */
.intake-command-addressed{display:grid;gap:var(--space-12);min-inline-size:0;padding-block-start:var(--space-12);border-block-start:1px solid var(--color-border-default)}
/* ===== TICKET 294 end ===== */