/* Hallmark · macrostructure: Kiosk (bespoke — jednoekranowy formularz, żadna z 21 nie opisuje tej formy)
 * genre: modern-minimal · tone: kliniczny / utylitarny
 * theme: custom "kliniczny" · paper oklch(99% 0.002 240) · accent oklch(46% 0.078 232)
 * axes: paper-band light · display-style condensed-sans · accent-hue neutral-steel
 * type: IBM Plex Sans Condensed (display) + IBM Plex Sans (body) + IBM Plex Mono (meta)
 * enrichment: none — typografia i formularz są treścią
 * states: default · hover · focus · active · disabled · loading · error · success
 * pre-emit critique: P5 H5 E5 S5 R5 V5
 */

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

html, body {
  margin: 0;
  overflow-x: clip;
}

html {
  background: var(--color-paper-2);
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.skip {
  position: absolute;
  left: -9999px;
  top: var(--space-xs);
  padding: var(--space-xs) var(--space-md);
  background: var(--color-ink);
  color: var(--color-paper);
  font-size: var(--text-sm);
  z-index: var(--z-overlay);
}
.skip:focus { left: var(--space-xs); }

/* ── Kiosk ─────────────────────────────────────────────────────────
   Nie centrowana kolumna na środku pustego ekranu — treść jest
   dosunięta do lewej krawędzi mierzonej kolumny, jak formularz
   dokumentacji medycznej. */
.kiosk {
  max-width: 40rem;
  margin-inline: auto;
  padding: var(--space-xl) var(--space-lg) var(--space-3xl);
}

/* ── Nagłówek ──────────────────────────────────────────────────── */
.mast {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-sm);
  padding-bottom: var(--space-md);
  border-bottom: var(--rule-hair) solid var(--color-rule);
  /* Beż marki pojawia się tu i tylko tu — cienka sygnatura pod logo */
  box-shadow: 0 1px 0 0 var(--color-brand);
}

.mast__logo {
  display: block;
  width: 150px;
  height: auto;
  flex: none;
  /* Logo przychodzi z białym tłem — multiply wtapia je w tintowany
     papier, zamiast zostawiać widoczny prostokąt */
  mix-blend-mode: multiply;
}

.mast__event {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
  max-width: 34ch;
}

.mast__event-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-sm);
  line-height: 1.25;
  color: var(--color-ink-2);
  overflow-wrap: anywhere;
}

.mast__event-meta {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--text-xs);
  letter-spacing: 0.01em;
  color: var(--color-neutral);
  font-variant-numeric: tabular-nums;
}

/* ── Wprowadzenie ──────────────────────────────────────────────── */
.lede {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-3xl);
  line-height: 1.02;
  letter-spacing: -0.015em;
  margin: var(--space-xl) 0 var(--space-2xs);
  overflow-wrap: anywhere;
  min-width: 0;
  text-align: center;
}

.lede__sub {
  margin: 0 auto var(--space-xl);
  max-width: 36ch;
  color: var(--color-neutral);
  font-size: var(--text-base);
  text-align: center;
}

/* ── Pole ──────────────────────────────────────────────────────── */
.field { margin-bottom: var(--space-md); }

/* Krótkie pola parujemy w wiersz — kiosk musi zmieścić się w jednym
   ekranie, żeby przycisk nie chował się pod zgięciem */
