/*
  RYTAVO base styles (Rytavo.UI). Mobile-first, light/dark, shared with a future MAUI Blazor Hybrid host.
  Colors come from the approved identity v3_Original: the host must load brand/rytavo/rytavo.tokens.css first.
  Theme = system preference, overridable by <html data-theme="light|dark"> (single mechanism).
*/

:root {
  color-scheme: light dark;

  /* UI text font stays the system stack; the Lato recommendation in the tokens is a separate change. */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --radius-s: 10px;
  --radius-m: var(--rytavo-radius-control);
  --radius-l: var(--rytavo-radius-card);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --tap: 48px;
  --nav-height: 68px;
  /* #083: how far the centre + rises above the mobile bar. */
  --nav-raise: 30px;
  --rail-width: 232px;
  --content-width: 560px;
  --ease: cubic-bezier(.2, .7, .2, 1);

  --bg: var(--rytavo-bg);
  --surface: var(--rytavo-surface);
  --surface-2: color-mix(in srgb, var(--rytavo-border) 40%, var(--rytavo-surface));
  --text: var(--rytavo-text);
  --text-muted: var(--rytavo-muted);
  --line: var(--rytavo-border);
  /* #106: the mobile bar is a quiet cool off-white in the light theme, so it no longer blends into white content. */
  --nav-surface: color-mix(in srgb, var(--rytavo-border) 26%, var(--rytavo-bg));
  --accent: var(--rytavo-action);
  --accent-contrast: var(--rytavo-on-action);
  --accent-soft: color-mix(in srgb, var(--rytavo-action) 14%, var(--rytavo-surface));
  --focus: var(--rytavo-focus);
  --brand-gradient: var(--rytavo-decorative-gradient);
  /* Not part of the brand tokens; kept for error states. */
  --danger: #c0352b;
  --warning: #8a5300;
  --ok: #1e7a46;
  --shadow: 0 1px 2px rgb(16 30 50 / .04), 0 8px 24px rgb(16 30 50 / .06);
  --nav-add-shadow: 0 6px 16px -4px color-mix(in srgb, var(--rytavo-action) 55%, transparent), 0 1px 2px rgb(16 30 50 / .12);
  /* Weekend columns in date grids (0.9.23): a quiet neutral, below every state color. */
  --weekend-tint: color-mix(in srgb, var(--rytavo-border) 35%, var(--rytavo-surface));
}

/*
  rytavo.tokens.css defines dark values only for [data-theme="dark"]. The same values are mirrored here for the
  system dark preference. Keep in sync with the tokens file (guarded by BrandTokensTests).
*/
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --rytavo-bg: #0B1424;
    --rytavo-surface: #142138;
    --rytavo-text: #F5F7FC;
    --rytavo-muted: #B5C3D7;
    --rytavo-border: #344762;
    --rytavo-action: #8CAEFF;
    --rytavo-on-action: #101E32;
    --rytavo-focus: #8CAEFF;
    --nav-surface: var(--rytavo-surface);
    --danger: #ff8a80;
    --on-danger: #101E32;
    --warning: #ffcc80;
    --ok: #86d9a3;
    --shadow: none;
    --nav-add-shadow: 0 4px 12px -2px rgb(0 0 0 / .55);
    --weekend-tint: color-mix(in srgb, var(--rytavo-muted) 7%, var(--rytavo-surface));
  }
}

:root[data-theme="dark"] {
  --nav-surface: var(--rytavo-surface);
  --danger: #ff8a80;
  --on-danger: #101E32;
  --warning: #ffcc80;
  --ok: #86d9a3;
  --shadow: none;
  --nav-add-shadow: 0 4px 12px -2px rgb(0 0 0 / .55);
  --weekend-tint: color-mix(in srgb, var(--rytavo-muted) 7%, var(--rytavo-surface));
}

/*
  #146 colour themes (RYTAVO Plus): <html data-accent="..."> replaces the action colour, focus ring and decorative gradient.
  Light values keep white text at WCAG AA (4.5:1+); dark values keep the navy text of the dark theme readable. No attribute =
  the RYTAVO default. Dark rules are more specific than the light ones, so the system and the chosen dark theme both win.
*/
:root[data-accent="violet"] { --rytavo-action: #6D28D9; --rytavo-focus: #6D28D9; --rytavo-decorative-gradient: linear-gradient(135deg, #4C1D95, #7C3AED 50%, #C084FC); }
:root[data-accent="teal"] { --rytavo-action: #0F766E; --rytavo-focus: #0F766E; --rytavo-decorative-gradient: linear-gradient(135deg, #134E4A, #0D9488 50%, #2DD4BF); }
:root[data-accent="green"] { --rytavo-action: #15803D; --rytavo-focus: #15803D; --rytavo-decorative-gradient: linear-gradient(135deg, #14532D, #16A34A 50%, #4ADE80); }
:root[data-accent="amber"] { --rytavo-action: #B45309; --rytavo-focus: #B45309; --rytavo-decorative-gradient: linear-gradient(135deg, #7C2D12, #D97706 50%, #FBBF24); }
:root[data-accent="rose"] { --rytavo-action: #BE123C; --rytavo-focus: #BE123C; --rytavo-decorative-gradient: linear-gradient(135deg, #881337, #E11D48 50%, #FB7185); }

:root[data-theme="dark"][data-accent="violet"] { --rytavo-action: #C4B5FD; --rytavo-focus: #C4B5FD; }
:root[data-theme="dark"][data-accent="teal"] { --rytavo-action: #5EEAD4; --rytavo-focus: #5EEAD4; }
:root[data-theme="dark"][data-accent="green"] { --rytavo-action: #86EFAC; --rytavo-focus: #86EFAC; }
:root[data-theme="dark"][data-accent="amber"] { --rytavo-action: #FCD34D; --rytavo-focus: #FCD34D; }
:root[data-theme="dark"][data-accent="rose"] { --rytavo-action: #FDA4AF; --rytavo-focus: #FDA4AF; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"])[data-accent="violet"] { --rytavo-action: #C4B5FD; --rytavo-focus: #C4B5FD; }
  :root:not([data-theme="light"])[data-accent="teal"] { --rytavo-action: #5EEAD4; --rytavo-focus: #5EEAD4; }
  :root:not([data-theme="light"])[data-accent="green"] { --rytavo-action: #86EFAC; --rytavo-focus: #86EFAC; }
  :root:not([data-theme="light"])[data-accent="amber"] { --rytavo-action: #FCD34D; --rytavo-focus: #FCD34D; }
  :root:not([data-theme="light"])[data-accent="rose"] { --rytavo-action: #FDA4AF; --rytavo-focus: #FDA4AF; }
}

/* #146 the colour theme picker on the Appearance page: round swatches, the chosen one ringed and checked. */
.accent-picker { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: 0; padding: 0; border: 0; }
.accent-swatch {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: var(--swatch);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--line);
}
.accent-swatch.is-selected { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--swatch); }
.accent-swatch:disabled { cursor: not-allowed; opacity: .55; }
.accent-swatch__lock { position: absolute; right: -4px; bottom: -4px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--surface); color: var(--text-muted); box-shadow: 0 0 0 1px var(--line); }
/* #165 the colour themes card: title, help, swatches and the Plus note each with room (rings and lock badges reach past a swatch). */
.settings-card.settings-card--accent { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); }
.settings-card--accent .accent-picker { padding: var(--space-1) var(--space-1) var(--space-2); }
.settings-card--accent :is(.section-title, .field__help, .status, .plan-note) { margin: 0; }

/* Habit colors are chosen for light surfaces; on dark ones they are lifted towards the text color to stay visible. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) [style*="--habit-color"] { --habit-accent: color-mix(in srgb, var(--habit-color) 62%, var(--text)); }
}
:root[data-theme="dark"] [style*="--habit-color"] { --habit-accent: color-mix(in srgb, var(--habit-color) 62%, var(--text)); }

/* Logo: show the Primary artwork on light, the Negative artwork on dark backgrounds. */
.brand-logo { display: inline-block; width: var(--brand-logo-width, 160px); max-width: 100%; line-height: 0; }
.brand-logo__img { display: block; width: 100%; height: auto; object-fit: contain; }
.brand-logo__img--dark { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand-logo__img--light { display: none; }
  :root:not([data-theme="light"]) .brand-logo__img--dark { display: block; }
}

:root[data-theme="dark"] .brand-logo__img--light { display: none; }
:root[data-theme="dark"] .brand-logo__img--dark { display: block; }

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

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

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, p { margin: 0; }

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

/* Headings receive programmatic focus after navigation (FocusOnNavigate); they are not interactive. */
h1:focus { outline: none; }

.icon { flex: none; display: block; }

.skip-link {
  position: absolute;
  left: var(--space-3);
  top: -100px;
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  background: var(--surface);
  border-radius: var(--radius-s);
}
.skip-link:focus { top: var(--space-3); }

/* ---------- App shell ---------- */

.app__main {
  width: 100%;
  max-width: var(--content-width);
  margin: 0 auto;
  padding: var(--space-4) var(--space-4)
           calc(var(--nav-height) + var(--nav-raise) + var(--space-4) + env(safe-area-inset-bottom));
  outline: none;
}

/* #080: viewport-fit=cover lets scrolled content run under the iOS status bar; keep that inset app-coloured (0 px without an inset). */
.app::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  z-index: 25;
  height: env(safe-area-inset-top);
  background: var(--bg);
  pointer-events: none;
}

/* Mobile top bar with the NoTagline wordmark (min. 160 px wide). */
.app-bar {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: calc(var(--space-3) + env(safe-area-inset-top)) var(--space-3) 0;
}
.app-bar__home, .bottom-nav__brand, .brand-bar__home { display: inline-block; border-radius: var(--radius-s); line-height: 0; }
/* #088: RYTAVO Plus next to the wordmark - a quiet blue-to-cyan hairline from the brand V, tinted interior, navy text; never louder than the logo. */
.app-bar__home, .bottom-nav__brand { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.plan-badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  padding: 3px 8px 3px 9px;
  border: 1px solid transparent;
  border-radius: 999px;
  background:
    linear-gradient(color-mix(in srgb, var(--rytavo-cyan) 9%, var(--surface)), color-mix(in srgb, var(--rytavo-blue) 7%, var(--surface))) padding-box,
    linear-gradient(120deg, var(--rytavo-blue), var(--rytavo-cyan)) border-box;
  color: var(--text);
  font-size: .66rem;
  font-weight: 650;
  letter-spacing: .12em;
  line-height: 1.25;
  text-transform: uppercase;
  white-space: nowrap;
}
@media (forced-colors: active) {
  .plan-badge { border-color: CanvasText; background: Canvas; color: CanvasText; }
}

/* Signed-out pages: the same wordmark in every language, claim as localized text; the artwork includes its protective zone. */
.brand-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  max-width: var(--content-width);
  margin: 0 auto;
  padding: calc(var(--space-5) + env(safe-area-inset-top)) var(--space-3) var(--space-2);
  text-align: center;
}
.brand-bar__claim, .brand-lockup__claim { margin: 0; color: var(--text-muted); font-size: .95rem; line-height: 1.35; }
.brand-lockup { display: inline-flex; flex-direction: column; align-items: center; gap: var(--space-1); max-width: 100%; text-align: center; }

.bottom-nav {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(2, 1fr) auto repeat(2, 1fr);
  align-items: center;
  height: calc(var(--nav-height) + env(safe-area-inset-bottom));
  padding: 0 var(--space-2) env(safe-area-inset-bottom);
}
/* #083: the bar surface with a smooth cradle under the raised +; the cradle is a mask (no extra hit area, not in the a11y tree).
   Without mask support the bar simply stays flat. */
.bottom-nav::before {
  content: "";
  position: absolute;
  /* Runs past the screen edge: with a mask Chromium leaves the blur's bottom edge unblurred otherwise. */
  inset: 0 0 -24px;
  z-index: -1;
  background: color-mix(in srgb, var(--nav-surface) 88%, transparent);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  pointer-events: none;
  --cradle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 40'%3E%3Cpath d='M0 0H12A10 10 0 0 1 21.23 6.15A42 42 0 0 0 98.77 6.15A10 10 0 0 1 108 0H120V40H0Z'/%3E%3C/svg%3E");
  -webkit-mask:
    linear-gradient(#000 0 0) left top / calc(50% - 59px) 100% no-repeat,
    linear-gradient(#000 0 0) right top / calc(50% - 59px) 100% no-repeat,
    var(--cradle) 50% 0 / 120px 40px no-repeat,
    linear-gradient(#000 0 0) 50% 39px / 120px calc(100% - 39px) no-repeat;
  mask:
    linear-gradient(#000 0 0) left top / calc(50% - 59px) 100% no-repeat,
    linear-gradient(#000 0 0) right top / calc(50% - 59px) 100% no-repeat,
    var(--cradle) 50% 0 / 120px 40px no-repeat,
    linear-gradient(#000 0 0) 50% 39px / 120px calc(100% - 39px) no-repeat;
}
/* The hairline top edge: two straight pieces here, the curve itself is the inline SVG (.bottom-nav__edge). */
.bottom-nav::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background:
    linear-gradient(var(--line) 0 0) left top / calc(50% - 59px) 1px no-repeat,
    linear-gradient(var(--line) 0 0) right top / calc(50% - 59px) 1px no-repeat;
  pointer-events: none;
}
.bottom-nav__edge {
  position: absolute;
  top: 0;
  left: 50%;
  width: 120px;
  height: 40px;
  transform: translateX(-50%);
  color: var(--line);
  overflow: visible;
  pointer-events: none;
}
@supports not ((mask-image: none) or (-webkit-mask-image: none)) {
  .bottom-nav::after { background: var(--line); }
  .bottom-nav__edge { display: none; }
}
.bottom-nav__brand { display: none; }

.bottom-nav__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: var(--tap);
  color: var(--text-muted);
  font-size: .72rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius-s);
  transition: color .15s var(--ease);
}
.bottom-nav__item.active { color: var(--accent); font-weight: 700; }
.bottom-nav__item.active .icon { stroke-width: 2.2; }
/* A short accent mark above the active icon; absolute, so nothing moves when the route changes. */
.bottom-nav__item.active::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 50%;
  width: 18px;
  height: 3px;
  border-radius: 999px;
  background: currentColor;
  transform: translateX(-50%);
}
.bottom-nav__item--rail { display: none; }

/* Raised + : centre 2 px above the bar's top edge, inside the cradle with a 6 px gap. */
.bottom-nav__add {
  display: grid;
  place-items: center;
  align-self: start;
  width: 56px;
  height: 56px;
  margin: calc(-1 * var(--nav-raise)) var(--space-3) 0;
  border: 0;
  border-radius: 50%;
  background: var(--brand-gradient);
  color: var(--accent-contrast);
  box-shadow: var(--nav-add-shadow);
  cursor: pointer;
  transition: transform .15s var(--ease);
}
.bottom-nav__add .icon { width: 28px; height: 28px; }
.bottom-nav__add:active { transform: scale(.94); }
.bottom-nav__add-label { display: none; }

@media (min-width: 960px) {
  :root { --nav-raise: 0px; }
  .app-bar { display: none; }
  .bottom-nav::before { -webkit-mask: none; mask: none; }
  .bottom-nav::after, .bottom-nav__edge, .bottom-nav__item.active::before { display: none; }
  .bottom-nav__item.active .icon { stroke-width: 1.8; }
  .bottom-nav {
    inset: 0 auto 0 0;
    width: var(--rail-width);
    height: auto;
    padding: var(--space-5) var(--space-4);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: var(--space-1);
    border-top: 0;
    border-right: 1px solid var(--line);
  }
  .bottom-nav__brand { display: inline-flex; order: -2; align-self: flex-start; margin: 0 0 var(--space-5); }
  /* #088: the rail is narrow; a more compact badge keeps the 160 px wordmark intact (it may use part of the rail padding). */
  .bottom-nav__brand { gap: 4px; }
  .bottom-nav__brand .plan-badge { padding: 2px 6px 2px 7px; font-size: .62rem; letter-spacing: .1em; }
  .bottom-nav__item {
    flex-direction: row;
    justify-content: flex-start;
    gap: var(--space-3);
    min-height: var(--tap);
    padding: 0 var(--space-3);
    font-size: .95rem;
  }
  .bottom-nav__item:hover { background: var(--surface-2); }
  .bottom-nav__item.active { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); font-weight: 700; }
  .bottom-nav__item--rail { display: flex; }
  .bottom-nav__add {
    order: -1;
    display: flex;
    align-self: stretch;
    justify-content: flex-start;
    gap: var(--space-3);
    width: auto;
    height: var(--tap);
    margin: 0 0 var(--space-4);
    padding: 0 var(--space-4);
    border-radius: 999px;
    background: var(--accent);
    box-shadow: none;
    font-weight: 650;
  }
  .bottom-nav__add .icon { width: 26px; height: 26px; }
  .bottom-nav__add-label { display: inline; }
  .app__main {
    padding-top: var(--space-6);
    padding-bottom: var(--space-7);
    padding-left: calc(var(--rail-width) + var(--space-5));
    max-width: calc(var(--content-width) + var(--rail-width) + var(--space-5));
  }
  /* Signed out there is no rail: the content sits centred under the logo (0.9.21). */
  .brand-bar ~ .app__main { padding-left: var(--space-4); max-width: var(--content-width); }
}

/* ---------- Page elements ---------- */

.page { display: flex; flex-direction: column; gap: var(--space-5); }
.page--loading { min-height: 50vh; }

.page-header { display: flex; flex-direction: column; gap: var(--space-1); }
.page-title { font-size: 2rem; font-weight: 750; letter-spacing: -.02em; line-height: 1.15; }
.page-subtitle { color: var(--text-muted); }

.eyebrow {
  color: var(--text-muted);
  font-size: .95rem;
  font-weight: 500;
}
/* Czech capitalizes only the first word ("Středa 23. září"), so no text-transform: capitalize. */
.eyebrow::first-letter { text-transform: uppercase; }

.hint, .app-version { color: var(--text-muted); font-size: .85rem; text-align: center; }

.notice {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-m);
  background: var(--surface-2);
  color: var(--text-muted);
}

.card {
  background: var(--surface);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
}

.badge {
  padding: 2px var(--space-2);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: .72rem;
  font-weight: 600;
  white-space: nowrap;
}

.icon-button {
  display: inline-grid;
  place-items: center;
  width: var(--tap);
  height: var(--tap);
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.icon-button:hover { background: var(--surface-2); }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap);
  padding: 0 var(--space-5);
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-contrast);
  font-weight: 650;
  text-decoration: none;
  cursor: pointer;
}
.button:focus-visible { outline-offset: 3px; }
.button--ghost { background: transparent; color: var(--danger); border: 1px solid var(--line); }

/* ---------- Today ---------- */

.day-hero { display: flex; flex-direction: column; gap: var(--space-2); }

.day-switcher {
  display: grid;
  grid-template-columns: var(--tap) 1fr var(--tap);
  align-items: center;
  margin: 0 calc(-1 * var(--space-3));
}
.day-switcher__label {
  justify-self: center;
  padding: var(--space-2) var(--space-4);
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-muted);
}
.day-switcher__label.is-today { background: var(--text); color: var(--bg); }

.big-number {
  font-size: clamp(3rem, 15.5vw, 4.25rem);
  font-weight: 750;
  line-height: 1;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}
.big-number__total { color: var(--text-muted); font-weight: 500; font-size: .5em; letter-spacing: -.01em; }
.day-hero__score { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--space-3); }
.day-hero__meta { color: var(--text-muted); }
.day-hero__meta strong { color: var(--text); }
.day-hero .progress { margin-top: var(--space-1); }
.day-head, .day-hero__body { display: flex; flex-direction: column; gap: var(--space-2); }

/* #165 phone: the logo bar, the day switcher and the date stay pinned at the top while the page scrolls (like the bottom bar). */
@media (max-width: 959.98px) {
  :root { --app-bar-height: calc(env(safe-area-inset-top) + var(--space-3) + 43px + var(--space-2)); }
  html { scroll-padding-top: var(--app-bar-height); }
  .app-bar {
    position: sticky;
    top: 0;
    z-index: 22;
    box-sizing: border-box;
    height: var(--app-bar-height);
    padding-bottom: var(--space-2);
    background: var(--bg);
  }
  .page--today > .day-hero { display: contents; }
  .page--today .day-head {
    position: sticky;
    top: var(--app-bar-height);
    z-index: 21;
    margin: 0 calc(-1 * var(--space-4));
    padding: 0 var(--space-4) var(--space-2);
    background: var(--bg);
  }
  .page--today .day-head + .day-hero__body { margin-top: calc(-1 * var(--space-5)); }
}

.progress {
  height: 8px;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
}
.progress__bar {
  height: 100%;
  border-radius: inherit;
  background: var(--brand-gradient);
  transition: width .4s var(--ease);
}

.habit-list, .day-list, .sheet__list, .occurrence-list { list-style: none; margin: 0; padding: 0; }
.habit-list { display: flex; flex-direction: column; gap: 6px; }

.habit-section { display: flex; flex-direction: column; gap: var(--space-2); }
.section-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.section-title { font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.section-hint { color: var(--text-muted); font-size: .85rem; }

/* Quotas and measurements: same data, quieter than the scored daily habits. */
.habit-section--secondary { gap: var(--space-1); margin-top: calc(-1 * var(--space-2)); }
.section-header--inline { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-start; gap: 0 var(--space-2); padding: 0 var(--space-1); }
.habit-section--secondary .section-title { font-size: .72rem; letter-spacing: .08em; }
.habit-section--secondary .section-hint { font-size: .78rem; }
.habit-section--secondary .section-hint::before { content: "· "; }
.habit-section--secondary .habit-row { background: color-mix(in srgb, var(--surface) 65%, var(--bg)); }
.habit-section--secondary .habit-row__line { min-height: 52px; padding-block: 2px; }
.habit-section--secondary .habit-row__icon { width: 34px; height: 34px; border-radius: 10px; }
.habit-section--secondary .habit-row__name { font-size: .95rem; }

.habit-row {
  --habit-accent: var(--habit-color, var(--accent));
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
}
/* 0.9.23 (#044): compact rhythm - only padding and line spacing shrink; every control keeps its 48 px target. */
.habit-row__line {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 56px;
  padding: var(--space-1) var(--space-3) var(--space-1) var(--space-2);
}
.habit-row__main {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1;
  min-width: 0;
  min-height: var(--tap);
  padding: 2px var(--space-2);
  border: 0;
  border-radius: var(--radius-s);
  background: transparent;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
div.habit-row__main { cursor: default; }
/* Touch screens keep :hover after a tap (iOS), which left the row grey after a swipe. */
@media (hover: hover) {
  button.habit-row__main:hover, a.habit-row__main:hover { background: var(--surface-2); }
}
.habit-row__chevron { color: var(--text-muted); margin-left: auto; }
.habit-row.is-paused .habit-row__icon { filter: grayscale(1); opacity: .7; }
.habit-row.is-saving { border-color: color-mix(in srgb, var(--habit-accent) 50%, var(--line)); }
.habit-row__problem {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  padding: var(--space-2) var(--space-4) var(--space-3);
  border-top: 1px solid var(--line);
  color: var(--danger);
  font-size: .85rem;
}
.habit-row__problem.is-conflict { color: var(--text-muted); }
/* #151 the habit's own colour lives on its icon only (a touch stronger); done states follow the colour theme (#146). */
.habit-row__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--habit-accent) 18%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--habit-accent) 26%, transparent);
  color: var(--habit-accent);
}
.habit-row__body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.habit-row__name { font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.habit-row__meta { color: var(--text-muted); font-size: .85rem; line-height: 1.35; font-variant-numeric: tabular-nums; }
/* #049: the planned time leads the existing meta line, so a row never grows by a line because of it. */
.planned-time { color: var(--text); font-weight: 600; }

/* Day note (0.8.1): a small secondary icon beside the quick action; the row keeps its height. */
.note-toggle {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: var(--tap);
  margin: 0 -2px 0 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-s);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}
button.note-toggle:hover { background: var(--surface-2); color: var(--text); }
.note-toggle.has-note { color: var(--habit-accent); }
.note-toggle.has-note::after {
  content: "";
  position: absolute;
  top: 11px;
  right: 8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--habit-accent);
  box-shadow: 0 0 0 2px var(--surface);
}
.habit-section--secondary .note-toggle.has-note::after { box-shadow: 0 0 0 2px color-mix(in srgb, var(--surface) 65%, var(--bg)); }
span.note-toggle { cursor: default; }

/* Sharing indicator (0.9.3): the quiet language of the note icon; a small count never grows the row. */
.share-toggle {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: var(--tap);
  margin: 0 -2px 0 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-s);
  background: transparent;
  color: var(--text-muted);
  text-decoration: none;
  cursor: pointer;
}
.share-toggle:hover { background: var(--surface-2); color: var(--text); }

/* #114 Today row: content = habit overview, "..." = the day sheet, circle = quick action. Quiet, but three real targets. */
.more-button {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: var(--tap);
  margin: 0 -2px 0 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-s);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}
