/* ============================================================================
   B7 Tracker — panel.css
   Owner: panel agent. Styles ONLY the inside of #panel (built by js/panel.js).

   Consumes the tokens and primitives from base.css (.card .sec .kv .chip .bar
   .dot .btn) and never redefines them. The box, position and padding of #panel
   itself belong to base.css — nothing here touches them.

   Load order: vendor/leaflet.css, base.css, core.css, map.css, elev.css,
   panel.css, field.css.

   Class map (all owned here, prefix b7p-):
     .b7p-sec         one section wrapper (hero / stats / proj / splits / field / wx)
     .b7p-note        quiet explanatory paragraph
     .b7p-hero        section 1 — progress, elapsed, last fix
     .b7p-prog        the progress rail with checkpoint ticks
     .b7p-grid        responsive grid of .kv stat cells
     .b7p-proj        section 3 — finish estimate, next checkpoint, cutoffs
     .b7p-line        one label / value / figure row (cutoffs, next checkpoint)
     .b7p-splits      section 4 — the 18 checkpoint rows
     .b7p-fld/.b7p-nb section 5 — field context and neighbouring racers
     .b7p-wx          section 6 — weather at the racer's position
   ========================================================================= */


/* ============================================================================
   0. SHARED INSIDE THE PANEL
   ========================================================================= */

#panel .b7p-sec {
  min-width: 0;
}

#panel .b7p-note {
  margin: 0;
  font-size: var(--fs-1);
  line-height: 1.55;
  color: var(--fg-3);
}

/* Before the first payload the lower sections are placeholders; dim them
   rather than hiding them so the page height does not jump on first data. */
#panel.is-empty .b7p-sec:not(.b7p-sec--hero) {
  opacity: .45;
}

/* Waiting for another racer's data after a selection. */
#panel.is-pending .card {
  opacity: .6;
  transition: opacity var(--dur) ease;
}

/* Full-bleed rows: keep the focus ring inside the card, never clipped. */
#panel .b7p-split__main:focus-visible,
#panel .b7p-split__more:focus-visible,
#panel .b7p-nb__row:focus-visible,
#panel .b7p-line:focus-visible {
  outline-offset: -2px;
}

/* A responsive grid of .kv cells. auto-fit keys off the real container width,
   so it works both full-width on a phone and in the 400px desktop column. */
#panel .b7p-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--s-4) var(--s-3);
}
#panel .b7p-grid--tight {
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: var(--s-3);
}

/* Put the unit on the same baseline as the value instead of its own line. */
#panel .b7p-grid .kv {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "k k"
    "v u"
    "s s";
  align-items: baseline;
  column-gap: var(--s-2);
  row-gap: 2px;
}
#panel .b7p-grid .kv .k { grid-area: k; }
/* One step down from the .kv default: eight cells have to sit two-abreast in a
   320px column and still keep their unit on the same baseline as the value. */
#panel .b7p-grid .kv .v { grid-area: v; font-size: var(--fs-4); }
#panel .b7p-grid .kv .u { grid-area: u; justify-self: start; white-space: nowrap; }
#panel .b7p-grid .kv .s { grid-area: s; }

#panel .b7p-fail {
  border-color: var(--bad);
}
#panel .b7p-fail p {
  margin-top: var(--s-2);
  font-size: var(--fs-2);
  color: var(--fg-2);
}


/* ============================================================================
   1. HERO PROGRESS
   ========================================================================= */

#panel .b7p-hero {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

#panel .b7p-hero__flags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

#panel .b7p-hero__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-3);
}

/* "42,1 km" on one baseline, with the label above and the note below. */
#panel .b7p-hero__dist {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "k k"
    "v u"
    "s s";
  align-items: baseline;
  column-gap: var(--s-2);
  row-gap: 2px;
}
#panel .b7p-hero__dist .k { grid-area: k; }
#panel .b7p-hero__dist .v { grid-area: v; line-height: 1; }
#panel .b7p-hero__dist .u { grid-area: u; justify-self: start; font-size: var(--fs-3); }
#panel .b7p-hero__dist .s { grid-area: s; }

#panel .b7p-hero__pct {
  flex: 0 0 auto;
  align-items: flex-end;
  text-align: right;
}
#panel .b7p-hero__pct .v {
  font-size: var(--fs-4);
  color: var(--fg-2);
}

/* --- the rail ------------------------------------------------------------
   26px tall band: a 14px rail with the ticks standing slightly proud of it
   and the current-position knob riding on top.                            */
