/*
 * Yappster Paperback, dark mode. Loaded by every yappster.app page (the Next
 * pages through src/app/yappster/layout.tsx, the static letters by a <link>).
 *
 * LIGHT MODE IS NOT DEFINED HERE AND MUST NOT BE. Each page's own CSS is the
 * light design, frozen. Everything below only applies under
 * html[data-ys-theme="dark"], which public/ys-theme/theme.js sets. The only
 * rules outside that scope are the toggle button and the strip padding that
 * makes room for it.
 *
 * How the dark skin works:
 * 1. Remap the tokens. --ink flips to cream, so text, 2px borders and the hard
 *    offset shadows all turn cream on a near-black page. Same bones.
 * 2. Paper objects stay paper. Anything yellow (sticky notes, kickers, marks,
 *    coupons) plus the polaroid and the look swatches get the LIGHT tokens
 *    re-scoped onto them, so their insides render exactly as in light mode.
 * 3. Anything that painted itself with var(--ink) and wrote #fff on top is
 *    fixed by hand: big surfaces go black, small chips go cream with ink text.
 *
 * Full spec: context/yappster-paperback-design-system.md
 */

/* ── toggle (both modes) ─────────────────────────────────────────────── */
.ys .strip,.pb .strip{position:relative}
.ys-tt{position:absolute;right:12px;top:50%;width:28px;height:28px;margin:-14px 0 0;padding:0;display:grid;place-items:center;background:none;border:0;border-radius:50%;color:#fff;opacity:.72;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:opacity .15s,background .15s}
.ys-tt:hover{opacity:1;background:rgba(255,255,255,.12)}
.ys-tt:focus-visible{opacity:1;outline:2px solid #ffe866;outline-offset:2px}
.ys-tt svg{grid-area:1/1;width:17px;height:17px;transition:transform .45s cubic-bezier(.4,0,.2,1),opacity .3s ease}
.ys-tt .moon{opacity:0;transform:rotate(90deg) scale(.5)}
html[data-ys-theme="dark"] .ys-tt .sun{opacity:0;transform:rotate(-90deg) scale(.5)}
html[data-ys-theme="dark"] .ys-tt .moon{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.ys-tt svg{transition:none}}
@media (max-width:640px){
.ys .strip{padding-left:44px;padding-right:44px}
.pb .strip .container{padding-left:44px;padding-right:44px}
}

/* ── 1. tokens ───────────────────────────────────────────────────────── */
html[data-ys-theme="dark"],html[data-ys-theme="dark"] body{background:#0b0b0c!important;color-scheme:dark}
html[data-ys-theme="dark"] .pb,
html[data-ys-theme="dark"] .ys{
--ink:#f2efe6;--ink-2:#e4e0d6;--ink-3:#c6c2b7;
--paper:#0b0b0c;--paper-2:#111113;--white:#17171a;
--yellow:#ffd84d;--yellow-2:#ffd43b;--blue:#131a2e;
--muted:#8f8b81;--rule:#2f2e2a;--green:#22b066;
color-scheme:dark;
}

/* ── 2. paper objects keep the light tokens ──────────────────────────── */
html[data-ys-theme="dark"] .pb mark,
html[data-ys-theme="dark"] .pb .kicker,
html[data-ys-theme="dark"] .pb .marquee,
html[data-ys-theme="dark"] .pb .polaroid,
html[data-ys-theme="dark"] .pb .node .swatch,
html[data-ys-theme="dark"] .pb .rs.rec,
html[data-ys-theme="dark"] .pb .rs .k.demo,
html[data-ys-theme="dark"] .ys .kicker,
html[data-ys-theme="dark"] .ys .note,
html[data-ys-theme="dark"] .ys .price b,
html[data-ys-theme="dark"] .ys .eyebrow b,
html[data-ys-theme="dark"] .ys .cal span:not(.m):not(.d),
html[data-ys-theme="dark"] .ys .bump,
html[data-ys-theme="dark"] .ys .wire,
html[data-ys-theme="dark"] .ys .bonus,
html[data-ys-theme="dark"] .ys .bonusbox,
html[data-ys-theme="dark"] .ys .facts tr.hot,
html[data-ys-theme="dark"] .ys .sg-chapters h3,
html[data-ys-theme="dark"] .ys .sg-live.demo,
html[data-ys-theme="dark"] .ys .sg-pill,
html[data-ys-theme="dark"] .ys .sg-finish,
html[data-ys-theme="dark"] .ys .sg-code button{
--ink:#0a0a0a;--ink-2:#1a1a1a;--ink-3:#2a2a2a;
--paper:#f8f6f1;--paper-2:#efece4;--white:#fffdf8;
--yellow:#fff59d;--yellow-2:#ffe866;--blue:#dde8ff;
--muted:#6b6b6b;--rule:#e3dfd3;--green:#0f8a4b;
color:var(--ink);
}
/* the swatches are little paper chips: a cream edge so the dark ones still read */
html[data-ys-theme="dark"] .pb .node .swatch{border-color:#f2efe6}
/* the start page's "You're in" chip is black in both themes, so on the dark page its ink border
   vanishes into the paper: give it the cream edge instead */
html[data-ys-theme="dark"] .ys .sg-head .kicker{border-color:#f2efe6;color:var(--paper)}
/* their ink shadows would vanish into the page: give them the red one */
html[data-ys-theme="dark"] .pb .polaroid:not(.mini){box-shadow:10px 10px 0 var(--red)}
html[data-ys-theme="dark"] .ys .note,
html[data-ys-theme="dark"] .ys .wire{box-shadow:6px 6px 0 var(--red)}
html[data-ys-theme="dark"] .ys .sg-finish{box-shadow:7px 7px 0 var(--red)}
html[data-ys-theme="dark"] .ys .sg-step.todo .sg-pill{background:#17171a;color:#8f8b81;border-color:#2f2e2a}
/* the yellow half-underline sits behind cream text now: thin it to a rule */
html[data-ys-theme="dark"] .ys .lead,
html[data-ys-theme="dark"] .ys .sg-gpu.nvidia b{background:linear-gradient(transparent 88%,var(--yellow) 88%)}

/* ── 3a. big ink surfaces go black ───────────────────────────────────── */
html[data-ys-theme="dark"] .pb .strip,
html[data-ys-theme="dark"] .ys .strip{background:#000;border-bottom:1px solid var(--rule)}
html[data-ys-theme="dark"] .pb .dark{background:#000}
html[data-ys-theme="dark"] .pb footer{background:#000}
html[data-ys-theme="dark"] .pb .sticky{background:#000}
html[data-ys-theme="dark"] .pb .runsheet .rh{background:#000}
html[data-ys-theme="dark"] .ys .sg-frame{background:#000}
html[data-ys-theme="dark"] .ys .sg-code{background:#000}
html[data-ys-theme="dark"] .ys .illus{background:#000;border:1px solid var(--rule)}
html[data-ys-theme="dark"] .ys .livebadge{background:#000}

/* ── 3b. small ink chips go cream with ink text ──────────────────────── */
html[data-ys-theme="dark"] .pb .rs .k.cta,
html[data-ys-theme="dark"] .pb details[open] summary i,
html[data-ys-theme="dark"] .ys details[open] summary i,
html[data-ys-theme="dark"] .ys .check.on,
html[data-ys-theme="dark"] .ys .stack th,
html[data-ys-theme="dark"] .ys .vip,
html[data-ys-theme="dark"] .ys .bul li::before,
html[data-ys-theme="dark"] .ys .sg-chips button.on{color:#0a0a0a}
html[data-ys-theme="dark"] .ys .check.on .arrow{color:var(--red-deep)}
/* ...except inside an order bump. A bump is a paper card (yellow or light blue) in both themes, so its
   ticked bar is ink like the light design: white label, yellow arrow. Without this the label above
   went ink-on-ink and vanished. */
html[data-ys-theme="dark"] .ys .bump .check.on{color:#fff}
html[data-ys-theme="dark"] .ys .bump .check.on .arrow{color:var(--yellow-2)}
html[data-ys-theme="dark"] .ys .sg-chips button.on small{color:#4f4b42}

/* ── 3c. one-offs ────────────────────────────────────────────────────── */
/* the product plates are transparent PNGs; multiply would black them out */
html[data-ys-theme="dark"] .ys .hero,
html[data-ys-theme="dark"] .ys .up .plate,
html[data-ys-theme="dark"] .ys .stackhero{mix-blend-mode:normal}
/* the signature file is white; light mode inverts it to ink */
html[data-ys-theme="dark"] .ys .sig{filter:none}
html[data-ys-theme="dark"] .pb .formcard input,
html[data-ys-theme="dark"] .ys .f input,
html[data-ys-theme="dark"] .ys .sg-other,
html[data-ys-theme="dark"] .ys .sg-pick select{color-scheme:dark}
html[data-ys-theme="dark"] .ys input[type=text],
html[data-ys-theme="dark"] .ys input[type=email]{background:var(--paper);color-scheme:dark}
html[data-ys-theme="dark"] .pb .formcard input::placeholder,
html[data-ys-theme="dark"] .ys .f input::placeholder,
html[data-ys-theme="dark"] .ys input::placeholder{color:#6d695f}
html[data-ys-theme="dark"] .pb .ferr,
html[data-ys-theme="dark"] .ys .reg .err{color:#ff6b74}