/* Levra design system, theme "Fern": leaf green for you, clay for friends, on
   cream (light) or near-black (dark). Dark follows the OS; data-theme="light"
   or "dark" on <html> forces one (Settings > Appearance). Flat: the log card is
   the only thing with a shadow. Phone layouts below 1024px (bottom tab bar),
   two-column desktop layouts from 1024px (top bar). Never hard-code a colour
   below this block: add a token here, with a dark value in both dark blocks. */

:root {
    color-scheme: light;
    --bg: #F5F1EA;
    --surface: #FFFFFF;
    --surface-2: #FBF8F3;
    --field: #F5F1EA;
    --ink: #1C1915;
    --ink-2: #4F483F;
    --muted: #6B6358;
    --muted-2: #8A8175;
    --line: #E7E0D5;
    --line-2: #EFE8DD;
    --chip-border: #E0D8CB;
    --dashed: #D6CCBD;
    --track: #F0EAE0;
    --disabled: #C9BFB0;

    --you: #3FA66B;             /* you: leaf green */
    --on-you: #1C1915;          /* text on --you */
    --you-faint: rgba(28, 25, 21, 0.2);
    --you-rule: rgba(28, 25, 21, 0.25);
    --you-pill-text: #F5F1EA;   /* text on an --on-you pill sitting on --you */
    --you-tint: #DDF0E3;
    --you-tint-hover: #CBE8D4;
    --you-ink: #1D6B40;         /* links, hover, "+ Add" */
    --you-hover: #36945E;       /* --you backgrounds on hover */
    --you-pulse: rgba(63, 166, 107, 0.45);

    --friend: #D9895B;          /* friends: clay */
    --on-friend: #1C1915;
    --friend-tint: #F6E3D6;
    --friend-ink: #8A4520;
    --friend-hover: #CB7A4C;

    --primary: #1C1915;         /* main buttons, raised + tab */
    --on-primary: #F5F1EA;
    --primary-hover: #34302A;
    --tab-bg: #FFFFFF;

    --bar-past: #CFE6D6;
    --bar-hover: #B5D9C0;
    --neutral-tint: #F3E6D3;
    --neutral-ink: #7A4A1E;
    --danger: #B3372A;
    --on-danger: #FFFFFF;
    --danger-hover: #962B20;
    --danger-tint: #FBE1DC;
    --danger-ink: #6E1D14;
    --ok: #1D6B40;
    --warn: #9A6410;
    --scrim: rgba(28, 25, 21, 0.35);
    --bg-clear: rgba(245, 241, 234, 0);
    --shadow-card: 0 1px 0 #E7E0D5, 0 10px 24px rgba(60, 40, 20, 0.06);
    --shadow-pop: 0 12px 32px rgba(60, 40, 20, 0.16);
    --shadow-toggle: 0 1px 3px rgba(0, 0, 0, 0.08);

    --font-head: 'Bricolage Grotesque', 'Instrument Sans', system-ui, sans-serif;
    --font-body: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --tabbar-h: 88px;
    --gutter: 20px;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --bg: #16130F; --surface: #221E19; --surface-2: #1C1814; --field: #2E2923;
        --ink: #F3EEE6; --ink-2: #CFC6B8; --muted: #A39987; --muted-2: #8C8272;
        --line: #342E27; --line-2: #2C2721; --chip-border: #3A332B; --dashed: #4A4238;
        --track: #2E2923; --disabled: #4A4238;
        --you: #5CCB8A; --on-you: #16130F; --you-faint: rgba(22, 19, 15, 0.22); --you-rule: rgba(22, 19, 15, 0.3);
        --you-pill-text: #5CCB8A; --you-tint: #1E3326; --you-tint-hover: #25402F; --you-ink: #9BE6B9;
        --you-hover: #4DB87A; --you-pulse: rgba(92, 203, 138, 0.45);
        --friend: #E39A6E; --on-friend: #16130F; --friend-tint: #3D251B; --friend-ink: #F2B48E; --friend-hover: #D98A5C;
        --primary: #5CCB8A; --on-primary: #16130F; --primary-hover: #4DB87A; --tab-bg: #1C1814;
        --bar-past: #2B4535; --bar-hover: #37573F;
        --neutral-tint: #3A2E22; --neutral-ink: #E0B98F;
        --danger: #E5705F; --on-danger: #16130F; --danger-hover: #EE8676; --danger-tint: #3D1F1A; --danger-ink: #F4B3A8;
        --ok: #9BE6B9; --warn: #E0B062;
        --scrim: rgba(0, 0, 0, 0.55); --bg-clear: rgba(22, 19, 15, 0);
        --shadow-card: none; --shadow-pop: 0 12px 32px rgba(0, 0, 0, 0.5); --shadow-toggle: 0 1px 3px rgba(0, 0, 0, 0.4);
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #16130F; --surface: #221E19; --surface-2: #1C1814; --field: #2E2923;
    --ink: #F3EEE6; --ink-2: #CFC6B8; --muted: #A39987; --muted-2: #8C8272;
    --line: #342E27; --line-2: #2C2721; --chip-border: #3A332B; --dashed: #4A4238;
    --track: #2E2923; --disabled: #4A4238;
    --you: #5CCB8A; --on-you: #16130F; --you-faint: rgba(22, 19, 15, 0.22); --you-rule: rgba(22, 19, 15, 0.3);
    --you-pill-text: #5CCB8A; --you-tint: #1E3326; --you-tint-hover: #25402F; --you-ink: #9BE6B9;
    --you-hover: #4DB87A; --you-pulse: rgba(92, 203, 138, 0.45);
    --friend: #E39A6E; --on-friend: #16130F; --friend-tint: #3D251B; --friend-ink: #F2B48E; --friend-hover: #D98A5C;
    --primary: #5CCB8A; --on-primary: #16130F; --primary-hover: #4DB87A; --tab-bg: #1C1814;
    --bar-past: #2B4535; --bar-hover: #37573F;
    --neutral-tint: #3A2E22; --neutral-ink: #E0B98F;
    --danger: #E5705F; --on-danger: #16130F; --danger-hover: #EE8676; --danger-tint: #3D1F1A; --danger-ink: #F4B3A8;
    --ok: #9BE6B9; --warn: #E0B062;
    --scrim: rgba(0, 0, 0, 0.55); --bg-clear: rgba(22, 19, 15, 0);
    --shadow-card: none; --shadow-pop: 0 12px 32px rgba(0, 0, 0, 0.5); --shadow-toggle: 0 1px 3px rgba(0, 0, 0, 0.4);
}

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

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

body {
    margin: 0;
    overflow-x: clip;
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.5;
    background: var(--bg);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
}

a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
a:hover { color: var(--you-ink); }

h1, h2, h3 { margin: 0; font-family: var(--font-head); font-weight: 700; letter-spacing: -0.01em; }
h1 { font-size: 30px; line-height: 1.05; letter-spacing: -0.02em; }
h2 { font-size: 19px; line-height: 1.2; }
h3 { font-size: 16px; }
p { margin: 0 0 12px; }
p:last-child { margin-bottom: 0; }

code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9em;
    background: var(--field);
    padding: 1px 6px;
    border-radius: 6px;
}
pre {
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 12px;
    overflow-x: auto;
}

[hidden] { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.num { font-variant-numeric: tabular-nums; }
.text-ok { color: var(--ok); }
.text-error { color: var(--danger); }
.sr-only {
    position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important;
    padding: 0 !important; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0 !important;
}
@media (max-width: 1023.98px) { .desktop-only { display: none !important; } }

:focus-visible { outline: 2px solid var(--you); outline-offset: 2px; }

/* --- Top bar (desktop) ----------------------------------------------- */
.topbar { display: none; }
.brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 19px;
    color: var(--ink);
    text-decoration: none;
    letter-spacing: -0.01em;
}
.brand:hover { color: var(--ink); }
.brand-mark {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--you);
    display: inline-block;
    flex: none;
}
.nav { display: flex; gap: 4px; }
.nav a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 99px;
    color: var(--ink);
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    transition: background 0.15s ease;
}
.nav a:hover { background: var(--line-2); color: var(--ink); }
.nav a.active { background: var(--ink); color: var(--bg); }
.nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--you);
    color: var(--on-you);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
}
.topbar-end { margin-left: auto; display: flex; align-items: center; gap: 14px; }

