/* ============================================================================
   TDC Steptember Challenge — scoreboard styles

   Design language: chunky pill-rounded progress lanes with the label and figure
   set inside the bar, oversized bold figures, circular avatars and icon
   buttons, saturated feature panels, and generous corner radii throughout.

   Team identity colours are the validated categorical trio (blue / orange /
   aqua). Purple and amber appear as chrome only — they never encode a team.
   ========================================================================= */

:root {
  color-scheme: light;

  --surface: #ffffff;
  --plane: #f3f2ee;
  --sunk: #ebeae4;

  --ink: #101014;
  --ink-secondary: #55545f;
  --ink-muted: #77757f;

  --hairline: #e7e6e0;
  --hairline-strong: #d3d2ca;

  /* Solid team colours — dots, avatars, buttons, borders. */
  --team-1: #2a78d6;
  --team-2: #eb6834;
  --team-3: #1baf7a;

  /* Lane fills. Lighter steps of the same hues so the label can sit on top at
     >= 6:1. Validated as a categorical set: CVD dE 12.9, normal-vision 16.4. */
  --lane-1: #6aa1e2;
  --lane-2: #eb6834;
  --lane-3: #5fc7a2;

  --lane-track: #e8e7e1;
  --lane-ink-track: #101014;
  --lane-ink-fill: #101014;

  /* Chrome accents. Never used to identify a team. */
  --brand: #6a55e0;
  --brand-deep: #5b46d6;
  --amber: #f7b955;

  --gold: #a97913;
  --good: #0a8f0a;
  /* The tooltip inverts against the page, so its accents invert too. A fall
     also carries a sign and a figure, so colour is never the only teller. */
  --tip-accent: #6ee7a8;
  --tip-down: #fca5a5;

  --r-card: 28px;
  --r-mid: 20px;
  --r-pill: 999px;

  --shadow: 0 2px 4px rgba(16, 16, 20, 0.04), 0 18px 40px -24px rgba(16, 16, 20, 0.28);
  --shadow-lift: 0 8px 16px -8px rgba(16, 16, 20, 0.18), 0 32px 64px -32px rgba(16, 16, 20, 0.4);

  --page-max: 1200px;
}

/* The dark palette's values, held once so a colour change is a one-line edit.
   They are switched on in two places below: the OS preference, and an explicit
   choice from the theme toggle — which has to win in both directions. */
:root {
  --d-surface: #1c1c1b;
  --d-plane: #0c0c0c;
  --d-sunk: #262625;

  --d-ink: #ffffff;
  --d-ink-secondary: #c6c5bc;
  --d-ink-muted: #96948b;

  --d-hairline: #2b2b29;
  --d-hairline-strong: #3a3a37;

  --d-team-1: #3987e5;
  --d-team-2: #eb6834;
  --d-team-3: #1fc78b;

  /* Fills stay light in dark mode and keep dark ink, the way the reference
     dark screen does. Deliberate: legibility here is governed by the >= 6:1
     ink-on-fill contrast, not by the mid-tone band for marks on a surface.

     The track stays light for the same reason — the reference dark screen puts
     white bars on its panel. A dark track would need light ink while the fill
     needs dark ink, and a label crossing the fill's edge would then render
     half in each. Keeping both backgrounds light means one ink works across
     the whole lane. */
  --d-lane-track: #dcdbd4;

  --d-brand: #7b68ee;
  --d-brand-deep: #6a55e0;

  --d-gold: #e0a32c;
  --d-good: #35c635;
  --d-tip-accent: #0a7d3f;
  --d-tip-down: #a31111;

  --d-shadow: 0 2px 4px rgba(0, 0, 0, 0.4), 0 18px 40px -24px rgba(0, 0, 0, 0.7);
  --d-shadow-lift: 0 8px 16px -8px rgba(0, 0, 0, 0.5), 0 32px 64px -32px rgba(0, 0, 0, 0.8);
}

