/* =====================================================================
   13 WEEK EVOLUTION — DESIGN SYSTEM  (theme.css, Oct 2026)

   Loaded LAST (after app.css and the tracker's inline <style>), so it is
   the one place that decides how the app looks. Structure and behaviour
   stay where they were (index.html, app.css, app.js); this file is skin:
   tokens, type, spacing, buttons, cards, inputs, and the per-screen
   treatment built from them.

   Rules of the system
   - One brand accent: 13WE gold. Gold = the primary action and "done".
   - Each section has its own accent (--sec), used only for small things:
     icons, the active tab, section labels, progress bars, unread marks.
     Never a whole screen.  Today gold · Track blue · Community coral ·
     Classroom purple · Inbox pink-red.  body[data-tab] sets it.
   - Display type (Barlow Condensed) for titles, the current habit, big
     numbers and buttons. System sans for everything you read.
   - One primary (gold) button per screen area. Everything else is
     secondary (dark) or tertiary (text).
   - Colour never carries meaning alone: done has a ✓, unread has a dot
     AND bold, errors have words.
   ===================================================================== */

@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:700;font-display:swap;
  src:url(fonts/barlow-condensed-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:800;font-display:swap;
  src:url(fonts/barlow-condensed-latin-800-normal.woff2) format("woff2")}

:root{
  /* ---- backgrounds ---- */
  --bg:#0C1015;            /* app background */
  --bg-raised:#11171E;     /* top bar, nav, sheets */
  --card:#171E26;          /* cards */
  --card-hi:#1F2832;       /* card hover / active / nested */
  --input:#0F141A;         /* text fields */
  --line:#263039;          /* borders */
  --line-hi:#36424E;       /* stronger borders, focus off */

  /* ---- brand ---- */
  --gold:#D3A43C;
  --gold-hi:#E8C062;       /* hover / active */
  --gold-lo:#A47E28;       /* pressed */
  --gold-soft:rgba(211,164,60,.12);
  --gold-line:rgba(211,164,60,.42);
  --on-gold:#12100A;

  /* ---- text ---- */
  --t1:#F2F4F6;            /* primary */
  --t2:#C4CCD4;            /* secondary */
  --t3:#8F9BA7;            /* muted (5.4:1 on --card) */
  --t4:#5C6874;            /* disabled */
  --t-inv:#0E1116;

  /* ---- status ---- */
  --ok:#5CBB86;  --ok-soft:rgba(92,187,134,.13);
  --warn:#E6AE48; --warn-soft:rgba(230,174,72,.13);
  --bad:#F08E7D;  --bad-soft:rgba(240,142,125,.12);
  --info:#6DAAF2; --info-soft:rgba(109,170,242,.13);

  /* ---- sections ---- */
  --c-today:#D3A43C;
  --c-track:#58A6F5;
  --c-community:#F5895F;
  --c-classroom:#A98BF5;
  --c-inbox:#F2648C;
  --sec:var(--c-today);

  /* ---- type ---- */
  --f-display:"Barlow Condensed","Arial Narrow",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --f-body:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  --fs-page:32px;      /* page title */
  --fs-section:22px;   /* section title */
  --fs-card:17px;      /* card title */
  --fs-body:15px;
  --fs-sub:13.5px;     /* secondary text */
  --fs-meta:12px;      /* timestamps, counts */
  --fs-label:11px;     /* small uppercase labels */
  --fs-btn:16px;       /* buttons (display face) */
  --fs-nav:10.5px;
  --fs-metric:44px;    /* big numbers */

  /* ---- spacing (4-pt) ---- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s7:32px; --s8:40px;
  --page-x:16px;

  /* ---- shape + depth ---- */
  --r-sm:10px; --r-md:14px; --r-lg:20px; --r-pill:999px;
  --shadow-1:0 1px 0 rgba(255,255,255,.03) inset, 0 8px 24px rgba(0,0,0,.28);
  --shadow-2:0 18px 50px rgba(0,0,0,.5);
  --ease:cubic-bezier(.2,.7,.2,1);

  /* ---- the older names the tracker + app.css use, mapped onto the system ---- */
  --navy:var(--bg); --navy2:var(--card); --navy3:var(--card-hi);
  --gold-l:var(--gold-hi); --gold-d:var(--gold-lo);
  --ink:var(--t1); --mut:var(--t3);
}
body[data-tab="today"]{--sec:var(--c-today)}
body[data-tab="track"]{--sec:var(--c-track)}
body[data-tab="community"]{--sec:var(--c-community)}
body[data-tab="classroom"]{--sec:var(--c-classroom)}
body[data-tab="inbox"]{--sec:var(--c-inbox)}
@media (min-width:768px){ :root{--page-x:24px} }

/* =====================================================================
   BASE
   ===================================================================== */
html,body{background:var(--bg)}
body,#z,.a-nav,.a-sheet,.a-zoom,.a-mebtn,.toast,.a-tour,#authGate,.setup,.sheet,button,input,textarea,select{font-family:var(--f-body)}
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
#z{background:var(--bg)}
.wrap{padding:0 var(--page-x)}
::selection{background:rgba(211,164,60,.35);color:var(--t1)}
/* keyboard focus: always visible, never on a mouse click */
:focus{outline:none}
:focus-visible{outline:2px solid var(--gold-hi);outline-offset:2px;border-radius:6px}
.a-nav button:focus-visible{outline-offset:-2px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ---- type roles ---- */
.a-h h2,.a-ltitle,.a-thello h2,.authCard h1,.fhero h2,.a-helph{font-family:var(--f-display);font-weight:800;letter-spacing:.005em}
.a-h{margin:var(--s2) 0 var(--s4);align-items:flex-end}
.a-h h2{font-size:var(--fs-page);line-height:1;letter-spacing:.01em}
.a-h h2 small{font-family:var(--f-body);font-size:var(--fs-meta);font-weight:600;letter-spacing:.01em;color:var(--t3);margin-top:var(--s2);line-height:1.35}
.a-h h2 small::before{content:"";display:inline-block;width:8px;height:8px;border-radius:2px;background:var(--sec);margin-right:7px;vertical-align:0}
.a-field,.a-tk,.a-tcardh b,.grouphd,label.f,.authCard label,.q h4,.card h4{font-size:var(--fs-label)!important;letter-spacing:.1em!important;font-weight:800}
.a-note{font-size:var(--fs-meta);color:var(--t3)}

/* =====================================================================
   BUTTONS — primary (gold) · secondary (dark) · tertiary (text) · danger
   ===================================================================== */
.a-btn,.a-tcta,.btn,a.klink,.a-postbtn,.a-tbtn,.authCard #authSubmit,.install button{
  font-family:var(--f-display)!important;font-weight:700!important;letter-spacing:.06em!important;text-transform:uppercase;
  transition:background-color .15s var(--ease),border-color .15s var(--ease),color .15s var(--ease),transform .08s var(--ease),filter .15s}
.a-btn,.a-tcta,.btn{min-height:48px;border-radius:var(--r-md);font-size:var(--fs-btn)!important;line-height:1.1!important}
.a-btn{padding:12px 16px}
.a-btn:not(.ghost):not(.danger):not(.ok),.a-tcta:not(.ghost):not(.done),.btn:not(.ghost),a.klink:not(.ghost){
  background:var(--gold);color:var(--on-gold);border:0;box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 6px 18px rgba(211,164,60,.18)}
.a-btn:not(.ghost):not(.danger):not(.ok):hover,.a-tcta:not(.ghost):not(.done):hover,.btn:not(.ghost):hover{background:var(--gold-hi);filter:none}
.a-btn:active,.a-tcta:active,.btn:active,.a-tbtn:active,.a-ib:active,a.klink:active{transform:scale(.98)}
.a-btn:not(.ghost):not(.danger):not(.ok):active,.a-tcta:not(.ghost):not(.done):active,.btn:not(.ghost):active{background:var(--gold-lo)}
/* secondary */
.a-btn.ghost,.a-tcta.ghost,.btn.ghost,a.klink.ghost{background:var(--card-hi);border:1px solid var(--line-hi);color:var(--t1);box-shadow:none}
.a-btn.ghost:hover,.a-tcta.ghost:hover,.btn.ghost:hover{border-color:var(--gold-line);background:#243040}
.btn.ghost,a.klink.ghost{font-size:14px!important;min-height:44px}
/* danger */
.a-btn.danger{background:var(--bad-soft);border:1px solid rgba(240,142,125,.55);color:var(--bad)}
.a-btn.danger:hover{background:rgba(240,142,125,.2)}
/* states */
.a-btn:disabled,.a-tcta:disabled,.btn:disabled,.a-tbtn:disabled,.a-ib:disabled{opacity:.45;cursor:default;transform:none;box-shadow:none}
.a-btn.is-loading,.a-tcta.is-loading,.a-tbtn.is-loading{color:transparent!important;position:relative;pointer-events:none}
.a-btn.is-loading::after,.a-tcta.is-loading::after,.a-tbtn.is-loading::after{content:"";position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;
  border-radius:50%;border:2px solid var(--on-gold);border-right-color:transparent;animation:a-spin .7s linear infinite}
@keyframes a-spin{to{transform:rotate(360deg)}}
.a-btn svg,.a-tcta svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex:none}
/* tertiary: text actions */
.a-tlink,.a-thelp,.a-seemore{color:var(--t3);text-decoration-color:rgba(143,155,167,.5)}
.a-tlink:hover,.a-thelp:hover{color:var(--gold-hi)}
/* small secondary actions inside rows */
.a-tbtn{min-height:40px;min-width:68px;border-radius:var(--r-sm);font-size:14px!important;padding:0 14px;
  background:var(--card-hi);border:1px solid var(--line-hi);color:var(--t1)}
