/* SENTINEL — LIGHT / DARK
 *
 * No redesign. The Phase-4 shell already alternates ink and paper surfaces with
 * a world accent on top; the theme swaps what "ink" and "paper" mean and lets
 * the existing rhythm stand. Section order, spacing and hierarchy are untouched.
 */

.theme-toggle{
  display:inline-grid;place-items:center;width:38px;height:38px;flex:none;
  margin-right:10px;border-radius:50%;cursor:pointer;color:inherit;
  border:1px solid var(--line-dark);background:transparent;
  transition:border-color .2s ease,background .2s ease,color .2s ease;
}
.theme-toggle svg{width:18px;height:18px;grid-area:1/1;transition:opacity .22s ease,transform .28s ease}
.theme-toggle:hover,.theme-toggle:focus-visible{border-color:var(--accent-bright);color:var(--accent-bright)}
.theme-toggle:focus-visible{outline:2px solid var(--accent-bright);outline-offset:3px}

/* dark showing: offer the sun. light showing: offer the moon. */
html[data-theme="dark"]  .tt-sun {opacity:1;transform:none}
html[data-theme="dark"]  .tt-moon{opacity:0;transform:rotate(-40deg) scale(.7)}
html[data-theme="light"] .tt-sun {opacity:0;transform:rotate(40deg) scale(.7)}
html[data-theme="light"] .tt-moon{opacity:1;transform:none}
html[data-theme="light"] .theme-toggle{border-color:var(--line-light)}

/* ---------------------------------------------------------- light surfaces */
html[data-theme="light"]{
  --ink:#EDF0F4;                 /* was the near-black band surface */
  --paper:#FBFCFD;
  --t-on-ink:#141A25;
  --t-on-ink-mute:#515B6C;
  --t-on-paper:#141A25;
  --t-on-paper-mute:#515B6C;
  --line-dark:rgba(11,14,20,.14);
  --line-light:rgba(11,14,20,.11);
  color-scheme:light;
}
/* --accent-bright is authored to sit on obsidian; on a light band it drops to
   roughly 1.6:1 and eyebrow labels become unreadable. Under light it resolves
   to the deep accent instead, per world. This is a token remap, not a restyle:
   no rule that consumes the token had to change. */
html[data-theme="light"]{--accent-bright:#0B6675;--accent-tint-dark:rgba(14,124,140,.10)}
html[data-theme="light"] [data-world="personal"],
html[data-theme="light"] body[data-world="personal"]{--accent-bright:#4436A8}
html[data-theme="light"] [data-world="family"],
html[data-theme="light"] body[data-world="family"]{--accent-bright:#7A5010}
html[data-theme="light"] [data-world="senior"],
html[data-theme="light"] body[data-world="senior"]{--accent-bright:#20553B}
html[data-theme="light"] [data-world="organization"],
html[data-theme="light"] body[data-world="organization"]{--accent-bright:#204762}
html[data-theme="dark"]{ color-scheme:dark }

/* The presence stage was authored against a dark plate. On light it keeps the
   same composition but sheds the glow it no longer sits on. */
html[data-theme="light"] .sp-stage{opacity:.42}
html[data-theme="light"] .sp-field{
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.5) 48%,transparent 78%);
          mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.5) 48%,transparent 78%)}
html[data-theme="light"] .sp-core{
  background:radial-gradient(ellipse at 55% 48%,rgba(120,175,205,.16),
    rgba(88,150,190,.07) 33%,rgba(150,170,190,.13) 64%,transparent 78%)}
html[data-theme="light"] .sp-spill{opacity:.4}
html[data-theme="light"] .sp-welcome{
  background:linear-gradient(90deg,rgba(252,253,254,.95),rgba(252,253,254,.82) 62%,rgba(252,253,254,.6));
  box-shadow:0 18px 44px rgba(20,32,48,.14)}
html[data-theme="light"] .sp-welcome span{color:#1E2A38}
html[data-theme="light"] .sp-welcome{background:linear-gradient(90deg,rgba(251,252,253,.97),rgba(251,252,253,.9) 62%,rgba(251,252,253,.72));
  border-left-color:var(--accent-bright)}
html[data-theme="light"] .sp-welcome strong{color:var(--accent-bright)}
html[data-theme="light"] .sp-cursor{border-color:rgba(30,60,84,.5)}
html[data-theme="light"] .sp-line{
  background:linear-gradient(90deg,rgba(30,60,84,.08),rgba(30,60,84,.6),rgba(40,110,150,.12))}
html[data-theme="light"] .sp-dot{background:#2b4a63}
html[data-theme="light"] .sp-arc{stroke:rgba(40,80,110,.42)}
html[data-theme="light"] .sp-arc.a1{stroke:rgba(30,66,94,.55)}

/* theme change must not animate the whole page on first paint */
html[data-theme] body{transition:background-color .28s ease,color .28s ease}
@media (prefers-reduced-motion:reduce){
  .theme-toggle svg{transition:none}
  html[data-theme] body{transition:none}
}

/* V6: footer legal links reached only ~18px tall on 390px; give them a
   24px minimum hit area without changing the visual rhythm. */
.foot-legal a{display:inline-block;min-height:24px;padding-block:4px}

/* V6: in light theme the header kept a near-black glass on some routes and
   white links on others (2.8:1 and ~1:1). One light header for every route. */
html[data-theme="light"] .site-head{background:rgba(246,248,251,.94)}
html[data-theme="light"] .site-head .nav a,
html[data-theme="light"] .site-head .wm,
html[data-theme="light"] .site-head .nav-toggle{color:#1B2230}
html[data-theme="light"] .site-head .nav a[aria-current="page"],
html[data-theme="light"] .site-head .nav a:hover{color:#0B0E14}

/* V6: dark-only legacy routes hide the control instead of offering an unreadable light theme */
html[data-theme-lock] .theme-toggle{display:none}

/* V6: sentinel.css hard-codes white headings/ghost text on .ink; under light
   the ink surface is pale, so those resolve through the theme tokens instead. */
html[data-theme="light"] .ink :is(h1,h2,h3,h4){color:var(--t-on-ink)}
html[data-theme="light"] .ink .btn.ghost{--btn-fg:var(--t-on-ink);--btn-bd:var(--line-dark)}
html[data-theme="light"] .site-foot .wm,
html[data-theme="light"] .drawer .wm{color:var(--t-on-ink)}

/* V4: mobile-download CTA in the header (drawer + footer carry it on narrow screens) */
.head-dl{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;margin-right:4px;border-radius:999px;
  border:1px solid var(--line-dark);color:var(--t-on-ink);font-size:.9rem;font-weight:600;white-space:nowrap;text-decoration:none}
.head-dl:hover,.head-dl[aria-current="page"]{border-color:currentColor}
.head-dl:focus-visible{outline:2px solid currentColor;outline-offset:2px}
html[data-theme="light"] .head-dl{color:#1B2230;border-color:rgba(11,14,20,.22)}
@media (max-width:1240px){.head-dl{display:none}}
.foot-dl{font-weight:600}