/* The one detail view (lean-rollout ticket 114).
   Every value here is a token (scripts/lint_hardcodes.py). The dialog is a native
   <dialog>, so the backdrop, the top layer and Escape are the platform's; the Tab wrap is
   page-detail.js's, for the reason ticket 118 measured. */

.detail{inline-size:min(calc(100vw - var(--space-32)),calc(var(--size-280) * 4));
  max-block-size:calc(100vh - var(--space-40));padding:0;
  border:1px solid var(--color-border-default);border-radius:var(--radius-card-lg);
  background:var(--color-surface-card);color:var(--color-text-primary);box-shadow:var(--shadow-sm)}
.detail::backdrop{background:var(--color-text-primary);opacity:var(--opacity-disabled)}
.detail-frame{display:flex;flex-direction:column;gap:var(--space-12);padding:var(--space-20);
  max-block-size:calc(100vh - var(--space-40));min-block-size:0}

/* --- the head: what is open, and the two ways out of it ----------------------------- */
.detail-head{display:flex;align-items:flex-start;gap:var(--space-12)}
.detail-headings{flex:1 1 auto;min-inline-size:0}
.detail-headings .eyebrow{display:block}
/* Inline-block so the focus ring hugs the id rather than drawing a full-width box that
   reads as a text input. Focus lands here on open: a reader arrives at the record they
   asked for, and a screen reader announces it before the controls on it. */
.detail-head h2{display:inline-block;max-inline-size:100%;margin:0;font-size:var(--text-lg);
  font-family:var(--font-mono);overflow-wrap:anywhere;line-height:var(--leading-snug)}
.detail-head h2:focus-visible{outline:2px solid var(--color-focus-ring);
  outline-offset:var(--space-2);border-radius:var(--radius-sm)}
.detail-context{margin:var(--space-4) 0 0;font-size:var(--text-sm);
  color:var(--color-text-secondary);overflow-wrap:anywhere}
/* The back button is the phone's way out; the close button is the desktop's. Both are in
   the document at every width and one of them is drawn, so the label a person reads
   matches the gesture they have. */
.detail-back{display:none;align-items:center;gap:var(--space-6);min-block-size:var(--size-44);
  padding:var(--space-8) var(--space-12);border:1px solid var(--color-action-secondary-border);
  border-radius:var(--radius-control);background:var(--color-action-secondary-bg);
  color:var(--color-action-secondary-text);font-size:var(--text-base);font-weight:var(--weight-medium)}
.detail-back:hover{background:var(--color-action-secondary-hover)}
.detail-close{flex:0 0 auto}

.detail-notice{margin:0;padding:var(--space-8) var(--space-12);border-radius:var(--radius-control);
  border:1px solid var(--color-border-lead);background:var(--color-feedback-hold-bg);
  color:var(--color-feedback-hold-text);font-size:var(--text-sm)}
.detail-refusal,.detail-loading{margin:0;font-size:var(--text-base);color:var(--color-text-secondary)}

/* --- the switch: one of the two halves at a time, on a phone ------------------------ */
.detail-switch{display:none;gap:var(--space-4);padding:var(--space-4);
  border:1px solid var(--color-border-default);border-radius:var(--radius-pill);
  background:var(--color-surface-sunken)}
.detail-switch-option{flex:1 1 0;min-block-size:var(--size-36);border:0;border-radius:var(--radius-pill);
  background:transparent;color:var(--color-text-secondary);font-size:var(--text-base);
  font-weight:var(--weight-medium);cursor:pointer}
.detail-switch-option[aria-pressed="true"]{background:var(--color-surface-card);
  color:var(--color-text-primary);box-shadow:var(--shadow-sm)}
.detail-switch-option:hover{color:var(--color-text-primary)}

