/* ==========================================================================
   xercivo stylesheet
   Hand-written, no build step. The look follows the mockups on the design
   canvas: black panels, light text and one gold accent (docs/design/coach-web).

   Contents
     1. Tokens       colours, fonts, sizes; change the look here
     2. Fonts        the self-hosted Archivo
     3. Base         element defaults and resets
     4. Layout       the page grid and the signed-in bar
     5. Components   buttons, form fields, messages, cards, chips
     6. Coach        the coach's screens: clients, a client, a week,
                     a session review, the exercise library, an exercise
     7. Admin        invitations, accounts, editing an account and the
                     "Are you sure?" page
                     (each <main> names its page: class="page-...")

   Selectors stay on elements and roles where the markup is shared with the
   tests; a class is added only where no element or role says enough.
   ========================================================================== */


/* ==========================================================================
   1. Tokens
   ========================================================================== */

/* Black and gold, from docs/design/coach-web/README.md. Templates and rules use only these variables. */
:root {
    /* Type: every font size is the design's px size times this; the design's sizes read too small (task 007) */
    --text-scale: 1.2;

    /* Colour */
    --c-bg: #0E0E0E;            /* page background, text on gold */
    --c-bar: #141414;           /* top bar */
    --c-panel: #1A1A1A;         /* cards, panels, pop-ups */
    --c-panel-2: #222222;       /* cards inside panels */
    --c-raised: #2C2C2C;        /* avatars, selected or hovered row */
    --c-superset: #1E1A0F;      /* superset rows in the week editor */
    --c-row-line: #232323;      /* row dividers inside tables */
    --c-line: #2A2A2A;          /* borders and dividers */
    --c-control: #3A3A3A;       /* input and outlined-button borders */
    --c-text: #F2F2F2;          /* primary text */
    --c-text-2: #C8C8C8;        /* secondary text */
    --c-text-3: #B5B5B5;        /* meta text, labels, inactive nav */
    --c-accent: #D4AF37;        /* primary buttons, active nav, focus and selection */
    --c-accent-text: #E8C960;   /* gold text and links on dark */
    --c-accent-tint: #2A2213;   /* the chosen option or card, on dark */
    --c-danger: #F87171;        /* destructive buttons' outline and fill */
    --c-danger-text: #FCA5A5;   /* destructive text */
    --c-scrim: rgb(0 0 0 / 0.6);  /* behind a pop-up */

    /* Status: fixed, always with a text label */
    --c-ok-bg: #1F3527;         /* on course, published, done */
    --c-ok-text: #8FD9A8;
    --c-bad-bg: #4A1D1D;        /* faster than safe, not planned, "Now", errors */
    --c-bad-text: #FCA5A5;
    --c-bad-dot: #F87171;
    --c-info-bg: #1E3A5F;       /* no weigh-in */
    --c-info-text: #BFDBFE;
    --c-info-dot: #60A5FA;
    --c-warn-bg: #3F2E0A;       /* slower than plan, unpublished, "Soon", in progress, missed */
    --c-warn-text: #FCD34D;
    --c-warn-dot: #FBBF24;
    --c-draft-line: #6B6B6B;    /* draft: dashed outline */

    /* Set intensity: fixed, identical to the client app, always with a letter */
    --c-medium: #FFE599;
    --c-strong: #F6B26B;
    --c-max: #E03131;

    /* Charts */
    --c-plan: #5F8BD8;          /* the coach's plan, dashed */
    /* One colour per line of a chart with several, always in this order. */
    --series-1: #D4AF37;
    --series-2: #5F8BD8;
    --series-3: #8FD9A8;
    --series-4: #F6B26B;
    --series-5: #E87BA4;
    --series-6: #60A5FA;
    --series-7: #A78BFA;
    --series-8: #F87171;

    /* Type */
    --font: Archivo, system-ui, sans-serif;

    /* Sizes */
    --tap: 44px;                /* smallest height of anything tapped on a phone */
    --radius-field: 8px;        /* inputs and buttons */
    --radius-card: 14px;        /* panels */
    --radius-cell: 6px;         /* set cells */
    --page-width: 1360px;
    --narrow-width: 440px;      /* sign-in and set-password pages */
    --form-width: 560px;        /* widest a form gets on a laptop */
    --gutter: 16px;
    --stack: 16px;              /* space between the blocks of a page */
    --tap-big: 56px;            /* the main button of a screen used mid-workout */
}

@media (min-width: 820px) {
    :root {
        --gutter: 24px;
        --tap: 36px;            /* buttons 32-38 px and inputs 36-40 px on a desktop */
    }
}


/* ==========================================================================
   2. Fonts
   Archivo 400-800, self-hosted as one variable font (no request to Google),
   latin and latin-ext subsets only. Licence: /fonts/OFL-archivo.txt
   ========================================================================== */

@font-face {
    font-family: Archivo;
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("/fonts/archivo-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
        U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: Archivo;
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("/fonts/archivo-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
        U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* ==========================================================================
   3. Base
   ========================================================================== */

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

/* Hidden means hidden, whatever display a component sets. */
[hidden] {
    display: none !important;
}

/* Alpine shows these once it has started. */
[x-cloak] {
    display: none !important;
}

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

body {
    margin: 0;
    min-height: 100vh;
    background: var(--c-bg);
    color: var(--c-text);
    font-family: var(--font);
    font-size: calc(16px * var(--text-scale));
    line-height: 1.5;
}

h1,
h2,
h3 {
    margin: 0;
    line-height: 1.15;
}

h1 {
    font-family: var(--font);
    font-weight: 700;
    font-size: calc(28px * var(--text-scale));
    letter-spacing: -0.5px;
}

h2 {
    font-size: calc(20px * var(--text-scale));
    font-weight: 600;
}

h3 {
    font-size: calc(17px * var(--text-scale));
    font-weight: 600;
}

p {
    margin: 0;
}

a {
    color: var(--c-accent-text);
    text-underline-offset: 3px;
}

a:hover {
    color: var(--c-accent);
}

:focus-visible {
    outline: 3px solid var(--c-accent);
    outline-offset: 2px;
}

/* Read out by a screen reader but not shown, for a label the layout already makes plain. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

@media (min-width: 820px) {
    h1 {
        font-size: calc(32px * var(--text-scale));
    }
}


/* ==========================================================================
   4. Layout
   ========================================================================== */

/* ---- 4.1 Page ------------------------------------------------------------
   <main> is a three-column grid: the content fills the middle column, the
   whole width but a gutter each side. Only Today (main.page-coach) keeps its
   content at most --page-width wide, centred. The signed-in bar comes before
   it (4.2). */

main {
    display: grid;
    grid-template-columns:
        [full-start] var(--gutter)
        [content-start] minmax(0, 1fr) [content-end]
        var(--gutter) [full-end];
    row-gap: var(--stack);
    align-content: start;
    padding-bottom: 40px;
}

main > *,
main > :is(#flash, #library, #today-summary) > * {
    grid-column: content;
}

/* Below the bar the page starts one block's space down, a heading a little more. */
body > header + main {
    padding-top: var(--stack);
}

body > header + main > h1:first-child,
body > header + main > .title:first-child {
    margin-top: 8px;
}

main.page-coach {
    grid-template-columns:
        [full-start] minmax(var(--gutter), 1fr)
        [content-start] minmax(0, var(--page-width)) [content-end]
        minmax(var(--gutter), 1fr) [full-end];
}

/* Pages without the bar (sign in, set password) are a narrow column. */
main.narrow {
    grid-template-columns:
        [full-start] minmax(var(--gutter), 1fr)
        [content-start] minmax(0, var(--narrow-width)) [content-end]
        minmax(var(--gutter), 1fr) [full-end];
    padding-top: 24px;
}

/* ---- 4.2 The bar ---------------------------------------------------------
   The dark bar at the top of every page (fragments/header), a full-width <header> before <main>: wordmark and,
   for someone signed in, navigation on the left; language and, for someone signed in, "Sign out" on the right.
   It keeps to one row on a phone, and stays at the top of the screen while the page scrolls. */

body > header {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    min-height: 60px;
    padding: 8px 16px;
    background: var(--c-bar);
    color: var(--c-text);
}

/* On a client's workout pages, a back arrow before the wordmark, as in a phone app. */
header .back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--tap);
    height: var(--tap);
    margin-left: -10px;
    border-radius: var(--radius-field);
    color: var(--c-text);
}

header .back:hover {
    background: var(--c-raised);
}

/* The rep ring mark links home; the app's name is the link's label for screen readers. */
header .wordmark {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font);
    font-weight: 700;
    font-size: calc(20px * var(--text-scale));
    color: var(--c-text);
    text-decoration: none;
}

/* The links take the room left over and scroll sideways when it is too little, so the bar stays one row. */
header nav {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
}

header nav a {
    flex-shrink: 0;
}

header nav a {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
    padding: 0 12px;
    border-radius: 8px;
    color: var(--c-text-3);
    font-size: calc(15px * var(--text-scale));
    font-weight: 600;
    text-decoration: none;
}

header nav a:hover {
    background: var(--c-raised);
    color: var(--c-text);
}

/* The page's section among Today, Progress and Library is a gold pill. */
header nav a[aria-current="page"] {
    background: var(--c-accent);
    color: var(--c-bg);
}

/* The coach's open clients, as tabs hanging from the bar: each a dot for her status, her name and a close cross.
   The one being viewed is on the page's black. */
/* On a coach's bar the tabs hang right after Library and take the room up to + Invite (design pg-today). */
header nav:has(+ nav.client-tabs) {
    flex: 0 1 auto;
}

header nav.client-tabs {
    flex: 1 1 0;
    align-self: flex-end;
    margin-left: 12px;
    align-items: flex-end;
    overflow: visible;  /* so "+ Open client" can drop its menu; the tabs scroll instead */
}

header nav.client-tabs ul {
    display: flex;
    gap: 2px;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    scrollbar-width: none;
}

/* "+ Open client" after the tabs (design pg-today): a dashed tab whose menu of names drops below it */
header nav.client-tabs details.open-client {
    position: relative;
    flex-shrink: 0;
}

header nav.client-tabs details.open-client > summary {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 12px;
    border: 1px dashed var(--c-control);
    border-bottom: 0;
    border-radius: 10px 10px 0 0;
    color: var(--c-text-3);
    font-size: calc(13px * var(--text-scale));
    font-weight: 600;
    white-space: nowrap;
    list-style: none;
    cursor: pointer;
}

header nav.client-tabs details.open-client > summary::-webkit-details-marker {
    display: none;
}

header nav.client-tabs details.open-client > summary::after {
    content: "\25BE";
    font-size: calc(12px * var(--text-scale));
}

header nav.client-tabs details.open-client[open] > summary,
header nav.client-tabs details.open-client > summary:hover {
    color: var(--c-text);
}

header nav.client-tabs details.open-client > .menu-items {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    min-width: 200px;
    max-height: min(420px, 70vh);
    overflow-y: auto;
    padding: 4px;
    border-radius: var(--radius-field);
    background: var(--c-bar);
    box-shadow: 0 8px 24px rgb(0 0 0 / 0.25);
}

header nav.client-tabs details.open-client > .menu-items > a {
    justify-content: flex-start;
    height: auto;
    min-height: var(--tap);
    padding: 0 12px;
    border-radius: var(--radius-field);
    color: var(--c-text);
    font-size: calc(14px * var(--text-scale));
    font-weight: 600;
    white-space: nowrap;
}

header nav.client-tabs details.open-client > .menu-items > a:hover {
    background: var(--c-raised);
}

/* On a phone the tabs and "+ Open client" take a row of their own at the foot of the bar, the tabs scrolling
   sideways, and the menu drops from the row's left edge so it stays on the screen. */
@media (max-width: 819px) {
    header nav.client-tabs {
        position: relative;
        flex-basis: 100%;
        order: 1;
        margin-left: 0;
    }

    header nav.client-tabs details.open-client {
        position: static;
    }
}

header nav.client-tabs li {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    height: 36px;
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: 10px 10px 0 0;
}

header nav.client-tabs li:has(a[aria-current="page"]) {
    border-color: var(--c-line);
    background: var(--c-bg);
}

header nav.client-tabs a {
    gap: 8px;
    min-height: 0;
    height: 100%;
    padding: 0 4px 0 12px;
    border-radius: 10px 0 0 0;
    background: none;
    color: var(--c-text-3);
    font-size: calc(13px * var(--text-scale));
    font-weight: 700;
}

header nav.client-tabs a[aria-current="page"],
header nav.client-tabs a:hover {
    background: none;
    color: var(--c-text);
}

header nav.client-tabs form {
    display: flex;
}

header nav.client-tabs button.close {
    min-height: 0;
    height: 28px;
    width: 28px;
    margin-right: 4px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    color: var(--c-text-3);
    font-size: calc(12px * var(--text-scale));
}

/* A status dot: blue for no weigh-in, red for faster than safe, amber for slower than plan, green for on course. */
.dot {
    display: inline-block;
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--c-text-3);
}

.dot-no-weigh-in {
    background: var(--c-info-dot);
}

.dot-faster-than-safe {
    background: var(--c-bad-dot);
}

.dot-slower-than-plan {
    background: var(--c-warn-dot);
}

.dot-on-course {
    background: var(--c-ok-text);
}

/* A client's pages under her tab, as a row of links over a line; the current one is underlined in gold. */
nav.sub-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--c-line);
    overflow-x: auto;
    scrollbar-width: none;
}

nav.sub-tabs a {
    flex-shrink: 0;
    padding: 10px 14px;
    border-bottom: 2px solid transparent;
    color: var(--c-text-3);
    font-size: calc(14px * var(--text-scale));
    font-weight: 700;
    text-decoration: none;
}

nav.sub-tabs a:hover {
    color: var(--c-text);
}

nav.sub-tabs a[aria-current="page"] {
    border-bottom-color: var(--c-accent);
    color: var(--c-text);
}

/* + Invite: the bar's one gold button. */
header a.invite {
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 14px;
    border-radius: 8px;
    background: var(--c-accent);
    color: var(--c-bg);
    font-size: calc(13px * var(--text-scale));
    font-weight: 800;
    text-decoration: none;
}

/* Everything from the language menu on is pushed to the right. */
header details.lang {
    position: relative;
    margin-left: auto;
}

/* The menu's button names the current language; the marker triangle is dropped. */
header details.lang > summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: var(--tap);
    padding: 0 12px;
    border: 1px solid var(--c-text-2);
    border-radius: var(--radius-field);
    color: var(--c-text);
    font-size: calc(14px * var(--text-scale));
    font-weight: 600;
    list-style: none;
    cursor: pointer;
}

header details.lang > summary::-webkit-details-marker {
    display: none;
}

header details.lang > summary::after {
    content: "\25BE";
    font-size: calc(12px * var(--text-scale));
}

header details.lang[open] > summary,
header details.lang > summary:hover {
    background: var(--c-raised);
}

/* The open menu drops below its button, right-aligned, over the page. */
header details.lang > form[action="/language"] {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 10;
    flex-direction: column;
    align-items: stretch;
    min-width: 160px;
    padding: 4px;
    border-radius: var(--radius-field);
    background: var(--c-bar);
    box-shadow: 0 8px 24px rgb(0 0 0 / 0.25);
}

