/* Season plan dialog and week-card block */
:root {
  --phase-base:  #A8D0F7;
  --phase-build: #E5C99A;
  --phase-peak:  #F2A6C3;
  --phase-taper: #A8E6CF;
}
@media (prefers-color-scheme: dark) {
  :root {
    --phase-base:  #5B8FC7;
    --phase-build: #B89A6A;
    --phase-peak:  #C47996;
    --phase-taper: #6BB89A;
  }
}
/* The app's own Theme setting wins over the OS either way (web/check-theme-tokens.mjs). */
html[data-theme="light"] { --phase-base: #A8D0F7; --phase-build: #E5C99A; --phase-peak: #F2A6C3; --phase-taper: #A8E6CF; }
html[data-theme="dark"] { --phase-base: #5B8FC7; --phase-build: #B89A6A; --phase-peak: #C47996; --phase-taper: #6BB89A; }
.season-dialog {
  width: min(1040px, calc(100vw - 32px));
  max-width: 1040px;
  max-height: calc(100dvh - 32px);
  border: var(--stroke-hairline) solid var(--separator);
  border-radius: var(--radius-lg);
  background: var(--bg-raised);
  color: var(--ink);
  padding: 0;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}
.season-dialog::backdrop {
  background: rgba(0, 0, 0, .35);
}
.season-dialog[open] {
  display: flex;
  flex-direction: column;
}
.season-sheet,
.season-dialog form.season-sheet {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
.season-sheet header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  border-bottom: var(--stroke-hairline) solid var(--separator);
  flex: none;
}
.season-sheet header b {
  font-size: var(--font-headline);
  font-weight: var(--weight-semibold);
}
.season-sheet header button {
  background: transparent;
  border: 0;
  color: var(--accent);
  font-size: var(--font-body);
  font-weight: var(--weight-medium);
  cursor: pointer;
  padding: 6px 10px;
  border-radius: var(--radius-button);
}
.season-sheet header button:hover {
  background: var(--chip-unselected);
}
.season-sheet header button:focus {
  outline: none;
}
.season-sheet header button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.season-sheet .sp-body {
  min-height: 0;
  overflow-y: auto;
  padding: 16px;
  flex: 1;
}

/* Settings-style grouped sections: small grey header above a white card */
.sp-group {
  margin-bottom: 12px;
}
.sp-group > h3,
.sp-group h3 {
  margin: 0 0 6px;
  padding: 0 2px;
  font-size: var(--font-caption);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ink-tertiary);
}
.sp-group .sp-caption {
  font-size: var(--font-caption);
  color: var(--ink-tertiary);
  margin: 6px 2px 0;
}
.sp-group .sp-card {
  margin-bottom: 0;
}
.sp-card {
  background: var(--card);
  border: var(--stroke-hairline) solid var(--separator);
  border-radius: var(--radius-md);
  padding: 14px;
  margin-bottom: 12px;
}
.sp-card h3 {
  margin: 0 0 10px;
  font-size: var(--font-caption);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ink-tertiary);
}
.sp-caption {
  font-size: var(--font-caption);
  color: var(--ink-tertiary);
  margin: 8px 0 0;
}

.sp-race-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: var(--stroke-hairline) solid var(--separator);
  background: transparent;
  width: 100%;
  text-align: left;
  border: 0;
  border-radius: var(--radius-field);
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.sp-race-row:hover {
  background: var(--chip-unselected);
}
.sp-race-row:last-child {
  border-bottom: 0;
}
.sp-race-icon {
  font-size: 20px;
  line-height: 1;
  flex: none;
}
.sp-race-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
}
.sp-race-info b {
  font-weight: var(--weight-semibold);
}
.sp-race-info span {
  color: var(--ink-secondary);
  font-size: var(--font-caption);
}
.sp-chevron {
  color: var(--ink-tertiary);
  font-size: 18px;
  flex: none;
}
.sp-race-remove {
  margin-left: auto;
  background: transparent;
  border: 0;
  color: var(--destructive);
  font-size: 18px;
  cursor: pointer;
  width: 28px;
  height: 28px;
  border-radius: 50%;
}
.sp-race-remove:hover {
  background: rgba(255, 59, 48, 0.1);
}
.sp-race-remove-link {
  display: inline-block;
  margin-top: 8px;
  background: transparent;
  border: 0;
  color: var(--destructive);
  font-size: var(--font-caption);
  cursor: pointer;
  padding: 0;
}
.sp-row-action {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  border: 0;
  border-top: var(--stroke-hairline) solid var(--separator);
  border-radius: var(--radius-field);
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-size: var(--font-body);
  font-weight: var(--weight-medium);
  cursor: pointer;
  text-align: left;
}
.sp-row-action:hover {
  background: var(--chip-unselected);
}
.sp-row-action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 16px;
  font-weight: var(--weight-bold);
  line-height: 1;
}