/* Account menu under the avatar */
.account-menu { position: relative; }
.account-menu > summary {
    list-style: none;
    display: flex;
    border-radius: 50%;
    cursor: pointer;
}
.account-menu > summary::-webkit-details-marker { display: none; }
.menu {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 60;
    min-width: 220px;
    padding: 6px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--shadow-pop);
    display: grid;
}
.menu-head { padding: 8px 12px 10px; border-bottom: 1px solid var(--line-2); margin-bottom: 4px; min-width: 0; }
.menu-head strong { display: block; font-weight: 600; }
.menu-head span { display: block; color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu a {
    padding: 10px 12px;
    border-radius: 12px;
    color: var(--ink);
    font-weight: 500;
    text-decoration: none;
}
.menu a:hover { background: var(--field); color: var(--ink); }

/* --- Tab bar (phone) ---------------------------------------------------- */
.tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    height: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
    padding: 12px 0 env(safe-area-inset-bottom, 0px);
    background: var(--tab-bg);
    border-top: 1px solid var(--line);
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: start;
}
.tab {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: var(--muted-2);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
.tab:hover { color: var(--ink); }
.tab.active { color: var(--ink); }
.tab svg { width: 22px; height: 22px; display: block; }
.tab .icon-fill { fill: none; }
.tab.active .icon-fill { fill: currentColor; }
.tab-dot {
    position: absolute;
    top: -3px;
    left: calc(50% + 7px);
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    border: 2px solid var(--tab-bg);
    background: var(--you);
    color: var(--on-you);
    font-size: 10px;
    font-weight: 700;
    line-height: 12px;
    text-align: center;
}
.tab-log { display: flex; flex-direction: column; align-items: center; gap: 4px; text-decoration: none; }
.tab-log-btn {
    width: 58px;
    height: 58px;
    margin-top: -28px;
    border-radius: 50%;
    border: 4px solid var(--bg);
    background: var(--primary);
    color: var(--on-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease;
}
.tab-log-btn svg { width: 26px; height: 26px; }
.tab-log:active .tab-log-btn { transform: scale(0.97); }
.tab-log.active .tab-log-btn { background: var(--you); color: var(--on-you); }
/* A recording is running: green with a pulsing ring, and the time underneath. */
.tab-log.is-recording .tab-log-btn { background: var(--you); color: var(--on-you); animation: rec-ring 1.6s ease-out infinite; }
.tab-log-time { color: var(--you-ink); font-size: 11px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
@keyframes rec-ring {
    0% { box-shadow: 0 0 0 0 var(--you-pulse); }
    100% { box-shadow: 0 0 0 12px transparent; }
}
@keyframes rec-blink { 50% { opacity: 0.3; } }

/* --- Page layout ------------------------------------------------------- */
.page {
    max-width: 560px;
    margin: 0 auto;
    padding: 20px var(--gutter) 40px;
}
body.has-tabs .page { padding-bottom: calc(var(--tabbar-h) + 32px + env(safe-area-inset-bottom, 0px)); }
.page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.page-sub { color: var(--muted); font-size: 14px; font-weight: 500; margin: 0 0 6px; }
.crumb { margin: 0 0 12px; font-size: 15px; font-weight: 600; }
.crumb a { color: var(--ink); text-decoration: none; }
.crumb a:hover { color: var(--you-ink); }
.section { margin-top: 28px; }
.section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.section-head h2 { font-size: 19px; }
.link-quiet { color: var(--muted); font-size: 14px; font-weight: 600; text-decoration: none; }
.link-quiet:hover { color: var(--you-ink); }
.stack { display: grid; gap: 16px; }

/* --- Cards ------------------------------------------------------------- */
.card {
    background: var(--surface);
    border-radius: 22px;
    padding: 18px;
    margin-bottom: 16px;
}
.card-compact { padding: 14px 16px; }
.card-narrow { max-width: 560px; }
.card-flush { padding: 0; overflow: hidden; }
.card-title {
    display: block;
    font-family: var(--font-head);
    font-size: 17px;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 12px;
}
.card-lead { margin-bottom: 18px; }
.card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.card-head .card-title { margin: 0; }
.card-meta { color: var(--muted); font-size: 13px; font-weight: 500; }
.rows > * + * { border-top: 1px solid var(--line-2); }

/* --- Tabs -------------------------------------------------------------- */
.tabs {
    display: flex;
    gap: 20px;
    border-bottom: 1px solid var(--chip-border);
    margin-bottom: 16px;
}
.tabs a {
    padding: 0 0 10px;
    color: var(--muted);
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    border-bottom: 2.5px solid transparent;
    margin-bottom: -1px;
}
.tabs a:hover { color: var(--ink); }
.tabs a.active { color: var(--ink); border-bottom-color: var(--ink); }

/* --- Forms ------------------------------------------------------------- */
label { font-weight: 600; font-size: 14px; }
.field { margin-bottom: 18px; }
.field label { display: block; margin-bottom: 6px; }
.field-help { color: var(--muted); font-size: 13px; margin: 6px 0 0; }
.field-help:empty { display: none; }
.field-inline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.field-inline label { margin: 0; }
.field-inline .input { width: auto; }

.input, .select, .textarea,
input[type="text"], input[type="search"], input[type="url"], input[type="password"], input[type="date"],
select, textarea {
    width: 100%;
    font: inherit;
    color: var(--ink);
    background: var(--surface);
    border: 1.5px solid var(--chip-border);
    border-radius: 14px;
    padding: 9px 14px;
    min-height: 44px;
    transition: border-color 0.15s ease;
}
input::placeholder, textarea::placeholder { color: var(--muted-2); opacity: 1; }
input:hover, select:hover, textarea:hover { border-color: var(--dashed); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--you); }
textarea { resize: vertical; line-height: 1.5; }
select { cursor: pointer; }
input[type="checkbox"] { accent-color: var(--you); width: 18px; height: 18px; margin: 0; cursor: pointer; }
.date-input { width: 190px; }
.input-short { width: 170px; }

/* Buttons that stand in for a date input or a select (app.js). */
.date-trigger, .select-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
}
.date-trigger::after, .select-trigger::after {
    content: "";
    flex: none;
    width: 14px;
    height: 14px;
    background: currentColor;
    opacity: 0.7;
    -webkit-mask: var(--icon) center / contain no-repeat;
    mask: var(--icon) center / contain no-repeat;
}
.date-trigger { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6'%3E%3Crect x='2' y='3' width='12' height='11' rx='2.5'/%3E%3Cpath d='M2 7h12M5 1.5v3M11 1.5v3'/%3E%3C/svg%3E"); }
.select-trigger, .date-pill.date-trigger { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); }
.input.date-trigger, .select.select-trigger { color: var(--ink); background: var(--surface); }
.date-trigger:focus-visible, .select-trigger:focus-visible,
.date-trigger[aria-expanded="true"], .select-trigger[aria-expanded="true"] { outline: none; border-color: var(--you); }

/* Floating panels: calendar, suggestions, select list. */
.popover {
    position: absolute;
    z-index: 70;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--shadow-pop);
}
.suggest, .select-list {
    list-style: none;
    margin: 0;
    padding: 6px;
    max-height: 280px;
    overflow-y: auto;
    scrollbar-width: thin;
}
.suggest-item {
    padding: 9px 12px;
    border-radius: 12px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.suggest-item:hover, .suggest-item.is-active, .select-list .suggest-item:focus { background: var(--field); outline: none; }
.select-list .suggest-item.is-selected { color: var(--you-ink); font-weight: 700; }

.cal { padding: 14px; width: 296px; max-width: calc(100vw - 16px); }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cal-title { font-family: var(--font-head); font-weight: 700; font-size: 16px; }
.cal-nav {
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--field);
    color: var(--ink);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
}
.cal-nav:hover, .cal-nav:focus-visible { background: var(--line); color: var(--ink); outline: none; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.cal-dow { text-align: center; font-size: 12px; font-weight: 600; color: var(--muted-2); padding: 4px 0; }
.cal-day {
    aspect-ratio: 1;
    min-width: 0;
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}
.cal-day:hover { background: var(--field); color: var(--ink); }
.cal-day:focus-visible { outline: 2px solid var(--you); outline-offset: -2px; }
.cal-day.is-outside { color: var(--disabled); }
.cal-day.is-today { box-shadow: inset 0 0 0 1.5px var(--you); font-weight: 700; }
.cal-day.is-selected { background: var(--ink); color: var(--bg); font-weight: 700; }
.cal-foot { display: flex; justify-content: flex-end; margin-top: 8px; border-top: 1px solid var(--line-2); padding-top: 8px; }

/* Content swapped in by the range filters (app.js) dims while it loads. */
main.is-loading > :not(.page-head):not(.tabs):not(.filters):not(.progress-head) { opacity: 0.5; transition: opacity 0.15s; }
.input-filter { width: 320px; max-width: 100%; flex: 0 1 320px; }
.input-group { display: flex; align-items: center; gap: 8px; }
.input-group .input { flex: 1; min-width: 0; }

/* --- Buttons ----------------------------------------------------------- */
.btn, button, input[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font: inherit;
    font-weight: 600;
    font-size: 15px;
    line-height: 1;
    padding: 0 20px;
    height: 44px;
    border-radius: 99px;
    border: 1.5px solid transparent;
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}
.btn:hover, button:hover { background: var(--line-2); color: var(--ink); }
.btn:active, button:active { transform: scale(0.97); }
.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-primary:hover { background: var(--primary-hover); color: var(--on-primary); }
.btn-you { background: var(--you); color: var(--on-you); font-weight: 700; }
.btn-you:hover { background: var(--you-hover); color: var(--on-you); }
.btn-friend { background: var(--friend); color: var(--on-friend); font-weight: 700; }
.btn-friend:hover { background: var(--friend-hover); color: var(--on-friend); }
.btn-ghost { background: transparent; border-color: var(--dashed); color: var(--ink); }
.btn-ghost:hover { background: var(--surface); border-color: var(--dashed); }
.btn-white { background: var(--surface); }
.btn-text {
    background: transparent;
    color: var(--muted);
    padding: 0 6px;
    height: 32px;
    font-size: 14px;
    font-weight: 500;
}
.btn-text:hover { background: transparent; color: var(--ink); text-decoration: underline; }
.btn-sm { height: 36px; padding: 0 14px; font-size: 14px; }
.btn-lg { height: 54px; padding: 0 26px; font-size: 16px; }
.btn-xl { height: 56px; padding: 0 32px; font-size: 17px; }
.btn-block { width: 100%; }
.btn-danger { background: var(--danger); color: var(--on-danger); }
.btn-danger:hover { background: var(--danger-hover); color: var(--on-danger); }
.rec-link-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--on-you); }
.btn-log.is-recording { font-variant-numeric: tabular-nums; }
.btn-log.is-recording .rec-link-dot { animation: rec-blink 1.4s ease-in-out infinite; }
.btn:disabled, button:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

.toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 16px;
}
.toolbar-end { justify-content: flex-end; }
.toolbar-split { justify-content: space-between; margin: 0 0 12px; }
.toolbar-group { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.toolbar-split > .toolbar-group:first-child { flex: 1 1 auto; }

/* --- Alerts ------------------------------------------------------------ */
.alert {
    position: relative;
    padding: 12px 16px 12px 20px;
    margin: 0 0 16px;
    background: var(--surface);
    border-radius: 16px;
    font-size: 15px;
}
.alert::before {
    content: "";
    position: absolute;
    left: 8px; top: 10px; bottom: 10px;
    width: 4px;
    border-radius: 2px;
    background: var(--muted-2);
}
.alert.ok::before { background: var(--ok); }
.alert.info::before { background: var(--friend); }
.alert.warn::before { background: var(--you); }
.alert.error { background: var(--danger-tint); color: var(--danger-ink); }
.alert.error::before { background: var(--danger); }
.alert a { color: inherit; font-weight: 600; }

.hint { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.hint summary { cursor: pointer; color: var(--muted); font-weight: 600; }
.hint summary:hover { color: var(--ink); }
.hint ul { margin: 8px 0 0; padding-left: 20px; }

.empty {
    text-align: center;
    padding: 40px 16px;
    color: var(--muted);
}
.empty h1 { color: var(--ink); margin-bottom: 10px; }
.empty p { margin-bottom: 16px; }
.empty .alert { text-align: left; max-width: 480px; margin: 0 auto 16px; }

/* --- Settings: browser setup panel ------------------------------------- */
.setup-heading { font-size: 15px; margin: 14px 0 4px; }
.setup-os { margin: 8px 0; }
.setup-os summary { cursor: pointer; font-weight: 600; font-size: 14px; color: var(--muted); }
.setup-os summary:hover { color: var(--ink); }
.setup-os pre { margin: 8px 0 0; font-size: 13px; }
#browser-setup code { white-space: nowrap; }

/* --- Chips and badges -------------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: auto;
    background: var(--surface-2);
    border: 1.5px solid var(--chip-border);
    color: var(--ink);
    border-radius: 99px;
    padding: 8px 14px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
}
button.chip:hover { background: var(--surface); border-color: var(--dashed); }
.chip-quiet { background: transparent; border: 0; padding: 0; color: var(--muted); font-weight: 500; }
.badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 99px;
    background: var(--you);
    color: var(--on-you);
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    vertical-align: 1px;
}
.pill-count { padding: 8px 14px; border-radius: 99px; background: var(--field); font-size: 14px; font-weight: 600; }

/* --- Weight unit toggle (segmented) ------------------------------------- */
.unit-toggle, .theme-toggle {
    display: inline-flex;
    background: var(--field);
    border-radius: 99px;
    padding: 3px;
    gap: 0;
}
.unit-btn, .theme-btn {
    height: auto;
    border: none;
    background: transparent;
    color: var(--muted);
    border-radius: 99px;
    padding: 8px 14px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.1;
    cursor: pointer;
}
.unit-btn:hover, .theme-btn:hover { background: transparent; color: var(--ink); }
.unit-btn.is-active, .theme-btn.is-active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-toggle); }

/* --- Tables ------------------------------------------------------------ */
.table-wrap { overflow-x: auto; margin-bottom: 12px; }
.card > .table-wrap:last-child { margin-bottom: 0; }
.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    font-variant-numeric: tabular-nums;
}
.table th, .table td {
    padding: 11px 14px;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--line-2);
    white-space: nowrap;
}
.table th {
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
    background: var(--surface);
    position: sticky;
    top: 0;
}
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover td { background: var(--surface-2); }
.table tbody tr.group-start td { border-top: 1px solid var(--line); }
.table tbody tr.group-start:first-child td { border-top: none; }
.table th.num, .table td.num { text-align: right; }
.table .col-actions { width: 1%; text-align: center; }
.cell-link { color: var(--ink); font-weight: 600; text-decoration: none; }
.day-table .cell-link, .day-table strong { display: inline-block; }
.day-table .cell-link::first-letter, .day-table strong::first-letter { text-transform: uppercase; }
.cell-link:hover { color: var(--you-ink); text-decoration: underline; }
th.sortable-th { cursor: pointer; user-select: none; }
th.sortable-th:hover { color: var(--ink); }
th.sort-asc::after { content: " \2191"; }
th.sort-desc::after { content: " \2193"; }

/* Inputs living inside table cells */
.table input[type="text"] {
    min-height: 36px;
    padding: 6px 10px;
    font-size: 15px;
    border-radius: 10px;
    min-width: 96px;
}
.table input.narrow { min-width: 56px; width: 64px; }
.table td.exercise-cell { min-width: 200px; }
.table-editing input[type="text"] { background: transparent; border-color: transparent; }
.table-editing input[type="text"]:hover { border-color: var(--chip-border); }
.table-editing input[type="text"]:focus { background: var(--surface); border-color: var(--you); }

.review-section { margin-top: 18px; }
.table-empty { margin: 6px 0 0; }

/* --- Session lists ----------------------------------------------------- */
.session-list { display: grid; gap: 14px; }
.session-card {
    background: var(--surface);
    border-radius: 24px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}
.session-date { font-size: 15px; font-family: var(--font-body); font-weight: 600; color: var(--muted); }
.session-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.session-rows li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    font-weight: 500;
    min-width: 0;
}
.session-exercise { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
a.session-exercise:hover { color: var(--you-ink); }
.session-detail { color: var(--ink-2); white-space: nowrap; }
.session-weight .session-exercise { color: var(--muted); }

/* --- Range filter pills ----------------------------------------------- */
.filters { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin: 0 0 16px; }
.segmented { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.segmented a {
    padding: 7px 12px;
    border-radius: 99px;
    background: var(--surface);
    color: var(--ink);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition: background 0.15s ease;
}
.segmented a:hover { background: var(--line-2); color: var(--ink); }
.segmented a.active { background: var(--ink); color: var(--bg); }
.segmented-quiet a { background: transparent; padding: 4px 8px; color: var(--muted); font-weight: 500; font-size: 13px; }
.segmented-quiet a.active { background: transparent; color: var(--ink); font-weight: 700; }
.segmented-quiet a:hover { background: transparent; color: var(--ink); }
.range-long { display: none; }

/* --- Group headings (review and edit screens) --------------------------- */
.group-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

/* --- Sessions: one card per day, under month headings -------------------- */
.session-search { display: flex; align-items: center; gap: 12px; margin: 0 0 20px; }
.session-search .input { flex: 1 1 auto; max-width: 420px; }
.session-search .muted { white-space: nowrap; }
.month { margin-bottom: 28px; }
.month-head { font-size: 19px; margin: 0 0 12px; display: flex; align-items: baseline; gap: 10px; }
.month-head span { color: var(--muted); font-family: var(--font-body); font-size: 14px; font-weight: 500; }
.tile-grid { display: grid; gap: 14px; }
.session-tile {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    background: var(--surface);
    border-radius: 24px;
    color: var(--ink);
    text-decoration: none;
    min-width: 0;
    transition: background 0.15s ease, transform 0.15s ease;
}
.session-tile:hover { background: var(--surface-2); color: var(--ink); }
.session-tile:active { transform: scale(0.99); }
.session-tile:focus-visible { outline: 2px solid var(--you); outline-offset: 2px; }
.tile-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line-2);
}
.tile-title { font-family: var(--font-head); font-size: 17px; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile-date { color: var(--muted); font-size: 14px; font-weight: 500; white-space: nowrap; }
.tile-body { display: flex; gap: 16px; align-items: center; min-width: 0; }
.tile-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; flex: 1; min-width: 0; }
.tile-lines li { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; font-weight: 500; min-width: 0; }
.tile-name { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.tile-ex { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile-name .badge { flex: none; }
.tile-detail { color: var(--ink-2); white-space: nowrap; }
.tile-lines .tile-more { color: var(--muted); font-size: 14px; }
.empty-note { text-align: center; padding: 24px 0; }

/* A day's picture: a photo, or its muscle icon (lit muscles in --you, per the handoff) */
.session-visual {
    --visual-size: 76px;
    flex: none;
    width: var(--visual-size);
    height: var(--visual-size);
    border-radius: 18px;
    background: var(--field);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--you);
    --mi-base: var(--ink);
    --mi-base-opacity: 0.1;
}
.session-visual.is-photo { object-fit: cover; background: var(--field); }

/* Day page: the day's picture and title */
.day-identity { display: flex; align-items: center; gap: 14px; min-width: 0; }
.day-identity .session-visual { border-radius: 16px; }
.day-name { font-size: 22px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Day edit screen: the picture beside the title field */
.edit-identity { display: flex; align-items: center; gap: 14px; padding: 16px; margin: 0; }
.edit-title { flex: 1; min-width: 0; }
.edit-title .words-label { margin-bottom: 6px; }

/* --- Stat tiles -------------------------------------------------------- */
.stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
.stat-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stat {
    background: var(--surface);
    border-radius: 20px;
    padding: 14px 16px;
    min-width: 0;
}
.stat-label { color: var(--muted); font-size: 13px; font-weight: 500; }
.stat-value {
    font-family: var(--font-head);
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.stat-value small, .stat-unit { font-size: 18px; font-weight: 600; letter-spacing: 0; }
.stat-grid-3 .stat { border-radius: 18px; padding: 12px 14px; }
.stat-grid-3 .stat-label { font-size: 12px; }
.stat-grid-3 .stat-value { font-size: 26px; font-weight: 700; }
.stat-grid-3 .stat-value small { font-size: 13px; }
.stat-delta { color: var(--muted); font-size: 13px; margin-top: 2px; }
.stat-caption { color: var(--muted); font-size: 13px; font-weight: 500; margin: -8px 0 16px; }

/* --- Week: dots (Log, profile), hero (Home), strip (Progress) --------- */
.week-dots { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; text-align: center; }
.week-dot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}
.week-dot .dot { width: 34px; height: 34px; border-radius: 50%; background: var(--track); display: block; }
.week-dot.logged .dot { background: var(--you); }
.week-dot.today { color: var(--ink); }
.week-dot.today:not(.logged) .dot { background: transparent; border: 2px dashed var(--you); }
a.week-dot:hover .dot { background: var(--you-hover); }

.week-hero {
    background: var(--you);
    color: var(--on-you);
    border-radius: 26px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.week-hero-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.week-hero-label { display: block; font-size: 14px; font-weight: 600; }
.week-hero-num { display: block; font-family: var(--font-head); font-size: 44px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; }
.week-hero-num small { font-size: 22px; font-weight: 600; letter-spacing: 0; }
.streak-pill { padding: 7px 12px; border-radius: 99px; background: var(--on-you); color: var(--you-pill-text); font-size: 13px; font-weight: 600; white-space: nowrap; }
.week-bars { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; text-align: center; }
.week-bar { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 700; color: var(--on-you); text-decoration: none; }
.week-bar > span:first-child { height: 8px; border-radius: 4px; background: var(--you-faint); }
.week-bar.logged > span:first-child { background: var(--on-you); }
.week-bar-letter { display: none; }

.week-nav { display: flex; align-items: center; gap: 6px; }
.week-nav .card-title { margin: 0; }
.week-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--field);
    color: var(--ink);
    font-size: 1.3rem;
    line-height: 1;
    text-decoration: none;
}
a.week-arrow:hover { background: var(--line); color: var(--ink); }
.week-arrow.is-disabled { color: var(--disabled); }
.week-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.week-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 0;
    border-radius: 16px;
    background: var(--track);
    color: var(--muted);
    text-decoration: none;
    min-width: 0;
}
.week-letter { font-size: 12px; font-weight: 600; }
.week-num { font-family: var(--font-head); font-size: 18px; font-weight: 700; color: var(--ink); line-height: 1; }
.week-day.logged { background: var(--you); color: var(--on-you); }
a.week-day.logged:hover { background: var(--you-hover); color: var(--on-you); }
.week-day.today { box-shadow: inset 0 0 0 2px var(--ink); }
.week-day.today:not(.logged) { background: transparent; box-shadow: none; outline: 2px dashed var(--you); outline-offset: -2px; }
.week-day.future { opacity: 0.45; }
.week-stats {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    max-width: 100%;
    padding: 0 2px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
}
.week-stats span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.week-count strong { color: var(--ink); }
.week-jump { font-weight: 600; }

