/* ============================================================================
   COOKIE BANNER, SIGNED-OUT NON-MARKETING PAGES. ST-41 rework, 2026-10-01.
   WHY THIS SHEET EXISTS: the banner's look (P3-13b, Option C, the white pill) lives in marketing-interaction.css,
   which only the (marketing) layout links. ST-41 now also mounts the SAME CookieBanner on the signed-out pages of the
   (seeker), (app) and (employer) root layouts (/jobs, /auth, /auth/sign-up, /login, /employer/auth/..., see
   SignedOutCookieBanner.tsx). Linking marketing-interaction.css there would pull its `.page a` / `.page button`
   rules into portal frames that were never measured against them, so only the banner's own rules are carried.
   ⛔ THIS IS A MIRROR, NOT A SECOND DESIGN. Every rule below is copied VERBATIM from marketing-interaction.css
   (the P3-13b block, the (0,4,0) press states, EG-23 (c)'s link hit box) and the transition rule is that sheet's
   RESIDUE rule with only the cookie selectors kept. `cookieBannerSheet.test.ts` fails if any rule here is not
   present, byte for byte after whitespace folding, in marketing-interaction.css, and if any `[data-cookie-banner]`
   rule there is missing here. Change the look THERE first, then mirror it here.
   ⚠ Not linked by the (marketing) layout: it already has the originals, and a second copy would only re-assert them.
   ⚠ A <link>ed sheet: a value edit is live on save; the new <link> tags in the three layouts need a rebuild. */
[data-cookie-banner] {
  position: fixed; z-index: 50; bottom: 24px;
  /* centred without a transform: equal insets + auto margins centre a fixed box of definite width, and keep the
     text off a fractional translate. `100% - 48px` = 24px of air on each side, as the design's `.b-c`. */
  left: 0; right: 0; margin-inline: auto;
  width: min(960px, calc(100% - 48px)); box-sizing: border-box;
  background: #FFFFFF; color: #33343A;
  border: 1px solid #E7E9F2; border-radius: 999px;
  box-shadow: 0 10px 30px rgba(16, 24, 40, .14);
  /* the design's `padding:10px 10px 10px 28px`, written LOGICALLY so the wide side is the side the copy starts
     on: on the ar plane (dir="rtl" on this element) the 28px lands on the right, the buttons on the left. */
  padding-block: 10px; padding-inline: 28px 10px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 20px;
}
/* `flex:1 1 0` + `min-width:0` makes the copy take whatever the buttons leave, on the SAME line; `flex-wrap`
   exists only so the failure line (`.cb-failed`, basis 100%) can drop to its own row. */
