/* ==========================================================================
   Playset: the whole site as a cartoon place you can touch.
   Loaded last on every page. Buttons are toy blocks that press down, panels are
   boards and papers with ink outlines and real depth, inputs are slots, checks
   are stamps, dialogs are clipboards, tabs are hanging signs, toasts are speech
   bubbles. Simple view, High contrast and Less movement flatten all of it.
   Tokens:  --toy-ink (outline)  --toy-paper (block fill)  --toy-depth (how far a thing sticks out)
   ========================================================================== */
:root {
  --toy-ink: var(--ink);
  --toy-paper: var(--surface);
  --toy-depth: 5px;
  --toy-radius: 14px;
  --toy-spring: cubic-bezier(.3, 1.6, .5, 1);
  --toy-sign: #fff1b8;
  --toy-wood: #c98544; --toy-wood-dark: #8a5022;
  --toy-rope: #b48a4a;
}
/* In every world the tiles stay light paper, so the ink stays dark */
:root[data-world], :root[data-drawer-mood] { --toy-ink: #1f1a2e; --toy-paper: #fffaf0; }
:root[data-world] .m-dialog, :root[data-drawer-mood] .m-dialog, :root[data-world] .reading-panel, :root[data-world] .toast { color: #23180f; }

/* ---------- Buttons: toy blocks ---------- */
.btn, .copy-btn, .icon-btn, .ob-btn {
  border: 3px solid var(--toy-ink);
  border-radius: var(--toy-radius);
  box-shadow: 0 var(--toy-depth) 0 var(--toy-ink);
  transform: translateY(0);
  transition: transform .14s var(--toy-spring), box-shadow .14s var(--toy-spring), background-color .15s;
  font-weight: 800;
  will-change: transform;
}
.btn:hover, .copy-btn:hover, .icon-btn:hover { transform: translateY(-2px); box-shadow: 0 calc(var(--toy-depth) + 2px) 0 var(--toy-ink); }
.btn:active, .copy-btn:active, .icon-btn:active, .btn.is-pressed, .btn[aria-pressed="true"]:not(.bulb-btn) { transform: translateY(calc(var(--toy-depth) - 1px)); box-shadow: 0 1px 0 var(--toy-ink); }
.btn-primary { background: var(--action); color: var(--on-action); }
.btn-primary:hover { background: var(--action-hover); color: var(--on-action); }
.btn-secondary, .btn-quiet, .copy-btn, .icon-btn { background: var(--toy-paper); color: var(--toy-ink); border-color: var(--toy-ink); }
.btn-quiet:hover, .btn-secondary:hover { background: color-mix(in srgb, var(--toy-paper) 85%, var(--toy-ink)); }
/* pressed-in toggles: low specificity on purpose, so a component's own pressed colors still win */
:where(.btn, .copy-btn)[aria-pressed="true"]:not(.bulb-btn) { background: var(--toy-ink); color: var(--toy-paper); }
.btn-ghost { border-color: transparent; box-shadow: none; background: transparent; color: inherit; }
.btn-ghost:hover { transform: none; box-shadow: none; background: rgba(127, 127, 127, .14); }
.btn-ghost:active { transform: translateY(1px); }
.btn-danger { background: #ffe1e1; color: #8e1212; }
.btn-small { --toy-depth: 4px; border-radius: 11px; }
.btn-large { --toy-depth: 7px; border-radius: 18px; }
.btn[disabled], .btn[aria-disabled="true"] { transform: none; box-shadow: 0 2px 0 var(--toy-ink); }
.btn .icon { filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .12)); }
.link-btn { font-weight: 800; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* The reading tools and other segmented choices: a row of keys you press down */
.seg button {
  border: 3px solid var(--toy-ink); border-radius: 12px; background: var(--toy-paper); color: var(--toy-ink);
  box-shadow: 0 4px 0 var(--toy-ink); font-weight: 800; transition: transform .12s var(--toy-spring), box-shadow .12s;
}
.seg button:hover { transform: translateY(-1px); }
.seg button[aria-pressed="true"] { background: var(--toy-ink); color: var(--toy-paper); transform: translateY(3px); box-shadow: 0 1px 0 var(--toy-ink); }
.world-pick { border: 3px solid var(--toy-ink) !important; box-shadow: 0 4px 0 var(--toy-ink); border-radius: 999px; transition: transform .12s var(--toy-spring); }
.world-pick[aria-pressed="true"] { transform: translateY(3px); box-shadow: 0 1px 0 var(--toy-ink); }

/* ---------- Boards, papers and panels: outlined and sitting proud of the table ---------- */
.card, .door, .service-panel, .person, .faq details, .table-wrap, .form-card, .tool-panel, .paper,
.m-panel, .m-card, .m-sheet, .m-notice, .m-tabs, .m-unlock-form, .m-tour, .callout, .in-short, .key-facts, .step-card, .wx-panel.is-card {
  border: 3px solid var(--toy-ink);
  border-radius: var(--toy-radius);
  box-shadow: 0 6px 0 var(--toy-ink), 0 18px 28px -18px rgba(0, 0, 0, .55);
}
.card[class*="c-"] { border-top: 3px solid var(--toy-ink); }
.card[class*="c-"]::after { content: ""; position: absolute; left: 10px; right: 10px; top: 0; height: 8px; border-radius: 0 0 6px 6px; background: var(--c, transparent); }
.door { border-top: 3px solid var(--toy-ink); }
.door::after { content: ""; position: absolute; left: 10px; right: 10px; top: 0; height: 10px; border-radius: 0 0 8px 8px; background: var(--c, transparent); }
.card-link { position: relative; }
.card-link:hover::after { content: ""; position: absolute; inset: -8px; } /* a lifted card keeps a margin around itself, so the pointer stays on it (no flutter along its bottom edge) */
.card-link:hover, .door:hover, .tool-card:hover { transform: perspective(700px) translateY(-5px) rotateX(var(--ty, 0deg)) rotateY(var(--tx, 0deg)) !important; box-shadow: 0 11px 0 var(--toy-ink), 0 26px 34px -18px rgba(0, 0, 0, .6); }
.card-link:active, .door:active { transform: translateY(2px) !important; box-shadow: 0 2px 0 var(--toy-ink); }
.m-panel, .m-card, .m-sheet { border-radius: 16px; }
.m-tabs { box-shadow: 0 6px 0 var(--toy-ink); }
.m-notice { box-shadow: 0 6px 0 var(--toy-ink); }

/* Page banners hang from two ropes */
.page-hero-paper, .m-tool-head { position: relative; }
.page-hero .wrap > .page-hero-paper, .page-hero-paper {
  border: 4px solid var(--toy-wood-dark); border-top-width: 4px; border-radius: 10px;
  box-shadow: inset 0 0 0 3px var(--toy-wood), 0 10px 0 var(--toy-wood-dark), 0 24px 30px -18px rgba(0, 0, 0, .6);
  margin-top: 26px; transform: rotate(-.6deg);
}
.page-hero-paper::before, .page-hero-paper::after {
  content: ""; position: absolute; top: -30px; width: 6px; height: 32px; background: linear-gradient(90deg, #8d6a35, var(--toy-rope), #8d6a35); border-radius: 3px; box-shadow: 0 0 0 2px rgba(0, 0, 0, .15);
}
.page-hero-paper::before { left: 12%; transform: rotate(6deg); }
.page-hero-paper::after { right: 12%; transform: rotate(-6deg); }
.page-hero-paper > *:first-child::before { content: ""; position: absolute; left: calc(12% - 6px); top: -8px; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #9aa4ad 60%, #4b5563); box-shadow: calc(76% + 0px) 0 0 0 transparent; }

/* A title plank for the inside of the dashboard and the staff area */
.m-view h1[data-focus-start], .s-view h1[data-focus-start], .m-tool-title h1 {
  display: inline-block; position: relative; margin: 6px 0 .35em; padding: .18em .75em .22em;
  background: var(--toy-sign); color: #23180f; border: 3px solid var(--toy-ink); border-radius: 12px;
  box-shadow: 0 6px 0 var(--toy-ink); transform: rotate(-1deg); font-family: var(--font-display); letter-spacing: .01em;
}
.m-view h1[data-focus-start]::before, .m-view h1[data-focus-start]::after, .s-view h1[data-focus-start]::before, .s-view h1[data-focus-start]::after, .m-tool-title h1::before, .m-tool-title h1::after {
  content: ""; position: absolute; top: 7px; width: 10px; height: 10px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #a7b0b8 60%, #4b5563); box-shadow: 0 1px 0 rgba(0, 0, 0, .35);
}
.m-view h1[data-focus-start]::before, .s-view h1[data-focus-start]::before, .m-tool-title h1::before { left: 7px; }
.m-view h1[data-focus-start]::after, .s-view h1[data-focus-start]::after, .m-tool-title h1::after { right: 7px; }
.m-view h1.sr-only { all: unset; position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.m-tool-head { border: 0; }
.m-tool-ico { border: 3px solid var(--toy-ink); box-shadow: 0 5px 0 var(--toy-ink); border-radius: 16px; background: var(--toy-paper); color: var(--toy-ink); }

/* ---------- Tabs: wooden signs hanging from a rail ---------- */
.m-tabs { position: relative; background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 14px 6px 10px !important; overflow: visible !important; }
.m-tabs::before { content: ""; position: absolute; left: 0; right: 0; top: 2px; height: 10px; border-radius: 6px; background: linear-gradient(180deg, var(--toy-wood), var(--toy-wood-dark)); box-shadow: 0 3px 0 rgba(0, 0, 0, .3); }
.m-tabs ul { gap: 10px; padding: 0 6px; overflow-x: auto; scrollbar-width: none; }
.m-tabs li { position: relative; padding-top: 8px; }
.m-tabs li::before { content: ""; position: absolute; left: 50%; top: -4px; width: 4px; height: 14px; margin-left: -2px; background: var(--toy-rope); }
.m-tabs a {
  position: relative; border: 3px solid var(--toy-ink) !important; border-radius: 12px !important; background: var(--toy-paper) !important; color: var(--toy-ink) !important;
  box-shadow: 0 5px 0 var(--toy-ink); min-height: 60px; transform-origin: 50% -14px; transition: transform .35s var(--toy-spring), box-shadow .2s;
}
.m-tabs a::after { content: ""; position: absolute; top: 5px; left: 50%; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #9aa4ad 60%, #4b5563); }
.m-tabs a:hover { transform: rotate(-2deg) translateY(1px); background: var(--toy-paper) !important; }
.m-tabs a:hover::before { content: ""; position: absolute; inset: -5px; } /* the tab tilts under the pointer: it keeps a margin around itself so the pointer stays on it (no flutter at its edges) */
.m-tabs a[aria-current="page"] { background: var(--c-tint-paper, var(--toy-sign)) !important; box-shadow: 0 3px 0 var(--toy-ink), 0 0 0 4px color-mix(in srgb, var(--c, #a3865c) 45%, transparent); animation: toy-swing 1.6s var(--toy-spring) 1; }
.m-tabs a .icon { color: var(--c-ink-paper, var(--toy-ink)) !important; }
@keyframes toy-swing { 0% { transform: rotate(-4deg); } 40% { transform: rotate(3deg); } 70% { transform: rotate(-1.5deg); } 100% { transform: rotate(0); } }

/* The learn-side top navigation becomes little signs too */
.primary-nav a { border: 2.5px solid transparent; border-radius: 12px; transition: transform .2s var(--toy-spring), box-shadow .2s, background .15s; }
.primary-nav a:hover { border-color: var(--toy-ink); box-shadow: 0 4px 0 var(--toy-ink); transform: translateY(-2px); background: var(--toy-paper); }
.primary-nav a[aria-current="page"] { border-color: var(--toy-ink); box-shadow: 0 4px 0 var(--toy-ink); border-radius: 12px; background: var(--c-tint, var(--toy-sign)); }
.primary-nav a[aria-current="page"] .dot { transform: scale(1.3) rotate(-10deg); }

/* ---------- Inputs: slots cut into the board ---------- */
input[type="text"], input[type="number"], input[type="email"], input[type="search"], input[type="date"], input[type="time"], input[type="tel"], input[type="url"], input[type="password"], input[type="month"], select, textarea {
  border: 3px solid var(--toy-ink); border-radius: 12px; background: var(--toy-paper); color: var(--toy-ink);
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, .09), inset 0 0 0 1px rgba(0, 0, 0, .04);
}
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-color: var(--toy-ink); box-shadow: inset 0 3px 0 rgba(0, 0, 0, .09), 0 0 0 6px color-mix(in srgb, var(--focus) 25%, transparent); }
input[type="range"] { accent-color: var(--action); height: 2.2rem; }
/* Checks and radios: real little stamps */
input[type="checkbox"]:not([data-plain]), input[type="radio"]:not([data-plain]) {
  appearance: none; -webkit-appearance: none; display: inline-grid; place-content: center; flex: none;
  width: 1.55rem; height: 1.55rem; margin: 0; vertical-align: middle; cursor: pointer;
  border: 3px solid var(--toy-ink); border-radius: 7px; background: var(--toy-paper);
  box-shadow: 0 3px 0 var(--toy-ink); transition: transform .14s var(--toy-spring), box-shadow .14s, background .14s;
}
input[type="radio"]:not([data-plain]) { border-radius: 50%; }
input[type="checkbox"]:not([data-plain])::before, input[type="radio"]:not([data-plain])::before {
  content: ""; width: .95rem; height: .95rem; transform: scale(0); transition: transform .2s var(--toy-spring);
  background: var(--toy-ink); clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
input[type="radio"]:not([data-plain])::before { width: .7rem; height: .7rem; border-radius: 50%; clip-path: none; }
input[type="checkbox"]:not([data-plain]):checked { background: var(--action); border-color: var(--toy-ink); }
input[type="checkbox"]:not([data-plain]):checked::before { transform: scale(1); background: var(--on-action); }
input[type="radio"]:not([data-plain]):checked::before { transform: scale(1); background: var(--action); }
input[type="checkbox"]:not([data-plain]):active, input[type="radio"]:not([data-plain]):active { transform: translateY(2px); box-shadow: 0 1px 0 var(--toy-ink); }
input[type="checkbox"]:not([data-plain]):focus-visible, input[type="radio"]:not([data-plain]):focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
input[type="checkbox"]:not([data-plain]):disabled, input[type="radio"]:not([data-plain]):disabled { opacity: .5; cursor: not-allowed; }
.check { border: 3px solid var(--toy-ink); border-radius: 12px; background: var(--toy-paper); color: var(--toy-ink); box-shadow: 0 4px 0 var(--toy-ink); transition: transform .14s var(--toy-spring); }
.check:has(input:checked) { background: color-mix(in srgb, var(--action) 14%, var(--toy-paper)); animation: toy-stamp .35s var(--toy-spring); }
@keyframes toy-stamp { 0% { transform: scale(1); } 40% { transform: scale(.96) rotate(-1deg); } 100% { transform: scale(1); } }
/* Picker chips are toy blocks too. Colour wells (swatches, planks, mood cards, garland and light sets) are left
   alone here: a colour is the whole point of them, so nothing may paint paper over it. The :where() keeps this
   rule light, so each family's own base look still applies and the "chosen" layer below always wins. */
.m-pick label:where(:not(.m-swatch-pick, .m-swatch-auto, .gg-color, .m-mood-pick)) > span:where(:not(.ul-swatch, .tr-swatch, .m-mood-swatch)), .m-add-opt > span, .w-shape-pick label > span, .m-music-pick > span, .lp-tpl > span, .st-mat > span { border: 3px solid var(--toy-ink) !important; box-shadow: 0 4px 0 var(--toy-ink); border-radius: 14px; background-color: var(--toy-paper); transition: transform .14s var(--toy-spring), box-shadow .14s, background-color .14s; }
.m-pick .m-swatch-pick > span { border: 3px solid var(--toy-ink); border-radius: 50%; box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .45), 0 3px 0 var(--toy-ink); }
.m-pick .m-swatch-auto > span { background-image: linear-gradient(135deg, transparent 45%, rgba(255, 255, 255, .85) 45% 55%, transparent 55%) !important; }
/* Visually hidden inputs stay hidden even when disabled */
.m-pick input:is([type="radio"], [type="checkbox"]):disabled, .st-mat input:disabled, .st-switch input:disabled { opacity: 0; }
.m-pick input:focus-visible + span, .m-add-opt input:focus-visible + span, .w-shape-pick input:focus-visible + span, .m-music-pick input:focus-visible + span, .lp-tpl input:focus-visible + span, .st-mat input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 3px; }

/* ---------- Draft 10: one "chosen" look for every option on the site ----------
   Whatever the control (a size, a colour, a chip, a template, a shelf material, a filter, a pressed button),
   the chosen one is pressed down into the board, filled with the warm sign yellow, and stamped with an ink
   check badge. Text and icons on it are always ink, so it reads in every world and in dark mode.
   Colour wells keep their own colour and get the ring and the badge instead of the fill.
   Specificity is deliberately high (0,4,x): the families' older "selected" rules in members.css, shelf.css and
   toys.css are superseded by this layer. Switch cards (.sw-card), medicine status buttons and arcade cartridges
   have their own states and stay out of it. */
:root { --chosen: #fff1b8; --chosen-ink: #23180f; --chosen-badge: #23180f; --chosen-badge-ink: #fffdf7; }
.m-pick label:not(.m-swatch-pick, .m-swatch-auto, .gg-color, .m-mood-pick, .check) > input:checked + span:not(.ul-swatch, .tr-swatch, .m-mood-swatch),
.m-add-grid .m-add-opt > input:checked + span, .w-shape-pick label > input:checked + span, .m-music-grid .m-music-pick > input:checked + span,
.lp-tpls .lp-tpl > input:checked + span, .st-mats .st-mat > input:checked + span, .m-check-chips label > input:checked + span, .m-mood-scale label > input:checked + span, .m-scale5 label > input:checked + span, .m-kind-row .m-kind-pick > input:checked + span {
  background: var(--chosen); color: var(--chosen-ink); border-color: var(--chosen-ink);
  transform: translateY(3px); box-shadow: 0 1px 0 var(--chosen-ink), inset 0 0 0 2px var(--chosen-ink);
}
.m-pick label:not(.m-swatch-pick, .m-swatch-auto, .gg-color, .m-mood-pick, .check) > input:checked + span:not(.ul-swatch, .tr-swatch, .m-mood-swatch) :is(small, b, strong, em, .icon),
.m-add-grid .m-add-opt > input:checked + span :is(small, b, strong, em, .icon), .m-music-grid .m-music-pick > input:checked + span :is(small, b, strong, em, .icon),
.lp-tpls .lp-tpl > input:checked + span :is(small, b, strong, em), .st-mats .st-mat > input:checked + span :is(small, b, strong, em), .m-check-chips label > input:checked + span :is(small, b, strong, em, .icon), .m-scale5 label > input:checked + span :is(small, b, strong, em) { color: var(--chosen-ink); }
/* the check badge: an ink circle with a cream check, first thing on the chip */
.m-pick label:not(.m-swatch-pick, .m-swatch-auto, .gg-color, .m-mood-pick, .check, .m-chip-pick, .gg-pick, .m-add-opt, .m-music-pick, .lp-tpl, .st-mat, .m-mood-scale label, .w-shape-pick label) > input:checked + span:not(.ul-swatch, .tr-swatch, .m-mood-swatch)::before,
.m-check-chips label > input:checked + span::before, .m-scale5 label > input:checked + span::before, .m-kind-row .m-kind-pick > input:checked + span::before {
  content: "✓"; display: inline-grid; place-items: center; flex: none; width: 1.35em; height: 1.35em; margin: 0 .3em 0 0; border-radius: 50%;
  background: var(--chosen-badge); color: var(--chosen-badge-ink); font-size: .85em; font-weight: 900; line-height: 1; position: static; top: auto; right: auto;
}
/* icon-only squares and colour wells wear the badge on one corner, so the picture stays whole */
.m-pick .m-chip-pick > input:checked + span::before, .m-pick .gg-pick:not(.gg-color) > input:checked + span::before, .m-pick .m-swatch-pick > input:checked + span::before, .m-pick .gg-color > input:checked + span::before,
.m-pick label > input:checked + :is(.ul-swatch, .tr-swatch, .m-mood-swatch)::before, .m-pick .m-mood-pick > input:checked + span::before, .m-pick .m-mood-scale label > input:checked + span::before, .m-mood-scale label > input:checked + span::before,
.m-add-grid .m-add-opt > input:checked + span::before, .m-pick .m-add-opt > input:checked + span::before, .w-shape-pick label > input:checked + span::before, .m-music-grid .m-music-pick > input:checked + span::before, .lp-tpls .lp-tpl > input:checked + span::before, .st-mats .st-mat > input:checked + span::before {
  content: "✓"; position: absolute; top: -7px; right: -7px; z-index: 1; display: grid; place-items: center; width: 20px; height: 20px; margin: 0; border-radius: 50%;
  background: var(--chosen-badge); color: var(--chosen-badge-ink); font-size: 12px; font-weight: 900; line-height: 1; box-shadow: 0 0 0 2px #fffdf7;
}
.m-pick .m-chip-pick > input:checked + span, .m-pick .gg-icons .gg-pick > input:checked + span { background: var(--chosen); color: var(--chosen-ink); border-color: var(--chosen-ink); transform: translateY(3px); box-shadow: 0 1px 0 var(--chosen-ink), inset 0 0 0 2px var(--chosen-ink); }
/* colour wells: the ring says "chosen", the colour stays */
.m-pick .m-swatch-pick > input:checked + span, .m-pick .gg-color > input:checked + span, .m-pick label > input:checked + :is(.ul-swatch, .tr-swatch), .m-pick .m-mood-pick > input:checked + .m-mood-swatch {
  outline: 3px solid var(--chosen-ink); outline-offset: 3px; transform: translateY(2px); box-shadow: 0 1px 0 var(--chosen-ink), inset 0 0 0 3px rgba(255, 255, 255, .55);
}
.m-pick .m-swatch-pick, .m-pick .gg-color, .m-pick .ul-colors label, .m-pick .m-mood-pick, .m-pick .m-chip-pick, .m-pick .gg-pick, .m-mood-scale label, .m-add-opt, .m-music-pick, .lp-tpl, .st-mat, .w-shape-pick label { position: relative; }
/* pressed toggle buttons: lock, pins, filters, segments, size keys, the music play buttons, list kinds, category chips */
:is(.btn, .icon-btn, .m-seg button, .m-size-pick button, .seg button, .m-filter-chip, .m-cat-chip, .m-gc-chip, .li-pin, .world-pick, .m-tool-actions [data-pin])[aria-pressed="true"]:not(.m-status-btn, .sw-card, .arc-game, .bulb-btn), .icon-btn.is-on:not(.sw-card) {
  background: var(--chosen); color: var(--chosen-ink); border-color: var(--chosen-ink);
  transform: translateY(3px); box-shadow: 0 1px 0 var(--chosen-ink), inset 0 0 0 2px var(--chosen-ink);
}
:is(.btn, .icon-btn, .m-seg button, .m-size-pick button, .seg button, .m-filter-chip, .m-cat-chip, .m-gc-chip, .li-pin, .world-pick, .m-tool-actions [data-pin])[aria-pressed="true"]:not(.m-status-btn, .sw-card, .arc-game, .bulb-btn) :is(.icon, small, b), .icon-btn.is-on:not(.sw-card) .icon { color: var(--chosen-ink); }
:is(.btn, .icon-btn, .m-seg button, .m-size-pick button, .seg button, .m-filter-chip, .m-cat-chip, .m-gc-chip, .li-pin, .world-pick)[aria-pressed="true"]:not(.m-status-btn, .sw-card, .arc-game, .bulb-btn):hover { background: #ffe88f; transform: translateY(3px); box-shadow: 0 1px 0 var(--chosen-ink), inset 0 0 0 2px var(--chosen-ink); }
@media (prefers-reduced-motion: reduce) { .m-pick label > input:checked + span, .m-add-opt > input:checked + span, .w-shape-pick label > input:checked + span, .m-music-pick > input:checked + span, .lp-tpl > input:checked + span, .st-mat > input:checked + span, :is(.btn, .icon-btn, .m-seg button, .seg button, .m-filter-chip, .m-cat-chip, .m-gc-chip, .li-pin, .world-pick)[aria-pressed="true"] { transition: none; } }

/* ---------- Dialogs: a clipboard pops up ---------- */
.m-dialog, dialog.toy {
  border: 3px solid var(--toy-ink) !important; border-radius: 18px !important; background: #fffaf0; color: #23180f;
  box-shadow: 0 10px 0 var(--toy-ink), 0 40px 70px -24px rgba(0, 0, 0, .7) !important; overflow: visible;
  animation: toy-pop .42s var(--toy-spring) both;
}
.m-dialog::before { content: ""; position: absolute; top: -16px; left: 50%; width: 32%; max-width: 180px; min-width: 110px; height: 30px; transform: translateX(-50%); border-radius: 10px 10px 6px 6px; background: linear-gradient(180deg, #f3f4f6, #9aa4ad); border: 3px solid #4b5563; z-index: 2; }
.m-dialog::after { content: ""; position: absolute; top: -26px; left: 50%; width: 12%; min-width: 44px; height: 16px; transform: translateX(-50%); border: 3px solid #6b7280; border-bottom: 0; border-radius: 10px 10px 0 0; z-index: 1; }
.m-dialog-inner { border-radius: 16px; overflow: hidden; }
.m-dialog-head { padding-top: calc(var(--space-4) + 10px); background: repeating-linear-gradient(180deg, transparent 0 27px, rgba(27, 92, 162, .12) 27px 29px); border-bottom: 3px solid var(--toy-ink); }
.m-dialog::backdrop { background: rgba(20, 12, 30, .55); backdrop-filter: blur(3px); }
@keyframes toy-pop { from { transform: translateY(24px) scale(.92); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- Toasts: a speech bubble ---------- */
.toast { border: 3px solid var(--toy-ink); border-radius: 16px; background: var(--toy-paper) !important; color: #23180f !important; box-shadow: 0 6px 0 var(--toy-ink), 0 20px 30px -14px rgba(0, 0, 0, .5); font-weight: 800; padding: .7em 1.1em; animation: toy-pop .4s var(--toy-spring) both; }
.toast::after { content: ""; position: absolute; left: 50%; bottom: -14px; margin-left: -8px; border: 8px solid transparent; border-top: 10px solid var(--toy-ink); border-bottom: 0; }
:root[data-theme="dark"]:not([data-world]) .toast { color: var(--ink) !important; }

/* ---------- Things pop into place as you scroll ---------- */
.pop-in { animation: toy-pop-in .5s var(--toy-spring) both; }
@keyframes toy-pop-in { from { transform: translateY(18px) scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }
.pop-wait { opacity: 0; }
.is-tilting { transition: transform .08s linear !important; will-change: transform; }

/* Tags and chips are stickers */
.m-tag, .chip, .badge, .gl-chip { border: 2px solid var(--toy-ink); box-shadow: 0 2px 0 var(--toy-ink); font-weight: 800; }
/* Grips look like real grab handles */
.m-grip { border: 2px solid var(--toy-ink); border-radius: 8px; background: var(--toy-paper); box-shadow: 0 2px 0 var(--toy-ink); cursor: grab; }
.m-grip:active { cursor: grabbing; transform: translateY(1px); box-shadow: 0 1px 0 var(--toy-ink); }


/* ---------- Page to page: a soft crossfade ---------- */
@view-transition { navigation: auto; }

/* ---------- Calm and clear versions ---------- */
@media (prefers-reduced-motion: reduce) {
  .btn, .copy-btn, .icon-btn, .seg button, .check, .m-tabs a, .card-link, .door, .tool-card, input[type="checkbox"], input[type="radio"] { transition: none !important; animation: none !important; }
  .pop-in, .toast, .m-dialog { animation: none !important; }
  .pop-wait { opacity: 1; }
  .card-link:hover, .door:hover, .tool-card:hover, .btn:hover { transform: none !important; }
  @view-transition { navigation: none; }
}
:root[data-motion="reduce"] :is(.btn, .copy-btn, .icon-btn, .seg button, .check, .m-tabs a, .card-link, .door, .tool-card, input[type="checkbox"], input[type="radio"], .pop-in, .toast, .m-dialog) { transition: none !important; animation: none !important; }
:root[data-motion="reduce"] .pop-wait { opacity: 1; }
:root[data-motion="reduce"] :is(.card-link, .door, .tool-card, .btn):hover { transform: none !important; }
:root[data-look="simple"] :is(.btn, .copy-btn, .icon-btn, .seg button, .check, .card, .door, .service-panel, .person, .faq details, .table-wrap, .form-card, .tool-panel, .paper, .m-panel, .m-card, .m-sheet, .m-notice, .m-home-bar, .m-unlock-form, .m-tour, .callout, .in-short, .key-facts, .page-hero-paper, .m-tabs a, .m-dialog, .toast, .m-tag, .chip, .badge, .gl-chip, .m-grip, .m-view h1[data-focus-start], .s-view h1[data-focus-start], .m-tool-title h1, .m-tool-ico, .m-pick label > span, .m-add-opt > span, .w-shape-pick span, .m-music-pick span, .world-pick, .primary-nav a) {
  box-shadow: none !important; transform: none !important; animation: none !important; border-width: 2px !important; border-radius: 10px !important;
}
:root[data-look="simple"] :is(.page-hero-paper::before, .page-hero-paper::after, .m-tabs::before, .m-tabs li::before, .m-tabs a::after, .m-dialog::before, .m-dialog::after, .toast::after, .m-view h1[data-focus-start]::before, .m-view h1[data-focus-start]::after, .m-tool-title h1::before, .m-tool-title h1::after) { display: none !important; }
:root[data-look="simple"] .m-view h1[data-focus-start], :root[data-look="simple"] .m-tool-title h1 { background: transparent; border: 0 !important; padding: 0; color: inherit; }
:root[data-look="simple"] .m-tabs { padding: 6px !important; }
:root[data-look="simple"] input[type="checkbox"]:not([data-plain]), :root[data-look="simple"] input[type="radio"]:not([data-plain]) { box-shadow: none; border-width: 2px; }
:root[data-contrast="high"] :is(.btn, .card, .door, .m-panel, .m-card, .m-sheet, .m-notice, .m-tabs a, .m-dialog, .toast, .check, input, select, textarea) { box-shadow: none !important; border-color: currentColor !important; }
:root[data-contrast="high"] .btn[aria-pressed="true"], :root[data-contrast="high"] .seg button[aria-pressed="true"] { outline: 3px solid currentColor; outline-offset: -6px; }
@media print { .btn, .card, .m-panel, .m-card { box-shadow: none !important; border-color: #000 !important; } }

/* ---------- Keeper: the "newer version" bar ---------- */
.k-update { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 9000; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; max-width: min(92vw, 40rem); padding: 10px 14px; border-radius: 16px; background: #fffaf0; color: #23180f; border: 3px solid var(--toy-ink, #23180f); box-shadow: 0 6px 0 var(--toy-ink, #23180f), 0 20px 40px -16px rgba(0, 0, 0, .5); font-weight: 700; animation: toy-pop .42s var(--toy-spring, ease) both; }
@media print { .k-update { display: none; } }
/* Pressed, hovered and switched-on buttons keep readable words: the text color always travels with the new background */
.copy-btn:hover, .copy-btn:active { background: color-mix(in srgb, var(--toy-paper) 85%, var(--toy-ink)); color: var(--toy-ink); }
.center-link .btn-quiet:hover, .center-link .btn-quiet:active { background: #f3ead8; color: #23180f; }
/* In a world, the Accessibility panel, dialogs and toasts are light paper with dark ink, whatever the Colors setting
   (their words were dark, but their paper followed the dark setting) */
:root[data-world] .reading-panel, :root[data-world] .toast {
  background-color: #fffdf7; color: #23180f;
  --ink: #23180f; --ink-2: #47372a; --ink-3: #5a4836; --surface: #fffdf7; --surface-2: #faf4e8; --band: #f3ead8;
  --line: #dcc8a6; --line-strong: #a3865c; --link: #1b5ca2; --focus: #29298e; --focus-halo: #ffc20e;
  --toy-paper: #fffdf7; --toy-ink: #23180f;
}
/* In a world, a hovered, pressed or focused menu tab is light paper with dark words (and the Members tab stays ink) */
:root[data-world] .primary-nav li:not(.nav-portal) a:is(:hover, :active, :focus-visible) { background: #fff3c4 !important; color: #23180f !important; }
:root[data-world] .primary-nav .nav-portal a:is(:hover, :active, :focus-visible) { background: #23180f !important; color: #fffdf7 !important; }

/* ==========================================================================
   Alive under the cursor (draft 10, items 0 + 1 + 2)
   Whatever the pointer rests on keeps moving a little, slowly and continuously, so the eye knows where the
   cursor is: buttons breathe, cards and tiles float, shelf objects sway, arrows beckon, the start-page doors
   bob. On a touch screen a tap does the same for a moment (`.is-touched`, set by site.js). Everything here
   uses the separate translate / rotate / scale properties, so it composes with each piece's own transform and
   never shifts layout. Off for reduced motion (the device setting or the site's own) and in the simple view.
   ========================================================================== */
@keyframes al-breathe { 50% { scale: 1.03; } }
@keyframes al-float { 50% { translate: 0 -4px; } }
@keyframes al-sway { 25% { rotate: -1.1deg; translate: 0 -2px; } 75% { rotate: 1.1deg; translate: 0 -1px; } }
@keyframes al-nudge { 50% { translate: 4px 0; } }
@keyframes al-tilt { 50% { rotate: -2.5deg; } }
@keyframes al-shine { 50% { filter: brightness(1.07); } }
/* The gate: not with reduced motion, not in the simple view, not while the page scrolls (html[data-scrolling], set by
   site.js), and the pointer rules only on devices with a real pointer (a phone's tap would stick a :hover on the thing
   it touched and leave it swaying). Each motion waits a beat before it starts, so a cursor just passing over something
   moves nothing, and the three transform parts ease back to rest when it ends instead of snapping. */
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  :root:not([data-motion="reduce"]):not([data-look="simple"]):not([data-alive="off"]):not([data-scrolling]) {
    /* small controls: a slow breath */
    & :is(.btn, .copy-btn, .icon-btn, .seg button, .m-seg button, .world-pick, .m-filter-chip, .m-cat-chip, .m-gc-chip, .li-pin, .m-prompt, .lb-add, .sticker, .st-switch, .ob-go, .bulb-btn, .gd-arrow, .w-menu, .ck-nav button, .np-plus, .ln, .tb-btn, .dr, .bk, .fr):is(:hover, :focus-visible, .is-touched) { animation: al-breathe 2.6s ease-in-out .25s infinite; }
    & :is(.check, .m-chip-pick, .m-swatch-pick, .m-size-pick label, .w-shape-pick label):is(:hover, .is-touched) > span { animation: al-breathe 2.6s ease-in-out .25s infinite; }
    /* cards, tiles and doors: a slow float */
    & :is(.card-link, .door, .tool-card, .index-card, .start-choice, .m-lib-item, .m-calm-tile, .drawer-front:not(.is-trying *, .is-wrong *, .is-open *), .sw-card, .arc-game:not(.is-shake), .m-tabs a, .primary-nav a, .lp-tpl, .m-mood-pick > span, .m-add-opt > span, .st-mat > span, .m-music-pick > span, .m-office-list > li, .os-layout, .gd-card, .tk:not(.is-lifted), .qs-check, .qs-btn, .ck-add):is(:hover, :focus-visible, .is-touched) { animation: al-float 3s ease-in-out .25s infinite; }
    /* things on the shelf: a slow sway (replaces the one-shot wiggle) */
    & .w:not(.is-lifted):is(:hover, .is-touched) > .ob { animation: al-sway 3.4s ease-in-out .3s infinite; }
    /* arrows beckon */
    & :is(.ob-go, .choice-go, .card-link, .btn, .m-tabs a):is(:hover, :focus-visible, .is-touched) .icon:last-child:not(:first-child), & .start-choice:is(:hover, .is-touched) .choice-go .icon { animation: al-nudge 1.6s ease-in-out .25s infinite; }
    /* the lone icon inside a round button rocks */
    & :is(.icon-btn, .w-menu, .gd-arrow, .ck-nav button):is(:hover, :focus-visible, .is-touched) .icon { animation: al-tilt 2s ease-in-out .25s infinite; }
    /* big surfaces (the shelf, sheets, cards, the header) are not in the lists above, so they never move; only a card's
       own icon tilts. (An earlier rule here set animation: none on them while hovered, which cancelled a surface's
       entrance animation under the pointer and replayed it when the pointer left: the whole shelf blinked every time
       the cursor crossed its edge. Draft 10, post-deploy item 1.) */
    & :is(.m-card, .card, .paper):has(> .m-card-head):is(:hover) > .m-card-head .m-card-ico, & .card:hover > h2 .icon { animation: al-tilt 2.4s ease-in-out .25s infinite; }
  }
}
/* touch screens and keyboards: the same motion for a moment after a real tap (.is-touched, set by site.js), or while focused */
@media (prefers-reduced-motion: no-preference) and (hover: none) {
  :root:not([data-motion="reduce"]):not([data-look="simple"]):not([data-alive="off"]):not([data-scrolling]) {
    & :is(.btn, .copy-btn, .icon-btn, .seg button, .m-seg button, .world-pick, .m-filter-chip, .m-cat-chip, .m-gc-chip, .li-pin, .m-prompt, .lb-add, .sticker, .st-switch, .ob-go, .bulb-btn, .gd-arrow, .w-menu, .ck-nav button, .np-plus, .ln, .tb-btn, .dr, .bk, .fr):is(:focus-visible, .is-touched) { animation: al-breathe 2.6s ease-in-out infinite; }
    & :is(.check, .m-chip-pick, .m-swatch-pick, .m-size-pick label, .w-shape-pick label).is-touched > span { animation: al-breathe 2.6s ease-in-out infinite; }
    & :is(.card-link, .door, .tool-card, .index-card, .start-choice, .m-lib-item, .m-calm-tile, .drawer-front:not(.is-trying *, .is-wrong *, .is-open *), .sw-card, .arc-game:not(.is-shake), .m-tabs a, .primary-nav a, .lp-tpl, .m-mood-pick > span, .m-add-opt > span, .st-mat > span, .m-music-pick > span, .m-office-list > li, .os-layout, .gd-card, .qs-check, .qs-btn, .ck-add):is(:focus-visible, .is-touched) { animation: al-float 3s ease-in-out infinite; }
    & :is(.ob-go, .choice-go, .card-link, .btn, .m-tabs a):is(:focus-visible, .is-touched) .icon:last-child:not(:first-child), & .start-choice.is-touched .choice-go .icon { animation: al-nudge 1.6s ease-in-out infinite; }
    & :is(.icon-btn, .w-menu, .gd-arrow, .ck-nav button):is(:focus-visible, .is-touched) .icon { animation: al-tilt 2s ease-in-out infinite; }
  }
}
/* the motion eases out instead of snapping back when the pointer leaves or the scroll starts (only on things that have
   no transition of their own: a transition-property here would replace theirs) */
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-motion="reduce"]):not([data-look="simple"]) :is(.w > .ob, .m-card-ico, .card > h2 .icon, :is(.ob-go, .card-link, .btn) > .icon:last-child:not(:first-child), :is(.icon-btn, .w-menu, .gd-arrow, .ck-nav button) > .icon) { transition-property: translate, rotate, scale; transition-duration: .35s; transition-timing-function: ease-out; }
}