/* pace-chart.css — "Pace Chart" view (js/pace-chart.js), reached from the
   Standings button's Standard/Expected/Playoffs/Pace toggle.

   Everything is scoped under .pace-root, the wrapper mount() creates for
   itself, so the module carries its own styling and can be mounted into any
   container. It used to be scoped under #situations-root and lean on
   situations.css's .wrap/.panel/.stat-card -- that broke the moment it moved
   out of the Schedule pill row, so the handful of shell classes it actually
   uses are defined here instead. */

.pace-root {
  font-family: 'Rubik', sans-serif;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.pace-root .wrap { max-width: 1400px; margin: 0 auto; }

.pace-root .panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.1rem 1.25rem;
  margin-top: 1.1rem;
}
.pace-root .panel:first-of-type { margin-top: 0; }
.pace-root .panel-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text3);
  padding-bottom: 0.4rem;
  margin-bottom: 0.7rem;
  border-bottom: 1px solid var(--border);
}
.pace-root .panel-sub {
  font-size: 0.72rem;
  color: var(--text2);
  margin: -0.5rem 0 0.9rem;
}
.pace-root .stat-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.8rem 1rem;
}
.pace-root .stat-card .st-label {
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text3);
  margin-bottom: 0.35rem;
}
.pace-root .stat-card .st-value {
  font-weight: 700;
  font-size: 1.55rem;
  color: var(--text);
  line-height: 1.15;
}
.pace-root .stat-card .st-sub {
  font-size: 0.68rem;
  color: var(--text2);
  margin-top: 0.25rem;
}

.pace-root .pc-wrap { padding-bottom: 1rem; }

/* ---- toolbar ------------------------------------------------------------ */
.pace-root .pc-toolbar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding: 0.75rem 0 0.9rem;
}
.pace-root .pc-pillgroup { display: flex; gap: 4px; flex-wrap: wrap; }
.pace-root .pc-tb-sep {
  width: 1px; height: 20px; background: var(--border);
}
.pace-root .pc-pill {
  font-family: 'Rubik', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.32rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text2);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.pace-root .pc-pill:hover { border-color: var(--accent); color: var(--accent); }
.pace-root .pc-pill.active {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

.pace-root .pc-empty {
  padding: 3rem 1rem;
  text-align: center;
  color: var(--text3);
  font-size: 0.85rem;
  line-height: 1.6;
}

/* ---- stat cards --------------------------------------------------------- */
.pace-root .pc-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 1.1rem;
}
@media (max-width: 900px) {
  .pace-root .pc-cards { grid-template-columns: repeat(2, 1fr); }
}

.pace-root .pc-bars-scroll { overflow-x: auto; }
.pace-root .pc-bars-inner { min-width: 620px; }

/* ---- diverging bars ------------------------------------------------------
   One shared column definition for the header rows, every team row, and the
   gridline layer behind them -- that's what keeps the gridlines registered
   with each row's bar track without any of the three knowing the others'
   widths. GP sits between the abbreviation and the track so an unequal
   games-played mid-season is visible next to the number it explains. */
.pace-root .pc-head,
.pace-root .pc-row,
.pace-root .pc-grid-layer {
  display: grid;
  grid-template-columns: 22px 20px 38px 26px minmax(170px, 1fr) 70px 34px 62px 44px;
  align-items: center;
  gap: 6px;
  padding: 1px 4px;
  border-radius: 4px;
}

.pace-root .pc-rows { position: relative; }
.pace-root .pc-grid-layer {
  position: absolute;
  inset: 0;
  align-items: stretch;
  pointer-events: none;
}
.pace-root .pc-grid-cell { position: relative; }
.pace-root .pc-head {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text3);
  padding-bottom: 6px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.pace-root .pc-head .pc-track-head { text-align: center; }
.pace-root .pc-head .pc-gp,
.pace-root .pc-head .pc-rec,
.pace-root .pc-head .pc-pts,
.pace-root .pc-head .pc-pctcol,
.pace-root .pc-head .pc-l10 { text-align: right; }