.more-button:hover { background: var(--surface-2); color: var(--text); }
.more-button:active { background: var(--surface-2); }
a.habit-row__main:active { background: var(--surface-2); }
.habit-row--day .habit-row__line > :is(.check-button, .step-button, .chip-button) { margin-left: 2px; }
.habit-row--day .habit-row__name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; white-space: normal; overflow-wrap: anywhere; }
.habit-row__note { display: inline-flex; margin-left: 6px; vertical-align: -2px; color: var(--habit-accent); }

/* #139 the private note to the shown day. */
.day-note__card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-4); }
.day-note__card > .form { align-self: stretch; }
.day-note__empty { margin: 0; color: var(--text-muted); }
.day-note__text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.day-note__edit { margin-left: auto; min-height: var(--tap); padding: 0 var(--space-2); border: 0; background: transparent; cursor: pointer; }

.coachmark {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
  border-radius: var(--radius-m);
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
}
.coachmark__title { padding-right: 40px; font-weight: 650; }
.coachmark__list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: .9rem; }
.coachmark__list li { display: flex; align-items: center; gap: var(--space-2); }
.coachmark__key { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; border: 1.5px solid var(--line); border-radius: 50%; color: var(--accent); }
.coachmark__close { position: absolute; top: 4px; right: 4px; }

.page--habit-overview { --habit-accent: var(--habit-color, var(--accent)); }
.habit-overview__title { justify-content: flex-start; gap: var(--space-3); }
.habit-overview__title .page-title { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 1.6rem; }
.habit-overview__description { color: var(--text-muted); overflow-wrap: anywhere; }
.habit-notes { padding: var(--space-4); }
.habit-notes__list { display: flex; flex-direction: column; gap: var(--space-3); margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.habit-notes__date { font-size: .85rem; font-weight: 650; }
.habit-notes__text { margin: 2px 0 0; overflow-wrap: anywhere; white-space: pre-line; }

.entry-note { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--line); }
.entry-note__label { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: .85rem; font-weight: 650; }
.entry-note__text { margin: 0; overflow-wrap: anywhere; white-space: pre-line; }
.share-toggle__count {
  position: absolute;
  top: 7px;
  right: 2px;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: .64rem;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.share-contexts { display: flex; flex-direction: column; gap: var(--space-1); padding: 0 var(--space-1); }
.share-context {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 56px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-m);
  color: var(--text);
  text-decoration: none;
}
.share-context:hover { background: var(--surface-2); }
.share-context__body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.share-context__people { font-weight: 650; overflow-wrap: anywhere; }
.share-context__meta { color: var(--text-muted); font-size: .85rem; }
.share-context__action { display: inline-flex; align-items: center; gap: 2px; color: var(--accent); font-weight: 650; font-size: .9rem; white-space: nowrap; }

/* Done state uses fill + check mark, not color alone. */
.habit-row__status {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--line);
  flex: none;
}
.habit-row.is-done .habit-row__status {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-contrast);
}
.habit-row.is-done .habit-row__name { color: var(--text-muted); }

/* Today progress ring (Count/Multiple with a daily target, Value "at least"): display only, beside the quick action.
   Done = full ring + check mark (and the accessible text), not colour alone. */
.progress-ring {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  color: var(--accent);
}
.progress-ring__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.progress-ring circle { fill: none; stroke-width: 3.5; }
.progress-ring__track { stroke: var(--line); }
.progress-ring__value { stroke: currentColor; stroke-linecap: round; transition: stroke-dasharray .3s var(--ease); }
.progress-ring__check { position: relative; }
@media (max-width: 380px) { .progress-ring { width: 28px; height: 28px; } }
@media (prefers-reduced-motion: reduce) { .progress-ring__value { transition: none; } }

/* Quick actions: at least 48 px targets; the done state uses fill + check mark, not color alone. */
.check-button, .step-button, .chip-button {
  display: inline-grid;
  place-items: center;
  flex: none;
  min-width: var(--tap);
  height: var(--tap);
  border: 2px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: transform .12s var(--ease), background-color .15s var(--ease);
}
.check-button { width: var(--tap); border-radius: 50%; }
.check-button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent); color: var(--accent-contrast); }
.step-button, .chip-button { padding: 0 var(--space-3); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); color: var(--accent); }
.chip-button { font-weight: 650; }
.check-button:hover, .step-button:hover, .chip-button:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.check-button[aria-pressed="true"]:hover { background: var(--accent); }
.check-button:active, .step-button:active, .chip-button:active { transform: scale(.94); }
.check-button:disabled, .step-button:disabled, .chip-button:disabled { cursor: progress; opacity: .7; }

/* #222 one circle for habits with a daily target: the edge is the progress (the habit's colour), the inside the action;
   done = the filled circle with a check mark, like a yes/no habit. */
.ring-action {
  position: relative;
  width: var(--tap);
  min-width: var(--tap);
  padding: 0;
  border-color: transparent;
  border-radius: 50%;
  color: var(--text);
  -webkit-touch-callout: none;
  user-select: none;
}
.ring-action__ring { position: absolute; inset: -2px; width: calc(100% + 4px); height: calc(100% + 4px); pointer-events: none; }
.ring-action__ring circle { fill: none; stroke-width: 3.5; }
.ring-action__track { stroke: var(--line); }
.ring-action__value { stroke: var(--habit-accent); stroke-linecap: round; transition: stroke-dasharray .35s var(--ease); }
.ring-action__text { position: relative; font-size: .95rem; letter-spacing: -.01em; }
.ring-action__text--value { font-size: .78rem; font-weight: 750; }
.ring-action.is-complete { border-color: var(--accent); background: var(--accent); color: var(--accent-contrast); }
.ring-action.is-complete:hover { background: var(--accent); }
[data-longpress] { -webkit-touch-callout: none; }
@media (prefers-reduced-motion: reduce) { .ring-action__value { transition: none; } }

/* #225 (owner 6. 11. 2026) habit rows as glass plates over a soft RYTAVO glow (phone widths; the desktop list keeps its
   hairlines). No backdrop blur per row - scrolling stays smooth in the iPhone's WebView; the bar and sheets keep real glass. */
@media (max-width: 959.98px) {
  .app__main:has(> .page--today)::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
      radial-gradient(70% 40% at 12% 22%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%),
      radial-gradient(60% 35% at 92% 58%, rgba(139, 92, 246, .16), transparent 70%),
      radial-gradient(70% 40% at 30% 96%, rgba(51, 201, 245, .10), transparent 70%);
  }
  .page--today .habit-row {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border-color: color-mix(in srgb, var(--text) 13%, transparent);
    background: linear-gradient(160deg, color-mix(in srgb, var(--text) 9%, transparent), color-mix(in srgb, var(--text) 3%, transparent) 55%, color-mix(in srgb, var(--text) 5%, transparent));
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 18%, transparent), inset 0 -1px 0 rgba(0, 0, 0, .18), 0 8px 22px rgba(0, 0, 0, .18);
  }
  .page--today .habit-row::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 45%;
    z-index: -1;
    background: linear-gradient(180deg, color-mix(in srgb, #fff 7%, transparent), transparent);
    pointer-events: none;
  }
  .page--today .habit-row::after {
    content: "";
    position: absolute;
    left: -36px;
    top: -36px;
    width: 140px;
    height: 140px;
    z-index: -1;
    border-radius: 50%;
    background: var(--habit-accent);
    opacity: .16;
    filter: blur(34px);
    pointer-events: none;
  }
  .page--today .habit-row.is-done {
    border-color: color-mix(in srgb, var(--accent) 35%, transparent);
    background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 18%, transparent), color-mix(in srgb, var(--accent) 6%, transparent) 60%, color-mix(in srgb, var(--text) 4%, transparent));
  }
  .page--today .habit-section--secondary .habit-row { background: linear-gradient(160deg, color-mix(in srgb, var(--text) 6%, transparent), color-mix(in srgb, var(--text) 2%, transparent)); }
  /* Light theme: the plates stay white glass on the tinted page. */
  :root:not([data-theme="dark"]) .page--today .habit-row { box-shadow: inset 0 1px 0 #fff, 0 6px 18px rgba(16, 30, 50, .08); background: linear-gradient(160deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .72)); }
}
@media (max-width: 959.98px) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .page--today .habit-row { background: linear-gradient(160deg, color-mix(in srgb, var(--text) 9%, transparent), color-mix(in srgb, var(--text) 3%, transparent) 55%, color-mix(in srgb, var(--text) 5%, transparent)); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 18%, transparent), inset 0 -1px 0 rgba(0, 0, 0, .18), 0 8px 22px rgba(0, 0, 0, .18); }
}

.badge--ok { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }

.spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--nav-height) + var(--nav-raise) + var(--space-4) + env(safe-area-inset-bottom));
  z-index: 30;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100vw - 2 * var(--space-4));
  padding: var(--space-1) var(--space-2) var(--space-1) var(--space-4);
  border-radius: 999px;
  background: var(--text);
  color: var(--bg);
  box-shadow: var(--shadow);
  animation: sheet-in .2s var(--ease);
}
/* 0.9.6: with an open bottom sheet the toast moves to the top, above the backdrop, so it covers no form and Undo stays usable. */
body:has(.sheet) .toast {
  top: calc(var(--space-3) + env(safe-area-inset-top));
  bottom: auto;
  z-index: 45;
}
.toast__action {
  min-height: 40px;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font-weight: 750;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
@media (min-width: 960px) {
  .toast { bottom: var(--space-5); left: calc(50% + var(--rail-width) / 2); }
}

.page-actions { display: flex; justify-content: center; }
.page-actions--quiet { margin-top: calc(-1 * var(--space-2)); }
.link {
  padding: var(--space-2);
  border: 0;
  background: none;
  color: var(--accent);
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
/* Inside running text the side padding shows as a gap before the following full stop. */
p .link, label .link { padding-inline: 0; }
.link--quiet {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-3);
  color: var(--text-muted);
  font-size: .9rem;
  font-weight: 500;
  text-decoration-color: color-mix(in srgb, var(--text-muted) 45%, transparent);
}
.link--quiet:hover { color: var(--text); }
.back-link { display: inline-flex; align-items: center; gap: var(--space-1); align-self: flex-start; color: var(--text-muted); font-weight: 600; text-decoration: none; }
.back-link:hover { color: var(--text); }
.page-header--actions { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Forms ---------- */

.form { display: flex; flex-direction: column; gap: var(--space-4); }
.form__title { font-size: 1rem; font-weight: 700; }
.form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-4); }
/* #111: start and end date stack on a phone, side by side from 600 px. */
@media (max-width: 599px) {
  .form__row--dates { grid-template-columns: minmax(0, 1fr); }
}
.form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.form__actions--end { justify-content: flex-end; }
.form--add { padding-top: var(--space-4); border-top: 1px solid var(--line); }

.fieldset { display: flex; flex-direction: column; gap: var(--space-4); margin: 0; padding: var(--space-4) var(--space-5) var(--space-5); min-width: 0; }
.fieldset:disabled { opacity: .65; }
.fieldset__legend { float: left; width: 100%; padding: 0; font-size: 1rem; font-weight: 700; }
.fieldset__legend + * { clear: both; }

.field { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.field__label { font-weight: 600; font-size: .95rem; }
.field__optional { color: var(--text-muted); font-weight: 400; font-size: .85rem; }
/* A plain space collapses with a source space when there is one and adds it when Razor trimmed it. */
.field__optional::before { content: " "; }
.field__help { color: var(--text-muted); font-size: .85rem; }
.field__error { color: var(--danger); font-size: .85rem; font-weight: 600; }
.field__input-row { display: flex; align-items: center; gap: var(--space-2); }
.field__unit { color: var(--text-muted); font-weight: 600; }

.input {
  width: 100%;
  min-height: var(--tap);
  padding: var(--space-2) var(--space-3);
  border: 1px solid color-mix(in srgb, var(--text) 35%, var(--line));
  border-radius: var(--radius-s);
  background: var(--surface);
  color: var(--text);
}
.input:focus-visible { outline-offset: 0; }
.input[aria-invalid="true"] { border-color: var(--danger); border-width: 2px; }
.input:disabled { background: var(--surface-2); }
.input--number { max-width: 10rem; font-variant-numeric: tabular-nums; font-size: 1.1rem; }
.input--time { max-width: 9rem; font-variant-numeric: tabular-nums; }
.input--short { max-width: 7rem; }
.input--area { resize: vertical; min-height: 4.5rem; }
select.input { cursor: pointer; }
/* #111: the native iOS date control keeps its own intrinsic width and overflows a narrow column unless it may shrink. */
.input[type="date"] { display: block; min-width: 0; max-width: 100%; }
.input[type="date"]::-webkit-date-and-time-value { text-align: left; }
@supports (-webkit-touch-callout: none) {
  .input[type="date"] { -webkit-appearance: none; appearance: none; }
}

.button--quiet { background: transparent; color: var(--text); border: 1px solid var(--line); }
.button--quiet:hover { background: var(--surface-2); }
.button--danger { background: var(--danger); color: var(--on-danger, #fff); }
.button--small { min-height: 40px; padding: 0 var(--space-4); font-size: .9rem; }
.button:disabled { opacity: .6; cursor: progress; }

.status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-m); font-size: .9rem; }
.status--busy { color: var(--text-muted); }
.status--ok { color: var(--ok); font-weight: 600; }
.status--warning { background: color-mix(in srgb, var(--warning) 14%, transparent); color: var(--text); border: 1px solid color-mix(in srgb, var(--warning) 45%, transparent); }
.status--error { background: color-mix(in srgb, var(--danger) 8%, var(--surface)); color: var(--text); }
/* #066: a plan limit is not a mistake – calm surface, no error red. */
.status--plan { flex-direction: column; align-items: flex-start; background: var(--surface-2); color: var(--text); border: 1px solid var(--line); }
.status--plan .plan-hint { margin: 0; }
/* Conflict: clear but calm – nothing is broken, the latest state just has to be loaded. */
.status--conflict { flex-wrap: nowrap; align-items: flex-start; background: var(--surface-2); color: var(--text); }
.status--conflict .status__icon { flex: none; margin-top: 2px; color: var(--text-muted); }
.status--conflict p { flex: 1; }
.status--conflict .link { flex: none; align-self: center; padding: var(--space-2) 0 var(--space-2) var(--space-2); white-space: nowrap; }
@media (max-width: 420px) {
  .status--conflict { flex-wrap: wrap; }
  .status--conflict p { flex-basis: calc(100% - 30px); }
  .status--conflict .link { margin-left: 26px; padding-left: 0; }
}
.status ul { margin: 0; padding-left: var(--space-5); }
.form-errors { flex-direction: column; align-items: flex-start; outline: none; }
.form-errors:focus-visible { outline: 3px solid var(--focus); }

.notice--info { display: flex; flex-direction: column; gap: var(--space-2); color: var(--text); }
.notice--compact { gap: var(--space-1); padding: var(--space-3) var(--space-4); font-size: .88rem; }
.notice__warning { color: var(--warning); font-weight: 600; }

.confirm-inline { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.confirm-box { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-m); background: var(--surface-2); }

/* 0.9.4: archived habit detail and the danger zone of permanent delete (icon + heading, not colour alone). */
.summary-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-1); margin: 0; }
.summary-list dt { margin-top: var(--space-2); color: var(--text-muted); font-size: .85rem; font-weight: 600; }
.summary-list dt:first-child { margin-top: 0; }
.summary-list dd { margin: 0; overflow-wrap: anywhere; }
.danger-zone { border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); }
.danger-zone .fieldset__legend { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--danger); }
.confirm-box--danger { background: color-mix(in srgb, var(--danger) 8%, var(--surface)); border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent); }
.danger-zone__counts, .danger-zone__links { margin: 0; padding-left: var(--space-5); display: flex; flex-direction: column; gap: var(--space-1); }
.danger-zone__links .is-blocking { color: var(--danger); font-weight: 600; }

.segmented { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.segmented__option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 56px;
  border: 2px solid var(--line);
  border-radius: var(--radius-m);
  background: transparent;
  font-weight: 650;
  cursor: pointer;
}
.segmented__option[aria-pressed="true"] { border-color: var(--habit-accent, var(--accent)); background: color-mix(in srgb, var(--habit-accent, var(--accent)) 14%, transparent); }

.choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.choice {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: var(--tap);
  padding: var(--space-2) var(--space-3);
  border: 2px solid var(--line);
  border-radius: var(--radius-m);
  cursor: pointer;
}
.choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: inherit; }
.choice:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.choice.is-selected { border-color: var(--accent); background: var(--accent-soft); }
.choice.is-disabled { cursor: not-allowed; opacity: .6; }
.choice.is-disabled.is-selected { opacity: 1; }
.choice__title { font-weight: 700; }
.choice__text { color: var(--text-muted); font-size: .8rem; line-height: 1.35; }

/* #204 days of the week in one row on every phone: seven equal segments, the chosen ones filled. */
.weekday-picker { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; max-width: 26rem; }
.weekday {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  height: 44px;
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}
.weekday input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.weekday:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.weekday.is-selected { background: var(--accent); color: var(--accent-contrast); }
@media (prefers-reduced-motion: reduce) { .weekday { transition: none; } }

/* #203/#204 a setting with a time (iOS settings pattern): label on the left, the time as a quiet capsule on the right. */
.setting-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 52px; }
.setting-list > .setting-row + .setting-row { border-top: 1px solid var(--line); }
.setting-row__label { min-width: 0; margin: 0; font-weight: 600; line-height: 1.3; }
.setting-row__control { display: inline-flex; flex: none; align-items: center; gap: var(--space-1); }
.setting-row__remove { width: 36px; height: 36px; min-height: 36px; color: var(--text-muted); }
.setting-row__action { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--tap); padding: 0; border: 0; background: none; color: var(--accent); font: inherit; font-weight: 650; cursor: pointer; }
.setting-row__action:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-s); }
.time-pill {
  -webkit-appearance: none;
  appearance: none;
  flex: none;
  min-width: 5.5rem;
  height: 40px;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 1.05rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: center;
  cursor: pointer;
}
.time-pill::-webkit-date-and-time-value { text-align: center; }
.time-pill:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.time-pill:disabled { opacity: .6; cursor: default; }

.icon-picker, .color-picker { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.icon-picker__option, .color-picker__option {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--tap);
  height: var(--tap);
  border: 2px solid var(--line);
  border-radius: var(--radius-s);
  cursor: pointer;
}
.icon-picker__option input, .color-picker__option input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.icon-picker__option:has(input:focus-visible), .color-picker__option:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.icon-picker__option.is-selected { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
/* #106: the chosen icon stays named above the picker; categories are one scrollable row of chips. */
.icon-picker__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-3); }
.icon-picker__current { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: var(--text-muted); font-size: .88rem; font-weight: 600; }
.icon-picker__current .icon { flex: none; color: var(--accent); }
.icon-tabs {
  display: flex;
  gap: var(--space-2);
  margin: 0 calc(-1 * var(--space-5));
  padding: 2px var(--space-5) 4px;
  overflow-x: auto;
  scroll-padding-inline: var(--space-5);
  scrollbar-width: none;
}
.icon-tabs::-webkit-scrollbar { display: none; }
/* #111: an edge fade and a small arrow show that the strip continues (classes set by js/chips.js from the real scroll state). */
.icon-tabs-wrap { position: relative; margin-bottom: var(--space-3); }
.icon-tabs-wrap::before, .icon-tabs-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  width: 64px;
  opacity: 0;
  transition: opacity .15s ease;
  pointer-events: none;
}
.icon-tabs-wrap::before { left: calc(-1 * var(--space-5)); background: linear-gradient(to right, var(--surface) 35%, color-mix(in srgb, var(--surface) 0%, transparent)); }
.icon-tabs-wrap::after { right: calc(-1 * var(--space-5)); background: linear-gradient(to left, var(--surface) 35%, color-mix(in srgb, var(--surface) 0%, transparent)); }
.icon-tabs-wrap.has-prev::before, .icon-tabs-wrap.has-next::after { opacity: 1; }
.icon-tabs__more {
  position: absolute;
  top: 2px;
  z-index: 2;
  display: none;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
}
.icon-tabs__more--prev { left: calc(-1 * var(--space-4)); }
.icon-tabs__more--next { right: calc(-1 * var(--space-4)); }
.icon-tabs-wrap.has-prev .icon-tabs__more--prev, .icon-tabs-wrap.has-next .icon-tabs__more--next { display: grid; }
.icon-tabs__arrow {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--text) 12%, transparent);
}
.icon-tabs__more:hover .icon-tabs__arrow { color: var(--text); }
.icon-tabs__more:focus-visible { outline: none; }
.icon-tabs__more:focus-visible .icon-tabs__arrow { outline: 3px solid var(--focus); outline-offset: 2px; }
/* Wider screens (mouse) see every category at once instead of a hidden horizontal scroll. */
@media (min-width: 600px) {
  .icon-tabs { flex-wrap: wrap; margin-inline: 0; padding-inline: 0; overflow: visible; }
  .icon-tabs-wrap::before, .icon-tabs-wrap::after, .icon-tabs-wrap .icon-tabs__more { display: none; }
}
.icon-tab {
  position: relative;
  flex: none;
  min-height: 44px;
  padding: 0 var(--space-3);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: .88rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.icon-tab:hover { color: var(--text); background: var(--surface-2); }
.icon-tab.is-active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 700; }
/* A small dot on the category that holds the chosen icon. */
.icon-tab__mark { position: absolute; top: 7px; right: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
/* #066: the Plus currency choice reuses the chip look (links, so it works without scripts). */
.currency-choice { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.currency-choice .icon-tab { display: inline-flex; align-items: center; text-decoration: none; }
.pick-row--setting { margin-top: var(--space-2); padding-inline: 0; border-radius: var(--radius-s); }
.pick-row--setting .habit-row__name { white-space: normal; }
.color-picker__option { border-radius: 50%; background: var(--swatch, var(--accent)); border-color: transparent; }
.color-picker__option.is-default { background: var(--brand-gradient); }
.color-picker__option.is-selected { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--text); }
.color-picker__custom { background: var(--swatch, var(--surface-2)); border: 2px dashed var(--line); color: var(--text-muted); }
.color-picker__custom.is-selected { border-color: transparent; }

/* Collapsible form sections (accordion). */
.habit-form { gap: var(--space-3); }
.fold { overflow: hidden; }
.fold.has-error { border-color: var(--danger); }
.fold__heading { margin: 0; font-size: 1rem; }
.fold__toggle {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 20px;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 56px;
  padding: var(--space-2) var(--space-4) var(--space-2) var(--space-5);
  border: 0;
  background: transparent;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.fold__toggle:hover { background: var(--surface-2); }
.fold__toggle:focus-visible { outline-offset: -3px; }
.fold__summary { grid-column: 2; justify-self: end; max-width: 100%; overflow: hidden; color: var(--text-muted); font-size: .88rem; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.fold__chevron { grid-column: 3; color: var(--text-muted); transition: transform .2s var(--ease); }
.fold.is-open .fold__chevron { transform: rotate(180deg); }
.fold__panel { display: flex; flex-direction: column; gap: var(--space-4); padding: 0 var(--space-5) var(--space-5); }
.fieldset-plain { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; margin: 0; padding: 0; border: 0; }
.fieldset-plain:disabled { opacity: .65; }
.fieldset-plain > legend:not(.visually-hidden) { float: left; width: 100%; padding: 0; }
.fieldset-plain > legend:not(.visually-hidden) + * { clear: both; }
/* #209 the identity proof inside a form: its own quiet section below a hairline, so its heading is not read as a second label. */
.identity-proof { padding-top: var(--space-4); border-top: 1px solid var(--line); }
.identity-proof > .identity-proof__title { margin-bottom: var(--space-1); color: var(--text-muted); font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.type-locked { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); }
.type-locked__value { font-weight: 700; }
.appearance-summary { --habit-accent: var(--habit-color, var(--accent)); display: inline-flex; align-items: center; gap: var(--space-2); }
.appearance-summary__icon { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: color-mix(in srgb, var(--habit-accent) 14%, transparent); color: var(--habit-accent); }

.icon-button:disabled { opacity: .35; cursor: default; }
.icon-button:disabled:hover { background: transparent; }

/* Habit order (0.8.3): compact rows; only the grip starts a drag, so the page still scrolls everywhere else. */
.reorder-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--space-3); min-height: 24px; margin-bottom: var(--space-2); }
.reorder-bar__state { display: inline-flex; align-items: center; gap: 4px; margin: 0; color: var(--text-muted); font-size: .8rem; }
.reorder-bar__state.is-saved { color: var(--ok); font-weight: 600; }
.reorder-list { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; -webkit-user-select: none; user-select: none; }
.reorder-item {
  --habit-accent: var(--habit-color, var(--accent));
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 52px;
  padding: 0 2px 0 var(--space-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
}
.reorder-item.is-shifting, .reorder-item.is-settling { transition: transform .16s var(--ease); }
.reorder-item.is-dragging {
  z-index: 5;
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  box-shadow: 0 10px 24px rgb(16 30 50 / .16), 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
  cursor: grabbing;
}
.reorder-item.is-settling { z-index: 5; }
.reorder-item__icon { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: color-mix(in srgb, var(--habit-accent) 14%, transparent); color: var(--habit-accent); }
.reorder-item__name { flex: 1; min-width: 0; overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.reorder-move, .reorder-handle { flex: none; display: grid; place-items: center; height: 48px; padding: 0; border: 0; border-radius: var(--radius-s); background: transparent; color: var(--text-muted); cursor: pointer; }
.reorder-move { width: 32px; opacity: .7; }
.reorder-move:hover:not(:disabled), .reorder-handle:hover { background: var(--surface-2); color: var(--text); opacity: 1; }
.reorder-move:disabled { opacity: .2; cursor: default; }
.reorder-handle { width: 44px; color: var(--text); touch-action: none; cursor: grab; }
.reorder-item.is-dragging .reorder-handle { cursor: grabbing; color: var(--accent); }
.reorder-move:focus-visible, .reorder-handle:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.reorder-list[data-busy] .reorder-handle { cursor: progress; }

/* ---------- Entry sheet ---------- */

.sheet--form { --habit-accent: var(--habit-color, var(--accent)); max-height: 92dvh; overflow-y: auto; }
.sheet__heading { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.sheet__subtitle { color: var(--text-muted); font-size: .85rem; }
.sheet__subtitle::first-letter { text-transform: uppercase; }
.sheet__body { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-1) var(--space-2) 0; }
.sheet__goal { color: var(--text-muted); font-size: .9rem; }
.sheet__status:empty { display: none; }

.occurrence-list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-m); overflow: hidden; }
.occurrence { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); min-height: 56px; padding: var(--space-2) var(--space-3) var(--space-2) var(--space-4); }
.occurrence + .occurrence { border-top: 1px solid var(--line); }
.occurrence__time { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 3.5rem; }
.occurrence__amount { flex: 1; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.occurrence__edit { display: flex; flex-direction: column; gap: var(--space-3); width: 100%; padding: var(--space-2) 0; }

/* ---------- History ---------- */

.day-list { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); overflow: hidden; }
.day-list li + li { border-top: 1px solid var(--line); }
.day-list__row {
  display: grid;
  grid-template-columns: 5.5rem 1fr auto 18px;
  align-items: center;
  gap: var(--space-3);
  min-height: 60px;
  padding: var(--space-2) var(--space-4);
  text-decoration: none;
}
.day-list__row:hover { background: var(--surface-2); }
.day-list__date { display: flex; flex-direction: column; line-height: 1.2; }
.day-list__weekday { color: var(--text-muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; }
.day-list__score { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }
.day-list__score.is-muted { grid-column: 2 / 4; color: var(--text-muted); font-weight: 400; text-align: left; }
.day-list__chevron { color: var(--text-muted); }
.day-list__score { display: inline-flex; align-items: center; justify-content: flex-end; gap: var(--space-1); }
.day-list__score.is-muted { justify-content: flex-start; }
.day-list__check { color: var(--ok); }
.day-list__row.is-complete .day-list__weekday { color: var(--ok); }
.day-list__row.is-missed .day-list__score { color: var(--text-muted); }

.streak { color: var(--text-muted); font-weight: 600; white-space: nowrap; }

.segmented-links { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--surface-2); }
.segmented-links__item {
  display: inline-grid;
  place-items: center;
  min-width: 72px;
  min-height: 40px;
  padding: 0 var(--space-3);
  border-radius: 999px;
  color: var(--text-muted);
  font-size: .9rem;
  font-weight: 650;
  text-decoration: none;
}
.segmented-links__item[aria-current="page"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
button.segmented-links__item { border: 0; background: transparent; cursor: pointer; }
.segmented-links__item[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }

/* ---------- Statistics ---------- */

.stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.stat-card { display: flex; flex-direction: column; gap: 2px; padding: var(--space-4); }
.stat-card__title { color: var(--text-muted); font-size: .85rem; font-weight: 600; }
.stat-card__value { font-size: 2rem; font-weight: 750; line-height: 1.15; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stat-card__sub { color: var(--text-muted); font-size: .85rem; font-variant-numeric: tabular-nums; }
.stat-hint { margin-top: calc(-1 * var(--space-4)); padding: 0 var(--space-1); }

.chart-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); }
.day-bars { display: flex; align-items: flex-end; gap: 3px; height: 96px; margin: 0; padding: 0; list-style: none; }
.day-bars__item { position: relative; flex: 1; height: 100%; border-radius: 4px; background: var(--surface-2); }
.day-bars__bar { position: absolute; inset: auto 0 0; height: var(--h); border-radius: 4px; background: var(--accent); }
.day-bars__item.is-empty { background: transparent; border: 1px dashed var(--line); }
.day-bars__item.is-today .day-bars__bar { background: var(--brand-gradient); }
.day-bars__axis { display: flex; justify-content: space-between; color: var(--text-muted); font-size: .78rem; }