/* --- the body: image beside values on a desktop ------------------------------------- */
.detail-body{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:var(--space-16);min-block-size:0;overflow:auto}
.detail-image{display:flex;flex-direction:column;gap:var(--space-8);min-inline-size:0}
.detail-image-head{display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-8);flex-wrap:wrap}
.detail-image-head h3{margin:0}
.detail-zoom{display:inline-flex;align-items:center;gap:var(--space-6);min-block-size:var(--size-36)}
.detail-canvas{display:flex;align-items:center;justify-content:center;flex-direction:column;
  gap:var(--space-12);padding:var(--space-10);border:1px solid var(--color-border-default);
  border-radius:var(--radius-control);background:var(--color-surface-sunken);
  min-block-size:var(--size-150);overflow:auto}
.detail-canvas img{display:block;max-inline-size:100%;block-size:auto;margin:auto}
/* The zoom is a real enlargement of the photograph inside a scrolling frame, not a
   transform of a scaled-down copy: an account number that is unreadable at fit width has
   to become readable, which is the whole reason the control exists. */
.detail-canvas[data-zoom="in"]{align-items:flex-start;justify-content:flex-start;cursor:zoom-out}
.detail-canvas[data-zoom="in"] img{inline-size:200%;max-inline-size:none;margin:0}
.detail-canvas-note{margin:0;font-size:var(--text-sm);color:var(--color-text-secondary);text-align:center}
.detail-image-note{margin:0;font-size:var(--text-xs);color:var(--color-text-caption)}

.detail-values{min-inline-size:0}
/* The shell's inspection is two columns on a page of its own; inside this dialog the two
   columns are the image and the values, so what is left is one column. */
.detail-values .inspection{display:flex;flex-direction:column;gap:var(--space-16);margin-top:0}
.detail-values .inspection h3{margin-top:0;font-size:var(--text-md)}
.detail-values .inspection h4{margin-bottom:var(--space-4);font-size:var(--text-base)}
.detail-values .inspection p{overflow-wrap:anywhere}

/* --- TICKET 156: the summary leads (TD-11) ------------------------------------------
   Design A's detail (board.js `showModal('หลักฐานตัวอย่าง …')`): the amount at display
   size with its unit beside it, then the day and time, the bank and the number, then who
   sent it. The status wears the same badge the transactions list gives the same word. */
.detail-summary{display:flex;flex-direction:column;gap:var(--space-6);min-inline-size:0;
  padding-block-end:var(--space-16);border-block-end:1px solid var(--color-border-default)}
.detail-summary p{margin:0}
.detail-amount{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--space-8);
  font-size:var(--text-display-sm);line-height:var(--leading-tight);font-weight:var(--weight-medium);
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--color-text-primary)}
.detail-amount-figure{overflow-wrap:anywhere;min-inline-size:0}
.detail-amount-unit{font-size:var(--text-md);font-weight:var(--weight-regular);letter-spacing:normal}
.detail-amount-missing{font-size:var(--text-xl);color:var(--color-feedback-error-text);letter-spacing:normal}
.detail-amount-pending{font-size:var(--text-xl);color:var(--color-text-secondary);letter-spacing:normal}
.detail-summary-line{font-size:var(--text-md);color:var(--color-text-primary);overflow-wrap:anywhere}
.detail-summary-sender{font-size:var(--text-base);color:var(--color-text-secondary)}
.detail-number{font-variant-numeric:tabular-nums}

/* --- TICKET 156: why, who and the next steps (TD-12) ---------------------------------
   The board card's reason, owner and numbered steps, in the prototype's order: the
   received line, the owner chip, "ขั้นตอนถัดไป", one call to action. */
.detail-work,.detail-step{display:flex;flex-direction:column;gap:var(--space-8);min-inline-size:0}
.detail-work{padding:var(--space-18);border:1px solid var(--color-border-default);
  border-radius:var(--radius-card);background:var(--color-surface-card)}
.detail-values .detail-work h3,.detail-values .detail-step h3{margin:0;font-size:var(--text-lg);line-height:var(--leading-snug)}
.detail-values .detail-work h4,.detail-values .detail-step h4{margin:var(--space-8) 0 0;font-size:var(--text-base)}
.detail-work-context{margin:0;font-size:var(--text-sm);color:var(--color-text-secondary)}
.detail-owner{align-self:flex-start;margin:0;padding:var(--space-6) var(--space-12);
  border-radius:var(--radius-control);background:var(--color-surface-selected);
  color:var(--color-action-primary-hover);font-size:var(--text-sm)}
