/* ============================================================
   SMIDGI FEELINGS — Design tokens + base styles
   Following design-bible.md v1
   ============================================================ */

:root {
  /* ---------- Surfaces ---------- */
  --bg: oklch(0.975 0.012 75);          /* warm off-white */
  --bg-deeper: oklch(0.945 0.018 75);   /* warmer cream, for cards */
  --surface: oklch(0.99 0.008 75);      /* slightly lifted */
  --surface-soft: oklch(0.96 0.014 75);
  --line: oklch(0.88 0.02 70);
  --line-soft: oklch(0.92 0.015 70);

  /* ---------- Text ---------- */
  --text: oklch(0.28 0.025 55);
  --text-secondary: oklch(0.48 0.022 60);
  --text-muted: oklch(0.62 0.018 65);
  --text-on-color: oklch(0.99 0.005 80);

  /* ---------- Dimension color families ---------- */
  /* Body: warm neutral cream/sand */
  --body-50:  oklch(0.96 0.022 75);
  --body-100: oklch(0.92 0.035 72);
  --body-200: oklch(0.86 0.05 70);
  --body-500: oklch(0.70 0.075 65);
  --body-700: oklch(0.50 0.07 60);

  /* Shape: clay / terracotta */
  --shape-50:  oklch(0.96 0.02 45);
  --shape-100: oklch(0.91 0.045 42);
  --shape-200: oklch(0.84 0.075 40);
  --shape-500: oklch(0.68 0.115 40);
  --shape-700: oklch(0.46 0.10 38);

  /* Temperature: amber / golden */
  --temp-50:  oklch(0.97 0.022 85);
  --temp-100: oklch(0.93 0.045 82);
  --temp-200: oklch(0.86 0.085 80);
  --temp-500: oklch(0.74 0.12 75);
  --temp-700: oklch(0.50 0.10 70);

  /* Weight: sage / stone */
  --weight-50:  oklch(0.96 0.015 135);
  --weight-100: oklch(0.92 0.025 132);
  --weight-200: oklch(0.85 0.04 130);
  --weight-500: oklch(0.70 0.05 128);
  --weight-700: oklch(0.46 0.04 125);

  /* Movement: soft teal / sky */
  --move-50:  oklch(0.96 0.018 215);
  --move-100: oklch(0.92 0.035 212);
  --move-200: oklch(0.84 0.055 210);
  --move-500: oklch(0.70 0.075 208);
  --move-700: oklch(0.46 0.065 205);

  /* ---------- Silhouette skin tone (default warm beige) ---------- */
  --silhouette-fill: #C8B498;
  --zone-selected: #D4B87A;

  /* ---------- Type ---------- */
  --font: 'Nunito', system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --font-display: 'Nunito', system-ui, sans-serif;

  /* ---------- Radii ---------- */
  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 28px;
  --r-xl: 40px;
  --r-pill: 999px;

  /* ---------- Shadow (soft, warm) ---------- */
  --shadow-sm: 0 1px 2px oklch(0.4 0.03 60 / 0.06), 0 2px 8px oklch(0.4 0.03 60 / 0.04);
  --shadow-md: 0 4px 12px oklch(0.4 0.03 60 / 0.08), 0 12px 32px oklch(0.4 0.03 60 / 0.06);
  --shadow-lg: 0 16px 48px oklch(0.35 0.03 60 / 0.14);

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-organic: cubic-bezier(0.45, 0, 0.55, 1);
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: var(--bg-deeper);
  color: var(--text);
  font-family: var(--font);
  font-weight: 500;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
}

#root {
  width: 100%;
  height: 100%;
}

button {
  font-family: inherit;
  font-weight: 600;
  border: none;
  background: none;
  color: inherit;
  cursor: pointer;
  letter-spacing: 0.01em;
}

input, textarea, select {
  font-family: inherit;
  color: inherit;
}

/* ============================================================
   App shell — tablet stage
   ============================================================ */

.stage {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--bg-deeper);
  padding: max(24px, env(safe-area-inset-top))
           max(24px, env(safe-area-inset-right))
           max(24px, env(safe-area-inset-bottom))
           max(24px, env(safe-area-inset-left));
}

.device {
  width: 100%;
  height: 100%;
  max-width: 1280px;
  max-height: 900px;
  aspect-ratio: 16 / 11;
  background: var(--bg);
  border-radius: 36px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Each screen fills the device */
.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 1;
}
.screen.scrollable { overflow-y: auto; }
/* screenIn keyframes still used by PinGate and the invite overlay */
@keyframes screenIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   Top bar (used inside screens)
   ============================================================ */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 32px 16px;
  gap: 16px;
  position: relative;
  z-index: 50;
  pointer-events: auto;
}
.topbar button { pointer-events: auto; }

.iconbtn {
  width: 56px;
  height: 56px;
  border-radius: var(--r-pill);
  background: var(--surface-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  transition: background 0.2s var(--ease), transform 0.1s var(--ease);
  border: 1px solid var(--line-soft);
}
.iconbtn:hover { background: var(--bg-deeper); }
.iconbtn:active { transform: scale(0.96); }

.iconbtn.small {
  width: 44px;
  height: 44px;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-soft);
  border: 1px solid var(--line-soft);
  padding: 8px 16px;
  border-radius: var(--r-pill);
  font-size: 14px;
  color: var(--text-secondary);
  font-weight: 600;
}

/* Persistent child identifier — shown on every screen the child navigates */
.child-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 6px 18px 6px 6px;
  background: var(--cc-soft, var(--surface-soft));
  border: 1.5px solid var(--cc-accent, var(--line));
  border-radius: var(--r-pill);
  font-family: inherit;
  cursor: pointer;
  transition: transform 0.12s var(--ease), box-shadow 0.18s var(--ease);
  min-height: 52px;
}
.child-badge:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.child-badge-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: oklch(0.99 0.005 80 / 0.7);
  display: grid; place-items: center;
  color: var(--cc-accent, var(--text));
  flex-shrink: 0;
}
.child-badge-text { display: flex; flex-direction: column; line-height: 1.1; }
.child-badge-name { font-weight: 800; font-size: 16px; color: var(--text); letter-spacing: -0.005em; }
.child-badge-sub { font-size: 11px; color: var(--text-secondary); font-weight: 600; margin-top: 2px; letter-spacing: 0.02em; }

/* Apply child's accent to certain global elements when a child is active.
   Components opt-in by reading var(--child-accent). */

/* ============================================================
   Buttons
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 28px;
  border-radius: var(--r-pill);
  font-size: 17px;
  font-weight: 700;
  transition: transform 0.1s var(--ease), background 0.2s var(--ease), box-shadow 0.2s var(--ease);
  min-height: 56px;
}
.btn:active { transform: scale(0.97); }

.btn.primary {
  background: var(--text);
  color: var(--text-on-color);
}
.btn.primary:hover { background: oklch(0.22 0.025 55); }

.btn.soft {
  background: var(--surface-soft);
  color: var(--text);
  border: 1px solid var(--line-soft);
}
.btn.soft:hover { background: var(--bg-deeper); }

.btn.ghost {
  background: transparent;
  color: var(--text-secondary);
}
.btn.ghost:hover { background: var(--surface-soft); }

/* ============================================================
   Home screen
   ============================================================ */

.home {
  padding: 40px 52px 44px;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.home-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.wordmark {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.wordmark .dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--shape-500);
  box-shadow: 0 0 0 4px var(--shape-100);
  animation: dotbreath 3s var(--ease-organic) infinite;
}
@keyframes dotbreath {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.18); }
}

.home-greeting {
  margin-top: 32px;
  font-size: 18px;
  color: var(--text-secondary);
  font-weight: 500;
}
.home-greeting strong {
  color: var(--text);
  font-weight: 700;
}

.home-title {
  margin-top: 4px;
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--text);
  text-wrap: balance;
  max-width: 20ch;
}

/* Children row */
.children-row {
  margin-top: 22px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.child-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 20px 10px 10px;
  background: var(--surface);
  border: 2px solid var(--cc-accent, var(--line-soft));
  border-radius: var(--r-pill);
  transition: transform 0.15s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease);
  cursor: pointer;
  min-height: 64px;
  font-family: inherit;
}
.child-card:hover {
  transform: translateY(-2px);
  background: var(--cc-soft, var(--surface-soft));
  box-shadow: var(--shadow-sm);
}
.child-card:active { transform: translateY(0) scale(0.99); }
.child-card.active {
  background: var(--cc-soft, var(--surface));
  border-color: var(--cc-accent, var(--text));
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--cc-accent, var(--text)) 18%, transparent);
}

.child-avatar {
  width: 46px;
  height: 46px;
  border-radius: var(--r-pill);
  background: var(--bg-deeper);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.child-info { display: flex; flex-direction: column; white-space: nowrap; }
.child-name { font-weight: 800; font-size: 16px; line-height: 1.2; color: var(--text); }
.child-meta { font-size: 12px; color: var(--text-secondary); font-weight: 600; margin-top: 2px; }

.child-card.add {
  background: transparent;
  border-style: dashed;
  border-color: var(--line);
  color: var(--text-secondary);
}
.child-card.add .child-avatar { background: var(--surface-soft); color: var(--text-muted); }
.child-card.add .child-name { color: var(--text-secondary); }

/* Main actions */
.actions {
  margin-top: auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 14px;
  padding-top: 24px;
  min-height: 0;
}
.actions.actions-two {
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.action {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 22px 26px;
  padding-right: 170px;
  border-radius: var(--r-lg);
  min-height: 170px;
  cursor: pointer;
  transition: transform 0.18s var(--ease), box-shadow 0.2s var(--ease);
  overflow: hidden;
  text-align: left;
  border: none;
  font-family: inherit;
}
.action:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.action:active { transform: translateY(-1px) scale(0.99); }

.action.explore,
.action.logs-hero {
  background: linear-gradient(150deg, var(--shape-100), var(--temp-100) 60%, var(--weight-100));
  color: var(--text);
  grid-column: 1;
}
.action.logs-hero { grid-column: auto; }
.action.guide-hero {
  background: linear-gradient(155deg, var(--weight-100), var(--move-100) 55%, var(--shape-100));
  color: var(--text);
}
.action.logs {
  background: var(--surface);
  border: 1.5px solid var(--line-soft);
  color: var(--text);
}
.action.guide {
  background: var(--bg-deeper);
  color: var(--text);
}

.action-label {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.action.explore .action-label,
.action.logs-hero .action-label { color: oklch(0.40 0.05 50); }
.action.guide-hero .action-label { color: oklch(0.42 0.04 200); }

.action-title {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin-top: 4px;
  text-wrap: balance;
}

.action-blurb {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 6px;
  font-weight: 500;
  line-height: 1.4;
}

.action .arrow {
  width: 40px; height: 40px;
  border-radius: var(--r-pill);
  background: oklch(0.99 0.01 60 / 0.7);
  display: grid; place-items: center;
  margin-top: 10px;
}

.action.explore .preview,
.action.logs-hero .preview,
.action.guide-hero .preview {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 140px;
  height: 140px;
  pointer-events: none;
  opacity: 0.9;
  display: grid; place-items: center;
}

/* Mode pill on home */
.mode-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 700;
  background: oklch(0.99 0.01 60 / 0.6);
  color: var(--text);
}
.mode-pill .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--shape-500);
}
.mode-pill.verbal .dot { background: var(--temp-500); }

/* ============================================================
   Add Child form
   ============================================================ */

