/* ==========================================================================
   KEYS TO THE JOURNEY — Design System
   Brand: gold keys, deep navy, cream. Built mobile first.
   ========================================================================== */

:root{
  /* Brand */
  --gold:#D4AF37;
  --gold-lt:#E8CC72;
  --gold-dk:#A88723;
  --navy:#0A1A33;
  --navy-2:#0F2647;
  --navy-3:#16345E;
  --cream:#F6F1E4;
  --sky:#5BA7D9;
  --sky-dk:#2E7BB0;

  /* Semantic */
  --bg:var(--navy);
  --surface:#0E2141;
  --surface-2:#132C54;
  --line:rgba(212,175,55,.18);
  --line-soft:rgba(246,241,228,.10);
  --text:#F6F1E4;
  --text-dim:#B9C4D6;
  --text-mute:#8695AC;
  --ok:#4ADE80;
  --warn:#FBBF24;
  --bad:#F87171;

  --r-sm:8px; --r:14px; --r-lg:22px; --r-xl:30px;
  --shadow:0 18px 50px -12px rgba(0,0,0,.6);
  --shadow-gold:0 10px 40px -10px rgba(212,175,55,.35);
  --max:1200px;
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
/* iOS Safari ignores overflow-x on body alone: the page can still be panned
   sideways when any element is wider than the viewport. Clipping must live on
   html as well (clip preferred; hidden as fallback for older engines). */
html{overflow-x:hidden;overflow-x:clip}
body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.65;
  overflow-x:hidden;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}

h1,h2,h3,h4{font-family:'Playfair Display',Georgia,serif;line-height:1.15;margin:0 0 .5em;font-weight:700;letter-spacing:-.01em}
h1{font-size:clamp(2.1rem,6vw,4rem)}
h2{font-size:clamp(1.6rem,4vw,2.6rem)}
h3{font-size:clamp(1.15rem,2.4vw,1.5rem)}
p{margin:0 0 1em}

.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 20px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

