/* Clock That by Launch District. Midnight navy instrument panel with auburn clock faces and flat champagne gold. */
:root{
  color-scheme:dark;
  --navy:#0B1420; --slate:#152332; --slate-2:#1C2D3F; --line:#2A3D52;
  --auburn:#421813; --auburn-2:#642C22;
  --gold:#D9B678; --gold-ink:#1A1408; --ivory:#F5F1E8; --muted:#A9B6C5;
  --good:#8FD6A8; --warn:#D9B678; --bad:#F2A08F;
  --font:"Manrope","Avenir Next","Segoe UI",Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{background:var(--navy)}
body{margin:0;color:var(--ivory);font:500 16px/1.5 var(--font);padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));-webkit-font-smoothing:antialiased}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
h1,h2,p{margin:0}
h1,h2{font-weight:800;line-height:1.15;letter-spacing:-.01em;text-wrap:balance}
input[type=text],input[type=email],input[type=password],input[type=number],textarea{width:100%;background:var(--navy);border:1px solid var(--line);border-radius:10px;padding:12px 13px;resize:vertical}
textarea::placeholder{color:#7f8fa1}
label{display:block}
.label{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.muted{color:var(--muted)}.small{font-size:14px}
.ico{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.logo{flex:none;display:block}

.top{position:sticky;top:0;z-index:9;background:var(--navy);margin-inline:calc(-1 * max(16px,env(safe-area-inset-left,0px)));padding:calc(10px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) 10px max(16px,env(safe-area-inset-left,0px));border-bottom:1px solid var(--line)}
.top-in{max-width:1120px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px}
.lockup{display:flex;align-items:center;gap:10px;min-width:0}
.lockup b{display:block;font-size:17px;font-weight:800;line-height:1.1;white-space:nowrap}
.lockup span{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.seg{display:flex;border:1px solid var(--line);border-radius:10px;padding:3px;width:max-content;max-width:100%}
.seg button{padding:6px 12px;border-radius:7px;font-size:14px;font-weight:600;color:var(--muted);white-space:nowrap}
.seg button[aria-pressed=true]{background:var(--gold);color:var(--gold-ink)}

.member{max-width:520px;margin:0 auto;padding-block:16px 112px;display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:8;background:var(--navy);border-top:1px solid var(--line);padding:6px max(16px,env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.tabs div{max-width:520px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.tabs button{position:relative;display:grid;justify-items:center;gap:2px;padding:6px 4px;font-size:12px;font-weight:600;color:var(--muted);border-radius:10px}
.tabs button[aria-current=page]{color:var(--gold)}
.dot{position:absolute;top:4px;left:calc(50% + 10px);width:8px;height:8px;border-radius:50%;background:var(--gold)}

.hero{background:var(--auburn);border-radius:18px;padding:22px 18px 18px;display:grid;gap:14px;justify-items:center;text-align:center}
.hero h1{font-size:30px}
.hero .sub{color:#E3D3C4;font-size:14px;margin-top:-8px}
.dial{position:relative;width:min(240px,66vw);aspect-ratio:1}
.dial svg{display:block;width:100%;height:100%}
.dial-arc{transition:stroke-dasharray .4s ease}
.dial-mid{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.dial-mid b{font-size:44px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.dial-mid span{font-size:13px;color:#E3D3C4;margin-top:4px}
.btn{display:block;width:100%;padding:14px;border-radius:12px;background:var(--gold);color:var(--gold-ink);font-weight:800;text-align:center;text-decoration:none}
.btn.ghost{background:none;border:1px solid var(--gold);color:var(--gold);font-weight:700}
.btn.inline{display:inline-block;width:auto;padding:9px 16px;font-size:14px}
.saved-line{color:var(--good);font-weight:700;font-size:14px}
.saved{color:var(--good);font-weight:700;text-align:center;padding:4px 0 10px}
.quote{background:var(--auburn-2);border-radius:14px;padding:16px 18px}
.quote p{font-size:19px;font-weight:600;line-height:1.35;margin-top:4px}
.quote .label{color:#E9D8C8}

.card{background:var(--slate);border:1px solid var(--line);border-radius:14px;padding:16px;display:grid;gap:10px;min-width:0}
.card h2{font-size:18px}
.glance{grid-template-columns:1fr 1fr}
.glance b{display:block;font-size:26px;font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums}
.glance small{font-size:14px;color:var(--muted);font-weight:600}
.glance span{font-size:13px;color:var(--muted)}
.care{font-size:13px;color:var(--muted);border-top:1px solid var(--line);padding-top:12px}

.ci-bar{display:flex;justify-content:space-between;align-items:center}
.back{color:var(--gold);font-weight:700;font-size:15px;padding:6px 0}
.ci-count{font-size:14px;color:var(--muted)}.ci-count b{color:var(--ivory)}
.progress{height:6px;background:var(--slate-2);border-radius:3px;overflow:hidden;margin-top:-8px}
.progress i{display:block;height:100%;width:0;background:var(--gold);transition:width .3s}
.page-h{font-size:22px;margin-top:6px}
.page-h.first{font-size:28px;margin-top:0}
.pillar h2{display:flex;align-items:center;gap:9px;color:var(--ivory)}
.pillar h2 .ico{color:var(--gold)}
.ct{margin-left:auto;font-size:14px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.habit{display:flex;gap:12px;align-items:center;width:100%;text-align:left;padding:10px 12px;background:var(--navy);border:1px solid var(--line);border-radius:10px;min-height:50px;transition:border-color .15s}
.habit i{flex:none;width:24px;height:24px;border-radius:7px;border:2px solid var(--muted);display:grid;place-items:center;font-style:normal;font-size:15px;font-weight:800;color:var(--gold-ink)}
.habit[aria-pressed=true]{border-color:var(--gold)}
.habit[aria-pressed=true] i{background:var(--gold);border-color:var(--gold)}
.habit[aria-pressed=true] i::after{content:"✓"}
.metric{display:grid;grid-template-columns:minmax(0,1fr) 48px 48px;gap:6px 8px;align-items:center;padding-block:4px}
.metric .t{min-width:0}
.metric .nm{display:block;font-size:15px;color:var(--muted)}
.metric .n{font-size:26px;font-weight:800;line-height:1.15;font-variant-numeric:tabular-nums}
.metric .n small{font-size:15px;font-weight:600;color:var(--muted)}
.step{height:48px;border-radius:10px;border:1px solid var(--line);font-size:24px;font-weight:600}
.step.plus{background:var(--gold);border-color:var(--gold);color:var(--gold-ink)}
.track{grid-column:1/-1;height:5px;border-radius:3px;background:var(--slate-2);overflow:hidden}
.track i{display:block;height:100%;background:var(--gold);transition:width .2s}
.feel{gap:14px}
.scale{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:6px}
.scale button{min-height:46px;border:1px solid var(--line);border-radius:10px;font-weight:700;font-variant-numeric:tabular-nums}
.scale button[aria-pressed=true]{background:var(--gold);border-color:var(--gold);color:var(--gold-ink)}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:6px}
.chip{padding:8px 12px;border:1px solid var(--line);border-radius:999px;font-size:14px;font-weight:600}
.chip[aria-pressed=true]{background:var(--ivory);border-color:var(--ivory);color:var(--navy)}

.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.stat{background:var(--slate);border:1px solid var(--line);border-radius:12px;padding:12px;min-width:0}
.stat b{display:block;font-size:24px;font-weight:800;line-height:1.15;font-variant-numeric:tabular-nums;white-space:nowrap}
.stat b.word{font-size:17px;line-height:28px;overflow-wrap:anywhere;white-space:normal}
.stat span{font-size:13px;color:var(--muted);line-height:1.25;display:block}
.promise{font-size:18px;font-weight:700;line-height:1.3}
.bars{display:grid;gap:8px}
.bar{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1.5fr) 60px;gap:8px;align-items:center;font-size:14px}
.bar div{height:7px;background:var(--slate-2);border-radius:4px;overflow:hidden}
.bar div i{display:block;height:100%;background:var(--gold)}
.bar span:last-child{text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.trio.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.trio div{background:var(--navy);border-radius:10px;padding:9px 10px;min-width:0}
.trio b{display:block;font-size:24px;font-weight:800;line-height:1.1}
.trio span{font-size:13px;color:var(--muted);display:block;line-height:1.2;margin-top:3px}
.wk{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.wk-d{display:grid;justify-items:center;gap:4px;font-size:12px;color:var(--muted)}
.wk-d.now{color:var(--ivory);font-weight:700}
.wk-v{font-size:11px;font-variant-numeric:tabular-nums}
.wk-b{position:relative;width:100%;height:86px;background:rgba(245,241,232,.07);border-radius:5px;overflow:hidden}
.wk-b i{position:absolute;left:0;right:0;bottom:0;background:var(--gold)}

.coach-top{display:grid;grid-template-columns:72px minmax(0,1fr);gap:14px;align-items:center}
.coach-top img{width:72px;height:72px;border-radius:50%;object-fit:cover;object-position:60% 15%;border:2px solid var(--gold)}
.coach-top h1{font-size:28px}
.thread{display:grid;gap:10px}
.msg{max-width:86%;padding:9px 13px;border-radius:12px;background:var(--slate-2);justify-self:start;min-width:0;overflow-wrap:anywhere}
.msg.me{justify-self:end;background:var(--gold);color:var(--gold-ink)}
.msg small{display:block;opacity:.75;font-size:12px;margin-top:2px}

.coach{max-width:1120px;margin:0 auto;padding-block:20px 40px;display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
.coach-head{display:flex;flex-wrap:wrap;gap:10px 24px;align-items:center;justify-content:space-between}
.coach-head h1{font-size:clamp(26px,4vw,34px)}
.kpi .stat b{font-size:clamp(24px,5vw,34px)}
.desk{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:16px;align-items:start}
.roster,.detail{display:grid;gap:8px;min-width:0}
.detail{gap:12px}
.row{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;width:100%;text-align:left;padding:11px 12px;background:var(--slate);border:1px solid var(--line);border-radius:12px}
.row[aria-current=true]{background:var(--auburn);border-color:var(--gold)}
.ava{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:800;background:var(--navy);border:1px solid var(--line)}
.who{flex:1 1 120px;min-width:0}
.who b{display:block;font-size:16px;font-weight:700;line-height:1.2}
.who span{display:block;font-size:13px;color:var(--muted)}
.row[aria-current=true] .who span{color:#E3D3C4}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;white-space:nowrap}
.pill i{width:8px;height:8px;border-radius:50%;background:currentColor}
.pill.good{color:var(--good)}.pill.warn{color:var(--warn)}.pill.bad{color:var(--bad)}.pill.plain{color:var(--muted)}.pill.hot{color:var(--gold)}
.sel{background:var(--auburn);border:1px solid var(--gold);border-radius:14px;padding:16px;display:grid;gap:10px}
.sel .small{color:#E3D3C4}
.sel-h{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;justify-content:space-between}
.sel-h h2{font-size:22px}
.sel .label{color:#E9D8C8}
.alert{color:var(--bad)!important;font-weight:700}
.detail .back{display:none;justify-self:start}
.notes{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.notes li{font-size:15px;border-top:1px solid var(--line);padding-top:8px}
.notes li span{display:block;font-size:12px;color:var(--muted)}
.req{border-top:1px solid var(--line);padding-top:10px;display:grid;gap:4px}
.req:first-of-type{border-top:0;padding-top:0}
.req-b{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.editor{display:grid;gap:6px;margin-top:6px}
.edit-row{display:flex;gap:6px;align-items:center}
.edit-row input{flex:1;min-width:0;padding:8px 11px}
.edit-row button{color:var(--muted);font-size:14px;padding:6px}
.tg{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.tg input{margin-top:4px}
.code{font-size:22px;font-weight:800;letter-spacing:.02em;color:var(--gold);overflow-wrap:anywhere}
.linkish{color:var(--muted);text-decoration:underline;font-size:15px;padding:10px;justify-self:center}

.entry{max-width:440px;margin:0 auto;padding-block:calc(32px + env(safe-area-inset-top,0px)) 40px;display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
.entry-top{display:grid;justify-items:center;text-align:center;gap:4px}
.entry-top h1{font-size:36px;font-weight:800;margin-top:8px}
.entry-top span{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.tag{text-align:center;font-size:18px;font-weight:700;color:var(--gold)}
.auth{gap:10px}.auth h2{font-size:22px;margin-bottom:4px}
.pay{background:var(--navy);border-radius:12px;padding:13px;display:grid;gap:10px;font-size:14px}
.agree{display:grid;grid-template-columns:22px 1fr;gap:10px;font-size:14px;color:var(--muted);align-items:start}.agree input{margin-top:4px;accent-color:var(--gold)}
#toast{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:20;background:var(--ivory);color:var(--navy);font-weight:600;padding:10px 16px;border-radius:12px;font-size:15px;width:max-content;max-width:min(90vw,420px);text-align:center;box-shadow:0 6px 20px rgba(0,0,0,.4)}

@media (min-width:861px){
  .member{padding-bottom:48px}
  .tabs{left:auto;right:calc(50% - 560px + 300px);top:env(safe-area-inset-top,0px);bottom:auto;background:none;border:0;padding:12px 0;z-index:10;width:300px}
  .tabs button{display:flex;justify-content:center;gap:6px;font-size:14px}
  .dot{position:static}
  .desk .detail .back{display:none}
}
@media (max-width:1180px) and (min-width:861px){.tabs{right:24px}}
@media (max-width:860px){
  .desk{grid-template-columns:minmax(0,1fr)}
  .desk.open .roster{display:none}
  .desk:not(.open) .detail{display:none}
  .detail .back{display:inline-block}
}
@media (max-width:380px){.dial-mid b{font-size:36px}.lockup span{display:none}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}