/* ============================================================
 * PARENT-APP REDESIGN — Claude Design handoff
 * M-parent-app-claude-design-redesign, 2026-05-17
 *
 * Discrete stylesheet that coexists with the legacy style.css.
 * Pages using the redesign opt in by wrapping their root in
 * `.p-surface` and using `.p-*` classes; legacy pages keep their
 * existing classes untouched.
 *
 * Typography: Newsreader (display serif), IBM Plex Sans (UI),
 * JetBrains Mono (labels). Self-hosted variable woff2 under
 * /static/fonts/ — same pattern as kid-app's Fraunces/Inter setup.
 *
 * Palette: warm cream paper, deep ink, muted teal accent, amber
 * for attention/flag states. Intentionally distinct from the
 * kid-app's navy + terra so the two surfaces read as different
 * audiences (parent = editorial / utilitarian, kid = warm /
 * calligraphic).
 * ============================================================ */

@font-face {
  font-family: Newsreader;
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/static/fonts/newsreader-latin-wght-normal.woff2') format('woff2-variations');
}
@font-face {
  font-family: Newsreader;
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url('/static/fonts/newsreader-latin-wght-italic.woff2') format('woff2-variations');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url('/static/fonts/ibm-plex-sans-latin-wght-normal.woff2') format('woff2-variations');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('/static/fonts/jetbrains-mono-latin-wght-normal.woff2') format('woff2-variations');
}

:root {
  --p-paper:        #F4EFE6;
  --p-paper-soft:   #EDE6D8;
  --p-paper-edge:   #E3DACA;
  --p-card:         #FAF6EE;
  --p-card-edge:    #E3DACA;

  --p-ink:          #1A1F26;
  --p-ink-soft:     #3C4450;
  --p-ink-mute:     #6B7280;
  --p-ink-faint:    #9CA1A9;

  --p-accent:       #2E6B6E;
  --p-accent-soft:  #D5E2E1;
  --p-accent-deep:  #1F4C4F;

  --p-attn:         #B5651D;
  --p-attn-soft:    #F2E2C9;

  --p-rule:         rgba(26,31,38,0.10);
  --p-rule-soft:    rgba(26,31,38,0.06);

  --p-serif:        "Newsreader", "Source Serif 4", Georgia, serif;
  --p-sans:         "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --p-mono:         "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

.p-surface {
  background: var(--p-paper);
  font-family: var(--p-sans);
  color: var(--p-ink);
  min-height: 100vh;
}
.p-surface *, .p-surface *::before, .p-surface *::after { box-sizing: border-box; }

/* ── Type primitives ─────────────────────────────────────────────────── */
.p-display { font-family: var(--p-serif); font-weight: 400; letter-spacing: -0.02em; line-height: 1.05; }
.p-display em { font-style: italic; color: var(--p-ink-soft); font-weight: 400; }
.p-h2 { font-family: var(--p-serif); font-weight: 500; letter-spacing: -0.01em; line-height: 1.15; }
.p-h3 { font-family: var(--p-serif); font-weight: 500; letter-spacing: -0.005em; line-height: 1.2; }
.p-body { font-family: var(--p-sans); font-size: 14px; line-height: 1.5; color: var(--p-ink-soft); }
.p-body-lg { font-family: var(--p-sans); font-size: 15px; line-height: 1.55; color: var(--p-ink-soft); }
.p-italic { font-family: var(--p-serif); font-style: italic; color: var(--p-ink-soft); }
.p-eyebrow {
  font-family: var(--p-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--p-ink-mute);
  font-weight: 500;
}
.p-mono { font-family: var(--p-mono); font-size: 12px; letter-spacing: 0.02em; color: var(--p-ink-mute); }

/* ── Rules / dividers ────────────────────────────────────────────────── */
.p-rule { height: 1px; background: var(--p-rule); }
.p-rule-soft { height: 1px; background: var(--p-rule-soft); }
.p-rule-dot {
  height: 1px;
  background-image: radial-gradient(circle, var(--p-ink-faint) 0.7px, transparent 0.9px);
  background-size: 6px 1px;
  background-repeat: repeat-x;
}

/* ── Buttons ─────────────────────────────────────────────────────────── */
.p-btn {
  font-family: var(--p-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--p-ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  white-space: nowrap;
  text-decoration: none;
}
.p-btn--primary { background: var(--p-accent-deep); color: #F4EFE6; }
.p-btn--primary:hover { background: var(--p-accent); color: #F4EFE6; }
.p-btn--ghost { border-color: var(--p-rule); color: var(--p-ink); background: transparent; }
.p-btn--ghost:hover { background: rgba(26,31,38,0.04); color: var(--p-ink); }
/* Destructive primary — used by confirm buttons on family-delete +
   any other "this is the irreversible action" surfaces. Soft red so
   it stands out from the cream paper without screaming horror movie.
   Hoisted from privacy_settings.html's inline style when the family-
   delete dialog moved to settings.html in Phase I, 2026-05-21. */
.p-btn--danger {
  color: #B83C2B;
  background: transparent;
  border: 1px solid rgba(184, 60, 43, 0.4);
}
.p-btn--danger:hover {
  background: rgba(184, 60, 43, 0.08);
  color: #B83C2B;
  border-color: #B83C2B;
}
.p-btn--quiet { color: var(--p-ink-mute); padding: 6px 8px; }
.p-btn--quiet:hover { color: var(--p-ink); background: rgba(26,31,38,0.04); }
/* Block-width modifier — fills container width, centers label. Use with
   .p-btn--primary (or any variant) when stacked CTAs need to share a
   uniform width inside a fixed-width tray. The 220px wrapper width is
   what unifies primary + secondary sizing in the dashboard kid header
   + the kid detail page header. Locked 2026-05-25. */
.p-btn--block { display: flex; width: 100%; justify-content: center; }

/* ── Pills / badges ──────────────────────────────────────────────────── */
.p-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--p-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--p-paper-soft);
  color: var(--p-ink-mute);
  border: 1px solid var(--p-rule-soft);
}
.p-pill--attn { background: var(--p-attn-soft); color: var(--p-attn); border-color: transparent; }
.p-pill--accent { background: var(--p-accent-soft); color: var(--p-accent-deep); border-color: transparent; }
.p-pill--flag::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--p-attn);
  display: inline-block;
}
.p-pill--quiet { background: transparent; }

