/* ==========================================================================
   Nomination form: split layout, boxed fields, grain-gradient brand panel.

   The palette is deliberately monochrome: black, white and opacity-based
   greys. The only colour is the House of Cars orange (#f25827), in the brand
   panel gradient, the required markers and the focus ring.
   ========================================================================== */

:root {
  /* Native controls (the select popup, scrollbars) follow this. The page is
     light only, so pin it, or a device set to dark paints a dark select popup
     under a light page. */
  color-scheme: light;

  --orange: #f25827;

  --bg:        #ffffff;
  --panel:     #ffffff;
  --ink:       #000000;
  --line:      rgba(0, 0, 0, .25);
  --line-soft: rgba(0, 0, 0, .2);
  --muted:     rgba(0, 0, 0, .6);
  --faint:     rgba(0, 0, 0, .45);
  --ghost:     rgba(0, 0, 0, .3);
  --hover:     rgba(0, 0, 0, .03);

  --bad: #d32f2f;
  --ok:  #17803d;

  --r: 10px;

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



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

/* Must outrank our own display rules (.field is display:flex, and a plain
   [hidden] loses to any class that sets display). Everything toggled from
   JS relies on this. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 12px;
  min-height: 100vh;
  font-family: var(--font);
  font-synthesis: none;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; line-height: 1.1; font-weight: 500; }
p { margin: 0; }
a { color: inherit; }

:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 60;
  padding: 12px 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  font-weight: 500;
}
.skip-link:focus { left: 12px; top: 12px; }

/* ---------- Split layout ---------- */
.split {
  display: grid;
  gap: 24px;
  min-height: calc(100vh - 24px);
}

/* Grid items default to min-width:auto, so they refuse to shrink below their
   content's min-content width. A single long filename (white-space:nowrap in
   the file card) therefore stretched the whole column past the viewport and
   scrolled the page sideways on a phone. min-width:0 lets the column follow
   the viewport instead, and the file card's ellipsis does the rest. */
.split > * { min-width: 0; }

@media (min-width: 1024px) {
  .split { grid-template-columns: 1.06fr 0.94fr; }
  /* Panel is first in the DOM for reading order; brand sits right on desktop. */
  .panel { order: 1; }
  .brand { order: 2; }
}

/* ---------- Brand panel ---------- */
.brand {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  background: #000;
  color: #fff;
  min-height: 340px;
  padding: 32px;
}

@media (min-width: 1024px) {
  .brand {
    position: sticky;
    top: 12px;
    height: calc(100vh - 24px);
    padding: 48px;
  }
}



/* Four corner glows over black, the CSS stand-in for the shader's
   shape="corners" gradient in white and orange. */
.brand::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 62% at -4% -4%,   rgba(255, 255, 255, .72), transparent 72%),
    radial-gradient(66% 60% at 104% -4%,  rgba(242, 88, 39, 1),     transparent 74%),
    radial-gradient(70% 62% at -4% 104%,  rgba(242, 88, 39, .95),   transparent 74%),
    radial-gradient(78% 68% at 104% 104%, rgba(255, 255, 255, .58), transparent 72%);
}

/* Film grain over the gradient. */
.brand__grain {
  position: absolute;
  inset: 0;
  opacity: .38;
  mix-blend-mode: soft-light;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

.brand__inner {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.brand__logo { width: 200px; max-width: 60%; height: auto; }

.brand__title {
  font-size: clamp(2rem, 4.4vw, 3.5rem);
  font-weight: 500;
  letter-spacing: -0.05em;
  line-height: 0.99;
}



/* ---------- Partner ---------- */
.partner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--r);
  background: rgba(0, 0, 0, .35);
  backdrop-filter: blur(6px);
  text-decoration: none;
  transition: border-color .12s ease, background-color .12s ease;
}
.partner:hover { border-color: rgba(255, 255, 255, .5); background: rgba(0, 0, 0, .5); }