/* ---------- Background atmosphere ---------- */
.aura{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.aura::before,.aura::after{
  content:'';position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;
}
.aura::before{width:60vw;height:60vw;background:radial-gradient(circle,rgba(212,175,55,.28),transparent 70%);top:-18vw;right:-14vw;animation:float1 22s var(--ease) infinite alternate}
.aura::after{width:52vw;height:52vw;background:radial-gradient(circle,rgba(91,167,217,.24),transparent 70%);bottom:-16vw;left:-12vw;animation:float2 26s var(--ease) infinite alternate}
@keyframes float1{to{transform:translate(-6vw,8vh) scale(1.15)}}
@keyframes float2{to{transform:translate(7vw,-7vh) scale(1.1)}}

.grid-lines{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.35;
  background-image:linear-gradient(rgba(246,241,228,.035) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(246,241,228,.035) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse at 50% 0%,#000 20%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 0%,#000 20%,transparent 75%);
}
main,header,footer{position:relative;z-index:1}

/* ---------- Header ---------- */
.hdr{position:sticky;top:0;z-index:100;backdrop-filter:blur(16px);
  background:rgba(10,26,51,.82);border-bottom:1px solid var(--line)}
.hdr-in{display:flex;align-items:center;gap:16px;height:70px}
.brand{display:flex;align-items:center;gap:11px;font-family:'Playfair Display',serif;
  font-weight:700;font-size:1.05rem;letter-spacing:.02em;white-space:nowrap}
.brand img{width:38px;height:38px;object-fit:contain;filter:drop-shadow(0 2px 8px rgba(212,175,55,.5))}
.brand span{background:linear-gradient(100deg,var(--cream),var(--gold-lt),var(--cream));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.nav{margin-left:auto;display:none;align-items:center;gap:4px}
.nav a{padding:9px 13px;border-radius:999px;font-size:.86rem;font-weight:500;color:var(--text-dim);
  transition:.25s var(--ease)}
.nav a:hover,.nav a.on{color:var(--gold-lt);background:rgba(212,175,55,.1)}
.nav a.btn-gold{color:#1A1206}
.nav a.btn-gold:hover{color:#1A1206;background:linear-gradient(135deg,var(--gold-lt),var(--gold) 55%,var(--gold-dk))}
.nav a.btn-sky{color:#04121C}
.nav a.btn-sky:hover{color:#04121C;background:linear-gradient(135deg,var(--sky),var(--sky-dk))}
.hdr-cta{margin-left:auto}
.burger{margin-left:auto;width:42px;height:42px;border:1px solid var(--line);border-radius:12px;
  background:transparent;display:grid;place-items:center;gap:4px;padding:11px}
.burger i{display:block;height:2px;width:100%;background:var(--gold);border-radius:2px;transition:.3s}
.mob{display:none;flex-direction:column;padding:10px 20px 88px;border-top:1px solid var(--line);
  background:rgba(10,26,51,.97)}
.mob.open{display:flex;max-height:calc(100vh - 62px);max-height:calc(100dvh - 62px);
  overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.mob a{padding:13px 6px;border-bottom:1px solid var(--line-soft);font-size:.95rem;color:var(--text-dim)}
.mob a:last-child{border:0}
.mob .mob-top{font-weight:700;color:var(--text)}
.mob-group{display:flex;flex-direction:column;margin-top:8px}
.mob-h{font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--gold-lt);
  padding:12px 6px 4px;border-top:1px solid var(--line);margin-top:6px}
.mob-group a{padding:11px 6px}
.mob .btn{border-bottom:0;text-align:center}
/* Bottom tab bar — the few most-used destinations, a thumb away on phones. */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;
  background:rgba(10,26,51,.98);border-top:1px solid var(--line);
  padding:6px 4px calc(6px + env(safe-area-inset-bottom));backdrop-filter:blur(8px)}
.tabbar a,.tabbar button{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  background:transparent;border:0;cursor:pointer;color:var(--text-mute);font-size:.66rem;
  font-weight:600;font-family:inherit;padding:5px 2px;min-height:48px;text-decoration:none}
.tabbar svg{width:22px;height:22px}
.tabbar a.on{color:var(--gold-lt)}
.tabbar a:active,.tabbar button:active{color:var(--gold)}
body{padding-bottom:64px}
@media(min-width:1000px){.nav{display:flex}.burger{display:none}.mob{display:none!important}
  .tabbar{display:none}body{padding-bottom:0}}
@media print{.tabbar{display:none!important}}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 26px;border-radius:999px;font-weight:600;font-size:.94rem;border:1px solid transparent;
  transition:.3s var(--ease);cursor:pointer;text-align:center;line-height:1.2}
.btn-gold{background:linear-gradient(135deg,var(--gold-lt),var(--gold) 55%,var(--gold-dk));
  color:#1A1206;box-shadow:var(--shadow-gold)}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 16px 44px -10px rgba(212,175,55,.55)}
.btn-ghost{border-color:var(--line);color:var(--text);background:rgba(246,241,228,.04)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold-lt);transform:translateY(-2px)}
.btn-sky{background:linear-gradient(135deg,var(--sky),var(--sky-dk));color:#04121C;
  box-shadow:0 10px 40px -10px rgba(91,167,217,.45)}
.btn-sky:hover{transform:translateY(-2px)}
.btn-sm{padding:9px 16px;font-size:.82rem}
.btn-block{display:flex;width:100%}

/* ---------- Pills / chips ---------- */
.pill{display:inline-flex;align-items:center;gap:7px;padding:6px 14px;border-radius:999px;
  font-size:.74rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  border:1px solid var(--line);background:rgba(212,175,55,.09);color:var(--gold-lt)}
.pill.sky{border-color:rgba(91,167,217,.35);background:rgba(91,167,217,.12);color:#9BD0F0}
.pill.ok{border-color:rgba(74,222,128,.3);background:rgba(74,222,128,.1);color:#86EFAC}
.chip{display:inline-block;padding:6px 13px;border-radius:999px;background:rgba(246,241,228,.07);
  border:1px solid var(--line-soft);font-size:.8rem;color:var(--text-dim);margin:0 6px 8px 0}
.chip.gold{background:rgba(212,175,55,.12);border-color:var(--line);color:var(--gold-lt)}
/* Beyond Athletics Scouting Inc. */
.ba-mini{display:inline-block;vertical-align:-3px;margin-left:8px;opacity:.95}
.mob-ba{display:block;font-style:normal;color:var(--text-mute);font-size:.68rem;margin:-4px 0 6px;letter-spacing:.02em}
/* The Beyond Athletics hero band: opens every scouting page at full strength. */
.ba-band{padding:26px 0 6px}
.ba-band-in{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;text-decoration:none}
.ba-band-in img{width:min(330px,72vw);height:auto;filter:drop-shadow(0 12px 30px rgba(0,0,0,.55));
  transition:transform .25s}
.ba-band-in:hover img{transform:scale(1.02)}
.ba-band-tag{color:var(--text-mute);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase}

/* Audience minis: Daily Key (families) and Tip of the Day (scouting). */
.mini-key{margin-top:18px}
.mini-key .dk-quote{margin:10px 0 12px;font-size:1rem}
.mini-links{display:flex;flex-wrap:wrap;gap:8px}

/* Save-to-phone instructions. Styled on its own rather than as a child of the
   install banner, which is why the old note rendered invisible in the menu. */
.ki-modal{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;
  padding:22px;background:rgba(3,8,18,.72);backdrop-filter:blur(3px)}
.ki-card{max-width:420px;width:100%;background:linear-gradient(160deg,#0E2444,#0A1A33);
  border:1px solid var(--line);border-radius:18px;padding:24px;box-shadow:0 24px 70px rgba(0,0,0,.6)}
.ki-card h3{color:var(--gold-lt);font-size:1.15rem;margin:0 0 12px}
.ki-card ol{margin:0 0 14px;padding-left:20px;color:var(--text-dim);font-size:.94rem;line-height:1.75}
.ki-card ol b{color:var(--text)}
.ki-card .ki-note{color:var(--text-mute);font-size:.84rem;margin:0 0 16px}
.ki-card .ki-close{width:100%}

/* Universal typeahead panel */
.ta-panel{position:absolute;left:0;top:calc(100% + 4px);z-index:60;max-height:340px;overflow:auto;
  background:#0B1D38;border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 44px rgba(0,0,0,.5)}
.ta-h{padding:8px 14px 4px;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.ta-row{display:block;padding:9px 14px;text-decoration:none;border-bottom:1px solid var(--line-soft)}
.ta-row:last-child{border-bottom:0}
.ta-row b{display:block;color:var(--text);font-size:.9rem}
.ta-row span{display:block;color:var(--text-mute);font-size:.76rem;margin-top:1px}
.ta-row:hover,.ta-row:focus,.ta-row.on{background:rgba(212,175,55,.16)}
.ta-none{padding:14px;color:var(--text-mute);font-size:.85rem}
.ta-none a{color:var(--gold-lt)}

/* Footer Question of the Day teaser */
.ftr-qotd{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:26px 0 4px;padding:14px 18px;
  border-radius:14px;background:rgba(212,175,55,.07);border:1px solid var(--line-soft);text-decoration:none;
  transition:border-color .2s}
.ftr-qotd:hover{border-color:var(--gold)}
.ftr-qotd b{color:var(--gold-lt);font-size:.85rem;white-space:nowrap}
.ftr-qotd span{color:var(--text-dim);font-size:.88rem;flex:1;min-width:200px}
.ftr-qotd em{color:var(--gold-lt);font-style:normal;font-size:.82rem;white-space:nowrap}

.ba-strip{margin:18px 0 4px}
.ba-strip-in{display:flex;align-items:center;gap:14px;padding:12px 16px;border-radius:14px;
  background:linear-gradient(120deg,rgba(11,29,56,.92),rgba(20,44,84,.75));border:1px solid var(--line-soft);
  text-decoration:none;transition:border-color .2s}
.ba-strip-in:hover{border-color:var(--gold)}
.ba-strip-in img{flex:0 0 auto}
.ba-strip-in b{display:block;color:var(--gold-lt);font-size:.88rem;font-weight:700}
.ba-strip-in em{display:block;font-style:normal;color:var(--text-mute);font-size:.78rem;margin-top:2px}
.ba-gate{display:grid;grid-template-columns:minmax(240px,460px) minmax(0,1fr);gap:30px;align-items:center;
  padding:26px;border-radius:20px;text-decoration:none;
  background:linear-gradient(130deg,#05080f,rgba(11,29,56,.95) 55%,rgba(20,44,84,.8));
  border:1px solid var(--line-soft);transition:border-color .25s,transform .25s}
.ba-gate:hover{border-color:var(--gold);transform:translateY(-2px)}
.ba-gate img{width:100%;height:auto;filter:drop-shadow(0 14px 34px rgba(0,0,0,.55))}
.ba-gate-tx h2{font-size:clamp(1.4rem,3.4vw,2rem);margin:6px 0 10px}
.ba-gate-tx p{color:var(--text-dim);max-width:56ch}
.ba-gate-tx .btn{display:inline-block}
.ba-gate-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;justify-content:center}
@media(max-width:760px){.ba-gate{grid-template-columns:minmax(0,1fr);text-align:center}
  .ba-gate img{max-width:340px;margin:0 auto}
  .ba-gate-tx p{margin-left:auto;margin-right:auto}}
.ba-hero{text-align:center}
.ba-hero img{max-width:min(520px,88vw);height:auto;filter:drop-shadow(0 16px 44px rgba(0,0,0,.5))}
.ba-hero h1{font-size:clamp(1.9rem,5vw,2.9rem)}

/* Five Keys */
.g5{grid-template-columns:repeat(5,minmax(0,1fr))}
@media(max-width:1020px){.g5{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.g5{grid-template-columns:minmax(0,1fr)}}
.fk-card{text-align:left}
.fk-ico{display:inline-flex;width:42px;height:42px;border-radius:12px;align-items:center;justify-content:center;
  background:rgba(212,175,55,.14);color:var(--gold-lt)}
.fk-ico svg{width:22px;height:22px}
.fk-meters{display:grid;gap:10px;margin-top:16px;max-width:520px}
.fk-m{display:grid;grid-template-columns:96px minmax(0,1fr) 44px;align-items:center;gap:10px;font-size:.85rem}
.fk-m span{color:var(--text-dim)}
.fk-m b{text-align:right;color:var(--gold-lt);font-weight:600;font-size:.8rem}
.fk-bar{height:9px;border-radius:999px;background:rgba(246,241,228,.08);overflow:hidden}
.fk-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,#8a6d1d,var(--gold),#f0d98c);
  width:0;transition:width .8s ease}

/* Balance Center */
.dk-quote{margin:12px 0;padding:14px 18px;border-left:3px solid var(--gold);background:rgba(212,175,55,.07);
  border-radius:0 12px 12px 0;font-family:'Playfair Display',serif;font-size:1.08rem;color:var(--text)}
.bc-row{display:grid;grid-template-columns:110px minmax(0,1fr) 26px;align-items:center;gap:12px;margin:10px 0;font-size:.88rem}
.bc-row label{color:var(--text-dim)}
.bc-row b{text-align:right;color:var(--gold-lt)}
.bc-row input[type=range]{accent-color:var(--gold);width:100%}
.jr-row{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line-soft);font-size:.85rem}
.jr-row:last-child{border-bottom:0}
.jr-row .d{color:var(--text-mute);flex:0 0 auto}
.jr-row .t{color:var(--text-dim)}

.sport-chip{cursor:pointer;font-family:inherit}
.sport-chip.active{background:rgba(212,175,55,.28);border-color:var(--gold);color:#fff}
.chip-n{display:inline-block;margin-left:5px;padding:1px 7px;border-radius:999px;
  background:rgba(212,175,55,.3);color:var(--gold-lt);font-size:.7rem;font-weight:600}
.sport-chip.active .chip-n{background:rgba(255,255,255,.25);color:#fff}

/* ---------- Cards ---------- */
.card{background:linear-gradient(160deg,var(--surface),rgba(10,26,51,.6));
  border:1px solid var(--line-soft);border-radius:var(--r-lg);padding:26px;
  transition:.35s var(--ease);position:relative;overflow:hidden}
.card:hover{border-color:var(--line);transform:translateY(-4px);box-shadow:var(--shadow)}
.card-gold{border-color:var(--line);background:linear-gradient(160deg,rgba(212,175,55,.08),rgba(10,26,51,.7))}

/* minmax(0,1fr) everywhere: a bare 1fr track lets a child's intrinsic width
   (a long select option, an unbreakable string) push the whole grid wider
   than the viewport on phones. minmax(0,1fr) can never exceed its share. */
.grid{display:grid;gap:20px}
.g2{grid-template-columns:minmax(0,1fr)}
.g3{grid-template-columns:minmax(0,1fr)}
.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:700px){.g2{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g4{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ---------- Sections ---------- */
section{padding:70px 0}
.sec-head{text-align:center;max-width:760px;margin:0 auto 46px}
.sec-head p{color:var(--text-dim);font-size:1.02rem}
.eyebrow{font-size:.76rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);
  font-weight:700;margin-bottom:14px;display:block;font-family:'Inter',sans-serif}

/* ---------- Icon badge ---------- */
.ico{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;font-size:1.5rem;color:var(--gold-lt);
  background:linear-gradient(140deg,rgba(212,175,55,.22),rgba(212,175,55,.06));
  border:1px solid var(--line);margin-bottom:18px}
.ico.sky{background:linear-gradient(140deg,rgba(91,167,217,.22),rgba(91,167,217,.06));
  border-color:rgba(91,167,217,.3)}

/* ---------- Hero ---------- */
.hero{padding:60px 0 40px;text-align:center}
.hero-logo{width:min(300px,68vw);margin:0 auto 26px;filter:drop-shadow(0 12px 40px rgba(212,175,55,.35));
  animation:rise 1s var(--ease) both}
.hero h1{margin-bottom:.35em;animation:rise 1s .1s var(--ease) both}
.hero h1 .grad{background:linear-gradient(100deg,var(--gold-lt),var(--gold) 40%,var(--cream));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero-sub{font-size:clamp(1rem,2.4vw,1.25rem);color:var(--text-dim);max-width:660px;margin:0 auto 32px;
  animation:rise 1s .2s var(--ease) both}
.hero-btns{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;animation:rise 1s .3s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

/* ---------- Stat strip ---------- */
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:48px}
@media(min-width:820px){.stats{grid-template-columns:repeat(4,minmax(0,1fr))}}
.stat{background:rgba(246,241,228,.04);border:1px solid var(--line-soft);border-radius:var(--r);
  padding:20px 14px;text-align:center}
.stat b{display:block;font-family:'Playfair Display',serif;font-size:clamp(1.5rem,4vw,2.1rem);
  color:var(--gold-lt);line-height:1}
.stat span{font-size:.76rem;color:var(--text-mute);letter-spacing:.06em;text-transform:uppercase}

/* ---------- Gateway (lobby doors) ---------- */
.gates{display:grid;gap:22px;grid-template-columns:minmax(0,1fr)}
@media(min-width:860px){.gates{grid-template-columns:repeat(2,minmax(0,1fr))}}
.gate{position:relative;border-radius:var(--r-xl);padding:38px 30px 32px;overflow:hidden;
  border:1px solid var(--line-soft);min-height:340px;display:flex;flex-direction:column;
  transition:.4s var(--ease)}
.gate::before{content:'';position:absolute;inset:0;opacity:.9;transition:.4s var(--ease)}
.gate-a::before{background:radial-gradient(120% 90% at 15% 0%,rgba(212,175,55,.28),transparent 60%),linear-gradient(160deg,#12294B,#0A1A33)}
.gate-b::before{background:radial-gradient(120% 90% at 85% 0%,rgba(91,167,217,.3),transparent 60%),linear-gradient(160deg,#0F2A47,#0A1A33)}
.gate>*{position:relative;z-index:1}
.gate:hover{transform:translateY(-6px);border-color:var(--line);box-shadow:var(--shadow)}
.gate h3{font-size:1.6rem;margin-bottom:.3em}
.gate ul{list-style:none;padding:0;margin:0 0 24px;flex:1}
.gate li{padding:8px 0 8px 26px;position:relative;color:var(--text-dim);font-size:.92rem;
  border-bottom:1px solid var(--line-soft)}
.gate li:last-child{border:0}
.gate li::before{content:'✦';position:absolute;left:0;color:var(--gold);font-size:.8rem}
.gate-b li::before{color:var(--sky)}
.door{position:absolute;right:-30px;bottom:-30px;font-size:9rem;opacity:.07;z-index:0;line-height:1}

/* ---------- Profile ---------- */
.phero{border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--line-soft);
  background:linear-gradient(160deg,var(--surface-2),var(--surface))}
.pcover{height:110px;background:
  radial-gradient(90% 140% at 20% 0%,rgba(212,175,55,.35),transparent 60%),
  linear-gradient(120deg,#16345E,#0A1A33);position:relative}
.pcover::after{content:'';position:absolute;inset:0;
  background-image:linear-gradient(rgba(246,241,228,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(246,241,228,.05) 1px,transparent 1px);
  background-size:36px 36px}
/* Recruiting bar: Committed / Offers / Interest strip under the athlete photo. */
.rr-bar{display:flex;gap:12px;overflow-x:auto;align-items:stretch;
  background:var(--surface);border:1px solid var(--line-soft);border-radius:16px;
  padding:12px 14px;margin:0 0 16px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.rr-bar::-webkit-scrollbar{display:none}
.rr-sec{display:flex;flex-direction:column;gap:7px;flex:none;padding-right:12px;
  border-right:1px solid rgba(255,255,255,.09)}
.rr-sec:last-child{border-right:0;padding-right:0}
.rr-cap{font-family:Inter,sans-serif;font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-lt);white-space:nowrap}
.rr-logos{display:flex;gap:7px;align-items:center}
.rr-logo{width:34px;height:34px;border-radius:9px;background:#fff;display:grid;place-items:center;
  overflow:hidden;border:1px solid rgba(255,255,255,.25);flex:none;box-shadow:0 1px 4px rgba(0,0,0,.3)}
.rr-logo img{width:100%;height:100%;object-fit:contain;padding:3px;box-sizing:border-box}
.rr-mono{font-family:Inter,sans-serif;font-weight:800;font-size:.68rem;color:#0A1A33}
.rr-logo.rr-commit{box-shadow:0 0 0 2px rgba(212,175,55,.7)}
.rr-more{display:grid;place-items:center;font-family:Inter,sans-serif;font-weight:700;font-size:.68rem;
  color:var(--text-dim);width:34px;height:34px;border-radius:9px;border:1px dashed rgba(255,255,255,.3);flex:none}
.pbody{padding:0 24px 26px;margin-top:-52px;position:relative;z-index:2}
.pavatar{width:106px;height:106px;border-radius:26px;border:3px solid var(--gold);
  background:linear-gradient(140deg,var(--gold),var(--gold-dk));display:grid;place-items:center;
  font-family:'Playfair Display',serif;font-size:2.4rem;color:#1A1206;font-weight:700;
  box-shadow:var(--shadow-gold);margin-bottom:16px}
.crest{overflow:hidden}
.pill.amb{background:linear-gradient(135deg,var(--gold-lt),var(--gold) 55%,var(--gold-dk));
  color:#1A1206;border-color:var(--gold);font-weight:700}
.logo-mgr{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 16px}
.btn.sm{padding:6px 12px;font-size:.8rem;border-radius:10px}
.logo-mgr-msg{font-size:.82rem;color:var(--text-mute)}
.logo-mgr-msg.ok{color:var(--gold-lt)}
.logo-mgr-msg.err{color:#E08A8A}
.inp{padding:13px 16px;border-radius:var(--r);border:1px solid var(--line);background:rgba(255,255,255,.03);
  color:var(--text);font-size:.95rem;font-family:inherit}
/* Form controls must never force horizontal overflow: a native select sizes to
   its longest option (a long position string can exceed a phone screen), and
   Safari will not shrink a select inside flex even with min-width:0. Cap them
   everywhere and ellipsize the chosen option instead of stretching the row. */
select,.inp{max-width:100%;min-width:0;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}
.inp:focus{outline:0;border-color:var(--gold);background:rgba(255,255,255,.05)}
.fc-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:middle}
.ck{display:inline-flex;align-items:center;gap:7px;font-size:.9rem;color:var(--text-dim);cursor:pointer}
.ck input{width:17px;height:17px;accent-color:var(--gold);cursor:pointer}
.logo-lib{display:flex;flex-wrap:wrap;align-items:center;gap:8px;width:100%;margin-top:8px}
.logo-lib-h{flex-basis:100%;font-size:.76rem;letter-spacing:.04em;color:var(--gold-lt);text-transform:uppercase}
.logo-thumb{position:relative;width:52px;height:52px;border-radius:10px;overflow:hidden;
  border:2px solid var(--line);background:#fff;cursor:pointer;display:inline-block}
.logo-thumb.on{border-color:var(--gold)}
.logo-thumb img{width:100%;height:100%;object-fit:contain;padding:4px;display:block}
.logo-thumb-x{position:absolute;top:-6px;right:-6px;width:18px;height:18px;border-radius:50%;
  border:none;background:#3a1218;color:#fff;font-size:.8rem;line-height:1;cursor:pointer;display:grid;place-items:center}
.cl-links{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:10px 0 4px}
.cl-credit{flex-basis:100%;font-size:.76rem;color:var(--text-mute);line-height:1.4}
.pname{font-size:clamp(1.6rem,4.5vw,2.3rem);margin-bottom:6px}
.pmeta{color:var(--text-dim);font-size:.94rem;margin-bottom:16px}
.pmeta b{color:var(--gold-lt);font-weight:600}

.meter{height:9px;border-radius:999px;background:rgba(246,241,228,.09);overflow:hidden;margin:8px 0}
.meter i{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--gold-dk),var(--gold-lt));
  animation:fill 1.4s var(--ease) both}
@keyframes fill{from{width:0!important}}

.krow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media(min-width:700px){.krow{grid-template-columns:repeat(4,minmax(0,1fr))}}
.kbox{background:rgba(246,241,228,.045);border:1px solid var(--line-soft);border-radius:var(--r);
  padding:15px;text-align:center}
.kbox b{display:block;font-family:'Playfair Display',serif;font-size:1.5rem;color:var(--gold-lt);line-height:1.1}
.kbox span{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-mute)}

/* Data rows */
.drow{display:flex;justify-content:space-between;gap:14px;padding:12px 0;
  border-bottom:1px solid var(--line-soft);font-size:.92rem}
.drow:last-child{border:0}
.drow span{color:var(--text-mute)}
.drow b{color:var(--text);font-weight:600;text-align:right}

/* ---------- Tables / schedules ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:.88rem}
.tbl th{text-align:left;padding:12px 10px;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold);border-bottom:1px solid var(--line);font-weight:700;white-space:nowrap}
.tbl td{padding:14px 10px;border-bottom:1px solid var(--line-soft);color:var(--text-dim);vertical-align:middle}
.tbl tr:last-child td{border:0}
.tbl tr:hover td{background:rgba(212,175,55,.045);color:var(--text)}
.tbl b{color:var(--text)}
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* Rank badge */
.rk{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-weight:800;
  font-size:.85rem;background:rgba(246,241,228,.07);border:1px solid var(--line-soft);color:var(--text-dim)}
.rk.r1{background:linear-gradient(140deg,var(--gold-lt),var(--gold-dk));color:#1A1206;border-color:var(--gold)}
.rk.r2{background:linear-gradient(140deg,#D8DEE9,#9AA5B4);color:#141A22;border-color:#C3CCD9}
.rk.r3{background:linear-gradient(140deg,#D9A066,#9C6B34);color:#1A1206;border-color:#D9A066}

/* ---------- Tabs / filters ---------- */
.tabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:8px;margin-bottom:22px;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{padding:9px 18px;border-radius:999px;border:1px solid var(--line-soft);background:transparent;
  color:var(--text-dim);font-size:.84rem;font-weight:600;white-space:nowrap;transition:.25s}
.tab.on,.tab:hover{background:rgba(212,175,55,.14);border-color:var(--line);color:var(--gold-lt)}

/* ---------- Question of the day ---------- */
.qotd{border-radius:var(--r-xl);padding:32px 26px;border:1px solid var(--line);
  background:linear-gradient(150deg,rgba(212,175,55,.11),rgba(10,26,51,.85))}
.qopt{display:block;width:100%;text-align:left;padding:16px 18px;margin-bottom:11px;border-radius:var(--r);
  border:1px solid var(--line-soft);background:rgba(246,241,228,.04);color:var(--text);
  font-size:.93rem;transition:.25s var(--ease)}
.qopt:hover{border-color:var(--gold);background:rgba(212,175,55,.09);transform:translateX(4px)}
.qopt.right{border-color:var(--ok);background:rgba(74,222,128,.13)}
.qopt.wrong{border-color:var(--bad);background:rgba(248,113,113,.11);opacity:.75}
.qexp{display:none;margin-top:20px;padding:22px;border-radius:var(--r);
  background:rgba(10,26,51,.6);border:1px solid var(--line-soft)}
.qexp.show{display:block;animation:rise .5s var(--ease) both}
.qexp h4{color:var(--gold-lt);font-family:'Inter',sans-serif;font-size:.78rem;letter-spacing:.14em;
  text-transform:uppercase;margin:20px 0 8px}
.qexp h4:first-child{margin-top:0}
.qexp p{font-size:.93rem;color:var(--text-dim)}

/* ---------- Share bar ---------- */

.share p{margin:0;font-size:.86rem;color:var(--text-dim);margin-right:auto}



/* ---------- Toast ---------- */
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,140%);z-index:999;
  padding:14px 26px;border-radius:999px;background:linear-gradient(135deg,var(--gold-lt),var(--gold));
  color:#1A1206;font-weight:700;font-size:.88rem;box-shadow:var(--shadow-gold);transition:.45s var(--ease)}
.toast.show{transform:translate(-50%,0)}

/* ---------- Video frame ---------- */
.vframe{position:relative;padding-top:56.25%;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line);background:#04101F}
.vframe iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------- Footer ---------- */
.ftr{border-top:1px solid var(--line);background:rgba(6,16,32,.7);padding:52px 0 30px;margin-top:60px}
.ftr-grid{display:grid;gap:32px;grid-template-columns:minmax(0,1fr)}
@media(min-width:760px){.ftr-grid{grid-template-columns:2fr minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)}}
@media(min-width:1000px){.ftr-grid{grid-template-columns:1.8fr minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)}}
.ftr h5{font-family:'Inter',sans-serif;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);margin:0 0 14px;font-weight:700}
.ftr a{display:block;padding:6px 0;color:var(--text-mute);font-size:.87rem;transition:.2s}
.ftr a:hover{color:var(--gold-lt)}
.ftr-btm{margin-top:36px;padding-top:22px;border-top:1px solid var(--line-soft);
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:.78rem;color:var(--text-mute)}

/* ---------- Reveal on scroll ---------- */
.rv{opacity:0;transform:translateY(28px);transition:.85s var(--ease)}
.rv.in{opacity:1;transform:none}

/* ---------- Notice ---------- */
.notice{border-left:3px solid var(--gold);background:rgba(212,175,55,.07);padding:16px 20px;
  border-radius:0 var(--r) var(--r) 0;font-size:.88rem;color:var(--text-dim);margin:20px 0}
.notice.sky{border-color:var(--sky);background:rgba(91,167,217,.08)}

/* Forms */
.field{margin-bottom:18px}
.field label{display:block;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gold);font-weight:700;margin-bottom:7px}
.field input,.field select,.field textarea{width:100%;padding:13px 16px;border-radius:var(--r);
  border:1px solid var(--line-soft);background:rgba(246,241,228,.05);color:var(--text);font-size:.94rem;
  transition:.25s;font-family:inherit}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--gold);
  background:rgba(212,175,55,.07)}
.field small{display:block;color:var(--text-mute);font-size:.76rem;margin-top:6px}
select option{background:var(--navy-2);color:var(--text)}

/* ============ v1 additions ============ */
.skip{position:absolute;left:-9999px;top:0;z-index:999;padding:12px 20px;background:var(--gold);color:#1A1206;
  border-radius:0 0 var(--r) 0;font-weight:700}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}

/* green (educator) variant */
:root{--green:#5FBF8F;--green-dk:#2E8B60}
.btn-green{background:linear-gradient(135deg,var(--green),var(--green-dk));color:#04150C;
  box-shadow:0 10px 40px -10px rgba(95,191,143,.45)}
.btn-green:hover{transform:translateY(-2px)}
.nav a.btn-green{color:#04150C}
.pill.green{border-color:rgba(95,191,143,.35);background:rgba(95,191,143,.12);color:#9EE3C1}
.ico.green{background:linear-gradient(140deg,rgba(95,191,143,.22),rgba(95,191,143,.06));border-color:rgba(95,191,143,.3)}

/* three gateways */
.gates-3{grid-template-columns:minmax(0,1fr)}
@media(min-width:760px){.gates-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1060px){.gates-3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.gate-c::before{background:radial-gradient(120% 90% at 50% 0%,rgba(95,191,143,.26),transparent 60%),linear-gradient(160deg,#0D2A3E,#0A1A33)}
.gate-c li::before{color:var(--green)}
.gate::before{z-index:1}
.gate>*{position:relative;z-index:2}

/* directory cards */
.dcard{display:block;background:linear-gradient(160deg,var(--surface),rgba(10,26,51,.6));
  border:1px solid var(--line-soft);border-radius:var(--r-lg);padding:22px;transition:.3s var(--ease)}
.dcard:hover{border-color:var(--line);transform:translateY(-3px)}
.dcard h3{font-size:1.15rem;margin-bottom:4px}
.dcard .dmeta{font-size:.84rem;color:var(--text-mute);margin-bottom:12px}
.dstate{display:grid;place-items:center;padding:48px 20px;text-align:center;color:var(--text-mute);
  border:1px dashed var(--line-soft);border-radius:var(--r-lg);grid-column:1/-1}
.dstate b{display:block;color:var(--text-dim);margin-bottom:6px;font-size:1rem}

/* fieldset reset */
fieldset{border:0;margin:0;padding:26px}
legend{padding:0}
.wizard fieldset.step h3{margin-top:0}

/* video frame placeholder */
.vframe:empty{padding-top:56.25%;background:radial-gradient(90% 120% at 30% 0%,rgba(212,175,55,.18),transparent 60%),#08172D}
.vframe:empty::after{content:'▶  Latest video loads here';position:absolute;inset:0;display:grid;place-items:center;
  color:var(--text-mute);font-size:.86rem}

/* checkbox chips */
.chip input[type=checkbox]{accent-color:var(--gold);vertical-align:middle}

/* autocomplete suggestions */
[data-suggest]{display:none;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  margin-top:6px;background:var(--surface);position:relative;z-index:5}
/* numbered wizard steps */
.wizard{counter-reset:s}
.wizard .step{counter-increment:s}
.wizard .step h3::before{content:counter(s);display:inline-grid;place-items:center;width:30px;height:30px;
  border-radius:9px;background:linear-gradient(140deg,var(--gold-lt),var(--gold-dk));color:#1A1206;
  font-family:'Inter',sans-serif;font-size:.9rem;font-weight:800;margin-right:11px;vertical-align:middle}



/* ================= v6 — typographic, no photography ================= */
.ico svg{width:26px;height:26px;display:block}
.ico.sky{color:#9BD0F0}
.ico.green{color:#9EE3C1}

/* Gateway cards, built from colour and type instead of photographs */
.gate{min-height:400px;justify-content:flex-start}
.gate::before{opacity:1}
.gate-a::before{background:
  radial-gradient(130% 80% at 12% -10%,rgba(212,175,55,.30),transparent 62%),
  linear-gradient(165deg,#15305A 0%,#0C1F3C 55%,#0A1A33 100%)}
.gate-b::before{background:
  radial-gradient(130% 80% at 88% -10%,rgba(91,167,217,.32),transparent 62%),
  linear-gradient(165deg,#123553 0%,#0C1F3C 55%,#0A1A33 100%)}
.gate-c::before{background:
  radial-gradient(130% 80% at 50% -10%,rgba(95,191,143,.28),transparent 62%),
  linear-gradient(165deg,#0F3348 0%,#0C1F3C 55%,#0A1A33 100%)}
.gate::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:linear-gradient(rgba(246,241,228,.04) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(246,241,228,.04) 1px,transparent 1px);
  background-size:38px 38px;
  mask-image:radial-gradient(ellipse at 50% 0%,#000 10%,transparent 70%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 0%,#000 10%,transparent 70%)}
.gate > *{position:relative;z-index:2}
.door{font-size:11rem;opacity:.05}

/* Hero: give the logo room to carry the page */
.hero{padding:72px 0 44px}
.hero-logo{width:min(330px,72vw)}

/* Section rule for rhythm without imagery */
.sec-head .eyebrow::after{content:'';display:block;width:46px;height:2px;margin:14px auto 0;
  background:linear-gradient(90deg,transparent,var(--gold),transparent)}

/* Empty states without illustrations */
.dstate{padding:44px 20px}

/* institution quick filter chips */
button.chip{cursor:pointer;font-family:inherit}
button.chip.on{background:linear-gradient(135deg,var(--gold-lt),var(--gold));color:#1A1206;border-color:var(--gold)}

/* expandable lesson and guide cards */
details.lesson{cursor:pointer}
details.lesson summary{list-style:none;display:block}
details.lesson summary::-webkit-details-marker{display:none}
details.lesson summary::after{content:'Read →';display:inline-block;margin-top:12px;
  font-size:.82rem;font-weight:600;color:var(--gold-lt)}
details.lesson[open] summary::after{content:'Close ↑'}
details.lesson .lesson-body{margin-top:18px;padding-top:18px;border-top:1px solid var(--line-soft)}
details.lesson .lesson-body p{font-size:.92rem;color:var(--text-dim)}
details.lesson .lesson-body b{color:var(--gold-lt)}
details.lesson[open]{border-color:var(--line)}

/* ---------- photography (v14) ---------- */
.ph{display:block;width:100%;height:auto;border-radius:var(--r-lg);object-fit:cover;
    background:#0A1A33;box-shadow:0 14px 40px rgba(0,0,0,.4)}
.ph-frame{position:relative;border-radius:var(--r-lg);overflow:hidden;line-height:0}
.ph-frame img{display:block;width:100%;height:auto}
/* Slide graphics: shown whole, no fade, no crop. */
.ph-slide{border-radius:var(--r-lg);overflow:hidden;line-height:0;border:1px solid var(--line-soft);
    background:#0A1526;box-shadow:0 14px 40px rgba(0,0,0,.4)}
.ph-slide img{display:block;width:100%;height:auto}
.ph-frame::after{content:'';position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(180deg,rgba(10,26,51,0) 42%,rgba(10,26,51,.62) 74%,rgba(10,26,51,.9) 100%);
    box-shadow:inset 0 0 0 1px rgba(212,175,55,.16)}
/* The frame sets line-height:0 so the image leaves no baseline gap under it.
   The caption sits inside that frame and was inheriting the zero, which meant
   any caption long enough to wrap printed both lines on the same baseline, one
   on top of the other. Every "Coachbine" and "Cnovolimemeitgnt" on the site
   traced back to this one declaration. The caption needs its own line-height. */
.ph-cap{position:absolute;left:16px;right:16px;bottom:13px;z-index:2;font-size:.78rem;
    line-height:1.38;letter-spacing:.03em;color:#EAF1FA;
    text-shadow:0 2px 10px rgba(0,0,0,.75),0 1px 3px rgba(0,0,0,.9)}
.gate-img{position:relative;inset:auto;width:auto;height:auto;opacity:1;z-index:2;filter:none;
    margin:-38px -30px 24px;line-height:0;overflow:hidden}
.gate:has(.gate-img)::after{display:none}
.gate-img img{display:block;width:100%;height:216px;object-fit:cover;object-position:center 36%;
    filter:contrast(1.14) saturate(1.1)}
.gate-img::after{content:'';position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(10,26,51,0) 62%,rgba(10,26,51,.9) 100%)}
.strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.strip .ph-frame img{height:170px;object-fit:cover;filter:brightness(1.08) saturate(1.04)}
.strip .ph-cap{font-size:.75rem;left:12px;right:12px;bottom:10px;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
@media(max-width:860px){.strip{grid-template-columns:repeat(2,minmax(0,1fr))}}
.slidewall{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.slidewall img{display:block;width:100%;height:auto;border-radius:var(--r-md);
    box-shadow:0 10px 30px rgba(0,0,0,.38);border:1px solid rgba(212,175,55,.18)}
@media(max-width:700px){.slidewall{grid-template-columns:minmax(0,1fr)}}
.split-ph{display:grid;grid-template-columns:1.05fr .95fr;gap:36px;align-items:center}
@media(max-width:860px){.split-ph{grid-template-columns:minmax(0,1fr);gap:24px}}
.bookrow{display:flex;gap:18px;align-items:flex-end;justify-content:center;flex-wrap:wrap}
.bookrow img{height:270px;width:auto;border-radius:8px;box-shadow:0 18px 44px rgba(0,0,0,.5)}

/* ================= v18: breadcrumbs, share, recruits, desktop ================= */

/* ---- breadcrumbs ---- */
.crumbs{border-bottom:1px solid var(--line-soft);background:rgba(10,26,51,.6);
  position:relative;z-index:2;font-size:.82rem;padding:11px 0}
.crumbs .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.crumbs a{color:var(--text-mute);text-decoration:none;transition:.2s}
.crumbs a:hover{color:var(--gold-lt)}
.crumbs span[aria-current]{color:var(--text)}
.crumb-sep{color:rgba(143,166,196,.42)}

/* ---- share, the growth surface ---- */
.share{display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between;
  padding:20px 22px;border-radius:var(--r-lg);border:1px solid var(--line-soft);
  background:linear-gradient(120deg,rgba(212,175,55,.09),rgba(10,26,51,.5))}
.share-lead{min-width:220px;flex:1}
.share-lead b{display:block;font-size:1.02rem;margin-bottom:3px}
.share-lead span{color:var(--text-dim);font-size:.88rem}
.share-btns{display:flex;flex-wrap:wrap;gap:8px}
.sbtn{display:inline-flex;align-items:center;gap:8px;justify-content:center;
  width:42px;height:42px;padding:0;border-radius:12px;cursor:pointer;
  border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--text-dim);
  transition:.22s var(--ease)}
.sbtn svg{width:19px;height:19px;display:block}
.sbtn:hover{color:#0A1A33;background:var(--gold);border-color:var(--gold);transform:translateY(-2px)}
.sbtn:focus-visible{outline:2px solid var(--gold-lt);outline-offset:2px}
.sbtn-main{width:auto;padding:0 18px;background:var(--gold);color:#0A1A33;border-color:var(--gold);font-weight:700}
.sbtn-main span{font-size:.9rem}
.sbtn-main:hover{filter:brightness(1.08)}

/* ---- QR sheet ---- */
.qr-modal{position:fixed;inset:0;z-index:400;display:none;align-items:center;justify-content:center;
  background:rgba(4,12,25,.82);backdrop-filter:blur(6px);padding:20px}
.qr-modal.open{display:flex}
.qr-card{background:#0E2244;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:28px 26px 22px;text-align:center;max-width:340px;position:relative}
.qr-card h3{font-size:1.1rem;margin-bottom:16px}
.qr-holder{background:#fff;border-radius:12px;padding:12px;display:inline-block;line-height:0}
.qr-url{color:var(--text-mute);font-size:.78rem;margin-top:14px;word-break:break-all}
.qr-x{position:absolute;top:8px;right:10px;background:none;border:0;color:var(--text-mute);
  font-size:1.6rem;line-height:1;cursor:pointer}
.qr-x:hover{color:var(--gold-lt)}

/* ---- chips ---- */
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{display:inline-block;padding:8px 15px;border-radius:999px;font-size:.85rem;text-decoration:none;
  border:1px solid var(--line-soft);color:var(--text-dim);background:rgba(255,255,255,.03);transition:.2s}
.chip:hover{border-color:var(--gold);color:var(--gold-lt)}
.chip.on{background:var(--gold);border-color:var(--gold);color:#0A1A33;font-weight:700}

/* ---- recruit table ---- */
.rec-table{border:1px solid var(--line-soft);border-radius:var(--r-lg);overflow:hidden}
.rec-head,.rec-row{display:grid;gap:14px;align-items:center;padding:13px 16px;
  grid-template-columns:44px 1.7fr .8fr .7fr .6fr .7fr 116px}
.rec-head{background:rgba(255,255,255,.045);font-size:.72rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--text-mute);font-weight:700}
.rec-row{border-top:1px solid var(--line-soft);transition:.18s}
.rec-row:hover{background:rgba(212,175,55,.06)}
.rec-rank{font-family:var(--serif);font-size:1.15rem;color:var(--gold);text-align:center}
.rec-name{display:flex;align-items:center;gap:11px;min-width:0}
.rec-av{width:40px;height:40px;border-radius:10px;object-fit:cover;background:#12294B;flex:none}
/* Gender silhouette placeholder + KTJ logo badge (used when no headshot) */
.pav-ph{position:relative;overflow:hidden;display:grid;place-items:center}
.pav-svg{width:76%;height:76%;display:block}
.pavatar .pav-svg{color:#1A1206;opacity:.94}
.rec-av.pav-ph{display:grid;place-items:center;background:linear-gradient(140deg,#183256,#0E1F3A)}
.rec-av .pav-svg{width:70%;height:70%;color:var(--gold-lt);opacity:.9}
.crest .pav-svg{color:var(--gold-lt);opacity:.9}
.pav-badge{position:absolute;right:5px;bottom:5px;width:26px;height:26px;border-radius:7px;
  background:#0A0F1C;padding:3px;object-fit:contain;box-shadow:0 1px 5px rgba(0,0,0,.55);
  border:1px solid rgba(212,175,55,.5)}
/* College offer / commitment marks */
.ofr-row{display:flex;flex-wrap:wrap;gap:12px}
.ofr{display:flex;flex-direction:column;align-items:center;gap:6px;width:92px;padding:12px 8px 10px;
  border-radius:14px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.09);
  text-decoration:none;color:var(--text-dim);position:relative;transition:.15s}
.ofr:hover{border-color:rgba(212,175,55,.55);transform:translateY(-2px);color:var(--text)}
.ofr img{width:48px;height:48px;object-fit:contain;background:#fff;border-radius:10px;padding:4px}
.ofr>span:last-child{font-size:.68rem;line-height:1.2;text-align:center;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ofr-mono{width:48px;height:48px;display:grid;place-items:center;border-radius:10px;
  font-family:var(--serif);font-weight:700;font-size:1.25rem;color:#1A1206;
  background:linear-gradient(140deg,var(--gold),var(--gold-dk))}
.ofr-commit{border-color:var(--gold);background:rgba(212,175,55,.12);width:100px}
.ofr-commit .ofr-mono{box-shadow:0 0 0 2px rgba(212,175,55,.5)}
.ofr-badge{font-style:normal;font-size:.6rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  color:#1A1206;background:linear-gradient(135deg,var(--gold-lt),var(--gold));padding:1px 7px;border-radius:999px}
/* More on this recruit: published coverage links */
.lnk-group{margin-top:14px}
.lnk-group h3{font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-lt);margin:0 0 8px}
.lnk-list{display:grid;gap:8px}
.lnk{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:12px;text-decoration:none;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.09);color:var(--text-dim);transition:.15s}
.lnk:hover{border-color:rgba(212,175,55,.5);color:var(--text);transform:translateX(2px)}
.lnk-src{flex:none;width:40px;height:40px;display:grid;place-items:center}
.lnk-src img{width:40px;height:40px;object-fit:contain;background:#fff;border-radius:9px;padding:3px}
.lnk-mono{width:40px;height:40px;display:grid;place-items:center;border-radius:9px;font-family:var(--serif);
  font-weight:700;font-size:1rem;color:#1A1206;background:linear-gradient(140deg,var(--gold),var(--gold-dk))}
.lnk-main{min-width:0;display:flex;flex-direction:column;gap:2px}
.lnk-main b{font-size:.92rem;line-height:1.25;font-weight:600;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lnk-meta{font-size:.74rem;color:var(--text-mute)}
/* Featured This Week scholar cards */
.feat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:20px}
@media(max-width:900px){.feat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.feat-grid{grid-template-columns:minmax(0,1fr)}}
.feat-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;
  padding:22px 16px;border-radius:18px;text-decoration:none;color:var(--text);
  background:linear-gradient(160deg,#0E2444,#0A1A33);border:1px solid rgba(255,255,255,.09);transition:.18s}
.feat-card:hover{border-color:rgba(212,175,55,.6);transform:translateY(-3px)}
.feat-card.ph{border-style:dashed;border-color:rgba(212,175,55,.4)}
.feat-av{width:82px;height:82px;border-radius:22px;flex:none;overflow:hidden;
  background:linear-gradient(140deg,var(--gold),var(--gold-dk));display:grid;place-items:center;
  border:2px solid var(--gold);box-shadow:var(--shadow-gold)}
.feat-av img{width:100%;height:100%;object-fit:cover}
.feat-av .pav-svg{width:74%;height:74%;color:#1A1206;opacity:.92}
.feat-cls{font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-lt);margin-top:4px}
.feat-name{font-family:var(--serif);font-size:1.12rem;line-height:1.2}
.feat-meta{font-size:.8rem;color:var(--text-mute);line-height:1.35}
.feat-gpa{display:inline-block;margin-top:2px;font-size:.72rem;font-weight:800;color:#1A1206;
  background:linear-gradient(135deg,var(--gold-lt),var(--gold));padding:2px 9px;border-radius:999px}
.rec-name b{display:block;font-size:.95rem;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rec-name span{display:block;font-size:.76rem;color:var(--text-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rec-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px;white-space:normal}
.rt-chip{font-size:.66rem;font-weight:700;letter-spacing:.02em;padding:2px 7px;border-radius:999px;
  border:1px solid transparent;line-height:1.4}
.rt-chip.rt-sport{background:rgba(212,175,55,.14);color:var(--gold-lt);border-color:rgba(212,175,55,.4)}
.rt-chip.rt-sport:first-child{background:linear-gradient(135deg,var(--gold),var(--gold-dk));color:#1A1206;border-color:var(--gold)}
.rt-chip.rt-act{background:rgba(90,160,220,.16);color:#9FD0F5;border-color:rgba(90,160,220,.42)}
/* Cross-link styling: the athlete name reads as a bold heading link; the school
   is a quieter gold link. Whole ranking rows are clickable (see ktjWireRowNav). */
.rt-name{font-weight:800;color:var(--text);text-decoration:none}
.rt-name:hover{color:var(--gold-lt);text-decoration:underline}
.rt-link{color:var(--gold-lt);text-decoration:none}
.rt-link:hover{text-decoration:underline}
tr[data-href]:hover{background:rgba(255,255,255,.03)}
/* Arts & Talent doorway */
.tal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin-top:20px}
.tal-card{display:flex;gap:13px;align-items:flex-start;padding:15px;border-radius:16px;
  background:var(--panel,#0E1F3A);border:1px solid rgba(255,255,255,.08);text-decoration:none;color:inherit;transition:.15s}
.tal-card:hover{border-color:rgba(212,175,55,.5);transform:translateY(-2px)}
.tal-av{width:52px;height:52px;border-radius:13px;flex:none;background:linear-gradient(140deg,#183256,#0E1F3A);
  display:grid;place-items:center;border:1px solid rgba(212,175,55,.35)}
.tal-av .pav-svg{width:70%;height:70%;color:var(--gold-lt);opacity:.9}
.tal-main{min-width:0;display:flex;flex-direction:column;gap:3px}
.tal-main b{font-size:1rem;line-height:1.2}
.tal-sub{font-size:.78rem;color:var(--text-mute)}
.tal-disc{font-size:.8rem;color:var(--gold-lt);font-weight:600}
.tal-cat{display:flex;flex-wrap:wrap;gap:9px;margin:20px 0}
.tal-cat .chip{cursor:pointer}
.tal-cat .chip.on{background:linear-gradient(135deg,var(--gold),var(--gold-dk));color:#1A1206;border-color:var(--gold);font-weight:700}
.tal-gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:24px 0 6px}
.tal-gallery figure{margin:0;position:relative;border-radius:16px;overflow:hidden;border:1px solid rgba(212,175,55,.3)}
.tal-gallery img{width:100%;height:210px;object-fit:cover;display:block;transition:transform .35s ease}
.tal-gallery figure:hover img{transform:scale(1.06)}
.tal-gallery figcaption{position:absolute;left:0;right:0;bottom:0;padding:20px 13px 10px;
  font-family:var(--serif);font-weight:700;font-size:1rem;color:#fff;letter-spacing:.01em;
  background:linear-gradient(to top,rgba(6,12,26,.94),rgba(6,12,26,.55) 55%,transparent)}
@media(max-width:760px){.tal-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.tal-gallery img{height:150px}}
.rec-cell{font-size:.86rem;color:var(--text-dim)}
/* The wrapper exists purely for the phone layout. display:contents dissolves
   it on desktop, so the four cells keep sitting in their own table columns. */
.rec-meta{display:contents}
.rec-film{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:9px;
  font-size:.79rem;font-weight:600;text-decoration:none;border:1px solid rgba(212,175,55,.4);
  color:var(--gold-lt);background:rgba(212,175,55,.09);transition:.2s;white-space:nowrap}
.rec-film:hover{background:var(--gold);color:#0A1A33}
.rec-film.off{opacity:.35;pointer-events:none;border-color:var(--line-soft);color:var(--text-mute);background:none}
.rec-empty{padding:44px 20px;text-align:center;color:var(--text-dim)}
.cnt{font-family:var(--serif);color:var(--gold-lt);font-size:1.1rem}
.mini{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-mute)}

/* Below 900px the grid becomes a stacked card, same data, no horizontal scroll. */
@media(max-width:900px){
  .rec-head{display:none}
  .rec-row{grid-template-columns:36px minmax(0,1fr) auto;grid-template-areas:'r n f' '. m m';row-gap:9px;padding:14px}
  .rec-rank{grid-area:r}.rec-name{grid-area:n}.rec-film{grid-area:f}
  .rec-meta{grid-area:m;display:flex;flex-wrap:wrap;align-items:center;gap:4px 0;min-width:0}
  .rec-cell{font-size:.8rem}
  .rec-cell:not(:last-child)::after{content:' · ';color:var(--line);margin:0 7px}
  /* an em dash cell is filler on a phone; hide it and its separator */
  .rec-meta .rec-cell:empty{display:none}
}

/* ---- pagination, numbered and crawlable ---- */
.pager{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin-top:26px}
.pager a,.pager span{min-width:40px;text-align:center;padding:9px 12px;border-radius:10px;
  font-size:.87rem;text-decoration:none;border:1px solid var(--line-soft);color:var(--text-dim)}
.pager a:hover{border-color:var(--gold);color:var(--gold-lt)}
.pager .on{background:var(--gold);border-color:var(--gold);color:#0A1A33;font-weight:700}
.pager .gap{border:0}

/* ---- desktop and work computers ----
   Teachers and administrators open this on a 1080p or 1440p work machine in a
   maximised window. The layout stops growing at 1180px on most sites and leaves
   a third of the screen empty; these steps use it. */
@media(min-width:1500px){
  .wrap{max-width:1360px}
  .grid.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .rec-head,.rec-row{grid-template-columns:52px 2fr .9fr .8fr .7fr .8fr 128px}
  h1{font-size:clamp(2.6rem,3.4vw,3.9rem)}
}
@media(min-width:1800px){
  .wrap{max-width:1520px}
  .strip{grid-template-columns:repeat(4,minmax(0,1fr))}
  .strip .ph-frame img{height:210px}
}
/* Wide-but-short windows, the classic docked work monitor. */
@media(min-width:1200px) and (max-height:820px){
  section{padding-top:44px;padding-bottom:44px}
  .hero{padding:44px 0 30px}
  .hero-logo{width:min(230px,26vw)}
}

/* ---- print, for administrators who print a page for a meeting ---- */
@media print{
  .hdr,.mob,.share,.crumbs,.aura,.grid-lines,.skip,.ftr-btm,.qr-modal,.burger{display:none!important}
  body{background:#fff!important;color:#111!important}
  .card,.gate,.rec-table,.notice{border:1px solid #ccc!important;background:#fff!important;
    box-shadow:none!important;break-inside:avoid}
  h1,h2,h3,b,strong{color:#111!important}
  p,li,.rec-cell{color:#333!important}
  a{color:#111!important;text-decoration:underline}
  a[href^="/"]::after{content:" (keystothejourney.com" attr(href) ")";font-size:.75em;color:#666}
  .rv{opacity:1!important;transform:none!important}
  .ph-frame::after{display:none}
  section{padding:14px 0!important;break-inside:avoid}
}

/* ---- respect reduced motion ---- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .rv{opacity:1!important;transform:none!important}
}

/* ---- promises ---- */
.promise{border-left:3px solid rgba(212,175,55,.5)}
.promise h3{font-size:1.16rem;line-height:1.32;color:var(--gold-lt)}
.promise-vs{font-size:.88rem;color:var(--text-mute);padding:12px 0 12px 14px;
  border-left:2px solid rgba(255,90,90,.35);margin-bottom:14px}
.promise-vs b{color:#F2A0A0;display:block;margin-bottom:5px;font-size:.82rem;
  letter-spacing:.05em;text-transform:uppercase}
.promise-us{font-size:.92rem;color:var(--text-dim);padding-left:14px;
  border-left:2px solid rgba(95,191,143,.5)}
.promise-us b{color:#9EE3C1;display:block;margin-bottom:5px;font-size:.82rem;
  letter-spacing:.05em;text-transform:uppercase}

/* ---- recruits hero facts + facet headings ---- */
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:30px;max-width:900px}
.facts div{padding:16px 18px;border-radius:var(--r-md);border:1px solid var(--line-soft);
  background:rgba(255,255,255,.03)}
.facts b{display:block;font-family:var(--serif);font-size:1.3rem;color:var(--gold-lt);margin-bottom:4px}
.facts span{font-size:.79rem;color:var(--text-mute);line-height:1.4;display:block}
@media(max-width:760px){.facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
.facet-h{font-size:1.22rem;margin-bottom:16px;text-align:left}

/* ================= v19: scout console + classifications ================= */
.clsbadge{display:inline-block;margin-left:7px;padding:2px 8px;border-radius:6px;
  font-size:.7rem;font-weight:700;letter-spacing:.05em;
  background:rgba(212,175,55,.15);border:1px solid rgba(212,175,55,.35);color:var(--gold-lt)}
.req{font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);
  margin-left:6px;font-weight:700}
.hint{display:block;margin-top:6px;font-size:.76rem;color:var(--text-mute);line-height:1.45}

/* drop zone */
.drop{border:2px dashed var(--line);border-radius:var(--r-lg);padding:38px 22px;text-align:center;
  cursor:pointer;transition:.22s var(--ease);background:rgba(255,255,255,.02)}
.drop:hover,.drop:focus-visible,.drop.over{border-color:var(--gold);background:rgba(212,175,55,.07);outline:none}
.drop b{display:block;font-size:1.02rem;margin-bottom:6px}
.drop span{display:block;color:var(--text-mute);font-size:.84rem}

/* column mapping */
.maprows{display:flex;flex-direction:column;gap:8px}
.maprow{display:grid;grid-template-columns:minmax(0,1fr) 26px minmax(0,1fr);gap:12px;align-items:center;
  padding:11px 14px;border-radius:var(--r-md);border:1px solid var(--line-soft);
  background:rgba(255,255,255,.025)}
.maph b{display:block;font-size:.88rem}
.maph span{display:block;font-size:.75rem;color:var(--text-mute);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.mapa{text-align:center;color:var(--text-mute)}
.maprow select{width:100%;padding:8px 10px;font-size:.85rem}
@media(max-width:640px){.maprow{grid-template-columns:minmax(0,1fr);gap:6px}.mapa{display:none}}

.pill.mute{background:rgba(255,255,255,.06);border-color:var(--line-soft);color:var(--text-mute)}
.formmsg{margin-top:14px;font-size:.88rem;color:var(--gold-lt);min-height:1.2em}

/* ============================================================
   CLAIM YOUR PROFILE
   The visual job here is to make the gap legible. A claimed
   profile and an unclaimed one should not look like two states
   of a checkbox; the unclaimed one should look like a building
   with the lights off in half the windows.
   ============================================================ */

.cl-hero{position:relative;border-radius:var(--r-xl);overflow:hidden;
  border:1px solid var(--line);padding:34px 26px 30px;
  background:radial-gradient(120% 140% at 12% 0%,rgba(212,175,55,.16),transparent 55%),
             linear-gradient(160deg,var(--surface),rgba(10,26,51,.72))}
.cl-hero h1{font-size:clamp(1.9rem,5.4vw,3rem);line-height:1.06;margin:8px 0 12px}
.cl-hero p{color:var(--text-dim);max-width:62ch}

/* the search box that resolves to either "here you are" or "add yourself" */
.cl-find{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;margin-top:22px}
.cl-find input{width:100%;padding:16px 18px;font-size:1.05rem;border-radius:var(--r);
  background:rgba(4,10,20,.55);border:1px solid var(--line-soft);color:var(--text)}
.cl-find input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(212,175,55,.14)}
.cl-filters{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.cl-filters select{padding:9px 13px;border-radius:999px;font-size:.85rem;
  background:rgba(246,241,228,.06);border:1px solid var(--line-soft);color:var(--text)}

.cl-count{display:flex;flex-wrap:wrap;gap:22px;margin-top:24px;padding-top:20px;
  border-top:1px solid var(--line-soft)}
.cl-count div b{display:block;font-family:'Playfair Display',serif;font-size:1.9rem;
  color:var(--gold-lt);line-height:1}
.cl-count div span{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-mute)}

/* result cards */
.cl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin-top:22px}
.cl-card{display:block;text-decoration:none;color:inherit;padding:16px 18px;border-radius:var(--r-lg);
  border:1px solid var(--line-soft);background:linear-gradient(160deg,var(--surface),rgba(10,26,51,.6));
  transition:.35s var(--ease)}
.cl-card:hover{border-color:var(--gold);transform:translateY(-3px);box-shadow:var(--shadow)}
.cl-card .n{font-family:'Playfair Display',serif;font-size:1.22rem;color:var(--cream);line-height:1.15}
.cl-card .m{font-size:.83rem;color:var(--text-dim);margin-top:5px}
.cl-card .s{font-size:.76rem;color:var(--text-mute);margin-top:3px}
.cl-tag{display:inline-block;margin-top:11px;padding:4px 11px;border-radius:999px;
  font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;font-weight:700}
.cl-tag.open{background:rgba(212,175,55,.16);color:var(--gold-lt);border:1px solid var(--line)}
.cl-tag.pending{background:rgba(251,191,36,.13);color:var(--warn);border:1px solid rgba(251,191,36,.3)}
.cl-tag.claimed{background:rgba(74,222,128,.12);color:var(--ok);border:1px solid rgba(74,222,128,.28)}

/* the profile strength meter, drawn from what is actually on file */
.cl-meter{margin:22px 0 6px}
.cl-meter-bar{height:10px;border-radius:999px;background:rgba(4,10,20,.6);
  border:1px solid var(--line-soft);overflow:hidden}
.cl-meter-fill{height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--gold-dk),var(--gold),var(--gold-lt));
  transition:width 1.1s var(--ease)}
.cl-meter-lab{display:flex;justify-content:space-between;font-size:.78rem;
  color:var(--text-mute);margin-top:8px}
.cl-meter-lab b{color:var(--gold-lt)}

/* the empty slots. deliberately shaped like the thing that is missing,
   because a labelled blank asks a better question than a progress bar. */
.cl-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin-top:16px}
.cl-slot{padding:15px 16px;border-radius:var(--r);border:1px dashed var(--line-soft);
  background:rgba(4,10,20,.28)}
.cl-slot.on{border-style:solid;border-color:var(--line);background:rgba(212,175,55,.06)}
.cl-slot .k{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-mute)}
.cl-slot .v{font-family:'Playfair Display',serif;font-size:1.32rem;color:var(--text-mute);margin-top:5px}
.cl-slot.on .v{color:var(--gold-lt)}
.cl-slot .h{font-size:.74rem;color:var(--text-mute);margin-top:4px;line-height:1.4}

/* claim form steps */
.cl-steps{display:flex;gap:8px;margin-bottom:22px;flex-wrap:wrap}
.cl-step{flex:1;min-width:88px;padding:10px 12px;border-radius:var(--r);text-align:center;
  border:1px solid var(--line-soft);background:rgba(4,10,20,.3);font-size:.76rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--text-mute)}
.cl-step.on{border-color:var(--gold);color:var(--gold-lt);background:rgba(212,175,55,.09);font-weight:700}
.cl-step.done{border-color:rgba(74,222,128,.35);color:var(--ok)}
.cl-pane{display:none}
.cl-pane.on{display:block;animation:clfade .45s var(--ease)}
@keyframes clfade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.cl-pick{display:grid;gap:10px;margin:14px 0 6px}
.cl-pick label{display:flex;gap:13px;align-items:flex-start;padding:15px 17px;cursor:pointer;
  border-radius:var(--r);border:1px solid var(--line-soft);background:rgba(4,10,20,.3);
  transition:.25s var(--ease)}
.cl-pick label:hover{border-color:var(--line)}
.cl-pick input:checked+span{color:var(--gold-lt)}
.cl-pick label:has(input:checked){border-color:var(--gold);background:rgba(212,175,55,.08)}
.cl-pick b{display:block;font-size:.98rem;color:var(--cream)}
.cl-pick label:has(input:checked) b{color:var(--gold-lt)}
.cl-pick small{display:block;color:var(--text-mute);font-size:.8rem;margin-top:3px;line-height:1.45}

.cl-note{border-left:3px solid var(--gold);padding:12px 0 12px 16px;margin:18px 0;
  color:var(--text-dim);font-size:.9rem;line-height:1.6}
.cl-note b{color:var(--gold-lt)}

.cl-msg{padding:14px 17px;border-radius:var(--r);font-size:.9rem;margin-top:16px;display:none}
.cl-msg.on{display:block}
.cl-msg.err{background:rgba(248,113,113,.1);border:1px solid rgba(248,113,113,.32);color:#FCA5A5}
.cl-msg.ok{background:rgba(74,222,128,.1);border:1px solid rgba(74,222,128,.3);color:#86EFAC}

@media(max-width:640px){
  .cl-find{grid-template-columns:minmax(0,1fr)}
  .cl-count{gap:16px}
  .cl-count div b{font-size:1.5rem}
}

/* Label wrapped field. Same look as .field, but the label wraps the control so
   the hit area is the whole row and no id has to be invented for every input. */
.fld{display:block;margin-bottom:18px}
.fld>span{display:block;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-mute);margin-bottom:7px;font-weight:600}
.fld>span em{color:var(--gold);font-style:normal}
.fld input,.fld select,.fld textarea{width:100%;padding:13px 16px;border-radius:var(--r);
  background:rgba(4,10,20,.5);border:1px solid var(--line-soft);color:var(--text);
  font-family:inherit;font-size:.95rem}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:0;border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(212,175,55,.13)}
.fld textarea{resize:vertical;min-height:64px}

/* The header is sticky, so anything we scroll to programmatically has to leave
   room for it or the first line lands underneath the nav. */
[data-cl-form],[data-cl-athlete-page],[data-cl-remove],[data-cl-find]{scroll-margin-top:96px}

/* ---------- the NLB mark ----------
   This used to be a bare centred image with a centred line of text under it,
   sitting beside a left aligned column. On a phone the two columns stack and
   the mix of centring reads as a mistake. Making it a figure with its own
   border turns it into an object the eye can accept as a figure, and the
   left aligned prose beneath it reads as the caption's continuation rather
   than as a misalignment. */
.nlb-mark{margin:0;padding:22px;border-radius:var(--r-xl);text-align:center;
  border:1px solid var(--line);background:linear-gradient(160deg,var(--surface),rgba(10,26,51,.6))}
.nlb-mark img{display:block;width:100%;max-width:320px;margin:0 auto;
  background:#fff;padding:16px 20px;border-radius:var(--r-lg)}
.nlb-mark figcaption{margin-top:16px;padding-top:14px;border-top:1px solid var(--line-soft);
  color:var(--gold-lt);font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;
  line-height:1.9;display:flex;flex-wrap:wrap;justify-content:center;gap:0 10px}
.nlb-mark figcaption i{color:var(--text-mute);font-style:normal}
@media(max-width:520px){
  .nlb-mark{padding:18px 14px}
  .nlb-mark figcaption{letter-spacing:.1em;font-size:.72rem;gap:0 7px}
}

/* A held measurable is not missing data, it is a field waiting on the athlete.
   Styling it as a state rather than a blank makes that legible to a coach. */
.rec-held{display:inline-block;padding:2px 9px;border-radius:999px;font-size:.68rem;
  letter-spacing:.08em;text-transform:uppercase;font-weight:700;
  background:rgba(212,175,55,.14);color:var(--gold-lt);border:1px solid var(--line)}
.rec-commit{color:var(--ok);font-size:.82rem;font-weight:600;text-decoration:none}
.rec-commit:hover{text-decoration:underline}
/* Board name/school links: name inherits the heading look, school is a quiet link */
.rec-name-b{color:inherit;text-decoration:none}
.rec-name-b:hover b{color:var(--gold-lt)}
.rec-school{color:var(--text-mute);text-decoration:none}
.rec-school:hover{color:var(--gold-lt);text-decoration:underline}

/* ============================================================
   THE RECRUITING BOARD
   A school row has to answer "is this stop worth it" in one
   glance, so the prospect count is the largest thing on the
   row and everything else hangs off it.
   ============================================================ */
.bd-bar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;
  padding:16px;border-radius:var(--r-lg);border:1px solid var(--line-soft);
  background:rgba(4,10,20,.4);margin-bottom:14px}
.bd-bar input[type=search]{width:100%;padding:13px 16px;border-radius:var(--r);font-size:1rem;
  background:rgba(4,10,20,.6);border:1px solid var(--line-soft);color:var(--text)}
.bd-bar input[type=search]:focus{outline:0;border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(212,175,55,.13)}
.bd-selects{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;grid-column:1/-1;align-items:center}
.bd-selects select{padding:10px 14px;border-radius:999px;font-size:.86rem;
  background:rgba(246,241,228,.06);border:1px solid var(--line-soft);color:var(--text)}
.bd-selects label.bd-toggle{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;
  border-radius:999px;font-size:.84rem;border:1px solid var(--line-soft);cursor:pointer;
  background:rgba(246,241,228,.04)}
.bd-selects label.bd-toggle:has(input:checked){border-color:var(--gold);color:var(--gold-lt);
  background:rgba(212,175,55,.09)}
.bd-selects input[type=checkbox]{accent-color:var(--gold)}

.bd-views{display:flex;gap:6px;padding:4px;border-radius:999px;
  border:1px solid var(--line-soft);background:rgba(4,10,20,.4)}
.bd-views button{padding:9px 17px;border-radius:999px;font-size:.84rem;font-weight:600;
  border:0;background:transparent;color:var(--text-dim);cursor:pointer}
.bd-views button.on{background:var(--gold);color:#0A1A33}

.bd-chips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 6px}
.bd-summary{color:var(--text-dim);font-size:.92rem;margin:10px 0 16px}
.bd-summary b{color:var(--gold-lt);font-family:'Playfair Display',serif;font-size:1.15rem}
.bd-loading{padding:34px 16px;text-align:center;color:var(--text-mute)}

.bd-list{display:grid;gap:10px}
.bd-school{border-radius:var(--r-lg);border:1px solid var(--line-soft);
  background:linear-gradient(160deg,var(--surface),rgba(10,26,51,.55));overflow:hidden;
  transition:.3s var(--ease)}
.bd-school:hover{border-color:var(--line)}
.bd-school.on{border-color:var(--gold)}
.bd-school-hd{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:16px;align-items:center;
  width:100%;padding:16px 18px;background:transparent;border:0;cursor:pointer;text-align:left;
  color:inherit;font:inherit}
.bd-count{display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:62px;padding:9px 6px;border-radius:var(--r);
  background:rgba(212,175,55,.11);border:1px solid var(--line)}
.bd-count b{font-family:'Playfair Display',serif;font-size:1.65rem;color:var(--gold-lt);line-height:1}
.bd-count i{font-style:normal;font-size:.6rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--text-mute);margin-top:3px}
.bd-school-id{min-width:0}
.bd-school-id b{display:block;font-family:'Playfair Display',serif;font-size:1.15rem;
  color:var(--cream);line-height:1.25}
.bd-school-id span{display:block;font-size:.85rem;color:var(--text-dim);margin-top:3px}
.bd-meta{font-size:.76rem !important;color:var(--text-mute) !important;margin-top:4px !important;
  line-height:1.5}
.bd-meta i{font-style:normal;color:var(--gold-lt)}
.bd-flags{display:flex;flex-direction:column;gap:5px;align-items:flex-end}
.bd-flag{display:inline-block;padding:3px 10px;border-radius:999px;font-size:.68rem;
  letter-spacing:.06em;text-transform:uppercase;font-weight:700;white-space:nowrap}
.bd-flag.ok{background:rgba(74,222,128,.12);color:var(--ok);border:1px solid rgba(74,222,128,.28)}
.bd-flag.gold{background:rgba(212,175,55,.14);color:var(--gold-lt);border:1px solid var(--line)}
.bd-flag.mute{background:rgba(246,241,228,.05);color:var(--text-mute);border:1px solid var(--line-soft)}
.bd-chev{color:var(--text-mute);font-size:1.5rem;transition:transform .3s var(--ease)}
.bd-school.on .bd-chev{transform:rotate(90deg);color:var(--gold)}
.bd-roster{padding:0 18px 16px}

.bd-athlist{display:grid;gap:8px}
.bd-ath{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;
  padding:13px 15px;border-radius:var(--r);text-decoration:none;color:inherit;
  border:1px solid var(--line-soft);background:rgba(4,10,20,.32);transition:.25s var(--ease)}
.bd-ath:hover{border-color:var(--gold);background:rgba(212,175,55,.05);transform:translateX(3px)}
.bd-ath-cls{font-family:'Playfair Display',serif;font-size:1.15rem;color:var(--gold-lt);
  min-width:38px;text-align:center}
.bd-ath-id{min-width:0}
.bd-ath-id b{display:block;font-size:1rem;color:var(--cream)}
.bd-ath-id span{display:block;font-size:.82rem;color:var(--text-dim);margin-top:2px}
.bd-ath-right{display:flex;flex-direction:column;gap:5px;align-items:flex-end}

@media(max-width:720px){
  .bd-bar{grid-template-columns:minmax(0,1fr)}
  /* Filter pills go two-up on phones as GRID with minmax(0,1fr) tracks. Unlike
     flex shrinking (which iOS Safari refuses to apply to a select whose longest
     option is wider than the screen), a minmax(0,1fr) track can never exceed
     half the container in any engine, so nothing runs off the right edge.
     Covers the board, claim roster and school / college directory bars. */
  .bd-selects,.cl-filters,.filt{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .bd-selects>*,.cl-filters>*,.filt>*{width:100%;min-width:0;max-width:100%;box-sizing:border-box}
  .bd-selects .bd-toggle,.bd-selects [data-bd-print]{grid-column:1/-1;justify-content:center;text-align:center}
  .bd-school-hd{grid-template-columns:auto minmax(0,1fr);gap:12px;row-gap:10px;padding:14px}
  .bd-flags{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;align-items:flex-start}
  .bd-chev{display:none}
  .bd-ath{grid-template-columns:auto minmax(0,1fr)}
  .bd-ath-right{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;align-items:flex-start}
}

/* A coach prints this and carries it. Print gets the whole board expanded,
   no navigation, no filters, black on white. */
@media print{
  .bd-bar,.bd-views,.bd-chips,[data-bd-more],[data-bd-print]{display:none!important}
  .bd-school,.bd-ath{border:1px solid #bbb!important;background:#fff!important;
    break-inside:avoid;transform:none!important}
  .bd-roster{display:block!important}
  .bd-roster[hidden]{display:block!important}
  .bd-count b,.bd-ath-cls,.bd-school-id b{color:#111!important}
  .bd-flag{border:1px solid #999!important;color:#333!important;background:#fff!important}
  .bd-chev{display:none!important}
}

/* ============================================================
   THE COACH CLIPBOARD
   Built for a thumb, standing up, in a doorway, sometimes with
   sun behind. Targets are 56px and up, the primary actions sit
   at the bottom where a thumb reaches, and nothing here ever
   shows a spinner because nothing here ever waits on a network.
   ============================================================ */
.cb-top{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;align-items:center;
  padding:14px 16px;border-radius:var(--r-lg);border:1px solid var(--line-soft);
  background:rgba(4,10,20,.45);margin-bottom:12px}
.cb-top-l b{display:block;font-family:'Playfair Display',serif;font-size:1.1rem;color:var(--cream)}
.cb-top-l span{display:block;font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-mute);margin-top:2px}
.cb-icon{width:44px;height:44px;border-radius:12px;border:1px solid var(--line-soft);
  background:rgba(246,241,228,.05);color:var(--gold-lt);font-size:1.15rem;cursor:pointer}

.cb-sync{display:inline-flex;align-items:center;gap:8px;padding:8px 13px;border-radius:999px;
  font-size:.76rem;font-weight:600;border:1px solid var(--line-soft);white-space:nowrap}
.cb-sync i{width:9px;height:9px;border-radius:50%;background:var(--text-mute)}
.cb-sync.ok{color:var(--ok);border-color:rgba(74,222,128,.3)} .cb-sync.ok i{background:var(--ok)}
.cb-sync.pending{color:var(--warn);border-color:rgba(251,191,36,.32)} .cb-sync.pending i{background:var(--warn)}
.cb-sync.off{color:var(--text-dim)} .cb-sync.off i{background:var(--text-mute)}

/* What today is. The one thing on screen that must never be wrong. */
.cb-period{padding:15px 17px;border-radius:var(--r-lg);border-left:4px solid var(--text-mute);
  background:rgba(4,10,20,.4);margin-bottom:14px}
.cb-period b{display:block;font-size:1.05rem;margin-bottom:5px}
.cb-period span{display:block;font-size:.86rem;color:var(--text-dim);line-height:1.55}
.cb-period span.no{color:var(--text-mute);margin-top:4px}
.cb-period a{display:inline-block;margin-top:8px;font-size:.8rem;color:var(--gold-lt)}
.cb-period.ok{border-left-color:var(--ok)} .cb-period.ok b{color:var(--ok)}
.cb-period.warn{border-left-color:var(--warn)} .cb-period.warn b{color:var(--warn)}
.cb-period.bad{border-left-color:var(--bad)} .cb-period.bad b{color:var(--bad)}
.cb-period.unknown{border-left-color:var(--gold)} .cb-period.unknown b{color:var(--gold-lt)}

.cb-tabs{display:flex;gap:6px;padding:4px;border-radius:999px;border:1px solid var(--line-soft);
  background:rgba(4,10,20,.4);margin-bottom:14px}
.cb-tabs button{flex:1;padding:12px 10px;border-radius:999px;border:0;background:transparent;
  color:var(--text-dim);font:inherit;font-weight:600;font-size:.9rem;cursor:pointer;min-height:48px}
.cb-tabs button.on{background:var(--gold);color:#0A1A33}
.cb-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}

/* The dock is sticky, so the last row would sit under it. Pad the list by the
   dock's height plus the safe area, or the bottom name on the board is the one
   you can never tap. */
.cb-list{list-style:none;margin:0;padding:0 0 96px;display:grid;gap:8px}
.cb-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:9px;align-items:center;
  padding:10px 11px;border-radius:var(--r);border:1px solid var(--line-soft);
  background:linear-gradient(160deg,var(--surface),rgba(10,26,51,.55))}
.cb-row:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.cb-rank{min-width:46px;min-height:52px;border-radius:12px;border:1px solid var(--line);
  background:rgba(212,175,55,.12);color:var(--gold-lt);font-family:'Playfair Display',serif;
  font-size:1.35rem;cursor:pointer}
.cb-who{min-width:0}
.cb-who b{display:block;font-size:1.02rem;color:var(--cream)}
.cb-who>span{display:block;font-size:.8rem;color:var(--text-dim);margin-top:2px}
.cb-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
/* A chip that breaks across two lines reads as two broken chips. Wrap between
   them, never inside one. */
.cb-tags i{font-style:normal;font-size:.66rem;letter-spacing:.05em;text-transform:uppercase;
  font-weight:700;padding:3px 8px;border-radius:999px;border:1px solid var(--line-soft);
  color:var(--text-mute);white-space:nowrap}
.cb-st-offered,.cb-st-committed,.cb-st-signed{color:var(--ok);border-color:rgba(74,222,128,.3)}
.cb-st-pass{color:var(--bad);border-color:rgba(248,113,113,.3)}
.cb-gr{color:var(--gold-lt);border-color:var(--line)} .cb-gr.none{color:var(--text-mute)}
.cb-split{color:var(--warn);border-color:rgba(251,191,36,.35)}
.cb-move{display:flex;flex-direction:column;gap:3px}
/* WCAG 2.2 AA puts the floor at 24px, but the research on one handed use in the
   field is unambiguous that the floor is not the target. These are secondary
   controls, since typing a rank is the fast path, so they do not need the full
   56px, but 27px was too mean for a thumb. */
.cb-move button{width:40px;height:36px;border-radius:9px;border:1px solid var(--line-soft);
  background:rgba(246,241,228,.05);color:var(--text-dim);cursor:pointer;font-size:.66rem;
  display:flex;align-items:center;justify-content:center}
.cb-move button:disabled{opacity:.28}
.cb-open{width:34px;min-height:52px;border-radius:12px;border:1px solid var(--line-soft);
  background:transparent;color:var(--gold);font-size:1.5rem;cursor:pointer}

/* Bottom dock, in the thumb zone, above the home indicator. */
.cb-dock{position:sticky;bottom:0;display:flex;gap:10px;padding:12px 0
  calc(12px + env(safe-area-inset-bottom));margin-top:18px;
  background:linear-gradient(to top,var(--bg) 55%,transparent)}
.cb-fab{flex:1;min-height:58px;border-radius:16px;border:0;font:inherit;font-weight:700;
  font-size:1rem;cursor:pointer;background:linear-gradient(135deg,var(--gold-lt),var(--gold) 55%,var(--gold-dk));
  color:#0A1A33}
.cb-fab.ghost{background:rgba(246,241,228,.06);border:1px solid var(--line-soft);color:var(--text)}

.cb-toast{position:fixed;left:50%;transform:translate(-50%,140%);bottom:calc(16px + env(safe-area-inset-bottom));
  z-index:80;display:flex;align-items:center;gap:14px;padding:13px 18px;border-radius:14px;
  background:#12294d;border:1px solid var(--line);box-shadow:var(--shadow);font-size:.9rem;
  transition:transform .3s var(--ease);max-width:92vw}
.cb-toast.on{transform:translate(-50%,0)}
.cb-toast button{background:transparent;border:0;color:var(--gold-lt);font:inherit;font-weight:700;
  cursor:pointer;padding:6px 4px}

.cb-sheet{position:fixed;inset:0;z-index:90;background:rgba(4,10,20,.6);
  display:flex;align-items:flex-end;justify-content:center}
/* display:flex overrides the hidden attribute, which left a full screen
   invisible overlay swallowing every tap on the page underneath. */
.cb-sheet[hidden]{display:none}
.cb-sheet-in{width:100%;max-width:620px;max-height:92vh;overflow:auto;border-radius:22px 22px 0 0;
  background:var(--surface);border:1px solid var(--line);
  padding-bottom:calc(16px + env(safe-area-inset-bottom))}
.cb-sheet-hd{position:sticky;top:0;display:flex;justify-content:space-between;align-items:center;
  gap:12px;padding:16px 18px;background:var(--surface);border-bottom:1px solid var(--line-soft);z-index:2}
.cb-sheet-hd b{font-family:'Playfair Display',serif;font-size:1.2rem}
.cb-sheet-hd button{width:44px;height:44px;border-radius:12px;border:1px solid var(--line-soft);
  background:transparent;color:var(--text-dim);font-size:1rem;cursor:pointer}
.cb-sheet-bd{padding:18px}
.cb-sheet-ft{position:sticky;bottom:0;padding:14px 18px;background:var(--surface);
  border-top:1px solid var(--line-soft)}

.cb-grade{display:grid;grid-template-columns:repeat(10,1fr);gap:4px;margin-top:14px}
.cb-grade button{min-height:48px;border-radius:10px;border:1px solid var(--line-soft);
  background:rgba(4,10,20,.4);color:var(--text-dim);font:inherit;font-weight:700;cursor:pointer}
.cb-grade button.on{background:var(--gold);border-color:var(--gold);color:#0A1A33}
.cb-notes{margin-top:18px;display:grid;gap:10px}
.cb-note{padding:12px 14px;border-radius:var(--r);border:1px solid var(--line-soft);
  background:rgba(4,10,20,.3)}
.cb-note span{display:block;font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;
  color:var(--text-mute);margin-bottom:5px}
.cb-note p{margin:0;font-size:.92rem;line-height:1.6;white-space:pre-wrap}
.cb-staff{display:flex;flex-wrap:wrap;gap:8px}
.cb-warn{padding:13px 15px;border-radius:var(--r);margin-bottom:12px;
  background:rgba(248,113,113,.1);border:1px solid rgba(248,113,113,.35);color:#FCA5A5;
  font-size:.88rem;line-height:1.55}
.cb-warn b{color:#FCA5A5}
.cb-counters{display:flex;flex-wrap:wrap;gap:14px;font-size:.78rem;color:var(--text-mute)}
.cb-counters b{color:var(--gold-lt);font-size:.95rem}

.cb-cons{padding:15px 17px;border-radius:var(--r-lg);border:1px solid var(--line-soft);
  background:linear-gradient(160deg,var(--surface),rgba(10,26,51,.55));margin-bottom:10px}
.cb-cons-hd{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.cb-cons-hd b{font-family:'Playfair Display',serif;font-size:1.1rem;color:var(--cream)}
.cb-cons-hd span{font-size:.78rem;color:var(--text-mute)}
.cb-cons-top{margin-top:10px;padding:11px 13px;border-radius:var(--r);
  background:rgba(212,175,55,.08);border:1px solid var(--line)}
.cb-cons-top i{display:block;font-style:normal;font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold);margin-bottom:3px}
.cb-cons-top b{font-size:1.05rem;color:var(--gold-lt)}
.cb-cons-top span{display:block;font-size:.8rem;color:var(--text-dim)}
.cb-split-flag{margin-top:9px;font-size:.76rem;letter-spacing:.05em;text-transform:uppercase;
  font-weight:700;color:var(--warn)}
.cb-cons-list{display:grid;gap:5px;margin-top:10px;font-size:.84rem;color:var(--text-dim)}
.cb-cons-list i{font-style:normal;color:var(--text-mute)}

.cb-logl{display:grid;gap:8px}
.cb-logi{padding:12px 14px;border-radius:var(--r);border:1px solid var(--line-soft);
  background:rgba(4,10,20,.3)}
.cb-logi b{font-size:.9rem;color:var(--gold-lt)}
.cb-logi span{display:block;font-size:.82rem;color:var(--text-dim);margin-top:2px}
.cb-logi p{margin:6px 0 0;font-size:.88rem;color:var(--text-dim);white-space:pre-wrap}

/* In the flow, not floating. The bottom of the screen belongs to the thumb and
   to the two buttons a coach actually presses; a floating prompt parked there
   covers them. */
.cb-install{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;
  flex-wrap:wrap;padding:14px 16px;border-radius:16px;margin-bottom:12px;
  background:rgba(212,175,55,.08);border:1px solid var(--line);
  font-size:.85rem;line-height:1.5}
.cb-install b{color:var(--gold-lt)}
.cb-install-btns{display:flex;gap:8px;flex-shrink:0}
.cb-install button{min-height:40px;padding:0 14px;border-radius:10px;border:1px solid var(--line);
  background:rgba(212,175,55,.12);color:var(--gold-lt);font:inherit;font-weight:600;cursor:pointer}

.cb-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Sun mode. An emissive panel showing a light field competes with daylight
   far better than a dark one, which is counterintuitive until you stand in it.
   Manual toggle rather than automatic, because the coach knows where she is
   standing and prefers-color-scheme does not. */
html.sun{--bg:#FFFFFF;--surface:#FFFFFF;--surface-2:#F2F4F7;--text:#08111F;
  --text-dim:#1F2C3D;--text-mute:#3C4859;--cream:#08111F;--gold:#7A5B00;--gold-lt:#4A3600;
  --gold-dk:#5C4400;--line:rgba(0,0,0,.42);--line-soft:rgba(0,0,0,.3);
  --ok:#046A38;--warn:#7A4B00;--bad:#A11212}
html.sun body{background:#fff}
html.sun .cb-row,html.sun .cb-sheet-in,html.sun .cb-cons,html.sun .cb-logi,html.sun .cb-note,
html.sun .cb-top,html.sun .cb-period{background:#fff!important;border-color:rgba(0,0,0,.32)}
html.sun .cb-who b,html.sun .cb-cons-hd b{color:#08111F}
html.sun .cb-fab{background:#08111F;color:#fff}
html.sun .cb-fab.ghost{background:#fff;color:#08111F;border:2px solid #08111F}
html.sun .cb-tabs button.on{background:#08111F;color:#fff}
html.sun .cb-rank{background:#F0E6C8;color:#3A2A00;border-color:#8A6A00}
html.sun *{text-shadow:none!important}
html.sun .grid-lines,html.sun .aura{display:none!important}
/* Weight, not hue. Hairlines are the first thing to vanish in sunlight, and a
   polarised lens shifts colour, so status is never colour alone. */
html.sun .cb-who b,html.sun .cb-period b,html.sun .cb-tags i{font-weight:700}

@media(min-width:760px){
  .cb-sheet{align-items:center}
  .cb-sheet-in{border-radius:22px;max-height:86vh}
}
@media print{
  .cb-top,.cb-tabs,.cb-dock,.cb-toast,.cb-sheet,.cb-install,.cb-chips,.cb-move,.cb-open{display:none!important}
  .cb-row,.cb-logi,.cb-cons{border:1px solid #bbb!important;background:#fff!important;break-inside:avoid}
  .cb-period{border:2px solid #333!important;background:#fff!important}
}

/* my profile editor save states */
.formmsg.ok{color:#9EE3C1}
.formmsg.err{color:#F2A0A0}

/* install-to-device banner */
.ktj-install{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin:0;padding:14px 20px;background:linear-gradient(135deg,rgba(201,162,39,.16),rgba(201,162,39,.05));
  border-bottom:1px solid var(--gold);animation:ki-in .45s ease}
.ktj-install .ki-txt b{color:var(--gold-lt);display:block}
.ktj-install .ki-txt span{color:var(--text-dim);font-size:.88rem}
.ktj-install .ki-btns{display:flex;gap:10px;align-items:center}
.ktj-install .ki-how{flex-basis:100%;font-size:.9rem;color:var(--text);background:var(--card,#122748);
  border:1px solid var(--line);border-radius:10px;padding:10px 14px}
@keyframes ki-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* ---- global header search ---------------------------------- */
.hdr .nav{margin-left:0}
.hdr .burger{margin-left:0}
.gsearch{position:relative;flex:1 1 auto;min-width:0;margin-left:14px;display:flex;align-items:center}
.gsearch-m{display:flex;flex:none;width:100%;margin:2px 0 10px}
.gsearch-ico{position:absolute;left:13px;width:17px;height:17px;color:var(--text-mute);pointer-events:none}
.gsearch input{width:100%;max-width:440px;padding:10px 14px 10px 37px;border-radius:999px;border:1px solid var(--line);
  background:rgba(246,241,228,.06);color:var(--text);font-size:.9rem;outline:none;-webkit-appearance:none}
.gsearch-m input{max-width:none}
.gsearch input:focus{border-color:var(--gold);background:rgba(246,241,228,.1)}
.gsearch input::placeholder{color:var(--text-mute)}
.gsearch input::-webkit-search-cancel-button{-webkit-appearance:none}
.gsearch-panel{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:200;
  background:#0c1f3d;border:1px solid var(--line);border-radius:14px;
  box-shadow:0 18px 50px rgba(0,0,0,.5);max-height:72vh;overflow:auto;padding:6px}
.gsearch-m .gsearch-panel{position:static;box-shadow:none;border-radius:12px;margin-top:8px;max-height:52vh}
.gsearch .gs-group{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);
  font-weight:700;padding:8px 10px 4px}
.gsearch .gs-row{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;
  color:var(--text);text-decoration:none;border-bottom:0}
.gsearch .gs-row:hover,.gsearch .gs-row.on{background:rgba(212,175,55,.12)}
.gsearch .gs-ic{flex:none;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;
  background:rgba(212,175,55,.16);color:var(--gold-lt);font-size:.72rem;font-weight:700;text-transform:uppercase}
.gsearch .gs-ic-sch{background:rgba(120,160,220,.16);font-size:.95rem}
.gsearch .gs-main{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2}
.gsearch .gs-main b{font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gsearch .gs-meta{font-size:.76rem;color:var(--text-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gsearch .gs-tag{flex:none;font-size:.7rem;color:var(--text-dim);background:rgba(246,241,228,.07);
  padding:3px 7px;border-radius:999px}
.gsearch .gs-all{justify-content:center;color:var(--gold-lt);font-size:.82rem;font-weight:600}
.gsearch .gs-empty{padding:14px 12px;font-size:.86rem;color:var(--text-dim)}
.gsearch .gs-empty a{color:var(--gold-lt);display:inline-block;margin-top:4px}
@media(max-width:999px){.brand span{display:none}.gsearch{margin-left:10px;margin-right:10px}}
@media(min-width:1000px){.gsearch{margin-left:24px;margin-right:14px}}

/* ---- Coach Clipboard: setup tip + phone tutorial ----------- */
.cb-tip{margin:12px 0 0;font-size:.86rem;line-height:1.45;color:var(--gold-lt);
  background:rgba(212,175,55,.09);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.tut-lead{max-width:680px}
.ph-tut{display:grid;gap:16px;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:20px}
@media(min-width:860px){.ph-tut{grid-template-columns:repeat(4,minmax(0,1fr))}}
.ph{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px}
.ph-dev{width:150px;max-width:100%;aspect-ratio:9/18.5;background:#0b1c38;
  border:2px solid var(--line);border-radius:24px;padding:16px 11px 12px;position:relative;
  box-shadow:0 14px 34px rgba(0,0,0,.45)}
.ph-dev::before{content:"";position:absolute;top:9px;left:50%;transform:translateX(-50%);
  width:40px;height:5px;border-radius:3px;background:rgba(246,241,228,.22)}
.ph-scr{display:flex;flex-direction:column;gap:7px;height:100%}
.ph-hd{font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);font-weight:700;text-align:left}
.ph-row{background:rgba(246,241,228,.06);border:1px solid var(--line-soft);border-radius:8px;
  padding:7px 8px;display:flex;align-items:center;justify-content:space-between;gap:6px;
  font-size:.62rem;color:var(--text-dim);text-align:left}
.ph-row b{color:var(--text);font-weight:700}
.ph-chip{background:rgba(212,175,55,.18);color:var(--gold-lt);border-radius:999px;
  padding:2px 7px;font-size:.55rem;font-weight:700;white-space:nowrap}
.ph-chip.sky{background:rgba(120,170,230,.18);color:#9cc3f0}
.ph-grade{font-size:2rem;font-weight:800;color:var(--gold-lt);text-align:center;margin:2px 0}
.ph-stars{text-align:center;color:var(--gold);font-size:.8rem;letter-spacing:2px}
.ph-ini{width:17px;height:17px;border-radius:50%;background:rgba(212,175,55,.28);color:var(--gold-lt);
  font-size:.5rem;display:inline-grid;place-items:center;font-weight:800;margin-left:3px}
.ph-off{background:rgba(120,200,140,.16);color:#8fe0a6;border-radius:999px;padding:4px 9px;
  font-size:.6rem;font-weight:700;align-self:center;margin-top:4px}
.ph-note{background:rgba(246,241,228,.04);border:1px dashed var(--line-soft);border-radius:8px;
  padding:7px 8px;font-size:.6rem;color:var(--text-mute);font-style:italic;text-align:left}
.ph-cap b{display:block;color:var(--gold-lt);font-size:.95rem;margin-bottom:2px}
.ph-cap span{font-size:.83rem;color:var(--text-dim)}
.ph-step{width:24px;height:24px;border-radius:50%;background:var(--gold);color:#1a1206;
  font-weight:800;font-size:.8rem;display:grid;place-items:center;margin:0 auto}
.lvl-tut{display:grid;gap:14px;grid-template-columns:minmax(0,1fr);margin-top:20px}
@media(min-width:760px){.lvl-tut{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---- featured video embed --------------------------------- */
.vid-embed{position:relative;width:100%;max-width:900px;margin:0 auto;aspect-ratio:16/9;
  border-radius:16px;overflow:hidden;border:1px solid var(--line);box-shadow:0 16px 44px rgba(0,0,0,.45);background:#000}
.vid-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---- Schedules: mobile-first game cards ------------------- */
.sched-list{display:flex;flex-direction:column;gap:10px}
.sched-loading{padding:30px;text-align:center;color:var(--text-mute)}
.sched-day{position:sticky;top:70px;z-index:5;background:rgba(10,26,51,.92);backdrop-filter:blur(8px);
  padding:8px 4px;margin-top:8px;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold);font-weight:700;border-bottom:1px solid var(--line-soft)}
.sched-day .today{background:var(--gold);color:#1a1206;border-radius:999px;padding:2px 8px;margin-left:8px;font-size:.66rem}
.gcard{display:flex;gap:12px;align-items:flex-start;background:rgba(246,241,228,.04);
  border:1px solid var(--line-soft);border-radius:14px;padding:13px 14px}
.gcard-when{flex:none;width:52px;text-align:center;border-right:1px solid var(--line-soft);padding-right:10px}
.gcard-when b{display:block;font-size:1.25rem;line-height:1;color:var(--text)}
.gcard-when span{font-size:.68rem;color:var(--text-mute);text-transform:uppercase;letter-spacing:.06em}
.gcard-body{flex:1;min-width:0}
.gcard-match{font-size:1rem;font-weight:700;color:var(--text);line-height:1.25}
.gcard-match .at{color:var(--text-mute);font-weight:500}
.gcard-meta{font-size:.82rem;color:var(--text-dim);margin-top:3px;display:flex;flex-wrap:wrap;gap:4px 10px}
.gcard-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;align-items:center}
.g-sport{font-size:.66rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--sky,#9cc3f0);
  background:rgba(120,170,230,.14);border-radius:999px;padding:3px 8px}
.g-tag{font-size:.62rem;font-weight:700;background:rgba(212,175,55,.18);color:var(--gold-lt);border-radius:999px;padding:3px 8px}
.g-prospects{font-size:.7rem;font-weight:700;color:var(--gold-lt);background:rgba(212,175,55,.14);
  border-radius:999px;padding:3px 9px;text-decoration:none}
.g-score{font-size:.82rem;color:var(--gold-lt);font-weight:700}
.gcard-act{flex:none;display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.btn-plan{border:1px solid var(--gold);background:transparent;color:var(--gold-lt);border-radius:999px;
  padding:7px 12px;font-size:.75rem;font-weight:700;cursor:pointer;white-space:nowrap}
.btn-plan.on{background:rgba(212,175,55,.18)}
.gcard-dir{font-size:.72rem;color:var(--text-mute);text-decoration:none}
@media(max-width:520px){
  .gcard-act{flex-direction:row;width:100%;justify-content:flex-start;margin-top:10px}
  .gcard{flex-wrap:wrap}
}

/* ---- Visit Planner --------------------------------------- */
.planner{border:1px solid var(--gold);border-radius:18px;padding:20px;background:linear-gradient(180deg,rgba(212,175,55,.06),rgba(212,175,55,.01))}
.planner-hd{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:flex-start}
.planner-actions{display:flex;gap:8px;flex-wrap:wrap}
.plan-empty{color:var(--text-mute);font-size:.9rem;padding:14px 0}
.plan-item{display:flex;gap:10px;align-items:flex-start;padding:11px 0;border-top:1px solid var(--line-soft)}
.plan-num{flex:none;width:22px;height:22px;border-radius:50%;background:var(--gold);color:#1a1206;font-weight:800;font-size:.72rem;display:grid;place-items:center;margin-top:2px}
.plan-main{flex:1;min-width:0}
.plan-main b{color:var(--text);font-size:.95rem}
.plan-main .pm{font-size:.8rem;color:var(--text-dim);margin-top:2px}
.plan-x{flex:none;background:none;border:0;color:var(--text-mute);font-size:1.1rem;cursor:pointer;padding:2px 6px}
.planner-foot{font-size:.82rem;color:var(--text-mute);margin-top:14px;border-top:1px solid var(--line-soft);padding-top:12px}
.planner-foot a{color:var(--gold-lt)}

/* ---- Homepage mission feature band ------------------------ */
.feature-band{display:grid;grid-template-columns:minmax(0,1fr);gap:0;border:1px solid var(--line);
  border-radius:18px;overflow:hidden;text-decoration:none;color:inherit;
  background:linear-gradient(180deg,rgba(120,200,140,.05),rgba(212,175,55,.03));transition:border-color .2s,transform .2s}
.feature-band:hover{border-color:var(--gold);transform:translateY(-2px)}
.fb-media{position:relative;aspect-ratio:16/10;overflow:hidden}
.fb-media img{width:100%;height:100%;object-fit:cover;object-position:center 28%}
.fb-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(10,26,51,.55))}
.fb-tx{padding:22px 22px 24px}
.fb-tx h2{font-size:1.5rem;margin:6px 0 10px}
.fb-tx p{color:var(--text-dim);font-size:.95rem;margin:0 0 14px;max-width:60ch}
.fb-cta{display:inline-block;font-weight:700;color:var(--gold-lt)}
@media(min-width:820px){
  .feature-band{grid-template-columns:1.05fr minmax(0,1fr);align-items:stretch}
  .fb-media{aspect-ratio:auto;min-height:100%}
  .fb-tx{padding:30px 30px;align-self:center}
  .fb-tx h2{font-size:1.8rem}
}

/* ---- Mission cross-link strip ----------------------------- */
.mission-strip{display:flex;gap:12px;align-items:flex-start;text-decoration:none;color:inherit;
  border:1px solid var(--line);border-left:3px solid var(--green,#7fd39b);border-radius:12px;
  padding:13px 15px;background:linear-gradient(180deg,rgba(120,200,140,.07),rgba(120,200,140,.02));
  transition:border-color .2s,transform .2s}
.mission-strip:hover{border-color:var(--gold);transform:translateY(-1px)}
.ms-key{font-size:1.15rem;line-height:1.3;flex:none}
.ms-tx{font-size:.9rem;color:var(--text-dim);line-height:1.5}
.ms-tx b{color:var(--text)}
.ms-cta{display:inline-block;color:var(--gold-lt);font-weight:700;white-space:nowrap;margin-left:2px}

/* ---- The Journey Wall ------------------------------------- */
.jw-loading{padding:36px;text-align:center;color:var(--text-mute)}
.jw-grid{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
@media(min-width:640px){.jw-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){.jw-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.jcard{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:16px;overflow:hidden;
  text-decoration:none;color:inherit;background:rgba(246,241,228,.03);transition:border-color .2s,transform .2s}
.jcard:hover{border-color:var(--gold);transform:translateY(-2px)}
.jcard.feat{border-color:rgba(212,175,55,.5);background:linear-gradient(180deg,rgba(212,175,55,.06),transparent)}
.jcard-photo{aspect-ratio:16/10;overflow:hidden}
.jcard-photo img{width:100%;height:100%;object-fit:cover;object-position:top center}
.jcard-body{padding:16px 16px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.jkind{align-self:flex-start;font-size:.62rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--green,#7fd39b);background:rgba(120,200,140,.14);border-radius:999px;padding:3px 9px}
.jcard-body h3{font-size:1.2rem;margin:2px 0 0}
.jmeta{font-size:.8rem;color:var(--text-mute)}
.jhead{font-size:.95rem;color:var(--text);font-weight:600;margin:4px 0 0}
.jquote{font-size:.9rem;color:var(--text-dim);font-style:italic;margin:2px 0 0}
.jtags{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.jtag{font-size:.62rem;font-weight:700;color:var(--gold-lt);background:rgba(212,175,55,.15);border-radius:999px;padding:3px 8px}
.jcard-cta{margin-top:auto;padding-top:10px;font-weight:700;color:var(--gold-lt);font-size:.88rem}
.jsupport{font-size:.86rem;color:var(--text-dim);background:rgba(120,200,140,.06);border:1px solid var(--line);
  border-left:3px solid var(--green,#7fd39b);border-radius:10px;padding:12px 14px}
.jsupport b{color:var(--text)}

/* journey detail */
.jhero{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
.jhero-photo{width:180px;max-width:40%;border-radius:14px;object-fit:cover}
.jbigquote{font-size:1.35rem;line-height:1.4;color:var(--gold-lt);font-style:italic;
  border-left:3px solid var(--gold);padding:6px 0 6px 18px;margin:22px 0}
.jbeats{display:flex;flex-direction:column;gap:16px;margin-top:10px}
.jbeat-l{display:block;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);font-weight:700;margin-bottom:4px}
.jbeat p{margin:0;color:var(--text-dim);font-size:1rem;line-height:1.6}
.jlinks{display:flex;gap:8px;flex-wrap:wrap;margin:22px 0}

/* voices */
.voices{display:grid;gap:14px;grid-template-columns:minmax(0,1fr);margin-top:16px}
@media(min-width:700px){.voices{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1050px){.voices{grid-template-columns:repeat(3,minmax(0,1fr))}}
.voice{margin:0;border:1px solid var(--line);border-radius:14px;padding:16px 18px;background:rgba(246,241,228,.03)}
.voice blockquote{margin:0;font-size:.95rem;color:var(--text);line-height:1.55}
.voice figcaption{margin-top:10px;font-size:.82rem;color:var(--text-mute)}
.voice figcaption b{display:block;color:var(--gold-lt)}

/* booking band */
.book-band{border:1px solid var(--green,#7fd39b);border-radius:18px;padding:24px;
  background:linear-gradient(180deg,rgba(120,200,140,.08),rgba(120,200,140,.02))}
.book-tx h2{font-size:1.7rem;margin:6px 0 8px}
.book-tx p{color:var(--text-dim);font-size:.95rem;max-width:70ch;margin:0 0 4px}

/* Consultation tick list + Educator Lounge endorsers row (v98) */
ul.tick{list-style:none;margin:14px 0 0;padding:0}
ul.tick li{position:relative;padding:4px 0 4px 26px;color:var(--text-dim);font-size:.92rem;line-height:1.45}
ul.tick li:before{content:"";position:absolute;left:2px;top:9px;width:12px;height:7px;border-left:2px solid var(--green,#3ea06a);border-bottom:2px solid var(--green,#3ea06a);transform:rotate(-45deg)}
.endorsers{margin-top:22px;text-align:center;color:var(--text-dim);font-size:.95rem;line-height:1.7}
.endorsers span{display:block;text-transform:uppercase;letter-spacing:2px;font-size:.74rem;color:var(--text-mute);margin-bottom:6px}

/* Footer newsletter capture (v98) */
.ftr-news{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;
  padding:20px 22px;margin-bottom:26px;border:1px solid var(--line);border-radius:16px;
  background:linear-gradient(120% 140% at 0% 0%,rgba(30,107,79,.16),rgba(246,241,228,.03))}
.ftr-news-tx b{display:block;color:var(--gold-lt);font-size:1.05rem}
.ftr-news-tx span{display:block;color:var(--text-mute);font-size:.86rem;max-width:420px;margin-top:3px}
.ftr-news-form{display:flex;flex-wrap:wrap;gap:8px;align-items:center;flex:1;min-width:280px;justify-content:flex-end}
.ftr-news-form input{background:rgba(0,0,0,.25);border:1px solid var(--line);border-radius:10px;
  padding:10px 12px;color:var(--text);font-size:.9rem;min-width:130px;flex:1 1 130px;max-width:190px}
.ftr-news-form input:focus{outline:none;border-color:var(--gold-lt)}
.ftr-news-form button{flex:0 0 auto}
.ftr-news-form .cl-msg{flex-basis:100%;text-align:right;margin:2px 0 0}
@media(max-width:640px){.ftr-news-form{justify-content:flex-start}.ftr-news-form input{max-width:none}}

/* Prominent Question of the Day card, homepage (moved out of the footer) v101 */
.qotd-card{display:flex;align-items:center;gap:14px;flex-wrap:wrap;text-decoration:none;
  padding:16px 20px;border:1px solid var(--gold-lt,#c9a227);border-radius:14px;
  background:linear-gradient(120% 140% at 0% 0%,rgba(201,162,39,.16),rgba(246,241,228,.04))}
.qotd-card:hover{background:linear-gradient(120% 140% at 0% 0%,rgba(201,162,39,.24),rgba(246,241,228,.06))}
.qotd-badge{font-weight:800;color:var(--gold-lt,#c9a227);white-space:nowrap}
.qotd-q{color:var(--text);font-size:1.02rem;flex:1;min-width:200px}
.qotd-go{color:var(--gold-lt,#c9a227);font-weight:700;white-space:nowrap}

/* Static "Share this page" bar at the top of the footer, every page v102 */
.ftr-share{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;
  padding:16px 20px;margin-bottom:22px;border:1px solid var(--line);border-radius:14px;
  background:rgba(246,241,228,.03)}
.ftr-share-lbl{font-weight:800;color:var(--gold-lt,#c9a227);white-space:nowrap}
.ftr-share-btns{display:flex;flex-wrap:wrap;gap:8px}
.fsx{cursor:pointer;border:1px solid var(--line);background:rgba(0,0,0,.2);
  color:var(--text);font-size:.86rem;font-weight:600;padding:8px 14px;border-radius:999px}
.fsx:hover{border-color:var(--gold-lt,#c9a227);color:var(--gold-lt,#c9a227)}
.fsx[data-sfx="native"]{background:var(--gold-lt,#c9a227);color:#0e1b33;border-color:transparent}

/* Journey before & after photo pair (alumni "then and now") v105 */
.jba{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:20px 0}
.jba figure{margin:0;position:relative;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:rgba(246,241,228,.03)}
.jba img{display:block;width:100%;height:340px;object-fit:cover;object-position:top center}
.jba figcaption{position:absolute;left:10px;top:10px;background:rgba(10,26,51,.82);color:var(--gold-lt,#c9a227);
  font-weight:800;font-size:.8rem;letter-spacing:1px;text-transform:uppercase;padding:5px 12px;border-radius:999px}
@media(max-width:560px){.jba img{height:260px}}

/* NLB Alumni badge (the bat) on journey cards and detail v106 */
.jnlb{display:inline-flex;align-items:center;gap:7px;background:#0a0a0a;
  border:1px solid var(--gold-lt,#c9a227);color:#d7dbe2;
  font-size:.74rem;font-weight:800;letter-spacing:1px;text-transform:uppercase;
  padding:4px 11px 4px 8px;border-radius:999px;line-height:1}
.jnlb img{height:22px;width:auto;object-fit:contain;display:block}
.jcard-photo{position:relative}
.jcard-photo .jnlb{position:absolute;left:10px;top:10px;z-index:2}
.jcard-body .jnlb{margin-bottom:8px}

/* NLB Alumni filter toggle on the Journey Wall v108 */
.jw-nlb{background:rgba(0,0,0,.2);border:1px solid var(--line);color:var(--text);font-weight:700;border-radius:10px}
.jw-nlb img{opacity:.85}
.jw-nlb.on{background:#0a0a0a;border-color:var(--gold-lt,#c9a227);color:var(--gold-lt,#c9a227)}
.jw-nlb.on img{opacity:1}

/* Oval "Next Level & Beyond" badge variant (program alumni) v109 */
.jnlb-oval{background:#f6f1e4;border-color:var(--gold-lt,#c9a227);color:#0a1a33}
.jnlb-oval img{background:transparent}

/* Journey career line ("Now: Nurse") v110 */
.jcareer{display:inline-block;font-size:.82rem;font-weight:800;color:var(--gold-lt,#c9a227);
  letter-spacing:.3px;margin:2px 0 4px}

/* ---- Get Started hub + featured journey + Wall of Fame (v111) ---- */
/* Wall of Fame: four across on wide screens, the "rows of four" layout. */
@media(min-width:1180px){.jw-grid.wof{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* Get Started tab panels sit flush under their tab row. */
.gs-panel{margin-top:2px}
.gs-panel h3{color:var(--text)}

/* Featured single journey: a wide card, photo beside the story. */
.jfeature{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:0;border:1px solid var(--line);
  border-radius:18px;overflow:hidden;text-decoration:none;color:inherit;background:linear-gradient(180deg,rgba(212,175,55,.06),transparent);
  transition:border-color .18s,transform .18s}
.jfeature:hover{border-color:var(--gold);transform:translateY(-2px)}
.jfeature-photo{position:relative;min-height:260px}
.jfeature-photo>img{width:100%;height:100%;object-fit:cover;object-position:top center}
.jfeature-photo .jnlb{position:absolute;left:12px;top:12px;z-index:2}
.jfeature-body{padding:22px 24px 24px;display:flex;flex-direction:column;gap:7px}
.jfeature-body h3{font-size:1.6rem;margin:4px 0 0}
.jfeature-body .jhead{font-size:1.08rem}
.jfeature-body .jquote{font-size:1rem}
@media(max-width:760px){.jfeature{grid-template-columns:minmax(0,1fr)}.jfeature-photo{min-height:220px;aspect-ratio:16/10}
  .jfeature-body{padding:18px}.jfeature-body h3{font-size:1.35rem}}

/* -------- Around the Recruiting World: rotating outbound feature -------- */
.rstories{margin-top:36px}
.rstories-head .eyebrow{color:var(--gold)}
.rstories-head h2{font-size:1.5rem;margin:6px 0 8px}
.rstories-head p{color:var(--text-dim);font-size:.95rem;max-width:760px}
.rstories-card{position:relative;margin-top:16px;min-height:150px;border:1px solid var(--line);
  border-radius:16px;background:linear-gradient(145deg,#0B1D38,#0A1730);overflow:hidden}
.rstory{display:flex;gap:18px;align-items:center;padding:22px 24px;text-decoration:none;color:inherit;
  opacity:0;visibility:hidden;position:absolute;inset:0;transition:opacity .45s ease}
.rstory.on{opacity:1;visibility:visible;position:relative}
.rstory-thumb{flex:0 0 128px;width:128px;height:96px;border-radius:12px;overflow:hidden;background:#08152b;
  display:flex;align-items:center;justify-content:center}
.rstory-thumb img{width:100%;height:100%;object-fit:cover}
.rstory-thumb .rs-mark{font-size:1.4rem;color:var(--gold);font-weight:800;letter-spacing:.03em}
.rstory-body{flex:1;min-width:0}
.rstory-src{display:inline-block;font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;
  color:#0A1A33;background:var(--gold);padding:3px 10px;border-radius:999px;font-weight:800}
.rstory-h{display:block;color:var(--text);font-size:1.12rem;font-weight:700;margin:9px 0 6px;line-height:1.3}
.rstory-sum{display:block;color:var(--text-mute);font-size:.9rem;line-height:1.45}
.rstory-go{display:inline-block;margin-top:10px;color:var(--gold-lt);font-weight:600;font-size:.86rem}
.rstories-dots{display:flex;gap:7px;justify-content:center;padding:2px 0 4px}
.rstories-dots button{width:8px;height:8px;border-radius:999px;border:0;background:rgba(212,175,55,.3);
  cursor:pointer;padding:0;transition:width .25s ease,background .25s ease}
.rstories-dots button.on{background:var(--gold);width:22px}
.rstories-empty{padding:34px;text-align:center;color:var(--text-mute);font-size:.9rem}
.rstories-credit{margin-top:12px;color:var(--text-mute);font-size:.74rem}
.rstories-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;border:0;cursor:pointer;
  width:34px;height:34px;border-radius:999px;background:rgba(10,23,48,.72);color:var(--gold);font-size:1.15rem;
  align-items:center;justify-content:center;display:flex;line-height:1}
.rstories-nav:hover{background:rgba(10,23,48,.96)}
.rstories-nav.prev{left:8px}
.rstories-nav.next{right:8px}
@media(max-width:640px){
  .rstory{flex-direction:column;align-items:flex-start;padding:18px}
  .rstory-thumb{width:100%;flex-basis:auto;height:150px}
  .rstory-thumb.ph{height:66px}
  .rstory-h{font-size:1.02rem}
  .rstories-nav{display:none}
}

/* -------- Admin Control Center (/admin.html) -------- */
.ac-h{font-size:1.15rem;margin:26px 0 12px;padding-top:16px;border-top:1px solid var(--line)}
.ac-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.ac-tile{display:flex;flex-direction:column;gap:4px;align-items:flex-start;text-align:left;
  padding:14px 16px;border-radius:14px;border:1px solid var(--line);background:#0B1D38;color:inherit;cursor:pointer}
.ac-tile:disabled{cursor:default;opacity:.9}
.ac-tile b{font-size:1.7rem;line-height:1;color:var(--text)}
.ac-tile span{font-size:.8rem;color:var(--text-mute)}
.ac-tile.hot{border-color:var(--gold);background:linear-gradient(145deg,#15294a,#0B1D38)}
.ac-tile.hot b{color:var(--gold-lt)}
.ac-tile.stat{background:transparent}
.ac-tile.stat b{color:var(--gold)}
.ac-sec{margin-top:8px}
.ac-list{display:flex;flex-direction:column;gap:10px}
.ac-item{padding:14px 16px}
.ac-item-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ac-item-head b{font-size:1rem}
.ac-when{margin-left:auto;font-size:.76rem;color:var(--text-mute)}
.ac-tag{font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  color:#0A1A33;background:var(--gold);padding:2px 8px;border-radius:999px}
.ac-tag.off{background:var(--line);color:var(--text-mute)}
.ac-meta{font-size:.86rem;color:var(--text-dim);margin-top:5px}
.ac-note{font-size:.86rem;color:var(--text-mute);margin-top:7px;padding:8px 10px;border-left:2px solid var(--line-soft);background:rgba(255,255,255,.02)}
.ac-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:11px}
.ac-empty{padding:16px;color:var(--text-mute);font-size:.88rem;border:1px dashed var(--line);border-radius:12px;text-align:center}
.ac-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.ac-story-add input{width:100%}
.ac-checklist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ac-checklist li label{display:flex;gap:10px;align-items:flex-start;cursor:pointer;font-size:.9rem;color:var(--text-dim)}
.ac-checklist input{margin-top:3px;accent-color:var(--gold)}
@media(max-width:640px){.ac-grid2{grid-template-columns:minmax(0,1fr)}}

/* -------- Local story pill + weather widget -------- */
.rstory-srcline{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rstory-local{font-size:.64rem;letter-spacing:.06em;text-transform:uppercase;font-weight:800;
  color:#08301c;background:#7FD1A0;padding:3px 9px;border-radius:999px}
.wx{display:inline-flex;align-items:center;gap:12px;padding:10px 16px;border:1px solid var(--line);
  border-radius:14px;background:linear-gradient(145deg,#0B1D38,#0A1730)}
.wx-ico{font-size:1.7rem;line-height:1}
.wx-main{display:flex;flex-direction:column;line-height:1.12}
.wx-temp{font-size:1.3rem;color:var(--text)}
.wx-desc{font-size:.76rem;color:var(--text-mute)}
.wx-meta{display:flex;flex-direction:column;line-height:1.25;margin-left:4px;padding-left:12px;border-left:1px solid var(--line-soft)}
.wx-place{font-size:.82rem;color:var(--text-dim);font-weight:600}
.wx-hilo{font-size:.74rem;color:var(--text-mute)}
@media(max-width:480px){.wx{width:100%;justify-content:flex-start}}

/* -------- Journalist Lounge photo gallery -------- */
.jl-gallery{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.jl-gallery .ph-frame{margin:0}
.jl-gallery .ph-frame img{aspect-ratio:1/1;object-fit:cover;width:100%;height:100%}
@media(max-width:760px){.jl-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* -------- Prospect media gallery (journalist-contributed) -------- */
.cl-media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.cl-media-item{width:100%;border-radius:12px;aspect-ratio:16/10;object-fit:cover;background:#08152b;display:block}
video.cl-media-item{aspect-ratio:16/9}
.cl-media-link{display:inline-block;color:var(--gold-lt);font-weight:600;padding:8px 0}

/* -------- Seven day forecast widget -------- */
.wx7{border:1px solid var(--line);border-radius:16px;overflow:hidden;
  background:linear-gradient(145deg,#0F2647,#0A1730)}
.wx7-head{padding:18px 18px 6px}
.wx7-head .eyebrow{color:var(--gold)}
.wx7-head h3{font-size:1.4rem;margin:6px 0 2px}
.wx7-place{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-lt)}
.wx7-days{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(92px,1fr);gap:10px;
  overflow-x:auto;padding:14px 18px 4px;scrollbar-width:thin}
.wx7-day{display:flex;flex-direction:column;align-items:center;gap:5px;padding:14px 8px;
  border:1px solid var(--line-soft);border-radius:14px;background:rgba(255,255,255,.02);min-width:92px}
.wx7-day.on{border-color:var(--gold);background:rgba(212,175,55,.08)}
.wx7-dow{font-size:.72rem;letter-spacing:.1em;color:var(--text-mute);font-weight:700}
.wx7-day.on .wx7-dow{color:var(--gold-lt)}
.wx7-ico{font-size:1.9rem;line-height:1}
.wx7-hi{font-size:1.15rem;color:var(--text)}
.wx7-lo{font-size:.85rem;color:var(--text-mute)}
.wx7-pop{font-size:.7rem;color:#8Fc7f0;min-height:.9em}
.wx7-note{padding:6px 18px 16px;margin:0;font-size:.76rem;color:var(--text-mute)}

/* All seven days fit across a phone screen, no horizontal scroll. */
@media(max-width:640px){
  .wx7-days{grid-auto-flow:row;grid-template-columns:repeat(7,minmax(0,1fr));grid-auto-columns:auto;
    overflow-x:visible;gap:4px;padding:12px 10px 4px}
  .wx7-day{min-width:0;padding:9px 1px;border-radius:10px;gap:3px}
  .wx7-dow{font-size:.58rem;letter-spacing:.02em}
  .wx7-ico{font-size:1.2rem}
  .wx7-hi{font-size:.9rem}
  .wx7-lo{font-size:.7rem}
  .wx7-pop{font-size:.58rem}
  .wx7-head{padding:14px 14px 4px}
  .wx7-head h3{font-size:1.2rem}
  .wx7-note{padding:6px 14px 14px}
}