/* Petromix · Settings page
   Scoped under .st. Centred single column, works from phone to desktop.

   The supplied settings.css, with these changes for the app:
   · no Google Fonts @import — Barlow, Barlow Condensed and IBM Plex Mono are
     self-hosted by advisor.css, so the page looks the same offline;
   · a baseline so the app's own button / heading rules cannot leak in;
   · a LIGHT theme: the design is dark-only, and the column has no ground of
     its own, so in the app's light theme its rows turn white, its text dark,
     and the yellow and red used as text darken to stay readable (WCAG AA).
     The colours that differ are tokens (--st-acc-ink, --st-ic-bg, …) whose
     dark values are the design's own;
   · .is-off rows (cannot work yet), the install steps, and the footer grey
     at #7D858F (the design's #5B636D fails WCAG AA). */

.st {
  --st-acc: #FFC20E;
  --st-ink: #121417;
  --st-row: #1C1F23;
  --st-row-hover: #22262A;
  --st-sunk: #141619;
  --st-line: rgba(255,255,255,.07);
  --st-line-2: rgba(255,255,255,.12);
  --st-text: #FFFFFF;
  --st-text-2: #B9C0C7;
  --st-muted: #8F98A2;
  --st-green: #2FB36B;
  --st-amber: #F5A524;
  --st-red: #F04438;
  --st-font: "Barlow", system-ui, sans-serif;
  --st-cond: "Barlow Condensed", "Barlow", sans-serif;
  --st-mono: "IBM Plex Mono", ui-monospace, monospace;
  /* The design's values for the colours the light theme changes. */
  --st-acc-ink: var(--st-acc);
  --st-ic-bg: rgba(255,255,255,.06);
  --st-hover: rgba(255,255,255,.06);
  --st-switch-off: #3A3F45;
  --st-av-bg: #23272C;
  --st-ring: #0F1113;
  --st-red-ink: var(--st-red);
  --st-ok-ink: #7EE0A8;
  --st-ok-bg: rgba(47,179,107,.14);
  --st-warn-ink: var(--st-amber);
  --st-warn-bg: rgba(245,165,36,.14);
  --st-foot: #7D858F;
  --st-focus: #FFFFFF;

  box-sizing: border-box;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 8px 16px 40px;
  color: var(--st-text);
  font-family: var(--st-font);
  -webkit-font-smoothing: antialiased;
  /* baseline: the design was drawn on browser defaults */
  font-size: 16px; line-height: normal; letter-spacing: normal; text-align: left;
}
:root[data-theme="light"] .st {
  --st-row: #FFFFFF;
  --st-row-hover: #F4F5F7;
  --st-sunk: #F4F5F7;
  --st-line: rgba(18,20,23,.09);
  --st-line-2: rgba(18,20,23,.16);
  --st-text: #121417;
  --st-text-2: #3B424A;
  --st-muted: #5B636D;
  --st-acc-ink: #8A5A00;
  --st-ic-bg: rgba(18,20,23,.06);
  --st-hover: rgba(18,20,23,.05);
  --st-switch-off: #C3C8CE;
  --st-av-bg: #F1F2F4;
  --st-ring: #FFFFFF;
  --st-red-ink: #C0291E;
  --st-ok-ink: #17703F;
  --st-ok-bg: rgba(47,179,107,.14);
  --st-warn-ink: #8A5A00;
  --st-warn-bg: rgba(245,165,36,.18);
  --st-foot: #5B636D;
  --st-focus: #121417;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .st {
  --st-row: #FFFFFF;
  --st-row-hover: #F4F5F7;
  --st-sunk: #F4F5F7;
  --st-line: rgba(18,20,23,.09);
  --st-line-2: rgba(18,20,23,.16);
  --st-text: #121417;
  --st-text-2: #3B424A;
  --st-muted: #5B636D;
  --st-acc-ink: #8A5A00;
  --st-ic-bg: rgba(18,20,23,.06);
  --st-hover: rgba(18,20,23,.05);
  --st-switch-off: #C3C8CE;
  --st-av-bg: #F1F2F4;
  --st-ring: #FFFFFF;
  --st-red-ink: #C0291E;
  --st-ok-ink: #17703F;
  --st-ok-bg: rgba(47,179,107,.14);
  --st-warn-ink: #8A5A00;
  --st-warn-bg: rgba(245,165,36,.18);
  --st-foot: #5B636D;
  --st-focus: #121417;
  }
}
.st *, .st *::before, .st *::after { box-sizing: border-box; }
:where(.st) :where(button) { font-family: inherit; line-height: normal; letter-spacing: normal; }
.st h1, .st h2, .st p { margin: 0; }
.st h1, .st h2 { font-family: inherit; letter-spacing: normal; color: inherit; }
.st [hidden] { display: none !important; }
.st :focus-visible { outline: 3px solid var(--st-focus); outline-offset: 2px; }

