/* ai2-chrome.css -- ORDER 004a. The shared chrome: sticky topbar stack,
   beta strip, header. Every appearance declaration here was RELOCATED from
   the inline style attributes on web/landing.html:126-171, byte-identical
   except for the token substitutions ruled in ORDER 004a. Nothing was
   authored except the TML lockup (landing has no such mark) and the
   .ai2-topbar-stack rule. Landing itself still carries its own inline copy
   until ORDER 005 converts it. */

/* ORDER 008 -- the chrome height vars MOVED here from static/style.css.
   MEASURED CAUSE: landing/news/news_article/constellation have their own <head>
   and never load style.css, so --ai2-strip-h was undefined there and
   .ai2-beta-strip-link fell back to height:auto -- a visibly short strip.
   They belong with the chrome, not in the global sheet.
   --ai2-strip-h is CONSUMED by .ai2-beta-strip-link, matching landing's old
   --beta-h:66px. Header 66px = 14+14 padding + 36px tallest child + 1px border.
   Sum 132px is what the old landing.html recorded as MEASURED at 1440x900. */
:root { --ai2-header-h: 66px; --ai2-strip-h: 66px; --ai2-chrome-h: calc(var(--ai2-header-h) + var(--ai2-strip-h)); }
html { scroll-padding-top: var(--ai2-chrome-h); }

/* ---------------------------------------------------------- STICKY STACK */
/* Ported from landing's #topbar-stack. Sticky, not fixed: it occupies flow
   space, so no page needs a body padding-top offset. */
.ai2-topbar-stack { position: sticky; top: 0; z-index: 80; }

/* ------------------------------------------------------------- BETA STRIP */
.ai2-beta-strip {
  background: rgba(46,48,48,.78);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border-bottom: 1px solid rgba(20,22,22,.4);
}
.ai2-beta-strip-inner {
  max-width: 1200px; margin: 0 auto; padding: 0 40px;
  display: flex; align-items: center; justify-content: space-between;
}
.ai2-beta-strip-link {
  flex: 1 1 auto; min-width: 0; height: var(--ai2-strip-h);
  box-sizing: border-box; display: flex; align-items: center;
  justify-content: space-between; gap: 24px; text-decoration: none;
}
.ai2-beta-strip-lede {
  display: inline-flex; align-items: baseline; gap: 14px; flex: 0 1 auto;
}
.ai2-beta-strip-title {
  font-family: 'Khand','Roboto Condensed','Arial Narrow',system-ui,sans-serif;
  font-weight: 700; font-size: 31px; line-height: 1; letter-spacing: .01em;
  color: var(--tml-surface-raised); white-space: nowrap;
}
.ai2-beta-strip-text {
  font-size: 15.5px; line-height: 1; color: rgba(251,253,253,.8);
  white-space: nowrap;
}
.ai2-beta-strip-cta {
  flex: none; display: inline-flex; align-items: center; gap: 8px;
  height: 30px; box-sizing: border-box; line-height: 1; padding: 0 14px;
  background: var(--tml-primary); color: var(--tml-surface-raised);
  font-size: 12.5px; font-weight: 700; letter-spacing: .03em;
  border-radius: 6px; white-space: nowrap;
}
.ai2-beta-strip-cta-arrow {
  font-family: 'Khand','Roboto Condensed','Arial Narrow',system-ui,sans-serif; font-weight: 700; font-size: 15px;
}

