/* HYPER RED — calendar / season / results
   The season is presented as a progression rather than a plain list:
   a header strip communicating overall progress, a standalone "Next"
   module, and a connected vertical timeline for the schedule itself
   with distinct COMPLETED / NEXT / UPCOMING states. */

.season-progress-panel {
  position: relative;
  z-index: 0;
  overflow: hidden;
  margin-bottom: var(--sp-5);
}

/* Abstract route-line motif — see the HTML comment on .season-route-motif
   for why it's deliberately not a real track outline. Positioned behind
   the header text, never intercepts clicks, and stays under the 10%
   opacity ceiling from Part 9 of the brief so it never competes with the
   progress data in front of it. */
.season-route-motif {
  position: absolute;
  right: -5%;
  top: -10%;
  width: 60%;
  height: auto;
  color: var(--hr-red);
  opacity: 0.07;
  pointer-events: none;
  z-index: 0;
}

.season-progress-panel > *:not(.season-route-motif):not(.section-hero-glow) {
  position: relative;
  z-index: 1;
}

#calProgressLabel {
  display: inline-block;
  margin-top: 6px;
  color: var(--text-muted);
}

.season-progress-meta {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  margin-top: 2px;
}

.season-progress-meta .hr-num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
}

.season-progress-bar {
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--bg-3);
  overflow: hidden;
  margin: var(--sp-4) 0 var(--sp-3);
}

.season-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--hr-red-dim), var(--hr-red-bright));
  border-radius: var(--radius-pill);
  transition: width var(--dur-slow) var(--ease-standard);
}

.season-progress-ticks {
  display: flex;
  gap: 4px;
}

.calendar-progress-tick {
  flex: 1;
  height: 3px;
  border-radius: var(--radius-pill);
  background: var(--bg-3);
}

.calendar-progress-tick.done {
  background: var(--hr-red);
}

/* ---- Next event highlight ---- */
.next-event-panel {
  position: relative;
  z-index: 0;
  overflow: hidden;
  border-color: var(--border-red);
  background: var(--bg-1);
  margin-bottom: var(--sp-5);
}

.next-event-visual {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.next-event-visual-fade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, var(--bg-1) 0%, rgba(15,15,16,0.96) 32%, rgba(15,15,16,0.82) 60%, rgba(15,15,16,0.68) 100%),
    linear-gradient(160deg, rgba(227,35,43,0.1), transparent 55%);
}

.next-event-panel::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: var(--hr-red);
  z-index: 1;
}

.next-event-top,
.next-event-title,
.next-event-meta,
.next-event-actions {
  position: relative;
  z-index: 1;
}

.next-event-top {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.next-event-round {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.next-event-title {
  font-size: 22px;
  margin: 6px 0 var(--sp-3);
}

.next-event-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--hr-line);
}

.next-event-meta-item .hr-label { margin-bottom: 3px; }

.next-event-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* ---- View toggle ---- */
.calendar-view-toggle {
  display: flex;
  gap: 4px;
  background: var(--bg-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 3px;
}

/* ---- Season timeline ----
   Each month group becomes a connected rail: a vertical line runs down
   the left edge, with a status marker per event. Achieved entirely with
   positioning against the existing .cal-event-status column (no new
   wrapper elements needed from calendar.js). */
.cal-month-group {
  margin-bottom: 4px;
}

.cal-month-header {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 4px;
  cursor: pointer;
  border: none;
  border-bottom: 1px solid var(--border-subtle);
  border-radius: 0;
  background: transparent;
  appearance: none;
  font: inherit;
  color: inherit;
  text-align: left;
  min-height: var(--touch-target);
  transition: border-color var(--dur-fast) var(--ease-standard);
}

.cal-month-header:hover {
  border-bottom-color: var(--border-strong);
}

.cal-month-header-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  flex: 1;
}

.cal-month-header .chev {
  width: 14px;
  height: 14px;
  transition: transform var(--dur-fast);
  color: var(--text-muted);
}

.cal-month-header[aria-expanded="false"] .chev {
  transform: rotate(-90deg);
}

.cal-event {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 13px 6px 13px 22px;
  border-bottom: 1px solid var(--border-subtle);
}

/* Timeline rail + node. The rail is a continuous line drawn per-row
   (top+bottom half meeting at the node) so it reads as one connected
   line down the whole month group without needing a wrapping element. */
.cal-event::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--hr-line);
}

.cal-event::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 50%;
  transform: translateY(-50%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--bg-3);
  border: 1px solid var(--border-strong);
}

.cal-event.done { opacity: 0.55; }
.cal-event.done::after { background: var(--text-faint); border-color: var(--text-faint); }

.cal-event.next-race {
  background: rgba(227, 35, 43, 0.06);
  border-radius: var(--radius-sm);
  padding-top: 17px;
  padding-bottom: 17px;
}

.cal-event.next-race::after {
  background: var(--hr-red-bright);
  border-color: var(--hr-red-bright);
  box-shadow: 0 0 0 3px rgba(227, 35, 43, 0.22);
}

