/* ═══════════════════════════════════════════════════════════════════════════════════════════
   pos-door.css — THE DOOR'S LANGUAGE, MADE REUSABLE.  Christa, 2026-09-04 1:26 PM:

     "This screen that we're looking at is really what I want the application 1003 to really feel
      like the whole time. Right now I see this screen that kicks me into this other thing that
      kind of looks very very different… it kind of feels a little clunky on the other side of it.
      I want it to look clean, updated, and cool… Is there any way that you can match the entire
      process of this 1003 to what this screen looks and feels like?"

   WHAT WAS ACTUALLY WRONG, because "clunky" has a specific cause here and it is worth naming.
   /pos/door paints a navy canvas edge to edge and floats one soft white card on it. /pos/apply
   painted a navy header that STOPPED — square across the page — and dropped the borrower onto a
   pale grey sheet (--cream #f7f9fb) full of boxy 16px cards and ALL-CAPS grey field labels. So
   the jolt she felt is real and it is a single frame: the canvas changes colour mid-journey. The
   rest — smaller display type, tighter radii, shouty labels — is the same product speaking in a
   different register once the form starts.

   WHY A FILE AND NOT AN EDIT. There are 20 POS screens on app.css. Hand-styling each one is 20
   chances to drift and no way to keep them together afterwards. This is one layer, linked after
   app.css, so rolling the rest of the journey into it is one <link> per page and every screen
   moves together the next time she changes her mind about any of it.

   ⛔ WHAT THIS LAYER MAY NOT DO. It is skin only. It must never change what a field is, what it
   asks, what it validates, or what order anything happens in — the 1003 is a regulated form and
   its content is not a design decision. If a rule in here starts moving fields around, it has
   stopped being this file.

   ⚠️ Inputs stay at 16px. Below that iOS zooms the page on focus, which is the single most common
   mobile form defect in this industry and is enforced globally in apply.html. Nothing here
   reduces an input's font size, at any breakpoint, ever.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

:root{
  /* The door's own values, not approximations of them. */
  --door-canvas: linear-gradient(170deg,#14324f 0%,#0f2a40 55%,#0e3038 100%);
  --door-eyebrow:#7fd6d5;
  --door-sub:#c6dcdd;
  --door-radius:22px;
  /* Tuned for a LIGHT page. The dark-canvas version of this was much heavier; carried onto
     cream it would read as a drop shadow from 2009. */
  --door-card-sh:0 1px 2px rgba(16,35,55,.06), 0 14px 34px rgba(16,35,55,.10);
}

/* ── 1 · THE CANVAS STAYS LIGHT. ⭐⭐ Christa, 9/4, looking at the first navy pass:
   "this card and the other card… I think that the original lighter version sits better."

   She is right, and the reason is worth writing down so nobody re-litigates it in a month.
   The DOOR is navy because it is a CHOICE screen — one card, a lot of empty space, a moment.
   These are WORKING screens: long forms that are mostly white card. On navy you pay the whole
   cost of a dark canvas (a hard bright edge, and real fatigue across fourteen sections) and
   collect none of the benefit, because the card covers the canvas anyway.

   ⭐ THE ORIGINAL DIAGNOSIS STILL HOLDS THOUGH, and this is the part that matters: the clunk was
   never the grey. It was that the navy header STOPPED — square, edge to edge — and dropped the
   borrower onto a different-coloured sheet mid-journey. So the canvas goes back to light and the
   SEAM gets fixed instead: the header keeps a generous curve and a shadow, and reads as a card
   sitting on the page rather than a band that ran out. Everything else the door taught us — the
   type, the floating cards, the sentence-case labels, the spacing — stays. */
