/*
 * css/components/settings.css
 * 18 Oct 2026 v19
 *   GS-EDIT. What you told me at the start: .settings-background__group
 *   (as the capability groups), .settings-checks and .settings-check, one
 *   tick box per answer, each a 44px target.
 * 04 Oct 2026 v18
 *   LOOK-1 / LOOK-3. The index is eight cards (.settings-idx), each with a
 *   tile in its kind colour (--sec, from variables.css --kind-*) and a line
 *   saying what is set now. A section opens as its own page
 *   (.settings-secpage): a large tile beside the h1, and its rows in named
 *   groups (.settings-group), each group a rounded card. Colour is never
 *   the only cue: every tile sits beside its title. The .settings-sec
 *   details rules above are no longer rendered (touch-once: left one
 *   release).
 * 02 Oct 2026 v17
 *   W4-23 SETTINGS-RESCOPE. .settings-sec*: the index of eight sections, each
 *   a native details that opens where it is (Messages a direct row).
 *   .settings-group retired with the one long page.
 * 02 Oct 2026 v16
 *   W4-6. .settings-result: Download, Restore and Delete outcomes on the page.
 * 02 Oct 2026 v15
 *   W4-2. .settings-capability__again: why What your body can do opened by
 *   itself, and Carry on.
 * 01 Oct 2026 v14
 *   B2 RESTORE-LOCK. .settings-dialog__error: a form error in words, with a rule.
 *   B4 MESSAGES. .settings-message*, .nav-dot. B5 EVIDENCE: .settings-research__*.
 * 01 Oct 2026 v13
 *   PT-3. .settings-data-about: How your data is kept, in words.
 * 28 Sep 2026 v12
 *   SMOOTH-P5. .tier-table: Free and the Plan side by side. On a phone
 *   each row stacks, and each cell carries its column's name.
 *
 * 28 Sep 2026 v11
 *   SMOOTH-P4c. The one page: .settings-lede, .settings-group,
 *   .settings-row (a row that opens its screen, with its current value)
 *   and .settings-row--switch (a switch that works in place); the
 *   conditions list with It's better now / It's back (.settings-cond).
 *   Every row is at least 56px, the whole row is the target, and a value
 *   is text, never colour alone. The index and sub-tab rules below are
 *   no longer rendered and are left for one release (touch-once).
 *
 * 22 Aug 2026 v10
 *   WEIGHT-1b. .settings-unit-picker (kg / lb / st & lb),
 *   .settings-weight-stone (the composite stone-and-pounds input) and
 *   .settings-input--short.
 *
 *   Stone and pounds is a COMPOSITE, not a number with a label beside
 *   it. Two fields, because that is how the weight is said.
 *
 * 14 Aug 2026 v9
 *
 * v9 - D-3 / W2-7. .settings-preferences, .settings-preflist and
 *   .cs-skip-offer. The preference row wraps rather than truncating:
 *   somebody cannot undo what they cannot read.
 *
 * 14 Aug 2026 v8
 *
 * v8 - W3-A2. .settings-capability and .settings-capability__group for the
 *   capability editor. Fieldset resets included: UA borders and inline
 *   padding on fieldset, and min-inline-size:0 so it can shrink.
 *
 * 13 Aug 2026 v7
 *
 * v7 — A3. "Your plan" panel. Reuses the existing settings type scale and
 *   spacing tokens rather than introducing a new visual language: this is
 *   a settings panel, and a panel that looks like a pricing page inside
 *   Settings reads as an advert. The gold accent (#B8970A, the paid-tier
 *   signal across the whole product family) is used ONCE, on the price
 *   line, and carries no meaning by itself — the tier is stated in text,
 *   the price is stated in text, and removing all colour loses nothing.
 *   WCAG 2.2 AA: 1.4.1 (no meaning by colour alone) and 1.4.3 (contrast).
 *
 *   The price line was originally written AS gold text and that was wrong,
 *   caught before shipping by checking the pair rather than trusting the
 *   token. #B8970A on --color-bg-card (#334155) is 3.68:1 — below AA.
 *   Gold clears AA only on the two deepest surfaces (6.35:1 and 5.20:1),
 *   and settings panels sit on cards. The product's one proven-safe gold
 *   usage is the reverse: gold BACKGROUND with dark text, 6.6:1, per
 *   coach-proposal.css v?. So emphasis here is weight and size only, and
 *   the gold signal stays where it already works.
 *
 * 04 Aug 2026 v6
 *
 * v6 — .settings-update-block/.settings-update-status for the new
 *   "Update app" force-update button (settings.js v13).
 *
 * 05 Jul 2026 v5
 *
 * Styles for settings.js v11 — six-tab settings view.
 *
 * v5 — My Movement rebuild. Added .settings-movement-chip /
 *   --selected / --mixed / .settings-movement-chips / .settings-movement-
 *   divider for the new "How you move" section (settings.js v11).
 *   Deliberately reuses the same colour-mix(primary 15%)/border-primary
 *   pattern already proven accessible in .settings-goal-chip--selected —
 *   no new contrast combination introduced, so no new WebAIM check
 *   needed. Added a :disabled state (opacity + not-allowed cursor) for
 *   when "mixed" is active and the six specific chips are disabled.
 *
 * v4 — S3 fix: added .settings-goals-category / __label styles for the
 *   grouped goals rendering in settings.js v8 (category headers above
 *   each chip group, matching onboarding's presentation).
 *
 * v3 — S2 fix: native <select> option list fails WebAIM contrast.
 *   .settings-select was setting color: var(--color-text) (a light
 *   colour for this app's dark theme) — but the *open* option list is
 *   rendered by the OS/browser on a white background, not by our CSS.
 *   Light text landed on white and washed out (visible in screenshot:
 *   "Under 18" readable only because it was the highlighted/selected
 *   row; every other option nearly invisible). Added an explicit
 *   .settings-select option rule — dark text, white background —
 *   independent of the app theme, since the native popup ignores the
 *   theme regardless. Applies to every dropdown in Settings (age,
 *   gender, weekly target, activity level).
 *   Also removed the .settings-coach-styles / .settings-coach-style*
 *   rules — dead CSS following the S1 removal of the coach style
 *   picker in settings.js v7 (Nurturing only, permanently, no picker).
 *
 * v2 — Tab strip overlap fix (defensive !important on .settings-tab).
 *
 * v1 — Initial six-tab settings view styles.
 */

