/* 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)}
/* WE-1: the editor page's cards share one padding and one title style — 17 semibold
   sentence case in ink replaces the 12 px grey capitals. */
.na-page .na-card{padding:var(--card-padding);gap:var(--space-8)}
.na-page .na-card > .na-head{font-size:var(--font-headline);letter-spacing:0;text-transform:none;color:var(--ink);min-height:36px}
.na-page .na-card > .na-head .na-r{display:flex;align-items:center;gap:8px}
.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,.na textarea{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%}
/* Date/time inputs: replace the browser's default blue segment highlight with the
   app accent at low opacity, keeping the app's own focus ring as the only strong
   selection cue. Chrome/Safari use the -webkit-datetime-edit-*-field pseudos;
   Firefox does not expose them, so we suppress its native outline and let the
   input's own focus border carry the state. */
.na input[type="date"]::-webkit-datetime-edit-day-field:focus,
.na input[type="date"]::-webkit-datetime-edit-month-field:focus,
.na input[type="date"]::-webkit-datetime-edit-year-field:focus,
.na input[type="time"]::-webkit-datetime-edit-hour-field:focus,
.na input[type="time"]::-webkit-datetime-edit-minute-field:focus,
.na input[type="time"]::-webkit-datetime-edit-second-field:focus,
.na input[type="time"]::-webkit-datetime-edit-ampm-field:focus,
.na input[type="datetime-local"]::-webkit-datetime-edit-day-field:focus,
.na input[type="datetime-local"]::-webkit-datetime-edit-month-field:focus,
.na input[type="datetime-local"]::-webkit-datetime-edit-year-field:focus,
.na input[type="datetime-local"]::-webkit-datetime-edit-hour-field:focus,
.na input[type="datetime-local"]::-webkit-datetime-edit-minute-field:focus,
.na input[type="datetime-local"]::-webkit-datetime-edit-second-field:focus,
.na input[type="datetime-local"]::-webkit-datetime-edit-ampm-field:focus {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--ink);
  border-radius: 2px;
}
.na input[type="date"]:focus,
.na input[type="time"]:focus,
.na input[type="datetime-local"]:focus {
  outline: none;
}
@supports (-moz-appearance:none) {
  .na input[type="date"]:focus,
  .na input[type="time"]:focus,
  .na input[type="datetime-local"]:focus {
    outline: 2px solid color-mix(in srgb, var(--accent) 40%, transparent);
    outline-offset: 1px;
  }
}
.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 — WE-1 (approved 14 Oct 2026, docs/mockups/web-editor-2026-10-14/):
   each step is a tinted row, 56 tall, with 40-tall controls in a fixed order — kind, then
   how long (value and unit read as one control), "at", the target, the sport extra, then ⋯.
   The step number is dropped: the order is the list. Fixed widths line the columns up. */
.na-ed{display:flex;flex-direction:column;gap:var(--space-4);container-type:inline-size}
.na-row{display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 8px 8px 10px;box-sizing:border-box;
        background:var(--row-tint);border-radius:var(--radius-button);
        border-top:2px solid transparent;border-bottom:2px solid transparent;flex-wrap:wrap}
.na-row.dragging{opacity:.4}
/* The drop line: a 2-px accent rule on the edge the step will land on. */
.na-row.over-top{border-top-color:var(--accent);box-shadow:inset 0 2px 0 var(--accent)}
.na-row.over-bot{border-bottom-color:var(--accent);box-shadow:inset 0 -2px 0 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:16px;
         flex:none;user-select:none;text-align:center}
.na-row .na-n{display:none}
.na-row input,.na-row select{height:var(--control-height);box-sizing:border-box;padding:0 12px;font-size:var(--font-subheadline)}
.na-row .na-kind{width:136px;flex:none}
/* Each step field is its own rounded control, on one baseline. */
.na-row .na-num{width:84px;flex:none;text-align:right;border-radius:var(--radius-pill)}
.na-row .na-unit{width:76px;flex:none}
.na-row ox-menu.na-unit:has([data-value="lengths"]){min-width:calc(7ch + 34px);width:auto}
.na-row ox-menu .ox-menu-select{font-size:inherit;padding:0 8px;gap:4px}
.na-row .na-at{width:32px;flex:none;text-align:center;font-size:0}
.na-row .na-at::after{content:"at";font-size:var(--font-footnote);color:var(--ink-secondary)}
.na-row .na-tgt{width:84px;flex:none;border-radius:var(--radius-pill)}
.na-row ox-menu.na-tgt{width:96px;flex:none}
.na-row .na-tunit{width:96px;flex:none}
.na-row .na-incline{width:92px;flex:none;margin-left:12px}
.na-row .na-notein{flex:1;min-width:80px}
.na-row .na-acts{margin-left:auto;display:flex;gap:0;flex:none;padding:0}
.na-row .na-x{color:var(--ink-secondary);font-size:var(--font-caption)}
/* Repeats are an indented block: "Repeat [5] times" on its own row, children
   indented under a left guide line, "+ step inside" at the foot. */
.na-rep{margin:2px 0 0 14px;padding:0 0 4px 6px;border-left:2px solid var(--separator);
        display:flex;flex-direction:column;gap:var(--space-3)}
.na-row .na-replabel{font-weight:var(--weight-semibold);color:var(--ink)}
.na-row .na-times{margin-left:10px;font-size:var(--font-subheadline);color:var(--ink-secondary)}
#na-body #na-editor .na-rep .na-row[data-into]{background:none;min-height:40px;padding-left:0}
#na-body #na-editor .na-rep .na-row[data-into] .btn{font-size:var(--font-subheadline);min-height:36px}
.na-addrow{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding-top:8px}
.na-addrow button:not(.btn){min-height:40px;padding:0 16px;border-radius:var(--radius-button);border:1px solid var(--separator);background:none;
                  font-size:var(--font-subheadline);font-weight:var(--weight-semibold);color:var(--ink-secondary)}
.na-addrow button.na-pri{background:var(--accent);border-color:transparent;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(--destructive)}
.na-addrow > .na-hint{flex-basis:100%;margin-top:4px;font-size:var(--font-caption);color:var(--ink-secondary);line-height:1.4}
.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{min-height:28px;padding:0 9px;border-radius:8px;border:1px solid var(--separator);background:none;color:var(--ink-secondary);font-size:var(--font-caption);font-weight:var(--weight-semibold)}
.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(--destructive)}

/* 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;min-height:36px;padding:0 12px;border-radius:var(--radius-button);
                  background:var(--accent);color:var(--on-accent);font-size:var(--font-footnote);font-weight:var(--weight-semibold)}
.na-pop.na-openpop .na-pri:disabled{opacity:.5}
.na-pop.na-open-sauna{width:350px;max-width:calc(100vw - 16px);box-sizing:border-box}
.na-open-sauna #na-o-sauna[hidden]{display:none}
.na-open-sauna #na-o-sauna label{display:flex;flex-direction:column;gap:6px;margin:10px 0;color:var(--ink-secondary);font-size:var(--font-caption)}
.na-open-sauna #na-o-sauna input,.na-open-sauna #na-o-sauna select{width:100%;min-width:0;box-sizing:border-box;height:38px;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-open-sauna .na-o-temperature{display:grid;grid-template-columns:minmax(0,1fr) 84px;gap:8px}
.na-open-sauna .na-prow>input{min-width:0;flex:1}
.na-open-yoga .na-o-temperature{display:none}

/* the course card — a file picker dressed as a button, and the course's line */
.na-file{display:inline-flex;align-items:center;min-height:28px;padding:0 9px;border-radius:8px;
         background:var(--accent);color:var(--on-accent);font-size:var(--font-caption);font-weight:var(--weight-semibold);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}
/* ★ central (12 Sep 2026): the ☆ before the stamp toggles it; a central row is
   stamped in the accent and its name reads bold. The same mark in the import sheet. */
