/* Pacer (TKF-286) — the pace plan as a document.
   Tokens only: TKF-226 tokenised colour and TKF-229 the type scale, so a literal
   here would be the one thing that stops following the theme. */

/* Fills the panel, like every other tab (TKB-340). It was capped at 1000px and
   centred, on the instinct that "the plan as a document" wanted a reading
   measure — but the content is tiles and tables, which gain columns from width
   and gain nothing from a line length. Analysis sets no cap either. */
/* 14px, because that is what every other panel uses and Pacer was the only one
   that did not (TKB-343). _showAnalysisTab sets padding:14px on the panel
   itself and .rm-head carries `14px 18px 0`, so an Analysis tab strip starts
   14px down and 30px in — 14 plus the tab's own 16px of padding — while Pacer's
   started at 22 and 40 and visibly stepped when switching between them. */
.pc-wrap {
  padding: 14px 14px 64px;
  height: 100%;
  overflow-y: auto;
  box-sizing: border-box;
}

/* The cockpit (TKF-303) — what I control on the left, what it costs on the
   right, in equal halves above a full-width document.
   Equal halves rather than a weighted split: neither side is the subordinate of
   the other, and the effort slider only needed to stop being 1900px wide.
   `align-items: start` because the two columns are not the same height and
   stretching the shorter one would put a tall empty panel beside a full one. */
.pc-cockpit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  margin-bottom: 4px;
}
.pc-cock-l > *:last-child, .pc-cock-r > *:last-child { margin-bottom: 0; }
@media (max-width: 1080px) {
  .pc-cockpit { grid-template-columns: 1fr; gap: 0; }
}

/* Sub-tab strip — deliberately the same visual language as .analysis-tabs, and
   deliberately NOT the same class. Reaching into analysis.css would couple two
   features that are only loaded together by accident; the tokens are the shared
   thing, so they are what is shared. Keep the two in step by hand if the
   Analysis strip is restyled. */
.pc-viewtabs {
  display: flex;
  gap: 2px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--bg3);
}
.pc-viewtab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--dim);
  font-family: var(--font-text);
  font-size: var(--fs-base);
  font-weight: 500;
  padding: 8px 16px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.pc-viewtab:hover { color: var(--txt); }
.pc-viewtab:focus, .pc-viewtab:focus-visible { outline: none; }
.pc-viewtab.active { color: var(--txt-hi); border-bottom-color: var(--amber-ink); }
/* The saved-plan count. Sized off the tab's own font rather than fixed, so it
   tracks the type scale (TKF-229) instead of drifting away from it. */
.pc-viewtab-n {
  display: inline-block; margin-left: 6px; padding: 1px 6px;
  border-radius: 9px; background: var(--bg3); color: var(--dim);
  font-size: var(--fs-xs); font-family: var(--font-data); vertical-align: 1px;
}
.pc-viewtab.active .pc-viewtab-n { color: var(--txt); }

.pc-head { margin-bottom: 18px; }
.pc-title { font-size: var(--fs-xl); margin: 0 0 2px; letter-spacing: -0.01em; }
.pc-sub   { color: var(--dim); font-size: var(--fs-sm); }

.pc-empty, .pc-error, .pc-none {
  padding: 18px; border: 1px solid var(--bdr); border-radius: 10px;
  background: var(--bg1); color: var(--dim); font-size: var(--fs-sm);
}
.pc-empty strong { color: var(--txt); display: block; margin-bottom: 6px; }
.pc-empty p { margin: 0; }
.pc-error { border-color: var(--red); color: var(--red); background: var(--bg1); }
.pc-none  { padding: 12px 14px; }

/* ── the route bar (TKF-299) ───────────────────────────────────────────────── */
/* What is being paced, and the one action on it. Replaces a controls strip that
   mixed the route with the rider's equipment — one is "what am I pacing", the
   others are "who is riding it", and they are not the same question. */
.pc-routebar {
  display: flex; flex-wrap: wrap; gap: 14px;
  align-items: flex-end; justify-content: space-between;
  padding: 14px 16px; margin-bottom: 14px;
  border: 1px solid var(--bdr); border-radius: 10px; background: var(--bg1);
}
.pc-rb-label { font-size: var(--fs-micro); color: var(--dim); text-transform: uppercase; letter-spacing: .05em; }
.pc-rb-title { font-size: var(--fs-lg); line-height: 1.2; margin-top: 2px; }
.pc-rb-stats { font-size: var(--fs-sm); color: var(--dim); font-family: var(--font-data); margin-top: 3px; }
.pc-routebar-empty .pc-rb-title { color: var(--dim); }
.pc-routebar-empty .pc-rb-stats { font-family: inherit; }
.pc-rb-acts { display: flex; gap: 8px; flex: 0 0 auto; }

