/* ==========================================================================
   The front door, layers one and two. Loaded by the home page only, after ignition.css.

   1. The story: sections below the start screen's first screen, each ending in a Start button that is the same button.
   2. The card: asks who is reading, after the gauge settles and before the screen lifts.

   Everything here is under html.fn, which the head script puts on a visitor who has not started the garage before, so a returning member
   gets the start screen exactly as it was. Nothing here restyles anything that already existed: the first screen is the same, the landing
   behind it is the same. The only thing done to #ig itself is to hide its scroll bar, so a window with a classic scroll bar shows the
   first screen unshifted; it still scrolls by wheel, touch and keys.

   Type follows the phone scale (12, 13, 15 and 17px under 17.5px) so tools/phone-lint.mjs is satisfied at every width.
   ========================================================================== */

.fn-wrap, .fn-ask{ display:none }
html.fn.fn-ready #ig .fn-wrap{ display:block }
html.fn #ig .fn-ask:not([hidden]){ display:flex }
@media print{ .fn-wrap, .fn-ask{ display:none !important } }

html.fn.fn-ready #ig{ scrollbar-width:none; overscroll-behavior:contain }
html.fn.fn-ready #ig::-webkit-scrollbar{ display:none }

/* ---------- 1. the story ------------------------------------------------- */
.fn-wrap{
  position:relative; z-index:1;
  padding:clamp(48px,11vh,112px) var(--pad) max(56px,calc(32px + env(safe-area-inset-bottom)));
  background:linear-gradient(180deg,rgba(5,7,13,0) 0,rgba(5,7,13,.86) clamp(96px,24vh,240px));
}
.fn-sec{ min-width:0; max-width:40rem; margin:0 0 clamp(56px,10vh,100px) }
.fn-sec:last-child{ margin-bottom:0 }
/* a wide window keeps the car in the open: the story sits in the same column as the words on the first screen */
@media(min-aspect-ratio:31/20){ .fn-sec{ max-width:max(26rem,min(40rem,var(--room-text))) } }

.fn-eyebrow{ margin:0 0 .85em; font-size:12px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--amber) }
.fn-sec .ig-stripes{ margin-bottom:clamp(12px,2.2vh,20px) }
.fn-h{
  margin:0 0 .5em; font-family:var(--display); font-weight:900; text-transform:uppercase; color:var(--ink);
  font-size:clamp(1.6rem,4.2vw,2.6rem); line-height:1.02; letter-spacing:-.025em; text-wrap:balance; overflow-wrap:break-word;
}
.fn-h--card{ font-size:clamp(1.45rem,3.4vw,1.9rem) }
.fn-p{ margin:0 0 1em; max-width:36rem; font-size:17px; line-height:1.55; color:rgba(240,242,245,.88); overflow-wrap:break-word }

/* the figures: one row of four, or two by two */
.fn-stats{
  list-style:none; margin:1.5em 0 0; padding:14px clamp(14px,2vw,22px); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 18px;
  container-type:inline-size;
  border:1px solid var(--hairline,rgba(229,231,235,.1)); border-radius:var(--r-box,4px);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0) 42%),rgba(8,11,20,.62);
  box-shadow:inset 0 1px 0 rgba(229,231,235,.1),0 24px 60px -24px rgba(0,0,0,.85);
}
@media(min-width:640px){ .fn-stats{ grid-template-columns:repeat(4,minmax(0,1fr)) } }
.fn-stats li{ min-width:0 }
.fn-stats b{ display:block; font-family:var(--display); font-size:clamp(1.35rem,3.2vw,1.8rem); line-height:1.1; letter-spacing:-.01em; color:var(--ink); font-variant-numeric:tabular-nums }
.fn-stats span{ display:block; margin-top:3px; font-size:13px; line-height:1.35; color:var(--ink-3) }

/* the two tracks */
.fn-ab{ display:grid; gap:12px; margin:0 0 1.2em }
@media(min-width:720px){ .fn-ab{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
.fn-t{
  min-width:0; padding:16px 18px; border:1px solid var(--hairline,rgba(229,231,235,.1)); border-radius:var(--r-box,4px);
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,0) 42%),rgba(8,11,20,.62);
}
.fn-tl{ margin:0 0 2px; font-family:var(--display); font-weight:900; font-size:1.5rem; line-height:1; color:var(--ignition) }
.fn-t h3{ margin:0 0 .4em; font-family:var(--display); font-weight:900; text-transform:uppercase; font-size:17px; letter-spacing:.01em; color:var(--ink) }
.fn-t p{ margin:0; font-size:15px; line-height:1.5; color:var(--ink-2) }