/* The badge has a black outer ring, so it needs a light disc behind it or it
   dissolves into the panel. */
.partner__logo {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #fff;
}

.partner__body { display: block; min-width: 0; }

.partner__label {
  display: block;
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}

.partner__name {
  display: block;
  margin-top: 1px;
  font-size: .95rem;
  font-weight: 500;
  color: #fff;
}

.partner__blurb {
  display: block;
  margin-top: 3px;
  font-size: .8rem;
  line-height: 1.35;
  color: rgba(255, 255, 255, .7);
}

@media (min-width: 1024px) {
  .brand__inner { justify-content: space-between; gap: 24px; }
  .brand__title { margin-top: auto; }
}

.brand__steps-label {
  margin-bottom: 14px;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
}

.steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }

.step { display: flex; gap: 12px; align-items: baseline; }

.step__num {
  flex: 0 0 auto;
  font-size: .78rem;
  font-weight: 500;
  color: rgba(255, 255, 255, .55);
  font-variant-numeric: tabular-nums;
}

.step__text { font-size: 1rem; color: rgba(255, 255, 255, .92); }

.step__link {
  margin-left: 8px;
  font-size: .85rem;
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

/* ---------- Form panel ---------- */
.panel {
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: var(--panel);
  padding: 40px 24px;
}

@media (min-width: 640px)  { .panel { padding: 56px 40px; } }
@media (min-width: 1024px) { .panel { padding: 72px 56px; } }

.panel__inner { width: 100%; max-width: 590px; margin: 0 auto; }

.intro { margin-bottom: 44px; }

.intro__title {
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.05;
}

.intro__sub {
  margin-top: 10px;
  font-size: clamp(1rem, 2vw, 1.25rem);
  line-height: 1.3;
  color: var(--muted);
}

/* ---------- Sections ---------- */
/* min-width:0 is load-bearing. A fieldset defaults to min-inline-size:
   min-content, so it refuses to shrink below its widest unbreakable content.
   One video named SnapInsta.to_AQOO8g0…mp4 stretched the fieldset to 1284px
   inside a 590px panel and pushed the whole page sideways on a phone. */
.section { margin: 0 0 34px; padding: 0; border: 0; min-width: 0; }

.section__legend { padding: 0; margin-bottom: 16px; }

.section__title {
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint);
}

.grid { display: grid; gap: 16px; }
@media (min-width: 640px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.section > .field + .field { margin-top: 16px; }

/* ---------- Fields ---------- */
.field { min-width: 0; display: flex; flex-direction: column; }

/* The signature box: value on the left, label on the right, inside a
   hairline-bordered rounded rectangle. */
.fieldbox {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 56px;
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel);
  transition: border-color .12s ease, box-shadow .12s ease;
}

.fieldbox:hover { border-color: var(--ink); }

.fieldbox:focus-within {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(242, 88, 39, .18);
}

.fieldbox__label {
  flex: 0 0 auto;
  font-size: 1rem;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
  transition: opacity .15s ease, transform .15s ease;
}

/* Single-line boxes: the control fills the whole box and carries the padding
   itself, so clicking any part of the box (including the label and the outer
   edges) lands on the input or opens the select. */
.fieldbox:not(.fieldbox--area) { padding: 0; }

.fieldbox:not(.fieldbox--area) .input {
  height: 100%;
  padding: 0 18px;
}

/* The label floats over the right-hand end, so when it clears out the value
   gets the whole width instead of a dead gap. It only overlaps while the field
   is empty, which is exactly when there is nothing underneath it.
   pointer-events:none keeps it from swallowing clicks meant for the control. */
.fieldbox:not(.fieldbox--area) .fieldbox__label {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

/* Clear it once the field is focused or holds a value. Opacity rather than
   display keeps the <label for> association in the accessibility tree, so
   screen readers still announce the field after the label fades. */
.fieldbox:not(.fieldbox--area):focus-within .fieldbox__label,
.fieldbox:not(.fieldbox--area).has-value .fieldbox__label {
  opacity: 0;
  transform: translateY(-50%) translateX(10px);
  pointer-events: none;
}

.req { color: var(--orange); }

.optional {
  margin-left: 6px;
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ghost);
}