.a-tbtn:hover{border-color:var(--gold-line)}
/* in a list, the gold row button is secondary-gold: the big CTA is the only solid one */
.a-tbtn.gold{background:var(--gold-soft);border:1px solid var(--gold-line);color:var(--gold-hi)}
.a-tbtn.gold:hover{background:rgba(211,164,60,.2)}
/* icon buttons */
.a-ib{height:40px;min-width:40px;border-radius:var(--r-sm);background:var(--card);border:1px solid var(--line);color:var(--t1);
  font-family:var(--f-display);font-weight:700;font-size:13px;letter-spacing:.06em;transition:border-color .15s,background-color .15s}
.a-ib:hover{border-color:var(--line-hi);background:var(--card-hi)}
.a-ib.gold{background:var(--gold);border-color:var(--gold);color:var(--on-gold)}
.a-ib svg{width:18px;height:18px}

/* =====================================================================
   CARDS — one family. Primary (hero) > standard > quiet.
   ===================================================================== */
.a-tcard,.a-post,.a-inb,.a-tierbox,.a-plan,.a-tshop,.a-mstats div,.brief,.mom,.skwrap,.hab,.chstrip,.chopt,.gwrap,.score,.tipbox,.okbox,.lockbox,.eblk,.opt,.stopt,.a-mod,.a-lmod,.a-course,.a-res,.a-tlesson,.a-compose,details.hlp{
  border-radius:var(--r-md);border-color:var(--line);background:var(--card)}
.a-tcard,.a-post,.a-inb{padding:var(--s4);margin:0 0 var(--s3);box-shadow:var(--shadow-1)}
.a-tcardh{align-items:center;margin-bottom:var(--s2)}
.a-tcardh b{color:var(--t2)}
.a-tcardh span{font-size:var(--fs-meta);letter-spacing:.04em;font-weight:700;color:var(--t3)}
.a-tkv{font-size:var(--fs-sub);border-top-color:var(--line)}
.a-tkv span{color:var(--t3)}

/* =====================================================================
   INPUTS + COMPOSERS
   ===================================================================== */
.a-in,textarea,input.t,.authCard input,input.mx,.wsin,.eblk input,.a-rte,.a-mem select,.a-mcoach select{
  background:var(--input);border:1px solid var(--line-hi);border-radius:var(--r-sm);color:var(--t1);
  transition:border-color .15s,box-shadow .15s}
.a-in,textarea,input.t,.authCard input{padding:12px 14px;font-size:16px;line-height:1.45}
.a-in::placeholder,textarea::placeholder,input::placeholder{color:#76828E;opacity:1}
.a-in:focus,textarea:focus,input.t:focus,.authCard input:focus,input.mx:focus,.wsin:focus,.a-rte:focus,.eblk input:focus{
  outline:0;border-color:var(--gold);box-shadow:0 0 0 3px rgba(211,164,60,.18)}
input[type=search]::-webkit-search-cancel-button{filter:invert(.7)}

/* =====================================================================
   APP SHELL — top bar, avatar, help, bottom navigation
   ===================================================================== */
.top{background:rgba(12,16,21,.88);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border-bottom:1px solid rgba(255,255,255,.05)}
.top .wrap{height:60px}
.brand{font-family:var(--f-display);font-weight:800;font-size:16px!important;letter-spacing:.06em;line-height:1}
.progchip{display:flex;width:max-content;font-family:var(--f-display);font-weight:700;font-size:11px;letter-spacing:.08em;padding:3px 8px;border-radius:var(--r-pill);
  border-color:var(--gold-line);background:var(--gold-soft);color:var(--gold-hi)}
.shopbtn{height:36px;border-radius:var(--r-pill);border-color:var(--line-hi);background:transparent;color:var(--t2);
  font-family:var(--f-display);font-weight:700;font-size:13px;letter-spacing:.08em}
.shopbtn:hover{background:var(--card-hi);color:var(--gold-hi);border-color:var(--gold-line)}
.a-mebtn,.a-helpbtn{width:36px;height:36px;border-color:var(--line-hi);background:var(--card)}
.a-mebtn .a-ini{font-family:var(--f-display);font-size:15px}
.a-helpbtn{color:var(--t2);font-family:var(--f-display)!important;font-weight:800;font-size:17px!important}
.a-helpbtn:hover,.a-mebtn:hover{border-color:var(--gold-line);color:var(--gold-hi)}
@media (max-width:420px){ .a-helpbtn,.a-mebtn{width:34px;height:34px} }
.pmenu{background:var(--bg-raised);border-color:var(--line-hi);border-radius:var(--r-md);box-shadow:var(--shadow-2)}
.pmenu button:hover{background:var(--card-hi)}
.pmenu button b{font-family:var(--f-display);font-size:17px;letter-spacing:.04em}

/* bottom navigation: five destinations, the section colour marks where you are */
.a-nav{background:rgba(14,18,24,.94);border-top:1px solid rgba(255,255,255,.06);padding:6px 8px calc(8px + env(safe-area-inset-bottom));
  -webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2)}
.a-nav .in{gap:2px}
.a-nav button{min-height:54px;gap:4px;padding:6px 2px 4px;color:var(--t3);transition:color .15s}
.a-nav button svg{width:22px;height:22px;stroke-width:1.9;padding:0;box-sizing:content-box}
.a-nav button span{font-family:var(--f-display);font-weight:700;font-size:12px;letter-spacing:.07em}
.a-nav button:hover{color:var(--t1)}
#aNav_today{--nc:var(--c-today)} #aNav_track{--nc:var(--c-track)} #aNav_community{--nc:var(--c-community)}
#aNav_classroom{--nc:var(--c-classroom)} #aNav_inbox{--nc:var(--c-inbox)}
.a-nav button.on{color:var(--t1)}
.a-nav button.on svg{color:var(--nc)}
.a-nav button.on::after{content:"";position:absolute;top:4px;left:50%;width:46px;height:30px;margin-left:-23px;border-radius:var(--r-pill);
  background:color-mix(in srgb,var(--nc) 17%,transparent);z-index:-1}
