/* The look follows the design kit in ../Apple-Stil-Kit_Fitness (08_Fuer-Claude/DESIGN.md and tokens.css):
   white tiles on light grey (black and #1D1D1F in dark), big numbers, color only on data, glass only for
   what floats (the bottom bar, the menu, segment controls), pill buttons with one blue primary per screen.
   theme.js sets data-theme="light" or "dark" on <html> before the page paints
   (following the device when the choice is "System"). */
:root {
  color-scheme: light;
  --page: #F5F5F7;
  --tile: #FFFFFF;
  --tile2: #F5F5F7;
  --elev: #FFFFFF;
  --text: #1D1D1F;
  --text2: #6E6E73;
  --text3: #86868B;
  --link: #0066CC;
  --cta: #0071E3;          /* the one primary button per screen */
  --tab-on: #0071E3;       /* the lit tab in the bottom bar */
  --glass: rgba(232, 232, 237, 0.72);
  --bar: rgba(255, 255, 255, 0.8);
  --menu: rgba(255, 255, 255, 0.86);
  --glass-edge: inset 0 0.5px 0 rgba(255, 255, 255, 0.9), inset 0 0 0 0.5px rgba(0, 0, 0, 0.08);
  --float-shadow: 0 8px 32px rgba(0, 0, 0, 0.10);
  --hair: rgba(0, 0, 0, 0.11);
  --track: rgba(0, 0, 0, 0.07);
  --sel: #FFFFFF;          /* the chosen part of a segment control */
  --sel-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.04);
  --tab-pill: rgba(29, 29, 31, 0.08);
  --chart-gray: #D2D2D7;   /* comparison bars that are not highlighted */
  --focus: rgba(0, 113, 227, 0.55);
  --error: #D70015;
  --error-bg: rgba(255, 59, 48, 0.10);
  --success: #1E7B34;
  --success-bg: rgba(52, 199, 89, 0.14);
  --warn: #8A5A00;
  --warn-bg: rgba(255, 159, 10, 0.16);
  --badge: #FF3B30;
  --down: #C93400;          /* a number that went down (orange, not the red of errors) */
  --down-bg: rgba(255, 149, 0, 0.14);
  --avatar-bg: linear-gradient(180deg, #A5ABB8, #858994);

  /* One gradient per metric (kit table 4): Glut = points, Frisch = activity (minutes, active days),
     Eisblau = distance, Energie = the group goal and highlights. */
  --g-glut: linear-gradient(100deg, #F2416B 0%, #F55600 55%, #FF9F0A 100%);
  --g-glut-tile: linear-gradient(135deg, #F2416B 0%, #F55600 55%, #FF9F0A 100%);
  --frisch-a: #2E9C7F; --frisch-b: #5DBB00;
  --eisblau-a: #8FA6F5; --eisblau-b: #4C6FE0;
  --g-frisch: linear-gradient(90deg, var(--frisch-a), var(--frisch-b));
  --g-frisch-up: linear-gradient(0deg, var(--frisch-a), var(--frisch-b));
  --g-eisblau: linear-gradient(90deg, var(--eisblau-a), var(--eisblau-b));
  --g-energie: linear-gradient(108deg, #0090F7 0%, #BA62FC 33%, #F2416B 66%, #F55600 100%);
  --g-headline: var(--g-energie); /* headlines: Energie in light, Mint-Stahl in dark */

  /* The glow behind the page: nothing in the app, the kit's pastel background on the login screen */
  --page-glow: none;
  --auth-glow:
    radial-gradient(130% 55% at 15% 8%, #DCE2FF 0%, rgba(220, 226, 255, 0.5) 30%, rgba(220, 226, 255, 0) 70%),
    radial-gradient(110% 55% at 92% 36%, rgba(252, 221, 248, 0.95) 0%, rgba(252, 221, 248, 0) 70%),
    radial-gradient(150% 60% at 25% 86%, #DDF3EB 0%, rgba(221, 243, 235, 0) 70%),
    radial-gradient(120% 60% at 85% 102%, rgba(255, 230, 210, 0.95) 0%, rgba(255, 230, 210, 0) 70%);

  /* The leaderboard graph: everybody's line but the highlighted one */
  --chart-other: #C7C7CC;

  /* SF Pro on Apple devices (the system font), Inter where it is installed, then the platform's own */
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI Variable Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ease-apple: cubic-bezier(0.28, 0.11, 0.32, 1);
  --r-tile: 28px;
  --r-row: 22px;
  /* The height of the bottom bar's strip, home-indicator area included. app.js keeps it exact; this is the guess until then. */
  --nav-h: calc(76px + env(safe-area-inset-bottom));
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #000000;
  --tile: #1D1D1F;
  --tile2: #2A2A2D;
  --elev: #3A3A3C;
  --text: #F5F5F7;
  --text2: #86868B;
  --text3: #6E6E73;
  --link: #2997FF;
  --tab-on: #2997FF;
  --glass: rgba(42, 42, 45, 0.72);
  --bar: rgba(28, 28, 30, 0.8);
  --menu: rgba(44, 44, 46, 0.9);
  --glass-edge: inset 0 0.5px 0 rgba(255, 255, 255, 0.30), inset 0 0 0 0.5px rgba(255, 255, 255, 0.10);
  --float-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  --hair: rgba(255, 255, 255, 0.10);
  --track: rgba(255, 255, 255, 0.10);
  --sel: rgba(255, 255, 255, 0.14);
  --sel-shadow: none;
  --tab-pill: rgba(245, 245, 247, 0.12);
  --chart-gray: #424245;
  --focus: rgba(41, 151, 255, 0.7);
  --error: #FF6961;
  --error-bg: rgba(255, 69, 58, 0.16);
  --success: #30D158;
  --success-bg: rgba(48, 209, 88, 0.14);
  --warn: #FFD60A;
  --warn-bg: rgba(255, 214, 10, 0.12);
  --badge: #FF453A;
  --down: #FF9F0A;
  --down-bg: rgba(255, 159, 10, 0.16);
  --avatar-bg: linear-gradient(180deg, #6B6F78, #4A4D55);
  --frisch-a: #35A98A; --frisch-b: #6DD400;
  --g-eisblau: linear-gradient(90deg, #E1E5FF 7%, #83A0EF 80%);
  --eisblau-a: #E1E5FF; --eisblau-b: #83A0EF;
  --g-headline: linear-gradient(90deg, #E4F6F0 0%, #9DCFCA 31%, #6B95AC 68%, #45657D 100%);
  /* the kit's aurora: a soft glow rising from the bottom of the screen */
  --page-glow:
    radial-gradient(90% 45% at 12% 104%, rgba(44, 110, 115, 0.34) 0%, rgba(44, 110, 115, 0) 70%),
    radial-gradient(90% 45% at 88% 100%, rgba(42, 79, 191, 0.34) 0%, rgba(42, 79, 191, 0) 70%),
    radial-gradient(80% 40% at 50% 112%, rgba(106, 63, 201, 0.30) 0%, rgba(106, 63, 201, 0) 70%);
  --auth-glow:
    radial-gradient(120% 60% at 12% 102%, rgba(44, 110, 115, 0.62) 0%, rgba(44, 110, 115, 0) 70%),
    radial-gradient(120% 60% at 88% 98%, rgba(42, 79, 191, 0.62) 0%, rgba(42, 79, 191, 0) 70%),
    radial-gradient(110% 55% at 50% 112%, rgba(106, 63, 201, 0.55) 0%, rgba(106, 63, 201, 0) 70%),
    radial-gradient(150% 35% at 50% -8%, rgba(69, 101, 125, 0.28) 0%, rgba(69, 101, 125, 0) 70%);
  --chart-other: #545458;
}

/* the SVG gradients (index.html) take their light or dark colors from here */
.stop-frisch-a { stop-color: var(--frisch-a); }
.stop-frisch-b { stop-color: var(--frisch-b); }
.stop-eisblau-a { stop-color: var(--eisblau-a); }
.stop-eisblau-b { stop-color: var(--eisblau-b); }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh; /* the visible height, with the phone browser's bars */
  background: var(--page);
  color: var(--text);
  font: 17px/1.41 var(--font-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body::before { /* the glow behind everything; fixed, so it stays put while the page scrolls */
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--page-glow);
  pointer-events: none;
}
body:has(#auth-view:not([hidden]))::before { background: var(--auth-glow); }

a { color: var(--link); }

.shell {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  padding: calc(20px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 48px max(16px, env(safe-area-inset-left)); /* clear of the notch, also sideways */
}
.shell.narrow { max-width: 420px; padding-top: calc(10vh + env(safe-area-inset-top)); }

/* ── Type ─────────────────────────────────────────────────────── */

.large-title {
  margin: 0;
  font: 700 clamp(28px, 8.4vw, 34px)/1.2 var(--font-display);
  letter-spacing: 0.37px;
  overflow-wrap: anywhere;
}
.eyebrow { margin: 0; color: var(--text2); font: 600 15px/20px var(--font-text); letter-spacing: -0.24px; }
.eyebrow-icon { flex: none; }
.tile-title { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font: 600 20px/25px var(--font-display); letter-spacing: 0.2px; }
.value-xl { font: 600 clamp(48px, 15vw, 64px)/1.06 var(--font-display); letter-spacing: -0.6px; font-variant-numeric: tabular-nums; }
.value-l { margin: 4px 0 18px; font: 600 40px/1.1 var(--font-display); letter-spacing: -0.2px; font-variant-numeric: tabular-nums; }
.value-sub { display: block; margin-top: 4px; color: var(--text2); font: 400 15px/20px var(--font-text); letter-spacing: -0.24px; }

/* A number filled with its metric's gradient. inline-block, so the gradient spans the number itself. */
.grad-text { display: inline-block; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.grad-glut { background-image: var(--g-glut); }
.grad-frisch { background-image: var(--g-frisch); }
.grad-eisblau { background-image: var(--g-eisblau); }
.grad-energie { background-image: var(--g-energie); }

/* ── Tiles ────────────────────────────────────────────────────── */

/* No border and no shadow: the white (or #1D1D1F) surface on the page color is the edge. */
.card {
  margin: 0 0 12px;
  padding: 20px;
  border-radius: var(--r-tile);
  background: var(--tile);
}

/* ── Log in ───────────────────────────────────────────────────── */

.brand { display: grid; justify-items: center; gap: 6px; margin-bottom: 28px; text-align: center; }
.brand-mark {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: 10px;
  border-radius: 18px;
  background: var(--g-energie);
  color: #FFFFFF;
}
.brand-title {
  margin: 0;
  font: 600 40px/1.1 var(--font-display);
  letter-spacing: -0.2px;
  background-image: var(--g-headline);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.brand-sub { margin: 0; color: var(--text2); font-size: 17px; }
.auth-card { padding: 24px; }

/* ── Top right: the user's picture and menu ───────────────────── */

.topbar { position: absolute; top: calc(30px + env(safe-area-inset-top)); right: 16px; z-index: 6; }
.menu-wrap { position: relative; }

.avatar, .avatar-btn {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  overflow: hidden;
  border-radius: 50%;
  background: var(--avatar-bg);
  color: #FFFFFF;
}
.avatar > *, .avatar-btn > * { grid-area: 1 / 1; }
.avatar { width: 36px; height: 36px; }
.avatar-btn { width: 40px; height: 40px; padding: 0; border: 0; cursor: pointer; }
/* the person's own picture: the kit's avatar on the Energie gradient until there is a photo */
.avatar-btn, .avatar[data-avatar], .lb-you .lb-avatar { background: var(--g-energie); }
.avatar-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (hover: hover) { .avatar-btn:hover { filter: brightness(1.06); } }

/* A round slot that shows the profile picture, else the first letter of the name, else a person icon */
.avatar-img { display: none; width: 100%; height: 100%; object-fit: cover; }
.avatar-initial { font: 600 17px/1 var(--font-display); text-transform: uppercase; }
.avatar-initial:empty { display: none; }
.avatar-initial:not(:empty) + svg { display: none; }
.has-photo > .avatar-img { display: block; }
.has-photo > svg, .has-photo > .avatar-initial { display: none; }

.menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 10;
  width: 250px;
  max-width: calc(100vw - 32px);
  padding: 6px;
  border-radius: 18px;
  background: var(--menu);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  box-shadow: var(--glass-edge), var(--float-shadow);
}
.menu-head { display: flex; align-items: center; gap: 10px; padding: 8px 10px; }
.menu-head .avatar-initial { font-size: 15px; }
.menu-username { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-sep { height: 1px; margin: 4px 10px; background: var(--hair); }
.menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 10px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 17px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.menu-item svg { color: var(--text2); }
.menu-item:focus-visible { background: var(--track); }
@media (hover: hover) { .menu-item:hover { background: var(--track); } }
.menu-item:focus-visible { outline: none; }

/* ── Page heads: the date (or a back link) over a large title ─── */

.page-head { min-height: 64px; margin: 0 0 18px; }
.page-date { margin: 0 0 2px; color: var(--text2); font: 600 15px/20px var(--font-text); letter-spacing: -0.24px; }
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin: 0 0 2px -6px;
  padding: 0 6px 0 0;
  color: var(--link);
  font-size: 17px;
  line-height: 22px;
  text-decoration: none;
}
@media (hover: hover) { .back-link:hover { text-decoration: underline; } }
.back-link:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 8px; }

/* ── Forms ────────────────────────────────────────────────────── */

label, .group-label { display: block; margin: 18px 0 8px; color: var(--text2); font: 600 15px/20px var(--font-text); letter-spacing: -0.24px; }
.field-first { margin-top: 0; }
.setting-label { display: block; margin: 0 0 8px; color: var(--text2); font: 600 15px/20px var(--font-text); }
.motion-label { margin-top: 18px; }

input, select, textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 0;
  border-radius: 12px;
  background: var(--tile2);
  color: var(--text);
  font: inherit; /* 17px keeps iOS from zooming in on focus */
}
input::placeholder, textarea::placeholder { color: var(--text3); }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 1px;
}
input[type="date"] { appearance: none; -webkit-appearance: none; display: block; }
input[type="date"]::-webkit-date-and-time-value { text-align: left; }
input[type="range"] { min-height: 0; }
textarea { resize: vertical; }
.mono { font-family: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, Menlo, monospace; font-size: 13px; line-height: 1.5; }

/* Dropdowns: no native frame, a small chevron on the right */
.select-wrap, .select-pill { position: relative; display: block; }
.select-pill { display: inline-block; }
.select-wrap::after, .select-pill::after {
  content: '';
  position: absolute;
  right: 16px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--text2);
  border-bottom: 2px solid var(--text2);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.select-wrap select { padding-right: 40px; appearance: none; -webkit-appearance: none; cursor: pointer; }

/* Segment controls (the kit's "segment"): a pill track, the chosen part as a raised capsule */
.seg, .segment {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 2px;
  padding: 4px;
  border-radius: 999px;
  background: var(--tile2);
}
.seg { margin-bottom: 16px; }
.seg button, .segment button {
  min-height: 34px;
  padding: 6px 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text2);
  font: 500 15px/1.2 var(--font-text);
  letter-spacing: -0.24px;
  cursor: pointer;
  transition: background-color 0.2s var(--ease-apple), color 0.2s var(--ease-apple);
}
@media (hover: hover) { .seg button:hover, .segment button:hover { color: var(--text); } }
.seg button[aria-pressed="true"], .segment button[aria-pressed="true"] {
  background: var(--sel);
  color: var(--text);
  font-weight: 600;
  box-shadow: var(--sel-shadow);
}
/* on the page itself (not in a tile) the track is glass, like everything that floats over content */
.segment {
  background: var(--glass);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  box-shadow: var(--glass-edge);
}
.segment-sm { display: inline-grid; padding: 3px; }
.segment-sm button { min-height: 30px; padding: 4px 16px; font-size: 14px; }

/* Chips: quick durations and favorites */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.chip {
  min-height: 36px;
  padding: 6px 14px;
  border: 0;
  border-radius: 999px;
  background: var(--tile2);
  color: var(--text);
  font: 500 15px/1.2 var(--font-text);
  letter-spacing: -0.24px;
  cursor: pointer;
}
@media (hover: hover) { .chip:hover { background: var(--track); } }
.chip[aria-pressed="true"] { background: var(--text); color: var(--tile); }

/* ── Buttons ──────────────────────────────────────────────────── */

/* The primary button: a blue pill, 50 high. One per screen. (Also a link that starts something.) */
button.primary, a.primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 50px;
  margin-top: 22px;
  padding: 0 28px;
  border: 0;
  border-radius: 999px;
  background: var(--cta);
  color: #FFFFFF;
  font: 600 17px/1 var(--font-text);
  letter-spacing: -0.374px;
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.2s var(--ease-apple), transform 0.2s var(--ease-apple);
}
@media (hover: hover) { button.primary:hover, a.primary:hover { filter: brightness(1.08); } }
button.primary:active, a.primary:active { transform: scale(0.98); }
button.primary:disabled { opacity: 0.4; cursor: default; filter: none; transform: none; }
a.primary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* Secondary: an outlined pill in blue */
.ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 18px;
  border: 1.2px solid var(--cta);
  border-radius: 999px;
  background: transparent;
  color: var(--link);
  font: 500 15px/1.2 var(--font-text);
  letter-spacing: -0.24px;
  text-decoration: none;
  cursor: pointer;
}
@media (hover: hover) { .ghost:hover { background: color-mix(in srgb, var(--cta) 8%, transparent); } }
.ghost:disabled { opacity: 0.4; cursor: default; }
.ghost.armed { border-color: var(--error); background: var(--error-bg); color: var(--error); } /* "tap again to confirm" */

/* Small round icon buttons in lists (edit, delete) */
.icon-btn { min-width: 34px; height: 34px; padding: 0 9px; border: 0; background: var(--tile2); color: var(--text2); }
@media (hover: hover) { .icon-btn:hover { background: var(--track); color: var(--text); } }
.icon-btn.armed { border: 0; font-size: 13px; font-weight: 600; }

.text-btn {
  padding: 6px 0;
  border: 0;
  background: none;
  color: var(--link);
  font: 400 15px/1.3 var(--font-text);
  letter-spacing: -0.24px;
  cursor: pointer;
}
@media (hover: hover) { .text-btn:hover { text-decoration: underline; } }

/* ── Messages ─────────────────────────────────────────────────── */

.hint { margin: 12px 0 0; color: var(--text2); font-size: 13px; line-height: 18px; letter-spacing: -0.08px; }
.hint-first { margin-top: 0; }
.hint-center { text-align: center; }
.page-note { margin: 4px 8px 0; }
.error, .success {
  margin: 12px 0 0;
  padding: 11px 14px;
  border-radius: 14px;
  font-size: 15px;
  line-height: 20px;
}
.error { background: var(--error-bg); color: var(--error); }
.success { background: var(--success-bg); color: var(--success); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.empty { padding: 36px 24px; text-align: center; }
.empty h2 { margin: 0 0 8px; font-size: 22px; overflow-wrap: anywhere; }
.empty h3 { margin: 0 0 6px; font: 600 22px/1.25 var(--font-display); }
.empty p { margin: 0; color: var(--text2); }
.empty-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  border-radius: 20px;
  background: var(--tile2);
  color: var(--text2);
}
.empty-action { margin-top: 18px; }
.empty a.primary { display: inline-flex; width: auto; margin-top: 22px; }

/* ── Bottom bar: floating glass, 64 high, with the lit tab in a capsule ── */

#app-view { padding-bottom: calc(var(--nav-h) + 28px); } /* keep content clear of the bar */
.bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  padding: 0 16px calc(12px + env(safe-area-inset-bottom)); /* the home-indicator area on iPhones */
  pointer-events: none; /* only the bar itself takes taps, not the strip around it */
}
.bottom-nav-inner {
  display: flex;
  max-width: 440px;
  height: 64px;
  margin: 0 auto;
  padding: 6px 8px;
  border-radius: 32px;
  background: var(--bar);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  box-shadow: var(--glass-edge), var(--float-shadow);
  pointer-events: auto;
}
.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  border-radius: 26px;
  color: var(--text2);
  font: 600 10px/12px var(--font-text);
  letter-spacing: 0.1px;
  text-decoration: none;
  transition: background-color 0.25s var(--ease-apple), color 0.25s var(--ease-apple);
}
.nav-icon { position: relative; display: grid; place-items: center; width: 28px; height: 26px; }
.nav-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-badge {
  position: absolute;
  top: -5px;
  left: 17px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--badge);
  color: #FFFFFF;
  font: 600 11px/18px var(--font-text);
  text-align: center;
}
@media (hover: hover) { .nav-item:hover { color: var(--text); } }
.nav-item[aria-current="page"] { background: var(--tab-pill); color: var(--tab-on); }
/* Log, the main action: a round button in the Energie gradient, raised above the middle of the bar.
   It needs no lit capsule; its label turns blue like the other tabs' when it is the open page. */
.nav-main { justify-content: flex-end; padding-bottom: 6px; } /* its label on the same line as the other tabs' */
.nav-main .nav-icon {
  width: 52px;
  height: 52px;
  margin-top: -22px;
  border-radius: 50%;
  background: var(--g-energie);
  color: #FFFFFF;
  box-shadow: 0 0 0 4px var(--page), 0 8px 20px rgba(186, 98, 252, 0.35);
  transition: transform 0.25s var(--ease-apple), box-shadow 0.25s var(--ease-apple);
}
.nav-main[aria-current="page"] { background: none; }
.nav-main[aria-current="page"] .nav-icon { box-shadow: 0 0 0 4px var(--page), 0 0 0 6px color-mix(in srgb, var(--tab-on) 45%, transparent), 0 8px 20px rgba(186, 98, 252, 0.35); }
.nav-main .nav-label { color: var(--text); }
.nav-main[aria-current="page"] .nav-label { color: var(--tab-on); }
@media (hover: hover) { .nav-main:hover .nav-icon { transform: translateY(-2px); } }
.nav-item:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }

/* ── Leaderboard ──────────────────────────────────────────────── */

/* The group's monthly goal (the kit's "stat-gross"): eyebrow, one big number, a bar */
.goal-head, .tile-head { display: flex; align-items: center; gap: 8px; }
.goal-head .eyebrow, .tile-head .eyebrow { flex: 1; min-width: 0; }
.goal-status { flex: none; color: var(--text); font: 600 15px/20px var(--font-text); white-space: nowrap; }
.goal-status.reached { color: var(--success); }
.goal-numbers { margin: 10px 0 16px; }
/* the group's total: centred, "of … points" under it */
#lb-goal .goal-numbers { margin: 18px 0 20px; text-align: center; }
.progress { height: 6px; border-radius: 999px; background: var(--track); overflow: hidden; }
.progress-bar { width: 0; height: 100%; border-radius: 999px; background: var(--g-frisch); transition: width 1.2s var(--ease-apple); }
.goal-progress .progress-bar { background: var(--g-energie); }
.goal-card .hint { margin-top: 12px; }
.goal-people { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--hair); }
.goal-people-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 4px 0; list-style: none; cursor: pointer; }
.goal-people-head::-webkit-details-marker { display: none; }
.goal-people-head::after { /* the little arrow: points down when it is open, to the side when it is folded away */
  content: '';
  flex: none;
  width: 7px;
  height: 7px;
  margin: 0 4px 3px auto;
  border-right: 2px solid var(--text2);
  border-bottom: 2px solid var(--text2);
  transform: rotate(-45deg);
  transition: transform 0.2s var(--ease-apple);
}
.goal-people[open] > .goal-people-head::after { transform: rotate(45deg); }
.goal-people-head:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 8px; }
.goal-people-title { font: 600 17px/22px var(--font-text); }
/* folded away, the pictures of the three who added the most sit in a small row right under the heading */
.goal-top { order: 1; display: flex; flex-basis: 100%; gap: 6px; margin-top: -2px; }
.goal-top:empty, .goal-people[open] .goal-top { display: none; }
.goal-top .avatar { width: 28px; height: 28px; }
.goal-top .avatar-initial { font-size: 13px; }
.goal-top .avatar svg { width: 16px; height: 16px; }
.goal-people .avatar.is-you { background: var(--g-energie); }
.goal-people-count { color: var(--text2); font-size: 15px; }
.goal-people-sub { margin: 2px 0 8px; color: var(--text2); font-size: 13px; }
.goal-list { margin: 0; padding: 0; list-style: none; }
.goal-person { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 6px 12px; padding: 8px 0; font-size: 15px; }
/* the picture on the left, beside both the name line and the bar */
.goal-person > .avatar { grid-row: span 2; align-self: center; width: 32px; height: 32px; }
.goal-person > .avatar .avatar-initial { font-size: 14px; }
.goal-person > .avatar svg { width: 18px; height: 18px; }
.goal-person-name { min-width: 0; overflow-wrap: anywhere; }
.goal-person-note { color: var(--text2); font-size: 13px; }
.goal-person-value strong { font-weight: 600; font-variant-numeric: tabular-nums; }
.goal-person-points { color: var(--text2); font-size: 13px; }
.goal-person-track { grid-column: 2 / -1; height: 6px; border-radius: 999px; background: var(--track); overflow: hidden; }
.goal-person-fill { display: block; height: 100%; border-radius: 999px; background: var(--chart-gray); }
.goal-person.is-you .goal-person-fill { background: var(--g-energie); } /* only your own bar is lit */