.sheet-backdrop {
  position: absolute; inset: 0;
  background: oklch(0.25 0.02 60 / 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: grid;
  place-items: center;
  padding: 32px;
  animation: fadeIn 0.25s var(--ease);
  z-index: 50;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.sheet {
  background: var(--bg);
  border-radius: var(--r-lg);
  width: 100%;
  max-width: 720px;
  max-height: 92%;
  overflow: auto;
  box-shadow: var(--shadow-lg);
  animation: sheetIn 0.3s var(--ease);
}
@keyframes sheetIn {
  from { transform: translateY(20px) scale(0.98); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

.sheet-head {
  padding: 24px 32px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.sheet-title { font-size: 24px; font-weight: 800; letter-spacing: -0.01em; }
.sheet-body { padding: 12px 32px 28px; }
.sheet-foot {
  padding: 16px 32px 28px;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.field { margin-top: 18px; }
.field-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}
.field-input {
  width: 100%;
  padding: 14px 18px;
  border-radius: var(--r-md);
  background: var(--surface-soft);
  border: 1.5px solid var(--line-soft);
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
  outline: none;
}
.field-input:focus { border-color: var(--text); background: var(--surface); }

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.icon-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  max-height: 280px;
  overflow-y: auto;
  padding: 4px 8px 4px 4px;
}
.icon-tile {
  aspect-ratio: 1;
  border-radius: var(--r-md);
  background: var(--surface-soft);
  border: 2px solid transparent;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform 0.12s var(--ease), border-color 0.18s var(--ease), background 0.18s var(--ease);
}
.icon-tile:hover { background: var(--bg-deeper); }
.icon-tile.selected {
  border-color: var(--text);
  background: var(--surface);
}

.skin-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.skin-swatch {
  width: 56px; height: 56px;
  border-radius: var(--r-pill);
  cursor: pointer;
  position: relative;
  transition: transform 0.12s var(--ease);
  border: 3px solid transparent;
}
.skin-swatch:hover { transform: scale(1.05); }
.skin-swatch.selected { border-color: var(--text); }

/* Mode picker (in AddChildSheet) */
.mode-picker {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.mode-option {
  text-align: left;
  padding: 14px 16px;
  background: var(--surface-soft);
  border: 1.5px solid var(--line-soft);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background 0.18s var(--ease), border-color 0.18s var(--ease), transform 0.12s var(--ease);
  font-family: inherit;
}
.mode-option:hover { background: var(--bg-deeper); border-color: var(--line); }
.mode-option.selected {
  background: var(--surface);
  border-color: var(--text);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--text) 12%, transparent);
}
.mode-option-label {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.005em;
}
.mode-option-sub {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 500;
  margin-top: 2px;
}

.mode-suggestion {
  margin-top: 12px;
  padding: 12px 16px;
  background: var(--temp-50);
  border-left: 3px solid var(--temp-500);
  border-radius: var(--r-sm);
  font-size: 13px;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

/* ============================================================
   Explore (pre-verbal) — tabs + dimension content
   ============================================================ */

.explore {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.explore-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px 0;
  gap: 16px;
}

.tabs {
  display: flex;
  gap: 8px;
  padding: 18px 24px 0;
}

.tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 12px 18px;
  border-radius: var(--r-md) var(--r-md) 0 0;
  background: transparent;
  color: var(--text-secondary);
  position: relative;
  transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
.tab:hover { background: var(--surface-soft); color: var(--text); }
.tab.active { color: var(--text); }
.tab.active::after {
  content: '';
  position: absolute;
  left: 12px; right: 12px; bottom: -1px; height: 4px;
  background: var(--dim, var(--text));
  border-radius: 4px 4px 0 0;
}
.tab-icon {
  width: 32px; height: 32px;
  display: grid; place-items: center;
}
.tab-label {
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.02em;
}

/* dimension content panel */
.panel {
  flex: 1;
  background: var(--dim-bg, var(--surface));
  border-top: 1px solid var(--line-soft);
  padding: 28px 40px 24px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: background 0.4s var(--ease);
}

.panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.panel-head > div:first-child { flex: 1; min-width: 0; }
.panel-head > .flex { flex-shrink: 0; }
.panel-title {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--text);
}
.panel-sub {
  font-size: 15px;
  color: var(--text-secondary);
  font-weight: 500;
}

/* Option tiles grid */
.options {
  display: grid;
  gap: 18px;
  flex: 1;
}
.options.cols-3 { grid-template-columns: repeat(3, 1fr); }
.options.cols-4 { grid-template-columns: repeat(4, 1fr); }
.options.cols-2 { grid-template-columns: repeat(2, 1fr); }

.opt {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px;
  border-radius: var(--r-lg);
  background: var(--opt-bg, var(--surface));
  border: 3px solid transparent;
  cursor: pointer;
  transition: transform 0.15s var(--ease), border-color 0.2s var(--ease), background 0.25s var(--ease);
  overflow: hidden;
  min-height: 200px;
}
.opt:hover { transform: translateY(-3px); }
.opt:active { transform: translateY(-1px) scale(0.99); }

.opt.selected {
  border-color: var(--dim-500, var(--text));
  background: var(--dim-50, var(--surface));
}
.opt.selected .opt-label { color: var(--dim-700, var(--text)); }

.opt-stage {
  width: 110px;
  height: 110px;
  display: grid;
  place-items: center;
  position: relative;
}
.opt-label {
  font-size: 17px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.005em;
}

/* Action row at bottom of explore */
.action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0 0;
  gap: 12px;
}

/* ============================================================
   Motion signatures (CSS keyframes)
   Each ~2-3s loop. Ease-in-out organic, never linear.
   ============================================================ */

/* Shared shape — used so motion is what differentiates */
.blob {
  display: block;
  width: 100%; height: 100%;
}

/* SHAPE — spiky: pulses & jabs outward */
@keyframes spiky-jab {
  0%, 100% { transform: scale(0.92); }
  18% { transform: scale(1.12); }
  30% { transform: scale(0.95); }
  60% { transform: scale(0.94); }
}
.anim-spiky { animation: spiky-jab 2.4s var(--ease-organic) infinite; transform-origin: center; }

/* SHAPE — round: gentle breathing */
@keyframes round-breath {
  0%, 100% { transform: scale(0.94); }
  50% { transform: scale(1.06); }
}
.anim-round { animation: round-breath 3s var(--ease-organic) infinite; transform-origin: center; }

/* SHAPE — swirly: rotates */
@keyframes swirly-rot {
  from { transform: rotate(0deg) scale(0.98); }
  to   { transform: rotate(360deg) scale(0.98); }
}
.anim-swirly { animation: swirly-rot 3.2s linear infinite; transform-origin: center; }

/* SHAPE — smooth: undulates like liquid */
@keyframes smooth-flow {
  0%, 100% { transform: translateX(-4%) scaleX(1.02) scaleY(0.98); }
  50% { transform: translateX(4%) scaleX(0.98) scaleY(1.02); }
}
.anim-smooth { animation: smooth-flow 3.4s var(--ease-organic) infinite; transform-origin: center; }

/* TEMPERATURE — hot: dramatic intensity pulse */
@keyframes hot-shimmer {
  0%, 100% { transform: translateY(2px) scale(0.94); filter: brightness(0.88) saturate(0.8); }
  50%      { transform: translateY(-3px) scale(1.08); filter: brightness(1.4) saturate(1.55); }
}
.anim-hot { animation: hot-shimmer 1.2s var(--ease-organic) infinite; transform-origin: center; }
@keyframes hot-haze {
  0% { transform: translateY(0) scaleX(1); opacity: 0; }
  30% { opacity: 0.55; }
  100% { transform: translateY(-30px) scaleX(0.6); opacity: 0; }
}
.haze {
  position: absolute;
  left: 50%; bottom: 30%;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--temp-500);
  animation: hot-haze 2s var(--ease-organic) infinite;
}
.haze:nth-child(2) { left: 35%; animation-delay: 0.4s; }
.haze:nth-child(3) { left: 65%; animation-delay: 0.8s; }

/* TEMPERATURE — cold: contracts hard and holds (constrictive) */
@keyframes cold-shrink {
  0%, 100% { transform: scale(0.94); filter: brightness(1) contrast(1); }
  30%, 70% { transform: scale(0.74); filter: brightness(0.92) contrast(1.1); }
}
.anim-cold { animation: cold-shrink 3.2s cubic-bezier(0.45, 0, 0.55, 1) infinite; transform-origin: center; }

/* Cold shiver — tiny rapid jitter, wraps the shrink (cold makes you shake) */
@keyframes cold-shiver {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(1px, -0.5px); }
  40% { transform: translate(-1px, 0.5px); }
  60% { transform: translate(1px, 0.5px); }
  80% { transform: translate(-1px, -0.5px); }
}
.anim-cold-shiver { animation: cold-shiver 0.22s steps(1, end) infinite; transform-origin: center; }

/* TEMPERATURE — warm: steady glow pulse, generous halo */
@keyframes warm-glow {
  0%, 100% { filter: brightness(0.95); box-shadow: 0 0 14px 3px var(--temp-200), 0 0 0 0 var(--temp-100); }
  50%      { filter: brightness(1.14); box-shadow: 0 0 60px 20px var(--temp-200), 0 0 28px 8px var(--temp-500); }
}
.anim-warm { animation: warm-glow 2.6s var(--ease-organic) infinite; border-radius: 50%; }

/* WEIGHT — heavy: sinks and SPLATS. Long dwell at bottom, squashed, with a pressing shadow. */
@keyframes heavy-sink {
  0%   { transform: translateY(-6px) scaleY(1) scaleX(1); }
  18%  { transform: translateY(10px) scaleY(0.74) scaleX(1.22); }
  30%  { transform: translateY(10px) scaleY(0.78) scaleX(1.18); }
  60%  { transform: translateY(10px) scaleY(0.84) scaleX(1.12); }
  82%  { transform: translateY(0px)  scaleY(0.94) scaleX(1.04); }
  100% { transform: translateY(-6px) scaleY(1) scaleX(1); }
}
.anim-heavy { animation: heavy-sink 3.2s cubic-bezier(0.45, 0, 0.55, 1) infinite; transform-origin: center bottom; }

/* Pressing shadow under heavy forms — it widens & darkens on impact */
@keyframes heavy-press {
  0%, 100% { transform: translateX(-50%) scaleX(0.45); opacity: 0.18; }
  18%      { transform: translateX(-50%) scaleX(1.25); opacity: 0.55; }
  60%      { transform: translateX(-50%) scaleX(1.15); opacity: 0.45; }
  82%      { transform: translateX(-50%) scaleX(0.7); opacity: 0.28; }
}
.heavy-press {
  position: absolute;
  left: 50%;
  bottom: 4%;
  width: 70%;
  height: 14px;
  border-radius: 50%;
  background: oklch(0.28 0.025 60 / 1);
  filter: blur(5px);
  animation: heavy-press 3.2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  pointer-events: none;
  transform: translateX(-50%);
}

/* WEIGHT — light: gentle rise + fall, stays roughly centered */
@keyframes light-rise {
  0%   { transform: translateY(8px); }
  50%  { transform: translateY(-10px); }
  100% { transform: translateY(8px); }
}
.anim-light { animation: light-rise 3s cubic-bezier(0.4, 0, 0.6, 1) infinite; }

/* WEIGHT — floaty: sits high in the air and wanders, untethered */
@keyframes floaty-drift {
  0%   { transform: translate(-10px, -18px) rotate(-3deg); }
  25%  { transform: translate(8px, -24px) rotate(2deg); }
  50%  { transform: translate(12px, -16px) rotate(4deg); }
  75%  { transform: translate(-6px, -26px) rotate(-2deg); }
  100% { transform: translate(-10px, -18px) rotate(-3deg); }
}
.anim-floaty { animation: floaty-drift 5.5s var(--ease-organic) infinite; transform-origin: center; }

