/* The onsite registration form, in the language of elevate.org.ph: a black bar
   with the white wordmark, a red and black pair of buttons, white cards edged
   in red, heavy tightly-tracked headings, a warm voice. Values are read from the
   live site (button radius 15px, padding 12px 24px, card border 2px solid
   #EB1C23 at 20px, body text #333, headings Helvetica Neue LT at 800).

   Two deliberate differences. The brand red #EB1C23 is 4.45:1 on white, just
   under what small text needs, so it is kept for borders and doodles and
   --red-ink (#D9141B, 5.16:1) is used for text and fills. And the site's
   typeface, Helvetica Neue LT, is a licensed font, so this uses the system's
   Helvetica Neue and falls back to what the device has. If the licence covers
   web use, add the files under fonts/ and an @font-face for "Helvetica Neue
   LT"; nothing else needs to change. */

:root {
  --black: #000000;
  --ink: #333333;
  --muted: #595959;
  --ground: #FFFFFF;
  --sunk: #F5F5F5;
  --rule: #D6D6D6;
  --red: #EB1C23;
  --red-ink: #D9141B;
  --red-soft: #FDECEC;
  --on-red: #FFFFFF;

  --space-xs: 4px; --space-sm: 8px; --space-md: 12px; --space-lg: 18px; --space-xl: 28px;
  --radius-button: 15px;
  --radius-field: 12px;
  --radius-card: 20px;
  --measure: 34rem;

  --face: "Helvetica Neue LT", "Helvetica Neue", Helvetica, Arial, "Roboto", system-ui, sans-serif;

  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 1rem/1.5 var(--face);
  -webkit-font-smoothing: antialiased;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
}

/* ---------------------------------------------------------------- the bar -- */

.site-bar { background: var(--black); padding-top: env(safe-area-inset-top); }
.site-bar-inner {
  max-width: var(--measure); margin: 0 auto; min-height: 4.25rem;
  padding: 0 var(--space-lg);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
}
.wordmark { display: block; height: 1.75rem; width: auto; }

#app { max-width: var(--measure); margin: 0 auto; padding: var(--space-xl) var(--space-lg) 4rem; }

h1 {
  font-size: 2rem; line-height: 1.1; font-weight: 800; letter-spacing: -0.03em;
  color: var(--black); margin: 0 0 var(--space-sm);
}
p { margin: 0 0 var(--space-md); }
code { font-size: 0.9em; background: var(--sunk); padding: 0 var(--space-xs); border-radius: 6px; }

.notice { margin-bottom: var(--space-lg); }
.notice h2 {
  font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; color: var(--black);
  margin: 0 0 var(--space-sm);
}
.lede { color: var(--muted); font-size: 1.0625rem; margin-bottom: var(--space-lg); }

/* ---------------------------------------------------------------- fields -- */

fieldset { border: 0; padding: 0; margin: 0 0 var(--space-lg); min-width: 0; }

legend {
  float: left; width: 100%;
  font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; color: var(--black);
  padding: var(--space-lg) 0 0; margin: 0 0 var(--space-md);
  border-top: 1px solid var(--rule);
}
legend + * { clear: both; }

.field { margin-bottom: var(--space-lg); }
.row { display: flex; gap: var(--space-md); align-items: flex-start; }
.row .field { flex: 0 0 7.5rem; }
.row .field.grow { flex: 1 1 auto; }

label, .label { display: block; font-weight: 600; margin-bottom: var(--space-xs); color: var(--black); }

/* The small note beside a question ("optional", "needed under 18") sits at the
   right edge of the label's row, so the question itself reads clean. */
.field > label, legend {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md);
}
.optional {
  font-weight: 400; color: var(--muted); font-size: 0.875rem;
  margin-left: auto; text-align: right;
}

input[type="text"], input[type="password"], input[type="tel"], input[type="email"] {
  width: 100%; min-height: 3rem;
  padding: var(--space-sm) var(--space-md);
  font: inherit; font-size: 1rem; /* 16px: iOS does not zoom a focused field */
  color: var(--black); background: var(--ground);
  border: 1.5px solid #B8B8B8; border-radius: var(--radius-field);
  appearance: none;
}
input::placeholder { color: var(--muted); opacity: 0.7; }

input:focus-visible, button:focus-visible, .check input:focus-visible + label::before,
.segmented input:focus-visible + label {
  outline: 3px solid var(--black); outline-offset: 2px;
}
input[type="text"]:focus-visible, input[type="password"]:focus-visible,
input[type="tel"]:focus-visible, input[type="email"]:focus-visible { border-color: var(--black); }

input[aria-invalid="true"] { border-color: var(--red-ink); background: var(--red-soft); }

