/* VAST Coaches Portal: "Calm" glass theme, from Oscar's redesign.
   Frosted panels over a wash of the backdrop photo. Every colour is a token.

   Two themes, as in Oscar's design. Light is the base. Dark applies either
   because the device asks for it and the coach has not overridden it, or
   because the coach picked Dark from the switch in the sidebar; js/app.js sets
   data-theme on <html> and index.html reapplies the saved choice before first
   paint. The two dark blocks below are identical and must stay in step - CSS
   cannot join an @media query and an attribute selector into one rule.

   Everything that differs between the themes is a token here, so no rule
   further down is written twice. The handful of tokens that did not reach
   WCAG AA when measured in place are commented where they are changed;
   everything else is Oscar's. */

/* The brand wordmark only ("VAST", "Coaches Portal", "HELLO"). Self-hosted so the
   portal makes no external request: a Google Fonts subset of Ubuntu 500 covering
   A-Z, a-z, 0-9, space and basic punctuation. Everything else uses the device's
   own UI font, which is what the design asks for. */
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/ubuntu-500-wordmark.woff2) format('woff2');
  unicode-range: U+20-21, U+26-29, U+2c-2e, U+30-3b, U+3f, U+41-5a, U+61-7a;
}

/* ---------- Light (the base) ---------- */
:root {
  --brand: #0B3275;
  --logo: #0B3275;
  --btn: #0B3275;
  --btn-hover: #12408F;
  --accent: #2F5FD0;

  --ink: #0F1A33;
  --ink-2: #45506A;
  /* Oscar's muted grey is #6B7589. Measured against the real glass over the photo
     that gives 2.8:1 on 12-14px text - under the 4.5:1 WCAG AA needs - so it is
     darkened here. Everything else in the palette is his. */
  --muted: #4A5265;
  --link: #1E4AB8;

  --glass: rgba(255, 255, 255, .52);
  --glass-strong: rgba(255, 255, 255, .86);
  --glass-soft: rgba(246, 248, 252, .7);
  --glass-hover: rgba(255, 255, 255, .9);
  --glass-line: rgba(255, 255, 255, .85);
  --glass-shine: rgba(255, 255, 255, 1);
  --hairline: rgba(15, 26, 51, .08);
  --field: rgba(255, 255, 255, .8);
  --shadow: 0 1px 2px rgba(15, 26, 51, .04), 0 10px 30px -14px rgba(15, 26, 51, .2);
  --shadow-lift: 0 2px 4px rgba(15, 26, 51, .05), 0 16px 40px -14px rgba(15, 26, 51, .28);
  --ring: rgba(47, 95, 208, .25);

  /* Oscar's band colours are #137A52 / #946000 / #B4233F. The portal prints them
     as 12-13px text - the commitment band, the overdue line, the pain rating -
     and measured over the glass they came out at 3.2-4.1:1, under WCAG AA. These
     are the same hues darkened until every one of those runs clears 4.5:1. The
     tints behind them and --avg-bar, which only ever fills a meter, are his. */
  --good: #0B5638; --good-bg: rgba(19, 122, 82, .1);
  --avg: #6F4800;  --avg-bg: rgba(200, 140, 20, .13); --avg-bar: #D9A03A;
  /* Poor and Info are a shade darker again than the first pass. That pass only
     measured the bands as bare coloured text; on their own tinted pills - the
     call status badge, the pain rating, the assessment numbers - they came out
     at 4.46:1 and 4.40:1. These read 4.8:1 and 5.2:1 there. */
  --poor: #96192F; --poor-bg: rgba(180, 35, 63, .09);
  --info: #1B429F; --info-bg: rgba(30, 74, 184, .09);

  --page-bg: #EBEFF6;
  /* Heavier than Oscar's (.5 / .18 / .3): page titles and their sub-lines sit
     straight on the photo with nothing behind them, and at his values the
     sub-line measured 3.8:1. These put it over 5:1. */
  --veil: linear-gradient(180deg, rgba(240, 244, 250, .68), rgba(240, 244, 250, .5) 50%, rgba(240, 244, 250, .6));
  --glass-solid: rgba(255, 255, 255, .9); --glass-strong-solid: #fff;
  --on-status: #fff;
  /* A touch more opaque than the rest of the glass: an unselected chip's label
     measured 4.2:1 on the plain fill, and this lifts it over 4.5:1. */
  --chip-fill: rgba(255, 255, 255, .75);
  /* The commitment band sits on the photo rather than on a panel, and as bare
     coloured text it measured 2.6:1, so in this theme it keeps a glass pill. */
  --band-pill-bg: var(--glass-strong); --band-pill-pad: 4px 11px;
  --rim: 1; --glow: .6; --glow-login: .6;
  color-scheme: light;

  --blur: blur(30px) saturate(190%);
  --r-xl: 22px; --r-lg: 18px; --r-md: 14px; --r-sm: 10px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", "Helvetica Neue", sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.34, 1.4, .64, 1);
}

