/* themes.css - 10/11 polish pass + theme picker (docs/KID_THEMES.md "Theme picker"). Loaded after style.css and
   kid-themes.css. Three parts: (1) polish for every app, (2) how a picked theme is applied, (3) the picker sheet, then
   the color sets keyed on [data-theme]. CSS only, no fonts or images; motifs are inline SVG at 6-8% opacity.
   Option 1 for each person ("<user>-classic") sets nothing on the body, so it looks exactly like before. */

/* ================= 1. polish (all apps) ================= */
:root {
  --shadow-card: 0 1px 2px rgba(0, 0, 0, .22), 0 6px 18px rgba(0, 0, 0, .16);
  --shadow-sheet: 0 -10px 40px rgba(0, 0, 0, .45);
  --ease-out: cubic-bezier(.2, .8, .2, 1);
}

/* tab bar: landscape notch insets, accent-tinted active state (was hard-coded NYX blue for every app), 44px targets */
.tab-bar {
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  border-top-color: color-mix(in srgb, var(--accent) 16%, var(--border));
}
.tab-btn { min-height: 44px; transition: color .15s, background .15s, opacity .12s; }
.tab-btn.active, .tab-btn[aria-selected="true"] { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.tab-btn:active { opacity: .75; }
@media (hover: hover) { .tab-btn:not(.active):not([aria-selected="true"]):hover { color: var(--text); } }

/* cards: one radius, one soft shadow */
.st-card, .grade-card, .fam-card, .msg-card, .lesson-card, .board-post, .hobby-card { box-shadow: var(--shadow-card); }
.hobby-card { border-radius: var(--radius-md); }

/* type: chat reads at 15px on a phone (was 14px) */
.chat-bubble { font-size: 15px; line-height: 1.5; }
.pane-title { letter-spacing: -.01em; }

/* buttons: clear disabled + keyboard focus everywhere */
button:disabled { cursor: not-allowed; }
button:focus-visible, select:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* settings sheet (was a fixed #111827 card): follows the app's own surface + accent, scrolls on short phones */
.voice-panel { padding-left: calc(12px + env(safe-area-inset-left, 0px)); padding-right: calc(12px + env(safe-area-inset-right, 0px)); }
.voice-panel-card {
  background: var(--surface-raised, #111827);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  border-radius: 20px;
  box-shadow: var(--shadow-sheet);
  max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 24px);
  overflow-y: auto; overscroll-behavior: contain;
  animation: sheet-up 220ms var(--ease-out);
}
.voice-row select { background: var(--bg); border-color: var(--border-subtle); }
.voice-toggle small { color: var(--muted); }
.voice-sub { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 14px 0 4px; }
@keyframes sheet-up { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }

/* "new" dot on the Settings button until a kid opens it once (theme-logic.mjs showNewDot) */
.chat-speaker-btn.has-new { position: relative; }
.chat-speaker-btn.has-new::after {
  content: ""; position: absolute; top: 5px; right: 5px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 2px var(--bg);
  animation: new-dot 1.6s ease-in-out infinite;
}
@keyframes new-dot { 50% { transform: scale(1.25); } }

/* ================= 2. a picked theme (anything but option 1) ================= */
:root body[data-user][data-theme]:not([data-theme$="-classic"]) {
  --accent-hover: var(--accent);
  --surface: color-mix(in srgb, var(--theme) 38%, #10131a);
  --surface-raised: color-mix(in srgb, var(--theme) 48%, #151a22);
  --border-subtle: color-mix(in srgb, var(--accent) 22%, transparent);
  background: var(--kid-motif, none), linear-gradient(180deg, var(--theme), var(--bg));
  background-size: var(--motif-size, 120px 120px), auto;
  background-attachment: fixed, fixed;
}
/* NYX's art scrim is very dark; on a plain theme use the lighter family scrim */
:root body[data-user="tyler"][data-theme]:not([data-theme$="-classic"])::before {
  background: linear-gradient(to bottom, rgba(0, 0, 0, .10), rgba(0, 0, 0, .45));
}
:root body[data-user][data-theme]:not([data-theme$="-classic"]) .chat-bubble--user {
  background: linear-gradient(135deg, var(--accent), var(--accent-2, var(--accent)));
  color: #0b0e14;
}
:root body[data-user][data-theme]:not([data-theme$="-classic"]) .chat-bubble--nyx { border-left-color: var(--accent); }
/* kids who had a title glow keep one, in the new accent */
:root body[data-user="raylee"][data-theme]:not([data-theme$="-classic"]),
:root body[data-user="reese"][data-theme]:not([data-theme$="-classic"]),
:root body[data-user="roman"][data-theme]:not([data-theme$="-classic"]) {
  --kid-glow: 0 0 12px color-mix(in srgb, var(--accent) 45%, transparent);
}

/* ================= 3. the picker ================= */
.theme-section[hidden] { display: none; }
.theme-picker { display: grid; gap: 8px; margin: 6px 0 4px; }
.theme-opt {
  display: grid; grid-template-columns: 52px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center;
  width: 100%; min-height: 64px; padding: 8px 12px 8px 8px; text-align: left; cursor: pointer;
  border-radius: 16px; border: 1px solid var(--border-subtle);
  background: color-mix(in srgb, var(--text) 4%, transparent); color: var(--text);
  transition: border-color .15s, background .15s, transform .12s var(--ease-out);
}
.theme-opt:active { transform: scale(.98); }
.theme-opt.is-on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 13%, transparent); }
.theme-swatch {
  grid-row: 1 / span 2; width: 52px; height: 52px; border-radius: 14px;
  display: grid; place-items: center; font-size: 24px; line-height: 1;
  background: var(--kid-motif, none), linear-gradient(160deg, var(--theme), var(--bg));
  background-size: 64px 64px, auto;
  box-shadow: inset 0 0 0 2px var(--accent), inset -18px -18px 0 -14px var(--accent-2, var(--accent));
}
.theme-opt.is-on .theme-swatch { animation: theme-pop 280ms var(--ease-out); }
.theme-name { font-size: 15px; font-weight: 700; align-self: end; }
.theme-opt.is-on .theme-name::after { content: "  \2713"; color: var(--accent); }
.theme-blurb { font-size: 12.5px; line-height: 1.35; color: var(--muted); align-self: start; }
@keyframes theme-pop { 0% { transform: scale(.86); } 60% { transform: scale(1.08); } 100% { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .voice-panel-card, .theme-opt.is-on .theme-swatch, .chat-speaker-btn.has-new::after { animation: none; }
  .theme-opt:active { transform: none; }
}
@media (prefers-contrast: more), (forced-colors: active) {
  :root body[data-user][data-theme] { background-image: none !important; background: var(--bg) !important; }
}

/* ---------- option 1 swatches (tenants.json colors; the app itself keeps its 10/10 look) ---------- */
.theme-swatch[data-theme="ryann-classic"] { --theme: #1f4d36; --bg: #0c1f16; --accent: #6fd49a; --accent-2: #6fd49a; --kid-motif: none; }
.theme-swatch[data-theme="raylee-classic"] { --theme: #1f2f5c; --bg: #0b1224; --accent: #f2c14e; --accent-2: #f2c14e; --kid-motif: none; }
.theme-swatch[data-theme="reese-classic"] { --theme: #5b2a86; --bg: #1c0d2b; --accent: #c59bf0; --accent-2: #c59bf0; --kid-motif: none; }
.theme-swatch[data-theme="roman-classic"] { --theme: #111114; --bg: #08080a; --accent: #a78bfa; --accent-2: #a78bfa; --kid-motif: none; }
.theme-swatch[data-theme="reed-classic"] { --theme: #14275a; --bg: #0a1330; --accent: #ffd400; --accent-2: #ffd400; --kid-motif: none; }
.theme-swatch[data-theme="nora-classic"] { --theme: #5a2d3c; --bg: #1f0d14; --accent: #f9a8d4; --accent-2: #f9a8d4; --kid-motif: none; }
.theme-swatch[data-theme="tyler-classic"] { --theme: #1b2233; --bg: #0b0e14; --accent: #38bdf8; --accent-2: #38bdf8; --kid-motif: none; }
.theme-swatch[data-theme="ally-classic"] { --theme: #1f5f5c; --bg: #0b2221; --accent: #5fd4c8; --accent-2: #5fd4c8; --kid-motif: none; }
.theme-swatch[data-theme="rob-classic"] { --theme: #2774AE; --bg: #0b2a45; --accent: #FFD100; --accent-2: #FFD100; --kid-motif: none; }

/* ---------- theme sets: options 2-5 (kids) / 2-4 (adults). Colors here are contrast-tested in tests/test_theme_logic.mjs ---------- */

/* ryann */
:root body[data-user][data-theme="ryann-mocha"],
.theme-swatch[data-theme="ryann-mocha"] {
  --theme: #3a2a22;
  --bg: #140d0a;
  --accent: #e9c4a0;
  --accent-2: #f3dcc2;
  --kid-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' fill='%23e9c4a0' fill-opacity='.06'%3E%3Cellipse cx='30' cy='34' rx='9' ry='13' transform='rotate%28-25 30 34%29'/%3E%3Cellipse cx='86' cy='84' rx='8' ry='12' transform='rotate%2830 86 84%29'/%3E%3C/svg%3E");
}
:root body[data-user][data-theme="ryann-shortcake"],
.theme-swatch[data-theme="ryann-shortcake"] {
  --theme: #4a1d2e;
  --bg: #1a0a11;
  --accent: #ff9fb5;
  --accent-2: #ffd6df;
  --kid-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' fill='%23ff9fb5' fill-opacity='.06'%3E%3Cpath d='M30 30c-9 0-12 9-6 18l6 8 6-8c6-9 3-18-6-18z'/%3E%3Cpath d='M84 80c-7 0-9 7-5 14l5 6 5-6c4-7 2-14-5-14z'/%3E%3Ccircle cx='70' cy='26' r='2'/%3E%3Ccircle cx='22' cy='92' r='2'/%3E%3C/svg%3E");
  --kid-bubble-radius: 20px;
}
:root body[data-user][data-theme="ryann-lemonbar"],
.theme-swatch[data-theme="ryann-lemonbar"] {
  --theme: #263010;
  --bg: #11160a;
  --accent: #ffe066;
  --accent-2: #fff3b0;
  --kid-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' fill='none' stroke='%23ffe066' stroke-opacity='.06' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='32' cy='34' r='14'/%3E%3Cpath d='M32 20v28M18 34h28M22 24l20 20M42 24L22 44'/%3E%3Ccircle cx='88' cy='86' r='10'/%3E%3Cpath d='M88 76v20M78 86h20'/%3E%3C/svg%3E");
}
:root body[data-user][data-theme="ryann-howl"],
.theme-swatch[data-theme="ryann-howl"] {
  --theme: #1e2350;
  --bg: #0a0c1f;
  --accent: #c7d2fe;
  --accent-2: #e0e7ff;
  --kid-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' fill='%23c7d2fe' fill-opacity='.07'%3E%3Cpath d='M92 18a12 12 0 1 0 8 21 14 14 0 1 1-8-21z'/%3E%3Ccircle cx='30' cy='30' r='1.6'/%3E%3Ccircle cx='54' cy='90' r='1.3'/%3E%3Ccircle cx='18' cy='76' r='1'/%3E%3C/svg%3E");
}

/* raylee */
:root body[data-user][data-theme="raylee-ladybug"],
.theme-swatch[data-theme="raylee-ladybug"] {
  --theme: #3a0d12;
  --bg: #140405;
  --accent: #ff6b6b;
  --accent-2: #ffb3b3;
  --kid-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' fill='none' stroke='%23ff6b6b' stroke-opacity='.07' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='30' cy='32' r='11'/%3E%3Cpath d='M30 21v22'/%3E%3Ccircle cx='86' cy='84' r='9'/%3E%3Cpath d='M86 75v18'/%3E%3Ccircle cx='25' cy='28' r='2'/%3E%3Ccircle cx='35' cy='36' r='2'/%3E%3Ccircle cx='82' cy='82' r='2'/%3E%3Ccircle cx='90' cy='88' r='2'/%3E%3Ccircle cx='64' cy='20' r='3'/%3E%3Ccircle cx='18' cy='96' r='3'/%3E%3C/svg%3E");
  --kid-bubble-radius: 22px;
}
:root body[data-user][data-theme="raylee-pompom"],
.theme-swatch[data-theme="raylee-pompom"] {
  --theme: #3d1240;
  --bg: #160617;
  --accent: #ff7ac8;
  --accent-2: #ffd166;
  --kid-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' fill='%23ffd166' fill-opacity='.07'%3E%3Cpath d='M30 16l4 9 10 1-7 7 2 10-9-5-9 5 2-10-7-7 10-1z'/%3E%3Cpath d='M88 74l3 6 6 1-4 4 1 6-6-3-6 3 1-6-4-4 6-1z'/%3E%3C/svg%3E");
}
:root body[data-user][data-theme="raylee-paris"],
.theme-swatch[data-theme="raylee-paris"] {
  --theme: #1d2a55;
  --bg: #0a1027;
  --accent: #f6b8cc;
  --accent-2: #ffe3ec;
  --kid-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' fill='none' stroke='%23f6b8cc' stroke-opacity='.08' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M30 14L20 58M30 14l10 44M23 40h14M18 58h24M27 28h6'/%3E%3Ccircle cx='86' cy='30' r='2'/%3E%3Ccircle cx='96' cy='90' r='1.5'/%3E%3Cpath d='M78 86l3 6 6 1-4 4'/%3E%3C/svg%3E");
  --kid-title-font: "Iowan Old Style", Georgia, serif;
  --kid-title-transform: none;
}
:root body[data-user][data-theme="raylee-hammock"],
.theme-swatch[data-theme="raylee-hammock"] {
  --theme: #12322a;
  --bg: #08170f;
  --accent: #b7f171;
  --accent-2: #e3ffb8;
  --kid-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' fill='%23b7f171' fill-opacity='.06'%3E%3Cpath d='M18 50c10-22 32-28 40-26-4 18-20 30-40 26zM18 50l24-16'/%3E%3Cpath d='M70 100c8-16 24-20 30-18-3 13-15 22-30 18zM70 100l18-12'/%3E%3C/svg%3E");
}

/* reese */
:root body[data-user][data-theme="reese-hoops"],
.theme-swatch[data-theme="reese-hoops"] {
  --theme: #2a1a10;
  --bg: #0e0905;
  --accent: #ff9f43;
  --accent-2: #ffc98a;
  --kid-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' fill='none' stroke='%23ff9f43' stroke-opacity='.07' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='36' cy='36' r='16'/%3E%3Cpath d='M20 36h32M36 20v32M25 25c6 6 6 16 0 22M47 25c-6 6-6 16 0 22'/%3E%3C/svg%3E");
}
:root body[data-user][data-theme="reese-stars"],
.theme-swatch[data-theme="reese-stars"] {
  --theme: #1b1446;
  --bg: #07051a;
  --accent: #8be9fd;
  --accent-2: #c4b5fd;
  --kid-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' fill='%238be9fd' fill-opacity='.07'%3E%3Cpath d='M30 20v10M25 25h10M86 76v8M82 80h8'/%3E%3Ccircle cx='70' cy='30' r='1.5'/%3E%3Ccircle cx='20' cy='90' r='1.2'/%3E%3Ccircle cx='100' cy='50' r='1'/%3E%3Ccircle cx='50' cy='70' r='1.4'/%3E%3Cpath d='M30 16l4 9 10 1-7 7 2 10-9-5-9 5 2-10-7-7 10-1z'/%3E%3Cpath d='M88 74l3 6 6 1-4 4 1 6-6-3-6 3 1-6-4-4 6-1z'/%3E%3C/svg%3E");
}
:root body[data-user][data-theme="reese-circuit"],
.theme-swatch[data-theme="reese-circuit"] {
  --theme: #0f2a2e;
  --bg: #051113;
  --accent: #5ef1c5;
  --accent-2: #a7f3d0;
  --kid-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' fill='none' stroke='%235ef1c5' stroke-opacity='.07' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 30h30l10 10h30M60 90h-20l-10-10M90 20v30l10 10'/%3E%3Ccircle cx='80' cy='40' r='3'/%3E%3Ccircle cx='30' cy='80' r='3'/%3E%3Ccircle cx='100' cy='60' r='3'/%3E%3C/svg%3E");
  --kid-title-font: "SF Mono", Menlo, Consolas, monospace;
}
:root body[data-user][data-theme="reese-snow"],
.theme-swatch[data-theme="reese-snow"] {
  --theme: #1b2f4a;
  --bg: #0a1322;
  --accent: #bfe3ff;
  --accent-2: #e0f2ff;
  --kid-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' fill='none' stroke='%23bfe3ff' stroke-opacity='.08' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M30 14v32M16 22l28 16M16 38l28-16M86 70v24M76 76l20 12M76 88l20-12'/%3E%3C/svg%3E");
}

/* roman */
:root body[data-user][data-theme="roman-powerplay"],
.theme-swatch[data-theme="roman-powerplay"] {
  --theme: #10243d;
  --bg: #050c17;
  --accent: #7dd3fc;
  --accent-2: #e0f2fe;
  --kid-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' fill='none' stroke='%237dd3fc' stroke-opacity='.06' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='60' cy='60' r='22'/%3E%3Cpath d='M60 0v120'/%3E%3Ccircle cx='60' cy='60' r='2.5'/%3E%3C/svg%3E");
  --motif-size: 160px 160px;
}
:root body[data-user][data-theme="roman-pharaoh"],
.theme-swatch[data-theme="roman-pharaoh"] {
  --theme: #142046;
  --bg: #070b1c;
  --accent: #f6c453;
  --accent-2: #ffe29a;
  --kid-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' fill='none' stroke='%23f6c453' stroke-opacity='.07' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 54l18-30 18 30zM68 100l14-24 14 24z'/%3E%3Cpath d='M84 24c6-6 14-6 18 0-4 6-12 6-18 0z'/%3E%3C/svg%3E");
}
:root body[data-user][data-theme="roman-pixel"],
.theme-swatch[data-theme="roman-pixel"] {
  --theme: #0e1f14;
  --bg: #040b06;
  --accent: #7cfc9a;
  --accent-2: #c8ffd6;
  --kid-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' fill='%237cfc9a' fill-opacity='.07'%3E%3Crect x='20' y='20' width='8' height='8'/%3E%3Crect x='28' y='28' width='8' height='8'/%3E%3Crect x='20' y='36' width='8' height='8'/%3E%3Crect x='80' y='76' width='8' height='8'/%3E%3Crect x='88' y='76' width='8' height='8'/%3E%3Crect x='84' y='84' width='8' height='8'/%3E%3C/svg%3E");
  --kid-title-font: "SF Mono", Menlo, Consolas, monospace;
  --kid-bubble-radius: 4px;
}
:root body[data-user][data-theme="roman-eyes"],
.theme-swatch[data-theme="roman-eyes"] {
  --theme: #0d0d0f;
  --bg: #050506;
  --accent: #fbbf24;
  --accent-2: #fde68a;
  --kid-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' fill='%23fbbf24' fill-opacity='.07'%3E%3Cpath d='M18 40c6-8 16-8 22 0-6 6-16 6-22 0zM48 40c6-8 16-8 22 0-6 6-16 6-22 0z'/%3E%3Cpath d='M66 92c5-6 12-6 17 0-5 5-12 5-17 0zM88 92c5-6 12-6 17 0-5 5-12 5-17 0z'/%3E%3C/svg%3E");
}

/* reed */
:root body[data-user][data-theme="reed-banana"],
.theme-swatch[data-theme="reed-banana"] {
  --theme: #2a1a12;
  --bg: #110a06;
  --accent: #ffe066;
  --accent-2: #ff9fb2;
  --kid-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' fill='%23ffe066' fill-opacity='.07'%3E%3Cpath d='M20 30c4 18 22 26 36 22-14-2-26-10-30-24z'/%3E%3Cpath d='M76 84c4 14 18 20 30 16-11-2-20-8-24-19z'/%3E%3Ccircle cx='90' cy='30' r='2'/%3E%3Ccircle cx='30' cy='92' r='2'/%3E%3C/svg%3E");
}
:root body[data-user][data-theme="reed-turf"],
.theme-swatch[data-theme="reed-turf"] {
  --theme: #0c321d;
  --bg: #06180e;
  --accent: #e9ff70;
  --accent-2: #f4ffc2;
  --kid-motif: repeating-linear-gradient(180deg, transparent 0 58px, rgba(255, 255, 255, .045) 58px 61px);
  --motif-size: auto;
}
:root body[data-user][data-theme="reed-volcano"],
.theme-swatch[data-theme="reed-volcano"] {
  --theme: #3a1108;
  --bg: #150503;
  --accent: #ff8a3d;
  --accent-2: #ffc46b;
  --kid-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' fill='none' stroke='%23ff8a3d' stroke-opacity='.07' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 60l14-22h10l14 22zM30 30l-4-8M36 30l4-8M70 104l10-16h8l10 16z'/%3E%3Cpath d='M30 20v10M25 25h10M86 76v8M82 80h8'/%3E%3Ccircle cx='70' cy='30' r='1.5'/%3E%3Ccircle cx='20' cy='90' r='1.2'/%3E%3Ccircle cx='100' cy='50' r='1'/%3E%3Ccircle cx='50' cy='70' r='1.4'/%3E%3C/svg%3E");
}
:root body[data-user][data-theme="reed-tropic"],
.theme-swatch[data-theme="reed-tropic"] {
  --theme: #0a3035;
  --bg: #041719;
  --accent: #ffb347;
  --accent-2: #ffd98a;
  --kid-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' fill='none' stroke='%23ffb347' stroke-opacity='.07' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M30 60V34M30 34c-8-6-16-4-20 2M30 34c8-6 16-4 20 2M30 34c-4-8-2-14 4-18M86 104V84M86 84c-6-4-12-3-15 1M86 84c6-4 12-3 15 1'/%3E%3C/svg%3E");
}

/* nora */
:root body[data-user][data-theme="nora-sketch"],
.theme-swatch[data-theme="nora-sketch"] {
  --theme: #252b3b;
  --bg: #0f121a;
  --accent: #ffc8a2;
  --accent-2: #ffe4d0;
  --kid-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' fill='none' stroke='%23ffc8a2' stroke-opacity='.07' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 30c10-6 20 6 30 0s20-6 30 0M50 92c10-6 20 6 30 0s16-4 26 0'/%3E%3Cpath d='M90 20l10 10-24 24-12 2 2-12z'/%3E%3C/svg%3E");
}
:root body[data-user][data-theme="nora-chinchilla"],
.theme-swatch[data-theme="nora-chinchilla"] {
  --theme: #2e2a3d;
  --bg: #121018;
  --accent: #d8c8ff;
  --accent-2: #f0e9ff;
  --kid-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' fill='%23d8c8ff' fill-opacity='.07'%3E%3Cpath d='M20 44a10 10 0 0 1 4-19 13 13 0 0 1 25 3 8 8 0 0 1 1 16zM70 100a8 8 0 0 1 3-15 10 10 0 0 1 20 2 6 6 0 0 1 1 13z'/%3E%3C/svg%3E");
  --kid-bubble-radius: 24px;
}
:root body[data-user][data-theme="nora-rainbow"],
.theme-swatch[data-theme="nora-rainbow"] {
  --theme: #3b1d5a;
  --bg: #150a22;
  --accent: #ffb3f0;
  --accent-2: #9be8ff;
  --kid-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' fill='none' stroke='%23ffb3f0' stroke-opacity='.08' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 56a24 24 0 0 1 48 0M22 56a16 16 0 0 1 32 0M30 56a8 8 0 0 1 16 0'/%3E%3Cpath d='M84 90l3 6 6 1-4 4 1 6-6-3-6 3 1-6-4-4 6-1z'/%3E%3C/svg%3E");
}
:root body[data-user][data-theme="nora-sunset"],
.theme-swatch[data-theme="nora-sunset"] {
  --theme: #4a2330;
  --bg: #1a0b10;
  --accent: #ffb86b;
  --accent-2: #ffd9a8;
  --kid-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' fill='none' stroke='%23ffb86b' stroke-opacity='.07' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 60a18 18 0 0 1 36 0M8 66h48M16 72h32M32 34v-8M18 40l-5-5M46 40l5-5'/%3E%3Cpath d='M66 100h40M72 106h28'/%3E%3C/svg%3E");
}

/* tyler */
:root body[data-user][data-theme="tyler-midnight"],
.theme-swatch[data-theme="tyler-midnight"] {
  --theme: #151b26;
  --bg: #0b0e14;
  --accent: #38bdf8;
  --accent-2: #7dd3fc;
  --kid-motif: none;
}
:root body[data-user][data-theme="tyler-dusk"],
.theme-swatch[data-theme="tyler-dusk"] {
  --theme: #24201a;
  --bg: #0d0b08;
  --accent: #fbbf24;
  --accent-2: #fcd34d;
  --kid-motif: none;
}
:root body[data-user][data-theme="tyler-aurora"],
.theme-swatch[data-theme="tyler-aurora"] {
  --theme: #13234a;
  --bg: #070b1a;
  --accent: #a5b4fc;
  --accent-2: #5eead4;
  --kid-motif: none;
}

/* ally */
:root body[data-user][data-theme="ally-rose"],
.theme-swatch[data-theme="ally-rose"] {
  --theme: #4a1a2a;
  --bg: #1a080f;
  --accent: #fb7185;
  --accent-2: #fda4af;
  --kid-motif: none;
}
:root body[data-user][data-theme="ally-lavender"],
.theme-swatch[data-theme="ally-lavender"] {
  --theme: #2c2448;
  --bg: #0f0c1a;
  --accent: #c4b5fd;
  --accent-2: #e9d5ff;
  --kid-motif: none;
}
:root body[data-user][data-theme="ally-golden"],
.theme-swatch[data-theme="ally-golden"] {
  --theme: #3a2a10;
  --bg: #140e05;
  --accent: #fcd34d;
  --accent-2: #fde68a;
  --kid-motif: none;
}

/* rob */
:root body[data-user][data-theme="rob-fairway"],
.theme-swatch[data-theme="rob-fairway"] {
  --theme: #0d3322;
  --bg: #05170e;
  --accent: #34d399;
  --accent-2: #a7f3d0;
  --kid-motif: none;
}
:root body[data-user][data-theme="rob-railyard"],
.theme-swatch[data-theme="rob-railyard"] {
  --theme: #26282c;
  --bg: #0d0e10;
  --accent: #fb923c;
  --accent-2: #fdba74;
  --kid-motif: none;
}
:root body[data-user][data-theme="rob-river"],
.theme-swatch[data-theme="rob-river"] {
  --theme: #12303a;
  --bg: #061217;
  --accent: #5eead4;
  --accent-2: #99f6e4;
  --kid-motif: none;
}

/* 10/11 calendar subscribe button in Settings */
.cal-sync-btn { width: 100%; margin-top: 6px; }
.cal-sync-note { display: block; opacity: .75; margin: 6px 2px 2px; line-height: 1.35; }