/* ── View ─────────────────────────────────────────────────────── */

.settings-view {
  display: flex;
  flex-direction: column;
  padding-bottom: var(--space-8);
}

.settings-title {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--color-text);
  padding: var(--space-5) var(--space-4) var(--space-3);
  margin: 0;
}

/* ── Tab strip ────────────────────────────────────────────────── */

.settings-tabs {
  display: flex;
  overflow-x: auto;
  border-bottom: 1px solid var(--color-border);
  padding: 0 var(--space-4);
  gap: var(--space-1);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.settings-tabs::-webkit-scrollbar { display: none; }

/* NAV-4, 12 Aug 2026. Graeme, device pass part 4: "Changing equipment and
   turning on session notes really hard to find. Like really really hard."

   Both live in the Equipment tab -- FOURTH of seven in a strip that
   scrolls horizontally with the scrollbar hidden. So on a phone the
   visible tabs were Equipment, Reminders, Display, About, and Profile,
   Programme and Conditions were off-screen to the LEFT with nothing
   indicating they existed.

   A hidden scrollbar is right on mobile; giving no other overflow signal
   is not. A fade at each edge says "there is more this way" without
   adding chrome, and only appears when there is genuinely more --
   scroll-driven, so it is not a permanent decoration implying content
   that is not there.

   Does not fix the underlying problem, which is seven tabs. That is
   NAV-2's job. This stops the strip actively hiding them. */
.settings-tabs {
  /* Two gradients pinned to the scroll container's edges, sized to zero
     when scrolled fully to that end. */
  background:
    linear-gradient(to right, var(--color-bg) 30%, transparent) left / 2rem 100% no-repeat local,
    linear-gradient(to left,  var(--color-bg) 30%, transparent) right / 2rem 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,0.28), transparent) left / 1rem 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,0.28), transparent) right / 1rem 100% no-repeat scroll;
}

.settings-tab {
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  min-width: max-content !important;
  width: auto !important;
  padding: var(--space-3) var(--space-4) !important;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text-muted);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: unset !important;
  min-height: 44px;
  transition: color 0.1s, border-color 0.1s;
}

.settings-tab--active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  font-weight: var(--font-semibold);
}

.settings-tab:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

/* ── Panels ───────────────────────────────────────────────────── */

.settings-panels {
  padding: var(--space-4);
}

