/*
 * The kiosk (/kiosk). Plain CSS, independent of the Tailwind build of the web
 * version; every rule uses k- classes, so it never affects the web pages.
 *
 * Sizes are in rem so "Larger text" (html.k-text-large) scales the whole screen,
 * text, buttons and spacing together. At normal size 1rem = 20px.
 *
 *   Text       body 1.2rem (24px), never below 1.05rem (21px); line height 1.5
 *   Targets    choices >= 5.5rem (110px) high, buttons >= 4rem (80px),
 *              >= 1.25rem (25px) apart. Aimed at ~19 mm finger targets on a wall tablet.
 *   Contrast   text >= 7:1 (WCAG AAA 1.4.6), borders of controls >= 3:1 (1.4.11)
 */

.k-root {
  /* Navy and a darkened orange, measured against white */
  --k-ink: #070d65;          /* 16.7:1 */
  --k-ink-soft: #2f3f73;     /* 10.1:1 on white, 9.3:1 on --k-surface-soft */
  --k-surface: #ffffff;
  --k-surface-soft: #f2f6fb;
  --k-border: #5a6b8c;       /* 5.4:1, control boundaries */
  --k-action: #9e2d00;       /* white text on it 7.4:1; a site's brand colour replaces it (config/sites.yml) */
  --k-action-hover: color-mix(in srgb, var(--k-action) 80%, black);
  --k-action-soft: color-mix(in srgb, var(--k-action) 7%, white);
  --k-ok: #006b4f;           /* 6.5:1, used at icon/large-text size */
  --k-ok-soft: #e2f7ef;
  --k-focus: #ff6020;        /* brand orange ring + navy ring: visible on any background */
  --k-radius: 1rem;
  --k-gap: 1.25rem;

  font-size: 125%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.k-root.k-text-large {
  font-size: 150%;
}

.k-root *,
.k-root *::before,
.k-root *::after {
  box-sizing: border-box;
}

.k-body {
  margin: 0 auto;
  max-width: 72rem;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: 1rem 1.5rem 0;
  background: var(--k-surface);
  color: var(--k-ink);
  font-family: Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;
  font-size: 1.2rem;
  line-height: 1.5;
  -webkit-tap-highlight-color: transparent;
}

/* Public mode: no text selection or callouts on the wall tablet */
.k-body[data-kiosk] {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  overscroll-behavior: none;
}

.k-body[data-kiosk] input {
  user-select: text;
  -webkit-user-select: text;
}

.k-root h1,
.k-root h2,
.k-root p,
.k-root ul,
.k-root ol,
.k-root dl,
.k-root dd {
  margin: 0;
}

.k-hidden,
.k-root [hidden] {
  display: none !important;
}

.k-inline {
  display: contents;
}

/* Focus: thick double ring, never removed (WCAG 2.4.7, 2.4.13) */
.k-root :focus-visible {
  outline: 0.25rem solid var(--k-focus);
  outline-offset: 0.2rem;
  box-shadow: 0 0 0 0.2rem var(--k-ink);
}

.k-main:focus {
  outline: none;
}

.k-skip {
  position: absolute;
  left: -100vw;
}

.k-skip:focus {
  left: 1rem;
  top: 1rem;
  z-index: 10;
  padding: 1rem 1.5rem;
  background: var(--k-surface);
  color: var(--k-ink);
}

/* Icons */
.k-icon {
  width: 1.6rem;
  height: 1.6rem;
  flex-shrink: 0;
}

.k-icon--lg { width: 2.2rem; height: 2.2rem; }
.k-icon--choice { width: 2.6rem; height: 2.6rem; color: var(--k-action); }
.k-icon--hero { width: 6rem; height: 6rem; }

.k-flag {
  width: 2.2rem;
  height: 1.5rem;
  border-radius: 0.2rem;
  box-shadow: 0 0 0 1px var(--k-border);
}

/* Header: brand left, then who is signed in, then Home / Help / Sign out */
.k-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem var(--k-gap);
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--k-surface-soft);
}

.k-brand {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--k-ink);
  text-decoration: none;
  min-height: 3.5rem;
  display: inline-flex;
  align-items: center;
}

.k-signed-in {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--k-ink-soft);
  font-size: 1.05rem;
}

.k-header-nav {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.k-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--k-gap);
  padding: 1.5rem 0 2rem;
}