.row {
  display: grid;
  gap: 0 var(--space-md);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 34rem) {
  .row { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
}

.field label {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: 0.005em;
  color: var(--color-ink-2);
  margin-bottom: var(--space-2xs);
}

.field input {
  display: block;
  width: 100%;
  height: var(--control-h);
  padding: 0 var(--space-md);
  /* Prawa krawędź trzyma stałe miejsce na znacznik błędu — bez reflow */
  padding-right: 2.75rem;
  font-family: inherit;
  font-size: var(--text-lg);
  color: var(--color-ink);
  background: var(--color-paper);
  /* 1px w każdym stanie — grubość ramki nigdy się nie zmienia */
  border: var(--rule-hair) solid var(--color-rule-2);
  border-radius: var(--radius-md);
  /* Slot na pierścień focusu zarezerwowany od startu */
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition: background-color var(--dur-short) var(--ease-out),
              border-color var(--dur-short) var(--ease-out);
}

.field input::placeholder { color: var(--color-muted); }

@media (hover: hover) {
  .field input:hover { background: var(--color-paper-2); }
}

.field input:focus-visible,
.field input:focus {
  outline-color: var(--color-focus);
  border-color: var(--color-ink-2);
  background: var(--color-paper);
}

/* Błąd: kolor ramki + znacznik + komunikat — nigdy sam kolor */
.field.is-error input {
  border-color: var(--color-error);
  background: var(--color-error-wash);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23a02a1f'%3E%3Cpath d='M10 2.2 18.6 17H1.4L10 2.2Zm0 5.1a.85.85 0 0 0-.85.85v3.4a.85.85 0 0 0 1.7 0v-3.4A.85.85 0 0 0 10 7.3Zm0 6.2a1 1 0 1 0 0 2 1 1 0 0 0 0-2Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-md) center;
  background-size: 20px 20px;
}

.field.is-ok input { border-color: var(--color-ok); }

.field input:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Tekst pomocniczy trzyma wysokość jednej linii, żeby pojawienie się
   błędu nie przesuwało formularza w dół */
.help {
  margin: var(--space-2xs) 0 0;
  min-height: 1lh;
  font-size: var(--text-sm);
  line-height: 1.35;
  color: var(--color-neutral);
}
.field.is-error .help { color: var(--color-error); }

/* ── Zgody ─────────────────────────────────────────────────────── */
.consents {
  margin: var(--space-lg) 0 var(--space-md);
  padding: var(--space-md) var(--space-lg) var(--space-sm);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-md);
  background: var(--color-paper-2);
}

.consents legend {
  padding: 0 var(--space-xs);
  margin-left: calc(var(--space-xs) * -1);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-ink-2);
}

.consents.is-error {
  border-color: var(--color-error);
  background: var(--color-error-wash);
}

.consents__intro {
  margin: 0 0 var(--space-md);
  font-size: var(--text-sm);
  color: var(--color-neutral);
}

.check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-sm);
  align-items: start;
  padding: var(--space-sm) 0;
  cursor: pointer;
  /* Cały wiersz jest celem dotyku, nie sam kwadracik */
  min-height: 44px;
}

/* Natywny checkbox przeskalowany i pokolorowany akcentem — pełna
   dostępność klawiatury i czytników za darmo, bez odtwarzania kontrolki */
.check input {
  width: 28px;
  height: 28px;
  margin: 1px 0 0;
  flex: none;
  accent-color: var(--color-accent);
  cursor: pointer;
  outline: 2px solid transparent;
  outline-offset: 3px;
}

.check__text {
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--color-ink-2);
}
.check__text b { font-weight: 600; color: var(--color-ink); }

@media (hover: hover) {
  .check:hover { background: var(--color-paper-3); }
}

.check:has(input:checked) .check__text { color: var(--color-ink); }
.check input:focus-visible { outline-color: var(--color-focus); }

/* ── Klauzula ──────────────────────────────────────────────────── */
.klauzula {
  margin-bottom: var(--space-lg);
  border-top: var(--rule-hair) solid var(--color-rule);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}

.klauzula summary {
  padding: var(--space-md) 0;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-accent);
  outline: 2px solid transparent;
  outline-offset: 2px;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.klauzula summary:focus-visible { outline-color: var(--color-focus); }

.klauzula__body {
  padding-bottom: var(--space-md);
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--color-neutral);
}
.klauzula__body p { margin: 0 0 var(--space-sm); }
.klauzula__body b { color: var(--color-ink-2); font-weight: 600; }