.settings-panel { display: none; }
.settings-panel--active { display: block; }

/* ── Section ──────────────────────────────────────────────────── */

.settings-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.settings-section__heading {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  margin: var(--space-2) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.settings-section__heading:first-child {
  padding-top: 0;
  border-top: none;
  margin-top: 0;
}

.settings-section__sub {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
  line-height: var(--leading-relaxed);
}

/* ── Fields ───────────────────────────────────────────────────── */

.settings-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.settings-field--toggle {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.settings-label {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.settings-label__sub {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: var(--font-normal);
}

.settings-input {
  width: 100%;
  padding: var(--space-3) var(--space-3);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-text);
  min-height: 44px;
  box-sizing: border-box;
}

.settings-input:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 0;
  border-color: var(--color-primary);
}

.settings-select {
  width: 100%;
  padding: var(--space-3) var(--space-3);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-text);
  min-height: 44px;
  appearance: none;
  cursor: pointer;
}

.settings-select:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 0;
}

/* S2 fix — the closed select keeps the dark-theme colour above.
   The OPEN option list is rendered by the OS/browser on a white
   background regardless of our theme — style it explicitly so text
   stays readable there, independent of --color-text. WebAIM-checked:
   #14161f on #ffffff = 18.1:1, comfortably passes AA and AAA. */
.settings-select option {
  color: #14161f;
  background-color: #ffffff;
}

/* ── Toggle switch ────────────────────────────────────────────── */

.settings-toggle {
  position: relative;
  width: 48px;
  height: 28px;
  flex-shrink: 0;
  background: var(--color-border);
  border: none;
  border-radius: 14px;
  cursor: pointer;
  transition: background 0.2s;
}

.settings-toggle--on {
  background: var(--color-primary);
}

.settings-toggle__track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: white;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.settings-toggle--on .settings-toggle__track::after {
  transform: translateX(20px);
}

.settings-toggle:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ── Programme card ───────────────────────────────────────────── */

.settings-programme-card {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.settings-programme-card__name {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  margin: 0;
}

.settings-programme-card__week,
.settings-programme-card__phase {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
}

/* ── Actions row ──────────────────────────────────────────────── */

.settings-actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* ── Goals — grouped by category (S3) ────────────────────────── */

.settings-goals-groups {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.settings-goals-category {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.settings-goals-category__label {
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0;
}

/* ── Goals grid ───────────────────────────────────────────────── */

.settings-goals-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.settings-goal-chip {
  padding: var(--space-2) var(--space-3);
  min-height: 44px;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s, color 0.1s;
}

.settings-goal-chip--selected {
  background: color-mix(in srgb, var(--color-primary) 15%, transparent);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.settings-goal-chip:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ── Movement identity chips (v5 — My Movement rebuild) ──────── */

.settings-movement-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.settings-movement-chip {
  padding: var(--space-2) var(--space-3);
  min-height: 44px;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  transition: background 0.1s, border-color 0.1s, color 0.1s, opacity 0.1s;
}

/* Same colour-mix pattern as .settings-goal-chip--selected — already
   proven accessible, no new contrast combination introduced. */
.settings-movement-chip--selected {
  background: color-mix(in srgb, var(--color-primary) 15%, transparent);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.settings-movement-chip:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.settings-movement-chip:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ── Capability editor (W3-A2, 14 Aug 2026) ───────────────────────────────
   Four selects letting somebody correct or update what their body can do.
   A fieldset per question so screen readers announce the legend with each
   control, and the hint is wired via aria-describedby in the markup.

   Deliberately plain. This is the screen where a person tells us they can
   no longer get off the floor; it should not look like a settings toggle
   with a flourish. Spacing does the work. */

.settings-capability {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}

/* W4-2. Sent here before a session after Delete my health answers. */
.settings-capability__again {
  display: grid;
  gap: var(--space-3, 12px);
  margin-bottom: var(--space-4, 16px);
}

.settings-capability__group {
  /* fieldset resets — UA styles put a border and inline padding on these */
  border: 0;
  margin: 0 0 var(--space-5) 0;
  padding: 0;
  min-inline-size: 0;   /* stops a fieldset refusing to shrink in flex/grid */
}

.settings-capability__group > .settings-label {
  /* legend, not label: it does not inherit the block layout automatically */
  display: block;
  padding: 0;
  margin-bottom: var(--space-1);
}

.settings-capability__group .settings-section__sub {
  margin-top: 0;
  margin-bottom: var(--space-2);
}

/* ── How you like things (D-3 / W2-7, 14 Aug 2026) ───────────────────────
   The preference list. Each row is name / tag / undo, and the undo has to
   stay reachable at 320px, so the row wraps rather than truncating the
   name — somebody cannot undo what they cannot read. */

.settings-preferences {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}

.settings-preflist {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
}

.settings-preflist__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
}

.settings-preflist__name {
  flex: 1 1 60%;
  min-width: 0;          /* lets the name wrap instead of forcing overflow */
}

.settings-preflist__tag {
  font-size: 0.85em;
  opacity: 0.75;
  white-space: nowrap;
}

/* ── Post-skip offer (W2-7) ───────────────────────────────────────────────
   Sits under the Skip button inside a session. Quiet by design: it must
   read as an aside, not as a prompt demanding an answer. */

.cs-skip-offer {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.cs-skip-offer__line {
  margin: 0 0 var(--space-2);
  font-size: 0.9em;
  opacity: 0.85;
}

.cs-skip-offer__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.settings-movement-divider {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: var(--space-1) 0;
}

.settings-movement-chip--mixed {
  align-self: flex-start;
}

/* ── About ────────────────────────────────────────────────────── */

.settings-about-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.settings-version {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--color-primary);
  cursor: pointer;
  user-select: none;
}

.settings-about-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* ── Your plan (A3, 13 Aug 2026) ─────────────────────────────────── */

.settings-plan-current {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-5);
}

.settings-plan-current__label {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin: 0;
}

.settings-plan-current__tier {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--color-text-primary);
  margin: 0;
}

.settings-plan-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.settings-plan-block p {
  margin: 0;
  line-height: 1.6;
  color: var(--color-text-secondary);
}

.settings-plan-block__heading {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-1) 0;
}

/* Weight and size carry the emphasis. No colour at all — see the header
   note; gold as text fails AA on the card surface this renders on. */
.settings-plan-price {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
  margin: 0;
}

/* ── Update block (04 Aug 2026) ──────────────────────────────────── */

.settings-update-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: var(--space-4) 0;
}

