/* A rendered form. Colours, type and corners come from the theme (js/themes.js) as --fc-* variables. */
.fc-root {
  --fc-bg: #f6f6f8; --fc-field: #fff; --fc-ink: #0b0b10; --fc-muted: #6c6c78; --fc-line: #e6e6ec;
  --fc-accent: #ff2e7e; --fc-accent-ink: #fff; --fc-radius: 14px; --fc-border: 1px;
  --fc-font: "Geist", system-ui, sans-serif; --fc-head: var(--fc-font);
  --fc-shadow: 0 1px 2px rgba(0,0,0,.04), 0 12px 32px -16px rgba(0,0,0,.14);
  --fc-soft: color-mix(in srgb, var(--fc-accent) 13%, transparent);
  --fc-r-sm: calc(var(--fc-radius) * .7);
  color: var(--fc-ink); font-family: var(--fc-font); font-size: 16px; line-height: 1.5;
}
.fc-root * { box-sizing: border-box; }
.fc-root a { color: var(--fc-accent); }

/* Header: optional cover image and logo */
.fc-cover { height: clamp(120px, 22vw, 200px); border-radius: var(--fc-radius) var(--fc-radius) 0 0; background: center / cover no-repeat, var(--fc-accent); margin: calc(-1 * var(--fc-pad, 0px)) calc(-1 * var(--fc-pad, 0px)) 24px; }
.fc-logo { display: block; max-height: 48px; max-width: 180px; object-fit: contain; margin-bottom: 18px; }
.fc-head h1 { font-family: var(--fc-head); font-size: clamp(28px, 4.4vw, 40px); line-height: 1.08; margin: 0 0 10px; text-wrap: balance; letter-spacing: -0.03em; font-weight: 700; }
.fc-serif .fc-head h1, .fc-serif .fc-heading, .fc-serif .fc-pagetitle, .fc-serif .fc-thanks h1 { font-weight: 400; letter-spacing: -0.01em; font-size: clamp(32px, 5vw, 48px); }
.fc-head p { color: var(--fc-muted); margin: 0 0 30px; max-width: 62ch; font-size: 16.5px; }
.fc-brutal .fc-head h1 { text-transform: uppercase; letter-spacing: -0.01em; font-weight: 900; }

/* Grid: each field spans --span of 12 columns */
.fc-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px 18px; align-items: start; }
.fc-grid > .fc-field { grid-column: span var(--span, 12); min-width: 0; }
.fc-grid > .fc-actions { grid-column: 1 / -1; }
@container (max-width: 560px) { .fc-grid > .fc-field { grid-column: 1 / -1; } }
@media (max-width: 560px) { .fc-grid > .fc-field { grid-column: 1 / -1; } }

