/* TICKET 120: the system settings page. Design A, from the prototype's
   `?variant=A&view=system`: a scope banner, a two-column grid of cards that each hold a
   group, and a save bar that ends the page.

   Every value here is a token. The two dialogs are native <dialog>, so the backdrop,
   Escape and the modal semantics are the platform's; what this file sets is how they
   look, and it reuses the `.app-modal` shape ticket 118 introduced rather than drawing
   a second one (a shared stylesheet for both is ticket 130's). */

/* --- the panel -------------------------------------------------------------------- */
#system-panel{display:flex;flex-direction:column;gap:var(--space-16)}
/* A page whose first read has not landed has no figures on it, and nothing on it can be
   pressed either: a control over a value that is not there is a control that lies. */
#system-panel[data-system-state=loading] .system-grid{opacity:var(--opacity-muted);pointer-events:none}

/* --- group 5, the banner: which company, what you may do (TICKET 164: one line) ---- */
.system-scope{display:flex;flex-direction:column;gap:var(--space-8);padding:var(--space-16) var(--space-20);
  background:var(--color-surface-sunken);border:1px solid var(--color-border-default);border-radius:var(--radius-card)}
.system-scope-line{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--space-6);margin:0;font-size:var(--text-md)}
.system-scope-line strong{font-weight:var(--weight-semibold)}
.system-scope-capability{font-size:var(--text-sm);color:var(--color-text-secondary)}
.system-note{margin:0;font-size:var(--text-sm);color:var(--color-text-secondary)}
.system-note:empty{display:none}

/* The two chips that keep a company value and a product-wide one apart. Never colour
   alone: each one carries its own word ("เฉพาะบริษัทนี้" / "ค่าเดียวกันทุกบริษัท"). */
.system-scope-chip{display:inline-flex;align-items:center;align-self:flex-start;gap:var(--space-6);
  padding:0 var(--space-10);min-height:var(--size-24);border-radius:var(--radius-pill);
  font-size:var(--text-xs);font-weight:var(--weight-semibold);white-space:nowrap;
  border:1px solid var(--color-border-strong);color:var(--color-text-secondary);background:var(--color-surface-card)}
.system-scope-chip[data-scope=company]{border-color:var(--color-border-lead);color:var(--color-action-primary);
  background:var(--color-surface-selected)}

/* --- the status strip (TICKET 164) ------------------------------------------------- */
/* Receiving, the slip reader, the backup and the housekeeping pass: one short line each,
   reordered abnormal-first by `reorderStrip()` (a `data-rank` the JS sets, lowest first).
   It replaces the receiving row that used to lead the INTAKE card and the housekeeping
   row that used to lead the DATA card -- the reader and backup rows here are short
   summaries; their own full detail stays in their card, one jump-link away. */
.system-strip{display:flex;flex-direction:column;gap:0;padding:0 var(--space-20);
  background:var(--color-surface-card);border:1px solid var(--color-border-default);border-radius:var(--radius-card)}
.strip-row{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-16);
  padding-block:var(--space-12);border-top:1px solid var(--color-border-subtle)}
.strip-row:first-child{border-top:0}
.strip-row .system-row-copy{gap:var(--space-4)}
.strip-row .system-row-copy p:empty{display:none}
.strip-row .system-row-marks{display:flex;flex-direction:row;align-items:center;gap:var(--space-10);flex:0 0 auto}
.strip-row .system-row-marks a{display:inline-flex;align-items:center;min-block-size:var(--size-24);
  font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--color-text-link);text-decoration:none}
.strip-row .system-row-marks a:hover{text-decoration:underline}
/* The housekeeping row keeps its step callout and technical disclosure beside it, now
   that it lives here instead of the DATA card; the same rules as the card version. */
.strip-row .system-callout{margin-top:var(--space-4)}
.strip-row .system-tech{margin-top:var(--space-4)}