/* ---------- Top bar ---------- */
.st-bar { position: relative; height: 56px; display: flex; align-items: center; justify-content: center; }
.st-bar h1 { font-size: 22px; font-weight: 700; }
.st-icon-btn { position: absolute; right: 0; top: 6px; width: 44px; height: 44px; border-radius: 12px; border: 0; background: transparent; color: var(--st-text); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.st-icon-btn:hover { background: var(--st-hover); }

/* ---------- Profile ---------- */
.st-profile { padding: 14px 0 26px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.st-avatar { position: relative; width: 104px; height: 104px; border-radius: 50%; margin-bottom: 10px; background: var(--st-av-bg); border: 3px solid var(--st-acc); display: flex; align-items: center; justify-content: center; font-family: var(--st-cond); font-size: 40px; font-weight: 800; letter-spacing: .02em; }
.st-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; image-rendering: auto; }
.st-avatar-edit { position: absolute; right: -2px; bottom: -2px; width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--st-ring); background: var(--st-acc); color: var(--st-ink); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.st-name { font-size: 20px; font-weight: 700; }
.st-email { font-size: 14px; color: var(--st-muted); }
.st-role { margin-top: 8px; height: 26px; padding: 0 10px; border-radius: 999px; background: rgba(255,194,14,.1); border: 1px solid rgba(255,194,14,.25); color: var(--st-acc-ink); font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }

/* ---------- Groups & rows ---------- */
.st-group { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; }
.st-group-label { padding: 0 6px 2px; font-family: var(--st-mono); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--st-muted); }
.st-row { width: 100%; min-height: 56px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--st-line); background: var(--st-row); color: var(--st-text); display: flex; align-items: center; gap: 14px; text-align: left; font-size: 16px; font-weight: 600; transition: background-color .15s; }
button.st-row { cursor: pointer; }
button.st-row:hover { background: var(--st-row-hover); }
.st-row-ic { width: 32px; height: 32px; flex: none; border-radius: 9px; background: var(--st-ic-bg); color: var(--st-text-2); display: flex; align-items: center; justify-content: center; }
.st-row-label { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; padding: 8px 0; }
.st-row-label small { font-size: 12px; font-weight: 500; color: var(--st-muted); }
.st-row-val { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 500; color: var(--st-muted); white-space: nowrap; }
.st-row-val svg { color: var(--st-muted); transition: transform .2s; }
.st-row[aria-expanded="true"] .st-row-val svg { transform: rotate(90deg); }
.st-row--danger { color: var(--st-red-ink); justify-content: center; font-weight: 700; }
.st-row--danger .st-row-ic { background: rgba(240,68,56,.12); color: var(--st-red-ink); }
/* A row that cannot work yet: shown, dimmed, with the reason. */
.st-row.is-off { color: var(--st-text-2); }
.st-row.is-off .st-row-ic { opacity: .6; }
.st-switch:disabled { opacity: .45; cursor: not-allowed; }

