/* ============================================================
   HERO — Sycamore Creek staff wellness
   Design system from "HERO Staff Wellness.dc.html", direction 1a
   (the staff jacket) with the 1d breathing-ring reset.
   ============================================================ */

:root{
  /* field */
  --purple:#3B1E64;          /* header / primary chrome */
  --purple-deep:#2C1349;     /* tab bar, ink on green */
  --purple-ink:#241730;      /* body text on cream */
  --purple-mid:#5B3A86;

  /* light surfaces */
  --cream:#F4EFE4;
  --card:#FFFDF7;
  --card-alt:#EFE7DA;
  --rule:rgba(36,23,48,.09);
  --muted:#5A4B68;
  --label:#6B5B7A;
  --body:#3F3349;

  /* dark surfaces */
  --dark:#150A24;
  --dark-raised:#251337;
  --dark-nav:#0E0518;
  --dark-sheet:#1B0A2E;
  --dark-text:#EDE6F5;
  --dark-dim:#B7A6C6;
  --dark-label:#C0A0E0;
  --dark-body:#D6C9E3;

  /* the single accent */
  --green:#35D07A;
  --green-deep:#1B9A55;      /* drop shadow on cream */
  --green-deep-dark:#17864A; /* drop shadow on dark */
  --green-ink:#123A20;

  /* the four letters */
  --h:#1C6B3A;  --h-mark:#35D07A;
  --e:#1F6F62;  --e-mark:#8FD3C7;
  --r:#8E4B6E;  --r-mark:#E6A6C4;
  --o:#5B3A86;  --o-mark:#B9A6E6;
  --h-wash:#DFF2E5; --e-wash:#DEF0EC; --r-wash:#F6E3EE; --o-wash:#EDE4F7;

  /* mapped roles — light is the default field */
  --bg:var(--cream);
  --surface:var(--card);
  --surface-alt:var(--card-alt);
  --text:var(--purple-ink);
  --text-dim:var(--body);
  --text-faint:var(--muted);
  --hairline:var(--rule);
  --lift:0 3px 9px rgba(59,30,100,.07);
  --lift-lg:0 4px 12px rgba(59,30,100,.08);
  --green-shadow:var(--green-deep);

  --weave:repeating-linear-gradient(45deg,rgba(255,255,255,.035) 0 2px,transparent 2px 5px);
  --chenille:repeating-radial-gradient(circle at 30% 25%,rgba(255,255,255,.16) 0 2px,transparent 2px 7px);

  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
}

