/* The colors of the landing page, shared by the pages with forms. */
:root {
  color-scheme: light dark;
  --ink: #0b1f3a; --text: #1c2733; --muted: #5b6b7c; --line: #e2e8f0; --panel: #f5f7fb; --blue: #0066ff;
  --blue-hover: #0052cc; --blue-disabled: #a8c5f7; --surface: #fff; --field-line: #d1d5db; --field-disabled: #f3f4f6;
  --control: #e6ebf2; --control-off: #cbd5e1; --control-disabled: #a6b1bf; --hover: #f0f4ff; --error: #b00020;
  --shadow-ink: rgba(11, 31, 58, 0.12); --card-shadow: 0 1px 2px rgba(11, 31, 58, 0.04);
}
/* The same colors, as the sea at night, when the browser prefers a dark scheme. */
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #eef3fa; --text: #d5dde7; --muted: #93a3b5; --line: #26374d; --panel: #0b1626; --blue: #3d8bff;
    --blue-hover: #6aa6ff; --blue-disabled: #2b4670; --surface: #12213a; --field-line: #34475f; --field-disabled: #1a2a42;
    --control: #1a2a42; --control-off: #3a4c63; --control-disabled: #56677c; --hover: #1d3150; --error: #ff6b81;
    --shadow-ink: rgba(0, 0, 0, 0.4); --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  }
}
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Roboto, sans-serif; color: var(--text); background: var(--surface);
  -webkit-font-smoothing: antialiased;
}
/* Every fieldset (and disclosure) is a card, its legend a title inside it rather than a notch in its border. */
fieldset, details {
  margin: 0; min-width: 0; padding: 14px 16px 16px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--card-shadow);
}
legend, details > summary {
  font-size: 0.72em; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted);
}
legend { float: left; width: 100%; margin-bottom: 10px; padding: 0; }
legend + * { clear: both; }
label { display: block; margin-top: 12px; font-size: 0.87em; font-weight: 500; color: var(--text); }
legend + label { margin-top: 0; }
.label-hint { font-weight: 400; color: var(--muted); }
input, select {
  width: 100%; box-sizing: border-box; margin-top: 4px; padding: 8px 10px;
  border: 1px solid var(--field-line); border-radius: 8px; background: var(--surface); font: inherit; color: var(--text);
}
input:focus, select:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.15); }
input:disabled { background: var(--field-disabled); color: var(--muted); }
input[type="checkbox"], input[type="radio"] { width: auto; margin: 0 6px 0 0; padding: 0; vertical-align: middle; accent-color: var(--blue); }
/* A numeric field's unit, inside the field on the right. */
.unit-field { position: relative; display: block; }
.unit-field input { padding-right: 44px; }
.unit {
  position: absolute; right: 10px; top: calc(50% + 2px); transform: translateY(-50%);
  font-weight: 400; color: var(--muted); pointer-events: none;
}
/* An on/off setting, its checkbox drawn as a toggle. */
.switch { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.switch input {
  appearance: none; -webkit-appearance: none; position: relative; flex-shrink: 0;
  width: 36px; height: 20px; margin: 0; border: none; border-radius: 999px; background: var(--control-off);
  cursor: pointer; transition: background 0.15s;
}
.switch input::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(11, 31, 58, 0.25); transition: transform 0.15s;
}
.switch input:checked { background: var(--blue); }
.switch input:checked::after { transform: translateX(16px); }
/* A point of the trip, its dot of the color of its marker on the map. */
.trip-point {
  display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 8px 10px;
  background: var(--panel); border-radius: 8px; font-size: 0.87em; font-weight: 500;
}
legend + .trip-point { margin-top: 0; }
.trip-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 3px var(--surface); }
.trip-dot.position { background: #2ecc71; }
.trip-dot.destination { background: #e74c3c; }
.coords { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.92em; font-weight: 400; color: var(--muted); }
.trip-point .coords { margin-left: auto; }
.hint { font-size: 0.85em; color: var(--muted); }
.primary-button {
  padding: 10px 16px; border: none; border-radius: 10px; background: var(--blue); color: #fff;
  font: inherit; font-weight: 600; cursor: pointer; box-shadow: 0 6px 16px rgba(0, 102, 255, 0.25);
}
.primary-button:hover:not(:disabled) { background: var(--blue-hover); }
.primary-button:disabled { background: var(--blue-disabled); cursor: default; box-shadow: none; }
/* iOS zooms in on a focused field whose text is under 16px. */
@media (max-width: 700px) {
  input, select { font-size: 16px; }
}