/* expandable option list */
.st-options { margin-top: -4px; padding: 6px; border-radius: 14px; background: var(--st-sunk); border: 1px solid var(--st-line); display: flex; flex-direction: column; gap: 2px; }
.st-option { height: 48px; padding: 0 12px; border-radius: 10px; border: 0; background: transparent; color: var(--st-text); font-size: 15px; font-weight: 600; display: flex; align-items: center; justify-content: space-between; cursor: pointer; text-align: left; }
.st-option:hover { background: var(--st-hover); }
.st-option[aria-checked="true"] { color: var(--st-acc-ink); }
.st-option svg { opacity: 0; }
.st-option[aria-checked="true"] svg { opacity: 1; }
.st-steps { margin: -4px 0 0; padding: 12px 16px 12px 34px; border-radius: 14px; background: var(--st-sunk); border: 1px solid var(--st-line); font-size: 14px; line-height: 1.55; color: var(--st-text-2); }
.st-steps b { color: var(--st-text); }

/* toggle */
.st-switch { position: relative; width: 52px; height: 30px; flex: none; border-radius: 999px; border: 0; padding: 0; background: var(--st-switch-off); cursor: pointer; transition: background-color .2s; }
.st-switch::after { content: ""; position: absolute; left: 3px; top: 3px; width: 24px; height: 24px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 3px rgba(0,0,0,.4); transition: transform .22s cubic-bezier(.3,.7,.2,1); }
.st-switch[aria-checked="true"] { background: var(--st-acc); }
.st-switch[aria-checked="true"]::after { transform: translateX(22px); }

/* data stats row */
.st-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: 14px; border: 1px solid var(--st-line); background: var(--st-row); overflow: hidden; }
.st-stat { padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; border: 0; background: transparent; color: var(--st-text); text-align: left; cursor: pointer; }
.st-stat + .st-stat { border-left: 1px solid var(--st-line); }
.st-stat:hover { background: var(--st-row-hover); }
.st-stat b { font-family: var(--st-cond); font-size: 26px; line-height: 1; font-weight: 800; font-variant-numeric: tabular-nums; }
.st-stat span { font-size: 12px; font-weight: 600; color: var(--st-muted); }

.st-pill { height: 24px; padding: 0 9px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; }
.st-pill i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.st-pill--ok { background: var(--st-ok-bg); color: var(--st-ok-ink); }
.st-pill--warn { background: var(--st-warn-bg); color: var(--st-warn-ink); }
.st-spin { animation: st-spin .9s linear infinite; }
@keyframes st-spin { to { transform: rotate(360deg); } }

/* sign-out confirm */
.st-confirm { padding: 14px; border-radius: 14px; border: 1px solid rgba(240,68,56,.35); background: rgba(240,68,56,.06); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.st-confirm p { flex: 1; min-width: 160px; font-size: 14px; font-weight: 600; color: var(--st-text-2); }
.st-btn { height: 44px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--st-line-2); background: transparent; color: var(--st-text); font-size: 14px; font-weight: 700; cursor: pointer; }
.st-btn--danger { border: 0; background: var(--st-red); color: #FFFFFF; }

.st-foot { margin-top: 8px; text-align: center; font-family: var(--st-mono); font-size: 11px; font-weight: 500; letter-spacing: .08em; color: var(--st-foot); }

@media (prefers-reduced-motion: reduce) {
  .st *, .st *::before, .st *::after { transition: none !important; animation: none !important; }
}

/* ── Coloured icon tiles (2026-10-09; palette in theme.css) ───────────────── */
.st-row-ic { background: var(--tile, var(--tile-grey)); color: var(--tile-ink); }
.st-row-ic[data-ic="notifications"] { --tile: var(--tile-red); }
.st-row-ic[data-ic="language"]      { --tile: var(--tile-blue); }
.st-row-ic[data-ic="theme"]         { --tile: var(--tile-indigo); }
.st-row-ic[data-ic="units"]         { --tile: var(--tile-green); }
.st-row-ic[data-ic="biometric"]     { --tile: var(--tile-green); }
.st-row-ic[data-ic="password"]      { --tile: var(--tile-grey); }
.st-row-ic[data-ic="sync"]          { --tile: var(--tile-teal); }
.st-row-ic[data-ic="backend"]       { --tile: var(--tile-indigo); }
.st-row-ic[data-ic="backup"]        { --tile: var(--tile-blue); }
.st-row-ic[data-ic="restore"]       { --tile: var(--tile-orange); }
.st-row-ic[data-ic="install"]       { --tile: var(--tile-purple); }
.st-row-ic[data-ic="help"]          { --tile: var(--tile-purple); }

/* ════════════════════════════════════════════════════════════════════════════
   v4.164 — the Settings page drawn like the user's reference: one card per
   group, rows split by hairlines, a tile per row, a profile card on top.
   ════════════════════════════════════════════════════════════════════════════ */
.st { max-width: 620px; }
.st-bar { height: 64px; justify-content: center; }
.st-bar h1 { font-size: 21px; font-weight: 800; }
.st-back { position: absolute; left: 0; top: 10px; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--st-line-2); background: var(--st-row); color: var(--st-text); display: grid; place-items: center; cursor: pointer; }
.st-back:hover { background: var(--st-row-hover); }
.st-icon-btn { display: none; }