/* The period and ranking dropdowns: small glass pills */
.lb-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 18px 0 8px; }
.lb-custom { margin-top: 0; }
.select-pill select, .lb-custom input[type="date"] {
  width: auto;
  min-height: 36px;
  padding: 6px 36px 6px 16px;
  border-radius: 999px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  box-shadow: var(--glass-edge);
  font: 600 15px/1.3 var(--font-text);
  letter-spacing: -0.24px;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.select-pill::after { right: 15px; width: 6px; height: 6px; }
.lb-custom input[type="date"] { padding-right: 16px; }
.lb-subhead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 4px 0 12px; }
.lb-range { min-height: 1.4em; margin: 0 0 0 4px; color: var(--text2); font-size: 13px; line-height: 18px; }

/* The podium: second, first and third side by side on blocks of three heights. Only the winner is in
   color (the kit highlights one value): the Energie gradient on their block, their picture's ring and
   the crown. The blocks rise up when the podium appears. */
.podium-card { padding-bottom: 0; overflow: hidden; } /* the blocks stand on the tile's bottom edge */
.podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.podium:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 67%; margin-left: auto; margin-right: auto; }
.podium-place { display: flex; flex-direction: column; align-items: center; min-width: 0; text-align: center; }
.podium-crown { display: grid; margin-bottom: 2px; }
.podium-ring { display: grid; padding: 5px; border-radius: 50%; background: var(--chart-gray); } /* 2 px of ring outside the picture's 3 px tile-colored edge */
.podium-ring .avatar { width: 52px; height: 52px; box-shadow: 0 0 0 3px var(--tile); }
.podium-ring .avatar-initial { font-size: 20px; }
.place-1 .podium-ring { padding: 6px; background: var(--g-energie); }
.place-1 .podium-ring .avatar { width: 64px; height: 64px; }
.place-1 .podium-ring .avatar-initial { font-size: 24px; }
.podium-name { display: flex; align-items: center; justify-content: center; gap: 4px; max-width: 100%; margin-top: 8px; font: 600 15px/1.25 var(--font-text); }
.podium-name-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podium-name .lb-you-tag { flex: none; margin-left: 2px; }
.podium-score { display: grid; margin-top: 2px; line-height: 1.2; }
.podium-score strong { font: 600 20px/1.2 var(--font-display); font-variant-numeric: tabular-nums; }
.podium-score span { color: var(--text2); font-size: 12px; }
.podium-block {
  display: grid;
  place-items: start center;
  width: 100%;
  margin-top: 10px;
  padding-top: 10px;
  border-radius: 16px 16px 0 0;
  background: var(--tile2);
  transform-origin: bottom;
}
.place-1 .podium-block { height: 96px; background: var(--g-energie); }
.place-2 .podium-block { height: 68px; }
.place-3 .podium-block { height: 48px; }
.podium-rank { color: var(--text2); font: 700 24px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.place-1 .podium-rank { color: #FFFFFF; font-size: 30px; }
@keyframes podium-rise { from { transform: scaleY(0); } to { transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="off"]) .podium-block { animation: podium-rise 0.9s var(--ease-apple) both; }
  html:not([data-motion="off"]) .place-1 .podium-block { animation-delay: 0.12s; }
}
html[data-motion="on"] .podium-block { animation: podium-rise 0.9s var(--ease-apple) both; }
html[data-motion="on"] .place-1 .podium-block { animation-delay: 0.12s; }

/* The ranking: rank, picture, name with a comparison bar (the kit's "vergleichsbalken"), score */
.lb-card { padding: 8px; }
.lb-list { margin: 0; padding: 0; list-style: none; }
.lb-row {
  display: grid;
  grid-template-columns: 28px 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 20px;
}
.lb-row + .lb-row { margin-top: 2px; }
.lb-you { background: var(--tile2); }
.lb-rank {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: var(--text2);
  font: 600 15px/1 var(--font-text);
  font-variant-numeric: tabular-nums;
}
.lb-top .lb-rank { background: var(--tile2); color: var(--text); }
.lb-you.lb-top .lb-rank { background: var(--tile); }
.lb-row:first-child.lb-top .lb-rank { background: var(--g-energie); color: #FFFFFF; } /* the leader */
.lb-avatar { width: 40px; height: 40px; }
.lb-main { display: grid; gap: 7px; min-width: 0; }
.lb-name { min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
/* a long name may break anywhere, but the tags after it stay whole ("Lv 4", not "L" over "v 4"):
   one that doesn't fit moves to the next line as a piece, lined up under the name */
.lb-list .lb-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.lb-list .lb-name > * { margin-left: 0; }
.lb-list .lb-name-link { min-width: 0; }
.lb-name :is(.lb-you-tag, .lb-level, .lb-rank-chip) { white-space: nowrap; overflow-wrap: normal; }
/* a name opens that person's achievements; the whole row takes the tap too */
.lb-row, .podium-place { cursor: pointer; }
.lb-name-link, .podium-name-text { color: inherit; text-decoration: none; }
@media (hover: hover) { .lb-name-link:hover, .podium-name-text:hover { text-decoration: underline; } }
.lb-name-link:focus-visible, .podium-name-text:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
@media (hover: none) { .lb-row:active, .podium-place:active { opacity: 0.6; } }
.lb-you-tag {
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--text);
  color: var(--tile);
  font: 600 11px/1.3 var(--font-text);
  letter-spacing: 0.2px;
  vertical-align: 2px;
}
.lb-bar { display: block; height: 6px; border-radius: 999px; background: var(--track); overflow: hidden; }
.lb-fill { display: block; height: 100%; border-radius: 999px; background: var(--chart-gray); transition: width 0.9s var(--ease-apple); }
/* only your own bar carries the board's color */
.lb-list { --board: var(--g-glut); }
.lb-list[data-board="activeDays"] { --board: var(--g-frisch); }
.lb-list[data-board="running"], .lb-list[data-board="cycling"], .lb-list[data-board="walking"] { --board: var(--g-eisblau); }
.lb-you .lb-fill { background: var(--board); }
.lb-score { display: grid; justify-items: end; line-height: 1.2; }
.lb-score strong { font: 600 20px/1.2 var(--font-display); font-variant-numeric: tabular-nums; }
.lb-score span { color: var(--text2); font-size: 13px; white-space: nowrap; }
.lb-idle .lb-name, .lb-idle .lb-score, .lb-idle .lb-avatar { opacity: 0.5; }
.lb-note { margin: 10px 12px 12px; color: var(--text2); font-size: 15px; line-height: 20px; }
.lb-note a { color: var(--link); font-weight: 600; }

/* The leaderboard as a graph: thin lines, hairline grid, text in text colors, the color only on the marks */
.chart-card { padding: 20px 16px; }
.chart-card > .tile-head, .chart-hero { margin-left: 4px; margin-right: 4px; }
.chart-hero { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 8px; margin-bottom: 14px; }
.chart-hero .value-l { margin: 0; font-size: 44px; line-height: 1.05; }
.chart-hero-note { color: var(--text2); font: 600 17px/1.3 var(--font-text); letter-spacing: -0.3px; }
.chart-wrap { width: 100%; transition: opacity 0.15s ease; }
.chart-card.is-loading .chart-wrap { opacity: 0.55; } /* while new numbers load, keep the old drawing */
.chart { display: block; width: 100%; height: auto; border-radius: 8px; touch-action: pan-y; } /* a finger can scrub along the days; going up and down still scrolls the page */
.chart:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* The kit's line chart (herzlinie): hairlines without axes, one smooth 3 pt line in the ranking's
   gradient with the same gradient fading out under it (32 % to nothing) and a ring at the day being
   read; everybody else is a thin gray line. The gradient follows the ranking: Glut for points,
   Frisch for active days, Eisblau for distances. */
.chart { --cg-a: #F2416B; --cg-b: #F55600; --cg-c: #FF9F0A; }
.chart[data-gradient="frisch"] { --cg-a: var(--frisch-a); --cg-b: var(--frisch-b); --cg-c: var(--frisch-b); }
.chart[data-gradient="eisblau"] { --cg-a: var(--eisblau-a); --cg-b: var(--eisblau-b); --cg-c: var(--eisblau-b); }
.cg-a { stop-color: var(--cg-a); }
.cg-b { stop-color: var(--cg-b); }
.cg-c { stop-color: var(--cg-c); }
.cg-area-top { stop-color: var(--cg-b); stop-opacity: 0.32; }
.cg-area-bottom { stop-color: var(--cg-b); stop-opacity: 0; }
.chart-grid { stroke: var(--hair); stroke-width: 0.75; }
.chart-cursor { stroke: var(--text3); stroke-width: 1; stroke-dasharray: 2 3; }
.chart-tick { fill: var(--text3); font: 500 11px var(--font-text); font-variant-numeric: tabular-nums; }
.chart-daylabel { fill: var(--text3); font: 600 12px var(--font-text); }
.chart-daydate { font-weight: 500; font-size: 11px; }
.chart-day.is-on .chart-daylabel { fill: var(--text); }
.chart-endlabel { fill: var(--text3); font: 500 11px var(--font-text); }
.chart-endlabel-star { fill: var(--text); font-weight: 700; font-size: 12px; }
.chart-line { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.chart-other { stroke: var(--chart-other); stroke-width: 2; }
.chart-star { stroke: url(#chart-stroke); stroke-width: 3; }
.chart-area { fill: url(#chart-area); stroke: none; }
.chart-dot { fill: var(--chart-other); stroke: var(--tile); stroke-width: 1.5; }
.chart-dot-star { fill: var(--tile); stroke: var(--cg-c); stroke-width: 3; }
/* the line draws itself in, unless the device asks for less motion (Settings → Animations can overrule that) */
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="off"]) .chart-star { stroke-dasharray: 1; animation: chart-draw 1.2s var(--ease-apple) both; }
  html:not([data-motion="off"]) .chart-area { animation: chart-fade 1.2s var(--ease-apple) both; }
}
html[data-motion="on"] .chart-star { stroke-dasharray: 1; animation: chart-draw 1.2s var(--ease-apple) both; }
html[data-motion="on"] .chart-area { animation: chart-fade 1.2s var(--ease-apple) both; }
@keyframes chart-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes chart-fade { from { opacity: 0; } to { opacity: 1; } }
.chart-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 14px 4px 0; padding: 0; list-style: none; font-size: 13px; }
.chart-key { flex: none; display: inline-block; width: 14px; height: 3px; border-radius: 2px; background: var(--chart-other); }
.chart-key.star { height: 4px; background: var(--g-glut); }
#lb-chart-card:has(.chart[data-gradient="frisch"]) .chart-key.star { background: var(--g-frisch); }
#lb-chart-card:has(.chart[data-gradient="eisblau"]) .chart-key.star { background: var(--g-eisblau); }
.chart-row.is-star span:nth-child(2) { font-weight: 600; }
.chart-readout { margin: 14px 4px 0; padding-top: 12px; border-top: 1px solid var(--hair); }
.chart-readout-day { margin: 0 0 6px; font-size: 15px; font-weight: 600; }
.chart-row { display: grid; grid-template-columns: 14px 1fr auto; align-items: center; gap: 8px; padding: 3px 0; font-size: 15px; }
.chart-row strong { font-weight: 600; font-variant-numeric: tabular-nums; }
.chart-change { margin-left: 6px; color: var(--text2); font-size: 13px; font-weight: 400; }
.chart-details { margin: 0 4px; }
.chart-details summary { margin-top: 12px; color: var(--link); font-size: 15px; cursor: pointer; }
.chart-table-scroll { margin-top: 10px; overflow-x: auto; }
.chart-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.chart-table th, .chart-table td { padding: 5px 8px; border-bottom: 1px solid var(--hair); text-align: right; white-space: nowrap; }
.chart-table th:first-child, .chart-table td:first-child { text-align: left; }
.chart-table td { font-variant-numeric: tabular-nums; }

/* ── Log a workout ────────────────────────────────────────────── */

/* Your points side by side (the kit's "stat-reihe"): label, number in the points gradient, a line under it */
.stat-row { display: grid; grid-template-columns: 1fr 1fr; padding: 20px 0; }
.stat { display: grid; align-content: start; justify-items: start; gap: 2px; min-width: 0; padding: 0 20px; }
.stat + .stat { border-left: 1px solid var(--hair); }
.stat-label { color: var(--text2); font: 600 13px/18px var(--font-text); }
.stat-value { margin: 2px 0; font: 600 34px/1.15 var(--font-display); letter-spacing: 0.2px; font-variant-numeric: tabular-nums; }
.stat-sub { color: var(--text2); font-size: 13px; line-height: 18px; }

#log-form .hint { margin-top: 8px; }
#log-form .error, #log-form .success { margin-top: 14px; }
.log-preview { min-height: 1.41em; margin: 20px 0 0; font-weight: 600; }

/* The Activity field: the label with a small favorites button on the same line… */
.field-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 30px; margin-bottom: 8px; }
.field-head label { margin: 0; }
.pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 4px 12px;
  border: 0;
  border-radius: 999px;
  background: var(--tile2);
  color: var(--link);
  font: 600 13px/1.2 var(--font-text);
  cursor: pointer;
}
@media (hover: hover) { .pill-btn:hover { background: var(--track); } }

/* …then the chosen activity as a row (the kit's "workout-zeile"): icon tile, name, what a minute earns.
   The real dropdown covers the row invisibly, so a tap or click opens the device's own list. */
.activity-select {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 72px;
  padding: 12px 16px 12px 12px;
  border-radius: var(--r-row);
  background: var(--tile2);
  transition: background-color 0.2s var(--ease-apple), transform 0.2s var(--ease-apple);
}
@media (hover: hover) { .activity-select:hover { background: var(--track); } }
.activity-select:active { transform: scale(0.99); }
.activity-select:has(select:focus-visible) { outline: 3px solid var(--focus); outline-offset: 1px; }
.activity-select select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  opacity: 0;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.activity-select select:focus-visible { outline: none; }
.activity-icon { display: grid; flex: none; }
.activity-icon .icon-tile { width: 48px; height: 48px; border-radius: 14px; }
.activity-icon .icon-tile svg { width: 24px; height: 24px; }
.activity-select-text { display: grid; flex: 1; gap: 2px; min-width: 0; }
.activity-select-name { font: 600 19px/1.2 var(--font-display); letter-spacing: 0.1px; overflow-wrap: anywhere; }
.activity-select-rate { color: var(--text2); font-size: 13px; line-height: 18px; }
.activity-select-chevron { flex: none; color: var(--text3); }
.activity-hint { margin: 10px 4px 0; color: var(--text2); font-size: 13px; line-height: 18px; }
.activity-hint:empty { display: none; }

/* Choosing favorites: every activity as a tile with a tick */
.fav-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); gap: 8px; }
.fav-tile {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 8px 30px 8px 8px;
  border: 0;
  border-radius: 16px;
  background: var(--tile2);
  color: var(--text);
  font: 500 14px/1.25 var(--font-text);
  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s var(--ease-apple), box-shadow 0.2s var(--ease-apple);
}
@media (hover: hover) { .fav-tile:hover { background: var(--track); } }
.fav-tile:active { transform: scale(0.98); }
.fav-tile .icon-tile { width: 36px; height: 36px; border-radius: 11px; background: var(--tile); color: var(--text2); transition: background 0.2s var(--ease-apple); }
.fav-tile .icon-tile svg { width: 18px; height: 18px; }
.fav-name { min-width: 0; overflow-wrap: anywhere; }
.fav-check {
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--text3);
  color: transparent;
}
.fav-tile[aria-pressed="true"] { background: color-mix(in srgb, var(--cta) 9%, var(--tile)); box-shadow: inset 0 0 0 1.5px var(--cta); }
.fav-tile[aria-pressed="true"] .icon-tile { background: var(--g-glut-tile); color: #FFFFFF; }
.fav-tile[aria-pressed="true"] .fav-check { background: var(--cta); box-shadow: none; color: #FFFFFF; }
.fav-count { font-weight: 500; opacity: 0.85; }

/* What the workout will earn: a quiet row above the button, there once it can be worked out */
.log-preview-row { display: flex; align-items: center; gap: 10px; margin-top: 20px; padding: 12px 16px; border-radius: 16px; background: var(--tile2); }
.log-preview-row:has(.log-preview:empty) { display: none; }
.log-preview-row svg { flex: none; }
.log-preview-row .log-preview { min-height: 0; margin: 0; }
/* the colour inside the flame, raised and lowered with the speed (app.js setFlameLevel) */
.flame-level { transform: translateY(9.5px); transition: transform 0.35s ease; }

/* Changing a workout from the list: a banner on the form, and the row being changed is marked */
.editing-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--tile2);
  font-size: 15px;
  font-weight: 600;
}
.editing-banner .text-btn { flex: none; padding: 0; }
.workout-row.editing { margin: 0 -10px; padding-right: 10px; padding-left: 10px; border-radius: 16px; background: var(--tile2); }
.workout-row.editing + .workout-row { border-top-color: transparent; }