body.door-skin{ background-color:var(--cream,#f7f9fb); background-image:none; min-height:100dvh; }

body.door-skin .top{
  border-radius:0 0 26px 26px;
  padding:20px 20px 24px;
  box-shadow:0 12px 30px rgba(16,35,55,.13);
}
@media(min-width:900px){
  body.door-skin .top{ padding:30px 30px 30px; border-radius:0 0 30px 30px; }
}

/* ── 2 · THE DOOR'S VOICE AT THE TOP ──────────────────────────────────────────────────────── */
body.door-skin .top h1{
  font-size:27px; line-height:1.15; letter-spacing:-.02em; font-weight:790; margin-top:16px;
}
body.door-skin .top h1 em{ font-style:normal; color:var(--teal); }
body.door-skin .top .intro{ font-size:14px; line-height:1.6; color:var(--door-sub); opacity:1; }
body.door-skin .top .st{ color:var(--door-sub); opacity:1; }
@media(min-width:900px){ body.door-skin .top h1{ font-size:38px; } }

/* ── 3 · CARDS THAT FLOAT, THE WAY THE DOOR'S DOES ────────────────────────────────────────── */
body.door-skin .card{
  border-radius:var(--door-radius);
  border:0;
  padding:22px 20px;
  box-shadow:var(--door-card-sh);
}
@media(min-width:900px){ body.door-skin .card{ padding:28px 26px; } }

/* Supporting panels were pale-grey-on-pale-grey; on navy they need to be white or they vanish. */
body.door-skin .scen{ border:0; border-radius:16px; box-shadow:var(--door-card-sh); }

/* ── 4 · LABELS THAT ASK, RATHER THAN SHOUT ───────────────────────────────────────────────
   11px uppercase letterspaced grey is form-design from a decade ago and it is most of why the
   card read as "a form" next to the door's "a question". Sentence case, dark, readable. */
body.door-skin .f label{
  font-size:13.5px; letter-spacing:0; text-transform:none;
  color:var(--ink); font-weight:700; margin-bottom:8px;
}
body.door-skin .f label .req{ color:var(--stop); font-weight:800; }
/* ⚠️ RADIUS ONLY — do NOT set padding here. A blanket `padding:14px 15px` looked harmless and
   clipped /pos/start's big value fields ("$ 425,00("): those inputs render a 27px number inside a
   fixed-width box and carry their own tighter padding, which this overrode. Caught on the second
   screen the skin touched, which is the whole reason two screens went first. A skin layer may set
   how a control LOOKS; the moment it sets how much room a control has, it is laying out the page
   and it will break a screen it has never seen. */
body.door-skin .f input, body.door-skin .f select{ border-radius:13px; }
body.door-skin .f .hint{ font-size:12.5px; line-height:1.55; }

/* ── 5 · THE SECTION RAIL, AS DOOR TILES ──────────────────────────────────────────────────── */
body.door-skin .rail ol{ border:0; border-radius:18px; box-shadow:var(--door-card-sh); overflow:hidden; }
body.door-skin .rail .row .tx b{ font-weight:730; }
body.door-skin .railToggle{ border-radius:14px; }

/* ── 6 · THE PROGRESS METER ───────────────────────────────────────────────────────────────── */
body.door-skin .meter1003 .mtxt{ color:var(--door-sub); }
body.door-skin .meter1003 .mbar{ background:rgba(255,255,255,.14); }

/* ── 7 · THE STICKY ACTION BAR ────────────────────────────────────────────────────────────── */
body.door-skin .nav{
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:saturate(1.4) blur(12px); backdrop-filter:saturate(1.4) blur(12px);
  border-top:1px solid var(--line);
}

/* ── 8 · THE OFFICER, SAME CARD SHE HAS ON THE DOOR ──────────────────────────────────────── */
body.door-skin .loBar{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  border-radius:16px;
}

/* The bar went dark, so the buttons that sat on white have to be re-read against it. Continue is
   untouched — it is teal on the door too, and it is the one thing on the screen that should shout. */
/* The bar is light again, so these are left exactly as each page already styles them. Continue
   stays teal — on the door and here it is the one thing on the screen that should shout. */

/* The tail under the card — "I saved this earlier", the demo-build warning — was ink-on-white. */


/* ── EMBEDDED IN THE DOOR'S PANEL (door-overlay.js adds this class inside the iframe) ─────────
   The door is still on screen behind the panel, so repeating its logo and its outer margin
   inside the box wastes the only thing a modal is short of: height. */
body.door-embed .top > .tl,
body.door-embed .head-row,
body.door-embed .top a > img[alt*="CLEAR"]{ display:none; }
body.door-embed .top{ padding-top:16px; }
body.door-embed .head{ padding-top:12px; }
body.door-embed .shell{ padding-top:0; }

/* Two floating widgets ship on every POS page. Inside the panel they render a SECOND time on top
   of the door's own — two chat bubbles, two "Ask Christa's AI assistant" bars. The door's are
   still there behind the panel and are the ones that work, so the copies inside go away.
   ⛔ Only inside the embed. Both are live on every page in their own right. */
body.door-embed #cloneDock,
body.door-embed .tw-fab,
body.door-embed .pd-fab{ display:none !important; }

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   ⭐⭐ 9 · THE INTAKE WEARS THE DOOR.  Christa, 2026-09-04 3:03 PM, with two screenshots side
   by side — /pos/door and /pos/apply:

     "what i actually want from you is to make the 1003 intake door… and that look and feel
      ……. and less like the second image….. see the photos…"

   This is the SECOND time today she has asked for this (the first is at the top of this file),
   which by her own rule means it is the requirement and not a passing note. So look at what was
   still different at 3pm, because it was not the type and it was not the radii — those already
   matched:

     · THE CANVAS STILL CHANGED MID-JOURNEY. The navy header ended in a hard horizontal edge and
       the borrower dropped onto a pale grey sheet. The door is navy from edge to edge with white
       cards floating on it. That single seam is what makes one screen feel like "a moment" and
       the next feel like "a form".
     · A 320px COLUMN OF NOTHING. At ≥1080px the grid reserved a third column for the validation
       summary and the six-piece warning — both of which are `hidden` on nearly every step. So
       the whole right third of a 1440 desktop was empty navy-to-grey while the form crowded into
       604px. She has flagged empty desktop halves before (the /pos/door "nextup" strip exists for
       exactly this reason). It now collapses to zero when there is nothing in it.
     · NO EYEBROW. The door opens "LET'S FIND YOUR PATH" in teal caps above the headline; the
       application opened with the headline cold.

   ⚠️ RECONCILING THIS WITH HER 1:26 PM CALL, because they LOOK contradictory and the next person
   here needs to know they are not. Looking at the first navy pass she said: "this card and the
   other card… I think that the original lighter version sits better." She was comparing two
   CARDS, and she was right — the cards go white. I over-read that as a verdict on the whole
   canvas and put the grey sheet back, which is what she is now pointing at again. Navy canvas +
   white cards is not a reversal of her note; it is the door, and it is what both notes describe.

   ⛔ Still skin only. Nothing below moves a field, changes a question, or reorders a step.
   Scoped to `.door-canvas` — ONE class on ONE page — so the other 19 door-skin screens are
   untouched and this is one word to undo.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
body.door-skin.door-canvas{
  background:var(--door-canvas);
  /* Fixed, or the gradient restarts under a long form and paints a band mid-scroll — the exact
     seam this whole rule exists to remove. */
  background-attachment:fixed;
  color:#fff;
}
/* The header is no longer a card that ran out; it is simply the top of the canvas. */
body.door-skin.door-canvas .top{
  background:transparent; box-shadow:none; border-radius:0; padding-bottom:6px;
}
body.door-skin.door-canvas .top h1 em{ font-style:normal; color:var(--door-eyebrow); }

/* The door's kicker, in the door's teal. Chrome, not content — it names where you are. */
.door-eyebrow{
  font-size:10.5px; letter-spacing:.17em; text-transform:uppercase;
  font-weight:800; color:var(--door-eyebrow); margin-top:14px;
}
@media(min-width:900px){ .door-eyebrow{ margin-top:18px; } }

/* Cards float on a dark canvas the way the door's does — the light-page shadow disappears here. */
body.door-skin.door-canvas .card,
body.door-skin.door-canvas .rail ol,
body.door-skin.door-canvas .scen{ box-shadow:0 18px 50px rgba(0,0,0,.28); }

/* Anything that sits DIRECTLY on the canvas has to be re-read against it. Ink-on-white small
   print on navy is invisible, and "invisible" on an application means a disclosure nobody saw. */
body.door-skin.door-canvas .foot{ color:#b9cfd6; }
body.door-skin.door-canvas .foot a{ color:#dbe9ec; }
body.door-skin.door-canvas .railToggle{
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.20); color:#fff;
}
body.door-skin.door-canvas .meter1003 .mbar{ background:rgba(255,255,255,.16); }