.fc-field { display: flex; flex-direction: column; gap: 9px; }
.fc-label { font-family: var(--fc-head); font-weight: 600; font-size: 15.5px; letter-spacing: -0.01em; }
.fc-serif .fc-label { font-family: var(--fc-font); }
.fc-req { color: var(--fc-accent); margin-left: 3px; }
.fc-help { color: var(--fc-muted); font-size: 14px; margin-top: -4px; }
.fc-heading, .fc-pagetitle { font-family: var(--fc-head); font-size: 24px; letter-spacing: -0.025em; margin: 8px 0 0; font-weight: 700; }
.fc-pagetitle { margin: 0 0 22px; }
.fc-ptitle { margin: 0; font-size: 17px; font-family: var(--fc-head); }
.fc-para { margin: 0; color: var(--fc-muted); max-width: 65ch; }
.fc-pagebreak { display: flex; align-items: center; gap: 12px; color: var(--fc-muted); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.fc-pagebreak::before, .fc-pagebreak::after { content: ""; flex: 1; border-top: 1.5px dashed var(--fc-line); }

/* Text inputs */
.fc-root input:not([type=radio]):not([type=checkbox]):not([type=range]):not([type=file]), .fc-root select, .fc-root textarea {
  font: inherit; width: 100%; padding: 12px 14px; border: var(--fc-border) solid var(--fc-line); border-radius: var(--fc-r-sm);
  background: var(--fc-field); color: var(--fc-ink); transition: border-color .15s, box-shadow .15s; outline: none;
}
.fc-glass input:not([type=radio]):not([type=checkbox]):not([type=range]):not([type=file]), .fc-glass select, .fc-glass textarea { background: color-mix(in srgb, var(--fc-field) 70%, transparent); }
.fc-brutal input:not([type=radio]):not([type=checkbox]):not([type=range]):not([type=file]), .fc-brutal select, .fc-brutal textarea { border-color: #000; }
.fc-root textarea { resize: vertical; min-height: 90px; }
.fc-root input:focus, .fc-root select:focus, .fc-root textarea:focus { border-color: var(--fc-accent); box-shadow: 0 0 0 4px var(--fc-soft); }
.fc-root input::placeholder, .fc-root textarea::placeholder { color: color-mix(in srgb, var(--fc-muted) 75%, transparent); }
.fc-selectwrap { position: relative; }
.fc-selectwrap select { appearance: none; padding-right: 40px; cursor: pointer; }
.fc-selectwrap::after { content: ""; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px; border: solid var(--fc-muted); border-width: 0 2px 2px 0; transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.fc-invalid input, .fc-invalid select, .fc-invalid textarea, .fc-invalid .fc-drop, .fc-invalid .fc-sign { border-color: #e5245e !important; }
.fc-error { color: #e5245e; font-size: 13.5px; font-weight: 500; }
.fc-error:empty { display: none; }

/* Choices */
.fc-choices { display: grid; gap: 8px; }
.fc-choices.inline { display: flex; flex-wrap: wrap; }
.fc-choice { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: var(--fc-border) solid var(--fc-line); border-radius: var(--fc-r-sm); cursor: pointer; background: var(--fc-field); transition: border-color .15s, background .15s, transform .1s; }
.fc-choice:hover { border-color: color-mix(in srgb, var(--fc-accent) 60%, var(--fc-line)); }
.fc-choice:active { transform: scale(.99); }
.fc-choice:has(input:checked) { border-color: var(--fc-accent); background: var(--fc-soft); box-shadow: inset 0 0 0 1px var(--fc-accent); }
.fc-brutal .fc-choice:has(input:checked) { box-shadow: 3px 3px 0 #000; background: var(--fc-field); transform: translate(-1px, -1px); }
.fc-choice input, .fc-consent input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fc-tick { width: 20px; height: 20px; flex: none; border: 1.5px solid color-mix(in srgb, var(--fc-muted) 60%, transparent); border-radius: 50%; display: grid; place-items: center; transition: background .15s, border-color .15s; }
.fc-choice input[type=checkbox] + .fc-tick, .fc-consent .fc-tick { border-radius: 6px; }
.fc-choice input:checked + .fc-tick, .fc-consent input:checked + .fc-tick { background: var(--fc-accent); border-color: var(--fc-accent); }
.fc-choice input:checked + .fc-tick::after, .fc-consent input:checked + .fc-tick::after { content: ""; width: 5px; height: 9px; border: solid var(--fc-accent-ink); border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }
.fc-choice input[type=radio]:checked + .fc-tick::after { width: 8px; height: 8px; border: 0; border-radius: 50%; background: var(--fc-accent-ink); transform: none; }
.fc-choice:has(input:focus-visible), .fc-consent:has(input:focus-visible) { box-shadow: 0 0 0 4px var(--fc-soft); }
.fc-other .fc-othertext { flex: 1; min-width: 0; padding: 6px 10px !important; }

.fc-yesno { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 420px; }
.fc-yesno label { position: relative; cursor: pointer; }
.fc-yesno input { position: absolute; opacity: 0; }
.fc-yesno span { display: block; text-align: center; padding: 14px; border: var(--fc-border) solid var(--fc-line); border-radius: var(--fc-r-sm); background: var(--fc-field); font-weight: 600; transition: all .15s; }
.fc-yesno input:checked + span { background: var(--fc-accent); color: var(--fc-accent-ink); border-color: var(--fc-accent); }
.fc-yesno input:focus-visible + span { box-shadow: 0 0 0 4px var(--fc-soft); }

.fc-consent { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: var(--fc-border) solid var(--fc-line); border-radius: var(--fc-r-sm); background: var(--fc-field); cursor: pointer; font-size: 14.5px; position: relative; }
.fc-consent .fc-tick { margin-top: 1px; }

/* Ranking */
.fc-rank { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fc-rank li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: var(--fc-border) solid var(--fc-line); border-radius: var(--fc-r-sm); background: var(--fc-field); cursor: grab; user-select: none; }
.fc-rank li.dragging { opacity: .5; border-style: dashed; }
.fc-grip { color: var(--fc-muted); letter-spacing: -3px; font-size: 13px; }
.fc-rank-n { width: 24px; height: 24px; border-radius: 50%; background: var(--fc-soft); color: var(--fc-accent); display: grid; place-items: center; font-size: 12.5px; font-weight: 700; flex: none; }
.fc-rank-t { flex: 1; min-width: 0; }
.fc-rank-btns { display: flex; gap: 4px; }
.fc-rank-btns button { font: inherit; width: 30px; height: 30px; border: var(--fc-border) solid var(--fc-line); border-radius: 8px; background: transparent; color: var(--fc-ink); cursor: pointer; }
.fc-rank-btns button:hover { border-color: var(--fc-accent); color: var(--fc-accent); }

/* Grid (matrix) */
.fc-matrix-wrap { overflow-x: auto; }
.fc-matrix { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14.5px; }
.fc-matrix th { font-weight: 500; color: var(--fc-muted); padding: 8px; text-align: center; font-size: 13px; }
.fc-matrix tbody th { text-align: left; color: var(--fc-ink); font-weight: 500; font-size: 14.5px; padding-left: 0; }
.fc-matrix td { text-align: center; padding: 6px; border-top: 1px solid var(--fc-line); }
.fc-matrix tbody th { border-top: 1px solid var(--fc-line); }
.fc-matrix label { display: inline-grid; place-items: center; cursor: pointer; position: relative; padding: 6px; }
.fc-matrix input { position: absolute; opacity: 0; }
.fc-dot { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--fc-muted) 60%, transparent); transition: all .15s; }
.fc-matrix input:checked + .fc-dot { border: 6px solid var(--fc-accent); }
.fc-matrix input:focus-visible + .fc-dot { box-shadow: 0 0 0 4px var(--fc-soft); }
.fc-mcol { display: none; }
@container (max-width: 520px) {
  .fc-matrix thead { display: none; }
  .fc-matrix, .fc-matrix tbody, .fc-matrix tr, .fc-matrix th, .fc-matrix td { display: block; width: 100%; }
  .fc-matrix tr { padding: 10px 0; border-top: 1px solid var(--fc-line); }
  .fc-matrix tbody th, .fc-matrix td { border: 0; padding: 2px 0; text-align: left; }
  .fc-matrix td { display: inline-block; width: auto; margin-right: 6px; }
  .fc-matrix label { display: inline-flex; gap: 6px; padding: 6px 10px; border: 1px solid var(--fc-line); border-radius: 99px; }
  .fc-matrix .fc-dot { width: 14px; height: 14px; }
  .fc-matrix input:checked + .fc-dot { border-width: 4px; }
  .fc-mcol { display: inline; font-size: 13px; }
}

/* Rating, scale, slider */
.fc-stars { display: flex; gap: 6px; flex-wrap: wrap; }
.fc-star { cursor: pointer; position: relative; }
.fc-star input, .fc-scale input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fc-star svg { width: 36px; height: 36px; fill: transparent; stroke: color-mix(in srgb, var(--fc-muted) 55%, transparent); stroke-width: 1.5; stroke-linejoin: round; transition: transform .12s, fill .1s, stroke .1s; }
.fc-star:hover svg { transform: scale(1.12); }
.fc-stars:has(input:checked) .fc-star svg { fill: #ffb400; stroke: #ffb400; }
.fc-star:has(input:checked) ~ .fc-star svg { fill: transparent; stroke: color-mix(in srgb, var(--fc-muted) 55%, transparent); }
.fc-star:has(input:focus-visible) svg { stroke: var(--fc-accent); }
.fc-scale { display: grid; grid-template-columns: repeat(auto-fit, minmax(36px, 1fr)); gap: 6px; }
.fc-scale label { position: relative; cursor: pointer; }
.fc-scale span { display: grid; place-items: center; height: 46px; border: var(--fc-border) solid var(--fc-line); border-radius: var(--fc-r-sm); font-weight: 600; background: var(--fc-field); font-variant-numeric: tabular-nums; transition: all .12s; }
.fc-scale label:hover span { border-color: var(--fc-accent); }
.fc-scale input:checked + span { background: var(--fc-accent); border-color: var(--fc-accent); color: var(--fc-accent-ink); transform: translateY(-2px); }
.fc-scale input:focus-visible + span { box-shadow: 0 0 0 4px var(--fc-soft); }
.fc-scale-labels { display: flex; justify-content: space-between; font-size: 13px; color: var(--fc-muted); }
.fc-slider { display: flex; align-items: center; gap: 14px; }
.fc-slider input { flex: 1; accent-color: var(--fc-accent); height: 28px; }
.fc-slider output { min-width: 64px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; padding: 6px 10px; border-radius: 99px; background: var(--fc-soft); color: var(--fc-accent); }

/* Upload and signature */
.fc-drop { position: relative; border: 1.5px dashed color-mix(in srgb, var(--fc-muted) 45%, transparent); border-radius: var(--fc-radius); background: var(--fc-field); transition: border-color .15s, background .15s; }
.fc-drop:hover, .fc-drop.over { border-color: var(--fc-accent); background: var(--fc-soft); }
.fc-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.fc-drop-ui { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 26px 16px; text-align: center; font-size: 14.5px; pointer-events: none; }
.fc-drop-icon { width: 40px; height: 40px; border-radius: 50%; background: var(--fc-soft); color: var(--fc-accent); display: grid; place-items: center; font-weight: 700; margin-bottom: 4px; }
.fc-drop-ui b { color: var(--fc-accent); }
.fc-drop-hint { color: var(--fc-muted); font-size: 12.5px; }
.fc-files { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fc-files:empty { display: none; }
.fc-files li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--fc-line); border-radius: var(--fc-r-sm); font-size: 14px; background: var(--fc-field); }
.fc-file-ico { color: #10a36b; font-weight: 700; }
.fc-file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc-file-size { color: var(--fc-muted); font-size: 12.5px; }
.fc-files button { border: 0; background: none; color: var(--fc-muted); cursor: pointer; font-size: 14px; }
.fc-sign { border: var(--fc-border) solid var(--fc-line); border-radius: var(--fc-radius); background: var(--fc-field); overflow: hidden; }
.fc-sign canvas { display: block; width: 100%; height: auto; aspect-ratio: 10 / 3; touch-action: none; cursor: crosshair; background-image: linear-gradient(transparent calc(100% - 44px), var(--fc-line) calc(100% - 44px), var(--fc-line) calc(100% - 43px), transparent calc(100% - 43px)); }
.fc-sign-bar { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-top: 1px solid var(--fc-line); font-size: 13px; color: var(--fc-muted); }
.fc-sign-clear { font: inherit; border: 0; background: none; color: var(--fc-accent); font-weight: 600; cursor: pointer; }

/* Answer checklist */
.fc-coach { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 13px; color: var(--fc-muted); padding: 10px 12px; border-radius: var(--fc-r-sm); background: color-mix(in srgb, var(--fc-line) 40%, transparent); }
.fc-coach-title { font-weight: 600; color: var(--fc-ink); width: 100%; }
.fc-check-item { display: inline-flex; align-items: center; gap: 6px; }
.fc-check-item i { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid currentColor; flex: none; position: relative; }
.fc-check-item.ok { color: #10a36b; }
.fc-check-item.ok i { background: currentColor; }
.fc-check-item.ok i::after { content: ""; position: absolute; left: 3.5px; top: 1px; width: 3px; height: 6px; border: solid #fff; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.fc-coach.done { background: color-mix(in srgb, #10a36b 12%, transparent); }
.fc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.fc-hiddenfield { font-size: 13px; color: var(--fc-muted); border: 1px dashed var(--fc-line); border-radius: var(--fc-r-sm); padding: 9px 12px; }

/* Buttons and footer */
.fc-btn { font: inherit; font-weight: 650; background: var(--fc-accent); color: var(--fc-accent-ink); border: 0; border-radius: 999px; padding: 13px 28px; cursor: pointer; transition: transform .1s, filter .15s, box-shadow .15s; box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--fc-accent) 70%, transparent); }
.fc-btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.fc-btn:active { transform: translateY(0); }
.fc-btn:disabled { opacity: .6; cursor: wait; transform: none; }
.fc-btn:focus-visible { outline: 3px solid var(--fc-soft); outline-offset: 2px; }
.fc-brutal .fc-btn { border-radius: var(--fc-r-sm); border: 2px solid #000; box-shadow: 4px 4px 0 #000; text-transform: uppercase; letter-spacing: .02em; }
.fc-brutal .fc-btn:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 #000; filter: none; }
.fc-back { font: inherit; font-weight: 600; background: none; border: 0; color: var(--fc-muted); cursor: pointer; padding: 10px 4px; }
.fc-back:hover { color: var(--fc-ink); }
.fc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 30px; }
.fc-actions .fc-btn { margin-left: auto; }
.fc-classic .fc-actions:not(:has(.fc-back:not([hidden]))) .fc-btn { margin-left: 0; }
.fc-pagecount { color: var(--fc-muted); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.fc-submit-error { color: #e5245e; font-size: 14px; margin-top: 12px; }
.fc-submit-error:empty { display: none; }
.fc-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.fc-progress { height: 4px; border-radius: 4px; background: var(--fc-line); overflow: hidden; margin-bottom: 26px; }
.fc-progress span { display: block; height: 100%; background: var(--fc-accent); border-radius: 4px; transition: width .35s cubic-bezier(.2, .8, .2, 1); }
.fc-foot { display: flex; justify-content: center; margin-top: 22px; }
.fc-brand { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--fc-muted) !important; text-decoration: none; border: 1px solid var(--fc-line); padding: 6px 12px; border-radius: 99px; background: var(--fc-field); }
.fc-brand i { width: 12px; height: 12px; border-radius: 4px; background: #ff2e7e; transform: rotate(-8deg); }
.fc-brand b { color: var(--fc-ink); }

/* Step layout: a card with one question per step */
.fc-steps .fc-card { background: var(--fc-field); border: var(--fc-border) solid var(--fc-line); border-radius: calc(var(--fc-radius) + 6px); padding: clamp(20px, 4vw, 32px); display: flex; flex-direction: column; gap: 20px; box-shadow: var(--fc-shadow); }
.fc-glass.fc-steps .fc-card { backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); }
.fc-stepbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fc-stepcount { font-size: 13px; font-weight: 600; color: var(--fc-muted); font-variant-numeric: tabular-nums; }
.fc-segments { display: flex; gap: 4px; flex: 1; max-width: 260px; justify-content: flex-end; }
.fc-segments i { flex: 1; max-width: 34px; height: 6px; border-radius: 3px; background: var(--fc-line); transition: background .2s; }
.fc-segments i.done { background: color-mix(in srgb, var(--fc-accent) 50%, var(--fc-line)); }
.fc-segments i.now { background: var(--fc-accent); }
.fc-step { display: flex; flex-direction: column; gap: 18px; animation: fc-in .28s cubic-bezier(.2, .8, .2, 1); }
.fc-steps .fc-label { font-size: 19px; }
.fc-cardfoot { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--fc-line); padding-top: 18px; }
.fc-cardfoot .fc-btn { margin-left: auto; min-width: 130px; }
@keyframes fc-in { from { opacity: 0; transform: translateY(8px); } }

/* Thank-you */
.fc-thanks { text-align: center; padding: 48px 12px; display: flex; flex-direction: column; align-items: center; gap: 12px; animation: fc-in .4s cubic-bezier(.2, .8, .2, 1); }
.fc-thanks h1 { font-family: var(--fc-head); margin: 8px 0 0; font-size: clamp(28px, 4vw, 38px); letter-spacing: -0.03em; text-wrap: balance; }
.fc-thanks p { color: var(--fc-muted); margin: 0; max-width: 48ch; }
.fc-check { width: 64px; height: 64px; border-radius: 50%; background: var(--fc-accent); display: grid; place-items: center; box-shadow: 0 0 0 10px var(--fc-soft); }
.fc-check svg { width: 32px; height: 32px; fill: none; stroke: var(--fc-accent-ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.fc-score { display: flex; align-items: baseline; gap: 8px; padding: 10px 20px; border-radius: 99px; background: var(--fc-soft); }
.fc-score b { font-size: 30px; color: var(--fc-accent); font-family: var(--fc-head); }
.fc-score span { color: var(--fc-muted); }

@media (prefers-reduced-motion: reduce) { .fc-root *, .fc-root *::before { transition: none !important; animation: none !important; } }