@media (prefers-color-scheme: dark) {
  /* OS is dark and the viewer hasn't explicitly chosen light. */
  :root:not([data-theme='light']) {
    color-scheme: dark;

    --surface: var(--d-surface);
    --plane: var(--d-plane);
    --sunk: var(--d-sunk);
    --ink: var(--d-ink);
    --ink-secondary: var(--d-ink-secondary);
    --ink-muted: var(--d-ink-muted);
    --hairline: var(--d-hairline);
    --hairline-strong: var(--d-hairline-strong);
    --team-1: var(--d-team-1);
    --team-2: var(--d-team-2);
    --team-3: var(--d-team-3);
    --lane-track: var(--d-lane-track);
    --brand: var(--d-brand);
    --brand-deep: var(--d-brand-deep);
    --gold: var(--d-gold);
    --good: var(--d-good);
    --tip-accent: var(--d-tip-accent);
    --tip-down: var(--d-tip-down);
    --shadow: var(--d-shadow);
    --shadow-lift: var(--d-shadow-lift);
  }
}

/* The viewer explicitly chose dark, whatever the OS says. */
:root[data-theme='dark'] {
  color-scheme: dark;

  --surface: var(--d-surface);
  --plane: var(--d-plane);
  --sunk: var(--d-sunk);
  --ink: var(--d-ink);
  --ink-secondary: var(--d-ink-secondary);
  --ink-muted: var(--d-ink-muted);
  --hairline: var(--d-hairline);
  --hairline-strong: var(--d-hairline-strong);
  --team-1: var(--d-team-1);
  --team-2: var(--d-team-2);
  --team-3: var(--d-team-3);
  --lane-track: var(--d-lane-track);
  --brand: var(--d-brand);
  --brand-deep: var(--d-brand-deep);
  --gold: var(--d-gold);
  --good: var(--d-good);
  --tip-accent: var(--d-tip-accent);
  --tip-down: var(--d-tip-down);
  --shadow: var(--d-shadow);
  --shadow-lift: var(--d-shadow-lift);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--plane);
  color: var(--ink);
  font: 400 16px/1.5 system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 800;
}

a {
  color: inherit;
}

/*
 * The browser's own `[hidden] { display: none }` is the weakest rule there is,
 * so any element given a `display` here would keep showing while hidden. The
 * views, the error banner and the chart tooltips are all toggled by that
 * attribute, hence stating it once, forcefully, rather than per component.
 */
[hidden] {
  display: none !important;
}

.wrap {
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 36px);
}

.section {
  padding-block: clamp(28px, 4.5vw, 52px);
}

/* Heading and its optional link share the top row; the blurb sits beneath. */
.section-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 4px 20px;
  margin-bottom: 22px;
}

.section-head h2 {
  font-size: clamp(24px, 3.2vw, 34px);
  grid-column: 1;
}

.section-head .link {
  grid-column: 2;
}

.section-head p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--ink-secondary);
  max-width: 54ch;
  font-size: 15px;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 11px;
  font-weight: 800;
  color: var(--ink-muted);
}

.link {
  font-size: 14px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
  white-space: nowrap;
}

.num {
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ hero -- */

.hero {
  position: relative;
  background: var(--surface);
  border-radius: 0 0 var(--r-card) var(--r-card);
  padding-block: clamp(20px, 3vw, 30px) clamp(28px, 4vw, 44px);
  overflow: hidden;
}

/* The soft peach-to-mint wash from the reference, kept faint enough that dark
   text stays comfortably readable across it. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 140% at 8% -10%, rgba(247, 185, 149, 0.5), transparent 55%),
    radial-gradient(110% 130% at 95% 8%, rgba(160, 148, 245, 0.32), transparent 58%),
    radial-gradient(130% 120% at 60% 115%, rgba(122, 214, 172, 0.42), transparent 60%);
  pointer-events: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .hero::before {
    opacity: 0.34;
  }
}

:root[data-theme='dark'] .hero::before {
  opacity: 0.34;
}

.hero > .wrap {
  position: relative;
}

/* Fixed side columns keep the title centred now the right-hand icon is gone. */
.topbar {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  gap: 12px;
  margin-bottom: clamp(20px, 3vw, 34px);
}

.icon-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: var(--surface);
  color: var(--ink);
  display: grid;
  place-items: center;
  flex: none;
  cursor: pointer;
  box-shadow: 0 2px 8px -2px rgba(16, 16, 20, 0.18);
}