/* ---------- Dark ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Oscar's dark block never redefines --brand, because only his light theme
       used it. Left at the VAST navy it is 1.1:1 on these dark panels - the boot
       wordmark and every link hover. This is the brand navy lifted until it
       clears AA (8.9:1 on a card, 6.8:1 on the bare backdrop) and still reads as
       a step up from --link. */
    --brand: #B9CEFF;
    --logo: #FFFFFF;
    --btn: #2F5FD0;
    --btn-hover: #3D6DE0;
    --accent: #8FB0FF;

    --ink: #EEF1F8;
    --ink-2: #BCC4D8;
    /* Oscar's dark muted is #8C95AC, which suits the flat dark gradient his theme
       assumes. Over the photo it measured 2.9:1 on a tile and 3.3:1 on a card.
       Lifted here to 5.4:1 and 6.1:1, still a clear step below --ink-2. */
    --muted: #A3ABBF;
    --link: #8FB0FF;

    --glass: rgba(18, 26, 50, .5);
    --glass-strong: rgba(24, 33, 60, .86);
    --glass-soft: rgba(255, 255, 255, .04);
    --glass-hover: rgba(34, 45, 80, .7);
    --glass-line: rgba(255, 255, 255, .1);
    --glass-shine: rgba(255, 255, 255, .12);
    --hairline: rgba(255, 255, 255, .08);
    --field: rgba(10, 15, 32, .55);
    --shadow: 0 1px 2px rgba(0, 0, 0, .2), 0 12px 32px -14px rgba(0, 0, 0, .6);
    --shadow-lift: 0 2px 4px rgba(0, 0, 0, .25), 0 18px 44px -14px rgba(0, 0, 0, .7);
    --ring: rgba(143, 176, 255, .3);

    --good: #4CC795; --good-bg: rgba(76, 199, 149, .12);
    --avg: #E8B55A;  --avg-bg: rgba(232, 181, 90, .13); --avg-bar: #E8B55A;
    /* #F27D93 on its own 12% tint is 4.5:1 to two decimal places (4.46). A shade
       lighter takes the Poor band and the overdue line to 4.9:1. The tint is his. */
    --poor: #F48CA0; --poor-bg: rgba(242, 125, 147, .12);
    --info: #8FB0FF; --info-bg: rgba(143, 176, 255, .12);

    --page-bg: #0B1531;
    /* Oscar's dark veil is .72 / .50 / .70. His design sits on a flat dark gradient;
       ours sits on a sunrise photo, and at .50 the bright band came through strongly
       enough to put most small text under AA - the page sub-line at 3.0:1 and muted
       text at 1.7:1. Lifting the middle of the gradient fixes those at source. */
    --veil: linear-gradient(180deg, rgba(5, 10, 30, .78), rgba(5, 10, 30, .74) 45%, rgba(5, 10, 30, .78));
    --glass-solid: rgba(16, 24, 48, .94); --glass-strong-solid: #141C34;
    /* White on the light pink and green fills is 2.1-2.6:1, so the overdue counts
       and the toast tick are dark ink here (6.8:1 and 8.3:1). */
    --on-status: #10182C;
    --chip-fill: rgba(18, 26, 50, .5);
    /* The commitment band clears AA bare on the dark backdrop (4.7-5.7:1), so it
       needs no pill behind it the way it does in light. */
    --band-pill-bg: transparent; --band-pill-pad: 0;
    --rim: .35; --glow: .12; --glow-login: .25;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  /* Oscar's dark block never redefines --brand, because only his light theme
     used it. Left at the VAST navy it is 1.1:1 on these dark panels - the boot
     wordmark and every link hover. This is the brand navy lifted until it
     clears AA (8.9:1 on a card, 6.8:1 on the bare backdrop) and still reads as
     a step up from --link. */
  --brand: #B9CEFF;
  --logo: #FFFFFF;
  --btn: #2F5FD0;
  --btn-hover: #3D6DE0;
  --accent: #8FB0FF;

  --ink: #EEF1F8;
  --ink-2: #BCC4D8;
  /* Oscar's dark muted is #8C95AC, which suits the flat dark gradient his theme
     assumes. Over the photo it measured 2.9:1 on a tile and 3.3:1 on a card.
     Lifted here to 5.4:1 and 6.1:1, still a clear step below --ink-2. */
  --muted: #A3ABBF;
  --link: #8FB0FF;

  --glass: rgba(18, 26, 50, .5);
  --glass-strong: rgba(24, 33, 60, .86);
  --glass-soft: rgba(255, 255, 255, .04);
  --glass-hover: rgba(34, 45, 80, .7);
  --glass-line: rgba(255, 255, 255, .1);
  --glass-shine: rgba(255, 255, 255, .12);
  --hairline: rgba(255, 255, 255, .08);
  --field: rgba(10, 15, 32, .55);
  --shadow: 0 1px 2px rgba(0, 0, 0, .2), 0 12px 32px -14px rgba(0, 0, 0, .6);
  --shadow-lift: 0 2px 4px rgba(0, 0, 0, .25), 0 18px 44px -14px rgba(0, 0, 0, .7);
  --ring: rgba(143, 176, 255, .3);

  --good: #4CC795; --good-bg: rgba(76, 199, 149, .12);
  --avg: #E8B55A;  --avg-bg: rgba(232, 181, 90, .13); --avg-bar: #E8B55A;
  /* #F27D93 on its own 12% tint is 4.5:1 to two decimal places (4.46). A shade
     lighter takes the Poor band and the overdue line to 4.9:1. The tint is his. */
  --poor: #F48CA0; --poor-bg: rgba(242, 125, 147, .12);
  --info: #8FB0FF; --info-bg: rgba(143, 176, 255, .12);

  --page-bg: #0B1531;
  /* Oscar's dark veil is .72 / .50 / .70. His design sits on a flat dark gradient;
     ours sits on a sunrise photo, and at .50 the bright band came through strongly
     enough to put most small text under AA - the page sub-line at 3.0:1 and muted
     text at 1.7:1. Lifting the middle of the gradient fixes those at source. */
  --veil: linear-gradient(180deg, rgba(5, 10, 30, .78), rgba(5, 10, 30, .74) 45%, rgba(5, 10, 30, .78));
  --glass-solid: rgba(16, 24, 48, .94); --glass-strong-solid: #141C34;
  /* White on the light pink and green fills is 2.1-2.6:1, so the overdue counts
     and the toast tick are dark ink here (6.8:1 and 8.3:1). */
  --on-status: #10182C;
  --chip-fill: rgba(18, 26, 50, .5);
  /* The commitment band clears AA bare on the dark backdrop (4.7-5.7:1), so it
     needs no pill behind it the way it does in light. */
  --band-pill-bg: transparent; --band-pill-pad: 0;
  --rim: .35; --glow: .12; --glow-login: .25;
  color-scheme: dark;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
html { background: var(--page-bg); -webkit-text-size-adjust: 100%; }
body {
  background: transparent; color: var(--ink); font-family: var(--font); font-size: 15px; line-height: 1.45;
  -webkit-font-smoothing: antialiased; font-feature-settings: "tnum" 1, "lnum" 1;
}
input, textarea, select, button { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--brand); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 10px; }
[hidden] { display: none !important; }
::selection { background: var(--ring); }

.backdrop { position: fixed; inset: 0; z-index: -1; overflow: hidden; }

.skip { position: fixed; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 12px; background: var(--glass-strong); color: var(--ink); font-weight: 600; transition: top .2s; }
.skip:focus { top: 16px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* The glass recipe: translucent fill, heavy backdrop blur, a bright top edge and a soft drop shadow. */
.glass, .card, .stat, .sidebar, .tabbar, .topbar__btn, .search, .chip, .btn--ghost, .toast, .banner, .mcard, .login__card, .seg {
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 1px solid var(--glass-line);
  box-shadow: inset 0 1px 0 var(--glass-shine), inset 0 -1px 0 rgba(255, 255, 255, .06), var(--shadow);
}
.card, .stat, .login__card { position: relative; isolation: isolate; }
.card::before, .stat::before, .login__card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: linear-gradient(140deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, .12));
  opacity: .18;
}

/* ---------- Boot + loading ---------- */
.boot { min-height: 100vh; display: grid; place-content: center; gap: 18px; justify-items: center; color: var(--brand); }
.boot__bar { width: 120px; height: 3px; border-radius: 3px; background: var(--hairline); overflow: hidden; position: relative; }
.boot__bar::after { content: ""; position: absolute; inset: 0; width: 40%; background: var(--brand); border-radius: 3px; animation: slide 1.1s var(--ease) infinite; }
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
.loading { color: var(--muted); padding: 24px 0; }