/* MOVEMENT — bubbly: pops irregularly */
@keyframes bubble-pop {
  0%, 100% { transform: scale(0.6); opacity: 0.5; }
  50% { transform: scale(1.05); opacity: 1; }
}
.bubble {
  position: absolute;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--move-500);
  animation: bubble-pop 1.4s var(--ease-organic) infinite;
}
.bubble.b2 { width: 18px; height: 18px; left: 60%; top: 35%; animation-delay: 0.5s; }
.bubble.b3 { width: 22px; height: 22px; left: 30%; top: 55%; animation-delay: 0.9s; background: var(--move-700); }
.bubble.b4 { width: 14px; height: 14px; left: 65%; top: 65%; animation-delay: 1.2s; }

/* MOVEMENT — still: no motion (intentional absence) */
.anim-still { animation: none; }

/* MOVEMENT — shaky: jitter in place */
@keyframes shaky-jitter {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-2px, 1px); }
  20% { transform: translate(2px, -1px); }
  30% { transform: translate(-1px, -2px); }
  40% { transform: translate(2px, 1px); }
  50% { transform: translate(-2px, 2px); }
  60% { transform: translate(1px, -2px); }
  70% { transform: translate(-2px, 0); }
  80% { transform: translate(2px, 1px); }
  90% { transform: translate(-1px, -1px); }
}
.anim-shaky { animation: shaky-jitter 0.5s steps(1, end) infinite; }

/* MOVEMENT — fast: streaks across and resets */
@keyframes fast-streak {
  0% { transform: translateX(-40%); opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translateX(40%); opacity: 0; }
}
.anim-fast { animation: fast-streak 1.6s var(--ease-organic) infinite; }
.anim-fast-trail {
  position: absolute;
  background: var(--move-200);
  opacity: 0.5;
  filter: blur(2px);
}

/* ============================================================
   Body silhouette
   ============================================================ */

.body-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  flex: 1;
  justify-content: center;
}

.silhouette {
  width: 220px;
  height: auto;
}
.zone {
  fill: var(--silhouette-fill);
  stroke: oklch(from var(--silhouette-fill) calc(l - 0.12) c h);
  stroke-width: 1.5;
  cursor: pointer;
  transition: fill 0.25s var(--ease), filter 0.25s var(--ease);
}
.zone:hover { filter: brightness(0.96); }
.zone.sel {
  fill: var(--zone-selected);
  filter: brightness(1.05);
  stroke-width: 2.5;
}
.zone.allover {
  animation: allover-wash 1.2s var(--ease-organic);
}
@keyframes allover-wash {
  0% { fill: var(--silhouette-fill); }
  50% { fill: var(--zone-selected); filter: brightness(1.15); }
  100% { fill: var(--zone-selected); }
}

.view-toggle {
  display: inline-flex;
  background: var(--surface-soft);
  border-radius: var(--r-pill);
  padding: 4px;
  gap: 4px;
  border: 1px solid var(--line-soft);
}
.view-toggle button {
  padding: 8px 16px;
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.view-toggle button.active {
  background: var(--text);
  color: var(--text-on-color);
}

.allover-btn {
  padding: 12px 22px;
  border-radius: var(--r-pill);
  background: var(--body-100);
  color: var(--body-700);
  font-weight: 700;
  font-size: 14px;
  border: 1.5px solid transparent;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.allover-btn:hover { background: var(--body-200); }
.allover-btn.active { border-color: var(--body-500); background: var(--body-200); }

/* ============================================================
   Summary screen
   ============================================================ */

.summary {
  padding: 32px 56px;
  display: flex;
  flex-direction: column;
  flex: 1;
  background: linear-gradient(165deg, var(--bg) 0%, var(--bg-deeper) 100%);
}

.summary-stage {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: center;
}

.summary-card {
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: 28px;
  border: 1.5px solid var(--line-soft);
  box-shadow: var(--shadow-sm);
}

.summary-headline {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--text);
  margin-bottom: 12px;
}

.chips {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 18px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  font-size: 14px;
  font-weight: 700;
  background: var(--surface-soft);
  border: 1px solid var(--line-soft);
}
.chip.shape { background: var(--shape-50); border-color: var(--shape-200); color: var(--shape-700); }
.chip.temp { background: var(--temp-50); border-color: var(--temp-200); color: var(--temp-700); }
.chip.weight { background: var(--weight-50); border-color: var(--weight-200); color: var(--weight-700); }
.chip.move { background: var(--move-50); border-color: var(--move-200); color: var(--move-700); }
.chip.body { background: var(--body-50); border-color: var(--body-200); color: var(--body-700); }
.chip .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

.parent-note {
  margin-top: 16px;
  padding: 16px 18px;
  background: var(--bg-deeper);
  border-radius: var(--r-md);
  font-size: 15px;
  color: var(--text-secondary);
  font-style: italic;
  line-height: 1.5;
  border-left: 3px solid var(--shape-200);
}

/* Magic visualization area */
.viz {
  position: relative;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
.viz .silhouette {
  filter: drop-shadow(0 12px 40px oklch(0.5 0.04 60 / 0.18));
}
.viz-silhouette {
  width: 100%;
  max-width: 380px;
  height: auto;
  filter: drop-shadow(0 12px 40px oklch(0.5 0.04 60 / 0.18));
}
.composite-anchor {
  position: absolute;
  pointer-events: none;
}

/* ============================================================
   Verbal mode — feelings grid
   ============================================================ */

.verbal {
  display: flex; flex-direction: column;
  flex: 1;
}

.feelings-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 22px;
  padding: 24px 56px 32px;
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}
.feelings-grid.expanded {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: none;
  grid-auto-rows: min-content;
  align-content: start;
  gap: 16px;
  padding: 18px 40px 28px;
}

.feel-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 28px;
  border-radius: var(--r-lg);
  background: var(--feel-bg, var(--surface));
  border: 3px solid transparent;
  cursor: pointer;
  transition: transform 0.18s var(--ease), border-color 0.2s var(--ease);
  overflow: hidden;
  min-height: 180px;
}
.feelings-grid.expanded .feel-card { min-height: 160px; padding: 20px 16px; }
.feel-card:hover { transform: translateY(-3px); }
.feel-card.selected { border-color: var(--text); }

.feel-card .face {
  width: 96px; height: 96px;
  position: relative;
}
.feelings-grid.expanded .feel-card .face { width: 72px; height: 72px; }

.feel-name {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text);
}
.feelings-grid.expanded .feel-name { font-size: 17px; }

.feel-card .speaker {
  position: absolute;
  top: 14px; right: 14px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: oklch(0.99 0.01 60 / 0.7);
  display: grid; place-items: center;
  color: var(--text-secondary);
}

/* ============================================================
   Processing pathways
   ============================================================ */

.pathways {
  padding: 24px 40px 32px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.pathway-intro {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
  background: var(--surface);
  border-radius: var(--r-lg);
  border: 1.5px solid var(--line-soft);
  margin-bottom: 22px;
}

.pathway-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  align-content: start;
  /* room for hover lift + selection ring */
  padding: 6px 4px 10px;
  margin: -6px -4px -10px;
}

.pathway-card {
  display: flex; flex-direction: column;
  gap: 4px;
  padding: 18px 20px 16px;
  border-radius: var(--r-md);
  /* Match the feeling-card tinted bg so the descriptor stays the anchor */
  background: color-mix(in oklch, var(--pw-accent, var(--text)) 14%, var(--bg));
  border: 1.5px solid transparent;
  cursor: pointer;
  text-align: left;
  transition: transform 0.15s var(--ease), border-color 0.18s var(--ease), background 0.18s var(--ease), box-shadow 0.18s var(--ease);
  position: relative;
  overflow: hidden;
  justify-content: flex-start;
}
.pathway-card:hover {
  transform: translateY(-2px);
  border-color: var(--pw-accent, var(--text));
  background: color-mix(in oklch, var(--pw-accent, transparent) 22%, var(--bg));
  box-shadow: 0 6px 16px color-mix(in oklch, var(--pw-accent, transparent) 18%, transparent);
}
.pathway-grid {
  align-content: start;
}
.pathway-gfx {
  width: 64px; height: 64px;
  display: grid; place-items: center;
  /* Darker tone so the icon reads strongly on tinted bg */
  color: color-mix(in oklch, var(--pw-accent, var(--text)) 80%, var(--text));
  margin-bottom: 4px;
}
.pathway-gfx svg { width: 100%; height: 100%; }
.pathway-card .icon-circle {
  /* kept for any legacy use */
  width: 44px; height: 44px;
  border-radius: var(--r-pill);
  background: var(--bg-deeper);
  display: grid; place-items: center;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.pathway-title {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.005em;
  line-height: 1.2;
  color: var(--text);
}
.pathway-blurb {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 500;
  line-height: 1.35;
}

/* Confirmation step */
.confirm {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  padding: 24px;
}
.confirm-face { width: 180px; height: 180px; }
.confirm-q {
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-align: center;
  text-wrap: balance;
}
.confirm-actions {
  display: flex;
  gap: 56px;
  align-items: center;
}
.confirm-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--r-pill);
  font-size: 14px;
  font-weight: 800;
  transition: transform 0.12s var(--ease), box-shadow 0.2s var(--ease);
  font-family: inherit;
  letter-spacing: -0.005em;
}
.confirm-btn:active { transform: scale(0.96); }
.confirm-btn.yes {
  width: 180px; height: 180px;
  background: var(--temp-100);
  color: var(--temp-700);
  border: 3px solid var(--temp-500);
  font-size: 16px;
  box-shadow: 0 12px 36px oklch(0.55 0.10 70 / 0.18);
}
.confirm-btn.yes:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 48px oklch(0.55 0.10 70 / 0.24);
}
.confirm-btn.no {
  width: 96px; height: 96px;
  background: transparent;
  color: var(--text-muted);
  border: 2px solid var(--line);
  font-size: 11px;
  opacity: 0.85;
}
.confirm-btn.no:hover {
  background: var(--surface-soft);
  color: var(--text-secondary);
  opacity: 1;
}

/* Processing destination panel */
.processing-screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px;
  text-align: center;
  gap: 24px;
}
.processing-message {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  max-width: 22ch;
  text-wrap: balance;
}
.processing-suggest {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  max-width: 640px;
}
.suggest {
  padding: 12px 20px;
  border-radius: var(--r-pill);
  background: var(--surface-soft);
  border: 1.5px solid var(--line-soft);
  font-weight: 700;
  color: var(--text);
}

/* ============================================================
   Parent area: settings / logs
   ============================================================ */

.parent {
  display: flex;
  flex-direction: column;
  flex: 1;
  background: var(--bg-deeper);
}

.parent-top {
  padding: 28px 40px 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}
.parent-title {
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -0.025em;
}
.parent-tabs {
  display: flex;
  gap: 6px;
  padding: 16px 40px 0;
}
.parent-tab {
  padding: 10px 18px;
  border-radius: var(--r-pill);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-secondary);
  transition: background 0.18s var(--ease), color 0.18s var(--ease);
}
.parent-tab:hover { background: var(--surface-soft); }
.parent-tab.active { background: var(--text); color: var(--text-on-color); }

.parent-body {
  padding: 24px 40px 32px;
  flex: 1;
  overflow: auto;
}

/* Logs list */
.log-entry {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 20px;
  align-items: center;
  padding: 16px 18px;
  background: var(--surface);
  border-radius: var(--r-md);
  border: 1.5px solid var(--line-soft);
  margin-bottom: 10px;
  cursor: pointer;
  transition: border-color 0.18s var(--ease);
}
.log-entry:hover { border-color: var(--line); }

