@font-face {
    font-family: "Archivo";
    src: url("fonts/archivo-latin.woff2") format("woff2");
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-display: swap;
}

/* Doole: warm linen paper, deep eucalyptus green, a touch of sand. Soft corners, soft shadows. */
:root {
    --paper: #f5f1ea;
    --sheet: #fffdf9;
    --ink: #1f2522;
    --ink-2: #5c655f;
    --rule: #e2dcd2;
    --line: #d9d2c6;
    --rule-strong: #c9c1b3;
    --accent: #2f6b55;
    --accent-soft: #dcebe3;
    --accent-deep: #1d4738;
    --sand: #c99a3e;
    --sand-soft: #f3e6c9;
    --lvl-1: #b5d3c3;
    --lvl-2: #78ab93;
    --lvl-3: #2f6b55;
    --lvl-4: #1d4738;
    --on-accent: #ffffff;
    --tone: rgb(31 37 34 / 0.10);
    --bar: #1e2d26;
    --bar-ink: #f5f1ea;
    --bar-ink-2: #a9b5ae;
    --good: #2f6b3c;
    --warn: #93580a;
    --bad: #b3261e;
    --radius: 14px;
    --shadow: 0 1px 2px rgb(31 37 34 / 0.05), 0 10px 28px -14px rgb(31 37 34 / 0.28);
    --tabbar-h: 64px;
    --timer-h: 0px;
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --paper: #111513;
        --sheet: #1a201c;
        --ink: #edf0eb;
        --ink-2: #a3aca6;
        --rule: #2b322e;
        --line: #343c37;
        --rule-strong: #46504a;
        --accent: #7cc4a4;
        --accent-soft: #1d3a2e;
        --on-accent: #0c1a13;
        --sand: #e0b866;
        --sand-soft: #3a3020;
        --tone: rgb(237 240 235 / 0.08);
        --bar: #0b0f0d;
        --good: #8cc49a;
        --warn: #e0a54a;
        --bad: #f08b82;
        --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 10px 28px -14px rgb(0 0 0 / 0.6);
        --accent-deep: #b5e3cd;
        --lvl-1: #23443a;
        --lvl-2: #3d7a61;
        --lvl-3: #7cc4a4;
        --lvl-4: #b5e3cd;
        color-scheme: dark;
    }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: "Archivo", system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    font-stretch: 100%;
    -webkit-font-smoothing: antialiased;
    font-variant-numeric: tabular-nums;
}
body.has-tabbar { padding-bottom: calc(var(--tabbar-h) + var(--timer-h) + env(safe-area-inset-bottom) + 32px); }

h1, h2, h3 { margin: 0; line-height: 1.1; font-weight: 700; }
h1 { text-wrap: balance; font-size: clamp(1.7rem, 7vw, 2.3rem); font-stretch: 100%; font-weight: 750; line-height: 1; text-transform: uppercase; letter-spacing: -0.005em; }
h2 { font-size: 1rem; font-stretch: 100%; font-weight: 800; }
p { margin: 0; }
a { color: inherit; text-decoration-color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
img { max-width: 100%; display: block; }
code { font-size: 0.9em; }
small { font-size: 0.8em; }
[hidden] { display: none !important; }

.icon { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon--sm { width: 18px; height: 18px; }

.container { max-width: 680px; margin: 0 auto; padding: 8px 20px 0; }
.muted { color: var(--ink-2); }
.hint { color: var(--ink-2); font-size: 0.875rem; }
.lede { color: var(--ink-2); margin-top: 8px; max-width: 34em; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 16px; padding: 16px 0 4px; }

/* Masthead: a full-width ink band closed by a red rule */
.masthead {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px max(20px, calc((100% - 640px) / 2));
    background: var(--bar); color: var(--bar-ink);
    border-bottom: 4px solid var(--accent);
}
.masthead__brand {
    display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
    font-stretch: 100%; font-weight: 750; font-size: 1.15rem; letter-spacing: 0.14em; text-transform: uppercase;
}
.masthead__links { display: flex; align-items: center; gap: 18px; font-size: 0.85rem; color: var(--bar-ink-2); }
.masthead__main { display: none; }
.masthead__links a { text-decoration: none; }
.masthead__links a[aria-current] { color: var(--bar-ink); box-shadow: inset 0 -2px 0 var(--accent); }
.masthead .linkbtn { color: var(--bar-ink-2); text-decoration: none; }

/* Hanko seal: the brand mark */
.seal {
    display: inline-grid; place-items: center; flex: none;
    width: 30px; height: 30px; border-radius: 3px;
    background: var(--accent); color: #fff;
}
.seal__glyph { width: 68%; height: 68%; fill: currentColor; }

/* Bottom navigation */
.tabbar {
    position: fixed; inset: auto 0 0 0; z-index: 20;
    display: grid; grid-template-columns: repeat(5, 1fr);
    height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--bar);
}
.tabbar a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    color: var(--bar-ink-2); text-decoration: none; font-size: 0.72rem; font-weight: 700;
}
.tabbar a[aria-current] { color: var(--bar-ink); box-shadow: inset 0 3px 0 var(--accent); }
.tabbar a[aria-current] .icon { color: var(--accent); stroke-width: 2.4; }

/* Sections: a heavy rule and a title, like a ledger heading */
.sheet { padding: 26px 0 6px; }
.sheet__head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    border-top: 1px solid var(--line); margin-bottom: 12px;
}
/* Titles hang from the rule like a manga caption box */
.sheet__head h2 {
    background: var(--ink); color: var(--paper);
    padding: 5px 12px 4px; font-size: 0.82rem; font-weight: 850;
    text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap;
}
.sheet__head .meta { color: var(--ink-2); font-size: 0.78rem; padding-top: 7px; text-align: right; }
.sheet > .hint { margin-bottom: 12px; }
.sheet > .hint:last-child { margin: 10px 0 0; }

/* Ledger rows */
.rows { list-style: none; margin: 0; padding: 0; }
.row {
    display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 4px 16px;
    padding: 12px 0; border-bottom: 1px solid var(--rule);
}
.row:last-child { border-bottom: 0; }
.row__label { font-weight: 600; }
.row__value { font-stretch: 62%; font-weight: 800; font-size: 1.5rem; line-height: 1; text-align: right; }
.row__value small { font-size: 0.8rem; font-stretch: 100%; font-weight: 500; color: var(--ink-2); margin-left: 2px; }
.row__note { grid-column: 1 / -1; color: var(--ink-2); font-size: 0.85rem; }
.row--link { text-decoration: none; }

/* Figures */
.figure { font-stretch: 62%; font-weight: 850; line-height: 0.85; letter-spacing: -0.01em; }
.figure small { font-stretch: 100%; font-weight: 500; font-size: 0.28em; letter-spacing: 0; color: var(--ink-2); margin-left: 6px; }
.delta-down { color: var(--good); }
.delta-up { color: var(--warn); }

