:root {
  --cream:        #F4F1EA;
  --cream-hi:     #FAF7EE;
  --cream-lo:     #E8DFC8;
  --navy:         #1F3A5F;
  --navy-mid:     #2C4E7A;
  --navy-soft:    #5A6B80;
  --terra:        #B8722A;
  --terra-soft:   #E8C9A0;
  --terra-dim:    #8E4623;
  --line:         #D8D2C2;
  --error:        #8B2E1F;
  --error-bg:     #FBE9E7;
  --serif: Georgia, "Source Serif Pro", serif;
  --sans:  "Helvetica Neue", "Inter", Helvetica, Arial, sans-serif;
  --mono:  ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--cream);
  color: var(--navy);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--navy); text-underline-offset: 3px; }
a:hover { color: var(--terra); }
button { font: inherit; cursor: pointer; }

.wrap { max-width: 980px; margin: 0 auto; padding: 0 28px; }

/* Top bar */
header.topbar {
  border-bottom: 1px solid var(--line);
  background: var(--cream-hi);
}
.topbar-inner {
  max-width: 980px; margin: 0 auto; padding: 18px 28px;
  display: flex; align-items: center; justify-content: space-between;
}
.brand-stack {
  display: flex; flex-direction: column; gap: 2px;
  text-decoration: none; line-height: 1;
}
.brand-stack:hover { color: inherit; }
.wordmark {
  font-family: var(--serif); font-weight: 700; font-size: 22px;
  letter-spacing: 0.18em; color: var(--navy);
}
.wordmark .dot { color: var(--terra); }
.brand-tagline {
  font-family: var(--serif); font-style: italic; font-size: 12px;
  color: var(--navy-soft); letter-spacing: 0.01em;
}
/* User menu — Gmail-style avatar dropdown for signed-in parents.
   Native <details>/<summary> drives open/close; click-outside-to-close
   added in base.html. */
.user-menu { position: relative; }
.user-menu summary {
  list-style: none;
  cursor: pointer;
  font-size: 13px;
  color: var(--navy);
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.15s, border-color 0.15s;
}
.user-menu summary::-webkit-details-marker { display: none; }
.user-menu summary:hover {
  background: var(--cream-hi);
  border-color: var(--terra);
}
.user-menu[open] summary {
  background: var(--cream-hi);
  border-color: var(--terra);
}
.user-menu-caret {
  font-size: 9px;
  color: var(--navy-soft);
  transition: transform 0.18s;
}
.user-menu[open] .user-menu-caret {
  transform: rotate(180deg);
  color: var(--terra);
}
.user-menu-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 50;
  min-width: 200px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 6px 20px rgba(20, 30, 50, 0.10);
}
.user-menu-item {
  display: block;
  padding: 9px 14px;
  font-size: 13.5px;
  color: var(--navy);
  text-decoration: none;
  border-radius: 6px;
  transition: background 0.12s, color 0.12s;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
}
.user-menu-item:hover {
  background: var(--cream-hi);
  color: var(--terra);
}
.user-menu-divider {
  height: 1px;
  background: var(--line);
  margin: 4px 6px;
}
.user-menu-logout-form { margin: 0; }
.user-menu-logout {
  color: var(--error);
}
.user-menu-logout:hover {
  background: rgba(193, 74, 60, 0.08);
  color: var(--error);
}

/* ────────────────────────────────────────────────────────────
   Top-nav restructure (founder direction 2026-05-11):
   - .topbar-nav holds the right-side nav: inline Dashboard /
     Inbox / Billing links + a hamburger menu (≡) replacing the
     prior "Anthony ▾" dropdown.
   - Hamburger is the same <details> primitive, just styled as
     three lines instead of a name+caret pill.
   ──────────────────────────────────────────────────────────── */
.topbar-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}
.topbar-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 12px;
  font-size: 13.5px;
  color: var(--navy);
  text-decoration: none;
  border-radius: 6px;
  font-family: var(--serif);
  transition: background 0.12s, color 0.12s;
}
.topbar-nav-link:hover {
  background: var(--cream);
  color: var(--terra);
}
.topbar-nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0;
  background: var(--terra);
  color: var(--cream-hi);
  border-radius: 999px;
  margin-left: 4px;
}

/* Minimal top-nav 2026-05-11 (founder feedback): the Dashboard / Inbox
   / Billing top-level tabs felt noisy at solo-parent scale where every
   parent has the same destinations. Collapsed to just the parent's
   name + hamburger affordance; everything else lives in the panel. */
.topbar-nav--minimal {
  gap: 0;
}
.topbar-nav-name {
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 500;
  color: var(--navy);
  margin-right: 10px;
}
/* Badge positioned outside the hamburger summary border so the count
   reads as adjacent state, not a button decoration. Sits to the right
   of the icon. */
.topbar-nav--minimal .topbar-nav-badge {
  margin-left: 8px;
}

/* Hamburger variant of the existing user-menu component. */
.user-menu--hamburger summary {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  gap: 0;
  min-width: 0;
}
/* The minimal-nav summary now also carries the parent's name + an
   optional inbox badge — align them along the summary axis with the
   hamburger icon. */
.topbar-nav--minimal .user-menu--hamburger summary {
  display: inline-flex;
  align-items: center;
  gap: 0;
}
/* Inbox count rendered next to nav items inside the dropdown panel. */
.user-menu-item-count {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--terra);
  margin-left: 4px;
}
.user-menu--hamburger summary:hover {
  background: var(--cream);
  border-color: var(--terra);
}
.hamburger-icon {
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
  width: 18px;
  height: 14px;
}
.hamburger-icon span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--navy);
  border-radius: 1px;
  transition: background 0.12s, transform 0.18s, opacity 0.18s;
}
.user-menu--hamburger summary:hover .hamburger-icon span {
  background: var(--terra);
}
/* When open, morph the 3 lines into an X cue (subtle, not aggressive
   — keeps the hamburger metaphor but signals "click to close"). */
.user-menu--hamburger[open] .hamburger-icon span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.user-menu--hamburger[open] .hamburger-icon span:nth-child(2) {
  opacity: 0;
}
.user-menu--hamburger[open] .hamburger-icon span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* User-menu panel header — shows the signed-in parent's name +
   email as non-clickable label at the top of the dropdown. */
.user-menu-header {
  padding: 10px 14px 8px;
}
.user-menu-name {
  font-family: var(--serif);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.2;
}
.user-menu-email {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--navy-soft);
  letter-spacing: 0.02em;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 220px;
}

/* Mobile: hide inline nav links, keep just hamburger.
   Hamburger drawer keeps everything reachable. */
@media (max-width: 640px) {
  .topbar-nav-link { display: none; }
}

.topbar-signin-pair {
  display: inline-flex; align-items: baseline; gap: 10px;
}
.topbar-signin-sep {
  color: var(--navy-soft); opacity: 0.4; font-size: 12px;
}
.topbar-signin {
  font-size: 13px; color: var(--navy-soft); text-decoration: none;
  white-space: nowrap;
}
.topbar-signin strong {
  color: var(--navy); font-weight: 500; text-decoration: underline;
  text-underline-offset: 4px; text-decoration-color: var(--terra-soft);
}
.topbar-signin:hover { color: var(--terra); }
.topbar-signin:hover strong { color: var(--terra); text-decoration-color: var(--terra); }
@media (max-width: 540px) {
  .brand-tagline { display: none; }
  .topbar-signin { font-size: 12px; }
}

main { padding: 36px 0 60px; }
h1, h2, h3 { font-family: var(--serif); color: var(--navy); margin: 0; letter-spacing: -0.01em; }
h1 { font-size: 32px; line-height: 1.15; margin-bottom: 6px; }
h2 { font-size: 22px; margin-bottom: 14px; }
h3 { font-size: 16px; margin-bottom: 10px; }
.eyebrow {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
  color: var(--navy-soft); text-transform: uppercase; margin-bottom: 8px;
}

/* Auth forms */
.auth {
  max-width: 420px; margin: 60px auto;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 36px 32px;
  box-shadow: 0 18px 40px -28px rgba(31,58,95,0.18);
}
.auth h1 { font-size: 26px; margin-bottom: 6px; }
.auth p.lede {
  color: var(--navy-soft); font-size: 14px; margin: 0 0 22px;
  font-family: var(--serif); font-style: italic;
}
.field { margin-bottom: 14px; }
.field label {
  display: block; font-size: 12px; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--navy-soft); margin-bottom: 6px;
}
.field input[type=email],
.field input[type=password],
.field input[type=text],
.field input[type=number] {
  width: 100%; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 8px;
  background: #fff; color: var(--navy);
  font: inherit;
}
.field input:focus { outline: 2px solid var(--terra-soft); border-color: var(--terra); }

.btn {
  background: var(--terra); color: #fff; border: 0;
  padding: 11px 22px; border-radius: 999px;
  font-weight: 600; font-size: 15px;
}
.btn:hover { background: #a4631f; }
.btn.secondary { background: transparent; color: var(--navy-soft); padding: 8px 14px; }
.btn.secondary:hover { color: var(--terra); }
.btn.ghost {
  background: #fff; color: var(--navy); border: 1px solid var(--line);
}
.btn.ghost:hover { border-color: var(--terra); color: var(--terra); }

.error {
  background: var(--error-bg); color: var(--error);
  padding: 10px 14px; border-radius: 6px; margin-bottom: 14px; font-size: 14px;
}
.alt { margin-top: 18px; font-size: 13px; color: var(--navy-soft); text-align: center; }
/* Stacked variant — used on /login so "Create one →" and "Forgot password?"
   sit on their own lines instead of crowding a single 13px row. */
.alt-stack { display: flex; flex-direction: column; gap: 8px; }

/* Dashboard kid cards */
.kid-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px; margin-top: 18px;
}
/* OLD pre-Phase-B.1 .kid-card block REMOVED 2026-05-11.
   Was competing in the cascade with the Phase B.1 .kid-card rules at
   ~L4631 (border-top-separator editorial pattern). The old block's
   border-radius: 14px + white bg + hover box-shadow gave kid-cards
   a "premium" feel that didn't match the rest of the parent-app's
   flat editorial aesthetic (cap-widget, settings, etc.). Founder
   spotted the mismatch 2026-05-11. Phase B.1 rules are the canonical
   .kid-card styling now. Old .name / .meta / .stats sub-classes are
   also no longer used by the live template (which uses .kid-card-name
   / .kid-card-meta / etc.). */
.add-kid-card {
  border: 1px dashed var(--line); border-radius: 14px;
  padding: 22px; text-align: center; color: var(--navy-soft);
  background: rgba(255,255,255,0.5);
  text-decoration: none;
}
.add-kid-card:hover { border-color: var(--terra); color: var(--terra); }

/* Kid detail */
.kid-head {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 10px; margin-bottom: 6px;
}
.kid-pin {
  font-family: var(--mono); font-size: 13px; color: var(--navy-soft);
  background: var(--cream-hi); padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--line); letter-spacing: 0.18em;
}
.kid-pin strong { color: var(--terra); font-weight: 700; }

/* Inline name+age edit on the kid detail page. The view-mode h1 sits
   next to a small "Edit" pill that toggles into the input form. */