.detail-steps{margin:0;padding-inline-start:var(--space-24);line-height:var(--leading-relaxed)}
.detail-steps li+li{margin-top:var(--space-8)}
.detail-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-8);margin-top:var(--space-8)}
.detail-action{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-6);
  white-space:normal;text-align:center}
.detail-locked{margin:0;font-size:var(--text-sm);color:var(--color-text-secondary)}
.detail-reasons ul{margin:0;padding-inline-start:var(--space-20)}
.detail-field-missing{color:var(--color-text-secondary)}
.detail-field-hint{display:block;font-size:var(--text-sm);font-weight:var(--weight-regular);
  color:var(--color-text-secondary)}
.detail-values .inspection > .helper{margin:0}

/* --- TICKET 192: fixing a slip -- the amount, a picked account, a picked date ----------
   Native controls wearing the base control tokens (app.css). What is added here: the head
   of each control (its name and "(optional)"), the account list's hint, the date and time
   pair with its checkbox and its Buddhist-era reading, the gate line over the button, and
   the states the base rule does not draw for a field -- hover, pressed, disabled, error.
   Each [hidden] rule is load-bearing: a display set here would otherwise beat the
   browser's own `[hidden]{display:none}`. */
.detail-values form .detail-field-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-4)}
.detail-field-optional{font-size:var(--text-sm);font-weight:var(--weight-regular);color:var(--color-text-secondary)}
.detail-values form .detail-field-account,.detail-values form .detail-when{display:flex;flex-direction:column;
  gap:var(--space-8);flex:1 1 100%;min-inline-size:0}
.detail-values form .detail-field-account > label{flex:0 0 auto}
.detail-values form .detail-field-account .detail-field-hint{margin:0;max-width:none}
.detail-when-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--space-16)}
.detail-when-reading{display:block;font-size:var(--text-sm);color:var(--color-text-secondary)}
.detail-when-reading[hidden]{display:none}
.detail-gate{flex:1 1 100%;max-width:none;margin:0;font-size:var(--text-sm);color:var(--color-text-secondary)}
.detail-gate[hidden]{display:none}
.detail-gate-lead{font-weight:var(--weight-semibold);color:var(--color-text-primary)}
.detail-values form :is(input,select):hover:not(:disabled){border-color:var(--color-action-primary)}
.detail-values form select:active:not(:disabled){background:var(--color-surface-sunken)}
.detail-values form input:disabled{opacity:var(--opacity-disabled);cursor:not-allowed}
.detail-values form :is(input,select)[aria-invalid=true],
.detail-values form :is(input,select)[aria-invalid=true]:hover{border-color:var(--color-action-destructive)}

/* --- TICKET 156: one write, behind a disclosure (TD-05) ------------------------------ */
.detail-fold{margin-top:0;padding:var(--space-4) var(--space-16);border:1px solid var(--color-border-default);
  border-radius:var(--radius-card);background:var(--color-surface-card)}
.detail-fold[open]{padding-block-end:var(--space-16)}
.detail-fold > summary{color:var(--color-text-primary)}
.detail-fold > summary:focus-visible,.detail-technical > summary:focus-visible{outline:2px solid var(--color-focus-ring);
  outline-offset:var(--space-2);border-radius:var(--radius-sm)}
.detail-technical{margin-top:0}
.detail-technical p{margin:var(--space-4) 0;font-size:var(--text-sm);color:var(--color-text-secondary)}

/* --- TICKET 156: the source-account step (TD-04, SB-10) ------------------------------ */
.detail-step-back{align-self:flex-start;min-block-size:var(--size-44)}
.detail-step h3:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:var(--space-2);
  border-radius:var(--radius-sm)}