/* ── Cards ───────────────────────────────────────────────────────────── */
.p-card {
  background: var(--p-card);
  border: 1px solid var(--p-card-edge);
  border-radius: 14px;
}
.p-card--flat { border-radius: 0; border-left: 0; border-right: 0; background: transparent; }

/* ── Dashboard center-pane shared primitives ─────────────────────────────
   These styles are shared between `_dash_inbox_view.html` (inbox view)
   and `_dash_kid_preview.html` (kid sidecar view). Both partials render
   into the `.p-dash__center` container in dashboard.html, but only ONE
   loads per request. Previously these rules lived inside the inbox-view
   <style> block, which meant the kid-sidecar view rendered flag cards
   as plain stacked blocks (markup had the right classes but no CSS).
   Lifted here 2026-05-26 (M-kid-sidecar-flag-card-styles) so both views
   get the same look. */
.p-dash__center .p-dash__section { margin-bottom: 36px; }
.p-dash__center .p-dash__section-head {
  display: flex; align-items: baseline; gap: 14px;
  margin-bottom: 8px;
}
.p-dash__center .p-dash__section-title { font-size: 22px; margin: 0; }
.p-dash__center .p-dash__section-title--attn { color: var(--p-attn); }
.p-dash__center .p-dash__section-sub {
  font-size: 13px;
  color: var(--p-ink-mute);
  margin: 0 0 18px;
  max-width: 68ch;
}

/* Flag card grid — 2-up at desktop, 1-up at narrow widths via auto-fit. */
.p-dash__center .p-dash__flag-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px;
}
.p-dash__center .p-dash__flag-card {
  padding: 18px 20px;
  background: var(--p-card);
  border: 1px solid var(--p-attn-soft);
  border-left: 3px solid var(--p-attn);
  border-radius: 12px;
  display: flex; flex-direction: column; gap: 12px;
}
.p-dash__center .p-dash__flag-meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-family: var(--p-mono); font-size: 11px;
}
.p-dash__center .p-dash__flag-meta-ink { color: var(--p-ink); }
.p-dash__center .p-dash__flag-reason {
  font-size: 17px; line-height: 1.35;
  color: var(--p-ink);
}
.p-dash__center .p-dash__flag-actions {
  display: flex; gap: 8px; flex-wrap: wrap;
}

/* ── Topbar (shared chrome) ──────────────────────────────────────────── */
.p-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--p-paper);
  border-bottom: 1px solid var(--p-rule);
  padding: 14px clamp(20px, 4vw, 48px);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
/* Brand stack — wordmark + italic tagline stacked. Phase A 2026-05-19. */
.p-brand-stack {
  display: inline-flex;
  flex-direction: column;
  text-decoration: none;
  gap: 2px;
  /* The user-pill aligns with the wordmark visually; the tagline
     hangs below into the topbar's padding-bottom. */
}
.p-wordmark {
  font-family: var(--p-serif);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--p-ink);
  display: inline-flex;
  align-items: baseline;
  text-decoration: none;
}
.p-wordmark::after {
  content: "";
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--p-attn);
  margin-left: 2px;
  transform: translateY(-2px);
}
.p-tagline {
  font-family: var(--p-serif);
  font-style: italic;
  font-size: 12px;
  color: var(--p-ink-mute);
  /* Spec calls for a small lift so the tagline sits under the
     wordmark's baseline rather than its descender. */
  line-height: 1.2;
  letter-spacing: 0;
}

