/* box-deck.css — Soul's swipe deck on python-visuals.com/box. BUILT by tools/soul/build-box-pet.cjs: do not hand-edit,
   re-run it. Copied verbatim from workstation.html; the Box page sets the colours it reads on #tryit. */
/* The house type and spacing scale (his AUQ 2026-10-14, step 5 of the lesson plan, L8-4 and L8-7: "Pixel grid" and "11px
   floor"). One short list of named steps, so a page stops carrying 62 text sizes and 76 gap sizes. Each name is the size in
   pixels at the browser's normal text size; the value is in rem, so a person who sets bigger text gets all of it bigger.
   Nothing reads below 11px. Edit HERE, then node tools/design/sync-glass.cjs; tests/soul-scale.test.js holds Soul to it.
   Left as they are, on purpose: sizes inside drawings (SVG text, in px), the crew-only preview banner, clamp() headings
   that grow with the screen, and layout lengths of 2.5rem and up. */
:root, body {
  --fs-11: 0.6875rem;
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-15: 0.9375rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-22: 1.375rem;
  --fs-28: 1.75rem;
  --fs-38: 2.375rem;

  --sp-2: 0.125rem;
  --sp-4: 0.25rem;
  --sp-6: 0.375rem;
  --sp-8: 0.5rem;
  --sp-10: 0.625rem;
  --sp-12: 0.75rem;
  --sp-14: 0.875rem;
  --sp-16: 1rem;
  --sp-20: 1.25rem;
  --sp-24: 1.5rem;
  --sp-32: 2rem;
  --sp-48: 3rem;
}
:root { --motion-functional: 150ms; --motion-spatial: 450ms; --motion-expressive: 600ms; --motion-ease: cubic-bezier(.2,.7,.2,1); --motion-spring: cubic-bezier(.3,1.5,.5,1); --motion-open: 260ms; }
.soul-chip { flex: none; display: inline-flex; align-items: center; gap: var(--sp-6); padding: var(--sp-6) var(--sp-14); border-radius: 999px; border: 1px solid var(--cream-18); background: none; color: var(--cream-78); font-family: var(--font-body); font-size: var(--fs-13); white-space: nowrap; cursor: pointer; }
.soul-chip svg { width: 15px; height: 15px; }
.soul-chip:hover { border-color: rgba(var(--accent-rgb),0.55); color: var(--cream); }
.soul-chip.on { border-color: var(--gold); color: var(--gold); background: rgba(var(--accent-rgb),0.08); }
.soul-thumb { position: relative; height: 96px; display: flex; align-items: center; justify-content: center; color: var(--gold); background: linear-gradient(135deg, rgba(var(--accent-rgb),0.16), rgba(var(--accent-rgb),0.03)), var(--navy-soft); }
.soul-thumb > svg { width: 30px; height: 30px; }
.soul-yt { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.soul-deck { position: relative; margin: var(--sp-10) 0 var(--sp-6); outline: none; user-select: none; -webkit-user-select: none; }
.soul-deck.phone { --deck-h: 23.75rem; --deck-h: clamp(15.625rem, calc(100svh - 28.75rem), 27.5rem); height: calc(var(--deck-h) + 4.5rem); }   /* rem: the card grows with the text (L8-5); 380, 250, 460, 440 and 72 px at 16px text */
.soul-deck.wheel { height: 28.25rem; overflow-x: clip; overflow-y: visible; }
.deck-card { position: absolute; left: 50%; top: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--navy-mid); border: 1px solid rgba(245,240,232,0.1); border-radius: 18px; will-change: transform; touch-action: none; }
.soul-deck.phone .deck-card { width: min(86vw, 21.25rem); height: var(--deck-h); margin-left: calc(min(86vw, 21.25rem) / -2); cursor: grab; }
.soul-deck.wheel .deck-card { width: 15.625rem; height: 21.25rem; margin-left: -7.8125rem; top: 0.5rem; cursor: pointer; }   /* 250 × 340 px at 16px text; the wheel's radius is in rem too (WHEEL_R) */
.soul-deck.wheel .deck-card.is-center { border-color: rgba(var(--accent-rgb),0.6); cursor: grab; }
.deck-card .soul-thumb.deck-pic { flex: 0 1000 46%; height: auto; }   /* when the words need the room (big text, a short screen), the picture gives way first; the title, its line and the button never do */
.deck-card .soul-thumb.deck-pic > svg { width: 40px; height: 40px; }
.deck-card .soul-day b { font-size: 3rem; }
.deck-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: var(--sp-16) var(--sp-16) var(--sp-16); }
.deck-title { flex: none; font-family: var(--font-display); font-size: var(--fs-22); line-height: 1.12; color: var(--cream); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.soul-deck.wheel .deck-title { font-size: var(--fs-22); }
.deck-line { flex: none; margin-top: var(--sp-6); font-size: var(--fs-13); color: var(--cream-42); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.deck-open { margin-top: auto; align-self: flex-start; }
.deck-stamp { position: absolute; top: 12px; z-index: 2; padding: var(--sp-4) var(--sp-10); border-radius: 7px; border: 1.5px solid; background: rgba(10,20,40,0.72); font-family: var(--font-mono); font-size: var(--fs-11); letter-spacing: 0.08em; text-transform: uppercase; opacity: 0; pointer-events: none; }
.deck-stamp.s-save { right: 12px; color: var(--gold-bright); }
.deck-stamp.s-skip { left: 12px; color: var(--cream); }
.deck-stamp.s-sky { left: 50%; transform: translateX(-50%); color: var(--signal, var(--teal)); white-space: nowrap; }
.deck-stamp.s-done { left: 50%; top: 42%; transform: translateX(-50%); color: var(--green); }
.deck-row { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; gap: var(--sp-16); }
.deck-btn, .deck-turn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-8); padding: 0; border: 1px solid var(--cream-18); background: var(--navy-mid); color: var(--cream); font-family: var(--font-body); cursor: pointer; }
.deck-btn { width: 56px; height: 56px; border-radius: 50%; }
.deck-btn svg { width: 24px; height: 24px; }
.deck-btn.save { border-color: var(--gold); color: var(--gold); }
.deck-btn.sky { border-color: var(--signal, var(--teal)); color: var(--signal, var(--teal)); }   /* the signal; python-visuals.com/box copies the deck's lines and sets no signal, so there its own teal */
.deck-btn.done { border-color: var(--green); color: var(--green); }
.deck-btn:disabled { opacity: 0.45; cursor: default; }
.soul-deck.wheel .deck-row { gap: var(--sp-10); }
.soul-deck.wheel .deck-btn { width: auto; height: 40px; padding: 0 var(--sp-16); border-radius: 999px; font-size: var(--fs-14); }
.soul-deck.wheel .deck-btn svg { width: 17px; height: 17px; }
.soul-deck.wheel .deck-btn { flex: none; white-space: nowrap; }
@media (max-width: 900px) { .soul-deck.wheel .deck-btn { width: 44px; height: 44px; padding: 0; border-radius: 50%; } .soul-deck.wheel .deck-btn span { display: none; } }
.deck-turn { width: 42px; height: 42px; border-radius: 50%; margin: 0 var(--sp-8); }
.deck-turn svg { width: 19px; height: 19px; }
.deck-turn[disabled] { opacity: 0.35; cursor: default; }
.deck-btn:focus-visible, .deck-turn:focus-visible, .soul-deck:focus-visible { outline: 2px solid rgba(var(--accent-rgb),0.7); outline-offset: 2px; }
.deck-hint { margin: var(--sp-4) 0 0; text-align: center; font-size: var(--fs-12); color: var(--cream-42); }
.deck-top { display: flex; gap: var(--sp-8); overflow-x: auto; margin: 0 0 var(--sp-6); padding-bottom: 2px; scrollbar-width: none; }
.deck-top::-webkit-scrollbar { display: none; }
.deck-top-item { flex: none; display: inline-flex; align-items: center; gap: var(--sp-8); max-width: 82%; padding: var(--sp-8) var(--sp-14); border-radius: 12px; border: 1px solid rgba(245,240,232,0.1); background: var(--navy-mid); color: var(--cream); font-family: var(--font-body); font-size: var(--fs-13); text-align: left; cursor: pointer; }
.deck-top-item.is-changed { border-color: rgba(var(--accent-bright-rgb),0.55); }
.deck-top-item > svg { flex: none; width: 16px; height: 16px; color: var(--gold); }
.deck-top-item span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deck-top-item small { margin-left: var(--sp-4); color: var(--cream-42); font-size: var(--fs-12); }
.soul-deck-done { padding: var(--sp-32) 0 var(--sp-16); text-align: center; color: var(--cream-62); }
.soul-deck-done p { margin: 0 0 var(--sp-12); font-family: var(--font-display); font-size: var(--fs-22); color: var(--cream); }
@keyframes deck-nudge { 0%, 100% { translate: 0 0; rotate: 0deg; } 25% { translate: 38px 0; rotate: 4deg; } 55% { translate: -38px 0; rotate: -4deg; } 80% { translate: 0 0; rotate: 0deg; } }
.deck-card.nudge { animation: deck-nudge 1.3s ease-in-out 0.7s 1; }
@media (prefers-reduced-motion: reduce) { .deck-card.nudge { animation: none; } }
@media (prefers-reduced-motion: reduce) { .deck-card { transition: opacity var(--motion-functional) !important; } .soul-chip.bump { transform: none; border-color: var(--gold); color: var(--gold); background: rgba(var(--accent-rgb),0.16); } }