/* ── Przycisk ──────────────────────────────────────────────────── */
.submit {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  width: 100%;
  /* Ta sama wysokość co pola — inaczej formularz czyta się nierówno */
  height: var(--control-h);
  padding: 0 var(--space-lg);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-accent-ink);
  background: var(--color-accent);
  border: var(--rule-hair) solid var(--color-accent);
  border-radius: var(--radius-md);
  cursor: pointer;
  outline: 2px solid transparent;
  outline-offset: 3px;
  transition: background-color var(--dur-short) var(--ease-out),
              transform var(--dur-instant) var(--ease-out);
}

@media (hover: hover) {
  .submit:hover:not(:disabled) { background: var(--color-accent-2); }
}
.submit:focus-visible { outline-color: var(--color-focus); }
.submit:active:not(:disabled) { transform: translateY(1px); }

.submit:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background: var(--color-neutral);
  border-color: var(--color-neutral);
}

.submit__spin {
  display: none;
  width: 18px;
  height: 18px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 640ms linear infinite;
}
.submit.is-loading .submit__spin { display: block; }
.submit.is-loading { pointer-events: none; }

@keyframes spin { to { transform: rotate(360deg); } }

.formstatus {
  margin: var(--space-md) 0 0;
  min-height: 1lh;
  font-size: var(--text-sm);
  color: var(--color-error);
}

/* ── Kolejka offline ───────────────────────────────────────────── */
.queue {
  margin: var(--space-xl) 0 0;
  padding: var(--space-sm) var(--space-md);
  border-left: 2px solid var(--color-accent);
  background: var(--color-accent-wash);
  color: var(--color-ink-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

/* ── Pułapka na boty ───────────────────────────────────────────── */
.trap {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── Podziękowanie ─────────────────────────────────────────────── */
.done {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: grid;
  place-items: center;
  padding: var(--space-xl);
  background: var(--color-paper);
  color: var(--color-ink);
}
.done[hidden] { display: none; }

.done__inner {
  text-align: center;
  max-width: 26rem;
}

.done__mark {
  width: 68px;
  height: 68px;
  color: var(--color-accent);
  margin-bottom: var(--space-lg);
}

.done__tick {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 460ms var(--ease-out) 60ms forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }

.done__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-2xl);
  margin: 0 0 var(--space-2xs);
}

.done__sub {
  margin: 0 0 var(--space-2xl);
  color: var(--color-neutral);
}

.done__next {
  height: var(--control-h);
  padding: 0 var(--space-2xl);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--color-ink);
  background: var(--color-paper);
  border: var(--rule-hair) solid var(--color-rule-2);
  border-radius: var(--radius-md);
  cursor: pointer;
  white-space: nowrap;
  outline: 2px solid transparent;
  outline-offset: 3px;
  transition: background-color var(--dur-short) var(--ease-out);
}
@media (hover: hover) {
  .done__next:hover { background: var(--color-paper-2); }
}
.done__next:focus-visible { outline-color: var(--color-focus); }
.done__next:active { transform: translateY(1px); }

/* ── Szerokości ────────────────────────────────────────────────── */
@media (max-width: 26rem) {
  .kiosk { padding: var(--space-lg) var(--space-md) var(--space-2xl); }
  .lede { font-size: var(--text-2xl); }
  .consents { padding: var(--space-md); }
}

/* Tablet w poziomie na stoisku — trzymamy jedną kolumnę,
   ale skracamy pionowy oddech, żeby przycisk został w zasięgu */
@media (min-width: 48rem) and (orientation: landscape) {
  .kiosk { padding-top: var(--space-lg); }
  .lede { margin-top: var(--space-xl); }
  .lede__sub { margin-bottom: var(--space-xl); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .done__tick { stroke-dashoffset: 0; }
  .submit__spin { animation: none; opacity: 0.6; }
}