/* ===========================================================================
   The settings page (REDESIGN 4.9) — one page, four sections: Cette
   succursale, Cet ordinateur, Vos données, Confidentialité.

   Linked by index.html, render-blocking, with the data-if-sheet="settings"
   marker screens/settings.js guards on before linking it as the fallback, so a
   screen still cannot ship without its styling. The module's href is resolved
   against its own URL, so it stays inside the versioned bundle.

   Every value comes from the token set in styles.css. There is no new visual
   language here: a settings screen is the app's own fields and buttons with a
   rule between the groups, and anything louder would make the one screen an
   operator visits twice a year look more important than the ones they live in.
   =========================================================================== */

/* The page's heading sits above this; the sections are its peers, a rule
   apart. */
/* Panels use the kit; this sheet owns their placement only. */
.settings-body { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.settings-column { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
#settings-legal { grid-column: 1 / -1; }
.settings-page .settings-body { max-width: none; }
.settings-page .settings-sec-lede { max-width: none; }
.settings-devices { margin-top: var(--space-4); }
.settings-page .settings-readonly-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
.settings-page .settings-example { overflow-wrap: anywhere; }
.settings-page #settings-shop-note:empty { min-height: 0; margin: 0; }
.settings-legal-links { margin-bottom: 0; }
/* The three legal links are each a target: 24px tall, not their 20px line. */
.settings-legal-links a { display: inline-flex; align-items: center; min-height: var(--tap-inline); }
@media (max-width: 900px) {
  .settings-body { grid-template-columns: minmax(0, 1fr); }
  .settings-column { grid-column: 1; }
}

.settings-sec-head {
  margin: 0 0 var(--space-1);
  font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--ink-strong);
}
/* On the Réglages page each section heading is a peer of the others under the
   page's own title (an h1 at a larger step), so it keeps text-md, as the same
   class does on the Organisation and Administration panels. It used to be set
   a step down inside the settings dialog, whose title was text-md itself. */
/* The lede is the sentence that says what the section is for, so it keeps the
   prose measure rather than running the full width of a 640px dialog. */
.settings-sec-lede { max-width: var(--prose-max); margin: 0 0 var(--space-4); }
.settings-sec .field + .field,
.settings-sec .settings-field + .settings-field { margin-top: var(--space-4); }

/* Each section commits on its own, so its Save sits with the fields it saves
   and never in a shared footer: one button under three sections cannot say
   which of them it wrote. */
.settings-sec-foot { display: flex; gap: var(--space-2); align-items: center; margin-top: var(--space-5); }

/* The live example answers "what will my transfers be called", so it is set in
   the numeric face the number itself is shown in. */
.settings-example {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums lining-nums;
  font-size: var(--text-xs); color: var(--ink);
  overflow-wrap: break-word;   /* at a word, never inside a date */
}

/* The token legend is a two-column definition list on a wide dialog and a
   stacked one when the dialog is at its narrow width, where two columns would
   leave the descriptions three words wide. */
.settings-tokens {
  display: grid; grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--space-1) var(--space-3);
  margin: var(--space-2) 0 0;
  font-size: var(--text-xs); color: var(--ink-muted); line-height: var(--leading-loose);
}
.settings-tokens dt { font-family: var(--font-mono); color: var(--ink-strong); }
/* The legend's fold: a quiet summary line under the field it explains. */
.settings-tokens-disclosure > summary { cursor: pointer; font-size: var(--text-xs); color: var(--accent); width: max-content; }
.settings-tokens-disclosure[open] > summary { margin-bottom: var(--space-1); }
.settings-tokens dd { margin: 0; }
@media (max-width: 620px) {
  .settings-tokens { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .settings-tokens dd { margin-bottom: var(--space-2); }
}

/* ── after filing: the folder on this computer, the account's mailbox ─────────
   Two stacked groups, each a status line, its buttons and the rule it
   follows. Painted by screens/afterFilingSettings.js into the settings dialog
   and, headless, into the first-sign-in walk. */
.after-set + .after-set { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--rule); }
.after-set-head { margin: 0 0 var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--ink-strong); }
.after-set .onb-status { margin-bottom: var(--space-2); }
.after-set .actions-bar { margin-top: var(--space-2); }
.after-set .settings-example { display: block; margin-top: var(--space-1); }
.onb-archive .after-set:first-child { margin-top: var(--space-2); }
/* The shop's computers that save the invoices: hairline rows, the name with
   its "this computer" capsule over one muted line of facts, and the quiet
   Remove at the row's end. */
.after-computers { margin-top: var(--space-4); }
.after-computers-head { margin: 0 0 var(--space-1); font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--ink-strong); }
.after-computer-list { list-style: none; margin: var(--space-2) 0 0; padding: 0; border-top: 1px solid var(--rule); }
.after-computer {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-2) 0; border-bottom: 1px solid var(--rule);
}
.after-computer-text { display: grid; gap: 2px; min-width: 0; }
.after-computer-text .ui-cell-secondary { overflow-wrap: anywhere; }
.after-computer .state { margin-left: var(--space-1); vertical-align: middle; }
.after-computer-acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-1); flex: none; }
/* The name being edited takes the row's text column: the field, then the line
   that says an empty name gives the computer its own label back. */
.after-computer-name { display: grid; gap: 2px; flex: 1 1 auto; min-width: 0; }
.after-computer-name .input { width: 100%; max-width: 22rem; }
@media (max-width: 620px) {
  .after-computer { flex-wrap: wrap; }
  .after-computer-acts { justify-content: flex-start; }
}

/* The org admin's panel: the token legend sits inside the field, the live
   example right under the input it describes. */
.org-after .settings-tokens { margin-top: var(--space-2); }
.org-after .settings-example { display: block; margin-top: var(--space-2); }
.org-after textarea.input { min-height: 5.5em; resize: vertical; font: inherit; }

/* ── the shop's transfer settings, read-only (gap register S1) ────────────────
   Organisation is the one editor; this is what the server holds, as label and
   value pairs. A definition list rather than disabled fields: a disabled field
   says "you could type here if something changed", which is not true for an
   operator, and its greyed text is harder to read than plain text. */
.settings-readonly { display: grid; gap: var(--space-3); margin: 0; }
.settings-readonly-row { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-1) var(--space-3); align-items: baseline; }
.settings-readonly dt { font-size: var(--text-sm); color: var(--ink-muted); }
.settings-readonly dd { margin: 0; color: var(--ink-strong); overflow-wrap: anywhere; }
.settings-readonly dd .settings-example { display: block; }
.settings-readonly dd .field-help { margin-top: var(--space-1); }
@media (max-width: 620px) {
  .settings-readonly-row { grid-template-columns: minmax(0, 1fr); }
}
/* The note under the rows keeps its line whether it holds a sentence or not, so
   the server's answer landing never moves the button below it. */
#settings-shop-note { min-height: var(--space-6); margin: var(--space-2) 0 0; }


/* "Relancer la configuration initiale" closes Cet ordinateur (REDESIGN 4.9):
   it is the one press here that starts something rather than choosing
   something, so it stands a step apart below the choices. */
.settings-rerun { margin: var(--space-5) 0 0; }

:root { --settings-login-width: 520px; }
.settings-context { grid-column: 1 / -1; }
 .settings-options-body { display: flex; flex-direction: column; gap: var(--space-4); }
.settings-options { margin-top: var(--space-4); }
.settings-page .settings-sec .settings-options-body .field { margin: 0; }

.settings-body:has(#settings-shop-sec[hidden]) .settings-column:not([hidden]) { grid-column: 1 / -1; }