.log-mini-viz {
  width: 80px; height: 80px;
  border-radius: var(--r-md);
  background: var(--bg-deeper);
  display: grid; place-items: center;
  overflow: hidden;
  position: relative;
}

.log-meta { display: flex; flex-direction: column; gap: 6px; }
.log-date { font-size: 13px; color: var(--text-secondary); font-weight: 600; }
.log-summary { font-size: 16px; font-weight: 700; color: var(--text); }
.log-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }

.log-action { color: var(--text-muted); }

/* Settings list rows */
.settings-section {
  background: var(--surface);
  border-radius: var(--r-lg);
  border: 1.5px solid var(--line-soft);
  margin-bottom: 18px;
  overflow: hidden;
}
.settings-section-title {
  padding: 18px 24px 8px;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
}
.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  gap: 16px;
  border-top: 1px solid var(--line-soft);
}
.setting-row:first-of-type { border-top: none; }
.setting-row .left { display: flex; align-items: center; gap: 14px; flex: 1; }
.setting-row .label { font-size: 16px; font-weight: 700; }
.setting-row .desc { font-size: 13px; color: var(--text-secondary); margin-top: 2px; font-weight: 500; }

/* Switch */
.switch {
  width: 48px; height: 28px;
  background: var(--line);
  border-radius: var(--r-pill);
  position: relative;
  cursor: pointer;
  transition: background 0.2s var(--ease);
  flex-shrink: 0;
}
.switch::after {
  content: '';
  position: absolute;
  left: 3px; top: 3px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  transition: transform 0.22s var(--ease);
}
.switch.on { background: var(--text); }
.switch.on::after { transform: translateX(20px); }

/* Segmented */
.segmented {
  display: inline-flex;
  background: var(--surface-soft);
  border-radius: var(--r-pill);
  padding: 3px;
  border: 1px solid var(--line-soft);
}
.segmented button {
  padding: 8px 14px;
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
  transition: background 0.18s var(--ease), color 0.18s var(--ease);
}
.segmented button.active {
  background: var(--text);
  color: var(--text-on-color);
}

/* Export filter chips */
.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--surface-soft);
  border: 1.5px solid var(--line-soft);
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease), color 0.15s var(--ease), transform 0.12s var(--ease);
  text-transform: capitalize;
  font-family: inherit;
}
.filter-chip:hover { background: var(--bg-deeper); }
.filter-chip.selected {
  background: color-mix(in oklch, var(--chip-accent, var(--text)) 14%, var(--bg));
  border-color: var(--chip-accent, var(--text));
  color: color-mix(in oklch, var(--chip-accent, var(--text)) 80%, var(--text));
}

/* Export card */
.export-card {
  background: linear-gradient(150deg, var(--temp-100), var(--shape-100));
  border-radius: var(--r-lg);
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

/* Toast */
.toast {
  position: absolute;
  bottom: 24px; left: 50%;
  transform: translateX(-50%);
  background: var(--text);
  color: var(--text-on-color);
  padding: 12px 22px;
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: 14px;
  box-shadow: var(--shadow-md);
  z-index: 100;
  animation: toastIn 0.3s var(--ease);
}
@keyframes toastIn {
  from { opacity: 0; transform: translate(-50%, 12px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* Misc */
.flex { display: flex; }
.between { justify-content: space-between; }
.center { align-items: center; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.muted { color: var(--text-secondary); }
.tiny { font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }

/* ============================================================
   Pathway editor
   ============================================================ */

.pe-root {
  padding: 24px 40px 32px;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.pe-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.pe-grid {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 24px;
  flex: 1;
  min-height: 0;
}

.pe-rail {
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  padding-right: 4px;
  min-height: 0;
}
.pe-rail-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px 8px 6px;
  border-radius: var(--r-md);
  background: transparent;
  border: 1.5px solid transparent;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease);
  position: relative;
}
.pe-rail-row:hover { background: var(--surface-soft); }
.pe-rail-row.active {
  background: var(--surface);
  border-color: var(--line);
  box-shadow: var(--shadow-sm);
}
.pe-rail-form {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.pe-rail-name { font-size: 15px; font-weight: 700; color: var(--text); flex: 1; }
.pe-rail-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--shape-500);
}

.pe-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
}
.pe-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 24px;
}

.pe-section-label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 10px;
}

.pe-card-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pe-card-row {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1.5px solid var(--line-soft);
  border-radius: var(--r-md);
  transition: opacity 0.2s var(--ease);
}
.pe-card-row.disabled { opacity: 0.45; }
.pe-card-gfx { width: 40px; height: 40px; display: grid; place-items: center; }
.pe-card-gfx svg { width: 100%; height: 100%; }
.pe-card-info { display: flex; flex-direction: column; min-width: 0; }
.pe-card-title { font-size: 15px; font-weight: 800; letter-spacing: -0.005em; color: var(--text); }
.pe-card-blurb { font-size: 13px; color: var(--text-secondary); font-weight: 500; margin-top: 2px; }

.pe-empty {
  padding: 18px 20px;
  background: var(--bg-deeper);
  border-radius: var(--r-md);
  border: 1.5px dashed var(--line);
  font-size: 14px;
  color: var(--text-secondary);
  font-weight: 500;
  line-height: 1.5;
}

.pe-overview-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: var(--surface);
  border: 1.5px solid var(--line-soft);
  border-radius: var(--r-md);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background 0.15s var(--ease), transform 0.12s var(--ease);
  width: 100%;
}
.pe-overview-row:hover { background: var(--surface-soft); transform: translateY(-1px); }
.pe-overview-info { flex: 1; min-width: 0; }

.pe-preview {
  padding: 16px;
  background: var(--bg-deeper);
  border-radius: var(--r-md);
  margin-bottom: 8px;
}

.pe-gfx-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 8px;
}
.pe-gfx-tile {
  aspect-ratio: 1;
  border-radius: var(--r-sm);
  background: var(--surface-soft);
  border: 2px solid transparent;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
  padding: 8px;
  color: var(--text-secondary);
}
.pe-gfx-tile:hover { background: var(--bg-deeper); }
.pe-gfx-tile.selected {
  border-color: var(--text);
  background: var(--surface);
  color: var(--text);
}
.pe-gfx-tile svg { width: 100%; height: 100%; }

/* ============================================================
   Drawing tool
   ============================================================ */

.screen.drawing {
  display: flex;
  flex-direction: column;
  background: var(--bg-deeper);
  height: 100%;
  overflow: hidden;
}

.drawing-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px 8px;
  gap: 16px;
  flex-shrink: 0;
}

.drawing-canvas-wrap {
  flex: 1;
  margin: 8px 24px;
  background: #FAF5EB;
  border-radius: var(--r-lg);
  box-shadow: 0 1px 2px oklch(0.4 0.03 60 / 0.08), inset 0 0 0 1px var(--line-soft);
  position: relative;
  overflow: hidden;
  min-height: 0;
}

.drawing-tools {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: 14px 24px 18px;
  gap: 12px;
  flex-shrink: 0;
}

.drawing-tool-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  padding: 6px;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--line-soft);
}

.drawing-swatch {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 3px solid transparent;
  cursor: pointer;
  transition: transform 0.12s var(--ease), border-color 0.12s var(--ease), box-shadow 0.12s var(--ease);
  padding: 0;
  font-family: inherit;
}
.drawing-swatch:hover { transform: scale(1.08); }
.drawing-swatch.selected {
  border-color: var(--text);
  transform: scale(1.08);
  box-shadow: 0 4px 12px oklch(0.4 0.03 60 / 0.18);
}

.drawing-tool-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: transparent;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--text-secondary);
  transition: background 0.12s var(--ease), color 0.12s var(--ease), transform 0.12s var(--ease);
  padding: 0;
  font-family: inherit;
}
.drawing-tool-btn:hover { background: var(--bg-deeper); color: var(--text); }
.drawing-tool-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.drawing-tool-btn.selected {
  background: var(--text);
  color: var(--text-on-color);
  transform: scale(1.05);
}
.drawing-tool-btn.drawing-size .dot-preview {
  display: block;
  border-radius: 50%;
  transition: background 0.15s var(--ease);
}
.drawing-tool-btn.drawing-size.selected .dot-preview {
  outline: 2px solid var(--text-on-color);
  outline-offset: 2px;
}

/* Solar/lunar phase chip beside wordmark */
.solar-lunar {
  width: 48px;
  height: 32px;
  border-radius: var(--r-pill);
  display: grid;
  place-items: center;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px oklch(0.95 0.01 75 / 0.5);
}
.sl-svg { width: 48px; height: 32px; }
@keyframes sl-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.08); opacity: 0.85; }
}
.sl-pulse {
  transform-origin: center;
  animation: sl-pulse 4s var(--ease-organic) infinite;
}
@keyframes sl-moonglow {
  0%, 100% { filter: brightness(0.95); }
  50% { filter: brightness(1.1); }
}
.sl-moonglow { animation: sl-moonglow 5s var(--ease-organic) infinite; }
@keyframes sl-twinkle {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}
.sl-twinkle { animation: sl-twinkle 2.4s var(--ease-organic) infinite; }

/* ============================================================
   Breathing tool
   ============================================================ */

.screen.breathing {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.breathing-stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  padding: 24px;
}
.breath-circle {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  transition: transform var(--phase-dur, 4000ms) cubic-bezier(0.5, 0, 0.5, 1);
  display: grid;
  place-items: center;
  position: relative;
}
.breath-circle.scale-small { transform: scale(0.5); }
.breath-circle.scale-big   { transform: scale(1); }
.breath-circle-inner {
  width: 60%;
  height: 60%;
  border-radius: 50%;
  opacity: 0.7;
}
.breath-phase {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
}
.breath-count {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
}
.breathing-foot {
  display: flex;
  justify-content: center;
  padding: 0 24px 32px;
}
.iconbtn.active {
  background: var(--text);
  color: var(--text-on-color);
}

/* ============================================================
   Soundboard
   ============================================================ */

.screen.soundboard { display: flex; flex-direction: column; }
.soundboard-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 16px 32px 20px;
  align-content: stretch;
  min-height: 0;
}
.soundboard-grid.sb-grid-12 {
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
}
.soundboard-grid.sb-grid-6 {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
}
.sound-pad {
  aspect-ratio: auto;
  border-radius: var(--r-lg);
  border: 2.5px solid;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform 0.15s var(--ease), background 0.15s var(--ease), box-shadow 0.15s var(--ease);
  position: relative;
  overflow: hidden;
  font-family: inherit;
  min-height: 0;
}
.sound-pad:hover { transform: translateY(-2px); }
.sound-pad.pressed {
  transform: scale(0.96);
  box-shadow: inset 0 0 0 3px var(--pad-color), 0 0 40px var(--pad-color);
}
.sound-pad-shape {
  width: 70%;
  max-width: 88px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
.sound-pad-shape .ssh {
  width: 100%;
  height: 100%;
}
.sound-pad-ripple {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, var(--pad-color) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.2s var(--ease);
  pointer-events: none;
}
.sound-pad.pressed .sound-pad-ripple { opacity: 0.45; }

/* Per-shape press animations */
@keyframes ssh-thump-k {
  0%   { transform: scaleY(1); }
  30%  { transform: scaleY(0.78); }
  100% { transform: scaleY(1); }
}
.ssh-thump { animation: ssh-thump-k 0.5s var(--ease-organic); transform-origin: center bottom; }

@keyframes ssh-shake-k {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-8deg); }
  40% { transform: rotate(8deg); }
  60% { transform: rotate(-5deg); }
  80% { transform: rotate(5deg); }
}
.ssh-shake { animation: ssh-shake-k 0.55s ease-in-out; transform-origin: center; }