/* ── User pill + dropdown ────────────────────────────────────────────── */
.p-userpill-wrap { position: relative; }
.p-userpill {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 4px;
  border-radius: 999px;
  border: 1px solid var(--p-rule);
  background: var(--p-card);
  color: var(--p-ink);
  font-family: var(--p-sans);
  font-size: 13px;
  cursor: pointer;
}
.p-userpill:hover { background: var(--p-paper-soft); }
.p-userpill__avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--p-accent-soft);
  color: var(--p-accent-deep);
  font-family: var(--p-serif);
  font-weight: 500;
  font-size: 13px;
  display: inline-grid;
  place-items: center;
}
.p-userpill__chev {
  font-size: 10px;
  color: var(--p-ink-mute);
  margin-left: 2px;
}
.p-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 240px;
  background: var(--p-card);
  border: 1px solid var(--p-card-edge);
  border-radius: 12px;
  box-shadow: 0 12px 36px -16px rgba(26,31,38,0.22);
  padding: 6px;
  z-index: 50;
  display: none;
}
.p-dropdown.is-open { display: block; }
.p-dropdown__head {
  padding: 10px 12px 12px;
  border-bottom: 1px solid var(--p-rule-soft);
  margin-bottom: 6px;
}
.p-dropdown__name { font-family: var(--p-serif); font-size: 15px; font-weight: 500; }
.p-dropdown__email { font-family: var(--p-mono); font-size: 11px; color: var(--p-ink-mute); margin-top: 2px; }
.p-dropdown__item {
  display: block;
  padding: 8px 12px;
  font-family: var(--p-sans);
  font-size: 13px;
  color: var(--p-ink);
  text-decoration: none;
  border-radius: 6px;
}
.p-dropdown__item:hover { background: var(--p-paper-soft); color: var(--p-ink); }
.p-dropdown__item.is-active { background: var(--p-accent-soft); color: var(--p-accent-deep); }
.p-dropdown__item--danger { color: #B83C2B; }
.p-dropdown__item--danger:hover { color: #B83C2B; background: rgba(184,60,43,0.06); }
.p-dropdown__divider {
  height: 1px;
  background: var(--p-rule-soft);
  margin: 6px 0;
}
/* ── KIDS section inside the dropdown ────────────────────────────────────
   Locked in Claude Design chat2 (2026-05-17, "tehre'sa slightproblem when
   weaddcharacters" thread). Eyebrow label + indented kid rows with the
   per-kid flagged-unreviewed count as an attn badge. */
.p-dropdown__eyebrow {
  padding: 10px 14px 4px;
  font-family: var(--p-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--p-ink-faint);
}
.p-dropdown__item--indent { padding-left: 24px; }
.p-dropdown__kid-row {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}
.p-dropdown__kid-name { font-family: var(--p-sans); }
.p-dropdown__kid-age {
  font-family: var(--p-mono);
  font-size: 10px;
  color: var(--p-ink-faint);
  margin-left: 6px;
}
.p-dropdown__kid-badge {
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--p-attn-soft);
  color: var(--p-attn);
  font-family: var(--p-mono);
  font-size: 9px;
  font-weight: 600;
}

/* ── Verify-email persistent banner ──────────────────────────────────────
   Locked in Claude Design chat2 (2026-05-17, "verify email seems
   important, notgoing tomissbottom right?" thread). Full-width amber
   strip directly under the topbar — can't be missed. Soft warning
   only; the parent can still use the app (per db.py:255-261 rationale).
   Stacks to a two-row layout below 720px so the CTA stays visible. */
.p-verify-banner {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 18px;
  padding: 12px clamp(20px, 4vw, 48px);
  background: var(--p-attn-soft);
  border-bottom: 1px solid var(--p-attn);
  color: var(--p-ink);
  font-family: var(--p-sans);
}
.p-verify-banner__icon {
  width: 32px; height: 32px;
  border-radius: 999px;
  background: var(--p-attn);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--p-serif);
  font-style: italic;
  font-size: 18px;
}
.p-verify-banner__title {
  font-family: var(--p-serif);
  font-size: 16px;
  font-weight: 500;
  color: var(--p-attn);
}
.p-verify-banner__copy {
  font-size: 13px;
  color: var(--p-ink-soft);
  margin-top: 2px;
  line-height: 1.45;
}
.p-verify-banner__cta { margin: 0; }
.p-verify-banner__close {
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  color: var(--p-ink-mute);
  padding: 4px 8px;
}
.p-verify-banner__close:hover { color: var(--p-ink); }
@media (max-width: 720px) {
  .p-verify-banner {
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "icon body close"
      "cta cta cta";
    gap: 10px 12px;
  }
  .p-verify-banner__icon  { grid-area: icon; }
  .p-verify-banner__body  { grid-area: body; }
  .p-verify-banner__close { grid-area: close; }
  .p-verify-banner__cta   { grid-area: cta; }
  .p-verify-banner__cta .p-btn { width: 100%; justify-content: center; }
}

