/* Texas Toy Lab kit: the one set of parts (the 10/10 plan, 2026-09-29, "Paper, Ink & Plastic").
   Stamped at the top of every <head> after tokens.css. It applies only on pages that opt in with <body class="kit">,
   so a page moves onto the kit by adding that class and deleting its own copies of these rules. Every selector is
   wrapped in :where(.kit) so a page's own rule for the same class still wins while it is being migrated.

   Parts: base + type, .btn, .go, .tape, .crumb, .toy-card, .swing-tag, .slip, .polaroid, .trust-row, .dad-desk,
   .hazard, .ticket, .stamp, .next-stop, .tile, .grid-*, .wrap/.section. Page templates live in pages.css. */

/* ---------- base + type ---------- */
:where(body.kit){margin:0;font-family:var(--f-body);font-size:var(--fs-body);font-weight:600;line-height:1.6;color:var(--ink);
  background-color:var(--paper);background-image:var(--dots);background-size:var(--dots-size);-webkit-font-smoothing:antialiased}
:where(.kit) :where(*,*::before,*::after){box-sizing:border-box}
:where(.kit) :where(button,input,select,textarea){font:inherit;color:inherit}
:where(.kit) :where(h1,h2,h3,h4){font-family:var(--f-display);font-weight:400;margin:0;text-wrap:balance}
:where(.kit) :where(p,ul,ol,dl,figure){margin:0}
:where(.kit) :where(img,svg,video){max-width:100%}
:where(.kit) :where(:focus-visible){outline:3px dashed var(--ink);outline-offset:3px}
:where(.kit main) :where(a:not([class])){color:var(--ink);text-decoration:underline;text-decoration-color:var(--coral);
  text-decoration-thickness:3px;text-underline-offset:3px;border-radius:2px}
:where(.kit main) :where(a:not([class])):hover,:where(.kit main) :where(a:not([class])):focus-visible{background:linear-gradient(transparent 55%,var(--sun) 55%)}

