/* Components. See docs/design-system.md for markup. Logical properties only. */
@layer components {
  /* ---------- Buttons ---------- */
  .btn {
    --btn-bg: var(--surface-2);
    --btn-fg: var(--text);
    --btn-bd: transparent;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    min-block-size: var(--tap);
    padding-inline: var(--s-5);
    border: 1px solid var(--btn-bd);
    border-radius: var(--r-md);
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-weight: 700;
    font-size: var(--fs-base);
    line-height: 1.1;
    text-decoration: none;
    white-space: nowrap;
    user-select: none;
    transition: background-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur-fast) var(--ease);
  }
  .btn:hover { --btn-bg: var(--surface-3); }
  .btn:active { transform: scale(0.97); }
  .btn--primary { --btn-bg: var(--brand); --btn-fg: var(--on-brand); box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--brand) 65%, transparent), inset 0 1px 0 rgb(255 255 255 / 0.3); }
  .btn--primary:hover { --btn-bg: var(--brand-hover); box-shadow: 0 8px 22px -6px color-mix(in srgb, var(--brand) 75%, transparent), inset 0 1px 0 rgb(255 255 255 / 0.3); }
  .btn--primary:active { --btn-bg: var(--brand-press); }
  .btn--secondary { --btn-bg: transparent; --btn-bd: var(--border-strong); }
  .btn--secondary:hover { --btn-bg: var(--surface-2); }
  .btn--ghost { --btn-bg: transparent; --btn-fg: var(--text-muted); }
  .btn--ghost:hover { --btn-bg: var(--surface-2); --btn-fg: var(--text); }
  .btn--danger { --btn-bg: var(--danger); --btn-fg: light-dark(#fff, #2a0b09); }
  .btn--danger:hover { --btn-bg: color-mix(in srgb, var(--danger) 88%, #000); }
  .btn--sm { min-block-size: var(--tap); padding-inline: var(--s-3); font-size: var(--fs-sm); border-radius: var(--r-sm); }
  .btn--lg { min-block-size: 3.5rem; padding-inline: var(--s-8); font-size: var(--fs-md); border-radius: var(--r-lg); }
  .btn--block { inline-size: 100%; }
  .btn--icon { inline-size: var(--tap); padding-inline: 0; }
  .btn[disabled], .btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; box-shadow: none; }
  .btn[aria-busy="true"] { pointer-events: none; color: transparent; }
  .btn[aria-busy="true"] > * { opacity: 0; }
  .btn[aria-busy="true"]::after {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    inline-size: 1.25rem;
    block-size: 1.25rem;
    margin: -0.625rem;
    border: 2.5px solid var(--btn-fg);
    border-inline-end-color: transparent;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
  }
  .btn--secondary[aria-busy="true"]::after, .btn--ghost[aria-busy="true"]::after { border-color: var(--text); border-inline-end-color: transparent; }
  [dir="rtl"] .btn[aria-busy="true"]::after { inset-inline-start: auto; inset-inline-end: 50%; }
  @keyframes spin { to { transform: rotate(360deg); } }

  .icon-btn {
    position: relative;
    display: inline-grid;
    place-items: center;
    inline-size: var(--tap);
    block-size: var(--tap);
    border: 0;
    border-radius: var(--r-pill);
    background: transparent;
    color: var(--text-muted);
    text-decoration: none;
    transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  }
  .icon-btn:hover { background: var(--surface-2); color: var(--text); }

  /* ---------- Forms ---------- */
  .field { display: grid; gap: var(--s-2); }
  .field__label { font-weight: 650; font-size: var(--fs-sm); }
  .field__help { color: var(--text-muted); font-size: var(--fs-sm); }
  .field__error { display: flex; align-items: flex-start; gap: var(--s-2); color: var(--danger-text); font-size: var(--fs-sm); font-weight: 550; }
  .input, .select, .textarea {
    inline-size: 100%;
    min-block-size: var(--tap);
    padding: var(--s-3) var(--s-4);
    border: 1.5px solid var(--border-strong);
    border-radius: var(--r-md);
    background: var(--surface);
    color: var(--text);
    transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease);
  }
  .input::placeholder, .textarea::placeholder { color: var(--text-subtle); }
  .input:hover, .select:hover, .textarea:hover { border-color: var(--text-subtle); }
  .input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: 0; border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 30%, transparent); }
  .select { appearance: none; padding-inline-end: var(--s-10); background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 1.4rem) 55%, calc(100% - 1.05rem) 55%; background-size: 0.35rem 0.35rem; background-repeat: no-repeat; }
  [dir="rtl"] .select { background-position: 1.05rem 55%, 1.4rem 55%; }
  .input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--danger); }
  .input:disabled, .select:disabled, .textarea:disabled { opacity: 0.55; background: var(--surface-2); }

  .check { display: flex; align-items: center; gap: var(--s-3); min-block-size: var(--tap); cursor: pointer; }
  .check input { inline-size: 1.375rem; block-size: 1.375rem; accent-color: var(--brand); flex: none; margin: 0; }

  .switch { display: flex; align-items: center; gap: var(--s-3); min-block-size: var(--tap); cursor: pointer; }
  .switch input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; }
  .switch__track { position: relative; flex: none; inline-size: 2.75rem; block-size: 1.625rem; border-radius: var(--r-pill); background: var(--border-strong); transition: background-color var(--dur) var(--ease); }
  .switch__track::after { content: ""; position: absolute; inset-block-start: 0.1875rem; inset-inline-start: 0.1875rem; inline-size: 1.25rem; block-size: 1.25rem; border-radius: 50%; background: #fff; box-shadow: var(--shadow-1); transition: transform var(--dur) var(--ease-spring); }
  .switch input:checked + .switch__track { background: var(--brand); }
  .switch input:checked + .switch__track::after { transform: translateX(1.125rem); }
  [dir="rtl"] .switch input:checked + .switch__track::after { transform: translateX(-1.125rem); }
  .switch input:focus-visible + .switch__track { outline: 3px solid var(--focus); outline-offset: 2px; }
  .switch input:checked + .switch__track::before { content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 0.5rem; inline-size: 0.5rem; block-size: 0.3rem; margin-block-start: -0.2rem; border: 2px solid var(--on-brand); border-block-start: 0; border-inline-end: 0; transform: rotate(-45deg); z-index: 1; }

  /* Segmented control / tabs */
  .segmented { display: inline-flex; max-inline-size: 100%; padding: 0.1875rem; border: 0; margin: 0; border-radius: var(--r-md); background: var(--surface-2); gap: 0.125rem; }
  .segmented > legend { padding: 0; }
  .segmented__item { position: relative; display: block; flex: 1 1 auto; cursor: pointer; }
  .segmented__item input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
  .segmented__item > span, .segmented__link {
    display: flex; align-items: center; justify-content: center; gap: var(--s-2);
    min-block-size: var(--tap); padding-inline: var(--s-4);
    border-radius: calc(var(--r-md) - 3px);
    color: var(--text-muted); font-weight: 650; font-size: var(--fs-sm); white-space: nowrap; text-decoration: none;
    transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease);
  }
  .segmented__item:hover > span, .segmented__link:hover { color: var(--text); }
  .segmented__item input:checked + span, .segmented__link[aria-current="page"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-1); }
  .segmented__item input:checked + span .icon, .segmented__link[aria-current="page"] .icon { color: var(--brand-text); }
  .segmented__item input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
  .segmented--block { display: flex; inline-size: 100%; }

  /* ---------- Surfaces ---------- */
  .card { padding: var(--s-5); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-1); }
  .card--flat { box-shadow: none; }
  .card--interactive { transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
  .card--interactive:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: var(--border-strong); }
  .card__title { font-size: var(--fs-md); margin-block-end: var(--s-1); }
  .card__label { font-size: var(--fs-sm); font-weight: 650; color: var(--text-muted); display: flex; align-items: center; gap: var(--s-2); margin-block-end: var(--s-3); }

  .list { list-style: none; padding: 0; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); overflow: clip; }
  .list__item { display: flex; align-items: center; gap: var(--s-3); min-block-size: 3.5rem; padding: var(--s-2) var(--s-4); color: inherit; text-decoration: none; }
  .list__item + .list__item { border-block-start: 1px solid var(--border); }
  a.list__item:hover { background: var(--surface-2); }

  .back-link { display: inline-flex; align-items: center; gap: var(--s-1); align-self: flex-start; min-block-size: var(--tap); color: var(--text-muted); font-size: var(--fs-sm); font-weight: 650; text-decoration: none; }
  .back-link:hover { color: var(--text); }
  .chip { display: inline-flex; align-items: center; gap: var(--s-2); min-block-size: var(--tap); padding-inline: var(--s-3); border: 1.5px solid var(--border-strong); border-radius: var(--r-pill); background: transparent; color: var(--text); font-size: var(--fs-sm); font-weight: 600; text-decoration: none; transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
  .chip:hover { background: var(--surface-2); }
  .chip[aria-pressed="true"], .chip[aria-current="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }

  .badge { display: inline-flex; align-items: center; gap: var(--s-1); padding: 0.125rem var(--s-2); border-radius: var(--r-pill); background: var(--surface-3); color: var(--text); font-size: var(--fs-xs); font-weight: 700; line-height: 1.5; }
  .badge--brand { background: var(--brand-soft); color: var(--brand-text); }
  .badge--success { background: var(--success-soft); color: var(--success-text); }
  .badge--warning { background: var(--warning-soft); color: var(--warning-text); }
  .badge--danger { background: var(--danger-soft); color: var(--danger-text); }
  .badge .icon { inline-size: 0.875rem; block-size: 0.875rem; }

  .avatar { display: inline-grid; place-items: center; flex: none; inline-size: var(--avatar, 2.5rem); block-size: var(--avatar, 2.5rem); border-radius: var(--r-pill); background: linear-gradient(145deg, var(--surface-3), var(--surface-2)); border: 1px solid var(--border); color: var(--text); font-size: calc(var(--avatar, 2.5rem) * 0.38); font-weight: 750; letter-spacing: 0.02em; user-select: none; overflow: hidden; }
  .avatar img { inline-size: 100%; block-size: 100%; object-fit: cover; }
  .avatar--lg { --avatar: 4rem; }
  .avatar--sm { --avatar: 2rem; }

  .progress { block-size: 0.625rem; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; }
  .progress__bar { block-size: 100%; inline-size: var(--value, 0%); border-radius: inherit; background: linear-gradient(90deg, var(--flame-2), var(--brand)); transition: inline-size var(--dur-slow) var(--ease); }
  [dir="rtl"] .progress__bar { background: linear-gradient(270deg, var(--flame-2), var(--brand)); }

  /* ---------- Alerts / toasts ---------- */
  .alert { --alert-bg: var(--info-soft); --alert-fg: var(--info-text); display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--alert-bg); color: var(--text); border-inline-start: 4px solid var(--alert-fg); }
  .alert .icon { color: var(--alert-fg); margin-block-start: 0.125rem; }
  .alert__title { font-weight: 700; }
  .alert--success { --alert-bg: var(--success-soft); --alert-fg: var(--success-text); }
  .alert--warning { --alert-bg: var(--warning-soft); --alert-fg: var(--warning-text); }
  .alert--danger { --alert-bg: var(--danger-soft); --alert-fg: var(--danger-text); }

  .toasts {
    position: fixed;
    z-index: var(--z-toast);
    inset-inline: var(--s-4);
    inset-block-end: calc(var(--nav-h) + var(--safe-bottom) + var(--s-4));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-2);
    pointer-events: none;
  }
  .toast {
    --toast-accent: var(--info);
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: var(--s-3);
    inline-size: min(100%, 26rem);
    padding: var(--s-3) var(--s-3) var(--s-3) var(--s-4);
    padding-inline: var(--s-4) var(--s-2);
    border-radius: var(--r-md);
    background: var(--text);
    color: var(--bg);
    box-shadow: var(--shadow-3);
    font-size: var(--fs-sm);
    font-weight: 550;
    animation: toast-in var(--dur-slow) var(--ease-spring);
  }
  .toast .icon { color: var(--toast-accent); }
  .toast--success { --toast-accent: var(--success); }
  .toast--danger { --toast-accent: var(--danger); }
  .toast--warning { --toast-accent: var(--warning); }
  .toast__msg { flex: 1; min-inline-size: 0; }
  .toast__close { color: inherit; opacity: 0.75; }
  .toast__close:hover { background: rgb(128 128 128 / 0.25); color: inherit; opacity: 1; }
  .toast[data-leaving] { opacity: 0; transform: translateY(0.5rem); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
  @keyframes toast-in { from { opacity: 0; transform: translateY(1rem) scale(0.96); } }
  @media (min-width: 48em) { .toasts { inset-block-end: var(--s-6); } }

  /* ---------- Dialog + bottom sheet ---------- */
  .dialog {
    inline-size: min(calc(100% - 2rem), 28rem);
    max-block-size: min(85dvh, 40rem);
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-3);
    overflow: auto;
    opacity: 0;
    transform: translateY(0.75rem) scale(0.97);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease-spring), overlay var(--dur) allow-discrete, display var(--dur) allow-discrete;
  }
  .dialog[open] { opacity: 1; transform: none; }
  @starting-style { .dialog[open] { opacity: 0; transform: translateY(0.75rem) scale(0.97); } }
  .dialog::backdrop { background: var(--overlay); backdrop-filter: blur(3px); opacity: 0; transition: opacity var(--dur) var(--ease), overlay var(--dur) allow-discrete, display var(--dur) allow-discrete; }
  .dialog[open]::backdrop { opacity: 1; }
  @starting-style { .dialog[open]::backdrop { opacity: 0; } }
  .dialog__body { display: grid; gap: var(--s-3); padding: var(--s-6) var(--s-6) var(--s-4); }
  .dialog__title { font-size: var(--fs-lg); }
  .dialog__text { color: var(--text-muted); }
  .dialog__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s-2); padding: var(--s-2) var(--s-6) var(--s-6); }
  .dialog__actions .btn { flex: 1 1 8rem; }
  body:has(dialog[open]) { overflow: hidden; }

  .dialog--sheet { inline-size: 100%; max-inline-size: 36rem; margin-block-end: 0; margin-inline: auto; border-end-start-radius: 0; border-end-end-radius: 0; padding-block-end: var(--safe-bottom); transform: translateY(100%); }
  .dialog--sheet[open] { transform: none; }
  @starting-style { .dialog--sheet[open] { transform: translateY(100%); } }
  .dialog--sheet::before { content: ""; display: block; inline-size: 2.5rem; block-size: 0.3125rem; margin: var(--s-2) auto 0; border-radius: var(--r-pill); background: var(--border-strong); }
  @media (min-width: 48em) {
    .dialog--sheet { margin-block-end: auto; border-radius: var(--r-xl); transform: translateY(0.75rem) scale(0.97); }
    .dialog--sheet::before { display: none; }
  }

  /* ---------- Skeleton / empty / error ---------- */
  .skeleton { display: block; border-radius: var(--r-sm); background: linear-gradient(90deg, var(--surface-2) 30%, var(--surface-3) 50%, var(--surface-2) 70%); background-size: 300% 100%; animation: shimmer 1.4s ease-in-out infinite; min-block-size: 1em; }
  .skeleton--text { block-size: 0.875rem; }
  .skeleton--title { block-size: 1.5rem; inline-size: 55%; }
  .skeleton--circle { border-radius: 50%; inline-size: 2.5rem; block-size: 2.5rem; }
  @keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
  [dir="rtl"] .skeleton { animation-direction: reverse; }

  .empty { display: grid; justify-items: center; gap: var(--s-3); padding: var(--s-10) var(--s-6); text-align: center; border: 1.5px dashed var(--border-strong); border-radius: var(--r-xl); background: color-mix(in srgb, var(--surface) 60%, transparent); }
  .empty h2 { font-size: var(--fs-lg); }
  .empty p { color: var(--text-muted); max-inline-size: 24rem; }
  .illustration { inline-size: 8.5rem; block-size: auto; margin-block-end: var(--s-2); }

  /* ---------- Pagination ---------- */
  .pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--s-1); list-style: none; padding: 0; }
  .pagination a, .pagination span { display: inline-grid; place-items: center; min-inline-size: var(--tap); min-block-size: var(--tap); padding-inline: var(--s-3); border-radius: var(--r-md); color: var(--text); font-weight: 650; text-decoration: none; font-variant-numeric: tabular-nums; }
  .pagination a:hover { background: var(--surface-2); }
  .pagination [aria-current="page"] { background: var(--text); color: var(--bg); }
  .pagination [aria-disabled="true"] { opacity: 0.4; }

  /* ---------- Tooltip ---------- */
  [data-tooltip] { position: relative; }
  [data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    inset-block-end: calc(100% + 0.5rem);
    inset-inline-start: 50%;
    translate: -50% 0;
    inline-size: max-content;
    max-inline-size: 16rem;
    padding: var(--s-1) var(--s-3);
    border-radius: var(--r-sm);
    background: var(--text);
    color: var(--bg);
    font-size: var(--fs-xs);
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    pointer-events: none;
    opacity: 0;
    transform: translateY(0.25rem);
    transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
    z-index: var(--z-menu);
  }
  [dir="rtl"] [data-tooltip]::after { translate: 50% 0; }
  [data-tooltip]:hover::after, [data-tooltip]:focus-visible::after { opacity: 1; transform: none; }

  /* ---------- Notification bell ---------- */
  .bell__badge { position: absolute; inset-block-start: 0.125rem; inset-inline-end: 0; min-inline-size: 1.25rem; block-size: 1.25rem; padding-inline: 0.25rem; border-radius: var(--r-pill); background: var(--brand); color: var(--on-brand); border: 2px solid var(--bg); font-size: 0.625rem; font-weight: 800; line-height: 0.9rem; text-align: center; font-variant-numeric: tabular-nums; box-sizing: border-box; }

  /* ---------- Language selector ---------- */
  .lang { position: relative; }
  .lang > summary { list-style: none; }
  .lang > summary::-webkit-details-marker { display: none; }
  .lang__summary { display: inline-flex; align-items: center; gap: var(--s-1); min-block-size: var(--tap); padding-inline: var(--s-3); border-radius: var(--r-pill); color: var(--text-muted); font-weight: 700; font-size: var(--fs-sm); transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
  .lang__summary:hover, .lang[open] > .lang__summary { background: var(--surface-2); color: var(--text); }
  .lang[open] > .lang__summary .icon:last-child { transform: rotate(180deg); }
  .lang__summary .icon:last-child { transition: transform var(--dur) var(--ease); }
  .lang__menu { position: absolute; z-index: var(--z-menu); inset-block-start: calc(100% + 0.25rem); inset-inline-end: 0; min-inline-size: 14rem; padding: var(--s-1); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-3); animation: menu-in var(--dur) var(--ease); }
  .lang--footer .lang__menu { inset-block-start: auto; inset-block-end: calc(100% + 0.25rem); inset-inline-end: auto; inset-inline-start: 0; }
  @keyframes menu-in { from { opacity: 0; transform: translateY(-0.25rem) scale(0.98); } }
  .lang__form { display: grid; }
  .lang__option { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-block-size: var(--tap); padding-inline: var(--s-3); border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text); font-weight: 550; text-align: start; }
  .lang__option:hover { background: var(--surface-2); }
  .lang__option[aria-current="true"] { font-weight: 750; color: var(--brand-text); }

  /* Theme switcher: needs JS, so it is hidden until the head script marks <html class="js"> */
  .theme-switcher { display: none; }
  .js .theme-switcher { display: inline-flex; }

  /* ---------- Streak hero ---------- */
  .streak-hero { position: relative; display: grid; justify-items: center; gap: var(--s-1); padding: var(--s-6) var(--s-4) var(--s-5); text-align: center; isolation: isolate; }
  .streak-hero::before { content: ""; position: absolute; inset: 0 10% auto; block-size: 70%; z-index: -1; background: radial-gradient(closest-side, color-mix(in srgb, var(--brand) 22%, transparent), transparent); filter: blur(8px); opacity: 0.9; }
  .streak-hero[data-state="cold"]::before { opacity: 0; }
  .streak-hero__flame { inline-size: clamp(4.5rem, 3rem + 7vw, 6.5rem); aspect-ratio: 64 / 80; filter: drop-shadow(0 6px 18px color-mix(in srgb, var(--brand) 55%, transparent)); transform-origin: 50% 90%; animation: flame-sway 2.6s ease-in-out infinite; }
  .streak-hero__flame svg { inline-size: 100%; block-size: 100%; overflow: visible; }
  .flame__outer { transform-origin: 50% 100%; animation: flame-flicker 1.7s ease-in-out infinite; }
  .flame__mid { transform-origin: 50% 100%; animation: flame-flicker 1.3s ease-in-out infinite 0.2s; }
  .flame__core { transform-origin: 50% 100%; animation: flame-flicker 0.95s ease-in-out infinite 0.1s; }
  .streak-hero__count { display: grid; justify-items: center; margin-block-start: calc(var(--s-2) * -1); line-height: 0.9; }
  .streak-hero__num { padding-inline: 0.04em; font-size: var(--fs-display); font-weight: 900; letter-spacing: -0.06em; font-variant-numeric: tabular-nums; background: linear-gradient(175deg, var(--text) 25%, var(--brand-text) 135%); -webkit-background-clip: text; background-clip: text; color: transparent; animation: pop-in var(--dur-slow) var(--ease-spring) both; }
  .streak-hero__unit { margin-block-start: var(--s-2); font-size: var(--fs-md); font-weight: 700; color: var(--text-muted); letter-spacing: -0.01em; line-height: var(--lh-snug); }
  .streak-hero__state { display: inline-flex; align-items: center; gap: var(--s-2); margin-block-start: var(--s-3); padding: var(--s-1) var(--s-3); border-radius: var(--r-pill); background: var(--brand-soft); color: var(--brand-text); font-size: var(--fs-sm); font-weight: 700; }
  .streak-hero[data-state="active"] .streak-hero__state { background: var(--success-soft); color: var(--success-text); }
  .streak-hero[data-state="cold"] .streak-hero__state { background: var(--surface-3); color: var(--text-muted); }
  .streak-hero[data-state="cold"] .streak-hero__flame { filter: grayscale(1) opacity(0.45); animation: none; }
  .streak-hero[data-state="cold"] .flame__outer, .streak-hero[data-state="cold"] .flame__mid, .streak-hero[data-state="cold"] .flame__core { animation: none; }
  .streak-hero[data-state="cold"] .streak-hero__num { background: none; color: var(--text-subtle); }
  @keyframes flame-sway { 0%, 100% { transform: rotate(-1.5deg) scale(1); } 50% { transform: rotate(1.5deg) scale(1.03); } }
  @keyframes flame-flicker { 0%, 100% { transform: scale(1, 1); } 35% { transform: scale(0.96, 1.05); } 70% { transform: scale(1.03, 0.97); } }
  @keyframes pop-in { from { opacity: 0; transform: scale(0.85) translateY(0.5rem); } }

  /* ---------- 7-day strip ---------- */
  .week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--s-1); list-style: none; padding: 0; }
  .week__day { display: grid; justify-items: center; gap: var(--s-2); text-align: center; }
  .week__name { font-size: var(--fs-xs); font-weight: 650; color: var(--text-muted); text-transform: capitalize; max-inline-size: 100%; overflow: hidden; white-space: nowrap; }
  .week__dot { display: grid; place-items: center; inline-size: min(100%, 2.75rem); aspect-ratio: 1; border-radius: var(--r-pill); border: 2px solid var(--border-strong); color: var(--text-muted); background: transparent; transition: transform var(--dur) var(--ease-spring); }
  .week__dot .icon { inline-size: 55%; block-size: 55%; stroke-width: 2.8; }
  .week__day[data-state="done"] .week__dot { background: linear-gradient(160deg, var(--flame-2), var(--brand)); border-color: var(--brand-edge); color: var(--on-brand); box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--brand) 60%, transparent); }
  .week__day[data-state="window"] .week__dot { border-style: dashed; border-color: var(--warning); color: var(--warning-text); background: var(--warning-soft); }
  .week__day[data-state="failed"] .week__dot { border-color: var(--danger); color: var(--danger-text); background: var(--danger-soft); }
  .week__day[data-state="today"] .week__dot { border-color: var(--brand); color: var(--brand-text); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 22%, transparent); }
  .week__day[data-state="today"] .week__name { color: var(--text); font-weight: 800; }
  .week__day[data-state="future"] .week__dot { border-style: dotted; opacity: 0.6; }

  /* ---------- Stat tile ---------- */
  .stat { display: grid; align-content: start; gap: var(--s-1); padding: var(--s-4); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
  .stat__label { display: flex; align-items: center; gap: var(--s-2); color: var(--text-muted); font-size: var(--fs-sm); font-weight: 600; }
  .stat__label .icon { color: var(--brand-text); }
  .stat__value { font-size: var(--fs-lg); white-space: nowrap; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1.15; }
  .stat__hint { color: var(--text-subtle); font-size: var(--fs-xs); }

  /* ---------- Leaderboard ---------- */
  .lb { list-style: none; padding: 0; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); overflow: clip; }
  .lb-row { display: grid; grid-template-columns: 2rem auto minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); min-block-size: 3.5rem; padding: var(--s-2) var(--s-4); background: var(--surface); }
  .lb-row + .lb-row { border-block-start: 1px solid var(--border); }
  .lb-row__rank { display: grid; place-items: center; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text-muted); }
  .lb-row__rank .icon { color: var(--brand-text); }
  .lb-row[data-podium="1"] .lb-row__rank { color: var(--brand-text); }
  .lb-row__name { display: flex; align-items: center; gap: var(--s-2); font-weight: 650; min-inline-size: 0; }
  .lb-row__value { font-weight: 800; font-variant-numeric: tabular-nums; }
  .lb-row--self { background: var(--brand-soft); box-shadow: inset 3px 0 0 var(--brand); }
  [dir="rtl"] .lb-row--self { box-shadow: inset -3px 0 0 var(--brand); }
  .lb-row--sticky { position: sticky; inset-block-end: 0; z-index: 1; box-shadow: 0 -8px 16px -8px var(--shadow-color), inset 3px 0 0 var(--brand); border-block-start: 1px solid var(--brand); }
  [dir="rtl"] .lb-row--sticky { box-shadow: 0 -8px 16px -8px var(--shadow-color), inset -3px 0 0 var(--brand); }
  .lb-scroll { max-block-size: 20rem; overflow: auto; border-radius: var(--r-lg); }
  .lb-scroll .lb { border-radius: 0; border: 0; overflow: visible; }
}