.skeleton { display: grid; gap: 18px; }
.skeleton__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.skel { height: 120px; border-radius: var(--r-lg); background: var(--glass-soft); border: 1px solid var(--hairline); position: relative; overflow: hidden; }
.skel--title { height: 54px; max-width: 360px; }
.skel--tall { height: 300px; }
.skel::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent); animation: shimmer 1.4s infinite; }
@keyframes shimmer { to { transform: translateX(100%); } }

/* ---------- Shell ---------- */
.shell { display: grid; grid-template-columns: 268px minmax(0, 1fr); min-height: 100vh; gap: 0; }
.sidebar {
  position: sticky; top: 16px; margin: 16px 0 16px 16px; height: calc(100vh - 32px);
  border-radius: var(--r-xl); display: flex; flex-direction: column; padding: 22px 14px 14px; gap: 6px;
}

/* The VAST wordmark, as in the original portal. */
.sidebar__brand { padding: 4px 12px 30px; display: flex; flex-direction: column; color: inherit; }
.sidebar__brand:hover { color: inherit; }
.sidebar__logo { font: 500 32px/1 Ubuntu, var(--font-display); color: var(--logo); letter-spacing: 3px; }
.sidebar__tag { font-size: 11px; color: var(--muted); letter-spacing: 1.6px; text-transform: uppercase; font-weight: 500; margin-top: 6px; }
.nav { display: flex; flex-direction: column; gap: 4px; }
.nav__item {
  display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 14px; color: var(--ink-2); font-weight: 500;
  transition: background .2s, color .2s, transform .2s var(--ease); border: 1px solid transparent;
}
.nav__item:hover { background: var(--glass-soft); color: var(--ink); }
.nav__item.is-on {
  color: var(--ink); font-weight: 600; background: var(--glass-strong); border-color: var(--glass-line);
  box-shadow: inset 0 1px 0 var(--glass-shine), 0 6px 18px -8px rgba(18, 30, 80, .35);
}
.nav__item.is-on svg { color: var(--logo); }
/* --on-status is the ink that reads on the solid --poor and --good fills:
   white in light, near-black in dark, where those fills are a light pink and a
   light green. Shared by the two overdue counts and the toast tick. */
.nav__count { margin-left: auto; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--on-status); background: var(--poor); box-shadow: 0 4px 12px -4px var(--poor); }

.sidebar__foot { margin-top: auto; display: grid; gap: 10px; }
.me { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 16px; background: var(--glass-soft); border: 1px solid var(--hairline); }
.me__name { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me__role { font-size: 12px; color: var(--muted); }
.me__actions { margin-left: auto; display: flex; gap: 4px; }
/* Sign out is its own row under the coach block rather than an icon tucked
   beside the name: at 268px there is no room for the label next to a full name,
   and an icon on its own is easy to miss. The theme switch stays in the coach
   block, where Oscar has it, because its icon says what it does. */
.signout { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 12px; border-radius: 14px; color: var(--ink-2); font-size: 15px; font-weight: 500; border: 1px solid transparent; transition: background .2s, color .2s; }
.signout:hover { background: var(--glass-soft); color: var(--ink); }
.icon-btn { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; color: var(--muted); transition: background .2s, color .2s; }
.icon-btn:hover { background: var(--glass-hover); color: var(--ink); }

.main { padding: 28px clamp(16px, 3vw, 44px) 80px; min-width: 0; max-width: 1320px; width: 100%; margin: 0 auto; animation: enter .45s var(--ease) both; }
.main > * { animation: rise .55s var(--ease) both; }
.main > *:nth-child(2) { animation-delay: .04s; } .main > *:nth-child(3) { animation-delay: .08s; }
.main > *:nth-child(4) { animation-delay: .12s; } .main > *:nth-child(5) { animation-delay: .16s; } .main > *:nth-child(n+6) { animation-delay: .2s; }
@keyframes enter { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* Entrance motion plays once per page, not on every in-page update. */
.main.no-anim, .main.no-anim > * { animation: none; }

.topbar { display: none; }

/* Mobile tab bar: a floating glass capsule. */
.tabbar {
  position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 40;
  display: none; justify-content: space-around; padding: 6px; border-radius: 26px;
}
.tabbar__item { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px 6px; border-radius: 20px; color: var(--muted); font-size: 11px; font-weight: 600; }
.tabbar__item.is-on { color: var(--ink); background: var(--glass-strong); box-shadow: inset 0 1px 0 var(--glass-shine); }
.tabbar__item.is-on svg { color: var(--logo); }
.tabbar__count { position: absolute; top: 3px; right: calc(50% - 22px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--poor); color: var(--on-status); font-size: 10px; font-weight: 700; display: grid; place-items: center; }

/* ---------- Page furniture ---------- */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px 24px; flex-wrap: wrap; margin-bottom: 24px; }
.page-head__text { min-width: 0; }
.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.page-title { font: 700 clamp(24px, 2.6vw, 30px)/1.15 var(--font-display); letter-spacing: -.015em; margin: 6px 0 0; color: var(--ink); }
.page-sub { color: var(--ink-2); margin-top: 8px; font-size: 15px; }
.back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 18px; padding: 7px 14px 7px 10px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--ink);
  background: var(--glass-soft); border: 1px solid var(--hairline); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.back:hover { color: var(--ink); background: var(--glass-hover); }

