/* ============================================================
   WYVERN FREIGHT · BUSINESS ACCOUNT APPLICATION (tools/register/make-application.cjs)
   Live layout (wyvernfreight.com/business-account-application/): banner, a step list on the left, one white card
   on the right. Fields, error summary, review and confirmation are the Quote form's (quote.css) and the Integrity
   Line's (legal.css). Only the layout, the tiles and the document rows are new here. Ink for selected states;
   red stays for the main action.
   ============================================================ */

/* ---------- layout: 12-col site grid, step list cols 1-3, card cols 4-12 ---------- */
.ap-c{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:var(--col-gap);align-items:start;padding-top:72px;padding-bottom:96px}
.ap-steps{grid-column:1 / span 3;position:sticky;top:96px}
.ap-main{grid-column:4 / -1;min-width:0}
.ap-page .q-col > .q-form,.ap-page .q-col > .q-done{padding-top:0}
.ap-page .q-col > .q-done{padding:40px 48px}

/* Step list */
.ap-steps ol{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.ap-steps li::before{display:none !important}
.ap-step{appearance:none;display:grid;grid-template-columns:34px minmax(0,1fr);align-items:center;gap:12px;width:100%;min-height:44px;padding:6px 10px;
  border:0;border-bottom:1px solid var(--line);background:none;text-align:left;cursor:pointer;font:400 15px/1.3 var(--sans);color:var(--ink-2);
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.ap-step:hover:not(:disabled){background:var(--canvas)}
.ap-step:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.ap-step:disabled{cursor:default;color:var(--subtle)}
.ap-step-n{display:inline-grid;place-items:center;height:24px;font:500 12px/1 var(--mono);letter-spacing:.04em;background:var(--hover);color:var(--muted)}
.ap-step.is-done .ap-step-n{background:var(--ink);color:#fff}
.ap-step[aria-current="step"]{background:var(--canvas);color:var(--ink);font-weight:500;box-shadow:inset 3px 0 0 var(--red)}
.ap-step[aria-current="step"] .ap-step-n{background:var(--ink);color:#fff}

/* Progress (phones and tablets only; the step list carries it on desktop) */
.ap-progress{display:none;margin:0 0 16px;font:500 var(--fs-label)/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.ap-bar{display:block;height:3px;margin-top:10px;background:var(--line)}
.ap-bar span{display:block;height:100%;width:0;background:var(--ink);transition:width .3s var(--ease)}

/* Card head: "Step n of 15" above the step title */
.ap-count{margin:0;font:500 var(--fs-label)/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

/* Notes inside the steps (demo notices, credit note) */
.ap-note{margin:0;padding:14px 16px;background:var(--hover);border-left:3px solid var(--ink-2);font:400 15px/1.55 var(--sans);color:var(--ink-2)}
.ap-note.is-warn{border-left-color:var(--red)}
.ap-note:empty{display:none}
.ap-ref strong{display:block;margin-top:6px;font-size:22px}

/* ---------- tiles: radio / checkbox choices (live account-type and kind tiles) ---------- */
.ap-tiles{margin:0;padding:0;border:0;min-width:0;display:grid;gap:12px}
.ap-tiles legend{margin-bottom:12px;padding:0}
.ap-tile-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ap-tiles.is-3 .ap-tile-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.ap-tile{position:relative;display:block;cursor:pointer}
.ap-tile input{position:absolute;opacity:0;pointer-events:none}
.ap-tile-in{display:grid;gap:4px;height:100%;min-height:64px;padding:14px 16px 14px 46px;border:1px solid var(--line-strong);background:var(--canvas);
  transition:border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease)}
.ap-tile-in::before{content:"";position:absolute;left:16px;top:17px;width:18px;height:18px;border:1.5px solid var(--muted);background:var(--canvas)}
.ap-tile input[type=radio] + .ap-tile-in::before{border-radius:50%}
.ap-tile-t{font:500 16px/1.3 var(--sans);color:var(--ink)}
.ap-tile-d{font:400 14px/1.45 var(--sans);color:var(--muted)}
.ap-tile:hover .ap-tile-in{border-color:var(--muted)}
.ap-tile input:checked + .ap-tile-in{border-color:var(--ink);background:var(--hover);box-shadow:inset 0 0 0 1px var(--ink)}
.ap-tile input:checked + .ap-tile-in::before{border-color:var(--ink);background:var(--ink);box-shadow:inset 0 0 0 3px var(--canvas)}
.ap-tile input:focus-visible + .ap-tile-in{outline:2px solid var(--focus);outline-offset:2px}
.ap-tiles[aria-invalid="true"] .ap-tile-in{border-color:var(--red)}

/* ---------- documents (live step 13): one row per document, actions on the right ---------- */
.ap-docs{display:grid;gap:0}
.ap-doc{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px 24px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}
.ap-doc-txt{display:grid;gap:4px;min-width:0}
.ap-doc-t{margin:0;font:500 16px/1.35 var(--sans);color:var(--ink)}
.ap-doc-d{margin:0;font:400 14px/1.5 var(--sans);color:var(--muted)}
.ap-doc-s{margin:0;font:500 13px/1.4 var(--sans);color:var(--subtle);overflow-wrap:anywhere}
.ap-doc.is-set .ap-doc-s{color:var(--ok)}
.ap-badge{display:inline-block;margin-left:8px;padding:3px 7px;vertical-align:2px;font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line-strong)}
.ap-badge.is-req{color:var(--ink);border-color:var(--ink)}
.ap-doc-acts{display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:flex-end}
.ap-doc-acts label.btn-p{cursor:pointer}
.ap-doc input[type=file]:focus-visible + label{outline:2px solid var(--focus);outline-offset:2px}
.ap-doc-acts button.btn-t{appearance:none;border:0;background:none;cursor:pointer}

/* ---------- declarations ---------- */
.ap-decl{margin:0;padding:0;border:0;display:grid;gap:12px}
.ap-check{display:grid;grid-template-columns:22px minmax(0,1fr);gap:14px;align-items:start;padding:16px;border:1px solid var(--line-strong);cursor:pointer}
.ap-check input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--ink);cursor:pointer}
.ap-check span{font:400 15px/1.5 var(--sans);color:var(--ink-2)}
.ap-check strong{display:block;font-weight:500;color:var(--ink)}
.ap-check a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.ap-check:has(input:checked){border-color:var(--ink);background:var(--hover)}
.ap-decl[aria-invalid="true"] .ap-check:has(input:not(:checked)){border-color:var(--red)}

/* ---------- step navigation: Save draft beside the main action ---------- */
.ap-save{appearance:none;border:0;cursor:pointer}
.ap-saved{margin:12px 0 0;font:500 14px/1.4 var(--sans);color:var(--ok)}
.ap-saved:empty{display:none}

/* ---------- tablet + phone: step list becomes a progress line above the card ---------- */
@media (max-width:1024px){
  .ap-c{display:block;padding-top:40px;padding-bottom:72px}
  .ap-steps{position:static;margin-bottom:16px}
  .ap-steps ol{display:none}
  .ap-progress{display:block}
  .ap-count{display:none}
}
@media (max-width:899px){
  .ap-page .q-col > .q-done{padding:28px 20px}
}
@media (max-width:699px){
  .ap-tile-grid,.ap-tiles.is-3 .ap-tile-grid{grid-template-columns:minmax(0,1fr)}
  .ap-doc{grid-template-columns:minmax(0,1fr)}
  .ap-doc-acts{justify-content:flex-start}
}
@media (prefers-reduced-motion:reduce){ .ap-bar span{transition:none} }

/* Documents step, declare mode (Gateway cannot take files yet, application.js): the picker is hidden and each row
   carries a compact "I have this ready" check instead. Upload mode hides the check and shows the picker. */
.ap-doc .ap-doc-ready{grid-template-columns:20px minmax(0,1fr);gap:10px;padding:10px 12px;border-color:var(--line);justify-self:end}
.ap-doc .ap-doc-ready span{font-size:14px}
.ap-doc .ap-doc-ready[hidden]{display:none}
@media (max-width:720px){.ap-doc .ap-doc-ready{justify-self:start}}