.settings-update-status {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin: 0;
  min-height: 1.2em;
}

/* ── Dev panel ────────────────────────────────────────────────── */

.settings-dev-panel {
  margin-top: var(--space-4);
  padding: var(--space-4);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.settings-dev-panel__heading {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-primary);
  margin: 0 0 var(--space-2);
}

.settings-dev-panel__tier {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-3);
}

.settings-dev-panel__buttons {
  display: flex;
  gap: var(--space-2);
}

/* ── Dialog ───────────────────────────────────────────────────── */

.settings-dialog {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: flex-end;
}

.settings-dialog__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
}

.settings-dialog__content {
  position: relative;
  width: 100%;
  background: var(--color-bg-card);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  padding: var(--space-6) var(--space-5) var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.settings-dialog__title {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--color-text);
  margin: 0;
}

.settings-dialog__message {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  margin: 0;
}

.settings-dialog__actions {
  display: flex;
  gap: var(--space-3);
  justify-content: flex-end;
}

/* B4 MESSAGES. The list, and the dot on the Settings tab. The dot is a
   shape beside the icon; the tab's accessible name also changes to
   "Settings, new message", so it never rests on colour alone. */
.settings-messages { list-style: none; margin: 0 0 var(--space-5); padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.settings-message { padding: var(--space-4); background: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.settings-message__title { font-size: var(--text-base); font-weight: var(--font-bold); color: var(--color-text); margin: 0 0 var(--space-1); }
.settings-message__date { font-size: var(--text-xs); color: var(--color-text-secondary); margin: 0 0 var(--space-2); }
.settings-message__body { font-size: var(--text-sm); color: var(--color-text); line-height: var(--leading-relaxed); margin: 0 0 var(--space-2); white-space: pre-line; }
.settings-message__link { color: var(--color-primary); text-decoration: underline; }
.settings-message__research { margin: var(--space-3) 0; }
.settings-research__q { border: 0; padding: 0; margin: 0 0 var(--space-3); }
.settings-research__opt { display: flex; align-items: center; gap: var(--space-2); min-height: 44px; font-size: var(--text-sm); color: var(--color-text); }
.settings-research__figures { margin: 0 0 var(--space-3); }
.settings-research__figures div { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-1) 0; border-bottom: 1px solid var(--color-border); font-size: var(--text-sm); }
.settings-research__figures dt { color: var(--color-text-secondary); }
.settings-research__figures dd { margin: 0; color: var(--color-text); font-weight: var(--font-bold); text-align: right; }
.settings-message__none { color: var(--color-text-secondary); margin: 0 0 var(--space-5); }
.nav-dot {
  position: absolute; top: 6px; right: 18px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--color-primary);
  border: 2px solid var(--color-bg-card);
}

