/* Quantum Shifting · member platform. Design tokens from the Claude Design handoff. */
:root{
 --mid:#060814;--navy:#2B3566;--gold:#B8892B;--goldM:#D4A44C;--goldB:#E8C573;--goldT:#8A6519;
 --cream:#ECE8DF;--wcream:#F6F2E9;--border:#E6DECB;--body:#23262F;--sec:#474A54;--ter:#7A7D86;
 --ok:#3f8f5f;--bad:#8a3b32;
 --sans:'Outfit','Helvetica Neue',system-ui,sans-serif;--serif:'Cormorant Garamond',Georgia,serif;
 --ink-dim:rgba(236,232,223,.88);--ink-line:rgba(236,232,223,.45)}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--wcream);color:var(--body);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
button,input,textarea,select{font-family:inherit;font-size:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--gold)}a:hover{color:var(--navy)}
p{text-wrap:pretty}
@keyframes qsPulse{0%,100%{opacity:.35}50%{opacity:.8}}

/* ---------- shell ---------- */
.app{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;container-type:inline-size;background:var(--wcream)}
.hdr{display:flex;align-items:center;justify-content:space-between;gap:20px 32px;padding:22px clamp(20px,3.5cqw,40px);border-bottom:1px solid var(--border);flex-wrap:wrap}
.hdr .safe{display:none;width:100%;height:env(safe-area-inset-top,0)}
.wordmark{background:none;border:0;padding:0;font:500 22px var(--serif);color:var(--mid);letter-spacing:.01em}
.wordmark em{font-style:normal;color:var(--gold)}
.topnav{display:flex;gap:28px;flex-wrap:wrap}
.topnav button{background:none;border:0;padding:6px 0;font:400 14px var(--sans);letter-spacing:.05em;color:var(--sec);border-bottom:1px solid transparent;border-radius:0;transition:color .15s}
.topnav button:hover{color:var(--mid)}.topnav button.on{color:var(--mid);border-bottom-color:var(--gold)}
.hdr-right{display:flex;align-items:center;gap:14px}
.hdr-date{font:400 13px var(--sans);color:var(--sec)}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--navy);color:var(--goldB);border:1px solid var(--gold);font:500 14px var(--serif);display:inline-flex;align-items:center;justify-content:center;padding:0}
.shell{flex:1;display:flex;align-items:stretch;width:100%;min-height:0}
.content{flex:1;display:flex;flex-direction:column;min-width:0}
main.main{flex:1;width:100%;max-width:1040px;margin:0 auto;padding:clamp(24px,3.2cqw,40px) clamp(20px,5cqw,40px) 96px;min-width:0}

/* The standing sidebar. Hidden on a phone, where the bottom bar carries the five most-used. */
.side{display:none;flex:0 0 244px;width:244px;flex-direction:column;border-right:1px solid var(--border);background:var(--cream)}
.side-brand{display:flex;align-items:center;gap:11px;background:none;border:0;border-bottom:1px solid var(--border);padding:20px 18px;text-align:left;width:100%}
.side-mark{width:30px;height:30px;flex:0 0 30px;border-radius:50%;background:var(--mid);color:var(--goldB);font:400 17px var(--serif);display:inline-flex;align-items:center;justify-content:center}
.side-brand .wordmark{font-size:18px}
.side-nav{flex:1;overflow-y:auto;padding:14px 12px}
.side-group{display:flex;flex-direction:column;gap:1px;padding-bottom:12px}
.side-head{font:500 10px/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--ter);padding:14px 12px 8px}
.side-link{display:flex;align-items:center;gap:12px;background:none;border:0;border-radius:6px;padding:9px 12px;text-align:left;font:400 15px var(--sans);color:var(--sec);transition:color .13s,background .13s;position:relative}
.side-link .ico{display:inline-flex;flex:0 0 20px;color:var(--ter);transition:color .13s}
.side-link:hover{color:var(--mid);background:rgba(184,137,43,.07)}
.side-link:hover .ico{color:var(--gold)}
.side-link.on{color:var(--mid);background:rgba(184,137,43,.11);font-weight:500}
.side-link.on .ico{color:var(--gold)}
.side-link.on::before{content:"";position:absolute;left:-12px;top:7px;bottom:7px;width:2px;background:var(--gold);border-radius:0 2px 2px 0}
.side-foot{border-top:1px solid var(--border);padding:12px;display:flex;align-items:center;gap:8px}
.side-me{flex:1;min-width:0;display:flex;align-items:center;gap:11px;background:none;border:0;border-radius:6px;padding:7px 8px;text-align:left}
.side-me:hover{background:rgba(184,137,43,.07)}
.side-me .avatar{width:32px;height:32px;flex:0 0 32px;font-size:13px}
.side-me .side-label{display:flex;flex-direction:column;min-width:0}
.side-name{font:400 14px var(--sans);color:var(--mid);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-sub{font:400 11px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ter)}
.side-toggle{background:none;border:0;padding:7px;border-radius:6px;color:var(--ter);display:inline-flex}
.side-toggle:hover{color:var(--mid);background:rgba(184,137,43,.07)}
/* Collapsed: icons only, labels gone, everything centred in a 68px rail. */
.side.collapsed{flex-basis:68px;width:68px}
.side.collapsed .side-label{display:none}
.side.collapsed .side-brand,.side.collapsed .side-link,.side.collapsed .side-me{justify-content:center;padding-left:0;padding-right:0}
.side.collapsed .side-head{text-align:center;padding:14px 0 8px;font-size:9px;letter-spacing:.14em}
.side.collapsed .side-link.on::before{left:0}
.side.collapsed .side-foot{flex-direction:column}