/* Home */
.kicker {
    display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px;
    font-stretch: 100%; font-weight: 750; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.12em;
}
.kicker span { color: var(--accent); }
/* "Jour 29" and "semaine 5" each stay whole: next to the sync button, the second one drops a line instead of breaking. */
.today .kicker { white-space: nowrap; }
.today { position: relative; isolation: isolate; padding: 22px 0 8px; }
/* Screentone behind the watermark, fading out like manga shading */
.today::before {
    content: ""; position: absolute; top: 0; right: -20px; z-index: -2; pointer-events: none;
    width: 45%; height: 200px;
    background-image: radial-gradient(var(--tone) 1.1px, transparent 1.4px); background-size: 6px 6px;
    -webkit-mask-image: radial-gradient(closest-side at 72% 40%, #000, transparent);
    mask-image: radial-gradient(closest-side at 72% 40%, #000, transparent);
}
.today__mark {
    position: absolute; top: 52px; right: -10px; z-index: -1;
    width: 120px; height: 120px; fill: var(--ink); opacity: 0.06;
}
.today__date { color: var(--ink-2); font-size: 0.875rem; margin-top: 2px; }
.today__label { font-weight: 800; margin-top: 16px; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.78rem; }
.today .figure { font-size: clamp(5.4rem, 30vw, 9rem); margin-top: 4px; }
.today__line { margin-top: 12px; font-size: 1.05rem; max-width: 30em; }
.today__line strong { font-weight: 800; }

.weigh { display: flex; gap: 8px; margin-top: 18px; max-width: 360px; }
.weigh-fold { margin-top: 14px; }
.weigh-fold summary { cursor: pointer; width: max-content; font-size: 0.88rem; font-weight: 700; color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.weigh-fold .weigh { margin-top: 10px; }
.weigh input { flex: 1; font-stretch: 75%; font-size: 1.25rem; font-weight: 700; }

/* Next session: an ink panel with speed lines rushing to the go button */
.next-session {
    position: relative; overflow: hidden; isolation: isolate;
    display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px;
    margin: 24px 4px 0 0; padding: 18px 18px 18px 20px; border-radius: var(--radius);
    background: var(--bar); color: var(--bar-ink); text-decoration: none;
    box-shadow: var(--shadow);
}
.next-session::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: repeating-conic-gradient(from 0deg at 92% 50%, rgb(244 241 234 / 0.16) 0 1.4deg, transparent 1.4deg 7deg);
    -webkit-mask-image: linear-gradient(90deg, transparent 20%, #000 75%);
    mask-image: linear-gradient(90deg, transparent 20%, #000 75%);
}
.next-session:active { transform: translateY(1px); }
.next-session__kicker { display: block; font-size: 0.75rem; color: var(--bar-ink-2); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; }
.next-session__name { display: block; text-wrap: balance; font-stretch: 100%; font-weight: 750; font-size: 1.35rem; line-height: 1.1; margin-top: 4px; text-transform: uppercase; }
.next-session__go {
    width: 52px; height: 52px; border-radius: 50%; background: var(--accent); color: var(--on-accent);
    display: grid; place-items: center; border: 3px solid var(--bar-ink);
}

.next-session__sfx {
    position: absolute; right: 64px; top: 50%; z-index: -1; width: 150px; height: 50px;
    transform: translateY(-50%) rotate(-8deg); fill: var(--bar-ink); opacity: 0.12;
}

/* Manga sound effect stamped next to a section title */
.sfx-don {
    width: 74px; height: 32px; margin: -6px auto 0 10px; flex: none;
    fill: var(--accent); transform: rotate(-7deg);
}

/* Nen rank, the four basic principles in learning order */
.rank { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 0 12px; margin-bottom: 14px; }
.rank__label { grid-column: 1 / -1; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-2); }
.rank__name { font-stretch: 100%; font-weight: 750; font-size: 1.9rem; line-height: 1.1; text-transform: uppercase; }
.rank--hatsu .rank__name, .rank--ren .rank__name { color: var(--accent); }
.rank__note { font-size: 0.85rem; color: var(--ink-2); }
.rank__goal { font-size: 0.9rem; margin: -6px 0 12px; }
.ladder { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
.ladder__step {
    display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 8px 10px;
    border: 1.5px dashed var(--rule); border-radius: 6px; color: var(--ink-2);
}
.ladder__step.is-unlocked { border-style: solid; border-color: var(--ink); color: var(--ink); }
.ladder__step.is-current { border-color: var(--accent); border-width: 2.5px; box-shadow: var(--shadow); }
.ladder__state { grid-column: 1 / -1; font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; }
.ladder__step.is-current .ladder__state { color: var(--accent); }
.ladder__name { font-stretch: 100%; font-weight: 750; font-size: 1.15rem; text-transform: uppercase; }
.ladder__need { font-size: 0.8rem; align-self: baseline; text-align: right; }
.ladder__meaning { grid-column: 1 / -1; font-size: 0.82rem; color: var(--ink-2); }
.ladder__how { margin-bottom: 14px; }
.ladder__how summary { font-size: 0.85rem; font-weight: 700; cursor: pointer; }
.ladder__how ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.techs { list-style: none; margin: 8px 0 16px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.tech {
    display: grid; align-content: start; gap: 3px; padding: 9px 11px;
    border: 1.5px dashed var(--rule); border-radius: 6px; color: var(--ink-2);
}
.tech.is-unlocked { border-style: solid; border-color: var(--ink); color: var(--ink); }
.tech.is-new { border-color: var(--accent); border-width: 2.5px; box-shadow: var(--shadow); }
.tech__state { font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; }
.tech.is-new .tech__state { color: var(--accent); }
.tech__name { font-stretch: 100%; font-weight: 750; font-size: 1.15rem; text-transform: uppercase; }
.tech__meaning { font-size: 0.8rem; font-style: italic; color: var(--ink-2); }
.tech__how { font-size: 0.85rem; }
.tech .progress { margin-top: 4px; }
.notif { display: grid; gap: 8px; justify-items: start; margin-bottom: 16px; }
.tech__value { font-size: 0.78rem; color: var(--ink-2); }


/* Body maps */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.body-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-width: 360px; margin: 0 auto; }
.body { width: 100%; height: auto; display: block; }
.body__outline { fill: var(--sheet); stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
.body__m path { fill: var(--paper); stroke: var(--ink); stroke-width: 1.2; stroke-linejoin: round; transition: fill 0.2s; }
a.body__m:hover path, a.body__m:focus-visible path { stroke-width: 2.4; }
.body__m.is-selected path { stroke: var(--accent); stroke-width: 3; }
.body__m.is-primary path, .body__m.lvl-ok path { fill: var(--lvl-3); }
.body__m.is-secondary path, .body__m.lvl-low path { fill: var(--lvl-1); }
.body__m.lvl-mid path { fill: var(--lvl-2); }
.body__m.lvl-high path { fill: var(--lvl-4); }

.legend { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 0.78rem; color: var(--ink-2); }
.legend li { display: inline-flex; align-items: center; gap: 6px; }
.legend__swatch { width: 14px; height: 14px; border: 1px solid var(--line); background: var(--paper); }
.legend__swatch.lvl-low { background: var(--lvl-1); }
.legend__swatch.lvl-mid { background: var(--lvl-2); }
.legend__swatch.lvl-ok { background: var(--lvl-3); }
.legend__swatch.lvl-high { background: var(--lvl-4); }

.week-map { display: block; }
.week-map .body-pair { max-width: 260px; }
.to-train { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.to-train > span { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-2); margin-right: 2px; }
.chip {
    display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px;
    border: 1px solid var(--line); border-radius: 999px; background: var(--sheet);
    font-size: 0.85rem; font-weight: 800; text-decoration: none;
}

.session-summary { display: grid; grid-template-columns: 150px 1fr; gap: 14px; align-items: center; margin: 6px 0 14px; }
.session-summary .body-pair { max-width: none; gap: 4px; }
.session-summary--small { grid-template-columns: 84px 1fr; margin: 4px 0 6px; }
.session-summary--small .session-summary__muscles { font-size: 0.95rem; }
.day { margin-top: 12px; }
.session-summary__label { font-size: 0.7rem; font-weight: 850; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-2); }
.session-summary__muscles { font-weight: 800; font-size: 1.02rem; line-height: 1.3; margin: 2px 0 6px; }
.focus-line { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; margin: 10px 0 6px; font-weight: 700; }
.focus-form { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.muscle-dose { display: flex; align-items: center; gap: 14px; }
.muscle-dose .figure { font-size: 4rem; }

/* Equipment pictograms */
.equip {
    display: inline-grid; place-items: center; flex: none;
    width: 34px; height: 34px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--sheet);
}
.equip .icon { width: 22px; height: 22px; }
.lift.lift--eq { grid-template-columns: auto 1fr auto; column-gap: 12px; }
.lift.lift--eq .equip { grid-row: span 2; align-self: center; }
.lift.lift--eq .lift__rest { grid-column: 2 / -1; }
.lift__dose small { font-size: 0.7em; font-stretch: 100%; color: var(--ink-2); }
.exercise__head h2 { display: flex; align-items: center; gap: 10px; }
.exercise__muscles { font-size: 0.85rem; font-weight: 700; color: var(--accent); margin-top: 6px; }

/* Body fat: the fat layer is a thick stroke behind the lean silhouette */
.fat { display: grid; grid-template-columns: minmax(110px, min(38%, 170px)) 1fr; gap: 18px; align-items: center; margin: 4px 0 14px; }
.fat__body { width: 100%; height: auto; overflow: visible; }
.fat__layer {
    --fat: color-mix(in srgb, var(--accent) 38%, var(--sheet));
    fill: var(--fat); stroke: var(--fat); stroke-linejoin: round;
}
.fat__lean { fill: var(--sheet); stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; }
.fat__side { display: flex; flex-direction: column; gap: 6px; }
.fat__label { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-2); }
.fat__value { font-size: 4.2rem; }
.fat__band { font-stretch: 100%; font-weight: 750; text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent); }
.fat__gauge { position: relative; display: flex; height: 12px; margin: 8px 0 4px; border: 1px solid var(--line); }
.fat__seg { flex: 1; }
.fat__seg + .fat__seg { border-left: 1px solid var(--line); }
.fat__seg--1 { background: var(--ink-2); }
.fat__seg--2 { background: var(--accent); }
.fat__seg--3 { background: color-mix(in srgb, var(--accent) 55%, var(--sheet)); }
.fat__seg--4 { background: var(--accent-soft); }
.fat__seg--5 { background: var(--sheet); }
.fat__marker {
    position: absolute; top: -8px; bottom: -8px; left: 50%; width: 4px; margin-left: -2px;
    background: var(--ink); box-shadow: 0 0 0 2px var(--paper);
}
.fat__from, .fat__source { font-size: 0.82rem; color: var(--ink-2); }
.fat [data-fat-replay] { align-self: flex-start; font-size: 0.85rem; }

/* Sync: runs the iOS Shortcut and comes back */
.today__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.sync {
    display: inline-grid; grid-template-columns: auto auto; align-items: center; gap: 0 6px; flex: none;
    padding: 7px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--sheet);
    box-shadow: var(--shadow); text-decoration: none; font-weight: 850; font-size: 0.82rem;
    text-transform: uppercase; letter-spacing: 0.05em;
}
.sync small { grid-column: 1 / -1; font-size: 0.68rem; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--ink-2); }
.sync:active { transform: translateY(1px); }
.sync--off { box-shadow: none; border-style: dashed; }
.figure--hero { font-variant-numeric: proportional-nums; }

/* Stat tiles: manga panels in a 2-column grid */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-right: 4px; }
.tile {
    position: relative; display: flex; flex-direction: column; gap: 2px; min-width: 0;
    padding: 12px 14px 12px; border: 1.5px solid var(--rule); border-radius: var(--radius);
    background: var(--sheet); text-decoration: none;
}
.tile:active { transform: translateY(1px); }
.tile__label { font-size: 0.68rem; font-weight: 850; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-2); }
.tile__value { font-stretch: 62%; font-weight: 750; font-size: 2.3rem; line-height: 1; font-variant-numeric: proportional-nums; margin-top: 2px; }
.tile__value small { font-size: 0.85rem; font-stretch: 100%; font-weight: 600; color: var(--ink-2); margin-left: 3px; }
.tile__delta { font-size: 0.74rem; font-weight: 700; color: var(--ink-2); min-height: 1.2em; }
.tile__delta.is-good { color: var(--good); }
.tile__delta.is-bad { color: var(--warn); }
.tile .spark, .tile .cols { width: 100%; height: 36px; margin-top: auto; padding-top: 6px; }
.tile__meter { margin-top: auto; }
.tile__value small { white-space: nowrap; }
.empty-line { margin-top: 10px; padding: 12px 14px; border: 2px dashed var(--rule); color: var(--ink-2); font-size: 0.92rem; }
.empty-line a { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; color: var(--ink); }
.spark__line { fill: none; stroke: var(--ink-2); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.spark__last { fill: var(--accent); stroke: var(--sheet); stroke-width: 2; }
.cols__bar { fill: var(--ink-2); }
.cols__bar.is-now { fill: var(--accent); }
.cols__none { fill: var(--rule); }
.cols__goal { stroke: var(--ink); stroke-width: 1; }

/* Weekly sets per muscle */
.muscles-week { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 12px; align-items: center; margin-top: 8px; }
.muscles-week .week-map .body-pair { max-width: none; }
.mbars { width: 100%; height: auto; display: block; }
.mbars__zone { fill: var(--rule); opacity: 0.55; }
.mbars__label { fill: var(--ink); font-size: 12px; font-weight: 700; font-family: inherit; }
.mbars__value { fill: var(--ink-2); font-size: 12px; font-weight: 800; font-family: inherit; }
.mbars__axis { fill: var(--ink-2); font-size: 10px; font-family: inherit; }
.mbars__bar.lvl-low { fill: var(--lvl-1); }
.mbars__bar.lvl-mid { fill: var(--lvl-2); }
.mbars__bar.lvl-ok { fill: var(--lvl-3); }
.mbars__bar.lvl-high { fill: var(--lvl-4); }
@media (max-width: 420px) {
    .muscles-week { grid-template-columns: 1fr; }
    .muscles-week .week-map .body-pair { max-width: 220px; }
}


/* Photo shooting guide (Bilan) */
.photo-guide { margin: 4px 4px 16px 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--sheet); box-shadow: var(--shadow); }
.photo-guide summary { cursor: pointer; font-stretch: 100%; font-weight: 850; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.9rem; }
.photo-guide[open] summary { margin-bottom: 10px; }
.photo-guide__lede { font-weight: 700; margin-bottom: 10px; }
.photo-guide__steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 0.92rem; }
.photo-guide__steps li::marker { color: var(--accent); font-weight: 850; }
.photo-guide__poses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 14px 0 10px; }
.photo-guide__poses div { display: flex; flex-direction: column; gap: 4px; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius); font-size: 0.8rem; }
.photo-guide__poses strong { font-stretch: 100%; font-weight: 850; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); }
@media (max-width: 420px) { .photo-guide__poses { grid-template-columns: 1fr; } }

/* Program: typical session and sources */
.plan-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.plan-steps li::marker { color: var(--accent); font-weight: 850; }
.sources ul { margin: 8px 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.sources a { color: var(--ink); }

/* Programme: sessions by group, swiped on mobile */
.group-tabs { display: flex; gap: 6px; margin-top: 22px; }
.group-tabs button {
    flex: 1; min-height: 46px; padding: 6px 8px; border: 2px solid var(--rule); border-radius: var(--radius);
    background: transparent; color: var(--ink); font: inherit; font-size: 0.88rem; font-weight: 800; cursor: pointer;
}
.group-tabs button span { margin-left: 6px; font-weight: 600; color: var(--ink-2); }
.group-tabs button[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); box-shadow: var(--shadow); }
.group-tabs button[aria-selected="true"] span { color: inherit; opacity: 0.8; }
.group-tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.day-group__title { display: none; }
.swipe-dots { display: flex; justify-content: center; gap: 6px; margin: 10px 0 4px; }
.swipe-dots span { width: 8px; height: 8px; border-radius: 4px; background: var(--ink-2); opacity: 0.45; transition: width 0.2s, background 0.2s; }
.swipe-dots span.is-current { width: 22px; background: var(--accent); opacity: 1; }
@media (max-width: 959px) {
    .day-group:not(.is-active) { display: none; }
    .day-group .days {
        display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
        margin: 0 -20px; padding: 14px 20px 6px; scroll-padding: 0 20px; scrollbar-width: none;
    }
    .day-group .days::-webkit-scrollbar { display: none; }
    .day-group .day {
        flex: 0 0 86%; scroll-snap-align: start; margin-top: 0; padding: 0 14px 10px;
        border: 1px solid var(--line); border-radius: var(--radius); background: var(--sheet);
    }
    .day-group .day:only-child { flex-basis: 100%; }
    .day-group .day .sheet__head { border-top: 0; margin: 0 -14px 12px; }
}
@media (prefers-reduced-motion: reduce) { .swipe-dots span { transition: none; } }

/* Replace an exercise (workout) */
.swap { margin-top: 10px; font-size: 0.85rem; }
.swap summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: var(--ink-2); font-weight: 700; list-style: none; }
.swap summary::-webkit-details-marker { display: none; }
.swap[open] summary { color: var(--ink); }
.swap__state { margin: 8px 0 4px; }
.swap__list { list-style: none; margin: 6px 0 0; padding: 0; }
.swap__list li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--rule); }
.swap__list li:last-child { border-bottom: 0; }
.swap__pick { flex: 1; display: flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ink); text-decoration: none; }
.swap__pick span { display: flex; flex-direction: column; gap: 1px; }
.swap__pick small { color: var(--ink-2); font-size: 0.78rem; }
.swap__pick:hover strong { text-decoration: underline; text-decoration-color: var(--accent); }