header details.lang > form[action="/language"] button {
    justify-content: flex-start;
    min-height: var(--tap);
}

/* Bar buttons are quiet outlines rather than the orange call to action. */
header button[type="submit"] {
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid var(--c-text-2);
    background: transparent;
    color: var(--c-text);
    font-size: calc(14px * var(--text-scale));
}

header button[type="submit"]:hover {
    background: var(--c-raised);
}

/* The account menu: a burger icon whose menu drops below it, right-aligned, like the language menu. */
header details.account-menu {
    position: relative;
}

header details.account-menu > summary {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--tap);
    min-height: var(--tap);
    border: 1px solid var(--c-text-2);
    border-radius: var(--radius-field);
    color: var(--c-text);
    list-style: none;
    cursor: pointer;
}

header details.account-menu > summary::-webkit-details-marker {
    display: none;
}

header details.account-menu[open] > summary,
header details.account-menu > summary:hover {
    background: var(--c-raised);
}

header details.account-menu > .menu-items {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    min-width: 160px;
    padding: 4px;
    border-radius: var(--radius-field);
    background: var(--c-bar);
    box-shadow: 0 8px 24px rgb(0 0 0 / 0.25);
}

header details.account-menu > .menu-items > a,
header details.account-menu > .menu-items button {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    min-height: var(--tap);
    padding: 0 12px;
    border: 0;
    border-radius: var(--radius-field);
    background: transparent;
    color: var(--c-text);
    font-size: calc(14px * var(--text-scale));
    font-weight: 600;
    text-decoration: none;
}

header details.account-menu > .menu-items > a:hover,
header details.account-menu > .menu-items button:hover {
    background: var(--c-raised);
}

/* The client's toolbar: three equal tabs fixed to the foot of the screen, in the bar's colours; the current one is
   lit with the accent above it. The page keeps room below its last line so nothing hides under the bar. */
body:has(> nav.tabs) {
    padding-bottom: calc(64px + env(safe-area-inset-bottom));
}

nav.tabs {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 20;
    display: flex;
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--c-bar);
    box-shadow: 0 -4px 16px rgb(0 0 0 / 0.15);
}

nav.tabs > a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 60px;
    border-top: 3px solid transparent;
    color: var(--c-text-3);
    font-size: calc(12px * var(--text-scale));
    font-weight: 600;
    text-decoration: none;
}

nav.tabs > a:hover {
    background: var(--c-raised);
}

nav.tabs > a[aria-current="page"] {
    border-top-color: var(--c-accent);
    color: var(--c-text);
}

/* While an admin works as a coach: a full-width line above the rest. */
header > [role="status"] {
    order: -1;
    flex-basis: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding: 6px 0;
    color: var(--c-text-3);
    font-size: calc(14px * var(--text-scale));
    font-weight: 600;
}


/* ==========================================================================
   5. Components
   ========================================================================== */

/* ---- 5.1 Buttons ---------------------------------------------------------
   A submit button is the call to action (gold); other buttons are
   outlined. Pages narrow this down where a form has several buttons. */

button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--tap);
    padding: 0 18px;
    border: 1px solid var(--c-control);
    border-radius: var(--radius-field);
    background: none;
    color: var(--c-text);
    font: inherit;
    font-size: calc(14px * var(--text-scale));
    font-weight: 600;
    cursor: pointer;
}

button[type="submit"] {
    border-color: transparent;
    background: var(--c-accent);
    color: var(--c-bg);
}

button[type="submit"]:hover {
    background: var(--c-accent-text);
}

/* ---- 5.2 Language switcher ----------------------------------------------
   One button per language (fragments/language). */

form[action="/language"] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    font-size: calc(14px * var(--text-scale));
}


main.narrow form[action="/language"] button {
    min-height: var(--tap);
    padding: 0 10px;
    border: 0;
    background: transparent;
    color: var(--c-text);
    font-size: calc(14px * var(--text-scale));
}

main.narrow form[action="/language"] button:hover {
    background: var(--c-row-line);
}

header form[action="/language"] button {
    border: 0;
}

/* ---- 5.3 Form fields -----------------------------------------------------
   A form placed straight on the page stacks its labels and fields; a
   checkbox sits beside its label. */

label {
    font-size: calc(14px * var(--text-scale));
    font-weight: 600;
}

input:not([type="checkbox"], [type="radio"], [type="hidden"]),
select,
textarea {
    width: 100%;
    min-height: var(--tap);
    padding: 0 12px;
    border: 1.5px solid var(--c-control);
    border-radius: var(--radius-field);
    background: var(--c-panel);
    color: var(--c-text);
    font: inherit;
    font-size: calc(16px * var(--text-scale));  /* 16px or more stops phones zooming in */
}

textarea {
    min-height: 96px;
    padding: 10px 12px;
    resize: vertical;
}

input[type="checkbox"] {
    width: 22px;
    height: 22px;
    margin: 0;
    accent-color: var(--c-text);
}

small {
    color: var(--c-text-2);
    font-size: calc(13px * var(--text-scale));
}

/* The forms that stack: one placed straight on the page, or in a card on the
   coach's and the admin's pages. :where() keeps them easy for a page section to override. */
:where(main, :is(.page-coach, .page-coach-client, .page-week, .page-library, .page-admin, .page-account-edit) .card) > form:not([action="/language"]) {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 6px 10px;
    max-width: var(--form-width);
}

:where(main, :is(.page-coach, .page-coach-client, .page-week, .page-library, .page-admin, .page-account-edit) .card) > form:not([action="/language"]) > * {
    grid-column: 1 / -1;
}

:where(main, :is(.page-coach, .page-coach-client, .page-week, .page-library, .page-admin, .page-account-edit) .card) > form:not([action="/language"]) > input + label {
    margin-top: 10px;
}

:where(main, :is(.page-coach, .page-coach-client, .page-week, .page-library, .page-admin, .page-account-edit) .card) > form:not([action="/language"]) > input[type="checkbox"] {
    grid-column: 1;
    margin-top: 10px;
}

:where(main, :is(.page-coach, .page-coach-client, .page-week, .page-library, .page-admin, .page-account-edit) .card) > form:not([action="/language"]) > input[type="checkbox"] + label {
    grid-column: 2;
    font-size: calc(15px * var(--text-scale));
    font-weight: 400;
}

:where(main, :is(.page-coach, .page-coach-client, .page-week, .page-library, .page-admin, .page-account-edit) .card) > form:not([action="/language"]) > button {
    justify-self: start;
    margin-top: 10px;
}

/* ---- 5.4 Messages --------------------------------------------------------
   Status messages ("Saved", "You have been signed out") and errors. */

p[role="status"],
p[role="alert"] {
    padding: 12px 14px;
    border-radius: var(--radius-field);
    font-size: calc(14px * var(--text-scale));
    font-weight: 500;
}

p[role="status"] {
    background: var(--c-ok-bg);
    color: var(--c-ok-text);
}

p[role="alert"] {
    background: var(--c-bad-bg);
    color: var(--c-bad-text);
}

/* ---- 5.5 Cards -----------------------------------------------------------
   A white panel on the ground: a session on the client's home, an exercise
   in the live session. */

.card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--c-line);
    border-radius: var(--radius-card);
    background: var(--c-panel);
}

/* ---- 5.6 Quiet buttons ---------------------------------------------------
   Where a screen has several submit buttons, all but its main one are
   outlined like this. The page sections below say which. */

.page-swap > :is(ul, form) button[type="submit"] {
    border: 1.5px solid var(--c-control);
    background: none;
    color: var(--c-text);
}

.page-exercise ol.card button,
.page-accounts form[action$="/enable"] button {
    border: 1.5px solid var(--c-control);
    background: none;
    color: var(--c-text);
}

.page-swap > :is(ul, form) button[type="submit"]:hover,
.page-exercise ol.card button:hover,
.page-accounts form[action$="/enable"] button:hover {
    border-color: var(--c-text);
    background: none;
}

/* Quiet in the danger colour: the buttons that take something away and
   ask "Are you sure?" first (8.4). */
:is(.page-coach, .page-admin) form[action$="/cancel"] button,
.page-exercise form[action$="/archive"] button,
.page-accounts form[action$="/disable"] button {
    border: 1.5px solid var(--c-control);
    background: none;
    color: var(--c-danger-text);
}

:is(.page-coach, .page-admin) form[action$="/cancel"] button:hover,
.page-exercise form[action$="/archive"] button:hover,
.page-accounts form[action$="/disable"] button:hover {
    border-color: var(--c-danger-text);
    background: none;
}


/* ---- 5.7 Chips -----------------------------------------------------------
   A short status in a rounded pill: info for finished or on target, warn
   for in progress or missed, neutral otherwise. The session review's set
   marks are chips by position (7.4). */

.chip,
.page-review ol > li > span:last-child {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    background: var(--c-raised);
    color: var(--c-text-2);
    font-size: calc(12px * var(--text-scale));
    font-weight: 600;
    white-space: nowrap;
}

.chip-info,
.page-review .set-hit > span:last-child {
    background: var(--c-ok-bg);
    color: var(--c-ok-text);
}

.chip-warn,
.page-review .set-missed > span:last-child {
    background: var(--c-warn-bg);
    color: var(--c-warn-text);
}

.chip-done {
    background: var(--c-ok-bg);
    color: var(--c-ok-text);
}

/* ---- 5.8 Drawing ---------------------------------------------------------
   An exercise's start and end drawings (fragments/drawing), one on top of
   the other: the end frame fades in and out, so the movement plays. With
   reduced motion only the end frame shows. The credit line sits below. A
   coach's own picture is one still image (.drawing-still) without a credit. */
.drawing {
    margin: 0;
    max-width: 240px;
}

.drawing-frames {
    position: relative;
    display: block;
    aspect-ratio: 1;
    background: var(--c-panel);
    border: 1px solid var(--c-line);
    border-radius: var(--radius-card);
    overflow: hidden;
}

.drawing-frames img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.drawing-end {
    animation: drawing-move 3s ease-in-out infinite alternate;
}

@keyframes drawing-move {
    0%, 30% { opacity: 0; }
    70%, 100% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .drawing-start { visibility: hidden; }
    .drawing-end { animation: none; }
}

/* The credit is small, to fit under the drawing in two lines, and still readable. */
.drawing figcaption {
    margin-top: 4px;
    font-size: calc(11px * var(--text-scale));
    line-height: 1.35;
    color: var(--c-text-2);
}

/* A row's small picture (fragments/drawing :: thumb): the still end drawing,
   or a dumbbell when the exercise has none. */
.thumb {
    flex: none;
    width: 48px;
    height: 48px;
    object-fit: contain;
    background: var(--c-panel);
    border: 1px solid var(--c-line);
    border-radius: 8px;
}

.thumb-default {
    padding: 10px;
    color: var(--c-text-2);
}

.drawing figcaption a {
    color: inherit;
}


/* ==========================================================================
   6. Coach
   The coach's screens, planned at a desk but checked from a phone too: the
   page's blocks are cards, each card has at most one orange button, and
   rows inside a card are divided by a thin line.
   ========================================================================== */

/* ---- 6.0 Shared ----------------------------------------------------------
   Lists inside the coach's cards, and the buttons that are not the card's
   call to action. */

:is(.page-coach, .page-coach-client, .page-week, .page-library, .page-exercise, .page-admin) :is(ul.card, ol.card, .card :is(ul, ol)) {
    margin: 0;
    padding: 0;
    list-style: none;
}

:is(.page-coach, .page-coach-client, .page-week, .page-library, .page-exercise, .page-admin) :is(ul.card, ol.card, .card :is(ul, ol)) > li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    padding: 10px 0;
    border-top: 1px solid var(--c-row-line);
}

:is(.page-coach, .page-coach-client, .page-week, .page-library, .page-exercise, .page-admin) :is(ul.card, ol.card, .card :is(ul, ol)) > li > span:not(.chip) {
    color: var(--c-text-2);
    font-size: calc(14px * var(--text-scale));
    font-variant-numeric: tabular-nums;
}

/* A titled row's heading, "Row 3 · Pull then push", is a quiet line over its
   exercises; its superset toggle is a small icon button at the line's far end. */
.page-week .card li.row > h3 > span + span:not(.chip)::before {
    content: "· ";
}

.page-week .card li.row > h3 > span + span:not(.chip) {
    color: var(--c-text-2);
}

.page-week .card li.row > h3 > .chip {
    height: 20px;
    margin-left: 4px;
    padding: 0 8px;
    font-size: calc(12px * var(--text-scale));
}

/* The dark buttons: a second action next to the card's orange one */
.page-coach-client form[action$="/copy"] button,
.page-week form[action^="/coach/planned-exercises/"] button,
.page-week form[action^="/coach/lines/"] button,
.page-library form[role="search"] button,
.page-week form[role="search"] button,
.page-exercise form[role="search"] button,
.page-exercise form[action$="/substitutes"] button,
.page-accounts form[action="/admin/work-as"] button {
    background: none;
    color: var(--c-text);
}

.page-coach-client form[action$="/copy"] button:hover,
.page-week form[action^="/coach/planned-exercises/"] button:hover,
.page-week form[action^="/coach/lines/"] button:hover,
.page-library form[role="search"] button:hover,
.page-week form[role="search"] button:hover,
.page-exercise form[role="search"] button:hover,
.page-exercise form[action$="/substitutes"] button:hover,
.page-accounts form[action="/admin/work-as"] button:hover {
    background: var(--c-raised);
}

/* ---- 6.1 Today (coach.html) ----------------------------------------------
   The coach's home: the title with a line under-stating what needs doing,
   four tiles, then the clients as a table whose every row is a link that
   opens her tab (a segment per session, the week's chip, last session,
   energy, an 8-week weight line and the status), and the pending
   invitations below it. Below 820px the tiles go two by two and a row
   keeps only the client, the sessions and the status. */
.page-coach .today-title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
}

.page-coach .today-title > h1 {
    font-size: calc(26px * var(--text-scale));
    font-weight: 800;
}

.page-coach .today-title > p {
    margin: 0;
    color: var(--c-text-3);
    font-size: calc(13px * var(--text-scale));
}

.page-coach .today-tiles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: var(--stack);
}

.page-coach .tile {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--c-panel);
}

.page-coach .tile > p {
    margin: 0;
    color: var(--c-text-3);
    font-size: calc(11px * var(--text-scale));
}

.page-coach .tile > p:first-child {
    color: var(--c-text);
    font-size: calc(12px * var(--text-scale));
    font-weight: 700;
}

.page-coach .tile-warn > p:first-child {
    color: var(--c-warn-text);
}

.page-coach .tile > strong {
    font-size: calc(26px * var(--text-scale));
    font-weight: 800;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

/* The title and tiles sit in the page's grid as if their box were not there,
   so an htmx answer can replace them together */
#today-summary {
    display: contents;
}

.page-coach .tile-attention > p:first-child {
    color: var(--c-bad-text);
}

/* Needs attention: a row per client per reason, its level chip, who and
   what with why beneath, the action that opens it and mark as handled */
