/* Crania form kit — the shared look for every public-facing form.
 *
 * Registration, the staff form, booth sign-up and anything the Forms
 * builder renders all load this. They had four separate stylesheets that
 * had already drifted: three greens, two input radii, two definitions of
 * "required". One file, so a change to the house style is one edit and
 * cannot land on three of the four.
 *
 * Colours are the ones measured off the approved registration mockup, not
 * picked to match it by eye. #20BAB5 and #2E2516 are the same brand values
 * the app uses.
 *
 * Everything is a plain class on plain HTML — no build step, no framework.
 * These forms are served as static files to parents on phones, and that is
 * the reason they load fast and never break on an old browser.
 */

:root {
  /* Brand */
  --fk-teal:        #20BAB5;   /* primary action, active step, focus */
  --fk-teal-deep:   #159895;   /* hover, eyebrow text, link */
  --fk-teal-wash:   #EFFAFA;   /* selected row / active tab fill */
  --fk-teal-pale:   #F6FCFB;   /* the faintest tint, for large areas */
  --fk-teal-pill:   #EDF7F7;   /* step counter pill */
  --fk-ink:         #2E2516;   /* headings and body */
  --fk-ink-soft:    #5A5245;   /* labels */
  --fk-ink-mute:    #8C8577;   /* helper text, placeholders */

  /* Surfaces */
  --fk-page:        #F3F8FA;   /* behind the card */
  --fk-card:        #FFFFFF;
  --fk-panel:       #FBFCFC;   /* grouped sub-panel inside a card */
  --fk-line:        #E4EBEC;   /* dividers */
  --fk-border:      #CCD9DC;   /* input borders */

  /* Notice colours */
  --fk-cream:       #FBFAEA;   /* cost bars, wait-to-pay banner */
  --fk-cream-line:  #E6E4A8;
  --fk-danger:      #C2564B;   /* the required star, errors */

  /* Shape and rhythm */
  --fk-r-input:     10px;
  --fk-r-panel:     12px;
  --fk-r-card:      18px;
  --fk-r-pill:      999px;
  --fk-gap:         18px;      /* between fields */
  --fk-shadow:      0 6px 22px rgba(46, 37, 22, .07);
  --fk-shadow-btn:  0 4px 12px rgba(32, 186, 181, .28);

  --fk-sans: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
}

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