/* --- Log box (Home on desktop, Log on a phone) ------------------------- */
.log-card {
    background: var(--surface);
    border-radius: 26px;
    padding: 20px;
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin: 0;
}
.log-text {
    width: 100%;
    min-height: 140px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-size: 20px;
    line-height: 1.4;
    caret-color: var(--you);
    resize: none;
}
.log-text:hover, .log-text:focus { border: 0; }
.log-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.log-bar .chips { display: none; }
.log-bar .btn-you { height: 48px; padding: 0 24px; font-size: 16px; }
.log-status { flex-basis: 100%; order: 5; color: var(--muted); font-size: 13px; }
.log-status:empty { display: none; }
.log-head { margin-bottom: 18px; }
.home-log .log-head { margin: 0; }
.try-label { color: var(--muted); font-size: 13px; font-weight: 600; margin: 0 0 10px; }
.log-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px 16px; flex-wrap: wrap; color: var(--muted); font-size: 14px; font-weight: 500; }
.log-foot a { color: var(--ink); }
.log-foot-alt { display: inline-flex; align-items: center; gap: 10px; }
.link-btn {
    height: auto;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--ink);
    font-size: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    border-radius: 4px;
}
.link-btn:hover { background: transparent; color: var(--you-ink); }
.link-btn:active { transform: none; }

/* Home */
.home-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.home-head a { display: flex; border-radius: 50%; text-decoration: none; }
.home-grid { display: grid; gap: 16px; }
.home-main, .home-side { min-width: 0; display: grid; gap: 16px; align-content: start; }
.home-log { display: none; }
.home-side { display: none; }
.feed-grid { display: grid; gap: 14px; }
.home-note { padding: 18px; }
.home-note p { color: var(--ink-2); font-size: 14px; line-height: 1.45; margin-bottom: 12px; }
.recent-list { list-style: none; margin: 0; padding: 0; }
.recent-list li + li { border-top: 1px solid var(--line-2); }
.recent-list a { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; font-size: 15px; font-weight: 500; text-decoration: none; }
.recent-list li:first-child a { padding-top: 0; }
.recent-list li:last-child a { padding-bottom: 0; }
.recent-list a span:last-child { color: var(--ink-2); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-list a:hover span:first-child { color: var(--you-ink); }
/* Your day on Home (just saved, or today), with Share right on it */
.latest { scroll-margin-top: 16px; }
.latest-card.is-new { box-shadow: 0 0 0 2px var(--you); animation: latest-settle 1.6s ease-out 2.4s forwards; }
@keyframes latest-settle { to { box-shadow: 0 0 0 2px transparent; } }
.latest-badge { padding: 4px 10px; border-radius: 99px; background: var(--you-tint); color: var(--you-ink); font-size: 12px; font-weight: 700; }
.latest-actions { display: flex; gap: 10px; }
.latest-actions .btn { height: 48px; font-size: 16px; }
.latest-actions .btn-you { flex: 1; }
.latest .share-preview, .latest .alert { margin-top: 12px; }

/* --- Record a workout -------------------------------------------------- */
.rec-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; font-size: 15px; font-weight: 600; }
.rec-top a { color: var(--muted); text-decoration: none; }
.rec-top a:hover { color: var(--ink); }
.rec-clock, .rec-live { display: none; }
.rec[data-state="live"] .rec-idle { display: none; }
.rec[data-state="live"] .rec-live { display: flex; flex-direction: column; gap: 12px; }
.rec[data-state="live"] .rec-clock { display: inline-flex; }
.rec[data-state="live"] .rec-top { position: sticky; top: 0; z-index: 20; margin: -10px 0 6px; padding: 10px 0; background: var(--bg); }
.rec-clock { align-items: center; gap: 10px; font-family: var(--font-head); font-size: 30px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.rec-live-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--you); animation: rec-blink 1.4s ease-in-out infinite; }

.rec-idle { display: flex; flex-direction: column; align-items: center; gap: 6px; padding-top: 16px; text-align: center; }
.rec-lede { max-width: 34ch; margin: 4px 0 28px; color: var(--ink-2); font-size: 16px; line-height: 1.45; }
.rec-start { height: auto; padding: 0; border: 0; border-radius: 0; background: none; flex-direction: column; gap: 14px; }
.rec-start:hover { background: none; }
.rec-start-btn {
    width: 136px;
    height: 136px;
    border-radius: 50%;
    background: var(--surface);
    border: 8px solid var(--line-2); /* a border, not an inset shadow: --shadow-card is "none" in dark mode */
    box-shadow: var(--shadow-card);
    display: flex;
    align-items: center;
    justify-content: center;
}
.rec-start-btn span { width: 68px; height: 68px; border-radius: 50%; background: var(--you); transition: transform 0.15s ease, background 0.15s ease; }
.rec-start:hover .rec-start-btn span { background: var(--you-hover); transform: scale(1.05); }
.rec-start-label { font-family: var(--font-head); font-size: 21px; font-weight: 700; }
.rec-quota { margin: 2px 0 0; color: var(--muted); font-size: 14px; }
.rec-alt { width: 100%; margin-top: 40px; }
.rec-alt-label { margin: 0 0 10px; color: var(--muted); font-size: 14px; font-weight: 500; }
.rec-alt-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.rec-alt-actions .btn { height: 48px; padding: 0 12px; }
@media (max-width: 360px) { .rec-alt-actions { grid-template-columns: 1fr; } }

.rec-blocks { display: grid; gap: 12px; }
/* A block of notes, in the recorder and the routine editor alike: the whole block
   lights up while you type anywhere in it (its fields have no ring of their own). */
.block { padding: 14px 18px 16px; border-radius: 22px; background: var(--surface); box-shadow: var(--shadow-card); outline: 2px solid transparent; transition: outline-color 0.15s ease; }
/* An outline, not a shadow ring: --shadow-card is "none" in dark mode, which would void a combined box-shadow. */
.block:focus-within { outline-color: var(--you); }
.block input.block-name {
    flex: 1;
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--ink);
    font-size: 14px;
    font-weight: 700;
}
.block input.block-name:hover, .block input.block-name:focus { border: 0; }
.block input.block-name::placeholder { color: var(--muted); font-weight: 600; }
/* One unnamed block looks as it always did: no head until there are two or it has a name. */
.rec-block-head { display: none; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 6px; }
.rec-blocks.has-many .rec-block-head, .rec-block.has-name .rec-block-head, .rec-block-head:focus-within { display: flex; }
.rec-block-remove { height: auto; padding: 0; border: 0; background: none; color: var(--muted-2); font-size: 13px; font-weight: 500; }
.rec-block-remove:hover { background: none; color: var(--danger); }
.rec-block.is-confirming .rec-block-remove { color: var(--danger); font-weight: 700; }
.rec-text {
    width: 100%;
    min-height: 96px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-size: 19px;
    line-height: 1.4;
    caret-color: var(--you);
    resize: none;
    overflow: hidden;
}
.rec-text:hover, .rec-text:focus { border: 0; }
.rec-add { width: 100%; height: 60px; border-radius: 22px; border: 1.5px dashed var(--dashed); background: transparent; color: var(--ink-2); font-size: 15px; }
.rec-add:hover { border-color: var(--dashed); background: var(--surface); color: var(--ink); }
.rec-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    padding: 16px var(--gutter) calc(20px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(var(--bg-clear), var(--bg) 30%);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
}
.rec-bar .rec-stop { flex: 1; max-width: 380px; }
.rec-stop-icon { width: 14px; height: 14px; border-radius: 3px; background: var(--you); }
.rec-summary { margin: 0 0 16px; color: var(--ink-2); font-size: 17px; }
.rec-summary strong { margin-right: 4px; color: var(--ink); font-family: var(--font-head); font-size: 34px; font-weight: 800; letter-spacing: -0.02em; }
.rec-sheet .alert { margin-bottom: 12px; }
.rec-sheet-actions { display: grid; gap: 10px; margin-top: 16px; }
.rec-sheet-actions form { display: contents; }
.rec-sheet-actions .btn { width: 100%; }
.rec-keep { background: var(--field); }
.rec-sheet-note { margin: 12px 0 0; color: var(--muted); font-size: 13px; text-align: center; }

