/* =======================================================================
   Training registration — stylesheet
   Fixed brief: top bar #000040, full width, 77.7px tall,
   page background #FFFFFF.
   ======================================================================= */

/* ---------- 1. Design tokens ---------- */
:root {
  --c-navy:       #000040;   /* brand colour */
  --c-navy-deep:  #00002b;   /* darker shade for depth */
  --c-paper:      #ffffff;   /* page background */
  --c-mist:       #f6f7fb;   /* subtle surface */
  --c-rule:       #dcdee9;   /* hairlines */
  --c-ink:        #14142c;   /* body text */
  --c-muted:      #565a78;   /* secondary text */
  --c-red:        #dc0021;   /* accent, interactive states only */
  --c-link-hover: #0065b3;   /* top bar link hover */

  --bar-h:        77.7px;    /* fixed top bar height */
  --brand-pad-y:  18px;      /* logo block vertical padding */
  --brand-pad-x:  44px;      /* logo block horizontal padding */
  --page-max:     1200px;
  --pad-x:        clamp(20px, 5vw, 56px);

  --ease:         cubic-bezier(0.22, 0.61, 0.36, 1);

  --f-sans: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

/* The hidden attribute must beat display from classes (grid, flex…),
   otherwise a hidden element stays visible. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--c-paper);
  color: var(--c-ink);
  font-family: var(--f-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1, "liga" 1;
}

h1, h2, p { margin: 0; }
a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--c-navy);
  outline-offset: 3px;
  border-radius: 1px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--c-red);
  color: #fff;
  padding: 12px 22px;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

/* ---------- 3. Top bar ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  height: var(--bar-h);          /* exactly 77.7px */
  flex: 0 0 var(--bar-h);
  overflow: hidden;              /* nothing may spill outside the bar */
  padding: 0 var(--pad-x);

  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;

  color: #fff;
  background: var(--c-navy);
  background-image: linear-gradient(105deg, var(--c-navy-deep) 0%, var(--c-navy) 46%, #0a0a52 100%);
  transition: box-shadow 0.25s var(--ease);
}

.topbar.is-scrolled {
  box-shadow: 0 10px 28px -18px rgba(0, 0, 64, 0.85);
}

/* Logo block: white panel spanning the bar height, flush left, with the
   same soft blue shadow as csirt.sk. */
.topbar__brand {
  grid-column: 1;
  justify-self: start;
  align-self: stretch;

  display: flex;
  align-items: center;
  min-width: 0;

  margin-left: calc(-1 * var(--pad-x));   /* flush with the left edge */
  padding: var(--brand-pad-y) var(--brand-pad-x);

  background: #fff;
  box-shadow: 0 1px 10px 0 rgba(0, 84, 161, 0.13);
  position: relative;
  z-index: 10;

  text-decoration: none;
  color: inherit;
}
.topbar__brand:focus-visible {
  outline: 3px solid #fff;
  outline-offset: -6px;
}

.topbar__logo {
  display: block;
  height: calc(var(--bar-h) - 2 * var(--brand-pad-y));
  width: auto;
  max-width: 260px;
  object-fit: contain;
}

@media (max-width: 1040px) {
  :root { --brand-pad-x: 28px; }
  .topbar__logo { max-width: 220px; }
}

.topbar__title {
  grid-column: 2;
  color: inherit;
  text-decoration: none;
  min-width: 0;
  text-align: center;
  font-size: clamp(0.95rem, 1.55vw, 1.2rem);
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.25;
  overflow: hidden;
  transition: color 0.18s var(--ease);
}
.topbar__title:hover {
  color: var(--c-link-hover);
  text-decoration: none;
}
.topbar__title:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 4px;
}

