/* ============================================================================
 * Red Stet v2 — settings surfaces (P8-settings, 2026-08-06).
 *
 * Companion stylesheet to public/style.css. It carries ONLY what the
 * settings work newly needs; the drawer chrome, the `.settings-row`
 * grid, the toggle switch, the role cards and the theme picker all
 * already live in style.css and are reused verbatim.
 *
 * Load order: after style.css (see the <link> in app/index.html).
 * Every override below still raises its own specificity so it wins
 * regardless of link order — a stylesheet that only works when it is
 * loaded second is a trap for the next person.
 * ========================================================================== */

/* ── Reader accessibility ────────────────────────────────────────────
 * THE POINT OF THIS BLOCK. prefs.readerFontScale / readerLineHeight
 * have existed in the store since the port and NOTHING read them —
 * style.css hard-codes `font-size: calc(18.5px * 1)` and
 * `line-height: 1.55` on .prose, with a comment saying the sliders
 * drive it. They didn't; there were no sliders, and no variables.
 *
 * settings/customize.applyPrefs() writes the two custom properties on
 * :root; these rules consume them. The fallbacks are the exact numbers
 * style.css hard-codes, so an untuned install renders identically. */
body .prose {
  font-size: calc(18.5px * var(--reader-font-scale, 1));
  line-height: var(--reader-line-height, 1.55);
}
/* Mark mode opens the prose up; the +0.45 stays relative to the user's
   chosen line height rather than the shipped default. */
html body[data-mode="mark"] .prose {
  line-height: calc(var(--reader-line-height, 1.55) + 0.45);
}

/* ── Drawer chrome tweaks ────────────────────────────────────────────
   Three tabs in a 460px drawer; let them wrap rather than clip. */
#settings-panel .settings-tabs {
  flex-wrap: wrap;
  row-gap: 2px;
}
#settings-panel .settings-tab {
  white-space: nowrap;
}

/* Small trailing note under a group of controls. */
.rs-settings-foot {
  margin-top: 10px;
  font-size: 11.5px;
  color: var(--ink-muted);
  line-height: 1.5;
}

/* The access door's entry point — the quiet line under the role cards
   ("Are you a student or teacher needing access?") and the ← Back
   control inside the door. A real <button>, styled as a link: the
   action is not navigation, and a fake anchor breaks keyboard and
   screen-reader expectations both. */
.rs-access-link {
  display: inline-block;
  margin-top: 12px;
  padding: 4px 0;
  background: none;
  border: none;
  font: inherit;
  font-size: 12.5px;
  color: var(--red);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  cursor: pointer;
}
.rs-access-link:hover { color: var(--red-deep); }

/* ── Role cards ──────────────────────────────────────────────────────
   .role-select-card / .settings-role-preset come from style.css; only
   the chosen state is new (style.css defines .is-active for the
   drawer variant but not for the modal one). */
.role-select-card.is-active {
  border-color: var(--red);
  background: var(--red-wash, rgba(184, 56, 41, 0.06));
}
.rs-role-card:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

/* ── Palette presets ─────────────────────────────────────────────── */
.rs-preset-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.rs-preset.is-active {
  border-color: var(--red);
  color: var(--red);
}

/* A custom mark has no visibility switch — it is shown until deleted.
   The control keeps its grid column so the rows stay aligned, and says
   why it is inert on hover rather than being a dead-looking stub. */
.settings-vis:disabled {
  opacity: 0.3;
  cursor: default;
}

/* ── Privacy & data ─────────────────────────────────────────────────
   Destructive actions are ghost buttons in the product's red, never
   the primary style: the primary button in this drawer says "Add to
   palette" and "Request export", and deleting an account should not
   look like the same class of act. */
.rs-danger-ghost {
  color: var(--red);
  border-color: var(--red);
}
.rs-danger-ghost:hover {
  background: var(--red-wash, rgba(184, 56, 41, 0.06));
}

.rs-inline-status {
  margin: 0 0 0 10px;
  display: inline-block;
}

.rs-export-result {
  margin-top: 8px;
}

.rs-wipe-pending {
  border: 1px solid var(--red);
  border-radius: 8px;
  padding: 12px;
  background: var(--red-wash, rgba(184, 56, 41, 0.06));
}
.rs-wipe-pending .settings-hint:last-of-type {
  margin-bottom: 0;
}
.rs-wipe-countdown {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--red);
}

/* The profile-modal entry row that used to live here is gone with the
   modal it was injected into (2026-08-11): the toolbar chip opens this
   drawer directly, on its Identity section. */