/* =====================================================================
   Light / dark mode. Loaded after every other stylesheet.
   Light mode is the original site, untouched. Dark mode swaps the paper
   ground for near-black and the blue text for a soft light; the blue
   surfaces (hero, footer, mission card, recommended plan, chips) stay blue.
   ===================================================================== */
:root{
  --surf:#f3f2ed; --surf-rgb:243,242,237; --ink:#0400dd;
  --p-mute:#4744c8; --p-faint:#cdccec; --p-line:#d2d1e6; --p-raise:#fbfaf7;
  --card:rgba(255,255,255,.55); --card-hi:rgba(255,255,255,.85);
  --body:#26254a; --strong:#14132e; --accent:#0400dd; --tint:rgba(4,0,221,.07);
  --field:rgba(255,255,255,.75); --field-hi:#fff;
}
html[data-theme="dark"]{
  color-scheme:dark;
  --surf:#090909; --surf-rgb:9,9,9; --ink:#f2f2f0;
  --p-mute:#9c9c9c; --p-faint:#383838; --p-line:#252525; --p-raise:#141414;
  --card:rgba(255,255,255,.045); --card-hi:rgba(255,255,255,.075);
  --body:#c8c8c8; --strong:#fafafa; --accent:#f2f2f0; --tint:rgba(255,255,255,.07);
  --field:rgba(255,255,255,.04); --field-hi:rgba(255,255,255,.07);
}

/* ---------- the toggle in the nav pill ----------
   One icon that morphs: a crescent moon in light mode, a sun in dark mode.
   Switching reveals the new theme in a circle growing out of the button. */
.theme-btn{position:relative;flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;padding:0;border:0;background:transparent;color:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background .35s ease,transform .45s var(--ease)}
@media (hover:hover){.theme-btn:hover{background:color-mix(in srgb,currentColor 13%,transparent)}.theme-btn:hover svg{transform:rotate(-12deg)}}
.theme-btn:active{transform:scale(.9)}
.theme-btn:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.theme-btn svg{width:19px;height:19px;overflow:visible;transition:transform .6s var(--ease)}
.theme-btn .t-core{fill:currentColor;transform-origin:12px 12px;transition:transform .6s cubic-bezier(.65,0,.35,1)}
.theme-btn .t-cut{transition:transform .6s cubic-bezier(.65,0,.35,1)}
.theme-btn .t-rays{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;transform-origin:12px 12px;opacity:0;transform:rotate(-45deg) scale(.4);transition:transform .6s cubic-bezier(.65,0,.35,1),opacity .3s ease}
/* dark: the moon's shadow slides away, the disc shrinks to a sun and the rays spin in */
html[data-theme="dark"] .theme-btn .t-core{transform:scale(.52)}
html[data-theme="dark"] .theme-btn .t-cut{transform:translate(9px,-9px)}
html[data-theme="dark"] .theme-btn .t-rays{opacity:1;transform:none;transition:transform .6s cubic-bezier(.65,0,.35,1),opacity .35s ease .12s}
@media (max-width:760px){.theme-btn{width:40px;height:40px}}

/* pill spacing: one even rhythm from the logo, through the links, to the toggle and the call button */
@media (min-width:761px){
  .nav-in.wrap{gap:10px}
  .nav nav{gap:2px}
  .nav nav a{padding:9px 12px}
  .nav .right{gap:6px}
  .theme-btn{width:34px;height:34px}
}

/* homepage: the toggle stays tucked away while you're on the hero, then opens up in the pill and fades in
   once you've scrolled through to the next section (main.js drops .top from the nav at that point).
   Scrolling back up to the hero tucks it away again. Inner pages have no hero, so it simply shows. */
.theme-btn{transition:background .35s ease,width .6s var(--ease),margin .6s var(--ease),opacity .45s ease .22s,transform .7s var(--ease) .12s}
header.nav.top:not(.mo) .theme-btn{width:0;margin-right:-6px;opacity:0;transform:scale(.5) rotate(-60deg);pointer-events:none;
  transition:background .35s ease,width .5s var(--ease) .1s,margin .5s var(--ease) .1s,opacity .2s ease,transform .35s ease}
.theme-btn:active{transform:scale(.9);transition-delay:0s}
@media (prefers-reduced-motion:reduce){.theme-btn,header.nav.top:not(.mo) .theme-btn{transition:opacity .3s ease}header.nav.top:not(.mo) .theme-btn{transform:none}}
header.nav.mo .theme-btn{color:var(--paper)}

