/* Posture Guard website — dark mode + toggle + transition layers.
   Everything here is scoped to html[data-theme="dark"], except the toggle button. */

/* ---------- toggle button (sun <-> moon) ---------- */
.theme-btn { position: relative; flex: none; width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--line); background: transparent; color: var(--text); cursor: pointer; display: grid; place-items: center; padding: 0; transition: border-color .2s, background .2s; }
.theme-btn:hover { border-color: var(--accent); background: var(--accent-soft); }
.theme-btn svg { width: 22px; height: 22px; display: block; overflow: visible; }
.theme-btn .sun-core { transform-origin: 12px 12px; transition: transform .7s cubic-bezier(.34,1.4,.5,1), opacity .4s; }
.theme-btn .sun-rays { transform-origin: 12px 12px; transition: transform .8s cubic-bezier(.34,1.3,.5,1), opacity .35s; stroke-width: 2; }
.theme-btn .moon-mask { transform: translate(16px,-16px); transition: transform .7s cubic-bezier(.4,0,.2,1); }
html[data-theme="dark"] .theme-btn .sun-core { transform: scale(1.5); }
html[data-theme="dark"] .theme-btn .sun-rays { transform: rotate(90deg) scale(.2); opacity: 0; }
html[data-theme="dark"] .theme-btn .moon-mask { transform: translate(0,0); }
html[data-theme="dark"] .theme-btn { color: #ffe9a8; }
.nav .theme-btn { margin-inline-start: 4px; }
@media (max-width: 960px) { .nav .theme-btn { margin-inline-start: 0; } }

/* ---------- transition layers ---------- */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-old(root) { z-index: 1; }
::view-transition-new(root) { z-index: 2; }
#themeFx { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 2147483000; pointer-events: none; }
html.theme-fade, html.theme-fade *, html.theme-fade *::before, html.theme-fade *::after { transition: background-color .5s ease, color .5s ease, border-color .5s ease, fill .5s ease, box-shadow .5s ease !important; }

/* ---------- hero stars (dark only) ---------- */
#heroStars { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 1.2s; }
html[data-theme="dark"] #heroStars { opacity: 1; }

/* ================= DARK THEME ================= */
html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="dark"] {
  --bg: #0b1210; --bg2: #101a17; --panel: #14201c; --line: rgba(190,225,215,.13);
  --text: #e8f1ee; --muted: #9db3ad; --accent: #2cc4b2; --accent-soft: rgba(44,196,178,.14);
  --warm: #e7945a; --gold: #e2a93c; --screen: #0d1513;
}
html[data-theme="dark"] body.home { --ink: #e8f1ee; --sand: #1a2420; --shadow: 0 30px 80px -20px rgba(0,0,0,.7), 0 10px 30px -10px rgba(0,0,0,.5); }
html[data-theme="dark"] body { background: var(--bg); color: var(--text); }
html[data-theme="dark"] .top { background: rgba(11,18,16,.82); }
html[data-theme="dark"] .ticker, html[data-theme="dark"] .ticker-label { background: #060b0a; }
html[data-theme="dark"] .btn-primary { color: #04201c; box-shadow: 0 8px 26px rgba(44,196,178,.22); }
html[data-theme="dark"] .btn-primary:hover { background: #55d6c7; }
html[data-theme="dark"] .btn-ghost { background: rgba(255,255,255,.05); }
html[data-theme="dark"] .menu-btn i { background: var(--text); }
html[data-theme="dark"] .langs-menu { background: #14201c; border-color: var(--line); box-shadow: 0 24px 60px rgba(0,0,0,.6); }
html[data-theme="dark"] .langs-menu a[aria-current] { color: #04201c; }
html[data-theme="dark"] .top.open .links { background: var(--bg); box-shadow: 0 20px 30px rgba(0,0,0,.5); }

/* hero */
html[data-theme="dark"] .pg-hero::before { background:
  radial-gradient(38% 50% at 78% 38%, rgba(44,196,178,.16), transparent 70%),
  radial-gradient(30% 40% at 12% 80%, rgba(231,148,90,.10), transparent 70%); }
html[data-theme="dark"] .pg-cred { background: rgba(255,255,255,.05); box-shadow: none; }
html[data-theme="dark"] .pg-hero h1 em { color: #5eead4; }
html[data-theme="dark"] .pg-base { background: linear-gradient(180deg, #3b4744, #2a3432 70%, #1f2826); box-shadow: 0 24px 40px -18px rgba(0,0,0,.8); }
html[data-theme="dark"] .pg-float { background: rgba(20,32,28,.92); color: var(--text); border-color: var(--line); }
html[data-theme="dark"] .pg-float small { color: var(--muted); }

/* panels */
html[data-theme="dark"] .pg-proof-in, html[data-theme="dark"] .pg-group, html[data-theme="dark"] .pg-prin div,
html[data-theme="dark"] .pg-cmp, html[data-theme="dark"] .pg-ben, html[data-theme="dark"] .pg-plan,
html[data-theme="dark"] .pg-teams, html[data-theme="dark"] .pg-faq details { background: var(--panel); border-color: var(--line); box-shadow: 0 20px 50px -30px rgba(0,0,0,.8); }
html[data-theme="dark"] .pg-sim { background: linear-gradient(160deg, #16231f, #101a17); }
html[data-theme="dark"] .pg-cmp thead th, html[data-theme="dark"] .pg-cmp td, html[data-theme="dark"] .pg-cmp th { border-color: var(--line); }
html[data-theme="dark"] .pg-cmp .n { background: rgba(255,255,255,.06); color: #6f847e; }
html[data-theme="dark"] .pg-cmp thead th.us { color: #04201c; }
html[data-theme="dark"] .pg-cmp .y, html[data-theme="dark"] .pg-steps i, html[data-theme="dark"] .pg-mono { color: #04201c; }
html[data-theme="dark"] .pg-proof .bub { color: var(--accent); }
html[data-theme="dark"] .pg-hint { background: #e8f1ee; color: #0b1210; }
html[data-theme="dark"] .pg-code { background: rgba(231,148,90,.08) !important; }
html[data-theme="dark"] body.home .pg-code button { background: #e8f1ee; color: #0b1210; }
html[data-theme="dark"] .pg-dock { background: rgba(20,32,28,.95); border-color: var(--line); }

/* story */
html[data-theme="dark"] .pg-story { --c1: #0b1210; --c2: #12302b; --c3: #1a2a22; }
html[data-theme="dark"] .pg-story[data-ch="1"] { --c1: #170e0c; --c2: #5a2418; --c3: #2a1a12; --acc: #f08a73; }
html[data-theme="dark"] .pg-story[data-ch="2"] { --c1: #17120a; --c2: #5c4310; --c3: #2b2210; --acc: #f0b84a; }
html[data-theme="dark"] .pg-story[data-ch="3"] { --c1: #0d150c; --c2: #274a1f; --c3: #1e2410; --acc: #86d27a; }
html[data-theme="dark"] .pg-story[data-ch="4"] { --c1: #0a1218; --c2: #1d4263; --c3: #11202c; --acc: #6bb4ea; }
html[data-theme="dark"] .pg-story[data-ch="5"] { --c1: #0a1512; --c2: #155440; --c3: #10261f; --acc: #4fd8ac; }
html[data-theme="dark"] .pg-story[data-ch="6"] { --c1: #15110a; --c2: #5a4310; --c3: #2a2110; --acc: #f0b25a; }
html[data-theme="dark"] .pg-story[data-ch="7"] { --c1: #100d18; --c2: #38296e; --c3: #1a1630; --acc: #a99bf0; }
html[data-theme="dark"] .pg-story[data-ch="9"] { --c1: #0a1514; --c2: #145a54; --c3: #102422; --acc: #3fd0c2; }
html[data-theme="dark"] .pg-blobs i { opacity: .5; }
html[data-theme="dark"] .pg-ghost { opacity: .06; }
html[data-theme="dark"] .pg-rail::before { background: rgba(255,255,255,.14); }
html[data-theme="dark"] .pg-rail button { border-color: rgba(255,255,255,.2); }
html[data-theme="dark"] .pg-chap .pg-note { background: rgba(255,255,255,.06); }
html[data-theme="dark"] .pg-rail button.on { color: #0b1210; }

html[data-theme="dark"] .pg-story[data-ch="8"] { --c1: #150d13; --c2: #5b2147; --c3: #2a1624; --acc: #f08bc6; }

/* sections that use the sand tint */
html[data-theme="dark"] .pg-sec, html[data-theme="dark"] section { background-color: transparent; }
html[data-theme="dark"] footer { border-color: var(--line); }

/* the star layer rides inside the transition as its own live layer */
::view-transition-group(themefx) { animation: none; }
::view-transition-old(themefx) { display: none; }
::view-transition-new(themefx) { animation: none; }

/* ---------- Chrome Web Store button ---------- */
.pg-chrome { padding-inline: 18px; }
.pg-chrome .cws-ic { width: 22px; height: 22px; flex: none; }
.pg-chrome span { display: block; text-align: start; line-height: 1.15; }
.pg-chrome small { display: block; font: 500 .74rem var(--body); opacity: .75; margin-top: 1px; }
.page .pg-chrome { padding: .6rem 1rem; }

/* more home pieces */
html[data-theme="dark"] .pg-ideas { background: rgba(255,255,255,.05); }
html[data-theme="dark"] body.home .pg-code { background: linear-gradient(135deg, rgba(231,148,90,.14), rgba(231,148,90,.06)) !important; color: #f6c89a; border-color: rgba(231,148,90,.6); }
html[data-theme="dark"] body.home .pg-code .ic { color: #f0a25f; }
html[data-theme="dark"] .pg-chap .pg-note { color: var(--acc); }
html[data-theme="dark"] .pg-pin { background: var(--c1); }
html[data-theme="dark"] .pg-quote { background: linear-gradient(150deg, #0e2a26, #0f4a44); }
html[data-theme="dark"] .pg-quote p { color: #e8f4f1; }
html[data-theme="dark"] .pg-ben:hover { box-shadow: 0 30px 50px -30px rgba(0,0,0,.9); }
html[data-theme="dark"] .pg-plan.best, html[data-theme="dark"] .pg-plan[data-best] { border-color: rgba(231,148,90,.6); }

/* ---------- forms, inner pages, payment window ---------- */
html[data-theme="dark"] .form input, html[data-theme="dark"] .form select, html[data-theme="dark"] .form textarea,
html[data-theme="dark"] .pay-form input, html[data-theme="dark"] .pay-form select, html[data-theme="dark"] .pay-form textarea {
  background: #0d1512; border-color: rgba(190,225,215,.2); color: var(--text); }
html[data-theme="dark"] .form input:focus, html[data-theme="dark"] .form select:focus, html[data-theme="dark"] .form textarea:focus,
html[data-theme="dark"] .pay-form input:focus { background: #101b17; }
html[data-theme="dark"] ::placeholder { color: #6f857f; opacity: 1; }
html[data-theme="dark"] .card, html[data-theme="dark"] .steps .card, html[data-theme="dark"] .formbox, html[data-theme="dark"] .qa details { background: var(--panel); border-color: var(--line); }
html[data-theme="dark"] .note { background: rgba(226,169,60,.08); }
html[data-theme="dark"] .sup-hero { background: radial-gradient(70% 90% at 85% 30%, rgba(190,60,80,.18) 0%, transparent 60%), linear-gradient(160deg, #1a1411, #14100c); }
html[data-theme="dark"] .sup-chip { background: linear-gradient(140deg, #1a2723, #14201c); border-color: var(--line); }
html[data-theme="dark"] .love-ico { background: rgba(255,120,140,.15); }
html[data-theme="dark"] .pay-card { background: #14201c; color: var(--text); box-shadow: 0 50px 120px rgba(0,0,0,.7); }
html[data-theme="dark"] .pay-m, html[data-theme="dark"] .pay-box, html[data-theme="dark"] .pay-cp, html[data-theme="dark"] .sp-copy, html[data-theme="dark"] .pay-qr { background: #101b17; border-color: var(--line); color: var(--text); }
html[data-theme="dark"] .pay-d { background: #101b17; }
html[data-theme="dark"] .pay-m.on { border-color: var(--accent); background: rgba(44,196,178,.1); }
html[data-theme="dark"] .pay-m.on .pay-ic { background: #101b17; }
html[data-theme="dark"] .pay-sp.fast { background: rgba(52,211,153,.15); color: #6ee7b7; }
html[data-theme="dark"] .pay-sp.slow { background: rgba(226,169,60,.15); color: #f6c868; }
html[data-theme="dark"] .pay-cp.ok, html[data-theme="dark"] .copy-ok { color: #04201c !important; }
html[data-theme="dark"] .lask .btn { color: #0b4f49; }
html[data-theme="dark"] .badge { color: #1a1204; }
html[data-theme="dark"] .toc a, html[data-theme="dark"] .toc { border-color: var(--line); }
html[data-theme="dark"] .toc a.on, html[data-theme="dark"] .toc a[aria-current] { color: var(--accent); }
html[data-theme="dark"] code, html[data-theme="dark"] kbd { background: rgba(255,255,255,.08); color: #d8ece7; }
html[data-theme="dark"] table th, html[data-theme="dark"] table td { border-color: var(--line); }
html[data-theme="dark"] hr { border-color: var(--line); }
html[data-theme="dark"] .lang { color: var(--muted); }

/* the laptop screen in the hero and story is a picture of the app: it keeps its own light colours */
html[data-theme="dark"] .pg-screen {
  --text: #1d302c; --muted: #5d6f6a; --ink: #14231f; --panel: #ffffff; --line: rgba(30,52,48,.12);
  --accent: #0f766e; --accent-soft: rgba(15,118,110,.1); --gold: #b7791f; --warm: #c2703d; color: var(--text); }

/* InstaPay proof form in dark mode (fix 12 Oct 22:45) */
html[data-theme="dark"] .pay-form { background: #101b17; border-color: var(--line); color: var(--text); }
html[data-theme="dark"] .pay-fh, html[data-theme="dark"] .pay-form label { color: var(--text); }
html[data-theme="dark"] .pay-form label small, html[data-theme="dark"] .pay-fmsg { color: #a9bdb7; }
html[data-theme="dark"] .pay-fmsg.bad { color: #ff9a8a; }
html[data-theme="dark"] .pay-form input[type=file] { color: #c9d8d3; }
html[data-theme="dark"] .pay-form input[type=file]::file-selector-button { background: #1d2c27; color: var(--text); border: 1px solid rgba(190,225,215,.25); border-radius: 8px; padding: .35rem .7rem; margin-inline-end: .6rem; cursor: pointer; }