/* Brotein: the one stylesheet for every page.

   Type: Archivo (display, wide) and Geist (UI). Shapes: pill buttons, 16px
   cards, 10px inputs. One accent at a time (lime, orange, cobalt, pink or a
   Premium custom colour, chosen in Settings) over a warm light or cool dark
   surface. Shadows are tinted to
   the background, never plain black. No gradients on text, no glass.

   appearance.js sets data-theme and data-accent on <html> before paint. */

:root {
    --font-display: "Archivo", "Geist", system-ui, sans-serif;
    --font-ui: "Geist", system-ui, -apple-system, sans-serif;
    --r-card: 16px;
    --r-input: 10px;
    --r-pill: 999px;
    --nav-h: 68px;
    --wrap: 1280px;
    --rail-w: 232px;

    /* light */
    --bg: #f3f3ef;
    --bg-2: #e8e8e2;
    --surface: #fbfbf9;
    --surface-2: #ffffff;
    --ink: #15161a;
    --ink-2: #4b4d54;
    --ink-3: #777a83;
    --line: #dcdcd6;
    --line-2: #cfcfc8;
    --shadow: 0 18px 44px rgba(21, 22, 26, 0.10), 0 2px 6px rgba(21, 22, 26, 0.05);
    --shadow-lg: 0 40px 90px rgba(21, 22, 26, 0.16);
    --logo-filter: invert(1);
    --ok: #2f8a4b;
    --ok-soft: #dcefe1;
    --bad: #c93b3b;
    --bad-soft: #f7dcdc;
    --warn: #b7791f;

    /* accent: orange (the default; appearance.js leaves data-accent off for it) */
    --accent: #ea7a3a;
    --accent-strong: #d96a2b;
    --accent-ink: #2d1407;
    --accent-text: #a2460f;
    --accent-soft: #f8dcc8;
}

[data-accent="orange"] {
    --accent: #ea7a3a; --accent-strong: #d96a2b; --accent-ink: #2d1407; --accent-text: #a2460f; --accent-soft: #f8dcc8;
}
[data-accent="lime"] {
    --accent: #b7d83a; --accent-strong: #a3c52c; --accent-ink: #1d2a05; --accent-text: #4f6e08; --accent-soft: #e6f2bd;
}
[data-accent="cobalt"] {
    --accent: #3b74f0; --accent-strong: #2c63de; --accent-ink: #0b173a; --accent-text: #1f55cc; --accent-soft: #d6e2fc;
}
[data-accent="pink"] {
    --accent: #fd4e7a; --accent-strong: #e43c68; --accent-ink: #3a0717; --accent-text: #be123c; --accent-soft: #fbd0dc;
}

/* Dark mode sets the orange accent with a stronger selector than
   [data-accent=...], so every accent restates --accent, --accent-strong and
   --accent-ink for dark below, not only its text and soft colours. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --bg: #000000; --bg-2: #0d0d0d; --surface: #121212; --surface-2: #1a1a1a;
        --ink: #ffffff; --ink-2: #b5b5b5; --ink-3: #8a8a8a; --line: #232323; --line-2: #2e2e2e;
        --shadow: 0 18px 40px rgba(0, 0, 0, 0.7), 0 2px 6px rgba(0, 0, 0, 0.5);
        --shadow-lg: 0 40px 90px rgba(0, 0, 0, 0.8);
        --logo-filter: none;
        --ok: #7fd39a; --ok-soft: rgba(127, 211, 154, 0.14); --bad: #ff7b7b; --bad-soft: rgba(255, 123, 123, 0.14); --warn: #f0be78;
        /* orange, brighter on black */
        --accent: #ff7a1a; --accent-strong: #ec6a0c; --accent-ink: #160800; --accent-text: #ff9a52; --accent-soft: rgba(255, 122, 26, 0.16);
    }
    :root:not([data-theme="light"])[data-accent="lime"] { --accent: #b7d83a; --accent-strong: #a3c52c; --accent-ink: #1d2a05; --accent-text: #b7d83a; --accent-soft: rgba(183, 216, 58, 0.14); }
    :root:not([data-theme="light"])[data-accent="cobalt"] { --accent: #3b74f0; --accent-strong: #2c63de; --accent-ink: #0b173a; --accent-text: #7ea6ff; --accent-soft: rgba(59, 116, 240, 0.18); }
    :root:not([data-theme="light"])[data-accent="pink"] { --accent: #fd4e7a; --accent-strong: #e43c68; --accent-ink: #3a0717; --accent-text: #ff8ba8; --accent-soft: rgba(253, 78, 122, 0.16); }
    /* Cards are outlined, not floating, and so are the phone's dock and its Tools menu. */
    :root:not([data-theme="light"]) .panel, :root:not([data-theme="light"]) .card, :root:not([data-theme="light"]) .card-lg, :root:not([data-theme="light"]) .tier { border: 1px solid var(--line); box-shadow: none; }
    :root:not([data-theme="light"]) .tabbar, :root:not([data-theme="light"]) .tools-card { box-shadow: none; }
    :root:not([data-theme="light"]) .tools-pop::before { background: rgba(0, 0, 0, 0.66); }
}
:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #000000; --bg-2: #0d0d0d; --surface: #121212; --surface-2: #1a1a1a;
    --ink: #ffffff; --ink-2: #b5b5b5; --ink-3: #8a8a8a; --line: #232323; --line-2: #2e2e2e;
    --shadow: 0 18px 40px rgba(0, 0, 0, 0.7), 0 2px 6px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 40px 90px rgba(0, 0, 0, 0.8);
    --logo-filter: none;
    --ok: #7fd39a; --ok-soft: rgba(127, 211, 154, 0.14); --bad: #ff7b7b; --bad-soft: rgba(255, 123, 123, 0.14); --warn: #f0be78;
    /* orange, brighter on black */
    --accent: #ff7a1a; --accent-strong: #ec6a0c; --accent-ink: #160800; --accent-text: #ff9a52; --accent-soft: rgba(255, 122, 26, 0.16);
}
:root[data-theme="dark"][data-accent="lime"] { --accent: #b7d83a; --accent-strong: #a3c52c; --accent-ink: #1d2a05; --accent-text: #b7d83a; --accent-soft: rgba(183, 216, 58, 0.14); }
:root[data-theme="dark"][data-accent="cobalt"] { --accent: #3b74f0; --accent-strong: #2c63de; --accent-ink: #0b173a; --accent-text: #7ea6ff; --accent-soft: rgba(59, 116, 240, 0.18); }
:root[data-theme="dark"][data-accent="pink"] { --accent: #fd4e7a; --accent-strong: #e43c68; --accent-ink: #3a0717; --accent-text: #ff8ba8; --accent-soft: rgba(253, 78, 122, 0.16); }
:root[data-theme="dark"] .panel, :root[data-theme="dark"] .card, :root[data-theme="dark"] .card-lg, :root[data-theme="dark"] .tier { border: 1px solid var(--line); box-shadow: none; }
:root[data-theme="dark"] .tabbar, :root[data-theme="dark"] .tools-card { box-shadow: none; }
:root[data-theme="dark"] .tools-pop::before { background: rgba(0, 0, 0, 0.66); }

/* Older scripts still write these names into inline styles. They resolve to
   the new tokens so nothing they draw falls out of the palette. */
:root {
    --text: var(--ink); --muted: var(--ink-2); --dim: var(--ink-3);
    --line-soft: var(--line); --panel: var(--surface); --panel-solid: var(--surface-2); --black: var(--bg);
    --violet: var(--accent-text); --violet-soft: var(--accent-text); --pink: var(--accent-text); --cream: var(--accent);
    --grad: var(--accent); --grad-tile: var(--accent);
}

/* ==========================================================================
   base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); scrollbar-width: thin; scrollbar-color: var(--line-2) var(--bg); }
html::-webkit-scrollbar { width: 10px; }
html::-webkit-scrollbar-track { background: var(--bg); }
html::-webkit-scrollbar-thumb { background: var(--line-2); border: 2px solid var(--bg); border-radius: var(--r-pill); }
html::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }
body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: 12px; top: -48px; padding: 10px 14px; background: var(--ink); color: var(--bg); border-radius: var(--r-pill); z-index: 100; }
.skip:focus { top: 12px; }
.hide { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

/* Signed-out visitors see one set of links, members another (gate.js sets the class). */
html.is-guest .member-only, html.is-member .guest-only { display: none !important; }

/* ==========================================================================
   type
   ========================================================================== */

.display, .h1 { font-family: var(--font-display); font-stretch: 112%; font-weight: 800; letter-spacing: -0.035em; line-height: 0.96; text-wrap: balance; margin: 0; }
h1.display, .h1 { font-size: clamp(2.4rem, 5vw, 4rem); }
h2.display { font-size: clamp(1.9rem, 3.6vw, 2.8rem); margin: 0 0 14px; }
h3, .h2 { font-family: var(--font-display); font-stretch: 105%; font-weight: 700; letter-spacing: -0.02em; font-size: 1.25rem; margin: 0 0 6px; }
.lead { font-size: 1.1rem; line-height: 1.6; color: var(--ink-2); max-width: 52ch; margin: 16px 0 0; text-wrap: pretty; }
.center .lead { margin-left: auto; margin-right: auto; }
.sub { font-size: 0.92rem; color: var(--ink-3); margin: 0; }
.num { font-variant-numeric: tabular-nums; }
.measure { max-width: 62ch; }
.muted { color: var(--ink-2); }
.center { text-align: center; }
/* Gone from the design; still in a few scripts. */
.eyebrow { display: none; }
.grad { background: none; -webkit-background-clip: initial; background-clip: initial; color: inherit; }

/* ==========================================================================
   buttons: pills, solid, pressable. Hover darkens or lifts; it never fades.
   ========================================================================== */

.btn, .pill, .quiz-btn, .generate-button, .mini-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    height: 46px; padding: 0 22px; border-radius: var(--r-pill); border: 1.5px solid transparent;
    background: var(--ink); color: var(--bg); font-weight: 600; font-size: 0.95rem; white-space: nowrap; cursor: pointer;
    text-decoration: none;
    transition: transform 0.15s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.btn:hover, .pill:hover, .quiz-btn:hover, .generate-button:hover, .mini-btn:hover { transform: translateY(-1px); }
.btn:active, .pill:active, .quiz-btn:active { transform: translateY(0) scale(0.98); }
.btn.accent, .pill.solid, .quiz-btn.primary { background: var(--accent); color: var(--accent-ink); }
.btn.accent:hover, .pill.solid:hover, .quiz-btn.primary:hover { background: var(--accent-strong); }
.btn.quiet, .btn.edge, .pill.edge, .quiz-btn.ghost, .mini-btn { background: transparent; border-color: var(--line-2); color: var(--ink); }
.btn.quiet:hover, .btn.edge:hover, .pill.edge:hover, .quiz-btn.ghost:hover, .mini-btn:hover { border-color: var(--ink); }
.btn.white, .generate-button { background: var(--ink); color: var(--bg); }
.btn.danger, .quiz-btn.danger, .mini-btn.danger { background: transparent; border-color: var(--bad); color: var(--bad); }
.btn.danger:hover, .quiz-btn.danger:hover, .mini-btn.danger:hover { background: var(--bad); color: #fff; }
.btn.sm, .pill.sm, .mini-btn { height: 38px; padding: 0 16px; font-size: 0.86rem; }
.btn.xs { height: 32px; padding: 0 12px; font-size: 0.8rem; gap: 6px; }
.btn.wide { width: 100%; }
.btn i, .pill i { font-size: 1.15em; }
.btn svg, .pill svg, .quiz-btn svg { width: 15px; height: 15px; fill: currentColor; flex: none; }
.btn svg.arr, .pill svg.arr { fill: none; stroke: currentColor; stroke-width: 2; }
.btn[disabled], .btn.is-disabled, .pill[disabled], .quiz-btn[disabled], .mini-btn[disabled] { opacity: 0.4; pointer-events: none; }

/* a quiet text button */
.link { padding: 0; border: 0; background: none; color: var(--accent-text); font: inherit; font-weight: 600; cursor: pointer; }
.link:hover { text-decoration: underline; }

/* ==========================================================================
   surfaces and layout
   ========================================================================== */

.panel, .card, .card-lg, .tier { background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow); }
.card { padding: 22px; }
.card-lg { padding: 30px; }
.card.pad { padding: 22px; }
.card.flat, .panel.flat { box-shadow: none; background: var(--bg-2); }
.panel.raised, .card.raised { box-shadow: var(--shadow-lg); }
.card h3, .card-lg h3, .card .h2, .card-lg .h2 { margin: 0 0 4px; }
.card > .sub, .card-lg > .sub, .card-head .sub { margin-bottom: 16px; }

.wrap, .wrapw, .page-shell { width: min(var(--wrap), calc(100% - 48px)); margin: 0 auto; }
.wrapm { width: min(1060px, calc(100% - 48px)); margin: 0 auto; }
.wraps { width: min(760px, calc(100% - 48px)); margin: 0 auto; }
.pad { padding: 32px 0 110px; }
.section { padding: 96px 0; }
.section + .section { padding-top: 0; }
.stack > * + * { margin-top: 16px; }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.between { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
.g2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.g3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.g4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }

/* page head on member pages: title left, actions right */
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 24px; }
.page-head h1 { font-family: var(--font-display); font-stretch: 108%; font-weight: 800; letter-spacing: -0.03em; font-size: clamp(1.7rem, 3vw, 2.2rem); margin: 0; line-height: 1; }
.page-head .sub { margin-top: 6px; }
.page-head .acts { display: flex; gap: 10px; flex-wrap: wrap; }

/* ==========================================================================
   public header and footer
   ========================================================================== */

.nav { position: relative; height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.nav .logo img, .rail .logo img, .foot .logo img { height: 24px; filter: var(--logo-filter); }
.nav .logo img { display: block; width: auto; height: 38px; max-width: 100%; object-fit: contain; }
/* Centred on the bar itself, so the links sit in the middle of the page
   however wide the logo and the buttons either side are. */
.nav .links { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 28px; font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.nav .links a:hover { color: var(--ink); }
.nav .links a[aria-current="page"] { color: var(--ink); }
.nav .acts { display: flex; align-items: center; gap: 10px; }
@media (max-width: 1040px) { .nav .links { display: none; } }
/* On a phone the logo and both buttons have to share one row. */
@media (max-width: 480px) {
    .nav { gap: 12px; }
    .nav .logo img { height: 36px; max-width: min(34vw, 112px); }
    .nav .acts { gap: 8px; }
    .nav .acts .btn.sm { padding: 0 12px; }
}

.foot { border-top: 1px solid var(--line); margin-top: 96px; padding: 36px 0 44px; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; color: var(--ink-3); font-size: 0.9rem; }
.foot .logo img { height: 20px; }
.foot nav { display: flex; gap: 22px; flex-wrap: wrap; }
.foot nav a:hover { color: var(--ink); }
.pad .foot { margin-top: 72px; }

/* A segmented choice, not a sun and moon. Also used in Settings. */
.theme-seg { display: inline-flex; padding: 3px; border-radius: var(--r-pill); background: var(--bg-2); }
.theme-seg button { height: 32px; padding: 0 14px; border: 0; border-radius: var(--r-pill); background: none; color: var(--ink-2); font-size: 0.82rem; font-weight: 500; cursor: pointer; }
.theme-seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }

/* ==========================================================================
   home page sections
   ========================================================================== */

@media (max-width: 900px) {
    h1.display { font-size: clamp(2.4rem, 11vw, 3.2rem); }
}
.rise { animation: rise 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: calc(var(--i, 0) * 90ms); }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }

.quote { max-width: 30ch; margin: 0; font-family: var(--font-display); font-stretch: 105%; font-weight: 700; font-size: clamp(1.6rem, 3vw, 2.4rem); letter-spacing: -0.025em; line-height: 1.15; }

.pricing { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-top: 36px; }
.tier { padding: 30px; display: flex; flex-direction: column; position: relative; }
.tier.rec { background: var(--accent); color: var(--accent-ink); }
.tier .price { font-family: var(--font-display); font-stretch: 110%; font-weight: 800; font-size: 3rem; letter-spacing: -0.04em; line-height: 1; margin: 18px 0 4px; }
.tier .price small { font-family: var(--font-ui); font-stretch: normal; font-weight: 500; font-size: 0.95rem; letter-spacing: 0; margin-left: 6px; }
.tier ul { list-style: none; margin: 22px 0 28px; padding: 0; display: grid; gap: 10px; }
.tier li { display: flex; gap: 10px; align-items: flex-start; }
.tier li i { margin-top: 3px; color: var(--accent-text); }
.tier.rec li i { color: var(--accent-ink); }
.tier.rec .sub { color: inherit; opacity: 0.75; }
.tier .btn { margin-top: auto; align-self: flex-start; }
.tier.rec .btn { background: var(--accent-ink); color: var(--accent); }
.tier.rec .btn:hover { background: #000; }
.tier .btn.is-current { background: transparent; border-color: currentColor; color: inherit; opacity: 0.7; pointer-events: none; }
@media (max-width: 760px) { .pricing { grid-template-columns: 1fr; } }

/* ==========================================================================
   forms
   ========================================================================== */

.fld, .field { display: grid; gap: 7px; }
.field { margin-bottom: 14px; }
.fld > label, .field > label, .lbl { font-size: 0.82rem; font-weight: 600; color: var(--ink-2); }
.fields { display: grid; gap: 14px; }
.fields.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fields.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.inp, .field input, .field select, .field textarea {
    width: 100%; height: 46px; padding: 0 14px; border-radius: var(--r-input); border: 1.5px solid var(--line-2);
    background: var(--surface-2); color: var(--ink); font: inherit; font-size: 0.95rem; outline: none;
}
/* iPhone zooms the page into any field under 16px and stays zoomed. */
@media (pointer: coarse) { .inp, .field input, .field select, .field textarea { font-size: 16px; } }
.inp::placeholder, .field input::placeholder, .field textarea::placeholder { color: var(--ink-3); }
.inp:focus, .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent-strong); box-shadow: 0 0 0 3px var(--accent-soft); }
textarea.inp, .field textarea { height: auto; min-height: 110px; padding: 12px 14px; resize: vertical; }
select.inp, .field select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 40px;
    background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
    background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.inp:-webkit-autofill { -webkit-text-fill-color: var(--ink); -webkit-box-shadow: 0 0 0 40px var(--surface-2) inset; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent-strong); }

/* one control made of several choices */
.seg, .tab-row, .toggle { display: flex; padding: 4px; border-radius: var(--r-input); background: var(--bg-2); }
.seg > *, .tab-row > *, .toggle > * { flex: 1; height: 40px; padding: 0 10px; border: 0; border-radius: 7px; background: none; color: var(--ink-2);
           font: inherit; font-size: 0.88rem; font-weight: 500; text-align: center; cursor: pointer; }
.seg > .on, .tab-row > .active, .toggle > .is-active { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: var(--shadow); }

.pickrow, .chip-row, .gym-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.pick, .filter-chip, .gym-filter-chip { height: 38px; padding: 0 15px; border-radius: var(--r-pill); border: 1.5px solid var(--line-2); background: transparent;
        color: var(--ink-2); font: inherit; font-size: 0.86rem; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; }
.pick:hover, .filter-chip:hover, .gym-filter-chip:hover { border-color: var(--ink); color: var(--ink); }
.pick.on, .filter-chip.is-on, .gym-filter-chip.is-active { background: var(--ink); border-color: var(--ink); color: var(--bg); font-weight: 600; }

/* A choice drawn as a small card: a bold line and a note. */
.tile, .quiz-option, .plan-card { display: block; width: 100%; padding: 16px 18px; border-radius: 12px; border: 1.5px solid var(--line-2); background: var(--surface-2);
        color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease; }
.tile:hover, .quiz-option:hover, .plan-option input:not(:checked) + .plan-card:hover { border-color: var(--ink); }
.tile.on, .quiz-option.is-selected, .plan-option input:checked + .plan-card { border-color: var(--accent-strong); background: var(--accent-soft); }
.tile b { display: block; font-size: 1rem; font-weight: 600; }
.tile > span { display: block; margin-top: 3px; font-size: 0.84rem; color: var(--ink-2); }
.tile:active { transform: scale(0.99); }

.consent { display: flex; gap: 12px; align-items: flex-start; font-size: 0.86rem; line-height: 1.55; color: var(--ink-2); cursor: pointer; }
.consent input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; }
.consent a { color: var(--accent-text); text-decoration: underline; }

/* ==========================================================================
   small pieces
   ========================================================================== */

.kpi b { display: block; font-family: var(--font-display); font-stretch: 108%; font-size: 2rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1.05; }
.kpi span { display: block; margin-top: 4px; font-size: 0.8rem; color: var(--ink-3); }
.bignum { font-family: var(--font-display); font-stretch: 110%; font-size: clamp(3.2rem, 8vw, 5.4rem); font-weight: 800; letter-spacing: -0.05em; line-height: 0.95; }
.stat b { display: block; font-family: var(--font-display); font-stretch: 108%; font-size: 1.8rem; font-weight: 800; letter-spacing: -0.035em; line-height: 1.05; }
.stat span { display: block; margin-top: 3px; font-size: 0.78rem; color: var(--ink-3); }

.tag, .chip, .package-tag, .tag-pill, .day-tag { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px; border-radius: var(--r-pill);
       border: 1.5px solid var(--line-2); font-size: 0.74rem; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.tag.good { border-color: transparent; background: var(--ok-soft); color: var(--ok); }
.tag.warn { border-color: transparent; color: var(--warn); }
.tag.bad { border-color: transparent; background: var(--bad-soft); color: var(--bad); }
.tag.violet, .chip.level, .tag-pill.admin { border-color: transparent; background: var(--accent-soft); color: var(--accent-text); }
.tag.grad, .chip.premium, .package-tag.premium, .tag-pill.premium, .day-tag { border-color: transparent; background: var(--accent); color: var(--accent-ink); }

.status, .plan-status, .auth-status, .gym-status { margin: 10px 0 0; min-height: 20px; font-size: 0.88rem; color: var(--ink-2); }
.status.ok, .status.success, .plan-status.success, .auth-status.success { color: var(--ok); }
.status.bad, .status.error, .plan-status.error, .auth-status.error, .gym-status.error { color: var(--bad); }

.list > * { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 13px 2px; border-bottom: 1px solid var(--line); font-size: 0.92rem; }
.list > *:last-child { border-bottom: 0; }
.list .m { color: var(--ink-3); font-size: 0.82rem; }
.list .v { color: var(--accent-text); font-weight: 600; white-space: nowrap; }

.tbl { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.tbl th { padding: 12px 14px; text-align: left; font-size: 0.78rem; font-weight: 600; color: var(--ink-3); border-bottom: 1px solid var(--line); }
.tbl td { padding: 14px; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.tbl td:first-child { color: var(--ink); font-weight: 500; }
.tbl tr:last-child td { border-bottom: 0; }

/* faces: initials on a tinted square, or a picture */
.av, .avatar { width: 40px; height: 40px; border-radius: 12px; display: inline-grid; place-items: center; flex: none; overflow: hidden;
      font-size: 0.82rem; font-weight: 700; color: var(--accent-ink); background: var(--accent); }
.av img, .avatar img { width: 100%; height: 100%; object-fit: cover; }
a.av:hover { filter: brightness(0.95); }

.xp-track, .tally-track { height: 8px; border-radius: var(--r-pill); background: var(--bg-2); overflow: hidden; }
.xp-fill { height: 100%; width: 100%; border-radius: var(--r-pill); background: var(--accent); clip-path: inset(0 calc(100% - var(--xp, 0%)) 0 0 round 999px); transition: clip-path 0.5s cubic-bezier(0.2, 0.8, 0.3, 1); }
.tally-fill { height: 100%; width: 0; border-radius: var(--r-pill); background: var(--accent); transition: width 0.6s ease; }

.spark { display: flex; align-items: flex-end; gap: 6px; height: 120px; }
.spark i { flex: 1; min-height: 3px; border-radius: 6px 6px 2px 2px; background: var(--accent); }
.spark i.dim { background: var(--bg-2); }
.ring-num { position: relative; width: 190px; height: 190px; margin: 0 auto; }
.ring-num svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-num .in { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }

.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.week > i { aspect-ratio: 1; min-width: 0; border-radius: 10px; background: var(--bg-2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; font-style: normal; font-size: 0.78rem; font-weight: 500; color: var(--ink-3); }
.week-workout { max-width: 100%; overflow: hidden; color: var(--ink-3); font-size: 0.65rem; font-weight: 400; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
.week > i.on { background: var(--ink); color: var(--bg); }
.week > i.missed { outline: 2px solid var(--bad); outline-offset: -2px; }
.week > i.today { outline: 2px solid var(--accent); outline-offset: -2px; }
.week-status { display: grid; place-items: center; line-height: 1; }
.week-status i { font-size: 1rem; }
.week > i.on .week-status { color: var(--ok); }
.week > i.rest .week-status { color: var(--ink-3); }
.week > i.missed .week-status { color: var(--bad); }
.week > i.scheduled .week-status { color: var(--ink-3); }

.bars { display: flex; align-items: flex-end; gap: 9px; height: 110px; }
.bars i { flex: 1; border-radius: 7px 7px 3px 3px; background: var(--accent); }
.bars i.ghost { background: var(--bg-2); }
.bar-cols { display: flex; align-items: flex-end; justify-content: space-between; gap: 9px; height: 120px; }
.bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; justify-content: flex-end; }
.bar-col i { width: 100%; border-radius: 7px 7px 3px 3px; background: var(--accent); min-height: 3px; }
.bar-col i.ghost { background: var(--bg-2); }
.bar-col span { font-size: 0.7rem; color: var(--ink-3); }
.legend { display: flex; gap: 18px; margin-top: 14px; font-size: 0.78rem; color: var(--ink-2); flex-wrap: wrap; }
.legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-right: 7px; }
.legend i.g { background: var(--bg-2); }

.empty { text-align: center; padding: 8px 0 4px; }
.empty p { margin: 0 0 16px; font-size: 0.92rem; color: var(--ink-2); }
.empty-card { padding: 24px; border-radius: var(--r-card); border: 1.5px dashed var(--line-2); }
.empty-card b { display: block; font-size: 1rem; }
.empty-card p { margin: 5px 0 0; font-size: 0.9rem; line-height: 1.55; color: var(--ink-2); }

/* the three most recent achievements, on the profile and the public profile */
.ach-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ach { padding: 16px 12px 14px; border-radius: 12px; background: var(--bg-2); text-align: center; }
.ach .ic, .ach .ach-icon { display: grid; place-items: center; width: 44px; height: 44px; margin: 0 auto 10px; border-radius: 12px; background: var(--accent); color: var(--accent-ink); font-size: 1.15rem; }
.ach b { display: block; font-size: 0.84rem; font-weight: 600; }
.ach span { display: block; margin-top: 4px; font-size: 0.72rem; color: var(--ink-3); }
.seeall { display: block; margin-top: 14px; text-align: center; font-size: 0.84rem; font-weight: 600; color: var(--accent-text); }
.seeall:hover { text-decoration: underline; }

/* ==========================================================================
   the app shell: rail on the left, the page on the right
   ========================================================================== */

.shell { display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); min-height: 100dvh; }
.rail { position: sticky; top: 0; height: 100dvh; padding: 22px 16px; display: flex; flex-direction: column; gap: 3px; border-right: 1px solid var(--line); overflow-y: auto; background: var(--bg); scrollbar-width: thin; scrollbar-color: var(--line-2) var(--bg); }
.rail::-webkit-scrollbar { width: 8px; }
.rail::-webkit-scrollbar-track { background: var(--bg); }
.rail::-webkit-scrollbar-thumb { background: var(--line-2); border: 2px solid var(--bg); border-radius: var(--r-pill); }
.rail::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }
.rail .logo { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 14px 28px; }
.rail .logo img { height: 32px; }
.rail a, .rail button.item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border-radius: 12px; border: 0; background: none; color: var(--ink-2); font-weight: 500; font-size: 0.93rem; text-align: left; cursor: pointer; white-space: nowrap; }
.rail .rail-cap { margin: 14px 12px 4px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.rail .logo + .rail-cap { margin-top: 0; }
/* The XP shop is reached from the profile on a desktop; it is listed only in the phone menu. */
.rail a.phone-only, .rail .rail-copyright { display: none; }
.xp .xp-shop { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 0.82rem; font-weight: 600; color: var(--ink-2); }
.xp .xp-shop:hover { color: var(--ink); }
.rail a:hover, .rail button.item:hover { background: var(--bg-2); color: var(--ink); }
.rail a.on { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.rail a.on .badge { background: var(--accent-ink); color: var(--accent); }
.rail i { font-size: 1.2rem; width: 22px; text-align: center; flex: none; }
.rail .sep { height: 1px; background: var(--line); margin: 10px 8px; }
.rail .grow { flex: 1; }
.rail .badge, .rail .tag { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; border: 0; background: var(--accent); color: var(--accent-ink); font-size: 0.72rem; font-weight: 700; display: grid; place-items: center; }
.main { padding: 26px 32px 120px; min-width: 0; }
.main.narrow { max-width: 900px; }
.main.mid { max-width: 1140px; }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 24px; }
.topbar h1 { font-family: var(--font-display); font-stretch: 108%; font-weight: 800; letter-spacing: -0.03em; font-size: clamp(1.7rem, 3vw, 2.2rem); margin: 0; line-height: 1; }
.topbar .sub, .topbar .today { margin: 6px 0 0; font-size: 0.9rem; color: var(--ink-3); }
.topbar .right { display: flex; align-items: center; gap: 10px; }
.avatar.me { width: 44px; height: 44px; font-size: 0.85rem; }
/* Phones and tablets: the rail goes away and a floating dock sits under the thumb: a solid pill
   12px in from each side and just above the home indicator, with Today the one solid accent circle
   in the middle. The page you are on wears a soft accent pill with its name; the other tabs are
   icons. The page runs on under the dock to the bottom edge of the screen.
   The tabs are stamped with the rail (tools/stamp-shared.py); rail.js marks the current one.
   --tabbar-h is the room the dock takes above the safe area, so every page that keeps
   calc(var(--tabbar-h) + env(safe-area-inset-bottom)) free still clears it. */
:root {
    --dock-h: 66px;
    --dock-gap: max(12px, calc(env(safe-area-inset-bottom) - 12px));
    --tabbar-h: calc(var(--dock-h) + var(--dock-gap) - env(safe-area-inset-bottom));
}
.tabbar, .tools-pop, .sheet-handle, .sheet-top { display: none; }
@font-face { font-family: "Phosphor-Fill"; src: url("https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.1/src/fill/Phosphor-Fill.woff2") format("woff2"); font-weight: normal; font-style: normal; font-display: swap; }
@media (max-width: 1080px) {
    .shell { grid-template-columns: minmax(0, 1fr); }
    .rail { display: none; }
    .main { order: 1; padding: 20px 18px calc(var(--tabbar-h) + 46px + env(safe-area-inset-bottom)); }
    /* The dock: two tabs on each side of Today. Both sides are always equal, so Today sits in
       the middle and no tab leaves the dock; a picked name too long for its half shows as an
       icon only (.is-tight below). Light mode lifts the dock a little;
       dark mode is outlined only (the theme rules at the top take the shadow off). */
    .tabbar { position: fixed; left: 12px; right: 12px; bottom: var(--dock-gap); z-index: 40; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; max-width: 420px; height: var(--dock-h); margin: 0 auto; padding: 0 4px; border: 1px solid var(--line-2); border-radius: var(--r-pill); background: var(--surface-2); box-shadow: 0 10px 28px rgba(21, 22, 26, 0.12), 0 1px 3px rgba(21, 22, 26, 0.06); }
    .tabbar-side { display: flex; align-items: center; justify-content: space-evenly; min-width: 0; height: 100%; }
    .tabbar-side > a, .tabbar-side > button { position: relative; display: inline-flex; flex: none; align-items: center; justify-content: center; gap: 6px; min-width: 44px; height: 48px; padding: 0; border: 0; border-radius: var(--r-pill); background: none; color: var(--ink-2); font-family: var(--font-ui); font-size: 0.82rem; font-weight: 600; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; }
    .tabbar-side i { font-size: 1.55rem; }
    .tabbar-side .ico { --ico-accent: var(--ink-3); --ico-dark: var(--surface-2); }
    .tabbar-side [data-tab="home"] .ico { --ico-accent: var(--ink-2); }
    .tabbar-side > a:active, .tabbar-side > button:active { background: color-mix(in srgb, var(--ink) 7%, transparent); }
    /* Every tab's name is read out; only the picked tab shows it. */
    .tabbar-side span:not(.badge), .tabbar a.is-today > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    /* Where you are: a soft accent pill with the page's name. While Tools is open it is
       the only tab picked, so the page's own tab steps back (dimmed) until it closes. */
    .tabbar-side > .is-open, .tabbar:not(.menu-open) .tabbar-side > .on { padding: 0 13px 0 10px; background: var(--accent-soft); color: var(--accent-text); }
    .tabbar-side > .is-open > span, .tabbar:not(.menu-open) .tabbar-side > .on > span:not(.badge) { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
    .tabbar-side > .is-open .ico, .tabbar:not(.menu-open) .tabbar-side > .on .ico { --ico-accent: var(--accent); }
    .tabbar-side > .is-open i.ph, .tabbar:not(.menu-open) .tabbar-side > .on i.ph { font-family: "Phosphor-Fill" !important; }
    .tabbar.menu-open .tabbar-side > .on:not(.is-open) { color: var(--ink-3); }
    .tabbar.menu-open .tabbar-side > .on:not(.is-open) .ico { --ico-accent: var(--ink-3); }
    /* A picked name too long for its half of the dock (rail.js marks it tight): the pill
       keeps its colour but shows only the icon, and the name is still read out. */
    .tabbar.is-tight .tabbar-side > .is-open, .tabbar.is-tight:not(.menu-open) .tabbar-side > .on { padding: 0 11.5px; }
    .tabbar.is-tight .tabbar-side > .is-open > span, .tabbar.is-tight:not(.menu-open) .tabbar-side > .on > span:not(.badge) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    /* The unread count, on the icon's corner, ringed in the dock's colour (or the pill's). */
    .tabbar-side .badge { position: absolute; top: 3.5px; left: calc(50% + 4.5px); min-width: 19px; height: 19px; padding: 0 4px; border-radius: var(--r-pill); background: var(--accent); box-shadow: 0 0 0 2.5px var(--surface-2); color: var(--accent-ink); font-size: 0.68rem; font-weight: 700; line-height: 19px; text-align: center; font-variant-numeric: tabular-nums; }
    .tabbar:not(.menu-open) .tabbar-side > .on .badge { top: 5.5px; left: 26.5px; box-shadow: 0 0 0 2.5px var(--accent-soft), 0 0 0 2.5px var(--surface-2); }
    .tabbar:not(.menu-open) .tabbar-side > .on:has(.badge) { gap: 13px; }
    /* Today: the one solid accent circle, in the middle of the dock. */
    .tabbar a.is-today { position: relative; display: grid; place-items: center; width: 56px; height: 56px; margin: 0 2px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); text-decoration: none; -webkit-tap-highlight-color: transparent; }
    .tabbar a.is-today i { font-size: 1.85rem; }
    .tabbar a.is-today .ico { --ico-dark: var(--accent); }
    .tabbar a.is-today.on, .tabbar a.is-today:active { background: var(--accent-strong); }
    /* The Tools menu: a panel that grows up out of the dock over the dimmed page. Closed it
       stays laid out but invisible, so it can move: it rises and unfolds from the dock's edge,
       and folds back a little quicker on close. The dock stays above the dim. */
    .tools-pop { position: fixed; inset: 0; z-index: 39; display: flex; align-items: flex-end; justify-content: center; padding: calc(12px + env(safe-area-inset-top)) 12px calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 8px); visibility: hidden; pointer-events: none; transition: visibility 0s linear 200ms; }
    .tools-pop::before { content: ""; position: absolute; inset: 0; background: rgba(21, 22, 26, 0.36); opacity: 0; transition: opacity 200ms ease; }
    .tools-card { position: relative; z-index: 1; width: 100%; max-width: 420px; max-height: 100%; overflow-y: auto; padding: 6px 8px 8px; border: 1px solid var(--line-2); border-radius: 28px; background: var(--surface-2); box-shadow: 0 10px 28px rgba(21, 22, 26, 0.12), 0 1px 3px rgba(21, 22, 26, 0.06); transform: translateY(18px) scale(0.96); transform-origin: 50% 100%; clip-path: inset(62% 0 0 0 round 28px); transition: transform 200ms cubic-bezier(0.4, 0, 1, 1), clip-path 200ms cubic-bezier(0.4, 0, 1, 1); }
    .tools-pop.is-open { visibility: visible; pointer-events: auto; transition: visibility 0s; }
    .tools-pop.is-open::before { opacity: var(--sheet-dim, 1); transition: opacity 240ms ease; }
    .tools-pop.is-dragging::before, .tools-pop.is-dragging .tools-card { transition: none; }
    .tools-pop.is-open .tools-card { transform: none; clip-path: inset(0 0 0 0 round 28px); transition: transform 340ms cubic-bezier(0.16, 1, 0.3, 1), clip-path 340ms cubic-bezier(0.16, 1, 0.3, 1); }
    .tools-card h2 { margin: 0; font-family: var(--font-display); font-stretch: 108%; font-weight: 800; font-size: 1.35rem; letter-spacing: -0.02em; line-height: 1; color: var(--ink); }
    .tools-card a { display: grid; grid-template-columns: 46px minmax(0, 1fr); align-items: center; gap: 13px; min-height: 60px; padding: 7px 8px; border-radius: 18px; color: var(--ink); text-decoration: none; -webkit-tap-highlight-color: transparent; }
    .tools-card a:hover, .tools-card a:active { background: color-mix(in srgb, var(--ink) 6%, transparent); }
    /* Inside the row: the card scrolls, so a ring outside it would be cut off at the sides. */
    .tools-card a:focus-visible { outline-offset: -3px; }
    .tools-card a i.ph { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: color-mix(in srgb, var(--ink) 6%, var(--surface-2)); font-size: 1.9rem; }
    .tools-card a .ico { --ico-dark: color-mix(in srgb, var(--ink) 6%, var(--surface-2)); }
    /* The tool you are on: its tile is ringed in the accent. */
    .tools-card a.on i.ph { box-shadow: inset 0 0 0 2px var(--accent); }
    .tools-card a span { min-width: 0; }
    .tools-card b { display: block; font-size: 0.96rem; font-weight: 600; line-height: 1.25; }
    .tools-card small { display: block; margin-top: 2px; font-size: 0.8rem; line-height: 1.3; color: var(--ink-3); }
    /* The profile page carries the rest of the menu under its content. */
    .rail.profile-menu-open { display: flex; flex-direction: column; order: 2; position: static; height: auto; margin: 0 18px; padding: 18px 0 8px; border: 0; border-top: 1px solid var(--line); overflow: visible; }
    .rail.profile-menu-open::before { content: 'More'; margin: 0 12px 6px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
    .rail.profile-menu-open .logo, .rail.profile-menu-open .rail-cap, .rail.profile-menu-open .grow, .rail.profile-menu-open a[data-tab], .rail.profile-menu-open a[data-tool] { display: none; }
    .rail.profile-menu-open a.phone-only { display: flex; }
    /* Every popup is a sheet along the bottom; ui.js slides it up and lets it be dragged down. */
    html .sheet, html .plan-modal, html .bq-backdrop { align-items: flex-end; padding: 12px 0 0; }
    html .sheet-card, html .plan-modal-card { width: 100%; max-width: 640px; max-height: 88dvh; border-radius: 22px 22px 0 0; padding: 10px 20px calc(22px + env(safe-area-inset-bottom)); }
    html dialog.app-notice, html dialog.gif-picker, html dialog.emoji-picker, html dialog.chat-report-dialog { margin: auto auto 0; width: 100%; max-width: 640px; max-height: 88dvh; border: 0; border-radius: 22px 22px 0 0; padding-bottom: env(safe-area-inset-bottom); }
    html dialog.app-notice::backdrop, html dialog.gif-picker::backdrop, html dialog.emoji-picker::backdrop, html dialog.chat-report-dialog::backdrop { opacity: var(--sheet-dim, 1); }
    html .gif-picker__inner { max-height: calc(88dvh - 24px); }
    /* The sheet's top bar: stays in view while the sheet scrolls, holds the
       handle and the close button, and is where a drag down starts. */
    .sheet-top { position: sticky; top: -10px; z-index: 3; display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; height: 44px; margin: -10px 0 8px; background: inherit; touch-action: none; cursor: grab; }
    .sheet-handle { display: block; grid-column: 2; width: 40px; height: 5px; margin: 0 auto; border-radius: 99px; background: var(--line-2); }
    .sheet-x { grid-column: 3; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink-2); font-size: 1.3rem; cursor: pointer; }
    .sheet-x:active { background: var(--bg-2); color: var(--ink); }
    /* The Tools menu's top bar is its heading row: the title, then a close button. */
    .tools-card > .sheet-top { display: flex; justify-content: space-between; gap: 12px; top: -6px; height: auto; margin: -6px 0 0; padding: 10px 0 4px 12px; }
    dialog > .sheet-top { margin: 0; }
    /* While a sheet is open the page behind stays put: the backdrop takes no
       swipes, the sheet's own scrolling never spills over, the page is held. */
    html.sheet-open, html.sheet-open body { overflow: hidden; }
    html .sheet, html .bq-backdrop, html .plan-modal { touch-action: none; overscroll-behavior: contain; }
    html .sheet-card, html .plan-modal-card, html .tools-card { overscroll-behavior: contain; }
    @media (prefers-reduced-motion: reduce) {
        .tools-pop, .tools-pop.is-open, .tools-pop::before, .tools-pop.is-open::before, .tools-card, .tools-pop.is-open .tools-card { transition: none; }
    }
    .rail.profile-menu-open { padding-bottom: calc(var(--tabbar-h) + 30px + env(safe-area-inset-bottom)); }
    .rail.profile-menu-open .rail-copyright { display: block; margin: 22px 12px 0; padding-top: 14px; border-top: 1px solid var(--line); }
    .shell:has(.rail.profile-menu-open) .main { padding-bottom: 8px; }
    .shell:has(.rail.profile-menu-open) .main > .page-copyright { display: none !important; }
    .rail.profile-menu-open a, .rail.profile-menu-open button.item { width: 100%; }
}