/* TICKET 164 (the bug): the one banner for a failed health read, above the grid. */
#system-health-error{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-12);
  margin:0;padding:var(--space-12) var(--space-16);border-radius:var(--radius-control);
  background:var(--color-feedback-error-bg);color:var(--color-feedback-error-text);font-size:var(--text-sm)}

/* --- the "ระบบบันทึกสลิปอย่างไร" / preview disclosures (TICKET 164) ------------------ */
#system-intake-how,#system-preview-details{align-self:stretch}
#system-intake-how>summary,#system-preview-details>summary{display:inline-flex;align-items:center;
  min-block-size:var(--size-44);cursor:pointer;color:var(--color-text-link);font-weight:var(--weight-semibold);font-size:var(--text-sm)}
#system-intake-how .system-row:first-of-type{border-top:1px solid var(--color-border-subtle);padding-top:var(--space-12)}

/* --- the grid of cards ------------------------------------------------------------ */
/* Two columns where there is room for two, one where there is not. The floor is the
   width at which a Thai sentence and a badge stop sharing a line comfortably; below it
   the grid collapses rather than letting a card's own contents set the page width. */
/* `align-items:start` so a card is as tall as what is in it. Without it a grid row
   stretches both cards to the taller one and the shorter card ends in a field of empty
   white, which reads as content that failed to load. */
.system-grid{display:grid;gap:var(--space-20);align-items:start;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,calc(var(--space-64)*5 + var(--space-24))),1fr))}
.system-card{display:flex;flex-direction:column;gap:var(--space-16);min-inline-size:0;padding:var(--space-24);
  background:var(--color-surface-card);border:1px solid var(--color-border-default);border-radius:var(--radius-card)}
.system-card-title{display:flex;align-items:center;gap:var(--space-12)}
.system-card-title h2{margin:0;font-size:var(--text-lg);font-weight:var(--weight-semibold)}
.system-card-title .eyebrow{margin:0}
.system-card-mark{display:grid;place-items:center;flex:0 0 auto;
  inline-size:var(--size-44);block-size:var(--size-44);border-radius:var(--radius-control);
  background:var(--color-surface-selected);color:var(--color-action-primary)}
/* TICKET 164: a group heading's own scope chip (`cardHead`'s fourth argument), stated
   once for the whole card instead of once per field inside it. */
.system-card-title .system-scope-chip{margin-inline-start:auto;align-self:center}

/* --- a row that states a fact, with the fact on the right ------------------------- */
.system-row{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-16);
  padding-block:var(--space-12);border-top:1px solid var(--color-border-subtle)}
.system-row:first-of-type{border-top:0;padding-top:0}
.system-row-copy{display:flex;flex-direction:column;gap:var(--space-4);min-inline-size:0}
.system-row-copy strong{font-weight:var(--weight-semibold)}
.system-row-copy p{margin:0;font-size:var(--text-sm);color:var(--color-text-secondary);overflow-wrap:anywhere}
.system-row-marks{display:flex;flex-direction:column;align-items:flex-end;gap:var(--space-6);flex:0 0 auto}

/* --- the fields ------------------------------------------------------------------- */
/* `flex:0 0 auto` is not redundant either: app.css gives every <label> a flex basis in
   pixels, which inside a COLUMN card becomes the field's HEIGHT. Measured on the render:
   two of them left ninety pixels of white in the middle of this card. Ticket 118's modal
   labels carry the same line for the same reason. */
.system-field{display:flex;flex:0 0 auto;flex-direction:column;gap:var(--space-6);min-inline-size:0;
  font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text-secondary)}
.system-field>span{color:var(--color-text-primary)}
.system-field :is(input,select,textarea){inline-size:100%;min-inline-size:0;
  font-size:var(--text-md);font-weight:var(--weight-regular);color:var(--color-text-primary)}
.system-field small{font-weight:var(--weight-regular);color:var(--color-text-secondary)}
.system-field :is(input,select,textarea):disabled{background:var(--color-action-disabled-bg);
  border-color:var(--color-action-disabled-border);color:var(--color-action-disabled-text);cursor:not-allowed}