.stat-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; overflow: hidden; }
.stat-list__row {
  --habit-accent: var(--habit-color, var(--accent));
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  min-height: 60px;
  padding: var(--space-2) var(--space-4);
}
.stat-list__row + .stat-list__row { border-top: 1px solid var(--line); }
.stat-list__row .habit-row__icon { width: 34px; height: 34px; border-radius: 10px; }
.stat-list__name { display: flex; flex-direction: column; gap: 6px; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.stat-list__bar .progress { height: 6px; }
.stat-list__value { display: flex; flex-direction: column; align-items: flex-end; text-align: right; font-variant-numeric: tabular-nums; }
.stat-list__sub { color: var(--text-muted); font-size: .8rem; }

/* 0.9.37 (#063): only Statistics opt into a wide desktop dashboard; same DOM order on every width. */
.app__main:has(.page--stats) { --content-width: 1280px; }
.stats-overview, .stats-summary, .stats-lists { display: flex; flex-direction: column; gap: var(--space-5); }
.day-bars__tick { display: none; }
@media (min-width: 720px) {
  .page--stats .day-bars { height: 140px; }
  .day-bars__axis { display: grid; grid-template-columns: repeat(var(--days), minmax(0, 1fr)); column-gap: 3px; }
  .day-bars__axis > span { grid-row: 1; grid-column: var(--at) / span 6; white-space: nowrap; }
  .day-bars__axis > .day-bars__today { grid-column: span 5 / -1; justify-self: end; }
  .day-bars__tick { display: block; }
}
/* Side by side only from ~930 px of content next to the rail. */
@media (min-width: 1200px) {
  .stats-overview { display: grid; grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); gap: var(--space-4); }
  .stats-overview .stat-grid { grid-template-columns: minmax(0, 1fr); }
  .stats-overview .day-bars { flex: 1; height: auto; min-height: 180px; }
  .stats-lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); align-items: start; gap: var(--space-5); }
}
/* 0.9.51 (#089): calmer, denser desktop Statistics - flat cards, smaller type, tighter rows.
   Desktop/tablet landscape only (rail layout); mobile keeps its touch-comfortable scale. */
@media (min-width: 960px) {
  .page--stats { gap: var(--space-4); }
  .page--stats .page-title { font-size: 1.6rem; }
  .page--stats .section-title { font-size: .72rem; }
  .page--stats .card { box-shadow: none; }
  .page--stats .stats-overview, .page--stats .stats-summary, .page--stats .stats-lists { gap: var(--space-4); }
  .page--stats .stat-grid { gap: var(--space-2); }
  .page--stats .stat-card { padding: var(--space-3) var(--space-4); }
  .page--stats .stat-card__title { font-size: .8rem; }
  .page--stats .stat-card__value { font-size: 1.6rem; }
  .page--stats .stat-card__sub { font-size: .8rem; }
  .page--stats .stat-hint { margin-top: calc(-1 * var(--space-2)); font-size: .8rem; }
  .page--stats .plan-card { padding: var(--space-3) var(--space-4); }
  .page--stats .chart-card { gap: var(--space-2); padding: var(--space-3) var(--space-4); }
  .page--stats .day-bars { gap: 4px; height: 120px; }
  .page--stats .day-bars__item, .page--stats .day-bars__bar { border-radius: 3px; }
  .page--stats .day-bars__item:not(.is-today) .day-bars__bar { background: color-mix(in srgb, var(--accent) 82%, var(--surface)); }
  .page--stats .day-bars__axis { column-gap: 4px; font-size: .72rem; }
  .page--stats .habit-section { gap: var(--space-1); }
  .page--stats .stat-list__row { grid-template-columns: 28px minmax(0, 1fr) auto; min-height: 46px; padding: 6px var(--space-4); }
  .page--stats .stat-list__row .habit-row__icon { width: 28px; height: 28px; border-radius: 8px; }
  .page--stats .stat-list__row .habit-row__icon svg { width: 16px; height: 16px; }
  .page--stats .stat-list__name { gap: 4px; font-size: .92rem; }
  .page--stats .stat-list__bar .progress { height: 4px; }
  .page--stats .stat-list__value { font-size: .92rem; line-height: 1.3; }
  .page--stats .stat-list__sub { font-size: .75rem; }
}
@media (min-width: 1200px) {
  .page--stats .stats-overview { grid-template-columns: minmax(220px, 260px) minmax(0, 1fr); }
  .page--stats .stats-overview .day-bars { min-height: 140px; }
  .page--stats .stats-lists { gap: var(--space-4); }
}

/* 0.9.52 (#091): day-outcome donut (30-day view), the rhythm grid moved here from Overview and drawn softer. */
.donut-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); }
.donut-card__body { display: flex; align-items: center; gap: var(--space-4); }
.donut { position: relative; flex: none; width: 104px; height: 104px; margin: 0; }
.donut svg { display: block; width: 100%; height: 100%; }
.donut circle { fill: none; stroke-width: 4.2; }
.donut__track { stroke: var(--surface-2); }
.donut__slice.is-done, .donut-legend__key.is-done { stroke: color-mix(in srgb, var(--accent) 82%, var(--surface)); background: color-mix(in srgb, var(--accent) 82%, var(--surface)); }
.donut__slice.is-partial, .donut-legend__key.is-partial { stroke: color-mix(in srgb, var(--accent) 36%, var(--surface)); background: color-mix(in srgb, var(--accent) 36%, var(--surface)); }
.donut__slice.is-missed, .donut-legend__key.is-missed { stroke: color-mix(in srgb, var(--text-muted) 34%, var(--surface)); background: color-mix(in srgb, var(--text-muted) 34%, var(--surface)); }
.donut__slice.is-free, .donut-legend__key.is-free { stroke: color-mix(in srgb, var(--text-muted) 12%, var(--surface)); background: color-mix(in srgb, var(--text-muted) 12%, var(--surface)); }
.donut__center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; text-align: center; }
.donut__center strong { font-size: 1.5rem; font-weight: 750; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.donut__center span { max-width: 60%; color: var(--text-muted); font-size: .66rem; line-height: 1.15; }
.donut-legend { display: flex; flex: 1; flex-direction: column; gap: 6px; min-width: 0; margin: 0; padding: 0; list-style: none; font-size: .82rem; }
.donut-legend li { display: flex; align-items: center; gap: var(--space-2); }
.donut-legend li.is-zero { color: var(--text-muted); }
.donut-legend__key { flex: none; width: 10px; height: 10px; border-radius: 3px; }
.donut-legend__label { min-width: 0; }
.donut-legend__count { margin-left: auto; font-weight: 650; font-variant-numeric: tabular-nums; }
.donut-card__hint { color: var(--text-muted); font-size: .78rem; line-height: 1.4; }

.page--stats .rhythm-grid {
  --cell-line: color-mix(in srgb, var(--text-muted) 26%, transparent);
  --cell-faint: color-mix(in srgb, var(--text-muted) 6%, transparent);
  --cell-level-1: color-mix(in srgb, var(--accent) 14%, var(--surface));
  --cell-level-2: color-mix(in srgb, var(--accent) 26%, var(--surface));
  --cell-level-3: color-mix(in srgb, var(--accent) 40%, var(--surface));
  --cell-level-4: color-mix(in srgb, var(--accent) 54%, var(--surface));
  --cell-level-5: color-mix(in srgb, var(--accent) 70%, var(--surface));
  --total-level-4: color-mix(in srgb, var(--accent) 44%, var(--surface));
  --total-level-5: color-mix(in srgb, var(--accent) 58%, var(--surface));
}
:root[data-theme="dark"] .page--stats .rhythm-grid {
  --cell-line: color-mix(in srgb, var(--text-muted) 22%, transparent);
  --cell-level-1: color-mix(in srgb, var(--accent) 12%, var(--surface));
  --cell-level-2: color-mix(in srgb, var(--accent) 22%, var(--surface));
  --cell-level-3: color-mix(in srgb, var(--accent) 34%, var(--surface));
  --cell-level-4: color-mix(in srgb, var(--accent) 48%, var(--surface));
  --cell-level-5: color-mix(in srgb, var(--accent) 64%, var(--surface));
  --total-level-4: color-mix(in srgb, var(--accent) 38%, var(--surface));
  --total-level-5: color-mix(in srgb, var(--accent) 50%, var(--surface));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .page--stats .rhythm-grid {
    --cell-line: color-mix(in srgb, var(--text-muted) 22%, transparent);
    --cell-level-1: color-mix(in srgb, var(--accent) 12%, var(--surface));
    --cell-level-2: color-mix(in srgb, var(--accent) 22%, var(--surface));
    --cell-level-3: color-mix(in srgb, var(--accent) 34%, var(--surface));
    --cell-level-4: color-mix(in srgb, var(--accent) 48%, var(--surface));
    --cell-level-5: color-mix(in srgb, var(--accent) 64%, var(--surface));
    --total-level-4: color-mix(in srgb, var(--accent) 38%, var(--surface));
    --total-level-5: color-mix(in srgb, var(--accent) 50%, var(--surface));
  }
}
.page--stats .rhythm-cell { border-width: 1px; }
/* The total row carries percentages: its full step stays light enough for the normal text color (>= 4.5:1). */
.page--stats .rhythm-cell--total.level-4 { background: var(--total-level-4); }
.page--stats .rhythm-cell--total.level-5 { background: var(--total-level-5); color: var(--text); }
.page--stats .rhythm-grid__date { font-weight: 500; }
.page--stats .rhythm-grid__total > * { border-top-color: color-mix(in srgb, var(--line) 70%, transparent); }
.page--stats .rhythm-grid--long .rhythm-grid__habit { box-shadow: -2px 0 0 var(--surface), 8px 0 8px -8px color-mix(in srgb, var(--text) 12%, transparent); }
/* #094: Saturday/Sunday as a clear, quiet band through header, habit rows and total (~1/3 more contrast than #091). */
.page--stats .rhythm-grid { --stats-weekend: color-mix(in srgb, var(--rytavo-border) 28%, var(--rytavo-surface)); }
:root[data-theme="dark"] .page--stats .rhythm-grid { --stats-weekend: color-mix(in srgb, var(--rytavo-muted) 5.5%, var(--rytavo-surface)); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .page--stats .rhythm-grid { --stats-weekend: color-mix(in srgb, var(--rytavo-muted) 5.5%, var(--rytavo-surface)); }
}
.page--stats .rhythm-grid__table .is-weekend { background: var(--stats-weekend); }

@media (min-width: 960px) {
  .page--stats .card { border-color: color-mix(in srgb, var(--line) 75%, transparent); }
  .page--stats .donut-card { gap: var(--space-2); padding: var(--space-3) var(--space-4); }
  .page--stats .donut { width: 100px; height: 100px; }
  .page--stats .donut-legend { gap: 4px; font-size: .78rem; }
  .page--stats .donut-card__hint { font-size: .72rem; }
  .page--stats .rhythm-grid { padding: var(--space-3) var(--space-4) var(--space-4); }
  /* #092: one geometry for 7/30/90 days - only the number of columns changes; columns never stretch to the card. */
  .page--stats .rhythm-grid { --cell: 22px; --cell-pitch: 26px; --row-pitch: 27px; --cell-radius: 5px; --name-width: 150px; }
  .page--stats .rhythm-grid .rhythm-grid__table { width: auto; }
  .page--stats .rhythm-grid .rhythm-grid__corner, .page--stats .rhythm-grid .rhythm-grid__habit { width: var(--name-width); min-width: var(--name-width); max-width: var(--name-width); }
  .page--stats .rhythm-grid .rhythm-grid__day { font-size: .66rem; }
  /* #094: one header rule for 7/30/90 - the day number on every column (weekdays read from the weekend band). */
  .page--stats .rhythm-grid .rhythm-grid__dow { display: none; }
  .page--stats .rhythm-grid .rhythm-grid__date.is-month-start .rhythm-grid__day { color: var(--text); font-weight: 700; }
}
/* #093: desktop profile chip - who is signed in, one click to Profile. */
.app-topbar { display: none; }
@media (min-width: 960px) {
  .app-topbar { display: flex; justify-content: flex-end; margin: calc(-1 * var(--space-4)) 0 var(--space-1); }
  .profile-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    max-width: 240px;
    height: 36px;
    padding: 0 var(--space-3) 0 4px;
    border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .15s var(--ease), border-color .15s var(--ease);
  }
  .profile-chip:hover { background: var(--surface-2); border-color: var(--line); }
  .profile-chip .profile-chip__avatar { width: 28px; height: 28px; font-size: .8rem; }
  .profile-chip__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (min-width: 960px) and (max-width: 1199px) {
  .profile-chip { padding: 0 3px; }
  .profile-chip__name { display: none; }
}
@media (min-width: 1200px) {
  .page--stats .stats-overview:has(.donut-card) { grid-template-columns: minmax(210px, 240px) minmax(0, 1fr) minmax(250px, 290px); }
}

/* 0.9.52 (#091): a lighter desktop rail - quiet off-white panel, compact items, a calm active item. Mobile bar unchanged. */
@media (min-width: 960px) {
  :root { --rail-bg: color-mix(in srgb, var(--rytavo-border) 24%, var(--bg)); }
  :root[data-theme="dark"] { --rail-bg: color-mix(in srgb, var(--rytavo-surface) 45%, var(--rytavo-bg)); }
  .bottom-nav { gap: 2px; padding: var(--space-5) var(--space-3); border-right: 1px solid color-mix(in srgb, var(--line) 65%, transparent); }
  .bottom-nav::before { inset: 0; background: var(--rail-bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .bottom-nav__brand { margin: 0 0 var(--space-5) var(--space-1); }
  .bottom-nav__item { gap: 10px; min-height: 40px; padding: 0 var(--space-3); border-radius: 10px; font-size: .875rem; font-weight: 500; }
  .bottom-nav__item .icon { width: 20px; height: 20px; }
  .bottom-nav__item:hover { background: color-mix(in srgb, var(--text) 5%, transparent); color: var(--text); }
  .bottom-nav__item.active { background: var(--surface); box-shadow: 0 0 0 1px color-mix(in srgb, var(--line) 80%, transparent), 0 1px 2px rgb(16 30 50 / .05); color: var(--text); font-weight: 600; }
  .bottom-nav__item.active .icon { color: var(--accent); }
  .bottom-nav__add { gap: 10px; height: 40px; margin: 0 0 var(--space-4); padding: 0 var(--space-3); font-size: .875rem; font-weight: 600; }
  .bottom-nav__add .icon { width: 20px; height: 20px; }
}
@media (min-width: 960px) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --rail-bg: color-mix(in srgb, var(--rytavo-surface) 45%, var(--rytavo-bg)); }
}

/* 0.9.56 (#095): desktop Profile workspace - the Profile rows as a quiet nested menu under Profil, the page on the right. */
.rail-sub { display: none; }
@media (min-width: 960px) {
  .bottom-nav > * { flex-shrink: 0; }
  .bottom-nav .bottom-nav__item.is-open { background: transparent; box-shadow: none; color: var(--text); font-weight: 600; }
  .bottom-nav .bottom-nav__item.is-open .icon { color: var(--accent); }
  .rail-sub {
    display: flex;
    flex: 0 1 auto;
    flex-direction: column;
    min-height: 0;
    margin: 2px 0 0 21px;
    padding: 0 2px var(--space-3) var(--space-2);
    border-left: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
  }
  .rail-sub:is(:hover, :focus-within) { scrollbar-color: color-mix(in srgb, var(--text-muted) 35%, transparent) transparent; }
  .rail-sub__group { display: flex; flex-direction: column; gap: 1px; }
  .rail-sub__heading { padding: var(--space-3) var(--space-2) 3px; color: var(--text-muted); font-size: .66rem; font-weight: 700; letter-spacing: .08em; line-height: 1.3; text-transform: uppercase; }
  .rail-sub a { display: flex; align-items: center; gap: 6px; min-height: 30px; padding: 4px var(--space-2); border-radius: 8px; color: var(--text-muted); font-size: .8125rem; line-height: 1.25; text-decoration: none; }
  .rail-sub a:hover { background: color-mix(in srgb, var(--text) 5%, transparent); color: var(--text); }
  .rail-sub a[aria-current="page"] { background: var(--surface); box-shadow: 0 0 0 1px color-mix(in srgb, var(--line) 80%, transparent); color: var(--text); font-weight: 600; }
  .rail-sub a.is-danger { color: var(--danger); }
  .rail-sub .nav-dot--inline { margin: 0 0 0 auto; background: var(--accent); }
  /* The page sits next to the rail (left-aligned, comfortable reading width); the top bar keeps the chip at the right. */
  .app:has(.rail-sub) .app__main { --content-width: 1280px; max-width: none; margin-left: 0; }
  .app:has(.rail-sub) .app__main > :not(.app-topbar, .page--wide, .visually-hidden) { width: 100%; max-width: 760px; }
  .app__main .profile-nav { display: none; }
}

/* 0.9.57 (#096): desktop Today - a calm daily workspace beside the rail: one compact header line, the score as a quiet
   summary, habits as one list with hairlines instead of separate cards. Mobile keeps its layout and 48 px targets. */
@media (min-width: 960px) {
  .app__main:has(> .page--today) { --content-width: 1280px; max-width: none; margin-left: 0; }
  .app__main > .page--today { width: 100%; max-width: 760px; gap: var(--space-4); }
  /* The undo toast stays centred under the column it belongs to. */
  .app__main:has(> .page--today) .toast { left: calc(var(--rail-width) + var(--space-5) + min(760px, 100% - var(--rail-width) - var(--space-5) - var(--space-4)) / 2); }
  .page--today .day-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "date switch" "score score" "bar bar";
    align-items: center;
    gap: var(--space-1) var(--space-4);
  }
  /* #165 the wrappers only group the phone's pinned header; here their children sit in the hero's grid as before. */
  .page--today :is(.day-head, .day-hero__body) { display: contents; }
  .page--today .day-switcher { grid-area: switch; grid-template-columns: 36px auto 36px; gap: 2px; margin: 0 -6px 0 0; }
  .page--today .day-switcher .icon-button { width: 36px; height: 36px; }
  .page--today .day-switcher__label { padding: 6px var(--space-3); font-size: .72rem; }
  .page--today .day-switcher__label:not(.is-today):hover { background: var(--surface-2); color: var(--text); }
  .page--today #day-heading { grid-area: date; min-width: 0; color: var(--text); font-size: 1.5rem; font-weight: 700; letter-spacing: -.015em; line-height: 1.2; }
  .page--today .day-hero__body > :is(.day-hero__score, .day-hero__meta) { grid-area: score; }
  .page--today .day-hero__score { column-gap: var(--space-2); }
  .page--today .big-number { font-size: 1.75rem; letter-spacing: -.03em; }
  .page--today .big-number__total { font-size: .62em; }
  .page--today .day-hero__meta { font-size: .9rem; }
  .page--today .day-hero__body > .progress { grid-area: bar; height: 6px; margin-top: 2px; }
  .page--today .install-promo { gap: var(--space-3); padding: var(--space-3) var(--space-4); box-shadow: none; }
  .page--today .install-promo__icon { width: 32px; height: 32px; border-radius: 10px; }
  .page--today .install-promo__text { gap: var(--space-1); }
  .page--today .install-promo__lead { font-size: .875rem; }
  .page--today .install-promo__dismiss { min-height: 36px; }
  .page--today .challenge-strip__list { grid-auto-columns: calc(50% - var(--space-3) / 2); margin: 0; padding: 2px 0 var(--space-1); scroll-padding-inline: 0; }
  .page--today .challenge-strip.is-single .challenge-strip__list { grid-auto-columns: 100%; }
  .page--today .challenge-slide { box-shadow: none; }
  /* One list surface; rows are divided by hairlines. */
  .page--today .habit-list { gap: 0; border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--surface); }
  .page--today .habit-section--secondary .habit-list { background: color-mix(in srgb, var(--surface) 65%, var(--bg)); }
  .page--today .habit-row { border: 0; border-radius: 0; background: transparent; }
  .page--today .habit-row:first-child { border-radius: var(--radius-l) var(--radius-l) 0 0; }
  .page--today .habit-row:last-child { border-radius: 0 0 var(--radius-l) var(--radius-l); }
  .page--today .habit-row:only-child { border-radius: var(--radius-l); }
  .page--today .habit-row + .habit-row { border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
  .page--today .habit-row.is-saving { background: color-mix(in srgb, var(--habit-accent) 5%, transparent); }
  .page--today .habit-row__line { min-height: 52px; padding: 2px var(--space-3) 2px 6px; gap: 6px; }
  .page--today .habit-row__main { min-height: 44px; gap: var(--space-3); }
  .page--today .habit-row__icon { width: 32px; height: 32px; border-radius: 10px; }
  .page--today .habit-row__icon .icon { width: 18px; height: 18px; }
  .page--today .habit-row__name { font-size: .975rem; }
  .page--today .habit-row__meta { font-size: .8125rem; }
  .page--today :is(.note-toggle, .share-toggle) { width: 36px; height: 40px; }
  .page--today .more-button { width: 36px; height: 40px; }
  .page--today :is(.check-button, .step-button, .chip-button) { min-width: 40px; height: 40px; }
  .page--today .check-button { width: 40px; }
  .page--today .section-header--inline { padding: 0 2px; }
  .page--today .measure-today__hint::before { content: none; }
  .page--today .page-actions--quiet { justify-content: flex-start; margin-top: calc(-1 * var(--space-1)); }
}