.kid-head-name {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.kid-edit-btn {
  background: transparent;
  color: var(--navy-soft);
  border: 1px solid var(--line);
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-family: var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.kid-edit-btn:hover { color: var(--terra); border-color: var(--terra); }
.kid-edit-form {
  background: var(--cream-hi);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px 20px;
  margin: 6px 0 14px;
  max-width: 520px;
}
.kid-edit-fields {
  display: grid;
  grid-template-columns: 1fr 100px;
  gap: 14px;
  margin-bottom: 14px;
}
@media (max-width: 480px) {
  .kid-edit-fields { grid-template-columns: 1fr; }
}
.kid-edit-actions {
  display: flex; gap: 10px; align-items: center;
}

.section {
  margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--line);
}
.section .section-title {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 14px;
}

/* Conversation list */
.convo-list { list-style: none; margin: 0; padding: 0; }
.convo-list li {
  padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px;
  background: #fff; margin-bottom: 10px;
  display: flex; justify-content: space-between; align-items: center;
}
.convo-list li a { text-decoration: none; flex: 1; }
.convo-list .meta { font-family: var(--mono); font-size: 11px; color: var(--navy-soft); letter-spacing: 0.04em; }
.convo-list .char {
  font-family: var(--serif); font-weight: 600; font-size: 16px; color: var(--navy);
}
.convo-list .flagged {
  font-family: var(--mono); font-size: 11px; color: var(--error);
  background: var(--error-bg); padding: 2px 8px; border-radius: 999px; margin-left: 8px;
}
.empty {
  padding: 22px; border: 1px dashed var(--line); border-radius: 10px;
  background: var(--cream-hi); color: var(--navy-soft);
  font-family: var(--serif); font-style: italic; font-size: 15px;
}

/* Memory editor */
.mem-block { margin-bottom: 22px; }
.mem-block .mb-head {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
  color: var(--terra); text-transform: uppercase; margin-bottom: 8px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.mem-block .mb-count {
  color: var(--navy-soft);
  letter-spacing: 0.04em;
  text-transform: none;
  font-style: italic;
  font-family: var(--serif);
  font-size: 13px;
}
/* Per-character "clear all from X" — quiet ghost button, terra accent
   on hover. Lives in the character's mb-head row, right-aligned. */
.mb-clear-form { margin: 0 0 0 auto; }
.mb-clear {
  background: transparent;
  border: 1px solid transparent;
  color: var(--navy-soft);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.mb-clear:hover {
  color: var(--error);
  border-color: var(--error);
}
/* Whole-kid clear — sits at the bottom of the memory section, slightly
   lower visual weight than a primary danger button. */
.mem-clear-all {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px dashed var(--line);
}
.mem-clear-all form { margin: 0; }
.mem-clear-all .btn.ghost.danger {
  font-size: 13px;
}
.mem-list { list-style: none; padding: 0; margin: 0; }
.mem-list li {
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  padding: 12px 14px; margin-bottom: 8px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.mem-list .text { font-family: var(--serif); font-size: 15px; }
.mem-list form { margin: 0; }
.mem-list .del {
  background: transparent; border: 1px solid var(--line); color: var(--navy-soft);
  padding: 4px 12px; border-radius: 999px; font-size: 12px;
}
.mem-list .del:hover { border-color: var(--error); color: var(--error); }

/* Conversation transcript */
.transcript {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 28px; max-width: 760px; margin: 22px auto 0;
}
.transcript .turn { padding: 14px 0; border-bottom: 1px solid var(--cream-lo); }
.transcript .turn:last-child { border-bottom: 0; }
.transcript .who {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--navy-soft); margin-bottom: 4px;
}
.transcript .turn.character .who { color: var(--terra); }
.transcript .text {
  font-family: var(--serif); font-size: 16px; line-height: 1.6; color: var(--navy);
}
.transcript .turn.character .text { font-style: italic; }

/* Settings form */
.settings { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 22px 24px; }
.settings .row { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.settings .row label.check { font-size: 14px; color: var(--navy); display: flex; align-items: center; gap: 6px; }

/* Utility */
.muted { color: var(--navy-soft); }
.right { text-align: right; }
.row-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* Family code card */
.family-card {
  margin-top: 22px;
  background: linear-gradient(180deg, #fff 0%, var(--cream-hi) 100%);
  border: 1px solid var(--terra-soft);
  border-radius: 14px;
  padding: 22px 26px;
  display: flex; gap: 32px; flex-wrap: wrap;
  align-items: center; justify-content: space-between;
  box-shadow: 0 12px 28px -22px rgba(184, 114, 42, 0.25);
}
.fc-eyebrow {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--terra); margin-bottom: 6px;
}
.fc-url {
  font-family: var(--serif); font-size: 22px; font-weight: 600;
  color: var(--navy); letter-spacing: -0.01em;
}
.fc-host { color: var(--navy-soft); font-weight: 400; }
.fc-code { color: var(--terra); }
.fc-hint {
  margin-top: 6px; font-size: 13px; color: var(--navy-soft);
  font-family: var(--serif); font-style: italic;
}
.fc-link {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em;
  color: var(--navy-soft); text-decoration: none;
  border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 12px; background: #fff; display: inline-block;
}
.fc-link:hover { color: var(--terra); border-color: var(--terra); }

/* Hero stats row */
.hero-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  margin-top: 18px;
}
.hs-cell {
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 18px 18px 16px;
}
.hs-num {
  font-family: var(--serif); font-weight: 700; font-size: 38px;
  letter-spacing: -0.025em; color: var(--navy); line-height: 1;
}
.hs-num .hs-unit {
  font-size: 16px; margin-left: 6px; color: var(--navy-soft); font-weight: 500;
}
.hs-label {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
  color: var(--navy-soft); margin-top: 8px; text-transform: uppercase;
}

/* Email preferences — Tier 1 mandatory-channel callout (2026-05-11).
   Anchors the section in the safety-first promise before the parent
   starts toggling optional categories. Cream-hi card with a terra
   left-border so it reads as IMPORTANT but not alarming. Same visual
   register as the dashboard attention banner. */
.email-prefs-tier1-note {
  margin: 14px 0 0;
  padding: 12px 16px;
  background: var(--cream-hi, #FAF7EE);
  border: 1px solid var(--line, #D8D2C2);
  border-left: 3px solid var(--terra, #B8722A);
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--navy);
}
.email-prefs-tier1-note strong { color: var(--terra); }

/* Help-page standalone guardrails block (universal /help#guardrails
   target — 2026-05-11 migrated from per-kid Trust panel). Visible-
   on-arrival; not a <details> accordion. Sits above the safety FAQ
   accordions and gives the 5 hard guardrails room to breathe. */
.help-guardrails-card {
  margin: 18px 0 28px;
  padding: 22px 22px 18px;
  background: var(--cream-hi, #FAF7EE);
  border: 1px solid var(--line, #D8D2C2);
  border-radius: 14px;
}
.help-guardrails-card h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 22px;
  color: var(--navy);
}

/* Trust list */
.trust-list {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 10px;
}
.trust-list li {
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  padding: 14px 16px;
  display: flex; gap: 12px; align-items: flex-start;
  font-size: 14.5px; line-height: 1.5;
}
.trust-list .tl-lock {
  font-size: 14px; flex: 0 0 22px; padding-top: 1px;
}
.trust-list strong { color: var(--navy); }

/* Topic controls */
.preset-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.preset-label {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
  color: var(--navy-soft); text-transform: uppercase;
}
.preset-btn { padding: 8px 14px; font-size: 13px; }
.topic-row {
  padding: 14px 0; border-bottom: 1px dashed var(--line);
}
.topic-row:last-of-type { border-bottom: 0; }
.topic-label {
  font-family: var(--serif); font-weight: 600; font-size: 16px;
  color: var(--navy); margin-bottom: 4px;
}
.topic-desc {
  font-size: 13.5px; color: var(--navy-soft);
  line-height: 1.45; margin-bottom: 4px;
}
.topic-example {
  font-family: var(--serif); font-style: italic;
  font-size: 13px; color: var(--navy-soft);
  margin-bottom: 10px;
  padding-left: 10px; border-left: 2px solid var(--terra-soft);
}
.topic-options { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.topic-opt {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px;
  font-size: 13px; cursor: pointer; background: #fff;
  transition: all 0.12s;
}
.topic-opt input { display: none; }
.topic-opt:hover { border-color: var(--terra-soft); }
.topic-opt.selected {
  background: var(--terra); color: #fff; border-color: var(--terra);
}


/* ============ Conversations filter bar + cards ============ */
.filter-bar {
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 16px 18px; margin: 18px 0 16px;
  display: grid;
  /* 3 dropdowns + 1 actions cell — degrades cleanly via auto-fit */
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  align-items: end;
}
@media (max-width: 900px) { .filter-bar { grid-template-columns: repeat(2, 1fr); } }
.filter-cell { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.filter-cell label {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-soft, var(--navy-soft));
}
.filter-cell select,
.filter-cell input[type=date] {
  width: 100%; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 8px;
  background: #fff; color: var(--navy);
  font: inherit; font-size: 13px; font-family: var(--sans);
  min-width: 0;
}
.filter-cell select:focus, .filter-cell input[type=date]:focus {
  outline: 2px solid var(--terra-soft); border-color: var(--terra);
}
.filter-actions { flex-direction: row; align-items: center; gap: 12px; }
.filter-actions .btn { padding: 9px 16px; font-size: 13px; }
.filter-clear {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
  color: var(--navy-soft); text-decoration: underline; text-underline-offset: 3px;
}
.filter-clear:hover { color: var(--terra); }
.filter-summary {
  margin-bottom: 14px; padding: 10px 14px;
  background: var(--cream-hi); border: 1px solid var(--line); border-radius: 8px;
  font-family: var(--mono); font-size: 12px; color: var(--navy-soft);
  letter-spacing: 0.04em;
}
.filter-summary strong { color: var(--navy); }
.filter-summary a { color: var(--terra); text-decoration: none; margin-left: 8px; }

.convo-card {
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  padding: 16px 18px; margin-bottom: 12px;
}
.convo-card .cc-head { margin-bottom: 10px; }
.convo-card .cc-char {
  font-family: var(--serif); font-weight: 600; font-size: 16px;
  color: var(--navy);
}
.convo-card .cc-char .flagged {
  background: var(--error-bg); color: var(--error);
  font-family: var(--mono); font-size: 10px;
  padding: 2px 6px; border-radius: 4px;
  letter-spacing: 0.06em; margin-left: 6px;
}
.convo-card .cc-meta {
  font-size: 12px; color: var(--navy-soft); margin-top: 2px;
  font-family: var(--mono); letter-spacing: 0.04em;
}
.convo-card .cc-meta a { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; }
.convo-card .cc-meta a:hover { color: var(--terra); }
.convo-card .cc-body { padding: 8px 0; border-top: 1px dashed var(--line); }
.convo-card .cc-line {
  font-family: var(--serif); font-size: 14.5px; line-height: 1.5;
  margin-top: 6px; color: var(--navy);
}
.convo-card .cc-line.cc-line-char { color: var(--navy-mid); font-style: italic; }
.convo-card .cc-who {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--terra);
  margin-right: 8px;
}
.convo-card .cc-foot { margin-top: 8px; font-size: 12px; }
.convo-card .cc-foot a { color: var(--terra); text-decoration: none; }
.convo-card .cc-foot a:hover { text-decoration: underline; }
/* Curated learned_summary preview in list rows — replaces the raw
   first-message preview when available. Designed to read like a tiny
   "what happened" recap a parent could screenshot. */
.convo-card .cc-recap {
  padding: 8px 0;
  border-top: 1px dashed var(--line);
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.5;
  color: var(--navy);
}
.convo-card .cc-recap-ask {
  margin-top: 6px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  line-height: 1.45;
  color: var(--navy-soft);
}

/* ─── Recent sign-ins audit table (Settings → Privacy) ───── */
.login-fails-warning {
  background: var(--error-bg, #FBE9E7);
  border: 1px solid var(--error, #8B2E1F);
  color: var(--error, #8B2E1F);
  padding: 12px 16px; border-radius: 8px;
  font-size: 14px; line-height: 1.5;
  margin: 14px 0 16px;
}
.login-log-table {
  width: 100%; border-collapse: collapse;
  margin-top: 14px; margin-bottom: 22px;
  font-size: 13.5px;
}
.login-log-table th, .login-log-table td {
  padding: 8px 12px; text-align: left;
  border-bottom: 1px solid var(--line);
}
.login-log-table thead th {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--navy-soft);
  background: var(--cream-hi);
}
.login-log-table .row-fail td { color: var(--navy-soft); }
.login-log-table .mono {
  font-family: var(--mono); font-size: 12px; color: var(--navy-soft);
}

/* ─── Email verification banner (dashboard) ──────────── */
/* .verify-banner — Phase B brand-tone update 2026-05-10. Was a
   yellow card (#FFF6E5 background); dropped to cream-on-cream with
   terracotta left-border to extend the action-color signal vocabulary
   already in use for CTAs. The "Confirm your email" persistent
   surface is GONE (consolidated into the unified needs-review banner);
   this class now only fires for transient query-param redirects
   (verify=rate_limited / verify=send_failed). */
.verify-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--cream-hi, #FAF7EE);
  border: 1px solid var(--line, #D8D2C2);
  border-left: 3px solid var(--terra, #B8722A);
  border-radius: 10px;
  padding: 14px 18px;
  margin: 18px 0;
}
.verify-banner-text {
  font-size: 14px;
  color: var(--navy);
  flex: 1;
  min-width: 240px;
}
.verify-banner-text em {
  font-style: italic;
  color: var(--terra);
}
.verify-banner-btn {
  background: var(--terra);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 8px 18px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  cursor: pointer;
}
.verify-banner-btn:hover { background: var(--navy); }
.verify-banner-form { margin: 0; }
.verify-banner-success {
  background: #E5F4E5;
  border: 1px solid #5C8A6D;
  color: #2E5234;
  padding: 10px 16px;
  border-radius: 8px;
  margin: 18px 0;
  font-size: 14px;
}

/* ─── Verify-email landing page ───────────────────────── */
.verify-email-card {
  max-width: 480px;
  margin: 60px auto;
  padding: 36px 32px;
  background: var(--cream-hi);
  border: 1px solid var(--line);
  border-radius: 14px;
  text-align: center;
}
.verify-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.verify-eyebrow.ok { color: #5C8A6D; }
.verify-eyebrow.warn { color: var(--terra); }
.verify-email-card h1 {
  font-size: 26px;
  margin: 0 0 16px;
}
.verify-body {
  font-size: 15px;
  line-height: 1.55;
  color: var(--navy);
  margin: 0 0 24px;
}
.verify-body strong { color: var(--terra); }

/* ─── Sources footer (conversation detail page) ───────────────
   Per-character primary + secondary sources. Trust signal for
   parents/educators. Per-character only — per-statement citation
   is out of scope (not a planned build). */
.convo-sources {
  margin: 26px 0 18px;
  padding: 22px 24px;
  background: var(--cream-hi);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.convo-sources-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--navy-soft);
  margin-bottom: 6px;
}
.convo-sources-disclaimer {
  font-size: 12px;
  color: var(--navy-soft);
  font-style: italic;
  margin: 0 0 14px;
}
.convo-sources-row {
  display: flex;
  gap: 14px;
  align-items: baseline;
  margin-bottom: 8px;
}
.convo-sources-tier {
  flex-shrink: 0;
  width: 80px;
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--terra);
  padding-top: 3px;
}
.convo-sources-list {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--navy);
}
.convo-sources-list li {
  margin-bottom: 3px;
}
.convo-sources-year {
  color: var(--navy-soft);
  font-size: 12px;
}

@media (max-width: 600px) {
  h1 { font-size: 26px; }
  main { padding: 24px 0 40px; }
  .auth { margin: 24px auto; padding: 26px 22px; }
  .hero-stats { grid-template-columns: 1fr; }
  .family-card { padding: 18px 20px; gap: 18px; }
  .fc-url { font-size: 18px; }
}

/* ============================================================
   /welcome — DEAD CODE as of 2026-05-08 (M-landing-consolidation)
   /welcome template was deleted; helloyore.com is canonical surface.
   Classes below (.welcome, .w-hero, .w-promise, .w-cta, .carousel-card,
   .cast-cat-*, etc.) have ZERO live consumers in any template.
   Safe to bulk-delete in a future cleanup pass; left in place to
   avoid touching adjacent CSS during the launch sprint.
   ============================================================ */
.welcome {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 8px;
}

/* Hero ────────────────────────────────────────────────────── */
.w-hero {
  text-align: center;
  padding: 50px 0 70px;
  border-bottom: 1px solid var(--line);
}

.w-promise {
  font-family: var(--serif);
  font-size: 56px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 400;
  color: var(--navy);
  margin: 0 0 22px;
}
.w-promise em {
  font-style: italic;
  color: var(--terra);
}
@media (max-width: 720px) {
  .w-promise { font-size: 38px; }
}

.w-sub {
  font-size: 18px;
  color: var(--navy-soft);
  line-height: 1.55;
  max-width: 560px;
  margin: 0 auto 36px;
}

.w-cta {
  display: inline-block;
  background: var(--navy);
  color: var(--cream-hi);
  padding: 18px 38px;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: background 0.15s, transform 0.15s;
}
.w-cta:hover {
  background: var(--terra);
  color: var(--cream-hi);
  transform: translateY(-1px);
}
.w-fineprint {
  margin-top: 16px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navy-soft);
}
.w-fineprint-up { margin: 0 0 16px; }

/* Cast strip ──────────────────────────────────────────────── */
.w-cast {
  padding: 60px 0;
  text-align: center;
  border-bottom: 1px solid var(--line);
}
/* Carousel of all 17 characters ───────────────────────────── */
.cast-carousel {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  gap: 6px;
  margin-bottom: 28px;
}
.carousel-window {
  overflow: hidden;
}
.carousel-track {
  display: flex;
  gap: 18px;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.carousel-card {
  flex: 0 0 calc((100% - 36px) / 3); /* 3 visible at desktop, 18px gap × 2 */
  background: var(--cream-hi);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 18px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  position: relative;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.carousel-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background: var(--hue);
  opacity: 0.45;
  pointer-events: none;
}
.carousel-card > * { position: relative; z-index: 1; }
.carousel-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(31, 58, 95, 0.08);
}
.carousel-portrait {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid var(--accent);
  overflow: hidden;
  position: relative;
  padding: 8% 10% 5%;               /* 5% bottom-pad lifts each figure within the circle */
  isolation: isolate;               /* contain mix-blend-mode within the circle clip */
}
.carousel-portrait img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  mix-blend-mode: multiply;         /* white PNG bg disappears against white card */
  /* No drop-shadow — also escapes the circular clip, creating the same bleed */
}

/* When a card is playing audio, the circle border thickens + gently pulses
   — the only visual cue. No text overlay. */
.carousel-card.is-playing .carousel-portrait {
  border-width: 3px;
  animation: yore-pulse 1.6s ease-in-out infinite;
}
@keyframes yore-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(184, 114, 42, 0); }
  50%      { box-shadow: 0 0 0 6px rgba(184, 114, 42, 0.18); }
}
.carousel-meta {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.carousel-vibe {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--accent);
  font-weight: 500;
}
.carousel-name {
  font-family: var(--serif);
  font-size: 19px;
  color: var(--navy);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.carousel-years {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--navy-soft);
}
.carousel-arrow {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--cream-hi);
  color: var(--navy);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.carousel-arrow:hover {
  background: var(--terra);
  color: #fff;
  border-color: var(--terra);
}
@media (max-width: 900px) {
  .carousel-card { flex: 0 0 calc((100% - 18px) / 2); }
}

/* ── Cast organized by 10 categories (welcome page, 2026-05-01) ── */
.cast-categories {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-bottom: 28px;
  text-align: left;
}
.cast-cat-row {
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-top: 1px solid var(--line);
  padding-top: 22px;
}
.cast-cat-row:first-child {
  border-top: none;
  padding-top: 0;
}
.cast-cat-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}
.cast-cat-label {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 700;
  color: var(--navy);
  margin: 0;
  letter-spacing: -0.005em;
}
.cast-cat-subtitle {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14.5px;
  color: var(--navy-soft);
  margin: 0;
}
.cast-cat-cards {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  /* hide scrollbar visually but keep scroll behavior */
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
  padding-bottom: 6px;
  scroll-snap-type: x mandatory;
}
.cast-cat-cards::-webkit-scrollbar {
  height: 6px;
}
.cast-cat-cards::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 3px;
}
.cast-cat-cards .carousel-card {
  /* Inside category rows, each card is a fixed width (3 visible on
     desktop, 2 on tablet, 1 on phone). Scroll horizontally. */
  flex: 0 0 280px;
  scroll-snap-align: start;
  cursor: pointer;
}
.cast-cat-cards .carousel-card.is-soon {
  /* Coming-soon characters: dim opacity, still clickable for audio
     when implemented. Same treatment as the landing site. */
  opacity: 0.6;
}
.cast-cat-cards .carousel-card.is-soon .carousel-portrait img {
  filter: grayscale(0.18);
}
@media (max-width: 720px) {
  .cast-cat-cards .carousel-card { flex: 0 0 220px; }
  .cast-cat-label { font-size: 18px; }
  .cast-cat-subtitle { font-size: 13px; }
}
@media (max-width: 600px) {
  .cast-carousel { grid-template-columns: 32px 1fr 32px; }
  .carousel-card { flex: 0 0 100%; }
  .carousel-arrow { width: 32px; height: 32px; font-size: 18px; }
}

.w-cast-line {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  color: var(--navy-soft);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.6;
  text-align: center;
}

/* "Why so many?" — the why-the-cast-matters payoff under the carousel */
.w-why-many {
  max-width: 620px;
  margin: 26px auto 0;
  text-align: center;
}
.w-why-many-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terra);
  margin-bottom: 16px;
}
.w-why-many-lede {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.01em;
  margin: 0 0 16px;
  line-height: 1.25;
}
.w-why-many-body {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.6;
  color: var(--navy);
  margin: 0 0 14px;
}
.w-why-many-body em {
  font-style: italic;
  color: var(--terra);
}
.w-why-many-close {
  font-family: var(--serif);
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--navy-soft);
  margin: 0;
}
.w-why-many-close strong {
  color: var(--navy);
  font-weight: 700;
}