/* Duration: two turning wheels, hours and minutes, like the iPhone's timer. Five numbers show; the
   middle one is picked and sits on a soft band, the unit stays next to it. */
.wheel-picker {
  --wheel-row: 36px;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100%;
  height: calc(var(--wheel-row) * 5);
  user-select: none;
  -webkit-user-select: none;
}
.wheel-band {
  position: absolute;
  top: calc(var(--wheel-row) * 2);
  right: 0;
  left: 0;
  height: var(--wheel-row);
  border-radius: 10px;
  background: var(--tile2);
  pointer-events: none;
}
.wheel { position: relative; min-width: 0; height: 100%; }
.wheel-list {
  position: relative;
  box-sizing: border-box;
  height: 100%;
  padding: calc(var(--wheel-row) * 2) 0;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  overscroll-behavior: contain;
  perspective: 420px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 34%, #000 66%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 34%, #000 66%, transparent 100%);
  outline: none;
  cursor: grab;
}
.wheel-list::-webkit-scrollbar { display: none; }
.wheel-item {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: var(--wheel-row);
  padding-right: calc(50% + 3px);
  scroll-snap-align: center;
  color: var(--text2);
  font: 400 22px/1 var(--font-display);
  font-variant-numeric: tabular-nums;
  backface-visibility: hidden;
}
.wheel-item.picked { color: var(--text); }
.wheel-unit {
  position: absolute;
  top: calc(var(--wheel-row) * 2);
  left: calc(50% + 6px);
  display: flex;
  align-items: center;
  height: var(--wheel-row);
  color: var(--text);
  font: 600 17px/1 var(--font-text);
  pointer-events: none;
}
.wheel-list:focus-visible + .wheel-unit { color: var(--link); }
.wheel:has(.wheel-list:focus-visible)::after {
  content: '';
  position: absolute;
  inset: calc(var(--wheel-row) * 2 - 2px) 2px auto;
  height: calc(var(--wheel-row) + 4px);
  border-radius: 12px;
  outline: 3px solid var(--focus);
  pointer-events: none;
}
#log-fav-panel .avatar-save-row { margin-top: 16px; }
#log-fav-panel .hint { margin-top: 14px; }

/* This week's minutes (the kit's "wochenbalken"): today lit, the other days at half strength,
   and a dashed line where a day becomes an active day */
.week-hero { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 4px 0 14px; }
.week-hero .value-l { margin: 0; }
/* the change from last week: green with an arrow up, orange with an arrow down, gray when the same */
.week-trend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--tile2);
  color: var(--text2);
  font: 600 13px/1.2 var(--font-text);
  white-space: nowrap;
}
.week-trend svg { flex: none; }
.week-trend.up { background: var(--success-bg); color: var(--success); }
.week-trend.down { background: var(--down-bg); color: var(--down); }
.tile-aside { flex: none; color: var(--text2); font-size: 15px; }
.week-plot { position: relative; display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; height: 132px; }
.wb-track { display: flex; align-items: flex-end; justify-content: center; height: 100%; min-width: 0; padding: 0; border: 0; border-radius: 8px; background: none; cursor: pointer; }
.wb-track:disabled { cursor: default; }
.wb-track:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.wb-bar { width: 100%; max-width: 34px; height: 0; border-radius: 6px; background: var(--g-frisch-up); opacity: 0.5; transition: height 0.9s var(--ease-apple); }
.wb-lit .wb-bar { opacity: 1; } /* the picked day, or today when none is picked */
.wb-track:not(:disabled):active .wb-bar { transform: scaleY(0.97); transform-origin: bottom; }
@media (hover: hover) { .wb-track:not(.wb-lit):not(:disabled):hover .wb-bar { opacity: 0.75; } }
.wb-goal { position: absolute; left: 0; right: 0; height: 0; border-top: 1.5px dashed var(--chart-gray); pointer-events: none; }
.wb-goal span { position: absolute; right: 0; bottom: 3px; color: var(--text2); font: 600 12px/1 var(--font-text); }
.week-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; margin-top: 10px; }
.week-days span { color: var(--text3); font: 600 12px/1 var(--font-text); text-align: center; }
.week-days .wb-lit { color: var(--text); }
.week-days span { cursor: pointer; }

/* Recent workouts (the kit's "workout-zeile"): icon tile, title, details, points */
.workout-list { display: grid; margin: 0; padding: 0; list-style: none; }
.workout-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--hair); }
.workout-row:first-child { padding-top: 2px; border-top: 0; }
.workout-row.editing:first-child { padding-top: 12px; }
.icon-tile {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: var(--g-glut-tile);
  color: #FFFFFF;
}
.workout-main { display: grid; flex: 1; gap: 1px; min-width: 0; }
.workout-name { font-weight: 600; overflow-wrap: anywhere; }
.workout-meta { color: var(--text2); font-size: 13px; line-height: 18px; }
.workout-note { font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; }
.workout-points { display: grid; justify-items: end; flex: none; line-height: 1.2; }
.workout-points strong { font-weight: 600; font-variant-numeric: tabular-nums; }
.workout-points span { color: var(--text2); font-size: 13px; }
.workout-actions { display: flex; flex: none; gap: 6px; }
.photo-link { justify-self: start; display: inline-flex; align-items: center; gap: 4px; padding: 2px 0; font-size: 13px; }