/* Machine settings and guided strength test (workout) */
.machine { margin-top: 10px; font-size: 0.85rem; }
.machine summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: var(--ink-2); font-weight: 700; list-style: none; }
.machine summary::-webkit-details-marker { display: none; }
.machine[open] summary { color: var(--ink); }
.machine__fields { display: grid; grid-template-columns: 1fr 96px; gap: 10px; margin: 8px 0 4px; }
.strength-test { margin-top: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--sheet); }
.strength-test__title { font-weight: 850; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.78rem; color: var(--accent); }
.strength-test__steps { margin: 8px 0 6px; padding-left: 20px; font-size: 0.88rem; display: flex; flex-direction: column; gap: 4px; }
.strength-test .sets { margin-top: 8px; }
.strength-test__result { margin-top: 8px; font-weight: 800; font-size: 0.92rem; }
.sets__title { margin-top: 14px; font-size: 0.7rem; font-weight: 850; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-2); }

/* Food log */
.day-nav { display: flex; align-items: center; gap: 12px; font-weight: 800; }
.day-nav a { text-decoration: none; font-size: 1.2rem; padding: 4px 8px; border: 1px solid var(--line); border-radius: var(--radius); line-height: 1; }
.day-total__kcal { display: flex; align-items: baseline; gap: 8px; }
.day-total__kcal .figure { font-size: 3.6rem; font-variant-numeric: proportional-nums; }
.day-total__kcal small { color: var(--ink-2); font-weight: 700; }
.day-total__left { font-weight: 700; margin: 2px 0 8px; }
.macro-bars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 14px 0 8px; }
.macro-bars div { display: flex; flex-direction: column; gap: 2px; }
.macro-bars__label { font-size: 0.7rem; font-weight: 850; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-2); }
.macro-bars__value { font-stretch: 62%; font-weight: 850; font-size: 1.4rem; }
.macro-bars__value small { font-stretch: 100%; font-size: 0.72rem; font-weight: 600; color: var(--ink-2); }
.segmented--small span { min-height: 40px; padding: 6px 4px; font-size: 0.78rem; }
.picker { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.picker__bar { display: grid; grid-template-columns: 1fr auto; grid-auto-flow: column; gap: 8px; }
.picker__scan { min-height: 48px; padding: 0 12px; }
.picker__scan span { font-size: 0.8rem; }
@media (max-width: 480px) { .picker__scan { padding: 0 14px; } .picker__scan span { display: none; } }
/* With Photo and Décrire: the search gets the whole line, the three ways in share the next one. */
.picker__bar:has(> :nth-child(3)) { grid-template-columns: repeat(3, 1fr); grid-auto-flow: row; }
.picker__bar:has(> :nth-child(3)) > input { grid-column: 1 / -1; }
.picker__bar:has(> :nth-child(3)) .picker__scan { justify-content: center; gap: 6px; padding: 0 8px; }
.picker__bar:has(> :nth-child(3)) .picker__scan span { display: inline; }
.picker__recent { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
/* On a phone the recent foods are one swipeable line, not eight lines pushing the tools down. */
@media (max-width: 600px) {
    .picker__recent { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; margin-right: -20px; padding-right: 20px; }
    .picker__recent::-webkit-scrollbar { display: none; }
    .picker__recent > * { flex: none; }
}
.picker__recent > span { font-size: 0.7rem; font-weight: 850; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-2); margin-right: 4px; }
.picker__recent .chip, .picker__quick .chip { cursor: pointer; font: inherit; font-size: 0.8rem; font-weight: 800; color: var(--ink); }
.copy-meals { margin: 16px 0 14px; padding-top: 12px; border-top: 1px solid var(--rule); }
.copy-meals__title { margin: 0 0 6px; font-size: 0.7rem; font-weight: 850; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-2); }
.copy-meals__list { display: flex; flex-wrap: wrap; gap: 8px; }
.copy-meals__btn { min-height: 44px; gap: 6px; cursor: pointer; font: inherit; font-size: 0.85rem; font-weight: 800; color: var(--ink); }
.copy-meals__btn small { font-weight: 600; color: var(--ink-2); }
.picker__results { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-top: 1px solid var(--rule); }
.picker__results:empty { display: none; }
.picker__results button:not(.btn) {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: 10px 2px;
    background: none; border: 0; border-bottom: 1px solid var(--rule); color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
.picker__results button:not(.btn):hover { background: var(--accent-soft); }
.picker__results small { color: var(--ink-2); font-size: 0.78rem; }
.picker__chosen { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--sheet); display: flex; flex-direction: column; gap: 10px; }
.picker__quick { display: flex; flex-wrap: wrap; gap: 6px; }
.picker__preview { font-weight: 700; font-size: 0.88rem; }
.picker__source { margin: -6px 0 0; color: var(--ink-2); font-size: 0.78rem; }
.picker__source:empty { display: none; }
.picker__results .picker__brands { color: var(--accent); }
.picker__results .picker__brands span { font-weight: 800; }
.scanner { position: fixed; inset: 0; z-index: 60; background: #000; color: #fff; display: flex; flex-direction: column; }
.scanner video { flex: 1; width: 100%; object-fit: cover; min-height: 0; }
.scanner__frame { position: absolute; left: 10%; right: 10%; top: 38%; height: 20%; border: 3px solid var(--accent); border-radius: 6px; box-shadow: 0 0 0 999px rgb(0 0 0 / 0.35); pointer-events: none; }
.scanner__hint { position: absolute; left: 0; right: 0; top: calc(38% - 40px); text-align: center; font-weight: 800; }
.scanner__bar { display: flex; gap: 12px; align-items: center; padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); background: #000; }
.scanner__bar button { background: none; border: 2px solid #fff; color: #fff; font: inherit; font-weight: 800; padding: 8px 12px; border-radius: var(--radius); cursor: pointer; }
.scanner__manual { display: flex; gap: 8px; flex: 1; }
.scanner__manual input { flex: 1; min-height: 40px; background: #111; color: #fff; border-color: #444; }
body.is-scanning { overflow: hidden; }
.dish-list .dish, .picker__results .dish { display: grid; grid-template-columns: 1fr 64px auto; grid-template-rows: auto auto; gap: 2px 8px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.dish__name { font-weight: 800; }
.picker__results .dish--hit { padding: 10px 8px; background: var(--accent-soft); }
.dish-more { margin-top: 8px; }
.dish-more summary { cursor: pointer; padding: 10px 0; font-weight: 800; color: var(--ink-2); }
.dish .muted { grid-column: 1; font-size: 0.8rem; }
.dish input { grid-column: 2; grid-row: 1 / span 2; min-height: 40px; text-align: center; }
.dish .btn { grid-column: 3; grid-row: 1 / span 2; min-height: 40px; padding: 0 14px; }
.meal-row { display: grid; grid-template-columns: 1fr auto auto; gap: 2px 10px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.meal-row:last-child { border-bottom: 0; }
.meal-row__label { font-weight: 700; }
.meal-row__kcal { font-stretch: 62%; font-weight: 850; font-size: 1.25rem; text-align: right; }
.meal-row__kcal small { font-size: 0.7rem; font-stretch: 100%; color: var(--ink-2); margin-left: 2px; }
.meal-row__detail { grid-column: 1 / 3; font-size: 0.78rem; color: var(--ink-2); }
.meal-row .inline-form { grid-column: 3; grid-row: 1; margin: 0; }
.recipe-head { display: grid; grid-template-columns: 1fr 90px auto; gap: 10px; align-items: end; }
.recipe-portion { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-top: 14px; }
.recipe-portion .figure { font-size: 2.6rem; }
.sources-line { margin-top: 16px; }
.recipe-delete { margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--rule); }
@media (max-width: 420px) { .recipe-head { grid-template-columns: 1fr 80px; } .recipe-head .btn { grid-column: 1 / -1; } }

/* Reminder and chapter card (weekly report) */
.reminder {
    display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; margin: 12px 0 0;
    padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--accent-soft);
    text-decoration: none; font-size: 0.9rem;
}
.reminder .icon { color: var(--accent); }
.chapter-card {
    position: relative; display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center;
    margin: 14px 4px 0 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--sheet); box-shadow: var(--shadow); text-decoration: none; overflow: hidden; isolation: isolate;
}
.chapter-card::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background-image: radial-gradient(var(--tone) 1.1px, transparent 1.4px); background-size: 6px 6px;
    -webkit-mask-image: linear-gradient(90deg, transparent 40%, #000); mask-image: linear-gradient(90deg, transparent 40%, #000);
}
.chapter-card__kicker { font-size: 0.7rem; font-weight: 850; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-2); }
.chapter-card__title { grid-column: 1; font-stretch: 100%; font-weight: 750; font-size: 1.3rem; text-transform: uppercase; line-height: 1.1; }
.chapter-card--ok .chapter-card__title { color: var(--accent); }
.chapter-card__line { grid-column: 1; font-size: 0.85rem; color: var(--ink-2); }
.chapter-card__go { grid-column: 2; grid-row: 1 / span 3; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--paper); }
.chapter-nav { display: flex; justify-content: space-between; padding: 14px 0 0; font-size: 0.85rem; font-weight: 800; }
.chapter-nav a { text-decoration: none; color: var(--ink-2); }
.chapter { position: relative; padding: 14px 0 4px; }
.chapter h1 { font-size: clamp(2rem, 9vw, 2.8rem); margin-top: 6px; }
.chapter--ok h1 { color: var(--accent); }
.chapter__sfx { position: absolute; right: 0; top: 10px; width: 96px; height: 42px; fill: var(--accent); transform: rotate(-8deg); }
.tile--static { box-shadow: none; }
.shortcut-name { margin-bottom: 14px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }

/* Records: each one bursts out of speed lines */
.records { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.record {
    position: relative; overflow: hidden; isolation: isolate;
    display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 12px;
    padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--sheet); box-shadow: var(--shadow);
}
.record::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: repeating-conic-gradient(from 0deg at 100% 50%, var(--tone) 0 1.2deg, transparent 1.2deg 5deg);
    -webkit-mask-image: linear-gradient(90deg, transparent 35%, #000);
    mask-image: linear-gradient(90deg, transparent 35%, #000);
}
.record__name { font-weight: 800; }
.record__value { font-stretch: 62%; font-weight: 750; font-size: 1.9rem; line-height: 1; text-align: right; }
.record__value small { font-size: 0.8rem; font-stretch: 100%; font-weight: 600; color: var(--ink-2); margin-left: 2px; }
.record__gain { grid-column: 1 / -1; font-size: 0.82rem; color: var(--accent); font-weight: 700; }

.progress { height: 8px; background: var(--rule); border-radius: 0; overflow: hidden; margin-top: 8px; }
progress.progress { width: 100%; appearance: none; border: 0; display: block; }
progress.progress::-webkit-progress-bar { background: var(--rule); }
progress.progress::-webkit-progress-value { background: var(--accent); }
progress.progress::-moz-progress-bar { background: var(--accent); }

.plate { display: grid; grid-template-columns: auto 1fr; gap: 6px 24px; align-items: end; }
.plate .figure { font-size: 3.6rem; }
.macros { display: flex; gap: 20px; flex-wrap: wrap; font-size: 0.95rem; }
.macros b { font-stretch: 75%; font-weight: 650; font-size: 1.35rem; display: block; line-height: 1.1; }
.macros span { color: var(--ink-2); font-size: 0.8rem; }

.advice {
    display: flex; flex-direction: column; gap: 10px; margin-right: 4px;
    padding: 16px; border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--sheet); box-shadow: var(--shadow);
}
.advice h3 { font-size: 1.1rem; font-stretch: 100%; font-weight: 850; }