/* ============================================================
   /onboard — combined parent+kid signup form
   ============================================================ */
.auth.onboard {
  max-width: 520px;
}
.onboard-section {
  margin-bottom: 6px;
}
.onboard-section-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terra);
  margin-bottom: 14px;
  margin-top: 6px;
}
.onboard-subnote {
  font-size: 13.5px;
  color: var(--navy-soft);
  margin: -8px 0 14px;
  font-style: italic;
}
.onboard-divider {
  height: 1px;
  background: var(--line);
  margin: 22px 0 22px;
}
.field-hint {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--navy-soft);
  font-style: italic;
}
.onboard-submit {
  margin-top: 14px;
  width: 100%;
  font-size: 16px;
  padding: 14px 20px;
}
.onboard-next {
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--navy-soft);
  text-align: center;
}

/* Multi-kid blocks ─────────────────────────────────────────── */
.kid-block {
  background: var(--cream-hi);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px 18px 6px;
  margin-bottom: 12px;
  position: relative;
}
.kid-block-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.kid-block-label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy-soft);
}
.kid-remove {
  background: none;
  border: none;
  color: var(--navy-soft);
  font-size: 12px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
}
.kid-remove:hover {
  color: var(--error);
  background: var(--error-bg);
}
.kid-add {
  display: block;
  width: 100%;
  background: transparent;
  border: 1px dashed var(--line);
  color: var(--terra);
  padding: 12px;
  border-radius: 10px;
  font-family: var(--sans);
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  margin-bottom: 4px;
}
.kid-add:hover {
  background: var(--cream-hi);
  border-color: var(--terra);
  color: var(--terra);
}

/* Password peek toggle — Show/Hide button inside the password input */
.password-wrap {
  position: relative;
}
.password-wrap input {
  padding-right: 64px;   /* leave room for the button */
}
.password-peek {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 1px solid var(--line);
  color: var(--navy-soft);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.password-peek:hover {
  background: var(--cream-hi);
  color: var(--navy);
  border-color: var(--navy-soft);
}
.password-peek:focus-visible {
  outline: 2px solid var(--terra);
  outline-offset: 2px;
}

/* Global site footer (base.html) — Privacy · Terms · contact */
.site-foot {
  border-top: 1px solid var(--line);
  background: var(--cream-hi);
  margin-top: 60px;
}
.site-foot-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 22px 28px;
}
.site-foot-brand {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}
.site-foot-brand .wordmark {
  font-size: 16px;
  letter-spacing: 0.16em;
}
.site-foot-tag {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  color: var(--navy-soft);
}
.site-foot-nav {
  display: flex;
  gap: 22px;
  font-size: 13px;
}
.site-foot-nav a {
  color: var(--navy-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--line);
}
.site-foot-nav a:hover { color: var(--terra); text-decoration-color: var(--terra); }
@media (max-width: 600px) {
  .site-foot-inner { flex-direction: column; align-items: flex-start; padding: 20px 22px; }
  .site-foot-tag { font-size: 12.5px; }
  .site-foot-nav { gap: 16px; flex-wrap: wrap; }
}

/* COPPA consent rows (onboard + Settings → Privacy) ─────── */
.consent-row {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: start;
  padding: 12px 14px;
  margin-bottom: 8px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.consent-row:hover { border-color: var(--terra-soft); }
.consent-row input[type="checkbox"] {
  margin: 4px 0 0;
  width: 16px;
  height: 16px;
  accent-color: var(--terra);
  cursor: pointer;
}
.consent-text {
  font-size: 14px;
  line-height: 1.5;
  color: var(--navy);
}
.consent-text strong {
  display: block;
  font-family: var(--serif);
  font-weight: 700;
  margin-bottom: 2px;
}
.consent-text em {
  font-style: italic;
  color: var(--terra);
}
.consent-foot {
  margin-top: 14px;
  font-size: 13px;
  color: var(--navy-soft);
  line-height: 1.55;
}

/* COPPA band on /welcome ──────────────────────────────── */
.w-coppa-band {
  margin-top: 28px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--navy-soft);
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}
.w-coppa-tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  background: var(--terra);
  color: var(--cream-hi);
  padding: 3px 8px;
  border-radius: 4px;
  margin-right: 8px;
  vertical-align: 1px;
}
.w-coppa-band a {
  color: var(--terra);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* /privacy + /terms typography ────────────────────────── */
.legal {
  max-width: 720px;
  margin: 0 auto;
  padding-top: 20px;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--navy);
}
.legal-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terra);
  margin-bottom: 8px;
}
.legal h1 { margin-top: 4px; margin-bottom: 6px; font-size: 36px; }
.legal h2 { margin: 30px 0 10px; font-size: 22px; color: var(--navy); }
.legal h3 { margin: 20px 0 6px; font-size: 16px; color: var(--navy-soft); font-family: var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }
.legal-meta { color: var(--navy-soft); font-style: italic; font-size: 13.5px; margin-top: 0; }
.legal-lede { font-size: 17px; line-height: 1.6; margin: 18px 0 22px; }
.legal ul, .legal ol { padding-left: 22px; }
.legal li { margin-bottom: 6px; }
.legal-table {
  width: 100%; border-collapse: collapse; margin: 14px 0;
  font-size: 13.5px;
}
.legal-table th, .legal-table td {
  padding: 8px 12px; text-align: left;
  border-bottom: 1px solid var(--line);
}
.legal-table th {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy-soft);
  background: var(--cream-hi);
}
.legal-foot { margin: 40px 0 12px; }
.legal-foot a { color: var(--terra); }

/* /help — FAQ disclosures. Click to expand each question. */
.help-q {
  margin: 8px 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.help-q summary {
  cursor: pointer;
  list-style: none;
  padding: 12px 18px;
  font-family: var(--serif);
  font-size: 15.5px;
  font-weight: 600;
  color: var(--navy);
  display: flex; justify-content: space-between; align-items: center;
}
.help-q summary::-webkit-details-marker { display: none; }
.help-q summary::after {
  content: "+";
  font-family: var(--mono);
  font-size: 16px;
  color: var(--terra);
  font-weight: 400;
}
.help-q[open] summary::after { content: "−"; }
.help-q[open] summary { border-bottom: 1px solid var(--line); }
.help-a {
  padding: 14px 18px;
  font-family: var(--serif); font-size: 14.5px;
  line-height: 1.65; color: var(--navy);
}
.help-a code {
  font-family: var(--mono); font-size: 12.5px;
  background: var(--cream-hi); padding: 1px 6px; border-radius: 4px;
}

/* /press — quote callouts + facts table. */
.press-quote {
  border-left: 3px solid var(--terra);
  padding: 10px 18px;
  margin: 12px 0 22px;
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.6;
  color: var(--navy);
  background: var(--cream-hi);
}
.press-table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0 22px;
}
.press-table th, .press-table td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.press-table th {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--navy-soft); font-weight: 500;
  width: 160px;
}
.press-table td {
  font-family: var(--serif); font-size: 14.5px; color: var(--navy);
}

/* Onboarding tutorial banner — first-time parents only. Sticky at top
   of dashboard until dismissed via "Got it ✕". */
.onboarding-banner {
  background: var(--cream-hi);
  border: 1px solid var(--terra);
  border-radius: 12px;
  padding: 18px 22px;
  margin: 24px 0 24px;
}
.ob-eyebrow {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
  color: var(--terra); text-transform: uppercase; margin-bottom: 8px;
}
.ob-steps {
  margin: 0 0 14px; padding-left: 22px;
  font-family: var(--serif); font-size: 14.5px; line-height: 1.6;
  color: var(--navy);
}
.ob-steps li { margin-bottom: 6px; }
.ob-foot {
  font-size: 13px; color: var(--navy-soft);
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 10px;
}
.ob-dismiss {
  background: transparent; border: 1px solid var(--line);
  color: var(--navy-soft); padding: 4px 12px; border-radius: 999px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; cursor: pointer;
}
.ob-dismiss:hover { color: var(--terra); border-color: var(--terra); }

/* New welcome-banner copy (replaces the static 3-step list) */
.ob-lede {
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.55;
  color: var(--navy);
  margin: 0 0 14px;
}
.ob-actions {
  display: flex; gap: 14px; align-items: center;
  margin-bottom: 14px;
}
.ob-tour-start {
  background: var(--terra);
  border: none;
  color: #fff;
  padding: 10px 22px;
  border-radius: 999px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  cursor: pointer;
  transition: background .15s, transform .12s;
}
.ob-tour-start:hover {
  background: var(--terra-soft);
  color: var(--navy);
  transform: translateY(-1px);
}
.ob-or {
  font-size: 13px;
  color: var(--navy-soft);
  font-style: italic;
}

/* ─── Walkthrough overlay ───────────────────────────────────
   Full-screen dim with a transparent spotlight cutout over the
   target element + a card explaining the step. Built without
   any tour library — pure CSS box-shadow trick for the dim. */
#onboarding-tour {
  position: fixed; inset: 0; z-index: 9999;
  pointer-events: auto;
}
#onboarding-tour-spotlight {
  position: absolute;
  border-radius: 8px;
  /* The huge box-shadow IS the dim — it fills the whole viewport
     with a dark overlay everywhere EXCEPT inside the spotlight
     rectangle. Single element, no extra DOM. */
  box-shadow: 0 0 0 9999px rgba(15, 30, 50, 0.62);
  outline: 3px solid var(--terra);
  outline-offset: 2px;
  pointer-events: none;
  transition: top .35s ease, left .35s ease,
              width .35s ease, height .35s ease;
}
#onboarding-tour-tooltip {
  position: absolute;
  width: 360px; max-width: calc(100% - 32px);
  background: #fff;
  border: 1px solid var(--terra);
  border-radius: 12px;
  padding: 18px 22px;
  box-shadow: 0 12px 28px rgba(15, 30, 50, 0.25);
  transition: top .35s ease, left .35s ease;
}
.ob-tour-step-num {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terra);
  margin-bottom: 10px;
}
.ob-tour-title {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 8px;
}
.ob-tour-text {
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.55;
  color: var(--navy);
  margin: 0 0 16px;
}
.ob-tour-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.ob-tour-skip {
  background: transparent;
  border: none;
  color: var(--navy-soft);
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  font-family: inherit;
}
.ob-tour-skip:hover { color: var(--terra); }
.ob-tour-next {
  background: var(--navy);
  color: #fff;
  border: none;
  padding: 8px 18px;
  border-radius: 999px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  cursor: pointer;
}
.ob-tour-next:hover { background: var(--navy-mid); }

/* Cookie consent banner (EU/UK only). Fixed bottom-right, dismissable. */
.cookie-banner {
  position: fixed;
  bottom: 18px; right: 18px;
  max-width: 380px;
  background: var(--navy); color: var(--cream-hi);
  padding: 14px 18px; border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.20);
  font-size: 13px; line-height: 1.5;
  z-index: 1000;
  display: flex; gap: 14px; align-items: center;
}
/* M-cookie-banner-dismiss (2026-05-26): the JS dismiss handler sets
   banner.hidden = true. The browser default [hidden] { display: none }
   has the same specificity as `.cookie-banner` above, so source-order
   wins → the `display: flex` kept the banner visible even after click.
   Explicit `[hidden]` selector (specificity 0,2,0 vs 0,1,0) wins
   unambiguously, so clicking OK actually dismisses the banner. */