/* B2 RESTORE-LOCK. A form's error, said in words (role="alert") and marked
   by a rule, so it never rests on colour alone. Empty, it takes no room. */
.settings-dialog__error {
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  color: var(--color-text);
  margin: 0;
  padding-left: var(--space-3);
  border-left: 3px solid var(--color-danger);
}
.settings-dialog__error:empty { display: none; }

/* ── Toast ────────────────────────────────────────────────────── */

.settings-toast {
  position: fixed;
  bottom: calc(var(--space-6) + 60px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text);
  white-space: nowrap;
  z-index: 9000;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

/* ── Empty state ──────────────────────────────────────────────── */

.settings-empty {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
}

/* ── Conditions list ──────────────────────────────────────────── */

.settings-conditions-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.settings-conditions-item {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-elevated);
  border-radius: var(--radius-md);
}

/* ── Save button ──────────────────────────────────────────────── */

.settings-save-btn {
  align-self: flex-start;
}

.btn-danger {
  background: #DC2626;
  color: white;
  border: none;
}

/* ============================================================
   SETTINGS INDEX (NAV-5) — 12 Aug 2026

   Three rows replacing a seven-tab horizontal strip. Graeme, device pass:
   "Changing equipment and turning on session notes really hard to find.
   Like really really hard." Both were in the fourth of seven tabs, in a
   strip that scrolled with the scrollbar hidden.

   Nothing here scrolls, so nothing can hide. That is the whole point —
   the failure was content being off-screen, not Settings being hard to
   reach.

   Rows, not cards: this is an index, and an index that looks like a set
   of choices competes with the choices inside it.
   ============================================================ */

.settings-index {
  display: flex;
  flex-direction: column;
  margin-top: var(--space-4);
}

.settings-index__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-4) var(--space-4);
  min-height: 64px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  cursor: pointer;
}

.settings-index__row:first-child { border-top: 1px solid var(--color-border); }
.settings-index__row:hover       { background: var(--color-bg-hover); }

.settings-index__row:focus-visible {
  outline: 3px solid var(--color-border-focus);
  outline-offset: -3px;   /* inset, so a full-width row is not clipped */
}

.settings-index__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.settings-index__label {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  line-height: var(--leading-normal);
}

/* The description matters as much as the label: "App Controls" alone does
   not tell you session notes is in there, which is the exact problem
   being fixed. */
.settings-index__sub {
  font-size: var(--text-sm);
  font-weight: var(--font-normal);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}

.settings-index__chevron {
  flex-shrink: 0;
  color: var(--color-primary);
  font-size: var(--text-xl);
  line-height: 1;
}

.settings-section-header {
  display: flex;
  align-items: center;
  padding-top: var(--space-2);
}

@media (prefers-reduced-motion: reduce) {
  .settings-index__row { transition: none; }
}

/* ============================================================
   SETTINGS SUB-TABS (NAV-7) — 12 Aug 2026

   Graeme: "Inside the three doors in settings are just long scrollable
   pages. Can these be sectioned into slideable tabs to keep it clean?"

   Yes, and safely — which it would not have been before NAV-5. The old
   strip failed because SEVEN tabs could not fit and scrolled with the
   scrollbar hidden, so three of them were invisible. Three and four fit
   across a phone.

   NO overflow-x HERE, DELIBERATELY. If a label ever grows past the
   available width the row wraps to a second line rather than scrolling.
   A wrapped tab is ugly; a scrolled one is invisible, and invisible is
   what cost Graeme twenty minutes hunting for Equipment.

   Tabs share the width equally rather than sizing to their text, so the
   strip cannot creep wider than the screen as labels change.
   ============================================================ */