.na-cstar{flex:none;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;
          border-radius:50%;font-size:15px;color:var(--ink-tertiary);margin-left:-4px}
.na-cstar.on{color:var(--accent)}
.na-cstar:hover{background:var(--chip-unselected);color:var(--ink)}
.na-cstar.on:hover{color:var(--accent)}
.na-cp.central .na-cpn{background:var(--accent);color:var(--on-accent)}
.na-cp.central .na-cpname{font-weight:var(--weight-bold)}
/* The CP number, stamped before the name and always there. */
.na-cp1 .na-cpn{flex:none;min-width:3.6em;text-align:center;color:var(--ink-secondary)}
.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)}
/* A fixed width for the ETA, right-aligned: "0m · 07:00" is narrower than "21m · 07:21",
   and with the name taking what is left, the first row's km field slid right of the
   others' (his screenshot, 12 Sep 2026). 8.6em fits "24h00m · 07:00". */
.na-cp1 .na-cp2{flex:none;min-width:8.6em;text-align:right;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)}
/* Already in the plan: shown, greyed, unpickable (13 Sep 2026). */
.na-prod.have{opacity:.45;cursor:default}
.na-prod.have input{accent-color:var(--ink-tertiary)}
.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{min-height:44px;padding:0 15px;border-radius:var(--radius-button);font-size:var(--font-subheadline);font-weight:var(--weight-semibold);border:1px solid var(--separator);background:none;color:var(--ink-secondary)}
.na-ask button.na-pri{background:var(--accent);border-color:transparent;color:var(--on-accent)}
.na-ask button.na-danger{background:var(--destructive);border-color:transparent;color:#fff}
/* "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; }

/* The columns stretch to the bottom of the viewport (not `start`): the Pace step's
   chart is pushed to the bottom of the screen even when one or two checkpoints
   leave the column short — his call, 12 Sep 2026 — and 8px is all the margin it gets. */
.na-pbody { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 300px;
            gap: 20px; padding: 16px 30px 8px; align-items: stretch; }
.na-main { min-width: 0; display: flex; flex-direction: column; }
.na-main > #na-body { flex: 1; display: flex; flex-direction: column; }
.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 { min-height: 44px; padding: 0 20px; border-radius: var(--radius-button); 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; }
/* Event cards share one fixed column; its summary sits immediately beside it. */
@media (min-width: 1081px) {
  .na-page .na-pbody:has(#na-body > .na-cols.na-one) {
    grid-template-columns: minmax(0, 660px) 300px;
    width: 100%; max-width: 1040px; box-sizing: border-box;
    justify-content: start;
  }
  .na-page #na-body:has(> .na-cols.na-one) > * { width: 100%; }
  .na-page .na-pbody:has(#na-body > .na-cols.na-one) .na-aside { align-self: start; }
}
.na-page #na-body:has(> .na-cols.na-one) .na-head {
  flex-wrap: wrap;
}
.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-scp.central { border-left: 3px solid var(--accent); padding-left: 10px; margin-left: -13px; }
.na-scp.central .na-scph b { background: var(--accent); color: var(--on-accent); border-radius: 6px; padding: 1px 8px; font-size: var(--font-subheadline); }
.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: 6px; }
.na-page .na-ride-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: end; }
.na-page .na-ride-fields .na-fld + .na-fld { margin-top: 0; }
/* WE-1 field rule: a 13 px medium label in secondary, 6 px above one 40-tall control. */
.na-page .na-flabel { font-size: var(--font-footnote); font-weight: var(--weight-medium); color: var(--ink-secondary); }
.na-page .na-fld > ox-menu,
.na-page .na-fld > ox-date,
.na-page .na-fld > ox-number { width: 100%; max-width: 100%; align-self: stretch; }
.na-page .na-fld > ox-menu { display: flex; }
.na-page .na-ride-fields .na-fld { align-items: stretch; }
/* 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-button);
                    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); }
.na-arrow.na-wide { white-space: nowrap; }
/* 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. */
/* Pinned to the bottom of the screen: `margin-top: auto` takes the column's spare
   height when the content is short, sticky takes over when it is tall. The clear
   space above it — the rows used to run into its top edge — is the columns'
   padding-bottom now, because an auto margin is 0 exactly when content is tall. */
