body {
  font-family: system-ui, Arial, sans-serif;
  margin: 16px;
  background: #fafafa;
  color: #111;
}

h1 {
  margin: 0 0 16px;
}

.disclaimer {
  background: #dcedfb; /* bay-100 */
  border: 1px solid #6abce9; /* bay-300 */
  border-radius: 8px;
  padding: 6px 12px;
  margin: 0 0 12px;
  font-size: 13px;
  color: #0a3a5c; /* bay-800 */
  position: relative;
}

.disclaimer[hidden] {
  display: none;
}

.disclaimer p {
  margin: 0;
  padding-right: 24px;
}

.disclaimer-more {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.disclaimer-close {
  position: absolute;
  top: 8px;
  right: 8px;
  background: transparent;
  color: #0a3a5c; /* bay-800 */
  border: none;
  font-size: 24px;
  line-height: 1;
  padding: 0;
  width: 24px;
  height: 24px;
  cursor: pointer;
  opacity: 0.6;
}

.disclaimer-close:hover {
  opacity: 1;
}

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 16px;
  align-items: flex-end;
  margin-bottom: 20px;
}

label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
  color: #374151;
  margin-bottom: 6px;
}

input[type="date"],
input[type="time"],
input[type="number"],
#splashTime {
  padding: 9px 10px;
  border: 1px solid #d1d5db;
  border-radius: 9px;
  box-sizing: border-box;
  font: inherit;
  line-height: 1.2;
  height: 40px;
  background: #fff;
  color: #111;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

input[type="date"]:hover,
input[type="time"]:hover,
input[type="number"]:hover,
#splashTime:hover {
  border-color: #9ca3af;
}

input[type="date"]:focus-visible,
input[type="time"]:focus-visible,
input[type="number"]:focus-visible,
#splashTime:focus-visible {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

/* Splash-time field: text input + 12h/24h toggle in one card, matching the
   swim-time control layout. The input is borderless inside the card. */
.splash-time-control {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 4px 0 0;
  border: 1px solid #d1d5db;
  border-radius: 9px;
  background: #fff;
  box-sizing: border-box;
  height: 40px;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.splash-time-control:hover {
  border-color: #9ca3af;
}

.splash-time-control:focus-within {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.splash-time-control #splashTime {
  border: 0;
  box-shadow: none;
  width: 88px;
  flex: 0 0 auto;
}

.splash-time-control #splashTime:focus-visible {
  box-shadow: none;
}

#timeFormatBtn {
  height: 30px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

/* Swim-time field: input + chips live in normal flow inside one card, so
   nothing ever overlaps neighbouring content at any screen size. It grows to
   fill the available row width so the chips have room to lay out. */
.swim-time-field {
  min-width: 0;
  flex: 1 1 320px;
}

.swim-time-control {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px;
  border: 1px solid #d1d5db;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.05);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
  /* Establishes the container for the chips' symmetric grid breakpoints. */
  container: swim-chips / inline-size;
}