/* ----------------------------------------------------------------- HEADER */
.ai2-header {
  background: rgba(227,229,229,.9);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--tml-border);
}
.ai2-header-inner {
  max-width: 1200px; margin: 0 auto; padding: 14px 40px;
  display: flex; align-items: center;
  /* ORDER 007 -- THREE children now (left / nav / right). space-between spread
     them to the edges and left the nav marooned mid-header; with the nav gone
     below 1120px it also stranded the right group. gap + margin-left:auto on
     the nav keeps left pinned left and nav+right travelling together right,
     and it degrades correctly when the nav is display:none. */
  /* ORDER 011 -- 20px measured as the ACTUAL gap between the TML lockup and the
     nav at 1200/1280/1440, because the auto margins hand their free space to
     the nav->right gap and this is the only floor. 28px gives the required
     24px minimum with headroom at the narrow end. */
  gap: 28px;
}
.ai2-header-nav { margin-left: auto; }
.ai2-header-right {
  display: flex; align-items: center; gap: 12px;
  margin-left: auto; flex: none;
}
/* The 1120px collapse targets .ai2-header-nav ONLY. .ai2-header-right is never
   hidden at any width -- that was the ORDER 007 defect. */
.ai2-header-nav:not([hidden]) ~ .ai2-header-right { margin-left: 0; }
.ai2-header-left { display: flex; align-items: center; gap: 16px; }

/* MENU pill */
/* ORDER 008 -- MEASURED. Pico sets [type=button]{margin-bottom:var(--pico-spacing)}
   = 16px, and this pill is <button type="button">. base.html loads Pico;
   public_base.html does not -- which is why the defect appeared only on
   base.html pages. The 16px margin made the button's MARGIN box 52px, that set
   .ai2-header-left to 52px, and centring a 52px margin box put the 36px border
   box 8px high: measured centre 32.00 against 40.00 for every sibling. 16/2=8.
   The profile pill already carried margin:0; the MENU pill did not. */
.ai2-menu-btn {
  margin: 0;
  height: 36px; box-sizing: border-box; border: none;
  background: var(--tml-primary); padding: 0 13px;
  display: inline-flex; justify-content: center; align-items: center;
  gap: 9px; border-radius: 6px; cursor: pointer; line-height: 1;
}
.ai2-menu-btn-bars { display: flex; flex-direction: column; gap: 3.5px; }
.ai2-menu-btn-bar {
  width: 17px; height: 2px; background: var(--tml-surface-raised);
  display: block; border-radius: 6px;
}
.ai2-menu-btn-label {
  font-family: 'Khand','Roboto Condensed','Arial Narrow',system-ui,sans-serif;
  font-weight: 600; font-size: 13px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--tml-surface-raised);
}

/* AI2 brand mark */
/* ORDER 005 A2 -- baseline, not center. A replaced element's baseline is its
   bottom margin edge (CSS2 10.8.1), so `baseline` lands the logo's bottom on
   the INSIGHTS baseline exactly as asked; flex-end was not needed. */
.ai2-brand { display: flex; align-items: baseline; gap: 11px; }
.ai2-brand-mark { height: 28px; width: auto; display: block; }
.ai2-brand-word {
  font-family: 'Khand','Roboto Condensed','Arial Narrow',system-ui,sans-serif;
  font-weight: 600; font-size: 16px; letter-spacing: .2em;
  color: var(--tml-ink);
}

/* ORDER 024 -- THE MEDIA LEAGUE LOCKUP RULES ARE REMOVED, along with the
   markup that used them. The four class names (tml lockup, its rule, its
   mark, its word) were grepped this turn: exactly two occurrences each,
   both in this file and web/_site_header.html, nothing else. The class
   names are written without their leading dots on purpose, so a selector
   audit over this file does not match a comment. TML is credited on
   /get-advice instead. */

/* Nav */
.ai2-header-nav { display: flex; align-items: center; gap: 24px; }
/* ORDER 005 A5 -- Dashboard is last in nav_top(); this pushes it away from the
   marketing cluster so it reads as part of the identity group on the right. */
.ai2-header-link-dash { margin-left: 12px; }
.ai2-header-link, .ai2-universe-trigger {
  font-size: 12px; font-weight: 600; letter-spacing: .05em;
  color: var(--tml-ink-body);
}

