/* impeccable-disable overused-font -- Montserrat + Inter are the actual
   typefaces on the live innovationhub.solutions site; this package must
   match the client's existing brand, not introduce a new one. */
/* --------------------------------------------------------------------------
   Innovation Hub — form styles
   Brand sourced from innovationhub.solutions:
   amber #FFA900 (primary), blue #0073B6 (secondary), near-black ink,
   Montserrat (display) + Inter (body), light theme.
   Shared by both form pages. Self-contained; no build step.
-------------------------------------------------------------------------- */

:root {
  --amber: #ffa900;
  --amber-600: #e0950a;
  --blue: #0073b6;
  --blue-bright: #2e93cf;
  --ink: #14181f;
  --muted-fg: #5b6573;
  --pos: #1a8f3c;
  --neg: #d23b3b;

  --surface-page: #f5f6f8;
  --surface-raised: #ffffff;
  --surface-inset: #f1f3f6;
  --line: #e4e7eb;
  --faint: #c4ccd6;

  --radius: 0.85rem;
  --radius-sm: 0.55rem;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--ink);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 4rem;
}

/* Header ------------------------------------------------------------------ */
.form-head {
  position: relative;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.75rem 1.75rem 1.5rem;
  margin-bottom: 1.5rem;
  overflow: hidden;
}
.form-head::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--amber);
}
.eyebrow {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
  margin: 0 0 0.5rem;
}
.form-head h1 {
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-size: 1.75rem;
  line-height: 1.15;
  margin: 0 0 0.6rem;
  letter-spacing: -0.01em;
}
.form-head p {
  margin: 0;
  color: var(--muted-fg);
  font-size: 0.97rem;
}
.badge-internal {
  display: inline-block;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #7a5a00;
  background: #fff4d6;
  border: 1px solid #f2d98a;
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
  margin-bottom: 0.75rem;
}

/* Sections ---------------------------------------------------------------- */
form { display: block; }
.section {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem 1.75rem;
  margin-bottom: 1.15rem;
}
.section > h2 {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 1.02rem;
  margin: 0 0 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.section > h2 .num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 999px;
  background: var(--amber);
  color: #1a1205;
  font-size: 0.8rem;
  font-weight: 800;
  flex: none;
}
.section .hint {
  color: var(--muted-fg);
  font-size: 0.85rem;
  margin: 0 0 1.1rem;
}

/* Fields ------------------------------------------------------------------ */
.field { margin-bottom: 1.1rem; }
.field:last-child { margin-bottom: 0; }
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
}
label.lbl {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 0.4rem;
}
.opt { color: var(--muted-fg); font-weight: 400; }
.req { color: var(--neg); margin-left: 0.15rem; }

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
textarea,
select {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--surface-raised);
  border: 1px solid var(--faint);
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.75rem;
}
textarea { resize: vertical; min-height: 92px; }
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--amber);
  box-shadow: 0 0 0 3px rgba(255, 169, 0, 0.22);
}

