/* ⭐⭐⭐ THE 1003 LOOK — Christa's spec, 2026-09-04 ~4:55 PM.
   Full write-up with her words and the two reference screenshots: projects/clear-los-pos/SPEC-1003-LOOK.md

   She held the 3:35 PM skin ("this isn't the look that I want… I need to explain it better to
   you"), then explained it by marking up a screenshot of this very screen. Her order, top to
   bottom, IS the spec — so it is the order of this file:

     1. the white "fill in" card   — the questions the borrower answers
     2. the other side of it       — her loan officer, and the agent underneath when there is one
     3. the sections of the 1003   — where they are, moving through
     4. the status bar             — moving across
     5. three cards                — changing by section, "gives them more information about the
                                     process and what's going on"

   The canvas is the DOOR's canvas: navy, with white floating cards. Settled 2:03 PM — the navy
   canvas plus white cards IS the look she approved on /pos/door.

   ⛔ WHAT THIS FILE MAY NOT DO. It is a LAYOUT. It moves nothing that counts and computes nothing:
   the meter still reads from updateMeter(), the rail still renders from renderRail(), and RESPA
   §8 prominence is still measured every render by respa-prominence.js — the lender must remain
   the first and larger party wherever the agent appears. Re-ordering those two blocks in CSS
   would break a legal control silently, so the side column keeps the lender FIRST in the DOM and
   the agent after it, and the sizes below preserve that. */

/* ── the canvas ──────────────────────────────────────────────────────────── */
body.look1003{background:linear-gradient(168deg,#14324f 0%,#153c4d 58%,#0f2d34 100%);
  background-attachment:fixed;min-height:100dvh}

/* ── 1 + 2 · the fill-in card, and the other side ────────────────────────── */
.c1003{max-width:1240px;margin:0 auto;padding:0 20px 40px}
.c1003-top{display:grid;gap:20px;align-items:start}
@media (min-width:1080px){
  .c1003-top{grid-template-columns:minmax(0,1fr) 316px}
}
/* The form card is the page's own .card — it already floats white. Nothing to restyle, which is
   the point: this is a re-arrangement, not a re-skin. */

.c1003-side{display:grid;gap:14px;align-content:start}
@media (max-width:1079px){
  /* ⭐ On a phone the co-brand goes ABOVE the questions — she is looking at who she is applying
     with before she starts typing, and F-53 already settled that the desktop contact card is a
     desktop affordance ("there's a bigger place in space"). Order, not a second layout. */
  .c1003-side{order:-1}
}
.c1003-card{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  border-radius:16px;padding:15px 16px;backdrop-filter:blur(3px)}
.c1003-card .k{font:800 9.5px/1 system-ui;letter-spacing:.14em;text-transform:uppercase;
  color:#7fd6d5;display:block;margin-bottom:9px}

/* ── 3 · the sections of the 1003, now a row UNDER the card ──────────────── */
/* Was a 236px left rail. Her markup wrote "sections of 1003" across it and her voice put it
   underneath — which also kills the dead column she has complained about twice. The rail's
   MARKUP is untouched (renderRail still emits the same <ol><li>), so nothing that reads it
   breaks; only the box it sits in changed. */
.c1003-rail{margin-top:20px}
.c1003-rail .rail{display:block;position:static;margin:0;max-width:none}
.c1003-rail .rail ol{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 8px;margin:0;
  list-style:none;scrollbar-width:thin;scroll-snap-type:x proximity}
.c1003-rail .rail ol::-webkit-scrollbar{height:6px}
.c1003-rail .rail ol::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border-radius:99px}
.c1003-rail .rail li{flex:0 0 auto;scroll-snap-align:start;margin:0}
.c1003-rail .rail li .row{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);
  border-radius:12px;padding:9px 12px;color:#dbe9ea;min-width:0;white-space:nowrap}
.c1003-rail .rail li.now .row{background:#fff;border-color:#fff;box-shadow:0 8px 22px rgba(0,0,0,.26)}
.c1003-rail .rail li.now .row .tx b{color:var(--deep,#14324f)}
.c1003-rail .rail li .row .tx b{color:inherit}
.c1003-rail .rail li[aria-disabled="true"] .row{opacity:.55}

/* ── 4 · the status bar, moving across ───────────────────────────────────── */
.c1003-status{margin-top:6px}
.c1003-status .meter1003{margin-top:0}

/* ── 5 · the three cards ─────────────────────────────────────────────────── */
/* Modelled on the door's "What happens after you pick" trio, which is the one she pointed at.
   ⭐ They CHANGE BY SECTION — "those will change according to topics or different things" — so
   the copy lives beside the flow, not in this file. */
.c1003-three{display:grid;gap:14px;margin-top:22px}
@media (min-width:760px){ .c1003-three{grid-template-columns:repeat(3,minmax(0,1fr))} }
.c1003-three .t{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  border-radius:15px;padding:15px 16px 16px;color:#cfe1e3}
.c1003-three .t .n{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:rgba(31,171,170,.22);border:1px solid rgba(127,214,213,.5);color:#9fe4e3;
  font:800 12px/1 system-ui;margin-bottom:9px}
.c1003-three .t b{display:block;font:750 14px/1.3 system-ui;color:#fff;letter-spacing:-.01em}
.c1003-three .t span{display:block;font:500 12.5px/1.55 system-ui;margin-top:5px;color:#b6cccf}

/* The sticky Continue bar already reserves its own room; the canvas must not double it. */
body.look1003 .foot{color:#8fb0b4}

/* ── F-193 · the month/year pair that replaced <input type="month"> ───────── */
/* Two real dropdowns, side by side, same on every platform. She could not read the browser's
   own spinner and it let her pick 2030. */
.my2{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:10px}
.my2 select{width:100%}
@media (max-width:400px){ .my2{grid-template-columns:1fr;gap:8px} }

/* ── F-194 · the length of stay, said out loud under the date ────────────── */
.stayNote{margin:7px 0 0;font:500 12.5px/1.5 system-ui;color:#4a6b70}
.stayNote b{color:#14324f;font-weight:800}
.stayNote.warn{color:#8a5a1e}
.stayNote.warn b{color:#8a5a1e}
.stayNote.bad{color:#b0442f;font-weight:650}