/* Footer with the reading tools, same place on every screen */
.k-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 1rem 0 1.5rem;
  border-top: 2px solid var(--k-surface-soft);
}

/* Text */
.k-title {
  font-size: 2rem;
  line-height: 1.25;
  font-weight: 700;
}

.k-title--xl { font-size: 2.6rem; }

.k-subtitle {
  font-size: 1.45rem;
  line-height: 1.3;
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.k-lead { font-size: 1.35rem; }

.k-progress {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--k-ink-soft);
  margin-bottom: -0.75rem;
}

.k-note {
  font-size: 1.05rem;
  color: var(--k-ink-soft);
}

.k-note--box {
  padding: 1rem 1.25rem;
  border-left: 0.4rem solid var(--k-border);
  background: var(--k-surface-soft);
  border-radius: 0.5rem;
  font-size: 1.2rem;
  color: var(--k-ink);
}

.k-link {
  color: var(--k-ink);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.k-empty {
  padding: 2rem 1.5rem;
  border-radius: var(--k-radius);
  background: var(--k-surface-soft);
  font-size: 1.35rem;
}

.k-summary {
  font-size: 1.5rem;
  line-height: 1.45;
  font-weight: 700;
}

.k-big-fact {
  font-size: 1.5rem;
  font-weight: 700;
}

.k-numbered,
.k-bullets {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-left: 2rem;
}

.k-numbered li::marker {
  font-weight: 700;
}

/* A numbered help step: the number large in a circle, then the sentence */
.k-step {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1.25rem;
  border-radius: var(--k-radius);
  background: var(--k-surface-soft);
}

.k-step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: var(--k-ink);
  color: #fff;
  font-weight: 700;
}

.k-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.k-section {
  padding: 1.25rem 1.5rem;
  border-radius: var(--k-radius);
  background: var(--k-surface-soft);
}

/* Buttons */
.k-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 4rem;
  min-width: 4rem;
  padding: 0.5rem 1.4rem;
  border: 2px solid transparent;
  border-radius: 0.75rem;
  font: inherit;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.k-btn--primary {
  background: var(--k-action);
  color: #fff;
}

.k-btn--primary:hover { background: var(--k-action-hover); }

.k-btn--secondary {
  background: var(--k-surface);
  border-color: var(--k-border);
  color: var(--k-ink);
}

.k-btn--secondary:hover { background: var(--k-surface-soft); }

/* Header and footer buttons: visible boundary, calmer than the main answers */
.k-btn--quiet {
  background: var(--k-surface-soft);
  border-color: var(--k-border);
  color: var(--k-ink);
  font-size: 1.05rem;
  min-height: 3.5rem;
}

.k-btn--quiet[aria-current="page"] {
  background: var(--k-surface);
  border-width: 3px;
}

.k-btn--wide {
  width: 100%;
  min-height: 4.5rem;
}

.k-btn:active,
.k-choice:active {
  transform: scale(0.99);
}

.k-btn[disabled],
.k-btn[aria-busy="true"] {
  cursor: progress;
  opacity: 0.85;
}

.k-back {
  align-self: flex-start;
}

.k-more {
  margin-top: 0.25rem;
}