.cookie-banner[hidden] { display: none; }
.cookie-banner-text { flex: 1; }
.cookie-banner-text a { color: var(--terra); text-decoration: underline; }
.cookie-banner-btn {
  background: var(--terra); color: var(--cream-hi);
  border: none; padding: 6px 14px; border-radius: 999px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; cursor: pointer; flex-shrink: 0;
}
.cookie-banner-btn:hover { background: #fff; color: var(--navy); }

/* Legacy single-line usage indicator (kept for any pages that still use
   it). Superseded on dashboard by .cap-widget below. */
.usage-line {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: 12px;
  color: var(--navy-soft);
  margin: 14px 0 10px;
  flex-wrap: wrap;
}
.usage-line strong { color: var(--navy); font-weight: 600; }
.usage-bar {
  display: inline-block;
  width: 120px; height: 4px;
  background: rgba(20, 30, 50, 0.08);
  border-radius: 2px;
  overflow: hidden;
}
.usage-bar-fill {
  display: block; height: 100%;
  background: var(--terra);
  transition: width 0.3s;
}
.usage-warn { color: var(--terra); font-style: italic; }

/* ─── Cap widget (M-cap Option B) ───────────────────────────────
   Subtle card showing today's family time + per-kid breakdown.
   Calm + informational — not gamified or engagement-promoting.
   Cap-reached state uses the brand's terra/error tone without
   alarming the parent (the cap is a feature, not a problem). */
.cap-widget {
  margin: 18px 0 22px;
  padding: 14px 18px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.5);
  /* Constrain width on large screens — pre-2026-05-04 the widget
     stretched the full container, leaving the bars as huge horizontal
     slabs and pushing label↔value far apart. 720px is comfortable
     reading width, matches the Share Yore disclosure body. */
  max-width: 720px;
}
.cap-widget-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 10px;
  font-size: 12px;
  letter-spacing: 0.04em;
}
.cap-widget-title {
  font-family: var(--mono);
  text-transform: uppercase;
  color: var(--navy-soft);
}
.cap-widget-reset {
  font-style: italic;
  color: var(--navy-soft);
}
.cap-row {
  /* Tightened grid — label fixed-width, bar takes the middle, value
     fixed-width-ish so the columns align across rows regardless of
     name length. Pre-2026-05-04 the bar was `1fr` between a 90px
     label and `auto` value, which let the bar grow huge on wide
     screens and the value drift right. */
  display: grid;
  grid-template-columns: 110px minmax(160px, 320px) auto;
  gap: 14px;
  align-items: center;
  padding: 5px 0;
  font-size: 13px;
  font-family: var(--mono);
  color: var(--navy);
}
.cap-row-family {
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
  padding-bottom: 10px;
  font-weight: 600;
}
.cap-row-label {
  font-family: var(--serif);
  font-size: 14px;
  font-style: italic;
  color: var(--navy);
}
.cap-bar {
  display: block;
  height: 6px;
  background: rgba(20, 30, 50, 0.08);
  border-radius: 3px;
  overflow: hidden;
}
.cap-bar-fill {
  display: block; height: 100%;
  background: var(--terra);
  transition: width 0.3s;
}
.cap-row-stat {
  text-align: right;
  white-space: nowrap;
  color: var(--navy-soft);
}
.cap-row-stat strong {
  color: var(--navy);
  font-weight: 600;
}
.cap-row-tag {
  font-style: italic;
  color: var(--terra);
}
.cap-row-hit .cap-bar-fill {
  background: #C7474B;  /* matches design/tokens.css --error */
}
.cap-row-hit .cap-row-tag {
  color: #C7474B;
  font-weight: 600;
}
@media (max-width: 540px) {
  .cap-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .cap-row-stat {
    text-align: left;
  }
  .cap-bar {
    width: 100%;
  }
}

/* Week + month minute totals — text only, no bars (the cap doesn't
   apply to week/month, so a bar would suggest a non-existent limit).
   Sits below the today bars inside the cap widget; quieter type
   treatment so it reads as supplementary trend data. */
.cap-trend {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cap-trend-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: 12.5px;
  font-family: var(--mono);
  color: var(--navy-soft);
}
.cap-trend-label {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 11px;
  flex-shrink: 0;
  min-width: 84px;
}
.cap-trend-stat {
  font-style: italic;
  color: var(--navy-soft);
}
.cap-trend-stat strong {
  color: var(--navy);
  font-weight: 600;
  font-style: normal;
}
@media (max-width: 540px) {
  .cap-trend-row {
    flex-direction: column;
    gap: 2px;
  }
  .cap-trend-label {
    min-width: 0;
  }
}

/* Safety flags banner — persistent dashboard alert for any flagged
   conversation in the last 30 days that the parent hasn't marked
   reviewed. Sits at the very top of the dashboard, won't dismiss
   until each item is reviewed. Color tier matches the highest
   pending severity in the list. */
.safety-flags-banner {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 18px;
  align-items: start;
  background: #ffe8d6;
  border: 2px solid #c14a3c;
  border-radius: 14px;
  padding: 22px 26px;
  margin: 28px 0 20px;
  box-shadow: 0 4px 14px rgba(193, 74, 60, 0.10);
}
.sfb-icon {
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  background: #c14a3c; color: #fff;
  border-radius: 50%;
  font-size: 26px;
}
.sfb-headline {
  font-family: var(--serif); font-size: 18px; font-weight: 700;
  color: var(--navy); margin-bottom: 4px;
}
.sfb-headline strong { color: #c14a3c; }
.sfb-sub {
  font-size: 13.5px; color: var(--navy-soft); line-height: 1.55;
  margin-bottom: 14px;
}
.sfb-list { list-style: none; padding: 0; margin: 0; }
.sfb-item {
  border-top: 1px solid rgba(193, 74, 60, 0.22);
}
.sfb-link {
  display: grid;
  grid-template-columns: 60px 100px 1fr auto;
  gap: 14px;
  align-items: baseline;
  padding: 10px 0;
  text-decoration: none;
  color: inherit;
  transition: background 0.12s;
}
.sfb-link:hover { background: rgba(193, 74, 60, 0.05); }
.sfb-when {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em;
  color: var(--navy-soft);
}
.sfb-kid {
  font-family: var(--serif); font-weight: 600;
  color: var(--navy); font-size: 14.5px;
}
.sfb-reason {
  font-family: var(--serif); font-style: italic; font-size: 13.5px;
  color: var(--navy);
}
.sfb-arrow {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
  color: #c14a3c; text-transform: uppercase; font-weight: 600;
}
.sfb-link:hover .sfb-arrow { color: var(--navy); }

/* Severity-tinted left edge per item — sev-0 is darkest red. */
.sfb-item.sev-0 .sfb-link { border-left: 3px solid #c14a3c; padding-left: 10px; }
.sfb-item.sev-1 .sfb-link { border-left: 3px solid #d6824a; padding-left: 10px; }
.sfb-item.sev-2 .sfb-link { border-left: 3px solid var(--terra); padding-left: 10px; }
.sfb-item.sev-3 .sfb-link,
.sfb-item.sev-4 .sfb-link { border-left: 3px solid var(--navy-soft); padding-left: 10px; }

/* "Mark as reviewed" block on conversation detail page. */
.convo-review-block {
  margin: 18px 0 26px;
  padding: 14px 18px;
  background: #ffe8d6;
  border: 1px solid #c14a3c;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.convo-review-block.reviewed {
  background: #E8F4E8;
  border-color: #5A8A5A;
  color: #2E5C2E;
}
.convo-review-text {
  font-size: 14px; line-height: 1.5; color: var(--navy);
  flex: 1; min-width: 200px;
}
.convo-review-text strong { color: var(--navy); }
.convo-review-block form { margin: 0; }

/* Parent-facing crisis-resource block on conversation detail page.
   Surfaces when a convo is flagged for self_harm_signal /
   emotional_distress (see apps/parent-app/flag_labels.py). Visual
   weight is calmer than the .convo-review-block alarm tone — this
   is information the parent benefits from regardless of whether
   they've already reviewed; it should feel like resource, not
   alert. Soft warm background, subtle navy accent border. */
.convo-crisis-block {
  margin: 18px 0 26px;
  padding: 16px 20px;
  background: #fef6e9;
  border-left: 4px solid var(--terra, #B8722A);
  border-radius: 6px;
  color: var(--navy);
}
.convo-crisis-heading {
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 8px;
  color: var(--navy);
}
.convo-crisis-list {
  margin: 0;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.6;
}
.convo-crisis-list li { margin-bottom: 4px; }
.convo-crisis-list li:last-child { margin-bottom: 0; }

/* ─── End-of-session card (parent dashboard view) ───────────
   Mirror of what the kid saw at the end of the conversation.
   Cream-leaning, framed, distinguished from the transcript. */
.convo-recap-card {
  background: var(--cream-hi);
  border: 1px solid var(--terra);
  border-radius: 12px;
  padding: 22px 26px;
  margin: 18px 0 24px;
}
.convo-recap-card-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--terra);
  margin-bottom: 8px;
}
.convo-recap-card-body {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.55;
  color: var(--navy);
  margin: 0;
}
.convo-recap-card-divider {
  width: 50px; height: 1px;
  background: var(--terra); opacity: 0.35;
  margin: 18px 0;
}
.convo-recap-card-ask {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  line-height: 1.5;
  color: var(--navy-soft);
  margin: 0;
}

/* ─── Dashboard most-recent-recap card (2026-05-05) ───────────
   Shares the visual vocabulary of .convo-recap-card but adapted
   for the dashboard rhythm: tighter padding, smaller body type,
   inline "View conversation →" link in the head. #}
*/
.dash-recap-card {
  background: var(--cream-hi);
  border: 1px solid var(--terra);
  border-radius: 12px;
  padding: 18px 22px;
  margin: 24px 0;
}
.dash-recap-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
/* Inline date stamp inside .dash-recap-eyebrow — 2026-05-11. Anchors
   the LLM-narrated recap to when it actually happened so a parent
   viewing the dashboard days after a conversation doesn't read "Today"
   as today. Quieter than the eyebrow itself — same mono/caps register,
   navy-soft instead of terra. */
.dash-recap-eyebrow-date {
  color: var(--navy-soft, #5A6B80);
  margin-left: 4px;
  font-weight: 400;
}
.dash-recap-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--terra);
}
.dash-recap-eyebrow-sm {
  font-family: var(--mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--terra);
  margin-bottom: 6px;
  opacity: 0.8;
}
.dash-recap-link {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--navy-soft);
  text-decoration: none;
}
.dash-recap-link:hover { color: var(--terra); }
.dash-recap-body {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.55;
  color: var(--navy);
  margin: 0;
}
.dash-recap-divider {
  width: 50px; height: 1px;
  background: var(--terra); opacity: 0.35;
  margin: 14px 0;
}
.dash-recap-ask {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  line-height: 1.5;
  color: var(--navy-soft);
  margin: 0;
}

/* ─── Lincoln's Letter card ───────────────────────────────────
   Designed to feel like a hand-written note (paper, soft border,
   serif italic body) — distinct from the structured "What I
   Learned" recap card. Screenshot-worthy on purpose: this is the
   parent-to-parent virality artifact. */
.convo-letter-card {
  background: #FBF7EB;
  border: 1px solid #E0D5B4;
  border-radius: 4px;
  padding: 28px 32px;
  margin: 18px 0 24px;
  position: relative;
  /* subtle paper texture via box-shadow + slight rotation feel */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06),
              0 0 0 1px rgba(232, 201, 160, 0.4);
}
.convo-letter-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--terra);
  margin-bottom: 14px;
}
.convo-letter-body {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--navy);
  margin: 0;
  /* preserve newlines + sign-offs from the model */
  white-space: pre-wrap;
}
/* Parent-aimed footer note inside the letter card. Reframes the
   letter as a kid-keepsake artifact. Quiet treatment so it doesn't
   compete with the letter body. */
.convo-letter-footer {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--navy-soft);
  margin: 16px 0 0;
  padding-top: 12px;
  border-top: 1px dashed rgba(0, 0, 0, 0.08);
  font-style: normal;
}

/* COPPA hard-gate banner — appears at the top of the dashboard for any
   under-13 kid whose parent has not yet clicked Confirm. Persistent
   (no dismiss) and visually loud — the kid can't sign in until acted
   upon, so this is the most important thing on the page. */
.coppa-gate-banner {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 18px;
  align-items: start;
  background: #FFE3CC;
  border: 2px solid var(--terra);
  border-radius: 14px;
  padding: 22px 26px;
  margin: 28px 0 32px;
  box-shadow: 0 4px 14px rgba(184, 114, 42, 0.12);
}
.coppa-gate-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--terra);
  color: var(--cream-hi);
  border-radius: 50%;
  font-size: 26px;
  line-height: 1;
}
.coppa-gate-text {
  font-size: 15px;
  line-height: 1.55;
  color: var(--navy);
}
.coppa-gate-text strong {
  display: block;
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--navy);
}
.coppa-gate-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}
.coppa-gate-btn {
  display: inline-flex;
  align-items: center;
  background: var(--terra) !important;
  color: var(--cream-hi) !important;
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 500;
  text-decoration: none !important;
  transition: background 0.15s, transform 0.15s;
}
.coppa-gate-btn:hover {
  background: var(--navy) !important;
  color: var(--cream-hi) !important;
  transform: translateY(-1px);
}

/* ───────────────────────────────────────────────────────────────
   Dashboard — designed by claude.ai/design (Dashboard Critique.html).
   One layout, two states (setup / live). Kid rows replace the old
   launch-tile / activity-card duplication. Share-Yore card collapses
   into a header disclosure once setup is past.
   ─────────────────────────────────────────────────────────────── */
.dash-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin: 8px 0 0;
}
.dash-greet-h1 {
  font-family: var(--serif);
  font-size: 44px;
  line-height: 1.05;
  font-weight: 700;
  color: var(--navy);
  margin: 0;
}

/* "Share Yore" disclosure — header-anchored popover. Open by default
   in setup mode (URL needs to be findable); collapsed in live mode. */
.share-disclosure { position: relative; }
.share-disclosure summary {
  list-style: none;
  cursor: pointer;
  background: transparent;
  color: var(--navy);
  border: 1px solid var(--line);
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: border-color 0.15s, background 0.15s;
}
.share-disclosure summary::-webkit-details-marker { display: none; }
.share-disclosure summary::after {
  content: "▾";
  font-size: 10px;
  opacity: 0.7;
}
.share-disclosure[open] summary {
  background: var(--cream-hi);
  border-color: var(--terra);
}
.share-disclosure[open] summary::after { content: "▴"; }
.share-disclosure-body {
  margin-top: 14px;
  background: var(--cream-hi);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 20px;
  width: 100%;
  max-width: 720px;
}
/* Live-mode popover positioning — opening the disclosure floats the
   share card OVER the dashboard content below instead of pushing it
   down. Avoids the "everything below the Share Yore button shifts"
   report from 2026-05-04. In setup-mode the disclosure is rendered
   without this class so the body stays inline (nothing below to
   push, and inline layout reads better as a welcome step). */