/* The bar above every page: where you are, what you can do here, and the date. */
.pagebar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:14px clamp(20px,5cqw,40px);border-bottom:1px solid var(--border);background:rgba(246,242,233,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);position:sticky;top:0;z-index:15}
.crumbs{display:flex;align-items:center;gap:9px;flex-wrap:wrap;min-width:0}
.crumb{background:none;border:0;padding:0;font:400 12px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ter)}
.crumb:hover{color:var(--gold)}
.crumb.on{color:var(--sec)}
.crumb-sep{color:var(--ter);font-size:13px}
.pagebar-right{display:flex;align-items:center;gap:18px}
.page-actions{display:flex;align-items:center;gap:12px}
.pagebar-date{font:400 11px var(--sans);letter-spacing:.14em;color:var(--ter)}
@media (max-width:899px){.tabbar{display:flex}.pagebar{padding:11px 20px}.pagebar-date{display:none}}
@media (min-width:900px){.side{display:flex}.tabbar{display:none}.hdr{display:none}}

/* Phone overflow sheet for the sections the bottom bar cannot hold. */
.sheet-wrap{position:fixed;inset:0;background:rgba(6,8,20,.34);display:flex;align-items:flex-end;z-index:60;animation:qsFade .16s ease}
.sheet{width:100%;background:var(--wcream);border-radius:16px 16px 0 0;padding:10px 14px calc(18px + env(safe-area-inset-bottom,12px));box-shadow:0 -10px 40px rgba(6,8,20,.16);animation:qsRise .2s cubic-bezier(.3,0,.2,1)}
.sheet-grip{width:38px;height:4px;border-radius:2px;background:var(--border);margin:6px auto 12px}
.sheet-link{display:flex;align-items:center;gap:14px;width:100%;background:none;border:0;padding:15px 12px;text-align:left;font:400 17px var(--serif);color:var(--body);border-radius:8px}
.sheet-link .ico{color:var(--ter)}
.sheet-link.on{color:var(--mid);background:rgba(184,137,43,.1)}.sheet-link.on .ico{color:var(--gold)}
.sheet-link.dim{font:400 14px var(--sans);color:var(--ter);justify-content:center;padding-top:12px}
@keyframes qsFade{from{opacity:0}to{opacity:1}}
@keyframes qsRise{from{transform:translateY(16px)}to{transform:translateY(0)}}
.ftr{padding:24px clamp(20px,3.5cqw,40px);border-top:1px solid var(--border);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font:400 12px/1.5 var(--sans);color:var(--sec)}
.ftr i{font-style:italic;font-family:var(--serif);font-size:15px}
.tabbar{display:none;position:sticky;bottom:0;background:rgba(246,242,233,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--border);justify-content:space-around;padding:10px 8px calc(14px + env(safe-area-inset-bottom,16px));z-index:20}
.tabbar button{background:none;border:0;padding:6px 2px;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:48px;min-height:46px;font:400 10px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ter)}
.tabbar button .ico{display:inline-flex;color:var(--ter);transition:color .13s}
.tabbar button.on{color:var(--mid)}.tabbar button.on .ico{color:var(--gold)}
@media (max-width:720px){
 .topnav,.hdr-date,.ftr{display:none}.tabbar{display:flex}.hdr{padding-top:calc(10px + env(safe-area-inset-top,0))}
 main.main{padding-bottom:40px}
}

