/* OxOnOS GUI v2 — SETTINGS (phase 2). Owned by the Settings stream.
 *
 * AUDIT docs/reports/ui-audit-2026-10-04/AUDIT.md §B + RULEBOOK. Tokens only:
 * every size, space, radius and colour below is a var() from tokens.css.
 *
 * ⚠️ SEAM: linked at runtime by ui/js/screens/settings-parts.js until
 * ui/index.html (Stream 1) carries <link rel="stylesheet" href="/css/v2-settings.css">
 * after v2.css. Everything is scoped under .ss / .ss-row / .ss-* so nothing here can
 * restyle another screen — except the Accessibility token swaps at the bottom,
 * which are global ON PURPOSE (they are the setting).
 */

/* ── one split view, one title (S-09, R-O2) ───────────────────────────── */
.ss .ss-title { display: none; }
.ss.is-index .ss-title { display: block; margin-bottom: var(--s-4); }
            /* phone list only, see below */
@media (min-width: 1101px) {
  /* the list starts at the page edge, not in a centred island (AUDIT B1) */
  .page.ss { margin-left: 0; }
  .ss.is-index .ss-title { display: none; }
  .ss .ss-split { grid-template-columns: 280px minmax(0, 1fr); gap: var(--s-10); }
  .ss .ss-pane-back { display: none; }
  .ss .ss-side { top: var(--s-6); max-height: calc(100vh - 120px); overflow-y: auto; padding-bottom: var(--s-6); }
}
@media (min-width: 1700px) {
  .ss .ss-split { grid-template-columns: 320px minmax(0, 1fr); }
  /* ⭐ THE GLASS USES ITS WIDTH (re-audit N-04). The list starts at the page
     edge (B1) but the page still stopped at --page-max, so every section left
     ~330 px blank on the right of a 1920 screen and read as a web page. The
     split now runs to the content edge, the same --page-pad from the right as
     the list is from the rail; prose inside rows is still capped at
     --read-max, so the extra width goes to the space between words and
     controls, not to longer lines. tests/ui/reaudit-fixes.test.mjs. */
  .page.ss { max-width: none; }
}
/* the pane title is a SECTION title, one step below a page title */
.ss .pane .ph { margin-bottom: var(--s-6); }
.ss .pane .ph .h1 { font-size: var(--t-title-2); font-weight: var(--w-bold, 600); }
.ss .pane .ph .lede { font-size: var(--t-body); margin-top: var(--s-1); }
.ss .pane .ph .eyebrow { font-size: var(--t-small); }

/* ── the list: groups, title + live fact, a clear selection ───────────── */
.ss-group-h {
  font-size: var(--t-small); font-weight: var(--w-medium, 500); color: var(--text-2);
  margin: var(--s-5) 0 var(--s-2) var(--s-2);
}
.ss-side .ss-group { box-shadow: none; }
.ss-side .ss-group + .ss-group { margin-top: var(--s-2); }
.ss-side .lrow { min-height: 52px; padding: var(--s-2) var(--s-4); gap: var(--s-3); position: relative; }
.ss-side .lrow .lead { width: 32px; height: 32px; border-radius: var(--r-sm); }
.lrow .lead .ss-lead-pic { width: 28px; height: 28px; object-fit: contain; }
.lrow .lead .ss-lead-pic.boxpic-photo { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-sm); }
.ss-side .lrow .title { font-size: var(--t-body); }
.ss-side .lrow .desc {
  font-size: var(--t-small); color: var(--text-3); margin-top: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}
.ss-side .lrow .desc.is-live { color: var(--text-2); }
.ss-side .lrow[aria-current="page"] { background: var(--surface-2); }
.ss-side .lrow[aria-current="page"]::before {
  content: ""; position: absolute; left: 0; top: var(--s-2); bottom: var(--s-2);
  width: 3px; border-radius: var(--r-pill); background: var(--accent);
}
.ss-side .lrow[aria-current="page"] .title { font-weight: var(--w-bold, 600); }

/* search (M-02) */
.ss-search { position: relative; margin-bottom: var(--s-2); color: var(--text-3); }
.ss-search svg { position: absolute; left: var(--s-3); top: 50%; transform: translateY(-50%); width: 18px; height: 18px; pointer-events: none; }
/* The field IS the standard input (v2.css); only the icon room is added. */
.ss-search #settings-search { width: 100%; min-height: var(--hit); padding: 0 var(--s-3) 0 40px; font-size: var(--t-body); -webkit-appearance: none; appearance: none; }
/* drawn inside: the rail scrolls (overflow-y auto clips x too), and a ring outside the field was cut off at both sides */
.ss-search #settings-search:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.ss-results .lrow .desc { white-space: normal; }
.ss-none { font-size: var(--t-small); color: var(--text-2); padding: var(--s-3) var(--s-2); }

/* ── the ONE row pattern (B3) is v2.css `.setrow.v2` (Stream 1). Settings adds
 *    only: a caption, the "why" under a disabled control, a stacked variant
 *    for the update offer, and the narrower check rows. ─────────────────── */
