/* What the Hill? — /apply
   The partner application form. Loaded after style.css and reusing its tokens,
   nav, .btn, .wrap and footer. Field styling mirrors #beta-form in style.css so
   the two forms on the site look like the same form. */

/* ---------- head ---------- */

.ap-head {
  padding: 56px 0 8px;
  text-align: center;
}

.ap-head h1 {
  font-size: clamp(2.1rem, 5vw, 3.2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0 0 16px;
}

.ap-sub {
  font-size: 1.08rem;
  line-height: 1.55;
  color: var(--muted);
  max-width: 42rem;
  margin: 0 auto 14px;
}

.ap-meta {
  font-size: 0.9rem;
  color: var(--dim);
  margin: 0;
}

/* a quieter nav button than .btn — this page is already the destination */
.btn-quiet {
  background: var(--chip);
  color: var(--ink);
}

/* ---------- cards ---------- */

.ap-main {
  padding: 24px 0 96px;
}

#apply-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 44rem;
  margin: 0 auto;
}

.ap-card {
  background: var(--surface);
  border-radius: 20px;
  box-shadow: var(--shadow-card);
  padding: 32px;
}

.ap-card[hidden] { display: none; }

.ap-step {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--house);
  margin: 0 0 8px;
}

.ap-card h2 {
  font-size: clamp(1.25rem, 2.6vw, 1.6rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 10px;
}

.ap-help {
  font-size: 0.94rem;
  line-height: 1.5;
  color: var(--muted);
  margin: 0 0 20px;
}

.ap-help-tight {
  margin: -8px 0 4px;
  font-size: 0.86rem;
}

.ap-q {
  font-size: 0.82rem;
  font-weight: 700;
  margin: 20px 0 10px;
}

.ap-rule {
  border: 0;
  border-top: 1px solid var(--hairline);
  margin: 24px 0 20px;
}

/* ---------- fields — matched to #beta-form ---------- */

#apply-form label {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  margin: 0 0 6px;
}

#apply-form input[type='text'],
#apply-form input[type='email'],
#apply-form input[type='tel'],
#apply-form input[type='url'],
#apply-form input[type='number'],
#apply-form input[type='search'],
#apply-form select,
#apply-form textarea {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 16px;
}

#apply-form textarea {
  resize: vertical;
  line-height: 1.45;
}

/* the spinner arrows crowd an already-narrow column and nobody clicks them */
#apply-form input[type='number'] {
  -moz-appearance: textfield;
  appearance: textfield;
  font-variant-numeric: tabular-nums;
}

#apply-form input[type='number']::-webkit-outer-spin-button,
#apply-form input[type='number']::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

#apply-form input:focus,
#apply-form select:focus,
#apply-form textarea:focus {
  outline: 2px solid var(--house);
  outline-offset: 0;
  border-color: transparent;
}

#apply-form .opt {
  font-weight: 500;
  color: var(--dim);
}

.ap-count {
  font-size: 0.76rem;
  color: var(--dim);
  text-align: right;
  margin: -12px 0 16px;
}

/* two fields per row on desktop, stacked on a phone */
.ap-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
}

.ap-row > * { min-width: 0; }

/* the Other box, revealed under its select */
.ap-other {
  border-left: 2px solid var(--house);
  padding-left: 14px;
  margin: -4px 0 16px;
}

.ap-other[hidden] { display: none; }

.ap-reveal[hidden] { display: none; }

/* the office fields, opened from inside the occupation dropdown — marked off so
   it reads as part of that answer rather than as a new question */
.ap-office {
  border-left: 2px solid var(--senate);
  padding-left: 16px;
  margin: 0 0 4px;
}

/* ---------- step 1: the two big tiles ---------- */

.ap-choice {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

#apply-form .ap-tile {
  position: relative;
  display: block;
  margin: 0;
  cursor: pointer;
}

#apply-form .ap-tile input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.ap-tile-body {
  display: block;
  height: 100%;
  background: var(--bg);
  border: 2px solid var(--hairline);
  border-radius: 14px;
  padding: 18px;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.ap-tile-body b {
  display: block;
  font-size: 1.02rem;
  font-weight: 800;
  margin-bottom: 6px;
}

.ap-tile-body span {
  display: block;
  font-size: 0.88rem;
  font-weight: 400;
  line-height: 1.45;
  color: var(--muted);
}

#apply-form .ap-tile:hover .ap-tile-body { border-color: var(--divider); }

#apply-form .ap-tile input:checked + .ap-tile-body {
  border-color: var(--house);
  background: color-mix(in srgb, var(--house) 8%, var(--bg));
}

#apply-form .ap-tile input:focus-visible + .ap-tile-body {
  outline: 2px solid var(--house);
  outline-offset: 2px;
}

/* ---------- yes / no pills ---------- */

.ap-yesno {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

#apply-form .ap-pill {
  position: relative;
  margin: 0;
  cursor: pointer;
}

#apply-form .ap-pill input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

#apply-form .ap-pill span {
  display: block;
  font-size: 0.92rem;
  font-weight: 600;
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 9px 20px;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

#apply-form .ap-pill input:checked + span {
  background: var(--house);
  border-color: var(--house);
  color: #fff;
}

#apply-form .ap-pill input:focus-visible + span {
  outline: 2px solid var(--house);
  outline-offset: 2px;
}