/* TICKET 157 (SI-19): the destructive ink, not `--color-border-danger` (1.90:1 on a white
   field, ticket 153's measurement), and it now survives the keystroke that set it. */
.system-field :is(input,textarea)[aria-invalid=true]{border-color:var(--color-action-destructive)}
/* The per-cent sign sits beside the number, not inside it: a suffix drawn over an input
   is a suffix a screen reader never reads and a long value runs under. */
.system-input-unit{display:flex;align-items:center;gap:var(--space-8)}
.system-input-unit input{inline-size:calc(var(--space-64)*2);flex:0 1 auto}
.system-input-unit span{font-size:var(--text-md);color:var(--color-text-secondary)}
.system-error{margin:0;font-size:var(--text-sm);color:var(--color-feedback-error-text)}
.system-error:empty{display:none}
.system-callout{margin:0;padding:var(--space-12) var(--space-16);border-radius:var(--radius-control);
  font-size:var(--text-sm);background:var(--color-feedback-hold-bg);color:var(--color-feedback-hold-text)}
.system-callout[data-tone=error]{background:var(--color-feedback-error-bg);color:var(--color-feedback-error-text)}
.system-callout:empty{display:none}
.system-actions{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-12)}

/* --- the Telegram preview --------------------------------------------------------- */
/* A quoted block, so the preview reads as the message the group would see rather than as
   another paragraph of this page. It is text, never a control: nothing here can send. */
.system-preview{display:flex;flex-direction:column;gap:var(--space-6);padding:var(--space-16);
  background:var(--color-surface-sunken);border:1px solid var(--color-border-subtle);border-radius:var(--radius-control)}
/* `text-secondary`, not the `text-caption` the page's other eyebrows use: measured on
   this sunken surface, caption is 4.39:1 and axe fails it at this size, while secondary
   is 6.87:1. The eyebrow on a CARD sits on `surface-card` and keeps caption. */
.system-preview>span{font-size:var(--text-xs);font-weight:var(--weight-semibold);
  letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-secondary)}
.system-preview p{margin:0;font-size:var(--text-md);line-height:var(--leading-relaxed);overflow-wrap:anywhere}

/* --- the reader block ------------------------------------------------------------- */
.system-reader{display:flex;flex-direction:column;gap:var(--space-8);padding:var(--space-16);
  background:var(--color-surface-sunken);border:1px solid var(--color-border-subtle);border-radius:var(--radius-control)}
.system-reader h3{margin:0;font-size:var(--text-md);font-weight:var(--weight-semibold)}
.system-reader button{align-self:flex-start}
#system-reader-state{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-6);
  margin:0;font-size:var(--text-sm);color:var(--color-text-secondary)}
#system-reader-state .badge{align-self:flex-start}
/* TICKET 157 (SI-12): one sentence under the badge, in the primary ink: it is the next step. */
.system-reader-next{margin:0;font-size:var(--text-sm);color:var(--color-text-primary)}

/* --- a technical disclosure (SI-12, SI-13) ---------------------------------------- */
/* The model, the timing, the provider's own words and the backup path are for whoever
   maintains the host, so they sit behind one closed "รายละเอียดทางเทคนิค" rather than in the
   sentence a person reads. */
.system-tech{align-self:stretch;font-size:var(--text-sm);color:var(--color-text-secondary)}
.system-tech>summary{display:inline-flex;align-items:center;min-block-size:var(--size-44);cursor:pointer;color:var(--color-text-link);font-weight:var(--weight-semibold)}
.system-tech dl{display:flex;flex-direction:column;gap:var(--space-8);margin:0 0 var(--space-4)}
.system-tech dl>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--space-4) var(--space-12)}
.system-tech dt{color:var(--color-text-secondary)}
.system-tech dd{margin:0;color:var(--color-text-primary);overflow-wrap:anywhere}