.detail-step-reason,.detail-step-why,.detail-step-now{margin:0}
.detail-step-why{font-size:var(--text-md);color:var(--color-text-primary)}
.detail-step-now{padding:var(--space-8) var(--space-12);border-radius:var(--radius-control);
  background:var(--color-feedback-success-bg);color:var(--color-feedback-success-text);font-size:var(--text-sm)}
.detail-compare{display:grid;grid-template-columns:minmax(0,1fr);align-items:start;gap:var(--space-12);margin-top:var(--space-4)}
.detail-compare-slip,.detail-compare-accounts{min-inline-size:0;padding:var(--space-16);
  border:1px solid var(--color-border-default);border-radius:var(--radius-card);background:var(--color-surface-card)}
.detail-values .detail-compare h4{margin:0 0 var(--space-8)}
.detail-compare-slip{background:var(--color-surface-sunken)}
.detail-compare-list{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:var(--space-6) var(--space-16);margin:0}
.detail-compare-list dt{color:var(--color-text-secondary);font-size:var(--text-sm)}
.detail-compare-list dd{margin:0;font-weight:var(--weight-semibold);overflow-wrap:anywhere}
.detail-compare-note{margin:0 0 var(--space-8);font-size:var(--text-sm);color:var(--color-text-secondary)}
.detail-account-list{list-style:none;margin:0;padding:0}
.detail-account{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;
  gap:var(--space-4) var(--space-12);padding-block:var(--space-12);border-block-end:1px solid var(--color-border-default)}
.detail-account:last-child{border-block-end:0}
.detail-account[data-match="both"]{background:var(--color-surface-selected);margin-inline:calc(var(--space-8) * -1);
  padding-inline:var(--space-8);border-radius:var(--radius-control)}
.detail-account-copy{min-inline-size:0;display:flex;flex-direction:column;gap:var(--space-2)}
.detail-account-copy strong{font-size:var(--text-base);overflow-wrap:anywhere}
.detail-account-meta{font-size:var(--text-sm);color:var(--color-text-secondary);overflow-wrap:anywhere}
.detail-account-marks{display:flex;flex-wrap:wrap;gap:var(--space-4);margin:var(--space-4) 0 0}
.detail-account-marks .badge{white-space:normal;block-size:auto;min-block-size:var(--space-20)}
.detail-account-figure{display:flex;flex-direction:column;align-items:flex-end;margin:0;text-align:end;
  font-variant-numeric:tabular-nums}
.detail-account-figure strong{font-size:var(--text-lg);color:var(--color-text-primary)}
.detail-account-figure small{font-size:var(--text-xs);color:var(--color-text-secondary)}
/* --- TICKET 179 (C): the probable account, one click away ----------------------------
   The suggestion leads the step: the selected surface the matching account row already
   wears, so the two read as the same account, with the comparison list's own grid. */
.detail-probable{display:flex;flex-direction:column;gap:var(--space-8);min-inline-size:0;padding:var(--space-16);
  border:1px solid var(--color-border-default);border-radius:var(--radius-card);background:var(--color-surface-selected)}
.detail-values .detail-step .detail-probable h4{margin:0}
.detail-probable-why{margin:0;font-size:var(--text-sm);color:var(--color-text-primary)}
.detail-probable .detail-actions{margin-top:0}
.detail-probable .helper{margin:0}
/* A narrow list (a phone, or the accounts beside a wide slip image) puts what is left
   under the account's name rather than squeezing the name into a column of its own. */
.detail-compare-accounts{container-type:inline-size}
@container (max-width: 360px){
  .detail-account-figure{grid-column:2 / -1;flex-direction:row;flex-wrap:wrap;align-items:baseline;
    gap:var(--space-6);text-align:start}
}

/* --- TICKET 156: the way back from the account settings ------------------------------
   Shown only while a person has left a record for a settings page from its step. It is
   the first thing in the workspace, in the flow, so it covers nothing; it goes when the
   record is opened again, the company changes or the person hides it. */
.detail-return{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-8) var(--space-12);
  margin:0 0 var(--space-16);padding:var(--space-10) var(--space-16);border:1px solid var(--color-border-default);
  border-radius:var(--radius-card);background:var(--color-surface-selected)}
