/* Lumestrum Start: survey styles. Tokens follow the Lumestrum website. */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/assets/fonts/inter-latin.woff2") format("woff2"); }
@font-face { font-family: "Michroma"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/michroma-latin.woff2") format("woff2"); }

:root {
  --night: #071725;
  --night-2: #0a1d2e;
  --deep: #0c2335;
  --navy: #102b40;
  --line: rgba(232, 238, 240, .09);
  --line-2: rgba(232, 238, 240, .16);
  --text: #eef3f5;
  --muted: #a7b8c4;
  --dim: #8095a5;
  --blue: #087bef;
  --blue-hi: #3d9bff;
  --cyan: #24bcca;
  --gold: #f5c46a;
  --danger: #f0a0a0;
  --stream: linear-gradient(90deg, #087bef 0%, #24bcca 52%, #f4e5bd 82%, #f5b544 100%);
  --radius: 20px;
  --radius-sm: 12px;
  --gutter: clamp(16px, 4vw, 32px);
  --ease: cubic-bezier(.2, .7, .1, 1);
  --display: "Michroma", "Inter", system-ui, sans-serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column; color: var(--text);
  background: radial-gradient(900px 520px at 85% -10%, rgba(8, 123, 239, .16), transparent 60%),
    radial-gradient(700px 480px at -10% 30%, rgba(36, 188, 202, .08), transparent 60%), var(--night);
  background-attachment: fixed;
  font: 400 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-color: rgba(61, 155, 255, .5); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--cyan); }
p { margin: 0 0 1em; text-wrap: pretty; }
h1, h2 { margin: 0 0 16px; font-weight: 640; letter-spacing: -.022em; line-height: 1.14; text-wrap: balance; }
h1 { font-size: clamp(1.9rem, 5vw, 2.6rem); }
h2 { font-size: clamp(1.55rem, 4vw, 2.05rem); }
h1:focus, h2:focus { outline: none; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); border: 0; white-space: nowrap; }

/* Header */
.top { position: sticky; top: 0; z-index: 20; background: rgba(7, 23, 37, .86); border-bottom: 1px solid var(--line);
  backdrop-filter: saturate(140%) blur(16px); -webkit-backdrop-filter: saturate(140%) blur(16px); }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 820px; margin: 0 auto; height: 64px; padding: 0 var(--gutter); }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; flex: none; }
.brand .sym { width: 58px; filter: drop-shadow(0 0 10px rgba(36, 188, 202, .25)); }
.brand .word { font: 400 15px/1 var(--display); letter-spacing: .2em; text-transform: uppercase; color: #fff; }
.save { font-size: .86rem; color: var(--dim); text-align: right; min-height: 1.2em; }
.save.ok { color: var(--cyan); }
.save.bad { color: var(--gold); }
.meter progress { display: block; width: 100%; height: 3px; border: 0; appearance: none; -webkit-appearance: none; background: transparent; }
.meter progress::-webkit-progress-bar { background: transparent; }
.meter progress::-webkit-progress-value { background: var(--stream); transition: width .4s var(--ease); }
.meter progress::-moz-progress-bar { background: var(--stream); }

/* Layout */
.wrap { flex: 1; width: 100%; max-width: 820px; margin: 0 auto; padding: clamp(28px, 6vw, 56px) var(--gutter) 48px; }
.wrap.narrow { max-width: 560px; display: grid; align-content: center; }
.panel { padding: clamp(24px, 5vw, 40px); border-radius: var(--radius); border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(16, 43, 64, .5), rgba(10, 29, 46, .35)); }
.center { text-align: center; }
.center form { display: grid; justify-items: center; gap: 18px; margin-top: 22px; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 16px; font: 400 11px/1.4 var(--display);
  letter-spacing: .26em; text-transform: uppercase; color: var(--cyan); }
.eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--stream); }
.lede { color: var(--muted); max-width: 62ch; }
.sicon { margin-right: 12px; font-size: .85em; }
.foot { padding: 24px var(--gutter) 32px; text-align: center; font-size: .86rem; color: var(--dim); border-top: 1px solid var(--line); }
.foot p { margin: 0; }

/* Steps: with scripting on, one section shows at a time */
.js .step { display: none; }
.js .step.on { display: block; animation: step-in .35s var(--ease); }
.step + .step { margin-top: 56px; }
.js .step + .step { margin-top: 0; }
@keyframes step-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .js .step.on { animation: none; } }
.step-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 36px; }
.step-nav .btn:only-child { margin-left: auto; }