body.fk {
  margin: 0;
  padding: 22px 16px 56px;
  background: var(--fk-page);
  color: var(--fk-ink);
  font-family: var(--fk-sans);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

.fk-wrap { max-width: 1040px; margin: 0 auto; }

/* ---------- stepper -------------------------------------------------
   A rail of numbered circles above the card. It is the only thing that
   answers "how much of this is left", which is the question a parent
   halfway through a seven-step form is actually asking. Steps already
   done get a tick and stay legible; the rest stay quiet. */
.fk-stepper {
  display: flex; align-items: flex-start;
  background: var(--fk-card);
  border-radius: var(--fk-r-card);
  padding: 14px 10px 12px;
  margin-bottom: 16px;
  box-shadow: var(--fk-shadow);
  overflow-x: auto;                 /* narrow phones scroll it, not the page */
  scrollbar-width: none;
}
.fk-stepper::-webkit-scrollbar { display: none; }

.fk-step {
  flex: 1 1 0; min-width: 82px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  position: relative;
  background: none; border: none; padding: 0 4px;
  font: inherit; font-size: 11.5px; color: var(--fk-ink-mute);
  text-align: center; cursor: default;
}
/* The connector is drawn by the step to its right, so the last one has
   nothing trailing off the end of the rail. */
.fk-step + .fk-step::before {
  content: ""; position: absolute; top: 15px; right: 50%; left: -50%;
  height: 1px; background: var(--fk-line);
}
.fk-step-dot {
  position: relative; z-index: 1;
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: #EFF2F3; color: var(--fk-ink-mute);
  font-size: 12px; font-weight: 700;
}
.fk-step-label { font-weight: 600; }
/* Dots with no captions under them: the 82px each step reserves is for a
   label, so without one they can sit much closer and a long form fits
   across the row instead of scrolling. */
.fk-stepper.is-dots .fk-step { min-width: 38px; }

/* ---- welcome card ----
   The front door of a form that has one. Matches the registration form's,
   deliberately: a family meeting one of these has usually met the other. */
.fk-welcome {
  background: var(--fk-card); border-radius: var(--fk-r-card);
  padding: 40px 40px 36px; box-shadow: var(--fk-shadow);
  display: grid; gap: 14px; justify-items: center; text-align: center;
}
/* Left-aligned and full width of the card. The grid centres its children,
   which makes a <p> shrink to its content — so it needs stretching back
   out, or the text sits in a narrow column with the card's edges a long
   way off on either side. The heading and the button stay centred. */
.fk-welcome p {
  margin: 0; justify-self: stretch; width: 100%; text-align: left;
  font-size: 15px; line-height: 1.7; color: var(--fk-ink-soft);
}
.fk-welcome .fk-btn { margin-top: 8px; padding: 13px 34px; }
@media (max-width: 560px) { .fk-welcome { padding: 28px 20px 26px; } }

.fk-step.is-done .fk-step-dot   { background: var(--fk-teal-wash); color: var(--fk-teal-deep); }
.fk-step.is-done .fk-step-label { color: var(--fk-teal-deep); }
.fk-step.is-now  .fk-step-dot   { background: var(--fk-teal); color: #fff; }
.fk-step.is-now  .fk-step-label { color: var(--fk-ink); font-weight: 700; }
/* Only a step you have already completed is worth going back to. */
.fk-step.is-done { cursor: pointer; }
.fk-step.is-done:hover .fk-step-label { text-decoration: underline; }

/* ---------- card and page head -------------------------------------- */
.fk-card {
  background: var(--fk-card);
  border-radius: var(--fk-r-card);
  padding: 26px 30px 24px;
  box-shadow: var(--fk-shadow);
}

.fk-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 18px;
}
/* The small teal line above the title. It names the group of steps you are
   in — FAMILY DETAILS covers both guardians — which a per-step title
   cannot do on its own. */
.fk-eyebrow {
  font-size: 11px; font-weight: 800; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--fk-teal-deep);
  margin: 0 0 2px;
}
.fk-title { margin: 0; font-size: 30px; font-weight: 800; letter-spacing: -.4px; }
.fk-sub   { margin: 8px 0 0; font-size: 13.5px; color: var(--fk-ink-mute); }

.fk-count {
  flex: none;
  background: var(--fk-teal-pill); color: var(--fk-teal-deep);
  font-size: 12px; font-weight: 800;
  padding: 6px 13px; border-radius: var(--fk-r-pill);
}

/* ---------- section divider ------------------------------------------
   A heading with a rule running off to the right, for grouping fields
   inside one step. */
.fk-section {
  display: flex; align-items: center; gap: 14px;
  margin: 26px 0 14px;
  font-size: 17px; font-weight: 800;
}
.fk-section::after { content: ""; flex: 1; height: 1px; background: var(--fk-line); }

/* ---------- fields ---------------------------------------------------
   Labels sit ABOVE their input, and fields pair two to a row. The old
   registration form put a 260px label column beside every control, which
   on a phone left each label wrapping over three lines next to a field
   half the width of the screen. Stacked labels also mean a long label
   costs vertical space once, not width forever. */
.fk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px var(--fk-gap); }
.fk-field { margin-bottom: 14px; min-width: 0; }
.fk-field.fk-full { grid-column: 1 / -1; }

.fk-label {
  display: block; margin-bottom: 5px;
  font-size: 12.5px; font-weight: 700; color: var(--fk-ink-soft);
}
.fk-req { color: var(--fk-danger); font-weight: 700; }
.fk-optional { color: var(--fk-ink-mute); font-weight: 600; }
/* Guidance under a question — "Select all that apply." Sits between the
   label and the control so it is read before the answer is given, not
   after. */
