/* The sign-ups pages: the form (zapisy.html) and a sent form's page (zgloszenie.html). Builds on
   style.css and profil.css (the bar). One calm blue: shades of it and white, nothing yellow. */

.sf-body {
  --sf-text: white;
  --sf-muted: oklch(88% 0.04 250);
  --sf-faint: oklch(78% 0.05 250);
  --sf-accent: oklch(86% 0.09 230);        /* sky blue: what is on, chosen, focused */
  --sf-accent-deep: oklch(70% 0.13 240);
  --sf-surface: rgb(255 255 255 / 0.07);
  --sf-surface-2: rgb(255 255 255 / 0.12);
  --sf-line: rgb(255 255 255 / 0.14);
  --sf-field: rgb(12 24 72 / 0.28);
  --sf-ok: oklch(88% 0.1 195);             /* paid, booked: a cyan, still blue */
  --sf-bad: oklch(80% 0.1 20);
  --sf-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  background:
    radial-gradient(60rem 40rem at 50% -10rem, rgb(255 255 255 / 0.12), transparent 70%),
    linear-gradient(170deg, #4479c0, #3c64ae 55%, #3a58a3);
  background-attachment: fixed;
}

.sf-page { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: start; gap: 1.25rem; min-height: 100svh; padding: 1rem 1rem 4rem; }

/* ---- the head */

.sf-head { display: grid; justify-items: center; gap: 0.35rem; max-width: 36rem; margin-top: 3.75rem; text-align: center; }
.sf-kicker { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.35em; text-transform: uppercase; color: var(--sf-accent); }
.sf-title { font-size: clamp(2.2rem, 8vw, 3.25rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.01em; text-wrap: balance; }
.sf-info { white-space: pre-line; color: var(--sf-muted); }
/* The stay at a glance: its season, dates and length (from /settings), no price. */
.sf-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin: 0.25rem 0 0.25rem; }
.sf-facts[hidden] { display: none; }
.sf-fact { padding: 0.35rem 0.8rem; border-radius: 0.375rem; background: var(--sf-surface); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.14); font-size: 0.95rem; font-weight: 600; }
.sf-info:empty { display: none; }

/* ---- boxes and the card */

.sf-box { display: grid; justify-items: center; gap: 0.6rem; width: 100%; max-width: 38rem; margin-top: 1rem; text-align: center; }
.sf-big { font-size: 1.6rem; font-weight: 800; }
.sf-muted { color: var(--sf-muted); }
.sf-hint { font-size: 0.85rem; color: var(--sf-faint); }
.sf-hint:empty { display: none; }

.sf-card {
  width: 100%;
  max-width: 38rem;
  padding: clamp(1.1rem, 4vw, 1.75rem);
  border-radius: 0.625rem;
  background: linear-gradient(165deg, rgb(255 255 255 / 0.13), rgb(255 255 255 / 0.05));
  box-shadow: inset 0 0 0 1px var(--sf-line), 0 1.5rem 3rem -1.5rem rgb(10 20 70 / 0.45);
  backdrop-filter: blur(6px);
}
.sf-form { display: grid; gap: 1.75rem; }
.sf-form[hidden], .sf-box[hidden] { display: none; }

/* A host admin's quick test buttons: small, at the top of the form. */
/* With an account: where the mail goes, plain to see above the second address. */
.sf-mail-to { padding: 0.8rem 1rem; border-radius: 0.5rem; background: color-mix(in oklch, var(--sf-accent) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--sf-accent) 35%, transparent); }
.sf-mail-to p { display: grid; gap: 0.2rem; margin: 0; }
.sf-mail-to strong { font-size: 1.05rem; font-weight: 600; color: white; text-wrap: balance; }
.sf-mail-to b { font-weight: 800; color: var(--sf-accent); overflow-wrap: anywhere; }
.sf-mail-to small { font-size: 0.85rem; color: var(--sf-muted); }
/* The envelope in the heading's own line, so the text keeps the whole width. */
.sf-mail-icon { margin-right: 0.15rem; }
/* One row: the two buttons on the left, the add/replace switch on the right (wrapping only on a phone). */
.sf-testers { display: flex; flex-wrap: nowrap; align-items: center; gap: 0.4rem; padding-bottom: 1rem; border-bottom: 1px dashed var(--sf-line); }
.sf-testers[hidden] { display: none; }
.sf-testers .sf-button { padding: 0.35rem 0.6rem; font-size: 0.8rem; white-space: nowrap; }
.sf-testers kbd { margin-left: 0.25rem; font: 600 0.65rem/1 ui-monospace, monospace; color: var(--sf-faint); }
.sf-modes { display: inline-flex; align-items: center; gap: 2px; margin-left: auto; white-space: nowrap; }
.sf-modes button { padding: 0.35rem 0.55rem; border-radius: 0.25rem; background: rgb(255 255 255 / 0.08); color: var(--sf-muted); font-size: 0.8rem; cursor: pointer; transition: background 120ms, color 120ms; }
.sf-modes button[aria-pressed="true"] { background: color-mix(in oklch, var(--sf-accent) 30%, transparent); color: white; font-weight: 700; }
.sf-account { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--sf-line); color: var(--sf-muted); font-size: 0.95rem; }