/* ---------- 4. Intro block ---------- */
main {
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

.lede {
  position: relative;
  padding: clamp(56px, 8vw, 104px) 0 clamp(32px, 4.5vw, 52px);
  max-width: 48rem;
}

/* quiet dot raster, echoing the Kyberarena target mark */
.lede::after {
  content: "";
  position: absolute;
  top: clamp(40px, 6vw, 76px);
  right: clamp(-40px, -2vw, 0px);
  width: min(300px, 34vw);
  height: min(300px, 34vw);
  background-image: radial-gradient(circle, rgba(0, 0, 64, 0.5) 1.2px, transparent 1.3px);
  background-size: 15px 15px;
  -webkit-mask-image: radial-gradient(circle at 68% 32%, #000 0%, transparent 68%);
          mask-image: radial-gradient(circle at 68% 32%, #000 0%, transparent 68%);
  opacity: 0.28;
  pointer-events: none;
  z-index: -1;
}

.lede__heading {
  font-size: clamp(2.1rem, 4.6vw, 3.35rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.032em;
  color: var(--c-navy);
  text-wrap: balance;
}

.lede__text {
  margin-top: 20px;
  max-width: 38rem;              /* under 80 characters per line */
  font-size: 1.09375rem;
  color: var(--c-muted);
}

/* ---------- 5. Activity options ---------- */
/* Holds the shared map path; renders nothing itself. */
.sk-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;                       /* the band background forms the rules */
  background: var(--c-rule);
  border: 1px solid var(--c-rule);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: clamp(64px, 9vw, 108px);
  box-shadow: 0 24px 48px -40px rgba(0, 0, 64, 0.55);
}

.option {
  position: relative;
  isolation: isolate;
  overflow: hidden;      /* keeps each tile's map inside its own cell */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  min-height: 280px;
  padding: 38px clamp(22px, 2.4vw, 34px) 32px;
  text-decoration: none;
  color: var(--c-ink);
  background: var(--c-paper);
  transition: background-color 0.28s var(--ease), color 0.28s var(--ease);
}

/* accent indicator along the top edge */
.option::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--c-red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.32s var(--ease);
  z-index: 2;
}

/* Map of Slovakia, bottom right. The highlighted half says which region
   the activity belongs to; the rest of the country stays as a faint
   outline so the shape is still readable. */
.option__map {
  position: absolute;
  right: 20px;
  bottom: 20px;
  width: 46%;
  max-width: 190px;
  height: auto;
  z-index: -1;
  pointer-events: none;
}
.option__map-base {
  fill: var(--c-navy);
  opacity: 0.10;
  transition: fill 0.28s var(--ease), opacity 0.28s var(--ease);
}
.option__map-region {
  fill: var(--c-red);
  opacity: 0.42;
  transition: fill 0.28s var(--ease), opacity 0.28s var(--ease);
}

/* City marker, used where an activity runs in one place only. The rest of
   the country is left grey, so the dot carries the whole message. */
.option__map-dot {
  fill: var(--c-red);
  transition: fill 0.28s var(--ease);
}

.option:hover,
.option:focus-visible {
  background: var(--c-navy);
  color: #fff;
}
.option:hover::before,
.option:focus-visible::before { transform: scaleX(1); }

.option:hover .option__map-base,
.option:focus-visible .option__map-base {
  fill: #fff;
  opacity: 0.16;
}
.option:hover .option__map-region,
.option:focus-visible .option__map-region {
  fill: var(--c-red);
  opacity: 0.92;
}


.option:focus-visible {
  outline: 3px solid var(--c-red);
  outline-offset: -3px;
}

.option__mark {
  display: block;
  width: 58px;
  height: 58px;
  color: var(--c-navy);
  transition: color 0.28s var(--ease), transform 0.32s var(--ease);
}
.option__mark svg { display: block; width: 100%; height: 100%; }

.option:hover .option__mark,
.option:focus-visible .option__mark {
  color: var(--c-red);
  transform: translateY(-3px);
}

.option__name {
  /* Two lines are reserved so the descriptions in all four tiles start at
     the same height, whether the title wraps or not. */
  --name-lines: 2;
  min-height: calc(var(--name-lines) * 1.18em);

  font-size: 1.3125rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.018em;
  color: var(--c-navy);
  text-wrap: balance;
  transition: color 0.28s var(--ease);
}

.option:hover .option__name,
.option:focus-visible .option__name { color: #fff; }

.option__note {
  font-size: 0.9375rem;
  line-height: 1.62;
  color: var(--c-muted);
  max-width: 38ch;
  transition: color 0.28s var(--ease);
}
.option:hover .option__note,
.option:focus-visible .option__note { color: rgba(255, 255, 255, 0.82); }

.option__cta {
  position: relative;
  margin-top: auto;
  padding-top: 14px;
  padding-bottom: 4px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--c-navy);
  align-self: flex-start;
  transition: color 0.28s var(--ease);
}
.option__cta::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--c-red);
  transform: scaleX(0.34);
  transform-origin: left;
  transition: transform 0.32s var(--ease);
}
.option:hover .option__cta,
.option:focus-visible .option__cta { color: #fff; }
.option:hover .option__cta::after,
.option:focus-visible .option__cta::after { transform: scaleX(1); }

/* ---------- 6. Footer ---------- */
.footer {
  flex: 0 0 auto;
  border-top: 1px solid var(--c-rule);
  background: var(--c-mist);
  padding: 26px var(--pad-x);
  font-size: 0.875rem;
  color: var(--c-muted);
}

.footer__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px 40px;
  flex-wrap: wrap;
}