.page-coach .today-attention {
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--c-panel);
}

.page-coach .today-attention > h2 {
    margin: 0 0 8px;
    font-size: calc(15px * var(--text-scale));
    font-weight: 800;
}

.page-coach .today-attention > ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.page-coach .attention-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid var(--c-line);
}

.page-coach .attention-row:first-child {
    border-top: 0;
}

.page-coach .level {
    min-width: 44px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: calc(11px * var(--text-scale));
    font-weight: 700;
    text-align: center;
}

.page-coach .level-now {
    background: var(--c-bad-bg);
    color: var(--c-bad-text);
}

.page-coach .level-soon {
    background: var(--c-warn-bg);
    color: var(--c-warn-text);
}

.page-coach .attention-text > p {
    margin: 0;
    font-size: calc(13px * var(--text-scale));
}

.page-coach .attention-text > p.why,
.page-coach .today-attention-none {
    margin: 0;
    color: var(--c-text-3);
    font-size: calc(12px * var(--text-scale));
}

.page-coach .attention-action {
    color: var(--c-accent-text);
    font-size: calc(12px * var(--text-scale));
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.page-coach .attention-row > form {
    margin: 0;
}

.page-coach .attention-row > form > button.icon-btn {
    width: var(--tap);
    padding: 0;
    border-color: var(--c-control);
    background: none;
    color: var(--c-text);
}

.page-coach .attention-row > form > button.icon-btn:hover {
    border-color: var(--c-text);
}

/* Needs attention and Recently finished on the left, next week's checklist
   on the right; below 900px they stack */
.page-coach .today-panels {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--stack);
}

.page-coach .today-panel-main {
    display: flex;
    flex: 2 1 480px;
    flex-direction: column;
    gap: var(--stack);
    min-width: 0;
}

.page-coach :is(.today-finished, .today-next) {
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--c-panel);
}

.page-coach .today-next {
    flex: 1 1 340px;
}

.page-coach :is(.today-finished, .today-next) > h2 {
    margin: 0 0 8px;
    font-size: calc(15px * var(--text-scale));
    font-weight: 800;
}

.page-coach .finished-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid var(--c-line);
    color: inherit;
    text-decoration: none;
}

.page-coach .today-finished > h2 + .finished-row {
    border-top: 0;
}

.page-coach .finished-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    font-size: calc(13px * var(--text-scale));
}

.page-coach :is(.finished-meta, .finished-when) {
    color: var(--c-text-3);
    font-size: calc(12px * var(--text-scale));
}

.page-coach .today-next > ul {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

.page-coach .next-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-top: 1px solid var(--c-line);
    font-size: calc(13px * var(--text-scale));
}

.page-coach .next-row:first-child {
    border-top: 0;
}

.page-coach .next-row > form {
    margin: 0;
}

.page-coach .next-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--c-text-3);
}

.page-coach .next-dot.on_course { background: var(--c-ok-text); }
.page-coach .next-dot.slower_than_plan { background: var(--c-warn-text); }
.page-coach .next-dot.faster_than_safe { background: var(--c-bad-text); }
.page-coach .next-dot.no_weigh_in { background: var(--c-info-text); }

.page-coach .next-step {
    min-width: 64px;
    padding: 4px 10px;
    border: 1px solid var(--c-control);
    border-radius: 8px;
    background: none;
    color: var(--c-text);
    font: inherit;
    font-size: calc(12px * var(--text-scale));
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.page-coach .next-step:hover {
    border-color: var(--c-text);
}

/* The client table: seven columns shared by every row */
.page-coach .today-clients {
    display: grid;
    grid-template-columns: minmax(0, 1.9fr) minmax(0, 1.65fr) minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(0, 0.55fr) minmax(0, 1.45fr) minmax(0, 1.2fr);
    margin-bottom: var(--stack);
    border-radius: 12px;
    background: var(--c-panel);
    overflow: hidden;
}

.page-coach :is(.today-head, .today-row) {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    align-items: center;
    padding: 0 14px;
}

.page-coach .today-head {
    min-height: 32px;
    color: var(--c-text-3);
    font-size: calc(11px * var(--text-scale));
}

.page-coach .today-row {
    min-height: 45px;
    border-top: 1px solid var(--c-row-line);
    color: var(--c-text);
    font-size: calc(13px * var(--text-scale));
    text-decoration: none;
}

.page-coach .today-row:hover {
    background: var(--c-raised);
}

.page-coach .today-row > [role="cell"] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-variant-numeric: tabular-nums;
}

.page-coach .today-client {
    font-weight: 700;
}

.page-coach .avatar {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: var(--c-raised);
    font-size: calc(10px * var(--text-scale));
    font-weight: 800;
}

/* A session is a short bar: done light, in progress gold, to do dim */
.page-coach .segments {
    display: flex;
    gap: 3px;
}

.page-coach .seg {
    width: 30px;
    height: 6px;
    border-radius: 999px;
    background: var(--c-control);
}

.page-coach .seg-done {
    background: var(--c-text);
}

.page-coach .seg-in-progress {
    background: var(--c-accent);
}

/* The week's chip and the status chip, in the shared state colours */
.page-coach :is(.week-chip, .status) {
    padding: 2px 9px;
    border-radius: 999px;
    font-size: calc(11px * var(--text-scale));
    font-weight: 700;
    white-space: nowrap;
}

.page-coach .week-published,
.page-coach .status.on_course { background: var(--c-ok-bg); color: var(--c-ok-text); }
.page-coach .week-unpublished,
.page-coach .status.slower_than_plan { background: var(--c-warn-bg); color: var(--c-warn-text); }
.page-coach .week-not-planned,
.page-coach .status.faster_than_safe { background: var(--c-bad-bg); color: var(--c-bad-text); }
.page-coach .status.no_weigh_in { background: var(--c-info-bg); color: var(--c-info-text); }

.page-coach .week-draft {
    border: 1px dashed var(--c-draft-line);
    color: var(--c-text-2);
}

@media (max-width: 819.98px) {
    .page-coach .today-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .page-coach .today-clients {
        grid-template-columns: minmax(0, 1fr) auto auto;
    }

    .page-coach .today-row > [role="cell"]:not(:first-child, :nth-child(2), :last-child),
    .page-coach .today-head > :not(:first-child, :nth-child(2), :last-child) {
        display: none;
    }

    .page-coach .segments {
        display: none;
    }
}

/* "Cancel" on a pending invitation sits at the end of its row; its colour
   is in 5.6. */
:is(.page-coach, .page-admin) form[action$="/cancel"] {
    margin-left: auto;
}

/* The admin's Resend and Cancel are icons side by side at the end of the row:
   Resend takes the free space before them, and each is a 44px square. */
.page-admin li > form[action$="/resend"] {
    margin-left: auto;
}

.page-admin li > form[action$="/resend"] + form {
    margin-left: 0;
}

.page-admin li > form > button.icon-btn {
    width: var(--tap);
    padding: 0;
}

.page-admin li > form[action$="/resend"] > button.icon-btn {
    border-color: var(--c-control);
    background: none;
    color: var(--c-text);
}

.page-admin li > form[action$="/resend"] > button.icon-btn:hover {
    border-color: var(--c-text);
}

/* The admin page's title with "Invite coach" at the far end */
.page-admin > .title-row {
    margin-bottom: var(--stack);
}

/* ---- 6.2 A client's weeks (coach-client.html) ---------------------------
   Under the sub-tabs the page is two columns: the weeks panel (280 px, on
   the panel colour, full height) and the week. The panel sums the client up
   (avatar, name, goal and mode, Details; four tiles) and lists her weeks as
   cards: dates, chip, a segment per session and a line for the client. The
   current week's card has a gold outline. The headings "This week", "Coming
   up" and "Past weeks" are for screen readers; the order shows it. */

main.page-workspace {
    display: block;
    padding: 0;
}

main.page-workspace > nav.sub-tabs {
    margin: 0;
    padding: 0 var(--gutter);
}

.workspace-body {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    min-height: calc(100dvh - 100px);
}

.weeks-panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border-right: 1px solid var(--c-line);
    background: var(--c-panel);
}

.weeks-panel .client-summary {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
}

.weeks-panel .avatar {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--c-accent);
    color: var(--c-bg);
    font-size: calc(15px * var(--text-scale));
    font-weight: 800;
}

.weeks-panel .who {
    display: flex;
    flex-direction: column;
    margin: 0;
    min-width: 0;
}

.weeks-panel .who > strong {
    font-size: calc(16px * var(--text-scale));
    font-weight: 800;
}

.weeks-panel .goal {
    color: var(--c-text-3);
    font-size: calc(12px * var(--text-scale));
}

.weeks-panel .client-summary > a {
    align-self: start;
    color: var(--c-accent-text);
    font-size: calc(12px * var(--text-scale));
    font-weight: 700;
}

.weeks-panel .panel-tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.weeks-panel .tile {
    display: flex;
    flex-direction: column;
    padding: 7px 8px;
    border-radius: 8px;
    background: var(--c-panel-2);
}

.weeks-panel .tile > span {
    color: var(--c-text-3);
    font-size: calc(11px * var(--text-scale));
}

.weeks-panel .tile > strong {
    font-size: calc(15px * var(--text-scale));
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.weeks-panel .status-text.on_course { color: var(--c-ok-text); }
.weeks-panel .status-text.slower_than_plan { color: var(--c-warn-text); }
.weeks-panel .status-text.faster_than_safe { color: var(--c-bad-text); }
.weeks-panel .status-text.no_weigh_in { color: var(--c-info-text); }

.weeks-panel #weeks {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.weeks-panel .weeks-head {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
}

.weeks-panel .weeks-head > h2 {
    margin: 0 auto 0 0;
    color: var(--c-text-3);
    font-size: calc(12px * var(--text-scale));
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.weeks-panel .weeks-head > button {
    min-height: 30px;
    padding: 4px 10px;
    border: 1px solid var(--c-control);
    background: none;
    color: var(--c-text);
    font-size: calc(12px * var(--text-scale));
}

.weeks-panel #weeks > h3 {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.weeks-panel ul.week-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.weeks-panel .week-card > a {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 9px 10px;
    border-radius: 10px;
    background: var(--c-panel-2);
    color: var(--c-text);
    text-decoration: none;
}

.weeks-panel .week-card > a:hover {
    background: var(--c-raised);
}

.weeks-panel .week-card > a[aria-current="page"] {
    outline: 1.5px solid var(--c-accent);
}

.weeks-panel .week-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.weeks-panel .week-label {
    font-size: calc(13px * var(--text-scale));
    font-weight: 700;
}

.weeks-panel .week-chip {
    padding: 2px 7px;
    border-radius: 999px;
    font-size: calc(10px * var(--text-scale));
    font-weight: 700;
    white-space: nowrap;
}

.weeks-panel .week-published { background: var(--c-ok-bg); color: var(--c-ok-text); }
.weeks-panel .week-unpublished { background: var(--c-warn-bg); color: var(--c-warn-text); }
.weeks-panel .week-draft { border: 1px dashed var(--c-draft-line); color: var(--c-text-2); }
.weeks-panel .week-archived { background: var(--c-panel-2); color: var(--c-text-2); }

/* beside the week's own chip, at the right of its card */
.weeks-panel .week-archived { margin-left: auto; }

.weeks-panel .show-archived {
    margin: 0 0 8px;
    font-size: calc(12px * var(--text-scale));
    color: var(--c-text-2);
}

.weeks-panel .show-archived label {
    display: flex;
    align-items: center;
    gap: 8px;
}

.weeks-panel .show-archived input[type="checkbox"] {
    width: 16px;
    height: 16px;
}

.weeks-panel .segments {
    display: flex;
    gap: 3px;
}

.weeks-panel .seg {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: var(--c-control);
}

.weeks-panel .seg-done { background: var(--c-text); }
.weeks-panel .seg-in-progress { background: var(--c-accent); }
.weeks-panel .seg-not-done { background: var(--c-danger); }
.weeks-panel .seg-no-plan { border: 1px dashed var(--c-draft-line); background: none; }

.weeks-panel .week-line {
    color: var(--c-text-3);
    font-size: calc(11px * var(--text-scale));
}

.weeks-panel nav.pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    color: var(--c-text-2);
    font-size: calc(12px * var(--text-scale));
    font-variant-numeric: tabular-nums;
}

.weeks-panel .weeks-none {
    color: var(--c-text-3);
    font-size: calc(13px * var(--text-scale));
}

.week-main {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 18px;
}

.week-main > h1 {
    margin: 0;
    font-size: calc(22px * var(--text-scale));
    font-weight: 800;
}

.week-main-none {
    color: var(--c-text-3);
}

/* ---- 3b A week's sessions stacked (coach-week.html) ----------------------
   The week's header (its title, chip, how far the client got and the
   toolbar), then each session in one column as a card that opens and
   collapses: its summary is the title, focus, a state chip and a meta line. */
.week-main-head {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.week-main-head > h1 {
    margin: 0;
    font-size: calc(22px * var(--text-scale));
    font-weight: 800;
}

.week-progress {
    color: var(--c-text-2);
    font-size: calc(13px * var(--text-scale));
}

#sessions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.page-week section.card {
    padding: 0;
    gap: 0;
}

.page-week details.session > summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    padding: 12px 16px;
    cursor: pointer;
    list-style: none;
}

.page-week details.session > summary::-webkit-details-marker {
    display: none;
}

.page-week details.session > summary::before {
    content: "▸";
    color: var(--c-text-3);
}

.page-week details.session[open] > summary::before {
    content: "▾";
}

.page-week details.session > summary > h2 {
    margin: 0;
    font-size: calc(15px * var(--text-scale));
    font-weight: 700;
}

.session-focus {
    color: var(--c-text-3);
    font-size: calc(13px * var(--text-scale));
}

.session-meta {
    margin-left: auto;
    color: var(--c-text-3);
    font-size: calc(12px * var(--text-scale));
    font-variant-numeric: tabular-nums;
}

.session-state {
    height: 20px;
    padding: 0 8px;
    font-size: calc(11px * var(--text-scale));
    font-weight: 700;
}

.session-state.state-done { background: var(--c-text); color: var(--c-bg); }
.session-state.state-in-progress { border: 1.5px solid var(--c-accent); color: var(--c-accent-text); }
.session-state.state-to-do { border: 1px solid var(--c-draft-line); color: var(--c-text-2); }
.session-state.state-not-done { background: var(--c-bad-bg); color: var(--c-bad-text); }

.page-week details.session[open] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 16px;
}

.page-week details.session > :not(summary) {
    margin-inline: 16px;
}

/* A session the client is doing has a gold outline, as its chip */
.page-week section.card:has(> details.session > summary > .state-in-progress) {
    border-color: var(--c-accent);
}

/* ---- 3c Set rows (coach-week.html) ----------------------------------------
   Each exercise is a row: its tag (1, A1, A2), its name (a superset's first
   says "Superset A · 4 rounds"), a cell per set up to five, its load and rest,
   and its menu (the pencil). A cell shows the target, ↑/↓ for a weight change
   and the effort letter on its colour; a set the client logged has a white
   outline and what she did under it. A superset's rows are on its tint. A
   cell, and the pencil, open their form as a panel under them. */