.settings-subtabs {
  display: flex;
  flex-wrap: wrap;                 /* wrap, never scroll */
  gap: var(--space-1);
  margin: var(--space-3) 0 var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.settings-subtab {
  flex: 1 1 0;                     /* equal share, shrink before overflowing */
  min-width: 0;
  min-height: 44px;                /* WCAG 2.2 AA 2.5.8 */
  padding: var(--space-2) var(--space-1);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.settings-subtab:hover { color: var(--color-text); }

/* Selected carries weight and a rule as well as colour — WCAG 1.4.1. */
.settings-subtab--active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  font-weight: var(--font-semibold);
}

.settings-subtab:focus-visible {
  outline: 3px solid var(--color-border-focus);
  outline-offset: -3px;
}

@media (prefers-reduced-motion: reduce) {
  .settings-subtab { transition: none; }
}

/* ── Weight tracking (WEIGHT-1b) ───────────────────────────────── */

/*
 * Display unit only. Changing how you read a number must not change the
 * number -- the stored value is always kilograms.
 */
.settings-unit-picker {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.settings-unit {
  flex: 1;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-text);
}

.settings-unit--on {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-primary);
}

.settings-unit:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/*
 * Stone and pounds is a COMPOSITE. Two fields with their units beside
 * them, because "12 st 4 lb" is how the weight is said -- not one
 * decimal box with "st" printed next to it.
 */
.settings-weight-stone {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.settings-input--short {
  width: auto;
  flex: 1;
  min-width: 0;
}

.settings-weight-stone__unit {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  flex-shrink: 0;
}


/* ============================================================
   SMOOTH-P4c — Settings on one page, 28 Sep 2026
   ============================================================ */
.settings-lede { margin: 0 0 var(--space-4); color: var(--color-text-secondary); }
/* W4-6. An outcome the person must see, not only hear. */
.settings-result {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-left-width: 4px;
  border-radius: 8px;
  background: var(--color-surface);
  color: var(--color-text);
}
.settings-result:focus { outline: 3px solid var(--color-text); outline-offset: 2px; }
.settings-sec { margin: 0; border-bottom: 1px solid var(--color-border); }
.settings-sec:first-of-type { border-top: 1px solid var(--color-border); }
.settings-sec__summary {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-height: 64px;
  padding: var(--space-3) var(--space-8) var(--space-3) var(--space-1);
  position: relative;
  list-style: none;
  cursor: pointer;
  color: var(--color-text);
}
.settings-sec__summary::-webkit-details-marker { display: none; }
.settings-sec__summary::after {
  content: "\203A";
  position: absolute;
  right: var(--space-2);
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
}
details.settings-sec[open] > .settings-sec__summary::after { transform: translateY(-50%) rotate(90deg); }
@media (prefers-reduced-motion: no-preference) {
  .settings-sec__summary::after { transition: transform 150ms ease; }
}
.settings-sec__summary:hover { background: var(--color-bg-hover); }
.settings-sec__summary:focus-visible { outline: 3px solid var(--color-border-focus); outline-offset: -3px; }
.settings-sec__title { margin: 0; font-size: var(--text-lg); font-weight: 600; color: var(--color-text); }
.settings-sec__sub { font-size: var(--text-sm); color: var(--color-text-secondary); line-height: 1.4; }
details.settings-sec > .settings-rows { margin: 0 0 var(--space-3); }
.settings-sec--direct > button.settings-sec__summary {
  flex-direction: column;
  align-items: flex-start;
  padding: var(--space-3) var(--space-8) var(--space-3) var(--space-1);
  min-height: 64px;
}
.settings-rows { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--color-border); }
.settings-rows > li { border-bottom: 1px solid var(--color-border); }
.settings-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 56px;
  padding: var(--space-2) var(--space-1);
  background: none;
  border: none;
  color: var(--color-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
button.settings-row:hover { background: var(--color-bg-hover); }
button.settings-row:focus-visible { outline: 3px solid var(--color-border-focus); outline-offset: -3px; }
.settings-row__text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.settings-row__label { color: var(--color-text); }
.settings-row__sub { font-size: var(--text-sm); color: var(--color-text-secondary); line-height: 1.4; }
.settings-row__value {
  flex: none;
  max-width: 45%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}
.settings-row__chevron { flex: none; color: var(--color-text-secondary); font-size: var(--text-lg); }
.settings-row--switch { cursor: default; }
.settings-row--switch .settings-row__text { cursor: pointer; }
.settings-screen { margin-top: var(--space-2); }

.settings-conds { margin: var(--space-3) 0; padding: 0; list-style: none; }
.settings-cond {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}
.settings-cond__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.settings-cond__name { font-weight: 600; color: var(--color-text); }
.settings-cond__meta { font-size: var(--text-sm); color: var(--color-text-secondary); }
.settings-cond__btn { flex: none; min-height: 44px; }


/* ── SMOOTH-P5. The one table ───────────────────────────────── */
.tier-table { width: 100%; margin: var(--space-4) 0; border-collapse: collapse; font-size: var(--text-sm); color: var(--color-text); }
.tier-table__caption { text-align: left; margin-bottom: var(--space-2); font-weight: 700; color: var(--color-text); }
.tier-table th, .tier-table td { padding: var(--space-2); vertical-align: top; text-align: left; border-bottom: 1px solid var(--color-border); line-height: 1.45; }
.tier-table thead th { color: var(--color-text-secondary); font-weight: 600; }
.tier-table tbody th { font-weight: 600; }
@media (max-width: 640px) {
  .tier-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tier-table tr { display: block; padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); }
  .tier-table th, .tier-table td { display: block; padding: 2px 0; border: none; }
  .tier-table tbody th { font-size: var(--text-base); margin-bottom: var(--space-1); }
  .tier-table td::before { content: attr(data-label) ": "; font-weight: 600; color: var(--color-text-secondary); }
}

