/* ============================================================================
 * Brute Info — css/pages/settings.css
 * The settings surface: a sticky section rail beside a nine-section panel.
 *
 * Everything here composes the shared primitives in css/components.css around
 * the tokens in css/tokens.css. No shared class is redefined; the only rules
 * that touch one (.setting-row) add a separator for an adjacency this page
 * invents — a .set-block sitting next to a .setting-row.
 * ========================================================================== */

/* --------------------------------------------------------------------------
   0 · PALETTE SPECIMEN
   The accent swatches are the five accent palettes themselves (css/tokens.css
   §8 "ACCENT PALETTES"), shown side by side. The live --a-* ramp only ever
   holds the palette currently in use, so a five-up specimen cannot be drawn
   from it. These five values mirror --a-500 of each palette exactly and exist
   for no other purpose on this page.
   -------------------------------------------------------------------------- */
.set-swatch[data-swatch="indigo"]  { --set-specimen: #6366f1; }
.set-swatch[data-swatch="violet"]  { --set-specimen: var(--violet-500); }
.set-swatch[data-swatch="emerald"] { --set-specimen: #0f9f74; }
.set-swatch[data-swatch="amber"]   { --set-specimen: var(--amber-600); }
.set-swatch[data-swatch="rose"]    { --set-specimen: #f43f5e; }

/* --------------------------------------------------------------------------
   1 · TOOLBAR — the settings search
   -------------------------------------------------------------------------- */
.set-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--border);
}
.set-search-field { flex: 1 1 26rem; max-width: 34rem; }
.set-search-field .field-hint { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1); }
.set-search-count {
  flex: 0 1 auto;
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  padding-bottom: var(--space-2);
}
.set-search-count:empty { display: none; }

.set-no-results {
  padding: var(--space-10) var(--space-6);
  text-align: center;
  color: var(--text-muted);
  font-size: var(--fs-base);
  background: var(--surface-inset);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
}

/* Search hit marking — a tinted rule down the left of a matching block. */
.set-panel-hit {
  box-shadow: inset 3px 0 0 var(--primary);
  padding-left: var(--space-4);
  border-radius: var(--radius-xs);
  transition: box-shadow var(--dur-base) var(--ease-standard);
}

/* --------------------------------------------------------------------------
   2 · PANEL PLUMBING — blocks that are wider than a single .setting-row
   -------------------------------------------------------------------------- */
/* The veil laid over a block whose parent switch is off. It has to be light:
   at 0.55 it multiplied with the browser's own dimming of a disabled control
   and took the caption-size select to 1.7:1. The rules further down keep the
   values inside such a block at full strength, so the "off" reading comes from
   the veil, the inset background and the not-allowed cursor rather than from
   text nobody can make out. */
#set-panel { --set-off-dim: 0.85; }

.set-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--card-pad-tight) 0;
}
.set-block + .set-block,
.set-block + .setting-row,
.setting-row + .set-block { border-top: 1px solid var(--border-subtle); }

/* The first item still visible after a search filter never carries a rule. */
.split-main [data-first-visible] { border-top: 0; }

.set-block-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}
@media (max-width: 640px) {
  .set-block-row { flex-direction: column; align-items: stretch; gap: var(--space-3); }
}

.set-unit { font-size: var(--fs-md); color: var(--text-muted); }
.set-time { width: 100%; max-width: 11rem; }

.set-rail-danger { color: var(--danger); }
.set-rail-danger:hover { color: var(--danger-hover); }
/* The active state in css/components.css repaints every rail item in the
   primary tint. The danger item keeps its own colour instead, so the one red
   entry in the rail never turns violet halfway down the page. */
.section-nav-link.set-rail-danger.is-active,
.section-nav-link.set-rail-danger[aria-current="true"] {
  background: var(--danger-soft);
  border-left-color: var(--danger);
  color: var(--danger);
}

/* Under 900px .split-rail becomes a horizontal scroller. Its <ul> is a column
   by default, so this instance lays its own list out in a row and drops the
   heading, which has no room on a phone (the <nav> keeps its aria-label). */
@media (max-width: 900px) {
  #set-rail { align-items: center; }
  #set-rail .section-nav { flex-direction: row; flex-wrap: nowrap; }
  #set-rail .section-nav > li { flex: 0 0 auto; }
  #set-rail .section-nav-title { display: none; }
  #set-rail .section-nav-link.set-rail-danger.is-active,
  #set-rail .section-nav-link.set-rail-danger[aria-current="true"] {
    background: transparent;
    border-bottom-color: var(--danger);
  }
}

/* When a search matches nothing the rail has nothing to point at: js hides it
   and the panel takes the whole width, so no empty column or orphan rule is
   left behind where the sections used to be. */