.fk-note {
  margin: -1px 0 7px; font-size: 12.5px; color: var(--fk-ink-mute);
}

/* ---- star rating ----
   Five radios drawn as stars. The input stays in the DOM and merely stops
   painting itself, so the value posts, validates and takes focus exactly
   like any other radio group — a row of clickable glyphs would do none of
   those.

   Filling every star up to the one pointed at is what makes this read as a
   rating rather than as five separate choices, and that means styling
   EARLIER siblings, which `~` cannot do. The usual trick is to lay the row
   out backwards so "earlier" becomes "later" — but reversing the row also
   reverses the keyboard: tab and the arrow keys follow the DOM, so a
   keyboard user would arrow RIGHT to lower their rating, and the numbers
   under the stars come out 5 4 3 2 1.

   So the row is in natural order and `:has()` does the work instead: ask
   the container which star is engaged, then light that one and the ones
   before it. Five rules where the reversed version needed one — worth it
   to have the row read 1 to 5 for the eye, the mouse and the keyboard
   alike. */
.fk-stars { display: inline-flex; gap: 4px; }
.fk-star { display: inline-flex; flex-direction: column; align-items: center;
  cursor: pointer; line-height: 1; }
.fk-star input { position: absolute; opacity: 0; width: 0; height: 0; }
.fk-star span { font-size: 30px; color: var(--fk-border); transition: color .12s; }
.fk-star em { font-size: 11px; font-style: normal; font-weight: 700;
  color: var(--fk-ink-mute); margin-top: 2px; }
/* Hovering star N lights 1..N. */
.fk-stars:has(.fk-star:nth-child(1):hover) .fk-star:nth-child(-n+1) span,
.fk-stars:has(.fk-star:nth-child(2):hover) .fk-star:nth-child(-n+2) span,
.fk-stars:has(.fk-star:nth-child(3):hover) .fk-star:nth-child(-n+3) span,
.fk-stars:has(.fk-star:nth-child(4):hover) .fk-star:nth-child(-n+4) span,
.fk-stars:has(.fk-star:nth-child(5):hover) .fk-star:nth-child(-n+5) span,
/* The chosen rating, shown whenever the row is not being hovered — so
   pointing at a different star previews that one instead of adding to it. */
.fk-stars:not(:has(.fk-star:hover)):has(.fk-star:nth-child(1) input:checked) .fk-star:nth-child(-n+1) span,
.fk-stars:not(:has(.fk-star:hover)):has(.fk-star:nth-child(2) input:checked) .fk-star:nth-child(-n+2) span,
.fk-stars:not(:has(.fk-star:hover)):has(.fk-star:nth-child(3) input:checked) .fk-star:nth-child(-n+3) span,
.fk-stars:not(:has(.fk-star:hover)):has(.fk-star:nth-child(4) input:checked) .fk-star:nth-child(-n+4) span,
.fk-stars:not(:has(.fk-star:hover)):has(.fk-star:nth-child(5) input:checked) .fk-star:nth-child(-n+5) span {
  color: #F2B705;
}
/* Keyboard users get a ring on the star itself, since the input is hidden. */
.fk-star:has(input:focus-visible) span { outline: 2px solid var(--fk-teal); outline-offset: 2px; }

.fk-input, .fk-select, .fk-textarea {
  width: 100%; padding: 11px 13px;
  background: #fff; color: var(--fk-ink);
  border: 1px solid var(--fk-border); border-radius: var(--fk-r-input);
  font: inherit; font-size: 14px;
}
.fk-textarea { resize: vertical; min-height: 104px; }
.fk-select { appearance: none; cursor: pointer; padding-right: 34px;
  /* The chevron is inline so the kit stays a single file with no assets. */
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235A5245' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center;
}
.fk-input::placeholder, .fk-textarea::placeholder { color: var(--fk-ink-mute); }