/* ── Page shell (back link + title + subtitle) ───────────────────────── */
.p-page {
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(28px, 4vw, 56px) clamp(20px, 4vw, 48px) 80px;
}
.p-page__back {
  font-family: var(--p-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--p-ink-mute);
  text-decoration: none;
  display: inline-block;
  margin-bottom: 14px;
}
.p-page__back:hover { color: var(--p-accent-deep); }
.p-page__title {
  font-family: var(--p-serif);
  font-size: clamp(34px, 5vw, 52px);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--p-ink);
  margin: 0 0 14px;
}
.p-page__title em { font-style: italic; color: var(--p-ink-soft); font-weight: 400; }
.p-page__subtitle {
  font-family: var(--p-serif);
  font-style: italic;
  font-size: clamp(17px, 1.6vw, 20px);
  color: var(--p-ink-soft);
  line-height: 1.5;
  margin: 0 0 36px;
  max-width: 56ch;
}

/* ── Section pattern (eyebrow + h2 + body) ───────────────────────────── */
.p-section { margin-top: 36px; }
.p-section__eyebrow {
  font-family: var(--p-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--p-ink-mute);
  margin-bottom: 12px;
}
.p-section__title {
  font-family: var(--p-serif);
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 500;
  letter-spacing: -0.005em;
  margin: 0 0 14px;
}

/* ── Form primitives ─────────────────────────────────────────────────── */
.p-field { display: block; margin-bottom: 18px; }
.p-field__label {
  display: block;
  font-family: var(--p-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--p-ink-mute);
  margin-bottom: 6px;
}
.p-field__input,
.p-field__textarea {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--p-card-edge);
  background: var(--p-card);
  border-radius: 8px;
  font-family: var(--p-sans);
  font-size: 14px;
  color: var(--p-ink);
  transition: border-color 0.12s, background 0.12s;
}
.p-field__input:focus,
.p-field__textarea:focus {
  outline: none;
  border-color: var(--p-accent);
  background: #FFFEF8;
}
.p-field__help {
  font-family: var(--p-sans);
  font-size: 12px;
  color: var(--p-ink-mute);
  margin-top: 6px;
  line-height: 1.5;
}