/* what you will find: three rows */
.fn-rows{ list-style:none; margin:0 0 .4em; padding:0; display:grid; gap:10px }
.fn-rows li{
  min-width:0; padding:14px 16px; border:1px solid var(--hairline,rgba(229,231,235,.1)); border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,0) 42%),rgba(8,11,20,.62);
  font-size:15px; line-height:1.5; color:var(--ink-2);
}
.fn-rows b{ color:var(--ink) }
.fn-rows a, .fn-now a{ color:inherit; text-decoration:underline; text-decoration-thickness:1px; text-decoration-color:rgba(240,242,245,.45); text-underline-offset:3px }
.fn-rows a:hover, .fn-now a:hover{ text-decoration-color:var(--amber) }
.fn-chip{ display:block; margin:7px 0 0; font-style:normal; font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--amber) }
.fn-now{ margin:1.1em 0 0; font-size:15px; line-height:1.45; color:var(--ink-2) }
.fn-sec a:focus-visible{ outline:2px solid var(--speed-blue); outline-offset:3px; border-radius:3px }

/* the five readers */
.fn-readers{ list-style:none; margin:0 0 .4em; padding:0; display:grid; gap:10px }
.fn-readers li{
  min-width:0; padding:14px 16px; border:1px solid var(--hairline,rgba(229,231,235,.1)); border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,0) 42%),rgba(8,11,20,.62);
}
.fn-readers b{ display:block; margin-bottom:3px; font-family:var(--display); font-weight:900; text-transform:uppercase; font-size:15px; line-height:1.25; letter-spacing:.01em; color:var(--ink) }
.fn-readers span{ display:block; font-size:15px; line-height:1.5; color:var(--ink-2) }
.fn-readers .fn-act{ display:inline-block; margin-top:2px; padding:8px 0; font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; text-decoration:none; color:var(--amber) }
.fn-readers .fn-act::after{ content:' \2192' }
.fn-readers .fn-act:hover{ color:#fff }

/* measured, modeled, stated */
.fn-ev{ margin:0 0 1.2em; display:grid; gap:10px }
.fn-ev div{ display:grid; grid-template-columns:minmax(5.5rem,7rem) minmax(0,1fr); gap:4px 14px; align-items:baseline; padding:12px 16px; border:1px solid var(--hairline,rgba(229,231,235,.1)); border-radius:14px; background:rgba(8,11,20,.62) }
.fn-ev dt{ font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--amber) }
.fn-ev dd{ margin:0; font-size:15px; line-height:1.45; color:var(--ink-2) }

/* the real income: net dollars an hour, a job beside delivery (tools/paycompare.py). One row a bar: the label, the bar, the figure.
   A narrow column stacks the label over the bar; a wide one puts all three on a line. Colour is never the only signal: every row's label says what it is. */