.footer a {
  color: var(--c-navy);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid var(--c-red);
  padding-bottom: 1px;
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease);
}
.footer a:hover {
  color: var(--c-red);
}

.footer__help { margin: 0; }

.footer__legal {
  color: var(--c-muted);
  white-space: nowrap;
}

@media (max-width: 640px) {
  .footer__inner { flex-direction: column; align-items: flex-start; }
  .footer__help { margin: 0; }

.footer__legal { white-space: normal; }
}

/* ---------- 7. Activity page header ---------- */
.booking {
  padding: clamp(40px, 6vw, 72px) 0 clamp(24px, 3vw, 36px);
  max-width: 46rem;
}
.booking__back,
.done__back {
  display: inline-block;
  margin-bottom: 22px;
  padding-bottom: 2px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--c-navy);
  text-decoration: none;
  border-bottom: 2px solid var(--c-red);
}
.booking__heading {
  font-size: clamp(1.95rem, 4.2vw, 2.75rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--c-navy);
  text-wrap: balance;
}
.booking__region {
  display: block;
  margin-top: 4px;
  font-size: 0.6em;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--c-muted);
}

.booking__lead {
  margin-top: 18px;
  max-width: 38rem;
  font-size: 1.0625rem;
  color: var(--c-muted);
}

/* ---------- 7b. Form ---------- */
.form {
  padding-bottom: clamp(56px, 8vw, 96px);
}

.form__layout {
  display: grid;
  grid-template-columns: minmax(320px, 27rem) minmax(0, 1fr);
  gap: 1px;
  background: var(--c-rule);
  border: 1px solid var(--c-rule);
  border-radius: 4px;
  overflow: hidden;
}

.form__block {
  background: var(--c-paper);
  padding: clamp(24px, 3vw, 34px);
}
.form__block--calendar { background: var(--c-mist); }

.form__block-title {
  margin-bottom: 20px;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--c-navy);
}

/* --- fields --- */
.field { margin-bottom: 18px; }
.field:last-child { margin-bottom: 0; }
.field--narrow { max-width: 11rem; }

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.field label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--c-ink);
}
.field__optional {
  font-weight: 400;
  color: var(--c-muted);
}

.field input,
.field textarea,
.field select {
  width: 100%;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--c-ink);
  background: var(--c-paper);
  border: 1px solid #b9bdd0;
  border-radius: 3px;
  padding: 10px 12px;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.field textarea { resize: vertical; min-height: 96px; }

.field input:hover,
.field textarea:hover,
.field select:hover { border-color: var(--c-navy); }

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--c-navy);
  box-shadow: 0 0 0 3px rgba(0, 0, 64, 0.14);
}
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"],
.field select[aria-invalid="true"] { border-color: var(--c-red); }

.field select {
  appearance: none;
  padding-right: 36px;
  cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--c-navy) 50%),
    linear-gradient(135deg, var(--c-navy) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

/* --- phone with a fixed prefix --- */
.phone {
  display: flex;
  align-items: stretch;
  background: var(--c-paper);
  border: 1px solid #b9bdd0;
  border-radius: 3px;
  overflow: hidden;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.phone:hover { border-color: var(--c-navy); }
.phone:focus-within {
  border-color: var(--c-navy);
  box-shadow: 0 0 0 3px rgba(0, 0, 64, 0.14);
}

.phone__prefix {
  display: flex;
  align-items: center;
  padding: 0 10px 0 12px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--c-muted);
  background: var(--c-mist);
  border-right: 1px solid var(--c-rule);
  user-select: none;
}

/* the input inside the frame needs no border of its own */
.field .phone input {
  border: 0;
  border-radius: 0;
  background: transparent;
}
.field .phone input:hover { border-color: transparent; }
.field .phone input:focus {
  outline: none;
  box-shadow: none;
}
.phone:has(input[aria-invalid="true"]) { border-color: var(--c-red); }

/* the time picker sits under the calendar, outside the field grid */
.field--time {
  max-width: 12rem;
  margin-top: 18px;
}

.field--check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px 12px;
  align-items: start;
  margin-top: 24px;
}
.field--check input {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--c-navy);
}
.field--check label {
  margin: 0;
  font-weight: 400;
  font-size: 0.9375rem;
  color: var(--c-muted);
}
.field--check .form__error { grid-column: 2; }

