:root {
  --color-bg: #ffffff;
  --color-fg: #1a1a1a;
  --color-muted: #5f6368;
  --color-border: #d7d7d7;
  --color-accent: #205493;
  --color-accent-fg: #ffffff;
  --color-card: #f7f7f8;
  --color-error: #b3261e;
  --color-notice-bg: #eef4fb;
  --color-notice-border: #205493;
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --radius: 0.4rem;
  --gutter: 16px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #14161a;
    --color-fg: #eceff1;
    --color-muted: #a3aab3;
    --color-border: #3a3f47;
    --color-accent: #7ea8e0;
    --color-accent-fg: #0d1117;
    --color-card: #1d2026;
    --color-error: #ff8a80;
    --color-notice-bg: #1c2a3a;
    --color-notice-border: #7ea8e0;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-sans);
  line-height: 1.5;
}

.page { max-width: 44rem; margin-inline: auto; padding-inline: var(--gutter); }
a { color: var(--color-accent); }
h1, h2 { overflow-wrap: break-word; hyphens: auto; }

.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-block: 0.75rem;
  border-block-end: 1px solid var(--color-border);
}
.site-header .brand { font-weight: 700; text-decoration: none; color: var(--color-fg); }
.main-nav { display: flex; flex-wrap: wrap; gap: 1rem; }
.main-nav a { text-decoration: none; color: var(--color-fg); }
.lang-switch { display: flex; gap: 0.5rem; }
.lang-switch a { text-decoration: none; padding-inline: 0.35rem; }
.lang-switch a[aria-current] { font-weight: 700; }

.button,
#survey-form button[type="submit"],
#code-form button,
#another {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding-inline: 1rem;
  border: 0;
  border-radius: var(--radius);
  background: var(--color-accent);
  color: var(--color-accent-fg);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.button:visited { color: var(--color-accent-fg); }
.button:hover,
.button:focus-visible,
#survey-form button[type="submit"]:hover,
#survey-form button[type="submit"]:focus-visible,
#code-form button:hover,
#code-form button:focus-visible,
#another:hover,
#another:focus-visible {
  opacity: 0.9;
}
.button:focus-visible,
#survey-form button[type="submit"]:focus-visible,
#code-form button:focus-visible,
#another:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}
.button:disabled,
#survey-form button[type="submit"]:disabled,
#code-form button:disabled,
#another:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
#survey-form button[type="submit"] {
  display: flex;
  inline-size: 100%;
  margin-block-start: 1rem;
}

fieldset {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1rem;
  margin-block-end: 1rem;
}
legend {
  float: inline-start;
  inline-size: 100%;
  font-size: 1.05rem;
  font-weight: 600;
  margin-block-end: 0.5rem;
  padding: 0;
}
fieldset > legend ~ * { clear: both; }
fieldset[aria-invalid="true"] { border-inline-start: 2px solid var(--color-error); }

fieldset > label:has(> input:not([type="checkbox"], [type="radio"])),
#code-form label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-block-end: 0.75rem;
}

fieldset > label:has(> input[type="checkbox"]) {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-block-size: 44px;
  margin-block-end: 0.5rem;
}

fieldset > label > input:not([type="checkbox"], [type="radio"]),
fieldset > textarea,
#code-form input {
  display: block;
  inline-size: 100%;
  min-block-size: 44px;
  padding-inline: 0.6rem;
  padding-block: 0.4rem;
  font: inherit;
  color: var(--color-fg);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
fieldset > textarea { min-block-size: 6rem; resize: vertical; }

fieldset > label > input[type="checkbox"] {
  inline-size: 1.25rem;
  block-size: 1.25rem;
  flex-shrink: 0;
  accent-color: var(--color-accent);
}

.scale, .scale-numeric {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
}
.scale-numeric { gap: 0.35rem; direction: ltr; }
.scale-numeric + p { direction: ltr; }
.scale label, .scale-numeric label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding-inline: 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  cursor: pointer;
}
.scale-numeric label { padding-inline: 0.4rem; }
.scale input, .scale-numeric input { position: absolute; opacity: 0; }
.scale input:checked + span, .scale-numeric input:checked + span { font-weight: 700; }
/* Selected answer: filled pill (accent/accent-fg: ~8:1 contrast in light and dark). */
.scale label:has(input:checked) {
  background: var(--color-accent);
  color: var(--color-accent-fg);
  border-color: var(--color-accent);
}
/* The real input is visually hidden, so show keyboard focus on its pill. */
.scale label:has(input:focus-visible) {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

.notice {
  background: var(--color-notice-bg);
  border-inline-start: 3px solid var(--color-notice-border);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  margin-block-end: 1rem;
}
.error { color: var(--color-error); }
.muted { color: var(--color-muted); }

#map { height: min(70vh, 560px); border: 1px solid var(--color-border); border-radius: var(--radius); }

.legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; margin-block: 0.5rem; }
.legend i {
  display: inline-block;
  inline-size: 0.9rem;
  block-size: 0.9rem;
  margin-inline-end: 0.3rem;
  vertical-align: middle;
  border-radius: 2px;
}

.table-wrap { overflow-x: auto; }
table.nights { border-collapse: collapse; width: 100%; min-width: 32rem; }
table.nights th, table.nights td {
  padding: 0.4rem 0.6rem;
  text-align: start;
  border-block-end: 1px solid var(--color-border);
  white-space: nowrap;
}
table.nights thead th { position: sticky; top: 0; background: var(--color-bg); }
table.nights .over, .over { color: var(--color-error); font-weight: 700; }
table.nights tr:has(button) { cursor: pointer; }
.linklike {
  min-block-size: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-accent);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.linklike:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }

.live-tile {
  display: inline-block;
  padding: 1rem 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-card);
}
.live-tile .value { font-size: 2.25rem; font-weight: 700; }

footer {
  margin-block-start: 2rem;
  padding-block: 1rem;
  border-block-start: 1px solid var(--color-border);
  color: var(--color-muted);
  font-size: 0.9rem;
}