.weeks { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; align-items: end; }
.weeks__col { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.weeks__bar { width: 100%; display: flex; flex-direction: column-reverse; gap: 3px; }
/* Fixed-height ticks: a week with bonus sessions stands taller than the goal line. */
.weeks__tick { height: 11px; border-radius: 0; background: var(--rule); flex: none; }
.weeks__tick.is-done { background: var(--ink); }
.weeks__col--now .weeks__tick:not(.is-done):not(.is-extra) { background: transparent; outline: 1.5px dashed var(--rule); outline-offset: -1.5px; }
/* A bonus session: red screentone, set apart from the goal's solid ticks. */
.weeks__tick.is-extra, .bento__ticks span.is-extra {
    background: repeating-linear-gradient(-45deg, var(--accent) 0 2px, transparent 2px 5px); outline: 1.5px solid var(--accent); outline-offset: -1.5px;
}
.weeks__legend { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; font-size: 0.78rem; color: var(--ink-2); }
.weeks__legend .weeks__tick { width: 18px; flex: none; }
.is-bonus { color: var(--accent); font-weight: 850; }
.tile__value .is-bonus { font-size: 0.55em; vertical-align: super; }
.chapter__bonus {
    display: inline-block; margin: 8px 0 0; padding: 3px 10px; border: 2px solid var(--accent); color: var(--accent);
    font-weight: 750; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; transform: rotate(-3deg);
}
.weeks__label { font-size: 0.72rem; color: var(--ink-2); }

.segment-tabs { display: inline-flex; gap: 14px; font-size: 0.85rem; }
.segment-tabs button {
    border: 0; background: none; padding: 2px 0; font: inherit; color: var(--ink-2); cursor: pointer;
    border-bottom: 2px solid transparent;
}
.segment-tabs button[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--accent); font-weight: 700; }
/* Charts: hairline solid grid, 2px line, 10% area wash, one accent series */
.chart { position: relative; margin-top: 8px; touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart { min-height: 40px; }
.chart:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.chart .grid { stroke: var(--rule); stroke-width: 1; }
.chart .axis { fill: var(--ink-2); font-size: 11px; font-family: inherit; font-variant-numeric: tabular-nums; }
.chart .raw { fill: var(--ink-2); opacity: 0.55; }
.chart .line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .area { fill: var(--accent); opacity: 0.1; }
.chart .last { fill: var(--accent); stroke: var(--sheet); stroke-width: 2; }
.chart .end-label { fill: var(--ink); font-size: 12px; font-weight: 800; font-family: inherit; }
.chart .bar { fill: var(--ink-2); }
.chart .bar.is-now { fill: var(--accent); }
.chart .bar.is-hit { fill: var(--ink); }
.chart .bar.is-now.is-hit { fill: var(--accent-deep); }
.chart .none { fill: var(--rule); }
.chart .goal { stroke: var(--ink); stroke-width: 1; }
.chart .cross { stroke: var(--ink); stroke-width: 1; }
.chart .hit { fill: transparent; }
.tip {
    position: absolute; top: 0; z-index: 5; pointer-events: none; transform: translateX(-50%);
    padding: 6px 10px; background: var(--bar); color: var(--bar-ink); border: 2px solid var(--bar);
    box-shadow: var(--shadow); font-size: 0.8rem; line-height: 1.3; white-space: nowrap;
}
.tip strong { display: block; font-size: 1.05rem; font-stretch: 75%; font-weight: 850; }
.tip span { color: var(--bar-ink-2); }
.chart-controls { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; margin-top: 18px; }
.chart-title { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin: 26px 0 0; font-size: 1.05rem; font-stretch: 100%; font-weight: 850; }
.chart-title small { font-size: 0.75rem; font-stretch: 100%; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--ink-2); }
.chart-title .sfx-don { margin: -8px 0 0; }
.data-table { margin-top: 10px; font-size: 0.85rem; }
.data-table summary { cursor: pointer; color: var(--ink-2); font-weight: 700; width: max-content; }
.data-table[open] summary { margin-bottom: 6px; }
.data-table .table-wrap { max-height: 280px; overflow: auto; }

/* Notices */
.notice { padding: 12px 14px; margin: 12px 0; border-radius: var(--radius); background: var(--sheet); border: 1px solid var(--rule); font-size: 0.95rem; }
.notice ul { margin: 0; padding-left: 18px; }
.notice--ok { border-color: var(--good); }
.notice--warn { border-color: var(--warn); }
.notice--err { border-color: var(--bad); color: var(--bad); }
.notice a { font-weight: 700; }

/* Buttons */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 48px; padding: 0 20px; border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--ink); color: var(--paper);
    font: inherit; font-weight: 850; font-stretch: 100%; text-transform: uppercase; letter-spacing: 0.04em;
    text-decoration: none; cursor: pointer;
}
.btn:active { transform: translate(2px, 2px); }
.btn--accent { background: var(--accent); border-color: var(--accent); color: var(--on-accent); box-shadow: var(--shadow); }
.btn--accent:active { box-shadow: var(--shadow); }
.btn--line { background: transparent; color: var(--ink); }
.btn--block { width: 100%; min-height: 56px; font-size: 1.05rem; }
.btn[disabled] { opacity: 0.55; }
.linkbtn {
    display: inline-flex; align-items: center; gap: 6px;
    background: none; border: 0; padding: 0; font: inherit; font-size: 0.9rem; cursor: pointer;
    color: inherit; text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px;
}
.linkbtn--danger { color: var(--bad); text-decoration-color: currentColor; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* Forms */
.field { display: flex; flex-direction: column; gap: 6px; border: 0; padding: 0; margin: 0; min-width: 0; }
.field > span, .field > legend { font-size: 0.85rem; font-weight: 600; padding: 0; }
.field small { color: var(--ink-2); font-size: 0.8rem; }
.field--inline { flex-direction: row; align-items: center; gap: 12px; }
.field--inline input { width: auto; }
input:not([type=radio]):not([type=range]):not([type=file]), select, textarea {
    width: 100%; min-height: 48px; padding: 10px 12px;
    background: var(--sheet); color: var(--ink);
    border: 1.5px solid var(--rule); border-radius: var(--radius);
    font: inherit; font-size: 16px;
}
input:focus, select:focus, textarea:focus { border-color: var(--ink); }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible {
    outline: 2px solid var(--accent); outline-offset: 2px;
}
input::placeholder { color: var(--ink-2); opacity: 0.7; }
input[type=file] { font: inherit; font-size: 0.85rem; color: var(--ink-2); max-width: 100%; }
input[type=file]::file-selector-button {
    margin-right: 10px; padding: 8px 14px; border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--sheet); color: var(--ink); font: inherit; font-weight: 850; text-transform: uppercase;
    letter-spacing: 0.04em; font-size: 0.78rem; box-shadow: var(--shadow); cursor: pointer;
}
fieldset.form-part { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }

.segmented { display: flex; gap: 6px; }
.segmented label, .choices label { flex: 1; position: relative; }
.segmented input, .choices input { position: absolute; opacity: 0; }
.segmented span, .choices span {
    display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 8px 12px;
    background: var(--sheet); border: 1.5px solid var(--rule); border-radius: var(--radius);
    font-weight: 700; cursor: pointer; text-align: center;
}
.choices { display: flex; flex-direction: column; gap: 6px; }
.choices--grid { display: grid; grid-template-columns: 1fr 1fr; }
.inline-form { display: inline; margin-left: 8px; }
.visits { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.visit { padding: 14px 0; border-bottom: 1px solid var(--rule); }
.visit:last-child { border-bottom: 0; }
.visit__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.visit__date { font-weight: 800; }
.visit__total { font-stretch: 62%; font-weight: 850; font-size: 1.5rem; line-height: 1; }
.visit__total small { font-size: 0.8rem; font-stretch: 100%; font-weight: 600; color: var(--ink-2); margin-left: 2px; }
.visit__line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 4px; font-size: 0.85rem; color: var(--ink-2); }
.visit__hr { display: inline-flex; align-items: center; gap: 4px; color: var(--ink); font-weight: 700; }
.visit__hr .icon { color: var(--accent); }
.visit__note { list-style: none; margin: 10px 0 0; padding: 8px 0 8px 12px; border-left: 3px solid var(--accent); display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; line-height: 1.4; color: var(--ink-2); }
.visit__machines { list-style: none; margin: 8px 0 0; padding: 0; font-size: 0.85rem; }
.visit__machines li { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; padding: 3px 0; }
.visit__machines .inline-form { margin: 0; }
.flag.flag--soft { background: var(--accent-soft); color: var(--ink); }
.choices span { justify-content: flex-start; text-align: left; }
.choices--described span { flex-direction: column; align-items: flex-start; gap: 2px; padding-top: 10px; padding-bottom: 10px; }
.choices--described small { display: block; font-weight: 500; font-size: 0.8rem; line-height: 1.35; color: var(--ink-2); }
.choices--described input:checked + span small { color: var(--on-accent); }
.pair { display: inline-block; margin-right: 6px; padding: 0 5px; border: 2px solid var(--accent); border-radius: 4px; color: var(--accent); font-size: 0.8rem; font-weight: 850; vertical-align: 2px; }
.express-note { margin: 4px 0 12px; font-size: 0.9rem; }
.segmented input:checked + span, .choices input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--on-accent); box-shadow: var(--shadow); }
.segmented input:focus-visible + span, .choices input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Auth */
.auth { max-width: 380px; margin: 12vh auto 0; display: flex; flex-direction: column; gap: 18px; }
.auth__brand {
    display: flex; align-items: center; gap: 16px;
    font-size: 3.4rem; font-stretch: 100%; font-weight: 750; letter-spacing: 0.12em; text-transform: uppercase;
}
.auth__brand .seal { width: 64px; height: 64px; border-radius: 5px; box-shadow: var(--shadow); }
.auth__brand .seal img { width: 100%; height: 100%; border-radius: 5px; }
.checks { list-style: none; padding: 0; margin: 0; font-size: 0.9rem; }
.checks .is-ok { color: var(--good); }
.checks .is-ko { color: var(--bad); }