.stack { display: grid; gap: 18px; align-content: start; }
.grid { display: grid; gap: 18px; margin-bottom: 18px; }
.grid--stats { grid-template-columns: 1.25fr 1fr 1fr; }
.grid--dash { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid--kpi { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.max-760 { max-width: 760px; } .max-900 { max-width: 900px; } .max-1100 { max-width: 1100px; }

.card { border-radius: var(--r-lg); padding: 24px; display: flex; flex-direction: column; min-width: 0; }
.card--flush { padding: 0; overflow: hidden; }
.card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.card__title { font: 600 17px/1.25 var(--font-display); margin: 0; letter-spacing: -.005em; }
.card__meta { font-size: 13px; color: var(--muted); }

/* Stat tiles */
.stat { border-radius: var(--r-lg); padding: 22px 24px; display: flex; flex-direction: column; gap: 6px; color: var(--ink); transition: transform .3s var(--ease), box-shadow .3s, background .3s; min-height: 156px; }
a.stat:hover { color: var(--ink); transform: translateY(-2px); box-shadow: inset 0 1px 0 var(--glass-shine), var(--shadow-lift); background: var(--glass-hover); }
.stat__label { font-size: 13px; font-weight: 600; color: var(--ink-2); letter-spacing: .01em; display: flex; align-items: center; gap: 8px; }
.stat__value { font: 600 38px/1 var(--font-display); letter-spacing: -.02em; margin-top: auto; }
.stat__row { display: flex; align-items: baseline; gap: 10px; margin-top: auto; flex-wrap: wrap; }
.stat__aside { font-size: 13px; color: var(--muted); }
.stat__foot { font-size: 13px; font-weight: 600; color: var(--link); display: flex; align-items: center; gap: 6px; }
a.stat:hover .stat__foot svg { transform: translateX(3px); }
.stat__foot svg { transition: transform .3s var(--ease); }
.stat--hero { color: #fff; background: linear-gradient(160deg, #0B3275, #1A4A9E); border-color: rgba(255, 255, 255, .18); }
.stat--hero .stat__label, .stat--hero .stat__aside { color: rgba(255, 255, 255, .85); }
.stat--hero .stat__foot { color: #fff; }
a.stat--hero:hover { color: #fff; background: linear-gradient(160deg, #0E3A85, #2052AA); }
.flag { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; color: var(--poor); background: var(--poor-bg); }

/* Commitment */
.commit { display: grid; grid-template-columns: auto 1fr; gap: 26px; align-items: center; }
.ring { position: relative; width: 168px; height: 168px; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 12; stroke-linecap: round; transition: stroke-dasharray .9s var(--ease); }
.ring__track { stroke: var(--hairline); }
.ring__center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.ring__value { font: 600 34px/1 var(--font-display); letter-spacing: -.02em; }
.ring__label { font-size: 12px; color: var(--muted); margin-top: 4px; }
/* The commitment ring draws itself in. */
.ring circle:not(.ring__track) { animation: ring-in 1.1s var(--ease) both .15s; }
@keyframes ring-in { from { stroke-dasharray: 0 440; } }
.commit__tiles { display: grid; gap: 8px; }
.commit-tile { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; color: var(--ink); background: var(--glass-soft); border: 1px solid var(--hairline); transition: background .2s, transform .2s var(--ease); }
.commit-tile:hover { color: var(--ink); background: var(--glass-hover); transform: translateX(3px); }
.commit-tile__name { font-weight: 600; }
.commit-tile__range { font-size: 12px; color: var(--muted); }
.commit-tile__value { font: 600 24px/1 var(--font-display); }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.dot--good { background: var(--good); } .dot--avg { background: var(--avg-bar); } .dot--poor { background: var(--poor); } .dot--info { background: var(--info); } .dot--muted { background: var(--muted); }

/* Lists inside cards */
.list { display: grid; }
.list__item { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--hairline); color: var(--ink); }
.list__item:first-child { border-top: 0; }
a.list__item:hover { color: var(--ink); }
a.list__item:hover .list__title { color: var(--link); }
.list__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.list__title { font-weight: 600; transition: color .2s; }
.list__sub { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-empty { color: var(--muted); padding: 18px 0 4px; display: flex; align-items: center; gap: 10px; }

/* ---------- Controls ---------- */
.search { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 8px 0 16px; border-radius: 999px; color: var(--muted); min-width: min(380px, 100%); transition: box-shadow .2s, background .2s; }
.search:focus-within { background: var(--glass-strong); box-shadow: inset 0 1px 0 var(--glass-shine), 0 0 0 3px var(--ring), var(--shadow); }
.search input { flex: 1; border: 0; background: none; outline: none; color: var(--ink); min-width: 0; font-size: 15px; }
.search input::placeholder { color: var(--muted); }
.search__clear { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); }
.search__clear:hover { background: var(--glass-soft); color: var(--ink); }

.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.chip { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 8px 0 15px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--ink-2); white-space: nowrap; background: var(--chip-fill); transition: background .25s, color .25s, transform .35s var(--spring); }
.chip:hover { color: var(--ink); background: var(--glass-hover); }
.chip:active { transform: scale(.97); }
.chip.is-on { color: #fff; border-color: transparent; background: linear-gradient(180deg, #2457B8, #0B3275); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 4px 12px -6px rgba(11, 50, 117, .6); }
.chip__count { min-width: 24px; height: 24px; padding: 0 7px; border-radius: 12px; display: grid; place-items: center; font-size: 12px; background: var(--glass-soft); color: inherit; }
.chip.is-on .chip__count { background: rgba(255, 255, 255, .22); }
.chip--plain { padding: 0 15px; }

/* Buttons: a lit glass pill with a light sweep on hover. */
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: 999px;
  font-weight: 600; font-size: 14px; color: #fff; white-space: nowrap; letter-spacing: .01em;
  background: linear-gradient(180deg, #2457B8, #0B3275);
  border: 1px solid transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -1px 0 rgba(0, 0, 0, .15), 0 6px 18px -8px rgba(11, 50, 117, .6);
  transition: transform .35s var(--spring), box-shadow .3s, background .3s, filter .2s, opacity .2s;
}
.btn:hover { color: #fff; background: linear-gradient(180deg, #2D63C8, #12408F); transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; filter: grayscale(.3); }
.btn::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent); transform: skewX(-20deg); transition: left .7s var(--ease); pointer-events: none; }
.btn:hover::after { left: 130%; }
.btn--ghost { color: var(--ink); background: var(--glass-strong); border-color: var(--hairline); }
.btn--ghost:hover { color: var(--ink); background: var(--glass-hover); }
.btn--ghost::after { background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .6), transparent); }
.btn--sm { height: 36px; padding: 0 15px; font-size: 13px; }
.btn--lg { height: 52px; padding: 0 28px; font-size: 15px; }
.btn--block { width: 100%; }
.link-btn { color: var(--link); font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }
.link-btn:hover { color: var(--brand); text-decoration: underline; }
.link-btn:disabled { opacity: .5; cursor: not-allowed; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field__label { font-size: 12px; font-weight: 600; color: var(--ink-2); letter-spacing: .04em; }
.field__input { height: 44px; padding: 0 14px; border-radius: 14px; border: 1px solid var(--glass-line); background: var(--field); color: var(--ink); outline: none; min-width: 160px; -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.field__input:focus { box-shadow: 0 0 0 3px var(--ring); }
.textarea { width: 100%; min-height: 140px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--glass-line); background: var(--field); color: var(--ink); outline: none; resize: vertical; line-height: 1.55; font-size: 15px; transition: box-shadow .2s; }
.textarea:focus { box-shadow: 0 0 0 3px var(--ring); }
.textarea::placeholder { color: var(--muted); }
.hint { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Badges */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.badge--good { color: var(--good); background: var(--good-bg); }
.badge--avg { color: var(--avg); background: var(--avg-bg); }
.badge--poor { color: var(--poor); background: var(--poor-bg); }
.badge--info { color: var(--info); background: var(--info-bg); }
.badge--muted { color: var(--muted); background: var(--glass-soft); }
.badge--lg { font-size: 13px; padding: 5px 13px; }
/* Commitment bands (Good / Average / Poor) read as coloured text, with no fill behind them. */
.badge.badge--text { background: none; padding: 0; }
.t-good { color: var(--good); } .t-avg { color: var(--avg); } .t-poor { color: var(--poor); } .t-info { color: var(--info); } .t-muted { color: var(--muted); }
.strong { font-weight: 600; }
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Tables ---------- */
.trow { display: grid; align-items: center; gap: 14px; padding: 14px 24px; border-top: 1px solid var(--hairline); color: var(--ink); transition: background .2s; }
a.trow:hover { background: var(--glass-soft); color: var(--ink); }
a.trow:hover .chev { transform: translateX(3px); color: var(--link); }
.trow--head { border-top: 0; padding-top: 16px; padding-bottom: 12px; font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; background: var(--glass-soft); }
.trow__foot { padding: 14px 24px; border-top: 1px solid var(--hairline); color: var(--muted); font-size: 13px; }
.chev { color: var(--muted); transition: transform .2s var(--ease), color .2s; justify-self: end; display: grid; }
.g-users { grid-template-columns: minmax(200px, 2.2fr) .5fr .8fr 200px 1fr 1.3fr 20px; }
.g-sessions { grid-template-columns: 1.1fr .7fr 1fr 1fr .8fr 1.3fr; padding-left: 0; padding-right: 0; }
.g-assess { grid-template-columns: minmax(170px, 1.7fr) .8fr .9fr .9fr 1fr .7fr 1.5fr; }
.g-comm { grid-template-columns: 1.6fr 1fr 1fr 1.1fr 1fr .7fr repeat(5, 1.15fr); min-width: 1240px; }
.scroll-x { overflow-x: auto; }
.g-comm > * { white-space: nowrap; }
/* Sales commission rows (VCP-49). Date, member, product, cycle, currency and
   the three money columns; --orgs adds the organisation column, which is only
   drawn for an affiliate who covers more than one. Narrower than .g-comm
   because the member's User ID sits under their name rather than in a column
   of its own. Below 980px the table is replaced by .mcomm cards. */
.g-sales { grid-template-columns: .9fr minmax(180px, 1.8fr) 1.3fr .8fr .7fr repeat(3, 1fr); min-width: 1040px; }
.g-sales--orgs { grid-template-columns: .9fr minmax(180px, 1.8fr) 1.2fr 1.3fr .8fr .7fr repeat(3, 1fr); min-width: 1200px; }
.g-sales > *, .g-sales--orgs > * { white-space: nowrap; }
.g-sales .t-id, .g-sales--orgs .t-id { display: block; font-size: 11px; color: var(--muted); font-weight: 500; }

.person { display: flex; align-items: center; gap: 12px; min-width: 0; }
.person__text { display: flex; flex-direction: column; min-width: 0; }
.person__name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.person__sub { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avatar {
  --h: 220; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
  font-size: 14px; font-weight: 700; color: #fff; letter-spacing: .02em;
  background: hsl(var(--h) 42% 44%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2);
}
.avatar--sm { width: 36px; height: 36px; font-size: 13px; }
.avatar--xl { width: 64px; height: 64px; font-size: 22px; }
.pct { font-weight: 700; font-variant-numeric: tabular-nums; }
.mini-meter { width: 54px; height: 6px; border-radius: 3px; background: var(--hairline); overflow: hidden; display: inline-block; vertical-align: middle; margin-right: 8px; }
.mini-meter > span { display: block; height: 100%; border-radius: 3px; }
/* This week column: bar, % and band always line up on one line. */
.commit-cell { display: grid; grid-template-columns: 54px 40px 76px; align-items: center; gap: 8px; white-space: nowrap; }
.commit-cell .mini-meter { margin: 0; }
.commit-cell .pct { text-align: right; }
.commit-cell .badge { justify-content: flex-start; }

/* Mobile card lists */
.mlist { display: grid; gap: 10px; }
.mcard { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 18px; color: var(--ink); }
.mcard:hover { color: var(--ink); background: var(--glass-hover); }
.mcard__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mcard__side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.mlist__foot { text-align: center; color: var(--muted); font-size: 13px; padding: 6px; }

/* ---------- Profile ---------- */
.hero { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 20px; }
.hero__text { flex: 1; min-width: 240px; }
.hero__name { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hero__name .page-title { margin: 0; }
/* The band sits on the photo rather than on a panel. In light it needs a glass
   pill to clear AA; in dark the tokens make this a no-op. */
.hero__name .badge.badge--text { padding: var(--band-pill-pad); background: var(--band-pill-bg); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
/* A single run of text under the name. Oscar's version is a flex row of icon/text
   pairs; ours carries one line, so it stays a plain block and wraps normally. */
.facts { margin-top: 8px; color: var(--ink-2); font-size: 14px; }

.banner { position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 14px 14px 20px; border-radius: 20px; margin-bottom: 20px; flex-wrap: wrap; }
.banner__icon { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; }
.banner--info .banner__icon { color: var(--info); background: var(--info-bg); }
.banner--poor .banner__icon { color: var(--poor); background: var(--poor-bg); }
.banner__text { flex: 1; min-width: 200px; }
.banner__title { font-weight: 700; display: block; }
.banner__sub { font-size: 14px; color: var(--ink-2); display: block; }

.seg { display: inline-flex; gap: 4px; padding: 5px; border-radius: 999px; margin-bottom: 20px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }
.seg__item { padding: 9px 18px; border-radius: 999px; font-weight: 600; font-size: 14px; color: var(--ink-2); white-space: nowrap; transition: background .3s, color .3s, box-shadow .3s; }
.seg__item:hover { color: var(--ink); }
.seg__item.is-on { color: var(--ink); background: var(--glass-strong); box-shadow: inset 0 1px 0 var(--glass-shine), 0 4px 14px -6px rgba(18, 30, 80, .4); }

.kv { display: grid; grid-template-columns: minmax(130px, 42%) 1fr; gap: 12px; padding: 11px 0; border-top: 1px solid var(--hairline); font-size: 14px; }
.kv:first-of-type { border-top: 0; }
.kv__k { color: var(--muted); }
.kv__v { font-weight: 500; overflow-wrap: anywhere; }

.meter-row { display: grid; grid-template-columns: 110px 1fr 48px; align-items: center; gap: 14px; font-size: 14px; }
.meter { height: 10px; border-radius: 6px; background: var(--hairline); overflow: hidden; }
.meter--thin { height: 6px; }
.meter__fill { height: 100%; border-radius: 6px; background: var(--accent); transform-origin: left; animation: grow .9s var(--ease) both; }
.meter__fill--good { background: var(--good); }
.meter__fill--avg { background: var(--avg-bar); }
.meter__fill--poor { background: var(--poor); }
@keyframes grow { from { transform: scaleX(0); } }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }

.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tile { display: flex; flex-direction: column; gap: 4px; padding: 16px; border-radius: 16px; background: var(--glass-soft); border: 1px solid var(--hairline); color: var(--ink); transition: transform .45s var(--spring), box-shadow .3s, background .3s; }
.tile:hover { color: var(--ink); background: var(--glass-hover); transform: translateY(-2px); }
.tile__label { font-size: 12px; color: var(--muted); font-weight: 600; }
.tile__value { font: 600 18px/1.2 var(--font-display); }
.tile__sub { font-size: 12px; color: var(--muted); }

.timeline { display: grid; gap: 12px; }
.tl-item { position: relative; padding: 18px 20px; border-radius: 18px; background: var(--glass-soft); border: 1px solid var(--hairline); display: grid; gap: 6px; }
.tl-item__head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: center; }
.tl-item__title { font-weight: 600; }
.tl-item__meta { font-size: 13px; color: var(--muted); }
.tl-item__quote { white-space: pre-wrap; padding: 10px 14px; border-radius: 12px; background: var(--glass-soft); border-left: 3px solid var(--accent); font-size: 14px; color: var(--ink-2); }

.note { display: grid; gap: 4px; padding: 14px 0; border-top: 1px solid var(--hairline); }
.note:first-of-type { border-top: 0; }
.note__meta { font-size: 13px; color: var(--muted); }
.note__meta b { color: var(--ink); font-weight: 600; }
.note__source { font-size: 12px; font-weight: 600; color: var(--info); display: inline-flex; align-items: center; gap: 6px; }
.note__text { white-space: pre-wrap; overflow-wrap: anywhere; }
.note-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }

.assess-item { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid var(--hairline); flex-wrap: wrap; }
.assess-item:first-of-type { border-top: 0; }
.assess-item__num { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font: 700 16px/1 var(--font-display); color: var(--info); background: var(--info-bg); flex-shrink: 0; }
.assess-item__text { flex: 1; min-width: 160px; display: flex; flex-direction: column; }

/* ---------- Assessment results ---------- */
.assess-sel { font: 700 20px/1 var(--font-display); color: var(--info); }
.pct-bar { display: flex; align-items: center; gap: 10px; }
.pct-bar .meter { flex: 1; }
.pct-bar__val { font-weight: 700; min-width: 44px; text-align: right; }
.mresult { padding: 16px; border-radius: 18px; display: grid; gap: 10px; }
.mresult__head, .mresult__foot { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.summary { border-radius: var(--r-lg); padding: 20px 22px; display: flex; gap: 14px; }
.summary__icon { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; flex-shrink: 0; }
.summary--good .summary__icon { color: var(--good); background: var(--good-bg); }
.summary--avg .summary__icon { color: var(--avg); background: var(--avg-bg); }
.summary__title { font-weight: 700; display: block; }
.summary__text { color: var(--ink-2); font-size: 14px; }

/* ---------- Self-assessment comparison ---------- */
.sa { margin-bottom: 0; }
.sa__heading { margin: 0; }
.sa__toggle { width: 100%; display: flex; align-items: center; gap: 12px; padding: 20px 24px; text-align: left; }
.sa__toggle:hover { background: var(--glass-soft); }
.sa__toggle .card__meta { margin-left: auto; }
.sa__chev { display: grid; transition: transform .3s var(--ease); color: var(--muted); }
.sa__toggle[aria-expanded="true"] .sa__chev { transform: rotate(180deg); }
.sa__body { padding: 0 24px 22px; }
.sa__bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 0 14px; font-size: 13px; }
.sa__scroll { overflow-x: auto; border-radius: 16px; border: 1px solid var(--glass-line); background: var(--glass-soft); }
.sa-table { border-collapse: collapse; width: 100%; font-size: 14px; }
.sa-table th, .sa-table td { padding: 12px 14px; text-align: left; vertical-align: top; border-top: 1px solid var(--hairline); }
.sa-table thead th { border-top: 0; font-weight: 600; white-space: nowrap; background: var(--glass-soft); }
.sa-table__q { min-width: 260px; font-weight: 500; }
.sa-table tbody th.sa-table__q { position: sticky; left: 0; background: var(--glass-strong); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.sa-table__num { display: block; }
.sa-table__date { display: block; font-size: 12px; color: var(--muted); font-weight: 500; }
.sa-table__base { margin: 4px 0; }

/* ---------- Calls ---------- */
.call-group { margin-bottom: 18px; }
.call-group__head { display: flex; align-items: center; gap: 10px; padding: 16px 24px; font-weight: 700; font-size: 14px; letter-spacing: .02em; }
.call-group__head--poor { color: var(--poor); }
.call-group__head--info { color: var(--info); }
.call-row { display: flex; align-items: center; gap: 18px; padding: 16px 24px; border-top: 1px solid var(--hairline); flex-wrap: wrap; transition: background .2s; }
.call-row:hover { background: var(--glass-soft); }
.call-row__col { display: flex; flex-direction: column; min-width: 0; }
.call-row__actions { display: flex; gap: 8px; margin-left: auto; }
.when { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }

/* Call screen + guide */
.guide__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.guide__icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: var(--info); background: var(--info-bg); }
.guide__action { margin-left: auto; }
.guide__status { margin: 14px 0 6px; font-size: 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 22px; }
.guide__overview { margin: 8px 0 4px; padding: 16px 18px; border-radius: 16px; background: var(--info-bg); border: 1px solid var(--glass-line); font-size: 15px; line-height: 1.6; }
.guide__body { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; margin-top: 10px; transition: opacity .3s, filter .3s; }
.guide__body.is-busy { opacity: .45; filter: blur(1px); pointer-events: none; }
.guide__body .guide__overview { grid-column: 1 / -1; }
.guide-sec { display: flex; gap: 14px; padding: 16px; border-radius: 18px; background: var(--glass-soft); border: 1px solid var(--hairline); }
.guide-sec__n { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; font-weight: 700; font-size: 13px; color: var(--info); background: var(--info-bg); flex-shrink: 0; }
.guide-sec__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.guide-sec__title { font-weight: 700; }
.guide-sec__obs { font-size: 14px; color: var(--ink); padding: 8px 12px; border-radius: 12px; background: var(--glass-soft); border-left: 3px solid var(--accent); }
.guide-sec__prompt { font-size: 14px; color: var(--ink-2); }
.shimmer-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--info); animation: breathe 1.2s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(.6); opacity: .5; } }
.actions-end { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.notes-meta { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }

/* ---------- Commission ---------- */
.filters { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.kpi { border-radius: var(--r-lg); padding: 22px 24px; display: flex; flex-direction: column; gap: 6px; }
.kpi__label { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.kpi__value { font: 600 34px/1.1 var(--font-display); letter-spacing: -.02em; }
.kpi__sub { font-size: 13px; color: var(--muted); }
.kpi.stat--hero .kpi__label, .kpi.stat--hero .kpi__sub { color: rgba(255, 255, 255, .85); }
.notice { display: flex; gap: 14px; align-items: flex-start; }
.notice__icon { color: var(--avg); flex-shrink: 0; }
.notice__title { font-weight: 600; }
.notice__text { color: var(--muted); font-size: 14px; }
.comm-total { background: var(--glass-soft); font-weight: 700; }
.mcomm { display: grid; gap: 4px; padding: 14px 16px; border-radius: 18px; text-align: left; width: 100%; }
.mcomm__head { display: flex; justify-content: space-between; gap: 10px; font-weight: 700; }
.mcomm__detail { display: grid; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--hairline); }
.mcomm__kv { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }

/* ---------- Resources ---------- */
.res-filters { display: flex; gap: 16px 22px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 18px; }
.res-filters .chips { margin-bottom: 0; }
.res-cat { display: flex; align-items: center; gap: 12px; padding: 18px 24px 10px; border-top: 1px solid var(--hairline); }
.res-cat:first-of-type { border-top: 0; }
.res-cat__name { margin: 0; font: 600 15px/1.2 var(--font-display); }
.res-cat__desc { font-size: 13px; color: var(--muted); }
.res-cat__count { margin-left: auto; }
.res-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; padding: 4px 24px 20px; }
.res-card { display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: 18px; background: var(--glass-soft); border: 1px solid var(--hairline); transition: background .3s, transform .45s var(--spring), box-shadow .3s; }
.res-card:hover { background: var(--glass-hover); transform: translateY(-2px); box-shadow: var(--shadow); }
.res-card__top { display: flex; gap: 12px; align-items: flex-start; }
.res-card__icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; color: var(--info); background: var(--info-bg); }
.res-card__title { font-weight: 700; line-height: 1.3; }
.res-card__desc { font-size: 14px; color: var(--ink-2); }
.res-card__meta { font-size: 12px; color: var(--muted); margin-top: auto; }
.res-card__actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- Feedback ---------- */
.empty { border-radius: var(--r-lg); padding: 48px 24px; text-align: center; color: var(--ink-2); display: grid; justify-items: center; gap: 10px; }
.empty__title { font: 600 18px/1.3 var(--font-display); color: var(--ink); }
.error-box { padding: 18px 20px; border-radius: 18px; color: var(--poor); background: var(--poor-bg); border: 1px solid rgba(180, 35, 63, .3); font-weight: 500; display: flex; gap: 12px; align-items: center; }
.form-error { color: var(--poor); font-size: 14px; font-weight: 600; }
.info-box { padding: 12px 16px; border-radius: 14px; background: var(--info-bg); color: var(--ink); font-size: 14px; }
.sample-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; color: var(--avg); background: var(--avg-bg); }
.sample-banner { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 16px; margin-bottom: 18px; font-size: 14px; color: var(--ink-2); background: var(--glass); border: 1px dashed rgba(148, 96, 0, .5); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); flex-wrap: wrap; }