.ss-row .info > .sr-cap { font-size: var(--t-caption); color: var(--text-3); font-variant-numeric: tabular-nums; }
.ss-row .sr-why { display: block; font-size: var(--t-caption); color: var(--text-2); margin-top: var(--s-1); }
.ss-row .ctl .state { white-space: nowrap; width: max-content; }
.ss-row .sr-val { font-size: var(--t-small); color: var(--text-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ss-row .sr-big { font-size: var(--t-title-3); font-weight: var(--w-medium, 500); font-variant-numeric: tabular-nums; }
.ss-row.ss-check .info > b { font-size: var(--t-body); }
.ss-row.locked .locked-note { display: inline-flex; align-items: center; gap: var(--s-1); }
.ss-row.sr-stack { flex-wrap: wrap; }
.ss-row.sr-stack .info { flex-basis: 100%; }
.ss-row .sr-acts { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.ss-row .sr-acts + .sr-why { flex-basis: 100%; margin-top: 0; }
.ss-notes { margin: var(--s-2) 0 0; padding-left: var(--s-5); font-size: var(--t-small); color: var(--text-2); }
.sr-group-h { font-size: var(--t-title-3); font-weight: var(--w-bold, 600); margin: var(--s-8) 0 var(--s-3); }
.ss .pane .ph + .sr-group-h { margin-top: 0; }
.sr-foot { font-size: var(--t-small); color: var(--text-2); margin: var(--s-3) 0 0; max-width: 62ch; }
.sr-foot:empty { display: none; }
.setgroup .lrow { min-height: 64px; }
.setgroup .setrow + .lrow, .setgroup .lrow + .setrow { border-top: 1px solid var(--hairline); }
.setgroup .setrow:has(+ .lrow) { border-bottom: 0; }

.switch[disabled] { opacity: 1; cursor: not-allowed; background: var(--idle-bg); box-shadow: inset 0 0 0 1px var(--control-border); }
.switch[disabled][aria-checked="true"] { background: var(--idle); }
.switch:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.ss-switch-label { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--t-small); color: var(--text-2); min-height: var(--hit); }

/* the row a search result pointed at */
.is-found { animation: ss-found 2.4s var(--ease, ease) 1; border-radius: var(--r-md); }
@keyframes ss-found { 0%, 60% { box-shadow: inset 0 0 0 2px var(--accent); background: var(--surface-2); } 100% { box-shadow: none; } }

/* inputs in the control column */
.ss-field input, .ss-row .oxo-select {
  min-height: var(--hit); width: 260px; max-width: 100%; padding: 0 var(--s-3);
  border: 1px solid var(--control-border); border-radius: var(--r-sm);
  background: var(--surface); color: var(--text); font: inherit; font-size: var(--t-body);
}
.ss-field input[aria-busy="true"] { opacity: .7; }
.ss-row .oxo-range { width: 200px; }
.ss-meter { display: block; width: 200px; height: 8px; border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden; }
.ss-meter > span { display: block; height: 100%; background: var(--text-2); border-radius: var(--r-pill); }

/* a group header with a verdict and an action (Health checks) */
.ss-group-head { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; margin: var(--s-8) 0 var(--s-3); }
.ss-group-head .sr-group-h { margin: 0; flex: 1; }
.ss-verdict { font-size: var(--t-small); color: var(--text-2); font-variant-numeric: tabular-nums; }

/* ── About this Ox1 (Atlas §G) ───────────────────────────────────────── */
.ss-about {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-1); padding: var(--s-6); margin-bottom: var(--s-6);
}
.ss-about-head { display: flex; align-items: center; gap: var(--s-4); }
.ss-about-mark { width: 56px; height: 56px; flex: none; }
.ss-about-head .ss-about-pic { width: 56px; height: 56px; flex: none; object-fit: contain; }
.ss-about-head .ss-about-pic.boxpic-photo { object-fit: cover; border-radius: var(--r-md); }
.ss-about-mark.logo-on-light { display: var(--logo-on-light, block); }
.ss-about-mark.logo-on-dark { display: var(--logo-on-dark, none); }
.ss-about-name { font-size: var(--t-title-3); font-weight: var(--w-bold, 600); margin: 0; }
.ss-about-ver { font-size: var(--t-body); color: var(--text-2); margin: var(--s-1) 0 0; font-variant-numeric: tabular-nums; }
.ss-about-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s-4) var(--s-6); margin: var(--s-6) 0 0;
}
.ss-about-facts dt { font-size: var(--t-small); color: var(--text-3); }
.ss-about-facts dd { margin: 2px 0 0; font-size: var(--t-body); font-weight: var(--w-medium, 500); font-variant-numeric: tabular-nums; }
.ss-about .tech { margin-top: var(--s-4); }

/* ── flows draw IN the pane (S-09) — inside ONE surface tile ────────────
   Founder 2026-10-05 08:07 (RH002, #/settings/people?pair=…): "the details
   should be within a tile with a white background and not just dumped onto
   the page haphazardly". The same card as every Settings group and the join
   page (ui/join/join.css .card): --surface, --border, --r-lg. */