.st-card { border-radius: 18px; border: 1px solid var(--st-line); background: var(--st-row); overflow: hidden; }
.st-profile.st-card { width: 100%; padding: 16px 18px; margin: 4px 0 22px; display: flex; align-items: center; gap: 16px; text-align: start; color: var(--st-text); cursor: pointer; }
.st-profile.st-card:hover { background: var(--st-row-hover); }
.st-profile .st-avatar { width: 76px; height: 76px; margin: 0; flex: none; font-size: 24px; font-weight: 800; border: 3px solid var(--st-acc); }
.st-profile .st-avatar-edit { width: 28px; height: 28px; right: -4px; bottom: -4px; border-width: 2px; display: flex; align-items: center; justify-content: center; position: absolute; border-radius: 50%; background: var(--st-acc); color: var(--st-ink); }
.st-pinfo { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.st-profile .st-name { font-size: 20px; font-weight: 800; overflow-wrap: anywhere; max-width: 100%; }   /* v4.240 layout audit: wraps, never cut */
.st-profile .st-email { font-size: 14px; color: var(--st-muted); overflow-wrap: anywhere; max-width: 100%; }   /* v4.240 layout audit: wraps, never cut */
.st-profile .st-role { margin-top: 6px; height: auto; min-height: 28px; padding: 5px 12px; line-height: 1.25; border-radius: 999px; font-size: 12.5px; font-weight: 600; background: rgba(255,194,14,.08); border: 1px solid rgba(255,194,14,.45); color: var(--st-acc-ink); }
.st-deputy { margin-top: 5px; font-size: 13px; color: var(--st-text-2); }
.st-deputy b { color: var(--st-text); font-weight: 700; }
.st-chev { color: var(--st-muted); flex: none; display: flex; }

.st-group { gap: 8px; margin-bottom: 22px; }
.st-group-label { padding: 0 6px; font-size: 12px; letter-spacing: .2em; color: var(--st-muted); }
.st-card > .st-row, .st-card > .st-panel { border: 0; border-radius: 0; background: transparent; }
.st-card > .st-row { min-height: 64px; padding: 6px 16px; }
.st-group .st-card > * + * { border-top: 1px solid var(--st-line); }
.st-card > button.st-row:hover { background: var(--st-row-hover); }
.st-row-ic { width: 40px; height: 40px; border-radius: 12px; }
.st-row-label { font-size: 16px; font-weight: 700; padding: 6px 0; }
.st-row-label small { font-size: 13px; font-weight: 500; }
.st-row--danger.st-card { min-height: 64px; padding: 6px 16px; justify-content: flex-start; background: rgba(240,68,56,.07); border-color: rgba(240,68,56,.3); color: var(--st-red-ink); }
.st-row--danger .st-row-label { color: var(--st-red-ink); }
.st-row--danger .st-row-ic { background: rgba(240,68,56,.85); color: #fff; }

.st-panel { padding: 6px 16px 14px; display: flex; flex-direction: column; gap: 4px; background: var(--st-sunk); }
.st-kv { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--st-line); font-size: 14.5px; }
.st-kv span { color: var(--st-muted); flex: none; }
.st-kv b { font-weight: 600; text-align: end; min-width: 0; overflow-wrap: anywhere; }
.st-note { margin: 4px 0 6px; font-size: 12.5px; color: var(--st-muted); line-height: 1.5; }
.st-btn--wide { width: 100%; margin-top: 10px; }
.st-sub { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 2px; border: 0; background: none; color: var(--st-text); text-align: start; cursor: pointer; text-decoration: none; }
div.st-sub { cursor: default; }
.st-sub > svg:first-child { flex: none; color: var(--st-text-2); }
.st-sub__t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 15px; font-weight: 600; }
.st-sub__t small { font-size: 12.5px; font-weight: 500; color: var(--st-muted); }
.st-sub > svg:last-child { color: var(--st-muted); }
.st-panel .st-stats { margin: 8px 0 4px; }
.st-panel .st-steps { margin: 0 0 6px; }
.st-panel .st-row { background: transparent; border: 0; padding: 0; min-height: 56px; }