.swim-time-control:focus-within {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.swim-duration {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}

.swim-time-control .swim-duration input[type="number"] {
  border: 0;
  box-shadow: none;
  width: 48px;
  flex: 0 0 auto;
  padding: 6px 4px;
  background: transparent;
  text-align: center;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  /* Normalize iOS/mobile rendering: remove native spinners and default
     appearance so it looks consistent with the surrounding card. */
  -webkit-appearance: none;
  -moz-appearance: textfield;
  appearance: none;
}

/* Hide the native number spinners (WebKit/Blink) for a clean look. */
.swim-time-control
  .swim-duration
  input[type="number"]::-webkit-outer-spin-button,
.swim-time-control
  .swim-duration
  input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.swim-time-control .swim-duration input[type="number"]:focus-visible {
  outline: none;
  border-radius: 8px;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.swim-time-control .swim-duration .unit {
  font-size: 12px;
  color: #6b7280;
  flex: 0 0 auto;
  margin-right: 4px;
}

.preset-chips {
  display: grid;
  /* Symmetric layouts only: 4x1 (default), collapsing to 2x2 then 1x4 at
     explicit breakpoints, so the grid never produces a ragged 3+1 wrap. */
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  flex: 1 1 auto;
}

/* 2x2 when the control is too narrow for four chips in a row. */
@container swim-chips (max-width: 300px) {
  .preset-chips {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 1x4 when very narrow. */
@container swim-chips (max-width: 160px) {
  .preset-chips {
    grid-template-columns: 1fr;
  }
}

.chip {
  padding: 5px 12px;
  border: 1px solid #d1d5db;
  border-radius: 999px;
  background: #f9fafb;
  color: #374151;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease;
}

.chip:hover {
  background: #f3f4f6;
  border-color: #9ca3af;
}

.chip:active {
  transform: translateY(1px);
}

.chip:focus-visible {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.chip.is-active {
  background: #111827;
  border-color: #111827;
  color: #fff;
}

button {
  padding: 10px 14px;
  border: 0;
  border-radius: 10px;
  background: #111;
  color: #fff;
  cursor: pointer;
}

button:disabled {
  opacity: 0.6;
  cursor: default;
}

.row-buttons {
  display: flex;
  gap: 8px;
}

.btn-secondary {
  background: #fff;
  color: #111;
  border: 1px solid #ccc;
}

.muted {
  color: #555;
  font-size: 12px;
  margin-top: 6px;
}

.jargon {
  font-size: 13px;
  color: #333;
  margin-top: 8px;
}

.jargon summary {
  cursor: pointer;
  color: #075985;
  font-weight: 600;
}

.jargon dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 12px;
  margin: 8px 0 0;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
}

.jargon dt {
  font-weight: 600;
}

.jargon dd {
  margin: 0;
}

.chart {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 10px;
  margin-top: 12px;
}

.chart-source {
  display: block;
  width: fit-content;
  margin: 0 0 4px auto;
  color: #075985;
  font-size: 12px;
}

.chart-plot {
  height: 320px;
  position: relative;
}

/* Locked (blurred) charts behind the sign-in nudge */
.charts-wrap {
  position: relative;
}

.charts-locked {
  filter: blur(8px);
  pointer-events: none;
  user-select: none;
}

.locked-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}

/* The hidden attribute must win over display:flex above. */
.locked-overlay[hidden] {
  display: none;
}

.locked-card {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 14px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.18);
  padding: 28px 32px;
  max-width: 380px;
  text-align: center;
}

.locked-card h2 {
  margin: 0 0 8px;
}

.locked-cta {
  display: inline-block;
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  text-decoration: none;
}

.loading {
  display: none;
  margin-top: 10px;
  font-weight: 600;
}

/* Transient notification (e.g. "Link copied"). Slides up from the bottom,
   then fades out; hidden again once the transition ends. */
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 12px);
  padding: 10px 16px;
  border-radius: 999px;
  background: #111827;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 8px 24px rgba(17, 24, 39, 0.25);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
  z-index: 60;
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

.toast.error {
  background: #b91c1c;
}

.stations {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 10px;
}

.station-item {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.feedback-toggle {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 20;
  background: var(--color-bay-600, #12649c);
  color: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
  transition: background 0.15s ease;
}

.feedback-toggle:hover {
  background: var(--color-bay-500, #177dbe);
}

.feedback-backdrop {
  position: fixed;
  inset: 0;
  z-index: 19;
  background: rgba(0, 0, 0, 0.4);
  cursor: pointer;
}

.feedback-backdrop[hidden] {
  display: none;
}

.feedback-panel {
  position: fixed;
  right: 20px;
  bottom: 72px;
  z-index: 21;
  width: min(340px, calc(100vw - 32px));
  padding: 16px;
  border: 1px solid #d4d4d4;
  border-radius: 8px;
  box-sizing: border-box;
  background: #fff;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}

.feedback-panel[hidden] {
  display: none;
}

.feedback-header,
.feedback-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.feedback-header {
  margin-bottom: 14px;
}

.feedback-header h3 {
  margin: 0;
  font-size: 16px;
}

.feedback-close {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 4px;
  background: transparent;
  color: #333;
  font-size: 24px;
  line-height: 1;
}

.feedback-panel textarea {
  display: block;
  width: 100%;
  min-height: 120px;
  padding: 10px;
  border: 1px solid #bbb;
  border-radius: 6px;
  box-sizing: border-box;
  resize: vertical;
  font: inherit;
}

.feedback-actions {
  margin-top: 12px;
  align-items: flex-end;
}

.feedback-status {
  min-height: 18px;
  color: #444;
  font-size: 12px;
  line-height: 1.4;
}

.feedback-status.error {
  color: #b00020;
}

/* Honeypot (#88): keep the field off-screen instead of display:none so bot
 * heuristics that skip invisible fields still see a "real" input. */
.feedback-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------------------------------------------------------------------------
 * Redesign A: guided steps. Scopes the planner input card as a numbered
 * three-step flow (when / how long / where) with a plan summary footer.
 * All behavior hooks (IDs, .preset-chips .chip) are unchanged.
 * ------------------------------------------------------------------------- */
.planner-inputs--steps .plan-header h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: var(--color-fog-900, #1c2733);
}

.planner-inputs--steps .plan-sub {
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--color-fog-500, #7489a3);
}

.planner-inputs--steps .steps {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
}

.planner-inputs--steps .step {
  padding: 16px 0 18px;
  border-top: 1px solid var(--color-fog-100, #eef2f7);
}

.planner-inputs--steps .step-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.planner-inputs--steps .step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--color-bay-600, #12649c);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}

.planner-inputs--steps .step-title h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-fog-900, #1c2733);
}

.planner-inputs--steps .step-hint {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--color-fog-500, #7489a3);
}

.planner-inputs--steps .step-body {
  padding-left: 36px; /* aligns content with the step title, past the badge */
}

.planner-inputs--steps .step-when {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}

.planner-inputs--steps .step-when .field {
  flex: 1 1 160px;
  min-width: 0;
}

.planner-inputs--steps .step-when .field input[type="date"],
.planner-inputs--steps .step-when .field input[type="time"] {
  width: 100%;
  box-sizing: border-box;
}

.planner-inputs--steps .step-actions {
  margin-left: auto;
}

.planner-inputs--steps .step-actions .btn-secondary {
  height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Swim duration: slider (10-minute steps) is the primary control, with the
   h/min inputs above it for exact values. */
.planner-inputs--steps .step-body .swim-time-control {
  max-width: 560px;
}

.planner-inputs--steps .swim-time-control--slider {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 10px 14px;
}

.planner-inputs--steps .swim-time-control--slider .swim-duration {
  justify-content: center;
}

.planner-inputs--steps .swim-slider {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.planner-inputs--steps #swimSlider {
  width: 100%;
  margin: 0;
  appearance: none;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(
    to right,
    var(--color-bay-600, #12649c) var(--fill, 25%),
    var(--color-fog-100, #eef2f7) 0
  );
  cursor: pointer;
}

.planner-inputs--steps #swimSlider::-webkit-slider-thumb {
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-bay-600, #12649c);
}

.planner-inputs--steps #swimSlider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: none;
  border-radius: 50%;
  background: var(--color-bay-600, #12649c);
}

.planner-inputs--steps .swim-slider-scale {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--color-fog-500, #7489a3);
}

/* Stations as selectable cards: friendly name first, NOAA ID as quiet
   secondary text. */
.planner-inputs--steps .stations--cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  margin-top: 0;
}

.planner-inputs--steps .stations--cards .station-item {
  white-space: normal;
}

.planner-inputs--steps .stations--cards .station-item input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.planner-inputs--steps .stations--cards .station-item label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--color-fog-300, #c3cfdd);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    box-shadow 0.15s ease;
}

.planner-inputs--steps .stations--cards .station-item label:hover {
  border-color: var(--color-bay-500, #177dbe);
}

.planner-inputs--steps
  .stations--cards
  .station-item
  input[type="checkbox"]:checked
  + label {
  border-color: var(--color-bay-600, #12649c);
  background: var(--color-bay-50, #f2f9fe);
  box-shadow: inset 0 0 0 1px var(--color-bay-600, #12649c);
}

.planner-inputs--steps
  .stations--cards
  .station-item
  input[type="checkbox"]:focus-visible
  + label {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.planner-inputs--steps .station-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-fog-900, #1c2733);
}

/* Identity-color dot: same hue as the station's line on the charts. */
.station-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--station-color, var(--color-bay-500, #177dbe));
}

.planner-inputs--steps .station-id {
  font-size: 11px;
  font-weight: 400;
  color: var(--color-fog-500, #7489a3);
}

.planner-inputs--steps .plan-summary {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--color-fog-100, #eef2f7);
}

.planner-inputs--steps .plan-summary .muted {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-fog-700, #40536b);
}

/* Share lives at the bottom of the card, right next to the charts it
   describes. */
.planner-inputs--steps .plan-summary #shareBtn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 16px;
  border-radius: 10px;
  font-weight: 600;
}

@media (max-width: 600px) {
  .planner-inputs--steps .step-body {
    padding-left: 0;
  }

  .planner-inputs--steps .step-when {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }

  .planner-inputs--steps .step-when input[type="date"],
  .planner-inputs--steps .step-when input[type="time"] {
    height: 48px;
    font-size: 16px;
  }

  .planner-inputs--steps .step-actions {
    grid-column: 1 / -1;
    margin-left: 0;
  }

  .planner-inputs--steps .step-actions .btn-secondary {
    flex: 1;
    justify-content: center;
    min-height: 48px;
  }

  .planner-inputs--steps .stations--cards {
    grid-template-columns: 1fr 1fr;
  }

  .planner-inputs--steps .stations--cards .station-item label {
    min-height: 56px;
  }

  .planner-inputs--steps .plan-summary {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .planner-inputs--steps .plan-summary #shareBtn {
    justify-content: center;
    min-height: 48px;
  }
}

@media (max-width: 600px) {
  body {
    margin: 12px;
  }

  h2 {
    font-size: 20px;
    line-height: 1.2;
  }

  .row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 10px;
    align-items: start;
    margin-bottom: 0;
  }

  /* Swim time spans the full width so input + chips have room. */
  .swim-time-field {
    grid-column: 1 / -1;
  }

  .row-buttons {
    grid-column: 1 / -1;
  }

  .row > div {
    width: 100%;
    min-width: 0;
  }

  /* Only the date/time fields stretch to fill their grid cells (the splash
     time text input keeps a fixed width inside its control card). */
  .row > div:not(.swim-time-field) input:not(#splashTime) {
    width: 100%;
    min-width: 0;
  }

  /* The splash-time card spans its grid cell like the date field. */
  .splash-time-control {
    width: 100%;
    height: 48px;
  }

  .splash-time-control #splashTime {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    height: 100%;
    font-size: 16px;
  }

  #timeFormatBtn {
    min-height: 40px;
    height: 40px;
    font-size: 13px;
  }

  /* Action buttons span their grid cells. */
  .row-buttons button {
    flex: 1;
    min-width: 0;
  }

  input[type="date"],
  input[type="time"],
  .row-buttons button {
    min-height: 48px;
    height: 48px;
    font-size: 16px;
  }

  /* Larger touch targets on the swim-time control. */
  .swim-time-control {
    padding: 8px;
    gap: 8px;
  }

  .swim-time-control .swim-duration input[type="number"] {
    height: 40px;
    font-size: 16px;
  }

  .chip {
    width: auto;
    min-height: 36px;
    padding: 6px 14px;
    font-size: 13px;
  }

  .row-buttons {
    align-self: end;
  }

  .stations {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 8px;
    margin-top: 14px;
  }

  .station-item {
    min-height: 40px;
    white-space: normal;
  }

  .station-item input {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
  }

  .station-item label {
    padding: 8px 0;
  }

  .muted {
    line-height: 1.45;
  }

  .chart {
    margin: 12px -4px 0;
    padding: 6px 2px;
    border-radius: 8px;
  }

  .chart-source {
    margin-right: 8px;
  }

  .chart-plot {
    height: 430px;
  }

  .feedback-toggle {
    right: 12px;
    bottom: 12px;
  }

  .feedback-panel {
    right: 12px;
    bottom: 68px;
    width: calc(100vw - 24px);
  }
}

.site-footer {
  margin-top: 24px;
  text-align: center;
  font-size: 12px;
  color: #667;
}

.site-footer a {
  color: inherit;
}

/* Magic-link auth */
.auth-bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  font-size: 13px;
}

.auth-user {
  color: #667;
}

.auth-link {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 10px;
  text-decoration: none;
}

.auth-page {
  max-width: 420px;
  margin: 48px auto;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 16px 0 24px;
}

.auth-form input[type="email"] {
  padding: 8px 10px;
  font-size: 15px;
}

.auth-error {
  color: #b3261e;
}

/* --- Saved swims menu (#99, #103) --- */
/* Kebab toggle sits inline in the auth bar, styled like the sign-out button. */
.swims-menu-toggle {
  padding: 8px 14px;
  border: 1px solid #ccc;
  border-radius: 10px;
  background: #fff;
  color: #111;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease;
}

.swims-menu-toggle:hover {
  background: #f3f4f6;
}

.swims-backdrop {
  position: fixed;
  inset: 0;
  z-index: 29;
  background: rgba(0, 0, 0, 0.4);
  cursor: pointer;
}

.swims-backdrop[hidden] {
  display: none;
}

/* Full-page menu overlay: covers the whole planning page. */
.swims-overlay {
  position: fixed;
  inset: 0;
  z-index: 30;
  padding: 72px 20px 40px;
  box-sizing: border-box;
  background: var(--color-fog-100, #f4f6f8);
  overflow-y: auto;
}

.swims-overlay[hidden] {
  display: none;
}

.swims-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: 720px;
  margin: 0 auto 12px;
}

.swims-header h3 {
  margin: 0;
  font-size: 24px;
}

.swims-hint {
  max-width: 720px;
  margin: 0 auto 20px;
  color: #667;
  font-size: 14px;
}

.swims-overlay .auth-link {
  display: block;
  max-width: 720px;
  margin: 0 auto;
}

.swims-slots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  max-width: 720px;
  margin: 0 auto;
}

.swim-slot {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 120px;
  padding: 16px;
  border: 1px solid #d4d4d4;
  border-radius: 12px;
  background: #fff;
  text-align: left;
  font: inherit;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.swim-slot--filled {
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.swim-slot--filled:hover {
  border-color: var(--color-bay-500, #177dbe);
  box-shadow: 0 8px 20px rgba(18, 100, 156, 0.18);
}

.swim-slot--empty {
  align-items: center;
  justify-content: center;
  border-style: dashed;
  color: #667;
  font-size: 14px;
  text-align: center;
}

/* Thin full-width divider between upcoming and past swims (#101). */
.swims-separator {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #99a;
  font-size: 12px;
  letter-spacing: 0.04em;
}

.swims-separator::before,
.swims-separator::after {
  content: "";
  flex: 1;
  border-top: 1px solid #d4d4d4;
}

/* Past swims: greyed out but still clickable (#101). */
.swim-slot--past {
  opacity: 0.55;
  filter: grayscale(0.5);
  background: #f4f4f5;
}

.swim-slot-when {
  font-weight: 700;
  font-size: 16px;
}

/* Blurred mini combined-plot behind multi-station saved swims (#102). */
.swim-slot-chart {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  filter: blur(4px);
  opacity: 0.22;
  pointer-events: none;
}

/* Keep slot text and the delete button above the backdrop chart. */
.swim-slot > *:not(.swim-slot-chart) {
  position: relative;
  z-index: 1;
}

.swim-slot-meta {
  color: #667;
  font-size: 13px;
}

.swim-slot-delete {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #667;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.swim-slot-delete:hover {
  background: #fee2e2;
  color: #b91c1c;
}

/* Save-swim login nudge (#105): anchored just above the plan-summary
   button row (position: relative on .plan-summary), right next to the save
   button that triggered it — not down over the charts. */
.save-nudge {
  position: absolute;
  bottom: calc(100% + 10px);
  right: 0;
  z-index: 6;
  width: min(320px, 90vw);
  padding: 14px 40px 14px 16px;
  border: 1px solid var(--color-fog-300, #d5dde8);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(15, 45, 75, 0.18);
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-fog-700, #40536b);
}

.save-nudge[hidden] {
  display: none;
}

.save-nudge-text {
  margin: 0 0 8px;
}

.save-nudge-cta {
  font-weight: 600;
  color: var(--color-bay-600, #12649c);
}

.save-nudge-close {
  position: absolute;
  top: 6px;
  right: 10px;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: #667;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

@media (max-width: 640px) {
  .swims-overlay {
    padding: 60px 12px 32px;
  }
}