:where(.kit) .h-display{font-family:var(--f-display);font-weight:400;font-size:var(--fs-display);line-height:1.02;letter-spacing:.005em}
:where(.kit) .h1{font-family:var(--f-display);font-weight:400;font-size:var(--fs-h1);line-height:1.05;letter-spacing:.005em}
:where(.kit) .h2{font-family:var(--f-display);font-weight:400;font-size:var(--fs-h2);line-height:1.1}
:where(.kit) .h2-doc{font-family:var(--f-display);font-weight:400;font-size:var(--fs-h2-doc);line-height:1.1}
:where(.kit) .h3{font-family:var(--f-display);font-weight:400;font-size:var(--fs-h3);line-height:1.15}
:where(.kit) .lede{font-size:var(--fs-lede);font-weight:700;line-height:1.5;max-width:var(--measure)}
:where(.kit) .prose{max-width:var(--measure)}
:where(.kit) .prose > * + *{margin-top:var(--s-4)}
:where(.kit) .small{font-size:var(--fs-small);font-weight:700}
:where(.kit) .label{font-size:var(--fs-label);font-weight:800}
:where(.kit) .muted{color:var(--muted)}
:where(.kit) .hand{font-family:var(--f-hand);font-weight:700;font-size:var(--fs-hand);color:var(--teal-ink);line-height:1.15}
:where(.kit) .mono{font-family:var(--f-mono);font-weight:700;font-size:var(--fs-mono);letter-spacing:.04em}
/* the printed layer-line heading: kid pages only (Dad's Desk headings stay plain ink) */
:where(.kit) .h-printed{background:repeating-linear-gradient(180deg,var(--ink) 0 2px,#4a3f73 2px 3px);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(1px 1px 0 #ff8a78) drop-shadow(1px 1px 0 #ff8a78) drop-shadow(1px 1px 0 #e0604d) drop-shadow(1px 1px 0 var(--error))}

/* ---------- layout ---------- */
:where(.kit) .wrap{max-width:var(--w-page);margin:0 auto;padding:0 var(--gutter)}
:where(.kit) .wrap--text{max-width:calc(var(--w-text) + 2 * var(--gutter))}
:where(.kit) .wrap--wide{max-width:var(--w-wide)}
:where(.kit) .section{padding:var(--section) 0}
:where(.kit) .section--tight{padding:var(--s-7) 0}
:where(.kit) .band-sand{background:var(--sand)}
:where(.kit) .stack > * + *{margin-top:var(--s-4)}
:where(.kit) .head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--s-3);margin-bottom:var(--s-6)}
:where(.kit) .head .lede{margin:0 auto}
/* grids pick columns from the item count (never auto-fill leftovers) */
:where(.kit) .grid{display:grid;gap:var(--s-4)}
:where(.kit) .grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
:where(.kit) .grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
:where(.kit) .grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
:where(.kit) .grid-5{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (min-width:768px){:where(.kit) .grid{gap:var(--s-5)}}
@media (max-width:900px){:where(.kit) .grid-4,:where(.kit) .grid-5{grid-template-columns:repeat(2,minmax(0,1fr))}:where(.kit) .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){:where(.kit) .grid-2,:where(.kit) .grid-3{grid-template-columns:minmax(0,1fr)}}
/* an odd last card on a two-column phone grid spans both columns */
@media (max-width:900px){:where(.kit) :is(.grid-3,.grid-5) > :last-child:nth-child(odd){grid-column:1 / -1}}

/* ---------- 1. .btn: the only button ---------- */
:where(.kit) .btn{display:inline-flex;align-items:center;justify-content:center;gap:.45em;min-height:48px;padding:0 22px;
  font-family:var(--f-display);font-weight:400;font-size:1.125rem;line-height:1;letter-spacing:.01em;color:var(--ink);
  background:var(--card);border:3px solid var(--ink);border-radius:var(--r-pill);box-shadow:var(--sh-2);text-decoration:none;
  cursor:pointer;white-space:nowrap;-webkit-tap-highlight-color:transparent;
  transition:transform var(--t-quick) var(--ease-pop),box-shadow var(--t-quick) var(--ease-pop)}
:where(.kit) .btn svg{width:1em;height:1em;flex:none}
:where(.kit) .btn--buy{background:var(--coral)}
:where(.kit) .btn--make{background:var(--sun)}
:where(.kit) .btn--visit{background:var(--teal)}
:where(.kit) .btn--go{background:var(--card)}
:where(.kit) .btn--sm{min-height:40px;padding:0 16px;font-size:1rem}
:where(.kit) .btn--lg{min-height:56px;padding:0 28px;font-size:1.25rem}
:where(.kit) .btn--block{width:100%}
@media (hover:hover) and (pointer:fine){:where(.kit) .btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}}
:where(.kit) .btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink);transition-duration:var(--t-tap)}
:where(.kit) .btn[disabled],:where(.kit) .btn[aria-disabled="true"]{opacity:1;background:var(--sand);color:var(--muted);box-shadow:none;cursor:not-allowed}
:where(.kit) .btn-row{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center}
/* a quiet secondary action */
:where(.kit) .go{font-weight:800;white-space:nowrap;color:var(--ink)}
:where(.kit) [hidden]{display:none!important}

/* ---------- 2. .tape ---------- */
:where(.kit) .tape{display:inline-block;font-family:var(--f-display);font-weight:400;font-size:15px;line-height:1.2;text-transform:uppercase;letter-spacing:.02em;
  color:var(--ink);background:var(--sun);border:3px solid var(--ink);border-radius:var(--r-tag);box-shadow:var(--sh-1);padding:.3em 1em;transform:rotate(-2deg)}
:where(.kit) .tape--grown{background:var(--kraft);transform:rotate(-1deg)}
:where(.kit) .tape--visit{background:var(--teal)}