.page-week .card ol.rows,
.page-week .card ol.rows > li > ol {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.page-week details.session > ol.rows {
    margin-inline: 0;
}

.page-week .card ol.rows > li.row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 0;
    border-top: 0;
}

.page-week .card li.row > ol {
    flex: 1 0 100%;
}

.page-week .card li.row > h3 {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin: 10px 16px 4px;
    color: var(--c-text-3);
    font-size: calc(13px * var(--text-scale));
    font-weight: 600;
}

.page-week .card li.row > form.superset {
    margin: 4px 16px 4px auto;
}

.page-week .card li.row > form.superset button {
    width: 30px;
    min-height: 0;
    height: 30px;
    padding: 0;
    border: 1px solid var(--c-control);
    background: none;
    color: var(--c-text-3);
}

.page-week .card li.row > form.superset button:hover {
    border-color: var(--c-text-2);
    color: var(--c-text);
}

/* In a superset, the toggle is lit: pressing it undoes the superset */
.page-week .card li.row > form.superset:has(input[value="false"]) button {
    border-color: var(--c-info-dot);
    color: var(--c-info-text);
}

/* The library search at the foot of a session: "+ Add exercise", dashed like a place to fill, opens it */
.page-week details.exercise-adder {
    border-top: 1px solid var(--c-row-line);
}

.page-week details.exercise-adder[open] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
}

.page-week summary.add-exercise {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    margin: 10px 12px;
    padding: 0 12px;
    border: 1px dashed var(--c-control);
    border-radius: var(--radius-field);
    color: var(--c-text-2);
    font-size: calc(13px * var(--text-scale));
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.page-week summary.add-exercise::-webkit-details-marker {
    display: none;
}

.page-week summary.add-exercise:hover {
    border-color: var(--c-accent);
    color: var(--c-accent-text);
}

/* Once open, the search takes the button's place */
.page-week details.exercise-adder[open] > summary.add-exercise {
    display: none;
}

.page-week details.exercise-adder > [role="alert"] {
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--c-bad-text);
    font-size: calc(13px * var(--text-scale));
}

.page-week form.exercise-search {
    max-width: var(--form-width);
}

.page-week .combobox {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 10px;
    border: 1.5px solid var(--c-control);
    border-radius: var(--radius-field);
    background: var(--c-bg);
    color: var(--c-text-3);
}

.page-week .combobox:focus-within {
    border-color: var(--c-accent);
}

.page-week .combobox > svg {
    flex: none;
}

.page-week .combobox > input[name="find"] {
    flex: 1;
    min-width: 0;
    min-height: 0;
    height: 36px;
    padding: 0;
    border: 0;
    background: none;
    font-size: calc(14px * var(--text-scale));
    outline: none;
}

.page-week .combobox > input[name="find"]::-webkit-search-cancel-button {
    display: none;
}

.page-week .combobox > .library-count {
    flex: none;
    color: var(--c-text-3);
    font-size: calc(11px * var(--text-scale));
}

.page-week .choices {
    max-width: var(--form-width);
}

.page-week .choices:empty {
    display: none;
}

.page-week .listbox {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: -4px;
    padding: 6px;
    border: 1px solid var(--c-line);
    border-radius: 10px;
    background: var(--c-bar);
    box-shadow: 0 12px 30px rgb(0 0 0 / 0.5);
}

.page-week .listbox > ul {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.page-week .listbox > ul > li {
    display: block;
    padding: 0;
    border: 0;
}

.page-week .listbox form {
    display: block;
    width: 100%;
    margin: 0;
}

.page-week .listbox button.option {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    min-height: 0;
    padding: 8px 10px;
    border: 0;
    border-radius: var(--radius-field);
    background: none;
    color: var(--c-text);
    text-align: left;
}

.page-week .listbox button.option:hover,
.page-week .listbox button.option[aria-selected="true"] {
    background: var(--c-accent-tint);
}

.page-week .listbox .option-text {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    line-height: normal;
}

.page-week .listbox .option-name {
    font-size: calc(13px * var(--text-scale));
    font-weight: 700;
}

.page-week .listbox .option-name > b {
    color: var(--c-accent-text);
}

.page-week .listbox .option-meta,
.page-week .listbox .option-enter {
    color: var(--c-text-3);
    font-size: calc(11px * var(--text-scale));
    font-weight: 400;
}

/* "Enter" shows on the chosen match alone */
.page-week .listbox button.option:not([aria-selected="true"]) > .option-enter {
    visibility: hidden;
}

.page-week .listbox-none {
    margin: 0;
    padding: 8px 10px;
    color: var(--c-text-3);
    font-size: calc(13px * var(--text-scale));
}

.page-week .listbox-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 12px;
    margin-top: 4px;
    padding: 8px 10px 4px;
    border-top: 1px solid var(--c-row-line);
    font-size: calc(12px * var(--text-scale));
}

.page-week .listbox-foot > span {
    color: var(--c-text-3);
}

.page-week .adder-hint {
    margin: 0;
    color: var(--c-text-3);
    font-size: calc(12px * var(--text-scale));
}

.page-week .card li.exercise-row {
    position: relative;
    display: grid;
    grid-template-columns: 24px minmax(160px, 1fr) auto minmax(110px, 200px) 34px;
    grid-template-areas:
        "tag name cells load menu"
        ". did did did .";
    align-items: center;
    gap: 4px 12px;
    padding: 8px 16px;
    border-top: 1px solid var(--c-row-line);
}

.page-week .card li.exercise-row.in-superset {
    background: var(--c-superset);
}

.page-week .card li.exercise-row > .tag {
    grid-area: tag;
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: var(--c-raised);
    color: var(--c-text);
    font-size: calc(11px * var(--text-scale));
    font-weight: 800;
}

.page-week .card li.exercise-row.in-superset > .tag {
    background: var(--c-accent);
    color: var(--c-bg);
}

.page-week .card li.exercise-row > .exercise-name {
    grid-area: name;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 8px;
    min-width: 0;
}

.page-week .card .exercise-name > .thumb {
    width: 28px;
    height: 28px;
    border-radius: 6px;
}

.page-week .card .exercise-name > strong {
    font-size: calc(14px * var(--text-scale));
    font-weight: 700;
}

