/* Dusk (Kene, Oct 2, 2026): the website wears the app's look. A warm
 * near-black field lit by large soft glows (gold low, pearl high, a dim
 * sage, bronze) and a low misty horizon. The sky is drawn by dusk.js and
 * leans with scroll and the pointer; nothing moves on its own.
 *
 * Loaded last on every public page, so it wins without !important where it
 * can. Page colors were converted to their dark twins once, in place
 * (light ink on dusk, cream buttons, see-through tiles).
 */

:root{
  --dk-top:#0E0C0B; --dk-mid:#15120F; --dk-bottom:#211A13;
  --dk-bone:#F2EEE7; --dk-ink:#131211; --dk-sec:#A8A29A; --dk-muted:#8E887F;
  --dk-rim:rgba(255,248,236,.12); --dk-rim-hi:rgba(255,248,236,.26);
  color-scheme:dark;
}

html{background:var(--dk-top)}
body{background:transparent!important; color:var(--dk-bone)}
::selection{background:rgba(205,164,114,.35); color:#FFF8EC}
:focus-visible{outline:1.5px solid rgba(255,248,236,.6)!important; outline-offset:3px}

/* ---- the sky ---- */
.dusk-sky{position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden;
  background:linear-gradient(180deg,var(--dk-top) 0%,var(--dk-mid) 55%,var(--dk-bottom) 100%)}
.dusk-sky i{position:absolute; display:block; border-radius:50%; will-change:transform;
  transform:translate3d(calc(var(--px,0) * var(--d,1) * 1px), calc((var(--py,0) * var(--d,1) - var(--sy,0) * var(--s,.12)) * 1px), 0)}
.dusk-sky .g-gold{width:120vmax; height:120vmax; left:-55vmax; bottom:-70vmax; --d:14; --s:.05;
  background:radial-gradient(closest-side,rgba(185,138,80,.62),rgba(185,138,80,.26) 45%,rgba(185,138,80,.06) 75%,rgba(185,138,80,0))}
.dusk-sky .g-pearl{width:95vmax; height:95vmax; right:-48vmax; top:-52vmax; --d:6; --s:.02;
  background:radial-gradient(closest-side,rgba(216,208,195,.26),rgba(216,208,195,.11) 45%,rgba(216,208,195,.02) 75%,rgba(216,208,195,0))}
.dusk-sky .g-sage{width:80vmax; height:80vmax; left:-34vmax; top:4vh; --d:9; --s:.04;
  background:radial-gradient(closest-side,rgba(69,87,74,.42),rgba(69,87,74,.16) 50%,rgba(69,87,74,0))}
.dusk-sky .g-bronze{width:70vmax; height:70vmax; right:-30vmax; top:44vh; --d:11; --s:.06;
  background:radial-gradient(closest-side,rgba(122,90,54,.40),rgba(122,90,54,.15) 50%,rgba(122,90,54,0))}
.dusk-sky .g-mist{width:170vmax; height:38vmax; left:calc(50% - 85vmax); bottom:-14vmax; border-radius:50%; --d:20; --s:.09;
  background:radial-gradient(closest-side,rgba(205,164,114,.20),rgba(205,164,114,.07) 55%,rgba(205,164,114,0))}
.dusk-sky .g-haze{width:46vmax; height:46vmax; left:48%; top:6vh; --d:4; --s:.015;
  background:radial-gradient(closest-side,rgba(241,230,210,.08),rgba(241,230,210,0))}
.dusk-sky b{position:absolute; inset:0; display:block;
  background:linear-gradient(180deg,rgba(14,12,11,.6) 0%,rgba(14,12,11,0) 14%,rgba(10,8,7,0) 82%,rgba(10,8,7,.5) 100%)}
/* Late at night the light dims, like the app (a state, not an animation). */
html[data-dusk-night] .dusk-sky i{opacity:.78}

/* The old page glows and grain hooks are retired; the sky replaces them. */
.lsn-grain-screen{display:none!important}

/* ---- lit cream buttons ---- */
.care-button, .g-cta a, .sn-dl,
a[style*="background:#F2EEE7"][style*="border-radius:999px"],
button[style*="background:#F2EEE7"][style*="border-radius:999px"]{
  position:relative; overflow:hidden; isolation:isolate;
  background:linear-gradient(180deg,#FFFDF8 0%,#F1EADD 55%,#E2D8C6 100%)!important;
  color:#131211!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 12px 28px -12px rgba(0,0,0,.7),0 2px 6px -2px rgba(0,0,0,.4);
  transition:transform .35s cubic-bezier(.3,.7,0,1),box-shadow .35s ease,opacity .2s ease}
.care-button::after, .g-cta a::after, .sn-dl::after,
a[style*="background:#F2EEE7"][style*="border-radius:999px"]::after,
button[style*="background:#F2EEE7"][style*="border-radius:999px"]::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.75) 48%,transparent 66%);
  transform:translateX(-120%); transition:transform .8s cubic-bezier(.3,.7,0,1)}