/* ---------- 3. .crumb: the place sign under the header ---------- */
:where(.kit) .crumb{display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px;max-width:100%;min-height:36px;padding:4px 14px 4px 10px;
  font-family:var(--f-mono);font-size:12.5px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;line-height:1.3;color:var(--ink);
  background:var(--sun);border:3px solid var(--ink);border-radius:var(--r-tag);transform:rotate(-1deg)}
:where(.kit) .crumb--grown{background:var(--kraft)}
:where(.kit) .crumb svg{width:16px;height:16px;flex:none}
:where(.kit) .crumb a{color:var(--ink);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;display:inline-flex;align-items:center;min-height:28px;background:none}
:where(.kit) .crumb-bar{max-width:var(--w-page);margin:0 auto;padding:var(--s-4) var(--gutter) 0}

/* ---------- 4. .toy-card ---------- */
:where(.kit) .toy-card{position:relative;display:flex;flex-direction:column;background:var(--card);border:3px solid var(--ink);
  border-radius:var(--r-card);box-shadow:var(--sh-3);overflow:hidden;color:var(--ink)}
:where(.kit) .toy-card__well{position:relative;aspect-ratio:1/1;background:var(--sand);border-bottom:3px solid var(--ink)}
:where(.kit) .toy-card__well > img{width:100%;height:100%;object-fit:cover;display:block}
:where(.kit) .toy-card__body{display:flex;flex-direction:column;gap:2px;flex:1;padding:14px 16px 16px}
:where(.kit) .toy-card__name{font-family:var(--f-display);font-weight:400;font-size:var(--fs-h3);line-height:1.12;margin:0}
:where(.kit) .toy-card__role{font-family:var(--f-hand);font-weight:700;font-size:var(--fs-hand);color:var(--teal-ink);line-height:1.1;margin:0 0 4px}
:where(.kit) .toy-card__foot{margin-top:auto;padding-top:12px;display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);flex-wrap:wrap}
@media (min-width:768px){:where(.kit) .toy-card__body{padding:16px 18px 18px}}
:where(.kit) .toy-card--h{flex-direction:row}
:where(.kit) .toy-card--h .toy-card__well{flex:0 0 44%;aspect-ratio:auto;border-bottom:0;border-right:3px solid var(--ink)}

/* ---------- 5. .swing-tag: a price, never a button ---------- */
:where(.kit) .swing-tag{position:relative;display:inline-flex;align-items:center;height:32px;margin-left:12px;padding:0 12px 0 8px;
  font-family:var(--f-display);font-weight:400;font-size:1.2rem;line-height:1;color:var(--ink);background:var(--paper);
  border:2px solid var(--ink);border-left:0;border-radius:0 9px 9px 0;filter:drop-shadow(0 6px 8px rgba(60,38,20,.28));transform:rotate(-3deg)}
:where(.kit) .swing-tag::before{content:"";position:absolute;left:-11px;top:3.5px;width:21px;height:21px;background:var(--paper);
  border-left:2px solid var(--ink);border-bottom:2px solid var(--ink);border-radius:0 0 0 4px;transform:rotate(45deg);z-index:-1}
:where(.kit) .swing-tag::after{content:"";position:absolute;left:-4px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--ink)}

/* ---------- 7. .slip: information on flat paper ---------- */
:where(.kit) .slip{background:var(--tint-butter);border-radius:var(--r-card);padding:var(--s-5)}
:where(.kit) .slip--mint{background:var(--tint-mint)} :where(.kit) .slip--sky{background:var(--tint-sky)} :where(.kit) .slip--lilac{background:var(--tint-lilac)}
:where(.kit) .slip--line{border:2px solid rgba(43,35,68,.25)}

/* ---------- 8. .polaroid: real photos only ---------- */
:where(.kit) .polaroid{position:relative;display:block;margin:0;background:#fff;padding:10px 10px 0;border:3px solid var(--ink);
  border-radius:4px;box-shadow:var(--sh-paper);transform:rotate(3deg)}
