/* The Strength page: what is under the header, and what the coach draws. The look itself is aule.css, linked first. */
@layer page, a2ui;

@layer page {
    #page { padding-block-end: 6lh; } /* room for the clock */
    #starts { display: grid; gap: .25lh; }
    #starts div, .turn :is(.options, .scale) { display: flex; flex-wrap: wrap; gap: .25lh 3ch; } /* a row of choices */
    #page:has(.turn > .col, .turn > .musing, .gate) #starts, #page:not(:has(.turn > .col)) #more { display: none; } /* the starts until a set is under way (back after a failed first ask); the follow-up line once the coach has answered */
    #more { font-size: .875em; max-width: 48ch; }
    #turns { display: grid; gap: 1lh; }
    .turn {
        display: grid; gap: .5lh;
        .you { color: var(--accent); font-style: italic; &::before { content: '› '; } }
        .err { overflow-wrap: anywhere; }
    }
    /* The clock is a bar across the bottom whose colour is its state. */
    #clock {
        position: fixed; inset-inline: 0; bottom: 0; display: flex; align-items: baseline; gap: 3ch;
        padding: .25lh max(3.5ch, calc((100% - 72ch) / 2 + 3.5ch)); background: var(--ink); color: var(--paper);
        .time { font-size: 1.25em; line-height: 2lh; font-variant-numeric: tabular-nums; flex: 1; }
        &:is([data-until], [data-since]) { background: var(--accent); }
        &.over { background: var(--good); }
    }
    #made { text-align: center; }
}

/* What the model draws; the names match app.js. */
@layer a2ui {
    .turn {
        :is(.col, .card, .steps, .choice, .rate, .bar, .ex, .rows) { display: grid; gap: .25lh; }
        :is(.col, .card, .rows) { gap: .5lh; }
        .row { display: flex; flex-wrap: wrap; gap: .5lh 2ch; align-items: start; > * { flex: 1 1 20ch; } }
        .card { border: 1px solid var(--accent); padding: .5lh 2ch; }
        h3 { color: var(--accent); border-block-end: var(--hair); padding-block-end: .25lh; }
        hr { border: 0; border-block-start: 1px solid; }
        .caption { font-size: .875em; }
        :is(ol, ul) { padding-inline-start: 3ch; display: grid; gap: .25lh; }
        details[open] > :not(summary) { margin-block-start: .25lh; }
        summary::after { content: ' ▶'; } [open] > summary::after { content: ' ▼'; }
        /* Buttons and summaries that hold words, not a label. */
        :is(.note summary, .tick, .start) { text-transform: none; letter-spacing: 0; font-size: 1em; }
        .note summary { color: var(--ink); }
        .stat { display: grid; justify-items: start; .n { font-size: 2em; line-height: 2lh; font-weight: 700; font-variant-numeric: tabular-nums; } }
        .bar .track { height: .5lh; border: 1px solid; background: linear-gradient(to right, var(--ink) calc(var(--at, 0) * 100%), transparent 0); }
        button { justify-self: start; }
        .picked { cursor: default; }
        .scale { gap: .25lh .5ch; button { flex: 1 1 2ch; min-width: 2ch; padding-inline: .5ch; text-align: center; } }
        .tick { text-align: start; text-decoration: none; &::before { content: '☐ '; color: var(--mute); } &.done::before { content: '☑ '; color: var(--good); } &:disabled { cursor: default; color: var(--mute); } }
        .reference { /* three frames in one cell, a third of the loop each; white lines, so inverted on light paper */
            display: grid; width: 24ch; max-width: 100%;
            img { grid-area: 1 / 1; width: 100%; animation: reference 1.8s steps(1) infinite; &:nth-child(2) { animation-delay: -.6s; } &:nth-child(3) { animation-delay: -1.2s; } }
            @media (prefers-color-scheme: light) { :root:not([data-scheme=dark]) & img { filter: invert(1); } }
            :root[data-scheme=light] & img { filter: invert(1); }
            @media (prefers-reduced-motion: reduce) { width: 100%; grid-auto-flow: column; img { grid-area: auto; animation: none; } }
        }
        /* A timer: its time in a button, accent while it runs, green when it is up. A rest is a beam across the turn with the time in the middle. */
        .start { font-variant-numeric: tabular-nums; &:is([data-until], .over) { text-decoration-thickness: var(--beam); } &[data-until] { color: var(--accent); } &.over { color: var(--good); } }
        .rest {
            justify-self: stretch; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2ch; padding-block: .5lh; text-decoration: none;
            &::before, &::after { content: ''; border-block-start: var(--beam) solid; }
        }

        .ex {
            border-block-start: var(--hair); padding-block-start: .5lh;
            h3 + & { border-block-start: 0; padding-block-start: 0; }
            .head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 2ch; .name { font-weight: 700; } .track { color: var(--accent); font-size: .875em; } }
            .why { color: var(--mute); font-style: italic; }
            &:has(.set):not(:has(.set:not(.done))) .head .name::after { content: ' ✓'; color: var(--good); }
        }
        .rows { margin-block-start: .25lh; }
        .set {
            display: grid; grid-template-columns: 1fr auto 1fr auto; align-items: center; gap: 1ch;
            &:is([data-kind=hold], [data-kind=reps], [data-kind=check]) { grid-template-columns: 1fr auto; }
            .x { color: var(--mute); text-align: center; }
            .n { display: grid; justify-items: center; .label { font-size: .625em; } }
            input[type=number] { text-align: center; font-size: 1.25em; appearance: textfield; &::-webkit-inner-spin-button, &::-webkit-outer-spin-button { appearance: none; } }
            button.ok { font-size: 1.25em; min-width: 4ch; line-height: 1.5lh; padding: 0 1ch; } /* B612's tick is thin, so it is drawn bigger */
            &.done { grid-template-columns: 1fr auto; align-items: baseline; color: var(--mute); font-variant-numeric: tabular-nums; .did { color: var(--ink); font-size: 1.25em; } .at { font-size: .75em; letter-spacing: .1em; } }
            &.done[data-kind=check] .did { font-size: 1em; }
            .err { grid-column: 1 / -1; font-size: .875em; }
            &.skipped { color: var(--mute); :is(input, .x, button.ok) { text-decoration: line-through; color: var(--mute); } button.ok { background: none; cursor: default; } }
        }
        .gate { p button { padding: 0; } }
    }

    @keyframes reference { 0% { opacity: 1; } 33.3%, 100% { opacity: 0; } }

    /* The history: a row per muscle and motion. */
    #long table {
        width: 100%; border-collapse: collapse; font-size: .875em;
        th { text-align: start; }
        :is(th, td) { padding: 0 1ch; border-block-end: var(--hair); vertical-align: baseline; white-space: nowrap;
            &:first-child { padding-inline-start: 0; white-space: normal; } &:last-child { padding-inline-end: 0; text-align: end; } }
        .m, td.best { color: var(--accent); } :is(td.n, td.last) { color: var(--mute); } td.n { text-align: end; } .tool { font-size: .857em; }
        @container page (width < 56ch) { th:nth-child(3), td.last { display: none; } }
    }
}