.icon-btn:hover {
  color: var(--brand);
}

/* Show the icon for the mode the button would switch you to. */
.icon-moon {
  display: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .icon-sun {
    display: none;
  }

  :root:not([data-theme='light']) .icon-moon {
    display: block;
  }
}

:root[data-theme='dark'] .icon-sun {
  display: none;
}

:root[data-theme='dark'] .icon-moon {
  display: block;
}

/* An explicit light choice wins over a dark OS. */
:root[data-theme='light'] .icon-sun {
  display: block;
}

:root[data-theme='light'] .icon-moon {
  display: none;
}

.topbar h1 {
  font-size: clamp(22px, 3.4vw, 30px);
  text-align: center;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.hero-lede {
  font-size: clamp(15px, 1.7vw, 19px);
  color: var(--ink-secondary);
  max-width: 46ch;
  margin: 0 auto 26px;
  text-align: center;
  font-weight: 500;
}

/* Big figure, small unit, caption underneath — the stat strip. */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--surface);
  border-radius: var(--r-card);
  padding: clamp(18px, 2.6vw, 26px) clamp(10px, 2vw, 20px);
  box-shadow: var(--shadow);
  margin: 0;
}

.stat-strip > div {
  text-align: center;
  padding-inline: 6px;
}

.stat-strip > div + div {
  border-left: 1px solid var(--hairline);
}

.stat-strip dd {
  margin: 0;
  font-size: clamp(24px, 4.4vw, 40px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}

.stat-strip .unit {
  font-size: 0.5em;
  font-weight: 700;
  margin-left: 1px;
}

/* A hair smaller than the other two figures, since it carries far more
   characters, and tabular so the digits don't shuffle as they tick. */
.stat-strip .countdown {
  font-size: clamp(19px, 3vw, 29px);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.stat-strip dt {
  font-size: clamp(11px, 1.3vw, 13px);
  color: var(--ink-muted);
  font-weight: 600;
  margin-top: 6px;
}

/* ------------------------------------------------------------ the lanes --- */

.card {
  background: var(--surface);
  border-radius: var(--r-card);
  padding: clamp(18px, 2.4vw, 26px);
  box-shadow: var(--shadow);
}

.boards {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  align-items: start;
}

.board-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.board-head h3 {
  font-size: 20px;
}

.lanes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.lane-wrap {
  display: grid;
  gap: 6px;
}

/* Track. The fill and both text layers stack inside it. */
.lane {
  position: relative;
  background: var(--lane-track);
  border-radius: var(--r-pill);
  min-height: 92px;
  isolation: isolate;
}

.lane-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--pct, 0%);
  min-width: 14px;
  background: var(--lane);
  border-radius: var(--r-pill);
  transition: width 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* One text layer. Track and fill are both light in either mode, so a single
   dark ink stays readable wherever the bar happens to end. */
.lane-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 17px clamp(18px, 2.4vw, 26px);
  color: var(--lane-ink-track);
  pointer-events: none;
}

.lane-title {
  font-size: clamp(14px, 1.6vw, 16px);
  font-weight: 700;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
  padding-right: 4px;
}

.lane-figure {
  align-self: flex-end;
  font-size: clamp(22px, 3.4vw, 30px);
  font-weight: 800;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}

.lane-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding-inline: 10px;
  font-size: 13px;
  color: var(--ink-muted);
  font-weight: 600;
}

.rank-chip {
  background: var(--sunk);
  color: var(--ink-secondary);
  border-radius: var(--r-pill);
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  flex: none;
}

.rank-chip.first {
  background: var(--gold);
  color: #fff;
}

.empty {
  margin: 0 0 14px;
  color: var(--ink-secondary);
  font-size: 15px;
  padding-inline: 6px;
}

/* --------------------------------------------------------- verdict panel -- */

.verdict {
  position: relative;
  background: var(--brand);
  color: #fff;
  border-radius: var(--r-card);
  padding: clamp(22px, 3.4vw, 36px);
  overflow: hidden;
  box-shadow: var(--shadow-lift);
}

.verdict::after {
  content: '';
  position: absolute;
  right: -70px;
  top: -70px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.09);
}

.verdict .eyebrow {
  color: rgba(255, 255, 255, 0.75);
}