.detail-return[hidden]{display:none}
.detail-return-text{flex:1 1 var(--size-150);min-inline-size:0;margin:0;font-size:var(--text-sm);overflow-wrap:anywhere}

@media (max-width: 900px){
  .detail-body{grid-template-columns:minmax(0,1fr)}
  /* The back button leads its own line: beside the heading it squeezed a transaction id
     into two wrapped lines at 390, which is the one thing on this screen a person reads
     character by character. */
  .detail-head{flex-direction:column;align-items:stretch}
  .detail-back{align-self:flex-start}
  /* One half at a time under this width, chosen by the switch above. Both halves stay in
     the document; the one that is not chosen is not drawn, so it is not in the tab order
     either and a person cannot land on a control they cannot see. */
  .detail-switch{display:flex}
  .detail-back{display:inline-flex}
  .detail-close{display:none}
  .detail-body[data-detail-pane="values"] .detail-image{display:none}
  .detail-body[data-detail-pane="image"] .detail-values{display:none}
}

@media (max-width: 640px){
  /* Full bleed on a phone: a native dialog keeps a margin and a max-size of its own, and
     a record read one field at a time cannot spend the edges of a phone screen on them.
     `inset` is deliberately NOT set here: the browser's own `dialog:modal` rule already
     gives a modal `position:fixed; inset:0`, and setting it in the stylesheet would move
     a NON-modal open dialog to the top of its containing block as well -- which is what a
     static render-gate capture holds, and `verify_overflow` read it as this dialog lying
     across the page behind it at 320 and 414. */
  .detail{margin:0;inline-size:100vw;max-inline-size:100vw;
    block-size:100vh;max-block-size:100vh;border:0;border-radius:0}
  .detail-frame{block-size:100vh;max-block-size:100vh;padding:var(--space-16)}
  .detail-head h2{font-size:var(--text-md)}
}

/* --- TICKET 194: the record moved while its form was being filled --------------------
   One quiet line above the review or the correction form, in the detail notice's family
   (the hold surface, ticket 183's bar beside it): what happened, and the one way to take
   the latest. It is drawn EMPTY with the form and takes no room until a live refresh
   finds the record moved, so its status region is in the page before its sentence. The
   button is the base `.secondary` (hover, the focus ring, pressed, disabled) with the
   shell's spinner and `aria-busy` while the record is read; 36 high, as the build bar's
   is, because it sits in a quiet line. Every value is a token. */
.detail-moved:not([data-moved]){margin:0;padding:0;border:0}
.detail-moved:not([data-moved]) .detail-moved-text{margin:0}
/* One row at every width: on a phone the sentence wraps beside its button rather than the
   button dropping to a line of its own (the build bar's rule, ticket 183). */
.detail-moved[data-moved]{display:flex;align-items:center;gap:var(--space-12);
  margin-block:var(--space-12);padding:var(--space-8) var(--space-12);border:1px solid var(--color-border-lead);
  border-radius:var(--radius-control);background:var(--color-feedback-hold-bg);color:var(--color-feedback-hold-text)}
.detail-moved .icon{flex:0 0 auto}
/* Balanced, so a sentence that wraps beside its button on a phone breaks in the middle
   rather than leaving its last word alone on the second line. */
.detail-moved-text{flex:1 1 auto;min-inline-size:0;max-width:none;margin:0;font-size:var(--text-sm);
  font-weight:var(--weight-semibold);color:inherit;line-height:var(--leading-normal);text-wrap:balance}
.detail-moved-load{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-8);
  min-block-size:var(--size-36);padding-block:var(--space-4);font-size:var(--text-sm)}
.detail-moved-load[hidden]{display:none}

/* --- TICKET 211: money out or money in, the one direction a person may set ----------------
   The account list's shape: the control, then its hint under it, across the form's width. */
.detail-values form .detail-field-direction{display:flex;flex-direction:column;gap:var(--space-8);
  flex:1 1 100%;min-inline-size:0}
.detail-values form .detail-field-direction > label{flex:0 0 auto}
.detail-values form .detail-field-direction .detail-field-hint{margin:0;max-width:none}