/* ── Flash banners (success / error) ─────────────────────────────────── */
.p-flash {
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 24px;
  font-family: var(--p-sans);
  font-size: 14px;
}
.p-flash--success { background: var(--p-accent-soft); color: var(--p-accent-deep); }
.p-flash--error { background: rgba(184,60,43,0.10); color: #B83C2B; }

/* ── Mobile / tablet refinements ─────────────────────────────────────── */
@media (max-width: 720px) {
  .p-topbar { padding: 12px 18px; }
  .p-wordmark { font-size: 19px; }
  .p-tagline { display: none; }
  .p-page { padding: 24px 18px 60px; }
  .p-page__title { font-size: clamp(30px, 8vw, 42px); }
  .p-page__subtitle { font-size: 16px; margin-bottom: 28px; }
  .p-section { margin-top: 28px; }
}

/* ─────────────────────────────────────────────────────────────────────
   KID SETTINGS — sub-tab system (M-parent-app-claude-design Phase H.1,
   2026-05-21)
   ─────────────────────────────────────────────────────────────────────
   Four sub-tabs (Content / Limits / Privacy / Manage) under the existing
   Activity/Settings kid-tabs strip. Used inside the .p-kid surface only;
   class prefix .ks-* keeps these scoped + greppable.

   Reused by:
   - kid.html (this PR — Settings tab)
   - privacy_settings.html (Phase H.3 — same .ks-privacy-tabstrip variant)
   ───────────────────────────────────────────────────────────────────── */

/* Sub-tab pill strip ────────────────────────────────────────────────── */
.ks-tabstrip {
  display: flex;
  gap: 6px;
  padding: 4px;
  background: var(--p-paper-soft);
  border: 1px solid var(--p-rule-soft);
  border-radius: 999px;
  margin-bottom: 28px;
  width: fit-content;
  flex-wrap: wrap;
}
.ks-tab {
  padding: 8px 16px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: var(--p-ink-mute);
  font-family: var(--p-sans);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.ks-tab:hover { color: var(--p-ink); background: rgba(26,31,38,0.03); }
.ks-tab--active {
  background: var(--p-card);
  color: var(--p-ink);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(26,31,38,0.08);
}
.ks-tab--active:hover { background: var(--p-card); }
.ks-tab--danger { /* Manage tab — red label when active; same chrome */ }
.ks-tab--danger.ks-tab--active { color: #A4361B; }

/* Privacy & data page sub-tab variants (Phase H.3, 2026-05-21) ─────
   .ks-tab--with-avatar reduces left padding to make room for the
   22 px avatar that prefixes the kid's name.
   .ks-tab--separated visually breaks the Family-archive tab from
   the kid tabs with a 1 px vertical rule on its left (a pseudo-
   element so the tab itself keeps its pill chrome). */
.ks-tab--with-avatar {
  padding: 6px 14px 6px 6px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ks-tab-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--p-paper-soft);
  border: 1px solid var(--p-rule-soft);
  display: inline-grid;
  place-items: center;
  font-family: var(--p-serif);
  font-size: 11px;
  font-weight: 500;
  color: var(--p-ink-soft);
  flex-shrink: 0;
}
.ks-tab--separated {
  position: relative;
  margin-left: 14px;
}
.ks-tab--separated::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: var(--p-rule-soft);
}

/* Eyebrow-underline tab strip (Phase H.4 → Phase I, 2026-05-21).
   The second tab pattern in the design system (the first being the
   .ks-tabstrip pill style used by Kid Settings + Privacy & data).
   Mono-uppercase eyebrow labels with an amber 2 px underline on the
   active tab. Used by Billing (Phase H.4) + Account settings
   (Phase I). The .ks-billing-* aliases below preserve markup that
   shipped in Phase H.4 — same selectors, same styles, no markup
   change needed in billing.html.

   Use .ks-utabstrip / .ks-utab / .ks-utab--active on new surfaces. */
.ks-utabstrip,
.ks-billing-tabstrip {
  display: flex;
  gap: 28px;
  border-bottom: 1px solid var(--p-rule-soft);
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.ks-utab,
.ks-billing-tab {
  background: transparent;
  border: 0;
  padding: 10px 0;
  font-family: var(--p-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--p-ink-mute);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  text-decoration: none;
  transition: color 120ms ease, border-color 120ms ease;
}
.ks-utab:hover,
.ks-billing-tab:hover { color: var(--p-ink); }
.ks-utab--active,
.ks-billing-tab--active {
  color: var(--p-attn);
  border-bottom-color: var(--p-attn);
}
/* Danger-styled variant for the "Danger zone" tab on Account
   settings — same chrome, but the label flips to amber-red when
   active to telegraph that the destructive cards inside are weighty. */
.ks-utab--danger.ks-utab--active {
  color: #A4361B;
  border-bottom-color: #A4361B;
}
.ks-utab:focus-visible,
.ks-billing-tab:focus-visible {
  outline: 2px solid var(--p-attn);
  outline-offset: 2px;
}
.ks-tab:focus-visible {
  outline: 2px solid var(--p-attn);
  outline-offset: 2px;
}

/* Pane header (H2 + auto-save pill) ──────────────────────────────────── */
.ks-pane-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.ks-pane-h2 {
  font-family: var(--p-serif);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0;
  color: var(--p-ink);
}
.ks-pane-body {
  font-family: var(--p-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--p-ink-soft);
  margin: 0 0 22px;
  max-width: 740px;
}

/* Save-status indicator (pill + footer-strip variants) ──────────────── */
.ks-save {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 8px;
  border-radius: 999px;
  background: var(--p-paper-soft);
  border: 1px solid var(--p-rule-soft);
  font-family: var(--p-sans);
  font-size: 11px;
  color: var(--p-ink-mute);
}
.ks-save-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--p-accent);
  flex-shrink: 0;
}
.ks-save[data-state="saved"] .ks-save-dot { background: #2F8A6B; }
.ks-save[data-state="error"] .ks-save-dot { background: #A4361B; }
.ks-save[data-state="saving"] .ks-save-dot { animation: ks-pulse 900ms ease-in-out infinite; }
@keyframes ks-pulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.2); }
}
.ks-save-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-top: 1px solid var(--p-rule-soft);
  background: var(--p-paper-soft);
}
.ks-save-footer .ks-save-dot { background: var(--p-accent); }
.ks-save-footer[data-state="saved"] .ks-save-dot { background: #2F8A6B; }
.ks-save-footer[data-state="error"] .ks-save-dot { background: #A4361B; }
.ks-save-footer[data-state="saving"] .ks-save-dot { animation: ks-pulse 900ms ease-in-out infinite; }
.ks-save-footer-label {
  font-family: var(--p-serif);
  font-style: italic;
  font-size: 13px;
  color: var(--p-ink-mute);
}

/* Preset cards (Gentle / Curious / Honest) ──────────────────────────── */
.ks-preset-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 24px;
}
.ks-preset {
  text-align: left;
  padding: 18px 20px 18px 22px;
  background: var(--p-card);
  border: 1px solid var(--p-rule-soft);
  border-radius: 12px;
  cursor: pointer;
  font-family: var(--p-sans);
  position: relative;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.ks-preset:hover { border-color: var(--p-attn); }
.ks-preset:focus-visible {
  outline: 2px solid var(--p-attn);
  outline-offset: 2px;
}
.ks-preset--active {
  border: 1px solid var(--p-attn);
  border-left: 3px solid var(--p-attn);
  box-shadow: 0 1px 0 rgba(181,101,29,0.06);
}
.ks-preset-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 6px;
}
.ks-preset-name {
  font-family: var(--p-serif);
  font-size: 20px;
  font-weight: 500;
  color: var(--p-ink);
}
.ks-preset-check {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--p-attn);
  color: #fff;
  display: none;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}