/* ORDER 005 A2 -- static/style.css:110 already sets a{text-decoration:none};
   :111 sets a:hover{text-decoration:underline}. That hover rule is what put a
   link underline under INSIGHTS. Overridden scoped to the chrome only -- the
   global anchor behaviour elsewhere is untouched. */
.ai2-brand, .ai2-brand:hover,
.ai2-header-link, .ai2-header-link:hover,
.ai2-universe-trigger, .ai2-universe-trigger:hover,
.ai2-btn-ghost, .ai2-btn-ghost:hover,
.ai2-btn-solid, .ai2-btn-solid:hover,
.ai2-beta-strip-link, .ai2-beta-strip-link:hover,
.ai2-universe-item, .ai2-universe-item:hover { text-decoration: none; }

/* Auth buttons */
.ai2-btn-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  height: 36px; box-sizing: border-box; line-height: 1;
  font-size: 12px; font-weight: 700; letter-spacing: .03em;
  color: var(--tml-primary-press); background: transparent;
  border: 1px solid var(--tml-border); padding: 0 16px; border-radius: 6px;
}
.ai2-btn-solid {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 36px; box-sizing: border-box; line-height: 1;
  font-size: 12px; font-weight: 700; letter-spacing: .03em;
  color: var(--tml-surface-raised); background: var(--tml-primary);
  padding: 0 17px; border-radius: 6px;
}

/* ------------------------------------------------------------- RESPONSIVE */
/* Relocated from landing's style block, renamed to the shared classes:
   landing:21 .beta-meta -> .ai2-beta-strip-text
   landing:22 #beta-strip a -> .ai2-beta-strip-link
   landing:54 + :56 + :71 .ai2-hdr-nav -> .ai2-header-nav */
@media (max-width:1140px) { .ai2-beta-strip-text { display:none; } }
@media (max-width:560px) { .ai2-beta-strip-link { padding:0 20px; } }
@media (max-width:1120px) { .ai2-header-nav { display:none !important; } }
.ai2-header-nav a { white-space:nowrap; }
.ai2-header-nav.nav-open { display: flex !important; flex-wrap: wrap; }
/* MOB-03 -- phone chrome. Measured 2026-09-22: the right group ran 156px past a 360px screen
   and the beta CTA 91px past it; body{overflow-x:hidden} clipped both, and mobile Chrome
   widened the whole page to 759px to fit them. Sign in stays visible: the drawer carries
   no sign-in link (ORDER 011 removed it), so both buttons narrow instead of hiding. */
@media (max-width:560px) {
  .ai2-header-inner { padding:14px 16px; gap:10px; }
  .ai2-header-left { gap:10px; }
  .ai2-header-right { gap:8px; }
  .ai2-brand-word { display:none; }   /* fix pass 1: the mark alone carries the brand */
  .ai2-menu-btn-label { position:absolute; width:1px; height:1px; overflow:hidden;
    clip:rect(0 0 0 0); white-space:nowrap; }
  .ai2-btn-ghost { padding:0 10px; }
  .ai2-btn-solid { padding:0 10px; }
  .ai2-beta-strip-inner { padding:0 16px; }
  .ai2-beta-strip-link { padding:0; gap:12px; }
  .ai2-beta-strip-title { font-size:22px; }
  .ai2-beta-strip-cta { padding:0 10px; font-size:11.5px; }
  .ai2-header-nav:not([hidden]) ~ .ai2-header-right { margin-left:auto; }
}

/* -------------------------------------------------- UNIVERSE DROPDOWN (B3) */
/* z-index 120: above the header stack (.ai2-topbar-stack is 80) so the panel
   is not clipped by later content, and BELOW the drawer backdrop/overlay
   (hamburger.css 999/1000) so opening the drawer always covers it. */
