/* UI_SPEC 3.7, owner-confirmed full-width desktop header.
 * Load AFTER web-header.css, arena-site.css, site-detail.css and ui-spec.css.
 * The content cap excludes gutters (1728px -> 1651.968px usable content).
 * Mobile <=800px keeps native layout; desktop shared headers are universal.
 * Marketing body rules exclude account/workspace/tool roots.
 */
/* Native web-header.css hides every direct summary span. Keep the shared
 * current-user avatar visible without revealing the separately hidden name. */
html body header[data-web-header] .web-avatar summary > [data-bb-current-avatar] {
  display: inline-flex !important;
  flex: none !important;
}

/* UI_SPEC 8.2: labels stay on one line; prose avoids a short final line.
 * This changes wrapping only, preserving native typography and card geometry.
 */
html[data-web-public] .site-control,
html[data-web-public] .site-control > .site-label {
  white-space: nowrap;
}

html[data-web-public] main :is(h1, h2, h3) {
  text-wrap: balance;
}

/* Match the public titles' local bold fallback advance to Inter before it
 * loads. Otherwise English legal/opening headings collapse two lines into
 * one at 375px, shifting the following content by one 43.2px line. */
@font-face {
  font-family: 'Inter Title Fallback';
  src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold');
  font-style: normal;
  font-weight: 600;
  size-adjust: 95.4%;
}
html[data-web-public] main h1 {
  font-family: Inter, 'Inter Title Fallback', 'Noto Sans SC', 'PingFang SC', 'HarmonyOS Sans SC', 'Microsoft YaHei', sans-serif;
}

/* Keep the partner CTA arrow on its final line while Inter is loading.
 * The system CJK fallback wraps this 500-weight action at 375px. */
@font-face {
  font-family: 'Inter Action Fallback';
  src: local('Arial'), local('ArialMT'), local('Liberation Sans');
  font-style: normal;
  font-weight: 500;
}
html[data-web-public] .partner-actions button {
  font-family: Inter, 'Inter Action Fallback', 'Noto Sans SC', 'PingFang SC', 'HarmonyOS Sans SC', 'Microsoft YaHei', sans-serif;
}

html[data-web-public] main p {
  text-wrap: pretty;
}

/* Short card and document captions balance both lines instead of leaving
 * a single Chinese character below an otherwise full first line.
 */
html[data-web-public] main .bb-service-card > p,
html[data-web-public] main [data-arfx-document-links] p {
  text-wrap: balance;
}

/* Every public native template uses this footer, including the opening page
 * whose root intentionally lacks data-arena-site. Allow the existing row
 * and its navigation to wrap instead of expanding beyond the viewport. */
html[data-web-public] body footer.bbp-footer {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  min-width: 0;
  flex-wrap: wrap;
  box-sizing: border-box;
}

html[data-web-public] body footer.bbp-footer > nav {
  flex-wrap: wrap;
  min-width: 0;
  max-width: 100%;
}

/* Desktop copy contains a deliberate newline. On a narrow screen, allow the
 * entire title to balance together rather than leaving its final word alone. */
@media (max-width: 800px) {
  html[data-web-public] .arena-intro-copy h1 {
    white-space: normal;
  }

  /* UI_SPEC eight-two: existing 48px service-card actions use 16px/600.
   * Keep the native card geometry and palette; labels determine their width. */
  html[data-arena-site][data-web-public] main .bb-service-card .site-control.site-card-action {
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
  }
}

/* Below the accepted wide desktop layout, balance across the authored newline.
 * Keep the native font, card geometry and wide desktop line grouping. */
@media (min-width: 801px) and (max-width: 1399px) {
  html[data-web-public] .arena-intro-copy h1 {
    white-space: normal;
  }
}

/* Initial server markup and runtime refresh reserve the same website nav slots. */
html body header[data-web-header] .web-region-nav > a[data-nav-slot] {
  box-sizing: border-box;
  width: var(--web-nav-slot);
}

