/* ==========================================================================
   Orders Settings (settings-orders.html)

   One panel, one card, subsections divided by hairlines. Every subsection is
   a two-across settings block read left to right: switch, label, value
   (memory.md §5, §16). The block is ONE grid and each row is a subgrid of it,
   so the labels of a column share a track and every control in that column
   stands on the same left edge with the same width: one width, one right
   edge, nothing pushed to the row's far edge. Controls take the control
   ground (§13); a value that is words is grey text joined by `·`, never a
   chip (§19). Tokens only, light theme only, radius never over 7px, nothing
   under 10px.

   `so-` is this page's prefix. Shared Orders vocabulary (`.ord-sides`,
   `.ord-side`, `.ord-menu-ico` …) comes from css/pages/orders.css; the
   settings shell from css/pages/settings.css. Neither is redefined here.
   ========================================================================== */

/* ---------- Shell bits the exemplar set inline ------------------------------ */
.so-crumb { margin: 0 0 6px; }
.so-nav { align-self: start; }
.so-nav__body { padding: 8px; }
.so-nav__list { gap: 2px; }

/* ---------- The panel body ---------------------------------------------------- */
.so-divider { margin: 18px 0; }
.so-sec > h3 { margin: 0 0 4px; font-size: 15px; }
.so-subhead { margin: 18px 0 4px; font-size: 13px; font-weight: 600; color: var(--color-text); }
/* The sentence under a heading says what the block is for; the sentence under a
   block drops a step below it (the shape settings.css gives .sc-lead / .sc-note). */
.so-lead { margin: 0 0 8px; font-size: 12px; line-height: 1.5; color: var(--color-text-muted); max-width: 100ch; }
.so-note { margin: 8px 0 0; font-size: 11px; line-height: 1.5; color: var(--color-text-muted); max-width: 100ch; }
.so-link { color: var(--color-primary-700); text-decoration: none; font-weight: 500; }
.so-link:hover { color: var(--color-primary); }

/* ---------- The settings grid ----------------------------------------------------
   Six tracks: [switch] [label] [value] for the left half, the same three for the
   right. A row spans three and takes the parent's tracks (subgrid), so labels in
   one half share a width (capped, then they wrap) and the value column starts on
   one edge. The control inside it is `--so-ctl` wide, so controls share one
   width and one right edge; a value that is words simply uses the column. The
   slack after the value stays after it: nothing is spread to the edge (§16). */
.so-grid {
  --so-ctl: 204px;
  display: grid;
  grid-template-columns: 34px fit-content(190px) minmax(0, 1fr) 34px fit-content(190px) minmax(0, 1fr);
  column-gap: 10px;
  margin-top: 4px;
}
.so-grid--facts { grid-template-columns: fit-content(190px) minmax(0, 1fr) fit-content(190px) minmax(0, 1fr); }
.so-grid--one   { grid-template-columns: 34px fit-content(320px) minmax(0, 1fr); }
/* Facts whose value is a sentence-long rule (the release gates, the template
   pick) go one across with a wider control: two across would cut the sentence. */
.so-grid--long  { --so-ctl: 430px; grid-template-columns: fit-content(240px) minmax(0, 1fr); }
.so-grid--long .so-row { padding-right: 0; }
.so-grid--long .so-row::after { width: 50%; }
.so-grid--long .so-row:nth-last-child(-n+2)::after { display: block; }
.so-grid--long .so-row:last-child::after { display: none; }
.so-grid + .so-grid { margin-top: 10px; }
.so-row {
  position: relative;
  display: grid; grid-template-columns: subgrid; grid-column: span 3;
  align-items: center; column-gap: 10px;
  padding: 7px 0; min-height: 40px;
}
.so-grid--facts .so-row { grid-column: span 2; }
.so-grid--one .so-row { grid-column: span 3; align-items: start; }
/* The gutter between the two halves lives on the left row's end track. */
.so-row:nth-child(odd) { padding-right: 28px; }
.so-grid--one .so-row { padding-right: 0; }
.so-row__sp { display: none; }
/* Row separators are short marks, not full-width lines: a hairline that runs
   solid under the switch and the label and fades out under the value. The last
   row of each half carries none. */
.so-row::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 72%;
  background: linear-gradient(to right, var(--color-border-strong) 48%, transparent);
}
.so-row:nth-last-child(-n+2)::after { display: none; }
.so-grid--one .so-row::after { display: none; }