/* Choice groups ----------------------------------------------------------- */
.choices { display: grid; gap: 0.55rem; }
.choices.cols-2 { grid-template-columns: 1fr 1fr; }
.choice {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.75rem;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
  font-size: 0.92rem;
}
.choice:hover { border-color: var(--faint); background: var(--surface-inset); }
.choice input { margin-top: 0.15rem; accent-color: var(--amber); flex: none; }
.choice.checked { border-color: var(--amber); background: #fff9ec; }
.choice.disabled { opacity: 0.5; cursor: not-allowed; }

.other-inline { margin-top: 0.55rem; }

/* Consent ----------------------------------------------------------------- */
.consent {
  background: var(--surface-inset);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.9rem 1rem;
  font-size: 0.9rem;
  color: var(--muted-fg);
}
.consent .choice { background: transparent; border: none; padding: 0.6rem 0 0; }

/* Honeypot ---------------------------------------------------------------- */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Actions ----------------------------------------------------------------- */
.actions { margin-top: 1.4rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
button.submit {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 0.98rem;
  color: #1a1205;
  background: var(--amber);
  border: none;
  border-radius: var(--radius-sm);
  padding: 0.85rem 1.75rem;
  cursor: pointer;
  transition: background 0.14s, transform 0.05s;
}
button.submit:hover { background: var(--amber-600); }
button.submit:active { transform: translateY(1px); }
button.submit:disabled { opacity: 0.6; cursor: default; }
.form-note { color: var(--muted-fg); font-size: 0.82rem; }

/* Status messages --------------------------------------------------------- */
.status { margin-top: 1.1rem; border-radius: var(--radius-sm); padding: 0.85rem 1rem; font-size: 0.92rem; display: none; }
.status.show { display: block; }
.status.ok { background: #e8f6ec; border: 1px solid #b6e3c2; color: #146c30; }
.status.err { background: #fdeaea; border: 1px solid #f2b8b8; color: #a52020; }
.field-error { color: var(--neg); font-size: 0.8rem; margin-top: 0.3rem; display: none; }
.field-error.show { display: block; }

/* Success panel (replaces form) ------------------------------------------- */
.success-panel {
  display: none;
  position: relative;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2.25rem 1.75rem;
  text-align: center;
  overflow: hidden;
}
.success-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--pos);
}
.success-panel.show { display: block; }
.success-panel h2 {
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-size: 1.4rem;
  margin: 0 0 0.5rem;
}
.success-panel p { color: var(--muted-fg); margin: 0 auto; max-width: 46ch; }
.success-panel .check {
  width: 3.25rem; height: 3.25rem; border-radius: 999px;
  background: #e8f6ec; color: var(--pos);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.6rem; margin-bottom: 0.9rem;
}

.foot {
  text-align: center;
  color: var(--muted-fg);
  font-size: 0.8rem;
  margin-top: 2rem;
}
.foot a { color: var(--blue); text-decoration: none; }

@media (max-width: 560px) {
  .grid-2, .choices.cols-2 { grid-template-columns: 1fr; }
  .form-head h1 { font-size: 1.45rem; }
  .section { padding: 1.25rem 1.15rem; }
}

/* ==========================================================================
   PRINT — paper fill-in version
   Turns both forms into hand-fillable paper documents for tabling at events.
   Screen rendering is untouched.
   ========================================================================== */
@media print {
  @page {
    size: letter;
    margin: 0.5in 0.55in 0.6in;
  }

  html, body {
    background: #fff;
    font-size: 10.5pt;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .wrap { max-width: none; margin: 0; padding: 0; }

  /* --- Chrome that has no place on paper ------------------------------- */
  .actions,
  .form-note,
  .status,
  .success-panel,
  .field-error,
  .hp { display: none !important; }

  /* "Other" specify lines are JS-revealed on screen; on paper they always show */
  .other-inline { display: block !important; }

  /* --- Header ----------------------------------------------------------- */
  .form-head {
    padding: 0.9rem 1rem 0.8rem;
    margin-bottom: 0.7rem;
    border-color: #d5d9df;
    break-inside: avoid;
    break-after: avoid;
  }
  .form-head h1 { font-size: 17pt; margin-bottom: 0.35rem; }
  .form-head p { font-size: 9pt; }
  .eyebrow { font-size: 7.5pt; margin-bottom: 0.3rem; }
  .badge-internal { font-size: 7pt; margin-bottom: 0.45rem; }

  /* --- Sections --------------------------------------------------------- */
  .section {
    padding: 0.75rem 1rem 0.85rem;
    margin-bottom: 0.6rem;
    border-color: #d5d9df;
    border-radius: 0.4rem;
    /* Sections may flow across a page break; keeping them whole wastes a sheet.
       Individual fields and choice rows are what must stay intact. */
    break-inside: auto;
  }
  .section > h2 { font-size: 11pt; margin-bottom: 0.5rem; break-after: avoid; }
  .section > h2 .num { width: 1.25rem; height: 1.25rem; font-size: 7.5pt; }
  .section .hint { font-size: 8.5pt; margin-bottom: 0.5rem; }

  /* --- Fields ----------------------------------------------------------- */
  .field { margin-bottom: 0.7rem; break-inside: avoid; }
  .grid-2 { gap: 0.7rem; }
  label.lbl { font-size: 9pt; margin-bottom: 0.22rem; }

  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="date"] {
    min-height: 0.33in;
    padding: 0.06in 0.09in;
    border: 1px solid #9aa4b0;
    border-radius: 0.2rem;
    background: #fff;
  }

  /* Ruled writing lines so long answers stay legible in handwriting */
  textarea {
    min-height: 1.15in;
    border: 1px solid #9aa4b0;
    border-radius: 0.2rem;
    padding: 0.04in 0.09in;
    background-image: repeating-linear-gradient(
      to bottom, #fff 0 27px, #dde2e8 27px 28px
    );
    background-position: 0 2px;
  }

  /* Kill the browser's date/number widget affordances */
  input[type="date"]::-webkit-calendar-picker-indicator,
  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button { display: none; }

  /* --- Choice groups ---------------------------------------------------- */
  .choices { gap: 0.3rem; }
  .choice {
    padding: 0.28rem 0.45rem;
    border-color: #dfe3e8;
    font-size: 9pt;
    background: #fff !important;
    break-inside: avoid;
  }
  /* Native radios/checkboxes print inconsistently — draw them explicitly */
  .choice input[type="radio"],
  .choice input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 11px;
    height: 11px;
    margin-top: 2.5px;
    border: 1.2px solid #14181f;
    border-radius: 2px;
    background: #fff;
    flex: none;
  }
  .choice input[type="radio"] { border-radius: 50%; }
  .choice.checked { border-color: #dfe3e8; background: #fff !important; }

  /* --- Consent ---------------------------------------------------------- */
  .consent { font-size: 8.5pt; padding: 0.6rem 0.7rem; break-inside: avoid; }

  /* --- Footer ----------------------------------------------------------- */
  .foot { margin-top: 0.8rem; font-size: 8pt; }
  .foot a { color: var(--ink); }
}

/* ==========================================================================
   SHORT EVENT INTAKE (body.compact)
   One-page participant card used at tabling events. The print rhythm below is
   tuned so the whole card lands on a single sheet; loosening any of it will
   push the signature row onto a second page.
   ========================================================================== */
.staff-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1.1rem;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.75rem;
  margin-bottom: 1.15rem;
}
.choice.cat { align-items: flex-start; padding: 0.7rem 0.8rem; }
.choice.cat strong { font-weight: 700; }
.choice.cat .opt { font-size: 0.82rem; line-height: 1.35; display: inline-block; margin-top: 0.1rem; }

@media (max-width: 560px) {
  .staff-row { grid-template-columns: 1fr; padding: 1rem 1.15rem; }
}

@media print {
  body.compact .form-head { padding: 0.5rem 0.8rem 0.45rem; margin-bottom: 0.3rem; }
  body.compact .form-head h1 { font-size: 14pt; margin-bottom: 0.15rem; }
  body.compact .form-head p { font-size: 8pt; }
  body.compact .eyebrow { font-size: 7pt; margin-bottom: 0.15rem; }

  body.compact .staff-row {
    padding: 0.35rem 0.8rem 0.4rem;
    margin-bottom: 0.3rem;
    border-color: #d5d9df;
    border-radius: 0.4rem;
    gap: 0.6rem;
    break-inside: avoid;
  }

  body.compact .section {
    padding: 0.4rem 0.8rem 0.45rem;
    margin-bottom: 0.3rem;
  }
  body.compact .section > h2 { font-size: 9.5pt; margin-bottom: 0.25rem; }
  body.compact .section > h2 .num { width: 1.05rem; height: 1.05rem; font-size: 6.5pt; }
  body.compact .section .hint { font-size: 7.5pt; margin-bottom: 0.3rem; }

  body.compact .field { margin-bottom: 0.32rem; }
  body.compact .grid-2 { gap: 0.55rem; }
  body.compact label.lbl { font-size: 8pt; margin-bottom: 0.12rem; }

  body.compact input[type="text"],
  body.compact input[type="email"],
  body.compact input[type="tel"],
  body.compact input[type="date"] { min-height: 0.27in; padding: 0.04in 0.08in; }

  body.compact textarea {
    min-height: 0.45in;
    background-image: repeating-linear-gradient(
      to bottom, #fff 0 24px, #dde2e8 24px 25px
    );
  }

  body.compact .other-inline { margin-top: 0.28rem; }

  body.compact .choices { gap: 0.16rem; }
  body.compact .choice { padding: 0.16rem 0.4rem; font-size: 8pt; }
  body.compact .choice input[type="radio"],
  body.compact .choice input[type="checkbox"] { width: 10px; height: 10px; margin-top: 2px; }
  body.compact .choice.cat { padding: 0.28rem 0.42rem; }
  body.compact .choice.cat .opt { font-size: 7pt; margin-top: 0; }

  body.compact .consent { font-size: 7.5pt; padding: 0.35rem 0.5rem; }
  body.compact .consent .choice { padding: 0; font-size: 7.5pt; }
  body.compact .sign-row { margin-top: 0.35rem; }
  body.compact .foot { margin-top: 0.35rem; font-size: 7.5pt; }
}