@keyframes ssh-ring-k {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-7deg); }
  50% { transform: rotate(0deg); }
  75% { transform: rotate(7deg); }
}
.ssh-ring { animation: ssh-ring-k 0.6s ease-in-out; transform-origin: center top; }

@keyframes ssh-burst-k {
  0% { transform: scale(0.9); }
  40% { transform: scale(1.12); }
  100% { transform: scale(1); }
}
.ssh-burst { animation: ssh-burst-k 0.5s var(--ease-organic); transform-origin: center; }

@keyframes ssh-clap-k-l {
  0% { transform: translateX(-3px); }
  40% { transform: translateX(7px); }
  100% { transform: translateX(0); }
}
@keyframes ssh-clap-k-r {
  0% { transform: translateX(3px); }
  40% { transform: translateX(-7px); }
  100% { transform: translateX(0); }
}
.ssh-clap .ssh-clap-l { animation: ssh-clap-k-l 0.4s var(--ease-organic); transform-origin: center; }
.ssh-clap .ssh-clap-r { animation: ssh-clap-k-r 0.4s var(--ease-organic); transform-origin: center; }

@keyframes ssh-rise-k {
  0% { transform: translateY(8px); opacity: 0.6; }
  100% { transform: translateY(-2px); opacity: 1; }
}
.ssh-rise { animation: ssh-rise-k 0.5s var(--ease-organic); transform-origin: center; }

@keyframes ssh-splat-k {
  0%   { transform: translateY(-6px) scaleY(1) scaleX(1); }
  35%  { transform: translateY(4px) scaleY(0.74) scaleX(1.22); }
  100% { transform: translateY(0) scaleY(1) scaleX(1); }
}
.ssh-splat { animation: ssh-splat-k 0.55s cubic-bezier(0.45, 0, 0.55, 1); transform-origin: center bottom; }

@keyframes ssh-sparkle-k {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(1.1); }
}
.ssh-sparkle { animation: ssh-sparkle-k 0.6s var(--ease-organic); transform-origin: center; }

@keyframes ssh-pop-k {
  0% { transform: scale(0.85); }
  40% { transform: scale(1.18); }
  100% { transform: scale(1); }
}
.ssh-pop { animation: ssh-pop-k 0.45s var(--ease-organic); transform-origin: center; }

@keyframes ssh-ripple-k {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}
.ssh-ripple { animation: ssh-ripple-k 0.5s var(--ease-organic); transform-origin: center bottom; }

@keyframes ssh-flow-k {
  0% { transform: translateX(-4px); }
  100% { transform: translateX(4px); }
}
.ssh-flow { animation: ssh-flow-k 0.5s var(--ease-organic) alternate 2; }

@keyframes ssh-zoom-k {
  0% { transform: translateX(-8px); }
  100% { transform: translateX(4px); }
}
.ssh-zoom { animation: ssh-zoom-k 0.45s var(--ease-organic); transform-origin: center; }

/* ============================================================
   Music player
   ============================================================ */

/* Music — horizontal bars: symbol + waveform + play */
.music-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 32px 20px;
  overflow-y: auto;
  min-height: 0;
}
.music-bar {
  display: grid;
  grid-template-columns: 72px 1fr 48px;
  align-items: center;
  gap: 16px;
  padding: 10px 18px 10px 10px;
  border-radius: var(--r-pill);
  border: 2px solid color-mix(in oklch, var(--track-color) 40%, transparent);
  cursor: pointer;
  transition: transform 0.15s var(--ease), box-shadow 0.18s var(--ease);
  font-family: inherit;
  text-align: left;
}
.music-bar:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px color-mix(in oklch, var(--track-color) 22%, transparent);
}
.music-bar-symbol {
  width: 64px; height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.music-bar-waveform {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 40px;
  width: 100%;
  overflow: hidden;
}
.music-bar-waveform span {
  flex: 1;
  border-radius: 2px;
  min-height: 4px;
  opacity: 0.7;
}
.music-bar-play {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--surface);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.music-player-stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 24px;
}
.music-disc {
  width: 280px;
  height: 280px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  animation: music-spin 24s linear infinite;
}
@keyframes music-spin {
  to { transform: rotate(360deg); }
}
.music-title {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.015em;
  text-align: center;
}
.music-progress {
  width: 280px;
  height: 6px;
  background: var(--surface-soft);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}
.music-progress-bar {
  height: 100%;
  width: 0;
  border-radius: 3px;
  animation: music-progress 60s linear forwards;
}
@keyframes music-progress {
  to { width: 100%; }
}
.music-controls {
  display: flex;
  gap: 12px;
}

/* ============================================================
   PIN Gate — keypad screen that locks the parent area
   ============================================================ */
.pin-gate {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-deeper) 100%);
  animation: screenIn 0.3s var(--ease) both;
}
.pin-card {
  position: relative;
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
}
.pin-cancel {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--surface-soft);
  border: 1.5px solid var(--line-soft);
  color: var(--text-secondary);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 0.15s var(--ease);
}
.pin-cancel:hover { background: var(--bg-deeper); }

.pin-lock-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--surface-soft);
  border: 1.5px solid var(--line-soft);
  display: grid;
  place-items: center;
  color: var(--text-secondary);
  margin-bottom: 4px;
}
.pin-title {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.012em;
}
.pin-sub {
  font-size: 15px;
  color: var(--text-secondary);
  font-weight: 500;
  margin-top: -6px;
  text-wrap: balance;
}
.pin-dots {
  display: flex;
  gap: 16px;
  margin: 14px 0 18px;
}
.pin-dots.shake { animation: pinShake 0.4s var(--ease-organic); }
@keyframes pinShake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-8px); }
  40%, 80% { transform: translateX(8px); }
}
.pin-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: transparent;
  border: 2px solid var(--line);
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease), transform 0.15s var(--ease);
}
.pin-dot.filled {
  background: var(--text);
  border-color: var(--text);
  transform: scale(1.05);
}

.pin-keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  width: 100%;
}
.pin-key {
  aspect-ratio: 1.2;
  border-radius: 50%;
  background: var(--surface);
  border: 1.5px solid var(--line-soft);
  font-family: inherit;
  font-size: 26px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: background 0.12s var(--ease), transform 0.1s var(--ease);
  display: grid;
  place-items: center;
}
.pin-key:hover  { background: var(--bg-deeper); }
.pin-key:active { transform: scale(0.94); }
.pin-key:disabled { opacity: 0.4; cursor: not-allowed; }
.pin-back {
  background: transparent;
  border-color: transparent;
  color: var(--text-secondary);
}
.pin-back:hover { background: var(--surface-soft); }


/* ============================================================
   Parent Notification screens — when the kid taps a card
   that routes to a grown-up.
   ============================================================ */
.screen.parent-notif {
  display: flex;
  flex-direction: column;
}
.pn-stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 8px 32px 32px;
  gap: 14px;
  overflow-y: auto;
}
.pn-feeling {
  min-height: 140px;
  display: grid;
  place-items: center;
  margin-top: 4px;
}
.pn-name {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text-secondary);
  text-wrap: balance;
}
.pn-name strong { color: var(--text); font-weight: 800; }
.pn-message {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.012em;
  line-height: 1.25;
  text-wrap: balance;
  max-width: 580px;
  margin-top: 4px;
}
.pn-message.dance {
  font-size: 36px;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  animation: pnBounce 0.9s var(--ease-organic) infinite;
}
@keyframes pnBounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
.pn-ideas {
  align-self: stretch;
  max-width: 600px;
  margin: 12px auto 0;
  padding: 20px 22px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  text-align: left;
}
.pn-ideas-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 0;
  background: transparent;
  border: none;
  font-family: inherit;
  font-weight: 700;
  font-size: 14px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
}
.pn-ideas-list {
  margin: 4px 0 0;
  padding-left: 22px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--text);
  font-weight: 500;
}
.pn-ideas-list li { margin: 6px 0; text-wrap: pretty; }
.pn-actions {
  margin-top: 18px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Tone variations */
.screen.parent-notif.tone-still .pn-message  { font-size: 24px; }
.screen.parent-notif.tone-urgent .pn-message { font-size: 28px; max-width: 480px; }
.screen.parent-notif.tone-urgent .pn-name    { font-size: 18px; }
.screen.parent-notif.tone-dance .pn-feeling { animation: pnBounce 0.9s var(--ease-organic) infinite; animation-delay: 0.15s; }


/* ============================================================
   Solo Prompt — kid does the thing themselves.
   ============================================================ */
.screen.solo-prompt {
  display: flex;
  flex-direction: column;
}
.sp-stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 12px 32px 28px;
  gap: 14px;
  overflow-y: auto;
}
.sp-glyph {
  width: 140px;
  height: 140px;
  display: grid;
  place-items: center;
  margin-top: 8px;
}
.sp-glyph svg { width: 110px; height: 110px; }
.sp-title {
  font-size: 30px;
  font-weight: 900;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.sp-subtitle {
  font-size: 18px;
  color: var(--text-secondary);
  font-weight: 600;
  margin-top: -6px;
  text-wrap: balance;
}
.sp-steps {
  margin: 14px 0 0;
  padding-left: 22px;
  list-style: decimal;
  font-size: 18px;
  line-height: 1.55;
  font-weight: 600;
  color: var(--text);
  text-align: left;
  max-width: 460px;
}
.sp-steps li { margin: 6px 0; }
.sp-cta {
  margin-top: 18px;
  padding: 16px 32px;
  color: white;
  font-size: 18px;
}


/* ============================================================
   Camera tool
   ============================================================ */
.screen.camera { display: flex; flex-direction: column; }
.cam-stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 24px 20px;
  gap: 16px;
  min-height: 0;
}
.cam-frame {
  position: relative;
  width: 100%;
  max-width: 640px;
  flex: 1;
  min-height: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #1a1714;
  display: grid;
  place-items: center;
}
.cam-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cam-video.mirror { transform: scaleX(-1); }
.cam-flash {
  position: absolute;
  inset: 0;
  background: white;
  opacity: 0.85;
  animation: camFlash 0.22s ease-out forwards;
  pointer-events: none;
}
@keyframes camFlash {
  from { opacity: 0.85; }
  to   { opacity: 0; }
}
.cam-flip {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(0,0,0,0.42);
  border: none;
  display: grid;
  place-items: center;
  color: white;
  cursor: pointer;
  backdrop-filter: blur(8px);
}
.cam-flip:active { transform: scale(0.95); }
.cam-error {
  padding: 32px;
  color: var(--text-on-color);
  text-align: center;
}
.cam-error-title { font-size: 18px; font-weight: 800; margin-bottom: 8px; }
.cam-error-sub   { font-size: 14px; opacity: 0.8; }

.cam-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  max-width: 640px;
}
.cam-shutter {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: white;
  border: 3px solid var(--line);
  padding: 6px;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform 0.12s var(--ease);
}
.cam-shutter:hover  { transform: scale(1.04); }
.cam-shutter:active { transform: scale(0.94); }
.cam-shutter:disabled { opacity: 0.4; cursor: not-allowed; }
.cam-shutter span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.cam-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  width: 100%;
  max-width: 640px;
  padding-bottom: 4px;
}
.cam-thumb {
  position: relative;
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--bg-deeper);
}
.cam-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cam-thumb-x {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(0,0,0,0.55);
  border: none;
  color: white;
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
}


/* ============================================================
   "Bring a grown-up" — quiet, optional pill on every
   expressive tool screen + the overlay that surfaces when tapped.
   ============================================================ */