.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 90; display: flex; align-items: center; gap: 10px;
  padding: 12px 20px 12px 14px; border-radius: 999px; font-weight: 600; font-size: 14px; color: var(--ink); background: var(--glass-strong);
  animation: toast-in .4s var(--ease) both; max-width: calc(100vw - 32px);
}
.toast__icon { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: var(--on-status); background: var(--good); flex-shrink: 0; }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 14px) scale(.96); } }

/* ---------- Sign in ---------- */
.login { min-height: 100vh; max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1fr minmax(380px, 460px); align-items: center; gap: 64px; padding: 32px clamp(20px, 5vw, 64px); }
.login__story { color: var(--ink); max-width: 520px; }
.login__brand-mark { font: 500 16px/1 Ubuntu, var(--font-display); letter-spacing: 4px; color: var(--logo); }
.login__brand-title { font: 500 clamp(36px, 4vw, 56px)/1.1 Ubuntu, var(--font-display); margin-top: 16px; color: var(--logo); }
.login__brand-text { font-size: 20px; line-height: 1.5; margin-top: 20px; max-width: 440px; color: var(--ink-2); }
.login__card { border-radius: 24px; padding: 34px 32px 26px; background: var(--glass-strong); }
.login__hello { font: 500 clamp(56px, 7vw, 88px)/1 Ubuntu, var(--font-display); color: var(--logo); letter-spacing: 2px; text-align: center; margin-bottom: 14px; }
.login__card .login__title, .login__card .login__sub { text-align: center; }
/* Oscar's card carries a line of help text between the heading and the first
   field - "Use your Zing account email and password." - and we kept our own
   wording, which has none. Without it the Email field sat straight under the
   heading. This is the space that line occupied, measured in his build: its 8px
   top margin, its 21.75px line box and its 26px bottom margin, so the gap to the
   field is the 55.75px his is. */
