/* theme-l2.css -- "L2" navy + orange theme layer for myRecruitingBoard.
   Additive and reversible: loaded LAST in index.html; delete its <link> (and theme-l2.js) to revert.
   Gold (--win) is reserved for win states only (coach replied, visit, offer). */

:root {
  --navy: #060B16;
  --navy-2: #0F1A2E;
  --o: #FF6A1F;          /* orange: fills, marks (dark text on top) */
  --od: #B83200;         /* deep orange: text/links on light backgrounds */
  --win: #FFC83D;
  --win-bg: #FFF3CC;
  --win-ink: #6B4A00;
  --win-line: #F1D46E;

  --bg: #F5F6F8;
  --paper: #FFFFFF;
  --ink: #0B1426;
  --muted: #51607F;
  --line: #E1E5EC;
  --line-strong: #C4CBD9;
  --accent: #0B1426;     /* navy: fills and text-on-light; orange is for primary actions */
  --accent-soft: #E4E9F3;
  --hot: #D92D20;        /* alerts: clear red, distinct from the old brick */
  --alert-bg: #FDE7E4;
  --good: #1F7A5A;
  --warn: #9A6B00;
  --chip: #EBEEF3;
  --shadow: none;
  --radius: 10px;
  --sans: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --display: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

body { font-family: var(--sans); letter-spacing: -0.005em; }

/* ---- type ---- */
h1, h2, h3, .page-title,
#view-today .today-head h1 {
  font-family: var(--display) !important;
  font-weight: 400 !important;
  letter-spacing: -0.035em !important;
}
h3 { font-weight: 500 !important; letter-spacing: -0.02em !important; }
.section-label, .kicker {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--muted);
}

