/* =====================================================================
   Savia apply funnel (2026-10-15). Loaded after savia.css.
   Part 1: additions to the apply page (.apply-page).
   Part 2: .ap-flow, a lighter readability layer for the other forms
   (contact, record, record profile, portal). Same tokens as .apply-page.
   Nothing here changes markup behaviour, names, ids or validation.
   ===================================================================== */

/* ---------- Part 1: apply page ---------- */

/* Smallest text in the chooser strip above the form: 12px floor */
body:has(.apply-page) .chooser-tag{font-size:12px}
body:has(.apply-page) .chooser-card p,body:has(.apply-page) .wrong-page{font-size:15px}

/* Who qualifies + what happens next */
.apply-page .ap-intro{max-width:760px;display:grid;gap:16px;margin:0 0 20px}
.apply-page .ap-qualify,.apply-page .ap-promise{padding:18px 20px;background:#fff;border:1px solid #cfd2cb;border-radius:var(--ap-r)}
.apply-page .ap-intro h2{font:600 19px/1.25 var(--display);letter-spacing:-.01em;margin:0 0 8px;color:var(--ink)}
.apply-page .ap-qualify p{margin:0;font-size:16px;line-height:1.55;color:var(--ink)}
.apply-page .ap-time{margin:0 0 14px;font-size:16px;line-height:1.5;font-weight:600;color:var(--forest)}
.apply-page .ap-next{list-style:none;counter-reset:apnext;margin:0;padding:0;display:grid;gap:12px}
.apply-page .ap-next li{counter-increment:apnext;position:relative;padding-inline-start:40px;font-size:16px;line-height:1.5;color:var(--ink)}
.apply-page .ap-next li::before{content:counter(apnext);position:absolute;inset-inline-start:0;top:0;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--ap-tint);border:1px solid var(--forest);color:var(--forest);font:600 14px/1 var(--display)}

/* Progress chips: jump links to each required step */
.apply-page .ap-progress{max-width:760px;margin:0 0 8px}
.apply-page .ap-progress ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.apply-page .ap-progress a{display:flex;align-items:center;gap:10px;min-height:48px;padding:6px 12px;background:#fff;border:1.5px solid var(--ap-border);border-radius:var(--ap-r);color:var(--ink);font:600 14px/1.25 var(--body);text-decoration:none;transition:border-color .15s,background-color .15s}
.apply-page .ap-progress a:hover{border-color:var(--forest);background:var(--ap-tint)}
.apply-page .ap-progress a:focus-visible{outline:2px solid transparent;border-color:var(--forest);box-shadow:var(--ap-ring)}
.apply-page .ap-progress b{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--ink);color:var(--green);font:600 14px/1 var(--display)}
.apply-page .ap-progress span{min-width:0;overflow-wrap:anywhere}
.apply-page .form-section[id]{scroll-margin-top:84px}