.k-actions {
  display: grid;
  gap: var(--k-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  margin-top: 0.5rem;
}

.k-actions > .k-btn,
.k-actions form .k-btn,
.k-actions .k-btn {
  min-height: 4.5rem;
  width: 100%;
}

/* Answers: each one a large card-button that goes straight to the next step */
.k-choices {
  display: grid;
  gap: var(--k-gap);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
  padding: 0;
  list-style: none;
}

.k-choices--stack {
  grid-template-columns: minmax(0, 1fr);
  max-width: 48rem;
}

.k-choices > li {
  min-width: 0;
}

.k-choices--times {
  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
}

.k-choice {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  width: 100%;
  height: 100%;
  min-height: 5.5rem;
  padding: 1rem 1.25rem;
  border: 2px solid var(--k-border);
  border-radius: var(--k-radius);
  background: var(--k-surface);
  color: var(--k-ink);
  text-decoration: none;
}

.k-choice:hover {
  border-color: var(--k-action);
  background: var(--k-action-soft);
}

.k-choice[aria-current] {
  border-width: 4px;
  border-color: var(--k-ink);
}

.k-choice-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.k-choice-text strong {
  font-size: 1.35rem;
  line-height: 1.3;
  overflow-wrap: break-word;
}

.k-choice-text span {
  font-size: 1.05rem;
  color: var(--k-ink-soft);
}

.k-choice-arrow {
  width: 2rem;
  height: 2rem;
  color: var(--k-ink);
}

.k-choice--time {
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Day screen: Today and Tomorrow as the two big answers, side by side where there is room */
.k-choices--days {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}

.k-choice--day {
  min-height: 5.5rem;
  padding-block: 0.75rem;
  border-width: 3px;
  border-color: var(--k-ink);
}

.k-choice--day .k-choice-text strong {
  font-size: 2rem;
  line-height: 1.15;
}

.k-choice--day .k-choice-text span {
  font-size: 1.2rem;
}

.k-subtitle--tight {
  margin: 0.25rem 0 -0.25rem;
}

/* Other days: a tear-off calendar leaf with the weekday in full */
.k-choices--dates {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
}

.k-choice--date {
  min-height: 5rem;
  padding: 0.6rem 1rem;
}

.k-leaf {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 3.6rem;
  height: 3.6rem;
  border: 2px solid var(--k-ink);
  border-top: 0.6rem solid var(--k-action);
  border-radius: 0.5rem;
  font-size: 1.7rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* "Earlier or later?" / "Longer": a way out, calmer than the answers themselves */
.k-choices-full {
  grid-column: 1 / -1;
}

.k-choice--quiet {
  min-height: 4.5rem;
  background: var(--k-surface-soft);
}

/* End times: the time big, how long below it */
.k-choice--end {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
}

.k-choice--end strong {
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
}

.k-choice--end span {
  font-size: 1.05rem;
  color: var(--k-ink-soft);
}

/* Not choosable, but the reason stays readable: dashed border, full-contrast text */
.k-choice--unavailable {
  border-style: dashed;
  background: var(--k-surface-soft);
}

.k-choice--unavailable .k-icon--choice {
  color: var(--k-ink-soft);
}

.k-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.4rem;
  height: 2.4rem;
  padding: 0 0.5rem;
  border-radius: 1.2rem;
  background: var(--k-ink);
  color: #fff;
  font-weight: 700;
}

.k-tag {
  align-self: flex-start;
  margin-top: 0.35rem;
  padding: 0.15rem 0.6rem;
  border: 2px solid var(--k-ink);
  border-radius: 0.4rem;
  font-weight: 700;
}

/* Cards (reservations, current ride) */
.k-list {
  display: flex;
  flex-direction: column;
  gap: var(--k-gap);
  padding: 0;
  list-style: none;
}

.k-card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.25rem 1.5rem;
  border: 2px solid var(--k-border);
  border-radius: var(--k-radius);
}

.k-card--active {
  border: 4px solid var(--k-action);
  background: var(--k-action-soft);
}

.k-card-title {
  font-size: 1.45rem;
  line-height: 1.3;
}

.k-status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
}

.k-status--active .k-icon,
.k-status--confirmed .k-icon { color: var(--k-ok); }
.k-status--pending .k-icon { color: var(--k-action); }

/* Facts on the check screen */
.k-facts {
  display: grid;
  gap: 0.25rem;
  padding: 1rem 1.5rem;
  border: 2px solid var(--k-border);
  border-radius: var(--k-radius);
}

.k-facts > div {
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: 0.25rem 1.5rem;
  padding: 0.6rem 0;
}

.k-facts > div + div {
  border-top: 1px solid var(--k-surface-soft);
}

.k-facts dt {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--k-ink-soft);
}

.k-facts dd {
  font-weight: 700;
}

.k-checklist {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0;
  list-style: none;
  font-size: 1.35rem;
}

.k-checklist li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.k-checklist .k-icon {
  width: 2rem;
  height: 2rem;
  color: var(--k-ok);
}

/* Messages: icon + words + colour */
.k-message {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
  padding: 1rem 1.25rem;
  border-radius: var(--k-radius);
  border: 2px solid;
  font-size: 1.2rem;
  font-weight: 700;
}

.k-message--ok {
  border-color: var(--k-ok);
  background: var(--k-ok-soft);
  color: var(--k-ink);
}

