/* The withdrawal review page, "ตรวจสอบรายการถอน" (lean-rollout ticket 226). Every colour, size,
   radius, weight and duration below is a token from finance_app/static/tokens.css; this sheet
   defines none of its own and holds no literal but the 1px hairline the rest of the app uses.

   Everything is scoped to #withdrawals-panel or to a `wd-` class this page owns, so nothing
   here lands on another page of the shell.

   One thing leads on each view: on the summary tab, the withdrawals to check at the display
   step and its one primary step (TICKET UX-WD); on the list tab, the rows; on the preview, the
   confirm at the end; on a withdrawal, the slips and the sum of what is ticked, side by side.
   The tables change shape by the width of their own region, not of the window, because the
   sidebar still takes width at 1024. */

#withdrawals-panel{display:block}

/* --- heading, freshness and the company ---------------------------------------------- */
.wd-heading{margin-block-end:var(--space-16)}
.wd-freshness{display:inline-flex;align-items:center;flex-wrap:wrap;gap:var(--space-8);margin:0;font-size:var(--text-sm);color:var(--color-text-secondary)}
#withdrawals-panel[data-withdrawals-state=ready] .wd-freshness .status-dot{background:var(--color-feedback-success-text)}
#withdrawals-panel[data-withdrawals-state=partial] .wd-freshness{color:var(--color-feedback-warning-text)}
#withdrawals-panel[data-withdrawals-state=partial] .wd-freshness .status-dot{background:var(--color-feedback-warning-text)}
#withdrawals-panel[data-withdrawals-state=processing] .wd-freshness .status-dot{background:var(--color-badge-processing-text)}
#withdrawals-panel:is([data-withdrawals-state=stale],[data-withdrawals-state=error]) .wd-freshness{color:var(--color-feedback-error-text)}
#withdrawals-panel:is([data-withdrawals-state=stale],[data-withdrawals-state=error]) .wd-freshness .status-dot{background:var(--color-feedback-error-text)}
.wd-retry{min-height:var(--size-36);padding-inline:var(--space-12);font-size:var(--text-sm)}

/* The company is the sidebar's one selection, named here read-only. TICKET UX-WD: a quiet line of
   context, not a card, so nothing above the view competes with the summary's lead; the import
   view's own company box still names it beside the file control. */
.wd-company{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--space-4) var(--space-8);max-inline-size:none;
  margin:0 0 var(--space-16);padding:0;font-size:var(--text-sm)}
.wd-company-label{font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--color-text-caption)}
.wd-company-name{font-size:var(--text-md);font-weight:var(--weight-semibold);color:var(--color-text-primary);overflow-wrap:anywhere}
.wd-company-note{font-size:var(--text-xs);color:var(--color-text-secondary)}

/* --- the notice: what just happened, and the next step ---------------------------------- */
.wd-notice{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-8) var(--space-16);margin:0 0 var(--space-20);
  padding:var(--space-12) var(--space-16);border:1px solid var(--color-border-default);border-radius:var(--radius-card);
  background:var(--color-surface-sunken);color:var(--color-text-primary)}
.wd-notice p{flex:1 1 var(--size-280);margin:0;max-width:none;color:inherit;font-size:var(--text-sm)}
.wd-notice[data-tone=success]{background:var(--color-feedback-success-bg);border-color:var(--color-feedback-success-bg);color:var(--color-feedback-success-text)}
.wd-notice[data-tone=warning]{background:var(--color-feedback-hold-bg);border-color:var(--color-border-lead);color:var(--color-feedback-hold-text)}
.wd-notice[data-tone=error]{background:var(--color-feedback-error-bg);border-color:var(--color-border-danger);color:var(--color-feedback-error-text)}
.wd-notice button{min-height:var(--size-36);font-size:var(--text-sm)}
.wd-notice-close{color:var(--color-text-primary);background:var(--color-surface-card)}

/* --- a view's own head ------------------------------------------------------------------- */
.wd-view{container:wd-view / inline-size}
.wd-view-head{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-8);margin:0 0 var(--space-16)}
.wd-view-title-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-12) var(--space-16);inline-size:100%}
.wd-view-title{margin:0;font-size:var(--text-xl);line-height:var(--leading-normal);overflow-wrap:anywhere}
.wd-view-title:focus,#withdrawals-panel h3[tabindex]:focus,.wd-conflict:focus{outline:none}
.wd-back{margin-inline-start:calc(-1 * var(--space-8))}
.wd-back:active{background:var(--color-action-ghost-hover);border-color:transparent}
.wd-actions{display:flex;flex-wrap:wrap;gap:var(--space-8)}
.wd-actions button,.wd-empty button,.wd-batch button,.wd-pager button,.wd-foot-secondary button{display:inline-flex;align-items:center;gap:var(--space-8)}
.wd-help{margin:0;font-size:var(--text-sm);color:var(--color-text-secondary)}
.wd-small{display:block;font-size:var(--text-xs);line-height:var(--leading-normal);color:var(--color-text-secondary)}
.wd-mono{font-family:var(--font-mono);font-size:var(--text-sm);overflow-wrap:anywhere}
.wd-caution{color:var(--color-feedback-warning-text)}
.wd-quiet-state{padding:var(--space-32) var(--space-16);text-align:center;color:var(--color-text-secondary)}
.wd-dot::before{content:"·"}
.wd-inline-note{margin:var(--space-12) 0;padding:var(--space-10) var(--space-14);max-width:none;border-radius:var(--radius-control);
  background:var(--color-surface-sunken);color:var(--color-text-primary);font-size:var(--text-sm)}
.wd-inline-note[data-tone=caution]{background:var(--color-feedback-hold-bg);color:var(--color-feedback-hold-text)}

/* --- no file yet: the empty state owns the space it is in ------------------------------ */
.wd-empty{display:flex;flex-direction:column;align-items:center;gap:var(--space-12);padding:var(--space-56) var(--space-24);
  text-align:center;background:var(--color-surface-card);border:1px dashed var(--color-border-idle);border-radius:var(--radius-card-lg)}
.wd-empty .icon{inline-size:var(--size-36);block-size:var(--size-36);color:var(--color-text-caption)}
.wd-empty h3{margin:0;font-size:var(--text-lg)}
.wd-empty p{margin:0;max-inline-size:56ch}

/* --- TICKET UX-WD: the two tabs over one answer --------------------------------------------- */
/* The top-up page's tabs (ticket 238), so the two pages read alike. */
.wd-tabs{margin:var(--space-4) 0 var(--space-20)}   /* TICKET UX-PR (F06): the look is app.css's `.app-tabs` / `.app-tab` */
.wd-tabpanel{display:grid;gap:var(--space-16);min-inline-size:0}

/* --- the summary: the open work leads --------------------------------------------------------- */
/* One lead: the count at the display step and the one primary button. The amount is "awaiting a
   check", in the text colours: it is never drawn as money missing (no red, no warning colour). */
.wd-focus{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-16) var(--space-32);
  padding:var(--space-24);background:var(--color-surface-card);border:1px solid var(--color-border-default);
  border-inline-start:var(--size-marker) solid var(--color-action-primary);border-radius:var(--radius-card-lg);box-shadow:var(--shadow-sm)}
.wd-focus[data-focus-state=waiting]{border-inline-start-color:var(--color-badge-processing-text)}
.wd-focus[data-focus-state=complete]{border-inline-start-color:var(--color-feedback-success-text)}
.wd-focus-words{display:grid;gap:var(--space-6);flex:1 1 calc(var(--size-280) + var(--size-72));min-inline-size:0}
.wd-focus-words p{margin:0;max-width:62ch}
.wd-focus-label{margin:0;font-size:var(--text-md);font-weight:var(--weight-semibold);color:var(--color-text-primary)}
.wd-focus-figure{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--space-4) var(--space-10);color:var(--color-text-primary)}
.wd-focus-count{font-size:var(--text-display-sm);font-weight:var(--weight-semibold);line-height:var(--leading-tight);letter-spacing:-0.02em;
  font-variant-numeric:tabular-nums}
.wd-focus-amount{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--space-4) var(--space-8);color:var(--color-text-primary)}
.wd-focus-amount-label{font-size:var(--text-sm);color:var(--color-text-secondary)}
.wd-focus-amount-figure{font-size:var(--text-lg);font-weight:var(--weight-semibold);font-variant-numeric:tabular-nums;white-space:nowrap}
.wd-focus>button{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-8)}
.wd-focus-note{flex:1 1 100%;margin:0;max-width:none}
.wd-unit{font-size:var(--text-md);font-weight:var(--weight-regular);color:var(--color-text-secondary)}

/* The warnings that change a decision: the one red line is a slip sent for a withdrawal the back
   office says failed; the others are the hold and quiet colours. Each has the step to its rows. */
.wd-alerts{display:grid;gap:var(--space-8);margin:0;padding:0;list-style:none}
.wd-alert{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-8) var(--space-12);padding:var(--space-12) var(--space-16);
  border:1px solid var(--color-border-default);border-radius:var(--radius-card);background:var(--color-surface-sunken);color:var(--color-text-primary)}
.wd-alert[data-tone=error]{border-color:var(--color-border-danger);background:var(--color-feedback-error-bg);color:var(--color-feedback-error-text)}
.wd-alert[data-tone=caution]{border-color:var(--color-border-lead);background:var(--color-feedback-hold-bg);color:var(--color-feedback-hold-text)}
.wd-alert>.icon{flex:none}
.wd-alert-words{display:grid;gap:var(--space-2);flex:1 1 var(--size-280);min-inline-size:0}
.wd-alert-words strong{font-size:var(--text-sm);color:inherit}
.wd-alert .wd-small{color:inherit}
.wd-alert button{min-height:var(--size-44)}

/* The batch at a glance: the whole total, then the four groups in one quiet strip (no four equal
   cards), each with a small marker of its own; the download beside the heading it downloads. */
.wd-overview{display:grid;gap:var(--space-12);padding:var(--space-20);background:var(--color-surface-card);
  border:1px solid var(--color-border-default);border-radius:var(--radius-card)}
.wd-overview-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-8) var(--space-16)}
.wd-overview-head h3{margin:0;font-size:var(--text-md)}
.wd-export{display:inline-flex;align-items:center;gap:var(--space-8);min-height:var(--size-44);white-space:normal;text-align:start}
.wd-export-status{margin:0;font-size:var(--text-sm);max-width:none}
.wd-export-status[data-state=error]{color:var(--color-feedback-error-text)}
.wd-total{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--space-4) var(--space-8);margin:0;max-width:none;color:var(--color-text-primary)}
.wd-total-label{font-size:var(--text-sm);color:var(--color-text-secondary)}
.wd-total-amount{font-size:var(--text-xl);font-weight:var(--weight-semibold);font-variant-numeric:tabular-nums;white-space:nowrap}
.wd-total-count{font-size:var(--text-sm);color:var(--color-text-secondary)}
.wd-groups{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;border:1px solid var(--color-border-subtle);border-radius:var(--radius-control)}
.wd-group{display:grid;align-content:start;gap:var(--space-2);padding:var(--space-12) var(--space-14);min-inline-size:0}
.wd-group+.wd-group{border-inline-start:1px solid var(--color-border-subtle)}
.wd-group dt{display:flex;align-items:center;gap:var(--space-6);font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--color-text-primary)}
.wd-group dt::before{content:"";flex:none;inline-size:var(--space-8);block-size:var(--space-8);border-radius:var(--radius-sm);background:var(--color-text-tertiary)}
.wd-group[data-group=confirmed] dt::before{border-radius:var(--radius-pill);background:var(--color-feedback-success-text)}
.wd-group[data-group=unresolved] dt::before{background:var(--color-badge-review-text)}
.wd-group[data-group=waiting] dt::before{background:var(--color-badge-processing-text)}
.wd-group dd{margin:0}
.wd-group-figure{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--space-4) var(--space-6)}
.wd-group-count{font-size:var(--text-xl);font-weight:var(--weight-semibold);line-height:var(--leading-snug);color:var(--color-text-primary);font-variant-numeric:tabular-nums}
.wd-group-figure .wd-unit,.wd-group-money .wd-unit{font-size:var(--text-sm)}
.wd-group-money{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--space-2) var(--space-6)}
.wd-group-amount{font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text-primary);font-variant-numeric:tabular-nums;white-space:nowrap}
.wd-group-note{font-size:var(--text-xs);color:var(--color-text-secondary)}

/* The details, folded: the results one by one, the source accounts, the notes. */
.wd-folds{display:grid;border-block-start:1px solid var(--color-border-default)}
.wd-fold{border-block-end:1px solid var(--color-border-default)}
.wd-fold-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-12);min-height:var(--size-48);
  padding:var(--space-10) var(--space-4);cursor:pointer;list-style:none;font-weight:var(--weight-semibold);color:var(--color-text-primary)}
.wd-fold-head::-webkit-details-marker{display:none}
.wd-fold-head:hover{background:var(--color-action-ghost-hover)}
.wd-fold-head .icon{flex:none;transition:transform var(--duration-fast) var(--ease-standard)}
.wd-fold[open]>.wd-fold-head .icon{transform:rotate(180deg)}
.wd-fold>:not(summary){margin-block-end:var(--space-16)}
.wd-fold-body{display:grid;gap:var(--space-10)}
.wd-report-notes{margin:0;padding:0 0 0 var(--space-20);font-size:var(--text-sm);color:var(--color-text-secondary)}
.wd-report-notes li+li{margin-block-start:var(--space-4)}

/* --- sections under the report ----------------------------------------------------------- */
.wd-section{margin-block-start:var(--space-32)}
.wd-section>h3{margin:0 0 var(--space-12);font-size:var(--text-md)}
.wd-section>.wd-help{margin-block:calc(-1 * var(--space-6)) var(--space-12)}
/* TICKET UX-WD: each result is a step to its own rows on the list, not a toggle any more. */
.wd-status-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(calc(var(--size-150) + var(--size-48)),1fr));gap:var(--space-8);margin:0;padding:0;list-style:none}
.wd-status-option{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-8);inline-size:100%;block-size:100%;
  padding:var(--space-12) var(--space-14);background:var(--color-surface-card);border-color:var(--color-border-default);
  color:var(--color-text-primary);font-weight:var(--weight-regular);text-align:start;white-space:normal}