/* while the theme swaps, freeze every other transition so nothing fades a second time underneath the reveal */
html.theme-swap *:not(.theme-btn):not(.theme-btn *),html.theme-swap *::before,html.theme-swap *::after{transition:none!important}
/* keep the pill frosted through the switch: the switch effect works from a flat picture of the page, which
   can't show the live blur, so for the length of the swap the pill holds a near-solid frost of its own colour,
   then eases back to the real glass */
html.theme-frost .nav-in.wrap{background:color-mix(in srgb,var(--bgc,#0400dd) 93%,transparent)!important;transition:background .16s ease!important}
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-new(root){z-index:2}

/* =====================================================================
   DARK
   ===================================================================== */
[data-theme="dark"] body,[data-theme="dark"] .on-paper{--g:var(--surf);--i:var(--ink);--mute:var(--p-mute);--faint:var(--p-faint);--line:var(--p-line);--raise:var(--p-raise)}
[data-theme="dark"] .on-blue{--g:var(--blue);--i:var(--paper);--mute:#c6c5f6;--faint:#4e4bea;--line:#3a37e8;--raise:#0d09c4}

/* nav pill on the dark ground */
[data-theme="dark"] header.nav.inv{color:var(--ink)}
[data-theme="dark"] .nav.inv .call span{color:var(--surf)}
[data-theme="dark"] .nav.inv .call::before{background:var(--surf)}
[data-theme="dark"] .nav-in.wrap{box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 14%,transparent),0 14px 34px -20px rgba(0,0,0,.7)}

/* index */
[data-theme="dark"] .plans>article:not(.rec){background:var(--p-raise)}
[data-theme="dark"] .btn.big{box-shadow:inset 0 0 0 1px var(--i),0 20px 40px -24px rgba(0,0,0,.7)}
[data-theme="dark"] .panel .cover{background:var(--p-raise)}

/* shared inner-page ground (about, legal, join, 404) */
[data-theme="dark"] .page-about main,
[data-theme="dark"] .page-legal main,
[data-theme="dark"] .page-join main,
[data-theme="dark"] .page-oops main{background:var(--surf);color:var(--ink);--g:var(--surf);--i:var(--ink);--mute:var(--p-mute);--faint:var(--p-faint);--line:var(--p-line);--raise:var(--p-raise)}
[data-theme="dark"] .page-about,[data-theme="dark"] .page-legal,[data-theme="dark"] .page-join{--bgc:var(--surf)}
[data-theme="dark"] .page-oops{--bgc:var(--surf);background:var(--surf)}

/* about */
[data-theme="dark"] .ab-facts svg{background:var(--tint)}
[data-theme="dark"] .cw{background:var(--card);color:var(--strong)}
[data-theme="dark"] .cw:hover{background:var(--card-hi)}
[data-theme="dark"] .cw-role{color:var(--accent)}
[data-theme="dark"] .cw-links a{color:var(--ink)}
[data-theme="dark"] .cw-bio{color:var(--body)}
[data-theme="dark"] .ab-reel,[data-theme="dark"] .ab-note{--ab-shadow:0 34px 70px -42px rgba(0,0,0,.8)}
[data-theme="dark"] .ab-join{background:var(--card);color:var(--strong)}
[data-theme="dark"] .ab-join b{color:var(--accent)}
@media (hover:hover){[data-theme="dark"] .ab-join:hover{background:var(--blue);color:var(--paper)}[data-theme="dark"] .ab-join:hover b{color:var(--paper)}}

/* legal */
[data-theme="dark"] .page-legal{--lg-ink:var(--body)}
[data-theme="dark"] .lg-toc li>a{background:var(--card);color:var(--ink)}
[data-theme="dark"] .lg-toc li>a:hover{background:var(--card-hi)}
[data-theme="dark"] .lg-toc li>a.on{background:var(--blue);color:var(--paper)}
@media (min-width:980px){[data-theme="dark"] .lg-toc li>a{background:none}[data-theme="dark"] .lg-toc li>a:hover{background:var(--card)}[data-theme="dark"] .lg-toc li>a.on{background:var(--blue)}}
[data-theme="dark"] .lg-ask{background:var(--card)}
[data-theme="dark"] .lg-ask:hover{background:var(--card-hi)}
[data-theme="dark"] .lg-ask b,[data-theme="dark"] .lg-doc h2,[data-theme="dark"] .lg-doc h3{color:var(--ink)}
[data-theme="dark"] .lg-doc{background:var(--card)}
[data-theme="dark"] .lg-doc b{color:var(--strong)}
[data-theme="dark"] .lg-doc li::before{background:var(--p-mute)}
[data-theme="dark"] .lg-doc a{color:var(--accent)}

/* join */
[data-theme="dark"] .page-join{--jn-ink:var(--body)}
[data-theme="dark"] .jn-live{background:var(--ink);animation:none}
[data-theme="dark"] .jn-role,[data-theme="dark"] .jn-card,[data-theme="dark"] .jn-steps li,[data-theme="dark"] .jn-none{background:var(--card)}
[data-theme="dark"] .jn-role:hover,[data-theme="dark"] .jn-role.open{background:var(--card-hi)}
[data-theme="dark"] .jn-title,[data-theme="dark"] .jn-q i,[data-theme="dark"] .jn-card-head h2,[data-theme="dark"] .jn-steps h3,[data-theme="dark"] .jn-num,[data-theme="dark"] .jn-done h3,[data-theme="dark"] .jn-req{color:var(--ink)}
[data-theme="dark"] .jn-role.open .jn-q i,[data-theme="dark"] .jn-steps li:nth-child(2) .jn-num{background:var(--blue);color:var(--paper)}
[data-theme="dark"] .jn-chip{background:var(--tint);color:var(--accent)}
[data-theme="dark"] .jn-chip-pay{background:var(--blue);color:var(--paper)}
[data-theme="dark"] .jn-tag{background:var(--tint);color:var(--p-mute)}
[data-theme="dark"] .jn-role li::before{background:var(--p-mute)}
[data-theme="dark"] .jn-share{color:var(--ink)}
[data-theme="dark"] .jn-share:hover,[data-theme="dark"] .jn-share.done{background:var(--blue);color:var(--paper);box-shadow:inset 0 0 0 1px var(--blue)}
[data-theme="dark"] .jn-field>label:not(.jn-drop),[data-theme="dark"] .jn-label{color:var(--ink)}
[data-theme="dark"] .jn-field input,[data-theme="dark"] .jn-field select,[data-theme="dark"] .jn-field textarea{background-color:var(--field);color:var(--strong);border-color:var(--p-line)}
[data-theme="dark"] .jn-field select{background-image:url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23F2F2F0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
[data-theme="dark"] .jn-field select option{background:var(--p-raise);color:var(--strong)}
[data-theme="dark"] .jn-field input::placeholder{color:#6b6b6b}
[data-theme="dark"] .jn-field select:invalid{color:#6b6b6b}
[data-theme="dark"] .jn-field input:hover,[data-theme="dark"] .jn-field select:hover,[data-theme="dark"] .jn-field textarea:hover{background-color:var(--field-hi)}
[data-theme="dark"] .jn-field input:focus,[data-theme="dark"] .jn-field select:focus,[data-theme="dark"] .jn-field textarea:focus{background-color:var(--field-hi);border-color:rgba(255,255,255,.55);box-shadow:none}
[data-theme="dark"] .jn-field.err input,[data-theme="dark"] .jn-field.err select,[data-theme="dark"] .jn-field.err textarea{border-color:#ff5a7a;box-shadow:0 0 0 3px rgba(255,90,122,.15)}
[data-theme="dark"] .jn-msg.bad{color:#ff7a93}
[data-theme="dark"] .jn-drop{background:var(--field);border-color:var(--p-faint)}
[data-theme="dark"] .jn-drop svg{stroke:var(--ink)}
[data-theme="dark"] .jn-drop b{color:var(--accent)}
[data-theme="dark"] .jn-drop:hover,[data-theme="dark"] .jn-drop.over,[data-theme="dark"] .jn-drop.has{border-color:rgba(255,255,255,.45);background:var(--field-hi)}
[data-theme="dark"] .jn-drop:focus-within{border-color:rgba(255,255,255,.6);box-shadow:none}
[data-theme="dark"] .jn-drop.has b{color:var(--strong)}

/* 404 / error */
[data-theme="dark"] .oops-in .p code{background:var(--tint);color:var(--accent)}
[data-theme="dark"] .oops-in .p a,[data-theme="dark"] .oops-foot b{color:var(--ink)}

[data-theme="dark"] .page-join{--flash:rgba(255,255,255,.5)}

/* legal: the floating document pill on phones */
@media (max-width:979px){
  [data-theme="dark"] .lg-toc{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 14%,transparent),0 14px 34px -20px rgba(0,0,0,.7)}
  [data-theme="dark"] .lg-toc li>a{background:transparent}
  [data-theme="dark"] .lg-toc li>a:hover{background:var(--card-hi)}
  [data-theme="dark"] .lg-toc li>a.on{background:var(--blue);color:var(--paper)}
  html.theme-frost .lg-toc{background:color-mix(in srgb,var(--bgc,#0400dd) 93%,transparent)!important;transition:background .16s ease!important}
}