.cal-checkbox-wrap { flex-shrink: 0; }
.cal-checkbox-wrap input {
  width: 20px;
  height: 20px;
  accent-color: var(--hr-red);
  cursor: pointer;
}

.cal-event-body { flex: 1; min-width: 0; }

.cal-event-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.cal-event-sub {
  font-size: 12px;
  font-family: var(--font-mono);
  color: var(--text-muted);
  margin-top: 2px;
}

.cal-event-status {
  flex-shrink: 0;
}

/* ---- Result editor (admin) ---- */
.cal-result-admin,
.cal-result-editor {
  padding: 0 6px 14px 22px;
}

.cal-result-editor-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}

.cal-result-editor-row {
  display: grid;
  grid-template-columns: 56px 1fr 32px;
  gap: 6px;
}

.cal-result-editor-pos,
.cal-result-editor-names {
  height: 36px;
  background: var(--bg-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 13px;
  padding: 0 10px;
}

.cal-result-editor-remove {
  width: 32px;
  height: 36px;
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
}

.cal-result-editor-add {
  background: transparent;
  border: 1px dashed var(--border-strong);
  color: var(--text-secondary);
  font-size: 12.5px;
  padding: 8px;
  width: 100%;
  border-radius: var(--radius-sm);
  cursor: pointer;
  margin-bottom: 10px;
}

.cal-result-editor-actions { display: flex; gap: 8px; }
.cal-result-save-btn, .cal-result-cancel-btn {
  height: 36px;
  padding: 0 14px;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}
.cal-result-save-btn { background: var(--hr-red); color: #fff; border: none; }
.cal-result-cancel-btn { background: transparent; border: 1px solid var(--border-subtle); color: var(--text-secondary); }

/* ---- Results classification ---- */
.results-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 6px 14px 22px;
}

.result-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  background: var(--bg-2);
}

.result-pos {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 15px;
  width: 34px;
  text-align: center;
  color: var(--text-secondary);
}

.result-names { font-size: 13.5px; color: var(--text-primary); }

.result-row.medal-gold .result-pos { color: #e3c02e; }
.result-row.medal-silver .result-pos { color: #c9ccd1; }
.result-row.medal-bronze .result-pos { color: #d08a4f; }
.result-row.medal-gold { background: rgba(227, 192, 46, 0.08); }
.result-row.medal-silver { background: rgba(201, 204, 209, 0.07); }
.result-row.medal-bronze { background: rgba(208, 138, 79, 0.07); }

/* ===== Real circuit season-map system ===== */
.season-route-motif { height: 170px; }
.season-route-motif .track-line { stroke-width: 2.2; }
.next-event-track { position:absolute; right:3%; top:2%; width:46%; height:96%; opacity:.34; z-index:0; }
.next-event-track .track-line { stroke-width:2.5; }
.next-event-panel.season-highlight { border-color:rgba(227,35,43,.72); box-shadow:inset 0 0 0 1px rgba(227,35,43,.12), 0 18px 60px rgba(0,0,0,.28); }
.cal-event-track { width:76px; height:46px; flex:0 0 76px; opacity:.46; }
.cal-event-track .track-shadow { stroke-width:7; }
.cal-event-track .track-line { stroke-width:2; }
.cal-event.done .cal-event-track { opacity:.24; }
.cal-event.next-race .cal-event-track { opacity:.92; }
.cal-event.season-highlight { border-left:1px solid rgba(227,35,43,.34); }
.cal-event.season-highlight .cal-event-title::after { content:"Season Highlight"; margin-left:8px; color:var(--hr-red-bright); font:700 9px var(--font-display); letter-spacing:.09em; text-transform:uppercase; }

/* Class-aware results */
.cal-result-editor-row.class-aware { grid-template-columns:64px 64px 130px minmax(150px,1.5fr) minmax(120px,1fr) minmax(120px,1fr) 32px; }
.cal-result-editor-row.class-aware select,
.cal-result-editor-row.class-aware input { min-width:0; height:36px; background:var(--bg-2); border:1px solid var(--border-subtle); border-radius:var(--radius-sm); color:var(--text-primary); padding:0 9px; font-size:12px; }
.result-row { display:grid; grid-template-columns:42px 46px 92px 1fr; }
.result-classpos { font:700 11px var(--font-mono); color:var(--hr-red-bright); }
.result-class { font:700 10px var(--font-display); text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); }
.result-names { display:flex; flex-direction:column; gap:2px; }
.result-names small { color:var(--text-muted); font-size:11px; }
.result-names em { color:var(--text-faint); font-size:11px; font-style:normal; }
.season-results-summary { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.season-results-summary span { padding:8px 11px; border:1px solid var(--border-subtle); border-radius:var(--radius-sm); color:var(--text-muted); font-size:11px; }
.season-results-summary strong { color:var(--text-primary); margin-right:4px; font-family:var(--font-mono); }