/* 0.9.61 (#099): desktop Today is a daily workspace, not a stretched phone column. The same DOM in the mobile order
   (the wrappers are display: contents below 1024 px); from 1024 px the day summary spans the top, habits are the
   dominant main column and the existing secondary blocks (offer, install prompt, challenges, measurements) form a
   quiet side column. Mobile and the 960-1023 px #096 column are unchanged. */
.today-habits, .today-challenges { display: contents; }
.today-habits__manage { display: none; }
@media (min-width: 1024px) {
  .app__main:has(> .page--today) {
    --today-side-w: clamp(264px, 24vw, 340px);
    --today-max: 1240px;
    --today-side: var(--today-side-w);
    --today-gap: clamp(24px, 2.2vw, 32px);
    padding-right: var(--space-6);
  }
  /* A day without any secondary block (e.g. a past day without challenges) keeps the same habit column, no empty side. */
  .app__main:has(> .page--today):not(:has(> .page--today > :is(.offer-card, .install-promo:not([hidden]), .today-challenges, .measure-today))) {
    --today-max: calc(1240px - var(--today-side-w) - 32px);
    --today-side: 0px;
    --today-gap: 0px;
  }
  .app__main > .page--today {
    display: grid;
    max-width: var(--today-max);
    grid-template-columns: minmax(0, 1fr) var(--today-side);
    grid-template-rows: repeat(6, auto) 1fr;
    grid-template-areas:
      "hero hero"
      "notice notice"
      "habits offer"
      "habits install"
      "habits challenges"
      "habits measure"
      "habits .";
    gap: 0 var(--today-gap);
    align-items: start;
  }
  .page--today > * { min-width: 0; }
  .page--today > .day-hero { grid-area: hero; margin-bottom: var(--space-5); }
  .page--today > .notice { grid-area: notice; margin-bottom: var(--space-4); }
  .page--today > .today-habits { grid-area: habits; display: flex; flex-direction: column; gap: var(--space-4); }
  /* There is room for long names: up to two lines instead of an ellipsis. */
  .page--today .today-habits .habit-row__name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; white-space: normal; overflow-wrap: anywhere; }
  .page--today > .page-actions--quiet { display: none; }
  .page--today .today-habits__manage { display: flex; justify-content: flex-start; margin-top: calc(-1 * var(--space-1)); }
  /* Side column: compact, flat, one rhythm of spacing. */
  .page--today > :is(.offer-card, .install-promo, .today-challenges) { margin-bottom: var(--space-4); }
  .page--today > .offer-card { grid-area: offer; flex-wrap: wrap; row-gap: var(--space-2); box-shadow: none; }
  .page--today > .offer-card .offer-card__icon { width: 34px; height: 34px; }
  .page--today > .offer-card .offer-card__body { flex: 1 1 calc(100% - 34px - var(--space-3)); }
  .page--today > .offer-card .button { margin-left: auto; }
  .page--today > .install-promo { grid-area: install; }
  .page--today > .today-challenges { grid-area: challenges; display: flex; flex-direction: column; gap: var(--space-3); }
  .page--today .today-challenges .challenge-teaser { align-self: stretch; border-radius: var(--radius-m); }
  .page--today .today-challenges .challenge-strip__list,
  .page--today .today-challenges .challenge-strip.is-single .challenge-strip__list {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
    padding: 0;
    overflow: visible;
  }
  .page--today .today-challenges .challenge-slide { gap: 5px; padding: var(--space-3) var(--space-4); }
  .page--today .today-challenges .challenge-slide__name { font-size: 1rem; white-space: normal; overflow-wrap: anywhere; }
  .page--today > .measure-today { grid-area: measure; }
  /* The undo toast stays centred under the habit column. */
  .app__main:has(> .page--today) .toast {
    left: calc(var(--rail-width) + var(--space-5) + (min(var(--today-max), 100% - var(--rail-width) - var(--space-5) - var(--space-6)) - var(--today-side) - var(--today-gap)) / 2);
  }
}

/* ---------- Challenges ---------- */

.page-header__title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.page-header__title-row .page-title { min-width: 0; overflow-wrap: anywhere; }
.page-header__title-row .button { flex: none; margin-top: 2px; }

.challenge-card {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto 18px;
  align-items: center;
  gap: var(--space-3);
  min-height: 72px;
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
  text-decoration: none;
}
.challenge-card:hover { background: var(--surface-2); }
.challenge-card__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); }
.challenge-card.is-rhythm .challenge-card__icon { background: var(--brand-gradient); color: #fff; }
.challenge-card__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.challenge-card__eyebrow, .challenge-mini__eyebrow { color: var(--text-muted); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.challenge-card__name { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.challenge-card__body .progress, .challenge-mini .progress { height: 6px; margin-top: 2px; }
.challenge-card__value { display: flex; flex-direction: column; align-items: flex-end; text-align: right; font-variant-numeric: tabular-nums; }
.challenge-card__sub { color: var(--text-muted); font-size: .8rem; }
.challenge-card__chevron { color: var(--text-muted); }

/* Today: compact card under the daily habits; never larger than a habit row plus a bar. */
.challenge-mini {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  text-decoration: none;
}
.challenge-mini:hover { background: var(--surface-2); }
.challenge-mini.is-rhythm { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.challenge-mini__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.challenge-mini__eyebrow { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.challenge-mini__score { flex: none; font-size: .9rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.challenge-mini__name { font-size: .95rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.challenge-hero { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4) var(--space-5) var(--space-5); }
.challenge-hero__status { color: var(--accent); font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.challenge-hero .big-number { font-size: clamp(2.5rem, 12vw, 3.5rem); }
.challenge-hero .progress { margin-top: var(--space-1); }
.challenge-facts {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: var(--space-3);
  margin: var(--space-2) 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}
.challenge-facts div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 2px; min-width: 0; }
.challenge-facts dt { color: var(--text-muted); font-size: .78rem; line-height: 1.3; }
.challenge-facts dd { margin: 0; font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

.stat-list__row--today { grid-template-columns: 34px minmax(0, 1fr) auto 26px; }
.challenge-today { display: grid; place-items: center; width: 26px; height: 26px; border: 2px solid var(--line); border-radius: 50%; }
.challenge-today.is-done { border-color: var(--accent); background: var(--accent); color: var(--accent-contrast); }

/* Days of the period: fill, light fill, outline and dashed outline differ in shape, not only in color. */
.challenge-days { display: grid; grid-template-columns: repeat(auto-fill, minmax(22px, 1fr)); gap: 4px; margin: 0; padding: 0; list-style: none; }
.challenge-days__day { display: block; aspect-ratio: 1; min-width: 14px; border-radius: 6px; background: var(--surface-2); }
.challenge-days__day.is-complete { background: var(--accent); }
.challenge-days__day.is-partial { background: color-mix(in srgb, var(--accent) 35%, var(--surface)); }
.challenge-days__day.is-missed { background: transparent; border: 2px solid color-mix(in srgb, var(--text-muted) 50%, transparent); }
.challenge-days__day.is-open { background: transparent; border: 2px solid var(--accent); }
.challenge-days__day.is-future { background: transparent; border: 1.5px dashed color-mix(in srgb, var(--text-muted) 45%, transparent); }
.challenge-days__day.is-today { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--text); }
.challenge-legend { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin: 0; padding: 0; list-style: none; color: var(--text-muted); font-size: .8rem; }
.challenge-legend li { display: inline-flex; align-items: center; gap: var(--space-2); }
.challenge-legend .challenge-days__day { width: 14px; }

.quick-lengths { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.quick-lengths .button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.pick-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: var(--radius-m); overflow: hidden; }
.pick-list li + li { border-top: 1px solid var(--line); }
.pick-row {
  --habit-accent: var(--habit-color, var(--accent));
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 60px;
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
}
.pick-row:hover { background: var(--surface-2); }
.pick-row:has(input:checked) { background: var(--accent-soft); }
.pick-row input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.pick-row .habit-row__icon { width: 34px; height: 34px; border-radius: 10px; }
.pick-row--static { cursor: default; }
.pick-row--static:hover { background: none; }
.pick-list + .field__label { display: block; margin-top: var(--space-4); }

/* ---------- Sharing ---------- */

.share-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); padding: var(--space-4) var(--space-5); }
.share-name .form { flex: 1; }
.share-name__label { color: var(--text-muted); font-size: .9rem; }
.share-name__value { font-weight: 700; }
.share-name .link { margin-left: auto; }

.share-group { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4) var(--space-5) var(--space-4); }
.share-group__name { font-size: 1.2rem; font-weight: 700; }
.share-members, .share-pending { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.share-members li { display: flex; align-items: center; gap: var(--space-2); min-height: 40px; }
.share-members__name { font-weight: 600; }
.avatar.avatar--small { width: 32px; height: 32px; font-size: .9rem; }
.share-pending li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-1) var(--space-3); color: var(--text-muted); font-size: .88rem; }
.share-invite { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); border-radius: var(--radius-m); background: var(--accent-soft); }
.share-invite__title { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--ok); font-weight: 700; }
.share-invite__link { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .85rem; }
.share-invite__actions .button { flex: 1 1 auto; }
.share-supporter__points { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; list-style: none; font-size: .9rem; }
.share-supporter__points li { display: flex; gap: var(--space-2); align-items: flex-start; }
.share-supporter__points svg { flex: none; margin-top: .2rem; color: var(--ok); }
/* The native share sheet button exists only where navigator.share does (set by js/share.js). */
.web-share-only { display: none; }
.can-web-share .web-share-only { display: inline-flex; }
.share-group__danger { justify-content: flex-end; margin-top: calc(-1 * var(--space-2)); }

/* 0.9.3: sections of the Sharing page, items offered in a group, owner's member actions. */
.share-section { display: flex; flex-direction: column; gap: var(--space-3); }
.share-section > .section-title { padding: 0 var(--space-1); }
.share-list-card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4) var(--space-5); }
.share-list-card > .link { align-self: flex-start; padding-left: 0; }
.share-group__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.share-group__head .icon-button { margin: calc(-1 * var(--space-2)) calc(-1 * var(--space-3)) calc(-1 * var(--space-2)) 0; color: var(--text-muted); }
.share-members__action { margin-left: auto; min-height: 40px; }
.share-items { display: flex; flex-direction: column; margin: 0 calc(-1 * var(--space-2)); padding: 0; list-style: none; }
.share-item { display: flex; align-items: center; gap: var(--space-3); min-height: 52px; padding: var(--space-1) var(--space-2); border-radius: var(--radius-s); color: var(--text); text-decoration: none; }
a.share-item:hover { background: var(--surface-2); }
a.share-item > .icon:last-child { color: var(--text-muted); flex: none; }
.share-item__icon { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); }
.share-item__body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.share-item__name { font-weight: 600; overflow-wrap: anywhere; }
.share-item__meta { color: var(--text-muted); font-size: .85rem; }

/* #097: Sharing as a primary area - two modes side by side, then each mode's own section. */
.share-modes { display: grid; gap: var(--space-3); }
@media (min-width: 640px) { .share-modes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.share-mode { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4); color: var(--text); text-decoration: none; }
.share-mode:hover { background: var(--surface-2); }
.share-mode__icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); }
.share-mode__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.share-mode__title { font-weight: 700; }
.share-mode__text { color: var(--text-muted); font-size: .88rem; line-height: 1.4; }
.share-together { display: flex; flex-direction: column; gap: var(--space-4); scroll-margin-top: var(--space-4); }
.share-together + .share-together { padding-top: var(--space-4); border-top: 1px solid var(--line); }
.share-together__title { margin: 0; font-size: 1.25rem; font-weight: 700; }
.share-together > .field__help { margin-top: calc(-1 * var(--space-3)); }
.viewer-link { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4) var(--space-5); }
.viewer-link__head { display: flex; align-items: center; gap: var(--space-3); }
.viewer-link__head .badge { flex: none; }
.viewer-link__actions { flex-wrap: wrap; }
.viewer-create { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4) var(--space-5); }
.viewer-create fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.viewer-create legend { padding: 0; margin-bottom: var(--space-2); }
.viewer-create__kinds { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* #097: the public read-only viewer of a link (no app shell). */
.app--viewer .app__main { padding-bottom: calc(var(--space-7) + env(safe-area-inset-bottom)); }
.viewer { gap: var(--space-4); }
.viewer-head { gap: var(--space-1); }
.viewer-head .page-title { display: flex; align-items: center; gap: var(--space-3); overflow-wrap: anywhere; }
.viewer-head__kind, .viewer-head__note { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; color: var(--text-muted); font-size: .88rem; font-weight: 600; }
.viewer-head__icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: color-mix(in srgb, var(--item-color, var(--accent)) 14%, var(--surface)); color: var(--item-color, var(--accent)); }
.viewer-habits .viewer-head__icon { width: 32px; height: 32px; border-radius: 10px; }
.viewer-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4) var(--space-5); }
.viewer-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-3); margin: 0; }
.viewer-stats div { display: flex; flex-direction: column; gap: 2px; }
.viewer-stats dt { color: var(--text-muted); font-size: .82rem; }
.viewer-stats dd { margin: 0; font-size: 1.2rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.viewer-stats__detail { display: block; color: var(--text-muted); font-size: .8rem; font-weight: 500; }
.viewer-habits { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.viewer-habits li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-1) var(--space-3); }
.viewer-habits__name { font-weight: 600; overflow-wrap: anywhere; }
.viewer-habits__value { color: var(--text-muted); font-size: .85rem; font-variant-numeric: tabular-nums; }
.viewer-habits__bar { grid-column: 2 / -1; height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.viewer-habits__bar span { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.viewer-days { display: grid; grid-template-columns: repeat(7, minmax(0, 40px)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.viewer-day { display: inline-grid; place-items: center; width: 100%; min-width: 20px; aspect-ratio: 1; border-radius: 8px; background: var(--surface-2); color: var(--accent-contrast); font-size: .8rem; font-weight: 700; }
.viewer-day--done { background: var(--accent); }
.viewer-day--partial { background: linear-gradient(135deg, var(--accent) 50%, transparent 50%); border: 2px solid var(--accent); }
.viewer-day--open { background: transparent; border: 2px solid var(--accent); }
.viewer-day--missed { background: transparent; border: 2px solid color-mix(in srgb, var(--text-muted) 55%, transparent); }
.viewer-day--excused { background: transparent; border: 1.5px dashed var(--text-muted); color: var(--text-muted); }
.viewer-day--free { background: color-mix(in srgb, var(--text-muted) 12%, transparent); transform: scale(.6); }
.viewer-days__range { margin: 0; color: var(--text-muted); font-size: .82rem; }
.viewer-legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: 0; padding: 0; list-style: none; color: var(--text-muted); font-size: .82rem; }
.viewer-legend li { display: inline-flex; align-items: center; gap: var(--space-2); }
.viewer-legend .viewer-day { width: 18px; min-width: 18px; border-radius: 5px; font-size: .7rem; }
.viewer-legend .viewer-day--free { transform: scale(.7); }
.viewer-lock { align-items: flex-start; }
.viewer-lock__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); }
.viewer-lock .form { align-self: stretch; }
.viewer-foot { display: flex; flex-direction: column; gap: var(--space-2); padding: 0 var(--space-1); color: var(--text-muted); font-size: .88rem; }
.viewer-foot p { margin: 0; }
@media (forced-colors: active) {
  .viewer-day--done, .viewer-day--partial { background: CanvasText; color: Canvas; }
}
/* #097 follow-up: the 28 days as Monday-first weeks with a quiet day number in the corner; weekends faintly tinted. */
.viewer-calendar { display: flex; flex-direction: column; gap: 6px; max-width: 380px; }
.viewer-calendar .viewer-days, .viewer-weekdays { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.viewer-weekdays { display: grid; gap: 6px; }
.viewer-weekdays span { color: var(--text-muted); font-size: .7rem; font-weight: 600; letter-spacing: .02em; text-align: center; }
.viewer-weekdays .is-weekend { color: color-mix(in srgb, var(--accent) 45%, var(--text-muted)); }
.viewer-calendar .viewer-day { position: relative; border-radius: 9px; }
.viewer-calendar .viewer-day .icon { margin-top: 5px; }
.viewer-calendar .viewer-day--free { transform: none; background: color-mix(in srgb, var(--text-muted) 7%, transparent); }
.viewer-calendar .viewer-day--blank { background: none; }
.viewer-calendar .is-weekend:is(.viewer-day--free, .viewer-day--missed, .viewer-day--open, .viewer-day--excused) { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.viewer-day__date { position: absolute; top: 4px; left: 5px; color: var(--text-muted); font-size: .58rem; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.viewer-calendar :is(.viewer-day--done, .viewer-day--partial) .viewer-day__date { color: color-mix(in srgb, var(--accent-contrast) 85%, transparent); }
.viewer-calendar .is-today:not(.viewer-day--done, .viewer-day--partial) .viewer-day__date { color: var(--text); font-weight: 800; }
@media (max-width: 400px) {
  .viewer-calendar, .viewer-weekdays, .viewer-calendar .viewer-days { gap: 4px; }
  .viewer-day__date { top: 3px; left: 4px; font-size: .54rem; }
  .viewer-calendar .viewer-day .icon { width: 12px; height: 12px; }
}
@media (forced-colors: active) {
  .viewer-calendar :is(.viewer-day--done, .viewer-day--partial) .viewer-day__date { color: Canvas; }
}
.invitation-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); }
.invitation-card__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); }
.invitation-card__text { font-size: 1.15rem; font-weight: 650; }

.shared-row__days { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); padding: 0 var(--space-3) var(--space-3); }
.shared-row__days-label { color: var(--text-muted); font-size: .75rem; white-space: nowrap; }
.shared-days { display: grid; flex: 1 1 220px; max-width: 280px; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin: 0; padding: 0; list-style: none; }
.shared-days__day { display: grid; place-items: center; height: 28px; border-radius: 6px; background: var(--surface-2); color: var(--text-muted); font-size: .62rem; font-weight: 700; text-transform: lowercase; }
.shared-days__day.is-complete { background: var(--habit-accent); color: var(--accent-contrast); }
.shared-days__day.is-missed { background: transparent; border: 2px solid color-mix(in srgb, var(--text-muted) 50%, transparent); }
.shared-days__day.is-open { background: transparent; border: 2px solid var(--habit-accent); }
.shared-days__day.is-empty { background: transparent; border: 1.5px dashed color-mix(in srgb, var(--text-muted) 35%, transparent); }
.shared-days__day.is-today { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--text); }
.shared-row__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-2) var(--space-3); padding: 0 var(--space-3) var(--space-3); }
.shared-row__added { display: inline-flex; align-items: center; gap: var(--space-1); margin-right: auto; color: var(--ok); font-size: .85rem; font-weight: 600; }