.wd-status-option:hover{background:var(--color-action-secondary-hover);border-color:var(--color-border-strong)}
.wd-status-option:active{background:var(--color-action-secondary-hover);border-color:var(--color-border-strong)}
.wd-status-option .badge{white-space:normal;block-size:auto;min-block-size:var(--space-20)}
.wd-status-figures{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--space-4) var(--space-8)}
.wd-status-count{font-size:var(--text-xl);font-weight:var(--weight-semibold);line-height:var(--leading-snug)}
.wd-status-amount{font-size:var(--text-xs);color:var(--color-text-secondary)}

/* --- tables: a region of their own that changes shape by its own width -------------------- */
.wd-table-wrap{container:wd-table / inline-size;max-inline-size:100%;overflow-x:auto;background:var(--color-surface-card);
  border:1px solid var(--color-border-default);border-radius:var(--radius-card)}
.wd-table{inline-size:100%;min-inline-size:0;border-collapse:collapse}
.wd-table th,.wd-table td{padding:var(--space-12);text-align:start;vertical-align:top;border-block-end:1px solid var(--color-border-subtle);font-size:var(--text-sm)}
.wd-table thead th{padding-block:var(--space-10);font-size:var(--text-xs);font-weight:var(--weight-medium);color:var(--color-text-secondary);background:var(--color-surface-sunken);white-space:nowrap}
.wd-table tbody tr:last-child>*{border-block-end:0}
.wd-table .number{text-align:end;font-variant-numeric:tabular-nums}
.wd-table td.number{white-space:nowrap}
.wd-cell-label{display:none}
/* In a table row a day-and-time and an account number are one unit each and never break. */
.wd-table .wd-who small,.wd-table .wd-file-account .wd-mono,.wd-listed .wd-mono{white-space:nowrap;overflow-wrap:normal;word-break:normal}
.wd-id{display:block;font-family:var(--font-mono);font-size:var(--text-sm);font-weight:var(--weight-semibold);overflow-wrap:anywhere}
.wd-amount-figure{display:block;font-size:var(--text-md);font-weight:var(--weight-semibold);color:var(--color-text-primary)}
.wd-amount-figure[data-known=false]{font-size:var(--text-sm);font-weight:var(--weight-regular);color:var(--color-text-secondary);white-space:normal}
.wd-result .badge{white-space:nowrap}
.wd-result .wd-small{margin-block-start:var(--space-4)}
.wd-open{text-align:end}
.wd-open-button{display:inline-flex;align-items:center;gap:var(--space-6);min-height:var(--size-36);padding-inline:var(--space-12);font-size:var(--text-sm)}
.wd-account .badge{margin-block-start:var(--space-6)}
.wd-account small{display:block}
.wd-issue-list{margin:0;padding-inline-start:var(--space-16);font-size:var(--text-sm)}
.wd-issue-list li[data-fault=true]{color:var(--color-feedback-error-text)}
.wd-issue-list li+li{margin-block-start:var(--space-4)}
#withdrawals-panel tr[data-faulted=true]>td:first-child{box-shadow:inset var(--size-marker) 0 0 var(--color-feedback-error-text)}

/* A region narrower than a row of columns: each row is a block of its own, every bare figure
   says what it is, and the action takes the whole width. */
@container wd-table (max-width: 639px){
  .wd-table,.wd-table tbody{display:block}
  .wd-table thead{display:none}
  .wd-table tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-6) var(--space-12);
    padding:var(--space-14) var(--space-16);border-block-end:1px solid var(--color-border-subtle)}
  .wd-table tbody tr:last-child{border-block-end:0}
  .wd-table td{display:block;grid-column:1 / -1;padding:0;border:0;text-align:start;white-space:normal}
  .wd-table td.number{text-align:start}
  .wd-table .wd-who small,.wd-table .wd-file-account .wd-mono,.wd-listed .wd-mono{white-space:normal;overflow-wrap:anywhere}
  .wd-cell-label{display:block;font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--color-text-caption)}
  .wd-rows .wd-who,.wd-rows .wd-recipient,.wd-preview .wd-who{grid-column:1;grid-row:1}
  .wd-rows .wd-amount,.wd-preview .wd-amount{grid-column:2;grid-row:1;text-align:end}
  /* TICKET UX-WD: the back office's word and the slips side by side under the recipient and the
     amount, then the result, then the step to open it. */
  .wd-rows tr{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}
  .wd-rows .wd-source-status{grid-column:1}
  .wd-rows .wd-slip-cell{grid-column:2;text-align:end}
  .wd-rows .wd-amount .wd-cell-label,.wd-preview .wd-amount .wd-cell-label{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .wd-rows .wd-amount,.wd-preview .wd-amount{position:relative}
  .wd-preview .wd-line{grid-column:1 / -1;grid-row:auto;font-size:var(--text-xs);color:var(--color-text-caption)}
  .wd-preview .wd-line .wd-cell-label{display:inline;margin-inline-end:var(--space-4)}
  .wd-result .badge{white-space:normal;block-size:auto}
  .wd-open-button{inline-size:100%;justify-content:center;min-height:var(--size-44)}
  .wd-account-table td.number{grid-column:auto}
}

/* --- the rows' tools and pager ----------------------------------------------------------- */
.wd-tools{display:flex;align-items:flex-end;flex-wrap:wrap;gap:var(--space-12) var(--space-16);margin:0 0 var(--space-12)}
.wd-select{flex:0 1 calc(var(--size-280) - var(--size-40));font-size:var(--text-sm);color:var(--color-text-secondary)}
.wd-select select{font-size:var(--text-sm);color:var(--color-text-primary)}
.wd-toggle{min-height:var(--size-44);padding:var(--space-4) var(--space-16);border:1px solid var(--color-border-strong);border-radius:var(--radius-pill);
  background:var(--color-surface-card);color:var(--color-text-primary);font-size:var(--text-sm);font-weight:var(--weight-medium)}
.wd-toggle:hover{background:var(--color-action-secondary-hover);border-color:var(--color-border-strong)}
.wd-toggle:active{background:var(--color-action-secondary-hover);border-color:var(--color-border-strong)}
.wd-toggle[aria-pressed=true]{background:var(--color-surface-selected);border-color:var(--color-action-primary);color:var(--color-action-primary);font-weight:var(--weight-semibold)}
.wd-toggle[aria-pressed=true]:hover{background:var(--color-surface-accent-chip);border-color:var(--color-action-primary)}
.wd-clear{align-self:center}
.wd-rows-empty{padding:var(--space-32) var(--space-16);text-align:center;background:var(--color-surface-card);border:1px solid var(--color-border-default);border-radius:var(--radius-card)}
.wd-rows-empty p{margin:0 auto}
.wd-pager{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-12);margin-block-start:var(--space-12);font-size:var(--text-sm);color:var(--color-text-secondary)}
.wd-pager-buttons{display:flex;gap:var(--space-8);flex-wrap:wrap}

/* --- cards shared by import, preview and detail ------------------------------------------- */
.wd-card{padding:var(--space-20);background:var(--color-surface-card);border:1px solid var(--color-border-default);border-radius:var(--radius-card)}
.wd-card>h3{margin:0 0 var(--space-12);font-size:var(--text-md)}
.wd-card>h4{margin:var(--space-16) 0 var(--space-8);font-size:var(--text-sm)}
.wd-company-box{display:flex;align-items:flex-start;gap:var(--space-12);padding:var(--space-14) var(--space-16);
  border:1px solid var(--color-border-default);border-radius:var(--radius-control);background:var(--color-surface-page)}
.wd-company-box .icon{margin-block-start:var(--space-4);color:var(--color-action-primary)}
.wd-company-line{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--space-4) var(--space-8);margin:0;color:var(--color-text-secondary)}
.wd-company-line strong{font-size:var(--text-lg);color:var(--color-text-primary);overflow-wrap:anywhere}
.wd-import-card{display:grid;gap:var(--space-20);margin-block-end:var(--space-12)}
.wd-file-field{display:grid;gap:var(--space-8);padding:var(--space-24);border:1px dashed var(--color-border-idle);border-radius:var(--radius-control);background:var(--color-surface-page)}
.wd-file-label{flex:none;gap:var(--space-8);font-size:var(--text-md);font-weight:var(--weight-semibold);color:var(--color-text-primary)}
.wd-file-label input{background:var(--color-surface-card);font-size:var(--text-sm);font-weight:var(--weight-regular)}
.wd-file-status{display:flex;align-items:center;gap:var(--space-8);margin:0;min-block-size:var(--space-20);font-size:var(--text-sm);color:var(--color-text-primary)}
.wd-import-card[aria-busy=true] .wd-file-field{background:var(--color-surface-sunken)}

/* --- preview ------------------------------------------------------------------------------- */
.wd-preview-meta{display:grid;gap:var(--space-8);margin-block-end:var(--space-16)}
.wd-file-line{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-4) var(--space-10);margin:0;max-width:none;color:var(--color-text-primary)}
.wd-file-line strong{overflow-wrap:anywhere}
.wd-file-faults{margin:0 0 var(--space-16);padding:var(--space-16) var(--space-20);border:1px solid var(--color-border-lead);border-radius:var(--radius-card);
  background:var(--color-feedback-hold-bg);color:var(--color-feedback-hold-text)}
.wd-file-faults[data-tone=error]{border-color:var(--color-border-danger);background:var(--color-feedback-error-bg);color:var(--color-feedback-error-text)}
.wd-file-faults-head{display:flex;align-items:center;gap:var(--space-8)}
.wd-file-faults h3{margin:0;font-size:var(--text-md);color:inherit}
.wd-file-faults p,.wd-file-faults li{color:inherit}
.wd-file-faults p{margin:var(--space-8) 0;font-size:var(--text-sm)}
.wd-file-faults .wd-issue-list li[data-fault]{color:inherit}
.wd-preview-summary{margin-block-end:var(--space-12)}
.wd-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--size-150),1fr));gap:var(--space-12) var(--space-16);margin:0}
.wd-facts dt{font-size:var(--text-xs);color:var(--color-text-secondary)}
.wd-facts dd{margin:0;font-size:var(--text-lg);font-weight:var(--weight-semibold);font-variant-numeric:tabular-nums;color:var(--color-text-primary)}
.wd-facts [data-tone=caution] dd{color:var(--color-feedback-warning-text)}
.wd-chips{display:flex;flex-wrap:wrap;gap:var(--space-8);margin:var(--space-16) 0 0;padding:0;list-style:none}
.wd-chips li{display:inline-flex;align-items:center;gap:var(--space-6);padding:var(--space-4) var(--space-8);border:1px solid var(--color-border-default);border-radius:var(--radius-pill)}
.wd-chip-count{font-size:var(--text-sm);font-weight:var(--weight-semibold)}
.wd-preview-foot{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:var(--space-16);
  margin-block-start:var(--space-24);padding-block-start:var(--space-20);border-block-start:1px solid var(--color-border-default)}
.wd-foot-secondary{display:flex;flex-wrap:wrap;gap:var(--space-8)}
.wd-foot-primary{display:flex;flex-direction:column;align-items:flex-end;gap:var(--space-6);margin-inline-start:auto;max-inline-size:100%}
.wd-confirm-why{text-align:end;max-inline-size:44ch}
.wd-conflict{flex:1 1 100%;display:flex;align-items:flex-start;gap:var(--space-10);margin-block-start:var(--space-12);padding:var(--space-12) var(--space-16);
  border:1px solid var(--color-border-danger);border-radius:var(--radius-card);background:var(--color-feedback-error-bg);color:var(--color-feedback-error-text)}
.wd-conflict p{margin:0 0 var(--space-8);max-width:none;color:inherit;font-size:var(--text-sm)}
.wd-conflict .icon{margin-block-start:var(--space-2)}
.wd-conflict button{min-height:var(--size-36);font-size:var(--text-sm)}

/* --- detail --------------------------------------------------------------------------------- */
.wd-detail-context{margin:calc(-1 * var(--space-8)) 0 var(--space-16)}
.wd-detail-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,calc(var(--size-280) + var(--space-56)));gap:var(--space-16);align-items:start}
.wd-detail-grid:has(>:only-child){grid-template-columns:minmax(0,1fr)}
.wd-detail-main,.wd-detail-side{display:grid;gap:var(--space-16);min-inline-size:0}
/* TICKET UX-WD: the file's values and the slips' verdict side by side above the decision; the
   amount, the sum and the confirm stay in view beside the slips while they scroll; the two ways to
   fix a withdrawal side by side under it. */
