/* Qzoke additions on top of site.css */

/* Per-app colours: --app fills the number badge and hover bar, --app-ink tints text. */
.app-abc-trails{--app:#3fae49;--app-ink:#25803a}
.app-coloring-book{--app:#ffcb3d;--app-ink:#9a6c00}
.app-count-and-munch{--app:#9a6bf7;--app-ink:#6a3fd6}
.app-times-tables-galaxy{--app:#ff8a3d;--app-ink:#b9520d}
.app-toddler-games{--app:#22bbae;--app-ink:#0f7d73}
:root[data-theme=dark] .app-abc-trails{--app-ink:#78d98a}
:root[data-theme=dark] .app-coloring-book{--app-ink:#ffd66b}
:root[data-theme=dark] .app-count-and-munch{--app-ink:#b99bff}
:root[data-theme=dark] .app-times-tables-galaxy{--app-ink:#ffab70}
:root[data-theme=dark] .app-toddler-games{--app-ink:#5fe0d4}
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]) .app-abc-trails{--app-ink:#78d98a}
  :root:not([data-theme=light]) .app-coloring-book{--app-ink:#ffd66b}
  :root:not([data-theme=light]) .app-count-and-munch{--app-ink:#b99bff}
  :root:not([data-theme=light]) .app-times-tables-galaxy{--app-ink:#ffab70}
  :root:not([data-theme=light]) .app-toddler-games{--app-ink:#5fe0d4}
}

.scroll-mt-24{scroll-margin-top:6rem}
section[id]{scroll-margin-top:3rem}
@media (min-width:80rem){.xl\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:64rem){.footer-grid{grid-template-columns:2fr 1fr 1fr 1fr}}

/* Theme toggle shows the moon in light mode and the sun in dark mode. */
.theme-icon-sun{display:none}
:root[data-theme=dark] .theme-icon-sun{display:block}
:root[data-theme=dark] .theme-icon-moon{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]) .theme-icon-sun{display:block}
  :root:not([data-theme=light]) .theme-icon-moon{display:none}
}

.menu-icon-close{display:none}
[data-menu-toggle][aria-expanded=true] .menu-icon-close{display:block}
[data-menu-toggle][aria-expanded=true] .menu-icon-open{display:none}

/* Initial hidden state for scroll reveals; main.js animates them in. */
html.motion [data-reveal]:not(.is-revealed),
html.motion [data-draw-eyebrow]:not(.is-revealed){opacity:0;visibility:hidden;transform:translateY(28px);filter:blur(8px)}
html.motion [data-draw-rule]:not(.is-revealed){transform:scaleX(0)}
html.motion [data-draw-tick]:not(.is-revealed){transform:scale(0);opacity:0}

/* Section words beside the ruler */
.qz-word-letter{position:absolute;top:0;left:0;white-space:pre;font-size:34px;line-height:1;will-change:transform;text-shadow:0 0 4px var(--bg),0 0 10px var(--bg)}

/* Policy pages */
.policy-grid{grid-template-columns:minmax(0,1fr)}
@media (min-width:64rem){
  .policy-grid{grid-template-columns:18rem minmax(0,1fr)}
  .policy-aside{position:sticky;top:5.75rem;max-height:calc(100vh - 5.75rem);overflow-y:auto}
}
@media (max-width:63.99rem){.policy-toc{display:none}.policy-aside>p:first-child{display:none}.policy-aside>p:nth-of-type(2){border-top:0}}
.policy-section{scroll-margin-top:7rem}
.policy-section+.policy-section{margin-top:3rem;padding-top:3rem;border-top:1px solid var(--line)}
.policy-prose{color:var(--muted);font-size:1.0625rem;line-height:1.75}
.policy-prose>*{max-width:46rem}
.policy-prose h2{display:flex;align-items:baseline;gap:.875rem;margin-bottom:1rem;font-family:var(--font-display);font-weight:620;font-stretch:118%;font-size:1.625rem;line-height:1.15;letter-spacing:-.02em;color:var(--ink-strong)}
.policy-prose h3{margin-top:1.75rem;margin-bottom:.5rem;font-family:var(--font-display);font-weight:620;font-stretch:118%;font-size:1.125rem;letter-spacing:-.01em;color:var(--ink-strong)}
.policy-prose p{margin-top:.875rem}
.policy-prose h2+p,.policy-prose h3+p{margin-top:0}
.policy-prose ul,.policy-prose ol{margin-top:.875rem;padding-left:1.25rem}
.policy-prose ul{list-style:square}
.policy-prose ol{list-style:decimal}
.policy-prose li{margin-top:.375rem;padding-left:.25rem}
.policy-prose li::marker{color:var(--faint)}
.policy-prose strong{color:var(--ink);font-weight:600}
.policy-prose a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:4px}
.policy-prose a:hover{text-decoration-color:currentColor}
.policy-prose code{font-family:var(--font-mono);font-size:.875em;color:var(--ink)}
.policy-callout{border:1px solid var(--line);background:var(--bg-sunken);padding:1.25rem 1.5rem}
.policy-callout ul{margin-top:0}
.policy-table{margin-top:1rem;border:1px solid var(--line);overflow-x:auto}
.policy-table table{width:100%;border-collapse:collapse;font-size:.9375rem}
.policy-table th,.policy-table td{padding:.75rem 1rem;text-align:left;vertical-align:top;border-top:1px solid var(--line)}
.policy-table thead th{border-top:0;font-family:var(--font-mono);font-size:.6875rem;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--faint);background:var(--bg-sunken)}
.policy-table tbody th{width:32%;color:var(--ink);font-weight:600}

/* Utilities used by the policy pages that site.css does not include */
.gap-x-4{column-gap:1rem}
.pt-4{padding-top:1rem}
.pb-4{padding-bottom:1rem}
@media (min-width:40rem){.sm\:h-16{height:4rem}.sm\:w-16{width:4rem}}
@media (min-width:48rem){.md\:py-14{padding-block:3.5rem}}