.a-nav button.on::before{top:-7px;left:34%;right:34%;height:3px;border-radius:0 0 3px 3px;background:var(--nc)}
.a-nav button{z-index:0}
.a-badge{top:1px;left:calc(50% + 7px);min-width:19px;height:19px;line-height:19px;border-radius:10px;font-size:11px;font-weight:800;
  background:var(--c-inbox);color:#1A0710;box-shadow:0 0 0 2px var(--bg-raised)}
@media (max-width:380px){ .a-nav button span{font-size:11px;letter-spacing:.03em} }
@media (max-width:340px){ .a-nav button span{font-size:10.5px;letter-spacing:0} .a-nav{padding-left:2px;padding-right:2px} }

body.a-on #z{padding-bottom:calc(92px + env(safe-area-inset-bottom))}
body.a-on .toast{bottom:calc(92px + env(safe-area-inset-bottom))}

/* ---- tablet: centred, a little more air ---- */
@media (min-width:768px){
  .a-nav .in{max-width:620px}
  #appView{padding-top:var(--s5)}
}
/* ---- desktop: navigation becomes a left rail, content keeps a reading width ---- */
@media (min-width:1024px){
  body.a-on #z{padding-left:232px;padding-bottom:48px}
  body.a-on .a-nav{top:0;bottom:0;right:auto;width:232px;padding:18px 14px;border-top:0;border-right:1px solid rgba(255,255,255,.06);background:var(--bg-raised)}
  body.a-on .a-nav::before{content:"";display:block;height:58px}   /* lines the rail up under the top bar */
  body.a-on .a-nav .in{flex-direction:column;max-width:none;gap:4px}
  body.a-on .a-nav button{flex:none;flex-direction:row;justify-content:flex-start;gap:14px;min-height:48px;padding:0 14px;border-radius:var(--r-sm)}
  body.a-on .a-nav button span{font-size:16px;letter-spacing:.06em}
  body.a-on .a-nav button:hover{background:var(--card)}
  body.a-on .a-nav button.on{background:color-mix(in srgb,var(--nc) 13%,transparent)}
  body.a-on .a-nav button.on::after{display:none}
  body.a-on .a-nav button.on::before{top:10px;bottom:10px;left:0;right:auto;width:3px;height:auto;border-radius:0 3px 3px 0}
  body.a-on .a-badge{position:static;margin-left:auto}
  body.a-on .toast{bottom:28px;left:calc(50% + 116px)}
  body.a-on .localNote{bottom:0;left:232px}
  body.a-on .a-lbar{left:232px;bottom:0}
  body.a-lbaron.a-on #z{padding-bottom:110px}
  .a-panel{left:232px}
  .wrap{max-width:780px}
}

/* =====================================================================
   PAGE HEADERS — each section's title carries its accent
   ===================================================================== */
.a-h .a-ib{height:40px}

/* =====================================================================
   TODAY — the flagship
   ===================================================================== */
.a-thello{margin:var(--s2) 0 var(--s4)}
.a-thello small{font-size:var(--fs-meta);font-weight:600;letter-spacing:.02em;color:var(--t3)}
.a-thello h2{font-size:34px;line-height:1;margin-top:var(--s2)}
.a-thello p{font-size:var(--fs-sub);color:var(--t2);margin-top:var(--s2)}
.a-tstage{font-family:var(--f-display);font-weight:700;font-size:13px;letter-spacing:.07em;padding:5px 12px;border-radius:var(--r-pill);
  border-color:var(--gold-line);background:var(--gold-soft);color:var(--gold-hi)}
.a-tstage.s-turn,.a-tstage.s-new{background:var(--gold);color:var(--on-gold);border-color:var(--gold)}
.a-tstage.s-practice{border-color:rgba(230,174,72,.5);background:var(--warn-soft);color:var(--warn)}
.a-tstage.s-progress{border-color:rgba(92,187,134,.5);background:var(--ok-soft);color:var(--ok)}

/* the hero: this week's habit, on the brand image */
.a-hero{position:relative;overflow:hidden;isolation:isolate;border:1px solid var(--gold-line);border-radius:var(--r-lg);
  padding:0;margin:0 0 var(--s3);min-height:248px;display:flex;
  background:
    linear-gradient(90deg,rgba(13,17,22,.97) 0%,rgba(13,17,22,.9) 46%,rgba(13,17,22,.45) 78%,rgba(13,17,22,.25) 100%),
    linear-gradient(0deg,rgba(13,17,22,.85) 0%,rgba(13,17,22,0) 45%),
    var(--hero-img, url(img/hero.jpg)) var(--hero-focal, right 28%) / auto 125% no-repeat,
    #0d1116;
  box-shadow:0 0 0 1px rgba(255,255,255,.02) inset,0 18px 44px rgba(0,0,0,.42)}
.a-hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 70% at 0% 0%,rgba(211,164,60,.16),rgba(211,164,60,0) 55%)}
.a-hero-in{position:relative;flex:1;min-width:0;padding:var(--s5) var(--s5) var(--s4);display:flex;flex-direction:column}
.a-hero .a-tk{color:var(--gold-hi);font-weight:800}
.a-hero .a-thab{display:block;border-top:0;padding:var(--s2) 0 0}
.a-hero .a-thab > .a-tk{display:none}   /* the kicker above already says it */
.a-hero .a-thab b{display:block;font-family:var(--f-display);font-weight:800;font-size:clamp(42px,13vw,58px);line-height:.92;
  letter-spacing:.005em;text-transform:uppercase;color:var(--t1);text-shadow:0 2px 18px rgba(0,0,0,.55);overflow-wrap:anywhere;max-width:92%}
.a-thabrow{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s3)}
.a-hero .a-tpill{display:inline-flex;align-items:center;gap:5px;font-family:var(--f-display);font-weight:700;font-size:14px;letter-spacing:.05em;
  padding:5px 11px;border-radius:var(--r-pill);background:rgba(13,17,22,.7);border:1px solid var(--line-hi);color:var(--t1)}