.page-week .card .exercise-name > .superset-label {
    flex-basis: 100%;
    color: var(--c-accent-text);
    font-size: calc(10px * var(--text-scale));
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.page-week .card li.exercise-row > .exercise-rests {
    grid-area: load;
    display: flex;
    flex-direction: column;
    color: var(--c-text-2);
    font-size: calc(12px * var(--text-scale));
}

.page-week .card li.exercise-row > .did {
    grid-area: did;
    margin: 0;
    font-size: calc(12px * var(--text-scale));
}

.page-week .card li.exercise-row > details {
    grid-area: menu;
    position: relative;
    justify-self: end;
}

.page-week .card ol.lines {
    grid-area: cells;
    display: flex;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.page-week .card li.set-cell {
    position: relative;
    display: block;
    padding: 0;
    border-top: 0;
}

/* "Changed" is said by the dashed outline; the word stays for readers */
.page-week .card li.set-cell > .chip {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.page-week .card .cell {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 54px;
    height: 30px;
    border-radius: 6px;
    background: var(--c-panel-2);
    color: var(--c-text);
    font-size: calc(12px * var(--text-scale));
    font-weight: 800;
    list-style: none;
    font-variant-numeric: tabular-nums;
}

.page-week .card summary.cell {
    cursor: pointer;
}

.page-week .card summary.cell::-webkit-details-marker {
    display: none;
}

.page-week .card .cell-face {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 4px;
    line-height: 1.1;
}

.page-week .card .cell-did {
    flex-basis: 100%;
    font-size: calc(8px * var(--text-scale));
    font-weight: 700;
    text-align: center;
}

.page-week .card li.set-cell.intensity-medium .cell { background: var(--c-medium); color: #1A1A1A; }
.page-week .card li.set-cell.intensity-strong .cell { background: var(--c-strong); color: #1A1A1A; }
.page-week .card li.set-cell.intensity-max .cell { background: var(--c-max); color: #FFFFFF; }

.page-week .card li.set-cell.logged .cell {
    outline: 2px solid var(--c-text);
    outline-offset: -2px;
}

.page-week .card li.set-cell.changed .cell {
    outline: 2px dashed var(--c-accent);
    outline-offset: 1px;
}

.page-week .card li.set-cell > details[open] > summary.cell {
    outline: 3px solid var(--c-accent);
    outline-offset: 0;
}

.page-week .card li.set-empty {
    width: 54px;
    height: 30px;
    box-sizing: border-box;
    border: 1px dashed var(--c-control);
    border-radius: 6px;
}

/* A cell's form, and an exercise's, as a panel under what opened it */
.page-week .card :is(.cell-editor, .menu-panel) {
    position: absolute;
    top: calc(100% + 6px);
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 312px;
    padding: 12px;
    border: 1px solid var(--c-accent);
    border-radius: 12px;
    background: var(--c-panel);
    box-shadow: 0 12px 32px rgb(0 0 0 / 50%);
}

.page-week .card .cell-editor {
    left: 0;
}

.page-week .card .menu-panel {
    right: 0;
    width: 340px;
}

/* The set editor, about 320 px wide: Target as a segmented control, one wide
   stepper per number (From and To, or Minutes and Seconds, side by side),
   Effort and Weight on this set as rows of three with the effort's colour on
   top (fixed at Max for max reps), then Apply beside Save and the keys.
   Scoped to .page-week so it wins over the editor's general fieldset rules. */
.page-week .card .cell-editor {
    width: 320px;
}

.page-week .set-editor {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.page-week .set-editor fieldset {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin: 0;
    padding: 0;
    border: 0;
}

.page-week .set-editor fieldset > legend,
.page-week .set-editor .target-field > label,
.page-week .set-editor > label {
    grid-column: 1 / -1;
    margin: 0 0 2px;
    padding: 0;
    color: var(--c-text-3);
    font-size: calc(12px * var(--text-scale));
    font-weight: 400;
}

.page-week .set-editor-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.page-week .set-editor-title {
    font-weight: 700;
}

.page-week .set-editor-close {
    width: 32px;
    height: 32px;
    min-height: 0;
    padding: 0;
    border: 1px solid var(--c-control);
    border-radius: 8px;
    background: transparent;
    color: var(--c-text);
}

.page-week .set-editor fieldset > input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.page-week .set-editor fieldset > input[type="radio"] + label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 36px;
    margin: 0;
    padding: 0 4px;
    border: 1px solid var(--c-control);
    border-radius: 8px;
    color: var(--c-text-2);
    font-size: calc(13px * var(--text-scale));
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
}

.page-week .set-editor fieldset > input[type="radio"]:checked + label {
    border-color: var(--c-accent);
    background: var(--c-accent);
    color: var(--c-bg);
    font-weight: 600;
}

.page-week .set-editor fieldset > input[type="radio"]:focus-visible + label {
    outline: 3px solid var(--c-accent);
    outline-offset: 2px;
}

/* Target: four segments on one track */
.page-week .set-editor .target-tabs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2px;
}

.page-week .set-editor .target-tabs > legend + input + label,
.page-week .set-editor .target-tabs > input + label {
    border-color: transparent;
    background: var(--c-panel-2);
    border-radius: 0;
}

.page-week .set-editor .target-tabs > label:first-of-type {
    border-radius: 8px 0 0 8px;
}

.page-week .set-editor .target-tabs > label:last-of-type {
    border-radius: 0 8px 8px 0;
}

.page-week .set-editor .target-tabs > input:checked + label {
    border-color: var(--c-accent);
    background: var(--c-accent);
    border-radius: 6px;
}

/* Effort: its colour as a short bar on top; the chosen one outlined in it */
.page-week .set-editor .effort > input + label {
    flex-direction: column;
    gap: 3px;
    min-height: 40px;
    font-size: calc(12px * var(--text-scale));
}

.page-week .set-editor .effort > input + label::before {
    content: "";
    width: 14px;
    height: 3px;
    border-radius: 2px;
    background: var(--c-effort);
}

.page-week .set-editor .effort > label.effort-medium { --c-effort: var(--c-medium); }
.page-week .set-editor .effort > label.effort-strong { --c-effort: var(--c-strong); }
.page-week .set-editor .effort > label.effort-max { --c-effort: var(--c-max); }

.page-week .set-editor .effort > input:checked + label {
    border-color: var(--c-effort);
    background: var(--c-panel-2);
    color: var(--c-text);
}

.page-week .set-editor .effort-fixed {
    display: none;
    grid-column: 1 / -1;
    margin: 0;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--c-max);
    color: #FFFFFF;
    font-size: calc(13px * var(--text-scale));
}

.page-week .set-editor:has(input[name="target"][value="MAX"]:checked) .effort-fixed {
    display: block;
}

.page-week .set-editor:has(input[name="target"][value="MAX"]:checked) .effort > :is(input, label) {
    display: none;
}

/* The chosen tab's numbers: one wide stepper, or two side by side */
.page-week .set-editor .target-field {
    display: none;
    gap: 2px 8px;
}

.page-week .set-editor:has(input[name="target"][value="REPS"]:checked) .field-reps {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.page-week .set-editor:has(input[name="target"][value="RANGE"]:checked) .field-range,
.page-week .set-editor:has(input[name="target"][value="TIME"]:checked) .field-time {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto;
    grid-auto-flow: column;
}

.page-week .set-editor .field-range > label,
.page-week .set-editor .field-time > label {
    grid-column: auto;
}

.page-week .set-editor:has(input[name="target"][value="MAX"]:checked) .field-max {
    display: block;
    margin: 0;
    padding: 12px 10px;
    border: 1px dashed var(--c-control);
    border-radius: 8px;
    color: var(--c-text-2);
    font-size: calc(13px * var(--text-scale));
    text-align: center;
}

.page-week .set-editor .stepper {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 36px;
    align-items: stretch;
    height: 44px;
    border: 1px solid var(--c-accent);
    border-radius: 8px;
    background: var(--c-bg);
}

.page-week .set-editor .stepper > button {
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--c-text);
    font-size: calc(18px * var(--text-scale));
}

.page-week .set-editor .stepper > button:hover {
    background: var(--c-raised);
}

.page-week .set-editor .stepper > input {
    width: 100%;
    min-width: 0;
    min-height: 0;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--c-text);
    font-size: calc(18px * var(--text-scale));
    font-weight: 700;
    text-align: center;
    font-variant-numeric: tabular-nums;
    -moz-appearance: textfield;
    appearance: textfield;
}

.page-week .set-editor .stepper > input::-webkit-inner-spin-button,
.page-week .set-editor .stepper > input::-webkit-outer-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.page-week .set-editor .stepper > input:focus-visible {
    outline: none;
}

.page-week .set-editor .stepper:focus-within {
    box-shadow: 0 0 0 2px var(--c-accent);
}

/* "To kg" beside the weight's direction, once it goes up or down */
.page-week .set-editor .weight > .load-to {
    display: none;
}

.page-week .set-editor:has(input[name="weightChange"]:not([value="SAME"]):checked) .weight > .load-to {
    display: flex;
}

.page-week .set-editor .weight > label.load-to {
    grid-column: 1 / 3;
    align-items: center;
    margin: 0;
    color: var(--c-text-3);
    font-size: calc(12px * var(--text-scale));
    font-weight: 400;
}

.page-week .set-editor .weight > input.load-to,
.page-week .set-editor > input[name="loadKg"] {
    width: 100%;
    min-height: 36px;
    height: 36px;
    box-sizing: border-box;
}

.page-week .set-editor > input[name="loadKg"] + small {
    margin-top: -8px;
    color: var(--c-text-3);
    font-size: calc(11px * var(--text-scale));
}

.page-week .set-editor > label {
    margin-bottom: -8px;
}

/* Apply to sets... on the left and Save on the right; Save stays first in the
   form, so Enter saves. On the last set Save takes the whole row. */
.page-week .set-editor-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.page-week .set-editor-actions > button {
    min-height: 40px;
    margin: 0;
    padding: 0 8px;
    border-radius: 8px;
    font-size: calc(13px * var(--text-scale));
    font-weight: 600;
    white-space: nowrap;
}

.page-week .set-editor-actions > .set-editor-save {
    border: 1px solid var(--c-accent);
    background: var(--c-accent);
    color: var(--c-bg);
}

.page-week .set-editor-actions > .set-editor-save:only-child {
    grid-column: 1 / -1;
}

.page-week .set-editor-actions > .set-editor-apply {
    order: -1;
    border: 1px solid var(--c-control);
    background: transparent;
    color: var(--c-text);
}

.page-week .set-editor-actions > button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.page-week .set-editor-hint {
    margin-top: -4px;
    color: var(--c-text-3);
    font-size: calc(11px * var(--text-scale));
}

@media (max-width: 819.98px) {
    .page-week .card li.exercise-row {
        grid-template-columns: 24px minmax(0, 1fr) 34px;
        grid-template-areas:
            "tag name menu"
            "cells cells cells"
            "load load load"
            "did did did";
    }

    .page-week .card ol.lines {
        flex-wrap: wrap;
    }
}

@media (max-width: 819.98px) {
    .workspace-body {
        grid-template-columns: minmax(0, 1fr);
    }

    .weeks-panel {
        border-right: 0;
        border-bottom: 1px solid var(--c-line);
    }
}

/* ---- 6.3 A week (coach-week.html) ----------------------------------------
   A toolbar that stays under the bar while the page scrolls: the week's
   status chip, "Publish week" or "Unpublish week", "Add session" (which opens
   the session form in a pop-up), and the way back to the client. Then each
   session as a card: its title with "Add exercise" (the exercise form, with
   its library search, in a pop-up), its exercises one line each ("Bench press
   · 4 × 8–10 · 60 kg · 90 s rest", the form to change it under a pencil), a
   superset row marked by a bar down its left. At a desk the session cards sit
   side by side as columns: two, and three on a wide screen. A session the
   coach can still change has an orange top edge; a locked one (finished by
   the client, or in a week that has ended) says why in a neutral chip under
   its title, and a finished one shows under each exercise what the client
   did. Every change answers with only the part it changed (htmx). */

/* A line's chip, such as "Changed", is small, to keep the line on one row. */
ol.lines .chip {
    height: 20px;
    padding: 0 8px;
    font-size: calc(12px * var(--text-scale));
}

.week-toolbar {
    position: sticky;
    top: 60px;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding: 8px 12px;
    border: 1px solid var(--c-line);
    border-radius: var(--radius-card);
    background: var(--c-panel);
}

.week-toolbar > :is(p, form) {
    margin: 0;
}

/* "+ Session" and its pop-up under it, which opens and closes without scripts too */
.week-toolbar details.add-session {
    position: relative;
}

.week-toolbar details.add-session > summary {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid var(--c-control);
    border-radius: var(--radius-field);
    font-size: calc(13px * var(--text-scale));
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.week-toolbar details.add-session > summary::-webkit-details-marker {
    display: none;
}

.week-toolbar details.add-session > summary:hover,
.week-toolbar details.add-session[open] > summary {
    border-color: var(--c-accent);
    background: var(--c-accent-tint);
}

.add-session-pop {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-sizing: border-box;
    width: 432px;
    max-width: calc(100vw - 2 * var(--gutter));
    padding: 16px;
    border: 1px solid var(--c-accent);
    border-radius: 12px;
    background: var(--c-bar);
    box-shadow: 0 18px 50px rgb(0 0 0 / 0.6);
    font-size: calc(13px * var(--text-scale));
}

.add-session-pop > .pop-head {
    display: flex;
    align-items: center;
}

.add-session-pop h2 {
    flex: 1;
    margin: 0;
    font-size: calc(15px * var(--text-scale));
    font-weight: 800;
}

.add-session-pop a.pop-close {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--c-control);
    border-radius: var(--radius-cell);
    color: var(--c-text);
    text-decoration: none;
}

.add-session-pop > form {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
}

.add-session-pop > form > label,
.add-session-pop legend {
    color: var(--c-text-3);
    font-size: calc(12px * var(--text-scale));
    font-weight: 400;
}

.add-session-pop > form > :is(input, textarea, fieldset, .pop-foot) {
    margin-bottom: 8px;
}

.add-session-pop > form > :is(input, textarea) {
    min-height: 0;
    border-width: 1px;
    background: var(--c-bg);
    font-size: calc(13px * var(--text-scale));
}

.add-session-pop > form > input {
    height: 36px;
    padding: 0 10px;
}

.add-session-pop > form > input:focus {
    border-color: var(--c-accent);
    outline: none;
}

.add-session-pop > form > textarea {
    height: 52px;
    padding: 8px 10px;
    resize: none;
}

.add-session-pop > form > [role="alert"] {
    margin: 0 0 4px;
    color: var(--c-bad-text);
}

.add-session-pop fieldset.start-from {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
}

.add-session-pop fieldset.start-from > legend {
    grid-column: 1 / -1;
    margin-bottom: 4px;
    padding: 0;
    color: var(--c-text-3);
    font-size: calc(12px * var(--text-scale));
    font-weight: 400;
}

.add-session-pop label.radio-card {
    display: flex;
    align-items: flex-start;
    margin: 0;
    gap: 8px;
    min-width: 0;
    padding: 10px;
    border: 1px solid var(--c-control);
    border-radius: 10px;
    cursor: pointer;
}

.add-session-pop label.radio-card:has(input:checked) {
    padding: 9px;
    border: 2px solid var(--c-accent);
    background: var(--c-accent-tint);
}

.add-session-pop label.radio-card > input {
    flex: none;
    box-sizing: border-box;
    width: 14px;
    height: 14px;
    margin: 0;
    border: 1.5px solid var(--c-draft-line);
    border-radius: 50%;
    appearance: none;
}

.add-session-pop label.radio-card > input:checked {
    border: 4px solid var(--c-accent);
}

.add-session-pop label.radio-card > input:focus-visible {
    outline: 2px solid var(--c-accent-text);
    outline-offset: 2px;
}

.add-session-pop .radio-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.add-session-pop .radio-text > strong {
    font-size: calc(13px * var(--text-scale));
    font-weight: 800;
}

.add-session-pop .radio-text > small {
    color: var(--c-text-3);
    font-size: calc(11px * var(--text-scale));
    line-height: 1.3;
}

.add-session-pop .pop-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0;
}

.add-session-pop .pop-hint {
    flex: 1;
    margin: 0;
    color: var(--c-text-3);
    font-size: calc(11px * var(--text-scale));
}

.add-session-pop .pop-foot > :is(a, button) {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 12px;
    border-radius: var(--radius-field);
    font-size: calc(13px * var(--text-scale));
}

.add-session-pop .pop-foot > a.button-outline {
    border: 1px solid var(--c-control);
    color: var(--c-text);
    text-decoration: none;
}

.add-session-pop .pop-foot > button[type="submit"] {
    padding: 0 14px;
    border: 0;
    background: var(--c-accent);
    color: var(--c-bg);
    font-weight: 800;
}

.add-session-pop .pop-foot > button[type="submit"]:hover {
    background: var(--c-accent-text);
}

.session-editable {
    border-top: 3px solid var(--c-accent);
}

.session-lock {
    align-self: flex-start;
    gap: 6px;
    margin: 0;
}

/* What the client did of an exercise of a finished session, under its plan:
   green when every set was done, the warn colour when some were not. */
.did {
    margin: 4px 0 0;
    color: var(--c-ok-text);
    font-size: calc(14px * var(--text-scale));
}

.did-missed {
    color: var(--c-warn-text);
}

/* A button that shows its action as an icon before its name */
button:has(> svg.icon) {
    gap: 6px;
}

button > svg.icon {
    flex: none;
}

/* A session's expected time, at the far end under its summary */
.session-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px 12px;
}

.session-head > h2 {
    margin: 0;
}

button.button-small {
    min-height: 36px;
    padding: 0 12px;
    font-size: calc(14px * var(--text-scale));
}

/* A page's status lines, which an htmx answer replaces, laid out as if the
   box were not there */
#flash {
    display: contents;
}

/* A page's title with its "Add" button at the far end, which opens a pop-up */
.title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
}

.title-row > :is(h1, h2) {
    margin: 0;
}

/* The pop-ups that hold the forms to add a session and an exercise: a card
   over a dimmed page, its close button a quiet square at the top right */
dialog.form-dialog {
    width: min(520px, calc(100vw - 24px));
    max-height: calc(100dvh - 24px);
    padding: 20px;
    border: 1px solid var(--c-line);
    border-radius: var(--radius-card);
    background: var(--c-panel);
    color: var(--c-text);
    box-shadow: 0 12px 40px rgb(0 0 0 / 0.18);
}

dialog.form-dialog::backdrop {
    background: var(--c-scrim);
}

dialog.form-dialog > :is(h2, h3) {
    margin: 0 48px 12px 0;
}

dialog.form-dialog > form {
    display: grid;
    gap: 8px;
    max-width: none;
}

dialog.form-dialog > form > button[type="submit"] {
    justify-self: start;
    margin-top: 4px;
}

dialog.form-dialog > button.icon-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 40px;
    min-height: 0;
    height: 40px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--c-text-2);
}

dialog.form-dialog > button.icon-btn:hover {
    background: var(--c-row-line);
    color: var(--c-text);
}

/* The library's exercises to choose from, as they match what is typed */
.form-dialog fieldset.library-choice {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
}

.form-dialog .choices {
    display: grid;
    gap: 2px;
    max-height: 220px;
    overflow-y: auto;
    padding: 4px;
    border: 1px solid var(--c-row-line);
    border-radius: var(--radius-field);
}

.form-dialog .choices > p {
    margin: 4px 8px;
    color: var(--c-text-2);
    font-size: calc(14px * var(--text-scale));
}

.form-dialog label.choice {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: var(--tap);
    margin: 0;
    padding: 0 8px;
    border-radius: 8px;
    font-weight: 400;
    cursor: pointer;
}

.form-dialog label.choice:has(:checked) {
    background: var(--c-ok-bg);
    color: var(--c-ok-text);
    font-weight: 600;
}

/* Saving an exercise or a set: an orange square with a tick; removing an
   exercise: a quiet red square with a bin */
.page-week .card form button.icon-btn {
    width: 40px;
    min-height: 0;
    height: 40px;
    padding: 0;
    justify-self: start;
}

.page-week .card form button[type="submit"].icon-btn:not(:is(.line-remove, .exercise-remove) *) {
    border-color: transparent;
    background: var(--c-accent);
    color: var(--c-bg);
}

.page-week .card form button[type="submit"].icon-btn:not(:is(.line-remove, .exercise-remove) *):hover {
    background: var(--c-accent-text);
}

.page-week .card form.exercise-remove button.icon-btn {
    border: 1px solid var(--c-danger);
    background: transparent;
    color: var(--c-danger-text);
}

.page-week .card form.exercise-remove button.icon-btn:hover {
    background: var(--c-bad-bg);
}

/* The × after a set that can be removed: quiet, so the line still reads first;
   greyed out on an exercise's only set. */
.page-week form.line-remove {
    display: inline;
}

/* The icon buttons of the week editor: a pencil to edit, a bin to remove, each a quiet square */
.page-week form.line-remove button.icon-btn,
.page-week .card ol.rows > li > ol > li > details > summary.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    width: 36px;
    height: 36px;
    padding: 0;
    margin-left: 0;
    border: 0;
    border-radius: var(--radius-field);
    background: transparent;
    color: var(--c-text-2);
    vertical-align: middle;
    list-style: none;
    cursor: pointer;
}

.page-week .card ol.rows > li > ol > li > details > summary.icon-btn::-webkit-details-marker {
    display: none;
}

.page-week .card ol.rows > li > ol > li > details > summary.icon-btn:hover,
.page-week .card ol.rows > li > ol > li > details[open] > summary.icon-btn {
    background: var(--c-ok-bg);
    color: var(--c-ok-text);
}

.page-week .card .icon {
    display: block;
}

.page-week form.line-remove button.icon-btn:hover:not(:disabled) {
    background: var(--c-bad-bg);
    color: var(--c-danger-text);
}

.page-week form.line-remove button.icon-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* Removing an exercise: a quiet red button under its edit form */
.page-week form.exercise-remove {
    margin-top: 8px;
}

.page-week form.exercise-remove button {
    background: transparent;
    color: var(--c-danger-text);
    border: 1px solid var(--c-danger);
}

.page-week form.exercise-remove button:hover {
    background: var(--c-bad-bg);
    color: var(--c-danger-text);
}

/* Unpublishing takes the week back from the client: outlined in the danger colour */
.week-toolbar form[action$="/unpublish"] button {
    border: 1.5px solid var(--c-danger);
    background: none;
    color: var(--c-danger-text);
}

.week-toolbar form[action$="/unpublish"] button:hover {
    background: var(--c-bad-bg);
}

/* Archiving only tidies the coach's Weeks tab: outlined, not the gold call to action */
.week-toolbar form:is([action$="/archive"], [action$="/unarchive"]) button {
    border: 1px solid var(--c-line);
    background: none;
    color: var(--c-text);
}

.week-toolbar form:is([action$="/archive"], [action$="/unarchive"]) button:hover {
    background: var(--c-raised);
}

.page-week > p:has(> a) > a {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
    font-weight: 600;
}

.page-week .card > details > p {
    color: var(--c-text-2);
}

.page-week .card ol.rows > li > ol > li > strong {
    font-weight: 600;
}

.page-week .card ol.rows > li > ol > li > details > summary {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
    color: var(--c-ok-text);
    font-size: calc(14px * var(--text-scale));
    font-weight: 600;
    cursor: pointer;
}

/* A line between a session's exercises and the form to add one */
.page-week .card > details > :is(ol, p) + form {
    padding-top: 16px;
    border-top: 1px solid var(--c-line);
}

.page-week .card > form > h3 {
    margin-bottom: 4px;
}

.page-week .card > form > :is(fieldset, small) + label {
    margin-top: 10px;
}

.page-week .card > form > ul {
    color: var(--c-bad-text);
    font-size: calc(14px * var(--text-scale));
}

