/* Ladder on the web (D1200 to D1229): the golfers' app for a mouse and a keyboard. docs/DESIGN.md applied to a browser, in the look the
   apps have today (D982): a grouped gray page, soft white cards with a 24 px corner and no outline, each area's color on its symbol and
   its big number, one action-green capsule per screen, rounded bold numbers, sentence case, light by default with Match System.
   The tokens are the apps' (docs/DESIGN.md, "Tokens"). Phase B areas add their own file under areas/ and use these; nothing here is
   an area's own. */

:root {
  /* Ground and surfaces */
  --page: #f2f2f7;
  --card: #ffffff;
  --inset: #f2f2f7;
  --sidebar: #f7f7fa;
  --separator: #d8d8dd;
  --hairline: rgba(60, 60, 67, 0.18);
  --text: #000000;
  --secondary: #5c5c63;
  --tertiary: #8e8e93;
  --link: #0066cc;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 6px 18px rgba(0, 0, 0, 0.05);
  --shadow-hover: 0 2px 4px rgba(0, 0, 0, 0.05), 0 10px 26px rgba(0, 0, 0, 0.08);

  /* Ladder's own colors (D873, D919) */
  --brand: #17322a;
  --on-brand: #ffffff;
  --go: #22c55e;
  --on-go: #08140f;
  --go-hover: #1db954;
  --key-fill: rgba(23, 50, 42, 0.08);

  /* Meanings: never color alone */
  --good: #248a3d;
  --work: #c93400;
  --fault: #d70015;
  --good-fill: #e4f5e8;
  --work-fill: #fff0e4;
  --fault-fill: #ffe9ea;
  --gold: #a05a00;
  --gold-fill: #fff4dc;
  --sample-fill: #e9e9ee;

  /* Each area's color (docs/DESIGN.md, the area table and D961), as ink that reads at 4.5:1 on white */
  --area-today: #17322a;
  --area-plan: #0066cc;
  --area-progress: #c93400;
  --area-swings: #4c4ac4;
  --area-freestyle: #e11d48;
  --area-live: #be123c;
  --area-speed: #1d4ed8;
  --area-academy: #0c817b;
  --area-coach: #8944ab;
  --area-messages: #0066cc;
  --area-lessons: #0e7c8a;
  --area-settings: #5c5c63;
  /* Kinds of goal (D886, KindColors.swift) */
  --kind-mechanics: #4c4ac4;
  --kind-practice: #c93400;
  --kind-ball-flight: #0066cc;
  --kind-speed: #0e7c8a;
  --kind-workout: #8a5a2b;
  --kind-play: #0c817b;
  --kind-test: #c7255f;
  --kind-rest: #8e8e93;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --rounded: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --radius: 24px;
  --radius-button: 999px;
  --radius-small: 10px;
  --sidebar-width: 248px;
  --gutter: 32px;
  --content: 1080px;
  color-scheme: light;
}

/* Dark only for Match System on a dark device. Light is the default, whatever the device says. */
@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] {
    --page: #000000;
    --card: #1c1c1e;
    --inset: #2c2c2e;
    --sidebar: #111113;
    --separator: #3a3a3e;
    --hairline: rgba(84, 84, 88, 0.6);
    --text: #ffffff;
    --secondary: #aeaeb5;
    --tertiary: #8e8e93;
    --link: #64aeff;
    --shadow: none;
    --shadow-hover: 0 0 0 1px #3a3a3e;
    --brand: #77c5ae;
    --on-brand: #08140f;
    --key-fill: rgba(119, 197, 174, 0.16);
    --good: #32d74b;
    --work: #ff9f0a;
    --fault: #ff6961;
    --good-fill: #12321a;
    --work-fill: #3a2506;
    --fault-fill: #3e1414;
    --gold: #ffd60a;
    --gold-fill: #3a3006;
    --sample-fill: #3a3a3e;
    --area-today: #77c5ae;
    --area-plan: #64aeff;
    --area-progress: #ff9f0a;
    --area-swings: #a5a4ff;
    --area-freestyle: #fb7185;
    --area-live: #fb7185;
    --area-speed: #7aa7ff;
    --area-academy: #63e6d9;
    --area-coach: #da8fff;
    --area-messages: #64aeff;
    --area-lessons: #5ad8e8;
    --area-settings: #aeaeb5;
    --kind-mechanics: #a5a4ff;
    --kind-practice: #ff9f0a;
    --kind-ball-flight: #64aeff;
    --kind-speed: #5ad8e8;
    --kind-workout: #d6a77a;
    --kind-play: #63e6d9;
    --kind-test: #ff6fa4;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--page); }
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.47;
  color: var(--text);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: anywhere;
}
h1, h2, h3, p, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Focus rings: always visible from the keyboard, never from a click. */
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; border-radius: 8px; }
.card:focus-visible, .row-link:focus-visible { outline-offset: 3px; border-radius: 14px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}
.icon { width: 1.25em; height: 1.25em; flex: none; display: block; }
.muted { color: var(--secondary); }
.small { font-size: 0.9375rem; }
.number { font-family: var(--rounded); font-weight: 700; font-variant-numeric: tabular-nums; }
kbd {
  font-family: var(--font);
  font-size: 0.8125rem;
  font-weight: 600;
  min-width: 1.75em;
  display: inline-flex;
  justify-content: center;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--inset);
  border: 1px solid var(--hairline);
}