.wd-detail-facts,.wd-detail-fixes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-16);align-items:start;margin-block-end:var(--space-16)}
.wd-detail-fixes{margin-block:var(--space-16) 0}
.wd-detail-side{position:sticky;inset-block-start:var(--space-16)}
.wd-values{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:var(--space-8) var(--space-16);margin:0}
.wd-values>div{display:contents}
.wd-values dt{font-size:var(--text-sm);color:var(--color-text-secondary)}
.wd-values dd{margin:0;font-size:var(--text-sm);color:var(--color-text-primary);overflow-wrap:anywhere}
.wd-review-status{margin:0 0 var(--space-8)}
.wd-reasons{margin:0;padding-inline-start:var(--space-20);font-size:var(--text-sm);color:var(--color-text-primary)}
.wd-reasons li+li{margin-block-start:var(--space-4)}
.wd-candidates{display:grid;gap:0;margin:var(--space-12) 0 0;padding:0;list-style:none}
.wd-candidate{display:flex;align-items:flex-start;gap:var(--space-8);padding:var(--space-12) 0;border-block-start:1px solid var(--color-border-subtle)}
.wd-candidate:first-child{border-block-start:0}
.wd-pick-box{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;inline-size:var(--size-44);block-size:var(--size-44);margin-inline-start:calc(-1 * var(--space-10))}
.wd-pick-box input{inline-size:var(--size-24);block-size:var(--size-24);min-height:var(--size-24);margin:0;padding:0;accent-color:var(--color-action-primary)}
.wd-pick-box:has(input:disabled){opacity:var(--opacity-disabled)}
.wd-pick-label{display:contents}
.wd-candidate-body{flex:1 1 auto;min-inline-size:0;display:grid;gap:var(--space-2)}
.wd-candidate-top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-4) var(--space-12)}
.wd-candidate-amount{font-size:var(--text-md);font-weight:var(--weight-semibold);font-variant-numeric:tabular-nums;white-space:nowrap}
.wd-slip-id{min-height:var(--size-28);padding:var(--space-2) var(--space-4);margin-inline-start:calc(-1 * var(--space-4));font-family:var(--font-mono);font-size:var(--text-sm);overflow-wrap:anywhere;word-break:break-all}
.wd-slip-id:active{background:var(--color-action-ghost-hover);border-color:transparent}
.wd-marks{display:flex;flex-wrap:wrap;gap:var(--space-6);margin:var(--space-4) 0 0}
.wd-marks .badge{white-space:normal;block-size:auto;min-block-size:var(--space-20)}
.wd-pick-panel{display:grid;gap:var(--space-12)}
.wd-pick-panel>h3{margin:0}
.wd-pick-lines{display:grid;margin:0}
.wd-pick-line{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-12);padding:var(--space-10) 0;border-block-end:1px solid var(--color-border-subtle)}
.wd-pick-line dt{font-size:var(--text-sm);color:var(--color-text-secondary)}
.wd-pick-line dd{margin:0;font-size:var(--text-md);font-weight:var(--weight-semibold);font-variant-numeric:tabular-nums;white-space:nowrap}
.wd-pick-line:last-child dd{font-size:var(--text-lg)}
.wd-pick-panel[data-exact=true] .wd-pick-line:last-child dd{color:var(--color-feedback-success-text)}
.wd-pick-confirm{inline-size:100%}
.wd-pick-confirm:disabled{background:var(--color-action-disabled-bg);border-color:var(--color-action-disabled-border);color:var(--color-action-disabled-text);opacity:1}
.wd-assignment{display:grid;gap:var(--space-8)}
.wd-assignment>h3{margin:0}
.wd-assignment-kind{margin:0;font-weight:var(--weight-semibold);color:var(--color-text-primary)}
.wd-assigned-slips{display:grid;gap:var(--space-6);margin:0;padding:0;list-style:none}
.wd-assigned-slips li{display:grid;gap:var(--space-2)}
.wd-release{display:grid;gap:var(--space-8);margin:var(--space-8) 0 0;padding:var(--space-12) 0 0;border-block-start:1px solid var(--color-border-subtle);align-items:stretch}
.wd-release label{flex:none;font-size:var(--text-sm)}
.wd-release textarea{font-size:var(--text-sm)}
.wd-release textarea[aria-invalid=true]{border-color:var(--color-feedback-error-text)}
.wd-field-error{margin:0;font-size:var(--text-sm);color:var(--color-feedback-error-text)}
.wd-release .danger:active{background:var(--color-action-destructive-hover)}
.wd-timeline{display:grid;gap:var(--space-10);margin:0;padding:0;list-style:none}
.wd-timeline li{padding:var(--space-12) var(--space-16);background:var(--color-surface-card);border:1px solid var(--color-border-default);
  border-inline-start:var(--size-marker) solid var(--color-border-idle);border-radius:var(--radius-control)}
.wd-timeline li[data-active=true]{border-inline-start-color:var(--color-action-primary)}
.wd-timeline p{margin:0;max-width:none}
.wd-timeline-top{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-4) var(--space-12)}
.wd-timeline-top .wd-small{display:inline}
.wd-released{color:var(--color-text-primary)}
.wd-still{color:var(--color-feedback-success-text)}
.wd-listed .badge{margin-inline-start:var(--space-6)}

/* --- history ------------------------------------------------------------------------------ */
.wd-batches{display:grid;gap:var(--space-12);margin:var(--space-16) 0 0;padding:0;list-style:none}
.wd-batch{display:grid;gap:var(--space-6);padding:var(--space-16) var(--space-20);background:var(--color-surface-card);
  border:1px solid var(--color-border-default);border-radius:var(--radius-card)}
.wd-batch p{margin:0;max-width:none}
.wd-batch-head{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-6) var(--space-10)}
.wd-batch-head h3{margin:0;font-size:var(--text-md)}
.wd-batch-summary{margin:var(--space-4) 0 var(--space-8);font-size:var(--text-sm);color:var(--color-text-primary)}
.wd-batch button{justify-self:start}

/* The detail's two columns fold into one where the view itself is narrow. */
@container wd-view (max-width: 859px){
  .wd-detail-grid,.wd-detail-facts,.wd-detail-fixes{grid-template-columns:minmax(0,1fr)}
  .wd-detail-side{position:static}
}
@container wd-view (max-width: 639px){
  /* TICKET UX-WD: the lead keeps its place and its button the whole width; the four groups two by two. */
  .wd-focus{padding:var(--space-16)}
  .wd-focus>button{inline-size:100%}
  .wd-overview{padding:var(--space-16)}
  .wd-export{inline-size:100%;justify-content:center}
  .wd-groups{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wd-group:nth-child(odd){border-inline-start:0}
  .wd-group:nth-child(n+3){border-block-start:1px solid var(--color-border-subtle)}
  .wd-alert button{flex:1 1 100%}
  /* The picker's general sentence is said by its options too ("ล่าสุด"); an older batch's note stays. */
  .wd-picker>.wd-help{display:none}
  .wd-values{grid-template-columns:minmax(0,1fr)}
  .wd-values dd{margin-block-end:var(--space-6)}
  .wd-foot-primary{inline-size:100%;align-items:stretch}
  .wd-foot-primary button{inline-size:100%;justify-content:center}
  .wd-confirm-why{text-align:start;max-inline-size:none}
  .wd-actions{inline-size:100%}
  .wd-actions button{flex:1 1 auto;justify-content:center}
  .wd-tools .wd-select{flex:1 1 100%}
  .wd-file-field{padding:var(--space-16)}
  .wd-pager-buttons{flex:1 1 100%}
  .wd-pager-buttons button{flex:1 1 auto;justify-content:center}
}

/* --- TICKET 239: the back office export's recipient, its own status word, two warnings ---- */
/* The recipient is a person's name as the back office typed it, then the account (masked for a
   role without `reveal`, as the server sends it) and the bank as written. In a table row the
   account and the request time stay one unit each. */
.wd-recipient-name{display:block;font-weight:var(--weight-semibold);color:var(--color-text-primary);overflow-wrap:anywhere}
.wd-recipient-account{display:block}
.wd-table .wd-recipient .wd-mono{white-space:nowrap;overflow-wrap:normal;word-break:normal}
.wd-status-word{display:block;color:var(--color-text-primary);overflow-wrap:anywhere}
.wd-result .wd-marks{margin-block-start:var(--space-6)}
.wd-detail-recipient{margin:calc(-1 * var(--space-8)) 0 var(--space-8);max-width:none;font-size:var(--text-md);
  font-weight:var(--weight-semibold);color:var(--color-text-primary);overflow-wrap:anywhere}
/* A withdrawal's name is words ("รายการถอน #12"), not an id in the monospace face. */
.wd-withdrawal-name{display:block;font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--color-text-primary);white-space:nowrap}
/* Six or seven columns share a desk-width region: the recipient and a row's problems keep a
   readable width, and the times give way first. */
.wd-table .wd-recipient{min-inline-size:var(--size-150)}
.wd-preview .wd-issues{min-inline-size:calc(var(--size-150) + var(--size-48))}
@container wd-table (max-width: 639px){
  .wd-table .wd-recipient .wd-mono{white-space:normal;overflow-wrap:anywhere}
  .wd-table .wd-recipient,.wd-preview .wd-issues{min-inline-size:0}
  .wd-preview .wd-recipient{grid-column:1 / -1}
}

/* --- TICKET 241: the filters, Path A (search wider) and Path B (upload a missed slip) ------ */
/* The filters sit above the rows in one region: the search leads (one field and its button),
   then the back office's three words and the two warnings as toggle groups, then the account
   and "open work only". A chip per result pressed in the tiles stands near the rows, so on a
   phone the filter that narrows them is in view where they are. */
.wd-filters{display:grid;grid-template-columns:minmax(0,1fr);align-items:start;gap:var(--space-14);padding:var(--space-16);background:var(--color-surface-card);
  border:1px solid var(--color-border-default);border-radius:var(--radius-card)}
.wd-search{display:grid;gap:var(--space-6);margin:0}
.wd-search-label{flex:none;font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--color-text-primary)}
.wd-search-field{display:flex;align-items:stretch;flex-wrap:wrap;gap:var(--space-8)}
.wd-search-field input{flex:1 1 calc(var(--size-150) + var(--size-48));min-inline-size:0;min-height:var(--size-44);font-size:var(--text-sm)}
.wd-search-go{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-6);min-height:var(--size-44);
  flex:0 1 auto;min-inline-size:0;max-inline-size:100%}
.wd-filter-groups{display:flex;flex-wrap:wrap;gap:var(--space-12) var(--space-24)}
.wd-toggle-group{display:grid;gap:var(--space-6);min-inline-size:0}
.wd-toggle-group-label{font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--color-text-caption)}
.wd-toggle-row{display:flex;flex-wrap:wrap;gap:var(--space-8)}
.wd-toggle-row .wd-toggle{white-space:normal;text-align:start}
.wd-filter-more{display:flex;align-items:flex-end;flex-wrap:wrap;gap:var(--space-12) var(--space-16)}
/* TICKET UX-WD: the owner's three main tools in one row under the search; "ตัวกรองเพิ่มเติม" folds the
   rest; the filters in use stand by the rows, each a chip. */
.wd-filter-main{display:flex;align-items:flex-end;flex-wrap:wrap;gap:var(--space-12) var(--space-16)}
.wd-segment{display:inline-flex;border:1px solid var(--color-border-strong);border-radius:var(--radius-control);overflow:hidden;max-inline-size:100%}
.wd-segment-option{min-height:var(--size-44);padding:var(--space-4) var(--space-14);border:0;border-radius:0;background:var(--color-surface-card);
  color:var(--color-text-primary);font-size:var(--text-sm);font-weight:var(--weight-medium);white-space:normal}
.wd-segment-option+.wd-segment-option{border-inline-start:1px solid var(--color-border-strong)}
.wd-segment-option:hover{background:var(--color-action-secondary-hover)}
.wd-segment-option:active{background:var(--color-action-secondary-hover);transform:none}
.wd-segment-option[aria-pressed=true]{background:var(--color-surface-selected);color:var(--color-action-primary);font-weight:var(--weight-semibold)}
.wd-segment-option:focus-visible{outline-offset:calc(-1 * var(--space-4))}
.wd-more-toggle{display:inline-flex;align-items:center;gap:var(--space-8);min-height:var(--size-44);padding:var(--space-4) var(--space-14);
  border:1px solid var(--color-border-strong);border-radius:var(--radius-control);background:var(--color-surface-card);
  color:var(--color-text-primary);font-size:var(--text-sm);font-weight:var(--weight-medium)}
.wd-more-toggle:hover,.wd-more-toggle:active{background:var(--color-action-secondary-hover);border-color:var(--color-border-strong)}
.wd-more-toggle[aria-expanded=true]{border-color:var(--color-action-primary)}
.wd-more-toggle .icon{transition:transform var(--duration-fast) var(--ease-standard)}
.wd-more-toggle[aria-expanded=true] .icon{transform:rotate(180deg)}
.wd-more{display:grid;gap:var(--space-14);padding:var(--space-14) 0 0;border-block-start:1px solid var(--color-border-subtle)}
.wd-more[hidden]{display:none}
.wd-active{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-6) var(--space-12)}
.wd-chips-row{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-6) var(--space-8);min-inline-size:0}
.wd-rows-head{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:var(--space-4) var(--space-16);margin:0 0 var(--space-10)}
.wd-rows-head h3{margin:0;font-size:var(--text-md)}
.wd-withdrawal-line{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--space-2) var(--space-6);margin-block-start:var(--space-4)}
.wd-withdrawal-line .wd-withdrawal-name{display:inline;font-size:var(--text-xs);color:var(--color-text-secondary)}
.wd-slips{display:block;color:var(--color-text-primary)}
.wd-chip{display:inline-flex;align-items:center;gap:var(--space-6);min-height:var(--size-36);padding:var(--space-2) var(--space-12);
  border:1px solid var(--color-action-primary);border-radius:var(--radius-pill);background:var(--color-surface-selected);
  color:var(--color-action-primary);font-size:var(--text-sm);font-weight:var(--weight-medium)}
.wd-chip:hover{background:var(--color-surface-accent-chip)}
.wd-chip:active{background:var(--color-surface-accent-chip);border-color:var(--color-action-primary-hover)}
.wd-chip-x{font-size:var(--text-xs);font-weight:var(--weight-regular);color:var(--color-text-secondary)}
.wd-count{margin:0;max-width:none;font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text-primary)}

/* The row's upload: "กำลังอ่านสลิป" with the app's spinner while the reader has it, then where
   the slip came from (the owner's Q6) and what it is doing. */
.wd-upload-line{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-4) var(--space-8);margin-block-start:var(--space-6)}
.wd-reading{display:inline-flex;align-items:center;gap:var(--space-6);color:var(--color-badge-processing-text)}
.wd-reading.badge{block-size:auto}
.wd-origin{color:var(--color-text-primary)}
.wd-upload-line .badge{white-space:normal;block-size:auto}
.wd-basis{color:var(--color-feedback-hold-text)}
.wd-assignment-basis{margin:0;font-size:var(--text-sm);color:var(--color-feedback-hold-text)}