.na-chartcard { position: sticky; bottom: 8px; z-index: 3; margin-top: auto;
                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-dock .chartwrap`, not `.na-dockchart`: the markup never carried that class,
   so the x1.5 never applied and the chart stayed the planner's 118px — "why is it
   so small" (his screenshot, 12 Sep 2026). `plannerChart` measures the element,
   so the height here IS the drawing's height. */
#na-dock .chartwrap .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". WE-1 keeps the habit, looser. */
.na-page .na-fld { max-width: 480px; }
.na-page .na-fld + .na-fld { margin-top: var(--space-8); }
.na-page .na-fld > .na-hms { max-width: 300px; }
.na-page .na-fld > .na-two { max-width: 300px; }
/* WE-1: one control height on every field and select the editor owns. */
.na-page input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=date]):not([type=time]),
.na-page select { height: var(--control-height); min-height: var(--control-height); box-sizing: border-box;
  padding: 0 12px; font: inherit; font-size: var(--font-subheadline); color: var(--ink);
  background: var(--bg); border: 1px solid var(--separator); border-radius: var(--radius-field); }
.na-page textarea { min-height: 112px; font-size: var(--font-subheadline); border-radius: var(--radius-field); padding: 12px; }
/* WE-1: the name takes the width; date and time sit side by side. */
.na-page .na-card:has(#na-date) { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--space-8); }
.na-page .na-card:has(#na-date) > :not(.na-fld) { grid-column: 1 / -1; }
.na-page .na-card:has(#na-date) > .na-fld + .na-fld { margin-top: 0; }
/* 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; min-height: 36px; padding: 0 12px;
            border-radius: var(--radius-button); 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: var(--destructive); border-color: color-mix(in srgb, var(--destructive) 38%, transparent); }
.na-quiet.na-danger:hover { background: color-mix(in srgb, var(--destructive) 14%, transparent); color: var(--destructive); }

/* The two quiet actions are opposite in kind: Save wears the theme's accent, Delete
   the destructive red — the button roles in tokens.css, not colours of their own. */
.na-quiet.na-ok { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 38%, transparent); }
.na-quiet.na-ok:hover { background: color-mix(in srgb, var(--accent) 14%, transparent);
                        color: var(--accent); }
/* 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 { flex: 1; }
.na-pace > .na-cols { padding-bottom: var(--space-8); }


/* 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); }

/* Checkpoints from a file (12 Sep 2026): the door beside Add checkpoint, and the
   review sheet — header · scrolling table · footer, the frame the other sheets
   have, so it has their margins too. Busy while the reader works; the two ways
   to lay are the footer's two buttons, not a toggle and a third button. */
.na-cpacts { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
dialog.na-import { width: min(760px, calc(100% - 32px)); }
.na-imp header .na-imp-hsp { visibility: hidden; font-size: var(--font-body); }
.na-imp-busy { display: flex; align-items: center; gap: var(--space-6); padding: var(--space-8) 0;
               font-size: var(--font-subheadline); }
.na-imp-spin { width: 22px; height: 22px; flex: none; border-radius: 50%;
               border: 2.5px solid var(--chip-unselected); border-top-color: var(--accent);
               animation: na-imp-spin .8s linear infinite; }
@keyframes na-imp-spin { to { transform: rotate(360deg); } }
.na-imp-ctl { display: flex; flex-direction: column; gap: 4px; }
.na-imp-warn { color: var(--wt-amber); }
.na-imp-err { color: var(--destructive); font-size: var(--font-subheadline); padding: var(--space-6) 0; }
.na-imp-rows { border-top: var(--stroke-hairline) solid var(--separator); }
.na-imp-row { display: grid; grid-template-columns: 18px 22px 26px minmax(0, 1fr) 64px auto; gap: 6px; align-items: center;
              padding: 5px 0; border-bottom: var(--stroke-hairline) solid var(--separator); }
.na-imp-row .na-imp-n { font-size: var(--font-caption2); color: var(--ink-secondary); font-variant-numeric: tabular-nums; }
.na-imp-row .na-imp-name { min-width: 0; }
.na-imp-row .na-imp-km { text-align: right; }
.na-imp-row > span { font-size: var(--font-caption); color: var(--ink-secondary); }
.na-imp-row .na-cstar { width: 22px; height: 22px; font-size: 14px; margin: 0; }
.na-imp-row.central .na-imp-name { font-weight: var(--weight-bold); }
.na-imp-note { grid-column: 4 / -1; font-size: var(--font-caption2); color: var(--wt-amber); }
.na-imp-row.bad .na-imp-note { color: var(--destructive); }
.na-imp footer .na-pri { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: var(--radius-button);
                         background: var(--accent); color: var(--on-accent); font-weight: var(--weight-semibold); }
.na-imp footer .na-pri:hover { filter: brightness(1.06); }

/* MENU-NATIVE-1: cascading system-style menus; no stacked Sport card. */
.na-pop.na-nested{padding:0;width:min(262px,calc(100vw - 16px));min-width:0;border:0;background:transparent;box-shadow:none;border-radius:0;overflow:visible}
.na-nested,.na-nested *{box-sizing:border-box}
.na-nested .na-parent,.na-nested .na-modality-panel{padding:8px 0;background:var(--bg-raised);border:0;border-radius:26px;box-shadow:0 12px 40px rgba(0,0,0,.10),0 0 0 .5px rgba(0,0,0,.05);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);overflow:auto;overscroll-behavior:contain;max-height:calc(100dvh - 16px)}
.na-nested .na-menu-title{font-size:13px;color:var(--ink-secondary);padding:4px 18px 6px}
.na-nested .na-item{min-height:46px;padding:10px 18px;border-radius:0;gap:14px;font-size:17px;font-weight:400}
.na-nested .na-item svg{color:var(--accent);width:22px;height:22px}
.na-nested .na-item[aria-expanded="true"]{background:none;color:var(--ink);font-weight:400}
.na-nested .na-item:hover,.na-nested .na-item:focus-visible{background:var(--chip-unselected)}
.na-nested .na-item:disabled{color:var(--ink-tertiary);cursor:default}
.na-nested .na-chevron,.na-nested kbd{margin-left:auto}
.na-nested .na-modality-panel{position:fixed;margin:0;width:min(244px,calc(100vw - 16px));z-index:1}
.na-nested .na-subhead{font-size:17px;font-weight:600;color:var(--ink);margin:0;border:0}
.na-nested hr{border:0;border-top:1px solid var(--separator);margin:4px 18px}
.na-fld textarea{font:inherit;color:var(--ink);background:var(--bg);border:1px solid var(--separator);border-radius:8px;padding:10px;width:100%;box-sizing:border-box}

/* Sport-specific fields reuse the planner cards and adapt as a single row. */
.na .ms-fields{display:flex;flex-wrap:wrap;gap:10px;flex-basis:100%}
.na .ms-fields label{flex:1 1 140px;min-width:0}
.na .ms-fields input,.na .ms-fields select,.na .ms-fields ox-menu{width:100%}

/* ── Strength: the phone's exercise row on the web (22 Oct 2026 redesign): picture,
   name over group · equipment, Replace and the round ⋯ menu, then SETS / REPS (or HOLD)
   / KG or FLYWHEEL / REST as square −/+ steppers, all on one line at 1280 and 2×2 at 390. */
.na .na-row.na-ex{display:block;padding:14px 16px 16px;border-radius:var(--radius-tile);background:var(--row-tint);margin:0 0 10px}
.na-exhead.se-head{display:flex;align-items:center;gap:12px;min-height:48px;flex-wrap:nowrap}
.na-exhead.se-head .na-drag{margin-left:-6px;margin-right:0}
.se-thumb{flex:0 0 72px;width:72px;height:48px;border-radius:8px;overflow:hidden;background:var(--chip-unselected)}
.se-thumb img{display:block;width:72px;height:48px;object-fit:cover}
.se-thumb .se-noimg{display:block;width:72px;height:48px}
.se-name{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.se-name b{font-size:var(--font-headline);font-weight:var(--weight-semibold);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.se-name small{font-size:var(--font-footnote);color:var(--ink-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.se-replace{flex:none;white-space:nowrap}
#na-body #na-editor .na-ex .na-acts .na-row-menu-button,#na-body #na-editor .se-chead .na-acts .na-row-menu-button{display:inline-flex;align-items:center;justify-content:center;font-size:18px;letter-spacing:1px;width:34px;height:34px;border-radius:50%;background:var(--chip-unselected);color:var(--accent);font-weight:var(--weight-bold)}
.se-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px 12px;margin:14px 0 0}
.se-cell{display:flex;flex-direction:column;gap:6px;min-width:0}
.se-cap{font-size:10px;font-weight:var(--weight-semibold);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.se-step{display:flex;align-items:center;justify-content:space-between;gap:4px;width:100%}
.se-sq{flex:none;width:38px;height:40px;border:0;border-radius:9px;background:var(--chip-unselected);color:var(--ink);font:var(--weight-semibold) 20px/1 var(--font-stack);cursor:pointer;padding:0}
.se-sq:disabled{color:var(--ink-tertiary);cursor:default}
.se-sq:hover:not(:disabled){background:color-mix(in srgb,var(--sport-strength) 14%,var(--chip-unselected))}
.se-val{flex:1;min-width:0;white-space:nowrap;text-align:center;font:var(--weight-bold) 17px/1 var(--font-rounded);font-variant-numeric:tabular-nums;color:var(--ink)}
.se-val small{font:var(--weight-medium) 12px var(--font-stack);color:var(--ink-secondary);margin-left:2px}
.se-fwwrap{position:relative;display:block;width:100%}
.se-fw{width:100%;height:40px;border:0;border-radius:9px;background:var(--chip-unselected);color:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;cursor:pointer;padding:0 12px}
.se-fw b{font:var(--weight-bold) 16px/1 var(--font-rounded);white-space:nowrap}
.se-fw small{font-size:11px;color:var(--ink-secondary);white-space:nowrap}
.se-fwmenu{position:absolute;z-index:20;top:46px;left:0;min-width:200px;padding:6px;border-radius:var(--radius-md);background:var(--bg-raised);border:.5px solid var(--separator);box-shadow:0 10px 30px rgba(0,0,0,.16);display:flex;flex-direction:column}
.se-fwmenu[hidden]{display:none}
.se-fwmenu button{display:grid;grid-template-columns:18px 30px 1fr;align-items:center;gap:8px;height:40px;padding:0 10px;border:0;border-radius:8px;background:none;color:var(--ink);font-size:var(--font-subheadline);text-align:left;cursor:pointer;white-space:nowrap}
.se-fwmenu button:hover{background:var(--chip-unselected)}
.se-fwmenu .se-check{color:var(--accent);font-weight:var(--weight-bold)}
.se-fwmenu small{color:var(--ink-secondary);font-size:var(--font-footnote)}
.se-circuit{border:1.5px solid color-mix(in srgb,var(--sport-strength) 35%,transparent);border-radius:var(--radius-list);padding:12px 12px 6px;margin:0 0 10px}
.se-chead{display:flex;align-items:center;gap:12px;padding:0 4px 12px;background:none;min-height:0;flex-wrap:nowrap}
.se-chead .na-drag{margin-left:-2px}
.se-ctitle{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.se-ctitle b{font-size:var(--font-headline);font-weight:var(--weight-semibold);color:var(--sport-strength);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.se-ctitle small{font-size:var(--font-footnote);color:var(--ink-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.se-rounds{flex-direction:row;align-items:center;gap:10px;width:200px}
.se-cbody{position:relative}
.se-cbody .se-ex{background:var(--row-tint);margin-bottom:8px}
.se-cadd{display:flex;align-items:center;gap:12px;padding:2px 4px 8px;background:none;min-height:0;flex-wrap:nowrap}
.se-cadd .na-hint{font-size:var(--font-footnote);color:var(--ink-tertiary);white-space:nowrap}
@media (max-width:600px){
  .na .na-row.na-ex{padding:12px 12px 14px}
  .se-thumb,.se-thumb img,.se-thumb .se-noimg{flex-basis:60px;width:60px;height:40px}
  .se-replace{display:none}
  .se-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .se-sq{width:32px;height:36px;font-size:18px}
  .se-val{font-size:16px}
  .se-circuit{padding:10px 8px 4px}
  .se-rounds{width:150px}
  .se-ctitle small{display:none}
  .se-fwmenu{left:auto;right:0;min-width:180px}
}

/* ── Exercise library dialog (WE-1): the web's own sheet chrome — a sticky header with the
   title and Close, search, the five filters in one row, Reset, and the results as a
   two-column grid of cards. */
.ms-exercises{width:min(760px,calc(100% - 32px));max-height:85vh;overflow:auto;background:var(--bg);color:var(--ink);border:1px solid var(--separator);border-radius:var(--radius-panel);padding:0}
.ms-exercises::backdrop{background:#0008}
.ms-exercises > header{position:sticky;top:0;z-index:2;background:var(--bg);padding:16px 24px;border-bottom:1px solid var(--separator);display:flex;justify-content:space-between;align-items:center}
.ms-exercises > header h2{margin:0;font-size:var(--font-headline)}
.ms-exercises > header button{width:36px;height:36px;border-radius:50%;background:var(--chip-unselected);font-size:20px;color:var(--ink-secondary)}
.ms-exercises > label{margin:16px 24px 12px;font-size:var(--font-footnote);color:var(--ink-secondary);display:flex;flex-direction:column;gap:6px}
.ms-exercises > .ms-fields{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:0 24px;flex-basis:auto}
.ms-exercises > .ms-fields label{font-size:var(--font-footnote);color:var(--ink-secondary);margin:0;display:flex;flex-direction:column;gap:6px;flex:none}
.ms-exercises > button[data-ex-action="reset"]{margin:12px 24px 0;color:var(--accent);font-size:var(--font-subheadline);font-weight:var(--weight-semibold)}
.ms-exercises #ms-ex-results{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:12px 24px 24px}
.ms-exercises #ms-ex-results > p{grid-column:1/-1;margin:4px 0;font-size:var(--font-footnote);color:var(--ink-secondary)}
.ms-exercises .ms-ex-card{background:var(--card);border:0;border-radius:var(--radius-tile);padding:12px;gap:12px;font-size:var(--font-subheadline);color:var(--ink-tertiary);display:flex;align-items:center;width:100%;text-align:left}
.ms-exercises .ms-ex-card img{width:96px;height:64px;object-fit:contain;border-radius:8px}
.ms-exercises .ms-ex-card span{color:var(--ink);font-weight:var(--weight-semibold);flex:1}
.ms-exercises .ms-ex-card small{display:block;font-weight:var(--weight-regular);font-size:var(--font-footnote)}
.ms-exercises input,.ms-exercises select{height:var(--control-height);box-sizing:border-box;padding:0 12px;font:inherit;font-size:var(--font-subheadline);color:var(--ink);background:var(--bg-raised);border:1px solid var(--separator);border-radius:var(--radius-field)}
.ms-exercises .ms-fields ox-menu{display:flex;width:100%}
.ms-exercises .ms-fields .ox-menu-select{background:var(--bg-raised)}
@media (max-width:700px){.ms-exercises > .ms-fields{grid-template-columns:1fr 1fr}.ms-exercises #ms-ex-results{grid-template-columns:1fr}}
/* The exercise detail view: ‹ Library · Exercise header, name, group · equipment, the
   illustration in a card, the cue, and the footer with Back to library · Add to session
   (the footer alignment of every other web sheet, primary last). */
.na .sheet.na-exsheet{max-height:85vh}
.na .sheet.na-exsheet header{border-bottom:1px solid var(--separator);padding:12px 16px}
.na .sheet.na-exsheet .na-xback{display:inline-flex;align-items:center;gap:4px;font-size:var(--font-body);color:var(--accent);background:none;padding:4px}
.na .sheet.na-exsheet .na-xback .icon{width:20px;height:20px}
.na .sheet.na-exsheet .na-ghost{visibility:hidden}
.na .sheet.na-exsheet .scroll{padding:24px;gap:16px}
.na .sheet.na-exsheet .na-xhead h2{margin:0;padding:0;font-size:var(--font-title2);font-weight:var(--weight-bold)}
.na .sheet.na-exsheet .na-xhead p{margin:4px 0 0;font-size:var(--font-subheadline);color:var(--ink-secondary)}
.na .sheet.na-exsheet .na-xfig{margin:0;padding:16px;background:var(--card);border-radius:var(--radius-tile);display:flex;justify-content:center}
.na .sheet.na-exsheet .na-xfig img{width:100%;max-height:320px;object-fit:contain;border-radius:8px}
.na .sheet.na-exsheet .na-xfig.pending{color:var(--ink-secondary);min-height:160px;align-items:center}
.na .sheet.na-exsheet .na-xcue{margin:0;font-size:var(--font-body);line-height:1.45}
.na .sheet.na-exsheet .na-xfoot{display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid var(--separator)}

.na .ms-extra{display:flex;flex-direction:column;min-width:140px;font-size:var(--font-caption);gap:4px}.na .ms-extra span{white-space:nowrap}

/* Unit labels stay intact; fields move to another row before labels split. */
.na .na-flabel { overflow-wrap: normal; }
.na [data-ms="swimPaceText"] { min-width: 9rem; }
/* Cycling's five metrics fit compact screens without widening the page. */
#na-dock:has(.sportmark[data-sport="bike"]) .strip { max-width:100%; box-sizing:border-box; overflow-x:auto; }
@media(max-width:600px){
  #na-dock:has(.sportmark[data-sport="bike"]) .strip { padding:10px 8px; }
  #na-dock:has(.sportmark[data-sport="bike"]) .sportmark { margin-right:8px; }
  #na-dock:has(.sportmark[data-sport="bike"]) .sportmark svg { width:26px;height:26px; }
  #na-dock:has(.sportmark[data-sport="bike"]) .cell { flex:1;min-width:0;padding-right:5px;margin-right:5px; }
  #na-dock:has(.sportmark[data-sport="bike"]) .cell:last-child { margin-right:0;padding-right:0;border:0; }
  #na-dock:has(.sportmark[data-sport="bike"]) .k { font-size:8px;letter-spacing:0; }
  #na-dock:has(.sportmark[data-sport="bike"]) .v { font-size:12px; }
}

.na-openpop #na-o-complete{width:100%;margin:4px 0}

/* Native top layer keeps the editor interactive above the activity dialog. */
#na-open[popover]{margin:0;inset:auto;overflow:auto;max-height:calc(100dvh - 16px);color:var(--ink)}

/* ── F05 activity types — approved Package C (docs/mockups/f05-picker) ──
   A family's types open under it, indented to the label so they read as its children; the
   caption says what the type changes. The setup page shows the chosen type as a segment. */
.na-nested .na-two{display:flex;flex-direction:column;align-items:flex-start;gap:1px;line-height:1.2}
.na-nested .na-two small{font-size:var(--font-caption);color:var(--ink-secondary);font-weight:var(--weight-regular)}
.na-nested .na-family[aria-expanded="true"]{background:var(--chip-unselected);color:var(--ink)}
.na-nested .na-types{margin:2px 0 4px 32px;border-left:2px solid color-mix(in srgb,var(--accent) 45%,transparent);padding-left:4px}
.na-nested .na-type{min-height:50px}
.na-nested .na-type:hover,.na-nested .na-type:focus-visible{background:color-mix(in srgb,var(--accent) 12%,var(--bg-raised));color:var(--accent)}
.na-typestrip{display:flex;flex-direction:column;gap:6px;margin:0 0 4px}
.na-typestrip .na-seg{align-self:stretch}
.na-typestrip .na-seg button[disabled]{opacity:.5}
.na-typenote{font-size:var(--font-caption);color:var(--ink-secondary)}
.na-typenote.na-warn{color:var(--attention)}

/* PLAN-SUMMARY-1 B: same section totals, three editor-token figures. */
.na-summary-stats { display: flex; justify-content: space-between; gap: var(--space-6);
  border-top: 1px solid var(--separator); margin-top: var(--space-4); padding-top: var(--space-8); }
.na-summary-stats > div { min-width: 0; }
.na-summary-stats span { display: block; font-size: var(--font-caption); font-weight: var(--weight-semibold);
  text-transform: uppercase; color: var(--ink-secondary); margin-bottom: var(--space-3); }
.na-summary-stats b { font-size: var(--font-title3); font-weight: var(--weight-bold);
  letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.na-summary-stats small { font-size: var(--font-subheadline); font-weight: var(--weight-semibold);
  color: var(--ink-secondary); margin-left: 2px; }
/* INDOOR-PLAN-1: one step; the type is chosen in New activity. */
.na-indoor-type { display: inline-flex; align-items: center; gap: var(--space-3);
  color: var(--ink); font-weight: var(--weight-semibold); }
.na-indoor-type svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
@media (min-width: 1081px) {
  .na-page.na-indoor .na-aside { align-self: start; }
  .na-page.na-indoor .ms-extra { min-width: 112px; width: 112px; flex: none; }
  .na-page.na-indoor .ms-extra input { width: 100%; box-sizing: border-box; }
  .na-page.na-indoor #na-body > .na-card:has(#na-editor) { width: 100%; }
  .na-page.na-indoor #na-body:has(> .na-cols.na-one) .na-row { flex-wrap: nowrap; }
}

/* WEB-PLANNER-3: header actions finish over the aside, not at the window edge. */
.na-page .na-phead { box-sizing:border-box; width:100%; max-width:1040px; }
.na-page .na-nav { box-sizing:border-box; width:calc(100% - 60px); max-width:980px; }
@media(max-width:760px) { .na-page .na-nav { width:calc(100% - 32px); margin-inline:16px; } }
/* Mini glyphs retain a separate 44px hit box; the gutters prevent overlaps. */
.na .icon-btn { flex:none; width:38px; height:38px; display:inline-flex; align-items:center;
  justify-content:center; padding:0; border:1px solid var(--separator); background:var(--card);
  border-radius:var(--radius-button); color:var(--ink-secondary); cursor:pointer; }
.na .icon-btn.mini { width:28px; height:28px; border-radius:8px; }
.na .icon-btn .icon { width:16px; height:16px; }
.na .icon-btn:disabled { opacity:.45; cursor:default; }
.na-row .na-acts { gap:16px; padding-inline:8px; }
.na-row:has(.na-acts) { min-height:44px; box-sizing:border-box; }
.na-cstar.icon-btn.on .icon { fill:currentColor; }
/* An empty strength aside must not reserve a blank row above the one-page form. */
@media(max-width:1080px) { .na-page .na-aside:empty { display:none; } }
/* PLAN-TYPES-2: a single fixed editor column; blocks never change its width. */
.na-block-editor .na-pbody { align-items:start; }
.na-block-editor #na-body > .na-one { display:flex; flex-direction:column; gap:16px; }
.na-block-editor .na-race-row { display:flex; align-items:center; gap:12px; margin:16px 0 8px; }
.na-block-editor .na-block > .na-head { display:flex; align-items:center; gap:8px; }
.na-block-editor .na-block > .na-head > .icon { color:var(--accent); }
.na-block-editor .na-block > .na-card { margin:12px 0 0; }
.na-block-menu-wrap { position:relative; display:inline-flex; }
.na-block-menu { position:absolute; z-index:25; right:0; top:38px; min-width:160px; }
.na-block-add { position:relative; }
.na-block-add > .btn { width:100%; min-height:52px; justify-content:center; color:var(--accent); }
.na-block-add-menu { position:absolute; z-index:25; left:0; right:0; bottom:52px; }
.na-block-add-menu button { width:100%; display:flex; align-items:center; gap:12px; text-align:left; }
.na-block-add-menu small { white-space:normal; color:var(--ink-secondary); font-weight:var(--weight-regular); }
.na-block-editor #na-dock { position:static; width:100%; max-width:none; margin:16px 0 0; transform:none; inset:auto; }
.na-block-editor .na-psub { display:flex; align-items:center; gap:8px; }
.na-block-editor .na-psub svg { width:24px; height:24px; }
.na-block-editor .na-nav .na-steps, .na-page.na-special-editor .na-nav .na-steps { display:flex; align-items:center; flex:0 1 auto; min-width:0; padding:0; margin:0; border:0; background:transparent; color:var(--ink); font-weight:var(--weight-semibold); }
.na-block-editor .na-nav .na-steps svg, .na-page.na-special-editor .na-nav .na-steps svg { width:20px; height:20px; }
.na-page .na-phead[hidden] { display:none; }
/* Header nav lines up with the page content (30 px gutters), not centred in the
   viewport. The width matches the content column so actions finish over the aside. */
.na-page .na-nav { margin:16px 30px 0; }
.na-page .na-nav > #na-back { flex:0 0 44px; }
.na-page .na-nav > #na-next { white-space:nowrap; flex:none; }
.na-page.na-special-editor .na-nav > #na-delete { flex:none; }
/* On the one-page editor the order is part of the header: Back, sport, Save. */
.na-block-editor .na-nav > #na-back, .na-page.na-special-editor .na-nav > #na-back { order:-1; }
.na-block-editor .na-nav > .na-steps, .na-page.na-special-editor .na-nav > .na-steps { order:0; }
/* One-row editor header: never wrap, single-line title, round Back. */
.na-block-editor .na-nav, .na-page.na-special-editor .na-nav { flex-wrap: nowrap; }
.na-block-editor .na-nav button, .na-page.na-special-editor .na-nav button { white-space: nowrap; }
.na-block-editor .na-nav .na-steps, .na-page.na-special-editor .na-nav .na-steps { min-width: 0; }
.na-block-editor .na-nav .na-steps svg, .na-page.na-special-editor .na-nav .na-steps svg { flex: none; }
.na-block-editor .na-nav .na-steps .na-title-label, .na-page.na-special-editor .na-nav .na-steps .na-title-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.na-block-editor .na-nav > #na-back.icon-btn, .na-page.na-special-editor .na-nav > #na-back.icon-btn {
  width: 38px; height: 38px; flex: 0 0 38px; padding: 0; border: 0; border-radius: 50%;
  background: var(--chip-unselected); color: var(--accent); font-size: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.na-block-editor .na-nav > #na-back.icon-btn .icon, .na-page.na-special-editor .na-nav > #na-back.icon-btn .icon { width: 16px; height: 16px; stroke-width: 2.4; }
@media(min-width:1081px) {
  .na-block-editor .na-row { flex-wrap:nowrap; }
  .na-block-editor .na-row .na-note { min-width:36px; flex:1 1 36px; }
  .na-block-editor .na-row .na-acts { flex-shrink:0; }
}
.na-block-editor #na-body > .na-one { align-items:stretch; }
.na-block-editor #na-body > .na-one > .na-card { width:100%; box-sizing:border-box; }
/* The ⋮⋮ handle is back as the row's left column (Roberto, 22 Oct: "give me a handle to move these
   sections by drag/drop"); the step number stays hidden. */
.na-block-editor #na-body .na-fields-viewport > .na-n { display:none; }
.na-page #na-body .na-row-viewport > .na-row > .na-drag { align-self:center; width:18px; margin-right:2px;
  font-size:14px; line-height:1; padding:6px 0; }
.na-block-editor #na-body .na-row-extra { display:flex; align-items:center; gap:6px; margin:2px 0 4px 20px; color:var(--ink-secondary); font-size:var(--font-caption); }
.na-block-editor #na-body .na-row-extra select { width:140px; max-width:calc(100% - 48px); }
/* WE-1: a block is the card; the cards inside it become its sections, split by a hairline. */
.na-block-editor .na-block { display:flex; flex-direction:column; gap:0; min-width:0; margin-top:14px;
  background:var(--card); border-radius:var(--radius-card); padding:var(--card-padding); }
.na-block-editor .na-block-head { display:flex; align-items:center; gap:10px; margin:0 0 var(--space-8);
  font-size:var(--font-headline); font-weight:var(--weight-semibold); color:var(--ink); min-height:36px; flex-wrap:wrap; }
.na-block-editor .na-block-head > .icon { color:var(--accent); width:20px; height:20px; flex:none; }
.na-block-editor .na-block-head > .na-r { margin-left:auto; display:flex; align-items:center; gap:8px; min-width:0; }
@media (max-width:600px) {
  /* On a phone the header's controls take their own line rather than overflow the card. */
  .na-block-editor .na-block-head #na-preset { min-width:0; flex:0 1 auto; }
}
.na-block-editor .na-block > .na-card { margin:0; background:none; padding:0; border-radius:0; }
.na-block-editor .na-block > .na-card + .na-card, .na-block-editor .na-block > .na-card + .na-hint { margin-top:var(--card-padding); padding-top:var(--card-padding); border-top:var(--stroke-hairline) solid var(--separator); }
.na-block-editor .na-block > .na-card > .na-head { font-size:var(--font-subheadline); min-height:0; margin-bottom:12px; text-transform:none; letter-spacing:0; color:var(--ink); }
.na-block-editor .na-race-row { justify-content:space-between; align-items:center; }
.na-block-editor .na-race-row > div { flex:1; }
.na-block-editor .na-race-row .na-hint { margin-top:4px; }
.na-block-editor .na-block .na-row { min-width:0; }
.na-block-menu { padding:6px; border:1px solid var(--separator); border-radius:var(--radius-md); background:var(--bg-raised); box-shadow:0 8px 20px rgba(0,0,0,.15); min-width:210px; }
.na-block-menu button { width:100%; min-height:44px; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 12px; font-size:var(--font-subheadline); font-weight:var(--weight-regular); white-space:nowrap; text-align:left; color:var(--destructive); }
.na-block-menu button:hover { background:var(--chip-unselected); border-radius:var(--radius-md); }
/* WE-1 header actions: 36 round icon buttons, a 40-tall Presets select. */
.na-block-editor .na-block-head .icon-btn { width:36px; min-width:36px; max-width:36px; height:36px; min-height:36px; padding:0; border-radius:50%; border:1px solid var(--separator); background:none; color:var(--ink-secondary); display:grid; place-items:center; }
.na-block-editor .na-block-head .icon-btn .icon { width:18px; height:18px; }
.na-block-editor .na-block-head .icon-btn.round { background:var(--chip-unselected); border-color:transparent; }
.na-block-editor .na-block-head .icon-btn.round svg { width:20px; height:20px; fill:currentColor; stroke:none; }
.na-block-editor .na-block-head #na-preset { display:inline-flex; align-items:center; height:var(--control-height); min-width:168px; font-size:var(--font-subheadline); }
#na-block-confirm .sheet > button { width:100%; }
.na-pop.na-nested.na-block-add-menu { position:absolute; z-index:25; left:0; bottom:52px; width:100%; max-width:100%; top:auto; overflow:visible; }
.na-block-add-menu .na-parent { padding-bottom:6px; }
.na-block-add-menu .na-item .na-two { display:flex; flex-direction:column; align-items:flex-start; }

.na-block-add-menu .na-item { min-height:56px; font-weight:var(--weight-regular); }
.na-block-add-menu .na-item svg { color:var(--accent); }

/* Endurance controls share one row; its trailing menu owns the row actions. */
.na-page #na-body .na-row-viewport { max-width:100%; min-width:0; }
.na-page #na-body .na-row-viewport > .na-row { flex-wrap:nowrap; width:100%; min-width:0; box-sizing:border-box; gap:12px; }
.na-page #na-body .na-fields-viewport { display:flex; align-items:center; gap:0; flex:1; min-width:0; overflow:visible; flex-wrap:wrap; row-gap:8px; }
.na-block-editor #na-body .na-row-viewport > .na-row,
.na-block-editor #na-body .na-fields-viewport { gap:2px; }
.na-block-editor #na-body .na-row-viewport > .na-row { gap:2px; }
@media(min-width:761px) {
  .na-block-editor #na-body .na-fields-viewport { flex-wrap:nowrap; }
  /* Swim rows use a wider unit dropdown ('lengths'); at desktop, close the tiny gaps
     between the joined controls so the row still fits without scrolling (526/522). */
  .na-block-editor #na-body .na-fields-viewport:has(ox-menu.na-unit [data-value="lengths"]) { gap:0; }
}
.na-block-editor #na-body .na-rep .na-row { padding-left:4px; padding-right:4px; }
/* Give every field its own border so gaps read as breathing room, not a broken join. */
.na-block-editor #na-body .na-row-viewport .na-num,
.na-block-editor #na-body .na-row-viewport input.na-tgt { border-radius:var(--radius-pill); }
.na-block-editor #na-body .na-row-viewport .na-at { width:auto; padding:0 2px; }
.na-page #na-body .na-rep .na-fields-viewport > .na-n { display:none; }
.na-page #na-body .na-row-viewport .na-fields-viewport > input,
.na-page #na-body .na-row-viewport .na-row select,
.na-page #na-body .na-row-viewport .na-row ox-menu { flex:none; }
.na-page #na-body .na-fields-viewport > .ms-extra { flex:none; flex-direction:row; align-items:center; gap:4px; white-space:nowrap; min-width:0; }
.na-page #na-body .na-row-viewport .na-notein { flex:1; }

/* The row's ⋯ and its menu (ST-1d, restyled by WE-1): a popup wherever the row renders —
   40-tall items, an accent icon each, Delete last in red after a hairline. */
.na-page #na-body .na-row .na-acts { gap:0; padding-inline:0; position:relative; }
.na-page #na-body .na-row .na-row-menu-button { width:36px !important; min-width:36px; height:36px !important; padding:0; border:0; border-radius:50%; background:transparent; color:var(--ink-secondary); font-size:20px; line-height:1; }
.na-page #na-body .na-row .na-row-menu-button::before { display:none; }
/* The 44px hit overlay (tokens.css .icon-btn::after) overhangs a dense row's 36px button —
   inside a row the button's own box is the hit area. */
.na-page #na-body .na-row .na-row-menu-button::after { inset:0; width:auto; height:auto; transform:none; }
.na-page #na-body .na-row .na-row-menu-button:hover, .na-page #na-body .na-row .na-row-menu-button[aria-expanded="true"] { background:var(--chip-unselected); }
.na-page #na-body .na-row .na-row-menu { position:absolute; z-index:30; right:0; top:calc(100% + 6px); min-width:200px; padding:6px; display:flex; flex-direction:column; border:1px solid var(--separator); border-radius:var(--radius-md); background:var(--bg-raised); box-shadow:0 10px 28px rgba(0,0,0,.16); }
.na-page #na-body .na-row .na-row-menu[hidden] { display:none; }
.na-page #na-body .na-row .na-row-menu button { width:100%; min-height:40px; display:flex; align-items:center; gap:12px; padding:0 12px; border-radius:8px; color:var(--ink); font-size:var(--font-subheadline); text-align:left; white-space:nowrap; background:none; }
.na-page #na-body .na-row .na-row-menu button .icon { width:18px; height:18px; color:var(--accent); flex:none; }
.na-page #na-body .na-row .na-row-menu button:hover { background:var(--chip-unselected); }
.na-page #na-body .na-row .na-row-menu button[data-act="del"], .na-page #na-body .na-row .na-row-menu button[data-act="del"] .icon { color:var(--destructive); }
.na-page #na-body .na-row .na-row-menu hr { border:0; border-top:1px solid var(--separator); margin:4px 6px; }

@media(max-width:760px) {
  .na-block-editor .na-nav, .na-page.na-special-editor .na-nav { flex-wrap:nowrap; }
  .na-block-editor .na-nav > .na-steps, .na-page.na-special-editor .na-nav > .na-steps { flex:0 1 auto; }
  .na-block-editor .na-nav > .na-sp, .na-block-editor .na-nav > .na-fnote,
  .na-page.na-special-editor .na-nav > .na-sp, .na-page.na-special-editor .na-nav > .na-fnote { display:none; }
  .na-block-editor .na-nav > #na-back, .na-page.na-special-editor .na-nav > #na-back { width:38px; flex:0 0 38px; }
  .na-block-editor .na-nav > #na-next, .na-page.na-special-editor .na-nav > #na-next { padding-inline:10px; }
  /* Delete plan collapses to its trash glyph on narrow editors. */
  .na-block-editor .na-nav > #na-delete, .na-page.na-special-editor .na-nav > #na-delete {
    width: 38px; height: 38px; min-height: 38px; flex: 0 0 38px; padding: 0; gap: 0;
    font-size: 0; border-radius: 50%; justify-content: center;
  }
  .na-block-editor #na-body .na-row-viewport > .na-row { gap:8px; padding-inline:4px; }
  .na-block-editor #na-body .na-fields-viewport { gap:4px; flex:1 1 auto; overflow:visible; }
  .na-block-editor #na-body .na-row-viewport .na-kind { box-sizing:border-box; width:72px !important; min-width:72px; padding:4px 2px; font-size:10px; }
  .na-block-editor #na-body .na-row-viewport .na-num { box-sizing:border-box; width:44px !important; min-width:44px; padding:4px 2px; font-size:10px; }
  .na-block-editor #na-body .na-row-viewport .na-unit { box-sizing:border-box; width:56px !important; min-width:56px; padding:4px 2px; font-size:10px; }
  .na-block-editor #na-body .na-row-viewport input.na-tgt { box-sizing:border-box; width:28px !important; min-width:28px; padding:4px 2px; font-size:10px; }
  .na-block-editor #na-body .na-row-viewport ox-menu.na-tgt { width:64px !important; min-width:64px; }
  .na-block-editor #na-body .na-row-viewport .na-tunit { box-sizing:border-box; width:56px !important; min-width:56px; padding:4px 2px; font-size:10px; }
  .na-block-editor #na-body .na-row-viewport ox-menu.na-kind,
  .na-block-editor #na-body .na-row-viewport ox-menu.na-unit,
  .na-block-editor #na-body .na-row-viewport ox-menu.na-tgt,
  .na-block-editor #na-body .na-row-viewport ox-menu.na-tunit,
  .na-block-editor #na-body .na-row-viewport ox-menu.na-incline { padding:0; }
  .na-block-editor #na-body .na-row-viewport .na-at { width:auto; flex:none; padding:0; }
  .na-block-editor #na-body #na-editor .na-rep { margin-left:4px; padding-left:4px; }
  .na-block-editor #na-body .na-rep .na-row { padding-left:2px; padding-right:2px; }
  .na-block-editor #na-body .na-row-viewport .na-row-menu-button { width:34px !important; min-width:34px; height:38px !important; font-size:20px; }
  .na-block-editor #na-body .na-row-viewport .na-acts { flex:0 0 34px; }
  .na-block-editor #na-body .na-row-extra { margin-left:8px; }
  .na-block-editor #na-body .na-row-extra select { width:120px; }
}

/* Very narrow phones (390 px): keep every plan-editor header on one row by hiding
   the draft/saved note, shrinking the stepper buttons, collapsing Delete to its
   icon, and shortening Save and close. */
@media(max-width:600px) {
  .na-nav { gap:4px; }
  .na-nav > #na-draft { display:none; }
  .na-nav > .na-sp { display:none; }
  .na-page .na-steps { flex:1 1 auto; min-width:0; }
  .na-page .na-steps button { padding:6px 8px; font-size:var(--font-caption); }
  .na-nav > #na-delete {
    width:38px; height:38px; min-height:38px; flex:0 0 38px; padding:0; gap:0;
    font-size:0; border-radius:50%; justify-content:center;
  }
  .na-block-editor .na-nav > .na-steps, .na-page.na-special-editor .na-nav > .na-steps { flex:0 1 auto; min-width:0; }
  .na-block-editor .na-nav .na-steps .na-title-label, .na-page.na-special-editor .na-nav .na-steps .na-title-label { flex:0 1 auto; min-width:0; overflow:visible; text-overflow:clip; }
}

/* The one-page editor header stays pinned. Its opaque 16px bottom inset
   separates controls from scrolling cards in both columns. A hairline draws
   only after the page has scrolled under the bar. */
.na-block-editor > .na-nav,
.na-page.na-special-editor > .na-nav {
  position: sticky;
  top: 0;
  z-index: 4;
  width: 100%;
  max-width: 1040px;
  margin: 0;
  padding: 16px 30px;
  background: var(--bg);
  box-shadow: 0 1px 0 transparent;
}
@supports (animation-timeline: scroll()) {
  .na-block-editor > .na-nav,
  .na-page.na-special-editor > .na-nav {
    animation: na-editor-nav-edge linear both;
    animation-timeline: scroll(nearest);
    animation-range: 1px 12px;
  }
}
@keyframes na-editor-nav-edge {
  from { box-shadow: 0 1px 0 transparent; }
  to { box-shadow: 0 1px 0 var(--separator); }
}
@media (max-width: 760px) {
  .na-block-editor > .na-nav,
  .na-page.na-special-editor > .na-nav { padding-inline: 16px; }
}
.na-block-editor .na-aside,
.na-page.na-special-editor .na-aside { top: 92px; }
.na-block-editor #na-body :is(input, textarea, select, button, ox-menu, ox-date, ox-number, .ox-date-pill),
.na-page.na-special-editor #na-body :is(input, textarea, select, button, ox-menu, ox-date, ox-number, .ox-date-pill) {
  scroll-margin-top: 92px;
}

.na-page #na-plan-note { width:100%; min-height:96px; box-sizing:border-box; resize:vertical; }

/* Section rows stay on one line at every width (approved, and Roberto's no-wrap rule): the ⋮⋮
   column and the controls tighten below 600 px so a step with a target fits a 390 phone, and a
   row that still cannot fit (a long Repeat child) slides sideways instead of breaking in two. */
@media(max-width:760px) {
  .na-block-editor #na-body .na-fields-viewport { flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden;
    scrollbar-width:none; overscroll-behavior-x:contain; }
  .na-block-editor #na-body .na-fields-viewport::-webkit-scrollbar { display:none; }
  .na-block-editor #na-body .na-fields-viewport > * { flex:none; }
}
@media(max-width:600px) {
  .na-block-editor #na-body .na-row-viewport > .na-row { gap:4px; }
  .na-page #na-body .na-row-viewport > .na-row > .na-drag { width:12px; margin-right:0; font-size:12px; letter-spacing:-3px; }
  .na-block-editor #na-body .na-row-viewport .na-kind { width:62px !important; min-width:62px; }
  .na-block-editor #na-body .na-row-viewport .na-num { width:40px !important; min-width:40px; }
  .na-block-editor #na-body .na-row-viewport .na-unit,
  .na-block-editor #na-body .na-row-viewport .na-tunit { width:50px !important; min-width:50px; }
  .na-block-editor #na-body .na-row-viewport .na-acts { flex:0 0 26px; }
  .na-block-editor #na-body .na-row-viewport .na-row-menu-button { width:26px !important; min-width:26px; }
}

/* The target unit shows its whole value ("none", "/km", "% FTP"). Never ellipsize that value. */
@media(max-width:760px) {
  .na-block-editor #na-body .na-row-viewport ox-menu.na-tunit {
    width: max-content !important;
    min-width: 0;
    max-width: none;
    flex: none;
  }
  .na-block-editor #na-body .na-row-viewport ox-menu.na-tunit .ox-menu-select {
    width: max-content;
    max-width: none;
  }
  .na-block-editor #na-body .na-row-viewport ox-menu.na-tunit .ox-menu-value {
    overflow: visible;
    text-overflow: clip;
    min-width: max-content;
    flex: none;
  }
}

/* A bpm range must remain readable in the compact step row. */
@media(max-width:760px) {
  .na-block-editor #na-body .na-row-viewport .na-tgt[data-hr-bpm] { width:52px !important; min-width:52px; }
}

/* Approved Sections column grid (7 Nov): only the name yields to Repeat indentation.
   Keep spare room before the actions, never inside a numeric field. */
.na-page #na-editor {
  --section-kind:124px; --section-value:92px; --section-unit:64px;
  --section-target:96px; --section-target-unit:76px; --section-indent:16px;
}
.na-page #na-body .na-fields-viewport { flex-wrap:nowrap; }
.na-page #na-body .na-fields-viewport > .na-value-group {
  display:flex; align-items:center; flex:0 0 auto; gap:2px; min-width:0;
}
.na-page #na-body .na-row-viewport ox-menu.na-kind {
  width:var(--section-kind) !important; min-width:0; flex:none;
}
.na-page #na-body .na-rep .na-row-viewport ox-menu.na-kind {
  width:calc(var(--section-kind) - var(--section-indent)) !important;
}
.na-page #na-body .na-row-viewport .na-value-group > input.na-num {
  width:var(--section-value) !important; min-width:0; flex:none;
}
.na-page #na-body .na-row-viewport ox-menu.na-unit {
  width:var(--section-unit) !important; min-width:0; flex:none;
}
.na-page #na-body .na-row-viewport .na-value-group > input.na-tgt,
.na-page #na-body .na-row-viewport ox-menu.na-tgt,
.na-page #na-body .na-row-viewport .na-empty-target {
  width:var(--section-target) !important; min-width:0; flex:none;
}
.na-page #na-body .na-row-viewport ox-menu.na-tunit {
  width:var(--section-target-unit) !important; min-width:0; flex:none;
}
/* A menu's chosen word is never cut ("lengths", "/100 m"): on a wide editor the menu grows to its text from its
   grid width, and the spare room before the actions absorbs it (web check triage, 7 Nov 2026). */
@media(min-width:601px) {
  .na-page #na-body .na-row-viewport ox-menu.na-kind { min-width:var(--section-kind) !important; width:auto !important; }
  .na-page #na-body .na-rep .na-row-viewport ox-menu.na-kind { min-width:calc(var(--section-kind) - var(--section-indent)) !important; }
  .na-page #na-body .na-row-viewport ox-menu.na-unit { min-width:var(--section-unit) !important; width:auto !important; }
  .na-page #na-body .na-row-viewport ox-menu.na-tunit { min-width:var(--section-target-unit) !important; width:auto !important; }
}
.na-page #na-body .na-row-viewport ox-menu .ox-menu-select { white-space:nowrap; }
.na-page #na-body .na-row-viewport .na-acts { margin-left:auto; }
.na-page #na-editor .na-row input,
.na-page #na-editor .na-row .ox-menu-select { background:var(--chip-unselected); }
@media(max-width:600px) {
  .na-page #na-editor {
    --section-kind:64px; --section-value:44px; --section-unit:40px;
    --section-target:44px; --section-target-unit:54px; --section-indent:8px;
  }
  .na-block-editor #na-body .na-row-viewport > .na-row { gap:2px; }
  .na-page #na-body .na-row-viewport ox-menu .ox-menu-select { padding-inline:3px; gap:2px; }
  .na-page #na-body .na-row-viewport .na-value-group > input { padding-inline:3px; }
}
/* The same grid also fits editors nested inside a narrow race/setup card. */
.na-page #na-editor { container-type:inline-size; }
@container (max-width:300px) {
  .na-page #na-body .na-row-viewport {
    --section-kind:34px; --section-value:52px; --section-unit:36px;
    --section-target:44px; --section-target-unit:54px;
  }
  .na-page #na-body .na-row-viewport .na-at { padding-inline:0; }
  .na-page #na-body .na-row-viewport .na-at::after { font-size:10px; }
}

@media(max-width:600px) {
  .na-page #na-body .na-row-viewport .na-at { display:none; }
  .na-page #na-body .na-row-viewport ox-menu.na-unit .ox-menu-select,
  .na-page #na-body .na-row-viewport ox-menu.na-tunit .ox-menu-select { font-size:10px; }
  .na-page #na-editor:has(ox-menu.na-unit [data-value="lengths"]) {
    --section-kind:52px; --section-unit:52px;
    --section-target:38px; --section-target-unit:60px;
  }
  /* A pool swim's narrow row: "lengths" and "/100 m" show whole. The unit menus take their text's width and the
     fields sit 2 px apart, so the row still fits. */
  .na-page #na-editor:has(ox-menu.na-unit [data-value="lengths"]) .na-row-viewport ox-menu.na-unit,
  .na-page #na-editor:has(ox-menu.na-unit [data-value="lengths"]) .na-row-viewport ox-menu.na-tunit { min-width:0 !important; width:max-content !important; }
  .na-block-editor #na-body #na-editor:has(ox-menu.na-unit [data-value="lengths"]) .na-fields-viewport { gap:2px; }
  .na-page #na-editor:has(ox-menu.na-unit [data-value="lengths"]) .na-row-viewport ox-menu .ox-menu-select { padding-inline:2px; gap:1px; }
  /* Option A on a phone (8 Nov 2026): the columns stay fixed so they line up, and every value shows whole. The step
     name takes the unit menus' 10 px type, so its column fits "Cool-down"; the target column fits the widest shared
     target ("130–140", PlanEditor.targetColumnSamples; 1.3.12 cut it to "13…"). Fields sit 2 px apart. */
  .na-page #na-editor:not(:has(ox-menu.na-unit [data-value="lengths"])) {
    --section-kind:76px; --section-target:46px; --section-indent:8px;
  }
  .na-page #na-body .na-row-viewport ox-menu.na-kind .ox-menu-select,
  .na-page #na-body .na-row-viewport ox-menu.na-kind .ox-menu-value { font-size:10px; }
  .na-block-editor #na-body #na-editor .na-fields-viewport { gap:2px; }
  .na-page #na-body .na-row-viewport .na-value-group > input.na-tgt { padding-inline:0; text-align:center; }
  .na-page #na-body .na-row-viewport .na-value-group > input.na-num { padding-inline:2px; }   /* "1:20:00" whole */
  /* A pool swim's "lengths" row keeps its own narrow layout: its step names size to their text. */
  .na-page #na-editor:has(ox-menu.na-unit [data-value="lengths"]) .na-row-viewport ox-menu.na-kind { min-width:0 !important; width:max-content !important; }
}

/* The FTP field shows "Not set" whole when empty, on one line, as iPhone, iPad and Android do (8 Nov 2026). */
.na-page .na-ride-fields ox-number .ox-number-value[placeholder] { flex:0 0 auto; width:76px !important; min-width:76px; padding-inline:4px !important; }
.na-page .na-ride-fields ox-number .ox-number-value::placeholder { white-space:nowrap; }