.a-hero .a-tpill.met{border-color:rgba(92,187,134,.6);color:var(--ok)}
.a-hero .a-tpill svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:3}
.a-tdots{margin-left:0;gap:5px}
.a-tdots i{width:11px;height:11px;border-color:rgba(255,255,255,.22);background:rgba(13,17,22,.6)}
.a-tdots i.on{background:var(--gold);border-color:var(--gold)}
.a-tdots i.now{box-shadow:0 0 0 2px var(--bg),0 0 0 3.5px var(--gold-hi)}
.a-hero h3{font-family:var(--f-body);font-size:var(--fs-sub);font-weight:600;line-height:1.45;color:var(--t2);margin:var(--s3) 0 0;max-width:30ch}
.a-hero.lead-title h3{font-family:var(--f-display);font-size:clamp(30px,8.5vw,40px);font-weight:800;line-height:1;color:var(--t1);text-transform:none;max-width:16ch;margin-top:var(--s2)}
.a-hero .a-tcarry{font-size:var(--fs-meta);color:var(--t3);margin:var(--s2) 0 0}
.a-hero .a-tnote{margin:var(--s3) 0 0;background:rgba(211,164,60,.1);color:var(--t1);max-width:34ch}
.a-hero .a-tbig{font-size:var(--fs-body);color:var(--t1);margin:var(--s3) 0 0;max-width:34ch}
.a-hero .a-tstat{padding:var(--s2) 0 0}
.a-hero .a-tstat b{font-family:var(--f-display);font-size:64px;font-weight:800;color:var(--gold-hi)}
.a-hero .a-tstat span{color:var(--t2)}
.a-hero-act{margin-top:auto;padding-top:var(--s4);max-width:420px}
.a-hero-act .a-tlink{margin-top:var(--s1)}
.a-twhy{border-top:0;margin:0 0 var(--s3);padding:var(--s3) var(--s4)}
.a-twhy .a-tcardh{margin-bottom:var(--s1)}
.a-twhy .a-tcardh b{font-family:var(--f-body);font-size:var(--fs-meta)!important;letter-spacing:.06em!important;color:var(--gold-hi);text-transform:uppercase}
.a-twhy p{font-size:var(--fs-sub);color:var(--t2);line-height:1.5;margin:0}
@media (min-width:600px){
  /* wider cards: the photo is narrower than the card, so it lives in its own
     layer and fades in from the left instead of starting on a hard edge */
  .a-hero{min-height:280px;background:linear-gradient(90deg,rgba(13,17,22,.6) 0%,rgba(13,17,22,0) 60%),#0d1116}
  .a-hero::before{content:"";position:absolute;z-index:-1;top:0;right:-8px;bottom:0;width:min(60%,460px);pointer-events:none;
    background:linear-gradient(0deg,rgba(13,17,22,.8) 0%,rgba(13,17,22,0) 45%),var(--hero-img, url(img/hero.jpg)) var(--hero-focal, center 14%) / cover no-repeat;
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 50%);mask-image:linear-gradient(90deg,transparent 0%,#000 50%);opacity:.92}
}

/* completion replaces the hero when today is done */
.a-tcomplete{border-radius:var(--r-lg);padding:var(--s5);border-color:rgba(92,187,134,.5);
  background:radial-gradient(120% 80% at 0% 0%,rgba(92,187,134,.16),rgba(92,187,134,0) 60%),var(--card)}
.a-tcomplete h3{font-family:var(--f-display);font-size:30px;font-weight:800;line-height:1.02;margin:var(--s2) 0 var(--s3)}

/* today's priorities: a checklist, one gold action */
.a-tprio{border-color:var(--line);padding:var(--s4) var(--s4) var(--s2)}
.a-tprio .a-tcardh b{color:var(--t1);font-family:var(--f-display);font-size:19px!important;letter-spacing:.03em!important;text-transform:uppercase}
.a-tprio .a-tcardh span{font-family:var(--f-display);font-size:15px;letter-spacing:.04em;color:var(--t2)}
.a-tbar{height:6px;background:var(--bg);margin:0 0 var(--s2)}
.a-tbar i{background:linear-gradient(90deg,var(--gold-lo),var(--gold-hi))}
.a-tpr{border-top-color:var(--line)}
.a-trow{padding:var(--s3) 0;gap:var(--s3)}
.a-trow .n b{font-size:15.5px;font-weight:700;color:var(--t1)}
.a-trow .n small{font-size:var(--fs-meta);color:var(--t3);line-height:1.4}
.a-tbox{width:32px;height:32px;border:2px solid var(--line-hi);background:var(--bg);transition:background-color .15s,border-color .15s,transform .1s}
.a-tbox:hover{border-color:var(--gold)}
.a-trow.on .a-tbox,.a-tpr.on .a-tbox{background:var(--gold);border-color:var(--gold)}
.a-trow.on .n b,.a-tpr.on .a-trow .n b{color:var(--t3);text-decoration-color:rgba(143,155,167,.45)}
.a-tpr.now{margin:var(--s1) calc(var(--s2) * -1) var(--s1);padding:2px var(--s2) var(--s3);border:1px solid var(--gold-line);border-radius:var(--r-md);
  background:linear-gradient(180deg,rgba(211,164,60,.09),rgba(211,164,60,.03))}
.a-tnow{padding-left:44px}
.a-tmeta em{font-size:var(--fs-meta);font-weight:700;letter-spacing:.02em;color:var(--t2)}
.a-tmeta em.met{color:var(--ok)}
.a-tmeta em.up{font-family:var(--f-display);font-size:12px;letter-spacing:.08em;padding:2px 7px;border-radius:5px}
.a-tdone{font-family:var(--f-display);font-size:13px;letter-spacing:.08em;color:var(--t3)}
.a-tdone::before{content:"\2713  ";color:var(--ok)}
.a-tchip{background:var(--bg);border-color:var(--line-hi);font-size:13px}
.a-tstack{padding-left:44px}

/* the other Today cards are quieter */
.a-tlearn .a-tlt{font-size:var(--fs-card)}
.a-tlearn small{font-size:var(--fs-meta);letter-spacing:.04em;font-weight:700}
.a-tlearn{--sec:var(--c-classroom)}
.a-tlearn > .a-tk{color:var(--c-classroom)}
.a-tcoachc > .a-tcardh b{color:var(--c-inbox)}
.a-tcoachc .a-tcardh span.new{background:var(--c-inbox);color:#1A0710;font-family:var(--f-display);font-size:13px;letter-spacing:.06em;border-radius:5px}
.a-tweek b,.a-tnext .a-tkv b{color:var(--t1)}
.a-tnext > .a-tk,.a-tweek > .a-tk{color:var(--t2)}
.a-tci{border-color:var(--gold-line)}
.a-tseg button{min-height:48px;border-radius:var(--r-sm);background:var(--input);border-color:var(--line-hi);font-weight:700}
.a-tseg button.on{background:var(--gold);color:var(--on-gold);border-color:var(--gold)}
.a-treset{border-radius:var(--r-lg);padding:var(--s5);background:radial-gradient(120% 80% at 0% 0%,rgba(240,142,125,.14),rgba(240,142,125,0) 60%),var(--card);border-color:rgba(240,142,125,.5)}
.a-treset h3{font-family:var(--f-display);font-size:28px;line-height:1.02}
.a-tresetlink{border-radius:var(--r-md);border-color:var(--line-hi);background:transparent}
.a-tresetlink .go{font-family:var(--f-display);font-size:14px;letter-spacing:.08em}
.a-tshop{background:transparent;border-style:dashed;box-shadow:none}
.a-tshop .go{font-family:var(--f-display);font-size:14px;letter-spacing:.08em}
.a-tcoach{border-radius:var(--r-md);background:var(--card);border-color:var(--gold-line);padding:var(--s2) var(--s3)}
.a-tcoach button{border-color:var(--line-hi);background:var(--bg);font-size:13px;min-height:38px}
.a-tcoach button b{font-family:var(--f-display);font-size:16px;color:var(--gold-hi)}
.a-tring b{font-family:var(--f-display);font-size:68px;font-weight:800}
.a-tlesson{border-radius:var(--r-md);border-color:var(--line);--sec:var(--c-classroom)}
.a-tlesson .k{color:var(--c-classroom);font-size:var(--fs-label);letter-spacing:.1em}
.a-tlesson .go{color:var(--c-classroom)}
@media (max-width:360px){
  .a-thello h2{font-size:29px}
  .a-hero-in{padding:var(--s4)}
}

/* =====================================================================
   TRACK — the member's own record (the tracker, re-skinned)
   ===================================================================== */
.wk{padding:var(--s5) 0 var(--s1)}
.wk .lbl b{font-family:var(--f-display);font-size:30px;font-weight:800;letter-spacing:.04em;line-height:1}
.wk .lbl span{font-size:var(--fs-label);letter-spacing:.12em;color:var(--c-track);margin-top:5px}
.wk button{width:40px;height:40px;border-radius:var(--r-sm);background:var(--card);border-color:var(--line)}
.tabs,.fmt,.a-rooms{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:4px}
.tabs button,.fmt button,.a-rooms button{min-height:42px;border-radius:var(--r-sm);font-family:var(--f-display);font-weight:700;
  font-size:15px!important;letter-spacing:.06em;color:var(--t3);transition:background-color .15s,color .15s}
.tabs button.on,.fmt button.on{background:var(--card-hi);color:var(--t1);box-shadow:inset 0 -2px 0 var(--c-track)}
.days button{min-height:46px;border-radius:var(--r-sm);background:var(--card);border-color:var(--line);font-family:var(--f-display);font-size:16px;color:var(--t2)}
.days button em{font-family:var(--f-body);font-size:10px;letter-spacing:.02em}
.days button.sel{background:var(--c-track);border-color:var(--c-track);color:#06121F}
.days button.now:after{background:var(--c-track);width:4px;height:4px}
.days button.sel.now:after{background:#06121F}
.backdate{color:var(--c-track);font-size:var(--fs-meta)}
.dayline b{font-family:var(--f-display);font-size:17px;letter-spacing:.06em;color:var(--t1)}
.dayline span{font-size:var(--fs-meta);color:var(--t3)}
.bar{height:6px;background:var(--card-hi)}
.bar div{background:var(--c-track)}
.barlbl{font-size:var(--fs-meta)}
.grouphd{color:var(--c-track)}
.grouphd span{font-size:var(--fs-meta);letter-spacing:0;text-transform:none;font-weight:500;color:var(--t3)}
.hab{padding:var(--s3) var(--s4);border-radius:var(--r-md);transition:border-color .15s,background-color .15s,transform .08s}
.hab:hover{border-color:var(--line-hi)}
.hab.on{border-color:var(--gold-line);background:linear-gradient(180deg,rgba(211,164,60,.10),rgba(211,164,60,.04))}
.box,.gbox,.dot{border-color:var(--line-hi);border-radius:8px}
.hab .nm b{font-size:16px}
.hab .nm .amt{color:var(--gold-hi);font-size:var(--fs-meta)}
.hab .nm .det{font-size:var(--fs-meta);color:var(--t3);line-height:1.45}
.tag{font-family:var(--f-display);font-size:11px;letter-spacing:.06em;padding:2px 6px;border-radius:5px}
.pill{font-family:var(--f-display);font-size:13px;letter-spacing:.04em;border-radius:6px;background:var(--card-hi);color:var(--t2)}
.dtick{min-height:38px;border-radius:8px;font-family:var(--f-display);font-size:13px}
.skwrap{border-left-width:1px;padding:var(--s4);border-radius:var(--r-lg);
  background:radial-gradient(120% 90% at 100% 0%,rgba(88,166,245,.10),rgba(88,166,245,0) 55%),var(--card)}
.skwrap.s-bad{background:radial-gradient(120% 90% at 100% 0%,rgba(240,142,125,.12),rgba(240,142,125,0) 55%),var(--card);border-color:rgba(240,142,125,.45)}
.skwrap.s-ok{border-color:rgba(92,187,134,.4)}
.skwrap.s-gold{border-color:var(--gold-line)}
.sknum b{font-family:var(--f-display);font-size:58px;line-height:.9}
.sknum span,.momtop span,.chnum span,.kstreak span{font-size:var(--fs-label);letter-spacing:.1em}
.skdots i{width:17px;height:17px}
.skmsg b{font-size:var(--fs-label);letter-spacing:.1em}
.skmsg p{font-size:var(--fs-sub);line-height:1.5}
.skbest{font-size:var(--fs-meta)}
.mom{padding:var(--s4);border-radius:var(--r-md)}
.momtop b{font-family:var(--f-display);font-size:26px}
.mombar{height:6px}
.mom p{font-size:var(--fs-meta)}
.m-mid .mombar div{background:var(--c-track)} .m-mid .momtop b{color:var(--c-track)}
.score{border-color:var(--gold-line);border-radius:var(--r-md)}
.score .hd{font-family:var(--f-display);font-size:14px;letter-spacing:.06em}
.score .big{font-family:var(--f-display);font-size:48px}
.vbadge{font-family:var(--f-display);font-size:13px;letter-spacing:.06em}
.pvf b{font-family:var(--f-display);font-size:24px}
.pvf span{font-size:10.5px}
.chstrip b,.chlen,.chnum b,.kstreak b,.ba .delta b,.tot b{font-family:var(--f-display)}
.brief{padding:var(--s4);border-radius:var(--r-md)}
.bhead{font-family:var(--f-display);font-size:22px;letter-spacing:.02em}
.bpos,.bfocus span{font-size:var(--fs-label);letter-spacing:.1em}
.gwrap{border-radius:var(--r-md)}
th{font-size:12px;color:var(--t3)} td.h b{font-size:13px}
.dot.on,.box,.gbox{transition:background-color .15s,border-color .15s}
tr.sect td{font-size:11px;color:var(--c-track);background:var(--card-hi)}
td.today,th.today{background:rgba(88,166,245,.08)} th.today{color:var(--c-track)}
.klede{border-left-color:var(--c-track);background:var(--card);border-radius:var(--r-md)}
pre.prev{background:var(--input);border-color:var(--line);border-left-color:var(--gold);border-radius:var(--r-sm);font-size:12.5px}
.stbtn{border-radius:var(--r-md);border-color:var(--line-hi);font-size:var(--fs-sub);min-height:48px}
.warnbox,.okbox,.lockbox,.reset,.gcard,.tipbox{border-radius:var(--r-md);font-size:var(--fs-meta)}
.btn{margin-top:var(--s4)}
.hint{font-size:var(--fs-meta)}
label.f{color:var(--t3);margin:var(--s4) 0 var(--s2)}

/* tracker sheets (settings, help, challenges, backup) */
.sheet{background:rgba(5,7,10,.72);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.card{background:var(--bg-raised);border-color:var(--line-hi);border-radius:var(--r-lg);padding:var(--s5);box-shadow:var(--shadow-2)}
.card h3{font-family:var(--f-display);font-size:24px;font-weight:800;letter-spacing:.03em}
.card p.sub{font-size:var(--fs-sub)}
.card h4{color:var(--gold-hi)}

/* first-run setup */
.setup{background:var(--bg)}
.fhero h2{font-size:34px;line-height:1}
.fhero p{font-size:var(--fs-sub);color:var(--t2)}
.q h4{color:var(--gold-hi)}
.q p{font-size:var(--fs-meta)}
.opt{padding:var(--s3) var(--s4);border-radius:var(--r-md)}
.opt.on{border-color:var(--gold);background:var(--gold-soft)}
.opt b{font-size:15px}
.opt span{font-size:var(--fs-meta)}
.numgrid button{font-family:var(--f-display);font-size:17px;min-height:46px;border-radius:var(--r-sm)}

/* =====================================================================
   COMMUNITY — public, shared. Coral marks it.
   ===================================================================== */
.a-rooms button.on{background:var(--card-hi);color:var(--t1);box-shadow:inset 0 -2px 0 var(--c-community)}
.a-rooms button i{opacity:.7}
.a-chips{margin:0 calc(var(--page-x) * -1);padding:var(--s1) var(--page-x) var(--s3)}
.a-chips button{min-height:38px;padding:8px 14px;border-color:var(--line-hi);color:var(--t2);font-size:13px;font-weight:600;border-radius:var(--r-pill);background:transparent;transition:border-color .15s,color .15s,background-color .15s}
.a-chips button:hover{border-color:var(--t4);color:var(--t1)}
.a-chips button.on{border-color:var(--sec);color:var(--t1);background:color-mix(in srgb,var(--sec) 14%,transparent)}
.a-compose{border-radius:var(--r-md);padding:var(--s3);min-height:56px;background:var(--card);border-color:var(--line-hi);margin-bottom:var(--s4)}
.a-compose .txt{font-size:var(--fs-body);color:var(--t3)}
.a-compose:hover{border-color:var(--c-community)}
.a-post{padding:var(--s4) var(--s4) var(--s1)}
.a-post.pin{border-color:var(--gold-line);background:linear-gradient(180deg,rgba(211,164,60,.07),rgba(211,164,60,0) 60%),var(--card)}
.a-pinlbl{font-size:var(--fs-label);letter-spacing:.1em;color:var(--gold-hi)}
.a-who b{font-size:15px;font-weight:700;color:var(--t1)}
.a-who small{font-size:var(--fs-meta);color:var(--t3)}
.a-title{font-family:var(--f-display);font-size:22px;font-weight:700;letter-spacing:.01em;line-height:1.1}
.a-body{font-size:var(--fs-body);line-height:1.55;color:var(--t1)}
.a-ci{font-size:var(--fs-label);letter-spacing:.08em;border-radius:var(--r-pill);padding:4px 9px;color:var(--gold-hi);border-color:var(--gold-line)}
.a-acts{border-top-color:var(--line);margin-top:var(--s3)}
.a-act{min-height:44px;padding:8px 10px;font-size:13px;color:var(--t3)}
.a-act.liked{color:var(--c-community)}
.a-act.liked svg{fill:var(--c-community)}
.a-act.liked:hover{color:var(--c-community)}
.a-cat{font-size:11px;letter-spacing:.08em;color:var(--t3)}
.a-cbubble{background:var(--card-hi);border-color:transparent;border-radius:4px var(--r-md) var(--r-md) var(--r-md);padding:10px 12px}
.a-cbubble b{font-size:13.5px}
.a-cbody{font-size:var(--fs-body)}
.a-cmeta{font-size:var(--fs-meta)}
.a-cmeta button{font-size:12.5px;min-height:36px}
.a-cmeta button.liked{color:var(--c-community)}
.a-lock{border-color:var(--gold-line);border-radius:var(--r-lg);background:radial-gradient(120% 70% at 0% 0%,rgba(211,164,60,.14),rgba(211,164,60,0) 60%),var(--card)}
.a-lock h3{font-family:var(--f-display);font-size:30px;line-height:1.02}
.a-plan{padding:var(--s4)}
.a-plan.best{border-color:var(--gold-line);background:linear-gradient(180deg,rgba(211,164,60,.08),rgba(211,164,60,0) 60%),var(--card)}
.a-plan .a-ptop b{font-family:var(--f-display);font-size:22px;letter-spacing:.03em}
.a-plan .a-ptop .pr{font-family:var(--f-display);font-size:22px;color:var(--gold-hi)}
.a-plan ul{font-size:var(--fs-sub)}
/* the public/private line: Community says Public, Inbox says Private */
.a-scope{display:inline-flex;align-items:center;font-style:normal;font-family:var(--f-display);font-weight:700;font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;padding:2px 8px;border-radius:var(--r-pill);margin-right:8px;vertical-align:1px;
  color:var(--c-community);background:color-mix(in srgb,var(--c-community) 14%,transparent)}
.a-scope.priv{color:var(--c-inbox);background:color-mix(in srgb,var(--c-inbox) 14%,transparent)}
.a-h h2 small:has(.a-scope)::before{display:none}

/* =====================================================================
   INBOX — private and personal. Pink-red marks it.
   ===================================================================== */
.a-itabs button.on{background:var(--card-hi);color:var(--t1);box-shadow:inset 0 -2px 0 var(--c-inbox)}
.a-cnt{background:var(--c-inbox);color:#1A0710;font-family:var(--f-body)}
.a-itabs button.on .a-cnt{background:var(--c-inbox);color:#1A0710}
.a-newmsg{min-height:52px}
.a-convs{border-top:0;display:flex;flex-direction:column;gap:2px}
.a-n{padding:var(--s3) var(--s2) var(--s3) var(--s3);border-bottom:1px solid var(--line);border-radius:0;transition:background-color .15s}
.a-n:hover{background:var(--card)}
.a-n .t{font-size:14.5px}
.a-n .t b{font-weight:700}
.a-n .t i{font-size:var(--fs-sub);color:var(--t3);margin-top:3px}
.a-n .t small{font-size:var(--fs-meta);letter-spacing:.01em}
.a-n.unread::after{background:var(--c-inbox);width:8px;height:8px;right:8px;top:20px}
.a-n.unread .t{color:var(--t1)}
.a-n.unread .t > b,.a-n.unread .t b{font-weight:800}
.a-conv{min-height:72px;border-left:3px solid transparent;border-radius:var(--r-sm);border-bottom-color:transparent;background:transparent}
.a-conv:hover{background:var(--card)}
.a-conv.unread{border-left-color:var(--c-inbox);background:color-mix(in srgb,var(--c-inbox) 7%,transparent)}
.a-conv.unread .a-cwhen small{color:var(--c-inbox)}
.a-dotnew{background:var(--c-inbox)}
.a-conv .a-av,.a-n .a-av{width:44px;height:44px}
.a-conv .a-ini,.a-n .a-ini{font-family:var(--f-display);font-size:17px}
.a-ncat{color:var(--t3)}
.a-ncat.c-coaching{color:var(--gold-hi)} .a-ncat.c-community{color:var(--c-community)} .a-ncat.c-program{color:var(--c-track)}
.a-private{color:var(--t3)}
/* the conversation */
.a-thead{background:var(--bg-raised)}
.a-twho b{font-size:16px}
.a-twho small{color:var(--c-inbox)}
.a-thread{background:var(--bg);padding-top:var(--s4)}
.a-msg{max-width:80%}
.a-msg .b{background:var(--card-hi);border-color:transparent;border-radius:18px 18px 18px 6px;padding:10px 14px;font-size:15px}
.a-msg.mine .b{background:linear-gradient(180deg,#D9AC48,#C99A33);color:var(--on-gold);border:0;border-radius:18px 18px 6px 18px}
.a-msg.mine .b a{color:#3a2a05}
.a-msg small{font-size:11px;color:var(--t3)}
.a-msgday{font-size:var(--fs-label);color:var(--t3);letter-spacing:.08em}
.a-msgbox{background:var(--bg-raised);border-top-color:var(--line);padding:var(--s2) var(--s3) calc(var(--s2) + env(safe-area-inset-bottom));gap:var(--s2);align-items:flex-end}
.a-msgbox textarea{border-radius:22px;background:var(--input);padding:11px 16px;min-height:46px}
.a-msgbox .a-send{border-radius:23px;min-width:84px;height:46px;min-height:46px}
.a-tmenu{background:var(--card)}
.a-inb{border-radius:var(--r-md)}
.a-inb.open{border-color:var(--gold-line)}

/* =====================================================================
   CLASSROOM — a path to walk. Purple marks it.
   ===================================================================== */
.a-next{border-color:color-mix(in srgb,var(--c-classroom) 55%,transparent);border-radius:var(--r-lg);padding:var(--s4);
  background:radial-gradient(120% 120% at 0% 0%,rgba(169,139,245,.18),rgba(169,139,245,0) 60%),var(--card)}
.a-next .k{color:var(--c-classroom);font-size:var(--fs-label);letter-spacing:.1em}
.a-next b{font-family:var(--f-display);font-size:24px;line-height:1.05;letter-spacing:.01em;margin-top:6px}
.a-next .go{color:var(--c-classroom);font-size:26px}
.a-grid{gap:var(--s3)}
.a-course{box-shadow:var(--shadow-1);transition:border-color .15s,transform .15s var(--ease)}
.a-course:hover{border-color:color-mix(in srgb,var(--c-classroom) 50%,transparent)}
.a-cover.blank{background:radial-gradient(120% 90% at 85% 10%,rgba(169,139,245,.24),rgba(169,139,245,0) 60%),linear-gradient(160deg,#1B2230,#0E1218)}
.a-cover .ttl{font-family:var(--f-display);font-size:26px;font-weight:800;line-height:.98}
.a-cinfo{padding:var(--s3) var(--s4) var(--s4)}
.a-cinfo b{font-family:var(--f-display);font-size:20px;font-weight:700;letter-spacing:.01em;line-height:1.08}
.a-cinfo p{font-size:var(--fs-meta);color:var(--t3)}
.a-bar{height:6px;background:var(--card-hi)}
.a-bar i{background:var(--c-classroom)}
.a-pct{font-size:var(--fs-meta);letter-spacing:.02em;color:var(--t3)}
/* modules: a vertical path; the open one is the week you're in */
.a-mod{border-radius:var(--r-md);margin-bottom:var(--s2)}
.a-mod>button{min-height:56px;background:var(--card);font-family:var(--f-display);font-size:18px;font-weight:700;letter-spacing:.02em;padding:var(--s3) var(--s4)}
.a-mod>button small{font-family:var(--f-body);font-size:var(--fs-meta);color:var(--t3)}
.a-mod.open{border-color:color-mix(in srgb,var(--c-classroom) 45%,transparent)}
.a-mod.open>button{background:color-mix(in srgb,var(--c-classroom) 9%,var(--card))}
.a-les{min-height:50px;padding:var(--s3) var(--s4);position:relative;font-size:14.5px;color:var(--t1)}
.a-les.cur{background:color-mix(in srgb,var(--c-classroom) 10%,transparent)}
.a-les.cur::after{content:"Up next";margin-left:auto;font-family:var(--f-display);font-size:12px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--c-classroom);flex:none}
.a-dot{width:22px;height:22px;border-color:var(--line-hi)}
.a-les.cur .a-dot{border-color:var(--c-classroom);box-shadow:0 0 0 3px rgba(169,139,245,.18)}
.a-dot.done{background:var(--c-classroom);border-color:var(--c-classroom)}

/* the lesson page: course › week › lesson › content › prev/next */
.a-lback{color:var(--c-classroom);font-family:var(--f-display);font-size:15px;letter-spacing:.06em}
.a-ltitle{font-size:clamp(30px,8vw,40px);line-height:1;margin-bottom:var(--s2)}
.a-lpos{font-family:var(--f-display);font-size:14px;letter-spacing:.07em;font-weight:700;color:var(--t3);margin-bottom:var(--s5)}
.a-lesson{font-size:16px;line-height:1.7;color:var(--t1);max-width:68ch}
.a-lesson h2{font-family:var(--f-display);font-size:26px;font-weight:800;letter-spacing:.01em;line-height:1.1;margin:var(--s7) 0 var(--s2)}
.a-lesson h3{font-size:18px;font-weight:700;margin:var(--s6) 0 var(--s2)}
.a-lesson h4{color:var(--c-classroom);font-size:12px}
.a-lesson blockquote{border-left-color:var(--c-classroom);background:var(--card);border-radius:0 var(--r-sm) var(--r-sm) 0;padding:var(--s3) var(--s4)}
.a-lesson a{color:var(--gold-hi)}
.a-video{border-radius:var(--r-md)}
.a-res{min-height:52px;border-radius:var(--r-sm);padding:var(--s3) var(--s4)}
.a-res:hover{border-color:color-mix(in srgb,var(--c-classroom) 50%,transparent)}
.a-done .a-btn{min-height:54px}
.a-done .a-btn.ok{background:var(--ok-soft);color:var(--ok);border:1px solid rgba(92,187,134,.5);box-shadow:none}
.a-lstep{min-height:84px;border-radius:var(--r-md);background:var(--card);border-color:var(--line)}
.a-lstep small{color:var(--c-classroom);font-family:var(--f-display);font-size:13px;letter-spacing:.08em}
.a-lstep span{font-size:15px}
.a-lstep:hover{border-color:color-mix(in srgb,var(--c-classroom) 55%,transparent)}
.a-lstep.hot{background:var(--gold);border-color:var(--gold)}
.a-lmod{border-radius:var(--r-md);margin-top:var(--s5)}
.a-lmodh{background:var(--card-hi);padding:var(--s3) var(--s4)}
.a-lmodh b{font-family:var(--f-display);font-size:17px;letter-spacing:.04em;text-transform:uppercase}
.a-lmodh small{font-size:var(--fs-meta)}
.a-lmi{min-height:50px;font-size:14.5px}
.a-lmi .m{color:var(--t4)}
.a-lmi.ok .m{color:var(--c-classroom)}
.a-lmi.here{background:color-mix(in srgb,var(--c-classroom) 12%,transparent);box-shadow:inset 3px 0 0 var(--c-classroom)}
.a-lmi.here .m{color:var(--c-classroom)}
.a-lbar{background:rgba(14,18,24,.95);border-top-color:rgba(255,255,255,.06)}
.a-lbarc{border-radius:var(--r-sm);border-color:var(--line-hi)}
.a-lbarc b{font-family:var(--f-display);font-size:17px;letter-spacing:.05em}
.a-lbar .a-ib.gold{background:var(--gold)}

/* =====================================================================
   SHEETS + PROFILE
   ===================================================================== */
.a-sheet{background:rgba(5,7,10,.7);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.a-panel{background:var(--bg-raised);border-color:var(--line-hi);border-radius:var(--r-lg) var(--r-lg) 0 0;box-shadow:var(--shadow-2);
  animation:a-up .26s var(--ease)}
@keyframes a-up{from{transform:translateY(36px);opacity:.6}to{transform:none;opacity:1}}
.a-phead{min-height:60px;padding:var(--s2) var(--s3) var(--s2) var(--s5);border-bottom-color:var(--line)}
.a-phead b{font-family:var(--f-display);font-size:19px;font-weight:800;letter-spacing:.06em}
.a-pbody{padding:var(--s4) var(--s5) var(--s5)}
.a-pfoot{background:var(--bg-raised)}
.a-me .n b{font-family:var(--f-display);font-size:28px;font-weight:800;letter-spacing:.01em;line-height:1}
.a-av{background:var(--card-hi);border-color:var(--line-hi)}
.a-ini{font-family:var(--f-display);font-weight:700;color:var(--gold-hi)}
.a-av.lg .a-ini{font-size:30px}
.a-mstats div{padding:var(--s3)}
.a-mstats b{font-family:var(--f-display);font-size:26px}
.a-mstats span{font-size:var(--fs-label);letter-spacing:.08em}
.a-pts b{font-family:var(--f-display);font-size:34px}
.a-coach{font-family:var(--f-display);font-size:11px;letter-spacing:.08em;padding:2px 6px;border-radius:5px;vertical-align:1px}
.a-pill{font-size:11px;letter-spacing:.06em;border-color:var(--line-hi)}
.a-mem{min-height:62px}
.a-mem .n b{font-size:15px}
.a-mem .n small{font-size:var(--fs-meta)}
.a-help > button{min-height:52px;font-size:15px}
.a-help > button b{font-family:var(--f-display);font-size:22px;color:var(--gold-hi)}
.a-helph{font-size:28px;line-height:1.05}
.a-treplay .a-btn{font-size:15px!important}

/* =====================================================================
   EMPTY · LOADING · ERROR · OFFLINE · TOAST
   ===================================================================== */
.a-empty{border:1px dashed var(--line-hi);border-radius:var(--r-lg);padding:var(--s7) var(--s5);font-size:var(--fs-sub);color:var(--t3);background:transparent;line-height:1.55}
.a-empty::before{content:"";display:block;width:44px;height:44px;margin:0 auto var(--s3);border-radius:50%;
  background:color-mix(in srgb,var(--sec) 14%,transparent);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--sec) 45%,transparent)}
.a-empty b{font-family:var(--f-display);font-size:22px;font-weight:800;letter-spacing:.01em;color:var(--t1);margin-bottom:var(--s2)}
.a-empty .a-btn,.a-empty + .a-btn{margin-top:var(--s4)}
/* loading: a calm pulse with words, never a bare spinner */
.a-load{display:flex;flex-direction:column;align-items:center;gap:var(--s3);padding:var(--s8) 0;font-family:var(--f-display);font-size:14px;letter-spacing:.1em;color:var(--t3)}
.a-load::before{content:"";width:30px;height:30px;border-radius:50%;border:2.5px solid color-mix(in srgb,var(--sec) 25%,transparent);border-top-color:var(--sec);animation:a-spin .8s linear infinite}
.a-tlearn .a-load{flex-direction:row;padding:var(--s3) 0}
.a-tlearn .a-load::before{width:16px;height:16px;border-width:2px}
.a-err{border-radius:var(--r-md);padding:var(--s4);font-size:var(--fs-sub);background:var(--bad-soft);border-color:rgba(240,142,125,.5);color:var(--t2)}
.a-err b{font-size:15px;color:var(--bad);margin-bottom:var(--s1)}
.a-err button{margin-top:var(--s3)}
.localNote{font-family:var(--f-display);font-size:13px;letter-spacing:.06em;background:var(--bg-raised);border-top:2px solid var(--gold)}
.localNote.warn{border-top-color:var(--bad);background:#2a1715;color:var(--bad)}
.toast{font-family:var(--f-display);font-size:15px;letter-spacing:.06em;border-radius:var(--r-pill);padding:12px 22px;box-shadow:var(--shadow-2)}
.a-more{border-radius:var(--r-md);border-color:var(--line-hi);font-family:var(--f-display);font-size:14px;min-height:48px}

/* =====================================================================
   TOURS — native-looking coach marks
   ===================================================================== */
.a-tspot{border-radius:var(--r-md);box-shadow:0 0 0 2px var(--gold-hi),0 0 0 6px rgba(211,164,60,.18),0 0 0 9999px rgba(5,7,10,.8)}
.a-tdim{background:rgba(5,7,10,.8)}
.a-ttip{background:var(--bg-raised);border:1px solid var(--gold-line);border-radius:var(--r-lg);padding:var(--s4) var(--s5) var(--s4);box-shadow:var(--shadow-2)}
.a-ttip .a-tk{font-family:var(--f-display);font-size:24px!important;font-weight:800;letter-spacing:.03em!important;color:var(--t1);line-height:1.05}
.a-ttip p{font-size:15px;color:var(--t2);line-height:1.5;margin:var(--s2) 34px var(--s4) 0}
.a-tnav span{font-family:var(--f-display);font-size:14px;letter-spacing:.05em;color:var(--t3)}
.a-tname{font-family:var(--f-body);font-size:10.5px;letter-spacing:.12em;color:var(--gold-hi)}
.a-tnav .a-btn{min-height:44px;padding:8px 18px}

/* =====================================================================
   LOGIN — the first thing anyone sees
   ===================================================================== */
#authGate{background:
  linear-gradient(180deg,rgba(12,16,21,.55) 0%,rgba(12,16,21,.85) 45%,var(--bg) 78%),
  var(--hero-img, url(img/hero.jpg)) var(--hero-focal, center 12%) / cover no-repeat,var(--bg)}
.authCard{background:rgba(17,23,30,.86);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-color:rgba(255,255,255,.08);border-radius:var(--r-lg);padding:var(--s6)}
.authMark{font-family:var(--f-display);font-style:normal;font-weight:800;font-size:56px;letter-spacing:-.02em;line-height:.9;margin-bottom:var(--s2);color:var(--gold)}
.authCard h1{font-size:30px;letter-spacing:.06em;line-height:1}
.authCard .sub{font-size:var(--fs-sub);color:var(--t2)}
.authCard label{color:var(--t3)}
.authCard #authSubmit{min-height:52px}
.authToggle{font-size:var(--fs-sub)}
.authToggle button{font-family:var(--f-display);font-size:15px;letter-spacing:.06em}
.authMsg{font-size:var(--fs-meta)}
.a-pbody .a-chips{padding-left:0;padding-right:0}
/* loading spinners on dark buttons are light */
.a-btn.ghost.is-loading::after,.a-tcta.ghost.is-loading::after,.a-tbtn.is-loading::after{border-color:var(--t2);border-right-color:transparent}

/* ---------------------------------------------------------------------
   AI DRAFTS (coaching staff only). The AI suggests, the coach sends.
   A draft is the one thing in the app with a DASHED border: it isn't
   yours yet. "NOT SENT" is always written out, never colour alone.
   --------------------------------------------------------------------- */
.a-ai{padding:var(--s2) var(--s3) 0;background:var(--bg-raised)}
.a-pfoot .a-ai,.a-inb .a-ai{padding:0 0 var(--s2);background:transparent}
.a-ai + .a-msgbox{border-top:0}
.a-thread ~ .a-ai{border-top:1px solid var(--line)}
.a-airow{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center}
.a-aib{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:38px;padding:0 13px;border-radius:var(--r-pill);
  border:1px solid var(--line-hi);background:var(--card-hi);color:var(--t1);font-family:var(--f-display);font-weight:700;font-size:13px;letter-spacing:.06em;cursor:pointer}
.a-aib svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.a-aib:hover{border-color:var(--gold-line)}
.a-aib.gold{background:var(--gold);border-color:var(--gold);color:var(--on-gold)}
.a-aib[disabled]{opacity:.45;cursor:default}
.a-aitools .a-aib{color:var(--t2)}
.a-aitools .a-aib svg{color:var(--gold-hi)}
.a-aist{display:flex;align-items:center;gap:var(--s2);min-height:38px;font-size:var(--fs-sub);color:var(--t2)}
.a-aist .a-spin{width:16px;height:16px;border-radius:50%;border:2px solid var(--gold-line);border-top-color:var(--gold);animation:a-spin .8s linear infinite;flex:none}
.a-aitx{margin-left:auto;background:none;border:0;color:var(--t2);text-decoration:underline;font-size:var(--fs-sub);min-height:38px;padding:0 4px;cursor:pointer}
.a-aierr{display:flex;flex-direction:column;gap:var(--s2);padding:var(--s2) var(--s3);border:1px solid rgba(240,142,125,.55);border-radius:var(--r-sm);background:var(--bad-soft);color:var(--t1);font-size:var(--fs-sub)}
.a-aidraft,.a-aivoice{border:1.5px dashed var(--gold-line);border-radius:var(--r-md);padding:var(--s2) var(--s3) var(--s3);background:var(--gold-soft)}
.a-aihd{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);flex-wrap:wrap}
.a-aihd b{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-display);font-size:14px;letter-spacing:.08em;color:var(--gold-hi)}
.a-aihd b svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linejoin:round}
.a-unsent{font-family:var(--f-display);font-weight:800;font-size:12px;letter-spacing:.1em;color:var(--warn);border:1px solid rgba(230,174,72,.55);border-radius:var(--r-pill);padding:2px 9px}
.a-aidraft p,.a-aimsg{margin:var(--s1) 0 var(--s2);font-size:var(--fs-meta);line-height:1.45;color:var(--t2)}
.a-aicaution{border-left:3px solid var(--warn);padding:6px 10px!important;background:var(--warn-soft);color:var(--t1)!important;border-radius:0 var(--r-sm) var(--r-sm) 0}
.a-aicaution.crisis{border-left-color:var(--bad);background:var(--bad-soft)}
.a-aicaution b{font-family:var(--f-display);letter-spacing:.08em;margin-right:4px}
.a-aivoice textarea{margin:0 0 var(--s2);min-height:72px;font-size:16px}
.a-live{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-meta);color:var(--t2)}
.a-live i{width:9px;height:9px;border-radius:50%;background:var(--c-inbox);animation:a-pulse 1.1s ease-in-out infinite}
@keyframes a-pulse{50%{opacity:.3}}
textarea.is-draft{border:1.5px dashed var(--gold)!important;background:color-mix(in srgb,var(--gold) 5%,var(--input))!important}
.a-wsum{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s2);flex-wrap:wrap;margin:0 0 var(--s3);padding:0 2px}
.a-wsum b{font-family:var(--f-display);font-size:18px;letter-spacing:.05em;color:var(--t1)}
.a-wsum span{font-size:var(--fs-meta);color:var(--t3)}
.a-wait{color:var(--c-inbox)!important;font-weight:600}
.a-inba .a-inbai svg{width:13px;height:13px;stroke:var(--gold-hi);fill:none;stroke-width:2;stroke-linejoin:round;margin-right:3px;vertical-align:-2px}
@media (prefers-reduced-motion:reduce){.a-live i,.a-aist .a-spin{animation:none}}

/* ---------------------------------------------------------------------
   PUSH NOTIFICATIONS: the contextual ask, and the profile settings
   --------------------------------------------------------------------- */
.a-pushask{display:flex;gap:var(--s3);align-items:flex-start;border:1px solid var(--line-hi);border-radius:var(--r-md);background:var(--card);padding:var(--s3) var(--s4);margin:0 0 var(--s3)}
.a-thread .a-pushask{margin:var(--s3) 0 var(--s2)}
.a-pushask .ic{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--c-inbox) 16%,transparent);color:var(--c-inbox)}
.a-pushask .ic svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.a-pushask .tx{min-width:0;flex:1}
.a-pushask b{display:block;font-size:var(--fs-body);color:var(--t1);line-height:1.3}
.a-pushask p{margin:4px 0 var(--s3);font-size:var(--fs-meta);color:var(--t2);line-height:1.45}
.a-pushask .a-btn{flex:1 1 auto;min-width:0}
.a-pushset .a-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;vertical-align:-3px;margin-right:6px}
.a-pstat{display:inline-block;font-family:var(--f-display);font-size:12px;letter-spacing:.1em;padding:1px 8px;border-radius:var(--r-pill);margin-right:6px}
.a-pstat.on{color:var(--ok);border:1px solid color-mix(in srgb,var(--ok) 55%,transparent)}
.a-pstat.off{color:var(--t3);border:1px solid var(--line-hi)}
.a-pcats{margin:var(--s2) 0 var(--s3)}
.a-pcats label{display:flex;align-items:center;gap:10px;min-height:40px}
/* phones: the open sheet sits above the on-screen keyboard (app.js sets --kb) */
@media (max-width:767px){ .a-sheet.open .a-panel{bottom:var(--kb,0px)} }
/* "What's this?" links: a full-size tap target without looking bigger */
.a-thelp{min-height:34px}

/* ---------------------------------------------------------------------
   SETUP: program + official start date, Practice Mode, settings (Oct 2026)
   --------------------------------------------------------------------- */
.opt.locked{opacity:.62}
.opt.locked .box{border-style:dashed;font-size:11px;display:grid;place-items:center}
.fnote{margin:var(--s2) 0 0;font-size:var(--fs-meta);color:var(--t2)}
.fnote a{color:var(--gold-hi)}
.whenrow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2)}
.whenrow button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:58px;padding:9px 10px;border-radius:var(--r-sm);
  border:1px solid var(--line-hi);background:var(--card);color:var(--t1);text-align:left;cursor:pointer;min-width:0}
