/* ==========================================================================
   My Sign — brand.css
   The shared visual language of the app (app/static/index.html) and the
   public site (site/index.html): tokens first, then the room (sky, grain),
   then type, fields, buttons, glass, sheet and the orbit motif.

   Copied faithfully from the app's "After Dark" stylesheet so the app can
   later import this file instead of carrying its own copy. Theme follows the
   OS through prefers-color-scheme, exactly as the app does — there is no
   manual toggle. Fonts are loaded by the page (Google Fonts, display=swap):
   Instrument Serif for the voice, Geist for the interface, Geist Mono for
   the sky's numbers.
   ========================================================================== */

/* ---------- 1. tokens ---------- */
:root{
  color-scheme:light;
  --ground:#F5EEE6; --ground-2:#EFE5DB;
  --surface:rgba(250,244,236,.72); --surface-solid:#FFFAF4; --surface-2:#EDE1D6;
  --ink:#1E1518; --ink-2:#4E3E3C; --ink-3:#655450;
  --rule:rgba(60,30,30,.11); --rule-2:rgba(60,30,30,.2);
  --accent:#7C2235; --accent-2:#94703A; --accent-ink:#FFFFFF;
  --accent-wash:rgba(124,34,53,.08);
  --glow:linear-gradient(118deg,#C9A774 0%,#D98C86 50%,#7C2235 100%);
  --glow-deep:linear-gradient(135deg,#8E2A3B 0%,#5A1726 100%);
  --text-glow:linear-gradient(100deg,#94703A 0%,#A3404F 55%,#7C2235 100%);
  --rose-a:#C9A774; --rose-b:#D98C86; --rose-c:#7C2235;
  --aura-1:rgba(233,180,170,.55); --aura-2:rgba(214,178,120,.28); --aura-3:rgba(124,34,53,.10);
  --stars:rgba(90,30,40,.16);
  --shadow:0 1px 0 rgba(255,255,255,.75) inset, 0 10px 30px -14px rgba(80,30,30,.22);
  --shadow-lg:0 30px 60px -26px rgba(80,30,30,.35);
  --good:#2D6A4F; --warn:#865A12; --crit:#A3282E;
  --warn-wash:rgba(180,130,30,.12); --crit-wash:rgba(180,40,50,.07);
  --fire:#C8603F; --earth:#7E8B4E; --air:#B8945A; --water:#5A7FA0;
  --display:'Instrument Serif',Didot,Georgia,serif;
  --sans:'Geist','Helvetica Neue',Arial,sans-serif;
  --mono:'Geist Mono',ui-monospace,Menlo,monospace;
  --symbols:'Noto Sans Symbols 2','Segoe UI Symbol','Apple Symbols',var(--sans);
  --r:20px; --r-sm:12px; --r-pill:999px;
  --ease:cubic-bezier(.2,.8,.2,1);
  /* glass */
  --glass-line:rgba(124,34,53,.12); --glass-hi:rgba(255,255,255,.55);
  /* the living sky: --s0..--s3 run top to horizon, set by sky.js (MySky) */
  --s0:var(--ground); --s1:var(--ground); --s2:var(--ground); --s3:var(--ground);
  --orb-x:80%; --orb-y:10%; --orb-o:0; --star-o:0;
  --sun-core:#F2D4A6; --sun-halo:#EFAE8E;
}
@media (prefers-color-scheme:dark){:root{
  color-scheme:dark;
  --ground:#0F0B0D; --ground-2:#171012;
  --surface:rgba(15,11,13,.62); --surface-solid:#1A1416; --surface-2:rgba(255,230,222,.08);
  --ink:#F3EAE2; --ink-2:#CDBDB5; --ink-3:#B4A39B;
  --rule:rgba(255,226,214,.09); --rule-2:rgba(255,226,214,.17);
  --accent:#E7A79C; --accent-2:#E6CFA8; --accent-ink:#1E1518;
  --accent-wash:rgba(231,167,156,.11);
  --glow:linear-gradient(118deg,#E6CFA8 0%,#E7A79C 48%,#B4485C 100%);
  --glow-deep:linear-gradient(135deg,#962F42 0%,#5E1A2A 100%);
  --text-glow:linear-gradient(100deg,#F0DDBF 0%,#E7A79C 50%,#D27A86 100%);
  --rose-a:#E6CFA8; --rose-b:#E7A79C; --rose-c:#B4485C;
  --aura-1:rgba(142,42,59,.40); --aura-2:rgba(96,28,52,.34); --aura-3:rgba(230,175,130,.12);
  --stars:rgba(255,236,226,.5);
  --shadow:0 1px 0 rgba(255,240,232,.05) inset, 0 18px 40px -22px rgba(0,0,0,.85);
  --shadow-lg:0 40px 80px -30px rgba(0,0,0,.9);
  --good:#8FD0AC; --warn:#E9C27A; --crit:#FF9A8E;
  --warn-wash:rgba(233,194,122,.11); --crit-wash:rgba(255,120,110,.09);
  --fire:#E8876A; --earth:#B3BE82; --air:#E6CFA8; --water:#8FA9C8;
  --glass-line:rgba(243,234,226,.12); --glass-hi:rgba(243,234,226,.06);
}}

/* ---------- 2. base ---------- */
*,*::before,*::after{box-sizing:border-box}
html,body{min-height:100%}
body{margin:0;background-color:var(--ground);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.6;letter-spacing:-.003em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-synthesis:none}
::selection{background:var(--accent);color:var(--accent-ink)}
a{color:var(--accent);text-underline-offset:.18em}
h1,h2,.hero{overflow-wrap:anywhere}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- 3. the room: sky, horizon, sun or moon, haze, stars, grain ---------- */
.sky{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:linear-gradient(180deg,var(--s0) 0%,var(--s1) 45%,var(--s2) 78%,var(--s3) 100%)}
.sky::before{content:"";position:absolute;left:-20%;right:-20%;bottom:-12%;height:46%;
  background:radial-gradient(50% 50% at 50% 70%,color-mix(in oklab,var(--s3) 62%,#FFE6CC),transparent 72%);
  opacity:.42}
.sky .haze{position:absolute;inset:-25%;
  background:radial-gradient(34% 26% at 16% 14%,var(--aura-1),transparent 70%),
             radial-gradient(30% 26% at 90% 34%,var(--aura-2),transparent 70%);
  opacity:.55;will-change:transform;animation:drift 38s var(--ease) infinite alternate}
.sky .orb{position:absolute;left:var(--orb-x);top:var(--orb-y);width:4.25rem;height:4.25rem;
  transform:translate(-50%,-50%);opacity:var(--orb-o);transition:left 60s linear,top 60s linear,opacity 4s}
.sky .orb::before{content:"";position:absolute;inset:-260%;border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in oklab,var(--sun-halo) 46%,transparent),
             color-mix(in oklab,var(--sun-halo) 14%,transparent) 45%,transparent)}
.sky .orb i{position:absolute;inset:0;border-radius:50%;filter:blur(1.5px);
  background:radial-gradient(closest-side,#FFFBF2 0%,#FFF1D8 38%,color-mix(in oklab,var(--sun-core) 85%,transparent) 70%,transparent 100%);
  box-shadow:0 0 60px 18px color-mix(in oklab,var(--sun-core) 38%,transparent)}
[data-orb=moon] .sky .orb{width:4rem;height:4rem}
[data-orb=moon] .sky .orb i{background:none;box-shadow:none}
[data-orb=moon] .sky .orb::before{inset:-120%;background:radial-gradient(closest-side,rgba(243,234,226,.16),transparent)}
@media (prefers-color-scheme:dark){ .sky .orb{opacity:calc(var(--orb-o) * .78);mix-blend-mode:screen} }
.sky::after{content:"";position:absolute;inset:0;opacity:var(--star-o);transition:opacity 4s;
  background-image:
    radial-gradient(1px 1px at 12% 18%,var(--stars),transparent 60%),
    radial-gradient(1px 1px at 72% 8%,var(--stars),transparent 60%),
    radial-gradient(1.4px 1.4px at 86% 42%,var(--stars),transparent 60%),
    radial-gradient(1px 1px at 32% 56%,var(--stars),transparent 60%),
    radial-gradient(1.2px 1.2px at 58% 74%,var(--stars),transparent 60%),
    radial-gradient(1px 1px at 8% 88%,var(--stars),transparent 60%),
    radial-gradient(1px 1px at 94% 92%,var(--stars),transparent 60%),
    radial-gradient(1.3px 1.3px at 46% 22%,var(--stars),transparent 60%),
    radial-gradient(1px 1px at 24% 36%,var(--stars),transparent 60%),
    radial-gradient(1.2px 1.2px at 64% 30%,var(--stars),transparent 60%);
  background-size:420px 520px;animation:twinkle 9s ease-in-out infinite alternate}
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@media (prefers-color-scheme:dark){ .grain{opacity:.045} }

/* ---------- 4. brand lockup ---------- */
.brand{font-family:var(--display);font-style:italic;font-size:1.65rem;font-weight:500;
  letter-spacing:-.01em;line-height:1}
.lockup{display:flex;align-items:center;gap:.5rem;color:var(--ink);text-decoration:none}
.lockup .mark{width:1.45rem;height:1.45rem;flex:none;display:block;
  filter:drop-shadow(0 0 6px rgba(230,200,150,.5));animation:breathe 5s ease-in-out infinite}

/* ---------- 5. type ---------- */
.hero{font-family:var(--display);font-weight:400;
  font-size:clamp(3.4rem,16vw,4.25rem);line-height:.92;letter-spacing:-.025em;
  margin:2.2rem 0 .3rem;text-wrap:balance}
.hero em,.glow-text{padding-right:.06em;font-style:italic;background:var(--text-glow);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.lede{color:var(--ink-2);margin:0 0 1.4rem;text-wrap:pretty;font-size:1rem}
.eyebrow,label{display:block;font-family:var(--sans);font-size:.625rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.2em;color:var(--ink-3);margin:0 0 .5rem}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ---------- 6. fields ---------- */
.field{margin-bottom:1.1rem;position:relative}
input[type=text],input[type=email],input[type=tel],input[type=date],input[type=time],select{
  width:100%;font:inherit;font-size:1rem;color:var(--ink);background:var(--surface);
  border:1px solid var(--rule-2);border-radius:var(--r-sm);padding:.85rem 1rem;min-width:0;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease);-webkit-appearance:none;appearance:none;min-height:3.1rem}
input::placeholder,textarea::placeholder{color:var(--ink-3);opacity:.85}
select:focus,input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-wash),0 0 24px -6px var(--accent)}
input:disabled{opacity:.45}
input[readonly]{color:var(--ink-2)}
.code-input{font-size:1.6rem!important;letter-spacing:.5em;text-align:center;font-variant-numeric:tabular-nums;font-weight:600;padding-left:1.4rem!important}
.hint{font-size:.8125rem;color:var(--ink-3);margin:.45rem 0 0}
.err{color:var(--crit);font-size:.8125rem;margin:.6rem 0 0;min-height:1.2em}
.devcode{font-family:var(--mono);font-size:.8125rem;color:var(--warn);background:var(--warn-wash);border-radius:var(--r-sm);
  padding:.6rem .8rem;margin:.6rem 0 0;font-variant-numeric:tabular-nums}
.devcode[hidden]{display:none}

/* ---------- 7. buttons ---------- */
/* .primary works on <button> and <a>: the site links where the app taps. */
:is(button,a).primary{position:relative;display:block;width:100%;text-align:center;text-decoration:none;
  font:inherit;font-weight:700;font-size:1rem;letter-spacing:.01em;cursor:pointer;
  background:var(--glow-deep);color:#FFF6F8;border:0;border-radius:var(--r-pill);padding:1rem 1.2rem;
  box-shadow:0 14px 30px -14px rgba(142,42,59,.8),inset 0 1px 0 rgba(255,255,255,.25);
  overflow:hidden;isolation:isolate;transition:transform .2s var(--ease),box-shadow .3s var(--ease),opacity .3s}
:is(button,a).primary::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);
  transform:translateX(-120%);transition:transform .9s var(--ease)}
:is(button,a).primary:not(:disabled):hover::after{transform:translateX(120%)}
:is(button,a).primary:not(:disabled):hover{box-shadow:0 18px 38px -14px rgba(142,42,59,.95),inset 0 1px 0 rgba(255,255,255,.3)}
:is(button,a).primary:not(:disabled):active{transform:scale(.98)}
button.primary:disabled{background:var(--surface-2);color:var(--ink-3);cursor:default;box-shadow:none}
:is(button,a).primary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.link{background:none;border:0;font:inherit;font-size:.875rem;font-weight:600;color:var(--accent);
  cursor:pointer;padding:0;text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px}
.link:disabled{color:var(--ink-3);cursor:default;text-decoration:none}
:is(button,a).ghost,.pill{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  background:var(--surface);border:1px solid var(--rule-2);color:var(--ink);min-height:2.75rem;text-decoration:none;
  border-radius:var(--r-pill);font:inherit;font-size:.8125rem;font-weight:600;padding:.5rem 1rem;cursor:pointer;
  transition:border-color .25s,background .25s;white-space:nowrap}
:is(button,a).ghost:hover,.pill:hover{border-color:var(--accent);background:var(--accent-wash)}
button.ghost:disabled{opacity:.45;cursor:default}
:is(button,a).ghost:focus-visible,.pill:focus-visible,.link:focus-visible,a:focus-visible,summary:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--r-pill)}

/* ---------- 8. glass card ---------- */
/* Frosted glass over the sky: the colour of the hour bleeds through, text
   stays on a dense enough pane to hold AA. Hairline, no drop shadow. */
.card{background:var(--surface);border:.5px solid var(--glass-line);border-radius:var(--r);
  -webkit-backdrop-filter:blur(24px) saturate(1.2);backdrop-filter:blur(24px) saturate(1.2);
  box-shadow:inset 0 1px 0 var(--glass-hi)}
@media (prefers-reduced-transparency:reduce){
  .card{background:var(--surface-solid);-webkit-backdrop-filter:none;backdrop-filter:none}}
/* The candlelit edge the app gives its Today card. */
.card.lit{position:relative}
.card.lit::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;
  background:var(--glow);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:.55;pointer-events:none}

