/* Shared public-page shell for older tools, without changing their data or controls. */
:root[data-design=minimal] {
  --soft: var(--wash); --link-dark: var(--link); --slot-ink: var(--link);
  --button-bg: #34383d; --button-hover: #202327;
  --accent: var(--link); --accent-light: var(--wash); --user-bubble: var(--wash);
  --ai-bubble: var(--wash); --ai-text: var(--text);
  --button-primary: #34383d; --button-edge: #34383d; --button-shadow: transparent;
  --device-grey: var(--wash); --device-shadow: transparent;
  --dark-pastel-red: #34383d; --highlight: var(--link); --cosmic-latte: #fafafa;
}
body.editorial.site-utility { min-height: 100svh; padding-bottom: 56px; }
.site-utility .site-nav { margin-bottom: 44px; }
.site-utility > header { margin-bottom: 36px; }
.site-utility h1 { font-size: clamp(34px, 5.2vw, 52px); }
.site-utility h2 { margin-top: 36px; }
.site-utility h3 { margin-top: 24px; }
.site-utility input, .site-utility select, .site-utility textarea { font: inherit; max-width: 100%; }
.site-utility input { color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 11px 13px; min-width: 0; }
.site-utility details { border-color: var(--line); }
.site-utility summary { cursor: pointer; padding: 12px 0; }
.site-utility .highlight { background: var(--wash); color: var(--text); padding: 2px 5px; border-radius: 3px; animation: none; }
.site-utility .highlight::before, .site-utility .highlight::after { content: none; }
.site-utility .post-list { padding-left: 0; }
.site-utility .post-item { border-color: var(--line); }
.site-utility .chart-card, .site-utility .activity-card { box-shadow: none; border-color: var(--line); }
.site-utility.utility-newsletter { max-width: 808px; }
.utility-newsletter .eyebrow { color: var(--muted); font-size: 13px; margin-bottom: 16px; }
.utility-newsletter .lede { color: var(--muted); font-size: 20px; }
.utility-newsletter .newsletter-signup { margin: 34px 0; padding: 24px 0; border-block: 1px solid var(--line); }
.utility-newsletter #newsletter-email { flex: 1; }
.utility-newsletter .cta-button { background: var(--button-bg); color: #fff; border: 0; border-radius: 6px; min-height: 46px; white-space: nowrap; }
.utility-newsletter .cta-button:disabled { opacity: .65; cursor: wait; }
.utility-newsletter details p { padding: 0 0 10px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
body.editorial.utility-kids { max-width: 1040px; }
/* Only the content runs wide on these pages; the nav stays where it sits everywhere else. */
[data-design=minimal] body.editorial.utility-kids :is(.site-nav, .site-footer) { max-width: 660px; margin-inline: auto; }
.utility-kids .page-content { min-height: 0; padding: 0; }
.utility-kids .app-layout { gap: 28px; }
.utility-kids .device-container, .utility-kids .pushable .shadow { box-shadow: none; }
.utility-kids .example-bubble { color: var(--text); background: var(--wash); border-color: var(--line); box-shadow: none; }
.utility-kids .examples-subtitle { color: var(--muted); }
.utility-calendar .site-header { padding: 28px 0; margin: 0 0 44px; border-bottom: 1px solid var(--line); }
.utility-calendar .site-header .theme-switch { display: block; width: auto; height: auto; border-radius: 4px; font-size: 13px; }
.utility-calendar .site-header a { min-height: 44px; display: inline-flex; align-items: center; }
.utility-calendar .legal-page h2 { font-size: 26px; }
.utility-calendar .primary-button { color: #fff; }
body.utility-game { height: auto; min-height: 100svh; overflow: auto; font-family: var(--sans); }
/* The game keeps its full-width layout, so the shared nav is restated here without the editorial body shell. */
.utility-game .site-nav { display: flex; align-items: center; gap: 26px; box-sizing: border-box; max-width: 708px; margin: 0 auto; padding: 18px 24px; position: relative; z-index: 1001; background: var(--bg); }
.utility-game .site-nav a { display: inline-flex; align-items: center; min-height: 44px; font: 400 13px/1.4 var(--sans); color: var(--muted); position: relative; text-decoration: none; }
.utility-game .site-nav a::after { content: ''; position: absolute; height: 1px; background: var(--link); width: 100%; bottom: 7px; left: 0; transform: scaleX(0); transform-origin: left; transition: transform 350ms var(--ease); }
.utility-game .site-nav a:hover::after, .utility-game .site-nav a[aria-current=page]::after { transform: scaleX(1); }
.utility-game .site-nav a[aria-current=page] { color: var(--text); }
.utility-game .theme-switch { display: grid; place-items: center; width: 36px; height: 36px; margin-left: auto; padding: 8px; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; flex: 0 0 auto; transition: background-color 300ms var(--ease); }
.utility-game .theme-switch:hover { background: var(--wash); }
.utility-game .game-layout { min-height: calc(100svh - 80px); }
.utility-game .game-title { font-family: var(--serif); }
@media (max-width: 600px) {
  body.editorial.site-utility { padding-inline: 22px; }
  .site-utility .site-nav { gap: 18px; margin-bottom: 32px; }
  .utility-game .site-nav { gap: 22px; padding-inline: 22px; }
  .site-utility h1 { overflow-wrap: anywhere; }
  .site-utility .post-list > div { margin-left: 0 !important; }
  .utility-newsletter #newsletter-form > div { flex-wrap: wrap; }
  .utility-newsletter #newsletter-email { flex-basis: 190px; }
}
@media (prefers-reduced-motion: reduce) {
  .site-utility *, .site-utility *::before, .site-utility *::after,
  .utility-game *, .utility-game *::before, .utility-game *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}
/* Keep Ellie's tactile control, with flat neutral tones in every state. */
:root[data-design=minimal] .utility-kids .device-container,
:root[data-design=minimal] .utility-kids .device-container::before { background: var(--wash); border-color: var(--line); box-shadow: none; }
:root[data-design=minimal] .utility-kids .upper-screen { background: var(--bg); border-color: var(--line); box-shadow: none; }
:root[data-design=minimal] .utility-kids .lower-screen { background: #34383d; color: #fff; border-color: #555b63; box-shadow: none; transition: background-color 180ms, transform 180ms; }
:root[data-design=minimal] .utility-kids .lower-screen:hover { background: #272b30; }
:root[data-design=minimal] .utility-kids .lower-screen.recording { background: #202327; }
:root[data-design=minimal] .utility-kids .user-message,
:root[data-design=minimal] .utility-kids .ai-message { background: var(--wash); color: var(--text); border-color: var(--line); box-shadow: none; }
.utility-kids .kbd-hint { font-family: var(--sans); }
.utility-kids .mute-button { background: var(--wash); color: var(--text); }
.utility-game *, .utility-game *::before, .utility-game *::after { box-sizing: border-box; }
.utility-game .left-panel, .utility-game .right-panel { min-width: 0; }
.utility-game .game-layout { width: 100%; transition: opacity 500ms, transform 500ms; }
.utility-game .loading-title { margin: 0; font-weight: 500; }
.utility-kids .face-display { background: var(--bg); }
.utility-kids .mute-button { width: 44px; height: 44px; top: 4px; right: 4px; }
.utility-kids .mute-button svg { fill: currentColor; }
.utility-kids .device-container { will-change: auto; }
.utility-game .loading-content { max-width: calc(100vw - 32px); }
.utility-game .loading-title { font-size: clamp(25px, 7vw, 40px); font-family: var(--serif); }
.utility-game .loading-subtitle, .utility-game .lets-play-btn { font-family: var(--sans); }
.utility-game .reset-progress-link { color: var(--muted); opacity: 1; }
.utility-kids .wave-segment { background: var(--link); }
:root[data-design=minimal] .utility-kids .transcription-text,
:root[data-design=minimal] .utility-kids .ai-response-text { background: var(--wash); color: var(--text); border-color: var(--line); box-shadow: none; }