/* --- The shell: a sidebar in place of the tab bar, and the area beside it --- */

.shell { display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); min-height: 100vh; }
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px 12px 16px;
  background: var(--sidebar);
  border-right: 1px solid var(--hairline);
  overflow-y: auto;
}
.wordmark {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 12px 16px;
  font-family: var(--rounded);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--brand);
}
.wordmark:hover { text-decoration: none; }
.wordmark .mark { width: 30px; height: 30px; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-group { margin-top: 14px; padding: 0 12px 4px; font-size: 0.8125rem; font-weight: 600; color: var(--secondary); }
.nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 40px;
  padding: 6px 12px;
  border-radius: 12px;
  color: var(--text);
  font-weight: 500;
}
.nav a:hover { text-decoration: none; background: var(--key-fill); }
.nav a .icon { color: var(--area); width: 22px; height: 22px; }
.nav a[aria-current="page"] { background: var(--card); box-shadow: var(--shadow); font-weight: 600; }
.nav a .badge { margin-left: auto; }
.nav a .hint { margin-left: auto; color: var(--tertiary); font-size: 0.8125rem; opacity: 0; transition: opacity 120ms; }
.nav a:hover .hint, .nav a:focus-visible .hint { opacity: 1; }
.sidebar-foot { margin-top: auto; padding-top: 12px; display: flex; flex-direction: column; gap: 6px; }