/* 0.9.29 (#051): group overview - members side by side in a fixed order; no scores, ranking or winner. */
.app__main:has(.page--wide) { --content-width: 1040px; }
.group-overview { display: grid; gap: var(--space-4); align-items: start; }
.group-overview--group { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
@media (min-width: 720px) { .group-overview--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.group-person { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; padding: var(--space-4); }
.group-person.is-me { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.group-person__head { display: flex; align-items: center; gap: var(--space-3); }
.group-person__name { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-width: 0; margin: 0; font-size: 1.1rem; font-weight: 700; }
.group-person__label { overflow-wrap: anywhere; }
.group-person__empty { margin: 0; color: var(--text-muted); }
.group-person__empty-action { margin: 0; }
.group-person .together-subtitle { margin-bottom: 0; }
.group-person__habits { gap: var(--space-2); }
.group-overview--group .group-habit .habit-row__line { min-height: 52px; }
.group-overview--group .group-habit .habit-row__icon { width: 34px; height: 34px; border-radius: 10px; }

/* #098 + #164: the Sharing tab - a compact header, one row per shared item with everyone's today as avatars (me first),
   never ranked; sharing more is two action tiles, the administration stays behind the settings icon. */
.sharing-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.sharing-head__title { margin: 0; font-size: 1.6rem; }
.sharing-head__settings { flex: none; margin-right: calc(-1 * var(--space-2)); color: var(--text-muted); }
.sharing-head__settings-label { display: none; }
.sharing-note { margin: 0 0 var(--space-3); color: var(--text-muted); font-size: .9rem; line-height: 1.45; }
/* #170: the three tabs keep the header and tabs on the same line - the same gap on every tab. */
.page:is(.page--sharing-dash, .page--public, .page--badges) { gap: var(--space-4); }
.dash-layout { display: grid; gap: var(--space-5); align-items: start; }
.dash-side { display: contents; }
.dash-layout .dash-events { order: -1; }
.dash-action__chevron { display: none; }
.dash-groups { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.dash-note { margin: 0; color: var(--text-muted); }
.dash-group > p:not(.dash-note) { margin: 0; }
.dash-events { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.dash-events > .section-title, .dash-actions > .section-title { padding: 0 var(--space-1); }
.dash-offers { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.dash-offer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); padding: var(--space-3) var(--space-4); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.dash-offer__icon { display: grid; flex: none; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); }
.dash-offer__body { display: flex; flex: 1 1 140px; flex-direction: column; min-width: 0; }
.dash-offer__name { font-weight: 600; overflow-wrap: anywhere; }
.dash-offer__meta { color: var(--text-muted); font-size: .85rem; }
.dash-offer__action { flex: none; margin-left: auto; }
.dash-events__all { align-self: flex-start; padding: 0 var(--space-1); font-size: .9rem; }
.dash-group { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; padding: var(--space-4); }
.dash-group__head { display: flex; align-items: center; gap: var(--space-3); min-width: 0; padding-bottom: var(--space-1); }
.dash-group__avatars { display: flex; flex: none; }
.dash-group__avatars:empty { display: none; }
.dash-group__avatars .avatar + .avatar { margin-left: -8px; box-shadow: 0 0 0 2px var(--surface); }
.dash-group__heading { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.dash-group__title { margin: 0; font-size: 1.15rem; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.dash-group__sub { color: var(--text-muted); font-size: .85rem; overflow-wrap: anywhere; }
.dash-group__more { flex: none; margin-right: calc(-1 * var(--space-2)); color: var(--text-muted); }
.dash-items { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.dash-item { position: relative; display: flex; align-items: center; gap: var(--space-3); min-height: 60px; padding: var(--space-3) 0; border-top: 1px solid color-mix(in srgb, var(--line) 75%, transparent); }
.dash-item.is-offer .dash-item__text { opacity: .8; }
.dash-item__icon { display: grid; flex: none; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: color-mix(in srgb, var(--item-color, var(--accent)) 14%, var(--surface)); color: var(--item-color, var(--accent)); }
.dash-item__text { display: flex; flex: 1; flex-direction: column; gap: 1px; min-width: 0; }
.dash-item__name { margin: 0; font-size: 1rem; font-weight: 650; line-height: 1.3; overflow-wrap: anywhere; }
.dash-item__name a { color: inherit; text-decoration: none; }
/* The whole row is the touch target of the item link. */
.dash-item__name a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-m); }
.dash-item__name a:hover { text-decoration: underline; }
.dash-item__name a:focus-visible { outline: none; }
.dash-item__name a:focus-visible::after { outline: 2px solid var(--accent); outline-offset: 2px; }
.dash-item__meta, .dash-item__today { color: var(--text-muted); font-size: .8rem; }
.dash-item__today { font-variant-numeric: tabular-nums; }
.dash-dots { display: flex; flex: 0 1 auto; flex-wrap: wrap; justify-content: flex-end; gap: 6px; max-width: 45%; margin: 0; padding: 0 0 0 var(--space-1); list-style: none; }
.dash-dot { position: relative; display: grid; place-items: center; width: 34px; height: 34px; border: 2px solid color-mix(in srgb, var(--text-muted) 35%, transparent); border-radius: 50%; background: var(--surface); color: var(--text-muted); font-size: .82rem; font-weight: 700; }
.dash-dot--done { border-color: var(--accent); background: var(--accent); color: var(--accent-contrast); }
.dash-dot--open { border-color: var(--accent); color: var(--text); }
.dash-dot--excused { border-style: dashed; }
.dash-dot--absent { border-style: dashed; opacity: .55; }
.dash-dot__mark { position: absolute; right: -3px; bottom: -3px; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--ok); color: #fff; box-shadow: 0 0 0 2px var(--surface); }
.dash-actions { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.dash-actions__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.dash-action { display: flex; flex-direction: column; gap: 2px; height: 100%; padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--surface); color: inherit; text-decoration: none; }
.dash-action:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.dash-action__icon { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: var(--space-2); border-radius: 12px; background: var(--accent-soft); color: var(--accent); }
.dash-action__title { font-weight: 700; line-height: 1.25; }
.dash-action__text { color: var(--text-muted); font-size: .82rem; line-height: 1.35; }
.dash-hello { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-5) var(--space-3) var(--space-3); text-align: center; }
.dash-hello__art { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); }
.dash-hello__title { margin: var(--space-2) 0 0; font-size: 1.35rem; font-weight: 750; line-height: 1.25; }
.dash-hello__text { max-width: 30rem; margin: 0; color: var(--text-muted); line-height: 1.5; }
.dash-privacy { display: flex; align-items: flex-start; gap: var(--space-2); margin: var(--space-2) 0 0; color: var(--text-muted); font-size: .85rem; line-height: 1.45; }
.dash-privacy .icon { flex: none; margin-top: 2px; }
/* #170: on desktop the three Sharing tabs sit in the Today frame - beside the rail, one width, nothing moves between tabs;
   the header carries a labelled settings button at the right edge of the content. */
@media (min-width: 960px) {
  .app__main:has(> :is(.page--sharing-dash, .page--public, .page--badges)) {
    --content-width: 1280px;
    --sharing-side: clamp(264px, 24vw, 340px);
    --sharing-gap: clamp(24px, 2.2vw, 32px);
    max-width: none;
    margin-left: 0;
    padding-right: var(--space-6);
  }
  .app__main > :is(.page--sharing-dash, .page--public, .page--badges) { width: 100%; max-width: 1240px; }
  .sharing-head__title { font-size: 1.5rem; font-weight: 700; letter-spacing: -.015em; line-height: 1.2; }
  .sharing-head__settings {
    display: inline-flex;
    gap: var(--space-2);
    width: auto;
    height: 36px;
    margin-right: 0;
    padding: 0 var(--space-3) 0 10px;
    border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
  }
  .sharing-head__settings .icon { width: 18px; height: 18px; color: var(--text-muted); }
  .sharing-head__settings:hover { background: var(--surface-2); border-color: var(--line); }
  .sharing-head__settings-label { display: inline; }
  .page--sharing-dash .card { box-shadow: none; border-color: color-mix(in srgb, var(--line) 80%, transparent); }
  .dash-group { padding: var(--space-4) var(--space-5); }
  .dash-dot { width: 36px; height: 36px; }
  .page--public .public-toolbar { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
  .page--public .public-toolbar > .seg-nav { flex: 0 1 26rem; }
  .page--public .public-search { flex: 0 1 30rem; }
}
/* #170: Blízcí as two columns like Today - the groups, and a side column whose first card starts on the same line. */
@media (min-width: 1024px) {
  .dash-layout { grid-template-columns: minmax(0, 1fr) var(--sharing-side); gap: 0 var(--sharing-gap); }
  .dash-side { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
  .dash-layout .dash-events { order: 0; }
  .dash-side .dash-actions { gap: 0; padding-top: var(--space-3); overflow: hidden; border: 1px solid color-mix(in srgb, var(--line) 80%, transparent); border-radius: var(--radius-l); background: var(--surface); }
  .dash-side .dash-actions > .section-title { padding: 0 var(--space-4) var(--space-1); }
  .dash-side .dash-actions__list { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .dash-side .dash-action {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    grid-template-areas: "icon title chevron" "icon text chevron";
    align-items: center;
    gap: 0 var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 0;
    border-radius: 0;
    background: transparent;
  }
  .dash-side li + li .dash-action { border-top: 1px solid color-mix(in srgb, var(--line) 75%, transparent); }
  .dash-side .dash-action:hover { border-color: color-mix(in srgb, var(--line) 75%, transparent); background: color-mix(in srgb, var(--text) 4%, transparent); }
  .dash-side .dash-action__icon { grid-area: icon; width: 36px; height: 36px; margin: 0; border-radius: 10px; }
  .dash-side .dash-action__icon .icon { width: 18px; height: 18px; }
  .dash-side .dash-action__title { grid-area: title; }
  .dash-side .dash-action__text { grid-area: text; }
  .dash-side .dash-action__chevron { display: grid; grid-area: chevron; color: var(--text-muted); }
}
@media (forced-colors: active) {
  .dash-dot--done { background: CanvasText; color: Canvas; }
}
/* Today: a new share waits for the user's decision; nothing is added automatically. */
.offer-card { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: var(--accent-soft); }
.offer-card__icon { display: grid; flex: none; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--surface); color: var(--accent); }
.offer-card__body { flex: 1; min-width: 0; }
.offer-card__title { font-weight: 650; line-height: 1.35; }
.offer-card__meta { color: var(--text-muted); font-size: .85rem; }
.offer-card .button { flex: none; }

/* Shared rhythm/habit: each person's own results side by side; no ranking. */
.together { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4) var(--space-5) var(--space-5); }
.together-people { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.together-person { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-m); }
.together-person.is-me { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.together-person__name { font-weight: 700; }
.together-person__status { color: var(--text-muted); font-size: .85rem; }
.together-facts { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-3); }
.together-subtitle { margin-top: var(--space-2); color: var(--text-muted); font-size: .85rem; font-weight: 650; }
.together-table-wrap { overflow-x: auto; }
.together-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.together-table th, .together-table td { padding: var(--space-1); text-align: center; }
.together-table th[scope="row"] { max-width: 10ch; overflow: hidden; text-align: left; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.together-table thead th { color: var(--text-muted); font-weight: 600; }
.together-table__dow, .together-table__date { display: block; line-height: 1.2; }
.together-table__dow { text-transform: lowercase; }
.together-table td .challenge-days__day { width: 24px; margin: 0 auto; }

/* Rhythm grid (0.8.2): a compact heatmap. Every day is the same square; neutral states differ in shape, not only color.
   A week fits a 390 px phone without scrolling; longer ranges scroll under a sticky name column. */
.rhythm-grid {
  --cell: 26px;
  --cell-pitch: 30px;
  --row-pitch: 30px;
  --cell-radius: 7px;
  --cell-line: color-mix(in srgb, var(--text-muted) 38%, transparent);
  --cell-faint: color-mix(in srgb, var(--text-muted) 9%, transparent);
  --cell-level-1: color-mix(in srgb, var(--accent) 20%, var(--surface));
  --cell-level-2: color-mix(in srgb, var(--accent) 38%, var(--surface));
  --cell-level-3: color-mix(in srgb, var(--accent) 56%, var(--surface));
  --cell-level-4: color-mix(in srgb, var(--accent) 76%, var(--surface));
  --cell-level-5: var(--accent);
  --name-width: 120px;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-3) var(--space-3);
}
.rhythm-grid--long { --cell: 24px; --cell-pitch: 28px; --row-pitch: 28px; --cell-radius: 6px; }
/* Dark: the light accent would glare at full strength, so the steps end a little below it. */
:root[data-theme="dark"] .rhythm-grid {
  --cell-line: color-mix(in srgb, var(--text-muted) 32%, transparent);
  --cell-level-1: color-mix(in srgb, var(--accent) 17%, var(--surface));
  --cell-level-2: color-mix(in srgb, var(--accent) 31%, var(--surface));
  --cell-level-3: color-mix(in srgb, var(--accent) 46%, var(--surface));
  --cell-level-4: color-mix(in srgb, var(--accent) 62%, var(--surface));
  --cell-level-5: color-mix(in srgb, var(--accent) 82%, var(--surface));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .rhythm-grid {
    --cell-line: color-mix(in srgb, var(--text-muted) 32%, transparent);
    --cell-level-1: color-mix(in srgb, var(--accent) 17%, var(--surface));
    --cell-level-2: color-mix(in srgb, var(--accent) 31%, var(--surface));
    --cell-level-3: color-mix(in srgb, var(--accent) 46%, var(--surface));
    --cell-level-4: color-mix(in srgb, var(--accent) 62%, var(--surface));
    --cell-level-5: color-mix(in srgb, var(--accent) 82%, var(--surface));
  }
}
@media (min-width: 480px) {
  .rhythm-grid { padding: var(--space-4); --name-width: 180px; }
  .rhythm-grid--week { --cell: 30px; --cell-pitch: 35px; --row-pitch: 35px; }
}
@media (min-width: 720px) {
  /* Desktop: names stay next to their days instead of drifting apart. */
  .rhythm-grid.rhythm-grid--week .rhythm-grid__table { width: auto; }
  .rhythm-grid--week .rhythm-grid__corner, .rhythm-grid--week .rhythm-grid__habit { width: 220px; min-width: 220px; max-width: 220px; }
}
.rhythm-grid__header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--space-2); min-height: 36px; }
.rhythm-grid__header .section-title { padding: var(--space-1) 0; }

/* Range switch: light text tabs; the pill is drawn inside a taller tap target. */
.grid-range { display: inline-flex; flex: none; margin: 0 -6px 0 auto; }
.grid-range__item {
  display: inline-grid;
  place-items: center;
  min-height: 40px;
  padding: 0 2px;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: .8rem;
  font-weight: 650;
  cursor: pointer;
}
.grid-range__item > span { padding: 5px 7px; border-radius: 999px; line-height: 1.2; white-space: nowrap; transition: background-color .15s var(--ease), color .15s var(--ease); }
.grid-range__item:hover > span { color: var(--text); }
.grid-range__item[aria-pressed="true"] > span { background: var(--surface-2); color: var(--text); }
.grid-range__item:focus-visible { outline: none; }
.grid-range__item:focus-visible > span { outline: 2px solid var(--focus); outline-offset: 1px; }

/* History: "include ended" switch; the whole label is the tap target. Ended rows stay readable but step back. */
.grid-ended { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--tap); margin-left: auto; color: var(--text-muted); font-size: .8rem; font-weight: 650; cursor: pointer; }
.grid-ended .switch { transform: scale(.8); transform-origin: center; }
.rhythm-grid tr.is-ended .rhythm-grid__icon, .rhythm-grid tr.is-ended .rhythm-grid__name { opacity: .6; }
.rhythm-grid__ended { flex: none; padding: 1px 5px; border-radius: 999px; background: var(--surface-2); color: var(--text-muted); font-size: .62rem; font-weight: 700; }

.rhythm-grid__scroll { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
.rhythm-grid__scroll:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-s); }
.rhythm-grid__table { border-collapse: separate; border-spacing: 0; font-size: .75rem; table-layout: fixed; }
.rhythm-grid--week .rhythm-grid__table { width: 100%; }
.rhythm-grid__table td { width: var(--cell-pitch); min-width: var(--cell-pitch); height: var(--row-pitch); padding: 0; text-align: center; }

.rhythm-grid__date { width: var(--cell-pitch); min-width: var(--cell-pitch); padding: 0 0 6px; color: var(--text-muted); font-weight: 600; line-height: 1.2; text-align: center; vertical-align: bottom; white-space: nowrap; }
.rhythm-grid__date span { display: block; }
.rhythm-grid__dow { font-size: .68rem; font-weight: 500; text-transform: lowercase; }
.rhythm-grid__day { font-size: .72rem; font-variant-numeric: tabular-nums; }
.rhythm-grid--long .rhythm-grid__day { font-size: .66rem; }
.rhythm-grid__date.is-today { position: relative; color: var(--accent); }
.rhythm-grid__date.is-today .rhythm-grid__dow { font-weight: 700; }
.rhythm-grid__date.is-today .rhythm-grid__day { font-weight: 800; }
.rhythm-grid__date.is-today::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 12px; height: 2px; border-radius: 2px; background: var(--accent); transform: translateX(-50%); }

.rhythm-grid__corner, .rhythm-grid__habit { position: sticky; left: 0; z-index: 1; background: var(--surface); box-shadow: -2px 0 0 var(--surface); }
.rhythm-grid--long .rhythm-grid__corner, .rhythm-grid--long .rhythm-grid__habit { width: var(--name-width); min-width: var(--name-width); max-width: var(--name-width); }
.rhythm-grid--long .rhythm-grid__habit { box-shadow: -2px 0 0 var(--surface), 8px 0 8px -8px color-mix(in srgb, var(--text) 22%, transparent); }
.rhythm-grid__habit { padding: 0 6px 0 0; font-size: .78rem; font-weight: 600; text-align: left; }
.rhythm-grid__label { display: flex; align-items: center; gap: 5px; min-width: 0; white-space: nowrap; }
.rhythm-grid__icon { flex: none; display: grid; place-items: center; color: color-mix(in srgb, var(--accent) 85%, var(--text-muted)); }
.rhythm-grid__icon .icon { width: 14px; height: 14px; }
.rhythm-grid__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.rhythm-grid__total > * { padding-top: 6px; border-top: 1px solid var(--line); }
.rhythm-grid__total td { height: calc(var(--row-pitch) + 6px); }
.rhythm-grid__total .rhythm-grid__habit { color: var(--text-muted); font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

/* The link fills the table cell (tap target); the drawn square stays small. */
.rhythm-hit { display: grid; place-items: center; width: 100%; height: 100%; min-height: var(--row-pitch); color: inherit; text-decoration: none; border-radius: var(--cell-radius); }
.rhythm-hit:focus-visible { outline: none; }
.rhythm-hit:focus-visible .rhythm-cell { outline: 2px solid var(--focus); outline-offset: 2px; }
a.rhythm-hit:hover .rhythm-cell { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px color-mix(in srgb, var(--text) 45%, transparent); }

.rhythm-cell {
  box-sizing: border-box;
  display: grid;
  place-items: center;
  width: var(--cell, 28px);
  height: var(--cell, 28px);
  border: 1.5px solid transparent;
  border-radius: var(--cell-radius, 7px);
  background: var(--cell-faint);
  color: var(--text);
  font-size: .64rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.rhythm-cell.level-0 { background: transparent; border-color: var(--cell-line); }
.rhythm-cell.level-1 { background: var(--cell-level-1); }
.rhythm-cell.level-2 { background: var(--cell-level-2); }
.rhythm-cell.level-3 { background: var(--cell-level-3); }
.rhythm-cell.level-4 { background: var(--cell-level-4); }
.rhythm-cell.level-5 { background: var(--cell-level-5); color: var(--accent-contrast); }
.rhythm-cell.is-free { background: var(--cell-faint); }
.rhythm-cell.is-free::after { content: ""; width: 3px; height: 3px; border-radius: 50%; background: color-mix(in srgb, var(--text-muted) 50%, transparent); }
.rhythm-cell.is-paused { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--text-muted) 24%, transparent) 0 1.5px, transparent 1.5px 5px), var(--cell-faint); }
.rhythm-cell.is-future { background: transparent; border: 1px dashed color-mix(in srgb, var(--text-muted) 30%, transparent); }
.rhythm-cell.is-recorded { background: color-mix(in srgb, var(--text-muted) 20%, transparent); }
.rhythm-cell.is-recorded::after { content: ""; width: 9px; height: 2px; border-radius: 2px; background: var(--text-muted); }
/* #070 exception day: neutral (no accent, no warning), dotted outline + ring so it never relies on color alone. */
.rhythm-cell.is-excused { background: var(--cell-faint); border: 1.5px dotted color-mix(in srgb, var(--text-muted) 75%, transparent); }
.rhythm-cell.is-excused::after { content: ""; width: 6px; height: 6px; border: 1.5px solid var(--text-muted); border-radius: 50%; }
.challenge-days__day.is-excused,
.shared-days__day.is-excused { background: color-mix(in srgb, var(--text-muted) 12%, transparent); border: 2px dotted color-mix(in srgb, var(--text-muted) 75%, transparent); }
.entry-exception { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); margin-top: var(--space-3); }
.entry-exception .field__help { text-align: center; }
.entry-exception__button {
  min-height: 44px;
  padding: 0 var(--space-4);
  border: 1.5px dashed var(--line);
  border-radius: var(--radius-m);
  background: transparent;
  color: var(--text-muted);
  font-weight: 600;
  cursor: pointer;
}
.entry-exception__button[aria-pressed="true"] { border: 1.5px dotted var(--text-muted); background: color-mix(in srgb, var(--text-muted) 12%, transparent); color: var(--text); }
.entry-exception__button:disabled { cursor: default; }
.habit-row.is-excused .habit-row__meta { color: var(--text-muted); font-style: italic; }
.challenge-counts { margin: var(--space-3) 0 0; font-weight: 650; font-variant-numeric: tabular-nums; }
.rhythm-cell.is-unrecorded { background: transparent; border: 1.5px dotted var(--cell-line); }
.rhythm-cell.is-quota { background: var(--cell-faint); }
.rhythm-cell.is-quota::after { content: ""; box-sizing: border-box; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--accent) 55%, var(--line)); }
.rhythm-cell.is-quota-done::after { background: var(--accent); border-color: var(--accent); }

/* Today: a normal square with a thin ring and an accented header, never a bigger shape. */
.rhythm-grid__table td.is-today .rhythm-cell { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 75%, transparent); }
.rhythm-grid__table td.is-today .rhythm-cell.level-0,
.rhythm-grid__table td.is-today .rhythm-cell.is-future { border-color: color-mix(in srgb, var(--accent) 75%, transparent); box-shadow: none; }
.rhythm-grid__table td.is-today .rhythm-cell.level-5 { box-shadow: none; }

/* Weekend (0.9.23): the whole Saturday/Sunday column sits on a neutral band; cell fills, today and focus stay on top. */
.rhythm-grid__table .is-weekend, .together-table .is-weekend { background: var(--weekend-tint); }
/* Outline-only states keep the plain surface inside, so a missed weekend day never looks like a filled one. */
.is-weekend .rhythm-cell:is(.level-0, .is-future, .is-unrecorded),
.is-weekend .challenge-days__day:is(.is-missed, .is-open, .is-future) { background: var(--surface); }
.rhythm-grid__date.is-weekend { border-radius: 6px 6px 0 0; }
.rhythm-grid__total td.is-weekend { border-radius: 0 0 6px 6px; }

/* Total row: same squares; softer steps keep the number readable in both themes. */
.rhythm-cell--total.level-1 { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.rhythm-cell--total.level-2 { background: color-mix(in srgb, var(--accent) 22%, var(--surface)); }
.rhythm-cell--total.level-3 { background: color-mix(in srgb, var(--accent) 34%, var(--surface)); }
.rhythm-cell--total.level-4 { background: color-mix(in srgb, var(--accent) 48%, var(--surface)); }
.rhythm-cell--total.level-0 { color: var(--text-muted); }
.rhythm-cell--total.is-free::after { content: none; }

/* Legend: the four main states in one line, the rest folded. */
.grid-legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); color: var(--text-muted); font-size: .72rem; }
.grid-legend__list { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin: 0; padding: 0; list-style: none; }
.grid-legend__list li { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.grid-legend .rhythm-cell { --cell: 11px; --cell-radius: 3px; border-width: 1px; }
.grid-legend .rhythm-cell::after { transform: scale(.55); }
.grid-legend .rhythm-cell.is-free::after { transform: none; width: 2px; height: 2px; }
.grid-legend__more[open] { flex-basis: 100%; }
.grid-legend__more > summary { display: inline-flex; align-items: center; min-height: 28px; color: var(--text-muted); font-weight: 600; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--text-muted) 45%, transparent); text-underline-offset: 3px; cursor: pointer; list-style: none; }
.grid-legend__more > summary::-webkit-details-marker { display: none; }
.grid-legend__more[open] > summary { color: var(--text); }
.grid-legend__more > .grid-legend__list { margin-top: 2px; }

/* ---------- Profile ---------- */

.profile-card { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-5); }
.avatar {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 1.4rem;
  font-weight: 700;
}
.profile-card__name { font-size: 1.2rem; font-weight: 700; }
.profile-card__sub { color: var(--text-muted); font-size: .9rem; word-break: break-all; }

/* #084 profile photo: own photo, preset avatar, gallery */
.avatar { flex: none; overflow: hidden; }
/* #085 edit badge on the Profile avatar: 26 px visual circle inside a 44 px touch target */
.profile-card__avatar { position: relative; flex: none; }
.avatar-edit { position: absolute; right: -16px; bottom: -16px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--accent); text-decoration: none; }
.avatar-edit::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); transition: background .15s ease; }
.avatar-edit .icon { position: relative; }
.avatar-edit:hover::before { background: var(--surface-2); }
.avatar-edit:focus-visible { outline: none; }
.avatar-edit:focus-visible::before { outline: 3px solid var(--focus); outline-offset: 2px; }
.avatar--photo { object-fit: cover; background: var(--surface-2); }
.avatar--preset { background: none; }
.avatar-art { display: block; width: 100%; height: 100%; }
.avatar.avatar--large { width: 112px; height: 112px; font-size: 2.6rem; }
.photo-current { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-5); text-align: center; }
.photo-current__source { color: var(--text-muted); font-size: .9rem; }
.input--file { padding: var(--space-2); min-height: 48px; }
.avatar-gallery { display: flex; flex-direction: column; gap: var(--space-4); }
.avatar-tabs { display: flex; width: 100%; }
.avatar-tabs .segmented-links__item { flex: 1; min-width: 0; }
.segmented-links__item[aria-selected="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.avatar-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin: 0; padding: var(--space-4); border: 0; min-inline-size: 0; }
.avatar-grid[hidden] { display: none; }
@media (min-width: 560px) { .avatar-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.avatar-option { position: relative; display: grid; place-items: center; cursor: pointer; border-radius: 50%; }
.avatar-option input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.avatar-option .avatar-option__art { width: 100%; max-width: 96px; height: auto; aspect-ratio: 1; box-shadow: 0 0 0 1px var(--line); transition: box-shadow .15s ease; }
.avatar-option input:checked + .avatar-option__art { box-shadow: 0 0 0 3px var(--surface), 0 0 0 6px var(--accent); }
.avatar-option:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 4px; }
.avatar-option__check { position: absolute; top: 0; right: max(0px, calc(50% - 52px)); display: none; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: var(--accent-contrast); box-shadow: 0 0 0 2px var(--surface); }
.avatar-option input:checked ~ .avatar-option__check { display: grid; }
/* #066: Plus avatars stay visible for a limited Free account, calmly marked and not selectable. */
.avatar-option.is-locked { cursor: default; }
.avatar-option.is-locked input { cursor: default; }
.avatar-option.is-locked .avatar-option__art { opacity: .55; }
.avatar-option__plus { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); padding: 1px var(--space-2); border-radius: 999px; background: var(--surface); color: var(--text-muted); box-shadow: 0 0 0 1px var(--line); font-size: .72rem; font-weight: 700; letter-spacing: .02em; }

/* #066 plan hints: a quiet pointer to RYTAVO Plus, never a pay button. */
.plan-hint { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-2) 0 0; font-weight: 600; }
.plan-hint a { color: var(--accent); }
/* #148 Free limit screen instead of a create form */
.plan-limit { display: grid; justify-items: center; gap: var(--space-3); padding: var(--space-6) var(--space-5); text-align: center; }
.plan-limit--embedded { padding: var(--space-4) 0 0; border-top: 1px solid var(--line); }
.plan-limit--embedded .plan-limit__icon { width: 48px; height: 48px; }
.plan-limit--embedded .plan-limit__title { font-size: 1.05rem; }
.plan-limit__icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--surface-2); color: var(--accent); }
.plan-limit__title { margin: 0; font-size: 1.2rem; font-weight: 700; }
.plan-limit__text { margin: 0; color: var(--text-muted); max-width: 38ch; }
.plan-limit__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-top: var(--space-2); }
.plan-card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); }
.plan-card .section-title { display: flex; align-items: center; gap: var(--space-2); margin: 0; }
.plan-card p { margin: 0; }
.plan-note p { margin: 0; }

.definition-list { margin: 0; padding: var(--space-2) var(--space-5); }
.definition-list div { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) 0; }
.definition-list div + div { border-top: 1px solid var(--line); }
.definition-list dt { flex-shrink: 0; color: var(--text-muted); }
.definition-list dd { min-width: 0; margin: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; }

