/* Recruit Direct — dark athletic.
   Near-black canvas, white ink, one hairline grey. Barlow Condensed carries the
   headings, Barlow the body. Colour is used only where it means something:
   green for done, red for a problem. */
:root {
  --bg: #0B0B0D;
  --sf: #151518;
  --sf2: #1D1D21;
  --bd: #2A2A31;
  --bd2: #3A3A44;
  --tx: #FFFFFF;
  --mu: #8B8B95;
  --mu2: #B4B4BC;
  --gr: #45D67A;
  --re: #FF5A5A;
  --r: 12px;
  --r-sm: 9px;
  --tabbar-h: 64px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; background: var(--bg); }
body {
  color: var(--tx);
  font-family: "Barlow", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 15px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
}
.hidden { display: none !important; }
::selection { background: #fff; color: #000; }

h1, h2, .pagetitle, .btn-primary, .btn-outline, .btn-soft, .chip, .tagchip,
.promptbtn, .statbox b, .statbox span, .card h3, .cardlabel, .fld .lbl,
.piphead, .pippct, .pipnext-label, .pipnext-action, .checklist-title,
.menu-row, .filtercount, .spinner, .toast, .pct, .btn-link, .coachrow a,
.taglist span, .callout-title, .sheet-head h3, .maploading,
details.grp summary, .toolbox summary, .geobar, .chapnum, .qcount, .segbtn,
.tab, .kpi b, .kpi span, .taskmore, .listhead {
  font-family: "Barlow Condensed", "Barlow", sans-serif;
}

.i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor;
     stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.i.sm { width: 16px; height: 16px; }
.i.dots { fill: currentColor; stroke: none; }

/* ---------- Login ---------- */
.login { min-height: 100dvh; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: var(--bg); }
.login-inner { width: 100%; max-width: 340px; text-align: center; }
.login-logo { width: 180px; height: auto; margin-bottom: 30px; }
.login form { text-align: left; display: grid; gap: 14px; }
.login label { display: grid; gap: 6px; font-family: "Barlow Condensed", sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--mu); }

input, select, textarea {
  width: 100%; background: var(--sf); border: 1.5px solid var(--bd); border-radius: var(--r-sm);
  padding: 12px 13px; font-family: "Barlow", sans-serif; font-size: 16px;
  color: var(--tx); outline: none; appearance: none; -webkit-appearance: none;
}
input::placeholder, textarea::placeholder { color: var(--mu); }
textarea { resize: vertical; line-height: 1.5; }
select option { background: var(--sf); color: var(--tx); }
input[type="checkbox"] { width: 22px; height: 22px; accent-color: #fff;
  appearance: auto; -webkit-appearance: checkbox; }