.set-split[data-no-match="true"] { grid-template-columns: minmax(0, 1fr); }

/* --------------------------------------------------------------------------
   3 · THE "SAVED" MICRO-CONFIRMATION
   One floating pill, positioned beside whichever control was just changed.
   -------------------------------------------------------------------------- */
.set-saved {
  position: fixed;
  z-index: var(--z-toast);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--success-border);
  border-radius: var(--radius-full);
  background: var(--success-soft);
  color: var(--success-soft-text);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateY(var(--space-1));
  transition: opacity var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-out);
}
.set-saved svg { width: 0.75rem; height: 0.75rem; }
.set-saved.is-on { opacity: 1; transform: translateY(0); }

/* --------------------------------------------------------------------------
   4 · APPEARANCE — theme preview cards
   -------------------------------------------------------------------------- */
.set-theme-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}
@media (max-width: 560px) {
  .set-theme-cards { grid-template-columns: minmax(0, 1fr); }
}

.set-theme {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard),
              background-color var(--dur-fast) var(--ease-standard);
}
.set-theme:hover { border-color: var(--border-strong); background: var(--surface-2); }
.set-theme input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
  pointer-events: none;
}
.set-theme:has(input:checked) {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary), var(--shadow-sm);
  background: var(--primary-soft);
}
.set-theme:has(input:focus-visible) { box-shadow: var(--ring); }

.set-theme-preview {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-inset);
}

/* The miniature product window. Both schemes are drawn with the raw neutral
   ramp so each card shows its own palette whatever the live theme is. */
.stp {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--stp-bg);
}
.stp[data-scheme="light"] {
  --stp-bg: var(--slate-0);
  --stp-bar: var(--slate-100);
  --stp-side: var(--slate-50);
  --stp-line: var(--slate-200);
  --stp-line-strong: var(--slate-300);
  --stp-edge: var(--slate-150);
}
.stp[data-scheme="dark"] {
  --stp-bg: var(--slate-900);
  --stp-bar: var(--slate-850);
  --stp-side: var(--slate-850);
  --stp-line: var(--slate-750);
  --stp-line-strong: var(--slate-600);
  --stp-edge: var(--slate-800);
}
/* The "System" card shows light behind and dark clipped over the diagonal. */
.stp-clip { clip-path: polygon(100% 0, 100% 100%, 0 100%); }

.stp-bar {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 22%;
  padding: 0 8%;
  background: var(--stp-bar);
  border-bottom: 1px solid var(--stp-edge);
}
.stp-bar i { width: 4px; height: 4px; border-radius: var(--radius-full); background: var(--stp-line-strong); }
.stp-bar i:first-child { width: 12px; background: var(--primary); }

.stp-body { display: flex; flex: 1 1 auto; min-height: 0; }
.stp-side {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 30%;
  padding: 0 8%;
  background: var(--stp-side);
  border-right: 1px solid var(--stp-edge);
}
.stp-side i { height: 4px; border-radius: var(--radius-xs); background: var(--stp-line); }
.stp-side i:first-child { background: var(--primary); }

.stp-main {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 0 10%;
  min-width: 0;
}
.stp-line { height: 4px; border-radius: var(--radius-xs); background: var(--stp-line); }
.stp-line-lg { height: 6px; width: 72%; background: var(--stp-line-strong); }
.stp-line-sm { width: 48%; }
.stp-btn {
  margin-top: 3px;
  height: 8px;
  width: 40%;
  border-radius: var(--radius-xs);
  background: var(--primary);
}

.set-theme-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-1) var(--space-2);
}
.set-theme-name {
  grid-column: 1;
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--text);
}
.set-theme-hint {
  grid-column: 1;
  grid-row: 2;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.set-theme-tick {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: var(--radius-full);
  background: var(--primary);
  color: var(--primary-contrast);
  opacity: 0;
  transform: scale(0.7);
  transition: opacity var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-spring);
}
.set-theme-tick svg { width: 0.75rem; height: 0.75rem; }
.set-theme:has(input:checked) .set-theme-tick { opacity: 1; transform: scale(1); }

/* --------------------------------------------------------------------------
   5 · APPEARANCE — accent swatches, text size
   -------------------------------------------------------------------------- */