.ks-preset--active .ks-preset-check { display: grid; }
.ks-preset-age {
  font-family: var(--p-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--p-ink-mute);
  margin-bottom: 10px;
}
.ks-preset--active .ks-preset-age { color: var(--p-attn); }
.ks-preset-summary {
  font-family: var(--p-sans);
  font-size: 13px;
  line-height: 1.55;
  color: var(--p-ink-soft);
}

/* Customize disclosure ──────────────────────────────────────────────── */
.ks-customize {
  border: 1px solid var(--p-rule-soft);
  border-radius: 12px;
  margin: 0 0 32px;
  overflow: hidden;
  background: var(--p-card);
}
.ks-disclosure-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px 22px;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: var(--p-sans);
  text-align: left;
  transition: background 120ms ease;
}
.ks-disclosure-header:hover { background: rgba(26,31,38,0.02); }
.ks-disclosure-header:focus-visible {
  outline: 2px solid var(--p-attn);
  outline-offset: -2px;
}
.ks-disclosure-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ks-disclosure-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.ks-disclosure-title {
  font-family: var(--p-serif);
  font-size: 17px;
  font-weight: 500;
  color: var(--p-ink);
}
.ks-disclosure-sub {
  font-family: var(--p-sans);
  font-size: 13px;
  color: var(--p-ink-mute);
}
.ks-disclosure-right {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}
.ks-deviation-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px 2px 6px;
  border-radius: 999px;
  background: var(--p-attn-soft);
  color: var(--p-attn);
  font-family: var(--p-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-weight: 600;
}
.ks-deviation-chip .ks-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--p-attn);
}
.ks-reset {
  font-family: var(--p-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--p-attn);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.ks-reset:hover { text-decoration-thickness: 2px; }
.ks-reset:focus-visible {
  outline: 2px solid var(--p-attn);
  outline-offset: 2px;
}
.ks-chevron {
  font-family: var(--p-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--p-ink-mute);
}

/* Topic rows + segments inside the disclosure ───────────────────────── */
.ks-topic-body { border-top: 1px solid var(--p-rule-soft); }
.ks-topic-row {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  align-items: center;
  gap: 32px;
  padding: 14px 22px;
  border-top: 1px solid var(--p-rule-soft);
  background: transparent;
  transition: background 120ms ease;
}
.ks-topic-row:first-of-type { border-top: 0; }
.ks-topic-row--deviating { background: rgba(181,101,29,0.04); }
.ks-topic-label {
  font-family: var(--p-serif);
  font-size: 15px;
  font-weight: 500;
  color: var(--p-ink);
}
.ks-topic-help {
  font-family: var(--p-sans);
  font-size: 12.5px;
  color: var(--p-ink-mute);
  margin-top: 3px;
  line-height: 1.45;
}
.ks-topic-options {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.ks-segment {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--p-rule);
  background: transparent;
  color: var(--p-ink);
  font-family: var(--p-sans);
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.2;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.ks-segment:hover { border-color: var(--p-ink-mute); }
.ks-segment:focus-visible {
  outline: 2px solid var(--p-attn);
  outline-offset: 2px;
}
.ks-segment--active {
  border-color: var(--p-attn);
  background: var(--p-attn);
  color: #fff;
  font-weight: 500;
}
.ks-segment--active:hover { border-color: var(--p-attn); }
.ks-segment-dot {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--p-attn);
  flex-shrink: 0;
}

/* Guardrails callout (informational, amber rule) ────────────────────── */
.ks-guardrails {
  padding: 22px 26px;
  background: var(--p-card);
  border: 1px solid var(--p-rule-soft);
  border-left: 3px solid var(--p-attn);
  border-radius: 14px;
  margin-bottom: 16px;
}
.ks-guardrails-eyebrow {
  font-family: var(--p-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--p-attn);
  margin-bottom: 8px;
}
.ks-guardrails-h {
  font-family: var(--p-serif);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.005em;
  margin: 0 0 8px;
  color: var(--p-ink);
}
.ks-guardrails p {
  font-family: var(--p-sans);
  font-size: 14px;
  line-height: 1.65;
  color: var(--p-ink-soft);
  margin: 0;
}
.ks-guardrails a { color: var(--p-attn); }

/* Page cards (Phase H.2 — used by Limits + Privacy + Manage panes) ── */
/* The new design's PageCard primitive: warm cream card on paper
   background, soft rule border, 14px radius. Variants for accent
   (amber left rule) and danger (red left rule + optional tinted bg). */
.ks-card {
  padding: 22px 26px;
  background: var(--p-card);
  border: 1px solid var(--p-rule-soft);
  border-radius: 14px;
  margin-bottom: 18px;
}
.ks-card--accent { border-left: 3px solid var(--p-attn); }
.ks-card--danger { border-left: 3px solid #A4361B; }
.ks-card--danger-tinted {
  background: rgba(164,54,27,0.04);
  border-color: rgba(164,54,27,0.20);
  border-left: 3px solid #A4361B;
}
.ks-card-eyebrow {
  font-family: var(--p-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--p-ink-mute);
  margin-bottom: 14px;
}
.ks-card-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.ks-card-meta {
  font-family: var(--p-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--p-ink-faint);
}
.ks-card-meta-num { font-weight: 600; color: var(--p-ink); }
.ks-card-meta-num--attn { color: var(--p-attn); }
.ks-card-h3 {
  font-family: var(--p-serif);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.005em;
  margin: 0 0 6px;
  color: var(--p-ink);
}
.ks-card-h3--danger { color: #A4361B; }
.ks-card-body {
  font-family: var(--p-sans);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--p-ink-mute);
  margin: 0 0 14px;
  max-width: 60ch;
}
.ks-card-body a { color: var(--p-attn); }
.ks-card-body em { font-style: italic; }

/* Pane-header right-side meta (save pill + COPPA badge etc.) ──────── */
.ks-pane-header-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* COPPA "confirmed" badge + Teen account pill ──────────────────────── */
.ks-coppa-badge {
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--p-accent-soft);
  color: var(--p-accent-deep);
  font-family: var(--p-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.ks-teen-pill {
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--p-paper-soft);
  color: var(--p-ink-mute);
  font-family: var(--p-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Daily-cap slider ─────────────────────────────────────────────────── */
.ks-cap-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
}
.ks-cap-row-label {
  font-family: var(--p-serif);
  font-size: 17px;
  font-weight: 500;
  color: var(--p-ink);
}
.ks-cap-row-value {
  font-family: var(--p-serif);
  font-size: 16px;
  color: var(--p-attn);
}
.ks-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: var(--p-rule-soft);
  border-radius: 999px;
  outline: none;
  margin: 0;
}
.ks-slider:focus-visible {
  outline: 2px solid var(--p-attn);
  outline-offset: 4px;
}
.ks-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--p-attn);
  border: 2px solid var(--p-paper);
  box-shadow: 0 1px 3px rgba(26,31,38,0.2);
  cursor: pointer;
}
.ks-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--p-attn);
  border: 2px solid var(--p-paper);
  box-shadow: 0 1px 3px rgba(26,31,38,0.2);
  cursor: pointer;
}
.ks-slider-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-family: var(--p-mono);
  font-size: 11px;
  color: var(--p-ink-faint);
}
.ks-cap-divider {
  margin: 18px 0 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--p-rule-soft);
}
.ks-cap-weekend { margin-top: 14px; }
.ks-cap-area--disabled { opacity: 0.45; pointer-events: none; }

