/* =====================================================================
   STEP Hub UI kit — shared stylesheet for every page mockup
   Load this file in every page-by-page HTML build. Do not redefine
   colors, spacing or component styles inside a page; add page-specific
   rules at the bottom of that page in a <style> block only if needed.
   ===================================================================== */

:root {
  /* Brand */
  --navy: #0b3c6b;
  --navy-700: #0a3560;
  --blue: #1f6fb2;
  --blue-300: #7bb8e8;
  --blue-100: #e8f1fa;
  --gold: #c99a2e;
  --gold-100: #fbf3e2;

  /* Status */
  --green: #2e7d5b;
  --green-100: #e6f3ec;
  --amber: #b5730f;
  --amber-100: #fdf1dd;
  --red: #a63d40;
  --red-100: #fbeaea;
  --purple: #6b4fa0;
  --purple-100: #f0ebf8;

  /* Neutrals */
  --ink: #1e2a36;
  --ink-soft: #5a6470;
  --line: #d9e0e7;
  --line-soft: #eceff3;
  --bg: #f6f8fa;
  --surface: #ffffff;

  /* Chart palette (colorblind-safe order) */
  --c1: #1f6fb2; --c2: #c99a2e; --c3: #2e7d5b; --c4: #6b4fa0;
  --c5: #a63d40; --c6: #4c8ca8; --c7: #8a6d3b; --c8: #5a6470;

  /* Type & space */
  --font: "Inter", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --r-sm: 6px; --r: 10px; --r-lg: 14px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --shadow: 0 1px 2px rgba(16, 32, 48, .06), 0 4px 14px rgba(16, 32, 48, .06);
  --header-h: 60px;
}

* { box-sizing: border-box; }
[hidden], .route[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0 0 var(--s3); line-height: 1.25; color: var(--navy); }
h1 { font-size: 28px; font-weight: 700; letter-spacing: -.01em; }
h2 { font-size: 21px; font-weight: 700; }
h3 { font-size: 17px; font-weight: 650; }
h4 { font-size: 15px; font-weight: 650; }
p { margin: 0 0 var(--s3); }
small, .small { font-size: 13px; color: var(--ink-soft); }
.muted { color: var(--ink-soft); }
.mono { font-family: var(--mono); font-size: 13px; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }

/* ---------- Layout ---------- */
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--s4); }
.page { padding: var(--s5) 0 var(--s7); }
.stack > * + * { margin-top: var(--s4); }
.row { display: flex; gap: var(--s3); align-items: center; }
.row.between { justify-content: space-between; }
.row.wrap-row { flex-wrap: wrap; }
.grid { display: grid; gap: var(--s4); }
.grid.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid.sidebar { grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); }
@media (max-width: 900px) {
  .grid.c3, .grid.c4, .grid.sidebar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .grid.c2, .grid.c3, .grid.c4, .grid.sidebar { grid-template-columns: minmax(0, 1fr); }
  h1 { font-size: 23px; }
}

/* ---------- Header & navigation ---------- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--navy); color: #fff; height: var(--header-h);
  display: flex; align-items: center;
}
.site-header .wrap { display: flex; align-items: center; gap: var(--s4); width: 100%; }
.brand { display: flex; align-items: center; gap: var(--s2); font-weight: 700; color: #fff; font-size: 17px; }
.brand:hover { text-decoration: none; }
.brand .mark {
  width: 28px; height: 28px; border-radius: 7px; background: var(--gold);
  color: var(--navy); display: grid; place-items: center; font-size: 13px; font-weight: 800;
}
.nav { display: flex; gap: var(--s1); margin-left: auto; align-items: center; }
.nav a {
  color: #dbe7f3; padding: 8px 12px; border-radius: var(--r-sm); font-size: 14px; font-weight: 550;
}
.nav a:hover { background: rgba(255, 255, 255, .1); color: #fff; text-decoration: none; }
.nav a.active { background: rgba(255, 255, 255, .16); color: #fff; }
.nav .lock { opacity: .8; font-size: 11px; margin-left: 4px; }
.nav-toggle { display: none; background: none; border: 0; color: #fff; font-size: 22px; margin-left: auto; cursor: pointer; }
@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .nav {
    position: absolute; top: var(--header-h); left: 0; right: 0; background: var(--navy);
    flex-direction: column; align-items: stretch; padding: var(--s2); gap: 2px; display: none;
  }
  .nav.open { display: flex; }
}

/* Secondary (sub-tab) navigation */
.subnav { background: var(--surface); border-bottom: 1px solid var(--line); }
.subnav .wrap { display: flex; gap: var(--s4); overflow-x: auto; }
.subnav a {
  padding: 12px 2px; font-size: 14px; font-weight: 550; color: var(--ink-soft);
  border-bottom: 2px solid transparent; white-space: nowrap;
}
.subnav a.active { color: var(--navy); border-bottom-color: var(--gold); }
.subnav a:hover { color: var(--navy); text-decoration: none; }

/* Page title block */
.page-head { display: flex; gap: var(--s4); align-items: flex-start; justify-content: space-between; flex-wrap: wrap; margin-bottom: var(--s5); }
.page-head p { margin: 0; color: var(--ink-soft); }
.breadcrumb { font-size: 13px; color: var(--ink-soft); margin-bottom: var(--s2); }

/* ---------- Cards ---------- */
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--s4); box-shadow: var(--shadow);
}
.card.flat { box-shadow: none; }
.card.pad-lg { padding: var(--s5); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s3); }
.card-head h3, .card-head h2 { margin: 0; }
.card-foot { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line-soft); }
.card-accent { border-left: 4px solid var(--blue); }
.card-accent.gold { border-left-color: var(--gold); }
.card-accent.green { border-left-color: var(--green); }
.card-accent.red { border-left-color: var(--red); }

/* KPI tile */
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s4); }
.kpi .label { font-size: 13px; color: var(--ink-soft); margin-bottom: var(--s1); }
.kpi .value { font-size: 30px; font-weight: 700; color: var(--navy); line-height: 1.1; }
.kpi .delta { font-size: 13px; margin-top: var(--s1); }
.kpi .delta.up { color: var(--green); }
.kpi .delta.down { color: var(--red); }

/* ---------- Badges & pills ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 600; background: var(--line-soft); color: var(--ink-soft);
  border: 1px solid transparent;
}
.badge.blue { background: var(--blue-100); color: var(--blue); }
.badge.green { background: var(--green-100); color: var(--green); }
.badge.amber { background: var(--amber-100); color: var(--amber); }
.badge.red { background: var(--red-100); color: var(--red); }
.badge.gold { background: var(--gold-100); color: #8a6412; }
.badge.purple { background: var(--purple-100); color: var(--purple); }
.badge.solid { background: var(--navy); color: #fff; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; display: inline-block; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  padding: 9px 16px; border-radius: var(--r-sm); border: 1px solid transparent;
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; background: var(--navy); color: #fff;
}
.btn:hover { background: var(--navy-700); text-decoration: none; color: #fff; }
.btn.secondary { background: var(--surface); color: var(--navy); border-color: var(--line); }
.btn.secondary:hover { background: var(--blue-100); color: var(--navy); }
.btn.ghost { background: transparent; color: var(--blue); }
.btn.ghost:hover { background: var(--blue-100); }
.btn.danger { background: var(--red); }
.btn.sm { padding: 6px 11px; font-size: 13px; }
.btn.lg { padding: 12px 22px; font-size: 15px; }
.btn:disabled, .btn.disabled { opacity: .5; cursor: not-allowed; }
.btn-google { background: #fff; color: #3c4043; border: 1px solid var(--line); font-weight: 600; }
.btn-google:hover { background: #f7f9fb; color: #3c4043; }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
thead th {
  background: var(--navy); color: #fff; text-align: left; font-weight: 600; font-size: 13px;
  padding: 10px 12px; white-space: nowrap;
}
tbody td { padding: 10px 12px; border-top: 1px solid var(--line-soft); vertical-align: top; }
tbody tr:nth-child(even) { background: #fafcfd; }
tbody tr:hover { background: var(--blue-100); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Heatmap cells (panel scores 1.0–4.0) */
.heat { display: inline-block; min-width: 42px; padding: 4px 6px; border-radius: var(--r-sm); text-align: center; font-weight: 600; font-size: 13px; }
.heat-1 { background: #f7d9da; color: #7d2f31; }
.heat-2 { background: #fbeccd; color: #7d5410; }
.heat-3 { background: #d9ecdf; color: #24614a; }
.heat-4 { background: #bfe0cc; color: #1c4e3b; }

/* ---------- Forms ---------- */
label { display: block; font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 5px; }
.hint { font-size: 12px; color: var(--ink-soft); margin-top: 4px; }
input[type="text"], input[type="email"], input[type="url"], input[type="number"],
input[type="date"], input[type="datetime-local"], input[type="search"], select, textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--r-sm);
  font: inherit; font-size: 14px; background: var(--surface); color: var(--ink);
}
textarea { min-height: 110px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--blue); outline-offset: 1px; border-color: var(--blue); }
.field { margin-bottom: var(--s4); }
.field-row { display: flex; gap: var(--s3); flex-wrap: wrap; }
.field-row > .field { flex: 1 1 220px; }
.dropzone {
  border: 2px dashed var(--line); border-radius: var(--r); padding: var(--s5);
  text-align: center; color: var(--ink-soft); background: #fbfdfe;
}
.file-row { display: flex; align-items: center; gap: var(--s3); padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); }

/* Score input row (panel scoring) */
.score-row { display: grid; grid-template-columns: minmax(0, 1fr) 110px; gap: var(--s3); align-items: start; padding: var(--s3) 0; border-top: 1px solid var(--line-soft); }
.score-row:first-child { border-top: 0; }
@media (max-width: 640px) { .score-row { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Lists, timeline, chat ---------- */
.list { list-style: none; margin: 0; padding: 0; }
.list li { padding: var(--s3) 0; border-top: 1px solid var(--line-soft); }
.list li:first-child { border-top: 0; }
.timeline { border-left: 2px solid var(--line); margin-left: 8px; padding-left: var(--s4); }
.timeline .item { position: relative; padding-bottom: var(--s4); }
.timeline .item::before {
  content: ""; position: absolute; left: calc(-1 * var(--s4) - 6px); top: 6px;
  width: 10px; height: 10px; border-radius: 50%; background: var(--blue); border: 2px solid var(--surface);
}
.chat { display: flex; flex-direction: column; gap: var(--s3); }
.bubble { max-width: 72%; padding: 9px 13px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.bubble.me { margin-left: auto; background: var(--blue-100); border-color: #cfe0f1; }
.bubble .meta { font-size: 12px; color: var(--ink-soft); margin-bottom: 2px; }

/* Avatars */
.avatar {
  width: 36px; height: 36px; border-radius: 50%; background: var(--blue-100); color: var(--navy);
  display: grid; place-items: center; font-weight: 700; font-size: 13px; flex: 0 0 auto;
}
.avatar.lg { width: 56px; height: 56px; font-size: 18px; }
.avatar.team { border-radius: var(--r); background: var(--gold-100); color: #8a6412; }

/* ---------- Feedback states ---------- */
.empty { text-align: center; padding: var(--s6) var(--s4); color: var(--ink-soft); }
.empty .icon { font-size: 28px; margin-bottom: var(--s2); }
.alert { border-radius: var(--r); padding: var(--s3) var(--s4); border: 1px solid; display: flex; gap: var(--s3); }
.alert.info { background: var(--blue-100); border-color: #cfe0f1; color: #17425f; }
.alert.warn { background: var(--gold-100); border-color: #ecd9a8; color: #7a5a12; }
.alert.error { background: var(--red-100); border-color: #f0cfd0; color: #7d2f31; }
.alert.ok { background: var(--green-100); border-color: #c7e3d3; color: #1c4e3b; }
.skeleton { background: linear-gradient(90deg, #eef2f5 25%, #f6f9fb 37%, #eef2f5 63%); border-radius: var(--r-sm); height: 14px; }

/* Progress */
.progress { height: 8px; background: var(--line-soft); border-radius: 999px; overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--blue); }
.progress.green > span { background: var(--green); }
.progress.gold > span { background: var(--gold); }

/* ---------- Public pages ---------- */
.hero { background: linear-gradient(135deg, var(--navy) 0%, #14548f 100%); color: #fff; padding: var(--s7) 0; }
.hero h1 { color: #fff; font-size: 38px; max-width: 18ch; }
.hero p { color: #d7e6f4; font-size: 17px; max-width: 62ch; }
.hero .badge { background: rgba(255, 255, 255, .16); color: #fff; }
@media (max-width: 640px) { .hero h1 { font-size: 28px; } }
.stat-strip { display: grid; gap: var(--s4); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat-strip .stat .n { font-size: 30px; font-weight: 700; color: var(--navy); }
.stat-strip .stat .l { font-size: 13px; color: var(--ink-soft); }
@media (max-width: 640px) { .stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.article-card .thumb { height: 150px; border-radius: var(--r) var(--r) 0 0; background: var(--blue-100); }
.prose { max-width: 68ch; }
.prose h2 { margin-top: var(--s5); }
.prose blockquote { margin: var(--s4) 0; padding-left: var(--s4); border-left: 3px solid var(--gold); color: var(--ink-soft); }

/* Footer */
.site-footer { background: var(--navy); color: #c8d8e8; padding: var(--s6) 0; margin-top: var(--s7); font-size: 14px; }
.site-footer a { color: #fff; text-decoration: underline; }
.site-footer h4 { color: #fff; }
.site-footer p, .site-footer .small, .site-footer .muted { color: #c8d8e8; }

/* Utilities */
.hide { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.mt-3 { margin-top: var(--s3); } .mt-4 { margin-top: var(--s4); } .mt-5 { margin-top: var(--s5); }
.gap-2 { gap: var(--s2); } .gap-4 { gap: var(--s4); }
.w-full { width: 100%; }
@media print { .site-header, .subnav, .site-footer, .btn { display: none !important; } body { background: #fff; } }

/* =====================================================================
   Public site additions (home page and other external pages)
   ===================================================================== */

/* Thin institutional bar above the header */
.utility-bar { background: var(--navy); color: #c8d8e8; font-size: 12.5px; }
.utility-bar .wrap { display: flex; justify-content: space-between; gap: var(--s3); padding-top: 6px; padding-bottom: 6px; flex-wrap: wrap; }
.utility-bar a { color: #fff; }

/* White header variant used on public pages (carries the STEP logo) */
.site-header.light {
  background: var(--surface); color: var(--ink); height: 74px;
  border-bottom: 1px solid var(--line); box-shadow: 0 1px 2px rgba(16,32,48,.04);
}
.site-header.light .brand { color: var(--navy); }
.site-header.light .nav a { color: var(--ink); font-weight: 600; }
.site-header.light .nav a:hover { background: var(--blue-100); color: var(--navy); }
.site-header.light .nav a.active { background: var(--blue-100); color: var(--navy); }
.site-header.light .nav-toggle { color: var(--navy); }
@media (max-width: 900px) {
  .site-header.light .nav { background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); }
}
.brand img { height: 50px; width: auto; }
@media (max-width: 640px) { .brand img { height: 42px; } .site-header.light { height: 68px; } }
.site-footer .brand img { height: 66px; margin-bottom: var(--s3); }

/* Hero with a faint circuit motif echoing the logo */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(circle at 85% 15%, rgba(255,255,255,.10) 0 18%, transparent 18.5%),
    radial-gradient(circle at 92% 55%, rgba(255,255,255,.08) 0 10%, transparent 10.5%),
    linear-gradient(135deg, var(--navy) 0%, #14548f 60%, #1f6fb2 100%);
}
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .9fr); gap: var(--s6); align-items: center; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s5); } }
.hero-card { background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.22); border-radius: var(--r-lg); padding: var(--s5); backdrop-filter: blur(2px); }
.hero-card h3 { color: #fff; }
.hero-card .row { border-top: 1px solid rgba(255,255,255,.18); padding-top: var(--s3); margin-top: var(--s3); }
.hero-card .row:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.hero-card .k { color: #d7e6f4; font-size: 14px; }
.hero-card .v { color: #fff; font-weight: 700; font-size: 18px; margin-left: auto; }

/* Partner / context strip */
.trust-bar { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.trust-bar .wrap { display: flex; gap: var(--s5); align-items: center; justify-content: center; flex-wrap: wrap; padding-top: var(--s4); padding-bottom: var(--s4); }
.trust-bar span { font-size: 13px; font-weight: 600; color: var(--ink-soft); letter-spacing: .02em; text-transform: uppercase; }
.trust-bar .sep { color: var(--line); }

/* Section heading with eyebrow */
.section-head { max-width: 70ch; margin-bottom: var(--s5); }
.eyebrow { font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); margin-bottom: var(--s2); }
.section-head h2 { font-size: 26px; }
@media (max-width: 640px) { .section-head h2 { font-size: 22px; } }

/* Horizontal phase timeline */
.phases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); counter-reset: phase; }
@media (max-width: 900px) { .phases { grid-template-columns: minmax(0, 1fr); } }
.phase { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s5); position: relative; }
.phase::before {
  counter-increment: phase; content: counter(phase);
  position: absolute; top: -14px; left: var(--s5);
  width: 30px; height: 30px; border-radius: 50%; background: var(--navy); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: 14px;
}
.phase h3 { margin-top: var(--s3); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s3); }
.chip { font-size: 12px; padding: 3px 9px; border-radius: 999px; background: var(--blue-100); color: var(--navy); font-weight: 600; }

/* Quote */
.quote { background: var(--navy); color: #fff; border-radius: var(--r-lg); padding: var(--s6); }
.quote p { font-size: 19px; line-height: 1.5; }
.quote .who { color: #c8d8e8; font-size: 14px; }

/* Call-to-action band */
.cta-band { background: var(--gold-100); border: 1px solid #ecd9a8; border-radius: var(--r-lg); padding: var(--s6); text-align: center; }
.cta-band h2 { margin-bottom: var(--s2); }

/* Event row */
.event-row { display: flex; gap: var(--s4); align-items: flex-start; padding: var(--s3) 0; border-top: 1px solid var(--line-soft); }
.event-row:first-child { border-top: 0; }
.date-block { flex: 0 0 62px; text-align: center; background: var(--blue-100); border-radius: var(--r); padding: 6px 0; }
.date-block .m { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--blue); }
.date-block .d { font-size: 20px; font-weight: 700; color: var(--navy); line-height: 1.1; }

/* =====================================================================
   Visual home page (photo hero, big numbers, mosaic, team wall)
   ===================================================================== */

/* Photo hero: one statement, nothing else */
.hero-photo {
  position: relative; min-height: calc(78 * var(--vh)); display: grid; align-items: center;
  background: var(--navy) center/cover no-repeat;
  color: #fff; overflow: hidden;
}
.hero-photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(7,35,62,.88) 0%, rgba(7,35,62,.78) 45%, rgba(11,60,107,.94) 100%);
}
.hero-photo > * { position: relative; z-index: 1; }
.hero-photo .eyebrow { color: var(--gold); }
.hero-statement {
  color: #fff; font-weight: 800; letter-spacing: -.02em; line-height: 1.03;
  font-size: clamp(38px, 7.4vw, 92px); max-width: 16ch; margin: 0;
  text-wrap: balance;
}
.hero-statement em { font-style: normal; color: #9ccbf4; }
.scroll-cue {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 1;
  color: #cfe1f2; font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.scroll-cue span { font-size: 20px; animation: cue 1.8s ease-in-out infinite; }
@keyframes cue { 0%, 100% { transform: translateY(0); opacity: .7 } 50% { transform: translateY(5px); opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .scroll-cue span { animation: none } }

/* Big number band */
.numbers { background: var(--surface); border-bottom: 1px solid var(--line); }
.numbers .wrap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); padding: var(--s6) var(--s4); }
.numbers .n { font-size: clamp(34px, 5vw, 56px); font-weight: 800; color: var(--navy); line-height: 1; letter-spacing: -.02em; }
.numbers .l { font-size: 13px; color: var(--ink-soft); margin-top: 6px; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
@media (max-width: 640px) { .numbers .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s5); } }

/* Journey: three visual steps */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); }
@media (max-width: 900px) { .steps { grid-template-columns: minmax(0, 1fr); } }
.step { text-align: center; }
.step .ring {
  width: 92px; height: 92px; margin: 0 auto var(--s3); border-radius: 50%;
  display: grid; place-items: center; background: var(--blue-100); color: var(--navy);
  border: 2px solid #cfe0f1;
}
.step .ring svg { width: 42px; height: 42px; }
.step .weeks { font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.step h3 { font-size: 20px; margin: 6px 0 var(--s2); }
.step p { font-size: 14px; color: var(--ink-soft); max-width: 30ch; margin: 0 auto; }

/* Photo mosaic */
/* Photo mosaic — every tile is 4:3, the photos' own shape, so nothing is
   cropped. The grid's own aspect-ratio sizes the rows: with three equal rows
   and three columns, height works out to three-quarters of the width. */
.mosaic { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
          grid-template-rows: repeat(3, 1fr); aspect-ratio: 4 / 3; gap: var(--s3); }
.mosaic figure { position: relative; margin: 0; border-radius: var(--r); overflow: hidden;
                 background: var(--navy); }
.mosaic img { width: 100%; height: 100%; object-fit: cover; display: block;
              transition: transform .5s cubic-bezier(.25,.7,.3,1); }
.mosaic figure:hover img { transform: scale(1.035); }
.mosaic figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 30px var(--s4) 13px; color: #fff;
  font-size: 14px; font-weight: 650; letter-spacing: .01em; line-height: 1.35;
  background: linear-gradient(180deg, rgba(7,35,62,0) 0%, rgba(7,35,62,.86) 100%);
}
.mosaic .m1 { grid-column: 1 / span 2; grid-row: 1 / span 2; }
.mosaic .m2 { grid-column: 3; grid-row: 1; }
.mosaic .m3 { grid-column: 3; grid-row: 2; }
.mosaic .m4 { grid-column: 1; grid-row: 3; }
.mosaic .m5 { grid-column: 2; grid-row: 3; }
.mosaic .m6 { grid-column: 3; grid-row: 3; }
.mosaic .m1 figcaption { font-size: 16px; padding: 38px var(--s5) 17px; }

@media (max-width: 900px) {
  /* rows follow each tile's own 4:3 instead of a fixed grid height */
  .mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none;
            grid-auto-rows: auto; aspect-ratio: auto; }
  .mosaic figure { grid-column: auto !important; grid-row: auto !important; aspect-ratio: 4 / 3; }
  .mosaic .m1 { grid-column: span 2 !important; }
  .mosaic .m1 figcaption { font-size: 15px; }
}
@media (max-width: 560px) {
  .mosaic { grid-template-columns: minmax(0, 1fr); }
  .mosaic .m1 { grid-column: auto !important; }
}

/* Team wall */
.team-wall { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s3); }
@media (max-width: 900px) { .team-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 640px) { .team-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.team-tile {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: var(--s3); text-align: center; transition: transform .12s ease, box-shadow .12s ease;
}
.team-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow); text-decoration: none; }
.team-tile .avatar { margin: 0 auto 8px; }
.team-tile .nm { font-size: 13.5px; font-weight: 700; color: var(--navy); display: block; }
.team-tile .rg { font-size: 11.5px; color: var(--ink-soft); }

/* Region split */
.regions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); text-align: center; }
.regions .r { background: var(--navy); color: #fff; border-radius: var(--r-lg); padding: var(--s5) var(--s4); }
.regions .r .n { font-size: 40px; font-weight: 800; line-height: 1; }
.regions .r .l { color: #c8d8e8; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; margin-top: 6px; }
@media (max-width: 640px) { .regions { grid-template-columns: minmax(0, 1fr); } }

/* Outcome cards with icon */
.outcome { text-align: center; }
.outcome .ico {
  width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; margin: 0 auto var(--s3);
  background: var(--gold-100); color: #8a6412;
}
.outcome .ico svg { width: 28px; height: 28px; }
.outcome h3 { font-size: 17px; margin-bottom: 4px; }
.outcome p { font-size: 14px; color: var(--ink-soft); margin: 0; }

/* Image-led article card */
.post img { height: 170px; width: 100%; object-fit: cover; }
.post .body { padding: var(--s4); }
.post h3 { font-size: 16px; margin-bottom: 6px; }

/* Utility-bar login + tighter nav for seven tabs */
.utility-bar .util-right { display: flex; gap: var(--s4); align-items: center; }
.utility-bar .util-login { font-weight: 700; border: 1px solid rgba(255,255,255,.45); padding: 2px 10px; border-radius: 999px; }
.utility-bar .util-login:hover { background: rgba(255,255,255,.14); text-decoration: none; }
.site-header.light .nav a { padding: 8px 10px; font-size: 13.5px; }
.site-header.light .nav svg.lock { width: 11px; height: 11px; opacity: .45; margin-left: 4px; vertical-align: -1px; }
@media (max-width: 1100px) { .site-header.light .nav a { padding: 8px 8px; font-size: 13px; } }
@media (max-width: 900px) { .site-header.light .nav a { padding: 10px 12px; font-size: 15px; } }
@media (max-width: 560px) { .utility-bar .wrap { font-size: 11.5px; } }

/* =====================================================================
   Outcomes flow — three cards with a connector, motion on scroll
   ===================================================================== */
/* What teams leave with — a quiet panel between the photographs and the reading */
.outcomes { background: #edf2f8; border: 1px solid #e0e8f1; border-radius: var(--r-lg);
            padding: var(--s7) var(--s6); }
@media (max-width: 640px) { .outcomes { padding: var(--s6) var(--s4); } }
.outcomes .lede { max-width: 58ch; margin-left: auto; margin-right: auto; }

.flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); align-items: stretch; }
@media (max-width: 900px) { .flow { grid-template-columns: minmax(0, 1fr); } }

.oc { position: relative; display: flex; flex-direction: column; overflow: hidden;
      background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
      padding: var(--s5) var(--s5) var(--s4); box-shadow: var(--shadow);
      transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.oc::before {   /* gradient hairline that grows on hover */
  content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 34px;
  background: linear-gradient(90deg, var(--gold), var(--blue));
  transition: width .45s cubic-bezier(.3,.8,.3,1); }
.oc:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(11,60,107,.14); border-color: #cfe0f1; }
.oc:hover::before, .oc:focus-within::before { width: 100%; }

.oc-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); }
.oc-num { font-size: 13px; font-weight: 800; letter-spacing: .16em; color: #c3ced8; transition: color .2s ease; }
.oc:hover .oc-num { color: var(--gold); }
.oc-icon { flex: none; width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center;
           color: #fff; background: linear-gradient(145deg, #1f6fb2 0%, #0b3c6b 100%);
           box-shadow: 0 8px 18px rgba(11,60,107,.22);
           transition: transform .3s cubic-bezier(.3,.8,.3,1), border-radius .3s ease; }
.oc-icon svg { width: 28px; height: 28px; }
.oc:hover .oc-icon { transform: translateY(-2px) rotate(-4deg) scale(1.04); border-radius: 24px; }

.oc h3 { font-size: 19px; line-height: 1.3; margin: var(--s4) 0 7px; color: var(--navy); }
.oc > p { font-size: 14.5px; line-height: 1.65; color: var(--ink-soft); margin: 0 0 var(--s4); }
.oc-list { list-style: none; margin: 0 0 var(--s4); padding: 0; }
.oc-list li { position: relative; font-size: 13.5px; line-height: 1.5; color: var(--ink);
              padding: 8px 0 8px var(--s5); border-top: 1px solid var(--line-soft); }
.oc-list li::before { content: ""; position: absolute; left: 2px; top: 13px; width: 13px; height: 8px;
                      border-left: 2px solid var(--blue); border-bottom: 2px solid var(--blue);
                      border-radius: 1px; transform: rotate(-45deg); }
.oc-foot { margin-top: auto; padding-top: var(--s3); font-size: 11px; font-weight: 800;
           letter-spacing: .12em; text-transform: uppercase; color: #98a3ad; }

.oc-note { display: flex; gap: 10px; align-items: flex-start; max-width: 74ch;
           margin: var(--s5) auto 0; font-size: 14px; line-height: 1.6; color: var(--ink-soft); }
.oc-note svg { flex: none; width: 17px; height: 17px; margin-top: 3px; color: var(--green); }

/* the icon strokes draw themselves in as the card arrives */
.oc .draw { stroke-dasharray: 90; stroke-dashoffset: 90; }
.oc.in .draw { animation: draw 1.1s cubic-bezier(.3,.8,.3,1) forwards; animation-delay: calc(var(--d, 0ms) + 180ms); }
@keyframes draw { to { stroke-dashoffset: 0; } }   /* only hidden when JS can reveal it */
.js .reveal.in {
  opacity: 1; transform: none;
  transition: opacity .65s ease var(--d, 0ms), transform .65s cubic-bezier(.2,.7,.3,1) var(--d, 0ms);
}
@media (prefers-reduced-motion: reduce) {
  .reveal, .js .reveal.in { opacity: 1; transform: none; transition: none; }
  .oc .draw, .oc.in .draw { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
  .flow-link .chev { animation: none; }
  .oc:hover { transform: none; }
  .oc:hover .oc-icon { transform: none; }
}

/* =====================================================================
   Journey band — the 12 weeks as a lit path
   ===================================================================== */
.journey {
  background:
    radial-gradient(900px 300px at 50% -10%, rgba(255,255,255,.10), transparent 60%),
    linear-gradient(160deg, var(--navy) 0%, #0e4478 55%, #135089 100%);
  color: #fff; padding: var(--s7) 0 var(--s6); overflow: hidden;
}
.journey h2 { color: #fff; }
.journey .eyebrow { color: var(--gold); }

.rail-wrap { position: relative; }
.rail {
  position: absolute; top: 38px; left: 12%; right: 12%; height: 3px;
  background: rgba(255,255,255,.16); border-radius: 999px;
}
.rail-fill {
  display: block; height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--gold), #6fb6f0 60%, #fff);
  box-shadow: 0 0 14px rgba(120,190,245,.55);
  transition: width 1.6s cubic-bezier(.25,.8,.3,1) .25s;
}
.rail-wrap.in .rail-fill { width: 100%; }
@media (max-width: 900px) { .rail { display: none; } }

.stops { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--s5); position: relative; }
@media (max-width: 900px) { .stops { grid-template-columns: minmax(0,1fr); gap: var(--s6); } }

.stop { text-align: center; }
.stop .node {
  width: 78px; height: 78px; border-radius: 50%; margin: 0 auto var(--s4);
  display: grid; place-items: center; color: var(--navy); background: #fff;
  box-shadow: 0 0 0 6px rgba(255,255,255,.12), 0 10px 24px rgba(0,0,0,.22);
  transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease;
}
.stop .node svg { width: 34px; height: 34px; }
.stop:hover .node { transform: translateY(-4px) scale(1.06); box-shadow: 0 0 0 8px rgba(255,255,255,.18), 0 14px 30px rgba(0,0,0,.3); }
.stop .weeks { font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.stop h3 { color: #fff; font-size: 21px; margin: 6px 0 var(--s3); }
.journey .chips { justify-content: center; }
.journey .chip {
  background: rgba(255,255,255,.12); color: #e4eefa; border: 1px solid rgba(255,255,255,.16);
  transition: background .2s ease, transform .2s ease;
}
.stop:hover .chip { background: rgba(255,255,255,.2); }

.scale { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s6); color: #b9d2e8; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.scale .line { flex: 1; height: 1px; background: rgba(255,255,255,.2); }

.journey .draw { stroke-dasharray: 80; stroke-dashoffset: 80; }
.journey .stop.in .draw { animation: draw 1.1s cubic-bezier(.3,.8,.3,1) forwards; animation-delay: calc(var(--d, 0ms) + 200ms); }
@media (prefers-reduced-motion: reduce) {
  .rail-fill, .rail-wrap.in .rail-fill { width: 100%; transition: none; }
  .journey .draw, .journey .stop.in .draw { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
  .stop:hover .node { transform: none; }
}

/* Anchor jumps clear the sticky header */
section[id], .journey, .outcomes { scroll-margin-top: 110px; }

/* Vertical rail on phones so the three stops still read as one path */
@media (max-width: 900px) {
  .stops { position: relative; }
  .stops::before {
    content: ""; position: absolute; top: 46px; bottom: 46px; left: 50%; width: 3px;
    transform: translateX(-50%); border-radius: 999px; opacity: .38;
    background: linear-gradient(180deg, var(--gold), #6fb6f0 55%, #fff);
  }
  .stop { position: relative; z-index: 1; }
}

/* =====================================================================
   Program page
   ===================================================================== */

/* Compact photo hero for inner pages */
.page-hero {
  position: relative; background: var(--navy) center/cover no-repeat; color: #fff;
  padding: var(--s7) 0; overflow: hidden;
}
.page-hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(7,35,62,.9) 0%, rgba(7,35,62,.76) 50%, rgba(11,60,107,.94) 100%);
}
.page-hero > * { position: relative; z-index: 1; }
.page-hero h1 { color: #fff; font-size: clamp(30px, 4.6vw, 50px); max-width: 20ch; }
.page-hero p { color: #d7e6f4; max-width: 60ch; font-size: 17px; }
.page-hero .eyebrow { color: var(--gold); }
.facts { display: flex; flex-wrap: wrap; gap: var(--s5); margin-top: var(--s5); }
.facts div { min-width: 96px; }
.facts .n { font-size: 26px; font-weight: 800; line-height: 1; }
.facts .l { font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: #b9d2e8; margin-top: 4px; }

/* Program brief */
.brief { background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--gold); border-radius: var(--r-lg); padding: var(--s6); }
.brief .lead { font-size: 19px; line-height: 1.6; color: var(--ink); max-width: 76ch; }
.brief .lead strong { color: var(--navy); }
.objectives { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--s4); }
@media (max-width: 1000px) { .objectives { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px) { .objectives { grid-template-columns: minmax(0,1fr); } }
.obj { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s5) var(--s4); position: relative; transition: transform .25s ease, box-shadow .25s ease; }
.obj:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.obj .k { font-size: 30px; font-weight: 800; color: var(--blue-100); line-height: 1; }
.obj p { font-size: 14px; color: var(--ink-soft); margin: var(--s2) 0 0; }

/* Zig-zag format rows */
.zig { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s6); align-items: center; }
.zig + .zig { margin-top: var(--s6); }
.zig img { border-radius: var(--r-lg); box-shadow: var(--shadow); aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.zig.flip .zig-media { order: 2; }
@media (max-width: 900px) { .zig { grid-template-columns: minmax(0,1fr); gap: var(--s4); } .zig.flip .zig-media { order: 0; } }
.zig h3 { font-size: 23px; }
.meta-list { list-style: none; margin: var(--s3) 0 0; padding: 0; }
.meta-list li { display: flex; gap: var(--s3); padding: 7px 0; border-top: 1px solid var(--line-soft); font-size: 14px; }
.meta-list li:first-child { border-top: 0; }
.meta-list .k { color: var(--ink-soft); min-width: 104px; }
.meta-list .v { color: var(--ink); font-weight: 600; }

/* Week strip */
.weekstrip { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--s3); align-items: stretch; }
@media (max-width: 900px) { .weekstrip { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 520px) { .weekstrip { grid-template-columns: minmax(0,1fr); } }
.day { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s4); display: flex; flex-direction: column; gap: 4px;
       transition: transform .22s ease, box-shadow .22s ease; }
.day:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(3,20,38,.22); }
.day .d { font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); }
.day .hrs { font-size: clamp(30px, 3.4vw, 40px); font-weight: 800; line-height: 1; color: var(--navy); letter-spacing: -.02em; margin: 6px 0 2px; }
.day .hrs small { font-size: 14px; font-weight: 700; letter-spacing: 0; margin-left: 3px; color: var(--ink-soft); }
.day .t { font-size: 15px; font-weight: 700; color: var(--navy); }
.day .s { font-size: 12.5px; color: var(--ink-soft); line-height: 1.45; }
.day.key { background: linear-gradient(160deg, #ffffff, #eef5fc); border-color: #cfe0f1; }
.day.free { background: rgba(255,255,255,.06); border: 1px dashed rgba(255,255,255,.32); box-shadow: none; }
.day.free:hover { transform: none; box-shadow: none; }
.day.free .d { color: #9ccbf4; }
.day.free .hrs, .day.free .t { color: #fff; }
.day.free .s { color: #c8d8e8; }
.weeknote { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); justify-content: center; margin-top: var(--s5);
            background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.2); border-radius: 999px; padding: var(--s3) var(--s5); }
.weeknote strong { color: #fff; font-size: 17px; }
.weeknote span { color: #c8d8e8; font-size: 14px; }
@media (max-width: 520px) { .weeknote { border-radius: var(--r); text-align: center; justify-content: center; } }

/* Timeline */
.tl { position: relative; padding-left: 26px; }
.tl::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(180deg, var(--gold), var(--blue) 45%, var(--line)); border-radius: 2px; }
.tl-month { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin: var(--s5) 0 var(--s3); position: relative; }
.tl-month:first-child { margin-top: 0; }
.tl-item { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s3) var(--s4); margin-bottom: var(--s2); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.tl-item:hover { transform: translateX(3px); box-shadow: var(--shadow); border-color: #cfe0f1; }
.tl-item::before { content: ""; position: absolute; left: -24px; top: 18px; width: 12px; height: 12px; border-radius: 50%; background: var(--line); border: 2px solid var(--surface); box-shadow: 0 0 0 2px var(--line); }
.tl-item.t-online::before   { background: var(--blue);   box-shadow: 0 0 0 2px #cfe0f1; }
.tl-item.t-mentor::before   { background: #9fb0c0;       box-shadow: 0 0 0 2px #e3e9ef; }
.tl-item.t-feedback::before { background: var(--green);  box-shadow: 0 0 0 2px #c7e3d3; }
.tl-item.t-onsite::before   { background: var(--purple); box-shadow: 0 0 0 2px #ded3f2; }
.tl-item.t-milestone::before{ background: var(--gold);   box-shadow: 0 0 0 2px #ecd9a8; }
.tl-item .when { font-size: 12.5px; font-weight: 700; color: var(--ink-soft); letter-spacing: .03em; }
.tl-item .what { font-weight: 650; color: var(--navy); }
.tl-item .note { font-size: 13px; color: var(--ink-soft); }
.tl-item.t-milestone { border-color: #ecd9a8; background: #fffdf7; }
.legend { display: flex; flex-wrap: wrap; gap: var(--s4); font-size: 13px; color: var(--ink-soft); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

/* Modules accordion */
.mods { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--s4); align-items: start; }
@media (max-width: 900px) { .mods { grid-template-columns: minmax(0,1fr); } }
.modcol { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.modcol > header { padding: var(--s4); border-bottom: 1px solid var(--line-soft); }
.modcol > header .ph { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.modcol > header h3 { margin: 4px 0 0; font-size: 18px; }
details.mod { border-top: 1px solid var(--line-soft); }
details.mod:first-of-type { border-top: 0; }
details.mod summary {
  list-style: none; cursor: pointer; padding: 11px var(--s4); display: flex; gap: var(--s3);
  align-items: baseline; font-size: 14px; color: var(--navy); font-weight: 600;
}
details.mod summary::-webkit-details-marker { display: none; }
details.mod summary::after { content: "+"; margin-left: auto; color: var(--ink-soft); font-weight: 700; }
details.mod[open] summary::after { content: "–"; }
details.mod summary:hover { background: var(--blue-100); }
details.mod .code { font-size: 11.5px; font-weight: 800; color: var(--blue); background: var(--blue-100); border-radius: 5px; padding: 2px 6px; }
details.mod .body { padding: 0 var(--s4) var(--s4) calc(var(--s4) + 34px); font-size: 13.5px; color: var(--ink-soft); }
details.mod .hrs { font-size: 12px; color: var(--ink-soft); }

/* Assessment weights */
.weights { display: flex; height: 44px; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); }
.weights div { display: grid; place-items: center; color: #fff; font-size: 13px; font-weight: 700; }
.w1 { background: var(--navy); } .w2 { background: var(--blue); } .w3 { background: var(--green); } .w4 { background: var(--gold); }
.wkey { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--s4); margin-top: var(--s4); }
@media (max-width: 800px) { .wkey { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.wkey .card { padding: var(--s4); }
.wkey h4 { margin-bottom: 4px; }
.wkey p { font-size: 13px; color: var(--ink-soft); margin: 0; }

/* Section lede (one supporting line under an H2) */
.lede { font-size: 16.5px; line-height: 1.55; margin: 10px 0 0; color: var(--ink-soft); }

/* =====================================================================
   Program hero — no photo. Navy field, engraved grid, spec plate.
   ===================================================================== */
.page-hero.plain { background: linear-gradient(135deg, #072341 0%, #0b3c6b 52%, #10508e 100%); padding: var(--s7) 0 calc(var(--s7) + 8px); }
.page-hero.plain::after {
  background:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.14) 1px, transparent 0) 0 0/26px 26px,
    radial-gradient(900px 420px at 88% 8%, rgba(156,203,244,.20), transparent 62%);
  opacity: .9;
}
.hero-split { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); gap: var(--s7); align-items: center; }
@media (max-width: 940px) { .hero-split { grid-template-columns: minmax(0,1fr); gap: var(--s5); } }
.hero-split .rule { width: 56px; height: 4px; background: var(--gold); border-radius: 2px; margin-bottom: var(--s4); }

/* Spec plate — the programme's key figures as a ruled data sheet */
.spec { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.22); border-radius: var(--r-lg); padding: var(--s3) var(--s5) var(--s4);
        backdrop-filter: blur(2px); }
.spec .cap { font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--gold);
             padding: var(--s3) 0; border-bottom: 1px solid rgba(255,255,255,.22); }
.spec dl { margin: 0; }
.spec .r { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4);
           padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.13); }
.spec .r:last-child { border-bottom: 0; padding-bottom: 4px; }
.spec dt { font-size: 13px; color: #b9d2e8; letter-spacing: .02em; }
.spec dd { margin: 0; text-align: right; color: #fff; font-weight: 700; font-size: 15px; white-space: nowrap; }
.spec dd b { font-size: 27px; font-weight: 800; letter-spacing: -.02em; line-height: 1; margin-right: 5px; }
.spec dd em { font-style: normal; font-weight: 600; color: #cfe3f6; font-size: 13px; }
.spec .r.hi dd b { color: #fff; }
.spec .r.hi dt::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
                         background: var(--gold); margin-right: 8px; vertical-align: middle; }
@media (max-width: 420px) { .spec { padding: var(--s2) var(--s4) var(--s3); } .spec dd b { font-size: 23px; } }

/* =====================================================================
   My Team's Work — member page: team bar, radar dashboard, insight,
   attendance grid, upload zones.
   ===================================================================== */

/* Team identity bar */
.team-bar { background: linear-gradient(135deg, #072341 0%, #0b3c6b 58%, #10508e 100%); color: #fff; padding: var(--s5) 0 var(--s6); }
.team-bar .wrap { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: var(--s5); align-items: center; }
@media (max-width: 800px) { .team-bar .wrap { grid-template-columns: minmax(0,1fr); } }
.team-bar .eyebrow { color: var(--gold); }
.team-bar h1 { color: #fff; font-size: clamp(26px, 3.4vw, 38px); margin-bottom: 6px; }
.team-bar .tech { color: #d7e6f4; font-size: 16px; margin: 0 0 var(--s4); max-width: 60ch; }
.team-bar .chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: #dbeafc;
        background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); border-radius: 999px; padding: 5px 12px; }
.roster { display: flex; align-items: center; }
.roster .avatar { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 800;
                  background: #dceaf8; color: var(--navy); border: 2px solid #0b3c6b; margin-left: -10px; }
.roster .avatar:first-child { margin-left: 0; }
.roster .more { margin-left: var(--s3); font-size: 13px; color: #c8d8e8; }

/* Dashboard shell */
.dash { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); gap: var(--s5); align-items: start; }
@media (max-width: 1020px) { .dash { grid-template-columns: minmax(0,1fr); } }

/* Radar */
.radar-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s5); box-shadow: var(--shadow); }
.radar-wrap { position: relative; }
.radar-wrap svg { width: 100%; height: auto; display: block; overflow: visible; }
.radar-grid { fill: none; stroke: #e3e9ef; stroke-width: 1; }
.radar-grid.outer { stroke: #cfd8e1; }
.radar-spoke { stroke: #e3e9ef; stroke-width: 1; }
.radar-shape { fill: rgba(31,111,178,.18); stroke: var(--blue); stroke-width: 2.5; stroke-linejoin: round;
               transform-origin: center; transform-box: fill-box; }
.js .reveal:not(.in) .radar-shape { transform: scale(.02); opacity: 0; }
.js .reveal.in .radar-shape { animation: radarGrow .9s cubic-bezier(.22,.9,.3,1) forwards; }
@keyframes radarGrow { to { transform: scale(1); opacity: 1; } }
.radar-pt { fill: #fff; stroke: var(--blue); stroke-width: 2.5; cursor: pointer; transition: r .15s ease, stroke .15s ease; }
.radar-pt:hover, .radar-pt:focus { r: 7; stroke: var(--gold); outline: none; }
.radar-ring-label { font-size: 10px; fill: #97a3ae; font-weight: 600; }
.radar-axis-label { font-size: 11px; fill: var(--ink-soft); font-weight: 650; }
.radar-axis-score { font-size: 12.5px; font-weight: 800; fill: var(--navy); }
.radar-tip { position: absolute; pointer-events: none; opacity: 0; transform: translate(-50%, -115%);
             background: var(--navy); color: #fff; border-radius: var(--r-sm); padding: 8px 11px; font-size: 12.5px;
             line-height: 1.4; max-width: 230px; box-shadow: 0 8px 22px rgba(3,20,38,.3); transition: opacity .14s ease; z-index: 5; }
.radar-tip.on { opacity: 1; }
.radar-tip b { display: block; font-size: 13px; margin-bottom: 2px; }
.radar-tip .sc { color: #9ccbf4; font-weight: 800; }
.radar-legend { display: flex; flex-wrap: wrap; gap: var(--s4); justify-content: center; margin-top: var(--s4);
                padding-top: var(--s4); border-top: 1px solid var(--line-soft); font-size: 13px; color: var(--ink-soft); }
.radar-legend b { color: var(--navy); font-size: 17px; font-weight: 800; margin-right: 5px; }

/* Insight card */
.insight { background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--gold); border-radius: var(--r-lg);
           padding: var(--s5); box-shadow: var(--shadow); }
.insight .claim { font-size: 19px; line-height: 1.5; color: var(--navy); font-weight: 650; margin: var(--s3) 0 var(--s4);
                  padding-left: var(--s4); border-left: 3px solid var(--gold); }
.theme { display: grid; grid-template-columns: auto minmax(0,1fr); gap: var(--s3); padding: var(--s3) 0; border-top: 1px solid var(--line-soft); }
.theme .pol { width: 10px; height: 10px; border-radius: 50%; margin-top: 7px; }
.pol.strength { background: var(--green); }
.pol.gap { background: var(--amber); }
.pol.watch { background: var(--purple); }
.theme .nm { font-weight: 650; color: var(--navy); font-size: 14.5px; }
.theme .ct { font-size: 12px; color: var(--ink-soft); font-weight: 600; white-space: nowrap; }
.theme p { font-size: 13.5px; color: var(--ink-soft); margin: 3px 0 0; }
.pquote { border-left: 3px solid var(--line); padding: 2px 0 2px var(--s4); margin: var(--s3) 0; font-size: 13.5px; color: var(--ink); font-style: italic; }
.pquote .src { display: block; font-style: normal; font-size: 12px; color: var(--ink-soft); margin-top: 4px; font-weight: 600; }
.ai-note { display: flex; gap: var(--s2); align-items: flex-start; font-size: 12px; color: var(--ink-soft);
           background: var(--bg); border-radius: var(--r-sm); padding: var(--s3); margin-top: var(--s4); }

/* Score table */
.scores td .heat { min-width: 52px; }
.trend { font-size: 12.5px; font-weight: 700; }
.trend.up { color: var(--green); }
.trend.down { color: var(--red); }
.trend.flat { color: var(--ink-soft); }

/* Attendance */
.att-grid { width: 100%; border-collapse: collapse; }
.att-grid th, .att-grid td { padding: 7px 4px; text-align: center; }
.att-grid th.who, .att-grid td.who { text-align: left; padding-left: 0; white-space: nowrap; font-size: 13.5px; }
.att-grid thead th { font-size: 10.5px; font-weight: 700; color: #dbe7f3; letter-spacing: .04em; }
.att-grid thead th.who, .att-grid thead th:last-child { color: #fff; font-size: 12px; }
.att-grid tbody tr + tr td { border-top: 1px solid var(--line-soft); }
.mark { display: inline-block; width: 15px; height: 15px; border-radius: 4px; }
.mark.yes { background: #bfe0cc; }
.mark.no  { background: #f3d6d7; }
.att-foot { display: flex; flex-wrap: wrap; gap: var(--s4); align-items: center; font-size: 13px; color: var(--ink-soft); margin-top: var(--s4); }
.att-foot .key { display: inline-flex; align-items: center; gap: 6px; }
.att-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Let wide tables scroll sideways on a phone instead of squashing into unreadable columns */
.att-scroll > table { min-width: 660px; }
@media (max-width: 720px) { .att-scroll { box-shadow: inset -14px 0 12px -12px rgba(11,60,107,.25); } }

/* Upload zones */
.drops { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s4); }
@media (max-width: 760px) { .drops { grid-template-columns: minmax(0,1fr); } }
.drop { border: 2px dashed var(--line); border-radius: var(--r-lg); background: var(--bg); padding: var(--s5);
        text-align: center; transition: border-color .18s ease, background .18s ease, transform .18s ease; position: relative; }
.drop:hover, .drop.over { border-color: var(--blue); background: var(--blue-100); }
.drop.over { transform: scale(1.01); }
.drop.filled { border-style: solid; border-color: var(--green); background: var(--green-100); text-align: left; }
.drop .ico { width: 46px; height: 46px; margin: 0 auto var(--s3); color: var(--blue); }
.drop h4 { margin-bottom: 4px; }
.drop .hint { font-size: 12.5px; color: var(--ink-soft); margin: 0; }
.drop input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.drop:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(31,111,178,.18); }
.filerow { display: flex; align-items: center; gap: var(--s3); text-align: left; }
.filerow .fi { width: 38px; height: 38px; border-radius: var(--r-sm); background: #fff; display: grid; place-items: center; color: var(--green); flex: none; }
.filerow .nm { font-weight: 650; font-size: 14px; color: var(--navy); word-break: break-all; }
.filerow .mt { font-size: 12px; color: var(--ink-soft); }
.filerow .rm { margin-left: auto; background: none; border: 0; color: var(--ink-soft); font-size: 18px; cursor: pointer; line-height: 1;
               padding: 4px 8px; border-radius: var(--r-sm);
               position: relative; z-index: 2; }   /* above the invisible file input, so it stays clickable */
.filerow .rm:hover { color: var(--red); }
.bar { height: 5px; border-radius: 3px; background: #cfe0d8; overflow: hidden; margin-top: 8px; }
.bar i { display: block; height: 100%; background: var(--green); width: 0; transition: width .5s ease; }
.due { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; justify-content: space-between;
       background: var(--gold-100); border: 1px solid #efdfb8; border-radius: var(--r); padding: var(--s3) var(--s4); margin-bottom: var(--s4); }
.due strong { color: #7a5a12; }
.mockup-note { font-size: 12px; color: var(--ink-soft); margin-top: var(--s3); }

/* =====================================================================
   Capstone — FASTRAC proposal builder + pitch deck storyboard
   ===================================================================== */

/* Two-artifact header */
.cap-head { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s4); }
@media (max-width: 820px) { .cap-head { grid-template-columns: minmax(0,1fr); } }
.cap-art { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.22); border-radius: var(--r-lg); padding: var(--s4) var(--s5); }
.cap-art .k { font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.cap-art .v { font-size: clamp(26px, 3vw, 34px); font-weight: 800; color: #fff; line-height: 1.1; margin: 6px 0 2px; }
.cap-art .v small { font-size: 15px; font-weight: 600; color: #c8d8e8; margin-left: 4px; }
.cap-art .s { font-size: 13px; color: #c8d8e8; }
.cap-meter { height: 8px; border-radius: 5px; background: rgba(255,255,255,.16); overflow: hidden; margin: 10px 0 8px; }
.cap-meter i { display: block; height: 100%; background: linear-gradient(90deg, #9ccbf4, var(--gold)); width: 0; transition: width 1.1s cubic-bezier(.22,.9,.3,1); }

/* "This week" cards */
.nowcards { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s4); }
@media (max-width: 760px) { .nowcards { grid-template-columns: minmax(0,1fr); } }
.nowcard { background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--gold); border-radius: var(--r-lg);
           padding: var(--s5); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 6px; }
.nowcard .tag { font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.nowcard h3 { margin: 0; }
.nowcard p { color: var(--ink-soft); font-size: 14px; margin: 0; }
.nowcard .btn { align-self: flex-start; margin-top: var(--s3); }

/* Segmented control */
.seg { display: inline-flex; background: var(--line-soft); border-radius: 999px; padding: 4px; gap: 2px; }
.seg button { border: 0; background: none; font: inherit; font-weight: 650; font-size: 14.5px; color: var(--ink-soft);
              padding: 9px 20px; border-radius: 999px; cursor: pointer; transition: background .18s ease, color .18s ease; }
.seg button[aria-selected="true"] { background: var(--navy); color: #fff; }
.seg button:hover:not([aria-selected="true"]) { color: var(--navy); }

/* 24-segment proposal bar */
.itembar { display: grid; grid-template-columns: repeat(24, minmax(0,1fr)); gap: 3px; }
@media (max-width: 640px) { .itembar { grid-template-columns: repeat(12, minmax(0,1fr)); } }
.itembar button { height: 34px; border: 0; border-radius: var(--r-sm); cursor: pointer; font-size: 10px; font-weight: 800;
                  color: #fff; background: var(--line); transition: transform .15s ease, box-shadow .15s ease; padding: 0; }
.itembar button:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.itembar button[aria-current="true"] { outline: 2px solid var(--navy); outline-offset: 2px; }
.st-reviewed  { background: #1c4e3b !important; }
.st-submitted { background: var(--green) !important; }
.st-draft     { background: #7fb0d8 !important; }
.st-revise    { background: var(--amber) !important; }
.st-open      { background: var(--gold) !important; }
.st-locked    { background: #dfe5eb !important; color: #93a1ad !important; }
.barkey { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s4); font-size: 12.5px; color: var(--ink-soft); margin-top: var(--s3); }
.barkey span { display: inline-flex; align-items: center; gap: 6px; }
.barkey i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

/* Proposal workspace */
.work { display: grid; grid-template-columns: minmax(0,320px) minmax(0,1fr); gap: var(--s5); align-items: start; }
@media (max-width: 960px) { .work { grid-template-columns: minmax(0,1fr); } }
.itemlist { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); }
.itemlist .grp { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft);
                 background: var(--bg); padding: 9px var(--s4); border-top: 1px solid var(--line-soft); }
.itemlist .grp:first-child { border-top: 0; }
.itemlist button { display: flex; gap: var(--s3); align-items: flex-start; width: 100%; text-align: left; border: 0; background: none;
                   font: inherit; padding: 11px var(--s4); cursor: pointer; border-top: 1px solid var(--line-soft); transition: background .15s ease; }
.itemlist button:hover { background: var(--blue-100); }
.itemlist button[aria-current="true"] { background: var(--blue-100); box-shadow: inset 3px 0 0 var(--navy); }
.itemlist .num { flex: none; width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center;
                 font-size: 11px; font-weight: 800; color: #fff; background: var(--line); }
.itemlist .ti { display: block; font-size: 13.5px; font-weight: 600; color: var(--navy); line-height: 1.35; }
.itemlist .wk { display: block; font-size: 11.5px; color: var(--ink-soft); margin-top: 2px; }
/* Keep the 24-item list beside the editor instead of running far past it */
@media (min-width: 961px) {
  .itemlist { max-height: calc(100 * var(--vh) - var(--header-h) - 48px); overflow-y: auto;
              position: sticky; top: calc(var(--header-h) + 16px); }
}
.itemlist button.is-locked .ti { color: var(--ink-soft); font-weight: 500; }

/* Editor pane */
.editor { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s5); box-shadow: var(--shadow); }
.editor .ehead { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: baseline; justify-content: space-between; }
.editor h3 { margin: 0; }
.guide { background: var(--bg); border-left: 3px solid var(--blue); border-radius: 0 var(--r-sm) var(--r-sm) 0;
         padding: var(--s3) var(--s4); font-size: 13.5px; color: var(--ink-soft); margin: var(--s4) 0; }
.guide b { color: var(--navy); display: block; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 4px; }
.from { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-soft);
        background: var(--blue-100); border-radius: 999px; padding: 5px 12px; }
.editor textarea { width: 100%; min-height: 220px; font: inherit; font-size: 14.5px; line-height: 1.6; color: var(--ink);
                   border: 1px solid var(--line); border-radius: var(--r); padding: var(--s4); resize: vertical; background: #fff; }
.editor textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(31,111,178,.15); }
.editor textarea:disabled { background: var(--bg); color: var(--ink-soft); }
.ebar { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; justify-content: space-between; margin-top: var(--s3); }
.wc { font-size: 13px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.wc.over { color: var(--red); font-weight: 700; }
.saved { font-size: 12.5px; color: var(--green); opacity: 0; transition: opacity .3s ease; }
.saved.on { opacity: 1; }
.locknote { display: flex; gap: var(--s3); align-items: center; background: var(--bg); border: 1px dashed var(--line);
            border-radius: var(--r); padding: var(--s5); color: var(--ink-soft); font-size: 14px; }
.revise-note { background: var(--amber-100); border: 1px solid #f0dcb6; border-radius: var(--r); padding: var(--s3) var(--s4);
               font-size: 13.5px; color: #7a5a12; margin: var(--s4) 0; }

/* Sub-part checklist (item 9, item 24) */
.subparts { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 6px var(--s4); margin: var(--s4) 0 0; padding: 0; list-style: none; }
@media (max-width: 640px) { .subparts { grid-template-columns: minmax(0,1fr); } }
.subparts li { display: flex; gap: var(--s2); align-items: flex-start; font-size: 13.5px; color: var(--ink-soft); }
.subparts .tick { flex: none; width: 17px; height: 17px; border-radius: 5px; display: grid; place-items: center; margin-top: 1px;
                  background: var(--line-soft); color: #97a3ae; font-size: 11px; font-weight: 800; }
.subparts li.on .tick { background: var(--green-100); color: var(--green); }
.subparts li.on { color: var(--ink); }
.subparts li.na .tick { background: var(--line-soft); color: #b6c0ca; }

/* Readiness check */
.ready li { display: flex; gap: var(--s3); align-items: flex-start; padding: 9px 0; border-top: 1px solid var(--line-soft); font-size: 14px; }
.ready li:first-child { border-top: 0; }
.ready .ic { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #fff; }
.ready .ok  .ic { background: var(--green); }
.ready .warn .ic { background: var(--amber); }
.ready .bad .ic { background: var(--red); }

/* Deck storyboard */
.film { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--s4); }
.frame { display: block; border: 0; background: none; padding: 0; font: inherit; text-align: left; cursor: pointer; width: 100%; }
.frame .thumb { display: block; aspect-ratio: 16 / 9; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line);
                background: #fff; box-shadow: var(--shadow); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.frame:hover .thumb { transform: translateY(-5px); box-shadow: 0 14px 30px rgba(11,60,107,.2); border-color: #cfe0f1; }
.frame[aria-current="true"] .thumb { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(11,60,107,.18); }
.frame .thumb svg { width: 100%; height: 100%; display: block; }
.frame.empty .thumb { border-style: dashed; background: var(--bg); display: grid; place-items: center; }
.frame .cap { display: flex; gap: var(--s2); align-items: baseline; margin-top: 9px; }
.frame .no { font-size: 11px; font-weight: 800; color: var(--ink-soft); flex: none; }
.frame .nm { font-size: 13.5px; font-weight: 650; color: var(--navy); line-height: 1.3; }
.frame.empty .nm { color: var(--ink-soft); font-weight: 500; }
.frame .sub { display: block; font-size: 12px; color: var(--ink-soft); margin-left: 22px; }
.frame .sc { display: block; margin-left: 22px; margin-top: 4px; }

/* Deck viewer */
.stage { background: #08223c; border-radius: var(--r-lg); padding: var(--s5); display: grid; gap: var(--s4);
         max-width: 840px; margin: 0 auto; width: 100%; }
.stage .screen { aspect-ratio: 16 / 9; background: #fff; border-radius: var(--r); overflow: hidden; }
.stage .screen svg { width: 100%; height: 100%; display: block; }
.stage .bar { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; justify-content: space-between; background: none; height: auto; }
.stage .who { color: #fff; font-weight: 650; }
.stage .who small { display: block; color: #9fc3e4; font-weight: 500; font-size: 12.5px; }
.stage .nav { display: flex; gap: var(--s2); }
.stage .nav button { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.24); color: #fff; border-radius: var(--r-sm);
                     width: 40px; height: 36px; font-size: 16px; cursor: pointer; }
.stage .nav button:hover:not(:disabled) { background: rgba(255,255,255,.22); }
.stage .nav button:disabled { opacity: .35; cursor: default; }

/* =====================================================================
   FASTRAC proposal preview — the team's answers on the real DOST form
   ===================================================================== */
/* Docked to the right so the editor stays usable and the form fills in as you type */
.sheetwrap { position: fixed; top: 0; right: 0; bottom: 0; z-index: 90; width: min(52%, 880px);
             background: #223546; overflow-y: auto; padding: 0 0 var(--s6);
             box-shadow: -12px 0 44px rgba(3,16,30,.4); }
.sheetwrap[hidden] { display: none; }
body.sheet-open { padding-right: min(52%, 880px); }
@media (max-width: 1000px) {
  .sheetwrap { width: 100%; }
  body.sheet-open { padding-right: 0; overflow: hidden; }
}
/* the item the team is editing, flagged on the paper */
.sheet .box.hot, .sheet .split.hot { box-shadow: inset 0 0 0 2px #c99a2e; }
.sheet .box.hot { background: #fffbf0; }
.sheettools { position: sticky; top: 0; z-index: 2; background: var(--navy); color: #fff; padding: var(--s3) var(--s4);
              display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; justify-content: space-between; }
.sheettools .t { font-weight: 700; font-size: 15px; }
.sheettools .t small { display: block; font-weight: 500; font-size: 12.5px; color: #c8d8e8; }
.sheettools .acts { display: flex; gap: var(--s2); }
.sheettools button { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28); color: #fff;
                     font: inherit; font-size: 14px; font-weight: 600; border-radius: var(--r-sm); padding: 8px 14px; cursor: pointer; }
.sheettools button:hover { background: rgba(255,255,255,.24); }
.sheettools button.primary { background: var(--gold); border-color: var(--gold); color: #2e2003; }

/* The paper itself — a faithful replica of DOST Form 2's ruled boxes */
.sheet { width: calc(100% - 28px); max-width: 860px; margin: var(--s4) auto 0; background: #fff; color: #000;
         font-family: Arial, Helvetica, sans-serif; font-size: 10.5pt; line-height: 1.32;
         padding: 40px 44px 56px; box-shadow: 0 18px 50px rgba(0,0,0,.35); }
@media (max-width: 560px) { .sheet { padding: 20px 14px 32px; font-size: 9pt; } }

.sheet .dochead { display: grid; grid-template-columns: 96px minmax(0,1fr) 96px; align-items: center; margin-bottom: 12px; }
.sheet .dochead img { width: 76px; height: auto; }
.sheet .dochead .ti { text-align: center; }
.sheet .dochead .ti .l1 { font-weight: 700; font-size: 10.5pt; }
.sheet .dochead .ti .l2 { font-weight: 700; font-size: 13pt; }
.sheet .draftnote { text-align: center; font-size: 8.5pt; color: #666; margin: 0 0 10px; letter-spacing: .04em; text-transform: uppercase; }

/* Every item is a ruled box, exactly as the Word original */
.sheet .frame { border: 1px solid #000; }
.sheet .frame + .frame { border-top: 0; }
.sheet .box { border-bottom: 1px solid #000; padding: 4px 7px 6px; }
.sheet .box:last-child { border-bottom: 0; }
.sheet .no { font-weight: 700; }
.sheet .fine { font-weight: 400; font-size: 8.5pt; }
.sheet .red { color: #e8192c; }
.sheet .sub { font-weight: 700; margin-top: 2px; }
.sheet .hint { font-size: 8pt; line-height: 1.3; color: #000; text-align: justify; margin: 2px 0 0; }
.sheet .split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
.sheet .split > div { padding: 4px 7px 6px; }
.sheet .split > div + div { border-left: 1px solid #000; }
.sheet .idt { padding-left: 22px; }

/* What the team wrote — clearly theirs, not the form's */
.sheet .ans { color: #0b3c6b; margin: 3px 0 2px; text-align: justify; white-space: pre-wrap; }
.sheet .ans:empty { display: none; }
.sheet .inline { color: #0b3c6b; }
.sheet .todo { color: #9aa2ab; font-style: italic; font-size: 9pt; }
.sheet .rule { display: inline-block; min-width: 190px; border-bottom: 1px solid #000; }
.sheet .tick { font-family: "DejaVu Sans", Arial, sans-serif; }

/* The form's own tables */
.sheet table.g { width: 100%; border-collapse: collapse; font-size: 9pt; }
.sheet table.g th, .sheet table.g td { border: 1px solid #000; padding: 3px 5px; text-align: center; vertical-align: middle; height: 18px; }
.sheet table.g th { background: #fff; color: #000; font-weight: 700; font-size: 8.5pt; }
.sheet table.g th.red { color: #e8192c; }
.sheet table.g td.l { text-align: left; }
.sheet table.g td.ans, .sheet table.g td .ans { color: #0b3c6b; }
.sheet .nb { border: 0 !important; }
.sheet .certify { font-weight: 700; text-align: justify; margin: 16px 0 12px; font-size: 10pt; }
.sheet .pagebreak { height: 26px; }
.sheet .footnote { font-size: 8pt; font-style: italic; margin-top: 3px; }

@media print { .site-header, .subnav, .site-footer, .btn { display: none !important; } body { background: #fff; } }

/* =====================================================================
   Public site additions (home page and other external pages)
   ===================================================================== */

/* Thin institutional bar above the header */
.utility-bar { background: var(--navy); color: #c8d8e8; font-size: 12.5px; }
.utility-bar .wrap { display: flex; justify-content: space-between; gap: var(--s3); padding-top: 6px; padding-bottom: 6px; flex-wrap: wrap; }
.utility-bar a { color: #fff; }

/* White header variant used on public pages (carries the STEP logo) */
.site-header.light {
  background: var(--surface); color: var(--ink); height: 74px;
  border-bottom: 1px solid var(--line); box-shadow: 0 1px 2px rgba(16,32,48,.04);
}
.site-header.light .brand { color: var(--navy); }
.site-header.light .nav a { color: var(--ink); font-weight: 600; }
.site-header.light .nav a:hover { background: var(--blue-100); color: var(--navy); }
.site-header.light .nav a.active { background: var(--blue-100); color: var(--navy); }
.site-header.light .nav-toggle { color: var(--navy); }
@media (max-width: 900px) {
  .site-header.light .nav { background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); }
}
.brand img { height: 50px; width: auto; }
@media (max-width: 640px) { .brand img { height: 42px; } .site-header.light { height: 68px; } }
.site-footer .brand img { height: 66px; margin-bottom: var(--s3); }

/* Hero with a faint circuit motif echoing the logo */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(circle at 85% 15%, rgba(255,255,255,.10) 0 18%, transparent 18.5%),
    radial-gradient(circle at 92% 55%, rgba(255,255,255,.08) 0 10%, transparent 10.5%),
    linear-gradient(135deg, var(--navy) 0%, #14548f 60%, #1f6fb2 100%);
}
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .9fr); gap: var(--s6); align-items: center; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s5); } }
.hero-card { background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.22); border-radius: var(--r-lg); padding: var(--s5); backdrop-filter: blur(2px); }
.hero-card h3 { color: #fff; }
.hero-card .row { border-top: 1px solid rgba(255,255,255,.18); padding-top: var(--s3); margin-top: var(--s3); }
.hero-card .row:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.hero-card .k { color: #d7e6f4; font-size: 14px; }
.hero-card .v { color: #fff; font-weight: 700; font-size: 18px; margin-left: auto; }

/* Partner / context strip */
.trust-bar { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.trust-bar .wrap { display: flex; gap: var(--s5); align-items: center; justify-content: center; flex-wrap: wrap; padding-top: var(--s4); padding-bottom: var(--s4); }
.trust-bar span { font-size: 13px; font-weight: 600; color: var(--ink-soft); letter-spacing: .02em; text-transform: uppercase; }
.trust-bar .sep { color: var(--line); }

/* Section heading with eyebrow */
.section-head { max-width: 70ch; margin-bottom: var(--s5); }
.eyebrow { font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); margin-bottom: var(--s2); }
.section-head h2 { font-size: 26px; }
@media (max-width: 640px) { .section-head h2 { font-size: 22px; } }

/* Horizontal phase timeline */
.phases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); counter-reset: phase; }
@media (max-width: 900px) { .phases { grid-template-columns: minmax(0, 1fr); } }
.phase { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s5); position: relative; }
.phase::before {
  counter-increment: phase; content: counter(phase);
  position: absolute; top: -14px; left: var(--s5);
  width: 30px; height: 30px; border-radius: 50%; background: var(--navy); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: 14px;
}
.phase h3 { margin-top: var(--s3); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s3); }
.chip { font-size: 12px; padding: 3px 9px; border-radius: 999px; background: var(--blue-100); color: var(--navy); font-weight: 600; }

/* Quote */
.quote { background: var(--navy); color: #fff; border-radius: var(--r-lg); padding: var(--s6); }
.quote p { font-size: 19px; line-height: 1.5; }
.quote .who { color: #c8d8e8; font-size: 14px; }

/* Call-to-action band */
.cta-band { background: var(--gold-100); border: 1px solid #ecd9a8; border-radius: var(--r-lg); padding: var(--s6); text-align: center; }
.cta-band h2 { margin-bottom: var(--s2); }

/* Event row */
.event-row { display: flex; gap: var(--s4); align-items: flex-start; padding: var(--s3) 0; border-top: 1px solid var(--line-soft); }
.event-row:first-child { border-top: 0; }
.date-block { flex: 0 0 62px; text-align: center; background: var(--blue-100); border-radius: var(--r); padding: 6px 0; }
.date-block .m { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--blue); }
.date-block .d { font-size: 20px; font-weight: 700; color: var(--navy); line-height: 1.1; }

/* =====================================================================
   Visual home page (photo hero, big numbers, mosaic, team wall)
   ===================================================================== */

/* Photo hero: one statement, nothing else */
.hero-photo {
  position: relative; min-height: calc(78 * var(--vh)); display: grid; align-items: center;
  background: var(--navy) center/cover no-repeat;
  color: #fff; overflow: hidden;
}
.hero-photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(7,35,62,.88) 0%, rgba(7,35,62,.78) 45%, rgba(11,60,107,.94) 100%);
}
.hero-photo > * { position: relative; z-index: 1; }
.hero-photo .eyebrow { color: var(--gold); }
.hero-statement {
  color: #fff; font-weight: 800; letter-spacing: -.02em; line-height: 1.03;
  font-size: clamp(38px, 7.4vw, 92px); max-width: 16ch; margin: 0;
  text-wrap: balance;
}
.hero-statement em { font-style: normal; color: #9ccbf4; }
.scroll-cue {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 1;
  color: #cfe1f2; font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.scroll-cue span { font-size: 20px; animation: cue 1.8s ease-in-out infinite; }
@keyframes cue { 0%, 100% { transform: translateY(0); opacity: .7 } 50% { transform: translateY(5px); opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .scroll-cue span { animation: none } }

/* Big number band */
.numbers { background: var(--surface); border-bottom: 1px solid var(--line); }
.numbers .wrap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); padding: var(--s6) var(--s4); }
.numbers .n { font-size: clamp(34px, 5vw, 56px); font-weight: 800; color: var(--navy); line-height: 1; letter-spacing: -.02em; }
.numbers .l { font-size: 13px; color: var(--ink-soft); margin-top: 6px; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
@media (max-width: 640px) { .numbers .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s5); } }

/* Journey: three visual steps */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); }
@media (max-width: 900px) { .steps { grid-template-columns: minmax(0, 1fr); } }
.step { text-align: center; }
.step .ring {
  width: 92px; height: 92px; margin: 0 auto var(--s3); border-radius: 50%;
  display: grid; place-items: center; background: var(--blue-100); color: var(--navy);
  border: 2px solid #cfe0f1;
}
.step .ring svg { width: 42px; height: 42px; }
.step .weeks { font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.step h3 { font-size: 20px; margin: 6px 0 var(--s2); }
.step p { font-size: 14px; color: var(--ink-soft); max-width: 30ch; margin: 0 auto; }

/* Team wall */
.team-wall { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s3); }
@media (max-width: 900px) { .team-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 640px) { .team-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.team-tile {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: var(--s3); text-align: center; transition: transform .12s ease, box-shadow .12s ease;
}
.team-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow); text-decoration: none; }
.team-tile .avatar { margin: 0 auto 8px; }
.team-tile .nm { font-size: 13.5px; font-weight: 700; color: var(--navy); display: block; }
.team-tile .rg { font-size: 11.5px; color: var(--ink-soft); }

/* Region split */
.regions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); text-align: center; }
.regions .r { background: var(--navy); color: #fff; border-radius: var(--r-lg); padding: var(--s5) var(--s4); }
.regions .r .n { font-size: 40px; font-weight: 800; line-height: 1; }
.regions .r .l { color: #c8d8e8; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; margin-top: 6px; }
@media (max-width: 640px) { .regions { grid-template-columns: minmax(0, 1fr); } }

/* Outcome cards with icon */
.outcome { text-align: center; }
.outcome .ico {
  width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; margin: 0 auto var(--s3);
  background: var(--gold-100); color: #8a6412;
}
.outcome .ico svg { width: 28px; height: 28px; }
.outcome h3 { font-size: 17px; margin-bottom: 4px; }
.outcome p { font-size: 14px; color: var(--ink-soft); margin: 0; }

/* Image-led article card */
.post img { height: 170px; width: 100%; object-fit: cover; }
.post .body { padding: var(--s4); }
.post h3 { font-size: 16px; margin-bottom: 6px; }

/* Utility-bar login + tighter nav for seven tabs */
.utility-bar .util-right { display: flex; gap: var(--s4); align-items: center; }
.utility-bar .util-login { font-weight: 700; border: 1px solid rgba(255,255,255,.45); padding: 2px 10px; border-radius: 999px; }
.utility-bar .util-login:hover { background: rgba(255,255,255,.14); text-decoration: none; }
.site-header.light .nav a { padding: 8px 10px; font-size: 13.5px; }
.site-header.light .nav svg.lock { width: 11px; height: 11px; opacity: .45; margin-left: 4px; vertical-align: -1px; }
@media (max-width: 1100px) { .site-header.light .nav a { padding: 8px 8px; font-size: 13px; } }
@media (max-width: 900px) { .site-header.light .nav a { padding: 10px 12px; font-size: 15px; } }
@media (max-width: 560px) { .utility-bar .wrap { font-size: 11.5px; } }

/* =====================================================================
   Outcomes flow — three cards with a connector, motion on scroll
   ===================================================================== */
   /* only hidden when JS can reveal it */
.js .reveal.in {
  opacity: 1; transform: none;
  transition: opacity .65s ease var(--d, 0ms), transform .65s cubic-bezier(.2,.7,.3,1) var(--d, 0ms);
}
@media (prefers-reduced-motion: reduce) {
  .reveal, .js .reveal.in { opacity: 1; transform: none; transition: none; }
  .oc .draw, .oc.in .draw { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
  .flow-link .chev { animation: none; }
  .oc:hover { transform: none; }
  .oc:hover .oc-icon { transform: none; }
}

/* =====================================================================
   Journey band — the 12 weeks as a lit path
   ===================================================================== */
.journey {
  background:
    radial-gradient(900px 300px at 50% -10%, rgba(255,255,255,.10), transparent 60%),
    linear-gradient(160deg, var(--navy) 0%, #0e4478 55%, #135089 100%);
  color: #fff; padding: var(--s7) 0 var(--s6); overflow: hidden;
}
.journey h2 { color: #fff; }
.journey .eyebrow { color: var(--gold); }

.rail-wrap { position: relative; }
.rail {
  position: absolute; top: 38px; left: 12%; right: 12%; height: 3px;
  background: rgba(255,255,255,.16); border-radius: 999px;
}
.rail-fill {
  display: block; height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--gold), #6fb6f0 60%, #fff);
  box-shadow: 0 0 14px rgba(120,190,245,.55);
  transition: width 1.6s cubic-bezier(.25,.8,.3,1) .25s;
}
.rail-wrap.in .rail-fill { width: 100%; }
@media (max-width: 900px) { .rail { display: none; } }

.stops { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--s5); position: relative; }
@media (max-width: 900px) { .stops { grid-template-columns: minmax(0,1fr); gap: var(--s6); } }

.stop { text-align: center; }
.stop .node {
  width: 78px; height: 78px; border-radius: 50%; margin: 0 auto var(--s4);
  display: grid; place-items: center; color: var(--navy); background: #fff;
  box-shadow: 0 0 0 6px rgba(255,255,255,.12), 0 10px 24px rgba(0,0,0,.22);
  transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease;
}
.stop .node svg { width: 34px; height: 34px; }
.stop:hover .node { transform: translateY(-4px) scale(1.06); box-shadow: 0 0 0 8px rgba(255,255,255,.18), 0 14px 30px rgba(0,0,0,.3); }
.stop .weeks { font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.stop h3 { color: #fff; font-size: 21px; margin: 6px 0 var(--s3); }
.journey .chips { justify-content: center; }
.journey .chip {
  background: rgba(255,255,255,.12); color: #e4eefa; border: 1px solid rgba(255,255,255,.16);
  transition: background .2s ease, transform .2s ease;
}
.stop:hover .chip { background: rgba(255,255,255,.2); }

.scale { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s6); color: #b9d2e8; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.scale .line { flex: 1; height: 1px; background: rgba(255,255,255,.2); }

.journey .draw { stroke-dasharray: 80; stroke-dashoffset: 80; }
.journey .stop.in .draw { animation: draw 1.1s cubic-bezier(.3,.8,.3,1) forwards; animation-delay: calc(var(--d, 0ms) + 200ms); }
@media (prefers-reduced-motion: reduce) {
  .rail-fill, .rail-wrap.in .rail-fill { width: 100%; transition: none; }
  .journey .draw, .journey .stop.in .draw { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
  .stop:hover .node { transform: none; }
}

/* Anchor jumps clear the sticky header */
section[id], .journey, .outcomes { scroll-margin-top: 110px; }

/* Vertical rail on phones so the three stops still read as one path */
@media (max-width: 900px) {
  .stops { position: relative; }
  .stops::before {
    content: ""; position: absolute; top: 46px; bottom: 46px; left: 50%; width: 3px;
    transform: translateX(-50%); border-radius: 999px; opacity: .38;
    background: linear-gradient(180deg, var(--gold), #6fb6f0 55%, #fff);
  }
  .stop { position: relative; z-index: 1; }
}

/* =====================================================================
   Program page
   ===================================================================== */

/* Compact photo hero for inner pages */
.page-hero {
  position: relative; background: var(--navy) center/cover no-repeat; color: #fff;
  padding: var(--s7) 0; overflow: hidden;
}
.page-hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(7,35,62,.9) 0%, rgba(7,35,62,.76) 50%, rgba(11,60,107,.94) 100%);
}
.page-hero > * { position: relative; z-index: 1; }
.page-hero h1 { color: #fff; font-size: clamp(30px, 4.6vw, 50px); max-width: 20ch; }
.page-hero p { color: #d7e6f4; max-width: 60ch; font-size: 17px; }
.page-hero .eyebrow { color: var(--gold); }
.facts { display: flex; flex-wrap: wrap; gap: var(--s5); margin-top: var(--s5); }
.facts div { min-width: 96px; }
.facts .n { font-size: 26px; font-weight: 800; line-height: 1; }
.facts .l { font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: #b9d2e8; margin-top: 4px; }

/* Program brief */
.brief { background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--gold); border-radius: var(--r-lg); padding: var(--s6); }
.brief .lead { font-size: 19px; line-height: 1.6; color: var(--ink); max-width: 76ch; }
.brief .lead strong { color: var(--navy); }
.objectives { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--s4); }
@media (max-width: 1000px) { .objectives { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px) { .objectives { grid-template-columns: minmax(0,1fr); } }
.obj { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s5) var(--s4); position: relative; transition: transform .25s ease, box-shadow .25s ease; }
.obj:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.obj .k { font-size: 30px; font-weight: 800; color: var(--blue-100); line-height: 1; }
.obj p { font-size: 14px; color: var(--ink-soft); margin: var(--s2) 0 0; }

/* Zig-zag format rows */
.zig { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s6); align-items: center; }
.zig + .zig { margin-top: var(--s6); }
.zig img { border-radius: var(--r-lg); box-shadow: var(--shadow); aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.zig.flip .zig-media { order: 2; }
@media (max-width: 900px) { .zig { grid-template-columns: minmax(0,1fr); gap: var(--s4); } .zig.flip .zig-media { order: 0; } }
.zig h3 { font-size: 23px; }
.meta-list { list-style: none; margin: var(--s3) 0 0; padding: 0; }
.meta-list li { display: flex; gap: var(--s3); padding: 7px 0; border-top: 1px solid var(--line-soft); font-size: 14px; }
.meta-list li:first-child { border-top: 0; }
.meta-list .k { color: var(--ink-soft); min-width: 104px; }
.meta-list .v { color: var(--ink); font-weight: 600; }

/* Week strip */
.weekstrip { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--s3); align-items: stretch; }
@media (max-width: 900px) { .weekstrip { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 520px) { .weekstrip { grid-template-columns: minmax(0,1fr); } }
.day { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s4); display: flex; flex-direction: column; gap: 4px;
       transition: transform .22s ease, box-shadow .22s ease; }
.day:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(3,20,38,.22); }
.day .d { font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); }
.day .hrs { font-size: clamp(30px, 3.4vw, 40px); font-weight: 800; line-height: 1; color: var(--navy); letter-spacing: -.02em; margin: 6px 0 2px; }
.day .hrs small { font-size: 14px; font-weight: 700; letter-spacing: 0; margin-left: 3px; color: var(--ink-soft); }
.day .t { font-size: 15px; font-weight: 700; color: var(--navy); }
.day .s { font-size: 12.5px; color: var(--ink-soft); line-height: 1.45; }
.day.key { background: linear-gradient(160deg, #ffffff, #eef5fc); border-color: #cfe0f1; }
.day.free { background: rgba(255,255,255,.06); border: 1px dashed rgba(255,255,255,.32); box-shadow: none; }
.day.free:hover { transform: none; box-shadow: none; }
.day.free .d { color: #9ccbf4; }
.day.free .hrs, .day.free .t { color: #fff; }
.day.free .s { color: #c8d8e8; }
.weeknote { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); justify-content: center; margin-top: var(--s5);
            background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.2); border-radius: 999px; padding: var(--s3) var(--s5); }
.weeknote strong { color: #fff; font-size: 17px; }
.weeknote span { color: #c8d8e8; font-size: 14px; }
@media (max-width: 520px) { .weeknote { border-radius: var(--r); text-align: center; justify-content: center; } }

/* Timeline */
.tl { position: relative; padding-left: 26px; }
.tl::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(180deg, var(--gold), var(--blue) 45%, var(--line)); border-radius: 2px; }
.tl-month { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin: var(--s5) 0 var(--s3); position: relative; }
.tl-month:first-child { margin-top: 0; }
.tl-item { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s3) var(--s4); margin-bottom: var(--s2); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.tl-item:hover { transform: translateX(3px); box-shadow: var(--shadow); border-color: #cfe0f1; }
.tl-item::before { content: ""; position: absolute; left: -24px; top: 18px; width: 12px; height: 12px; border-radius: 50%; background: var(--line); border: 2px solid var(--surface); box-shadow: 0 0 0 2px var(--line); }
.tl-item.t-online::before   { background: var(--blue);   box-shadow: 0 0 0 2px #cfe0f1; }
.tl-item.t-mentor::before   { background: #9fb0c0;       box-shadow: 0 0 0 2px #e3e9ef; }
.tl-item.t-feedback::before { background: var(--green);  box-shadow: 0 0 0 2px #c7e3d3; }
.tl-item.t-onsite::before   { background: var(--purple); box-shadow: 0 0 0 2px #ded3f2; }
.tl-item.t-milestone::before{ background: var(--gold);   box-shadow: 0 0 0 2px #ecd9a8; }
.tl-item .when { font-size: 12.5px; font-weight: 700; color: var(--ink-soft); letter-spacing: .03em; }
.tl-item .what { font-weight: 650; color: var(--navy); }
.tl-item .note { font-size: 13px; color: var(--ink-soft); }
.tl-item.t-milestone { border-color: #ecd9a8; background: #fffdf7; }
.legend { display: flex; flex-wrap: wrap; gap: var(--s4); font-size: 13px; color: var(--ink-soft); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

/* Modules accordion */
.mods { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--s4); align-items: start; }
@media (max-width: 900px) { .mods { grid-template-columns: minmax(0,1fr); } }
.modcol { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.modcol > header { padding: var(--s4); border-bottom: 1px solid var(--line-soft); }
.modcol > header .ph { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.modcol > header h3 { margin: 4px 0 0; font-size: 18px; }
details.mod { border-top: 1px solid var(--line-soft); }
details.mod:first-of-type { border-top: 0; }
details.mod summary {
  list-style: none; cursor: pointer; padding: 11px var(--s4); display: flex; gap: var(--s3);
  align-items: baseline; font-size: 14px; color: var(--navy); font-weight: 600;
}
details.mod summary::-webkit-details-marker { display: none; }
details.mod summary::after { content: "+"; margin-left: auto; color: var(--ink-soft); font-weight: 700; }
details.mod[open] summary::after { content: "–"; }
details.mod summary:hover { background: var(--blue-100); }
details.mod .code { font-size: 11.5px; font-weight: 800; color: var(--blue); background: var(--blue-100); border-radius: 5px; padding: 2px 6px; }
details.mod .body { padding: 0 var(--s4) var(--s4) calc(var(--s4) + 34px); font-size: 13.5px; color: var(--ink-soft); }
details.mod .hrs { font-size: 12px; color: var(--ink-soft); }

/* Assessment weights */
.weights { display: flex; height: 44px; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); }
.weights div { display: grid; place-items: center; color: #fff; font-size: 13px; font-weight: 700; }
.w1 { background: var(--navy); } .w2 { background: var(--blue); } .w3 { background: var(--green); } .w4 { background: var(--gold); }
.wkey { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--s4); margin-top: var(--s4); }
@media (max-width: 800px) { .wkey { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.wkey .card { padding: var(--s4); }
.wkey h4 { margin-bottom: 4px; }
.wkey p { font-size: 13px; color: var(--ink-soft); margin: 0; }

/* Section lede (one supporting line under an H2) */
.lede { font-size: 16.5px; line-height: 1.55; margin: 10px 0 0; color: var(--ink-soft); }

/* =====================================================================
   Program hero — no photo. Navy field, engraved grid, spec plate.
   ===================================================================== */
.page-hero.plain { background: linear-gradient(135deg, #072341 0%, #0b3c6b 52%, #10508e 100%); padding: var(--s7) 0 calc(var(--s7) + 8px); }
.page-hero.plain::after {
  background:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.14) 1px, transparent 0) 0 0/26px 26px,
    radial-gradient(900px 420px at 88% 8%, rgba(156,203,244,.20), transparent 62%);
  opacity: .9;
}
.hero-split { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); gap: var(--s7); align-items: center; }
@media (max-width: 940px) { .hero-split { grid-template-columns: minmax(0,1fr); gap: var(--s5); } }
.hero-split .rule { width: 56px; height: 4px; background: var(--gold); border-radius: 2px; margin-bottom: var(--s4); }

/* Spec plate — the programme's key figures as a ruled data sheet */
.spec { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.22); border-radius: var(--r-lg); padding: var(--s3) var(--s5) var(--s4);
        backdrop-filter: blur(2px); }
.spec .cap { font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--gold);
             padding: var(--s3) 0; border-bottom: 1px solid rgba(255,255,255,.22); }
.spec dl { margin: 0; }
.spec .r { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4);
           padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.13); }
.spec .r:last-child { border-bottom: 0; padding-bottom: 4px; }
.spec dt { font-size: 13px; color: #b9d2e8; letter-spacing: .02em; }
.spec dd { margin: 0; text-align: right; color: #fff; font-weight: 700; font-size: 15px; white-space: nowrap; }
.spec dd b { font-size: 27px; font-weight: 800; letter-spacing: -.02em; line-height: 1; margin-right: 5px; }
.spec dd em { font-style: normal; font-weight: 600; color: #cfe3f6; font-size: 13px; }
.spec .r.hi dd b { color: #fff; }
.spec .r.hi dt::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
                         background: var(--gold); margin-right: 8px; vertical-align: middle; }
@media (max-width: 420px) { .spec { padding: var(--s2) var(--s4) var(--s3); } .spec dd b { font-size: 23px; } }

/* =====================================================================
   My Team's Work — member page: team bar, radar dashboard, insight,
   attendance grid, upload zones.
   ===================================================================== */

/* Team identity bar */
.team-bar { background: linear-gradient(135deg, #072341 0%, #0b3c6b 58%, #10508e 100%); color: #fff; padding: var(--s5) 0 var(--s6); }
.team-bar .wrap { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: var(--s5); align-items: center; }
@media (max-width: 800px) { .team-bar .wrap { grid-template-columns: minmax(0,1fr); } }
.team-bar .eyebrow { color: var(--gold); }
.team-bar h1 { color: #fff; font-size: clamp(26px, 3.4vw, 38px); margin-bottom: 6px; }
.team-bar .tech { color: #d7e6f4; font-size: 16px; margin: 0 0 var(--s4); max-width: 60ch; }
.team-bar .chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: #dbeafc;
        background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); border-radius: 999px; padding: 5px 12px; }
.roster { display: flex; align-items: center; }
.roster .avatar { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 800;
                  background: #dceaf8; color: var(--navy); border: 2px solid #0b3c6b; margin-left: -10px; }
.roster .avatar:first-child { margin-left: 0; }
.roster .more { margin-left: var(--s3); font-size: 13px; color: #c8d8e8; }

/* Dashboard shell */
.dash { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); gap: var(--s5); align-items: start; }
@media (max-width: 1020px) { .dash { grid-template-columns: minmax(0,1fr); } }

/* Radar */
.radar-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s5); box-shadow: var(--shadow); }
.radar-wrap { position: relative; }
.radar-wrap svg { width: 100%; height: auto; display: block; overflow: visible; }
.radar-grid { fill: none; stroke: #e3e9ef; stroke-width: 1; }
.radar-grid.outer { stroke: #cfd8e1; }
.radar-spoke { stroke: #e3e9ef; stroke-width: 1; }
.radar-shape { fill: rgba(31,111,178,.18); stroke: var(--blue); stroke-width: 2.5; stroke-linejoin: round;
               transform-origin: center; transform-box: fill-box; }
.js .reveal:not(.in) .radar-shape { transform: scale(.02); opacity: 0; }
.js .reveal.in .radar-shape { animation: radarGrow .9s cubic-bezier(.22,.9,.3,1) forwards; }
@keyframes radarGrow { to { transform: scale(1); opacity: 1; } }
.radar-pt { fill: #fff; stroke: var(--blue); stroke-width: 2.5; cursor: pointer; transition: r .15s ease, stroke .15s ease; }
.radar-pt:hover, .radar-pt:focus { r: 7; stroke: var(--gold); outline: none; }
.radar-ring-label { font-size: 10px; fill: #97a3ae; font-weight: 600; }
.radar-axis-label { font-size: 11px; fill: var(--ink-soft); font-weight: 650; }
.radar-axis-score { font-size: 12.5px; font-weight: 800; fill: var(--navy); }
.radar-tip { position: absolute; pointer-events: none; opacity: 0; transform: translate(-50%, -115%);
             background: var(--navy); color: #fff; border-radius: var(--r-sm); padding: 8px 11px; font-size: 12.5px;
             line-height: 1.4; max-width: 230px; box-shadow: 0 8px 22px rgba(3,20,38,.3); transition: opacity .14s ease; z-index: 5; }
.radar-tip.on { opacity: 1; }
.radar-tip b { display: block; font-size: 13px; margin-bottom: 2px; }
.radar-tip .sc { color: #9ccbf4; font-weight: 800; }
.radar-legend { display: flex; flex-wrap: wrap; gap: var(--s4); justify-content: center; margin-top: var(--s4);
                padding-top: var(--s4); border-top: 1px solid var(--line-soft); font-size: 13px; color: var(--ink-soft); }
.radar-legend b { color: var(--navy); font-size: 17px; font-weight: 800; margin-right: 5px; }

/* Insight card */
.insight { background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--gold); border-radius: var(--r-lg);
           padding: var(--s5); box-shadow: var(--shadow); }
.insight .claim { font-size: 19px; line-height: 1.5; color: var(--navy); font-weight: 650; margin: var(--s3) 0 var(--s4);
                  padding-left: var(--s4); border-left: 3px solid var(--gold); }
.theme { display: grid; grid-template-columns: auto minmax(0,1fr); gap: var(--s3); padding: var(--s3) 0; border-top: 1px solid var(--line-soft); }
.theme .pol { width: 10px; height: 10px; border-radius: 50%; margin-top: 7px; }
.pol.strength { background: var(--green); }
.pol.gap { background: var(--amber); }
.pol.watch { background: var(--purple); }
.theme .nm { font-weight: 650; color: var(--navy); font-size: 14.5px; }
.theme .ct { font-size: 12px; color: var(--ink-soft); font-weight: 600; white-space: nowrap; }
.theme p { font-size: 13.5px; color: var(--ink-soft); margin: 3px 0 0; }
.pquote { border-left: 3px solid var(--line); padding: 2px 0 2px var(--s4); margin: var(--s3) 0; font-size: 13.5px; color: var(--ink); font-style: italic; }
.pquote .src { display: block; font-style: normal; font-size: 12px; color: var(--ink-soft); margin-top: 4px; font-weight: 600; }
.ai-note { display: flex; gap: var(--s2); align-items: flex-start; font-size: 12px; color: var(--ink-soft);
           background: var(--bg); border-radius: var(--r-sm); padding: var(--s3); margin-top: var(--s4); }

/* Score table */
.scores td .heat { min-width: 52px; }
.trend { font-size: 12.5px; font-weight: 700; }
.trend.up { color: var(--green); }
.trend.down { color: var(--red); }
.trend.flat { color: var(--ink-soft); }

/* Attendance */
.att-grid { width: 100%; border-collapse: collapse; }
.att-grid th, .att-grid td { padding: 7px 4px; text-align: center; }
.att-grid th.who, .att-grid td.who { text-align: left; padding-left: 0; white-space: nowrap; font-size: 13.5px; }
.att-grid thead th { font-size: 10.5px; font-weight: 700; color: #dbe7f3; letter-spacing: .04em; }
.att-grid thead th.who, .att-grid thead th:last-child { color: #fff; font-size: 12px; }
.att-grid tbody tr + tr td { border-top: 1px solid var(--line-soft); }
.mark { display: inline-block; width: 15px; height: 15px; border-radius: 4px; }
.mark.yes { background: #bfe0cc; }
.mark.no  { background: #f3d6d7; }
.att-foot { display: flex; flex-wrap: wrap; gap: var(--s4); align-items: center; font-size: 13px; color: var(--ink-soft); margin-top: var(--s4); }
.att-foot .key { display: inline-flex; align-items: center; gap: 6px; }
.att-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Let wide tables scroll sideways on a phone instead of squashing into unreadable columns */
.att-scroll > table { min-width: 660px; }
@media (max-width: 720px) { .att-scroll { box-shadow: inset -14px 0 12px -12px rgba(11,60,107,.25); } }

/* Upload zones */
.drops { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s4); }
@media (max-width: 760px) { .drops { grid-template-columns: minmax(0,1fr); } }
.drop { border: 2px dashed var(--line); border-radius: var(--r-lg); background: var(--bg); padding: var(--s5);
        text-align: center; transition: border-color .18s ease, background .18s ease, transform .18s ease; position: relative; }
.drop:hover, .drop.over { border-color: var(--blue); background: var(--blue-100); }
.drop.over { transform: scale(1.01); }
.drop.filled { border-style: solid; border-color: var(--green); background: var(--green-100); text-align: left; }
.drop .ico { width: 46px; height: 46px; margin: 0 auto var(--s3); color: var(--blue); }
.drop h4 { margin-bottom: 4px; }
.drop .hint { font-size: 12.5px; color: var(--ink-soft); margin: 0; }
.drop input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.drop:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(31,111,178,.18); }
.filerow { display: flex; align-items: center; gap: var(--s3); text-align: left; }
.filerow .fi { width: 38px; height: 38px; border-radius: var(--r-sm); background: #fff; display: grid; place-items: center; color: var(--green); flex: none; }
.filerow .nm { font-weight: 650; font-size: 14px; color: var(--navy); word-break: break-all; }
.filerow .mt { font-size: 12px; color: var(--ink-soft); }
.filerow .rm { margin-left: auto; background: none; border: 0; color: var(--ink-soft); font-size: 18px; cursor: pointer; line-height: 1;
               padding: 4px 8px; border-radius: var(--r-sm);
               position: relative; z-index: 2; }   /* above the invisible file input, so it stays clickable */
.filerow .rm:hover { color: var(--red); }
.bar { height: 5px; border-radius: 3px; background: #cfe0d8; overflow: hidden; margin-top: 8px; }
.bar i { display: block; height: 100%; background: var(--green); width: 0; transition: width .5s ease; }
.due { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; justify-content: space-between;
       background: var(--gold-100); border: 1px solid #efdfb8; border-radius: var(--r); padding: var(--s3) var(--s4); margin-bottom: var(--s4); }
.due strong { color: #7a5a12; }
.mockup-note { font-size: 12px; color: var(--ink-soft); margin-top: var(--s3); }

/* =====================================================================
   Capstone — FASTRAC proposal builder + pitch deck storyboard
   ===================================================================== */

/* Two-artifact header */
.cap-head { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s4); }
@media (max-width: 820px) { .cap-head { grid-template-columns: minmax(0,1fr); } }
.cap-art { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.22); border-radius: var(--r-lg); padding: var(--s4) var(--s5); }
.cap-art .k { font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.cap-art .v { font-size: clamp(26px, 3vw, 34px); font-weight: 800; color: #fff; line-height: 1.1; margin: 6px 0 2px; }
.cap-art .v small { font-size: 15px; font-weight: 600; color: #c8d8e8; margin-left: 4px; }
.cap-art .s { font-size: 13px; color: #c8d8e8; }
.cap-meter { height: 8px; border-radius: 5px; background: rgba(255,255,255,.16); overflow: hidden; margin: 10px 0 8px; }
.cap-meter i { display: block; height: 100%; background: linear-gradient(90deg, #9ccbf4, var(--gold)); width: 0; transition: width 1.1s cubic-bezier(.22,.9,.3,1); }

/* "This week" cards */
.nowcards { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s4); }
@media (max-width: 760px) { .nowcards { grid-template-columns: minmax(0,1fr); } }
.nowcard { background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--gold); border-radius: var(--r-lg);
           padding: var(--s5); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 6px; }
.nowcard .tag { font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.nowcard h3 { margin: 0; }
.nowcard p { color: var(--ink-soft); font-size: 14px; margin: 0; }
.nowcard .btn { align-self: flex-start; margin-top: var(--s3); }

/* Segmented control */
.seg { display: inline-flex; background: var(--line-soft); border-radius: 999px; padding: 4px; gap: 2px; }
.seg button { border: 0; background: none; font: inherit; font-weight: 650; font-size: 14.5px; color: var(--ink-soft);
              padding: 9px 20px; border-radius: 999px; cursor: pointer; transition: background .18s ease, color .18s ease; }
.seg button[aria-selected="true"] { background: var(--navy); color: #fff; }
.seg button:hover:not([aria-selected="true"]) { color: var(--navy); }

/* 24-segment proposal bar */
.itembar { display: grid; grid-template-columns: repeat(24, minmax(0,1fr)); gap: 3px; }
@media (max-width: 640px) { .itembar { grid-template-columns: repeat(12, minmax(0,1fr)); } }
.itembar button { height: 34px; border: 0; border-radius: var(--r-sm); cursor: pointer; font-size: 10px; font-weight: 800;
                  color: #fff; background: var(--line); transition: transform .15s ease, box-shadow .15s ease; padding: 0; }
.itembar button:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.itembar button[aria-current="true"] { outline: 2px solid var(--navy); outline-offset: 2px; }
.st-reviewed  { background: #1c4e3b !important; }
.st-submitted { background: var(--green) !important; }
.st-draft     { background: #7fb0d8 !important; }
.st-revise    { background: var(--amber) !important; }
.st-open      { background: var(--gold) !important; }
.st-locked    { background: #dfe5eb !important; color: #93a1ad !important; }
.barkey { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s4); font-size: 12.5px; color: var(--ink-soft); margin-top: var(--s3); }
.barkey span { display: inline-flex; align-items: center; gap: 6px; }
.barkey i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

/* Proposal workspace */
.work { display: grid; grid-template-columns: minmax(0,320px) minmax(0,1fr); gap: var(--s5); align-items: start; }
@media (max-width: 960px) { .work { grid-template-columns: minmax(0,1fr); } }
.itemlist { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); }
.itemlist .grp { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft);
                 background: var(--bg); padding: 9px var(--s4); border-top: 1px solid var(--line-soft); }
.itemlist .grp:first-child { border-top: 0; }
.itemlist button { display: flex; gap: var(--s3); align-items: flex-start; width: 100%; text-align: left; border: 0; background: none;
                   font: inherit; padding: 11px var(--s4); cursor: pointer; border-top: 1px solid var(--line-soft); transition: background .15s ease; }
.itemlist button:hover { background: var(--blue-100); }
.itemlist button[aria-current="true"] { background: var(--blue-100); box-shadow: inset 3px 0 0 var(--navy); }
.itemlist .num { flex: none; width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center;
                 font-size: 11px; font-weight: 800; color: #fff; background: var(--line); }
.itemlist .ti { display: block; font-size: 13.5px; font-weight: 600; color: var(--navy); line-height: 1.35; }
.itemlist .wk { display: block; font-size: 11.5px; color: var(--ink-soft); margin-top: 2px; }
/* Keep the 24-item list beside the editor instead of running far past it */
@media (min-width: 961px) {
  .itemlist { max-height: calc(100 * var(--vh) - var(--header-h) - 48px); overflow-y: auto;
              position: sticky; top: calc(var(--header-h) + 16px); }
}
.itemlist button.is-locked .ti { color: var(--ink-soft); font-weight: 500; }

/* Editor pane */
.editor { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s5); box-shadow: var(--shadow); }
.editor .ehead { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: baseline; justify-content: space-between; }
.editor h3 { margin: 0; }
.guide { background: var(--bg); border-left: 3px solid var(--blue); border-radius: 0 var(--r-sm) var(--r-sm) 0;
         padding: var(--s3) var(--s4); font-size: 13.5px; color: var(--ink-soft); margin: var(--s4) 0; }
.guide b { color: var(--navy); display: block; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 4px; }
.from { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-soft);
        background: var(--blue-100); border-radius: 999px; padding: 5px 12px; }
.editor textarea { width: 100%; min-height: 220px; font: inherit; font-size: 14.5px; line-height: 1.6; color: var(--ink);
                   border: 1px solid var(--line); border-radius: var(--r); padding: var(--s4); resize: vertical; background: #fff; }
.editor textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(31,111,178,.15); }
.editor textarea:disabled { background: var(--bg); color: var(--ink-soft); }
.ebar { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; justify-content: space-between; margin-top: var(--s3); }
.wc { font-size: 13px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.wc.over { color: var(--red); font-weight: 700; }
.saved { font-size: 12.5px; color: var(--green); opacity: 0; transition: opacity .3s ease; }
.saved.on { opacity: 1; }
.locknote { display: flex; gap: var(--s3); align-items: center; background: var(--bg); border: 1px dashed var(--line);
            border-radius: var(--r); padding: var(--s5); color: var(--ink-soft); font-size: 14px; }
.revise-note { background: var(--amber-100); border: 1px solid #f0dcb6; border-radius: var(--r); padding: var(--s3) var(--s4);
               font-size: 13.5px; color: #7a5a12; margin: var(--s4) 0; }

/* Sub-part checklist (item 9, item 24) */
.subparts { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 6px var(--s4); margin: var(--s4) 0 0; padding: 0; list-style: none; }
@media (max-width: 640px) { .subparts { grid-template-columns: minmax(0,1fr); } }
.subparts li { display: flex; gap: var(--s2); align-items: flex-start; font-size: 13.5px; color: var(--ink-soft); }
.subparts .tick { flex: none; width: 17px; height: 17px; border-radius: 5px; display: grid; place-items: center; margin-top: 1px;
                  background: var(--line-soft); color: #97a3ae; font-size: 11px; font-weight: 800; }
.subparts li.on .tick { background: var(--green-100); color: var(--green); }
.subparts li.on { color: var(--ink); }
.subparts li.na .tick { background: var(--line-soft); color: #b6c0ca; }

/* Readiness check */
.ready li { display: flex; gap: var(--s3); align-items: flex-start; padding: 9px 0; border-top: 1px solid var(--line-soft); font-size: 14px; }
.ready li:first-child { border-top: 0; }
.ready .ic { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #fff; }
.ready .ok  .ic { background: var(--green); }
.ready .warn .ic { background: var(--amber); }
.ready .bad .ic { background: var(--red); }

/* Deck storyboard */
.film { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--s4); }
.frame { display: block; border: 0; background: none; padding: 0; font: inherit; text-align: left; cursor: pointer; width: 100%; }
.frame .thumb { display: block; aspect-ratio: 16 / 9; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line);
                background: #fff; box-shadow: var(--shadow); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.frame:hover .thumb { transform: translateY(-5px); box-shadow: 0 14px 30px rgba(11,60,107,.2); border-color: #cfe0f1; }
.frame[aria-current="true"] .thumb { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(11,60,107,.18); }
.frame .thumb svg { width: 100%; height: 100%; display: block; }
.frame.empty .thumb { border-style: dashed; background: var(--bg); display: grid; place-items: center; }
.frame .cap { display: flex; gap: var(--s2); align-items: baseline; margin-top: 9px; }
.frame .no { font-size: 11px; font-weight: 800; color: var(--ink-soft); flex: none; }
.frame .nm { font-size: 13.5px; font-weight: 650; color: var(--navy); line-height: 1.3; }
.frame.empty .nm { color: var(--ink-soft); font-weight: 500; }
.frame .sub { display: block; font-size: 12px; color: var(--ink-soft); margin-left: 22px; }
.frame .sc { display: block; margin-left: 22px; margin-top: 4px; }

/* Deck viewer */
.stage { background: #08223c; border-radius: var(--r-lg); padding: var(--s5); display: grid; gap: var(--s4);
         max-width: 840px; margin: 0 auto; width: 100%; }
.stage .screen { aspect-ratio: 16 / 9; background: #fff; border-radius: var(--r); overflow: hidden; }
.stage .screen svg { width: 100%; height: 100%; display: block; }
.stage .bar { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; justify-content: space-between; background: none; height: auto; }
.stage .who { color: #fff; font-weight: 650; }
.stage .who small { display: block; color: #9fc3e4; font-weight: 500; font-size: 12.5px; }
.stage .nav { display: flex; gap: var(--s2); }
.stage .nav button { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.24); color: #fff; border-radius: var(--r-sm);
                     width: 40px; height: 36px; font-size: 16px; cursor: pointer; }
.stage .nav button:hover:not(:disabled) { background: rgba(255,255,255,.22); }
.stage .nav button:disabled { opacity: .35; cursor: default; }

/* =====================================================================
   FASTRAC proposal preview — the team's answers on the real DOST form
   ===================================================================== */
/* Docked to the right so the editor stays usable and the form fills in as you type */
.sheetwrap { position: fixed; top: 0; right: 0; bottom: 0; z-index: 90; width: min(52%, 880px);
             background: #223546; overflow-y: auto; padding: 0 0 var(--s6);
             box-shadow: -12px 0 44px rgba(3,16,30,.4); }
.sheetwrap[hidden] { display: none; }
body.sheet-open { padding-right: min(52%, 880px); }
@media (max-width: 1000px) {
  .sheetwrap { width: 100%; }
  body.sheet-open { padding-right: 0; overflow: hidden; }
}
/* the item the team is editing, flagged on the paper */
.sheet .box.hot, .sheet .split.hot { box-shadow: inset 0 0 0 2px #c99a2e; }
.sheet .box.hot { background: #fffbf0; }
.sheettools { position: sticky; top: 0; z-index: 2; background: var(--navy); color: #fff; padding: var(--s3) var(--s4);
              display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; justify-content: space-between; }
.sheettools .t { font-weight: 700; font-size: 15px; }
.sheettools .t small { display: block; font-weight: 500; font-size: 12.5px; color: #c8d8e8; }
.sheettools .acts { display: flex; gap: var(--s2); }
.sheettools button { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28); color: #fff;
                     font: inherit; font-size: 14px; font-weight: 600; border-radius: var(--r-sm); padding: 8px 14px; cursor: pointer; }
.sheettools button:hover { background: rgba(255,255,255,.24); }
.sheettools button.primary { background: var(--gold); border-color: var(--gold); color: #2e2003; }

/* The paper itself — Arial 11pt, as DOST's instructions require */
.sheet { width: min(794px, calc(100% - 32px)); margin: var(--s5) auto 0; background: #fff; color: #111;
         font-family: Arial, Helvetica, sans-serif; font-size: 11pt; line-height: 1.45;
         padding: 56px 64px 72px; box-shadow: 0 18px 50px rgba(0,0,0,.35); }
@media (max-width: 520px) { .sheet { padding: 28px 22px 40px; font-size: 10pt; } }
.sheet .formhead { text-align: right; font-size: 9.5pt; font-weight: 700; margin-bottom: 6px; }
.sheet .formtitle { text-align: center; font-weight: 700; font-size: 13pt; letter-spacing: .01em; margin: 0 0 6px; color: #111; }
.sheet .stamp { text-align: center; font-size: 9pt; color: #777; border-top: 1px solid #bbb; border-bottom: 1px solid #bbb;
                padding: 5px 0; margin: 14px 0 24px; letter-spacing: .04em; text-transform: uppercase; }
.sheet h2.s { font-size: 11pt; font-weight: 700; color: #111; margin: 22px 0 7px; text-transform: uppercase; letter-spacing: .01em; }
.sheet h3.ss { font-size: 11pt; font-weight: 700; color: #111; margin: 14px 0 5px; }
.sheet p { margin: 0 0 9px; text-align: justify; }
.sheet .lbl { display: grid; grid-template-columns: minmax(0,220px) minmax(0,1fr); gap: 2px var(--s3); margin-bottom: 4px; }
.sheet .lbl .k { font-weight: 700; }
.sheet .lbl .v { border-bottom: 1px solid #999; min-height: 1.45em; }
.sheet .lbl .v.blank { border-bottom: 1px solid #ccc; }
.sheet table.f { width: 100%; border-collapse: collapse; margin: 8px 0 12px; font-size: 10pt; }
.sheet table.f th, .sheet table.f td { border: 1px solid #555; padding: 5px 7px; text-align: left; vertical-align: top; }
.sheet table.f th { background: #eee; color: #111; font-weight: 700; font-size: 9pt; text-transform: uppercase; letter-spacing: .03em; }
.sheet table.f td.n { width: 42px; text-align: center; }
.sheet ul.f { margin: 4px 0 10px; padding-left: 20px; }
.sheet ul.f li { margin-bottom: 3px; }
.sheet ul.box { list-style: none; padding-left: 0; }
.sheet ul.box li { margin-bottom: 4px; }
.sheet ul.box .bx { display: inline-block; width: 1em; font-weight: 700; margin-right: 6px; }
.sheet .pending { border: 1px dashed #b9b9b9; background: #fafafa; color: #888; font-style: italic;
                  padding: 10px 12px; margin: 4px 0 10px; font-size: 10pt; }
.sheet .wlimit { float: right; font-size: 9pt; color: #888; font-style: italic; font-weight: 400; }
.sheet .sig { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s5); margin-top: 26px; }
.sheet .sig .box { border: 1px solid #555; }
.sheet .sig .box div { border-bottom: 1px solid #555; padding: 7px 9px; font-size: 9.5pt; min-height: 34px; }
.sheet .sig .box div:last-child { border-bottom: 0; }
.sheet .sig h4 { margin: 0 0 6px; font-size: 10pt; color: #111; }
.sheet .certify { font-size: 9.5pt; text-align: justify; margin-top: 22px; color: #333; }

@media print {
  body > *:not(.sheetwrap) { display: none !important; }
  .sheetwrap { position: static; background: none; backdrop-filter: none; padding: 0; overflow: visible; }
  .sheettools { display: none !important; }
  .sheet { width: auto; margin: 0; padding: 0; box-shadow: none; }
  .sheet .pagebreak { break-after: page; height: 0; }
}

/* =====================================================================
   Structured form fields — the writing area mirrors the DOST form's
   own shape: labelled lines, ruled tables, tick boxes, peso columns.
   ===================================================================== */
.ff { display: grid; grid-template-columns: minmax(0,210px) minmax(0,1fr); gap: 8px var(--s4); align-items: center; margin-bottom: 9px; }
@media (max-width: 620px) { .ff { grid-template-columns: minmax(0,1fr); gap: 4px; } }
.ff > label { font-size: 13.5px; font-weight: 600; color: var(--navy); }
.ff > label .fine { display: block; font-weight: 400; font-size: 11.5px; color: var(--ink-soft); }
.fin { width: 100%; font: inherit; font-size: 14px; color: var(--ink); background: #fff;
       border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 6px 2px; }
.fin:focus { outline: none; border-bottom-color: var(--blue); box-shadow: 0 1px 0 0 var(--blue); }
.fin::placeholder { color: #aeb7c0; }
.fin.short { max-width: 150px; }
.frow2 { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; }
.frow2 .fin { width: auto; flex: 1 1 130px; }

/* editable grid, drawn like the form's tables */
.fgrid-wrap { overflow-x: auto; margin: 4px 0 var(--s3); }
table.fgrid { display: table; width: 100%; min-width: 560px; border-collapse: collapse; }  /* stays a table: a later .fgrid rule (card grid) would make it a grid */
table.fgrid th, table.fgrid td { border: 1px solid var(--line); padding: 0; }
table.fgrid th { background: var(--bg); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
                 color: var(--ink-soft); padding: 7px 8px; text-align: left; }
table.fgrid th.n, table.fgrid td.n { width: 34px; text-align: center; color: var(--ink-soft); font-size: 12px; padding: 6px 2px; }
table.fgrid td .fin { border: 0; padding: 8px; font-size: 13.5px; }
table.fgrid td .fin:focus { box-shadow: inset 0 0 0 2px rgba(31,111,178,.35); }
table.fgrid td.money .fin { text-align: right; font-variant-numeric: tabular-nums; }
table.fgrid td.calc { padding: 8px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 700;
                      color: var(--navy); background: var(--bg); font-size: 13.5px; }
table.fgrid tr.total td { background: var(--blue-100); font-weight: 800; color: var(--navy); padding: 8px; text-align: right;
                          font-variant-numeric: tabular-nums; font-size: 13.5px; }
table.fgrid tr.total td:first-child { text-align: left; }
.fgrid-note { font-size: 12.5px; color: var(--ink-soft); }

/* tick lists */
.fchecks { display: grid; gap: 7px; margin: 4px 0 var(--s3); }
.fchecks label { display: flex; gap: 9px; align-items: flex-start; font-size: 14px; color: var(--ink); cursor: pointer; }
.fchecks input { margin: 3px 0 0; width: 16px; height: 16px; accent-color: var(--blue); flex: none; }
.fchecks .sub { margin: 4px 0 2px 25px; display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; }
.fchecks .sub .fin { flex: 1 1 240px; min-width: 150px; max-width: 420px; }
.fchecks .sub .fin:disabled { background: transparent; color: #b6c0ca; border-bottom-style: dashed; }
.fchecks .sub span { font-size: 13px; color: var(--ink-soft); }
.fchecks .na { color: var(--ink-soft); font-style: italic; font-size: 13px; margin-left: 25px; }
.fhint { font-size: 12.5px; color: var(--ink-soft); margin: 0 0 var(--s3); }

/* With the form docked, give the writing area the whole left column —
   the 24-block bar above is still there for jumping between items. */
body.sheet-open .work { grid-template-columns: minmax(0,1fr); }
body.sheet-open .itemlist { display: none; }
table.fgrid td.money .fin { letter-spacing: .01em; }

/* =====================================================================
   Capstone — the two workspaces, told apart at a glance
   ===================================================================== */
.wstabs { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s4); margin-bottom: var(--s5); }
@media (max-width: 760px) { .wstabs { grid-template-columns: minmax(0,1fr); } }
.wstab { display: flex; gap: var(--s4); align-items: center; text-align: left; width: 100%;
         background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
         padding: var(--s4) var(--s5); font: inherit; cursor: pointer; position: relative; overflow: hidden;
         transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.wstab::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--line); transition: background .2s ease; }
.wstab:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.wstab[aria-selected="true"] { border-color: var(--navy); box-shadow: 0 10px 26px rgba(11,60,107,.16); }
.wstab[aria-selected="true"]::before { background: var(--navy); }
.wstab.deck[aria-selected="true"] { border-color: var(--gold); box-shadow: 0 10px 26px rgba(201,154,46,.22); }
.wstab.deck[aria-selected="true"]::before { background: var(--gold); }
.wstab .ic { flex: none; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
             background: var(--blue-100); color: var(--blue); }
.wstab.deck .ic { background: var(--gold-100); color: #9a7415; }
.wstab .tx { display: block; min-width: 0; flex: 1 1 auto; }
.wstab .nm { display: block; font-size: 16px; font-weight: 700; color: var(--navy); }
.wstab .ct { display: block; font-size: 13px; color: var(--ink-soft); margin-top: 1px; }
.wstab .mtr { display: block; height: 5px; border-radius: 3px; background: var(--line-soft); overflow: hidden; margin-top: 8px; }
.wstab .mtr i { display: block; height: 100%; width: 0; background: var(--blue); transition: width .8s cubic-bezier(.22,.9,.3,1); }
.wstab.deck .mtr i { background: var(--gold); }
.wstab .go { flex: none; color: var(--ink-soft); font-size: 20px; line-height: 1; }
.wstab[aria-selected="true"] .go { color: var(--navy); }

/* a band at the top of whichever workspace is open */
.ws-band { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; justify-content: space-between;
           border-radius: var(--r-lg) var(--r-lg) 0 0; padding: var(--s4) var(--s5); color: #fff;
           background: linear-gradient(120deg, #0b3c6b, #1f6fb2); }
.ws-band.deck { background: linear-gradient(120deg, #8a6412, #c99a2e); }
.ws-band h3 { color: #fff; margin: 0; font-size: 17px; }
.ws-band p { margin: 2px 0 0; font-size: 13px; color: rgba(255,255,255,.85); }
.ws-band .acts { display: flex; gap: var(--s2); flex-wrap: wrap; }
.ws-band .acts .btn { background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.34); color: #fff; }
.ws-band .acts .btn:hover { background: rgba(255,255,255,.28); }
.ws-band .acts .btn.solid { background: #fff; color: var(--navy); border-color: #fff; }
.ws-body { border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--r-lg) var(--r-lg);
           background: var(--bg); padding: var(--s5); }

/* Slide frames as drop targets */
.frame { position: relative; }
.frame .thumb { position: relative; }
.frame input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; z-index: 2; }
.frame.over .thumb { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,154,46,.35); transform: translateY(-5px); }
.frame .drophint { position: absolute; inset: 0; display: grid; place-items: center; gap: 4px; align-content: center;
                   background: #fff; color: var(--navy); font-size: 12.5px; font-weight: 700; line-height: 1.35;
                   opacity: 0; transition: opacity .15s ease; text-align: center; padding: 10px;
                   border: 2px dashed var(--blue); border-radius: var(--r); }
.frame.over .drophint { border-color: var(--gold); background: var(--gold-100); }
.frame.locked .drophint { border-style: solid; border-color: var(--line); }
.frame:hover .drophint, .frame.over .drophint, .frame:focus-within .drophint { opacity: 1; }
.frame.locked .drophint { background: var(--bg); color: var(--ink-soft); font-weight: 600; }
.frame .up { position: absolute; inset: 0; background: #fff; display: grid; place-items: center; align-content: center; gap: 6px; padding: 10px; }
.frame .up img { max-width: 100%; max-height: 100%; object-fit: contain; }
.frame .up .doc { width: 40px; height: 40px; color: var(--green); }
.frame .up .fn { font-size: 11.5px; font-weight: 650; color: var(--navy); word-break: break-all; line-height: 1.3; text-align: center; }
.frame .up .sz { font-size: 11px; color: var(--ink-soft); }
.frame.uploaded .thumb { border-color: var(--green); box-shadow: 0 0 0 2px rgba(46,125,91,.25); }
.frame .rmslide { position: absolute; top: 6px; right: 6px; z-index: 3; width: 24px; height: 24px; border-radius: 50%;
                  border: 0; background: rgba(255,255,255,.94); color: var(--ink-soft); font-size: 15px; line-height: 1;
                  cursor: pointer; box-shadow: var(--shadow); }
.frame .rmslide:hover { color: var(--red); }
.badge.mine { background: var(--green-100); color: var(--green); }

/* whole-deck drop zone */
.deckdrop { border: 2px dashed var(--line); border-radius: var(--r-lg); background: var(--surface); padding: var(--s5);
            text-align: center; color: var(--ink-soft); font-size: 14px; transition: border-color .18s ease, background .18s ease; }
.deckdrop.over { border-color: var(--gold); background: var(--gold-100); color: #7a5a12; }
.deckdrop strong { color: var(--navy); display: block; font-size: 15px; margin-bottom: 3px; }

/* =====================================================================
   This Week — the cohort page: what's happening, what's due, the topic
   ===================================================================== */
.wk-bar { position: relative; overflow: hidden; color: #fff;
          background: linear-gradient(135deg, #072341 0%, #0b3c6b 58%, #10508e 100%);
          padding: var(--s6) 0; }
.wk-bar .eyebrow { color: var(--gold); }
.wk-bar h1 { color: #fff; font-size: clamp(23px, 2.7vw, 31px); margin: 2px 0 6px; }
.wk-bar .tag { color: #d7e6f4; font-size: 16px; max-width: 46ch; margin: 0; }

/* the split: the week on the left, this week's topic carrying the page on the right */
.wk-split { position: relative; z-index: 1; display: grid;
            grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: var(--s7); align-items: center; }
.wk-split::after { content: attr(data-code); position: absolute; right: -14px; bottom: -74px; z-index: -1;
                   font-size: 190px; font-weight: 800; color: rgba(255,255,255,.07);
                   letter-spacing: -.04em; line-height: 1; pointer-events: none; }
.wk-topic { border-left: 1px solid rgba(255,255,255,.2); padding-left: calc(var(--s7) + 2rem); }
.wk-topic h2 { color: #fff; font-size: clamp(40px, 5.5vw, 76px); line-height: 1.02;
               letter-spacing: -.025em; margin: 0 0 14px; }
/* the STEP 2.5 topics are often a list ("Advanced Finance, Financial
   Projections, FASTRAC Orientation") — longer titles step down in size */
.wk-topic h2.long { font-size: clamp(30px, 3.6vw, 50px); line-height: 1.08; }
.wk-topic h2.xlong { font-size: clamp(26px, 2.9vw, 40px); line-height: 1.1; }
.wk-topic p { color: #cfe3f7; margin: 0; font-size: clamp(15px, 1.22vw, 17.5px); line-height: 1.5;
              max-width: 40ch; font-weight: 500; }
@media (max-width: 900px) {
  .wk-split { grid-template-columns: minmax(0,1fr); gap: var(--s5); }
  .wk-split::after { font-size: 120px; bottom: -40px; }
  .wk-topic { border-left: 0; padding-left: 0; padding-top: var(--s5);
              border-top: 1px solid rgba(255,255,255,.2); }
}
.daydots { display: flex; gap: 6px; flex-wrap: wrap; margin-top: var(--s5); }
.daydots span { display: grid; place-items: center; min-width: 42px; height: 42px; border-radius: 10px; font-size: 12px; font-weight: 700;
                background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); color: #cfe3f6; }
.daydots span.done { background: rgba(255,255,255,.2); color: #fff; }
.daydots span.now  { background: var(--gold); border-color: var(--gold); color: #2e2003; }

/* the one deadline that matters, carried in the week bar */
.wk-due { display: inline-flex; align-items: center; gap: 9px; margin-top: var(--s4);
          background: rgba(201,154,46,.17); border: 1px solid rgba(201,154,46,.5); color: #f3dcae;
          font-size: 13.5px; font-weight: 600; padding: 7px 15px 7px 13px; border-radius: 999px; }
.wk-due::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.wk-due b { color: #fff; font-weight: 800; }
.wk-due[hidden] { display: none; }

/* topic card — the headline now lives in the banner, so this is plain reading matter */
.topic { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
         overflow: hidden; box-shadow: var(--shadow); }
.topic .tb { padding: var(--s6); display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,1fr); gap: var(--s6); }
@media (max-width: 900px) { .topic .tb { grid-template-columns: minmax(0,1fr); gap: var(--s5); padding: var(--s5); } }
.topic .lead { font-size: 15.5px; line-height: 1.75; color: var(--ink); margin: 0; }
.topic h4 { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.able { list-style: none; padding: 0; margin: 0; }
.able li { display: flex; gap: var(--s3); align-items: flex-start; padding: 11px 0;
           border-top: 1px solid var(--line-soft); font-size: 15px; line-height: 1.55; color: var(--ink); }
.able li:first-child { border-top: 0; }
.able .n { flex: none; width: 25px; height: 25px; border-radius: 50%; background: var(--blue-100); color: var(--blue);
           display: grid; place-items: center; font-size: 12.5px; font-weight: 800; margin-top: 1px; }
.outbox { background: var(--gold-100); border: 1px solid #efdfb8; border-left: 5px solid var(--gold); border-radius: var(--r);
          padding: var(--s4) var(--s5); font-size: 14.5px; line-height: 1.6; color: #6b4e0d; }
.outbox b { display: block; color: #7a5a12; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 5px; }
.mats { list-style: none; padding: 0; margin: 0; }
.mats li { display: flex; gap: var(--s3); align-items: center; padding: 11px 0; border-top: 1px solid var(--line-soft); }
.mats li:first-child { border-top: 0; }
.mats .ft { flex: none; width: 42px; height: 42px; border-radius: var(--r); display: grid; place-items: center;
            background: var(--blue-100); color: var(--blue); font-size: 10.5px; font-weight: 800; }
.mats .ft.pend { background: var(--line-soft); color: #98a3ad; }
.mats .mn { display: block; font-size: 14.5px; font-weight: 650; color: var(--navy); line-height: 1.35; }
.mats .mm { display: block; font-size: 12.5px; color: var(--ink-soft); margin-top: 2px; }
.mats .btn { margin-left: auto; flex: none; }

/* =========================
   quick game — a playful board that should read as "come and play", not as
   another content card. Rounder, chunkier and brighter than the rest of the
   page on purpose: the change of shape is what tells a participant this part
   is a game, that it takes two minutes, and that nothing here is graded.
   ========================= */
/* the board sits apart from the schedule above it: the page stack gives
   sections 16px, and a game needs a real break before and after it so the
   switch from "what you must do" to "have a go" is felt, not just read. */
.game-sec { margin-top: 64px; margin-bottom: 40px; }
@media (max-width: 640px) { .game-sec { margin-top: 44px; margin-bottom: 28px; } }

.game { position: relative; overflow: hidden; border-radius: 28px; color: #fff;
        background: radial-gradient(760px 300px at 12% -18%, #2c7fc7 0%, transparent 60%),
                    radial-gradient(520px 340px at 92% 6%, rgba(201,154,46,.32) 0%, transparent 64%),
                    radial-gradient(430px 300px at 78% 112%, rgba(107,79,160,.40) 0%, transparent 66%),
                    linear-gradient(162deg, #071f39 0%, #0b3c6b 58%, #0e4d8b 100%);
        border: 1px solid #0a2b4e; box-shadow: 0 26px 54px rgba(3,20,38,.32);
        padding: var(--s6); }
.game::before { content: ""; position: absolute; inset: 0; pointer-events: none;
                background-image: radial-gradient(rgba(255,255,255,.085) 1.4px, transparent 1.4px);
                background-size: 26px 26px; }
.game > * { position: relative; z-index: 1; }
@media (max-width: 640px) { .game { padding: var(--s5) var(--s4); border-radius: 22px; } }

.game-top { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s4); align-items: center;
            justify-content: space-between; margin-bottom: var(--s4); }
/* the badge is the first thing read, so it carries the play cue: a chunky
   gold sticker, tilted off the grid, that lifts gently on its own. */
.gpill { display: inline-flex; align-items: center; gap: 8px; color: #2e2003;
         background: linear-gradient(180deg, #e7bb4e 0%, #c99a2e 100%);
         font-size: 12.5px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase;
         padding: 8px 16px; border-radius: 999px; transform: rotate(-1.6deg);
         box-shadow: 0 4px 0 #8f6b14, 0 10px 18px rgba(0,0,0,.22); }
.gpill::before { content: "🎮"; font-size: 14px; }
@media (prefers-reduced-motion: no-preference) {
  .gpill { animation: gbob 2.9s ease-in-out infinite; }
  @keyframes gbob { 0%, 100% { transform: rotate(-1.6deg) translateY(0); }
                    50%      { transform: rotate(-1.6deg) translateY(-3px); } }
}
/* score HUD: two small chips rather than loose text, the way a game shows it */
.gmeta { display: flex; gap: 10px; align-items: center; font-size: 12.5px; font-weight: 750;
         letter-spacing: .04em; color: #bcd9f3; }
.gmeta > span { background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.18);
                padding: 6px 12px; border-radius: 999px; }
.gmeta b { color: #ffd97a; font-weight: 900; font-size: 14px; }
.gh { color: #fff; font-size: clamp(26px, 3.2vw, 36px); line-height: 1.1; margin: 0 0 10px; letter-spacing: -.015em; }
.gp { color: #cfe4f7; font-size: 16.5px; line-height: 1.6; max-width: 58ch; margin: 0 0 var(--s4); }
/* the two ways to play, said once, in the game's own voice */
.ghow { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 var(--s5); padding: 0; list-style: none; }
.ghow li { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 650;
           color: #d7e9fa; background: rgba(255,255,255,.07); border: 1px dashed rgba(255,255,255,.26);
           padding: 5px 12px; border-radius: 999px; }

/* the board — cards you want to pick up */
.steps-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.step-card { display: flex; gap: var(--s4); align-items: center; border-radius: 18px;
             background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.20);
             padding: 15px var(--s4); cursor: grab; user-select: none; touch-action: none; color: #fff;
             box-shadow: 0 3px 0 rgba(0,0,0,.18);
             transition: background .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease; }
.step-card:hover { background: rgba(255,255,255,.155); border-color: rgba(255,255,255,.40);
                   transform: translateY(-2px) rotate(-.35deg); box-shadow: 0 10px 22px rgba(0,0,0,.26); }
.step-card:active { cursor: grabbing; }
.step-card:focus-visible { outline: 3px solid #ffd97a; outline-offset: 3px; }
.step-card.dragging { opacity: .28; }
.step-card.ghost { position: fixed; z-index: 100; pointer-events: none; cursor: grabbing; opacity: 1;
                   background: #10528f; border-color: var(--light-blue); box-shadow: 0 22px 44px rgba(0,0,0,.48);
                   transform: rotate(-2deg) scale(1.03); }
.step-card .grip { flex: none; color: rgba(255,217,122,.62); font-size: 16px; letter-spacing: -2px; }
/* each slot gets its own playful colour, so a card visibly moves house when
   it is dragged to a new position */
.step-card .pos { flex: none; width: 36px; height: 36px; border-radius: 12px; transform: rotate(-4deg);
                  background: #9ccbf4; color: #08243f; display: grid; place-items: center;
                  font-size: 15px; font-weight: 900; box-shadow: 0 3px 0 rgba(0,0,0,.22); }
.steps-list li:nth-child(5n+1) .pos { background: #ffd97a; }
.steps-list li:nth-child(5n+2) .pos { background: #9ccbf4; }
.steps-list li:nth-child(5n+3) .pos { background: #8fe3bd; }
.steps-list li:nth-child(5n+4) .pos { background: #f7b5b5; }
.steps-list li:nth-child(5n+5) .pos { background: #cbbaf2; }
.step-card .lb { font-size: 15.5px; font-weight: 700; color: #fff; }
.step-card .wy { display: block; font-size: 13.5px; font-weight: 400; color: #bcd9f3; margin-top: 5px; line-height: 1.5; }
.step-card.right { background: rgba(52,170,118,.38); border-color: #6fd3a3; animation: gpop .4s ease both; }
.step-card.right .pos, .steps-list li.right .pos { background: #6fdaa9; color: #063523; }
.step-card.wrong { background: rgba(198,56,56,.42); border-color: rgba(255,163,163,.7); }
.step-card.wrong .pos, .steps-list li.wrong .pos { background: #f0a1a1; color: #3d0e0e; }
.step-card.locked { cursor: default; }
.step-card.locked:hover { transform: none; box-shadow: 0 3px 0 rgba(0,0,0,.18); }
@keyframes gpop { 0% { transform: scale(.96); } 45% { transform: scale(1.03); } 100% { transform: scale(1); } }

.gamebar { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; justify-content: space-between;
           margin-top: var(--s5); padding-top: var(--s4); border-top: 1px dashed rgba(255,255,255,.2); }
.gamebar .msg { font-size: 14.5px; font-weight: 700; color: #cfe4f7; }
.gamebar .msg.ok { color: #7fe0b2; }
.gamebar .msg.no { color: #ffd07a; }
/* chunky buttons with a bottom edge, so pressing one feels like pressing a
   key rather than submitting a form */
.game .btn { background: linear-gradient(180deg, #e7bb4e 0%, #c99a2e 100%); border-color: #c99a2e;
             color: #2e2003; border-radius: 999px; font-weight: 800; box-shadow: 0 4px 0 #8f6b14;
             transition: transform .09s ease, box-shadow .09s ease, background .16s ease; }
.game .btn:hover { background: linear-gradient(180deg, #f0c964 0%, #dcac38 100%); color: #2e2003; }
.game .btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #8f6b14; }
.game .btn.secondary { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.36); color: #fff;
                       box-shadow: 0 4px 0 rgba(0,0,0,.24); }
.game .btn.secondary:hover { background: rgba(255,255,255,.2); color: #fff; }
.game .btn.secondary:active { box-shadow: 0 1px 0 rgba(0,0,0,.24); }
.game .btn:disabled { opacity: .5; transform: none; box-shadow: none; }
.game.win { box-shadow: 0 26px 54px rgba(3,20,38,.32), 0 0 0 4px rgba(255,217,122,.55); }
@media (prefers-reduced-motion: no-preference) {
  .game.win { animation: gwig .55s ease; }
  @keyframes gwig { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-.35deg); } 65% { transform: rotate(.35deg); } }
}

/* confetti on a clean sweep */
.cfti { position: absolute; top: -14px; width: 9px; height: 14px; border-radius: 2px; z-index: 2;
        pointer-events: none; opacity: 0; animation: gfall 1.6s cubic-bezier(.32,.72,.5,1) forwards; }
@keyframes gfall { 0% { opacity: 1; transform: translateY(0) rotate(0deg); }
                   100% { opacity: 0; transform: translateY(460px) rotate(460deg); } }
@media (prefers-reduced-motion: reduce) { .cfti { display: none; } .step-card.right { animation: none; } }

/* =========================
   the seven days — a spine that fills up to today, so done / now / ahead read at a glance
   ========================= */
.week-rail { display: grid; gap: 12px; position: relative; padding-left: 40px; }
@media (max-width: 720px) { .week-rail { padding-left: 30px; } }

.dayrow { position: relative; display: grid; grid-template-columns: 124px minmax(0,1fr) auto; gap: var(--s4);
          align-items: center; background: var(--surface); border: 1px solid var(--line);
          border-radius: var(--r-lg); padding: var(--s4) var(--s5); box-shadow: var(--shadow); }
@media (max-width: 720px) { .dayrow { grid-template-columns: minmax(0,1fr); gap: 8px; padding: var(--s4); } }

/* connector above each row + the node itself */
.dayrow::before { content: ""; position: absolute; left: -27px; top: -18px; bottom: -18px; width: 2px;
                  background: var(--blue); }
.dayrow:first-child::before { top: 50%; }
.dayrow:last-child::before  { bottom: 50%; }
.dayrow::after { content: ""; position: absolute; left: -33px; top: 50%; margin-top: -7px;
                 width: 14px; height: 14px; border-radius: 50%; background: var(--blue);
                 box-shadow: 0 0 0 3px var(--bg); }
@media (max-width: 720px) {
  .dayrow::before { left: -21px; }
  .dayrow::after  { left: -27px; }
}

/* ---- done ---- */
.dayrow.past { background: #eff3f7; border-color: #e0e7ee; box-shadow: none; }
.dayrow.past::before { background: #b9c6d2; }
.dayrow.past::after  { background: #b9c6d2; }
.dayrow.past .ti { color: #7b8794; font-weight: 600; }
.dayrow.past .nt, .dayrow.past .wd, .dayrow.past .dt { color: #8d98a4; }
.dayrow.past.session, .dayrow.past.deadline, .dayrow.past.panel { border-left-color: #cdd7e0; }

/* ---- today ---- */
.dayrow.today { border-color: var(--gold); background: #fffdf7;
                box-shadow: 0 0 0 4px rgba(201,154,46,.16), 0 12px 28px rgba(11,60,107,.10); }
.dayrow.today::before { background: var(--gold); }
.dayrow.today::after { background: var(--gold); width: 18px; height: 18px; margin-top: -9px; left: -35px;
                       box-shadow: 0 0 0 3px var(--bg), 0 0 0 7px rgba(201,154,46,.28); }
@media (max-width: 720px) { .dayrow.today::after { left: -29px; } }

/* ---- still ahead ---- */
.dayrow.ahead::before { background: transparent;
                        background-image: linear-gradient(#b3cde5 58%, transparent 58%);
                        background-size: 2px 9px; }
.dayrow.ahead::after { background: var(--surface); box-shadow: inset 0 0 0 3px #6ba7dd, 0 0 0 3px var(--bg); }

.dayrow .dy { display: grid; gap: 1px; align-content: center; }
.dayrow .wd { font-size: 14px; font-weight: 750; color: var(--navy); }
.dayrow .dt { font-size: 12.5px; color: var(--ink-soft); }
.dayrow .st { justify-self: start; margin-top: 6px; font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
              font-weight: 800; padding: 3px 9px; border-radius: 999px; }
.dayrow .st.done { background: #dfe6ed; color: #7b8794; }
.dayrow .st.now  { background: var(--gold); color: #2e2003; }
.dayrow .st.next { background: var(--blue-100); color: var(--blue); }
.dayrow .ti { font-size: 16px; font-weight: 700; color: var(--navy); display: flex; gap: 8px; align-items: baseline; }
.dayrow .tick { flex: none; width: 19px; height: 19px; border-radius: 50%; background: #c3ceda; color: #fff;
                display: inline-grid; place-items: center; font-size: 11px; font-weight: 800; align-self: center; }
.dayrow .nt { font-size: 13.5px; color: var(--ink-soft); margin-top: 3px; line-height: 1.5; }
.dayrow.deadline { border-left: 5px solid var(--gold); }
.dayrow.panel { border-left: 5px solid var(--green); }
.dayrow.session { border-left: 5px solid var(--blue); }
.dayrow.onsite { border-left: 5px solid var(--purple); }
.dayrow.holiday { border-left: 5px solid #cdd7e0; }
.dayrow.holiday .ti { color: var(--ink-soft); }
.dayrow.past.onsite { border-left-color: #cdd7e0; }
.dayrow .btn[disabled] { opacity: .5; cursor: not-allowed; }
.gate { font-size: 12px; color: var(--ink-soft); text-align: right; margin-top: 4px; }
@media (max-width: 720px) { .gate { text-align: left; }
  .dayrow .dy { grid-auto-flow: column; justify-content: start; align-items: center; gap: 9px; }
  .dayrow .st { margin-top: 0; } }

/* =========================
   announcements — a notice board: one pinned lead, then cards you can scan
   ========================= */
.ann-top { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s4); align-items: flex-end; justify-content: space-between; }
.newcount { background: var(--blue-100); color: var(--blue); font-size: 12.5px; font-weight: 650;
            padding: 6px 13px; border-radius: 999px; white-space: nowrap; }
.newcount b { font-weight: 800; }
.newcount[hidden] { display: none; }

.anngrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--s4); margin-top: var(--s5); }
.note { position: relative; display: flex; flex-direction: column; gap: 12px;
        background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
        padding: var(--s5); box-shadow: var(--shadow);
        transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease; }
.note:hover { box-shadow: 0 10px 26px rgba(11,60,107,.11); transform: translateY(-2px); border-color: #cfe0f1; }
.note .ic { flex: none; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
            background: var(--blue-100); color: var(--blue); }
.note .ic svg { width: 19px; height: 19px; }
.note .nb { display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; min-width: 0; }
.note h4 { margin: 0; font-size: 16px; line-height: 1.35; color: var(--navy); }
.note p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink-soft); }
.note .mt { margin-top: auto; padding-top: 11px; font-size: 12.5px; color: #8d98a4; }
.note .dot { position: absolute; top: 15px; right: 15px; width: 9px; height: 9px; border-radius: 50%;
             background: var(--blue); box-shadow: 0 0 0 3px rgba(31,111,178,.18); }
.note.unread { background: #f9fcff; border-color: #cfe2f5; }
.note.important .ic { background: var(--gold-100); color: #8a6412; }

/* the pinned one leads the board across the full width */
.note.pinned { grid-column: 1 / -1; flex-direction: row; gap: var(--s5); align-items: flex-start;
               border-color: #eddcb2; border-left: 5px solid var(--gold);
               background: linear-gradient(180deg, #fffdf6 0%, var(--surface) 62%); }
.note.pinned .ic { width: 46px; height: 46px; border-radius: 13px; background: var(--gold); color: #2e2003; }
.note.pinned .ic svg { width: 23px; height: 23px; }
.note.pinned h4 { font-size: 20px; letter-spacing: -.01em; }
.note.pinned p { font-size: 15.5px; color: var(--ink); max-width: 88ch; }
.note.pinned .mt { padding-top: 8px; }
.ntag { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 800; color: #8a6412; }
@media (max-width: 620px) { .note.pinned { flex-direction: column; gap: 12px; } }

/* help desk */
.hd-wrap { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,320px); gap: var(--s5); align-items: start; }
@media (max-width: 900px) { .hd-wrap { grid-template-columns: minmax(0,1fr); } }
.thread { display: grid; gap: var(--s3); margin-bottom: var(--s4); }
.msg-row { display: flex; gap: var(--s3); }
.msg-row .av { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--blue-100); color: var(--navy);
               display: grid; place-items: center; font-size: 12px; font-weight: 800; }
.msg-row .bubble { background: var(--bg); border: 1px solid var(--line); border-radius: 4px var(--r) var(--r) var(--r); padding: 9px var(--s4); }
.msg-row .who { font-size: 12.5px; font-weight: 700; color: var(--navy); }
.msg-row .who span { font-weight: 500; color: var(--ink-soft); }
.msg-row .bd { font-size: 14px; color: var(--ink); margin-top: 2px; }
.composer { display: flex; gap: var(--s3); }
.composer input { flex: 1 1 auto; font: inherit; font-size: 14.5px; border: 1px solid var(--line); border-radius: var(--r); padding: 11px var(--s4); }
.composer input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(31,111,178,.15); }
.hk { list-style: none; padding: 0; margin: 0; }
.hk li { padding: 11px 0; border-top: 1px solid var(--line-soft); }
.hk li:first-child { border-top: 0; }
.hk b { display: block; font-size: 14px; color: var(--navy); }
.hk span { font-size: 13px; color: var(--ink-soft); }

/* Anonymous questions in the help desk */
.anon-note { display: flex; gap: var(--s3); align-items: flex-start; background: var(--blue-100); border-radius: var(--r);
             padding: var(--s3) var(--s4); font-size: 13px; color: var(--navy); margin-bottom: var(--s4); }
.anon-note svg { flex: none; margin-top: 1px; }
.msg-row .av.anon { background: var(--line-soft); color: #8d98a3; }
.msg-row .who .tagme { background: var(--green-100); color: var(--green); border-radius: 999px; padding: 1px 8px; font-size: 11px; font-weight: 700; }
.composer-wrap { display: grid; gap: var(--s3); }
.anon-switch { position: relative; display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--ink-soft); cursor: pointer; user-select: none; }
.anon-switch input { position: absolute; opacity: 0; pointer-events: none; }
.anon-switch .track { width: 40px; height: 22px; border-radius: 999px; background: var(--line); position: relative; transition: background .18s ease; flex: none; }
.anon-switch .track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%;
                             background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .18s ease; }
.anon-switch input:checked + .track { background: var(--green); }
.anon-switch input:checked + .track::after { transform: translateX(18px); }
.anon-switch input:focus-visible + .track { box-shadow: 0 0 0 3px rgba(31,111,178,.3); }
.anon-switch b { color: var(--navy); font-weight: 650; }

/* =====================================================================
   STEP Groups — the showcase. A roster on the left, one team filling
   the stage on the right, with the team's own accent driving the scene.
   ===================================================================== */
.showcase { --ac: #1f6fb2; --glow: rgba(31,111,178,.3);
            position: relative; overflow: hidden; padding: var(--s7) 0 var(--s7);
            background: #061a30; }
.showcase::before { content: ""; position: absolute; inset: 0; pointer-events: none;
                    background: radial-gradient(1100px 520px at 76% 8%, var(--glow) 0%, transparent 62%),
                                linear-gradient(158deg, #061a30 0%, #0a3159 58%, #0b3c6b 100%);
                    transition: background 1s cubic-bezier(.3,.7,.35,1); }
.showcase > * { position: relative; z-index: 1; }
.tmlist { align-self: start; }
.sc-grid { display: grid; grid-template-columns: minmax(0, 232px) minmax(0, 1fr); gap: var(--s6); align-items: start; }
@media (max-width: 960px) { .sc-grid { grid-template-columns: minmax(0,1fr); gap: var(--s5); } }

/* ---- the roster ---- */
.tml-head { font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
               color: var(--gold); padding-bottom: var(--s3); border-bottom: 1px solid rgba(255,255,255,.18); }
.tml-head span { color: #7fa6cb; margin-left: 6px; letter-spacing: .06em; }
.tml-body { position: relative; padding: 6px 0 0; }
.rs-mark { position: absolute; left: 0; top: 0; width: 3px; border-radius: 3px; background: var(--ac);
           box-shadow: 0 0 14px var(--ac); transition: transform .42s cubic-bezier(.34,.9,.3,1), height .42s cubic-bezier(.34,.9,.3,1), background .5s ease; }
.rsx { display: block; width: 100%; text-align: left; background: none; border: 0; font: inherit; cursor: pointer;
       color: #a8c6e2; padding: 9px 10px 9px 16px; border-radius: 8px; line-height: 1.3;
       transition: color .2s ease, background .2s ease, transform .3s cubic-bezier(.34,.9,.3,1); }
.rsx .rn { display: block; font-size: 14.5px; font-weight: 650; }
.rsx .ri { display: block; font-size: 11.5px; color: #6f93b6; margin-top: 1px; }
.rsx:hover { color: #fff; background: rgba(255,255,255,.06); }
.rsx:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.rsx[aria-selected="true"] { color: #fff; transform: translateX(4px); }
.rsx[aria-selected="true"] .rn { font-weight: 800; }
.rsx[aria-selected="true"] .ri { color: #9dbcd8; }
.tml-hint { font-size: 11.5px; color: #6f93b6; margin: var(--s4) 0 0; }

/* ---- the stage ---- */
.stagecard { position: relative; min-height: 580px; display: flex; flex-direction: column;
             border-radius: var(--r-lg); border: 1px solid rgba(255,255,255,.16);
             background: linear-gradient(150deg, rgba(255,255,255,.085) 0%, rgba(255,255,255,.028) 100%);
             padding: var(--s7) var(--s7) var(--s6); overflow: hidden; }
@media (max-width: 640px) { .stagecard { padding: var(--s5) var(--s4) var(--s4); min-height: 0; } }
.stagecard::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--ac);
                    transition: background .5s ease; }
/* The crest: the institution's mark washed into the card, with the running
   number standing in until that school's logo file is dropped into assets/logos. */
.st-crest { position: absolute; right: -14px; top: -18px; pointer-events: none; }
.st-num { display: block; position: relative; right: 8px; top: -16px;
          font-size: 200px; font-weight: 800; line-height: 1;
          color: rgba(255,255,255,.06); letter-spacing: -.05em; }
/* The crest files in assets/logos/wm are already white-on-transparent, built from
   each seal's own ink, so the lettering and inner detail stay legible. */
.st-logo { display: block; width: 330px; height: 330px; object-fit: contain;
           opacity: .19; filter: blur(1.1px);
           animation: crestIn .8s cubic-bezier(.2,.7,.3,1) both; }
.st-logo[hidden], .st-num[hidden] { display: none; }
@keyframes crestIn { from { opacity: 0; transform: scale(1.09); filter: blur(13px); }
                     to   { opacity: .19; transform: none; filter: blur(1.1px); } }
/* Add class "bold-crest" to .showcase to bring the marks up further. */
.showcase.bold-crest .st-logo { opacity: .27; filter: blur(.6px); }
@media (max-width: 640px) {
  .st-crest { right: -12px; top: -12px; }
  .st-num { font-size: 116px; right: 4px; top: -8px; }
  .st-logo { width: 168px; height: 168px; }
}
@media (prefers-reduced-motion: reduce) { .st-logo { animation: none; } }
.st-body { flex: 1 1 auto; position: relative; z-index: 1; }
.st-meta { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
.st-abbr { background: var(--ac); color: #06182b; font-size: 12.5px; font-weight: 800; letter-spacing: .1em;
           text-transform: uppercase; padding: 5px 13px; border-radius: 999px; transition: background .5s ease; }
.st-region { font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #8fb4d6; }
.st-name { color: #fff; font-size: clamp(42px, 7.4vw, 98px); line-height: 1.0; letter-spacing: -.032em;
           margin: 18px 0 0; perspective: 800px; }
.st-name .ch { display: inline-block; white-space: pre; transform-origin: 50% 100%; }
.st-rule { height: 4px; width: 108px; border-radius: 4px; background: var(--ac); margin: 24px 0 26px;
           transform-origin: left center; }
.st-inst { display: flex; gap: 10px; align-items: center; color: #d7e7f6; font-size: 18.5px; font-weight: 600; }
.st-inst svg { flex: none; width: 21px; height: 21px; color: var(--ac); transition: color .5s ease; }
.st-about { margin-top: var(--s6); max-width: 64ch; }
.st-label { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
            color: #7fa6cb; margin-bottom: 8px; }
.st-about p { margin: 0; color: #eaf3fb; font-size: 19.5px; line-height: 1.6; }
.st-guard { margin-top: var(--s6); font-size: 13.5px; line-height: 1.65; color: #8fb4d6; max-width: 60ch;
            padding-left: var(--s4); border-left: 1px solid rgba(255,255,255,.18); }

/* the pieces that move when a team is chosen */
.st-in > * { animation: stRise .52s cubic-bezier(.16,.84,.34,1) both; }
.st-in .st-meta   { animation-delay: 40ms; }
.st-in .st-rule   { animation: stRule .5s cubic-bezier(.16,.84,.34,1) both; animation-delay: 210ms; }
.st-in .st-inst   { animation-delay: 260ms; }
.st-in .st-about  { animation-delay: 320ms; }
.st-in .st-guard  { animation-delay: 380ms; }
.st-in .ch { animation: stChar .6s cubic-bezier(.16,.84,.34,1) both;
             animation-delay: calc(90ms + var(--i) * 26ms); }
@keyframes stRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes stRule { from { opacity: 0; transform: scaleX(0); } to { opacity: 1; transform: scaleX(1); } }
@keyframes stChar { from { opacity: 0; transform: translateY(calc(var(--dir, 1) * 46px)) rotateX(calc(var(--dir, 1) * -52deg)); filter: blur(7px); }
                    to   { opacity: 1; transform: none; filter: blur(0); } }

/* the outgoing name, blown up and faded out behind the new one */
.st-ghost { position: absolute; left: var(--s7); right: var(--s7); top: var(--gy, 0); z-index: 0; pointer-events: none;
            color: #fff; font-weight: 800; font-size: clamp(38px, 6.4vw, 82px); line-height: 1.02; letter-spacing: -.03em;
            animation: stGhost .62s cubic-bezier(.25,.6,.3,1) both; }
@keyframes stGhost { from { opacity: .5; transform: scale(1); filter: blur(0); }
                     to   { opacity: 0; transform: scale(1.14); filter: blur(11px); } }

.st-nav { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s6); padding-top: var(--s4);
          border-top: 1px solid rgba(255,255,255,.14); position: relative; z-index: 1; }
.stbtn { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
         background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.26); color: #fff;
         transition: background .18s ease, transform .18s ease; }
.stbtn:hover { background: rgba(255,255,255,.2); transform: scale(1.06); }
.stbtn svg { width: 13px; height: 13px; }
.st-pos { font-size: 12.5px; font-weight: 700; letter-spacing: .1em; color: #8fb4d6; }

@media (prefers-reduced-motion: reduce) {
  .st-in > *, .st-in .ch, .st-in .st-rule { animation: none !important; opacity: 1; transform: none; filter: none; }
  .st-ghost { display: none; }
  .rs-mark, .rsx, .showcase::before { transition: none; }
}

/* ---- where the cohort comes from ---- */
.instgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: var(--s4); }
.inst { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line);
        border-radius: var(--r-lg); padding: var(--s5); box-shadow: var(--shadow);
        transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease; }
.inst:hover { box-shadow: 0 12px 28px rgba(11,60,107,.12); transform: translateY(-2px); border-color: #cfe0f1; }
.inst .ih { display: flex; gap: var(--s4); align-items: flex-start; }
.inst .ilogo { flex: none; width: 56px; height: 56px; display: grid; place-items: center; }
.inst .ilogo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.inst .ihx { min-width: 0; }
.inst .ia { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .12em;
            text-transform: uppercase; color: var(--ink-soft); }
.inst h4 { margin: 4px 0 4px; font-size: 15.5px; line-height: 1.35; color: var(--navy); }
.inst .ip { display: block; font-size: 13px; color: var(--ink-soft); }
.inst .it { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin-top: auto;
            padding-top: var(--s4); margin-left: calc(56px + var(--s4)); }
@media (max-width: 420px) { .inst .it { margin-left: 0; } }
.inst .itl { font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
             color: #98a3ad; margin-right: 2px; }
.inst .tp { font-size: 12.5px; font-weight: 700; color: var(--navy); background: var(--blue-100);
            border-radius: 999px; padding: 4px 11px; }
/* ---- the disclosure note ---- */
.guardcard { display: flex; gap: var(--s5); align-items: flex-start; background: var(--blue-100);
             border: 1px solid #cfe2f5; border-radius: var(--r-lg); padding: var(--s5) var(--s6); }
@media (max-width: 600px) { .guardcard { flex-direction: column; gap: var(--s4); padding: var(--s5) var(--s4); } }
.gc-ic { flex: none; width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
         background: var(--navy); color: #fff; }
.gc-ic svg { width: 22px; height: 22px; }
.guardcard h3 { margin: 0 0 6px; font-size: 17px; color: var(--navy); }
.guardcard p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--ink); max-width: 88ch; }

/* On a narrow screen the roster becomes a swipeable strip of pills, so the
   chosen team is still the first thing you see. */
@media (max-width: 960px) {
  .tml-body { display: flex; gap: 8px; overflow-x: auto; padding: 8px 2px 12px;
              scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
  .tml-body::-webkit-scrollbar { height: 4px; }
  .tml-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,.28); border-radius: 4px; }
  .rs-mark { display: none; }
  .rsx { flex: 0 0 auto; width: auto; padding: 8px 15px; border-radius: 999px; scroll-snap-align: center;
         border: 1px solid rgba(255,255,255,.22); }
  .rsx .rn { font-size: 14px; white-space: nowrap; }
  .rsx .ri { display: none; }
  .rsx[aria-selected="true"] { transform: none; background: var(--ac); border-color: var(--ac); }
  .rsx[aria-selected="true"] .rn { color: #06182b; }
  .tml-hint { display: none; }
}

/* =====================================================================
   Home — articles and publications: one lead piece, then the rest as rows
   ===================================================================== */
.pubfilter { display: inline-flex; gap: 4px; padding: 4px; background: var(--surface);
             border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--shadow);
             max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.pubfilter::-webkit-scrollbar { display: none; }
.pf { font: inherit; font-size: 13.5px; font-weight: 700; color: var(--ink-soft); background: none;
      border: 0; padding: 8px 15px; border-radius: 999px; cursor: pointer; white-space: nowrap;
      transition: background .16s ease, color .16s ease; }
.pf span { display: inline-block; margin-left: 7px; font-size: 11.5px; font-weight: 800;
           color: var(--ink-soft); background: var(--bg); border-radius: 999px; padding: 1px 7px; }
.pf:hover { background: var(--blue-100); color: var(--navy); }
.pf[aria-selected="true"] { background: var(--navy); color: #fff; }
.pf[aria-selected="true"] span { background: rgba(255,255,255,.2); color: #fff; }
.pf:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (max-width: 460px) {
  /* room is tight — the counts go, the labels stay */
  .pf { padding: 8px 13px; font-size: 13px; }
  .pf span { display: none; }
}
.pub-empty { font-size: 14.5px; color: var(--ink-soft); padding: var(--s6); text-align: center;
             background: var(--surface); border: 1px dashed var(--line); border-radius: var(--r-lg); }

.readgrid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: var(--s5); align-items: start; }
@media (max-width: 880px) { .readgrid { grid-template-columns: minmax(0,1fr); } }

/* the lead piece */
.feat { display: flex; flex-direction: column; overflow: hidden; background: var(--surface);
        border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow);
        text-decoration: none; color: inherit;
        transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease; }
.feat:hover { box-shadow: 0 16px 34px rgba(11,60,107,.15); transform: translateY(-2px);
              border-color: #cfe0f1; text-decoration: none; }
.feat .cover { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--navy); }
.feat .cover img { width: 100%; height: 100%; object-fit: cover; display: block;
                   transition: transform .5s cubic-bezier(.25,.7,.3,1); }
.feat:hover .cover img { transform: scale(1.04); }
.feat .kind { position: absolute; left: var(--s5); top: var(--s4); display: inline-flex; align-items: center;
              gap: 6px; background: rgba(7,35,62,.86); backdrop-filter: blur(3px); color: #fff;
              font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
              padding: 6px 13px; border-radius: 999px; }
.feat.publication .kind { background: var(--gold); color: #2e2003; }
.feat .kind svg { width: 13px; height: 13px; }
.feat .fb { display: block; padding: var(--s5); }
.feat strong { display: block; font-size: 23px; line-height: 1.3; color: var(--navy);
               margin: 10px 0 9px; letter-spacing: -.012em; }
.feat .ex { display: block; font-size: 15px; line-height: 1.65; color: var(--ink-soft); }
.feat .by { display: block; font-size: 12.5px; color: #8d98a4; margin-top: var(--s4);
            padding-top: var(--s3); border-top: 1px solid var(--line-soft); }

.tagline { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tagline .tg { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
               color: var(--blue); background: var(--blue-100); border-radius: 999px; padding: 3px 10px; }
.tagline .dt { font-size: 12.5px; color: #8d98a4; }
.rd.publication .tagline .tg, .feat.publication .tagline .tg { color: #8a6412; background: var(--gold-100); }

/* the rest, as rows you can scan */
.readlist { display: grid; gap: var(--s3); }
.rd { display: flex; gap: var(--s4); align-items: center; text-decoration: none; color: inherit;
      background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
      padding: var(--s4); box-shadow: var(--shadow);
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.rd:hover { transform: translateX(3px); box-shadow: 0 12px 26px rgba(11,60,107,.12);
            border-color: #cfe0f1; text-decoration: none; }
.rd .th { position: relative; flex: none; width: 92px; aspect-ratio: 4 / 3; border-radius: var(--r);
          overflow: hidden; background: var(--navy); }
.rd .th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rd .pin { position: absolute; right: 4px; bottom: 4px; width: 21px; height: 21px; border-radius: 6px;
           display: grid; place-items: center; background: var(--gold); color: #2e2003; }
.rd .pin svg { width: 12px; height: 12px; }
.rd .rb { display: block; min-width: 0; flex: 1 1 auto; }
.rd strong { display: block; font-size: 16px; line-height: 1.4; color: var(--navy); margin: 7px 0 5px; }
.rd .by { display: block; font-size: 12.5px; color: #8d98a4; }
.rd .go { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
          background: var(--bg); color: var(--blue); transition: background .18s ease, transform .18s ease; }
.rd .go svg { width: 14px; height: 14px; }
.rd:hover .go { background: var(--blue-100); transform: translateX(2px); }
@media (max-width: 480px) {
  .rd { gap: var(--s3); padding: var(--s3); }
  .rd .th { width: 72px; }
  .rd .go { display: none; }
}


/* =====================================================================
   STEP Groups — the showcase. A roster on the left, one team filling
   the stage on the right, with the team's own accent driving the scene.
   ===================================================================== */
.showcase { --ac: #1f6fb2; --glow: rgba(31,111,178,.3);
            position: relative; overflow: hidden; padding: var(--s7) 0 var(--s7);
            background: #061a30; }
.showcase::before { content: ""; position: absolute; inset: 0; pointer-events: none;
                    background: radial-gradient(1100px 520px at 76% 8%, var(--glow) 0%, transparent 62%),
                                linear-gradient(158deg, #061a30 0%, #0a3159 58%, #0b3c6b 100%);
                    transition: background 1s cubic-bezier(.3,.7,.35,1); }
.showcase > * { position: relative; z-index: 1; }
.tmlist { align-self: start; }
.sc-grid { display: grid; grid-template-columns: minmax(0, 232px) minmax(0, 1fr); gap: var(--s6); align-items: start; }
@media (max-width: 960px) { .sc-grid { grid-template-columns: minmax(0,1fr); gap: var(--s5); } }

/* ---- the roster ---- */
.tml-head { font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
               color: var(--gold); padding-bottom: var(--s3); border-bottom: 1px solid rgba(255,255,255,.18); }
.tml-head span { color: #7fa6cb; margin-left: 6px; letter-spacing: .06em; }
.tml-body { position: relative; padding: 6px 0 0; }
.rs-mark { position: absolute; left: 0; top: 0; width: 3px; border-radius: 3px; background: var(--ac);
           box-shadow: 0 0 14px var(--ac); transition: transform .42s cubic-bezier(.34,.9,.3,1), height .42s cubic-bezier(.34,.9,.3,1), background .5s ease; }
.rsx { display: block; width: 100%; text-align: left; background: none; border: 0; font: inherit; cursor: pointer;
       color: #a8c6e2; padding: 9px 10px 9px 16px; border-radius: 8px; line-height: 1.3;
       transition: color .2s ease, background .2s ease, transform .3s cubic-bezier(.34,.9,.3,1); }
.rsx .rn { display: block; font-size: 14.5px; font-weight: 650; }
.rsx .ri { display: block; font-size: 11.5px; color: #6f93b6; margin-top: 1px; }
.rsx:hover { color: #fff; background: rgba(255,255,255,.06); }
.rsx:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.rsx[aria-selected="true"] { color: #fff; transform: translateX(4px); }
.rsx[aria-selected="true"] .rn { font-weight: 800; }
.rsx[aria-selected="true"] .ri { color: #9dbcd8; }
.tml-hint { font-size: 11.5px; color: #6f93b6; margin: var(--s4) 0 0; }

/* ---- the stage ---- */
.stagecard { position: relative; min-height: 580px; display: flex; flex-direction: column;
             border-radius: var(--r-lg); border: 1px solid rgba(255,255,255,.16);
             background: linear-gradient(150deg, rgba(255,255,255,.085) 0%, rgba(255,255,255,.028) 100%);
             padding: var(--s7) var(--s7) var(--s6); overflow: hidden; }
@media (max-width: 640px) { .stagecard { padding: var(--s5) var(--s4) var(--s4); min-height: 0; } }
.stagecard::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--ac);
                    transition: background .5s ease; }
/* The crest: the institution's mark washed into the card, with the running
   number standing in until that school's logo file is dropped into assets/logos. */
.st-crest { position: absolute; right: -14px; top: -18px; pointer-events: none; }
.st-num { display: block; position: relative; right: 8px; top: -16px;
          font-size: 200px; font-weight: 800; line-height: 1;
          color: rgba(255,255,255,.06); letter-spacing: -.05em; }
/* The crest files in assets/logos/wm are already white-on-transparent, built from
   each seal's own ink, so the lettering and inner detail stay legible. */
.st-logo { display: block; width: 330px; height: 330px; object-fit: contain;
           opacity: .19; filter: blur(1.1px);
           animation: crestIn .8s cubic-bezier(.2,.7,.3,1) both; }
.st-logo[hidden], .st-num[hidden] { display: none; }
@keyframes crestIn { from { opacity: 0; transform: scale(1.09); filter: blur(13px); }
                     to   { opacity: .19; transform: none; filter: blur(1.1px); } }
/* Add class "bold-crest" to .showcase to bring the marks up further. */
.showcase.bold-crest .st-logo { opacity: .27; filter: blur(.6px); }
@media (max-width: 640px) {
  .st-crest { right: -12px; top: -12px; }
  .st-num { font-size: 116px; right: 4px; top: -8px; }
  .st-logo { width: 168px; height: 168px; }
}
@media (prefers-reduced-motion: reduce) { .st-logo { animation: none; } }
.st-body { flex: 1 1 auto; position: relative; z-index: 1; }
.st-meta { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
.st-abbr { background: var(--ac); color: #06182b; font-size: 12.5px; font-weight: 800; letter-spacing: .1em;
           text-transform: uppercase; padding: 5px 13px; border-radius: 999px; transition: background .5s ease; }
.st-region { font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #8fb4d6; }
.st-name { color: #fff; font-size: clamp(42px, 7.4vw, 98px); line-height: 1.0; letter-spacing: -.032em;
           margin: 18px 0 0; perspective: 800px; }
.st-name .ch { display: inline-block; white-space: pre; transform-origin: 50% 100%; }
.st-rule { height: 4px; width: 108px; border-radius: 4px; background: var(--ac); margin: 24px 0 26px;
           transform-origin: left center; }
.st-inst { display: flex; gap: 10px; align-items: center; color: #d7e7f6; font-size: 18.5px; font-weight: 600; }
.st-inst svg { flex: none; width: 21px; height: 21px; color: var(--ac); transition: color .5s ease; }
.st-about { margin-top: var(--s6); max-width: 64ch; }
.st-label { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
            color: #7fa6cb; margin-bottom: 8px; }
.st-about p { margin: 0; color: #eaf3fb; font-size: 19.5px; line-height: 1.6; }
.st-guard { margin-top: var(--s6); font-size: 13.5px; line-height: 1.65; color: #8fb4d6; max-width: 60ch;
            padding-left: var(--s4); border-left: 1px solid rgba(255,255,255,.18); }

/* the pieces that move when a team is chosen */
.st-in > * { animation: stRise .52s cubic-bezier(.16,.84,.34,1) both; }
.st-in .st-meta   { animation-delay: 40ms; }
.st-in .st-rule   { animation: stRule .5s cubic-bezier(.16,.84,.34,1) both; animation-delay: 210ms; }
.st-in .st-inst   { animation-delay: 260ms; }
.st-in .st-about  { animation-delay: 320ms; }
.st-in .st-guard  { animation-delay: 380ms; }
.st-in .ch { animation: stChar .6s cubic-bezier(.16,.84,.34,1) both;
             animation-delay: calc(90ms + var(--i) * 26ms); }
@keyframes stRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes stRule { from { opacity: 0; transform: scaleX(0); } to { opacity: 1; transform: scaleX(1); } }
@keyframes stChar { from { opacity: 0; transform: translateY(calc(var(--dir, 1) * 46px)) rotateX(calc(var(--dir, 1) * -52deg)); filter: blur(7px); }
                    to   { opacity: 1; transform: none; filter: blur(0); } }

/* the outgoing name, blown up and faded out behind the new one */
.st-ghost { position: absolute; left: var(--s7); right: var(--s7); top: var(--gy, 0); z-index: 0; pointer-events: none;
            color: #fff; font-weight: 800; font-size: clamp(38px, 6.4vw, 82px); line-height: 1.02; letter-spacing: -.03em;
            animation: stGhost .62s cubic-bezier(.25,.6,.3,1) both; }
@keyframes stGhost { from { opacity: .5; transform: scale(1); filter: blur(0); }
                     to   { opacity: 0; transform: scale(1.14); filter: blur(11px); } }

.st-nav { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s6); padding-top: var(--s4);
          border-top: 1px solid rgba(255,255,255,.14); position: relative; z-index: 1; }
.stbtn { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
         background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.26); color: #fff;
         transition: background .18s ease, transform .18s ease; }
.stbtn:hover { background: rgba(255,255,255,.2); transform: scale(1.06); }
.stbtn svg { width: 13px; height: 13px; }
.st-pos { font-size: 12.5px; font-weight: 700; letter-spacing: .1em; color: #8fb4d6; }

@media (prefers-reduced-motion: reduce) {
  .st-in > *, .st-in .ch, .st-in .st-rule { animation: none !important; opacity: 1; transform: none; filter: none; }
  .st-ghost { display: none; }
  .rs-mark, .rsx, .showcase::before { transition: none; }
}

/* ---- where the cohort comes from ---- */
.instgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: var(--s4); }
.inst { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line);
        border-radius: var(--r-lg); padding: var(--s5); box-shadow: var(--shadow);
        transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease; }
.inst:hover { box-shadow: 0 12px 28px rgba(11,60,107,.12); transform: translateY(-2px); border-color: #cfe0f1; }
.inst .ih { display: flex; gap: var(--s4); align-items: flex-start; }
.inst .ilogo { flex: none; width: 56px; height: 56px; display: grid; place-items: center; }
.inst .ilogo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.inst .ihx { min-width: 0; }
.inst .ia { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .12em;
            text-transform: uppercase; color: var(--ink-soft); }
.inst h4 { margin: 4px 0 4px; font-size: 15.5px; line-height: 1.35; color: var(--navy); }
.inst .ip { display: block; font-size: 13px; color: var(--ink-soft); }
.inst .it { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin-top: auto;
            padding-top: var(--s4); margin-left: calc(56px + var(--s4)); }
@media (max-width: 420px) { .inst .it { margin-left: 0; } }
.inst .itl { font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
             color: #98a3ad; margin-right: 2px; }
.inst .tp { font-size: 12.5px; font-weight: 700; color: var(--navy); background: var(--blue-100);
            border-radius: 999px; padding: 4px 11px; }
/* ---- the disclosure note ---- */
.guardcard { display: flex; gap: var(--s5); align-items: flex-start; background: var(--blue-100);
             border: 1px solid #cfe2f5; border-radius: var(--r-lg); padding: var(--s5) var(--s6); }
@media (max-width: 600px) { .guardcard { flex-direction: column; gap: var(--s4); padding: var(--s5) var(--s4); } }
.gc-ic { flex: none; width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
         background: var(--navy); color: #fff; }
.gc-ic svg { width: 22px; height: 22px; }
.guardcard h3 { margin: 0 0 6px; font-size: 17px; color: var(--navy); }
.guardcard p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--ink); max-width: 88ch; }

/* On a narrow screen the roster becomes a swipeable strip of pills, so the
   chosen team is still the first thing you see. */
@media (max-width: 960px) {
  .tml-body { display: flex; gap: 8px; overflow-x: auto; padding: 8px 2px 12px;
              scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
  .tml-body::-webkit-scrollbar { height: 4px; }
  .tml-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,.28); border-radius: 4px; }
  .rs-mark { display: none; }
  .rsx { flex: 0 0 auto; width: auto; padding: 8px 15px; border-radius: 999px; scroll-snap-align: center;
         border: 1px solid rgba(255,255,255,.22); }
  .rsx .rn { font-size: 14px; white-space: nowrap; }
  .rsx .ri { display: none; }
  .rsx[aria-selected="true"] { transform: none; background: var(--ac); border-color: var(--ac); }
  .rsx[aria-selected="true"] .rn { color: #06182b; }
  .tml-hint { display: none; }
}

/* the cohort in numbers, on the light page */
.cstats { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 1px;
          background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg);
          overflow: hidden; box-shadow: var(--shadow); }
.cs { background: var(--surface); padding: var(--s5) var(--s5) calc(var(--s5) + 2px); }
.cs b { display: block; font-size: 40px; font-weight: 800; line-height: 1; letter-spacing: -.035em; color: var(--navy); }
.cs .k { display: block; font-size: 13.5px; font-weight: 700; color: var(--navy); margin-top: 10px; }
.cs .s { display: block; font-size: 12.5px; color: var(--ink-soft); margin-top: 2px; }

/* =====================================================================
   Trainers · Mentors · Panel
   ===================================================================== */
.picker-row { display: flex; flex-wrap: wrap; gap: var(--s4) var(--s5); align-items: center; }
.picker { position: relative; display: inline-flex; align-items: center; gap: var(--s3);
          background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
          padding: 10px var(--s5) 10px var(--s4); box-shadow: var(--shadow); cursor: pointer; }
.picker:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(31,111,178,.15); }
.pk-lb { font-size: 11px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-soft); }
.picker select { appearance: none; -webkit-appearance: none; background: none; border: 0; font: inherit;
                 font-size: 19px; font-weight: 750; color: var(--navy); padding-right: 22px; cursor: pointer; }
.picker select:focus { outline: none; }
.pk-ch { position: absolute; right: 14px; width: 16px; height: 16px; color: var(--blue); pointer-events: none; }
.picker-note { margin: 0; font-size: 14.5px; color: var(--ink-soft); max-width: 60ch; }
.mt-7 { margin-top: var(--s7); }

/* people cards, shared by trainers and mentors */
.fgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(276px, 1fr)); gap: var(--s4); }
.fcard { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line);
         border-radius: var(--r-lg); padding: var(--s5); box-shadow: var(--shadow);
         transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease; }
.fcard:hover { box-shadow: 0 12px 28px rgba(11,60,107,.12); transform: translateY(-2px); border-color: #cfe0f1; }
.fh { display: flex; gap: var(--s4); align-items: center; }
.fav { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
       background: var(--navy); color: #fff; font-size: 14.5px; font-weight: 800; letter-spacing: .02em; }
.fav.sm { width: 28px; height: 28px; font-size: 11px; background: var(--blue-100); color: var(--navy); }
.fhx { min-width: 0; }
.fcard h4 { margin: 0; font-size: 16px; line-height: 1.3; color: var(--navy); }
.fo { display: block; font-size: 12.5px; color: var(--ink-soft); margin-top: 2px; }
.ffocus { margin: var(--s4) 0 0; font-size: 14px; line-height: 1.6; color: var(--ink-soft); }
.fmods { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: auto; padding-top: var(--s4); }
.mod { font-size: 11.5px; font-weight: 800; letter-spacing: .04em; color: var(--blue);
       background: var(--blue-100); border-radius: 6px; padding: 3px 8px; }
.fmn { font-size: 12px; color: #98a3ad; margin-left: auto; }
.fteam { display: flex; gap: var(--s3); align-items: center; margin-top: auto; padding-top: var(--s4);
         border-top: 1px solid var(--line-soft); }
.ftx b { display: block; font-size: 14.5px; color: var(--navy); }
.ftx span { font-size: 12.5px; color: var(--ink-soft); }
.tlogo { flex: none; width: 38px; height: 38px; display: grid; place-items: center; }
.tlogo.sm { width: 26px; height: 26px; }
.tlogo img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* the curriculum list */
.curr { display: grid; gap: 10px; }
.crow { display: grid; grid-template-columns: 104px minmax(0,1fr) 132px; gap: var(--s4);
        background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
        padding: var(--s4) var(--s5); box-shadow: var(--shadow); align-items: start; }
@media (max-width: 760px) { .crow { grid-template-columns: minmax(0,1fr); gap: var(--s3); } }
.crow.done { background: #eff3f7; border-color: #e0e7ee; box-shadow: none; }
.crow.done .ctitle { color: #7b8794; }
.crow.now { border-color: var(--gold); background: #fffdf7;
            box-shadow: 0 0 0 3px rgba(201,154,46,.15), 0 10px 22px rgba(11,60,107,.09); }
.cwk b { display: block; font-size: 13px; font-weight: 750; color: var(--navy); }
.cwk .code { display: inline-block; margin-top: 4px; font-size: 11px; font-weight: 800; letter-spacing: .06em;
             color: var(--blue); background: var(--blue-100); border-radius: 6px; padding: 2px 7px; }
.crow.done .cwk b { color: #8d98a4; }
.ctitle { font-size: 16px; font-weight: 700; color: var(--navy); line-height: 1.35; }
.cmeta { font-size: 12.5px; color: var(--ink-soft); margin-top: 3px; }
.ccov { font-size: 13.5px; color: var(--ink-soft); margin-top: 7px; line-height: 1.55; }
.cdel { font-size: 13.5px; color: var(--ink); margin-top: 8px; line-height: 1.5; }
.cdel span { display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: .12em;
             text-transform: uppercase; color: #8a6412; background: var(--gold-100);
             border-radius: 5px; padding: 2px 7px; margin-right: 7px; }
.cass { margin-top: 9px; }
.cass summary { font-size: 12.5px; font-weight: 700; color: var(--blue); cursor: pointer; }
.cass summary::marker { color: var(--light-blue); }
.cass ul { list-style: none; margin: 8px 0 0; padding: 0 0 0 2px; }
.cass li { font-size: 13px; line-height: 1.55; color: var(--ink-soft); padding: 5px 0;
           border-top: 1px solid var(--line-soft); }
.cass li:first-child { border-top: 0; }
.cass li b { color: var(--navy); margin-right: 6px; }
.cass li.grp { font-weight: 700; color: var(--navy); background: var(--bg); border-radius: 6px;
               padding: 5px 9px; margin-top: 4px; }
.cside { text-align: right; }
@media (max-width: 760px) { .cside { text-align: left; } }
.cstat { display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: .1em;
         text-transform: uppercase; padding: 3px 9px; border-radius: 999px; }
.cstat.done { background: #dfe6ed; color: #7b8794; }
.cstat.now { background: var(--gold); color: #2e2003; }
.cstat.next { background: var(--blue-100); color: var(--blue); }
.cslides { display: block; font-size: 12px; color: #98a3ad; margin-top: 6px; }
.crow.has-slides .cslides { color: var(--green); font-weight: 650; }

/* posting a deck */
.upl { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,1fr); gap: var(--s5); align-items: start; }
@media (max-width: 820px) { .upl { grid-template-columns: minmax(0,1fr); } }
.upl .drop { display: grid; place-items: center; gap: 4px; text-align: center; cursor: pointer;
             border: 2px dashed var(--line); border-radius: var(--r-lg); background: var(--surface);
             padding: var(--s7) var(--s5); transition: border-color .18s ease, background .18s ease; }
.upl .drop:hover, .upl .drop.over { border-color: var(--blue); background: var(--blue-100); }
.dz-ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
         background: var(--blue-100); color: var(--blue); margin-bottom: 6px; }
.dz-ic svg { width: 22px; height: 22px; }
.upl .drop strong { font-size: 15.5px; color: var(--navy); }
.upl-side { display: grid; gap: var(--s4); }
.fld { display: grid; gap: 5px; }
.fld > span { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.fld select { font: inherit; font-size: 13.5px; color: var(--navy); background: var(--surface);
              border: 1px solid var(--line); border-radius: var(--r); padding: 7px var(--s3); max-width: 100%; }
.fld select:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(31,111,178,.15); }
.posted { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s4) var(--s5); }
.pl-h { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
        color: var(--ink-soft); padding-bottom: var(--s3); }
.pl { display: flex; gap: var(--s3); align-items: center; padding: 10px 0; border-top: 1px solid var(--line-soft); }
.pl .ft { flex: none; width: 38px; height: 38px; border-radius: var(--r); display: grid; place-items: center;
          background: var(--blue-100); color: var(--blue); font-size: 10.5px; font-weight: 800; }
.pl .pn { min-width: 0; }
.pl .pn b { display: block; font-size: 14px; color: var(--navy); overflow-wrap: anywhere; }
.pl .pn span { font-size: 12px; color: var(--ink-soft); }
.lnk { margin-left: auto; background: none; border: 0; font: inherit; font-size: 12.5px; font-weight: 650;
       color: var(--red); cursor: pointer; padding: 4px 6px; }
.lnk:hover { text-decoration: underline; }

/* the mentoring week */
.sched { display: grid; gap: var(--s4); }
.sday { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
        overflow: hidden; box-shadow: var(--shadow); }
.sday.past { background: #eff3f7; border-color: #e0e7ee; box-shadow: none; }
.sday.today { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,154,46,.16), 0 10px 24px rgba(11,60,107,.1); }
.sdh { display: flex; flex-wrap: wrap; gap: 4px var(--s3); align-items: baseline;
       padding: var(--s4) var(--s5); border-bottom: 1px solid var(--line-soft); background: var(--bg); }
.sday.today .sdh { background: var(--gold-100); }
.sdh b { font-size: 15px; color: var(--navy); }
.sdh span { font-size: 12.5px; color: var(--ink-soft); }
.srow { display: flex; gap: var(--s4); align-items: center; padding: var(--s4) var(--s5);
        border-top: 1px solid var(--line-soft); }
.sbody .srow:first-child { border-top: 0; }
.stime { flex: none; width: 74px; font-size: 15px; font-weight: 750; color: var(--navy); }
.stime small { display: block; font-size: 11.5px; font-weight: 500; color: var(--ink-soft); }
.steam { display: flex; gap: var(--s3); align-items: center; min-width: 0; }
.steam b { font-size: 15px; color: var(--navy); }
.smn { display: block; font-size: 12.5px; color: var(--ink-soft); }
.srow .btn, .sdone { margin-left: auto; flex: none; }
.sdone { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #98a3ad; }
.sday.past .steam b, .sday.past .stime { color: #8d98a4; }

/* the panels */
.pgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: var(--s4); }
.pcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
         padding: var(--s5); box-shadow: var(--shadow); border-top: 4px solid var(--green); }
.ph { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); }
.ph .pl { font-size: 17px; font-weight: 800; color: var(--navy); display: block; padding: 0; border: 0; }
.pn2 { font-size: 12px; color: var(--ink-soft); }
.pmembers { display: grid; gap: 8px; margin: var(--s4) 0; padding: var(--s4) 0;
            border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.pm { display: flex; gap: 9px; align-items: center; font-size: 14px; color: var(--ink); }
.pslots { display: grid; gap: 7px; }
.ps { display: flex; gap: 9px; align-items: center; }
.pst { flex: none; font-size: 12px; font-weight: 800; color: var(--green); background: var(--green-100);
       border-radius: 6px; padding: 3px 8px; min-width: 52px; text-align: center; }
.psn { font-size: 14px; font-weight: 650; color: var(--navy); }

/* the score sheet */
.sheet2 { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
          box-shadow: var(--shadow); overflow: hidden; }
.sh-top { display: flex; flex-wrap: nowrap; gap: var(--s4); align-items: center;
          justify-content: space-between; padding: var(--s3) var(--s5);
          background: linear-gradient(140deg, #072341 0%, #0b3c6b 70%, #10508e 100%); color: #fff; }
.sh-code { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.sh-top h3 { margin: 2px 0 2px; color: #fff; font-size: clamp(18px, 1.9vw, 22px); line-height: 1.2; }
.sh-meta { font-size: 12px; color: #cfe3f6; }
.sh-picks { display: flex; flex-wrap: nowrap; gap: var(--s3); flex: none; }
.sh-tx { min-width: 0; }
@media (max-width: 860px) { .sh-top { flex-wrap: wrap; } .sh-picks { flex-wrap: wrap; } }
.sh-picks .fld > span { color: #9fc4e6; }
.sh-picks select { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.28); color: #fff; }
.sh-picks select option { color: var(--ink); }
/* the team strip — the team being scored is unmistakable */
.tm-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 10px var(--s5) 13px;
           background: var(--bg); border-bottom: 1px solid var(--line); }
@media (max-width: 640px) { .tm-tabs { padding: var(--s3) var(--s4) var(--s4); } }
.tm-tabs::-webkit-scrollbar { height: 5px; }
.tm-tabs::-webkit-scrollbar-thumb { background: var(--line); border-radius: 5px; }
.tmb { position: relative; flex: 0 0 auto; width: 262px; display: flex; gap: 9px; align-items: center;
       cursor: pointer; font: inherit; text-align: left; background: var(--surface);
       border: 1px solid var(--line); border-radius: var(--r); padding: 7px 11px 7px 9px; color: var(--ink);
       transition: background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.tmb:hover { border-color: #bcd4ea; transform: translateY(-1px); }
.tmb:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.tmb-slot { flex: none; font-size: 10.5px; font-weight: 800; color: var(--green); background: var(--green-100);
            border-radius: 5px; padding: 3px 6px; }
.tmb .tlogo { width: 22px; height: 22px; opacity: .5; transition: opacity .18s ease; }
.tmb-tx { min-width: 0; flex: 1 1 auto; }
.tmb-tx b { display: block; font-size: 13.5px; font-weight: 750; color: var(--navy); line-height: 1.2;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tmb-st { display: block; font-size: 11px; color: var(--ink-soft); margin-top: 1px;
           white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tmb-dot { flex: none; width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center;
           font-size: 10px; font-weight: 800; background: var(--line-soft); color: transparent; }
.tmb.part .tmb-dot { background: var(--gold); }
.tmb.done .tmb-dot { background: var(--green); color: #fff; }
.tmb[aria-selected="true"] { background: var(--navy); border-color: var(--navy); transform: translateY(-2px);
                             box-shadow: 0 10px 22px rgba(11,60,107,.3); }
.tmb[aria-selected="true"] .tmb-tx b { color: #fff; font-weight: 800; }
.tmb[aria-selected="true"] .tmb-st { color: #a8c6e2; }
.tmb[aria-selected="true"] .tmb-slot { background: rgba(255,255,255,.18); color: #bff0d4; }
.tmb[aria-selected="true"] .tlogo { opacity: 1; }
.tmb[aria-selected="true"]::after { content: ""; position: absolute; left: 50%; bottom: -12px; width: 12px;
            height: 12px; background: var(--surface); border-left: 1px solid var(--line);
            border-top: 1px solid var(--line); transform: translateX(-50%) rotate(45deg); }
.tmb[aria-selected="false"] { opacity: .8; }
.tmb[aria-selected="false"]:hover { opacity: 1; }

/* the sheet: definitions on the left, the mark and the comment on the right */
.tm-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 306px);
            gap: 0; align-items: stretch; }
@media (max-width: 900px) { .tm-panel { grid-template-columns: minmax(0,1fr); } }

.crit { list-style: none; margin: 0; padding: var(--s3) var(--s5);
        display: flex; flex-direction: column; overflow-y: auto; }
.crit .crow2 { flex: 0 0 auto; }   /* fixed rows: scoring never reflows the sheet */
.crow2 { display: grid; grid-template-columns: 46px minmax(0, 1fr) 96px; gap: 4px var(--s4);
         align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line-soft); }
.crit > .crow2:last-child { border-bottom: 0; }
.crow2 .wt { align-self: center; margin: 0; justify-self: start;
             display: inline-block; font-size: 11.5px; font-weight: 800; color: var(--blue);
             background: var(--blue-100); border-radius: 6px; padding: 4px 8px; }
.cdef { display: flex; gap: 9px; align-items: flex-start; width: 100%; text-align: left; font: inherit;
        background: none; border: 0; padding: 3px 0; margin: 0; cursor: pointer; border-radius: 6px; }
.cdef-t { flex: 1 1 auto; font-size: 13.5px; line-height: 1.42; color: var(--ink); }
.cdef-ic { flex: none; width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center;
           color: #c3ced8; background: transparent; transition: color .16s ease, background .16s ease; }
.cdef-ic svg { width: 14px; height: 14px; }
.cdef:hover .cdef-ic, .crow2.open .cdef-ic { color: var(--blue); background: var(--blue-100); }
.cdef:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.crow2.noted .cdef-ic { color: var(--gold); background: var(--gold-100); }

/* the note drawer slides open under the point it belongs to */
.cnote { grid-column: 2 / -1; display: grid; grid-template-rows: 0fr;
         transition: grid-template-rows .26s cubic-bezier(.3,.8,.3,1); }
.crow2.open .cnote { grid-template-rows: 1fr; }
.cnote-in { overflow: hidden; }
.pnote { display: block; width: 100%; height: 56px; min-height: 0; margin: 2px 0 7px; font: inherit; font-size: 13px;
         line-height: 1.5; color: var(--ink); border: 1px solid var(--line); border-radius: var(--r);
         padding: 7px var(--s3); resize: none; background: var(--surface); }
.pnote:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(31,111,178,.15); }
.crow2.set .cdef-t { color: var(--navy); font-weight: 550; }
.cgrp { display: flex; align-items: center; gap: 9px; margin: 6px 0 2px; padding: 6px var(--s4);
        background: var(--bg); border-radius: 7px; font-size: 12.5px; font-weight: 750; color: var(--navy);
        letter-spacing: .01em; }
.cgrp::before { content: ""; width: 4px; height: 15px; border-radius: 2px; background: var(--gold); }
.inwrap { display: inline-flex; align-items: center; justify-content: flex-end; gap: 7px; }
.crow2 .scin { width: 62px; font: inherit; font-size: 15.5px; font-weight: 800; text-align: center;
               line-height: 1.15;
               color: var(--navy); border: 1px solid var(--line); border-radius: var(--r);
               padding: 5px 4px; background: var(--surface); }
.crow2 .scin:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(31,111,178,.15); }
.crow2 .scin::placeholder { color: #c3ced8; font-weight: 500; }
.crow2.set .scin { border-color: var(--blue); background: #f5faff; }
.outof { font-size: 12.5px; color: #98a3ad; white-space: nowrap; }

/* the right-hand rail */
.tmside { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s4);
          background: var(--bg); border-left: 1px solid var(--line); }
@media (max-width: 900px) { .tmside { border-left: 0; border-top: 1px solid var(--line); } }
.tmh { display: flex; gap: var(--s3); align-items: center; }
.tmh-slot { flex: none; font-size: 11px; font-weight: 800; color: var(--green); background: var(--green-100);
            border-radius: 6px; padding: 4px 8px; }
.tlogo.lg { width: 40px; height: 40px; }
.tmh-tx { min-width: 0; }
.tmh-tx h4 { margin: 0; font-size: 18px; letter-spacing: -.01em; color: var(--navy); line-height: 1.2; }
.tmh-tx span { display: block; font-size: 11.5px; color: var(--ink-soft); line-height: 1.35; margin-top: 2px; }
.tmh-tot { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
           padding: 11px var(--s3); text-align: center; height: 84px;
           display: flex; flex-direction: column; justify-content: center; }
.tmh-tot b { display: block; font-size: 38px; font-weight: 800; letter-spacing: -.035em; line-height: 1;
             color: #c3ced8; }
.tmh-tot span { display: block; font-size: 11px; color: var(--ink-soft); margin-top: 5px; }
.tmh-tot.hi b { color: var(--green); } .tmh-tot.ok b { color: var(--blue); }
.tmh-tot.mid b { color: var(--amber); } .tmh-tot.lo b { color: var(--red); }

.scalekey { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1px; margin: 0;
            background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.scalekey > div { display: flex; align-items: baseline; gap: 6px; background: var(--surface); padding: 6px 9px; }
.scalekey dt { font-size: 13px; font-weight: 800; color: var(--navy); }
.scalekey dd { margin: 0; font-size: 11.5px; color: var(--ink-soft); }

.cmt-box { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 96px; }
.cmt-box label { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .12em;
                 text-transform: uppercase; color: var(--ink-soft); margin-bottom: 5px; }
.cmt-box textarea { flex: 1 1 auto; width: 100%; font: inherit; font-size: 13.5px; line-height: 1.55;
                    color: var(--ink); border: 1px solid var(--line); border-radius: var(--r);
                    padding: 9px var(--s3); resize: none; background: var(--surface); }
.cmt-box textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(31,111,178,.15); }

.sh-foot { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; justify-content: space-between;
           padding: 8px var(--s5); background: var(--bg); border-top: 1px solid var(--line); }
.sh-foot .btn { padding: 7px 14px; font-size: 13.5px; }
.sh-foot .msg { font-size: 14px; font-weight: 650; color: var(--ink-soft); }
.sh-foot .msg.ok { color: var(--green); }
.sh-foot .msg.no { color: var(--amber); }

/* =====================================================================
   The Trainers tab opens a menu: the three views are the first thing
   a trainer, mentor or panelist meets.
   ===================================================================== */
.navdd { position: relative; display: inline-flex; }
.navdd > a { display: inline-flex; align-items: center; }
.ddc { width: 13px; height: 13px; margin-left: 5px; opacity: .75; transition: transform .18s ease; }
.navdd.open .ddc { transform: rotate(180deg); opacity: 1; }
.navdd > a { cursor: pointer; }
.ddm { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; min-width: 262px;
       background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
       box-shadow: 0 18px 40px rgba(3,20,38,.22); padding: 6px; display: grid; gap: 2px;
       opacity: 0; visibility: hidden; transform: translateY(-6px);
       transition: opacity .16s ease, transform .16s ease, visibility .16s; }
.ddm::before { content: ""; position: absolute; top: -9px; right: 0; left: 0; height: 9px; }
/* the menu waits for a click — the tab itself never jumps to a view */
.navdd.open .ddm { opacity: 1; visibility: visible; transform: none; }
.ddm a { display: block; padding: 9px var(--s4); border-radius: var(--r-sm); color: var(--ink); }
.ddm a:hover { background: var(--blue-100); text-decoration: none; }
.ddm a b { display: block; font-size: 14.5px; font-weight: 700; color: var(--navy); }
.ddm a em { display: block; font-style: normal; font-size: 12.5px; color: var(--ink-soft); margin-top: 1px; }
.ddm a[aria-current="true"] { background: var(--blue-100); }
.ddm a[aria-current="true"] b::after { content: " ·"; color: var(--gold); }

@media (max-width: 900px) {
  /* in the mobile sheet the three sit under the tab, always visible */
  .navdd { display: block; }
  .ddm { position: static; opacity: 1; visibility: visible; transform: none; min-width: 0;
         background: rgba(255,255,255,.06); border: 0; box-shadow: none;
         padding: 2px 2px 4px; margin: 2px 0 0 var(--s4); }
  .ddm a { color: #dbe7f3; padding: 7px var(--s4); }
  .ddm a:hover { background: rgba(255,255,255,.12); }
  .ddm a b { color: #fff; font-size: 13.5px; }
  .ddm a em { color: #a8c6e2; font-size: 11.5px; }
  .ddc { display: none; }
}

/* the in-page echo of the tab menu, so you can see which of the three you are on */
.viewbar { display: inline-flex; gap: 4px; margin-top: var(--s5); padding: 4px;
           background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); border-radius: 999px; }
.vb { font: inherit; font-size: 13.5px; font-weight: 700; color: #cfe3f6; background: none; border: 0;
      padding: 7px 17px; border-radius: 999px; cursor: pointer; transition: background .16s ease, color .16s ease; }
.vb:hover { background: rgba(255,255,255,.12); color: #fff; }
.vb[aria-selected="true"] { background: #fff; color: var(--navy); }
.vb:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* the mobile sheet on the light header is white, so the sub-items follow it */
@media (max-width: 900px) {
  .site-header.light .ddm { background: var(--bg); }
  .site-header.light .ddm a { color: var(--ink); }
  .site-header.light .ddm a:hover { background: var(--blue-100); }
  .site-header.light .ddm a b { color: var(--navy); }
  .site-header.light .ddm a em { color: var(--ink-soft); }
  .site-header.light .ddm a[aria-current="true"] { background: var(--blue-100); }
}

/* =====================================================================
   Program — the cycle on one spine. The weekly rhythm is stated once
   above it, so the timeline carries only what changed week to week.
   ===================================================================== */
.rhythm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4);
          background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
          padding: var(--s5); box-shadow: var(--shadow); margin-bottom: var(--s6); }
@media (max-width: 700px) { .rhythm { grid-template-columns: minmax(0,1fr); } }
.rh { display: flex; gap: var(--s4); align-items: flex-start; }
.rh-ic { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
         background: var(--blue-100); color: var(--blue); }
.rh-ic svg { width: 19px; height: 19px; }
.rh > span:last-child { font-size: 14px; line-height: 1.55; color: var(--ink-soft); }
.rh b { display: block; font-size: 11px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
        color: var(--navy); margin-bottom: 3px; }
.rh-note { grid-column: 1 / -1; margin: 0; padding-top: var(--s3); border-top: 1px solid var(--line-soft);
           font-size: 13px; color: #98a3ad; }

.tl2 { position: relative; padding-left: 34px; }
@media (max-width: 600px) { .tl2 { padding-left: 26px; } }
.tl2::before { content: ""; position: absolute; left: 7px; top: 14px; bottom: 14px; width: 2px;
               background: linear-gradient(180deg, var(--gold) 0%, var(--blue) 22%, var(--blue) 78%, var(--gold) 100%);
               opacity: .5; }
@media (max-width: 600px) { .tl2::before { left: 5px; } }

.tl-mo { position: relative; margin: var(--s5) 0 var(--s3); }
.tl-mo:first-child { margin-top: 0; }
.tl-mo span { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .16em;
              text-transform: uppercase; color: var(--gold); background: var(--bg);
              padding: 3px 11px 3px 0; }

.tl-row { position: relative; display: grid; grid-template-columns: 122px minmax(0, 1fr) 76px;
          gap: var(--s4); align-items: baseline; padding: 11px var(--s3) 11px 0;
          border-bottom: 1px solid var(--line-soft); }
@media (max-width: 640px) { .tl-row { grid-template-columns: minmax(0,1fr); gap: 3px; padding: 10px 0; }
                            .tl-row .tl-tag { text-align: left; } }
.tl-node { position: absolute; left: -32px; top: 17px; width: 9px; height: 9px; border-radius: 50%;
           background: var(--surface); box-shadow: inset 0 0 0 2px var(--light-blue), 0 0 0 3px var(--bg); }
@media (max-width: 600px) { .tl-node { left: -25px; } }
.tl-when { font-size: 13px; font-weight: 700; color: var(--ink-soft); white-space: nowrap; }
.tl-title { display: block; font-size: 15.5px; font-weight: 650; color: var(--navy); line-height: 1.4; }
.tl-code { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .04em; color: var(--blue);
           background: var(--blue-100); border-radius: 5px; padding: 2px 7px; margin-right: 8px;
           vertical-align: 1px; }
.tl-note { display: block; font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); margin-top: 4px;
           max-width: 70ch; }
.tl-tag { font-size: 10.5px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase;
          color: #98a3ad; text-align: right; }

/* the few rows that matter get weight; the rest stay quiet */
.tl-row.t-milestone { background: #fffdf6; border-radius: var(--r); padding: 13px var(--s4);
                      border-bottom-color: transparent; box-shadow: inset 0 0 0 1px #f0e3c0; margin: 4px 0; }
.tl-row.t-milestone .tl-node { background: var(--gold); box-shadow: 0 0 0 3px var(--bg), 0 0 0 6px rgba(201,154,46,.25); }
.tl-row.t-milestone .tl-title { font-size: 17px; font-weight: 750; }
.tl-row.t-milestone .tl-tag { color: #8a6412; }
.tl-row.t-onsite .tl-node { background: var(--purple, #7a6cc4); box-shadow: 0 0 0 3px var(--bg); }
.tl-row.t-onsite .tl-tag { color: var(--purple, #7a6cc4); }
.tl-row.t-online .tl-node { background: var(--blue); box-shadow: 0 0 0 3px var(--bg); }
.tl-row.t-note { opacity: .72; }
.tl-row.t-note .tl-node { box-shadow: inset 0 0 0 2px #c3ced8, 0 0 0 3px var(--bg); }
.tl-row:last-child { border-bottom: 0; }

.scalewrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.scalewrap .scalekey { border: 0; border-radius: 0; border-bottom: 1px solid var(--line); }
.scalenote { margin: 0; padding: 6px 9px; font-size: 10.5px; line-height: 1.4; color: var(--ink-soft); }

/* On a short laptop screen the sheet compacts a little further, so a panelist
   never has to scroll mid-team. */
@media (max-height: 830px) and (min-width: 900px) {
  .sheet2 .sh-top { padding: 9px var(--s5); }
  .sheet2 .sh-top h3 { font-size: 19px; }
  .sheet2 .tm-tabs { padding: 8px var(--s5) 11px; }
  .sheet2 .tmb { padding: 6px 12px 6px 8px; }
  .sheet2 .crit { padding: 6px var(--s5); }
  .sheet2 .crow2 { padding: 5px 0; }
  .sheet2 .crow2 p, .sheet2 .cdef-t { font-size: 13px; line-height: 1.4; }
  .sheet2 .pnote { height: 48px; }
  .sheet2 .cgrp { margin: 4px 0 1px; padding: 5px var(--s4); font-size: 12px; }
  .sheet2 .tmside { padding: 11px; gap: 9px; }
  .sheet2 .tmh-tot { padding: 8px var(--s3); }
  .sheet2 .tmh-tot b { font-size: 32px; }
  .sheet2 .scalekey > div { padding: 5px 8px; }
  .sheet2 .cmt-box { min-height: 74px; }
  .sheet2 .sh-foot { padding: 6px var(--s5); }
}

/* the sheet holds its shape: the criteria column scrolls inside rather than
   pushing the panel taller when a note is opened */
.tm-panel { min-height: 0; }
.tm-panel > * { min-height: 0; }        /* let the criteria column scroll inside the pinned height */
/* The scrollbar's lane is reserved from the start and stays empty until it is
   needed, so opening a note never nudges the wording sideways. */
.crit { scrollbar-width: thin; scrollbar-gutter: stable; padding-right: calc(var(--s5) - 10px); }
.crit::-webkit-scrollbar { width: 6px; }
.crit::-webkit-scrollbar-thumb { background: var(--line); border-radius: 6px; }
@media (max-width: 900px) { .crit { overflow-y: visible; } }

/* =====================================================================
   My Team's Work — the performance dashboard.
   Every class here is tw- prefixed so nothing collides with the older
   blocks further up this file.

   Colour jobs, decided before anything was drawn:
   · the team's own line and the radar shape carry the one brand blue;
   · the cohort is context, not a rival series — it is drawn as a light
     band and a dashed rule in muted ink, so it reads as background;
   · hand-in states are STATUS colours, never reused as series colours,
     and every one of them ships with a glyph and a written label;
   · the thematic polarities reuse the status ramp for the same reason.
   The status and polarity sets were run through the palette validator:
   adjacent-pair separation clears the normal-vision floor and the CVD
   floor in protan, deutan and tritan.
   ===================================================================== */
:root {
  --tw-ok:   #1f7a54;  --tw-ok-bg:   #e4f2ea;
  --tw-late: #d18f12;  --tw-late-bg: #fbf1dc;
  --tw-miss: #a32a33;  --tw-miss-bg: #f9e8e9;
  --tw-none: #7a8894;  --tw-none-bg: #eef1f4;
}

/* ---------- the headline figures ---------- */
.tw-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4);
           margin-bottom: var(--s5); }
@media (max-width: 1020px) { .tw-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .tw-kpis { grid-template-columns: minmax(0, 1fr); } }
.tw-kpi { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--line);
          border-radius: var(--r-lg); padding: var(--s4) var(--s4) var(--s3);
          box-shadow: var(--shadow); }
.tw-kpi .k-lab { font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
                 color: var(--ink-soft); }
.tw-kpi .k-val { display: flex; align-items: baseline; gap: 6px; margin-top: 4px;
                 font-size: 34px; font-weight: 800; color: var(--navy); line-height: 1.05;
                 letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tw-kpi .k-val small { font-size: 14px; font-weight: 650; color: var(--ink-soft); letter-spacing: 0; }
.tw-kpi .k-note { margin: 5px 0 0; font-size: 12.5px; color: var(--ink-soft); }
.tw-kpi .k-note b { color: var(--ink); font-weight: 700; }
/* the one tile that carries the headline */
.tw-kpi.hero { background: linear-gradient(135deg, var(--navy) 0%, #12508c 62%, #17609f 100%);
               border-color: transparent; color: #fff; }
.tw-kpi.hero::after { content: ""; position: absolute; inset: auto -40px -70px auto; width: 190px; height: 190px;
                      border-radius: 50%; background: rgba(255,255,255,.07); }
.tw-kpi.hero .k-lab { color: #9cc4e8; }
.tw-kpi.hero .k-val { color: #fff; }
.tw-kpi.hero .k-val small { color: #b9d6ef; }
.tw-kpi.hero .k-note { color: #c6dcef; }
.tw-kpi.hero .k-note b { color: #fff; }
.tw-delta { display: inline-flex; align-items: center; gap: 3px; font-size: 12.5px; font-weight: 750;
            border-radius: 999px; padding: 2px 8px; }
.tw-delta.up   { color: var(--tw-ok);   background: var(--tw-ok-bg); }
.tw-delta.down { color: var(--tw-miss); background: var(--tw-miss-bg); }
.tw-kpi.hero .tw-delta.up   { color: #bdf0d6; background: rgba(255,255,255,.16); }
.tw-kpi.hero .tw-delta.down { color: #ffd4d6; background: rgba(255,255,255,.16); }
/* the sparkline that rides along the bottom of a tile */
.tw-spark { display: block; width: 100%; height: 34px; margin-top: 6px; overflow: visible; }
.tw-spark path.ln { fill: none; stroke: var(--blue); stroke-width: 2; stroke-linecap: round;
                    stroke-linejoin: round; }
.tw-kpi.hero .tw-spark path.ln { stroke: #9ccbf4; }
.tw-spark path.fl { fill: rgba(31,111,178,.12); stroke: none; }
.tw-kpi.hero .tw-spark path.fl { fill: rgba(156,203,244,.18); }
.tw-spark circle { fill: var(--surface); stroke: var(--blue); stroke-width: 2; }
.tw-kpi.hero .tw-spark circle { fill: var(--navy); stroke: #9ccbf4; }
/* the little segmented meter under the hand-in tile */
.tw-meter { display: flex; gap: 2px; margin-top: 9px; }
.tw-meter i { height: 7px; border-radius: 2px; flex: 1 1 0; background: var(--line); }
.tw-meter i.ok { background: var(--tw-ok); } .tw-meter i.late { background: var(--tw-late); }
.tw-meter i.miss { background: var(--tw-miss); } .tw-meter i.open { background: var(--tw-none); opacity: .45; }

/* ---------- the chart panels ----------
   The radar is the main panel and the two bar charts share the column
   beside it. Every panel has a fixed height and clips its own contents,
   so nothing a reader does — hovering, opening the trend — can make a
   panel grow, shrink or nudge its neighbours. */
.tw-dash { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr); gap: var(--s5);
           height: 704px; align-items: stretch; }
.tw-side { display: grid; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s5);
           min-height: 0; }
.tw-dash > *, .tw-side > * { min-height: 0; }
@media (max-width: 1080px) {
  .tw-dash { grid-template-columns: minmax(0, 1fr); height: auto; }
  .tw-main { height: 620px; }
  .tw-side { grid-template-rows: 320px 320px; }
}
@media (max-width: 560px) {
  .tw-main { height: 600px; }
  .tw-side { grid-template-rows: 300px 300px; }
  /* on a phone the summary figures drop their qualifiers so the chart keeps the room */
  #face-radar .radar-legend { gap: 2px var(--s3); margin-top: var(--s2); padding-top: var(--s2);
                              font-size: 11.5px; }
  #face-radar .radar-legend b { font-size: 14.5px; margin-right: 3px; }
  #face-radar .radar-legend span span { display: none; }
  .tw-card .tw-radar-hint { margin-top: var(--s2); }
}
.tw-card { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--line);
           border-radius: var(--r-lg); box-shadow: var(--shadow); padding: var(--s5);
           display: flex; flex-direction: column; }
.tw-side .tw-card { padding: var(--s4) var(--s5) var(--s3); }
.tw-side .tw-head h3 { font-size: 15.5px; }
/* The radar's own depth: faint bands between the rings, a gradient body,
   a dashed ring at the cycle average, and a quiet halo on the strongest
   and the weakest point — both of which are named in words underneath. */
.tw-main .radar-band { fill: #fff; stroke: none; }
.tw-main .radar-shape { fill: url(#rdFill); stroke-width: 2.5; }
.radar-avg { fill: none; stroke: #8a97a5; stroke-width: 1.3; stroke-dasharray: 4 5; opacity: .8; }
.radar-avg-lab { font-size: 10px; font-weight: 800; fill: #61707e; letter-spacing: .02em;
                 paint-order: stroke; stroke: #fff; stroke-width: 3.5; stroke-linejoin: round; }
.radar-hub { fill: #9fb4c6; opacity: .5; }
.radar-halo { fill: none; stroke-width: 2; opacity: .5; }
/* the points arrive a beat after the shape, one axis at a time */
.js .reveal:not(.in) .radar-pt, .js .reveal:not(.in) .radar-halo { opacity: 0; }
.js .reveal.in .radar-pt  { animation: rdPop .38s cubic-bezier(.2,1.2,.4,1) backwards;
                            animation-delay: calc(.42s + var(--i, 0) * .06s); }
.js .reveal.in .radar-halo { animation: rdPop .38s ease-out backwards;
                             animation-delay: calc(.48s + var(--i, 0) * .06s); }
@keyframes rdPop { from { opacity: 0; transform: scale(.4); transform-origin: center;
                          transform-box: fill-box; } }
@media (prefers-reduced-motion: reduce) {
  .js .reveal:not(.in) .radar-pt, .js .reveal:not(.in) .radar-halo { opacity: 1; }
  .js .reveal.in .radar-pt, .js .reveal.in .radar-halo { animation: none; }
}
.radar-halo.hi { stroke: var(--tw-ok); }
.radar-halo.lo { stroke: var(--tw-late); }
.radar-pt.hi { stroke: var(--tw-ok); }
.radar-pt.lo { stroke: var(--tw-late); }
.radar-axis-label.hi .radar-axis-score, .radar-axis-score.hi { fill: var(--tw-ok); }
.radar-axis-label.lo .radar-axis-score, .radar-axis-score.lo { fill: #9a690c; }

/* The main panel sits on its own quiet tint — enough to read as the
   centre of the dashboard, not enough to become a colour of its own. */
.tw-main { background: linear-gradient(176deg, #eef5fb 0%, #f7fbfe 46%, var(--surface) 100%);
           border-color: #d3e2ef; box-shadow: 0 1px 2px rgba(16,32,48,.05), 0 10px 26px rgba(11,60,107,.07); }
.tw-main .tw-pill { background: #dfecf8; }
.tw-main .radar-legend { border-top-color: #dbe7f2; }
.tw-main .tw-radar-hint, .tw-main .tw-back { background: #dfecf8; }
.tw-main .radar-grid { stroke: #dbe5ee; }
.tw-main .radar-grid.outer { stroke: #bccddd; }
.tw-main .radar-spoke { stroke: #dde6ee; }
.tw-main .radar-pt { fill: #fff; }
.tw-main .tw-grid { stroke: #dfe7ee; }
/* the radar fills whatever the main panel leaves it */
.tw-card .radar-wrap { flex: 1 1 auto; min-height: 0; }
.tw-card .radar-wrap svg { overflow: visible; }
.tw-card .radar-wrap svg { width: 100%; height: 100%; }
/* the whole radar face is the button that turns the panel over */
#face-radar { cursor: pointer; border-radius: var(--r); }
#face-radar:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
#face-radar:hover .tw-radar-hint { background: #d8e8f7; }
/* inside a fixed panel the summary figures stay on one tidy line */
.tw-card .radar-legend { flex: none; gap: var(--s3) var(--s4); margin-top: var(--s3); padding-top: var(--s3);
                         font-size: 13px; }
.tw-card .radar-legend b { font-size: 16px; }
.tw-card .tw-radar-hint { flex: none; margin-top: var(--s3); }
.tw-radar-hint.sm { margin-top: var(--s2); font-size: 11.5px; padding: 4px 10px; }
#face-video, #face-fastrac, #face-trend { cursor: pointer; border-radius: var(--r); }
#face-video:focus-visible, #face-fastrac:focus-visible, #face-trend:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 4px; }
#face-video:hover .tw-radar-hint { background: #d8e8f7; }
.tw-card .tw-head { flex: none; }
.tw-card .tw-legend { flex: none; }
.tw-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3);
           margin-bottom: var(--s2); }
.tw-head h3 { margin: 0; }
.tw-head .sub { margin: 2px 0 0; font-size: 12.5px; color: var(--ink-soft); }
.tw-pill { flex: none; font-size: 11.5px; font-weight: 750; color: var(--blue); background: var(--blue-100);
           border-radius: 999px; padding: 4px 10px; }

/* legend — identity is never colour alone, so each key is written out */
.tw-legend { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); margin: var(--s2) 0 var(--s3);
             font-size: 12.5px; color: var(--ink-soft); }
.tw-legend span { display: inline-flex; align-items: center; gap: 6px; }
.tw-legend i { flex: none; width: 16px; height: 3px; border-radius: 2px; background: var(--blue); }
.tw-legend i.dash { height: 0; border-top: 2px dashed #8a97a5; border-radius: 0; }
.tw-legend i.band { height: 11px; border-radius: 3px; background: var(--line-soft);
                    border: 1px solid var(--line); }
.tw-legend i.sq { width: 11px; height: 11px; border-radius: 3px; }
.tw-legend i.ok { background: var(--tw-ok); } .tw-legend i.late { background: var(--tw-late); }
.tw-legend i.miss { background: var(--tw-miss); }
.tw-legend i.none, .tw-legend i.open { background: var(--tw-none); }
.tw-legend i.wait { background: #6b4fa0; }

/* ---------- the trajectory line chart ---------- */
.tw-plot { position: relative; flex: 1 1 auto; min-height: 0; }
.tw-plot svg { display: block; width: 100%; height: 100%; }
.tw-grid  { stroke: var(--line-soft); stroke-width: 1; }
.tw-axis  { fill: var(--ink-soft); font-size: 11px; font-weight: 650; }
.tw-band  { fill: var(--line-soft); }
.tw-under { fill: rgba(31,111,178,.08); }
.tw-ptlab { fill: var(--navy); font-size: 11px; font-weight: 800; text-anchor: middle; }
.tw-med   { fill: none; stroke: #8a97a5; stroke-width: 1.5; stroke-dasharray: 5 4; }
.tw-line  { fill: none; stroke: var(--blue); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tw-dot   { fill: var(--surface); stroke: var(--blue); stroke-width: 2.5; }
.tw-dot.pending { stroke: var(--tw-none); stroke-dasharray: 3 3; }
.tw-hit   { fill: transparent; cursor: pointer; }
.tw-cross { stroke: var(--blue); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0; }
.tw-plot.on .tw-cross { opacity: .55; }
.tw-endlab { font-size: 12px; font-weight: 800; fill: var(--blue); }
.tw-endlab.muted { fill: #7c8794; font-weight: 700; }

/* one tooltip style, shared by every chart on the page */
.tw-tip { position: absolute; z-index: 5; transform: translate(-50%, -112%); pointer-events: none;
          opacity: 0; transition: opacity .12s ease; background: var(--navy); color: #fff;
          border-radius: var(--r); padding: 8px 11px; font-size: 12.5px; line-height: 1.45;
          box-shadow: 0 10px 26px rgba(3,20,38,.3); min-width: 132px; max-width: 232px; }
.tw-tip.on { opacity: 1; }
.tw-tip b { display: block; font-size: 12px; color: #9ccbf4; letter-spacing: .04em;
            text-transform: uppercase; margin-bottom: 2px; }
.tw-tip .big { font-size: 16px; font-weight: 800; }
.tw-tip::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px;
                 background: var(--navy); transform: translateX(-50%) rotate(45deg); }

/* ---------- the radar card flips to the hand-in record ---------- */
.tw-flip { position: relative; }
.tw-face { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.tw-face[hidden] { display: none; }
.tw-face.enter { animation: twIn .34s cubic-bezier(.22,.9,.3,1) both; }
@keyframes twIn { from { opacity: 0; transform: translateY(10px) scale(.985); } }
@media (prefers-reduced-motion: reduce) { .tw-face.enter { animation: none; } }
.tw-radar-hint { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
                 margin-top: var(--s2); font: inherit; font-size: 12.5px; font-weight: 650;
                 color: var(--blue); background: var(--blue-100); border: 0; border-radius: 999px;
                 padding: 6px 12px; cursor: pointer; transition: background .16s ease; }
.tw-radar-hint:hover { background: #d8e8f7; }
.tw-radar-hint svg { width: 14px; height: 14px; }
.tw-back { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font: inherit; font-size: 12.5px;
           font-weight: 700; color: var(--blue); background: var(--blue-100); border: 0;
           border-radius: 999px; padding: 5px 11px; cursor: pointer; }
.tw-face:hover .tw-back { background: #d8e8f7; }
.tw-back svg { width: 14px; height: 14px; }

/* the hand-in chart: one stacked bar a week, one segment per deliverable */
.tw-vbar.ok   { fill: var(--tw-ok); }
.tw-vbar.late { fill: var(--tw-late); }
.tw-vbar.miss { fill: var(--tw-miss); }
.tw-open-bar  { fill: none; stroke: var(--tw-none); stroke-width: 1.5; stroke-dasharray: 4 3; opacity: .7; }
.tw-seg.ok   { fill: var(--tw-ok); }
.tw-seg.late { fill: var(--tw-late); }
.tw-seg.miss { fill: var(--tw-miss); }
.tw-seg.open { fill: var(--tw-none); opacity: .38; }

/* the session grid, inside the attendance panel — compacted so all five
   members and all fourteen sessions sit inside the fixed panel */
.tw-card .att-grid th, .tw-card .att-grid td { padding: 4px 2px; }
.tw-card .att-grid th.who, .tw-card .att-grid td.who { font-size: 12.5px; width: 92px;
      overflow: hidden; text-overflow: ellipsis; }
.tw-card .att-grid thead th { font-size: 9.5px; line-height: 1.15; letter-spacing: 0; }
.tw-card .att-grid thead th.who, .tw-card .att-grid thead th:last-child { font-size: 11px; }
.tw-card .att-grid tbody td:last-child { font-size: 11.5px; }
.tw-card .att-grid .mark { width: 13px; height: 13px; border-radius: 3px; }
.tw-card .att-grid thead th:first-child { border-radius: 7px 0 0 7px; }
.tw-card .att-grid thead th:last-child  { border-radius: 0 7px 7px 0; }

/* the session grid, inside the attendance panel */
.tw-gridwrap { flex: 1 1 auto; min-height: 0; overflow: auto; margin-top: var(--s2);
               scrollbar-width: thin; scrollbar-gutter: stable; }
.tw-gridwrap::-webkit-scrollbar { width: 6px; height: 6px; }
.tw-gridwrap::-webkit-scrollbar-thumb { background: var(--line); border-radius: 6px; }
.tw-card .att-foot { flex: none; margin-top: var(--s2); padding-top: var(--s2); font-size: 11.5px; }

/* ---------- FASTRAC proposal status ---------- */
.tw-fa { display: grid; align-content: space-evenly; gap: 1px; flex: 1 1 auto; min-height: 0;
         margin-top: 2px; }
#fa-legend { gap: 4px var(--s3); font-size: 11.5px; margin: var(--s2) 0 0; }
#fa-legend i.sq { width: 9px; height: 9px; }
.tw-fa-row { display: grid; grid-template-columns: 108px minmax(0, 1fr) 38px; gap: var(--s3);
             align-items: center; }
.tw-fa-row .nm { font-size: 12.5px; color: var(--ink); white-space: nowrap; overflow: hidden;
                 text-overflow: ellipsis; }
.tw-fa-row .bar { display: flex; gap: 2px; height: 12px; border-radius: 4px; overflow: hidden;
                  background: var(--line-soft); }
.tw-fa-row .bar i { display: block; }
/* the proposal's three states, in the same ramp as the submissions chart
   on the other face of this panel: navy in, light blue underway, a pale
   track for an item nobody has opened yet */
.tw-fa-row .bar i.sent  { background: var(--navy); }
.tw-fa-row .bar i.draft { background: var(--blue-300); }
.tw-fa-row .bar i.none  { background: #dbe3ea; }
#fa-legend i.sent  { background: var(--navy); }
#fa-legend i.draft { background: var(--blue-300); }
#fa-legend i.none  { background: #dbe3ea; }
.tw-fa-row .ct { font-size: 12px; font-weight: 800; color: var(--navy); text-align: right;
                 font-variant-numeric: tabular-nums; }

/* ---------- attendance bars ---------- */
.tw-bars { position: relative; flex: 1 1 auto; min-height: 0; margin-top: var(--s2); }
.tw-bars svg { display: block; width: 100%; height: 100%; }
/* Status grid (replaces complex bar chart) */
/* Submission status — drawn like the attendance bars beside it, so the two
   charts read as one family. Every bar is the same height on purpose: there
   is no quantity here, only a state, carried by colour plus a glyph. */
/* Attendance: the two kinds of session are one hue at two weights. The
   three-hour learning sessions carry the solid brand blue; the shorter
   feedback sessions get a lighter tint of it, outlined in the same blue so
   the light fill still has a crisp edge against the white panel. The L / F
   letters under each bar carry the same split, so the colour is never alone
   in saying which is which, and a bar below the minimum stays red whichever
   kind of session it was. */
.tw-bar.fb { fill: var(--blue-300); stroke: var(--blue); stroke-width: 1; }
.tw-bar.short, .tw-bar.fb.short { fill: var(--tw-miss); stroke: none; }
/* on the lighter fill the count inside the bar switches to navy, so it stays
   readable; a bar below the minimum keeps the red fill and the white count. */
.tw-bval.fb { fill: var(--navy); }
.att-legend { flex: none; margin: 0 0 2px; }
.att-legend i.ln   { background: var(--blue); }
.att-legend i.fb   { background: var(--blue-300); box-shadow: inset 0 0 0 1px var(--blue); }
.att-legend i.miss { background: var(--tw-miss); }

/* Submissions sit beside the attendance chart and the radar, so they speak
   the same blue rather than a traffic-light of their own: navy for an output
   that landed on time, the lighter brand blue for one that landed late, a
   muted steel for one that never arrived, and an empty dashed block for a
   week that is not due yet. The tooltip names each state in words, so the
   colour is carrying emphasis, not the only meaning. */
.tw-sbar.ok   { fill: var(--navy); }
.tw-sbar.late { fill: var(--blue-300); }
.tw-sbar.miss { fill: #6d8395; }
.tw-sbar.open { fill: none; stroke: var(--line); stroke-width: 1.5; stroke-dasharray: 5 4; }
/* the key under this one chart follows the same three blues */
#hi-legend i.ok   { background: var(--navy); }
#hi-legend i.late { background: var(--blue-300); }
#hi-legend i.miss { background: #6d8395; }
.tw-bar { fill: var(--blue); }
.tw-bar.short { fill: var(--tw-miss); }
.tw-bar-hit { fill: transparent; cursor: pointer; }
.tw-thr { stroke: var(--tw-miss); stroke-width: 1.5; stroke-dasharray: 5 4; }
.tw-thr-lab { fill: var(--tw-miss); font-size: 11px; font-weight: 750; }
.tw-blab { fill: var(--ink-soft); font-size: 10.5px; font-weight: 650; }
.tw-bval { fill: #fff; font-size: 11.5px; font-weight: 800; }

/* ---------- thematic analysis ---------- */
.tw-ta-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px;
               background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg);
               overflow: hidden; margin-bottom: var(--s4); }
@media (max-width: 720px) { .tw-ta-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tw-ta-strip > div { background: var(--surface); padding: var(--s3) var(--s4); }
.tw-ta-strip b { display: block; font-size: 23px; font-weight: 800; color: var(--navy);
                 font-variant-numeric: tabular-nums; line-height: 1.1; }
.tw-ta-strip span { font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
                    color: var(--ink-soft); }
/* the six phases, as the path the comments took */
.tw-phases { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s2);
             margin-bottom: var(--s5); }
@media (max-width: 900px) { .tw-phases { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px) { .tw-phases { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tw-ph { position: relative; background: var(--surface); border: 1px solid var(--line);
         border-radius: var(--r); padding: var(--s3); }
.tw-ph::before { content: ""; position: absolute; left: var(--s3); right: var(--s3); top: 0; height: 3px;
                 border-radius: 0 0 3px 3px; background: var(--blue); opacity: calc(.28 + var(--i) * .12); }
.tw-ph b { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; color: var(--blue);
           text-transform: uppercase; }
.tw-ph .nm { display: block; font-size: 13.5px; font-weight: 700; color: var(--navy); margin: 3px 0 2px; }
.tw-ph .nt { font-size: 11.5px; line-height: 1.4; color: var(--ink-soft); }
.tw-ta { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5);
         align-items: start; }
/* code frequency — one bar per code, coloured by the theme it rolled into */
.tw-code { display: grid; grid-template-columns: minmax(0, 1fr) 34px; gap: var(--s3); align-items: center;
           padding: 7px 0; border-bottom: 1px solid var(--line-soft); }
.tw-code:last-child { border-bottom: 0; }
.tw-code .cl { font-size: 13px; color: var(--ink); }
.tw-code .cn { font-size: 13px; font-weight: 800; color: var(--navy); text-align: right;
               font-variant-numeric: tabular-nums; }
.tw-code .cb { grid-column: 1 / -1; height: 7px; border-radius: 4px; background: var(--line-soft);
               overflow: hidden; }
.tw-code .cb i { display: block; height: 100%; border-radius: 4px; width: 0;
                 transition: width .7s cubic-bezier(.2,.8,.3,1); }
.tw-code .cb i.strength { background: var(--tw-ok); }
.tw-code .cb i.gap      { background: var(--tw-late); }
.tw-code .cb i.watch    { background: #6b4fa0; }
/* theme cards, each opening onto the extracts it was built from */
.tw-theme { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface);
            margin-bottom: var(--s3); overflow: hidden; }
.tw-theme-h { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto auto; gap: var(--s3);
              align-items: center; width: 100%; font: inherit; text-align: left; background: none;
              border: 0; padding: var(--s3) var(--s4); cursor: pointer; }
.tw-theme-h:hover { background: var(--bg); }
.tw-theme-h .pol { width: 10px; height: 10px; border-radius: 50%; }
.tw-theme-h .pol.strength { background: var(--tw-ok); }
.tw-theme-h .pol.gap      { background: var(--tw-late); }
.tw-theme-h .pol.watch    { background: #6b4fa0; }
.tw-theme-h .nm { font-size: 14.5px; font-weight: 700; color: var(--navy); }
.tw-theme-h .ct { font-size: 12px; font-weight: 750; color: var(--ink-soft); white-space: nowrap; }
.tw-theme-h .cv { width: 16px; height: 16px; color: var(--ink-soft); transition: transform .2s ease; }
.tw-theme.open .tw-theme-h .cv { transform: rotate(180deg); }
.tw-theme-b { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s cubic-bezier(.3,.8,.3,1); }
.tw-theme.open .tw-theme-b { grid-template-rows: 1fr; }
.tw-theme-in { overflow: hidden; }
.tw-theme-in > div { padding: 0 var(--s4) var(--s4); border-top: 1px solid var(--line-soft); }
.tw-theme-in p.det { margin: var(--s3) 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); }
.tw-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--s3); }
.tw-chips span { font-size: 11.5px; font-weight: 650; color: var(--ink-soft); background: var(--bg);
                 border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px; }
.tw-ex { border-left: 3px solid var(--line); padding: 2px 0 2px var(--s3); margin: 0 0 var(--s3); }
.tw-ex:last-child { margin-bottom: 0; }
.tw-ex q { display: block; font-size: 13.5px; line-height: 1.55; color: var(--ink); font-style: italic; }
.tw-ex .src { display: block; margin-top: 3px; font-size: 11.5px; font-weight: 700; color: var(--ink-soft); }
.tw-claim { border-left: 4px solid var(--gold); background: var(--gold-100); border-radius: 0 var(--r) var(--r) 0;
            padding: var(--s4); margin-bottom: var(--s4); }
.tw-claim .lab { font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
                 color: #8a6a1c; }
.tw-claim p { margin: 5px 0 0; font-size: 16.5px; line-height: 1.5; font-weight: 650; color: var(--navy); }
.tw-sat { display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px; line-height: 1.5;
          color: var(--ink-soft); background: var(--bg); border: 1px solid var(--line);
          border-radius: var(--r); padding: var(--s3); margin-top: var(--s3); }
.tw-sat svg { flex: none; width: 16px; height: 16px; margin-top: 1px; color: var(--blue); }

/* a table view of every chart, for anyone who would rather read the numbers */
.tw-tv { margin-top: var(--s3); }
.tw-tv summary { cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--blue); }
.tw-tv summary::marker { color: var(--line); }
.tw-tv table { width: 100%; border-collapse: collapse; margin-top: var(--s2); font-size: 12.5px; }
.tw-tv th, .tw-tv td { text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--line-soft); }
.tw-tv th { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); }

/* =====================================================================
   Capstone — the pitch deck storyboard.
   The big slide sits above the strip, the frames are small, and a frame
   that already holds a file is a viewer rather than another upload box.
   ===================================================================== */
.film { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: var(--s3);
         align-items: start; }
.frame .cap { gap: 5px; margin-top: 7px; }
.frame .no { font-size: 10px; }
.frame .nm { font-size: 12px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2;
              -webkit-box-orient: vertical; overflow: hidden; min-height: 31px; }
.frame .sub { display: none; }                 /* the source now rides in the meta row */
.frame .fmeta { display: flex; flex-wrap: wrap; gap: 5px; align-items: center;
                margin: 4px 0 0 17px; min-height: 19px; }
.frame .fmeta .src { font-size: 11px; color: var(--ink-soft); }
.frame .fmeta .badge { font-size: 10px; padding: 1px 6px; }
.frame .fmeta .heat { font-size: 11.5px; padding: 1px 7px; }
.frame .repl { font: inherit; font-size: 10.5px; font-weight: 750; color: var(--blue);
               background: var(--blue-100); border: 0; border-radius: 999px; padding: 2px 8px;
               cursor: pointer; }
.frame .repl:hover { background: #d8e8f7; }
.frame .repl:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.frame .up .doc { width: 26px; height: 26px; }
.frame .up .fn { font-size: 10px; }
.frame .up .sz { display: none; }
.frame .up { padding: 6px; gap: 3px; }
.frame .rmslide { width: 20px; height: 20px; font-size: 13px; opacity: 0;
                  transition: opacity .15s ease; }
.frame:hover .rmslide, .frame:focus-within .rmslide { opacity: 1; }
/* a filled frame says what a click does, without covering the slide in a dashed box */
.frame .viewhint { position: absolute; inset: auto 0 0 0; z-index: 2; padding: 4px 0;
                   background: linear-gradient(180deg, rgba(8,34,60,0) 0%, rgba(8,34,60,.78) 60%);
                   color: #fff; font-size: 10.5px; font-weight: 750; text-align: center;
                   opacity: 0; transition: opacity .16s ease; }
.frame:hover .viewhint, .frame:focus-within .viewhint { opacity: 1; }
.frame[aria-current="true"] .viewhint { opacity: 1; }
.frame.empty .thumb { box-shadow: none; }
.frame.empty:hover .thumb { box-shadow: 0 8px 18px rgba(11,60,107,.14); }
.frame .drophint { font-size: 10.5px; padding: 6px; line-height: 1.25; }
.frame .drophint span { display: none; }        /* the file types are in the note under the strip */
@media (max-width: 560px) { .film { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); } }

/* the assemble band now sits under the stage, so it squares off on its own */
.ws-body.plain { border: 1px solid var(--line); border-radius: var(--r-lg); }
/* Now that the band sits between the stage and the strip rather than on
   top of the workspace, it reads as a quiet rule, not a coloured header. */
.ws-band.deck.under { background: var(--surface); border: 1px solid var(--line);
                      border-left: 4px solid var(--gold); border-radius: var(--r);
                      padding: var(--s3) var(--s4); }
.ws-band.deck.under h3 { color: var(--navy); font-size: 15.5px; }
.ws-band.deck.under p { color: var(--ink-soft); }
.ws-band.deck.under .acts .btn.solid { background: var(--navy); color: #fff; border-color: var(--navy); }
.ws-band.deck.under .acts .btn.solid:hover { background: var(--navy-700); }

/* =====================================================================
   Role-Based Access Control, Auth Modal & Account Switcher Styles
   ===================================================================== */
.util-user-wrap { display: inline-flex; align-items: center; gap: 8px; }
.util-user-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px; padding: 2px 10px 2px 3px; font-size: 12px; color: #fff;
  transition: background .2s ease; cursor: pointer; text-decoration: none;
}
.util-user-pill:hover { background: rgba(255, 255, 255, 0.22); text-decoration: none; }
.util-user-av {
  width: 22px; height: 22px; border-radius: 50%; background: var(--gold); color: #2e2003;
  display: inline-grid; place-items: center; font-size: 10px; font-weight: 800;
}
.util-user-name { font-weight: 700; color: #fff; max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.util-user-role {
  background: rgba(255, 255, 255, 0.25); color: #fff; border-radius: 999px;
  padding: 1px 7px; font-size: 10px; font-weight: 700; letter-spacing: .02em;
}
.util-user-switch-btn {
  background: none; border: 0; color: var(--gold); font: inherit; font-size: 11.5px;
  font-weight: 700; cursor: pointer; padding: 2px 4px; text-decoration: underline;
}
.util-user-switch-btn:hover { color: #fff; }

/* Navigation tab lock indicator */
.nav a.tab-unlocked svg.lock { opacity: .3; stroke: var(--green); }
.nav a.tab-locked svg.lock { opacity: .85; stroke: var(--gold); }

/* Access Restricted Shield Card */
.access-restricted-card {
  max-width: 640px; margin: var(--s7) auto; padding: var(--s7) var(--s6);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: 0 16px 36px rgba(11,60,107,.12); text-align: center;
}
.access-restricted-card .shield-icon {
  width: 64px; height: 64px; border-radius: 50%; background: #fff4db; color: #a17316;
  display: inline-grid; place-items: center; margin: 0 auto var(--s4);
}
.access-restricted-card .shield-icon svg { width: 32px; height: 32px; }
.access-restricted-card h2 { margin: 0 0 var(--s3); font-size: 26px; color: var(--navy); }
.access-restricted-card p { font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); margin: 0 0 var(--s5); }
.access-restricted-card .role-badge-row {
  display: inline-flex; gap: 8px; align-items: center; background: var(--bg);
  border: 1px solid var(--line); border-radius: 999px; padding: 6px 16px;
  font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: var(--s5);
}

/* Floating Quick Switcher */
.quick-switcher-pill {
  position: fixed; bottom: 20px; right: 20px; z-index: 999;
  background: rgba(7, 35, 62, 0.94); backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 999px;
  padding: 6px 14px 6px 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  display: flex; align-items: center; gap: 9px; color: #fff; font-size: 13px;
  cursor: pointer; transition: transform .18s ease, background .18s ease;
}
.quick-switcher-pill:hover { transform: scale(1.03); background: rgba(7, 35, 62, 1); }
.quick-switcher-av {
  width: 26px; height: 26px; border-radius: 50%; background: var(--gold); color: #2e2003;
  display: inline-grid; place-items: center; font-size: 11px; font-weight: 800;
}
.quick-switcher-txt { font-weight: 650; }
.quick-switcher-tag {
  background: rgba(255, 255, 255, 0.16); color: #8ec3f2; font-size: 11px;
  padding: 2px 7px; border-radius: 999px; font-weight: 700;
}

/* Auth Modal */
.auth-backdrop {
  position: fixed; inset: 0; background: rgba(5, 23, 42, 0.68); backdrop-filter: blur(5px);
  z-index: 2000; display: flex; align-items: center; justify-content: center; padding: var(--s4);
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.auth-backdrop.active { opacity: 1; pointer-events: auto; }
.auth-modal {
  width: 100%; max-width: 800px; max-height: calc(88 * var(--vh)); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.32); display: flex; flex-direction: column;
  overflow: hidden; transform: translateY(16px); transition: transform .25s cubic-bezier(.2,.8,.3,1);
}
.auth-backdrop.active .auth-modal { transform: translateY(0); }
.auth-modal-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--s5) var(--s6); border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.auth-modal-head h3 { margin: 0; font-size: 20px; color: var(--navy); display: flex; align-items: center; gap: 8px; }
.auth-modal-close {
  background: none; border: 0; font-size: 24px; color: var(--ink-soft); cursor: pointer;
  padding: 4px; line-height: 1; border-radius: 50%;
}
.auth-modal-close:hover { color: var(--navy); background: rgba(0,0,0,.06); }
.auth-modal-body {
  padding: var(--s5) var(--s6); overflow-y: auto; flex: 1 1 auto;
}
.auth-section-title {
  font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft); margin: var(--s5) 0 var(--s3); display: flex; align-items: center; gap: 8px;
}
.auth-section-title:first-child { margin-top: 0; }
.auth-user-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px;
}
.auth-user-card {
  display: flex; align-items: center; gap: 12px; background: var(--bg); border: 1.5px solid var(--line);
  border-radius: var(--r); padding: 10px 12px; cursor: pointer; text-align: left;
  transition: border-color .18s ease, background .18s ease, transform .15s ease;
}
.auth-user-card:hover {
  border-color: var(--blue); background: var(--blue-100); transform: translateY(-1px);
}
.auth-user-card.active-user {
  border-color: var(--green); background: #eaf6ed;
}
.auth-user-card .card-av {
  width: 36px; height: 36px; border-radius: 50%; background: var(--navy); color: #fff;
  display: grid; place-items: center; font-size: 13px; font-weight: 800; flex: none;
}
.auth-user-card.active-user .card-av { background: var(--green); }
.auth-user-card .card-details { min-width: 0; flex: 1 1 auto; }
.auth-user-card .card-name { font-size: 13.5px; font-weight: 750; color: var(--navy); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.auth-user-card .card-role { font-size: 11.5px; color: var(--ink-soft); display: block; margin-top: 1px; }
.auth-user-card .card-badge {
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  background: rgba(31,111,178,.12); color: var(--blue); border-radius: 4px; padding: 1px 5px;
  display: inline-block; margin-top: 3px;
}
.auth-signout-row {
  margin-top: var(--s5); padding-top: var(--s4); border-top: 1px dashed var(--line);
  display: flex; justify-content: space-between; align-items: center;
}

/* Team Switcher Bar for Admin & Faculty */
.team-switcher-bar {
  display: flex; flex-wrap: wrap; gap: var(--s3) var(--s4); align-items: center;
  background: var(--blue-100); border: 1px solid #b6d5f2; border-radius: var(--r);
  padding: 8px 14px; margin-bottom: var(--s5); font-size: 13px; color: var(--navy);
}
.team-switcher-bar.admin-switcher {
  background: linear-gradient(135deg, hsl(210 40% 97%), hsl(210 50% 94%));
  border: 1.5px solid hsl(210 50% 84%);
  border-radius: 12px;
  padding: 10px 16px;
  justify-content: space-between;
}
.team-switcher-bar .ts-left {
  display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0;
}
.team-switcher-bar select {
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 650;
  color: var(--navy);
  background: #fff;
  border: 1.5px solid hsl(210 40% 80%);
  border-radius: 8px;
  padding: 7px 32px 7px 12px;
  cursor: pointer;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  min-width: 200px;
  max-width: 100%;
}
.team-switcher-bar select:hover {
  border-color: hsl(210 55% 65%);
}
.team-switcher-bar select:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(31,111,178,.15);
}
.team-switcher-bar .ts-count {
  font-size: 11.5px;
  font-weight: 600;
  color: hsl(210 30% 50%);
  background: hsl(210 40% 92%);
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
  letter-spacing: .02em;
}


/* =========================
   FASTRAC proposal — three states, one hue
   An item is not started, started, or submitted, and the participant owns
   all three. There is no grading here, so the blocks carry no status
   palette: one navy at three weights, with a dashed outline for "nothing
   yet" and a tick on a submitted block, so the state never rests on colour
   alone and no legend is needed to read the bar.
   ========================= */
.itembar { gap: 5px; }
.itembar button { position: relative; height: 38px; border-radius: 9px; font-size: 11.5px; font-weight: 800;
                  background: var(--surface); border: 1.5px solid var(--line); color: #93a1ad;
                  transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.itembar button.is-none  { border-style: dashed; }
.itembar button.is-start { background: var(--blue-300); border-color: #5fa6de; color: var(--navy); }
.itembar button.is-sub   { background: var(--navy); border-color: var(--navy); color: #fff; }
.itembar button.is-sub::after { content: "✓"; position: absolute; top: 1px; right: 3px; font-size: 9px;
                                font-weight: 800; color: var(--light-blue); }
.itembar button:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.itembar button[aria-current="true"] { outline: 2px solid var(--navy); outline-offset: 2px; }

.itemlist .num { background: var(--surface); border: 1.5px solid var(--line); color: #93a1ad; }
.itemlist .num.is-none  { border-style: dashed; }
.itemlist .num.is-start { background: var(--blue-300); border-color: #5fa6de; color: var(--navy); }
.itemlist .num.is-sub   { background: var(--navy); border-color: var(--navy); color: #fff; }

/* the one action an item has: submit it, and submit it again after an edit */
.subbar { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s4); align-items: center;
          justify-content: space-between; margin-top: var(--s4); padding-top: var(--s4);
          border-top: 1px solid var(--line-soft); }
.subbar .sstate { font-size: 13.5px; color: var(--ink-soft); }
.subbar .sstate b { color: var(--navy); }
.subbar .btn { flex: none; }
.subbar .btn:disabled { opacity: .55; cursor: default; }

/* While the live preview is docked on the right, the left side is only the
   work: the page hero and the workspace band are out of the way, so the
   first thing at the top of the page is the item bar the team is working
   through. Closing the preview brings both back. */
body.sheet-open #cap-head-form,
body.sheet-open #ws-form > .ws-band { display: none; }
body.sheet-open .page { padding-top: var(--s4); }

/* My Team's Work: the team name is the headline of the page, so it runs
   larger than a section title and stands on its own — the institution and
   the region are chips underneath, and the technology line is gone. */
#tb-name { font-size: clamp(34px, 5.2vw, 56px); line-height: 1.05; margin: 0 0 var(--s4); }

/* =========================
   Hand in this week's work — the one place a participant submits, so it
   should look like an invitation rather than a form field: two numbered
   boxes tinted in the brand blue, each with a visible button as well as a
   drop target, and a submit row that says how far along they are.
   ========================= */
.drops-lead { font-size: 14.5px; color: var(--ink-soft); margin: 0 0 var(--s4); max-width: 70ch; }
.drops { gap: var(--s4); }
.drop { position: relative; border: 2.5px dashed #a9cdec; border-radius: 16px;
        background: linear-gradient(180deg, #f4f9fe 0%, #eaf3fc 100%);
        padding: var(--s5) var(--s4) var(--s5); text-align: center; cursor: pointer;
        transition: border-color .16s ease, background .16s ease, transform .16s ease, box-shadow .16s ease; }
.drop:hover, .drop.over { border-color: var(--blue); background: #e3f0fb;
                          transform: translateY(-2px); box-shadow: 0 10px 22px rgba(11,60,107,.10); }
.drop.over { transform: scale(1.01); border-style: solid; }
.drop .ico { width: 52px; height: 52px; margin: 0 auto var(--s3); color: var(--blue); }
.drop h4 { margin-bottom: 2px; font-size: 17px; }
.drop .hint { font-size: 12.5px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase;
              color: var(--ink-soft); margin: 0 0 var(--s4); }
/* one plain sentence rather than a button: the whole box is the target, and
   the underline is what says it can be clicked */
.drop .pick { display: inline-block; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); }
.drop:hover .pick, .drop.over .pick { color: var(--blue); }
.drop.filled { border-style: solid; border-color: var(--green); background: var(--green-100);
               text-align: left; transform: none; box-shadow: none; }

.subrow { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s4); align-items: center;
          justify-content: flex-end; margin-top: var(--s5); padding-top: var(--s4);
          border-top: 1px solid var(--line-soft); }
.subcount { font-size: 14px; font-weight: 650; color: var(--ink-soft); margin-right: auto; }
.subcount.ready { color: var(--green); }
.btn.lg { font-size: 16px; padding: 13px 26px; border-radius: 999px; }
.btn.lg:disabled { opacity: .5; }
@media (max-width: 560px) { .subrow .btn.lg { width: 100%; } .subcount { margin-right: 0; } }

/* both states sit in the middle of the box, so a chosen file does not leave
   a hole beside the box still waiting for one */
.drop { display: flex; flex-direction: column; justify-content: center; }
.drop.filled { justify-content: center; gap: var(--s3); }
.filerow .nm, .filerow .mt { display: block; }
.filerow .mt { margin-top: 2px; }

/* Sections on a stacked page need air between them. The inline gap on <main>
   never took effect — the stack is a block, not a flex container — so every
   section sat 16px from the next and the page read as one long slab. */
main.page.stack > * + * { margin-top: var(--s7); }
main.page.stack > .game-sec { margin-top: 72px; }

/* Both lines above the drop boxes are one sentence each: they read better
   set a little smaller and held on a single line than broken in two, so the
   70ch cap comes off and the type steps down instead. */
#submit .section-head { max-width: none; }
#submit .lede { font-size: 15px; }
.drops-lead { font-size: 13.5px; max-width: none; }

/* =========================
   This week's materials and replay — the first section of the page, because
   it is what a participant opens This Week to get. Two halves: the recording,
   which is watched, on a dark panel that looks like a player; and the files,
   which are kept, in a plain list with a download on every row.
   ========================= */
.matwrap { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(0,1fr); gap: var(--s5); align-items: start; }
@media (max-width: 900px) { .matwrap { grid-template-columns: minmax(0,1fr); } }

.replay { position: relative; overflow: hidden; border-radius: var(--r-lg); color: #fff;
          padding: var(--s6) var(--s5); box-shadow: var(--shadow);
          background: radial-gradient(420px 220px at 88% -10%, rgba(201,154,46,.30) 0%, transparent 62%),
                      linear-gradient(150deg, #072341 0%, #0b3c6b 58%, #10508e 100%);
          display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.replay .play { width: 62px; height: 62px; border-radius: 50%; margin-bottom: var(--s3);
                background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.32);
                display: grid; place-items: center; }
.replay .play svg { width: 26px; height: 26px; margin-left: 3px; }
.replay .kick { font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.replay h3 { color: #fff; font-size: 22px; line-height: 1.25; margin: 2px 0 0; }
.replay .meta { color: #c2dcf3; font-size: 13.5px; margin: 4px 0 0; }
.replay .btn { align-self: flex-start; margin-top: var(--s4); background: var(--gold);
               border-color: var(--gold); color: #2e2003; font-weight: 800; }
.replay .btn:hover { background: #dcac38; color: #2e2003; }
/* nothing to watch yet: the same panel, quietened */
.replay.soon { background: linear-gradient(150deg, #33404c 0%, #46545f 100%); }
.replay.soon .kick { color: #e2c887; }
.replay.soon .play { background: rgba(255,255,255,.10); }

.matcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
           box-shadow: var(--shadow); padding: var(--s5); display: flex; flex-direction: column; }
.mathead { display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
           margin-bottom: var(--s2); }
.mathead h3 { margin: 0; font-size: 17px; }
.matcount { flex: none; font-size: 12.5px; font-weight: 700; color: var(--blue);
            background: var(--blue-100); padding: 4px 11px; border-radius: 999px; }

/* the topic card is a single column now that the materials have moved out */
.topic .tb { grid-template-columns: minmax(0,1fr); }
.topic .lead { max-width: 80ch; }

/* --- the replay panel, built like a player -------------------------------- */
.replay { padding: 0; display: flex; flex-direction: column; background: var(--surface);
          border: 1px solid var(--line); color: var(--ink); overflow: hidden; }
.rp-screen { position: relative; aspect-ratio: 16 / 9; display: grid; place-items: center;
             background: radial-gradient(460px 240px at 50% 42%, rgba(60,140,210,.45) 0%, transparent 70%),
                         linear-gradient(150deg, #06203c 0%, #0b3c6b 55%, #10528f 100%); }
.rp-grid { position: absolute; inset: 0;
           background-image: radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px);
           background-size: 22px 22px; }
.rp-tag { position: absolute; top: 12px; left: 12px; z-index: 1; font-size: 10.5px; font-weight: 800;
          letter-spacing: .12em; text-transform: uppercase; color: #fff;
          background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3);
          padding: 4px 10px; border-radius: 999px; }
.rp-play { position: relative; z-index: 1; width: 74px; height: 74px; border-radius: 50%; color: #fff;
           background: rgba(255,255,255,.16); border: 1.5px solid rgba(255,255,255,.55);
           display: grid; place-items: center; transition: transform .18s ease, background .18s ease; }
.rp-play svg { width: 30px; height: 30px; margin-left: 4px; }
/* the play circle lifts clear of the overlay text rather than sitting under it */
.replay:hover .rp-play, .replay:focus-within .rp-play {
  transform: translateY(-34px) scale(.92); background: var(--gold); color: #2e2003; border-color: var(--gold); }
.rp-dur { position: absolute; right: 12px; bottom: 18px; z-index: 1; font-size: 12px; font-weight: 700;
          color: #fff; background: rgba(4,20,38,.6); padding: 3px 9px; border-radius: 6px; }
.rp-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: rgba(255,255,255,.18); }
.rp-bar i { display: block; height: 100%; width: 18%; background: var(--gold);
            transition: width .5s cubic-bezier(.3,.7,.4,1); }
.replay:hover .rp-bar i { width: 34%; }
/* the details ride on the thumbnail and appear on hover or keyboard focus */
.rp-over { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; color: #fff;
           padding: var(--s6) var(--s5) var(--s5);
           background: linear-gradient(to top, rgba(4,18,34,.94) 0%, rgba(4,18,34,.78) 48%, rgba(4,18,34,0) 100%);
           display: flex; flex-direction: column; gap: 2px;
           opacity: 0; transform: translateY(8px);
           transition: opacity .2s ease, transform .2s ease; }
.replay:hover .rp-over, .replay:focus-within .rp-over { opacity: 1; transform: none; }
.rp-over .kick { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.rp-over h3 { margin: 2px 0 0; font-size: 20px; line-height: 1.3; color: #fff; }
.rp-over .meta { display: flex; align-items: center; gap: 8px; margin: 7px 0 0;
                 font-size: 13.5px; color: #cfe4f7; }
.rp-av { flex: none; width: 26px; height: 26px; border-radius: 50%; color: #fff; font-size: 10.5px;
         font-weight: 800; display: grid; place-items: center;
         background: rgba(255,255,255,.22); border: 1px solid rgba(255,255,255,.34); }
.rp-over .btn { align-self: flex-start; margin-top: var(--s3); display: inline-flex; align-items: center;
                gap: 8px; background: var(--gold); border-color: var(--gold); color: #2e2003; font-weight: 800; }
.rp-over .btn svg { width: 15px; height: 15px; }
.rp-over .btn:hover { background: #dcac38; color: #2e2003; }
/* the duration chip steps aside once the overlay comes up */
.replay:hover .rp-dur, .replay:focus-within .rp-dur { opacity: 0; }
.rp-dur { transition: opacity .18s ease; }
/* nothing recorded yet: the screen greys out and the note stays in view */
.replay.soon .rp-screen { background: linear-gradient(150deg, #39434d 0%, #545f69 100%); }
.replay.soon .rp-over { opacity: 1; transform: none; }
.replay.soon:hover .rp-play, .replay.soon:focus-within .rp-play { transform: none; background: rgba(255,255,255,.16); color: #fff;
                              border-color: rgba(255,255,255,.55); }
.replay.soon .rp-bar i { width: 0; }
/* no hover to give: a touch screen shows the details all the time */
@media (hover: none) { .rp-over { opacity: 1; transform: none; } .rp-dur { opacity: 0; } }

/* --- the file list -------------------------------------------------------- */
.mathead { align-items: flex-start; margin-bottom: var(--s3); padding-bottom: var(--s3);
           border-bottom: 1px solid var(--line-soft); }
.mh-ico { flex: none; width: 38px; height: 38px; border-radius: var(--r); background: var(--blue-100);
          color: var(--blue); display: grid; place-items: center; }
.mh-ico svg { width: 20px; height: 20px; }
.mh-t { flex: 1 1 auto; }
.mh-t p { margin: 2px 0 0; font-size: 12.5px; color: var(--ink-soft); }
.mats li { gap: var(--s3); padding: 10px var(--s2); border-radius: var(--r);
           transition: background .15s ease; }
.mats li:hover { background: var(--blue-100); }
.mats li.is-pend { opacity: .8; }
.mats li.is-pend:hover { background: var(--bg); }
.mats .ft { flex-direction: column; gap: 1px; width: 44px; height: 44px; font-size: 0; }
.mats .ft svg { width: 19px; height: 19px; }
.mats .ft b { font-size: 9px; font-weight: 800; letter-spacing: .06em; }
.mats .mtext { flex: 1 1 auto; min-width: 0; }
/* live deck subtitle: the file name gives way (ellipsis) before the size and date do */
.mats .mm.has-file { display: flex; gap: .35em; min-width: 0; white-space: nowrap; }
.mats .mm.has-file .mf { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.mats .mm.has-file > span:not(.mf) { flex: none; }
.mats li.mats-empty { display: block; padding: 14px var(--s2); font-size: 13px; color: var(--ink-soft); }
.mats .mm.has-file > span + span::before { content: "· "; }
@media (max-width: 560px) {
  .mats .mm.has-file { flex-wrap: wrap; row-gap: 0; }
  .mats .mm.has-file .mf { flex: 1 1 100%; }
  .mats .mm.has-file .mf + span::before { content: none; }
}
.mats .btn.dl { display: inline-flex; align-items: center; gap: 7px; }
.mats .btn.dl svg { width: 14px; height: 14px; }

/* Announcements: the heading row already carries the section-head margin, so
   the grid must not add its own on top — that stacked to 48px and left this
   one section sitting further from its heading than every other. */
.ann-top .section-head { margin-bottom: 0; }
.ann-top + .anngrid { margin-top: var(--s5); }

/* =========================
   STEP Family group chat — one room for the whole cohort. It is a chat, so
   it is built like one: a room header with who is in it, a scrolling stream
   with the reader's own messages on the right, and a composer pinned under
   it. Nothing here is a support ticket.
   ========================= */
.chatroom { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
            box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; }
.ch-top { display: flex; align-items: center; gap: var(--s3); padding: var(--s4) var(--s5);
          border-bottom: 1px solid var(--line-soft); background: linear-gradient(180deg, #f7fafd 0%, #fff 100%); }
.ch-ico { flex: none; width: 42px; height: 42px; border-radius: 12px; background: var(--navy); color: #fff;
          display: grid; place-items: center; }
.ch-ico svg { width: 22px; height: 22px; }
.ch-t { flex: 1 1 auto; min-width: 0; }
.ch-t h3 { margin: 0; font-size: 17px; }
.ch-t p { margin: 2px 0 0; font-size: 12.5px; color: var(--ink-soft); display: flex; align-items: center; gap: 7px; }
.ch-t .live { width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex: none; }
.ch-faces { display: flex; flex: none; }
.ch-faces span { width: 30px; height: 30px; border-radius: 50%; margin-left: -8px; border: 2px solid #fff;
                 background: var(--blue-100); color: var(--navy); font-size: 11px; font-weight: 800;
                 display: grid; place-items: center; }
.ch-faces .more { background: var(--navy); color: #fff; font-size: 10.5px; }
@media (max-width: 560px) { .ch-faces { display: none; } }

.chatroom .thread { gap: var(--s2); margin: 0; padding: var(--s4) var(--s5);
                    max-height: 460px; overflow-y: auto; background: var(--bg); }
.ch-note { display: flex; align-items: center; gap: 8px; margin: 0 0 var(--s3);
           font-size: 12.5px; color: var(--ink-soft); background: var(--surface);
           border: 1px dashed var(--line); border-radius: 999px; padding: 7px var(--s4); }
.ch-note svg { flex: none; color: var(--blue); }
/* a day marker, so a long room still reads as a timeline */
.daydiv { display: flex; align-items: center; gap: var(--s3); margin: var(--s3) 0 var(--s2); }
.daydiv::before, .daydiv::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--line); }
.daydiv span { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
               color: var(--ink-soft); }
.chatroom .msg-row { align-items: flex-end; }
.chatroom .msg-row .bubble { max-width: 78%; background: var(--surface); border: 1px solid var(--line);
                             border-radius: 4px 14px 14px 14px; padding: 9px var(--s4);
                             box-shadow: 0 1px 2px rgba(16,32,48,.05); }
/* the reader's own messages sit on the right, in the brand blue */
.chatroom .msg-row.me { flex-direction: row-reverse; }
/* the reader's own bubble is the mid brand blue, not the deep navy — it
   still reads as theirs without sitting on the page like a hole */
.chatroom .msg-row.me .bubble { background: var(--blue); border-color: var(--blue);
                                border-radius: 14px 4px 14px 14px; }
.chatroom .msg-row.me .bd { color: #fff; }
.chatroom .msg-row .who { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.chatroom .msg-row .who span { font-size: 11.5px; }
/* who is speaking with a STEP hat on */
.rolechip { font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
            padding: 2px 8px; border-radius: 999px; }
.rolechip.team    { background: var(--gold-100); color: #8a6512; }
.rolechip.trainer { background: var(--blue-100); color: var(--blue); }
.rolechip.mentor  { background: var(--green-100); color: var(--green); }

.chatroom .composer-wrap { padding: var(--s4) var(--s5) var(--s5); gap: var(--s3); }
.chatroom .composer input { border-radius: 999px; padding: 12px var(--s5); }
.chatroom .btn.send { flex: none; width: 46px; height: 46px; padding: 0; border-radius: 50%;
                      display: grid; place-items: center; }
.chatroom .btn.send svg { width: 19px; height: 19px; }
.ch-bar { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); align-items: center;
          justify-content: space-between; }
.rolechip.anon { background: rgba(255,255,255,.18); color: #dbe9f7; }
/* the face stack overlaps by a sliver, not by half */
.ch-faces span { margin-left: -6px; }
.ch-faces span:first-child { margin-left: 0; }
/* a participant's team reads as a quiet chip beside their name */
.rolechip.team-name { background: var(--line-soft); color: var(--ink-soft); }

/* the participant sign-in stands alone at the foot of the home page */
.login-card { max-width: 520px; margin: 0 auto; text-align: center; }
.login-card h3 { margin-bottom: 6px; }

/* =========================
   "At a glance" / "This cycle" plates — one shared grid for the whole list,
   so every figure ends on the same right edge and every unit starts on the
   same left edge, whatever the label or the unit is. The rows are display:
   contents, which lets the three cells of a row sit in the plate's columns;
   the rule that used to sit on the row is carried by the cells, which are
   bottom-aligned so it stays one straight line.
   ========================= */
/* no column gap: the cells touch, so their bottom borders read as one rule
   across the row rather than three dashes */
.spec dl { display: grid; grid-template-columns: minmax(0,1fr) max-content max-content; }
.spec .r, .spec .r dd { display: contents; }
.spec .r > dt, .spec .r > dd > b, .spec .r > dd > em {
  align-self: end; padding: 13px 0 11px; margin: 0;
  border-bottom: 1px solid rgba(255,255,255,.13); }
.spec .r:last-child > dt,
.spec .r:last-child > dd > b,
.spec .r:last-child > dd > em { border-bottom: 0; padding-bottom: 4px; }
.spec .r > dt { grid-column: 1; padding-right: var(--s4); }
/* the cells fill their columns (and align their text inside) rather than
   shrinking to fit, so the rule under a short figure is not broken */
.spec .r > dd > b  { grid-column: 2; justify-self: stretch; text-align: right; margin-right: 0;
                     padding-right: 10px; padding-bottom: 8px; }
.spec .r > dd > em { grid-column: 3; justify-self: stretch; text-align: left; }
.spec .r:last-child > dd > b { padding-bottom: 1px; }

/* A row that carries only a value ("1 FASTRAC proposal") spans the figure
   and unit columns and sits against the right edge, so its length no longer
   widens the unit column and pushes every figure to the left. */
.spec .r > dd > em:only-child { grid-column: 2 / -1; text-align: right; padding-right: 0; }

/* =========================
   Once both files are handed in, the submission card becomes the team's own
   screening room: their video plays here and the deck opens beside it, and
   it is the same view their mentor and their Saturday panel see.
   ========================= */
.outhead { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap;
           padding-bottom: var(--s4); border-bottom: 1px solid var(--line-soft); margin-bottom: var(--s5); }
.okchip { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--green-100);
          color: var(--green); display: grid; place-items: center; }
.okchip svg { width: 20px; height: 20px; }
.oh-t { flex: 1 1 260px; min-width: 0; }
.oh-t h3 { margin: 0; font-size: 19px; }
.oh-t p { margin: 3px 0 0; font-size: 13.5px; color: var(--ink-soft); }
.outhead .btn { flex: none; }

.outgrid { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(0,1fr); gap: var(--s5); align-items: start; }
@media (max-width: 880px) { .outgrid { grid-template-columns: minmax(0,1fr); } }
.outvid { margin: 0; }
.outvid video { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r-lg);
                background: #06203c; box-shadow: var(--shadow); }
.outvid figcaption { margin-top: var(--s3); font-size: 13px; color: var(--ink-soft); word-break: break-all; }

.outdeck { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface);
           box-shadow: var(--shadow); padding: var(--s4); display: flex; flex-direction: column; gap: var(--s3); }
.od-head { display: flex; align-items: flex-start; gap: var(--s3); }
.od-ic { flex: none; width: 36px; height: 36px; border-radius: var(--r); background: var(--blue-100);
         color: var(--blue); display: grid; place-items: center; }
.od-ic svg { width: 19px; height: 19px; }
.od-head h4 { margin: 0; font-size: 15px; }
.od-head p { margin: 2px 0 0; font-size: 12.5px; color: var(--ink-soft); word-break: break-all; }
.od-prev { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--bg);
           aspect-ratio: 4 / 3; }
.od-prev iframe { width: 100%; height: 100%; border: 0; display: block; }
.od-none { height: 100%; display: grid; place-items: center; align-content: center; gap: 6px; text-align: center; }
.od-none b { font-size: 20px; font-weight: 800; color: var(--navy); letter-spacing: .04em; }
.od-none span { font-size: 12.5px; color: var(--ink-soft); }

/* upload progress while a real file is going to storage */
.upbar { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s4); }
.up-track { flex: 1 1 auto; height: 8px; border-radius: 999px; background: var(--line-soft); overflow: hidden; }
.up-track i { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--blue);
              transition: width .2s ease; }
.up-txt { flex: none; font-size: 13px; font-weight: 650; color: var(--ink-soft); }
.up-err { margin: var(--s3) 0 0; font-size: 13.5px; font-weight: 600; color: var(--red);
          background: var(--red-100); border-radius: var(--r); padding: 9px var(--s4); }

/* ── Replace-submission confirmation ─────────────────────────────────
   A destructive action gets a stop: the dialog sits over the page and
   nothing is deleted until the participant chooses. */
.confirm {
  position: fixed; inset: 0; z-index: 80;
  display: grid; place-items: center; padding: var(--s4);
  background: rgba(11, 60, 107, .42);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.confirm[hidden] { display: none; }
.confirm-box {
  width: min(470px, 100%); background: var(--surface);
  border-radius: var(--r-lg); box-shadow: 0 12px 40px rgba(16, 32, 48, .22);
  padding: var(--s5); text-align: center;
}
.rc-ic {
  display: inline-grid; place-items: center; width: 46px; height: 46px;
  border-radius: 50%; background: var(--red-100); color: var(--red);
  margin-bottom: var(--s3);
}
.rc-ic svg { width: 24px; height: 24px; }
.confirm-box h3 { margin: 0 0 var(--s4); font-size: 18px; color: var(--ink); }
.confirm-box p {
  margin: 0 0 var(--s3); font-size: 13.5px; line-height: 1.55;
  color: var(--ink-soft); text-align: left;
}
.confirm-box p:last-child { margin-bottom: 0; }
.rc-warn { font-weight: 600; color: var(--red); }
.rc-acts { display: flex; gap: var(--s2); margin-top: var(--s5); }
.rc-acts .btn { flex: 1; justify-content: center; }
body.modal-open { overflow: hidden; }
@media (max-width: 420px) { .rc-acts { flex-direction: column-reverse; } }

/* ── Trainers: post a deck ─────────────────────────────────────────── */
.drops.one { grid-template-columns: 1fr; }
#sl-posted .pl:first-child { border-top: 0; padding-top: 0; }
.pl-empty { font-size: 13.5px; color: var(--ink-soft); }
.pl-acts { margin-left: auto; display: flex; gap: var(--s3); align-items: center; flex: none; }
.pl-acts .lnk { font-size: 13px; }
.pl-acts .lnk.danger { color: var(--red); }

/* a posted deck offered inside a Program module */
.moddeck:empty { display: none; }
.mod-dl {
  display: inline-flex; align-items: center; gap: 6px; margin-top: var(--s3);
  font-size: 12.5px; font-weight: 700; color: var(--blue); text-decoration: none;
  border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; background: var(--surface);
}
.mod-dl:hover { border-color: var(--blue); background: var(--blue-100); }
.mod-dl svg { width: 14px; height: 14px; }

/* ── Trainers: confirming which session a deck belongs to ────────────
   The topic is the headline, because that is the thing to get right. */
.rc-ic.blue { background: var(--blue-100); color: var(--blue); }
.sc-kick {
  text-align: center; font-size: 11px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-soft); margin: 0 0 var(--s2);
}
.confirm-box .sc-topic {
  font-size: 27px; line-height: 1.2; color: var(--navy); text-align: center;
  margin: 0 0 var(--s2); letter-spacing: -.01em;
}
.confirm-box .sc-week {
  text-align: center; font-size: 13.5px; font-weight: 750; color: var(--blue);
  margin: 0 0 var(--s4);
}
.sc-file {
  display: flex; gap: var(--s3); align-items: center; justify-content: center;
  background: var(--bg); border: 1px solid var(--line-soft); border-radius: var(--r);
  padding: 10px var(--s4); font-size: 13px; color: var(--ink-soft); text-align: left;
}
.sc-file .ft {
  flex: none; width: 34px; height: 34px; border-radius: var(--r-sm); display: grid;
  place-items: center; background: var(--blue-100); color: var(--blue);
  font-size: 10px; font-weight: 800;
}
.sc-file b { color: var(--navy); overflow-wrap: anywhere; }
.confirm-box .sc-warn {
  margin: var(--s3) 0 0; font-size: 12.5px; font-weight: 600; color: #7a5a12;
  background: var(--gold-100); border-radius: var(--r); padding: 9px var(--s4); text-align: left;
}



/* ── Trainers: post a deck ───────────────────────────────────────────
   One subject line, one work area, one control rail. The session is
   named in the header and nowhere else, so nothing is said twice. */
.deckhead {
  display: flex; align-items: flex-start; gap: var(--s4); flex-wrap: wrap;
  padding-bottom: var(--s4); margin-bottom: var(--s5);
  border-bottom: 1px solid var(--line-soft);
}
.dh-t { flex: 1 1 260px; min-width: 0; }
.dh-kick {
  display: block; font-size: 11px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-soft); margin-bottom: 3px;
}
.deckhead h3 {
  margin: 0; font-size: 26px; line-height: 1.15; color: var(--navy); letter-spacing: -.015em;
}
.deckhead .dh-t p { margin: 5px 0 0; font-size: 13.5px; color: var(--ink-soft); }
.dh-status {
  flex: none; align-self: center; font-size: 11.5px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-soft); background: var(--line-soft);
  border-radius: 999px; padding: 5px 12px;
}
.dh-status.on { color: var(--green); background: var(--green-100); }

.deckgrid { display: grid; grid-template-columns: 3fr 2fr; gap: var(--s4); align-items: stretch; }
.dg-main { min-width: 0; display: flex; }
.dg-main > * { flex: 1 1 auto; min-width: 0; }
.dg-side {
  /* the picker sits a little below the top edge rather than pinned to it,
     so the rail reads as balanced instead of empty underneath */
  display: flex; flex-direction: column; gap: var(--s4);
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--s5) var(--s4) var(--s4);
}
.ds-top { margin-top: auto; }
.ds-act { margin-top: auto; }
.dg-side .fld > span { margin-bottom: 5px; display: block; }
.dg-side select {
  font: inherit; font-size: 14px; font-weight: 600; color: var(--navy); width: 100%;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 10px var(--s3); max-width: none;
}
.dg-side select:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(31, 111, 178, .15);
}
.ds-note { margin: var(--s3) 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-soft); }
.ds-note.warn { color: #7a5a12; }
.ds-act { display: grid; gap: var(--s2); }
.ds-links { display: flex; justify-content: center; align-items: center; gap: var(--s5); }
/* the shared .lnk pushes itself right (margin-left: auto); here the pair sits centred */
.ds-links .lnk { margin: 0; font-size: 12.5px; color: var(--blue); }
.ds-links .lnk.danger { color: var(--ink-soft); }
.ds-links .lnk.danger:hover { color: var(--red); }
/* Remove this deck — the ask */
#sl-delconfirm h3 { margin-bottom: var(--s3); }
#sl-delconfirm .sc-file { margin-bottom: var(--s3); }
#sl-delconfirm .sd-p { text-align: center; }
.btn.danger:hover { background: #8e3033; }
.dg-side .subcount {
  margin: 0; text-align: center; font-size: 12px; font-weight: 600; color: var(--ink-soft);
}

/* The rail now carries a second job, so it stacks from the top instead of
   floating the picker in the middle: session → deck actions → other materials. */
.dg-side { gap: var(--s4); padding-top: var(--s4); }
.dg-side .ds-top, .dg-side .ds-act { margin-top: 0; }
.dg-side .ds-note { margin-top: var(--s2); }

.ds-extra { border-top: 1px solid var(--line); padding-top: var(--s4); display: grid; gap: var(--s3); }
.sx-head { display: flex; align-items: baseline; gap: var(--s2); }
.sx-head h4 { margin: 0; font-size: 14.5px; font-weight: 750; color: var(--navy); }
.sx-count { margin-left: auto; font-size: 11.5px; font-weight: 700; color: var(--green); }
.sx-hint { margin: -4px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-soft); }

.sx-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sx-list li { display: flex; align-items: center; gap: var(--s2); padding: 8px 10px;
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r); }
.sx-list li.sx-none { justify-content: center; font-size: 12.5px; color: var(--ink-soft);
  background: none; border-style: dashed; border-color: var(--line); }
.sx-ext { flex: none; min-width: 38px; text-align: center; font-size: 9.5px; font-weight: 800; letter-spacing: .06em;
  color: var(--blue); background: var(--blue-100, #e8f1fa); border-radius: 6px; padding: 5px 4px; }
.sx-t { flex: 1 1 auto; min-width: 0; display: grid; }
.sx-t b { font-size: 13px; color: var(--navy); line-height: 1.3; overflow-wrap: anywhere; }
.sx-t em { font-style: normal; font-size: 11.5px; color: var(--ink-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-open, .sx-rm { flex: none; background: none; border: 0; padding: 2px 0; font: inherit;
  font-size: 12px; font-weight: 650; cursor: pointer; text-decoration: none; }
.sx-open { color: var(--blue); }
.sx-rm { color: var(--ink-soft); }
.sx-rm:hover { color: var(--red); }
.sx-open:hover, .sx-rm:hover { text-decoration: underline; }

.sx-form { display: grid; gap: var(--s2); }
.sx-fld { display: grid; gap: 5px; }
.sx-fld > span { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.sx-fld input { font: inherit; font-size: 13.5px; color: var(--navy); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r); padding: 9px var(--s3); width: 100%; box-sizing: border-box; }
.sx-fld input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(31, 111, 178, .15); }
.sx-fld input.need { border-color: #c9962a; box-shadow: 0 0 0 3px rgba(201, 150, 42, .18); }

.sx-pick { position: relative; display: flex; align-items: center; gap: var(--s2); cursor: pointer;
  padding: 9px var(--s3); border: 1px dashed #b9c6d3; border-radius: var(--r); background: var(--surface);
  font-size: 13px; font-weight: 600; color: var(--blue); min-width: 0; }
.sx-pick:hover, .sx-pick.over { border-color: var(--blue); background: #f3f8fd; }
.sx-pick:focus-within { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(31, 111, 178, .15); }
.sx-pick input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.sx-pick svg { flex: none; width: 16px; height: 16px; }
.sx-pick.has { border-style: solid; color: var(--navy); }
.sx-fn { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-clear { position: relative; z-index: 1; flex: none; background: none; border: 0; cursor: pointer;
  font-size: 17px; line-height: 1; color: var(--ink-soft); padding: 0 2px; }
.sx-clear:hover { color: var(--red); }

.sx-msg { margin: 0; font-size: 12.5px; line-height: 1.45; }
.sx-msg.ask { color: #7a5a12; }
.sx-msg.ok  { color: var(--green); }
.sx-msg.err { color: var(--red); }
.ds-extra .upbar { margin-top: 0; }

/* the work area, one height whichever state it is in */
.dg-main .drop, .deckprev { min-height: 300px; }

/* a posted deck reads as a document, not a form field */
.deckprev {
  margin: 0; display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface);
  box-shadow: var(--shadow);
}
.dp-paper {
  flex: 1 1 auto; min-height: 0; background: var(--bg);
  border-bottom: 1px solid var(--line-soft);
  box-shadow: inset 0 1px 6px rgba(16, 32, 48, .07);
}
.dp-paper iframe { width: 100%; height: 100%; border: 0; display: block; }
.dp-paper { position: relative; }
.dp-paper .dp-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; padding: 10px; box-sizing: border-box; }
.dp-paper .dp-none span:only-child { font-size: 13px; }
.dp-none { height: 100%; display: grid; place-content: center; gap: 6px; text-align: center; }
.dp-none b { font-size: 26px; font-weight: 800; color: var(--navy); letter-spacing: .04em; }
.dp-none span { font-size: 12.5px; color: var(--ink-soft); }
.dp-cap {
  flex: none; display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4); background: var(--surface);
}
.dp-file { min-width: 0; flex: 1 1 auto; display: grid; }
.dp-file b { font-size: 13.5px; color: var(--navy); overflow-wrap: anywhere; }
.dp-file > span { font-size: 12px; color: var(--ink-soft); }
.dp-cap .btn { flex: none; font-size: 12.5px; padding: 7px var(--s4); }

@media (max-width: 860px) {
  .deckgrid { grid-template-columns: 1fr; }
  .dg-side { order: -1; }
  .deckhead h3 { font-size: 22px; }
}

/* the confirmation's kicker is centred like the rest of its box */
.confirm-box .sc-kick { text-align: center; }
.gate-acts { display: flex; flex-wrap: wrap; gap: var(--s3); justify-content: center; }

/* a dropdown with nothing left in it must not open as an empty box */
.navdd.dd-empty .ddm { display: none !important; }
.navdd.dd-empty .ddc { display: none; }

/* ── Panel score sheet: a cream sheet of paper ────────────────────────
   The sheet reads as one object laid on the page rather than more of the
   white site around it. Only the neutrals change: redefining the surface,
   background and rule colours inside .sheet2 turns every white and pale
   grey in it cream at once, and the navy header, blue weights, focus
   rings and the selected team keep their colours. */
.sheet2 {
  --surface:   #fffaf0;   /* the paper: the criteria, inputs, cards */
  --bg:        #f7efdc;   /* the rails: team strip, right column, footer */
  --line:      #e5d8bb;
  --line-soft: #efe5cf;
  background: var(--surface);
  border-color: #dccca8;
  box-shadow: 0 1px 0 rgba(120, 96, 40, .06), 0 14px 34px rgba(64, 48, 16, .12);
}
.sheet2 .tmb:hover { border-color: #d3bf92; }
.sheet2 .crow2.set .scin { background: #fffdf8; }         /* was a pale blue-white */
.sheet2 .cdef-ic { color: #cbbd9c; }
.sheet2 .crow2 .scin::placeholder { color: #cbbd9c; }     /* the empty "—" marks */
.sheet2 .tmh-tot:not(.hi):not(.ok):not(.mid):not(.lo) b { color: #cbbd9c; }
.sheet2 .outof { color: #a89a7a; }
.sheet2 .cgrp { background: #f3e9d2; }

/* what to look for under a criterion, straight from the STEP 2 score sheet */
.cdef-h { display: block; white-space: pre-line; margin-top: 3px; font-size: 12px; line-height: 1.45; font-weight: 400; color: var(--ink-soft); }
.crow2.set .cdef-h { font-weight: 400; color: var(--ink-soft); }
.cass-h { display: block; white-space: pre-line; margin-top: 2px; font-size: 12px; line-height: 1.45; color: var(--ink-soft); }

/* ── Trainers: "Post your materials" card, the same cream paper ────────
   Same approach as the score sheet: the neutrals are redefined inside the
   card, so its surfaces, side rail, inputs and rules turn cream together.
   Blues (links, file badges, focus rings) and the green "Deck posted"
   stay as they are. The PDF preview itself is the document, so it keeps
   whatever colours the file has. */
#sl-card {
  --surface:   #fffaf0;
  --bg:        #f7efdc;
  --line:      #e5d8bb;
  --line-soft: #efe5cf;
  background: var(--surface);
  border: 1px solid #dccca8;
  box-shadow: 0 1px 0 rgba(120, 96, 40, .06), 0 14px 34px rgba(64, 48, 16, .12);
}
#sl-card .sx-pick:hover, #sl-card .sx-pick.over { background: #fbf3e2; }
#sl-card .drop:hover, #sl-card .drop.over { background: #fbf3e2; }
#sl-card .filerow .fi { background: var(--surface); }

/* the card's subject line as a navy banner, the same one the score sheet
   carries: kicker in gold, topic in white, week and trainer in pale blue */
#sl-card { padding: 0; overflow: hidden; }
#sl-card > .deckgrid { padding: var(--s5); }
#sl-card > .mockup-note { margin: 0; padding: 0 var(--s5) var(--s5); }
#sl-card .deckhead {
  margin: 0; padding: var(--s4) var(--s5); border-bottom: 0; align-items: center;
  background: linear-gradient(140deg, #072341 0%, #0b3c6b 70%, #10508e 100%); color: #fff;
}
#sl-card .dh-kick { color: var(--gold); }
#sl-card .deckhead h3 { color: #fff; }
#sl-card .deckhead .dh-t p { color: #cfe3f6; }
#sl-card .dh-status { color: #cfe3f6; background: rgba(255, 255, 255, .12); }
#sl-card .dh-status.on { color: #bff0d4; background: rgba(46, 125, 91, .35); }
@media (max-width: 640px) {
  #sl-card .deckhead { padding: var(--s4); }
  #sl-card > .deckgrid { padding: var(--s4); }
  #sl-card > .mockup-note { padding: 0 var(--s4) var(--s4); }
}
/* slimmer banner: just the title block with a little room around it */
#sl-card .deckhead { padding: 10px var(--s5); gap: var(--s3); }
#sl-card .dh-kick { margin-bottom: 1px; font-size: 10.5px; }
#sl-card .deckhead h3 { font-size: 22px; line-height: 1.15; }
#sl-card .deckhead .dh-t p { margin-top: 2px; font-size: 12.5px; }
#sl-card .dh-status { padding: 4px 11px; font-size: 11px; }
@media (max-width: 640px) { #sl-card .deckhead { padding: 10px var(--s4); } }
/* a cream edge above and beside the banner: the card stays one cream panel
   and the navy banner sits inside it rather than forming its top edge */
#sl-card { padding: 10px 10px 0; }
#sl-card .deckhead { border-radius: calc(var(--r-lg) - 4px); }
#sl-card > .deckgrid { padding: var(--s5) calc(var(--s5) - 10px); }
#sl-card > .mockup-note { padding: 0 calc(var(--s5) - 10px) var(--s5); }
@media (max-width: 640px) {
  #sl-card { padding: 8px 8px 0; }
  #sl-card > .deckgrid { padding: var(--s4) calc(var(--s4) - 8px); }
  #sl-card > .mockup-note { padding: 0 calc(var(--s4) - 8px) var(--s4); }
}
/* cream strip above the banner matches the cream margin at the bottom of the
   card; the banner itself runs edge to edge */
#sl-card { padding: var(--s5) 0 0; }
#sl-card .deckhead { border-radius: 0; }
#sl-card > .deckgrid { padding: var(--s5); }
#sl-card > .mockup-note { padding: 0 var(--s5) var(--s5); }
@media (max-width: 640px) {
  #sl-card { padding: var(--s4) 0 0; }
  #sl-card > .deckgrid { padding: var(--s4); }
  #sl-card > .mockup-note { padding: 0 var(--s4) var(--s4); }
}

/* utility bar: the tagline sits on the bar's vertical centre, level with the
   account pill on the right, instead of riding at the top of the row */
.utility-bar .wrap { align-items: center; }
.utility-bar .wrap > span:first-child { line-height: 1.4; }

/* the signed-in email in the utility bar */
.utility-bar .util-email { color: #fff; max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.utility-bar .util-email.out { color: #c8d8e8; font-style: italic; }
@media (max-width: 560px) { .utility-bar .util-email { max-width: 150px; } }

/* score sheet footer: the tally, and under it whether the sheet is saved */
.sh-status { display: grid; gap: 1px; min-width: 0; }
.sh-foot .save-st { font-size: 12px; font-weight: 600; color: var(--ink-soft); }
.sh-foot .save-st:empty { display: none; }
.sh-foot .save-st.ok { color: var(--green); }
.sh-foot .save-st.err { color: var(--red); }
.sh-foot .btn.armed { border-color: var(--red); color: var(--red); }

/* the team header on the score sheet keeps one height for every team:
   the institution always takes two lines' room (short names leave it
   empty, longer ones stop at two lines), so switching teams never moves
   the total, the scale or the comment box */
.tmh { min-height: 56px; }
.tmh-tx span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
               overflow: hidden; min-height: calc(2 * 1.35em); }

/* score sheet header: one height for every session. The title block always
   has room for a two-line title and centres whatever it holds, so a short
   title and a long one give the same header; past two lines it ends in "…". */
.sheet2 .sh-tx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column;
                 justify-content: center; height: 92px; overflow: hidden; }
.sheet2 .sh-top h3 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
                     overflow: hidden; }
@media (max-height: 830px) and (min-width: 900px) { .sheet2 .sh-tx { height: 86px; } }

/* team header on the sheet: the team name stays on one line */
.tmh-tx h4 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the session picker gives the title room: it holds its width instead of
   growing to the longest session name (the full name shows when it opens) */
.sheet2 #sc-session { width: 260px; max-width: 100%; text-overflow: ellipsis; }
@media (max-width: 860px) { .sheet2 #sc-session { width: 100%; } }

/* ── This Week: the session replay panel ─────────────────────────────
   Empty frame until the STEP team posts the real recording; a real video
   player after that. */
.replay.rp-none, .replay.rp-live { padding: 0; display: flex; flex-direction: column;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.rp-emptybox { aspect-ratio: 16 / 9; margin: var(--s3); display: grid; place-content: center; justify-items: center;
  gap: 6px; text-align: center; padding: var(--s4); border: 2px dashed var(--line); border-radius: var(--r);
  background: var(--bg); color: var(--ink-soft); }
.rp-empty-ic { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: var(--line-soft); color: #98a3ad; margin-bottom: 4px; }
.rp-empty-ic svg { width: 22px; height: 22px; }
.rp-emptybox b { font-size: 15px; color: var(--navy); }
.rp-emptybox span:last-child { font-size: 12.5px; max-width: 30ch; line-height: 1.45; }
.rp-player { background: #000; aspect-ratio: 16 / 9; }
.rp-player video { display: block; width: 100%; height: 100%; background: #000; }
.rp-cap { padding: var(--s3) var(--s4) var(--s4); }
.rp-none .rp-cap { padding-top: 0; }
.rp-cap .kick { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.rp-cap h3 { margin: 2px 0 0; font-size: 17px; line-height: 1.3; color: var(--navy); }
.rp-none .rp-cap h3 { color: var(--ink-soft); }
.rp-cap .meta { margin: 4px 0 0; font-size: 12.5px; color: var(--ink-soft); }
/* corner badge over an embedded Drive recording: covers Google's pop-out button (see This Week) */
.rp-bug { position: absolute; top: 8px; right: 10px; width: 60px; height: 48px; z-index: 2;
          display: grid; place-items: center; border-radius: 9px;
          background: #006eb9; box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.rp-bug img { width: 48px; height: 26px; object-fit: contain; display: block; }

/* ── This Week: a small picture of each posted file ── */
.mats .ft.thumb { position: relative; overflow: hidden; }
.mats .ft.thumb.has-img { width: 44px; height: 56px; background: #fff; border: 1px solid var(--line);
  box-shadow: 0 1px 3px rgba(16, 32, 48, .12); padding: 0; }
.mats .ft.thumb.has-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: top center; }
.mats .ft.thumb.has-img svg { display: none; }
.mats .ft.thumb.has-img b { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; font-size: 8px;
  color: #fff; background: rgba(11, 60, 107, .82); padding: 1px 0; text-align: center; }

/* ── Capstone item 7: 7.1, 7.2 and 7.3 as their own boxes ── */
.isub { margin: 0 0 var(--s4); }
.isub > label { display: block; font-size: 14px; font-weight: 650; color: var(--navy); margin-bottom: 6px; }
.isub > label b { display: inline-block; min-width: 30px; color: var(--blue); }
.isub > label .fine { font-weight: 400; font-size: 12px; color: var(--ink-soft); margin-left: 4px; }
.isub .wc { display: block; margin-top: 4px; }
.editor .isub textarea { min-height: 0; font-size: 14px; padding: 10px var(--s3); }
.isub2 { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 8px; align-items: start; margin-top: 8px; }
.isub2 > label { font-size: 13px; font-weight: 650; color: var(--ink-soft); padding-top: 10px; }
@media (max-width: 560px) { .isub2 { grid-template-columns: 1fr; } .isub2 > label { padding-top: 0; } }
/* on the paper: the specific objectives as a numbered list */
ol.objs { margin: 2px 0 0; padding-left: 22px; }

/* ── Panel: watch a team's output ── */
.po-bar { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s4); align-items: flex-end;
  padding-bottom: var(--s4); margin-bottom: var(--s4); border-bottom: 1px solid var(--line-soft); }
.po-bar .fld select { font: inherit; font-size: 14px; font-weight: 600; color: var(--navy); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r); padding: 9px var(--s3); min-width: 240px; }
.po-bar .fld select:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(31,111,178,.15); }
.po-team select { min-width: 200px; }
.po-state { margin-left: auto; align-self: center; font-size: 12.5px; font-weight: 700; color: var(--ink-soft);
  border-radius: 999px; padding: 5px 12px; background: var(--line-soft); }
.po-state:empty { display: none; }
.po-state.ok { color: var(--green); background: var(--green-100); }
.po-state.late { color: #7a5a12; background: var(--gold-100); }
.po-state.no { color: var(--ink-soft); }
.po-empty { aspect-ratio: 16 / 6; min-height: 200px; display: grid; place-content: center; justify-items: center; gap: 6px;
  text-align: center; padding: var(--s5); border: 2px dashed var(--line); border-radius: var(--r-lg);
  background: var(--bg); color: var(--ink-soft); }
.po-empty[hidden] { display: none; }
.po-empty-ic { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: var(--line-soft); color: #98a3ad; margin-bottom: 4px; }
.po-empty-ic svg { width: 22px; height: 22px; }
.po-empty b { font-size: 15px; color: var(--navy); }
.po-empty span:last-child { font-size: 13px; max-width: 48ch; line-height: 1.5; }
@media (max-width: 640px) { .po-bar .fld, .po-bar .fld select { width: 100%; min-width: 0; } .po-state { margin-left: 0; } }

/* ── Panel outputs: the team picker, coloured by who has handed in ── */
.tpick { position: relative; min-width: 290px; }
.tpick-btn { display: flex; align-items: center; gap: 9px; width: 100%; font: inherit; font-size: 14px; font-weight: 600;
  color: var(--navy); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 9px var(--s3); cursor: pointer; text-align: left; }
.tpick-btn:focus-visible, .tpick-btn[aria-expanded="true"] { outline: none; border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(31,111,178,.15); }
.tpick-btn .tp-name { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tpick-btn .tp-chev { flex: none; width: 16px; height: 16px; color: var(--ink-soft); }
.tp-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #c3ced8; }
.tp-tag { flex: none; font-size: 11.5px; font-weight: 700; color: var(--ink-soft); }
.tp-tag:empty { display: none; }

.tpick-list { position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 6px); max-height: 380px; overflow-y: auto;
  list-style: none; margin: 0; padding: 6px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: 0 14px 34px rgba(16, 32, 48, .18); }
.tpick-list:focus { outline: none; }
.tp-grp { display: flex; justify-content: space-between; gap: 8px; padding: 8px 10px 4px; font-size: 11px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.tp-grp span { letter-spacing: 0; text-transform: none; font-weight: 600; }
.tp-opt { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 7px; cursor: pointer;
  font-size: 14px; color: var(--ink); }
.tp-opt .tp-name { font-weight: 600; }
.tp-opt .tp-at { font-size: 12.5px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.tp-opt .tp-tag { margin-left: auto; }
.tp-opt:hover, .tp-opt.act { background: var(--blue-100); }
.tp-opt[aria-selected="true"] { box-shadow: inset 3px 0 0 var(--blue); background: #f0f6fc; }

/* handed in: green name and dot */
.tp-opt.in .tp-name, .tpick-btn.in .tp-name { color: var(--green); font-weight: 800; }
.tp-opt.in .tp-dot, .tpick-btn.in .tp-dot { background: var(--green); }
.tp-opt.in .tp-tag, .tpick-btn.in .tp-tag { color: var(--green); }
/* late or only one of the two files: gold */
.tp-opt.late .tp-name, .tpick-btn.late .tp-name,
.tp-opt.part .tp-name, .tpick-btn.part .tp-name { color: #8a6412; font-weight: 700; }
.tp-opt.late .tp-dot, .tpick-btn.late .tp-dot, .tp-opt.part .tp-dot, .tpick-btn.part .tp-dot { background: var(--gold); }
.tp-opt.late .tp-tag, .tpick-btn.late .tp-tag, .tp-opt.part .tp-tag, .tpick-btn.part .tp-tag { color: #8a6412; }
/* not yet: muted */
.tp-opt.out .tp-name { color: var(--ink-soft); font-weight: 500; }
@media (max-width: 640px) { .tpick { min-width: 0; width: 100%; } }

/* the team picker lists all ten teams without scrolling */
.tpick-list { max-height: min(calc(78 * var(--vh)), 520px); padding: 4px; }
.tp-grp { padding: 6px 10px 2px; font-size: 10px; }
.tp-opt { padding: 4px 10px; font-size: 13px; gap: 8px; border-radius: 6px; }
.tp-opt .tp-tag { font-size: 11px; }
.tp-dot { width: 8px; height: 8px; }

/* score sheet for an account with no seat: shown, not editable */
.sheet2.noseat .tm-panel, .sheet2.noseat .tm-tabs { opacity: .5; pointer-events: none; }

/* score sheet header for a panelist: their own name instead of pickers */
.sh-me .sh-me-v { display: flex; flex-direction: column; justify-content: center; min-width: 200px;
  padding: 6px 14px; border-radius: var(--r); background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.28); }
.sh-me b { color: #fff; font-size: 15px; line-height: 1.25; }
.sh-me em { font-style: normal; font-size: 12px; color: #9fc4e6; }
/* the admin's "edit this sheet?" prompt */
.rc-ic.gold { background: var(--gold-100); color: #8a6412; }

/* ── Home: this cycle's numbers ── */
.numbers-cap { grid-column: 1 / -1; margin: -6px 0 0; font-size: 12px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-soft); opacity: .8; }

/* ── Home: the 12 weeks — one timeline, three phases ─────────────────── */
.jx-line { position: relative; max-width: 1040px; margin: 0 auto var(--s6); padding-right: 92px; }
.jx-bands { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.jx-bands span { height: 6px; border-radius: 999px; background: rgba(255,255,255,.10); overflow: hidden; }
.jx-bands i { display: block; height: 100%; width: 0; border-radius: inherit;
  transition: width 1s cubic-bezier(.25,.8,.3,1); }
.jx-bands .p1 i { background: linear-gradient(90deg, #c9962a, #f0c75e); transition-delay: .15s; }
.jx-bands .p2 i { background: linear-gradient(90deg, #4f9fe0, #8ecbf7); transition-delay: .75s; }
.jx-bands .p3 i { background: linear-gradient(90deg, #cfe3f6, #ffffff); transition-delay: 1.35s; }
.jx-line.in .jx-bands i { width: 100%; }
.jx-weeks, .jx-nums { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.jx-weeks { position: absolute; left: 0; right: 92px; top: -7px; height: 20px; pointer-events: none; }
.jx-weeks span { border-left: 1px solid rgba(255,255,255,.14); }
.jx-weeks span:first-child { border-left: 0; }
.jx-nums { margin-top: 10px; }
.jx-nums span { text-align: center; font-size: 11px; font-weight: 600; color: #8fb2d3; font-variant-numeric: tabular-nums; }
.jx-flag { position: absolute; right: 0; top: -9px; display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #2e2003;
  background: var(--gold); border-radius: 999px; padding: 5px 11px; box-shadow: 0 6px 16px rgba(0,0,0,.25); }
.jx-flag::before { content: ""; position: absolute; left: -12px; top: 50%; width: 12px; height: 2px;
  background: rgba(255,255,255,.35); }

.jx-phases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4);
  max-width: 1040px; margin: 0 auto; }
.jx-card { --accent: #f0c75e; --tint: rgba(240,199,94,.14);
  position: relative; text-align: left; padding: 22px 22px 20px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.035));
  border: 1px solid rgba(255,255,255,.14); box-shadow: 0 18px 40px rgba(3, 18, 36, .28);
  transition: transform .3s cubic-bezier(.2,.7,.3,1), border-color .3s ease, background .3s ease; }
.jx-card.p2 { --accent: #8ecbf7; --tint: rgba(142,203,247,.14); }
.jx-card.p3 { --accent: #ffffff; --tint: rgba(255,255,255,.12); }
.jx-card::before { content: ""; position: absolute; left: 22px; right: 22px; top: -1px; height: 3px;
  border-radius: 0 0 3px 3px; background: var(--accent); opacity: .9; }
.jx-card:hover { transform: translateY(-4px); border-color: rgba(255,255,255,.26);
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05)); }
.jx-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.jx-ico { width: 50px; height: 50px; border-radius: 13px; display: grid; place-items: center; flex: none;
  color: var(--accent); background: var(--tint); border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent); }
.jx-ico svg { width: 26px; height: 26px; }
.jx-no { text-align: right; font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #8fb2d3; }
.jx-no b { display: block; margin-top: 2px; font-size: 12.5px; letter-spacing: .08em; color: var(--accent); }
.jx-card h3 { color: #fff; font-size: 21px; margin: 18px 0 6px; }
.jx-card p { margin: 0 0 16px; font-size: 14px; line-height: 1.55; color: #c6d9ec; }
.jx-card .chips { justify-content: flex-start; }
.jx-card .chip { font-size: 12.5px; }

@media (max-width: 900px) {
  .jx-phases { grid-template-columns: minmax(0, 1fr); }
  .jx-line { padding-right: 0; padding-bottom: 34px; }
  .jx-weeks { right: 0; }
  .jx-flag { top: auto; bottom: 0; }
  .jx-flag::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .jx-bands i { width: 100%; transition: none; }
  .jx-card { transition: none; }
}
/* the three bands sit exactly over the three cards; Demo Day is flagged above the end of the line */
.jx-line { padding-right: 0; margin-top: 52px; }
.jx-bands { gap: var(--s4); }
.jx-weeks { right: 0; display: none; }
.jx-nums { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--s4); }
.jx-nums { display: grid; }
.jx-flag { top: -40px; right: 0; }
.jx-flag::before { left: auto; right: 14px; top: 100%; width: 2px; height: 14px; background: var(--gold); }
@media (max-width: 900px) {
  .jx-line { padding-bottom: 0; margin-top: 44px; }
  .jx-flag { top: -38px; bottom: auto; }
  .jx-flag::before { display: block; }
}
.jx-q { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.jx-q em { font-style: normal; text-align: center; font-size: 11px; font-weight: 600; color: #8fb2d3; font-variant-numeric: tabular-nums; }

/* this cycle's numbers: each figure centred in its column, the caption centred under the row */
.numbers .wrap > div { text-align: center; }
.numbers-cap { text-align: center; margin-top: 2px; }

/* the cycle label reads as the panel's heading, top left; even room above and below */
.numbers .wrap { padding-top: var(--s5); padding-bottom: var(--s6); row-gap: var(--s4); }
.numbers-cap { grid-column: 1 / -1; text-align: left; margin: 0; padding-bottom: var(--s3);
  border-bottom: 1px solid var(--line-soft); font-size: 11.5px; font-weight: 800; letter-spacing: .14em;
  color: var(--gold); opacity: 1; }
@media (max-width: 640px) { .numbers .wrap { padding-top: var(--s4); padding-bottom: var(--s5); } }
.numbers .wrap { row-gap: var(--s5); padding-top: var(--s5); padding-bottom: var(--s6); }

/* ── Team output: video and deck as two matching cards, top and bottom aligned ── */
.outgrid { align-items: stretch; }
.outvid { margin: 0; display: flex; flex-direction: column; gap: var(--s3); padding: var(--s4);
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow); }
.ov-screen { flex: 1 1 auto; min-height: 0; border-radius: var(--r); overflow: hidden; background: #000; display: flex; }
.outvid .ov-screen video { flex: 1 1 auto; width: 100%; height: 100%; min-height: 0; aspect-ratio: auto;
  object-fit: contain; border-radius: 0; box-shadow: none; background: #000; }
@media (max-width: 880px) { .ov-screen { flex: none; aspect-ratio: 16 / 9; } }

/* =====================================================================
   Mentors — the weekly accomplishment report (#mrep)
   Same cream paper and navy banner as the panel score sheet.
   ===================================================================== */
.mrep {
  --surface: #fffaf0; --bg: #f7efdc; --line: #e5d8bb; --line-soft: #efe5cf;
  background: var(--surface); border: 1px solid #dccca8; border-radius: var(--r-lg); overflow: hidden;
  box-shadow: 0 1px 0 rgba(120, 96, 40, .06), 0 14px 34px rgba(64, 48, 16, .12);
}
.mrep .sh-top { padding: 12px var(--s5); }
.mrep .sh-tx { flex: 1 1 auto; }
.mrep .sh-picks select { min-width: 0; max-width: 300px; }
#mr-week { width: 300px; }
#mr-team { width: 250px; }
@media (max-width: 860px) { #mr-week, #mr-team { width: 100%; max-width: none; } .mrep .sh-picks { width: 100%; }
  .mrep .sh-picks .fld { flex: 1 1 200px; } }

.mr-info { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s4); align-items: flex-end;
           padding: var(--s4) var(--s5); border-bottom: 1px solid var(--line); }
.mr-in { display: grid; gap: 5px; flex: 1 1 240px; min-width: 0; }
.mr-in > span { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.mr-in input { font: inherit; font-size: 14.5px; color: var(--navy); font-weight: 600; background: #fffdf8;
               border: 1px solid var(--line); border-radius: var(--r); padding: 8px 11px; min-width: 0; }
.mr-in input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(31,111,178,.15); }
.mr-state { flex: none; align-self: center; margin-top: 18px; font-size: 12px; font-weight: 800; letter-spacing: .06em;
            text-transform: uppercase; padding: 6px 12px; border-radius: 999px; background: var(--bg);
            color: var(--ink-soft); border: 1px solid var(--line); }
.mr-state.ok { background: var(--green-100); color: var(--green); border-color: #bfe0cf; }
.mr-state.stale { background: var(--gold-100); color: var(--amber); border-color: #ecd6a6; }

.mr-src { margin: 0; padding: 10px var(--s5); font-size: 13px; color: var(--amber); background: var(--gold-100);
          border-bottom: 1px solid var(--line); }

.mr-table { padding: 0 var(--s5) var(--s4); }
.mr-head, .mr-row { display: grid; grid-template-columns: minmax(0, 1.15fr) 168px minmax(0, 1fr); gap: var(--s4); }
.mr-head { padding: 12px 0 9px; border-bottom: 1.5px solid var(--navy); }
.mr-head span { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--navy); }
.mr-row { padding: 14px 0; border-bottom: 1px solid var(--line-soft); align-items: start; }
.mr-row:last-child { border-bottom: 0; }
.mr-row.lead { display: block; padding: 14px 0 4px; border-bottom: 0; font-weight: 750; color: var(--navy); font-size: 14.5px; }
.mr-task { display: flex; gap: 11px; font-size: 14.5px; line-height: 1.5; color: var(--ink); }
.mr-task b { color: var(--navy); }
.mr-sub { display: block; }
.mr-n { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; margin-top: 1px;
        font-style: normal; font-size: 12px; font-weight: 800; background: var(--bg); color: var(--navy);
        border: 1px solid var(--line); }
.mr-row.done .mr-n { background: var(--green); border-color: var(--green); color: #fff; }
.mr-chk { display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: 13px; font-weight: 700;
          cursor: pointer; padding: 7px 12px 7px 9px; border-radius: 999px; color: var(--ink-soft);
          background: #fffdf8; border: 1px dashed #cdbb92; transition: background .15s, border-color .15s, color .15s; }
.mr-chk svg { width: 16px; height: 16px; opacity: .35; }
.mr-chk:hover { border-color: var(--green); color: var(--green); }
.mr-chk[aria-pressed="true"] { background: var(--green-100); color: var(--green); border: 1px solid #a9d3bd; }
.mr-chk[aria-pressed="true"] svg { opacity: 1; }
.mr-chk:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.mr-rem textarea { width: 100%; box-sizing: border-box; resize: none; overflow: hidden; font: inherit; font-size: 14px;
                   line-height: 1.45; color: var(--ink); background: #fffdf8; border: 1px solid var(--line);
                   border-radius: var(--r); padding: 8px 10px; min-height: 44px; }
.mr-rem textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(31,111,178,.15); }
.mr-rem textarea::placeholder { color: #bfae88; }
@media (max-width: 760px) {
  .mr-head { display: none; }
  .mr-row { grid-template-columns: 1fr; gap: 9px; }
  .mr-stat, .mr-rem { padding-left: 35px; }
}

.mr-signed { display: flex; flex-wrap: wrap; gap: 10px var(--s3); align-items: center; margin: 0 var(--s5) var(--s4);
             padding: 11px 14px; border-radius: var(--r); background: var(--green-100); border: 1px solid #bfe0cf; }
.mr-sig-ic { flex: none; width: 36px; height: 36px; border-radius: var(--r); display: grid; place-items: center;
             background: #fff; color: var(--green); }
.mr-sig-ic svg { width: 20px; height: 20px; }
.mr-sig-tx { flex: 1 1 200px; min-width: 0; display: grid; gap: 1px; }
.mr-sig-tx b { color: var(--green); font-size: 14px; }
.mr-sig-tx em { font-style: normal; font-size: 12.5px; color: var(--ink-soft); overflow-wrap: anywhere; }
.mr-stale { flex-basis: 100%; font-size: 12.5px; color: var(--amber); font-weight: 600; }

.mrep .sh-foot { padding: 10px var(--s5); }
.mr-acts { gap: var(--s3); flex-wrap: wrap; }
.mr-acts .btn { display: inline-flex; align-items: center; gap: 7px; }
.mr-acts .btn svg { width: 16px; height: 16px; }
.mr-prog { height: 3px; background: var(--line-soft); }
.mr-prog i { display: block; height: 100%; width: 0; background: var(--gold); transition: width .2s; }

/* =====================================================================
   Home — the 12 weeks as a road to the horizon (#jr)
   One vanishing point: three gates on the road (Weeks 1–4, 5–8, 9–12),
   Demo Day where the road meets the sunrise, and a small robot guide at
   the start. Cards float beside the gate they belong to.
   ===================================================================== */
.jr { position: relative; max-width: 1200px; margin: 0 auto; }
.jr-stage { position: relative; aspect-ratio: 1200 / 800; border-radius: 28px; overflow: hidden;
  background: #0b3c6b; isolation: isolate;
  box-shadow: 0 30px 70px rgba(3, 18, 38, .45), inset 0 0 0 1px rgba(255,255,255,.08); }
.jr-scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; font-family: inherit; }
.jr-stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(120% 90% at 50% 30%, transparent 55%, rgba(4, 20, 40, .55) 100%); }

.jr-goal { position: absolute; z-index: 2; left: 50%; top: 13%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 7px 14px 7px 7px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: #fff;
  background: rgba(8, 36, 66, .55); border: 1px solid rgba(255, 231, 168, .55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 8px 24px rgba(0,0,0,.25), 0 0 30px rgba(255, 215, 120, .25); }
.jr-goal b { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: #2e2003; background: var(--gold); border-radius: 999px; padding: 4px 10px; }
.jr-goal::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: 46px;
  background: linear-gradient(rgba(255,231,168,.7), transparent); }

/* the cards */
.jr-card { position: relative; border-radius: 20px; padding: 18px 20px 18px; color: #fff;
  background: linear-gradient(160deg, rgba(20, 70, 120, .78), rgba(8, 36, 68, .82));
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px rgba(2, 14, 30, .45), inset 0 1px 0 rgba(255,255,255,.14);
  transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease; }
.jr-card::before { content: ""; position: absolute; left: 20px; right: 20px; top: -1px; height: 3px; border-radius: 0 0 3px 3px;
  background: var(--jc); box-shadow: 0 0 16px var(--jc); }
.jr-card.p1 { --jc: #f0c75e; } .jr-card.p2 { --jc: #8ecbf7; } .jr-card.p3 { --jc: #ffffff; }
.jr-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.jr-ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; color: var(--jc);
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 6px 16px rgba(0,0,0,.25); }
.jr-ico svg { width: 24px; height: 24px; }
.jr-no { text-align: right; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #9fc4e6; }
.jr-no b { display: block; font-size: 13.5px; font-weight: 800; letter-spacing: .12em; color: var(--jc); }
.jr-card h3 { color: #fff; font-size: 21px; margin: 0 0 6px; }
.jr-card p { color: #cfe0f2; font-size: 14.5px; line-height: 1.5; margin: 0 0 12px; }
.jr-card .chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-start; }
.jr-card .chip { font-size: 12px; padding: 4px 10px; background: rgba(255,255,255,.10); color: #e4eefa;
  border: 1px solid rgba(255,255,255,.16); }

@media (min-width: 1180px) {
  .jr-cards { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
  .jr-card { position: absolute; top: 3%; width: 29%; pointer-events: auto; }
  .jr-card.p1 { left: 2%; }
  .jr-card.p2 { left: 35.5%; }
  .jr-card.p3 { right: 2%; }
  .jr-card:hover { transform: translateY(-4px); box-shadow: 0 26px 50px rgba(2, 14, 30, .55), inset 0 1px 0 rgba(255,255,255,.16); }
}
@media (max-width: 1179.98px) {
  .jr-links { display: none; }
  .jr-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); margin-top: var(--s5); }
  .jr-stage { border-radius: 22px; aspect-ratio: 1200 / 560; }
  .jr-scene { height: 100%; }
}
@media (max-width: 760px) {
  .jr-cards { grid-template-columns: minmax(0, 1fr); }
  .jr-stage { aspect-ratio: 4 / 3; }
}
/* motion */
.jr-stars circle { animation: jrTwinkle var(--tw, 4s) ease-in-out infinite alternate; }
@keyframes jrTwinkle { to { opacity: .1; } }
.jr-bulb { animation: jrLamp 3s ease-in-out infinite alternate; }
@keyframes jrLamp { from { opacity: .75; } to { opacity: 1; } }
.jr-links path, .jr-links-p { stroke-dashoffset: 0; animation: jrFlow 1.4s linear infinite; }
@keyframes jrFlow { to { stroke-dashoffset: -16; } }
.jr-flag { transform-box: fill-box; transform-origin: left center; animation: jrFlag 1.2s ease-in-out infinite alternate; }
@keyframes jrFlag { to { transform: scaleX(.8) skewY(4deg); } }
.jr-bot .rb-body { animation: rbBob 2.4s ease-in-out infinite; }
@keyframes rbBob { 50% { transform: translateY(-7px); } }
.jr-bot .rb-shadow { transform-box: fill-box; transform-origin: center; animation: rbShadow 2.4s ease-in-out infinite; }
@keyframes rbShadow { 50% { transform: scale(.86); opacity: .25; } }
.rb-arm-l { transform: rotate(150deg); animation: rbWave 1.1s ease-in-out infinite alternate; }
@keyframes rbWave { from { transform: rotate(128deg); } to { transform: rotate(168deg); } }
.rb-arm-r { transform: rotate(-14deg); }
.rb-head { transform-box: fill-box; transform-origin: 50% 100%; animation: rbTilt 4.8s ease-in-out infinite; }
@keyframes rbTilt { 0%, 60%, 100% { transform: rotate(0); } 70% { transform: rotate(-6deg); } 85% { transform: rotate(4deg); } }
.rb-eyes rect { transform-box: fill-box; transform-origin: center; animation: rbBlink 4.2s infinite; }
@keyframes rbBlink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.12); } }
.rb-led { animation: rbLed 1.8s ease-in-out infinite; }
.rb-led.l2 { animation-delay: .3s; } .rb-led.l3 { animation-delay: .6s; }
@keyframes rbLed { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
  .jr-stars circle, .jr-bulb, .jr-links path, .jr-flag, .jr-bot .rb-body, .jr-bot .rb-shadow,
  .rb-arm-l, .rb-head, .rb-eyes rect, .rb-led { animation: none; }
  .jr-card:hover { transform: none; }
}

/* Home — breathing room around the 12-weeks band */
.journey:has(.jr) { padding-top: clamp(48px, 6vw, 80px); padding-bottom: clamp(48px, 6vw, 80px); }
.journey:has(.jr) + main.page, .journey:has(.jr) + .page { padding-top: clamp(48px, 6vw, 80px); }

/* ── Mentor report, compact: the whole form and its buttons fit one screen ── */
#mr-sec .section-head { margin-bottom: var(--s4); }
#mr-sec .section-head .lede { font-size: 15px; }
.mrep .sh-top { padding: 8px var(--s5); }
.mrep .sh-top h3 { font-size: 19px; margin: 1px 0; }
.mrep .sh-meta { font-size: 11.5px; }
.mrep .sh-picks select { padding: 5px 10px; font-size: 13px; }
.mr-info { padding: 8px var(--s5); gap: 8px var(--s4); align-items: center; }
.mr-in { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; }
.mr-in > span { font-size: 10.5px; white-space: nowrap; }
.mr-in input { font-size: 13.5px; padding: 5px 10px; }
.mr-state { margin-top: 0; font-size: 11px; padding: 4px 10px; }
.mr-src { padding: 6px var(--s5); font-size: 12.5px; }
.mr-table { padding: 0 var(--s5) 4px; }
.mr-head, .mr-row { grid-template-columns: minmax(0, 1fr) 118px minmax(0, 1fr); gap: var(--s3); }
.mr-head { padding: 7px 0 6px; }
.mr-head span { font-size: 10.5px; }
.mr-row { padding: 7px 0; align-items: center; }
.mr-row.lead { padding: 8px 0 0; font-size: 13.5px; }
.mr-task { gap: 9px; font-size: 13.5px; line-height: 1.4; align-items: flex-start; }
.mr-n { width: 21px; height: 21px; font-size: 11px; margin-top: 0; }
.mr-chk { font-size: 12px; padding: 5px 10px 5px 7px; gap: 5px; }
.mr-chk svg { width: 14px; height: 14px; }
.mr-rem textarea { font-size: 13px; padding: 6px 9px; min-height: 34px; line-height: 1.4; }
.mr-signed { margin: 4px var(--s5) 8px; padding: 7px 12px; }
.mr-sig-ic { width: 30px; height: 30px; }
.mr-sig-tx b { font-size: 13px; }
.mr-sig-tx em { font-size: 12px; }
.mrep .sh-foot { padding: 8px var(--s5); }
.mrep .sh-foot .msg { font-size: 13px; }
.mr-acts .btn { padding: 7px 13px; font-size: 13px; }
/* the actions stay on screen while the list scrolls past */
.mrep .sh-foot { position: sticky; bottom: 0; z-index: 4; box-shadow: 0 -8px 18px rgba(64, 48, 16, .08); }
.mrep { overflow: clip; }
@media (max-width: 760px) {
  .mr-row { gap: 6px; }
  .mr-in { grid-template-columns: 1fr; gap: 4px; }
}

/* ── Mentor report: a fixed 4:3 card; only the activity list scrolls ── */
#mr-sec { container-type: inline-size; }
.mrep { display: flex; flex-direction: column;
  height: min(75cqw, calc(100 * var(--vh) - 120px)); min-height: 440px; }
.mrep > .sh-top, .mrep > .mr-info, .mrep > .mr-signed, .mrep > .sh-foot, .mrep > .mr-prog { flex: none; }
.mrep .sh-foot { position: static; box-shadow: 0 -8px 18px rgba(64, 48, 16, .06); }
.mr-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: transparent transparent; transition: scrollbar-color .3s; }
.mr-scroll.scrolling { scrollbar-color: #cdbb92 transparent; }
.mr-scroll::-webkit-scrollbar { width: 8px; }
.mr-scroll::-webkit-scrollbar-track { background: transparent; }
.mr-scroll::-webkit-scrollbar-thumb { background: transparent; border-radius: 8px; }
.mr-scroll.scrolling::-webkit-scrollbar-thumb { background: #cdbb92; }
.mr-scroll .mr-head { position: sticky; top: 0; z-index: 2; background: var(--surface); }

/* the submitted copy: one slim line */
.mr-signed { display: flex; flex-wrap: nowrap; align-items: center; gap: 10px; min-width: 0;
  margin: 0; padding: 6px var(--s5); border: 0; border-radius: 0; border-top: 1px solid #bfe0cf;
  background: var(--green-100); font-size: 12.5px; }
.mr-signed .mr-sig-ic { width: 24px; height: 24px; border-radius: 6px; flex: none; }
.mr-signed .mr-sig-ic svg { width: 15px; height: 15px; }
.mr-signed b { flex: none; color: var(--green); font-size: 12.5px; }
.mr-signed em { flex: 1 1 auto; min-width: 0; font-style: normal; color: var(--ink-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mr-signed i { flex: none; font-style: normal; color: var(--ink-soft); opacity: .8; white-space: nowrap; }
.mr-view { flex: none; font-weight: 700; color: var(--navy); text-decoration: none; padding: 3px 10px;
  border-radius: 999px; border: 1px solid #a9d3bd; background: #fff; }
.mr-view:hover { border-color: var(--green); }
.mr-signed.stale { background: var(--gold-100); border-top-color: #ecd6a6; }
.mr-signed.stale .mr-sig-ic { color: var(--amber); }
.mr-signed.stale b { color: var(--amber); }
.mr-signed.stale .mr-view { border-color: #ecd6a6; }
@media (max-width: 640px) {
  .mr-signed i { display: none; }
  .mrep { height: calc(100 * var(--vh) - 90px); }
}
.mr-info .mr-in:nth-child(2) { flex-grow: 1.5; }
@media (max-width: 760px) {
  .mr-head { display: none; }
  .mr-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .mr-stat, .mr-rem { padding-left: 30px; }
  .mr-acts { width: 100%; }
  .mr-acts .btn { flex: 1 1 0; justify-content: center; padding: 7px 8px; }
  .mrep .sh-top { padding: 8px var(--s4); }
  .mr-info, .mr-table, .mrep .sh-foot, .mr-signed { padding-left: var(--s4); padding-right: var(--s4); }
}

/* ── Home cover: the STEP film, then the cover slides in ────────────────
   While the film plays it sits on top of the cover. When it ends it slides
   off to the left and the cover — photo, overlay and statement — is revealed
   from the right, the statement gliding into place behind it. */
.hero-photo > .hero-video { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%;
  object-fit: cover; object-position: center; pointer-events: none; background: #0b3c6b;
  transform: translateX(0); will-change: transform;
  transition: transform 1.1s cubic-bezier(.7, 0, .25, 1);
  opacity: 0; }                                   /* invisible behind the cover while it loads */
.hero-photo.intro > .hero-video, .hero-photo.intro-out > .hero-video { opacity: 1; }
.hero-photo.intro-out > .hero-video { transform: translateX(-100%); }
.hero-photo > .wrap { transition: transform 1.1s cubic-bezier(.7, 0, .25, 1); }
.hero-photo.intro > .wrap { transform: translateX(14vw); transition: none; }
.hero-photo.intro-out > .wrap { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) { .hero-photo > .hero-video, .hero-photo > .wrap { transition: none; } }

/* ── Mentor report: 1rem shorter, a little more air up top, list centred ── */
.mrep { height: calc(min(75cqw, 100 * var(--vh) - 120px) - 7rem); min-height: calc(440px - 7rem); }
.mrep .sh-top { padding: 12px var(--s5) 13px; }
.mr-info { padding: 11px var(--s5); }
.mr-scroll { display: flex; flex-direction: column; }
.mr-scroll > .mr-table { flex: none; padding-top: 6px; padding-bottom: 10px; }
/* a little air above the list, never a gulf: the top spacer takes a share of the free room, capped */
.mr-scroll::before { content: ""; flex: 1 1 0; max-height: 14px; }
.mr-scroll::after { content: ""; flex: 3 1 0; }
.mr-scroll > .mr-src { flex: none; }
@media (max-width: 640px) { .mrep { height: calc(100 * var(--vh) - 90px - 7rem); } }

/* ── This Week: bigger material thumbnails; the two panels share one height ── */
.matwrap { align-items: stretch; }
.matwrap > .replay, .matwrap > .matcard { height: 100%; }
.matwrap > .replay { justify-content: flex-start; }
/* the screen takes up any extra height, so the caption sits at the bottom with no gap above it */
.matwrap > .replay > .rp-screen, .matwrap > .replay > .rp-emptybox, .matwrap > .replay > .rp-player { flex: 1 0 auto; }
.mats li { gap: var(--s4); padding: 12px 0; }
.mats .ft { width: 64px; height: 82px; border-radius: 8px; font-size: 12px; }
.mats .ft.thumb.has-img { width: 64px; height: 82px; border-radius: 8px; }
.mats .ft.thumb.has-img b { font-size: 9.5px; padding: 2px 0; letter-spacing: .06em; }
.mats .mn { font-size: 15px; }
@media (max-width: 640px) {
  .mats .ft, .mats .ft.thumb.has-img { width: 52px; height: 66px; }
}

/* ── This Week materials: slide-shaped (16:9) thumbnails, cream panels ── */
.mats .ft, .mats .ft.thumb.has-img { width: 112px; height: 63px; border-radius: 7px; }
.mats .ft { gap: 2px; }
.mats .ft.thumb.has-img img { object-position: center top; }
@media (max-width: 640px) { .mats .ft, .mats .ft.thumb.has-img { width: 88px; height: 50px; } }

.matwrap > .replay, .matwrap > .matcard {
  --surface: #fffaf0; --bg: #f7efdc; --line: #e5d8bb; --line-soft: #efe5cf;
  background: var(--surface); border-color: #dccca8;
  box-shadow: 0 1px 0 rgba(120, 96, 40, .06), 0 14px 34px rgba(64, 48, 16, .10);
}
.matwrap .mats .ft { background: #f3e7cc; color: #8a6412; }
.matwrap .mats .ft.pend { background: var(--line-soft); color: #b3a27c; }
.matwrap .mats .ft.thumb.has-img { background: #fff; border-color: #dccca8; }
.matwrap .mh-ico { background: #f3e7cc; color: #8a6412; }
.matwrap .matcount { background: #f3e7cc; color: #8a6412; }
.matwrap .mats .btn.secondary { background: #fffdf8; border-color: #dccca8; }
.rp-emptybox span:last-child { text-wrap: balance; }

/* ── This Week materials: thumbnails a sixth narrower; click a row to view it ── */
.mats .ft, .mats .ft.thumb.has-img { width: 94px; height: 63px; }
@media (max-width: 640px) { .mats .ft, .mats .ft.thumb.has-img { width: 74px; height: 50px; } }
.mats li.can-view { cursor: pointer; border-radius: 10px; margin: 0 -10px; padding-left: 10px; padding-right: 10px;
  transition: background .15s ease; }
.mats li.can-view:hover { background: rgba(201, 154, 46, .08); }
.mats li.can-view:hover .mn { text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: #c3c9d0; text-underline-offset: 3px; }
.mats li.can-view:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }

.mv { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 3vh 3vw;
  background: rgba(6, 22, 40, .62); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.mv[hidden] { display: none; }
.mv-box { width: min(1120px, 100%); height: min(calc(88 * var(--vh)), 900px); display: flex; flex-direction: column;
  background: #fffaf0; border: 1px solid #dccca8; border-radius: 16px; overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35); }
.mv-head { display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 20px;
  background: linear-gradient(140deg, #072341 0%, #0b3c6b 70%, #10508e 100%); color: #fff; }
.mv-t { flex: 1 1 auto; min-width: 0; display: grid; }
.mv-t b { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mv-t em { font-style: normal; font-size: 12px; color: #b9d4ee; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mv-head .btn { flex: none; display: inline-flex; align-items: center; gap: 6px; background: var(--gold); color: #2e2003; border-color: transparent; }
.mv-head .btn svg { width: 15px; height: 15px; }
.mv-head .btn[hidden] { display: none; }
.mv-x { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); color: #fff; }
.mv-x:hover { background: rgba(255,255,255,.22); }
.mv-x svg { width: 18px; height: 18px; }
.mv-body { flex: 1 1 auto; min-height: 0; background: #f2ead8; }
.mv-body iframe { width: 100%; height: 100%; border: 0; display: block; background: #fff; }
.mv-img { width: 100%; height: 100%; display: grid; place-items: center; padding: 16px; overflow: auto; }
.mv-img img { max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: 0 8px 24px rgba(0,0,0,.18); background: #fff; }
.mv-none { height: 100%; display: grid; place-content: center; justify-items: center; gap: 8px; text-align: center; padding: 24px; color: var(--ink-soft); }
.mv-none .ft { width: 94px; height: 63px; border-radius: 8px; display: grid; place-items: center; background: #f3e7cc; color: #8a6412; font-weight: 800; font-size: 13px; }
.mv-none b { color: var(--navy); font-size: 17px; }
.mv-none span:last-child { font-size: 13.5px; max-width: 36ch; text-wrap: balance; }
@media (max-width: 640px) { .mv { padding: 0; } .mv-box { height: 100%; border-radius: 0; } .mv-head .btn { padding: 6px 10px; } }

/* ── My Team: the submission card in cream; status sits beside "Your output is in" ── */
.subcard {
  --surface: #fffaf0; --bg: #f7efdc; --line: #e5d8bb; --line-soft: #efe5cf;
  background: var(--surface); border-color: #dccca8;
  box-shadow: 0 1px 0 rgba(120, 96, 40, .06), 0 14px 34px rgba(64, 48, 16, .10);
}
.subcard .due[hidden] { display: none; }
.subcard .oh-h { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.subcard .oh-h .badge { font-size: 12px; }
.subcard .outvid, .subcard .outdeck { background: #fffdf8; border-color: #e5d8bb; }
.subcard .od-ic { background: #f3e7cc; color: #8a6412; }
.subcard .btn.secondary { background: #fffdf8; border-color: #dccca8; }
.subcard .drop:not(.filled) { background: #fffdf8; border-color: #d9c79d; }
.subcard .drop:not(.filled):hover, .subcard .drop.over { background: #f1f2f4; border-color: #aab2bc; box-shadow: none; }
.subcard .drop:not(.filled) .ico { color: #8a6412; }

/* ── Top bar: the Trainers tab names the page that is open (Trainers / Mentors / Panel);
      the three names share one cell so the tab is always as wide as the longest ── */
.ddlab { display: inline-grid; }
.ddlab > span { grid-area: 1 / 1; text-align: center; visibility: hidden; }
.ddlab > span.on { visibility: visible; }

/* ── No lone last words: hero notes balance their lines; body copy avoids orphans ── */
#fa-note, .page-hero p, .section-head .lede { text-wrap: balance; }
p, li, .mm, .muted { text-wrap: pretty; }

/* =====================================================================
   Type: Archivo, one family in two widths. Expanded (125) for headings
   and display numbers, normal width for everything you read.
   Loaded from Google Fonts in each page's <head>; falls back to Inter.
   ===================================================================== */
:root { --font: "Archivo", "Inter", "Segoe UI", system-ui, -apple-system, Arial, sans-serif; }
body { font-stretch: 100%; }
h1, h2, h3,
.hero-statement, .numbers .n, .page-hero h1, .team-bar h1 { font-stretch: 125%; }
h1, .hero-statement { font-weight: 800; letter-spacing: -.02em; }
h2 { font-weight: 750; letter-spacing: -.012em; }
h3 { letter-spacing: -.005em; }

/* =====================================================================
   Graph paper. Used only where the page is about the plan itself:
   the home "This cycle" numbers, the top of Program and STEP Groups,
   and behind the cycle calendar. Working pages stay plain.
   ===================================================================== */
:root { --grid-line: #e2e9f2; --grid-size: 24px; }
body { overflow-x: clip; }
.graph-paper, .numbers {
  background-color: var(--bg);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
  background-position: -1px -1px;
}
/* full-width grid that fades out: the top of a page, or around one section */
.gp-top, .gp-band { position: relative; isolation: isolate; }
.gp-top::before, .gp-band::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: calc(50% - 50 * var(--vw)); width: calc(100 * var(--vw));
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
  background-position: center -1px;
}
.gp-top::before {
  top: 0; height: 560px;
  -webkit-mask-image: linear-gradient(#000 45%, transparent);
          mask-image: linear-gradient(#000 45%, transparent);
}
.gp-band::before {
  top: -56px; bottom: -56px;
  -webkit-mask-image: linear-gradient(transparent, #000 90px, #000 calc(100% - 90px), transparent);
          mask-image: linear-gradient(transparent, #000 90px, #000 calc(100% - 90px), transparent);
}

/* STEP Groups showcase: team name a little smaller, wrapping between words only */
.st-name { font-size: clamp(34px, 5.6vw, 76px); line-height: 1.02; }
.st-name .wd { display: inline-block; white-space: nowrap; }

/* Home headline, set like the redesign preview: Archivo Expanded 800,
   sentence case, one colour, stacked a word or two per line */
.hero-statement {
  font-size: clamp(40px, 6.4vw, 88px); line-height: .98; font-weight: 800;
  letter-spacing: -.025em; font-stretch: 125%;
  width: min-content; max-width: none; text-wrap: wrap; /* one word per line */
}

.hero-statement em { font-style: normal; color: #9ccbf4; font-weight: inherit; }

/* match the preview exactly: same axes, same size, same tracking */
.hero-photo .hero-statement { font-variation-settings: "wdth" 125; font-stretch: 125%; font-weight: 700;
  letter-spacing: -.025em; line-height: .98; text-shadow: none; text-transform: none; }

/* Home: headline and the numbers share the page's left edge */
.hero-photo > .wrap { width: 100%; }

/* =====================================================================
   Home "12 weeks" band: graph paper behind the blue infographic panel.
   The grid carries on straight down from the numbers strip above.
   ===================================================================== */
.journey:has(.jr) {
  background-color: var(--bg);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
  background-position: -1px -1px;
  color: var(--ink);
}
.journey:has(.jr) h2 { color: var(--navy); }
.journey:has(.jr) .eyebrow { color: #a97c14; }
.jr-stage { box-shadow: 0 24px 56px rgba(11, 60, 107, .22), inset 0 0 0 1px rgba(255,255,255,.08); }

/* Home numbers: the same white card as the STEP Groups figures, on the grid */
.numbers .wrap { display: block; padding-top: var(--s5); padding-bottom: var(--s6); }
.numbers .wrap > .cstats { text-align: left; }
.numbers .cs { text-align: left; }
.numbers .cs b { font-size: 40px; font-weight: 800; letter-spacing: -.035em; font-stretch: 125%; }
.numbers .cstats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 640px) { .numbers .cstats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Home numbers: bigger figures, quieter light-grey labels, and the whole block sits lower
   so the space above and below it is even */
.numbers .wrap { padding-top: clamp(48px, 5.6vw, 80px); padding-bottom: 0; }
.numbers .cs { padding: var(--s6) var(--s6) calc(var(--s6) - 2px); }
.numbers .cs b { font-size: clamp(48px, 5vw, 72px); }
.numbers .cs .k { font-size: 16px; font-weight: 400; color: #9aa5b1; margin-top: 14px; }
@media (max-width: 640px) { .numbers .cs { padding: var(--s5); } .numbers .cs b { font-size: 44px; } }
.numbers .cs b { font-size: clamp(46px, 3.8vw, 56px); }
@media (max-width: 640px) { .numbers .cs b { font-size: 46px; } }
.numbers .cs .k { font-size: 14px; color: #7b8794; margin-top: 8px; line-height: 1.3; }
.numbers .cs { padding: 30px var(--s6) 26px; }
@media (max-width: 640px) { .numbers .cs { padding: 22px var(--s5) 20px; } }

/* Home cover: photos slide left every 10 seconds */
.hero-photo > .hero-slides { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hs-track { display: flex; height: 100%; transition: transform 1.1s cubic-bezier(.7, 0, .25, 1); will-change: transform; }
.hs { flex: 0 0 100%; height: 100%; background: var(--navy) center / cover no-repeat; }
@media (prefers-reduced-motion: reduce) { .hs-track { transition: none; } }

/* ---------------------------------------------------------------------
   My Team's Work — empty panels and the first load (real accounts)
   A panel with nothing recorded says what will appear there, centred in
   the space the chart would take, so the layout never jumps.
   --------------------------------------------------------------------- */
.tw-empty { position: absolute; inset: 0; display: grid; place-content: center; gap: 6px;
  text-align: center; padding: 18px 22px; border: 1.5px dashed #cfdbe6; border-radius: 12px;
  background: linear-gradient(180deg, #f8fbfd, #f3f7fa); color: var(--ink-soft); }
.tw-empty b { color: var(--navy); font-size: 15px; font-weight: 750; }
.tw-empty span { font-size: 13px; line-height: 1.5; max-width: 34ch; margin: 0 auto; }
.tw-empty span b { font-size: 13px; }
.tw-bars .tw-empty b { font-size: 14px; }
.tw-bars .tw-empty span { font-size: 12.5px; }
.tw-loading { display: flex; align-items: center; justify-content: center; gap: 12px;
  min-height: calc(46 * var(--vh)); color: var(--ink-soft); font-size: 15px; }
.tw-loading[hidden] { display: none; }
.tw-spin { width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid #d6e2ec;
  border-top-color: var(--blue); animation: twspin .8s linear infinite; }
@keyframes twspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .tw-spin { animation: none; } }

/* Panel tab: the submit button shows that the scores went in */
#sc-submit.is-done, #sc-submit.is-done:disabled { background: #2e7d32; border-color: #2e7d32; color: #fff; opacity: 1; cursor: default; }

/* STEP Family chat — the live room */
.msg-row .bd { white-space: pre-wrap; overflow-wrap: anywhere; }
.ch-empty { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 36px 16px; color: var(--ink-soft); }
.ch-empty b { color: var(--navy); font-size: 15px; }
.ch-empty .btn { margin-top: 8px; }

/* your own (blue) messages: every label stays readable on the blue */

/* the ⋮ options button — out of the way until you point at a message */
.chatroom { position: relative; }
.chatroom .msg-row .bubble.has-menu { position: relative; padding-right: 38px; }
.chatroom .kebab { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border: 0; border-radius: 50%;
  display: grid; place-items: center; background: transparent; color: var(--ink-soft); cursor: pointer; opacity: 0;
  transition: opacity .15s, background .15s; }
.chatroom .kebab svg { width: 16px; height: 16px; fill: currentColor; }
.chatroom .msg-row:hover .kebab, .chatroom .kebab:focus-visible, .chatroom .kebab[aria-expanded="true"] { opacity: 1; }
.chatroom .kebab:hover, .chatroom .kebab[aria-expanded="true"] { background: rgba(16,32,48,.08); }
.chatroom .msg-row.me .kebab { color: #fff; }
.chatroom .msg-row.me .kebab:hover, .chatroom .msg-row.me .kebab[aria-expanded="true"] { background: rgba(255,255,255,.2); }
@media (hover: none) { .chatroom .kebab { opacity: .75; } }

/* the menu it opens */
.msg-menu { position: absolute; z-index: 30; min-width: 180px; padding: 5px; background: #fff; border: 1px solid var(--line);
  border-radius: 10px; box-shadow: 0 10px 30px rgba(16,32,48,.16); display: grid; }
.msg-menu[hidden] { display: none; }
.msg-menu button { all: unset; cursor: pointer; padding: 9px 12px; border-radius: 7px; font-size: 14px; font-weight: 600; color: var(--ink); }
.msg-menu button:hover, .msg-menu button:focus-visible { background: var(--blue-100); color: var(--navy); }
.msg-menu button.danger { color: #a63d40; }
.msg-menu button.danger:hover, .msg-menu button.danger:focus-visible { background: #fbe9ea; color: #8e2f32; }

/* editing a message in place */
.chatroom .ed { display: grid; gap: 6px; margin-top: 4px; min-width: min(420px, 60vw); }
.chatroom .ed textarea { font: inherit; font-size: 14px; line-height: 1.45; color: var(--ink); background: #fff; border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 10px; resize: vertical; min-height: 44px; }
.chatroom .ed textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(31,111,178,.15); }
.chatroom .ed-acts { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.chatroom .ed-acts span { margin-right: auto; color: var(--ink-soft); }
.chatroom .msg-row.me .ed-acts span { color: #e6f1fb; }
.chatroom .ed-acts button { border: 1px solid var(--line); background: #fff; color: var(--navy); border-radius: 999px; padding: 4px 12px; font-weight: 700; font-size: 12.5px; cursor: pointer; }
.chatroom .ed-acts .ed-ok { background: var(--navy); border-color: var(--navy); color: #fff; }

/* the pinned message */
.ch-pin { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px var(--s5); background: #fdf6e6; border-bottom: 1px solid #f0e2bd; color: var(--ink); }
.ch-pin[hidden] { display: none; }
.ch-pin .pt { flex: 1 1 auto; min-width: 0; display: grid; }
.ch-pin .pt b { font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: #8a6512; }
.ch-pin .pt span { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-pin .go { font-size: 12.5px; font-weight: 700; color: var(--navy); }
.ch-pin:hover { background: #fbf0d6; }
.chatroom .msg-row.pinned .bubble { box-shadow: 0 0 0 2px #e8c770; }
.chatroom .msg-row.flash .bubble { animation: msgflash 1.4s ease; }
@keyframes msgflash { 0%, 40% { box-shadow: 0 0 0 4px #e8c770; } 100% { box-shadow: 0 0 0 2px #e8c770; } }

/* the sender's badge: a small quiet tag beside the name, not a headline */
.chatroom .msg-row .who .rolechip { font-size: 9px; font-weight: 700; letter-spacing: .05em; line-height: 1.5;
  padding: 0 6px; border-radius: 4px; opacity: .9; }

/* name, badge and time sit above the bubble in small grey type;
   the bubble holds only the message and its ⋮ */
.chatroom .msg-row .mcol { display: flex; flex-direction: column; align-items: flex-start; max-width: 78%; min-width: 0; }
.chatroom .msg-row.me .mcol { align-items: flex-end; }
.chatroom .msg-row .mcol .bubble { max-width: 100%; }
.chatroom .msg-row .who { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 6px 3px;
  font-size: 11px; font-weight: 500; color: var(--ink-soft); }
.chatroom .msg-row .who .nm { font-size: 11.5px; font-weight: 650; color: var(--ink-soft); }
.chatroom .msg-row .who .tm { font-size: 11px; font-weight: 500; color: #8d98a3; }
.chatroom .msg-row .bubble .bd { margin-top: 0; }

/* =====================================================================
   Graph paper under a page's blue banner: starts crisp at the banner's
   bottom edge and covers the top half of the page, fading out as it goes.
   Used on My Team's Work and Trainers (Trainers, Mentors, Panels).
   ===================================================================== */
.gp-after { position: relative; isolation: isolate; }
.gp-after::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: 0; height: 50%; left: calc(50% - 50 * var(--vw)); width: calc(100 * var(--vw));
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
  background-position: center -1px;
  -webkit-mask-image: linear-gradient(#000 60%, transparent);
          mask-image: linear-gradient(#000 60%, transparent);
}

/* ---------- desktop scale ----------
   The site was designed on a laptop whose display is set to a smaller scale than its
   screen recommends, so on an ordinary laptop or desktop everything came out about a
   quarter too large. On mouse/trackpad devices 1024px and wider the whole page is drawn
   at 80%. Phones and tablets are untouched. `zoom` also shrinks vh/vw units, so the few
   sizes that must span the real screen (the home cover, full-bleed grids, panel and
   modal heights) are written with --vh/--vw, which are enlarged here to compensate. */
:root { --vh: 1vh; --vw: 1vw; }
@media (min-width: 1024px) and (hover: hover) {
  body { zoom: .8; }
  :root { --vh: 1.25vh; --vw: 1.25vw; }
}

/* =====================================================================
   Group chat: cream paper and navy, like the panel score sheet, and a
   taller room. Only the neutrals change (same trick as .sheet2): the
   navy header, blue "me" bubbles and gold pin ring keep their colours.
   ===================================================================== */
.chatroom {
  --surface:   #fffaf0;
  --bg:        #f7efdc;
  --line:      #e5d8bb;
  --line-soft: #efe5cf;
  border-color: #dccca8;
  box-shadow: 0 1px 0 rgba(120, 96, 40, .06), 0 14px 34px rgba(64, 48, 16, .12);
}
.chatroom .ch-top { background: linear-gradient(140deg, #072341 0%, #0b3c6b 70%, #10508e 100%); border-bottom: 0; }
.chatroom .ch-ico { background: rgba(255,255,255,.14); color: #fff; }
.chatroom .ch-t h3 { color: #fff; }
.chatroom .ch-t p { color: #cfe3f6; }
.chatroom .ch-t .live { box-shadow: 0 0 0 3px rgba(82, 196, 120, .25); }
.chatroom .ch-faces span { border-color: #0b3c6b; background: var(--blue-100); }
.chatroom .ch-faces .more { background: var(--gold); color: #fff; }
.chatroom .thread { height: clamp(560px, calc(74 * var(--vh)), 780px); max-height: none; background: var(--bg);
  align-content: start; }   /* a short room keeps its messages together at the top, not spread over the height */
.chatroom .msg-row .bubble { background: #fffdf8; border-color: #e5d8bb; }
.chatroom .msg-row.me .bubble { background: var(--blue); border-color: var(--blue); }
.chatroom .composer-wrap { background: var(--surface); border-top: 1px solid var(--line); }
.chatroom .composer input { background: #fffdf8; border-color: #dccca8; }
.chatroom .composer input:focus { border-color: var(--blue); }
.chatroom .ch-pin { background: #fbf3e2; }

/* ---- it should feel like a chat box: runs of messages, time inside the
   bubble, a floating day chip, a patterned wall and a one-piece message bar ---- */
.chatroom .thread { background-image: radial-gradient(rgba(150, 118, 52, .16) 1px, transparent 1.3px); background-size: 20px 20px;
  padding: var(--s4) var(--s5) var(--s5); gap: 8px; }
.chatroom .daydiv { margin: var(--s4) 0 var(--s3); justify-content: center; gap: 14px; width: calc(60% + 72px); max-width: 100%; margin-inline: auto; }
.chatroom .daydiv::before, .chatroom .daydiv::after { display: block; content: ""; flex: 1 1 auto; height: 1px; background: rgba(105, 108, 114, .32); }
.chatroom .daydiv span { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0;
  font-size: 11.5px; letter-spacing: .03em; text-transform: none; font-weight: 600; color: #7d8189; }
.chatroom .msg-row { gap: 8px; }
.chatroom .msg-row.cont { margin-top: -5px; }
.chatroom .msg-row .av.ghost { background: none; border: 0; box-shadow: none; }
.chatroom .msg-row .av { width: 32px; height: 32px; font-size: 11.5px; font-weight: 800; background: #fbf3e2; color: var(--navy);
  border: 1px solid #e5d8bb; }
.chatroom .msg-row .who { margin: 0 0 3px 12px; }
.chatroom .msg-row .who .nm { color: var(--navy); font-weight: 700; }
.chatroom .msg-row .bubble { display: flex; flex-wrap: wrap; align-items: flex-end; column-gap: 12px; row-gap: 0;
  padding: 8px 14px 6px; border-radius: 18px; box-shadow: 0 1px 1.5px rgba(64, 48, 16, .12); }
.chatroom .msg-row:not(.me).cont .bubble { border-top-left-radius: 6px; }
.chatroom .msg-row:not(.me):not(.endrun) .bubble { border-bottom-left-radius: 6px; }
.chatroom .msg-row:not(.me).endrun .bubble { border-bottom-left-radius: 4px; }
.chatroom .msg-row.me.cont .bubble { border-top-right-radius: 6px; }
.chatroom .msg-row.me:not(.endrun) .bubble { border-bottom-right-radius: 6px; }
.chatroom .msg-row.me.endrun .bubble { border-bottom-right-radius: 4px; }
.chatroom .msg-row .bubble .bd { flex: 1 1 auto; min-width: 0; font-size: 14.5px; line-height: 1.42; padding-bottom: 2px; }
.chatroom .msg-row .bubble .tm { flex: none; margin-left: auto; font-size: 10.5px; font-weight: 500; color: #9a8f77; line-height: 1.6; padding-bottom: 1px; }
.chatroom .msg-row.me .bubble .tm { color: rgba(255, 255, 255, .72); }
.chatroom .msg-row .bubble .ed { flex: 1 1 100%; }
.chatroom .msg-row .bubble.has-menu { padding-right: 14px; }
.chatroom .kebab { top: 4px; right: 4px; width: 24px; height: 24px; background: inherit; }
.chatroom .msg-row .mcol { max-width: min(78%, 560px); }

.chatroom .composer-wrap { padding: 10px var(--s4) 12px; background: #f3e9d0; border-top: 1px solid #dccca8; gap: 6px; }
.chatroom .composer { gap: 0; align-items: center; background: #fffdf8; border: 1px solid #dccca8; border-radius: 999px;
  padding: 4px 4px 4px 18px; box-shadow: 0 1px 2px rgba(64, 48, 16, .08); transition: border-color .15s, box-shadow .15s; }
.chatroom .composer:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(31, 111, 178, .15); }
.chatroom .composer input { border: 0; background: transparent; box-shadow: none; padding: 9px 4px; border-radius: 0; }
.chatroom .composer input:focus { box-shadow: none; border: 0; }
.chatroom .btn.send { width: 40px; height: 40px; }
.chatroom .composer-wrap .small { font-size: 11.5px; text-align: center; margin: 0; color: #8f8466; }

/* ---- pictures in the chat ---- */
.chatroom .ch-attach { flex: none; width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: #8a7a52;
  display: grid; place-items: center; cursor: pointer; margin-left: -10px; margin-right: 2px; }
.chatroom .ch-attach svg { width: 21px; height: 21px; }
.chatroom .ch-attach:hover:not(:disabled) { background: #f3e9d0; color: var(--navy); }
.chatroom .ch-attach:disabled { opacity: .4; cursor: not-allowed; }
.chatroom .ch-attach:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.chatroom .ch-stage { display: flex; align-items: center; gap: 12px; background: #fffdf8; border: 1px solid #dccca8; border-radius: 14px;
  padding: 8px 10px; box-shadow: 0 1px 2px rgba(64, 48, 16, .08); }
.chatroom .ch-stage[hidden] { display: none; }
.chatroom .ch-stage img { width: 56px; height: 56px; object-fit: cover; border-radius: 9px; border: 1px solid #e5d8bb; flex: none; }
.chatroom .ch-stage-t { flex: 1 1 auto; min-width: 0; display: grid; font-size: 12px; color: var(--ink-soft); }
.chatroom .ch-stage-t b { color: var(--navy); font-size: 13px; }
.chatroom .ch-stage-t span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chatroom .ch-stage-x { flex: none; width: 30px; height: 30px; border: 0; border-radius: 50%; background: #f3e9d0; color: var(--navy);
  font-size: 20px; line-height: 1; cursor: pointer; }
.chatroom .ch-stage-x:hover { background: #e9dcb9; }
.chatroom.drop::after { content: "Drop the picture to attach it"; position: absolute; inset: 0; z-index: 5; display: grid; place-items: center;
  background: rgba(11, 60, 107, .78); color: #fff; font-weight: 700; font-size: 18px; border-radius: inherit; pointer-events: none; }
.chatroom .msg-row .bubble.has-img { padding: 5px 5px 6px; }
.chatroom .msg-row .bubble.has-img .bd { padding: 5px 9px 1px; }
.chatroom .msg-row .bubble.has-img .tm { padding-right: 8px; }
.chatroom .msg-row .bubble.has-img.has-menu { padding-right: 5px; }
.chatroom .msg-row .bubble.has-img { display: block; }
.chatroom .msg-row .bubble.has-img .tm { float: right; margin-left: 12px; }
.chatroom .msg-row .bubble.has-img::after { content: ""; display: block; clear: both; }
.chatroom .chimg { display: block; width: auto; max-width: min(340px, 62vw); max-height: 320px; min-height: 90px;
  border-radius: 13px; object-fit: cover; background: #efe5cf; cursor: pointer; }
.chatroom .ch-light { position: fixed; inset: 0; z-index: 400; background: rgba(8, 24, 44, .86); display: grid; place-items: center; padding: 24px; cursor: default; }
.chatroom .ch-light[hidden] { display: none; }
.chatroom .ch-light img { max-width: min(96vw, 1200px); max-height: 88vh; border-radius: 10px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.chatroom .ch-light button { position: absolute; top: 16px; right: 18px; width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .16); color: #fff; font-size: 26px; cursor: pointer; }

/* =====================================================================
   STEP GC: the group chat as its own screen. Three columns like a
   messenger: rooms on the left, the chat in the middle, this week and
   what is due on the right. The page does not scroll; each list does.
   ===================================================================== */
body.on-gc { overflow: hidden; }
body.on-gc .site-footer { display: none; }
.gc-page { padding: 0; background: var(--bg); }
.gc-app { display: grid; grid-template-columns: 300px minmax(0, 1fr) 320px; gap: 12px; padding: 12px; box-sizing: border-box;
  height: calc(100 * var(--vh) - var(--gc-top, 128px)); min-height: 440px; }
.gc-left, .gc-card { background: #fffaf0; border: 1px solid #dccca8; border-radius: 16px;
  box-shadow: 0 1px 0 rgba(120, 96, 40, .06), 0 8px 22px rgba(64, 48, 16, .08); }
.gc-left { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.gc-lh { padding: 16px 18px 6px; }
.gc-lh h1 { margin: 0; font-size: 25px; line-height: 1.1; color: var(--navy); }
.gc-search { display: flex; align-items: center; gap: 8px; margin: 8px 14px 10px; padding: 0 12px; background: #f3e9d0;
  border-radius: 999px; color: #8a7a52; }
.gc-search svg { width: 17px; height: 17px; flex: none; }
.gc-search input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 14px; padding: 9px 0;
  color: var(--ink); outline: none; }
.gc-search:focus-within { box-shadow: 0 0 0 3px rgba(31, 111, 178, .18); }
.gc-chips { display: flex; gap: 6px; padding: 0 14px 10px; }
.gc-chips button { border: 0; background: transparent; font: inherit; font-size: 13.5px; font-weight: 650; color: var(--navy);
  padding: 6px 13px; border-radius: 999px; cursor: pointer; }
.gc-chips button:hover { background: #f3e9d0; }
.gc-chips button[aria-selected="true"] { background: var(--blue-100); color: var(--blue); }
.gc-rooms { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.gc-room { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 12px; cursor: pointer; }
.gc-room:hover { background: #f7efdc; }
.gc-room.on { background: var(--blue-100); }
.gc-room:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.gc-room[hidden] { display: none; }
.gc-room.soon { opacity: .72; }
.gc-room.nudge { animation: gcnudge .45s ease; }
@keyframes gcnudge { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.gc-av { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 14px;
  background: var(--navy); color: #fff; }
.gc-av svg { width: 23px; height: 23px; }
.gc-av.team { background: #fbf3e2; color: #8a6512; border: 1px solid #e5d8bb; }
.gc-av.dm { background: var(--blue-100); color: var(--blue); }
.gc-av.group { background: var(--blue); color: #fff; }
.gc-chips { gap: 2px; flex-wrap: nowrap; }
.gc-chips button { padding: 6px 10px; font-size: 13px; white-space: nowrap; }
.gc-rt { flex: 1 1 auto; min-width: 0; display: grid; gap: 1px; }
.gc-rt b { font-size: 15px; color: var(--navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gc-rt span { font-size: 12.5px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gc-room time { flex: none; font-size: 11.5px; color: #9a8f77; align-self: flex-start; margin-top: 4px; }
.gc-soon { flex: none; font-style: normal; font-size: 10.5px; font-weight: 700; color: #8a6512; background: var(--gold-100); border-radius: 999px; padding: 2px 8px; }
.gc-none { margin: 10px 14px; font-size: 13px; color: var(--ink-soft); }

.gc-mid { min-width: 0; min-height: 0; display: flex; }
.gc-mid .chatroom { flex: 1 1 auto; min-height: 0; min-width: 0; margin: 0; }
.gc-app .chatroom .thread { height: auto; flex: 1 1 0; min-height: 0; max-height: none; }

.gc-right { min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding-right: 2px; }
.gc-card { padding: 16px 18px; flex: none; }
.gc-card h2 { margin: 2px 0 2px; font-size: 22px; color: var(--navy); }
.gc-card h3 { margin: 0 0 10px; font-size: 15.5px; color: var(--navy); }
.gc-k { font-size: 12px; font-weight: 700; color: #8a6512; }
.gc-tt { margin: 2px 0 4px; font-size: 15px; font-weight: 650; color: var(--ink); line-height: 1.3; }
.gc-tag, .gc-note { margin: 0 0 10px; font-size: 13px; color: var(--ink-soft); line-height: 1.45; }
.gc-link { display: inline-block; font-size: 13.5px; font-weight: 700; color: var(--blue); text-decoration: none; }
.gc-link:hover { text-decoration: underline; }
.gc-ev { display: flex; align-items: center; gap: 12px; padding: 8px 0; text-decoration: none; color: inherit; border-top: 1px solid #efe5cf; }
.gc-ev:first-of-type { border-top: 0; padding-top: 0; }
.gc-dd { flex: none; width: 44px; padding: 5px 0 4px; border-radius: 10px; background: #f3e9d0; color: var(--navy); text-align: center;
  font-size: 10.5px; font-weight: 700; line-height: 1.1; display: grid; }
.gc-dd b { font-size: 18px; line-height: 1.1; }
.gc-ev.today .gc-dd, a.gc-ev.dueitem:hover .gc-dd { background: var(--blue); color: #fff; }
.gc-ev.dueitem { align-items: flex-start; }
.gc-ev.dueitem .gc-dd { margin-top: 2px; }
.gc-fx { margin-top: 6px; font-size: 11.5px !important; font-weight: 700; color: #8a6512 !important; }
.gc-items { list-style: none; margin: 3px 0 0; padding: 0; display: grid; gap: 3px; }
.gc-items li { display: flex; gap: 7px; align-items: baseline; font-size: 12px; line-height: 1.35; color: var(--ink); }
.gc-items i { flex: none; font-style: normal; font-size: 10.5px; font-weight: 800; color: var(--navy); background: var(--blue-100);
  border-radius: 6px; min-width: 20px; padding: 1px 4px; text-align: center; }
.gc-et { flex: 1 1 auto; min-width: 0; display: grid; gap: 1px; }
.gc-et b { font-size: 13.5px; color: var(--navy); line-height: 1.3; }
.gc-et span { font-size: 12px; color: var(--ink-soft); }
.gc-join { flex: none; border: 0; border-radius: 999px; background: var(--blue); color: #fff; font: inherit; font-size: 12.5px; font-weight: 700; padding: 6px 14px; }
.gc-join:disabled { background: #e5d8bb; color: #8f8466; cursor: not-allowed; }
.gc-hk { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.gc-hk li { display: grid; gap: 1px; }
.gc-hk b { font-size: 13.5px; color: var(--navy); }
.gc-hk span { font-size: 12.5px; color: var(--ink-soft); line-height: 1.4; }
.gc-toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 300; background: var(--navy); color: #fff;
  font-size: 13.5px; padding: 10px 18px; border-radius: 999px; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); max-width: 92vw; }
.gc-toast[hidden] { display: none; }
@media (max-width: 1180px) { .gc-app { grid-template-columns: 280px minmax(0, 1fr); } .gc-right { display: none; } }
@media (max-width: 800px) { .gc-app { grid-template-columns: minmax(0, 1fr); padding: 8px; } .gc-left { display: none; } }

/* a picture stands on its own: no bubble (and no blue frame) around it;
   a caption gets its own small bubble underneath */
.chatroom .msg-row .bubble.has-img,
.chatroom .msg-row.me .bubble.has-img { background: transparent; border: 0; box-shadow: none; padding: 0; }
.chatroom .msg-row .bubble.has-img .chimg { box-shadow: 0 1px 3px rgba(64, 48, 16, .18); border: 1px solid #e5d8bb; }
.chatroom .msg-row .bubble.has-img .bd { display: table; margin-top: 4px; padding: 7px 14px; border-radius: 18px;
  background: #fffdf8; border: 1px solid #e5d8bb; box-shadow: 0 1px 1.5px rgba(64, 48, 16, .12); }
.chatroom .msg-row.me .bubble.has-img .bd { margin-left: auto; background: var(--blue); border-color: var(--blue); color: #fff; }
.chatroom .msg-row .bubble.has-img .tm,
.chatroom .msg-row.me .bubble.has-img .tm { float: none; display: block; margin: 3px 4px 0; padding: 0; text-align: right; color: #9a8f77; }
.chatroom .msg-row .bubble.has-img .kebab { background: rgba(8, 24, 44, .45); color: #fff; opacity: 1; top: 6px; right: 6px; }

/* ---- several pictures sent together: one collage ---- */
.chatroom .msg-row .bubble.has-img .collage { display: grid; gap: 3px; width: min(340px, 62vw); border-radius: 16px; overflow: hidden;
  border: 1px solid #e5d8bb; box-shadow: 0 1px 3px rgba(64, 48, 16, .18); background: #efe5cf; }
.chatroom .msg-row.me .bubble.has-img .collage { margin-left: auto; }
.chatroom .collage.n2 { grid-template-columns: 1fr 1fr; grid-auto-rows: 170px; }
.chatroom .collage.n3 { grid-template-columns: 1.3fr 1fr; grid-template-rows: 125px 125px; }
.chatroom .collage.n3 .ct:first-child { grid-row: span 2; }
.chatroom .collage.n4 { grid-template-columns: 1fr 1fr; grid-auto-rows: 130px; }
.chatroom .collage .ct { position: relative; min-height: 0; min-width: 0; overflow: hidden; cursor: pointer; }
.chatroom .collage .ct.hide { display: none; }
.chatroom .msg-row .bubble.has-img .collage .chimg { display: block; width: 100%; height: 100%; max-width: none; max-height: none; min-height: 0;
  border: 0; border-radius: 0; box-shadow: none; object-fit: cover; }
.chatroom .collage .more { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(8, 24, 44, .55);
  color: #fff; font-size: 26px; font-weight: 800; pointer-events: none; }
.chatroom .msg-row .bubble.has-img .collage .kebab { top: 5px; right: 5px; opacity: .9; z-index: 2; }
.chatroom .msg-row .bubble.has-img .collage .ct:hover .kebab,
.chatroom .msg-row .bubble.has-img .collage .kebab:focus-visible,
.chatroom .msg-row .bubble.has-img .collage .kebab[aria-expanded="true"] { opacity: 1; background: rgba(8, 24, 44, .7); }

/* the tray of pictures waiting to be sent */
.chatroom .ch-stage-list { display: flex; gap: 6px; flex: 0 1 auto; min-width: 0; overflow-x: auto; padding: 2px; }
.chatroom .ch-st { position: relative; flex: none; }
.chatroom .ch-st img { width: 52px; height: 52px; object-fit: cover; border-radius: 9px; border: 1px solid #e5d8bb; display: block; }
.chatroom .ch-st button { position: absolute; top: -5px; right: -5px; width: 20px; height: 20px; border: 0; border-radius: 50%;
  background: var(--navy); color: #fff; font-size: 14px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.chatroom .ch-stage-t { flex: 1 1 auto; }

/* stepping through a set in the large view */
.chatroom .ch-light .lb-prev, .chatroom .ch-light .lb-next { top: 50%; right: auto; transform: translateY(-50%); width: 48px; height: 48px; font-size: 32px; line-height: 1; }
.chatroom .ch-light .lb-prev { left: 18px; }
.chatroom .ch-light .lb-next { left: auto; right: 18px; }
.chatroom .ch-light .lb-prev[hidden], .chatroom .ch-light .lb-next[hidden] { display: none; }
.chatroom .ch-light .lb-n { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 13.5px; font-weight: 650; }
.chatroom .ch-light img { cursor: default; }

/* rooms with something new */
.gc-rm { flex: none; align-self: stretch; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; padding-top: 4px; }
.gc-rm time { margin-top: 0; }
.gc-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--blue); display: block; }
.gc-room.unread .gc-rt b { font-weight: 800; }
.gc-room.unread .gc-rt span { color: var(--ink); font-weight: 650; }

/* =====================================================================
   The floating STEP GC button: bottom right of every page except STEP GC
   ===================================================================== */
.gc-fab { position: fixed; right: 28px; top: 50%; translate: 0 -50%; z-index: 250; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; color: #fff; text-decoration: none;
  background: #006eb9;   /* the blue of the STEP logo */
  /* no ring: depth from layered shadows outside the circle (close, mid, far) */
  box-shadow: 0 1px 2px rgba(0, 35, 75, .30), 0 4px 8px rgba(0, 50, 100, .22), 0 12px 24px rgba(0, 50, 100, .20);
  transition: transform .18s ease, box-shadow .18s ease; }
.gc-fab[hidden] { display: none; }
.gc-fab svg { width: 25px; height: 25px; }
/* the STEP mark as wide as the circle allows (its corners just clear the edge) */
.gc-fab .gc-fab-mark { width: 40px; height: auto; display: block; pointer-events: none; }
.gc-fab:hover { transform: translateY(-2px); background: #0063a7;
  box-shadow: 0 2px 3px rgba(0, 35, 75, .28), 0 8px 14px rgba(0, 50, 100, .24), 0 18px 34px rgba(0, 50, 100, .24); }
.gc-fab:focus-visible { outline: 3px solid var(--blue); outline-offset: 5px; }
.gc-fab-n { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px; box-sizing: border-box; border-radius: 999px;
  background: #c8373b; color: #fff; border: 2px solid #fff; font-size: 10px; font-weight: 800; line-height: 14px; text-align: center; }
.gc-fab-n[hidden] { display: none; }
.gc-fab-tip { position: absolute; right: calc(100% + 12px); top: 50%; transform: translateY(-50%); white-space: nowrap; pointer-events: none;
  background: #fff; color: #0b3c6b; font-size: 13.5px; font-weight: 700; letter-spacing: .01em; padding: 7px 14px; border-radius: 999px;
  /* the same outside-only, layered shadow as the button, so the two read as one piece */
  box-shadow: 0 1px 2px rgba(0, 35, 75, .18), 0 4px 10px rgba(0, 50, 100, .14), 0 10px 22px rgba(0, 50, 100, .12);
  opacity: 0; translate: 6px 0; transition: opacity .15s ease, translate .15s ease; }
.gc-fab:hover .gc-fab-tip, .gc-fab:focus-visible .gc-fab-tip { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) { .gc-fab-tip { translate: 0 0; transition: opacity .15s ease; } }
@media (max-width: 700px) { .gc-fab { right: 16px; width: 40px; height: 40px; } .gc-fab svg { width: 22px; height: 22px; } .gc-fab .gc-fab-mark { width: 35px; } .gc-fab-tip { display: none; } }
@media (prefers-reduced-motion: reduce) { .gc-fab { transition: none; } .gc-fab:hover { transform: none; } }

/* ---- The one "you cannot open this" popup ---- */
.acc-scrim { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(11, 35, 60, .55); animation: acc-in .18s ease-out; }
.acc-card { width: 100%; max-width: 360px; background: #fff; border-radius: 18px; padding: 26px 24px 20px;
  text-align: center; box-shadow: 0 24px 60px rgba(0, 0, 0, .35); }
.acc-lock { width: 54px; height: 54px; margin: 0 auto 14px; border-radius: 50%; background: #e4f0fa; color: #006eb9;
  display: grid; place-items: center; }
.acc-lock svg { width: 26px; height: 26px; }
.acc-card h3 { margin: 0 0 8px; font-size: 20px; line-height: 1.25; color: var(--navy); }
.acc-card p { margin: 0 0 18px; font-size: 13px; line-height: 1.5; color: #8a94a1; }
.acc-acts { display: flex; flex-direction: column; gap: 8px; }
.acc-btn { font: inherit; font-size: 14px; font-weight: 700; padding: 10px 16px; border-radius: 10px; cursor: pointer;
  background: #006eb9; color: #fff; border: 1px solid #006eb9; }
.acc-btn:hover { background: #005a9a; }
.acc-link { font: inherit; font-size: 14px; font-weight: 600; padding: 8px; background: none; border: 0; color: #6b7684; cursor: pointer; }
.acc-btn:focus-visible, .acc-link:focus-visible { outline: 3px solid #9ccbf4; outline-offset: 2px; }
@keyframes acc-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .acc-scrim { animation: none; } }

/* ---- Session replay: the player reads as clickable ---- */
.replay.rp-live .rp-player, .replay.rp-live .rp-player video, .replay.rp-live .rp-player iframe { cursor: pointer; }
.replay.rp-live .rp-player { transition: filter .18s ease; }
.replay.rp-live .rp-player:hover { filter: brightness(1.05); }

/* links inside an announcement */
.note .nb h4 a, .note .nb p a { color: var(--blue); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; overflow-wrap: anywhere; }
.note .nb h4 a:hover, .note .nb p a:hover { color: var(--navy); }

/* an announcement icon that is a picture (the Zoom logo) fills its tile */
.note .ic:has(.ic-img) { background: none; padding: 0; overflow: hidden; }
.note .ic .ic-img { width: 100%; height: 100%; border-radius: inherit; display: block; object-fit: cover; }

/* Capstone pitch deck viewer in full screen: the slide fills the monitor */
#deck-stage:fullscreen { max-width: none; width: calc(100 * var(--vw)); height: calc(100 * var(--vh));
  border-radius: 0; padding: 12px 16px; grid-template-rows: minmax(0, 1fr) auto; gap: 10px; background: #000; }
#deck-stage:fullscreen .screen { aspect-ratio: auto; height: 100%; border-radius: 0; background: #000; }
#deck-stage:fullscreen .screen img { background: #000 !important; }
#deck-stage:-webkit-full-screen { max-width: none; width: calc(100 * var(--vw)); height: calc(100 * var(--vh));
  border-radius: 0; padding: 12px 16px; grid-template-rows: minmax(0, 1fr) auto; gap: 10px; background: #000; }
#deck-stage:-webkit-full-screen .screen { aspect-ratio: auto; height: 100%; border-radius: 0; background: #000; }
/* the page is drawn at 80% on laptops; the full-screen viewer is drawn at true size */
@media (min-width: 1024px) and (hover: hover) {
  #deck-stage:fullscreen { zoom: 1.25; }
  #deck-stage:-webkit-full-screen { zoom: 1.25; }
}

/* pitch deck viewer: every slide fills its screen edge to edge */
.stage .screen .slide-fill { width: 100%; height: 100%; display: block; object-fit: cover; background: #fff; }   /* scaled up until it fills, never stretched */
.stage .screen .slide-wait { height: 100%; display: grid; place-items: center; color: #5a6470; font-size: 14px; background: #fff; }
/* full screen: the slide takes the whole monitor; the controls float over its foot
   and fade away while the mouse is still */
#deck-stage:fullscreen { position: relative; padding: 0; gap: 0; display: block; }
#deck-stage:fullscreen .screen { position: absolute; inset: 0; height: 100%; }
#deck-stage:fullscreen .bar { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 28px 20px;
  background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0)); transition: opacity .3s ease; }
#deck-stage:fullscreen.idle .bar { opacity: 0; }
#deck-stage:fullscreen.idle { cursor: none; }
#deck-stage:-webkit-full-screen { position: relative; padding: 0; gap: 0; display: block; }
#deck-stage:-webkit-full-screen .screen { position: absolute; inset: 0; height: 100%; }
#deck-stage:-webkit-full-screen .bar { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 28px 20px;
  background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0)); transition: opacity .3s ease; }
#deck-stage:-webkit-full-screen.idle .bar { opacity: 0; }

/* =====================================================================
   STEP Mail — the envelope in the nav, and the two-pane inbox
   ===================================================================== */
/* the envelope, after Trainers */
.site-header.light .nav a.nav-mail { position: relative; display: inline-grid; place-items: center; width: 36px; height: 36px;
  padding: 0; margin-left: 6px; border-radius: 50%; color: var(--navy); background: var(--blue-100); }
.site-header.light .nav a.nav-mail:hover { background: #d7e8f7; }
.site-header.light .nav a.nav-mail.active { background: #006eb9; color: #fff; }
.nav-mail-ic { width: 19px; height: 19px; }
.nav-mail-l { display: none; }
.nav-mail-n { position: absolute; top: -4px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: #c8373b; color: #fff; font: 700 11px/18px Archivo, system-ui, sans-serif; font-style: normal; text-align: center;
  border: 2px solid #fff; box-sizing: content-box; }
.nav-mail-n[hidden] { display: none; }
@media (max-width: 900px) {
  .site-header.light .nav a.nav-mail { width: auto; height: auto; display: flex; justify-content: flex-start; gap: 10px;
    padding: 10px 12px; margin: 0; border-radius: var(--r-sm); background: none; }
  .site-header.light .nav a.nav-mail.active { background: var(--blue-100); color: var(--navy); }
  .nav-mail-l { display: inline; }
  .nav-mail-n { position: static; border: 0; }
}

/* the page: one screen like STEP GC; only the two lists scroll */
body.on-mail { overflow: hidden; }
body.on-mail .site-footer { display: none; }
.ml-page { padding: 22px 0 34px; background: var(--bg); }
.ml-app { --mlb: #006eb9; display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
  height: calc(100 * var(--vh) - var(--ml-top, 128px) - 44px); min-height: 420px; background: var(--surface, #fff);
  border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: 0 1px 2px rgba(11, 60, 107, .04), 0 8px 28px rgba(11, 60, 107, .06); }

/* left: the list */
.ml-list { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); background: #fbfcfe; }
.ml-lh { padding: 18px 16px 10px; border-bottom: 1px solid var(--line-soft); }
.ml-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.ml-title h1 { margin: 0; font-size: 22px; line-height: 1.2; color: var(--navy); letter-spacing: -.01em; }
.ml-new { display: inline-flex; align-items: center; gap: 6px; border: 0; background: var(--mlb); color: #fff; font: inherit;
  font-size: 13.5px; font-weight: 700; padding: 8px 14px 8px 11px; border-radius: 999px; cursor: pointer; }
.ml-new svg { width: 16px; height: 16px; }
.ml-new:hover { background: #005d9d; }
.ml-new[hidden] { display: none; }
.ml-tabs { display: flex; gap: 4px; margin-bottom: 10px; }
.ml-tabs button { border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--ink-soft);
  padding: 6px 11px; border-radius: 999px; cursor: pointer; }
.ml-tabs button:hover { background: var(--line-soft); }
.ml-tabs button[aria-selected="true"] { background: var(--navy); color: #fff; }
.ml-search { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: #fff; border-radius: 10px; padding: 0 10px; }
.ml-search svg { width: 16px; height: 16px; color: var(--ink-soft); flex: none; }
.ml-search input { border: 0; outline: 0; background: none; font: inherit; font-size: 13.5px; padding: 8px 0; width: 100%; color: var(--ink); }
.ml-search:focus-within { border-color: var(--mlb); box-shadow: 0 0 0 3px rgba(0, 110, 185, .12); }
.ml-rows { flex: 1; overflow-y: auto; min-height: 0; padding: 6px 8px 10px; }
.ml-row { position: relative; display: flex; gap: 11px; width: 100%; text-align: left; border: 0; background: none; font: inherit;
  color: inherit; padding: 12px 10px 12px 12px; border-radius: 12px; cursor: pointer; margin-bottom: 2px; }
.ml-row:hover { background: #f0f4f9; }
.ml-row.sel { background: #e6f0fa; }
.ml-row:focus-visible { outline: 2px solid var(--mlb); outline-offset: -2px; }
.ml-row.unread::before { content: ""; position: absolute; left: 3px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px;
  border-radius: 50%; background: var(--mlb); }
.ml-av { flex: none; width: 36px; height: 36px; border-radius: 50%; background: #dde6ef; color: var(--navy); display: grid;
  place-items: center; font-weight: 700; font-size: 12.5px; overflow: hidden; }
.ml-av.team { background: var(--navy); }
.ml-av.team img { width: 70%; height: auto; }
.ml-av.sm { width: 32px; height: 32px; font-size: 11.5px; }
.ml-rm { min-width: 0; flex: 1; display: block; }
.ml-rt { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--ink-soft); }
.ml-rt b { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ml-rt time { flex: none; font-size: 12px; }
.ml-row.unread .ml-rt b { color: var(--ink); font-weight: 700; }
.ml-row.unread .ml-rt time { color: var(--mlb); font-weight: 700; }
.ml-rs { display: block; margin: 2px 0 1px; font-size: 14px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ml-row.unread .ml-rs { font-weight: 700; }
.ml-rp { display: block; font-size: 13px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ml-rf { display: flex; align-items: center; gap: 8px; margin-top: 7px; flex-wrap: wrap; }
.ml-to { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; border-radius: 999px; padding: 2px 9px;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ml-to svg { width: 12px; height: 12px; flex: none; }
.ml-to.grp { background: var(--gold-100); color: #7a5a12; }
.ml-to.one { background: var(--blue-100); color: var(--navy); }
.ml-ri { display: inline-flex; color: var(--ink-soft); }
.ml-ri svg { width: 14px; height: 14px; }
.ml-rn { font-size: 12px; color: var(--ink-soft); }
.ml-empty { padding: 34px 18px; text-align: center; color: var(--ink-soft); font-size: 14px; line-height: 1.5; }
.ml-spin { display: block; width: 20px; height: 20px; margin: 0 auto 10px; border-radius: 50%; border: 2px solid var(--line);
  border-top-color: var(--mlb); animation: mlspin .8s linear infinite; }
@keyframes mlspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ml-spin { animation: none; } }

/* right: the open message */
.ml-read { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #fff; }
.ml-none { margin: auto; text-align: center; color: var(--ink-soft); font-size: 14px; }
.ml-none svg { width: 54px; height: 54px; color: #b9c7d6; margin-bottom: 6px; }
.ml-none p { margin: 0; }
.ml-th { padding: 20px 28px 14px; border-bottom: 1px solid var(--line-soft); }
.ml-th h2 { margin: 0 0 10px; font-size: 21px; line-height: 1.3; color: var(--navy); }
.ml-back { display: none; align-items: center; gap: 4px; border: 0; background: none; font: inherit; font-size: 13.5px; font-weight: 600;
  color: var(--mlb); padding: 0; margin-bottom: 10px; cursor: pointer; }
.ml-back svg { width: 16px; height: 16px; }
.ml-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.ml-seen { border: 1px solid var(--line); background: #fff; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--navy);
  padding: 3px 10px; border-radius: 999px; cursor: pointer; }
.ml-seen:hover, .ml-seen[aria-expanded="true"] { border-color: var(--mlb); color: var(--mlb); }
.ml-link { border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--mlb); padding: 0; cursor: pointer; }
.ml-link:hover { text-decoration: underline; }
.ml-del { color: var(--ink-soft); margin-left: auto; }
.ml-del:hover { color: #a63d40; }
.ml-del-ask { margin-left: auto; display: inline-flex; gap: 10px; align-items: center; color: var(--ink); font-weight: 600; }
.ml-del-yes { border: 0; background: #a63d40; color: #fff; font: inherit; font-size: 12.5px; font-weight: 700; padding: 4px 11px; border-radius: 8px; cursor: pointer; }
.ml-seenlist { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; font-size: 12.5px; }
.ml-seenlist span { display: inline-flex; gap: 6px; align-items: baseline; padding: 4px 10px; border-radius: 8px; background: var(--bg); }
.ml-seenlist span.y { background: #e4f2ea; }
.ml-seenlist em { font-style: normal; color: var(--ink-soft); font-size: 11.5px; }
.ml-msgs { flex: 1; overflow-y: auto; min-height: 0; padding: 18px 28px; }
.ml-msg { max-width: 720px; padding: 16px 0 18px; border-bottom: 1px solid var(--line-soft); }
.ml-msg:last-child { border-bottom: 0; }
.ml-msg.person:not(.root) { margin-left: 22px; padding-left: 16px; border-left: 3px solid var(--line); border-bottom: 0; margin-top: 6px; padding-top: 8px; padding-bottom: 10px; }
.ml-msg.team:not(.root) { margin-left: 22px; padding-left: 16px; border-left: 3px solid #b9d6ee; border-bottom: 0; margin-top: 6px; padding-top: 8px; padding-bottom: 10px; }
.ml-msg.target { border-left-color: var(--mlb); }
.ml-mh { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.ml-mw { min-width: 0; flex: 1; }
.ml-mw b { display: block; font-size: 14px; color: var(--ink); }
.ml-mw span { display: block; font-size: 12.5px; color: var(--ink-soft); }
.ml-mh time { flex: none; font-size: 12px; color: var(--ink-soft); align-self: flex-start; margin-top: 2px; }
.ml-mb { font-size: 14.5px; line-height: 1.65; color: var(--ink); overflow-wrap: anywhere; }
.ml-mb a { color: var(--mlb); text-decoration: underline; text-underline-offset: 2px; }
.ml-atts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ml-att { display: inline-flex; align-items: center; gap: 9px; border: 1px solid var(--line); background: #fff; border-radius: 10px;
  padding: 8px 12px; font: inherit; cursor: pointer; text-align: left; max-width: 280px; }
.ml-att:hover { border-color: var(--mlb); }
.ml-att svg { width: 20px; height: 20px; color: var(--mlb); flex: none; }
.ml-att span { min-width: 0; }
.ml-att b { display: block; font-size: 13px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ml-att em { font-style: normal; font-size: 11.5px; color: var(--ink-soft); }
.ml-rto { margin-top: 10px; font-size: 12.5px; }
.ml-reply { border-top: 1px solid var(--line-soft); padding: 12px 28px 16px; background: #fff; }
.ml-rhint { margin: 0 0 8px; font-size: 12.5px; color: var(--ink-soft); }
.ml-rhint b { color: var(--ink); }
.ml-rbox { display: flex; align-items: flex-end; gap: 10px; border: 1px solid var(--line); border-radius: 14px; padding: 8px 8px 8px 14px; }
.ml-rbox:focus-within { border-color: var(--mlb); box-shadow: 0 0 0 3px rgba(0, 110, 185, .12); }
.ml-rbox textarea { flex: 1; border: 0; outline: 0; resize: none; font: inherit; font-size: 14px; line-height: 1.5; padding: 6px 0;
  min-height: 24px; max-height: 180px; color: var(--ink); background: none; }
.ml-btn { flex: none; border: 0; background: var(--mlb, #006eb9); color: #fff; font: inherit; font-size: 13.5px; font-weight: 700;
  padding: 8px 18px; border-radius: 10px; cursor: pointer; }
.ml-btn:hover { background: #005d9d; }
.ml-btn:disabled { opacity: .6; cursor: default; }
.ml-rerr, .mlc-err { margin: 8px 0 0; font-size: 13px; color: #a63d40; }
.ml-rerr[hidden], .mlc-err[hidden] { display: none; }

/* writing a new message */
.ml-compose { position: fixed; right: 24px; bottom: 0; z-index: 250; width: min(540px, calc(100vw - 20px)); background: #fff;
  border: 1px solid var(--line); border-radius: 16px 16px 0 0; box-shadow: 0 -12px 44px rgba(11, 60, 107, .2); display: flex; flex-direction: column; }
.ml-compose[hidden] { display: none; }
.mlc-head { display: flex; justify-content: space-between; align-items: center; background: var(--navy); color: #fff;
  padding: 11px 16px; border-radius: 16px 16px 0 0; font-size: 14.5px; }
.mlc-x { border: 0; background: none; color: #fff; font-size: 22px; line-height: 1; cursor: pointer; padding: 0 2px; opacity: .85; }
.mlc-x:hover { opacity: 1; }
.mlc-to { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 9px 16px; border-bottom: 1px solid var(--line-soft); }
.mlc-lab { font-size: 13px; color: var(--ink-soft); margin-right: 4px; }
.mlc-chips { display: contents; }
.mlc-chip { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; padding: 3px 4px 3px 10px; font-size: 12.5px; font-weight: 600; }
.mlc-chip.grp { background: var(--gold-100); color: #7a5a12; }
.mlc-chip.one { background: var(--blue-100); color: var(--navy); }
.mlc-chip button { border: 0; background: none; color: inherit; font-size: 15px; line-height: 1; cursor: pointer; padding: 0 5px; opacity: .7; }
.mlc-chip button:hover { opacity: 1; }
.mlc-to input { flex: 1; min-width: 150px; border: 0; outline: 0; font: inherit; font-size: 13.5px; padding: 4px 0; color: var(--ink); }
.mlc-sug { position: absolute; left: 10px; right: 10px; top: 100%; z-index: 5; max-height: 290px; overflow-y: auto; background: #fff;
  border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 34px rgba(11, 60, 107, .16); padding: 4px; }
.mlc-sug[hidden] { display: none; }
.mlc-sg { font-size: 11.5px; font-weight: 700; color: var(--ink-soft); padding: 8px 10px 3px; }
.mlc-so { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; font-size: 13.5px; cursor: pointer; }
.mlc-so.hi { background: var(--blue-100); }
.mlc-so em { display: block; font-style: normal; font-size: 11.5px; color: var(--ink-soft); }
.mlc-so small { flex: none; font-size: 12px; color: var(--ink-soft); }
.mlc-subj { display: flex; align-items: center; gap: 6px; padding: 9px 16px; border-bottom: 1px solid var(--line-soft); }
.mlc-subj input { flex: 1; border: 0; outline: 0; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink); }
.ml-compose textarea { border: 0; outline: 0; resize: vertical; font: inherit; font-size: 14px; line-height: 1.55; padding: 12px 16px;
  height: min(240px, calc(36 * var(--vh))); min-height: 120px; color: var(--ink); }
.mlc-files { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px; }
.mlc-files:not(:empty) { padding-bottom: 10px; }
.mlc-file { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 8px; padding: 4px 4px 4px 8px; font-size: 12.5px; }
.mlc-file svg { width: 15px; height: 15px; color: var(--mlb, #006eb9); }
.mlc-file em { font-style: normal; color: var(--ink-soft); }
.mlc-file button { border: 0; background: none; cursor: pointer; font-size: 15px; color: var(--ink-soft); padding: 0 4px; }
.mlc-foot { display: flex; align-items: center; gap: 12px; padding: 10px 16px 12px; border-top: 1px solid var(--line-soft); }
.mlc-att { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink-soft); cursor: pointer; }
.mlc-att:hover { color: #006eb9; }
.mlc-att svg { width: 17px; height: 17px; }
.mlc-count { margin-left: auto; font-size: 12.5px; color: var(--ink-soft); }
.ml-compose .mlc-err { padding: 0 16px 12px; margin: 0; }
.ml-toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 300; background: var(--navy); color: #fff;
  font-size: 13.5px; padding: 10px 18px; border-radius: 999px; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); max-width: 92vw; }
.ml-toast[hidden] { display: none; }

/* phones: the list, then the message */
@media (max-width: 760px) {
  .ml-page { padding: 10px 0 20px; }
  .ml-app { grid-template-columns: minmax(0, 1fr); height: calc(100 * var(--vh) - var(--ml-top, 128px) - 30px); min-height: 380px; border-radius: 14px; }
  .ml-app .ml-read { display: none; }
  .ml-app.open .ml-list { display: none; }
  .ml-app.open .ml-read { display: flex; }
  .ml-back { display: inline-flex; }
  .ml-th, .ml-msgs, .ml-reply { padding-left: 16px; padding-right: 16px; }
  .ml-msg.person:not(.root), .ml-msg.team:not(.root) { margin-left: 4px; }
  .ml-compose { right: 10px; }
}

/* =====================================================================
   STEP Calendar — the button in the nav, the quick look, the full page
   ===================================================================== */
.k-learning    { --kc: #006eb9; }
.k-feedback    { --kc: #b5821c; }
.k-mentoring   { --kc: #6b4fa0; }
.k-onsite      { --kc: #0b3c6b; }
.k-deadline    { --kc: #c8373b; }
.k-orientation { --kc: #2e7d5b; }
.k-holiday     { --kc: #7a8894; }
.k-break       { --kc: #cfd6de; }

/* the calendar button, after Trainers */
.site-header.light .nav .nav-cal { position: relative; display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0;
  margin-left: 6px; border: 0; border-radius: 50%; color: var(--navy); background: var(--blue-100); cursor: pointer; font: inherit; }
.site-header.light .nav .nav-cal:hover, .site-header.light .nav .nav-cal[aria-expanded="true"] { background: #006eb9; color: #fff; }
.site-header.light .nav .nav-cal.active { background: #006eb9; color: #fff; }
.nav-cal-ic { width: 19px; height: 19px; }
.nav-cal-l { display: none; }
.nav-cal-n { position: absolute; top: -4px; right: -6px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  background: #c8373b; color: #fff; font: 700 10px/16px Archivo, system-ui, sans-serif; font-style: normal; text-align: center;
  border: 2px solid #fff; box-sizing: content-box; }
.nav-cal-n[hidden] { display: none; }
@media (max-width: 900px) {
  .site-header.light .nav .nav-cal { width: auto; height: auto; display: flex; justify-content: flex-start; gap: 10px; padding: 10px 12px;
    margin: 0; border-radius: var(--r-sm); background: none; font-size: 15px; font-weight: 600; color: var(--ink); }
  .nav-cal-l { display: inline; }
  .nav-cal-n { position: static; border: 0; }
}

/* the quick look */
.cq-pop { position: absolute; top: calc(100% + 8px); right: 16px; z-index: 60; width: 372px; max-width: calc(100vw - 16px);
  background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 22px 50px rgba(11, 60, 107, .22); }
.cq-pop::before { content: ""; position: absolute; right: 18px; top: -7px; width: 12px; height: 12px; background: #fff;
  border-left: 1px solid var(--line); border-top: 1px solid var(--line); transform: rotate(45deg); }
.cq-hd { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 6px; }
.cq-hd b { font-size: 15px; color: var(--navy); }
.cq-hd span { display: flex; gap: 6px; }
.cq-nb { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--line); background: #fff; border-radius: 8px; color: var(--navy); cursor: pointer; padding: 0; }
.cq-nb svg { width: 15px; height: 15px; }
.cq-mini { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; padding: 0 12px 8px; text-align: center; }
.cq-h { font-size: 11px; font-weight: 700; color: var(--ink-soft); padding: 4px 0; }
.cq-d { position: relative; height: 34px; border: 0; background: none; border-radius: 9px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink); cursor: pointer; padding: 0 0 6px; }
.cq-d:hover { background: var(--blue-100); }
.cq-d.o { color: #c3ccd5; }
.cq-d.t { background: #006eb9; color: #fff; }
.cq-d.sel { box-shadow: inset 0 0 0 2px #006eb9; }
.cq-d.brk { background: repeating-linear-gradient(135deg, #f4f6f8 0 4px, #eaeef2 4px 8px); }
/* Sundays in red: the S heading and every Sunday date (7th in each row) */
.cq-mini > :nth-child(7n):not(.t) { color: #c8373b; }
.cq-mini > .cq-d.o:nth-child(7n) { color: #eab0b2; }
.cq-dots { position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%); display: flex; gap: 3px; }
.cq-dots s { width: 7px; height: 7px; border-radius: 50%; background: var(--kc); }
.cq-d.t .cq-dots s { box-shadow: 0 0 0 1px #fff; }
.cq-list { border-top: 1px solid var(--line-soft); padding: 4px 12px 8px; max-height: min(260px, calc(34 * var(--vh))); overflow-y: auto; }
.cq-day { font-size: 12px; font-weight: 700; color: var(--ink-soft); margin: 10px 4px 6px; display: flex; justify-content: space-between; gap: 8px; }
.cq-lh { color: var(--navy); font-size: 12.5px; }
.cq-clear { border: 0; background: none; color: #006eb9; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; padding: 0; }
.cq-i { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 11px; border: 1px solid var(--line-soft); background: #fff;
  margin-bottom: 6px; color: inherit; text-decoration: none; }
.cq-i:hover { border-color: var(--kc); text-decoration: none; }
.cq-bar { align-self: stretch; width: 4px; border-radius: 2px; background: var(--kc); flex: none; }
.cq-tx { min-width: 0; flex: 1; }
.cq-tx em { display: block; font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--kc); }
.cq-tx b { display: block; font-size: 13.5px; line-height: 1.3; color: var(--ink); }
.cq-tx small { display: block; font-size: 12px; color: var(--ink-soft); margin-top: 1px; }
.cq-join { flex: none; display: inline-flex; align-items: center; gap: 5px; background: #006eb9; color: #fff; font-size: 12px; font-weight: 700;
  padding: 5px 9px; border-radius: 8px; cursor: pointer; }
.cq-join:hover { background: #005d9d; }
.cq-z { width: 14px; height: 14px; border-radius: 3px; background: #fff; }
.cq-none { font-size: 13px; color: var(--ink-soft); padding: 8px 4px; margin: 0; }
.cq-ft { display: flex; justify-content: space-between; align-items: center; gap: 10px; border-top: 1px solid var(--line-soft); padding: 10px 16px 12px; }
.cq-dl { border: 0; background: none; padding: 0; font: inherit; font-size: 13px; font-weight: 600; color: var(--ink-soft); cursor: pointer; }
.cq-dl:hover { color: #006eb9; }
.cq-full { background: #006eb9; color: #fff; font-size: 13px; font-weight: 700; padding: 8px 14px; border-radius: 10px; }
.cq-full:hover { background: #005d9d; color: #fff; text-decoration: none; }
@media (max-width: 900px) { .cq-pop { left: 8px; right: 8px !important; width: auto; } .cq-pop::before { display: none; } }

/* the full page: one screen like STEP GC; the month and the side list fit it */
body.on-cal { overflow: hidden; }
body.on-cal .site-footer { display: none; }
.cl-page { padding: 18px 0 22px; background: var(--bg); }
.cl-app { display: grid; grid-template-columns: minmax(0, 1fr) 350px; height: calc(100 * var(--vh) - var(--cl-top, 128px) - 40px); min-height: 460px;
  background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: 0 1px 2px rgba(11, 60, 107, .04), 0 8px 28px rgba(11, 60, 107, .06); }
.cl-mon { display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 16px 18px 18px; }
.cl-mh { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.cl-mh h1 { margin: 0; font-size: 22px; line-height: 1.2; color: var(--navy); min-width: 190px; text-align: center; white-space: nowrap; }
.cl-nb { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--line); background: #fff; border-radius: 9px; color: var(--navy); cursor: pointer; padding: 0; }
.cl-nb svg { width: 16px; height: 16px; }
.cl-nb:hover, .cl-today:hover { border-color: #006eb9; color: #006eb9; }
.cl-today { border: 1px solid var(--line); background: #fff; border-radius: 9px; padding: 6px 12px; font: inherit; font-size: 13px; font-weight: 600; color: var(--navy); cursor: pointer; }
.cl-who { margin-left: auto; }
.cl-pick { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-soft); white-space: nowrap; }
.cl-pick select { border: 1px solid var(--line); border-radius: 9px; padding: 6px 10px; font: inherit; font-size: 13px; font-weight: 600; color: var(--navy); background: #fff; }
.cl-myteam { font-size: 12.5px; font-weight: 700; color: #6b4fa0; background: #f0ebf8; border-radius: 999px; padding: 5px 12px; }
.cl-leg { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--ink-soft); margin-bottom: 8px; }
.cl-leg span { display: inline-flex; align-items: center; gap: 6px; }
.cl-leg i { width: 9px; height: 9px; border-radius: 50%; background: var(--kc); }
.cl-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: auto repeat(6, minmax(0, 1fr));
  border-top: 1px solid var(--line-soft); border-left: 1px solid var(--line-soft); }
.cl-dow { font-size: 11.5px; font-weight: 700; color: var(--ink-soft); padding: 6px 8px; border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); background: #fbfcfe; }
.cl-cell { position: relative; min-height: 0; overflow: hidden; padding: 4px 5px; border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); cursor: pointer; }
.cl-cell:hover { background: #f7fafd; }
.cl-cell.out { background: #fafbfc; }
.cl-cell.out .cl-n { color: #b6c0ca; }
.cl-cell.brk { background: repeating-linear-gradient(135deg, #f4f6f8 0 6px, #eef1f4 6px 12px); }
.cl-cell.sel { box-shadow: inset 0 0 0 2px #006eb9; }
.cl-n { display: inline-grid; place-items: center; min-width: 22px; height: 22px; border-radius: 11px; font-size: 12px; font-weight: 600; color: var(--ink-soft); }
.cl-cell.now .cl-n { background: #006eb9; color: #fff; }
/* big calendar: Sundays in red (the Sun heading and each Sunday's date) */
.cl-grid > .cl-dow:nth-child(7n), .cl-grid > .cl-cell:nth-child(7n):not(.now) .cl-n { color: #c8373b; }
.cl-grid > .cl-cell.out:nth-child(7n) .cl-n { color: #eab0b2; }
.cl-wk { position: absolute; top: 6px; right: 6px; font-size: 10.5px; font-weight: 700; color: #9aa6b2; }
.cl-brk { display: block; font-size: 11px; color: var(--ink-soft); margin-top: 2px; white-space: nowrap; }
.cl-ev, .cl-more { display: flex; align-items: center; gap: 4px; width: 100%; margin-top: 3px; padding: 3px 6px; border: 0; border-left: 3px solid var(--kc);
  border-radius: 6px; background: color-mix(in srgb, var(--kc) 13%, #fff); color: color-mix(in srgb, var(--kc) 82%, #000);
  font: inherit; font-size: 11.5px; font-weight: 600; line-height: 1.25; text-align: left; cursor: pointer; white-space: nowrap; overflow: hidden; }
.cl-ev span { overflow: hidden; text-overflow: ellipsis; }
.cl-ev.sel { box-shadow: 0 0 0 2px var(--kc); }
.cl-ev .cl-z { width: 12px; height: 12px; }
.cl-more { --kc: #7a8894; }
.cl-z { width: 14px; height: 14px; border-radius: 3px; flex: none; background: #fff; }

.cl-side { display: flex; flex-direction: column; min-height: 0; border-left: 1px solid var(--line); background: #fbfcfe; }
.cl-sb { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; }
.cl-sf { padding: 10px 16px 14px; display: grid; gap: 8px; border-top: 1px solid var(--line-soft); }
.cl-sh h2 { margin: 0; font-size: 16px; color: var(--navy); }
.cl-sh p { margin: 3px 0 12px; font-size: 12.5px; color: var(--ink-soft); line-height: 1.45; }
.cl-warn { font-size: 12.5px; color: #8a5a00; background: #fdf1dd; border-radius: 10px; padding: 8px 10px; }
.cl-next { background: var(--navy); color: #fff; border-radius: 14px; padding: 14px 16px; margin-bottom: 6px; }
.cl-next small { display: block; font-size: 12px; color: #b9cfe6; }
.cl-next b { display: block; font-size: 16px; line-height: 1.3; margin: 4px 0 2px; }
.cl-next span { display: block; font-size: 12.5px; color: #dbe7f3; }
.cl-next .cl-link { color: #b9cfe6; margin-left: 12px; }
.cl-join { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; background: #fff; color: var(--navy); border-radius: 9px; padding: 7px 12px; font-size: 13px; font-weight: 700; }
.cl-join:hover { text-decoration: none; background: #eef5fc; }
.cl-join.blue { background: #006eb9; color: #fff; margin-top: 0; }
.cl-join.blue:hover { background: #005d9d; }
.cl-link { border: 0; background: none; padding: 0; font: inherit; font-size: 12.5px; font-weight: 700; color: #006eb9; cursor: pointer; }
.cl-day { font-size: 12px; font-weight: 700; color: var(--ink-soft); margin: 14px 2px 6px; }
.cl-it { display: flex; gap: 10px; width: 100%; text-align: left; padding: 10px; margin-bottom: 6px; border: 1px solid var(--line-soft); border-radius: 12px;
  background: #fff; font: inherit; color: inherit; cursor: pointer; }
.cl-it:hover { border-color: var(--kc); }
.cl-bar { width: 4px; border-radius: 2px; background: var(--kc); flex: none; }
.cl-tx { min-width: 0; }
.cl-tx em { display: block; font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--kc); }
.cl-tx b { display: block; font-size: 13.5px; line-height: 1.3; }
.cl-tx small { display: block; font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
.cl-ready { display: inline-flex; align-items: center; gap: 5px; margin-top: 5px; font-size: 11.5px; font-weight: 700; color: #006eb9; }
.cl-ready .cl-z { width: 12px; height: 12px; }
.cl-none { font-size: 13px; color: var(--ink-soft); margin: 4px 0; }
.cl-back { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; padding: 0; margin-bottom: 10px; font: inherit; font-size: 13px; font-weight: 700; color: #006eb9; cursor: pointer; }
.cl-back svg { width: 15px; height: 15px; }
.cl-det { background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.cl-top { border-top: 5px solid var(--kc); padding: 14px 16px; }
.cl-top em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--kc); }
.cl-top h2 { margin: 4px 0 10px; font-size: 17px; line-height: 1.3; color: var(--ink); }
.cl-row { display: flex; gap: 10px; margin: 7px 0; font-size: 13px; line-height: 1.45; }
.cl-row svg { width: 16px; height: 16px; flex: none; color: var(--ink-soft); margin-top: 1px; }
.cl-full { margin: 10px 0 0; font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; }
.cl-zbox { border-top: 1px solid var(--line-soft); padding: 14px 16px; background: #fbfcfe; }
.cl-lab { font-size: 12px; font-weight: 700; color: var(--ink-soft); margin-bottom: 8px; }
.cl-url { display: flex; gap: 8px; align-items: baseline; margin-top: 8px; font-size: 12.5px; color: var(--ink-soft); }
.cl-url span { word-break: break-all; }
.cl-edit { border-top: 1px dashed var(--line); padding: 14px 16px; background: #fffdf6; }
.cl-edit.new { border: 1px solid var(--line); border-radius: 14px; }
.cl-edit .cl-lab { color: #7a5a12; }
.cl-edit input[type=url], .cl-edit input[type=text], .cl-edit input[type=date], .cl-edit input[type=time], .cl-edit select {
  width: 100%; border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; font: inherit; font-size: 13px; background: #fff; color: var(--ink); margin-top: 3px; }
.cl-edit input:focus, .cl-edit select:focus { outline: 0; border-color: #006eb9; box-shadow: 0 0 0 3px rgba(0, 110, 185, .12); }
.cl-fl { display: block; font-size: 12px; color: var(--ink-soft); margin-bottom: 9px; }
.cl-f3 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 10px; }
.cl-f3 > .cl-fl:first-child { grid-column: 1 / -1; }
.cl-edit input, .cl-edit select { min-width: 0; max-width: 100%; box-sizing: border-box; }
.cl-ck { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: var(--ink); margin: 6px 0 4px; }
.cl-ck input { margin-top: 2px; }
.cl-acts { display: flex; gap: 8px; margin-top: 10px; }
.cl-btn { border: 0; background: #006eb9; color: #fff; font: inherit; font-size: 13px; font-weight: 700; border-radius: 9px; padding: 8px 14px; cursor: pointer; }
.cl-btn:hover { background: #005d9d; }
.cl-btn.sec { background: #fff; color: #006eb9; box-shadow: inset 0 0 0 1px #006eb9; }
.cl-btn.danger { background: none; color: #a63d40; margin-left: auto; padding: 8px 4px; }
.cl-btn:disabled { opacity: .6; cursor: default; }
.cl-err { margin: 8px 0 0; font-size: 12.5px; color: #a63d40; }
.cl-err[hidden] { display: none; }
.cl-add { border: 1px dashed #6b4fa0; background: #fff; color: #6b4fa0; font: inherit; font-size: 13px; font-weight: 700; border-radius: 10px; padding: 9px; cursor: pointer; }
.cl-add:hover { background: #f6f2fb; }
.cl-dl { border: 1px solid #006eb9; background: #fff; color: #006eb9; font: inherit; font-size: 13px; font-weight: 700; border-radius: 10px; padding: 9px; cursor: pointer; }
.cl-dl:hover { background: #eef5fc; }
.cl-toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 300; background: var(--navy); color: #fff;
  font-size: 13.5px; padding: 10px 18px; border-radius: 999px; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); max-width: 92vw; }
.cl-toast[hidden] { display: none; }
@media (max-width: 900px) {
  body.on-cal { overflow: auto; }
  .cl-app { grid-template-columns: minmax(0, 1fr); height: auto; }
  .cl-mon { height: max(440px, calc(62 * var(--vh))); padding: 12px; }
  .cl-side { border-left: 0; border-top: 1px solid var(--line); }
  .cl-sb { max-height: none; }
  .cl-mh h1 { min-width: 0; font-size: 19px; }
  .cl-who { margin-left: 0; width: 100%; }
  .cl-ev span, .cl-ev .cl-z, .cl-wk, .cl-brk { display: none; }
  .cl-ev { height: 6px; padding: 0; border-left: 0; background: var(--kc); }
  .cl-more { font-size: 10px; padding: 1px 3px; border-left: 0; }
}

/* the link mark for on-site days (they carry a plain link, not Zoom) */
.cq-lk, .cl-lk { background: none; color: currentColor; border-radius: 0; }
.cl-ev .cl-lk { color: var(--kc); }

/* My Team's Work: the deck's first slide, shown whole (scaled to fit, never stretched) */
.od-prev { position: relative; }
.od-prev .od-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; padding: 8px; box-sizing: border-box; }