/* --- Routines ---------------------------------------------------------- */
.rec-routines { width: 100%; margin-top: 36px; text-align: left; }
.rec-routines .section-head { margin-bottom: 10px; }
.routine-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.routine-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; padding: 14px 16px; border-radius: 20px; background: var(--surface); box-shadow: var(--shadow-card); }
.routine-start {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "name go" "meta go";
    align-content: center;
    row-gap: 2px;
    color: var(--ink);
    text-decoration: none;
    transition: transform 0.15s ease;
}
.routine-start:active { transform: scale(0.97); }
.routine-start .routine-name { grid-area: name; }
.routine-start .routine-meta { grid-area: meta; }
.routine-go { grid-area: go; padding: 7px 14px; border-radius: 99px; background: var(--you-tint); color: var(--you-ink); font-size: 14px; font-weight: 700; }
.routine-start:hover .routine-go { background: var(--you); color: var(--on-you); }
.routine-main { flex: 1 1 180px; min-width: 0; display: grid; gap: 2px; color: var(--ink); text-decoration: none; }
.routine-main:hover .routine-name { color: var(--you-ink); }
.routine-name { font-family: var(--font-head); font-size: 17px; font-weight: 700; overflow-wrap: anywhere; }
.routine-meta { color: var(--muted); font-size: 13px; font-weight: 500; }
.routine-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.routine-actions form { display: contents; }
.routine-delete { color: var(--danger); }
.routine-delete:hover { color: var(--danger); }
.routine-empty { margin: 0; color: var(--muted); font-size: 15px; }
.routine-empty a { color: var(--ink); font-weight: 600; }
.routine-empty .btn { margin-left: 6px; }
.routine-lede { margin: -6px 0 18px; }
.routine-help { margin: -6px 0 14px; }
.routine-blocks { margin-bottom: 12px; }
.routine-block-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.routine-block-tools { display: flex; align-items: center; gap: 4px; }
.block-tool { width: 32px; height: 32px; min-height: 0; padding: 0; border: 0; border-radius: 50%; background: var(--field); color: var(--ink-2); font-size: 15px; }
.block-tool:hover { background: var(--line); color: var(--ink); }
.block-tool:disabled { opacity: 0.35; cursor: default; }
.routine-block .rec-block-remove { margin-left: 6px; }
.routine-save { margin-top: 18px; }

/* Help sheet */
dialog.sheet {
    width: min(560px, 100%);
    max-width: 100%;
    max-height: 85vh;
    margin: auto auto 0;
    padding: 24px 22px calc(28px + env(safe-area-inset-bottom, 0px));
    border: 0;
    border-radius: 28px 28px 0 0;
    background: var(--surface);
    color: var(--ink);
}
dialog.sheet::backdrop { background: var(--scrim); }
.sheet-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.sheet ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; color: var(--ink-2); }
.sheet-close { width: 36px; height: 36px; padding: 0; border-radius: 50%; background: var(--field); font-size: 20px; }