.share-disclosure--popover .share-disclosure-body {
  position: absolute;
  top: calc(100% + 8px);
  /* The Share Yore button is right-aligned in the dash-header.
     Anchor the popover to the RIGHT so it extends leftward from
     the button instead of off-screen (founder bug 2026-05-11). */
  right: 0;
  left: auto;
  z-index: 50;
  margin-top: 0;
  /* Without a min-width, the popover falls into its <details>'s
     summary width (~120px) and the URL renders character-by-
     character. */
  min-width: 480px;
  max-width: 90vw;
  box-shadow: 0 8px 24px rgba(31, 58, 95, 0.10);
}
.share-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terra);
  margin-bottom: 10px;
}
.share-line {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 14px;
}
.share-url {
  font-size: 15px;
  color: var(--navy);
  /* Single-line URL with horizontal scroll if needed — prevents the
     character-by-character vertical wrap when the URL has no whitespace.
     min-width: 0 lets the grid child actually shrink. */
  min-width: 0;
  white-space: nowrap;
  overflow-x: auto;
}
.share-note {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13.5px;
  color: var(--navy-soft);
  margin: 10px 0 0;
}

/* Sub-line under greeting — editorial copy in setup, stats in live. */
.dash-subline {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16.5px;
  color: var(--navy-soft);
  margin: 14px 0 28px;
  padding-bottom: 22px;
  border-bottom: 2px solid var(--line);
}
.dash-subline strong {
  color: var(--navy);
  font-style: normal;
  font-weight: 600;
}

/* Kid rows — the unified primitive. Ruled bands on cream, no fill.
   The whole row links to /kids/{id}; the inner CTA stops propagation
   and launches Yore in a new tab. Nested anchors are normally
   invalid HTML, but it works in practice and we get one big tap
   target per kid. */
.kid-row-list {
  border-top: 1px solid var(--line);
}

/* Each row is a 2-column grid: link on the left (flexes to fill),
   CTA pill on the right (sized to content). Grid auto for the right
   column guarantees the button is content-width — flex was letting
   it stretch under some browsers. */
.kid-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 18px 4px;
  border-bottom: 1px solid var(--line);
  transition: background 0.15s;
}
.kid-row:hover { background: rgba(20, 30, 50, 0.025); }

.kid-row-link {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  min-width: 0;
  color: inherit;
  text-decoration: none !important;
}
.kid-row-link:hover { text-decoration: none !important; }
.kid-row-name {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.1;
}
.kid-row-link:hover .kid-row-name { color: var(--terra); }
.kid-row-meta {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--navy-soft);
}

.kid-row-cta {
  display: inline-flex;
  align-items: center;
  width: max-content;
  background: var(--navy);
  color: var(--cream-hi) !important;
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background 0.15s, transform 0.15s;
}
.kid-row-cta:hover {
  background: var(--terra);
  color: var(--cream-hi) !important;
  transform: translateY(-1px);
}

/* "+ Add another kid" — same height as kid rows, ghosted, no underline. */
.kid-row-add {
  display: block;
  text-align: center;
  text-decoration: none !important;
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  color: var(--navy-soft);
  padding: 18px 4px;
  border-bottom: 1px solid var(--line);
  transition: background 0.15s, color 0.15s;
}
.kid-row-add:hover {
  color: var(--terra);
  background: rgba(184, 114, 42, 0.04);
  text-decoration: none !important;
}

@media (max-width: 600px) {
  .kid-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .kid-row-cta { justify-self: flex-start; }
  .dash-greet-h1 { font-size: 34px; }
}

/* Recent conversations — live-mode only. One-line entries below the
   kid rows. Same density as the editorial wireframe. */
.recent-convos { margin-top: 36px; }
.recent-convos-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
}
.recent-convos-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terra);
}
.recent-convos-window {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--navy-soft);
  margin-left: 6px;
}
.recent-convos-viewall {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--terra);
  text-decoration: none;
}
.recent-convos-viewall:hover { text-decoration: underline; }
.recent-convos-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.recent-convos-list li { border-bottom: 1px solid var(--line); }
.recent-convos-list a {
  display: grid;
  grid-template-columns: 60px 80px 110px 1fr 16px;
  gap: 14px;
  align-items: baseline;
  padding: 12px 4px;
  text-decoration: none;
  color: inherit;
  transition: background 0.15s;
}
.recent-convos-list a:hover { background: rgba(20, 30, 50, 0.025); }
.recent-convos-list .rc-date {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--navy-soft);
  text-transform: uppercase;
}
.recent-convos-list .rc-kid {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--navy);
}
.recent-convos-list .rc-char {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--terra);
}
.recent-convos-list .rc-snippet {
  font-family: var(--serif);
  font-size: 14px;
  color: var(--navy-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.recent-convos-list .rc-arrow {
  font-size: 14px;
  color: var(--navy-soft);
  text-align: right;
}
@media (max-width: 720px) {
  .recent-convos-list a {
    grid-template-columns: auto auto 1fr 14px;
  }
  .recent-convos-list .rc-snippet { display: none; }
}

/* ───────────────────────────────────────────────────────────────
   Layout B — Kid detail editorial header + Activity/Settings tabs.
   Designed by claude.ai/design (Wireframes.html).
   Header carries identity, primary CTA, sign-in disclosure, and a
   one-line stat summary that replaces the empty 3-card stat row.
   ─────────────────────────────────────────────────────────────── */
.kid-header {
  margin: 8px 0 0;
  padding-bottom: 22px;
  border-bottom: 2px solid var(--line);
}
.kid-header-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.kid-header-name {
  font-family: var(--serif);
  font-size: 56px;
  line-height: 1;
  font-weight: 700;
  margin: 0;
  color: var(--navy);
  display: flex;
  align-items: baseline;
  gap: 18px;
  flex-wrap: wrap;
}
.kid-header-age {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy-soft);
  font-weight: 500;
}
.kid-header-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.kid-header-cta {
  background: var(--terra);
  color: var(--cream-hi);
  border: none;
  padding: 11px 22px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: background 0.15s, transform 0.15s;
}
.kid-header-cta:hover {
  background: var(--navy);
  color: var(--cream-hi);
  transform: translateY(-1px);
}
.kid-header-summary {
  margin: 16px 0 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 16.5px;
  color: var(--navy-soft);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.kid-header-summary strong {
  color: var(--navy);
  font-style: normal;
  font-weight: 600;
}
.kid-header-edits {
  font-style: normal;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--navy-soft);
}
.kid-header-edits a {
  color: var(--terra);
  text-decoration: none;
}
.kid-header-edits a:hover { text-decoration: underline; }

/* Name + edit-link vertical stack — 2026-05-11. "Edit name or age"
   moved out of the summary line to sit directly under the H1, so the
   edit affordance is visually anchored to the data it edits. The
   stack is the left-side flex child of .kid-header-row; the Open Yore
   CTA group stays on the right. */
.kid-header-name-stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}
.kid-header-edit-name {
  margin: 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--navy-soft);
}
.kid-header-edit-name a {
  color: var(--terra);
  text-decoration: none;
}
.kid-header-edit-name a:hover { text-decoration: underline; }

/* Sign-in disclosure — collapsed by default. <details>/<summary>
   gives us native expand without JS. Once expanded shows PIN +
   copy buttons. */
.signin-disclosure {
  position: relative;
}
.signin-disclosure summary {
  list-style: none;
  cursor: pointer;
  background: transparent;
  color: var(--navy);
  border: 1px solid var(--line);
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: border-color 0.15s, background 0.15s;
}
.signin-disclosure summary::-webkit-details-marker { display: none; }
.signin-disclosure summary::after {
  content: "▾";
  font-size: 10px;
  opacity: 0.7;
  margin-left: 2px;
}
.signin-disclosure[open] summary {
  background: var(--cream-hi);
  border-color: var(--terra);
}
.signin-disclosure[open] summary::after { content: "▴"; }
.signin-disclosure-body {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 5;
  width: min(560px, 92vw);
  background: var(--cream-hi);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow: 0 8px 24px rgba(20, 30, 50, 0.10);
}

/* Tab nav — Activity (default) / Settings. Mono eyebrow style with
   the active tab marked by a thick terra underline. */
.kid-tabs {
  display: flex;
  gap: 4px;
  margin: 18px 0 28px;
  border-bottom: 1px solid var(--line);
}
.kid-tab {
  background: transparent;
  border: none;
  padding: 12px 20px;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--navy-soft);
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
}
.kid-tab:hover { color: var(--navy); }
.kid-tab[aria-selected="true"] {
  color: var(--terra);
  border-bottom-color: var(--terra);
  font-weight: 700;
}
.kid-tab-panel { animation: kidTabFade 0.2s ease-out; }
@keyframes kidTabFade {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* The very first .section inside a tab panel doesn't need the heavy
   margin-top + border-top that .section gives by default — the tab
   nav is already a separator. */
.kid-tab-panel > .section:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

/* Mobile — collapse the header into a stack. */
@media (max-width: 720px) {
  .kid-header-name { font-size: 40px; }
  .kid-header-row { align-items: flex-start; flex-direction: column; }
  .kid-header-summary { flex-direction: column; gap: 4px; }
  .signin-disclosure-body { right: auto; left: 0; }
}

/* Conversation transcript — Delete-conversation block at the end.
   Soft delete with 30-day retention; the explainer copy spells out
   exactly what cascades and what stays on disk. Sits as a bordered
   panel below the transcript so it's discoverable but not above the
   fold (parent has to actually read the transcript to find it). */
.convo-delete-block {
  margin-top: 36px;
  padding: 20px 22px;
  background: var(--cream-hi);
  border: 1px solid var(--line);
  border-left: 4px solid var(--error);
  border-radius: 12px;
}
.convo-delete-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--navy-soft);
  margin-bottom: 8px;
}
.convo-delete-explainer {
  font-size: 14px;
  line-height: 1.55;
  color: var(--navy);
  margin: 0 0 14px;
}

/* "How retention & deletion work" disclosure inside Privacy & data.
   Quiet by default; opens to a structured list. The canonical
   explainer for what Yore keeps, deletes, and retains forever. */
.retention-explainer {
  margin: 12px 0 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0;
}
.retention-explainer summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 16px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--terra);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.retention-explainer summary::-webkit-details-marker { display: none; }
.retention-explainer summary::after { content: "▾"; opacity: 0.6; }
.retention-explainer[open] summary::after { content: "▴"; }
.retention-explainer[open] summary {
  border-bottom: 1px solid var(--line);
}
.retention-list {
  list-style: none;
  margin: 0;
  padding: 6px 18px 14px;
}
.retention-list li {
  font-family: var(--serif);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--navy);
  padding: 10px 0;
  border-bottom: 1px dashed var(--line);
}
.retention-list li:last-child { border-bottom: none; }
.retention-list strong {
  font-family: var(--serif);
  font-weight: 700;
  color: var(--navy);
}
.retention-list em { color: var(--navy-soft); }

/* "✓ Saved" flash next to the topics auto-save instruction line.
   Pops in for ~1.4s after each radio toggle so parents get an explicit
   "yes, that change persisted" signal. */
.topics-saved-flash {
  display: inline-block;
  margin-left: 10px;
  padding: 2px 10px;
  background: #E8F4E8;
  color: #2E5C2E;
  border: 1px solid #B5D6B5;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
  opacity: 0;
  transition: opacity 0.2s;
}
.topics-saved-flash.visible { opacity: 1; }

/* "✓ Confirmed [date]" badge next to the kid's privacy section header
   on /kids/{kid_id}. Reassures the parent that COPPA consent is on
   record so they don't worry the gate is going to lock them out. */
.privacy-confirm-badge {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: #E8F4E8;
  color: #2E5C2E;
  border: 1px solid #B5D6B5;
  padding: 4px 10px;
  border-radius: 999px;
  margin-left: 12px;
  font-weight: 500;
}

/* Settings → Privacy ───────────────────────────────────── */

/* COPPA review banner — appears when a kid's age is just edited from
   13+ down to <13. Names the kid and links straight to their card so
   the parent can re-confirm consents in one motion. */
.coppa-review-banner {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 14px;
  align-items: start;
  background: #FFF6E5;
  border: 1px solid #E5B85A;
  border-left: 4px solid var(--terra);
  border-radius: 10px;
  padding: 14px 18px;
  margin: 8px 0 22px;
}
.coppa-review-icon {
  font-size: 22px;
  line-height: 1;
  margin-top: 2px;
}
.coppa-review-text {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--navy);
}
.coppa-review-text strong { color: var(--navy); }
.coppa-review-link {
  display: inline-block;
  margin-top: 6px;
  color: var(--terra);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.privacy-kid-card {
  background: var(--cream-hi);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px 26px 20px;
  margin-bottom: 18px;
}
.privacy-kid-head { margin-bottom: 14px; }
.privacy-kid-name {
  margin: 0;
  font-size: 24px;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.privacy-kid-meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--terra);
  font-weight: 400;
}
.privacy-toggles { margin-bottom: 16px; }
.privacy-toggles .btn { margin-top: 10px; }
.privacy-kid-actions {
  padding-top: 14px;
  border-top: 1px dashed var(--line);
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.btn.ghost {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--navy);
}
.btn.ghost:hover { background: var(--cream); border-color: var(--navy-soft); }
.btn.ghost.danger { color: var(--error); border-color: var(--error); }
.btn.ghost.danger:hover { background: var(--error-bg); }
/* Destructive / danger-zone card (whole-family deletion). Red border +
   red headline signal "stop and read carefully." Used only for genuine
   destructive controls. */
.privacy-account-card {
  background: #fff;
  border: 1px solid var(--error);
  border-radius: 14px;
  padding: 22px 26px;
  margin-top: 32px;
}
.privacy-account-card h2 { color: var(--error); margin-top: 0; }

/* Neutral info / audit card. Same shape, no danger coloring — used for
   panels that AREN'T destructive (Family archive export, Recent sign-ins
   audit table). Surfaced 2026-05-09 — Anthony noticed Recent sign-ins
   was lumped under the same red-bordered card as Whole-family controls,
   making routine audit review look like a danger zone. */
.privacy-info-card {
  background: #fff;
  border: 1px solid var(--cream-lo);
  border-radius: 14px;
  padding: 22px 26px;
  margin-top: 32px;
}
.privacy-info-card h2 { color: var(--navy); margin-top: 0; }
.success-banner {
  background: #E8F4E8;
  border: 1px solid #5A8A5A;
  color: #2E5C2E;
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 18px;
  font-size: 14px;
}

/* Dismissible variant (kid.html PIN banner, 2026-05-11). Makes room
   for the X button + the multi-line body. The 1fr/auto grid keeps
   the X anchored top-right while the body fills the remaining width. */
.success-banner--dismissible {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  padding: 14px 16px;
}
.success-banner-body { display: flex; flex-direction: column; gap: 8px; }
.success-banner-meta {
  font-size: 13px;
  color: #3a5a3a;
  line-height: 1.5;
}
.success-banner-meta em {
  font-style: normal;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: #2E5C2E;
  background: rgba(255, 255, 255, 0.5);
  padding: 1px 6px;
  border-radius: 3px;
}
.success-banner-dismiss {
  align-self: start;
  background: transparent;
  border: none;
  font-size: 22px;
  line-height: 1;
  color: #5A8A5A;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: 500;
}
.success-banner-dismiss:hover {
  background: rgba(46, 92, 46, 0.1);
  color: #2E5C2E;
}

