/* /login and /signup, the confirmed sign-in design (Lucas, 2026-11-07, "confirm these": sign-in 9 in
   design-picks-redesign.html). Form on the left in Attio's structure; on the right a grainy sky panel with the landing
   hero line over a scaled copy of the real board (company cards, the board's halo fit mark, Apply). The form itself is
   still auth-form.js; this file only restyles it on these two pages (body.ap9) and lays out the page. */
body.ap9 { display: block; min-height: 100vh; min-height: 100dvh; padding: 0; background: #fff; color: #0A1B31; font-family: Inter, system-ui, sans-serif; }
.ap { display: flex; min-height: 100vh; min-height: 100dvh; }
.ap-l { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; padding: 96px 32px 72px; }
.ap-word { position: absolute; top: 28px; left: 32px; display: inline-flex; align-items: center; gap: 8px; color: #0A1B31; font-family: Geist, Onest, sans-serif; font-size: 22px; font-weight: 600; letter-spacing: -.05em; text-decoration: none; }
.ap-word img { width: 26px; height: 26px; border-radius: 7px; }
.ap-col { width: 100%; max-width: 360px; }
.ap-r { position: relative; isolation: isolate; overflow: hidden; flex: 1; display: flex; flex-direction: column; align-items: center; margin: 14px; padding: 64px 36px 0; border-radius: 22px; text-align: center;
  background: linear-gradient(180deg, #F4F7FE 0%, #E6EEFD 38%, #DCE6FC 62%, #E9E4FB 100%); }
.ap-r::before { content: ''; position: absolute; inset: -20%; z-index: -2; background: radial-gradient(45% 35% at 25% 30%, rgba(144,200,249,.55), transparent 70%), radial-gradient(40% 35% at 80% 55%, rgba(167,155,244,.38), transparent 70%), radial-gradient(35% 30% at 40% 85%, rgba(255,255,255,.9), transparent 70%); filter: blur(10px); }
.ap-r::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .42; mix-blend-mode: multiply; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 -.12'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 180px; }
.ap-eb { color: #475467; font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.ap-h { margin: 10px 0 0; color: #0A1B31; font-family: Onest, Inter, sans-serif; font-size: 34px; font-weight: 600; letter-spacing: -.03em; line-height: 1.15; }
.ap-shot { position: absolute; left: 44px; right: -1px; bottom: 0; height: 58%; overflow: hidden; border-radius: 14px 0 0 0; background: rgba(255,255,255,.92); box-shadow: 0 0 0 1px rgba(12,27,51,.06), 0 -4px 40px rgba(12,27,51,.08); text-align: left; }
.ap-bar { display: flex; gap: 6px; padding: 12px 14px; }
.ap-bar i { width: 9px; height: 9px; border-radius: 50%; background: #DADDE3; }
/* the board, measured from www.useno.app/internships and shown at 72% */
.bd { zoom: .72; padding: 6px 22px 0; font-family: Onest, Inter, sans-serif; }
.bd-tabs { display: flex; gap: 26px; margin-bottom: 18px; border-bottom: 1px solid #EAECF0; color: #5B6772; font-size: 14.5px; font-weight: 500; }
.bd-tabs span { padding: 0 2px 13px; }
.bd-tabs .on { color: #0A1B31; box-shadow: inset 0 -2px 0 #0A1B31; }
.co { margin-bottom: 16px; padding-bottom: 8px; border: 1px solid #E5E7EB; border-radius: 12px; background: #fff; }
.co-h { display: flex; align-items: center; gap: 14px; padding: 22px 24px 12px; }
.co-h img { width: 44px; height: 44px; border-radius: 10px; }
.co-h b { color: #0C1B33; font-family: Geist, Onest, sans-serif; font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.co-new { position: relative; overflow: hidden; padding: 4px 10px; border-radius: 6px; background: radial-gradient(90% 140% at 0% 100%, #C9DAFF 0%, transparent 65%), radial-gradient(90% 140% at 100% 0%, #D9D2FB 0%, transparent 65%), #E4ECFF; box-shadow: inset 0 0 0 1px rgba(255,255,255,.6); color: #1D3F99; font-size: 12px; font-style: normal; font-weight: 600; }
.co-r { display: flex; align-items: center; gap: 12px; margin: 0 10px; padding: 15px 14px; }
/* the board's fit mark: fs 33 + fx 81, "Halo ring, clear centre" (.glw.g81) */
.co-fit { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: radial-gradient(circle, transparent 52%, rgba(144,200,249,.55) 60%, rgba(167,155,244,.4) 68%, transparent 78%); color: #0A1B31; font-family: Geist, Onest, sans-serif; font-size: 14px; font-weight: 600; letter-spacing: -.02em; }
.co-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.co-t b { color: #0C1B33; font-size: 14.5px; font-weight: 600; }
.co-t span { color: #5B6772; font-size: 13px; }
.co-ago { flex: none; color: #5B6772; font-size: 12px; font-weight: 500; }
.co-ap { flex: none; padding: 7px 14px; border-radius: 8px; background: #111418; color: #fff; font-size: 12.5px; font-weight: 600; }

/* the form (auth-form.js), restyled: centred title, white Google pill, OR, filled pill fields, navy pill with a plain orb dot */
body.ap9 .uauth-head { display: block; margin: 0 0 22px; text-align: center; }
body.ap9 .uauth-head .uauth-mark { display: none; }
body.ap9 .uauth-title.uauth-title { color: #0A1B31; font-family: Inter, system-ui, sans-serif; font-size: 24px; font-weight: 600; letter-spacing: -.03em; }
body.ap9 .uauth-google.uauth-google { height: 48px; border: 0; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px #E5E7EB, 0 1px 2px rgba(16,24,40,.05); color: #0A1B31; font: 500 14.5px Inter, system-ui, sans-serif; }
body.ap9 .uauth-google.uauth-google:hover { background: #F9FAFB; }
body.ap9 .uauth-or.uauth-or { margin: 16px 0; color: #98A2B3; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; justify-content: center; }
body.ap9 .uauth-input.uauth-input { height: 48px; padding: 0 20px; border: 1px solid transparent; border-radius: 999px; background: #F3F4F6; box-shadow: none; color: #0A1B31; font-size: 14.5px; }
body.ap9 .uauth-input.uauth-input:focus { background: #fff; border-color: #C7D2FE; box-shadow: 0 0 0 4px rgba(85,122,236,.12); }
body.ap9 .uauth-eye { height: 48px; border-radius: 0 999px 999px 0; }
body.ap9 .uauth-submit.uauth-submit { display: flex; align-items: center; justify-content: center; gap: 10px; height: 48px; margin-top: 6px; border-radius: 999px; background: #0A1B31; font: 500 14.5px Inter, system-ui, sans-serif; transition: background .18s ease, transform .18s ease; }
body.ap9 .uauth-submit.uauth-submit::before { content: ''; flex: none; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 8%, transparent 30%), conic-gradient(#557AEC, #90C8F9, #A79BF4, #F2A7C8, #557AEC); }
body.ap9 .uauth-submit.uauth-submit:hover { background: #1E3352; }
body.ap9 .uauth-submit.uauth-submit:active { transform: scale(.98); }
body.ap9 .uauth-swap { margin-top: 16px; text-align: center; color: #475467; font-size: 13px; }
body.ap9 .uauth-swap button, body.ap9 .uauth-swap a { color: #0A1B31; font-weight: 600; text-decoration: none; }
body.ap9 .uauth-legal { text-align: center; }

@media (max-width: 900px) {
  .ap-r { display: none; }
  .ap-l { padding: 88px 20px 48px; }
  .ap-word { left: 20px; }
}

/* The pop-up's extras stay in the pop-up (auth-form.js skips them here too): no email gate, no drop card. */
body.ap9 .si-promo, body.ap9 .si-email { display: none !important; }
body.ap9 .si-gated .uauth-fields { display: flex !important; flex-direction: column; }
body.ap9 .si-gated .uauth-or { display: flex !important; }