.account-button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 8px 12px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  text-align: left;
}
.account-button:hover { background: var(--key-fill); }
.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  font-family: var(--rounded);
  font-weight: 700;
  color: #fff;
  background: linear-gradient(180deg, #a1a1aa, #71717a);
}
.account-button .who { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.account-button .who strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-button .who span { font-size: 0.8125rem; color: var(--secondary); }

.main { min-width: 0; padding: 28px var(--gutter) 64px; }
.page { max-width: var(--content); margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
.page-head { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; padding-top: 8px; }
.page-head h1 { font-family: var(--font); font-size: 2.125rem; line-height: 1.15; font-weight: 700; letter-spacing: -0.01em; }
.page-head .sub { color: var(--secondary); font-size: 1rem; }
.page-head .spacer { flex: 1 1 auto; }

.topbar { display: none; }

/* --- Cards (D982): soft white, 24 px corner, a very soft shadow, no outline. Never a card in a card. --- */

.grid { display: grid; gap: 20px; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
.span-12 { grid-column: span 12; }
.span-8 { grid-column: span 8; }
.span-7 { grid-column: span 7; }
.span-6 { grid-column: span 6; }
.span-5 { grid-column: span 5; }
.span-4 { grid-column: span 4; }
.span-3 { grid-column: span 3; }
.column { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

.card {
  display: block;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  color: var(--text);
  min-width: 0;
}
a.card, button.card { text-decoration: none; text-align: left; border: 0; width: 100%; transition: box-shadow 140ms, transform 140ms; }
a.card:hover, button.card:hover { box-shadow: var(--shadow-hover); text-decoration: none; }
a.card:active, button.card:active { transform: scale(0.99); }
.card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; min-height: 28px; }
.card-head .icon { color: var(--tint, var(--secondary)); width: 22px; height: 22px; }
.card-head h2 { font-size: 1.0625rem; font-weight: 600; }
.card-head .spacer { flex: 1 1 auto; }
.card-head .chevron { color: var(--tertiary); }
.card .big { font-family: var(--rounded); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 2.75rem; line-height: 1; color: var(--tint, var(--text)); }
.card .big-unit { font-size: 0.9375rem; font-weight: 600; color: var(--secondary); margin-left: 4px; }
.card .line { color: var(--secondary); font-size: 0.9375rem; margin-top: 6px; }
.card.hero { background: var(--brand); color: var(--on-brand); }
.card.hero .line, .card.hero .muted { color: color-mix(in srgb, var(--on-brand) 78%, transparent); }

/* Rows inside a card: hairlines between, the label on the left, the value bold and rounded on the right. */
.rows { display: flex; flex-direction: column; }
.rows > * + * { border-top: 1px solid var(--hairline); }
.row-link, .row-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 8px 6px;
  color: var(--text);
  border-radius: 12px;
  background: transparent;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  width: 100%;
  text-align: left;
}
.rows > .row-link + .row-link, .rows > .row-item + .row-item, .rows > .row-link + .row-item, .rows > .row-item + .row-link { border-radius: 0; }
.row-link:hover { background: var(--key-fill); text-decoration: none; }
.row-item .glyph, .row-link .glyph { width: 28px; display: grid; place-items: center; color: var(--tint, var(--secondary)); flex: none; }
.row-item .glyph .icon, .row-link .glyph .icon { width: 22px; height: 22px; }
.row-main { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; line-height: 1.3; }
.row-main .role { font-size: 0.8125rem; color: var(--secondary); }
.row-main .title { font-weight: 600; }
.row-item.is-done .title, .row-link.is-done .title { color: var(--secondary); text-decoration: line-through; }
.row-value { font-family: var(--rounded); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--secondary); flex: none; }
.row-chevron { color: var(--tertiary); flex: none; width: 16px; height: 16px; }
.now-row { background: var(--key-fill); }

/* A numbered tile for a session's parts (D936): the one to do now in the action green, a tick once done. */
.tile {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-small);
  display: grid;
  place-items: center;
  font-family: var(--rounded);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: var(--inset);
  color: var(--secondary);
  flex: none;
}
.tile.now { background: var(--go); color: var(--on-go); }
.tile.done { background: var(--good-fill); color: var(--good); }
.stars { display: inline-flex; gap: 1px; color: var(--gold); }
.stars .off { color: var(--separator); }

/* Tags and chips: capsules, symbol and word together. */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.5;
  background: var(--inset);
  color: var(--text);
  white-space: nowrap;
}
.tag .icon { width: 14px; height: 14px; color: var(--tint, var(--secondary)); }
.tag.sample { background: var(--sample-fill); color: var(--secondary); }
.tag.key { background: var(--go); color: var(--on-go); }
.tag.good { background: var(--good-fill); }
.tag.good .icon { color: var(--good); }
.tag.work { background: var(--work-fill); }
.tag.work .icon { color: var(--work); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--inset);
  font-weight: 600;
  font-size: 0.9375rem;
}
.chip .icon { width: 16px; height: 16px; color: var(--tint, var(--secondary)); }

/* A ramp of a few steps, or a capsule bar, in the card's color. */
.ramp { display: flex; gap: 4px; margin-top: 10px; }
.ramp span { flex: 1 1 0; height: 8px; border-radius: 4px; background: var(--inset); }
.ramp span.on { background: var(--tint, var(--brand)); }
.bar { height: 8px; border-radius: 4px; background: var(--inset); overflow: hidden; margin-top: 10px; }
.bar > span { display: block; height: 100%; width: var(--fill, 0%); background: var(--tint, var(--brand)); border-radius: 4px; }

/* --- Buttons: one action-green capsule per screen (D919), bordered for the rest --- */