.set-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.set-swatch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-h-sm);
  padding: var(--space-1) var(--space-3) var(--space-1) var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--surface);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-standard),
              background-color var(--dur-fast) var(--ease-standard);
}
.set-swatch:hover { border-color: var(--border-strong); background: var(--surface-2); }
.set-swatch input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
  pointer-events: none;
}
.set-swatch-dot {
  width: 1.125rem;
  height: 1.125rem;
  flex: 0 0 auto;
  border-radius: var(--radius-full);
  background: var(--set-specimen);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 18%, transparent);
}
.set-swatch-name { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-muted); }
.set-swatch:has(input:checked) {
  border-color: var(--set-specimen);
  box-shadow: 0 0 0 1px var(--set-specimen);
  background: var(--surface-2);
}
.set-swatch:has(input:checked) .set-swatch-name { color: var(--text); font-weight: var(--fw-semibold); }
.set-swatch:has(input:checked) .set-swatch-dot {
  box-shadow: inset 0 0 0 2px var(--surface), inset 0 0 0 3px var(--set-specimen);
}
.set-swatch:has(input:focus-visible) { box-shadow: var(--ring); }

.set-fontsize {
  display: grid;
  grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: center;
}
@media (max-width: 720px) {
  .set-fontsize { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
}
.set-sample {
  padding: var(--card-pad-tight);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-inset);
  color: var(--text-muted);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
}
.set-sample .text-mono { color: var(--text); }

/* --------------------------------------------------------------------------
   6 · PLAYBACK
   -------------------------------------------------------------------------- */
.set-speed { display: flex; flex-direction: column; gap: var(--space-3); }
.set-speed-note {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.set-speed-note strong { color: var(--text); font-weight: var(--fw-semibold); }

.set-caption-tools {
  display: grid;
  grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: center;
}
@media (max-width: 720px) {
  .set-caption-tools { grid-template-columns: minmax(0, 1fr); }
}
.set-caption-tools[data-off="true"] { opacity: var(--set-off-dim); }

.set-caption-preview {
  --set-caption-fs: var(--fs-md);
  display: block;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  /* Burned-in captions read the same way in both themes, so this strip keeps
     the raw neutral ramp rather than the theme surface. The edge is drawn in a
     mid-ramp grey: it separates the strip from a dark card, and disappears
     into the strip itself on a light one. */
  background: var(--slate-950);
  border: 1px solid var(--slate-700);
  color: var(--slate-50);
  font-size: var(--set-caption-fs);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  text-align: center;
  text-wrap: balance;
}
.set-caption-preview[data-size="s"] { --set-caption-fs: var(--fs-sm); }
.set-caption-preview[data-size="m"] { --set-caption-fs: var(--fs-base); }
.set-caption-preview[data-size="l"] { --set-caption-fs: var(--fs-xl); }

/* --------------------------------------------------------------------------
   7 · LEARNING — day picker
   -------------------------------------------------------------------------- */
.set-days { gap: var(--space-2); }
.set-days .chip { min-width: 3.5rem; justify-content: center; }
.set-days-summary { font-size: var(--fs-sm); color: var(--text-muted); }
.set-days-summary:empty { display: none; }

/* --------------------------------------------------------------------------
   8 · NOTIFICATIONS — the channel matrix
   -------------------------------------------------------------------------- */
.set-matrix-name {
  display: block;
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--text);
}
.set-matrix-meta {
  display: block;
  margin-top: 0.1rem;
  font-size: var(--fs-xs);
  font-weight: var(--fw-regular);
  color: var(--text-muted);
}
.set-matrix-col { text-align: center; white-space: nowrap; }
.set-matrix-cell { text-align: center; }
.set-matrix-cell .switch { display: inline-flex; }
.set-col-off {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--text-muted);
}
.set-col-off svg { width: 0.85rem; height: 0.85rem; }
.set-matrix-note {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* All four columns have to fit inside the card, because a column the reader
   cannot see is a column they cannot switch off. At 360px the default row
   padding pushed "Push" past the edge and into a horizontal scroll; trimming
   the gutters brings the whole matrix back on screen. */
@media (max-width: 560px) {
  .set-matrix { font-size: var(--fs-sm); }
  .set-matrix th,
  .set-matrix td { padding-inline: var(--space-2); }
  .set-matrix caption { padding-inline: var(--space-3); }
  .set-matrix thead th { letter-spacing: var(--tracking-wide); }
  .set-matrix-meta { display: none; }
}

.set-quiet {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding: var(--card-pad-tight);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-inset);
}
.set-quiet[data-off="true"] { opacity: var(--set-off-dim); }
.set-quiet-summary {
  flex: 1 1 14rem;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  padding-bottom: var(--space-2);
}

/* --------------------------------------------------------------------------
   9 · ACCESSIBILITY — shortcut reference
   -------------------------------------------------------------------------- */
.set-shortcuts .kbd + .kbd { margin-left: var(--space-1); }

/* Reader preference: underline every link in body copy.
   js/pages/settings.js writes data-set-links="underline" on <html>. */