.k-message--ok .k-icon { color: var(--k-ok); }

.k-message--problem {
  border-color: var(--k-action);
  background: var(--k-action-soft);
  color: var(--k-ink);
}

.k-message--problem .k-icon { color: var(--k-action); }

/* Sign-in */
.k-welcome {
  display: grid;
  gap: 2rem;
  align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  flex: 1;
}

.k-welcome-text {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.k-welcome .k-numbered {
  font-size: 1.45rem;
  gap: 1rem;
}

.k-tag-illustration {
  justify-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14rem;
  height: 14rem;
  border-radius: 50%;
  background: var(--k-surface-soft);
  border: 4px solid var(--k-border);
  color: var(--k-action);
}

.k-alternative {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  padding: 1.25rem 1.5rem;
  border-radius: var(--k-radius);
  background: var(--k-surface-soft);
}

.k-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 40rem;
}

.k-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.k-label {
  font-weight: 700;
}

.k-input-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.k-input-row .k-input {
  flex: 1 1 16rem;
}

.k-input {
  min-height: 4rem;
  width: 100%;
  padding: 0.5rem 1rem;
  border: 2px solid var(--k-border);
  border-radius: 0.75rem;
  background: var(--k-surface);
  color: var(--k-ink);
  font: inherit;
  font-size: 1.35rem;
}

.k-check {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 4rem;
}

.k-check input {
  width: 2rem;
  height: 2rem;
  accent-color: var(--k-action);
}

/* Done screen */
.k-done {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
}

.k-done-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 7rem;
  height: 7rem;
  border-radius: 50%;
  background: var(--k-ok);
  color: #fff;
}

.k-done-mark .k-icon--hero { width: 4.5rem; height: 4.5rem; }
.k-done-mark--pending { background: var(--k-action); }

/* Idle dialog */
.k-dialog {
  width: min(40rem, calc(100vw - 2rem));
  padding: 2rem;
  border: 4px solid var(--k-ink);
  border-radius: var(--k-radius);
  color: var(--k-ink);
  display: none;
  flex-direction: column;
  gap: 1.25rem;
}

.k-dialog[open] {
  display: flex;
}

.k-dialog::backdrop {
  background: rgb(7 13 101 / 0.6);
}

/* Development only */
.k-dev-scan {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  max-width: 22rem;
  padding: 0.5rem 1rem;
  border: 2px dashed var(--k-action);
  background: #fff;
  font-size: 0.8rem;
}

.k-dev-scan button {
  display: block;
  width: 100%;
  margin-top: 0.4rem;
  font: inherit;
  text-align: left;
}

/* Page header: Back, then the step and the question */
.k-page-header {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.k-page-heading {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.k-page-heading .k-progress { margin-bottom: 0; }

/* A list that pages itself (fit_controller.js) */
.k-fit {
  display: flex;
  flex-direction: column;
  gap: var(--k-gap);
}

.k-pager {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--k-gap);
}

.k-pager .k-btn { width: 100%; }

.k-choices--wide {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
}

.k-choices--tiles {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr));
}