#panel .b7p-prog {
  position: relative;
  height: 26px;
  margin-top: var(--s-1);
}
#panel .b7p-prog__rail {
  position: absolute;
  left: 0;
  right: 0;
  top: 6px;
  height: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background: var(--bg-3);
  overflow: hidden;
}
#panel .b7p-prog__fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent-dim), var(--accent));
  transition: width var(--dur) ease;
}
#panel .b7p-prog__ticks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
#panel .b7p-tick {
  position: absolute;
  top: 4px;
  height: 18px;
  width: 2px;
  margin-left: -1px;
  border-radius: 1px;
  background: var(--line-strong);
}
/* Ticks already behind the racer sit on the orange fill — go dark for contrast. */
#panel .b7p-tick.is-passed {
  background: rgba(10, 12, 15, .6);
}
#panel .b7p-tick.is-next {
  top: 1px;
  height: 24px;
  width: 2px;
  background: var(--fg);
}
#panel .b7p-prog__knob {
  position: absolute;
  top: 6px;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  border: 2px solid var(--bg);
  border-radius: var(--r-full);
  background: var(--fg);
  box-shadow: var(--shadow-1);
  transition: left var(--dur) ease;
}

#panel .b7p-prog__scale {
  display: flex;
  justify-content: space-between;
  margin-top: calc(-1 * var(--s-2));
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  font-variant-numeric: tabular-nums;
  color: var(--fg-3);
}

#panel .b7p-hero__foot {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
}
#panel .b7p-hero__foot .v {
  font-size: var(--fs-4);
}


/* ============================================================================
   3. PROJECTION
   ========================================================================= */

#panel .b7p-proj {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

#panel .b7p-proj__top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2) var(--s-3);
}
#panel .b7p-proj__top .kv {
  flex: 1 1 auto;
  min-width: 0;
}
#panel .b7p-proj__top .kv .v {
  line-height: 1.05;
}
#panel .b7p-proj__conf {
  flex: 0 0 auto;
}

#panel .b7p-proj__note {
  padding: var(--s-2) var(--s-3);
  border-left: 2px solid var(--line-strong);
  border-radius: 0 var(--r-1) var(--r-1) 0;
  background: var(--bg-3);
  color: var(--fg-2);
}

/* --- one label / value / figure row -------------------------------------- */
#panel .b7p-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  width: 100%;
  min-height: 48px;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background: var(--bg-3);
  text-align: left;
}
#panel .b7p-line__l {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
#panel .b7p-line__k {
  font-size: var(--fs-1);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-3);
}
#panel .b7p-line__v {
  overflow: hidden;
  font-size: var(--fs-2);
  font-weight: 600;
  line-height: 1.3;
  color: var(--fg);
  text-overflow: ellipsis;
  white-space: nowrap;
}
#panel .b7p-line__r {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
#panel .b7p-line__t {
  font-family: var(--font-mono);
  font-size: var(--fs-3);
  font-weight: 600;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
}
#panel .b7p-line__s {
  font-size: var(--fs-1);
  line-height: 1.2;
  color: var(--fg-3);
  white-space: nowrap;
}

#panel .b7p-line.is-ok   .b7p-line__t { color: var(--ok); }
#panel .b7p-line.is-warn .b7p-line__t { color: var(--warn); }
#panel .b7p-line.is-bad  .b7p-line__t { color: var(--bad); }
#panel .b7p-line.is-bad {
  border-color: rgba(255, 93, 82, .38);
  background: rgba(255, 93, 82, .08);
}

/* The next-checkpoint row is a button (tap = move the map and the profile). */
#panel button.b7p-line {
  min-height: 56px;
  cursor: pointer;
  transition:
    background-color var(--dur) ease,
    border-color var(--dur) ease,
    transform var(--dur) ease;
}
#panel button.b7p-line:active { transform: translateY(1px); }
@media (hover: hover) {
  #panel button.b7p-line:hover {
    border-color: var(--line-strong);
    background: var(--surface-2);
  }
}
#panel .b7p-next {
  border-color: var(--line-strong);
}
#panel .b7p-next .b7p-line__t {
  color: var(--accent-2);
}


/* ============================================================================
   4. SPLITS
   ========================================================================= */