/* ===== TICKET 269 begin: the slip's evidence as the owner's mockup (19 ต.ค. 2569) ===========================
   The head leads with "หลักฐานสลิป", the record's id and its context quieter under it, the cross in the corner and a
   hairline under the head; the slip's picture sits in the mockup's quiet evidence box; "ปิดหลักฐาน" ends the dialog.
   Every value is a token. */
.detail-head{padding-block-end:var(--space-12);border-block-end:1px solid var(--color-border-default)}
.detail-headings .detail-eyebrow{display:block;margin:0 0 var(--space-4);font-size:var(--text-lg);font-weight:var(--weight-semibold);
  letter-spacing:normal;text-transform:none;color:var(--color-text-primary)}
.detail-head h2{font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text-secondary)}
.detail-close{place-items:center;inline-size:var(--size-44);block-size:var(--size-44);min-block-size:var(--size-44);padding:0}
@media (min-width: 901px){.detail-close{display:inline-grid}}
.detail-image{align-self:start;padding:var(--space-12);background:var(--color-surface-page);border:1px dashed var(--color-border-strong);border-radius:var(--radius-control)}
.detail-foot{display:flex;justify-content:flex-start;padding-block-start:var(--space-12);border-block-start:1px solid var(--color-border-default)}
.detail-foot button{min-block-size:var(--size-44)}
/* ===== TICKET 269 end ===== */
/* ===== TICKET 270 begin: "ไม่ใช่รายการซ้ำ" on a slip judged a repeat ===========================================
   The block says which record the slip repeats, in the work block's frame with the duplicate badge's colour on its
   edge; the reason dialog is the app's own `.app-modal`, opened over the detail. Every value is a token. */
.detail-repeat{display:flex;flex-direction:column;gap:var(--space-8);min-inline-size:0;padding:var(--space-18);
  border:1px solid var(--color-border-default);border-inline-start:var(--size-marker) solid var(--color-badge-duplicate-text);
  border-radius:var(--radius-card);background:var(--color-surface-card)}
.detail-values .detail-repeat h3{margin:0;font-size:var(--text-lg);line-height:var(--leading-snug)}
.detail-repeat-note{margin:0;overflow-wrap:anywhere}
.detail-repeat .helper{margin:0}
.detail-not-repeat{inline-size:min(calc(var(--space-64)*9),calc(100vw - var(--space-32)))}
.detail-not-repeat .app-modal-head h2:focus{outline:none}
.detail-not-repeat-field{display:flex;flex-direction:column;gap:var(--space-6);color:var(--color-text-primary);
  font-weight:var(--weight-semibold)}
.detail-not-repeat-field textarea{inline-size:100%;min-inline-size:0;font-size:var(--text-md);font-weight:var(--weight-regular);resize:vertical}
.detail-not-repeat-field textarea[aria-invalid=true]{border-color:var(--color-action-destructive)}
.detail-not-repeat-error{margin:0;padding:var(--space-10) var(--space-14);border-radius:var(--radius-control);
  background:var(--color-feedback-error-bg);color:var(--color-feedback-error-text);font-size:var(--text-sm);max-width:none}
/* ===== TICKET 270 end ===== */
/* ===== TICKET 273 begin: "จัดเป็นค่าใช้จ่าย" on a Telegram slip =====================================================
   The block sits in the work block's frame with the reviewed badge's colour on its edge once the slip is an expense,
   the pending one while it may be classified, and the hold colour when it may not be yet; the dialogs are the app's
   own `.app-modal`, opened over the detail. Every value is a token. */
.detail-expense{display:flex;flex-direction:column;gap:var(--space-8);min-inline-size:0;padding:var(--space-18);
  border:1px solid var(--color-border-default);border-inline-start:var(--size-marker) solid var(--color-badge-pending-text);
  border-radius:var(--radius-card);background:var(--color-surface-card)}