input[type="range"] { padding: 0; border: none; background: none; accent-color: #fff; }
input:focus, select:focus, textarea:focus { border-color: var(--bd2); background: var(--sf2); }
input:focus-visible, select:focus-visible, textarea:focus-visible,
button:focus-visible, a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ---------- Buttons ---------- */
.btn-primary, .btn-outline, .btn-soft {
  font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; border-radius: var(--r-sm); text-decoration: none; font-size: 14px;
}
.btn-primary { background: #fff; color: #000; border: 1.5px solid #fff; padding: 13px 14px; }
.btn-outline { background: transparent; color: var(--tx); border: 1.5px solid var(--bd2); padding: 11px 14px; }
.btn-soft { background: var(--sf); color: var(--tx); border: 1.5px solid var(--bd); padding: 11px 14px; }
.btn-primary:disabled, .btn-primary.off { opacity: .3; cursor: default; }
.btn-primary .i, .btn-outline .i { width: 17px; height: 17px; }
.btnstack { display: grid; gap: 9px; margin: 12px 0; }
.btnrow { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 12px 0; }
.btn-link { background: none; border: none; padding: 4px 0 0; color: var(--tx);
  font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  text-decoration: underline; width: auto; cursor: pointer; }
.btn-link.danger { color: var(--re); }
.error { color: var(--re); font-size: 14px; margin: 0; }

/* ---------- Shell ---------- */
.topbar { position: sticky; top: 0; z-index: 300; background: var(--bg);
  border-bottom: 1px solid var(--bd);
  padding: calc(env(safe-area-inset-top) + 13px) 14px 13px;
  display: flex; align-items: center; justify-content: center; }
.topbar img { height: 23px; width: auto; }
.topbar .back-btn { position: absolute; left: 6px; bottom: 8px; background: none;
  border: none; color: #fff; padding: 6px 10px; display: flex; cursor: pointer; }
#main { padding: 16px 14px calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 18px);
  max-width: 620px; margin: 0 auto; }

h1, .pagetitle { font-weight: 900; font-size: 27px; letter-spacing: .5px;
  text-transform: uppercase; margin: 2px 0 14px; line-height: 1.03; }
h2 { font-weight: 800; font-size: 14px; letter-spacing: 1.8px; text-transform: uppercase;
  margin: 24px 0 10px; display: flex; align-items: center; gap: 8px; color: var(--mu2); }
h2 .i { width: 15px; height: 15px; color: var(--mu); }
.listhead { font-size: 13px; font-weight: 800; letter-spacing: 1.8px;
  text-transform: uppercase; color: var(--mu); margin: 20px 0 8px; }

.tabbar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 300;
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  display: flex; background: rgba(11,11,13,.94); backdrop-filter: blur(12px);
  border-top: 1px solid var(--bd); }
.tab { flex: 1; background: none; border: none; color: var(--mu); cursor: pointer;
  font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; }
.tab.active { color: var(--tx); }
.tab.active .i { stroke-width: 2.4; }

/* ---------- Home ---------- */
.hero { text-align: center; padding: 4px 0 14px; }
.hero .avatar { width: 104px; height: 104px; border-radius: 50%; object-fit: cover;
  background: var(--sf); margin: 0 auto 12px; display: block; border: 1.5px solid var(--bd2); }
.hero h1 { font-size: 33px; line-height: 1.02; margin-bottom: 12px; }
.hero .quote { font-size: 15px; color: var(--mu2); margin-top: 10px; font-style: italic; }
.chipscroll { display: flex; gap: 7px; padding: 2px 0; flex-wrap: wrap; justify-content: center; }
.tagchip { border: 1.5px solid var(--bd2); background: transparent; border-radius: 20px;
  padding: 6px 14px; font-size: 12px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; white-space: nowrap; flex: none; cursor: pointer; color: var(--tx); }
.tagchip.on { background: #fff; border-color: #fff; color: #000; }

.statrow { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 4px; }
.statbox, .kpi { border: 1.5px solid var(--bd); border-radius: var(--r); background: var(--sf);
  padding: 18px 12px; text-align: center; display: grid; align-content: center; }
.statbox b, .kpi b { font-size: 34px; font-weight: 900; line-height: 1; letter-spacing: -.5px; color: var(--tx); }
.statbox span, .kpi span { font-size: 11px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--mu); margin-top: 3px; }
.statbox b + span + b { margin-top: 12px; }
.kpigrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 4px; }
.kpi.tall { grid-row: span 1; }
.kpi.link { cursor: pointer; }

/* ---------- Menu rows ---------- */
.menu { display: grid; gap: 9px; }
.menu-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: var(--sf); border: 1.5px solid var(--bd); border-radius: var(--r);
  padding: 14px; font-size: 16px; font-weight: 700; letter-spacing: .5px;
  color: var(--tx); text-decoration: none; cursor: pointer; }
.menu-row .i { color: var(--mu2); }
.menu-row .chev { margin-left: auto; color: var(--mu); display: flex; }
.menu-row .badge { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--mu); }
.menu-row .badge + .chev { margin-left: 8px; }

/* ---------- Cards ---------- */
.list { display: grid; gap: 10px; }
.card { background: var(--sf); border: 1.5px solid var(--bd); border-radius: var(--r); padding: 14px; }
.card.strong { border-color: var(--bd2); background: var(--sf2); }
.card.row { display: flex; gap: 12px; align-items: center; }
.card.tappable { cursor: pointer; }
.card h3 { margin: 0; font-size: 20px; font-weight: 800; line-height: 1.1;
  letter-spacing: .3px; text-transform: uppercase; }
