/* Deep Field view styles: settings. Companion to deep-field.css (tokens/components live there).
   Owned by the settings view; keep everything token-driven, flat, AA in both themes.
   Ported from the approved reskin/settings.html page-local styles. */

/* ===== Page-local tokens: soft Burgundy / soft Amber tint grounds =====
   Core ships only --soft-green. These follow the same pattern: DARK brand raw
   at ~8-10% in light, BRIGHT twin raw at ~14-16% in dark. Flat, no gradient. */
:root {
  --soft-burgundy: rgba(125,0,55,0.08);
  --soft-amber:    rgba(163,94,0,0.10);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --soft-burgundy: rgba(255,188,198,0.14);
    --soft-amber:    rgba(255,214,92,0.16);
  }
}
:root[data-theme="dark"] {
  --soft-burgundy: rgba(255,188,198,0.14);
  --soft-amber:    rgba(255,214,92,0.16);
}

/* ===== Tab row (decided pattern, governance 2026-07-07): borderless row,
   Ink text, active tab Bold with a 3px Lime underline. Below 720px the row
   WRAPS to as many lines as needed — every tab stays visible, no horizontal
   scroll, no scrim. Overrides the core pill-style .settings-tabs. ===== */
.settings-tabs {
  display: flex; gap: 0; padding: 0;
  background: transparent; border: 0; border-radius: 0;
  border-bottom: 1px solid var(--border);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin-bottom: 24px;
}
.settings-tabs::-webkit-scrollbar { display: none; }
.settings-tab {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  padding: 12px 2px; margin: 0 16px -1px 0;
  font-family: inherit; font-size: 14px; font-weight: 600;
  color: var(--ink-62); white-space: nowrap;
  border-radius: 0;
  border-bottom: 3px solid transparent;
}
.settings-tab:last-child { margin-right: 0; }
.settings-tab:hover { color: var(--text); background: transparent; }
.settings-tab.active {
  background: transparent; color: var(--text);
  font-weight: 800; border-bottom-color: var(--lime);
}
.settings-tab:focus-visible { outline: 2px solid var(--num-teal); outline-offset: 2px; border-radius: 4px; }
/* WRAP below 720px: all tabs visible on as many lines as needed (verified at 390 and 320) */
@media (max-width: 720px) {
  .settings-tabs { flex-wrap: wrap; overflow-x: visible; row-gap: 0; }
  .settings-tab { margin-right: 20px; }
}

/* ===== Subnav layout (owner-directed 2026-07-10): one section renders at a
   time behind a pill subnav (same segmented language as the Guests/Events
   controls). The stacked-anchor divider rules are gone with the stacking. ===== */
.settings-subnav {
  display: inline-flex; flex-wrap: wrap; gap: 3px; padding: 3px;
  background: var(--inset); border: 1px solid var(--border); border-radius: 999px;
  margin-bottom: 20px;
}
.settings-subnav-btn {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  font-family: inherit; color: var(--ink-62); font-weight: 600; font-size: 13px;
  padding: 8px 15px; border-radius: 999px; white-space: nowrap;
}
.settings-subnav-btn:hover:not(.active) { color: var(--text); }
.settings-subnav-btn.active { background: var(--lime); color: var(--ink); font-weight: 700; }
.settings-subnav-btn:focus-visible { outline: 2px solid var(--num-teal); outline-offset: 2px; }