.login__title { font: 700 24px/1.2 var(--font-display); letter-spacing: -.02em; margin: 0 0 calc(8px + 21.75px + 26px); }
.login__sub { color: var(--ink-2); margin: 8px 0 26px; }
.login__fields { display: grid; gap: 14px; }
.pill-input { display: flex; align-items: center; gap: 12px; height: 54px; padding: 0 8px 0 18px; border-radius: 18px; background: var(--field); border: 1px solid var(--glass-line); color: var(--muted); transition: box-shadow .2s; }
.pill-input:focus-within { box-shadow: 0 0 0 3px var(--ring); color: var(--ink); }
.pill-input input { flex: 1; border: 0; outline: none; background: none; font-size: 16px; color: var(--ink); min-width: 0; }
.pill-input input::placeholder { color: var(--muted); }
.login__row { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 14px; }
.remember { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; color: var(--ink-2); }
.switch { width: 40px; height: 24px; border-radius: 12px; background: var(--hairline); position: relative; transition: background .25s; border: 1px solid var(--glass-line); }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); transition: transform .3s var(--ease); }
[aria-checked="true"] .switch { background: var(--btn); }
[aria-checked="true"] .switch::after { transform: translateX(16px); }
.login__foot { display: flex; justify-content: space-between; gap: 10px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--hairline); font-size: 13px; color: var(--muted); }