/* Tables */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.table th, .table td { padding: 10px 10px 10px 0; text-align: left; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.table th { color: var(--ink-2); font-weight: 700; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; }
.table td.num, .table th.num { text-align: right; }
.table tr:last-child td { border-bottom: 0; }

/* Program */
.day { padding: 4px 0 8px; }
.day__meta { color: var(--ink-2); font-size: 0.85rem; }
.lift { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.lift:last-of-type { border-bottom: 0; }
.lift__name { font-weight: 600; }
.lift__dose { font-stretch: 62%; font-weight: 850; font-size: 1.25rem; text-align: right; }
.lift__rest { grid-column: 1 / -1; color: var(--ink-2); font-size: 0.82rem; }
.flag { font-size: 0.7rem; font-weight: 850; text-transform: uppercase; letter-spacing: 0.08em; background: var(--accent); color: var(--on-accent); padding: 2px 6px; }
.rules { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; }
.rules li::marker { color: var(--accent); }

/* Workout */
.day-switch { display: flex; gap: 18px; overflow-x: auto; padding: 4px 0 10px; scrollbar-width: none; font-size: 0.9rem; }
.day-switch a { flex: none; color: var(--ink-2); text-decoration: none; padding-bottom: 3px; border-bottom: 2px solid transparent; }
.day-switch a[aria-current] { color: var(--ink); border-bottom-color: var(--accent); font-weight: 800; }

.exercise { padding: 18px 0 8px; border-top: 1px solid var(--line); }
.exercise + .exercise { margin-top: 10px; }
.exercise__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.exercise__head h2 { font-size: 1.1rem; font-stretch: 100%; font-weight: 850; }
.exercise__dose { font-stretch: 62%; font-weight: 850; font-size: 1.15rem; white-space: nowrap; }
.exercise__last { color: var(--ink-2); font-size: 0.85rem; margin-top: 4px; }
.exercise__tip { font-size: 0.9rem; margin-top: 8px; padding-left: 10px; border-left: 3px solid var(--accent); font-weight: 600; }

.sets { margin-top: 12px; }
.sets__head, .sets__row { display: grid; grid-template-columns: 30px 1fr 1fr 52px; gap: 8px; align-items: center; }
.sets__head { color: var(--ink-2); font-size: 0.75rem; font-weight: 600; padding-bottom: 4px; }
.sets__row { padding: 5px 0; }
.sets__no { font-stretch: 75%; font-weight: 700; color: var(--ink-2); font-size: 1.1rem; }
.sets__row input { text-align: center; font-stretch: 62%; font-size: 1.35rem !important; font-weight: 800; }
.set-done {
    height: 48px; border-radius: var(--radius); border: 2px solid var(--rule); background: transparent;
    color: var(--ink-2); display: grid; place-items: center; cursor: pointer;
}
.sets__row.is-done input { background: transparent; border-color: transparent; color: var(--ink-2); }
.sets__row.is-done .set-done { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

.draft-note { font-size: 0.85rem; color: var(--ink-2); margin: 10px 0 14px; }
form[data-workout] > .field--inline { margin-bottom: 10px; }

.timer {
    position: fixed; left: 0; right: 0; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); z-index: 19;
    background: var(--accent); color: var(--on-accent);
    background-image: radial-gradient(rgb(0 0 0 / 0.16) 1.1px, transparent 1.4px); background-size: 6px 6px;
    border-top: 3px solid var(--bar);
    display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px;
    padding: 10px 20px;
}
.timer__time { font-stretch: 62%; font-weight: 750; font-size: 2.6rem; line-height: 1; }
.timer__label { font-size: 0.8rem; opacity: 0.85; }
.timer__actions { display: flex; gap: 6px; }
.timer__actions button {
    min-width: 48px; height: 44px; border-radius: var(--radius); border: 1.5px solid currentColor;
    background: transparent; color: inherit; font: inherit; font-weight: 700; cursor: pointer;
}
.timer.is-over { background-color: var(--bar); color: var(--bar-ink); }

/* Photos */
.shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.shot { display: flex; flex-direction: column; gap: 6px; }
.shot__frame {
    position: relative; aspect-ratio: 3 / 4; border-radius: var(--radius); overflow: hidden;
    background: var(--sheet); border: 2px dashed var(--rule);
    display: grid; place-items: center; color: var(--ink-2);
}
.shot__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.shot__name { font-weight: 800; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; }
.shot__buttons { display: flex; flex-direction: column; gap: 4px; }
.shot__buttons label, .shot__buttons button { font-size: 0.82rem; }
.shot__file { position: relative; overflow: hidden; }
.shot__file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

.album { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.album a, .album div { position: relative; aspect-ratio: 3 / 4; border-radius: 4px; overflow: hidden; background: var(--sheet); }
.album img { width: 100%; height: 100%; object-fit: cover; }
.album div { border: 1px dashed var(--rule); }

.camera {
    position: fixed; inset: 0; z-index: 50; background: #000; color: #fff;
    display: flex; flex-direction: column;
}
.camera__view { position: relative; flex: 1; overflow: hidden; }
.camera__view video, .camera__ghost { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.camera__ghost { opacity: 0.35; pointer-events: none; }
.camera__guide { position: absolute; inset: 0; pointer-events: none; }
.camera__guide::before, .camera__guide::after { content: ""; position: absolute; background: rgb(255 255 255 / 0.35); }
.camera__guide::before { left: 50%; top: 0; bottom: 0; width: 1px; }
.camera__guide::after { top: 50%; left: 0; right: 0; height: 1px; }
.camera__count {
    position: absolute; inset: 0; display: grid; place-items: center;
    font-stretch: 62%; font-weight: 700; font-size: 9rem; text-shadow: 0 2px 20px rgb(0 0 0 / 0.5);
}
.camera__bar {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
    padding: 16px 20px calc(16px + env(safe-area-inset-bottom));
}
.camera__bar button { background: none; border: 0; color: #fff; font: inherit; font-size: 0.95rem; cursor: pointer; }
.camera__shutter { width: 72px; height: 72px; border-radius: 50%; border: 4px solid #fff !important; background: rgb(255 255 255 / 0.15) !important; }
.camera__right { display: flex; justify-content: flex-end; gap: 16px; }
.camera__bar [aria-pressed="true"] { color: #ff5a45; }

.compare-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 8px 0 16px; }
.compare-form .field:first-child { grid-column: 1 / -1; }
.compare {
    --pos: 50%;
    position: relative; aspect-ratio: 3 / 4; max-height: 76vh; margin: 0 auto;
    border-radius: var(--radius); overflow: hidden; background: var(--sheet); touch-action: pan-y;
}
.compare img, .compare__before { position: absolute; inset: 0; width: 100%; height: 100%; }
.compare img { object-fit: cover; }
.compare__before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.compare__handle {
    position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px;
    background: #fff; pointer-events: none;
}
.compare__handle::after {
    content: ""; position: absolute; top: 50%; left: 50%; width: 36px; height: 36px; margin: -18px 0 0 -18px;
    border-radius: 50%; background: var(--accent); border: 3px solid #fff;
}
.compare__tag {
    position: absolute; bottom: 10px; padding: 3px 10px; border-radius: 0; font-size: 0.72rem; font-weight: 850;
    text-transform: uppercase; letter-spacing: 0.08em;
    background: var(--bar); color: var(--bar-ink); pointer-events: none;
}
.compare__tag--before { left: 10px; }
.compare__tag--after { right: 10px; }
.compare input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }

.log summary { display: flex; justify-content: space-between; gap: 8px; cursor: pointer; padding: 12px 0; font-weight: 600; list-style: none; border-bottom: 1px solid var(--rule); }
.log summary::-webkit-details-marker { display: none; }
.log[open] summary { border-bottom: 0; }
.log__list { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 0.9rem; }
.log__list li { display: flex; justify-content: space-between; gap: 12px; }
.log__list span { color: var(--ink-2); text-align: right; }

.empty { padding: 48px 0; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }

@media (max-width: 380px) {
    .grid-2 { grid-template-columns: 1fr; }
    .container, .masthead { padding-left: 16px; padding-right: 16px; }
}

/* Dashboard: two columns on a wide screen. On a phone the columns dissolve and order keeps the reading sequence. */
.dash { display: flex; flex-direction: column; }
.dash__col { display: contents; }
.dash .today { order: 1; }
.dash #jour { order: 2; }
.dash #advice { order: 4; }
.dash #corps { order: 5; }
.dash #activite, .dash #coeur { order: 6; }
.dash #entrainement { order: 7; }

/* Wide screens: navigation in the masthead, wider pages, two columns where it helps reading. */
@media (min-width: 960px) {
    body.has-tabbar { padding-bottom: 48px; }
    .tabbar, .timer { bottom: 0; }
    .tabbar { display: none; }
    .masthead { gap: 28px; padding-inline: max(20px, calc((100% - 1080px) / 2)); }
    .masthead__main { display: flex; gap: 22px; margin-right: auto; font-size: 0.9rem; font-weight: 700; }
    .masthead__main a { color: var(--bar-ink-2); text-decoration: none; padding: 4px 0; }
    .masthead__main a:hover { color: var(--bar-ink); }
    .masthead__main a[aria-current] { color: var(--bar-ink); box-shadow: inset 0 -3px 0 var(--accent); }
    .container--wide { max-width: 1120px; }

    .dash { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 0 48px; align-items: start; }
    .dash__col { display: flex; flex-direction: column; min-width: 0; }
    .dash .today__mark { right: 0; }

    .days { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; align-items: start; }
    .group-tabs, .swipe-dots { display: none; }
    .day-group__title { display: block; margin-top: 30px; font-size: 0.78rem; font-weight: 850; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-2); }
    .days .day { margin-top: 12px; }
    .muscles-week { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); }
}

/* Dish composed from its name */
.recipe-head__compose { grid-column: 1 / -1; }
.compose-offer {
    display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; margin: 8px 0;
    border: 1px solid var(--line); border-radius: var(--radius); background: var(--accent-soft); color: var(--ink); text-decoration: none;
    box-shadow: var(--shadow);
}
.compose-offer strong { font-weight: 850; }
.compose-offer span { font-size: 0.85rem; }
.compose-offer small { color: var(--ink-2); font-size: 0.78rem; }
.compose__parts { list-style: none; margin: 0; padding: 0; }
.news { width: min(92vw, 480px); max-height: 85vh; max-height: 85dvh; overflow: auto; overscroll-behavior: contain; padding: 22px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); box-shadow: var(--shadow); }
/* iOS hands a touch on the modal to the page behind unless the page itself cannot scroll. */
html:has(.news[open]) { overflow: hidden; }
.news::backdrop { background: rgb(0 0 0 / 0.6); }
.news h2 { margin: 4px 0 14px; }
.news__items { margin: 0 0 14px; padding-left: 18px; display: flex; flex-direction: column; gap: 10px; }
.news__items strong { display: block; }
.label-read { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.week-note__lines { margin: 0 0 12px; display: flex; flex-direction: column; gap: 12px; }
.week-note__lines dt { font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-2); }
.week-note__lines dd { margin: 2px 0 0; }
.week-note__action dd { font-weight: 800; }
.compose__part { display: grid; grid-template-columns: 1fr 84px auto; gap: 4px 8px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.compose__part[hidden] { display: none; }
.compose__role { grid-column: 1 / -1; font-size: 0.7rem; font-weight: 850; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-2); }
.compose__food select { width: 100%; min-width: 0; }
.field.compose__pct { flex-direction: row; align-items: center; gap: 4px; }
.compose__pct input { width: 100%; text-align: center; }
.compose__total, .compose__portion { font-weight: 800; margin-top: 10px; }
.compose .btn--block + .btn--block { margin-top: -8px; }

/* Heart: resting rate and VO2 max */
.heart-figures { display: flex; flex-wrap: wrap; gap: 14px 32px; margin-bottom: 12px; }
.heart-figures p { display: flex; flex-direction: column; gap: 6px; max-width: 260px; }
.heart-figures .figure { font-size: 2.6rem; }
.heart-figures p > span:last-child { font-size: 0.85rem; color: var(--ink-2); }

/* Home, 2026 pass: one big thing (the trend weight), then today's loop in a bento, the long-term views below.
   Only the lead panel is inked with the red offset: weight shows importance, the others stay quiet. */
.goal-line { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 10px; align-items: center; margin-top: 14px; max-width: 34em; font-size: 0.78rem; font-weight: 800; }
.goal-line .progress { margin: 0; height: 6px; }
.goal-line small { grid-column: 1 / -1; font-weight: 600; color: var(--ink-2); font-size: 0.78rem; }
.quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.quick a {
    display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 8px;
    border: 1.5px solid var(--rule); border-radius: var(--radius); background: var(--sheet);
    color: var(--ink); text-decoration: none; font-weight: 800; font-size: 0.85rem;
}
.quick a:hover { border-color: var(--ink); }
.quick a:active { transform: translate(1px, 1px); }
.quick .icon { width: 20px; height: 20px; color: var(--accent); }

.bento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.bento__tile {
    display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 12px 14px 14px;
    border: 1.5px solid var(--rule); border-radius: var(--radius); background: var(--sheet);
    color: var(--ink); text-decoration: none;
}
.bento__tile:hover { border-color: var(--ink); }
.bento__tile .progress { margin-top: auto; height: 6px; }
.bento__tile .tile__delta { margin-bottom: 8px; }
.bento__tile--lead, .bento__tile--wide { grid-column: 1 / -1; }
.bento__tile--lead { border: 1px solid var(--line); box-shadow: var(--shadow); }
.bento__tile--lead .tile__value { font-size: 3rem; }
.bento__tile--lead:active { transform: translateY(1px); }
.bento__macros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.bento__macros > span { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 0 4px; }
.bento__macros b { font-stretch: 75%; font-weight: 800; font-size: 1.2rem; }
.bento__macros small { color: var(--ink-2); font-size: 0.72rem; }
.bento__macros em { grid-column: 1 / -1; font-style: normal; font-size: 0.72rem; color: var(--ink-2); }
.bento__macros .progress { grid-column: 1 / -1; margin-top: 4px; height: 4px; }
.bento__tile--wide { display: grid; grid-template-columns: auto 1fr; gap: 3px 16px; align-items: center; }
.bento__tile--wide .tile__label, .bento__tile--wide .tile__delta { grid-column: 1; }
.bento__tile--wide .tile__delta { margin-bottom: 0; }
.bento__tile--wide .tile__value { grid-column: 1; }
.bento__ticks { grid-column: 2; grid-row: 1 / span 3; display: flex; gap: 6px; justify-content: flex-end; }
.bento__ticks span { width: 22px; height: 34px; border: 1px solid var(--line); background: transparent; transform: skewX(-8deg); }
.bento__ticks span.is-done { background: var(--accent); border-color: var(--accent); }
.bento__ticks span.is-done.is-extra { background: repeating-linear-gradient(-45deg, var(--accent) 0 2px, transparent 2px 5px); border-color: var(--accent); }
.bento__ticks span:not(.is-extra) + .is-extra { margin-left: 6px; }
.bento__ticks span { flex: 0 1 22px; min-width: 12px; }
.fat__lean-line { font-size: 0.85rem; }
.fat__lean-line strong { font-weight: 800; }
@media (min-width: 960px) {
    .bento__tile--lead .tile__value { font-size: 3.4rem; }
}

/* Home trend panels fold away on a phone: the heading and a one-line digest, the charts on demand. */
.fold { padding-top: 18px; padding-bottom: 6px; }
.fold[open] { padding-bottom: 12px; }
.fold__head {
    display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 12px;
    list-style: none; cursor: pointer; border-top: 1px solid var(--line); padding-bottom: 10px;
}
.fold__head::-webkit-details-marker { display: none; }
.fold__head h2 {
    background: var(--ink); color: var(--paper); justify-self: start; align-self: start;
    padding: 5px 12px 4px; font-size: 0.82rem; font-weight: 850; text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap;
}
.fold__digest { color: var(--ink-2); font-size: 0.85rem; font-weight: 700; min-width: 0; padding-top: 4px; }
.fold__head::after {
    content: ''; width: 10px; height: 10px; margin: 4px 4px 0 0;
    border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transform: rotate(45deg); transition: transform 0.2s;
}
.fold[open] > .fold__head::after { transform: rotate(-135deg); margin-top: 10px; }
.fold[open] > .fold__head .fold__digest { visibility: hidden; }
.fold__meta { font-size: 0.78rem; color: var(--ink-2); text-align: right; margin: -4px 0 8px; }
@media (prefers-reduced-motion: reduce) { .fold__head::after { transition: none; } }

/* Session at the gym: progress always in sight, finished exercises fold to their title, one-thumb targets. */
.session-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 14px; }
.session-links a {
    display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px;
    border: 1.5px solid var(--rule); border-radius: var(--radius); background: var(--sheet);
    color: var(--ink); text-decoration: none; font-size: 0.85rem; font-weight: 800;
}
.session-links a:hover { border-color: var(--ink); }
.session-links .icon { color: var(--accent); }
.session-progress {
    position: sticky; top: 0; z-index: 20; margin: 12px -20px 0; padding: 10px 20px 12px;
    background: var(--paper); border-bottom: 1.5px solid var(--rule);
    font-size: 0.85rem; font-weight: 800;
}
.session-progress .progress { height: 6px; margin-top: 6px; }
.exercise { scroll-margin-top: 64px; }
.exercise__reopen {
    display: none; align-items: center; gap: 4px; min-height: 36px; padding: 0 10px; flex-shrink: 0;
    border: 1.5px solid var(--good); border-radius: var(--radius); background: none;
    color: var(--good); font: inherit; font-size: 0.8rem; font-weight: 850; cursor: pointer;
}
.exercise.is-complete .exercise__reopen { display: inline-flex; }
.exercise.is-complete .exercise__dose { display: none; }
.exercise.is-complete:not(.is-peek) > :not(.exercise__head) { display: none; }
.exercise.is-complete:not(.is-peek) { padding-bottom: 14px; }
.exercise.is-complete:not(.is-peek) .exercise__head h2 { color: var(--ink-2); }
@media (max-width: 380px) { .session-progress { margin-inline: -16px; padding-inline: 16px; } }

/* Shared across pages (2026 pass): the one lead panel of a page, inked with the red offset, and a 44 px icon button. */
.panel-lead { margin-top: 14px; padding: 14px 16px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--sheet); box-shadow: var(--shadow); }
.icon-btn {
    display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -10px -10px -10px 0;
    background: none; border: 0; border-radius: var(--radius); color: var(--ink-2); cursor: pointer;
}
.icon-btn:hover { background: var(--accent-soft); }
.icon-btn--danger { color: var(--bad); }
.choices .machine-pick { flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; min-height: 58px; text-align: left; }
.machine-pick strong { font-weight: 850; font-size: 0.92rem; }
.machine-pick small { font-size: 0.72rem; font-weight: 600; opacity: 0.75; }
.month-strip { list-style: none; margin: 0 0 6px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.month-strip li { display: flex; flex-direction: column; padding: 8px 10px; border: 1.5px solid var(--rule); border-radius: var(--radius); background: var(--sheet); }
.month-strip strong { font-size: 0.72rem; font-weight: 850; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-2); }
.month-strip span { font-weight: 800; font-size: 0.9rem; }
.older { margin-top: 8px; }
.older > summary { cursor: pointer; padding: 12px 0; font-weight: 800; font-size: 0.9rem; text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.choices input:checked + .machine-pick small { opacity: 0.95; }
.tiles--report .tile:first-child { grid-column: 1 / -1; border: 1px solid var(--line); box-shadow: var(--shadow); }
.tiles--report .tile:first-child .tile__value { font-size: 3rem; }

/* Time of day in the hero: a manga sky drawn in ink behind the trend weight. Only the current scene shows;
   rays draw in once, stars twinkle a few times, nothing moves when the system asks for less motion. */
.sky { position: absolute; top: 76px; right: -20px; z-index: -1; width: min(62%, 330px); height: auto; pointer-events: none; overflow: visible; }
.sky__scene { display: none; }
.today[data-period="matin"] .sky__scene--matin, .today[data-period="jour"] .sky__scene--jour,
.today[data-period="soir"] .sky__scene--soir, .today[data-period="nuit"] .sky__scene--nuit { display: inline; }
.sky__rays path { stroke: var(--ink); stroke-width: 1.4; stroke-linecap: round; opacity: 0.2; stroke-dasharray: 1; stroke-dashoffset: 0; }
.sky__sun { fill: var(--paper); stroke: var(--ink); stroke-width: 2.5; opacity: 0.5; }
.sky__sun--low { fill: var(--accent); stroke: none; opacity: 0.22; }
.sky__horizon { stroke: var(--ink); stroke-width: 2; stroke-linecap: round; fill: none; opacity: 0.25; }
.sky__moon { fill: var(--ink); opacity: 0.45; }
.sky__star { fill: var(--ink); opacity: 0.4; transform-box: fill-box; transform-origin: center; }
.today[data-period] .today__mark { opacity: 0.04; }
.today__greet { font-weight: 800; font-size: 0.85rem; color: var(--ink-2); margin-bottom: 2px; }
@media (prefers-reduced-motion: no-preference) {
    .sky.is-drawing .sky__rays path { animation: ray-draw 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: calc(var(--i, 0) * 25ms); }
    .sky.is-drawing .sky__sun, .sky.is-drawing .sky__moon { animation: sky-rise 1s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
    .sky .sky__star { animation: twinkle 2.4s ease-in-out 6 alternate both; animation-delay: calc(var(--i, 0) * 0.4s); }
    .bento__ticks.is-stamping span.is-new { animation: stamp 0.45s cubic-bezier(0.3, 1.6, 0.5, 1) both; animation-delay: calc(var(--i, 0) * 120ms); }
}
@keyframes ray-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes sky-rise { from { transform: translateY(14px); opacity: 0; } }
@keyframes twinkle { from { opacity: 0.1; transform: scale(0.6); } to { opacity: 0.5; transform: scale(1.1); } }
@keyframes stamp { from { transform: skewX(-8deg) scale(1.9) rotate(-10deg); opacity: 0; } 60% { opacity: 1; } to { transform: skewX(-8deg) scale(1); } }

/* A number that moved since the last visit: it slams in like an impact panel, focus lines flash behind,
   and a small caption box shows the change before fading. Nothing rolls, nothing loops. */
[data-count] { position: relative; display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
    [data-count].impact { animation: impact-slam 0.42s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
    [data-count].impact::before {
        content: ""; position: absolute; inset: -60% -45%; z-index: -1; pointer-events: none;
        background: repeating-conic-gradient(from 0deg, var(--ink) 0deg 1.6deg, transparent 1.6deg 11deg);
        -webkit-mask-image: radial-gradient(closest-side, transparent 38%, #000 60%, transparent 100%);
        mask-image: radial-gradient(closest-side, transparent 38%, #000 60%, transparent 100%);
        animation: impact-lines 0.7s ease-out both;
    }
}
.impact-badge {
    display: inline-block; margin-left: 8px; padding: 2px 7px 1px; vertical-align: super;
    border: 1px solid var(--line); background: var(--sheet); color: var(--ink); box-shadow: var(--shadow);
    font-size: 0.8rem; font-weight: 750; font-stretch: 100%; letter-spacing: 0; line-height: 1.2;
    transform: rotate(-4deg); transition: opacity 0.5s, transform 0.5s;
}
.figure .impact-badge { font-size: 1rem; vertical-align: top; margin-top: 0.4em; }
.impact-badge.is-gone { opacity: 0; transform: rotate(-4deg) translateY(-6px); }
@media (prefers-reduced-motion: no-preference) {
    .impact-badge { animation: badge-pop 0.35s 0.25s cubic-bezier(0.3, 1.6, 0.5, 1) both; }
}
@keyframes impact-slam { from { transform: scale(1.45) skewX(-6deg); opacity: 0; } 55% { opacity: 1; } to { transform: none; } }
@keyframes impact-lines { from { opacity: 0; transform: scale(0.7); } 30% { opacity: 0.35; } to { opacity: 0; transform: scale(1.15); } }
@keyframes badge-pop { from { transform: rotate(-12deg) scale(0.4); opacity: 0; } to { transform: rotate(-4deg) scale(1); opacity: 1; } }

/* Session figures acting out the session: the working muscles contract (darker, a little fuller) three times,
   a burst of focus lines marks each new exercise, an inked caption names it. Two passes, then still. */
.session-summary__map { position: relative; cursor: pointer; }
.session-summary__now {
    grid-column: 1 / -1; display: flex; flex-direction: column; justify-content: center; gap: 1px; min-height: 64px; padding: 6px 12px;
    border: 1px solid var(--line); background: var(--sheet); box-shadow: var(--shadow); transform: rotate(-1.5deg);
}
.session-summary__now small { font-size: 0.66rem; font-weight: 850; letter-spacing: 0.08em; color: var(--ink-2); }
.session-summary__now strong { font-size: 0.85rem; font-weight: 850; line-height: 1.2; }
.session-summary__now span { font-size: 0.72rem; color: var(--accent); font-weight: 700; }
.session-summary:not(.is-cycling) .session-summary__now { border-style: dashed; box-shadow: none; transform: none; }
.session-summary:not(.is-cycling) .session-summary__now span { color: var(--ink-2); font-size: 0.8rem; }
.is-cycling .body__m path { fill: var(--paper); transition: fill 0.35s; }
.is-cycling .body__m.is-help path { fill: var(--lvl-1); }
.is-cycling .body__m.is-work path { fill: var(--lvl-3); transform-box: fill-box; transform-origin: center; }
.body-pair { position: relative; isolation: isolate; }
@media (prefers-reduced-motion: no-preference) {
    .is-cycling .body__m.is-work path { animation: contract 1.5s ease-in-out 3; }
    .body-pair.is-switch::before {
        content: ""; position: absolute; inset: -6% -10%; z-index: -1; pointer-events: none;
        background: repeating-conic-gradient(from 0deg, var(--ink) 0deg 1.4deg, transparent 1.4deg 10deg);
        -webkit-mask-image: radial-gradient(closest-side, transparent 55%, #000 75%, transparent 100%);
        mask-image: radial-gradient(closest-side, transparent 55%, #000 75%, transparent 100%);
        animation: impact-lines 0.8s ease-out both;
    }
}
@keyframes contract {
    0%, 100% { transform: scale(1); fill: var(--lvl-2); }
    45%, 60% { transform: scale(1.07); fill: var(--lvl-4); }
}

/* Session as a guided visit: route, steps, one open exercise at a time */
.notice--first { border: 1px solid var(--line); box-shadow: var(--shadow); }
.notice--first strong { display: block; font-weight: 850; margin-bottom: 2px; }
.session-other { margin: 4px 0 14px; font-size: 0.88rem; }
.session-other summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: var(--ink-2); font-weight: 700; list-style: none; }
.session-other summary::-webkit-details-marker { display: none; }
.session-other[open] summary { color: var(--ink); margin-bottom: 6px; }
.route { list-style: none; margin: 6px 0 16px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; counter-reset: none; }
.route li { display: flex; flex-direction: column; gap: 1px; padding: 8px 4px 7px 0; border-top: 3px solid var(--rule); font-weight: 850; font-size: 0.8rem; font-stretch: 80%; line-height: 1.2; min-width: 0; overflow-wrap: anywhere; }
.route li span { font-stretch: 62%; font-size: 1.1rem; color: var(--accent); }
.route li small { font-weight: 600; font-size: 0.7rem; color: var(--ink-2); }
.route li.is-now { border-top-color: var(--accent); }
.route li.is-done { border-top-color: var(--ink); color: var(--ink-2); }
.step { padding: 16px 0 10px; border-top: 1px solid var(--line); }
.step__kicker { font-size: 0.7rem; font-weight: 850; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.step__title { font-size: 1.25rem; font-stretch: 100%; font-weight: 750; margin: 2px 0 6px; }
.step p { margin: 0 0 8px; }
.step--warmup .step__body { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.step__done { display: none; color: var(--ink-2); font-weight: 700; }
.step--warmup.is-done .step__body, .step--warmup.is-done .step__title { display: none; }
.step--warmup.is-done .step__done { display: flex; align-items: center; gap: 6px; }
.step--warmup.is-done .step__kicker { color: var(--ink-2); }
.step--lifts { padding-bottom: 0; }
.exercise__no { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; border: 1px solid var(--line); font-stretch: 62%; font-weight: 750; font-size: 1rem; }
.exercise__muscles { display: flex; align-items: center; gap: 6px; }
.exercise__muscles .equip { color: var(--ink-2); flex: none; }
.exercise__dose { font-stretch: 85%; font-size: 0.9rem; white-space: normal; text-align: right; }
.exercise__open { display: none; margin-left: auto; font: inherit; font-size: 0.78rem; font-weight: 800; padding: 6px 10px; border: 1px solid var(--line); background: var(--sheet); color: var(--ink); border-radius: var(--radius); cursor: pointer; }
.exercise.is-later:not(.is-peek) > :not(.exercise__head):not(.exercise__muscles) { display: none; }
.exercise.is-later:not(.is-peek) .exercise__open { display: inline-flex; }
.exercise.is-later:not(.is-peek) .exercise__head h2 { color: var(--ink-2); }
.exercise.is-later:not(.is-peek) .exercise__no { border-color: var(--rule); }
.exercise:not(.is-later):not(.is-complete) .exercise__no { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.exercise.is-complete .exercise__no { background: var(--ink); color: var(--paper); }
.today { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--line); background: var(--sheet); }
.today__title, .howto__title { font-size: 0.72rem; font-weight: 850; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin: 0 0 4px; }
.today__steps { margin: 0; padding-left: 20px; font-size: 0.9rem; display: flex; flex-direction: column; gap: 6px; }
.howto { margin-top: 10px; }
.howto__cues { margin: 0; padding-left: 18px; font-size: 0.9rem; display: flex; flex-direction: column; gap: 3px; }
.exercise__setup { font-size: 0.85rem; margin-top: 6px; }
.session-date { margin: 8px 0 12px; font-size: 0.85rem; }
.session-date summary { cursor: pointer; color: var(--ink-2); font-weight: 700; list-style: none; }
.session-date summary::-webkit-details-marker { display: none; }
.session-date summary span { color: var(--ink); }
.step--finish .btn { margin-top: 4px; }
.exercise__head { flex-wrap: wrap; align-items: center; row-gap: 4px; }
.exercise__head h2 { flex: 1 1 100%; }
.exercise__dose { flex: 1; text-align: left; font-size: 0.85rem; color: var(--ink-2); padding-left: 38px; }
.exercise.is-later:not(.is-peek) .exercise__head h2 { cursor: pointer; }
.exercise.is-later:not(.is-peek) .exercise__muscles { display: none; }
.route { column-gap: 10px; }
.route li { font-stretch: 100%; overflow-wrap: normal; padding-right: 0; }
@media (max-width: 480px) {
    .route { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 6px; }
    .route li { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 6px; }
    .route li small { flex-basis: 100%; padding-left: 18px; }
}
.step--finish .hint { margin-top: 12px; }

/* Exercise drawings (app/art), same ink as the Gestes animations; classes scoped to the figure. */
.ex-figure { margin: 10px 0 0; border: 1px solid var(--line); background: var(--sheet); }
.ex-figure figcaption { padding: 6px 10px 8px; border-top: 1px solid var(--line); font-size: 0.82rem; font-weight: 700; }
.ex-figure figcaption span { display: block; font-weight: 600; color: var(--ink-2); font-size: 0.74rem; }
.exercise__tag { font-size: 0.82rem; font-weight: 700; margin-top: 6px; }
.ex-art { display: block; width: 100%; height: auto; max-height: 260px; }
.ex-art .ink { fill: var(--ink); }
.ex-art .skin { fill: var(--sheet); }
.ex-art .far .skin { fill: var(--paper); }
.ex-art .far .ink { fill: var(--ink-2); }
.ex-art .line { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ex-art .lever { stroke-width: 4; }
.ex-art .thin { fill: none; stroke: var(--ink); stroke-width: 1.2; stroke-linecap: round; opacity: 0.55; }
.ex-art .kit { fill: var(--sheet); stroke: var(--ink); stroke-width: 2.2; stroke-linejoin: round; }
.ex-art .kit-tone { fill: var(--tone); stroke: var(--ink); stroke-width: 2.2; stroke-linejoin: round; }
.ex-art .iron { fill: var(--ink); stroke: var(--ink); stroke-width: 1.5; }
.ex-art .iron-hi { fill: none; stroke: var(--sheet); stroke-width: 1.2; opacity: 0.6; }
.ex-art .floor { stroke: var(--ink); stroke-width: 2.4; }
.ex-art .hatch { stroke: var(--ink); stroke-width: 1; opacity: 0.35; }
.ex-art .m1 { fill: var(--accent); }
.ex-art .m2 { fill: var(--lvl-1); }
.ex-art .shoe { fill: var(--ink-2); stroke: var(--ink); stroke-width: 2.2; stroke-linejoin: round; }
.ex-art .hair, .ex-art .eye { fill: var(--ink); }
.ex-art .ghost { fill: none; stroke: var(--good); stroke-width: 2.2; stroke-dasharray: 5 4; stroke-linejoin: round; }
.ex-art .arrow { fill: none; stroke: var(--good); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.ex-art .plate-label rect { fill: var(--ink); }
.ex-art .plate-label text { fill: var(--paper); font-family: inherit; font-weight: 750; font-size: 11px; letter-spacing: 0.06em; }
.ex-art .map-outline { fill: var(--sheet); stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
.ex-art .map-m { fill: var(--paper); stroke: var(--ink); stroke-width: 1.2; stroke-linejoin: round; }
.ex-art .map-m.is-main { fill: var(--accent); }
.ex-art .map-m.is-help { fill: var(--lvl-1); }
.session-progress [data-progress-text] { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Animated exercise (assets/gestes.js): the inked body, its muscles, the machine. */
.geste.is-live { padding: 0; min-width: 0; max-width: 100%; overflow: hidden; }
.geste__stage { display: block; width: 100%; height: auto; max-height: 340px; transition: opacity 0.16s ease; }
.geste__stage.is-fading { opacity: 0; }
.geste__phase { margin: 0; padding: 6px 10px 4px; border-top: 1px solid var(--line); font-size: 0.8rem; color: var(--ink-2); min-height: 2.9em; }
.geste__phase strong { color: var(--ink); font-weight: 750; text-transform: uppercase; }
.geste__phase.is-error strong { color: var(--accent); }
.geste__phase.is-good strong { color: var(--good); }
.geste__tempo { display: grid; gap: 3px; padding: 0 10px 8px; }
.geste__tempo i { height: 5px; background: var(--rule); position: relative; overflow: hidden; }
.geste__tempo b { position: absolute; inset: 0; background: var(--ink); transform-origin: left; transform: scaleX(0); }
.geste__tempo i.is-work b { background: var(--accent); }
.geste__bar, .geste__errors { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 0 10px 8px; }
.geste__views { display: flex; flex-wrap: wrap; gap: 6px; }
.geste__bar button, .geste__errors button { max-width: 100%; text-align: left; font: inherit; font-size: 0.78rem; font-weight: 800; min-height: 36px; padding: 4px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--sheet); color: var(--ink); cursor: pointer; }
.geste__bar button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.geste__errors span { font-size: 0.74rem; font-weight: 800; color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.05em; }
.geste__errors button { border-color: var(--accent); color: var(--accent); }
.geste__errors button.is-on { background: var(--accent); color: var(--on-accent); }
.geste__stage .ink { fill: var(--ink); }
.geste__stage .skin { fill: var(--sheet); }
.geste__stage .far .skin { fill: var(--paper); }
.geste__stage .far .ink { fill: var(--ink-2); }
.geste__stage .line { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.geste__stage .thin { fill: none; stroke: var(--ink); stroke-width: 1.2; stroke-linecap: round; opacity: 0.55; }
.geste__stage .kit { fill: var(--sheet); stroke: var(--ink); stroke-width: 2.2; stroke-linejoin: round; }
.geste__stage .kit-tone { fill: var(--tone); stroke: var(--ink); stroke-width: 2.2; stroke-linejoin: round; }
.geste__stage .iron { fill: var(--ink); stroke: var(--ink); stroke-width: 1.5; }
.geste__stage .iron-hi { fill: none; stroke: var(--sheet); stroke-width: 1.2; opacity: 0.6; }
.geste__stage .floor { stroke: var(--ink); stroke-width: 2.4; }
.geste__stage .hatch { stroke: var(--ink); stroke-width: 1; opacity: 0.35; }
.geste__stage .m1 { fill: var(--accent); }
.geste__stage .m2 { fill: var(--lvl-1); }
.geste__stage .m-line { fill: none; stroke: var(--sheet); stroke-width: 1; opacity: 0.55; }
.geste__stage .shoe { fill: var(--ink-2); stroke: var(--ink); stroke-width: 2.2; stroke-linejoin: round; }
.geste__stage .hair, .geste__stage .eye { fill: var(--ink); }
.geste__stage .ghost { fill: none; stroke: var(--good); stroke-width: 2.2; stroke-dasharray: 5 4; stroke-linejoin: round; }
.geste__stage .err { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; }
.geste__stage .err-dot { fill: var(--accent); }
.geste__stage .arrow { fill: none; stroke: var(--good); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.geste__stage .sfx.big { font-size: 26px; stroke-width: 6; }
.geste__stage .sfx { font-family: var(--display); font-weight: 750; font-stretch: 100%; font-size: 15px; fill: var(--accent); stroke: var(--sheet); stroke-width: 4; paint-order: stroke; }
.geste__stage .speed { stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; }
.geste__stage .shadow { fill: var(--ink); opacity: 0.13; }
.geste__stage .glow { fill: var(--accent); }
.geste__stage .trace { fill: none; stroke: var(--ink-2); stroke-width: 1.8; stroke-dasharray: 0.5 6; stroke-linecap: round; opacity: 0.55; }
.geste__stage .plate-label rect { fill: var(--ink); }
.geste__stage .plate-label text { fill: var(--paper); font-family: var(--display); font-weight: 750; font-size: 11px; letter-spacing: 0.06em; }
.geste__stage .lever { stroke-width: 4; }
.geste__stage .map-outline { fill: var(--sheet); stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
.geste__stage .map-m { fill: var(--paper); stroke: var(--ink); stroke-width: 1.2; stroke-linejoin: round; }
.geste__stage .map-m.is-main { fill: var(--accent); }
.geste__stage .map-m.is-help { fill: var(--lvl-1); }
.geste__stage .map-m.soft { stroke: none; }
.geste__stage .map-skin { fill: var(--sheet); }
.geste__stage .body-drop { fill: var(--tone); }
.geste__stage .shade { fill: var(--ink); opacity: 0.11; }
.geste__stage .cable { fill: none; stroke: var(--ink-2); stroke-width: 1.6; }
.geste__stage .kit-glass { fill: var(--sheet); fill-opacity: 0.28; stroke: var(--ink); stroke-width: 2.2; stroke-dasharray: 6 4; }
.geste__stage .far-limb { fill: var(--paper); stroke: var(--ink-2); stroke-width: 2.2; stroke-linejoin: round; }
.geste__stage .map-edge { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.geste__stage .anat-line { fill: none; stroke: var(--ink); stroke-width: 1.1; stroke-linecap: round; opacity: 0.6; }

/* Soulager: routine of a sore zone, pain scale and follow-up */
.care-lights { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.care-light { display: grid; grid-template-columns: 86px 1fr; gap: 10px; align-items: baseline; padding: 10px 12px; background: var(--sheet); border: 1px solid var(--rule); border-left: 5px solid var(--light); font-size: 0.9rem; }
.care-light strong { font-weight: 850; }
.care-light--vert, .pain-scale--vert, .care-score--vert { --light: var(--good); }
.care-light--orange, .pain-scale--orange, .care-score--orange { --light: var(--warn); }
.care-light--rouge, .pain-scale--rouge, .care-score--rouge { --light: var(--bad); }
.care-status { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 0; padding: 10px 12px; border-left: 3px solid var(--warn); background: var(--sheet); font-size: 0.9rem; }
.care-status .icon { color: var(--warn); flex: none; margin-top: 3px; }
.care-progress { margin: 4px 0 6px; }
.care-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.care-ex { border-bottom: 1px solid var(--rule); scroll-margin-top: 72px; }
.care-ex summary { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 10px 0; cursor: pointer; list-style: none; }
.care-ex summary::-webkit-details-marker { display: none; }
.care-ex__title { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.care-ex__title strong { font-weight: 850; font-size: 1rem; }
.care-ex__title small { color: var(--ink-2); font-size: 0.8rem; }
.care-ex__state { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border: 1.5px solid var(--rule); border-radius: 50%; color: transparent; }
.care-ex.is-done .care-ex__state { background: var(--good); border-color: var(--good); color: var(--sheet); }
.care-ex.is-done .care-ex__title strong { text-decoration: line-through; text-decoration-thickness: 2px; color: var(--ink-2); }
.care-ex__body { padding: 0 0 16px; }
.care-ex__meta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0 14px; font-size: 0.85rem; }
.care-ex__meta dt { font-weight: 850; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); }
.care-ex__meta dd { margin: 2px 0 0; }
.care-ex__done { width: 100%; justify-content: center; }
@media (max-width: 420px) { .care-ex__meta { grid-template-columns: 1fr; } }
.care-log { scroll-margin-top: 72px; }
.care-log .care-lights { margin: 0 0 14px; }
.care-log .care-light { padding: 8px 10px; font-size: 0.84rem; }
.pain-scale { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 4px; margin: 6px 0 12px; }
.pain-scale label { position: relative; }
.pain-scale input { position: absolute; opacity: 0; }
.pain-scale span { display: flex; align-items: center; justify-content: center; min-height: 44px; background: var(--sheet); border: 1.5px solid var(--rule); border-bottom: 4px solid var(--light); border-radius: var(--radius); font-weight: 800; cursor: pointer; }
.pain-scale input:checked + span { background: var(--light); border-color: var(--ink); color: var(--sheet); }
.pain-scale input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 420px) { .pain-scale { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.care-trend { margin: 0 0 8px; font-size: 0.92rem; }
.care-score { font-weight: 850; color: var(--light); }
.care-flags strong { display: block; font-weight: 850; margin-bottom: 6px; }
.care-flags .hint { margin: 8px 0 0; }
.care-tip { font-size: 0.88rem; margin-top: 8px; padding: 8px 10px; border-left: 3px solid var(--warn); background: var(--sheet); }
.care-warmup { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0; font-size: 0.92rem; }
.care-warmup .icon { color: var(--warn); flex: none; margin-top: 3px; }
.care-nudge { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; margin: 10px 0 0; padding: 10px 12px; border: 1.5px solid var(--rule); border-left: 4px solid var(--warn); border-radius: var(--radius); background: var(--sheet); text-decoration: none; font-size: 0.88rem; }
.care-nudge strong { font-weight: 850; margin-right: 4px; }
.care-nudge .icon:first-child { color: var(--warn); }
.care-nudge.is-done { border-left-color: var(--good); }
.care-nudge.is-done .icon:first-child { color: var(--good); }

/* Séance: machine taken, the exercise goes to the end */
.defer { margin: 6px 0 2px; }
.defer__btn { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; font-size: 0.85rem; font-weight: 700; color: var(--ink-2); }
.defer__btn .icon { color: var(--accent); }
.defer__warn { margin-top: 6px; padding: 10px 12px; border-left: 3px solid var(--warn); background: var(--sheet); font-size: 0.88rem; }
.defer__warn p { margin: 0 0 10px; }
.defer__choices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.defer__last { margin: 6px 0 0; }
.exercise.is-deferred .exercise__no { background: var(--warn); border-color: var(--warn); color: var(--sheet); }

/* Claude: one family everywhere. The spark marks a tool or an answer of Claude; the frame takes the red shadow of the "ink" cards. */
.icon--xs { width: 15px; height: 15px; }
.ai-kicker {
    display: inline-flex; align-items: center; gap: 6px; margin: 0;
    color: var(--accent); font-size: 0.72rem; font-weight: 750; font-stretch: 100%; text-transform: uppercase; letter-spacing: 0.12em;
}
.ai-kicker .icon, .ai-note .icon, .ai-caption .icon { fill: currentColor; stroke-width: 1.2; }
.ai-tools {
    display: flex; flex-direction: column; gap: 10px; margin-top: 18px; padding: 12px;
    border: 1px solid var(--line); border-radius: var(--radius); background: var(--sheet); box-shadow: var(--shadow);
}
.ai-tools__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ai-tool {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    min-height: 78px; padding: 10px 6px; border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--paper); color: var(--ink); font: inherit; font-size: 0.78rem; font-weight: 850; line-height: 1.2;
    text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.ai-tool .icon { width: 24px; height: 24px; color: var(--accent); }
.ai-tool:active { transform: translate(2px, 2px); background: var(--accent-soft); }
.ai-tool:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.ai-tool--row { flex-direction: row; justify-content: flex-start; gap: 10px; min-height: 52px; padding: 0 14px; font-size: 0.9rem; text-align: left; }
.ai-tools__promise, .ai-sheet__promise { margin: 0; color: var(--ink-2); font-size: 0.8rem; }
.ai-sheet__promise { margin-top: 10px; }
.ai-tools.is-busy .ai-tool { opacity: 0.55; pointer-events: none; }
.ai-warn { color: var(--accent); font-weight: 700; }
.ai-caption { display: inline-flex; align-items: center; gap: 6px; }
.ai-caption .icon { color: var(--accent); }
.ai-sheet { scroll-margin-top: 72px; }
.ai-sheet textarea { resize: vertical; }
.ai-sheet__body { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: start; margin-bottom: 14px; }
.ai-sheet__body:has(.ai-sheet__preview[hidden]) { grid-template-columns: 1fr; }
.ai-sheet__preview { width: 96px; aspect-ratio: 3 / 4; object-fit: cover; border: 1px solid var(--line); border-radius: 3px; }
.ai-note { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin: 0 0 8px; font-size: 0.78rem; color: var(--ink-2); }
.ai-note .icon { color: var(--accent); }
.ai-note strong { color: var(--accent); font-weight: 750; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.72rem; }
.ai-result {
    display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 4px; padding: 12px;
    border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper);
}
.ai-result > * { margin: 0; }
.ai-result .ai-note { margin: 0; }
.ai-result__title { font-weight: 750; font-size: 1.15rem; line-height: 1.2; }
.ai-result__title small { display: block; color: var(--ink-2); font-size: 0.8rem; font-weight: 700; }
.ai-result__verdict { padding-left: 10px; border-left: 4px solid var(--rule-strong); }
.ai-result__verdict--good { border-left-color: var(--good); }
.ai-result__line { display: flex; gap: 8px; align-items: flex-start; font-size: 0.9rem; }
.ai-result__line .icon { color: var(--accent); margin-top: 2px; }
.label-read { gap: 8px; align-items: stretch; }

/* Restaurant menu read by Claude */
.menu-list { list-style: none; margin: 0; padding: 0; }
.menu-dish {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 12px 0;
    border-bottom: 1px solid var(--rule); color: inherit; text-decoration: none;
}
.menu-dish__name { font-weight: 850; line-height: 1.25; }
.menu-dish__name small { color: var(--ink-2); font-weight: 600; white-space: nowrap; }
.menu-dish__kcal { font-weight: 750; font-size: 1.1rem; text-align: right; white-space: nowrap; }
.menu-dish__kcal small { margin-left: 2px; font-size: 0.7rem; font-weight: 700; color: var(--ink-2); }
.menu-dish__parts { color: var(--ink-2); font-size: 0.8rem; }
.menu-dish__protein { color: var(--ink-2); font-size: 0.8rem; text-align: right; white-space: nowrap; }
.menu-dish.is-over { opacity: 0.5; }
.menu-dish:active { background: var(--accent-soft); }
.menu-list--picks { counter-reset: pick; }
.menu-list--picks .menu-dish { grid-template-columns: 30px minmax(0, 1fr) auto; }
.menu-list--picks .menu-dish::before {
    counter-increment: pick; content: counter(pick); grid-row: span 2; align-self: center;
    display: grid; place-items: center; width: 26px; height: 26px; background: var(--accent); color: var(--on-accent); font-weight: 750; border-radius: 50%;
}
[data-machine-status]:empty, [data-machine-result]:empty { display: none; }
.picker__claude .icon { color: var(--accent); fill: currentColor; stroke-width: 1.2; margin-right: 6px; vertical-align: -2px; }
.ai-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.ai-list li { display: flex; flex-direction: column; gap: 1px; padding: 9px 0; border-bottom: 1px solid var(--rule); }
.ai-list strong { font-weight: 850; }
.ai-list span { color: var(--ink-2); font-size: 0.85rem; }
.ai-spend { margin: 0; font-weight: 700; }
.ai-spend small { display: block; color: var(--ink-2); font-weight: 400; font-size: 0.8rem; }
.ai-tools__link { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; font-weight: 800; font-size: 0.85rem; color: var(--ink); }
.ai-result__club { display: flex; gap: 8px; align-items: flex-start; padding-top: 8px; border-top: 1px solid var(--rule); width: 100%; font-size: 0.85rem; color: var(--ink-2); }
.ai-result__club .icon { color: var(--good); margin-top: 1px; }
.ai-result__club a { font-weight: 800; color: var(--ink); }
.club-list { list-style: none; margin: 0; padding: 0; }
.club-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.club-row .equip { grid-row: span 2; }
.club-row__name { font-weight: 850; line-height: 1.25; }
.club-row__name small { margin-left: 8px; color: var(--ink-2); font-weight: 600; font-size: 0.75rem; }
.club-row__state { color: var(--ink-2); font-size: 0.85rem; }
.club-row.is-missing .club-row__state { color: var(--accent); font-weight: 700; }
.club-machine { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.club-machine__name { font-weight: 850; }
.club-machine__name small { color: var(--ink-2); font-weight: 600; }
.club-machine__for { grid-column: 1; color: var(--ink-2); font-size: 0.8rem; }
.club-machine .inline-form { grid-column: 2; grid-row: 1 / span 2; }
.club-link {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; margin-top: 24px; padding: 14px;
    border: 1px solid var(--line); border-radius: var(--radius); background: var(--sheet); color: inherit; text-decoration: none; box-shadow: var(--shadow);
}
.club-link > .icon:first-child { color: var(--accent); }
.club-link strong { display: block; font-weight: 750; }
.club-link small { color: var(--ink-2); font-size: 0.85rem; }


/* ------------------------------------------------------------------ Doole theme overrides */
h1, .next-session__name, .rank__name, .ladder__name, .tech__name, .chapter-card__title, .fat__band,
.photo-guide summary, .photo-guide__poses strong, .btn, .masthead__brand { text-transform: none; letter-spacing: -0.01em; }
h1 { font-weight: 720; letter-spacing: -0.02em; line-height: 1.08; }
.masthead { border-bottom: 3px solid var(--sand); }
.masthead__brand { font-size: 1.2rem; font-weight: 700; letter-spacing: 0.01em; }
.seal { border-radius: 9px; background: var(--accent); }
.seal__glyph { width: 74%; height: 74%; }
.sheet, .photo-guide, .chapter-card, .strength-test, .picker__chosen { border-radius: var(--radius); }
.btn { border-radius: 999px; letter-spacing: 0; }
.today::before, .next-session::before, .chapter-card::before, .record::before { background: none !important; }
.next-session__sfx, .sfx-don, .chapter__sfx { display: none; }
[data-count].impact::before, .body-pair.is-switch::before { display: none; }
.impact-badge { border-radius: 999px; box-shadow: none; transform: none; border-color: var(--accent); color: var(--accent); }
.impact-badge.is-gone { transform: translateY(-6px); }
.session-summary__now { border-radius: 12px; box-shadow: none; transform: none; }
.weeks__tick.is-extra, .bento__ticks span.is-done.is-extra { background: var(--sand); outline: none; border-color: var(--sand); }
.today__mark { fill: var(--accent); opacity: 0.07; }

.care-zones { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 8px; }
.care-zones a { padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 0.85rem; text-decoration: none; color: var(--ink-2); background: var(--sheet); }
.care-zones a[aria-current] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

.sync-modes { display: grid; gap: 8px; border: 0; padding: 0; margin: 0; }
.sync-modes legend { margin-bottom: 8px; color: var(--ink-2); font-size: 0.9rem; }
.sync-mode { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--sheet); cursor: pointer; }
.sync-mode:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.sync-mode input { margin-top: 4px; accent-color: var(--accent); }
.sync-mode span { display: flex; flex-direction: column; gap: 2px; }
.sync-mode small { color: var(--ink-2); font-size: 0.82rem; }
.guide-title { margin: 22px 0 8px; font-size: 0.95rem; font-weight: 750; color: var(--accent); }
.guide li { margin-bottom: 6px; }
.guide-fields { margin: 8px 0 0; padding-left: 18px; font-size: 0.85rem; color: var(--ink-2); }
.guide-fields li { margin-bottom: 4px; }
.steps-form { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: end; margin-bottom: 8px; }
.steps-form .btn { grid-column: 1 / -1; }
.geste__stage .sfx { display: none; }
.seal__glyph { stroke: none; }
.quick { grid-template-columns: repeat(2, 1fr); }
.sheet__head h2 { background: none; color: var(--ink); padding: 0; font-size: 1.05rem; font-weight: 720; text-transform: none; letter-spacing: -0.005em; }
.btn--accent:active { box-shadow: none; transform: translateY(1px); }