/* --- Review ------------------------------------------------------------ */
body.flow .page { padding-bottom: 140px; }
.review-top { display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: 15px; margin-bottom: 16px; }
.review-top .link-btn { text-decoration: none; }
.review-top a { color: var(--muted); text-decoration: none; }
.review-top a:hover { color: var(--ink); }
.review-grid { display: grid; gap: 16px; }
.review-side { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.review-date { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.date-pill {
    height: auto;
    width: auto;
    min-height: 0;
    padding: 8px 14px;
    border: 0;
    border-radius: 99px;
    background: var(--primary) !important;
    color: var(--on-primary) !important;
    font-size: 14px;
    font-weight: 600;
}
.date-pill:hover { background: var(--primary-hover) !important; }
.words-card { display: none; margin: 6px 0 0; }
.words-card.is-open { display: block; }
.words-label { display: block; color: var(--muted); font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.words-text { min-height: 0; padding: 0; border: 0; border-radius: 0; font-size: 17px; line-height: 1.45; resize: vertical; }
.words-text:hover, .words-text:focus { border: 0; }
.words-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.review-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.review-group { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.group-head { display: flex; justify-content: space-between; align-items: baseline; }
.group-head h2 { font-size: 17px; }
.add-link { height: auto; padding: 0; gap: 0; background: none; border: 0; color: var(--you-ink); font-size: 14px; font-weight: 600; }
.add-link:hover { background: none; color: var(--you-ink); text-decoration: underline; }
.group-card { background: var(--surface); border-radius: 20px; overflow: hidden; }
.group-card:not(:has(.review-row)) { display: none; }
.review-row { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.review-row + .review-row { border-top: 1px solid var(--line-2); }
.row-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
input.row-name {
    flex: 1;
    min-width: 0;
    min-height: 0;
    padding: 2px 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    font-size: 16px;
    font-weight: 600;
}
input.row-name:hover { border: 0; }
input.row-name:focus { border: 0; box-shadow: 0 2px 0 var(--you); border-radius: 0; }
.row-remove { height: auto; padding: 0; background: none; border: 0; color: var(--muted-2); font-size: 13px; font-weight: 500; }
.row-remove:hover { background: none; color: var(--danger); }
.vpills { display: flex; flex-wrap: wrap; gap: 8px; }
.vpill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 38px;
    padding: 0 12px;
    border-radius: 12px;
    background: var(--field);
    border: 1.5px solid var(--field);
    font-size: 15px;
    font-weight: 600;
    cursor: text;
    max-width: 100%;
}
.vpill input {
    width: auto;
    min-width: 2ch;
    max-width: 100%;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-weight: 600;
    field-sizing: content;
}
.vpill input:hover, .vpill input:focus { border: 0; }
.vpill:focus-within { background: var(--surface); border-color: var(--you); }
.vpill:has(input:placeholder-shown) { background: transparent; border: 1.5px dashed var(--dashed); }
.vpill:has(input:placeholder-shown) input::placeholder { color: var(--muted); }
.vpill:has(input:placeholder-shown) .vpill-unit { display: none; }
.vpill:has(input:placeholder-shown):focus-within { border-style: solid; border-color: var(--you); background: var(--surface); }
.vpill-unit { color: var(--ink); }
.review-row.row-deleted { background: var(--danger-tint); }
.review-row.row-deleted .row-name, .review-row.row-deleted .vpills { opacity: 0.45; text-decoration: line-through; }
.review-row.row-deleted .row-remove { color: var(--ink); font-weight: 600; }
.review-pair { display: grid; gap: 16px; }
.bw-card { background: var(--surface); border-radius: 20px; padding: 14px 16px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.bw-card h2 { font-size: 17px; }
.bw-card p { color: var(--muted); font-size: 13px; margin: 2px 0 0; }
.vis-card { background: var(--surface); border-radius: 20px; padding: 14px 16px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.vis-card h2 { font-size: 17px; }
.vis-help { color: var(--muted); font-size: 13px; margin: 2px 0 0; }
.vis-help [data-vis] { display: none; color: var(--ink); }
.vis-card:has(input[value="private"]:checked) [data-vis="private"],
.vis-card:has(input[value="friends"]:checked) [data-vis="friends"],
.vis-card:has(input[value="public"]:checked) [data-vis="public"] { display: inline; }
.vis-toggle { display: inline-flex; background: var(--field); border-radius: 99px; padding: 3px; }
.vis-btn { position: relative; padding: 8px 14px; border-radius: 99px; color: var(--muted); font-size: 14px; font-weight: 600; line-height: 1.1; cursor: pointer; }
.vis-btn input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.vis-btn:hover { color: var(--ink); }
.vis-btn:has(input:checked) { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-toggle); }
.vis-btn:has(input:focus-visible) { outline: 2px solid var(--you); outline-offset: 2px; }
.review-section.vis-card { padding: 0; background: none; border-radius: 0; }
.review-save {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    padding: 16px var(--gutter) calc(20px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(var(--bg-clear), var(--bg) 30%);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
}
.review-save > * { width: 100%; max-width: calc(560px - 2 * var(--gutter)); margin: 0 auto; }
.review-save .review-cancel { display: none; }
.review-save [data-llm-status] { text-align: center; }
.review-save [data-llm-status]:empty { display: none; }

/* --- Day --------------------------------------------------------------- */
.day-head { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; gap: 8px; margin-bottom: 16px; }
.day-step {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--surface);
    color: var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 600;
    text-decoration: none;
    line-height: 1;
}
a.day-step:hover { background: var(--line-2); color: var(--ink); }
.day-step.is-disabled { color: var(--disabled); }
.day-title-btn {
    height: auto;
    padding: 4px 8px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    line-height: 1.2;
    white-space: normal;
}
.day-title-btn:hover { background: var(--line-2); }
.day-title { font-family: var(--font-head); font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.day-sub { color: var(--muted); font-size: 13px; font-weight: 500; }
.day-actions { display: none; }
.day-grid { display: grid; gap: 16px; }
.day-side, .day-main { display: grid; gap: 16px; align-content: start; min-width: 0; }
.poster {
    background: var(--you);
    color: var(--on-you);
    border-radius: 28px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    position: relative;
    overflow: hidden;
    min-height: 380px;
}
.poster-top { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; }
.poster-top span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.poster-top, .poster-head, .poster-rows { position: relative; }
/* The day's muscle icon, in ink with a faint body; the focus name may sit over the body. */
.poster-icon { position: absolute; right: 14px; top: 46px; color: var(--on-you); --mi-base: var(--on-you); --mi-base-opacity: .14; }
.poster-head { margin-top: auto; display: grid; gap: 8px; }
.poster-focus { font-family: var(--font-head); font-size: 46px; font-weight: 800; line-height: 0.92; letter-spacing: -0.03em; margin: 0; overflow-wrap: anywhere; }
.poster-stats { font-size: 16px; font-weight: 600; margin: 0; }
.poster-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 15px; font-weight: 600; }
.poster-rows li { display: flex; justify-content: space-between; gap: 12px; border-top: 1.5px solid var(--you-rule); padding-top: 8px; }
.poster-rows a { color: var(--on-you); text-decoration: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.poster-rows a:hover { text-decoration: underline; color: var(--on-you); }
.poster-rows li > span:last-child { white-space: nowrap; }
.poster-caption { color: var(--muted); font-size: 13px; text-align: center; margin: 0; }
.day-table { display: none; }
.day-buttons { display: flex; gap: 10px; }
.day-buttons .btn { height: 54px; font-size: 16px; }
.day-buttons .btn-primary { flex: 1; }
.day-buttons .btn-white { width: 96px; }
.day-note { color: var(--muted); font-size: 13px; text-align: center; margin: 0; }
.share-preview { margin: 0; }
.share-preview img { display: block; width: 100%; max-width: 360px; border-radius: 20px; margin: 0 auto 8px; }
.share-preview figcaption { text-align: center; }
.bw-line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }

/* Thread: high fives and comments on one of your days */
.thread-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.thread-head h2 { font-size: 16px; }
.thread-count { color: var(--you-ink); font-size: 13px; font-weight: 600; }

/* --- Lift progress ----------------------------------------------------- */
.lift-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin-bottom: 16px; }
.lift-grid > .card { margin-bottom: 0; min-width: 0; }
.lift-grid .chart { height: 170px; }
.lift-name { font-family: var(--font-head); font-weight: 700; font-size: 16px; color: var(--ink); text-decoration: none; }
.lift-name:hover { color: var(--you-ink); }
.lift-trend { font-size: 14px; color: var(--muted); white-space: nowrap; }
.lift-trend strong { color: var(--ink); }
.change-badge { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 99px; font-size: 12px; font-weight: 700; background: var(--field); color: var(--muted); }
.change-badge.up { background: var(--you-tint); color: var(--you-ink); }
.change-badge.down { background: var(--friend-tint); color: var(--friend-ink); }
.exercise-summary { margin: -4px 0 16px; }
.exercise-summary strong { color: var(--ink); font-weight: 600; }
.section-head-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 24px 0 12px; }
.section-head-row h2 { font-size: 19px; margin: 0; }

/* --- Progress ---------------------------------------------------------- */
.progress-head h1 { margin-bottom: 14px; }
.progress-grid { display: grid; gap: 14px; margin-bottom: 14px; align-items: start; }
.progress-grid > .card { margin: 0; min-width: 0; }
.best-list { list-style: none; margin: 0; padding: 0; }
.best-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; }
.best-list li + li { border-top: 1px solid var(--line-2); }
.best-list li:first-child { padding-top: 0; }
.best-list li:last-child { padding-bottom: 0; }
.best-name { display: block; font-weight: 600; font-size: 15px; color: var(--ink); text-decoration: none; }
a.best-name:hover { color: var(--you-ink); }
.best-meta { display: block; color: var(--muted); font-size: 13px; }
.best-value { font-family: var(--font-head); font-size: 22px; font-weight: 800; white-space: nowrap; }
.best-value small { font-size: 14px; font-weight: 600; }
.chart-foot { display: flex; justify-content: space-between; color: var(--muted-2); font-size: 12px; font-weight: 500; margin-top: 8px; }

/* --- Charts ------------------------------------------------------------ */
.two-col { display: grid; grid-template-columns: 1fr; gap: 14px; margin-bottom: 16px; }
.two-col > .card { margin-bottom: 0; min-width: 0; }
.card-title-pad { padding: 18px 18px 0; margin-bottom: 8px; }
.chart-card { position: relative; }
.chart { width: 100%; height: 220px; display: block; overflow: visible; }
.chart[data-chart="bars"] { height: auto; }
.chart:focus-visible { outline: 2px solid var(--you); outline-offset: 6px; border-radius: 6px; }
.chart .grid { stroke: var(--line-2); stroke-width: 1; }
.chart .axis-label { fill: var(--muted-2); font-size: 11px; font-family: var(--font-body); font-weight: 500; }
.chart .value-label { fill: var(--ink); font-size: 12px; font-weight: 700; font-family: var(--font-body); }
.chart .area { fill: var(--you); opacity: 0.12; }
.chart .line { fill: none; stroke: var(--you); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.chart .point { fill: var(--you); stroke: var(--surface); stroke-width: 2; transition: r 0.1s; }
.chart .crosshair { stroke: var(--chip-border); stroke-width: 1; pointer-events: none; }
.chart .bar { fill: var(--you); opacity: 0.85; transition: opacity 0.1s; }
.chart .bar.empty { fill: var(--line); opacity: 1; }
.chart .bar.active { opacity: 1; }
.chart .bar.empty.active { fill: var(--dashed); }
.chart .rbar { fill: var(--bar-past); transition: fill 0.1s; }
.chart .rbar.current { fill: var(--you); }
.chart .rbar.active { fill: var(--bar-hover); }
.chart .rbar.current.active { fill: var(--you-hover); }
.chart .rbar.zero { fill: var(--track); }
.chart-tip {
    position: absolute;
    z-index: 5;
    pointer-events: none;
    background: var(--ink);
    color: var(--bg);
    border-radius: 12px;
    padding: 8px 12px;
    font-size: 13px;
    white-space: nowrap;
}
.chart-tip .tip-title { color: var(--bg); opacity: 0.7; margin-bottom: 2px; }
.chart-tip .tip-row { display: flex; justify-content: space-between; gap: 12px; }
.chart-tip .tip-row strong { font-variant-numeric: tabular-nums; }
.chart-tip .tip-row span { color: var(--bg); opacity: 0.7; }
.chart-table { margin-top: 10px; }
.chart-table summary { cursor: pointer; }
.chart-table summary:hover { color: var(--ink); }
.chart-table .table-wrap { margin: 8px 0 0; }

/* Horizontal bars (muscle groups) */
.hbars { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 10px; }
.hbars li { display: grid; grid-template-columns: 90px 1fr 36px; gap: 10px; align-items: center; font-size: 14px; font-weight: 500; }
.hbar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar-label::first-letter { text-transform: uppercase; }
.hbar-track { height: 10px; background: var(--track); border-radius: 5px; overflow: hidden; }
.hbar-fill { display: block; height: 100%; background: var(--you); border-radius: 5px; }
.hbar-value { text-align: right; }

/* Personal records (profile) */
.pr-list { list-style: none; margin: 0; padding: 0; }
.pr-list li {
    display: flex;
    gap: 4px 12px;
    align-items: baseline;
    flex-wrap: wrap;
    font-size: 15px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line-2);
}
.pr-list li:last-child { border-bottom: none; padding-bottom: 0; }
.pr-list li:first-child { padding-top: 0; }
.pr-name { flex: 1 1 160px; font-weight: 600; }
.pr-date { margin-left: auto; }

/* Sparklines in the exercises table */
.spark { width: 96px; height: 24px; display: block; overflow: visible; }
.spark .line { fill: none; stroke: var(--you); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.spark .point { fill: var(--you); }
.spark-cell { width: 110px; }

/* --- Welcome ----------------------------------------------------------- */
body.welcome { background: var(--bg); }
.welcome-main { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.welcome-photo {
    flex: none;
    height: 470px;
    max-height: 56vh;
    background:
        radial-gradient(120% 90% at 18% 100%, color-mix(in srgb, var(--you) 55%, transparent), transparent 60%),
        radial-gradient(90% 80% at 90% 10%, color-mix(in srgb, var(--friend) 40%, transparent), transparent 60%),
        linear-gradient(160deg, var(--friend-tint), var(--line-2) 55%, var(--line));
    background-size: cover;
    background-position: center;
}
.welcome-body { flex: 1; padding: 28px 28px calc(40px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 14px; max-width: 560px; width: 100%; margin: 0 auto; }
.welcome-body .brand { font-size: 17px; }
.welcome-title { font-size: 34px; line-height: 1.05; letter-spacing: -0.02em; text-wrap: pretty; }
.welcome-sub { color: var(--ink-2); font-size: 16px; line-height: 1.45; margin: 0; }
.welcome-spacer { flex: 1; min-height: 12px; }
.welcome-cta { display: flex; flex-direction: column; gap: 12px; }
.btn-google { height: 56px; font-size: 17px; background: var(--primary); color: var(--on-primary); }
.btn-google:hover { background: var(--primary-hover); color: var(--on-primary); }
.google-mark { width: 20px; height: 20px; border-radius: 50%; background: var(--bg); display: inline-flex; align-items: center; justify-content: center; }
.google-mark svg { width: 14px; height: 14px; }
.welcome-note { color: var(--muted); font-size: 13px; text-align: center; margin: 0; }

/* --- Social ------------------------------------------------------------ */
.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    border-radius: 50%;
    background: var(--neutral-tint);
    color: var(--neutral-ink);
    font-family: var(--font-head);
    font-weight: 700;
    object-fit: cover;
    overflow: hidden;
    line-height: 1;
}
.avatar.tone-you { background: var(--you-tint); color: var(--you-ink); }
.avatar.tone-friend { background: var(--friend-tint); color: var(--friend-ink); }
.avatar.solid-you { background: var(--you); color: var(--on-you); font-weight: 800; }
.avatar.solid-friend { background: var(--friend); color: var(--on-friend); font-weight: 800; }
.avatar-xs { width: 24px; height: 24px; font-size: 10px; }
.avatar-sm { width: 32px; height: 32px; font-size: 12px; }
.avatar-md { width: 42px; height: 42px; font-size: 15px; }
.avatar-nav { width: 40px; height: 40px; font-size: 15px; }
.avatar-vs { width: 52px; height: 52px; font-size: 20px; }
.avatar-lg { width: 96px; height: 96px; font-size: 32px; border: 5px solid var(--bg); }

.input-prefix { color: var(--muted); font-weight: 600; }
.field .checkbox { display: inline-flex; align-items: center; gap: 8px; margin: 0; cursor: pointer; font-weight: 500; }

.person { display: inline-flex; align-items: center; gap: 12px; min-width: 0; color: var(--ink); text-decoration: none; }
.person:hover { color: var(--ink); }
.person:hover .person-name { color: var(--you-ink); }
.person-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.person-name { font-weight: 600; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person-handle { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rel-actions { display: flex; align-items: center; gap: 8px; flex: none; flex-wrap: wrap; }
.rel-actions form { margin: 0; }

.people-list { list-style: none; margin: 0; padding: 0; }
.people-list.card { padding: 4px 16px; }
.people-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line-2);
}
.people-list li:last-child { border-bottom: none; }
.card > .input-group + .people-list { margin-top: 8px; }
.people-empty { margin: 12px 0 0; }
.invite-reset { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; flex-wrap: wrap; }
.invite-reset .btn-text { padding-left: 0; }

.activity-list { list-style: none; margin: 0; padding: 4px 16px; }
.activity-list li { display: flex; align-items: flex-start; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line-2); font-size: 15px; }
.activity-list li:last-child { border-bottom: none; }
.activity-list li.is-new { box-shadow: inset 3px 0 0 var(--you); margin-left: -16px; padding-left: 13px; }
.activity-text { flex: 1; min-width: 0; }
.activity-quote { margin: 4px 0 0; color: var(--ink-2); overflow-wrap: anywhere; }

/* Session cards: owner, rows, high fives and comments */
.feed-list { display: grid; gap: 14px; }
.feed-column { max-width: 640px; }
.feed-card { scroll-margin-top: 90px; }
.feed-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.feed-head .person { flex: 1; }
.feed-when { color: var(--muted); font-size: 15px; font-weight: 600; text-decoration: none; }
a.feed-when:hover { color: var(--you-ink); }
.social-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; border-top: 1px solid var(--line-2); padding-top: 12px; margin-top: auto; }
.kudos-form { margin: 0; }
.kudos-btn, .comments-pill, .comments > summary {
    height: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 0;
    border-radius: 99px;
    background: var(--field);
    color: var(--ink);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
}
.kudos-btn:hover { background: var(--line); color: var(--ink); }
.kudos-btn.is-on { background: var(--you-tint); color: var(--you-ink); }
.kudos-btn.is-on:hover { background: var(--you-tint-hover); }
.kudos-btn.is-static { cursor: default; }
.kudos-btn.is-static:active { transform: none; }
.comments-pill, .comments > summary { font-weight: 600; }
.comments-pill:hover, .comments > summary:hover { background: var(--line); color: var(--ink); }
.comments-pill[aria-expanded="true"] { background: var(--ink); color: var(--bg); }
.comments { flex: 1 1 auto; min-width: 0; }
.comments > summary { list-style: none; }
.comments > summary::-webkit-details-marker { display: none; }
.comments[open] { flex-basis: 100%; }
.comments[open] > summary { margin-bottom: 10px; }
.js .social-bar .comments > summary { display: none; }
.js .social-bar .comments { flex-basis: 100%; }
.js .social-bar .comments:not([open]) { display: none; }
.comment-preview { flex-basis: 100%; margin: 2px 0 0; color: var(--ink-2); font-size: 14px; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.comment-preview b { color: var(--ink); font-weight: 600; }
.comments[open] ~ .comment-preview { display: none; }
.comment-list { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 10px; }
.comment { display: flex; gap: 10px; align-items: flex-start; }
.comment-main { flex: 1; min-width: 0; }
.comment-head { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.comment-author { color: var(--ink); font-weight: 600; text-decoration: none; }
.comment-delete { margin: 0 0 0 auto; }
.comment-delete .btn-text { height: 22px; font-size: 12px; padding: 0 2px; }
.comment-body { margin: 0; font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; }
.comment-form { display: flex; gap: 8px; }
.comment-form .input { min-height: 44px; border: 0; background: var(--field); border-radius: 22px; padding: 0 16px; }
.comment-form .input:focus { box-shadow: 0 0 0 1.5px var(--you); }
.comment-form .btn { height: 44px; }

/* Profile */
/* The cover runs edge to edge; its padding lines its contents up with the page. */
.profile-cover {
    --bleed: calc(50vw - 50%);
    position: relative;
    height: 150px;
    margin: -20px calc(-1 * var(--bleed)) 0;
    padding: 16px calc(var(--bleed) + var(--gutter));
    background: var(--friend-tint);
}
.profile-cover.is-self { background: var(--you-tint); }
.profile-cover .crumb a { font-size: 15px; }
.profile-cover .avatar-lg { position: absolute; left: calc(var(--bleed) + var(--gutter)); bottom: -44px; }
.profile-cover .avatar.solid-friend, .profile-cover .avatar.solid-you { border-color: var(--bg); }
.profile-id { padding-top: 56px; margin-bottom: 14px; }
.profile-id h1 { font-size: 28px; margin-bottom: 4px; }
.profile-meta { color: var(--muted); font-size: 14px; font-weight: 500; margin: 0; }
.profile-bio { margin: 6px 0 0; font-size: 15px; line-height: 1.45; }
.profile-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.profile-actions .btn { height: 48px; }
.profile-actions .btn-friend { flex: 1; }
.profile-actions form { margin: 0; }
.friends-menu { position: relative; }
.friends-menu > summary { list-style: none; }
.friends-menu > summary::-webkit-details-marker { display: none; }
.friends-menu .menu { min-width: 180px; }
.friends-menu .menu button { width: 100%; justify-content: flex-start; height: auto; padding: 10px 12px; border-radius: 12px; background: transparent; font-weight: 500; }
.friends-menu .menu button:hover { background: var(--field); }
.profile-grid { display: grid; gap: 16px; }
.profile-side, .profile-main { display: grid; gap: 14px; align-content: start; min-width: 0; }
.profile-side .stat-grid, .profile-side .stat-caption { margin: 0; }
.fav-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.fav-list li { display: flex; align-items: center; gap: 12px; min-width: 0; font-size: 15px; }
.fav-rank {
    width: 28px;
    height: 28px;
    flex: none;
    border-radius: 50%;
    background: var(--friend-tint);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-head);
    font-size: 13px;
    font-weight: 700;
}
.fav-list.is-you .fav-rank { background: var(--you-tint); }
.fav-name { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fav-name::first-letter { text-transform: uppercase; }
.fav-meta { color: var(--muted); font-size: 13px; white-space: nowrap; }
.fav-list li.is-shared .fav-rank { background: var(--ink); color: var(--bg); }
.shared-key { display: inline-block; padding: 0 6px; border-radius: 99px; background: var(--ink); color: var(--bg); font-weight: 600; }

/* Compare */
.vs-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.vs-people { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; }
.vs-person { display: flex; align-items: center; gap: 10px; font-family: var(--font-head); font-size: 22px; font-weight: 700; min-width: 0; }
.vs-person span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-sep { font-family: var(--font-head); font-size: 18px; font-weight: 800; color: var(--muted-2); }
.vs-filters { justify-content: center; }
.vs-totals { padding: 6px 16px; }
.vs-row { display: grid; grid-template-columns: 1fr 1.2fr 1fr; align-items: center; padding: 10px 0; }
.vs-row + .vs-row { border-top: 1px solid var(--line-2); }
.vs-num { font-family: var(--font-head); font-size: 22px; font-weight: 700; white-space: nowrap; }
.vs-num small { font-size: 13px; font-weight: 600; }
.vs-num:last-child { text-align: right; }
.vs-label { text-align: center; color: var(--muted); font-size: 13px; font-weight: 500; }
.lead-you { color: var(--you-ink); }
.lead-friend { color: var(--friend-ink); }
.vs-tiles { display: none; }
.split-list { display: grid; gap: 14px; }
.split-top { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.split-top span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.split-top span:first-child::first-letter { text-transform: uppercase; }
.split-top span:last-child { color: var(--muted); white-space: nowrap; }
.split-bar { display: flex; gap: 4px; height: 10px; }
.split-bar span { border-radius: 5px; min-width: 6px; }
.split-bar .is-you { background: var(--you); }
.split-bar .is-friend { background: var(--friend); }
.split-bar.is-empty span { background: var(--track); flex: 1; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--muted); font-size: 12px; font-weight: 500; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--you); }
.legend-dot-2 { background: var(--friend); }
.vs-bars li { grid-template-columns: 80px 1fr 70px; }
.vs-bar-pair { display: grid; gap: 3px; }
.vs-bar-pair .hbar-track { height: 7px; background: transparent; }
.vs-bar-pair .hbar-fill { border-radius: 4px; }
.hbar-fill-2 { background: var(--friend); }
.hbar-value .muted { font-weight: 500; }
.chart .line-2 { stroke: var(--friend); }
.chart .point-2 { fill: var(--friend); }
.fav-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 12px; }
.fav-who { margin-bottom: 10px; font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--muted); }

/* Invite */
.invite-card .avatar { margin: 0 auto 16px; }
.invite-actions { justify-content: center; margin-top: 8px; }

/* --- Desktop ----------------------------------------------------------- */
@media (min-width: 1024px) {
    .mobile-only { display: none !important; }
    body.has-tabs .page, body.flow .page { padding-bottom: 64px; }
    .tabbar { display: none; }
    .topbar {
        display: block;
        position: sticky;
        top: 0;
        z-index: 50;
        background: var(--bg);
        border-bottom: 1px solid var(--line);
    }
    .topbar-inner { max-width: 1280px; margin: 0 auto; height: 72px; padding: 0 40px; display: flex; align-items: center; gap: 40px; }
    .btn-log { height: 44px; padding: 0 20px; font-size: 15px; }
    .page { max-width: 1200px; padding: 36px 40px 64px; }
    h1 { font-size: 40px; }
    .page-narrow { max-width: 760px; }

    .stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
    .stat { border-radius: 22px; padding: 18px 20px; }
    .stat-label { font-size: 14px; }
    .stat-value { font-size: 44px; }
    .stat-value small { font-size: 20px; }
    .two-col, .lift-grid { grid-template-columns: 1fr 1fr; }
    .section-head h2 { font-size: 22px; }

    /* Welcome: words on the left, the photo on the right */
    .welcome-main { display: grid; grid-template-columns: 1fr 1fr; }
    .welcome-photo { order: 2; height: auto; max-height: none; }
    .welcome-body { max-width: none; margin: 0; padding: 56px 72px; gap: 22px; }
    .welcome-body .brand { font-size: 19px; }
    .welcome-body .brand-mark { width: 16px; height: 16px; }
    .welcome-title { font-size: 64px; line-height: 1; letter-spacing: -0.03em; }
    .welcome-sub { font-size: 19px; line-height: 1.5; max-width: 460px; }
    .welcome-body > .welcome-spacer:not(.desktop-only) { display: none; }
    .welcome-cta { flex-direction: row; align-items: center; margin-top: 10px; }
    .welcome-cta .btn-block { width: auto; padding: 0 28px; }
    .welcome-note { font-size: 14px; text-align: left; }

    /* Home: log box and feed, your week on the side */
    .home-head { display: none; }
    .home-grid { grid-template-columns: minmax(0, 1fr) 360px; gap: 32px; }
    .home-log { display: grid; gap: 20px; }
    .home-side { display: grid; }
    .log-head h1 { font-size: 40px; }
    .log-head .page-sub { font-size: 15px; margin-bottom: 4px; }
    .home-log .log-card { padding: 22px; gap: 16px; }
    .home-log .log-text { min-height: 84px; }
    .home-log .log-bar .chips { display: flex; flex: 1; }
    .home-log .log-bar .chip { padding: 8px 13px; }
    .home-log .section-head { margin: 6px 0 0; }
    .feed-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
    .feed-grid .session-card { padding: 18px; }
    .tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
    .session-tile { padding: 18px 20px; }
    .home-side .week-hero { padding: 22px; }
    .week-hero-num { font-size: 48px; }
    .week-bar-letter { display: block; }
    .home-side .card { margin: 0; }

    /* Review: your words on the left, the entries on the right */
    .review-top { display: none; }
    .review-grid { grid-template-columns: 380px minmax(0, 1fr); gap: 32px; align-items: start; }
    .review-side { gap: 16px; }
    .words-card, .words-card.is-open { display: block; order: 1; margin: 0; }
    .review-date { order: 2; }
    .review-group .group-card { border-radius: 22px; padding: 4px 20px; }
    .review-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 16px; padding: 12px 0; }
    .row-head { display: contents; }
    .row-head .row-remove { order: 3; }
    .vpills { order: 2; flex-wrap: nowrap; }
    .review-pair { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; }
    .review-pair .review-group { background: var(--surface); border-radius: 22px; padding: 18px 20px; gap: 4px; }
    .review-pair .group-card { padding: 0; }
    .review-pair .review-row { grid-template-columns: minmax(0, 1fr) auto auto; }
    .bw-card, .vis-card { border-radius: 22px; padding: 18px 20px; }
    .bw-card h2 { font-size: 18px; }
    .group-head h2 { font-size: 18px; }
    .review-save { position: static; padding: 0; background: none; flex-direction: row; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 6px; }
    .review-save > * { width: auto; max-width: none; margin: 0; }
    .review-save .review-cancel { display: inline-flex; height: 54px; padding: 0 24px; font-size: 16px; font-weight: 600; }
    .review-save .btn-xl { height: 54px; font-size: 16px; }

    /* Record: under the sticky top bar, Stop in the flow instead of pinned */
    .rec[data-state="live"] .rec-top { top: 72px; }
    .latest { scroll-margin-top: 96px; }
    .rec-bar { position: static; padding: 0; margin-top: 8px; background: none; justify-content: flex-end; }
    .rec-bar .rec-stop { flex: none; width: 220px; }

    /* Day: poster on the left, stats and table on the right */
    .day-head { grid-template-columns: auto auto auto 1fr; gap: 16px; margin-bottom: 24px; }
    .day-head .day-step { width: 44px; height: 44px; }
    .day-head .day-step[rel="next"], .day-head .day-step.is-next { order: 3; }
    .day-title-btn { align-items: flex-start; order: 2; padding: 4px 10px; }
    .day-title { font-size: 32px; letter-spacing: -0.02em; }
    .day-sub { font-size: 14px; }
    .day-actions { display: flex; gap: 10px; justify-content: flex-end; order: 4; }
    .day-actions .btn { height: 48px; }
    .day-grid { grid-template-columns: 420px minmax(0, 1fr); gap: 28px; }
    .poster { padding: 28px; min-height: 525px; gap: 20px; }
    .poster-focus { font-size: 60px; }
    .poster-stats { font-size: 18px; }
    .poster-icon { right: 20px; top: 60px; }
    .poster-icon svg { width: 190px; height: 190px; }
    .poster-rows { font-size: 16px; gap: 8px; }
    .poster-rows li { padding-top: 10px; }
    .day-table { display: block; padding: 6px 20px; }
    .day-table .table th, .day-table .table td { padding: 12px 12px 12px 0; }
    .day-table .table td { font-size: 16px; }
    .day-buttons, .day-main .day-note { display: none; }

    /* Progress */
    .progress-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 20px; }
    .progress-head .tabs { border-bottom: 0; margin: 0; gap: 24px; }
    .progress-head .tabs a { font-size: 16px; padding-bottom: 8px; }
    .progress-head .filters { margin: 0; }
    .range-long { display: inline; }
    .range-short { display: none; }
    .progress-grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
    .progress-grid.even { grid-template-columns: 1fr 1fr; }
    .best-value { font-size: 24px; }

    /* Profile: identity over the cover, stats beside the sessions */
    .profile-cover { height: 160px; margin-top: -36px; padding: 0; }
    .profile-cover .crumb { display: none; }
    .profile-cover .avatar-lg { display: none; }
    .profile-top { display: flex; align-items: flex-end; gap: 24px; margin-top: -56px; margin-bottom: 24px; position: relative; }
    .profile-top .avatar-xl { width: 128px; height: 128px; font-size: 40px; border: 6px solid var(--bg); }
    .profile-id { flex: 1; padding: 0 0 6px; margin: 0; min-width: 0; }
    .profile-id h1 { font-size: 36px; }
    .profile-actions { margin: 0; padding-bottom: 10px; flex-wrap: nowrap; }
    .profile-actions .btn-friend { flex: none; }
    .profile-grid { grid-template-columns: 320px minmax(0, 1fr); gap: 24px; }
    .profile-side .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .profile-side .stat { border-radius: 18px; padding: 14px 16px; }
    .profile-side .stat-value { font-size: 30px; }
    .profile-side .stat-value small { font-size: 15px; }
    .profile-main .feed-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* Compare */
    .vs-head { justify-content: space-between; }
    .vs-people { width: auto; justify-content: flex-start; gap: 18px; }
    .vs-person { font-size: 30px; gap: 12px; }
    .vs-person .avatar-vs { width: 60px; height: 60px; font-size: 22px; }
    .vs-sep { font-size: 22px; }
    .vs-head .filters { margin: 0; }
    .vs-totals { display: none; }
    .vs-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
    .vs-tile { background: var(--surface); border-radius: 22px; padding: 16px 20px; display: flex; flex-direction: column; gap: 6px; }
    .vs-tile .vs-nums { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
    .vs-tile .vs-num { font-size: 32px; font-weight: 800; }
    .compare-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
    .split-bar { height: 12px; }
    .split-top { font-size: 15px; }
}

