/* The new-activity dialog — + → Open | Planned. docs/activity-contract.md; the
   spec is docs/mockups/web-new-activity-draft-v1.html. Loaded by the activities
   page and the plan page; the markup is built by new-activity.js. */
dialog.na{max-width:none;width:min(780px,calc(100% - 32px))}
.na .sheet{background:var(--bg);color:var(--ink);border-radius:var(--radius-panel);
           max-height:90vh;display:flex;flex-direction:column;overflow:hidden}
.na .sheet header{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-6) var(--space-7)}
.na .sheet header .title{flex:1;text-align:center;font-size:var(--font-headline);font-weight:var(--weight-semibold)}
.na .sheet header button{font-size:var(--font-body);color:var(--accent)}
.na .sheet header button:disabled{opacity:.35}
.na .sheet header .done{font-weight:var(--weight-semibold)}
.na .sheet .scroll{overflow-y:auto;padding:0 var(--space-7) var(--space-7);
                   display:flex;flex-direction:column;gap:var(--space-5)}
.na-steps{display:flex;gap:4px;padding:0 var(--space-7) var(--space-5);
          background:var(--bg)}
.na-steps button{flex:1;padding:6px 0;border-radius:var(--radius-pill);
                 font-size:var(--font-subheadline);color:var(--ink-secondary);
                 background:var(--chip-unselected)}
.na-steps button.on{background:var(--accent);color:var(--on-accent);font-weight:var(--weight-semibold)}
.na-cols{display:grid;grid-template-columns:1fr;gap:var(--space-5)}
@media (min-width:700px){.na-cols{grid-template-columns:1fr 1fr;align-items:start}.na-cols.na-one{grid-template-columns:1fr}}
.na-col{display:flex;flex-direction:column;gap:var(--space-5);min-width:0}
.na-card{background:var(--card);border-radius:var(--radius-card);padding:var(--space-6);
         display:flex;flex-direction:column;gap:var(--space-4)}
.na-card > .na-head{display:flex;align-items:center;gap:var(--space-3);
                 font-size:var(--font-caption);font-weight:var(--weight-semibold);
                 letter-spacing:.4px;text-transform:uppercase;color:var(--ink-secondary)}
.na-card > .na-head .na-r{margin-left:auto;display:flex;align-items:center;gap:6px;
                    text-transform:none;letter-spacing:0;font-weight:var(--weight-regular)}
.na-card > .na-head .na-opt{text-transform:none;letter-spacing:0;font-weight:var(--weight-regular);
                      color:var(--ink-tertiary)}
.na-hint{font-size:var(--font-caption2);color:var(--ink-secondary)}
.na input,.na select{font:inherit;font-size:var(--font-subheadline);color:var(--ink);
                     background:var(--bg-raised);border:var(--stroke-hairline) solid var(--separator);
                     border-radius:var(--radius-md);padding:7px 9px;min-width:0}
.na input:read-only{color:var(--ink-secondary);background:transparent}
.na input.na-full{width:100%}
.na .na-seg{display:flex;background:var(--chip-unselected);border-radius:var(--radius-pill);padding:2px}
.na .na-seg button{flex:1;padding:6px 0;border-radius:var(--radius-pill);font-size:var(--font-subheadline);
                color:var(--ink-secondary)}
.na .na-seg button.on{background:var(--seg-thumb,var(--bg-raised));color:var(--ink);font-weight:var(--weight-semibold)}
.na .na-two{display:flex;gap:var(--space-4)}
.na .na-two > *{flex:1;min-width:0}
.na .na-hms{display:flex;align-items:center;gap:4px}
.na .na-hms input{width:54px;text-align:center}
.na .na-hms span{color:var(--ink-secondary);font-size:var(--font-caption)}
.na .na-lnk{color:var(--accent);font-size:var(--font-caption);padding:0}
.na .na-lnk:disabled{opacity:.4}
.na .na-readout{font-size:var(--font-caption);color:var(--ink-secondary);font-variant-numeric:tabular-nums}
.na .na-ic{width:28px;height:28px;border-radius:var(--radius-md);font-size:15px;color:var(--ink-secondary)}
.na .na-ic:disabled{opacity:.3}
.na .na-ic:not(:disabled):hover{background:var(--chip-unselected);color:var(--ink)}

/* the sections editor — design B: steps with repeats, the handle on the left */
.na-ed{display:flex;flex-direction:column;gap:3px}
.na-row{display:flex;align-items:center;gap:5px;padding:3px 4px;border-radius:var(--radius-md);
        border-top:2px solid transparent;border-bottom:2px solid transparent}
