/* 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;
  --accent-wash: rgba(120, 249, 173, .08);

  --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;
  /* The mark sits in the middle of the bar for both brands. Client
     instruction, 1 September 2026. With Volkswagen's name suppressed the
     roundel was stranded in the corner, and a lone mark centred reads as a
     masthead rather than an afterthought. */
  justify-content: center;
  /* Two stacked rows now: the mark, then the conference name under it. */
  flex-direction: column;
  gap: 10px;
  min-height: 30px;
}
.topbar .markrow {
  display: flex; align-items: center; justify-content: center; gap: 16px;
}
.wide-bar .inner { max-width: var(--wide); }
.topbar img {
  height: 46px; width: auto; display: block;
  max-width: min(72vw, 560px); object-fit: contain;
}
.topbar .brandname {
  font-weight: 700; font-size: 15px; letter-spacing: .1em; text-transform: uppercase;
}
/* Hidden when the logo artwork already says the name, which Skoda's wordmark
   does. Shown when the file is missing, so a brand without artwork still
   renders a correct page, and shown for Volkswagen, whose logo is a roundel
   that carries no name at all. */
.topbar img + .brandname { display: none; }
:root[data-brand="vw"] .topbar img + .brandname { display: inline; }
/* The roundel is square, so it needs noticeably more height than a wordmark to
   carry the same optical weight beside the name. */
:root[data-brand="vw"] .topbar img { height: 64px; }
:root[data-brand="vw"] .topbar .brandname { font-size: 20px; letter-spacing: .14em; }
.topbar .eventname {
  margin: 0; text-align: center;
  font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,.86);
}

/* ================================================================ 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; }

/* The mark and the conference name are centred, so the sentence directly under
   them is centred too. Left-aligning the heading against a centred masthead
   reads as two pages stacked on each other. Only the opening block moves: the
   form below stays left-aligned, because labels and answers are read down an
   edge and centring them would genuinely hurt. */
.wrap > h1,
.wrap > h1 + p.soft { text-align: center; }
.wrap > h1 + p.soft { max-width: 54ch; margin-left: auto; margin-right: auto; }

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

@media (min-width: 760px) {
  .wrap { padding: 44px 26px 84px; }
  .topbar .inner { padding: 26px 26px; }
  .topbar img { height: 60px; }
  :root[data-brand="vw"] .topbar img { height: 84px; }
  .topbar .eventname { font-size: 14px; }
  .steps { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .wrap { padding: 56px 26px 100px; }
  .topbar .inner { padding: 30px 26px; }
  .topbar img { height: 70px; }
  :root[data-brand="vw"] .topbar img { height: 98px; }
  .topbar .eventname { font-size: 15px; }
}
@media (max-width: 380px) {
  html, body { font-size: 16px; }
  .wrap { padding: 24px 17px 60px; }
  .card { padding: 22px 19px; }
  /* Deliberately NOT hidden on small screens: the phone is where a guest
     actually opens the link, so this is exactly where the conference has to
     name itself. It only tightens. */
  .topbar .eventname { font-size: 11.5px; letter-spacing: .06em; }
}

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

/* ==================================================================== sign in

   Lives here, not in stage.css, because four different pages render this card
   and only one of them was loading that file. An unstyled card paints the
   brand mark at its natural size, which on Volkswagen is a 512px roundel
   filling the screen. A component's styles belong in the sheet every caller
   already has.

   The card is the first thing a client sees of the admin side, sometimes with
   the brand standing next to them, so it is treated as a real screen rather
   than as a pair of inputs. */

.signin {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 120px);
  padding: 28px 0 48px;
}
.signin-card {
  width: 100%; max-width: 396px;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 34px 32px 30px;
  box-shadow: 0 1px 2px rgba(12,15,14,.04), 0 18px 46px rgba(12,15,14,.10);
}

/* Capped in BOTH directions. A wordmark is wide and short, a roundel is square,
   and the same rule has to hold either of them to the same optical weight. */
.signin-mark {
  height: 30px; width: auto; max-width: 190px;
  object-fit: contain; object-position: left center;
  display: block; margin: 0 0 26px;
}
:root[data-brand="vw"] .signin-mark { height: 42px; }

.signin-markname {
  font-size: 15px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--brand); margin: 0 0 26px;
}
.signin-title { font-size: 24px; margin: 0 0 8px; letter-spacing: -.018em; line-height: 1.15; }
.signin-note { font-size: 14.5px; color: var(--ink-soft); margin: 0 0 26px; line-height: 1.5; }
.signin-form .field:last-of-type { margin-bottom: 0; }
.signin-card .status { text-align: left; }

/* A last line of defence. Any brand mark anywhere, in markup nobody has thought
   about yet, is held to something sane rather than painting at 512px. */
img[src*="/assets/vw-"], img[src*="/assets/skoda-"] { max-height: 96px; }