.link-list { display: flex; flex-direction: column; overflow: hidden; }
.link-list a {
  display: grid;
  grid-template-columns: 24px 1fr 18px;
  align-items: center;
  gap: var(--space-3);
  min-height: 56px;
  padding: 0 var(--space-5);
  text-decoration: none;
}
.link-list a + a { border-top: 1px solid var(--line); }
.link-list a:hover { background: var(--surface-2); }
/* #145 a row that acts in place (the app) looks like a link row. */
.link-list > button {
  display: grid;
  grid-template-columns: 24px 1fr 18px;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 56px;
  padding: 0 var(--space-5);
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.link-list > * + button { border-top: 1px solid var(--line); }
.link-list > button:hover { background: var(--surface-2); }
.link-list > button.link-list__danger { color: var(--danger); font-weight: 600; }

.logout-form { display: flex; justify-content: center; }

/* ---------- Empty state ---------- */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-7) var(--space-5);
  text-align: center;
  background: var(--surface);
  border: 1px dashed var(--line);
  border-radius: var(--radius-l);
}
.empty-state__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--surface-2); color: var(--text-muted); }
.empty-state__title { font-weight: 650; }
.empty-state__text { color: var(--text-muted); max-width: 32ch; }

/* ---------- Bottom sheet ---------- */

.sheet-backdrop { position: fixed; inset: 0; z-index: 40; background: rgb(0 0 0 / .35); }
.sheet {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 41;
  max-width: var(--content-width);
  margin: 0 auto;
  padding: var(--space-4) var(--space-4) calc(var(--space-5) + env(safe-area-inset-bottom));
  background: var(--surface);
  border-radius: var(--radius-l) var(--radius-l) 0 0;
  animation: sheet-in .22s var(--ease);
}
.sheet__header { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--space-2) var(--space-2); }
.sheet__title { font-size: 1.1rem; font-weight: 700; }
.sheet-action {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: var(--space-3);
  min-height: 64px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-m);
  text-decoration: none;
}
.sheet-action:hover { background: var(--surface-2); }
.sheet-action.is-disabled { color: var(--text-muted); cursor: default; }
.sheet-action.is-disabled:hover { background: transparent; }
.sheet-action__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--surface-2); }
.sheet-action:hover .sheet-action__icon, .sheet-action:focus-visible .sheet-action__icon { background: var(--surface); }
.sheet-action__label { font-weight: 600; }

/* #153 the "+" menu: a softer, blurred backdrop, a grip and four tiles (pictogram, name, one line about what it is for). */
.sheet-backdrop--soft {
  background: rgb(8 16 32 / .32);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: backdrop-in .18s var(--ease);
}
.sheet--quick-add {
  padding-top: var(--space-2);
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -12px 40px rgb(8 16 32 / .18);
}
.sheet__grip { display: block; width: 40px; height: 5px; margin: 0 auto var(--space-3); border-radius: 999px; background: var(--line); }
.sheet--quick-add .sheet__title { font-size: 1.3rem; letter-spacing: -.01em; }
.quick-add { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin: 0; padding: var(--space-1) 0 0; list-style: none; }
.quick-add > li { display: flex; animation: tile-in .28s var(--ease) both; }
.quick-add > li:nth-child(2) { animation-delay: .04s; }
.quick-add > li:nth-child(3) { animation-delay: .08s; }
.quick-add > li:nth-child(4) { animation-delay: .12s; }
.quick-add__tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  min-height: 138px;
  padding: var(--space-4);
  border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--line));
  border-radius: 20px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 7%, var(--surface)), var(--surface) 70%);
  box-shadow: 0 1px 2px rgb(16 30 50 / .06), 0 8px 20px -12px color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--text);
  text-decoration: none;
  transition: transform .12s var(--ease), box-shadow .15s var(--ease), border-color .15s var(--ease);
}
.quick-add__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: var(--space-2);
  border-radius: 16px;
  /* The navy-to-blue pictogram gradient needs a light ground, also in the dark theme. */
  background: #fff;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent), 0 4px 12px -6px color-mix(in srgb, var(--accent) 60%, transparent);
}
.quick-add__label { font-weight: 700; line-height: 1.25; }
.quick-add__text { color: var(--text-muted); font-size: .82rem; line-height: 1.35; }
.quick-add__tile:active { transform: scale(.97); }
@media (hover: hover) {
  .quick-add__tile:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); box-shadow: 0 1px 2px rgb(16 30 50 / .06), 0 12px 28px -12px color-mix(in srgb, var(--accent) 55%, transparent); }
}
@keyframes tile-in { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

@keyframes sheet-in { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Wider screens (web on a computer or tablet): the sheet becomes a centred dialog over a blurred page; phones keep the bottom sheet. */
@media (min-width: 640px) {
  .sheet-backdrop {
    background: rgb(0 0 0 / .28);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    animation: backdrop-in .18s var(--ease);
  }
  .sheet {
    inset: 50% auto auto 50%;
    width: min(520px, calc(100vw - 2 * var(--space-5)));
    max-height: calc(100dvh - 2 * var(--space-6));
    overflow-y: auto;
    margin: 0;
    padding: var(--space-5);
    border: 1px solid var(--line);
    border-radius: var(--radius-l);
    box-shadow: 0 24px 64px rgb(0 0 0 / .22);
    transform: translate(-50%, -50%);
    animation: dialog-in .2s var(--ease);
  }
  .sheet__grip { display: none; }
}
@keyframes dialog-in { from { transform: translate(-50%, -47%) scale(.97); opacity: 0; } to { transform: translate(-50%, -50%); opacity: 1; } }
@keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } }

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

/* ---------- Blazor error UI ---------- */

#blazor-error-ui {
  display: none;
  position: fixed;
  inset: auto var(--space-3) calc(var(--nav-height) + var(--space-3)) var(--space-3);
  z-index: 60;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-m);
  background: var(--text);
  color: var(--bg);
}
#blazor-error-ui .reload { margin-left: var(--space-2); font-weight: 700; }
#blazor-error-ui .dismiss { float: right; border: 0; background: none; color: inherit; font-size: 1.2rem; cursor: pointer; }

/* ---------- 0.8.0: theme, language, settings ---------- */

/* An explicit theme also switches native controls (date pickers, scrollbars). */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

.brand-bar { position: relative; }
.brand-bar__tools { align-self: flex-end; margin-bottom: var(--space-2); }
/* #081: the same compact language menu above the content of legal/gate pages, before anything has to be read or confirmed. */
.guide-tools, .page-tools { display: flex; justify-content: flex-end; }
.guide-tools { max-width: 720px; margin: 0 auto var(--space-3); }
.page-tools { margin-bottom: var(--space-2); }
.app--guide .guide { min-height: calc(100dvh - 2 * var(--space-4) - 44px - var(--space-3)); }
@media (min-width: 720px) {
  .app--guide .guide { min-height: calc(100dvh - 2 * var(--space-7) - 44px - var(--space-3)); }
}

.language-menu { position: relative; display: inline-block; text-align: left; }
.language-menu__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-3);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.language-menu__toggle::-webkit-details-marker { display: none; }
.language-menu[open] .language-menu__toggle { border-color: var(--accent); }
.language-menu .choice-list--menu {
  position: absolute;
  right: 0;
  top: calc(100% + var(--space-1));
  z-index: 30;
  min-width: 200px;
  padding: var(--space-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--surface);
  box-shadow: 0 8px 24px rgb(16 30 50 / .16);
}

.choice-list { display: flex; flex-direction: column; }
.choice-list__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  min-height: var(--tap);
  padding: var(--space-2) var(--space-4);
  border: 0;
  border-radius: var(--radius-s);
  background: none;
  color: var(--text);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.choice-list__option:hover { background: var(--surface-2); }
.choice-list__option.is-selected { background: var(--accent-soft); color: var(--text); }
.choice-list__option.is-selected .icon { color: var(--accent); }
.choice-list__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.choice-list__help { color: var(--text-muted); font-size: .82rem; font-weight: 500; }
.settings-card { padding: var(--space-2); }
.settings-card--form { padding: var(--space-5); }

.link-list a:has(.link-list__value, .badge, .count-badge) { grid-template-columns: 24px 1fr auto 18px; }
.link-list__value { color: var(--text-muted); font-size: .9rem; text-align: right; }
.badge--new { background: var(--accent); color: var(--accent-contrast); }

/* Count next to an existing link (#060): small, calm, readable in both themes. */
.count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-contrast);
  font-size: .72rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex: none;
}

/* What's new */
.release-list { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.release { padding: var(--space-4) var(--space-5); }
.release__header { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-2); }
.release__version { font-size: 1.05rem; }
.release__date { margin-left: auto; color: var(--text-muted); font-size: .85rem; }
.release__items { display: flex; flex-direction: column; gap: var(--space-1); margin: 0; padding-left: 1.2em; }

/* Value habits: presets and quick entry */
.choice-grid--compact .choice { min-height: 0; }
.value-slider { width: 100%; height: var(--tap); margin: 0; accent-color: var(--habit-accent, var(--accent)); cursor: pointer; }
.quick-values { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.quick-values__option {
  min-height: 44px;
  min-width: 64px;
  padding: 0 var(--space-3);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.quick-values__option[aria-pressed="true"] {
  border-color: var(--habit-accent, var(--accent));
  background: color-mix(in srgb, var(--habit-accent, var(--accent)) 14%, transparent);
}
.rating-scale { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-2); }
.rating-scale__option {
  min-height: var(--tap);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--surface);
  color: var(--text);
  font-size: 1.05rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.rating-scale__option[aria-pressed="true"] {
  border-color: var(--habit-accent, var(--accent));
  background: var(--habit-accent, var(--accent));
  color: var(--accent-contrast);
}
@media (min-width: 480px) {
  .rating-scale { grid-template-columns: repeat(10, minmax(0, 1fr)); }
}

.notice--warning { color: var(--text); border-left: 4px solid var(--warning); }

/* ---------- 0.9.0: challenges, rhythms, result ---------- */

.page-description { color: var(--text-muted); font-size: .92rem; max-width: 60ch; }
.section-subtitle { color: var(--text-muted); font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.badge--brand { background: var(--accent-soft); color: var(--accent); }
.scope-notice__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }

/* Lists: a challenge carries the flag on an accent tile, a rhythm the droplet on the brand gradient. */
.challenge-card.is-challenge .challenge-card__icon { background: var(--accent-soft); color: var(--accent); }
.challenge-card.is-draft { border-style: dashed; }
.challenge-card.is-draft .challenge-card__icon { background: var(--surface-2); color: var(--text-muted); }
.challenge-card.is-finished .challenge-card__value strong { color: var(--accent); }

/* Today: running challenges as a compact strip; one card fills the width, more cards scroll sideways. */
.challenge-teaser {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  align-self: flex-start;
  max-width: 100%;
  padding: var(--space-1) var(--space-3);
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--text);
  font-size: .85rem;
  text-decoration: none;
}
.challenge-teaser span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.challenge-teaser .icon { flex: none; color: var(--accent); }
.challenge-strip__list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 86%;
  gap: var(--space-3);
  margin: 0 calc(-1 * var(--space-4));
  padding: 2px var(--space-4) var(--space-2);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--space-4);
  list-style: none;
  scrollbar-width: none;
}
.challenge-strip__list::-webkit-scrollbar { display: none; }
.challenge-strip.is-single .challenge-strip__list { grid-auto-columns: 100%; overflow: visible; }
.challenge-strip__list > li { scroll-snap-align: start; min-width: 0; }
.challenge-slide {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  padding: var(--space-3) var(--space-4) var(--space-4);
  overflow: hidden;
  border-radius: var(--radius-l);
  background: var(--brand-gradient);
  color: #fff;
  text-decoration: none;
  box-shadow: var(--shadow);
}
.challenge-slide::after {
  content: "";
  position: absolute;
  inset: -40% -30% auto auto;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(255 255 255 / .22), transparent 70%);
  pointer-events: none;
}
.challenge-slide:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.challenge-slide__head { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.challenge-slide__icon { display: grid; flex: none; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: rgb(255 255 255 / .2); }
.challenge-slide__eyebrow { flex: 1; min-width: 0; overflow: hidden; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.challenge-slide__today { flex: none; padding: 2px var(--space-2); border-radius: 999px; background: rgb(255 255 255 / .2); font-size: .82rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.challenge-slide__name { font-size: 1.1rem; font-weight: 700; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.challenge-slide .progress { height: 6px; background: rgb(255 255 255 / .25); }
.challenge-slide .progress__bar { background: #fff; }
.challenge-slide__meta { font-size: .8rem; opacity: .92; font-variant-numeric: tabular-nums; }

/* #205 the personal look of a challenge: its colour as a deep-to-light gradient (white text stays readable on every preset)
   and an optional built-in texture drawn under the content. */
.challenge-slide.has-look {
  background: linear-gradient(135deg, color-mix(in srgb, var(--look) 72%, #070b24) 0%, var(--look) 58%, color-mix(in srgb, var(--look) 82%, #fff) 100%);
}
.has-look > * { position: relative; }
.has-look[class*="look--"]::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .2; }
.look--dots::before { background-image: radial-gradient(circle, #fff 1.3px, transparent 1.6px); background-size: 14px 14px; }
.look--lines::before { background-image: repeating-linear-gradient(135deg, #fff 0 1.5px, transparent 1.5px 12px); opacity: .16; }
.look--grid::before { background-image: linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px); background-size: 18px 18px; opacity: .14; }
.look--waves::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='16'%3E%3Cpath d='M0 8 Q12 0 24 8 T48 8' fill='none' stroke='%23fff' stroke-width='1.6'/%3E%3C/svg%3E");
  background-size: 48px 16px;
  opacity: .24;
}
.look--peaks::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60 L35 22 L60 40 L100 6 L140 38 L165 24 L200 48 L200 60Z' fill='%23fff'/%3E%3C/svg%3E") bottom / 100% 70% no-repeat;
  opacity: .16;
}
.look--rays::before { background: repeating-conic-gradient(from 0deg at 88% 10%, #fff 0deg 5deg, transparent 5deg 15deg); opacity: .12; }

.look-preview { min-height: 104px; pointer-events: none; box-shadow: none; }
.pattern-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: var(--space-2); }
.pattern-picker__option {
  position: relative;
  height: 52px;
  overflow: hidden;
  border-radius: var(--radius-s);
  background: linear-gradient(135deg, color-mix(in srgb, var(--look) 72%, #070b24), var(--look));
  cursor: pointer;
}
.pattern-picker__option input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pattern-picker__option.is-selected { outline: 3px solid var(--accent); outline-offset: 2px; }
.pattern-picker__option:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }

/* Detail: time (day X of Y) apart from performance (success) and today. */
.challenge-hero__eyebrow { color: var(--accent); font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.challenge-hero__day { font-size: clamp(1.6rem, 7vw, 2.1rem); font-weight: 750; letter-spacing: -.01em; line-height: 1.15; }
.challenge-hero__meta { color: var(--text-muted); font-size: .88rem; font-variant-numeric: tabular-nums; }
.challenge-hero__time { display: flex; flex-direction: column; gap: var(--space-1); }
.challenge-hero__split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin: var(--space-2) 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}
.challenge-hero__split div { display: flex; flex-direction: column-reverse; gap: 2px; }
.challenge-hero__split dt { color: var(--text-muted); font-size: .8rem; }
.challenge-hero__split dd { margin: 0; font-size: 1.6rem; font-weight: 750; font-variant-numeric: tabular-nums; }
.challenge-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.challenge-hero.is-challenge { border-top: 4px solid var(--look, var(--accent)); }
.challenge-hero.is-draft { border-top-style: dashed; }
.challenge-stats { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4) var(--space-5) var(--space-5); }
.challenge-facts--grid { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-4); border-top: 0; padding-top: 0; }
@media (min-width: 560px) {
  .challenge-facts--grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.challenge-today-section { display: flex; flex-direction: column; gap: var(--space-2); }
.challenge-today-section .habit-section { margin: 0; }
.decide-card { border-left: 4px solid var(--accent); }

/* Result: a calm celebration dialog; motion is dropped with prefers-reduced-motion (global rule above). */
.result-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: var(--space-4);
  overflow-y: auto;
  background: rgb(11 20 36 / .62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
:root[data-theme="dark"] .result-overlay { background: rgb(3 7 16 / .78); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .result-overlay { background: rgb(3 7 16 / .78); }
}
.result-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  width: min(100%, 420px);
  padding: var(--space-6) var(--space-5) var(--space-5);
  overflow: hidden;
  border-radius: var(--radius-l);
  background: var(--surface);
  color: var(--text);
  text-align: center;
  box-shadow: 0 24px 64px rgb(16 30 50 / .28);
  animation: result-in .35s var(--ease);
}
.result-card:focus, .result-card:focus-visible { outline: none; }
.result-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 220px;
  background: var(--brand-gradient);
  opacity: .16;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent);
  mask-image: linear-gradient(to bottom, #000, transparent);
  pointer-events: none;
}
.result-badge {
  position: relative;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 20px;
  background: var(--brand-gradient);
  color: #fff;
  box-shadow: 0 8px 24px rgb(39 0 188 / .25);
}
.result-eyebrow { position: relative; max-width: 100%; margin-top: var(--space-2); overflow-wrap: anywhere; color: var(--text-muted); font-size: .85rem; font-weight: 650; }
.result-title { position: relative; font-size: 1.6rem; font-weight: 800; letter-spacing: -.01em; }
.result-meta { color: var(--text-muted); font-size: .85rem; }
.result-rate { margin-top: var(--space-2); }
.result-rate .big-number { color: var(--accent); font-size: clamp(3rem, 16vw, 4rem); }
.result-rate__label { color: var(--text-muted); font-size: .85rem; font-weight: 650; }
.result-facts { align-self: stretch; text-align: left; }
.result-message { max-width: 34ch; margin-top: var(--space-1); }
.result-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-top: var(--space-3); }
.result-actions > .button:first-child:not(.button--quiet) { flex: 0 0 100%; }
.result-confetti { position: absolute; inset: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .result-confetti { display: none; } }
.result-confetti span {
  position: absolute;
  top: -12px;
  left: calc(4% + var(--i) * 6.8%);
  width: 8px;
  height: 14px;
  border-radius: 2px;
  background: var(--brand-gradient);
  opacity: 0;
  animation: result-fall 2.4s calc(var(--i) * 70ms) var(--ease) 1 forwards;
}
.result-confetti span:nth-child(3n) { width: 10px; height: 10px; border-radius: 50%; }
.result-confetti span:nth-child(2n) { background: #35BBF4; }
@keyframes result-in { from { transform: translateY(16px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes result-fall {
  0% { transform: translateY(0) rotate(0); opacity: 0; }
  15% { opacity: .9; }
  100% { transform: translateY(260px) rotate(300deg); opacity: 0; }
}

.share-panel { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); align-self: stretch; margin-top: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--line); }
.share-panel__formats { display: flex; gap: var(--space-2); }
.share-panel__formats .button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
/* #107: three card styles as small live thumbnails; the pressed one gets the accent ring. */
.share-panel__styles { display: flex; justify-content: center; gap: var(--space-2); }
.share-style { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: var(--tap); padding: 4px; border: 0; border-radius: 12px; background: transparent; color: var(--text-muted); font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; }
.share-style__thumb { display: block; width: 46px; height: 82px; border-radius: 8px; background: var(--surface-2); object-fit: cover; box-shadow: 0 0 0 1px var(--line); }
.share-style__thumb[data-format="square"] { height: 46px; }
.share-style[aria-pressed="true"] { color: var(--accent); }
.share-style[aria-pressed="true"] .share-style__thumb { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }
.share-style:hover .share-style__thumb { box-shadow: 0 0 0 2px var(--accent-soft); }
.share-style[aria-pressed="true"]:hover .share-style__thumb { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }
.share-style:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.share-panel__preview { display: block; width: auto; max-width: 100%; height: 220px; border-radius: 12px; background: var(--surface-2); box-shadow: var(--shadow); object-fit: contain; }
.share-panel__preview:not([src]) { width: 124px; }
/* #221 the preview is a button: a tap opens the card full screen. */
.share-panel__zoom { display: block; max-width: 100%; padding: 0; border: 0; border-radius: 12px; background: none; cursor: zoom-in; }
.share-panel__zoom:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
/* #221 full-screen viewer of the share card (always dark, as a photo viewer); built by js/sharecard.js. */
.share-viewer-open, .share-viewer-open body { overflow: hidden; }
.share-viewer { --viewer-fade: 1; position: fixed; inset: 0; z-index: 1000; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: var(--space-2);
  padding: calc(env(safe-area-inset-top) + var(--space-2)) var(--space-3) calc(env(safe-area-inset-bottom) + var(--space-3));
  background: rgba(5, 9, 18, calc(.96 * var(--viewer-fade))); color: #f4f7fc; animation: share-viewer-in .2s ease-out; }
@supports (backdrop-filter: blur(1px)) { .share-viewer { backdrop-filter: blur(18px); } }
.share-viewer.is-closing { animation: share-viewer-out .16s ease-in forwards; }
@keyframes share-viewer-in { from { opacity: 0; transform: scale(.97); } }
@keyframes share-viewer-out { to { opacity: 0; transform: scale(.97); } }
.share-viewer__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.share-viewer__formats { display: flex; gap: 4px; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, .1); }
.share-viewer__format { min-height: 36px; padding: 0 var(--space-3); border: 0; border-radius: 999px; background: transparent; color: inherit; font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; }
.share-viewer__format[aria-pressed="true"] { background: #f4f7fc; color: #101e32; }
.share-viewer__close { width: var(--tap); height: var(--tap); border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: inherit; font-size: 1.6rem; line-height: 1; cursor: pointer; }
.share-viewer__stage { position: relative; display: flex; align-items: center; justify-content: center; min-height: 0; overflow: hidden; }
.share-viewer__image { display: block; max-width: 100%; max-height: 100%; border-radius: 16px; box-shadow: 0 24px 60px rgba(0, 0, 0, .55); object-fit: contain;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; transition: transform .18s ease-out; will-change: transform; }
.share-viewer__nav { position: absolute; top: 50%; z-index: 1; width: var(--tap); height: var(--tap); margin-top: calc(var(--tap) / -2); border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .14); color: inherit; font-size: 1.8rem; line-height: 1; cursor: pointer; }
.share-viewer__nav--prev { left: 0; }
.share-viewer__nav--next { right: 0; }
/* On a phone the card takes the whole width; switching styles is a swipe, the arrows only on larger screens. */
@media (max-width: 599px) { .share-viewer__nav { display: none; } }
.share-viewer__bottom { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.share-viewer__dots { display: flex; gap: 6px; }
.share-viewer__dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .35); }
.share-viewer__dot.is-current { background: #f4f7fc; }
.share-viewer__caption { margin: 0; font-size: .9rem; font-weight: 600; }
.share-viewer__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }
.share-viewer__download { border-color: rgba(255, 255, 255, .35); color: #f4f7fc; }
.share-viewer__status { min-height: 1.2em; margin: 0; color: rgba(244, 247, 252, .75); font-size: .85rem; }
.share-viewer button:focus-visible { outline: 2px solid #f4f7fc; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .share-viewer, .share-viewer.is-closing { animation: none; }
  .share-viewer__image { transition: none; }
}
/* #220 celebration of a done day / a challenge's done day (js/celebration.js): over the page, never blocking it. */
.celebration { position: fixed; inset: 0; z-index: 900; display: flex; align-items: flex-start; justify-content: center; padding-top: 34vh; pointer-events: none; }
.celebration__confetti { position: absolute; inset: 0; width: 100%; height: 100%; }
.celebration__card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 200px; max-width: min(86vw, 360px);
  padding: var(--space-4) var(--space-5); border-radius: 24px; background: rgba(16, 30, 50, .9); color: #f4f7fc; text-align: center;
  box-shadow: 0 20px 50px rgba(8, 16, 32, .45); animation: celebration-in .42s cubic-bezier(.2, 1.4, .4, 1) both; }
@supports (backdrop-filter: blur(1px)) { .celebration__card { background: rgba(16, 30, 50, .78); backdrop-filter: blur(16px) saturate(1.4); } }
.celebration__check { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 4px; border-radius: 50%;
  background: linear-gradient(135deg, #3353ef, #33c9f5); color: #fff; font-size: 1.7rem; font-weight: 700; }
.celebration__title { font-size: 1.35rem; font-weight: 750; letter-spacing: -.01em; }
.celebration--challenge .celebration__title { font-size: 1.15rem; }
.celebration__subtitle { font-size: .95rem; opacity: .9; overflow-wrap: anywhere; }
.celebration__detail { margin-top: 2px; padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, .14); font-size: .85rem; font-weight: 650; }
.celebration.is-leaving .celebration__card { animation: celebration-out .35s ease-in forwards; }
@keyframes celebration-in { from { opacity: 0; transform: translateY(12px) scale(.86); } }
@keyframes celebration-out { to { opacity: 0; transform: translateY(-8px) scale(.96); } }
@media (prefers-reduced-motion: reduce) {
  .celebration__card, .celebration.is-leaving .celebration__card { animation: celebration-fade .3s ease both; }
  .celebration.is-leaving .celebration__card { animation-direction: reverse; }
}
@keyframes celebration-fade { from { opacity: 0; } }
.share-panel__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }
.share-panel__status { min-height: 1.3em; color: var(--text-muted); font-size: .85rem; }
.share-panel__option { display: flex; align-items: center; gap: var(--space-2); min-height: var(--tap); font-size: .9rem; cursor: pointer; }
.group-share__section { display: flex; flex-direction: column; gap: var(--space-2); }
.pick-row.is-shared { cursor: default; }
.pick-row.is-shared .habit-row__name { color: var(--text-muted); }
/* 0.9.7 leave sharing */
.share-items li:has(.share-item__leave) { display: flex; align-items: center; gap: var(--space-2); }
.share-items li:has(.share-item__leave) .share-item { flex: 1; min-width: 0; }
.share-item__leave { flex: none; display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--space-2); }
.leave-options { display: flex; flex-direction: column; gap: var(--space-2); }
.leave-options__delete .habit-row__name { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--danger); }
.share-panel__option input { width: 20px; height: 20px; accent-color: var(--accent); }

/* 0.9.5 Measurements: neutral values (no good/bad colours), compact on Today. */
.measure-value { margin-left: auto; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.measure-hero { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-4); }
.measure-hero > div { flex: 1; min-width: 0; }
.measure-hero__value { font-size: clamp(2rem, 9vw, 2.75rem); white-space: nowrap; }
.measure-hero__action { flex: none; }
@media (max-width: 520px) {
  .measure-hero__action { flex: 1 1 100%; justify-content: center; }
}
.measure-facts dd { display: flex; flex-direction: column; font-variant-numeric: tabular-nums; }
.measure-facts__date { color: var(--text-muted); font-size: .8rem; font-weight: 500; }
.measure-chart-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); }
.measure-history { display: flex; flex-direction: column; gap: var(--space-2); }
.measure-entries .habit-row__line { min-height: 52px; }
.measure-entries__note { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.m-chart { margin: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.m-chart__area { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2); }
.m-chart__y { position: relative; min-width: 3.5em; height: 180px; color: var(--text-muted); font-size: .72rem; font-variant-numeric: tabular-nums; }
.m-chart__y span { position: absolute; right: 0; transform: translateY(-50%); white-space: nowrap; }
.m-chart__plot { position: relative; height: 180px; margin: 0 10px; }
.m-chart__plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.m-chart__grid { stroke: var(--line); stroke-width: 1; }
.m-chart__line { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.m-chart__dot {
  position: absolute;
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.m-chart__dot::after {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  background: var(--surface);
  border: 2.5px solid var(--accent);
}
.m-chart__dot.is-selected::after { inset: 7px; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.m-chart__dot:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; }
.m-chart__x { display: flex; justify-content: space-between; padding-left: calc(3.5em + var(--space-2)); color: var(--text-muted); font-size: .72rem; }
.m-chart__readout { display: flex; justify-content: center; gap: var(--space-2); min-height: 1.4em; color: var(--text-muted); font-size: .9rem; font-variant-numeric: tabular-nums; }
.m-chart__readout strong { color: var(--text); }

.input-with-unit { display: flex; align-items: center; gap: var(--space-2); }
.input-with-unit .input { flex: 1; font-variant-numeric: tabular-nums; }
.input-with-unit__unit { color: var(--text-muted); font-weight: 600; }

.measure-today__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-m); background: color-mix(in srgb, var(--surface) 65%, var(--bg)); }
.measure-today__header { padding: 0 var(--space-1); }
.measure-today__all { display: inline-flex; align-items: center; gap: 2px; min-height: var(--tap); padding: 0 var(--space-1); font-size: .85rem; font-weight: 600; }
.measure-today__hint { padding: 0 var(--space-1); margin-top: calc(-1 * var(--space-2)); }
.measure-today__list li + li { border-top: 1px solid var(--line); }
/* #102: row link = detail, the Enter button beside it = value entry (siblings, never nested). */
.measure-today__item { display: flex; align-items: stretch; }
.measure-today__row {
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: var(--space-1) var(--space-1) var(--space-1) var(--space-3);
  color: var(--text);
  text-decoration: none;
}
.measure-today__list li:first-child .measure-today__row { border-radius: var(--radius-m) 0 0 0; }
.measure-today__list li:last-child .measure-today__row { border-radius: 0 0 0 var(--radius-m); }
.measure-today__list li:only-child .measure-today__row { border-radius: var(--radius-m) 0 0 var(--radius-m); }
.measure-today__row:hover { background: var(--surface-2); }
.measure-today__row:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.measure-today__enter { display: inline-flex; flex: none; align-items: center; min-height: 48px; padding: 0 var(--space-3) 0 var(--space-1); border: 0; background: transparent; font: inherit; cursor: pointer; }
.measure-today__enter:hover .measure-today__action { background: var(--surface-2); }
.measure-today__enter:focus-visible { outline: none; }
.measure-today__enter:focus-visible .measure-today__action { outline: 2px solid var(--focus); outline-offset: 2px; }
.measure-today__icon { display: inline-grid; place-items: center; color: var(--text-muted); }
.measure-today__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .95rem; }
.measure-today__value { font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.measure-today__value.is-past { color: var(--text-muted); font-weight: 500; }
.measure-today__action { min-width: 4.5em; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--accent); font-size: .8rem; font-weight: 600; text-align: center; }

.measure-progress { display: flex; flex-direction: column; gap: var(--space-2); }
.card.measure-progress { padding: var(--space-4); }
.measure-progress--compact { align-self: stretch; padding-top: var(--space-3); border-top: 1px solid var(--line); text-align: left; }
.measure-progress__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.measure-progress__row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-3); }
.measure-progress__name { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 600; }
.measure-progress__name svg { color: var(--text-muted); }
.measure-progress__values { display: inline-flex; gap: var(--space-2); font-variant-numeric: tabular-nums; }
.measure-progress__values span { color: var(--text-muted); }
.measure-progress__values.is-empty { color: var(--text-muted); font-size: .9rem; }

/* ---------- Sign-in methods (0.9.9) ---------- */
.provider-logo { display: block; flex: none; }
.sign-in-state { display: inline-flex; align-items: center; gap: 4px; color: var(--text-muted); font-size: .9rem; }
.sign-in-state--on { color: var(--ok); font-weight: 600; }
.profile-section { display: flex; flex-direction: column; gap: var(--space-2); }
.profile-section .section-title { padding: 0 var(--space-1); }
.profile-section .section-hint { padding: 0 var(--space-1); margin: 0; }
.link-list a.link-list__danger { color: var(--danger); font-weight: 600; }

/* ---------- Onboarding guide (0.9.12) ---------- */
.app--guide .app__main {
  max-width: none;
  min-height: 100dvh;
  padding: calc(var(--space-4) + env(safe-area-inset-top)) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom));
}
.guide { display: flex; justify-content: center; min-height: calc(100dvh - 2 * var(--space-4)); }
.guide__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  width: 100%;
  max-width: 720px;
}
.guide__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); }
.guide__logo { display: inline-block; line-height: 0; border-radius: var(--radius-s); }
.guide__progress { display: flex; align-items: center; gap: var(--space-3); color: var(--text-muted); font-size: .9rem; font-variant-numeric: tabular-nums; }
.guide__steps { display: flex; gap: 6px; }
.guide__step { width: 22px; height: 6px; border-radius: 999px; background: var(--line); }
.guide__step.is-done { background: var(--accent); }
.guide__title { margin: 0; font-size: clamp(1.7rem, 6vw, 2.2rem); line-height: 1.15; letter-spacing: -.02em; }
.guide__claim { margin: calc(-1 * var(--space-2)) 0 0; color: var(--accent); font-size: 1.1rem; font-weight: 700; }
.guide__lead { margin: 0; color: var(--text); font-size: 1.05rem; line-height: 1.55; }
.guide__done, .guide__item-text.guide__done { display: flex; gap: var(--space-1); align-items: center; }
.guide__done .icon { color: var(--ok); }
.guide__item--created { border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); }
.guide__list { display: flex; flex-direction: column; gap: var(--space-3); margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.guide__item { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--surface); }
.guide__item strong { display: block; font-size: 1.02rem; }
.guide__item-text { display: block; color: var(--text-muted); line-height: 1.45; }
.guide__icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); }
.guide__privacy { display: flex; gap: var(--space-2); align-items: flex-start; margin: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-l); background: var(--accent-soft); line-height: 1.5; }
.guide__privacy .icon { color: var(--accent); margin-top: 2px; }
.guide__actions { display: flex; flex-direction: column; gap: var(--space-3); margin-top: auto; padding-top: var(--space-5); }
.guide__cta { width: 100%; }
.guide__footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: var(--tap); }
.guide__back { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--tap); text-decoration: none; }
.guide__skip { min-height: var(--tap); color: var(--text-muted); font-weight: 600; }