/* Path A and Path B: two cards under the slips the rules may fit. */
.wd-wider,.wd-upload-card,.wd-uploads{display:grid;gap:var(--space-12)}
.wd-wider>h3,.wd-upload-card>h3,.wd-uploads>h3{margin:0}
.wd-wider-modes{display:flex;flex-wrap:wrap;gap:var(--space-8)}
.wd-wider-modes button{display:inline-flex;align-items:center;gap:var(--space-8);min-height:var(--size-44);white-space:normal;text-align:start}
.wd-wider-modes button[aria-pressed=true]{background:var(--color-surface-selected);border-color:var(--color-action-primary);color:var(--color-action-primary)}
.wd-found{display:grid;gap:var(--space-8)}
.wd-found-count{margin:0;max-width:none;font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--color-text-primary)}
.wd-found-list{margin-block-start:0}
.wd-why-label{margin-block-start:var(--space-6);font-weight:var(--weight-semibold);color:var(--color-text-primary)}
.wd-why{margin:var(--space-2) 0 0;padding-inline-start:var(--space-20);font-size:var(--text-sm);color:var(--color-feedback-hold-text)}
.wd-why li+li{margin-block-start:var(--space-2)}
.wd-fix-actions{display:flex;flex-wrap:wrap;gap:var(--space-8);margin-block-start:var(--space-8)}
.wd-fix-actions button{min-height:var(--size-44);white-space:normal;text-align:start}
.wd-fix-actions button[aria-expanded=true]{background:var(--color-surface-selected);border-color:var(--color-action-primary)}
.wd-outside{display:grid;gap:var(--space-8);margin:var(--space-10) 0 0;padding:var(--space-12) var(--space-14);
  border:1px solid var(--color-border-lead);border-radius:var(--radius-control);background:var(--color-feedback-hold-bg)}
.wd-outside label{flex:none;font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--color-text-primary)}
.wd-outside textarea{font-size:var(--text-sm);background:var(--color-surface-card)}
.wd-outside textarea[aria-invalid=true]{border-color:var(--color-feedback-error-text)}
.wd-outside .wd-help{color:var(--color-feedback-hold-text)}
.wd-outside-actions{display:flex;flex-wrap:wrap;gap:var(--space-8)}
.wd-outside-actions button{min-height:var(--size-44)}
.wd-upload-card .wd-file-label{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-8)}
.wd-upload-card .wd-file-label .icon{color:var(--color-action-primary)}
.wd-upload-card[aria-busy=true] .wd-file-field{background:var(--color-surface-sunken)}
.wd-file-status[data-tone=error]{color:var(--color-feedback-error-text)}
.wd-known{display:grid;gap:var(--space-6);padding:var(--space-12) var(--space-14);border:1px solid var(--color-border-default);
  border-radius:var(--radius-control);background:var(--color-surface-sunken)}
.wd-known p{margin:0;max-width:none;font-size:var(--text-sm)}
.wd-upload-entry[data-upload-state=reading]{background:var(--color-surface-sunken);margin-inline:calc(-1 * var(--space-12));padding-inline:var(--space-12);border-radius:var(--radius-control)}
@container wd-view (max-width: 639px){
  .wd-filters{padding:var(--space-12)}
  .wd-filter-main>*,.wd-filter-main>.wd-multi{flex:1 1 100%}
  .wd-segment{display:flex}
  .wd-segment-option{flex:1 1 0}
  .wd-more-toggle{justify-content:space-between}
  .wd-search-go{flex:1 1 100%}
  .wd-filter-groups,.wd-toggle-group{flex:1 1 100%}
  .wd-filter-more .wd-select,.wd-filter-more .wd-toggle{flex:1 1 100%}
  .wd-wider-modes button,.wd-fix-actions button,.wd-outside-actions button{flex:1 1 100%;justify-content:center;text-align:center}
}

/* --- TICKET 247: any batch live, the result filter in the bar, and the slips no withdrawal holds --- */
/* The picker leads the results: a batch opened that is not the latest says so in the hold colours,
   with the way back beside it, so nobody confirms on yesterday's file thinking it is today's. */
.wd-picker{display:flex;align-items:flex-end;flex-wrap:wrap;gap:var(--space-12) var(--space-16);margin:0 0 var(--space-16);
  padding:var(--space-14) var(--space-16);background:var(--color-surface-card);border:1px solid var(--color-border-default);
  border-radius:var(--radius-card)}
.wd-picker-select{display:grid;gap:var(--space-6);flex:1 1 calc(var(--size-280) + var(--size-150));min-inline-size:0;font-weight:var(--weight-semibold);color:var(--color-text-primary)}
.wd-picker-select select{inline-size:100%;min-height:var(--size-44);font-weight:var(--weight-regular);text-overflow:ellipsis}
.wd-picker>.wd-help{flex:1 1 var(--size-280);margin:0}
/* TICKET UX-WD: the batch's own line (its file, who imported it, its state) under the choice, for both tabs. */
.wd-picker .wd-batch-line{flex:1 1 100%;order:1;margin:0;color:var(--color-text-secondary)}
.wd-picker>.wd-picker-note{order:2}
.wd-picker-note{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-8) var(--space-12);flex:1 1 100%;
  padding:var(--space-10) var(--space-14);border:1px solid var(--color-border-lead);border-radius:var(--radius-control);
  background:var(--color-feedback-hold-bg);color:var(--color-feedback-hold-text)}
.wd-picker-note p{flex:1 1 var(--size-280);margin:0;max-width:none;font-size:var(--text-sm);color:inherit}
.wd-picker-note button{min-height:var(--size-44)}
.wd-batch-buttons{display:flex;flex-wrap:wrap;gap:var(--space-8)}
.wd-batch-buttons button{display:inline-flex;align-items:center;gap:var(--space-8)}

/* The bar's "ผลตรวจ": a disclosure whose boxes are the tiles' own filter, on a line of its own so its
   open panel lays its nine results out in columns and never stretches the toggle groups beside it.
   The shortcuts lead the bar. A label here is a row (the app's own label is a column). */
.wd-filters .wd-filter-groups{align-items:flex-start}
.wd-multi{display:grid;gap:var(--space-6);flex:0 1 auto;min-inline-size:0}
.wd-multi-toggle{display:inline-flex;align-items:center;justify-content:space-between;gap:var(--space-8);min-height:var(--size-44);
  justify-self:start;min-inline-size:calc(var(--size-150) + var(--size-72));max-inline-size:100%;
  padding:var(--space-4) var(--space-14);border:1px solid var(--color-border-strong);border-radius:var(--radius-control);
  background:var(--color-surface-card);color:var(--color-text-primary);font-size:var(--text-sm);font-weight:var(--weight-medium);text-align:start}
.wd-multi-toggle:hover,.wd-multi-toggle:active{background:var(--color-action-secondary-hover);border-color:var(--color-border-strong)}
.wd-multi-toggle .icon{transition:transform var(--duration-fast)}
.wd-multi-toggle[aria-expanded=true]{border-color:var(--color-action-primary)}
.wd-multi-toggle[aria-expanded=true] .icon{transform:rotate(180deg)}
.wd-multi-panel{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--size-150),1fr));gap:var(--space-4) var(--space-12);
  margin:0;padding:var(--space-10) var(--space-12);border:1px solid var(--color-border-default);border-radius:var(--radius-control);
  background:var(--color-surface-page)}
.wd-multi-panel[hidden]{display:none}
.wd-multi-option{display:flex;flex:none;flex-direction:row;align-items:center;gap:var(--space-8);min-height:var(--size-44);
  font-size:var(--text-sm);font-weight:var(--weight-regular);color:var(--color-text-primary)}
.wd-multi-option input{inline-size:var(--size-24);block-size:var(--size-24);min-height:var(--size-24);margin:0;flex:none;accent-color:var(--color-action-primary)}
.wd-shortcuts .wd-toggle-row{gap:var(--space-8)}
.wd-shortcut[aria-pressed=true]{box-shadow:inset 0 0 0 1px var(--color-action-primary)}

/* The tile beside the results: the reverse check, one press away. */
.wd-unmatched-tile{display:flex;align-items:center;gap:var(--space-14);inline-size:100%;padding:var(--space-14) var(--space-18);
  background:var(--color-surface-card);border:1px solid var(--color-border-default);border-inline-start:var(--size-marker) solid var(--color-border-lead);
  border-radius:var(--radius-card);color:var(--color-text-primary);font-weight:var(--weight-regular);text-align:start;white-space:normal}
.wd-unmatched-tile:hover,.wd-unmatched-tile:active{background:var(--color-action-secondary-hover);border-color:var(--color-border-strong)}
.wd-unmatched-tile>.icon{flex:none;inline-size:var(--size-28);block-size:var(--size-28);color:var(--color-feedback-hold-text)}
.wd-unmatched-words{display:grid;gap:var(--space-4);flex:1 1 auto;min-inline-size:0}
.wd-unmatched-count{font-size:var(--text-md);font-weight:var(--weight-semibold);color:var(--color-text-primary)}
.wd-unmatched-tile>.icon:last-child{inline-size:var(--size-24);block-size:var(--size-24);color:var(--color-text-secondary)}

/* The view: its choices in the filter region, then the slips as rows (one card a line) or as a grid
   of pictures. A picture keeps the slip whole in its frame; the facts and actions sit under it. */
.wd-um-intro{margin-block-end:var(--space-16)}
.wd-um-tools{margin-block-end:var(--space-8)}
.wd-um-section>h3{margin-block-end:var(--space-6)}
.wd-um-section .wd-count{margin-block-end:var(--space-12)}
.wd-um-list,.wd-um-grid{display:grid;gap:var(--space-10);margin:0;padding:0;list-style:none}
.wd-um-grid{grid-template-columns:repeat(auto-fill,minmax(calc(var(--size-150) + var(--size-72)),1fr));gap:var(--space-12)}
.wd-um-card{display:grid;gap:var(--space-10);align-content:start;min-inline-size:0;padding:var(--space-14) var(--space-16);
  background:var(--color-surface-card);border:1px solid var(--color-border-default);border-radius:var(--radius-card)}
.wd-um-body{gap:var(--space-4)}
.wd-um-body p{margin:0;max-width:none}
.wd-um-picture{display:flex;align-items:center;justify-content:center;aspect-ratio:3 / 4;overflow:hidden;
  border:1px solid var(--color-border-subtle);border-radius:var(--radius-control);background:var(--color-surface-sunken)}
.wd-um-image{display:block;inline-size:100%;block-size:100%;object-fit:contain}
.wd-um-picture-note{display:inline-flex;align-items:center;gap:var(--space-6);padding:var(--space-12);font-size:var(--text-xs);
  text-align:center;color:var(--color-text-secondary)}
.wd-um-mark{display:grid;gap:var(--space-2);margin-block-start:var(--space-6);padding:var(--space-8) var(--space-12);
  border-inline-start:var(--size-marker) solid var(--color-border-lead);border-radius:var(--radius-sm);background:var(--color-surface-sunken)}
.wd-um-mark-reason{font-size:var(--text-sm);color:var(--color-text-primary);overflow-wrap:anywhere}
.wd-um-actions button{display:inline-flex;align-items:center;gap:var(--space-8)}
.wd-um-form{margin-block-start:var(--space-4)}
.wd-um-rows{display:grid;gap:var(--space-6);margin:0;padding:0;border:0;min-inline-size:0}
.wd-um-rows legend{margin-block-end:var(--space-6);padding:0;font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--color-text-primary)}
.wd-um-row{display:flex;flex:none;flex-direction:row;align-items:flex-start;gap:var(--space-10);min-inline-size:0;padding:var(--space-8) var(--space-10);
  border:1px solid var(--color-border-subtle);border-radius:var(--radius-control);background:var(--color-surface-card);font-weight:var(--weight-regular)}
.wd-um-row:has(input:checked){border-color:var(--color-action-primary);background:var(--color-surface-selected)}
.wd-um-row input{flex:none;inline-size:var(--size-24);block-size:var(--size-24);min-height:var(--size-24);margin:0;accent-color:var(--color-action-primary)}
.wd-um-row-words{display:grid;gap:var(--space-2);min-inline-size:0;color:var(--color-text-primary)}
.wd-um-row-words .badge{justify-self:start;white-space:normal;block-size:auto}
.wd-um-empty p+p{margin-block-start:var(--space-8)}
/* A grid card whose form is open takes the whole row, its picture beside the form, so the form is
   never squeezed into one narrow column of the grid. */
.wd-um-grid .wd-um-card:has(.wd-um-form){grid-column:1 / -1;grid-template-columns:minmax(0,calc(var(--size-150) + var(--size-72))) minmax(0,1fr);align-items:start}
@container wd-view (max-width: 639px){
  .wd-picker{padding:var(--space-12)}
  .wd-picker-note button,.wd-batch-buttons button{flex:1 1 100%;justify-content:center}
  .wd-multi-panel{grid-template-columns:minmax(0,1fr)}
  .wd-shortcuts .wd-toggle-row .wd-shortcut{flex:1 1 100%;justify-content:center;text-align:center}
  .wd-multi-toggle{justify-self:stretch}
  .wd-um-grid{grid-template-columns:repeat(auto-fill,minmax(var(--size-150),1fr));gap:var(--space-8)}
  .wd-um-card{padding:var(--space-12)}
  .wd-um-actions button{flex:1 1 100%;justify-content:center}
  /* Two pictures a row on a phone: each card's buttons keep their words on one line. */
  .wd-um-grid .wd-um-actions button{padding-inline:var(--space-8);font-size:var(--text-sm)}
  .wd-um-grid .wd-um-actions .icon{display:none}
  .wd-um-grid .wd-um-card:has(.wd-um-form){grid-template-columns:minmax(0,1fr)}
  .wd-um-grid .wd-um-card:has(.wd-um-form) .wd-um-picture{inline-size:50%;justify-self:center}
}

/* TICKET UX-WD: nothing moves for a person who asked for less motion. */
@media (prefers-reduced-motion: reduce){
  .wd-fold-head .icon,.wd-more-toggle .icon,.wd-multi-toggle .icon{transition:none}
}

/* TICKET UX-AF: a row requested one day and paid another says so; the tag wraps inside its cell. */
.wd-cross-day{display:inline-flex;height:auto;min-block-size:var(--space-20);margin-block-start:var(--space-4);white-space:normal;text-align:start}

