/* ==========================================================================
   Stefanini Wellbeing Challenge — design system
   Layout and spacing follow the Wellington handoff; the palette is the
   Stefanini brandbook. The admin can override the coloured tokens at runtime
   through the inline :root block the layouts emit.
   ========================================================================== */

:root {
  /* Stefanini brand palette. The values the superadmin can change are injected
     as a second :root block by the layouts, which overrides the ones here.
     PMS references come from the Stefanini brandbook. */

  /* primary ramp, built around PMS 2387 C */
  --brand-50:  #E6EFFA;
  --brand-100: #CBDFF6;
  --brand-200: #9CC2EE;
  --brand-300: #6BA3E4;
  --brand-400: #2E82DA;
  --brand-500: #0762C8;  /* PMS 2387 C */
  --brand-600: #0551A6;
  --brand-700: #171CBF;  /* PMS 2746 C — Spotlight Blue */
  --brand-800: #0B1641;  /* PMS 2768 C */
  --brand-900: #041E42;  /* PMS 282 C — Midnight Blue */

  /* the brandbook gradient: a secondary blue into midnight */
  --gradient-from: #006BD3;  /* PMS P 106-7 C */
  --magenta: #CE0058;        /* Rubine Red C — points and highlights */
  --magenta-deep: #0B1641;   /* PMS 2768 C — gradient end */

  /* challenge accents, each a brandbook secondary */
  --gym: #FF6720;            /* PMS 165 C */
  --gym-tint: #FFEDE4;
  --gym-text: #8C3912;
  --gym-soft: #FFC9AC;
  --meditation: #4C12A1;     /* PMS 2091 C */
  --meditation-tint: #E9E3F4;
  --meditation-text: #33058D;  /* PMS 2371 C */
  --meditation-soft: #CDBBEB;
  --water: #009CDE;          /* PMS 2925 C */
  --water-tint: #E0F3FB;
  --water-text: #00567A;
  --water-deep: #006590;
  --water-soft: #A8E0F5;

  /* neutrals */
  --white: #FFFFFF;
  --surface: #F6F8FA;
  --surface-muted: #EEF0F3;
  --line: #E1E4EA;
  --line-strong: #D9DEE5;
  --ink-faint: #9BA4B0;
  --ink-subtle: #8593A3;
  --ink-soft: #6A7682;
  --ink-muted: #505862;
  --ink: #041E42;            /* PMS 282 C — Midnight Blue */

  /* semantic */
  --ok: #00C19F;             /* PMS 2240 C */
  --ok-tint: #E0F8F4;
  --ok-text: #006050;
  --warn: #FFAD00;           /* PMS 2010 C */
  --danger: #F4364C;         /* PMS 1787 C — fills */
  --danger-text: #C32B3D;    /* darkened so it clears 4.5:1 as body text */
  --danger-tint: #FFEBED;
  --lime: #00C19F;           /* PMS 2240 C */
  --green: #00C19F;
  --gold: #FFAD00;           /* PMS 2010 C */
  --pink: #CE0058;           /* Rubine Red C */

  /* radii */
  --r-xs: 4px;  --r-sm: 8px;  --r-md: 12px; --r-lg: 16px;
  --r-xl: 20px; --r-2xl: 22px; --r-pill: 40px; --r-full: 999px;

  /* shadows */
  --sh-sm: 0 2px 4px rgba(0,0,0,.04);
  --sh-md: 0 4px 12px rgba(0,0,0,.06);
  --sh-lg: 0 12px 32px rgba(0,0,0,.08);
  --sh-xl: 0 24px 48px rgba(0,0,0,.12);
  --sh-brand: 0 12px 32px rgba(7,98,200,.30);

  --ease: cubic-bezier(.22,1,.36,1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
img { max-width: 100%; }

/* ---------- typography ---------------------------------------------------- */

.display   { font: 800 40px/1.12 Inter, sans-serif; letter-spacing: -.02em; }
.h1        { font: 800 28px/1.2 Inter, sans-serif; }
.h2        { font: 800 21px/1.3 Inter, sans-serif; }
.h3        { font: 700 17px/1.35 Inter, sans-serif; }
.body      { font: 400 15px/1.6 Inter, sans-serif; }
.body-sm   { font: 400 13px/1.6 Inter, sans-serif; }
.overline  { font: 600 11px/1 Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.muted     { color: var(--ink-soft); }
.subtle    { color: var(--ink-subtle); }

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

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 22px; border: 0; border-radius: var(--r-pill);
  font: 600 14px/1 Inter, sans-serif; cursor: pointer;
  transition: transform 120ms var(--ease), background 200ms var(--ease), box-shadow 200ms var(--ease);
}
.btn:active { transform: scale(.98); }
.btn--block { width: 100%; }
.btn--lg { height: 56px; font-size: 15px; }
.btn--sm { height: 36px; padding: 0 16px; font-size: 13px; }

.btn--primary { background: var(--brand-500); color: #fff; box-shadow: var(--sh-brand); }
.btn--primary:hover { background: var(--brand-400); }
.btn--ghost { background: #fff; color: var(--ink); border: 1.5px solid var(--line-strong); }
.btn--ghost:hover { border-color: var(--brand-300); }
.btn--done { background: var(--ok-tint); color: var(--ok-text); cursor: default; box-shadow: none; }
.btn--white { background: #fff; color: var(--magenta-deep); box-shadow: var(--sh-md); }
.btn--danger { background: #fff; color: var(--danger-text); border: 1.5px solid #F8C4CB; }
.btn--danger:hover { background: var(--danger-tint); }
.btn:disabled, .btn--disabled { background: var(--surface-muted); color: var(--ink-faint); box-shadow: none; cursor: not-allowed; }

/* ---------- form controls ------------------------------------------------- */

.field { display: block; margin-bottom: 16px; }
.label { display: block; font: 600 13px/1 Inter, sans-serif; color: var(--ink-muted); margin-bottom: 8px; }

.input, .select, .textarea {
  width: 100%; height: 48px; padding: 0 16px;
  border: 1.5px solid var(--line); border-radius: var(--r-md);
  font: 400 15px/1 Inter, sans-serif; color: var(--ink); background: #fff;
  transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.textarea { height: auto; padding: 14px 16px; line-height: 1.6; resize: vertical; min-height: 120px; }
.input:focus, .select:focus, .textarea:focus {
  outline: 0; border-color: var(--brand-500); box-shadow: 0 0 0 4px rgba(7,98,200,.18);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-faint); }
.input--sm { height: 40px; font-size: 14px; }
.select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238593A3' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px;
}
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.error { color: var(--danger-text); font: 400 13px/1.5 Inter, sans-serif; margin-top: 6px; }
.alert { padding: 12px 16px; border-radius: var(--r-md); font: 400 14px/1.5 Inter, sans-serif; margin-bottom: 18px; }
.alert--error { background: var(--danger-tint); color: var(--danger-text); }
.alert--ok { background: var(--ok-tint); color: var(--ok-text); }

.checkbox { display: flex; align-items: flex-start; gap: 10px; font: 400 13px/1.5 Inter, sans-serif; color: var(--ink-soft); }
.checkbox input { accent-color: var(--brand-500); width: 17px; height: 17px; margin-top: 1px; flex: none; }

/* password strength meter */
.pw-track { height: 4px; border-radius: var(--r-full); background: var(--surface-muted); overflow: hidden; margin-top: 8px; }
.pw-fill { height: 100%; width: 0; border-radius: var(--r-full); transition: width 200ms var(--ease), background 200ms var(--ease); }
.pw-label { font: 600 11px/1 Inter, sans-serif; margin-top: 6px; display: block; }

/* ---------- auth split layout --------------------------------------------- */

.auth { display: flex; min-height: 100vh; }
.auth__aside {
  flex: 0 0 42%; min-width: 340px; position: relative; overflow: hidden;
  /* The inset grows with the screen so the copy never hugs the edge, but stays
     modest: a percentage here resolves against the viewport, not this panel,
     and the panel is only 42% of it — 4.5% of the viewport lands at roughly a
     tenth of the panel at every size. */
  padding: 48px clamp(28px, 4.5%, 104px);
  color: #fff; display: flex; flex-direction: column; justify-content: space-between;
  background: var(--magenta-deep);
}
.auth__aside > * { position: relative; z-index: 3; }

/* Layers, bottom to top: photograph, brand gradient, colour orbs, content.
   Each rule sits after the one above so the absolute positioning is not
   overridden back into the flex flow. */
.auth__aside > .auth__photo {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  /* the panel is tall and narrow, so bias the crop towards the upper third
     where the subject of a landscape photograph usually sits */
  background-position: center 28%; background-size: cover; background-repeat: no-repeat;
}
.auth__aside > .auth__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(circle at 22% 12%, var(--gradient-from) 0%, var(--magenta-deep) 78%);
}
/* With a photograph behind it the gradient becomes a wash instead of a fill.
   A plain alpha wash rather than multiply: the brand gradient already runs into
   midnight, and multiplying it over a dark photograph turned the panel muddy.
   The shading on the image below does the legibility work. */
.auth__aside.has-photo > .auth__scrim { opacity: .70; }
/* Two shades over the photograph: one from the left, where the copy column
   sits, and one up from the bottom for the avatar row. The right of the frame
   stays clear so the picture is still a picture. */
.auth__aside.has-photo > .auth__photo::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(12,2,34,.88) 0%, rgba(12,2,34,.62) 38%, rgba(12,2,34,.12) 78%),
    linear-gradient(180deg, rgba(12,2,34,.45) 0%, rgba(12,2,34,0) 28%, rgba(12,2,34,.6) 100%);
}
.auth__aside > .auth__orb { position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; z-index: 2; }
.auth__orb--1 { width: 280px; height: 280px; background: var(--brand-400); opacity: .42; top: -60px; right: -60px; }
.auth__orb--2 { width: 240px; height: 240px; background: var(--water); opacity: .30; bottom: -60px; left: -50px; }

.auth__main { flex: 1; display: flex; align-items: center; justify-content: center; background: #fff; padding: 40px; }
.auth__card { width: 100%; max-width: 420px; }

.brandmark { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brandmark img { width: 38px; height: 32px; object-fit: contain; }
/* The platform name carries the brand on its own. Until a logo is uploaded in
   Appearance there is no placeholder mark beside it. */
.brandmark__word {
  font: 700 15px/1.3 Inter, sans-serif; letter-spacing: -.01em;
  display: block; min-width: 0; text-wrap: balance;
}
.brandmark__word small {
  display: block; margin-top: 2px;
  font: 600 11px/1 Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase;
  opacity: .62;
}

/* The three challenges on the auth panel, as small glass cards over the photo. */
/* minmax(0,1fr) keeps the three columns equal instead of letting the longest
   name widen its own track */
.habit-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 420px; }
.habit-card {
  display: flex; flex-direction: column; gap: 11px;
  padding: 14px; border-radius: 14px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.17);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: background 200ms var(--ease), border-color 200ms var(--ease);
}
.habit-card:hover { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.28); }
.habit-card__icon {
  width: 34px; height: 34px; border-radius: 10px; flex: none;
  display: flex; align-items: center; justify-content: center;
}
.habit-card__icon svg { width: 18px; height: 18px; }
.habit-card__name { font: 600 13px/1.3 Inter, sans-serif; color: #fff; overflow-wrap: anywhere; }

/* Three columns need room for the longest challenge name. Once the panel is
   too narrow for that, fall back to full-width rows rather than squeezing. */
@media (max-width: 980px) {
  .habit-list { grid-template-columns: 1fr; max-width: 340px; }
  .habit-card { flex-direction: row; align-items: center; gap: 12px; padding: 12px 14px; }
}

.avatar-stack { display: flex; }
.avatar-stack img { width: 32px; height: 32px; border-radius: var(--r-full); border: 2px solid var(--magenta-deep); margin-left: -10px; }
.avatar-stack img:first-child { margin-left: 0; }

.state-badge {
  width: 76px; height: 76px; border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center; margin-bottom: 22px;
}
.state-badge--brand { background: var(--brand-50); color: var(--brand-500); }
.state-badge--ok { background: var(--ok-tint); color: var(--ok); }
.state-badge--error { background: var(--danger-tint); color: var(--danger); }

/* ---------- app shell ----------------------------------------------------- */

.shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 248px; flex: none; background: #fff; border-right: 1px solid var(--line);
  padding: 22px 16px 18px; display: flex; flex-direction: column; gap: 22px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.sidebar__section { font: 600 11px/1 Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); padding: 0 12px; margin-bottom: 8px; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav__item {
  display: flex; align-items: center; gap: 11px; height: 42px; padding: 0 12px;
  border-radius: var(--r-md); border: 0; background: transparent; color: var(--ink-muted);
  font: 600 14px/1 Inter, sans-serif; cursor: pointer; text-align: left; width: 100%;
  transition: background 200ms var(--ease), color 200ms var(--ease);
}
.nav__item:hover { background: var(--surface); }
.nav__item.is-active { background: var(--brand-50); color: var(--brand-700); }
.nav__item svg { width: 19px; height: 19px; flex: none; }
.nav__badge {
  margin-left: auto; display: inline-flex; align-items: center; height: 20px; padding: 0 8px;
  border-radius: var(--r-pill); background: var(--pink); color: #fff; font: 700 11px/1 Inter, sans-serif;
}

/* The three challenges sit apart from the rest of the nav: their own panel,
   each row carrying its challenge accent so they read as the main event. */
.nav--challenges {
  gap: 4px; padding: 6px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--line);
}
.nav__item--challenge { height: 44px; color: var(--ink); }
.nav__item--challenge .nav__chip {
  width: 28px; height: 28px; border-radius: 8px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--nav-accent-tint); color: var(--nav-accent);
  transition: background 200ms var(--ease), color 200ms var(--ease);
}
.nav__item--challenge .nav__chip svg { width: 17px; height: 17px; }
.nav__item--challenge:hover { background: #fff; }
.nav__item--challenge.is-active {
  background: #fff; color: var(--nav-accent-text);
  box-shadow: 0 1px 3px rgba(4,30,66,.10); border-left: 3px solid var(--nav-accent); padding-left: 9px;
}
.nav__item--challenge.is-active .nav__chip { background: var(--nav-accent); color: #fff; }

.role-switch { display: flex; padding: 3px; gap: 3px; border: 1px solid var(--line); border-radius: var(--r-pill); margin-top: auto; }
.role-switch a {
  flex: 1; text-align: center; padding: 8px 4px; border-radius: var(--r-pill);
  font: 600 12px/1 Inter, sans-serif; color: var(--ink-muted); transition: all 200ms var(--ease);
}
.role-switch a.is-active { background: var(--ink); color: #fff; }

.user-chip { display: flex; align-items: center; gap: 10px; padding: 10px 8px; border-radius: var(--r-md); }
.user-chip img { width: 34px; height: 34px; border-radius: var(--r-full); flex: none; object-fit: cover; }
.user-chip__name { font: 600 13px/1.2 Inter, sans-serif; }
.user-chip__meta { font: 400 11px/1.3 Inter, sans-serif; color: var(--ink-subtle); margin-top: 2px; }

.content { flex: 1; min-width: 0; background: var(--surface); padding: 26px 28px 40px; }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 26px; flex-wrap: wrap; }
.page-head h1 { font: 800 21px/1.25 Inter, sans-serif; margin: 0; }
.page-head p { font: 400 13px/1.5 Inter, sans-serif; color: var(--ink-subtle); margin: 4px 0 0; }
.page-head__chips { display: flex; gap: 8px; align-items: center; flex: none; }

.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px;
  border-radius: var(--r-pill); font: 600 12px/1 Inter, sans-serif;
  background: var(--surface-muted); color: var(--ink-muted);
}
.chip--brand { background: var(--brand-50); color: var(--brand-700); }

.filter-chip {
  display: inline-flex; align-items: center; height: 36px; padding: 0 16px;
  border-radius: var(--r-pill); border: 1.5px solid var(--line); background: #fff;
  color: var(--ink-muted); font: 600 13px/1 Inter, sans-serif; cursor: pointer;
  transition: all 200ms var(--ease);
}
.filter-chip.is-active { background: var(--brand-500); border-color: var(--brand-500); color: #fff; }
.chip-row { display: flex; gap: 8px; flex-wrap: wrap; }

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

.card { background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--sh-md); }
.card--flat { box-shadow: none; }
.card__body { padding: 24px; }
.card__title { font: 700 15px/1.3 Inter, sans-serif; margin: 0 0 4px; }

.grid { display: grid; gap: 18px; }
.grid--challenges { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.grid--stats { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.grid--cards { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.grid--split { grid-template-columns: 1.35fr 1fr; align-items: start; }
.grid--split-wide { grid-template-columns: 1.3fr 1fr; align-items: stretch; }
.grid--halves { grid-template-columns: 1fr 1fr; align-items: start; }
.stack { display: flex; flex-direction: column; gap: 20px; }

.stat-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; }
.stat-card__label { font: 600 11px/1 Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.stat-card__value { font: 800 26px/1.1 Inter, sans-serif; margin-top: 10px; }
.stat-card__note { font: 400 12px/1.4 Inter, sans-serif; color: var(--ink-subtle); margin-top: 6px; }

.hero {
  position: relative; overflow: hidden; border-radius: var(--r-xl); color: #fff;
  padding: 26px 28px; display: flex; align-items: center; justify-content: space-between; gap: 26px;
  background: radial-gradient(circle at 85% 12%, var(--gradient-from) 0%, var(--magenta-deep) 68%);
}
.hero > * { position: relative; z-index: 1; }
/* Kept after the rule above so the orb stays out of the flex flow. */
.hero > .hero__orb { position: absolute; width: 260px; height: 260px; border-radius: 50%; background: var(--brand-400); opacity: .34; filter: blur(90px); top: -80px; right: 10%; z-index: 0; pointer-events: none; }
.hero__kicker { font: 600 11px/1 Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; opacity: .72; }
.hero__title { font: 800 26px/1.2 Inter, sans-serif; margin: 10px 0 8px; }
.hero__sub { font: 400 14px/1.6 Inter, sans-serif; color: rgba(255,255,255,.82); max-width: 460px; margin: 0 0 18px; }
.hero__aside { width: 210px; flex: none; }

.progress-track { height: 8px; border-radius: var(--r-full); background: var(--surface-muted); overflow: hidden; }
.progress-track--light { background: rgba(255,255,255,.2); }
.progress-fill { height: 100%; border-radius: var(--r-full); transition: width 320ms var(--ease); }
.progress-fill--rainbow { background: linear-gradient(90deg, var(--lime), var(--water)); }

.challenge-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 4px 12px rgba(0,0,0,.04); overflow: hidden; display: flex; flex-direction: column; }
.challenge-card__cover { position: relative; height: 142px; background: var(--surface-muted) center/cover no-repeat; }
.challenge-card__cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(36,39,55,0) 30%, rgba(36,39,55,.72)); }
.challenge-card__cover h3 { position: absolute; left: 16px; bottom: 12px; z-index: 1; margin: 0; font: 700 16px/1.2 Inter, sans-serif; color: #fff; }
.challenge-card__pill { position: absolute; right: 12px; top: 12px; z-index: 1; background: rgba(255,255,255,.92); color: var(--ink); border-radius: var(--r-pill); padding: 5px 11px; font: 600 11px/1 Inter, sans-serif; }
.challenge-card__body { padding: 18px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.challenge-card__status { font: 400 13px/1.4 Inter, sans-serif; color: var(--ink-soft); }

.status-pill { display: inline-flex; align-items: center; height: 26px; padding: 0 12px; border-radius: var(--r-pill); font: 600 12px/1 Inter, sans-serif; }
.status-pill--done { background: var(--ok-tint); color: var(--ok-text); }
.status-pill--open { background: var(--gym-tint); color: var(--gym-text); }

.topic-pill { display: inline-flex; align-items: center; height: 24px; padding: 0 11px; border-radius: var(--r-pill); font: 600 11px/1 Inter, sans-serif; }

/* ---------- card library --------------------------------------------------- */

/* Thirty distinct cards per challenge, so the day number is the wayfinding
   element: it sits on the cover and is the first thing you scan. */
.lib-card {
  background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden;
  display: flex; flex-direction: column; box-shadow: 0 4px 12px rgba(0,0,0,.04);
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease);
}
.lib-card:hover { transform: translateY(-2px); box-shadow: var(--sh-lg); }
.lib-card.is-today { border-color: var(--card-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--card-accent) 18%, transparent); }

.lib-card__cover {
  position: relative; height: 142px; flex: none;
  background: var(--surface-muted) center/cover no-repeat;
}
.lib-card__cover::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(4,30,66,.45) 0%, rgba(4,30,66,0) 46%);
}
.lib-card__day {
  position: absolute; top: 10px; left: 12px; z-index: 1;
  display: inline-flex; align-items: center; height: 24px; padding: 0 10px;
  border-radius: var(--r-pill); background: rgba(255,255,255,.94); color: var(--ink);
  font: 700 11px/1 Inter, sans-serif; letter-spacing: .02em;
}
.lib-card__now {
  position: absolute; top: 10px; right: 12px; z-index: 1;
  display: inline-flex; align-items: center; height: 24px; padding: 0 10px;
  border-radius: var(--r-pill); background: var(--card-accent); color: #fff;
  font: 700 11px/1 Inter, sans-serif;
}