/* An optional photo on a workout, as proof */
.photo-field { margin-top: 4px; }
.photo-optional { color: var(--text3); font-weight: 400; }
.photo-box { margin-bottom: 8px; }
.photo-canvas, .photo-existing { display: block; width: 100%; max-height: 240px; border-radius: 20px; object-fit: cover; background: var(--tile2); }
.photo-existing[hidden], .photo-canvas[hidden] { display: none; }
.photo-actions { display: flex; gap: 8px; margin-top: 10px; }
.photo-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.photo-field .hint { margin-top: 8px; }
.photo-dialog { max-width: 96vw; max-height: 94vh; padding: 0; border: 0; border-radius: 24px; background: var(--tile); color: var(--text); overflow: auto; }
.photo-dialog::backdrop { background: rgba(0, 0, 0, 0.82); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.photo-dialog img { display: block; max-width: 96vw; max-height: 78vh; margin: 0 auto; cursor: zoom-out; }
.photo-dialog-caption { margin: 12px 18px 0; color: var(--text2); font-size: 15px; }
.photo-dialog .ghost { margin: 12px 18px 16px; }

/* ── Training plan ────────────────────────────────────────────── */

.step-no {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--tile2);
  font: 600 15px/1 var(--font-text);
}
.plan-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.plan-actions-first { margin-top: 0; margin-bottom: 4px; }
#plan-content > .plan-actions { margin: 4px 0 0; }
.plan-summary { margin: 0 0 12px; font-weight: 600; }
.plan-summary + .problem-list { margin-top: 0; }
#plan-view > .success, #plan-view > .error { margin: 0 0 12px; }
#plan-check .error, #plan-check .hint { margin-top: 12px; }
#plan-check button.primary { margin-top: 16px; }

.problem-list { display: grid; gap: 6px; margin: 0 0 12px; padding: 0; list-style: none; font-size: 15px; }
.problem-list:empty { display: none; }
.problem-list li { padding: 9px 12px; border-radius: 12px; overflow-wrap: anywhere; }
.problem-errors li { background: var(--error-bg); color: var(--error); }
.problem-warnings li { background: var(--warn-bg); color: var(--warn); }
.problem-line { font-weight: 600; }

/* The week at a glance: a circle per day (today dark, green once a session is logged) and a dot
   under the days that have a session (green when still to come, grey when it passed unlogged) */
.week-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin: 16px 0 0; padding: 0; list-style: none; }
.week-day { display: grid; justify-items: center; gap: 6px; min-width: 0; }
.wd-name { color: var(--text3); font: 600 12px/1 var(--font-text); }
.week-day.is-today .wd-name { color: var(--text); }
.wd-circle {
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 36px; /* smaller on the narrowest phones, so the days never overlap */
  aspect-ratio: 1;
  border-radius: 50%;
  color: var(--text);
  font: 600 15px/1 var(--font-display);
  font-variant-numeric: tabular-nums;
}
.week-day.is-today .wd-circle { background: var(--text); color: var(--tile); }
.week-day.done .wd-circle { background: linear-gradient(135deg, var(--frisch-a), var(--frisch-b)); color: #FFFFFF; }
.week-day.done.is-today .wd-circle { box-shadow: 0 0 0 2px var(--tile), 0 0 0 4px var(--text); }
.wd-dot { width: 6px; height: 6px; border-radius: 50%; }
.week-day.planned .wd-dot, .week-day.done .wd-dot { background: var(--frisch-b); }
.week-day.missed .wd-dot { background: var(--chart-gray); }

/* Today: the session's name big, its sets, time and points side by side, the exercises, one button */
.today-name { margin: 8px 0 0; font: 600 34px/1.15 var(--font-display); letter-spacing: 0.2px; overflow-wrap: anywhere; }
.session-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 16px 0 6px; padding: 14px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.session-stats .stat { padding: 0 14px; }
.session-stats .stat:first-child { padding-left: 0; }
.session-stats .stat-value { font-size: 26px; }
.today-session + .today-session { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--hair); }
.today-session .start-link { margin-top: 18px; }
.today-note { margin: 6px 0 0; color: var(--text2); }
.today-done { display: flex; align-items: center; gap: 10px; margin: 18px 0 0; padding: 12px 16px; border-radius: 16px; background: var(--success-bg); color: var(--success); font-weight: 600; }
.today-done-icon { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, var(--frisch-a), var(--frisch-b)); color: #FFFFFF; }
.next-up { margin-top: 18px; padding: 12px 14px; border-radius: 18px; background: var(--tile2); }
.next-up-label { display: block; margin-bottom: 10px; color: var(--text2); font: 600 13px/18px var(--font-text); }
.next-up-row { display: flex; align-items: center; gap: 12px; }
.next-up-row + .next-up-row { margin-top: 10px; }
.next-up .session-badge { background: var(--tile); }