.detail-expense[data-expense-state=classified]{border-inline-start-color:var(--color-badge-reviewed-text)}
.detail-expense[data-expense-state=refused],.detail-expense[data-expense-state=error]{border-inline-start-color:var(--color-feedback-hold-text)}
.detail-values .detail-expense h3{margin:0;font-size:var(--text-lg);line-height:var(--leading-snug)}
.detail-expense p{margin:0;overflow-wrap:anywhere}
.detail-expense-line{font-weight:var(--weight-medium)}
.detail-expense-refusal{color:var(--color-feedback-hold-text)}
.detail-expense-label{margin-inline-end:var(--space-6);color:var(--color-text-secondary);font-weight:var(--weight-semibold)}
.detail-classify{inline-size:min(calc(var(--space-64)*9),calc(100vw - var(--space-32)))}
.detail-classify .app-modal-head h2:focus{outline:none}
.detail-classify .app-modal-body{display:flex;flex-direction:column;gap:var(--space-12)}
.detail-classify-source{display:grid;gap:var(--space-6);margin:0;padding:var(--space-12) var(--space-14);
  border-radius:var(--radius-control);background:var(--color-surface-sunken)}
.detail-classify-source>div{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,5fr);gap:var(--space-8);min-inline-size:0}
.detail-classify-source dt{color:var(--color-text-secondary);font-size:var(--text-sm)}
.detail-classify-source dd{margin:0;min-inline-size:0;overflow-wrap:anywhere;font-weight:var(--weight-medium)}
.detail-classify-source a{color:var(--color-text-link)}
.detail-classify-company{margin:0;font-weight:var(--weight-semibold)}
.detail-classify-add{align-self:flex-start}
.detail-classify-new{display:flex;flex-direction:column;gap:var(--space-8)}
.detail-classify select[aria-invalid=true]{border-color:var(--color-action-destructive)}
.detail-classify-effect{margin:0;padding:var(--space-10) var(--space-14);border-radius:var(--radius-control);
  background:var(--color-feedback-success-bg);color:var(--color-feedback-success-text);font-size:var(--text-sm);max-width:none}
@media (max-width:700px){ /* ds-allow-hardcode: app.css's phone breakpoint; a media query cannot read a token */
  .detail-classify-source>div{grid-template-columns:minmax(0,1fr)}
}
/* ===== TICKET 273 end ===== */

/* ===== TICKET 275 begin: "ผู้รับ", the recipient a person corrects, and what the review does with it =========
   The correction form's group: a fieldset across the form's width, each field its control, its "Clear to
   unknown" box (the base `.check` row) and the line saying what the slip reader read; then, on the record, the
   block that names the revision a person corrected and what the withdrawal review does. Every value is a token. */
.detail-values form .detail-recipient{display:flex;flex-direction:column;gap:var(--space-12);flex:1 1 100%;min-inline-size:0;
  margin:0;padding:var(--space-14) var(--space-16);border:1px solid var(--color-border-default);border-radius:var(--radius-card)}
.detail-recipient legend{padding:0 var(--space-4);font-size:var(--text-md);font-weight:var(--weight-semibold);color:var(--color-text-primary)}
.detail-recipient > .detail-field-hint{margin:0;max-width:none}
.detail-recipient-field{display:flex;flex-direction:column;gap:var(--space-6);min-inline-size:0}
.detail-recipient-field > label:first-child{flex:0 0 auto}
.detail-recipient-field .detail-recipient-clear{flex-basis:auto;font-weight:var(--weight-regular);font-size:var(--text-sm)}
.detail-recipient-read{margin:0;max-width:none;overflow-wrap:anywhere}
.detail-values form .detail-recipient :is(input,select):disabled{opacity:var(--opacity-disabled);cursor:not-allowed}
.detail-values form .detail-recipient input[aria-invalid=true]{border-color:var(--color-action-destructive)}
.detail-recipient-effect{display:flex;flex-direction:column;gap:var(--space-6);min-inline-size:0;padding:var(--space-14) var(--space-16);
  border:1px solid var(--color-border-default);border-inline-start:var(--size-marker) solid var(--color-badge-review-text);
  border-radius:var(--radius-card);background:var(--color-surface-card)}