/* Questions */
.q { display: block; min-width: 0; margin: 0; padding: 26px 0; border: 0; border-top: 1px solid var(--line); }
.lede + .q, h2 + .q { margin-top: 28px; }
.q-title { display: block; padding: 0; margin-bottom: 6px; font-size: 1.04rem; font-weight: 600; }
/* A floated legend sits inside the fieldset instead of on its top border, so the divider stays a clean line. */
legend.q-title { float: left; width: 100%; }
legend.q-title + * { clear: both; }
.req { color: #ff7a7a; font-weight: 700; }
.q-help { margin: 0 0 12px; font-size: .92rem; color: var(--muted); max-width: 68ch; }
.q.need .q-title { color: var(--gold); }
.q input[type="text"], .q textarea {
  width: 100%; min-height: 52px; padding: 13px 15px; border-radius: var(--radius-sm); border: 1px solid var(--line-2);
  background: rgba(7, 23, 37, .7); color: var(--text); font: 400 1rem/1.5 var(--sans);
  transition: border-color .25s, box-shadow .25s, background .25s; appearance: none; -webkit-appearance: none; }
.q textarea { min-height: 128px; resize: vertical; }
.q input[type="text"]:hover, .q textarea:hover { border-color: rgba(232, 238, 240, .28); }
.q input[type="text"]:focus, .q textarea:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 4px rgba(36, 188, 202, .16); background: rgba(7, 23, 37, .9); }
.opts { display: grid; gap: 8px; }
.opt { display: flex; align-items: flex-start; gap: 12px; min-height: 52px; padding: 13px 15px; border-radius: var(--radius-sm);
  border: 1px solid var(--line-2); background: rgba(7, 23, 37, .5); cursor: pointer; transition: border-color .2s, background .2s; }
.opt:hover { border-color: rgba(232, 238, 240, .28); }
.opt input { flex: none; width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--cyan); }
.opt:has(input:checked) { border-color: var(--cyan); background: rgba(36, 188, 202, .1); }
.opt:has(input:focus-visible) { outline: 2px solid var(--cyan); outline-offset: 2px; }

/* Uploads */
.upload { margin-top: 14px; padding: 16px; border-radius: var(--radius-sm); border: 1px dashed var(--line-2); background: rgba(7, 23, 37, .35); }
.upload.over { border-color: var(--cyan); background: rgba(36, 188, 202, .08); }
.upload .q-help { margin: 10px 0 0; }
.files { list-style: none; margin: 0; padding: 0; }
.files li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: .95rem; }
.files:not(:empty) { margin-bottom: 14px; }
.fname { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.fsize { flex: none; color: var(--dim); font-size: .86rem; }
.files progress { flex: none; width: 96px; height: 6px; accent-color: var(--cyan); }
.upload-error { margin: 10px 0 0; font-size: .9rem; color: var(--danger); }
.link { padding: 6px 2px; border: 0; background: none; color: var(--blue-hi); font: 600 .9rem/1.2 var(--sans); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 24px; border-radius: 999px;
  font: 600 .98rem/1.2 var(--sans); text-decoration: none; cursor: pointer; border: 1px solid var(--line-2); color: var(--text);
  background: rgba(9, 27, 43, .88); transition: transform .35s var(--ease), box-shadow .35s, background .25s, border-color .25s; }
.btn:hover { transform: translateY(-2px); border-color: rgba(232, 238, 240, .32); background: rgba(16, 43, 64, .92); }
.btn:active { transform: translateY(0); }
.btn-primary { border: 0; color: #fff; background: linear-gradient(100deg, #087bef, #1aa2e0 55%, #24bcca);
  box-shadow: 0 8px 28px -8px rgba(8, 123, 239, .7), inset 0 1px 0 rgba(255, 255, 255, .25); }
.btn-primary:hover { background: linear-gradient(100deg, #1886f5, #22aee6 55%, #34c8d5); }
.btn-sm { min-height: 44px; padding: 8px 18px; font-size: .92rem; }
.btn[disabled] { opacity: .6; pointer-events: none; }
.pick:focus-within { outline: 2px solid var(--cyan); outline-offset: 3px; }

/* Messages */
.alert, .notice { padding: 14px 16px; border-radius: var(--radius-sm); font-size: .95rem; }
.alert { background: rgba(224, 122, 122, .1); border: 1px solid rgba(224, 122, 122, .3); }
.notice { background: rgba(36, 188, 202, .08); border: 1px solid rgba(36, 188, 202, .3); }
.missing { margin: 0 0 8px; padding: 0; list-style: none; }
.missing li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.missing .link { text-align: left; font-weight: 500; font-size: .98rem; }
.missing small { display: block; color: var(--dim); }