.input {
  min-width: 0;
  flex: 1;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 1.05rem;
  color: var(--ink);
  outline: none;
  text-overflow: ellipsis;
}

.input::placeholder { color: var(--ghost); }
.input:disabled { color: var(--ghost); cursor: not-allowed; }

/* Kill the number spinner; the box has its own rhythm. */
.input[type="number"] { -moz-appearance: textfield; }
.input[type="number"]::-webkit-outer-spin-button,
.input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.select { appearance: none; cursor: pointer; color: var(--ink); }
.fieldbox:not(.fieldbox--area) .select { width: 100%; }
.select:invalid { color: var(--ghost); }

/* The popup is drawn by the OS, so it does not inherit the box's colours.
   Set both, or dark mode gives white text on a white list. */
.select option {
  background-color: var(--panel);
  color: var(--ink);
}
.select option:disabled { color: var(--ghost); }

/* Textarea variant: label sits at the top of the box, field fills below. */
.fieldbox--area {
  height: auto;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 16px 18px;
}

.fieldbox__label--top {
  align-self: flex-start;
  font-size: .95rem;
  white-space: normal;
}

.textarea { resize: vertical; min-height: 90px; line-height: 1.5; font-size: 1rem; }
.textarea--tall { min-height: 150px; }

/* Label above a stacked control (the dropzones). */
.stack-label { display: block; margin-bottom: 8px; font-size: 1rem; color: var(--ink); }

.hint { margin-top: 7px; font-size: .82rem; color: var(--ghost); }
.hint__sep { margin: 0 7px; }

.counter {
  margin-top: 7px;
  text-align: right;
  font-size: .78rem;
  color: var(--ghost);
  font-variant-numeric: tabular-nums;
}
.counter.is-over { color: var(--bad); }

.error { display: none; margin-top: 7px; font-size: .82rem; color: var(--bad); }
.error.is-visible { display: block; }

.field.has-error .fieldbox,
.dropzone.has-error { border-color: var(--bad); }
.field.has-error .fieldbox:focus-within { box-shadow: 0 0 0 3px rgba(211, 47, 47, .16); }