.invite-btn {
  position: absolute;
  top: 92px;
  right: 24px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 12px;
  border-radius: var(--r-pill);
  background: color-mix(in oklch, var(--bg) 70%, transparent);
  border: 1.5px solid var(--line);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 0.18s var(--ease), color 0.18s var(--ease), transform 0.12s var(--ease);
}
.invite-btn:hover  { background: var(--surface); color: var(--text); transform: translateY(-1px); }
.invite-btn:active { transform: scale(0.96); }

/* Overlay covers the screen, parent-facing copy */
.invite-overlay {
  position: absolute;
  inset: 0;
  z-index: 50;
  background: color-mix(in oklch, var(--text) 55%, transparent);
  display: grid;
  place-items: center;
  padding: 32px;
  animation: screenIn 0.25s var(--ease) both;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.invite-card {
  width: 100%;
  max-width: 560px;
  background: var(--bg);
  border-radius: var(--r-lg);
  padding: 32px 32px 24px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.25);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}
.invite-feeling { min-height: 100px; display: grid; place-items: center; }
.invite-msg {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  text-wrap: balance;
}
.invite-sub {
  font-size: 18px;
  color: var(--text-secondary);
  font-weight: 500;
  margin-top: -4px;
  text-wrap: balance;
}
.invite-suggest {
  align-self: stretch;
  margin-top: 12px;
  padding: 16px 18px;
  background: var(--surface-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  text-align: left;
}
.invite-suggest ul {
  margin: 0;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
  font-weight: 500;
}
.invite-suggest li { margin: 2px 0; }
.invite-actions {
  margin-top: 12px;
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Tiny indicator shown after the kid has invited a grown-up */
.grownup-here {
  position: absolute;
  top: 92px;
  right: 24px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 8px 7px 12px;
  border-radius: var(--r-pill);
  background: color-mix(in oklch, var(--temp-500) 22%, var(--bg));
  border: 1.5px solid color-mix(in oklch, var(--temp-500) 45%, var(--bg));
  color: color-mix(in oklch, var(--temp-500) 70%, var(--text));
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.grownup-here-x {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: transparent;
  border: none;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: inherit;
  opacity: 0.6;
  padding: 0;
  transition: opacity 0.15s var(--ease), background 0.15s var(--ease);
}
.grownup-here-x:hover { opacity: 1; background: color-mix(in oklch, var(--temp-500) 18%, transparent); }

@media (max-width: 520px) {
  .invite-btn, .grownup-here { top: 80px; right: 16px; }
  .invite-btn span { display: none; }
  .invite-btn { padding: 8px; }
  .invite-card { padding: 24px 22px 18px; }
  .invite-msg { font-size: 20px; }
  .invite-sub { font-size: 16px; }
}

/* ============================================================
   Song list in log detail sheet — full play history for a music session
   ============================================================ */
.song-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.song-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
}
.song-row-art {
  width: 52px;
  height: 52px;
  border-radius: var(--r-sm);
  object-fit: cover;
  display: block;
  flex-shrink: 0;
  background: var(--bg-deeper);
}
.song-row-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.song-row-title {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================================
   Photo gallery in log detail sheet
   ============================================================ */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.photo-tile {
  aspect-ratio: 1;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--bg-deeper);
  border: 1px solid var(--line-soft);
}
.photo-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============================================================
   Recording row — used in LogDetailSheet to play back
   audio-journal recordings attached to a session.
   ============================================================ */
.rec-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rec-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
}
.rec-play {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  display: grid;
  place-items: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.12s var(--ease);
}
.rec-play:hover  { transform: scale(1.05); }
.rec-play:active { transform: scale(0.95); }
.rec-bar {
  margin-top: 6px;
  height: 4px;
  width: 100%;
  border-radius: 2px;
  background: var(--line-soft);
  overflow: hidden;
}
.rec-bar-fill {
  height: 100%;
  width: 0;
  border-radius: 2px;
  transition: width 0.1s linear;
}

/* Audio journal — trash button alignment */
.aj-item-trash {
  margin-left: 4px;
  color: var(--text-muted);
}
.aj-item-trash:hover { color: oklch(0.5 0.12 30); }

/* ============================================================
   Songs Player — real audio, cover-art-first
   A separate player for Smidgi's actual songs. Lives alongside
   the original MusicPlayer (ambient placeholder tracks).
   ============================================================ */

.screen.songs-pick,
.screen.songs-now {
  display: flex;
  flex-direction: column;
  transition: background 0.6s var(--ease);
}

/* Centered topbar override: badge stays visually centered even when
   left/right widgets have different widths (e.g. iconbtn vs "All done"). */
.screen.songs-now .topbar,
.screen.songs-pick .topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  justify-items: center;
}
.screen.songs-now .topbar > :first-child,
.screen.songs-pick .topbar > :first-child { justify-self: start; }
.screen.songs-now .topbar > :last-child,
.screen.songs-pick .topbar > :last-child  { justify-self: end; }

/* ---- Browse grid ---- */
.songs-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  padding: 12px 32px 28px;
  overflow-y: auto;
  align-content: start;
}
@media (max-width: 720px) {
  .songs-grid { grid-template-columns: repeat(2, 1fr); padding: 8px 16px 20px; gap: 14px; }
}

.songs-card {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  font-family: inherit;
  transition: transform 0.15s var(--ease);
}
.songs-card:hover { transform: translateY(-3px); }
.songs-card:active { transform: scale(0.98); }

.songs-card-art {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg-deeper);
  border: 2px solid var(--line-soft);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.songs-card-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.songs-card-play {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 16px rgba(0,0,0,0.18);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}
.songs-card:hover .songs-card-play,
.songs-card:focus-visible .songs-card-play {
  opacity: 1;
  transform: translateY(0);
}
.songs-card-play svg { margin-left: 2px; }
.songs-card-title {
  font-size: 15px;
  font-weight: 800;
  text-align: center;
  letter-spacing: -0.005em;
  padding: 0 4px;
  line-height: 1.25;
}

/* ---- Now Playing ---- */
.songs-now-stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 12px 32px 16px;
  min-height: 0;
}

.songs-cover-wrap {
  position: relative;
  display: grid;
  place-items: center;
  padding: 24px;
}
.songs-cover-glow {
  position: absolute;
  inset: 0;
  filter: blur(28px);
  z-index: 0;
  opacity: 0.9;
  animation: songsPulse 4.2s ease-in-out infinite;
}
@keyframes songsPulse {
  0%, 100% { transform: scale(1);   opacity: 0.75; }
  50%      { transform: scale(1.06); opacity: 1; }
}
.songs-cover {
  position: relative;
  z-index: 1;
  width: clamp(220px, 38vh, 340px);
  aspect-ratio: 1;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 4px solid;
  background: var(--bg);
}
.songs-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.songs-title {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -0.01em;
  text-align: center;
  color: var(--text);
  max-width: 80%;
  text-wrap: balance;
}

.songs-progress {
  position: relative;
  width: min(440px, 80%);
  height: 22px;
  display: flex;
  align-items: center;
  cursor: pointer;
  touch-action: none;
}
.songs-progress-track {
  position: absolute;
  left: 0; right: 0;
  height: 6px;
  border-radius: 3px;
  background: var(--line-soft);
}
.songs-progress-fill {
  position: absolute;
  left: 0;
  height: 6px;
  border-radius: 3px;
  transition: width 0.1s linear;
}
.songs-progress-thumb {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--bg);
  border: 3px solid;
  transform: translateX(-50%);
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  pointer-events: none;
}
.songs-times {
  width: min(440px, 80%);
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  margin-top: -8px;
}

.songs-controls {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 4px;
}
.songs-play {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: none;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform 0.15s var(--ease);
}
.songs-play:hover { transform: scale(1.04); }
.songs-play:active { transform: scale(0.96); }

/* Mini row at bottom — swap song without going back to full browse.
   Distributes evenly across the row (no scroll); items shrink to fit. */
.songs-mini-row {
  display: flex;
  gap: 8px;
  padding: 10px 24px 20px;
  justify-content: space-between;
  align-items: center;
}

.songs-mini {
  flex: 1 1 0;
  min-width: 0;
  max-width: 56px;
  aspect-ratio: 1;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 2px solid;
  background: var(--bg-deeper);
  cursor: pointer;
  padding: 0;
  transition: transform 0.15s var(--ease), box-shadow 0.2s var(--ease);
}
.songs-mini:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.1); }
.songs-mini:active { transform: scale(0.96); }
.songs-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }


/* ============================================================
   Audio journal
   ============================================================ */

.screen.audio-journal { display: flex; flex-direction: column; }
.aj-stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 24px;
}
.aj-record-btn {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: white;
  transition: transform 0.15s var(--ease);
}
.aj-record-btn:active { transform: scale(0.97); }
.aj-record-btn.recording {
  animation: aj-pulse 1.5s var(--ease-organic) infinite;
}
@keyframes aj-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
.aj-bars {
  display: flex;
  gap: 5px;
  align-items: flex-end;
  height: 50px;
}
.aj-bars span {
  width: 6px;
  background: white;
  border-radius: 3px;
  animation: aj-bar 0.8s ease-in-out infinite;
}
.aj-bars span:nth-child(1) { height: 30%; animation-delay: 0.0s; }
.aj-bars span:nth-child(2) { height: 70%; animation-delay: 0.1s; }
.aj-bars span:nth-child(3) { height: 50%; animation-delay: 0.2s; }
.aj-bars span:nth-child(4) { height: 90%; animation-delay: 0.3s; }
.aj-bars span:nth-child(5) { height: 60%; animation-delay: 0.4s; }
.aj-bars span:nth-child(6) { height: 40%; animation-delay: 0.5s; }
.aj-bars span:nth-child(7) { height: 80%; animation-delay: 0.6s; }
@keyframes aj-bar {
  0%, 100% { transform: scaleY(0.4); }
  50% { transform: scaleY(1); }
}
.aj-time {
  font-size: 36px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--text);
}
.aj-instruction {
  font-size: 16px;
  color: var(--text-secondary);
  font-weight: 600;
}
.aj-list {
  padding: 0 32px 24px;
  max-height: 200px;
  overflow-y: auto;
}
.aj-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  margin-bottom: 8px;
}
.aj-item-icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--bg-deeper);
  display: grid; place-items: center;
  color: var(--text-secondary);
}
.aj-wave-mock {
  display: flex;
  gap: 2px;
  align-items: center;
  height: 24px;
}
.aj-wave-mock span {
  width: 2px;
  background: var(--text-muted);
  border-radius: 2px;
}

/* ============================================================
   Quiet space
   ============================================================ */

.screen.quiet-space { display: flex; flex-direction: column; transition: background 0.8s var(--ease); }
.screen.quiet-space .topbar { position: relative; z-index: 2; }
.qs-stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  pointer-events: none;
  min-height: 0;
}
.qs-stage > * { pointer-events: auto; }
.qs-stage > .qs-circle { pointer-events: none; }
.qs-circle {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  animation: qs-breathe 8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  pointer-events: none;
}
@keyframes qs-breathe {
  0%, 100% { transform: scale(0.85); }
  50% { transform: scale(1.05); }
}
.qs-timer {
  font-size: 32px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  letter-spacing: 0.02em;
}
.qs-foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 0 32px 28px;
  gap: 24px;
  flex-wrap: wrap;
}
.qs-pick {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--r-pill);
  border: 2px solid;
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.15s var(--ease), transform 0.12s var(--ease);
}
.qs-pick:hover { transform: translateY(-2px); }

/* ============================================================
   All Done acknowledgment
   ============================================================ */