#panel .b7p-splits__legend {
  display: flex;
  justify-content: space-between;
  gap: var(--s-2);
  padding: var(--s-2) calc(44px + var(--s-1)) var(--s-2) var(--s-3);
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
  font-size: var(--fs-1);
  line-height: 1.3;
  color: var(--fg-3);
}
#panel .b7p-splits__legend > span {
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#panel .b7p-splits__empty {
  padding: var(--s-4);
}

#panel .b7p-split {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--line);
}
#panel .b7p-split:last-child { border-bottom: 0; }

#panel .b7p-split__main {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: 22px minmax(64px, 1fr) minmax(0, auto);
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
  min-height: 56px;
  padding: var(--s-2) var(--s-2) var(--s-2) var(--s-3);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--dur) ease;
}
@media (hover: hover) {
  #panel .b7p-split__main:hover { background: var(--surface-2); }
}

#panel .b7p-split__ord {
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--fg-3);
}

#panel .b7p-split__id {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
#panel .b7p-split__nm {
  overflow: hidden;
  font-size: var(--fs-2);
  font-weight: 600;
  line-height: 1.25;
  color: var(--fg);
  text-overflow: ellipsis;
  white-space: nowrap;
}

#panel .b7p-split__t {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  min-width: 0;
  max-width: 100%;
}
#panel .b7p-split__t > * {
  overflow: hidden;
  max-width: 100%;
  text-overflow: ellipsis;
}
#panel .b7p-split__time {
  font-family: var(--font-mono);
  font-size: var(--fs-3);
  font-weight: 600;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
}

#panel .b7p-split__sub {
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  color: var(--fg-3);
  white-space: nowrap;
}
#panel .b7p-split__id .b7p-split__sub {
  overflow: hidden;
  text-overflow: ellipsis;
}

#panel .b7p-split__more {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  align-self: stretch;
  justify-content: center;
  width: 44px;
  border-left: 1px solid var(--line);
  color: var(--fg-3);
  cursor: pointer;
  transition: background-color var(--dur) ease, color var(--dur) ease;
}
#panel .b7p-split__more svg {
  width: 18px;
  height: 18px;
}
@media (hover: hover) {
  #panel .b7p-split__more:hover {
    background: var(--surface-2);
    color: var(--accent-2);
  }
}

/* --- row states ---------------------------------------------------------- */
#panel .b7p-split.is-passed .b7p-split__ord  { color: var(--ok); }
#panel .b7p-split.is-passed .b7p-split__time { color: var(--fg); }

#panel .b7p-split.is-future .b7p-split__nm   { font-weight: 500; color: var(--fg-2); }
#panel .b7p-split.is-future .b7p-split__time { font-weight: 500; color: var(--fg-3); }
#panel .b7p-split.is-future .b7p-split__sub  { color: var(--fg-3); }

#panel .b7p-split.is-next {
  background: var(--accent-dim);
  box-shadow: inset 3px 0 0 var(--accent);
}
#panel .b7p-split.is-next .b7p-split__ord  { color: var(--accent); }
#panel .b7p-split.is-next .b7p-split__nm   { font-weight: 700; color: var(--accent-2); }
#panel .b7p-split.is-next .b7p-split__time { color: var(--accent-2); }
#panel .b7p-split.is-next .b7p-split__more { border-left-color: rgba(255, 122, 31, .35); }

#panel .b7p-split.is-risk .b7p-split__time { color: var(--bad); }

/* Scrubbing the elevation profile or tapping a row lights that checkpoint. */
#panel .b7p-split.is-hover {
  background: var(--surface-2);
  box-shadow: inset 3px 0 0 var(--fg-3);
}
#panel .b7p-split.is-hover.is-next {
  background: var(--accent-dim);
  box-shadow: inset 3px 0 0 var(--accent);
}


/* ============================================================================
   5. FIELD CONTEXT
   ========================================================================= */

#panel .b7p-fld {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

#panel .b7p-nb__head {
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
  font-size: var(--fs-1);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-3);
}

#panel .b7p-nb {
  display: flex;
  flex-direction: column;
}
/* Hidden slots always sit at the end, so an adjacent-sibling border never
   leaves a stray hairline under the last visible row. */
#panel .b7p-nb__item + .b7p-nb__item {
  border-top: 1px solid var(--line);
}

#panel .b7p-nb__row {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-2);
  width: 100%;
  min-height: 48px;
  padding: var(--s-2) 0;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--dur) ease;
}
#panel .b7p-nb__row[disabled] {
  cursor: default;
}
@media (hover: hover) {
  #panel .b7p-nb__row:not([disabled]):hover { background: var(--surface-2); }
}

