/* ============================================================
   DriveQ · equity.css · Equity Release additions
   Loaded after app.css. Only what the shared sheet lacks: the page
   gutter used by every equity template, wizard step rail, schedule
   table, signature pad, timeline, slot chips and print rules.
   Tokens, buttons, pills, cards and inputs all come from app.css.
   ============================================================ */

/* ---- page gutter (responsive, replaces inline 72px paddings) ---- */
.eq-wrap { padding: 48px 72px 96px; max-width: 1180px; }
.eq-wrap.eq-narrow { max-width: 900px; }
@media (max-width: 1024px) { .eq-wrap { padding: 32px 24px 64px; } }
@media (max-width: 480px)  { .eq-wrap { padding: 24px 16px 48px; } }

/* ---- grids that stack on phones ---- */
.eq-grid   { display: grid; gap: 16px; }
.eq-grid-2 { grid-template-columns: 1fr 1fr; }
.eq-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
.eq-grid-4 { grid-template-columns: repeat(4, 1fr); }
.eq-cols   { display: grid; grid-template-columns: 1.6fr 1fr; gap: 24px; align-items: start; }
.eq-span-2 { grid-column: 1 / -1; }
@media (max-width: 1024px) { .eq-cols { grid-template-columns: 1fr; } .eq-grid-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px)  { .eq-grid-2, .eq-grid-3, .eq-grid-4 { grid-template-columns: 1fr; } }

.eq-stack { display: grid; gap: 16px; }
.eq-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.eq-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
@media (max-width: 480px) { .eq-actions .btn { width: 100%; } }

