/* Tripp sign-in / sign-up -- the pared-back doors (Kasey, 2026-09-10: she
   picked the full-bleed city direction out of four mocks, then "i want it to
   be more minimal" and "too many words").

   What the doors were until today: a two-track grid, form left, the product
   mid-trip right -- New York under a scrim with two glass notes and the Tokyo
   itinerary -- plus an eyebrow, a lead, the Google disclosure, the stance
   line and the legal row under the form. What they are now: the photograph IS
   the page, and on it sit four things -- the mark, one headline, one button,
   one link -- with the legal row at the foot. Everything else is gone.

   The Google data sentence went with them. The door asks for `openid email
   profile` only (welcome-auth.js), which is not a sensitive scope, so what
   verification wants is a privacy policy reachable from the page rather than
   a paragraph beside the button; it now reads on /privacypolicy under
   "Account information", and Privacy is a link in the foot.

   Loads AFTER static/css/landing.css and adds only these two pages; the
   tokens, the brand lockup and .eyebrow come from that sheet, so the front
   door and the doors behind it cannot drift. static/js/auth-page.js carries
   ?next across the switch links; sign-in itself is welcome-auth.js. */

/* No grid tracks left to hold the page open: the form is the only column and
   the photograph is behind it, so the min-content floor that scrolled a
   390px phone sideways on 2026-08-03 has nothing to hold. */
.door { position: relative; min-height: 100vh; overflow: hidden; background: #100e0c; --door-h: 72px; }
body[data-page="signup"] .door { --door-h: 64px; }

/* ---- the photograph, edge to edge ---- */
.door-photo { position: absolute; inset: 0; overflow: hidden; }
.door-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 52%; filter: saturate(1.06) contrast(1.02); }
/* One scrim, not two. It darkens the reading side and lets the far side stay
   a photograph -- the whole point of the direction Kasey picked. */
.door-scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(13,12,10,0.94) 0%, rgba(13,12,10,0.84) 30%, rgba(13,12,10,0.4) 64%, rgba(13,12,10,0.06) 100%); }