/* --- TICKET UX-PR (the production review's F01): the queue beside the withdrawal ------------------------------
   The owner's mockup ("ตรวจทีละรายการ"): the queue of the list's rows at the side, the withdrawal on screen beside
   it with "ไว้ตรวจต่อ" and "ยืนยันและถัดไป" at the end of its evidence. The review is its own `wd-view` container,
   so the withdrawal's own layout answers its width, not the page's. Below the view's two-column width the queue
   is one folded line above the withdrawal ("เปลี่ยนรายการ"), so the withdrawal leads on a phone. */
.wd-queue-tools{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-8) var(--space-16);margin:0 0 var(--space-16)}
.wd-queue-count{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--space-4) var(--space-12);margin:0;max-width:none}
.wd-queue-count strong{font-size:var(--text-md)}
.wd-queue-count .wd-small{display:inline}
.wd-queue-all{min-height:var(--size-44)}
.wd-queue-panel{gap:0}
.wd-queue-foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-8) var(--space-16);margin-block-start:var(--space-16)}
.wd-queue-foot button{display:inline-flex;align-items:center;gap:var(--space-8);min-height:var(--size-44)}
.wd-queue-bench{display:grid;grid-template-columns:minmax(var(--size-150),calc(var(--size-280) - var(--space-24))) minmax(0,1fr);
  gap:var(--space-20);align-items:start}
.wd-queue{position:sticky;inset-block-start:var(--space-16);min-inline-size:0;padding:var(--space-12) var(--space-16) var(--space-16);
  background:var(--color-surface-card);border:1px solid var(--color-border-default);border-radius:var(--radius-card)}
.wd-queue-head{display:flex;align-items:center;gap:var(--space-8);min-height:var(--size-44);cursor:pointer;list-style:none;font-weight:var(--weight-semibold)}
.wd-queue-head::-webkit-details-marker{display:none}
.wd-queue-head .icon{flex:none;margin-inline-start:auto;transition:transform var(--duration-fast) var(--ease-standard)}
.wd-queue[open]>.wd-queue-head .icon{transform:rotate(180deg)}
.wd-queue-change{display:none;font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text-link)}
.wd-queue-list{display:grid;gap:var(--space-4);margin:var(--space-8) 0 0;padding:0;list-style:none;max-block-size:calc(100vh - var(--size-280));overflow-y:auto}
.wd-queue-item{display:grid;gap:var(--space-4);inline-size:100%;padding:var(--space-10) var(--space-12);text-align:start;white-space:normal;
  background:transparent;border:1px solid transparent;border-radius:var(--radius-control);color:var(--color-text-primary);font-weight:var(--weight-regular)}
.wd-queue-item:hover{background:var(--color-surface-sunken);border-color:transparent}
.wd-queue-item:active{background:var(--color-surface-sunken);transform:none}
.wd-queue-item[aria-current=true]{background:var(--color-surface-selected);border-color:var(--color-action-primary)}
.wd-queue-item-top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--space-4) var(--space-8);font-size:var(--text-sm);font-weight:var(--weight-semibold)}
.wd-queue-amount{font-variant-numeric:tabular-nums}
.wd-queue-name{font-size:var(--text-xs);color:var(--color-text-secondary);overflow-wrap:anywhere}
.wd-queue-item .badge{justify-self:start;white-space:normal;text-align:start}
.wd-queue .wd-pager{margin-block-start:var(--space-12)}
.wd-queue-progress{block-size:var(--space-4);margin-block-start:var(--space-12);overflow:hidden;background:var(--color-meter-track);border-radius:var(--radius-bar)}
.wd-queue-progress>span{display:block;block-size:100%;background:var(--color-meter-fill)}
.wd-queue-progress-words{margin-block-start:var(--space-8)}
.wd-queue-review{container:wd-view / inline-size;display:grid;gap:var(--space-16);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)}
.wd-queue-review>.wd-view-title{margin-block-start:calc(-1 * var(--space-8))}
/* Inside the one panel the withdrawal's cards are its sections, each under a hairline, as the mockup draws them. */
.wd-queue-review .wd-card{padding:var(--space-16) 0 0;background:transparent;border:0;border-block-start:1px solid var(--color-border-default);border-radius:0}
.wd-queue-review .wd-detail-grid,.wd-queue-review .wd-detail-main,.wd-queue-review .wd-detail-side{gap:var(--space-16)}
.wd-queue-case{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-16);align-items:start}
.wd-queue-case-who{display:grid;gap:var(--space-4);min-inline-size:0}
.wd-queue-case-name{margin:0;max-width:none;color:var(--color-text-primary);font-size:var(--text-lg);font-weight:var(--weight-semibold);overflow-wrap:anywhere}
.wd-queue-case-account{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-4) var(--space-6);margin:0;max-width:none;color:var(--color-text-primary);font-size:var(--text-base)}
.wd-queue-case-when{display:flex;flex-wrap:wrap;gap:var(--space-4) var(--space-6)}
.wd-queue-case-amount{display:grid;justify-items:end;gap:var(--space-4);text-align:end}
.wd-queue-case-amount .wd-small{margin:0}
.wd-queue-case-figure{margin:0;max-width:none;color:var(--color-text-primary);font-size:var(--text-display-sm);font-weight:var(--weight-medium);line-height:var(--leading-tight);
  letter-spacing:-0.03em;font-variant-numeric:tabular-nums;white-space:nowrap}
.wd-queue-case-figure[data-known=false]{font-size:var(--text-md);letter-spacing:0;white-space:normal}
.wd-queue-reasons{display:grid;gap:var(--space-8)}
.wd-queue-reasons:empty{display:none}
.wd-queue-review-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-8)}
.wd-queue-label{margin:0;max-width:none;font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text-secondary)}
.wd-queue-review>.wd-fold{border-block:1px solid var(--color-border-default)}
.wd-queue-review>.wd-fold+.wd-fold{border-block-start:0}
.wd-queue-review .wd-detail-fixes{margin:0}
.wd-queue-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-8) var(--space-12)}
.wd-queue-actions .wd-pick-confirm{flex:1 1 var(--size-150);inline-size:auto;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-8)}
.wd-queue-skip{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-8);min-height:var(--size-48)}
.wd-queue-bar{display:grid;gap:var(--space-12)}
.wd-queue-done{display:grid;justify-items:start;gap:var(--space-12);padding:var(--space-32);background:var(--color-surface-card);
  border:1px solid var(--color-border-default);border-radius:var(--radius-card)}
.wd-queue-start{display:inline-flex;align-items:center;gap:var(--space-8);min-height:var(--size-44);margin-inline-start:auto}
@container wd-view (max-width: 859px){
  .wd-queue-bench{grid-template-columns:minmax(0,1fr)}
  .wd-queue{position:static;padding-block:var(--space-4)}
  .wd-queue-change{display:inline}
  .wd-queue-list{max-block-size:none}
}
@container wd-view (min-width: 600px){
  /* The slips as tiles side by side; a ticked one wears the selected surface (the mockup's `f-slip`). */
  .wd-queue-review .wd-candidates{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-12)}
  .wd-queue-review .wd-candidate{padding:var(--space-12);border:1px solid var(--color-border-default);border-radius:var(--radius-card)}
  .wd-queue-review .wd-candidate:first-child{border-block-start:1px solid var(--color-border-default)}
  /* The three figures in one row above the two buttons. */
  .wd-queue-review .wd-pick-lines{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-16)}
  .wd-queue-review .wd-pick-line{flex-direction:column;align-items:flex-start;gap:var(--space-4);padding:0;border:0}
}
.wd-queue-review .wd-candidate:has(input:checked){border-color:var(--color-action-primary);background:var(--color-surface-selected)}
@container wd-view (max-width: 479px){
  .wd-queue-review{padding:var(--space-16)}
  .wd-queue-case{grid-template-columns:minmax(0,1fr)}
  .wd-queue-case-amount{justify-items:start;text-align:start}
  .wd-queue-case-figure{font-size:var(--text-xxl)}
  .wd-queue-skip{flex:1 1 100%}
  .wd-queue-actions .wd-pick-confirm{flex-basis:100%}
}
@media (prefers-reduced-motion: reduce){
  .wd-queue-head .icon{transition:none}
}

/* ===== TICKET 269 begin: the withdrawal review as the owner's mockup (19 ต.ค. 2569) =========================
   The heading: the title, the line the view sets, the company and the read in one quiet line, and "นำเข้าไฟล์ใหม่" on
   its right. The summary: the lead (the count at the display step, its words beside it, the amount under them, the
   one primary step on the right), the warning as the mockup's notice, three figures over one bar and its legend,
   one card of folds, the slips no withdrawal holds, and the foot (the history, the report). The list: the search
   and "ตัวกรองเพิ่มเติม" in a row, the chips, one card of rows in four cells. The import: one line of steps and the
   file's card. Every value is a token; a card is the mockup's panel. */
.wd-heading{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:var(--space-12) var(--space-20);margin-block-end:var(--space-20)}
.wd-heading-text{flex:1 1 calc(var(--size-280) * 2);min-inline-size:0}
.wd-heading-text>p#withdrawals-sub{margin:var(--space-6) 0 0}
.wd-heading-meta{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--space-4) var(--space-16);margin-block-start:var(--space-8)}
.wd-heading-meta .wd-company{margin:0;font-size:var(--text-xs)}
.wd-heading-meta .wd-company-name{font-size:var(--text-xs)}
.wd-heading-meta .wd-freshness{font-size:var(--text-xs)}
.wd-heading>.wd-head-actions{display:flex;flex-wrap:wrap;gap:var(--space-8);flex:0 0 auto;margin-inline-start:auto}
.wd-heading>.wd-heading-text{flex:1 1 calc(var(--size-280) * 2)}
.wd-head-actions:empty{display:none}
.wd-head-actions button{display:inline-flex;align-items:center;gap:var(--space-8)}
/* A view other than the results and the queue leads with its own title, as the mockup's pages do. */
#withdrawals-panel:not([data-withdrawals-view=results]):not([data-withdrawals-queue=true]) .wd-heading{display:none}
#withdrawals-panel:not([data-withdrawals-view=results]):not([data-withdrawals-queue=true]) .wd-view-title{font-size:var(--text-display-sm);
  line-height:var(--leading-tight);font-weight:var(--weight-semibold)}
.wd-results-head{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:0}

/* The batch: one quiet line over the tabs, the choice of another batch and its details on its right. */
.wd-picker{display:block;margin:0 0 var(--space-8);padding:0;background:transparent;border:0;border-radius:0}
.wd-picker-line{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-8) var(--space-16)}
.wd-picker .wd-picker-line .wd-batch-line{flex:1 1 calc(var(--size-280) + var(--size-72));order:0;font-size:var(--text-xs);color:var(--color-text-secondary)}
.wd-picker-tools{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-4) var(--space-8)}
.wd-picker-tools .wd-picker-select{display:flex;flex-direction:row;flex:0 1 auto;align-items:center;gap:var(--space-6);font-size:var(--text-xs);font-weight:var(--weight-medium);color:var(--color-text-secondary)}
.wd-picker-tools .wd-picker-select select{inline-size:auto;max-inline-size:calc(var(--size-280) - var(--size-48));min-height:var(--size-36);
  padding-block:var(--space-4);font-size:var(--text-xs)}
.wd-batch-details{min-height:var(--size-36);font-size:var(--text-xs);color:var(--color-text-link)}
.wd-picker>.wd-picker-note{margin-block-start:var(--space-12)}

/* The lead. */
.wd-focus{padding:var(--space-24) var(--space-28);border:1px solid var(--color-border-default);border-inline-start:var(--size-marker) solid var(--color-action-primary)}
.wd-focus-eyebrow{margin:0;font-size:var(--text-xs);font-weight:var(--weight-medium);color:var(--color-text-secondary)}
.wd-focus-figure{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--space-4) var(--space-12)}
.wd-focus-count{font-size:var(--text-display);line-height:var(--leading-none);letter-spacing:-0.04em}
.wd-focus-figure .wd-focus-label{margin:0;font-size:var(--text-xl);font-weight:var(--weight-semibold)}
.wd-focus-heading{font-size:var(--text-lg)}
.wd-focus-amount{gap:var(--space-4) var(--space-6);font-size:var(--text-sm);color:var(--color-text-secondary)}
.wd-focus-amount .wd-focus-amount-figure{font-size:var(--text-sm);font-weight:var(--weight-regular);color:var(--color-text-secondary)}
.wd-focus-amount .wd-unit{font-size:var(--text-sm)}
.wd-focus-action .icon{inline-size:var(--space-16);block-size:var(--space-16)}

/* The warning: the mockup's notice, one line, "เปิดตรวจ" as a quiet link. */
.wd-alert,.wd-alert[data-tone=error],.wd-alert[data-tone=caution]{border:0;border-radius:var(--radius-control);background:var(--color-surface-lead);color:var(--color-feedback-hold-text)}
.wd-alert[data-tone=info]{background:var(--color-surface-sunken);color:var(--color-text-secondary)}
.wd-alert>.icon{display:none}
.wd-alert-words strong{font-weight:var(--weight-regular);font-size:var(--text-sm)}
.wd-alert button{min-height:var(--size-36);padding-inline:var(--space-4);font-size:var(--text-sm)}