/* --- group 5, the save bar: where the page ends ----------------------------------- */
.system-save{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap: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)}
.system-save p{margin:0;font-size:var(--text-sm);color:var(--color-text-secondary)}
/* An unsaved page says so in the bar itself, not only in a sentence, because the bar is
   what a person looks at when they are deciding whether they are finished. */
#system-panel[data-dirty=true] .system-save{border-color:var(--color-border-lead);background:var(--color-surface-selected)}
#system-panel[data-dirty=true] .system-save p{color:var(--color-text-primary);font-weight:var(--weight-medium)}
/* TICKET 157 (SI-19): a value that is not valid says so in the bar as well, in the error ink. */
#system-panel[data-invalid=true] .system-save{border-color:var(--color-action-destructive);background:var(--color-feedback-error-bg)}
#system-panel[data-invalid=true] .system-save p{color:var(--color-feedback-error-text);font-weight:var(--weight-medium)}

/* --- ticket 119's sender control, inside this dialog ------------------------------- */
/* TICKET 131. The control is `page-intake-setup.css`'s, and this block is only what it
   needs to survive `.app-modal-body`. Two ancestors on purpose, not for tidiness: inside
   `.app-modal-body` (ticket 118's dialog shell, which this modal reuses) a <label> is
   laid out as a COLUMN at `(0,1,1)` and its input is stretched to the full width at
   `(0,1,2)`, both above the control's own one-class rules. Ticket 120 measured what that
   costs when it is not answered -- the radio centred above its own words with a
   500-pixel-wide hit area -- and the answer is the same one, re-pointed at the shared
   class names. */
.app-modal-body .intake-policy{margin:0}
.app-modal-body .intake-policy-choice{display:grid;grid-template-columns:auto minmax(0,1fr);
  align-items:start}
.app-modal-body .intake-policy-choice input{inline-size:var(--size-24);block-size:var(--size-24);
  min-block-size:var(--size-24);flex:0 0 auto}
/* The id list is the last thing in the dialog and the modal body supplies the gap. */
.app-modal-body .intake-field{margin-block-end:0}
#sender-ids{font-family:var(--font-mono);font-size:var(--text-sm)}
#sender-count{margin:0;font-size:var(--text-sm);color:var(--color-text-secondary)}

/* --- phone width ------------------------------------------------------------------ */
/* The fact rows stack, so a Thai sentence keeps its own line and the badge sits under
   it rather than squeezing the sentence into a column two words wide. */
@media (max-width:480px){
  .system-row,.strip-row{flex-direction:column;align-items:stretch}
  .system-tech dl>div{grid-template-columns:minmax(0,1fr)}
  .system-row-marks{flex-direction:row;align-items:center;justify-content:flex-start}
  .system-save{flex-direction:column;align-items:stretch}
  .system-save .system-actions{justify-content:stretch}
  .system-save .system-actions button{flex:1 1 auto}
  /* TICKET 67: measured at 320/390/414 -- this save bar is the page's primary action and
     it sat at the far end of 5.9/5.3/5.2 screens of scroll (evidence/67/phone.md).
     `position:sticky` measured wrong here: its containing block is `#system-panel`
     itself (the whole page's worth of settings, about 4,250 css pixels), and that block
     is already inside the viewport at scroll 0, so a `bottom:0` stick clamps to the
     CONTAINING BLOCK'S top the moment it enters view -- pinning the bar near the page
     heading instead of the viewport's bottom. `position:fixed` is relative to the
     viewport itself regardless of scroll depth, which is what "reachable at any scroll
     position" actually needs; the compensating padding below keeps the last settings
     group from being covered once a person scrolls all the way down to it. */
  .system-save{position:fixed;inset-inline:0;inset-block-end:0;z-index:var(--z-sticky);
    border-radius:0;box-shadow:var(--shadow-sm)}
  #system-panel{padding-block-end:var(--space-64)}
}
/* TICKET 184: the reader badge can carry a sentence ("The OCR connection has not been
   checked from this page yet"). app.css keeps every badge on one line, so in English at
   390 it ran 33 px past the page and the page scrolled sideways. Here it wraps inside the
   width it has, and its row of marks may wrap under it. */