/* ── rider & bike (TKF-299) ────────────────────────────────────────────────── */
/* In the rail, not above the answer: set once, then left alone. Two columns so
   four short fields do not become four tall rows in a 300px column. */
.pc-setup {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--bdr); border-radius: 10px; background: var(--bg1);
}
.pc-setup .pc-field input, .pc-setup .pc-field select { width: 100%; box-sizing: border-box; }
.pc-field { display: flex; flex-direction: column; gap: 4px; flex: 0 0 auto; }
.pc-field > span { font-size: var(--fs-micro); color: var(--dim); text-transform: uppercase; letter-spacing: .04em; }
.pc-field select, .pc-field input {
  background: var(--bg2); color: var(--txt);
  border: 1px solid var(--bdr2); border-radius: 7px;
  padding: 7px 9px; font-size: var(--fs-sm); font-family: inherit;
}
.pc-field input { width: 92px; font-family: var(--font-data); }

/* ── hero ─────────────────────────────────────────────────────────────────── */
.pc-hero {
  display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end;
  justify-content: space-between;
  padding: 20px; border-radius: 12px;
  border: 1px solid var(--bdr); background: var(--bg1);
  /* The gap below the hero used to come from .pc-effort's own `margin: 18px 0`,
     so anything inserted BETWEEN them sat flush against it — which is what the
     ride-history panel did. Owned here instead; adjacent margins collapse, so
     the hero-to-effort gap is unchanged. */
  margin-bottom: 18px;
}
.pc-hero-label { font-size: var(--fs-micro); color: var(--dim); text-transform: uppercase; letter-spacing: .05em; }
.pc-hero-band  { font-family: var(--font-data); font-size: var(--fs-hero); line-height: 1.1; margin: 4px 0 6px; }
.pc-hero-note  { font-size: var(--fs-xs); color: var(--dim2); max-width: 46ch; }


/* ── effort ───────────────────────────────────────────────────────────────── */
.pc-effort { margin: 0 0 18px; padding: 14px 16px; border: 1px solid var(--bdr); border-radius: 10px; background: var(--bg1); }
.pc-effort-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.pc-effort-top label { font-size: var(--fs-sm); }
.pc-effort-top output { font-family: var(--font-data); font-size: var(--fs-md); color: var(--amber-ink); }
/* accent-color is a FILL — it paints the track and thumb and the browser picks
   the contrast — so it takes --amber, not --amber-ink (tokens.css). */
.pc-effort input[type=range] { width: 100%; accent-color: var(--amber); }
.pc-effort-note { font-size: var(--fs-xs); color: var(--dim2); margin-top: 6px; }

/* ── tiles ────────────────────────────────────────────────────────────────── */
/* Three across in the cockpit's half-width column, two when it stacks. Explicit
   rather than auto-fit: at half of a wide page auto-fit still fits all six in one
   row, which is the full-width row this layout just moved away from. The
   demands-style tile groups elsewhere keep their own auto-fit rule below. */
.pc-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 22px; }
@media (max-width: 1400px) { .pc-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .pc-tiles { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); } }
.pc-tile  { padding: 12px 14px; border: 1px solid var(--bdr); border-radius: 10px; background: var(--bg1); }
.pc-tile-v { font-family: var(--font-data); font-size: var(--fs-lg); }
.pc-tile-u { font-size: var(--fs-xs); color: var(--dim); margin-left: 3px; }
.pc-tile-l { font-size: var(--fs-micro); color: var(--dim); text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }

/* ── sections ─────────────────────────────────────────────────────────────── */
.pc-sec { margin-bottom: 22px; }
.pc-sec h2 { font-size: var(--fs-md); margin: 0 0 8px; }
.pc-fuel { display: flex; flex-direction: column; gap: 5px; padding: 12px 14px;
           border: 1px solid var(--bdr); border-radius: 10px; background: var(--bg1); font-size: var(--fs-sm); }
.pc-dim  { color: var(--dim); }
.pc-fine { font-size: var(--fs-xs); color: var(--dim2); margin: 18px 0; line-height: 1.5; }

/* Wide content scrolls inside its own box — the page body must never scroll
   sideways on a phone. */