/* The figures, the bar and its legend. */
.wd-overview{gap:var(--space-12);padding:var(--space-20);border-radius:var(--radius-card-lg);box-shadow:var(--shadow-sm)}
.wd-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-20)}
.wd-stat+.wd-stat{padding-inline-start:var(--space-20);border-inline-start:1px solid var(--color-border-default)}
.wd-stat p{margin:0;max-width:none}
.wd-stat-label{font-size:var(--text-xs);font-weight:var(--weight-medium);color:var(--color-text-secondary)}
.wd-stat-figure{margin-block:var(--space-8) var(--space-6)}
.wd-stat-figure span{font-size:var(--text-xxl);font-weight:var(--weight-semibold);line-height:var(--leading-tight);font-variant-numeric:tabular-nums;color:var(--color-text-primary)}
.wd-stat-note{font-size:var(--text-xs);color:var(--color-text-secondary)}
.wd-total{display:block}
.wd-bar-head{display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--space-8);margin-block-start:var(--space-8);font-size:var(--text-xs);color:var(--color-text-secondary)}
.wd-bar{display:flex;gap:var(--space-2);block-size:var(--space-12);overflow:hidden;border-radius:var(--radius-pill);background:var(--color-meter-track)}
.wd-bar-part{flex-basis:0;min-inline-size:var(--space-4);background:var(--color-text-tertiary)}
.wd-bar-part[data-group=confirmed]{background:var(--color-action-primary)}
.wd-bar-part[data-group=unresolved]{background:var(--color-feedback-warning-text)}
.wd-bar-part[data-group=waiting]{background:var(--color-badge-processing-text)}
.wd-groups{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-8) var(--space-20);border:0;border-radius:0}
.wd-group,.wd-group+.wd-group{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--space-4) var(--space-8);padding:0;border:0}
.wd-group dt{font-size:var(--text-sm);font-weight:var(--weight-regular)}
.wd-group dt::before{inline-size:var(--space-8);block-size:var(--space-8);border-radius:var(--radius-pill)}
.wd-group[data-group=confirmed] dt::before{background:var(--color-action-primary)}
.wd-group[data-group=unresolved] dt::before{background:var(--color-feedback-warning-text)}
.wd-group-count{font-size:var(--text-sm);font-weight:var(--weight-semibold);line-height:var(--leading-normal)}
.wd-group-money{font-size:var(--text-xs);color:var(--color-text-secondary)}
.wd-group-money .wd-group-amount{font-size:var(--text-xs);font-weight:var(--weight-regular);color:var(--color-text-secondary)}
.wd-group-money .wd-unit{font-size:var(--text-xs)}
.wd-bar-foot{margin:0}

/* One card of folds. */
.wd-folds{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}
.wd-folds>.wd-fold:last-child{border-block-end:0}
.wd-fold-head{padding:var(--space-14) var(--space-20);font-weight:var(--weight-medium)}
.wd-fold>:not(summary){margin:0 var(--space-20) var(--space-16)}
.wd-fold-head .icon{order:-1;transform:rotate(-90deg)}
.wd-fold[open]>.wd-fold-head .icon{transform:none}
.wd-fold-head{justify-content:flex-start}

/* The slips no withdrawal holds, and the foot of the results. */
.wd-unmatched-entry{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-8) var(--space-16);
  padding:var(--space-16) var(--space-20);background:var(--color-surface-card);border:1px solid var(--color-border-default);
  border-radius:var(--radius-card-lg);box-shadow:var(--shadow-sm)}
.wd-unmatched-title{margin:0;font-size:var(--text-sm);font-weight:var(--weight-semibold)}
.wd-unmatched-words p{margin:0;max-width:none}
.wd-unmatched-count{font-weight:var(--weight-regular);font-size:var(--text-xs)}
.wd-unmatched-entry .wd-unmatched-tile{display:inline-flex;inline-size:auto;min-height:var(--size-40);padding:var(--space-6) var(--space-8);
  border:1px solid transparent;border-radius:var(--radius-control);background:transparent;color:var(--color-text-link);font-weight:var(--weight-medium)}
.wd-unmatched-entry .wd-unmatched-tile:hover{background:var(--color-surface-selected);border-color:transparent}
.wd-results-foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-8) var(--space-16)}
.wd-history-link{min-height:var(--size-44);padding-inline:var(--space-4);border-color:transparent;background:transparent;color:var(--color-text-link)}
.wd-history-link:hover{border-color:transparent;background:var(--color-surface-selected)}
.wd-results-foot .wd-export{inline-size:auto}
.wd-picker .wd-batch-line .wd-dot::before,.wd-batch-line .wd-dot::before{margin-inline:var(--space-4)}
.wd-results-foot .wd-export-status{flex:1 1 100%}

/* The list: the search and the filters' button in one row, the chips under it, one card of rows. */
.wd-filters{display:grid;gap:var(--space-12);padding:0;background:transparent;border:0;border-radius:0;box-shadow:none}
.wd-filters .wd-more{padding:var(--space-14) var(--space-16);background:var(--color-surface-card);border:1px solid var(--color-border-default);border-radius:var(--radius-card)}
.wd-filter-top{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-8) var(--space-12)}
.wd-filter-top .wd-search{flex:1 1 calc(var(--size-280) + var(--size-48));min-inline-size:0;margin:0}
.wd-filter-top .wd-search-field{display:flex;flex-wrap:nowrap;gap:var(--space-8)}
.wd-filter-top .wd-search-field input{flex:1 1 auto;min-inline-size:0;min-height:var(--size-44)}
.wd-filter-top .wd-multi{display:flex;align-items:center;gap:var(--space-8)}
.wd-filter-top .wd-multi .wd-toggle-group-label{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.wd-filter-top .wd-multi-toggle{min-inline-size:0}
.wd-more-toggle{display:inline-flex;align-items:center;gap:var(--space-8)}
.wd-more-toggle[aria-expanded=true] .icon{transform:none}
.wd-rows .wd-dot::before{margin-inline:var(--space-4)}
.wd-chips-choice{display:flex;flex-wrap:wrap;gap:var(--space-8);border:0;background:transparent}
.wd-chips-choice .wd-segment-option,.wd-chips-choice .wd-segment-option+.wd-segment-option{min-height:var(--size-36);padding:var(--space-6) var(--space-12);
  border:1px solid var(--color-border-default);border-radius:var(--radius-pill);background:var(--color-surface-card);color:var(--color-text-primary);font-size:var(--text-sm);font-weight:var(--weight-regular)}
.wd-chips-choice .wd-segment-option[aria-pressed=true]{border-color:var(--color-action-primary);background:var(--color-surface-selected);color:var(--color-action-primary)}
.wd-rows-section{display:grid;gap:var(--space-8)}
.wd-rows-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-4) var(--space-12)}
.wd-rows-head h3{margin:0;font-size:var(--text-sm)}
.wd-rows-head .wd-count{margin:0;font-size:var(--text-xs);color:var(--color-text-secondary)}
.wd-rows-head .wd-queue-start{margin-inline-start:auto;min-height:var(--size-36);border-color:transparent;background:transparent;color:var(--color-text-link)}
.wd-rows-head .wd-queue-start:hover{border-color:transparent;background:var(--color-surface-selected)}
.wd-rows-wrap{border-radius:var(--radius-card-lg);box-shadow:var(--shadow-sm)}
.wd-rows .wd-main-cell{min-inline-size:calc(var(--size-280) - var(--size-40))}
.wd-rows .wd-main-cell>*{margin:0}
.wd-rows .wd-recipient-name{display:inline;font-size:var(--text-sm)}
.wd-recipient-ending{display:inline;margin-inline-start:var(--space-6);font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--color-text-primary)}
.wd-rows .wd-withdrawal-line{display:block;margin-block-start:var(--space-2)}
.wd-rows .wd-main-cell .wd-recipient-account{display:inline;font-size:var(--text-xs);color:var(--color-text-secondary)}
.wd-rows .wd-main-cell .wd-recipient-account~small.wd-small:not(.wd-withdrawal-line){display:inline;margin-inline-start:var(--space-6)}
.wd-row-facts{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-12);margin-block-start:var(--space-4);font-size:var(--text-xs);color:var(--color-text-secondary)}
.wd-row-fact{display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:var(--space-4)}
.wd-row-fact>.wd-small{display:inline}
.wd-fact-label{color:var(--color-text-caption)}
.wd-fact-label::after{content:":"}
.wd-row-fact .wd-status-word,.wd-row-fact .wd-slips{color:var(--color-text-primary)}
.wd-table thead th{background:var(--color-surface-card)}
.wd-table th,.wd-table td{padding:var(--space-14) var(--space-16);vertical-align:middle}

/* The import: one line of steps; the file's card. */
.wd-company-box{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--space-4) var(--space-6);margin:calc(var(--space-8) * -1) 0 var(--space-12);padding:0;
  border:0;background:transparent;font-size:var(--text-sm);color:var(--color-text-secondary)}
.wd-company-box strong{color:var(--color-text-primary)}
.wd-steps{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-4) var(--space-8);margin:0 0 var(--space-16);padding:0;list-style:none;
  font-size:var(--text-sm);color:var(--color-text-secondary)}
.wd-step{display:inline-flex;align-items:baseline;gap:var(--space-4)}
.wd-step+.wd-step::before{content:"\2192";margin-inline-end:var(--space-4)}
.wd-step[aria-current=step]{color:var(--color-action-primary);font-weight:var(--weight-semibold)}
.wd-import-card{padding:var(--space-20);border-radius:var(--radius-card-lg);box-shadow:var(--shadow-sm)}
.wd-file-drop{justify-items:center;gap:var(--space-12);padding:var(--space-40) var(--space-24);border-color:var(--color-border-strong);text-align:center}
.wd-file-drop>.icon{inline-size:var(--size-24);block-size:var(--size-24);color:var(--color-text-secondary)}
.wd-file-title{margin:0;font-size:var(--text-lg)}
.wd-file-drop .wd-help{max-inline-size:60ch}
.wd-file-drop .wd-file-label{display:inline-flex;align-items:center;justify-content:center;min-height:var(--size-44);padding-inline:var(--space-16);cursor:pointer;
  background:var(--color-action-primary);border:1px solid var(--color-action-primary);border-radius:var(--radius-control);
  color:var(--color-action-primary-text);font-size:var(--text-base);font-weight:var(--weight-semibold)}
.wd-file-drop .wd-file-label:hover{background:var(--color-action-primary-hover);border-color:var(--color-action-primary-hover)}
.wd-file-drop:has(.wd-file-input:focus-visible) .wd-file-label{outline:2px solid var(--color-focus-ring);outline-offset:2px}
.wd-file-drop:has(.wd-file-input:disabled) .wd-file-label{opacity:var(--opacity-disabled);cursor:not-allowed}
.wd-file-input{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.wd-preview-meta{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-12) var(--space-16);margin-block-end:var(--space-16)}
.wd-preview-file{display:grid;gap:var(--space-4);flex:1 1 var(--size-280);min-inline-size:0}
.wd-preview-file p{margin:0}
.wd-preview-file .wd-file-line strong{font-size:var(--text-lg)}
.wd-preview-faults{display:grid;gap:var(--space-12);margin-block-end:var(--space-16)}
.wd-preview-faults>h3{margin:0;font-size:var(--text-lg)}
.wd-preview-faults .wd-inline-note{margin:0}
.wd-fault-issues{margin:0;padding:0;list-style:none;font-weight:var(--weight-semibold)}
.wd-preview-faults .wd-inline-note .wd-small{color:inherit}
.wd-preview-all{margin-block:var(--space-16);background:var(--color-surface-card);border:1px solid var(--color-border-default);border-radius:var(--radius-card)}
.wd-preview-all>.wd-section{margin:0 var(--space-16) var(--space-16)}

/* The history: one card, a row per batch. */
.wd-batches{gap:0;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}
.wd-batches-head,.wd-batch{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1.6fr) auto;align-items:center;gap:var(--space-8) var(--space-16);
  padding:var(--space-14) var(--space-20);background:transparent;border:0;border-block-start:1px solid var(--color-border-default);border-radius:0}
.wd-batches-head{padding-block:var(--space-10);border-block-start:0;font-size:var(--text-xs);color:var(--color-text-secondary)}
.wd-batch-id,.wd-batch-days,.wd-batch-counts{display:grid;gap:var(--space-2);min-inline-size:0}
.wd-batch-id .wd-file-name{font-size:var(--text-xs);color:var(--color-text-secondary);overflow-wrap:anywhere}
.wd-batch-counts .wd-batch-summary{margin:0;font-size:var(--text-xs);color:var(--color-text-secondary)}
.wd-batch-rows{color:var(--color-text-primary)}
.wd-batch-buttons{justify-content:flex-end}
.wd-batch-buttons button{min-height:var(--size-40);font-size:var(--text-sm)}

/* The slips no withdrawal holds: the count and amount, the chips, a card per slip with its amount leading. */
.wd-um-total{margin:0 0 var(--space-12);font-size:var(--text-sm);color:var(--color-text-primary)}
.wd-um-tools{padding:0;background:transparent;border:0}
.wd-um-card{padding:var(--space-16) var(--space-20);border-radius:var(--radius-card-lg);box-shadow:var(--shadow-sm)}
.wd-um-card .wd-candidate-top{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center}
.wd-um-card .wd-candidate-amount{grid-row:1;grid-column:1;font-size:var(--text-lg)}
.wd-um-card .wd-slip-id{grid-row:2;grid-column:1;justify-self:start}
.wd-um-card .wd-um-state{grid-row:1;grid-column:2}
/* A picture card is narrow: its state goes under the amount and the id under that, so neither is squeezed. */
.wd-um-grid .wd-um-card{padding:var(--space-12)}
.wd-um-grid .wd-um-card .wd-candidate-top{grid-template-columns:minmax(0,1fr)}
.wd-um-grid .wd-um-card .wd-um-state{grid-row:2;grid-column:1;justify-self:start}
.wd-um-grid .wd-um-card .wd-slip-id{grid-row:3}
.wd-um-actions .quiet{border-color:transparent;background:transparent;color:var(--color-text-link)}
.wd-um-actions .quiet:hover{border-color:transparent;background:var(--color-surface-selected)}