/* ---- chrome ---- */
.app-top {
  background: var(--navy);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
}
.brand strong {
  font-family: var(--display);
  font-weight: 600;
  text-transform: none;
  letter-spacing: -0.03em;
  font-size: 19px;
  color: #fff;
}
.brand span {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: #A9BAD8;
}
.app-top .linkish { color: #fff; }

.nav {
  background: var(--navy);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.nav button {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 9px;
  letter-spacing: 0.03em;
  color: #8FA3CB;
  position: relative;
}
/* Oct 12, 2026: desktop side menu -- larger text (this sheet loads last, so the size has to be set here). */
@media (min-width: 800px) {
  .nav button { font-size: 15px; letter-spacing: 0.01em; }
}
.nav button.on { color: #fff; }
.nav button.on::before {
  content: "";
  position: absolute;
  top: 0;
  left: 22%;
  right: 22%;
  height: 2px;
  background: var(--o);
  border-radius: 0 0 2px 2px;
}
.nav button.on .ico { color: var(--o); }

/* ---- surfaces ---- */
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: none;
}

/* ---- buttons ---- */
.btn {
  font-family: var(--sans);
  font-weight: 500;
  letter-spacing: -0.005em;
  border-radius: 8px;
  background: var(--chip);
  color: var(--ink);
}
.btn:hover { opacity: 1; transform: translateY(-1px); }
.btn.primary { background: var(--o); color: var(--navy); }
.btn.primary:hover { background: #FF8A4C; }
.btn.ghost { color: var(--ink); }
.btn.warn { background: var(--alert-bg); color: #B42318; }


/* ---- chips: quiet by default; gold reserved for wins ---- */
.chip.high { color: var(--hot); }
.chip.medium { color: var(--warn); }
.chip.win, .chip.replied, .chip.visit, .chip.offer {
  background: var(--win-bg);
  color: var(--win-ink);
  border: 1px solid var(--win-line);
  border-radius: 99px;
  padding: 1px 8px;
  font-size: 12px;
}




/* ---- links: ink text, orange underline (no more brick-red links) ---- */
a, .linkish, button.linkish {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--o);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
a:hover, .linkish:hover { color: var(--navy); text-decoration-color: var(--navy); }
.linkish.muted { color: var(--muted); }
.app-top .linkish { color: #fff; }
.landing-layout a, .landing-layout .linkish { color: inherit; }

/* ---- primary actions: orange fill, navy text, everywhere ---- */
button.btn.primary, .btn.primary, a.btn.primary,
.op-action-row .btn.primary, .guidance .btn.primary {
  background: var(--o) !important;
  color: var(--navy) !important;
  text-decoration: none;
}
button.btn.primary:hover, .btn.primary:hover { background: #FF8A4C !important; }
.btn.ghost-outline, button.btn.ghost-outline {
  border: 1px solid var(--line-strong) !important;
  background: transparent;
  color: var(--ink) !important;
  text-decoration: none;
}
.btn.ghost, .btn.add { text-decoration: none; }
.btn.warn { text-decoration: none; }

/* ---- active stage / selected pills ---- */
.stage-stop.on, .op-stage-pill.on {
  background: var(--o) !important;
  color: var(--navy) !important;
  border-color: var(--o) !important;
}
.stage-chip.on { color: var(--ink); text-decoration-color: var(--o); }

/* ---- map clusters ---- */
.marker-cluster-small, .marker-cluster-medium, .marker-cluster-large { background-color: rgba(255, 106, 31, 0.28); }
.marker-cluster-small div, .marker-cluster-medium div, .marker-cluster-large div {
  background-color: var(--o);
  color: var(--navy);
}

/* ---- alerts / statuses (hard-coded old colors) ---- */
.ie-err, .lc-bad, .lc-bad-text, .logo-panel-msg.err, .wiki-none, .ev-list li.ev-bad::marker { color: var(--hot); }
.lc-warn { color: #9A6B00; }
.ev-low { background: var(--alert-bg); color: #B42318; }
.ev-high { background: #DDF3E8; color: #1F7A5A; }
.ev-medium, .admin-flag, .tag.pending { background: #FFF3CC; color: #6B4A00; }
.admin-table tr.editing td, .admin-table tr.editing td:first-child, .admin-table.has-actions tr.editing td.ie-actions { background: #EEF1F8; }
.data-warn { background: var(--alert-bg); color: #B42318; }

/* ---- admin tool groups ---- */
.admin-tools { border-radius: 12px; border-color: var(--line); background: #fff; }
.admin-tools > summary { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.admin-tools > summary .meta { font-family: var(--sans); text-transform: none; letter-spacing: 0; }
.tool-group { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin: 0 0 10px; background: #fff; display: flex; flex-direction: column; gap: 10px; }
.tool-group-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.tool-group-h strong { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.tool-stats { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; }
.tool-actions { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.tool-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; flex: 1 1 100%; }

/* ---- admin nav tab (added by theme-l2.js, visible to the owner only) ---- */
.nav.has-admin { grid-template-columns: repeat(8, 1fr); }

/* ================= LANDING ================= */
.landing-layout {
  background: var(--navy);
  color: #fff;
  position: relative;
  overflow: hidden;
  font-family: var(--sans);
  --muted: #A9BAD8;
  --hl: rgba(255, 255, 255, 0.24);
}
.landing-layout::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 900px;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
  pointer-events: none;
}
.landing-layout::after {
  content: "";
  position: absolute;
  right: -12%;
  top: -18%;
  width: 70vw;
  max-width: 1000px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 106, 31, 0.42) 0%, rgba(255, 106, 31, 0) 62%);
  pointer-events: none;
}
.landing-layout > * { position: relative; z-index: 1; }
.landing-header {
  background: transparent;
  border-bottom: 1px solid var(--hl);
  margin: 0 clamp(20px, 5vw, 80px);
  padding: 22px 0;
}
.landing-header .auth-mark {
  background: var(--o);
  color: var(--navy);
  border-radius: 6px;
  width: 24px;
  height: 24px;
  font-size: 0;           /* hide the "C"; the mark is a solid square */
}
.landing-header .auth-brand-text strong {
  font-family: var(--display);
  font-weight: 600;
  text-transform: none;
  letter-spacing: -0.03em;
  font-size: 22px;
  color: #fff;
}
.landing-header .auth-brand-text small { display: none; }
.landing-header .btn.ghost {
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.landing-split {
  align-items: center;
  min-height: 0;
  padding: clamp(40px, 6vw, 96px) clamp(20px, 5vw, 80px) clamp(56px, 7vw, 110px);
  gap: clamp(32px, 4vw, 64px);
}
.landing-hero-left {
  padding: 0;
  max-width: none;
  gap: 0;
  flex: 1 1 0;
  min-width: 0;
}
.sport-cue {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: #A9BAD8;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
}
.sport-cue::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--o);
  animation: l2-live 1.8s ease-out infinite;
}
.landing-title {
  font-family: var(--display) !important;
  font-weight: 400 !important;
  font-size: clamp(52px, 7vw, 112px) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.045em !important;
  color: #fff;
  margin: 0 0 28px;
}
.landing-lede {
  color: #D0D9EA;
  font-size: clamp(18px, 1.5vw, 21px);
  max-width: 500px;
  margin-bottom: 36px;
}
.landing-actions .btn {
  font-size: 17px;
  padding: 14px 26px;
  min-height: 52px;
  border-radius: 8px;
}
.landing-actions .btn.primary { background: var(--o); color: var(--navy); }
.landing-actions .btn.ghost-outline {
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  background: transparent;
}
.landing-hero-right {
  background: transparent;
  min-height: 0;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
}
.hero-image-panel { display: none; }
@media (max-width: 899px) {
  .landing-hero-left, .landing-hero-right { flex: 0 0 auto; width: 100%; }
}
.l2-win { width: 100%; }

/* how-it-works (existing principles), hairline columns on white */
.landing-lower {
  background: #fff;
  color: var(--navy);
  padding: clamp(56px, 7vw, 110px) clamp(20px, 5vw, 80px);
  --muted: #51607F;
}
.landing-principles {
  max-width: none;
  width: 100%;
  gap: 0;
  border-top: 1px solid #D5DAE4;
}
.principle {
  padding: 28px 28px 36px;
  border-bottom: 1px solid #D5DAE4;
}
.principle + .principle { border-left: 1px solid #D5DAE4; }
@media (max-width: 767px) { .principle + .principle { border-left: 0; } .principle { padding-left: 0; padding-right: 0; } }
.principle:first-child { padding-left: 0; }
.p-num {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  border-bottom: 0;
  color: #51607F;
}
.principle h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 28px;
  letter-spacing: -0.03em;
  color: var(--navy);
}
.principle p { color: #51607F; font-size: 17px; }
.landing-proof { display: none; }

/* ticker */
.l2-ticker { padding-top: 8px; border-top: 1px solid var(--hl); }
.l2-ticker-h {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  padding: 22px clamp(20px, 5vw, 80px) 18px;
  color: #A9BAD8;
}
.l2-mono {
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.l2-ticker-m {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 34px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
@media (max-width: 899px) { .l2-sch { font-size: 18px; padding: 0 28px; } }


/* ================= LANDING: Sanity-style motion ================= */
@keyframes l2-rise { from { opacity: 0; transform: translateY(18px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
.landing-layout[data-l2] .sport-cue { animation: l2-rise .8s cubic-bezier(.2,.8,.2,1) .05s backwards; }
.landing-layout[data-l2] .landing-title { animation: l2-rise .9s cubic-bezier(.2,.8,.2,1) .15s backwards; }
.landing-layout[data-l2] .landing-lede { animation: l2-rise .9s cubic-bezier(.2,.8,.2,1) .28s backwards; }
.landing-layout[data-l2] .landing-actions { animation: l2-rise .9s cubic-bezier(.2,.8,.2,1) .4s backwards; }
.landing-layout[data-l2] .l2-win { animation: l2-rise-win 1s cubic-bezier(.2,.8,.2,1) .35s both; perspective: 1400px; }

@keyframes l2-rise-win { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
/* hero glow follows the pointer */
.landing-layout::after {
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
  transform: translate(calc(var(--gx, 0) * 70px), calc(var(--gy, 0) * 50px));
}
/* board tilts toward the pointer, with a spotlight */
.l2-win > div:nth-child(2) {
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(calc(var(--ry, 0) * -5deg)) rotateY(calc(var(--rx, 0) * 7deg));
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s;
  will-change: transform;
}
.l2-win > div:nth-child(2)::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, 0.10), transparent 60%);
  opacity: var(--spot, 0);
  transition: opacity .3s;
}
.l2-toast { transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.l2-win:hover .l2-toast { margin-top: -4px; }
/* cards respond to hover */
.l2-card { transition: transform .22s cubic-bezier(.2,.8,.2,1), border-color .22s, background .22s; }
.l2-card:hover { transform: translateY(-3px); border-color: rgba(255, 106, 31, 0.7) !important; background: rgba(255, 106, 31, 0.07); }
/* buttons: quick lift, orange glow */
.landing-actions .btn { transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s, background .2s; }
.landing-actions .btn.primary:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(255, 106, 31, 0.35); }
.landing-actions .btn.ghost-outline:hover { transform: translateY(-2px); }
@media (hover: none), (prefers-reduced-motion: reduce) {
  .l2-win > div:nth-child(2) { transform: none; }
  .landing-layout::after { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .landing-layout[data-l2] .sport-cue, .landing-layout[data-l2] .landing-title, .landing-layout[data-l2] .landing-lede,
  .landing-layout[data-l2] .landing-actions, .landing-layout[data-l2] .l2-win { animation: none; }
}

/* landing buttons must stay light on navy (beats the global ghost-outline override) */
.landing-layout .landing-actions .btn.ghost-outline,
.landing-layout .btn.ghost-outline {
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
}
.landing-layout .landing-header .btn.ghost { color: #fff !important; }

/* ================= LANDING: scroll choreography (Sanity-style scrub) ================= */
.landing-layout { overflow: clip; }
.landing-layout::before { transform: translateY(calc(var(--sg, 0) * -1px)); }
.landing-layout::after {
  transform: translate(calc(var(--gx, 0) * 70px), calc(var(--gy, 0) * 50px + var(--sy, 0) * 1px)) scale(var(--ss, 1));
  transition: none;
}
.l2-pin { position: relative; }
.l2-pin.on { height: 260vh; }
.l2-pin.on > .landing-split {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  padding-top: 0;
  padding-bottom: 0;
  overflow: visible;
}
.l2-pin.on .landing-hero-right { will-change: transform; transform-origin: 50% 50%; }
.l2-pin.on .landing-hero-left > * { will-change: transform, opacity, filter; }
.l2-pin.on .l2-win > div:nth-child(2) { overflow: visible; }
.l2-panel {
  background: rgba(11, 20, 38, calc(var(--sep, 0) * 0.96));
  border: 1px solid rgba(255, 255, 255, calc(var(--sep, 0) * 0.22));
  border-radius: 12px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, calc(var(--sep, 0) * 0.55));
  will-change: transform;
}
.l2-pin.on .l2-panel:first-child { border-right-width: 1px; }
/* scroll reveals below the hero */
.l2-reveal { opacity: 0; transform: translateY(46px); filter: blur(4px); transition: opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1), filter .9s; }
.l2-reveal.l2-in { opacity: 1; transform: none; filter: none; }
@media (prefers-reduced-motion: reduce) { .l2-reveal { opacity: 1; transform: none; filter: none; transition: none; } }

/* copy stays static and on top; the board moves behind and beside it */
.landing-layout[data-l2] .landing-hero-left{position:relative;z-index:3}
.landing-layout[data-l2] .landing-hero-right{position:relative;z-index:1}

/* sport carousel: boards sit on a 3D ring */
.l2-car{position:relative;flex:1 1 520px;min-width:0;perspective:2600px;perspective-origin:50% 45%}
.l2-ring{position:relative;transform-style:preserve-3d;width:100%}
.l2-ring>.l2-win{flex:none!important;width:100%}
.l2-ring>.l2-clone{position:absolute!important;left:0;top:0;width:100%}
.l2-slot{backface-visibility:hidden;-webkit-backface-visibility:hidden;will-change:transform,opacity}

/* product-tab cards (carousel + "what's inside" grid) */
.l2-ring>.l2-tc{position:absolute!important;left:0;top:0;width:100%;box-sizing:border-box;padding-top:34px}
.l2-tc-box{background:rgba(11,20,38,.88);border:1px solid rgba(255,255,255,.18);border-radius:14px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.45);height:100%;box-sizing:border-box;color:#E9EEF8}
.l2-tc-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid var(--hl)}
.l2-tc-name{color:#C9D3E6}
.l2-tc-tag{color:var(--o);font-size:11px;display:inline-flex;align-items:center;gap:8px;text-align:right}
.l2-tc-tag i{width:7px;height:7px;border-radius:50%;background:var(--o);display:inline-block}
.l2-tc-b{padding:12px 16px 16px;display:flex;flex-direction:column;gap:9px}
.l2-tc-row{display:flex;align-items:center;gap:10px;padding:9px 11px;border:1px solid rgba(255,255,255,.12);border-radius:8px;font-size:14px}
.l2-tc-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.28);flex:none}
.l2-tc-dot.hot{background:var(--o)}
.l2-tc-t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.l2-tc-m{font-size:11px;color:#8FA3CB;flex:none}
.l2-tc-bar{display:flex;align-items:center;gap:10px;font-size:11px;color:#8FA3CB}
.l2-tc-bar b{flex:1;height:5px;border-radius:3px;background:rgba(255,255,255,.1);overflow:hidden;display:block}
.l2-tc-bar b i{display:block;height:100%;background:var(--o)}
.l2-tc-note{margin:2px 0 0;font-size:12.5px;line-height:1.45;color:#8FA3CB}
.l2-tc-chips,.l2-tc-stages{display:flex;gap:6px;flex-wrap:wrap}
.l2-tc-chips span,.l2-tc-stages span{font-size:11px;color:#8FA3CB;border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:4px 10px}
.l2-tc-stages span.on{color:#fff;border-color:var(--o)}
.l2-tc-clips{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.l2-tc-clip{position:relative;height:56px;border:1px solid rgba(255,255,255,.12);border-radius:8px;background:linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,.02))}
.l2-tc-clip u{position:absolute;left:10px;top:50%;margin-top:-7px;border-style:solid;border-width:7px 0 7px 12px;border-color:transparent transparent transparent rgba(255,255,255,.7)}
.l2-tc-clip span{position:absolute;right:8px;bottom:6px;font-size:10.5px;color:#C9D3E6}
.l2-tc-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.l2-tc-tile{border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:10px;display:flex;flex-direction:column;gap:2px}
.l2-tc-tile strong{font-size:22px;font-weight:600;letter-spacing:-.01em}
.l2-tc-tile span{font-size:10.5px;color:#8FA3CB}
.l2-tc-me{display:flex;align-items:center;gap:12px}
.l2-tc-me i{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--o),#7A3A1A);flex:none}
.l2-tc-me strong{display:block;font-size:16px}
.l2-tc-me span{font-size:11px;color:#8FA3CB}
.l2-inside{background:#060B16;color:#E9EEF8;padding:72px max(20px,5vw) 80px;border-top:1px solid var(--hl)}
.l2-inside .l2-ticker-h{color:#8FA3CB;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.l2-inside-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;margin-top:22px}
.l2-tc-static .l2-tc-box{box-shadow:0 16px 40px rgba(0,0,0,.3)}
@media (max-width:899px){.l2-ring>.l2-tc{display:none}}
/* carousel cards are opaque so neighbours never show through the front card */
.l2-tc-box{background:#0B1426}
.l2-ring .l2-win>div:nth-child(2){background:#0B1426!important}

/* ---- Everything in one place: full pages shown one after another ---- */
.l2-story{background:#060B16;color:#E9EEF8;padding:72px max(20px,5vw) 40px;border-top:1px solid var(--hl)}
.l2-story-h{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:#8FA3CB;margin-bottom:28px}
.l2-step{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,8fr);gap:56px;align-items:center;padding:56px 0;border-top:1px solid var(--hl)}
.l2-step.flip{grid-template-columns:minmax(0,8fr) minmax(0,5fr)}
.l2-step.flip .l2-step-t{order:2}
.l2-step-k{color:var(--o);margin-bottom:14px}
.l2-step h3{font-size:clamp(28px,3.2vw,44px);line-height:1.05;letter-spacing:-.02em;font-weight:500;margin:0 0 16px;color:#fff}
.l2-step p{font-size:18px;line-height:1.5;color:#A9B7D4;margin:0;max-width:30ch}
.l2-pgw{--k:1;position:relative;width:100%;aspect-ratio:960/600;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.18);box-shadow:0 40px 90px rgba(0,0,0,.5);will-change:transform;background:#F4F5F8}
.l2-pg{position:absolute;left:0;top:0;width:960px;height:600px;transform:scale(var(--k));transform-origin:0 0;display:flex;font-family:inherit;color:#0B1426;text-align:left}
@media (max-width:899px){.l2-step,.l2-step.flip{grid-template-columns:1fr;gap:24px;padding:40px 0}.l2-step.flip .l2-step-t{order:0}.l2-step p{max-width:none}}
/* page mockup parts */
.p-rail{width:176px;background:#060B16;padding:18px 12px;display:flex;flex-direction:column;gap:6px;flex:none}
.p-brand{display:flex;align-items:center;gap:8px;color:#fff;font-weight:600;font-size:12.5px;letter-spacing:-0.02em;white-space:nowrap;margin:0 2px 16px}
.p-brand b{width:16px;height:16px;border-radius:4px;background:var(--o);flex:none}
.p-nav{display:flex;align-items:center;gap:10px;padding:10px 10px;border-radius:8px;color:#8FA3CB;font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.04em}
.p-nav i{width:14px;height:14px;border-radius:3px;border:1.5px solid currentColor;opacity:.8}
.p-nav.on{background:rgba(255,106,31,.16);color:#fff;box-shadow:inset 3px 0 0 var(--o)}
.p-main{flex:1;min-width:0;display:flex;flex-direction:column}
.p-top{height:40px;background:#0B1426;color:#8FA3CB;font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.05em;display:flex;align-items:center;justify-content:space-between;padding:0 22px;flex:none}
.p-body{padding:22px 26px;flex:1;min-height:0;overflow:hidden}
.p-k{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.08em;color:#51607F}
.p-body h4{font-size:34px;line-height:1.05;letter-spacing:-.02em;font-weight:500;margin:6px 0 6px}
.p-sub{font-size:14px;color:#51607F;margin:0 0 16px}
.p-cols{display:flex;gap:16px;align-items:stretch}
.p-col{flex:1;min-width:0;display:flex;flex-direction:column;gap:12px}.p-col.wide{flex:1.55}
.p-card{background:#fff;border:1px solid #D5DAE4;border-radius:10px;padding:14px 16px}
.p-card.flush{padding:4px 0}.p-card.center{display:flex;flex-direction:column;align-items:center;gap:10px}
.p-ch{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.08em;color:#51607F;margin-bottom:8px}
.p-chip{font-size:11px;font-family:"IBM Plex Mono",monospace;border:1px solid #D5DAE4;border-radius:999px;padding:4px 10px;color:#51607F;background:#fff;white-space:nowrap;flex:none}
.p-chip.hot{background:var(--o);border-color:var(--o);color:#fff}
.p-task{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid #E6E9F0}.p-task:first-of-type{border-top:0}
.p-task>div{flex:1;min-width:0}.p-task b,.p-school b,.p-clip b,.p-ev b{display:block;font-size:14px;font-weight:600}
.p-task span,.p-school span,.p-clip span,.p-ev span{display:block;font-size:12px;color:#51607F}
.dot{width:10px;height:10px;border-radius:50%;border:2px solid #AAB3C5;flex:none;box-sizing:border-box}.dot.hot{border-color:var(--o);background:var(--o)}
.p-card.tip p{margin:0;font-size:13.5px;color:#0B1426}
.p-ring{width:112px;height:112px;border-radius:50%;background:conic-gradient(var(--o) calc(var(--v)*1%),#E6E9F0 0);display:grid;place-items:center;position:relative}
.p-ring:before{content:"";position:absolute;inset:11px;background:#fff;border-radius:50%}.p-ring b{position:relative;font-size:26px;font-weight:600}
.p-bars{width:100%;display:flex;flex-direction:column;gap:8px}.p-bars>div{display:flex;align-items:center;gap:10px;font-size:11.5px;color:#51607F}.p-bars span{width:58px}
.p-bars u{flex:1;height:6px;border-radius:3px;background:#E6E9F0;display:block;overflow:hidden}.p-bars u i{display:block;height:100%;background:var(--o)}
.p-filters{display:flex;gap:8px;margin-bottom:14px;align-items:center}.p-in{flex:1;background:#fff;border:1px solid #D5DAE4;border-radius:8px;padding:9px 12px;font-size:13px;color:#8A94A8}
.p-school{display:flex;align-items:center;gap:12px;padding:10px 14px;border-top:1px solid #E6E9F0}.p-school:first-child{border-top:0}.p-school>div{flex:1;min-width:0}
.p-logo{width:36px;height:36px;border-radius:8px;color:#fff;display:grid;place-items:center;font-style:normal;font-weight:700;flex:none}
.p-heart{width:20px;height:20px;fill:none;stroke:#51607F;stroke-width:1.8;flex:none}.p-heart.on{fill:var(--o);stroke:var(--o)}
.p-card.map{padding:0;position:relative;flex:1;background:#DCE7EE;overflow:hidden}.p-us{position:absolute;inset:6%;width:88%;height:88%}.p-us path{fill:#F4F5F8;stroke:#B9C4D2;stroke-width:1.5}
.p-pin{position:absolute;transform:translate(-50%,-50%);min-width:26px;height:26px;border-radius:50%;background:rgba(255,106,31,.92);color:#fff;font-size:11px;font-weight:600;display:grid;place-items:center;box-shadow:0 0 0 5px rgba(255,106,31,.25);padding:0 4px;box-sizing:border-box}
.p-stages{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px}
.p-stage{background:#E9ECF2;border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:8px}.p-stage h6{margin:0 0 2px;font:500 10.5px "IBM Plex Mono",monospace;letter-spacing:.08em;color:#51607F}
.p-oc{background:#fff;border:1px solid #D5DAE4;border-radius:8px;padding:10px 11px}.p-oc.hot{border-color:var(--o)}.p-oc b{display:block;font-size:13.5px}.p-oc span{font-size:11.5px;color:#51607F}
.p-card.draft p{margin:0 0 10px;font-size:13.5px;line-height:1.5}.p-actions{display:flex;justify-content:space-between;align-items:center;gap:10px}
.p-btn{background:var(--o);color:#fff;font-weight:600;font-size:13px;border-radius:8px;padding:8px 18px}
.p-video{flex:1;min-height:330px;border-radius:10px;background:linear-gradient(135deg,#14223F,#0B1426 60%,#3A1D0E);position:relative;overflow:hidden}
.p-video u{position:absolute;left:50%;top:46%;margin:-22px 0 0 -14px;border-style:solid;border-width:22px 0 22px 36px;border-color:transparent transparent transparent rgba(255,255,255,.85)}
.p-video span{position:absolute;left:16px;bottom:30px;color:#fff;font-size:13px}.p-pbar{position:absolute;left:16px;right:16px;bottom:14px;height:4px;border-radius:2px;background:rgba(255,255,255,.2)}.p-pbar i{display:block;width:38%;height:100%;background:var(--o);border-radius:2px}
.p-clip{display:flex;align-items:center;gap:12px;padding:10px 14px;border-top:1px solid #E6E9F0}.p-clip:first-child{border-top:0}.p-clip i{width:64px;height:40px;border-radius:6px;background:linear-gradient(135deg,#14223F,#2A3B5E);flex:none}
.p-ev{display:flex;align-items:center;gap:14px;padding:11px 14px;border-top:1px solid #E6E9F0}.p-ev:first-child{border-top:0}.p-ev>div:nth-child(2){flex:1;min-width:0}
.p-date{width:46px;text-align:center;border:1px solid #D5DAE4;border-radius:8px;padding:5px 0;background:#fff}.p-date span{font:500 10px "IBM Plex Mono",monospace;color:var(--o)}.p-date b{font-size:18px}
.p-res{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-top:1px solid #E6E9F0;font-size:13.5px}.p-ch+.p-res{border-top:0}.p-res span{color:#51607F}.p-res b{font-weight:600}
.p-note{margin:8px 0 0;font-size:12px;color:#51607F}
.p-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px}.p-tiles.three{grid-template-columns:repeat(3,1fr);margin:12px 0}
.p-tile{background:#fff;border:1px solid #D5DAE4;border-radius:10px;padding:12px 14px}.p-tile b{display:block;font-size:26px;font-weight:600;letter-spacing:-.01em}.p-tile span{font:500 10.5px "IBM Plex Mono",monospace;letter-spacing:.06em;color:#51607F}
.p-profile{display:flex;gap:26px;align-items:stretch}.p-pf-l{width:230px;flex:none}.p-portrait{width:100%;height:100%;border-radius:12px;display:block;object-fit:cover}
.p-pf-r{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.p-name b{display:block;font-size:26px;font-weight:600}.p-name span{font-size:13px;color:#51607F}
.p-pf-r .p-actions{margin-top:12px}
.l2-step .p-sub{color:#51607F;font-size:14px;max-width:none;margin:0 0 16px}
.l2-step .p-note{color:#51607F;font-size:12px;max-width:none;margin:8px 0 0}
.l2-step .p-card p{color:#0B1426;font-size:13.5px;max-width:none;line-height:1.5}

.l2-pgw{pointer-events:none}
.p-ico{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.p-nav{gap:12px}
.p-sel{background:#fff;border:1px solid #D5DAE4;border-radius:8px;padding:9px 12px;font-size:12.5px;color:#0B1426;white-space:nowrap}
.p-toggles{display:flex;gap:10px;font-size:13px;color:#0B1426;margin:-4px 0 12px}.p-toggles .mut{color:#8A94A8}
.p-lg{position:relative;width:38px;height:38px;border:1px solid #E1E5EC;border-radius:8px;background:#fff;display:grid;place-items:center;flex:none;overflow:hidden}
.p-lg img{width:30px;height:30px;object-fit:contain;position:relative;z-index:1;background:#fff}.p-lg em{position:absolute;font-style:normal;font-weight:700;color:#51607F}.p-lg.ok em{display:none}
.p-pin2{width:20px;height:20px;fill:none;stroke:#51607F;stroke-width:1.7;flex:none;margin-right:6px}
.p-card.map{padding:0}.p-livemap{position:absolute;inset:0;background:#DCE7EE}
.p-school{padding:9px 14px}
.p-photo{position:relative;width:100%;height:100%;border-radius:12px;overflow:hidden;background:linear-gradient(135deg,#14223F,#7A3A1A)}
.p-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.p-mono{position:absolute;inset:0;display:grid;place-items:center;font-size:64px;font-weight:600;color:rgba(255,255,255,.85);letter-spacing:.02em}

/* sports band (white, above the principle cards) */
.l2-sports{background:#fff;color:#0B1426;padding:44px 0 6px;border-top:1px solid #E3E8F2}
.l2-sports-h{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:0 clamp(20px,5vw,80px) 20px;color:#51607F}
.l2-key{display:inline-flex;align-items:center;gap:8px}
.l2-key i{width:10px;height:10px;border-radius:50%;display:inline-block}
.l2-key i.on{background:var(--o)}
.l2-key i.off{background:#C3CBD9;margin-left:14px}
.l2-sports-m{overflow:hidden;padding:4px 0 26px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.l2-sports .l2-sp-track{animation:l2-marq 70s linear infinite}
.l2-sports:hover .l2-sp-track{animation-play-state:paused}
.l2-spc{display:inline-flex;align-items:center;gap:12px;padding:13px 24px 13px 18px;margin:0 7px;border-radius:999px;font-weight:500;font-size:20px;letter-spacing:-.01em;white-space:nowrap}
.l2-spc svg{width:26px;height:26px;flex:none}
.l2-spc.on{background:#0B1426;color:#fff}
.l2-spc.on svg{color:var(--o)}
.l2-spc.off{background:#F3F5F9;color:#8A94A8;border:1px solid #E1E6EF}
.l2-spc.off svg{color:#A9B2C3}
@media (max-width:899px){.l2-spc{font-size:17px;padding:10px 18px 10px 14px}.l2-spc svg{width:22px;height:22px}}

.l2-sports-live{display:flex;flex-wrap:wrap;gap:10px 0;padding:0 clamp(20px,5vw,80px) 14px}
.l2-sports-live .l2-spc{margin:0 14px 0 0}
.l2-sports-m{padding-top:0}

/* ---- landing animation (ported from approved L2 mockup) ---- */
/* product window loop: 4s */
@property --n{syntax:'<integer>';inherits:false;initial-value:41}
@property --m{syntax:'<integer>';inherits:false;initial-value:12}
.l2-num{animation:l2-n 4s linear infinite;counter-reset:n var(--n)}
.l2-num::after{content:counter(n)}
.l2-num2{animation:l2-m 4s linear infinite;counter-reset:m var(--m)}
.l2-num2::after{content:counter(m)}
.l2-w1{animation:l2-w1 4s linear infinite}
.l2-w2{animation:l2-w2 4s linear infinite}
.l2-mv{animation:l2-mv 4s cubic-bezier(.7,0,.2,1) infinite}
.l2-s1{animation:l2-s1 4s linear infinite}.l2-s2{animation:l2-s2 4s linear infinite}.l2-s3{animation:l2-s3 4s linear infinite}.l2-s4{animation:l2-s4 4s linear infinite}
.l2-toast{animation:l2-toast 4s ease infinite}
.l2-t1{animation:l2-t1 4s steps(19,end) infinite}
.l2-t2{animation:l2-t2 4s steps(35,end) infinite}
.l2-t3{animation:l2-t3 4s steps(26,end) infinite}
.l2-caret{animation:l2-blink .9s steps(1) infinite}
.l2-send{animation:l2-send 4s ease infinite}
.l2-sent{animation:l2-sent 4s linear infinite}
.l2-draft{animation:l2-draft 4s linear infinite}
.l2-live{animation:l2-live 1.8s ease-out infinite}
@keyframes l2-n{0%,38%{--n:41}42%,60%{--n:52}64%,82%{--n:63}86%,94%{--n:74}100%{--n:41}}
@keyframes l2-m{0%,38%{--m:12}42%,60%{--m:20}64%,82%{--m:31}86%,94%{--m:41}100%{--m:12}}
@keyframes l2-w1{0%,38%{width:41%}42%,60%{width:52%}64%,82%{width:63%}86%,94%{width:74%}100%{width:41%}}
@keyframes l2-w2{0%,38%{width:12%}42%,60%{width:20%}64%,82%{width:31%}86%,94%{width:41%}100%{width:12%}}
@keyframes l2-mv{0%{left:6px;opacity:0}3%{left:6px;opacity:1}36%{left:6px}42%{left:calc(25% + 6px)}58%{left:calc(25% + 6px)}64%{left:calc(50% + 6px)}80%{left:calc(50% + 6px)}86%{left:calc(75% + 6px);opacity:1}94%{left:calc(75% + 6px);opacity:1}97%{left:calc(75% + 6px);opacity:0}100%{left:6px;opacity:0}}
@keyframes l2-s1{0%,38%{opacity:1}40%,100%{opacity:0}}
@keyframes l2-s2{0%,39%{opacity:0}42%,60%{opacity:1}62%,100%{opacity:0}}
@keyframes l2-s3{0%,61%{opacity:0}64%,82%{opacity:1}84%,100%{opacity:0}}
@keyframes l2-s4{0%,83%{opacity:0}86%,95%{opacity:1}97%,100%{opacity:0}}
@keyframes l2-toast{0%,58%{opacity:0;transform:translateY(10px)}62%,78%{opacity:1;transform:none}82%,100%{opacity:0;transform:translateY(-6px)}}
@keyframes l2-t1{0%,4%{width:0}12%,100%{width:var(--t1w,19ch)}}
@keyframes l2-t2{0%,13%{width:0}22%,100%{width:var(--t2w,35ch)}}
@keyframes l2-t3{0%,23%{width:0}32%,100%{width:var(--t3w,26ch)}}
@keyframes l2-blink{50%{opacity:0}}
@keyframes l2-send{0%,33%{background:transparent;color:#fff}34.5%,37%{background:var(--o);color:#060B16}38%,100%{background:transparent;color:#fff}}
@keyframes l2-sent{0%,37%{opacity:0}39%,92%{opacity:1}95%,100%{opacity:0}}
@keyframes l2-draft{0%{opacity:0}2%,92%{opacity:1}96%,100%{opacity:0}}
@keyframes l2-live{0%{box-shadow:0 0 0 0 rgba(244,115,58,.6)}100%{box-shadow:0 0 0 9px rgba(244,115,58,0)}}

/* ticker */
.l2-track{display:flex;width:max-content;animation:l2-marq 22s linear infinite}
.l2-track.r{animation-direction:reverse;animation-duration:38s}
.l2-set{display:flex;flex:none}
.l2-sch{display:inline-flex;align-items:center;gap:14px;padding:0 44px;font-weight:500;font-size:22px;letter-spacing:-0.02em;white-space:nowrap;color:#C9D3E6}
.l2-mono-c{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.28);font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.04em;color:#fff}
@keyframes l2-marq{to{transform:translateX(-50%)}}


@media (prefers-reduced-motion:reduce){
.l2-num,.l2-num2,.l2-w1,.l2-w2,.l2-mv,.l2-s1,.l2-s2,.l2-s3,.l2-s4,.l2-toast,.l2-t1,.l2-t2,.l2-t3,.l2-caret,.l2-send,.l2-sent,.l2-draft,.l2-live,.l2-track{animation:none!important}
.l2-mv{left:calc(50% + 6px);opacity:1}.l2-s1,.l2-s2,.l2-s4,.l2-sent{opacity:0}.l2-s3{opacity:1}.l2-toast{opacity:1}
.l2-w1{width:63%}.l2-w2{width:31%}.l2-num::after{content:"63"}.l2-num2::after{content:"31"}
.l2-t1{width:19ch}.l2-t2{width:35ch}.l2-t3{width:26ch}.l2-track{overflow:hidden}
}

/* Long brand name: keep the header on one line on phones. */
@media (max-width: 480px) {
  .brand strong { font-size: 16px; white-space: nowrap; }
  .landing-header .auth-brand-text strong { font-size: 18px; white-space: nowrap; }
}

/* Desktop: styles.css turns the brand ink-colored for a light header; the L2 header is navy, so keep it light. */
.app-top .brand strong { color: #fff; }
.app-top .brand span { color: #A9BAD8; }

/* Header brand: orange square mark + name (same mark as the landing header). */
.app-top .brand strong { display: flex; align-items: center; gap: 9px; }
.app-top .brand strong::before {
  content: "";
  width: 21px;
  height: 21px;
  border-radius: 6px;
  background: var(--o);
  flex: none;
}
@media (max-width: 480px) {
  .app-top .brand strong { gap: 7px; }
  .app-top .brand strong::before { width: 17px; height: 17px; border-radius: 5px; }
}

/* ==========================================================================
   Oct 16, 2026 -- brand placement + Overview page look (mockups 6 and 8)
   ========================================================================== */

/* Desktop: brand at the top of the sidebar, athlete line in the header. */
.nav-brand { display: none; }
@media (min-width: 800px) {
  .nav-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 73px;
    box-sizing: border-box;
    margin: -32px -16px 16px;
    padding: 0 32px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    color: #fff;
    font-family: var(--display);
    font-weight: 600;
    font-size: 16px;
    letter-spacing: -0.03em;
    white-space: nowrap;
  }
  .nav-brand-mark {
    width: 21px;
    height: 21px;
    border-radius: 6px;
    background: var(--o);
    flex: none;
  }
  .app-top { min-height: 73px; box-sizing: border-box; align-items: center; }
  .app-top .brand strong { display: none; }
  .app-top .brand span {
    font-family: var(--display);
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.02em;
    text-transform: none;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Overview: navy header band, mono section titles, stat tiles, brand footer. */
#view-overview .rA-head {
  background: var(--navy);
  box-shadow: inset 0 0 0 999px var(--navy);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
  color: #fff;
  border-radius: 14px;
  border-bottom: 5px solid var(--o);
  padding: 24px 28px;
  gap: 24px;
  margin-bottom: 22px;
}
#view-overview .rA-head h1 {
  color: #fff;
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -0.035em;
  font-size: clamp(30px, 4.5vw, 40px);
  line-height: 1.05;
  margin: 0 0 6px;
}
#view-overview .rA-head h1::before {
  content: "RECRUITING PROFILE";
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--o);
  margin-bottom: 8px;
}
#view-overview .rA-head .sub {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #A9BAD8;
  margin: 10px 0;
}
#view-overview .rA-head .rA-contact,
#view-overview .rA-head .rA-contact a { color: #fff; }
#view-overview .rA-head .rA-contact a {
  text-decoration: underline;
  text-decoration-color: var(--o);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
#view-overview .rA-photo { border: 3px solid var(--o); box-shadow: none; }
#view-overview .rA-head .ov-photo-edit { color: #A9BAD8; }
#view-overview .rA-head .rA-share-col,
#view-overview .rA-head .ov-share-pill,
#view-overview .rA-head .rA-share-col .meta { color: #fff; }
#view-overview .rA-head .btn.small { background: rgba(255, 255, 255, 0.14); color: #fff; }

#view-overview .rA-section h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding-bottom: 0;
  border-bottom: 0;
  margin: 0 0 8px;
}
#view-overview .rA-section h2::before {
  content: "";
  width: 18px;
  height: 3px;
  background: var(--o);
  flex: none;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
  box-shadow: inset 0 0 0 4px var(--o);
}

/* Athletic details as stat tiles */
#view-overview .rA-ath .rA-grid2 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 8px;
}
#view-overview .rA-ath .rA-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 14px;
}
#view-overview .rA-ath .rA-row .k {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
#view-overview .rA-ath .rA-row .v {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-align: left;
  width: 100%;
  border: 0;
  background: transparent;
  padding: 0;
}

/* Brand footer: printed page only */
.ov-brandfoot {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.ov-brandfoot .l {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: -0.02em;
}
.ov-brandfoot .l::before {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: var(--o);
  box-shadow: inset 0 0 0 14px var(--o);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.ov-brandfoot .r {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--muted);
}

/* Print layout (print mode keeps the page to one sheet; sizes stay compact) */
body.ov-print-mode .ov-brandfoot { display: flex; }
body.ov-print-mode #view-overview .ov-empty { display: none !important; }
body.ov-print-mode #view-overview .rA-head {
  padding: 16px 20px !important;
  margin-bottom: 12px !important;
  gap: 18px !important;
}
body.ov-print-mode #view-overview .rA-photo {
  width: 1.3in !important;
  height: 1.3in !important;
}
body.ov-print-mode #view-overview .rA-head h1 {
  font-size: 30px !important;
  margin: 0 0 2px !important;
  color: #fff !important;
}
body.ov-print-mode #view-overview .rA-head .sub {
  font-size: 9.5px !important;
  margin: 6px 0 !important;
  color: #A9BAD8 !important;
}
body.ov-print-mode #view-overview .rA-head .rA-contact {
  font-size: 11.5px !important;
  margin-top: 4px !important;
  color: #fff !important;
}
body.ov-print-mode #view-overview .rA-section h2 {
  font-size: 10px !important;
  padding-bottom: 0 !important;
  margin: 0 0 4px !important;
}
body.ov-print-mode #view-overview .rA-ath .rA-grid2 { gap: 6px !important; margin-top: 4px !important; }
body.ov-print-mode #view-overview .rA-ath .rA-row { padding: 5px 9px !important; }
body.ov-print-mode #view-overview .rA-ath .rA-row .k { font-size: 8.5px !important; }
body.ov-print-mode #view-overview .rA-ath .rA-row .v { font-size: 15px !important; }

/* ==========================================================================
   Admin Work queue (Oct 16, 2026) -- mockup board 1
   ========================================================================== */
.wq-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 4px 0 10px; }
@media (max-width: 760px) { .wq-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wq-tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left;
  padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--paper);
  color: var(--ink); cursor: pointer; font: inherit;
}
.wq-tile-n { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.wq-tile-l { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; }
.wq-tile-h { font-size: 12px; color: var(--muted); line-height: 1.3; }
.wq-tile.wq-urgent { border-left: 4px solid var(--hot); }
.wq-tile.wq-high { border-left: 4px solid var(--o); }
.wq-tile.wq-medium { border-left: 4px solid var(--line-strong); }
.wq-tile.wq-low { border-left: 4px solid var(--good); }
.wq-tile.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.wq-tile.on .wq-tile-h { color: #A9BAD8; }
.wq-alsorow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
.wq-also { border: 1px solid var(--line); background: var(--paper); color: var(--ink); border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 13px; cursor: pointer; }
.wq-also.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.wq-list { display: flex; flex-direction: column; gap: 8px; }
.wq-row {
  display: grid; grid-template-columns: minmax(180px, 1.2fr) minmax(0, 2fr) minmax(160px, 1.2fr); gap: 14px; align-items: center;
  padding: 12px 14px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px;
}
@media (max-width: 900px) { .wq-row { grid-template-columns: 1fr; } }
.wq-row.clickable { cursor: pointer; }
.wq-row.clickable:hover { border-color: var(--line-strong); box-shadow: 0 1px 0 var(--line-strong); }
.wq-row.wq-nolink { opacity: 0.75; }
.wq-name { font-weight: 600; letter-spacing: -0.02em; }
.wq-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.wq-chip { display: inline-flex; gap: 6px; align-items: baseline; padding: 3px 9px; border-radius: 999px; background: var(--chip); font-size: 12px; font-weight: 500; white-space: nowrap; }
.wq-chip-k { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.wq-chip.bad { background: var(--alert-bg); color: var(--hot); }
.wq-chip.bad .wq-chip-k { color: inherit; opacity: 0.8; }
.wq-chip.warn { background: #FFE9DB; color: var(--od); }
.wq-chip.warn .wq-chip-k { color: inherit; opacity: 0.8; }
.wq-chip.ok { background: #E3F4EC; color: var(--good); }
.wq-chip.ok .wq-chip-k { color: inherit; opacity: 0.8; }
.wq-why { font-size: 13px; }

/* ---- Admin drawer: "Where this program stands" (zip 0105) ---- */
.ap-status { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin: 10px 0 14px; background: var(--paper, #fff); }
.ap-status-row { display: grid; grid-template-columns: 130px 1fr auto; gap: 10px; align-items: start; padding: 8px 0; border-bottom: 1px solid var(--line); }
.ap-status-row:last-of-type { border-bottom: 0; }
.ap-status-label { font-weight: 600; font-size: .85rem; }
.ap-status-body { min-width: 0; overflow-wrap: anywhere; font-size: .88rem; }
.ap-status-body .lc { margin-top: 2px; }
.ap-status-mark { text-align: right; }
.ap-miss { color: var(--hot, #D92D20); font-weight: 600; }
@media (max-width: 640px) {
  .ap-status-row { grid-template-columns: 1fr; gap: 4px; }
  .ap-status-mark { text-align: left; }
}
.ap-details { margin: 14px 0; border: 1px solid var(--line); border-radius: 10px; padding: 8px 14px; }
.ap-details > summary { cursor: pointer; font-weight: 600; font-size: .9rem; padding: 4px 0; }
.ap-details[open] > summary { margin-bottom: 10px; }
.admin-pipeline > .meta { margin: 0 0 12px; max-width: 70ch; }