/* Phones narrower than the design width */
@media (max-width: 380px) {
    :root { --gutter: 16px; }
    h1 { font-size: 28px; }
    .stat-value { font-size: 28px; }
    .stat-grid-3 .stat-value { font-size: 22px; }
    .poster-focus { font-size: 40px; }
    .week-dot .dot { width: 30px; height: 30px; }
    .segmented a { padding: 7px 10px; }
    .tabbar { font-size: 11px; }
}

@media (max-width: 640px) {
    /* Sessions cards: each line stacks its numbers under the name */
    .tile-body { align-items: flex-start; gap: 14px; }
    .tile-body .session-visual { --visual-size: 60px !important; border-radius: 16px; }
    .tile-body muscle-icon svg { width: 48px; height: 48px; }
    .tile-lines { gap: 10px; }
    .tile-lines li { flex-direction: column; gap: 1px; }
    .tile-detail { font-size: 14px; }

    .table th, .table td { padding: 10px 12px; }
    .hbars li { grid-template-columns: 84px 1fr 32px; }
    .people-list li { flex-wrap: wrap; }
    .fav-cols { grid-template-columns: 1fr; }
    .toolbar-split { flex-direction: column; align-items: stretch; }
    .toolbar-split .toolbar-group { justify-content: space-between; }
    .input-filter { max-width: none; flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; }
    .tab-log-btn, .rec-live-dot, .rec-link-dot { animation: none !important; }
    .latest-card.is-new { animation-duration: 0.01s !important; }
}