@container wd-view (max-width: 639px){
  .wd-stats{grid-template-columns:minmax(0,1fr)}
  .wd-stat+.wd-stat{padding-inline-start:0;padding-block-start:var(--space-16);border-inline-start:0;border-block-start:1px solid var(--color-border-default)}
  .wd-groups{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wd-focus{padding:var(--space-20)}
  .wd-focus>button{inline-size:100%}
  .wd-batches-head{display:none}
  .wd-batch{grid-template-columns:minmax(0,1fr)}
  .wd-batch-buttons{justify-content:flex-start}
  .wd-rows .wd-main-cell{min-inline-size:0}
  .wd-um-list .wd-um-actions button{flex:0 1 auto}   /* a slip's steps side by side, as the mockup's card */
}
@media (max-width:700px){
  .wd-heading>.wd-head-actions{inline-size:100%;margin-inline-start:0}
  .wd-picker-tools{inline-size:100%}
  #withdrawals-panel:not([data-withdrawals-view=results]):not([data-withdrawals-queue=true]) .wd-view-title{font-size:var(--text-xl)}
}
/* A quiet step is the mockup's link: no box, the link colour, a soft ground under the pointer. */
#withdrawals-panel button.quiet{border-color:transparent;background:transparent;color:var(--color-text-link);font-weight:var(--weight-medium)}
#withdrawals-panel button.quiet:hover{border-color:transparent;background:var(--color-surface-selected)}
/* No file yet: the mockup's card, solid, its one step at the size of a button's icon. */
.wd-empty{gap:var(--space-12);padding:var(--space-40) var(--space-24);border:1px solid var(--color-border-default);box-shadow:var(--shadow-sm)}
.wd-empty button .icon{inline-size:var(--space-16);block-size:var(--space-16);color:currentColor}
.wd-tabpanel>.wd-results-foot,.wd-view>.wd-results-foot{margin-block-start:var(--space-4)}
/* A row on a phone, as the mockup's: the recipient and its lines across the top, then the amount (with its small
   label), the result and "เปิดตรวจ" side by side on one line. The recipient's and the result's labels stay for a
   screen reader only; the row says what they are by where they sit. */
@container wd-table (max-width: 639px){
  .wd-table td{padding:0}   /* the cell padding above is the table's; a row laid out as a grid pads itself */
  .wd-rows tr{grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:var(--space-10) var(--space-12)}
  .wd-rows td.wd-main-cell{grid-column:1 / -1;grid-row:1}
  .wd-rows td.wd-amount{grid-column:1;grid-row:2;text-align:start}
  .wd-rows td.wd-result{grid-column:2;grid-row:2;min-inline-size:0}
  .wd-rows td.wd-open{grid-column:3;grid-row:2}
  .wd-rows .wd-main-cell>.wd-cell-label,.wd-rows .wd-result>.wd-cell-label{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .wd-rows .wd-amount .wd-cell-label{position:static;inline-size:auto;block-size:auto;overflow:visible;clip-path:none;font-weight:var(--weight-regular)}
  .wd-rows .wd-amount-figure{font-size:var(--text-sm)}
  .wd-rows .wd-open-button{inline-size:auto;min-height:var(--size-40)}
}
/* ===== TICKET 269 end ===== */

/* TICKET 271 begin: a person settles what the rules cannot (ADR 0014 section 13): the fifth group, how a row was
   settled, the settlement's card, the one reason dialog and its codes, "แก้ข้อมูลสลิป", and a mark's code. */
.wd-bar-part[data-group=settled_no_slip]{background:var(--color-feedback-hold-text)}
.wd-group[data-group=settled_no_slip] dt::before{background:var(--color-feedback-hold-text)}
.wd-settled{color:var(--color-feedback-hold-text);overflow-wrap:anywhere}
.wd-settled-facts{display:grid;gap:var(--space-4);margin:0;padding:var(--space-8) var(--space-12);border:1px solid var(--color-border-subtle);border-radius:var(--radius-control);background:var(--color-surface-page)}
.wd-settled-facts p{margin:0}
.wd-settled-amount{font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--color-text-primary)}
.wd-settled-reason{font-size:var(--text-sm);color:var(--color-text-primary)}
.wd-settled-note{font-size:var(--text-sm);color:var(--color-text-secondary);overflow-wrap:anywhere}
.wd-settle-card .secondary,.wd-pick-difference{inline-size:100%}
.wd-pick-difference{margin-block-start:var(--space-8)}
.wd-settle-dialog .app-modal-body{gap:var(--space-12)}
.wd-settle-codes{display:grid;gap:var(--space-6);margin:0;padding:0;border:0;min-inline-size:0}
.wd-settle-codes legend{margin-block-end:var(--space-6);padding:0;font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--color-text-primary)}
.wd-settle-code,.wd-settle-dialog .wd-settle-code{display:flex;flex-direction:row;align-items:center;gap:var(--space-10);min-inline-size:0;padding:var(--space-8) var(--space-10);border:1px solid var(--color-border-default);border-radius:var(--radius-control);font-size:var(--text-sm);font-weight:var(--weight-regular);color:var(--color-text-primary);cursor:pointer}
.wd-settle-code:has(input:checked){border-color:var(--color-action-primary);background:var(--color-surface-selected)}
.wd-settle-code:has(input:disabled){opacity:var(--opacity-disabled);cursor:not-allowed}
.wd-settle-code input,.wd-settle-dialog .wd-settle-code input{flex:none;inline-size:var(--size-24);block-size:var(--size-24);min-height:var(--size-24);margin:0;accent-color:var(--color-action-primary)}
.wd-settle-field textarea{inline-size:100%;font-size:var(--text-md)}
.wd-settle-field textarea[aria-invalid=true]{border-color:var(--color-feedback-error-text)}
.wd-correct-slip{display:inline-flex;align-items:center;gap:var(--space-6);margin-block-start:var(--space-6)}
.wd-um-mark-code{margin:0;font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--color-text-primary)}
.wd-um-code-counts{display:flex;flex-wrap:wrap;gap:var(--space-4) var(--space-12);margin:0 0 var(--space-8);padding:0;list-style:none;font-size:var(--text-sm);color:var(--color-text-secondary)}
.wd-um-codes{margin-block-end:var(--space-8)}
/* TICKET 271 end */

/* TICKET 277 begin: "พนักงานโอนผิด › โอนซ้ำ" (ADR 0014 section 15): the row's line, the offer, the incident's card (the
   amounts apart, reconciled and refunded apart, the people, the refunds, the acts, the history), and its three dialogs,
   the record dialog wide enough to set both slips side by side. */
.wd-incident-line{color:var(--color-feedback-hold-text);overflow-wrap:anywhere}
.wd-incident-offer .secondary{inline-size:100%}
.wd-incident{display:grid;gap:var(--space-12)}
.wd-incident>h3{margin:0}
.wd-incident-marks{display:flex;flex-wrap:wrap;gap:var(--space-6);margin:0}
.wd-incident-figures{display:grid;grid-template-columns:repeat(auto-fit,minmax(calc(var(--space-64) * 2),1fr));gap:var(--space-8);margin:0}
.wd-incident-figure{display:grid;gap:var(--space-2);min-inline-size:0;padding:var(--space-8) var(--space-10);border:1px solid var(--color-border-subtle);border-radius:var(--radius-control);background:var(--color-surface-page)}
.wd-incident-figure dt{font-size:var(--text-xs);color:var(--color-text-secondary)}
.wd-incident-figure dd{margin:0;font-size:var(--text-md);font-weight:var(--weight-semibold);font-variant-numeric:tabular-nums;color:var(--color-text-primary);overflow-wrap:anywhere}
.wd-incident-figure[data-figure=excess] dd,.wd-incident-figure[data-figure=outstanding] dd,.wd-incident-figure[data-figure=unrefunded] dd{color:var(--color-feedback-hold-text)}
.wd-incident-facts{display:grid;gap:var(--space-4);margin:0;padding:0;list-style:none;font-size:var(--text-sm);color:var(--color-text-primary)}
.wd-incident-facts li[data-value=false]{color:var(--color-feedback-hold-text)}
.wd-incident-people{display:grid;gap:var(--space-6);margin:0}
.wd-incident-people>div{display:grid;grid-template-columns:minmax(0,calc(var(--space-64) * 2)) minmax(0,1fr);gap:var(--space-8)}
.wd-incident-people dt{font-size:var(--text-sm);color:var(--color-text-secondary)}
.wd-incident-people dd{margin:0;font-size:var(--text-sm);color:var(--color-text-primary);overflow-wrap:anywhere}
.wd-incident-refunds h4{margin:0 0 var(--space-6);font-size:var(--text-sm)}
.wd-incident-refund-list{display:grid;gap:var(--space-8);margin:0;padding:0;list-style:none}
.wd-incident-refund-list li{display:grid;gap:var(--space-2);padding:var(--space-8) var(--space-10);border:1px solid var(--color-border-subtle);border-radius:var(--radius-control)}
.wd-incident-refund-list li[data-in-force=false]{opacity:var(--opacity-disabled)}
.wd-incident-refund-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-4) var(--space-8);margin:0;font-size:var(--text-sm)}
.wd-incident-refund-amount{font-variant-numeric:tabular-nums}
.wd-incident-void{justify-self:start}
.wd-incident-actions{display:flex;flex-wrap:wrap;gap:var(--space-8)}
.wd-incident-actions>button{flex:1 1 auto}
.wd-incident-history summary{cursor:pointer;font-size:var(--text-sm);font-weight:var(--weight-semibold)}
.wd-incident-dialog .app-modal-body{gap:var(--space-12)}
.wd-incident-dialog-wide{width:min(calc(var(--space-64) * 12),100%)}
.wd-incident-content{display:grid;gap:var(--space-12);min-inline-size:0}
.wd-incident-subhead{margin:0;font-size:var(--text-md)}
.wd-incident-slips{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,calc(var(--space-64) * 4)),1fr));gap:var(--space-12)}
.wd-incident-slip{display:grid;gap:var(--space-8);min-inline-size:0;padding:var(--space-12);border:1px solid var(--color-border-default);border-radius:var(--radius-control);background:var(--color-surface-page)}
.wd-incident-slip h4{margin:0;font-size:var(--text-sm)}
.wd-incident-slip dl{display:grid;gap:var(--space-4);margin:0}
.wd-incident-slip dl>div{display:grid;grid-template-columns:minmax(0,calc(var(--space-64) * 2)) minmax(0,1fr);gap:var(--space-8)}
.wd-incident-slip dt{font-size:var(--text-xs);color:var(--color-text-secondary)}
.wd-incident-slip dd{margin:0;font-size:var(--text-sm);color:var(--color-text-primary);overflow-wrap:anywhere}
.wd-incident-slip[data-repeat=true]{border-color:var(--color-feedback-error-text)}
.wd-incident-staff select,.wd-incident-staff input[type=text]{inline-size:100%;min-inline-size:0;font-size:var(--text-md)}
.wd-incident-candidate{align-items:flex-start}
.wd-incident-candidate-words{display:grid;gap:var(--space-2);min-inline-size:0;overflow-wrap:anywhere}
.wd-incident-dialog [aria-disabled=true]{opacity:var(--opacity-disabled);cursor:not-allowed}
.wd-incident-dialog .wd-settle-code{display:flex;flex-direction:row;align-items:center;gap:var(--space-10);min-inline-size:0;padding:var(--space-8) var(--space-10);border:1px solid var(--color-border-default);border-radius:var(--radius-control);font-size:var(--text-sm);font-weight:var(--weight-regular);color:var(--color-text-primary);cursor:pointer}
.wd-incident-dialog .wd-settle-code input{flex:none;inline-size:var(--size-24);block-size:var(--size-24);min-height:var(--size-24);margin:0;accent-color:var(--color-action-primary)}
.wd-incident-dialog .wd-incident-candidate{align-items:flex-start}
/* TICKET 277 end */

/* TICKET 278 begin: a withdrawal re-imported with another recipient (ADR 0014 section 16): the row's line, the card of
   the pair and its decisions, a slip the earlier withdrawal holds said plainly, and the recipient across the imports. */
.wd-link-line{display:grid;justify-items:start;gap:var(--space-2);margin-block-start:var(--space-4)}
.wd-link-facts{margin:0;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.wd-link-card{display:grid;gap:var(--space-10)}
.wd-link-card>p,.wd-link-card>h4{margin:0}
.wd-link-card>h4{font-size:var(--text-sm)}
.wd-link-note{display:grid;gap:var(--space-4);margin:0}
.wd-link-note[data-tone=caution]{border:1px solid var(--color-border-lead)}
.wd-link-note .wd-link-facts{color:inherit}
.wd-link-slips{display:flex;flex-wrap:wrap;gap:var(--space-4) var(--space-12);margin:0}
.wd-link-reason{color:var(--color-text-primary);overflow-wrap:anywhere}
.wd-link-actions{display:flex;flex-wrap:wrap;gap:var(--space-8)}
.wd-link-actions>button{flex:1 1 auto;min-height:var(--size-44)}
.wd-link-card [data-open-earlier]{justify-self:start}
.wd-earlier{display:grid;gap:var(--space-8);margin-block-start:var(--space-8);padding:var(--space-10) var(--space-12);
  border:1px solid var(--color-border-subtle);border-radius:var(--radius-control);background:var(--color-surface-page)}
.wd-earlier-words{margin:0;max-width:none;font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--color-text-primary)}
.wd-earlier-actions{display:flex;flex-wrap:wrap;gap:var(--space-8)}
.wd-earlier-actions button{min-height:var(--size-44);white-space:normal;text-align:start}
.wd-recipient-history td{overflow-wrap:anywhere}
.wd-recipient-history .badge{margin-inline-start:var(--space-6)}
@container wd-view (max-width: 639px){
  .wd-link-actions>button,.wd-earlier-actions button{flex:1 1 100%;justify-content:center;text-align:center}
}
/* TICKET 278 end */

/* TICKET 281 begin: a batch imported under the wrong company is voided (ADR 0014 section 17): the voided batch on the
   import history, the void's dialog (its ties by class, the close of each day before and after, the ticks), and the
   import preview's warnings with the company's tick. */
.wd-void-line{display:grid;gap:var(--space-2);margin-block-start:var(--space-4)}
.wd-void-reason{color:var(--color-text-primary);overflow-wrap:anywhere}
.wd-restored-line{margin:0;color:var(--color-text-secondary);overflow-wrap:anywhere}
.wd-voided-listing{margin-block-start:var(--space-8)}
.wd-void-class{display:grid;gap:var(--space-6)}
.wd-void-class li{display:grid;gap:var(--space-2);padding:var(--space-8) var(--space-10);border:1px solid var(--color-border-subtle);
  border-radius:var(--radius-control);overflow-wrap:anywhere}