/* ---- who goes: two choices side by side */

.sf-who { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.sf-choice {
  position: relative;
  display: flex;
  gap: 0.75rem;
  align-items: center;
  padding: 0.85rem 1rem;
  border-radius: 0.5rem;
  background: var(--sf-surface);
  box-shadow: inset 0 0 0 1px var(--sf-line);
  cursor: pointer;
  transition: background 150ms, box-shadow 150ms, transform 150ms var(--sf-ease);
}
.sf-choice:hover { background: var(--sf-surface-2); transform: translateY(-1px); }
.sf-choice input { position: absolute; opacity: 0; pointer-events: none; }
.sf-choice svg { width: 2.1rem; height: 2.1rem; flex: none; fill: none; stroke: var(--sf-faint); stroke-width: 1.8; stroke-linecap: round; transition: stroke 150ms; }
.sf-choice > span { display: grid; gap: 0.1rem; line-height: 1.25; }
.sf-choice strong { font-weight: 700; }
.sf-choice small { font-size: 0.8rem; color: var(--sf-faint); }
.sf-choice:has(input:checked) { background: rgb(255 255 255 / 0.16); box-shadow: inset 0 0 0 2px var(--sf-accent), 0 0.5rem 1.5rem -0.75rem rgb(150 210 255 / 0.6); }
.sf-choice:has(input:checked) svg { stroke: var(--sf-accent); }
.sf-choice:has(input:focus-visible) { outline: 2px solid white; outline-offset: 2px; }

/* ---- steps */

.sf-step { display: grid; gap: 1rem; }
.sf-step[hidden] { display: none; }
.sf-step-head { display: flex; align-items: baseline; gap: 0.6rem; }
.sf-step-head h2 { font-size: 1.15rem; font-weight: 800; }
.sf-step-head .sf-muted { margin-left: auto; font-size: 0.85rem; }
.sf-num {
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  flex: none;
  align-self: center;
  border-radius: 50%;
  background: var(--sf-accent);
  font-size: 0.85rem;
  font-weight: 800;
  color: #21366f;
}

/* ---- fields */

.sf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
.sf-wide { grid-column: 1 / -1; }
.sf-field { display: grid; gap: 0.35rem; align-content: start; min-width: 0; }
.sf-field[hidden] { display: none; }
.sf-field > span { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em; color: var(--sf-muted); }
.sf-field > span small { margin-left: 0.3rem; font-weight: 400; color: var(--sf-faint); }
.sf-field input, .sf-field textarea {
  width: 100%;
  padding: 0.65rem 0.8rem;
  border-radius: 0.375rem;
  background: var(--sf-field);
  box-shadow: inset 0 0 0 1px var(--sf-line);
  font: inherit;
  color: var(--sf-text);
  transition: background 150ms, box-shadow 150ms;
}
.sf-field textarea { resize: vertical; min-height: 3.2rem; }
.sf-field input::placeholder, .sf-field textarea::placeholder { color: rgb(220 232 255 / 0.4); }
.sf-field input:hover, .sf-field textarea:hover { background: rgb(12 24 72 / 0.36); }
.sf-field input:focus, .sf-field textarea:focus { outline: none; background: rgb(12 24 72 / 0.42); box-shadow: inset 0 0 0 2px var(--sf-accent), 0 0 0 4px rgb(150 210 255 / 0.15); }
.sf-field input[readonly] { color: var(--sf-muted); box-shadow: none; background: rgb(255 255 255 / 0.05); }
.sf-field.sf-invalid input { box-shadow: inset 0 0 0 2px var(--sf-bad); }

/* ---- participants: one row each, a number, name and date side by side */

.sf-people { display: grid; }
.sf-person { overflow: hidden; }
.sf-person.leaving { pointer-events: none; }
.sf-person + .sf-person .sf-person-inner { margin-top: 0.75rem; }
.sf-person-inner {
  display: grid;
  grid-template-columns: auto 1fr 9.5rem auto;
  gap: 0 0.75rem;
  align-items: end;
  padding: 0.9rem 0.9rem 0.9rem 0.75rem;
  border-radius: 0.5rem;
  background: var(--sf-surface);
}
.sf-badge {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2.6rem;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--sf-faint);
  font-variant-numeric: tabular-nums;
}
.sf-remove {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.6rem;
  border-radius: 0.375rem;
  color: var(--sf-faint);
  cursor: pointer;
  transition: background 120ms, color 120ms;
}
.sf-remove svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.sf-remove:hover { background: rgb(255 255 255 / 0.12); color: white; }
/* With one person the ✕ fades out but keeps its place, so the fields never jump. */
.sf-remove { transition: background 120ms, color 120ms, opacity 180ms, transform 180ms var(--sf-ease); }
.sf-remove.off, .sf-remove.off:disabled { opacity: 0; transform: scale(0.6); pointer-events: none; }
.sf-remove:disabled { cursor: default; }
/* The sibling box: its row folds open and shut (grid rows 0fr ↔ 1fr), instead of popping. */
.sf-fold { grid-column: 2 / -1; display: grid; grid-template-rows: 0fr; opacity: 0.3; transition: grid-template-rows 260ms var(--sf-ease), opacity 260ms; }
.sf-fold > div { min-height: 0; overflow: hidden; }
.sf-fold-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 1rem; }
.sf-fold-row > * { padding-top: 0.7rem; }
/* This person's price, beside the sibling box: the discount, the old price struck through, the new. */
.sf-price-slot { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 0.3rem 0.9rem; margin-left: auto; }
.sf-first[hidden] { display: none; }
.sf-first { color: white; font-weight: 600; }
.sf-person-price { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; gap: 0.15rem 0.5rem; font-variant-numeric: tabular-nums; }
.sf-person-price > * { white-space: nowrap; }
.sf-person-price strong { font-size: 0.95rem; }
.sf-person-price s { font-size: 0.8rem; color: var(--sf-faint); }
/* Above the form: the discounts there are. */
.sf-perks { display: grid; justify-items: center; gap: 0.5rem; text-align: center; }
.sf-perks[hidden] { display: none; }
.sf-perks-title { font-weight: 800; font-size: 1.05rem; }
.sf-perks-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; }
.sf-perks-list .sf-deal { font-size: 0.9rem; padding: 0.3rem 0.65rem; }
/* A discount: what it is for and how much, standing out from the price beside it. */
.sf-deal {
  display: inline-block;
  padding: 0.15rem 0.45rem;
  border-radius: 0.25rem;
  background: color-mix(in oklch, var(--sf-accent) 26%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--sf-accent) 45%, transparent);
  font-size: 0.78rem;
  font-weight: 700;
  color: white;
}
.sf-deal::first-letter { text-transform: uppercase; }
.sf-person-price .sf-wait { font-size: 0.75rem; color: var(--sf-muted); }
.sf-bill-wait { font-size: 0.8rem; color: var(--sf-faint); }
/* One person: the sibling box fades out but keeps its place, so the price beside it stays put. */
.sf-fold-row .sf-check { transition: opacity 180ms; }
.sf-fold-row .sf-check.off { opacity: 0; pointer-events: none; }
.sf-fold.open { grid-template-rows: 1fr; opacity: 1; }
.sf-add {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.7rem;
  border-radius: 0.5rem;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.22);
  background: transparent;
  font-weight: 600;
  color: var(--sf-muted);
  cursor: pointer;
  transition: background 150ms, color 150ms, box-shadow 150ms;
}
.sf-add span { font-size: 1.15rem; line-height: 1; }
.sf-add:hover { background: var(--sf-surface); color: white; box-shadow: inset 0 0 0 1px var(--sf-accent); }
.sf-add[hidden] { display: none; }