:where(.kit) .polaroid--l{transform:rotate(-2.5deg)}
:where(.kit) .polaroid img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border:2px solid rgba(43,35,68,.18);background:var(--sand)}
:where(.kit) .polaroid--person img{aspect-ratio:4/5;object-position:50% 25%}
:where(.kit) .polaroid figcaption{font-family:var(--f-hand);font-weight:700;font-size:var(--fs-hand);color:var(--ink);text-align:center;line-height:1.1;padding:8px 6px 12px;min-height:36px}
:where(.kit) .polaroid::before{content:"";position:absolute;top:-14px;left:50%;width:96px;height:26px;margin-left:-48px;transform:rotate(-4deg);
  background:rgba(255,201,51,.82);border-left:2px dashed rgba(43,35,68,.25);border-right:2px dashed rgba(43,35,68,.25)}

/* ---------- 9. .trust-row ---------- */
:where(.kit) .trust-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 18px;min-height:48px;padding:10px 16px;
  font-size:15px;font-weight:700;list-style:none;margin:0}
:where(.kit) .trust-row li{display:inline-flex;align-items:center;gap:8px}
:where(.kit) .trust-row svg{width:20px;height:20px;flex:none}
:where(.kit) .trust-row li + li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--ink);margin-right:10px}

/* ---------- 10. .dad-desk: every fact, price and small-print line ---------- */
:where(.kit) .dad-desk{background:var(--tint-lilac);border:3px solid var(--ink);border-radius:16px;box-shadow:var(--sh-2);padding:var(--s-6)}
:where(.kit) .dad-chip{display:inline-block;font-family:var(--f-mono);font-size:var(--fs-mono);font-weight:700;background:var(--ink);color:var(--chip-green);border-radius:6px;padding:4px 10px;margin-bottom:var(--s-3)}
:where(.kit) .dad-desk h2{font-size:var(--fs-h2-doc);line-height:1.1;margin-bottom:var(--s-3)}
:where(.kit) .dad-desk dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:var(--s-2) var(--s-4);align-content:start}
:where(.kit) .dad-desk dt{font-family:var(--f-mono);font-size:var(--fs-mono);font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);padding-top:4px}
:where(.kit) .dad-desk dd{margin:0;font-weight:600}
:where(.kit) .dad-desk .small-print{border-top:2px solid rgba(43,35,68,.25);margin-top:var(--s-4);padding-top:var(--s-4);font-size:var(--fs-small);font-weight:700;color:var(--muted)}
@media (max-width:720px){:where(.kit) .dad-desk{padding:var(--s-5)}}

/* ---------- 11. .hazard: the regulatory warning, never styled like a Dad note ---------- */
:where(.kit) .hazard{display:flex;gap:var(--s-3);align-items:flex-start;background:var(--sun);border:4px solid var(--ink);border-radius:var(--r-tag);padding:var(--s-4);font-weight:800}
:where(.kit) .hazard svg{width:24px;height:24px;flex:none}
:where(.kit) .hazard b{font-weight:900}   /* the regulatory words keep their exact casing */

/* ---------- 13. .ticket: the markets stub ---------- */
:where(.kit) .ticket{position:relative;display:grid;grid-template-columns:auto 1fr;background:var(--card);border:3px solid var(--ink);border-radius:var(--r-card);box-shadow:var(--sh-3);overflow:hidden}
:where(.kit) .ticket__stub{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:96px;padding:var(--s-4);background:var(--teal);
  border-right:3px dashed var(--ink);font-family:var(--f-display);text-align:center;line-height:1}
:where(.kit) .ticket__stub b{font-size:2.4rem;font-weight:400}
:where(.kit) .ticket__stub span{font-family:var(--f-mono);font-size:var(--fs-mono);font-weight:700;text-transform:uppercase;letter-spacing:.06em}
:where(.kit) .ticket__body{padding:var(--s-4) var(--s-5);display:flex;flex-direction:column;gap:var(--s-2)}