.verdict h2 {
  font-size: clamp(22px, 3.4vw, 34px);
  margin: 8px 0 10px;
  max-width: 22ch;
  position: relative;
}

.verdict p {
  margin: 0;
  font-size: clamp(14px, 1.7vw, 17px);
  color: rgba(255, 255, 255, 0.88);
  max-width: 58ch;
  font-weight: 500;
  position: relative;
}

/* ------------------------------------------------------------ team cards -- */

.teams {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
}

.team {
  background: var(--surface);
  border-radius: var(--r-card);
  padding: clamp(18px, 2.4vw, 26px);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  border-top: 6px solid var(--accent);
}

.team-top {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.team h3 {
  font-size: clamp(19px, 2.2vw, 22px);
  overflow-wrap: anywhere;
  flex: 1;
  /* Two lines' worth, so a long team name doesn't shunt one card out of step. */
  min-height: 2.2em;
}

.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.badge {
  font-size: 12px;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  background: var(--sunk);
  color: var(--ink-secondary);
  white-space: nowrap;
}

.badge-lead {
  background: var(--gold);
  color: #fff;
}

.team-figures {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 18px 0;
}

.figure {
  background: var(--sunk);
  border-radius: var(--r-mid);
  padding: 14px 16px;
}

.figure .label {
  font-size: 12px;
  color: var(--ink-muted);
  font-weight: 700;
}

.figure .value {
  font-size: clamp(21px, 2.6vw, 26px);
  font-weight: 800;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}

.figure .note {
  font-size: 12px;
  color: var(--ink-muted);
  margin-top: 2px;
}

/* --------------------------------------------------------------- roster --- */

.roster-title {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink-muted);
  margin-bottom: 8px;
}

.roster {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
}

.person {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 8px;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: var(--r-mid);
}

.person:hover {
  background: var(--sunk);
}

/* Their Steptember photo where they have one; initials in the team's colour
   otherwise. The initials sit underneath, so a photo that fails to load simply
   reveals them rather than leaving a broken image. */
.avatar {
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.01em;
  flex: none;
  overflow: hidden;
  box-shadow: 0 0 0 3px var(--surface);
}

.avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.avatar.sm {
  width: 34px;
  height: 34px;
  font-size: 12px;
}

/* A team's own picture, alongside its name on the team card. Named is-team so
   it can't collide with the .team card class and inherit its card styling. */
.avatar.is-team {
  width: 48px;
  height: 48px;
  font-size: 15px;
  border-radius: var(--r-mid);
  box-shadow: none;
}

.avatar.is-team img {
  border-radius: var(--r-mid);
}

.person-name {
  flex: 1;
  min-width: 0;
  font-weight: 700;
  font-size: 15px;
}

.person-name small {
  display: block;
  font-weight: 500;
  font-size: 12px;
  color: var(--ink-muted);
  overflow-wrap: anywhere;
}

.person-value {
  font-weight: 800;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  letter-spacing: -0.02em;
}

.person-value small {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-muted);
  text-align: right;
}

.captain-tag {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  margin-left: 6px;
}

/* Overlapping avatar row, as on the reference "Top Performers" strip. */
.avatar-row {
  display: flex;
  padding-left: 8px;
}

.avatar-row .avatar {
  margin-left: -10px;
}

/* --------------------------------------------------------------- buttons -- */

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
  padding-top: 6px;
}

.btn {
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  padding: 11px 20px;
  border-radius: var(--r-pill);
  text-decoration: none;
  border: 0;
  background: var(--sunk);
  color: var(--ink);
  cursor: pointer;
}

.btn:hover {
  filter: brightness(0.96);
}

.btn-solid {
  background: var(--accent, var(--brand));
  color: #fff;
}

.btn-solid:hover {
  filter: brightness(1.07);
}

/* ---------------------------------------------------- individual ladders -- */

.ladders {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  align-items: start;
}

.ladder {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ladder .pos {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink-muted);
  min-width: 2ch;
  font-variant-numeric: tabular-nums;
  flex: none;
}

/* --------------------------------------------------------------- dialog --- */