/* two columns of cards (profile, my plans) */
.grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.grid.even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.app-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 1180px) { .grid, .app-grid { grid-template-columns: minmax(0, 1fr); } .grid > *, .app-grid > * { min-width: 0; } }

.identity { padding: 24px 26px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 22px; align-items: center; }
.identity .avatar { width: 92px; height: 92px; border-radius: 22px; font-size: 1.9rem; position: relative; overflow: hidden; }
.identity h2 { display: flex; align-items: center; gap: 0.15em; min-width: 0; margin: 0; font-family: var(--font-display); font-stretch: 108%; font-size: 1.9rem; font-weight: 800; letter-spacing: -0.035em; line-height: 1; }
.identity h2 .identity-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.identity h2 .flame.is-large { width: 0.78em; height: 0.78em; margin: 0; vertical-align: 0; }
.identity .handle { margin: 6px 0 0; font-size: 0.92rem; color: var(--accent-text); font-weight: 600; }
.identity .chips { display: flex; width: 100%; justify-content: space-between; gap: 7px; margin-top: 12px; flex-wrap: wrap; }
.identity .avatar-wrap { display: grid; justify-items: start; gap: 10px; width: 92px; min-width: 0; }
.identity > :nth-child(2) { min-width: 0; }
.identity .avatar-premium { gap: 4px; border: 0; }
.identity .avatar-premium i { font-size: 0.82rem; }
.identity .xp { width: 100%; min-width: 0; margin-top: 14px; }
.identity .xp p { margin: 7px 0 0; font-size: 0.78rem; color: var(--ink-3); }
.identity .xp-shop { white-space: nowrap; }
.top-actions { display: grid; gap: 8px; }
.avatar-wrap { position: relative; }
.avatar-edit { position: absolute; right: -6px; bottom: -6px; width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--surface); background: var(--ink); color: var(--bg); display: grid; place-items: center; padding: 0; cursor: pointer; }
.avatar-edit svg { width: 14px; height: 14px; fill: currentColor; }

.tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.tiles .panel, .tiles .stat { padding: 17px 15px; }
@media (max-width: 1080px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .identity { grid-template-columns: auto minmax(0, 1fr); align-items: start; } .top-actions { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row; width: 100%; } .top-actions .btn { min-width: 0; padding: 0 10px; text-align: center; } }
@media (max-width: 760px) {
    .grid .identity { grid-template-columns: 92px minmax(0, 1fr); grid-template-rows: auto auto auto auto; column-gap: 14px; row-gap: 12px; }
    .grid .identity > .avatar-wrap { grid-column: 1; grid-row: 1 / span 2; align-self: start; }
    .grid .identity > :nth-child(2) { display: contents; }
    .grid .identity h2 { grid-column: 2; grid-row: 1; }
    .grid .identity .handle { grid-column: 2; grid-row: 2; }
    .grid .identity .chips { display: contents; }
    .grid .identity .avatar-premium { grid-column: 1; grid-row: 3; justify-self: start; align-self: center; }
    .grid .identity .chip.level { grid-column: 2; grid-row: 3; justify-self: start; align-self: center; }
    .grid .identity .xp { grid-column: 1 / -1; grid-row: 4; margin-top: 0; }
    .grid .identity > .top-actions { grid-column: 1 / -1; grid-row: 5; }
}

.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.card-head h3, .card-head .h2 { margin: 0 0 4px; }
.card-head .sub { margin: 0; }
.session-tag { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 13px; border-radius: var(--r-pill); background: var(--accent); color: var(--accent-ink); font-size: 0.8rem; font-weight: 600; white-space: nowrap; }
.session-tag.rest { background: var(--bg-2); color: var(--ink-2); }
.lifts { border-top: 1px solid var(--line); }
.lift { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 12px 2px; border-bottom: 1px solid var(--line); }
.lift .n { font-size: 0.8rem; color: var(--ink-3); }
.lift b { font-size: 0.95rem; font-weight: 500; }
.lift .sets { font-size: 0.88rem; font-weight: 600; color: var(--accent-text); white-space: nowrap; }
.card-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 18px; flex-wrap: wrap; }
.card-foot .meta { font-size: 0.82rem; color: var(--ink-3); }
.card-foot .acts { display: flex; gap: 10px; flex-wrap: wrap; }
.macros { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.macro { padding: 13px 14px; border-radius: 12px; background: var(--bg-2); }
.macro b { display: block; font-family: var(--font-display); font-stretch: 108%; font-size: 1.2rem; font-weight: 800; letter-spacing: -0.02em; }
.macro span { display: block; margin-top: 2px; font-size: 0.74rem; color: var(--ink-3); }

/* dialogs */
/* How far open a popup is, 0 to 1: dragging a sheet down on a phone dims its backdrop in step (ui.js). */
@property --sheet-dim { syntax: '<number>'; inherits: true; initial-value: 1; }
.sheet, .plan-modal, .bq-backdrop { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(12, 13, 16, calc(0.55 * var(--sheet-dim, 1))); }
.sheet.is-open, .plan-modal:not([hidden]) { display: flex; }
.sheet-card, .plan-modal-card { width: min(480px, 100%); max-height: 86vh; overflow-y: auto; padding: 26px 24px 22px; border-radius: 20px; background: var(--surface); box-shadow: var(--shadow-lg); }
.sheet-card h3, .plan-modal-card h2 { margin: 0 0 16px; font-size: 1.35rem; }
.plan-modal-card p { margin: 0 0 18px; color: var(--ink-2); line-height: 1.6; font-size: 0.94rem; }
.sheet-actions, .plan-modal-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 8px; }
/* quick setup (questionnaire.js): it only exists while it is open */
.bq-backdrop { display: flex; }
.bq-card { width: min(440px, 100%); }
.bq-card h3 { margin-bottom: 6px; }
.bq-lead { margin: 0 0 18px; font-size: 0.94rem; line-height: 1.55; color: var(--ink-2); }
.bq-card .fields.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bq-card .bq-wide { grid-column: 1 / -1; }
.bq-card .seg > * { height: 38px; }
.bq-card input[type="number"] { -moz-appearance: textfield; }
.bq-card input[type="number"]::-webkit-outer-spin-button, .bq-card input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bq-card .bq-status { margin: 12px 0 0; }
.bq-card .bq-status:empty { display: none; }
.bq-card .sheet-actions { margin-top: 18px; }
.bq-card .sheet-actions .btn { flex: 1; }
.pick-list { display: grid; gap: 8px; margin-bottom: 16px; }
.pick-list .pick { display: block; height: auto; width: 100%; padding: 12px 14px; border-radius: 12px; text-align: left; }
.pick-list .pick.is-on { border-color: var(--accent-strong); background: var(--accent-soft); color: var(--ink); }
.pick-list .pick strong { display: block; font-size: 0.92rem; }
.pick-list .pick span { font-size: 0.8rem; color: var(--ink-3); }

/* ==========================================================================
   social: faces, the feed, requests and messages (social-feed.js)
   ========================================================================== */

.social { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; align-items: start; }
.col-feed { width: min(100%, 720px); margin: 0 auto; }
.col-feed > * + * { margin-top: 14px; }
.col-side { position: sticky; top: 20px; display: grid; gap: 16px; }
@media (max-width: 1180px) { .social { grid-template-columns: minmax(0, 1fr); } .col-side { position: static; } .col-feed { width: 100%; } }
.find-people-heading { display: flex; align-items: center; gap: 8px; }
.find-people-heading i { color: var(--accent-text); font-size: 1.05em; }
/* Notifications (social-feed.js fills the list; on Home it sits in the
   bell's panel): the kind on an accent tile, who and what, how long ago, and
   a dot on the ones that came since you last opened the bell (home.js). */
.notification-list { display: grid; }
.notification-item { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 60px; padding: 8px 0; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; -webkit-tap-highlight-color: transparent; }
a.notification-item:hover .notification-copy > span, a.notification-item:active .notification-copy > span { color: var(--accent-text); }
.notification-item.is-new::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
/* A friend request has Accept where the dot goes, 44 px tall to the thumb. */
.notification-item.is-request::after { content: none; }
.notification-item .btn { position: relative; height: 36px; padding: 0 14px; }
.notification-item .btn::after { content: ""; position: absolute; inset: -4px 0; }
.notification-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-text); }
.notification-icon i { font-size: 1.15rem; }
.notification-icon i.has-ico { font-size: 1.5rem; }
.notification-copy { display: grid; gap: 2px; min-width: 0; }
.notification-copy > span { font-size: 0.88rem; line-height: 1.35; color: var(--ink-2); }
.notification-copy b { font-weight: 600; color: var(--ink); }
.notification-copy time { font-size: 0.76rem; }
.notification-empty { margin: 0; padding: 14px 0 6px; border-top: 1px solid var(--line); }