.fk-input:focus, .fk-select:focus, .fk-textarea:focus {
  outline: none; border-color: var(--fk-teal);
  box-shadow: 0 0 0 3px rgba(32, 186, 181, .16);
}
.fk-input:disabled, .fk-select:disabled, .fk-textarea:disabled {
  background: #F4F6F7; color: var(--fk-ink-soft); cursor: not-allowed;
}
/* Errors are announced on the field, not only in a message below it —
   colour alone is not a signal everyone receives. */
.fk-input[aria-invalid="true"], .fk-select[aria-invalid="true"], .fk-textarea[aria-invalid="true"] {
  border-color: var(--fk-danger); background: #FFFBFA;
}
.fk-err { margin-top: 5px; font-size: 12px; font-weight: 600; color: var(--fk-danger); }
.fk-hint { margin-top: 5px; font-size: 11.5px; color: var(--fk-ink-mute); }

/* ---------- grouped sub-panel ---------------------------------------- */
.fk-panel {
  background: var(--fk-panel);
  border: 1px solid var(--fk-line); border-radius: var(--fk-r-panel);
  padding: 16px 18px 4px;
}
.fk-panel.fk-tint { background: var(--fk-teal-pale); border-color: #D9EDEB; }

/* ---------- choices --------------------------------------------------
   A checkbox is a full-width bordered row, not a bare tick beside text:
   it gives the whole line a hit target, which is what makes these usable
   on a phone, and it survives a three-line policy sentence without the
   text sliding under the box. */
.fk-choice {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; margin-bottom: 10px;
  background: var(--fk-panel);
  border: 1px solid var(--fk-line); border-radius: var(--fk-r-panel);
  font-size: 13.5px; line-height: 1.45; cursor: pointer;
}
.fk-choice:hover { border-color: #CFE3E1; }
.fk-choice input { flex: none; margin: 1px 0 0; width: 17px; height: 17px;
  accent-color: var(--fk-teal); cursor: pointer; }
.fk-choice.is-on { background: var(--fk-teal-wash); border-color: #BEE3E0; }
.fk-choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--fk-gap); }

/* ---------- chips ---------------------------------------------------- */
.fk-chip {
  display: inline-block; padding: 5px 11px; margin: 0 6px 6px 0;
  border: 1px solid var(--fk-border); border-radius: var(--fk-r-pill);
  background: #fff; font-size: 11.5px; font-weight: 700;
  color: var(--fk-ink-soft); letter-spacing: .3px;
}
.fk-chip.is-on { border-color: var(--fk-teal); color: var(--fk-teal-deep); background: var(--fk-teal-wash); }
.fk-chip.fk-count-chip { background: var(--fk-teal-pill); border-color: transparent; color: var(--fk-teal-deep); }

/* ---------- notices --------------------------------------------------- */
.fk-notice {
  background: var(--fk-cream); border: 1px solid var(--fk-cream-line);
  border-radius: var(--fk-r-panel); padding: 14px 18px; margin: 16px 0;
  text-align: center;
}
.fk-notice b { display: block; font-size: 15px; }
.fk-notice span { font-size: 12.5px; color: var(--fk-ink-mute); }

/* A cost readout: label left, money right, on the cream bar. */
.fk-cost {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--fk-cream); border: 1px solid var(--fk-cream-line);
  border-left: 4px solid var(--fk-cream-line);
  border-radius: var(--fk-r-input); padding: 11px 15px; margin-bottom: 14px;
  font-weight: 700; color: var(--fk-teal-deep);
}
.fk-cost b { color: var(--fk-ink); }