.fn-note{ margin:1em 0 0; max-width:36rem; font-size:13px; line-height:1.5; color:var(--ink-3) }
.fn-axis{ margin:1.4em 0 .5em; font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3) }
.fn-bars{
  list-style:none; margin:0; padding:16px clamp(14px,2vw,22px); display:grid; gap:14px;
  container-type:inline-size;
  border:1px solid var(--hairline,rgba(229,231,235,.1)); border-radius:var(--r-box,4px);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0) 42%),rgba(8,11,20,.62);
  box-shadow:inset 0 1px 0 rgba(229,231,235,.1),0 24px 60px -24px rgba(0,0,0,.85);
}
.fn-bar{ --bar:rgba(229,231,235,.4); min-width:0; display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"l v" "t t"; gap:7px 12px; align-items:end }
.fn-bar--car{ grid-template-areas:"l v" "t t" "n n" }
.fn-bn{ grid-area:n; margin-top:-2px; font-size:13px; line-height:1.35; color:var(--ink-3) }
.fn-sec .rm{ white-space:nowrap }                       /* a figure or a range never breaks across two lines */
.fn-bar--ref{ --bar:rgba(var(--speed-blue-rgb),.5) }
.fn-bar--car{ --bar:var(--speed-blue) }
.fn-bl{ grid-area:l; min-width:0; display:block; font-size:15px; line-height:1.3; color:var(--ink-2); overflow-wrap:break-word }
.fn-bl b{ display:block; font-weight:700; color:var(--ink) }
.fn-bl small{ display:block; margin-top:1px; font-size:13px; line-height:1.35; color:var(--ink-3) }
.fn-bl em{ display:block; margin-top:3px; font-style:normal; font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--amber) }
.fn-bt{ grid-area:t; position:relative; display:block; height:14px; border-radius:7px; background:rgba(229,231,235,.07) }
.fn-bt i{ position:absolute; left:0; top:0; bottom:0; width:var(--w); border-radius:7px; background:var(--bar) }
.fn-bar--goal .fn-bt i{ background:transparent; border:1.5px dashed var(--amber) }
.fn-bt u{ position:absolute; top:50%; left:var(--a); width:calc(var(--b) - var(--a)); height:2px; margin-top:-1px; background:#fff; text-decoration:none }
.fn-bt u::before, .fn-bt u::after{ content:''; position:absolute; top:-5px; width:2px; height:12px; background:#fff }
.fn-bt u::before{ left:0 }
.fn-bt u::after{ right:0 }
.fn-bv{ grid-area:v; justify-self:end; text-align:right; white-space:nowrap; color:var(--ink); font-variant-numeric:tabular-nums }
.fn-bv b{ display:block; font-family:var(--display); font-weight:900; font-size:17px; line-height:1.2 }
@container (min-width:31rem){
  /* fixed outer columns: every row is its own grid, so an auto column would give each bar a different track and break the one scale */
  .fn-bar{ grid-template-columns:11.5rem minmax(0,1fr) 5.4rem; grid-template-areas:"l t v"; align-items:center; gap:12px 14px }
  .fn-bar--car{ grid-template-areas:"l t v" ". n ."; row-gap:6px }
  .fn-bn{ margin-top:0 }
}
.fn-how{ margin:1.2em 0 0; border:1px solid var(--hairline,rgba(229,231,235,.1)); border-radius:14px; background:rgba(8,11,20,.62) }
.fn-how summary{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:48px; padding:12px 16px; cursor:pointer; list-style:none; font-size:15px; font-weight:700; color:var(--ink) }
.fn-how summary::-webkit-details-marker{ display:none }
.fn-how summary::after{ content:'+'; font-size:20px; line-height:1; color:var(--amber) }
.fn-how[open] summary::after{ content:'\2212' }
.fn-how summary:focus-visible{ outline:2px solid var(--speed-blue); outline-offset:2px; border-radius:14px }
.fn-how-b{ padding:2px 16px 6px }
.fn-how-b .fn-p{ font-size:15px; line-height:1.5 }
.fn-tw{ margin:0 0 1em; overflow-x:auto }
.fn-t2{ width:100%; border-collapse:collapse; font-size:13px; line-height:1.4; color:var(--ink-2) }
.fn-t2 th, .fn-t2 td{ padding:8px 0 8px 10px; border-top:1px solid var(--hairline,rgba(229,231,235,.1)); text-align:right; font-weight:400; font-variant-numeric:tabular-nums; vertical-align:top }
.fn-t2 thead th{ border-top:0; font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3) }
.fn-t2 th:first-child{ padding-left:0; text-align:left }
.fn-t2 tbody th{ color:var(--ink) }

/* a Start button: the machined button again, with a line beside it. Its size, its light and its lettering are ignition.css's. */
.fn-go{ --btn:clamp(112px,26vw,148px); display:flex; align-items:center; gap:clamp(14px,3vw,26px); margin:1.6em 0 0 }
#ig .fn-go button.ig-btn{ flex:none }
.fn-go-t{ margin:0; min-width:0; font-size:15px; line-height:1.45; color:var(--ink-2) }
.fn-go-t b{ display:block; margin-bottom:2px; font-family:var(--display); font-weight:900; text-transform:uppercase; font-size:17px; letter-spacing:-.005em; color:var(--ignition) }

/* ---------- 2. the card -------------------------------------------------- */
.fn-ask{
  position:fixed; inset:0; z-index:5; align-items:flex-end; justify-content:flex-start; pointer-events:none;
  padding:max(10px,env(safe-area-inset-top)) var(--pad) max(14px,env(safe-area-inset-bottom));
}
/* the words and the console give way to it; the gauge has already said what it had to */
html.fn #ig.fn-asking{ overflow:hidden }
html.fn #ig.fn-asking .ig-main{ opacity:0; pointer-events:none; transition:opacity .35s ease }
.fn-card{
  pointer-events:auto; width:min(31rem,100%); max-height:100%; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin;
  padding:clamp(18px,3vw,26px);
  border:1px solid var(--hairline-strong,rgba(229,231,235,.2)); border-radius:var(--r-box,4px);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,0) 40%),rgba(8,11,20,.8);
  -webkit-backdrop-filter:blur(18px) saturate(130%); backdrop-filter:blur(18px) saturate(130%);
  box-shadow:inset 0 1px 0 rgba(229,231,235,.12),0 36px 90px -30px rgba(0,0,0,.92);
  opacity:0; transform:translateY(12px); transition:opacity .45s cubic-bezier(.3,.85,.4,1),transform .45s cubic-bezier(.3,.85,.4,1);
}
#ig.fn-asking .fn-card{ opacity:1; transform:none }
/* a wide window: the card takes the words' column, level with the headline, and the car stays in the open */
@media(min-aspect-ratio:31/20){
  .fn-ask{ align-items:center }
  .fn-card{ width:min(31rem,max(22rem,var(--room-text))) }
}
/* a phone: a sheet from the foot, with the top of the shot left open */
@media(max-width:720px){ .fn-card{ max-height:84svh; border-radius:var(--r-box,4px) } }

