/* =====================================================================
   application.css — the smart application wizard (Fresh Optimist)
   ===================================================================== */
/* the [hidden] attribute must always win over a class that sets display
   (steps, the english block, work-field, and the success overlay rely on it) */
[hidden] { display: none !important; }
.appl-page { background: var(--bg); background-image: linear-gradient(180deg, color-mix(in srgb, var(--safe) 7%, transparent) 0%, transparent 24%, color-mix(in srgb, var(--primary) 6%, transparent) 100%); background-attachment: fixed; }
.appl { padding-block: clamp(1.25rem, 3vw, 2.25rem) 5rem; }
.appl__in { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(var(--s-5), 3vw, var(--s-8)); align-items: start; }
@media (max-width: 900px) { .appl__in { grid-template-columns: 1fr; } }

.appl__back { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-3); font-weight: 600; font-size: var(--t-sm); }
.appl__back:hover { color: var(--primary); }
.appl__title { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.5rem, 3vw, 2.1rem); letter-spacing: -.02em; color: var(--ink); margin-top: var(--s-3); line-height: 1.12; }
.appl__title span { color: var(--primary); }
.appl__sub { color: var(--ink-3); font-size: var(--t-base); margin-top: 4px; }

/* ---- progress bar ---- */
.stepbar { position: relative; margin: var(--s-6) 0 var(--s-5); }
.stepbar__steps { list-style: none; display: flex; justify-content: space-between; gap: 4px; margin: 0; padding: 0; position: relative; z-index: 1; }
.stepbar__steps li { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: var(--t-2xs); font-weight: 700; color: var(--ink-4); text-transform: uppercase; letter-spacing: .03em; cursor: default; flex: 1; text-align: center; }
.stepbar__steps li span { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 2px solid var(--line-2); color: var(--ink-4); font-family: var(--font-display); font-size: var(--t-sm); transition: all var(--dur-2); }
.stepbar__steps li.is-now span { border-color: var(--primary); color: var(--primary); box-shadow: 0 0 0 4px var(--primary-tint); }
.stepbar__steps li.is-done { color: var(--safe-700, #0BB37E); cursor: pointer; }
.stepbar__steps li.is-done span { background: linear-gradient(135deg, var(--safe), var(--primary)); border-color: transparent; color: #fff; }
.stepbar__fill { position: absolute; left: 15px; right: 15px; top: 15px; height: 2px; background: var(--line-2); z-index: 0; }
.stepbar__fill::after { content: ''; position: absolute; left: 0; top: 0; height: 100%; width: var(--w, 0%); background: linear-gradient(90deg, var(--safe), var(--primary)); transition: width var(--dur-3) var(--ease); }
@media (max-width: 560px) { .stepbar__steps li { font-size: 0; gap: 0; } .stepbar__steps li span { font-size: var(--t-sm); } }

/* ---- the form card ---- */
.appl__form { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(var(--s-5), 4vw, var(--s-8)); box-shadow: var(--shadow-sm); }
.astep__h { font-family: var(--font-display); font-weight: 700; font-size: var(--t-h3); color: var(--ink); margin-bottom: var(--s-2); }
.astep__note { color: var(--ink-3); font-size: var(--t-sm); line-height: 1.55; margin-bottom: var(--s-4); }
.astep__note strong { color: var(--safe-700, #0BB37E); }
.alink { background: none; border: 0; padding: 0; color: var(--primary); font-weight: 700; cursor: pointer; font: inherit; text-decoration: underline; }

.agrid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
@media (max-width: 560px) { .agrid { grid-template-columns: 1fr; } }
.afield { display: flex; flex-direction: column; gap: 6px; }
.afield--2 { grid-column: 1 / -1; }
.afield > span { font-size: var(--t-sm); font-weight: 600; color: var(--ink-2); }
.afield i { color: var(--warn); font-style: normal; }
.afield input, .afield select { width: 100%; box-sizing: border-box; padding: .7rem .85rem; font: inherit; font-size: var(--t-base); color: var(--ink); background: var(--surface-2); border: 1.5px solid var(--line-2); border-radius: var(--r-sm); transition: border-color .15s, box-shadow .15s, background .15s; }
.afield input:focus, .afield select:focus { outline: none; border-color: var(--primary); background: var(--surface); box-shadow: 0 0 0 3px var(--primary-tint); }
.afield input.is-bad, .afield select.is-bad { border-color: var(--warn); box-shadow: 0 0 0 3px var(--warn-tint); }
.aphone { display: flex; gap: 8px; }
.aphone select { width: 92px; flex: none; }
.aeng { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-3); }
@media (max-width: 640px) { .aeng { grid-template-columns: repeat(2, 1fr); } }
.shake { animation: ashake .35s; }
@keyframes ashake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }

/* ---- nav ---- */
.astep__nav { display: flex; gap: var(--s-3); margin-top: var(--s-6); }
.astep__nav .btn--primary { margin-left: auto; padding-inline: var(--s-7); }
#aPrev { padding-inline: var(--s-5); }

/* ---- documents ---- */
.docs { display: flex; flex-direction: column; gap: var(--s-2); }
.doc { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) var(--s-4); border: 1.5px dashed var(--line-2); border-radius: var(--r-md); transition: border-color .15s, background .15s; }
.doc.drag { border-color: var(--primary); background: var(--primary-tint); }
.doc.is-set { border-style: solid; border-color: color-mix(in srgb, var(--safe) 40%, var(--line)); background: var(--safe-tint); }
.doc__l { display: flex; align-items: center; gap: 10px; min-width: 0; }
.doc__ic { width: 30px; height: 30px; border-radius: 9px; flex: none; display: grid; place-items: center; font-weight: 800; background: var(--bg-2); color: var(--ink-3); }
.doc.is-set .doc__ic { background: var(--safe); color: #fff; }
.doc__t { font-size: var(--t-sm); font-weight: 600; color: var(--ink); }
.doc__req { font-style: normal; font-size: var(--t-2xs); font-weight: 700; color: var(--reach); margin-left: 4px; text-transform: uppercase; letter-spacing: .03em; }
.doc__opt { font-style: normal; font-size: var(--t-2xs); font-weight: 700; color: var(--ink-4); margin-left: 4px; text-transform: uppercase; letter-spacing: .03em; }
.doc__r { display: flex; align-items: center; gap: 8px; flex: none; }
.doc__file { font-size: var(--t-xs); color: var(--ink-3); max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc__btn { font-size: var(--t-xs); font-weight: 700; color: var(--primary); background: var(--primary-tint); border-radius: var(--r-pill); padding: 6px 14px; cursor: pointer; }
.doc__btn:hover { background: color-mix(in srgb, var(--primary) 18%, #fff); }
.doc__x { width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(0,0,0,.06); color: var(--ink-2); cursor: pointer; font-size: .8rem; }
.docs.is-later .doc__btn { opacity: .4; pointer-events: none; }

/* ---- review ---- */
.review { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.review__row { display: flex; justify-content: space-between; gap: var(--s-4); padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); font-size: var(--t-sm); }
.review__row:last-child { border-bottom: 0; }
.review__row span { color: var(--ink-3); }
.review__row b { color: var(--ink); font-weight: 700; text-align: right; }
.aconsent { display: flex; align-items: flex-start; gap: 10px; margin-top: var(--s-4); font-size: var(--t-sm); color: var(--ink-3); line-height: 1.5; cursor: pointer; }
.aconsent input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--primary); flex: none; }
.aerr { margin-top: var(--s-3); color: var(--warn); font-size: var(--t-sm); }

/* ---- sticky side: program + eligibility ---- */
.appl__side { position: sticky; top: var(--s-4); display: flex; flex-direction: column; gap: var(--s-3); }
@media (max-width: 900px) { .appl__side { position: static; } }
.pcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-4); box-shadow: var(--shadow-xs); display: flex; gap: 12px; align-items: center; }
.pcard__logo { width: 48px; height: 48px; border-radius: 12px; flex: none; display: grid; place-items: center; background: #fff; border: 1px solid var(--line); overflow: hidden; font-family: var(--font-display); font-weight: 800; color: var(--primary); }
.pcard__logo img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.pcard__meta { min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.pcard__meta strong { font-family: var(--font-display); font-weight: 700; color: var(--ink); font-size: var(--t-sm); }
.pcard__meta span { font-size: var(--t-xs); color: var(--ink-3); }
.pcard__loc { color: var(--ink-4) !important; }
.pcard__row { display: flex; justify-content: space-between; padding: 10px var(--s-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); font-size: var(--t-sm); }
.pcard__row span { color: var(--ink-3); }
.pcard__row b { color: var(--ink); font-weight: 700; }

/* the live eligibility meter */
.elig { border-radius: var(--r-lg); padding: var(--s-5); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-xs); transition: background .25s, border-color .25s; }
.elig[data-state="meets"] { background: var(--safe-tint); border-color: color-mix(in srgb, var(--safe) 35%, var(--line)); }
.elig[data-state="reach"] { background: var(--reach-tint); border-color: color-mix(in srgb, var(--reach) 32%, var(--line)); }
.elig__head { display: flex; align-items: center; gap: 9px; }
.elig__dot { width: 11px; height: 11px; border-radius: 50%; background: var(--ink-4); flex: none; }
.elig[data-state="meets"] .elig__dot { background: var(--safe); }
.elig[data-state="reach"] .elig__dot { background: var(--reach); }
.elig__title { font-family: var(--font-display); font-weight: 700; color: var(--ink); font-size: var(--t-base); }
.elig__msg { margin-top: 8px; color: var(--ink-2); font-size: var(--t-sm); line-height: 1.5; }
.elig__list { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.elig__list li { display: flex; align-items: flex-start; gap: 8px; font-size: var(--t-xs); color: var(--ink-2); }
.elig__list li i { width: 17px; height: 17px; border-radius: 50%; flex: none; display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: .65rem; color: #fff; }
.elig__list li.ok i { background: var(--safe); }
.elig__list li.no i { background: var(--reach); }
.elig__list li.neutral i { background: var(--ink-4); }

.appl__assure { display: flex; flex-direction: column; gap: 8px; padding: var(--s-4); font-size: var(--t-xs); color: var(--ink-3); }

/* ---- success overlay ---- */
.adone { position: fixed; inset: 0; z-index: 200; background: rgba(14,27,46,.55); backdrop-filter: blur(4px); display: grid; place-items: center; padding: var(--s-5); }
.adone__card { background: var(--surface); border-radius: var(--r-xl, 24px); padding: clamp(var(--s-6), 5vw, var(--s-10)); max-width: 440px; width: 100%; text-align: center; box-shadow: var(--shadow-lg); animation: rise var(--dur-3) var(--ease-out) both; }
.adone__tick { width: 64px; height: 64px; margin: 0 auto var(--s-4); border-radius: 50%; display: grid; place-items: center; font-size: 1.8rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--safe), var(--primary)); }
.adone__card h2 { font-family: var(--font-display); font-weight: 800; color: var(--ink); }
.adone__card p { color: var(--ink-3); font-size: var(--t-base); line-height: 1.55; margin: var(--s-2) 0 var(--s-5); }
.adone__card .btn { margin-bottom: var(--s-2); }

/* ---- toast + missing ---- */
.atoast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px); background: var(--ink); color: #fff; padding: 12px 20px; border-radius: var(--r-pill); font-size: var(--t-sm); font-weight: 600; box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none; transition: all var(--dur-2); z-index: 210; }
.atoast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.appl-missing { text-align: center; padding: var(--s-16) 0; }
.appl-missing h1 { font-family: var(--font-display); font-weight: 800; color: var(--ink); }
.appl-missing p { color: var(--ink-3); margin: var(--s-2) 0 var(--s-5); }

/* =====================================================================
   DESIGN POLISH v2 — premium form + flagship upload-later
   ===================================================================== */
.appl__form { position: relative; overflow: hidden; }
.appl__form::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--safe), var(--primary)); }