/* /forgot stub ─────────────────────────────────────────── */
.forgot-box {
  background: var(--cream-hi);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 22px 24px;
  margin: 18px 0 6px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--navy);
}
.forgot-box p { margin: 0 0 12px; }
.forgot-box p:last-child { margin: 0; }
.forgot-hint {
  color: var(--navy-soft);
  font-size: 13.5px;
  font-style: italic;
}
.alt-divider {
  display: inline-block;
  margin: 0 8px;
  color: var(--navy-soft);
}

/* ============================================================
   /ready — post-onboarding handoff page (single-kid + multi-kid)
   ============================================================ */
.ready {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  padding-top: 30px;
}
.ready-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terra);
  margin-bottom: 12px;
}
.ready-headline {
  font-family: var(--serif);
  font-size: 42px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin: 0 0 8px;
  font-weight: 400;
}
@media (max-width: 600px) { .ready-headline { font-size: 32px; } }
.ready-pickline {
  font-family: var(--serif);
  font-style: italic;
  color: var(--navy-soft);
  font-size: 16px;
  margin: 0 0 30px;
}

/* Kids picker grid (multi-kid + single-kid) ─────────────────── */
.ready-kids-grid {
  display: grid;
  gap: 18px;
  margin-bottom: 28px;
}
.ready-kids-grid.single { grid-template-columns: 1fr; max-width: 360px; margin-left: auto; margin-right: auto; }
.ready-kids-grid.multi  { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.ready-kid-card {
  background: var(--cream-hi);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 24px 20px 22px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.ready-kid-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(31, 58, 95, 0.10);
  border-color: var(--terra-soft);
}
.ready-kid-portrait {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--terra);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 36px;
  font-weight: 700;
  color: var(--terra);
}
.ready-kid-name {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.01em;
}
.ready-kid-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--navy);
  color: var(--cream-hi);
  padding: 12px 22px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.15s, transform 0.15s;
  margin-top: 4px;
}
.ready-kid-cta:hover {
  background: var(--terra);
  color: var(--cream-hi);
}
.ready-kid-arrow { transition: transform 0.15s; }
.ready-kid-cta:hover .ready-kid-arrow { transform: translateX(3px); }
.ready-kid-note {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--terra);
  margin-top: 2px;
}
.ready-kid-note.dim { color: var(--navy-soft); }
.ready-kid-note .mono { background: #fff; padding: 1px 6px; border-radius: 4px; border: 1px solid var(--line); }

/* "Try it yourself first" link ─────────────────────────────── */
.ready-preview {
  margin: 6px 0 36px;
  font-size: 13.5px;
  color: var(--navy-soft);
}
.ready-preview-link {
  font-family: var(--serif);
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--terra-soft);
}
.ready-preview-link:hover { color: var(--terra); text-decoration-color: var(--terra); }
.ready-preview-hint { font-style: italic; }

/* Bookmark these — flat row layout */
.ready-share {
  margin-top: 14px;
  background: var(--cream-hi);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px 26px 18px;
  text-align: left;
}
.ready-share-eyebrow {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--navy-soft);
  margin-bottom: 14px;
  text-align: center;
}
.ready-share-row {
  display: grid;
  grid-template-columns: 130px 1fr auto;
  gap: 12px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 8px;
}
@media (max-width: 600px) {
  .ready-share-row { grid-template-columns: 1fr; gap: 6px; }
}
.ready-share-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy-soft);
}
.ready-share-value {
  font-size: 14px;
  color: var(--navy);
  word-break: break-all;
  line-height: 1.4;
}
.ready-share-value.mono { font-family: var(--mono); }
.ready-share-value.pin-big {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--terra);
  word-break: normal;
}
.ready-copy {
  background: var(--navy);
  color: var(--cream-hi);
  border: none;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-family: var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s;
}
.ready-copy:hover { background: var(--terra); }
.ready-copy.copied { background: var(--terra); }
.ready-email {
  display: inline-block;
  margin-top: 6px;
  font-size: 13px;
  color: var(--navy-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ready-email:hover { color: var(--terra); }

.ready-foot {
  margin-top: 60px;
  padding-top: 36px;
  border-top: 1px solid var(--line);
}
.ready-dash-link {
  display: inline-block;
  font-family: var(--serif);
  font-size: 17px;
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--terra-soft);
}
.ready-dash-link:hover { color: var(--terra); text-decoration-color: var(--terra); }
.ready-explain {
  max-width: 480px;
  margin: 14px auto 0;
  font-size: 14px;
  color: var(--navy-soft);
  line-height: 1.55;
}

/* ============================================================
   Dashboard — promoted "How [Kid] signs in" hero
   ============================================================ */
.dash-greet { margin-bottom: 24px; }
.dash-greet h1 { margin: 4px 0 0; }

/* Milestone banner — appears above everything when a kid hits a moment */
.milestone-banner {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 18px;
  align-items: center;
  background: linear-gradient(135deg, #FFF7E8 0%, #FAF7EE 60%);
  border: 1px solid var(--terra-soft);
  border-left: 4px solid var(--terra);
  border-radius: 14px;
  padding: 18px 22px;
  margin-bottom: 24px;
  box-shadow: 0 2px 18px rgba(184, 114, 42, 0.08);
  animation: milestone-slide 0.4s ease-out;
}
@keyframes milestone-slide {
  from { transform: translateY(-6px); opacity: 0; }
  to   { transform: translateY(0);   opacity: 1; }
}
.milestone-icon {
  font-size: 36px;
  line-height: 1;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 50%;
  border: 1px solid var(--line);
}
.milestone-text {
  min-width: 0;
}
.milestone-headline {
  font-family: var(--serif);
  font-size: 17.5px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.005em;
  line-height: 1.3;
  margin-bottom: 4px;
}
.milestone-body {
  font-size: 14px;
  color: var(--navy-soft);
  line-height: 1.5;
}
.milestone-cta {
  display: inline-block;
  margin-left: 6px;
  color: var(--terra);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--terra-soft);
}
.milestone-cta:hover { text-decoration-color: var(--terra); }
.milestone-dismiss-form { margin: 0; }
.milestone-dismiss {
  background: transparent;
  border: 1px solid transparent;
  color: var(--navy-soft);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  padding: 0;
}
.milestone-dismiss:hover {
  background: var(--cream-hi);
  color: var(--navy);
  border-color: var(--line);
}
@media (max-width: 600px) {
  .milestone-banner {
    grid-template-columns: 44px 1fr auto;
    gap: 12px;
    padding: 14px 16px;
  }
  .milestone-icon { width: 44px; height: 44px; font-size: 28px; }
  .milestone-headline { font-size: 15.5px; }
}

.signin-hero {
  margin: 0 0 32px;
}
.signin-hero-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terra);
  margin-bottom: 14px;
}
/* Family-level URL block — sits above all kid cards. The URL is the
   same for every kid; only the PIN differs. Styled with a terra accent
   so it reads as "shared by everyone below" instead of getting lost. */
.signin-url-line {
  display: grid;
  grid-template-columns: 170px 1fr auto;
  gap: 14px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--terra);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 8px;
}
.signin-url-line .signin-value {
  font-size: 17px;
  font-weight: 500;
}
@media (max-width: 600px) {
  .signin-url-line { grid-template-columns: 1fr; gap: 8px; }
}
.signin-url-note {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--navy-soft);
  margin: 0 0 22px 4px;
}

/* Dashboard launch grid — slim per-kid tiles. PIN intentionally absent
   here; it's on /kids/{id} so it's not visible at every dashboard
   load (shoulder-surfing risk). Each tile is a card with the kid's
   name, a primary "Open Yore" CTA, and a secondary deep-link to the
   kid page where PIN + settings + memories live. */
.signin-launch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
  margin-top: 8px;
}
.signin-launch-tile {
  background: var(--cream-hi);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.signin-launch-name {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 700;
  color: var(--navy);
}
.signin-launch-cta {
  display: inline-flex;
  align-items: center;
  background: var(--navy);
  color: var(--cream-hi);
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 500;
  text-decoration: none;
  align-self: flex-start;
  transition: background 0.15s, transform 0.15s;
}
.signin-launch-cta:hover {
  background: var(--terra);
  color: var(--cream-hi);
  transform: translateY(-1px);
}
.signin-launch-detail {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13.5px;
  color: var(--navy-soft);
  text-decoration: none;
  border-top: 1px dashed var(--line);
  padding-top: 12px;
}
.signin-launch-detail:hover { color: var(--terra); }

.signin-card {
  background: var(--cream-hi);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px 24px 18px;
  margin-bottom: 14px;
}
.signin-card:last-child { margin-bottom: 0; }
.signin-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
}
.signin-name {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 700;
  color: var(--navy);
}
.signin-open {
  display: inline-flex;
  align-items: center;
  background: var(--navy);
  color: var(--cream-hi);
  padding: 11px 22px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.15s, transform 0.15s;
}
.signin-open:hover {
  background: var(--terra);
  color: var(--cream-hi);
  transform: translateY(-1px);
}
.signin-card-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}
.signin-line {
  display: grid;
  /* 2026-05-11: URL column was 1fr — caused the COPY URL button to
     drift to the far right with a big empty gap after the URL string
     (short URLs only filled ~half the column). Switched to auto so
     the URL chip hugs its content and the button sits next to it;
     any extra width sits at the right edge of the row instead of
     between the URL and the button. */
  grid-template-columns: 130px auto auto;
  justify-content: start;
  gap: 12px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 14px;
}
@media (max-width: 600px) {
  .signin-line {
    grid-template-columns: 1fr;
    justify-content: stretch;
    gap: 6px;
  }
}
.signin-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy-soft);
}
.signin-value {
  font-size: 14px;
  color: var(--navy);
  word-break: break-all;
  line-height: 1.4;
}
.signin-value.mono { font-family: var(--mono); }
.signin-value.signin-pin {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--terra);
  word-break: normal;
}
.signin-copy {
  background: var(--navy);
  color: var(--cream-hi);
  border: none;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-family: var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s;
  min-width: 50px;
  white-space: nowrap;
}
.signin-copy:hover { background: var(--terra); }
.signin-copy.copied { background: var(--terra); }

/* Two side-by-side copy buttons (Copy PIN + Copy URL + PIN) for the kid
   detail "How [name] signs in" card. The longer "URL + PIN" label
   needs more horizontal room than the basic single Copy chip allows. */
.signin-copy-stack {
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
}
.signin-copy-stack .signin-copy {
  padding: 6px 14px;
  text-align: center;
}
.signin-card-foot {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 13px;
}
.signin-email {
  color: var(--navy-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.signin-email:hover { color: var(--terra); }

/* "Copy URL + PIN for [name]" — a paste-ready snippet bundle button.
   Outlined-pill styling (cream/navy) — prominent enough to be the
   main share-with-myself CTA, but secondary to the navy "Open Yore"
   button in the card head. */
.signin-bundle {
  background: transparent;
  color: var(--navy);
  border: 1.5px solid var(--navy);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.signin-bundle:hover {
  background: var(--navy);
  color: var(--cream-hi);
}
.signin-bundle.copied {
  background: var(--terra);
  border-color: var(--terra);
  color: var(--cream-hi);
}
.signin-detail {
  color: var(--navy);
  text-decoration: none;
  font-family: var(--serif);
  font-style: italic;
}
.signin-detail:hover { color: var(--terra); }
.w-cast-hint {
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--terra);
  margin: -14px 0 40px;
}

/* WHY section ─────────────────────────────────────────────── */
.w-why {
  padding: 60px 0;
  border-bottom: 1px solid var(--line);
  text-align: center;
}
.w-why-body {
  max-width: 620px;
  margin: 0 auto;
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.6;
  color: var(--navy);
}
.w-why-body p {
  margin: 0 0 18px;
}
.w-why-body p:last-child { margin-bottom: 0; }
.w-why-body em {
  font-style: italic;
  color: var(--terra);
}

/* What your kid does ───────────────────────────────────────── */
.w-experience {
  padding: 60px 0;
  border-bottom: 1px solid var(--line);
}
.w-section-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terra);
  margin-bottom: 22px;
  text-align: center;
}
.w-experience-grid {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: 50px;
  align-items: center;
}
@media (max-width: 720px) {
  .w-experience-grid { grid-template-columns: 1fr; gap: 28px; }
}
.w-device {
  background: var(--cream-hi);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px;
}
.w-experience-lede {
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.5;
  color: var(--navy);
  margin: 0 0 26px;
}

.w-snippet {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 22px 24px;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
  user-select: none;
}
.w-snippet:hover {
  border-color: var(--terra-soft);
  box-shadow: 0 4px 18px rgba(184, 114, 42, 0.10);
  transform: translateY(-1px);
}
.w-snippet:focus-visible {
  outline: 2px solid var(--terra);
  outline-offset: 3px;
}
.w-snippet.is-playing {
  border-color: var(--terra);
  box-shadow: 0 4px 18px rgba(184, 114, 42, 0.18);
}
.w-snippet-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--navy-soft);
  margin-bottom: 14px;
}
.w-snippet-hint {
  color: var(--terra);
  font-style: normal;
  letter-spacing: 0.08em;
}
.w-snippet-line {
  transition: background 0.2s ease, opacity 0.2s ease;
  border-radius: 6px;
  padding: 8px;
  margin-left: -8px;
  margin-right: -8px;
}
.w-snippet.is-playing .w-snippet-line {
  opacity: 0.42;
}
.w-snippet.is-playing .w-snippet-line.is-playing {
  opacity: 1;
  background: var(--cream-hi);
}
.w-snippet-line {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 12px;
  margin-bottom: 4px;
  align-items: start;
}
.w-snippet-line:last-child { margin-bottom: 0; }
.w-who {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding-top: 3px;
}
.w-who-kid { color: var(--navy-soft); }
.w-who-char { color: var(--terra); }
.w-said {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--navy);
  line-height: 1.5;
}
@media (max-width: 600px) {
  .w-snippet-line { grid-template-columns: 1fr; gap: 4px; }
  .w-who { padding-top: 0; }
}

/* "Why this AI, not another?" — positioning block ─────────── */
.w-trust {
  padding: 60px 0;
  border-bottom: 1px solid var(--line);
}
.w-positioning-lede {
  text-align: center;
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.5;
  color: var(--navy);
  max-width: 580px;
  margin: -8px auto 32px;
}
.w-positioning-lede em {
  font-style: italic;
  color: var(--terra);
}
.w-trust-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 720px) {
  .w-trust-grid { grid-template-columns: 1fr; }
}
.w-trust-card {
  background: var(--cream-hi);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 22px 22px 26px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--navy);
}
.w-trust-card strong {
  display: block;
  margin: 6px 0 6px;
  font-family: var(--serif);
  font-size: 16.5px;
  font-weight: 700;
  color: var(--navy);
}
.w-trust-icon {
  font-size: 22px;
  line-height: 1;
}