.ai2-universe-wrap { position: relative; display: inline-flex; align-items: center; }
.ai2-universe-panel {
  position: absolute; top: calc(100% + 10px); left: 0;
  min-width: 280px; z-index: 120;
  display: flex; flex-direction: column;
  background: var(--tml-surface-raised);
  border: 1px solid var(--tml-border);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  padding: 6px;
}
.ai2-universe-panel[hidden] { display: none; }
.ai2-universe-item {
  display: flex; flex-direction: column; gap: 2px;
  padding: 9px 11px; border-radius: 6px;
}
.ai2-universe-item:hover { background: var(--tml-surface-hover); }
.ai2-universe-item-name {
  font-family: 'Khand','Roboto Condensed','Arial Narrow',system-ui,sans-serif;
  font-size: 15px; font-weight: 600; letter-spacing: .02em;
  color: var(--tml-ink);
}
.ai2-universe-item-blurb {
  font-size: 12px; line-height: 1.35; color: var(--tml-ink-muted);
}
.ai2-universe-trigger { cursor: pointer; background: none; border: none; padding: 0; }

/* ------------------------------------------- PROFILE CONTROL ALIGNMENT (006) */
/* CAUSE, not a nudge. _profile_pin.html sets
     .profile-pin-cluster .user-avatar-wrap { display: inline-block !important }
   and the pill inside it is display:inline-flex. An inline-level box in a block
   container sits on a LINE BOX, so the strut adds descender space beneath the
   pill that belongs to the wrap but paints nothing. align-items:center then
   centres a box several px taller than the pill, and the pill lands off-axis.
   Making the wrap a flex container removes the line box entirely: the wrap
   becomes exactly the pill's 36px and centring is correct by construction.
   No pixel offset anywhere -- a nudge would hide this and break at other zooms.
   Specificity (0,0,3,0) + !important is required to beat the partial's own
   (0,0,2,0) !important rule, which is a body <style> and so wins ties. */
.ai2-header .profile-pin-cluster .user-avatar-wrap {
  display: flex !important;
  align-items: center !important;
}
/* Pico applies [type=button]{margin-bottom:1rem} and this pill is a
   <button type="button">. _profile_pin.html already zeroes it; restated here so
   the chrome does not depend on that partial keeping the reset. */
.ai2-header .profile-pin-cluster .ai2-pin-btn { margin: 0 !important; }


/* ------------------------------------------------- PAGE OPENING BLOCK (012) */
/* Alignment is the whole point: max-width and horizontal padding are the SAME
   1200px / 40px as .ai2-header-inner, so the H1 left edge lands on the MENU
   pill left edge in the header above it. Change one and change the other.
   Sizes match what the pilot pages render today (landing.css .stub-title 4rem,
   .stub-tagline 0.9rem, .stub-badge 0.72rem) so the pattern is a relocation,
   not a redesign. NO background is set here -- the single-ground rule is a
   later batch and this block must not pre-empt it. */
/* MEASURED: .public-main insets its content to left=130 (max-width 1180 +
   32px padding) while .ai2-header-inner puts the MENU pill at left=120. A page
   head nested inside main therefore lands 50px right of the pill, and the
   offset depends on whichever main the page happens to use. So the shell
   BREAKS OUT to the viewport and the inner re-centres on the SAME grid as the
   header -- alignment by construction, not by a -10px nudge that would be true
   for one template only. No background is set, so full-bleed paints nothing. */
.ai2-page-head {
  width: 100vw; max-width: none;
  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
}
.ai2-page-head-inner {
  max-width: 1200px; margin: 0 auto; padding: 26px 40px 0;
}
/* ORDER 014 GATE (d) -- news, news_article, constellation and beta_access are
   standalone documents: they include _site_chrome.html directly in <body> and
   have no .public-main / .site-main wrapper, whose padding-top:40px supplies
   the header-to-title gap on every other converted page. Without this the
   opening block sat flush against the header on those four and 40px down on
   the rest. Scoped to the direct-child-of-body case so it can never double up
   on a page that DOES have the wrapper. */