/* "Rep range" or "Max reps" side by side */
.page-week fieldset {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin: 10px 0 0;
    padding: 0;
    border: 0;
}

.page-week fieldset > legend {
    float: left;
    width: 100%;
    margin-bottom: 4px;
    padding: 0;
    font-size: calc(14px * var(--text-scale));
    font-weight: 600;
}

.page-week fieldset > input[type="radio"] {
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: var(--c-text);
}

.page-week fieldset > label {
    margin-right: 12px;
    font-size: calc(15px * var(--text-scale));
    font-weight: 400;
}

/* ---- 6.4 Session review (session-review.html) ----------------------------
   Date and status, energy and efficiency, the client's note as a quote,
   then each exercise as a card with a row per set and its mark as a chip
   (5.7). */

.page-review > p {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    color: var(--c-text-2);
    font-variant-numeric: tabular-nums;
}

.page-review > p.note {
    padding: 4px 0 4px 14px;
    border-left: 3px solid var(--c-accent);
    color: var(--c-text);
    font-style: italic;
}

.page-review .card > p {
    color: var(--c-text-2);
    font-size: calc(14px * var(--text-scale));
}

.page-review .card > ol {
    margin: 0;
    padding: 0;
    list-style: none;
    font-variant-numeric: tabular-nums;
}

.page-review .card > ol > li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 12px;
    padding: 10px 0;
    border-top: 1px solid var(--c-row-line);
}

/* ---- 6.5 Exercise library (coach-exercises.html) -------------------------
   The search, the exercises as one card with a row per exercise (name,
   muscle group, equipment, video) and the form to add one in a card. */

/* At a desk the search is one line: name, muscle group, equipment, "Search".
   The week editor (7.3) and the substitute picker (7.6) share it. */
@media (min-width: 820px) {
    :is(.page-library, .page-week, .page-exercise) form[role="search"] {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto;
        grid-auto-flow: column;
        grid-template-rows: auto auto;
        max-width: none;
    }

    :is(.page-library, .page-week, .page-exercise) form[role="search"] > * {
        grid-column: auto;
    }

    :is(.page-library, .page-week, .page-exercise) form[role="search"] > :is(label, button) {
        margin-top: 0;
    }

    :is(.page-library, .page-week, .page-exercise) form[role="search"] > button {
        grid-row: 2;
    }
}

/* The list a search or "Show more" swaps in, laid out as if it were not there */
.page-library > #library {
    display: contents;
}

/* The title row (design pg-library): "Back · 18 exercises" with the search and "New exercise" at its end */
.page-library > .title-row > .title-count {
    margin-right: auto;
    color: var(--c-text-3);
    font-size: calc(22px * var(--text-scale));
    font-weight: 600;
}

.page-library > .title-row > .title-count::before {
    content: "\00B7\00A0";
}

/* The search on the title's line, between the count and "Add exercise" (design pg-library):
   the name, the equipment and "Show archived"; it wraps under the title on a narrow screen. */
.page-library > .title-row > form[role="search"] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}

.page-library > .title-row > form[role="search"] > input[type="search"] {
    flex: 1 1 200px;
    width: 260px;
    min-height: 40px;
    font-size: calc(14px * var(--text-scale));
}

.page-library > .title-row > form[role="search"] > select:not(.visually-hidden) {
    width: auto;
    min-height: 40px;
    font-size: calc(14px * var(--text-scale));
}

/* "Show archived": an outlined square that turns gold with a dark tick when checked */
.page-library form[role="search"] .show-archived {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: calc(14px * var(--text-scale));
}

.page-library form[role="search"] .show-archived > label {
    margin: 0;
    font-weight: 400;
    white-space: nowrap;
    cursor: pointer;
}

.page-library form[role="search"] .show-archived > input[type="checkbox"] {
    appearance: none;
    display: inline-grid;
    place-content: center;
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--c-control);
    border-radius: 5px;
    background: var(--c-panel);
    cursor: pointer;
}

.page-library form[role="search"] .show-archived > input[type="checkbox"]:checked {
    border-color: var(--c-accent);
    background: var(--c-accent);
}

.page-library form[role="search"] .show-archived > input[type="checkbox"]:checked::after {
    content: "";
    width: 5px;
    height: 9px;
    margin-top: -2px;
    border: solid var(--c-bg);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.page-library form[role="search"] .show-archived > input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--c-accent);
    outline-offset: 2px;
}

/* The muscle-group chips: rounded pills, the chosen one in gold */
.page-library > .group-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 4px 0 16px;
}

.page-library > .group-chips > a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid var(--c-control);
    border-radius: 999px;
    color: var(--c-text);
    font-size: calc(14px * var(--text-scale));
    font-weight: 500;
    text-decoration: none;
}

.page-library > .group-chips > a > .count {
    color: var(--c-text-3);
}

.page-library > .group-chips > a[aria-current="true"] {
    border-color: var(--c-accent);
    background: var(--c-accent);
    color: var(--c-bg);
    font-weight: 700;
}

.page-library > .group-chips > a[aria-current="true"] > .count {
    color: var(--c-bg);
}

/* The exercises as cards, four to a row at a desk: the name with the play button at its end, the chips, the substitutes */
.page-library > #library > ul.exercise-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.page-library > #library > ul.exercise-cards > li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 6px;
    padding: 12px;
    border: 2px solid transparent;
    border-radius: var(--radius-card);
    background: var(--c-panel);
}

.page-library > #library > ul.exercise-cards > li > :is(a:not(.play), .name) {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    min-height: 32px;
    color: var(--c-text);
    font-size: calc(15px * var(--text-scale));
    font-weight: 700;
    text-decoration: none;
}

.page-library > #library > ul.exercise-cards > li > a:not(.play):hover {
    color: var(--c-accent-text);
}

.page-library > #library > ul.exercise-cards > li > .play {
    order: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 30px;
    height: 30px;
    border: 1.5px solid var(--c-accent);
    border-radius: 50%;
    color: var(--c-accent);
}

/* The chips start their own line under the name, the substitutes another */
.page-library > #library > ul.exercise-cards > li > :is(.chips, .substitutes) {
    order: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex-basis: 100%;
}

.page-library > #library > ul.exercise-cards > li > .substitutes {
    color: var(--c-text-3);
    font-size: calc(12px * var(--text-scale));
}

.page-library > #library > ul.exercise-cards > li.archived {
    opacity: 0.7;
}

/* "Show more" under the cards: a link a thumb can hit */
.page-library > #library > p:has(> a) > a {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
    font-weight: 600;
}

/* The card whose exercise is open in the side panel */
.page-library > #library > ul.exercise-cards > li.chosen {
    border-color: var(--c-accent);
}

/* The side panel (coach-exercise :: panel): fixed down the right under the bar; the cards make room for it */
@media (min-width: 820px) {
    main.page-library:has(> aside#edit-panel) {
        padding-right: 340px;
    }
}

.page-library > aside#edit-panel {
    position: fixed;
    top: 60px;
    right: 0;
    bottom: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: min(340px, 100vw);
    padding: 20px 16px 16px;
    overflow-y: auto;
    border-left: 1px solid var(--c-line);
    background: var(--c-panel);
}

.page-library > aside#edit-panel > .panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.page-library > aside#edit-panel > .panel-head > h2 {
    margin: 0;
    font-size: calc(17px * var(--text-scale));
}

.page-library > aside#edit-panel > .panel-head > .panel-close {
    border: 1px solid var(--c-control);
    border-radius: var(--radius-field);
}

.page-library > aside#edit-panel > #panel-form {
    display: grid;
    gap: 4px;
}

.page-library > aside#edit-panel > #panel-form > label {
    margin-top: 6px;
    color: var(--c-text-3);
    font-size: calc(12px * var(--text-scale));
    font-weight: 500;
}

.page-library > aside#edit-panel > #panel-form > small {
    color: var(--c-text-3);
    font-size: calc(12px * var(--text-scale));
}

.page-library > aside#edit-panel h3 {
    margin: 0 0 8px;
    font-size: calc(14px * var(--text-scale));
}

/* The substitutes in order: a handle to drag, the place, the name, then the quiet buttons */
.page-library > aside#edit-panel form.substitute-order > ol {
    display: grid;
    gap: 8px;
    margin: 0 0 10px;
    padding: 0;
    list-style: none;
}

.page-library > aside#edit-panel form.substitute-order li {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 6px 0 10px;
    border-radius: var(--radius-field);
    background: var(--c-panel-2);
    font-size: calc(13px * var(--text-scale));
    cursor: grab;
}

.page-library > aside#edit-panel form.substitute-order li.dragging {
    opacity: 0.5;
}

.page-library > aside#edit-panel form.substitute-order li > .handle {
    width: 10px;
    height: 16px;
    background: radial-gradient(circle, var(--c-text-3) 1.2px, transparent 1.6px) 0 0 / 5px 5.33px;
}

.page-library > aside#edit-panel form.substitute-order li > .rank {
    font-weight: 700;
}

.page-library > aside#edit-panel form.substitute-order li > .name {
    flex: 1;
    min-width: 0;
}

.page-library > aside#edit-panel form.substitute-order li > button {
    min-height: 28px;
    padding: 0 4px;
    background: none;
    color: var(--c-text-3);
}

.page-library > aside#edit-panel .add-substitute {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border: 1px dashed var(--c-control);
    border-radius: var(--radius-field);
    color: var(--c-text);
    font-size: calc(13px * var(--text-scale));
    text-decoration: none;
}

/* Archive outlined at the start, Save gold at the end, at the panel's foot */
.page-library > aside#edit-panel > .panel-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 12px;
}

.page-library > aside#edit-panel > .panel-actions button.secondary {
    border: 1px solid var(--c-control);
    background: none;
    color: var(--c-text);
}

/* ---- 6.6 An exercise (coach-exercise.html) -------------------------------
   The exercise's form, "Archive" quiet in the danger colour (5.6), then the
   substitutes as a card in their order with quiet arrows to reorder them and
   a bin, and a plus by their title that opens the search to pick another
   (7.5) in a pop-up. */

.page-exercise #substitutes > .title-row {
    margin: 24px 0 8px;
}

.page-exercise #substitutes > ol.card {
    gap: 0;
    padding: 6px 16px;
}

.page-exercise #substitutes > ol.card > li:first-child {
    border-top: 0;
}

.page-exercise #substitutes > ol.card form[action$="/remove"] button {
    color: var(--c-danger-text);
}

.page-exercise #substitutes > ol.card form[action$="/remove"] button:hover {
    border-color: var(--c-danger-text);
}

.page-exercise #substitutes > ol.card > li > span:first-child {
    flex: 1 1 auto;
    color: var(--c-text);
    font-size: calc(16px * var(--text-scale));
    font-weight: 600;
}

/* The picture with "Change picture" under it and, for the coach's own
   picture, a bin quiet in the danger colour. Saving and uploading are orange
   squares with their icon. */
.page-exercise button.icon-btn {
    width: var(--tap);
    padding: 0;
}

.page-exercise .picture-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.page-exercise .picture-actions > form {
    margin: 0;
}

.page-exercise .picture-actions > form > button {
    border-color: var(--c-control);
    background: none;
    color: var(--c-danger-text);
}

.page-exercise .picture-actions > form > button:hover {
    border-color: var(--c-danger-text);
    background: none;
}


/* ==========================================================================
   7. Admin
   The admin's screens, used at a desk: the same cards as the coach's, and a
   table of accounts that scrolls inside its card on a phone.
   ========================================================================== */

/* ---- 7.1 Invitations (admin.html) ----------------------------------------
   The form to invite a coach, then the pending invitations with a row each
   and "Cancel" at the row's end (5.6, 7.1). */

/* ---- 7.2 Accounts (admin-accounts.html) ----------------------------------
   One row per account. The card scrolls sideways, not the page. */

/* Positioned, so that it also scrolls (and clips) the icons' hidden labels,
   which are positioned absolutely. */
.page-accounts > .card {
    position: relative;
    overflow-x: auto;
    padding: 6px 16px;
}

.page-accounts table {
    width: 100%;
    border-collapse: collapse;
    font-size: calc(14px * var(--text-scale));
}

.page-accounts th {
    padding: 10px 12px 10px 0;
    color: var(--c-text-2);
    font-size: calc(12px * var(--text-scale));
    font-weight: 600;
    letter-spacing: 0.04em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.page-accounts td {
    padding: 8px 12px 8px 0;
    border-top: 1px solid var(--c-row-line);
    white-space: nowrap;
}

.page-accounts td:first-child {
    font-weight: 600;
}

/* Edit, Disable and Enable are 44px squares with their icon: Edit and Enable
   quiet in ink, Disable quiet in the danger colour (5.6). Edit is a link to
   the edit page that opens the account's pop-up instead. */
.page-accounts td > a.icon-btn,
.page-accounts td > form > button.icon-btn {
    width: var(--tap);
    padding: 0;
}

.page-accounts td > a.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--tap);
    border: 1.5px solid var(--c-control);
    border-radius: var(--radius-field);
    background: none;
    color: var(--c-text);
    vertical-align: middle;
}

.page-accounts td > a.icon-btn:hover {
    border-color: var(--c-text);
}

.page-accounts td > form {
    margin: 0;
}

/* The pop-ups sit in the table's cells, so they undo the cells' one-line,
   small and bold text. */
.page-accounts td > dialog {
    font-size: calc(16px * var(--text-scale));
    font-weight: 400;
    white-space: normal;
}

/* ---- 7.3 Edit account (admin-account-edit.html) --------------------------
   The details in one card and "Move to another coach" in another. */

/* ---- 7.4 Are you sure? (confirm.html) ------------------------------------
   One card with the question and its answer in the danger colour; "Back"
   below it. Used by the admin and by the coach. */

.page-confirm > .card button[type="submit"] {
    background: var(--c-danger);
    color: var(--c-bg);
}

.page-confirm > .card button[type="submit"]:hover {
    background: var(--c-danger-text);
}


/* ==========================================================================
   Progress: weigh-ins and their charts
   ========================================================================== */

/* The Progress tab's header and figures (design client-progress). */
.page-progress .progress-tab {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 18px;
}

.page-progress .progress-head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.page-progress .progress-head .avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #D4AF37;
    color: #0E0E0E;
    font-weight: 800;
    font-size: calc(14px * var(--text-scale));
}

.page-progress .progress-head h1 {
    margin: 0;
    font-size: calc(20px * var(--text-scale));
    font-weight: 800;
}

.page-progress .period {
    display: flex;
    gap: 2px;
    margin-left: auto;
    padding: 3px;
    border-radius: 8px;
    background: #1A1A1A;
}

.page-progress .period a {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 12px;
    border-radius: 6px;
    color: #C8C8C8;
    font-size: calc(12px * var(--text-scale));
    font-weight: 800;
    text-decoration: none;
}

.page-progress .period a[aria-current="true"] {
    background: #D4AF37;
    color: #0E0E0E;
}

.page-progress .kpis {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
}