dialog.profile {
  border: 0;
  border-radius: var(--r-card);
  padding: 0;
  background: var(--surface);
  color: var(--ink);
  width: min(660px, calc(100vw - 24px));
  max-height: min(90vh, 940px);
  box-shadow: var(--shadow-lift);
}

dialog.profile::backdrop {
  background: rgba(12, 12, 12, 0.6);
  backdrop-filter: blur(3px);
}

.profile-inner {
  padding: clamp(18px, 2.6vw, 26px);
}

.profile-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 20px;
}

.profile-head h2 {
  font-size: clamp(21px, 3vw, 27px);
  overflow-wrap: anywhere;
}

.avatar.lg {
  width: 62px;
  height: 62px;
  font-size: 21px;
}

.profile-team {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-secondary);
  text-decoration: none;
}

.profile-team:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}

.close {
  margin-left: auto;
  flex: none;
  background: var(--sunk);
  border: 0;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 19px;
  line-height: 1;
  color: var(--ink-secondary);
  cursor: pointer;
}

.close:hover {
  color: var(--ink);
  filter: brightness(0.95);
}

.kpis {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin: 0 0 18px;
}

.kpi {
  background: var(--sunk);
  border-radius: var(--r-mid);
  padding: 14px 16px;
}

.kpi dt {
  font-size: 12px;
  color: var(--ink-muted);
  font-weight: 700;
}

.kpi dd {
  margin: 3px 0 0;
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.kpi small {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-muted);
  margin-top: 3px;
  letter-spacing: normal;
}

/* A compact lane for the profile's target and fundraising progress. */
.mini-lane {
  margin-bottom: 16px;
}

.mini-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 7px;
}

.mini-head strong {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

.mini-track {
  height: 16px;
  background: var(--lane-track);
  border-radius: var(--r-pill);
  overflow: hidden;
}

.mini-track > span {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--lane);
  transition: width 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.mini-note {
  font-size: 13px;
  color: var(--ink-muted);
  margin: 7px 0 0;
  font-weight: 500;
}

.on-track {
  color: var(--good);
  font-weight: 700;
}

/* Daily bars with the value floating above, as on the reference chart. Only
   rendered once there are at least two days of history to difference. */
.daily {
  background: var(--brand);
  border-radius: var(--r-mid);
  padding: 18px 16px 14px;
  margin-bottom: 18px;
}

.daily h3 {
  font-size: 15px;
  color: #fff;
  margin-bottom: 14px;
}

.daily-plot {
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  gap: 8px;
  height: 150px;
}

.daily-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
  height: 100%;
  justify-content: flex-end;
}

.bubble {
  background: rgba(255, 255, 255, 0.92);
  color: #101014;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.daily-bar {
  width: 100%;
  max-width: 30px;
  background: #fff;
  border-radius: var(--r-pill);
  min-height: 6px;
}

.daily-bar.best {
  background: var(--amber);
}

.daily-label {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
}

.profile-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
}

/* --------------------------------------------------------------- charts --- */

.chart-block {
  position: relative;
  background: var(--sunk);
  border-radius: var(--r-mid);
  padding: 14px 16px 10px;
}

.chart-hits rect {
  cursor: pointer;
}

/* The dot marking the hovered day is decoration drawn on top of the very band
   that summoned it. Without this it takes the pointer off that band, so sliding
   along the line stops updating the moment the cursor catches up with itself. */
.chart-cursor {
  pointer-events: none;
}

/* Sits above the hovered point, centred on it and clamped inside the card. */
.chart-tip {
  position: absolute;
  transform: translate(-50%, calc(-100% - 12px));
  z-index: 5;
  pointer-events: none;
  display: grid;
  gap: 2px;
  min-width: 168px;
  padding: 9px 12px;
  border-radius: var(--r-sm, 10px);
  background: var(--ink);
  color: var(--surface);
  font-size: 12px;
  line-height: 1.35;
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.5);
}

.chart-tip strong {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.tip-day {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 10px;
  opacity: 0.65;
}

.tip-up {
  color: var(--tip-accent);
  font-weight: 700;
}

.tip-down {
  color: var(--tip-down);
  font-weight: 700;
}

.tip-forecast {
  opacity: 0.8;
}

.chart-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.chart-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-muted);
}

