:root{
  --orange:#f96a00; --orange-dark:#d95700; --orange-soft:#ffe9d6;
  --black:#111; --ink:#1c1c1e;
  --muted:#6b7280; --line:#e5e7eb; --bg:#ffffff; --card:#fff; --red:#c62828;
  --reason:#b45309;
  --font-display:'Oswald','Arial Narrow',Arial,sans-serif;
  --field-h:48px; --field-radius:10px; --field-border:#cfd2d6;
}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--ink);padding-bottom:96px}
a{color:var(--orange-dark)}
h1{font-family:var(--font-display);font-weight:600;letter-spacing:.01em;font-size:1.55rem;margin:.4rem 0 .8rem}
h2{font-family:var(--font-display);font-weight:600;text-transform:uppercase;letter-spacing:.03em;font-size:1.15rem;margin:.2rem 0 .6rem}
h3{font-size:1rem;margin:.9rem 0 .4rem}
.muted{color:var(--muted)} .small{font-size:.82rem} .center{text-align:center}
.wrap{max-width:760px;margin:0 auto;padding:14px 14px 48px}

/* header: slim, white, logo left shown whole, identity block right */
.topbar{background:#fff;color:var(--ink);padding:8px 14px;display:flex;justify-content:space-between;align-items:center;gap:10px;border-bottom:3px solid var(--orange);position:sticky;top:0;z-index:20}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.logo{height:38px;width:auto;flex:none}
.brand-text{min-width:0}
.brand-name{font-family:var(--font-display);font-weight:600;letter-spacing:.01em;font-size:1rem;line-height:1.25;white-space:nowrap}
.brand-sub{font-size:.7rem;color:var(--muted);line-height:1.25}
.identity{flex:none;text-align:left}
.identity-name{font-weight:700;font-size:.9rem;line-height:1.25}
.identity-rank{display:flex;align-items:center;gap:5px;font-size:.8rem;color:var(--ink);line-height:1.3}
.identity-dot{color:var(--muted)}
@media (max-width:480px){ .brand-sub{white-space:normal} .brand-name{white-space:normal} }

/* bottom tab bar — icon over label, soft orange pill on the active icon */
.tabbar{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--line);display:flex;z-index:30;padding:5px max(12px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left))}
.tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:1px;text-align:center;color:var(--muted);text-decoration:none;padding:2px 2px 0;font-size:.8rem;font-weight:600}
.tab-icon{display:inline-flex;align-items:center;justify-content:center;padding:3px 16px;border-radius:999px;line-height:0}
.tab-icon svg{width:22px;height:22px}
.tabbar a.active{color:var(--orange-dark)}
.tabbar a.active .tab-icon{background:var(--orange-soft);color:var(--orange-dark)}

