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

   One panel, one card, subsections divided by hairlines, the shape of
   settings-orders.html. Every subsection is a settings block read left to
   right: switch, label, value (memory.md §5, §16). 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.

   settings-orders.css is NOT linked here, so the `.so-` rules this page copies
   from it (the sub-nav, the settings grid, the settings tables, the
   notification grid, the connection line and the footer) are restated below
   under the same names. The module's shared vocabulary (`.po-sides`,
   `.po-help`, `.po-doc`, `.po-perm`, `.ord-menu-ico` …) comes from
   css/pages/purchase-orders.css; the settings shell from css/pages/settings.css.
   What only this page draws carries the `po-set-` prefix.
   ========================================================================== */

/* ---------- Shell bits (restated from settings-orders.css) ------------------ */
.so-crumb { margin: 0 0 6px; }
.so-nav { align-self: start; }
.so-nav__body { padding: 8px; }
.so-nav__list { gap: 2px; }

/* The panel header: title and lead on the left, the way into the module on
   the right. */
.po-set-open { flex: none; margin-left: 16px; }

/* ---------- The panel body ---------------------------------------------------- */
.so-divider { margin: 18px 0; }
.so-sec > h3 { margin: 0 0 4px; font-size: 15px; display: flex; align-items: center; }
.so-subhead { margin: 18px 0 4px; font-size: 13px; font-weight: 600; color: var(--color-text); }
.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 (restated) --------------------------------------
   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 and the value column starts on one edge.
   The slack after the value stays after it: nothing is spread to the edge. */
.so-grid {
  --so-ctl: 160px;
  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); }
/* Blocks whose selects carry long options (tracking source, incoterm)
   share a wider control column; the rest stay sized to short options (§9). */
.po-set-wide { --so-ctl: 236px; }
.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; }
.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. 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__l .po-help { margin-left: 0; }
.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; }
.so-words { font-size: 12px; color: var(--color-text-muted); line-height: 1.45; }
.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; }
.so-words .po-perm { display: inline-flex; vertical-align: -2px; margin-left: 2px; }

/* 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--cell { width: 100%; }
.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: 88px; }
.so-unit { font-size: 12px; color: var(--color-text-muted); line-height: 1.4; }

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

/* The supplier's pre-loading checklist sits under the switch that asks for it,
   its switches lined up under that switch's label. */
.po-set-indent { padding-left: 44px; margin-top: 0; }

/* Two-sided choices inside a value cell keep their words on one line. */
.so-row__v .po-sides { flex-wrap: nowrap; }

/* ---------- A choice of three words ----------------------------------------------
   Match mode: Two-Way · Three-Way · Bill Before Receipt. The house two-sided
   toggle has no third side, so the words stand alone: the one in force dark
   and bold, the others muted, a `·` between them. Never boxed, never filled,
   never underlined; one is always in force. */
.po-set-choice { display: inline-flex; align-items: center; flex-wrap: wrap; row-gap: 4px; }
.po-set-choice__opt {
  padding: 4px 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 500; color: var(--color-text-muted);
  white-space: nowrap; transition: color 120ms;
}
.po-set-choice__opt:hover { color: var(--color-text); }
.po-set-choice__opt[aria-checked="true"] { color: var(--color-text); font-weight: 600; }
.po-set-choice__opt:not(:last-child)::after {
  content: "·"; margin: 0 8px; color: var(--color-text-subtle); font-weight: 400;
}

/* ---------- Tables (restated) --------------------------------------------------
   Settings tables, not registers: no pager (data-no-pager), a bordered wrap,
   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. */
.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; }
/* A bare switch in a table cell is an inline span: give it its box. */
.so-table td .switch { display: inline-block; vertical-align: middle; }
.so-table th .add-row-btn { vertical-align: middle; margin-right: 6px; }
.so-table th .po-help { vertical-align: -3px; }
.so-pattern { width: 100%; font-family: 'Hanken Grotesk', sans-serif; font-variant-numeric: tabular-nums; }
.so-nextnum { width: 100%; max-width: 68px; text-align: right; font-variant-numeric: tabular-nums; }

.po-set-table--numbering { min-width: 600px; }
.po-set-table--numbering th.col-doc     { width: 24%; }
.po-set-table--numbering th.col-pattern { width: 28%; }
.po-set-table--numbering th.col-next    { width: 12%; }
.po-set-table--numbering th.col-preview { width: 21%; }
.po-set-table--numbering th.col-reset   { width: 15%; }
.po-set-table--numbering td.col-preview { white-space: nowrap; }

.po-set-table--approval { min-width: 560px; }
.po-set-table--approval th.col-band    { width: 37%; }
.po-set-table--approval th.col-route   { width: 34%; }
.po-set-table--approval th.col-example { width: 29%; }
.po-set-table--approval td.col-route .select { max-width: 220px; }

.po-set-table--terms { min-width: 560px; }
.po-set-table--terms th.col-terms   { width: 44%; }
.po-set-table--terms th.col-used    { width: 38%; }
.po-set-table--terms th.col-default { width: 18%; }
.po-set-table--terms td { white-space: normal; }
.po-set-table--terms td.col-used { font-size: 12px; color: var(--color-text-muted); line-height: 1.4; }