/* ---- the four things on it ---- */
.door-form { position: relative; z-index: 1; box-sizing: border-box; min-height: 100vh; display: flex; flex-direction: column; padding: 48px 96px 44px; }
.door-form .nav-brand { align-self: flex-start; }
.door-centre { flex: 1; display: flex; align-items: center; padding: 48px 0; }
.door-col { width: 100%; max-width: 620px; display: flex; flex-direction: column; align-items: flex-start; }
.door-h { margin: 0; font-size: var(--door-h); font-weight: 300; letter-spacing: -0.048em; line-height: 1.02; color: var(--bone); max-width: 9.2em; text-wrap: balance; }
.door-switch { margin: 30px 0 0; font-size: 15px; font-weight: 300; letter-spacing: 0.015em; }
.door-switch a { color: var(--champagne); border-bottom: 1px solid rgba(207,187,144,0.4); padding-bottom: 2px; }
.door-switch a:hover { color: #e0cfa8; border-color: #e0cfa8; }

/* the one action on the page: the design's button, 430x54 under a hairline.
   The face is decoration and says so (aria-hidden); welcome-auth.js drops the
   page's OWN anchor to Google's OIDC authorize page into #gsi-button at
   inset:0, and that anchor is the accessible control (2026-08-31: three
   configurations of Google's widget died silently in the click path, so
   nothing of Google's script is in it any more). Over a photograph the fill
   is the raised ink at 0.9 with a blur behind it, so the button reads as one
   solid object wherever the picture is bright. */
.g-btn {
  position: relative; margin-top: 56px; width: min(430px, 100%); height: 54px; box-sizing: border-box;
  border: 1px solid var(--hairline-strong); background: rgba(20,18,15,0.9);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: border-color 0.2s ease;
}
.g-btn:hover, .g-btn:focus-within { border-color: rgba(207,187,144,0.6); }
.g-btn:focus-within { outline: 1px solid var(--champagne); outline-offset: 2px; }
.g-face { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 14px; font-size: 17px; font-weight: 500; letter-spacing: 0.005em; color: var(--bone); pointer-events: none; }
.g-face svg { display: block; flex: none; }
/* Apple's door sits under Google's as its equal: same size, same face. Apple
   asks for that of any app that offers another sign-in beside its own. */
.g-btn.a-btn { margin-top: 12px; }
.g-btn.a-btn[hidden] { display: none; }
.gsi-slot { position: absolute; inset: 0; }
#gsi-button { position: absolute; inset: 0; }
/* NOTHING IN THE SLOT MAY NAME A WIDTH THE COLUMN DIDN'T GIVE IT. The anchor
   at inset:0 has none of its own, but this cap is what held when Google's
   widget did: measured on prod 2026-08-03, the pane was correctly 390 and the
   widget still laid its iframe out at 400, so the document stayed 438 wide
   inside a 390 viewport. Kept against the day a widget returns to the slot;
   tests/test_phone_sweep_2026_08_03_css.py pins the rule and
   tests/test_auth_pages_wear_the_landing.py drops the recorded shape in. */
.gsi-slot, .gsi-slot div, .gsi-slot iframe { max-width: 100% !important; }
#gsi-button > div { position: absolute; inset: 0; width: 100% !important; height: 100% !important; opacity: 0.001; }
#gsi-button > div div { width: 100% !important; height: 100% !important; margin: 0 !important; }
/* Google's script never arrived (content blocker), or the nonce fetch failed:
   welcome-auth.js writes a <p class="gsi-fallback"> into the slot; the face
   steps aside for it. */
.gsi-fallback { margin: 0; font-size: 14px; font-weight: 300; line-height: 1.5; color: #e8c879; max-width: 42ch; }
.g-btn:has(.gsi-fallback) { height: auto; border: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.g-btn:has(.gsi-fallback) .g-face { display: none; }
.g-btn:has(.gsi-fallback) .gsi-slot, .g-btn:has(.gsi-fallback) #gsi-button { position: static; }

/* ---- the foot: the legal row, and nothing else ---- */
.door-foot { display: flex; }
.door-legal { display: flex; flex-wrap: wrap; gap: 8px 30px; font-weight: 500; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; }
.door-legal a { color: var(--grey-dim); }
.door-legal a:hover { color: var(--bone); }
/* The address reads as an address, not a shouted label. */
.door-legal a.door-mail { text-transform: none; letter-spacing: 0.04em; }

/* ---- narrow screens: the photograph stays, the scrim turns vertical ---- */
@media (max-width: 1100px) and (min-width: 881px) {
  .door { --door-h: clamp(42px, 5vw, 72px); }
  body[data-page="signup"] .door { --door-h: clamp(38px, 4.4vw, 64px); }
  .door-form { padding: 40px 48px 36px; }
}
@media (max-width: 880px) {
  /* A sideways gradient leaves a 390px phone's reading side too bright, and
     an even top-to-bottom wash drank the whole picture (the Maldives came
     out grey). So the phone anchors instead: the type drops to the foot of
     the screen and the scrim is heaviest under it, which leaves the top
     two-thirds of the photograph at nearly full strength. */
  .door { --door-h: clamp(36px, 9.6vw, 52px); }
  body[data-page="signup"] .door { --door-h: clamp(34px, 8.8vw, 46px); }
  .door-scrim { background: linear-gradient(0deg, rgba(13,12,10,0.96) 0%, rgba(13,12,10,0.9) 30%, rgba(13,12,10,0.55) 58%, rgba(13,12,10,0.42) 100%); }
  .door-form { padding: 24px 24px 32px; }
  .door-centre { align-items: flex-end; padding: 36px 0 30px; }   /* the link clears the legal row */
  .g-btn { margin-top: 40px; }
  .door-legal { font-size: 11px; gap: 8px 22px; }
}