/* CRM Event, design system.

   This is shown to the client's own CEO, so it is built as a brand surface,
   not as a form with a colour on it. Three rules hold the whole thing together:

     1. The brand owns the page. Emerald is a ground, not a header stripe. The
        wordmark is a real asset at a real size, never a text substitute.
     2. One accent, used only for the single next action. Electric green means
        "this is what you do now" and never decorates.
     3. It still has to load instantly for 250 people on mobile data during a
        live round, so there is no web font, no framework and no image in the
        critical path.

   Colour arrives at runtime from config.js applyBrand(), so the same stylesheet
   serves Skoda emerald and Volkswagen navy. Never hardcode a brand hex here. */

:root {
  --brand: #0E3A2F;
  --brand-mid: #1B7A5A;
  --accent: #78F9AD;
  --on-accent: #06140F;

  --paper: #FFFFFF;
  --page: #F4F6F4;
  --ink: #0C0F0E;
  --ink-soft: #5A625E;
  --ink-faint: #8B948F;
  --line: #E2E7E4;
  --line-soft: #EFF2F0;

  --r-sm: 10px;
  --r: 16px;
  --r-lg: 22px;

  --maxw: 660px;
  --wide: 1120px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto,
          "Helvetica Neue", Arial, sans-serif;

  --shadow: 0 1px 2px rgba(12,15,14,.04), 0 8px 28px rgba(12,15,14,.06);
  --shadow-lift: 0 2px 4px rgba(12,15,14,.05), 0 18px 48px rgba(12,15,14,.10);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 32px 22px 72px; }
.wrap.wide { max-width: var(--wide); }

/* ============================================================ brand header */

/* A band of the brand's own colour with the real wordmark in it. The wordmark
   is never recoloured and never replaced by text when the file exists. */
.topbar { background: var(--brand); color: #fff; }
.topbar .inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 20px 22px;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 30px;
}
.wide-bar .inner { max-width: var(--wide); }
.topbar img { height: 22px; width: auto; display: block; }
.topbar .brandname {
  font-weight: 700; font-size: 15px; letter-spacing: .1em; text-transform: uppercase;
}
/* Only shown when the logo file is missing, so a brand without artwork yet
   still renders a correct page instead of a broken one. */
.topbar img + .brandname { display: none; }
.topbar .eventname {
  margin-left: auto; font-size: 12.5px; letter-spacing: .04em;
  color: rgba(255,255,255,.72); text-align: right;
}

/* ================================================================ typography */

h1 {
  font-size: clamp(30px, 7vw, 40px);
  line-height: 1.08;
  letter-spacing: -.026em;
  margin: 6px 0 12px;
  font-weight: 700;
}
h2 { font-size: 21px; line-height: 1.3; letter-spacing: -.012em; margin: 30px 0 12px; font-weight: 650; }
h3 { font-size: 16px; margin: 0 0 6px; font-weight: 650; }
p { margin: 0 0 16px; }

.eyebrow {
  font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 700; color: var(--brand-mid); margin: 0 0 8px;
}
.lede { font-size: 18px; color: var(--ink-soft); margin: 0 0 26px; }
.soft { color: var(--ink-soft); }
.small { font-size: 14px; }
.faint { color: var(--ink-faint); }

/* ===================================================================== card */

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 26px 24px;
  margin: 0 0 20px;
  box-shadow: var(--shadow);
}
.card.flush { padding: 0; overflow: hidden; }

/* ==================================================================== forms */

.field { margin: 0 0 20px; }
.field:last-of-type { margin-bottom: 0; }
.field label {
  display: block; font-size: 13px; font-weight: 650;
  letter-spacing: .02em; margin: 0 0 7px; color: var(--ink);
}
.field .help { font-size: 13px; color: var(--ink-faint); margin: 6px 0 0; }

/* EVERY text-like input, password included. Leaving password out of this list
   is what made the sign in card render one full width box and one short one. */