.whenrow button b{font-family:var(--f-display);font-size:15px;letter-spacing:.04em}
.whenrow button em{font-style:normal;font-size:var(--fs-meta);color:var(--t3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.whenrow button.sel{border-color:var(--gold);background:var(--gold-soft)}
.whenrow button.sel em{color:var(--t2)}
.fdate{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;margin:var(--s3) 0 0;font-size:var(--fs-sub);color:var(--t2)}
.fdate input{min-height:40px;padding:6px 10px;border-radius:var(--r-sm);border:1px solid var(--line-hi);background:var(--input);color:var(--t1);font:inherit}
.fsum{margin:var(--s3) 0 0;padding:var(--s3);border-left:3px solid var(--gold);background:var(--gold-soft);border-radius:0 var(--r-sm) var(--r-sm) 0;
  font-size:var(--fs-sub);line-height:1.5;color:var(--t2)}
.fsum b{color:var(--t1)}
@media (max-width:360px){ .whenrow{grid-template-columns:1fr} .whenrow button{min-height:48px;flex-direction:row;align-items:baseline;gap:8px} }
.prac{border:1.5px dashed var(--gold-line);border-radius:var(--r-md);padding:var(--s4);background:var(--gold-soft);margin:var(--s3) 0}
.prac .pk{font-family:var(--f-display);font-weight:800;font-size:12px;letter-spacing:.12em;color:var(--gold-hi)}
.prac h3{font-family:var(--f-display);font-size:24px;line-height:1.05;margin:6px 0 var(--s2);color:var(--t1);text-transform:none}
.prac p{font-size:var(--fs-sub);color:var(--t2);line-height:1.5;margin:0 0 var(--s2)}
.row2{display:flex;gap:var(--s2);flex-wrap:wrap}
.row2 .btn{flex:1 1 180px;margin-top:var(--s2)}
.setprog{display:flex;flex-direction:column;gap:2px;padding:var(--s3);border:1px solid var(--line-hi);border-radius:var(--r-sm);background:var(--card);margin:0 0 var(--s2)}
.setprog b{font-size:var(--fs-body);color:var(--t1)}
.setprog span{font-size:var(--fs-meta);color:var(--t3)}
.pmenu button.locked b::after{content:" · MEMBERS";color:var(--t3);font-size:10.5px;letter-spacing:.08em}
.pmenu button.locked{opacity:.7}
.a-practice .a-hero h3{font-family:var(--f-display);font-size:clamp(28px,8vw,38px);line-height:1;color:var(--t1);margin:var(--s2) 0 0;max-width:18ch}

/* ---------------------------------------------------------------------
   Monday update, batch 2: community and messages
   --------------------------------------------------------------------- */
/* several photos on a post: 2 side by side, 3 = one tall + two, 4 = grid */
.a-imgs{display:grid;gap:4px;margin:11px 0 0;border-radius:var(--r-md);overflow:hidden;grid-template-columns:1fr 1fr}
.a-imgs.n3{grid-template-rows:1fr 1fr}
.a-imgs.n3 .a-imgb:first-child{grid-row:span 2}
.a-imgb{position:relative;display:block;padding:0;border:0;background:var(--bg-raised);cursor:zoom-in;aspect-ratio:1/1;min-height:0;overflow:hidden}
.a-imgs.n3 .a-imgb:first-child{aspect-ratio:auto}
.a-imgb img{width:100%;height:100%;object-fit:cover;display:block}
.a-imgb .more{position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.55);color:#fff;font-family:var(--f-display);font-size:28px;font-weight:800}
/* composer photo previews */
.a-cphotos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2);margin-top:var(--s3)}
.a-cph{position:relative;aspect-ratio:1/1;border-radius:var(--r-sm);overflow:hidden;border:1px solid var(--line)}
.a-cph img{width:100%;height:100%;object-fit:cover;display:block}
.a-cph button{position:absolute;top:4px;right:4px;width:36px;height:36px;min-height:36px;background:rgba(0,0,0,.6)}
.a-cphn{color:var(--t3);font-size:var(--fs-meta);align-self:center}
/* @mentions */
.a-mention{color:var(--gold-hi);font-weight:700;text-decoration:none}
.a-mention:hover{text-decoration:underline}
.a-mpick{border:1px solid var(--line-hi);border-radius:var(--r-sm);background:var(--card-hi);margin:6px 0;max-height:240px;overflow:auto}
.a-mpick button{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:6px 10px;border:0;border-bottom:1px solid var(--line);background:none;color:var(--t1);text-align:left;cursor:pointer;font:inherit}
.a-mpick button:last-child{border-bottom:0}
.a-mpick button:hover,.a-mpick button:focus-visible{background:var(--gold-soft)}
.a-mpick .a-note{margin:8px 10px}
/* scheduled posts */
.a-when{margin-bottom:var(--s2)}
.a-sched{border:1px solid var(--line);border-radius:var(--r-md);background:var(--card);padding:var(--s3);margin:0 0 var(--s2);display:flex;flex-direction:column;gap:4px}
.a-sched.failed{border-color:var(--bad)}
.a-sched .a-pill{align-self:flex-start}
.a-sched b{font-size:var(--fs-body);color:var(--t1)}
.a-sched small{color:var(--t3);font-size:var(--fs-meta)}
.a-sched p{margin:2px 0;color:var(--t2);font-size:var(--fs-sub);overflow-wrap:anywhere}
.a-sched p.a-err{padding:8px 10px;margin:4px 0}
.a-sched .a-row{gap:var(--s2);margin-top:4px;flex-wrap:wrap}
.a-pill.bad{border-color:var(--bad);color:var(--bad)}
/* read / unread without opening */
.a-nrow{display:flex;align-items:stretch;border-bottom:1px solid var(--line)}
.a-nrow > .a-n{flex:1;min-width:0;border-bottom:0}
.a-nrow > .a-n.unread::after{display:none}
.a-rtog{flex:none;width:44px;min-height:44px;display:grid;place-items:center;border:0;background:none;cursor:pointer;padding:0}
.a-rtog span{width:11px;height:11px;border-radius:50%;border:1.5px solid var(--t3);transition:background-color .15s,border-color .15s}
.a-rtog.on span{background:var(--gold);border-color:var(--gold)}
.a-rtog:hover span{border-color:var(--gold-hi)}
.a-nrow .a-conv .a-dotnew{display:none}
/* photos in private messages */
.a-msgimgs{display:grid;gap:4px;grid-template-columns:1fr 1fr;width:min(260px,70vw);margin-bottom:4px;border-radius:14px;overflow:hidden}
.a-msgimgs.n1{grid-template-columns:1fr}
.a-msg.mine .a-msgimgs{margin-left:auto}
.a-msgimgs .a-imgb{aspect-ratio:auto;max-height:280px}
.a-msgimgs.n1 .a-imgb img{height:auto;max-height:280px}
.a-msgimgs .a-imgb.gone{display:grid;place-items:center;min-height:80px;color:var(--t3);font-size:var(--fs-meta)}
.a-msgpic{flex:none;width:44px;height:44px;cursor:pointer}
.a-msgprev{padding:var(--s2) 12px 0;margin:0;grid-template-columns:repeat(4,minmax(0,1fr));background:var(--navy2)}
/* onboarding: notifications step */
.a-notifystep h3{font-family:var(--f-display);font-size:26px;line-height:1.05;margin:var(--s2) 0;color:var(--t1);text-transform:none}
.a-notifystep p{color:var(--t2);font-size:var(--fs-sub);line-height:1.5}
.a-notifystep .a-btn{margin-top:var(--s2)}
.a-nsicon{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--gold-soft);color:var(--gold-hi)}
.a-nsicon svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.8}
.a-ticks{list-style:none;padding:0;margin:var(--s2) 0}
.a-ticks li{position:relative;padding:6px 0 6px 26px;color:var(--t1);font-size:var(--fs-sub)}
.a-ticks li::before{content:"";position:absolute;left:4px;top:11px;width:10px;height:6px;border-left:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(-45deg)}
.a-steps{margin:var(--s2) 0;padding-left:22px;color:var(--t1);font-size:var(--fs-sub);line-height:1.5}
.a-steps li{margin:4px 0}