/* Session-aware sign-in widget for /landing-v2. Mirrors the zero-JS-open
   pattern UserMenu.tsx uses on the Next-rendered site: the menu opens on
   hover/focus-within, no click handler needed to toggle it. See
   session-nav.js's header for why this widget is assembled by client JS at
   all (the CSP invariant on this export). */

/* AAI-379: the signed-OUT "Sign in" anchor's border/text color was never
   actually owned by this file. The original a24413e author named it
   `signin-pill` because that string happened, at the time, to already be a
   themed utility class in PoC's own compiled CSS (light: #004e49, dark:
   var(--color-accent-bright)) -- a free ride on someone else's class, not a
   rule this feature ever defined. That class is gone from PoC's current
   source; confirmed directly (grepped app/globals.css and every compiled
   CSS file we ship -- zero matches). Without it the pill had no explicit
   color and just inherited .site-header-inner's own near-white base, which
   is illegible on the light band. Restored here, matching the old values
   exactly, scoped the same way the rest of the header already is (a
   [data-nav-theme] attribute selector, so it's correct regardless of when
   this anchor gets inserted relative to that attribute's own updates). */
.signin-pill { border-color: #004e49; color: #004e49; }

/* AAI-379: same coincidental-utility problem as the color rule above, one
   layer down. `py-[7px]` (padding-block: 7px) was never generated into
   PoC's compiled CSS by this feature -- Tailwind only emits CSS for
   classes it finds scanning PoC's own source files, and this arbitrary
   value exists nowhere there, only as a string inside session-nav.js.
   Confirmed directly: it WAS present in the old compiled CSS (some other,
   now-gone element in that era's PoC source happened to use the same
   arbitrary value), so the pill silently depended on that coincidence too.
   Written out explicitly here instead of trusting another borrowed class.
   The value (7px, vs. the Contact us CTA's own py-2/8px) is deliberate,
   not a mismatch to fix: this pill carries a 1px border and that CTA
   carries none, so 7px + 1px border == 8px + 0px border -- both pills
   land at the exact same 35.5px total height at font-size 13px/line-height
   19.5px. Measured directly via getBoundingClientRect on both. */
.signin-pill { padding-block: 7px; }
.signin-pill:hover { background: color-mix(in oklab, #004e49 8%, transparent); }
[data-nav-theme="dark"] .signin-pill { border-color: var(--color-accent-bright); color: var(--color-accent-bright); }
[data-nav-theme="dark"] .signin-pill:hover { background: color-mix(in oklab, var(--color-accent-bright) 12%, transparent); }

/* Visibility/layout (hidden, lg:inline-flex, flex, shrink-0, ...) comes
   straight from each Sign in anchor's own classes, carried onto the wrapper
   by session-nav.js -- the desktop pill and the drawer row need different
   rules and neither is hard-coded here. This just neutralizes the
   wrapper's own paint (the anchor's border/background/padding/radius
   utilities) so it stays a plain positioned container; the trigger below
   repaints the real visible pill/row on top of it, unchanged. */
.session-user { border: none; background: none; padding: 0; border-radius: 0; }

.session-user-trigger { cursor: pointer; background: none; }

/* AAI-442: the menu used to be `display: none` until hover, sitting 8px below
   the trigger with nothing in between -- the pointer crossing that gap left
   `.session-user`, `:hover` went false and the menu vanished before it could be
   reached. Same defect UserMenu.tsx's panel had (globals.css `.nav-user-menu`,
   fixed there with a `::before` bridge); this copy never got the fix. Two
   parts, both still zero-JS:
     1. `::before` below is an invisible container over the gap, a child of the
        menu, so the hover path from trigger to menu is contiguous.
     2. It now hides with visibility/opacity instead of `display`, and
        `visibility` is delayed on the way OUT only -- a ~150ms grace so a fast
        diagonal drag that clips the edge doesn't snap it shut. */
.session-user-menu {
  display: flex;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease, visibility 0s linear 0.15s;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 50;
  min-width: 200px;
  flex-direction: column;
  padding: 6px;
  border-radius: 10px;
  border: 1px solid var(--color-line, #1c303026);
  background: var(--color-raised, #fff);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}

.session-user-menu::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
}

.session-user:hover .session-user-menu,
.session-user:focus-within .session-user-menu {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.12s ease, visibility 0s linear 0s;
}

/* The drawer's Sign in row sits in a narrow vertical list, not a header
   bar -- render its menu inline under the trigger, not as a dropdown. It
   has no gap to bridge, and must not take up space while closed, so it
   keeps the old display toggle. */
.session-user--drawer .session-user-menu { display: none; }
.session-user--drawer:hover .session-user-menu,
.session-user--drawer:focus-within .session-user-menu { display: flex; }
.session-user--drawer .session-user-menu::before { content: none; }
.session-user--drawer .session-user-menu {
  position: static;
  width: 100%;
  min-width: 0;
  margin-top: 4px;
  box-shadow: none;
}

.session-user-name {
  display: block;
  padding: 8px 10px 2px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-ink, #14161c);
}

.session-user-role {
  display: block;
  padding: 0 10px 8px;
  font-size: 12px;
  color: var(--color-ink-dim, #596667);
}

.session-user-sep { margin: 6px 4px; border: none; border-top: 1px solid var(--color-line, #1c303026); }

.session-user-item {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: none;
  background: none;
  text-align: left;
  font-size: 13px;
  color: var(--color-ink, #14161c);
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
}

.session-user-item:hover { background: var(--color-line, #1c303026); }
.session-user-item:disabled { cursor: not-allowed; opacity: 0.6; }

.session-user-error {
  display: block;
  padding: 6px 10px 2px;
  font-size: 12px;
  color: var(--color-danger, #b5493c);
}

/* ---- AAI-442: back-to-top button (home page only) ----
   Built by session-nav.js after hydration (see insertBackToTop there). Hidden
   until the visitor is about a viewport down the page; fixed bottom-right,
   clear of the notch/home indicator on phones. Deliberately quiet: small, and
   at half opacity until it is hovered or focused. */
.back-to-top {
  position: fixed;
  right: calc(20px + env(safe-area-inset-right, 0px));
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--color-accent-bright, #00e5c8) 45%, transparent);
  background: color-mix(in oklab, var(--color-raised, #0d1516) 82%, transparent);
  color: var(--color-accent-bright, #00e5c8);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s,
    background-color 0.2s ease, color 0.2s ease;
}
.back-to-top.is-visible {
  opacity: 0.5;
  visibility: visible;
  transform: none;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0s,
    background-color 0.2s ease, color 0.2s ease;
}
.back-to-top.is-visible:hover,
.back-to-top.is-visible:focus-visible { opacity: 1; }
.back-to-top:hover {
  background: var(--color-accent-bright, #00e5c8);
  color: var(--color-accent-ink, #04201d);
}
.back-to-top:focus-visible {
  outline: 2px solid var(--color-accent-bright, #00e5c8);
  outline-offset: 3px;
}
.back-to-top svg { width: 14px; height: 14px; }

/* ---- AAI-442: "Why AMSSAI" pinned section ----
   The export's compiled CSS gives each description `grid-row: 1 / -1` to
   span the whole tab list, but the grid declares no explicit rows, so `-1`
   is line 2: every description sat in ROW 1 only. That row grew to the
   description's height (the big empty gap under the first tab) and the text
   centred on that one row instead of the list. Explicit rows make `1 / -1`
   mean what it was written to mean. Four = the four `.lp-why-item`s in the
   export; a re-export that changes the count must change this too. */
.lp-root[data-lp-cinematic] .lp-why-grid { grid-template-rows: repeat(4, auto); }

/* The active tab expands; one accent rail moves with scroll.
   session-nav.js (enhanceWhyTabs) drives both from the pin's scroll
   progress: the rail travels continuously between tabs as you scroll, and at
   the halfway point the next tab and its description get `data-active`.
   GSAP's own timeline (ScrollTrigger "landing-why") also scrubs the marker,
   the tabs' opacity and the descriptions' autoAlpha -- as inline styles, so
   the overrides below need !important. Without them the right-hand text
   cross-faded over most of the scroll (two texts overlapping) instead of
   switching as the tab activates. */
.lp-root[data-lp-cinematic] .lp-why-marker { display: none; }
.lp-root .lp-why-rail { display: none; }
.lp-root[data-lp-cinematic] .lp-why-rail {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  background: var(--color-accent-strong);
  pointer-events: none;
  will-change: transform, height;
}
.lp-root[data-lp-cinematic] .lp-why-tab {
  opacity: 0.42 !important;
  transition: padding 0.22s cubic-bezier(0.45, 0, 0.55, 1), opacity 0.22s ease;
}
.lp-root[data-lp-cinematic] .lp-why-tab[data-active] { opacity: 1 !important; padding-block: 32px; }
.lp-root[data-lp-cinematic] .lp-why-tab dt,
.lp-root[data-lp-cinematic] .lp-why-tab svg {
  transition: font-size 0.22s cubic-bezier(0.45, 0, 0.55, 1), transform 0.22s cubic-bezier(0.45, 0, 0.55, 1);
}
.lp-root[data-lp-cinematic] .lp-why-tab[data-active] dt { font-size: 20px; }
.lp-root[data-lp-cinematic] .lp-why-tab[data-active] svg { transform: scale(1.12); }
.lp-root[data-lp-cinematic] .lp-why-item dd {
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.22s ease, visibility 0s linear 0.22s;
}
.lp-root[data-lp-cinematic] .lp-why-item dd[data-active] {
  opacity: 1 !important;
  visibility: visible !important;
  transition: opacity 0.22s ease, visibility 0s linear 0s;
}

/* ---- AAI-442: Platform timeline nodes light up as the line reaches them ----
   `data-lit` is set by session-nav.js (lightTimelineNodes) once the spine
   fill's leading edge touches a node; 01 is lit from the start. Same colour as
   the fill itself. The compiled rule already transitions border-color. */
.lp-root .lp-node .lp-row-index[data-lit] {
  border-color: var(--color-accent-strong);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-accent-strong) 16%, transparent);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, color 0.42s var(--ease-out, ease);
}

@media (prefers-reduced-motion: reduce) {
  .back-to-top,
  .back-to-top.is-visible,
  .session-user-menu,
  .lp-root[data-lp-cinematic] .lp-why-tab,
  .lp-root[data-lp-cinematic] .lp-why-tab dt,
  .lp-root[data-lp-cinematic] .lp-why-tab svg,
  .lp-root[data-lp-cinematic] .lp-why-item dd,
  .lp-root .lp-node .lp-row-index[data-lit] { transition: none; }
}

/* One synchronous layout read in enhanceWhyTabs (measureSlots); never painted. */
.lp-root .lp-why-grid.is-measuring .lp-why-tab,
.lp-root .lp-why-grid.is-measuring .lp-why-tab dt,
.lp-root .lp-why-grid.is-measuring .lp-why-tab svg { transition: none; }