.screen.all-done {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 32px;
  transition: background 0.6s var(--ease);
}
.ad-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  margin-bottom: 40px;
}
.ad-badge {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin-bottom: 12px;
}
.ad-line {
  text-align: center;
  text-wrap: balance;
  max-width: 22ch;
  letter-spacing: -0.015em;
}
.ad-line-1 { font-size: 36px; font-weight: 800; color: var(--text); }
.ad-line-2 { font-size: 22px; font-weight: 500; color: var(--text-secondary); }
.ad-line-3 { font-size: 18px; font-weight: 500; color: var(--text-muted); margin-top: 6px; }
.ad-home { margin-top: 8px; }

/* ============================================================
   Parent alert visual — for pathway cards routing to a prompt
   the child shows a grown-up (no `destination` → no interactive tool)
   ============================================================ */
.pathway-card[data-needs-grownup="true"]::before {
  content: '';
  position: absolute;
  top: 12px; right: 12px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--pw-accent, var(--text));
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--pw-accent, var(--text)) 22%, transparent);
  animation: parent-alert-pulse 2.4s var(--ease-organic) infinite;
}
@keyframes parent-alert-pulse-alt {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.3); }
}
@keyframes parent-alert-pulse {
  0%, 100% { box-shadow: 0 0 0 4px color-mix(in oklch, var(--pw-accent, var(--text)) 22%, transparent); }
  50% { box-shadow: 0 0 0 8px color-mix(in oklch, var(--pw-accent, var(--text)) 35%, transparent); }
}

/* Log artifact preview in the detail sheet */
.artifact-preview {
  margin-top: 22px;
  padding: 16px 18px;
  background: var(--surface-soft);
  border-radius: var(--r-md);
  border: 1px solid var(--line-soft);
}
.artifact-label {
  display: block;
  color: var(--shape-700);
  margin-bottom: 10px;
}
.artifact-row {
  display: flex;
  align-items: center;
  gap: 16px;
}
.artifact-image {
  width: 120px; height: 120px;
  border-radius: var(--r-sm);
  overflow: hidden;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.artifact-glyph {
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--bg-deeper);
  display: grid;
  place-items: center;
  color: var(--text-secondary);
  flex-shrink: 0;
}
.ap-circle {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--temp-200);
  animation: round-breath 3s var(--ease-organic) infinite;
}
.artifact-meta {
  font-size: 15px;
  line-height: 1.4;
  color: var(--text);
}
/* ============================================================
   Scrollbars — warm and soft, matches the rest of the system
   ============================================================ */

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: oklch(0.78 0.02 70) transparent;
}

/* WebKit (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: oklch(0.82 0.02 70);
  border-radius: 999px;
  border: 2px solid var(--bg);
  transition: background 0.2s var(--ease);
}
::-webkit-scrollbar-thumb:hover {
  background: oklch(0.68 0.025 65);
}
::-webkit-scrollbar-corner {
  background: transparent;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.1s !important; }
}

/* Children cards in Settings → Children */
.children-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

/* ============================================================
   Parent Guide — multi-section scrollable page
   ============================================================ */

.guide-screen { background: var(--bg); }
.guide-page {
  max-width: 820px;
  margin: 0 auto;
  padding: 12px 56px 80px;
}

.guide-page .guide-hero { padding: 24px 0 16px; }
.guide-hero h1 {
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 12px 0 16px;
  text-wrap: balance;
}
.guide-lede {
  font-size: 18px;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0;
}
.guide-toc {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 16px;
  margin-top: 28px;
  padding: 16px 20px;
  background: var(--bg-deeper);
  border-radius: var(--r-md);
}
.guide-toc a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  padding: 4px 0;
  transition: color 0.15s var(--ease);
}
.guide-toc a:hover { color: var(--text); }

.guide-section {
  margin-top: 56px;
  padding-top: 36px;
  border-top: 1px solid var(--line-soft);
}
.guide-section-label {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 18px;
}
.guide-section-num {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--shape-700);
  font-variant-numeric: tabular-nums;
}
.guide-section-label h2 {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
  text-wrap: balance;
}
.guide-section p {
  font-size: 17px;
  line-height: 1.65;
  margin: 12px 0;
  color: var(--text);
}
.guide-section p.guide-lede {
  font-size: 19px;
  color: var(--text);
}

.guide-callout {
  margin: 22px 0;
  padding: 18px 22px;
  background: var(--bg-deeper);
  border-radius: var(--r-md);
  border-left: 4px solid var(--shape-500);
  font-size: 16px;
  line-height: 1.55;
}
.guide-callout.warm {
  background: color-mix(in oklch, var(--temp-100), var(--bg) 30%);
  border-left-color: var(--temp-700);
}
.guide-callout.strong {
  background: color-mix(in oklch, var(--weight-100), var(--bg) 30%);
  border-left-color: var(--weight-700);
  font-size: 17px;
}

.guide-aside {
  margin-top: 22px;
  padding: 16px 20px;
  background: var(--surface-soft);
  border-radius: var(--r-md);
  font-size: 15px !important;
  color: var(--text-secondary) !important;
  font-style: italic;
  line-height: 1.55 !important;
}

.guide-bullets {
  font-size: 17px;
  line-height: 1.65;
  padding-left: 0;
  list-style: none;
  margin: 12px 0;
}
.guide-bullets li {
  padding: 4px 0 4px 22px;
  position: relative;
}
.guide-bullets li::before {
  content: '·';
  position: absolute;
  left: 8px;
  top: 0;
  color: var(--shape-700);
  font-weight: 800;
  font-size: 22px;
  line-height: 1.6;
}

/* Flow diagram (§2) */
.flow-diagram {
  margin: 28px 0;
  padding: 22px;
  background: var(--bg-deeper);
  border-radius: var(--r-lg);
}
.flow-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}
.flow-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1.5px solid var(--line-soft);
  min-width: 78px;
}
.flow-node.summary {
  background: color-mix(in oklch, var(--temp-100), var(--bg) 30%);
  border-color: var(--temp-200);
  color: var(--temp-700);
}
.flow-node-icon {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  color: var(--n-color, var(--text-secondary));
}
.flow-node-icon svg { width: 26px; height: 26px; }
.flow-node-label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: -0.005em;
  color: var(--text);
}
.flow-arrow {
  color: var(--text-muted);
  font-size: 22px;
  font-weight: 600;
  user-select: none;
}
.flow-legend {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 16px;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
}
.flow-legend-mark {
  display: inline-block;
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 1px 8px;
  border-radius: var(--r-pill);
  margin-right: 6px;
  color: var(--text);
  font-weight: 700;
}

/* Dimension cards (§3) */
.dim-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 24px 0;
}
.dim-card {
  background: var(--dim-bg, var(--surface-soft));
  border: 1.5px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
}
.dim-card-head { margin-bottom: 12px; }
.dim-card-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--dim-700, var(--text));
}
.dim-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}
.dim-option {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border-radius: var(--r-sm);
  padding: 8px 10px;
}
.dim-option-viz {
  width: 36px; height: 36px;
  flex-shrink: 0;
  display: grid; place-items: center;
  overflow: visible;
  position: relative;
}
.dim-option-viz > * {
  width: 100% !important;
  height: 100% !important;
}
.dim-option-viz .anim-warm {
  width: 28px !important;
  height: 28px !important;
  box-shadow: 0 0 8px 2px var(--temp-200) !important;
  animation-duration: 2.6s !important;
}
.dim-option-viz .haze { display: none; }
.dim-option-text { min-width: 0; }
.dim-option-name {
  font-size: 13px;
  font-weight: 800;
  text-transform: capitalize;
  letter-spacing: -0.005em;
  color: var(--text);
}
.dim-option-hint {
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 500;
  line-height: 1.3;
}
.dim-card-note {
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: var(--text) !important;
  margin: 0 0 12px !important;
}
.dim-card-watch {
  background: var(--surface);
  border-radius: var(--r-sm);
  padding: 10px 14px;
  border-left: 3px solid var(--dim-700, var(--shape-700));
}
.dim-card-watch .tiny {
  display: block;
  color: var(--dim-700, var(--shape-700));
  margin-bottom: 4px;
}
.dim-card-watch p {
  font-size: 13px !important;
  line-height: 1.5 !important;
  margin: 0 !important;
  color: var(--text-secondary) !important;
}

.guide-research {
  margin: 24px 0 0;
  background: var(--bg-deeper);
  border-radius: var(--r-md);
  border: 1.5px solid var(--line-soft);
  padding: 0;
  overflow: hidden;
}
.guide-research summary {
  cursor: pointer;
  list-style: none;
  padding: 16px 22px;
  font-weight: 800;
  font-size: 15px;
  color: var(--text);
  letter-spacing: -0.005em;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.guide-research summary::-webkit-details-marker { display: none; }
.guide-research summary::after {
  content: '+';
  font-size: 22px;
  font-weight: 600;
  color: var(--text-secondary);
}
.guide-research[open] summary::after { content: '–'; }
.guide-research-body { padding: 0 22px 18px; }
.guide-research-body p {
  font-size: 15px !important;
  line-height: 1.6 !important;
  color: var(--text) !important;
  margin: 10px 0 !important;
}

/* Compare cards (§4) */
.compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 24px 0;
}
.compare-col {
  background: var(--surface);
  border-radius: var(--r-md);
  border: 1.5px solid var(--line-soft);
  padding: 18px 20px;
}
.compare-col.dismiss {
  background: color-mix(in oklch, var(--bg-deeper) 70%, var(--shape-50));
}
.compare-col.coach {
  background: color-mix(in oklch, var(--temp-50) 70%, var(--bg));
  border-color: var(--temp-200);
}
.compare-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.compare-x, .compare-check {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 14px;
  font-weight: 800;
  color: var(--text-on-color);
}
.compare-x { background: var(--text-muted); }
.compare-check { background: var(--temp-700); }
.compare-title {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
}
.compare-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.compare-col li {
  font-size: 15px;
  line-height: 1.45;
  color: var(--text);
}

/* Do/Don't (§5) */
.dodont {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 24px 0;
}
.dodont-col {
  background: var(--surface);
  border-radius: var(--r-md);
  border: 1.5px solid var(--line-soft);
  padding: 18px 20px;
}
.dodont-col.do { border-left: 4px solid var(--temp-500); }
.dodont-col.dont { border-left: 4px solid var(--text-muted); }
.dodont-head {
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  margin-bottom: 10px;
}
.dodont-col.do .dodont-head { color: var(--temp-700); }
.dodont-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dodont-col li {
  font-size: 15px;
  line-height: 1.45;
  padding-left: 16px;
  position: relative;
  color: var(--text);
}
.dodont-col.do li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  color: var(--temp-700);
  font-weight: 800;
}
.dodont-col.dont li::before {
  content: '\00d7';
  position: absolute;
  left: 0;
  color: var(--text-muted);
  font-weight: 800;
}

/* Mock log entry (§6) */
.mock-log {
  margin: 24px 0;
  padding: 20px;
  background: var(--surface);
  border: 1.5px solid var(--line-soft);
  border-radius: var(--r-lg);
}
.mock-log-date {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 700;
  margin-bottom: 10px;
}
.mock-log-row {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 14px;
  align-items: center;
}
.mock-log-art {
  width: 80px; height: 80px;
  border-radius: var(--r-md);
  background: var(--bg-deeper);
  overflow: hidden;
}
.mock-log-summary {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.4;
}
.mock-log-tags {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 6px;
}
.mock-log-note {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--bg-deeper);
  border-radius: var(--r-sm);
  border-left: 3px solid var(--shape-500);
}