.pace-root .pc-row { cursor: pointer; }
.pace-root .pc-row:hover { background: var(--surface2); }
.pace-root .pc-row.focus {
  background: var(--highlight-bg);
  box-shadow: inset 3px 0 0 var(--oilers-orange);
}
.pace-root .pc-rank { font-size: 0.62rem; color: var(--text3); text-align: right; }
.pace-root .pc-logo {
  width: 18px; height: 18px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.pace-root .pc-abbr { font-size: 0.72rem; font-weight: 700; color: var(--text); }
.pace-root .pc-gp { font-size: 0.68rem; color: var(--text3); text-align: right; }
.pace-root .pc-rec { font-size: 0.7rem; color: var(--text2); text-align: right; }
.pace-root .pc-pts { font-size: 0.72rem; font-weight: 600; text-align: right; }
.pace-root .pc-pctcol { font-size: 0.7rem; color: var(--text2); text-align: right; white-space: nowrap; }
.pace-root .pc-l10 { font-size: 0.68rem; color: var(--text3); text-align: right; }
.pace-root .pc-l10.up { color: var(--good-text); font-weight: 600; }
.pace-root .pc-l10.down { color: var(--bad-text); font-weight: 600; }

.pace-root .pc-track { position: relative; height: 18px; }
.pace-root .pc-axis {
  position: absolute; left: 50%; top: 0; bottom: 0;
  width: 1px; background: var(--axis-line); opacity: 0.55;
}
.pace-root .pc-grid-line {
  position: absolute; top: 0; bottom: 0; width: 1px;
  background: var(--grid);
}
.pace-root .pc-head .pc-track-head { position: relative; height: 14px; }
.pace-root .pc-scale-num {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-size: 0.58rem;
  font-weight: 600;
  color: var(--text3);
  font-variant-numeric: tabular-nums;
}
.pace-root .pc-scale-num.zero { color: var(--text2); }
.pace-root .pc-scale-note {
  border-bottom: none;
  padding-bottom: 2px;
  margin-bottom: 0;
}
.pace-root .pc-scale-note .pc-track-head {
  position: static;
  height: auto;
  display: flex;
  justify-content: space-between;
  color: var(--text2);
}

.pace-root .pc-bar {
  position: absolute;
  top: 3px;
  height: 12px;
  border-radius: 2px;
  min-width: 1px;
}
.pace-root .pc-bar.pos { border-radius: 0 2px 2px 0; }
.pace-root .pc-bar.neg { border-radius: 2px 0 0 2px; }
.pace-root .pc-row.focus .pc-bar { outline: 1px solid var(--oilers-orange); outline-offset: 1px; }

.pace-root .pc-bar-val {
  position: absolute;
  top: 2px;
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 14px;
  white-space: nowrap;
}
.pace-root .pc-bar-val.pos { color: var(--good-text); }
.pace-root .pc-bar-val.neg { color: var(--bad-text); }

/* ---- head-to-head table -------------------------------------------------- */
/* Explicit width:auto -- this is a short summary block, not a full-width data
   table, and stretching it strands the numbers at the far edge. */
.pace-root .pc-h2h {
  width: auto;
  border-collapse: collapse;
  font-size: 0.74rem;
}
.pace-root .pc-h2h th,
.pace-root .pc-h2h td {
  padding: 0.3rem 1.4rem 0.3rem 0;
  text-align: left;
  white-space: nowrap;
}
.pace-root .pc-h2h th {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text3);
  border-bottom: 1px solid var(--border);
}
.pace-root .pc-h2h .num { text-align: right; font-variant-numeric: tabular-nums; }
.pace-root .pc-h2h td.good { color: var(--good-text); font-weight: 600; }
.pace-root .pc-h2h td.bad  { color: var(--bad-text);  font-weight: 600; }

/* ---- season curve -------------------------------------------------------- */
.pace-root .pc-curve-wrap { position: relative; width: 100%; }
.pace-root .pc-c-svg { display: block; max-width: 100%; }

.pace-root .pc-c-grid { stroke: var(--grid); stroke-width: 1; }
.pace-root .pc-c-grid.zero { stroke: var(--axis-line); stroke-width: 1.2; opacity: 0.7; }
.pace-root .pc-c-vgrid { stroke: var(--grid); stroke-width: 1; stroke-dasharray: 2 4; }
.pace-root .pc-c-ylab,
.pace-root .pc-c-xlab {
  font-family: 'Rubik', sans-serif;
  font-size: 9.5px;
  fill: var(--text3);
  font-variant-numeric: tabular-nums;
}
.pace-root .pc-c-ylab { text-anchor: end; }
.pace-root .pc-c-xlab { text-anchor: middle; }
.pace-root .pc-c-axis-title {
  font-family: 'Rubik', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  fill: var(--text3);
  text-anchor: middle;
}
.pace-root .pc-c-baseline { stroke: var(--axis-line); stroke-width: 1; opacity: 0.4; }
.pace-root .pc-c-base {
  font-family: 'Rubik', sans-serif;
  font-size: 10px;
  font-weight: 700;
  fill: var(--text2);
  font-variant-numeric: tabular-nums;
}
.pace-root .pc-c-line {
  fill: none;
  stroke-width: 1.7;
  stroke-linejoin: round;
  stroke-linecap: round;
  transition: opacity 0.1s;
}
.pace-root .pc-c-line.emph { stroke-width: 3.2; }
.pace-root .pc-c-line.dim { opacity: 0.13; }
.pace-root .pc-c-hit {
  fill: none;
  stroke: transparent;
  stroke-width: 9;
  pointer-events: stroke;
  cursor: pointer;
}

.pace-root .pc-curve-logos {
  position: absolute; inset: 0;
  pointer-events: none;
}
.pace-root .pc-c-chip {
  position: absolute;
  width: 18px; height: 18px;
  pointer-events: auto;
  cursor: pointer;
  transition: opacity 0.1s;
}
.pace-root .pc-c-chip.dim { opacity: 0.18; }
.pace-root .pc-c-chip.focus {
  box-shadow: 0 0 0 1.5px var(--oilers-orange);
  border-radius: 50%;
}
.pace-root .pc-c-chip-logo {
  display: block;
  width: 18px; height: 18px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* ---- footer -------------------------------------------------------------- */
.pace-root .pc-foot {
  margin-top: 1.1rem;
  padding: 0.9rem 1.1rem;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 0.72rem;
  line-height: 1.65;
  color: var(--text2);
}
.pace-root .pc-foot p + p { margin-top: 0.5rem; }