/* belt swatches */
.belt{position:relative;display:inline-block;width:46px;height:15px;border-radius:3px;border:1px solid #c7c7cc;flex:none;vertical-align:middle;overflow:hidden}
.belt-band{position:absolute;top:0;bottom:0;left:55%;width:27%}
.belt-dans{position:absolute;top:0;bottom:0;right:3px;display:flex;gap:2px}
.belt-dan{width:4px;background:#d4af37;display:block}
.belt-skinny{width:36px;height:11px}

/* cards, buttons, forms */
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;margin:0 0 14px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:14px}
.cards .card{margin:0}
.stat-grid{grid-template-columns:1fr 1fr}
.stat{text-align:left}
.stat-num{font-size:2.1rem;font-weight:800;line-height:1.05;color:var(--orange)}
.stat-num.small-stat{font-size:.95rem;padding-top:.45rem}
.stat-label{color:var(--muted);font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;margin-top:5px}
.alert-card{border-color:#f3c48a;background:#fff8ef}

/* home: greeting, section headers, sync line */
.greeting{text-transform:uppercase;font-size:1.9rem;margin:.2rem 0 .3rem}
.sync-line{color:var(--muted);font-size:.92rem;margin:0 0 16px}
.section-title{font-size:1.35rem;margin:22px 0 8px}
.section-sub{color:var(--muted);font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;margin:-4px 0 10px}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.section-head .section-title{margin-bottom:8px}
.section-link{color:var(--orange-dark);font-weight:600;text-decoration:none;white-space:nowrap}

/* needs attention rows */
.attn-list{list-style:none;margin:0;padding:0}
.attn-list li{padding:10px 0;border-bottom:1px solid var(--line)}
.attn-list li:first-child{padding-top:2px}
.attn-list li:last-child{border-bottom:none;padding-bottom:2px}
.attn-row{display:flex;gap:12px;align-items:flex-start;text-decoration:none;color:var(--ink)}
.avatar{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9rem;color:#44403c;flex:none}
.attn-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.attn-name{font-weight:700}
.attn-meta{color:var(--muted);font-size:.85rem;display:flex;align-items:center;gap:6px}
.attn-reason{color:var(--reason);font-size:.92rem}
.mini{display:inline-flex;flex:none}
.mini .belt{width:30px;height:10px}

/* the starting line — one tappable row */
a.startline-row{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.startline-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.startline-title{font-weight:700;font-size:1.02rem}
.startline-sub{color:var(--muted);font-size:.9rem}
.chevron{font-size:1.7rem;line-height:1;color:var(--muted);flex:none}

/* top 5 — points */
.top5{list-style:none;margin:0;padding:0}
.top5 li{display:flex;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.top5 li:first-child{padding-top:2px}
.top5 li:last-child{border-bottom:none;padding-bottom:2px}
.top5-num{font-family:var(--font-display);font-size:1.5rem;font-weight:600;color:var(--orange);width:1.7rem;text-align:center;flex:none}
.top5-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.top5-name{font-weight:700;color:var(--ink);text-decoration:none}
.top5-meta{color:var(--muted);font-size:.85rem;display:flex;align-items:center;gap:6px}
.top5-pts{font-weight:800;flex:none}

/* recent activity feed */
.feed{list-style:none;margin:0;padding:0}
.feed li{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-bottom:1px solid var(--line)}
.feed li:first-child{padding-top:2px}
.feed li:last-child{border-bottom:none;padding-bottom:2px}
.feed-badge{background:#f1f1f3;color:#55575c;border-radius:999px;padding:3px 9px;font-size:.66rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;flex:none;margin-top:2px}
.feed-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.feed-date{color:var(--muted);font-size:.83rem}

/* app menu rows */
.menu-row{display:block;width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);text-decoration:none;font-weight:600;font-size:.95rem;text-align:left;cursor:pointer}
button.menu-row{font-family:inherit}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 16px;border-radius:10px;border:1px solid transparent;font-size:.95rem;font-weight:600;cursor:pointer;text-decoration:none;background:#eee;color:var(--ink)}
.btn-orange{background:var(--orange);color:#fff}
.btn-orange:active{background:var(--orange-dark)}
.btn-dark{background:var(--black);color:#fff}
.btn-light{background:#fff;border-color:var(--line);color:var(--ink)}
.btn-danger{background:#fff;border-color:var(--red);color:var(--red)}
.btn-small{min-height:36px;padding:6px 10px;font-size:.82rem}
.btn-block{width:100%}
.badge-count{background:var(--orange);color:#fff;font-size:.72rem;font-weight:800;border-radius:999px;padding:1px 7px;margin-left:4px}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.row input[type="text"],.row input[type="search"]{flex:1;min-width:140px}
.wrap-row{gap:12px;margin-bottom:12px}
.stack{display:flex;flex-direction:column;gap:12px}
label{display:flex;flex-direction:column;gap:5px;font-size:.9rem;font-weight:600}

/* shared field tokens — date inputs and sibling selects sized identically,
   hardened for iOS WebKit (which otherwise inflates date inputs) */
input,select,textarea{font:inherit;font-weight:400;padding:11px;border:1px solid var(--field-border);border-radius:var(--field-radius);background:#fff;min-height:var(--field-h)}
textarea{min-height:auto}
input.num{width:86px;min-height:40px}
select{height:var(--field-h)}
input[type="date"]{-webkit-appearance:none;appearance:none;height:var(--field-h);line-height:var(--field-h);padding-top:0;padding-bottom:0}
input[type="date"]::-webkit-date-and-time-value{text-align:left;line-height:var(--field-h);margin:0;min-height:var(--field-h)}
input[type="date"]::-webkit-datetime-edit{line-height:var(--field-h);padding:0}
input[type="date"]::-webkit-calendar-picker-indicator{margin:0;padding:0}
.inline{display:inline}
form.inline{display:inline}
ul.plain{list-style:none;margin:0;padding:0}
ul.plain li{padding:7px 0;border-bottom:1px solid var(--line)}
ul.plain li:last-child{border-bottom:none}
ol.leaders{margin:0;padding-left:1.3rem}
ol.leaders li{padding:6px 0;border-bottom:1px solid var(--line)}
ol.leaders li:last-child{border-bottom:none}
.pts{float:right;font-weight:700}

/* flashes */
.flash{border-radius:10px;padding:11px 14px;margin:0 0 12px;font-size:.92rem}
.flash-ok{background:#e9f9ee;border:1px solid #9fd8ae}
.flash-error{background:#fdecec;border:1px solid #f0a3a3}
.flash-warn{background:#fff4e0;border:1px solid #f3c48a}
.code-big{font-size:1.6rem;font-weight:800;letter-spacing:2px;margin:6px 0}

/* segmented control (Ranked | The Starting Line) */
.segmented{display:flex;background:#f1f1f3;border:1px solid var(--line);border-radius:12px;padding:3px;gap:3px;margin-bottom:12px}
.segmented a{flex:1;text-align:center;padding:10px 6px;border-radius:9px;text-decoration:none;color:var(--ink);font-weight:600;font-size:.92rem}
.segmented a.active{background:#fff;color:var(--orange-dark);box-shadow:0 1px 3px rgba(0,0,0,.14)}

/* students — names never truncate */
.student-list{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.student-row{display:flex;gap:10px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:13px 14px;text-decoration:none;color:var(--ink);align-items:flex-start}
a.student-row{align-items:flex-start}
.sr-link{display:flex;gap:12px;flex:1;min-width:0;text-decoration:none;color:var(--ink);align-items:flex-start}
.sr-belt{padding-top:2px}
.sr-main{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.sr-name{font-weight:700;white-space:normal;overflow:visible;text-overflow:clip;word-break:break-word}
.sr-sub{color:var(--muted);font-size:.83rem;white-space:normal}
.sr-flag{color:var(--red);font-size:.8rem}
.sr-side{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:0 1 auto;min-width:0;max-width:55%}
.sr-side .sr-sub{overflow-wrap:anywhere;text-align:right}
.sr-more{flex:none;background:#f1f1f3;border:1px solid var(--line);border-radius:9px;min-width:44px;min-height:44px;font-size:1rem;cursor:pointer;color:var(--ink)}
.dots{display:flex;gap:4px}
.dot{width:11px;height:11px;border-radius:50%;border:2px solid var(--orange);display:inline-block}
.dot.on{background:var(--orange)}
.badge-ready{background:var(--orange);color:#fff;font-weight:700;font-size:.74rem;padding:3px 8px;border-radius:999px}
.badge{display:inline-block;background:#111;color:#fff;font-size:.74rem;padding:3px 9px;border-radius:999px;margin:2px 3px 2px 0}
.filter-panel{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px;margin:10px 0 14px}
.back-pill{display:inline-flex;align-items:center;min-height:40px;background:#111;color:#fff;text-decoration:none;font-weight:600;font-size:.9rem;padding:8px 14px;border-radius:999px;margin-bottom:10px}
.back-pill::first-letter{color:var(--orange)}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.chip{display:inline-block;background:#f1f1f3;border:1px solid var(--line);color:var(--ink);font-size:.74rem;font-weight:600;padding:3px 8px;border-radius:999px}
.chip-orange{background:#fff1e3;border-color:#f3c48a}
.chip-red{background:#fdecec;border-color:#f0a3a3;color:var(--red)}

/* profile */
.profile-chips{display:flex;align-items:center;gap:10px;color:var(--muted);margin:.2rem 0 .8rem}
.stripe-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-bottom:10px}
.stripe-box{border:1px solid var(--line);border-radius:12px;padding:12px;text-align:center}
.stripe-name{font-weight:700;margin-bottom:6px}
.stripe-on{color:var(--orange-dark);font-weight:700}
.ledger li.voided{opacity:.55;text-decoration:line-through}
.note-deleted{color:var(--muted)}
details.card summary{cursor:pointer;padding:2px 0}
.setting-row{justify-content:space-between;border-bottom:1px solid var(--line);padding:8px 0}
.setting-row:last-child{border-bottom:none}
.setting-label{flex:1;font-size:.92rem}

/* achievements */
.ach-list li{display:flex;align-items:center;gap:10px}
.ach-mark{font-weight:800;width:18px;text-align:center;flex:none}
.ach-earned .ach-mark{color:var(--orange-dark)}
.ach-label{flex:1}
.ach-earned .ach-label{font-weight:600}

/* belt journey strip */
.journey{display:flex;flex-wrap:wrap;gap:8px 10px;margin:8px 0 4px}
.journey-step{display:flex;flex-direction:column;align-items:center;gap:3px;width:52px;text-align:center}
.journey-step .belt{width:46px}
.journey-label{font-size:.62rem;color:var(--muted);line-height:1.15;white-space:normal}
.journey-past{opacity:.9}
.journey-current .belt{outline:3px solid var(--orange);outline-offset:1px;width:54px;height:17px}
.journey-current .journey-label{color:var(--orange-dark);font-weight:700}
.journey-next{opacity:.75}
.journey-next .belt{border-style:dashed}
.journey-future{opacity:.45}

/* tables */
table.board{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:16px}
table.board th,table.board td{padding:11px 10px;text-align:left;border-bottom:1px solid var(--line);font-size:.92rem;vertical-align:top}
table.board tr:last-child td{border-bottom:none}
table.board tr.top1 td{background:#fff3e6;font-weight:600}
table.board tr.top2 td,table.board tr.top3 td{background:#fafafa}

/* pyramid / rank breakdown — thin progress track per rank row */
.pyramid{margin-bottom:10px}
.pyr-program{margin:14px 0 6px}
.card .pyr-program:first-child{margin-top:0}
.pyr-row{display:flex;align-items:center;gap:10px;padding:4px 0;font-size:.88rem}
.pyr-rank{flex:0 0 172px;min-width:0;color:var(--ink);display:flex;align-items:center;gap:7px}
.pyr-track{flex:1;height:8px;background:#ececf0;border-radius:99px;overflow:hidden}
.pyr-fill{display:block;height:100%;background:var(--orange);border-radius:99px;min-width:3px}
.pyr-n{font-weight:600;white-space:nowrap;min-width:76px;text-align:right}

/* stripe celebration overlay */
.celebrate{position:fixed;inset:0;background:rgba(255,255,255,.72);display:flex;align-items:center;justify-content:center;z-index:60}
.celebrate-card{background:#fff;border:2px solid var(--orange);border-radius:18px;padding:26px 30px;text-align:center;box-shadow:0 12px 40px rgba(0,0,0,.18);animation:celebrate-pop 1.6s ease-in-out}
.celebrate-belt .belt{width:120px;height:34px}
.celebrate-belt .belt-dan{width:9px}
.celebrate-title{font-size:1.35rem;font-weight:800;margin-top:12px}
.celebrate-sub{color:var(--muted);margin-top:4px}
@keyframes celebrate-pop{0%{transform:scale(.7);opacity:0}18%{transform:scale(1.06);opacity:1}30%{transform:scale(1)}85%{transform:scale(1);opacity:1}100%{transform:scale(1);opacity:.98}}

/* dialogs as bottom sheets on phones */
dialog.sheet{border:none;border-radius:16px;padding:20px;width:min(560px,94vw);max-height:88vh;overflow:auto}
dialog.sheet::backdrop{background:rgba(0,0,0,.45)}
@media (max-width:640px){
  dialog.sheet{position:fixed;left:0;right:0;bottom:0;top:auto;margin:0;width:100%;max-width:100%;border-radius:18px 18px 0 0}
  .pyr-rank{flex-basis:136px}
  .pyr-n{min-width:64px}
}

/* auth */
.auth-card{max-width:420px;margin:5vh auto;background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px;text-align:left}
.auth-card h1{font-size:1.3rem}
.auth-logo{width:120px;height:auto;display:block;margin:0 auto 8px}
.progress-card{text-align:left}
.card-logo{width:130px;height:auto;display:block;margin:0 auto 6px}
.progress-card h1,.progress-card h2{text-align:center}
.progress-card h2{font-size:1.25rem}

/* ==== restyle pass 2: students list, profile, progress card ==== */
.btn-pill{border-radius:999px}
.btn-peach{background:#fbd9ae;color:#7a3c00}
.btn-peach:active{background:#f6c390}
.link-btn{background:none;border:none;padding:0;color:var(--ink);font:inherit;font-size:.92rem;text-decoration:underline;cursor:pointer;flex:none}
.divider{border:none;border-top:1px solid var(--line);margin:16px 0}
.section-head h2{margin:0}
.card .section-head{margin-bottom:10px}

/* segmented control — active segment is a filled orange pill */
.segmented a.active{background:var(--orange);color:#fff;box-shadow:none}

/* students list — search row, add button, cards */
.search-stack{gap:10px;margin-bottom:0}
.search-row{display:flex;gap:8px;align-items:stretch}
.search-input{flex:1;min-width:0}
.search-row .btn{flex:none}
.add-btn{margin-top:10px}
.count-line{margin:10px 0 12px}
.student-card{display:flex;gap:6px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:13px 12px;align-items:flex-start}
a.student-card{text-decoration:none;color:var(--ink)}
.sc-link{display:flex;gap:12px;flex:1;min-width:0;text-decoration:none;color:var(--ink);align-items:flex-start}
.sc-card-link{gap:12px}
.sc-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.sc-namerow{display:flex;align-items:flex-start;gap:8px}
.sc-namerow .sr-name{flex:1;min-width:0}
.sc-meta{display:flex;align-items:center;gap:6px}
.sdots{display:flex;gap:4px;flex:none;padding-top:1px}
.sdot{width:20px;height:20px;border-radius:50%;background:#ececf0;color:#9ca3af;font-size:.55rem;font-weight:800;display:inline-flex;align-items:center;justify-content:center}
.sdot.on{background:var(--orange);color:#fff}
.sc-classes{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:.9rem;margin-top:3px}
.sc-pct{font-weight:700}
.track{display:block;height:7px;background:#ececf0;border-radius:99px;overflow:hidden;margin-top:4px}
.track-fill{display:block;height:100%;background:var(--orange);border-radius:99px;min-width:3px}
.track-lg{height:9px}
.track-thick{height:12px}
.sc-badges{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px;align-items:center}
.alert-badge{display:inline-block;background:#fdf3d7;border:1px solid #f0d48a;color:#92600a;font-size:.68rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:4px 9px;border-radius:999px}
.sr-more{background:transparent;border:none;border-radius:9px;min-width:36px;min-height:44px;font-size:1.05rem;cursor:pointer;color:var(--muted);padding:0 4px}

/* profile header */
.profile-head{display:flex;gap:14px;align-items:flex-start}
.avatar-lg{width:66px;height:66px;font-size:1.3rem}
.ph-main{flex:1;min-width:0}
.profile-name{margin:0 0 7px;text-transform:uppercase;font-size:1.55rem;line-height:1.15}
.pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:4px 11px;font-size:.74rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
.pill-belt{background:#fff;border:1px solid var(--line);color:var(--ink)}
.pill-belt .belt{width:30px;height:10px}
.pill-row{display:flex;gap:7px;flex-wrap:wrap}
.ph-promoted{margin:7px 0 0}
.badge-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.badge-row .badge{margin:0}
.badge-orange{background:var(--orange);color:#fff;text-transform:uppercase;letter-spacing:.04em}

/* profile sections */
.sect-label{font-size:.76rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin:16px 0 7px}
.progress-card .sect-label:first-of-type{margin-top:2px}
.card>.sect-label:first-child{margin-top:0}
.inline-label{margin:0}
.bydate-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.bydate-row label{font-size:.9rem}
.stripe-circles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.scircle-form{display:flex;flex-direction:column;align-items:center;gap:3px;margin:0}
.scircle{width:64px;height:64px;border-radius:50%;border:2.5px dashed #c9ccd1;background:#fff;color:#6b7280;font-weight:800;font-size:1.05rem;cursor:pointer;padding:0}
.scircle.on{border-style:solid;border-color:var(--orange);background:var(--orange);color:#fff}
.scircle:active{transform:scale(.96)}
.scircle-name{font-weight:700;font-size:.9rem}
.scircle-status{color:var(--muted);font-size:.76rem;text-align:center}
.recent-classes{margin-top:12px}
.progress-actions{margin-top:12px}
.classes-line{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:1.02rem}
.classes-pct{font-weight:700}
.needs-box{background:#f3f4f6;border-radius:12px;padding:12px 14px;margin-top:10px}
.needs-box.center{text-align:center}

/* points stats + ledger */
.points-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;text-align:center;margin:4px 0 8px}
/* slim stat strip (calm Home) + profile window grid */
.stat-strip{display:flex;align-items:center;justify-content:space-between;gap:6px;flex-wrap:wrap;padding:14px 16px}
.strip-item{display:flex;align-items:baseline;gap:6px;text-decoration:none;color:inherit}
.strip-num{font-family:var(--font-display);font-size:1.45rem;font-weight:700;line-height:1;color:var(--orange)}
.strip-label{font-size:.8rem;font-weight:600;color:var(--muted)}
.strip-sep{color:var(--line);font-weight:700}
.window-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin:4px 0 8px}
.window-block{border:1px solid var(--line);border-radius:12px;padding:10px 4px;text-align:center}
.window-title{font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--ink);margin-bottom:6px}
.window-block .pstat + .pstat{margin-top:8px}
.window-block .pstat-num{font-size:1.5rem}
.pstat-num{font-family:var(--font-display);font-size:1.9rem;font-weight:600;line-height:1.1}
.pstat-label{color:var(--muted);font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin-top:3px}
.ledger-row{display:flex;gap:10px;align-items:flex-start}
.ledger-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}

/* achievements — circular indicators */
.ach-list li{align-items:flex-start;padding:9px 0}
.ach-circle{width:26px;height:26px;border-radius:50%;border:2px solid #d4d4d8;background:#fff;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:800;flex:none;margin-top:1px}
.ach-circle.on{background:var(--orange);border-color:var(--orange)}
.ach-name{font-weight:700;display:block}
.ach-sub{display:block}
.ach-earned .ach-label{font-weight:400}

/* compact single-row belt journey (profile + progress card) */
.journey-strip{display:flex;gap:4px;align-items:flex-start;margin:4px 0 2px}
.jstep{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px}
.jstep-belt{display:block;width:100%;line-height:0}
.jstep-belt .belt{width:100%;height:12px}
.jstep-current .belt{outline:2.5px solid var(--orange);outline-offset:1px;height:14px}
.jstep-next{opacity:.8}
.jstep-next .belt{border-style:dashed}
.jstep-past{opacity:.95}
.jstep-future{opacity:.42}
.jstep-label{font-size:.58rem;color:var(--muted);line-height:1.15;text-align:center;white-space:normal}
.jstep-current .jstep-label{color:var(--orange-dark);font-weight:700}
/* one caption line under the strip replaces the per-swatch labels
   (they overlapped on long rank names) */
.journey-caption{font-size:.82rem;color:var(--muted);margin-top:5px}
.journey-caption .jc-current{color:var(--orange-dark);font-weight:700}

/* testing pace — road to testing (profile), due-for-a-check (ready),
   check tags (tonight) */
.pace-status{display:inline-block;font-weight:800;font-size:.74rem;letter-spacing:.05em;text-transform:uppercase;padding:4px 10px;border-radius:999px}
.pace-on{background:#e7f6ec;color:#166534}
.pace-behind{background:#fdf3d7;color:#92600a}
.pace-past{background:#fdecec;color:var(--red)}
.pace-dots{display:flex;gap:8px;margin:12px 0 2px}
.pace-dot-wrap{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center}
.pace-dot{width:26px;height:26px;border-radius:50%;border:2.5px solid var(--orange);background:#fff;display:inline-block;flex:none}
.pace-dot.on{background:var(--orange)}
.pace-dot-label{font-weight:700;font-size:.82rem}
.pace-dot-date{color:var(--muted);font-size:.72rem;line-height:1.2}
.pace-next{font-weight:700;margin:10px 0 2px}
.pace-ready-line{margin-top:8px}
.pace-due-line{font-weight:700;font-size:.95rem;margin-top:6px;color:#92600a}
.pace-due-line.overdue{color:var(--red)}
.pace-tag{align-self:flex-start;display:inline-block;margin-top:4px;font-size:.7rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:3px 8px;border-radius:999px}
.pace-tag-due{background:#fdf3d7;border:1px solid #f0d48a;color:#92600a}
.pace-tag-overdue{background:#fdecec;border:1px solid #f0a3a3;color:var(--red)}

/* sticky profile action bar (sits above the tab bar) */
.action-bar{position:fixed;left:0;right:0;bottom:calc(58px + env(safe-area-inset-bottom));display:flex;gap:8px;padding:8px 12px;background:rgba(255,255,255,.97);border-top:1px solid var(--line);z-index:25}
.action-bar .btn{flex:1}
.action-bar-spacer{height:58px}
.watch-current{margin:0 0 8px}
.watch-row{margin-bottom:8px}
.edit-details summary{cursor:pointer;padding:2px 0}
.edit-details form{margin-top:12px}

/* progress card (parent-facing) */
.pc-school{text-align:center;color:var(--muted);font-size:.78rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;margin:8px 0 4px}
.pc-name{text-align:center;text-transform:uppercase;font-size:2rem;margin:2px 0 10px}
.pc-pills{justify-content:center}
.pc-promoted{margin:8px 0 0}
.pc-rule{border:none;border-top:3px solid var(--orange);border-radius:99px;margin:14px 0 4px}
.pc-stripes li{display:flex;align-items:center;gap:10px}
.pc-stripe .ach-name{font-weight:700;min-width:110px}
.pc-points{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-top:16px}
.pc-points-num{font-family:var(--font-display);font-size:1.7rem;font-weight:600}

/* ==== restyle pass 3: ready board ==== */
.ready-title{text-transform:uppercase}
.ready-count{font-weight:700}
.ready-stripes{display:flex;align-items:center;gap:8px;margin-top:7px}
.ready-stripes-label{flex:1;min-width:0;color:var(--muted);font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;line-height:1.4}
.ready-line{font-weight:700;font-size:.98rem;line-height:1.4;margin-top:7px}

/* ==== restyle pass 4: points pages (leaderboard / races / awards) ==== */
.points-seg{margin-bottom:16px}
.points-filters{margin-bottom:4px}
.points-filters .sect-label{margin-top:0}
.season-select{width:100%}
.fchip-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.fchip{appearance:none;-webkit-appearance:none;border:1px solid var(--field-border);background:#fff;color:var(--ink);border-radius:999px;padding:9px 18px;font:inherit;font-weight:600;font-size:.92rem;cursor:pointer;min-height:44px}
.fchip.active{background:var(--orange);border-color:var(--orange);color:#fff}

/* standings — one white card, divider rows, rank badges */
.standings-card{padding-top:6px;padding-bottom:6px}
.standings-card h2{margin-top:10px}
.standing-row{display:flex;gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line)}
.standing-row:last-child{border-bottom:none}
.standing-empty{padding:10px 0}
.rank-badge{width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:600;font-size:1.12rem;flex:none}
.rb-1{background:var(--orange);color:#fff}
.rb-2{background:#111;color:#fff}
.rb-3{background:#fff;border:2px solid #111;color:#111}
.rb-n{background:transparent;color:var(--muted);font-size:1rem}
.standing-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.standing-name{font-weight:700;color:var(--ink);text-decoration:none;font-size:1.02rem}
.standing-meta{color:var(--muted);font-size:.85rem;display:flex;align-items:center;gap:6px;white-space:nowrap}
.standing-side{flex:none;display:flex;flex-direction:column;gap:1px;align-items:flex-end;text-align:right}
.standing-pts{font-family:var(--font-display);font-size:1.45rem;font-weight:600;line-height:1.1;color:var(--ink)}
.standing-pts small{font-size:.75rem;color:var(--muted);font-weight:500}
.standing-rate{color:var(--muted);font-size:.83rem}
.race-metric{font-weight:800;color:var(--ink)}
.standing-row.muted .race-metric{color:var(--muted)}

/* ==== restyle pass 5: teach pages (what to teach / tonight's classes) ==== */
.teach-title{text-transform:uppercase}
.teach-filter-btn{margin-bottom:12px}

/* stripe-gap accordion cards */
details.gap-card{padding:0;overflow:hidden}
details.gap-card .gap-summary{display:flex;align-items:center;gap:10px;padding:15px 16px;cursor:pointer;list-style:none}
.gap-summary::-webkit-details-marker{display:none}
.gap-title{font-family:var(--font-display);font-weight:600;font-size:1.22rem;letter-spacing:.01em;flex:1;min-width:0}
.gap-toggle{flex:none;color:var(--orange);font-family:var(--font-display);font-weight:700;font-size:1.55rem;line-height:1}
.gap-toggle::before{content:"+"}
details.gap-card[open ] .gap-toggle::before{content:"−"}
.gap-rows{border-top:1px solid var(--line)}
.gap-row{display:flex;gap:12px;align-items:center;padding:10px 16px;border-bottom:1px solid var(--line)}
.gap-row:last-child{border-bottom:none}
.gap-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.gap-name{font-weight:700;color:var(--ink);text-decoration:none;font-size:1.02rem}
.gap-empty{padding:0 16px 14px}

/* tonight's classes rows */
.tcard{padding-top:6px;padding-bottom:6px}
.trow{display:flex;gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line)}
.trow:last-child{border-bottom:none}
.trow-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.trow-name{font-weight:700;color:var(--ink);text-decoration:none;font-size:1.02rem}
.trow-needs{color:var(--muted);font-size:.92rem}
.trow-ready{color:var(--orange-dark);font-weight:700}
.tmeta{color:var(--muted);font-size:.85rem;display:flex;align-items:center;gap:6px}

/* ==== restyle pass 6: starting line profile ==== */
.starter-head-top{display:flex;gap:14px;align-items:flex-start}
.starter-prog{font-weight:700;font-size:1.06rem}
.starter-meta{margin:4px 0 0}
.starter-head .divider{margin:14px 0 12px}
.starter-head .bydate-row{margin-top:0}

/* ==== restyle pass 8: races rows — plain numerals, faded unqualified ==== */
.race-rank{flex:none;width:32px;text-align:center;font-size:1.05rem;font-weight:600;color:var(--ink)}
.race-unqualified .race-rank,
.race-unqualified .standing-name,
.race-unqualified .race-metric{color:var(--muted)}

/* ==== restyle pass 9: points H1 caps + awards page — one card per leader ==== */
.points-title{text-transform:uppercase}
.award-card .sect-label{margin-bottom:6px}
.award-line{margin:0 0 12px;font-size:1.02rem}
.award-card .btn{padding-left:26px;padding-right:26px}

/* ==== organization pass: collapsible sections + bounded lists ====
   Markup contract (behavior in static/js/app.js): a [data-org] wrapper
   holds a [data-org-head] toggle button and a direct-child .org-body;
   [hidden] always wins over component display rules. The +/− sign
   mirrors the Teach accordion's .gap-toggle treatment. */
[hidden]{display:none!important}

/* expand / collapse all row — small text links in the .section-link
   style (orange-dark, weight 600, no underline) */
.org-allrow{display:flex;gap:6px;align-items:center;justify-content:flex-end;margin:0 0 10px}
.org-all-btn{background:none;border:none;padding:0;font:inherit;color:var(--orange-dark);font-weight:600;cursor:pointer;white-space:nowrap}
.org-all-sep{color:var(--muted)}

/* toggle header — full-width button, ~56px tall, Oswald title, orange
   +/− glyph at 1.5rem on the right (mirrors the Muse component and
   the Teach accordion's summary treatment) */
.org-head{display:flex;align-items:center;gap:9px;width:100%;min-height:56px;background:none;border:none;padding:0;cursor:pointer;font:inherit;color:var(--ink);text-align:left}
.org-head-title{font-family:var(--font-display);font-weight:600;text-transform:uppercase;letter-spacing:.03em;font-size:1.15rem;line-height:1.25}
.org-head-title-lg{font-size:1.35rem}
.org-head-title-md{font-size:1.22rem;letter-spacing:.01em;text-transform:none}
.org-count{color:var(--muted);font-size:.85rem;font-weight:600;white-space:nowrap}
.org-sign{flex:none;margin-left:auto;color:var(--orange);font-family:var(--font-display);font-weight:700;font-size:1.5rem;line-height:1}
.org-sign::before{content:"+"}
.org:not(.org-closed)>.org-head .org-sign::before,
.org:not(.org-closed)>.org-headrow .org-sign::before{content:"−"}

/* header row inside a card: toggle button + trailing link/action */
.org-headrow{display:flex;align-items:center;justify-content:space-between;gap:10px}
.org-headrow .org-head{flex:1;min-width:0;width:auto}

/* card-level collapsibles: the header sits inside the card, full
   width (edge-to-edge, like the Teach accordion card); the body
   carries the card's usual 16px inset */
.card.org{padding:0;overflow:hidden}
.card.org>.org-head{padding:8px 16px}
.card.org>.org-headrow{padding:8px 16px}
.card.org>.org-headrow .org-head{min-height:40px}
.card.org>.org-body{padding:2px 16px 16px}
.card.org>.org-headrow+.org-body{padding-top:0}

/* grouped lists (students / ready program groups) — same header
   treatment, standalone above the list */
.org-group{margin:14px 0 4px}
.org-group-head{padding:2px}
.org-group .student-list{margin-bottom:10px}

/* sub-headers inside a card or accordion (teach programs, settings
   minimum groups, awards months) — same treatment, scaled down */
.org-sub{border-top:1px solid var(--line)}
.org-sub:first-of-type{border-top:none}
.org-head-sub{min-height:48px}
.org-head-sub .org-head-title{font-size:1rem}
.gap-rows .org-head-sub{padding:2px 16px}
.gap-rows .org-body .gap-row:first-child{border-top:1px solid var(--line)}
.award-months .org-body{padding-bottom:4px}

/* bounded lists — the Show all / Show less toggle is a small text
   link in the .section-link style, never a button */
.bound-row{display:flex;justify-content:center;padding:10px 0 2px}
.bound-btn{background:none;border:none;padding:4px 2px;font:inherit;color:var(--orange-dark);font-weight:600;cursor:pointer;white-space:nowrap}