/* ---- wizard step rail ---- */
.eq-rail { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-bottom: 1px solid var(--line-soft); margin-bottom: 32px; }
.eq-rail-step { padding: 16px 14px; border-bottom: 3px solid transparent; color: var(--ink-mute); text-decoration: none; min-width: 0; }
.eq-rail-step .mono { display: block; }
.eq-rail-title { margin-top: 4px; font-weight: 500; font-size: 14px; color: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eq-rail-step.is-active { border-bottom-color: var(--gold); color: var(--ink); }
.eq-rail-step.is-done   { border-bottom-color: var(--green); color: var(--ink); }
a.eq-rail-step:hover { color: var(--ink); }
@media (max-width: 640px) {
  .eq-rail-step { padding: 10px 4px; text-align: center; }
  .eq-rail-title { display: none; }
}

/* ---- money ---- */
.eq-money    { font-family: var(--f-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.eq-money-lg { font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-size: 22px; letter-spacing: -0.01em; }
.eq-money-xl { font-family: var(--f-display); font-variant-numeric: tabular-nums; font-size: 36px; letter-spacing: -0.02em; line-height: 1.1; }
.eq-neg      { color: var(--red); }
@media (max-width: 480px) { .eq-money-xl { font-size: 28px; } }

/* ---- key/value rows ---- */
.eq-kv { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); font-size: 13.5px; }
.eq-kv:last-child { border-bottom: 0; }
.eq-kv > span:first-child { color: var(--ink-mute); flex: none; }
.eq-kv > span:last-child  { text-align: right; min-width: 0; overflow-wrap: anywhere; }

/* ---- schedule / statement tables ---- */
.eq-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.eq-table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 520px; }
.eq-table th { text-align: left; font-family: var(--f-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-dim); padding: 10px 12px; border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
.eq-table td { padding: 12px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.eq-table tr:last-child td { border-bottom: 0; }
.eq-table .num { text-align: right; font-family: var(--f-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.eq-table th.num { text-align: right; }
.eq-table tfoot td { font-weight: 500; background: var(--paper); }
.eq-table .eq-fee { text-align: right; font-family: var(--f-mono); font-variant-numeric: tabular-nums; }   /* wraps on phones */

/* ---- landing "how it works" strip ---- */
.eq-steps { gap: 0; border-top: 1px solid var(--paper-3); border-bottom: 1px solid var(--paper-3); }
.eq-step  { padding: 32px 24px; border-right: 1px solid var(--paper-3); }
.eq-step:last-child { border-right: 0; }
@media (max-width: 1024px) { .eq-step:nth-child(2n) { border-right: 0; } .eq-step:nth-child(-n+2) { border-bottom: 1px solid var(--paper-3); } }
@media (max-width: 640px)  { .eq-step { border-right: 0; border-bottom: 1px solid var(--paper-3); padding: 24px 0; } .eq-step:last-child { border-bottom: 0; } }

/* ---- timeline ---- */
.eq-timeline { list-style: none; margin: 0; padding: 0; }
.eq-timeline li { position: relative; display: grid; grid-template-columns: 14px 1fr; gap: 12px; padding: 10px 0; }
.eq-timeline li::before { content: ''; position: absolute; left: 4px; top: 26px; bottom: -8px; width: 2px; background: var(--line-soft); }
.eq-timeline li:last-child::before { display: none; }
.eq-timeline .dot { width: 10px; height: 10px; border-radius: 999px; background: var(--line); margin-top: 6px; }
.eq-timeline .dot.is-current { background: var(--gold); box-shadow: 0 0 0 3px var(--gold-100); }
.eq-timeline .when { font-family: var(--f-mono); font-size: 11px; color: var(--ink-dim); margin-top: 2px; }
.eq-timeline .note { font-size: 13px; color: var(--ink-mute); margin-top: 2px; }

/* ---- signature pad ---- */
.eq-pad { position: relative; border: 1.5px dashed var(--line); border-radius: var(--r-4); background: white; touch-action: none; user-select: none; }
.eq-pad canvas { display: block; width: 100%; height: 180px; border-radius: var(--r-4); cursor: crosshair; }
.eq-pad-line { position: absolute; left: 24px; right: 24px; bottom: 44px; border-top: 1px solid var(--line-soft); pointer-events: none; }
.eq-pad-hint { position: absolute; left: 0; right: 0; bottom: 12px; text-align: center; font-size: 12px; color: var(--ink-faint); pointer-events: none; }
.eq-pad.has-ink .eq-pad-hint { display: none; }
.eq-pad.is-error { border-color: var(--red); }
.eq-pad-tools { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 8px; }
.eq-otp { font-family: var(--f-mono); font-size: 24px; letter-spacing: 0.3em; text-align: center; }

/* ---- custody slot chips ---- */
.eq-slots { display: flex; flex-wrap: wrap; gap: 8px; max-height: 280px; overflow: auto; padding: 4px; }
.eq-slot { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; cursor: pointer; background: white; }
.eq-slot input { accent-color: var(--gold); margin: 0; }
.eq-slot:has(input:checked) { border-color: var(--gold); background: var(--gold-100); }
.eq-slot-day { width: 100%; font-family: var(--f-mono); font-size: 11px; color: var(--ink-dim); letter-spacing: 0.08em; text-transform: uppercase; margin-top: 6px; }

/* ---- checkbox rows / declarations ---- */
.eq-check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: var(--ink); cursor: pointer; }
.eq-check input { width: 18px; height: 18px; accent-color: var(--gold); flex: none; margin: 2px 0 0; }

/* ---- online payment (Harbour checkout) ---- */
.eq-pay-error { margin-top: 12px; padding: 12px 14px; border: 1px solid oklch(0.85 0.10 25); border-radius: var(--r-3); background: var(--red-100); color: var(--red); font-size: 13.5px; }
.eq-pay-error p { margin: 0; }
.eq-pay-error p + p { margin-top: 6px; }
.eq-pay-error a { color: var(--red); text-decoration: underline; }
.eq-pay-or { display: flex; align-items: center; gap: 10px; margin: 14px 0 4px; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-dim); }
.eq-pay-or::before, .eq-pay-or::after { content: ''; flex: 1; border-top: 1px solid var(--line-soft); }
.eq-pay-manual > summary { cursor: pointer; color: var(--gold-deep); font-size: 13.5px; list-style: none; }
.eq-pay-manual > summary::-webkit-details-marker { display: none; }
.eq-pay-manual > summary::after { content: ' ▾'; font-size: 11px; }
.eq-pay-manual[open] > summary::after { content: ' ▴'; }

/* ---- document rows ---- */
.eq-doc { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); flex-wrap: wrap; }
.eq-doc:last-child { border-bottom: 0; }

/* ---- home product selector ---- */
.eq-selector { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.eq-selector .card { display: flex; flex-direction: column; gap: 12px; }
.eq-selector .card .btn { align-self: flex-start; margin-top: auto; }
@media (max-width: 768px) { .eq-selector { grid-template-columns: 1fr; } }

/* ---- Car for Loan landing: journey + stations ---- */
.eq-journey { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; counter-reset: none; }
.eq-journey-step { padding: 24px; border: 1px solid var(--line-soft); border-radius: var(--r-4); background: white; }
.eq-journey-ico { width: 40px; height: 40px; border-radius: var(--r-3); background: var(--gold-100); border: 1px solid oklch(0.85 0.08 84); display: flex; align-items: center; justify-content: center; color: var(--gold-deep); }
.eq-stations { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.eq-station { display: flex; flex-direction: column; }
@media (max-width: 1024px) { .eq-journey { grid-template-columns: 1fr 1fr; } .eq-cta-grid { grid-template-columns: 1fr !important; } .eq-cta-grid > div:last-child { justify-content: flex-start !important; } }
@media (max-width: 640px)  { .eq-journey { grid-template-columns: 1fr; } .eq-stations { grid-template-columns: 1fr; } }

/* ---- application stage tracker ---- */
.eq-stages { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.eq-stage { padding: 10px 8px 0; border-top: 3px solid var(--line-soft); color: var(--ink-dim); min-width: 0; }
.eq-stage .mono { display: block; font-size: 10px; }
.eq-stage-title { margin-top: 4px; font-size: 13px; font-weight: 500; color: inherit; line-height: 1.3; }
.eq-stage.is-done    { border-top-color: var(--green); color: var(--ink); }
.eq-stage.is-current { border-top-color: var(--gold); color: var(--ink); }
.eq-stage.is-current .mono { color: var(--gold-deep); }
@media (max-width: 640px) { .eq-stages { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 12px; } }

/* ---- inspection booking picker ---- */
.eq-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.eq-pick { display: block; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-3); background: white; cursor: pointer; font-size: 13.5px; }
.eq-pick input { accent-color: var(--gold); margin: 0 8px 0 0; }
.eq-pick:has(input:checked) { border-color: var(--gold); background: var(--gold-100); }
.eq-slot small { color: var(--ink-dim); font-size: 11px; }
.eq-booked { padding: 16px; border-radius: var(--r-3); background: var(--paper); }
.eq-bring { margin: 8px 0 0; padding-left: 18px; font-size: 13.5px; color: var(--ink-mute); }
.eq-bring li { margin: 3px 0; }

/* ---- print (statement) ---- */
@media print {
  .nav, .footer, .eq-noprint, .skip-link { display: none !important; }
  body, .page { background: white; }
  .eq-wrap { padding: 0 !important; max-width: none; }
  .card { border: 0; padding: 0; }
  .eq-table { min-width: 0; }
}