.po-set-table--costs { min-width: 560px; }
.po-set-table--costs th.col-cost  { width: 40%; }
.po-set-table--costs th.col-basis { width: 20%; }
.po-set-table--costs th.col-treat { width: 20%; }
.po-set-table--costs th.col-entry { width: 20%; }
.po-set-table--costs td.col-basis .select,
.po-set-table--costs td.col-treat .select,
.po-set-table--costs td.col-entry .select { max-width: 140px; }
.po-set-table--costs td.col-entry .select { margin-left: auto; display: block; }

.po-set-table--claimst { min-width: 560px; }
.po-set-table--claimst th.col-status   { width: 24%; }
.po-set-table--claimst th.col-family   { width: 20%; }
.po-set-table--claimst th.col-on-enter { width: 34%; }
.po-set-table--claimst th.col-shown    { width: 22%; }
.po-set-table--claimst td.col-family .select { max-width: 130px; }
.po-set-table--claimst td.col-on-enter { font-size: 12px; color: var(--color-text-muted); white-space: normal; }

.po-set-table--fields { min-width: 560px; }
.po-set-table--fields th.col-field   { width: 24%; }
.po-set-table--fields th.col-on      { width: 18%; }
.po-set-table--fields th.col-ftype   { width: 16%; }
.po-set-table--fields th.col-example { width: 28%; }
.po-set-table--fields th.col-print   { width: 14%; }
.po-set-table--fields td.col-example { font-size: 12px; color: var(--color-text-muted); }

/* The permissions matrix: one action per row, one person per column, a switch
   in each cell; the last column says where the grant applies. */
.po-set-table--perms { min-width: 900px; }
.po-set-table--perms th.col-perm  { width: 26%; }
.po-set-table--perms th.col-who   { width: 8.4%; }
.po-set-table--perms th.col-scope { width: 15%; }
.po-set-table--perms thead th.col-who { white-space: nowrap; letter-spacing: 0.02em; }
.po-set-table--perms td.col-who::after { background: var(--row-mark-center); }
.po-set-table--perms td.col-scope .select { max-width: 140px; margin-left: auto; display: block; }

/* ---------- Document templates ----------------------------------------------------
   The house document rows; the Published badge sits after the name. */
.po-set-docs { margin-top: 4px; }
.po-set-docs .po-doc__ver { white-space: normal; flex: 1 1 240px; min-width: 0; }

/* ---------- Notifications (restated) ---------------------------------------------
   One row per event, two switches: our staff and the supplier. 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(220px) 34px fit-content(190px);
  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; }

/* ---------- A connection line (restated) ------------------------------------------
   Name with its dot, the words, then the action. */
.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; }
.po-set-conn { margin-top: 12px; }

/* ---------- Footer (restated) --------------------------------------------------------- */
.so-footer { flex-wrap: wrap; row-gap: 8px; }
.so-footer__left,
.so-footer__right { gap: 10px; }
.so-footer__right { flex-wrap: wrap; }

/* ---------- Narrow screens -----------------------------------------------------------
   1200 the panel header's button drops under the title. 1100 and under the
   panel is too narrow for two settings across, so blocks go one across.
   768 the notification words wrap and touch targets grow. 480 the value
   drops under its label and the indent closes. */
@media (max-width: 1200px) {
  #po-settings > .card-header { flex-wrap: wrap; row-gap: 10px; }
  .po-set-open { margin-left: 0; }
}
@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-notif { grid-template-columns: minmax(0, 1fr) 34px fit-content(140px) 34px fit-content(140px); }
  .so-notif__lbl { white-space: normal; }
  .so-footer__right .btn,
  .so-conn__acts .btn,
  .po-set-docs .po-doc__acts .btn { min-height: 44px; }
  .po-set-choice__opt { min-height: 36px; }
}
@media (max-width: 480px) {
  .so-grid { grid-template-columns: 34px minmax(0, 1fr); }
  .so-grid--facts,
  .so-grid--long { grid-template-columns: minmax(0, 1fr); }
  .so-row { grid-column: span 2; row-gap: 6px; }
  .so-grid--facts .so-row,
  .so-grid--long .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,
  .so-grid--long .so-row__v { grid-column: 1; }
  .so-ctl { width: 100%; max-width: 100%; }
  .so-row::after { width: 70%; }
  .so-row__v .po-sides { flex-wrap: wrap; }
  .po-set-indent { padding-left: 0; }
  /* A phone: the event on its own line, then the staff pair, then the
     supplier pair, each switch leading its word. */
  .so-notif { grid-template-columns: 34px minmax(0, 1fr); }
  .so-notif__row { grid-column: span 2; row-gap: 6px; }
  .so-notif__ev { grid-column: 1 / -1; }
  .so-notif__head { display: none; }
  .so-footer__left,
  .so-footer__right { width: 100%; }
  .so-footer .po-sides__lead { flex-basis: 100%; margin: 0; }
}