.wd-void-shared summary{cursor:pointer;font-size:var(--text-sm);font-weight:var(--weight-semibold)}
.wd-void-days{display:grid;gap:var(--space-8);min-inline-size:0}
.wd-void-day caption{text-align:start;font-size:var(--text-sm);font-weight:var(--weight-semibold);padding-block-end:var(--space-4)}
.wd-void-day th[scope=row]{font-weight:var(--weight-regular);color:var(--color-text-secondary);text-align:start}
.wd-void-day td{font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.wd-void-part{display:inline-block;margin-inline-end:var(--space-6)}
.wd-import-warnings .wd-issue-list li{color:inherit}
.wd-warning-companies{margin:var(--space-4) 0 0;padding-inline-start:var(--space-16)}
.wd-company-tick{display:flex;align-items:center;gap:var(--space-10);min-inline-size:0;margin-block-start:var(--space-8);
  padding:var(--space-8) var(--space-10);border:1px solid var(--color-border-default);border-radius:var(--radius-control);
  background:var(--color-surface-card);font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--color-text-primary);cursor:pointer}
.wd-company-tick input{flex:none;inline-size:var(--size-24);block-size:var(--size-24);min-height:var(--size-24);margin:0;accent-color:var(--color-action-primary)}
/* TICKET 281 end */

/* TICKET 282 begin: the import history by withdrawal day (ADR 0014 section 18): a card per day, its main file first,
   its earlier files folded under it, then the voided and failed imports; and a day's rows not in its main file. */
.wd-history-tools input[type=date]{font-size:var(--text-sm);color:var(--color-text-primary)}
.wd-day-cards{display:grid;gap:var(--space-16);margin-block-start:var(--space-12)}
.wd-day-card{display:grid;gap:var(--space-10);min-inline-size:0}
.wd-day-head{display:grid;gap:var(--space-4);min-inline-size:0}
.wd-day-head h3{margin:0;font-size:var(--text-md)}
.wd-day-head p{margin:0;max-width:none}
.wd-day-actions{justify-content:flex-start}
.wd-day-files{margin:0}
.wd-day-files .wd-batch-head h4{margin:0;font-size:var(--text-sm)}
.wd-day-earlier{min-inline-size:0}
.wd-day-earlier>summary{cursor:pointer;padding:var(--space-8) var(--space-12);font-size:var(--text-sm);font-weight:var(--weight-semibold);
  color:var(--color-text-link);border-radius:var(--radius-control)}
.wd-day-earlier>summary:hover{background:var(--color-surface-selected)}
.wd-day-earlier>summary:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}
.wd-day-earlier[open]>summary{margin-block-end:var(--space-8)}
.wd-suspicious-why{margin:var(--space-4) 0 0;padding-inline-start:var(--space-16);font-size:var(--text-xs);color:var(--color-text-secondary)}
.wd-multi-day{color:var(--color-text-primary)}
.wd-older-rows{margin-block-start:var(--space-12)}
.wd-older-rows .wd-batch-head h4{margin:0;font-size:var(--text-sm);overflow-wrap:anywhere}
/* TICKET 282 end */

/* TICKET 285 begin: the helper "ช่วยเลือกคู่" (the group of same-amount withdrawals and slips side by side, the pairings
   ranked for a person, the effect of the ticked pairs) and the dialog of "เปลี่ยนคู่". One column on a phone; the
   withdrawals beside the slips when the card is wide enough for two. */
.wd-group,.wd-group-entry{display:grid;gap:var(--space-12);min-inline-size:0}
.wd-group>h3,.wd-group-entry>h3{margin:0}
.wd-group-entry>p,.wd-group>p{margin:0;max-width:none}
.wd-group-outcome strong{font-size:var(--text-md)}
.wd-group-blockers{margin:0;padding-inline-start:var(--space-16);font-size:var(--text-sm);color:var(--color-text-secondary)}
.wd-group-sides{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,calc(var(--size-150) + var(--size-150))),1fr));
  gap:var(--space-16);min-inline-size:0}
.wd-group-side{display:grid;gap:var(--space-8);align-content:start;min-inline-size:0}
.wd-group-side>h4,.wd-group-ranking>h4,.wd-group-effect>h4{margin:0;font-size:var(--text-sm)}
.wd-group-rows,.wd-group-slips,.wd-group-pairings,.wd-group-changes{display:grid;gap:var(--space-8);margin:0;padding:0;list-style:none}
.wd-group-row,.wd-group-slip,.wd-group-pairing{display:grid;gap:var(--space-4);min-inline-size:0;padding:var(--space-10) var(--space-12);
  border:1px solid var(--color-border-subtle);border-radius:var(--radius-control);overflow-wrap:anywhere}
.wd-group-row-head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4) var(--space-10);margin:0}
.wd-group-amount{font-weight:var(--weight-semibold);font-variant-numeric:tabular-nums}
.wd-group-row p,.wd-group-slip p,.wd-group-pairing p{margin:0;max-width:none}
.wd-group-choice{display:grid;gap:var(--space-6);min-inline-size:0;margin:var(--space-4) 0 0;padding:0;border:0}
.wd-group-choice legend{padding:0;margin-block-end:var(--space-4);font-size:var(--text-sm);font-weight:var(--weight-semibold)}
.wd-group-option{display:flex;flex:none;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--space-10);
  min-inline-size:0;min-block-size:var(--size-44);text-align:start;font-weight:var(--weight-regular);
  padding:var(--space-6) var(--space-10);border:1px solid var(--color-border-default);border-radius:var(--radius-control);
  font-size:var(--text-sm);color:var(--color-text-primary);cursor:pointer}
.wd-group-option:hover{background:var(--color-surface-selected)}
.wd-group-option:has(input:checked){border-color:var(--color-action-primary);background:var(--color-surface-selected)}
.wd-group-option:has(input:disabled){opacity:var(--opacity-disabled);cursor:default}
.wd-group-option input{flex:none;inline-size:var(--size-24);block-size:var(--size-24);min-height:var(--size-24);margin:0;accent-color:var(--color-action-primary)}
.wd-group-option input:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}
.wd-group-option-words{display:flex;flex:1 1 auto;flex-wrap:wrap;align-items:center;gap:var(--space-4) var(--space-8);min-inline-size:0}
.wd-group-ranking{display:grid;gap:var(--space-8);min-inline-size:0}
.wd-group-pairing-title{font-weight:var(--weight-semibold)}
.wd-group-pairs{margin:0;padding-inline-start:var(--space-16);font-size:var(--text-sm)}
.wd-group-pairing>button{justify-self:start}
.wd-group-actions{display:grid;gap:var(--space-10);min-inline-size:0;padding-block-start:var(--space-12);border-block-start:1px solid var(--color-border-subtle)}
.wd-group-actions>button{justify-self:stretch}
.wd-group-effect{display:grid;gap:var(--space-6);min-inline-size:0}
.wd-group-changes li{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4) var(--space-8);font-size:var(--text-sm)}
.wd-pair-options{display:grid;gap:var(--space-6);min-inline-size:0;margin:0;padding:0;border:0}
.wd-pair-options legend{padding:0;margin-block-end:var(--space-4);font-size:var(--text-sm);font-weight:var(--weight-semibold)}
/* TICKET 285 end */

/* TICKET 296 begin: the batch picker is easy to read and hides old batches. One compact control names the batch on
   screen in two short lines; it opens a dialog (a sheet the full width of a phone) whose list groups the live batches
   by request day, each batch a button of two lines with its label and its state. Tokens only. */
.wd-batch-choice{display:flex;align-items:center;gap:var(--space-8);min-inline-size:0}
.wd-batch-choice-label{font-size:var(--text-xs);font-weight:var(--weight-medium);color:var(--color-text-secondary);white-space:nowrap}
#withdrawals-panel .wd-batch-pick{display:flex;align-items:center;justify-content:space-between;gap:var(--space-12);min-inline-size:0;
  max-inline-size:calc(var(--size-280) + var(--size-72));min-height:var(--size-48);padding:var(--space-6) var(--space-12);
  text-align:start;white-space:normal;font-weight:var(--weight-regular)}
#withdrawals-panel .wd-batch-pick:active{background:var(--color-surface-sunken)}
#withdrawals-panel .wd-batch-pick[aria-expanded=true]{border-color:var(--color-action-primary)}
.wd-batch-pick-words{display:grid;gap:var(--space-2);min-inline-size:0}
.wd-batch-pick-title{font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--color-text-primary)}
.wd-batch-pick-meta{font-size:var(--text-xs);color:var(--color-text-secondary);overflow-wrap:anywhere}
.wd-batch-pick .icon{flex:none;color:var(--color-text-secondary)}
/* The file's name beside the control breaks anywhere, so the line never pushes the page sideways (280 wide). */
.wd-picker .wd-picker-line .wd-batch-line{overflow-wrap:anywhere}

.app-modal.wd-batch-sheet{inline-size:min(calc(var(--space-64) * 9),100%);max-block-size:calc(100vh - var(--space-48))}
.app-modal.wd-batch-sheet[open]{display:flex;flex-direction:column}
.wd-batch-sheet .wd-batch-sheet-body{flex:1 1 auto;min-block-size:0;gap:var(--space-12);overflow:hidden}
.wd-batch-sheet .app-modal-head h2:focus{outline:none}
.wd-batch-sheet-status{margin:0;font-size:var(--text-sm);color:var(--color-feedback-warning-text)}
.wd-batch-sheet .wd-batch-days{display:grid;align-content:start;gap:var(--space-16);flex:1 1 auto;min-block-size:0;overflow-y:auto;
  margin-inline:calc(var(--space-8) * -1);padding:0 var(--space-8) var(--space-4)}
.wd-batch-day{display:grid;gap:var(--space-8);min-inline-size:0}
.wd-batch-day-head{position:sticky;inset-block-start:0;z-index:var(--z-sticky);display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--space-8);margin:0;padding-block:var(--space-4);background:var(--color-surface-card);font-size:var(--text-sm);
  font-weight:var(--weight-semibold);color:var(--color-text-primary)}
.wd-batch-day-count{font-size:var(--text-xs);font-weight:var(--weight-regular);color:var(--color-text-secondary)}
.wd-batch-options{display:grid;gap:var(--space-6);margin:0;padding:0;list-style:none}
#withdrawals-panel .wd-batch-option{display:grid;gap:var(--space-2);inline-size:100%;min-height:var(--size-48);padding:var(--space-8) var(--space-12);
  text-align:start;white-space:normal;font-weight:var(--weight-regular);border-color:var(--color-border-default)}
#withdrawals-panel .wd-batch-option:hover{background:var(--color-action-secondary-hover);border-color:var(--color-border-strong)}
#withdrawals-panel .wd-batch-option:active{background:var(--color-surface-sunken)}
#withdrawals-panel .wd-batch-option[aria-current=true]{border-color:var(--color-action-primary);background:var(--color-surface-selected);
  box-shadow:inset var(--size-marker) 0 0 var(--color-action-primary)}
#withdrawals-panel .wd-batch-option:disabled{opacity:var(--opacity-disabled);cursor:not-allowed}
.wd-batch-option-top{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-4) var(--space-8);min-inline-size:0}
.wd-batch-option-id{display:inline-flex;align-items:center;gap:var(--space-4);font-size:var(--text-base);font-weight:var(--weight-semibold);
  color:var(--color-text-primary)}
.wd-batch-option-id .icon{color:var(--color-action-primary)}
.wd-batch-tag{padding:0 var(--space-6);border-radius:var(--radius-pill);font-size:var(--text-xs);font-weight:var(--weight-medium);
  line-height:var(--leading-normal)}
.wd-batch-tag[data-tag=latest]{background:var(--color-surface-accent-chip);color:var(--color-text-link)}
.wd-batch-tag[data-tag=main]{background:var(--color-surface-sunken);color:var(--color-text-secondary)}
.wd-batch-state{margin-inline-start:auto;padding:0 var(--space-8);border-radius:var(--radius-pill);font-size:var(--text-xs);
  font-weight:var(--weight-semibold);line-height:var(--leading-normal)}
.wd-batch-state[data-state=open]{background:var(--color-feedback-hold-bg);color:var(--color-feedback-hold-text)}
.wd-batch-state[data-state=waiting]{background:var(--color-badge-processing-bg);color:var(--color-badge-processing-text)}
.wd-batch-state[data-state=checked]{background:var(--color-feedback-success-bg);color:var(--color-feedback-success-text)}
.wd-batch-state[data-state=reading]{font-weight:var(--weight-regular);color:var(--color-text-secondary)}
.wd-batch-option-meta{font-size:var(--text-sm);color:var(--color-text-secondary);overflow-wrap:anywhere}
#withdrawals-panel .wd-batch-more{align-self:flex-start;min-height:var(--size-44);font-size:var(--text-sm);font-weight:var(--weight-semibold)}
.wd-batch-goto{display:flex;align-items:flex-end;flex-wrap:wrap;gap:var(--space-8);margin:0;padding-block-start:var(--space-12);
  border-block-start:1px solid var(--color-border-subtle)}
.wd-batch-sheet .app-modal-body .wd-batch-goto-field{flex:1 1 var(--size-150);min-inline-size:0}
.wd-batch-goto input[aria-invalid=true]{border-color:var(--color-action-destructive)}
.wd-batch-goto .wd-field-error{flex:1 1 100%}
@media (max-width:700px){
  .wd-batch-choice{flex-wrap:wrap;inline-size:100%;gap:var(--space-4)}
  .wd-batch-choice-label{flex:1 1 100%}
  #withdrawals-panel .wd-batch-pick{flex:1 1 100%;max-inline-size:none}
  /* A sheet along the foot of the screen, the full width of the phone. */
  .app-modal.wd-batch-sheet{inline-size:100%;max-inline-size:100%;margin:auto 0 0;max-block-size:calc(100vh - var(--space-48));
    border:0;border-radius:var(--radius-card-lg) var(--radius-card-lg) 0 0}
  .wd-batch-sheet .app-modal-body{padding:var(--space-16)}
}
/* TICKET 296 end */