/* ---------- type ---------- */
.eyebrow{font:500 11px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--goldT)}
.eyebrow.dim{color:var(--sec)}
h1,h2,h3{margin:0;color:var(--mid);font-family:var(--serif);font-weight:300;line-height:1.05}
h1{font-size:clamp(36px,5cqw,56px)}h1.hero{font-size:clamp(40px,5.5cqw,64px)}
h2{font-weight:400;font-size:clamp(30px,4cqw,44px);line-height:1.1}
h3{font-weight:400;font-size:26px;line-height:1.2}
.lede{font:400 17px/1.6 var(--sans);color:var(--sec);margin:14px 0 0;max-width:520px}
.serif{font-family:var(--serif)}.muted{color:var(--sec)}.note{font-size:14px;line-height:1.5}.center{text-align:center}
.gold{color:var(--goldT)}
.quote{font:italic 300 19px/1.45 var(--serif);color:var(--body);margin:0 0 16px}
.intent{font:italic 300 clamp(24px,3cqw,32px)/1.3 var(--serif);color:var(--navy);margin:0 0 32px}

/* ---------- Today ---------- */
.sec.practice{display:flex;flex-wrap:wrap;gap:24px 40px;align-items:flex-end}
.sec.practice .grow{flex:1 1 320px}
.sec.practice .desc{font:400 16px/1.6 var(--sans);color:var(--body);margin:10px 0 0;max-width:560px}
.beads{flex-basis:100%;display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.beads span{width:10px;height:10px;border-radius:50%;border:1px solid var(--border);background:transparent}
.beads span.done{background:var(--gold);border-color:var(--gold)}.beads span.cur{border-color:var(--gold)}

/* ---------- sections & rules (no cards) ---------- */
.sec{margin-top:56px;padding-top:28px;border-top:1px solid var(--border)}
.sec.tight{margin-top:44px;padding-top:24px}
/* Home: the day's work on the left, a standing rail on the right. The rail is
   the same four blocks in the same order every day, so it is learned once. */
.home{display:grid;grid-template-columns:minmax(0,1fr);gap:40px}
.home-main{min-width:0}
.home-rail{display:flex;flex-direction:column;gap:2px;min-width:0}
.rail-card{border-top:1px solid var(--border);padding:18px 0 20px}
.rail-card:first-child{border-top:0;padding-top:0}
.rail-title{font:300 23px/1.15 var(--serif);color:var(--mid);margin-top:10px}
.rail-title.na{font-size:19px;font-style:italic;color:var(--ter)}
.rail-meta{font:400 13px/1.5 var(--sans);color:var(--sec);margin-top:6px}
.rail-body{font:400 14px/1.55 var(--sans);color:var(--sec);margin:10px 0 0}
.rail-card .link{margin-top:12px;display:inline-block}
.rail-stat{display:grid;grid-template-columns:auto 1fr;gap:2px 14px;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--border)}
.rail-stat:first-of-type{padding-top:14px}
.rail-stat .k{font:500 11px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ter)}
.rail-stat .v{font:300 19px var(--serif);color:var(--mid);text-align:right}
.rail-stat .v.na{font-size:15px;font-style:italic;color:var(--ter)}
.rail-stat .s{grid-column:1/-1;font:400 12px var(--sans);color:var(--ter)}

/* Today's assignment, as one card with the three movements inside it. */
.assignment{margin-top:36px;padding:26px 28px 24px;border:1px solid var(--border);border-radius:3px;background:rgba(255,255,255,.5)}
.assignment-title{margin-top:12px;font-size:clamp(26px,3.4cqw,36px)}
.assignment .desc{font:400 16px/1.6 var(--sans);color:var(--body);margin:12px 0 0;max-width:60ch}
.checklist{list-style:none;margin:22px 0 0;padding:0;border-top:1px solid var(--border)}
.checklist li{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid var(--border)}
.checklist .mark{width:20px;height:20px;flex:0 0 20px;border:1px solid var(--border);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:11px;color:transparent}
.checklist li.done .mark{background:var(--gold);border-color:var(--gold);color:#fff}
.checklist li.current .mark{border-color:var(--gold);box-shadow:0 0 0 3px rgba(184,137,43,.14)}
.checklist .what{display:flex;flex-direction:column;min-width:0;flex:1}
.checklist .label{font:400 17px var(--serif);color:var(--ter)}
.checklist li.done .label,.checklist li.current .label{color:var(--mid)}
.checklist .hint{font:400 12.5px var(--sans);color:var(--ter);margin-top:1px}
.checklist .now{font:500 10px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--goldT);border:1px solid var(--gold);border-radius:100px;padding:3px 9px;white-space:nowrap}
.assignment-foot{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:22px}
.assignment .beads{margin-top:18px}
@media (min-width:1080px){.home{grid-template-columns:minmax(0,1fr) 288px;gap:48px}}

