/* ==========================================================================
   Application funnel — form, perimeter gate, document pack

   Colour discipline: mint is the BRAND action colour, so it also carries
   "proceed" states (gate pass, ILA clear, LTV within cap). Red and amber are
   reserved for stop and caution and appear nowhere else.
   ========================================================================== */

.apply-shell {
  max-width: 44rem;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 6rem;
}

/* ---------- progress rail ---------- */
.rail {
  list-style: none;
  margin: 0 0 2.5rem;
  padding: 0 0 1rem;
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--rule);
  font-family: var(--head);
  font-size: 0.8rem;
  color: var(--stone);
}
.rail li { display: flex; align-items: center; gap: 0.45rem; }
.rail-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem;
  border: 1px solid var(--rule);
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
}
.rail li.is-current { color: var(--blue-dk); font-weight: 600; }
/* blue-dk, not blue: white on #0E7FC4 is only 4.33:1 and this numeral is 11px */
.rail li.is-current .rail-n { border-color: var(--blue-dk); background: var(--blue-dk); color: #fff; }
.rail li.is-done .rail-n { border-color: var(--mint-dk); background: var(--mint); color: var(--ink); }

/* ---------- steps ---------- */
.step { display: none; flex-direction: column; gap: 1.75rem; }
.step.is-active { display: flex; }
.step-head { display: flex; flex-direction: column; gap: 0.7rem; }
.step-head h1 { font-size: clamp(1.7rem, 4vw, 2.3rem); }

/* ---------- questions ---------- */
.q { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.7rem; }
.q legend {
  font-family: var(--head);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--blue-dk);
  padding: 0;
}
.q-why {
  font-size: 0.85rem;
  color: var(--stone);
  border-left: 3px solid var(--rule);
  padding-left: 0.75rem;
  margin: -0.2rem 0 0.2rem;
}

.opts { display: flex; flex-direction: column; gap: 0.5rem; }
.opts-row { flex-direction: row; flex-wrap: wrap; }
.opts-row .opt { flex: 1 1 8rem; }

.opt {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--rule);
  background: var(--ground);
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.opt:hover { border-color: var(--blue); }
.opt input { margin: 0.32rem 0 0; accent-color: var(--blue); flex: none; }
.opt span { display: flex; flex-direction: column; gap: 0.1rem; }
.opt strong { font-family: var(--head); font-weight: 600; font-size: 0.92rem; }
.opt em { font-style: normal; font-size: 0.82rem; color: var(--stone); }
.opt:has(input:checked) { border-color: var(--blue); background: var(--blue-lo); }
.opt:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ---------- fields ---------- */
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field label { font-family: var(--head); font-size: 0.88rem; font-weight: 600; }
input[type="text"], input[type="tel"], input[type="email"], select {
  font-family: var(--body);
  font-size: 1rem;
  padding: 0.75rem 0.85rem;
  min-height: 44px;          /* touch target minimum */
  border: 1px solid var(--rule);
  background: var(--ground);
  color: var(--ink);
  border-radius: 0;
  width: 100%;
}
.req { color: var(--stop); font-weight: 700; margin-left: 0.15rem; }

/* invalid required fields */
.field.invalid input,
.field.invalid select,
.field.invalid .money { border-color: var(--stop); }
.field.invalid .money input { border-color: transparent; }   /* the wrapper carries the border */
.field-err { font-size: 0.8rem; color: var(--stop); font-weight: 600; margin: 0; }

/* ---------- Companies House combobox ---------- */
.combo { position: relative; }
.combo-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 20;
  margin: -1px 0 0;
  padding: 0;
  list-style: none;
  background: var(--ground);
  border: 1px solid var(--blue-dk);
  max-height: 17rem;
  overflow-y: auto;
}
.combo-list li {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.6rem 0.8rem;
  cursor: pointer;
  border-bottom: 1px solid var(--rule);
}
.combo-list li:last-child { border-bottom: 0; }
.combo-list li:hover,
.combo-list li[aria-selected="true"] { background: var(--blue-lo); }
.combo-name { font-family: var(--head); font-weight: 600; font-size: 0.9rem; }
.combo-meta { font-size: 0.76rem; color: var(--stone); }
.combo-status { font-size: 0.78rem; color: var(--stone); min-height: 1em; }
.combo-status:empty { display: none; }
input:focus, select:focus { border-color: var(--blue); }
.hint { font-size: 0.8rem; color: var(--stone); }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 34rem) { .pair { grid-template-columns: 1fr; } }

.money { display: flex; align-items: stretch; }
.money span {
  display: flex; align-items: center; padding: 0 0.75rem;
  border: 1px solid var(--rule); border-right: 0;
  background: var(--sunk); color: var(--stone);
  font-family: var(--head); font-weight: 600;
}