.na-row.dragging{opacity:.4}
.na-row.over-top{border-top-color:var(--accent)}
.na-row.over-bot{border-bottom-color:var(--accent)}
.na-row.over-in{background:color-mix(in srgb,var(--accent) 12%,transparent)}
.na-drag{cursor:grab;color:var(--ink-tertiary);font-size:13px;letter-spacing:-3px;width:14px;
         flex:none;user-select:none}
.na-row .na-n{width:16px;flex:none;font-size:var(--font-caption2);color:var(--ink-tertiary);
           font-variant-numeric:tabular-nums}
.na-row input,.na-row select{padding:4px 6px;font-size:var(--font-caption)}
.na-row .na-kind{width:96px;flex:none}
.na-row .na-num{width:52px;flex:none;text-align:right}
.na-row .na-unit{width:56px;flex:none}
.na-row .na-at{color:var(--ink-tertiary);font-size:var(--font-caption)}
.na-row .na-tgt{width:62px;flex:none}
.na-row .na-tunit{width:68px;flex:none}
.na-row .na-notein{flex:1;min-width:80px}
.na-row .na-acts{margin-left:auto;display:flex;gap:1px;flex:none}
.na-row .na-acts button{width:22px;height:22px;border-radius:5px;color:var(--ink-secondary);font-size:12px}
.na-row .na-acts button:hover{background:var(--chip-unselected);color:var(--ink)}
.na-row .na-x{color:var(--ink-secondary);font-size:var(--font-caption)}
.na-rep{margin-left:22px;padding-left:8px;border-left:2px solid var(--separator);
        display:flex;flex-direction:column;gap:3px}
.na-addrow{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding-top:6px}
.na-addrow button{padding:5px 10px;border-radius:var(--radius-pill);background:var(--chip-unselected);
                  font-size:var(--font-caption);color:var(--ink)}
.na-addrow button.na-pri{background:var(--accent);color:var(--on-accent)}
/* A link beside the pill, not a second pill: the row's action is the file button. */
.na-addrow button.na-lnk{background:none;padding:5px 4px;font-size:var(--font-subheadline)}
.na-addrow button.na-lnk.na-danger{color:var(--race-type)}
.na-tplrow{display:flex;align-items:center;gap:6px;flex-basis:100%}
.na-tplrow input{flex:1}
.na-tplmgr{flex-basis:100%;display:flex;flex-direction:column;gap:4px;padding-top:4px}
.na-trow{display:flex;align-items:center;gap:6px;padding:3px 0}
.na-trow input{flex:1;padding:4px 6px;font-size:var(--font-caption)}
.na-trow .na-hint{white-space:nowrap}
.na-trow button{padding:3px 8px;border-radius:var(--radius-pill);background:var(--chip-unselected);font-size:var(--font-caption2)}
.na-trow button:disabled{opacity:.4}
.na-tot{font-size:var(--font-caption);color:var(--ink-secondary);padding-top:4px;font-variant-numeric:tabular-nums}
.na-tot b{color:var(--ink);font-weight:var(--weight-semibold)}
.na dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:var(--font-subheadline)}
.na dt{color:var(--ink-secondary)}
.na dd{margin:0;font-variant-numeric:tabular-nums}
.na footer{display:flex;align-items:center;gap:var(--space-5);padding:var(--space-5) var(--space-7);
           border-top:var(--stroke-hairline) solid var(--separator)}
.na footer .na-fnote{flex:1;font-size:var(--font-caption);color:var(--ink-secondary)}
.na footer .na-fnote.err{color:var(--attention)}
.na footer button{font-size:var(--font-subheadline);color:var(--accent)}
.na footer button:disabled{opacity:.35}
.na footer .na-danger{color:var(--attention)}

/* the + menu and the Open popover */
.na-pop{position:fixed;z-index:60;background:var(--bg-raised);border-radius:var(--radius-card);
        box-shadow:0 8px 28px rgba(0,0,0,.18);padding:6px;min-width:190px;
        border:var(--stroke-hairline) solid var(--separator)}
.na-pop .na-item{display:flex;align-items:center;gap:10px;width:100%;
              text-align:left;padding:9px 12px;border-radius:var(--radius-md);font-size:var(--font-body);color:var(--ink)}