/* The dashboard row: six things a member should be able to read at a glance. */
/* Two across on a phone, three on a desktop: six tiles read as one block either way,
   and the day's call to action stays close to the top of the screen. */
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 28px;margin-top:44px}
@media (min-width:900px){.tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 36px}}
.tile{border-top:1px solid var(--border);padding-top:18px}
.tile.tap{cursor:pointer}
.tile.tap:hover .v{color:var(--gold)}
.tile .v{font:300 clamp(26px,2.9cqw,36px)/1.08 var(--serif);color:var(--mid);margin-top:12px}
.tile .v.na{font-size:24px;font-style:italic;color:var(--ter)}
.tile .s{font:400 13px/1.5 var(--sans);color:var(--sec);margin-top:9px}
.three{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:7px}
.three li{display:flex;align-items:center;gap:11px;font:400 17px var(--serif);color:var(--ter)}
.three li i{width:7px;height:7px;border-radius:50%;border:1px solid var(--border);flex:0 0 7px}
.three li.done{color:var(--mid)}.three li.done i{background:var(--gold);border-color:var(--gold)}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:40px;margin-top:56px}
.col{border-top:1px solid var(--border);padding-top:22px}
.col h3{margin:14px 0 6px}.col .meta{font:400 15px/1.6 var(--sans);color:var(--sec);margin:0 0 14px}
.col .body{font:400 15px/1.65 var(--sans);color:var(--body);margin:0 0 16px}
.clamp3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.grow{flex:1;min-width:0}.stack>*+*{margin-top:12px}
.card{border-top:1px solid var(--border);padding:22px 0;margin:0}
hr.gold{border:0;border-top:1px solid var(--border);margin:24px 0}
.kv{display:flex;justify-content:space-between;gap:16px;padding:16px 0;border-bottom:1px solid var(--border);font:400 15px/1.4 var(--sans)}
.kv span:last-child{color:var(--sec);text-align:right}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:2px;padding:16px 26px;font:500 13px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;background:var(--mid);color:var(--cream);white-space:nowrap;transition:background .15s,color .15s,border-color .15s}
.btn:hover{background:var(--navy)}
.btn.gold{background:var(--gold);color:var(--mid)}.btn.gold:hover{background:var(--goldM)}
.btn.ghost{background:transparent;color:var(--mid);border:1px solid var(--gold)}.btn.ghost:hover{background:var(--cream)}
.btn.small{padding:11px 18px;font-size:12px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.link{background:none;border:0;padding:0;font:400 14px var(--sans);color:var(--goldT);letter-spacing:.04em}
.link:hover{color:var(--navy)}
.link.dim{color:var(--sec)}.link.dim:hover{color:var(--mid)}
.link.lg{font-size:15px}
.btnrow{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}

/* ---------- inputs ---------- */
input.field,textarea.field,select.field{width:100%;background:transparent;border:0;border-bottom:1px solid var(--border);border-radius:0;padding:10px 0;font:400 16px var(--sans);color:var(--body);outline:none}
input.field:focus,textarea.field:focus{border-bottom-color:var(--gold)}
input.field::placeholder,textarea.field::placeholder{color:rgba(35,38,47,.55)}
textarea.field{min-height:96px;resize:vertical;line-height:1.6}
textarea.lined{width:100%;border:0;outline:none;resize:vertical;padding:0;background:repeating-linear-gradient(transparent 0 33px,var(--border) 33px 34px);font:400 19px/34px var(--serif);color:var(--body)}
textarea.lined::placeholder{color:rgba(35,38,47,.5)}
label.lbl{display:block;font:500 11px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--goldT);margin:26px 0 4px}
input[type=range].field{border:0;padding:0;accent-color:var(--gold)}
.err{color:var(--bad);font-size:14px;margin-top:10px}