@media (min-width: 720px) {
  .app--guide .app__main { padding: var(--space-7) var(--space-5); }
  .guide { align-items: center; min-height: calc(100dvh - 2 * var(--space-7)); }
  .guide__card { padding: var(--space-7) var(--space-7) var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--surface); box-shadow: var(--shadow); }
  .guide__item { background: var(--bg); }
  .guide__actions { flex-direction: row; align-items: center; margin-top: var(--space-2); }
  .guide__cta { width: auto; min-width: 220px; }
}

/* ---------- 0.9.39 (#028): unread dot, install card, notifications ---------- */

/* Small attention dot; its own space never changes the size of the navigation item. */
.bottom-nav__icon { position: relative; display: inline-flex; }
.nav-dot {
  position: absolute;
  top: -2px;
  right: -4px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--danger);
  box-shadow: 0 0 0 2px var(--surface);
}
.nav-dot--inline { position: static; display: inline-block; width: 7px; height: 7px; margin-right: 6px; vertical-align: 1px; box-shadow: none; background: currentColor; }

.install-promo { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); padding: var(--space-4); }
.install-promo[hidden] { display: none; }
.install-promo__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); }
.install-promo__text { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.install-promo__title { font-size: 1rem; font-weight: 700; }
.install-promo__lead { color: var(--text-muted); font-size: .92rem; }
.install-promo__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.install-promo__actions [hidden] { display: none; }
.install-promo__dismiss { min-height: var(--tap); border: 0; background: none; cursor: pointer; font: inherit; }

.device-status { font-weight: 600; }
.install-steps { display: flex; flex-direction: column; gap: var(--space-1); margin: 0; padding-left: 1.4rem; }

/* #082: install state of this device and quick sign-in in the guide and Profile -> App on this device. */
.install-panel { display: flex; flex-direction: column; gap: var(--space-3); }
.install-panel p { margin: 0; }
.install-panel__state { display: flex; gap: var(--space-2); align-items: center; font-weight: 600; }
.install-panel__state .icon { color: var(--ok); flex: none; }
.guide__panel { padding: var(--space-4); border-radius: var(--radius-l); background: var(--surface-2); }
[data-passkey-unsupported][hidden], button[name="__passkeySubmit"][hidden], [data-passkey-supported][hidden] { display: none; }

/* #150 local reminders (iOS app only - the web never renders them): a native-feeling switch, the editor section, the
   permission sheet and Profile -> Notifications. Colours come from the tokens, so light/dark and every accent theme follow. */
.switch {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: none;
  width: 51px;
  height: 31px;
  margin: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--line) 85%, var(--text-muted));
  cursor: pointer;
  transition: background-color .2s var(--ease);
}
.switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgb(0 0 0 / .22);
  transition: transform .2s var(--ease), background-color .2s var(--ease);
}
.switch:checked { background: var(--accent); }
.switch:checked::after { transform: translateX(20px); background: var(--accent-contrast); }
.switch:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .switch, .switch::after { transition: none; }
}

.reminder { display: flex; flex-direction: column; gap: var(--space-4); }
.reminder-switch { display: flex; align-items: center; gap: var(--space-3); min-height: var(--tap); cursor: pointer; }
.reminder-switch__icon { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 11px; background: var(--accent-soft); color: var(--accent); }
.reminder-switch__text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.reminder-switch__title { font-weight: 650; line-height: 1.3; }
.reminder-switch__meta { color: var(--text-muted); font-size: .85rem; line-height: 1.35; font-variant-numeric: tabular-nums; }
.reminder__body { display: flex; flex-direction: column; gap: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.reminder__body--compact { padding-top: 0; border-top: 0; }
.reminder__status { flex-direction: column; align-items: flex-start; }
.reminder__status p { margin: 0; }

.reminder-sheet__icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); }
.reminder-sheet__points { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.reminder-sheet__points li { display: flex; align-items: flex-start; gap: var(--space-3); }
.reminder-sheet__points .icon { flex: none; margin-top: 2px; color: var(--accent); }
.reminder-sheet__actions { flex-direction: column; align-items: stretch; }

.reminder-access { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-weight: 600; }
.reminder-access__dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--text-muted); }
.reminder-access__dot--on { background: var(--ok); }
.reminder-access__dot--quiet { background: var(--accent); }
.reminder-access__dot--off { background: var(--warning); }
.reminder-group__title { margin: var(--space-2) 0 0; padding: 0 var(--space-1); font-size: .95rem; font-weight: 700; }
.reminder-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; overflow: hidden; }
.reminder-item { --habit-accent: var(--habit-color, var(--accent)); }
.reminder-item + .reminder-item { border-top: 1px solid var(--line); }
.reminder-item__row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-4); }
.reminder-item .habit-row__icon { flex: none; width: 36px; height: 36px; border-radius: 11px; background: color-mix(in srgb, var(--habit-accent) 14%, transparent); color: var(--habit-accent); }
.reminder-item.is-off .habit-row__icon { opacity: .55; }
.reminder-item__open { display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: var(--tap); justify-content: center; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.reminder-item__open:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-s); }
.reminder-item__edit { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-2) var(--space-4) var(--space-4); }
.reminder-item.is-editing { background: color-mix(in srgb, var(--accent-soft) 45%, var(--surface)); }
.reminder-item__more { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.reminder-empty { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-4) var(--space-5); }
.reminder-empty p { margin: 0; color: var(--text-muted); }
.reminder-empty__links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
/* #150B the server's evening summary and What's new on this iPhone, next to the local reminders. */
.push-section .card { display: flex; flex-direction: column; gap: var(--space-3); }
.push-section__time { padding-left: calc(36px + var(--space-3)); }
.push-section .status p { margin: 0; }
.link--danger { color: var(--danger); }

/* ---------- #156 Public challenges and badges ---------- */

.sharing-tabs { margin-bottom: var(--space-3); }

/* ---------- RYTAVO Design System (#190): the segmented switch between sibling places ----------
   A light rounded track, a raised thumb that slides (after a tap on the switch) - glass only where the platform can do it,
   solid with Reduce Transparency, no slide with Reduce Motion. 44 px touch targets, clear current state (not colour alone). */
.seg-nav {
  --seg-pad: 3px;
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--seg-count), minmax(0, 1fr));
  width: max-content;
  min-width: 14rem;
  padding: var(--seg-pad);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-2) 82%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line) 70%, transparent);
  isolation: isolate;
}
.seg-nav--wide { width: 100%; max-width: 26rem; }
.seg-nav__thumb {
  position: absolute;
  z-index: 0;
  top: var(--seg-pad);
  bottom: var(--seg-pad);
  left: var(--seg-pad);
  width: calc((100% - 2 * var(--seg-pad)) / var(--seg-count));
  border-radius: 999px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgb(16 30 50 / .08), 0 4px 12px -4px rgb(16 30 50 / .18), inset 0 0 0 .5px color-mix(in srgb, var(--line) 60%, transparent);
  transform: translateX(calc(var(--seg-index) * 100%));
}
.seg-nav__thumb.is-sliding { animation: seg-slide .34s cubic-bezier(.3, 1.25, .5, 1) both; }
@keyframes seg-slide { from { transform: translateX(calc(var(--seg-from) * 100%)) scaleX(1.06); } }
.seg-nav__item {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 40px;
  padding: 0 var(--space-3);
  border-radius: 999px;
  color: var(--text-muted);
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color .2s;
}
.seg-nav__item[aria-current="page"] { color: var(--text); font-weight: 700; }
.seg-nav__item:focus-visible { outline: 3px solid var(--focus, var(--accent)); outline-offset: 2px; }
@media (hover: hover) { .seg-nav__item:not([aria-current="page"]):hover { color: var(--text); } }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .seg-nav { -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); }
  .seg-nav__thumb { background: color-mix(in srgb, var(--surface) 88%, transparent); }
}
@media (prefers-reduced-transparency: reduce) {
  .seg-nav { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--surface-2); }
  .seg-nav__thumb { background: var(--surface); }
}
@media (prefers-reduced-motion: reduce) { .seg-nav__thumb.is-sliding { animation: none; } }
@media (prefers-contrast: more) { .seg-nav { box-shadow: inset 0 0 0 1px var(--text-muted); } .seg-nav__thumb { box-shadow: inset 0 0 0 1.5px var(--text); } }
button.seg-nav__item { border: 0; background: none; font-family: inherit; cursor: pointer; }
/* #198 the quiet size: a filter inside a place (Výzvy: Probíhající / Připravované / Skončené). Same capsule, thumb, type and
   motion as the switch above it, but lower, without glass or lift - an outlined track with the account accent in the thumb. */
.seg-nav--quiet { --seg-pad: 2px; background: transparent; box-shadow: inset 0 0 0 1px var(--line); -webkit-backdrop-filter: none; backdrop-filter: none; }
.seg-nav--quiet .seg-nav__thumb { background: var(--accent-soft); box-shadow: none; }
.seg-nav--quiet .seg-nav__item { min-height: 36px; padding: 0 var(--space-2); font-size: .875rem; }
.seg-nav--quiet .seg-nav__item::before { content: ""; position: absolute; inset: -4px 0; }
.seg-nav--quiet .seg-nav__item[aria-pressed="true"] { color: var(--accent); font-weight: 700; }
@media (hover: hover) { .seg-nav--quiet .seg-nav__item[aria-pressed="false"]:hover { color: var(--text); } }
@media (prefers-contrast: more) { .seg-nav--quiet { box-shadow: inset 0 0 0 1px var(--text-muted); } .seg-nav--quiet .seg-nav__item[aria-pressed="true"] { color: var(--text); } }
/* #198 on a phone both levels take the content width, so they line up with the cards below. */
@media (max-width: 959px) { .seg-nav--wide { max-width: none; } }

/* #189 stage 2 Blízcí: one main action, the three ways with their permissions, follow links folded, the group's management. */
.dash-invite { margin: var(--space-1) 0 var(--space-4); }
.dash-invite--large { display: flex; justify-content: center; margin-top: var(--space-2); }
.dash-invite__button { gap: var(--space-2); min-height: 48px; }
@media (max-width: 959px) { .dash-invite__button { width: 100%; } }
.dash-declined { margin: var(--space-1) 0 var(--space-3); color: var(--text-muted); font-size: .9rem; }
.dash-declined summary { min-height: 44px; display: flex; align-items: center; padding: 0 var(--space-1); cursor: pointer; }
.dash-viewer { margin-top: var(--space-4); padding: 0; overflow: hidden; }
.dash-viewer__toggle { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 64px; padding: var(--space-3) var(--space-4); border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.dash-viewer__toggle .dash-action__icon { flex: none; margin: 0; }
.dash-viewer__text { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.dash-viewer__chevron { flex: none; color: var(--text-muted); }
.dash-viewer__toggle:focus-visible { outline: 3px solid var(--focus, var(--accent)); outline-offset: -3px; }
#dash-viewer-body { padding: var(--space-2) var(--space-4) var(--space-4); }
#dash-viewer-body .viewer-links > .share-together__title { display: none; }
.invite-ways { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.invite-way { display: flex; flex-direction: column; gap: var(--space-2); width: 100%; padding: var(--space-4); border: 1px solid var(--line); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.invite-way:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.invite-way:focus-visible { outline: 3px solid var(--focus, var(--accent)); outline-offset: 2px; }
.invite-way__head { display: flex; align-items: center; gap: var(--space-3); }
.invite-way__head > .icon:last-child { margin-left: auto; color: var(--text-muted); }
.invite-way__icon { display: grid; flex: none; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-m, 12px); background: var(--accent-soft); color: var(--accent); }
.invite-way__title { font-weight: 700; }
.invite-way__for { margin: 0; color: var(--text-muted); font-size: .88rem; line-height: 1.4; }
.invite-rights { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) var(--space-4); }
.invite-rights__list { display: flex; flex-direction: column; gap: var(--space-1); font-size: .88rem; line-height: 1.4; }
.invite-rights__row { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--space-2); }
.invite-rights__label { color: var(--text-muted); font-weight: 700; }
.invite-rights__row.is-never .invite-rights__label { color: var(--danger, #c0392b); }
.invite-groups { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
.invite-groups__option { display: flex; align-items: center; gap: var(--space-3); min-height: 44px; }
.invite-groups__option input { flex: none; width: 1.2rem; height: 1.2rem; accent-color: var(--accent); }
.invite-groups__option.is-disabled { opacity: .55; }
.sheet__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); padding-top: var(--space-2); }
.group-share-action { margin: 0 0 var(--space-4); }
.group-manage { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-5); padding: var(--space-4) var(--space-5); scroll-margin-top: var(--space-5); }
.group-manage__title { margin: 0; font-size: 1.15rem; }
.group-manage__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.group-manage__label { color: var(--text-muted); }
.share-privacy { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-4); padding: var(--space-4) var(--space-5); }
.share-privacy .section-title { margin: 0; }

/* #189 the quiet row link from Výzvy to My achievements (Profile). */
.link-row { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; color: var(--accent); font-weight: 600; text-decoration: none; }
.link-row .icon:last-child { color: var(--text-muted); }

/* #189 Moje výzvy: one compact list (joined + my proposals with their state) above discovering. */
.my-challenges { margin: var(--space-2) 0 var(--space-5); }
.my-challenges__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--space-3); margin-bottom: var(--space-2); }
.my-challenges__head .section-title { margin: 0; }
.my-challenges__achievements { font-size: .9rem; }
.my-challenges__list { margin: 0; padding: 0; list-style: none; overflow: hidden; }
.my-challenge { display: flex; align-items: center; gap: var(--space-2); padding-right: var(--space-3); }
.my-challenge + .my-challenge { border-top: 1px solid var(--line); }
.my-challenge__main { display: flex; flex: 1; align-items: center; gap: var(--space-3); min-width: 0; min-height: 60px; padding: var(--space-2) var(--space-3); color: inherit; text-decoration: none; }
.my-challenge__main .medal { width: 36px; height: 36px; }
.my-challenge__main > .icon { flex: none; color: var(--text-muted); }
.my-challenge__body { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.my-challenge__title { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.my-challenge__state { color: var(--text-muted); font-size: .85rem; }
.my-challenge__edit { flex: none; border: 1px solid var(--line); color: var(--accent); }
.my-challenges__more { margin-top: var(--space-2); }
.my-challenges__empty { margin: 0; color: var(--text-muted); }
.public-discover { margin: 0 0 var(--space-2); }


.medal {
  --medal: #5b5bd6;
  position: relative;
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  color: #fff;
  background: radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--medal) 62%, #fff) 0%, var(--medal) 58%, color-mix(in srgb, var(--medal) 78%, #000) 100%);
  box-shadow: inset 0 0 0 3px rgb(255 255 255 / .38), 0 4px 14px color-mix(in srgb, var(--medal) 30%, transparent);
}
.medal--large { width: 88px; height: 88px; box-shadow: inset 0 0 0 5px rgb(255 255 255 / .38), 0 8px 24px color-mix(in srgb, var(--medal) 32%, transparent); }
.medal--muted { filter: grayscale(1); opacity: .45; }
.medal--image { overflow: hidden; background: var(--surface-2); }
.medal__image { width: 100%; height: 100%; object-fit: cover; }

.badge-notice {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-2) 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  border-radius: var(--radius-l);
  background: var(--accent-soft);
  animation: badge-notice-in .5s ease-out both;
}
.badge-notice .medal { animation: badge-medal-in .7s cubic-bezier(.2, 1.4, .4, 1) .1s both; }
.badge-notice__text { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.badge-notice__text span { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@keyframes badge-notice-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes badge-medal-in { from { transform: scale(.6) rotate(-12deg); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .badge-notice, .badge-notice .medal { animation: none; } }

.public-toolbar { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-4); }
.public-search { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 12rem); gap: var(--space-2); }
.public-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.public-card { display: flex; align-items: flex-start; gap: var(--space-3); height: 100%; padding: var(--space-4); color: inherit; text-decoration: none; }
.public-card:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--border, transparent)); }
.public-card__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.public-card__tags { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: 0 0 var(--space-1); }
.public-card__title { font-size: 1.05rem; font-weight: 700; line-height: 1.3; }
.public-card__meta { color: var(--text-muted); font-size: .88rem; }
.public-empty, .public-propose { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-5); }
.public-propose { margin-top: var(--space-5); }
.public-propose h2 { margin: 0 0 var(--space-1); }
.public-propose__text, .public-empty p { margin: 0; color: var(--text-muted); }