:root[data-set-links="underline"] .prose a,
:root[data-set-links="underline"] p a,
:root[data-set-links="underline"] li a,
:root[data-set-links="underline"] dd a { text-decoration: underline; }

/* --------------------------------------------------------------------------
   10 · ACCOUNT
   -------------------------------------------------------------------------- */
.set-name-form { width: 100%; }
.set-name-row { display: flex; gap: var(--space-2); }
.set-name-row .input { flex: 1 1 auto; min-width: 0; }
@media (max-width: 520px) {
  .set-name-row { flex-direction: column; }
}

.set-connections,
.set-sessions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.set-conn {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--card-pad-tight);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-inset);
}
.set-conn-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text-muted);
}
.set-conn-mark svg { width: 1.15rem; height: 1.15rem; }
.set-conn-body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; flex: 1 1 auto; }
.set-conn-name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--text);
}
.set-conn-meta {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  overflow-wrap: anywhere;
}
.set-conn-action { flex: 0 0 auto; }
@media (max-width: 560px) {
  .set-conn { flex-wrap: wrap; }
  .set-conn-action { width: 100%; }
  .set-conn-action .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   11 · DANGER ZONE
   -------------------------------------------------------------------------- */
.set-danger { border-color: var(--danger-border); }
.set-danger .split-section-title { color: var(--danger); }

/* The confirm-by-typing field inside the delete-account dialog. */
.set-confirm-field { margin-top: var(--space-4); }
.set-confirm-field .input { font-family: var(--font-mono); letter-spacing: var(--tracking-wide); }
.set-confirm-list { display: grid; gap: var(--space-2); margin-top: var(--space-3); padding-left: var(--space-6); }
.set-confirm-list li { font-size: var(--fs-md); color: var(--text-muted); }

/* --------------------------------------------------------------------------
   12 · PRINT
   -------------------------------------------------------------------------- */
@media print {
  .set-toolbar,
  .split-rail,
  .set-saved { display: none; }
  .split, .split-wide { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   CONTRAST BRIDGE — shared components that still carry --text-subtle

   --text-subtle resolves to #7c8598 in the light theme: 3.71:1 on --surface
   and 3.27:1 on --surface-2, both under the 4.5:1 AA bar for body text (it
   also lands at 4.43:1 on --surface-2 in dark). Every rule THIS file owns
   already uses --text-muted; what remains are shared components from
   css/components.css, which this page may not edit. These overrides are
   scoped to #main so they can never reach the site header or footer that
   css/layout.css owns. Delete this block once --text-subtle is retuned to
   clear AA in css/tokens.css — nothing here changes the design intent, only
   the tier of grey that carries it.
   ========================================================================== */
#main .field-hint,
#main .field-optional,
#main .checkbox-hint,
#main .radio-hint,
#main .switch-hint,
#main .stat-hint,
#main .accordion-meta,
#main .range-scale,
#main .range-scale > *,
.modal .field-hint,
.modal .field-optional,
.modal .checkbox-hint {
  color: var(--text-muted);
}

/* Read-only and disabled controls.
   Three of the fields on this page are read-only or switched off, and every
   one of them carries a real value a reader still has to be able to read: the
   email they sign in with, the currency they are billed in, the quality and
   caption settings a backend would drive. --text-subtle put them at 3.3:1 in
   light and 4.4:1 in dark, and the browser's own dimming of a disabled control
   took the worst of them to 1.7:1. The muted tier plus an explicit opacity
   clears AA in both themes; the muted background and the not-allowed cursor
   are what say "you cannot edit this", not the greyness of the value. */
#main .input:disabled,
#main .input[readonly],
#main .select:disabled {
  color: var(--text-muted);
  -webkit-text-fill-color: var(--text-muted);
  opacity: 1;
}

/* Inside a switched-off block the veil above is already taking a slice of the
   contrast, so the value itself is written at full strength. What it is set to
   stays legible; that it cannot be changed is said by the veil, the inset
   background and the cursor. */
#main .set-caption-tools[data-off="true"] .select:disabled,
#main .set-quiet[data-off="true"] .input:disabled {
  color: var(--text);
  -webkit-text-fill-color: var(--text);
}
.set-quiet[data-off="true"] .set-quiet-summary { color: var(--text); }

/* A placeholder still has to read as a prompt rather than a value: --text-muted
   sits well clear of --text, so the two never look alike. */
#main .input::placeholder,
#main .textarea::placeholder,
#main textarea::placeholder,
#main input::placeholder {
  color: var(--text-muted);
  opacity: 1;
}

#main .setting-hint,
#main .section-nav-title {
  color: var(--text-muted);
}