.k-columns {
  display: grid;
  gap: var(--k-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  align-items: start;
}

/*
 * Kiosk / tablet in landscape: an app shell exactly as high as the screen.
 * Menu and reading tools in a column on the left, the screen's question on
 * the right. Lists page themselves to fit, so nothing scrolls. If something
 * still doesn't fit (a keyboard on screen), the content area scrolls rather
 * than hiding anything.
 */
@media (min-width: 56rem) and (orientation: landscape) {
  .k-body {
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "menu  flash"
      "menu  main"
      "tools main";
    column-gap: 2rem;
    height: 100dvh;
    min-height: 0;
    max-width: none;
    padding: 1.25rem 1.5rem;
    overflow: hidden;
  }

  .k-header {
    grid-area: menu;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0.75rem;
    padding: 0 1.5rem 0 0;
    border-bottom: 0;
    border-right: 2px solid var(--k-surface-soft);
  }

  .k-header-nav {
    margin-left: 0;
    flex-direction: column;
    flex-wrap: nowrap;
  }

  .k-tools {
    grid-area: tools;
    flex-direction: column;
    flex-wrap: nowrap;
    padding: 1rem 1.5rem 0 0;
    border-top: 0;
    border-right: 2px solid var(--k-surface-soft);
  }

  .k-header-nav .k-btn,
  .k-tools .k-btn {
    width: 100%;
    justify-content: flex-start;
    text-align: left;
  }

  .k-flash {
    grid-area: flash;
    margin-bottom: 1rem;
  }

  .k-flash .k-message { margin-top: 0; }
  .k-flash .k-message + .k-message { margin-top: 0.75rem; }

  .k-main {
    grid-area: main;
    min-height: 0;
    overflow-y: auto;
    padding: 0;
    gap: 1rem;
  }

  /* Back on the same row as the question */
  .k-page-header--back {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 1.5rem;
  }

  /* Takes the height that is left; the controller shows what fits in it. Never
     clips: on a very cramped screen at least one answer shows and the area scrolls. */
  .k-fit {
    flex: 1 1 0;
    min-height: 11rem;
  }

  .k-choices--tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .k-choices--tiles .k-choice {
    position: relative;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
  }

  .k-choices--tiles .k-choice-arrow { display: none; }
  .k-choices--tiles .k-count { position: absolute; top: 1rem; right: 1rem; }

  /* Reservations: details left, buttons right */
  .k-list .k-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(14rem, 18rem);
    column-gap: 1.5rem;
    row-gap: 0.25rem;
    align-items: center;
  }

  .k-list .k-card > :not(.k-actions) { grid-column: 1; }
  .k-list .k-card > .k-actions {
    grid-column: 2;
    grid-row: 1 / span 3;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    margin: 0;
  }

  .k-list .k-card .k-actions .k-btn { min-height: 4rem; }

  /* Check screen: the four facts in two columns */
  .k-facts {
    grid-template-columns: 1fr 1fr;
    column-gap: 1.5rem;
  }

  .k-facts > div {
    grid-template-columns: 1fr;
  }

  .k-facts > div + div { border-top: 0; }

  /* The answer buttons of a screen stay at the bottom and never scroll out of view */
  .k-main > .k-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    position: sticky;
    bottom: 0;
    margin-top: auto;
    padding-top: 1rem;
    background: var(--k-surface);
  }

  .k-done-mark { width: 5rem; height: 5rem; }
  .k-done-mark .k-icon--hero { width: 3.2rem; height: 3.2rem; }
  .k-summary { font-size: 1.35rem; }
}

/* Small screens (own phone in private mode) */
@media (max-width: 40rem) {
  .k-body { padding: 0.75rem 1rem 0; }
  .k-title { font-size: 1.7rem; }
  .k-title--xl { font-size: 2rem; }
  .k-header-nav {
    margin-left: 0;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr));
  }
  .k-header-nav .k-btn { flex-direction: column; gap: 0.15rem; padding: 0.4rem; width: 100%; }
  /* Icon above the words, so a long word never has to break */
  .k-choice { position: relative; flex-direction: column; align-items: flex-start; gap: 0.5rem; padding: 0.9rem 1rem; }
  .k-choice--time { align-items: center; }
  .k-choice--date { flex-direction: row; align-items: center; } /* the leaf is narrow; keep it beside the weekday */
  .k-choice-text { width: 100%; }
  .k-icon--choice { width: 2rem; height: 2rem; }
  .k-choice-arrow { display: none; }  /* the whole card is the button; the arrow costs width */
  .k-count { position: absolute; top: 0.75rem; right: 0.75rem; }
  .k-facts > div { grid-template-columns: 1fr; }
}

/* No movement for people who asked for less (WCAG 2.3.3) */
@media (prefers-reduced-motion: reduce) {
  .k-btn:active,
  .k-choice:active { transform: none; }
}

/* Windows high contrast and similar: keep boundaries and the focus ring */
@media (forced-colors: active) {
  .k-choice,
  .k-btn,
  .k-card,
  .k-message { border: 2px solid CanvasText; }
  .k-root :focus-visible { outline-color: Highlight; }
}

/* Setup: location cards with a radio button */
.k-form--wide { max-width: none; }

.k-fieldset {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  border: 0;
}

.k-choice--radio { cursor: pointer; }

.k-choice--radio input {
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  accent-color: var(--k-action);
}

.k-choice--radio:has(input:checked) {
  border-width: 4px;
  border-color: var(--k-action);
  background: var(--k-action-soft);
}