.chart-latest {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

/* Scales uniformly, so tick text and stroke widths keep their proportions. The
   ratio comes from the viewBox the chart was drawn at, set inline. */
.chart {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  color: var(--ink-muted);
}

/* The full-width chart at the foot of the page. */
.chart-block.wide {
  padding: 18px 20px 12px;
}

.chart-block.wide .chart-latest {
  font-size: clamp(24px, 3.4vw, 34px);
}

.chart-block.wide .chart-title {
  font-size: 13px;
}

/* Tick text is in viewBox units, so the wider box needs a larger size to come
   out the same on screen. */
.chart-block.wide .chart-tick {
  font-size: 13px;
}

.chart-block.wide .chart-pace,
.chart-block.wide .chart-axis {
  stroke-width: 2;
}

.chart-axis {
  stroke: var(--hairline-strong);
}

.chart-pace {
  opacity: 0.5;
}

.chart-tick {
  font-size: 9px;
  font-weight: 600;
  fill: var(--ink-muted);
}

.chart-note,
.chart-empty {
  font-size: 12px;
  color: var(--ink-muted);
  margin: 4px 0 0;
  font-weight: 500;
}

.chart-empty {
  padding: 18px 0;
}

/* -------------------------------------------------------------- insights -- */

.insights {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-top: 18px;
}

.insight {
  background: var(--surface);
  border-radius: var(--r-card);
  padding: 18px 20px;
  box-shadow: var(--shadow);
  border-left: 5px solid var(--accent, var(--brand));
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.insight-kind {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--accent, var(--brand));
}

.insight p {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
}

.insight strong {
  font-weight: 800;
}

/* ------------------------------------------------------------- tab bar ---- */

/* Room for the fixed bar, plus the phone's own home-indicator inset. */
body {
  padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px));
}

.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--hairline);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Out of the way while reading down the page; back on the first scroll up. */
.tabbar.is-tucked {
  transform: translateY(110%);
}

.tabbar-inner {
  max-width: 560px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 8px clamp(8px, 3vw, 16px);
}

.tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 4px;
  border: 0;
  background: none;
  border-radius: var(--r-mid);
  color: var(--ink-muted);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.tab:hover {
  color: var(--ink-secondary);
  background: var(--sunk);
}

.tab.is-active {
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 12%, transparent);
}

/* The profile view stands alone — no campaign banner above it. */
body[data-view='profile'] .hero {
  display: none;
}

.profile-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 14px;
}

/* ------------------------------------------------------------- podium ----- */

.podiums {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  align-items: start;
}

.podium {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: end;
  gap: 8px;
}

.podium-place {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}

.podium-person {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 100%;
  padding: 6px 2px 10px;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  border-radius: var(--r-mid);
  min-width: 0;
}

.podium-person:hover {
  background: var(--sunk);
}

.podium-name {
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  overflow-wrap: anywhere;
  line-height: 1.25;
}

.podium-value {
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--ink-secondary);
}

/* The blocks give the podium its stepped silhouette. */
.podium-block {
  width: 100%;
  border-radius: var(--r-mid) var(--r-mid) 0 0;
  background: var(--sunk);
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 800;
}

.place-1 .podium-block {
  height: 74px;
  background: var(--gold);
  color: #fff;
}

.place-2 .podium-block {
  height: 54px;
}

.place-3 .podium-block {
  height: 40px;
}

/* --------------------------------------------------------------- footer --- */

footer.site {
  padding-block: 36px;
  font-size: 14px;
  color: var(--ink-secondary);
}

footer.site p {
  margin: 0 0 8px;
  max-width: 70ch;
}

footer.site ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 14px 0 0;
  padding: 0;
}

.load-error {
  margin: 40px auto;
  max-width: 60ch;
  background: var(--surface);
  border-radius: var(--r-card);
  padding: 24px;
  box-shadow: var(--shadow);
}

/* --------------------------------------------------------- focus & motion - */

:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