.pc-scroll { overflow-x: auto; border: 1px solid var(--bdr); border-radius: 10px; background: var(--bg1); }
.pc-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.pc-table th, .pc-table td { padding: 8px 10px; text-align: left; white-space: nowrap; }
.pc-table th { font-size: var(--fs-micro); color: var(--dim); text-transform: uppercase;
               letter-spacing: .04em; border-bottom: 1px solid var(--bdr); font-weight: 500; }
.pc-table td { border-bottom: 1px solid var(--bdr2); font-family: var(--font-data); }
.pc-table tbody tr:last-child td { border-bottom: 0; }
.pc-table .num { text-align: right; }
.pc-table .pc-n { color: var(--dim); width: 1%; }

/* ── actions + saved ──────────────────────────────────────────────────────── */
.pc-btn { border: 1px solid var(--bdr2); background: var(--bg2); color: var(--txt);
          border-radius: 8px; padding: 9px 16px; font-size: var(--fs-sm); font-family: inherit; cursor: pointer; }
.pc-btn:hover { background: var(--bg3); }
/* Amber, like every other filled primary action in the app (analysis.css,
   calendar.css). It was --blue with --on-amber text: --blue is a DATA colour
   from the chart palette, not UI chrome, and on the light theme that pairing is
   #201d17 on #2c6486 — dark on dark, unreadable. --amber holds #f59e0b on both
   grounds and --on-amber is defined as exactly this: the label on a fill. */
.pc-btn-primary { background: var(--amber); border-color: var(--amber); color: var(--on-amber); }
.pc-btn-primary:hover { filter: brightness(1.08); background: var(--amber); }

.pc-saved { list-style: none; margin: 0; padding: 0; border: 1px solid var(--bdr);
            border-radius: 10px; background: var(--bg1); overflow: hidden; }
.pc-saved-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px;
                border-bottom: 1px solid var(--bdr2); font-size: var(--fs-sm); }
.pc-saved-row:last-child { border-bottom: 0; }
.pc-saved-t { flex: 0 1 auto; }
.pc-saved-n { margin-left: auto; font-family: var(--font-data); color: var(--dim); }
.pc-x { background: none; border: 0; color: var(--dim); font-size: var(--fs-md);
        cursor: pointer; padding: 0 4px; line-height: 1; }
.pc-x:hover { color: var(--red); }

@media (max-width: 640px) {
  .pc-wrap { padding: 14px 12px 48px; }
  .pc-hero { flex-direction: column; align-items: flex-start; }
  .pc-hero-band { font-size: var(--fs-xxl); }
  .pc-routebar { flex-direction: column; align-items: stretch; }
  .pc-rb-acts { flex-direction: column; }
  .pc-rb-acts .pc-btn { width: 100%; }
  .pc-setup { grid-template-columns: 1fr; }
  .pc-field input { width: 100%; }
}

/* Plan modes — effort / finish time / Load (TKF-291) */
.pc-tabs { display: flex; gap: 4px; margin-bottom: 10px; flex-wrap: wrap; }
.pc-tab {
  border: 1px solid var(--bdr2); background: var(--bg2); color: var(--dim);
  border-radius: 7px; padding: 5px 11px; font-size: var(--fs-xs);
  font-family: inherit; cursor: pointer;
}
.pc-tab:hover { color: var(--txt); }
.pc-tab.on { background: var(--bg3); color: var(--txt); border-color: var(--amber-ink); }

.pc-goal { display: flex; align-items: center; gap: 6px; }
.pc-goal input {
  width: 74px; background: var(--bg2); color: var(--txt);
  border: 1px solid var(--bdr2); border-radius: 7px;
  padding: 7px 9px; font-size: var(--fs-md); font-family: var(--font-data);
}
.pc-goal span { color: var(--dim); font-size: var(--fs-sm); }

/* An unreachable target is a real answer, not an error — amber, not red. */
.pc-unreachable {
  margin-top: 10px; padding: 9px 11px; border-radius: 8px;
  background: rgba(var(--amber-wash), .14); border: 1px solid var(--amber-ink);
  color: var(--on-amber-wash); font-size: var(--fs-xs); line-height: 1.5;
}

/* Climb criteria (TKF-295) — the controls for the sentence under the table.
   Sits tight above the table rather than up in the route bar: it filters
   THIS table and changes nothing else on the page; putting it beside the route
   and bike pickers would imply it moved the plan. */
.pc-crit {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px;
  margin-bottom: 10px;
}
.pc-crit-in { display: flex; align-items: baseline; gap: 5px; }
.pc-crit .pc-field input {
  width: 84px; background: var(--bg2); color: var(--txt);
  border: 1px solid var(--bdr2); border-radius: 7px;
  padding: 6px 8px; font-size: var(--fs-sm); font-family: var(--font-data);
}
.pc-crit-reset { padding: 6px 12px; font-size: var(--fs-xs); }