/* Exercises: numbered rows, name and extras on the left, sets × reps in a small pill on the right */
.exercise-list { display: grid; margin: 0; padding: 0; list-style: none; }
.exercise { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.exercise + .exercise { border-top: 1px solid var(--hair); }
.exercise-no {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--tile2);
  color: var(--text2);
  font: 600 13px/1 var(--font-text);
  font-variant-numeric: tabular-nums;
}
.exercise-no svg { display: none; }
.exercise-body { display: grid; flex: 1; gap: 1px; min-width: 0; }
.exercise-name { font-weight: 600; overflow-wrap: anywhere; }
.exercise-meta, .exercise-notes { color: var(--text2); font-size: 13px; line-height: 18px; overflow-wrap: anywhere; }
.exercise-notes { font-style: italic; }
.exercise-dose {
  flex: none;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--tile2);
  font: 600 13px/1.2 var(--font-text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Your sessions: a row each (letters on a tile, name, days and size), opening to the exercises */
.tile-title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.tile-title-row .tile-title { margin: 0; }
.session-list { display: grid; }
.session { border-top: 1px solid var(--hair); }
.session:first-child { border-top: 0; }
.session summary { display: flex; align-items: center; gap: 12px; padding: 12px 0; list-style: none; cursor: pointer; }
.session summary::-webkit-details-marker { display: none; }
.session summary::after { /* a chevron: to the side when closed, down when open */
  content: '';
  flex: none;
  width: 8px;
  height: 8px;
  margin: 0 6px 2px 2px;
  border-right: 2px solid var(--text3);
  border-bottom: 2px solid var(--text3);
  transform: rotate(-45deg);
  transition: transform 0.25s var(--ease-apple);
}
.session[open] summary::after { transform: rotate(45deg); }
.session summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 14px; }
.session-badge {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: var(--tile2);
  color: var(--text2);
}
.session-badge.done { background: linear-gradient(135deg, var(--frisch-a), var(--frisch-b)); color: #FFFFFF; }
.session-badge.done svg { width: 18px; height: 18px; }
.session-text { display: grid; flex: 1; gap: 1px; min-width: 0; }
.session-name { font-weight: 600; overflow-wrap: anywhere; }
.session-meta { color: var(--text2); font-size: 13px; line-height: 18px; }
.session-body { padding: 0 0 16px; }
.session-body .exercise-list { padding: 2px 14px; border-radius: 18px; background: var(--tile2); }
.session-body .exercise-no, .session-body .exercise-dose { background: var(--tile); }
.session-body .start-link { margin-top: 12px; }
#plan-preview-sessions .session:last-child .session-body { padding-bottom: 4px; }

/* Replace and delete: rows at the bottom, like iOS Settings */
.list-group { overflow: hidden; }
button.link-row { width: 100%; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.danger-row strong, .danger-row .row-icon { color: var(--error); }
.danger-row.armed { background: var(--error-bg); }

/* The session timer: a big clock, green (Frisch) while it runs */
.session-timer { text-align: center; }
.timer-label { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: var(--text2); font: 600 15px/1.2 var(--font-text); }
.timer-clock { margin: 6px 0 4px; font: 600 clamp(52px, 17vw, 68px)/1.06 var(--font-display); letter-spacing: -0.8px; font-variant-numeric: tabular-nums; }
.session-timer.running .timer-clock {
  background-image: var(--g-frisch);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.session-timer.stopped .timer-clock { color: var(--text2); }
.timer-note { min-height: 1.3em; margin: 0; color: var(--text2); font-size: 15px; }
.timer-actions { display: flex; gap: 10px; margin-top: 18px; }
.timer-actions > button { flex: 1; min-width: 0; margin-top: 0; }
.timer-actions .ghost { min-height: 50px; font-size: 17px; }
.timer-more { display: flex; justify-content: center; margin-top: 6px; }
.timer-more .text-btn.armed { color: var(--error); }
.session-hint { margin: 4px 6px 0; }

/* Finishing a session: a sheet from the bottom over the blurred page (centred on wide screens) */
.sheet-dialog {
  width: 100%;
  max-width: 568px;
  max-height: 92dvh;
  margin: auto auto 0;
  padding: 8px max(20px, env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  border: 0;
  border-radius: 28px 28px 0 0;
  background: var(--tile);
  color: var(--text);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.sheet-dialog::backdrop {
  background: color-mix(in srgb, var(--page) 55%, transparent);
  -webkit-backdrop-filter: blur(24px) saturate(170%);
  backdrop-filter: blur(24px) saturate(170%);
}
:root[data-theme="dark"] .sheet-dialog::backdrop { background: rgba(0, 0, 0, 0.5); }
@media (min-width: 620px) { .sheet-dialog { margin: auto; border-radius: 28px; } }
.sheet-grabber { width: 36px; height: 5px; margin: 0 auto 14px; border-radius: 3px; background: var(--hair); }
.sheet-dialog-title { margin: 0 0 16px; font: 700 24px/1.2 var(--font-display); letter-spacing: 0.1px; }
.finish-note { margin: 8px 0 0; }
.sheet-dialog .log-preview-row { margin-top: 14px; }
.sheet-dialog .finish-back { display: block; margin: 10px auto 0; }
html[data-motion="on"] .sheet-dialog[open] { animation: sheet-up 0.34s cubic-bezier(0.32, 0.72, 0, 1) both; }
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="off"]) .sheet-dialog[open] { animation: sheet-up 0.34s cubic-bezier(0.32, 0.72, 0, 1) both; }
}
@keyframes sheet-up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Doing a session: the ring of sets done on top, then tap each set when it's done */
.session-head { display: flex; align-items: center; gap: 20px; }
.ring { position: relative; flex: none; width: 112px; height: 112px; }
.ring svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); } /* starts at 12 o'clock */
.ring circle { fill: none; stroke-width: 13; }
.ring-track { stroke: var(--frisch-b); opacity: 0.2; } /* the track in the metric's color at 20 % */
.ring-fill { stroke: url(#g-frisch-box); stroke-linecap: round; stroke-dasharray: 0 400; transition: stroke-dasharray 1.2s var(--ease-apple); }
.ring-fill.empty { opacity: 0; }
.ring-label { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; }
.ring-label strong { font: 600 30px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.ring-label span { margin-top: 3px; color: var(--text2); font-size: 12px; }
.session-head-text { min-width: 0; }
.session-progress-text { margin: 0; font: 600 22px/1.25 var(--font-display); }
.session-about { margin: 4px 0 0; color: var(--text2); font-size: 15px; }
.session-exercises { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.session-exercise { padding: 14px 0; }
.session-exercise + .session-exercise { border-top: 1px solid var(--hair); }
.session-exercise:first-child { padding-top: 0; }
.session-exercise:last-child { padding-bottom: 0; }
.session-exercise-head { display: flex; align-items: center; gap: 12px; }
.session-exercise.complete .exercise-no { background: linear-gradient(135deg, var(--frisch-a), var(--frisch-b)); color: #FFFFFF; }
.session-exercise.complete .exercise-no-text { display: none; }
.session-exercise.complete .exercise-no svg { display: block; }
.set-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0 40px; }
.set-btn {
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: var(--tile2);
  color: var(--text2);
  font: 600 17px/1 var(--font-text);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: transform 0.2s var(--ease-apple);
}
.set-btn:active { transform: scale(0.94); }
.set-btn[aria-pressed="true"] { background: var(--g-frisch); color: #FFFFFF; }

/* ── Settings ─────────────────────────────────────────────────── */

/* Rows that open a page of their own, grouped in one tile like iOS Settings */
.list-group { padding: 6px 0; }
.link-row { position: relative; display: flex; align-items: center; gap: 14px; padding: 12px 18px; color: inherit; text-decoration: none; }
.link-row + .link-row::before { content: ''; position: absolute; top: 0; left: 64px; right: 0; border-top: 1px solid var(--hair); }
@media (hover: hover) { .link-row:hover { background: var(--track); } }
.link-row:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; border-radius: 16px; }
.row-icon { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 9px; background: var(--tile2); color: var(--text); }
.link-card-text { display: grid; flex: 1; gap: 1px; min-width: 0; }
.link-card-text strong { font-weight: 600; }
.link-card-sub { color: var(--text2); font-size: 13px; }
.chevron { flex: none; color: var(--text3); }

.save-row { margin-top: 4px; }
.save-row .error, .save-row .success { margin: 0 0 12px; }
.save-row button.primary { margin-top: 0; }

/* Profile picture on the Account page */
.avatar-lg { width: 96px; height: 96px; }
.avatar-lg .avatar-initial { font-size: 40px; }
.avatar-edit { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 12px; }
.avatar-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.avatar-actions button.primary { width: auto; margin-top: 0; }
.profile-info { display: grid; gap: 2px; min-width: 0; flex: 1; }
.profile-name { font: 600 24px/1.2 var(--font-display); overflow-wrap: anywhere; }
.profile-since { color: var(--text2); font-size: 15px; }
@media (max-width: 420px) { /* on phones, leave the name and date more room next to the picture */
  .avatar-edit { gap: 14px; }
  .avatar-lg { width: 76px; height: 76px; }
  .avatar-lg .avatar-initial { font-size: 32px; }
  .avatar-lg svg { width: 34px; height: 34px; }
  .profile-name { font-size: 20px; }
  .profile-since { font-size: 13px; }
}
.avatar-save-row { display: flex; gap: 8px; margin-top: 16px; }
.avatar-save-row .primary { width: auto; flex: 1; margin-top: 0; }
.avatar-save-row .ghost { min-height: 50px; }

/* Move-and-zoom view: the round window is what the final picture looks like */
.avatar-crop { display: grid; justify-items: center; }
.crop-stage {
  width: 240px;
  height: 240px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: var(--tile2);
  box-shadow: 0 0 0 4px var(--tile2), 0 0 0 5px var(--hair);
  cursor: grab;
  touch-action: none; /* dragging and pinching move the photo instead of scrolling the page */
}
.crop-stage:active { cursor: grabbing; }
.avatar-crop .setting-label { justify-self: start; }
input.crop-zoom { min-height: 0; padding: 0; background: transparent; accent-color: var(--cta); }
.avatar-crop .hint { margin-top: 12px; justify-self: start; }

/* Admin page for the group goal */
.goal-example { margin: 18px 0 0; font-weight: 600; }
#goal-form .hint { margin-top: 6px; }

/* Apple Health import page */
.health-status { margin: 14px 0; font-weight: 600; }
.copy-row { display: flex; gap: 8px; align-items: center; }
.copy-row input { flex: 1; min-width: 0; }
.copy-row .ghost { flex: none; }
#health-key-reveal { margin-bottom: 4px; }
.steps { display: grid; gap: 12px; margin: 0; padding-left: 22px; font-size: 15px; line-height: 1.5; }
.steps ul { display: grid; gap: 6px; margin: 8px 0 0; padding-left: 18px; }
.steps code, .card code { padding: 1px 6px; border-radius: 6px; background: var(--tile2); font-family: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, Menlo, monospace; font-size: 0.85em; overflow-wrap: anywhere; }
.steps + .hint { margin-top: 16px; }

/* ── Feed: a group chat ───────────────────────────────────────── */
/* Every workout anyone logs is a message. Yours are on the right, the others' on the left with
   their picture; the newest is at the bottom. Written messages are bubbles (yours in blue);
   workouts are small cards with the activity's icon tile. */
.feed-hint { margin: -6px 4px 14px; }
.feed-older { display: flex; margin: 0 auto 12px; }
.chat { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.chat-day { align-self: center; margin: 16px 0 6px; color: var(--text2); font: 600 12px/16px var(--font-text); }
.chat-new { display: flex; align-items: center; gap: 10px; margin: 12px 0 6px; color: var(--link); font: 600 12px/16px var(--font-text); }
.chat-new::before, .chat-new::after { content: ''; flex: 1; height: 1px; background: currentColor; opacity: 0.4; }
.chat-row { display: flex; align-items: flex-end; gap: 8px; }
.chat-row.mine { flex-direction: row-reverse; }
.chat-row.starts-run { margin-top: 10px; }
.chat-row .lb-avatar, .chat-avatar-spacer { flex: none; width: 32px; height: 32px; }
.chat-row .lb-avatar svg { width: 18px; height: 18px; }
.chat-row .avatar-initial { font-size: 14px; }
.chat-bubble {
  min-width: 0;
  max-width: min(84%, 440px);
  padding: 10px 14px 8px;
  border-radius: 20px 20px 20px 6px;
  background: var(--tile);
  overflow-wrap: anywhere;
}
.chat-row:not(.ends-run) .chat-bubble { border-bottom-left-radius: 20px; }
.chat-row.mine .chat-bubble { border-radius: 20px 20px 6px 20px; }
.chat-row.mine:not(.ends-run) .chat-bubble { border-bottom-right-radius: 20px; }
.chat-row.mine .chat-text { background: var(--cta); color: #FFFFFF; }
.chat-name { margin-bottom: 4px; color: var(--text2); font: 600 13px/18px var(--font-text); }

/* A workout: icon tile, what and how much, the points on the right */
.chat-workout { display: flex; align-items: center; gap: 10px; min-width: min(240px, 60vw); }
.chat-workout .icon-tile { width: 40px; height: 40px; border-radius: 12px; }
.chat-workout-text { flex: 1; min-width: 0; }
.chat-title { font-weight: 600; line-height: 1.25; }
.chat-stats { color: var(--text2); font-size: 13px; line-height: 18px; }
.chat-note { margin: 10px 0 0; font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; } /* the owner's line for the group */
.chat-points { display: grid; justify-items: end; flex: none; line-height: 1.2; }
.chat-points strong { font-weight: 600; font-variant-numeric: tabular-nums; }
.chat-points span { color: var(--text2); font-size: 12px; }
.chat-photo { display: block; width: 100%; height: 200px; margin-top: 10px; border-radius: 14px; object-fit: cover; cursor: zoom-in; background: var(--tile2); } /* a fixed height, so the chat doesn't jump while photos load */
.chat-foot { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 6px; }
.chat-foot-end { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
.chat-time { color: var(--text3); font-size: 11px; font-variant-numeric: tabular-nums; }
.chat-row.mine .chat-text .chat-time { color: rgba(255, 255, 255, 0.75); }

/* Written messages */
.chat-body { white-space: pre-wrap; } /* keeps the line breaks that were typed */
.chat-text .chat-foot { margin-top: 2px; }
.chat-delete { padding: 2px 4px; border: 0; border-radius: 6px; background: none; color: var(--text2); font: inherit; font-size: 11px; cursor: pointer; }
.chat-row.mine .chat-delete { color: rgba(255, 255, 255, 0.8); }
@media (hover: hover) { .chat-delete:hover { text-decoration: underline; } }
.chat-delete.armed { background: var(--error-bg); color: var(--error); font-weight: 600; text-decoration: none; }
.chat-row.mine .chat-delete.armed { background: #FFFFFF; color: #D70015; }
.chat-delete:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }

/* Reactions: chips under a workout, a button to add one, and the picker that opens below */
.react-row { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
.react-chip { display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 2px 10px; border: 0; border-radius: 999px; background: var(--tile2); color: var(--text); font: 600 13px/1.2 var(--font-text); font-variant-numeric: tabular-nums; cursor: pointer; }
.react-chip[aria-pressed="true"] { background: color-mix(in srgb, var(--cta) 16%, var(--tile)); color: var(--link); }
.react-chip .react-emoji { font-size: 16px; line-height: 1; }
.react-chip.sticker { padding: 2px 10px 2px 6px; }
.react-chip.sticker .react-emoji { font-size: 22px; }
.react-add { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--text2); cursor: pointer; }
.react-add[aria-expanded="true"] { background: var(--tile2); color: var(--text); }
@media (hover: hover) { .react-add:hover { background: var(--tile2); color: var(--text); } }
.react-chip:focus-visible, .react-add:focus-visible, .react-pick:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.react-picker { margin-top: 10px; padding: 6px; border-radius: 18px; background: var(--tile2); scroll-margin-bottom: 170px; } /* (clear of the box for writing) */
.react-emojis, .react-stickers { display: flex; flex-wrap: wrap; gap: 2px; }
.react-stickers { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--hair); }
.react-pick { display: flex; align-items: center; justify-content: center; flex-direction: column; min-width: 44px; height: 44px; padding: 0 4px; border: 0; border-radius: 12px; background: none; color: var(--text); font: inherit; cursor: pointer; }
.react-pick .react-emoji { font-size: 24px; line-height: 1.2; }
.react-pick.sticker { width: 74px; height: auto; padding: 6px 2px 4px; }
.react-pick.sticker .react-emoji { font-size: 30px; }
.react-caption { color: var(--text2); font-size: 11px; font-weight: 600; line-height: 1.2; }
.react-chip .react-caption { color: inherit; font-size: 12px; }
.react-chip[aria-expanded="true"] { box-shadow: inset 0 0 0 1.5px var(--text3); }
@media (hover: hover) { .react-pick:hover { background: var(--tile); } }
.react-pick[aria-pressed="true"] { background: var(--tile); box-shadow: inset 0 0 0 2px var(--cta); }
.who-panel { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; padding: 4px 10px; border-radius: 18px; background: var(--tile2); scroll-margin-bottom: 170px; }
.who-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.who-row + .who-row { border-top: 1px solid var(--hair); }
.who-emoji { flex: none; width: 32px; text-align: center; font-size: 24px; line-height: 1.2; }
.who-text { flex: 1; min-width: 0; }
.who-label { color: var(--text2); font-size: 11px; font-weight: 600; }
.who-names { font-size: 15px; font-weight: 600; }
.who-act { flex: none; min-height: 34px; padding: 0 12px; font-size: 13px; }

/* The box for writing: a glass bar resting just above the bottom bar, sticking there while the chat scrolls */
#app-view:has(#feed-view:not([hidden])) { padding-bottom: var(--nav-h); }
.chat-compose { position: sticky; bottom: var(--nav-h); z-index: 4; margin-top: 12px; padding: 8px 0 10px; }
.chat-compose .error { margin: 0 0 8px; }
.chat-form {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: 6px;
  border-radius: 28px;
  background: var(--bar);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  box-shadow: var(--glass-edge), var(--float-shadow);
}
.chat-log, .chat-send { flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 50%; }
.chat-log { background: var(--tile2); color: var(--text); text-decoration: none; }
@media (hover: hover) { .chat-log:hover { background: var(--track); } }
.chat-send { border: 0; background: var(--cta); color: #FFFFFF; cursor: pointer; }
.chat-send:disabled { opacity: 0.4; cursor: default; }
.chat-log:focus-visible, .chat-send:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.chat-input { flex: 1; min-width: 0; min-height: 40px; height: 40px; max-height: 120px; padding: 8px 16px; border-radius: 20px; background: var(--tile2); line-height: 1.4; resize: none; overflow-y: auto; }
/* On a phone the keyboard needs the room: the bottom bar steps aside while typing in any field */
@media (hover: none) and (pointer: coarse) {
  body:has(:is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]), textarea):focus) .bottom-nav { display: none; }
  body:has(.chat-form:focus-within) .chat-compose { padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
}

/* ── Achievements ─────────────────────────────────────────────── */
/* Tiers in the design kit's chip family: BASIS Mint, PRO Eisblau, MAX Orchidee; an achievement with a
   single tier uses Energie. A medal is the achievement's badge (badges.js), which brings its own rim,
   colours and shadow; the box only sizes it. The badges' own sizes: 64px in rows, 40px at the least. */
:root {
  --tier-0: linear-gradient(135deg, #9DCFCA 0%, #4F9C96 100%);
  --tier-1: linear-gradient(135deg, #83A0EF 0%, #3D5FD9 100%);
  --tier-2: linear-gradient(135deg, #C683EF 0%, #8A3FD9 100%);
  --tier-solo: var(--g-energie);
}
.medal { display: block; flex: none; width: 52px; height: 52px; }
.medal svg { display: block; width: 100%; height: 100%; }
.medal-lg { width: 64px; height: 64px; }
.medal-sm { width: 40px; height: 40px; }

/* the tile on Stats */
.ach-summary { padding-bottom: 0; overflow: hidden; }
.ach-latest { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 16px 0 4px; padding: 0; list-style: none; }
.ach-latest-item { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; text-align: center; }
.ach-latest-item .medal { width: 64px; height: 64px; }
.ach-latest-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 13px/1.2 var(--font-text); }
.ach-latest-tier { margin-top: -4px; color: var(--text2); font: 600 11px/1.2 var(--font-text); letter-spacing: 0.3px; }
.ach-next { margin: 12px 0 4px; color: var(--text2); font-size: 15px; line-height: 20px; }
.ach-all { margin: 12px -20px 0; padding: 14px 20px; border-top: 1px solid var(--hair); }
.ach-all strong { color: var(--link); font-weight: 500; }

/* the page */
.ach-hero-numbers { margin: 0 0 14px; }
.ach-hero-progress .progress-bar { background: var(--g-energie); }
.ach-hero .hint { margin-top: 14px; }
.ach-list { margin: 0; padding: 0; list-style: none; }
.ach-row { display: flex; align-items: flex-start; gap: 14px; padding: 16px 0; }
.ach-row + .ach-row { border-top: 1px solid var(--hair); }
.ach-row:first-child { padding-top: 4px; }
.ach-body { display: grid; flex: 1; gap: 6px; min-width: 0; }
.ach-title strong { font: 600 17px/1.3 var(--font-text); }
.ach-text { margin: 0; color: var(--text2); font-size: 15px; line-height: 20px; }
.ach-progress { display: flex; align-items: center; gap: 10px; }
.ach-bar { flex: 1; min-width: 0; }
.ach-bar.tier-0 .progress-bar { background: var(--tier-0); }
.ach-bar.tier-1 .progress-bar { background: var(--tier-1); }
.ach-bar.tier-2 .progress-bar { background: var(--tier-2); }
.ach-bar.tier-solo .progress-bar { background: var(--tier-solo); }
.ach-amount { flex: none; color: var(--text2); font: 600 13px/1.2 var(--font-text); font-variant-numeric: tabular-nums; }
.ach-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 2px; } /* the three tiers in one row */
.ach-tiers:has(> :only-child) { grid-template-columns: minmax(0, 12rem); }
.ach-tier { display: grid; gap: 1px; min-width: 0; padding: 5px 9px; border-radius: 12px; background: var(--tile2); color: var(--text2); }
.ach-tier-name { font: 700 11px/1.2 var(--font-text); letter-spacing: 0.4px; }
.ach-tier-sub { overflow: hidden; font: 500 12px/1.2 var(--font-text); font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.ach-tier.earned { color: #FFFFFF; }
.ach-tier.earned.tier-0 { background: var(--tier-0); }
.ach-tier.earned.tier-1 { background: var(--tier-1); }
.ach-tier.earned.tier-2 { background: var(--tier-2); }
.ach-tier.earned.tier-solo { background: var(--tier-solo); }
.ach-rarity { margin: 0; color: var(--text3); font-size: 12px; }

/* the pop-up after an unlock: a glass pill sliding down from the top */
.ach-toast {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 12px);
  left: 50%;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  width: max-content;
  max-width: min(420px, calc(100vw - 32px));
  padding: 10px 18px 10px 10px;
  border-radius: 999px;
  background: var(--menu);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  box-shadow: var(--glass-edge), var(--float-shadow);
  color: var(--text);
  text-decoration: none;
  transform: translateX(-50%);
  animation: toast-in 0.5s var(--ease-apple) both;
}
.ach-toast.leaving { animation: toast-out 0.4s var(--ease-apple) both; }
.ach-toast-text { display: grid; min-width: 0; }
.ach-toast-text strong { font: 600 15px/1.25 var(--font-text); }
.ach-toast-text span { overflow: hidden; color: var(--text2); font-size: 13px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, -24px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes toast-out { from { opacity: 1; transform: translate(-50%, 0); } to { opacity: 0; transform: translate(-50%, -24px); } }
html[data-motion="off"] .ach-toast, html[data-motion="off"] .ach-toast.leaving { animation-duration: 1ms; }
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="on"]) .ach-toast, html:not([data-motion="on"]) .ach-toast.leaving { animation-duration: 1ms; }
}

/* an unlock in the feed: a centered note between the bubbles */
.chat-ach { display: flex; flex-direction: column; align-items: center; margin: 10px 0 4px; }
.chat-ach-top { display: flex; align-items: center; gap: 4px; max-width: 100%; }
.chat-ach .react-row { justify-content: center; margin-top: 6px; }
.chat-ach .who-panel, .chat-ach .react-picker { width: min(100%, 420px); }
.chat-ach-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 5px 14px 5px 5px;
  border-radius: 999px;
  background: var(--tile);
  color: var(--text);
  font-size: 13px;
  line-height: 1.3;
  text-decoration: none;
}
.chat-ach-text { min-width: 0; }
.chat-ach-text strong { font-weight: 600; }
.chat-ach-pill .chat-time { margin-left: 2px; }

/* ── Weekly goal: a ring in the points gradient (Glut), like Apple's Move ring ── */
.goal-ring-body { display: flex; align-items: center; gap: 20px; margin-top: 14px; }
.ring-goal { width: 120px; height: 120px; }
.ring-goal .ring-track { stroke: #F55600; opacity: 0.16; }
.ring-goal .ring-fill { stroke: url(#g-glut-box); }
.ring-goal .ring-label strong { font-size: 28px; }
.goal-ring-card.closed .ring-goal { filter: drop-shadow(0 0 10px rgba(245, 86, 0, 0.35)); }
.goal-ring-text { display: grid; gap: 2px; min-width: 0; }
.goal-ring-numbers { margin: 0; color: var(--text2); font-size: 15px; }
.goal-ring-numbers strong { color: var(--text); font: 600 28px/1.15 var(--font-display); font-variant-numeric: tabular-nums; }
.goal-ring-note { margin: 2px 0 0; font: 600 15px/1.3 var(--font-text); }
.goal-ring-note.reached { color: var(--success); }
.goal-ring-text .text-btn { justify-self: start; margin-top: 4px; }
.goal-streak { color: var(--down); font-weight: 600; }
.goal-empty { margin-top: 10px; }
.goal-empty-text { margin: 0 0 14px; color: var(--text2); font-size: 15px; line-height: 20px; }
.goal-form { margin-top: 16px; }
.goal-form-more { display: flex; justify-content: center; gap: 24px; margin-top: 8px; }
.goal-remove { color: var(--error); }
.goal-medal {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--g-glut-tile);
  color: #FFFFFF;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35);
}
.goal-medal svg { width: 22px; height: 22px; }

/* ── Last week in review (Stats) ── */
.recap-close {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  margin: -4px -6px -4px 4px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--tile2);
  color: var(--text2);
  cursor: pointer;
}
@media (hover: hover) { .recap-close:hover { background: var(--track); color: var(--text); } }
.recap-close:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.recap-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 8px 0 14px; }
.recap-points { display: flex; align-items: baseline; gap: 6px; margin: 0; }
.recap-points .value-l { margin: 0; }
.recap-unit { color: var(--text2); font-size: 15px; }
.recap-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.recap-fact { display: grid; gap: 2px; padding: 10px 12px; border-radius: 16px; background: var(--tile2); min-width: 0; }
.recap-fact strong { font: 600 20px/1.2 var(--font-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.recap-fact span { color: var(--text2); font-size: 12px; line-height: 1.25; }
.recap-lines { display: grid; gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; }
.recap-line { display: flex; align-items: center; gap: 10px; font-size: 15px; line-height: 20px; }
.recap-line-icon { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 9px; background: var(--tile2); color: var(--text2); }
.recap-line.good .recap-line-icon { background: var(--success-bg); color: var(--success); }
.recap-line-text { min-width: 0; overflow-wrap: anywhere; }
.recap-medals { display: flex; flex: none; }
.recap-medals .medal + .medal { margin-left: -14px; }
@media (max-width: 420px) { .recap-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── Challenges ── */
/* the metric's icon tile: points Glut (the default), activity Frisch, distance Eisblau, the recap Energie */
.icon-tile.tile-frisch { background: linear-gradient(135deg, var(--frisch-a), var(--frisch-b)); }
.icon-tile.tile-eisblau { background: linear-gradient(135deg, #8FA6F5, #4C6FE0); }
.icon-tile.tile-energie { background: var(--g-energie); }
.icon-tile-sm { width: 34px; height: 34px; border-radius: 10px; }
.tile-link { display: inline-flex; align-items: center; gap: 4px; flex: none; color: var(--link); font: 500 15px/1.2 var(--font-text); text-decoration: none; }
@media (hover: hover) { .tile-link:hover { text-decoration: underline; } }
.tile-link:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.challenges-card { padding-bottom: 0; overflow: hidden; }
.challenge-list { display: grid; margin: 10px 0 0; padding: 0; list-style: none; }
.challenge-item + .challenge-item { border-top: 1px solid var(--hair); }
.challenge-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; color: inherit; text-decoration: none; }
.challenge-row:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 12px; }
@media (hover: hover) { .challenge-row:hover .challenge-row-name { text-decoration: underline; } }
@media (hover: none) { .challenge-row:active { opacity: 0.6; } }
.challenge-row-text { display: grid; flex: 1; gap: 1px; min-width: 0; }
.challenge-row-name { font-weight: 600; overflow-wrap: anywhere; }
.challenge-row-sub { color: var(--text2); font-size: 13px; line-height: 18px; }
.challenge-tag { flex: none; padding: 3px 10px; border-radius: 999px; background: var(--tile2); color: var(--link); font: 600 12px/1.4 var(--font-text); }
.challenge-tag.invite { background: var(--cta); color: #FFFFFF; }
.challenges-card .ach-all { margin-top: 4px; }
.challenges-group .challenge-list { margin-top: 0; }
.challenges-group .challenge-item:first-child .challenge-row { padding-top: 0; }
.challenges-group .challenge-item:last-child .challenge-row { padding-bottom: 0; }
a.primary.challenges-new { margin-top: 8px; }

.challenge-head { display: flex; align-items: center; gap: 14px; }
.challenge-head-text { display: grid; gap: 1px; min-width: 0; }
.challenge-metric { font: 600 17px/1.3 var(--font-text); }
.challenge-dates { color: var(--text2); font-size: 15px; }
.challenge-status { margin: 18px 0 10px; font: 600 28px/1.15 var(--font-display); letter-spacing: -0.2px; }
.challenge-time .progress-bar { background: var(--g-glut); }
.challenge-hero[data-tile="frisch"] .challenge-time .progress-bar { background: var(--g-frisch); }
.challenge-hero[data-tile="eisblau"] .challenge-time .progress-bar { background: var(--g-eisblau); }
.challenge-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; }
.challenge-actions button.primary { flex: 1; width: auto; margin-top: 0; }
.challenge-actions .ghost { flex: 1; min-height: 50px; }
.challenge-actions .text-btn { flex-basis: 100%; }
.challenge-cancel { color: var(--error); }
.challenge-cancel.armed { font-weight: 600; }

/* starting one */
.metric-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.metric-tile {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px;
  border: 0;
  border-radius: 18px;
  background: var(--tile2);
  color: var(--text);
  font: 500 15px/1.25 var(--font-text);
  text-align: left;
  cursor: pointer;
}
.metric-tile[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--cta); background: color-mix(in srgb, var(--cta) 8%, var(--tile2)); font-weight: 600; }
.metric-tile:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.metric-tile-name { min-width: 0; overflow-wrap: anywhere; }
.cf-spans { margin: 0 0 4px; }
.date-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.date-pair input { width: 100%; }
.label-note { color: var(--text3); font-weight: 400; }
.people-pick { display: grid; gap: 4px; margin: 14px 0 0; padding: 0; list-style: none; }
.person-pick {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 16px;
  background: transparent;
  color: var(--text);
  font: 500 17px/1.3 var(--font-text);
  text-align: left;
  cursor: pointer;
}
@media (hover: hover) { .person-pick:hover { background: var(--track); } }
.person-pick:focus-visible { outline: 3px solid var(--focus); outline-offset: -2px; }
.person-pick .lb-avatar { width: 36px; height: 36px; }
.person-pick-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.person-pick-check { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--chart-gray); color: transparent; }
.person-pick[aria-pressed="true"] .person-pick-check { background: var(--cta); box-shadow: none; color: #FFFFFF; }

/* ── Challenges and the weekly recap in the feed: cards in the middle of the chat ── */
.chat-event { display: flex; justify-content: center; margin: 12px 0 6px; }
.event-card {
  width: min(100%, 440px);
  padding: 14px;
  border-radius: var(--r-row);
  background: var(--tile);
  cursor: pointer;
}
.event-card:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.recap-event { cursor: default; }
.event-head { display: flex; align-items: center; gap: 12px; }
.event-head-text { display: grid; flex: 1; min-width: 0; }
.event-kicker { color: var(--text2); font: 600 12px/16px var(--font-text); letter-spacing: 0.1px; }
.event-title { font: 600 17px/1.3 var(--font-text); overflow-wrap: anywhere; }
.event-sub { color: var(--text2); font-size: 13px; line-height: 18px; }
.event-head .chat-time { align-self: flex-start; }
.event-note { margin: 10px 0 0; color: var(--text2); font-size: 13px; line-height: 18px; }
.event-podium { display: grid; gap: 4px; margin: 12px 0 0; padding: 0; list-style: none; }
.event-place { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 14px; font-size: 15px; }
.event-place.is-you { background: var(--tile2); }
.event-rank { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--tile2); color: var(--text2); font: 600 12px/1 var(--font-text); }
.event-place.is-you .event-rank { background: var(--tile); }
.event-place .event-rank.rank-1 { background: var(--g-energie); color: #FFFFFF; } /* (also on your own row) */
.event-place .lb-avatar { width: 28px; height: 28px; }
.event-place .lb-avatar svg { width: 16px; height: 16px; }
.event-place .avatar-initial { font-size: 12px; }
.event-name { flex: 1; min-width: 0; overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.event-value { flex: none; font-weight: 600; font-variant-numeric: tabular-nums; }
.event-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.event-facts li { display: grid; padding: 8px 10px; border-radius: 14px; background: var(--tile2); min-width: 0; }
.event-facts strong { font: 600 17px/1.2 var(--font-display); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.event-facts span { color: var(--text2); font-size: 12px; }
.event-actions { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.event-btn {
  min-height: 34px;
  padding: 0 16px;
  border: 1.2px solid var(--cta);
  border-radius: 999px;
  background: transparent;
  color: var(--link);
  font: 600 14px/1 var(--font-text);
  cursor: pointer;
}
.event-btn.primary-btn { border-color: var(--cta); background: var(--cta); color: #FFFFFF; }
.event-btn:disabled { opacity: 0.4; cursor: default; }
.event-in { color: var(--success); font: 600 13px/1 var(--font-text); }

/* ── Lifts: the sets of a session as a table, and the records page ── */
.set-table { display: grid; gap: 6px; margin: 12px 0 0; }
.set-line {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 76px 60px 44px;
  align-items: center;
  gap: 8px;
  padding: 4px 4px 4px 8px;
  border-radius: 14px;
  transition: background 0.2s var(--ease-apple);
}
.set-head { padding-top: 0; padding-bottom: 0; color: var(--text2); font: 600 12px/16px var(--font-text); letter-spacing: 0.2px; text-transform: uppercase; }
.set-head span:nth-child(3), .set-head span:nth-child(4) { text-align: center; }
.set-no { color: var(--text2); font: 600 15px/1 var(--font-text); font-variant-numeric: tabular-nums; }
.set-last { min-width: 0; overflow: hidden; color: var(--text3); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
input.set-input {
  min-height: 40px;
  padding: 6px 4px;
  border-radius: 12px;
  font-size: 17px;
  font-weight: 600;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
input.set-input.invalid { box-shadow: inset 0 0 0 2px var(--error); }
.set-tick {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 12px;
  background: var(--tile2);
  color: var(--text3);
  cursor: pointer;
  transition: transform 0.2s var(--ease-apple);
}
.set-tick:active { transform: scale(0.94); }
.set-tick:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.set-tick[aria-pressed="true"] { background: var(--g-frisch); color: #FFFFFF; }
.set-line.done { background: color-mix(in srgb, var(--frisch-b) 12%, transparent); }
.set-line.done input.set-input { background: transparent; }

.row-icon-frisch { background: linear-gradient(135deg, var(--frisch-a), var(--frisch-b)); color: #FFFFFF; }
.lift-card .tile-title { margin-bottom: 10px; overflow-wrap: anywhere; }
.lift-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.lift-stat { display: grid; gap: 2px; min-width: 0; }
.lift-value { display: inline-block; justify-self: start; background-image: var(--g-frisch); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; font: 600 30px/1.15 var(--font-display); font-variant-numeric: tabular-nums; }
.lift-chart { display: block; width: 100%; height: 56px; margin-top: 14px; overflow: visible; }
.lift-line { fill: none; stroke: url(#g-frisch-box); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.lift-dot { fill: var(--frisch-b); stroke: var(--tile); stroke-width: 2; vector-effect: non-scaling-stroke; }
.lift-last { margin: 12px 0 0; color: var(--text2); font-size: 13px; line-height: 18px; font-variant-numeric: tabular-nums; }

/* ── Ranks: Iron, Bronze, Silver, Gold, Platinum, Emerald, Diamond, Master, Grandmaster, Challenger ──
   Colours taken from the rank artwork (public/ranks). Challenger's name is drawn in its gold-and-ice gradient. */
:root {
  --rank-0: linear-gradient(135deg, #D5D8DD 0%, #6B7079 100%);
  --rank-1: linear-gradient(135deg, #E3A57A 0%, #A0582D 100%);
  --rank-2: linear-gradient(135deg, #E9EDF2 0%, #98A2AE 100%);
  --rank-3: linear-gradient(135deg, #FFE08A 0%, #E39B12 100%);
  --rank-4: linear-gradient(135deg, #B9F2EA 0%, #3FA8B8 100%);
  --rank-5: linear-gradient(135deg, #A6EBC0 0%, #1E9E55 100%);
  --rank-6: linear-gradient(135deg, #A8D4FF 0%, #2F6FE0 100%);
  --rank-7: linear-gradient(135deg, #E3B5FF 0%, #8B3FE0 100%);
  --rank-8: linear-gradient(135deg, #FFB3AC 0%, #D9363E 100%);
  --rank-9: linear-gradient(135deg, #CDE9FF 0%, #F6D27A 50%, #D9A21B 100%);
  --rank-text-0: #5F6670; --rank-text-1: #A0582D; --rank-text-2: #7D8794; --rank-text-3: #C27F00; --rank-text-4: #2F8E9C;
  --rank-text-5: #1B8A4A; --rank-text-6: #2563D9; --rank-text-7: #8A3FD6; --rank-text-8: #C8323A;
  --rank-text-9: linear-gradient(90deg, #3C8FD8 0%, #C9900F 100%);
}
:root[data-theme="dark"] {
  --rank-text-0: #C3C8CF; --rank-text-1: #E3A57A; --rank-text-2: #C9D0D8; --rank-text-3: #FFD25E; --rank-text-4: #8FE3D8;
  --rank-text-5: #7FE0A3; --rank-text-6: #8DBBFF; --rank-text-7: #D3A4FF; --rank-text-8: #FF9D96;
  --rank-text-9: linear-gradient(90deg, #A9D8FF 0%, #FFD86B 100%);
}
.rank-badge {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: #FFFFFF;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35);
}
.rank-badge svg { width: 22px; height: 22px; }
.rank-badge.rank-0 { background: var(--rank-0); }
.rank-badge.rank-1 { background: var(--rank-1); }
.rank-badge.rank-2 { background: var(--rank-2); }
.rank-badge.rank-2 { color: #4A525C; }
.rank-badge.rank-3 { background: var(--rank-3); }
.rank-badge.rank-4 { background: var(--rank-4); }
.rank-badge.rank-5 { background: var(--rank-5); }
.rank-badge.rank-6 { background: var(--rank-6); }
.rank-badge.rank-7 { background: var(--rank-7); }
.rank-badge.rank-8 { background: var(--rank-8); }
.rank-badge.rank-9 { background: var(--rank-9); }
.rank-badge.unranked { background: var(--tile2); color: var(--text3); box-shadow: none; }
.rank-badge-lg { width: 52px; height: 52px; }
.rank-badge-lg svg { width: 24px; height: 24px; }
.rank-badge-xl { width: 84px; height: 84px; box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.4); }
.rank-badge-xl svg { width: 40px; height: 40px; }
.rank-badge-sm { width: 26px; height: 26px; }
.rank-badge-sm svg { width: 14px; height: 14px; }
.rank-badge-xs { width: 16px; height: 16px; box-shadow: none; }
.rank-badge-xs svg { width: 10px; height: 10px; stroke-width: 2.6; }
.ach-latest-item .rank-badge { width: 52px; height: 52px; }
.ach-latest-item .rank-badge svg { width: 24px; height: 24px; }
.rank-text-0 { color: var(--rank-text-0); } .rank-text-1 { color: var(--rank-text-1); } .rank-text-2 { color: var(--rank-text-2); }
.rank-text-3 { color: var(--rank-text-3); } .rank-text-4 { color: var(--rank-text-4); } .rank-text-5 { color: var(--rank-text-5); }
.rank-text-6 { color: var(--rank-text-6); } .rank-text-7 { color: var(--rank-text-7); } .rank-text-8 { color: var(--rank-text-8); }
.rank-text-9 { background-image: var(--rank-text-9); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rank-text-9 .rank-badge { -webkit-background-clip: border-box; background-clip: border-box; }

.ranks-hero { display: flex; align-items: center; gap: 18px; }
.ranks-hero-text { display: grid; gap: 2px; min-width: 0; }
.ranks-hero-name { font: 600 30px/1.15 var(--font-display); }
.ranks-hero-sub { color: var(--text2); font-size: 15px; line-height: 20px; }
.card.ranks-profile { padding: 14px 20px; }
.rank-list { margin: 0; padding: 0; list-style: none; }
.rank-row { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; }
.rank-row + .rank-row { border-top: 1px solid var(--hair); }
.rank-row:first-child { padding-top: 2px; }
.rank-row:last-child { padding-bottom: 2px; }
.rank-body { display: grid; flex: 1; gap: 6px; min-width: 0; }
.rank-title { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.rank-title strong { font: 600 17px/1.3 var(--font-text); }
.rank-tier { flex: none; color: var(--text3); font: 700 13px/1.3 var(--font-text); letter-spacing: 0.3px; text-transform: uppercase; }
.rank-best, .rank-next { margin: 0; color: var(--text2); font-size: 14px; line-height: 19px; }
.rank-next { font-size: 13px; }
.rank-bar .progress-bar { background: var(--chart-gray); }
.rank-fill-0 .progress-bar { background: var(--rank-0); }
.rank-fill-1 .progress-bar { background: var(--rank-1); }
.rank-fill-2 .progress-bar { background: var(--rank-2); }
.rank-fill-3 .progress-bar { background: var(--rank-3); }
.rank-fill-4 .progress-bar { background: var(--rank-4); }
.rank-fill-5 .progress-bar { background: var(--rank-5); }
.rank-fill-6 .progress-bar { background: var(--rank-6); }
.rank-fill-7 .progress-bar { background: var(--rank-7); }
.rank-fill-8 .progress-bar { background: var(--rank-8); }
.rank-fill-9 .progress-bar { background: var(--rank-9); }

/* a member's ranks, and the chip on the leaderboard */
.rank-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.rank-chip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: 999px; background: var(--tile2); font-size: 14px; }
.rank-chip-name { font-weight: 600; }
.rank-chip-tier { font: 700 11px/1 var(--font-text); letter-spacing: 0.3px; text-transform: uppercase; }
.lb-rank-chip { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; font: 700 11px/1 var(--font-text); letter-spacing: 0.3px; text-transform: uppercase; vertical-align: 1px; }

/* what an exercise counts as (Your lifts) */
.lift-rank { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--hair); color: var(--text2); font: 500 14px/1.3 var(--font-text); }
.lift-rank .select-pill select { min-height: 34px; font-size: 14px; }

/* exercises on the Log form */
.log-exercises { display: grid; gap: 12px; margin-bottom: 12px; }
.log-exercise { padding: 12px; border-radius: 18px; background: var(--tile2); }
.log-exercise-head { display: flex; align-items: center; gap: 8px; }
.log-exercise-name { flex: 1; min-width: 0; background: var(--tile); font-weight: 600; }
.log-exercise .icon-btn { background: var(--tile); }
.log-exercise-kind { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; margin: 10px 0 8px; background: var(--track); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.log-sets { display: grid; gap: 6px; }
.log-set { display: grid; grid-template-columns: 24px minmax(0, 1fr) minmax(0, 1fr) 34px; align-items: center; gap: 8px; }
.log-set.kind-reps, .log-set.kind-time { grid-template-columns: 24px minmax(0, 1fr) 34px; }
.log-set-field { position: relative; display: block; margin: 0; }
.log-set-field input.set-input { width: 100%; padding-right: 40px; background: var(--tile); }
.log-set-unit { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); color: var(--text3); font: 500 13px/1 var(--font-text); pointer-events: none; }
.log-set-remove { width: 34px; height: 34px; border: 0; border-radius: 50%; background: transparent; color: var(--text3); font-size: 20px; line-height: 1; cursor: pointer; }
.log-set-remove:disabled { opacity: 0.3; cursor: default; }
.log-set-add { margin-top: 4px; }
.log-exercise-add { margin-bottom: 0; }

/* ── Me: your profile header (and a member's, on their page) ── */
.me-card { display: flex; align-items: center; gap: 16px; }
.me-avatar { width: 64px; height: 64px; }
.me-avatar .avatar-initial { font-size: 26px; }
.me-avatar svg { width: 28px; height: 28px; }
.me-text { display: grid; flex: 1; gap: 2px; min-width: 0; }
.me-name { font: 600 22px/1.2 var(--font-display); overflow-wrap: anywhere; }
.me-since { color: var(--text2); font-size: 14px; }
.me-rank { display: inline-flex; align-items: center; gap: 6px; justify-self: start; margin-top: 4px; font: 700 12px/1 var(--font-text); letter-spacing: 0.3px; text-decoration: none; text-transform: uppercase; }
a.me-rank:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.me-settings { display: grid; place-items: center; flex: none; align-self: flex-start; width: 40px; height: 40px; border-radius: 50%; background: var(--tile2); color: var(--text2); }
@media (hover: hover) { .me-settings:hover { background: var(--track); color: var(--text); } }
.me-settings:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
/* the Me tab: your picture instead of an icon, ringed when the tab is open */
.nav-avatar { width: 26px; height: 26px; box-shadow: 0 0 0 1.5px var(--hair); }
.nav-avatar .avatar-initial { font-size: 12px; }
.nav-item[aria-current="page"] .nav-avatar { box-shadow: 0 0 0 2px var(--tab-on); }
.settings-logout { margin-top: 12px; }

/* the cleaner Me page: a compact header, one card for the week, tiles, a one-line recap */
.me-card { padding: 16px 16px 16px 18px; }
.me-card .me-avatar { width: 72px; height: 72px; }
.me-card .me-avatar .avatar-initial { font-size: 30px; }
/* the picture is a link to the large view */
.me-avatar-link { display: block; flex: none; border-radius: 50%; color: inherit; text-decoration: none; }
.me-avatar-link:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
@media (hover: none) { .me-avatar-link:active { opacity: 0.7; } }
/* the large view */
.picture-card { display: grid; justify-items: center; gap: 18px; padding-top: 28px; padding-bottom: 24px; }
.avatar-xl { width: min(240px, 64vw); height: min(240px, 64vw); }
.avatar-xl .avatar-initial { font-size: 96px; }
.avatar-xl svg { width: 96px; height: 96px; }
.picture-change { text-decoration: none; }
.me-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; color: var(--text2); font-size: 14px; }
.me-meta .me-rank { margin-top: 0; }
.me-meta-dot { margin-left: 2px; color: var(--text3); font-weight: 400; }
.me-card .me-settings { align-self: center; }
/* the level: a full-width row under the name, with a thin bar in the Energie gradient */
.me-card { flex-wrap: wrap; }
.me-level { display: grid; flex-basis: 100%; order: 3; gap: 6px; margin-top: 2px; color: var(--text); text-decoration: none; }
.me-level-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.me-level-number { font: 600 15px/1.2 var(--font-text); }
.me-level-xp { color: var(--text2); font-size: 13px; }
@media (hover: hover) { .me-level:hover .me-level-number { color: var(--link); } }
.me-level:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: 8px; }
.level-bar { display: block; overflow: hidden; height: 6px; border-radius: 3px; background: var(--track); }
.level-fill { display: block; width: 0; height: 100%; border-radius: 3px; background: var(--g-energie); transition: width 0.8s var(--ease-apple); }
.level-hero { display: grid; gap: 10px; }
.level-hero .level-bar { height: 10px; border-radius: 5px; }
.level-progress { margin: 0; font-weight: 600; }
.level-total { margin: 0; color: var(--text2); font-size: 14px; }
.level-sources { margin: 0; padding: 0; list-style: none; }
.level-source { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 0.5px solid var(--hair); }
.level-source:first-child { border-top: 0; padding-top: 0; }
.level-source-text { display: grid; gap: 1px; min-width: 0; }
.level-source-text span { color: var(--text2); font-size: 13px; }
.level-source-xp { flex: none; font-weight: 600; font-variant-numeric: tabular-nums; }
.level-rules { display: grid; gap: 8px; margin: 0; padding-left: 20px; font-size: 15px; }
.lb-level { flex: none; margin-left: 6px; padding: 2px 6px; border-radius: 6px; background: var(--tile2); color: var(--text2); font: 600 11px/1.3 var(--font-text); font-variant-numeric: tabular-nums; }
/* a member's page: the picture as a button (opens it large), and their badges as one wide tile */
.member-avatar-btn { padding: 0; border: 0; background: none; cursor: zoom-in; }
#member-avatar:not(.rank-frame) { display: contents; }
.member-badges { display: flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; }
.member-badges .me-tile-icon { margin: 0; height: auto; }
.member-badges-text { display: grid; flex: 1; gap: 2px; min-width: 0; }
.member-badges-medals { display: flex; gap: 4px; }
.member-badges .chevron { flex: none; color: var(--text3); }
@media (hover: hover) { a.member-badges:hover { background: color-mix(in srgb, var(--tile) 94%, var(--text)); } }
@media (hover: none) { a.member-badges:active { opacity: 0.7; } }
a.member-badges:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.podium-level { display: inline-block; margin: 3px auto 0; }

.week-summary-body { display: flex; align-items: center; gap: 18px; margin-top: 12px; }
.week-summary .ring-goal { width: 96px; height: 96px; }
.week-summary .ring-goal .ring-label strong { font-size: 22px; }
.week-summary-text { display: grid; gap: 2px; min-width: 0; }
.week-summary-points { margin: 2px 0 0; color: var(--text2); font-size: 15px; }
.week-summary-points strong { color: var(--text); font: 600 32px/1.1 var(--font-display); font-variant-numeric: tabular-nums; }
.week-summary-sub { margin: 0; color: var(--text2); font-size: 14px; }
.week-summary .goal-ring-note { margin: 0; font-size: 14px; }
.week-summary-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 2px 0 0; }
.week-summary-actions .text-btn { padding: 4px 0; font-size: 14px; }
.week-summary-actions .goal-streak { font-size: 13px; }
.week-summary.closed .ring-goal { filter: drop-shadow(0 0 8px rgba(245, 86, 0, 0.3)); }

.recap-card { padding: 6px 10px 6px 6px; }
.recap-row { display: flex; align-items: center; gap: 4px; }
.recap-toggle {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px 12px;
  border: 0;
  border-radius: 16px;
  background: none;
  color: var(--text);
  font: 400 15px/1.3 var(--font-text);
  text-align: left;
  cursor: pointer;
}
@media (hover: hover) { .recap-toggle:hover { background: var(--track); } }
.recap-toggle:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.recap-summary { flex: 1; min-width: 0; }
.recap-summary strong { font-weight: 600; }
.recap-summary span { color: var(--text2); }
.recap-chevron { transition: transform 0.25s var(--ease-apple); }
.recap-toggle[aria-expanded="true"] .recap-chevron { transform: rotate(90deg); }
.recap-row .recap-close { margin: 0; }
.recap-details { padding: 4px 12px 14px; }
.recap-range { margin-left: 8px; color: var(--text2); font-size: 14px; }

.me-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 12px; }
.me-tile {
  display: grid;
  align-content: start;
  gap: 2px;
  min-width: 0;
  padding: 14px;
  border-radius: 22px;
  background: var(--tile);
  color: var(--text);
  text-decoration: none;
}
@media (hover: hover) { .me-tile:hover { background: color-mix(in srgb, var(--tile) 92%, var(--text)); } }
@media (hover: none) { .me-tile:active { opacity: 0.6; } }
.me-tile:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.me-tile-icon { display: grid; place-items: start; height: 26px; margin-bottom: 6px; }
.me-tile-label { color: var(--text2); font: 600 13px/1.2 var(--font-text); }
.me-tile-value { overflow: hidden; font: 600 19px/1.25 var(--font-display); text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.me-tile-sub { overflow: hidden; color: var(--text2); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
/* the three tiles on Me: a bigger icon on the left, the words along the right edge */
.me-tiles .me-tile { text-align: right; }
.me-tiles .me-tile-icon { height: 44px; }
.me-tiles .me-tile-icon > svg { width: 38px; height: 38px; }
.me-tiles .me-tile-icon .rank-badge-sm { width: 44px; height: 44px; }
.me-tiles .me-tile-icon .rank-badge-sm svg { width: 22px; height: 22px; }
.log-see-all { display: block; margin: 8px auto 0; }

/* ── Phones: fingers, keyboards, notches ──────────────────────── */

/* No grey flash on tap, no double-tap-to-zoom wait on buttons (quick set ticks), and a long press on a
   control doesn't start selecting text */
a, button, select, summary, label, .activity-select { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.bottom-nav, .set-btn, .chip, .fav-tile, .seg, .segment, .week-strip, .react-chip, .react-pick, .pill-btn, .link-row {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* A field scrolled into view (by tapping it, or by an error) stays clear of the floating bar */
html { scroll-padding-top: 16px; scroll-padding-bottom: calc(var(--nav-h) + 16px); }

/* Without a mouse there is no hover, so a tap shows that it landed */
@media (hover: none) {
  .link-row:active, .activity-select:active, .fav-tile:active, .chip:active, .pill-btn:active, .icon-btn:active,
  .ghost:active, .menu-item:active, .react-chip:active, .react-add:active, .chat-log:active { opacity: 0.55; }
  .nav-item:active { transform: scale(0.94); }
}

@media (pointer: coarse) {
  /* iPhones zoom the page in when a field with text under 16 px is tapped */
  .select-pill select, .lb-custom input[type="date"], textarea.mono:not([readonly]) { font-size: 16px; }

  /* Tap targets of at least 44 × 44 */
  .avatar-btn { width: 44px; height: 44px; }
  .select-pill select, .lb-custom input[type="date"] { min-height: 44px; }
  .seg button { min-height: 40px; }
  .segment-sm button { min-height: 38px; }
  .ghost { min-height: 44px; }
  .chip { min-height: 40px; }
  .goal-people-head { min-height: 44px; }
  .chat-log, .chat-send { width: 44px; height: 44px; }
  .chat-input { min-height: 44px; height: 44px; padding: 10px 16px; }
  .react-row { gap: 6px; }
  .react-chip { min-height: 34px; }
  .react-add { width: 36px; height: 36px; }
  .icon-btn { min-width: 40px; height: 40px; min-height: 40px; }
  .workout-actions { gap: 8px; }

  /* Small controls keep their look, but an invisible margin around them takes the tap */
  .back-link, .pill-btn, .icon-btn, .chat-delete, .react-add, .react-chip, .chip, .text-btn { position: relative; }
  .back-link::after, .pill-btn::after, .icon-btn::after, .chat-delete::after, .react-add::after,
  .react-chip::after, .chip::after, .text-btn::after { content: ''; position: absolute; }
  .back-link::after { inset: -11px -8px; }
  .pill-btn::after { inset: -7px -4px; }
  .icon-btn::after { inset: -2px -4px; }
  .chat-delete::after { inset: -12px -6px; }
  .react-add::after { inset: -4px; }
  .react-chip::after { inset: -5px -3px; }
  .chip::after { inset: -2px -4px; }
  .text-btn::after { inset: -10px -6px; }
}

/* Recent workouts on a phone: edit and delete sit under the points, so the name keeps its room */
@media (max-width: 480px) {
  .workout-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "icon main points" "icon main actions";
    column-gap: 12px;
    row-gap: 6px;
    align-items: center;
  }
  .workout-row > .icon-tile { grid-area: icon; }
  .workout-main { grid-area: main; }
  .workout-points { grid-area: points; align-self: end; }
  .workout-actions { grid-area: actions; align-self: start; justify-self: end; }
}

/* The narrowest phones (iPhone SE size): a little less padding everywhere */
@media (max-width: 360px) {
  .card { padding: 16px; }
  .auth-card { padding: 20px; }
  .stat-row { padding: 16px 0; }
  .stat { padding: 0 14px; }
  .session-stats .stat { padding: 0 8px; }
  .session-stats .stat:first-child { padding-left: 0; }
  .workout-row > .icon-tile { display: none; }
  .workout-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main points" "main actions"; }
  .lb-row { gap: 10px; padding: 10px 8px; }
  .ring { width: 96px; height: 96px; }
  .session-head { gap: 14px; }
  .set-row { margin-left: 0; }
  .bottom-nav { padding-left: 10px; padding-right: 10px; }
  .bottom-nav-inner { padding: 6px 4px; }
  .nav-label { font-size: 9.5px; letter-spacing: 0; } /* five tabs on the narrowest phones */
  .chat-bubble { max-width: 88%; }
}

/* Pull to refresh: a glass pill comes down from above while the page follows the finger. The arrow
   turns as you pull, turns blue at the point where letting go refreshes, and spins while it does. */
.ptr {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 10px);
  left: 50%;
  z-index: 7;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 10px;
  border-radius: 999px;
  background: var(--menu);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  box-shadow: var(--glass-edge), var(--float-shadow);
  color: var(--text);
  font: 600 13px/1.2 var(--font-text);
  white-space: nowrap;
  opacity: var(--ptr-o, 0);
  transform: translate(-50%, var(--ptr-y, -60px));
  pointer-events: none;
}
.ptr.settling { transition: transform 0.35s var(--ease-apple), opacity 0.35s var(--ease-apple); }
.ptr-icon { flex: none; color: var(--text2); transform: rotate(var(--ptr-r, 0deg)); transition: color 0.2s var(--ease-apple); }
.ptr.armed .ptr-icon, .ptr.refreshing .ptr-icon { color: var(--link); }
.ptr.refreshing .ptr-icon { animation: ptr-spin 0.8s linear infinite; }
@keyframes ptr-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.ptr-settle { transition: transform 0.35s var(--ease-apple); }
/* the browser's own pull (Chrome reloads the page) stays out of the way on these two pages */
html:has(#leaderboard-view:not([hidden])), html:has(#feed-view:not([hidden])) { overscroll-behavior-y: contain; }

/* Photos open full width on a phone */
@media (max-width: 600px) {
  .photo-dialog { width: 100vw; max-width: 100vw; border-radius: 0; }
  .photo-dialog img { max-width: 100vw; }
}

/* ── Motion ───────────────────────────────────────────────────── */

/* The login screen rises in (600 ms from 24 pt below), the app fades in once after logging in */
@keyframes rise-in {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="off"]) :is(.auth-card, .brand) { animation: rise-in 600ms var(--ease-apple) both; }
  html:not([data-motion="off"]) #app-view { animation: fade-in 400ms var(--ease-apple) both; }
}
html[data-motion="on"] :is(.auth-card, .brand) { animation: rise-in 600ms var(--ease-apple) both; }
html[data-motion="on"] #app-view { animation: fade-in 400ms var(--ease-apple) both; }

/* Moving between pages, like on an iPhone (app.js sets data-move on <html> and the browser's View
   Transitions do the rest): "push" slides the new page in from the right over the old one, which
   moves a third to the left and dims; "pop" does the opposite; "tab" cross-fades. The tab bar and the
   picture in the corner have names of their own, so they stay where they are. */
html, body { overflow-x: clip; } /* nothing sliding past the edge makes the page scroll sideways */
.bottom-nav { view-transition-name: tab-bar; }
.topbar { view-transition-name: top-corner; }
::view-transition-group(root) { animation-duration: 420ms; animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1); }
::view-transition-old(root), ::view-transition-new(root) {
  animation-duration: 420ms;
  animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1); /* fast start, long soft landing, as on iOS */
  mix-blend-mode: normal;
}
html[data-move="push"]::view-transition-old(root) { animation-name: page-back-out; }
html[data-move="push"]::view-transition-new(root) { animation-name: page-in-from-right; box-shadow: -8px 0 32px rgba(0, 0, 0, 0.16); }
html[data-move="pop"]::view-transition-old(root) { z-index: 1; animation-name: page-out-to-right; box-shadow: -8px 0 32px rgba(0, 0, 0, 0.16); }
html[data-move="pop"]::view-transition-new(root) { animation-name: page-back-in; }
html[data-move="tab"]::view-transition-old(root), html[data-move="tab"]::view-transition-new(root) { animation-duration: 200ms; }
@keyframes page-in-from-right { from { transform: translateX(100%); } to { transform: none; } }
@keyframes page-out-to-right { from { transform: none; } to { transform: translateX(100%); } }
@keyframes page-back-out { from { transform: none; filter: brightness(1); } to { transform: translateX(-30%); filter: brightness(0.82); } }
@keyframes page-back-in { from { transform: translateX(-30%); filter: brightness(0.82); } to { transform: none; filter: brightness(1); } }
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="on"]) :is(.progress-bar, .lb-fill, .wb-bar, .ring-fill, .flame-level) { transition: none; }
}
html[data-motion="off"] :is(.progress-bar, .lb-fill, .wb-bar, .ring-fill, .flame-level) { transition: none; }
.recap-badges .recap-line-text { flex: 1; }
.recap-badges-link { flex: none; font-size: 15px; text-decoration: none; }
@media (hover: hover) { .recap-badges-link:hover { text-decoration: underline; } }
#lb-challenges { margin-top: 12px; }
.me-meta .me-rank { font: 600 14px/1.3 var(--font-text); letter-spacing: 0; text-transform: none; }
.week-summary-sub { font-size: 13px; }
/* rank, then "since …", as two quiet lines under the name (on your page and on a member's) */
.me-meta { flex-direction: column; align-items: flex-start; gap: 1px; }
.me-rank { font: 600 14px/1.3 var(--font-text); letter-spacing: 0; text-transform: none; }
.me-meta-dot { display: none; }

/* ── Sheets: ranks, badges and lifts open over the page, like Control Center on an iPhone ──
   The page they were opened from stays put behind frosted glass; the cards float on it. A tap on the
   glass (not on a card), × or Escape closes them. (The pop-up after logging, z-index 20, stays on top.) */
.page.sheet {
  position: fixed;
  inset: 0;
  z-index: 12;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: calc(20px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) calc(32px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: color-mix(in srgb, var(--page) 62%, transparent);
  -webkit-backdrop-filter: blur(30px) saturate(170%);
  backdrop-filter: blur(30px) saturate(170%);
  cursor: default;
}
:root[data-theme="dark"] .page.sheet { background: color-mix(in srgb, #000000 50%, transparent); }
.page.sheet > * { max-width: 568px; margin-left: auto; margin-right: auto; }
.page.sheet .page-head { position: relative; min-height: 0; margin-bottom: 14px; padding-right: 52px; }
.page.sheet .back-link, .page.sheet .page-date { display: none; }
.sheet-close { display: none; }
.page.sheet .sheet-close {
  position: absolute;
  top: 2px;
  right: 0;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--glass);
  color: var(--text);
  box-shadow: var(--glass-edge);
  cursor: pointer;
}
.page.sheet .sheet-close:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
html.sheet-open { overflow: hidden; } /* the page behind doesn't scroll along */
html.sheet-open .bottom-nav { visibility: hidden; } /* the glass covers the whole screen, the bar too */

/* in: the glass fades in and the cards grow into place; out: the reverse, quicker */
html[data-motion="on"] .page.sheet { animation: sheet-glass-in 0.28s var(--ease-apple) both; }
html[data-motion="on"] .page.sheet > * { animation: sheet-cards-in 0.38s cubic-bezier(0.32, 0.72, 0, 1) both; }
html[data-motion="on"] .page.sheet.sheet-leaving { animation: sheet-glass-out 0.18s ease-in both; }
html[data-motion="on"] .page.sheet.sheet-leaving > * { animation: sheet-cards-out 0.18s ease-in both; }
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="off"]) .page.sheet { animation: sheet-glass-in 0.28s var(--ease-apple) both; }
  html:not([data-motion="off"]) .page.sheet > * { animation: sheet-cards-in 0.38s cubic-bezier(0.32, 0.72, 0, 1) both; }
  html:not([data-motion="off"]) .page.sheet.sheet-leaving { animation: sheet-glass-out 0.18s ease-in both; }
  html:not([data-motion="off"]) .page.sheet.sheet-leaving > * { animation: sheet-cards-out 0.18s ease-in both; }
}
@keyframes sheet-glass-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes sheet-glass-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes sheet-cards-in { from { opacity: 0; transform: scale(0.94) translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes sheet-cards-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(0.96); } }
/* the frosted look: more of the page shows through the glass, the cards are glass too, and a strip of
   blurred page stays visible above them */
.page.sheet { padding-top: calc(64px + env(safe-area-inset-top)); background: color-mix(in srgb, var(--page) 40%, transparent); }
:root[data-theme="dark"] .page.sheet { background: color-mix(in srgb, #000000 38%, transparent); }
.page.sheet .card { background: color-mix(in srgb, var(--tile) 80%, transparent); }
:root[data-theme="dark"] .page.sheet .card { background: color-mix(in srgb, var(--tile) 74%, transparent); }

/* the Ranks card on Me (one big tap target that opens the ranks) */

/* the This week tile's little ring (the goal), in the points gradient */

/* ── Bar colours (Settings): the design kit's colour picker, "farbwahl" ──
   The swatches are the kit's gradients exactly. On the bars, the very light ones (Eisblau, Orchid, Mint
   steel) start a little darker in light mode, so a short bar still stands out from its track. */
:root {
  --bar-glut: linear-gradient(90deg, #F2416B 0%, #F55600 55%, #FF9F0A 100%);
  --bar-frisch: linear-gradient(90deg, var(--frisch-a), var(--frisch-b));
  --bar-eisblau: linear-gradient(90deg, #A9B9F6, #6F8FEA);
  --bar-orchid: linear-gradient(90deg, #E3B3F7, #B064E2);
  --bar-ocean: linear-gradient(90deg, #2575DC, #84C7E8);
  --bar-steel: linear-gradient(90deg, #9DCFCA, #45657D);
}
:root[data-theme="dark"] {
  --bar-eisblau: linear-gradient(90deg, #E1E5FF 7%, #83A0EF 80%);
  --bar-orchid: linear-gradient(90deg, #FFE1FC 7%, #C683EF 79%);
  --bar-steel: linear-gradient(90deg, #E4F6F0 0%, #9DCFCA 31%, #6B95AC 68%, #45657D 100%);
}
html[data-bar-you="glut"] { --bar-you: var(--bar-glut); }
html[data-bar-you="frisch"] { --bar-you: var(--bar-frisch); }
html[data-bar-you="eisblau"] { --bar-you: var(--bar-eisblau); }
html[data-bar-you="orchid"] { --bar-you: var(--bar-orchid); }
html[data-bar-you="ocean"] { --bar-you: var(--bar-ocean); }
html[data-bar-you="steel"] { --bar-you: var(--bar-steel); }
html[data-bar-others="glut"] { --bar-others: var(--bar-glut); }
html[data-bar-others="frisch"] { --bar-others: var(--bar-frisch); }
html[data-bar-others="eisblau"] { --bar-others: var(--bar-eisblau); }
html[data-bar-others="orchid"] { --bar-others: var(--bar-orchid); }
html[data-bar-others="ocean"] { --bar-others: var(--bar-ocean); }
html[data-bar-others="steel"] { --bar-others: var(--bar-steel); }

/* the bars: everybody's in the friends' colour, yours in your own (leaderboard, challenges, group goal) */
.lb-fill { background: var(--bar-others, var(--chart-gray)); }
.lb-you .lb-fill { background: var(--bar-you, var(--board)); }
.goal-person-fill { background: var(--bar-others, var(--chart-gray)); }
.goal-person.is-you .goal-person-fill { background: var(--bar-you, var(--g-energie)); }

/* the picker */
.farbwahl { display: flex; flex-wrap: wrap; gap: 10px; }
.swatch {
  position: relative;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.2s var(--ease-apple);
}
.swatch::after { /* the ring around the chosen one, like the kit's */
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--text);
  opacity: 0;
  transition: opacity 0.2s var(--ease-apple);
}
.swatch[aria-checked="true"]::after { opacity: 1; }
.swatch:active { transform: scale(0.92); }
.swatch:focus-visible { outline: 3px solid var(--focus); outline-offset: 6px; }
.swatch-glut { background: linear-gradient(135deg, #F2416B 0%, #F55600 55%, #FF9F0A 100%); }
.swatch-frisch { background: linear-gradient(135deg, var(--frisch-a), var(--frisch-b)); }
.swatch-eisblau { background: linear-gradient(135deg, #E1E5FF 7%, #83A0EF 80%); }
.swatch-orchid { background: linear-gradient(135deg, #FFE1FC 7%, #C683EF 79%); }
.swatch-ocean { background: linear-gradient(135deg, #2575DC, #84C7E8); }
.swatch-steel { background: linear-gradient(135deg, #E4F6F0 0%, #9DCFCA 31%, #6B95AC 68%, #45657D 100%); }
:root:not([data-theme="dark"]) .swatch-eisblau, :root:not([data-theme="dark"]) .swatch-orchid, :root:not([data-theme="dark"]) .swatch-steel { box-shadow: inset 0 0 0 1px var(--hair); }
.bar-others-label { margin-top: 18px; }

/* the preview under the pickers */
.bar-preview { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px 12px; margin-top: 18px; color: var(--text2); font-size: 13px; }
.bar-preview .lb-bar { height: 8px; }
.bar-preview-long { width: 78%; }
.bar-preview-short { width: 46%; }
.bar-c-glut { background: var(--bar-glut); }
.bar-c-frisch { background: var(--bar-frisch); }
.bar-c-eisblau { background: var(--bar-eisblau); }
.bar-c-orchid { background: var(--bar-orchid); }
.bar-c-ocean { background: var(--bar-ocean); }
.bar-c-steel { background: var(--bar-steel); }

/* the graph's Total / Ø per day switch, small, at the right of its header */
.chart-mode { flex: none; margin: 0; padding: 3px; }
.chart-mode button { min-height: 28px; padding: 3px 12px; font-size: 13px; }

/* An overall rank as a winged frame around the picture (public/ranks/kit/frame-*.svg). Every frame is
   322 x 216 with a see-through hole of radius 64 centred at 161, 122; the picture sits under it, a little
   bigger than the hole so the ring covers its edge. --av is the hole's diameter. */
.rank-frame { --av: 72px; position: relative; display: block; flex: none; width: calc(var(--av) * 2.515625); height: calc(var(--av) * 1.6875); border-radius: 12px; }
.rank-frame .avatar { position: absolute; left: calc(var(--av) * 0.7421875); top: calc(var(--av) * 0.4375); width: calc(var(--av) * 1.03125); height: calc(var(--av) * 1.03125); box-shadow: none; }
.rank-frame > .member-avatar-btn { position: absolute; inset: 0; border-radius: 12px; }
.rank-frame-img { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; user-select: none; }

/* a framed header (yours on Me, a friend's on their page): picture on top, name and rank centred under it */
.me-card.has-frame { position: relative; flex-flow: column nowrap; align-items: center; gap: 6px; padding-top: 10px; }
.me-card.has-frame .rank-frame { --av: 84px; }
.me-card.has-frame .avatar-initial { font-size: 34px; }
.me-card.has-frame .me-text { flex: none; width: 100%; justify-items: center; text-align: center; }
.me-card.has-frame .me-meta { align-items: center; }
.me-card.has-frame .me-rank { justify-self: center; }
.me-card.has-frame .me-level { flex-basis: auto; align-self: stretch; margin-top: 8px; }
.me-card.has-frame .me-settings { position: absolute; top: 14px; right: 14px; }

/* on the podium the frame takes the ring's place; it is wider than the column, so the wings may reach out.
   It grows with the podium's width: phone-sized on a phone, bigger in the wider column on a computer. */
.podium-card { container-type: inline-size; }
.podium-frame { --av: clamp(40px, 10.5cqi, 60px); margin: 0 -12px; }
.place-1 .podium-frame { --av: clamp(48px, 12.5cqi, 72px); }
.podium-frame .avatar-initial { font-size: calc(var(--av) * 0.42); }

/* the achievement someone shows off next to their name (showcase.js): a small medal after the name */
.showcase { display: inline-block; flex: none; width: 22px; height: 22px; margin-left: 6px; vertical-align: -5px; }
.showcase .medal { width: 100%; height: 100%; }
.me-name .showcase { width: 30px; height: 30px; vertical-align: -6px; }
/* the choice under an achievement you hold, on your own Achievements page */
.ach-show { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; margin-top: 2px; }
.ach-show .text-btn { padding: 4px 0; font-size: 14px; }
.ach-show-note { color: var(--text2); font-size: 14px; white-space: nowrap; }
.ach-show-note::before { content: "★ "; color: var(--link); }
.podium-tags { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 3px; }
.podium-tags .podium-level { margin: 0; }
.podium-tags .showcase { margin-left: 0; }