@media (max-width: 560px) {
  .team-figures {
    grid-template-columns: 1fr;
  }

  .stat-strip {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .stat-strip > div + div {
    border-left: 0;
    border-top: 1px solid var(--hairline);
    padding-top: 16px;
  }

  .lane {
    min-height: 84px;
  }
}

/* --------------------------------------------------------- profile view -- */

.pick-lead {
  margin: 0 0 16px;
  color: var(--ink-secondary);
  max-width: 54ch;
}

.pick-group {
  margin-bottom: 26px;
}

.pick-group h3 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--accent);
  margin-bottom: 12px;
}

.pick-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

/* One card per person. The whole card is the button so it's an easy target on
   a phone, where this list is most likely to be used. */
.pick {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 18px 12px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-mid);
  background: var(--surface);
  color: inherit;
  cursor: pointer;
  text-align: center;
  font: inherit;
}

.pick:hover,
.pick:focus-visible {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.pick {
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.pick-name {
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
}

.profile-pick .btn {
  margin-bottom: 22px;
}

/* ------------------------------------------------------------ the quiz --- */

.profile-quiz {
  max-width: 560px;
  display: grid;
  gap: 22px;
}

.quiz-head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.quiz-head h3 {
  font-size: 20px;
  margin-bottom: 4px;
}

.quiz-head p {
  margin: 0;
  color: var(--ink-secondary);
  font-size: 14px;
}

.field {
  display: grid;
  gap: 8px;
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}

.field-label {
  font-weight: 700;
  font-size: 15px;
  padding: 0;
}

.field-label em {
  font-style: normal;
  font-weight: 400;
  color: var(--ink-secondary);
}

.field input[type='number'] {
  font: inherit;
  padding: 12px 14px;
  border-radius: var(--r-mid);
  border: 1px solid var(--hairline-strong);
  background: var(--surface);
  color: var(--ink);
  width: 100%;
  max-width: 240px;
}

.field input[type='number']:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}

.field small {
  color: var(--ink-secondary);
  font-size: 13px;
}

.choices {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}

.choices label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 15px;
  cursor: pointer;
}

.quiz-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ------------------------------------------------- before-and-after panel -- */

.compare {
  background: var(--brand);
  color: #fff;
  border-radius: var(--r-card);
  padding: 24px;
  margin-bottom: 22px;
}

.compare.is-down {
  background: var(--ink);
}

.compare h3 {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  opacity: 0.75;
  margin-bottom: 18px;
}

.compare-figures {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px 22px;
}

.compare-cell {
  display: grid;
  gap: 1px;
}

.compare-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  opacity: 0.7;
}

.compare-cell strong {
  font-size: clamp(28px, 5vw, 40px);
  font-weight: 800;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.compare-cell small {
  font-size: 12px;
  opacity: 0.7;
}

.compare-arrow {
  font-size: 26px;
  opacity: 0.6;
}

/* The headline number, pushed to the end of the row on a wide screen. */
.compare-delta {
  margin-left: auto;
  display: grid;
  justify-items: end;
  gap: 2px;
  padding: 10px 18px;
  border-radius: var(--r-mid);
  background: rgba(255, 255, 255, 0.16);
}

.compare-delta strong {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.compare-delta small {
  font-size: 12px;
  opacity: 0.85;
}

.compare-verdict {
  margin: 20px 0 0;
  font-size: clamp(17px, 2.4vw, 21px);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.compare-note {
  margin: 8px 0 0;
  font-size: 14px;
  opacity: 0.8;
}

/* ------------------------------------------------------- the dashboard --- */

.me-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}

.me-id {
  flex: 1;
  min-width: 0;
}

.me-id h3 {
  font-size: clamp(20px, 3vw, 26px);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.btn-quiet {
  background: transparent;
  border: 1px solid var(--hairline-strong);
  font-size: 13px;
  padding: 9px 16px;
}

.placements {
  margin-bottom: 22px;
}

.placements h3,
.profile-me .chart-deck + .mini-lane {
  margin-top: 0;
}

.placements h3 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink-secondary);
  margin-bottom: 12px;
}

.profile-me .chart-deck {
  margin-bottom: 22px;
}

.baseline-recap {
  font-size: 14px;
  color: var(--ink-secondary);
  margin: 18px 0;
}

/* A button that reads as a link, for the small "change these answers" action. */
.linkish {
  font: inherit;
  background: none;
  border: 0;
  padding: 0;
  color: var(--brand);
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
}

.privacy-note {
  margin: 26px 0 0;
  padding: 14px 16px;
  border-radius: var(--r-mid);
  background: var(--sunk);
  color: var(--ink-secondary);
  font-size: 13px;
  line-height: 1.5;
  max-width: 68ch;
}

@media (max-width: 560px) {
  .compare-delta {
    margin-left: 0;
    width: 100%;
    justify-items: start;
  }

  .me-head {
    flex-wrap: wrap;
  }
}

/* Where a team sits across the organisation, under its headline figures. Only
   rendered once that leaderboard has been read, so it is absent, not empty. */
.org-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  margin: 0 0 18px;
  padding: 11px 14px;
  border-radius: var(--r-mid);
  background: var(--sunk);
  font-size: 13px;
  color: var(--ink-secondary);
}