/* Legal text under the consent box: readable but deliberately quiet. */
.field__legal {
  grid-column: 2;
  margin-top: 8px;
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--c-muted);
}
.field__legal a {
  color: var(--c-navy);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--c-red);
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}
.field__legal a:hover { color: var(--c-red); }

/* --- checkbox and radio question groups --- */
.qgroup {
  margin: 0 0 30px;
  padding: 0;
  border: 0;
}
.qgroup__title {
  padding: 0;
  margin-bottom: 4px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--c-ink);
}
.qgroup__hint {
  margin-bottom: 14px;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--c-muted);
}
.qgroup__hint a {
  color: var(--c-navy);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--c-red);
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}
.qgroup__hint a:hover { color: var(--c-red); }

.qgroup__limit {
  font-weight: 400;
  color: var(--c-muted);
}
.qgroup__counter {
  margin-top: 12px;
  font-size: 0.8125rem;
  color: var(--c-muted);
}
.qgroup__counter span { font-weight: 600; color: var(--c-navy); }

/* choice above the limit: dimmed, not hidden */
.choice.is-off label {
  color: #9297ad;
  cursor: not-allowed;
}
.choice.is-off input { cursor: not-allowed; }

.choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 22px;
}
/* long labels need a full row */
.choices--wide { grid-template-columns: 1fr; }

@media (min-width: 1200px) {
  .choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.choice {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
}
.choice input {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--c-navy);
  cursor: pointer;
}
.choice label {
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--c-ink);
  cursor: pointer;
}

/* --- participant roster --- */
.roster {
  /* Extra space below separates the roster from the next field. */
  margin: 24px 0 36px;
  padding: 0;
  border: 0;
}
.roster[hidden] { display: none; }

.roster__legend {
  padding: 0;
  margin-bottom: 4px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--c-ink);
}
.roster__hint {
  margin-bottom: 16px;
  font-size: 0.8125rem;
  color: var(--c-muted);
}

.roster__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding-top: 14px;
  margin-top: 14px;
  border-top: 1px solid var(--c-rule);
}
.roster__row:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }

.roster__index {
  grid-column: 1 / -1;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--c-muted);
}
.roster__row .field { margin-bottom: 0; }

/* An explanation rather than an error — this is not the user's mistake. */
.notice {
  margin: 16px 0 0;
  padding: 16px 18px;
  background: var(--c-mist);
  border-left: 3px solid var(--c-navy);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--c-ink);
}
.notice[hidden] { display: none; }
.notice a {
  color: var(--c-navy);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--c-red);
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}
.notice a:hover { color: var(--c-red); }

/* --- errors and summary --- */
.form__error {
  margin-top: 6px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--c-red);
}
.form__error--block {
  margin-top: 20px;
  padding: 14px 16px;
  background: #fff2f4;
  border-left: 3px solid var(--c-red);
}

.form__summary {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--c-rule);
  font-size: 0.9375rem;
  color: var(--c-muted);
}
.form__summary.is-set {
  font-weight: 600;
  color: var(--c-navy);
}

.form__time {
  margin-top: 6px;
  font-size: 0.9375rem;
  color: var(--c-muted);
}

/* Where the activity is held — worth saying before somebody drives
   across the country for it. */
.form__place {
  margin-top: 2px;
  font-size: 0.9375rem;
  color: var(--c-muted);
}

/* Honeypot: off-screen rather than display:none, because some bots skip
   anything explicitly hidden. Never focusable, never announced. */
.hp {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- submit --- */
.form__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin-top: 26px;
}

.btn {
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #fff;
  background: var(--c-navy);
  border: 0;
  border-radius: 3px;
  padding: 14px 30px;
  cursor: pointer;
  transition: background-color 0.18s var(--ease);
}
.btn:hover { background: var(--c-red); }
.btn:disabled {
  background: #9ba0b3;
  cursor: not-allowed;
}
.btn:disabled:hover { background: #9ba0b3; }
.btn.is-sending { background: #6d7189; cursor: progress; }

.form__hint {
  font-size: 0.875rem;
  color: var(--c-muted);
}

/* ---------- 7c. Calendar ---------- */
.calendar__loading,
.calendar__error {
  font-size: 0.9375rem;
  color: var(--c-muted);
}
.calendar__error { color: var(--c-red); font-weight: 600; }

.calendar__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}

.calendar__month {
  font-size: 1rem;
  font-weight: 600;
  color: var(--c-navy);
}

.calendar__nav {
  width: 36px;
  height: 36px;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--c-navy);
  background: var(--c-paper);
  border: 1px solid var(--c-rule);
  border-radius: 3px;
  cursor: pointer;
  transition: background-color 0.15s var(--ease), color 0.15s var(--ease);
}
.calendar__nav:hover:not(:disabled) {
  background: var(--c-navy);
  color: #fff;
}
.calendar__nav:disabled { opacity: 0.35; cursor: default; }

