/* The Course Planner's stat strip and its chart frame — the ONE copy.
 *
 * Roberto asked the setup wizard's dock to be "exactly what we have in the course
 * planner", and the first attempt built a look-alike with its own class names. It
 * was not the same thing, and he had to say so twice. These are the planner's own
 * rules, lifted out of `courses.html` and now loaded by both screens, so there is
 * nothing left to keep in sync by hand.
 *
 * What stayed behind in `courses.html`: `.dock` and its summary, `.sfblock`, the
 * surface legend, the Elevation toggle and the mobile bottom-sheet media block —
 * all of them the planner's own furniture, none of them the strip.
 */

  .strip{display:flex;align-items:center;padding:10px 18px 11px;
         border:1px solid var(--separator);background:var(--card);
         border-radius:14px 14px 0 0;border-bottom:0}
  /* The sport, as a mark rather than a word — no disc behind it. The glyph is
     sized to the cell's own text block (the 11px label over the 20px value), so
     it reads as part of the row rather than an ornament beside it. */
  .sportmark{flex:none;display:grid;place-items:center;margin-right:16px}
  /* Per `docs/icons-contract.md`: stroke icons carry no stroke attributes and
     take them from here; fill icons carry `fill="currentColor" stroke="none"`
     on their paths and resolve against `color`. So the accent is set as COLOR,
     not as stroke — the shoe is a fill glyph and would come out invisible. */
  .sportmark svg{width:38px;height:38px;color:var(--accent);fill:none;stroke:currentColor;
                 stroke-linecap:round;stroke-linejoin:round}
  .sportmark[data-sport="run"] svg{stroke-width:0}      /* the shoe is filled */
  .sportmark[data-sport="bike"] svg{stroke-width:2}     /* Lucide's own weight */
  .sportmark[data-sport="swim"] svg{stroke-width:2}     /* Tabler's */
  .strip .cell{padding-right:30px;margin-right:30px;border-right:1px solid var(--separator)}
  .strip .k{font-size:var(--font-caption2);letter-spacing:.06em;text-transform:uppercase;
            color:var(--ink-secondary);white-space:nowrap}
  .strip .v{font-size:var(--font-title3);font-weight:var(--weight-bold);
            letter-spacing:-.02em;line-height:1.25;white-space:nowrap}
  .strip .v.ph{color:var(--ink-tertiary);font-weight:var(--weight-regular)}

  .chartwrap{position:relative;border:1px solid var(--separator);border-top:0;
             border-radius:0 0 12px 12px;background:var(--bg-raised);overflow:hidden;
             box-shadow:inset 0 1px 0 rgba(0,0,0,.04)}


/* The chart's own ink — the planner's rules, whole, re-keyed off its element id
   so the drawing carries its colours wherever it is used. Extracted by matching
   BRACES: a first attempt moved them line by line and cut two multi-line rules
   in half, which is what stripped the planner's own chart of its type. */
  .chartwrap .profile{width:100%;height:118px;display:block;cursor:crosshair;touch-action:pan-y}
  .chartwrap .profile[hidden]{display:none}
  .chartwrap .profile .fill{fill:var(--ink);opacity:.10}
  .chartwrap .profile .axis{stroke:var(--ink-tertiary);stroke-width:1}
  .chartwrap .profile .axtick{stroke:var(--ink-tertiary);stroke-width:1}
  .chartwrap .profile .axtick.end{stroke:var(--accent);stroke-width:2}
  .chartwrap .profile .lbl.end{fill:var(--accent);font-weight:700}
  .chartwrap .profile .line{fill:none;stroke:var(--accent);stroke-width:3.4;
                 stroke-linejoin:round;stroke-linecap:round}
  .chartwrap .profile .line.sf-unpaved{stroke-dasharray:11 8;opacity:.9}
  .chartwrap .profile .line.sf-unknown{stroke-dasharray:0.1 8;stroke-linecap:round;opacity:.72}
  .chartwrap .profile .grid{stroke:var(--ink-tertiary);stroke-width:1;stroke-dasharray:2 4}
  .chartwrap .profile .cursor{stroke:var(--accent);stroke-width:1.4}
  .chartwrap .profile .lbl{fill:var(--ink-secondary);font-family:var(--font-stack);
                font-size:10.5px;font-weight:500;font-variant-numeric:tabular-nums;
                letter-spacing:.01em}
  .chartwrap .profile .lbl.unit{fill:var(--ink-tertiary);font-size:9.5px;font-weight:400}
  .chartwrap .profile .selrect{fill:var(--accent);opacity:.10}
  .chartwrap .profile .seledge{stroke:var(--accent);stroke-width:1.6}
  .chartwrap .profile .veil{fill:var(--card);opacity:.62}

/* A checkpoint, ruled through the terrain — the wizard's one addition. */
.chartwrap .profile .cpline{stroke:var(--accent);stroke-opacity:.5;stroke-width:1;stroke-dasharray:3 3}

/* The surface legend, keyed off the planner's `#legend` id so the setup strip
   can carry the same bar and the same percentages. */
  .sfblock{margin-left:auto;min-width:300px;max-width:420px}
  .legend .bar{display:flex;height:7px;border-radius:4px;overflow:hidden;
               border:1px solid var(--separator);margin:5px 0 4px}
  .legend .bar i{display:block}
  .legend .keys{display:flex;gap:10px;flex-wrap:wrap;font-size:var(--font-caption2);color:var(--ink-secondary)}
  .legend .keys span{display:flex;align-items:center;gap:4px}
  .sw{width:14px;height:0;border-top-width:2.5px;border-top-style:solid;display:inline-block}
  .sf-paved{border-top-style:solid;background:var(--accent);color:var(--accent);border-color:var(--accent)}
  .sf-unpaved{border-top-style:dashed;background:var(--accent);opacity:.72;
              color:var(--accent);border-color:var(--accent)}
  .sf-unknown{border-top-style:dotted;background:var(--accent);opacity:.38;
              color:var(--accent);border-color:var(--accent)}
  .legend .bar i.sf-unpaved{opacity:.72}
  .legend .bar i.sf-unknown{opacity:.38}

/* The pace band over the terrain: what the Pace step's two sliders actually do,
   in the chart's own coordinates so it cannot drift out of alignment. */
.chartwrap .profile .paceavg{stroke:var(--ink-tertiary);stroke-width:1;stroke-dasharray:4 4}
.chartwrap .profile .pacebar{stroke-width:3.2;stroke-linecap:butt}
.chartwrap .profile .pacebar.f{stroke:var(--wt-green)}
.chartwrap .profile .pacebar.m{stroke:var(--wt-amber)}
.chartwrap .profile .pacebar.s{stroke:var(--race-type)}