/* ---------- 9. sheet (bottom sheet over a scrim) ---------- */
.sheet{width:100%;max-width:30rem;background:var(--surface-solid);border:1px solid var(--rule-2);border-bottom:0;
  border-radius:26px 26px 0 0;padding:1.5rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom));
  box-shadow:var(--shadow-lg);animation:up .4s var(--ease) both}
.sheet::before{content:"";display:block;width:2.4rem;height:4px;border-radius:4px;background:var(--rule-2);margin:-.6rem auto 1.1rem}
.sheet h2,.sheet h3{font-family:var(--display);font-weight:400;font-size:1.9rem;line-height:1.05;margin:0 0 .5rem}
.sheet p{color:var(--ink-2);font-size:.9375rem;margin:0 0 1rem}
.sheet .step{font-family:var(--mono);font-size:.6875rem;color:var(--ink-3);margin:0 0 .4rem}
.sent{font-size:.8125rem;color:var(--ink-3);margin:-.4rem 0 1rem}

/* ---------- 10. the orbit motif ---------- */
.orbit .ring{fill:none;stroke:var(--rule-2);stroke-width:.6}
.orbit .spin{transform-origin:120px 120px;animation:spin 60s linear infinite}
.orbit .spin.rev{animation-duration:90s;animation-direction:reverse}

/* ---------- 11. motion ---------- */
@keyframes drift{0%{transform:translate3d(0,0,0) rotate(0)}50%{transform:translate3d(3%,-2%,0) rotate(6deg)}100%{transform:translate3d(-3%,3%,0) rotate(-4deg)}}
@keyframes twinkle{from{opacity:.55}to{opacity:1}}
@keyframes breathe{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.08) rotate(8deg)}}
@keyframes rise{from{opacity:0;transform:translateY(14px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes up{from{transform:translateY(100%)}}
@keyframes fade{from{opacity:0}}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.7);opacity:.5}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}