.sp-manual-race,
.sp-manual-brace {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.sp-manual-race .sp-manual-name,
.sp-manual-brace .sp-manual-name {
  flex: 1 1 140px;
  min-height: var(--control-height);
  padding: 0 10px;
  border: var(--stroke-hairline) solid var(--separator);
  border-radius: var(--radius-field);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
}
.sp-manual-race ox-menu,
.sp-manual-race ox-date,
.sp-manual-race ox-number,
.sp-manual-brace ox-menu,
.sp-manual-brace ox-date,
.sp-manual-brace ox-number {
  flex: 0 0 auto;
  width: auto;
}
.sp-add-brace {
  width: 100%;
  justify-content: flex-start;
  border-bottom: 0;
}
.sp-add-brace .sp-race-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent) !important;
  font-size: 16px;
  font-weight: var(--weight-bold);
}
.sp-brace-picker,
.sp-manual-brace {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.sp-load-options {
  display: flex;
  flex-direction: column;
}
.sp-load-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  border: 0;
  border-bottom: var(--stroke-hairline) solid var(--separator);
  border-radius: var(--radius-field);
  background: transparent;
  cursor: pointer;
  width: 100%;
  font: inherit;
  text-align: left;
  color: var(--ink);
}
.sp-load-row:hover {
  background: var(--chip-unselected);
}
.sp-load-row[data-selected="true"] > b {
  color: var(--accent);
}
.sp-load-row > span {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sp-load-row > span small {
  color: var(--ink-tertiary);
  font-size: var(--font-caption);
}
.sp-load-row > b {
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-semibold);
}
.sp-start-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-top: var(--stroke-hairline) solid var(--separator);
}
.sp-start-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.sp-start-label b {
  font-weight: var(--weight-semibold);
  color: var(--ink);
}
.sp-start-label small {
  color: var(--ink-tertiary);
  font-size: var(--font-caption);
}
.sp-start-row .sp-start-input {
  width: 120px;
}

.sp-stepper {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: none;
}
.sp-stepper button {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: var(--stroke-hairline) solid var(--separator);
  background: var(--card);
  color: var(--accent);
  font-size: 18px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0 0 2px;
}
.sp-stepper button:hover {
  background: var(--chip-unselected);
}
.sp-stepper button:active {
  background: var(--accent);
  color: var(--on-accent);
}
.sp-stepper-value {
  min-width: 44px;
  text-align: center;
  font-size: var(--font-body);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.sp-rhythm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.sp-segmented-toggle {
  display: flex;
  gap: 2px;
  padding: 2px;
  background: var(--chip-unselected);
  border-radius: var(--radius-pill);
}
.sp-segmented-toggle button {
  flex: 1;
  padding: 4px 12px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink-secondary);
  cursor: pointer;
  font-size: var(--font-footnote);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  transition: background .12s ease, color .12s ease, box-shadow .12s ease;
}
.sp-segmented-toggle button:hover:not([aria-selected="true"]) {
  color: var(--ink);
}
.sp-segmented-toggle button[aria-selected="true"] {
  background: var(--card);
  color: var(--ink);
  font-weight: var(--weight-semibold);
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
}
.sp-segmented-toggle.sp-segmented-small {
  flex: none;
  width: auto;
}
.sp-segmented-toggle.sp-segmented-small button {
  flex: none;
}

.sp-phases-strip {
  margin-top: 8px;
}
.sp-phase-strip-bar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.sp-phase-strip-bar {
  display: flex;
  gap: 0;
  border-radius: var(--radius-field);
  overflow: hidden;
}
.sp-phase-block {
  flex: 1;
  padding: 8px 10px;
  font-size: var(--font-caption);
  font-weight: var(--weight-semibold);
  text-transform: capitalize;
  text-align: center;
  color: rgba(0,0,0,0.75);
}
.sp-phase-block.sp-phase-base { background: var(--phase-base); }
.sp-phase-block.sp-phase-build { background: var(--phase-build); }
.sp-phase-block.sp-phase-peak { background: var(--phase-peak); }
.sp-phase-block.sp-phase-taper { background: var(--phase-taper); }
.sp-phase-empty {
  padding: 10px 0;
  color: var(--ink-tertiary);
  font-size: var(--font-caption);
}