/* PT-3, 01 Oct 2026. How your data is kept, said before the buttons. */
.settings-data-about {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  line-height: 1.6;
  color: var(--color-text);
}
.settings-data-about p { margin: 0; }


/* ============================================================
   LOOK-1 / LOOK-3 — Settings index and section pages, 04 Oct 2026
   ============================================================ */
.settings-idx--teal,   .settings-secpage--teal   { --sec: var(--kind-teal); }
.settings-idx--amber,  .settings-secpage--amber  { --sec: var(--kind-amber); }
.settings-idx--violet, .settings-secpage--violet { --sec: var(--kind-violet); }
.settings-idx--blue,   .settings-secpage--blue   { --sec: var(--kind-blue); }
.settings-idx--rose,   .settings-secpage--rose   { --sec: var(--kind-rose); }
.settings-idx--green,  .settings-secpage--green  { --sec: var(--kind-green); }
.settings-idx--slate,  .settings-secpage--slate  { --sec: var(--kind-slate); }

.settings-index { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.settings-index__item { margin: 0; }
.settings-index__h { margin: 0; font: inherit; }
.settings-idx {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 68px;
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg);
  border: 1px solid var(--color-border-light);
  border-radius: 16px;
  color: var(--color-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.settings-idx:hover { background: var(--color-bg-hover); }
.settings-idx:focus-visible { outline: 3px solid var(--color-border-focus); outline-offset: 2px; }
.settings-idx__text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.settings-tile {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sec, var(--color-primary));
  background: var(--color-bg-card);
  background: color-mix(in srgb, var(--sec, var(--color-primary)) 16%, var(--color-bg));
}
.settings-tile--lg { width: 48px; height: 48px; border-radius: 14px; }

.settings-back { min-height: 44px; }
.settings-secpage { display: flex; flex-direction: column; }
.settings-secpage__head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0 var(--space-3); }
.settings-secpage__head .settings-title { padding: 0; }
.settings-group { margin: var(--space-3) 0 0; }
.settings-group__title {
  margin: 0 0 var(--space-2) var(--space-1);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sec, var(--color-text-secondary));
}
.settings-secpage .settings-rows {
  border: 1px solid var(--color-border-light);
  border-radius: 16px;
  background: var(--color-bg);
  overflow: hidden;
}
.settings-secpage .settings-rows > li { border-bottom: 1px solid var(--color-border-light); }
.settings-secpage .settings-rows > li:last-child { border-bottom: 0; }
.settings-secpage .settings-row { padding: var(--space-2) var(--space-4); }

/* GS-EDIT — What you told me at the start, 18 Oct 2026 */
.settings-background__group {
  border: 0;
  margin: 0 0 var(--space-5);
  padding: 0;
}
.settings-background__group > .settings-label { margin-bottom: var(--space-1); }
.settings-checks {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.settings-check {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md, 12px);
  color: var(--color-text);
  cursor: pointer;
}
.settings-check input { width: 22px; height: 22px; flex: none; accent-color: var(--color-primary); }
.settings-check:focus-within { outline: 3px solid var(--color-border-focus); outline-offset: 2px; }