.so-row__l {
  display: flex; align-items: center; gap: 6px; min-width: 0;
  font-size: 13px; font-weight: 400; color: var(--color-text); line-height: 1.35;
}
.so-row__l svg { width: 14px; height: 14px; flex: none; color: var(--color-text-muted); }
.so-row__v { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 13px; }
.so-grid--one .so-row__v { align-items: start; padding-top: 2px; }
/* A value that is words, not a control: grey, a step down, wrapping where told. */
.so-words { font-size: 12px; color: var(--color-text-muted); line-height: 1.45; }
/* A words value flows as text, so a link or a badge inside it sits in the
   sentence rather than becoming a flex item of its own. */
.so-row__v.so-words { display: block; }
.so-words--wrap { white-space: normal; }
.so-words .badge { vertical-align: middle; margin-right: 2px; }
.so-words svg { width: 14px; height: 14px; flex: none; color: var(--color-text-muted); vertical-align: -3px; display: inline-block; }
.so-words .dot-status { margin-right: 3px; vertical-align: 1px; }

/* The controls: one width per column, the control ground, 12px type. */
.so-ctl { width: var(--so-ctl); max-width: 100%; padding: 5px 9px; font-size: 12px; }
.select.so-ctl { padding-right: 28px; background-position: right 8px center; }
.so-ctl--wide { width: 100%; max-width: 430px; }
.so-ctl--cell { width: 100%; }
.so-textarea { resize: vertical; min-height: 72px; line-height: 1.45; }
/* A number with its unit after it: "[ 7 ] days of arrival". */
.so-pct { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.so-num {
  width: 60px; flex: none; padding: 5px 8px; font-size: 12px; text-align: right;
  font-variant-numeric: tabular-nums;
}
.so-num--wide { width: 84px; }
.so-unit { font-size: 12px; color: var(--color-text-muted); line-height: 1.4; }

/* The one switch that cannot be turned off (Expiry): stated, not offered. */
.so-row--locked .switch { opacity: .75; cursor: not-allowed; }

/* ---------- Tables -------------------------------------------------------------
   Settings tables, not registers: no pager (data-no-pager), a bordered wrap on
   the card, percentage shares under table-layout: fixed, a min-width so a
   narrow panel scrolls the wrap and never the page. Columns are addressed by
   class, never by index. */
.so-tablewrap { border: 1px solid var(--color-border); border-radius: var(--radius-md); margin: 4px 0 10px; }
.so-table { --table-pad-x: 10px; }
.so-table .input, .so-table .select { padding: 5px 8px; font-size: 12px; }
.so-table .select { padding-right: 24px; padding-left: 7px; background-position: right 6px center; }
.so-table tbody td { font-size: 13px; }
.so-table .cell-stack .sub { font-size: 11px; }
.so-table .so-pct { gap: 5px; }

.so-table--numbering { min-width: 780px; }
.so-table--numbering th.col-doc      { width: 24%; }
.so-table--numbering th.col-pattern  { width: 20%; }
.so-table--numbering th.col-next     { width: 12%; }
.so-table--numbering th.col-preview  { width: 16%; }
.so-table--numbering th.col-assigned { width: 13%; }
.so-table--numbering th.col-reset    { width: 15%; }
.so-pattern { width: 100%; font-family: 'Hanken Grotesk', sans-serif; font-variant-numeric: tabular-nums; }
.so-nextnum { width: 68px; text-align: right; font-variant-numeric: tabular-nums; }

.so-table--terms { min-width: 880px; }
.so-table--terms th.col-type      { width: 17%; }
.so-table--terms th.col-terms     { width: 18%; }
.so-table--terms th.col-deposit   { width: 11%; }
.so-table--terms th.col-method    { width: 14%; }
.so-table--terms th.col-balance   { width: 16%; }
.so-table--terms th.col-credit    { width: 11%; }
.so-table--terms th.col-surcharge { width: 13%; }
.so-table--terms td { white-space: normal; }
.so-table--terms td.col-balance,
.so-table--terms td.col-credit,
.so-table--terms td.col-surcharge { font-size: 12px; line-height: 1.4; }
.so-table--terms td.col-deposit .so-words { overflow-wrap: normal; }

.so-table--containers { min-width: 720px; }
.so-table--containers th.col-ctype   { width: 26%; }
.so-table--containers th.col-payload { width: 16%; }
.so-table--containers th.col-volume  { width: 14%; }
.so-table--containers th.col-inside  { width: 18%; }
.so-table--containers th.col-tare    { width: 12%; }
.so-table--containers th.col-default { width: 14%; }

.so-table--slots { min-width: 880px; }
.so-table--slots th.col-loc      { width: 18%; }
.so-table--slots th.col-days     { width: 16%; }
.so-table--slots th.col-slot     { width: 11%; }
.so-table--slots th.col-cap      { width: 9%; }
.so-table--slots th.col-lead     { width: 15%; }
.so-table--slots th.col-horizon  { width: 13%; }
.so-table--slots th.col-blackout { width: 18%; }
.so-table--slots td.col-cap .so-num { width: 56px; }

.so-table--fields { min-width: 880px; }
.so-table--fields th.col-field    { width: 22%; }
.so-table--fields th.col-ftype    { width: 11%; }
.so-table--fields th.col-on       { width: 11%; }
.so-table--fields th.col-required { width: 22%; }
.so-table--fields th.col-default  { width: 14%; }
.so-table--fields th.col-prints   { width: 20%; }
.so-table--fields td { white-space: normal; }
.so-table--fields td.col-prints { font-size: 12px; line-height: 1.4; }
.so-table--fields th.col-field { display: table-cell; }
.so-table--fields th.col-field .add-row-btn { vertical-align: middle; margin-right: 6px; }

/* ---------- Notifications -----------------------------------------------------
   One row per event, two switches: the client's channel and the staff told.
   The switch leads its word (§5); the five tracks are shared so the switches
   make two straight columns down the list. */
.so-notif {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px fit-content(170px) 34px fit-content(210px);
  column-gap: 10px;
  margin-top: 4px;
}
.so-notif__head,
.so-notif__row { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; align-items: center; column-gap: 10px; }
.so-notif__row { position: relative; padding: 7px 0; min-height: 38px; }
.so-notif__row::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 60%;
  background: linear-gradient(to right, var(--color-border-strong) 55%, transparent);
}
.so-notif__row:last-child::after { display: none; }
.so-notif__head { padding: 0 0 6px; border-bottom: 1px solid var(--color-border); }
.so-notif__head > span {
  font-family: 'Hanken Grotesk', sans-serif; font-weight: 700; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted);
}
.so-notif__head .so-notif__who:nth-child(2) { grid-column: 2 / 4; }
.so-notif__head .so-notif__who:nth-child(3) { grid-column: 4 / 6; }
.so-notif__ev { font-size: 13px; color: var(--color-text); min-width: 0; }
.so-notif__lbl { font-size: 12px; color: var(--color-text-muted); white-space: nowrap; }