/* Step text in each section header: 14px, readable, never clipped */
.apply-page .step-indicator{font:600 14px/1.2 var(--body);color:var(--ap-muted);white-space:nowrap;padding:4px 10px;border:1px solid var(--ap-border);border-radius:999px;background:#fff}
.apply-page .form-section-opt::before{background:#fff;color:var(--ap-muted);border:1.5px solid var(--ap-border)}

/* Reassurance above consent */
.apply-page .ap-trust{margin:32px 0 0;padding:18px 20px;background:var(--ap-tint);border-inline-start:3px solid var(--forest);border-radius:0 var(--ap-r) var(--ap-r) 0;scroll-margin-top:84px}
.apply-page .ap-trust h2{font:600 17px/1.25 var(--display);margin:0 0 10px;color:var(--ink)}
.apply-page .ap-trust ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.apply-page .ap-trust li{position:relative;padding-inline-start:26px;font-size:16px;line-height:1.5;color:var(--ink)}
.apply-page .ap-trust li::before{content:"";position:absolute;inset-inline-start:2px;top:.45em;width:12px;height:7px;border-left:2.5px solid var(--forest);border-bottom:2.5px solid var(--forest);transform:rotate(-45deg)}
.apply-page .field-consent{margin-top:20px}

/* Submit stays reachable on phones: it sticks to the bottom edge while the form is on screen */
.apply-page .ap-submit{margin-top:8px}
.apply-page .apply-form .consent-more{margin-bottom:8px}

@media(max-width:900px){
  .apply-page .ap-progress ol{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:700px){
  .apply-page .ap-submit{
    position:sticky;bottom:0;z-index:20;
    margin:8px -18px 0;padding:12px 18px calc(12px + env(safe-area-inset-bottom));
    background:var(--paper);border-top:1px solid var(--line);box-shadow:0 -8px 20px rgba(18,24,20,.08);
  }
  .apply-page .apply-form .ap-submit .button{width:100%;min-height:56px}
}
@media(max-width:560px){
  .apply-page .ap-intro{gap:12px}
  .apply-page .ap-qualify,.apply-page .ap-promise,.apply-page .ap-trust{padding:16px}
  /* chips become four numbered buttons; the full step name sits in each section header */
  .apply-page .ap-progress a{justify-content:center;padding:6px}
  .apply-page .ap-progress span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .apply-page .form-section[id]{scroll-margin-top:72px}
  .apply-page .step-indicator{grid-column:2;grid-row:2;justify-self:start}
  .apply-page .field-half{max-width:none}
}

/* ---------- Part 2: .ap-flow (contact, record, record profile, portal) ---------- */
.ap-flow{
  --ap-muted:#46544b;--ap-border:#7b8880;--ap-tint:#e9f3ed;--ap-err:#a3331f;--ap-err-bg:#fbeeeb;--ap-r:8px;
  --ap-ring:0 0 0 4px rgba(63,221,140,.45);
}
/* labels and hints: 14px floor, 16px for labels */
.ap-flow .field:not(.field-consent)>label,.ap-flow .field-group legend{
  font:600 16px/1.35 var(--body);letter-spacing:0;text-transform:none;color:var(--ink);margin-bottom:8px;
}
.ap-flow .field>label em{color:var(--ap-err);font-weight:700}
.ap-flow .field small,.ap-flow .portal-hint,.ap-flow .form-step-hint{font-size:15px;line-height:1.5;color:var(--ap-muted)}
.ap-flow .form-note p,.ap-flow .form-note li{font-size:16px;line-height:1.55;color:var(--ap-muted)}
.ap-flow .wrong-page{font-size:15px}
.ap-flow .form-section{font-size:18px}
.ap-flow .muted,.ap-flow .small{font-size:14px}

/* inputs: visible boxes, 54px tall, 17px text (also stops iOS zoom on focus) */
.ap-flow .field input:not([type=file]):not([type=checkbox]):not([type=radio]),
.ap-flow .field select,.ap-flow .field textarea{
  min-height:54px;padding:14px 16px;font:400 17px/1.35 var(--body);color:var(--ink);
  background-color:#fff;border:1.5px solid var(--ap-border);border-radius:var(--ap-r);
}
.ap-flow .field textarea{min-height:150px;line-height:1.55}
.ap-flow .field input:not([type=file]):not([type=checkbox]):not([type=radio]):focus,
.ap-flow .field select:focus,.ap-flow .field textarea:focus{
  outline:2px solid transparent;border-color:var(--forest);box-shadow:var(--ap-ring);
}
.ap-flow .field input::placeholder,.ap-flow .field textarea::placeholder{color:#6a776f;opacity:1}
.ap-flow .field input[type=file]{min-height:54px;padding:12px 14px;border:1.5px solid var(--ap-border);border-radius:var(--ap-r);background:#fff;font-size:16px}
.ap-flow .field input[type=file]::file-selector-button{min-height:40px;padding:0 16px;font:600 15px var(--body);border-radius:6px}

/* errors: red border + tinted background, not colour only (message text carries the meaning) */
.ap-flow .field [aria-invalid=true],
.was-validated.ap-flow .field input:invalid,.ap-flow .was-validated .field input:invalid,
.ap-flow .was-validated .field select:invalid,.ap-flow .was-validated .field textarea:invalid{
  border-color:var(--ap-err);background-color:var(--ap-err-bg);border-width:2px;outline:0;
}
.ap-flow .field-msg{display:block;margin-top:8px;font:600 15px/1.4 var(--body);color:var(--ap-err)}
.ap-flow .form-note-error{background:var(--ap-err-bg);border-color:var(--ap-err)}
.ap-flow .form-note-error strong{color:var(--ap-err)}

/* consent: whole row is the tap target */
.ap-flow .field-consent label{
  grid-template-columns:28px minmax(0,1fr);gap:16px;padding:16px;min-height:60px;
  background:#fff;border:1.5px solid var(--ap-border);border-radius:var(--ap-r);
  font:400 16px/1.55 var(--body);color:var(--ink);
}
.ap-flow .field-consent input{width:28px;height:28px;margin:0}
.ap-flow .field-consent span{font-size:16px;line-height:1.55;color:var(--ink);max-width:none}
.ap-flow .field-consent label:has(input:checked){background:var(--ap-tint);border-color:var(--forest)}
.ap-flow .field-consent label:has(input:focus-visible){box-shadow:var(--ap-ring);border-color:var(--forest)}

/* chips, toggles and links: 44px tap targets */
.ap-flow .radio-pill span{display:flex;align-items:center;min-height:48px;padding:10px 16px;font-size:16px}
.ap-flow .field-more-toggle{min-height:48px;font-size:16px}
.ap-flow .text-link,.ap-flow .contact-terms .muted a{display:inline-flex;align-items:center;min-height:44px}
.ap-flow .button{min-height:52px;font-size:16px;padding:14px 22px}
.ap-flow .button:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.ap-flow .contact-terms li{font-size:16px;line-height:1.55}

@media(max-width:700px){
  .ap-flow .contact-form .button,.ap-flow .live-form .button,.ap-flow .portal-enter .button,.ap-flow .contact-card-submit .button{width:100%;min-height:56px}
  .ap-flow .field-row{gap:0}
}
@media(prefers-reduced-motion:reduce){
  .apply-page .ap-progress a,.ap-flow *{transition:none!important}
}

/* ---- phone review 2026-10-15: form-first intro, collapsed promise, clearer hints ---- */
.apply-page .ap-intro{margin:0 0 16px}
.apply-page .ap-promise{border:1px solid var(--ap-border);border-radius:var(--ap-r);background:#fff;padding:0}
.apply-page .ap-promise summary{list-style:none;cursor:pointer;display:flex;flex-direction:column;gap:4px;padding:14px 48px 14px 16px;min-height:44px;position:relative}
.apply-page .ap-promise summary::-webkit-details-marker{display:none}
.apply-page .ap-promise summary::after{content:'';position:absolute;right:18px;top:20px;width:9px;height:9px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg);transition:transform .15s}
.apply-page .ap-promise[open] summary::after{transform:rotate(-135deg);top:24px}
.apply-page .ap-promise-title{font:600 17px var(--display);color:var(--ink)}
.apply-page .ap-promise .ap-time{font-size:15px;color:var(--forest);margin:0}
.apply-page .ap-promise .ap-next{padding:0 16px 16px}
.apply-page .form-hint,.apply-page .field-hint,.apply-page small{color:var(--ap-muted)}
.apply-page .req,.apply-page label .req,.apply-page .required{color:var(--ap-err)}

/* ---- phones: get to the first field in about one screen and a half ---- */
@media(max-width:700px){
  body:has(.apply-hero) .apply-hero{padding-block:32px 24px}
  body:has(.apply-hero) .apply-hero .hero-copy>p{display:none}
  body:has(.apply-hero) .chooser-section{padding:20px 0 0}
  body:has(.apply-hero) .chooser-head{display:none}
  body:has(.apply-hero) .chooser-card{padding:14px 16px}
  body:has(.apply-hero) .chooser-card p{display:none}
  body:has(.apply-hero) .chooser-card h3{font-size:19px;margin:4px 0 10px}
  body:has(.apply-hero) .chooser-card:not(.is-here) .button{min-height:44px;padding-block:10px}
  body:has(.apply-hero) .chooser-card.is-here .chooser-pay{display:block}
}

/* ---- review round 2: language chips label, consent link, disabled send ---- */
.apply-page .lang-extras-label{display:block;font:600 15px var(--body);color:var(--ink);margin:14px 0 8px}
.apply-page .field-consent .consent-more{display:inline;margin:0 0 0 4px;font-size:inherit;text-decoration:underline;min-height:0}
.apply-page .ap-submit .button:disabled{background:#cfd8d2;color:#46544b;cursor:not-allowed;box-shadow:none;animation:none}
.apply-page .ap-send-note{margin:8px 0 0;font:400 14px/1.4 var(--body);color:var(--ap-muted);text-align:center}