/* styles/aerobic.css -- AEROBIC POWER (2026-10-13, the owner's reference
   screens AP1-AP4; ported 2026-10-19 from ae/v1's 7305b2c): the overview,
   the equipment sheet, a bout, the easy minutes between, the first
   session's "Can you do more?". Served at `/styles/aerobic.css`.

   NO NEW TOKEN: the surface's own and the workout's `rv-` parts; the
   sprint screens' callout, sheet rows, summary and effort grid are reused
   by class. Hard is the session's colour (`--focal`), easy a green; every
   class here is `aer-`. */

.aer { --aer-easy: #5fd39a; }

/* ---- the overview (AP1) ------------------------------------------------- */
.aer-strip { display: flex; gap: 4px; height: 26px; margin: 16px 0 8px; }
.aer-strip i { display: block; border-radius: 6px; min-width: 6px; }
.aer-strip i.h { background: var(--focal); }
.aer-strip i.e { background: var(--line); }
.aer-key { display: flex; gap: 14px; align-items: center; font-size: 14px;
           color: var(--dim); }
.aer-key span { display: inline-flex; align-items: center; gap: 6px; }
.aer-key b { width: 10px; height: 10px; border-radius: 2px; }
.aer-key b.h { background: var(--focal); }
.aer-key b.e { background: var(--line); }
.aer-key em { margin-left: auto; font-style: normal; }
.aer-warm { margin: 10px 0 0; font-size: 15px; }
.aer-on .aer-onrow { display: flex; gap: 14px; align-items: center;
                     margin: 8px 0 12px; }
.aer-ic { width: 46px; height: 46px; border-radius: 12px; flex: none;
          display: grid; place-items: center;
          background: var(--raised-fill); color: var(--focal); }
.aer-ic svg { width: 24px; height: 24px; }
.aer-onrow b { font-size: 19px; }
.aer-onrow p { margin: 2px 0 0; color: var(--dim); font-size: 14.5px; }
.aer-change { display: inline-flex; gap: 8px; }
.aer-effort .h, .aer-guide .h { display: flex; justify-content: space-between;
                                align-items: baseline; gap: 8px; }
.aer-effort .h b, .aer-guide .h b { font-size: 18px; }
.aer-effort .h em, .aer-guide .h em { font-style: normal; font-size: 24px;
                                      font-weight: 900; color: var(--focal); }
.aer-ticks { display: flex; gap: 4px; margin: 10px 0 12px; }
.aer-ticks i { flex: 1; height: 7px; border-radius: 4px;
               background: var(--line); }
.aer-ticks i.on { background: var(--focal); }
.aer-effort p, .aer-guide p { margin: 0; font-size: 15px; line-height: 1.45; }
.aer-gap { display: flex; gap: 12px; align-items: flex-start; }
.aer-gap svg { flex: none; width: 20px; height: 20px; margin-top: 2px;
               stroke: var(--aer-easy); }
.aer-gap p { margin: 0; font-size: 15px; line-height: 1.45; }

/* ---- the equipment sheet (AP2) ------------------------------------------ */
.aer-psub { margin: 4px 0 14px; color: var(--dim); font-size: 15px; }
.sheet button.aer-opt { display: flex; gap: 14px; align-items: flex-start;
                        width: 100%; text-align: left; padding: 16px;
                        margin-bottom: 10px; border-radius: 16px;
                        background: var(--card-fill);
                        border: 1px solid var(--line); color: inherit; }
.sheet button.aer-opt.on { border-color: var(--accent-bright, #2196f3); }
.aer-opt .dot { width: 22px; height: 22px; border-radius: 50%; flex: none;
                border: 2px solid var(--line); margin-top: 2px; }
.aer-opt.on .dot { border-color: var(--accent-bright, #2196f3);
                   box-shadow: inset 0 0 0 4px var(--card-fill);
                   background: var(--accent-bright, #2196f3); }
.aer-opt .t { display: flex; flex-direction: column; gap: 4px; }
.aer-opt .t b { font-size: 17px; }
.aer-opt .t > span { color: var(--dim); font-size: 14.5px; line-height: 1.4; }
.aer-opt em.spr-tag { margin-left: 6px; vertical-align: middle; }

/* ---- a bout and the easy minutes (AP3 / AP4) ---------------------------- */
.aer-head { position: sticky; top: 0; z-index: 2; padding-bottom: 6px; }
.aer-top { display: flex; align-items: center; gap: 12px; }
.aer-name { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.aer-name b { font-size: 17px; white-space: nowrap; overflow: hidden;
              text-overflow: ellipsis; }
.aer-name > span { color: var(--dim); font-size: 14px; }
.aer-modepill { flex: none; }
.aer-segs { display: flex; gap: 4px; margin-top: 12px; height: 6px; }
.aer-segs i { display: block; border-radius: 3px; min-width: 4px;
              background: linear-gradient(90deg,
                var(--accent-bright, #2196f3) calc(var(--f, 0) * 100%),
                var(--line) 0); }
.aer-segs i.cur { background: var(--focal); opacity: 0.85; }
.aer-eye { text-align: center; margin: 18px 0 6px; color: var(--focal); }
.aer-run.is-easy .aer-eye { color: var(--aer-easy); }
.aer-ringwrap { position: relative; width: 230px; height: 230px;
                margin: 6px auto 14px; }
.aer-ringwrap svg { width: 100%; height: 100%; }
.aer-ringbg { fill: none; stroke: var(--grid, #1c2633); stroke-width: 6; }
.aer-ringfg { fill: none; stroke: var(--focal); stroke-width: 6;
              stroke-linecap: round; }
.aer-ringwrap.easy .aer-ringfg { stroke: var(--aer-easy); }
.aer-ringwrap.ready .aer-ringfg { stroke: var(--dim); }
.aer-ringwrap .in { position: absolute; inset: 0; display: flex;
                    flex-direction: column; align-items: center;
                    justify-content: center; }
.aer-ringwrap .in b { font-size: 56px; font-weight: 900; line-height: 1.05;
                      font-variant-numeric: tabular-nums; }
.aer-ringwrap .in span { color: var(--dim); font-size: 15px; }
.aer-easyline { text-align: center; margin: 0 0 12px; font-size: 16px; }
.aer-done { display: flex; gap: 12px; align-items: center; }
.aer-done svg { width: 22px; height: 22px; stroke: var(--aer-easy); }
.aer-next h3 { margin: 6px 0 4px; font-size: 20px; }
.aer-next p { margin: 0; color: var(--dim); font-size: 14.5px; }
.aer-then { display: flex; gap: 8px; align-items: center;
            justify-content: center; color: var(--dim); font-size: 15px; }
.aer-then svg { width: 18px; height: 18px; stroke: var(--aer-easy); }
.aer-bar .aer-pause { width: 100%; justify-content: center; }