/* ---- checkboxes: a drawn tick */

.sf-check { display: flex; gap: 0.6rem; align-items: center; cursor: pointer; }
.sf-check[hidden] { display: none; }
.sf-check input { position: absolute; opacity: 0; pointer-events: none; }
.sf-tick {
  display: grid;
  place-items: center;
  width: 1.3rem;
  height: 1.3rem;
  flex: none;
  border-radius: 0.3rem;
  background: var(--sf-field);
  box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.4);
  transition: background 150ms, box-shadow 150ms, transform 150ms var(--sf-ease);
}
.sf-tick svg { width: 0.9rem; height: 0.9rem; fill: none; stroke: #21366f; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 16; stroke-dashoffset: 16; transition: stroke-dashoffset 220ms var(--sf-ease) 40ms; }
.sf-check:hover .sf-tick { box-shadow: inset 0 0 0 1.5px var(--sf-accent); }
.sf-check input:checked + .sf-tick { background: var(--sf-accent); box-shadow: none; transform: scale(1.06); }
.sf-check input:checked + .sf-tick svg { stroke-dashoffset: 0; }
.sf-check input:focus-visible + .sf-tick { outline: 2px solid white; outline-offset: 2px; }
.sf-small { font-size: 0.85rem; color: var(--sf-muted); }
.sf-small .sf-tick { width: 1.1rem; height: 1.1rem; }

/* ---- the summary: a bill */

.sf-bill { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.sf-bill li { display: flex; align-items: baseline; gap: 0.5rem; }
.sf-bill li::after { content: ''; order: 1; flex: 1; border-bottom: 1px dotted rgb(255 255 255 / 0.25); transform: translateY(-0.3em); }
.sf-bill .sf-bill-name { order: 0; }
.sf-bill .sf-bill-price { order: 2; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.15rem 0.5rem; align-items: baseline; font-variant-numeric: tabular-nums; }
.sf-bill-price > * { white-space: nowrap; }
.sf-bill s { font-size: 0.85rem; color: var(--sf-faint); }
.sf-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 0.75rem; border-top: 1px solid var(--sf-line); }
.sf-total span { font-weight: 600; color: var(--sf-muted); }
.sf-total strong { font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; }

/* ---- sending */

.sf-send { display: grid; justify-items: center; gap: 1rem; padding-top: 1.5rem; border-top: 1px solid var(--sf-line); }
.sf-link { padding: 0; font: inherit; color: var(--sf-accent); text-decoration: underline; text-decoration-color: rgb(150 210 255 / 0.5); text-underline-offset: 0.2em; cursor: pointer; transition: text-decoration-color 150ms; }
.sf-link:hover { text-decoration-color: currentColor; }
.sf-error { justify-self: stretch; padding: 0.65rem 0.9rem; border-radius: 0.375rem; background: rgb(120 20 40 / 0.3); box-shadow: inset 3px 0 0 var(--sf-bad); color: #ffe1e6; }
.sf-error[hidden] { display: none; }

.sf-button {
  padding: 0.6rem 1.2rem;
  border-radius: 0.375rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 150ms, transform 150ms var(--sf-ease), box-shadow 150ms, color 150ms;
}
.sf-button-quiet { background: var(--sf-surface-2); color: white; }
.sf-button-quiet:hover { background: rgb(255 255 255 / 0.2); }
.sf-submit {
  position: relative;
  overflow: hidden;
  min-width: 14rem;
  padding: 0.85rem 2rem;
  background: linear-gradient(180deg, #ffffff, #d8ecff);
  box-shadow: 0 0.75rem 1.5rem -0.75rem rgb(10 20 70 / 0.6);
  font-size: 1.1rem;
  color: #22387a;
}
.sf-submit:hover { transform: translateY(-2px); box-shadow: 0 1rem 2rem -0.75rem rgb(10 20 70 / 0.7); }
.sf-submit:active { transform: translateY(0); }
.sf-submit:disabled { cursor: progress; transform: none; }
/* Sending: a light runs across the button. */
.sf-submit:disabled::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgb(150 210 255 / 0.55) 50%, transparent 70%);
  animation: sf-sweep 900ms linear infinite;
}
.sf-button:focus-visible { outline: 2px solid white; outline-offset: 3px; }

/* ---- one's forms (signed in) */

.sf-mine { display: grid; gap: 0.5rem; width: 100%; margin: 0; padding: 0; list-style: none; text-align: left; }
.sf-mine li { display: grid; gap: 0.1rem; padding: 0.75rem 1rem; border-radius: 0.5rem; background: var(--sf-surface); }
.sf-mine a { font-weight: 700; color: white; text-decoration: underline; text-decoration-color: rgb(150 210 255 / 0.5); text-underline-offset: 0.2em; }
.sf-mine small { color: var(--sf-muted); }

/* ---- the rules window */

.sf-rules {
  /* The page's reset takes a dialog's own margins away, and with them its place in the middle. */
  margin: auto;
  width: min(42rem, calc(100% - 2rem));
  max-height: calc(100svh - 2rem);
  padding: clamp(1.25rem, 4vw, 2rem);
  border: 0;
  border-radius: 0.625rem;
  background: linear-gradient(170deg, #3f6fb6, #34539c);
  box-shadow: inset 0 0 0 1px var(--sf-line), 0 2rem 4rem -1rem rgb(5 10 40 / 0.6);
  color: white;
}
.sf-rules::backdrop { background: rgb(8 16 50 / 0.55); backdrop-filter: blur(3px); }
.sf-rules h2 { margin-bottom: 1.25rem; font-size: 1.5rem; font-weight: 800; text-align: center; }
.sf-rules ol { display: grid; gap: 0.85rem; margin: 0 0 1.25rem; padding-left: 1.6rem; }
.sf-rules li { padding-left: 0.25rem; white-space: pre-line; line-height: 1.5; color: var(--sf-muted); }
.sf-rules li::marker { font-weight: 800; color: var(--sf-accent); }
.sf-rules [data-rules-file] { margin-bottom: 1rem; text-align: center; }
.sf-rules [data-rules-file][hidden] { display: none; }
.sf-rules a { color: var(--sf-accent); }
.sf-rules-actions { position: sticky; bottom: calc(-1 * clamp(1.25rem, 4vw, 2rem)); display: flex; justify-content: center; gap: 0.75rem; margin: 0 calc(-1 * clamp(1.25rem, 4vw, 2rem)) calc(-1 * clamp(1.25rem, 4vw, 2rem)); padding: 1rem; background: linear-gradient(transparent, #34539c 35%); }
.sf-rules-actions .sf-submit { min-width: 10rem; padding: 0.6rem 1.5rem; font-size: 1rem; }

/* ---- a sent form's page (zgloszenie.html) */

.sf-thanks { display: grid; justify-items: center; gap: 0.6rem; width: 100%; max-width: 38rem; text-align: center; color: var(--sf-muted); }
.sf-thanks[hidden] { display: none; }
.sf-thanks .sf-big { color: white; }
.sf-done {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--sf-accent);
}
.sf-done svg { width: 1.8rem; height: 1.8rem; fill: none; stroke: #21366f; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 30; stroke-dashoffset: 30; animation: sf-draw 500ms var(--sf-ease) 300ms forwards; }
.sf-section { display: grid; gap: 0.75rem; }
.sf-section[hidden] { display: none; }
.sf-section + .sf-section { padding-top: 1.25rem; border-top: 1px solid var(--sf-line); }
.sf-section h2 { font-size: 1.05rem; font-weight: 800; }
.sf-text { white-space: pre-line; color: var(--sf-muted); }
.sf-text[hidden] { display: none; }
.sf-card.sf-sheet { display: grid; gap: 1.25rem; }
.sf-card[hidden] { display: none; }
.sf-rows { display: grid; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.sf-row { display: grid; gap: 0.25rem; padding: 0.8rem 1rem; border-radius: 0.5rem; background: var(--sf-surface); box-shadow: inset 3px 0 0 var(--sf-faint); }
.sf-row.ok { box-shadow: inset 3px 0 0 var(--sf-ok); }
.sf-row.odrzucone { opacity: 0.65; box-shadow: inset 3px 0 0 rgb(255 255 255 / 0.25); }
.sf-row-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 1rem; }
.sf-row-head strong { font-size: 1.05rem; }
.sf-status { font-size: 0.85rem; font-weight: 600; color: var(--sf-muted); }
.sf-row.ok .sf-status { color: var(--sf-ok); }
.sf-money { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; font-variant-numeric: tabular-nums; color: var(--sf-muted); }
.sf-money b { font-weight: 700; color: white; }
.sf-row small { font-size: 0.8rem; color: var(--sf-faint); }
.sf-progress { height: 0.3rem; border-radius: 0.15rem; background: rgb(255 255 255 / 0.12); overflow: hidden; }
.sf-progress i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--sf-accent-deep), var(--sf-ok)); transition: width 700ms var(--sf-ease) 300ms; }

/* ---- motion: things rise into place, people grow in and out (zapisy.js) */

@keyframes sf-rise { from { opacity: 0.35; transform: translateY(14px); } }
@keyframes sf-sweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@keyframes sf-draw { to { stroke-dashoffset: 0; } }
@keyframes sf-shake { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
@keyframes sf-pop { from { transform: scale(0.96); opacity: 0.4; } }

.sf-rise { animation: sf-rise 520ms var(--sf-ease) backwards; animation-delay: calc(var(--i, 0) * 70ms); }
.sf-error:not([hidden]) { animation: sf-shake 360ms ease; }
.sf-rules[open] { animation: sf-pop 220ms var(--sf-ease); }
.sf-flash { animation: sf-pop 260ms var(--sf-ease); }

/* Switching who goes (zapisy.js, glide): the parts glide to their new places. */
::view-transition-group(*) { animation-duration: 280ms; animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); }

@media (prefers-reduced-motion: reduce) {
  .sf-rise, .sf-error:not([hidden]), .sf-rules[open], .sf-flash, .sf-done svg { animation: none; }
  .sf-done svg { stroke-dashoffset: 0; }
  .sf-submit:disabled::after { animation: none; }
  .sf-choice, .sf-tick, .sf-tick svg, .sf-button, .sf-progress i, .sf-remove, .sf-fold { transition: none; }
}

/* ---- narrow screens: one column */

@media (max-width: 560px) {
  .sf-testers { flex-wrap: wrap; }
  .sf-who { grid-template-columns: 1fr; }
  .sf-grid { grid-template-columns: 1fr; }
  .sf-person-inner { grid-template-columns: auto 1fr auto; }
  .sf-person-inner .sf-date { margin-top: 0.6rem; }
  .sf-person-inner .sf-name { grid-column: 2 / 3; }
  .sf-person-inner .sf-date { grid-column: 2 / 3; grid-row: 2; }
  .sf-remove { grid-column: 3; grid-row: 1; }
  .sf-badge { grid-row: 1; }
  .sf-submit { width: 100%; min-width: 0; }
}

/* Under the button: what happens to a form turned down (zapisy.js). */
.sf-kept { max-width: 34rem; margin: 0; font-size: 0.78rem; text-align: center; }

/* The transfer on the form's page (zgloszenie.js): the data with copy buttons, the QR beside it
   (under it on a narrow screen), black on white for the bank apps' cameras. */
/* After the deposit, the rest paid on the spot (zgloszenie.js): the transfer folded away. */
.sf-transfer-fold > summary { width: fit-content; cursor: pointer; color: var(--sf-faint); font-weight: 600; }
.sf-transfer-fold > summary:hover { color: inherit; }
.sf-transfer-fold[open] > summary { margin-bottom: 0.75rem; }
.sf-transfer { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1rem 1.5rem; }
.sf-transfer-rows { flex: 1 1 18rem; display: grid; gap: 0.5rem; margin: 0; }
.sf-transfer-row { display: grid; gap: 0.15rem; }
.sf-transfer-row dt { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sf-faint); }
.sf-transfer-row dd { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin: 0; padding: 0.4rem 0.4rem 0.4rem 0.7rem; border-radius: 0.375rem; background: var(--sf-surface); font-weight: 600; overflow-wrap: anywhere; }
.sf-copy { flex: none; padding: 0.3rem 0.6rem; border-radius: 0.25rem; background: var(--sf-surface-2); color: white; font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: background 120ms; }
.sf-copy:hover { background: rgb(255 255 255 / 0.2); }
.sf-copy:focus-visible { outline: 2px solid white; outline-offset: 2px; }
.sf-copy.done { background: color-mix(in oklch, var(--sf-ok) 35%, transparent); }
.sf-transfer-qr { flex: 0 0 auto; display: grid; justify-items: center; gap: 0.4rem; margin: 0 auto; }
.sf-transfer-code { width: 10.5rem; aspect-ratio: 1; border-radius: 0.375rem; overflow: hidden; }
.sf-transfer-code svg { display: block; width: 100%; height: 100%; }
.sf-transfer-qr figcaption { max-width: 11rem; font-size: 0.78rem; text-align: center; color: var(--sf-faint); }