/* Dark is a remap of the same tokens — 2a, not a second design. */
html[data-theme="dark"]{
  --bg:var(--dark);
  --surface:var(--dark-raised);
  --surface-alt:#20112F;
  --text:var(--dark-text);
  --text-dim:#CFC2DC;
  --text-faint:var(--dark-dim);
  --hairline:rgba(237,230,245,.13);
  --purple:#251337;
  --lift:none;
  --lift-lg:none;
  --green-shadow:var(--green-deep-dark);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{
  background:var(--dark-nav);
  color:var(--text);
  font-family:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;text-align:left}
.blk{font-family:'Archivo Black','Archivo',sans-serif;font-weight:400}

/* ---------- app frame ---------- */
.app{
  height:100dvh;
  max-width:520px;
  margin:0 auto;
  background:var(--bg);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  position:relative;
}
.screen{display:flex;flex-direction:column;flex:1;min-height:0}

/* ---------- header ---------- */
.hdr{
  background:var(--purple);
  background-image:var(--weave);
  color:var(--cream);
  padding:calc(var(--safe-top) + 14px) 22px 20px;
  flex:none;
}

/* Installed on iOS, the system softens the top edge of the viewport — its
   scroll-edge effect. Text caught in that band renders blurry, and no amount
   of CSS sharpens it, so the header simply starts below the band when we are
   running as an installed app. Safari never applies the effect and keeps the
   compact header. The same goes for the reset, which is its own full screen. */
@media (display-mode: standalone) {
  .hdr{padding-top:calc(var(--safe-top) + 56px)}
  .layer__inner{padding-top:calc(var(--safe-top) + 46px)}
}
html[data-theme="dark"] .hdr{background:transparent;background-image:var(--weave);padding-bottom:18px}
.hdr__eyebrow{
  display:flex;align-items:center;gap:9px;
  font-weight:600;font-size:12px;letter-spacing:1.4px;color:#D8C8EC;
}
.hdr__back{display:flex;align-items:center;gap:9px}
.hdr__title{font-size:30px;line-height:1;letter-spacing:-.5px;margin:0}
.hdr__title--sm{font-size:27px;letter-spacing:-.4px}
.hdr__sub{margin-top:9px;font-weight:500;font-size:15px;line-height:1.5;color:#DACEE9}
.hdr__row{margin-top:10px;display:flex;align-items:center;gap:13px}
.hdr__meta{margin-top:16px;display:flex;justify-content:space-between;font-weight:500;font-size:12.5px;color:#DACEE9}
/* Small letter-spaced caps on the woven header washed out badly on a phone,
   and 12px of text is a poor tap target. Brighter, a little larger, and the
   padding gives it a proper 44pt-ish hit area without moving it. */
.hdr__action{
  position:relative;
  font-weight:700;font-size:13px;letter-spacing:1.3px;
  color:var(--cream);
}
/* the 44pt hit area is drawn outside the flow, so it cannot push the header
   around the way padding did */
.hdr__action::after{content:'';position:absolute;inset:-15px -14px}

/* the SCE chenille insignia */
.insignia{
  width:46px;height:52px;flex:none;
  background:var(--green);
  border-radius:8px 8px 22px 22px/8px 8px 30px 30px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.18);
  font-family:'Archivo Black','Archivo',sans-serif;font-size:15px;letter-spacing:-.3px;
  color:var(--purple);
}
html[data-theme="dark"] .insignia{color:var(--purple-deep);box-shadow:none}

/* ---------- scrolling body ---------- */
.content{
  flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:16px 20px 4px;
  display:flex;flex-direction:column;gap:11px;
}
.content--tight{gap:10px}
.content > *{flex:0 0 auto}
.content--center > *{flex:0 0 auto}
.content--center{align-items:center;justify-content:center;text-align:center;gap:22px;padding:0 36px}
.content--pull{margin-top:-14px;padding-top:0}

.eyebrow{font-weight:700;font-size:11px;letter-spacing:1.6px;color:var(--label);margin:4px 0 -1px}
html[data-theme="dark"] .eyebrow{color:var(--dark-label)}
.note{font-weight:500;font-size:14px;line-height:1.4;color:var(--text-faint);padding:4px 4px 0}
.note b{color:var(--purple);font-weight:700;text-decoration:underline}
html[data-theme="dark"] .note b{color:#7FE8AB}

/* ---------- cards & rows ---------- */
.card{background:var(--surface);border-radius:16px;padding:18px;box-shadow:var(--lift-lg)}
.card--flat{background:var(--surface-alt);box-shadow:none;border-radius:14px;padding:16px}
.card--accent{border-bottom:4px solid var(--green)}
.card__label{font-weight:700;font-size:11px;letter-spacing:1.6px;color:var(--label)}
html[data-theme="dark"] .card__label{color:var(--dark-label)}
.card__lede{margin-top:10px;font-weight:500;font-size:19px;line-height:1.45;text-wrap:pretty}
.card__body{margin-top:14px;font-weight:500;font-size:15px;line-height:1.5;color:var(--text-dim)}

.row{
  width:100%;
  background:var(--surface);border-radius:13px;padding:15px 16px;
  display:flex;gap:13px;align-items:center;box-shadow:var(--lift);
}
.row__icon{
  width:34px;height:34px;border-radius:9px;flex:none;
  display:flex;align-items:center;justify-content:center;
}
.row__main{flex:1;min-width:0}
.row__title{display:block;font-weight:600;font-size:17px;line-height:1.3;text-wrap:pretty}
.row__meta{display:block;margin-top:3px;font-weight:500;font-size:13.5px;color:var(--text-faint)}
.row.is-done{opacity:.62}
.row.is-done .row__title{text-decoration:line-through;text-decoration-thickness:2px}

.chev{width:9px;height:9px;border-top:2px solid var(--muted);border-right:2px solid var(--muted);transform:rotate(45deg);flex:none}
.chev--back{transform:rotate(45deg);border:0;border-left:2px solid currentColor;border-bottom:2px solid currentColor}
html[data-theme="dark"] .chev{border-color:var(--dark-dim)}

/* ---------- the four letter marks ---------- */
.mark{flex:none;display:block}
.mark--h{width:0;height:0;border-left:calc(var(--s,14px) / 2) solid transparent;border-right:calc(var(--s,14px) / 2) solid transparent;border-bottom:var(--s,14px) solid var(--c,var(--h-mark))}
.mark--e{width:var(--s,14px);height:var(--s,14px);border-radius:50%;background:var(--c,var(--e-mark))}
.mark--r{width:calc(var(--s,14px) * .92);height:calc(var(--s,14px) * .92);background:var(--c,var(--r-mark));transform:rotate(45deg)}
.mark--o{width:calc(var(--s,14px) * .92);height:calc(var(--s,14px) * .92);border-radius:3px;background:var(--c,var(--o-mark))}

/* ---------- the line ---------- */
.say{
  background:var(--surface);border-radius:16px;padding:20px 20px 22px;
  box-shadow:var(--lift);border-left:5px solid var(--green);
}
.say__line{
  margin:0;font-weight:500;font-size:19px;line-height:1.45;
  color:var(--text);text-wrap:pretty;
}

/* ---------- coming up ---------- */
.ahead{background:var(--surface);border-radius:16px;padding:16px 18px 8px;box-shadow:var(--lift)}
.ahead__head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.ahead__all{font-weight:700;font-size:10.5px;letter-spacing:1.2px;color:var(--purple)}
html[data-theme="dark"] .ahead__all{color:var(--green)}
.ahead__row{
  width:100%;display:block;text-align:left;
  padding:12px 0;border-bottom:1px solid var(--hairline);
}
.ahead__row:last-child{border-bottom:0}
.ahead__meta{
  display:block;font-weight:700;font-size:10.5px;letter-spacing:1.2px;
  color:var(--h);
}
html[data-theme="dark"] .ahead__meta{color:var(--green)}
.ahead__title{
  display:block;margin-top:5px;font-weight:600;font-size:16.5px;line-height:1.3;
  text-wrap:pretty;
}

/* ---------- home: today ---------- */
.today__head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}

/* the month's progress, sitting above the day's tasks */
.prog{
  display:block;width:100%;text-align:left;
  margin:12px 0 4px;padding:14px 15px 13px;
  background:rgba(53,208,122,.14);
  border:2px solid var(--green);
  border-radius:14px;
}
.prog__top{display:flex;align-items:center;gap:10px}
.prog__count{
  font-size:26px;line-height:1;letter-spacing:-.6px;flex:none;
  /* bright green is legible on the dark field but washes out on cream,
     so light mode drops to the deeper green of the H mark */
  color:var(--h);
}
html[data-theme="dark"] .prog__count{color:var(--green)}
.prog__of{font-size:17px;letter-spacing:-.2px;opacity:.85}
.prog__label{
  flex:1;font-weight:600;font-size:13.5px;line-height:1.2;
  color:var(--text);opacity:.75;
}
.prog .chev{border-color:var(--h);opacity:.9}
html[data-theme="dark"] .prog .chev{border-color:var(--green)}
.prog__track{
  display:block;margin-top:11px;height:10px;border-radius:6px;
  background:rgba(53,208,122,.2);overflow:hidden;
}
.prog__track i{display:block;height:100%;background:var(--green);border-radius:6px;transition:width .4s ease}
html[data-theme="dark"] .prog{background:rgba(53,208,122,.1)}
.prog:active{transform:translateY(1px)}
.today{background:var(--surface);border-radius:16px;padding:20px 20px 6px;box-shadow:0 6px 16px rgba(59,30,100,.13);border-bottom:4px solid var(--green)}
html[data-theme="dark"] .today{box-shadow:none}
.today__item{display:flex;gap:14px;align-items:flex-start;padding:16px 0 14px;border-bottom:1px solid var(--hairline);width:100%;text-align:left}
.today__body{flex:1;text-align:left;display:block}
.today__item .chev{align-self:center}
.today__item:last-child{border-bottom:0;padding:14px 0 16px}
.today__label{display:block;font-weight:600;font-size:11px;letter-spacing:1.2px;color:var(--label)}
html[data-theme="dark"] .today__label{color:var(--dark-dim)}
.today__text{display:block;margin-top:5px;font-weight:500;font-size:19px;line-height:1.35;text-wrap:pretty}
.tick{
  width:30px;height:30px;border-radius:50%;flex:none;margin-top:2px;
  border:2.5px solid var(--purple);
  display:flex;align-items:center;justify-content:center;
}
html[data-theme="dark"] .tick{border-color:rgba(237,230,245,.5)}
.tick.is-on{background:var(--purple);border-color:var(--purple)}
html[data-theme="dark"] .tick.is-on{background:var(--green);border-color:var(--green)}
.tick__mark{width:11px;height:6px;border-left:2.5px solid var(--green);border-bottom:2.5px solid var(--green);transform:rotate(-45deg) translateY(-2px);display:none}
html[data-theme="dark"] .tick__mark{border-color:var(--purple-deep)}
.tick.is-on .tick__mark{display:block}

/* ---------- buttons ---------- */
.btn{
  display:block;width:100%;border-radius:14px;padding:16px;text-align:center;
  font-family:'Archivo Black','Archivo',sans-serif;font-size:18px;letter-spacing:-.3px;
}
.btn--green{background:var(--green);color:var(--purple-deep);box-shadow:0 5px 0 var(--green-shadow)}
.btn--purple{background:var(--purple);color:var(--cream);box-shadow:none}
html[data-theme="dark"] .btn--purple{background:rgba(237,230,245,.06);border:2px solid rgba(237,230,245,.35);color:var(--dark-text)}
.btn--ghost{border:2px solid rgba(59,30,100,.9);color:var(--purple);font-family:'Archivo',sans-serif;font-weight:700;font-size:12.5px;letter-spacing:1.2px;padding:14px 22px;width:auto}
html[data-theme="dark"] .btn--ghost{border-color:rgba(237,230,245,.35);color:var(--dark-text)}
.btn--sm{font-family:'Archivo',sans-serif;font-weight:700;font-size:13px;letter-spacing:1.2px;padding:15px}
.btn:active{transform:translateY(2px);box-shadow:0 3px 0 var(--green-shadow)}
.btn--purple:active,.btn--ghost:active{transform:translateY(1px)}

/* reset button rides above the nav on every tab */
.reset-dock{flex:none;padding:14px 20px 12px}
.reset-dock .btn--green{background-image:var(--chenille)}
.reset-dock__sub{font-weight:600;font-size:12px;color:var(--green-ink);margin-top:4px;font-family:'Archivo',sans-serif;letter-spacing:0}

/* ---------- filters ---------- */
.filters{display:flex;gap:9px;padding:16px 20px 0;flex:none;overflow-x:auto;scrollbar-width:none}
.filters::-webkit-scrollbar{display:none}
.pill{
  border:2px solid rgba(36,23,48,.28);border-radius:20px;padding:10px 17px;
  font-weight:600;font-size:12.5px;color:var(--body);white-space:nowrap;
}
html[data-theme="dark"] .pill{border-color:rgba(237,230,245,.3);color:var(--dark-dim)}
.pill.is-on{background:var(--purple);border-color:var(--purple);color:var(--cream);font-weight:700;letter-spacing:.6px}
html[data-theme="dark"] .pill.is-on{background:var(--green);border-color:var(--green);color:var(--purple-deep)}

/* ---------- offline / status strip ---------- */
.strip{display:flex;align-items:center;gap:10px;background:var(--surface-alt);border-radius:12px;padding:13px 15px}
.strip__dot{width:9px;height:9px;border-radius:50%;background:var(--h);flex:none}
.strip__text{font-weight:500;font-size:13.5px;line-height:1.45;color:var(--body)}
html[data-theme="dark"] .strip__text{color:var(--dark-body)}

/* ---------- announcements ---------- */
.post{background:var(--surface);border-radius:14px;padding:16px;box-shadow:var(--lift);border-left:5px solid var(--purple-mid)}
.post--event{border-left-color:var(--green)}
.post__head{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.post__kind{font-weight:700;font-size:10.5px;letter-spacing:1.6px;color:var(--purple-mid)}
.post--event .post__kind{color:var(--h)}
html[data-theme="dark"] .post--event .post__kind{color:var(--green)}
.post__when{font-weight:500;font-size:12px;color:var(--text-faint);white-space:nowrap;flex:none}
.post__title{margin-top:8px;font-weight:600;font-size:18px;line-height:1.35}
.post__body{margin-top:6px;font-weight:500;font-size:15px;line-height:1.5;color:var(--text-dim)}

/* ---------- empty state ---------- */
.empty__glyph{
  width:76px;height:76px;border-radius:20px;
  border:2px dashed rgba(59,30,100,.35);
  display:flex;align-items:center;justify-content:center;
}
html[data-theme="dark"] .empty__glyph{border-color:rgba(237,230,245,.3)}
.empty__glyph i{width:26px;height:3px;background:rgba(59,30,100,.35);border-radius:2px;display:block}
html[data-theme="dark"] .empty__glyph i{background:rgba(237,230,245,.3)}
.empty__title{font-weight:600;font-size:21px;line-height:1.35}
.empty__body{margin-top:10px;font-weight:500;font-size:16px;line-height:1.6;color:var(--text-dim);text-wrap:pretty}

/* an arrow leaving the app, so an outside link never looks like a page here */
.out{width:13px;height:13px;flex:none;position:relative;display:block;opacity:.5}
.out i{position:absolute;inset:3px 0 0 3px;border:2px solid currentColor;border-radius:2px;display:block}
.out u{position:absolute;top:0;right:0;width:9px;height:9px;border-top:2px solid currentColor;border-right:2px solid currentColor;display:block}
a.row{text-decoration:none;color:inherit}

/* ---------- the month's 25 ---------- */
.habit{
  width:100%;background:var(--surface);border-radius:12px;padding:12px 14px;
  display:flex;gap:12px;align-items:center;box-shadow:var(--lift);text-align:left;
}
.habit .tick{width:26px;height:26px;margin-top:0;border-width:2px}
.habit .tick__mark{width:10px;height:5px;border-left-width:2px;border-bottom-width:2px}
.habit__text{flex:1;font-weight:500;font-size:15.5px;line-height:1.35;text-wrap:pretty}
.habit.is-done .habit__text{opacity:.5;text-decoration:line-through;text-decoration-thickness:2px}
.habit.is-done .mark{opacity:.5}

/* the progress bar, and the fifteen mark on it */
.bar{
  position:relative;margin-top:7px;height:7px;border-radius:4px;
  background:rgba(255,255,255,.16);overflow:visible;
}
.bar__fill{height:100%;background:var(--green);border-radius:4px;transition:width .4s ease}
.bar--hdr{margin-top:6px}
.bar__mark{
  position:absolute;top:-3px;width:2px;height:13px;border-radius:1px;
  background:rgba(244,239,228,.65);display:block;
}

/* ---------- content detail ---------- */
.detail__kicker{margin-top:18px;display:flex;align-items:center;gap:10px;font-weight:700;font-size:11px;letter-spacing:1.6px;color:var(--green)}
.detail__title{margin-top:12px;font-size:30px;line-height:1.2;letter-spacing:-.4px;text-wrap:pretty}
.detail__body{font-weight:500;font-size:18px;line-height:1.6;text-wrap:pretty}
.video{border-radius:13px;overflow:hidden;background:var(--dark-sheet);box-shadow:var(--lift-lg)}
.video__frame{position:relative;width:100%;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.03) 0 6px,transparent 6px 12px);border:0}
.video__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video__play{width:58px;height:58px;border-radius:50%;background:rgba(244,239,228,.95);display:flex;align-items:center;justify-content:center}
.video__play i{width:0;height:0;border-top:11px solid transparent;border-bottom:11px solid transparent;border-left:18px solid var(--purple-deep);margin-left:5px;display:block}
.video__tag{position:absolute;left:12px;bottom:11px;font-weight:700;font-size:10.5px;letter-spacing:1.4px;color:var(--cream);background:rgba(21,10,36,.75);border-radius:5px;padding:5px 8px}
.video__note{padding:12px 14px;font-weight:500;font-size:13.5px;line-height:1.45;color:var(--dark-body)}

/* ---------- settings ---------- */
.group{background:var(--surface);border-radius:14px;box-shadow:var(--lift);overflow:hidden}
.group__row{width:100%;padding:16px 17px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--hairline)}
.group__row:last-child{border-bottom:0}
.group__title{display:block;font-weight:600;font-size:16.5px}
.group__sub{display:block;margin-top:3px;font-weight:500;font-size:13.5px;color:var(--text-faint)}
.group__value{font-weight:500;font-size:14px;color:var(--text-faint)}
.toggle{width:52px;height:31px;border-radius:16px;background:rgba(36,23,48,.22);padding:3px;display:flex;flex:none;transition:background .18s ease}
html[data-theme="dark"] .toggle{background:rgba(237,230,245,.22)}
.toggle i{width:25px;height:25px;border-radius:50%;background:var(--card);display:block;transition:transform .18s ease}
.toggle.is-on{background:var(--purple);justify-content:flex-end}
html[data-theme="dark"] .toggle.is-on{background:var(--green)}
.toggle.is-on i{background:var(--cream)}
.link{margin-top:12px;font-weight:700;font-size:12.5px;letter-spacing:1.1px;color:var(--purple);text-decoration:underline}
html[data-theme="dark"] .link{color:var(--green)}
.danger{color:#8E2B4B}
html[data-theme="dark"] .danger{color:#F0A0B8}

/* ---------- tab bar ---------- */
.tabbar{
  flex:none;background:var(--purple-deep);color:var(--cream);
  padding:12px 8px calc(var(--safe-bottom) + 10px);
  display:flex;
}
html[data-theme="dark"] .tabbar{background:var(--dark-nav)}
.tab{flex:1;text-align:center;opacity:.6}
.tab i{width:20px;height:20px;border-radius:5px;border:2px solid currentColor;margin:0 auto 5px;display:block}
.tab span{font-weight:600;font-size:10px;letter-spacing:.7px}
.tab.is-on{opacity:1}
.tab.is-on i{background:var(--green);border-color:var(--green)}
.tab.is-on span{font-weight:700}

/* ---------- full-screen layers ---------- */
/* [hidden] must win: an author `display` here would otherwise beat the UA
   stylesheet and leave an invisible full-screen layer eating every click. */
[hidden]{display:none !important}
.layer{position:fixed;inset:0;z-index:40;display:flex;flex-direction:column}
.layer__inner{
  flex:1;max-width:520px;width:100%;margin:0 auto;
  display:flex;flex-direction:column;
  padding-top:var(--safe-top);padding-bottom:var(--safe-bottom);
}

/* reset — 1d breathing ring */
.reset{background:var(--dark);color:var(--dark-text)}
.reset__bar{padding:14px 24px 0;display:flex;justify-content:space-between;align-items:center}
.reset__left{font-weight:600;font-size:11px;letter-spacing:2px;opacity:.68;font-variant-numeric:tabular-nums}
.reset__done{font-weight:600;font-size:12px;letter-spacing:1.2px;opacity:.8;border:1px solid rgba(237,230,245,.4);border-radius:8px;padding:8px 13px}
.reset__stage{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:44px;padding:0 24px}
.ring{width:260px;height:260px;max-width:70vw;max-height:70vw;display:flex;align-items:center;justify-content:center;position:relative}
.ring__still,.ring__live{width:230px;height:230px;max-width:62vw;max-height:62vw;border-radius:50%;position:absolute}
.ring__still{border:1.5px solid rgba(201,162,74,.28)}
.ring__live{
  background:radial-gradient(circle,rgba(201,162,74,.22) 0%,rgba(201,162,74,.06) 70%,transparent 71%);
  border:2px solid var(--green);
  animation:brth 10s ease-in-out infinite;
}
@keyframes brth{0%,100%{transform:scale(.62);opacity:.5}45%,55%{transform:scale(1);opacity:1}}
.reset__cue{text-align:center}
.reset__phase{font-family:'Archivo Black','Archivo',sans-serif;font-size:30px;line-height:1;letter-spacing:2px}
.reset__count{margin-top:14px;font-weight:500;font-size:16px;opacity:.72}
.reset__foot{padding:0 30px 26px;text-align:center}
.reset__assure{font-weight:500;font-size:16px;line-height:1.6;opacity:.66}
.reset__opts{margin-top:18px;display:flex;justify-content:center;gap:9px;flex-wrap:wrap}
.chip{font-weight:600;font-size:11px;letter-spacing:1px;opacity:.5;border:1px solid rgba(237,230,245,.2);border-radius:20px;padding:9px 15px}
.chip.is-on{opacity:1;border-color:var(--green);color:var(--green)}

/* reset complete — 2b */
.done{background:var(--dark);color:var(--dark-text)}
.done__stage{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 34px;gap:34px}
.done__seal{width:96px;height:96px;border-radius:50%;border:2px solid var(--green);display:flex;align-items:center;justify-content:center}
.done__title{font-family:'Archivo Black','Archivo',sans-serif;font-size:30px;line-height:1.15;letter-spacing:-.3px;text-align:center}
.done__body{margin-top:16px;font-weight:500;font-size:17px;line-height:1.6;color:#CFC2DC;text-align:center;text-wrap:pretty}
.done__foot{padding:0 24px 28px;display:flex;flex-direction:column;gap:11px}
.done__second{border:2px solid rgba(237,230,245,.35);border-radius:14px;padding:16px;text-align:center;font-weight:600;font-size:13px;letter-spacing:1.2px;width:100%;display:block}

/* all twenty-five — three seconds of Ben */
.egg{background:rgba(21,10,36,.94);align-items:center;justify-content:center;padding:20px}
.egg__card{
  width:100%;max-width:420px;background:var(--purple);border-radius:24px;
  padding:24px 22px;text-align:center;color:var(--cream);
  box-shadow:0 18px 50px rgba(0,0,0,.5);
  animation:rise .3s cubic-bezier(.2,.8,.3,1);
}
.egg__kicker{font-weight:700;font-size:11px;letter-spacing:2.2px;color:var(--green)}
.egg__img{
  display:block;width:100%;height:auto;max-height:46vh;object-fit:contain;
  margin:16px 0 0;border-radius:16px;background:var(--dark-sheet);
}
.egg__caption{
  margin-top:16px;font-family:'Archivo Black','Archivo',sans-serif;
  font-size:22px;line-height:1.2;letter-spacing:-.3px;
}
.egg__slot{margin-top:20px;min-height:58px;display:flex;flex-direction:column;justify-content:center}
.egg__dots{display:flex;gap:7px;justify-content:center}
.egg__dots i{
  width:8px;height:8px;border-radius:50%;background:var(--green);display:block;
  animation:egg-pulse 1.2s ease-in-out infinite;
}
.egg__dots i:nth-child(2){animation-delay:.2s}
.egg__dots i:nth-child(3){animation-delay:.4s}
@keyframes egg-pulse{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}

/* install walkthrough — 2l */
.install{background:rgba(21,10,36,.88);justify-content:flex-end}
.sheet__later{margin-top:14px;font-weight:600;font-size:12.5px;letter-spacing:1.2px;color:#C4B4D2;width:100%;text-align:center;display:block}
/* This sheet is a light card in both themes, so it pins the purple back to its
   light value — otherwise the step numbers and the button inherit dark-theme
   colours and end up invisible on cream. */
.install__sheet{
  background:var(--card);color:var(--purple-ink);
  --purple:#3B1E64;
  border-radius:22px;margin:0 18px;padding:24px 22px;
  animation:rise .3s cubic-bezier(.2,.8,.3,1);
}
.install__sheet .btn--purple,
html[data-theme="dark"] .install__sheet .btn--purple{
  background:var(--purple);border:0;color:var(--cream);
}
.install__head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.install__title{font-family:'Archivo Black','Archivo',sans-serif;font-size:25px;line-height:1.15;letter-spacing:-.4px;max-width:250px}
.install__x{width:32px;height:32px;border-radius:50%;background:var(--card-alt);display:flex;align-items:center;justify-content:center;flex:none;font-weight:600;font-size:15px;color:var(--body)}
.install__lede{margin-top:12px;font-weight:500;font-size:15.5px;line-height:1.55;color:var(--body);text-wrap:pretty}
.steps{margin-top:20px;display:flex;flex-direction:column;gap:16px}
.step{display:flex;gap:14px;align-items:center}
.step__n{width:38px;height:38px;border-radius:10px;background:var(--purple);color:var(--cream);display:flex;align-items:center;justify-content:center;font-family:'Archivo Black','Archivo',sans-serif;font-size:17px;flex:none}
.step__t{flex:1;font-weight:500;font-size:16.5px;line-height:1.4}
.step__i{width:38px;height:38px;border:2px solid var(--purple);border-radius:9px;display:flex;align-items:center;justify-content:center;flex:none;position:relative}
.ico-share i{width:2px;height:15px;background:var(--purple);display:block}
.ico-share u{position:absolute;top:8px;width:10px;height:10px;border-top:2px solid var(--purple);border-left:2px solid var(--purple);transform:rotate(45deg);display:block}
.ico-add i{width:15px;height:2px;background:var(--purple);position:absolute;display:block}
.ico-add u{width:2px;height:15px;background:var(--purple);display:block}
.step__i--app{border:0;background:var(--green);font-family:'Archivo Black','Archivo',sans-serif;font-size:11px;color:var(--purple-deep)}
.install__arrow{height:22px;display:flex;justify-content:center;align-items:flex-start;padding-top:6px}
.install__arrow i{width:0;height:0;border-left:11px solid transparent;border-right:11px solid transparent;border-top:13px solid var(--card);display:block}
.install__where{text-align:center;padding-bottom:12px;font-weight:600;font-size:12px;letter-spacing:1.2px;color:var(--green)}

/* ---------- toast ---------- */
.toast{
  position:fixed;left:50%;bottom:calc(var(--safe-bottom) + 92px);transform:translateX(-50%);
  background:var(--purple-deep);color:var(--cream);
  padding:12px 18px;border-radius:12px;font-weight:600;font-size:13.5px;
  z-index:60;max-width:calc(100% - 40px);text-align:center;
  animation:rise .2s ease;
}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}