.care-button:hover, .g-cta a:hover, .sn-dl:hover,
a[style*="background:#F2EEE7"][style*="border-radius:999px"]:hover,
button[style*="background:#F2EEE7"][style*="border-radius:999px"]:hover{
  opacity:1; transform:translateY(-1px);
  box-shadow:inset 0 1px 0 #fff,0 18px 38px -14px rgba(0,0,0,.75),0 0 0 1px rgba(255,248,236,.18),0 0 34px -6px rgba(214,176,124,.35)}
.care-button:hover::after, .g-cta a:hover::after, .sn-dl:hover::after,
a[style*="background:#F2EEE7"][style*="border-radius:999px"]:hover::after,
button[style*="background:#F2EEE7"][style*="border-radius:999px"]:hover::after{transform:translateX(120%)}
.care-button:active, .g-cta a:active, .sn-dl:active,
a[style*="background:#F2EEE7"][style*="border-radius:999px"]:active,
button[style*="background:#F2EEE7"][style*="border-radius:999px"]:active{transform:scale(.97); transition-duration:.12s}

/* Quiet pills (outlined) brighten their rim on hover. */
a[style*="border-radius:999px"]:not([style*="background:#F2EEE7"]),
button[style*="border-radius:999px"]:not([style*="background:#F2EEE7"]){transition:background-color .3s ease,border-color .3s ease,transform .35s cubic-bezier(.3,.7,0,1)}
a[style*="border-radius:999px"]:not([style*="background:#F2EEE7"]):hover{border-color:rgba(255,248,236,.4)!important; background-color:rgba(255,248,236,.06)}

/* ---- nav pill and menu: deeper frosted glass with a lit top rim ---- */
.sn-shell{background:linear-gradient(152deg,rgba(40,34,28,.72) 0%,rgba(24,20,17,.62) 100%)!important;
  border:1px solid rgba(255,248,236,.10)!important; border-top-color:rgba(255,248,236,.22)!important;
  box-shadow:0 1px 0 rgba(255,248,236,.08) inset,0 18px 40px -18px rgba(0,0,0,.8)!important}
.sn-links a{transition:color .25s ease}
.sn-links a:not([aria-current]){color:#B9B1A6}
.sn-links a:not([aria-current]):hover{color:#F2EEE7; opacity:1}
.sn-links a[aria-current]{color:#F2EEE7; text-decoration-color:rgba(242,238,231,.4)}
.sn-menu{background:linear-gradient(152deg,rgba(38,32,27,.97) 0%,rgba(24,20,17,.95) 100%)!important;
  border:1px solid rgba(255,248,236,.12)!important; border-top-color:rgba(255,248,236,.24)!important}
.sn-menu a{color:#F2EEE7}
.sn-menu a:hover{background:rgba(255,248,236,.06)}

/* ---- footer: a darker shelf under the horizon ---- */
footer{background:linear-gradient(180deg,rgba(14,12,10,.55),rgba(10,8,7,.85))!important; border-top-color:rgba(255,248,236,.10)!important}

/* ---- clinician portal and shared pages (share.css) ---- */
html:has(link[href*="share.css"]) button.google-sign-in{background:linear-gradient(180deg,#FFFDF8,#EDE5D7)!important; color:#1f1f1f!important; border-color:rgba(255,248,236,.5)!important}
html:has(link[href*="share.css"]) button.google-sign-in:hover{background:#FFFFFF!important}
html:has(link[href*="share.css"]) .top img{border-radius:8px}
html:has(link[href*="share.css"]) a, html:has(link[href*="share.css"]) a:visited{color:inherit}
html:has(link[href*="share.css"]) button:not(.refresh):not(.link):not(.quiet):not(.cov):not(.vbtn):not(.google-sign-in):not([style]){
  background:linear-gradient(180deg,#FFFDF8 0%,#F1EADD 55%,#E2D8C6 100%); color:#131211;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 12px 28px -12px rgba(0,0,0,.7)}

/* ---- prose links ---- */
.doc a[href^="mailto"], .doc a[href$=".html"]{border-bottom-color:rgba(242,238,231,.3)}

@media (prefers-reduced-motion: reduce){
  .dusk-sky i{transform:none!important}
  .care-button::after, .g-cta a::after, .sn-dl::after,
  a[style*="background:#F2EEE7"]::after, button[style*="background:#F2EEE7"]::after{display:none}
}

/* The clinician tour is a recording of the portal from before dusk. Until it
   is re-recorded, a tone flip shows it dark: light panels go deep, and the
   hue turn keeps the bars' red, clay and sage close to their own colors. */
/* Re-recorded in the dusk look on Oct 10, 2026 (portal-tour-v4), so no tone flip is needed. */