[data-cookie-banner] .cb-copy {
  position: relative; z-index: 1; flex: 1 1 0%; min-width: 0;
  margin: 0; font-size: 14px; line-height: 1.45;
}
[data-cookie-banner] .cb-failed {
  position: relative; z-index: 1; flex: 0 0 100%;
  margin: 0; font-size: 14px; line-height: 1.45;
  /* the alert ink the site's other light-ground forms already use (WaitlistForm, NewsletterSignup) — not minted. */
  color: #D0342C;
}
.cb-link {
  color: #2164F4; font-weight: 600;
  text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px;
}
.cb-link:hover { color: #143C96; }
/* TWO EQUAL COLUMNS, sized by the wider label: Decline can never be the smaller target, in any locale. */
[data-cookie-banner] .cb-btns {
  position: relative; z-index: 1; flex: none;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px;
}
[data-cookie-banner] .cb-decline,
[data-cookie-banner] .cb-accept {
  font: inherit; font-size: 15px; font-weight: 600; line-height: 1.2;
  min-height: 44px; min-width: 112px; padding: 10px 20px;
  border: 1px solid; border-radius: 999px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
[data-cookie-banner] .cb-decline { background: #FFFFFF; color: #1D1D1F; border-color: #C9CEDB; }
[data-cookie-banner] .cb-accept { background: #2164F4 !important; color: #FFFFFF; border-color: #2164F4; }
[data-cookie-banner] .cb-decline:hover:not(:disabled) { background: #F7F8FB; border-color: #AEB5C5; }
/* Option C's fill step, PLUS EG-23's glow — the glow was blind-verified and is kept rather than silently undone. */
[data-cookie-banner] .cb-accept:hover:not(:disabled) {
  background: #1A54D6 !important; border-color: #1A54D6; box-shadow: 0 10px 28px rgba(33, 100, 244, .35);
}
.cb-link:focus-visible,
[data-cookie-banner] .cb-decline:focus-visible,
[data-cookie-banner] .cb-accept:focus-visible { outline: 2px solid #2164F4; outline-offset: 2px; }

/* THE SPOTLIGHT LAYER — `<ArrowSpot/>`, the pill's first child. The pinned `.arrow-spot` (marketing.css:428, a
   WHITE 32px raster under a 96px mask, drop-shadowed for a blue band) is re-dressed here for a WHITE ground with
   option 1's own values; (0,2,0) outranks the pin's (0,1,0) on every property named. `border-radius:inherit`
   keeps the tile inside the pill's rounded ends without an `overflow:hidden` that would clip the focus rings.
   `display:none` by default: the reveal is a POINTER effect, so it exists only where a hovering pointer does
   (and never on the phone card, where a tap must not paint arrows) — the media query below turns it on. */
[data-cookie-banner] .arrow-spot {
  display: none; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  border-radius: inherit;
  opacity: 0; transition: opacity .25s ease;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 1000 1000' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M238 45 L675 482 L675 160 L960 160 L960 960 L150 960 L150 675 L482 675 L45 238 Z' fill='none' stroke='%232164F4' stroke-width='40' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 20px 20px repeat;
  /* `--mx/--my` are PHYSICAL px from the pill's left/top edge (ArrowSpot measures clientX - rect.left), and the
     mask is physical too, so the ar plane needs no mirroring: nothing here flips. */
  -webkit-mask: radial-gradient(circle 70px at var(--mx, -300px) var(--my, -300px), #000 0%, #000 30%, transparent 74%);
          mask: radial-gradient(circle 70px at var(--mx, -300px) var(--my, -300px), #000 0%, #000 30%, transparent 74%);
  filter: opacity(.55);
}
/* re-stated at (0,3,0): the (0,2,0) `opacity:0` above would otherwise beat the pin's `.arrow-spot.hot{opacity:1}`. */
[data-cookie-banner] .arrow-spot.hot { opacity: 1; }
@media (hover: hover) and (min-width: 641px) {
  [data-cookie-banner] .arrow-spot { display: block; }
}
/* the spotlight still FOLLOWS the pointer (position, not motion); only the fade goes. The pin's own reduced-motion
   rule is (0,1,0) and would lose to the (0,2,0) transition above, so it is re-stated at matching weight. */
@media (prefers-reduced-motion: reduce) {
  [data-cookie-banner] .arrow-spot { transition: none; }
}

/* PHONE: Option C's `@media (max-width:640px)` card — 12px from the left, right and bottom edges, 22px corners,
   copy above two equal buttons that span the card at 48px (the thumb's floor). */
@media (max-width: 640px) {
  [data-cookie-banner] {
    bottom: 12px; width: calc(100% - 24px); border-radius: 22px;
    flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 10px; padding: 12px 14px;
  }
  /* DQ1-SHELL (design QA d4-covers-control, 37% of a 320px viewport): COMPACT card. Same copy, same two equal buttons;
     only the air is trimmed (padding 18 -> 12/14, gap 14 -> 10), the copy steps 15 -> 14px at 1.4. The buttons STAY at 48px
     (the D4 thumb floor, pinned by SignedOutCookieBanner.affiliate.test.tsx). */
  [data-cookie-banner] .cb-copy { flex: none; font-size: 14px; line-height: 1.4; }
  [data-cookie-banner] .cb-failed { flex: none; }
  [data-cookie-banner] .cb-btns { width: 100%; }
  [data-cookie-banner] .cb-decline,
  [data-cookie-banner] .cb-accept { min-width: 0; min-height: 48px; }
}

/* ROW 155 (OWED-101-A), RB-70 2026-10-09: THE PILL IS SCREEN CHROME, NOT PAGE CONTENT: IT DOES NOT PRINT.
   MEASURED BEFORE on the live demo (ledger-verify-B.json row 71/155, emulateMedia print + page.pdf, / and /ar @1440):
   the region computes display:flex, visible, 66px tall under print, and its copy "We record your choice about
   cookies…" is on PDF pages 1 AND 2. A fixed box under paged media repeats on every page fragment, so a consent prompt
   nobody can press ends up stamped on the paper. `display:none` takes it out of the print render only; screen is
   untouched (this whole rule sits under `@media print`). (0,1,0) like the base rule and LATER in the sheet, so it wins
   without `!important`. Mirrored byte for byte into cookie-banner.css (SignedOutCookieBanner.test.ts). */
@media print {
  [data-cookie-banner] { display: none; }
}

[data-cookie-banner] .cb-accept:active:not(:disabled) { background: #143C96 !important; border-color: #143C96; box-shadow: none; }
[data-cookie-banner] .cb-decline:active:not(:disabled) { background: #E7E9F2; border-color: #AEB5C5; }
.cb-link { display: inline-block; padding: 12px 0; margin: -12px 0; }
:where(.cb-accept, .cb-decline, .cb-link) {
  transition: background-color .15s ease, color .15s ease, border-color .15s ease,
              box-shadow .15s ease, opacity .15s ease;
}
@media (prefers-reduced-motion: reduce) {
  :where(.cb-accept, .cb-decline, .cb-link) { transition: none; }
}

/* PHONE CLEARANCE ON THE SIGN-IN / SIGN-UP SCREENS (Zach P10 item 5, 2026-10-28). MEASURED on d5500c352f, WebKit + Chromium, 390x844 and 360x740:
   on the seeker, employer, recruiter and affiliate auth screens the card sits low in a viewport-tall shell, the 187px phone card covers its
   Sign up / Sign in button or the terms links, and the page cannot scroll because it ends exactly at the viewport. This sheet is linked only by the
   portal layouts (the marketing layout does not link it), so P10-32 (the MARKETING page does not grow while the banner is up) is untouched.
   The shell gets bottom padding only while the banner exists: it grows only when the card needs the room, so a screen that already
   clears the banner does not start to scroll, and answering the banner takes the room away again. 248px > the tallest bar (longest locale copy). */
@media (max-width: 760px) {
  html:has([data-cookie-banner]) :is(.eauth-body, .auth-body, .cauth) { padding-bottom: 248px; }
}

/* DQ1-SHELL (design QA D4 d4-covers-control: the pill covered the page's last primary action, e.g. "Subscribe to continue",
   with no way to scroll it clear). PORTAL-ONLY, like the auth-shell rule above: while the banner exists the page ends with
   the room the pill floats over (`--cookie-banner-room`, published by CookieBanner.tsx from the pill's measured top edge), so
   the last row scrolls clear of it; answering the banner removes the room. The auth shells keep their own 248px rule (they are
   viewport-tall shells), so they are excluded here to avoid padding twice. The marketing sheet never carries this rule (P10-32). */
html:has([data-cookie-banner]) body:not(:has(.eauth-body, .auth-body, .cauth)) { padding-bottom: var(--cookie-banner-room, 0px); }
/* The auth shells keep their 248px phone rule above; from 761px up (measured 1280x800 on the employer sign-up: the viewport-tall shell cannot
   scroll, and the pill covered "Sign up", the terms and the privacy links, 3 of 3 controls) they take the same published room on <body>. */
@media (min-width: 761px) {
  html:has([data-cookie-banner]) body:has(.eauth-body, .auth-body, .cauth) { padding-bottom: var(--cookie-banner-room, 0px); }
}