.na-pop .na-item:hover{background:var(--chip-unselected)}
.na-pop .na-item svg{width:20px;height:20px;flex:none;color:var(--accent)}
.na-pop.na-openpop{padding:12px;display:flex;flex-direction:column;gap:8px;min-width:250px}
.na-pop.na-openpop .na-t{font-size:var(--font-subheadline);font-weight:var(--weight-semibold)}
.na-pop.na-openpop input{font:inherit;font-size:var(--font-subheadline);color:var(--ink);
                   background:var(--bg);border:var(--stroke-hairline) solid var(--separator);
                   border-radius:var(--radius-md);padding:6px 8px}
.na-pop.na-openpop .na-prow{display:flex;gap:8px;align-items:center}
.na-pop.na-openpop .na-pri{margin-left:auto;padding:6px 14px;border-radius:var(--radius-pill);
                  background:var(--accent);color:var(--on-accent);font-size:var(--font-subheadline)}
.na-pop.na-openpop .na-pri:disabled{opacity:.5}

/* the course card — a file picker dressed as a button, and the course's line */
.na-file{display:inline-flex;align-items:center;padding:5px 10px;border-radius:var(--radius-pill);
         background:var(--accent);color:var(--on-accent);font-size:var(--font-caption);cursor:pointer}
.na-file input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.na-course{display:flex;flex-direction:column;gap:2px;font-size:var(--font-subheadline)}
/* The Course card while a file is over it — the drop target, drawn as one. */
#na-course.na-over > .na-card{outline:2px dashed var(--accent);outline-offset:-2px;background:color-mix(in srgb,var(--accent) 8%,var(--card))}

/* ── The Fuel step — RacePlannerView.swift's step 1, card for card ─────────── */
.na-sub{font-size:var(--font-subheadline);color:var(--ink-secondary)}
.na-rule{height:var(--stroke-hairline);background:var(--separator);margin:2px 0}
/* `targetRow`: name left, value right, the slider under both. */
.na-target{display:flex;flex-direction:column;gap:2px}
.na-target > div{display:flex;justify-content:space-between;font-size:var(--font-subheadline)}
.na-target b{font-weight:var(--weight-semibold)}
.na input[type=range]{width:100%;padding:0;border:0;background:transparent;accent-color:var(--accent);height:22px}
/* iOS's `Label(…, systemImage: "plus.circle")` in accent, semibold subheadline, left-aligned. */
.na-act{align-self:flex-start;padding:2px 0;color:var(--accent);font-size:var(--font-subheadline);font-weight:var(--weight-semibold)}
/* `LabeledStepper`: caption label left, a − value + cluster right. */
.na-step{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);font-size:var(--font-subheadline);padding:3px 0}
.na-step > span:first-child{color:var(--ink-secondary)}
.na-step .na-r{display:flex;align-items:center;gap:4px}
.na-step .na-r b{min-width:62px;text-align:center;font-size:var(--font-caption);font-weight:var(--weight-semibold);font-variant-numeric:tabular-nums}
.na-step .na-r button{width:26px;height:26px;border-radius:50%;background:var(--chip-unselected);color:var(--ink);font-size:15px;font-weight:var(--weight-semibold)}
.na-step .na-r button:disabled{color:var(--ink-tertiary)}
.na-step select{padding:4px 8px;font-size:var(--font-caption)}
/* `typeRow` / `reminderRow`: label + dots, a bin on the right, badges, then the steppers. */
.na-ft,.na-rem{display:flex;flex-direction:column;gap:3px;padding:4px 0}
.na-ft1{display:flex;align-items:center;gap:6px}
.na-ft1 b{font-size:var(--font-body);font-weight:var(--weight-semibold)}
.na-ft1 input{flex:1}
.na-dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.na-x{margin-left:auto;width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;color:var(--ink-secondary);border-radius:50%}
.na-x svg{width:15px;height:15px}
.na-bell{width:15px;height:15px;color:var(--ink-secondary);flex:none}
.na-badges{display:flex;gap:6px;flex-wrap:wrap}
.na-badge{font-size:var(--font-caption2);font-weight:var(--weight-bold);padding:2px 6px;border-radius:5px;
          background:color-mix(in srgb,currentColor 15%,transparent)}
/* `stopRow`: the name flexes, the km sits right; the arrival under. */
/* No rule between stops: each row is its own outlined field, the line was noise (his call, 12 Sep 2026). */
.na-cp{padding:5px 0}
/* One row, as iOS's checkpointRow: name · km · ETA · ✕. The name field takes what is
   left and can be far narrower than it was; the ETA never wraps (his call, 12 Sep 2026). */