/* Final CTA ───────────────────────────────────────────────── */
.w-final {
  text-align: center;
  padding: 60px 0 80px;
}
.w-final-foot {
  margin-top: 26px;
  font-size: 13px;
  color: var(--navy-soft);
}
.w-final-foot a {
  color: var(--navy-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.w-final-foot a:hover { color: var(--terra); }

/* ─── Parent-flag message report (M-parent-flag, L3.8) ────────
   Per-message ⚠ Report button visible on character messages only.
   Inline <details> disclosure -- no JS. Already-reported messages
   show a calm tag instead of the button. */
.msg-report-details {
  margin-top: 8px;
  font-size: 12px;
  font-family: var(--mono);
}
.msg-report-toggle {
  cursor: pointer;
  color: var(--navy-soft);
  list-style: none;
  user-select: none;
  letter-spacing: 0.04em;
}
.msg-report-toggle::-webkit-details-marker { display: none; }
.msg-report-toggle:hover { color: var(--terra); }
.msg-report-form {
  margin-top: 10px;
  padding: 12px 14px;
  background: rgba(199, 71, 75, 0.04);
  border: 1px solid rgba(199, 71, 75, 0.20);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.msg-report-label {
  font-family: var(--serif);
  font-size: 13px;
  font-style: italic;
  color: var(--navy);
}
.msg-report-form textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 13px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  resize: vertical;
}
.msg-report-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.msg-report-help {
  font-size: 11px;
  color: var(--navy-soft);
  font-style: italic;
}
.msg-reported-tag {
  margin-top: 8px;
  font-size: 11px;
  font-family: var(--mono);
  color: #C7474B;
  letter-spacing: 0.04em;
}
.turn.parent-reported {
  border-left: 3px solid #C7474B;
  padding-left: 12px;
}

/* Per-message system-flag badge (M-message-grain-flag, 2026-05-06).
   Visually similar to .msg-reported-tag (parent-reports) but uses
   the terra-orange brand accent to distinguish: parent reports use
   alarm-red (#C7474B), system flags use Yore's signature terra
   (var(--terra) #B8722A). Reviewed flags fade to muted navy. */
.msg-system-flag-tag {
  margin-top: 8px;
  font-size: 11px;
  font-family: var(--mono);
  color: var(--terra);
  letter-spacing: 0.04em;
}
.msg-system-flag-tag.reviewed {
  color: var(--navy-soft);
}
.turn.system-flagged {
  border-left: 3px solid var(--terra);
  padding-left: 12px;
}
/* When a message has BOTH parent-reported AND system-flagged, the
   parent-report border (alarm-red) wins — it's the more recent,
   more deliberate signal. The system-flag tag still renders below
   the message; the border just indicates "this is something a parent
   acted on." */
.turn.parent-reported.system-flagged {
  border-left: 3px solid #C7474B;
}
.error-banner {
  margin: 12px 0;
  padding: 10px 14px;
  background: rgba(199, 71, 75, 0.08);
  border: 1px solid rgba(199, 71, 75, 0.30);
  border-radius: 6px;
  color: #C7474B;
  font-family: var(--sans);
  font-size: 13px;
}

/* Allowed-characters Select all / Deselect all toggle
   (M-allowed-chars-live-only, 2026-05-04). Sits above the checkbox
   list on /kids/{id} Settings → Daily time cap & allowed characters. */
.allowed-chars-actions {
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--navy-soft);
  margin-bottom: 10px;
}
.allowed-chars-actions .link-btn {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--terra);
  cursor: pointer;
}
.allowed-chars-actions .link-btn:hover {
  text-decoration: underline;
}
.allowed-chars-actions .link-btn-sep {
  padding: 0 6px;
  color: var(--navy-soft);
  opacity: 0.5;
}

/* ───────────────────────────────────────────────────────────────
   Share-moment feature — share button per message + modal.
   Per design/brand/Yore_Share_Card_Design.md (locked spec). MVP
   shipped 2026-05-05; 9:16 + text-only formats are M-share-card-
   formats follow-ups.
   ─────────────────────────────────────────────────────────────── */
.msg-actions {
  display: flex;
  gap: 14px;
  align-items: baseline;       /* baseline-align Share + Report buttons */
  margin-top: 8px;
  flex-wrap: wrap;
}
.msg-actions .msg-report-details,
.msg-actions .msg-reported-tag {
  flex: 0 0 auto;
}
/* Zero out the .msg-report-details default margin-top when nested in
   .msg-actions — the parent flex already provides spacing, and the
   internal margin was making "Report this" render lower than the
   "Share moment" button next to it. Founder UX feedback 2026-05-05. */
.msg-actions .msg-report-details {
  margin-top: 0;
}
.msg-share-toggle {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 4px 0;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--navy-soft);
  cursor: pointer;
  transition: color 0.15s;
}
.msg-share-toggle:hover {
  color: var(--terra);
}

#share-modal {
  position: fixed; inset: 0;
  background: rgba(31, 58, 95, 0.42);
  display: none;
  align-items: center; justify-content: center;
  z-index: 9998;
  padding: 20px;
  animation: yore-modal-fade-in 0.18s ease;
}
#share-modal.show { display: flex; }
#share-modal-card {
  background: var(--cream-hi);
  border-radius: 22px;
  box-shadow: 0 20px 60px rgba(31, 58, 95, 0.25);
  max-width: 560px;
  width: 100%;
  /* Padding-top reduced (was 28) because the X icon now occupies the
     top-right corner; padding-right stays larger to avoid title text
     colliding with the X. */
  padding: 24px 32px 22px;
  position: relative;       /* anchor for absolutely-positioned X */
  /* Removed description text + tip line + Copy-as-text button + the
     referral-credit toggle (founder feedback 2026-05-05) — that
     reclaimed enough vertical space to bring the preview back to a
     taller proportion (was: 320px stout; now: up to 420px). */
  max-height: 92vh;
  overflow-y: auto;
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* old IE */
  animation: yore-modal-card-pop 0.28s cubic-bezier(.2,.9,.3,1.1);
}
#share-modal-card::-webkit-scrollbar { display: none; } /* Chrome/Safari */

/* X close button — top-right corner of the modal card, replaces the
   former "Cancel" button in the action row. Per founder feedback
   2026-05-05: "for cancel, do an x on top right instead." */
#share-modal-x {
  position: absolute;
  top: 14px; right: 16px;
  width: 32px; height: 32px;
  border: none;
  background: transparent;
  color: var(--navy-soft);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
  padding: 0;
}
#share-modal-x:hover {
  background: var(--cream-lo);
  color: var(--navy);
}
#share-modal-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 24px;
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 6px;
  line-height: 1.2;
}
.share-modal-help {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 14.5px;
  color: var(--navy-soft);
  margin: 0 0 18px;
  line-height: 1.5;
}

.share-preview {
  background: var(--cream-lo);
  border-radius: 12px;
  padding: 10px;
  margin-bottom: 16px;
  text-align: center;
}
.share-preview img {
  /* Preview cap restored to a taller proportion (was 320px → "stout"
     per founder feedback). Removing the description, tip, copy-as-text
     button, and referral toggle reclaimed enough vertical real estate
     to fit a 420px preview on common laptops without a scrollbar.
     The exported PNG is still 1080×1080. */
  width: 100%;
  max-width: 420px;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(31, 58, 95, 0.18);
}

.share-toggles {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 14px;
  margin: 0 0 14px;
}
.share-toggles-legend {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--navy-soft);
  padding: 0 6px;
}
.share-toggle {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 4px 0;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 14px;
  color: var(--navy);
  cursor: pointer;
}
.share-toggle input[type="checkbox"] {
  margin-top: 3px;
  flex-shrink: 0;
}

#share-modal-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
#share-modal-buttons button {
  /* Two-button layout (was four). Both buttons share equal width so
     the action row reads as a balanced pair: [Copy image] [Download
     image]. Cancel is now an X icon in the top-right corner. */
  flex: 1 1 0;
  min-width: 140px;
  appearance: none;
  cursor: pointer;
  border-radius: 999px;
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 15px;
  padding: 12px 18px;
  min-height: 48px;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.12s;
}
#share-modal-copy-image {
  background: rgba(255, 255, 255, 0.6);
  border: 1.5px solid var(--line);
  color: var(--navy);
}
#share-modal-copy-image:hover {
  background: var(--cream-lo);
}
#share-modal-copy-image.copied {
  background: var(--terra);
  border-color: var(--terra);
  color: var(--cream-hi);
}
#share-modal-share {
  background: var(--terra);
  border: 1.5px solid var(--terra);
  color: var(--cream-hi);
  font-weight: 500;
  /* Primary action — terra-orange Download image button. Two-button
     row with equal flex (Copy image and Download image both flex:1). */
}
#share-modal-share:hover {
  background: #a4631f;
  transform: translateY(-1px);
}

.share-modal-fallback-note {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--navy-soft);
  margin: 14px 0 0;
  text-align: center;
}

@media (max-width: 540px) {
  #share-modal-card { padding: 22px 22px 20px; }
  /* On mobile: stack the two buttons vertically with primary on top
     (column-reverse on a [Copy, Download] HTML order puts Download
     above Copy — matches finger-reach for the primary action). */
  #share-modal-buttons { flex-direction: column-reverse; }
  #share-modal-buttons button { flex: 1 1 auto; min-width: 0; }
}

/* ───────────────────────────────────────────────────────────────
   Cap settings — slider + weekday/weekend split + unlimited toggle.
   Lives on /kids/{id} → "Daily time cap & allowed characters" section.
   Replaces the bare number input shipped pre-2026-05-04.
   ─────────────────────────────────────────────────────────────── */
.cap-section {
  border-radius: 10px;
  background: var(--cream-hi);
  padding: 18px 20px;
  margin-bottom: 16px;
  transition: opacity .2s;
}
.cap-area-disabled {
  opacity: 0.45;
  pointer-events: none;
}
.cap-slider-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--serif);
  margin: 0 0 6px;
}
.cap-slider-name {
  font-weight: 600;
  color: var(--navy);
}
.cap-slider-value {
  color: var(--terra);
  font-style: italic;
  font-size: 14.5px;
}
.cap-slider {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 3px;
  background: var(--cream-lo);
  outline: none;
  margin: 8px 0 4px;
}
.cap-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--terra);
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(31, 58, 95, 0.18);
  cursor: pointer;
}
.cap-slider::-moz-range-thumb {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--terra);
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(31, 58, 95, 0.18);
  cursor: pointer;
}
.cap-slider-scale {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--navy-soft);
  font-family: var(--mono);
  margin-bottom: 14px;
}
.cap-toggle-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  padding: 8px 0;
  font-family: var(--serif);
  font-size: 14.5px;
  color: var(--navy);
}
.cap-toggle-row input[type="checkbox"] {
  margin-top: 4px;
  flex-shrink: 0;
}
.cap-unlimited-row {
  border-top: 1px dashed var(--line);
  padding-top: 14px;
  margin-top: 14px;
}
.cap-unlimited-row strong {
  color: var(--terra);
}
.cap-weekend-block {
  margin-top: 12px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
}

/* ───────────────────────────────────────────────────────────────
   yore-modal — brand-styled confirm() replacement.
   Matches the kid-app's "Start a new conversation?" dialog: cream
   card, navy heading, terra accent on emphasis, copper-fill primary
   button + outlined secondary. Painted by static/yore-modal.js
   reading data-yore-confirm-* attributes from triggers.
   ─────────────────────────────────────────────────────────────── */
#yore-modal {
  position: fixed; inset: 0;
  background: rgba(31, 58, 95, 0.42);   /* navy at 42% — soft, not harsh */
  display: none;
  align-items: center; justify-content: center;
  z-index: 9999;
  padding: 20px;
  animation: yore-modal-fade-in 0.18s ease;
}
#yore-modal.show { display: flex; }
@keyframes yore-modal-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
#yore-modal-card {
  background: var(--cream-hi);
  border-radius: 22px;
  box-shadow: 0 20px 60px rgba(31, 58, 95, 0.25);
  max-width: 540px; width: 100%;
  padding: 36px 36px 30px;
  animation: yore-modal-card-pop 0.28s cubic-bezier(.2,.9,.3,1.1);
}
@keyframes yore-modal-card-pop {
  from { opacity: 0; transform: translateY(8px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
#yore-modal-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 26px; font-weight: 600;
  color: var(--navy);
  margin: 0 0 16px; letter-spacing: -0.01em;
  line-height: 1.2;
}
#yore-modal-body p {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 17px; line-height: 1.55;
  color: var(--navy);
  margin: 0 0 12px;
}
#yore-modal-body p:last-child {
  margin-bottom: 0;
  color: var(--navy-soft);   /* later paragraphs softer — matches kid-app */
}
#yore-modal-body strong {
  color: var(--terra);
}
#yore-modal-buttons {
  display: flex; gap: 14px;
  margin-top: 26px;
  flex-wrap: wrap;
}
#yore-modal-no, #yore-modal-yes {
  flex: 1; min-width: 160px;
  appearance: none; cursor: pointer;
  border-radius: 999px;
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic; font-size: 17px;
  padding: 14px 22px;
  min-height: 52px;
  transition: background .15s, color .15s, border-color .15s, transform .12s;
}
#yore-modal-no {
  background: rgba(255,255,255,0.6);
  border: 1.5px solid var(--border, rgba(31, 58, 95, 0.18));
  color: var(--navy);
}
#yore-modal-no:hover {
  background: var(--cream-lo);
  transform: translateY(-1px);
}
#yore-modal-yes {
  background: var(--terra);
  border: 1.5px solid var(--terra);
  color: var(--cream-hi);
  font-weight: 500;
}
#yore-modal-yes:hover {
  background: #a4631f;
  transform: translateY(-1px);
}
/* Danger variant — destructive actions get a deeper, slightly red-shifted
   primary so the visual weight matches the consequence. */
#yore-modal-yes.danger {
  background: #A14A4D;
  border-color: #A14A4D;
}
#yore-modal-yes.danger:hover {
  background: #8d3c40;
}
/* Disabled state — type-to-confirm flows keep Yes disabled until the
   parent has typed the required phrase. Lower contrast + no-pointer
   communicates "not yet" without graying out so hard the button
   disappears. */
#yore-modal-yes:disabled,
#yore-modal-yes.danger:disabled {
  background: rgba(161, 74, 77, 0.35);
  border-color: rgba(161, 74, 77, 0.35);
  color: rgba(250, 247, 238, 0.85);
  cursor: not-allowed;
  transform: none;
}
#yore-modal-yes:disabled:hover,
#yore-modal-yes.danger:disabled:hover {
  background: rgba(161, 74, 77, 0.35);
  transform: none;
}

/* Inline escape-hatch link — surfaces an alternative path inside the
   modal (e.g., "Want to keep the profile but wipe data? Go to Privacy
   & data →"). Reads as supplemental, not a primary action. */