#panel .b7p-nb__dir {
  font-size: var(--fs-1);
  line-height: 1;
  text-align: center;
  color: var(--fg-3);
}
#panel .b7p-nb__item.is-ahead  .b7p-nb__dir { color: var(--info); }
#panel .b7p-nb__item.is-behind .b7p-nb__dir { color: var(--fg-3); }
#panel .b7p-nb__item.is-me     .b7p-nb__dir { color: var(--accent); }

#panel .b7p-nb__who {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
#panel .b7p-nb__nm {
  overflow: hidden;
  font-size: var(--fs-2);
  font-weight: 600;
  line-height: 1.25;
  color: var(--fg);
  text-overflow: ellipsis;
  white-space: nowrap;
}
#panel .b7p-nb__bib {
  font-size: var(--fs-1);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  color: var(--fg-3);
}

#panel .b7p-nb__gap {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
}
#panel .b7p-nb__gapd {
  font-family: var(--font-mono);
  font-size: var(--fs-2);
  font-weight: 600;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  color: var(--fg-2);
}
#panel .b7p-nb__gapt {
  font-size: var(--fs-1);
  line-height: 1.2;
  color: var(--fg-3);
  white-space: nowrap;
}

#panel .b7p-nb__item.is-me {
  border-radius: var(--r-1);
  background: var(--accent-dim);
}
#panel .b7p-nb__item.is-me + .b7p-nb__item,
#panel .b7p-nb__item.is-me {
  border-top-color: transparent;
}
#panel .b7p-nb__item.is-me .b7p-nb__row { padding-inline: var(--s-2); }
#panel .b7p-nb__item.is-me .b7p-nb__nm,
#panel .b7p-nb__item.is-me .b7p-nb__gapd { color: var(--accent-2); }


/* ============================================================================
   6. WEATHER
   ========================================================================= */

#panel .b7p-wx {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

#panel .b7p-wx__now {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  min-width: 0;
}
#panel .b7p-wx__temp {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: var(--fs-6);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
}
#panel .b7p-wx__temp.is-cold,
#panel .b7p-wx__temp.is-freezing { color: var(--info); }
#panel .b7p-wx__temp.is-warm     { color: var(--warn); }

#panel .b7p-wx__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
#panel .b7p-wx__desc {
  font-size: var(--fs-4);
  font-weight: 600;
  line-height: 1.2;
  color: var(--fg);
}
#panel .b7p-wx__sub {
  font-size: var(--fs-2);
  line-height: 1.4;
  color: var(--fg-2);
}

#panel .b7p-wx__legend {
  font-size: var(--fs-1);
  line-height: 1.3;
  color: var(--fg-3);
}

#panel .b7p-wx__hours {
  display: flex;
  gap: var(--s-2);
  margin: 0 calc(-1 * var(--s-1));
  padding: 0 var(--s-1) var(--s-1);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

#panel .b7p-wxh {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 46px;
  padding: var(--s-2) var(--s-1);
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  background: var(--bg-3);
  scroll-snap-align: start;
}
/* "now" — the strip always starts at the current hour. */
#panel .b7p-wxh:first-child {
  border-color: var(--line-strong);
  background: var(--surface-2);
}
#panel .b7p-wxh__h {
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  color: var(--fg-3);
}
#panel .b7p-wxh__t {
  font-family: var(--font-mono);
  font-size: var(--fs-3);
  font-weight: 600;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
}
#panel .b7p-wxh__t.is-cold,
#panel .b7p-wxh__t.is-freezing { color: var(--info); }
#panel .b7p-wxh__t.is-warm     { color: var(--warn); }
#panel .b7p-wxh__p {
  min-height: 1.1em;
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  color: var(--fg-3);
}
#panel .b7p-wxh__p.is-wet {
  font-weight: 700;
  color: var(--info);
}
#panel .b7p-wxh__w {
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  color: var(--fg-3);
}


/* ============================================================================
   7. WIDER PANELS
   On a roomy phone in landscape or a tablet the panel gets more width; let the
   dense rows breathe instead of just stretching.
   ========================================================================= */
@media (min-width: 560px) and (max-width: 899.98px) {
  #panel .b7p-split__main { grid-template-columns: 28px minmax(96px, 1fr) minmax(0, auto); }
  #panel .b7p-split__nm   { font-size: var(--fs-3); }
  #panel .b7p-wxh         { min-width: 54px; }
}