/* ---------- info card (payment options, discounts) -------------------- */
.fk-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fk-infocard {
  background: var(--fk-panel); border: 1px solid var(--fk-line);
  border-radius: var(--fk-r-panel); padding: 16px 18px;
}
.fk-badge {
  display: inline-grid; place-items: center; min-width: 38px; height: 38px;
  padding: 0 9px; margin-bottom: 10px;
  background: var(--fk-teal-wash); color: var(--fk-teal-deep);
  border-radius: var(--fk-r-pill); font-size: 12px; font-weight: 800;
}
.fk-infocard h4 { margin: 0 0 8px; font-size: 16px; font-weight: 800; }
.fk-infocard ul { margin: 0; padding-left: 18px; }
.fk-infocard li { font-size: 12.5px; color: var(--fk-ink-soft); margin-bottom: 4px; }

/* ---------- buttons --------------------------------------------------- */
.fk-actions {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--fk-line);
}
/* Forward sits right on its own when there is no Back, so the primary
   action is always in the same corner. */
.fk-actions > :only-child { margin-left: auto; }

.fk-btn {
  border: none; border-radius: var(--fk-r-pill); padding: 12px 26px;
  font: inherit; font-size: 14px; font-weight: 800; cursor: pointer;
  background: var(--fk-teal); color: #fff; box-shadow: var(--fk-shadow-btn);
}
.fk-btn:hover { background: var(--fk-teal-deep); }
.fk-btn:disabled { background: #C9CFD0; box-shadow: none; cursor: not-allowed; }
.fk-btn.fk-ghost { background: #EFF2F3; color: var(--fk-ink); box-shadow: none; }
.fk-btn.fk-ghost:hover { background: #E4E8EA; }
.fk-btn.fk-dashed {
  background: none; color: var(--fk-teal-deep);
  border: 1px dashed var(--fk-teal); box-shadow: none; padding: 10px 18px;
}
.fk-btn.fk-dashed:hover { background: var(--fk-teal-wash); }

/* Anything focused by keyboard gets a visible ring, including buttons —
   the coloured border on inputs is not enough on its own. */
.fk-btn:focus-visible, .fk-step:focus-visible, .fk-choice:focus-within {
  outline: 2px solid var(--fk-teal); outline-offset: 2px;
}

/* ---------- success --------------------------------------------------- */
.fk-success { text-align: center; display: grid; gap: 10px; justify-items: center; padding: 34px 20px; }
.fk-success-mark {
  width: 62px; height: 62px; border-radius: 50%;
  background: var(--fk-teal-wash); color: var(--fk-teal);
  display: grid; place-items: center; font-size: 32px; font-weight: 800;
}
.fk-success h3 { margin: 6px 0 0; font-size: 24px; font-weight: 800; }
.fk-success p  { margin: 0; max-width: 460px; color: var(--fk-ink-soft); line-height: 1.6; }
.fk-success .fk-btn { margin-top: 6px; text-decoration: none; }
/* The review invitation is the one success page that asks for something
   rather than just closing, so it is set a size up — it has to be read,
   not glanced at, in the couple of seconds before the redirect. */
.fk-success.is-review h3 { font-size: 27px; }
.fk-success.is-review p  { font-size: 17px; max-width: 520px; }
.fk-success.is-review .fk-btn { font-size: 16px; padding: 13px 30px; }

/* ---------- phones ----------------------------------------------------
   One column below 760px. Most of this form is filled in on a phone, so
   the two-up grid is the enhancement and the single column is the base
   case that has to work. */
@media (max-width: 760px) {
  body.fk { padding: 12px 10px 40px; }
  .fk-grid, .fk-choice-grid, .fk-cards { grid-template-columns: 1fr; }
  .fk-card { padding: 20px 16px 18px; border-radius: 14px; }
  .fk-title { font-size: 23px; }
  .fk-head { flex-direction: column-reverse; align-items: flex-start; gap: 8px; }
  .fk-actions { flex-direction: column-reverse; }
  .fk-actions .fk-btn { width: 100%; }
  .fk-step { min-width: 68px; font-size: 10.5px; }
}

/* Respect a reduced-motion preference; nothing here animates by default,
   but forms that add transitions inherit the rule rather than each
   remembering it. */
@media (prefers-reduced-motion: reduce) {
  .fk * { transition: none !important; animation: none !important; }
}