.yore-modal-escape {
  margin: 4px 0 18px !important;  /* tighten + override #yore-modal-body p */
  font-size: 14.5px !important;
  font-style: italic;
}
.yore-modal-escape a {
  color: var(--terra);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.yore-modal-escape a:hover {
  color: #8d3c40;
}

/* Type-to-confirm label + pill. The pill visually separates the
   phrase-to-type from the surrounding sentence, so parents don't
   wonder whether the words are part of the instruction. */
.yore-modal-phrase-label {
  margin: 14px 0 8px !important;
  font-size: 15px !important;
  color: var(--navy-soft) !important;
}
.yore-modal-phrase-pill {
  display: inline-block;
  padding: 2px 9px;
  margin: 0 2px;
  border-radius: 6px;
  background: var(--cream-lo, #F2EBD9);
  border: 1px solid var(--border, rgba(31, 58, 95, 0.18));
  font-family: var(--mono, 'IBM Plex Mono', Menlo, monospace);
  font-size: 13.5px;
  font-style: normal;
  color: var(--navy);
  letter-spacing: 0.02em;
  user-select: all;  /* triple-click selects the whole pill content */
}

.yore-modal-confirm-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  font-family: var(--mono, 'IBM Plex Mono', Menlo, monospace);
  font-size: 16px;
  color: var(--navy);
  background: #fff;
  border: 1.5px solid var(--border, rgba(31, 58, 95, 0.22));
  border-radius: 10px;
  transition: border-color .15s, box-shadow .15s;
}
.yore-modal-confirm-input:focus {
  outline: none;
  border-color: var(--terra);
  box-shadow: 0 0 0 3px rgba(184, 114, 42, 0.18);
}

@media (max-width: 540px) {
  #yore-modal-card { padding: 28px 22px 22px; }
  #yore-modal-title { font-size: 21px; }
  #yore-modal-body p { font-size: 16px; }
  #yore-modal-buttons { flex-direction: column-reverse; gap: 10px; }
  #yore-modal-no, #yore-modal-yes { font-size: 16px; padding: 13px 20px; min-height: 50px; }
  .yore-modal-confirm-input { font-size: 16px; }
}

/* ──────────────────────────────────────────────────────────────────
   Phase B of UX review (founder direction 2026-05-10)
   Dashboard restructure: unified needs-review banner + kid cards
   with per-kid latest 3 + all-caught-up strip + brand-tone fixes.

   Brand-tone:
   - Yellow (the prior verify-banner / friend-pilot tan) is replaced
     with cream + terracotta left-border across all attention surfaces
     on the dashboard. Terracotta is already the action color (CTAs,
     links); using it for attention extends the existing signal
     vocabulary instead of borrowing the OS-warning yellow register
     that breaks the NYPL register.
   - Red is replaced with muted ochre on the dashboard. The only
     saturated red still surfaces is the "delete my entire family"
     confirmation — that one should feel like a different product.
   ────────────────────────────────────────────────────────────────── */

/* Unified needs-review banner — Phase B.1 collapsed to a SINGLE
   ROW per Dashboard Spec (founder direction 2026-05-10): body span
   (with inline "+N more →" link) on the left, CTA button on the
   right. No stacked eyebrow + message + +N rows — that read as raw
   HTML instead of as a banner. */
.needs-review-banner {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  margin: 0 0 14px;
  background: var(--cream-hi, #FAF7EE);
  border-left: 3px solid var(--terra, #B8722A);
}
.needs-review--glance_flag,
.needs-review--verify_email {
  border-left-color: var(--navy-soft, #5A6B80);
}
.needs-review-banner .nrb-body {
  font-size: 15px;
  line-height: 1.5;
  color: var(--navy, #1F3A5F);
  font-family: var(--serif);
  min-width: 0;
}
.needs-review-banner .nrb-lede {
  font-weight: 600;
  color: var(--terra, #B8722A);
}
.needs-review--glance_flag .nrb-lede,
.needs-review--verify_email .nrb-lede {
  color: var(--navy-soft, #5A6B80);
}
.needs-review-banner .nrb-more-link {
  color: var(--terra, #B8722A);
  font-style: italic;
  text-decoration: underline;
  text-decoration-color: rgba(184, 114, 42, 0.4);
  text-underline-offset: 3px;
  margin-left: 4px;
}
/* Attention banner Review button — match Dashboard Spec
   (founder direction 2026-05-10/11): terracotta background +
   uppercase mono caps. Overrides the global pill .btn cascade
   for this surface only. */
.needs-review-banner .nrb-actions .btn,
.needs-review-banner .nrb-actions .btn:link,
.needs-review-banner .nrb-actions .btn:visited {
  background: var(--terra, #B8722A);
  color: var(--cream-hi, #FAF7EE);
  font-family: var(--mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 10px 16px;
  border-radius: 4px;
  border: none;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.15s;
}
.needs-review-banner .nrb-actions .btn:hover {
  background: var(--terra-dim, #8e4623);
  color: var(--cream-hi, #FAF7EE);
  transform: none;
}
@media (max-width: 640px) {
  .needs-review-banner {
    grid-template-columns: 1fr;
  }
  .needs-review-banner .nrb-actions {
    align-self: stretch;
  }
  .needs-review-banner .nrb-actions .btn,
  .needs-review-banner .nrb-actions form,
  .needs-review-banner .nrb-actions form .btn {
    width: 100%;
    text-align: center;
  }
}

/* Friend-pilot "pinned" variant — Phase B.1 demotion per Dashboard
   Spec (founder direction 2026-05-10). Same banner shape but with
   the grey rule-color left border, thinner padding, smaller body
   type; reads as persistent context rather than alert. */
.friend-pilot-banner.pinned {
  display: block;
  padding: 10px 16px;
  margin: 0 0 18px;
  background: var(--cream-hi, #FAF7EE);
  border-left: 3px solid var(--line, #D8D2C2);
  font-family: var(--serif);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--navy-soft, #5A6B80);
}
.friend-pilot-banner.pinned strong {
  color: var(--navy, #1F3A5F);
  font-weight: 600;
}
.friend-pilot-banner.pinned a {
  color: var(--terra, #B8722A);
  text-decoration: underline;
  text-decoration-color: rgba(184, 114, 42, 0.4);
  text-underline-offset: 2px;
}

/* All-caught-up strip — surfaces only when nothing's pending. Quiet,
   single-line, no alarm color. */
.all-caught-up {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin: 20px 0 6px;
  font-size: 13.5px;
  color: var(--navy-soft, #5A6B80);
  background: transparent;
  border-top: 1px solid var(--line, #D8D2C2);
}
.all-caught-up .acu-check {
  flex: 0 0 auto;
  color: var(--terra, #B8722A);
  font-weight: 700;
  font-size: 14px;
}
.all-caught-up .acu-text {
  font-style: italic;
  font-family: var(--serif);
}

/* Kid card — expands the prior .kid-row into a card-shaped surface
   that holds the kid's three most-recent conversations inline. */
.kid-card-list {
  list-style: none;
  margin: 18px 0;
  padding: 0;
}
.kid-card {
  display: block;
  padding: 18px 4px 14px;
  border-top: 1px solid var(--line, #D8D2C2);
}
.kid-card:first-child {
  border-top: none;
  padding-top: 8px;
}
.kid-card-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 16px;
}
/* Phase B.1 — kid name is a plain heading; only the small anchor
   wrapper makes it clickable. No underline, no link color. The
   Open-Yore button on the right is the only call-to-action affordance. */
.kid-card-name {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 700;
  color: var(--navy, #1F3A5F);
  line-height: 1.1;
  margin: 0;
}
.kid-card-name-anchor {
  color: inherit;
  text-decoration: none !important;
}
.kid-card-name-anchor:hover {
  color: var(--terra, #B8722A);
  text-decoration: none !important;
}
.kid-card-meta {
  margin: 6px 0 14px;
  font-family: var(--serif);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--navy-soft, #5A6B80);
}
/* Age chip — small caps mono terracotta. Sits at the start of the
   meta line, rest of meta in serif body. */
.kid-card-age-chip {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--terra, #B8722A);
  margin-right: 8px;
  vertical-align: 1px;
}
/* Kid-card CTA — Phase B.2 polish (founder direction 2026-05-11)
   to match Dashboard Spec. Was navy-serif pill; spec wants
   terra+mono+uppercase chip. Same pattern as the attention-banner
   Review button so the dashboard's action vocabulary is consistent. */
/* M-open-yore-post (2026-05-15): /open-yore/{kid_id} is now a POST,
   so the dashboard + kid-page CTAs are <button>s wrapped in tiny
   inline forms. These wrapper rules keep the form invisible to the
   surrounding grid layout — the styled button is the only visible
   element. Same for .kid-header-cta-form below. */
.kid-card-cta-form,
.kid-header-cta-form {
  display: contents;
  margin: 0;
  padding: 0;
}

.kid-card-cta {
  display: inline-flex;
  align-items: center;
  width: max-content;
  background: var(--terra, #B8722A);
  color: var(--cream-hi, #FAF7EE) !important;
  padding: 9px 14px;
  border-radius: 4px;
  font-family: var(--mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none !important;
  white-space: nowrap;
  border: none;
  transition: background 0.15s;
}
.kid-card-cta:hover {
  background: var(--terra-dim, #8e4623);
  color: var(--cream-hi, #FAF7EE) !important;
  transform: none;
}

/* Kid-card actions — vertical stack of Open Yore + Share with X
   (2026-05-11). Sits in the `auto` column of .kid-card-head's grid;
   each action right-aligned so both buttons share a clean right
   edge under the kid name on the left. */
.kid-card-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  position: relative;  /* anchor for the .kid-card-share dropdown */
}

/* Share-with-X dropdown on the kid card. Inherits the .signin-disclosure
   base behavior (open/close on summary click, JS in base.html); this
   block tunes the summary's visual weight so it reads as secondary to
   the terra-filled Open Yore CTA above it. Ghost-style chip — same
   shape + size as the primary CTA so they stack neatly. */
.kid-card-share {
  width: max-content;
}
.kid-card-share > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--border, rgba(31, 58, 95, 0.18));
  color: var(--navy, #1F3A5F);
  padding: 8px 13px;
  border-radius: 4px;
  font-family: var(--mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  list-style: none;
  transition: background 0.15s, border-color 0.15s;
}
.kid-card-share > summary::-webkit-details-marker { display: none; }
.kid-card-share > summary::after {
  content: "▾";
  font-size: 9px;
  opacity: 0.7;
}
.kid-card-share[open] > summary {
  background: var(--cream-hi, #FAF7EE);
  border-color: var(--terra, #B8722A);
}
.kid-card-share[open] > summary::after { content: "▴"; }

/* Per-kid latest 3 — Phase B.1 polish per Dashboard Spec
   (founder direction 2026-05-10). Grid is `64px 140px 1fr`
   (when · italic-terra char · serif quote). Whole row is the
   link; the arrow column is dropped (visual noise — the hover
   tells the parent it's clickable). Flagged pill is INLINE within
   the snippet span, not a separate column. */
.kid-card-recents {
  margin: 0 0 8px;
  border-top: 1px solid var(--line, #D8D2C2);
}
.kid-card-recent {
  display: grid;
  grid-template-columns: 64px 140px 1fr;
  gap: 16px;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid var(--line, #D8D2C2);
  text-decoration: none;
  color: inherit;
  transition: background 0.12s;
}
.kid-card-recent:last-child { border-bottom: none; }
.kid-card-recent:hover { background: rgba(184, 114, 42, 0.04); }
.kid-card-recent .kcr-when {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--navy-soft, #5A6B80);
  text-transform: uppercase;
}
.kid-card-recent .kcr-char {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--terra, #B8722A);
}
.kid-card-recent .kcr-snippet {
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.4;
  color: var(--navy, #1F3A5F);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
/* Inline flagged pill — mono small caps, terracotta tint. */
.kid-card-recent .kcr-flag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  color: var(--terra, #B8722A);
  background: rgba(184, 114, 42, 0.1);
  padding: 3px 6px;
  margin-left: 6px;
  text-transform: uppercase;
  vertical-align: 1px;
}
@media (max-width: 600px) {
  .kid-card-recent {
    grid-template-columns: 50px 1fr;
  }
  .kid-card-recent .kcr-char {
    display: none;
  }
}

/* /kids/{id} filter row — Phase B.1 polish per Kid Profile Spec
   (founder direction 2026-05-10): cream-hi background so the
   filter row doesn't blend with the conversation rows below. */
.filter-bar.filter-bar-card {
  background: var(--cream-hi, #FAF7EE);
  border: 1px solid var(--line, #D8D2C2);
}

/* /kids/{id} conversation list — Phase B.1 3-line stack per Kid
   Profile Spec. Container: cream-hi + 1px border per row, 8px gap.
   Stack: character (+ optional inline flagged pill) / meta (mono
   small caps) / italic kid-first-question snippet. */
.convo-list-v2 {
  display: grid;
  gap: 8px;
  margin-top: 4px;
}
.convo-row-v2 {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 12px;
  padding: 14px 18px;
  background: var(--cream-hi, #FAF7EE);
  border: 1px solid var(--line, #D8D2C2);
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition: background 0.12s, border-color 0.12s;
}
.convo-row-v2:hover {
  background: #fff;
  border-color: var(--terra, #B8722A);
}
.convo-row-char {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 4px;
  color: var(--navy, #1F3A5F);
}
.convo-row-flag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  color: var(--terra, #B8722A);
  background: rgba(184, 114, 42, 0.1);
  padding: 3px 6px;
  margin-left: 8px;
  text-transform: uppercase;
  vertical-align: 2px;
  font-weight: 500;
}
.convo-row-meta {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: var(--navy-soft, #5A6B80);
  text-transform: uppercase;
  margin: 0 0 8px;
}
.convo-row-meta b {
  color: var(--navy, #1F3A5F);
  font-weight: 500;
}
.convo-row-quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  line-height: 1.4;
  color: var(--navy, #1F3A5F);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.convo-row-arrow {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--navy-soft, #5A6B80);
  align-self: center;
  transition: color 0.12s;
}
.convo-row-v2:hover .convo-row-arrow {
  color: var(--terra, #B8722A);
}

/* Kid header edit-links separator — Phase B.1 typographic fix.
   Was an orphaned `·` on its own line in the template; now an
   inline separator span with proper spacing. */
.kid-header-edit-sep {
  display: inline-block;
  margin: 0 8px;
  color: var(--navy-soft, #5A6B80);
}

/* "See all N conversations →" — Phase B.2 polish to match
   Dashboard Spec: mono uppercase terracotta. Was serif italic. */
.kid-card-more {
  display: inline-block;
  margin-top: 10px;
  padding: 4px 0;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--terra, #B8722A);
  text-decoration: none;
}
.kid-card-more:hover { color: var(--terra-dim, #8e4623); }

/* "+ Add another kid" — setup-mode-only sibling card (same height
   register as the prior .kid-row-add). */
.kid-card-add {
  display: block;
  text-align: center;
  text-decoration: none !important;
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  color: var(--navy-soft, #5A6B80);
  padding: 18px 4px;
  border-top: 1px solid var(--line, #D8D2C2);
  transition: background 0.15s, color 0.15s;
}
.kid-card-add:hover {
  color: var(--terra, #B8722A);
  background: rgba(184, 114, 42, 0.04);
}

@media (max-width: 600px) {
  .kid-card-head {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .kid-card-cta { justify-self: flex-start; }
  /* .kid-card-recent mobile rules now live in the Phase B.1 polish
     section above (.kid-card-recent is the anchor itself, no more
     descendant `a`). */
}