@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap");

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--coach-font-body);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
h1,h2,h3,.display { font-family: var(--coach-font-display); color: var(--coach-heading); letter-spacing: -.01em; }
a { color: var(--teal-700); text-decoration: none; }
img { max-width: 100%; display: block; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--sp-4); }

/* ---------- App bar ---------- */
.appbar {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
/* Once logged in, the dashboard has its own header (logo = home/dashboard nav),
   so drop the marketing app-bar and the floating install chip for a clean top. */
body.authed .appbar { display: none !important; }
body.authed .a2hs   { display: none !important; }
.appbar .row { display: flex; align-items: center; gap: var(--sp-4); height: 64px; }
.brand { display: flex; align-items: center; gap: var(--sp-3); }
.brand img { height: 34px; width: auto; }
.spacer { flex: 1; }

/* role switcher (dev/demo) */
.seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 3px; }
.seg button { border: 0; background: transparent; font: 600 var(--fs-sm)/1 var(--coach-font-body); color: var(--muted); padding: 8px 14px; border-radius: var(--r-pill); cursor: pointer; }
.seg button[aria-selected="true"] { background: var(--surface); color: var(--navy); box-shadow: var(--shadow-1); }

/* ---------- Generic ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
.pad { padding: var(--sp-5); }
.grid { display: grid; gap: var(--sp-4); }
.muted { color: var(--muted); }
.pill { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:var(--r-pill); font: 600 var(--fs-xs)/1 var(--coach-font-body); }
.pill.gold { background: var(--gold-100); color: var(--gold-600); }
.pill.teal { background: var(--teal-100); color: var(--teal-700); }
.btn { border:0; border-radius: var(--r-md); font:600 var(--fs-sm) var(--coach-font-body); padding:10px 16px; cursor:pointer; }
.btn.primary { background: var(--coach-primary); color:#fff; }
.btn.ghost { background: var(--surface-2); color: var(--navy); border:1px solid var(--line); }
.section-title { font-size: var(--fs-lg); margin-bottom: var(--sp-3); }
.view { display:none; padding-block: var(--sp-6); }
.view.active { display:block; }

/* ---------- STUDENT: Summit home ---------- */
.summit-hero {
  position: relative; overflow: hidden; color:#fff;
  background:
    radial-gradient(120% 120% at 80% -10%, color-mix(in srgb, var(--coach-primary) 55%, var(--navy)) 0%, var(--navy) 60%);
  border-radius: var(--r-lg);
}
.summit-hero .pad { padding: var(--sp-6); }
.summit-hero h2 { color:#fff; }
.touch-ring { display:flex; align-items:center; gap:var(--sp-6); flex-wrap:wrap; }
.ring { --p:34; width:180px; height:180px; border-radius:50%; display:grid; place-items:center; flex:0 0 auto;
  background: conic-gradient(var(--gold) calc(var(--p)*1%), rgba(255,255,255,.14) 0); }
.ring .inner { width:150px; height:150px; border-radius:50%; background: var(--navy); display:grid; place-items:center; text-align:center; }
.ring .count { font-family:var(--coach-font-display); font-size:2rem; font-weight:800; color:#fff; line-height:1; }
.ring .of { font-size:var(--fs-xs); color:rgba(255,255,255,.7); margin-top:4px; letter-spacing:.08em; }
.summit-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-3); margin-top:var(--sp-5); }
.stat { background: rgba(255,255,255,.08); border-radius: var(--r-md); padding: var(--sp-4); }
.stat .n { font-family:var(--coach-font-display); font-size:var(--fs-xl); font-weight:700; }
.stat .l { font-size:var(--fs-xs); color:rgba(255,255,255,.75); text-transform:uppercase; letter-spacing:.06em; }
.milestones { display:flex; gap:8px; margin-top:var(--sp-5); flex-wrap:wrap; }
.ms { font:700 var(--fs-xs) var(--coach-font-body); padding:6px 10px; border-radius:var(--r-pill); background:rgba(255,255,255,.1); color:rgba(255,255,255,.65); }
.ms.hit { background:var(--gold); color:var(--navy); }

.assign { display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-4); border-bottom:1px solid var(--line); }
.assign:last-child { border-bottom:0; }
.assign .chk { width:22px; height:22px; border-radius:6px; border:2px solid var(--teal); flex:0 0 auto; }
.assign .tv { margin-left:auto; }