.storyrow { padding: 14px 18px; }
.friends-row, .faces { display: flex; gap: 16px; overflow-x: auto; padding: 4px 2px 4px; scrollbar-width: none; }
.friends-row::-webkit-scrollbar, .faces::-webkit-scrollbar { display: none; }
.fr, .face { display: grid; justify-items: center; gap: 7px; width: 68px; flex: none; padding: 0; border: 0; background: none; color: var(--ink-2); font: inherit; font-size: 0.76rem; cursor: pointer; }
.fr .av, .face img { width: 56px; height: 56px; border-radius: 16px; font-size: 0.95rem; }
.fr.has-new .av, .face.new img { outline: 3px solid var(--accent); outline-offset: 2px; }
.fr.has-story .av { outline: 2px solid var(--accent); outline-offset: 3px; }
.fr.has-story.is-seen .av { outline-color: #888; }
.fr.story-self { width: 68px; gap: 7px; }
.story-self__avatar { display: grid; place-items: center; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 16px; background: transparent; cursor: pointer; }
.story-self__avatar .av { width: 56px; height: 56px; border-radius: 16px; font-size: 0.95rem; }
.story-self__avatar.has-story .av { outline: 2px solid var(--accent); outline-offset: 3px; }
.story-self__avatar.has-story.is-seen .av { outline-color: #888; }
.story-self__label { display: flex; align-items: center; justify-content: center; max-width: 68px; }
.story-self__label b { max-width: 68px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.76rem; font-weight: 500; }
.fr b, .face b { font-weight: 500; max-width: 68px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr:hover { color: var(--ink); }
.fr.add .av { background: var(--bg-2); color: var(--ink-2); font-size: 1.4rem; font-weight: 400; }

.progress-story-compose { width: min(92vw, 440px); max-width: 440px; max-height: calc(100dvh - 24px); padding: 22px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.progress-story-compose::backdrop { background: rgb(0 0 0 / 68%); backdrop-filter: blur(4px); }
.progress-story-compose form { display: grid; gap: 14px; }
.progress-story-compose__head { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.progress-story-compose__head h2 { margin: 0; font-size: 1.15rem; letter-spacing: -0.01em; }
.progress-story-compose__head .sub { margin: 6px 0 0; font-size: 0.85rem; }

/* The photo being posted: text goes straight onto it. --story-px is the stage's
   width (social-feed.js keeps it current), so type sizes are a share of the photo. */
.story-editor__stage { --story-px: 240px; position: relative; width: min(100%, 270px, max(160px, calc((100dvh - 380px) * 0.5625))); aspect-ratio: 9 / 16; justify-self: center; overflow: hidden; border-radius: 18px; background: var(--bg-2); isolation: isolate; }
.story-editor__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.story-editor__choose { position: absolute; inset: 0; z-index: 1; display: grid; place-content: center; justify-items: center; gap: 6px; padding: 16px; border: 1.5px dashed var(--line-2); border-radius: inherit; color: var(--ink-2); text-align: center; cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.story-editor__choose:hover, .progress-story-compose:has(#progressStoryFile:focus-visible) .story-editor__choose { border-color: var(--accent); background: var(--accent-soft); }
.story-editor__choose i { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 6px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); font-size: 1.6rem; }
.story-editor__choose b { color: var(--ink); font-size: 0.95rem; font-weight: 600; }
.story-editor__choose span { color: var(--ink-3); font-size: 0.78rem; }
.story-editor__tool { position: absolute; top: 10px; z-index: 4; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: rgb(0 0 0 / 48%); color: #fff; font: inherit; cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); -webkit-tap-highlight-color: transparent; transition: background 0.15s, transform 0.15s; }
.story-editor__tool:hover { background: rgb(0 0 0 / 68%); }
.story-editor__tool:active { transform: scale(0.94); }
.story-editor__tool:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.story-editor__tool:disabled { opacity: 0.4; pointer-events: none; }
.story-editor__tool.is-change { left: 10px; font-size: 1.2rem; }
.story-editor__tool.is-text { right: 10px; font-size: 1.05rem; font-weight: 700; letter-spacing: -0.02em; }
.story-editor__edit { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 56px 10px 16px; background: rgb(0 0 0 / 58%); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.story-editor__done { position: absolute; top: 10px; right: 10px; height: 36px; padding: 0 16px; border: 0; border-radius: 999px; background: #fff; color: #000; font: inherit; font-size: 0.85rem; font-weight: 700; cursor: pointer; }
.story-editor__done:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* The words on the photo. Sizes are in em so the preview and the canvas that
   makes the real image (cropProgressPhoto) lay out the same way. */
.story-text { --story-text-size: 0.07; padding: 0.25em 0.5em; border-radius: 0.3em; color: #fff; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: calc(var(--story-text-size) * var(--story-px)); font-weight: 700; line-height: 1.25; text-align: center; text-shadow: 0 0.04em 0.12em rgb(0 0 0 / 55%); }
.story-text.has-background { background: #000; text-shadow: none; }
.story-text:not(.story-text--edit) { position: absolute; top: 50%; left: 50%; z-index: 3; width: max-content; transform: translate(-50%, -50%); white-space: pre; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.story-text:not(.story-text--edit).is-dragging { cursor: grabbing; }
.story-text:not(.story-text--edit):focus-visible, .story-text:not(.story-text--edit).is-dragging { outline: 2px dashed rgb(255 255 255 / 90%); outline-offset: 4px; }
.story-text--edit { display: inline-grid; min-width: 2.5em; max-width: 100%; }
.story-text--edit::after { content: attr(data-value) " "; grid-area: 1 / 1 / 2 / 2; visibility: hidden; overflow-wrap: anywhere; white-space: pre-wrap; pointer-events: none; }
.story-text--edit textarea { grid-area: 1 / 1 / 2 / 2; width: 100%; min-width: 0; margin: 0; padding: 0; overflow: hidden; border: 0; outline: 0; resize: none; background: transparent; caret-color: currentColor; color: inherit; font: inherit; letter-spacing: inherit; line-height: inherit; overflow-wrap: anywhere; text-align: center; text-shadow: inherit; white-space: pre-wrap; }

.story-controls { display: grid; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-2); }
.story-swatches { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; }
.story-swatch { position: relative; box-sizing: border-box; flex: none; width: 25px; height: 25px; padding: 0; border: 2px solid var(--surface); border-radius: 50%; background: var(--swatch, #fff); box-shadow: 0 0 0 1px var(--line-2); cursor: pointer; transition: transform 0.12s, box-shadow 0.12s; }
.story-swatch:hover { transform: scale(1.1); }
.story-swatch[aria-pressed="true"], .story-swatch.is-active { box-shadow: 0 0 0 2px var(--ink); transform: scale(1.1); }
.story-swatch:focus-visible, .story-swatch:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
.story-swatch.is-custom { background: conic-gradient(#ff3b30, #ffd60a, #34c759, #0a84ff, #ff2d92, #ff3b30); }
.story-swatch.is-custom.is-active { background: var(--swatch); }
.story-swatch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.story-controls__row { display: flex; align-items: center; gap: 10px; }
.story-bg-toggle, .story-remove { box-sizing: border-box; flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1.5px solid var(--line-2); border-radius: 10px; background: transparent; color: var(--ink); font: inherit; font-size: 1.15rem; cursor: pointer; transition: border-color 0.15s, color 0.15s, background 0.15s; }
.story-bg-toggle { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-weight: 700; }
.story-bg-toggle:hover, .story-remove:hover { border-color: var(--ink); }
.story-bg-toggle[aria-pressed="true"] { border-color: var(--accent); background: #000; color: #fff; }
.story-remove { color: var(--ink-2); }
.story-remove:hover { border-color: #e85d5d; color: #e85d5d; }
.story-bg-toggle:focus-visible, .story-remove:focus-visible, .story-size input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.story-size { display: flex; flex: 1; align-items: center; gap: 8px; min-width: 0; color: var(--ink-3); font-weight: 700; }
.story-size__small { font-size: 0.75rem; }
.story-size__big { font-size: 1.25rem; }
.story-size input { flex: 1; min-width: 0; height: 28px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.progress-story-status { min-height: 1.3em; margin: 0; color: var(--ink-3); font-size: 0.84rem; text-align: center; }
.progress-story-status.is-error { color: var(--danger, #e85d5d); }
.progress-story-compose__actions { display: flex; gap: 10px; }
.progress-story-compose__actions .btn { flex: 1; }

.progress-story-viewer { position: fixed; inset: 0; width: 100vw; max-width: none; height: 100vh; height: 100dvh; max-height: none; margin: 0; padding: 0; overflow: hidden; border: 0; background: #111; color: #fff; }
.progress-story-viewer::backdrop { background: #111; }
.progress-story-viewer__frame { position: relative; width: 100%; height: 100%; overflow: hidden; touch-action: pan-y; }
.progress-story-viewer__brand { position: absolute; top: max(22px, env(safe-area-inset-top)); right: max(24px, env(safe-area-inset-right)); z-index: 3; color: #fff; font-size: 1.25rem; font-weight: 700; letter-spacing: -0.04em; }
.progress-story-viewer__close { position: absolute; top: max(18px, env(safe-area-inset-top)); left: max(20px, env(safe-area-inset-left)); z-index: 4; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #fff; font: inherit; font-size: 1.6rem; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.progress-story-viewer__stage { position: absolute; top: 50%; left: 50%; width: min(420px, calc(56.25dvh - 18px), calc(100vw - 24px)); max-height: calc(100dvh - 32px); aspect-ratio: 9 / 16; overflow: hidden; border-radius: 12px; background: #202020; box-shadow: 0 18px 60px rgb(0 0 0 / 42%); transform: translate(-50%, -50%); }
.progress-story-viewer__image { display: block; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.progress-story-viewer__stage::after { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgb(0 0 0 / 42%), transparent 24%, transparent 72%, rgb(0 0 0 / 26%)); content: ""; pointer-events: none; }
.progress-story-viewer__progress { position: absolute; top: 10px; left: 10px; right: 10px; z-index: 3; height: 3px; overflow: hidden; border-radius: 3px; background: rgb(255 255 255 / 48%); }
.progress-story-viewer__progress span { display: block; width: 100%; height: 100%; border-radius: inherit; background: #fff; }
.progress-story-viewer__head { position: absolute; top: 24px; left: 14px; right: 14px; z-index: 3; display: flex; align-items: center; gap: 10px; }
.progress-story-viewer__head .av { width: 36px; height: 36px; border: 1px solid rgb(255 255 255 / 70%); border-radius: 50%; }
.progress-story-viewer__author { display: grid; gap: 2px; text-shadow: 0 1px 4px #000; }
.progress-story-viewer__author b { font-size: 0.9rem; }
.progress-story-viewer__author span { color: rgb(255 255 255 / 78%); font-size: 0.75rem; }
.progress-story-viewer__nav { position: absolute; top: 50%; z-index: 3; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%; background: rgb(0 0 0 / 38%); color: #fff; font: inherit; font-size: 1.3rem; cursor: pointer; transform: translateY(-50%); }
.progress-story-viewer__nav:disabled { opacity: 0; pointer-events: none; }
.progress-story-viewer__nav.is-previous { left: 10px; }
.progress-story-viewer__nav.is-next { right: 10px; }
.progress-story-viewer__like { position: absolute; bottom: 16px; left: 16px; z-index: 3; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #fff; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.progress-story-viewer__like svg { display: block; width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linejoin: round; filter: drop-shadow(0 1px 3px rgb(0 0 0 / 65%)); }
.progress-story-viewer__like[aria-pressed="true"] { color: #ff3040; }
.progress-story-viewer__like[aria-pressed="true"] svg { fill: currentColor; }
.progress-story-viewer__like:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.progress-story-viewer__delete { position: absolute; right: 16px; bottom: 16px; z-index: 3; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: rgb(0 0 0 / 28%); color: #fff; font: inherit; font-size: 1.25rem; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.progress-story-viewer__delete[hidden] { display: none; }
.progress-story-viewer__delete:hover { background: rgb(0 0 0 / 55%); color: #ff6b6b; }
.progress-story-viewer__delete:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.progress-story-reply { position: absolute; right: 12px; bottom: 16px; left: 68px; z-index: 3; display: flex; align-items: center; gap: 8px; height: 48px; }
.progress-story-reply[hidden] { display: none; }
.progress-story-reply input { flex: 1; min-width: 0; height: 46px; padding: 0 18px; border: 1px solid rgb(255 255 255 / 70%); border-radius: 999px; background: rgb(0 0 0 / 28%); color: #fff; font: inherit; font-size: 0.95rem; outline: none; backdrop-filter: blur(6px); }
.progress-story-reply input::placeholder { color: rgb(255 255 255 / 85%); }
.progress-story-reply input:focus { border-color: #fff; background: rgb(0 0 0 / 45%); }
.progress-story-reply button { flex: none; height: 46px; padding: 0 6px; border: 0; background: transparent; color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.progress-story-reply button:disabled { opacity: 0.5; }
.progress-story-viewer__stage::before { position: absolute; right: 0; bottom: 0; left: 0; z-index: 1; height: 140px; background: linear-gradient(0deg, rgb(0 0 0 / 45%), transparent); content: ""; pointer-events: none; }
.progress-story-like-burst { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; color: #ff3040; opacity: 0; pointer-events: none; }
.progress-story-like-burst svg { width: 96px; height: 96px; fill: #ff3040; filter: drop-shadow(0 4px 14px rgb(0 0 0 / 45%)); }
.progress-story-like-burst.is-animating { animation: progress-story-heart-pop 760ms cubic-bezier(0.18, 0.75, 0.3, 1) both; }
@keyframes progress-story-heart-pop {
    0% { opacity: 0; transform: scale(0.25); }
    22% { opacity: 1; transform: scale(1.2); }
    40% { opacity: 1; transform: scale(0.96); }
    58% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.2); }
}
@media (prefers-reduced-motion: reduce) {
    .progress-story-like-burst.is-animating { animation-duration: 1ms; }
}
.story-reply { display: grid; gap: 5px; justify-items: start; margin-bottom: 6px; }
.story-reply__label { font-size: 0.72rem; opacity: 0.75; }
.story-reply__thumb { display: block; width: 84px; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 10px; background: rgb(128 128 128 / 22%); }
.story-reply__thumb.is-expired { display: grid; place-items: center; padding: 6px; font-size: 0.72rem; line-height: 1.25; text-align: center; opacity: 0.8; }
.progress-story-neighbors { display: none; }
.progress-story-neighbor { position: absolute; top: 50%; display: grid; width: 140px; padding: 0; overflow: hidden; border: 0; border-radius: 10px; background: #242424; color: #fff; cursor: pointer; text-align: left; transform: translateY(-50%); }
.progress-story-neighbor img { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; }
.progress-story-neighbor span { position: absolute; right: 9px; bottom: 10px; left: 9px; overflow: hidden; color: #fff; font-size: 0.78rem; font-weight: 600; text-overflow: ellipsis; text-shadow: 0 1px 5px #000; white-space: nowrap; }
.progress-story-neighbor[hidden] { display: none; }
.progress-story-viewer__status { position: absolute; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); left: 16px; z-index: 4; margin: 0; color: #fff; text-align: center; text-shadow: 0 1px 4px #000; pointer-events: none; }
.progress-story-viewer__status:empty { display: none; }

@media (min-width: 1100px) {
    .progress-story-viewer__stage { left: calc(50% - 145px); }
    .progress-story-neighbors { display: block; }
    .progress-story-neighbor:nth-child(1) { left: calc(50% + 95px); }
    .progress-story-neighbor:nth-child(2) { left: calc(50% + 255px); width: 118px; }
}

.prompt { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 16px 18px; }
.prompt .av { width: 46px; height: 46px; border-radius: 14px; }
.prompt b { display: block; font-size: 1rem; font-weight: 600; }
.prompt .sub { margin: 3px 0 0; }

.requests { padding: 14px 16px; border-radius: var(--r-card); background: var(--accent-soft); }
.requests h2, .requests h3 { margin: 0 0 4px; font-family: inherit; font-stretch: normal; font-size: 0.9rem; font-weight: 600; letter-spacing: normal; }
.req, .res { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.req:last-child, .res:last-child { border-bottom: 0; }
.req { transition: opacity 220ms ease, transform 220ms ease; }
.req.is-closing { opacity: 0; transform: translateX(12px); pointer-events: none; }
.req-who, .fr-who { flex: 1; min-width: 0; }
.req-who a, .fr-who b { display: block; font-size: 0.92rem; font-weight: 600; color: var(--ink); }
.req-who a.who-link { display: inline; }
.req-who span, .fr-who span { display: block; font-size: 0.78rem; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.feed { display: grid; gap: 10px; }
.post { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 18px; background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow); scroll-snap-align: start; }
.post.achievement-post { box-shadow: var(--shadow), inset 0 0 0 0.5px var(--accent); }
.post .av, .post img.av { width: 44px; height: 44px; border-radius: 12px; }
.presence-avatar { position: relative; display: inline-flex; flex: 0 0 auto; }
/* In a post the avatar sits in a grid column as tall as the post; keep the wrapper (and its online dot) to the face. */
.post > .presence-avatar { align-self: start; }
.presence-avatar.online::after { content: ""; position: absolute; right: -5px; bottom: -4px; z-index: 2; width: 14px; height: 14px; border: 2px solid var(--surface); border-radius: 50%; background: #2fc56f; box-shadow: 0 0 0 2px rgba(47, 197, 111, 0.28); pointer-events: none; }
.achievement-marker { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-left: 7px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); vertical-align: -0.2em; }
.achievement-marker i { font-size: 0.85rem; }
.post > div { min-width: 0; }
.post p { margin: 2px 0 0; font-size: 0.96rem; line-height: 1.5; color: var(--ink-2); }
.post p b { color: var(--ink); font-weight: 600; }
.post .who { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 8px; font-weight: 600; }
/* The flame is a picture: centred on the name, not sat on its baseline. */
.post .who .flame { align-self: center; width: 1.6em; height: 1.6em; margin: 0 -2px; vertical-align: middle; }
.post .who span, .post .who .post-time { font-weight: 400; color: var(--ink-3); font-size: 0.82rem; }
.post .who span { margin-left: 0; }
.post .who .post-time::before { content: "·"; margin-right: 6px; }
.post .meta, .post-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 12px; font-size: 0.82rem; color: var(--ink-3); }
.post-foot { justify-content: flex-start; }
.post-actions { display: flex; align-items: center; justify-content: flex-start; flex: 0 1 auto; flex-wrap: nowrap; gap: 6px; }
.post-action { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; min-width: 44px; padding: 0 11px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--bg-2); color: var(--ink-3); font: inherit; font-size: 0.8rem; font-weight: 500; cursor: pointer; transition: background 150ms ease, border-color 150ms ease, color 150ms ease; }
.post-action:hover:not(:disabled) { border-color: var(--line-2); background: var(--surface); color: var(--ink); }
.post-action:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.post-action:disabled { cursor: default; opacity: 0.65; }
.post-action.is-liked { border-color: var(--bad); color: var(--bad); }
.post-action.is-reported { color: var(--ink-3); }
.post-action i { font-size: 1rem; }
.post-action.report-action { width: 44px; flex: none; padding: 0; }
.post-action.like-action, .post-action.reply-action { gap: 5px; padding: 0 12px 0 10px; font-variant-numeric: tabular-nums; }
.post-action.like-action i, .post-action.reply-action i { font-size: 1.1rem; }
.post-delete { position: absolute; top: 10px; right: 10px; z-index: 1; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--bg-2); color: var(--ink-3); cursor: pointer; opacity: 1; transition: background 150ms ease, border-color 150ms ease, color 150ms ease, opacity 150ms ease; }
.post-delete:hover { border-color: var(--bad); background: var(--bad-soft); color: var(--bad); }
.post-delete:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
   .post-delete { opacity: 0; pointer-events: none; }
   .post:hover .post-delete, .post:focus-within .post-delete { opacity: 1; pointer-events: auto; }
}
@media (max-width: 600px) {
   .post-foot { align-items: flex-start; gap: 6px; }
   .post-delete { top: 8px; right: 8px; width: 32px; height: 32px; }
}
.post-replies { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.post-replies[hidden] { display: none; }
.post-reply-list { display: grid; gap: 8px; max-height: 260px; overflow-y: auto; }
.post-reply { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--bg-2); }
.post-reply > .av { width: 32px; height: 32px; border-radius: 9px; font-size: 0.7rem; }
.post-reply > div { min-width: 0; }
.post-reply-head { display: flex; align-items: baseline; gap: 10px; font-size: 0.82rem; }
.post-reply-head > span { color: var(--ink-3); font-size: 0.74rem; }
.post-reply p { margin: 4px 0 0; color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.reply-composer { display: flex; gap: 8px; margin-top: 10px; }
.reply-composer .inp { flex: 1; min-width: 0; height: 38px; }
.reply-composer .btn { flex: 0 0 38px; width: 38px; height: 38px; padding: 0; }
.post-replies .status:empty { display: none; }
.who-link { color: var(--ink); font-weight: 600; }
.who-link:hover { text-decoration: underline; }
.when { font-size: 0.8rem; color: var(--ink-3); }
.unread { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-pill); background: var(--accent); color: var(--accent-ink); font-style: normal; font-size: 0.7rem; font-weight: 700; vertical-align: middle; }
h3 .unread { margin-left: 8px; }

.mess { display: grid; grid-template-columns: 170px minmax(0, 1fr); height: 440px; margin: 16px -22px -22px; border-top: 1px solid var(--line); }
.mess > * { min-height: 0; }
.lst { overflow-y: auto; padding: 10px; border-right: 1px solid var(--line); }
.lst .sub { margin: 0; padding: 8px; }
.ci { display: flex; gap: 10px; align-items: center; width: 100%; padding: 8px; border: 0; border-radius: 10px; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.ci:hover { background: var(--bg-2); }
.ci.on { background: var(--bg-2); }
.ci .av { width: 32px; height: 32px; border-radius: 9px; font-size: 0.7rem; }
.ci div { flex: 1; min-width: 0; }
.ci b { display: block; font-size: 0.88rem; font-weight: 600; }
.ci div span { display: block; font-size: 0.76rem; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ci i { min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-pill); background: var(--accent); color: var(--accent-ink); font-style: normal; font-size: 0.68rem; font-weight: 700; display: grid; place-items: center; }
.thread { display: flex; flex-direction: column; min-width: 0; }
.th-head { display: flex; gap: 10px; align-items: center; min-height: 58px; padding: 10px 16px; border-bottom: 1px solid var(--line); font-size: 0.9rem; }
.th-head .av { width: 34px; height: 34px; border-radius: 10px; font-size: 0.74rem; }
.report-chat-btn { display: grid; place-items: center; flex: 0 0 38px; width: 38px; height: 38px; margin-left: auto; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--bg-2); color: var(--ink-3); font: inherit; cursor: pointer; transition: background 150ms ease, border-color 150ms ease, color 150ms ease; }
.report-chat-btn i { font-size: 1.05rem; }
.report-chat-btn:hover, .report-chat-btn:focus-visible { border-color: var(--bad); background: var(--bad-soft); color: var(--bad); }
.report-chat-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.msgs { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; overflow-y: auto; }
.msgs .sub { margin: auto; }
.b { max-width: 78%; padding: 9px 13px; border-radius: 16px; font-size: 0.9rem; line-height: 1.4; overflow-wrap: anywhere; }
.b.me { align-self: flex-end; background: var(--accent); color: var(--accent-ink); border-bottom-right-radius: 5px; }
.b.them { align-self: flex-start; background: var(--bg-2); border-bottom-left-radius: 5px; }
/* yours, shown the moment you send it; full colour once the server has it */
.b.me.is-pending { opacity: 0.6; }
.b .t { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 2px 7px; margin-top: 3px; font-size: 0.66rem; opacity: 0.6; }
.b .t time, .b .receipt { white-space: nowrap; }
.b .receipt { display: inline-flex; flex: 0 0 auto; align-items: center; margin: 0; line-height: 1; }
.b .receipt i { font-size: 0.82rem; }
.b .receipt.is-seen { color: var(--accent-text); }
.b.me .receipt.is-seen { color: var(--accent-ink); }
.day-line { align-self: center; margin: 6px 0; font-size: 0.72rem; font-weight: 600; color: var(--ink-3); }
.composer { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); }
.composer .inp { flex: 1; min-width: 0; height: 40px; }
#chatStatus { margin: 0; padding: 0 16px 8px; font-size: 0.8rem; color: var(--bad); }
#chatStatus:empty { display: none; }
.col-side .mess { grid-template-columns: 150px minmax(0, 1fr); height: 420px; }
.col-side .ci div span { display: none; }
@media (max-width: 600px) {
    .mess { grid-template-columns: 1fr; height: auto; }
    .lst { max-height: 180px; border-right: 0; border-bottom: 1px solid var(--line); }
    .msgs { min-height: 260px; }
}

/* today's session: the one dark card on the page, and it tilts */
.tilt { transform-style: preserve-3d; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); will-change: transform; }
.today-card { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 26px 28px; background: var(--ink); color: var(--bg); border-radius: var(--r-card); box-shadow: var(--shadow-lg); }
.today-card.is-complete { box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--ok); }
.today-card > div:first-child { grid-column: 1; grid-row: 1; }
.today-card > .stage3d { grid-column: 2; grid-row: 1; justify-self: center; }
.today-card > .week-progress { grid-column: 3; grid-row: 1; justify-self: end; }
:root[data-theme="dark"] .today-card { background: var(--surface-2); color: var(--ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .today-card { background: var(--surface-2); color: var(--ink); } }
.today-card .kicker { font-weight: 600; opacity: 0.7; font-size: 0.9rem; }
.today-card.is-complete #promptText { display: inline-flex !important; align-items: center; gap: 6px; color: var(--ok); opacity: 1; }
.today-card h2 { display: flex; align-items: center; gap: 14px; font-family: var(--font-display); font-stretch: 110%; font-weight: 800; letter-spacing: -0.035em; font-size: clamp(1.8rem, 3vw, 2.5rem); margin: 6px 0 8px; line-height: 1; }
.today-card h2 span { min-width: 0; }
.week-progress { display: grid; align-self: center; justify-self: center; justify-items: center; gap: 4px; }
.week-progress .kicker { line-height: 1; text-align: center; }
.today-card .day-icon { display: grid; place-items: center; flex: 0 0 52px; width: 52px; height: 52px; border-radius: 15px; background: var(--accent); color: var(--accent-ink); font-size: 1.45rem; box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 24%, transparent); }
.today-card .lifts { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 12px 0 0; padding: 0; list-style: none; font-size: 0.92rem; opacity: 0.85; border: 0; }
.today-card .btn { background: var(--accent); color: var(--accent-ink); }
.today-card .btn:hover { background: var(--accent-strong); }
.today-card .btn.quiet { background: transparent; color: inherit; border-color: currentColor; }
.today-card .stage3d { position: relative; align-self: center; width: 100%; height: 190px; }
.today-card .stage3d canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
.stage3d-fallback { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 1; }
.stage3d-fallback svg { display: none; width: 100%; height: 100%; overflow: visible; }
.stage3d:not([data-model="beach-chair"]) .fallback-dumbbell { display: block; }
.stage3d[data-model="beach-chair"] .fallback-chair { display: block; }
.stage3d.is-webgl-ready .stage3d-fallback { display: none; }
.today-card .stage3d .shadow-pool { position: absolute; left: 50%; bottom: 8%; width: 60%; height: 10%; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.5), transparent); }
.ring { width: 92px; height: 92px; }
.ring circle { fill: none; stroke-width: 9; }
.ring .track { stroke: rgba(128, 128, 128, 0.25); }
.ring .fill { stroke: var(--accent); stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dasharray 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.ring text { fill: currentColor; font-family: var(--font-display); font-weight: 800; font-size: 22px; }
@media (max-width: 600px) { .today-card { grid-template-columns: 1fr; } .today-card > div:first-child, .today-card > .stage3d, .today-card > .week-progress { grid-column: 1; } .today-card > div:first-child { grid-row: 1; } .today-card > .stage3d { grid-row: 2; width: min(100%, 220px); height: 150px; justify-self: center; } .today-card > .week-progress { grid-row: 3; justify-self: center; } }
@media (max-width: 360px) { .compose-foot { flex-wrap: wrap; } .compose-actions { max-width: 100%; flex-wrap: nowrap; } }

/* ==========================================================================
   someone else's public profile
   ========================================================================== */

.page { width: min(1060px, calc(100% - 48px)); margin: 0 auto; padding: 32px 0 110px; }
.big-card { overflow: hidden; }
.card-top { padding: 30px 32px 26px; border-bottom: 1px solid var(--line); }
.card-top .identity { width: 100%; min-width: 0; padding: 0; grid-template-columns: minmax(180px, 220px) minmax(0, 1fr) auto; }
.profile-avatar-meta { width: 100%; min-width: 0; }
.profile-avatar-meta .avatar { width: 92px; height: 92px; }
.profile-avatar-meta .since { margin: 10px 0 0; font-size: 0.78rem; line-height: 1.35; color: var(--ink-3); }
.profile-avatar-meta .xp { max-width: none; margin-top: 10px; }
.profile-avatar-meta .xp p { font-size: 0.72rem; line-height: 1.35; }
.stat-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.stat-row .stat { padding: 22px 18px; text-align: center; border-right: 1px solid var(--line); }
.stat-row .stat:last-child { border-right: 0; }
.card-body { padding: 26px 32px 32px; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 26px; }
.showcase h2 { margin: 0 0 12px; font-size: 0.82rem; font-weight: 600; color: var(--ink-3); }
.showcase > * + h2 { margin-top: 22px; }
.box { padding: 18px; border-radius: 12px; background: var(--bg-2); }
.box h3 { margin: 0 0 3px; font-size: 1.05rem; }
.box p { margin: 0; font-size: 0.9rem; line-height: 1.6; color: var(--ink-2); }
.box .bio { white-space: pre-wrap; }
.box .ach { background: var(--surface); }
@media (max-width: 900px) {
    .card-body { grid-template-columns: 1fr; padding: 22px 20px 26px; }
    .stat-row { grid-template-columns: repeat(2, 1fr); }
    .card-top { padding: 24px 20px 22px; }
    .card-top .identity { grid-template-columns: 140px minmax(0, 1fr); gap: 16px; }
    .card-top .identity > :nth-child(2) { min-width: 0; }
    .card-top .identity > .top-actions { grid-column: 1 / -1; }
    .card-top .identity > .top-actions > * { min-width: 0; }
}
@media (max-width: 1080px) {
    .big-card .top-actions .chip { min-width: 0; height: auto; min-height: 26px; padding: 4px 8px; line-height: 1.2; white-space: normal; text-align: center; justify-content: center; }
}

/* ==========================================================================
   the workout (workout.js)
   ========================================================================== */

.wk-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 18px; }
.wk-head h1 { font-family: var(--font-display); font-stretch: 112%; font-weight: 800; letter-spacing: -0.035em; font-size: clamp(2.2rem, 4vw, 3.2rem); margin: 4px 0 0; line-height: 1; }
.wk-back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: -10px 0; padding-right: 12px; color: var(--ink-2); font-size: 0.92rem; font-weight: 500; }
.wk-back:hover { color: var(--ink); }
.wk-progress { display: flex; align-items: center; gap: 14px; margin: 0 0 22px; }
.progress, .wk-bar { flex: 1; height: 10px; border-radius: var(--r-pill); background: var(--bg-2); overflow: hidden; }
.progress i, .wk-bar i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: var(--r-pill); transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
.wk-count { font-size: 0.88rem; color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ex { padding: 22px 24px; }
.ex + .ex, .ex + .wk-card, #wkBody > * + * { margin-top: 12px; }
/* The name with "2 sets, 6 to 8 reps" under it, and beside it two round
   icon buttons: how to do the exercise (its form sheet) and Swap. */
.ex-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 10px; margin-bottom: 8px; }
.ex-head h2 { margin: 0; padding-top: 3px; font-family: var(--font-display); font-stretch: 105%; font-weight: 700; letter-spacing: -0.02em; font-size: 1.28rem; line-height: 1.15; text-wrap: balance; overflow-wrap: anywhere; }
.ex-target { margin: 5px 0 0; font-size: 0.88rem; color: var(--ink-2); }
.ex-swapping { margin: 4px 0 0; font-size: 0.84rem; font-weight: 600; color: var(--accent-text); }
.ex-head .ex-saved { display: flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 0.8rem; color: var(--ink-3); }
.ex-icons { display: flex; gap: 6px; }
.ex-icon { display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 1.5px solid var(--line-2); border-radius: 50%; background: transparent; color: var(--ink-2); font: inherit; font-size: 1.2rem; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ex-icon:active { background: var(--bg-2); color: var(--ink); }
.ex-icon i.has-ico { font-size: 1.45rem; }
.ex-icon:disabled { opacity: 0.45; cursor: default; }
.ex-alt { margin: 2px 0 0; font-size: 0.8rem; color: var(--ink-3); }
.ex-last, .ex .last { font-size: 0.88rem; color: var(--ink-2); margin: 8px 0 8px; }
.ex-last b, .ex .last b { font-weight: 600; color: var(--ink); }
/* Every row has the same box, so ticking one only changes its fill. */
.set { display: grid; grid-template-columns: 28px minmax(0, 1fr) minmax(0, 1fr) 52px; gap: 10px; align-items: center; margin: 0 -6px; padding: 4px 4px 4px 8px; border-radius: 16px; }
.set + .set { margin-top: 4px; }
.set.timed { grid-template-columns: 28px minmax(0, 1fr) 52px; }
.set .no { font-size: 0.82rem; font-weight: 600; color: var(--ink-3); text-align: center; }
.set label { position: relative; display: block; }
.set input { width: 100%; height: 52px; padding: 0 48px 0 16px; border-radius: var(--r-input); border: 1.5px solid var(--line-2); background: var(--surface-2); color: var(--ink); font: inherit; font-size: 1.25rem; font-weight: 600; font-variant-numeric: tabular-nums; -moz-appearance: textfield; outline: none; }
.set input::-webkit-outer-spin-button, .set input::-webkit-inner-spin-button { -webkit-appearance: none; }
.set input::placeholder { color: var(--ink-3); font-weight: 400; font-size: 0.95rem; }
.set input:focus { border-color: var(--accent-strong); box-shadow: 0 0 0 3px var(--accent-soft); }
.set label span { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 0.78rem; color: var(--ink-3); pointer-events: none; }
.tick { width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid var(--line-2); background: var(--surface-2); color: var(--ink-3); cursor: pointer; display: grid; place-items: center; font-size: 1.2rem; padding: 0; transition: transform 0.15s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
.tick svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.tick:active { transform: scale(0.92); }
/* A done set looks one way only: the whole row fills with the accent and a
   white tick sits on a deeper accent disc, so it reads on every accent. */
.set.done { background: var(--accent); }
.set.done .no, .set.done label span { color: var(--accent-ink); }
.set.done input { background: transparent; border-color: transparent; box-shadow: none; color: var(--accent-ink); }
.set.done input::placeholder { color: var(--accent-ink); opacity: 0.6; }
.set.done input:focus { border-color: var(--accent-ink); box-shadow: none; }
.set.done .tick { border-color: transparent; background: color-mix(in srgb, var(--accent) 55%, #000); color: #fff; }
.set.done .tick svg { width: 22px; height: 22px; stroke-width: 3; }
/* The set the workout bar will log next: its number and tick ring take the accent. */
.set.is-next .no { color: var(--accent-text); }
.set.is-next .tick { border: 2px solid var(--accent); color: var(--accent-text); }
.set.saving .tick { opacity: 0.55; }
.set.failed .tick { border-color: var(--bad); color: var(--bad); }
.set-err { grid-column: 2 / -1; margin: 4px 0 4px; font-size: 0.8rem; color: var(--bad); }
/* A ticked set that beat last time's: by how much, at the end of its row. */
.set-gain { display: flex; justify-content: flex-end; margin: 3px 0 2px; font-family: var(--font-display); font-stretch: 105%; font-weight: 800; font-size: 0.88rem; line-height: 18px; letter-spacing: -0.01em; color: var(--accent-text); font-variant-numeric: tabular-nums; }
.set-actions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px; }
.add-set, .remove-set { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 2px; padding: 0 2px; border: 0; background: none; color: var(--accent-text); font: inherit; font-size: 0.86rem; font-weight: 600; cursor: pointer; }
.remove-set { color: var(--ink-2); }
.add-set i, .remove-set i { font-size: 1rem; }
.add-set:hover:not(:disabled), .remove-set:hover:not(:disabled) { text-decoration: underline; }
.add-set:disabled, .remove-set:disabled { opacity: 0.45; cursor: not-allowed; }
.set-limit-notice { margin: 8px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--accent-soft); color: var(--ink); font-size: 0.84rem; }
.set-limit-notice[hidden] { display: none; }
.wk-foot { position: sticky; bottom: 0; z-index: 5; margin: 20px -32px -120px; padding: 16px 32px 28px; background: linear-gradient(to bottom, transparent, var(--bg) 35%); display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.wk-foot .in { display: contents; }
.wk-foot .btn { min-width: 220px; height: 52px; }
.wk-foot .note { font-size: 0.8rem; color: var(--ink-3); max-width: 220px; }
@media (max-width: 1080px) { .wk-foot { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); margin: 20px -18px -110px; padding: 14px 18px 24px; } .wk-foot .note { display: none; } .wk-foot .btn { flex: 1; } }
/* "First time": said once, above the first exercise. */
.wk-hint { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: center; margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--accent-soft); color: var(--ink); font-size: 0.9rem; line-height: 1.45; }
.wk-hint i { font-size: 1.55rem; color: var(--accent-text); }
/* Under the list while the workout is on: the saving note, and a way to
   finish before every set is ticked. */
.wk-end { display: grid; justify-items: center; gap: 12px; margin: 18px 0 0; text-align: center; }
.wk-end[hidden] { display: none; }
.wk-end p { margin: 0; font-size: 0.84rem; color: var(--ink-2); }
.wk-end p.is-bad { color: var(--bad); }
.wk-end .btn { min-height: 44px; }

/* The workout bar (workout.js): while a workout is on it takes the tab bar's
   place, with the next set in big numbers and one Tick, then the rest after
   each tick (the top edge drains as the timer), then Finish. On a desktop it
   sits under the page's column. It steps aside while a number is typed. */
html.in-workout .tabbar { display: none; }
.wbar { position: fixed; left: var(--rail-w); right: 0; bottom: 0; z-index: 40; max-width: 860px; padding: 12px 32px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--bg); }
.wbar[hidden] { display: none; }
@media (max-width: 1080px) {
    .wbar { left: 0; max-width: none; padding: 12px max(16px, env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
    html.is-typing .wbar { display: none; }
}
.wbar-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; max-width: 796px; min-height: 56px; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; -webkit-tap-highlight-color: transparent; }
button.wbar-in { cursor: pointer; }
.wbar-text { display: block; min-width: 0; }
.wbar-big { display: block; overflow: hidden; font-family: var(--font-display); font-stretch: 108%; font-weight: 800; font-size: 1.55rem; letter-spacing: -0.03em; line-height: 1.05; font-variant-numeric: tabular-nums; white-space: nowrap; text-overflow: ellipsis; }
.wbar-big .dim { color: var(--ink-2); }
/* Up to two lines, so a long exercise name doesn't cut off the numbers. */
.wbar-sub { display: -webkit-box; margin-top: 5px; overflow: hidden; font-size: 0.86rem; line-height: 1.3; color: var(--ink-2); -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.wbar-sub.is-bad { color: var(--bad); }
.wbar-tick { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 56px; padding: 0 24px 0 20px; border: 0; border-radius: var(--r-pill); background: var(--accent); color: var(--accent-ink); font: inherit; font-size: 1.05rem; font-weight: 700; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.wbar-tick svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.wbar-tick:active { background: var(--accent-strong); transform: scale(0.98); }
.wbar.is-rest::before { content: ""; position: absolute; left: 0; top: -1px; width: var(--left, 0%); height: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
.wbar-skip { display: inline-flex; align-items: center; gap: 6px; height: 46px; padding: 0 16px; border: 1.5px solid var(--line-2); border-radius: var(--r-pill); color: var(--ink); font-size: 0.95rem; font-weight: 600; }
.wbar-skip i { font-size: 1.1rem; }
button.wbar-in:active .wbar-skip { background: var(--bg-2); }
.wbar-finish { height: 56px; padding: 0 24px; font-size: 1.02rem; font-weight: 700; }
.wbar-finish i { font-size: 1.25rem; }
.wk-card { padding: 30px 26px; text-align: center; }
.wk-card p { max-width: 420px; margin: 10px auto 0; color: var(--ink-2); line-height: 1.6; }
.wk-card .btn { margin-top: 20px; }
.wk-notice { margin: 0 0 14px; padding: 14px 16px; border-radius: 12px; background: var(--accent-soft); color: var(--ink); font-size: 0.88rem; line-height: 1.55; }
.wk-notice:empty { display: none; }
/* The finish card opens with what went up, in Archivo; then the streak with
   today's link and the XP, counted once, inside the card; then sets,
   exercises and calories as one quiet line. No toast on this page. */
.done-card { padding: 24px 20px 20px; text-align: left; }
.pf-title { margin: 0; font-family: var(--font-display); font-stretch: 112%; font-weight: 800; letter-spacing: -0.035em; line-height: 0.98; font-size: 2rem; text-wrap: balance; overflow-wrap: anywhere; }
.pf-gains { margin: 12px 0 0; padding: 0; list-style: none; }
.pf-gains li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 12px; padding: 12px 0; }
.pf-gains li + li { border-top: 1px solid var(--line); }
.pf-gains .nm { font-family: var(--font-display); font-stretch: 105%; font-weight: 700; font-size: 1.25rem; letter-spacing: -0.02em; line-height: 1.2; overflow-wrap: anywhere; }
.pf-gains .up { font-family: var(--font-display); font-stretch: 108%; font-weight: 800; font-size: 1.5rem; letter-spacing: -0.03em; line-height: 1.1; color: var(--accent-text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pf-gains .was { grid-column: 1 / -1; margin-top: 3px; font-size: 0.86rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.pf-lead { margin: 12px 0 0; font-size: 1rem; line-height: 1.45; color: var(--ink-2); }
/* The goal for next time, dashed like today's open link on the chain: still to do. */
.pf-target { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; margin: 10px 0 0; padding: 14px; border: 1.5px dashed color-mix(in srgb, var(--accent) 80%, transparent); border-radius: 14px; }
.pf-target > i { font-size: 1.5rem; color: var(--accent-text); }
.pf-target .nm { font-family: var(--font-display); font-stretch: 105%; font-weight: 700; font-size: 1.2rem; letter-spacing: -0.02em; line-height: 1.2; overflow-wrap: anywhere; }
.pf-target b { font-family: var(--font-display); font-stretch: 108%; font-weight: 800; font-size: 1.4rem; letter-spacing: -0.03em; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pf-target b small { font-size: 0.62em; font-weight: 700; letter-spacing: 0; color: var(--ink-2); }
.pf-note { margin: 10px 0 0; font-size: 0.86rem; line-height: 1.5; color: var(--ink-3); }
.panel.done-card .done-streak { width: 100%; margin: 18px 0 0; }
.done-card .streak-savers { display: none; }
.pf-xp { display: flex; flex: none; align-items: baseline; gap: 4px; margin: 0 0 0 auto; font-size: 0.86rem; font-weight: 600; color: var(--ink-2); }
.pf-xp b { font-family: var(--font-display); font-stretch: 108%; font-size: 1.7rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--accent-text); font-variant-numeric: tabular-nums; }
.pf-next { margin: 0; font-size: 0.84rem; color: var(--ink-2); }
/* What else finishing earned: the full week, an achievement, a new level. */
.pf-earned { margin: 12px 0 0; padding: 0; list-style: none; }
.pf-earned:empty { display: none; }
.pf-earned li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.pf-earned li:last-child { border-bottom: 0; }
.pf-earned b { display: block; font-weight: 600; }
.pf-earned small { display: block; margin-top: 2px; font-size: 0.8rem; color: var(--ink-3); }
.pf-earned em { font-family: var(--font-display); font-stretch: 108%; font-size: 1.1rem; font-style: normal; font-weight: 800; color: var(--accent-text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pf-stats { margin: 16px 0 0; font-size: 0.88rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
/* Side by side, Back home the wider; a long translation wraps onto two rows. */
.pf-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.pf-acts .btn { flex: 1 0 auto; height: auto; min-height: 48px; }
.pf-acts .btn.accent { flex-grow: 2; }

/* the plate stack: CSS only */
.plates { position: relative; width: 120px; height: 120px; perspective: 700px; flex: none; }
.plates .p { position: absolute; left: 50%; top: 50%; width: 110px; height: 110px; margin: -55px 0 0 -55px; border-radius: 50%; background: var(--surface-2); box-shadow: inset 0 0 0 10px var(--bg-2), var(--shadow); transform: rotateX(62deg) translateZ(calc(var(--z) * 1px)); transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.plates .p.acc { background: var(--accent); box-shadow: inset 0 0 0 10px var(--accent-strong), var(--shadow); }
.plates:hover .p { transform: rotateX(62deg) translateZ(calc(var(--z) * 1.9px)); }

/* ==========================================================================
   settings
   ========================================================================== */

.swatches { display: flex; gap: 10px; flex-wrap: wrap; }
.swatch { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px 0 10px; border-radius: var(--r-pill); border: 1.5px solid var(--line-2); background: var(--surface-2); color: var(--ink); font: inherit; font-size: 0.9rem; font-weight: 500; cursor: pointer; }
.swatch i { width: 24px; height: 24px; border-radius: 50%; background: var(--sw); }
.swatch[aria-pressed="true"] { border-color: var(--ink); font-weight: 600; }
.custom-accent-option { position: relative; display: flex; align-items: center; }
.custom-swatch { --sw: #b7d83a; cursor: pointer; }
.custom-swatch[aria-disabled="true"] { opacity: 0.72; cursor: not-allowed; }
.custom-swatch[aria-pressed="true"] { border-color: var(--ink); font-weight: 600; }
.custom-accent-picker { position: absolute; z-index: 20; top: calc(100% + 8px); right: 0; display: flex; align-items: center; gap: 8px; padding: 8px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); }
.custom-accent-picker[hidden] { display: none !important; }
.custom-accent-picker input[type="color"] { width: 38px; height: 38px; padding: 3px; border: 1px solid var(--line-2); border-radius: 50%; background: var(--surface); cursor: pointer; }
.custom-accent-picker input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.custom-accent-picker input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 50%; }
.custom-accent-picker input[type="color"]:disabled { cursor: not-allowed; }
.custom-accent-close { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink-2); font: 1.4rem/1 var(--font-ui); cursor: pointer; }
.custom-accent-close:hover { background: var(--surface-2); color: var(--ink); }
.custom-accent-lock { display: inline-flex !important; align-items: center; gap: 4px; margin: 0 !important; color: var(--ink-3) !important; font-size: 0.72rem !important; }
.custom-accent-lock[hidden] { display: none !important; }
.custom-accent-note { margin: 8px 0 0; }
.custom-accent-note a { color: var(--accent-text); font-weight: 600; }
.settings-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.settings-row:last-child { border-bottom: 0; }
.settings-row b { display: block; font-size: 0.95rem; font-weight: 600; }
.settings-row span { display: block; margin-top: 2px; font-size: 0.84rem; color: var(--ink-3); }
.settings-row .inp { max-width: 320px; }
.danger-card { border: 1.5px solid var(--bad-soft); }
@media (max-width: 640px) { .settings-row { flex-direction: column; align-items: stretch; } .settings-row .inp { max-width: none; } }

/* ==========================================================================
   motion and small screens
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .rise { animation: none; }
   .tilt, .btn, .plates .p, .tile, .req { transition: none; }
    .plates:hover .p { transform: rotateX(62deg) translateZ(calc(var(--z) * 1px)); }
    html { scroll-behavior: auto; }
}

@media (max-width: 900px) {
    .g2, .g3, .g4 { grid-template-columns: 1fr; }
    .fields.two, .fields.three { grid-template-columns: 1fr; }
    .card-lg { padding: 22px; }
    .wrap, .wrapw, .wrapm, .wraps, .page-shell, .page { width: calc(100% - 32px); }
    .pad { padding: 20px 0 90px; }
    .section { padding: 64px 0; }
}

/* ==========================================================================
   posts: writing one, and how one reads in the feed
   ========================================================================== */

.compose { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 18px; }
.compose .av { width: 44px; height: 44px; border-radius: 12px; }
.compose textarea.inp { min-height: 48px; height: 48px; padding: 11px 14px; resize: none; line-height: 1.45; overflow: hidden; }
.compose-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 10px; }
.compose-foot .sub { font-variant-numeric: tabular-nums; }
.compose-actions { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 8px; width: min(100%, 188px); max-width: 100%; margin-left: auto; }
.compose-actions > button { min-width: 0; width: 100%; min-height: 44px; }
.compose-actions #emojiBtn, .compose-actions #postBtn { width: 44px; padding: 0; }
.compose-actions #gifBtn { min-width: 0; padding: 0 8px; white-space: nowrap; }
.compose-actions #postBtn i { font-size: 1rem; }
.compose-gif-preview { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; }
.compose-gif-preview[hidden] { display: none; }
.compose-gif-preview img { display: block; width: min(220px, 100%); max-height: 150px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; }
.gif-picker { width: min(680px, calc(100vw - 32px)); max-height: min(760px, calc(100vh - 32px)); padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.gif-picker::backdrop { background: rgb(0 0 0 / 58%); }
.gif-picker__inner { display: grid; grid-template-rows: auto auto auto minmax(0, 1fr) auto; max-height: min(760px, calc(100vh - 32px)); padding: 18px; }
.gif-picker__head, .gif-picker__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.gif-picker__head h2 { margin: 0; font-size: 1.1rem; }
.gif-picker__search { display: flex; gap: 8px; margin: 14px 0 8px; }
.gif-picker__search input { min-width: 0; flex: 1; }
.gif-picker__status { min-height: 1.4em; margin: 4px 0 10px; color: var(--ink-2); font-size: 0.88rem; }
.gif-picker__results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: start; gap: 8px; min-height: 110px; overflow-y: auto; }
.gif-picker__result { min-width: 0; aspect-ratio: 1.35; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: var(--bg-2); cursor: pointer; }
.gif-picker__result img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gif-picker__foot { padding-top: 12px; color: var(--ink-3); font-size: 0.78rem; }
.emoji-picker { width: min(390px, calc(100vw - 32px)); max-height: min(520px, calc(100vh - 32px)); padding: 0; overflow: auto; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.emoji-picker::backdrop { background: rgb(0 0 0 / 58%); }
.emoji-picker__inner { padding: 18px; }
.emoji-picker__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.emoji-picker__head h2 { margin: 0; font-size: 1.1rem; }
.emoji-picker__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-top: 14px; }
.emoji-picker__choice { display: grid; place-items: center; min-width: 0; aspect-ratio: 1; padding: 0; border: 1px solid transparent; border-radius: 10px; background: var(--bg-2); font: inherit; font-size: 1.35rem; cursor: pointer; }
.emoji-picker__choice:hover, .emoji-picker__choice:focus-visible { border-color: var(--accent); background: var(--accent-soft); outline: none; }
.emoji-picker__status:empty { display: none; }
.emoji-picker__status { margin: 12px 0 0; color: var(--bad); font-size: 0.82rem; }
.chat-report-dialog { width: min(480px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; overflow: auto; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.chat-report-dialog::backdrop { background: rgb(0 0 0 / 58%); }
.chat-report__form { display: grid; gap: 10px; padding: 20px; }
.chat-report__head, .chat-report__actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.chat-report__head h2 { margin: 0; font-size: 1.1rem; }
.chat-report__form > p { margin: 0; }
.chat-report__form > label { margin-top: 4px; font-size: 0.84rem; font-weight: 600; }
.chat-report__form textarea { min-height: 100px; resize: vertical; }
.chat-report__status { min-height: 1.3em; margin: 0; color: var(--bad); font-size: 0.82rem; }
.chat-report__status:empty { display: none; }
.chat-report__status.is-success { color: var(--ok); }
.chat-report__actions { justify-content: flex-end; margin-top: 4px; }
/* The box is sized before the GIF arrives, so the feed doesn't jump when it does. */
.post-gif { display: block; width: min(420px, 100%); aspect-ratio: 4 / 3; max-height: 320px; margin-top: 10px; border-radius: 8px; object-fit: contain; object-position: left center; background: var(--bg-2); }
.compose .status:empty { display: none; }
.post .body { margin: 6px 0 0; font-size: 1rem; line-height: 1.5; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.post .handle { font-size: 0.84rem; color: var(--ink-3); }
.feed-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.scope { display: inline-flex; padding: 3px; border-radius: var(--r-pill); background: var(--bg-2); }
.scope button { height: 32px; padding: 0 14px; border: 0; border-radius: var(--r-pill); background: none; color: var(--ink-2); font: inherit; font-size: 0.84rem; font-weight: 500; cursor: pointer; }
.scope button.on { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: var(--shadow); }

/* ==========================================================================
   blobatar faces (avatars.js): the drawing fills its tile
   ========================================================================== */

[data-avatar] > svg { display: block; width: 100%; height: 100%; }
.av.is-blob, .avatar.is-blob { background: var(--bg-2); padding: 0; }


/* ==========================================================================
   The streak (streak.js): the number with its flame, the two shield slots,
   the tier line and eight weeks of days. One flame, lit or not.
   ========================================================================== */

.streak { display: grid; gap: 10px; }
.streak-top { display: flex; align-items: center; gap: 12px; }
.streak-flame { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 14px; background: var(--line); color: var(--ink-3); font-size: 1.45rem; line-height: 1; }
.streak.is-lit .streak-flame { background: var(--accent); color: var(--accent-ink); }
.streak.is-risk .streak-flame { background: var(--bad-soft); color: var(--bad); }
.streak-count b { display: block; font-family: var(--font-display); font-stretch: 108%; font-size: 2.1rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.streak-count span { display: block; margin-top: 3px; font-size: 0.8rem; color: var(--ink-3); white-space: nowrap; }
.streak-savers { display: inline-flex; flex: none; align-items: center; gap: 4px; margin-left: auto; white-space: nowrap; padding: 5px 10px 5px 8px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-text); font-size: 0.86rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.streak-savers i { font-size: 1.05rem; }
a.streak-savers:hover { background: var(--accent); color: var(--accent-ink); }
.streak-tier { margin: 0; font-size: 0.84rem; font-weight: 500; color: var(--ink-2); }
.streak-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); grid-template-rows: repeat(7, auto); grid-auto-flow: column; gap: 4px; max-width: 264px; }
.streak-grid i { aspect-ratio: 1; min-width: 0; border-radius: 4px; background: var(--line); }
.streak-grid i.none { opacity: 0.6; }
.streak-grid i.rest { background: var(--chain-rest); }
.streak-grid i.done { background: var(--accent); }
.streak-grid i.shield { background: var(--accent-soft); outline: 1.5px solid var(--accent-strong); outline-offset: -1.5px; }
.streak-grid i.missed, .streak-key i.missed { position: relative; background: var(--bad); }
.streak-grid i.missed::after, .streak-key i.missed::after { content: ""; position: absolute; left: 12%; right: 12%; top: 50%; height: 2px; margin-top: -1px; border-radius: 2px; background: var(--bg); transform: rotate(-45deg); }
.streak-grid i.holiday, .streak-key i.holiday { background: color-mix(in srgb, var(--ink-3) 40%, transparent); }
.streak-grid i.pending { background: transparent; outline: 2px solid var(--accent); outline-offset: -2px; }
.streak-grid i.future { background: transparent; }
.streak-key { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; padding: 0; list-style: none; font-size: 0.72rem; color: var(--ink-3); }
.streak-key li { display: inline-flex; align-items: center; gap: 5px; }
.streak-key i { width: 10px; height: 10px; border-radius: 3px; background: var(--accent); }
.streak-key i.rest { background: var(--chain-rest); }
.streak-key i.shield { background: var(--accent-soft); outline: 1.5px solid var(--accent-strong); outline-offset: -1.5px; }
.streak-risk { margin: 0; font-size: 0.84rem; color: var(--ink-2); }
.streak.is-risk .streak-risk { font-weight: 600; color: var(--bad); }
.streak.is-compact { gap: 6px; }
.streak.is-compact .streak-flame { width: 40px; height: 40px; border-radius: 12px; font-size: 1.25rem; }
.streak.is-compact .streak-count b { font-size: 1.7rem; }

/* The chain (streak.js, on Home and the finish card): ten days as links on
   one thread. A session is a full circle with a small flame, a rest day a
   small dot in the colour of the profile grid's rest squares, a saver a
   shield, a holiday an island in a dotted ring, a miss a red struck-through
   link that cuts the thread, and today, while it is open, a dashed ring.
   Rest dots and the thread are the accent mixed into what they sit on
   (--chain-bg), a little stronger on the pale light cards. */
:root { --chain-rest-mix: 58%; --chain-thread-mix: 34%; --chain-done-edge: color-mix(in srgb, var(--accent-text) 40%, transparent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --chain-rest-mix: 50%; --chain-thread-mix: 28%; --chain-done-edge: transparent; } }
:root[data-theme="dark"] { --chain-rest-mix: 50%; --chain-thread-mix: 28%; --chain-done-edge: transparent; }
.chain-slot, .chain-mark, .streak-grid i, .streak-key i {
    --chain-rest: color-mix(in srgb, var(--accent-text) var(--chain-rest-mix), var(--chain-bg, var(--surface)));
    --chain-thread: color-mix(in srgb, var(--accent-text) var(--chain-thread-mix), var(--chain-bg, var(--surface)));
}
.streak-chain { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.chain-days { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.chain-day { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 7px; min-width: 0; }
.chain-slot { position: relative; display: grid; place-items: center; width: 100%; height: 28px; }
/* The thread: half a column either side of a link, drawn toward each
   neighbour that kept the streak too. The first link's runs in from the
   edge of the card when the streak goes back further than ten days. */
.chain-slot::before, .chain-slot::after { content: ""; position: absolute; top: 50%; display: none; height: 3px; margin-top: -1.5px; background: var(--chain-thread); }
.chain-slot::before { left: 0; right: 50%; }
.chain-slot::after { left: 50%; right: 0; }
.chain-day.tie-l .chain-slot::before, .chain-day.tie-r .chain-slot::after { display: block; }
.chain-day.tie-in .chain-slot::before { left: calc(-1 * var(--chain-lead, 12px)); }
/* Into today, while it is still open, the thread is dashed. */
.chain-day.is-pending.tie-l .chain-slot::before { background: repeating-linear-gradient(90deg, var(--chain-thread) 0 4px, transparent 4px 7px); }
.chain-dl { font-size: 0.7rem; font-weight: 600; line-height: 1; color: var(--ink-2); white-space: nowrap; }
.chain-day.is-today .chain-dl { color: var(--accent-text); font-weight: 700; }
/* A long word for Today (French) takes the room of the letter before it. */
.chain-days.is-long-today .chain-day:nth-last-child(2) .chain-dl { visibility: hidden; }
.chain-days.is-long-today .chain-day.is-today .chain-dl { justify-self: end; }
/* One mark per kind of day, the same in the chain, the legend and the list. */
.chain-mark { position: relative; z-index: 1; display: grid; place-items: center; flex: none; width: var(--chain-mark, 26px); height: var(--chain-mark, 26px); border-radius: 50%; font-size: 13px; font-style: normal; line-height: 1; }
.chain-mark .ph { font-family: "Phosphor-Fill" !important; }
.chain-mark.done { background: var(--accent); box-shadow: inset 0 0 0 1.5px var(--chain-done-edge); }
.chain-mark.rest { width: 10px; height: 10px; background: var(--chain-rest); }
.chain-mark.shield { border: 2px solid var(--accent-strong); background: linear-gradient(var(--accent-soft), var(--accent-soft)), var(--chain-bg, var(--surface)); color: var(--accent-text); }
.chain-mark.missed { background: var(--bad); }
.chain-mark.missed::after { content: ""; position: absolute; left: 22%; right: 22%; top: 50%; height: 2.5px; margin-top: -1.25px; border-radius: 2px; background: var(--chain-bg, var(--surface)); transform: rotate(-45deg); }
.chain-mark.holiday { border: 2px dotted var(--ink-3); background: var(--chain-bg, var(--surface)); color: var(--ink-2); }
.chain-mark.pending { border: 2px dashed var(--accent-text); background: var(--chain-bg, var(--surface)); }
.chain-mark.none { width: 8px; height: 8px; border: 1.5px solid var(--ink-3); }
/* The small flame inside each session, dark on the accent. */
.chain-flame { color: var(--accent-ink); opacity: 0.6; font-size: 0.8rem; pointer-events: none; }

/* The number and its flame a size down, in the sheet and on the finish card. */
.streak-sheet-head .streak-top, .done-streak .streak-top { gap: 10px; }
.streak-sheet-head .streak-flame, .done-streak .streak-flame,
.streak-sheet-head .streak-flame img, .done-streak .streak-flame img { width: 36px; height: 36px; }
/* The tier's name, when the finish card shows a new one, wraps under. */
.streak-sheet-head .streak-count, .done-streak .streak-count { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 7px; min-width: 0; }
.streak-sheet-head .streak-count b, .done-streak .streak-count b { font-size: 1.7rem; }
.streak-sheet-head .streak-count span, .done-streak .streak-count span { margin: 0; font-size: 0.86rem; }

/* The sheet the Home card opens: the number, what each mark means, and the
   ten days in words with today first. */
.streak-sheet .sheet-card:focus { outline: none; }
.streak-sheet-head { gap: 6px; }
.streak-sheet-head .streak-tier { padding-left: 46px; }
.streak-legend { --chain-bg: var(--bg-2); display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 14px 0 0; padding: 10px 12px; border-radius: 14px; background: var(--bg-2); list-style: none; font-size: 0.86rem; font-weight: 600; color: var(--ink); }
.streak-legend li { display: inline-flex; align-items: center; gap: 6px; }
.streak-legend .chain-slot, .streak-log .chain-slot { width: 26px; height: 28px; flex: none; }
.streak-sheet-note { margin: 12px 0 0; font-size: 0.86rem; line-height: 1.45; color: var(--ink-2); }
.streak-sheet-h { margin: 16px 0 2px; font-family: var(--font-display); font-stretch: 105%; font-size: 1.02rem; font-weight: 700; letter-spacing: -0.01em; }
/* One grid for the whole list, so the dates line up whatever their length. */
.streak-log { display: grid; grid-template-columns: 26px max-content minmax(0, 1fr); column-gap: 12px; margin: 0; padding: 0; list-style: none; }
.streak-log li { display: grid; grid-column: 1 / -1; grid-template-columns: 26px 54px minmax(0, 1fr); grid-template-columns: subgrid; column-gap: 12px; align-items: center; min-height: 34px; border-bottom: 1px solid var(--line); font-size: 0.88rem; line-height: 1.3; }
.streak-log li:last-child { border-bottom: 0; }
.streak-log b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.streak-log li > span:last-child { color: var(--ink-2); }
.streak-log li.is-today b { color: var(--accent-text); }
.streak-log li.is-missed > span:last-child { color: var(--bad); }
.streak-sheet-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
/* Long translations wrap instead of pushing the sheet wider. */
.streak-shop { flex: 1; height: auto; min-height: 46px; padding-top: 10px; padding-bottom: 10px; white-space: normal; text-align: center; }
/* Phones close it with the sheet's own cross or a drag down. */
@media (max-width: 1080px) { .streak-sheet-close { display: none; } }

/* The flame beside a name. Five stages, each with its own mark and a louder
   look than the one before: grey, accent, tinted chip, solid chip, inverted. */
.flame { display: inline-grid; place-items: center; flex: none; width: 1.35em; height: 1.35em; margin-left: 0.3em; border-radius: 50%; font-size: 0.95em; font-style: normal; line-height: 1; vertical-align: -0.2em; color: var(--ink-3); }
.flame[hidden] { display: none; }
.flame.t1 { color: var(--ink-3); }
.flame.t2 { color: var(--accent-text); }
.flame.t3 { background: var(--accent-soft); color: var(--accent-text); }
.flame.t4 { background: var(--accent); color: var(--accent-ink); }
.flame.t5 { background: var(--ink); color: var(--bg); }
.flame.is-large { width: 1.15em; height: 1.15em; font-size: 0.72em; vertical-align: 0.08em; }
/* The marks are pictures now (streak-*.png): no box behind them, the picture
   fills the slot. The admin crown is the black one. */
.streak-flame { background: none !important; color: inherit; }
.streak-flame img, .flame img, .streak-zero img { display: block; width: 100%; height: 100%; object-fit: contain; }
.streak-flame img { width: 46px; height: 46px; transform: scale(1.4); }
.streak.is-compact .streak-flame img { width: 40px; height: 40px; }
.streak.is-risk .streak-flame img { filter: saturate(0.6) brightness(0.8); }
.flame { background: none !important; width: 1.5em; height: 1.5em; margin-left: 0.2em; border-radius: 0; vertical-align: -0.35em; }
.flame.t5, .flame.tadmin { width: 1.7em; height: 1.7em; vertical-align: -0.4em; }
.flame.is-large { width: 1.25em; height: 1.25em; font-size: 1em; vertical-align: -0.2em; }
.flame.is-large.t5, .flame.is-large.tadmin { width: 1.45em; height: 1.45em; }
.streak-zero img { width: 1.5em; height: 1.5em; opacity: 0.55; }

.flame.is-large.t1, .flame.is-large.t2 { background: var(--bg-2); }

/* The hub: today's session, the chain and who has written sit in the side
   column. On one column they come straight after the row of faces. */
.today-card.is-side { grid-template-columns: minmax(0, 1fr) auto; gap: 14px; padding: 22px; }
.today-card.is-side > div:first-child { grid-column: 1; grid-row: 1; }
.today-card.is-side > .week-progress { grid-column: 2; grid-row: 1; align-self: start; justify-self: end; }
.today-card.is-side > .stage3d { grid-column: 1 / -1; grid-row: 2; width: 100%; height: 140px; justify-self: stretch; }
/* The fallback drawing is allowed to overflow in the big card; here it must stay inside. */
.today-card.is-side > .stage3d { overflow: hidden; }
.today-card.is-side h2 { gap: 12px; font-size: 1.7rem; }
.today-card.is-side .day-icon { flex-basis: 44px; width: 44px; height: 44px; border-radius: 13px; font-size: 1.25rem; }
.today-card.is-side .ring { width: 78px; height: 78px; }
.streak-home { padding-top: 18px; }
.inbox-card .card-head { margin-bottom: 0; }
.inbox:not(:empty) { display: grid; gap: 4px; margin-top: 12px; }
.inbox-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; color: inherit; }
.inbox-row:hover { background: var(--bg-2); }
.inbox-row .av { width: 36px; height: 36px; border-radius: 11px; font-size: 0.74rem; }
.inbox-row b { font-size: 0.92rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The chain before day one: one line instead of ten empty links. */
.streak-zero { display: flex; align-items: center; gap: 10px; margin: 0; font-weight: 600; color: var(--ink-2); }
.streak-zero i { color: var(--accent-text); font-size: 1.3rem; }
@media (max-width: 1180px) {
    .social.hub { display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
    .social.hub .col-feed, .social.hub .col-side { display: contents; }
    .social.hub .col-feed > * + * { margin-top: 0; }
    .social.hub .today-card { order: 1; }
    .social.hub .streak-home { order: 2; }
    .social.hub .storyrow { order: 3; }
    .social.hub .find-card { order: 3; }
    .social.hub .requests { order: 4; }
    .social.hub .compose { order: 6; }
    .social.hub .feed-head { order: 7; }
    .social.hub .feed { order: 8; }
}

/* ---- Home's top bar (home.js) ----
   At the top: "Good morning," small and your first name large on its own
   line, today's date in a pill that opens the Calendar, then the bell and
   your face on the right. Scroll past the name and a compact solid bar drops
   in (no blur): the name, the date, your streak, the bell and a small face.
   The bell's panel drops from whichever of the two is showing. */
.hello { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-rows: auto auto auto; column-gap: 6px; margin: 8px 0 22px; }
.hello-small { grid-column: 1; grid-row: 1; margin: 0; font-size: 1.05rem; font-weight: 600; line-height: 1.25; color: var(--ink-2); }
.hello-name-row { display: flex; grid-column: 1; grid-row: 2; align-items: center; gap: 12px; min-width: 0; }
.hello-big { min-width: 0; max-width: calc(100% - 56px); min-height: 0.95em; margin: 2px 0 0; font-family: var(--font-display); font-stretch: 112%; font-weight: 800; font-size: 3.1rem; letter-spacing: -0.04em; line-height: 0.95; white-space: nowrap; color: var(--ink); }
/* Post a story: a small accent button in a thin ring, like a story ring
   waiting to be filled. 34 px, with a 44 px tap box around it. */
.hello-story-add { position: relative; display: grid; flex: 0 0 34px; place-items: center; width: 34px; height: 34px; margin-top: 4px; padding: 0; border: 0; border-radius: 50%; outline: 1.5px solid color-mix(in srgb, var(--accent) 50%, transparent); outline-offset: 3px; background: var(--accent); color: var(--accent-ink, #000); font: inherit; cursor: pointer; transition: transform 0.18s cubic-bezier(0.3, 1.5, 0.5, 1), outline-color 0.18s ease; -webkit-tap-highlight-color: transparent; }
.hello-story-add::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; }
.hello-story-add i { font-size: 1.05rem; -webkit-text-stroke: 0.9px currentColor; transition: transform 0.25s cubic-bezier(0.3, 1.5, 0.5, 1); }
.hello-story-add:hover { outline-color: var(--accent); }
.hello-story-add:hover i { transform: rotate(90deg); }
.hello-story-add:active { transform: scale(0.9); }
.hello-story-add:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
    .hello-story-add, .hello-story-add i { transition: none; }
    .hello-story-add:hover i { transform: none; }
}
/* A long name steps down a size, then two (home.js measures it). */
.hello-big.is-long { font-size: 2.35rem; }
.hello-big.is-longer { font-size: 1.8rem; white-space: normal; overflow-wrap: anywhere; }
.hello-pill { grid-column: 1 / -1; grid-row: 3; justify-self: start; position: relative; display: inline-flex; align-items: center; gap: 7px; height: 32px; margin-top: 14px; padding: 0 13px 0 10px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); color: var(--ink-2); font-size: 0.84rem; font-weight: 600; line-height: 1; white-space: nowrap; -webkit-tap-highlight-color: transparent; }
/* A 44 px tall tap box around the 32 px pill. */
.hello-pill::after { content: ""; position: absolute; inset: -6px -4px; }
.hello-pill i { font-size: 1.05rem; }
.hello-pill .ico { --ico-dark: var(--surface); }
.hello-pill:active { background: var(--bg-2); }
.hello > .hello-bell { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.avatar.hello-face { grid-column: 3; grid-row: 1 / span 2; align-self: center; width: 56px; height: 56px; border-radius: 18px; font-size: 1rem; -webkit-tap-highlight-color: transparent; }
/* The same top for a page title (Chats): the name and your face on one row,
   the pill under them. French "Discussions" steps down a size to fit. */
.hello.is-title { grid-template-rows: auto auto; margin-top: 20px; }
.hello.is-title .hello-big { grid-column: 1; grid-row: 1; max-width: none; margin: 0; }
.hello.is-title .hello-pill { grid-row: 2; }
.hello.is-title .hello-face { grid-column: 3; grid-row: 1; align-self: center; -webkit-tap-highlight-color: transparent; }
.hello.is-title .hello-face .avatar { width: 56px; height: 56px; border-radius: 18px; font-size: 1rem; }
:lang(fr) .hello.is-title .hello-big { font-size: 2.35rem; }

/* The bell: 44 px, with a dot while something new has come in. */
.hello-bell { position: relative; display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 12px; background: none; color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.hello-bell i { font-size: 1.55rem; }
.hello-bell i.has-ico { font-size: 1.7rem; }
.hello-bell:active, .hello-bell[aria-expanded="true"] { background: var(--accent-soft); }
.bell-dot { position: absolute; top: 9px; right: 10px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); outline: 2px solid var(--bg); }

/* The compact bar. Its own padding clears the notch, so nothing scrolls under the clock. */
.hello-bar { position: fixed; z-index: 38; top: 0; left: 0; right: 0; padding-top: env(safe-area-inset-top, 0px); border-bottom: 1px solid var(--line); background: var(--bg); transform: translateY(-100%); visibility: hidden; transition: transform 240ms cubic-bezier(0.2, 0.9, 0.3, 1), visibility 0s linear 240ms; }
.hello-bar.is-on { transform: none; visibility: visible; transition: transform 260ms cubic-bezier(0.2, 0.9, 0.3, 1), visibility 0s; }
/* While the page opens: no slide, so a page that opens scrolled has the bar in at once. */
.hello-bar.is-instant { transition: none; }
/* A jump to the feed (the bell's like and reply links go to #feedList) or
   keyboard focus stops below the compact bar, not under it. */
html:has(#helloBar) { scroll-padding-top: calc(env(safe-area-inset-top, 0px) + 68px); }
.hello-bar-in { display: flex; align-items: center; gap: 6px; height: 56px; padding: 0 max(14px, env(safe-area-inset-right)) 0 max(18px, env(safe-area-inset-left)); }
.hello-bar-title { flex: 1; display: flex; align-items: center; min-width: 0; height: 44px; padding: 0; border: 0; background: none; color: var(--ink); text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.hello-bar-title > span { display: flex; align-items: baseline; gap: 9px; min-width: 0; }
.hello-bar-title b { overflow: hidden; font-family: var(--font-display); font-stretch: 112%; font-weight: 800; font-size: 1.32rem; letter-spacing: -0.03em; line-height: 1.1; white-space: nowrap; text-overflow: ellipsis; }
.hello-bar-title small { font-size: 0.82rem; font-weight: 600; line-height: 1; color: var(--ink-3); white-space: nowrap; }
.hello-streak { position: relative; display: inline-flex; flex: none; align-items: center; gap: 3px; height: 34px; padding: 0 12px 0 5px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.hello-streak::after { content: ""; position: absolute; inset: -5px -3px; }
.hello-streak:active { background: var(--bg-2); }
.hello-flame { display: grid; width: 26px; height: 26px; }
.hello-flame .flame { width: 100%; height: 100%; margin: 0; vertical-align: 0; }
.hello-streak b { font-family: var(--font-display); font-stretch: 108%; font-weight: 800; font-size: 1.02rem; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.hello-bar-face { display: grid; place-items: center; flex: none; width: 44px; height: 44px; -webkit-tap-highlight-color: transparent; }
.hello-bar-face .avatar { width: 36px; height: 36px; border-radius: 12px; font-size: 0.72rem; }
/* The smallest phones keep the name and drop the date from the compact bar. */
@media (max-width: 359px) { .hello-bar-title small { display: none; } }

/* The bell's panel: it drops from the bottom of the top bar over the dimmed
   page and stops above the dock (home.js measures both edges). The dock and
   its Tools menu stay above it. */
.bell-pop { position: fixed; z-index: 37; top: var(--bell-top, 0px); left: 0; right: 0; bottom: 0; display: flex; align-items: flex-start; justify-content: center; visibility: hidden; pointer-events: none; touch-action: none; transition: visibility 0s linear 200ms; }
.bell-pop::before { content: ""; position: absolute; inset: 0; background: rgba(21, 22, 26, 0.36); opacity: 0; transition: opacity 200ms ease; }
.bell-card { position: relative; z-index: 1; width: 100%; max-height: calc(100% - var(--bell-below, 0px) - 12px); overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; padding: 0 18px 8px; border: 1px solid var(--line); border-radius: 0 0 22px 22px; background: var(--surface); box-shadow: var(--shadow); transform: translateY(-16px); opacity: 0; transition: transform 200ms ease, opacity 160ms ease; }
.bell-card:focus { outline: none; }
.bell-card h2 { margin: 0; padding: 16px 0 12px; font-family: var(--font-display); font-stretch: 108%; font-weight: 800; font-size: 1.2rem; letter-spacing: -0.02em; line-height: 1; color: var(--ink); }
/* The title with Mark all read across from it. */
.bell-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bell-mark { min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--accent-text); font: inherit; font-size: 0.86rem; font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.bell-pop.is-open { visibility: visible; pointer-events: auto; transition: visibility 0s; }
.bell-pop.is-open::before { opacity: 1; }
.bell-pop.is-open .bell-card { transform: none; opacity: 1; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .bell-pop::before { background: rgba(0, 0, 0, 0.66); }
    :root:not([data-theme="light"]) .bell-card { box-shadow: none; }
}
:root[data-theme="dark"] .bell-pop::before { background: rgba(0, 0, 0, 0.66); }
:root[data-theme="dark"] .bell-card { box-shadow: none; }
/* On a phone the page behind holds still while the panel is open. */
@media (max-width: 1080px) {
    html.bell-open, html.bell-open body { overflow: hidden; }
}
/* Beside the rail: the bar spans the page column, the panel is a card under
   the bell, and the side column sticks below the bar. */
@media (min-width: 1081px) {
    .hello-bar, .bell-pop { left: var(--rail-w); }
    .hello-bar-in { padding: 0 26px 0 32px; }
    .bell-pop { justify-content: flex-end; padding: 8px 26px 0; }
    .bell-card { width: min(400px, 100%); border-radius: 18px; }
    .social.hub .col-side { top: 76px; }
}
@media (prefers-reduced-motion: reduce) {
    .hello-bar, .hello-bar.is-on, .bell-pop, .bell-pop::before, .bell-card { transition: none; }
}

/* The number under each face on the hub. Faces with and without one line up. */
.friends-row .fr { align-content: start; }
.fr .fr-streak { display: inline-flex; align-items: center; gap: 3px; margin-top: 2px; font-size: 0.72rem; font-weight: 600; color: var(--accent-text); }
.fr .fr-streak i { font-size: 0.8rem; }
.fr .fr-streak.is-risk { color: var(--ink-3); }

/* A link that is switched off for now: grey, not clickable, not in the tab order. */
a.is-off, .nav .links a.is-off, .foot nav a.is-off { color: var(--ink-3); opacity: 0.45; pointer-events: none; cursor: default; text-decoration: none; }
.btn.is-off { opacity: 0.45; pointer-events: none; }

/* The streak on the finish card of a workout. */
.done-streak { width: fit-content; max-width: 100%; margin: 18px auto 0; padding: 14px 18px; border-radius: 14px; background: var(--bg-2); text-align: left; }
.done-streak:empty { display: none; }
.done-streak:has(.chain-days) { width: min(100%, 380px); padding: 14px 12px 12px; --chain-bg: var(--bg-2); --chain-mark: 24px; --chain-lead: 12px; }
/* Today's link, just filled, wears a ring. */
.done-streak .chain-day.is-today .chain-mark.done::before { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--accent); }
.done-card.is-fresh { animation: done-rise 520ms cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes done-rise { from { opacity: 0; transform: translateY(24px); } }
.chain-pulse { position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--accent); pointer-events: none; }
.streak-tierup { display: block; margin-top: 4px; font-size: 0.84rem; font-weight: 700; color: var(--accent-text); }
@media (prefers-reduced-motion: reduce) { .done-card.is-fresh { animation: none; } }

/* ---- Opened from the home screen ----
   The app runs full screen with the status bar laid over the top (its text is
   white), so pages start below it, a dark strip sits behind the clock, and
   nothing slips under the rounded corners. */
@media (display-mode: standalone) {
    body { padding-top: env(safe-area-inset-top); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
    html::after { content: ""; position: fixed; top: 0; left: 0; right: 0; z-index: 900; height: env(safe-area-inset-top); background: #000000; pointer-events: none; }
}

/* ---- Notices (were notifications.css, loaded late by ui.js) ---- */
.app-notice {
    width: min(440px, calc(100vw - 32px));
    max-width: calc(100vw - 32px);
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--shadow-lg);
}
.app-notice::backdrop { background: rgba(8, 10, 14, 0.62); }
.app-notice__panel { padding: 24px; }
.app-notice h2 { margin: 0; font-family: var(--font-display); font-size: 1.25rem; line-height: 1.3; }
.app-notice p { margin: 10px 0 0; color: var(--ink-2); font-size: 0.92rem; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.app-notice__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 22px; }
.app-notice__actions button { min-width: 88px; }
.app-notice__actions [hidden] { display: none; }
.app-notice__actions .btn.is-danger, .app-notice__actions .btn.is-danger:hover { background: var(--bad); color: var(--surface); }
@media (max-width: 480px) {
    .app-notice__panel { padding: 20px; }
    .app-notice__actions button { min-width: 0; }
}
@media (prefers-reduced-motion: no-preference) {
    .app-notice[open] { animation: app-notice-in 140ms ease-out both; }
    @keyframes app-notice-in { from { transform: translateY(6px) scale(0.985); } to { transform: translateY(0) scale(1); } }
}

/* ==========================================================================
   Exercise forms, picker and builder (exercise-library.js, exercises.html,
   the book and Swap buttons on Today). Both sheets are ordinary .sheet/.sheet-card
   popups, so ui.js turns them into bottom sheets on phones.
   ========================================================================== */

.ex-sheet .sheet-card { overscroll-behavior: contain; --ex-pad: 24px; }
.ex-sheet .sheet-card:focus { outline: none; }
/* The form opens on top of the picker; the second dim is lighter. */
.ex-form-sheet { z-index: 1001; }
.ex-form-sheet.is-stacked { background: rgba(12, 13, 16, calc(0.35 * var(--sheet-dim, 1))); }
@media (min-width: 1081px) {
    .ex-form-sheet .sheet-card { width: min(540px, 100%); }
    .ex-picker .sheet-card { width: min(580px, 100%); height: min(720px, 86vh); }
}
@media (max-width: 1080px) {
    .ex-sheet .sheet-card { --ex-pad: 20px; }
    /* One height while typing, so the sheet does not jump with every letter. */
    html .ex-picker .sheet-card { height: 88dvh; }
}

/* the form sheet: name, muscles, the photos, the steps */
.ex-form-head h3 { margin: 0; overflow-wrap: anywhere; }
.ex-shown { margin: 4px 0 0; font-size: 0.84rem; color: var(--ink-3); }
.ex-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.ex-meta:empty { display: none; }
.ex-also { margin: 8px 0 0; font-size: 0.84rem; color: var(--ink-2); }
.ex-form-body { margin-top: 18px; }
.ex-form-body .ex-loading { margin: 0; }
.ex-none { margin: 0 0 6px; font-size: 0.92rem; color: var(--ink-2); }
.ex-fail { padding: 14px 16px; border-radius: 12px; background: var(--bg-2); font-size: 0.9rem; color: var(--ink-2); }
.ex-fail p { margin: 0 0 10px; }

/* Start and end of the movement, one on top of the other. The end photo shows
   for 1.2 s, then the start for 1.2 s: a hard cut, never a fade. */
.ex-photo { position: relative; aspect-ratio: 850 / 567; margin: 0 0 18px; border-radius: 14px; overflow: hidden; background: var(--bg-2); }
.ex-photo figure { position: absolute; inset: 0; margin: 0; }
.ex-photo img { width: 100%; height: 100%; object-fit: cover; }
.ex-photo figcaption { position: absolute; left: 10px; top: 10px; display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--r-pill); background: var(--surface); color: var(--ink); font-size: 0.72rem; font-weight: 600; box-shadow: var(--shadow); }
.ex-photo figure + figure { opacity: 0; }
.ex-photo.is-ready figure + figure { animation: ex-flip 2.4s steps(1, end) infinite; }
@keyframes ex-flip { 0% { opacity: 0; } 50%, 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .ex-photo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; aspect-ratio: auto; overflow: visible; border-radius: 0; background: none; }
    .ex-photo figure { position: relative; inset: auto; aspect-ratio: 850 / 567; border-radius: 12px; overflow: hidden; background: var(--bg-2); }
    .ex-photo figure + figure, .ex-photo.is-ready figure + figure { opacity: 1; animation: none; }
}

.ex-steps { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: ex-step; }
.ex-steps li { counter-increment: ex-step; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; font-size: 0.93rem; line-height: 1.55; }
.ex-steps li::before { content: counter(ex-step); display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--bg-2); color: var(--ink-2); font-size: 0.78rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ex-form-sheet .sheet-actions { align-items: center; margin-top: 22px; }
.ex-credit { flex: 1 1 220px; margin: 0; font-size: 0.74rem; line-height: 1.5; color: var(--ink-3); }
.ex-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.ex-credit a:hover { color: var(--ink); }

/* the picker: title, search and parts stay put while the list scrolls under them */
/* It sticks at the card's very top edge, so it carries its own 14px of space above the title. */
.ex-pick-head { position: sticky; top: 0; z-index: 2; margin: -14px calc(-1 * var(--ex-pad)) 0; padding: 14px var(--ex-pad) 12px; background: var(--surface); box-shadow: 0 1px 0 var(--line); }
.ex-pick-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 2px; margin-bottom: 12px; }
.ex-pick-top h3 { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.ex-pick-top .sheet-actions { flex: none; margin: 0; }

.ex-search-wrap { position: relative; display: block; }
.ex-search-wrap > i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 1.1rem; color: var(--ink-3); pointer-events: none; }
/* 16px: anything smaller and iOS zooms the page when the field is tapped. */
.inp.ex-search { padding-left: 42px; font-size: 16px; }
.ex-search::-webkit-search-decoration { -webkit-appearance: none; }
.ex-parts { margin-top: 12px; }
.ex-parts .filter-chip { flex: none; }
/* In the picker the parts are one row that scrolls sideways, edge to edge. */
.ex-picker .ex-parts { flex-wrap: nowrap; overflow-x: auto; margin: 12px calc(-1 * var(--ex-pad)) 0; padding: 0 var(--ex-pad) 2px; scrollbar-width: none; }
.ex-picker .ex-parts::-webkit-scrollbar { display: none; }

.ex-msg { margin: 18px 0 4px; text-align: center; font-size: 0.92rem; color: var(--ink-2); }
.ex-msg:empty { display: none; }
.ex-msg .btn { margin-top: 10px; }
.ex-results { margin: 6px 0 0; padding: 0; list-style: none; }
.ex-more { display: flex; justify-content: center; margin-top: 14px; }

/* A picker row: the whole row is the choice, with its Form button beside it. */
.ex-item { display: flex; align-items: center; gap: 10px; padding: 0 2px; border-bottom: 1px solid var(--line); }
.ex-item:last-child { border-bottom: 0; }
.ex-item-name { flex: 1 1 auto; align-self: stretch; min-width: 0; display: block; padding: 11px 0; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.ex-item-name b { display: block; font-size: 0.95rem; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.ex-item-name small { display: block; margin-top: 2px; font-size: 0.8rem; line-height: 1.35; color: var(--ink-3); }
.ex-item-name:hover b { text-decoration: underline; text-underline-offset: 3px; }
.ex-item .btn.xs { flex: none; }

/* The Exercise forms page: rows with the start photo, two columns when there is room. */
.ex-library .ex-search-wrap { max-width: 560px; }
.ex-results.is-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 4px 16px; margin-top: 14px; }
.ex-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; padding: 8px; border: 0; border-radius: 12px; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.ex-row:hover { background: var(--bg-2); }
.ex-row > .ph { font-size: 1rem; color: var(--ink-3); }
.ex-thumb { display: grid; place-items: center; width: 56px; height: 38px; border-radius: 8px; overflow: hidden; background: var(--bg-2); color: var(--ink-3); font-size: 1.15rem; }
.ex-row:hover .ex-thumb { background: var(--surface); }
.ex-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ex-row-text b { display: block; font-size: 0.95rem; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.ex-row-text small { display: block; margin-top: 2px; font-size: 0.8rem; line-height: 1.35; color: var(--ink-3); }
@media (max-width: 600px) {
    .ex-library .ex-parts { flex-wrap: nowrap; overflow-x: auto; margin: 12px -22px 0; padding: 0 22px 2px; scrollbar-width: none; }
    .ex-library .ex-parts::-webkit-scrollbar { display: none; }
}

/* ==========================================================================
   The icon set (icons.js draws an SVG inside an <i class="ph ph-..."> it has
   a file for; the font glyph is hidden). Warm white parts follow the text
   colour, orange is the accent, dark details follow the background; on the
   orange Today disc the accent parts turn dark so the dumbbell stays visible.
   ========================================================================== */
i.ph.has-ico::before { display: none !important; }
i.ph.has-ico { line-height: 1; }
.ico { display: block; width: 1em; height: 1em; --ico-accent: var(--accent); --ico-dark: var(--bg); }
i.has-ico:not([style]) { display: inline-grid; place-items: center; width: 1em; height: 1em; vertical-align: -0.15em; }
.tabbar a.is-today i .ico, .btn.accent .ico { --ico-accent: var(--accent-ink); }
.task-card .ico { --ico-dark: #121212; }
/* The set is drawn for bigger tiles than the font glyphs: a touch larger
   where it carries the navigation (the dock and its Tools menu size theirs
   with the dock, above). */
.rail a i.has-ico, .rail .item i.has-ico { font-size: 1.3rem; }

/* ==========================================================================
   Daily tasks on Home (tasks.js): the streak, small, then one list of
   to-dos with today's training first. The training card keeps its dark
   photo look in both themes; the habit cards and everything around them
   follow the theme and the accent. A finished task moves to the bottom as a
   slim row with a dotted outline. Finishing plays a short animation (below).
   ========================================================================== */
.tasks { --task-lift: 0 1px 2px rgba(21, 22, 26, 0.05), 0 6px 16px rgba(21, 22, 26, 0.05); display: grid; gap: 14px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tasks { --task-lift: none; } }
:root[data-theme="dark"] .tasks { --task-lift: none; }
@media (max-width: 1180px) { .social.hub .tasks { order: 1; } }
/* On short desktop screens the task deck is taller than the window, so the
   side column scrolls with the page instead of sticking. */
@media (min-width: 1181px) and (max-height: 760px) { .social.hub .col-side { position: static; } }

.tasks-streak { position: relative; padding: 12px 14px; --chain-lead: 14px; --chain-mark: 22px; }
.tasks-streak .streak-chain { gap: 12px; }
.tasks-streak .streak-top { gap: 8px; }
.tasks-streak .streak-flame { width: 32px; height: 32px; border-radius: 8px; font-size: 1.2rem; }
/* The flame picture sized to its box, so it no longer spills onto the chain. */
.tasks-streak .streak-flame img { width: 32px; height: 32px; transform: scale(1.25); }
/* The chain a size down on Home, so the card reads as one tight strip. */
.tasks-streak .chain-day { gap: 5px; }
.tasks-streak .chain-slot { height: 24px; }
.tasks-streak .chain-mark { font-size: 11px; }
.tasks-streak .chain-mark.rest { width: 8px; height: 8px; }
.tasks-streak .chain-mark.none { width: 6px; height: 6px; }
.tasks-streak .chain-flame { font-size: 0.7rem; }
.tasks-streak .chain-dl { font-size: 0.66rem; }
/* "day streak" goes under the number when a long word ("jours consécutifs")
   would push the chevron off the card, as in the sheet. */
.tasks-streak .streak-count { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 7px; min-width: 0; }
.tasks-streak .streak-count b { font-size: 1.35rem; }
.tasks-streak .streak-count span { margin: 0; font-size: 0.76rem; }
.tasks-risk { margin: 8px 0 0; font-size: 0.8rem; font-weight: 600; color: var(--ink-2); }
/* The whole streak card is one button (streak.js lays it over the card)
   that opens the streak sheet; the chevron says so. */
.tasks-streak .streak-savers { gap: 4px; padding: 3px 9px 3px 7px; font-size: 0.76rem; }
.tasks-streak .streak-savers i { font-size: 0.92rem; }
.streak-go { margin: 0 -4px 0 auto; color: var(--ink-3); font-size: 1.15rem; }
.streak-savers + .streak-go { margin-left: 2px; }
.streak-open { position: absolute; inset: 0; z-index: 2; width: 100%; padding: 0; border: 0; border-radius: var(--r-card); background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.streak-open:focus-visible { border-radius: var(--r-card); outline-offset: 2px; }
.tasks-streak:has(.streak-open) { transition: transform 0.15s ease; }
.tasks-streak:has(.streak-open:active) { transform: scale(0.985); }
/* A saver that covered a miss this past week, said once on the card. */
.streak-saved { display: flex; align-items: center; gap: 7px; margin-top: 14px; color: var(--accent-text); }
.streak-saved .ph { font-family: "Phosphor-Fill" !important; font-size: 1.05rem; }
.tasks-streak:has(.streak-saved) > .tasks-risk { margin-top: 3px; }

/* The heading over Home's list: what is done, in words and one bar per task
   (rest days are not counted). */
.todo-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 28px; margin: 0 0 8px; }
.todo-head h2 { margin: 0; font-family: var(--font-display); font-stretch: 108%; font-size: 1.15rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1; color: var(--ink); }
.todo-count { display: inline-flex; align-items: center; gap: 9px; font-size: 0.86rem; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.todo-count.is-all { color: var(--accent-text); }
.todo-meter { display: inline-flex; gap: 3px; }
.todo-meter i { width: 14px; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--ink) 18%, transparent); }
.todo-meter i.on { background: var(--accent); }

.task-list { display: flex; flex-direction: column; }
/* Home's list: a plain gap instead of the overlapping deck, kept tight so the
   friends row rises into view as the tasks finish. */
.todo-list { gap: 6px; }
.todo-list > .task-card + .task-card { margin-top: 0; }

/* Each card is its own layer, so what is drawn inside it (the finish light,
   the tick) stays under the next card where the deck overlaps. */
.task-card { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; min-height: 148px; padding: 16px 16px 18px; border-radius: 12px; background: #121212; color: #fff; box-shadow: var(--task-lift); text-decoration: none; }
/* Stacked like a deck: each card slides up over the one above. */
.task-card + .task-card { margin-top: -12px; }
.task-art { position: absolute; inset: 0; }
.task-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.35) 45%, rgba(0, 0, 0, 0.85) 100%); }
.task-photo { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.75) brightness(0.8); }
.task-icon { display: grid; place-items: center; justify-items: end; width: 100%; height: 100%; padding-right: 22px; background: radial-gradient(90% 120% at 85% 20%, color-mix(in srgb, var(--tone) 70%, #000) 0%, #0c0c0c 75%); color: color-mix(in srgb, var(--tone) 60%, #fff); font-size: 7rem; }
.task-icon i { opacity: 0.35; transform: rotate(-12deg); }
.task-check { position: absolute; z-index: 2; top: calc(50% - 17px); right: 14px; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1.5px solid rgba(255, 255, 255, 0.75); border-radius: 7px; background: rgba(255, 255, 255, 0.12); color: #0a0a0a; font-size: 1.05rem; cursor: pointer; }
.task-check i { opacity: 0; }
/* Home's tick: drawn as a path, filled with the accent once ticked. */
.task-check svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.task-card.is-done .task-check, .task-card.is-finishing .task-check { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.task-card.is-done .task-check svg, .task-card.is-finishing .task-check svg { opacity: 1; }
.task-open { position: relative; display: block; width: 100%; padding: 0 54px 0 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.task-title { margin: 0; font-family: var(--font-display); font-stretch: 112%; font-weight: 800; font-size: 1.5rem; letter-spacing: -0.02em; line-height: 1.05; color: #fff; }
.task-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 6px; font-size: 0.76rem; font-weight: 600; color: #d8d8d8; }
.task-meta > span { display: inline-flex; align-items: center; gap: 4px; }
.task-meta > span + span::before { content: ""; width: 1px; height: 10px; margin-right: 8px; background: rgba(255, 255, 255, 0.35); }
/* On the always-dark cards the accent is lifted toward white, so cobalt and
   custom colours stay readable. */
.task-xp { color: color-mix(in srgb, var(--accent) 55%, #fff); }
.task-bar { position: absolute; left: 0; right: 0; bottom: 0; display: block; height: 3px; overflow: hidden; background: rgba(255, 255, 255, 0.12); }
.task-bar i { display: block; height: 100%; background: #fff; }

/* Today's training: the same card with a thin white outline, bright at the
   top-left and bottom-right corners and fading out toward the middle of each
   edge. Tapping it opens the workout. */
.task-card.is-training { border: 1.5px solid transparent; background: linear-gradient(#121212, #121212) padding-box, linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.45) 28%, rgba(255, 255, 255, 0) 48%, rgba(255, 255, 255, 0) 56%, rgba(255, 255, 255, 0.45) 76%, rgba(255, 255, 255, 0.9) 100%) border-box; }
.task-go { pointer-events: none; color: #fff; }
.task-go i { opacity: 1; }
.task-card.is-training .task-meta > span:first-child { color: #fff; }
.task-card.is-loading { min-height: 96px; pointer-events: none; }
.task-card.is-loading .task-meta { color: #8a8a8a; }

/* ---- Home's list ---- */
/* Every tick and the training arrow: 44 px, in the same spot on the right. */
.todo-list .task-check { top: calc(50% - 22px); right: 12px; width: 44px; height: 44px; border-radius: 12px; }
.todo-list .task-open { padding-right: 64px; }
.todo-list .task-card.is-training .task-title { font-size: 1.6rem; }
/* If the photo does not load: a dark glow in the accent. */
.todo-list .task-card.is-training .task-art { background: radial-gradient(110% 130% at 88% 0%, color-mix(in srgb, var(--accent) 30%, #161616) 0%, #111111 52%, #050505 100%); }

/* This week under the training card (and the rest day card): a circle with
   the session's number on each training day, filled with a tick once done,
   a dot on each rest day, today ringed. It sits on the photo, so it is drawn
   in white in both themes. The arrow moves up to the corner to make room. */
.task-card.has-week { min-height: 214px; }
.task-card.has-week .task-go { top: 14px; right: 14px; }
.task-card.has-week .task-open { padding-right: 0; }
/* Your streak in the training card's top corner, across from the arrow and
   as tall, in the same frosted frame (tasks.js). It sits on the photo, so
   the card keeps its size. */
.task-streak { position: absolute; z-index: 2; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: 5px; max-width: calc(100% - 86px); height: 44px; padding: 0 12px 0 7px; border: 1.5px solid rgba(255, 255, 255, 0.85); border-radius: 12px; background: rgba(0, 0, 0, 0.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; cursor: pointer; }
.task-streak:hover { background: rgba(0, 0, 0, 0.7); }
/* Room above the title for it, so a title that wraps never slides under it;
   inside the card's usual height, which only grows for the tallest content. */
.task-streak ~ .task-open { margin-top: 48px; }
.task-streak-flame { display: grid; flex: none; width: 26px; height: 26px; }
.task-streak-flame .flame { width: 100%; height: 100%; margin: 0; vertical-align: 0; }
.task-streak b { font-family: var(--font-display); font-stretch: 108%; font-weight: 800; font-size: 1.15rem; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.task-streak small { overflow: hidden; font-size: 0.74rem; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; color: #fff; }
.task-streak-savers { display: inline-flex; flex: none; align-items: center; gap: 3px; margin-left: 4px; padding-left: 9px; border-left: 1px solid rgba(255, 255, 255, 0.45); font-size: 0.8rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.task-streak-savers i { font-size: 0.95rem; color: var(--accent); }
/* Once the workout is done: a small flame and count in the row's line. */
.task-streak.is-small { position: static; gap: 2px; max-width: none; height: auto; padding: 0; border: 0; border-radius: 0; background: none; color: var(--accent-text); }
.task-streak.is-small .task-streak-flame { width: 16px; height: 16px; }
.task-streak.is-small b { font-family: inherit; font-stretch: normal; font-size: inherit; font-weight: 700; letter-spacing: normal; }
/* Every task done: the streak pops (tasks.js celebrate). */
.task-streak.is-cheer .task-streak-flame { animation: task-pop 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) 2; }
@media (prefers-reduced-motion: reduce) {
    .task-streak.is-cheer .task-streak-flame { animation: none; }
}
.task-week { position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid rgba(255, 255, 255, 0.16); }
/* A flex column, so a word wider than its day ("Aujourd'hui") stays centred
   and spills evenly into the days beside it. */
.task-week > span { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.task-week b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-size: 0.78rem; font-weight: 700; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.task-week b svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.task-week .is-session b { border: 2px solid rgba(255, 255, 255, 0.5); }
.task-week .is-rest b::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.34); }
.task-week .is-done b { background: var(--accent); color: var(--accent-ink); }
/* A training day gone by without a workout is faded; the streak card says
   what it cost. */
.task-week .is-past.is-session b { opacity: 0.45; }
.task-week .is-today.is-session b { border: 2.5px solid var(--accent); background: color-mix(in srgb, var(--accent) 24%, transparent); }
.task-week .is-today.is-rest b { border: 2px dashed rgba(255, 255, 255, 0.75); }
.task-week .is-today.is-done b { outline: 2px solid var(--accent); outline-offset: 2px; }
.task-week small { font-size: 0.68rem; font-weight: 600; line-height: 1; white-space: nowrap; color: rgba(255, 255, 255, 0.6); }
.task-week .is-today small { color: #fff; }

/* Habit cards: the theme's own card with a glow and a large faded icon in
   the accent, so Sleep and Water follow the chosen accent and light mode. */
.task-card.is-habit { min-height: 116px; border: 1px solid var(--line); background: radial-gradient(130% 150% at 92% 0%, color-mix(in srgb, var(--accent) 20%, var(--surface)) 0%, var(--surface) 58%); color: var(--ink); }
.task-card.is-habit .task-title { font-size: 1.4rem; color: var(--ink); }
.task-card.is-habit .task-meta { color: var(--ink-2); }
.task-card.is-habit .task-meta > span + span::before { background: var(--line-2); }
.task-card.is-habit .task-goal { color: var(--ink); font-weight: 700; }
.task-card.is-habit .task-xp { color: var(--accent-text); }
.task-card.is-habit:not(.is-done):not(.is-finishing) .task-check { border: 2px solid color-mix(in srgb, var(--ink) 38%, transparent); background: color-mix(in srgb, var(--surface) 70%, transparent); }
.task-card.is-habit .task-bar { height: 4px; background: color-mix(in srgb, var(--ink) 10%, transparent); }
.task-card.is-habit .task-bar i { background: var(--accent); }
.habit-glyph { position: absolute; right: 58px; top: -14px; font-size: 6rem; line-height: 1; color: var(--accent); opacity: 0.3; transform: rotate(-12deg); pointer-events: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .habit-glyph { opacity: 0.22; } }
:root[data-theme="dark"] .habit-glyph { opacity: 0.22; }

/* A finished task: one slim row at the bottom of the list with a dotted
   outline, a small picture and the tick filled with the accent. The
   workout's row shows the session's photo and still opens the session.
   It has the page's own colour, so it looks open but covers the cards it
   glides past on its way down. */
.todo-list .task-card.is-done { display: grid; grid-template-columns: 40px minmax(0, 1fr) 44px; align-items: center; gap: 12px; min-height: 58px; padding: 5px 10px 5px 8px; border: 2px dotted color-mix(in srgb, var(--ink) 32%, transparent); border-radius: 12px; background: var(--bg); color: var(--ink); box-shadow: none; }
.todo-list .task-card.is-done .task-check { position: static; border: 0; }
.todo-list .task-card.is-done .task-open { min-width: 0; padding: 0; }
.todo-list .task-card.is-done .task-title { overflow: hidden; font-size: 1.02rem; font-stretch: 108%; letter-spacing: -0.01em; line-height: 1.15; white-space: nowrap; text-overflow: ellipsis; color: var(--ink); }
.todo-list .task-card.is-done .task-meta { margin-top: 3px; font-size: 0.8rem; }
.todo-list .task-card.is-done .task-meta, .todo-list .task-card.is-done .task-meta > span:first-child { color: var(--ink-2); }
.todo-list .task-card.is-done .task-meta > span + span::before { background: var(--line-2); }
.todo-list .task-card.is-done .task-xp { color: var(--accent-text); }
.task-row-art { display: grid; place-items: center; width: 40px; height: 40px; overflow: hidden; border-radius: 10px; background: var(--accent-soft); color: var(--accent-text); font-size: 1.35rem; }
.task-row-art.is-photo { background: radial-gradient(110% 130% at 88% 0%, color-mix(in srgb, var(--accent) 30%, #161616) 0%, #111111 52%, #050505 100%); }
.task-row-art img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.8); }

.task-toast { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 60; margin: 0; padding: 10px 16px; border-radius: 999px; background: var(--ink); color: var(--bg); font-size: 0.86rem; font-weight: 600; white-space: nowrap; transform: translate(-50%, 12px); opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; }
.task-toast.on { opacity: 1; transform: translate(-50%, 0); }

.task-sheet-body { display: grid; gap: 12px; }
.task-sheet-art { position: relative; height: 140px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: radial-gradient(130% 150% at 92% 0%, color-mix(in srgb, var(--accent) 22%, var(--surface)) 0%, var(--surface) 62%); }
.task-sheet-art .habit-glyph { top: 10px; right: 28px; font-size: 7rem; }
.task-sheet h3 { margin: 4px 0 0; }
.task-sheet-meta { margin: 0; font-size: 0.86rem; color: var(--ink-2); }
.task-sheet-goal { display: grid; gap: 8px; }
.task-sheet-goal .task-bar { position: static; height: 6px; border-radius: 999px; background: var(--line); }
.task-sheet-goal .task-bar i { background: var(--accent); }

/* ---- finishing a task ----
   tasks.js adds .is-finishing to the card and draws the burst and "+XP" in a
   fixed layer over the page (.task-fx, so the card does not clip them), then
   draws it as its slim row at the bottom of the list, gliding there. */
.task-card.is-finishing { pointer-events: none; }
.task-card.is-finishing .task-check { animation: task-pop 0.42s cubic-bezier(0.3, 1.6, 0.5, 1); }
.task-card.is-finishing .task-check i, .task-card.is-finishing .task-check svg { animation: task-draw 0.3s 0.08s ease-out both; }
.task-card.is-finishing .task-bar i { width: 100% !important; transition: width 0.45s cubic-bezier(0.3, 0.8, 0.3, 1); }
/* A light passing over the card (in the accent on the habit cards, which
   are pale in light mode). */
.task-card.is-finishing::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.3) 50%, transparent 70%); transform: translateX(-100%); animation: task-sheen 0.65s 0.05s ease-out forwards; }
.task-card.is-habit.is-finishing::after { background: linear-gradient(105deg, transparent 30%, color-mix(in srgb, var(--accent) 26%, transparent) 50%, transparent 70%); }

.task-fx { position: fixed; inset: 0; z-index: 70; pointer-events: none; overflow: hidden; }
.task-burst { position: absolute; width: 0; height: 0; }
.task-burst b { position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--accent) 55%, #fff); animation: task-ring 0.7s cubic-bezier(0.25, 0.6, 0.35, 1) forwards; }
.task-burst i { position: absolute; left: -2px; top: -7px; width: 4px; height: 14px; border-radius: 2px; background: var(--accent); opacity: 0; animation: task-spark 0.7s 0.05s ease-out forwards; }
.task-burst i:nth-child(odd) { background: color-mix(in srgb, var(--accent) 45%, #fff); }
.task-xpfly { position: absolute; padding: 3px 9px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-family: var(--font-display); font-stretch: 108%; font-weight: 800; font-size: 0.92rem; white-space: nowrap; opacity: 0; animation: task-xp 1s cubic-bezier(0.2, 0.7, 0.3, 1) forwards; }
.task-confetti { position: absolute; top: 0; width: 7px; height: 12px; border-radius: 2px; background: var(--accent); }
.task-confetti.c1 { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-strong); }
.task-confetti.c2 { background: var(--ink); }
.task-confetti.c3 { width: 5px; height: 14px; background: color-mix(in srgb, var(--accent) 50%, #fff); }

/* The count's new bar pops when a task lands at the bottom; every task done
   lights up the streak card. */
.todo-meter i.bump { animation: task-bump 0.5s cubic-bezier(0.3, 1.6, 0.5, 1); }
.tasks-streak.is-cheer { animation: task-cheer 1.4s ease-out; }
.tasks-streak.is-cheer .streak-flame { animation: task-pop 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) 2; }

@keyframes task-pop { 0% { transform: scale(0.7); } 55% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes task-draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes task-sheen { to { transform: translateX(100%); } }
@keyframes task-ring { from { transform: scale(0.4); opacity: 1; } to { transform: scale(1.8); opacity: 0; } }
@keyframes task-spark {
    0% { transform: rotate(var(--a)) translateY(-16px) scaleY(0.4); opacity: 1; }
    35% { transform: rotate(var(--a)) translateY(-32px) scaleY(1); opacity: 1; }
    100% { transform: rotate(var(--a)) translateY(-48px) scaleY(0.2); opacity: 0; }
}
@keyframes task-xp {
    0% { transform: translate(-50%, -100%) scale(0.6); opacity: 0; }
    18% { transform: translate(-50%, -150%) scale(1.1); opacity: 1; }
    70% { opacity: 1; }
    100% { transform: translate(-50%, -300%) scale(1); opacity: 0; }
}
@keyframes task-bump { 0% { transform: scale(1); } 40% { transform: scale(1.7); } 100% { transform: scale(1); } }
@keyframes task-cheer {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 75%, transparent); }
    100% { box-shadow: 0 0 0 20px color-mix(in srgb, var(--accent) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
    .todo-meter i.bump, .tasks-streak.is-cheer, .tasks-streak.is-cheer .streak-flame { animation: none; }
    .task-toast, .tasks-streak:has(.streak-open) { transition: none; }
}

/* ---- The intro (index.html, intro.js) ----
   A new person's first minutes, one screen at a time: the access code, the
   welcome, nine questions as a chat, the plan, the free trial and saving the
   account. One column (460px at most, a 16px gutter on a phone), a bar at the
   top with Back and the progress, and the main button in a bar along the
   bottom, under the thumb. Brotein asks in a bubble beside the app icon; your
   last answer sits above it in the accent. A new screen slides in 16px (from
   the left going back), transform only; the page clips it sideways, so the
   slide (or the welcome's full-width belt) never makes it wider than the phone. */
.intro { --intro-col: 460px; display: block; min-height: calc(100dvh - env(safe-area-inset-top, 0px)); padding-bottom: var(--intro-bar-h, 96px); overflow-x: clip; }
.intro h1:focus { outline: none; }
.intro-col { width: min(var(--intro-col), calc(100% - 32px)); margin: 0 auto; padding: 18px 0 28px; }
.intro-noscript { max-width: 460px; margin: 0 auto; padding: 48px 16px; text-align: center; color: var(--ink-2); }
.intro-from-right { animation: intro-in-right 200ms cubic-bezier(0.2, 0.8, 0.3, 1) both; }
.intro-from-left { animation: intro-in-left 200ms cubic-bezier(0.2, 0.8, 0.3, 1) both; }
@keyframes intro-in-right { from { transform: translateX(16px); } }
@keyframes intro-in-left { from { transform: translateX(-16px); } }

/* the top bar: Back, the progress and "3 of 9" */
.intro-top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; height: 56px; background: var(--bg); }
.intro-top-in { display: flex; align-items: center; gap: 12px; width: min(var(--intro-col), calc(100% - 32px)); height: 100%; margin: 0 auto; }
.intro-back { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin-left: -12px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink); font-size: 1.35rem; cursor: pointer; }
.intro-back:active { background: var(--bg-2); }
/* The track is the line colour: --bg-2 all but vanishes on black. */
.intro-progress { flex: 1; height: 8px; overflow: hidden; border-radius: var(--r-pill); background: var(--line); }
.intro-progress span { display: block; height: 100%; background: var(--accent); clip-path: inset(0 calc(100% - var(--p, 0) * 100%) 0 0 round 999px); transition: clip-path 0.35s cubic-bezier(0.2, 0.8, 0.3, 1); }
.intro-step { flex: none; min-width: 3.4em; text-align: right; font-size: 0.86rem; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* the chat */
.intro-chat { display: flex; flex-direction: column; gap: 14px; }
.intro-me { align-self: flex-end; max-width: 78%; margin: 2px 0 4px; padding: 10px 14px; border-radius: 18px 18px 6px 18px; background: var(--accent); color: var(--accent-ink); font-size: 0.95rem; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.intro-bot { display: flex; align-items: flex-end; gap: 10px; }
.intro-avatar { flex: none; width: 32px; height: 32px; border: 1px solid var(--line-2); border-radius: 50%; background: #000; object-fit: cover; }
.intro-bubble { min-width: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 18px 18px 18px 6px; background: var(--surface); }
.intro-react { margin: 0 0 4px; font-size: 0.95rem; line-height: 1.4; color: var(--ink-2); }
.intro-q { margin: 0; font-family: var(--font-display); font-stretch: 108%; font-size: 1.4rem; font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; color: var(--ink); text-wrap: pretty; }
.intro-hint { margin: -4px 0 0 42px; font-size: 0.92rem; line-height: 1.45; color: var(--ink-3); }

/* the answers: big, one to a row, a circle on the right that fills with a tick */
.intro-answers { display: grid; gap: 10px; margin-top: 4px; }
.intro-answer { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 14px 18px; border: 1.5px solid var(--line-2); border-radius: 16px; background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 120ms ease; }
.intro-answer:active { transform: scale(0.98); }
@media (hover: hover) { .intro-answer:hover { border-color: var(--ink-3); } }
.intro-answer-text { flex: 1; min-width: 0; }
.intro-answer-label { display: block; font-size: 1.05rem; font-weight: 600; line-height: 1.3; }
.intro-answer-note { display: block; margin-top: 2px; font-size: 0.86rem; line-height: 1.35; color: var(--ink-2); }
.intro-answer::after { content: ""; flex: none; display: grid; place-items: center; width: 24px; height: 24px; border: 1.5px solid var(--line-2); border-radius: 50%; font-size: 0.8rem; font-weight: 800; color: var(--accent-ink); }
.intro-answer.is-on, .intro-answer.is-on:hover { border-color: var(--accent); background: var(--accent-soft); }
.intro-answer.is-on::after { content: "\2713"; border-color: var(--accent); background: var(--accent); }
.intro-answer.is-none { border-style: dashed; }

/* typed answers: the name, the code, age, height and weight */
.intro-fields { display: grid; gap: 16px; margin-top: 4px; }
.intro-field { display: grid; gap: 8px; }
.intro-field-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.intro-label { font-size: 0.86rem; font-weight: 600; color: var(--ink-2); }
.intro-input { width: 100%; height: 56px; padding: 0 16px; border: 1.5px solid var(--line-2); border-radius: 14px; background: var(--surface-2); color: var(--ink); font: inherit; font-size: 1.25rem; font-variant-numeric: tabular-nums; outline: none; }
.intro-input::placeholder { color: var(--ink-3); }
.intro-input:focus { border-color: var(--accent-strong); box-shadow: 0 0 0 3px var(--accent-soft); }
.intro-input:disabled { opacity: 0.5; }
.intro-unit { position: relative; display: block; }
.intro-unit .intro-input { padding-right: 52px; }
.intro-suffix { position: absolute; top: 50%; right: 16px; transform: translateY(-50%); font-size: 0.95rem; font-weight: 600; color: var(--ink-3); pointer-events: none; }
.intro-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
/* The unit you are typing in wears the accent: the usual raised segment all
   but vanishes on black. */
.intro .intro-seg { flex: none; width: 132px; border: 1px solid var(--line); }
.intro .intro-seg > * { height: 44px; }
.intro .intro-seg > .on { background: var(--accent); color: var(--accent-ink); box-shadow: none; }
.intro .intro-status { min-height: 0; margin: 0; }
.intro .intro-status:not(:empty) { margin-top: 2px; }

/* the bottom bar */
.intro-bar { position: fixed; right: 0; bottom: 0; left: 0; z-index: 30; padding: 12px calc(16px + env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) calc(16px + env(safe-area-inset-left, 0px)); border-top: 1px solid var(--line); background: var(--bg); }
.intro-bar-in { display: grid; gap: 6px; width: min(var(--intro-col), 100%); margin: 0 auto; }
.intro .intro-main { height: 56px; font-size: 1.02rem; }
.intro-alt { display: flex; align-items: center; justify-content: center; min-height: 44px; font-size: 0.95rem; font-weight: 600; color: var(--ink-2); }
.intro-alt:active { color: var(--ink); }
.intro-bar-note { margin: 0; text-align: center; font-size: 0.82rem; color: var(--ink-2); }
.intro-bar .intro-status { text-align: center; }
.intro-terms { margin: 2px 0 0; text-align: center; font-size: 0.78rem; line-height: 1.45; color: var(--ink-3); text-wrap: pretty; }
.intro-terms a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; }
.intro-bar .captcha-widget { width: 100%; min-width: 0; max-width: 100%; }
/* captcha.js keeps its check at zero height (is-quiet) unless Cloudflare asks
   for a tap (is-asking). A collapse, not display: none, so the check keeps
   running and can refresh its token. login.html draws its own check without
   these classes. */
.captcha-widget.is-quiet:not(.is-asking) { height: 0; overflow: hidden; }
/* Out of the bar's grid while there is nothing to see, so it leaves no 6px
   gap above the button (a negative margin does not shrink a grid row). */
.intro-bar .captcha-widget:empty, .intro-bar .captcha-widget.is-quiet:not(.is-asking) { position: absolute; left: 0; }

/* the access code, and the code again after a break */
.intro-logo { display: block; width: auto; height: 28px; filter: var(--logo-filter); }
.intro-code { display: flex; flex-direction: column; align-items: center; padding-top: max(24px, 7vh); text-align: center; }
.intro-code .intro-logo { margin-bottom: 44px; }
.intro-title { margin: 0; font-family: var(--font-display); font-stretch: 108%; font-size: 1.9rem; font-weight: 800; line-height: 1.05; letter-spacing: -0.03em; text-wrap: balance; }
.intro-code .intro-title { font-size: 2rem; }
.intro-lead { max-width: 34ch; margin: 12px 0 28px; font-size: 1rem; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.intro-code .intro-label { margin-bottom: 8px; }
.intro-code-input { padding-left: calc(16px + 0.3em); font-size: 1.5rem; letter-spacing: 0.3em; text-align: center; }
.intro-code .intro-status { align-self: stretch; }
.intro-code .intro-status:not(:empty) { margin-top: 10px; }
.intro-code .intro-ios { align-self: stretch; text-align: left; }
/* In Safari on a short phone the code screen moves up, so the card clears the bar. */
@media (max-height: 700px) { .intro-code:has(.intro-ios) { padding-top: 8px; } .intro-code:has(.intro-ios) .intro-logo { margin-bottom: 24px; } }

/* the welcome: the logo up top, the words low, near the thumb, and between
   them a belt of what Brotein does */
.intro-welcome { display: flex; flex-direction: column; min-height: calc(100dvh - env(safe-area-inset-top, 0px) - var(--intro-bar-h, 120px) - 46px); }
.intro-welcome > .intro-logo { align-self: flex-start; }
.intro-welcome-main { padding-top: 8px; }
.intro h1.intro-hero { font-size: clamp(2.4rem, 11vw, 3rem); }
.intro-welcome .lead { margin-top: 14px; font-size: 1.05rem; }
/* Under 700px, with Safari's card, the headline shrinks a little and the
   words and the card sit closer, so the belt still has room above them. */
@media (max-height: 700px) {
    .intro-welcome:has(.intro-ios) .intro-hero { font-size: 2.2rem; }
    .intro-welcome:has(.intro-ios) .lead { margin-top: 8px; }
    .intro-welcome .intro-ios { margin-top: 10px; padding-top: 10px; }
}

/* The belt: cards drawn like the app (intro.js) on two rows running opposite
   ways, across the whole screen. It only takes the room the words leave (a
   size container), so it never pushes them, or Safari's Add to Home Screen
   card, under the bar: with less room its cards get smaller, then the top
   row runs alone with every card on it, and with too little it goes. Cards
   are sized in em, so a row's font size scales all of it. Each row holds its
   cards twice and slides by half its width, a transform only, so the loop
   has no seam. A card takes 8 seconds to move its own width (the lower row
   9.5), so each one stays in view long enough to take in. */
.intro-belt { flex: 1 1 0; display: flex; flex-direction: column; justify-content: center; width: min(100vw, 1320px); min-height: 0; margin: 0 calc(50% - min(50vw, 660px)); overflow: hidden; container-type: size; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
/* 10px where container units are unknown; sized to the room below. */
.intro-belt-row { --n: var(--na); --per: 8s; flex: none; font-size: 10px; line-height: 1.3; }
.intro-belt-row.is-b { --per: 9.5s; margin-top: 1em; }
.intro-belt-row.is-a .feat.is-b { display: none; }
.intro-belt-track { display: flex; width: max-content; margin-left: 16px; animation: intro-belt calc(var(--n) * var(--per)) linear infinite; will-change: transform; }
.intro-belt-row.is-b .intro-belt-track { animation-direction: reverse; }
.intro-belt.is-held .intro-belt-track, .intro-belt.is-away .intro-belt-track { animation-play-state: paused; }
.intro-belt-set { display: flex; gap: 1em; padding-right: 1em; }
@keyframes intro-belt { to { transform: translate3d(-50%, 0, 0); } }
/* Two rows (35em) as large as the room allows, then one (17em) with every
   card on it, then none: always with some air above and below. */
.intro-belt-row { font-size: clamp(8.8px, (100cqh - 28px) / 35, 13px); }
@container (height < 336px) {
    .intro-belt-row { font-size: clamp(8px, (100cqh - 24px) / 17, 12px); }
    .intro-belt-row.is-a { --n: var(--nall); }
    .intro-belt-row.is-a .feat.is-b { display: flex; }
    .intro-belt-row.is-b { display: none; }
}
@container (height < 148px) { .intro-belt-row { display: none; } }
/* On a wide screen the belt stops short of the edges and fades out there. */
@media (min-width: 1321px) { .intro-belt { -webkit-mask-image: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent); } }
/* Reduced motion: still rows to swipe through, each card once. */
@media (prefers-reduced-motion: reduce) {
    .intro-belt-row { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; scrollbar-width: none; }
    .intro-belt-row::-webkit-scrollbar { display: none; }
    .intro-belt-track { margin-left: 0; padding: 0 16px; animation: none; }
    .intro-belt-set + .intro-belt-set { display: none; }
    .feat { scroll-snap-align: start; }
}

/* A card: its title, then a small piece of that part of the app with the
   app's own tokens, type and icons. Light cards lift a little off the page. */
.feat { flex: none; display: flex; flex-direction: column; gap: 0.9em; width: 18em; height: 17em; padding: 1.3em 1.3em 1.2em; overflow: hidden; border: 1px solid var(--line); border-radius: 1.8em; background: var(--surface); color: var(--ink); }
:root:not([data-theme="dark"]) .feat { box-shadow: 0 0.2em 0.8em rgba(21, 22, 26, 0.05); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .feat { box-shadow: none; } }
.feat-title { flex: none; margin: 0; overflow: hidden; font-family: var(--font-display); font-stretch: 106%; font-size: 1.42em; font-weight: 750; line-height: 1.12; letter-spacing: -0.02em; white-space: nowrap; text-overflow: ellipsis; }
.feat-title.is-long { font-stretch: 82%; letter-spacing: -0.01em; }
.feat-view { position: relative; display: flex; flex: 1; flex-direction: column; gap: 0.6em; min-height: 0; }
/* Nothing in a view is squeezed: a view that runs long is cut at the card's edge. */
.feat-view > * { flex-shrink: 0; }
:where(.feat) b { font-weight: 600; }
:where(.feat) small { display: block; overflow: hidden; font-size: 0.92em; color: var(--ink-3); white-space: nowrap; text-overflow: ellipsis; }
.feat-svg { display: block; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.feat .fp-pic > i { font-size: 1.4em; }
.feat-bar { display: block; flex: none; height: 0.6em; overflow: hidden; border-radius: 1em; background: var(--line); }
.feat-bar > i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.feat-tile { display: grid; flex: none; place-items: center; width: 3em; height: 3em; border-radius: 0.9em; background: var(--accent); color: var(--accent-ink); }
.feat-tile > i { font-size: 1.5em; }
.feat-tile .ico { --ico-accent: var(--accent-ink); --ico-dark: var(--accent); }
.feat .av { width: 3em; height: 3em; border-radius: 0.9em; font-size: 1em; }

/* your training week: the plan preview's week, then its first session */
.feat-days { display: grid; flex: none; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.3em; }
.feat-days > span { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.2em; height: 3.4em; border: 0.15em solid var(--line-2); border-radius: 0.9em; }
.feat-days small { font-size: 0.8em; font-weight: 500; line-height: 1; }
.feat-days b { font-size: 1.3em; font-weight: 800; line-height: 1; }
.feat-days .is-on { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.feat-days .is-on small { color: var(--accent-ink); }
.feat-line { margin: 0; font-size: 1em; line-height: 1.35; color: var(--ink-2); }
.feat-day { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.3em 0.6em; margin-top: auto; padding: 0.5em 0.8em; border: 1px solid var(--line); border-radius: 1.2em; background: var(--surface-2); }
.feat-day .day-tag { height: 2em; padding: 0 0.7em; font-size: 0.9em; }
.feat-day b { overflow: hidden; font-size: 1.15em; line-height: 1.2; white-space: nowrap; text-overflow: ellipsis; }
.feat-day small { grid-column: 1 / -1; }

/* today's workout: the set rows and the workout bar resting */
.feat-view.is-workout { gap: 0.45em; }
.feat-lift { overflow: hidden; font-size: 1.15em; white-space: nowrap; text-overflow: ellipsis; }
.feat-set { display: grid; grid-template-columns: 1.2em minmax(0, 1fr) minmax(0, 1fr) 2.6em; align-items: center; gap: 0.45em; height: 3em; padding: 0 0.25em 0 0.55em; border-radius: 1.1em; }
.feat-set-no { font-size: 0.9em; font-weight: 600; text-align: center; color: var(--ink-3); }
.feat-set-v { display: flex; align-items: baseline; justify-content: space-between; gap: 0.2em; height: 2.6em; padding: 0 0.6em; border: 0.15em solid var(--line-2); border-radius: 0.7em; background: var(--surface-2); line-height: 2.3em; }
.feat-set-v b { font-size: 1.25em; font-variant-numeric: tabular-nums; }
.feat-set-v small { font-size: 0.78em; }
.feat-tick { display: grid; place-items: center; width: 2.6em; height: 2.6em; border: 0.15em solid var(--line-2); border-radius: 50%; color: var(--ink-3); }
.feat-tick svg { width: 1.2em; height: 1.2em; stroke-width: 2.8; }
.feat-set.is-done { background: var(--accent); }
.feat-set.is-done .feat-set-no, .feat-set.is-done small, .feat-set.is-done .feat-set-v { color: var(--accent-ink); }
.feat-set.is-done .feat-set-v { border-color: transparent; background: transparent; }
.feat-set.is-done .feat-tick { border-color: transparent; background: color-mix(in srgb, var(--accent) 55%, #000); color: #fff; }
.feat-set.is-next .feat-set-no { color: var(--accent-text); }
.feat-set.is-next .feat-tick { border: 0.2em solid var(--accent); color: var(--accent-text); }
.feat-rest { display: flex; align-items: center; justify-content: space-between; gap: 0.6em; margin: auto -1.3em -1.2em; padding: 0.55em 1.3em 0.95em; border-top: 1px solid var(--line); background: var(--bg); }
.feat-rest > b { overflow: hidden; font-family: var(--font-display); font-stretch: 108%; font-size: 1.5em; font-weight: 800; letter-spacing: -0.03em; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.feat-rest > b > span:first-child { color: var(--ink-2); }
.feat-skip { flex: none; display: grid; place-items: center; width: 2.5em; height: 2.5em; border: 0.15em solid var(--line-2); border-radius: 50%; }
.feat-skip > i { font-size: 1.3em; }

/* exercise forms: the start and the end of the move */
.feat-poses { display: grid; flex: none; grid-template-columns: 1fr 1fr; gap: 0.4em; }
.feat-poses img { width: 100%; height: 5.4em; border-radius: 0.9em; background: var(--bg-2); object-fit: cover; }
.feat-lift-name b { display: block; overflow: hidden; font-size: 1.15em; line-height: 1.25; white-space: nowrap; text-overflow: ellipsis; }
.feat-pill { display: inline-flex; align-self: flex-start; align-items: center; gap: 0.5em; height: 2.6em; margin-top: auto; padding: 0 1em 0 0.8em; border: 0.15em solid var(--line-2); border-radius: 2em; font-size: 0.95em; font-weight: 600; }
.feat-pill > i { font-size: 1.3em; }

/* your calendar: the week's day cards, dark over the session's photo */
.feat-view.is-calendar { gap: 0.45em; }
.feat-calday { position: relative; display: flex; align-items: center; gap: 0.8em; height: 3.9em; padding: 0 0.6em 0 0.9em; overflow: hidden; border-radius: 1em; background: #121212; color: #fff; isolation: isolate; }
.feat-calday img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; opacity: 0.45; }
.feat-calday-date { flex: none; display: grid; line-height: 1; }
.feat-calday-date small { font-size: 0.8em; color: #d8d8d8; }
.feat-calday-date b { font-family: var(--font-display); font-stretch: 112%; font-size: 1.6em; font-weight: 800; letter-spacing: -0.04em; }
.feat-calday-title { flex: 1; min-width: 0; overflow: hidden; font-family: var(--font-display); font-size: 1.25em; font-weight: 800; white-space: nowrap; text-overflow: ellipsis; }
.feat-badge { flex: none; display: inline-flex; align-items: center; height: 2.1em; padding: 0 0.8em; border-radius: 2em; background: rgba(255, 255, 255, 0.16); font-size: 0.85em; font-weight: 700; color: #fff; }
.feat-badge.is-done { width: 2.4em; height: 2.4em; justify-content: center; padding: 0; background: #fff; color: #121212; }
.feat-badge svg { width: 1.3em; height: 1.3em; stroke-width: 3.2; }
.feat-weigh { display: flex; align-items: center; gap: 0.6em; height: 3em; margin-top: auto; padding: 0 0.9em; border: 1px solid var(--line); border-radius: 1em; background: var(--surface-2); font-size: 1em; }
.feat-weigh > i { font-size: 1.4em; color: var(--accent-text); }
.feat-weigh > span { flex: 1; min-width: 0; overflow: hidden; color: var(--ink-2); white-space: nowrap; text-overflow: ellipsis; }
.feat-weigh > b { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* a week of meals: a day to a row, a photo for every meal */
.feat-view.is-meals { gap: 0.35em; }
.feat-mealday { display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, 3.3em); align-items: center; gap: 0.45em; padding: 0.2em; border-radius: 1.1em; }
.feat-mealday.is-today { box-shadow: inset 0 0 0 0.15em var(--accent); background: var(--accent-soft); }
.feat-mealday > span { min-width: 0; padding-left: 0.3em; line-height: 1.2; }
.feat-mealday b { display: block; font-size: 1.05em; }
.feat-mealday small { font-size: 0.82em; font-variant-numeric: tabular-nums; }
.feat .feat-dish { width: 3.3em; height: 3.3em; border-radius: 0.9em; }

/* cook mode: one step, big, and its timer */
.feat-view.is-cook { gap: 0.5em; }
.feat-cook-top { font-size: 1em; font-weight: 700; line-height: 1.25; text-align: center; }
.feat-steps { display: grid; flex: none; grid-template-columns: repeat(4, 1fr); gap: 0.3em; }
.feat-steps i { height: 0.35em; border-radius: 1em; background: var(--accent); }
.feat-steps i.is-left { background: var(--line-2); }
.feat-cook-step { display: -webkit-box; flex: none; margin: 0.15em 0 0; overflow: hidden; font-family: var(--font-display); font-weight: 650; font-size: 1.12em; letter-spacing: -0.015em; line-height: 1.2; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; }
.feat-cook-step mark { background: none; color: var(--accent-text); }
.feat-timer { position: relative; display: flex; align-items: center; gap: 0.6em; margin-top: auto; padding: 0.55em 0.6em 0.7em 0.9em; overflow: hidden; border: 1px solid var(--line); border-radius: 1.2em; background: var(--surface-2); }
.feat-timer > span:first-child { flex: 1; min-width: 0; }
.feat-timer b { display: block; font-family: var(--font-display); font-stretch: 112%; font-size: 1.8em; font-weight: 800; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.feat-timer small { margin-top: 0.3em; font-size: 0.8em; }
.feat-play { display: grid; flex: none; place-items: center; width: 2.7em; height: 2.7em; border-radius: 50%; background: var(--accent); color: var(--accent-ink); }
.feat-play svg { width: 1.4em; height: 1.4em; fill: currentColor; stroke: none; }
.feat-timer > i { position: absolute; bottom: 0; left: 0; height: 0.35em; background: var(--accent); }

/* the shopping list: the basket so far, then an aisle */
.feat-basket { display: grid; gap: 0.5em; }
.feat-basket > span { font-size: 0.95em; color: var(--ink-2); }
.feat-aisle { margin-top: auto; overflow: hidden; border: 1px solid var(--line); border-radius: 1.2em; background: var(--surface-2); }
.feat-aisle-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6em; padding: 0.45em 0.9em 0.25em; }
.feat-aisle-head b { font-family: var(--font-display); font-size: 1.05em; font-weight: 700; white-space: nowrap; }
.feat-aisle-head small { flex: none; font-size: 0.8em; }
.feat-item { display: grid; grid-template-columns: 1.7em minmax(0, 1fr) auto; align-items: center; gap: 0.6em; height: 2.2em; padding: 0 0.9em; border-top: 1px solid var(--line); font-size: 0.98em; }
.feat-item b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.feat-item > span:last-child { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.feat-box { display: grid; place-items: center; width: 1.7em; height: 1.7em; border: 0.15em solid color-mix(in srgb, var(--ink) 48%, transparent); border-radius: 0.5em; color: transparent; }
.feat-box svg { width: 1em; height: 1em; stroke-width: 3.2; }
.feat-item.is-on .feat-box { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.feat-item.is-on b { color: var(--ink-3); text-decoration: line-through; }

/* protein on target: the day's totals, then its meals */
.feat-view.is-protein { gap: 0.45em; }
.feat-macros { display: flex; align-items: flex-end; justify-content: space-between; gap: 0.8em; padding-bottom: 0.55em; border-bottom: 1px solid var(--line); }
.feat-macros b { display: block; font-family: var(--font-display); font-stretch: 108%; font-size: 1.7em; font-weight: 800; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.feat-macros b.is-protein { color: var(--accent-text); }
.feat-macros small { display: flex; align-items: center; gap: 0.3em; margin-top: 0.25em; }
.feat-ok { display: grid; place-items: center; width: 1.3em; height: 1.3em; border-radius: 50%; background: var(--ok); color: var(--surface); }
.feat-ok svg { width: 0.9em; height: 0.9em; stroke-width: 3.4; }
.feat-meal { display: flex; align-items: center; gap: 0.7em; }
.feat-meal > span { min-width: 0; }
.feat-meal b { display: -webkit-box; overflow: hidden; font-size: 0.95em; line-height: 1.2; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.feat-meal small { margin-top: 0.15em; color: var(--accent-text); font-weight: 600; }

/* daily to-dos: today's session, dark over its photo, then the habits */
.feat-view.is-todos { gap: 0.45em; }
.feat-task { position: relative; display: flex; align-items: center; gap: 0.6em; min-height: 3.3em; padding: 0.5em 0.6em 0.5em 0.9em; overflow: hidden; border: 1px solid var(--line); border-radius: 1em; background: radial-gradient(130% 150% at 92% 0%, color-mix(in srgb, var(--accent) 20%, var(--surface-2)) 0%, var(--surface-2) 58%); isolation: isolate; }
.feat-task > span:first-child { flex: 1; min-width: 0; }
.feat-task b { display: block; overflow: hidden; font-family: var(--font-display); font-size: 1.05em; font-weight: 800; letter-spacing: -0.01em; line-height: 1.2; white-space: nowrap; text-overflow: ellipsis; }
.feat-task small { font-size: 0.8em; font-weight: 600; color: var(--ink-2); }
.feat-task.is-training { justify-content: space-between; min-height: 3.9em; border: 0; background: #121212; color: #fff; }
.feat-task.is-training img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; opacity: 0.5; }
.feat-task.is-training b { flex: none; font-size: 1.4em; }
.feat-task-tag { display: inline-flex; align-items: center; gap: 0.4em; height: 2em; padding: 0 0.7em; border-radius: 2em; background: color-mix(in srgb, var(--accent) 34%, rgba(0, 0, 0, 0.6)); color: color-mix(in srgb, var(--accent) 60%, #fff); font-size: 0.85em; font-weight: 700; }
.feat-task-tag .ico { --ico-accent: var(--accent); --ico-dark: #121212; }
.feat-check { display: grid; flex: none; place-items: center; width: 2.2em; height: 2.2em; border: 0.2em solid color-mix(in srgb, var(--ink) 38%, transparent); border-radius: 50%; color: var(--accent-ink); }
.feat-check svg { width: 1.1em; height: 1.1em; stroke-width: 3.2; }
.feat-task:not(.is-done) .feat-check svg { display: none; }
.feat-task.is-done .feat-check { border-color: var(--accent); background: var(--accent); }
.feat-task > .feat-bar { position: absolute; right: 0; bottom: 0; left: 0; height: 0.35em; border-radius: 0; background: color-mix(in srgb, var(--ink) 10%, transparent); }

/* keep your streak: the flame, the chain of the last seven days, a saver */
.feat-streak { display: flex; align-items: flex-end; gap: 0.4em; }
.feat-streak img { flex: none; width: 3.4em; height: 3.4em; object-fit: contain; }
.feat-streak b { font-family: var(--font-display); font-stretch: 108%; font-size: 2.6em; font-weight: 800; letter-spacing: -0.03em; line-height: 0.9; font-variant-numeric: tabular-nums; }
.feat-streak small { padding-bottom: 0.15em; font-size: 0.95em; }
.feat-chain { position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin: 0.2em 0 0; padding: 0; list-style: none; }
.feat-chain::before { content: ""; position: absolute; top: 1.15em; right: 7%; left: 7%; height: 0.3em; margin-top: -0.15em; background: color-mix(in srgb, var(--accent) 45%, var(--surface)); }
.feat-chain li { position: relative; display: grid; justify-items: center; gap: 0.5em; }
.feat-chain li > span { display: grid; place-items: center; width: 2.3em; height: 2.3em; }
.feat-chain li.is-done > span { border-radius: 50%; background: var(--accent); box-shadow: inset 0 0 0 0.15em color-mix(in srgb, var(--accent) 60%, #000); }
.feat-flame { width: 1.3em; height: 1.3em; fill: var(--accent-ink); opacity: 0.6; }
.feat-chain li.is-rest > span::before { content: ""; width: 0.9em; height: 0.9em; border-radius: 50%; background: color-mix(in srgb, var(--accent) 45%, var(--surface)); }
.feat-chain li.is-today > span { border: 0.2em dashed var(--accent-text); border-radius: 50%; background: var(--surface); }
.feat-chain small { font-size: 0.8em; font-weight: 600; color: var(--ink-2); }
.feat-chain li.is-today small { color: var(--accent-text); font-weight: 700; }
.feat-saver { display: inline-flex; align-self: flex-start; align-items: center; gap: 0.45em; height: 2.6em; margin-top: auto; padding: 0 1em 0 0.8em; border-radius: 2em; background: var(--accent-soft); color: var(--accent-text); font-size: 0.95em; font-weight: 700; }
.feat-saver > i { font-size: 1.25em; }

/* XP and levels: the level bar, an achievement earned and the next one */
.feat-view.is-levels { gap: 0.5em; }
.feat-level { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6em; }
.feat-level b { flex: none; font-family: var(--font-display); font-stretch: 108%; font-size: 1.45em; font-weight: 800; letter-spacing: -0.03em; }
.feat-level small { font-variant-numeric: tabular-nums; }
.feat-medal { display: flex; align-items: center; gap: 0.7em; padding: 0.45em; border-radius: 1.2em; background: var(--bg-2); }
.feat-medal.is-earned { margin-top: auto; background: var(--accent-soft); }
.feat-medal > span:last-child { display: grid; flex: 1; gap: 0.35em; min-width: 0; }
.feat-medal b { overflow: hidden; font-size: 1em; line-height: 1.2; white-space: nowrap; text-overflow: ellipsis; }
.feat-medal small { color: var(--accent-text); font-weight: 700; }
.feat-medal:not(.is-earned) .feat-tile { background: var(--surface-2); color: var(--ink-2); }
.feat-medal:not(.is-earned) .feat-tile .ico { --ico-accent: var(--ink-3); --ico-dark: var(--surface-2); }

/* the XP shop: what there is to spend, and what it buys */
.feat-wallet { margin-bottom: auto; }
.feat-wallet b { display: block; font-family: var(--font-display); font-stretch: 108%; font-size: 2.2em; font-weight: 800; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.feat-wallet small { margin-top: 0.2em; }
.feat-buy { display: flex; align-items: center; gap: 0.55em; padding: 0.4em; border: 1px solid var(--line); border-radius: 1.2em; background: var(--surface-2); }
.feat-buy > b { flex: 1; min-width: 0; overflow: hidden; font-size: 1.02em; white-space: nowrap; text-overflow: ellipsis; }
.feat-buy .feat-tile { width: 2.4em; height: 2.4em; border-radius: 0.75em; }
.feat-price { flex: none; display: inline-flex; align-items: center; height: 2.2em; padding: 0 0.65em; border-radius: 2em; background: var(--accent); color: var(--accent-ink); font-size: 0.88em; font-weight: 700; white-space: nowrap; }

/* your profile: the face, the level and the month's training */
.feat-me { display: flex; align-items: center; gap: 0.8em; }
.feat-me .av { width: 4em; height: 4em; border-radius: 50%; }
.feat-me > span:last-child { display: grid; flex: 1; gap: 0.15em; min-width: 0; }
.feat-me .feat-bar { margin-top: 0.35em; }
.feat-me b { display: block; font-family: var(--font-display); font-stretch: 108%; font-size: 1.4em; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
/* the Month calendar's last three weeks under the weekdays: square days with
   their dates, as on the profile (the op-day rules), trained, planned
   (dashed), rest and today */
.feat-month { display: grid; gap: 0.35em; margin-top: auto; font-size: 0.8em; }
.feat-month > span { display: grid; grid-template-columns: repeat(7, 2.15em); justify-content: space-between; row-gap: 0.3em; }
.feat-month small { font-size: 1em; font-weight: 600; line-height: 1.2; text-align: center; color: var(--op-soft); }
.feat-month i { display: grid; place-items: center; aspect-ratio: 1; border-radius: 0.65em; font-style: normal; font-weight: 600; line-height: 1; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.feat-month i.is-done { background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.feat-month i.is-rest { background: var(--op-tint); color: var(--op-soft); font-weight: 500; }
.feat-month i.is-plan { outline: 1px dashed var(--op-plan); outline-offset: -1px; }
.feat-month i.is-today { box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--ink); font-weight: 700; }

/* friends and chats: the chat list, an unread one on top */
.feat-view.is-chats { gap: 0.2em; }
.feat-chat { display: flex; align-items: center; gap: 0.7em; min-height: 3.4em; padding: 0.25em 0.6em 0.25em 0.4em; border: 1px solid transparent; border-radius: 1.1em; }
.feat-chat.is-unread { border-color: var(--accent); }
.feat-chat > span:nth-child(2) { flex: 1; min-width: 0; }
.feat-chat b { display: block; font-size: 1.02em; line-height: 1.25; }
.feat-face { position: relative; flex: none; }
.feat-face .av { width: 2.8em; height: 2.8em; }
.feat-face > i { position: absolute; right: -0.2em; bottom: -0.2em; width: 1em; height: 1em; border: 0.18em solid var(--surface); border-radius: 50%; background: #2fbf5b; }
.feat-count { display: grid; flex: none; place-items: center; min-width: 1.8em; height: 1.8em; padding: 0 0.4em; border-radius: 1em; background: var(--accent); color: var(--accent-ink); font-size: 0.85em; font-weight: 700; }

/* progress stories: a friend's story, open */
.feat-story { position: relative; flex: 1; min-height: 0; overflow: hidden; border-radius: 1.2em; background: #121212; color: #fff; isolation: isolate; }
.feat-story > img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; }
.feat-story::before, .feat-story::after { content: ""; position: absolute; right: 0; left: 0; z-index: -1; height: 40%; }
.feat-story::before { top: 0; background: linear-gradient(rgba(0, 0, 0, 0.55), transparent); }
.feat-story::after { bottom: 0; background: linear-gradient(transparent, rgba(0, 0, 0, 0.55)); }
.feat-story-bars { position: absolute; top: 0.6em; right: 0.6em; left: 0.6em; display: grid; grid-template-columns: 1fr 1fr; gap: 0.3em; }
.feat-story-bars i { height: 0.25em; border-radius: 1em; background: #fff; }
.feat-story-bars i.is-on { background: linear-gradient(90deg, #fff 45%, rgba(255, 255, 255, 0.4) 45%); }
.feat-story-head { position: absolute; top: 1.3em; right: 0.6em; left: 0.6em; display: flex; align-items: center; gap: 0.45em; }
.feat-story-head .av { width: 2.2em; height: 2.2em; border: 1px solid rgba(255, 255, 255, 0.7); border-radius: 50%; }
.feat-story-head b { font-size: 0.95em; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); }
.feat-story-head small { font-size: 0.85em; color: rgba(255, 255, 255, 0.85); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); }
.feat-story-reply { position: absolute; right: 0.6em; bottom: 0.6em; left: 0.6em; display: flex; align-items: center; height: 2.6em; padding: 0 1em; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.55); border-radius: 2em; font-size: 0.9em; color: rgba(255, 255, 255, 0.9); white-space: nowrap; text-overflow: ellipsis; }

/* the gym finder: pins on the map, and the nearest open gym */
.feat-map { position: relative; flex: 1; min-height: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 1.2em; background: var(--bg-2); }
.feat-road { position: absolute; background: var(--surface-2); box-shadow: 0 0 0 1px var(--line); }
.feat-road.is-a { top: 44%; right: -10%; left: -10%; height: 0.7em; transform: rotate(-8deg); }
.feat-road.is-b { top: -10%; bottom: -10%; left: 56%; width: 0.6em; transform: rotate(14deg); }
.feat-road.is-c { top: 72%; right: -10%; left: -10%; height: 0.4em; transform: rotate(6deg); }
.feat-park { position: absolute; top: 8%; left: 6%; width: 28%; height: 26%; border-radius: 0.6em; background: color-mix(in srgb, var(--ok) 22%, var(--bg-2)); }
.feat-pin { position: absolute; display: grid; place-items: center; width: 2.4em; height: 2.4em; margin: -2.2em 0 0 -1.2em; color: var(--accent-text); }
.feat-pin > i { font-size: 2.2em; }
.feat-pin .ico { --ico-accent: var(--accent); --ico-dark: var(--bg-2); }
.feat-you { position: absolute; top: 52%; left: 40%; width: 1.3em; height: 1.3em; margin: -0.65em 0 0 -0.65em; border: 0.25em solid var(--surface-2); border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 0.5em color-mix(in srgb, var(--ink) 14%, transparent); }
.feat-gym { flex: none; }
.feat-gym b { display: block; overflow: hidden; font-size: 1.05em; white-space: nowrap; text-overflow: ellipsis; }
.feat-gym .is-open { color: var(--ok); font-weight: 600; }

/* BMI and calories: the dial, then the calories a day */
.feat-view.is-calculators { align-items: center; gap: 0.2em; }
.feat-dial { flex: none; width: 11em; height: 6.05em; margin-top: 0.1em; overflow: visible; }
.feat-dial-track, .feat-dial-fill { fill: none; stroke-width: 9; stroke-linecap: round; }
.feat-dial-track { stroke: var(--line); }
.feat-dial-fill { stroke: var(--accent); }
.feat-dial-dot { fill: var(--ink); stroke: var(--surface); stroke-width: 2.5; }
.feat-bmi { margin-top: -2.6em; text-align: center; }
.feat-bmi b { display: block; font-family: var(--font-display); font-stretch: 108%; font-size: 2.2em; font-weight: 800; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.feat-kcal { display: flex; align-self: stretch; align-items: baseline; gap: 0.5em; margin-top: auto; padding-top: 0.6em; border-top: 1px solid var(--line); }
.feat-kcal b { font-family: var(--font-display); font-stretch: 108%; font-size: 1.4em; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.feat-kcal small { min-width: 0; line-height: 1.25; white-space: normal; }

.intro-ios { display: flex; align-items: flex-start; gap: 12px; margin-top: 22px; padding: 14px 16px 4px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.intro-ios > i { flex: none; margin-top: 2px; font-size: 1.5rem; color: var(--accent-text); }
.intro-ios p { margin: 0; font-size: 0.92rem; line-height: 1.5; color: var(--ink-2); }
.intro-ios .link { display: inline-flex; align-items: center; min-height: 44px; }
.intro-a2hs ol { display: grid; gap: 14px; margin: 0 0 22px; padding: 0; list-style: none; counter-reset: a2hs; }
.intro-a2hs li { display: flex; align-items: center; gap: 12px; font-size: 0.98rem; line-height: 1.4; counter-increment: a2hs; }
.intro-a2hs li::before { content: counter(a2hs); flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-size: 0.85rem; font-weight: 800; }
.intro-a2hs li span { flex: 1; }
.intro-a2hs li > i { flex: none; font-size: 1.4rem; color: var(--accent-text); }
.intro-a2hs .sheet-actions .btn { height: 52px; }

/* building the plan: a step at a time, each with what came out of it, under
   a bar that fills; then a tick, and the plan is ready. On a short screen
   the icon goes and the steps close up, so it still fits without scrolling. */
.intro-building { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: calc(100dvh - env(safe-area-inset-top, 0px) - 46px); text-align: center; }
.intro-building-face { display: block; margin-bottom: 22px; animation: intro-pulse 0.8s ease-in-out infinite alternate; }
.intro-building .intro-avatar { width: 56px; height: 56px; }
@keyframes intro-pulse { from { transform: scale(1); } to { transform: scale(1.06); } }
.intro-ready-mark { display: grid; flex: none; place-items: center; width: 64px; height: 64px; margin-bottom: 18px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); }
.intro-ready-mark svg { width: 34px; height: 34px; stroke-width: 2.6; }
.intro-building.is-ready .intro-sub { margin-top: 8px; }
.intro-build-bar { flex: none; width: 100%; max-width: 340px; margin-top: 22px; }
.intro-build { display: grid; gap: 14px; width: 100%; max-width: 340px; margin: 22px 0 0; padding: 0; list-style: none; text-align: left; }
.intro-build li { display: flex; align-items: flex-start; gap: 12px; visibility: hidden; }
.intro-build li.is-shown { visibility: visible; animation: intro-draw 0.4s ease-out both; }
.intro-build-text { display: grid; flex: 1; gap: 2px; min-width: 0; }
.intro-build-line { font-size: 1rem; line-height: 1.35; color: var(--ink-2); }
.intro-build li.is-done .intro-build-line { color: var(--ink); }
.intro-build-detail { font-size: 0.86rem; line-height: 1.35; color: var(--ink-3); visibility: hidden; }
.intro-build li.is-done .intro-build-detail { visibility: visible; }
.intro-build-mark { position: relative; flex: none; width: 22px; height: 22px; border: 2px solid var(--line-2); border-top-color: var(--accent); border-radius: 50%; animation: intro-spin 0.8s linear infinite; }
.intro-build li.is-done .intro-build-mark { border-color: var(--accent); background: var(--accent); animation: none; }
.intro-build li.is-done .intro-build-mark::after { content: "\2713"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 0.72rem; font-weight: 800; color: var(--accent-ink); }
/* A download that failed: a still ring with a dash, and the line says what happens instead. */
.intro-build li.is-skipped .intro-build-mark { border-color: var(--line-2); animation: none; }
.intro-build li.is-skipped .intro-build-mark::after { content: ""; position: absolute; top: 50%; left: 50%; width: 8px; height: 2px; margin: -1px 0 0 -4px; border-radius: 1px; background: var(--ink-3); }
@keyframes intro-draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes intro-spin { to { transform: rotate(360deg); } }
.intro-retry { margin-top: 24px; }
@media (max-height: 740px) {
    .intro-building-face { display: none; }
    .intro-build { gap: 10px; }
    /* Ready: the tick and the sessions line come in, the results go (each
       was read as its step ended), so the list still fits in any language. */
    .intro-building.is-ready .intro-build-detail { display: none; }
}

/* the plan: the week, then Day 1 open (its first two exercises, the first
   with the start and the end of the move) and the rest veiled. A veil is
   rows of made-up letters in the plan's shapes, blurred, under a solid pill
   that says when it opens. His answers as chips come after the days. */
.intro-head { margin-top: 6px; }
.intro-sub { margin: 10px 0 0; font-size: 1rem; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.intro-sub + .intro-sub { margin-top: 4px; }
.intro-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; }
.intro-chips span { display: inline-flex; align-items: center; min-height: 30px; padding: 4px 12px; border: 1px solid var(--line); border-radius: 15px; background: var(--bg-2); font-size: 0.82rem; font-weight: 500; line-height: 1.25; color: var(--ink-2); }
.intro-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin: 18px 0; }
.intro-week > span { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0; height: 56px; overflow: hidden; border: 1.5px solid var(--line-2); border-radius: 12px; }
.intro-week small { max-width: 100%; overflow: hidden; font-size: 0.68rem; font-weight: 500; line-height: 1; color: var(--ink-3); white-space: nowrap; }
.intro-week b { font-size: 1.1rem; font-weight: 800; line-height: 1; }
.intro-week .is-train { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.intro-week .is-train small { color: var(--accent-ink); }
.intro-days { display: grid; gap: 10px; }
.intro-day { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.intro-day-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 2px 12px; min-height: 64px; padding: 12px 16px; }
.intro-day .day-tag { grid-column: 1; grid-row: 1 / span 2; }
.intro-day-title { grid-column: 2; grid-row: 1; font-size: 1.02rem; font-weight: 600; line-height: 1.25; }
.intro-day-meta { grid-column: 2; grid-row: 2; font-size: 0.84rem; color: var(--ink-3); }
.intro-day-head > i { grid-column: 3; grid-row: 1 / span 2; font-size: 1.15rem; color: var(--ink-3); }
.intro-lifts { padding: 0 16px; }
.intro-lift { padding-top: 12px; border-top: 1px solid var(--line); }
.intro-lift-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.intro-lift-photos .fp-pic, .intro-lib-photos .fp-pic { aspect-ratio: 4 / 3; border-radius: 12px; background: var(--surface-2); color: var(--ink-3); }
.intro-row { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 0.92rem; }
.intro-lift .intro-row { border-top: 0; }
.intro-row-name { flex: 1; min-width: 0; line-height: 1.3; }
.intro-lift .intro-row-name { font-size: 1.02rem; font-weight: 600; }
.intro-row b { flex: none; font-weight: 600; color: var(--accent-text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.intro-lift .intro-row b { font-size: 1rem; }
.intro .intro-thumb { width: 56px; height: 42px; border-radius: 10px; background: var(--surface-2); color: var(--ink-3); }
.intro-thumb > i { font-size: 1.2rem; }
.intro-locked { position: relative; }
.intro-veil { overflow: hidden; -webkit-user-select: none; user-select: none; pointer-events: none; }
.intro-veil ul { margin: 0; padding: 0 16px 8px; list-style: none; filter: blur(6px); }
.intro-veil li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 1rem; line-height: 1.35; color: var(--ink); }
/* Heavier than the open rows: the blur thins the letters out. */
.intro-veil li span { overflow: hidden; font-weight: 800; white-space: nowrap; }
.intro-veil li b { font-weight: 800; color: var(--accent-text); white-space: nowrap; }
.intro-veil-lock { position: absolute; top: 50%; right: 0; left: 0; display: flex; align-items: center; gap: 8px; width: max-content; max-width: calc(100% - 32px); min-height: 34px; margin: 0 auto; padding: 6px 14px; border: 1px solid var(--line-2); border-radius: var(--r-pill); background: var(--surface); font-size: 0.84rem; font-weight: 600; line-height: 1.25; color: var(--ink); transform: translateY(-50%); }
.intro-veil-lock > i { flex: none; font-size: 1rem; color: var(--accent-text); }
.intro-veil-lock > span { min-width: 0; }
.intro-unlock { margin-top: 24px; }
.intro .intro-unlock .intro-h2 { margin: 0 0 6px; font-size: 1.3rem; }
.intro-unlock p { margin: 0; font-size: 0.95rem; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.intro-fine { margin: 18px 0 0; font-size: 0.82rem; line-height: 1.5; color: var(--ink-3); }

/* what you get: a section to a part, its heading and tag on one row, then a
   picture (his own plan, photos and targets, library photos, or the
   welcome's cards in a row that scrolls sideways under the thumb, to the
   screen's edges), then a line about it. Last, what Premium adds and what
   stays free after the week. */
.intro-sec { margin-top: 32px; }
.intro-sec-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 14px; }
.intro .intro-sec-head .intro-h2 { margin: 0; font-size: 1.2rem; }
.intro-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border: 1px solid transparent; border-radius: var(--r-pill); font-size: 0.75rem; font-weight: 700; white-space: nowrap; }
.intro-tag.is-premium { background: var(--accent); color: var(--accent-ink); }
.intro-tag.is-free { border-color: var(--line-2); color: var(--ink-2); }
.intro-sec-line { margin: 12px 0 0; font-size: 0.95rem; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.intro-cards { display: flex; gap: 1em; margin: -4px -16px -8px; padding: 4px 16px 8px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; scrollbar-width: none; font-size: 11px; line-height: 1.3; -webkit-user-select: none; user-select: none; }
.intro-cards::-webkit-scrollbar { display: none; }
.intro-cards .feat { scroll-snap-align: start; }
/* A wide screen has room for every card: they wrap instead of scrolling. */
@media (min-width: 720px) { .intro-cards { flex-wrap: wrap; justify-content: center; margin: 0; padding: 0; overflow: visible; } }
.intro .intro-plan-card { width: auto; height: auto; gap: 0.8em; font-size: 12px; line-height: 1.3; }
.intro-plan-days { display: flex; flex-wrap: wrap; gap: 0.5em; }
.intro-plan-day { display: inline-flex; align-items: center; gap: 0.5em; height: 2.6em; padding: 0 0.9em 0 0.3em; border: 1px solid var(--line); border-radius: 2em; background: var(--surface-2); }
.intro-plan-day .day-tag { height: 2em; padding: 0 0.7em; font-size: 0.9em; }
.intro-plan-day b { font-size: 1.05em; white-space: nowrap; }
.intro-lib-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.intro-targets { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; margin-bottom: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.intro-targets b { display: block; font-family: var(--font-display); font-stretch: 108%; font-size: 2.2rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.intro-targets span + span b { color: var(--accent-text); }
.intro-targets small { display: block; margin-top: 4px; font-size: 0.86rem; color: var(--ink-2); }
.intro-targets p { grid-column: 1 / -1; margin: 10px 0 0; font-size: 0.86rem; line-height: 1.45; color: var(--ink-3); }
.intro-after { display: grid; gap: 20px; }
.intro-after h3 { margin: 0 0 10px; font-size: 1rem; font-weight: 700; }
.intro-after ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.intro-after li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.95rem; line-height: 1.4; }
.intro-after li > i { flex: none; margin-top: 1px; font-size: 1.15rem; color: var(--accent-text); }
@media (min-width: 720px) { .intro-after { grid-template-columns: 1fr 1fr; } }
.intro-tour > .intro-fine { margin-top: 28px; }

/* the free trial: the plan choice, what yearly saves, the week ahead */
.plan-choice { display: grid; gap: 10px; margin: 22px 0; }
.plan-choice-opt { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 3px; width: 100%; min-height: 72px; padding: 14px 56px 14px 18px; border: 1.5px solid var(--line-2); border-radius: 16px; background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 120ms ease; }
.plan-choice-opt:active { transform: scale(0.98); }
.plan-choice-opt::after { content: ""; position: absolute; top: 50%; right: 18px; display: grid; place-items: center; width: 24px; height: 24px; margin-top: -12px; border: 1.5px solid var(--line-2); border-radius: 50%; font-size: 0.8rem; font-weight: 800; color: var(--accent-ink); }
.plan-choice-opt[aria-checked="true"] { padding: 13.5px 55.5px 13.5px 17.5px; border: 2px solid var(--accent); background: var(--accent-soft); }
.plan-choice-opt[aria-checked="true"]::after { content: "\2713"; right: 17.5px; border-color: var(--accent); background: var(--accent); }
.plan-choice-opt[aria-disabled="true"] { cursor: default; opacity: 0.55; }
.plan-choice-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.plan-choice-top b { font-size: 1.05rem; font-weight: 700; }
.plan-choice-save { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: var(--r-pill); background: var(--accent); color: var(--accent-ink); font-size: 0.75rem; font-weight: 700; white-space: nowrap; }
.plan-choice-price { font-size: 0.95rem; color: var(--ink-2); }
.plan-choice-price [data-local-price] { font-size: 1.15rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.plan-choice-note { font-size: 0.86rem; color: var(--ink-2); }
.intro-anchor { margin: -10px 0 24px; font-size: 0.9rem; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.intro-anchor [data-local-price] { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.intro-timeline { margin: 0 0 28px; padding: 0; list-style: none; }
.intro-timeline li { position: relative; display: grid; gap: 1px; padding: 0 0 20px 32px; }
.intro-timeline li:last-child { padding-bottom: 0; }
.intro-timeline li::before { content: ""; position: absolute; top: 4px; left: 0; width: 16px; height: 16px; box-sizing: border-box; border-radius: 50%; background: var(--accent); }
.intro-timeline li:last-child::before { border: 2px solid var(--line-2); background: var(--bg); }
.intro-timeline li:not(:last-child)::after { content: ""; position: absolute; top: 24px; bottom: 2px; left: 7px; width: 2px; border-radius: 2px; background: var(--line-2); }
.intro-timeline b { font-weight: 600; }
.intro-timeline span { font-size: 0.92rem; line-height: 1.45; color: var(--ink-2); }
.intro-h2 { margin: 0 0 14px; font-family: var(--font-display); font-stretch: 105%; font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; }
.intro-print { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); }
.intro-print .intro-fine { margin: 0; }
.intro-print .intro-fine + .intro-fine { margin-top: 6px; }

/* saving the account: the trial is on, then the form (account.js) */
.intro-done { display: flex; align-items: center; gap: 10px; margin: 6px 0 24px; padding: 12px 14px; border-radius: 14px; background: var(--ok-soft); font-size: 0.95rem; font-weight: 600; color: var(--ink); }
.intro-done i { flex: none; font-size: 1.2rem; color: var(--ok); }
.intro-save { margin-top: 22px; }

@media (prefers-reduced-motion: reduce) {
    .intro-from-right, .intro-from-left, .intro-building-face, .intro-build li.is-shown, .intro-build-mark { animation: none; }
    .intro-answer, .plan-choice-opt, .intro-progress span { transition: none; }
    .intro-answer:active, .plan-choice-opt:active { transform: none; }
}

/* ---- Upgrade, pricing and Settings: the yearly option ---- */
/* Pricing: the free week under the lead, and the yearly price under the monthly one. */
.pricing-trial { margin: 14px 0 0; font-weight: 600; color: var(--ink); }
.tier .price-alt { margin: 8px 0 0; font-size: 0.92rem; font-weight: 500; font-variant-numeric: tabular-nums; }
/* Settings: the trial's second line, and the way to save an unsaved account. */
.plan-note-line { display: block; margin-top: 2px; }
.settings-row .save-it { display: inline-flex; align-items: center; min-height: 44px; margin-left: 6px; color: var(--accent-text); font-weight: 600; text-decoration: underline; }
.save-return { margin: 0 0 14px; font-weight: 600; }
/* The menu's Save your account, with a dot until it is done (rail.js). */
.rail #saveAccountLink .save-dot { flex: none; width: 10px; height: 10px; margin-left: auto; border-radius: 50%; background: var(--accent); }
/* Logging out an unsaved account: the warning, and its three buttons one under another. */
.sheet-card .sheet-lead { margin: -6px 0 18px; font-size: 0.94rem; line-height: 1.55; color: var(--ink-2); }
.sheet-actions.is-stacked { flex-direction: column; align-items: stretch; }
.sheet-actions.is-stacked .btn { width: 100%; }

/* ---- Save your account (account.js) ---- */
/* The form the intro ends with and Settings shows until the account is
   saved: Google or an email, the code sent to it, then a password. */
.save-acct { position: relative; display: grid; gap: 12px; min-width: 0; }
.save-acct h3 { margin: 4px 0 0; font-size: 1.1rem; }
.save-acct p { margin: 0; }
.save-acct-lead { font-size: 0.95rem; line-height: 1.5; color: var(--ink-2); overflow-wrap: anywhere; }
.save-acct-lead b { color: var(--ink); font-weight: 600; }
.save-acct-note { font-size: 0.86rem; line-height: 1.45; color: var(--ink-3); }
.save-acct-form { position: relative; display: grid; gap: 12px; min-width: 0; }
.save-acct .btn { min-height: 52px; height: auto; padding: 12px 18px; white-space: normal; text-align: center; line-height: 1.25; }
.save-acct .btn i { flex: none; }
.save-acct-g { flex: none; font-family: Arial, sans-serif; font-size: 1.1rem; font-weight: 700; color: #4285f4; }
.save-acct .field { margin: 0; }
.save-acct .field input { height: 52px; font-size: 16px; }
.save-acct-code input { font-size: 1.3rem; letter-spacing: 0.25em; text-align: center; font-variant-numeric: tabular-nums; }
.save-acct-links { display: flex; flex-wrap: wrap; gap: 0 20px; }
.save-acct-text { min-height: 44px; display: inline-flex; align-items: center; justify-self: start; text-align: left; }
.save-acct-text[disabled] { color: var(--ink-3); cursor: default; }
/* For password managers: the account name next to the new password. */
.save-acct-username { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.save-acct-done { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; border-radius: 14px;
    background: var(--ok-soft); color: var(--ink); font-weight: 600; line-height: 1.45; overflow-wrap: anywhere; }
.save-acct-done i { flex: none; font-size: 1.2rem; margin-top: 1px; color: var(--ok); }
.save-acct .status { margin: 0; }
/* An empty status line takes no row (and no gap) until it has something to
   say; it stays on the page so screen readers still hear it then. */
.save-acct .status:empty { position: absolute; min-height: 0; }

/* ==========================================================================
   Someone's profile (profile.html, profile-page.js): a nameplate, then for
   friends "<name>'s week", personal records, personal bests and the trophy
   case; for everyone else the trophy case and the longest streak. What
   shows depends on how you know them (public_profile cuts the data). Your
   own preview has a Friends | Everyone else switch. Two columns on a computer.
   ========================================================================== */
.pp-page, .pp-sheet { --pp-soft: color-mix(in srgb, var(--ink-3) 50%, var(--ink-2)); }
:root[data-theme="dark"] .pp-page, :root[data-theme="dark"] .pp-sheet { --pp-soft: var(--ink-3); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pp-page, :root:not([data-theme="light"]) .pp-sheet { --pp-soft: var(--ink-3); } }
.pp-loading { margin: 8px 2px; color: var(--ink-2); }
.pp-msg { padding: 44px 26px; }
.pp-msg .sub { margin: 10px 0 22px; color: var(--ink-2); }
.pp-page { display: grid; gap: 14px; width: 100%; max-width: 1060px; margin: 0 auto; }
.pp-col { display: grid; gap: 14px; align-content: start; min-width: 0; }
.pp-page .card { padding: 18px; }
.pp-page .card .ico { --ico-dark: var(--surface); }
.pp-page .btn.accent .ico { --ico-dark: var(--accent); }
/* The top bar: back, whose page it is, and the More menu. */
.pp-top { display: flex; align-items: center; gap: 8px; min-height: 48px; margin: -8px 0 -4px; }
.pp-top-title { flex: 1; min-width: 0; overflow: hidden; font-size: 1rem; font-weight: 600; color: var(--ink); text-overflow: ellipsis; white-space: nowrap; }
.pp-icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink); font-size: 1.5rem; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pp-icon:first-child { margin-left: -10px; }
.pp-icon:last-child { margin-right: -10px; }
.pp-icon:active { background: var(--bg-2); }
/* The nameplate: face, name with its flame, handle and level, about, friends you share, one button. */
.pp-plate-head { display: grid; grid-template-columns: 80px minmax(0, 1fr); align-items: center; column-gap: 16px; }
.avatar.pp-face { width: 80px; height: 80px; border-radius: 24px; font-size: 1.5rem; }
.pp-name { margin: 0; font-family: var(--font-display); font-stretch: 108%; font-weight: 800; font-size: 1.5rem; letter-spacing: -0.03em; line-height: 1.08; color: var(--ink); overflow-wrap: anywhere; text-wrap: balance; }
.pp-handle { margin: 6px 0 0; font-size: 0.9rem; font-weight: 500; line-height: 1.35; color: var(--ink-2); overflow-wrap: anywhere; }
.pp-at { font-weight: 600; color: var(--accent-text); }
.pp-bio { margin: 14px 0 0; font-size: 0.95rem; line-height: 1.5; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.pp-mutual { display: flex; align-items: center; gap: 10px; min-height: 32px; margin: 12px 0 0; font-size: 0.86rem; line-height: 1.4; color: var(--ink-2); }
.pp-faces { display: flex; flex: none; }
.avatar.pp-mface { width: 24px; height: 24px; border-radius: 8px; font-size: 0.5rem; box-shadow: 0 0 0 2px var(--surface); }
.avatar.pp-mface + .avatar.pp-mface { margin-left: -5px; }
.pp-mutual b { font-weight: 600; color: var(--ink); }
.pp-acts { display: flex; margin-top: 16px; }
.pp-acts .btn { flex: 1; min-width: 0; height: 48px; }
.pp-acts .btn[disabled] { opacity: 1; color: var(--ink-2); }
/* Your preview: what the button would be, drawn as a dashed stand-in. */
.pp-acts.is-inert .btn { border: 1.5px dashed var(--line-2); background: none; color: var(--ink-2); pointer-events: none; }
.pp-acts.is-inert .btn i { color: var(--ink-3); }
/* Card heads and the small text buttons in them. */
.pp-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 12px; min-height: 36px; margin-bottom: 4px; }
.pp-head h2 { min-width: 0; margin: 0; font-family: var(--font-display); font-stretch: 105%; font-weight: 700; letter-spacing: -0.02em; font-size: 1.2rem; line-height: 1.15; overflow-wrap: anywhere; }
.pp-count { flex: none; font-size: 0.86rem; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pp-link { position: relative; display: inline-flex; flex: none; align-items: center; gap: 4px; min-height: 44px; margin: -4px -8px -4px 0; padding: 0 8px; border: 0; border-radius: 10px; background: none; color: var(--accent-text); font: 600 0.88rem var(--font-ui); text-decoration: none; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pp-link i { font-size: 0.95rem; }
.pp-link:active { background: var(--bg-2); }
.pp-head .pp-link { margin-left: -8px; }
.pp-link[aria-pressed="true"] { color: var(--ink); }
.pp-link[aria-pressed="true"]::before { content: ""; width: 8px; height: 8px; margin-right: 3px; border-radius: 50%; background: var(--accent); }
.pp-sub { margin: 0 0 6px; font-size: 0.88rem; line-height: 1.45; color: var(--ink-2); }
/* "<name>'s week": Monday to Sunday, a tick on the days they trained. */
.pp-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin: 12px 0 16px; padding: 0; list-style: none; }
.pp-days li { display: grid; justify-items: center; gap: 6px; font-size: 0.76rem; font-weight: 600; color: var(--ink-2); }
.pp-days li.is-today { color: var(--accent-text); }
/* Empty days mix --ink-3: --line-2 alone is lost in dark mode. */
.pp-days i { display: grid; place-items: center; width: 40px; height: 40px; border: 1.5px solid color-mix(in srgb, var(--ink-3) 60%, transparent); border-radius: 50%; }
.pp-days li.is-later i { border-color: color-mix(in srgb, var(--ink-3) 35%, transparent); }
.pp-days li.is-done i { border-color: transparent; background: var(--accent); }
.pp-days li.is-today i { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--accent); }
.pp-days svg { width: 18px; height: 18px; fill: none; stroke: var(--accent-ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
/* What each day is, for screen readers only. */
.pp-said { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pp-facts { margin: 0 -18px -18px; border-top: 1px solid var(--line); }
.pp-fact { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 52px; padding: 8px 18px; font-size: 0.9rem; line-height: 1.35; color: var(--ink-2); }
.pp-fact + .pp-fact { border-top: 1px solid var(--line); }
.pp-fact > i { font-size: 1.35rem; color: var(--ink-2); }
.pp-fact > span { min-width: 0; overflow-wrap: anywhere; }
.pp-fact b { font-weight: 600; color: var(--ink); }
/* "Copy <name>'s workout plan": a fact row that is a button (profile-page.js). */
/* The icon sits in a small accent tile, so the one thing to do stands out
   from the facts above it without a big button. */
.pp-copy-plan { -webkit-appearance: none; appearance: none; width: 100%; margin: 0; border: 0; border-radius: 0; background: transparent; font: inherit; font-size: 0.9rem; line-height: 1.35; text-align: left; color: var(--ink); cursor: pointer; transition: background-color 0.15s ease; -webkit-tap-highlight-color: transparent; }
.pp-copy-plan > i:first-child { display: grid; place-items: center; width: 30px; height: 30px; margin-left: -3px; border-radius: 9px; background: var(--accent-soft); color: var(--accent-text); font-size: 1.05rem; }
.pp-copy-plan > span { font-weight: 600; color: var(--ink); }
.pp-copy-plan .pp-go { font-size: 1.05rem; color: var(--ink-3); transition: transform 0.15s ease, color 0.15s ease; }
.pp-copy-plan:hover { background: var(--bg-2); }
.pp-copy-plan:hover .pp-go { color: var(--ink); transform: translateX(2px); }
.pp-copy-plan:active { background: var(--line); }
.pp-copy-plan:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.pp-copy-plan:disabled { cursor: progress; opacity: 0.55; }
.pp-facts > .pp-copy-plan:last-child { border-radius: 0 0 var(--r-card) var(--r-card); }
@media (prefers-reduced-motion: reduce) { .pp-copy-plan, .pp-copy-plan .pp-go { transition: none; } .pp-copy-plan:hover .pp-go { transform: none; } }
.pp-chip { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-text); font-size: 0.76rem; font-weight: 600; white-space: nowrap; }
/* Personal records: the lift on the left, the best set big on the right. */
.pp-rec-list { margin: 4px -8px 0; padding: 0; list-style: none; }
.pp-rec { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 60px; padding: 8px; border-top: 1px solid var(--line); }
.pp-rec:first-child { border-top: 0; }
.pp-rec-l { display: grid; gap: 2px; min-width: 0; }
.pp-rec-l b { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 0.98rem; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.pp-rec-l small { font-size: 0.8rem; color: var(--pp-soft); }
.pp-new { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--r-pill); background: var(--accent); color: var(--accent-ink); font-size: 0.72rem; font-weight: 700; line-height: 1; }
.pp-rec-v { display: grid; justify-items: end; gap: 2px; white-space: nowrap; }
.pp-rec-v > span:first-child { display: flex; align-items: baseline; gap: 3px; }
.pp-rec-v strong { font-family: var(--font-display); font-stretch: 108%; font-weight: 800; font-size: 1.4rem; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.pp-rec-v em { font-style: normal; font-size: 0.82rem; font-weight: 600; color: var(--ink-2); }
.pp-you { font-size: 0.8rem; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.pp-you b { font-weight: 600; color: var(--accent-text); }
.pp-all { margin: 4px 0 -8px -8px; }
/* A quiet note: lifts kept private, or what friends would see. */
.pp-quiet, .pp-note.card { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 12px; }
.pp-quiet { margin-top: 8px; padding: 12px; border-radius: 14px; background: color-mix(in srgb, var(--ink) 6%, var(--surface)); }
.pp-note.card { padding: 16px; }
.pp-tile { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--surface); font-size: 1.35rem; color: var(--ink-2); }
.pp-page .pp-quiet .ico { --ico-dark: var(--surface); }
.pp-note .pp-tile { background: color-mix(in srgb, var(--ink) 6%, var(--surface)); }
.pp-page .pp-note .pp-tile .ico { --ico-dark: color-mix(in srgb, var(--ink) 6%, var(--surface)); }
.pp-quiet p, .pp-note p { margin: 0; font-size: 0.9rem; line-height: 1.45; color: var(--ink-2); }
.pp-quiet b { font-weight: 600; color: var(--ink); }
.pp-quiet .pp-link { margin: 2px 0 -10px -8px; }
/* Personal bests: four big numbers, two by two. */
.pp-bests-card { overflow: hidden; }
.pp-bests { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 10px -18px -18px; border-top: 1px solid var(--line); background: var(--line); }
.pp-bests > div { min-width: 0; padding: 15px 18px 16px; background: var(--surface); }
.pp-bests.is-odd > div:last-child { grid-column: 1 / -1; }
.pp-bests b, .pp-longest b { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 4px; font-family: var(--font-display); font-stretch: 108%; font-weight: 800; font-size: 2rem; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.pp-bests b small, .pp-longest b small { font-size: 0.95rem; letter-spacing: -0.01em; }
.pp-bests span { display: block; margin-top: 7px; font-size: 0.86rem; font-weight: 600; line-height: 1.25; color: var(--ink-2); }
.pp-bests em { display: block; margin-top: 2px; font-style: normal; font-size: 0.78rem; line-height: 1.3; color: var(--pp-soft); }
/* Someone who isn't a friend: the longest streak on its own. */
.pp-longest.card { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 76px; padding: 14px 18px; }
.pp-longest span { font-size: 0.98rem; font-weight: 600; color: var(--ink); }
/* The trophy case: the four newest on a shelf, names and dates lined up (subgrid). */
.pp-shelf { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto auto auto; column-gap: 6px; margin: 12px 0 0; }
.pp-shelf::before { content: ""; position: absolute; z-index: 0; left: -6px; right: -6px; top: 58px; height: 7px; border-radius: 4px; background: color-mix(in srgb, var(--ink) 10%, var(--surface)); }
.pp-trophy { position: relative; z-index: 1; display: grid; grid-row: span 3; grid-template-rows: subgrid; justify-items: center; align-content: start; min-width: 0; color: var(--ink); text-align: center; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.pp-medal { display: grid; place-items: center; width: 64px; height: 64px; border: 4px solid var(--accent); border-radius: 50%; background: var(--surface-2); box-shadow: inset 0 0 0 3px var(--surface-2), inset 0 0 0 5px color-mix(in srgb, var(--accent) 35%, var(--surface-2)); color: var(--ink); font-size: 1.9rem; }
.pp-page .pp-medal .ico { --ico-accent: var(--accent); --ico-dark: var(--surface-2); }
.pp-trophy:active .pp-medal { transform: scale(0.96); }
.pp-trophy b { display: block; max-width: 100%; max-height: 2.5em; margin-top: 12px; overflow: hidden; font-size: 0.78rem; font-weight: 600; line-height: 1.25; text-wrap: balance; hyphens: auto; }
.pp-trophy small { margin-top: 2px; font-size: 0.74rem; color: var(--pp-soft); }
.pp-trophy.is-empty .pp-medal { border: 2px dashed var(--line-2); background: var(--surface); box-shadow: none; }
.pp-next { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.pp-medal.is-next { width: 44px; height: 44px; border: 2px dashed var(--line-2); background: none; box-shadow: none; color: var(--ink-2); font-size: 1.35rem; }
.pp-page .pp-medal.is-next .ico { --ico-accent: var(--ink-3); --ico-dark: var(--surface); }
.pp-next b { display: block; font-size: 0.92rem; font-weight: 600; line-height: 1.3; }
.pp-next small { display: block; margin-top: 1px; font-size: 0.82rem; line-height: 1.35; color: var(--pp-soft); }
.pp-tally { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; margin-top: 8px; }
.pp-tally .tally-track { display: block; height: 6px; }
.pp-tally .tally-fill { display: block; width: var(--p, 0%); }
.pp-tally small { margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pp-seeall { display: flex; justify-content: center; margin: 8px 0 -8px; }
.pp-none { margin: 8px 0 0; }
/* Your preview: what it is, and whose eyes you are looking through. */
.pp-preview.card { padding: 14px; background: var(--accent-soft); box-shadow: none; }
.pp-preview b { display: block; font-size: 0.98rem; font-weight: 700; color: var(--ink); }
.pp-preview p { margin: 3px 0 0; font-size: 0.88rem; line-height: 1.45; color: var(--ink-2); }
.pp-seg { margin-top: 12px; background: var(--surface); }
.pp-seg > * { height: 44px; font-weight: 600; }
.pp-seg > .on { background: var(--ink); color: var(--bg); box-shadow: none; }
/* The More menu: who it is about, then the choices in one list. */
.pp-sheet-who { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 12px; margin: 0 0 16px; }
.avatar.pp-sface { width: 44px; height: 44px; border-radius: 13px; font-size: 0.8rem; }
.pp-sheet .pp-sheet-who h3 { margin: 0; font-size: 1.25rem; line-height: 1.15; overflow-wrap: anywhere; }
.pp-sheet-who small { display: block; margin-top: 3px; font-size: 0.86rem; color: var(--pp-soft); }
.pp-choices { --pp-row: color-mix(in srgb, var(--ink) 6%, var(--surface)); overflow: hidden; border-radius: 14px; background: var(--pp-row); }
.pp-choices button { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 0 16px; border: 0; border-top: 1px solid var(--line); background: none; color: var(--ink); font: 600 0.98rem var(--font-ui); text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pp-choices button:first-child { border-top: 0; }
.pp-choices i { font-size: 1.4rem; color: var(--ink-2); }
.pp-choices .ico { --ico-dark: var(--pp-row); }
.pp-choices button:active { background: color-mix(in srgb, var(--ink) 12%, var(--surface)); }
.pp-choices button:focus-visible { outline-offset: -3px; border-radius: 14px; }
/* Copying the profile link the old way: a box nobody sees. */
.pp-copy-box { position: fixed; top: 0; left: 0; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; font-size: 16px; }
.pp-sheet .btn.wide { height: 50px; margin-top: 12px; }
.pp-sheet .sheet-actions.is-stacked .btn { height: 50px; }
:root[data-theme="dark"] .pp-sheet .sheet-card { border: 1px solid var(--line); box-shadow: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pp-sheet .sheet-card { border: 1px solid var(--line); box-shadow: none; } }
@media (hover: hover) {
    .pp-icon:hover, .pp-link:hover, .pp-choices button:hover { background: var(--bg-2); }
}
/* A computer: the nameplate and the week on the left, the rest on the right. */
@media (min-width: 1081px) {
    .pp-page { grid-template-columns: 360px minmax(0, 1fr); gap: 16px 24px; align-items: start; }
    .pp-top { grid-column: 1 / -1; margin: -6px 0 -2px; }
    .pp-medal { width: 72px; height: 72px; font-size: 2.1rem; }
    .pp-shelf::before { top: 66px; }
    .pp-sheet .sheet-card { width: min(420px, 100%); }
}

/* ==========================================================================
   Your profile (dashboard.html, dashboard.js): the dock's Profile tab. Your
   face (round, with a camera badge), name, handle with your level and the XP
   bar; Home's streak card as it is; a calendar of the days you trained
   (Month or Year, a trained day opens its sets); three trends against your
   own plan; the achievement you are closest to; the rows. A phone shows one
   column in that order (the rows last); a computer keeps the header, the
   streak and the rows in a sticky column on the left.
   ========================================================================== */
:root {
    /* Quiet text that stays readable: --ink-3 is about 4.1:1 on the light
       page, so light mode takes it halfway to --ink-2. Dark keeps --ink-3. */
    --op-soft: color-mix(in srgb, var(--ink-3) 50%, var(--ink-2));
    --op-tint: color-mix(in srgb, var(--ink) 7%, transparent);
    /* A planned day's dashed outline: --line-2 alone is lost in dark mode. */
    --op-plan: color-mix(in srgb, var(--ink-3) 70%, transparent);
    --op-ok: color-mix(in srgb, var(--ok) 80%, var(--ink));
    --op-bad: color-mix(in srgb, var(--bad) 80%, var(--ink));
}
:root[data-theme="dark"] { --op-soft: var(--ink-3); --op-ok: var(--ok); --op-bad: var(--bad); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --op-soft: var(--ink-3); --op-ok: var(--ok); --op-bad: var(--bad); } }

/* One column on a phone, in this order; the two groups only matter on a computer. */
.op-page { display: flex; flex-direction: column; max-width: 560px; margin: 0 auto; }
.op-side, .op-mainc, .op-pair { display: contents; }
.op-top { order: 1; }
.op-head { order: 2; }
.op-streak { order: 3; }
.op-cal { order: 4; }
.op-trends { order: 5; }
.op-ach { order: 6; }
.op-rows { order: 7; }

/* The gear, the one way into Settings. */
.op-top { display: flex; justify-content: flex-end; min-height: 44px; margin: -8px -8px 0; }
.op-icon-btn { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: var(--ink); text-decoration: none; -webkit-tap-highlight-color: transparent; }
.op-icon-btn i { font-size: 1.6rem; }
.op-icon-btn:active { background: var(--op-tint); }

/* Your face, name, handle and level, centred. */
.op-head { display: grid; justify-items: center; min-width: 0; margin: 0 0 22px; text-align: center; }
.op-face-wrap { position: relative; width: 112px; height: 112px; }
.op-face-btn { display: block; width: 112px; height: 112px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.avatar.op-face { width: 112px; height: 112px; border-radius: 50%; font-size: 1.6rem; box-shadow: 0 0 0 1px var(--line); }
.op-face-btn:active .op-face { filter: brightness(0.94); }
/* The camera: 34 px on the face's corner, in a 44 px tap box. */
.op-cam { position: absolute; right: -10px; bottom: -10px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.op-cam > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--bg); background: var(--ink); color: var(--bg); font-size: 1.02rem; }
.op-cam:active > span { background: var(--ink-2); }
.op-name { max-width: 100%; margin: 16px 0 0; font-family: var(--font-display); font-stretch: 108%; font-weight: 800; font-size: 1.75rem; letter-spacing: -0.03em; line-height: 1.08; text-wrap: balance; overflow-wrap: anywhere; }
.op-handle { max-width: 100%; margin: 7px 0 0; font-size: 0.92rem; font-weight: 500; color: var(--ink-2); overflow-wrap: anywhere; }
.op-xp { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; max-width: 280px; margin-top: 14px; }
.op-xp .xp-track { height: 6px; }
.op-xp small { font-size: 0.8rem; font-weight: 600; color: var(--op-soft); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* The streak: Home's card (.tasks-streak), unchanged. */
.card.op-streak { margin: 0 0 24px; }

/* Section heads and cards. */
.op-sec { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; margin: 0 0 8px; }
.op-sec h2, .op-card-head h2 { margin: 0; font-family: var(--font-display); font-stretch: 108%; font-size: 1.15rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.card.op-trends, .card.op-ach { margin: 0 0 16px; padding: 18px 18px 16px; }
.op-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.op-card-head span { min-width: 0; font-size: 0.82rem; font-weight: 600; color: var(--op-soft); text-align: right; }
/* Month | Year: 38 px pills in a 44 px tap row. */
.op-seg { display: inline-flex; flex: none; padding: 3px; border-radius: var(--r-pill); background: var(--op-tint); }
.op-seg button { position: relative; height: 38px; padding: 0 16px; border: 0; border-radius: var(--r-pill); background: none; color: var(--ink-2); font: 500 0.88rem var(--font-ui); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.op-seg button::after { content: ""; position: absolute; inset: -3px 0; }
.op-seg button[aria-pressed="true"] { background: var(--ink); color: var(--bg); font-weight: 600; }

/* ---- the calendar: a month ---- */
.op-cal { margin: 0 0 16px; }
.card.op-cal-card { padding: 6px 12px 14px; }
.op-cal-head { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; }
.op-cal-head h3 { margin: 0; text-align: center; font-size: 1.05rem; font-weight: 700; }
.op-arrow { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 12px; background: none; color: var(--ink-2); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.op-arrow i { font-size: 1.2rem; }
.op-arrow:active { background: var(--op-tint); }
.op-arrow[disabled] { color: var(--line-2); cursor: default; }
.op-dow, .op-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.op-dow span { padding: 2px 0 6px; text-align: center; font-size: 0.74rem; font-weight: 600; color: var(--op-soft); }
.op-days { row-gap: 4px; }
.op-day { display: grid; place-items: center; min-width: 0; height: 44px; padding: 0; border: 0; background: none; font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
button.op-day { cursor: pointer; }
.op-day b { display: grid; place-items: center; width: 40px; max-width: 100%; height: 40px; border-radius: 12px; font-size: 0.9rem; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.op-day.is-done b { background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.op-day.is-rest b { background: var(--op-tint); color: var(--op-soft); font-weight: 500; }
.op-day.is-plan b { outline: 1.5px dashed var(--op-plan); outline-offset: -1.5px; }
/* Before you joined: plain and light, still readable. */
.op-day.is-before b { color: var(--op-soft); font-weight: 400; }
.op-day.is-today b { outline: 0; box-shadow: inset 0 0 0 2px var(--ink); color: var(--ink); font-weight: 700; }
.op-day.is-today.is-done b { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink); color: var(--accent-ink); }
button.op-day:active b { transform: scale(0.94); }
.op-cal-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; margin: 12px 4px 0; padding-top: 12px; border-top: 1px solid var(--line); }
.op-cal-foot b { font-size: 0.92rem; font-weight: 600; }
.op-start { position: relative; }
.op-start::after { content: ""; position: absolute; inset: -3px 0; }
.op-key { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 0.78rem; font-weight: 500; color: var(--op-soft); }
.op-key span { display: inline-flex; align-items: center; gap: 6px; }
.op-key i { display: inline-block; width: 12px; height: 12px; border-radius: 4px; background: var(--accent); }
.op-key i.r { background: var(--op-tint); box-shadow: inset 0 0 0 1px var(--line-2); }
.op-key i.p { background: none; outline: 1.5px dashed var(--op-plan); outline-offset: -1.5px; }

/* ---- the calendar: the year, twelve small months ---- */
.op-year { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 6px; margin: 2px 0 0; }
.op-mini { display: block; align-self: start; min-width: 0; padding: 5px 4px 6px; border: 0; border-radius: 10px; background: none; font: inherit; color: inherit; text-align: left; -webkit-tap-highlight-color: transparent; }
button.op-mini { cursor: pointer; }
button.op-mini:active { background: var(--op-tint); }
.op-mini > b { display: block; margin: 0 0 6px; font-size: 0.8rem; font-weight: 600; color: var(--ink-2); }
.op-mini.is-now > b { color: var(--ink); font-weight: 700; }
.op-mini-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.op-mini-days i { aspect-ratio: 1; border-radius: 3px; background: var(--op-tint); }
.op-mini-days i.e { background: none; }
.op-mini-days i.d { background: var(--accent); }
.op-mini-days i.f { background: none; box-shadow: inset 0 0 0 1px var(--line-2); }
.op-mini-days i.x { background: none; box-shadow: inset 0 0 0 1px var(--line); }
.op-mini-days i.t { box-shadow: 0 0 0 1.5px var(--ink); }

/* ---- trends: three rows ---- */
.op-trend-list { margin: 0 -18px; }
.op-trend { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 14px; padding: 13px 18px; border-top: 1px solid var(--line); color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.op-trend:first-child { padding-top: 4px; border-top: 0; }
.op-trend:last-child { padding-bottom: 2px; }
a.op-trend:active { background: var(--op-tint); }
.op-trend-txt { min-width: 0; }
.op-trend-k { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 0.84rem; font-weight: 600; color: var(--ink-2); overflow-wrap: anywhere; }
.op-trend-v { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin-top: 4px; }
.op-trend-v b { font-family: var(--font-display); font-stretch: 108%; font-weight: 800; font-size: 1.35rem; letter-spacing: -0.025em; line-height: 1.1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.op-trend-line { margin: 3px 0 0; font-size: 0.86rem; line-height: 1.4; color: var(--ink-2); }
.op-trend-empty { margin: 4px 0 0; font-size: 0.9rem; line-height: 1.45; color: var(--ink-2); }
.op-trend-empty a { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent-text); font-weight: 600; }
/* An arrow and a few words: the accent only when it is good for your goal, never red. */
.op-dir { display: inline-flex; align-items: center; gap: 4px; font-size: 0.86rem; font-weight: 600; line-height: 1.3; color: var(--ink-2); }
.op-dir svg { flex: none; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.op-dir.is-good { color: var(--accent-text); }
/* The kind line, only when a row moves the wrong way. */
.op-trend-note { grid-column: 1 / -1; margin: 6px 0 0; padding: 9px 12px; border-radius: 12px; background: var(--bg-2); font-size: 0.86rem; line-height: 1.45; color: var(--ink); }
.op-lock { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px 0 6px; border-radius: var(--r-pill); background: var(--bg-2); font-size: 0.72rem; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.op-lock i { font-size: 0.9rem; }
.op-spark { display: block; width: 92px; height: 40px; overflow: visible; }
.op-spark .raw { fill: color-mix(in srgb, var(--ink) 30%, transparent); }
.op-spark .line { fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.op-spark .end { fill: var(--accent); stroke: var(--surface); stroke-width: 2; }

/* ---- achievements: the next one, then the newest ---- */
.op-next { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 4px 12px; }
.op-next-ic { grid-row: 1 / span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: var(--accent-soft); color: var(--accent-text); font-size: 1.4rem; }
.op-next.is-all .op-next-ic { grid-row: auto; }
.op-next b { display: block; font-size: 0.98rem; font-weight: 600; line-height: 1.25; }
.op-next small { display: block; margin-top: 1px; font-size: 0.8rem; line-height: 1.3; color: var(--op-soft); }
.op-next-bar { grid-column: 2; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.op-next-bar .tally-track { height: 6px; }
.op-next-bar em { font-style: normal; font-size: 0.8rem; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.op-newest { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; margin: 14px -18px -16px; padding: 4px 10px 4px 18px; border-top: 1px solid var(--line); border-radius: 0 0 var(--r-card) var(--r-card); color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.op-newest:active { background: var(--op-tint); }
.op-newest > span:first-child { min-width: 0; font-size: 0.88rem; line-height: 1.35; color: var(--ink-2); }
.op-newest b { color: var(--ink); font-weight: 600; }
.op-when { white-space: nowrap; }
.op-go { display: inline-flex; flex: none; align-items: center; gap: 2px; font-size: 0.86rem; font-weight: 600; color: var(--accent-text); white-space: nowrap; }
.op-go i { font-size: 1rem; }

/* ---- the rows: 52 px, icon, words, a value, a chevron ---- */
.op-rows { margin: 0; padding: 4px 0; overflow: hidden; border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow); }
:root[data-theme="dark"] .op-rows { border: 1px solid var(--line); box-shadow: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .op-rows { border: 1px solid var(--line); box-shadow: none; } }
.op-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 7px 14px 7px 16px; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.op-row + .op-row { border-top: 1px solid var(--line); }
.op-row:active { background: var(--op-tint); }
.op-row > i:first-child { flex: none; width: 26px; font-size: 1.4rem; text-align: center; color: var(--ink-2); }
.op-row-t { flex: 1; min-width: 0; }
.op-row-t b { display: block; font-size: 0.96rem; font-weight: 600; line-height: 1.25; }
.op-row-t small { display: block; margin-top: 2px; font-size: 0.8rem; line-height: 1.3; color: var(--op-soft); }
.op-row em { flex: none; font-style: normal; font-size: 0.86rem; font-weight: 600; color: var(--op-soft); white-space: nowrap; }
.op-row-go { flex: none; font-size: 1rem; color: var(--op-soft); }
.op-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
/* "Friends can see my records": a switch. */
.op-switch { position: relative; flex: none; width: 52px; height: 32px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--ink) 18%, transparent); }
.op-switch::before { content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: transform 0.18s ease; }
.op-row[aria-checked="true"] .op-switch { background: var(--accent); }
.op-row[aria-checked="true"] .op-switch::before { transform: translateX(20px); }

/* ---- sheets: edit profile, and a day you trained ---- */
:root[data-theme="dark"] .op-sheet .sheet-card { border: 1px solid var(--line); box-shadow: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .op-sheet .sheet-card { border: 1px solid var(--line); box-shadow: none; } }
.op-sheet .sheet-card:focus { outline: none; }
.op-sheet-lead { margin: -10px 0 16px; font-size: 0.92rem; line-height: 1.5; color: var(--ink-2); }
.op-field { margin: 0 0 18px; }
.op-field > label, .op-label { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 7px; font-size: 0.86rem; font-weight: 600; color: var(--ink-2); }
.op-field-meta { display: inline-flex; align-items: center; gap: 8px; }
.op-field .inp { height: 50px; font-size: 16px; }
.op-field textarea.inp { height: 96px; min-height: 0; padding: 12px 14px; line-height: 1.45; resize: none; }
.op-saved { display: inline-flex; align-items: center; gap: 4px; font-size: 0.8rem; font-weight: 600; color: var(--op-ok); }
.op-count { font-size: 0.78rem; font-weight: 500; color: var(--op-soft); font-variant-numeric: tabular-nums; }
.op-field-err { margin: 6px 2px 0; font-size: 0.84rem; font-weight: 600; color: var(--op-bad); }
.op-note { display: flex; align-items: flex-start; gap: 6px; margin: 8px 2px 0; font-size: 0.8rem; line-height: 1.4; color: var(--op-soft); }
.op-note i { flex: none; margin-top: 1px; font-size: 0.95rem; }
.op-gyms { display: grid; gap: 8px; }
.op-gym { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 52px; padding: 6px 14px; border: 1.5px solid var(--line-2); border-radius: 12px; background: var(--surface-2); color: var(--ink); font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.op-gym > span { min-width: 0; }
.op-gym b { display: block; font-size: 0.95rem; font-weight: 600; overflow-wrap: anywhere; }
.op-gym small { display: block; font-size: 0.8rem; color: var(--op-soft); overflow-wrap: anywhere; }
.op-gym::after { content: ""; flex: none; width: 22px; height: 22px; border: 1.5px solid var(--line-2); border-radius: 50%; }
.op-gym[aria-pressed="true"] { border-color: var(--accent-strong); background: var(--accent-soft); }
.op-gym[aria-pressed="true"] small { color: var(--ink-2); }
.op-gym[aria-pressed="true"]::after { border: 7px solid var(--accent-strong); background: var(--surface-2); }
.op-done { height: 50px; margin-top: 2px; }
/* A day: every set, with the record marked. */
.op-day-sub { margin: -10px 0 14px; font-size: 0.9rem; line-height: 1.45; color: var(--ink-2); }
.op-day-sub.is-bad { color: var(--op-bad); font-weight: 600; }
.op-day-rec { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; padding: 12px 14px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-text); font-size: 0.88rem; font-weight: 600; line-height: 1.4; }
.op-day-rec i { flex: none; font-size: 1.3rem; }
.op-ex { padding: 12px 0; border-top: 1px solid var(--line); }
.op-day-sub + .op-ex, .op-day-rec + .op-ex { border-top: 0; }
.op-ex-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.op-ex-h b { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; font-size: 0.98rem; font-weight: 600; overflow-wrap: anywhere; }
.op-ex-h > span { flex: none; font-size: 0.8rem; font-weight: 600; color: var(--op-soft); white-space: nowrap; }
.op-rec { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--r-pill); background: var(--accent); color: var(--accent-ink); font-size: 0.72rem; font-weight: 700; line-height: 1; }
.op-sets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.op-sets span { display: inline-flex; align-items: center; height: 30px; padding: 0 11px; border-radius: 9px; background: var(--op-tint); font-size: 0.86rem; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.op-sets span.is-rec { background: var(--accent); color: var(--accent-ink); }
.op-day-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.op-day-acts .btn { flex: 1 1 150px; height: 48px; }

/* Settings › Appearance: the Language row (moved from this page). */
.op-lang > div:first-child { min-width: 0; }
.op-lang-pick { flex: none; width: min(320px, 100%); }
.op-lang-pick .status { margin: 6px 0 0; min-height: 0; }
.op-lang-pick .status:empty { display: none; }
@media (max-width: 640px) { .op-lang-pick { width: 100%; } }

/* A mouse: the same tint a tap gives, with no fade. */
@media (hover: hover) {
    .op-row:hover, .op-arrow:not([disabled]):hover, button.op-mini:hover, a.op-trend:hover, .op-newest:hover, .op-icon-btn:hover { background: var(--op-tint); }
    button.op-day:hover b, .op-face-btn:hover .op-face { filter: brightness(0.94); }
    .op-cam:hover > span { background: var(--ink-2); }
}

/* A computer: the header, streak and rows on the left, the rest on the right. */
@media (min-width: 1081px) {
    .op-main { padding-top: 30px; }
    .op-page { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 28px; align-items: start; max-width: 1100px; margin: 0; }
    .op-side { display: block; position: sticky; top: 24px; }
    .op-mainc, .op-pair { display: block; }
    .op-top { margin: -8px -8px -20px; }
    .op-rows { margin-bottom: 8px; }
    .op-sheet .sheet-card { width: min(440px, 100%); }
}
/* A short window: the left column scrolls with the page, so its rows are never out of reach. */
@media (min-width: 1081px) and (max-height: 799px) {
    .op-side { position: static; }
}
@media (min-width: 1400px) {
    .op-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
    .op-pair > .card { margin: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .op-switch::before { transition: none; }
    button.op-day:active b { transform: none; }
}

/* ==========================================================================
   Profile photos (avatars.js, avatar-picker.js, photo-report.js, toast.js):
   a member's photo wherever their face is drawn, your photo as the dock's
   Profile tab, the photo sheet, the Move and zoom step, reporting someone's
   photo, the toast every page uses, and admin's reported photos. Solid dims
   only, no blur.
   ========================================================================== */
:root {
    /* Red words (Remove photo, a failed save): --bad alone is 3.9:1 on its soft tint. */
    --pic-bad: color-mix(in srgb, var(--bad) 80%, var(--ink));
}
:root[data-theme="dark"] { --pic-bad: var(--bad); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --pic-bad: var(--bad); } }

/* A face with a photo: the picture fills the tile the drawn face was in. */
.av.is-photo, .avatar.is-photo { padding: 0; background: var(--bg-2); }
.av.is-photo > img, .avatar.is-photo > img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Dark mode: the drawn face's pale tile (its first shape) dims to a tint, so it is not a bright square on black. */
:root[data-theme="dark"] [data-avatar] > svg > path:first-child { opacity: 0.16; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) [data-avatar] > svg > path:first-child { opacity: 0.16; } }

/* The dock's Profile tab wears your photo: a 26 px circle where the icon was, ringed when picked. */
.tabbar .dock-face { display: block; flex: none; width: 26px; height: 26px; border-radius: 50%; font-size: 0; box-shadow: 0 0 0 1px var(--line); }
.tabbar-side > .on .dock-face { box-shadow: 0 0 0 2px var(--accent-soft), 0 0 0 4px var(--accent); }
.tabbar.menu-open .tabbar-side > .on:not(.is-open) .dock-face { box-shadow: 0 0 0 1px var(--line); }

/* ---- the toast: one at a time, above the dock, above any sheet ---- */
/* Ink with page-coloured text, so the tick's accent is mixed towards the page colour. */
.app-toast { --toast-tick: color-mix(in srgb, var(--accent) 50%, var(--bg)); position: fixed; z-index: 1400; left: 50%; bottom: calc(var(--tabbar-h, 0px) + env(safe-area-inset-bottom) + 16px); display: flex; align-items: center; gap: 9px; width: max-content; max-width: calc(100vw - 32px); min-height: 48px; padding: 7px 18px 7px 14px; border-radius: 24px; background: var(--ink); color: var(--bg); box-shadow: var(--shadow); font-size: 0.92rem; font-weight: 600; line-height: 1.3; transform: translate(-50%, 12px); visibility: hidden; pointer-events: none; transition: transform 0.22s ease, visibility 0s linear 0.22s; }
.app-toast.is-on { transform: translate(-50%, 0); visibility: visible; pointer-events: auto; transition: transform 0.22s ease; }
.app-toast svg { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--toast-tick); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
/* A failure: the warning mark in red, mixed the same way. */
.app-toast.is-error { --toast-tick: color-mix(in srgb, var(--bad) 55%, var(--bg)); }
.app-toast.is-error svg { stroke-width: 2.4; }
.app-toast span { min-width: 0; text-wrap: balance; overflow-wrap: anywhere; }
.app-toast.has-action { padding-right: 6px; }
.app-toast button { position: relative; flex: none; height: 36px; padding: 0 16px; border: 0; border-radius: var(--r-pill); background: var(--accent); color: var(--accent-ink); font: inherit; font-weight: 700; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.app-toast button::after { content: ""; position: absolute; inset: -4px -2px; }
.app-toast button:active { background: var(--accent-strong); }
@media (min-width: 1081px) {
    .app-toast { bottom: 28px; max-width: min(560px, calc(100vw - 48px)); }
    /* Centred under the page, not the whole window. */
    .shell ~ .app-toast { left: calc(50% + var(--rail-w) / 2); }
}

/* ---- the photo sheet (and the report sheet) ---- */
:root[data-theme="dark"] .pic-host .sheet-card { border: 1px solid var(--line); box-shadow: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pic-host .sheet-card { border: 1px solid var(--line); box-shadow: none; } }
.pic-host .sheet-card h3 { margin: 0 0 4px; font-family: var(--font-display); font-stretch: 108%; font-weight: 800; font-size: 1.4rem; letter-spacing: -0.02em; line-height: 1.15; }
.pic-host .sheet-lead { margin: 6px 0 16px; }
.avatar.pic-face { width: var(--s, 44px); height: var(--s, 44px); border-radius: 50%; font-size: calc(var(--s, 44px) * 0.3); box-shadow: 0 0 0 1px var(--line); }
.pic-current { display: grid; justify-items: center; margin: 14px 0 18px; }
.pic-rows { margin: 0 0 12px; overflow: hidden; border-radius: 16px; background: var(--bg-2); }
.pic-row { display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 6px 16px; border: 0; background: none; color: var(--ink); font: inherit; font-size: 1rem; font-weight: 600; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pic-row + .pic-row { border-top: 1px solid var(--line-2); }
.pic-row:active { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.pic-row i { font-size: 1.4rem; color: var(--ink-2); }
.pic-row .ico { --ico-dark: var(--bg-2); }
.pic-row.is-bad, .pic-row.is-bad i { color: var(--pic-bad); }
/* A computer: no camera row, a place to drop a picture instead. */
.pic-drop { display: none; justify-items: center; align-content: center; gap: 6px; min-height: 96px; margin: 0 0 12px; padding: 14px 16px; border: 2px dashed var(--line-2); border-radius: 16px; text-align: center; font-size: 0.9rem; color: var(--ink-2); }
.pic-drop i { font-size: 1.6rem; color: var(--ink-2); }
.pic-drop b { display: block; color: var(--ink); font-weight: 600; }
.pic-drop.is-over { border-color: var(--accent-strong); background: var(--accent-soft); }
@media (pointer: fine) {
    .pic-camera { display: none; }
    .pic-camera + .pic-row { border-top: 0; }
    .pic-drop { display: grid; }
    .pic-row:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
}
.pic-err { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; background: var(--bad-soft); color: var(--pic-bad); font-size: 0.9rem; font-weight: 600; line-height: 1.4; }
.pic-err[hidden] { display: none; }
.pic-err i { flex: none; margin-top: 1px; font-size: 1.15rem; }
.pic-note { margin: 0 0 16px; text-align: center; font-size: 0.95rem; line-height: 1.5; color: var(--ink-2); }
.pic-host .btn.wide { height: 52px; font-size: 1rem; }
.pic-host .btn.wide + .btn.wide { margin-top: 10px; }
.pic-save { margin: 0 0 14px; }
.pic-save-link { margin: 0 0 10px; }
.pic-foot { display: flex; align-items: flex-start; gap: 8px; margin: 14px 2px 0; font-size: 0.84rem; line-height: 1.45; color: var(--ink-2); }
.pic-foot i { flex: none; margin-top: 1px; font-size: 1rem; }
.pic-foot .ico { --ico-dark: var(--surface); }
/* Reporting: who, then six reasons as rows with a radio on the right. */
.pic-who { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 14px; margin: 0 0 14px; }
.pic-who .avatar.pic-face { border-radius: 12px; }
.pic-who h3 { margin: 0; }
.pic-who p { margin: 3px 0 0; font-size: 0.9rem; line-height: 1.4; color: var(--ink-2); overflow-wrap: anywhere; }
.pic-reasons { display: grid; margin: 0 0 12px; overflow: hidden; border-radius: 16px; background: var(--bg-2); }
.pic-reasons label { display: grid; grid-template-columns: minmax(0, 1fr) 22px; align-items: center; gap: 12px; min-height: 52px; padding: 4px 16px; font-size: 1rem; font-weight: 500; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pic-reasons label + label { border-top: 1px solid var(--line-2); }
.pic-reasons label:has(input:checked) { font-weight: 650; }
.pic-reasons input { width: 22px; height: 22px; margin: 0; border: 2px solid var(--ink-2); border-radius: 50%; background: var(--surface); appearance: none; -webkit-appearance: none; cursor: pointer; }
.pic-reasons input:checked { border: 7px solid var(--ink); }
.pic-reasons input:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; }
@media (min-width: 1081px) { .pic-host .sheet-card { width: min(420px, 100%); } }

/* ---- Move and zoom: the whole screen on a phone, a 420 px dialog on a computer ---- */
html.pic-open, html.pic-open body { overflow: hidden; }
.pic-crop { position: fixed; inset: 0; z-index: 1100; display: flex; flex-direction: column; padding-top: env(safe-area-inset-top); background: var(--bg); color: var(--ink); overscroll-behavior: contain; }
.pic-crop[hidden] { display: none; }
/* Opened from the home screen the crop covers the page's dark strip, so it carries its own behind the white status bar text. */
@media (display-mode: standalone) { .pic-crop::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: env(safe-area-inset-top); background: #000000; pointer-events: none; } }
.pic-crop-card { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.pic-crop-top { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; min-height: 52px; padding: 0 8px; }
.pic-crop-top h2 { margin: 0; text-align: center; font-family: var(--font-display); font-stretch: 108%; font-weight: 800; font-size: 1.2rem; letter-spacing: -0.02em; }
.pic-icon-btn { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pic-icon-btn i { font-size: 1.45rem; }
.pic-icon-btn:active { background: var(--bg-2); }
.pic-icon-btn[disabled] { opacity: 0.4; }
.pic-hint { margin: 0 16px 12px; text-align: center; font-size: 0.9rem; color: var(--ink-2); }
.pic-hint-mouse { display: none; }
@media (pointer: fine) { .pic-hint-touch { display: none; } .pic-hint-mouse { display: inline; } }
/* The photo, moved by a transform, under a circle with a solid dim around it. */
.pic-stage { position: relative; flex: none; width: 100%; height: clamp(220px, calc(100dvh - 400px - env(safe-area-inset-top) - env(safe-area-inset-bottom)), 100vw); overflow: hidden; background: #000; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; outline: none; }
.pic-stage:focus-visible { box-shadow: inset 0 0 0 3px var(--accent); }
.pic-stage.is-dragging { cursor: grabbing; }
.pic-stage img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; pointer-events: none; -webkit-user-drag: none; }
.pic-ring { position: absolute; z-index: 1; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.92), 0 0 0 9999px rgba(0, 0, 0, 0.62); pointer-events: none; }
.pic-zoom { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 6px; padding: 10px 12px 0; }
.pic-zoom button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink-2); font-size: 1.25rem; cursor: pointer; }
.pic-zoom button:active { background: var(--bg-2); }
.pic-zoom button[disabled], .pic-zoom input[disabled] { opacity: 0.4; }
/* The zoom slider: a plain accent fill up to a white thumb. */
.pic-range { position: relative; display: block; height: 44px; }
.pic-track { position: absolute; top: 50%; left: 14px; right: 14px; height: 4px; margin-top: -2px; overflow: hidden; border-radius: 2px; background: var(--line-2); }
.pic-track i { display: block; width: 0; height: 100%; background: var(--accent); }
.pic-range input { position: relative; display: block; width: 100%; height: 44px; margin: 0; background: none; -webkit-appearance: none; appearance: none; cursor: pointer; }
.pic-range input:focus { outline: none; }
.pic-range input::-webkit-slider-runnable-track { height: 44px; background: none; }
.pic-range input::-webkit-slider-thumb { width: 28px; height: 28px; margin-top: 8px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1.5px var(--line-2), 0 2px 6px rgba(0, 0, 0, 0.25); -webkit-appearance: none; appearance: none; }
.pic-range input::-moz-range-track { height: 44px; background: none; }
.pic-range input::-moz-range-thumb { width: 28px; height: 28px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1.5px var(--line-2), 0 2px 6px rgba(0, 0, 0, 0.25); }
.pic-range input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--accent-strong), 0 2px 6px rgba(0, 0, 0, 0.25); }
.pic-range input:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--accent-strong), 0 2px 6px rgba(0, 0, 0, 0.25); }
/* How it looks: the result at the sizes the app uses. */
.pic-looks { margin: 8px 20px; font-size: 0.86rem; font-weight: 600; color: var(--ink-2); }
.pic-sizes { display: flex; align-items: flex-end; gap: 20px; padding: 0 20px; }
.pic-sizes figure { display: grid; justify-items: center; gap: 6px; margin: 0; }
.pic-sizes figcaption { font-size: 0.78rem; font-weight: 600; color: var(--ink-2); }
.pic-prev { position: relative; display: block; width: var(--s); height: var(--s); overflow: hidden; border-radius: calc(var(--s) * 0.28); background: #fff; box-shadow: 0 0 0 1px var(--line); }
.pic-prev.is-round { border-radius: 50%; }
.pic-prev img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; }
.pic-crop-err { margin: 14px 20px 0; }
.pic-acts { display: flex; gap: 10px; margin-top: auto; padding: 16px 20px calc(16px + env(safe-area-inset-bottom)); }
.pic-acts .btn { flex: 1 1 0; min-width: 0; height: 52px; padding: 0 14px; font-size: 1rem; }
.pic-acts .btn.accent { flex-grow: 1.4; }
.pic-acts .btn span { overflow: hidden; text-overflow: ellipsis; }
.btn.is-busy { pointer-events: none; }
.pic-spin { flex: none; width: 18px; height: 18px; border: 2.5px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: pic-spin 0.8s linear infinite; }
.pic-crop.is-saving .pic-stage { opacity: 0.6; pointer-events: none; }
/* A save error takes room: the photo gets shorter so the buttons stay above the home bar. */
.pic-crop:has(.pic-crop-err:not([hidden])) .pic-stage { height: clamp(200px, calc(100dvh - 470px - env(safe-area-inset-top) - env(safe-area-inset-bottom)), 100vw); }
@keyframes pic-spin { to { transform: rotate(360deg); } }
@media (min-width: 1081px) {
    .pic-crop { align-items: center; justify-content: center; padding: 20px; background: rgba(12, 13, 16, 0.55); }
    .pic-crop-card { flex: none; width: 420px; max-height: calc(100dvh - 40px); border-radius: 20px; background: var(--surface); box-shadow: var(--shadow-lg); }
    .pic-stage { height: clamp(260px, calc(100dvh - 460px), 400px); }
    .pic-acts { padding-bottom: 18px; }
}
@media (min-width: 1081px) and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pic-crop-card { border: 1px solid var(--line); box-shadow: none; } }
@media (min-width: 1081px) { :root[data-theme="dark"] .pic-crop-card { border: 1px solid var(--line); box-shadow: none; } }

/* ---- admin: reported photos ---- */
.pic-admin-lead { margin: -8px 0 16px; }
.pic-admin-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.pic-admin-row { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: start; gap: 12px 14px; padding: 14px; border-radius: 14px; background: var(--bg-2); }
.pic-admin-photo { display: block; width: 72px; height: 72px; border-radius: 18px; object-fit: cover; background: var(--surface); }
.pic-admin-who { display: grid; gap: 3px; min-width: 0; font-size: 0.9rem; color: var(--ink-2); }
.pic-admin-who b { font-size: 0.98rem; color: var(--ink); overflow-wrap: anywhere; }
.pic-admin-why { overflow-wrap: anywhere; }
.tag-pill.pic-admin-hidden { justify-self: start; margin-top: 4px; border-color: transparent; background: var(--bad-soft); color: var(--pic-bad); }
.pic-admin-acts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.pic-admin-block { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 0.88rem; color: var(--ink-2); cursor: pointer; }
.pic-admin-block input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent-strong); }
.pic-admin-acts .mini-btn { height: 44px; padding: 0 18px; }
.pic-admin-note { padding: 12px 16px; border-radius: 12px; background: var(--bg-2); font-size: 0.9rem; line-height: 1.45; color: var(--ink-2); }
@media (min-width: 900px) {
    .pic-admin-row { grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; }
    .pic-admin-acts { grid-column: auto; justify-content: flex-end; }
}

@media (prefers-reduced-motion: reduce) {
    .app-toast, .app-toast.is-on { transform: translate(-50%, 0); transition: none; }
    .pic-spin { animation: none; }
}

/* ==========================================================================
   Food plan questions (food-questions.js): before a food plan is built, a
   few questions about how the member eats, one to a screen, in the intro's
   own chat (the classes under "The intro" above do the bubbles, answers,
   fields and bars). This adds the full-screen layer they sit in over
   food-plan.html, the two-column allergy grid, and the check screen: the
   two targets, every answer as a row, and notes when the answers leave few
   recipes. The dock steps aside while it is open.
   ========================================================================== */
html.in-food-questions .tabbar { display: none; }
html.in-food-questions body { overflow: hidden; }
/* Full screen on a computer too, with the intro's 460 px column. Opened from
   the home screen, it starts under the status bar (its dark strip is the
   page's html::after, drawn above everything). */
.fq-layer { position: fixed; inset: 0; z-index: 60; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding-top: env(safe-area-inset-top, 0px); background: var(--bg); color: var(--ink); }
.fq-layer[hidden] { display: none; }
/* The layer's padding already clears the status bar, and a sticky bar inside
   it counts from there: the intro's env() offset would count it twice. */
.fq .intro-top { top: 0; }

/* Allergies: two answers to a row, "No allergies" first across both. */
.fq .fq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.fq-grid .intro-answer { gap: 8px; min-height: 56px; padding: 11px 10px 11px 14px; border-radius: 14px; }
.fq-grid .intro-answer-text { overflow-wrap: break-word; }
.fq-grid .intro-answer-label { font-size: 0.98rem; line-height: 1.25; }
/* The notes break between words ("mussels" stays whole), or at a soft
   hyphen the translation puts in; the names never break. */
.fq-grid .intro-answer-note { font-size: 0.8rem; line-height: 1.3; hyphens: manual; }
.fq-grid .intro-answer::after { width: 22px; height: 22px; }
.fq-grid .fq-none-wide { grid-column: 1 / -1; }
/* A narrow phone: a little less padding and a smaller circle, so the
   longest names ("Meeresfrüchte") stay whole. */
@media (max-width: 374px) {
    .fq-grid .intro-answer { gap: 6px; padding: 10px 8px 10px 12px; }
    .fq-grid .intro-answer::after { width: 20px; height: 20px; }
    .fq-grid .intro-answer-label { font-size: 0.94rem; }
}
.fq-fine { margin: 2px 0 0; font-size: 0.84rem; line-height: 1.5; color: var(--ink-3); text-wrap: pretty; }

/* The check screen: the two numbers, protein in the accent. */
.fq-targets { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 22px; margin: 14px 0 0; }
.fq-targets > span { font-size: 1rem; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.fq-targets b { margin-right: 2px; font-family: var(--font-display); font-stretch: 108%; font-size: 2.2rem; font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.fq-targets .fq-protein b { color: var(--accent-text); }
.fq-head .intro-sub { margin-top: 6px; }

/* Every answer as a row: what it is, the answer, and a chevron. */
.fq-rows { margin: 20px 0 0; border-top: 1px solid var(--line); }
.fq-row { display: grid; grid-template-columns: auto minmax(0, 1fr) 18px; align-items: center; gap: 14px; width: 100%; min-height: 52px; padding: 8px 2px; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.fq-row:active { background: var(--bg-2); }
@media (hover: hover) { .fq-row:hover { background: var(--bg-2); } }
.fq-row-label { font-size: 0.95rem; color: var(--ink-2); white-space: nowrap; }
.fq-row-value { font-size: 0.98rem; font-weight: 600; line-height: 1.35; text-align: right; overflow-wrap: anywhere; }
.fq-row > i { justify-self: end; font-size: 1.05rem; color: var(--ink-3); }

/* Notes: a neutral card with a mark; amber for repeats and short protein,
   red when no week can be built. Never a coloured edge. */
.fq-notes { display: grid; gap: 10px; margin: 18px 0 0; }
/* The mark sits in the first line and the text runs on under it, so a note
   uses the whole width of its card. */
.fq-note { display: flow-root; margin: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); font-size: 0.92rem; line-height: 1.45; color: var(--ink-2); text-wrap: pretty; }
.fq-note > i { float: left; margin: 1px 9px 0 0; font-size: 1.2rem; line-height: 1; color: var(--ink-3); }
.fq-note.is-warn > i { color: var(--warn); }
.fq-note.is-bad { border-color: transparent; background: var(--bad-soft); color: var(--ink); }
.fq-note.is-bad > i { color: var(--bad); }
.fq .intro-bar .btn[disabled] { cursor: default; }

/* ==========================================================================
   Food plan (food-plan.html, food-plan-menu.js, food-cook.js): the week as a
   menu. Day is one outlined card (protein first, a tick and a swap on every
   meal), Week is every meal at once, Shopping list adds them up by aisle. A
   meal opens as a sheet with its ingredients to tick off; cook mode takes the
   whole screen, one step at a time. Photos sit on a dark tile with the food
   icon, which stays when a photo fails. Outlined, never a coloured edge.
   ========================================================================== */
:root { --fp-pic-bg: #161616; --fp-sx: 20px; }
.fp-main { max-width: 1140px; }
.fp { max-width: 640px; }
.fp [hidden] { display: none !important; }
.fp-fill { font-family: "Phosphor-Fill" !important; }

/* The head: the title, the targets, the answers button. */
.fp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 4px 0 16px; }
.fp-head h1 { margin: 0; font-family: var(--font-display); font-stretch: 108%; font-weight: 800; font-size: clamp(1.7rem, 3vw, 2.2rem); letter-spacing: -0.03em; line-height: 1; }
.fp-sub { margin: 8px 0 0; font-size: 0.92rem; color: var(--ink-2); }
.fp-sub:empty { display: none; }
.fp-sub b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.fp-round { display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line-2); border-radius: 50%; background: var(--surface); color: var(--ink); font-size: 1.3rem; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.fp-round:active { background: var(--surface-2); }
.fp-round[disabled] { opacity: 0.35; cursor: default; }
.fp-round.is-big { width: 56px; height: 56px; font-size: 1.4rem; }

/* Cards: one outline, the same in both themes. */
.fp-card { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.fp-card + .fp-card, .fp-menu + .fp-card { margin-top: 12px; }
.fp-state { padding: 22px 20px; }
.fp-state h2 { margin: 0 0 8px; font-family: var(--font-display); font-stretch: 106%; font-weight: 800; font-size: 1.4rem; letter-spacing: -0.02em; line-height: 1.1; }
.fp-state p { margin: 0; font-size: 0.95rem; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.fp-state-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.fp-state-acts .btn { height: 48px; }
.fp-state.is-start .fp-state-acts .btn { flex: 1 1 auto; }
.fp-ended, .fp-drift { display: grid; gap: 12px; margin-bottom: 14px; padding: 14px 16px; }
.fp-ended p, .fp-drift p { margin: 0; font-size: 0.9rem; line-height: 1.45; color: var(--ink); }
.fp-ended .btn { justify-self: start; height: 44px; }
.fp-drift-acts { display: flex; gap: 8px; }
.fp-drift-acts .btn { height: 44px; }

/* A still outline while the plan loads. */
.fp-skel > * { border-radius: var(--r-card); background: var(--surface); }
.fp-skel-tabs { height: 52px; margin-bottom: 14px; border-radius: var(--r-pill); }
.fp-skel-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; margin-bottom: 14px; background: none; }
.fp-skel-strip i { height: 68px; border-radius: 14px; background: var(--surface); }
.fp-skel-card { display: grid; gap: 14px; padding: 18px 16px; border: 1px solid var(--line); }
.fp-skel-card b { width: 45%; height: 22px; border-radius: 8px; background: var(--bg-2); }
.fp-skel-card span { height: 56px; border-radius: 12px; background: var(--bg-2); }

/* Day, Week, Shopping list: one pill, the picked one solid ink. */
.fp-tabs { display: grid; grid-template-columns: 1fr 1fr 1.45fr; gap: 3px; margin-bottom: 14px; padding: 3px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); }
.fp-tabs button { height: 44px; padding: 0 10px; border: 0; border-radius: var(--r-pill); background: none; color: var(--ink-2); font-family: var(--font-ui); font-size: 0.92rem; font-weight: 600; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.fp-tabs button[aria-selected="true"] { background: var(--ink); color: var(--bg); }

/* The week strip: each day's calories. */
.fp-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; margin-bottom: 14px; }
.fp-strip button { display: grid; justify-items: center; align-content: center; gap: 2px; min-width: 0; height: 68px; padding: 0; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); font-family: var(--font-ui); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.fp-strip-d { font-size: 0.75rem; font-weight: 600; line-height: 1; color: var(--ink-3); }
.fp-strip-n { font-family: var(--font-display); font-stretch: 108%; font-weight: 800; font-size: 1.2rem; letter-spacing: -0.02em; line-height: 1.05; }
.fp-strip-k { max-width: 100%; overflow: hidden; font-size: 0.72rem; font-weight: 600; line-height: 1; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.fp-strip button.is-today:not(.is-on) { border-color: var(--accent); }
.fp-strip button.is-today:not(.is-on) .fp-strip-n { color: var(--accent-text); }
.fp-strip button.is-on { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.fp-strip button.is-on .fp-strip-d, .fp-strip button.is-on .fp-strip-k { color: var(--accent-ink); }

/* The notes about the answers (too few recipes, short on protein). */
.fp-notes { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; margin-bottom: 12px; padding: 14px 16px; }
.fp-notes > i { margin-top: 1px; font-size: 1.25rem; color: var(--warn); }
.fp-notes p { margin: 0 0 6px; font-size: 0.9rem; line-height: 1.45; color: var(--ink); }
.fp-notes .link { min-height: 44px; margin: -6px 0 -12px; font-size: 0.9rem; }

/* The day: one menu card. */
.fp-menu-top { padding: 15px 16px 14px; border-bottom: 1px solid var(--line); }
.fp-menu-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fp-menu-title h2 { margin: 0; font-family: var(--font-display); font-stretch: 108%; font-weight: 800; font-size: 1.3rem; letter-spacing: -0.02em; line-height: 1.1; }
.fp-menu-title h2 span { font-family: var(--font-ui); font-size: 0.9rem; font-weight: 500; letter-spacing: 0; color: var(--ink-3); }
.fp-pill-today { display: inline-flex; align-items: center; flex: none; height: 26px; padding: 0 11px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-text); font-size: 0.78rem; font-weight: 700; }
.fp-stats { display: grid; grid-template-columns: 1.25fr 1.2fr 1fr 1fr; margin-top: 12px; }
.fp-stat { min-width: 0; }
.fp-stat + .fp-stat { padding-left: 12px; border-left: 1px solid var(--line); }
.fp-stat b { display: block; font-family: var(--font-display); font-stretch: 106%; font-weight: 800; font-size: 1.32rem; letter-spacing: -0.02em; line-height: 1.05; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fp-stat span { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 3px; font-size: 0.76rem; font-weight: 500; line-height: 1.2; color: var(--ink-3); overflow-wrap: anywhere; hyphens: manual; }
.fp-stat.is-p b { color: var(--accent-text); }
.fp-stat.is-s b { padding-top: 3px; font-size: 1.05rem; color: var(--ink-2); }
.fp-ok { font-size: 0.95rem; color: var(--ok); }
.fp-line { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 0.93rem; font-weight: 500; line-height: 1.4; color: var(--ink); text-wrap: pretty; }
.fp-cookmin { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; font-size: 0.82rem; color: var(--ink-3); }
.fp-cookmin i { font-size: 1rem; }

.fp-meal { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px; padding: 10px 4px 10px 12px; }
.fp-meal + .fp-meal { border-top: 1px solid var(--line); }
.fp-meal.is-none { grid-template-columns: 56px minmax(0, 1fr); gap: 12px; padding-right: 12px; }
.fp-meal-open { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 12px; min-width: 0; min-height: 60px; padding: 0; border: 0; border-radius: 12px; background: none; color: inherit; font-family: var(--font-ui); text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.fp-meal-txt { display: grid; gap: 2px; min-width: 0; }
.fp-meal-txt b { overflow: hidden; font-size: 1rem; font-weight: 600; line-height: 1.25; white-space: nowrap; text-overflow: ellipsis; }
.fp-meal-txt b.is-clamp { display: -webkit-box; white-space: normal; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.fp-meal-txt small { font-size: 0.8rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.fp-when { display: flex; align-items: center; gap: 5px; overflow: hidden; font-size: 0.8rem; line-height: 1.3; color: var(--ink-3); white-space: nowrap; text-overflow: ellipsis; }
.fp-meal.is-none .fp-when { white-space: normal; }
.fp-when i { flex: none; font-size: 0.95rem; color: var(--accent-text); }
.fp-mac { font-size: 0.84rem; line-height: 1.3; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fp-mac em { font-style: normal; font-weight: 600; color: var(--ink); }
.fp-mac strong { font-weight: 600; color: var(--accent-text); }
.fp-meal.is-eaten .fp-meal-txt b { color: var(--ink-2); }
.fp-meal-acts { display: flex; align-items: center; }
.fp-swapbtn { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink-2); font-size: 1.35rem; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.fp-swapbtn:active { background: color-mix(in srgb, var(--ink) 8%, transparent); }
/* The eaten tick: a 26px ring that fills with the accent, inside a 44px target. */
.fp-tick { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.fp-tick > span { display: grid; place-items: center; width: 26px; height: 26px; border: 2px solid color-mix(in srgb, var(--ink) 48%, transparent); border-radius: 50%; color: transparent; }
.fp-tick svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.fp-tick.is-on > span { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.fp-tick.is-still { cursor: default; }
.fp-tick:focus-visible { outline: none; }
.fp-tick:focus-visible > span { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Photos and their tile. */
.fp-pic { position: relative; display: grid; place-items: center; flex: none; overflow: hidden; border-radius: 12px; background: var(--fp-pic-bg); color: #8a8a8a; }
.fp-pic > i { font-size: 1.6rem; }
.fp-pic .ico { --ico-dark: var(--fp-pic-bg); --ico-accent: var(--accent); }
.fp-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fp-pic-sq { width: 56px; height: 56px; }
.fp-pic-sq.is-64 { width: 64px; height: 64px; }
.fp-pic-sq.is-52 { width: 52px; height: 52px; border-radius: 10px; }
.fp-pic-fill { position: absolute; inset: 0; border-radius: inherit; }
.fp-pic-fill > i { font-size: 1.35rem; }
.fp-pic-round { width: 44px; height: 44px; border: 2px solid var(--surface); border-radius: 50%; }
.fp-pic-round > i { font-size: 1.1rem; }

/* Close the gap: a dashed accent outline, one swap. */
.fp-gap { padding: 16px; border: 1.5px dashed var(--accent); }
.fp-gap-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fp-gap h3 { margin: 0; font-size: 1.15rem; }
.fp-gap > p { margin: 6px 0 12px; font-size: 0.9rem; line-height: 1.45; color: var(--ink-2); }
.fp-tag-warn { display: inline-flex; align-items: center; flex: none; height: 26px; padding: 0 10px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-text); font-size: 0.78rem; font-weight: 700; white-space: nowrap; }
.fp-gap-row { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 12px; margin-bottom: 14px; }
.fp-gap-txt { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.fp-gap-txt b { min-width: 0; font-size: 0.95rem; font-weight: 600; line-height: 1.3; }
.fp-gap .btn { height: 48px; }
.fp-delta { display: inline-flex; align-items: center; flex: none; height: 28px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: var(--r-pill); color: var(--ink-2); font-size: 0.8rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fp-delta.is-up { border-color: transparent; background: var(--ok-soft); color: var(--ok); }

/* Next week: the card that opens the picker. */
.fp-next { padding: 16px; }
.fp-next h3 { margin: 0; font-size: 1.15rem; }
.fp-next > p { margin: 6px 0 12px; font-size: 0.9rem; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.fp-next-pics { display: flex; margin: 0 0 14px 4px; }
.fp-next-pics .fp-pic-round + .fp-pic-round { margin-left: -10px; }
.fp-next-state { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; font-size: 0.9rem; font-weight: 600; color: var(--ink); }
.fp-next-state i { font-size: 1.15rem; color: var(--ok); }
.fp-next .btn { height: 48px; }
.fp-pdf { margin-top: 14px; height: 48px; }
.fp-credits-link { margin: 14px 2px 0; font-size: 0.84rem; }
.fp-credits-link a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }

/* The week at a glance. */
.fp-wk-sum { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 2px 2px 6px; }
.fp-wk-sum b { display: block; font-family: var(--font-display); font-stretch: 108%; font-weight: 800; font-size: 1.15rem; letter-spacing: -0.02em; line-height: 1.1; }
.fp-wk-key { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 0.8rem; color: var(--ink-3); }
.fp-wk-avg { flex: none; text-align: right; font-size: 0.8rem; color: var(--ink-3); }
.fp-wk-avg span { display: block; font-size: 0.9rem; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fp-wk-avg strong { font-weight: 600; color: var(--accent-text); }
.fp-wk-hit { margin: 0 2px 10px; font-size: 0.86rem; color: var(--ink-2); }
.fp-wk-row { display: grid; grid-template-columns: 70px repeat(4, minmax(0, 1fr)); align-items: center; gap: 6px; padding: 4px; border: 1px solid transparent; border-radius: 14px; }
.fp-wk-row.is-3 { grid-template-columns: 70px repeat(3, minmax(0, 1fr)); }
.fp-wk-row + .fp-wk-row { margin-top: 2px; }
.fp-wk-row.is-today { border-color: var(--accent); background: var(--accent-soft); }
.fp-wk-colh span { min-width: 0; font-size: 0.72rem; font-weight: 600; line-height: 1.15; text-align: center; color: var(--ink-3); overflow-wrap: anywhere; hyphens: manual; }
.fp-wk-day { display: grid; align-content: center; gap: 1px; height: 52px; min-width: 0; padding: 0 0 0 6px; border: 0; border-radius: 10px; background: none; color: var(--ink); font-family: var(--font-ui); text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.fp-wk-day b { font-size: 0.86rem; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.fp-wk-day span { font-size: 0.72rem; font-weight: 600; line-height: 1.25; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fp-wk-day span.is-p { color: var(--accent-text); }
/* Darker than --warn in light mode, so the small text reads on today's tinted row too; dark keeps --warn. */
.fp-wk-day span.is-warn { color: color-mix(in srgb, var(--warn) 65%, var(--ink)); }
:root[data-theme="dark"] .fp-wk-day span.is-warn { color: var(--warn); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fp-wk-day span.is-warn { color: var(--warn); } }
.fp-wk-tile { position: relative; display: block; height: 52px; padding: 0; border: 0; border-radius: 10px; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.fp-wk-tile.is-empty .fp-pic { background: var(--bg-2); }
.fp-lo { display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-size: 0.78rem; }
.fp-lo i { font-family: "Phosphor-Fill" !important; }
.fp-wk-tile .fp-lo { position: absolute; z-index: 1; top: 4px; left: 4px; box-shadow: 0 0 0 2px var(--bg); }
.fp-wk-grid + .fp-card { margin-top: 16px; }

/* The shopping list. */
.fp-shop-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 2px 2px 12px; }
.fp-shop-top b { display: block; font-family: var(--font-display); font-stretch: 108%; font-weight: 800; font-size: 1.15rem; letter-spacing: -0.02em; line-height: 1.1; }
.fp-shop-top small { display: block; margin-top: 3px; font-size: 0.8rem; color: var(--ink-3); }
.fp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; padding: 4px 0; }
.fp-chip { position: relative; flex: none; height: 36px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: var(--r-pill); background: none; color: var(--ink-2); font-family: var(--font-ui); font-size: 0.86rem; font-weight: 600; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.fp-chip::after { content: ""; position: absolute; inset: -4px 0; }
.fp-chip.is-on { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.fp-shop-prog { display: grid; gap: 8px; margin: 0 2px 4px; }
.fp-shop-prog > span { font-size: 0.86rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.fp-shop-prog > span b { color: var(--ink); font-weight: 700; }
.fp-bar { height: 6px; overflow: hidden; border-radius: var(--r-pill); background: var(--line); }
.fp-bar i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.fp-aisle { margin-top: 12px; }
.fp-aisle + .fp-aisle { margin-top: 12px; }
.fp-aisle-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 16px 6px; }
.fp-aisle-h h3 { margin: 0; font-size: 1.08rem; }
.fp-aisle-h span { font-size: 0.8rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.fp-item { position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 58px; padding: 8px 16px; border-top: 1px solid var(--line); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.fp-aisle-h + .fp-item { border-top: 0; }
.fp-item input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.fp-box { display: grid; place-items: center; width: 26px; height: 26px; border: 2px solid color-mix(in srgb, var(--ink) 48%, transparent); border-radius: 8px; color: transparent; }
.fp-box.is-round { border-radius: 50%; }
.fp-box svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.fp-item.is-on .fp-box, .fp-ing.is-on .fp-box { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.fp-item input:focus-visible + .fp-box { outline: 3px solid var(--accent); outline-offset: 2px; }
.fp-item-n { display: grid; gap: 1px; min-width: 0; }
.fp-item-n b { overflow: hidden; font-size: 0.96rem; font-weight: 600; line-height: 1.3; white-space: nowrap; text-overflow: ellipsis; }
.fp-item-n small { overflow: hidden; font-size: 0.77rem; line-height: 1.3; color: var(--ink-3); white-space: nowrap; text-overflow: ellipsis; }
.fp-amt { font-size: 0.95rem; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fp-amt small { display: block; font-size: 0.76rem; font-weight: 500; color: var(--ink-3); }
.fp-amt.is-taste { font-weight: 500; color: var(--ink-3); }
.fp-item.is-on .fp-item-n b { color: var(--ink-3); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.fp-item.is-on .fp-amt { color: var(--ink-3); }
.fp-spices { margin: 0; padding: 12px 16px 14px; border-top: 1px solid var(--line); font-size: 0.86rem; line-height: 1.5; color: var(--ink-2); }
.fp-aisle > .fp-spices:first-child { border-top: 0; }
.fp-spices b { display: block; margin-bottom: 2px; font-size: 0.9rem; color: var(--ink); }
.fp-shop-foot { margin: 14px 2px 0; font-size: 0.8rem; line-height: 1.45; color: var(--ink-3); }
.fp-empty { margin: 14px 2px 4px; font-size: 0.9rem; line-height: 1.45; color: var(--ink-3); }

/* ---- sheets: brotein.css lays them out, these fill them ---- */
html .fp-sheet .sheet-card { padding-bottom: 0; outline: none; }
.fp-sheet .sheet-card:focus { outline: none; }
:root[data-theme="dark"] .fp-sheet .sheet-card { border: 1px solid var(--line); box-shadow: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fp-sheet .sheet-card { border: 1px solid var(--line); box-shadow: none; } }
/* The foot stays under the thumb while the sheet scrolls. */
.fp-sfoot { position: sticky; bottom: 0; z-index: 2; display: flex; gap: 10px; margin: 18px calc(-1 * var(--fp-sx)) 0; padding: 12px var(--fp-sx) calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--surface); }
.fp-sfoot .btn { flex: 1; height: 56px; font-size: 1.02rem; }
.fp-send { height: calc(22px + env(safe-area-inset-bottom)); }
.fp-sh-title { margin: 2px 0 0; font-family: var(--font-display); font-stretch: 108%; font-weight: 800; font-size: 1.5rem; letter-spacing: -0.025em; line-height: 1.05; }
.fp-sh-date { margin: 4px 0 0; font-size: 0.86rem; color: var(--ink-3); }
.fp-sh-sub { margin: 6px 0 0; font-size: 0.9rem; line-height: 1.45; color: var(--ink-2); text-wrap: pretty; }
.fp-sh-sub b { color: var(--ink); font-weight: 600; }

/* The recipe. */
.fp-r-photo { width: 100%; aspect-ratio: 2 / 1; border-radius: 16px; }
.fp-r-photo > i { font-size: 3rem; }
.fp-r-pcredit { margin: 8px 2px 14px; font-size: 0.75rem; line-height: 1.35; text-align: right; color: var(--ink-3); }
/* Inline links keep a 44 px tall hit area without pushing the lines apart: the
   author's grows up into the photo and the licence's down, so on a credit that
   wraps neither covers the other's line. The licence's name never breaks. */
.fp-r-pcredit a { position: relative; color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.fp-r-pcredit a::after { content: ''; position: absolute; top: -30px; right: -4px; bottom: 0; left: -4px; }
.fp-r-pcredit a + a { white-space: nowrap; }
.fp-r-pcredit a + a::after { top: 0; bottom: -30px; }
.fp-r-title { margin: 6px 0 0; font-family: var(--font-display); font-stretch: 108%; font-weight: 800; font-size: 1.7rem; letter-spacing: -0.03em; line-height: 1.02; text-wrap: balance; }
.fp-r-photo + .fp-r-title { margin-top: 14px; }
.fp-r-meta { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 7px 0 0; font-size: 0.88rem; color: var(--ink-2); }
.fp-dot { color: var(--ink-3); }
.fp-r-sum { margin: 8px 0 0; font-size: 0.9rem; line-height: 1.5; color: var(--ink-3); text-wrap: pretty; }
.fp-r-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.fp-tag { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 11px; border: 1px solid var(--line-2); border-radius: var(--r-pill); color: var(--ink-2); font-size: 0.78rem; font-weight: 600; }
.fp-tag.is-accent { border-color: transparent; background: var(--accent-soft); color: var(--accent-text); }
.fp-tag i { font-size: 1rem; }
.fp-r-mac { display: grid; grid-template-columns: 1.15fr 1.15fr 1fr 1fr; margin-top: 14px; border: 1px solid var(--line); border-radius: 14px; }
.fp-r-mac > div { min-width: 0; padding: 10px 0 9px 12px; }
.fp-r-mac > div + div { border-left: 1px solid var(--line); }
.fp-r-mac b { display: block; font-family: var(--font-display); font-stretch: 106%; font-weight: 800; font-size: 1.22rem; letter-spacing: -0.02em; line-height: 1.05; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fp-r-mac span { display: block; margin-top: 3px; padding-right: 4px; font-size: 0.74rem; line-height: 1.2; color: var(--ink-3); overflow-wrap: anywhere; hyphens: manual; }
.fp-r-mac .is-p b { color: var(--accent-text); }
.fp-r-mac .is-s b { padding-top: 3px; font-size: 1.02rem; color: var(--ink-2); }
.fp-r-sized { display: flex; align-items: flex-start; gap: 9px; margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--accent-soft); font-size: 0.86rem; line-height: 1.45; color: var(--ink); }
.fp-r-sized i { flex: none; margin-top: 1px; font-size: 1.1rem; color: var(--accent-text); }
.fp-r-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 22px 0 2px; }
.fp-r-h h3 { margin: 0; font-size: 1.2rem; }
.fp-r-h span { font-size: 0.84rem; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fp-r-h span b { color: var(--accent-text); }
.fp-r-toggle { margin: 8px 0 4px; }
.fp-mseg { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line-2); border-radius: var(--r-pill); }
.fp-mseg button { position: relative; height: 38px; padding: 0 14px; border: 0; border-radius: var(--r-pill); background: none; color: var(--ink-2); font-family: var(--font-ui); font-size: 0.86rem; font-weight: 600; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.fp-mseg button::after { content: ""; position: absolute; inset: -4px 0; }
.fp-mseg button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.fp-ings, .fp-steps, .fp-sing, .fp-r-notes, .fp-sw-list { margin: 0; padding: 0; list-style: none; }
.fp-ing { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 6px 0; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.fp-ing-n { display: grid; gap: 1px; min-width: 0; }
.fp-ing-n b { font-size: 0.96rem; font-weight: 500; line-height: 1.3; }
.fp-ing-n small { font-size: 0.78rem; line-height: 1.3; color: var(--ink-3); }
.fp-ing.is-on .fp-ing-n b { color: var(--ink-3); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.fp-ing.is-on .fp-amt { color: var(--ink-3); }
.fp-ing.is-taste .fp-ing-n b { color: var(--ink-2); }
.fp-r-notes { display: grid; gap: 6px; margin-top: 12px; }
.fp-r-notes li, .fp-r-contains { display: flex; align-items: flex-start; gap: 8px; font-size: 0.86rem; line-height: 1.45; color: var(--ink-2); }
.fp-r-notes i, .fp-r-contains i { flex: none; margin-top: 1px; font-size: 1.05rem; color: var(--ink-3); }
.fp-r-contains { margin: 10px 0 0; }
.fp-steps li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.fp-steps li:last-child { border-bottom: 0; }
.fp-sn { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); font-size: 0.82rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.fp-steps p { margin: 3px 0 0; font-size: 0.96rem; line-height: 1.5; text-wrap: pretty; }
.fp-tpill { display: inline-flex; align-items: center; gap: 5px; height: 28px; margin-top: 8px; padding: 0 11px; border-radius: var(--r-pill); background: var(--bg-2); color: var(--ink-2); font-size: 0.8rem; font-weight: 600; }
:root[data-theme="dark"] .fp-tpill { background: var(--surface-2); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fp-tpill { background: var(--surface-2); } }
.fp-r-warn { margin: 10px 0 0; font-size: 0.88rem; line-height: 1.45; color: var(--ink-2); }
.fp-r-credits { margin: 16px 0 0; padding-top: 10px; border-top: 1px solid var(--line); font-size: 0.76rem; line-height: 1.5; color: var(--ink-3); }
.fp-r-credits p { margin: 0 0 4px; }
/* Inline links keep a 44 px tall hit area without pushing the lines apart. */
.fp-r-credits a { position: relative; color: inherit; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.fp-r-credits a::after { content: ''; position: absolute; inset: -15px -4px; }

/* The swap. */
.fp-sw-now { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 12px; margin-top: 14px; padding: 9px 12px 9px 9px; border: 1px solid var(--line-2); border-radius: 14px; }
.fp-tag-now { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: var(--r-pill); background: var(--bg-2); color: var(--ink-2); font-size: 0.76rem; font-weight: 700; }
:root[data-theme="dark"] .fp-tag-now { background: var(--surface-2); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fp-tag-now { background: var(--surface-2); } }
.fp-sheet .fp-chips { margin: 14px 0 0; }
.fp-sw-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; min-height: 84px; padding: 10px 0; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--ink); font-family: var(--font-ui); text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.fp-sw-list li:last-child .fp-sw-row { border-bottom: 0; }
.fp-sw-row:active { background: color-mix(in srgb, var(--ink) 5%, transparent); }

/* Pick your week: a tall sheet, the days on top and the two buttons under the thumb. */
html .fp-pick .sheet-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.fp-pick .sheet-top { flex: none; margin: 0; padding: 0 8px; }
.fp-pk { display: flex; flex: 1; flex-direction: column; min-height: 0; }
.fp-pk-head { flex: none; padding: 0 20px 12px; border-bottom: 1px solid var(--line); }
.fp-pk-head .fp-sh-title { font-size: 1.55rem; }
.fp-pk-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-top: 14px; }
.fp-pk-day { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; height: 62px; padding: 8px 0 0; border: 1.5px solid var(--line-2); border-radius: 14px; background: none; color: var(--ink-3); font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.fp-pk-day small { font-size: 0.72rem; font-weight: 600; line-height: 1.2; }
.fp-pk-day b { font-family: var(--font-display); font-stretch: 105%; font-size: 1.05rem; font-weight: 800; line-height: 1.1; color: var(--ink); }
.fp-pk-dots { display: flex; gap: 3px; margin-top: 4px; }
.fp-pk-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--line-2); }
.fp-pk-dots i.is-on { background: var(--accent); }
.fp-pk-day.is-cur { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-text); }
.fp-pk-body { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 20px 22px; overscroll-behavior: contain; }
.fp-pk-dayline { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 0 12px; }
.fp-pk-dayline b { font-size: 1rem; font-weight: 600; }
.fp-pk-dayline span { font-size: 0.82rem; color: var(--ink-3); }
.fp-pk-slot + .fp-pk-slot { margin-top: 18px; }
.fp-pk-slot-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 0 8px; }
.fp-pk-slot-h h3 { margin: 0; font-size: 1.05rem; }
.fp-pk-slot-h span { font-size: 0.8rem; color: var(--ink-3); }
.fp-pk-slot .fp-empty { margin: 8px 0 0; }
.fp-pk-foot { flex: none; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--surface); }
.fp-pk-foot.is-one { grid-template-columns: minmax(0, 1fr); }
.fp-pk-foot .btn { min-width: 0; height: 50px; padding: 0 16px; }
/* A long weekday in German or Spanish: the two buttons drop their icons to keep their words. */
@media (max-width: 420px) { .fp-pk-foot .btn i { display: none; } }
/* The option card: photo, name, protein, kcal and minutes at its foot. */
.fp-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fp-opt { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 0 0 10px; overflow: hidden; border: 1.5px solid var(--line-2); border-radius: 14px; background: var(--surface-2); color: inherit; font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.fp-opt:active { transform: scale(0.98); }
.fp-opt-pic { position: relative; display: block; width: 100%; aspect-ratio: 6 / 5; border-radius: 12px 12px 0 0; overflow: hidden; }
.fp-opt-pic .fp-pic { border-radius: 0; }
.fp-opt-best { position: absolute; z-index: 1; left: 6px; bottom: 6px; display: inline-flex; align-items: center; max-width: calc(100% - 12px); min-height: 22px; padding: 3px 8px; border-radius: 11px; background: rgba(0, 0, 0, 0.8); color: #fff; font-size: 0.72rem; font-weight: 600; line-height: 1.2; }
.fp-opt-check { position: absolute; z-index: 2; top: 6px; right: 6px; display: none; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); }
.fp-opt-check svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.fp-opt.is-on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.fp-opt.is-on .fp-opt-check { display: grid; }
.fp-opt-name { display: -webkit-box; overflow: hidden; margin: 8px 8px 6px; font-size: 0.84rem; font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.fp-opt-lo { display: flex; align-items: center; gap: 4px; margin: -2px 8px 6px; font-size: 0.72rem; line-height: 1.25; color: var(--accent-text); }
.fp-opt-p { margin: auto 8px 0; font-size: 0.8rem; font-weight: 700; line-height: 1.2; color: var(--accent-text); }
.fp-opt-k { margin: 1px 8px 0; font-size: 0.74rem; color: var(--ink-3); white-space: nowrap; }

/* ---- cook mode: the whole screen, one step at a time ---- */
html.in-cook .tabbar { display: none; }
html.in-cook, html.in-cook body { overflow: hidden; }
.fp-cook { position: fixed; inset: 0; z-index: 60; background: var(--bg); }
.fp-cook[hidden] { display: none; }
.fp-cook-in { display: flex; flex-direction: column; height: 100%; max-width: 640px; margin: 0 auto; padding-top: env(safe-area-inset-top); }
.fp-cook-top { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 10px; padding: 10px 14px 0; }
.fp-cook-title { min-width: 0; text-align: center; line-height: 1.25; }
.fp-cook-title b { display: block; font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.fp-cook-title span { display: block; overflow: hidden; font-size: 0.84rem; color: var(--ink-3); white-space: nowrap; text-overflow: ellipsis; }
.fp-prog { display: flex; gap: 4px; padding: 12px 18px 0; }
.fp-prog i { flex: 1; height: 4px; border-radius: 99px; background: var(--line-2); }
.fp-prog i.is-done { background: var(--ink-3); }
.fp-prog i.is-on { background: var(--accent); }
.fp-cook-other { display: flex; align-items: center; gap: 10px; width: calc(100% - 28px); min-height: 44px; margin: 10px 14px 0; padding: 0 14px; border: 1px solid var(--accent); border-radius: 12px; background: var(--accent-soft); color: var(--ink); font-family: var(--font-ui); font-size: 0.9rem; font-weight: 600; text-align: left; cursor: pointer; }
.fp-cook-other span { flex: 1; min-width: 0; }
.fp-cook-other b { font-variant-numeric: tabular-nums; }
.fp-cook-other i { flex: none; font-size: 1.1rem; color: var(--accent-text); }
.fp-cook-body { flex: 1; min-height: 0; padding: 26px 20px 18px; overflow-y: auto; overscroll-behavior: contain; }
.fp-step-text { margin: 0; font-family: var(--font-display); font-stretch: 100%; font-weight: 650; font-size: 1.72rem; letter-spacing: -0.022em; line-height: 1.2; text-wrap: pretty; }
.fp-step-text:focus { outline: none; }
.fp-step-text mark { background: none; color: var(--accent-text); }
.fp-timer { position: relative; display: flex; align-items: center; gap: 10px; margin-top: 24px; padding: 14px 14px 18px 18px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.fp-timer > div { flex: 1; min-width: 0; }
.fp-clock { display: block; font-family: var(--font-display); font-stretch: 112%; font-weight: 800; font-size: 3.1rem; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.fp-timer small { display: block; margin-top: 6px; font-size: 0.84rem; color: var(--ink-3); }
.fp-timer.is-done .fp-clock { color: var(--accent-text); }
.fp-timer.is-done small { color: var(--ink); font-weight: 600; }
.fp-plus { flex: none; height: 44px; padding: 0 14px; border: 1.5px solid var(--line-2); border-radius: var(--r-pill); background: none; color: var(--ink); font-family: var(--font-ui); font-size: 0.86rem; font-weight: 600; white-space: nowrap; cursor: pointer; }
.fp-play { display: grid; place-items: center; flex: none; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%; background: var(--accent); color: var(--accent-ink); cursor: pointer; }
.fp-play svg { width: 26px; height: 26px; fill: currentColor; }
.fp-play:active { background: var(--accent-strong); }
.fp-tbar { position: absolute; left: 0; bottom: 0; height: 4px; background: var(--accent); transition: width 250ms linear; }
.fp-for { margin: 26px 0 2px; font-size: 1.15rem; }
.fp-sing li { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 46px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 1.04rem; }
.fp-sing b { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fp-sing b.is-taste { font-weight: 500; color: var(--ink-3); }
.fp-sing li.is-none { color: var(--ink-3); }
.fp-cook-credits { margin: 16px 0 0; font-size: 0.78rem; line-height: 1.55; color: var(--ink-3); }
.fp-cook-foot { display: flex; gap: 12px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--bg); }
.fp-cook-foot .btn { flex: 1; height: 56px; font-size: 1.05rem; }

/* Computers: the column under the page head; sheets get a plain close button. */
@media (min-width: 1081px) {
    :root { --fp-sx: 24px; }
    .fp-sheet .sheet-card { width: min(560px, 100%); padding-top: 0; }
    .fp-sheet .sheet-top { position: sticky; top: 0; z-index: 3; display: flex; justify-content: flex-end; height: 52px; margin: 0 -12px 0 0; background: var(--surface); }
    .fp-sheet .sheet-handle { display: none; }
    .fp-sheet .sheet-x { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink-2); font-size: 1.3rem; cursor: pointer; }
    .fp-sheet .sheet-x:hover { background: var(--bg-2); color: var(--ink); }
    html .fp-pick .sheet-card { height: min(860px, 92vh); max-height: 92vh; }
    .fp-pick .sheet-top { position: static; margin: 0; padding: 4px 8px 0; }
    .fp-cook-top { padding-top: 18px; }
}
@media (max-width: 1080px) {
    html .fp-pick .sheet-card { height: calc(100dvh - env(safe-area-inset-top) - 10px); max-height: calc(100dvh - env(safe-area-inset-top) - 10px); }
}
@media (max-width: 380px) {
    .fp-wk-sum b { font-size: 1rem; }
    .fp-wk-avg span { font-size: 0.84rem; }
    .fp-stat b { font-size: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
    .fp-opt:active { transform: none; }
    .fp-tbar { transition: none; }
}

/* ==========================================================================
   Credits (credits.html, credits.js): where the recipes, food photos and
   nutrition numbers come from. Plain cards like the legal pages, with one
   row per adapted recipe and per photo.
   ========================================================================== */
.cr .cr-card { margin-top: 24px; padding: 28px; }
.cr-card h2 { margin: 0; font-size: 1.25rem; }
.cr-card p { margin: 10px 0 0; font-size: 0.98rem; line-height: 1.65; color: var(--ink-2); text-wrap: pretty; }
.cr-card a, .cr-cites a { color: var(--accent-text); font-weight: 600; }
.cr-facts { margin: 14px 0 0; border-top: 1px solid var(--line); }
.cr-facts > div { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 16px; min-height: 48px; border-bottom: 1px solid var(--line); }
.cr-facts dt { font-size: 0.9rem; color: var(--ink-3); }
.cr-facts dd { margin: 0; }
.cr-facts a, .cr-links a { display: inline-flex; align-items: center; min-height: 44px; }
.cr-links { display: flex; flex-wrap: wrap; gap: 0 20px; margin: 2px 0 0; padding: 0; list-style: none; }
.cr-card .cr-sub { margin: 26px 0 0; font-size: 1.02rem; }
.cr-rows { margin: 8px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.cr-row { display: grid; gap: 3px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.cr-row b { font-weight: 600; color: var(--ink); }
.cr-note { font-size: 0.88rem; line-height: 1.55; color: var(--ink-2); overflow-wrap: anywhere; }
/* Inline links keep a 44 px tall hit area without pushing the lines apart. */
.cr-note a { position: relative; }
.cr-note a::after { content: ''; position: absolute; inset: -12px -4px; }
.cr-dot { margin: 0 6px; color: var(--ink-3); }
.cr-empty { padding: 12px 0; font-size: 0.92rem; color: var(--ink-3); }
.cr-cites { margin: 12px 0 0; padding-left: 18px; font-size: 0.92rem; line-height: 1.6; color: var(--ink-2); }
.cr-cites li + li { margin-top: 10px; }
.cr-cites li[hidden] { display: none; }
.cr-card p.cr-fine, .cr-fine { font-size: 0.82rem; color: var(--ink-3); }
.cr-end { margin: 20px 4px 0; }
.cr-status { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 20px 0 0; padding: 14px 16px; border: 1px solid var(--line-2); border-radius: var(--r-card); color: var(--ink); }
.cr-status[hidden] { display: none; }
@media (max-width: 600px) {
    .cr .cr-card { margin-top: 18px; padding: 20px; }
}