.st-row-ic[data-ic="theme"]     { --tile: var(--tile-orange); }
.st-row-ic[data-ic="personal"]  { --tile: var(--tile-grey); }
.st-row-ic[data-ic="password"]  { --tile: var(--tile-green); }
.st-row-ic[data-ic="security"]  { --tile: var(--tile-purple); }
.st-row-ic[data-ic="offline"]   { --tile: var(--tile-orange); }
.st-row-ic[data-ic="storage"]   { --tile: var(--tile-grey); }
.st-row-ic[data-ic="help"]      { --tile: var(--tile-blue); }
.st-row-ic[data-ic="about"]     { --tile: var(--tile-grey); }
.st-row-ic[data-ic="signout"]   { --tile: var(--tile-red); }
.st-profile.st-card { flex-direction: row; justify-content: flex-start; align-items: center; text-align: start; gap: 16px; }
.st-profile .st-pinfo { align-items: flex-start; text-align: start; }
.st-profile .st-avatar { width: 64px; height: 64px; font-size: 20px; }
.st-profile .st-name { font-size: 18px; }
.st-profile.st-card { padding: 14px 14px; gap: 14px; }
.st-profile .st-chev { align-self: center; }
.set__team { margin: 6px 6px 0; font: 600 12px var(--st-mono, ui-monospace, monospace); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-subtle, #9aa3ad); }
.st-host { min-width: 0; }
.st-host > .st { padding-bottom: 0; }
.st-profile .st-role { border: 0; background: transparent; padding: 0; min-height: 0; margin-top: 4px; }
.st-row-ic[data-ic="pin"] { --tile: var(--tile-indigo); }


/* ── Notification settings (v4.175) ───────────────────────────────────────── */
.st-group-label--in { display: block; margin: 12px 0 2px; padding: 0 2px; font-size: 11px; }
.st-row--in { min-height: 52px; padding: 4px 0; display: flex; align-items: center; gap: 12px; background: transparent; border: 0; }
.st-row--in .st-row-label { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 600; }
.st-row--in .st-row-label small { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 500; color: var(--st-muted); line-height: 1.4; }
.st-row--time { gap: 8px; }
.st-row--time .st-row-label { flex: 0 0 auto; }
.st-time { height: 42px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--st-line-2); background: var(--st-row); color: var(--st-text); font-size: 15px; font-family: inherit; color-scheme: dark; min-width: 0; }
select.st-time { max-width: 190px; }
:root[data-scheme="light"] .st-time { color-scheme: light; background: #FFFFFF; }
.st-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 0 6px; }
.st-chip { height: 40px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--st-line-2); background: transparent; color: var(--st-text-2); font-size: 13px; font-weight: 700; font-family: inherit; cursor: pointer; }
.st-chip[aria-checked="true"] { background: var(--st-acc); border-color: var(--st-acc); color: var(--st-ink); }