.go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 12px 28px;
  border: 0;
  border-radius: var(--radius-button);
  background: var(--go);
  color: var(--on-go);
  font-weight: 600;
  font-size: 1.0625rem;
  transition: background 120ms, transform 120ms;
}
.go:hover { background: var(--go-hover); text-decoration: none; }
.go:active { transform: scale(0.97); }
.go[disabled] { opacity: 0.5; cursor: default; }
.go.wide { width: 100%; }
.secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 8px 16px;
  border: 0;
  border-radius: var(--radius-button);
  background: var(--inset);
  color: var(--text);
  font-weight: 600;
  font-size: 0.9375rem;
}
.secondary:hover { background: color-mix(in srgb, var(--inset) 80%, var(--text) 8%); text-decoration: none; }
.secondary .icon { width: 18px; height: 18px; color: var(--tint, var(--link)); }
.secondary[disabled] { opacity: 0.55; cursor: default; }
.plain { border: 0; background: none; padding: 6px 8px; min-height: 40px; min-width: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; color: var(--link); font-weight: 600; }
.plain:hover { background: var(--key-fill); }
.on-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 12px 22px;
  border-radius: var(--radius-button);
  background: var(--inset);
  color: var(--secondary);
  font-weight: 600;
}
.on-phone .icon { color: var(--secondary); }

/* --- States: never blank, never an endless spinner --- */

.state { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 12px; padding: 48px 20px; min-height: 260px; }
.state .icon { width: 44px; height: 44px; color: var(--tint, var(--secondary)); }
.state h2 { font-size: 1.375rem; font-weight: 700; }
.state p { color: var(--secondary); max-width: 34em; }
.spinner {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 3px solid var(--separator);
  border-top-color: var(--brand);
  animation: spin 900ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.skeleton { background: var(--inset); border-radius: 12px; min-height: 18px; animation: pulse 1400ms ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.55; } }

/* A line at the top while the browser is offline or the server can't be reached. */
.banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 16px;
  background: var(--work-fill);
  font-weight: 500;
}
.banner .icon { color: var(--work); }
.banner .spacer { flex: 1 1 auto; }
.banner.info { background: var(--card); box-shadow: var(--shadow); }
.banner.info .icon { color: var(--secondary); }

/* --- Sheets, menus and toasts --- */

dialog.sheet {
  border: 0;
  padding: 0;
  border-radius: var(--radius);
  background: var(--card);
  color: var(--text);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.25);
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
}
dialog.sheet::backdrop { background: rgba(0, 0, 0, 0.32); }
.sheet-body { padding: 24px; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; max-height: calc(100vh - 64px); }
.sheet-head { display: flex; align-items: center; gap: 8px; }
.sheet-head h2 { font-size: 1.375rem; font-weight: 700; flex: 1 1 auto; }
.keys { display: grid; grid-template-columns: auto 1fr; gap: 10px 16px; align-items: center; }
.keys dt { display: flex; gap: 4px; justify-content: flex-end; }
.keys dd { margin: 0; }
.keys-group { font-weight: 600; color: var(--secondary); font-size: 0.875rem; grid-column: 1 / -1; margin-top: 8px; }