@media (max-width: 900px) {
    .page-progress .kpis {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.page-progress .kpi {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 12px;
    border: 1px solid #2A2A2A;
    border-radius: 12px;
    background: #1A1A1A;
}

.page-progress .kpi-label {
    font-size: calc(11px * var(--text-scale));
    color: #B5B5B5;
}

.page-progress .kpi strong {
    font-size: calc(22px * var(--text-scale));
    font-weight: 800;
    line-height: 1.1;
}

.page-progress .kpi-sub {
    font-size: calc(11px * var(--text-scale));
    color: #C8C8C8;
}

.page-progress .kpi .status-on-course {
    color: #8FD9A8;
}

.page-progress .kpi .status-faster-than-safe {
    color: #FCA5A5;
}

.page-progress .kpi .status-slower-than-plan {
    color: #FCD34D;
}

.page-progress .kpi .status-no-weigh-in {
    color: #BFDBFE;
}

/* The Progress tab's weight chart and BMI panels (design client-progress), side by side, wrapping when narrow. */
.progress-panels {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.weight-panel,
.bmi-panel {
    background: #1A1A1A;
    border: 1px solid #2A2A2A;
    border-radius: 12px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.weight-panel {
    flex: 999 1 620px;
    min-width: 0;
}

.bmi-panel {
    flex: 1 1 300px;
    min-width: 280px;
}

.weight-panel h2,
.bmi-panel h2 {
    margin: 0;
    font-size: calc(15px * var(--text-scale));
}

.panel-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.panel-note {
    font-size: calc(12px * var(--text-scale));
    color: #9A9A9A;
}

.weight-panel .caption {
    color: #B5B5B5;
}

.legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    font-size: calc(12px * var(--text-scale));
    color: #C8C8C8;
}

.legend > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.swatch-weight {
    display: inline-block;
    width: 16px;
    height: 3px;
    background: #D4AF37;
}

.bmi-value {
    font-size: calc(30px * var(--text-scale));
    font-weight: 800;
}

.bmi-value span {
    font-size: calc(14px * var(--text-scale));
    font-weight: 400;
    color: #B5B5B5;
}

.bmi-bar {
    position: relative;
    display: flex;
    height: 10px;
    border-radius: 5px;
    margin: 8px 0 2px;
}

.bmi-bar .under { flex: 18.5; background: #2E2E2E; border-radius: 5px 0 0 5px; }
.bmi-bar .healthy { flex: 6.5; background: #4A4A4A; }
.bmi-bar .over { flex: 5; background: #2E2E2E; }
.bmi-bar .obese { flex: 5; background: #222; border-radius: 0 5px 5px 0; }

.bmi-bar .now,
.bmi-bar .ahead {
    position: absolute;
    top: -5px;
    width: 3px;
    height: 20px;
    border-radius: 2px;
}

.bmi-bar .now { background: #F2F2F2; }
.bmi-bar .ahead { background: #5F8BD8; }

.bmi-ranges {
    display: flex;
    justify-content: space-between;
    font-size: calc(11px * var(--text-scale));
    color: #9A9A9A;
}

.body-sum {
    border-top: 1px solid #2A2A2A;
    margin-top: 6px;
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: calc(12px * var(--text-scale));
    color: #C8C8C8;
}

.body-sum h3 {
    margin: 0;
    font-size: calc(13px * var(--text-scale));
    font-weight: 700;
    color: #F2F2F2;
}

/* The Progress tab's second row: strength cards, the last session against the plan, and sessions per week. */
.strength-panel,
.last-panel,
.weeks-panel {
    background: #1A1A1A;
    border: 1px solid #2A2A2A;
    border-radius: 12px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.strength-panel,
.last-panel {
    flex: 1 1 420px;
}

.weeks-panel {
    flex: 1 1 320px;
}

.strength-panel h2,
.last-panel h2,
.weeks-panel h2 {
    margin: 0;
    font-size: calc(15px * var(--text-scale));
    font-weight: 800;
    flex: 1;
}

.lift-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.lift-card {
    background: #222222;
    border-radius: 10px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.lift-name {
    font-size: calc(12px * var(--text-scale));
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lift-figures {
    display: flex;
    justify-content: space-between;
    font-size: calc(12px * var(--text-scale));
}

.lift-figures strong {
    font-weight: 800;
}

.lift-figures span {
    font-weight: 700;
    color: #B5B5B5;
}

.lift-figures span.up {
    color: #F2F2F2;
}

.last-row {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 1fr) 44px 66px;
    gap: 8px;
    font-size: calc(13px * var(--text-scale));
    align-items: center;
    padding: 4px 0;
    border-bottom: 1px solid #232323;
}

.last-row.last-head {
    font-size: calc(11px * var(--text-scale));
    color: #B5B5B5;
    border-bottom-color: #2A2A2A;
}

.last-name {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.last-plan {
    color: #C8C8C8;
}

.last-row .tag {
    justify-self: start;
    font-size: calc(10px * var(--text-scale));
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 999px;
}

.last-row .new-best {
    background: #D4AF37;
    color: #0E0E0E;
}

.last-row .swapped {
    border: 1px solid #6B6B6B;
    color: #C8C8C8;
}

.week-bars-chart {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 80px;
}

.week-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;
    height: 100%;
}

.week-col .bar-value {
    font-size: calc(10px * var(--text-scale));
    color: #C8C8C8;
}

.week-col .bar {
    display: block;
    width: 100%;
    border-radius: 4px 4px 0 0;
    background: #7A6420;
}

.week-col .bar.full {
    background: #D4AF37;
}

.week-col .bar.in-progress {
    background: transparent;
    border: 1px dashed #D4AF37;
    border-bottom: none;
}

.week-strips {
    display: grid;
    gap: 3px;
    align-items: center;
    font-size: calc(11px * var(--text-scale));
}

.strip-label {
    color: #B5B5B5;
}

.strip {
    height: 24px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #F2F2F2;
    background: #222222;
}

.page-progress .chart {
    position: relative;
    height: 240px;
}

/* The accordions of the progress pages: a full-width row with a chevron that turns when open. One under a chart sits
   below a hairline; Sessions per week is a whole card. */
.page-progress :is(details.estimates, details.lift-details) {
    margin-top: 12px;
    border-top: 1px solid var(--c-row-line);
}

.page-progress :is(details.estimates, details.lift-details, details.weeks) > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: var(--tap);
    font-family: var(--font);
    font-size: calc(18px * var(--text-scale));
    font-weight: 600;
    list-style: none;
    cursor: pointer;
}

.page-progress :is(details.estimates, details.lift-details, details.weeks) > summary::-webkit-details-marker {
    display: none;
}

.page-progress :is(details.estimates, details.lift-details, details.weeks) > summary::after {
    content: "";
    width: 8px;
    height: 8px;
    margin-right: 6px;
    border-right: 2px solid var(--c-text-2);
    border-bottom: 2px solid var(--c-text-2);
    transform: rotate(45deg);
    transition: transform 0.15s;
}

.page-progress :is(details.estimates, details.lift-details, details.weeks)[open] > summary::after {
    transform: rotate(-135deg);
}

.page-progress .weigh-ins {
    list-style: none;
    margin: 0;
    padding: 0;
}

.page-progress .weigh-ins li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    padding: 8px 0;
    border-bottom: 1px solid var(--c-row-line);
}

.page-progress .weigh-ins li > strong {
    margin-right: auto;
}

.page-progress .weigh-ins input {
    width: 6em;
}

/* The current weight beside its edit icon, which opens the weigh-in form in a pop-up. */
.page-progress .body-summary .current {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}

.page-progress .body-summary .current > strong {
    font-size: calc(20px * var(--text-scale));
    font-variant-numeric: tabular-nums;
}

/* What the coach has stored, as text, with its edit icon at the top right; open, the form takes the card's width below
   the text. */
.page-progress .stored {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 12px;
    align-items: center;
    margin-bottom: 8px;
}

.page-progress .stored > :not(details) {
    grid-column: 1;
    margin: 0;
    font-variant-numeric: tabular-nums;
}

.page-progress .stored > details {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
}

.page-progress .stored > details[open] {
    grid-column: 1 / -1;
    grid-row: auto;
}

/* The edit and delete icons: quiet square tap targets, the delete one in the danger colour on hover. */
.page-progress .stored > details > summary,
.page-progress :is(.body-summary, .weigh-ins) button.icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--tap);
    min-height: var(--tap);
    padding: 0;
    border: 0;
    border-radius: var(--radius-field);
    background: transparent;
    color: var(--c-ok-text);
    list-style: none;
    cursor: pointer;
}

.page-progress .stored > details > summary::-webkit-details-marker {
    display: none;
}

.page-progress .stored > details > summary:hover,
.page-progress .stored > details[open] > summary,
.page-progress :is(.body-summary, .weigh-ins li) > button.icon:hover {
    background: var(--c-ok-bg);
}

.page-progress .weigh-ins form > button.icon {
    color: var(--c-text-2);
}

.page-progress .weigh-ins form > button.icon:hover {
    background: var(--c-bad-bg);
    color: var(--c-danger-text);
}

/* Each form's save button: a square icon in the call-to-action colour, the bin's quiet look undone in the list. */
.page-progress button.icon.save {
    min-width: var(--tap);
    padding: 0;
    border-color: transparent;
    background: var(--c-accent);
    color: var(--c-bg);
}

.page-progress button.icon.save:hover {
    background: var(--c-accent-text);
    color: var(--c-bg);
}

/* The weigh-in and correction pop-ups: the fields one under the other, the save icon at the end. */
.page-progress dialog.form-dialog form {
    display: grid;
    gap: 8px;
    justify-items: start;
}

.page-progress dialog.form-dialog input {
    width: 100%;
}

/* The client's macros: protein, carbs and fat side by side, the day's kcal below. */
.page-progress .macros-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    list-style: none;
    margin: 0 0 8px;
    padding: 0;
    font-variant-numeric: tabular-nums;
}

/* The coach's macro suggestion: the suggested day and its settings, ruled off from the macros in effect; its form has
   outlined Save settings and Use the defaults, so Save macros stays the one call to action on the card. */
.page-progress .macros .stored:has(> details.edit-settings) {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--c-row-line);
}

.page-progress .macros .suggestion input {
    width: 6em;
}

.page-progress .macros .suggestion button[type="submit"] {
    border: 1.5px solid var(--c-control);
    background: none;
    color: var(--c-text);
}

.page-progress .macros .suggestion button[type="submit"]:hover {
    border-color: var(--c-text);
    background: none;
}

/* The coach's progress board: the title and the goal filter in one line, then a table of clients, one link per row,
   with eight weekly cells in gold by the share of sessions done, and a legend under it. */
.page-board .board-top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
}

.page-board .board-title {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 4px;
    min-width: 260px;
}

.page-board .board-title h1 {
    margin: 0;
    font-size: calc(26px * var(--text-scale));
    font-weight: 800;
}

.page-board .board-title p {
    margin: 0;
    color: var(--c-text-3);
    font-size: calc(13px * var(--text-scale));
}

.page-board .segmented {
    display: flex;
    gap: 4px;
    padding: 4px;
    border-radius: 10px;
    background: var(--c-panel);
}

.page-board .segmented a {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 12px;
    border-radius: 7px;
    color: var(--c-text-2);
    font-size: calc(13px * var(--text-scale));
    text-decoration: none;
}

.page-board .segmented a[aria-current="true"] {
    background: var(--c-accent);
    color: var(--c-bg);
    font-weight: 700;
}

/* On a narrow screen the table scrolls sideways rather than squeezing its columns. */
.page-board .board-table {
    display: grid;
    grid-template-columns: minmax(160px, 1.4fr) repeat(8, 64px) minmax(140px, 1.2fr) minmax(120px, 1fr) minmax(90px, 0.8fr) minmax(140px, 1.1fr);
    column-gap: 6px;
    border-radius: 14px;
    background: var(--c-panel);
    overflow-x: auto;
}

.page-board :is(.board-head, .board-row) {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
}

.page-board .board-head {
    align-items: end;
    padding: 10px 14px;
    border-bottom: 1px solid var(--c-line);
    color: var(--c-text-3);
    font-size: calc(11px * var(--text-scale));
}

.page-board .board-head .board-week {
    text-align: center;
}

.page-board .board-row {
    align-items: center;
    padding: 8px 14px;
    border-bottom: 1px solid var(--c-row-line);
    color: var(--c-text);
    font-size: calc(13px * var(--text-scale));
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-decoration: none;
}

.page-board .board-row:hover {
    background: var(--c-raised);
}

.page-board .board-pair {
    display: flex;
    flex-direction: column;
}

.page-board .board-pair > span {
    color: var(--c-text-3);
    font-size: calc(11px * var(--text-scale));
}

/* A week's cell: gold at 95 % when every session was done, 55 % for most, 25 % for few, dashed with no plan. */
.page-board .week-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    border-radius: 6px;
    box-sizing: border-box;
    font-size: calc(12px * var(--text-scale));
    font-weight: 700;
}

.page-board .week-all { background: rgb(212 175 55 / 0.95); color: var(--c-bg); }
.page-board .week-most { background: rgb(212 175 55 / 0.55); color: var(--c-bg); }
.page-board .week-few { background: rgb(212 175 55 / 0.25); color: var(--c-text); }
.page-board .week-none { border: 1px dashed var(--c-draft-line); color: var(--c-text-3); }

/* A status is a labelled chip in the shared state colours, so it never rests on colour alone. */
.page-board .status {
    justify-self: start;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: calc(11px * var(--text-scale));
    font-weight: 700;
    white-space: nowrap;
}

.page-board .status.on_course { background: var(--c-ok-bg); color: var(--c-ok-text); }
.page-board .status.slower_than_plan { background: var(--c-warn-bg); color: var(--c-warn-text); }
.page-board .status.faster_than_safe { background: var(--c-bad-bg); color: var(--c-bad-text); }
.page-board .status.no_weigh_in { background: var(--c-info-bg); color: var(--c-info-text); }

.page-board .board-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin: 0;
    color: var(--c-text-3);
    font-size: calc(12px * var(--text-scale));
}

.page-board .legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.page-board .legend-item .week-cell {
    width: 18px;
    height: 14px;
    border-radius: 3px;
}

/* Lifts: one line per exercise, the last session's best sets with a personal record marked. */
.page-progress .lift-list {
    list-style: none;
    margin: 0 0 8px;
    padding: 0;
    font-variant-numeric: tabular-nums;
}

.page-progress .lift-list li {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    padding: 6px 0;
    border-bottom: 1px solid var(--c-row-line);
}

.page-progress .lift-list .record {
    font-weight: 600;
}

/* Sessions per week: each week's line, with a bar of the share of its planned sessions done. */
.page-progress .week-bars {
    list-style: none;
    margin: 0;
    padding: 0;
    font-variant-numeric: tabular-nums;
}

.page-progress .week-bars li {
    display: grid;
    gap: 4px;
    padding: 6px 0;
    border-bottom: 1px solid var(--c-row-line);
}

.page-progress .week-bars .bar {
    display: block;
    height: 8px;
    border-radius: 4px;
    background: var(--c-raised);
    overflow: hidden;
}

.page-progress .week-bars .bar span {
    display: block;
    height: 100%;
    border-radius: 4px;
    background: var(--c-ok-text);
}

/* A new best on the coach's session review. */
.page-review .record {
    font-weight: 600;
}

/* ---- H8: a finished session's set saves with a check ---------------------- */

.page-session ol.lines > li > form > button.icon-btn {
    width: var(--tap);
    padding: 0;
}

/* ---- 1c: inviting a client -----------------------------------------------
   The bar's pop-up (fragments/invite :: dialog) over a dimmed page, and the
   same card on its own page for a browser without scripts. The pop-up sits in
   the bar, so its buttons are named here to beat the bar's quiet outlines. */

:is(dialog.invite-dialog, .invite-card) {
    width: min(600px, calc(100vw - 40px));
    max-height: calc(100dvh - 40px);
    padding: 22px;
    border: 1px solid var(--c-line);
    border-radius: 16px;
    background: var(--c-panel);
    color: var(--c-text);
    box-shadow: 0 20px 50px rgb(0 0 0 / 0.6);
    line-height: normal;
}

dialog.invite-dialog[open], .invite-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

dialog.invite-dialog::backdrop {
    background: var(--c-scrim);
}

:is(dialog.invite-dialog, .invite-card) > .head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

:is(dialog.invite-dialog, .invite-card) > .head > div {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

:is(dialog.invite-dialog h2, .invite-card h1) {
    font-size: calc(20px * var(--text-scale));
    font-weight: 800;
    line-height: normal;
}

:is(dialog.invite-dialog, .invite-card) > .head p {
    color: var(--c-text-3);
    font-size: calc(13px * var(--text-scale));
}

:is(dialog.invite-dialog button.close, .invite-card a.close) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 36px;
    min-height: 0;
    height: 36px;
    padding: 0;
    border: 1px solid var(--c-control);
    border-radius: 8px;
    background: none;
    color: var(--c-text-3);
    font-size: calc(14px * var(--text-scale));
    text-decoration: none;
}

#invite {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: none;
    line-height: normal;
}

#invite .field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

#invite .names {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

#invite label {
    font-size: calc(13px * var(--text-scale));
    font-weight: 600;
}