.na-cp1{display:flex;align-items:center;gap:6px}
.na-cp1 .na-cpname{flex:1;min-width:0;font-weight:var(--weight-semibold)}
.na-cp1 .na-cpkm{width:64px;text-align:right}
.na-cp1 > span{font-size:var(--font-caption);color:var(--ink-secondary)}
.na-cp1 .na-cp2{flex:none;white-space:nowrap;margin-left:2px;font-size:var(--font-caption2);font-weight:var(--weight-semibold);color:var(--ink-secondary);font-variant-numeric:tabular-nums}
/* The Add Fuel Type sheet — a second, narrower sheet over the wizard. */
dialog.na-sheet{width:min(520px,calc(100% - 32px))}
.na-sheet .na-src{margin:0 var(--space-7) var(--space-5)}
.na-sheet .na-shbody{gap:var(--space-4)}
.na-plist{display:flex;flex-direction:column}
/* A row is a label around a checkbox: tick as many as you carry, one Add. */
.na-prod{display:flex;align-items:center;gap:10px;text-align:left;padding:8px 10px;border-radius:var(--radius-md);color:var(--ink);cursor:pointer}
.na-prod + .na-prod{border-top:var(--stroke-hairline) solid var(--separator)}
.na-prod input{width:18px;height:18px;margin:0;padding:0;flex:none;accent-color:var(--accent)}
.na-prod .na-pt{display:flex;flex-direction:column;gap:1px;min-width:0}
.na-prod b{font-size:var(--font-subheadline);font-weight:var(--weight-semibold)}
.na-prod span span{font-size:var(--font-caption);color:var(--ink-secondary)}
.na-prod.on{background:color-mix(in srgb,var(--accent) 12%,transparent)}
/* The dialog itself is focused by showModal; the browser's ring around a whole sheet is not a design. */
dialog.na:focus,dialog.na:focus-visible{outline:none}
.na-toggle{display:flex;align-items:center;gap:8px;font-size:var(--font-subheadline)}
.na-toggle input{width:auto}
.na-scan{padding:var(--space-6) 0}
/* "Keep this plan as a draft?" — three named choices on the way out of a touched new plan. */
dialog.na-ask{width:min(360px,calc(100% - 32px))}
.na-ask .sheet{padding:var(--space-7);gap:var(--space-4);text-align:center}
.na-ask h3{margin:0;font-size:var(--font-headline);font-weight:var(--weight-semibold)}
.na-ask p{margin:0 0 var(--space-3);font-size:var(--font-subheadline);color:var(--ink-secondary)}
.na-ask button{padding:10px;border-radius:var(--radius-pill);font-size:var(--font-body);background:var(--chip-unselected);color:var(--ink)}
.na-ask button.na-pri{background:var(--accent);color:var(--on-accent);font-weight:var(--weight-semibold)}
.na-ask button.na-danger{color:var(--race-type)}
/* "Many at once" under Add checkpoint: two lines on one grid — word · number · unit · Add. */
.na-many{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;
         font-size:var(--font-caption);color:var(--ink-secondary);padding-top:4px}
.na-many .na-many-t{flex-basis:100%;color:var(--ink-secondary)}
.na-many .or{padding:0 2px}
.na-many .na-chip{margin-left:4px}
.na-many input{width:56px;text-align:center;padding:4px 6px;font-size:var(--font-caption)}
.na-many .na-chip{padding:4px 12px;border-radius:var(--radius-pill);background:var(--chip-unselected);color:var(--ink);font-size:var(--font-caption);font-weight:var(--weight-semibold)}
/* The Review step — iOS's reviewLine: label left, value right and bold; the plan's name on top, the fuel as chips. */
.na-rvhead{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding-bottom:4px}
.na-rvhead b{font-size:var(--font-title3);font-weight:var(--weight-bold);letter-spacing:-.2px}
.na-rvhead .na-rvwhen{flex-basis:100%;font-size:var(--font-subheadline);color:var(--ink-secondary)}
.na-pill{font-size:var(--font-caption2);font-weight:var(--weight-semibold);padding:2px 8px;border-radius:var(--radius-pill);background:color-mix(in srgb,currentColor 15%,transparent)}
.na-pill.race{color:var(--race-type)}
.na-pill.workout{color:var(--workout-type)}
.na-rvlist{display:flex;flex-direction:column}
.na-rv{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-5);padding:7px 0;font-size:var(--font-subheadline);border-top:var(--stroke-hairline) solid var(--separator)}
.na-rv > span{color:var(--ink-secondary);flex:none}
.na-rv > b{font-weight:var(--weight-semibold);text-align:right;font-variant-numeric:tabular-nums}
.na-rv > b i{display:block;font-style:normal;font-weight:var(--weight-regular);font-size:var(--font-caption);color:var(--ink-secondary)}
.na-rvlabel{padding-top:6px;font-size:var(--font-subheadline);color:var(--ink-secondary)}
.na-chips{display:flex;flex-wrap:wrap;gap:6px}
.na-chipt{padding:4px 10px;border-radius:var(--radius-pill);background:var(--chip-unselected);font-size:var(--font-caption);font-weight:var(--weight-medium)}
.na-warn{color:var(--attention)}
/* The bottle choice on the Water row — a small segment beside its label. */
.na .na-seg.na-mini{width:auto;min-width:150px}
.na .na-seg.na-mini button{padding:3px 10px;font-size:var(--font-caption)}