/* section header with a soft accent bar */
.astep__h { display: flex; align-items: center; gap: 11px; }
.astep__h::before { content: ''; width: 6px; height: 22px; border-radius: 6px; background: linear-gradient(var(--primary), color-mix(in srgb, var(--primary) 45%, var(--safe))); flex: none; }

/* refined inputs */
.afield input, .afield select { background: #fff; }
.afield input:hover, .afield select:hover { border-color: color-mix(in srgb, var(--primary) 28%, var(--line-2)); }
.afield > span { letter-spacing: -.01em; }

/* nicer step dots (gradient when done/now) */
.stepbar__steps li.is-now span { background: #fff; }

/* ---- flagship: upload now / upload later choice ---- */
.upmode { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); margin-bottom: var(--s-5); }
@media (max-width: 560px) { .upmode { grid-template-columns: 1fr; gap: var(--s-3); } }
.upmode__opt { position: relative; text-align: left; display: flex; flex-direction: column; gap: 5px; padding: var(--s-5); border: 2px solid var(--line-2); border-radius: var(--r-lg); background: var(--surface); cursor: pointer; transition: border-color var(--dur-2), background var(--dur-2), box-shadow var(--dur-2), transform var(--dur-1); }
.upmode__opt:hover { border-color: color-mix(in srgb, var(--primary) 38%, var(--line)); transform: translateY(-2px); }
.upmode__opt.is-on { border-color: var(--primary); background: var(--primary-tint); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 12%, transparent); }
.upmode__opt b { font-family: var(--font-display); font-weight: 800; color: var(--ink); font-size: var(--t-lg); }
.upmode__opt small { color: var(--ink-3); font-size: var(--t-sm); line-height: 1.45; }
.upmode__opt small strong { color: var(--primary); font-weight: 700; }
.upmode__ic { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: var(--bg-2); color: var(--primary); margin-bottom: 4px; }
.upmode__opt.is-on .upmode__ic { background: linear-gradient(135deg, var(--safe), var(--primary)); color: #fff; }
.upmode__opt--flag { border-color: color-mix(in srgb, var(--safe) 38%, var(--line-2)); }
.upmode__opt--flag.is-on { border-color: var(--primary); }
.upmode__badge { position: absolute; top: -11px; right: 14px; background: linear-gradient(135deg, var(--safe), var(--primary)); color: #fff; font-size: var(--t-2xs); font-weight: 800; padding: 4px 11px; border-radius: 999px; letter-spacing: .03em; box-shadow: var(--shadow-sm); }

/* ---- "upload later" reassurance card ---- */
.laterbox { text-align: center; padding: clamp(var(--s-6), 4vw, var(--s-8)); border: 1.5px dashed color-mix(in srgb, var(--primary) 38%, var(--line-2)); border-radius: var(--r-lg); background: linear-gradient(160deg, var(--safe-tint), var(--primary-tint)); }
.laterbox__ic { font-size: 2.1rem; }
.laterbox h3 { font-family: var(--font-display); font-weight: 700; color: var(--ink); margin-top: 8px; font-size: var(--t-lg); }
.laterbox p { color: var(--ink-2); font-size: var(--t-sm); line-height: 1.6; margin-top: 8px; max-width: 48ch; margin-inline: auto; }
.laterbox p strong { color: var(--primary); font-weight: 700; }
.laterbox b { color: var(--ink); font-weight: 700; }