.detail-values .detail-recipient-effect h4{margin:0;font-size:var(--text-md)}
.detail-recipient-effect p{margin:0;max-width:none;font-size:var(--text-base);overflow-wrap:anywhere}
/* ===== TICKET 275 end ===== */
/* ===== TICKET 277: the staff transfer error this slip is part of, in the recipient effect's shape ===== */
.detail-staff-incident{display:flex;flex-direction:column;gap:var(--space-6);min-inline-size:0;padding:var(--space-14) var(--space-16);
  border:1px solid var(--color-border-default);border-inline-start:var(--size-marker) solid var(--color-feedback-hold-text);
  border-radius:var(--radius-card);background:var(--color-surface-card)}
.detail-values .detail-staff-incident h4{margin:0;font-size:var(--text-md)}
.detail-staff-incident p{margin:0;max-width:none;font-size:var(--text-base);overflow-wrap:anywhere}
/* ===== TICKET 277 end ===== */

/* ===== TICKET 284 begin: "ไม่ใช่รายการของบริษัทนี้", a slip of another company set apart =====================
   The block sits in the expense block's frame: the hold colour on its edge while the slip is set apart (counted
   nowhere, on purpose), the pending one while the owner may set it apart, the error colour when it lapsed (its newest
   reading names an account of the company). The two dialogs are the app's own `.app-modal`, in the classify dialog's
   shape; the effect is its success box, the refusal the hold colour. Every value is a token. */
.detail-set-apart{display:flex;flex-direction:column;gap:var(--space-8);min-inline-size:0;padding:var(--space-18);
  border:1px solid var(--color-border-default);border-inline-start:var(--size-marker) solid var(--color-badge-pending-text);
  border-radius:var(--radius-card);background:var(--color-surface-card)}
.detail-set-apart[data-set-apart-state=set_apart]{border-inline-start-color:var(--color-feedback-hold-text)}
.detail-set-apart[data-set-apart-state=lapsed]{border-inline-start-color:var(--color-feedback-error-text)}
.detail-values .detail-set-apart h3{margin:0;font-size:var(--text-lg);line-height:var(--leading-snug)}
.detail-set-apart h3:focus{outline:none}
.detail-set-apart p{margin:0;overflow-wrap:anywhere}
.detail-set-apart-line{font-weight:var(--weight-medium)}
.detail-set-apart-label{margin-inline-end:var(--space-6);color:var(--color-text-secondary);font-weight:var(--weight-semibold)}
.detail-set-apart-lapsed{color:var(--color-feedback-error-text);font-weight:var(--weight-medium)}
.detail-set-apart-dialog .detail-set-apart-form{display:flex;flex-direction:column;gap:var(--space-12)}
.detail-set-apart-dialog .detail-set-apart-form[hidden],.detail-set-apart-dialog [hidden]{display:none}
.detail-set-apart-dialog select,.detail-set-apart-dialog textarea{inline-size:100%;min-inline-size:0;font-size:var(--text-md);
  font-weight:var(--weight-regular)}
.detail-set-apart-dialog textarea{resize:vertical}
.detail-set-apart-dialog :is(select,textarea)[aria-invalid=true]{border-color:var(--color-action-destructive)}
.detail-set-apart-effect{display:flex;flex-direction:column;gap:var(--space-4)}
.detail-set-apart-effect-line{display:block;overflow-wrap:anywhere}
.detail-set-apart-refusal{margin:0;padding:var(--space-10) var(--space-14);border-radius:var(--radius-control);
  background:var(--color-feedback-hold-bg);color:var(--color-feedback-hold-text);font-size:var(--text-sm);max-width:none;
  overflow-wrap:anywhere}
.detail-set-apart-found{display:flex;flex-direction:column;gap:var(--space-4);margin:0;padding-inline-start:var(--space-18);
  font-size:var(--text-sm);overflow-wrap:anywhere}
.detail-set-apart-warning{color:var(--color-feedback-warning-text);font-weight:var(--weight-semibold)}
/* ===== TICKET 284 end ===== */