/* ---------- 14. .stamp: passport slots and Learn badges ---------- */
:where(.kit) .stamp{display:inline-flex;flex-direction:column;align-items:center;gap:6px;font-size:var(--fs-label);font-weight:800;text-align:center}
:where(.kit) .stamp__ring{display:grid;place-items:center;width:72px;height:72px;border-radius:50%;background:var(--paper);border:3px dashed var(--ink)}
:where(.kit) .stamp.is-got .stamp__ring{border:3px solid var(--coral);background:#fff}

/* ---------- 15. .next-stop ---------- */
:where(.kit) .next-stop{display:grid;grid-template-columns:160px 1fr;gap:var(--s-5);align-items:center;background:var(--card);border:3px solid var(--ink);
  border-radius:var(--r-card);box-shadow:var(--sh-3);padding:var(--s-4);text-decoration:none;color:var(--ink)}
:where(.kit) .next-stop img{width:100%;height:auto;border-radius:10px;display:block}
@media (max-width:560px){:where(.kit) .next-stop{grid-template-columns:1fr}}

/* ---------- tiles: tappable doors ---------- */
:where(.kit) .tile{--tile-tint:var(--tint-butter);display:flex;flex-direction:column;gap:var(--s-1);height:100%;background:var(--card);border:3px solid var(--ink);
  border-radius:var(--r-card);box-shadow:var(--sh-3);padding:var(--s-5);color:var(--ink);text-decoration:none;-webkit-tap-highlight-color:transparent;
  transition:transform var(--t-quick) var(--ease-pop),box-shadow var(--t-quick) var(--ease-pop)}
:where(.kit) .tile b{font-family:var(--f-display);font-weight:400;font-size:var(--fs-h3);line-height:1.15}
:where(.kit) .tile span{font-size:var(--fs-small);line-height:1.45;font-weight:600;color:var(--muted)}
:where(.kit) .tile-ic{width:52px;height:52px;border-radius:50%;background:var(--tile-tint);border:2px solid var(--ink);display:grid;place-items:center;margin-bottom:var(--s-2)}
:where(.kit) .tile-ic svg{width:30px;height:30px}
@media (hover:hover) and (pointer:fine){:where(.kit) .tile:hover{transform:translate(-2px,-2px);box-shadow:var(--sh-4)}}
:where(.kit) .tile:active{transform:translate(3px,3px);box-shadow:var(--sh-1);transition-duration:var(--t-tap)}

/* ---------- motion: calm and reduced motion stop the toy bounce ---------- */
@media (prefers-reduced-motion:reduce){:where(.kit) :is(.btn,.tile){transition:none}}
:where(html.calm .kit) :is(.btn,.tile){transition:none}
@media print{:where(.kit) :is(.btn,.tile,.toy-card,.dad-desk,.polaroid,.ticket){box-shadow:none!important;transform:none!important}:where(body.kit){background:#fff}}
/* phones: trust rows stack without the leading dots; the Dad's Desk list stacks on narrow screens (shop helper, 2026-09-29) */
@media (max-width:700px){:where(.kit) .trust-row{flex-direction:column;gap:6px;min-height:0}:where(.kit) .trust-row li + li::before{display:none}}
@media (max-width:560px){:where(.kit) .dad-desk dl{grid-template-columns:1fr;gap:2px}}
/* plain links: 3px of padding grows the tap box past 24px (WCAG 2.5.8) without moving the text (audit T73) */
:where(.kit) a:not([class]){padding-block:3px}
/* a one-line offer note on a toy card, e.g. Mr. Bob: 'Free with any toy' (Joseph Sr 2026-09-29) */
:where(.kit) .toy-card__note{margin:0;font-weight:800;font-size:var(--fs-small);color:var(--teal-ink)}