/* @breathe/style — Canonical Settings page chrome
 *
 * What this file owns:
 *   - .settings-page             outer page container (full height,
 *                                bg, padding) — the breathe-board
 *                                pattern, now canonical
 *   - .settings-inner            centered max-width content stack
 *   - .settings-inner h2         settings page title (18px / weight 300 /
 *                                lowercase by HTML convention)
 *   - .settings-back-link        the "← {app}" link at the top of the page
 *   - .settings-section          card container (bg-surface, bordered,
 *                                12px radius, 16px padding, vertical
 *                                stack with 10px gap)
 *   - .settings-section h3       section heading (~13px / weight 400 /
 *                                lowercase / 0.04em tracking)
 *   - .settings-hint             help paragraph below the heading
 *   - .settings-meta             label / value dl for app meta (used
 *                                by the "application" section)
 *   - .settings-meta dt / dd     the rows inside
 *
 * What this file deliberately does NOT own:
 *   - The route / navigation pattern (React Router, hash, custom show/hide
 *     for vanilla) — each app owns how Settings is reached.
 *   - App-specific section content like form layouts, tag chip grids,
 *     theme pickers — those stay local because they're not shared.
 *
 * Known follow-up: breathe-books still uses a modal-overlay pattern
 * (.settings-overlay + .settings-modal with blurred dark backdrop). The
 * page pattern here is the documented family standard (per
 * packages/style/README.md §10). Aligning books to this pattern would be
 * a user-visible UX change and deserves its own decision; tracked as
 * tech debt.
 *
 * Token policy: only canonical tokens from tokens.css. Apps that have
 * their own aliases (breathe-board's --text, --surface; breathe-lines'
 * --text-secondary that differs from canonical) keep working because
 * their style.css loads AFTER this and redefines as needed — but new
 * settings styles should always reach for canonical names first.
 */

.settings-page {
  min-height: 100vh;
  background: var(--bg);
  padding: 40px 24px;
}

.settings-inner {
  max-width: 420px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.settings-inner h2 {
  font-size: 18px;
  font-weight: 300;
  color: var(--text-primary);
  margin: 0;
}

.settings-back-link {
  font-size: 13px;
  color: var(--text-muted);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
  text-align: left;
  transition: color 0.15s;
}

.settings-back-link:hover {
  color: var(--text-primary);
}

.settings-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
}

.settings-section h3 {
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--text-primary);
  letter-spacing: 0.04em;
  margin: 0;
}

.settings-hint {
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}

/* dl used by the "application" section: label / value grid. The 5rem
 * label column lines up across rows (app, version, built) without
 * forcing labels to wrap. dd uses tabular-nums so digits in the build
 * timestamp don't shift width when the minutes tick over. */
.settings-meta {
  display: grid;
  grid-template-columns: 5rem 1fr;
  row-gap: 0.35rem;
  column-gap: 0.75rem;
  margin: 0;
}

.settings-meta dt {
  font-size: 0.75rem;
  color: var(--text-muted);
  padding-top: 1px;
  margin: 0;
}

.settings-meta dd {
  font-size: 0.85rem;
  color: var(--text-primary);
  margin: 0;
  font-variant-numeric: tabular-nums;
}

/* ── Generic inline / stacked option pickers ─────────────────────────────
 * Used by canonical UX blocks (theme, future tone, future format) where
 * the section is "pick one of N." Promoted from breathe-books-local in
 * Phase 3.5 as the family standard.
 *
 *   .settings-options          — vertical stack of options (gap 6px)
 *   .settings-options-inline   — horizontal row, options stretch equal width
 *   .settings-option           — the pill itself: bordered, padded,
 *                                hover and .active states match
 *
 * Markup:
 *   <div class="settings-options settings-options-inline">
 *     <label class="settings-option active">light</label>
 *     <label class="settings-option">dark</label>
 *     <label class="settings-option">system</label>
 *   </div>
 *
 * Click handling and the .active class toggle live in the consuming
 * component (see <ThemeSection> in @breathe/style/react, or
 * mountThemeSection in @breathe/style/vanilla).
 */

.settings-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.settings-options-inline {
  flex-direction: row;
  flex-wrap: wrap;
}

.settings-options-inline .settings-option {
  flex: 1;
  justify-content: center;
  min-width: 70px;
}

.settings-option {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  color: var(--text-muted);
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  transition: border-color 0.15s, color 0.15s;
}

.settings-option:hover {
  border-color: var(--accent);
  color: var(--text-primary);
}

.settings-option.active {
  border-color: var(--accent);
  color: var(--text-primary);
}