/* Inline checkbox rows (used in Limits + Manage) ───────────────────── */
.ks-inline-check {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-family: var(--p-sans);
  font-size: 14px;
  color: var(--p-ink);
}
.ks-inline-check input[type="checkbox"] {
  /* Hide the native control — the visible box is the next sibling. */
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.ks-inline-check-box {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  background: transparent;
  border: 1.5px solid var(--p-rule);
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
  transition: background 120ms ease, border-color 120ms ease;
}
.ks-inline-check input:checked ~ .ks-inline-check-box {
  background: var(--p-attn);
  border-color: var(--p-attn);
}
.ks-inline-check input:checked ~ .ks-inline-check-box::before { content: "✓"; }
.ks-inline-check input:focus-visible ~ .ks-inline-check-box {
  outline: 2px solid var(--p-attn);
  outline-offset: 2px;
}

/* Off-limit characters 4-col grid ──────────────────────────────────── */
.ks-char-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 8px;
}
.ks-char-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  font-family: var(--p-sans);
  font-size: 14px;
  color: var(--p-ink);
  transition: background 120ms ease, color 120ms ease;
}
.ks-char-row:hover { background: rgba(26,31,38,0.03); }
.ks-char-row input[type="checkbox"] {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.ks-char-checkbox {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  background: transparent;
  border: 1.5px solid var(--p-rule);
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
  transition: background 120ms ease, border-color 120ms ease;
}
.ks-char-row--blocked {
  background: var(--p-attn-soft);
  color: var(--p-attn);
}
.ks-char-row--blocked:hover { background: var(--p-attn-soft); }
.ks-char-row--blocked .ks-char-checkbox {
  background: var(--p-attn);
  border-color: var(--p-attn);
}
.ks-char-row--blocked .ks-char-checkbox::before { content: "✕"; }
.ks-char-row--blocked .ks-char-name { text-decoration: line-through; }
.ks-char-row input:focus-visible ~ .ks-char-checkbox {
  outline: 2px solid var(--p-attn);
  outline-offset: 2px;
}

/* Privacy Check row (Phase H.2) ────────────────────────────────────── */
.ks-check {
  padding: 14px 16px;
  border: 1px solid var(--p-rule-soft);
  border-radius: 10px;
  background: var(--p-paper);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  cursor: pointer;
  margin-bottom: 10px;
}
.ks-check:last-child { margin-bottom: 0; }
.ks-check input[type="checkbox"] {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.ks-check-box {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border-radius: 4px;
  background: transparent;
  border: 1.5px solid var(--p-rule);
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  transition: background 120ms ease, border-color 120ms ease;
}
.ks-check input:checked ~ .ks-check-box {
  background: var(--p-attn);
  border-color: var(--p-attn);
}
.ks-check input:checked ~ .ks-check-box::before { content: "✓"; }
.ks-check input:focus-visible ~ .ks-check-box {
  outline: 2px solid var(--p-attn);
  outline-offset: 2px;
}
.ks-check-content { cursor: pointer; }
.ks-check-label {
  font-family: var(--p-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--p-ink);
  margin-bottom: 4px;
}
.ks-check-body {
  font-family: var(--p-sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--p-ink-soft);
}
.ks-check-body em {
  font-style: italic;
  color: var(--p-attn);
  font-family: var(--p-serif);
  margin-right: 6px;
}

/* Generic action button (ghost variant, danger variant) ────────────── */
.ks-btn {
  font-family: var(--p-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid var(--p-rule);
  background: transparent;
  color: var(--p-ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
  white-space: nowrap;
}
.ks-btn:hover { background: rgba(26,31,38,0.04); }
.ks-btn--danger {
  color: #A4361B;
  border-color: #A4361B;
}
.ks-btn--danger:hover { background: rgba(164,54,27,0.06); }
.ks-btn:focus-visible {
  outline: 2px solid var(--p-attn);
  outline-offset: 2px;
}

/* Footer muted link (used at bottom of Privacy pane) ───────────────── */
.ks-footer-link {
  font-family: var(--p-sans);
  font-size: 13px;
  color: var(--p-ink-mute);
  margin-top: 22px;
}
.ks-footer-link a { color: var(--p-ink); text-decoration: underline; text-underline-offset: 2px; }

/* Tablet ≤1023: collapse multi-column grids + stack topic rows ──────── */
@media (max-width: 1023px) {
  .ks-tabstrip   { flex-wrap: wrap; }
  .ks-preset-grid { grid-template-columns: 1fr; }
  .ks-topic-row  { grid-template-columns: 1fr; gap: 12px; }
  .ks-char-grid  { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 520px) {
  .ks-char-grid  { grid-template-columns: 1fr; }
}

/* Phone widths (≤520px) — touch-target bumps + layout polish for
   the Phase H + Phase I redesigned surfaces. Apple HIG recommends
   44×44 px minimum tap targets; the desktop padding values render
   tabs/segments at ~28-32 px tap heights which is fine for mouse
   but cramped on thumbs. */
@media (max-width: 520px) {
  /* Pill-style tab strip (Kid Settings sub-tabs + Privacy sub-tabs).
     Bumping vertical padding takes the tap target to ~44 px. */
  .ks-tab { padding: 12px 18px; font-size: 13.5px; }

  /* Avatar pill — keep room for the 22 px circle on the left. */
  .ks-tab--with-avatar { padding: 9px 16px 9px 8px; }

  /* Eyebrow-underline tab strip (Billing + Account settings). The
     existing padding: 10px 0 makes a ~30 px tap target; bump to 14 px
     for a 44 px+ target. */
  .ks-utab,
  .ks-billing-tab { padding: 14px 4px; }

  /* Topic segment pills (Kid Settings Content pane). Bump for thumb
     accuracy; the deviation tint stays the same. */
  .ks-segment { padding: 10px 14px; font-size: 13px; }

  /* Privacy-tab Family-archive separator — when the kid tabs wrap
     onto a second row, the ::before vertical rule lands in the wrong
     spot (positioned relative to its own tab, but visually wants to
     be between two tabs on the same row). Drop the rule entirely on
     phone widths where wrapping is the norm. */
  .ks-tab--separated { margin-left: 4px; }
  .ks-tab--separated::before { display: none; }

  /* Form controls — guarantee 44 px tap height so the parent doesn't
     have to fat-finger checkbox labels. The label fills the row and
     min-height applies the floor. */
  .ks-inline-check,
  .ks-char-row { min-height: 44px; }

  /* Card padding — the 22-26 px desktop padding eats too much of a
     375 px viewport. Tighten to 18 px on the sides without cramping
     the vertical rhythm. */
  .ks-card { padding: 18px 18px; }
}