/* ---------- Designer arrangements --------------------------------------------
   Three tiles on the control ground (a box inside a white card, §13), a native
   radio leading its name. The checked tile's border carries the state. */
.so-arr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 4px 0 6px; }
.so-arr__opt {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px;
  background: var(--color-control); border: 1px solid var(--color-control-border);
  border-radius: var(--radius); cursor: pointer;
  transition: border-color 120ms;
}
.so-arr__opt:hover { border-color: var(--color-border-strong); }
.so-arr__opt:has(.so-radio:checked) { border-color: var(--color-primary); }
.so-radio { margin: 2px 0 0; flex: none; accent-color: var(--color-primary); width: 15px; height: 15px; }
.so-arr__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.so-arr__name { font-size: 13px; font-weight: 500; color: var(--color-text); }
.so-arr__desc { font-size: 12px; line-height: 1.45; color: var(--color-text-muted); }

/* ---------- Invoicing source ----------------------------------------------------
   Three rows on the control ground, the house pick-row (order-claim.css
   `.clm-pick-row`, quotes.css `.req-pick-row`): one checked, its mark on the
   right. Vava Accounting is drawn, dimmed and refused, never hidden. Only the
   chosen source's settings show under the list ([data-src-show]). */
.so-pick {
  background: var(--color-control); border: 1px solid var(--color-control-border);
  border-radius: var(--radius); overflow: hidden; margin: 4px 0 12px;
}
.so-pick-row {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 10px 12px;
  border: 0; border-bottom: 1px solid var(--color-control-border);
  background: none; cursor: pointer; text-align: left; font: inherit; color: var(--color-text);
}
.so-pick-row:last-child { border-bottom: 0; }
.so-pick-row:hover { background: var(--color-surface-alt); }
.so-pick-row[aria-checked="true"] { background: var(--color-primary-50); }
.so-pick-row[aria-disabled="true"] { cursor: not-allowed; }
.so-pick-row[aria-disabled="true"]:hover { background: none; }
.so-pick-row[aria-disabled="true"] .so-pick-ico,
.so-pick-row[aria-disabled="true"] .so-pick-body,
.so-pick-row[aria-disabled="true"] .so-pick-val { opacity: .5; }
.so-pick-ico { width: 34px; height: 34px; background: var(--color-surface); }
.so-pick-ico svg { width: 16px; height: 16px; }
.so-pick-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.so-pick-name { font-size: 13px; font-weight: 500; }
.so-pick-meta { font-size: 11px; color: var(--color-text-muted); line-height: 1.4; }
.so-pick-val { font-size: 12px; color: var(--color-text-muted); white-space: nowrap; }
.so-pick-check { width: 16px; height: 16px; flex: none; color: transparent; }
.so-pick-row[aria-checked="true"] .so-pick-check { color: var(--color-primary); }
[data-src-show][hidden] { display: none; }
/* The connection: name with its dot, the words, then Disconnect / Sync Now. */
.so-conn { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; padding: 2px 0 4px; }
.so-conn__name { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--color-text); }
.so-conn__words { flex: 1 1 260px; font-size: 12px; color: var(--color-text-muted); }
.so-conn__acts { display: flex; gap: 8px; }