/* ---------- welcome / login (dark sacred surface) ---------- */
.welcome{flex:1;min-height:100vh;min-height:100dvh;background:#060814 radial-gradient(ellipse 80% 55% at 50% 115%,rgba(43,53,102,.85),transparent 70%);color:var(--cream);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 24px;text-align:center}
.welcome .eyebrow{color:var(--goldM);letter-spacing:.34em}
.welcome .vline{width:1px;height:56px;background:linear-gradient(var(--gold),transparent);margin:30px 0}
.welcome h1{font:300 clamp(40px,6.5cqw,76px)/1.05 var(--serif);color:var(--cream);max-width:760px;text-wrap:pretty}
.welcome h1 em{color:var(--goldB)}
.welcome .sub{font:400 16px/1.6 var(--sans);color:var(--ink-dim);margin:22px 0 48px;max-width:400px}
.welcome form{display:flex;flex-direction:column;gap:20px;width:100%;max-width:360px}
.welcome input.field{border-bottom-color:var(--ink-line);color:var(--cream);padding:12px 0}
.welcome input.field::placeholder{color:rgba(236,232,223,.7)}.welcome input.field:focus{border-bottom-color:var(--goldM)}
.welcome .btn{margin-top:18px;width:100%;padding:17px;letter-spacing:.16em}
.welcome .links{display:flex;gap:24px;margin-top:30px;font:400 13px var(--sans)}
.welcome .links button{background:none;border:0;padding:0;color:rgba(236,232,223,.85)}
.welcome .err{color:#e8b4a8}
.welcome .note{color:rgba(236,232,223,.6);margin-top:26px;max-width:360px}

/* ---------- Practice: the three movements ---------- */
.phase-link i.done{background:var(--gold);opacity:.55}.phase-link.on i{opacity:1}
.substeps{display:flex;gap:22px;flex-wrap:wrap;margin-top:22px}
.substeps button{background:none;border:0;padding:6px 0;font:400 13px var(--sans);letter-spacing:.08em;color:var(--sec);border-bottom:1px solid transparent;border-radius:0}
.substeps button.done{color:var(--goldT)}.substeps button.on{color:var(--mid);border-bottom-color:var(--gold)}
.measure{max-width:680px;margin:44px auto 0}
.reader{max-width:640px;margin:0 auto}
.reader .eyebrow{text-align:center}
.dropcap{float:left;font:300 78px/.8 var(--serif);color:var(--gold);margin:8px 10px 0 0}
.reader .close{font-style:italic;color:var(--navy);margin-top:6px}
.read-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:48px;padding-top:24px;border-top:1px solid var(--border);flex-wrap:wrap}
.score{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-top:32px;padding-top:24px;border-top:1px solid var(--border)}
.score .big{font:300 40px/1 var(--serif);color:var(--mid);margin:12px 0 8px}

/* ---------- Journal: the ledger ---------- */
.jdate{font:italic 300 22px/1.3 var(--serif);color:var(--navy);margin-bottom:18px}
/* The course as modules: a week folds open onto its days. */
.modules{margin-top:28px;display:flex;flex-direction:column}
.module{border-top:1px solid var(--border)}
.module:last-child{border-bottom:1px solid var(--border)}
.module-head{display:grid;grid-template-columns:18px 72px minmax(0,1fr) 120px 44px;align-items:center;gap:16px;width:100%;background:none;border:0;padding:16px 4px;text-align:left}
.module-head:hover{background:rgba(184,137,43,.05)}
.module-head .chev{color:var(--ter);display:inline-flex;transition:transform .15s}
.module-head.on .chev{transform:rotate(90deg);color:var(--gold)}
.module-head .wk{font:500 11px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ter)}
.module-head.current .wk{color:var(--goldT)}
.module-head .ttl{display:flex;flex-direction:column;min-width:0}
.module-head .name{font:400 19px var(--serif);color:var(--mid);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.module-head .sub{font:400 12px var(--sans);color:var(--ter);margin-top:2px}
.module-head .bar{height:3px;border-radius:2px;background:var(--border);overflow:hidden}
.module-head .bar i{display:block;height:100%;background:var(--gold);border-radius:2px}
.module-head .tally{font:400 13px var(--sans);color:var(--sec);text-align:right}
.module-body{padding:0 0 10px}

.day-row{display:grid;grid-template-columns:18px 72px minmax(0,1fr) auto 72px;align-items:baseline;gap:16px;padding:12px 4px 12px 0;border-top:1px solid var(--border);cursor:pointer;margin-left:34px}
.day-row:hover{background:rgba(184,137,43,.05)}
.day-row .glyph{font-size:12px;color:var(--gold);text-align:center}
.day-row .n{font:400 15px var(--serif);color:var(--sec)}
.day-row .what{display:flex;flex-direction:column;min-width:0}
.day-row .title{font:400 17px var(--serif);color:var(--mid)}
.day-row.locked .title,.day-row.locked .n{color:var(--ter)}
.day-row .coach{font:400 13px var(--sans);color:var(--goldT);margin-top:4px}
.day-row .mine{font:400 13px/1.5 var(--sans);color:var(--ter);margin-top:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.day-row .scores{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.day-row .when{font:400 12px var(--sans);color:var(--ter);text-align:right;white-space:nowrap}
.day-row.rest{cursor:default}
.day-row.rest:hover{background:none}
.pill.now{border-color:var(--gold);color:var(--goldT)}
@media (max-width:760px){
 .module-head{grid-template-columns:16px minmax(0,1fr) 44px;gap:12px}
 .module-head .wk{display:none}
 .module-head .bar{display:none}
 .day-row{grid-template-columns:16px minmax(0,1fr);gap:10px;margin-left:16px}
 .day-row .n{grid-column:2;font-size:13px;color:var(--ter)}
 .day-row .what{grid-column:2}
 .day-row .scores{grid-column:2;justify-content:flex-start;margin-top:6px}
 .day-row .when{display:none}
}

/* Records: a search field, filter chips, and a week heading between runs of days. */
.searchbar{margin-top:26px;padding-top:22px;border-top:1px solid var(--border)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{background:none;border:1px solid var(--border);border-radius:100px;padding:6px 14px;font:400 13px var(--sans);color:var(--sec);transition:color .15s,border-color .15s,background .15s}
.chip:hover{color:var(--mid);border-color:var(--gold)}
.chip.on{color:var(--mid);border-color:var(--gold);background:rgba(184,137,43,.09)}
.chip.small{padding:4px 11px;font-size:12px}
.note-acts{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:14px}
.link.small{font-size:13px}
.link.warn{color:var(--bad)}
.check{display:inline-flex;align-items:center;gap:10px;font:400 14px var(--sans);color:var(--sec);cursor:pointer}
.check input{width:16px;height:16px;accent-color:var(--gold);cursor:pointer}
.ledger-head{padding:26px 0 6px}
.ledger-head:first-child{padding-top:8px}
.entry.tap{cursor:pointer}
.entry.tap:hover .day{color:var(--gold)}
.ledger{margin-top:56px;display:flex;flex-direction:column}
.entry{display:grid;grid-template-columns:minmax(140px,200px) minmax(0,1fr);gap:12px 32px;padding:28px 0;border-top:1px solid var(--border)}
.entry .day{font:400 22px/1.2 var(--serif);color:var(--mid)}
.entry .date{font:400 13px/1.5 var(--sans);color:var(--sec);margin-top:4px}
.entry p{font:400 18px/1.6 var(--serif);margin:0;color:var(--body);white-space:pre-wrap}
@media (max-width:520px){.entry{grid-template-columns:1fr;gap:8px}}
.reader-p{font:400 19px/1.65 var(--serif);color:var(--body);margin:0 0 18px}

/* ---------- Profile ---------- */
.avatar.big{width:92px;height:92px;font-size:34px;font-weight:400;flex:none}
.intent.big{font-size:clamp(26px,3.5cqw,38px);line-height:1.25;max-width:640px;margin-bottom:10px}
.stats{margin-top:44px;display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:32px}
.stats>div{border-top:1px solid var(--border);padding-top:18px}
.stats .n{font:300 48px/1 var(--serif);color:var(--mid)}
.stats .l{font:400 14px/1.4 var(--sans);color:var(--sec);margin-top:8px}
.link:disabled{opacity:0;pointer-events:none}

/* ---------- Events, calendar, reminders ---------- */
.ev-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:56px;margin-top:44px}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center}
.cal-head{font:500 11px/1 var(--sans);letter-spacing:.2em;color:var(--sec);padding:0 0 14px}
.cal-cell{aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border-radius:50%;font:400 17px var(--serif);color:var(--body)}
.cal-cell.past{color:var(--ter)}.cal-cell.today{background:var(--mid);color:var(--cream)}
.cal-cell i{width:4px;height:4px;border-radius:50%;background:transparent}.cal-cell i.dot{background:var(--gold)}.cal-cell.today i.dot{background:var(--goldB)}
.rem{padding:18px 0;border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:12px}
.rem-name{font:400 16px/1.3 var(--sans);color:var(--body)}.rem-when{font:400 13px/1.4 var(--sans);color:var(--sec);margin-top:2px}
.switch{width:42px;height:24px;border-radius:12px;border:0;padding:0;background:var(--border);position:relative;flex:none;transition:background .25s}
.switch span{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--wcream);transition:transform .25s}
.switch.on{background:var(--gold)}.switch.on span{transform:translateX(18px)}
input.field.time{width:auto;min-height:36px;padding:6px 0;font-size:15px}
.daytoggles{display:flex;gap:6px}
.daytoggles button{width:30px;height:30px;border-radius:50%;border:1px solid var(--border);background:transparent;color:var(--sec);font:400 12px var(--sans);padding:0}
.daytoggles button.on{background:var(--navy);color:var(--cream);border-color:var(--navy)}
.ev{display:grid;grid-template-columns:64px minmax(0,1fr);gap:20px;padding:22px 0;border-bottom:1px solid var(--border)}
.ev-d{text-align:center}.ev-d .n{font:300 34px/1 var(--serif);color:var(--mid)}.ev-d .wd{font:500 11px/1 var(--sans);letter-spacing:.2em;color:var(--sec);margin-top:4px}
.ev-t{font:400 22px/1.2 var(--serif);color:var(--mid)}.ev-m{font:400 14px/1.5 var(--sans);color:var(--sec);margin-top:4px}
.ev p{font:400 15px/1.6 var(--sans);color:var(--body);margin:8px 0 0}
.alarm{position:fixed;inset:0;z-index:40;background:#060814 radial-gradient(ellipse 80% 55% at 50% 115%,rgba(43,53,102,.85),transparent 70%);color:var(--cream);display:flex;align-items:center;justify-content:center;padding:40px 24px;text-align:center}
.alarm-in{max-width:560px;display:flex;flex-direction:column;align-items:center}
.alarm .eyebrow{color:var(--goldM);letter-spacing:.34em}
.alarm h1{color:var(--cream);font-size:clamp(36px,6cqw,64px);margin-top:22px}
.alarm p{font:400 16px/1.6 var(--sans);color:var(--ink-dim);margin:18px 0 8px;max-width:400px}

/* ---------- legacy pieces kept until their section is rebuilt ---------- */
.screen{width:100%}
.screen.paper .inner{max-width:680px;margin:0 auto}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:24px;flex-wrap:wrap}
.top .back{background:none;border:0;padding:0;font:400 14px var(--sans);color:var(--sec);letter-spacing:.04em}.top .back:hover{color:var(--mid)}
.pill{display:inline-block;padding:0;font:400 13px var(--sans);letter-spacing:.04em;color:var(--sec)}
.pill.ok{color:var(--goldT)}.pill.warn{color:var(--bad)}
.steps{display:flex;gap:6px;margin:0 0 28px}.steps i{width:10px;height:10px;border-radius:50%;border:1px solid var(--border)}.steps i.done{background:var(--gold);border-color:var(--gold)}.steps i.cur{border-color:var(--gold)}
.reader h2{font:italic 400 30px/1.2 var(--serif);color:var(--mid);margin:16px 0 36px;text-align:center}
.reader h3{font:400 24px/1.2 var(--serif);color:var(--navy);margin:30px 0 10px}
.reader p{font:400 21px/1.65 var(--serif);margin:0 0 22px}.reader ul{margin:0 0 22px;padding-left:22px;font:400 19px/1.6 var(--serif)}.reader li{margin:6px 0}
.reader blockquote{margin:22px 0;padding:0 0 0 20px;border-left:1px solid var(--gold);font:italic 400 21px/1.5 var(--serif);color:var(--navy)}
.reader .epi{font:italic 300 22px/1.4 var(--serif);color:var(--navy);text-align:center;margin:0 0 28px}
.reader .dim{text-align:center}
.keyidea{border-top:1px solid var(--border);padding-top:18px;margin:32px 0}
.opt{display:block;width:100%;text-align:left;border:0;border-bottom:1px solid var(--border);background:transparent;padding:14px 0;font:400 16px/1.5 var(--sans);color:var(--body);border-radius:0}
.opt.sel{color:var(--mid);border-bottom-color:var(--gold);box-shadow:inset 0 -1px 0 var(--gold)}.opt.right{color:var(--goldT)}.opt.wrong{color:var(--bad);text-decoration:line-through}
.q{margin:32px 0 6px;font:400 20px/1.4 var(--serif);color:var(--mid)}
table{width:100%;border-collapse:collapse;font-size:15px}th,td{text-align:left;padding:12px 8px 12px 0;border-bottom:1px solid var(--border)}th{font:500 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--sec)}
.week{display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:16px;padding:18px 0;border-top:1px solid var(--border);cursor:pointer}
.week .n{font:300 30px/1 var(--serif);color:var(--mid)}
.week .grow>div:first-child{font:400 20px/1.2 var(--serif);color:var(--mid)}
.daygrid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:10px}
.toast{position:fixed;left:50%;bottom:32px;transform:translateX(-50%);background:var(--mid);color:var(--cream);padding:12px 20px;border-radius:2px;font:400 14px var(--sans);letter-spacing:.02em;z-index:30}
.chip{display:inline-block;padding:4px 0;font-size:13px;color:var(--sec);margin:4px 14px 0 0}
/* ---------- breathing player (the sacred dark surface) ---------- */
.phase-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}
.phase-head h1{font-size:clamp(34px,4.5cqw,52px)}
.phase-links{display:flex;gap:26px;flex-wrap:wrap}
.phase-link{background:none;border:0;padding:0;font:400 19px var(--serif);color:var(--sec);display:flex;align-items:center;gap:8px}
.phase-link i{width:6px;height:6px;border-radius:50%;background:var(--border);display:inline-block}
.phase-link.on{color:var(--mid)}.phase-link.on i{background:var(--gold)}
/* Not yet reachable: visible, so the shape of the day is clear, but plainly not open. */
.phase-link.locked,.substeps button.locked{color:var(--ter);opacity:.55;cursor:default}
.breath{margin-top:36px;background:#060814 radial-gradient(ellipse 60% 70% at 50% 100%,rgba(43,53,102,.7),transparent 70%);border-radius:6px;color:var(--cream);padding:56px 32px 44px;display:flex;flex-direction:column;align-items:center;text-align:center}
.orb-box{position:relative;width:260px;height:260px;display:flex;align-items:center;justify-content:center}
.orb-box .ring{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(232,197,115,.25)}
.orb-box .halo{position:absolute;inset:-22px;border-radius:50%;border:1px solid rgba(232,197,115,.12);animation:qsPulse 6s ease-in-out infinite}
.orb{width:240px;height:240px;border-radius:50%;background:radial-gradient(circle at 50% 40%,#E8C573,#B8892B 70%);box-shadow:0 0 80px rgba(212,164,76,.35);transform:scale(.62);will-change:transform}
.orb-text{position:absolute;display:flex;flex-direction:column;align-items:center;gap:2px}
.orb-word{font:400 30px var(--serif);color:var(--mid);letter-spacing:.04em}
.orb-count{font:300 22px/1 var(--serif);color:rgba(6,8,20,.7);min-height:22px;font-variant-numeric:tabular-nums}
.b-tones{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center;margin-top:16px;font:400 12px var(--sans);letter-spacing:.08em;color:rgba(236,232,223,.6)}
.b-tones span{margin-right:8px}
.b-tone{background:transparent;border:1px solid rgba(236,232,223,.22);color:rgba(236,232,223,.7);border-radius:2px;padding:6px 9px;font:400 12px var(--sans);letter-spacing:.06em;min-width:38px}
.b-tone.on{border-color:var(--goldB);color:var(--goldB)}
.b-toneinfo{margin-top:12px;font:400 13px/1.5 var(--sans);color:rgba(236,232,223,.7);max-width:440px;min-height:20px}
.b-sub{margin-top:34px;font:400 15px/1.5 var(--sans);color:var(--ink-dim)}
.b-round{margin-top:6px;font:400 13px/1 var(--sans);letter-spacing:.2em;color:var(--goldB);text-transform:uppercase}
.b-btn{margin-top:32px;background:transparent;color:var(--cream);border:1px solid var(--ink-line);padding:14px 30px;font:500 13px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;border-radius:2px;min-width:160px;transition:color .15s,border-color .15s}
.b-btn:hover{border-color:var(--goldB);color:var(--goldB)}
.b-toggles{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;margin-top:18px}
.b-toggle{background:none;border:0;padding:6px;font:400 13px var(--sans);letter-spacing:.08em;color:rgba(236,232,223,.6);display:flex;align-items:center;gap:8px}
.b-toggle i{width:6px;height:6px;border-radius:50%;background:currentColor}
.b-toggle.on{color:var(--goldB)}
.b-caption{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:24px;flex-wrap:wrap}
.b-caption p{font:400 15px/1.6 var(--sans);color:var(--sec);margin:0;max-width:520px}
@media (prefers-reduced-motion:reduce){.orb{transition:none!important;transform:scale(.8)!important;animation:qsPulse 6s ease-in-out infinite}}
/* quick access: "Breathe" in the header (desktop) and a floating gold dot (mobile) */
.breathe-btn{background:none;border:0;padding:6px 0;font:400 14px var(--sans);letter-spacing:.05em;color:var(--sec);display:flex;align-items:center;gap:8px}
.breathe-btn i{width:8px;height:8px;border-radius:50%;background:radial-gradient(circle at 50% 40%,#E8C573,#B8892B 70%);box-shadow:0 0 12px rgba(212,164,76,.5)}
.breathe-btn:hover{color:var(--mid)}
.fab{display:none;position:fixed;right:18px;bottom:calc(92px + env(safe-area-inset-bottom,16px));width:52px;height:52px;border-radius:50%;border:1px solid rgba(184,137,43,.5);background:var(--mid);padding:0;align-items:center;justify-content:center;z-index:25;box-shadow:0 0 28px rgba(212,164,76,.25)}
.fab i{width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 50% 40%,#E8C573,#B8892B 70%);animation:fabBreath 9s cubic-bezier(.45,0,.35,1) infinite}
@keyframes fabBreath{0%,100%{transform:scale(.62)}33%,66%{transform:scale(1)}}
@media (max-width:720px){.breathe-btn{display:none}.fab{display:flex}}