/* ===== Reminder mode cards (token-driven, flat; sel = Green + soft tint) ===== */
/* DEF-047: let the reminder cards fill the (now wider) section, side by side. */
.mode-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 16px 0 8px; }
.mode-card {
  display: flex; align-items: flex-start; gap: 13px;
  padding: 16px 18px; border: 1px solid var(--border); border-radius: 14px;
  background: var(--panel); cursor: pointer;
}
.mode-card.sel { border-color: var(--num-green); background: var(--soft-green); }
.mode-card input { margin-top: 3px; accent-color: var(--num-green); width: 17px; height: 17px; flex: none; }
.mode-card > span { flex: 1; }
.mode-title { font-weight: 800; font-size: 15px; color: var(--text); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mode-desc { display: block; color: var(--ink-62); font-size: 13px; font-weight: 500; margin-top: 4px; line-height: 1.5; max-width: 52ch; }
.pill-rec { font-size: 11px; font-weight: 800; letter-spacing: 0.03em; padding: 3px 9px; border-radius: 999px; background: var(--lime); color: var(--ink); }
@media (min-width: 760px) { .mode-grid { grid-template-columns: 1fr 1fr; } }

/* Manual slot panel */
.settings-manual-panel {
  background: var(--inset); border: 1px solid var(--border);
  border-radius: 12px; padding: 18px 20px; margin: 16px 0 20px;
}
.settings-panel-note { color: var(--ink-62); font-size: 13px; font-weight: 500; margin: 0 0 12px; }
.settings-slot-row {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 14px 0; border-bottom: 1px solid var(--border);
}
.settings-slot-row:last-child { border-bottom: 0; }
.settings-slot-label {
  display: inline-flex; align-items: center; gap: 10px;
  min-width: 160px; font-weight: 600; color: var(--text);
}

/* ===== Switch toggles (.ng-switch, formerly inline <style> in the view) ===== */
.ng-switch { position: relative; display: inline-block; width: 44px; height: 26px; flex: 0 0 auto; margin-top: 2px; }
.ng-switch input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.ng-switch__slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: var(--track-switch); border-radius: 999px; transition: background 160ms ease; }
.ng-switch__dot { position: absolute; pointer-events: none; top: 3px; left: 3px; width: 20px; height: 20px; background: var(--white); border-radius: 50%; transition: transform 160ms ease; }
.ng-switch input:checked ~ .ng-switch__slider { background: var(--lime); }
.ng-switch input:checked ~ .ng-switch__dot { transform: translateX(18px); }
.ng-switch input:disabled ~ .ng-switch__slider { opacity: 0.5; cursor: not-allowed; }
.ng-switch input:focus-visible ~ .ng-switch__slider { outline: 2px solid var(--num-teal); outline-offset: 2px; }

/* ===== Danger zone (Burgundy pair: --num-burgundy flips to Blush in dark;
   tint ground uses --soft-burgundy above) ===== */
.danger-card {
  border: 1px solid color-mix(in srgb, var(--num-burgundy) 30%, transparent);
  background: var(--soft-burgundy);
  border-radius: var(--radius);
  padding: 20px;
}
.danger-card + .danger-card { margin-top: 14px; }
.danger-title { color: var(--num-burgundy); font-weight: 800; font-size: 16px; margin: 0 0 6px; }
.danger-desc { color: var(--ink-62); font-size: 13.5px; font-weight: 500; margin: 0 0 15px; max-width: 62ch; line-height: 1.55; }
.qa-btn.danger {
  color: var(--num-burgundy);
  border-color: color-mix(in srgb, var(--num-burgundy) 45%, transparent);
  background: var(--panel);
}
.qa-btn.danger:hover { background: var(--soft-burgundy); }

/* ===== Public URL Handle: on-brand green panel (owner decision 2026-08-05) =
   Replaces the phantom var(--warning-bg) inline styles (token defined nowhere,
   so the cream fallback shipped in BOTH themes — white-on-white in dark).
   var(--green) is theme-CONSTANT, so the flipping text tokens (--text,
   --text-primary, --ink-62) are BANNED on this ground: they resolve near-black
   in light mode (~1.6:1). Use --paper (8.6:1 on green) and the established
   .hero-sub secondary rgba(250,250,250,0.82) (6.3:1). Errors use --blush
   (5.7:1) — --error resolves to burgundy, ~2.4:1 here. All AA. ===== */
.settings-green-panel {
  background: var(--green);
  border: 1px solid rgba(250,250,250,0.14);
  border-radius: 8px;
  padding: 16px;
}
.settings-green-panel-title { color: var(--paper); }
/* brand pop on the handle, matching .login-band (lime on green = 7.5:1) */
.settings-green-panel-title strong { color: var(--lime); }
.settings-green-panel-sub { color: rgba(250,250,250,0.82); }
.settings-green-panel .form-label { color: var(--paper); }
.settings-green-panel .form-help { color: rgba(250,250,250,0.82); }

/* ===== Single-pager rhythm (owner-directed 2026-07-11) =================== */
/* Clear air between the stacked sections (Profile | Reminders | Team |
   Billing | Privacy | Danger Zone) so each reads as its own region on the
   one-page scroll. Whitespace only — the flat Deep Field ground carries the
   separation; hairlines stay reserved for subsections inside a section. */
.settings-section-anchor + .settings-section-anchor {
  margin-top: var(--space-12);
}