@layer components {
  .card > .streak-hero { padding-block: var(--s-2); }
}

/* Radio cards (who can see my workouts): a native radio inside a label, so it works without JavaScript. */
@layer components {
  .choice-cards { display: grid; gap: var(--s-2); border: 0; padding: 0; margin: 0; min-inline-size: 0; }
  .choice-card { display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-3) var(--s-4); border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface); cursor: pointer; min-block-size: var(--tap); }
  .choice-card input { inline-size: 1.25rem; block-size: 1.25rem; accent-color: var(--brand); flex: none; margin-block-start: 0.125rem; }
  .choice-card__title { display: block; font-weight: 750; }
  .choice-card__text { display: block; color: var(--text-muted); font-size: var(--fs-sm); }
  .choice-card:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
  .choice-card:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }

  /* Strava brand buttons are used on several pages (log workout, settings, connections): global, so no native button box shows. */
  .strava-connect { appearance: none; -webkit-appearance: none; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; border-radius: var(--r-sm); line-height: 0; box-shadow: none; }
  .strava-connect:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
  .strava-connect img { display: block; height: 48px; inline-size: auto; max-inline-size: 100%; }
  .strava-attribution { margin: 0; line-height: 0; }
  .strava-attribution img { display: block; block-size: 24px; inline-size: auto; max-inline-size: 100%; overflow: visible; }

  /* Share profile: a button; the block opens right below it with room between them. */
  .share-profile { margin-block: var(--s-4); }
  .share-profile__toggle { list-style: none; cursor: pointer; display: inline-flex; }
  .share-profile__toggle::-webkit-details-marker { display: none; }
  .share-profile[open] > .share-profile__body { margin-block-start: var(--s-4); }
  /* Spacing: an action button above a list, and an info note above a drop zone, never touch what follows. */
  .page-actions { margin-block: var(--s-4) var(--s-6); }
}