/* ---------- COACH: dashboard ---------- */
.kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-4); }
.kpi .n { font-family:var(--coach-font-display); font-size:var(--fs-2xl); font-weight:800; color:var(--navy); }
.kpi .l { font-size:var(--fs-sm); color:var(--muted); }
.roster-row { display:grid; grid-template-columns: 1.4fr 1fr 90px 90px; gap:var(--sp-4); align-items:center; padding:var(--sp-4); border-bottom:1px solid var(--line); }
.roster-row:last-child{border-bottom:0}
.who { display:flex; align-items:center; gap:var(--sp-3); }
.avatar { width:40px; height:40px; border-radius:50%; background:var(--teal-100); color:var(--teal-700); display:grid; place-items:center; font-weight:700; }
.bar { height:8px; border-radius:var(--r-pill); background:var(--surface-2); overflow:hidden; }
.bar > span { display:block; height:100%; background: linear-gradient(90deg, var(--teal), var(--gold)); }

/* theme controls */
.theme-controls { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:var(--sp-4); }
.field label { display:block; font:600 var(--fs-xs) var(--coach-font-body); color:var(--muted); text-transform:uppercase; letter-spacing:.06em; margin-bottom:6px; }
.field input, .field select { width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:var(--r-md); font:inherit; }

.btn.sm{padding:6px 12px;font-size:var(--fs-xs)}
.linklike{background:none;border:0;color:var(--teal-700);font:inherit;font-weight:600;cursor:pointer;padding:0}

/* ---------- Brand band (wordmark + prominent taglines) ---------- */
.brandband{text-align:center;padding:var(--sp-8) var(--sp-4) var(--sp-6)}
.bb-logo{height:64px;width:auto;margin:0 auto var(--sp-5)}
.bb-tag{font-size:clamp(1.15rem,4.4vw,2.6rem);line-height:1.18;font-weight:800;letter-spacing:-.01em;text-align:center}
.bb-line{display:block}
.bb-tag .t-teal{margin-left:.28em}
.bb-tag .t-navy{color:var(--navy)} .bb-tag .t-teal{color:var(--teal-700)} .bb-tag .t-gold{color:var(--gold-600)}
.bb-sub{margin-top:var(--sp-3);font-size:clamp(1rem,2.6vw,1.25rem);color:var(--muted);font-style:italic;letter-spacing:.01em}
@media (min-width:721px){ .bb-logo{height:84px} }

/* ---------- Home CTAs ---------- */
.cta-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--sp-4);margin-bottom:var(--sp-6)}
.cta{text-align:left;border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-5);cursor:pointer;box-shadow:var(--shadow-1);transition:transform .12s,box-shadow .12s;color:#fff}
.cta:hover{transform:translateY(-2px);box-shadow:var(--shadow-2)}
.cta-student{background:radial-gradient(120% 120% at 80% -10%, var(--teal) 0%, var(--navy) 90%)}
.cta-coach{background:radial-gradient(120% 120% at 80% -10%, var(--gold-600) 0%, var(--navy) 95%)}
/* ---------- Footer (discreet coach/advocate entry) ---------- */
.site-foot{border-top:1px solid var(--line);margin-top:var(--sp-10);padding:var(--sp-6) 0;color:var(--muted)}
.site-foot .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap}
.foot-brand{font-size:var(--fs-xs)}
.foot-nav{display:flex;gap:var(--sp-4);flex-wrap:wrap}
.foot-nav .linklike{font-size:var(--fs-xs);color:var(--muted);font-weight:500}
.foot-nav .linklike:hover{color:var(--teal-700)}
.foot-advocate{opacity:.85}
.cta-k{display:block;font-family:var(--coach-font-display);font-size:var(--fs-lg);font-weight:800}
.cta-s{display:block;margin-top:6px;font-size:var(--fs-sm);opacity:.9}
.sample-toggle{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;margin-bottom:var(--sp-4)}
.preview{display:none} .preview.active{display:block}
.kpis-2{grid-template-columns:repeat(2,1fr);max-width:520px}
.privacy-note{background:var(--teal-100);color:var(--teal-700);border:1px solid var(--teal);border-radius:var(--r-md);padding:10px 14px;font-size:var(--fs-sm);font-weight:500}