.calendar__grid {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.calendar__grid th {
  padding-bottom: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--c-muted);
}
.calendar__grid th abbr { text-decoration: none; }
.calendar__cell { padding: 2px; }

.calendar__day {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--c-navy);
  background: var(--c-paper);
  border: 1px solid var(--c-rule);
  border-radius: 3px;
  cursor: pointer;
  transition: background-color 0.15s var(--ease), color 0.15s var(--ease),
              border-color 0.15s var(--ease);
}
.calendar__day:hover:not(:disabled) {
  background: var(--c-navy);
  border-color: var(--c-navy);
  color: #fff;
}
/* An unavailable day always looks the same, whatever the reason. */
.calendar__day:disabled {
  cursor: not-allowed;
  color: #9297ad;
  background: #eceef5;
  border-color: transparent;
}
/* Weekends are the one exception: darker, to show the week's rhythm. */
.calendar__day--vikend:disabled {
  color: #6f748c;
  background: #ccd0dd;
}
.calendar__day.is-selected,
.calendar__day.is-selected:hover {
  background: var(--c-navy);
  border-color: var(--c-navy);
  color: #fff;
  box-shadow: inset 0 3px 0 0 var(--c-red);
}
.calendar__day:focus-visible {
  outline: 3px solid var(--c-navy);
  outline-offset: 2px;
}

.calendar__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.8125rem;
  color: var(--c-muted);
}
.calendar__legend li {
  display: flex;
  align-items: center;
  gap: 7px;
}
.swatch {
  width: 14px;
  height: 14px;
  border-radius: 2px;
  border: 1px solid var(--c-rule);
}
.swatch--free { background: var(--c-paper); }
.swatch--taken { background: #eceef5; border-color: transparent; }
.swatch--weekend { background: #ccd0dd; border-color: transparent; }
.swatch--picked { background: var(--c-navy); border-color: var(--c-navy); }

.calendar__note {
  margin-top: 14px;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--c-muted);
}

/* ---------- 7d. Confirmation ---------- */
.done {
  max-width: 40rem;
  margin-bottom: clamp(56px, 8vw, 96px);
  padding: clamp(28px, 4vw, 40px);
  background: var(--c-mist);
  border-left: 4px solid var(--c-red);
  border-radius: 0 4px 4px 0;
}
.done:focus { outline: none; }
.done__heading {
  font-size: clamp(1.5rem, 3vw, 1.875rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--c-navy);
}
.done__text {
  margin-top: 14px;
  color: var(--c-muted);
}
.done__text strong { color: var(--c-navy); }
.done__back { margin: 26px 0 0; }

/* ---------- 8. Responsive ---------- */

@media (max-width: 940px) {
  .form__layout { grid-template-columns: 1fr; }
  .options { grid-template-columns: 1fr; }
  .option__name { --name-lines: 0; }
  .option {
    min-height: 0;
    padding: 32px clamp(22px, 5vw, 36px) 30px;
  }
  .option__note { max-width: 54ch; }
  .option__name { min-height: 0; }
  .option__map { width: 34%; max-width: 150px; }
  .lede::after { display: none; }
}

@media (max-width: 620px) {
  .field-row,
  .roster__row,
  .choices { grid-template-columns: 1fr; }
  .btn { width: 100%; }
  .topbar { gap: 14px; }
  :root { --brand-pad-y: 16px; --brand-pad-x: 18px; }
  .topbar__logo { max-width: 168px; }
  .topbar__title {
    font-size: 0.875rem;
    line-height: 1.18;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}

/* ---------- 9. User preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

@media print {
  .skip-link, .lede::after, .option__map { display: none; }
  .topbar { position: static; box-shadow: none; }
  .options { box-shadow: none; }
  .calendar__nav, .form__actions { display: none; }
}