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

h1 {
  margin: 0 0 16px;
}

.disclaimer {
  background: #fff3cd;
  border: 1px solid #ffc107;
  border-radius: 8px;
  padding: 12px;
  margin: 0 0 16px;
  font-size: 14px;
  color: #856404;
  position: relative;
}

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

.disclaimer-close {
  position: absolute;
  top: 8px;
  right: 8px;
  background: transparent;
  color: #856404;
  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"] {
  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 {
  border-color: #9ca3af;
}

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

/* 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-time-control input[type="number"] {
  border: 0;
  box-shadow: none;
  width: 76px;
  flex: 0 0 auto;
  padding: 6px 8px;
  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 input[type="number"]::-webkit-outer-spin-button,
.swim-time-control input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.swim-time-control input[type="number"]:focus-visible {
  border: 0;
  box-shadow: none;
  outline: none;
}

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

.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;
}

.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;
}

.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;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}

.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;
}

@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. */
  .row > div:not(.swim-time-field) input {
    width: 100%;
    min-width: 0;
  }

  /* 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 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;
}