/* ---------- topic pills ---------- */

/* filter + clear, above the groups */
.ap-tagbar {
  display: flex;
  gap: 10px;
  margin-bottom: 18px;
}

#apply-form .ap-tagbar input[type='search'] {
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
  font: inherit;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 10px 12px;
}

.ap-clear {
  flex: none;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--muted);
  background: none;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 0 16px;
  cursor: pointer;
}

.ap-clear:hover { color: var(--ink); border-color: var(--divider); }

.ap-taggroup { margin-bottom: 18px; }

.ap-taggroup[hidden] { display: none; }

.ap-taghead {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--dim);
  margin: 0 0 8px;
}

.ap-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

#apply-form .ap-tag {
  position: relative;
  margin: 0;
  cursor: pointer;
}

#apply-form .ap-tag input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

#apply-form .ap-tag span {
  display: block;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 7px 15px;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

#apply-form .ap-tag input:checked + span {
  background: color-mix(in srgb, var(--senate) 14%, var(--bg));
  border-color: var(--senate);
  color: var(--ink);
}

#apply-form .ap-tag input:focus-visible + span {
  outline: 2px solid var(--senate);
  outline-offset: 2px;
}

#apply-form .ap-tag[hidden] { display: none; }

/* what's selected, spelled out — with the groups collapsed you can't count the
   highlighted pills at a glance any more */
.ap-selected {
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--dim);
  margin: 4px 0 20px;
}

.ap-selected.has-tags { color: var(--muted); }

/* ---------- platform rows: handle + follower count ---------- */

.ap-plats { margin-bottom: 20px; }

/* the count column is fixed so every number lines up down the card */
.ap-plat {
  display: grid;
  grid-template-columns: 1fr 8.5rem;
  gap: 0 14px;
}

.ap-plat-solo { grid-template-columns: 1fr; }

.ap-plat-handle,
.ap-plat-count { min-width: 0; }

#apply-form .ap-plat-count label {
  font-weight: 600;
  color: var(--dim);
}

.ap-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  background: var(--bg);
  border-radius: 12px;
  padding: 14px 18px;
  font-size: 0.9rem;
  color: var(--muted);
}

.ap-total b {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* ---------- repeatable roles ---------- */

.ap-role {
  background: var(--bg);
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 14px;
}

.ap-role-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
}

.ap-role-n {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--dim);
}

.ap-remove {
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.ap-remove:hover { color: var(--veto); }

.ap-remove[hidden] { display: none; }

/* the role fields sit on --bg, so they need the opposite surface to read */
#apply-form .ap-role input,
#apply-form .ap-role textarea {
  background: var(--surface);
}

.ap-add {
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--house);
  background: none;
  border: 1px dashed var(--divider);
  border-radius: 12px;
  padding: 12px 18px;
  width: 100%;
  cursor: pointer;
}

.ap-add:hover { border-color: var(--house); }

/* ---------- what to expect ---------- */

.ap-expect {
  list-style: none;
  counter-reset: expect;
  padding: 0;
  margin: 0;
}

.ap-expect li {
  counter-increment: expect;
  position: relative;
  padding-left: 42px;
  margin-bottom: 20px;
}

.ap-expect li::before {
  content: counter(expect);
  position: absolute;
  left: 0;
  top: 0;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  font-size: 0.85rem;
  font-weight: 800;
  color: #fff;
  background: var(--house);
  border-radius: 14px;
}

.ap-expect b {
  display: block;
  font-size: 0.98rem;
  font-weight: 800;
  margin-bottom: 4px;
}

.ap-expect span {
  display: block;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--muted);
}

/* ---------- sub-headings inside a card ---------- */

.ap-sublabel {
  font-size: 0.95rem;
  font-weight: 800;
  margin: 20px 0 4px;
}

.ap-sublabel:first-of-type { margin-top: 0; }

/* ---------- checkbox rows ---------- */

#apply-form .ap-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.92rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--muted);
  margin: 0 0 16px;
  cursor: pointer;
}

#apply-form .ap-check strong { color: var(--ink); }

#apply-form .ap-check input[type='checkbox'] {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: var(--house);
  cursor: pointer;
}

#apply-form .ap-check a { color: var(--house); }

/* ---------- submit ---------- */

#apply-submit {
  width: 100%;
  font-size: 1rem;
  margin-top: 12px;
}

#apply-status {
  min-height: 1.2em;
  font-size: 0.9rem;
  line-height: 1.45;
  margin: 12px 0 0;
  text-align: center;
}

#apply-status.error { color: var(--veto); font-weight: 700; }

/* ---------- confirmation, swapped in for the form ---------- */

.ap-done {
  max-width: 44rem;
  margin: 0 auto;
  text-align: center;
}

.ap-done p {
  color: var(--muted);
  line-height: 1.55;
  margin: 0 0 20px;
}

.ap-done b { color: var(--ink); }

/* ---------- narrow ---------- */

@media (max-width: 700px) {
  .ap-head { padding-top: 36px; }
  .ap-card { padding: 24px 20px; }
  .ap-choice,
  .ap-row { grid-template-columns: 1fr; }
  /* the count keeps its own line rather than being squeezed to nothing */
  .ap-plat { grid-template-columns: 1fr; }
}