.lib-card__body { padding: 18px; display: flex; flex-direction: column; gap: 0; flex: 1; }
.lib-card__title { font: 700 15px/1.35 Inter, sans-serif; margin: 12px 0 8px; }
.lib-card__text {
  font: 400 13px/1.55 Inter, sans-serif; color: var(--ink-soft); margin: 0;
  /* keep every card the same height so the grid reads as rows, not a jumble */
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(5 * 1.55em);
}
.lib-card__meta { font: 600 11px/1 Inter, sans-serif; color: var(--ink-faint); margin-top: auto; padding-top: 12px; }

.info-card { display: flex; gap: 18px; align-items: stretch; }
.info-card__img { width: 200px; flex: none; border-radius: var(--r-lg); background: var(--surface-muted) center/cover no-repeat; min-height: 178px; }

/* A stacked card that fills its grid cell, so it lines up with the taller card
   beside it: the picture absorbs the spare height, the copy keeps its size. */
.card--fill { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.card--fill .card__body { flex: none; }
.info-card__cover {
  flex: 1 1 auto;
  background: var(--surface-muted) center/cover no-repeat;
}

/* banner used at the top of a challenge screen */
.banner { position: relative; height: 170px; border-radius: var(--r-xl); overflow: hidden; display: flex; align-items: center; padding: 0 30px; color: #fff; background: var(--ink) center/cover no-repeat; }
.banner::before { content: ''; position: absolute; inset: 0; }
.banner > * { position: relative; z-index: 1; }
.banner--gym::before { background: linear-gradient(90deg, rgba(36,39,55,.86) 12%, rgba(36,39,55,.25)); }
.banner--meditation::before { background: linear-gradient(90deg, rgba(46,34,138,.88) 12%, rgba(46,34,138,.3)); }
.banner--water::before { background: linear-gradient(90deg, rgba(0,60,74,.86) 12%, rgba(0,105,123,.3)); }
.banner__pill { display: inline-flex; height: 26px; align-items: center; padding: 0 13px; border-radius: var(--r-pill); font: 700 12px/1 Inter, sans-serif; }
.banner h1 { font: 800 26px/1.2 Inter, sans-serif; margin: 12px 0 6px; }
.banner p { font: 400 14px/1.5 Inter, sans-serif; color: rgba(255,255,255,.84); margin: 0; }

/* ---------- video ---------------------------------------------------------- */

.thumb { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--ink) center/cover no-repeat; cursor: pointer; }
.thumb--lg { height: 210px; }
.thumb--md { height: 160px; }
.thumb__play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 64px; height: 64px; border-radius: var(--r-full); background: rgba(255,255,255,.94);
  display: flex; align-items: center; justify-content: center; border: 0; cursor: pointer;
  transition: transform 200ms var(--ease);
}
.thumb--md .thumb__play { width: 52px; height: 52px; }
.thumb:hover .thumb__play { transform: translate(-50%,-50%) scale(1.06); }
.thumb__duration { position: absolute; right: 12px; bottom: 12px; background: rgba(20,22,29,.78); color: #fff; border-radius: var(--r-pill); padding: 5px 10px; font: 600 11px/1 Inter, sans-serif; }
/* Semi-transparent so the poster image still reads behind the empty state. */
.thumb__empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px; color: rgba(255,255,255,.82); font: 600 13px/1 Inter, sans-serif; background: rgba(28,31,42,.74); }