#invite label .optional {
    font-weight: 400;
    color: var(--c-text-3);
}

#invite :is(input, select, textarea) {
    min-height: 0;
    height: 44px;
    padding: 0 12px;
    border: 1px solid var(--c-control);
    border-radius: 10px;
    background: var(--c-bg);
    font-size: calc(14px * var(--text-scale));
    line-height: normal;
}

#invite select {
    padding: 0 10px;
}

/* The design draws the email box 2 px taller than the others (46 px with its border). */
#invite input[type="email"] {
    height: 46px;
}

#invite textarea {
    height: auto;
    padding: 10px 12px;
    resize: none;
}

#invite .field-error {
    color: var(--c-bad-text);
    font-size: calc(13px * var(--text-scale));
}

#invite .actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

#invite .actions > :is(a, button) {
    display: inline-flex;
    align-items: center;
    min-height: 0;
    height: 44px;
    padding: 0 16px;
    border: 1px solid var(--c-control);
    border-radius: 10px;
    background: none;
    color: var(--c-text);
    font-size: calc(14px * var(--text-scale));
    font-weight: 600;
    text-decoration: none;
}

#invite .actions > button[type="submit"] {
    padding: 0 18px;
    border: 0;
    background: var(--c-accent);
    color: var(--c-bg);
    font-weight: 800;
}

#invite .actions > button[type="submit"]:hover {
    background: var(--c-accent-text);
}

:is(dialog.invite-dialog, .invite-card) > .hint {
    padding-top: 10px;
    border-top: 1px solid var(--c-line);
    color: var(--c-text-3);
    font-size: calc(12px * var(--text-scale));
}

/* The page's card sits in the middle, a little below the bar; it has no backdrop to lift it off, so no shadow. */
main.page-invite {
    display: flex;
    justify-content: center;
    padding: 40px 20px;
}

main.page-invite > .invite-card {
    box-shadow: none;
}

/* ---- Client · Details (coach-details) ---------------------------------------
   Design pg-details: the client's own details to read, then two columns of cards, each with its own form. */

.page-details .details-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px 24px 40px;
}

.page-details .details-top {
    display: flex;
    align-items: center;
    gap: 12px;
}

.page-details .details-top h1 {
    margin: 0;
    font-size: calc(22px * var(--text-scale));
}

.page-details .avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--c-accent);
    color: var(--c-bg);
    font-weight: 700;
}

.page-details .details-own {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    margin: 0;
    color: var(--c-text-2);
    font-size: calc(13px * var(--text-scale));
}

.page-details .details-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: 16px;
    align-items: start;
}

.page-details .details-column {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.page-details .details-card {
    border: 1px solid var(--c-line);
    border-radius: var(--radius-card);
    background: var(--c-panel);
}

.page-details .details-card h2 {
    margin: 0;
    font-size: calc(16px * var(--text-scale));
}

.page-details .card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.page-details .lead,
.page-details .meta {
    margin: 0;
    color: var(--c-text-3);
    font-size: calc(12px * var(--text-scale));
}

.page-details form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.page-details .details-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
    align-items: end;
}

.page-details .weigh-in-entry {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
}

.page-details label,
.page-details .details-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--c-text-3);
    font-size: calc(12px * var(--text-scale));
    font-weight: 600;
}

.page-details fieldset.segmented {
    margin: 0;
    padding: 0;
    border: 0;
}

.page-details fieldset.segmented legend {
    margin-bottom: 6px;
    color: var(--c-text-3);
    font-size: calc(12px * var(--text-scale));
    font-weight: 600;
}

.page-details .segmented {
    display: flex;
}

.page-details .segmented,
.page-details fieldset.segmented > label:first-of-type {
    border-radius: var(--radius-field);
}

.page-details div.segmented,
.page-details fieldset.segmented {
    gap: 4px;
}

.page-details div.segmented {
    padding: 4px;
    border: 1.5px solid var(--c-control);
}

.page-details div.segmented > span,
.page-details fieldset.segmented > label {
    flex: 1;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    border-radius: 7px;
    color: var(--c-text-2);
    font-size: calc(13px * var(--text-scale));
    font-weight: 400;
}

.page-details div.segmented > span {
    display: inline-flex;
}

.page-details fieldset.segmented > label {
    flex-direction: row;
    border: 1.5px solid var(--c-control);
    cursor: pointer;
}

.page-details fieldset.segmented input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.page-details div.segmented > span[aria-current="true"],
.page-details fieldset.segmented > label:has(input:checked) {
    border-color: var(--c-accent);
    background: var(--c-accent);
    color: var(--c-bg);
    font-weight: 700;
}

.page-details fieldset.segmented > label:has(input:focus-visible) {
    outline: 3px solid var(--c-accent);
    outline-offset: 2px;
}

.page-details textarea {
    padding: 10px 12px;
}

.page-details .details-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.page-details .details-actions > button:only-child {
    margin-left: auto;
}

.page-details .changed {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--c-text-3);
    font-size: calc(12px * var(--text-scale));
}

.page-details .badge {
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--c-superset);
    color: var(--c-accent-text);
    font-weight: 700;
}

.page-details .suggestion-box {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border-radius: 10px;
    background: var(--c-panel-2);
}

.page-details button.outlined {
    border-color: var(--c-control);
    background: none;
    color: var(--c-text);
}

.page-details button.link,
.page-details a.link {
    min-height: auto;
    padding: 0;
    border: 0;
    background: none;
    color: var(--c-accent-text);
    font-size: calc(12px * var(--text-scale));
    text-decoration: underline;
}

.page-details .details-weigh-ins {
    margin: 0;
    padding: 0;
    list-style: none;
}

.page-details .details-weigh-ins li {
    display: grid;
    grid-template-columns: 1fr auto 90px auto auto;
    align-items: center;
    gap: 4px 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--c-row-line);
    font-size: calc(13px * var(--text-scale));
}

.page-details .details-weigh-ins li > form {
    display: contents;
}

/* A weigh-in's pencil and cross: small outlined squares, side by side */
.page-details .details-weigh-ins li button.icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    min-height: 0;
    height: 30px;
    padding: 0;
    border: 1px solid var(--c-control);
    border-radius: 6px;
    background: none;
    color: var(--c-text);
}

.page-details .details-weigh-ins li button.icon:hover {
    border-color: var(--c-text-2);
    background: var(--c-raised);
}

.page-details .details-weigh-ins li button.icon > svg.icon {
    width: 16px;
    height: 16px;
}

/* ---- 8f: Client · Photos (coach-photos) ------------------------------------
   Design client-photos: a table with a row per training week, its dates, average weight and a portrait cell per
   pose with the day it was added and a download button; an empty cell is dashed and only says so. */

.page-photos .photos-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px 24px 40px;
}

.page-photos .photos-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.page-photos .photos-top h1 {
    margin: 0;
    font-size: calc(22px * var(--text-scale));
}

.page-photos .photos-top .note {
    margin: 0 0 0 auto;
    color: var(--c-text-2);
    font-size: calc(12px * var(--text-scale));
}

.page-photos .avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--c-accent);
    color: var(--c-bg);
    font-weight: 700;
}

.page-photos .photos-table {
    border: 1px solid var(--c-line);
    border-radius: var(--radius-card);
    background: var(--c-panel);
    overflow: hidden;
}

.page-photos table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.page-photos thead th {
    padding: 10px 14px;
    border-bottom: 1px solid var(--c-line);
    color: var(--c-text-2);
    font-size: calc(12px * var(--text-scale));
    font-weight: 400;
    text-align: left;
}

.page-photos thead th:first-child {
    width: 180px;
}

.page-photos tbody th,
.page-photos tbody td {
    padding: 10px 5px;
    border-bottom: 1px solid var(--c-line);
    vertical-align: top;
    text-align: left;
}

.page-photos tbody th {
    padding-left: 14px;
}

.page-photos .week strong {
    display: block;
    font-size: calc(14px * var(--text-scale));
}

.page-photos .week .average {
    color: var(--c-text-2);
    font-size: calc(12px * var(--text-scale));
    font-weight: 400;
}

.page-photos .photo {
    margin: 0;
}

.page-photos .photo img {
    display: block;
    width: 100%;
    aspect-ratio: 8 / 5;
    object-fit: cover;
    border-radius: var(--radius-field);
    background: var(--c-panel-2);
}

.page-photos .photo figcaption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 6px;
    color: var(--c-text-2);
    font-size: calc(11px * var(--text-scale));
}

.page-photos .download {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--c-line);
    border-radius: var(--radius-cell);
    color: var(--c-text);
    text-decoration: none;
}

.page-photos .no-photo {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 8 / 5;
    margin: 0 0 34px;
    border: 1.5px dashed var(--c-line);
    border-radius: var(--radius-field);
    color: var(--c-text-3);
    font-size: calc(12px * var(--text-scale));
}

.page-photos .empty {
    margin: 0;
    padding: 16px 14px;
    color: var(--c-text-2);
}

.page-photos .older {
    display: block;
    padding: 12px 14px;
    color: var(--c-text-2);
    font-size: calc(12px * var(--text-scale));
    text-decoration: none;
}

/* ---- 8g: Client · Photos, before and after ---------------------------------
   Design client-photos: beside the table, the before-and-after builder (two week selects, the poses as pill
   checkboxes, a missing one greyed, a two-photo preview and Make image) and the Made list; BEFORE and AFTER pills
   mark the picked weeks in the table. */

.page-photos .photos-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    align-items: start;
    gap: 16px;
}

@media (max-width: 1100px) {
    .page-photos .photos-columns {
        grid-template-columns: minmax(0, 1fr);
    }
}

.page-photos .week .pick {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--c-accent);
    color: var(--c-bg);
    font-size: calc(10px * var(--text-scale));
    font-weight: 800;
    text-transform: uppercase;
}

.page-photos .photos-side {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.page-photos .builder,
.page-photos .made {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--c-line);
    border-radius: var(--radius-card);
    background: var(--c-panel);
}

.page-photos .photos-side h2 {
    margin: 0;
    font-size: calc(16px * var(--text-scale));
}

.page-photos .photos-side .hint {
    margin: 0;
    color: var(--c-text-2);
    font-size: calc(12px * var(--text-scale));
}

.page-photos .refused {
    margin: 0;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--c-bad-bg);
    color: var(--c-bad-text);
    font-size: calc(13px * var(--text-scale));
}

.page-photos .weeks {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    align-items: end;
    gap: 8px;
}

.page-photos .weeks label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--c-text-2);
    font-size: calc(12px * var(--text-scale));
}

.page-photos .weeks select {
    min-height: 36px;
    padding: 0 8px;
    border: 1px solid var(--c-line);
    border-radius: 8px;
    background: var(--c-control);
    color: var(--c-text);
}

.page-photos .weeks .show,
.page-photos .made .download {
    min-height: 36px;
    padding: 0 10px;
    border: 1px solid var(--c-line);
    border-radius: 8px;
    background: var(--c-raised);
    color: var(--c-text);
}

.page-photos .make {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.page-photos .poses {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
}

.page-photos .poses legend {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

.page-photos .poses label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border: 1px solid var(--c-line);
    border-radius: 999px;
    color: var(--c-text-2);
    font-size: calc(13px * var(--text-scale));
}

.page-photos .poses label.on {
    border-color: var(--c-accent);
    color: var(--c-text);
}

.page-photos .poses input {
    accent-color: var(--c-accent);
}

.page-photos .preview {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 4px;
    border-radius: 10px;
    background: var(--c-bg);
}

.page-photos .preview figure {
    position: relative;
    margin: 0;
}

.page-photos .preview img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: 8px;
    background: var(--c-panel-2);
}

.page-photos .preview figcaption {
    position: absolute;
    left: 8px;
    bottom: 8px;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--c-scrim);
    color: var(--c-text);
    font-size: calc(10px * var(--text-scale));
    font-weight: 700;
}

.page-photos .make .primary {
    min-height: 40px;
    border: 0;
    border-radius: 8px;
    background: var(--c-accent);
    color: var(--c-bg);
    font-weight: 700;
}

.page-photos .make .primary:disabled {
    opacity: 0.5;
}

.page-photos .made-image {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 8px;
    padding: 10px;
    border-radius: 10px;
    background: var(--c-panel-2);
}

.page-photos .made-image .what {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.page-photos .made-image .weeks {
    display: block;
    color: var(--c-text-2);
    font-size: calc(11px * var(--text-scale));
}

.page-photos .made-image .state {
    padding: 3px 9px;
    border: 1px dashed var(--c-text-3);
    border-radius: 999px;
    color: var(--c-text-2);
    font-size: calc(11px * var(--text-scale));
    font-weight: 700;
}

.page-photos .made-image {
    grid-template-columns: 1fr auto;
}

.page-photos .made-image .state.shared {
    border: 0;
    background: var(--c-ok-bg);
    color: var(--c-ok-text);
}

.page-photos .made-image .share {
    display: flex;
    gap: 8px;
    margin: 0;
}

.page-photos .made-image .share button {
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid var(--c-line);
    border-radius: 8px;
    background: var(--c-raised);
    color: var(--c-text);
    font-weight: 700;
}