@media (min-width: 801px) {
  html {
    --public-wide-gutter: clamp(20px, 2.2vw, 40px);
    --public-wide-content: 1680px;
  }

  html[data-arena-site][data-web-public]:not([data-account-center-page]):not([data-site-workspace]) {
    --site-size-body: 16px;
    --site-size-title: clamp(28px, 2.8vw, 44px);
  }

  html[data-arena-site][data-web-public]:not([data-account-center-page]):not([data-site-workspace]) body {
    font-size: 16px;
  }

  html body header[data-web-header] {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: 64px !important;
    min-height: 64px !important;
    margin: 0 !important;
    padding: 0 var(--public-wide-gutter) !important;
    gap: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--ui-pill-line) !important;
    border-radius: 0 !important;
    background: var(--ui-glass) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    box-sizing: border-box !important;
  }

  /* Keep fitNavigation in sync: brand 88, actions 272, brand gap 32,
   * and the navigation/actions gap 16 pixels. */
  html body header[data-web-header] .web-brand {
    margin-right: 32px !important;
  }

  html body header[data-web-header] .web-region-nav {
    /* Owner correction: desktop navigation sits beside the right actions. */
    justify-content: flex-end !important;
    margin: 0 16px 0 0 !important;
  }

  html body header[data-web-header] .web-header-actions {
    margin-left: auto !important;
  }

  html[data-web-public] body footer.bbp-footer {
    width: min(var(--public-wide-content), calc(100% - 2 * var(--public-wide-gutter))) !important;
    max-width: var(--public-wide-content) !important;
    margin-inline: auto !important;
  }

  html[data-arena-site][data-web-public]:not([data-account-center-page]):not([data-site-workspace]) body .bbp-hero {
    padding-top: 88px !important;
    height: auto !important;
    min-height: 0 !important;
  }

  html[data-arena-site][data-web-public]:not([data-account-center-page]):not([data-site-workspace]) body :is(.arena-content, .partner-content, .bbp-footer, #arfx-disclosures > .website-opening, [data-arfx-document-links]) {
    width: min(var(--public-wide-content), calc(100% - 2 * var(--public-wide-gutter))) !important;
    max-width: var(--public-wide-content) !important;
    margin-inline: auto !important;
    box-sizing: border-box !important;
  }

  html[data-arena-site][data-web-public]:not([data-account-center-page]):not([data-site-workspace]) body :is(.arena-content, .partner-content) {
    padding-inline: 0 !important;
  }

  html[data-arena-site][data-web-public]:not([data-account-center-page]):not([data-site-workspace]) body .arena-intro {
    min-height: 640px !important;
    border-radius: 32px !important;
  }

  html[data-arena-site][data-web-public]:not([data-account-center-page]):not([data-site-workspace]) body .arena-intro h1 {
    font-size: clamp(40px, 5vw, 80px) !important;
  }

  html[data-arena-site][data-web-public]:not([data-account-center-page]):not([data-site-workspace]) body .arena-intro-copy > p:not(.arena-eyebrow) {
    font-size: 20px !important;
    max-width: 520px;
  }

  html[data-arena-site][data-web-public]:not([data-account-center-page]):not([data-site-workspace]) body .arena-actions .site-control {
    height: 56px !important;
    min-height: 56px !important;
    font-size: 18px !important;
  }

  /* The section remains in the content grid; only the scroll strip breaks out.
   * 100% here is the content width, so centering the viewport-sized strip
   * compensates equally for its capped parent's left/right whitespace.
   */
  html[data-arena-site][data-web-public]:not([data-account-center-page]):not([data-site-workspace]) body .arena-market {
    margin: 24px 0 72px !important;
  }

  html[data-arena-site][data-web-public]:not([data-account-center-page]):not([data-site-workspace]) body .arena-ticker {
    left: 0 !important;
    width: 100vw !important;
    max-width: none !important;
    margin-inline: calc(50% - 50vw) !important;
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  }

  html[data-arena-site][data-web-public]:not([data-account-center-page]):not([data-site-workspace]) body .arena-ticker-track {
    padding-inline: var(--public-wide-gutter) !important;
  }

  html[data-arena-site][data-web-public]:not([data-account-center-page]):not([data-site-workspace]) body .arena-quote {
    flex-basis: 232px !important;
    width: 232px !important;
    box-sizing: border-box;
  }

  html[data-arena-site][data-web-public]:not([data-account-center-page]):not([data-site-workspace]) body :is(.arena-section, .partner-section) {
    margin-block: clamp(72px, 5.5vw, 96px) !important;
  }

  /* First article heading starts at the shared 24px offset below the header. */
  html[data-arena-site][data-web-public]:not([data-account-center-page]):not([data-site-workspace]) body .arena-content[data-arfx-page] > .arena-section:first-child {
    margin-top: 0 !important;
  }

  html[data-arena-site][data-web-public]:not([data-account-center-page]):not([data-site-workspace]) body :is(.arena-section > .arena-heading h2, .partner-section > .partner-heading h2) {
    font-size: clamp(28px, 2.8vw, 44px) !important;
  }

  html[data-arena-site][data-web-public]:not([data-account-center-page]):not([data-site-workspace]) body .arena-feature-grid {
    gap: 24px !important;
  }
}