.system-row-marks{flex-wrap:wrap;min-inline-size:0;max-inline-size:100%}
.strip-row .system-row-marks{flex:0 1 auto}
#strip-reader-badge,#system-reader-state .badge{block-size:auto;min-block-size:var(--space-20);max-inline-size:100%;
  padding-block:var(--space-2);white-space:normal;overflow-wrap:anywhere;line-height:var(--leading-snug)}
/* TICKET 184: the same page at 320 in English still ran 7 px wide: a group heading's scope
   chip ("This company") stays on the heading's row. The row may wrap it under the title. */
.system-card-title{flex-wrap:wrap}
.system-card-title .system-scope-chip{max-inline-size:100%;white-space:normal}

/* ===== TICKET 269 begin: the "ระบบ" tab as the owner's mockup (19 ต.ค. 2569) ===============================
   Two parts, as the mockup has them: the card "การแสดงผลและข้อความ" (the scope line, the two display fields, the
   group's reply, and the save at its foot), then one fold "สถานะบริการอ่านสลิปและสำรองข้อมูล" (the status strip, the
   reader, the data and backup). The card of who may send a slip, a function the mockup has no place for, sits
   between them. Every value is a token; the cards are the mockup's panel. */
#system-panel .system-card{border-radius:var(--radius-card-lg);box-shadow:var(--shadow-sm)}
.system-display{gap:var(--space-16);padding:var(--space-20)}
.system-card-heading{margin:0;font-size:var(--text-lg);font-weight:var(--weight-semibold)}
.system-display .system-scope{padding:0;background:transparent;border:0;border-radius:0}
.system-display .system-scope-line{font-size:var(--text-sm);color:var(--color-text-secondary)}
.system-display .system-scope-line strong{color:var(--color-text-primary)}
.system-display .system-scope .system-tech>summary{min-block-size:var(--size-36)}
.system-subhead{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-8) var(--space-12);margin:var(--space-8) 0 0;padding-block-start:var(--space-16);
  border-top:1px solid var(--color-border-subtle);font-size:var(--text-md);font-weight:var(--weight-semibold)}
.system-subhead>h3{margin:0;font-size:var(--text-md);font-weight:var(--weight-semibold)}
h3.system-subhead{margin-block-end:0}
.system-display .system-save{margin:var(--space-4) calc(var(--space-20) * -1) calc(var(--space-20) * -1);padding:var(--space-16) var(--space-20);
  border:0;border-top:1px solid var(--color-border-default);border-radius:0 0 var(--radius-card-lg) var(--radius-card-lg)}
#system-panel[data-dirty=true] .system-display .system-save,#system-panel[data-invalid=true] .system-display .system-save{border-top-color:var(--color-border-lead)}
.system-status{gap:0;padding:0;overflow:hidden}
.system-status>summary{display:list-item;min-block-size:var(--size-44);padding:var(--space-16) var(--space-20);font-weight:var(--weight-medium);cursor:pointer;list-style-position:inside}
.system-status[open]>summary{border-bottom:1px solid var(--color-border-default)}
.system-status>:not(summary){margin:var(--space-16) var(--space-20) 0}
.system-status>:last-child{margin-block-end:var(--space-20)}
.system-status .system-strip{padding:0;border:0;border-radius:0}
.system-data{display:flex;flex-direction:column;gap:var(--space-12);padding-block-start:var(--space-16);border-top:1px solid var(--color-border-subtle)}
.system-data>h3{margin:0;font-size:var(--text-md);font-weight:var(--weight-semibold)}
.system-data .system-row:first-of-type{padding-top:0}
@media (max-width:480px){
  .system-display{padding:var(--space-16)}
  .system-display .system-save{margin-inline:0;border-radius:0}
  .system-status>summary{padding:var(--space-14) var(--space-16)}
  .system-status>:not(summary){margin-inline:var(--space-16)}
}
/* ===== TICKET 269 end ===== */