/* Pathway groups (§7) */
.pathgroup {
  margin: 22px 0;
  padding: 22px 24px;
  border-radius: var(--r-lg);
  border: 1.5px solid var(--line-soft);
}
.pathgroup.tools {
  background: color-mix(in oklch, var(--move-50), var(--bg) 30%);
  border-color: var(--move-200);
}
.pathgroup.invites {
  background: color-mix(in oklch, var(--weight-50), var(--bg) 30%);
  border-color: var(--weight-200);
}
.pathgroup-head { margin-bottom: 16px; }
.pathgroup-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--move-700);
  color: var(--text-on-color);
  padding: 4px 10px;
  border-radius: var(--r-pill);
  margin-bottom: 8px;
}
.pathgroup-tag.warm { background: var(--weight-700); }
.pathgroup-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--text);
}
.pathgroup-blurb {
  font-size: 15px;
  color: var(--text);
  line-height: 1.55;
  margin-top: 6px;
}
.pathgroup-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.pathway-preview {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  background: var(--surface);
  border-radius: var(--r-sm);
  border: 1px solid var(--line-soft);
}
.pathway-preview-gfx {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  color: var(--text-secondary);
}
.pathway-preview-gfx svg { width: 100%; height: 100%; }
.pathway-preview-title {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.005em;
}
.pathway-preview-desc {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.35;
  margin-top: 2px;
}

/* Resources (§8) */
.guide-resources {
  margin: 22px 0;
  padding: 18px 22px;
  background: var(--bg-deeper);
  border-radius: var(--r-md);
}
.guide-resources .tiny {
  display: block;
  color: var(--shape-700);
  margin-bottom: 10px;
}
.guide-resources ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.guide-resources li {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
}

/* Close */
.guide-close {
  margin-top: 64px;
  text-align: center;
  padding: 32px 0;
  border-top: 1px solid var(--line-soft);
}
.guide-close p {
  font-size: 22px;
  color: var(--text);
  font-weight: 500;
  margin: 6px 0;
  letter-spacing: -0.01em;
}
.guide-close p strong { font-weight: 800; }

/* ============================================================
   MOBILE — phones in portrait. Stage drops the device chrome,
   layouts collapse to single column, typography scales down.
   ============================================================ */

@media (max-width: 760px) {
  html, body { overflow: auto; }

  .stage {
    position: static;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    display: block;
    min-height: 100vh;
    min-height: 100dvh;
  }
  .device {
    width: 100%;
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    max-width: none;
    max-height: none;
    aspect-ratio: auto;
    border-radius: 0;
    box-shadow: none;
  }
  .screen {
    position: relative;
    inset: auto;
    overflow: visible;
    min-height: 100vh;
    min-height: 100dvh;
  }

  /* Hide the dev reset button on mobile */
  body > .stage > button[title="Reset demo data"],
  body > div > button[title="Reset demo data"] { display: none; }

  /* ---------- Home ---------- */
  .home {
    padding: 20px 18px 28px;
    overflow: visible;
  }
  .home-header { gap: 12px; }
  .wordmark { font-size: 22px; }
  .wordmark .dot { width: 10px; height: 10px; }
  .home-greeting { margin-top: 18px; font-size: 15px; }
  .home-title { font-size: 28px; max-width: none; }

  .children-row {
    margin-top: 16px;
    gap: 10px;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 4px;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }
  .children-row::-webkit-scrollbar { height: 4px; }
  .child-card {
    flex-shrink: 0;
    min-height: 60px;
    padding: 8px 16px 8px 8px;
  }
  .child-avatar { width: 44px; height: 44px; }
  .child-name { font-size: 15px; }
  .child-meta { font-size: 11px; }

  .actions, .actions.actions-two {
    margin-top: 24px;
    grid-template-columns: 1fr;
    gap: 12px;
    padding-top: 0;
  }
  .action {
    padding: 20px 22px;
    min-height: 150px;
  }
  .action-label { font-size: 11px; }
  .action-title { font-size: 22px; }
  .action-blurb { font-size: 13px; max-width: none; }
  .action.explore .preview,
  .action.logs-hero .preview,
  .action.guide-hero .preview {
    width: 110px; height: 110px;
    right: -8px; top: -4px;
    opacity: 0.7;
  }

  /* ---------- Topbar (used in explore / verbal / parent) ---------- */
  .topbar { padding: 14px 14px 8px; gap: 10px; }
  .iconbtn { width: 44px; height: 44px; }
  .iconbtn.small { width: 38px; height: 38px; }
  .child-badge { padding: 4px 14px 4px 4px; min-height: 44px; gap: 10px; }
  .child-badge-avatar { width: 34px; height: 34px; }
  .child-badge-name { font-size: 14px; }
  .child-badge-sub { font-size: 10px; }
  .btn { padding: 12px 18px; font-size: 14px; min-height: 44px; }

  /* ---------- Explore (pre-verbal) ---------- */
  .explore-top { padding: 12px 14px 0; gap: 8px; }
  .tabs { padding: 14px 8px 0; gap: 4px; }
  .tab { padding: 10px 6px 14px; gap: 4px; }
  .tab-icon { width: 24px; height: 24px; }
  .tab-icon svg { width: 22px; height: 22px; }
  .tab-label { font-size: 11px; }
  .panel { padding: 18px 18px 16px; }
  .panel-title { font-size: 22px; }
  .panel-sub { font-size: 13px; }
  .options { gap: 12px; }
  .options.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .options.cols-3 { grid-template-columns: repeat(2, 1fr); }
  .opt { padding: 16px; min-height: 150px; }
  .opt-stage { width: 80px; height: 80px; }
  .opt-label { font-size: 15px; }
  .silhouette { width: 180px !important; height: auto !important; }
  .action-row { flex-direction: column; gap: 10px; align-items: stretch; }
  .action-row .btn { width: 100%; }
  .action-row .flex.gap-3.center { order: -1; justify-content: center; }

  /* ---------- Summary ---------- */
  .summary { padding: 20px; }
  .summary-stage {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .viz-silhouette { max-width: 240px !important; margin: 0 auto; display: block; }
  .summary-card { padding: 20px; }
  .summary-headline { font-size: 22px; }

  /* ---------- Verbal ---------- */
  .feelings-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 14px 14px 18px;
  }
  .feelings-grid.expanded {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 12px 14px 18px;
  }
  .feel-card { padding: 16px 12px; gap: 8px; }
  .feel-card .face { width: 64px; height: 64px; }
  .feelings-grid.expanded .feel-card .face { width: 56px; height: 56px; }
  .feel-name { font-size: 18px !important; }
  .feelings-grid.expanded .feel-name { font-size: 16px !important; }
  .feel-card .speaker { width: 30px; height: 30px; top: 8px; right: 8px; }

  .confirm { padding: 24px 18px; gap: 22px; }
  .confirm-face { width: 130px; height: 130px; }
  .confirm-q { font-size: 26px; }
  .confirm-actions { gap: 32px; }
  .confirm-btn.yes { width: 140px; height: 140px; font-size: 14px; }
  .confirm-btn.no { width: 72px; height: 72px; font-size: 10px; }

  .pathways { padding: 14px 14px 18px; }
  .pathway-intro {
    flex-direction: row;
    padding: 14px 16px;
    margin-bottom: 14px;
  }
  .pathway-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .pathway-card { padding: 14px 14px 12px; }
  .pathway-gfx { width: 52px; height: 52px; }
  .pathway-title { font-size: 14px; }
  .pathway-blurb { font-size: 12px; }

  .processing-screen { padding: 24px 18px; gap: 18px; }
  .processing-message { font-size: 22px; }

  /* ---------- Parent ---------- */
  .parent-top { padding: 18px 18px 0; flex-wrap: wrap; }
  .parent-title { font-size: 26px; }
  .parent-tabs { padding: 10px 14px 0; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .parent-tabs::-webkit-scrollbar { display: none; }
  .parent-tab { padding: 8px 14px; font-size: 13px; flex-shrink: 0; }
  .parent-body { padding: 16px 18px 24px; }

  .log-entry { grid-template-columns: 64px 1fr; gap: 12px; padding: 12px; }
  .log-mini-viz { width: 64px; height: 64px; }
  .log-action { display: none; }

  /* Children cards in settings → 1 column with content allowed to wrap */
  .children-cards-grid { grid-template-columns: 1fr; }
  .children-cards-grid > .settings-section {
    padding: 14px 16px !important;
    grid-template-columns: 56px 1fr !important;
    grid-template-rows: auto auto;
    gap: 12px !important;
  }
  .children-cards-grid > .settings-section > :nth-child(1) {
    grid-row: 1 / 3;
    width: 56px !important;
    height: 56px !important;
  }
  .children-cards-grid > .settings-section > :nth-child(2) {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
  }
  .children-cards-grid > .settings-section > :nth-child(3) {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
  }

  .settings-section-title { padding: 14px 18px 6px; }
  .setting-row { padding: 12px 18px; gap: 10px; flex-wrap: wrap; }
  .setting-row .left { gap: 10px; }
  .setting-row .label { font-size: 14px; }
  .setting-row .desc { font-size: 12px; }
  .export-card { flex-direction: column; align-items: flex-start; padding: 18px; gap: 4px; }

  /* ---------- Sheets ---------- */
  .sheet-backdrop { padding: 0; align-items: flex-end; }
  .sheet {
    max-width: none;
    width: 100%;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    max-height: 92dvh;
  }
  .sheet-head, .sheet-body, .sheet-foot { padding-left: 18px; padding-right: 18px; }
  .field-row { grid-template-columns: 1fr 1fr; gap: 10px; }
  .icon-grid { grid-template-columns: repeat(5, 1fr); }
  .mode-picker { grid-template-columns: 1fr; }

  /* ---------- Pathway editor on mobile ---------- */
  .pe-root { padding: 18px 14px 24px; }
  .pe-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .pe-rail {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    gap: 8px;
    padding-bottom: 6px;
  }
  .pe-rail > .tiny { display: none; }
  .pe-rail-row { flex-direction: column; align-items: center; padding: 8px 10px; min-width: 80px; flex-shrink: 0; }
  .pe-rail-name { font-size: 11px; }
  .pe-rail-dot { position: absolute; top: 4px; right: 4px; }

  .pe-panel-head { flex-direction: column; gap: 10px; align-items: stretch; }
  .pe-card-row { grid-template-columns: 40px 1fr auto; gap: 10px; padding: 10px 12px; }
  .pe-gfx-grid { grid-template-columns: repeat(5, 1fr); }

  /* ---------- Guide screen ---------- */
  .screen > div[style*="maxWidth"] { padding: 12px 18px 36px !important; }
}

  .dim-grid, .compare, .dodont, .pathgroup-grid { grid-template-columns: 1fr; }
  .dim-options { grid-template-columns: 1fr 1fr; }
  .flow-row { gap: 4px; }
  .flow-node { padding: 8px 10px; min-width: 64px; }
  .flow-node-icon svg { width: 22px; height: 22px; }
  .flow-node-label { font-size: 11px; }
  .flow-arrow { font-size: 18px; }
  .guide-page { padding: 8px 18px 56px; }
  .guide-hero h1 { font-size: 30px; }
  .guide-lede { font-size: 16px; }
  .guide-toc { grid-template-columns: 1fr; padding: 14px 16px; }
  .guide-section { margin-top: 40px; padding-top: 26px; }
  .guide-section-label h2 { font-size: 22px; }
  .mock-log-row { grid-template-columns: 64px 1fr; }
  .mock-log-art { width: 64px; height: 64px; }
}

/* Tiny phone tweaks */
@media (max-width: 380px) {
  .home-title { font-size: 24px; }
  .actions .action-title { font-size: 20px; }
  .feelings-grid, .feelings-grid.expanded { grid-template-columns: 1fr; }
  .pathway-grid { grid-template-columns: 1fr; }
  .options.cols-4, .options.cols-3 { grid-template-columns: 1fr; }
}