body > .ai2-page-head { margin-top: 20px; }
/* MEASURED, and the first attempt was wrong: padding on .ai2-page-head-inner
   moves the TEXT but not the block, so the block still sat flush against the
   header. The 40px has to be a margin on .ai2-page-head itself -- that is the
   element .public-main's padding displaces on every other page. Total header
   to title is then 40 + 26 = 66px everywhere. */

/* ORDER 018 -- the header-to-breadcrumb gap halves from 40px to 20px.
   MEASURED: the 40px came from THREE sources, one per page family --
     main.public-main padding-top 2.5rem   (public.css:46)  10 pages
     main.site-main   padding-top 2.5rem   (style.css:205)   1 page  (/tracker)
     body > .ai2-page-head margin-top 40px (just above)      3 pages (standalone)
   All three are halved so the result is 20px everywhere, not 20 on some.

   SCOPED WITH :has() ON PURPOSE, NOT APPLIED TO THE WRAPPERS OUTRIGHT.
   .public-main is shared by 24 templates and only 16 carry a page head;
   .site-main backs the whole internal surface. Halving either one outright
   would silently move the top of every page that has NO page head -- login,
   sme_register, the dossier browsers, the admin pages -- none of which this
   ruling is about. This way a wrapper changes only when it actually holds the
   block being adjusted.
   (0,2,0) against .public-main's (0,1,0), so it wins on specificity alone --
   no !important, and no dependence on stylesheet order. A browser without
   :has() simply keeps the old 40px rather than breaking. */
.public-main:has(> .ai2-page-head),
.site-main:has(> .ai2-page-head) { padding-top: 1.25rem; }

.ai2-crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font-size: 10px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--tml-ink-muted); margin-bottom: 14px;
}
.ai2-crumb { color: var(--tml-ink-muted); text-decoration: none; }
.ai2-crumb-current { color: var(--tml-ink); }
.ai2-crumb-sep { color: var(--tml-ink-faint); }
a.ai2-crumb:hover { color: var(--tml-primary); text-decoration: none; }
.ai2-page-badge {
  display: inline-block; margin-bottom: 12px;
  font-family: 'Khand','Roboto Condensed','Arial Narrow',system-ui,sans-serif;
  font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--tml-primary);
  border: 1px solid var(--tml-primary); border-radius: 4px;
  padding: 3px 9px; line-height: 1.4;
}
/* ORDER 016 -- THE ONE PAGE-TITLE TREATMENT. 2.4rem/1.15 is not a new choice:
   it is what TEN of the fourteen converted pages already rendered, because
   public.css's .public-body h1 (0,1,1) outranked this rule (0,1,0) and supplied
   both values. That rule is now narrowed with :not(.ai2-page-title), so these
   declarations are what every page gets. The four that were rendering the old
   4rem/1.05 -- /news, /news/<slug>, /beta-access, /tracker -- are the ones that
   move, and they move ONTO the majority rather than the majority moving to them.
   rem, not px, matching the sheet's convention: the root computes to 16px on all
   fourteen pages, measured, so 2.4rem is 38.4px on every one. */
.ai2-page-title {
  font-family: 'Khand','Roboto Condensed','Arial Narrow',system-ui,sans-serif;
  font-size: 2.4rem; font-weight: 600; line-height: 1.15;
  letter-spacing: -0.02em; color: var(--tml-primary);
  margin: 0 0 0.5rem 0;
}
.ai2-page-kicker {
  font-family: 'Khand','Roboto Condensed','Arial Narrow',system-ui,sans-serif;
  font-size: 0.9rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--tml-primary); margin: 0 0 0.9rem 0;
}
.ai2-page-lede {
  font-size: 15px; line-height: 1.55; color: var(--tml-ink-body);
  max-width: 75%; margin: 0 0 1.2rem 0; text-wrap: pretty;
}
.ai2-page-rule {
  border: 0; border-top: 1px solid var(--tml-border);
  margin: 0; width: 100%;
}
@media (max-width:760px) { .ai2-page-lede { max-width: 100%; } }