.hint { color: var(--muted); font-size: 0.875rem; margin: var(--space-xs) 0 0; }

.error { color: var(--red-ink); font-size: 0.875rem; font-weight: 600; margin: var(--space-xs) 0 0; }
.error:empty { display: none; }

/* -------------------------------------------------------- sex, two choices -- */

.segmented { display: flex; gap: var(--space-sm); }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented label {
  flex: 1; margin: 0; min-height: 3rem; display: flex; align-items: center; justify-content: center;
  border: 1.5px solid #B8B8B8; border-radius: var(--radius-field);
  background: var(--ground); cursor: pointer; font-weight: 600; color: var(--black);
}
.segmented input:checked + label { background: var(--black); border-color: var(--black); color: #fff; }

/* ------------------------------------------------------------ checkboxes -- */

.check { position: relative; margin-bottom: var(--space-md); }
.check input { position: absolute; opacity: 0; width: 1.75rem; height: 1.75rem; margin: 0; left: 0; top: 0.1rem; }
.check label {
  display: block; margin: 0; font-weight: 400; cursor: pointer; color: var(--ink);
  padding: 0.1rem 0 0.1rem 2.5rem; min-height: 2.5rem;
}
.check label::before {
  content: ""; position: absolute; left: 0; top: 0.1rem; width: 1.75rem; height: 1.75rem;
  border: 1.5px solid #B8B8B8; border-radius: 8px; background: var(--ground);
}
.check input:checked + label::before {
  background: var(--black); border-color: var(--black);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23FFFFFF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 10.5l3.5 3.5 7.5-8'/%3E%3C/svg%3E");
  background-size: 1.1rem; background-position: center; background-repeat: no-repeat;
}
.check a { color: var(--red-ink); font-weight: 600; }

/* ---------------------------------------------------------- the combobox -- */

.combo-box { position: relative; }
#leader-list {
  position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + var(--space-xs));
  margin: 0; padding: var(--space-xs); list-style: none;
  background: var(--ground); border: 2px solid var(--red); border-radius: var(--radius-field);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
}
#leader-list li {
  padding: var(--space-md); min-height: 3rem; display: flex; align-items: center;
  border-radius: 8px; cursor: pointer; font-weight: 500;
}
#leader-list li[aria-selected="true"] { background: var(--sunk); }

/* ------------------------------------------------- the relationship list --
   A list of our own, since the browser's cannot be styled. It opens as the
   same red-edged panel the Leader list uses. */

.select { position: relative; }
.select-button {
  width: 100%; min-height: 3rem; display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-md); padding: var(--space-sm) var(--space-md);
  font: inherit; font-size: 1rem; text-align: left; color: var(--black);
  background: var(--ground); border: 1.5px solid #B8B8B8; border-radius: var(--radius-field); cursor: pointer;
}
.select-button[aria-expanded="true"] { border-color: var(--red); }
.select-value.placeholder { color: var(--muted); opacity: 0.7; }
.select-chevron { flex: none; }
@media (prefers-reduced-motion: no-preference) {
  .select-chevron { transition: transform 150ms ease-out; }
}
.select-button[aria-expanded="true"] .select-chevron { transform: rotate(180deg); }
.select-list {
  position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + var(--space-xs));
  margin: 0; padding: var(--space-xs); list-style: none;
  background: var(--ground); border: 2px solid var(--red); border-radius: var(--radius-field);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
}
.select-list li {
  padding: var(--space-md); min-height: 3rem; display: flex; align-items: center;
  justify-content: space-between; gap: var(--space-md);
  border-radius: 8px; cursor: pointer; font-weight: 500;
}
.select-list li[data-active="true"] { background: var(--sunk); }
.select-list li[aria-selected="true"] { font-weight: 800; color: var(--black); }
.select-list li[aria-selected="true"]::after {
  content: ""; flex: none; width: 1.1rem; height: 1.1rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23D9141B' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 10.5l3.5 3.5 7.5-8'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* --------------------------------------------------------------- buttons --
   The site's two buttons: red, and black. Uppercase, 15px radius. */

.button {
  display: block; width: 100%; min-height: 3.25rem; padding: var(--space-md) var(--space-xl);
  font: inherit; font-weight: 700; font-size: 0.9375rem; letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--on-red); background: var(--red-ink);
  border: 0; border-radius: var(--radius-button); cursor: pointer;
}
.button:hover { filter: brightness(0.94); }
.button:disabled { opacity: 0.6; cursor: progress; }
.button.dark { background: var(--black); color: #fff; }
.button + .button { margin-top: var(--space-md); }

/* Pages of the form: a quiet progress line, and Back beside Next. */
.progress { margin-bottom: var(--space-lg); }
.step-label { margin: 0 0 var(--space-sm); color: var(--muted); font-size: 0.875rem; font-weight: 600; }
.bar { height: 6px; background: var(--sunk); border-radius: 3px; overflow: hidden; }
.bar span { display: block; height: 100%; width: 0; background: var(--red); border-radius: 3px; }
@media (prefers-reduced-motion: no-preference) { .bar span { transition: width 200ms ease-out; } }
/* The review page: the answers read back, a group at a time. */
.review-group { margin-bottom: var(--space-lg); padding-bottom: var(--space-md); border-bottom: 1px solid var(--rule); }
.review-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-sm); }
.review-head h2 { font-size: 1.125rem; font-weight: 800; letter-spacing: -0.02em; color: var(--black); margin: 0; }
.review-edit {
  font: inherit; font-size: 0.875rem; font-weight: 700; color: var(--red-ink); background: none;
  border: 0; padding: var(--space-sm) 0 var(--space-sm) var(--space-md); cursor: pointer; text-decoration: underline;
}
.review-group dl { margin: 0; display: grid; grid-template-columns: minmax(7rem, 38%) 1fr; gap: var(--space-xs) var(--space-md); }
.review-group dt { color: var(--muted); font-size: 0.9375rem; }
.review-group dd { margin: 0; color: var(--black); font-weight: 600; overflow-wrap: anywhere; }
#screen-form legend:focus { outline: none; }
.nav { display: flex; gap: var(--space-md); }
.nav .button { margin-top: 0; }
.nav #back { flex: 0 0 8rem; width: auto; }
.nav #next, .nav #submit { flex: 1 1 auto; }