.public-hero { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-5); border-top: 4px solid var(--medal, var(--accent)); }
.public-hero__text { min-width: 0; }
.public-hero__title { margin: var(--space-1) 0; overflow-wrap: anywhere; }
.public-hero__organizer { margin: 0; color: var(--text-muted); }
.public-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3); margin: var(--space-3) 0; padding: var(--space-4) var(--space-5); }
.public-facts dt { color: var(--text-muted); font-size: .8rem; font-weight: 600; }
.public-facts dd { margin: 2px 0 0; font-weight: 650; }
.public-text { padding: var(--space-4) var(--space-5); }
.public-text__body { margin: 0 0 var(--space-3); white-space: pre-line; overflow-wrap: anywhere; }
.public-text .section-title { margin: var(--space-3) 0 var(--space-2); }
.public-progress { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); padding: var(--space-4) var(--space-5); }
.public-progress p { margin: 0; }
.public-progress__mine, .public-progress__hint { color: var(--text-muted); font-size: .88rem; }
.progress-bar { height: 10px; overflow: hidden; border-radius: 999px; background: var(--surface-2); }
.progress-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width .4s ease; }
.public-earned { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-3); padding: var(--space-4); color: inherit; text-decoration: none; }
.public-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-4); }
.public-actions__confirm { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.public-report { margin-top: var(--space-5); }
.public-report__done { color: var(--text-muted); font-size: .9rem; }
.public-report .link { display: inline-flex; align-items: center; gap: var(--space-1); }

.public-form { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5); }
.public-form fieldset { margin: 0; padding: 0; border: 0; }
.public-form__preview { display: flex; align-items: center; gap: var(--space-3); font-size: 1.1rem; overflow-wrap: anywhere; }
.public-form__dates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.motif-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: var(--space-2); }
.motif-grid__item, .swatch-grid__item { display: grid; place-items: center; min-height: 44px; border: 1px solid var(--border, transparent); border-radius: var(--radius-m); background: var(--surface-2); color: var(--text); cursor: pointer; }
.motif-grid__item[aria-pressed="true"] { background: var(--accent); color: var(--accent-contrast); }
.swatch-grid { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.swatch-grid__item { width: 44px; border-radius: 50%; background: var(--swatch); }
.swatch-grid__item[aria-pressed="true"] { outline: 3px solid var(--text); outline-offset: 2px; }
.public-sent { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-6) var(--space-5); text-align: center; }
.public-sent h2, .public-sent p { margin: 0; }

.badges-private { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--text-muted); font-size: .88rem; }
.badge-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-3); margin: var(--space-3) 0 0; padding: 0; list-style: none; }
.badge-tile { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); height: 100%; padding: var(--space-4) var(--space-3); border-radius: var(--radius-l); background: var(--surface); box-shadow: var(--shadow); color: inherit; text-align: center; text-decoration: none; transition: transform .15s ease; }
.badge-tile:hover { transform: translateY(-2px); }
.badge-tile__title { font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.badge-tile__meta { color: var(--text-muted); font-size: .82rem; }
.badges-empty { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-6) var(--space-5); text-align: center; }
.badges-empty h2, .badges-empty p { margin: 0; }
.badges-empty p { color: var(--text-muted); }
.badge-hero { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-6) var(--space-5) var(--space-5); text-align: center; }
.badge-hero .section-title { margin: var(--space-2) 0 0; }
.badge-hero__title { margin: 0; overflow-wrap: anywhere; }
.badge-hero__facts { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3) var(--space-5); margin: var(--space-2) 0; }
.badge-hero__facts dt { color: var(--text-muted); font-size: .8rem; font-weight: 600; }
.badge-hero__facts dd { margin: 2px 0 0; font-weight: 700; }
.page--badge .share-panel { margin-top: var(--space-4); }

@media (max-width: 520px) {
  /* #189: on a phone search and category each get a full row (no clipped category name); the three filters share the
     full width, nothing scrolls away. */
  .public-search { grid-template-columns: minmax(0, 1fr); }
  .public-hero { flex-direction: column; align-items: flex-start; padding: var(--space-4); }
  .public-form { padding: var(--space-4); }
  .badge-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* #162 Apple Health (iOS app, Profile -> Apple Health). */
.health-metrics { margin: 0 0 var(--space-3, 12px); padding-left: 1.2rem; }
.health-page .checkbox-row { display: flex; gap: var(--space-2, 8px); align-items: flex-start; margin: var(--space-3, 12px) 0; font-weight: 600; }
.health-page .checkbox-row input { margin-top: .2rem; flex: none; width: 1.2rem; height: 1.2rem; }
.health-today { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3, 12px); margin: 0 0 var(--space-3, 12px); }
.health-today div { display: flex; flex-direction: column; gap: 2px; }
.health-today dt { font-size: .85rem; color: var(--text-muted, inherit); }
.health-today dd { margin: 0; font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.health-link { display: flex; flex-direction: column; gap: var(--space-2, 8px); margin-bottom: var(--space-3, 12px); }
.health-link__title { margin: 0; font-size: 1rem; font-weight: 700; }
.health-new-habit { display: flex; flex-direction: column; gap: var(--space-2, 8px); padding-top: var(--space-3, 12px); border-top: 1px solid var(--border, rgba(0,0,0,.1)); }

/* #170: on desktop every signed-in page starts beside the rail like Today - reading pages in a 760 px column, wide
   workspaces (Statistics, group overview) up to 1240 px - and every page title is compact like the Today date.
   Signed-out pages (.brand-bar) stay centred under the logo. */
@media (min-width: 960px) {
  .app-bar ~ .app__main { max-width: none; margin-left: 0; padding-right: var(--space-6); }
  .app-bar ~ .app__main > .page:not(.page--today, .page--sharing-dash, .page--public, .page--badges, .page--stats, .page--wide) { width: 100%; max-width: 760px; }
  .app-bar ~ .app__main > .page:is(.page--stats, .page--wide) { width: 100%; max-width: 1240px; }
  .app-bar ~ .app__main :is(h1.page-title, .page-header h1), .app-bar ~ .app__main > h1 { font-size: 1.5rem; font-weight: 700; letter-spacing: -.015em; line-height: 1.2; }
}

/* #170 premium Sharing - web only (.sharing-rich is never set in the iPhone app): each challenge/badge in its own colour
   (--medal), a soft light at the top of the page, a featured challenge, cards that lift on hover. Motion only without
   "reduce motion". */
/* The light sits on the whole main area, so it has no visible edge (the rail covers its left part on desktop). */
.app__main:has(> .sharing-rich) {
  background:
    radial-gradient(42% 380px at 24% 0, color-mix(in srgb, var(--accent) 13%, transparent), transparent),
    radial-gradient(38% 340px at 86% 0, color-mix(in srgb, #5b5bd6 10%, transparent), transparent);
  background-repeat: no-repeat;
}

/* Výzvy: one rounded search field with a magnifier (filters: the quiet SegmentedNav, same on web and in the app). */
.public-search__field { position: relative; display: block; min-width: 0; }
.public-search__icon { position: absolute; top: 50%; left: 14px; display: grid; color: var(--text-muted); transform: translateY(-50%); pointer-events: none; }
.sharing-rich .public-search .input { height: 42px; padding-inline: 16px; border-radius: 999px; background: var(--surface); }
.sharing-rich .public-search__field .input { width: 100%; padding-left: 40px; }

/* The featured challenge: a deep card in the challenge colour (white text stays readable on any colour). */
.pc-feature {
  --medal: #5b5bd6;
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-5);
  overflow: hidden;
  padding: var(--space-5) var(--space-6);
  border-radius: calc(var(--radius-l) + 6px);
  background:
    radial-gradient(60% 110% at 100% 0%, color-mix(in srgb, var(--medal) 55%, transparent) 0%, transparent 65%),
    linear-gradient(135deg, color-mix(in srgb, var(--medal) 58%, #0b1020) 0%, color-mix(in srgb, var(--medal) 34%, #0b1020) 100%);
  box-shadow: 0 22px 44px -22px color-mix(in srgb, var(--medal) 75%, transparent), inset 0 1px 0 rgb(255 255 255 / .12);
  color: #fff;
  text-decoration: none;
}
.pc-feature::after { content: ""; position: absolute; top: -90px; right: -70px; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgb(255 255 255 / .16), transparent 65%); pointer-events: none; }
.pc-feature:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.pc-feature__medal .medal--large { width: 96px; height: 96px; box-shadow: inset 0 0 0 5px rgb(255 255 255 / .45), 0 12px 30px rgb(0 0 0 / .28); }
.pc-feature__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pc-feature__eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
.pc-feature__title { font-size: 1.65rem; font-weight: 750; letter-spacing: -.02em; line-height: 1.15; overflow-wrap: anywhere; }
.pc-feature__text { display: -webkit-box; max-width: 62ch; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; font-size: .95rem; line-height: 1.45; opacity: .9; }
.pc-feature .pc-chips { margin-top: 6px; }
.pc-feature .pc-chip { background: rgb(255 255 255 / .14); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .24); color: #fff; }
.pc-feature .pc-chip--strong { background: #fff; box-shadow: none; color: color-mix(in srgb, var(--medal) 55%, #0b1020); }
.pc-feature__cta { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 4px; padding: 10px 14px 10px 18px; border-radius: 999px; background: #fff; box-shadow: 0 8px 18px rgb(0 0 0 / .2); color: #0b1020; font-size: .9rem; font-weight: 700; white-space: nowrap; }
@media (max-width: 719px) {
  .pc-feature { grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3) var(--space-4); padding: var(--space-4); }
  .pc-feature__medal .medal--large { width: 64px; height: 64px; }
  .pc-feature__medal .medal--large .icon { width: 32px; height: 32px; }
  .pc-feature__title { font-size: 1.25rem; }
  .pc-feature__cta { grid-column: 1 / -1; justify-content: center; }
}
.pc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pc-chip { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--medal, var(--accent)) 11%, var(--surface)); color: var(--text); font-size: .78rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Challenge cards: medal on top, a glow in the card's colour, chips, people at the bottom, an arrow on hover. */
.sharing-rich .public-grid { gap: var(--space-4); }
.sharing-rich .public-card {
  position: relative;
  flex-direction: column;
  gap: var(--space-3);
  overflow: hidden;
  border-color: color-mix(in srgb, var(--medal) 18%, var(--line));
  background: radial-gradient(120% 70% at 0% 0%, color-mix(in srgb, var(--medal) 16%, transparent), transparent 62%), var(--surface);
  box-shadow: 0 1px 2px rgb(16 30 50 / .04);
}
.sharing-rich .public-card:hover { border-color: color-mix(in srgb, var(--medal) 45%, var(--line)); box-shadow: 0 18px 34px -18px color-mix(in srgb, var(--medal) 60%, transparent); }
.sharing-rich .public-card .medal { width: 52px; height: 52px; }
.sharing-rich .public-card__body { flex: 1; gap: 6px; }
.sharing-rich .public-card__title { font-size: 1.08rem; }
.pc-people { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 2px; color: var(--text-muted); font-size: .82rem; font-weight: 600; }
.public-card__go { position: absolute; top: 16px; right: 14px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--surface); box-shadow: 0 0 0 1px color-mix(in srgb, var(--line) 80%, transparent); color: var(--text); opacity: 0; transform: translateX(-4px); }
.sharing-rich .public-card:is(:hover, :focus-visible) .public-card__go { opacity: 1; transform: none; }
@media (hover: none) { .public-card__go { opacity: 1; transform: none; } }
.pc-propose { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 6px; height: 100%; min-height: 168px; padding: var(--space-4); border: 1.5px dashed color-mix(in srgb, var(--text-muted) 40%, transparent); border-radius: var(--radius-l); background: color-mix(in srgb, var(--surface) 55%, transparent); color: inherit; text-decoration: none; }
.pc-propose:hover { border-color: var(--accent); background: var(--surface); }
.pc-propose__icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 4px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); }
.pc-propose__title { font-weight: 700; line-height: 1.25; }
.pc-propose__text { color: var(--text-muted); font-size: .85rem; line-height: 1.4; }

/* Blízcí: a hint of colour at the top of each group, softly lit icons and done avatars, rows that answer the pointer. */
.sharing-rich .dash-group { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 9%, var(--surface)) 0, var(--surface) 120px); }
.sharing-rich .dash-group__avatars .avatar { width: 40px; height: 40px; background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--accent) 40%, #fff), var(--accent)); box-shadow: 0 0 0 2px var(--surface), 0 8px 16px -8px color-mix(in srgb, var(--accent) 80%, transparent); color: #fff; font-weight: 700; }
.sharing-rich .dash-item__icon { box-shadow: 0 8px 16px -10px var(--item-color, var(--accent)); }
.sharing-rich .dash-dot--done { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 75%, #fff), var(--accent)); box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--accent) 75%, transparent); }
.sharing-rich .dash-action__icon { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 24%, var(--surface)), color-mix(in srgb, var(--accent) 8%, var(--surface))); }
.sharing-rich .dash-hello__art { width: 80px; height: 80px; background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--accent) 45%, #fff), var(--accent)); box-shadow: 0 14px 30px -12px color-mix(in srgb, var(--accent) 70%, transparent), inset 0 0 0 4px rgb(255 255 255 / .35); color: #fff; }

/* Odznaky: every badge glows in its colour; a light sweeps over the medal on hover. */
.sharing-rich .badge-wall { gap: var(--space-4); }
.sharing-rich .badge-tile {
  position: relative;
  overflow: hidden;
  padding: var(--space-5) var(--space-3) var(--space-4);
  border: 1px solid color-mix(in srgb, var(--medal, var(--accent)) 18%, var(--line));
  background: radial-gradient(90% 60% at 50% 0%, color-mix(in srgb, var(--medal, var(--accent)) 20%, transparent), transparent 72%), var(--surface);
  box-shadow: none;
}
.sharing-rich .badge-tile:hover { border-color: color-mix(in srgb, var(--medal, var(--accent)) 45%, var(--line)); box-shadow: 0 18px 34px -18px color-mix(in srgb, var(--medal, var(--accent)) 60%, transparent); }
.sharing-rich .badge-tile .medal--large::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(115deg, transparent 35%, rgb(255 255 255 / .5) 50%, transparent 65%) 130% 0 / 250% 100% no-repeat; pointer-events: none; }
.sharing-rich .badges-private { align-self: flex-start; padding: 6px 12px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line) 80%, transparent); }
.sharing-rich .badges-empty { background: radial-gradient(60% 80% at 50% 0%, color-mix(in srgb, #5b5bd6 12%, transparent), transparent 70%), var(--surface); }
@media (prefers-reduced-motion: no-preference) {
  .sharing-rich .public-card, .pc-feature, .sharing-rich .badge-tile, .pc-propose { transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease), background-color .2s var(--ease); }
  .sharing-rich .public-card:hover, .pc-feature:hover, .sharing-rich .badge-tile:hover { transform: translateY(-3px); }
  .public-card__go { transition: opacity .2s var(--ease), transform .2s var(--ease); }
  .sharing-rich .badge-tile:hover .medal--large::after { background-position: -30% 0; transition: background-position .9s var(--ease); }
}

/* #218 "Pozvat do skupiny" (GroupInvitePanel), the inbox of addressed invitations, "Muj RYTAVO kod" and the invitation page's
   way into the app. Tokens only (light/dark/accents follow), rem-based text (Dynamic Type), 44px targets, one column at 320px. */
.invite-panel { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.invite-panel__section { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; padding: var(--space-4); border-radius: var(--radius-m); background: var(--surface-2); }
.invite-panel__title { margin: 0; font-size: 1rem; font-weight: 700; }
.invite-panel__section > .field__help { margin: 0; }
.invite-panel__ways { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.invite-chip { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-4); border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: inherit; font: inherit; font-size: .95rem; font-weight: 600; cursor: pointer; }
.invite-chip .icon { flex: none; color: var(--accent); }
.invite-chip:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.invite-chip.is-selected { border-color: var(--accent); background: var(--accent-soft); }
.invite-chip:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.invite-chip:disabled { opacity: .6; cursor: progress; }
.invite-panel__way:empty { display: none; }
.invite-panel__way .form { gap: var(--space-3); }
.invite-panel__code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .04em; text-transform: uppercase; }
.invite-panel__note { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-m); background: var(--accent-soft); font-size: .9rem; }
.invite-panel__note p { margin: 0; }
.invite-panel__unavailable { flex-direction: row; align-items: flex-start; color: var(--text-muted); background: var(--surface-2); }
.invite-panel__unavailable .icon { flex: none; margin-top: .15rem; }
.invite-panel__actions .button { flex: 1 1 10rem; gap: var(--space-2); }
.invite-panel :is(.button--small, .link), .invitation-inbox :is(.button--small, .link), .my-code-page :is(.button--small, .link) { min-height: 44px; }
.invite-panel__neutral { margin: 0; }
.invite-known { display: flex; flex-direction: column; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.invite-known__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); min-height: 48px; }
.invite-known__name { flex: 1 1 8rem; min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.share-pending__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.share-pending__channel { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text); font-weight: 600; }
.share-pending__channel .icon { flex: none; color: var(--accent); }

.invitation-inbox { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-4); padding: var(--space-4); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); }
.invitation-inbox__title { display: flex; align-items: center; gap: var(--space-2); margin: 0; padding: 0; }
.invitation-inbox__title .icon { flex: none; color: var(--accent); }
.invitation-inbox__count { margin-left: auto; }
.invitation-inbox__list { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.invitation-inbox__item { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-radius: var(--radius-m); background: var(--surface-2); }
.invitation-inbox__item p { margin: 0; }
.invitation-inbox__text { font-weight: 650; overflow-wrap: anywhere; }
.invitation-inbox__actions { align-items: center; }
.invitation-inbox__block { margin-left: auto; color: var(--text-muted); }

.my-code { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4) var(--space-5); }
.my-code + .my-code { margin-top: var(--space-4); }
.my-code > p { margin: 0; }
.my-code__switch { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 44px; }
.my-code__switch-label { flex: 1 1 auto; min-width: 0; font-weight: 650; }
.my-code__body { display: flex; flex-direction: column; gap: var(--space-3); }
.my-code__label { margin: 0; color: var(--text-muted); font-size: .85rem; font-weight: 700; }
.my-code__code { margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.15rem; font-weight: 700; letter-spacing: .03em; overflow-wrap: anywhere; user-select: all; }
.my-code__qr { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); margin: 0; }
.my-code__qr-image { width: min(14rem, 100%); padding: var(--space-2); border-radius: var(--radius-m); background: #fff; }
.my-code__qr-image svg { display: block; width: 100%; height: auto; }
.my-code__off { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; color: var(--text-muted); font-size: .9rem; }
.my-code__off .icon { flex: none; margin-top: .15rem; }
.my-code__blocked li { flex-wrap: wrap; }
.my-code__unblock { margin-left: auto; }
.my-code__empty { margin: 0; }

.invitation-handoff { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-4); padding: var(--space-4) var(--space-5); }
.invitation-handoff p { margin: 0; }
.invitation-handoff .button { flex: 1 1 12rem; min-height: 44px; }
/* ---------- #224 habit overview: hero card (owner 6. 11. 2026) ---------- */
.habit-hero {
  --hero: var(--habit-color, var(--accent));
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  border-color: color-mix(in srgb, var(--hero) 28%, var(--line));
  background:
    radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--hero) 22%, transparent), transparent 62%),
    linear-gradient(160deg, color-mix(in srgb, var(--surface) 88%, var(--hero)), var(--surface));
}
.habit-hero__top { display: flex; align-items: center; gap: var(--space-4); }
.habit-hero__ring { position: relative; flex: none; display: grid; place-items: center; width: 116px; height: 116px; }
.habit-hero__ring svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.habit-hero__ring circle { fill: none; stroke-width: 11; }
.habit-hero__track { stroke: color-mix(in srgb, var(--text) 10%, transparent); }
.habit-hero__value { stroke: var(--hero); stroke-linecap: round; }
.habit-hero__percent { font-size: 1.75rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.habit-hero__period { position: absolute; bottom: 27px; font-size: .7rem; color: var(--text-muted); }
.habit-hero__facts { flex: 1; min-width: 0; display: grid; gap: var(--space-3); margin: 0; }
.habit-hero__fact { display: flex; flex-direction: column-reverse; gap: 1px; }
.habit-hero__fact dt { color: var(--text-muted); font-size: .78rem; }
.habit-hero__fact dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.habit-hero__big { font-size: 1.15rem; font-weight: 750; font-variant-numeric: tabular-nums; }
.habit-hero__badge { padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, #ffd166 18%, transparent); color: #c98a00; font-size: .72rem; font-weight: 700; }
:root[data-theme="dark"] .habit-hero__badge { color: #ffd166; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .habit-hero__badge { color: #ffd166; } }
.habit-hero__caption { margin-top: var(--space-2); color: var(--text-muted); font-size: .8rem; }
.habit-hero__bars { display: flex; align-items: flex-end; gap: 6px; height: 56px; }
.habit-hero__bar { --bar: 100%; flex: 1; height: var(--bar); min-height: 8px; border-radius: 6px; background: var(--hero); }
.habit-hero__bar.is-partial { background: color-mix(in srgb, var(--hero) 60%, transparent); }
.habit-hero__bar.is-missed { --bar: 14%; background: color-mix(in srgb, var(--text) 14%, transparent); }
.habit-hero__bar.is-free { --bar: 14%; background: color-mix(in srgb, var(--text) 6%, transparent); }
.habit-hero__bar.is-excused { --bar: 14%; background: transparent; border: 1.5px dashed color-mix(in srgb, var(--text) 40%, transparent); }
.habit-hero__bar.is-future { --bar: 14%; background: transparent; border: 1.5px solid color-mix(in srgb, var(--text) 18%, transparent); }
.habit-hero__days { display: flex; gap: 6px; }
.habit-hero__days span { flex: 1; text-align: center; color: var(--text-muted); font-size: .7rem; }
.habit-hero__days .is-today { color: var(--accent); font-weight: 700; }

/* #224 one habit's grid: the name stays for screen readers, the days take the width. */
.rhythm-grid--single .rhythm-grid__corner, .rhythm-grid--single .rhythm-grid__habit { width: 0; min-width: 0; max-width: 0; padding: 0; box-shadow: none; }
.rhythm-grid--single .rhythm-grid__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rhythm-grid--single.rhythm-grid--week { --cell: 38px; --row-pitch: 46px; }

/* ---------- #223 the day sheet of a habit: glass and a big ring (owner 6. 11. 2026) ---------- */
.sheet--form {
  border: 1px solid color-mix(in srgb, #fff 12%, transparent);
  border-bottom: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 70%, transparent), color-mix(in srgb, var(--surface) 88%, transparent));
  -webkit-backdrop-filter: blur(28px) saturate(1.6);
  backdrop-filter: blur(28px) saturate(1.6);
  box-shadow: 0 -10px 50px rgb(0 0 0 / .35), inset 0 1px 0 color-mix(in srgb, #fff 14%, transparent);
}
.entry-hero { display: flex; align-items: center; justify-content: center; gap: var(--space-5); margin: var(--space-3) 0 var(--space-1); }
.entry-hero__ring {
  position: relative;
  display: grid;
  place-items: center;
  width: 170px;
  height: 170px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.entry-hero__ring:disabled { cursor: default; opacity: 1; }
.entry-hero__ring svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.entry-hero__ring circle { fill: none; stroke-width: 12; }
.entry-hero__track { stroke: color-mix(in srgb, var(--text) 12%, transparent); }
.entry-hero__value { stroke: var(--habit-accent); stroke-linecap: round; transition: stroke-dasharray .3s var(--ease); }
.entry-hero__number { position: relative; display: flex; align-items: baseline; gap: 4px; font-size: 2.6rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.entry-hero__target { color: var(--text-muted); font-size: 1.35rem; font-weight: 600; }
.entry-hero:not(.entry-hero--stepper) .entry-hero__number { font-size: 1.8rem; }
.entry-hero__step {
  display: grid;
  place-items: center;
  flex: none;
  width: 58px;
  height: 58px;
  border: 1px solid color-mix(in srgb, var(--text) 16%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--text) 9%, transparent);
  color: var(--text);
  cursor: pointer;
  transition: transform .12s var(--ease);
  -webkit-touch-callout: none;
  user-select: none;
}
.entry-hero__step--plus { border-color: transparent; background: var(--habit-accent); color: #fff; }
.entry-hero__step:active { transform: scale(.92); }
.entry-hero__step:disabled { opacity: .4; cursor: default; }
.entry-hero__goal { margin-bottom: var(--space-3); color: var(--text-muted); font-size: .9rem; text-align: center; }
@media (max-width: 360px) { .entry-hero { gap: var(--space-3); } .entry-hero__ring { width: 148px; height: 148px; } }
@media (prefers-reduced-motion: reduce) { .entry-hero__value { transition: none; } .entry-hero__step { transition: none; } }