/* ---------- LTV meter ---------- */
.ltv {
  border: 1px solid var(--rule);
  background: var(--ground);
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.ltv-bar {
  position: relative;
  height: 0.6rem;
  background: var(--sunk);
  border: 1px solid var(--rule);
  overflow: hidden;
}
.ltv-fill {
  height: 100%;
  width: 0;
  background: var(--mint);
  transition: width .2s ease, background .2s ease;
}
.ltv-fill.over { background: var(--stop); }
.ltv-cap {
  position: absolute; top: -2px; bottom: -2px; left: 80%;
  width: 2px; background: var(--blue);
}
.ltv-read { display: flex; align-items: baseline; gap: 0.7rem; flex-wrap: wrap; }
.ltv-num {
  font-family: var(--head); font-weight: 600; font-size: 1.4rem;
  color: var(--blue-dk); font-variant-numeric: tabular-nums;
}
.ltv-msg { font-size: 0.85rem; color: var(--stone); }
.ltv-msg.over { color: var(--stop); font-weight: 600; }

/* ---------- gate result ---------- */
.gate-result { padding: 1.15rem 1.25rem; border-left: 4px solid; display: flex; flex-direction: column; gap: 0.55rem; }
.gate-result h3 { margin: 0; font-size: 1rem; }
.gate-result p { font-size: 0.9rem; }
.gate-stop { border-color: var(--stop); background: var(--stop-lo); }
.gate-stop h3 { color: var(--stop); }
.gate-warn { border-color: var(--warn); background: var(--warn-lo); }
.gate-warn h3 { color: var(--warn); }
.gate-go { border-color: var(--mint); background: var(--mint-lo); }
.gate-go h3 { color: var(--blue-dk); }

/* ---------- nav ---------- */
.nav-row {
  display: flex; justify-content: space-between; gap: 1rem;
  padding-top: 1.25rem; border-top: 1px solid var(--rule);
}

/* ---------- derive panel ---------- */
.derive {
  border-left: 4px solid var(--blue);
  background: var(--blue-lo);
  padding: 1rem 1.1rem;
  display: flex; flex-direction: column; gap: 0.5rem;
}
.derive-h {
  font-family: var(--head);
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--blue-dk); margin: 0;
}
.derive ul {
  margin: 0; padding-left: 1.1rem;
  font-size: 0.87rem; color: var(--ink);
  display: flex; flex-direction: column; gap: 0.2rem;
}

/* ---------- summary ---------- */
.summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.summary div { background: var(--ground); padding: 0.9rem 1rem; }
.summary dt {
  font-family: var(--head);
  font-size: 0.64rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--stone); margin-bottom: 0.25rem;
}
.summary dd {
  margin: 0; font-family: var(--head); font-weight: 600; font-size: 1.1rem;
  color: var(--blue-dk); font-variant-numeric: tabular-nums;
}

/* ---------- document pack ---------- */
.pack { border: 1px solid var(--rule); background: var(--ground); }
.pack-head { padding: 1.2rem 1.25rem; border-bottom: 1px solid var(--rule); display: flex; flex-direction: column; gap: 0.3rem; }
.pack-head h2 { font-size: 1.4rem; }
.pack-list { list-style: none; margin: 0; padding: 0; }
.pack-list li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.4rem 1rem;
  align-items: start;
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid var(--rule);
}
.pack-list li:last-child { border-bottom: 0; }
.pack-name { font-family: var(--head); font-weight: 600; font-size: 0.92rem; }
.pack-why { font-size: 0.82rem; color: var(--stone); grid-column: 1 / -1; }
.tag {
  font-family: var(--head); font-size: 0.62rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
  padding: 0.2rem 0.45rem; white-space: nowrap;
}
.tag-always { background: var(--sunk); color: var(--stone); }
.tag-trig { background: var(--blue-lo); color: var(--blue-dk); }
.tag-time { background: var(--warn-lo); color: var(--warn); }

/* ---------- ILA verdict / serviced note ---------- */
.ila { padding: 1.25rem 1.35rem; border-left: 4px solid; display: flex; flex-direction: column; gap: 0.6rem; }
.ila h3 { margin: 0; font-size: 1.05rem; }
.ila p { font-size: 0.9rem; }
.ila-fast { border-color: var(--mint); background: var(--mint-lo); }
.ila-fast h3 { color: var(--blue-dk); }
.ila-slow { border-color: var(--warn); background: var(--warn-lo); }
.ila-slow h3 { color: var(--warn); }
.ila:empty { display: none; }

.closing {
  border: 1px solid var(--rule);
  background: var(--sunk);
  padding: 1.35rem;
  display: flex; flex-direction: column; gap: 0.5rem;
}