/* View header */
.sp-view-title {
  margin-bottom: 12px;
}
.sp-view-title h2 {
  margin: 0 0 4px;
  font-size: var(--font-title2);
}
.sp-view-title p {
  margin: 0;
  color: var(--ink-secondary);
  font-size: var(--font-body);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sp-view-figures {
  display: flex;
  align-items: stretch;
  gap: 0;
  flex-wrap: nowrap;
  padding: 0;
  overflow: hidden;
}
.sp-view-figures > span {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 12px 8px;
  border-left: var(--stroke-hairline) solid var(--separator);
}
.sp-view-figures > span:first-child {
  border-left: none;
}
.sp-view-figures b {
  font-size: var(--font-title3);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.sp-view-figures small {
  font-size: var(--font-caption);
  color: var(--ink-secondary);
  text-align: center;
}
@media (max-width: 640px) {
  .sp-view-title {
    margin-bottom: 10px;
  }
  .sp-view-title p {
    white-space: normal;
  }
  .sp-view-figures > span {
    padding: 10px 6px;
  }
}

/* Weeks chart */
.sp-chart-card {
  background: var(--card);
  border: var(--stroke-hairline) solid var(--separator);
  border-radius: var(--radius-md);
  padding: 12px;
  margin-bottom: 12px;
}
.sp-chart-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.sp-chart-title {
  font-size: var(--font-subheadline);
  font-weight: var(--weight-semibold);
}
.sp-chart-chips {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
}
.sp-rhythm-badge,
.sp-fitness-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: var(--radius-field);
  background: var(--chip-unselected);
  border: var(--stroke-hairline) solid var(--separator);
  font-size: var(--font-caption);
  font-weight: var(--weight-semibold);
  color: var(--ink-secondary);
}
.sp-weeks-svg {
  width: 100%;
  height: auto;
  max-height: 260px;
  display: block;
}
.sp-phase-band {
  opacity: 0.55;
}
.sp-phase-band.sp-phase-base { fill: var(--phase-base); }
.sp-phase-band.sp-phase-build { fill: var(--phase-build); }
.sp-phase-band.sp-phase-peak { fill: var(--phase-peak); }
.sp-phase-band.sp-phase-taper { fill: var(--phase-taper); }
.sp-phase-band-label {
  font-size: 12px;
  font-weight: var(--weight-semibold);
  text-transform: capitalize;
  fill: var(--ink);
}
.sp-grid-line {
  stroke: var(--separator);
  stroke-width: 1;
}
.sp-y-label {
  font-size: 12px;
  fill: var(--ink-secondary);
  font-variant-numeric: tabular-nums;
}
.sp-x-label {
  font-size: 11px;
  fill: var(--ink-secondary);
}
.sp-today-pill {
  fill: var(--accent);
}
.sp-today-pill-label {
  font-size: 9px;
  font-weight: var(--weight-bold);
  fill: var(--on-accent);
}
.sp-week-group {
  cursor: pointer;
}
.sp-week-group:hover .sp-bar-target,
.sp-week-group:hover .sp-bar-scheduled,
.sp-week-group:hover .sp-bar-done {
  filter: brightness(1.1);
}
.sp-bar-target {
  fill: var(--ink-tertiary);
}
.sp-bar-scheduled {
  fill: var(--accent);
  opacity: 0.55;
}
.sp-bar-done {
  fill: var(--accent);
}
.sp-recovery-chip {
  fill: var(--chip-unselected);
  stroke: var(--separator);
  stroke-width: 1;
}
.sp-recovery-label {
  font-size: 9px;
  font-weight: var(--weight-bold);
  fill: var(--ink-secondary);
}
.sp-race-marker {
  stroke: #fff;
  stroke-width: 1.5;
}
.sp-race-b { fill: #555; }
.sp-race-a { fill: var(--attention); }
.sp-race-marker-label {
  font-size: 8px;
  font-weight: var(--weight-bold);
  fill: #fff;
}
.sp-current-column {
  fill: color-mix(in srgb, var(--accent) 12%, transparent);
}
.sp-phase-counts {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 10px 0 8px;
  font-size: var(--font-caption);
  color: var(--ink-secondary);
}
.sp-phase-counts {
  color: var(--ink-secondary);
}
.sp-phase-counts span {
  font-weight: var(--weight-semibold);
}
.sp-phase-count-dot { font-weight: var(--weight-regular); }
.sp-phase-count-weeks { font-weight: var(--weight-regular); }
.sp-chart-legend {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-size: var(--font-caption);
  color: var(--ink-secondary);
}
.sp-chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.sp-chart-legend i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  font-size: 8px;
  font-style: normal;
  font-weight: var(--weight-bold);
}
.sp-legend-target { background: var(--ink-tertiary); }
.sp-legend-scheduled { background: var(--accent); opacity: 0.55; }
.sp-legend-done { background: var(--accent); }
.sp-legend-recovery-chip {
  background: var(--chip-unselected);
  color: var(--ink-secondary);
  border: var(--stroke-hairline) solid var(--separator);
}
.sp-chart-footnote {
  font-size: var(--font-caption);
  color: var(--ink-secondary);
  margin: 6px 0 0;
}

/* Form curve */
.sp-curve-card {
  background: var(--card);
  border: var(--stroke-hairline) solid var(--separator);
  border-radius: var(--radius-md);
  padding: 12px;
  margin-bottom: 12px;
}
.sp-curve-header {
  text-align: left;
  font-size: var(--font-caption);
  color: var(--ink-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.sp-curve {
  width: 100%;
  height: auto;
  max-height: 220px;
  display: block;
}
.sp-minus30-band {
  fill: rgba(255, 59, 48, 0.08);
}
.sp-form-line {
  fill: none;
  stroke-width: 2;
}
.sp-form-history {
  stroke: var(--accent);
}
.sp-form-projection {
  stroke: var(--accent);
  stroke-dasharray: 5 5;
}
.sp-race-day-line {
  stroke: var(--ink-secondary);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}
.sp-curve-legend {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 10px 0 6px;
  font-size: var(--font-caption);
  color: var(--ink-secondary);
}
.sp-curve-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.sp-curve-legend i {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  font-style: normal;
}
.sp-legend-history { background: var(--accent); }
.sp-legend-projection { background: var(--accent); opacity: 0.55; }
.sp-legend-raceday { background: var(--ink-secondary); }
.sp-legend-minus30 { background: rgba(255, 59, 48, 0.25); }
.sp-curve-footnote {
  font-size: var(--font-caption);
  color: var(--ink-tertiary);
  margin: 6px 0 0;
}
.sp-hint {
  font-size: var(--font-caption);
  color: var(--ink-tertiary);
  margin: 0;
}
.sp-warning {
  font-size: var(--font-caption);
  color: var(--attention);
  margin: 0 0 6px;
}

/* Week card block */
.season-week-block {
  border-top: var(--stroke-hairline) solid var(--separator);
}
.sp-block-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.sp-block-header .t {
  font-size: var(--font-subheadline);
  font-weight: var(--weight-semibold);
  color: var(--ink);
}
.sp-block-rows {
  margin-bottom: 4px;
}
.sp-block-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: var(--font-body);
}
.sp-block-row span {
  color: var(--ink-secondary);
}
.sp-block-row b {
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-semibold);
  color: var(--ink);
}
.sp-block-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: var(--stroke-hairline) solid var(--separator);
  font-size: var(--font-body);
  color: var(--ink-secondary);
  white-space: nowrap;
}
.sp-block-footer > span {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sp-block-footer .sp-card-link {
  flex: none;
  width: auto;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--accent);
  font-weight: var(--weight-semibold);
  cursor: pointer;
}
.sp-note {
  font-size: var(--font-caption);
  color: var(--ink-secondary);
  margin: 6px 0;
}
.sp-choices {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.sp-choices button {
  flex: 1;
  padding: 8px 10px;
  border-radius: var(--radius-field);
  border: 0;
  background: var(--accent);
  color: #fff;
  font-weight: var(--weight-medium);
  cursor: pointer;
}
.sp-card-link {
  width: 100%;
  margin-top: 8px;
  padding: 8px;
  border-radius: var(--radius-field);
  border: var(--stroke-hairline) solid var(--separator);
  background: transparent;
  color: var(--accent);
  font-weight: var(--weight-medium);
  cursor: pointer;
  text-align: left;
}

@media (max-width: 1179px) {
  .season-dialog {
    width: 100vw;
    max-width: 100vw;
    max-height: 90dvh;
    margin: auto 0 0 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
  .sp-weeks-svg {
    height: auto;
    max-height: none;
  }
  .sp-view-figures > div {
    flex: 1 1 80px;
    padding: 8px 6px;
  }
  .sp-view-figures b {
    font-size: var(--font-body);
  }
}

@media (max-width: 430px) {
  .sp-segmented-toggle button {
    padding: 6px 10px;
    font-size: var(--font-caption);
  }
}

/* Fill following weeks */
.season-fill-dialog {
  width: min(520px, calc(100vw - 32px));
  max-width: 520px;
}
.sp-block-links {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
}
.sp-fill-from {
  font-size: var(--font-caption);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-tertiary);
  margin-bottom: 12px;
}
.sp-fill-empty {
  text-align: center;
  padding: 48px 16px;
}
.sp-fill-empty-icon {
  font-size: 40px;
  margin-bottom: 12px;
}
.sp-fill-empty-title {
  font-size: var(--font-title3);
  font-weight: var(--weight-semibold);
  margin-bottom: 4px;
}
.sp-fill-empty p {
  color: var(--ink-secondary);
  font-size: var(--font-body);
  margin: 0;
}
.sp-fill-sessions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sp-fill-session-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: var(--stroke-hairline) solid var(--separator);
}
.sp-fill-session-row:last-child {
  border-bottom: none;
}
.sp-fill-session-icon {
  font-size: 18px;
  line-height: 1;
  flex: none;
}
.sp-fill-session-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.sp-fill-session-info b {
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sp-fill-session-info span {
  font-size: var(--font-caption);
  color: var(--ink-secondary);
}
.sp-fill-toggle button {
  padding: 5px 10px;
  font-size: var(--font-caption);
}
.sp-fill-until {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sp-fill-until-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 10px;
  border: var(--stroke-hairline) solid var(--separator);
  border-radius: var(--radius-field);
  background: var(--bg-raised);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}
.sp-fill-until-row.active {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.08);
}
.sp-fill-until-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sp-fill-until-text b {
  font-weight: var(--weight-semibold);
}
.sp-fill-until-text span {
  font-size: var(--font-caption);
  color: var(--ink-secondary);
}
.sp-fill-check {
  color: var(--accent);
  font-weight: var(--weight-bold);
  flex: none;
}
.sp-fill-stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  padding: 10px;
  border: var(--stroke-hairline) solid var(--separator);
  border-radius: var(--radius-field);
  background: var(--bg-raised);
}
.sp-fill-stepper > span:first-child {
  color: var(--ink-secondary);
}
.sp-fill-stepper > b {
  flex: 1;
  text-align: center;
  font-weight: var(--weight-semibold);
}
.sp-fill-stepper .icon-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: var(--stroke-hairline) solid var(--separator);
  background: var(--bg);
  color: var(--ink);
  font-weight: var(--weight-bold);
  cursor: pointer;
}
.sp-fill-preview {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sp-fill-preview-head {
  display: grid;
  grid-template-columns: 1fr minmax(56px, auto) minmax(64px, auto) 44px;
  gap: 8px;
  padding: 6px 10px;
  font-size: var(--font-caption);
  color: var(--ink-tertiary);
  border-bottom: var(--stroke-hairline) solid var(--separator);
  white-space: nowrap;
}
.sp-fill-preview-head span:nth-child(2),
.sp-fill-preview-head span:nth-child(3),
.sp-fill-preview-head span:nth-child(4) {
  text-align: right;
}
.sp-fill-preview-week {
  border: var(--stroke-hairline) solid var(--separator);
  border-radius: var(--radius-md);
  background: var(--card);
  overflow: hidden;
}
.sp-fill-preview-row {
  display: grid;
  grid-template-columns: 1fr minmax(56px, auto) minmax(64px, auto) 44px;
  gap: 8px;
  align-items: center;
  width: 100%;
  padding: 10px;
  border: none;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}
.sp-fill-preview-row.recovery {
  background: var(--chip-unselected);
}
.sp-fill-preview-row span {
  display: flex;
  flex-direction: column;
}
.sp-fill-preview-row span.num {
  align-items: flex-end;
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-semibold);
}
.sp-fill-preview-row span.num.sp-fill-target {
  color: var(--ink-tertiary);
}
.sp-fill-preview-row small {
  font-size: var(--font-caption);
  color: var(--ink-secondary);
}
.sp-fill-short {
  color: var(--attention);
}
.season-sheet header button.sp-fill-apply {
  color: var(--attention);
}
.sp-fill-over {
  color: var(--destructive);
}
.sp-fill-chevron {
  display: inline-block;
  margin-left: 4px;
  transition: transform 0.15s ease;
}
.sp-fill-preview-row.expanded .sp-fill-chevron {
  transform: rotate(90deg);
}
.sp-fill-preview-sessions {
  display: none;
  flex-direction: column;
  border-top: var(--stroke-hairline) solid var(--separator);
  padding: 8px 10px;
}
.sp-fill-preview-sessions.open {
  display: flex;
}
.sp-fill-preview-session {
  display: grid;
  grid-template-columns: 1fr auto 24px;
  gap: 8px;
  align-items: center;
  padding: 6px 0;
  font-size: var(--font-body);
}
.sp-fill-preview-session-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.sp-fill-preview-session-info b {
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sp-fill-preview-session-info small {
  font-size: var(--font-caption);
  color: var(--ink-secondary);
}
.sp-fill-session-dur {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
@media (max-width: 1179px) {
  .season-fill-dialog {
    width: 100vw;
    max-width: 100vw;
    max-height: 90dvh;
    margin: auto 0 0 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
}
@media (max-width: 430px) {
  .sp-fill-preview-head,
  .sp-fill-preview-row {
    grid-template-columns: 1fr minmax(44px, auto) minmax(56px, auto) 38px;
  }
}

/* Approved compact Season section, inside Done vs planned. */
.season-week-block { margin-top: 10px; padding-top: 8px; background: none; border-radius: 0; font-size: var(--font-caption); }
.season-week-block .sp-block-header { display:block; margin-bottom:5px; font-size:var(--font-caption2); color:var(--ink-secondary); }
.sp-block-figures { white-space:nowrap; font-size:inherit; font-variant-numeric:tabular-nums; }
.season-week-block .sp-block-footer { margin-top:5px; padding-top:0; border:0; display:block; font-size:inherit; }
.season-week-block .sp-block-links { display:flex; justify-content:space-between; gap:8px; margin-top:5px; }
.season-week-block .sp-card-link { font-size:inherit; }

.sp-week-hit{fill:transparent;pointer-events:all}.sp-week-group{cursor:pointer;outline:none}.sp-week-group.sp-selected .sp-week-hit{fill:var(--accent,#087cff);fill-opacity:.12;stroke:var(--accent,#087cff);stroke-width:1}.sp-week-readout,.sp-form-readout{font-size:12px;line-height:1.6;min-height:2em;margin:8px 0;color:var(--ink)}.sp-read-line{stroke:var(--accent,#087cff);stroke-width:1;stroke-dasharray:3 3;pointer-events:none}.sp-curve{touch-action:pan-y}
.sp-week-readout .sp-card-link{display:inline-block;width:auto;border:0;background:none;padding:4px 0;border-radius:0;text-align:left}

/* Use the card width, including narrow desktop sidebars, rather than viewport width. */
.season-week-block { container-type: inline-size; }
.sp-gap-full, .sp-gap-compact { color: var(--ink-secondary); }
.sp-gap-compact { display: none; }
@container (max-width: 430px) {
  .sp-gap-full { display: none; }
  .sp-gap-compact { display: inline; }
}
@container (max-width: 310px) {
  .sp-block-figures { font-size: 10px; }
}

/* Recovery review uses the existing preview table, with room for signed deltas. */
#season-recovery .sp-fill-preview-head,
#season-recovery .sp-fill-preview-row {
  grid-template-columns: minmax(0, 1fr) minmax(44px, auto) minmax(44px, auto) minmax(48px, auto);
  gap: 12px;
}
#season-recovery .sp-fill-preview-row { cursor: default; }

/* Race-day annotation stays inside the plot's full final week. */
.sp-race-line{stroke:var(--accent);stroke-width:2;pointer-events:none}
.sp-race-line-b{stroke-opacity:.45;stroke-width:1;stroke-dasharray:4 3}
.sp-race-week{stroke:var(--accent);stroke-width:1.5}
.sp-goal-label{box-sizing:border-box;width:100%;padding-right:2px;display:flex;align-items:center;justify-content:flex-end;gap:5px;height:22px;color:var(--accent);font-size:12px;font-weight:var(--weight-semibold);white-space:nowrap}
.sp-goal-label svg{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8}
.sp-goal-label span{overflow:hidden;text-overflow:ellipsis;min-width:0}
.sp-race-b-label{fill:var(--accent);opacity:.65;font-size:11px}

.fc-card{position:relative;--fc-fit:#2f6fdf;--fc-fat:#a24bd6;--fc-red:255,59,48;--fc-amber:230,140,0;--fc-green:36,170,80;--fc-grey:142,142,147}
html[data-theme="dark"] .fc-card{--fc-fit:#6ea8ff;--fc-fat:#c58af0;--fc-red:255,90,80;--fc-amber:255,176,50;--fc-green:70,210,110}
.fc-curve{max-height:300px}
.fc-band.fc-z-overload{fill:rgba(var(--fc-red),.12)}.fc-band.fc-z-building{fill:rgba(var(--fc-amber),.08)}.fc-band.fc-z-fresh{fill:rgba(var(--fc-grey),.05)}.fc-band.fc-z-ready{fill:rgba(var(--fc-green),.10)}
.fc-band-label{font-size:10.5px;font-weight:600;letter-spacing:.02em}
.fc-band-label.fc-z-overload,.fc-zone-word.fc-z-overload{fill:rgb(var(--fc-red));color:rgb(var(--fc-red))}
.fc-band-label.fc-z-building,.fc-zone-word.fc-z-building{fill:rgb(var(--fc-amber));color:rgb(var(--fc-amber))}
.fc-band-label.fc-z-fresh,.fc-zone-word.fc-z-fresh,.fc-zone-word.fc-z-vfresh{fill:var(--ink-secondary);color:var(--ink-secondary)}
.fc-band-label.fc-z-ready,.fc-zone-word.fc-z-ready{fill:rgb(var(--fc-green));color:rgb(var(--fc-green))}
.fc-band-label{opacity:.85}.fc-zone-word{font-weight:600}
.fc-form-line,.fc-fit-line,.fc-fat-line{fill:none;stroke-linejoin:round}
.fc-form-line{stroke:var(--lifebuoy-band);stroke-width:2.2}.fc-fit-line{stroke:var(--fc-fit);stroke-width:2}.fc-fat-line{stroke:var(--fc-fat);stroke-width:1.4;opacity:.6}
.fc-proj{stroke-dasharray:5 5}
.fc-fit-label{fill:var(--fc-fit)!important}.fc-axis-title{font-size:10px;font-weight:600}
.fc-today-dot{fill:var(--lifebuoy-band);stroke:var(--card);stroke-width:2}.fc-today-label{font-weight:600}
.fc-flag{fill:var(--ink);stroke:var(--ink);stroke-width:1.4;stroke-linejoin:round}
.fc-race-name{font-size:11.5px;font-weight:700;fill:var(--ink)}
.fc-race-dot{fill:var(--lifebuoy-band);stroke:var(--card);stroke-width:2}.fc-fit-dot{fill:var(--fc-fit);stroke:var(--card);stroke-width:2}
.fc-callout rect{fill:var(--card);stroke:var(--separator);stroke-width:1}
.fc-callout text{font-size:11px;fill:var(--ink-secondary)}.fc-callout .fc-c-strong{font-weight:700;fill:var(--ink)}
.fc-read{stroke:var(--card);stroke-width:2;pointer-events:none}.fc-read-form{fill:var(--lifebuoy-band)}.fc-read-fit{fill:var(--fc-fit)}.fc-read-fat{fill:var(--fc-fat)}
.fc-status{font-size:13px;color:var(--ink-secondary);margin:-2px 0 8px}
.fc-readout{min-height:3.2em}.fc-meaning{color:var(--ink-secondary)}
.fc-info{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-left:6px;border-radius:50%;border:1.5px solid var(--accent);color:var(--accent);background:none;font:italic 700 11px/1 Georgia,serif;cursor:pointer;vertical-align:1px;padding:0}
.fc-info.on{background:var(--accent);color:var(--card)}
.fc-sw{display:inline-block;width:14px!important;height:3px!important;border-radius:2px!important;vertical-align:middle;margin-right:2px}
.fc-sw-form{background:var(--lifebuoy-band)}.fc-sw-fit{background:var(--fc-fit)}.fc-sw-fat{background:var(--fc-fat);opacity:.7}
.fc-toggle{display:inline-flex;align-items:center;gap:5px;font:inherit;color:var(--ink-secondary);background:none;border:1px solid var(--separator);border-radius:999px;padding:2px 9px 2px 7px;cursor:pointer}
.fc-toggle:not(.on) .fc-sw-fat{background:none;border:1px dashed var(--fc-fat);height:1px!important}
.fc-toggle.on{border-color:var(--fc-fat);color:var(--ink)}
.fc-legend-note{color:var(--ink-tertiary)}
.fc-popover{position:absolute;z-index:5;top:40px;left:12px;width:440px;background:var(--bg-raised);border:1px solid var(--separator);border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.35);padding:14px 16px;font-size:13px;line-height:1.45;color:var(--ink)}
.fc-popover p{margin:0 0 8px}.fc-popover .fc-sw{margin-right:6px}.fc-pop-title{display:block;font-size:15px;margin-bottom:10px}
.fc-pop-zones{display:grid;gap:5px;margin:10px 0;padding:10px 0;border-top:1px solid var(--separator);border-bottom:1px solid var(--separator)}
.fc-pop-zones div{display:grid;grid-template-columns:14px 86px 82px 1fr;align-items:center;gap:6px;font-size:12px}
.fc-pop-zones em{font-style:normal;color:var(--ink-secondary)}.fc-pop-zones span{color:var(--ink-secondary);font-variant-numeric:tabular-nums}
.fc-pop-sw{width:12px;height:12px;border-radius:3px}.fc-pop-sw.fc-z-overload{background:rgba(var(--fc-red),.45)}.fc-pop-sw.fc-z-building{background:rgba(var(--fc-amber),.4)}.fc-pop-sw.fc-z-fresh{background:rgba(var(--fc-grey),.3)}.fc-pop-sw.fc-z-ready{background:rgba(var(--fc-green),.45)}
.fc-pop-foot{color:var(--ink-secondary);font-size:12px;margin:0!important}
.fc-callout-line{font-size:11.5px;fill:var(--ink-secondary)}.fc-callout-line .fc-c-strong{fill:rgb(var(--fc-green))}
.fc-band-label{paint-order:stroke;stroke:var(--card);stroke-width:3px}
/* Approved Form chart: text annotations stay readable on narrow cards. */
.fc-race-callout{display:flex;justify-content:flex-end;gap:4px 12px;flex-wrap:wrap;font-size:12px;text-align:right;margin:8px 0 0;position:relative;z-index:1;pointer-events:none}
.fc-race-callout b{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fc-race-callout span{white-space:nowrap}
.fc-popover[hidden]{display:none}.fc-info:focus-visible,.fc-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.fc-toggle{min-height:32px;border-radius:999px;cursor:pointer}.fc-expanded{position:fixed!important;inset:20px;z-index:20;overflow:auto;background:var(--bg-raised)!important}
@media(max-width:600px){.fc-race-callout{margin-bottom:0}.fc-popover{max-width:100%;left:0;right:0;width:auto}.fc-pop-zones>div{grid-template-columns:14px 1fr auto}.fc-pop-zones em{grid-column:2 / -1}.fc-legend{gap:8px}.fc-expanded{inset:8px}.fc-curve{min-height:280px}}

.fc-expanded .fc-curve{max-height:65vh;min-height:360px}

/* Approved Season week block, Option A (2 Nov). Fits the real sidebar card at every width (3 Nov): columns sized
   to their content that shrink only when the card is too narrow, the figure scales with the card (22 px down to 16 px), and a caption wraps only at
   its " · ", so nothing runs into the next column (check-season-block-overlap). */
.season-week-block{container-type:inline-size}
.sp-week-figures{display:grid;grid-template-columns:repeat(3,minmax(0,auto));justify-content:space-between;gap:6px;margin-top:5px}
.sp-week-figures > div{min-width:0}
.sp-week-figures small{display:block;font-size:var(--font-caption2);line-height:1.3;color:var(--ink-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-week-figures b{display:block;font-size:clamp(16px,9cqi,22px);line-height:1.2;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.sp-week-figures > div > span{display:block;font-size:11.5px;line-height:1.3;white-space:normal;color:var(--ink-secondary);font-variant-numeric:tabular-nums}
.sp-week-figures .sp-cap-part{display:inline;white-space:nowrap}
.sp-week-figures .sp-week-gap{color:var(--attention,#d97706);font-weight:600}
html[data-theme="dark"] .sp-week-figures .sp-week-gap{color:var(--attention,#fbbf24)}
.sp-recovery-tag{display:inline-block;font-size:11px;font-weight:600;color:var(--wt-orange);background:color-mix(in srgb,var(--wt-orange) 14%,transparent);border-radius:999px;padding:2px 8px;margin-bottom:5px;white-space:nowrap}
.season-week-block .sp-block-footer{display:flex;justify-content:space-between;align-items:center;margin-top:9px;gap:8px}
.season-week-block .sp-block-links{margin-top:0;margin-left:auto}
.season-week-block .sp-block-header{white-space:nowrap}

.sp-week-figures .sp-week-gap.sp-week-gap-ok,html[data-theme="dark"] .sp-week-figures .sp-week-gap.sp-week-gap-ok{color:var(--connected);}

/* Recalculate uses the existing Season cards, setup steppers and preview table. */
.sp-recalculate-row{display:flex;align-items:center;flex-wrap:nowrap;gap:6px;margin:6px 0 10px;color:var(--ink-secondary);font-size:var(--font-caption);min-width:0}
.sp-recalculate-row>span:first-child{flex:1;min-width:0;white-space:normal;line-height:1.4}
.sp-recalculate-row .sp-card-link{flex:none;width:auto;white-space:nowrap;font-size:inherit}
@media(max-width:360px){.sp-recalculate-row{font-size:var(--font-caption2);gap:4px}}
.sp-recalculate-kept,.sp-recalculate-applied{display:flex;align-items:center;justify-content:space-between;gap:12px}
.sp-recalculate-applied{margin:8px 0;font-size:13px}
.sp-recalculate-kept>span{color:var(--ink-secondary);white-space:nowrap}
.sp-recalculate-preview .sp-bar-scheduled{fill:none;stroke:var(--ink-secondary);stroke-width:1.2;stroke-dasharray:3 2}
.sp-recalculate-preview .sp-fill-preview-row{cursor:default}
.sp-recalculate-preview .sp-fill-preview-row small{white-space:normal}

.sp-recalculate-applied .sp-card-link{flex:none;width:auto;margin:0;white-space:nowrap}

.sp-recalculate-start{flex:none}

/* Selected-week actions share one line at every width; keep the existing link chrome. */
.sp-week-actions{display:flex;align-items:center;flex-wrap:nowrap;gap:8px;margin-top:8px;white-space:nowrap;container-type:inline-size}
.sp-week-actions .sp-card-link{margin-top:0;white-space:nowrap;flex:0 0 auto;font-size:clamp(10px,3.5cqi,13px)}
.sp-week-actions>span{color:var(--ink-secondary);font-size:12px}

/* Grouped rows have straight inset rules; only their containing card is rounded. */
.sp-load-row{border-radius:0}
.sp-load-options + .sp-start-row{border-top:0}
.sp-recalculate-preview .sp-fill-preview{gap:0;background:var(--card);border:var(--stroke-hairline) solid var(--separator);border-radius:var(--radius-md);overflow:hidden}
.sp-recalculate-preview .sp-fill-preview-week{border:0;border-radius:0;position:relative}
.sp-recalculate-preview .sp-fill-preview-week + .sp-fill-preview-week::before{content:"";position:absolute;top:0;left:10px;right:10px;border-top:var(--stroke-hairline) solid var(--separator);pointer-events:none}
.sp-recalculate-preview .sp-fill-preview-head{position:relative;border-bottom:0}
.sp-recalculate-preview .sp-fill-preview-head::after{content:"";position:absolute;bottom:0;left:10px;right:10px;border-top:var(--stroke-hairline) solid var(--separator)}

/* Peak targeting reuses the grouped list, segments and round Season steppers. */
.sp-peak-choices{display:flex;flex-wrap:wrap;gap:8px 16px}
.sp-peak-choices .sp-card-link{width:auto;margin:0;white-space:nowrap}
[data-peak-status]:empty{display:none}
[data-peak-group] .sp-start-row{border-top:var(--stroke-hairline) solid var(--separator);margin-top:12px;padding-top:12px}
.sp-recalculate-preview .sp-fill-preview-row .num small{display:block;color:var(--ink-secondary);font-size:var(--font-caption);font-weight:400}
.season-sheet header button:disabled{color:var(--ink-tertiary);cursor:default;pointer-events:none}
[data-recalc-step]:disabled{opacity:.35;cursor:default}

/* Same Start at stepper chrome. The value becomes an editor only while focused. */
.sp-stepper .sp-peak-value{width:5.5ch;min-width:0;padding:0;border:0;border-radius:var(--radius-field);background:transparent;box-shadow:none;color:var(--ink);font:inherit;font-variant-numeric:tabular-nums;text-align:center;outline:none}
.sp-stepper .sp-peak-value:focus{background:var(--card);outline:2px solid var(--accent);outline-offset:3px}

.sp-recalculate-wrap{position:relative;min-width:0}
.sp-recalculate-row .sp-card-link{margin:0;line-height:1.4;align-self:center}
.sp-recalculate-row .sp-recalculate-info{flex:none;margin:0;vertical-align:initial}
.sp-recalculate-wrap .fc-popover{top:100%;left:auto;right:0;max-width:100%;box-sizing:border-box}

/* Hover previews; only a click/focus/key changes the solid locked selection. */
.sp-chart-card:has(.sp-weeks-svg){position:relative}
.sp-week-group.sp-hovered .sp-week-hit{fill:var(--accent);fill-opacity:.05;stroke:var(--accent);stroke-opacity:.6;stroke-width:1;stroke-dasharray:3 3}
.sp-chart-card .sp-week-tip{position:absolute;transform:none;z-index:4;pointer-events:none;max-width:calc(100% - 16px);box-sizing:border-box;white-space:nowrap}
.sp-week-actions .sp-card-link{font-size:clamp(10px,3.2cqi,13px)}
/* Fill v3: keep the real first-week result readable beside the segmented control. */
.sp-fill-session-info .sp-fill-session-hint { white-space: nowrap; }
.sp-fill-session-info .sp-fill-session-hint.flexible strong { color: var(--accent); font-weight: 600; }
.sp-fill-stepper { gap: 6px; }
.sp-fill-stepper > b { white-space: nowrap; font-size: var(--font-caption); }
.sp-fill-stepper > span:first-child { font-size: var(--font-caption); }
.sp-fill-stepper .icon-btn { flex: none; }