/* On the bar: small, outlined, white. */
.quiet {
  font: inherit; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase;
  color: #fff; background: transparent; border: 1.5px solid #fff; border-radius: var(--radius-button);
  min-height: 2.5rem; padding: 0 var(--space-lg); cursor: pointer; white-space: nowrap;
}
.quiet:focus-visible { outline-color: #fff; }

.message { min-height: 1.5em; font-weight: 600; }
.message.is-error { color: var(--red-ink); }
.note {
  background: var(--sunk); border-left: 4px solid var(--red); border-radius: 0 var(--radius-field) var(--radius-field) 0;
  padding: var(--space-md) var(--space-lg); font-size: 0.9375rem;
}

/* ------------------------------------------------- the one expressive bit --
   The registrant leaves with this: their ID and QR, large, on the site's own
   card (white, 2px red, 20px), with its smiley and scribbled underline. Everything
   before it is plain so that this is what they remember. */

.ticket {
  background: var(--ground); border: 2px solid var(--red); border-radius: var(--radius-card);
  padding: var(--space-xl) var(--space-lg); text-align: center; margin-bottom: var(--space-lg);
}
.ticket-title { display: inline-flex; align-items: center; gap: var(--space-md); }
.ticket h1 { font-size: 2.25rem; margin: 0; }
/* Focused by script so a screen reader reads the result, but not a control:
   it should not draw a focus ring. */
.ticket h1:focus { outline: none; }
.smiley { width: 2.75rem; height: auto; display: block; }
.scribble { display: block; width: 10.5rem; max-width: 60%; height: auto; margin: var(--space-xs) auto var(--space-md); }
.ticket .lede { margin-bottom: var(--space-lg); }
.qr {
  display: inline-block; background: #fff; padding: var(--space-md);
  border: 1px solid var(--rule); border-radius: var(--radius-field); margin-bottom: var(--space-md);
}
.qr img { display: block; width: 15rem; max-width: 100%; height: auto; }
.id-label { color: var(--muted); font-size: 0.875rem; margin-bottom: 0; }
.member-id {
  font-size: clamp(1.5rem, 7vw, 2.25rem); font-weight: 800; letter-spacing: -0.01em; color: var(--black);
  font-variant-numeric: tabular-nums; margin: 0; word-break: break-all;
}
.after { color: var(--muted); margin-bottom: var(--space-xl); }

@media (prefers-reduced-motion: no-preference) {
  .ticket { animation: arrive 360ms cubic-bezier(0.2, 0.7, 0.2, 1); }
  @keyframes arrive { from { opacity: 0; transform: translateY(8px) scale(0.985); } to { opacity: 1; transform: none; } }
}

/* Turnstile shows here only if it needs a person (appearance: interaction-only);
   otherwise it stays empty and takes no room. */
#turnstile { position: fixed; left: 0; right: 0; bottom: var(--space-lg); display: flex; justify-content: center; z-index: 10; pointer-events: none; }
#turnstile > * { pointer-events: auto; }

@media (min-width: 40rem) {
  #app { padding-top: 3.5rem; }
  h1 { font-size: 2.5rem; }
  .ticket h1 { font-size: 2.5rem; }
}