/* Honeypot: visually gone, still in the DOM for bots to find. */
.hp {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Dropzone ---------- */
.dropzone {
  position: relative;
  min-width: 0;
  padding: 32px 20px;
  border: 1px dashed var(--line);
  border-radius: var(--r);
  background: var(--panel);
  text-align: center;
  cursor: pointer;
  transition: border-color .12s ease, background-color .12s ease;
}

.dropzone--compact { padding: 24px 20px; }

.dropzone:hover,
.dropzone.is-dragover { border-color: var(--ink); background: var(--hover); }

.dropzone.has-file {
  border-style: solid;
  background: var(--hover);
  cursor: default;
  padding: 14px;
  text-align: left;
}

.dropzone.is-busy { cursor: progress; opacity: .7; }

.dropzone__input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

.dropzone__icon { width: 26px; height: 26px; color: var(--ink); margin-bottom: 10px; }
.dropzone__headline { font-size: 1rem; }
.dropzone__sub { margin-top: 2px; font-size: .9rem; color: var(--ghost); }
.dropzone__browse { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

/* Selected-file card */
.filecard { display: flex; gap: 14px; align-items: center; }

.filecard__thumb {
  flex: 0 0 72px;
  width: 72px;
  height: 54px;
  overflow: hidden;
  border-radius: 6px;
  background: #000;
  display: grid;
  place-items: center;
}
.filecard__thumb video,
.filecard__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.filecard__body { min-width: 0; flex: 1; }

.filecard__name {
  font-size: .95rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.filecard__meta { margin-top: 2px; font-size: .8rem; color: var(--ghost); }
.filecard__meta .ok { color: var(--ok); }
.filecard__meta .busy { color: var(--orange); }

.filecard__remove {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}
.filecard__remove:hover { color: var(--ink); border-color: var(--ink); }
.filecard__remove:disabled { opacity: .4; cursor: not-allowed; }

/* ---------- Checkboxes ---------- */
.checks { display: grid; gap: 14px; }

.check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  font-size: .95rem;
  line-height: 1.35;
  color: var(--muted);
}

.check__wrap { position: relative; flex: 0 0 auto; width: 16px; height: 16px; margin-top: 2px; }

.check__box {
  appearance: none;
  width: 100%;
  height: 100%;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: transparent;
  cursor: pointer;
}
.check__box:checked { background: var(--ink); border-color: var(--ink); }

.check__tick {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 2px;
  display: none;
  pointer-events: none;
  color: var(--panel);
}
.check__box:checked ~ .check__tick { display: block; }

.check:hover .check__box { border-color: var(--ink); }
.check:hover .check__text,
.check__box:checked ~ .check__text { color: var(--ink); }

.section--confirm.has-error .check__box { border-color: var(--bad); }

/* ---------- Submit ---------- */
.submit-bar { margin-top: 36px; }

.alert {
  margin-bottom: 18px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  font-size: .88rem;
  color: var(--muted);
}
.alert--error { border-color: var(--bad); color: var(--bad); }
.alert strong { display: block; margin-bottom: 4px; color: inherit; font-weight: 500; }
.alert ul { margin: 6px 0 0; padding-left: 18px; }
.alert li { margin-top: 3px; }

.progress { margin-bottom: 18px; }
.progress__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 7px;
  font-size: .82rem;
  color: var(--muted);
}
.progress__pct { font-variant-numeric: tabular-nums; }

.progress__track { height: 3px; border-radius: 999px; background: var(--line-soft); overflow: hidden; }
.progress__bar { height: 100%; width: 0%; background: var(--ink); transition: width .2s ease; }

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 52px;
  padding: 0 24px;
  font: inherit;
  font-size: 1.15rem;
  font-weight: 500;
  border: 1px solid var(--line);
  border-radius: var(--r);
  cursor: pointer;
  transition: background-color .12s ease, opacity .12s ease;
}

.btn--primary { color: var(--panel); background: var(--ink); border-color: var(--ink); }
.btn--primary:hover:not(:disabled) { opacity: .85; }
.btn:disabled { cursor: not-allowed; opacity: .45; }

.btn--ghost {
  color: var(--ink);
  background: transparent;
  border-color: var(--line);
  font-size: 1rem;
}
.btn--ghost:hover { border-color: var(--ink); background: var(--hover); }

.btn__spinner {
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(127, 127, 127, .45);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
.btn.is-busy .btn__spinner { display: block; }

@keyframes spin { to { transform: rotate(360deg); } }

.submit-note { margin-top: 14px; text-align: center; font-size: .82rem; color: var(--ghost); }

/* ---------- Success ---------- */
.success { text-align: center; padding: 20px 0; }

.success__icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 20px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ok);
}
.success__icon svg { width: 24px; height: 24px; }

.success__title { font-size: 1.9rem; font-weight: 500; letter-spacing: -0.04em; }
.success__text { max-width: 44ch; margin: 12px auto 0; color: var(--muted); }

.success__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 26px 0;
}
.success__meta > div {
  flex: 1 1 170px;
  padding: 14px 18px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  text-align: left;
}
.success__meta dt {
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ghost);
}
.success__meta dd { margin: 4px 0 0; font-size: .92rem; font-variant-numeric: tabular-nums; }

/* ---------- Footer ---------- */
.footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px 14px;
  margin-top: 40px;
  text-align: center;
  font-size: .8rem;
  color: var(--ghost);
}

.footer__link,
.submit-note__link { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.footer__link:hover,
.submit-note__link:hover { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}