/* Above the drawer (80) and the phone bars (60), so the player is never
   overlapped by the tab bar. */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(16,18,26,.72); z-index: 90;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  animation: wnFade 200ms var(--ease);
}
.modal { width: 100%; max-width: 640px; background: #14161D; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-xl); animation: wnPop 240ms var(--ease); }
.modal__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; color: #fff; }
.modal__head h3 { margin: 0; font: 700 15px/1.3 Inter, sans-serif; }
.modal__close { background: transparent; border: 0; color: rgba(255,255,255,.66); cursor: pointer; font-size: 22px; line-height: 1; }
.modal video { width: 100%; display: block; background: #000; max-height: 60vh; }
.modal__bar { height: 6px; background: rgba(255,255,255,.14); }
.modal__bar span { display: block; height: 100%; width: 0; background: var(--lime); transition: width 240ms linear; }
.modal__foot { padding: 16px 20px 20px; display: flex; align-items: center; justify-content: space-between; gap: 14px; color: rgba(255,255,255,.72); font: 400 13px/1.5 Inter, sans-serif; }
.modal__done { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 40px 20px; color: #fff; }
.modal__done svg { width: 64px; height: 64px; color: var(--green); }

/* ---------- day grid ------------------------------------------------------- */

.day-grid { display: grid; grid-template-columns: repeat(15, 1fr); gap: 7px; }
.day-cell {
  display: flex; align-items: center; justify-content: center; height: 34px;
  border-radius: 9px; font: 600 12px/1 Inter, sans-serif;
  background: var(--surface-muted); color: var(--ink-faint); border: 1.5px solid transparent;
}
.legend { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 18px; font: 400 12px/1 Inter, sans-serif; color: var(--ink-subtle); }
.legend span { display: inline-flex; align-items: center; gap: 7px; }
.legend i { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }

/* heat strip on /progress */
.heat-row { display: grid; grid-template-columns: repeat(30, 1fr); gap: 4px; }
.heat-cell { height: 22px; border-radius: 5px; background: #F1F3F6; }

/* ---------- leaderboard ---------------------------------------------------- */

.medal { width: 26px; height: 26px; border-radius: var(--r-full); display: flex; align-items: center; justify-content: center; font: 700 12px/1 Inter, sans-serif; flex: none; background: var(--surface-muted); color: var(--ink-muted); }
.medal--1 { background: var(--gold); color: var(--ink); }
.medal--2 { background: var(--line-strong); color: var(--ink); }
.medal--3 { background: var(--gym); color: var(--ink); }

.board-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-md); }
.board-row.is-you { background: var(--brand-50); }
.board-row img { width: 34px; height: 34px; border-radius: var(--r-full); object-fit: cover; }
.board-row__name { font: 600 14px/1.2 Inter, sans-serif; }
.board-row__meta { font: 400 12px/1.2 Inter, sans-serif; color: var(--ink-subtle); margin-top: 2px; }
.board-row__pts { margin-left: auto; font: 800 15px/1 Inter, sans-serif; color: var(--magenta); }

.you-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: var(--r-pill); background: var(--brand-500); color: #fff; font: 700 10px/1 Inter, sans-serif; }

.podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.podium__card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; text-align: center; }
.podium__card img { width: 56px; height: 56px; border-radius: var(--r-full); object-fit: cover; margin: 10px auto 8px; display: block; }

/* ---------- tables --------------------------------------------------------- */

.table { width: 100%; border-collapse: collapse; }
.table th {
  text-align: left; padding: 11px 20px; background: var(--surface);
  font: 600 11px/1 Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-subtle);
  white-space: nowrap;
}
.table td { padding: 12px 20px; border-top: 1px solid #F1F3F6; font: 400 14px/1.4 Inter, sans-serif; vertical-align: middle; }
.table tr.is-you td { background: var(--brand-50); }
.table-wrap { overflow-x: auto; border-radius: var(--r-lg); border: 1px solid var(--line); background: #fff; }

.person { display: flex; align-items: center; gap: 11px; }
.person img { width: 34px; height: 34px; border-radius: var(--r-full); object-fit: cover; flex: none; }
.person__name { font: 600 14px/1.2 Inter, sans-serif; }
.person__mail { font: 400 12px/1.2 Inter, sans-serif; color: var(--ink-subtle); margin-top: 2px; }

.dots { display: flex; gap: 5px; }
.dots i { width: 9px; height: 9px; border-radius: var(--r-full); background: var(--line-strong); display: inline-block; }

.pagination { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 16px; }
.pagination a, .pagination span {
  display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px;
  padding: 0 10px; border-radius: var(--r-pill); border: 1px solid var(--line); background: #fff;
  font: 600 13px/1 Inter, sans-serif; color: var(--ink-muted);
}
.pagination .is-current { background: var(--brand-500); border-color: var(--brand-500); color: #fff; }
.pagination svg { width: 14px; height: 14px; }

/* ---------- toggles -------------------------------------------------------- */

.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; background: var(--surface); border-radius: 14px; padding: 16px 18px; }
.toggle { position: relative; width: 46px; height: 26px; flex: none; }
.toggle input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.toggle__track { position: absolute; inset: 0; border-radius: var(--r-full); background: var(--line-strong); transition: background 200ms var(--ease); }
.toggle__knob { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: var(--r-full); background: #fff; transition: transform 200ms var(--ease); box-shadow: var(--sh-sm); }
.toggle input:checked ~ .toggle__track { background: var(--brand-500); }
.toggle input:checked ~ .toggle__knob { transform: translateX(20px); }

/* ---------- water tracker -------------------------------------------------- */

.glass-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(56px, 1fr)); gap: 12px; }
.glass {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 4px;
  border-radius: 14px; border: 1.5px solid var(--line); background: #fff; cursor: pointer;
  transition: all 200ms var(--ease);
}
.glass.is-on { border-color: var(--water-soft); background: var(--water-tint); }
.glass__label { font: 600 11px/1 Inter, sans-serif; color: var(--ink-faint); }
.glass.is-on .glass__label { color: var(--water-text); }

.bars { display: flex; align-items: flex-end; gap: 10px; height: 150px; }
.bars__col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.bars__val { font: 600 11px/1 Inter, sans-serif; color: var(--ink-subtle); }
.bars__bar { width: 100%; border-radius: 8px 8px 4px 4px; }
.bars__label { font: 400 11px/1 Inter, sans-serif; color: var(--ink-faint); }

/* ---------- toast ---------------------------------------------------------- */

.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
  height: 48px; display: flex; align-items: center; padding: 0 22px; border-radius: var(--r-pill);
  background: var(--ink); color: #fff; font: 600 14px/1 Inter, sans-serif; z-index: 80;
  box-shadow: var(--sh-lg); animation: wnRise 280ms var(--ease);
}