@media (min-width: 1100px) and (max-width: 1439px) {
  html[data-arena-site][data-web-public]:not([data-account-center-page]):not([data-site-workspace]) body .arena-feature-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 1440px) {
  html[data-arena-site][data-web-public]:not([data-account-center-page]):not([data-site-workspace]) body .arena-feature-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* Direct legal and opening routes use the same desktop gutter as the footer. */
@media (min-width: 801px) {
  html[data-web-public]:is([data-website-opening], [data-legal-documents]) body [data-public-route-content] > .website-opening {
    width: min(var(--public-wide-content), calc(100% - 2 * var(--public-wide-gutter))) !important;
    max-width: var(--public-wide-content) !important;
    margin-inline: auto !important;
    box-sizing: border-box !important;
  }
}

/* UI_SPEC eight-two rules 8/9, author handoff 2026-10-06.
 * Only the marked market/platform/tool content cards use natural row heights.
 * Existing palette, fonts, padding, grid gaps and header geometry stay native.
 */
html[data-arena-site][data-web-public] main [data-content-card] {
  display: flex;
  flex-direction: column;
  row-gap: 16px;
  min-height: var(--content-card-normal-height, 0px) !important;
  align-self: start;
  box-sizing: border-box;
}

html[data-arena-site][data-web-public] main [data-content-card] > :is(h2, h3) {
  margin-block-end: 0;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

html[data-arena-site][data-web-public] main [data-card-description] {
  margin-block: 0;
}

html[data-arena-site][data-web-public] main [data-card-description].is-collapsed {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

html[data-arena-site][data-web-public] main [data-card-expanded="true"] [data-card-description] {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

/* Keep the native full-card link below the explicit expansion control. */
html[data-arena-site][data-web-public] main [data-card-description-toggle] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  align-self: flex-start;
  margin: 0;
  min-height: 32px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}

html[data-arena-site][data-web-public] main [data-card-description-toggle][hidden] {
  display: none;
}

html[data-arena-site][data-web-public] main [data-content-card] > .site-control:not([data-card-description-toggle]) {
  margin-top: auto;
}

/* Only actual title overflow, after the approved short labels, reduces columns.
 * No change to default grid columns, gaps, card padding or heading font sizes.
 */
html[data-arena-site][data-web-public] main .arena-feature-grid[data-card-titles-fit="false"] {
  grid-template-columns: repeat(var(--content-card-columns, 1), minmax(0, 1fr)) !important;
}

/* The native opening sign-in action is 48px high: UI_SPEC requires 16/600. */
html[data-web-public][data-website-opening] .website-opening button[data-guest-login] {
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
}

/* NEXT_QUEUE mobile touch targets: retain desktop32, minimum44 on mobile. */
@media (max-width: 800px) {
  html[data-arena-site][data-web-public] main [data-card-description-toggle] {
    min-height: 44px;
  }
}

/* 2026-10-07 audit: legal document links were 21 px high on phones; give every link a 44 px touch target. */
@media(max-width:800px){[data-arfx-document-links] a{display:inline-flex;align-items:center;min-height:44px}}

/* 2026-10-07 audit: on the lime accent the label is always the accent ink (dark), in both themes. The platform home used the page ink, which is light at night. */
html[data-site-platform] .bbp-actions a.bbp-primary-link{color:var(--bb-theme-accent-ink,#111)}

/* The inviter strip is rendered before <main>, so on the public site it sits under the fixed header (never visible)
   and only pushes every page down by 72px for visitors who arrived through a share link. The inviter is already
   shown in the sign-in sheet and in the account centre. */
html[data-arena-site] body .web-inviter-notice{display:none!important}