/* ---------- In-app video player + thumbnails ---------- */
.vid-overlay{position:fixed;inset:0;background:rgba(3,10,20,.82);backdrop-filter:blur(4px);z-index:9998;display:grid;place-items:center;padding:16px}
.vid-box{width:min(920px,96vw);background:var(--navy);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-3)}
.vid-head{display:flex;justify-content:space-between;align-items:center;color:#fff;padding:10px 14px;font-weight:600;font-size:.9rem}
.vid-x{background:rgba(255,255,255,.15);border:0;color:#fff;border-radius:50%;width:30px;height:30px;cursor:pointer;flex:0 0 auto}
.vthumb{position:relative;border:0;padding:0;background:none;cursor:pointer;border-radius:var(--r-md);overflow:hidden;width:120px;height:68px;flex:0 0 auto;box-shadow:var(--shadow-1)}
.vthumb img{width:100%;height:100%;object-fit:cover;display:block}
.vthumb-play{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:1.3rem;background:rgba(7,29,59,.32)}

/* ---------- Celebration ---------- */
.celebrate{position:fixed;left:50%;top:40%;transform:translate(-50%,-50%) scale(.8);z-index:10000;background:var(--navy);color:#fff;padding:14px 24px;border-radius:var(--r-pill);font-family:var(--coach-font-display);font-weight:800;font-size:1.2rem;box-shadow:var(--shadow-3);opacity:0;transition:opacity .25s,transform .25s;pointer-events:none;text-align:center}
.celebrate.show{opacity:1;transform:translate(-50%,-50%) scale(1)}

/* ---------- Messaging ---------- */
.msgs{display:flex;flex-direction:column;gap:8px;max-height:360px;overflow:auto;padding:12px}
.msg{max-width:82%;padding:8px 12px;border-radius:14px;font-size:.9rem;line-height:1.35}
.msg.me{align-self:flex-end;background:var(--teal);color:#fff}
.msg.them{align-self:flex-start;background:var(--surface-2);color:var(--ink)}
.msg .who{display:block;font-size:.66rem;opacity:.75;margin-bottom:2px}
.msg-input{display:flex;gap:8px;padding:10px;border-top:1px solid var(--line)}
.msg-input input{flex:1;padding:9px 11px;border:1px solid var(--line);border-radius:var(--r-md);font:inherit}

/* ---------- Week schedule (Skylight-style stacked) ---------- */
.wk-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.wk{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.wk-day{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);min-height:130px;padding:6px}
.wk-day.today{outline:2px solid var(--teal);outline-offset:-1px}
.wk-day h5{font-size:.7rem;text-transform:uppercase;color:var(--muted);margin-bottom:6px;text-align:center;font-weight:700}
.wk-day .dnum{color:var(--navy)}
.lesson-card{background:var(--teal-100);border-left:3px solid var(--teal);border-radius:6px;padding:4px 6px;margin-bottom:5px;font-size:.72rem;cursor:default}
.lesson-card .lt{font-weight:700;color:var(--teal-700)}
.lesson-card.busy{background:var(--surface-2);border-left-color:var(--muted);color:var(--muted)}
.lesson-card.open{background:transparent;border:1px dashed var(--teal);border-left:3px dashed var(--teal)}
.lesson-card.done{opacity:.7;border-left-color:var(--success)}
@media(max-width:720px){ .wk{grid-template-columns:1fr} .wk-day{min-height:0} }
.upcoming{display:flex;flex-direction:column;gap:8px}
.upcoming .lesson-card{cursor:default}

/* ---------- Collapsible assignment cards ---------- */
.asg-card{border:1px solid var(--line);border-radius:var(--r-md);margin-bottom:8px;overflow:hidden;background:var(--surface)}
.asg-card>summary{list-style:none;cursor:pointer;padding:10px 12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.asg-card>summary::-webkit-details-marker{display:none}
.asg-card>summary:before{content:"▸";color:var(--muted);transition:transform .15s}
.asg-card[open]>summary:before{transform:rotate(90deg)}
.asg-card .asg-title{font-weight:600;flex:1;min-width:120px}
.asg-body{padding:10px 12px 12px;font-size:var(--fs-sm);border-top:1px solid var(--line)}
.verify-box{background:var(--gold-100);border-left:3px solid var(--gold);border-radius:6px;padding:8px 10px;margin:8px 0;font-size:var(--fs-sm)}
.ch-in{padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-md);width:90px;font:inherit}

/* ---------- Guided course runner ---------- */
.course-ov{position:fixed;inset:0;background:rgba(3,10,20,.9);z-index:9998;display:grid;place-items:center;padding:14px;overflow:auto}
.course-box{width:min(560px,96vw);background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-3);padding:18px}
.course-narr{background:var(--teal-100);border-left:3px solid var(--teal);border-radius:10px;padding:12px 14px;font-size:.95rem;line-height:1.5;margin-bottom:12px}
.course-big{font-family:var(--coach-font-display);font-weight:800;font-size:2rem;text-align:center;color:var(--navy);margin:14px 0}
.course-nav{display:flex;justify-content:space-between;gap:10px;margin-top:14px;flex-wrap:wrap}
.goal-group>h4{font-family:var(--coach-font-display);font-size:var(--fs-md);color:var(--navy);margin:16px 0 6px;display:flex;align-items:center;gap:8px}

/* ---------- Authenticated header logo (shared coach/student shell) ---------- */
.authhdr{display:flex;align-items:center;gap:6px;padding:0 0 10px;margin-bottom:10px;border-bottom:1px solid var(--line);flex-wrap:nowrap}
.authhdr-logo{height:52px;width:auto;cursor:pointer;flex:0 0 auto;margin-right:12px}
.authhdr .btn{white-space:nowrap;flex:0 0 auto;padding:6px 9px}
@media(min-width:721px){ .authhdr-logo{height:68px} }
@media(max-width:430px){ .authhdr-logo{height:46px} .authhdr .btn{padding:6px 8px;font-size:.82rem} }
/* Once logged in there's no marketing app-bar: pull the card up + shift logo left / buttons off the right edge. */
body.authed .reg{margin-top:8px;padding:12px 14px 20px 10px}

/* Coach roster: mobile-first card (name top-left, photo + goal/level below) — no overlap. */
.roster-card{padding:var(--sp-4);border-bottom:1px solid var(--line)}
.roster-card:last-child{border-bottom:0}
.roster-card .rc-name{font-weight:700;font-size:1.06rem;display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px;line-height:1.15}
.roster-card .rc-body{display:flex;gap:14px;align-items:center}
.roster-card .rc-info{flex:1;min-width:0}

/* ---------- Registration ---------- */
.reg{max-width:640px;margin:var(--sp-5) auto var(--sp-10);padding:var(--sp-5)}
.reg-top{display:flex;align-items:center;gap:var(--sp-4);margin-bottom:var(--sp-4)}
.reg-title{font-family:var(--coach-font-display);font-weight:800;color:var(--navy)}
.reg-steps{display:flex;align-items:center;gap:6px;margin-bottom:var(--sp-5)}
.reg-steps i{flex:1;height:2px;background:var(--line)}
.reg-steps .dot{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:.78rem;font-weight:800;background:var(--surface-2);color:var(--muted);border:1px solid var(--line);flex:0 0 auto}
.reg-steps .dot.on{background:var(--teal);color:#fff;border-color:var(--teal)}
.reg-steps .dot.done{background:var(--gold);color:var(--navy);border-color:var(--gold)}
.reg-body h3{font-size:var(--fs-lg);margin-bottom:var(--sp-3)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4)}
.form-grid .field:only-child,.form-grid .field:last-child:nth-child(odd){grid-column:1/-1}
.field textarea{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-md);font:inherit;min-height:72px}
.reg-nav{display:flex;justify-content:space-between;margin-top:var(--sp-6)}
.coach-list{display:grid;gap:8px;margin:10px 0}
.coach-card{text-align:left;border:1px solid var(--line);border-radius:var(--r-md);padding:10px 12px;background:var(--surface);cursor:pointer}
.coach-card:hover{border-color:var(--teal)}
.coach-card.sel{border-color:var(--teal);box-shadow:inset 0 0 0 1px var(--teal);background:var(--teal-100)}
.coach-card b{display:block} .coach-card span{font-size:var(--fs-sm);color:var(--muted)}
.chosen{margin-top:10px;padding:10px 12px;background:var(--teal-100);border-radius:var(--r-md);font-size:var(--fs-sm)}
.fallback{margin-top:12px;padding-top:12px;border-top:1px dashed var(--line)}
.doc{border:1px solid var(--line);border-radius:var(--r-md);padding:12px;margin-bottom:10px}
.doc-h{display:flex;gap:8px;align-items:flex-start;cursor:pointer} .doc-h input{margin-top:3px}
.doc-b{font-size:var(--fs-sm);color:var(--muted);margin-top:8px;line-height:1.5}
.review{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.rev-row{display:flex;justify-content:space-between;gap:12px;padding:9px 12px;border-bottom:1px solid var(--line);font-size:var(--fs-sm)}
.rev-row:last-child{border-bottom:0} .rev-row span{color:var(--muted);text-transform:capitalize}
.ok-note{margin-top:12px;padding:10px 12px;border-radius:var(--r-md);background:#e7f7ef;color:var(--success);font-weight:600;font-size:var(--fs-sm)}
.warn-note{margin-top:12px;padding:10px 12px;border-radius:var(--r-md);background:var(--gold-100);color:var(--gold-600);font-weight:600;font-size:var(--fs-sm)}

@media (max-width:720px){
  .summit-stats,.kpis{grid-template-columns:repeat(2,1fr)}
  .roster-row{grid-template-columns:1.2fr 1fr; }
  .roster-row .hide-sm{display:none}
  .cta-row{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  /* on phones the top-left install chip carries the brand mark; hide the appbar wordmark to avoid overlap */
  .appbar .brand{display:none}
}