input[type="text"], input[type="tel"], input[type="email"],
input[type="password"], input[type="number"], input[type="search"],
select, textarea {
  width: 100%;
  display: block;
  font: inherit;
  font-size: 16px;                 /* 16px or iOS zooms the page on focus */
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 14px 15px;
  appearance: none;
  transition: border-color .12s ease, box-shadow .12s ease;
}
input::placeholder, textarea::placeholder { color: var(--ink-faint); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent);
}
select {
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%),
                    linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
  background-position: calc(100% - 19px) 50%, calc(100% - 14px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 40px;
}
.field.invalid input, .field.invalid select { border-color: #C0392B; }
.field .error { color: #C0392B; font-size: 13px; margin: 7px 0 0; font-weight: 600; }

/* ================================================================== buttons */

.btn {
  display: block; width: 100%;
  font: inherit; font-size: 16.5px; font-weight: 700; letter-spacing: .01em;
  text-align: center; text-decoration: none;
  padding: 17px 20px;
  border: 1px solid var(--brand);
  border-radius: 12px;
  background: var(--brand);
  color: #fff;
  cursor: pointer;
  transition: transform .08s ease, box-shadow .12s ease, opacity .12s ease;
}
.btn:hover { box-shadow: var(--shadow-lift); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: default; box-shadow: none; transform: none; }
.btn.ghost { background: transparent; color: var(--brand); }
.btn.accent { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn + .btn { margin-top: 12px; }
.btn.inline { display: inline-block; width: auto; padding: 13px 26px; font-size: 15px; }

/* ================================================================== choices */

.choices { display: grid; gap: 11px; margin: 0 0 22px; }
.choice {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 17px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  cursor: pointer;
  font-size: 16px;
  text-align: left;
  transition: border-color .12s ease, background .12s ease;
}
.choice:hover { border-color: var(--brand-mid); }
.choice .dot {
  flex: none; width: 21px; height: 21px; border-radius: 50%;
  border: 2px solid var(--line);
  transition: border-color .12s ease, background .12s ease, box-shadow .12s ease;
}
.choice[aria-checked="true"] { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 4%, #fff); }
.choice[aria-checked="true"] .dot {
  border-color: var(--brand); background: var(--brand);
  box-shadow: inset 0 0 0 4px var(--paper);
}

/* ================================================================= progress */

.progress { display: flex; gap: 4px; margin: 0 0 20px; }
.progress span { flex: 1; height: 3px; border-radius: 2px; background: var(--line); transition: background .2s ease; }
.progress span.done { background: var(--brand); }
.stepcount {
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 700; color: var(--ink-faint); margin: 0 0 10px;
}

/* =================================================================== states */

.locked {
  border-style: dashed; background: transparent; color: var(--ink-soft);
  text-align: center; padding: 30px 22px; box-shadow: none;
}
.status { font-size: 14px; color: var(--ink-soft); margin: 12px 0 0; min-height: 20px; }

/* ============================================================== steps strip */

/* Three numbered steps under the hero. It turns a form into a described
   experience, which is the difference between "fill this in" and "here is what
   is going to happen to you". */
.steps { display: grid; gap: 12px; margin: 0 0 26px; }
.step-row {
  display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start;
  padding: 16px 18px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.step-row .num {
  width: 30px; height: 30px; border-radius: 50%;
  background: color-mix(in srgb, var(--brand) 8%, #fff);
  color: var(--brand);
  font-size: 14px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.step-row .t { font-size: 15.5px; font-weight: 650; }
.step-row .d { font-size: 14px; color: var(--ink-soft); margin-top: 2px; }

/* ==================================================================== rule */

.rule { height: 1px; background: var(--line); border: 0; margin: 30px 0; }

/* ============================================================== breakpoints */

@media (min-width: 760px) {
  .wrap { padding: 44px 26px 84px; }
  .topbar .inner { padding: 22px 26px; }
  .topbar img { height: 24px; }
  .steps { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .wrap { padding: 56px 26px 100px; }
  .topbar img { height: 26px; }
}
@media (max-width: 380px) {
  html, body { font-size: 16px; }
  .wrap { padding: 24px 17px 60px; }
  .card { padding: 22px 19px; }
  .topbar .eventname { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}