.card .logo { width: 46px; height: 46px; object-fit: contain; flex: none;
  background: #fff; border-radius: 8px; padding: 3px; }
.card .logo.round { border-radius: 50%; object-fit: cover; background: var(--sf2); padding: 0; }
.card .logo.fallback { background: var(--sf2); padding: 8px; opacity: .75; }
.collegecard .head .logo.fallback { padding: 10px; }
.card .title { font-weight: 600; font-size: 16px; }
.card .sub { color: var(--mu); font-size: 13px; margin-top: 2px; }
.card .body { flex: 1; min-width: 0; }
.card.done { opacity: .42; }
.card.unread { border-left: 4px solid #fff; }
.card .check { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--bd2);
  background: none; flex: none; cursor: pointer; }
.card .check.on { background: var(--gr); border-color: var(--gr); }
.cardlabel { font-size: 16px; font-weight: 800; letter-spacing: 1px;
  text-transform: uppercase; margin-bottom: 7px; color: var(--tx); }

.collegecard .head { display: flex; gap: 12px; align-items: flex-start; }
.collegecard .head h3 { flex: 1; }
.taglist { margin-top: 11px; display: flex; flex-wrap: wrap; gap: 6px; }
.taglist span { font-size: 12px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; border: 1.5px solid var(--bd2); border-radius: 20px;
  padding: 4px 10px; color: var(--mu2); }
.taglist span .btn-link { font-size: 11px; }
.statbox.tappable { cursor: pointer; }
.statbox.tappable:active { transform: scale(.98); }
.taglist span.tag-hidden { opacity: .45; border-style: dashed; }
.collegecard .meta { color: var(--mu); font-size: 13px; margin-top: 5px; }

.richtext { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px;
  line-height: 1.55; color: var(--mu2); }
.richtext a { color: var(--tx); font-weight: 600; }
.rowline { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.pct { font-weight: 900; font-size: 18px; }
/* Every top-level block on the college page gets the same gap. Without this the
   athlete list sat flush against the College Details card and the two borders
   read as one overlapping edge. */
#college-detail > .card,
#college-detail > .list,
#college-detail > .btnstack,
#college-detail > .btnrow,
#college-detail > .toolbox,
#college-detail > .callout,
#college-detail > .pipeline { margin-bottom: 12px; }
#college-detail > h2 { margin-top: 26px; }

/* The thread page was reusing the AI chat's .askbar and .sendbtn, neither of
   which has ever had a rule, so the composer rendered as a bare form with a
   default browser button and the bubble stretched into a square. */
.taskgroup .groupbody { display: none; margin-top: 11px; }
.taskgroup.open .groupbody { display: block; }
.taskgroup.open .grouphead .i:last-child { transform: rotate(90deg); }
.ctask { padding: 12px 0; border-top: 1.5px solid var(--bd); }
.ctaskhead { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.ctitle { font-size: 15px; font-weight: 600; }
.ctaskmeta { font-size: 12px; color: var(--mu); margin-top: 3px; }
.ctaskdesc { margin-top: 8px; font-size: 14px; color: var(--mu2); }
.ctaskacts { display: flex; gap: 16px; margin-top: 9px; }
.ctaskform { margin-top: 12px; padding-top: 12px; border-top: 1.5px dashed var(--bd); }
.ctaskform.hidden { display: none; }

.msgs { display: flex; flex-direction: column; gap: 10px; padding: 4px 0 14px; }
.msg { display: flex; flex-direction: column; max-width: 78%; }
.msg.mine { align-self: flex-end; align-items: flex-end; }
.msg.theirs { align-self: flex-start; align-items: flex-start; }
.msgbubble { padding: 10px 13px; border-radius: 16px; font-size: 15px; line-height: 1.45;
  white-space: pre-wrap; overflow-wrap: anywhere; width: fit-content; max-width: 100%; }
.msg.mine .msgbubble { background: #fff; color: #000; border-bottom-right-radius: 5px; }
.msg.theirs .msgbubble { background: var(--sf2); color: var(--tx);
  border: 1.5px solid var(--bd); border-bottom-left-radius: 5px; }
.msgwho { font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--mu); margin-bottom: 4px; padding: 0 4px; }
.msgtime { font-size: 10px; color: var(--mu); margin-top: 3px; padding: 0 4px; }

.composer { display: flex; gap: 9px; align-items: center; position: sticky; bottom: 0;
  background: var(--bg); padding: 10px 0 4px; }
.composer input { flex: 1; min-width: 0; border-radius: 22px; padding: 12px 16px; }
.composer button { flex: none; width: 44px; height: 44px; border-radius: 50%; border: none;
  background: #fff; color: #000; display: grid; place-items: center; cursor: pointer; }
.composer button .i { width: 19px; height: 19px; }
.composer button:disabled { opacity: .4; }

.evtime { font-family: "Barlow Condensed", Barlow, sans-serif; font-weight: 800;
  font-size: 15px; letter-spacing: .5px; color: var(--tx); min-width: 62px; flex: none;
  padding-top: 2px; }

#install-card { margin-top: 26px; padding: 16px; border: 1.5px solid var(--bd);
  border-radius: var(--r); background: var(--sf); text-align: left; }
.installhead { display: flex; gap: 12px; align-items: center; }
.installicon { width: 46px; height: 46px; border-radius: 11px; flex: none; }
.installtitle { font-family: "Barlow Condensed", Barlow, sans-serif; font-weight: 800;
  font-size: 16px; letter-spacing: 1.2px; text-transform: uppercase; }
.installsub { font-size: 12px; color: var(--mu); margin-top: 2px; line-height: 1.4; }
.installsteps { margin: 13px 0 4px; padding-left: 20px; font-size: 14px; line-height: 1.7; color: var(--mu2); }
.installsteps b { color: var(--tx); font-weight: 600; }
#install-dismiss { margin-top: 6px; }

.joincode { font-family: "Barlow Condensed", Barlow, sans-serif; font-size: 44px; font-weight: 800;
  letter-spacing: 6px; text-align: center; padding: 18px 0 10px; }

.onboard-progress { height: 4px; border-radius: 3px; background: var(--sf2); overflow: hidden;
  margin: 4px 0 10px; }
.onboard-progress i { display: block; height: 100%; background: #fff; transition: width .25s ease; }

.photopick { display: flex; gap: 14px; align-items: center; }
.photopick .avatar { width: 78px; height: 78px; border-radius: 50%; object-fit: cover;
  background: var(--sf2); flex: none; }
.photopick-side { flex: 1; min-width: 0; }
.photopick-side .help { margin-top: 6px; }
.urlfallback { margin-top: 12px; padding-top: 10px; border-top: 1.5px solid var(--bd); }
.urlfallback summary { font-size: 12px; color: var(--mu); cursor: pointer; }
.urlfallback .fld { margin-top: 9px; }

.athrow .athtop { display: flex; gap: 12px; align-items: center; }
.athrow .body { flex: 1; min-width: 0; }

.tagadd { margin-top: 12px; padding-top: 12px; border-top: 1.5px solid var(--bd); }
.tagadd .fld { margin-bottom: 9px; }

.minibar { height: 5px; background: var(--sf2); border-radius: 3px; margin-top: 8px; overflow: hidden; }
.minibar i { display: block; height: 100%; background: #fff; }
.reasons { margin: 7px 0 0; padding-left: 18px; font-size: 13px; color: var(--mu); }

.coachrow { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.coachrow a { display: inline-flex; align-items: center; gap: 6px; font-size: 12px;
  font-weight: 700; letter-spacing: 1px; text-transform: uppercase; text-decoration: none;
  border: 1.5px solid var(--bd2); border-radius: 20px; padding: 6px 12px; color: var(--tx);
  max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coachrow a.solid { background: #fff; color: #000; border-color: #fff; }
.coachrow a .i { width: 14px; height: 14px; }

/* Segmented control (Active / Deactivated) */
.seg { display: flex; background: var(--sf); border: 1.5px solid var(--bd);
  border-radius: 24px; padding: 4px; margin-bottom: 12px; }
.segbtn { flex: 1; background: none; border: none; color: var(--mu); cursor: pointer;
  padding: 9px 10px; border-radius: 20px; font-size: 13px; font-weight: 800;
  letter-spacing: 1.2px; text-transform: uppercase; }
.segbtn.on { background: #fff; color: #000; }

/* Search + selects */
.searchwrap { position: relative; margin-bottom: 10px; }
.searchwrap .searchi { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--mu); }
.searchwrap input { padding-left: 40px; }
.selectwrap { position: relative; margin-bottom: 10px; }
.selectwrap .selecti { position: absolute; right: 13px; top: 50%; transform: translateY(-50%);
  color: var(--mu2); pointer-events: none; }
.filterbar { display: flex; gap: 9px; margin-bottom: 10px; align-items: stretch; }
.filterbar .selectwrap { flex: 1; margin-bottom: 0; }
.filterbar .btn-outline { width: auto; white-space: nowrap; padding: 11px 13px; }
.filter3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.filter3 .selectwrap { margin-bottom: 0; }
.filter3 select { font-size: 14px; padding: 11px 26px 11px 11px; }
.filtercount { font-size: 12px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--mu); margin: 2px 0 12px; }

.empty { color: var(--mu); text-align: center; padding: 30px 0; font-size: 15px; }
.spinner { text-align: center; color: var(--mu); padding: 24px; font-size: 13px;
  font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }
.help { display: block; font-size: 12px; color: var(--mu); margin-top: 5px; }
.callout { background: var(--sf); border: 1.5px solid var(--bd); border-radius: var(--r); padding: 14px; }
.callout-title { font-weight: 800; font-size: 16px; letter-spacing: .8px;
  text-transform: uppercase; margin-bottom: 4px; }
.callout-body { font-size: 14px; color: var(--mu2); }
.callout-body a { color: var(--tx); font-weight: 700; }
.callout .btn-primary { margin-top: 12px; }
.callout.small { padding: 11px 13px; margin-bottom: 12px; }
.callout.bad { border-color: var(--re); }
.callout.bad .callout-title { color: var(--re); }

/* ---------- Forms ---------- */
.rdform { display: grid; gap: 13px; }
.fld { display: grid; gap: 5px; }
.fld .lbl { font-size: 11px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--mu); }
.fld.chk { display: flex; align-items: center; gap: 12px; font-size: 16px;
  font-weight: 600; cursor: pointer; padding: 4px 0; }
.fld.chk input { position: absolute; opacity: 0; width: 0; height: 0; }
.fld.chk .tick { width: 26px; height: 26px; flex: none; border-radius: 7px;
  border: 1.5px solid var(--bd2); position: relative; transition: background .12s ease; }
.fld.chk input:checked + .tick { background: #fff; border-color: #fff; }
.fld.chk input:checked + .tick::after { content: ""; position: absolute;
  left: 8px; top: 3px; width: 7px; height: 13px; border: solid #000;
  border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.fld.chk input:focus-visible + .tick { outline: 2px solid #fff; outline-offset: 2px; }
details.grp, .toolbox details { background: var(--sf); border: 1.5px solid var(--bd);
  border-radius: var(--r); padding: 14px; }
details.grp[open], .toolbox details[open] { display: grid; gap: 13px; }
details.grp summary, .toolbox summary { font-weight: 800; font-size: 15px;
  letter-spacing: 1px; text-transform: uppercase; cursor: pointer; }
.toolbox { display: grid; gap: 9px; }
.mini { width: auto; padding: 6px 9px; font-size: 15px; border-radius: 6px; }
.scoregrid { display: grid; gap: 7px; margin-top: 10px; }
.scorerow { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; }
.pickbar { display: flex; gap: 16px; }
.picklist { max-height: 320px; overflow-y: auto; background: var(--sf);
  border: 1.5px solid var(--bd); border-radius: var(--r); }
.pickrow { display: flex; align-items: center; gap: 11px; padding: 11px 13px;
  border-bottom: 1px solid var(--bd); font-size: 15px; }
.pickrow:last-child { border-bottom: none; }
.pickrow em { margin-left: auto; font-style: normal; font-size: 12px; color: var(--mu); }

/* ---------- Sheet ---------- */
.sheet-back { position: fixed; inset: 0; z-index: 400; background: rgba(0,0,0,.66);
  display: flex; align-items: flex-end; justify-content: center; }
/* The tab bar sits above the sheet, so the sheet has to clear it or its Save
   button ends up hidden behind Home / Colleges / Tasks. */
.sheet { background: var(--sf); border-top: 1.5px solid var(--bd2); width: 100%; max-width: 620px;
  border-radius: 18px 18px 0 0;
  padding: 18px 16px calc(env(safe-area-inset-bottom) + var(--tabbar-h) + 24px);
  max-height: 88dvh; overflow-y: auto; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.sheet-head h3 { margin: 0; font-size: 21px; font-weight: 900; letter-spacing: .5px;
  text-transform: uppercase; }
.sheet-close { background: none; border: none; padding: 4px; color: var(--mu); cursor: pointer; }

/* ---------- Maps ---------- */
/* Leaflet paints its panes at z-index 400 and its controls at 800, both well
   above the header and tab bar, so a map ran over the top and bottom of the
   screen. Containing each map in its own stacking context keeps those numbers
   inside the box. Google's .gm-style does the same thing. */
.leaflet-container, .gm-style { position: relative; z-index: 0; isolation: isolate; }
/* Belt and braces. Leaflet hard-codes 400 on its panes and 800 on its controls.
   Neutralising those directly means a map cannot reach the fixed chrome even if
   the stacking context above is defeated. Panes keep their order through DOM
   order, which is the order Leaflet creates them in. */
.leaflet-pane { z-index: auto; }
.leaflet-top, .leaflet-bottom { z-index: 2; }
.leaflet-control { z-index: 2; }
.mapbox { isolation: isolate; }
.mapbox { width: 100%; aspect-ratio: 16/10; border-radius: var(--r-sm); overflow: hidden;
  background: var(--sf); border: 1.5px solid var(--bd); }
.bigmap { width: 100%; height: 230px; border-radius: var(--r); border: 1.5px solid var(--bd);
  overflow: hidden; margin-bottom: 10px; background: var(--sf); }
.maploading { display: flex; align-items: center; justify-content: center; height: 100%;
  color: var(--mu); font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }
.leaflet-container { font: inherit; background: var(--sf); }
.leaflet-control-attribution { font-size: 9px; background: rgba(0,0,0,.6) !important; color: var(--mu) !important; }
.leaflet-control-attribution a { color: var(--mu2) !important; }
.leaflet-bar a { background: var(--sf) !important; color: var(--tx) !important;
  border-bottom-color: var(--bd) !important; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--sf2); color: var(--tx); }
/* Bare logo, no badge. A shadow keeps it legible over pale tiles. */
.pin { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; }
.pin img { width: 22px; height: 22px; object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.9)); }
.pin.dim { opacity: .28; filter: grayscale(1); }
/* The stand-in mark is white, so it needs the dark plate rather than the white one. */
.pin.fallback img { padding: 2px; background: #16161a; border-radius: 4px; }
.pin.hit { width: 30px; height: 30px; }
.pin.hit img { width: 30px; height: 30px; }
.geobar { display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
  font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--mu); }
.geobar .btn-outline { width: auto; padding: 7px 11px; font-size: 11px; }

/* ---------- Embedded apps ---------- */
/* The sub-app fills everything between the app's own header and the tab bar,
   so there is one back arrow and one scroll region rather than a page inside
   a page. 100dvh follows Safari's collapsing toolbar. */
body.embedding #main { padding: 0; max-width: none; }
body.embedding { overflow: hidden; }
.appframe { width: 100%; border: 0; display: block; background: #0B0B0D;
  height: calc(100dvh - var(--tabbar-h) - env(safe-area-inset-bottom) - var(--topbar-h, 49px)); }

/* ---------- AI thread ---------- */
.thread { display: grid; gap: 10px; margin-bottom: 14px; }
.bubble { padding: 12px 14px; border-radius: var(--r); font-size: 15px; line-height: 1.5;
  max-width: 90%; white-space: pre-wrap; overflow-wrap: anywhere; }
.bubble.user { background: #fff; color: #000; justify-self: end; }
.bubble.assistant { background: var(--sf); border: 1.5px solid var(--bd); justify-self: start; }
.bubble.pending { color: var(--mu); }
.promptgrid { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.promptbtn { background: transparent; border: 1.5px solid var(--bd2); border-radius: 4px;
  padding: 8px 12px; font-size: 12px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--tx); cursor: pointer; }

/* ---------- Toast ---------- */
.toast { position: fixed; left: 50%; transform: translateX(-50%) translateY(16px);
  bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 14px);
  background: #fff; color: #000; padding: 12px 18px; border-radius: 24px;
  font-size: 14px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
  z-index: 70; opacity: 0; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease; max-width: 90vw; text-align: center; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.bad { background: var(--re); color: #fff; }

/* ---------- Tasks ---------- */
.task .taskhead { display: flex; gap: 12px; align-items: center; }
.task .taskbody { display: none; margin-top: 10px; padding-top: 10px; border-top: 1.5px solid var(--bd); }
.task.open .taskbody { display: block; }
.taskmore { background: none; border: none; padding: 8px 0 0; color: var(--mu);
  font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  display: flex; align-items: center; gap: 5px; cursor: pointer; }
.task.open .taskmore .i { transform: rotate(90deg); }
.taskmore .i { transition: transform .15s ease; }

/* ---------- Training ---------- */
.ring { width: 132px; height: 132px; margin: 4px auto 18px; display: block; }
.ring circle { fill: none; stroke-width: 13; }
.ring .track { stroke: var(--sf2); }
.ring .fill { stroke: #fff; stroke-linecap: round;
  transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dasharray .4s ease; }
.ring text { font-family: "Barlow Condensed", sans-serif; font-weight: 900; font-size: 26px;
  fill: #fff; text-anchor: middle; dominant-baseline: middle; }
.ring.small { width: 92px; height: 92px; margin: 0 auto 10px; }
.chapnum { font-size: 11px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: var(--mu); }
.videowrap { position: relative; width: 100%; aspect-ratio: 16/9; background: #000;
  border-radius: var(--r-sm); overflow: hidden; margin: 12px 0; border: 1.5px solid var(--bd); }
.videowrap iframe, .videowrap video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.quiz { margin-top: 20px; }
.qprog { height: 5px; background: var(--sf2); border-radius: 3px; overflow: hidden; margin-bottom: 10px; }
.qprog i { display: block; height: 100%; background: #fff; transition: width .2s ease; }
.qcount { font-size: 12px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--mu); margin-bottom: 6px; }
.qtext { font-size: 17px; font-weight: 600; margin-bottom: 12px; }
.qopts { display: grid; gap: 8px; }
.qopt { text-align: left; background: var(--sf); border: 1.5px solid var(--bd); color: var(--tx);
  border-radius: var(--r-sm); padding: 13px 14px; font: inherit; font-size: 15px; cursor: pointer; }
.qopt.picked { border-color: #fff; background: var(--sf2); }
.qopt.right { border-color: var(--gr); }
.qopt.wrong { border-color: var(--re); }

/* ---------- Share ---------- */
.sharebox { border: 1.5px solid var(--bd2); border-radius: var(--r); padding: 14px;
  margin-top: 12px; background: var(--sf); }
.sharelink { font-family: ui-monospace, Menlo, monospace; font-size: 12px; word-break: break-all;
  background: var(--bg); border: 1px solid var(--bd); border-radius: 6px; padding: 10px;
  margin: 10px 0; color: var(--mu2); }

/* ---------- Pipeline ---------- */
.pipeline { background: var(--sf); border: 1.5px solid var(--bd); border-radius: var(--r);
  padding: 14px; margin-bottom: 12px; }
.piphead { display: flex; justify-content: space-between; align-items: baseline;
  font-size: 11px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--mu); margin-bottom: 8px; }
.pippct { font-size: 20px; font-weight: 900; color: var(--tx); }
.pipbar { height: 7px; background: var(--sf2); border-radius: 4px; overflow: hidden; }
.pipfill { height: 100%; background: #fff; transition: width .3s ease; }
.pipdots { display: flex; gap: 3px; margin-top: 8px; }
.pipdot { flex: 1; height: 3px; border-radius: 2px; background: var(--sf2); }
.pipdot.on { background: #fff; }
.pipnext { margin-top: 14px; padding-top: 14px; border-top: 1.5px solid var(--bd); }
.pipnext-label { font-size: 10px; font-weight: 800; letter-spacing: 2px;
  text-transform: uppercase; color: var(--mu); margin-bottom: 4px; }
.pipnext-action { font-size: 19px; font-weight: 800; line-height: 1.15; letter-spacing: .3px; }
.pipnext-detail { font-size: 14px; color: var(--mu); margin-top: 6px; }
.pipbtns { display: grid; gap: 8px; margin-top: 12px; }
.checklist { background: var(--bg); border: 1px solid var(--bd); border-radius: var(--r-sm);
  padding: 12px; margin-top: 12px; }
.checklist-title { font-size: 13px; font-weight: 800; letter-spacing: 1px;
  text-transform: uppercase; margin-bottom: 7px; }
.checklist ul { margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.6; color: var(--mu2); }
.checklist ul.avoid { margin-top: 6px; color: var(--re); }

@media (prefers-reduced-motion: no-preference) {
  .screen { animation: fade .14s ease; }
  @keyframes fade { from { opacity: 0 } to { opacity: 1 } }
  .sheet { animation: rise .18s ease; }
  @keyframes rise { from { transform: translateY(14px) } to { transform: none } }
}
@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }

/* Tap-to-select tick used in the roster's share mode */
.tickbox { width: 26px; height: 26px; flex: none; border-radius: 8px;
  border: 1.5px solid var(--bd2); display: flex; align-items: center;
  justify-content: center; color: #000; }
.tickbox.on { background: #fff; border-color: #fff; }
#metric-list .pickrow { border-bottom: 1px solid var(--bd); }
#metric-list .mini { text-align: center; }

/* Hex field: the hash is furniture, not something to type */
.urlbox { font-family: ui-monospace, monospace; font-size: 11px; color: var(--mu);
  background: var(--sf2); border: 1px solid var(--bd); border-radius: 8px;
  padding: 8px 10px; margin: 9px 0; word-break: break-all; }

.logopreview { display: flex; align-items: center; gap: 11px; margin-bottom: 9px; }
.logopreview .logo { width: 54px; height: 54px; object-fit: contain; flex: none;
  background: #fff; border-radius: 8px; padding: 3px; }
.logopreview .logo.fallback { background: var(--sf2); padding: 9px; opacity: .75; }
.logopreview .help { margin-top: 0; }

.hexrow { display: flex; align-items: center; gap: 8px; }
.hexhash { font-family: ui-monospace, Menlo, monospace; font-size: 18px; color: var(--mu); }
.hexrow input { flex: 1; font-family: ui-monospace, Menlo, monospace;
  text-transform: uppercase; letter-spacing: 2px; }
.hexswatch { width: 34px; height: 34px; flex: none; border-radius: 8px;
  border: 1.5px solid var(--bd2); }

/* Who said it, in the team thread */
.msgwho { font-family: "Barlow Condensed", sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase; color: var(--mu); margin-bottom: 4px; }
.thread { max-height: 58dvh; overflow-y: auto; }

/* Tappable rows in the athlete picker */
.pickrow.tappable { cursor: pointer; }
.pickrow .tickbox { width: 24px; height: 24px; border-radius: 7px; }
#pick-count { color: var(--tx); font-weight: 800; }