.fn-f{ margin:0 0 14px; display:grid; gap:6px }
.fn-f label, .fn-kinds legend{ font-size:15px; font-weight:700; color:var(--ink) }
.fn-f label small{ margin-left:.4em; font-size:13px; font-weight:400; color:var(--ink-3) }
.fn-f input, .fn-f textarea{
  width:100%; min-height:48px; padding:12px 14px; border:1px solid var(--hairline-strong,rgba(229,231,235,.2)); border-radius:10px;
  background:rgba(5,7,13,.6); color:var(--ink); font:inherit; font-size:17px; line-height:1.3;
}
.fn-f textarea{ min-height:72px; resize:vertical }
.fn-f input:focus-visible, .fn-f textarea:focus-visible{ outline:2px solid var(--speed-blue); outline-offset:2px }
.fn-kinds{ margin:0 0 14px; padding:0; min-width:0; border:0; display:grid; gap:8px }
.fn-kinds legend{ padding:0; margin-bottom:6px }
.fn-k{ position:relative; display:block }
.fn-k input{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer }
.fn-k span{
  position:relative; display:block; min-height:44px; padding:11px 14px 11px 42px; border:1px solid var(--hairline-strong,rgba(229,231,235,.2)); border-radius:10px;
  background:rgba(5,7,13,.5); color:var(--ink-2); font-size:15px; line-height:1.35;
}
.fn-k span::before{ content:''; position:absolute; left:14px; top:50%; width:16px; height:16px; margin-top:-8px; border-radius:50%; border:2px solid var(--ink-3) }
.fn-k input:checked + span{ color:var(--ink); border-color:var(--speed-blue); background:rgba(var(--speed-blue-rgb),.12) }
.fn-k input:checked + span::before{ border-color:var(--speed-blue); background:radial-gradient(circle,var(--speed-blue) 0 44%,transparent 48%) }
.fn-k input:focus-visible + span{ outline:2px solid var(--speed-blue); outline-offset:2px }
.fn-signin .fn-kinds, .fn-signin .fn-f--note{ display:none }
/* saved: the form gives way to one next step and the way into the garage */
.fn-card.fn-finished > :not(.fn-done){ display:none }
.fn-done[hidden]{ display:none }
.fn-route{ display:flex; align-items:center; justify-content:center; text-align:center; text-decoration:none }
.fn-route:hover{ color:#fff }
.fn-hp{ position:absolute; left:0; top:0; width:1px; height:1px; opacity:0; pointer-events:none }       /* the honeypot: on the screen, so no check calls it an escape, and nobody sees or reaches it */
.fn-err{ margin:0 0 10px; font-size:15px; line-height:1.4; color:var(--amber) }
.fn-err:empty{ display:none }
.fn-submit{
  display:block; width:100%; min-height:52px; border:0; border-radius:var(--r-ctl,2px); clip-path:polygon(0 0,100% 0,calc(100% - var(--cut,10px)) 100%,0 100%); background:var(--ignition); color:#fff; cursor:pointer;
  font-family:var(--display); font-weight:900; font-size:17px; letter-spacing:.04em; text-transform:uppercase;
}
.fn-submit:hover{ background:#FF6A3A }
.fn-submit:focus-visible{ outline:2px solid #fff; outline-offset:3px }
.fn-submit[disabled]{ opacity:.6; cursor:progress }
.fn-alt{ display:block; margin:10px auto 0; padding:10px 6px; border:0; background:none; color:var(--ink-2); font-size:15px; text-decoration:underline; text-underline-offset:3px; cursor:pointer }
.fn-alt:hover{ color:var(--ink) }
.fn-alt:focus-visible{ outline:2px solid #fff; outline-offset:2px }
.fn-fine{ margin:10px 0 0; font-size:13px; line-height:1.45; color:var(--ink-3) }
.fn-hint{ font-size:13px; line-height:1.4; color:var(--ink-3) }
.fn-fine--indep{ max-width:36rem; margin-top:14px }

@media(prefers-reduced-motion:reduce){
  .fn-card, html.fn #ig.fn-asking .ig-main{ transition:none !important }
  .fn-card{ transform:none }
}