.org-strip strong {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.org-label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--accent);
}

/* ------------------------------------------------------- scope switcher --- */

/* The chips split the row evenly and run the full width of the panel, so they
   line up with the stat grid beneath rather than trailing off mid-row. Equal
   columns rather than `flex: 1`, so the two stay the same width whatever their
   labels say — a wider chip would read as the more important scope. */
.scopes {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 8px;
  margin-bottom: 18px;
}

.scope {
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 10px 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--hairline-strong);
  background: transparent;
  color: var(--ink-secondary);
  cursor: pointer;
  text-align: center;
}

.scope:hover {
  border-color: var(--accent, var(--brand));
}

.scope.is-active {
  background: var(--accent, var(--brand));
  border-color: transparent;
  color: #fff;
}

/* ------------------------------------------------------------- the meter --- */

/* Where one entity sits in its whole field: the track is everyone, the fill is
   everyone ahead, the marker is you. A single ratio against a limit, so a meter
   rather than a chart. The mark sits below 3:1 against the track, which the
   palette validator flags as needing relief — the rank is always written out in
   the block beneath, so position is never carried by colour alone. */
.meter {
  margin: 0 0 18px;
}

.meter-track {
  position: relative;
  height: 10px;
  border-radius: var(--r-pill);
  background: var(--lane-track);
}

.meter-fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: var(--r-pill);
}

/* The 2px surface ring the mark specs call for, so the marker stays legible
   where it meets the fill it sits on top of. */
.meter-mark {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 2px var(--surface);
}

.meter-ends {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* A team card's heading is now the control that opens its dialog. */
.team-top {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  font: inherit;
  text-align: left;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: inherit;
}

.team-top:hover h3 {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ----------------------------------------------------------- chart deck --- */

/* Two views of one line, side by side in a track that slides. The viewport
   clips; `pan-y` hands vertical movement straight to the page so swiping the
   deck never costs the reader their scroll. */
.deck-viewport {
  overflow: hidden;
  border-radius: var(--r-mid);
  touch-action: pan-y;
}

.deck-track {
  display: flex;
  transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.deck-slide {
  flex: 0 0 100%;
  min-width: 0;
}

.deck-nav {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
}

.deck-tab {
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  /* Three tabs in a team card at 390px: without this the labels break across
     two lines and the row grows a second storey. */
  white-space: nowrap;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
}

.deck-tab:hover {
  color: var(--ink-secondary);
  border-color: var(--hairline-strong);
}

.deck-tab.is-active {
  background: var(--sunk);
  border-color: var(--hairline-strong);
  color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  .deck-track {
    transition: none;
  }
}

/* ------------------------------------------------- since you last looked --- */

/* A returning viewer's summary. Sits above every view rather than inside one,
   so it is seen whichever page the link landed on. */
.digest {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: var(--r-mid);
  background: var(--surface);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow);
}

.digest-body {
  flex: 1;
  min-width: 0;
}

.digest-body p {
  margin: 0;
  font-size: 14px;
  color: var(--ink-secondary);
}

.digest-body p + p {
  margin-top: 4px;
}

.digest-body strong {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.digest-head {
  font-size: 11px !important;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink-muted) !important;
  margin-bottom: 6px !important;
}

.digest-close {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 0;
  background: var(--sunk);
  color: var(--ink-secondary);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
}

.digest-close:hover {
  color: var(--ink);
}