/* The map beside the climbs (TKF-315). Equal halves, like the cockpit above and
   for the same reason: neither is the subordinate of the other — the table says
   where a climb is in kilometres, the map where it is on the ground, and the
   point of the row is that they answer each other. Stacks where the cockpit
   does, so the page has one breakpoint. `align-items: start` because a table of
   two climbs is far shorter than the map beside it. */
.pc-side {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
@media (max-width: 1080px) {
  .pc-side { grid-template-columns: 1fr; gap: 0; }
}

/* The plan on the map (TKF-290). The module owns the inner canvas so the
   document can be rebuilt around it without taking Leaflet with it. 520px went
   in with TKF-303's full-width row; at half width (TKF-315) it is close to
   square on a laptop and a comfortable 16:9 on a wide page, so it stays. */
.pc-map { height: 520px; border: 1px solid var(--bdr); border-radius: 10px; overflow: hidden; }
.pc-map-canvas { height: 100%; width: 100%; }
@media (max-width: 1080px) { .pc-map { height: 340px; } }

/* The climb under the pointer (TKF-315). Hover lights, click pins; both use
   the plan library's row idiom below — bg2 under the row and an amber left edge
   — so "this one" means the same thing in the two tables. A PINNED row adds the
   amber wash and an amber number, the .nav-link.active reading of "selected",
   so it still reads as chosen once the pointer has moved on. */
.pc-splits .pc-split-row { cursor: pointer; }
.pc-splits .pc-split-row:hover td, .pc-splits .pc-split-row.on td { background: var(--bg2); }
.pc-splits .pc-split-row.on td:first-child { box-shadow: inset 3px 0 0 var(--amber-ink); }
.pc-splits .pc-split-row.pinned td { background: rgba(var(--amber-wash), .10); }
.pc-splits .pc-split-row.pinned .pc-n { color: var(--amber-ink); }
.pc-splits .pc-split-row:focus-visible { outline: 2px solid var(--amber-ink); outline-offset: -2px; }

/* Tokens, and the translucency pattern core/map-layers.css uses for the Map
   Layers panel — which sits on this same map, a few pixels away.
   ⚠ TKB-282's "literals on the basemap" rule is about drawn GEOMETRY: the route
   line, the endpoint markers and the waypoint flags are painted onto tiles that
   do not follow the theme, so a --bg0 marker ring goes cream on paper. A legend
   is CHROME, not geometry — it is a panel over the map, not on it — and chrome
   follows the theme like every other panel. The swatches inside it are the
   exception within the exception: they must match the drawn line exactly, so
   they take their colours from the same place the line does. */
.pc-map-legend {
  background: color-mix(in srgb, var(--bg1) 90%, transparent);
  color: var(--txt);
  border: 1px solid var(--bdr);
  border-radius: 8px;
  padding: 7px 9px;
  font-size: var(--fs-xs);
  line-height: 1.5;
}
.pc-map-legend-t { font-weight: 600; margin-bottom: 3px; }
.pc-map-legend-r { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.pc-map-legend-r i { width: 12px; height: 4px; border-radius: 2px; flex: 0 0 auto; }

/* Plan Manager (TKF-297). The saved-plan list was three lines in a rail with a
   delete button and no way back in; it is a library now, so it gets the table
   treatment the Climbs and terrain tables already have. */
.pc-plans .pc-plan-row { cursor: pointer; }
.pc-plans .pc-plan-row:hover td { background: var(--bg2); }
.pc-plans .pc-plan-row:focus-visible { outline: 2px solid var(--amber-ink); outline-offset: -2px; }
/* The plan currently open. A left edge rather than a fill, so it survives the
   hover state instead of fighting it. */
.pc-plans .pc-plan-row.on td:first-child { box-shadow: inset 3px 0 0 var(--amber-ink); }
.pc-plans .pc-plan-row.on td { background: var(--bg2); }
.pc-plans td:first-child { font-family: var(--font-text); }
.pc-plan-acts { white-space: nowrap; text-align: right; width: 1%; }
.pc-plan-acts .pc-x { font-size: var(--fs-sm); padding: 0 3px; }

/* Your aerodynamics (TKF-134). Two numbers, where each came from, and the fit
   sitting BESIDE them rather than replacing them — a fit is a proposal, so the
   panel has to show what is in force and what is on offer at the same time. */
.pc-aero-row { display: flex; align-items: baseline; gap: 6px; }
.pc-aero-l { color: var(--dim); min-width: 2.4em; }
.pc-aero-v { font-family: var(--font-data); }
.pc-aero-s {
  font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .04em;
  padding: 1px 6px; border-radius: 9px; background: var(--bg3); color: var(--dim);
}
.pc-aero-fitted { background: rgba(var(--amber-wash), .18); color: var(--on-amber-wash); }
.pc-aero-manual { background: var(--bg3); color: var(--txt); }
.pc-aero-row .pc-x { margin-left: auto; }
.pc-aero-row .pc-x + .pc-x { margin-left: 0; }
.pc-aero-fit { padding: 7px 0 2px; border-top: 1px solid var(--bdr2); margin-top: 4px; }
.pc-aero-btn { width: 100%; margin-top: 6px; font-size: var(--fs-xs); padding: 6px 10px; }

/* Strategy switch (TKF-131) — under the mode tabs, not beside them: the tabs ask
   how much energy to spend, this asks how to spend it, and every combination of
   the two is valid. */
.pc-strats { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.pc-strat {
  border: 1px solid var(--bdr2); background: var(--bg2); color: var(--dim);
  border-radius: 7px; padding: 4px 10px; font-size: var(--fs-xs);
  font-family: inherit; cursor: pointer;
}
.pc-strat:hover { color: var(--txt); }
.pc-strat.on { background: var(--bg3); color: var(--txt); border-color: var(--amber-ink); }
.pc-strat-note { font-size: var(--fs-xs); color: var(--txt2); margin-left: 4px; }
.pc-btn:disabled { opacity: .5; cursor: default; }
.pc-btn:disabled:hover { background: var(--bg2); }
.pc-btn-primary:disabled:hover { background: var(--amber); filter: none; }

/* Event readiness (TKF-301) — the gap between what a plan asks and what the
   rider has held. Three states, and the middle one is the point: without it
   every rider sits a hair either side of a hard line that a single good ride
   moves. */
.pc-ready-head {
  padding: 9px 12px; border-radius: 8px; margin-bottom: 10px;
  font-size: var(--fs-sm); border: 1px solid var(--bdr);
}
.pc-ready-head.pc-ready-within-reach { background: rgba(var(--amber-wash), .10); border-color: var(--bdr2); }
.pc-ready-head.pc-ready-stretch      { background: rgba(var(--amber-wash), .16); border-color: var(--amber-ink); }
.pc-ready-head.pc-ready-beyond       { background: rgba(var(--amber-wash), .16); border-color: var(--red); }
.pc-ready-head.pc-ready-unknown      { background: var(--bg1); }

/* On the ROW, only the gap is coloured — the watts either side of it are facts
   and colouring them would read as a judgement on the rider's best. */
.pc-ready-clear b { color: var(--green); }
.pc-ready-limit b { color: var(--amber-ink); }
.pc-ready-short b { color: var(--red); }
.pc-ready-clear .pc-dim, .pc-ready-limit .pc-dim, .pc-ready-short .pc-dim { margin-left: 4px; }
.pc-ready-head.pc-ready-at-the-limit { background: rgba(var(--amber-wash), .13); border-color: var(--amber-ink); }
.pc-ready-chart {
  height: 260px; margin-bottom: 12px; padding: 10px 12px;
  border: 1px solid var(--bdr); border-radius: 10px; background: var(--bg1);
}
@media (max-width: 640px) { .pc-ready-chart { height: 210px; } }
/* Where the gap sits, in words — under the verdict, above the chart that draws
   it. Quieter than the verdict box: the verdict is the answer, this is the
   reading of it. */
.pc-ready-shape { font-size: var(--fs-sm); line-height: 1.55; margin: 0 2px 10px; }

/* Readiness at a glance in the plan library (TKF-301). Reuses the row tones the
   gap table already uses, so the same colour means the same thing in both. */
.pc-ready-chip {
  display: inline-block; padding: 1px 7px; border-radius: 9px;
  font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .04em;
}
.pc-ready-chip.pc-ready-clear { background: rgba(var(--amber-wash), .10); color: var(--green); }
.pc-ready-chip.pc-ready-limit { background: rgba(var(--amber-wash), .16); color: var(--on-amber-wash); }
.pc-ready-chip.pc-ready-short { background: rgba(var(--amber-wash), .10); color: var(--red); }
/* The plan that rides with the route to the head unit (TKF-135). A star because
   it is a single choice among the route's plans, which is what a star means
   everywhere else in this app. */
.pc-star.on { color: var(--amber); }
.pc-star:hover { color: var(--amber-ink); }