.menu {
  position: fixed;
  z-index: 60;
  min-width: 220px;
  padding: 6px;
  border-radius: 14px;
  background: var(--card);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2), 0 0 0 1px var(--hairline);
  display: flex;
  flex-direction: column;
}
.menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  padding: 6px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  text-align: left;
}
.menu button:hover, .menu button:focus-visible { background: var(--link); color: #fff; outline: none; }
.menu button:hover .icon, .menu button:focus-visible .icon { color: #fff; }
.menu button .icon { width: 18px; height: 18px; color: var(--secondary); }
.menu button.danger { color: var(--fault); }
.menu hr { border: 0; border-top: 1px solid var(--hairline); margin: 4px 6px; }
.menu .label { padding: 6px 10px 2px; font-size: 0.8125rem; color: var(--secondary); }
.menu button[aria-checked="true"]::after { content: "✓"; margin-left: auto; font-weight: 700; }

.toasts { position: fixed; z-index: 70; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 999px;
  background: #1c1c1e;
  color: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  font-weight: 500;
}
.toast .icon { color: var(--go); }
.toast.bad .icon { color: #ff6961; }

/* --- Forms (sign-in) --- */

.front { min-height: 100vh; display: grid; place-items: center; padding: 32px 16px; background: var(--page); }
.front-card { width: min(440px, 100%); display: flex; flex-direction: column; gap: 18px; padding: 32px; }
.front-card .mark { width: 56px; height: 56px; }
.front-card h1 { font-family: var(--rounded); font-size: 2.25rem; font-weight: 700; color: var(--brand); line-height: 1.1; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-weight: 600; font-size: 0.9375rem; }
.field input[type="email"], .field input[type="text"], .field input[type="password"] {
  min-height: 48px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid var(--separator);
  background: var(--card);
}
.field input:focus-visible { outline: 3px solid var(--link); outline-offset: 0; border-color: transparent; }
.check { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.check input { width: 20px; height: 20px; accent-color: var(--brand); }
.form-error { display: flex; gap: 8px; align-items: flex-start; padding: 10px 14px; border-radius: 14px; background: var(--fault-fill); }
.form-error .icon { color: var(--fault); margin-top: 3px; }

/* --- Responsive: desktop, a laptop, then an iPad. Below 760 px the sidebar folds behind a button. --- */

@media (max-width: 1180px) {
  :root { --gutter: 24px; }
  .span-8, .span-7 { grid-column: span 12; }
  .span-5, .span-4 { grid-column: span 6; }
  .span-3 { grid-column: span 6; }
}

@media (max-width: 1023px) {
  :root { --sidebar-width: 76px; }
  .sidebar { padding: 16px 10px; align-items: center; }
  .wordmark span, .nav a .label, .nav a .hint, .nav-group, .account-button .who { display: none; }
  .wordmark { padding: 4px 0 12px; }
  .nav a { justify-content: center; padding: 8px; min-height: 48px; width: 52px; }
  .nav a .badge { position: absolute; margin: 0; transform: translate(14px, -12px); }
  .account-button { justify-content: center; padding: 8px; width: 52px; }
  .span-6, .span-5, .span-4, .span-3 { grid-column: span 12; }
}

@media (max-width: 759px) {
  :root { --gutter: 16px; }
  .shell { grid-template-columns: minmax(0, 1fr); }
  .sidebar {
    position: fixed;
    z-index: 50;
    inset: 0 auto 0 0;
    width: 280px;
    align-items: stretch;
    transform: translateX(-100%);
    transition: transform 200ms;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.2);
  }
  .shell.nav-open .sidebar { transform: none; }
  .wordmark span, .nav a .label, .nav-group, .account-button .who { display: initial; }
  .nav a { justify-content: flex-start; width: auto; }
  .account-button { justify-content: flex-start; width: 100%; }
  .topbar {
    display: flex;
    align-items: center;
    gap: 8px;
    position: sticky;
    top: 0;
    z-index: 40;
    padding: 8px 12px;
    background: color-mix(in srgb, var(--page) 86%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
  }
  .main { padding-top: 12px; }
  .page-head h1 { font-size: 1.75rem; }
}

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

.stars .icon { width: 14px; height: 14px; }
.stars-count { font-family: var(--rounded); font-weight: 600; font-variant-numeric: tabular-nums; font-size: 0.8125rem; color: var(--secondary); }
.stars-count.all { color: var(--gold); }

/* Next session, folded to one line until it's opened (D936). */
details.card > summary { cursor: pointer; list-style: none; margin-bottom: 0; }
details.card > summary::-webkit-details-marker { display: none; }
details.card > summary .icon { transition: transform 150ms; }
details.card[open] > summary { margin-bottom: 12px; }
details.card[open] > summary .icon { transform: rotate(90deg); }
.challenge-title { font-size: 1.25rem; font-weight: 700; }
.card.hero .card-head .icon { color: var(--on-brand); }
.card.hero .row-item, .card.hero .row-item .title { color: var(--on-brand); }
/* Streak and XP sit side by side at every width: two small numbers read better together. */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.tiles > .wide { grid-column: 1 / -1; }
.card.hero .big { font-size: 1.75rem; line-height: 1.2; }
.card.hero .rows > * + * { border-top-color: color-mix(in srgb, var(--on-brand) 20%, transparent); }
.card.hero .row-value { color: var(--on-brand); }
.card.hero .row-item .title { font-weight: 500; }