/* ---------- Liquid glass ----------
   Slow colour fields drift behind the glass; panels catch light on their edges
   and a soft highlight follows the pointer (js/app.js sets --mx / --my). */
/* The background photo drifts very slowly; a veil keeps text readable.
   Photo: "Sunrise over a misty mountain range" by Pascal Debrunner,
   Unsplash License (unsplash.com/@debrupas). */
.backdrop__img { position: absolute; inset: -3%; background: var(--photo) center 40% / cover no-repeat; animation: drift 70s ease-in-out infinite alternate; will-change: transform; }
.backdrop__veil { position: absolute; inset: 0; background: var(--veil); }
@keyframes drift { from { transform: scale(1.02); } to { transform: scale(1.08) translate3d(-1.5%, -1%, 0); } }
/* Oscar's dark veil is .72 / .50 / .70. His design sits on a flat dark gradient;
   ours sits on a sunrise photo, and at .50 the bright band came through strongly
   enough to put most small text under AA - the page sub-line at 3.0:1 and muted
   text at 1.7:1. Lifting the middle of the gradient fixes those at source, and
   the photo still reads underneath. */
:root { --photo: url(../img/sunrise-fog.jpg); }
@media (max-width: 900px) { :root { --photo: url(../img/sunrise-fog-small.jpg); } }