.ss .ss-flow .join-card {
  max-width: none; margin: var(--s-4) 0 0; text-align: left;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: none; padding: var(--s-6);
}
.ss .ss-flow .join-card h2 { font-size: var(--t-title-2); font-weight: var(--w-bold, 600); text-align: left; margin-bottom: var(--s-5); }
.ss .ss-flow .join-kicker { margin-bottom: var(--s-1); color: var(--text-3); }
.ss .ss-flow .join-ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s-6); align-items: start; }
.ss .ss-flow .join-way + .join-way { border-left: 1px solid var(--hairline); padding-left: var(--s-6); }
.ss .ss-flow .join-way-h { margin: 0 0 var(--s-3); font-size: var(--t-small); font-weight: var(--w-medium); color: var(--text-2); letter-spacing: normal; }
.ss .ss-flow .join-scan { margin: 0; }
.ss .ss-flow .join-qr { margin-bottom: var(--s-3); }
.ss .ss-flow .join-qr svg { width: 200px; height: 200px; }
.ss .ss-flow .join-card .join-step { font-size: var(--t-body); color: var(--text-2); max-width: 46ch; }
.ss .ss-flow .join-card .join-addr { font-size: var(--t-title-2); margin: var(--s-1) 0 var(--s-4); color: var(--text); }
.ss .ss-flow .join-card .joincode { font-size: var(--t-display); margin: var(--s-2) 0 0; color: var(--text); }
.ss .ss-flow .join-foot { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--hairline); }
.ss .ss-flow .join-foot .join-clock { margin: 0 0 var(--s-1); }
.ss .ss-flow .join-acts { margin-top: var(--s-5); }
@media (max-width: 760px) {
  .ss .ss-flow .join-card { padding: var(--s-5) var(--s-4); }
  .ss .ss-flow .join-way + .join-way { border-left: 0; padding-left: 0; border-top: 1px solid var(--hairline); padding-top: var(--s-5); }
  .ss .ss-flow .join-card .joincode { letter-spacing: .08em; }
}
.ss .ss-flow .join-card .join-step, .ss .ss-flow .join-card .join-clock, .ss .ss-flow .join-card .join-kicker,
.ss .ss-flow .join-card .join-addr, .ss .ss-flow .join-card .joincode { margin-left: 0; margin-right: 0; padding-left: 0; text-align: left; justify-content: flex-start; }
.ss .ss-flow .join-acts { justify-content: flex-start; }
.ss-elapsed { display: flex; align-items: center; gap: var(--s-3); font-size: var(--t-body); color: var(--text-2); }
.ss-elapsed .spinner { margin: 0; width: 20px; height: 20px; }

/* Activity: who did it is plain text, not a status chip (D-64) */
.ss-act .ss-actor { font-size: var(--t-small); color: var(--text-2); }

/* ── narrow: the list is the page; rows stack their control under the text ── */
@media (max-width: 1100px) {
  .ss .ss-side .lrow .desc { white-space: normal; }
}
@media (max-width: 760px) {
  .ss-field input, .ss-row .oxo-select { width: 100%; }
}

/* ══ ACCESSIBILITY — per device, set by Settings › Accessibility ══════════
 * Global on purpose: the attribute on <html> is the setting. Token swaps only,
 * so anything drawn from tokens.css follows; v1 raw sizes (AUDIT S-01) do not. */
html[data-text-size="large"] {
  --t-caption: 14px; --t-small: 15px; --t-body: 17px; --t-lead: 19px;
  --t-title-3: 22px; --t-title-2: 27px; --t-title-1: 36px; --t-display: 50px;
}
html[data-text-size="larger"] {
  --t-caption: 16px; --t-small: 17px; --t-body: 20px; --t-lead: 22px;
  --t-title-3: 25px; --t-title-2: 30px; --t-title-1: 40px; --t-display: 56px;
}
@media (min-width: 1700px) {
  html[data-text-size="large"] {
    --t-caption: 15px; --t-small: 17px; --t-body: 20px; --t-lead: 22px;
    --t-title-3: 25px; --t-title-2: 32px; --t-title-1: 46px; --t-display: 64px;
  }
  html[data-text-size="larger"] {
    --t-caption: 18px; --t-small: 20px; --t-body: 23px; --t-lead: 26px;
    --t-title-3: 29px; --t-title-2: 36px; --t-title-1: 52px; --t-display: 72px;
  }
}
html[data-targets="large"] { --hit: 52px; --hit-lg: 60px; }
@media (min-width: 1700px) { html[data-targets="large"] { --hit: 56px; --hit-lg: 64px; } }
html[data-targets="large"] .switch { transform: scale(1.15); transform-origin: right center; }
html[data-contrast="more"] {
  --text-2: var(--text); --text-3: var(--text);
  --border: var(--text); --hairline: var(--control-border); --idle: var(--text);
}
html[data-contrast="more"] :focus-visible { outline-width: 4px !important; }
html[data-motion="reduce"] { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; }
html[data-motion="reduce"] *, html[data-motion="reduce"] *::before, html[data-motion="reduce"] *::after {
  animation-duration: 1ms !important; animation-iteration-count: 1 !important;
  transition-duration: 0ms !important; scroll-behavior: auto !important;
}