/* ---------- admin ---------------------------------------------------------- */

.admin-sidebar { background: var(--ink); border-right: 0; color: rgba(255,255,255,.7); }
.admin-sidebar .sidebar__section { color: rgba(255,255,255,.38); }
.admin-sidebar .nav__item { color: rgba(255,255,255,.72); }
.admin-sidebar .nav__item:hover { background: rgba(255,255,255,.07); }
.admin-sidebar .nav__item.is-active { background: var(--brand-500); color: #fff; }
.admin-sidebar .user-chip__name { color: #fff; }
.admin-sidebar .role-switch { border-color: rgba(255,255,255,.18); }
.admin-sidebar .role-switch a { color: rgba(255,255,255,.7); }
.admin-sidebar .role-switch a.is-active { background: #fff; color: var(--ink); }

.panel { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); }
.panel__head { padding: 18px 20px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.panel__head h2 { margin: 0; font: 700 16px/1.3 Inter, sans-serif; }
.panel__head p { margin: 4px 0 0; font: 400 13px/1.5 Inter, sans-serif; color: var(--ink-subtle); }
.panel__body { padding: 22px; }

.color-field { display: flex; align-items: center; gap: 10px; }
.color-field input[type=color] { width: 46px; height: 46px; padding: 2px; border: 1.5px solid var(--line); border-radius: var(--r-md); background: #fff; cursor: pointer; }
.color-field input[type=text] { flex: 1; }

.dropzone { border: 1.5px dashed var(--line-strong); border-radius: var(--r-md); padding: 18px; text-align: center; color: var(--ink-subtle); font: 400 13px/1.5 Inter, sans-serif; background: var(--surface); }
.dropzone input { display: block; margin: 10px auto 0; font: 400 12px/1 Inter, sans-serif; }

.tag { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: var(--r-pill); font: 600 11px/1 Inter, sans-serif; background: var(--surface-muted); color: var(--ink-muted); }
.tag--ok { background: var(--ok-tint); color: var(--ok-text); }
.tag--warn { background: var(--gym-tint); color: var(--gym-text); }
.tag--danger { background: var(--danger-tint); color: var(--danger-text); }
.tag--brand { background: var(--brand-50); color: var(--brand-700); }

.ability-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.ability { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--r-md); cursor: pointer; transition: all 200ms var(--ease); }
.ability:hover { border-color: var(--brand-300); }
.ability input { accent-color: var(--brand-500); margin-top: 2px; }
.ability__name { font: 600 13px/1.3 Inter, sans-serif; }
.ability__key { font: 400 11px/1.3 Inter, sans-serif; color: var(--ink-faint); margin-top: 2px; font-family: ui-monospace, monospace; }

.inline-form { display: inline; }

/* ---------- consistency ----------------------------------------------------- */
/* The thirty-day view: how often each daily goal was met, week by week. */

.consist-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 26px; flex-wrap: wrap; }
.consist-score { flex: none; text-align: right; }
.consist-score__value { display: block; font: 800 44px/1 Inter, sans-serif; letter-spacing: -.02em; color: var(--brand-500); }
.consist-score__value small { font-size: 22px; font-weight: 700; margin-left: 1px; }
.consist-score__label { display: block; font: 600 11px/1 Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); margin-top: 8px; }

.consist-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px; margin-top: 24px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
}
.fact { background: #fff; padding: 16px 18px; }
.fact__label { display: block; font: 600 11px/1 Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.fact__value { display: block; font: 800 22px/1.15 Inter, sans-serif; margin-top: 10px; }
.fact__value small { font: 600 13px/1 Inter, sans-serif; color: var(--ink-subtle); margin-left: 3px; }
.fact__value--up { color: var(--ok-text); }
.fact__value--down { color: var(--danger-text); }
.fact__value--flat { color: var(--ink-faint); }
.fact__note { display: block; font: 400 12px/1.5 Inter, sans-serif; color: var(--ink-subtle); margin-top: 7px; }

.dot { width: 9px; height: 9px; border-radius: var(--r-full); display: inline-block; flex: none; }

.consist-card__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.consist-card__name { display: flex; align-items: center; gap: 9px; font: 700 15px/1.2 Inter, sans-serif; }
.consist-card__figure { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.consist-card__pct { font: 800 30px/1 Inter, sans-serif; letter-spacing: -.02em; }
.consist-card__of { font: 400 12.5px/1.4 Inter, sans-serif; color: var(--ink-subtle); }

/* Week columns. A half-finished week is drawn faded so it is not read as a
   complete one that went badly. */
.weekbars { display: flex; align-items: flex-end; gap: 7px; height: 112px; margin-bottom: 18px; }
.weekbar { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; }
.weekbar__pct { font: 600 10.5px/1 Inter, sans-serif; color: var(--ink-subtle); }
.weekbar__track {
  flex: 1; width: 100%; min-height: 0;
  display: flex; align-items: flex-end;
  background: var(--surface-muted); border-radius: 6px; overflow: hidden;
}
.weekbar__fill { width: 100%; border-radius: 6px; transition: height 320ms var(--ease); }
.weekbar__label { font: 600 10.5px/1 Inter, sans-serif; color: var(--ink-faint); }
/* Weeks that have not happened yet: outlined, so the month reads whole. */
.weekbar.is-upcoming .weekbar__track { background: transparent; border: 1.5px dashed var(--line); }
.weekbar.is-upcoming .weekbar__pct { color: var(--ink-faint); }

/* One challenge, five weeks, read left to right. */
.weekstrip { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.weekstrip__name { width: 116px; flex: none; display: flex; align-items: center; gap: 8px; font: 600 12px/1 Inter, sans-serif; color: var(--ink-muted); }
.weekstrip__cells { flex: 1; min-width: 0; display: flex; gap: 6px; }
.weekstrip__cell {
  position: relative; flex: 1; min-width: 0; height: 26px;
  border-radius: 7px; background: var(--surface-muted); overflow: hidden;
}
.weekstrip__cell.is-upcoming { background: transparent; border: 1.5px dashed var(--line); }
.weekstrip__fill { position: absolute; inset: 0 auto 0 0; border-radius: 7px; opacity: .9; }
.weekstrip__cell b {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font: 700 11px/1 Inter, sans-serif;
}

.consist-card__stats { display: flex; gap: 8px; margin: 0; padding: 0; }
.consist-card__stats > div { flex: 1; min-width: 0; background: var(--surface); border-radius: var(--r-md); padding: 10px 12px; }
.consist-card__stats dt { font: 600 10.5px/1.2 Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.consist-card__stats dd { margin: 6px 0 0; font: 800 17px/1 Inter, sans-serif; }

/* The end-of-programme banner, shown once the last day is reached. */
.final-banner {
  position: relative; overflow: hidden;
  border-radius: var(--r-xl); padding: 30px 32px; color: #fff;
  background: linear-gradient(120deg, var(--gradient-from), var(--magenta-deep));
}
.final-banner__kicker { font: 600 11px/1 Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; opacity: .74; }
.final-banner h2 { font: 800 26px/1.2 Inter, sans-serif; margin: 12px 0 8px; }
.final-banner p { font: 400 14px/1.6 Inter, sans-serif; color: rgba(255,255,255,.84); margin: 0; max-width: 560px; }
.final-banner__row { display: flex; gap: 30px; flex-wrap: wrap; margin-top: 24px; }
.final-banner__row b { display: block; font: 800 26px/1 Inter, sans-serif; }
.final-banner__row span { display: block; font: 400 12px/1.4 Inter, sans-serif; color: rgba(255,255,255,.74); margin-top: 6px; }

/* ---------- phone chrome ---------------------------------------------------- */
/* All three pieces are hidden above the mobile breakpoint; the media query at
   the bottom of the file switches them on and turns the sidebar into a drawer. */

.mobilebar, .tabbar, .nav-scrim { display: none; }

.mobilebar {
  position: sticky; top: 0; z-index: 60;
  align-items: center; gap: 12px;
  height: 56px; padding: 0 14px;
  background: rgba(255,255,255,.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.mobilebar__burger {
  position: relative; flex: none;
  width: 38px; height: 38px; margin-left: -6px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent; color: var(--ink); cursor: pointer;
  border-radius: var(--r-md);
}
.mobilebar__burger:active { background: var(--surface); }
.mobilebar__burger svg { width: 22px; height: 22px; }
/* A dot rather than a count: the exact number is on the Today tab already. */
.mobilebar__dot {
  position: absolute; top: 7px; right: 7px;
  width: 8px; height: 8px; border-radius: var(--r-full);
  background: var(--pink); border: 2px solid #fff;
}
/* The full platform name, trimmed only if the device is too narrow for it.
   Appearance's short name is the fallback for names that never fit. */
.mobilebar__brand {
  flex: 1; min-width: 0;
  font: 700 14.5px/1.2 Inter, sans-serif; letter-spacing: -.01em; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 380px) { .mobilebar__brand { font-size: 13.5px; } }
.mobilebar__pts { flex: none; }

.nav-scrim {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(4,30,66,.44);
  opacity: 0; transition: opacity 220ms var(--ease);
}
body.nav-open .nav-scrim { opacity: 1; }

.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  grid-auto-flow: column; grid-auto-columns: 1fr;
  background: rgba(255,255,255,.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabbar__item {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: 58px; padding: 8px 2px 9px;
  border: 0; background: transparent; cursor: pointer;
  color: var(--ink-faint); font: 600 10px/1.1 Inter, sans-serif; text-align: center;
}
.tabbar__item svg { width: 21px; height: 21px; }
.tabbar__item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabbar__item.is-active { color: var(--nav-accent, var(--brand-600)); }
/* The active tab gets a short bar at the top edge in its own challenge accent. */
.tabbar__item.is-active::before {
  content: ''; position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
  width: 26px; height: 3px; border-radius: 0 0 3px 3px;
  background: var(--nav-accent, var(--brand-600));
}
.tabbar__badge {
  position: absolute; top: 6px; left: 50%; margin-left: 4px;
  min-width: 16px; height: 16px; padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-pill); background: var(--pink); color: #fff;
  font: 700 10px/1 Inter, sans-serif;
}

/* ---------- animation ------------------------------------------------------ */

@keyframes wnFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes wnPop { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes wnRise { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
.fade-in { animation: wnFade 280ms var(--ease); }

/* ---------- responsive ----------------------------------------------------- */

/* Tablet: the sidebar keeps its place but drops to an icon rail. */
@media (max-width: 1100px) and (min-width: 821px) {
  .sidebar { width: 76px; padding: 18px 10px; }
  .sidebar__label, .sidebar__section, .user-chip__name, .user-chip__meta,
  .brandmark__word { display: none; }
  .nav__item { justify-content: center; padding: 0; position: relative; }
  .nav__badge { position: absolute; margin: 0; transform: translate(14px, -12px); }
  .nav--challenges { padding: 5px; }
  .role-switch { flex-direction: column; }
}

@media (max-width: 1100px) {
  .grid--split, .grid--split-wide, .grid--halves { grid-template-columns: 1fr; }
  .info-card { flex-direction: column; }
  .info-card__img { width: 100%; height: 170px; }
}

/* ---------- phone ----------------------------------------------------------- */

@media (max-width: 820px) {
  /* The shell stacks: bar on top, page below, tab bar pinned to the bottom.
     The sidebar leaves the flow entirely and slides in over the page. */
  .shell { flex-direction: column; }
  .mobilebar { display: flex; }
  .tabbar { display: grid; }
  .nav-scrim { display: block; }

  .sidebar {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 80;
    width: min(84vw, 300px); height: 100dvh; padding: 20px 16px calc(20px + env(safe-area-inset-bottom));
    transform: translateX(-102%);
    transition: transform 260ms var(--ease);
    box-shadow: 0 20px 60px rgba(4,30,66,.22);
    border-right: 1px solid var(--line);
    overscroll-behavior: contain;
  }
  body.nav-open .sidebar { transform: none; }

  /* Room for the tab bar so the last card is never trapped under it. */
  /* Dark bar over the dark admin sidebar, so the two read as one surface. */
  .mobilebar--dark { background: var(--ink); border-bottom-color: rgba(255,255,255,.12); }
  .mobilebar--dark .mobilebar__brand, .mobilebar--dark .mobilebar__burger { color: #fff; }
  .mobilebar--dark .chip { background: rgba(255,255,255,.14); color: #fff; border-color: transparent; }

  .content { padding: 18px 14px calc(78px + env(safe-area-inset-bottom)); }
  /* No tab bar in the admin panel, so the page can end where it ends. */
  .shell:not(:has(.tabbar)) .content { padding-bottom: 34px; }
  .page-head { margin-bottom: 18px; gap: 12px; }
  .page-head h1 { font-size: 19px; }
  /* The day and points already sit in the top bar on a phone. */
  .page-head__chips { display: none; }

  .auth { flex-direction: column; }
  .auth__aside { flex: none; min-width: 0; padding: 30px 22px 34px; }
  .auth__main { padding: 30px 20px 40px; }
  .display { font-size: 27px; }
  /* Full width again below the split, so the three challenges go back to
     three columns and the form is not pushed off the first screen. */
  .habit-list { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; }
  .habit-card { flex-direction: column; align-items: flex-start; gap: 9px; padding: 12px; }

  .hero { flex-direction: column; align-items: flex-start; gap: 18px; padding: 22px; }
  .hero__aside { width: 100%; }
  .hero__title { font-size: 21px; }
  .hero__sub { font-size: 13.5px; }

  .grid { gap: 14px; }
  .grid--cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
  .grid--challenges, .grid-2, .podium { grid-template-columns: 1fr; }
  .grid--stats { grid-template-columns: repeat(auto-fit, minmax(min(100%, 148px), 1fr)); }
  .stat-card { padding: 16px; }
  .stat-card__value { font-size: 22px; }
  .card__body { padding: 18px; }

  .day-grid { grid-template-columns: repeat(6, 1fr); gap: 6px; }
  .heat-row { grid-template-columns: repeat(10, 1fr); }

  /* Anything that cannot reflow scrolls sideways inside its own card rather
     than pushing the whole page wide. */
  /* Filters stay on one line and swipe sideways rather than stacking into
     three rows and pushing the content off the first screen. */
  .chip-row {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding-bottom: 2px;
  }
  .chip-row::-webkit-scrollbar { display: none; }
  .chip-row > * { flex: none; }

  .table-wrap, .scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* Wide enough that no column is crushed; the wrapper scrolls sideways. */
  .table { min-width: 720px; }
  .table th, .table td { padding-left: 14px; padding-right: 14px; }
  .table td > div:last-child:not(:first-child) {
    max-width: 220px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }

  /* Too narrow for a number inside each cell; the chart above carries them. */
  .weekstrip { gap: 10px; }
  .weekstrip__name { width: 92px; font-size: 11.5px; }
  .weekstrip__cell b { display: none; }
  .weekbars { gap: 5px; }
  .consist-score { text-align: left; }
  .consist-score__value { font-size: 38px; }
  .consist-card__stats { gap: 6px; }
  .consist-card__stats > div { padding: 9px 10px; }

  .modal-backdrop { padding: 12px; }
  .modal video { max-height: 52vh; }
  .modal__foot { flex-direction: column; align-items: stretch; text-align: center; }
  .modal__foot .btn { width: 100%; }

  /* Above the tab bar, and full width so a long message still fits. */
  .toast {
    left: 12px; right: 12px; bottom: calc(74px + env(safe-area-inset-bottom));
    transform: none; height: auto; min-height: 48px; padding: 13px 18px;
    line-height: 1.4; border-radius: 16px; animation: wnFade 240ms var(--ease);
  }
}

/* Small phones: two glasses fewer per row, tighter chrome. */
@media (max-width: 420px) {
  .content { padding: 14px 11px calc(76px + env(safe-area-inset-bottom)); }
  .page-head h1 { font-size: 18px; }
  .card__body { padding: 15px; }
  .hero { padding: 18px; }
  .day-grid { grid-template-columns: repeat(5, 1fr); }
  .tabbar__item { font-size: 9.5px; }
  .tabbar__item svg { width: 20px; height: 20px; }
}