/* Light on the edge: a 1px gradient rim, bright top-left, fading round the panel. */
.card, .stat, .login__card, .sidebar, .tabbar, .banner { isolation: isolate; }
.card::after, .stat::after, .login__card::after, .sidebar::after, .tabbar::after, .banner::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 1;
  background: linear-gradient(140deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .15) 35%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, .45));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
/* Dark softens the rim, but only on these three: Oscar leaves the sign-in card,
   the tab bar and the banner at full strength in both themes. */
.card::after, .stat::after, .sidebar::after { opacity: var(--rim); }

/* Pointer highlight, replacing the fixed sheen. */
.card::before, .stat::before, .login__card::before {
  background: radial-gradient(420px circle at var(--mx, 20%) var(--my, -20%), rgba(255, 255, 255, .55), transparent 45%);
  opacity: 0; transition: opacity .4s;
}
.card:hover::before, .stat:hover::before { opacity: var(--glow); }
/* The sign-in card is missing from Oscar's dark dimming list too, so his keeps
   the full .6 highlight there. Flattening all three onto one token made ours
   four times dimmer than his on that screen, measured side by side. Dark gets
   its own value rather than his .6 because at .6 the card reaches rgb(101,106,123)
   under the pointer and three of the four text colours on it drop below AA:
   --ink-2 3.1:1, --link 2.5:1, --muted 2.3:1. At .25 the dimmest of them is
   4.5:1 and the highlight is still twice what it was. Light keeps his .6 - a
   white glow on a pale panel only lifts the contrast of the dark text on it,
   measured at worst 7.2:1. */
.login__card:hover::before { opacity: var(--glow-login); }

.stat--hero { background: linear-gradient(135deg, rgba(11, 50, 117, .92), rgba(30, 74, 184, .85) 60%, rgba(47, 169, 194, .8)); }
a.stat--hero:hover { background: linear-gradient(135deg, rgba(14, 58, 133, .95), rgba(36, 84, 200, .9) 60%, rgba(52, 180, 205, .85)); }

/* Springier lifts. */
.stat, .commit-tile, .mcard { transition: transform .45s var(--spring), box-shadow .3s, background .3s; }
a.stat:hover { transform: translateY(-3px) scale(1.01); }

/* ---------- Responsive ---------- */
.mob-only { display: none !important; }
@media (max-width: 1100px) {
  .grid--stats { grid-template-columns: 1fr 1fr; }
  .grid--stats > :first-child { grid-column: 1 / -1; }
  .grid--dash { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .desk-only { display: none !important; }
  .mob-only { display: revert !important; }
  .mlist.mob-only { display: grid !important; }
  .shell { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .tabbar { display: flex; }
  .topbar, .topbar.mob-only { display: flex !important; align-items: center; gap: 10px; padding: 14px 16px 0; }
  .topbar .sidebar__brand { padding: 0; margin-right: auto; }
  .topbar .sidebar__logo { font-size: 24px; }
  .topbar .sidebar__tag { font-size: 9px; margin-top: 4px; }
  .topbar__btn { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; color: var(--ink); }
  .main { padding: 18px 16px calc(110px + env(safe-area-inset-bottom)); }
  .page-head { align-items: stretch; flex-direction: column; }
  .search { min-width: 0; width: 100%; }
  .grid--stats { grid-template-columns: 1fr 1fr; gap: 12px; }
  .stat { min-height: 128px; padding: 18px; }
  .stat__value { font-size: 38px; }
  .commit { grid-template-columns: 1fr; justify-items: center; }
  .commit__tiles { width: 100%; }
  .tiles { grid-template-columns: 1fr; }
  .chips { flex-wrap: nowrap; overflow-x: auto; margin-left: -16px; margin-right: -16px; padding: 2px 16px 6px; scrollbar-width: none; }
  .chips::-webkit-scrollbar { display: none; }
  .card { padding: 20px; }
  .call-row { padding: 16px 20px; }
  .call-row__actions { margin-left: 0; width: 100%; }
  .call-row__actions .btn { flex: 1; }
  .login { grid-template-columns: 1fr; padding: 24px 16px; align-content: start; gap: 24px; }
  .login__story { display: none; }
  .login__hello { font-size: 56px; }
  .login__card { padding: 28px 22px 22px; border-radius: 28px; }
  .g-sessions { grid-template-columns: 1fr 1fr 1fr; }
  .g-sessions .hide-sm { display: none; }
  .res-grid { padding: 4px 16px 16px; }
  /* The type chips scroll sideways like every other chip row. They sit inside a
     flex item here, so that item has to be allowed to shrink or the row sets the
     width of the page instead of scrolling inside it. */
  .res-filters { display: grid; gap: 16px; }
  .res-filters .field, .res-filters .chips { min-width: 0; }
  .toast { bottom: calc(100px + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  .backdrop__img { animation: none !important; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
/* Where the browser cannot blur, the panels go nearly solid so nothing is unreadable. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --glass: var(--glass-solid); --glass-strong: var(--glass-strong-solid); }
}
/* Paper is white whatever the screen theme is, so print flips back to dark ink. */
@media print {
  :root { --ink: #10182C; --ink-2: #3A4258; --muted: #5A6276; --hairline: rgba(16, 24, 44, .18); }
  .backdrop, .sidebar, .tabbar, .topbar, .toast { display: none !important; }
  .shell { display: block; }
  body { color: #10182C; }
  .card, .stat { box-shadow: none; border: 1px solid #ccc; background: #fff; color: #10182C; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .card::after, .stat::after, .card::before, .stat::before { display: none; }
}