/* ---------- Footer -----------------------------------------------------------------
   The metadata line, then the two-sided choice and Save. */
.so-footer { flex-wrap: wrap; row-gap: 8px; }
.so-footer__left,
.so-footer__right { gap: 10px; }
.so-footer__right { flex-wrap: wrap; }

/* ---------- Narrow screens -----------------------------------------------------------
   1100 and under the panel is too narrow for two settings across, so the
   block goes one across and keeps its tracks. 768 the tiles stack and the
   notification words shorten. 480 the value drops under its label. */
@media (max-width: 1100px) {
  .so-grid { grid-template-columns: 34px fit-content(300px) minmax(0, 1fr); }
  .so-grid--facts { grid-template-columns: fit-content(300px) minmax(0, 1fr); }
  .so-row:nth-child(odd) { padding-right: 0; }
  .so-row::after { width: 50%; }
  .so-row:nth-last-child(-n+2)::after { display: block; }
  .so-row:last-child::after { display: none; }
}
@media (max-width: 768px) {
  .so-arr { grid-template-columns: minmax(0, 1fr); }
  .so-notif { grid-template-columns: minmax(0, 1fr) 34px fit-content(120px) 34px fit-content(150px); }
  .so-notif__lbl { white-space: normal; }
  .so-footer__right .btn { min-height: 44px; }
  .so-ctl--wide { max-width: none; }
}
@media (max-width: 480px) {
  .so-grid { grid-template-columns: 34px minmax(0, 1fr); }
  .so-grid--facts,
  .so-grid--one { grid-template-columns: minmax(0, 1fr); }
  .so-row { grid-column: span 2; row-gap: 6px; }
  .so-grid--facts .so-row,
  .so-grid--one .so-row { grid-column: span 1; }
  .so-grid--one { grid-template-columns: 34px minmax(0, 1fr); }
  .so-grid--one .so-row { grid-column: span 2; }
  .so-row__v { grid-column: 2; }
  .so-grid--facts .so-row__v { grid-column: 1; }
  .so-ctl { width: 100%; max-width: 100%; }
  .so-textarea { min-height: 112px; }
  .so-row::after { width: 70%; }
  /* A phone: the event on its own line, then the client pair, then the staff
     pair, each switch leading its word. */
  .so-notif { grid-template-columns: 34px minmax(0, 1fr); }
  .so-notif__row { grid-column: span 2; }
  .so-notif__ev { grid-column: 1 / -1; }
  .so-notif__head { display: none; }
  .so-notif__row { row-gap: 6px; }
  .so-footer__left,
  .so-footer__right { width: 100%; }
  .so-footer .ord-sides { display: flex; flex-wrap: wrap; }
  .so-footer .ord-sides__lead { flex-basis: 100%; margin: 0; }
  /* The invoicing rows: the meta already names the value, so the right-hand
     word drops and the row keeps a finger's height. */
  .so-pick-row { min-height: 44px; }
  .so-pick-val { display: none; }
  .so-conn__acts .btn { min-height: 44px; }
}