/* ── The Pace step (9 Sep 2026): PacePro's page ─────────────────────────────── */
.na-pace{display:flex;flex-direction:column;gap:var(--space-5)}
.na-pace .na-pace-goal{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.na-pace .na-pace-r{text-align:right}
.na-pace .na-big{font-size:var(--font-title1,28px);font-weight:var(--weight-bold);letter-spacing:-.02em;display:block}
.na-pace .na-big small{font-size:var(--font-subheadline);color:var(--ink-secondary);font-weight:var(--weight-medium)}
.na-slider{display:flex;align-items:center;gap:10px;margin:8px 0 6px;font-size:var(--font-caption2);color:var(--ink-secondary)}
.na-slider input[type=range]{flex:1;accent-color:var(--accent);margin:0}
.na-slider.off{opacity:.45}
.na-pacesvg{display:block;margin-top:4px}
.na-pacesvg .na-prof{fill:var(--chip-unselected)}
.na-pacesvg .na-avg{stroke:var(--ink-tertiary);stroke-width:1;stroke-dasharray:4 4}
.na-pacesvg .na-pl{stroke-width:2.2;stroke-linecap:butt}
.na-pacesvg .na-pl.f,.na-sw.f{stroke:var(--wt-green);background:var(--wt-green)}
.na-pacesvg .na-pl.m,.na-sw.m{stroke:var(--wt-amber);background:var(--wt-amber)}
.na-pacesvg .na-pl.s,.na-sw.s{stroke:var(--race-type);background:var(--race-type)}
.na-pacesvg .na-ax{fill:var(--ink-secondary);font-size:9px}
.na-sw{display:inline-block;width:10px;height:3px;margin:0 2px 2px 6px;vertical-align:middle}
.na-splits{margin-top:4px}
.na-sprow{display:grid;grid-template-columns:22px 62px 50px 1fr auto;gap:6px;padding:5px 0;border-top:1px solid var(--separator);font-size:var(--font-caption);align-items:center}
.na-sprow.na-sphead{border-top:0;color:var(--ink-secondary);font-size:var(--font-caption2);text-transform:uppercase;letter-spacing:.06em}
.na-sprow b{font-weight:var(--weight-bold)}
.na-sprow .up{color:var(--attention,#FF9F0A)}.na-sprow .dn{color:var(--wt-green)}
.na-sprow span:last-child{text-align:right}
.na-link{background:none;border:0;color:var(--accent);font-weight:var(--weight-semibold);padding:8px 0 0;width:100%;text-align:right;font-size:var(--font-caption)}

/* ═══════════════════════════════════════════════════════════════════════════
   THE PAGE — plan setup, web only (his call, 11 Sep 2026)

   The wizard was a `<dialog>`: one narrow scrolling column, four steps, and a
   Review at the end that existed to show you what you had just agreed to. On a
   browser there is room, so it became a page — three steps, two columns where
   the content earns them, and an aside that carries the figures Review used to
   repeat, on every step, while the choices that set them are still in reach.

   The phones keep their sheet. Nothing below is shared with them.
   ═══════════════════════════════════════════════════════════════════════════ */

.na-page { display: flex; flex-direction: column; min-height: 100vh; }

.na-phead { display: flex; align-items: flex-start; justify-content: space-between;
            gap: var(--space-5); padding: 22px 30px 0; }
.na-phead .title { font-size: var(--font-large-title); font-weight: var(--weight-bold);
                   letter-spacing: -.02em; margin: 0 0 3px; }
.na-psub { font-size: var(--font-subheadline); color: var(--ink-secondary); }
.na-close { width: 34px; height: 34px; border-radius: var(--radius-md); flex: none;
            background: var(--card); border: 1px solid var(--separator); color: inherit;
            font-size: 16px; cursor: pointer; }

/* The three steps. Pills across the top, not a rail: the content wants the width
   more than the step names do. */
.na-page .na-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
                     margin: 16px 30px 0; max-width: 820px; }
/* Only the size and the spacing are the page's. The colours stay the dialog's —
   `--chip-unselected` and the accent — because the pills are the same control,
   and a `--fill` token that does not exist left two of the three transparent. */
.na-page .na-steps button { padding: 11px 8px; font-size: var(--font-headline);
                            font-weight: var(--weight-semibold); cursor: pointer; }

.na-pbody { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 300px;
            gap: 20px; padding: 16px 30px 24px; align-items: start; }
.na-main { min-width: 0; }
.na-aside { position: sticky; top: 16px; display: flex; flex-direction: column;
             gap: var(--space-5); }
.na-abig { font-size: var(--font-large-title); font-weight: var(--weight-bold);
           letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.05; }
.na-abig small { font-size: var(--font-headline); font-weight: var(--weight-semibold); }
.na-arow { display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
           padding: 7px 0; border-bottom: 1px solid var(--separator);
           font-size: var(--font-subheadline); }
.na-arow:last-child { border-bottom: 0; }
.na-arow span { color: var(--ink-secondary); }
.na-arow b { font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums;
             text-align: right; }
/* A figure nobody has chosen yet says so. A zero here would read as an answer. */
.na-arow.pend b { color: var(--ink-tertiary, var(--ink-secondary)); font-weight: var(--weight-regular); }

.na-pfoot { position: sticky; bottom: 0; display: flex; align-items: center; gap: 12px;
            padding: 13px 30px; background: var(--bg-raised);
            border-top: 1px solid var(--separator); }
.na-pfoot .na-sp { flex: 1; }
.na-pfoot button { padding: 10px 20px; border-radius: var(--radius-md); cursor: pointer;
                   border: 1px solid var(--separator); background: var(--card);
                   font-size: var(--font-subheadline); font-weight: var(--weight-semibold);
                   color: inherit; }
.na-pfoot button:disabled { opacity: .35; cursor: default; }
.na-pfoot #na-draft { border: 0; background: none; color: var(--ink-secondary); }
.na-pfoot .na-pri { background: var(--accent); color: var(--on-accent); border-color: transparent; }

/* Two columns inside a step, where the step has two things to say. */
.na-page .na-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.na-page .na-cols.na-one { grid-template-columns: 1fr; }
.na-page .na-col > .na-card + .na-card { margin-top: 16px; }
.na-page .na-pace > .na-card { margin-bottom: 16px; }
.na-cphint { margin: -2px 0 12px; }

/* The generated schedule, read-only until the plan exists. */
.na-scp + .na-scp { border-top: 1px solid var(--separator); margin-top: 12px; padding-top: 12px; }
.na-scph { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.na-scph b { font-size: var(--font-headline); font-weight: var(--weight-bold); }
.na-scph span { font-size: var(--font-subheadline); color: var(--ink-secondary); }
.na-si { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0;
         font-size: var(--font-subheadline); }
.na-si b { font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }

/* Under about 1080 the aside stops being a column and becomes a header, and the
   two-column steps stack — the same content, one thing at a time. */
@media (max-width: 1080px) {
  .na-pbody { grid-template-columns: minmax(0, 1fr); }
  .na-aside { position: static; order: -1; }
  .na-page .na-cols { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .na-phead, .na-page .na-steps, .na-pbody, .na-pfoot { padding-left: 16px; padding-right: 16px; }
  .na-page .na-steps { margin-left: 0; margin-right: 0; }
}

.na-page .na-fld { min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.na-page .na-flabel { font-size: var(--font-caption); color: var(--ink-secondary); }
/* In a flex column `align-self` is the CROSS axis: `start` collapsed the
   Workout/Race control to "WorkoutRace" with no pill behind it. */
.na-page .na-fld > .na-seg { align-self: stretch; }

/* "By distance" is two words and the toggle is narrow — without this it wraps and
   the two options stop looking like one control. */
.na-page .na-seg.na-mini button { white-space: nowrap; }

/* The frame the page sits in. Here rather than in the page's own <style> so
   `plan-setup.html` and `_shot-setup.html` cannot drift — a shot page styled
   differently from the real one is worse than no shot page.

   `margin: 0 auto` on `.page` is what centres the plan page next door. In a grid
   item auto margins CANCEL the stretch, so the page takes its CONTENT's width:
   setup measured 788 px on Event and 820 px on Pace, and the column shifted under
   him as he stepped through. Setup fills its column at every step. */
main.page.setup { max-width: none; padding: 0; margin: 0; width: 100%; }

/* ── The nav bar: steps and the arrows that move between them ──────────────
   Back and Next used to live in a footer at the bottom of a page that can run
   to two thousand pixels — a screen away from the steps they moved. One bar,
   at the top, with the arrows either side of the pills. */
.na-nav { display: flex; align-items: center; gap: 8px; margin: 16px 30px 0; }
.na-nav .na-sp { flex: 1; }

/* **One control, not three loose lozenges.** The first cut set the steps 10 px
   apart and gave the forward arrow a solid accent, so the bar read as three
   unrelated shapes with two orange ones fighting each other. The steps are a
   segmented control on a track — the idiom already on this page, the same as the
   1 km / 5 km / CP toggle — and the accent is spent once, on where you are. */
.na-page .na-steps { display: inline-flex; flex: 0 1 520px; gap: 2px; margin: 0; padding: 3px;
                     background: var(--chip-unselected); border-radius: var(--radius-pill); }
.na-page .na-steps button { flex: 1; padding: 8px 12px; border-radius: var(--radius-pill);
                            background: none; color: var(--ink-secondary);
                            font-size: var(--font-subheadline); font-weight: var(--weight-semibold);
                            cursor: pointer; transition: background .12s ease, color .12s ease; }
.na-page .na-steps button:hover:not(.on) { color: var(--ink); }
.na-page .na-steps button.on { background: var(--accent); color: var(--on-accent); }

/* The arrows are a pair, so they look like one: same size, same quiet fill, the
   chevron doing the talking. */
.na-arrow { width: 38px; height: 38px; flex: none; border: 0; border-radius: 50%;
            background: var(--chip-unselected); color: var(--ink);
            font-size: 19px; line-height: 1; cursor: pointer;
            display: inline-flex; align-items: center; justify-content: center;
            transition: background .12s ease, opacity .12s ease; }
.na-arrow:hover:not(:disabled) { background: var(--separator); }
.na-arrow:disabled { opacity: .3; cursor: default; }
/* The last step commits, so it stops being an arrow, says what it does, and is
   the one place the accent appears as an action. */
.na-arrow.na-wide { width: auto; height: 38px; padding: 0 18px; border-radius: var(--radius-pill);
                    background: var(--accent); color: var(--on-accent);
                    font-size: var(--font-subheadline); font-weight: var(--weight-semibold); }
.na-arrow.na-wide:hover:not(:disabled) { background: var(--accent); filter: brightness(1.06); }
/* No id rule for the draft button any more: `#na-draft` outranked `.na-quiet.na-ok`
   and held it grey and borderless while the class said green. `.na-quiet` styles
   both actions; only their colour differs. */
.na-nav .na-fnote { font-size: var(--font-caption); color: var(--ink-secondary); }

/* ── The dock: the Course Planner's strip, pinned to the bottom ────────────
   Last in the step's DOM and `sticky; bottom: 0`, so it is already against the
   bottom edge when the step opens and stays there as everything scrolls past. */
/* The dock carries no frame of its own: `.strip` and `.chartwrap` from
   `course-profile.css` ARE the frame, and they are the planner's. All this adds
   is the pinning and an opaque backing — `--card` is rgba(255,255,255,.65) in
   light, so without one the checkpoint rows scrolled visibly through the terrain. */
/* The card paints the OPAQUE ground; `.strip` and `.chartwrap` keep the exact
   tones the planner gives them. Overriding `.strip` to `--bg-raised` to get
   opacity made the header a shade too dark against the planner's — his eye, and
   he was right: `--card` is #212630 in dark and `--bg-raised` is #151B27. */
/* A clear margin above it: pinned to the bottom it sits ON the content, and
   the checkpoint rows were running into its top edge. */
.na-chartcard { position: sticky; bottom: 0; z-index: 3; margin-top: var(--space-8);
                background: var(--bg); border-radius: 14px;
                filter: drop-shadow(0 -10px 18px rgba(0, 0, 0, .16)); }
/* The terrain underneath, the pace bars over it, one grid cell so they share
   the same x-axis exactly rather than lining up by eye. */
/* x1.5 the planner's 118: this chart carries the pace band as well as the
   terrain, and both need room to be read. */
.na-dockchart .profile { width: 100%; height: 177px; display: block; }
.na-dockempty { padding: 34px 0; text-align: center; }
/* The plan page's `.cpaxis` rules are scoped under `.tracebox`, so the dock needs
   its own — without them the kilometres rendered as one run of digits under the
   card, which is what his screenshot caught. */
.na-cpaxis .cpaxis { position: relative; height: 13px; margin-top: 3px; }
.na-cpaxis .cpaxis span { position: absolute; top: 0; transform: translateX(-50%);
                          font-size: 9px; line-height: 1; color: var(--accent);
                          font-variant-numeric: tabular-nums; white-space: nowrap; }

@media (max-width: 1080px) {
  .na-nav { flex-wrap: wrap; }
  .na-nav .na-steps { flex: 1 1 100%; order: -1; }
}

/* The metres beside the curve and the kilometres under it — the planner's two
   axes, laid out as one grid so the labels cannot drift off the chart. */
.na-dockgrid { display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto;
               column-gap: 6px; }
.na-yaxis { grid-area: 1 / 1; display: flex; flex-direction: column; justify-content: space-between;
            align-items: flex-end; font-size: 9px; line-height: 1; padding: 2px 0;
            color: var(--ink-tertiary); font-variant-numeric: tabular-nums; }
.na-dockgrid .na-dockchart { grid-area: 1 / 2; }
.na-dockgrid .na-cpaxis { grid-area: 2 / 2; }

/* A field is as wide as its answer, not as wide as the page. A date is ten
   characters and had a thousand pixels; three of them side by side read as three
   unrelated questions rather than one "when". */
.na-page .na-fld { max-width: 420px; }
.na-page .na-fld + .na-fld { margin-top: var(--space-5); }
.na-page .na-fld > .na-hms { max-width: 260px; }
.na-page .na-fld > .na-two { max-width: 300px; }
/* The pace, sized like the figure it is rather than a line of grey type. */
.na-bigread { display: flex; align-items: baseline; gap: var(--space-3); margin-top: var(--space-6); }
.na-bigread b { font-size: var(--font-large-title); font-weight: var(--weight-bold);
                letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1; }
.na-bigread span { font-size: var(--font-subheadline); color: var(--ink-secondary); }

/* Cards standing on their own — the workout's Sections and Session, which sit
   outside the two-column block — had no gap between them at all and read as one
   collapsed slab. */
.na-main > * + * { margin-top: var(--space-5); }
.na-edempty { color: var(--ink-secondary); font-size: var(--font-subheadline);
              padding: var(--space-5) 0 var(--space-3); }

/* Delete plan and Save activity were two runs of bare text floating in the bar —
   nothing said they could be pressed. Quiet buttons, each with its mark. */
.na-quiet { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px;
            border-radius: var(--radius-pill); border: 1px solid var(--separator);
            background: none; color: var(--ink-secondary); cursor: pointer;
            font-size: var(--font-subheadline); font-weight: var(--weight-semibold);
            transition: background .12s ease, color .12s ease; }
.na-quiet:hover { background: var(--chip-unselected); color: var(--ink); }
.na-quiet svg { width: 15px; height: 15px; flex: none; }
.na-quiet.na-danger { color: #E5484D; border-color: rgba(229, 72, 77, .35); }
.na-quiet.na-danger:hover { background: rgba(229, 72, 77, .12); color: #E5484D; }

/* Save activity in the app's green, the way Delete plan is in its red: the two
   quiet actions are opposite in kind and should not look identical. */
.na-quiet.na-ok { color: var(--wt-green); border-color: color-mix(in srgb, var(--wt-green) 38%, transparent); }
.na-quiet.na-ok:hover { background: color-mix(in srgb, var(--wt-green) 14%, transparent);
                        color: var(--wt-green); }
/* The floppy is drawn as filled plates with the shutter and label knocked out. */
.na-quiet.na-ok svg path { fill: currentColor; stroke: none; }
.na-quiet.na-ok svg path:nth-child(2),
.na-quiet.na-ok svg path:nth-child(3) { fill: var(--bg); }
.na-quiet.na-ok svg path:nth-child(4) { fill: currentColor; }

/* The step scrolls behind a docked chart, so its last card needs the dock's
   height as breathing room or it can never be fully read. */
.na-pace > .na-cols { padding-bottom: var(--space-6); }


/* The destructive action at the far end of the row it shares, so it is never
   the thing your hand is already near. */
.na-addrow .na-rowsp { flex: 1; min-width: var(--space-5); }