/*
  App chrome — ported from legacy/react-app SCSS (the behavioral spec).
  Hand-compiled: BEM class names verbatim; SCSS variables as custom
  properties; lighten()/darken() pre-computed (SCSS HSL semantics); Bootstrap 4.3 pieces the
  chrome uses (reboot subset, .container, .btn) inlined with the project's overrides from
  styles/bootstrap-variables.scss. Evergreen browsers only (D8) — IE-specific clauses from the
  legacy hover mixin are dropped, CSS custom properties used freely.

  Sources: variables.scss, mixins.scss, styles/{bootstrap-variables,custom}.scss, App.scss,
  AppPrint.scss, and the component .scss files for PrimarySection, Header*, MainMenu*,
  SubMenu*, Tooltip (dropdown visuals), Footer*, Divider, Icon, Accordion (footer groups).
*/

:root {
  /* variables.scss */
  --color-primary: #1c3664;
  --color-primary-dark: #11203c;      /* darken(--color-primary, 10%) */
  --color-primary-light: #3261b4;     /* lighten(--color-primary, 20%) */
  --color-info: #0064f0;
  --color-info-light: #247fff;        /* lighten(--color-info, 10%) */
  --color-info-lighter: #8abbff;      /* lighten(--color-info, 30%) */
  --color-info-alt: #004edd;
  --color-attention: #d4af37;         /* brand gold (matches the gold logo); was BS4 orange #fd7e14 */
  --color-danger: #b21414;
  --color-success: #28a745;           /* BS4 $success — the .btn-success the forms' done state already uses */
  --color-white-transparent: rgba(255, 255, 255, 0.8);
  --color-gray-100: #f8f9fa;
  --color-gray-200: #e9ecef;
  --color-gray-300: #dee2e6;
  --color-gray-400: #ced4da;
  --color-gray-500: #adb5bd;
  --color-gray-600: #6c757d;
  --link-color: var(--color-info-alt);
  --link-hover-color: #003390;        /* BS4: darken(--link-color, 15%) */

  --font-family: 'Goldman Sans', sans-serif;
  --font-size-xs: 13px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-h1: 36px;

  --gutter-xs: 0.25rem;
  --gutter-sm: 0.5rem;
  --gutter-md: 1rem;
  --gutter-lg: 2rem;

  --header-height: 92px;
  --header-height-sm: 80px;
  --main-menu-height: 57px;
  --main-menu-height-sm: 47px;
  --additional-menu-height: 40px;

  --zindex-fixed: 230;
  --zindex-popover: 260;
  --zindex-header: var(--zindex-fixed);
}

/* ---------- Base (Bootstrap 4 reboot subset + bootstrap-variables overrides + custom.scss) ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  height: 100.1%; /* App.scss */
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-family);
  font-size: 1rem;
  font-weight: 300; /* $font-weight-base: $font-weight-normal (300) */
  line-height: 1.5;
  text-align: left;
  color: var(--color-primary); /* $body-color */
  background-color: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 0; /* $headings-margin-bottom: 0 */
  font-weight: 500; /* $headings-font-weight */
  line-height: 1.2; /* $headings-line-height */
}

/* BS4 type heading scale (with the SPA's $h1-font-size: 2.25rem override) —
   the legacy bundle ships these globally; only the margin/weight half of the
   headings block was ported. Unclassed headings fell to browser-default sizes:
   h6.SimpleGrid__title (the profile comparison-table titles) rendered ~10.7px,
   h5.CompanyTooltipContent__title, the HelpListItem/EmailPreferencesFormSection
   h4s etc. likewise. Classed headings are unaffected (their class rules out-
   specify these). Same class of miss as the svg reboot fix (ebcffa59). */
h1 { font-size: 2.25rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

p {
  margin-top: 0;
  margin-bottom: 1rem;
}

/* BS4 reboot with the SPA's $font-weight-bolder override. An explicit 600 is
   load-bearing: the UA default is `bolder`, which from the 300 body computes
   to 400 — bold text became near-indistinguishable from the Light base. 600
   font-matches to the Goldman Sans Bold cut, as the legacy renders. */
b,
strong {
  font-weight: 600;
}

a {
  text-decoration: none;
  color: var(--link-color);
  background-color: transparent;
}

a:hover {
  text-decoration: underline;
  color: var(--link-hover-color);
}

img {
  vertical-align: middle;
  border-style: none;
}

/* BS4 reboot — the legacy bundle ships img,svg{vertical-align:middle} +
   svg{overflow:hidden}; only the img half was ported. Baseline-aligned inline
   svgs add descender space under every chrome icon (the header user-menu
   circles rendered as tall ellipses). */
svg {
  vertical-align: middle;
  overflow: hidden;
}

/* BS4 reboot table block — the legacy bundle ships all three globally; none were
   ported. Without the collapse rule every SimpleGrid table keeps the UA default
   (border-collapse:separate + 2px border-spacing), rendering 2px-per-column-gap
   wider than the legacy — the profile sidebar balance sheet (325px of cells + 8px
   of gaps in a 330px box) grew a 3px horizontal scrollbar. Same class of miss as
   the svg reboot fix above. */
table {
  border-collapse: collapse;
}

caption {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  color: var(--color-gray-600);
  text-align: left;
  caption-side: bottom;
}

th {
  text-align: inherit;
}

button {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  text-transform: none;
  overflow: visible;
  -webkit-appearance: button;
}

/* custom.scss — global list reset */
ul,
ul li,
ul ul li {
  margin: 0;
  padding: 0;
  list-style-type: none;
  text-indent: 0;
}

/* .container (BS4 make-container + project $container-max-widths) */
.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 15px;
  padding-left: 15px;
}

@media (min-width: 576px) {
  .container { max-width: 540px; }
}

@media (min-width: 768px) {
  .container { max-width: 720px; }
}

@media (min-width: 992px) {
  .container { max-width: 960px; }
}

@media (min-width: 1200px) {
  .container { max-width: 1187px; } /* project override, not BS4's 1140px */
}

/* .btn subset (BS4) — chrome uses "btn btn-sm" on the search/burger toggles */
.btn {
  display: inline-block;
  padding: 0.375rem 0.75rem;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500; /* $btn-font-weight */
  line-height: 1.5;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  user-select: none;
  color: inherit;
  background-color: transparent;
  cursor: pointer;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.btn:focus {
  outline: 0;
}

.btn-sm {
  padding: 0.25rem 0.5rem;
  border-radius: 0.2rem;
  font-size: 0.875rem;
  line-height: 1.5;
}

/* ---------- Icon (Icon.scss — sprite-based, sizes/schemes the chrome uses) ---------- */

.Icon {
  max-width: 100%;
  max-height: 100%;
  fill: currentColor;
}

.Icon use {
  pointer-events: none; /* disable title appearing of svg */
}

.Icon--sm { width: 16px; min-width: 16px; height: 16px; min-height: 16px; }
.Icon--md { width: 20px; min-width: 20px; height: 20px; min-height: 20px; }
.Icon--lg { width: 24px; min-width: 24px; height: 24px; min-height: 24px; }

.Icon--primary { color: var(--color-primary); }
.Icon--attention { color: var(--color-attention); }

@media not all and (hover: none) {
  .Icon--hover.Icon--primary:hover {
    cursor: pointer;
    color: var(--color-primary-light);
  }
}

/* ---------- App shell (App.scss) ---------- */

.App__header {
  position: fixed;
  z-index: var(--zindex-header);
  top: 0;
  left: 0;
  width: 100%;
  background: white;
}

@media print {
  .App__header {
    position: static;
  }
}

/*
  App.scss content offsets: xl uses a hardcoded 139px (not the 149px variable sum);
  the --additional-menu modifier still uses the variable sum (149 + 40).
*/
@media (min-width: 1200px) {
  .App__content { margin-top: 139px; }
  .App__content--additional-menu { margin-top: 189px; }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .App__content { margin-top: 139px; } /* header 92 + main-menu-sm 47 */
  .App__content--additional-menu { margin-top: 179px; }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .App__content { margin-top: 127px; } /* header-sm 80 + main-menu-sm 47 */
  .App__content--additional-menu { margin-top: 167px; }
}

@media (max-width: 767.98px) {
  .App__content { margin-top: 80px; } /* header-sm */
  .App__content--additional-menu { margin-top: 120px; }
}

@media print {
  .App__content,
  .App__content--additional-menu {
    margin-top: 0;
  }
}

.App__footer {
  border-top: 1px solid white;
}

@media print {
  .App__footer {
    display: none;
  }
}

/* ---------- PrimarySection (modifiers the chrome uses) ---------- */

.PrimarySection {
  position: relative;
}

.PrimarySection .container,
.PrimarySection__content {
  height: 100%;
}

/* container-max-width mixin: flat caps (no media query) for the maxContainerSize
   sections — News articles (container--md), Ratings System (container--lg). */
.PrimarySection .container {
  margin: 0 auto;
}

.PrimarySection .container--md { max-width: 720px; }
.PrimarySection .container--lg { max-width: 960px; }
.PrimarySection .container--xl { max-width: 1187px; }

.PrimarySection--compact {
  padding-top: 0.7rem;
  padding-bottom: 0.8rem;
}

/* internal-vertical-indent(padding): 40/36/32/28/24px by breakpoint */
@media (min-width: 1200px) {
  .PrimarySection--internal { padding-top: 40px; padding-bottom: 40px; }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .PrimarySection--internal { padding-top: 36px; padding-bottom: 36px; }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .PrimarySection--internal { padding-top: 32px; padding-bottom: 32px; }
}

@media (min-width: 576px) and (max-width: 767.98px) {
  .PrimarySection--internal { padding-top: 28px; padding-bottom: 28px; }
}

@media (max-width: 575.98px) {
  .PrimarySection--internal { padding-top: 24px; padding-bottom: 24px; }
}

.PrimarySection--primary {
  color: white;
  background: var(--color-primary);
}

@media print {
  .PrimarySection--compact {
    padding: 0;
  }

  .PrimarySection > .container {
    max-width: none;
    padding: 0;
  }
}

/* ---------- Header (Header.scss) ---------- */

.Header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.Header .hide-on-desktop {
  display: none;
}

.Header__mainMenu {
  display: none;
}

.Header__slogan {
  font-weight: 600;
}

@media (max-width: 991.98px) {
  .Header__slogan {
    transform: translate(0, 2px);
    max-width: 200px;
    margin-right: auto;
    margin-left: 10px;
    line-height: 1.2;
  }
}

@media (max-width: 767.98px) {
  .Header .hide-on-desktop { display: block; }
  .Header__mainMenu { display: block; }
  .Header__slogan { display: none; }
}

@media print {
  .Header__mainMenu,
  .Header > .HeaderSearch,
  .Header > .HeaderUserMenu {
    display: none;
  }
}

/* HeaderLogo.scss */
.HeaderLogo__view,
.HeaderLogo__print {
  display: none;
  width: 240px;
  height: 60px;
}

@media not print {
  .HeaderLogo__view {
    display: block;
    width: 240px;
    height: 60px;
    background: url('../img/ipo-intelligence-logo-gold.png') center center no-repeat;
    background-size: contain;
  }
}

@media (max-width: 991.98px) {
  .HeaderLogo__view {
    width: 80px;
    height: 48px;
    background-image: url('../img/logo-header-gold-short.png');
  }
}

@media print {
  .HeaderLogo__print {
    display: block;
  }
}

/* HeaderSearch.scss (autocomplete behavior lands in 5.8; visuals are the 2.1 chrome) */
/* The toggle's display rules carry the parent class on purpose: the button also
   wears bootstrap's .btn, and view-grid.css (loaded AFTER app.css on grid pages)
   re-declares .btn{display:inline-block} at equal single-class specificity — in the
   legacy's ONE compiled stylesheet the component rule simply came later and won;
   split across two files it lost the tie and the desktop toggle showed (found on
   /stats during 5.8). Two classes beat .btn regardless of stylesheet order. */
@media (min-width: 768px) {
  .HeaderSearch {
    flex-grow: 1;
    margin-left: var(--gutter-md);
  }

  .HeaderSearch .HeaderSearch__toggle {
    display: none;
  }
}

@media (max-width: 767.98px) {
  .HeaderSearch {
    margin-left: auto;
  }

  .HeaderSearch .HeaderSearch__toggle {
    display: flex;
    line-height: 36px;
    font-size: var(--font-size-h1);
    color: var(--color-primary);
  }

  .HeaderSearch__form {
    display: none;
    width: 100%;
    padding: var(--gutter-md) 0;
    background: var(--color-primary);
  }

  .HeaderSearch__form--open {
    position: absolute;
    z-index: 3;
    top: 100%;
    left: 0;
    display: block;
    margin-top: 1px;
  }
}

.HeaderSearch__container {
  position: relative;
}

.HeaderSearch__container form {
  display: flex;
  align-items: center;
}

.HeaderSearch__input {
  width: 100%;
  padding: 5px 15px 5px 36px;
  border: 1px solid var(--color-gray-400);
  border-radius: 10px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 300;
  line-height: 26px;
  color: var(--color-primary);
}

.HeaderSearch__input::placeholder {
  color: var(--color-gray-500);
}

@media (max-width: 767.98px) {
  .HeaderSearch__input {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 44px; /* room for the clear X */
    border: none;
    border-radius: 3px;
  }
}

/* Clear X inside the input — mobile only (the magnifier submits there; desktop
   is unchanged). search.js toggles [hidden] while the input is empty. */
.HeaderSearch__field {
  position: relative;
}

.HeaderSearch__clear {
  display: none;
}

@media (max-width: 767.98px) {
  .HeaderSearch__clear {
    position: absolute;
    top: 50%;
    right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--color-primary);
    transform: translateY(-50%);
    cursor: pointer;
  }

  .HeaderSearch__clear[hidden] {
    display: none;
  }
}

.HeaderSearch__submit {
  margin-left: var(--gutter-sm);
}

/* HeaderUserMenu.scss */
@media (max-width: 767.98px) {
  .HeaderUserMenu {
    display: none;
  }
}

.HeaderUserMenu__list {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.HeaderUserMenu__item {
  margin-left: var(--gutter-md);
}

.HeaderUserMenu__link {
  display: block;
  padding: 6px;
  border: 1px solid var(--color-gray-500);
  border-radius: 50%;
  line-height: 17px;
  font-size: var(--font-size-xl);
  color: var(--color-gray-400);
  background: white;
}

@media not all and (hover: none) {
  .HeaderUserMenu__link:hover {
    border-color: var(--color-primary);
    text-decoration: none;
    color: var(--color-primary);
  }
}

.HeaderUserMenu__link.active,
.HeaderUserMenu__link--active {
  border-color: var(--color-primary);
  text-decoration: none;
  color: var(--color-primary);
}

/* HeaderMainMenu.scss — mobile burger. Doubled class outranks the extracted SPA
   bundle's own .btn-sm font rules (view-grid.css loads after this file; in the SPA
   the component rule compiled after bootstrap, so it won on source order there). */
.HeaderMainMenu__toggle.btn {
  display: flex;
  line-height: 36px;
  font-size: 36px;
  color: var(--color-primary);
}

/* ---------- Main menu (MainMenu.scss / MainMenuList.scss) ---------- */

.MainMenu {
  position: relative;
  background: var(--color-primary);
}

@media print {
  .MainMenu {
    display: none;
  }
}

@media (max-width: 767.98px) {
  .MainMenu__list {
    display: none;
  }

  .MainMenu__list--open {
    display: block;
  }
}

.MainMenuList {
  margin: 0;
  padding: 0;
  list-style: none;
}

.MainMenuList__title,
.MainMenuList__link {
  font-size: var(--font-size-lg);
  font-weight: 400;
  white-space: nowrap;
  color: white;
}

.MainMenuList__link {
  display: block;
  transition: color 0.1s;
}

@media not all and (hover: none) {
  .MainMenuList__link:hover {
    text-decoration: none;
    color: var(--color-info-lighter);
  }
}

.MainMenuList__link.active {
  color: var(--color-info-light);
}

@media (min-width: 768px) {
  .MainMenuList {
    display: flex;
    justify-content: center;
    margin: 0 -30px;
  }

  .MainMenuList__link {
    padding: 11.5px 30px;
  }

  .MainMenuList__item--divider,
  .MainMenuList__item--hamburger {
    display: none;
  }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
  .MainMenuList {
    justify-content: space-between;
    margin-right: -15px;
    margin-left: -15px;
  }

  .MainMenuList__link {
    padding: 10px 15px;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .MainMenuList {
    margin-right: -5px;
    margin-left: -5px;
  }

  .MainMenuList__link {
    padding: 11.5px 5px;
  }
}

@media (max-width: 767.98px) {
  .MainMenuList {
    position: absolute;
    z-index: 3;
    top: 100%;
    right: 0;
    max-height: calc(100vh - 160px); /* 100vh - 2 * header-height-sm */
    padding: var(--gutter-md);
    overflow-y: auto;
    background: var(--color-primary);
  }

  .MainMenuList__link {
    font-size: var(--font-size-lg);
  }

  .MainMenuList__item {
    min-width: 160px;
    min-height: 30px;
    margin-top: 0.8rem;
  }

  .MainMenuList__item--divider {
    height: 1px;
    min-height: 1px;
    margin: var(--gutter-md);
    padding: 0;
    background: var(--color-gray-600);
  }
}

/*
  SubMenu dropdown — visual port of the legacy react-tooltip-lite bottom tooltip
  (Tooltip.scss + TooltipContentList/Item.scss): white panel, gray-500 border with the top
  edge removed under the menu bar, indentHorizontal/Vertical content padding. The library's
  injected wrapper DOM is replaced by a CSS hover/focus dropdown (documented deviation —
  visuals are the spec, the React lib internals are not).
*/
.SubMenu {
  position: relative;
}

.SubMenu__dropdown {
  position: absolute;
  z-index: var(--zindex-popover);
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  padding: var(--gutter-sm) var(--gutter-md); /* Tooltip__content indentVertical/Horizontal */
  border: 1px solid var(--color-gray-500);
  border-top: none;
  color: black;
  background-color: #fff;
}

.SubMenu--right .SubMenu__dropdown {
  right: 0;
  left: auto;
  transform: none;
  border-top: 1px solid var(--color-gray-500); /* user-menu tooltip keeps its top border */
}

@media (min-width: 768px) {
  .SubMenu:hover .SubMenu__dropdown,
  .SubMenu:focus-within .SubMenu__dropdown {
    display: block;
  }

  /* The mobile accordion header (SubMenuAccordion.tsx) has no desktop counterpart. */
  .SubMenu > .AccordionHeader {
    display: none;
  }
}

@media (max-width: 767.98px) {
  /* In the hamburger panel the submenu renders as an inline accordion
     (SubMenu.tsx breakpoint switch → SubMenuAccordion/AccordionSecondary):
     the link/title swaps for a non-navigating header with a toggle arrow,
     and the dropdown becomes the collapsed-by-default accordion content
     (js/app.js toggles the --open modifier). */
  .SubMenu > .MainMenuList__link,
  .SubMenu > .MainMenuList__title {
    display: none;
  }

  /* Deliberate deviation (2026-08-31): the legacy arrow inherited the
     body text color — near-invisible on the navy panel. White like the title. */
  .SubMenu > .AccordionHeader {
    color: white;
  }

  .SubMenu__dropdown {
    position: static;
    display: none;
    padding: 0 var(--gutter-md); /* SubMenu.scss .AccordionContent indent */
    border: none;
    transform: none;
    background: transparent;
  }

  .SubMenu__dropdown--open {
    display: block;
  }
}

.TooltipContentList .TooltipContentItem + .TooltipContentItem {
  margin-top: var(--gutter-xs);
}

.TooltipContentItem {
  display: flex;
  justify-content: center;
  white-space: nowrap;
}

.TooltipContentItem > a {
  display: flex;
  align-items: center;
  color: var(--color-primary);
}

@media not all and (hover: none) {
  /* TooltipContentItem.scss only recolors on hover, so Bootstrap's a:hover underline stays
     on in the legacy dropdowns; the port's `text-decoration: none` was a deviation the
     analysts' 2026-11 review caught ("underline the page you're hovering over"). */
  .TooltipContentItem > a:hover {
    text-decoration: underline;
    color: var(--color-primary-dark);
  }
}

.TooltipContentItem > a.active {
  font-weight: bold;
}

@media (max-width: 767.98px) {
  /* SubMenuAccordion.scss item appearance inside the mobile menu. Scoped under
     .MainMenu to outrank the extracted SPA bundle's unscoped desktop-dropdown
     colors (.TooltipContentItem>a is navy there, and view-grid.css loads after
     this file — the words were invisible on the navy panel without this). */
  .MainMenu .TooltipContentItem {
    justify-content: flex-start;
    min-width: 160px;
    min-height: 30px;
    margin-top: var(--gutter-md);
  }

  .MainMenu .TooltipContentItem > a {
    font-size: var(--font-size-md);
    font-weight: 300;
    white-space: nowrap;
    text-decoration: none;
    color: white;
  }

  .MainMenu .TooltipContentItem > a.active {
    font-weight: 300; /* the desktop dropdown's bold .active doesn't apply on mobile */
    color: var(--color-info-light);
  }
}

/* ---------- Footer (Footer*.scss, Divider.scss) ---------- */

.Divider {
  border-color: currentColor;
  border-top: 1px solid;
  opacity: 0.2;
}

.Footer {
  color: white;
  background: var(--color-primary);
}

.Footer .Divider {
  margin-top: var(--gutter-md);
  margin-bottom: var(--gutter-md);
}

.Footer__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.Footer__text {
  font-size: var(--font-size-sm);
  font-weight: 400;
}

.FooterLogo {
  display: block;
  width: 240px;
  height: 63px;
  background: url('../img/logo-footer-white.png') center center no-repeat;
  background-size: contain;
}

@media (max-width: 767.98px) {
  .FooterLogo {
    width: 80px;
    height: 48px;
    background-image: url('../img/logo-footer-white-short.png');
  }
}

.FooterFollowUs {
  display: flex;
  align-items: center;
  font-size: var(--font-size-md);
  font-weight: bold;
  text-transform: uppercase;
}

.FooterFollowUs__link,
.FooterFollowUs__link-x-twitter,
.FooterFollowUs__link-youtube,
.FooterFollowUs__Disclosurelink {
  color: white;
}

.FooterFollowUs__link {
  width: 30px;
  height: 30px;
  margin-left: var(--gutter-md);
}

.FooterFollowUs__link-x-twitter {
  width: 34px;
  height: 34px;
  margin-left: var(--gutter-md);
}

.FooterFollowUs__link-youtube {
  width: 34px;
  height: 34px;
  margin-left: 12px;
}

.FooterFollowUs__Disclosurelink {
  width: 30px;
  height: 30px;
}

.FooterFollowUs__link:hover,
.FooterFollowUs__link-x-twitter:hover,
.FooterFollowUs__link-youtube:hover,
.FooterFollowUs__Disclosurelink:hover {
  text-decoration: none;
  color: var(--color-info-lighter);
}

.FooterMenu__list {
  display: flex;
  flex-wrap: wrap;
}

.FooterMenu__list > .FooterMenuItem {
  width: calc(100% / 6);
  margin-top: var(--gutter-md);
}

@media (min-width: 576px) and (max-width: 991.98px) {
  .FooterMenu__list > .FooterMenuItem {
    width: 33.33%;
  }
}

@media (max-width: 575.98px) {
  .FooterMenu__list > .FooterMenuItem {
    width: 50%;
  }
}

.FooterMenuItem {
  font-weight: 500;
}

.FooterMenuItem__link {
  color: white;
}

.FooterMenuItem__link:hover {
  text-decoration: none;
  color: var(--color-info-lighter);
}

.FooterMenuItem__link.active {
  color: var(--color-info-light);
}

.FooterMenuItem__items {
  display: flex;
  flex-direction: column;
  font-size: var(--font-size-sm);
}

.FooterMenuItem__items .FooterMenuItem {
  padding-top: var(--gutter-sm);
  padding-left: var(--gutter-md);
  font-weight: 300;
}

.FooterMenuItem__items .FooterMenuItem__link {
  color: var(--color-white-transparent);
}

/* Deliberate deviation (Jacob 2026-08-31): the legacy's .active color loses to
   the rule above on source order, so footer dropdown items never visibly highlighted
   in the SPA. Outrank it so the current page is apparent inside the groups too. */
.FooterMenuItem__items .FooterMenuItem__link.active {
  color: var(--color-info-light);
}

/* Accordion chrome (Accordion*.scss) — footer groups (--xxs flavor) and, since the
   mobile SubMenu accordion port, the hamburger panel's Stats/IPO Screens/Account
   headers (default flavor: icon pinned right via --icon-pin, 5px icon gap). */
.Accordion {
  display: flex;
  flex-direction: column;
}

.AccordionHeader {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.AccordionHeader--icon-pin {
  justify-content: space-between;
}

.Accordion--xxs > section.AccordionHeader--icon-pin {
  justify-content: flex-start;
}

.AccordionHeader--available {
  cursor: pointer;
}

.AccordionHeader__title {
  user-select: none;
}

.Accordion--xxs .AccordionHeader__title {
  font-size: 1rem;
}

.AccordionHeader > .Icon {
  width: 14px;
  height: 14px;
  margin-left: 5px;
}

.Accordion--xxs .AccordionHeader > .Icon {
  margin-left: 10px;
}

.AccordionContent--close {
  display: none;
}

/* ---------- Auth chrome + login page (2.2) ----------
   Hand-compiled like the rest of this file (no Sass pipeline — surfaced 2.1 decision):
   HeaderPublicMenu.scss, Login.scss, the form component styles (Form/FormGroup/Label/
   Error/Input/Checkbox .scss) plus the BS4 form/button pieces they sit on
   (bootstrap-variables.scss maps theme 'primary' to --color-primary), and the
   PrimarySection--external/__header/PrimarySectionRow pieces the login page uses. */

/* Button-as-link for the POST /logout forms — documented deviation: legacy logout was a
   client-side JS link; a state-changing GET is not reproduced (antiforgery-protected POST). */
.LinkButton {
  padding: 0;
  border: 0;
  font: inherit;
  text-align: inherit;
  color: inherit;
  background: none;
  cursor: pointer;
}

/* The mobile menu's Log Out button (the POST-form deviation) keeps the anchor
   items' typography — the legacy rendered it as a MainMenuList__link anchor
   (18px/400), and .LinkButton's font:inherit above otherwise resets it to the
   body font (16px/300). */
.MainMenuList__link.LinkButton {
  font-size: var(--font-size-lg);
  font-weight: 400;
}

.TooltipContentItem > form {
  display: flex;
}

.TooltipContentItem .LinkButton {
  display: flex;
  align-items: center;
  color: var(--color-primary);
}

@media not all and (hover: none) {
  .TooltipContentItem .LinkButton:hover {
    text-decoration: none;
    color: var(--color-primary-dark);
  }
}

@media (max-width: 767.98px) {
  /* Scoped under .MainMenu like the mobile TooltipContentItem rules above —
     outranks the desktop-dropdown navy that view-grid.css re-declares later. */
  .MainMenu .TooltipContentItem .LinkButton {
    font-size: var(--font-size-md);
    font-weight: 300;
    color: white;
  }
}

/* HeaderPublicMenu.scss */
.HeaderPublicMenu__list {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.HeaderPublicMenu__item {
  margin-left: 10px;
  font-weight: 400;
}

@media (max-width: 767.98px) {
  .HeaderPublicMenu {
    margin-right: auto;
  }

  .HeaderPublicMenu__item--contact {
    display: none;
  }
}

/* button-variant(--color-attention) with hover/active shades pre-computed */
.HeaderPublicMenu__request {
  border-color: var(--color-attention);
  color: white;
  background-color: var(--color-attention);
}

.HeaderPublicMenu__request:hover {
  border-color: #b29126; /* darken(--color-attention, 10%) — the legacy $color-dark-orange slot */
  color: white;
  background-color: #bc9928; /* darken(--color-attention, 7.5%) */
}

/* BS4 button variants over the project theme colors */
.btn-primary {
  border-color: var(--color-primary);
  color: white;
  background-color: var(--color-primary);
}

.btn-primary:hover {
  border-color: var(--color-primary-dark);
  color: white;
  background-color: #142646; /* darken(--color-primary, 7.5%) */
}

.btn-primary:disabled {
  opacity: 0.65;
}

.btn-outline-primary {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background-color: transparent;
}

.btn-outline-primary:hover {
  border-color: var(--color-primary);
  color: white;
  background-color: var(--color-primary);
}

.btn-block {
  display: block;
  width: 100%;
}

.text-uppercase {
  text-transform: uppercase !important;
}

/* BS4 form-control with the bootstrap-variables input overrides */
.form-control {
  display: block;
  width: 100%;
  height: calc(1.5em + 0.75rem + 2px);
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--color-gray-400);
  border-radius: 0.25rem;
  background-clip: padding-box;
  background-color: white;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 300; /* $input-font-weight */
  line-height: 1.5;
  color: var(--color-primary); /* $input-color */
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-control:focus {
  border-color: #386cc7; /* lighten(--color-primary, 25%) */
  outline: 0;
  background-color: white;
  color: var(--color-primary-dark); /* $input-focus-color */
  box-shadow: 0 0 0 0.2rem rgba(28, 54, 100, 0.25);
}

.form-control::placeholder {
  color: var(--color-gray-500);
  opacity: 1;
}

.form-group {
  margin-bottom: 1rem;
}

.form-check {
  position: relative;
  display: block;
  padding-left: 1.25rem;
}

.form-check-input {
  position: absolute;
  margin-top: 0.3rem;
  margin-left: -1.25rem;
}

.form-check-label {
  margin-bottom: 0;
}

.input-group {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
}

.input-group > .form-control {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}

/* Form.scss */
.Form .form-group {
  margin-bottom: 0;
}

.Form .FormGroup + .FormGroup {
  margin-top: 1rem; /* $form-group-margin-bottom */
}

.Form .ButtonSubmit {
  margin-top: var(--gutter-md);
}

.Form--md {
  width: 100%;
  max-width: 33.33%;
}

@media (max-width: 1199.98px) {
  .Form--md {
    max-width: 50%;
  }
}

@media (max-width: 767.98px) {
  .Form--md {
    max-width: 100%;
  }
}

.Form--column.Form--center {
  margin-right: auto;
  margin-left: auto;
}

/* The MVC-only server-side error summary (the SPA surfaced these strings as toasts). */
.Form__errors {
  margin-bottom: var(--gutter-sm);
}

/* FormGroup.scss / Label.scss / Error.scss / Checkbox.scss */
.FormGroup {
  margin-right: var(--gutter-md);
}

.Label {
  font-weight: 500; /* $font-weight-bold */
}

.Error {
  display: block;
  width: 100%;
  margin-top: var(--gutter-sm);
  font-size: 80%;
  color: var(--color-danger);
}

.Error:empty {
  display: none;
}

@media not all and (hover: none) {
  .Checkbox input:hover,
  .Checkbox label:hover {
    cursor: pointer;
  }
}

/* PrimarySection pieces the login page uses (PrimarySection.scss, PrimarySectionRow.scss) */
.PrimarySection--external {
  padding-top: 7.5px; /* external-vertical-indent(4) */
  padding-bottom: 7.5px;
}

@media (min-width: 576px) and (max-width: 767.98px) {
  .PrimarySection--external { padding-top: 10px; padding-bottom: 10px; }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .PrimarySection--external { padding-top: 12.5px; padding-bottom: 12.5px; }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .PrimarySection--external { padding-top: 15px; padding-bottom: 15px; }
}

@media (min-width: 1200px) {
  .PrimarySection--external { padding-top: 17.5px; padding-bottom: 17.5px; }
}

.PrimarySection__header {
  margin-bottom: 0; /* $headings-margin-bottom */
  font-size: var(--font-size-h1);
  font-weight: 500; /* $headings-font-weight */
  line-height: var(--font-size-h1);
  text-align: center;
}

@media (max-width: 575.98px) {
  .PrimarySection__header {
    font-size: 32px; /* $font-size-h2 */
  }
}

.PrimarySection__header + .PrimarySection__content {
  margin-top: var(--gutter-md);
}

.PrimarySection .PrimarySectionRow + .PrimarySectionRow {
  margin-top: var(--gutter-lg);
}

.PrimarySectionRow p {
  margin-bottom: 0;
  text-align: justify;
}

.PrimarySectionRow__content {
  display: flex;
}

/* Login.scss */
.Login__paragraph {
  font-size: var(--font-size-lg);
}

.Login__link {
  color: var(--color-info);
}

/* PasswordField — show/hide toggle overlaid on the input's right edge (MVC-only,
   no legacy counterpart; see Views/Login/Index.cshtml). The control keeps its own
   border/radius; the button floats inside it so the field renders as one box. */
.PasswordField {
  position: relative;
}

.PasswordField__control.form-control {
  padding-right: 2.5rem;
}

.PasswordField__toggle {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 4; /* above the focused .form-control (BS4 input-group focus z-index 3) */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  padding: 0;
  border: 0;
  border-radius: 0 0.25rem 0.25rem 0;
  background: transparent;
  color: var(--color-gray-500);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.PasswordField__toggle:hover,
.PasswordField__toggle[aria-pressed="true"] {
  color: var(--color-primary);
}

.PasswordField__toggle:focus {
  outline: 0;
}

.PasswordField__toggle:focus-visible {
  outline: 2px solid var(--color-info);
  outline-offset: -2px;
}

/* ---------- Header search autocomplete (roadmap 5.8) ----------
   The dropdown families COPIED VERBATIM from the compiled legacy bundle
   (LegacySpa main.*.chunk.css: Autocomplete.scss, AutocompleteItem.scss,
   SearchAutocompleteItem.scss) — they live here rather than in the extracted
   view-grid.css because the header autocomplete rides the chrome on EVERY page.
   Supporting bits the chrome set didn't carry yet: the xl/xs icon sizes, the
   menu loader (Loader.scss + bootstrap spinner incl. its keyframes — the
   extractor drops @keyframes, so pages relying on view-grid.css alone show a
   static spinner; here the chrome carries its own), the reboot h6 semantics
   scoped to the item title, and the legacy '.Input .autocomplete>div' width
   rule re-scoped to the 2.1 header form (which has no .Input wrapper). */

.Icon--xs { width: 12px; min-width: 12px; height: 12px; min-height: 12px; }
.Icon--xl { width: 28px; min-width: 28px; height: 28px; min-height: 28px; }

.HeaderSearch .autocomplete > div { width: 100%; }

.Autocomplete__menu{position:absolute;z-index:1;width:100%;max-height:250px;overflow:auto;border:1px solid #adb5bd;border-radius:.2rem;background:#fff}
.Autocomplete__menu--noMenu{display:none}
.AutocompleteItem{display:flex;padding:.25rem .5rem;font-size:14px}
.AutocompleteItem--start{justify-content:flex-start}
.AutocompleteItem--center{justify-content:center}
.AutocompleteItem--end{justify-content:flex-end}
.AutocompleteItem--highlighted{background-color:#ebf1fa}
@media (-ms-high-contrast:none),not all and (hover:none){.AutocompleteItem--hoverable:hover{background-color:#ebf1fa;cursor:pointer}}
/* 2026-10-12: navigable suggestion rows are real anchors (search.js) — keep the
   row's own type colours, no link colour/underline from the anchor defaults. */
a.AutocompleteItem,a.AutocompleteItem:hover,a.AutocompleteItem:focus{color:inherit;text-decoration:none}
.SearchAutocompleteItem{display:flex;justify-content:space-between;align-items:center;width:100%}
.SearchAutocompleteItem--company.SearchAutocompleteItem--exact .SearchAutocompleteItem__title{color:#0064f0}
@media (-ms-high-contrast:none),not all and (hover:none){.SearchAutocompleteItem--company:hover{text-decoration:none}}
.SearchAutocompleteItem--company .SearchAutocompleteItem__title{color:#6c757d}
.SearchAutocompleteItem--company .SearchAutocompleteItem__icon,.SearchAutocompleteItem--company .SearchAutocompleteItem__tag{color:#0064f0}
.SearchAutocompleteItem--company .Icon--play-circle{color:#d4af37}
.SearchAutocompleteItem--research.SearchAutocompleteItem--exact .SearchAutocompleteItem__title{color:#b21414}
@media (-ms-high-contrast:none),not all and (hover:none){.SearchAutocompleteItem--research:hover{text-decoration:none}}
.SearchAutocompleteItem--research .SearchAutocompleteItem__title{color:#6c757d}
.SearchAutocompleteItem--research .SearchAutocompleteItem__icon,.SearchAutocompleteItem--research .SearchAutocompleteItem__tag{color:#b21414}
.SearchAutocompleteItem--research .Icon--play-circle{color:#d4af37}
.SearchAutocompleteItem--news.SearchAutocompleteItem--exact .SearchAutocompleteItem__title{color:#6f42c1}
@media (-ms-high-contrast:none),not all and (hover:none){.SearchAutocompleteItem--news:hover{text-decoration:none}}
.SearchAutocompleteItem--news .SearchAutocompleteItem__title{color:#6c757d}
.SearchAutocompleteItem--news .SearchAutocompleteItem__icon,.SearchAutocompleteItem--news .SearchAutocompleteItem__tag{color:#6f42c1}
.SearchAutocompleteItem--news .Icon--play-circle{color:#d4af37}
.SearchAutocompleteItem--latestVideos.SearchAutocompleteItem--exact .SearchAutocompleteItem__title{color:#b29126}
@media (-ms-high-contrast:none),not all and (hover:none){.SearchAutocompleteItem--latestVideos:hover{text-decoration:none}}
.SearchAutocompleteItem--latestVideos .SearchAutocompleteItem__title{color:#6c757d}
.SearchAutocompleteItem--latestVideos .SearchAutocompleteItem__icon,.SearchAutocompleteItem--latestVideos .SearchAutocompleteItem__tag{color:#b29126}
.SearchAutocompleteItem--latestVideos .Icon--play-circle{color:#d4af37}
.SearchAutocompleteItem__column{display:flex;align-items:center}
.SearchAutocompleteItem__column--heading{justify-content:flex-start;padding-right:.5rem;overflow:hidden}
.SearchAutocompleteItem__column--additionalInfo{flex:1 1;justify-content:flex-end;white-space:nowrap}
.SearchAutocompleteItem__title{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.SearchAutocompleteItem__icon+.SearchAutocompleteItem__title{margin-left:.5rem}
.SearchAutocompleteItem__date{font-size:14px;color:#6c757d}
.SearchAutocompleteItem__tag+.SearchAutocompleteItem__date{margin-left:.25rem}
.SearchAutocompleteItem__tag{font-weight:500;text-align:right}
.SearchAutocompleteItem__extra-icon{margin-right:.3rem}

/* bootstrap reboot h6, scoped to the item title (the chrome carries no global
   heading reset) */
.SearchAutocompleteItem h6 { margin: 0 0 .5rem; font-size: 1rem; font-weight: 500; line-height: 1.2; color: inherit; }

/* Loader.scss + bootstrap spinner (menu loading state) */
.Loader{display:inline-block}
.spinner-border{display:inline-block;width:2rem;height:2rem;vertical-align:text-bottom;border:.25em solid;border-right:.25em solid transparent;border-radius:50%;animation:spinner-border .75s linear infinite}
.spinner-border-sm{width:1rem;height:1rem;border-width:.2em}
@keyframes spinner-border{to{transform:rotate(1turn)}}

/* StatsElementGridFootnote.scss — only in the deployed production SPA
   (my.ipointelligence.com main.2b2b1e5f.chunk.css, build 2026-07-07), absent from
   the imported sources/committed LegacySpa css, so it can't ride the extracted
   view-grid.css; rule verbatim from the production stylesheet. Rendered by
   view-stats.js renderGridFootnote (the largest-IPO additional-stats grids). */
.StatsElementGridFootnote{margin-top:12px;font-size:13px;text-align:justify}

/* Stats popup Filter (2026-10-29): the selected Sector/Industry and Underwriter tags scroll after
   about three rows, so many selections don't push the Filter/Cancel buttons off the screen. */
#stats-filter-modal .Select .react-dropdown-tree-select .dropdown .dropdown-trigger .tag-list{max-height:6.5rem;overflow-y:auto}

/* Grids whose columns stretch to their width (view-grid.js isColumnsFitGrid — the screens landing pages,
   2026-10-29): the stretched widths can add up to a fraction of a pixel more than the grid, which showed a
   horizontal scrollbar over the last row (the legacy SPA has it too). Those columns always fit, so no scrollbar. */
.Grid--columnsFit .ag-center-cols-viewport{overflow-x:hidden}

/* ---------- /company tab panels (2026-10-08 — Views/Company/Index.cshtml + js/company-profile.js) ----------
   The tabs switch client-side: every tab's content renders once, each in a plain
   .CompanyTabPanel wrapper, and the script toggles [hidden]. The UA stylesheet already
   hides [hidden] elements; restated here so a future display rule on the wrapper can't
   silently undo it. */
.CompanyTabPanel[hidden] {
  display: none;
}

/* ---------- /company mobile layout (2026-10-12 — Views/Company/_ProfileTab.cshtml,
   Views/Company/Index.cshtml, js/company-profile.js) ----------
   The 5.1 port shipped desktop-only (the recorded cut line); this is the legacy's
   mobile branch. CompanyProfile.tsx swaps CompanyDesktopProfile for CompanyMobileProfile
   below lg (profileMobileBreakpoints = md/sm/xs): ONE column, no sidebar chrome, the
   leaves in CompanyMobileProfile.tsx's order, no Investors. The server keeps the single
   desktop DOM (the parity reference); below 992px the two columns dissolve
   (display: contents — their padding, border and background go with the boxes) so every
   section row becomes a flex item of .CompanyDesktopProfile, and data-profile-section
   (set on each row by _ProfileTab.cshtml, data-* only so the desktop class strings stay
   byte-identical) carries the mobile order. The rows' own breakpoint margins, the
   18px md-down titles and the Step/CompanyHeader mobile rules already ride the
   extracted view-grid.css. */
@media screen and (max-width: 991.98px) { /* screen only: print measures against the default paper (~700px), not the A3 sheet — keep the desktop profile on paper like the legacy */
  .CompanyDesktopProfile {
    flex-direction: column;
  }

  .CompanyDesktopProfile > .CompanyProfileSideBar,
  .CompanyDesktopProfile > .CompanyProfileContent {
    display: contents;
  }

  /* CompanyMobileProfile.tsx, top to bottom. */
  .CompanyDesktopProfile [data-profile-section="steps"] { order: 1; }
  .CompanyDesktopProfile [data-profile-section="overview"] { order: 2; }
  .CompanyDesktopProfile [data-profile-section="analystNotesAndNews"] { order: 3; }
  .CompanyDesktopProfile [data-profile-section="privateCompanyData"] { order: 4; }
  .CompanyDesktopProfile [data-profile-section="research"] { order: 5; }
  .CompanyDesktopProfile [data-profile-section="secFilings"] { order: 6; }
  .CompanyDesktopProfile [data-profile-section="secondaryOfferingData"] { order: 7; }
  .CompanyDesktopProfile [data-profile-section="offeringData"] { order: 8; }
  .CompanyDesktopProfile [data-profile-section="capitalization"] { order: 9; }
  .CompanyDesktopProfile [data-profile-section="underwriters"] { order: 10; }
  .CompanyDesktopProfile [data-profile-section="insights"] { order: 11; }
  .CompanyDesktopProfile [data-profile-section="financialData"] { order: 12; }
  .CompanyDesktopProfile [data-profile-section="balanceSheet"] { order: 13; }
  .CompanyDesktopProfile [data-profile-section="performanceChart"] { order: 14; }
  .CompanyDesktopProfile [data-profile-section="fundamentalComparison"] { order: 15; }
  .CompanyDesktopProfile [data-profile-section="valuationComparison"] { order: 16; }
  .CompanyDesktopProfile [data-profile-section="technicalComparison"] { order: 17; }
  .CompanyDesktopProfile [data-profile-section="keyShareholders"] { order: 18; }
  .CompanyDesktopProfile [data-profile-section="management"] { order: 19; }
  .CompanyDesktopProfile [data-profile-section="lockUpPeriod"] { order: 20; }
  .CompanyDesktopProfile [data-profile-section="milestones"] { order: 21; }
  .CompanyDesktopProfile [data-profile-section="companyData"] { order: 22; }

  /* CompanyProfileSideBar renders Investors; CompanyMobileProfile does not. */
  .CompanyDesktopProfile [data-profile-section="investors"] {
    display: none;
  }
}

/* ElementsHeightExpander.scss — the mobile Company Overview clip ("Show more"/"Show
   less", company-profile.js mountOverviewExpander). Absent from the extract. */
.ElementsHeightExpander {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ElementsHeightExpander__content + .ElementsHeightExpander__button {
  margin-top: var(--gutter-xs);
}

/* DropdownNav.scss + DropdownButton.scss + DropdownItem.scss (hand-compiled;
   $dropdown-max-height = 250px, variables.scss's later definition wins). The company
   page renders the DropdownNav beside the TabsNav and shows ONE per breakpoint
   (InnerNav's mobileBreakpoints = sm/xs). Bootstrap's .dropdown-menu/.dropdown-item/
   .dropdown-toggle::after and .btn-outline-primary ride the extract. */
.DropdownButton.dropdown {
  position: relative;
}

.DropdownButton .dropdown-toggle,
.DropdownButton .dropdown-menu {
  max-height: 250px;
  overflow-y: auto;
}

.DropdownButton .dropdown-toggle {
  display: flex;
  justify-content: center;
  align-items: center;
}

.DropdownItem .active {
  color: #fff;
  background: var(--color-primary);
}

.DropdownNav .BackNavButton + .DropdownButton {
  margin-top: var(--gutter-sm);
}

@media screen and (max-width: 991.98px) {
  .DropdownNav .DropdownButton .dropdown-toggle,
  .DropdownNav .DropdownButton .dropdown-menu {
    width: 100%;
  }
}

.CompanyTabsContent__navigation > .DropdownNav {
  display: none;
}

@media screen and (max-width: 767.98px) { /* screen only: the full TabsNav prints, as on the legacy */
  .CompanyTabsContent__navigation > .DropdownNav {
    display: block;
  }

  .CompanyTabsContent__navigation > .TabsNav > .TabsContainer {
    display: none;
  }

  /* TabsNav's 40px bottom padding belongs to the strip the legacy no longer renders here. */
  .CompanyTabsContent__navigation > .TabsNav {
    padding-bottom: 0;
  }
}

/* ---------- /company Diluted Share Calculation popover (2026-10-12 — js/company-profile.js
   capitalizationDataCell + js/view-tooltip.js renderDilutedShares) ----------
   Hand-compiled from the legacy diluted-shares-tooltip SCSS pair
   (DilutedSharesTooltipContent.scss + DilutedSharesTitleWrapper.scss) — the popover was
   missed by the 5.1 profile port, and its rules are absent from the extracted view-grid.css
   (the shell, .Tooltip--ml, .TooltipText and the RotatedGrid rules it leans on ARE there).
   $tooltip-indent-horizontal = $gutter-md; $color-primary-lightest = #ebf1fa (the
   AutocompleteItem highlight above); $font-size-xxs = 12px (no custom property — xs is the
   smallest token). The nesting artefacts of the SCSS (`__description .RotatedGrid …`,
   `__header__title`, …) are dead selectors in the production bundle and are not carried.
   The descendant chains out-specify view-grid.css's generic .RotatedGridRow__* rules
   (bold 130px titles, ellipsis data cells) regardless of load order. */
.DilutedSharesTitleWrapper {
  display: flex;
  overflow: hidden;
}

.DilutedSharesTitleWrapper__content {
  display: flex;
  flex-wrap: wrap;
}

.DilutedSharesContent__header,
.DilutedSharesContent__description,
.DilutedSharesContent__footnote,
.DilutedSharesContent .RotatedGridWithElements {
  padding-right: var(--gutter-md);
  padding-left: var(--gutter-md);
}

.DilutedSharesContent .RotatedGridWithElements .RotatedGrid .RotatedGridRow__title {
  width: 100%;
  font-weight: normal;
}

.DilutedSharesContent .RotatedGridWithElements .RotatedGrid .RotatedGridRow__data {
  width: 80%;
  text-align: right;
}

.DilutedSharesContent .RotatedGridWithElements__title {
  width: 100%;
}

.DilutedSharesContent .RotatedGridWithElements__grid {
  margin-top: var(--gutter-sm);
  table-layout: fixed;
}

.DilutedSharesContent__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.DilutedSharesContent__info {
  font-weight: bold;
}

.DilutedSharesContent__description,
.DilutedSharesContent__tableData,
.DilutedSharesContent__footnote {
  margin-top: var(--gutter-sm);
  font-size: var(--font-size-sm);
}

.DilutedSharesContent__dilutiveSharesData {
  margin-top: var(--gutter-sm);
  padding-top: 1px;
  padding-bottom: 1px;
  font-size: var(--font-size-sm);
  background-color: #ebf1fa; /* $color-primary-lightest */
}

.DilutedSharesContent__dilutiveSharesData .RotatedGridWithElements .RotatedGrid .RotatedGridRow__title {
  width: 100%;
  padding-bottom: 5px;
}

.DilutedSharesContent__dilutiveSharesData .RotatedGridWithElements .RotatedGrid .RotatedGridRow__data {
  width: 80%;
  padding-bottom: 5px;
  text-align: right;
}

/* Profile-DilutedShareCalc (2026-11-12): the legacy's fixed 100%/80% split left the data
   cell ~150px of the 375px popover and view-grid.css's ellipsis cut the exercise price
   off long share counts ("1,774,342,693  at  2..." — 2.91 in Profile_OptionsDetails).
   The dilutive rows now size to content: the title column only as wide as
   "Dilutive Shares:", the rest to the "shares at price" text, which no longer clips. */
.DilutedSharesContent__dilutiveSharesData .RotatedGridWithElements .RotatedGrid {
  table-layout: auto;
}

.DilutedSharesContent__dilutiveSharesData .RotatedGridWithElements .RotatedGrid .RotatedGridRow__title {
  width: 1%;
  white-space: nowrap;
}

.DilutedSharesContent__dilutiveSharesData .RotatedGridWithElements .RotatedGrid .RotatedGridRow__data {
  width: auto;
  overflow: visible;
  text-overflow: clip;
}

.DilutedSharesContent__totalTableData {
  margin-top: var(--gutter-sm);
  padding-top: 1px;
  font-size: var(--font-size-sm);
}

.DilutedSharesContent__totalTableData .RotatedGridWithElements .RotatedGrid .RotatedGridRow__data {
  width: 80%;
  font-weight: 800;
  text-align: right;
}

.DilutedSharesContent__footnote {
  font-size: 12px; /* $font-size-xxs */
}

/* ---------- Print (Bootstrap 4.3 _print.scss, then AppPrint.scss) ---------- */

/* Bootstrap 4.3's print block, verbatim from the legacy bundle (it precedes AppPrint
   there too). Missed by the chrome port — only the reboot/.container/.btn pieces were
   inlined — and the omission is why "Print Profile" needed an 80% custom scale
   (Jacob, 2026-10-12): `@page { size: a3 }` ($print-page-size) lays the printout out
   on an A3 sheet, which the browser then fits onto whatever paper is selected, and
   `body, .container { min-width: 992px }` ($print-body-min-width = lg) keeps the
   desktop layout in print. Printing to PDF therefore produces A3 pages, exactly like
   the legacy site. AppPrint.scss's rules below still win where they overlap (html/body
   a: no underline). */
@media print {
  *,
  *::before,
  *::after {
    text-shadow: none !important;
    box-shadow: none !important;
  }

  a:not(.btn) {
    text-decoration: underline;
  }

  abbr[title]::after {
    content: " (" attr(title) ")";
  }

  pre {
    white-space: pre-wrap !important;
  }

  pre,
  blockquote {
    border: 1px solid var(--color-gray-500);
    page-break-inside: avoid;
  }

  thead {
    display: table-header-group;
  }

  tr,
  img {
    page-break-inside: avoid;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }

  @page {
    size: a3; /* $print-page-size */
  }

  body,
  .container {
    min-width: 992px !important; /* $print-body-min-width: map-get($grid-breakpoints, "lg") */
  }

  .navbar {
    display: none;
  }

  .badge {
    border: 1px solid #000;
  }

  .table {
    border-collapse: collapse !important;
  }

  .table td,
  .table th {
    background-color: #fff !important;
  }

  .table-bordered th,
  .table-bordered td {
    border: 1px solid var(--color-gray-300) !important;
  }

  .table-dark {
    color: inherit;
  }

  .table-dark th,
  .table-dark td,
  .table-dark thead th,
  .table-dark tbody + tbody {
    border-color: var(--color-gray-300);
  }

  .table .thead-dark th {
    color: inherit;
    border-color: var(--color-gray-300);
  }
}

/* AppPrint.scss base */
@page {
  margin: 1.5cm;
}

@media print {
  html,
  body {
    color: black;
  }

  html a,
  body a {
    text-decoration: none !important; /* AppPrint.scss carries the same !important */
    color: black;
  }
}

/* ---------- /change-password (2026-09-16, MVC-only account tab — Views/Account/ChangePassword.cshtml) ----------
   The PasswordLayout + PasswordRules blocks below are shared with /reset-password
   (Views/ResetPassword/Index.cshtml) since 2026-10-08 — same two-column look, same
   live checklist. PageHelp stays /change-password-only for now. */

/* Page header + "Help for this page" (Salesforce-style: the link sits at the header's
   right edge; on small screens it drops under the centered h1). The panel is a plain
   [hidden] toggle — account.js initPageHelp. */
.PageHelp {
  position: relative;
}

.PageHelp + .PrimarySection__content {
  margin-top: var(--gutter-md); /* the header + content adjacency rule, kept across the wrapper */
}

.PageHelp__toggle {
  position: absolute;
  top: 0.5rem;
  right: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--gutter-xs);
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: var(--font-size-sm);
  color: var(--color-info);
  cursor: pointer;
}

.PageHelp__toggle:hover {
  color: var(--link-hover-color);
  text-decoration: underline;
}

.PageHelp__toggle:focus {
  outline: 0;
}

.PageHelp__toggle:focus-visible {
  outline: 2px solid var(--color-info);
  outline-offset: 2px;
}

.PageHelp__toggle .Icon {
  color: var(--color-attention);
}

.PageHelp__panel {
  margin-top: var(--gutter-md);
  padding: var(--gutter-md);
  border: 1px solid var(--color-gray-300);
  border-radius: 0.25rem;
  background: var(--color-gray-100);
  font-size: var(--font-size-sm);
}

.PageHelp__panel[hidden] {
  display: none;
}

.PageHelp__title {
  margin: 0 0 var(--gutter-sm);
  font-size: var(--font-size-md);
  font-weight: 700;
}

.PageHelp__list {
  margin: 0;
  padding-left: 1.25rem;
}

.PageHelp__list li + li {
  margin-top: var(--gutter-xs);
}

@media (max-width: 767.98px) {
  .PageHelp__toggle {
    position: static;
    display: flex;
    margin: var(--gutter-sm) 0 0 auto;
  }
}

/* PasswordLayout (shared by /change-password and /reset-password): two columns on
   md+, the form left and the live requirements checklist right. The doubled
   selectors outrank view-grid.css's single-class .Form / .Form--lg rules (that sheet
   loads after app.css) — its 50% max-width is meant for a solo form. */
.PasswordLayout {
  display: flex;
  align-items: flex-start;
  gap: var(--gutter-lg);
}

.PasswordLayout__form.Form--lg {
  flex: 1 1 50%;
  max-width: 100%;
  margin-top: 0;
}

.PasswordLayout__guide {
  flex: 1 1 50%;
  min-width: 0;
}

@media (max-width: 767.98px) {
  .PasswordLayout {
    flex-direction: column;
  }

  .PasswordLayout__form.Form--lg,
  .PasswordLayout__guide {
    flex-basis: auto;
    width: 100%;
  }

  .PasswordLayout__guide {
    order: -1; /* stacked, the rules read BEFORE the fields */
  }
}

/* The requirements checklist: an empty ring per rule that fills green with a check as
   the typed value satisfies it (account.js bindPasswordRules toggles .is-met). */
.PasswordRules {
  margin: var(--gutter-md) 0 0;
  padding: 0 0 0 var(--gutter-lg);
  list-style: none;
}

.PasswordRules__item {
  display: flex;
  align-items: center;
  gap: var(--gutter-sm);
}

.PasswordRules__item + .PasswordRules__item {
  margin-top: var(--gutter-sm);
}

.PasswordRules__icon {
  display: inline-flex;
  flex: 0 0 18px;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 2px solid var(--color-gray-500);
  border-radius: 50%;
  color: #fff;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.PasswordRules__icon .Icon {
  display: none;
  width: 10px;
  height: 10px;
}

.PasswordRules__item.is-met {
  color: var(--color-success);
}

.PasswordRules__item.is-met .PasswordRules__icon {
  border-color: var(--color-success);
  background: var(--color-success);
}

.PasswordRules__item.is-met .PasswordRules__icon .Icon {
  display: block;
}

/* Screen-reader-only met/not-met state (the ring itself is aria-hidden). */
.PasswordRules__state {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  white-space: nowrap;
}

/* Natural-language screen modal + trigger (2026-10-15) — hand-authored, no legacy counterpart (a recorded addition). The modal
   reuses the ActionModal chrome; these rules size the dialog and lay out the body. The modal's helper text is black, not
   Bootstrap's muted gray (analysts' 2026-10-29 review: the gray read as disabled). */
.AskScreenModal { max-width: 640px; }
.AskScreen__body { width: 100%; }
.AskScreen__hint { margin: 0 0 .75rem; color: #000; font-size: .875rem; }
.AskScreen__input { width: 100%; resize: vertical; margin-bottom: .75rem; }
.AskScreen__problems { margin: 0 0 .75rem; padding: .5rem .75rem; border: 1px solid #f5c6cb; border-radius: .25rem; background: #f8d7da; color: #721c24; font-size: .875rem; }
.AskScreen__problem + .AskScreen__problem { margin-top: .25rem; }
/* The trigger shares the wizard's header action row: it fills the room left of the 0-width ButtonsList--header (Next hugs
   the right edge) and centers its button in it; the row stacks on mobile (directionMdDownColumn) so it sits above Next. */
.AskScreen__trigger { display: flex; flex: 1 1 auto; min-width: 0; justify-content: center; align-items: center; margin-bottom: 1rem; }
@media (max-width: 767.98px) { .AskScreen__trigger { margin-top: 1rem; } } /* stacked: clear the "My Screens" title like Wizard__actions does */
.AskScreen__columns { margin-bottom: .75rem; }
.AskScreen__columnsHeader { display: flex; align-items: center; justify-content: flex-start; }
.AskScreen__columnsPicker { max-height: 220px; overflow: auto; border: 1px solid #dee2e6; border-radius: .25rem; padding: .5rem .75rem .25rem; margin-top: .5rem; }
.AskScreen__columnGroup { margin: 0 0 .5rem; padding: 0; border: 0; }
.AskScreen__columnGroup legend { font-size: .8125rem; font-weight: 600; margin: 0 0 .25rem; width: auto; }
.AskScreen__column { display: inline-flex; align-items: center; margin: 0 .75rem .25rem 0; font-size: .8125rem; cursor: pointer; }
.AskScreen__column input { margin: 0 .3rem 0 0; }
.AskScreen__columnsNote { margin: .35rem 0 0; font-size: .75rem; color: #000; }

/* AI disclosure badge (2026-10-15): Anthropic's usage policy requires AI-driven interactions to
   be identified to the user — worn by the natural-language screen trigger, the modal header
   and the disclosure line. Brand gold on navy, like the header Request button. */
.AiBadge { display: inline-block; vertical-align: middle; margin-left: .4rem; padding: .1rem .45rem; border-radius: 999px; background: #d4af37; color: #0b1f3a; font-size: .6875rem; font-weight: 700; letter-spacing: .02em; line-height: 1.3; text-transform: uppercase; white-space: nowrap; }
.Modal__header .AiBadge { position: relative; top: -2px; }
.AskScreen__disclosure { margin: -.35rem 0 .75rem; font-size: .75rem; color: #000; }

/* ---------- Analysts' 2026-11 review (Matt's list) ---------- */

/* Bootstrap 4.3+ reboot ($enable-pointer-cursor-for-buttons): every enabled button shows the
   hand. The legacy bundle carried the rule; the hand-ported reboot above did not, so bare
   <button> controls such as the quick bar's US / Non-US / Global and Month / 90 Days / YTD text
   buttons (TextSelect__textButton) kept the UA arrow while their <li> wrapper showed the hand. */
button:not(:disabled),
[type="button"]:not(:disabled),
[type="reset"]:not(:disabled),
[type="submit"]:not(:disabled) {
  cursor: pointer;
}

/* /company: CompanyContent.scss pads the section top by $gutter-xs (4px) over the
   PrimarySection--external indent (view-grid.css lands it after this file); the review asked for
   a little more air above the company name — 10px. */
.PrimarySection.CompanyContent {
  padding-top: 10px;
}

/* /company Analyst Notes & News: headlines wrap instead of truncating. The legacy clamps
   NewsItem__link.profile to one nowrap line with an ellipsis (two lines where -webkit-line-clamp
   is supported); the review asked for the whole headline. The tags keep their single line at the
   right edge. The descendant chains out-specify view-grid.css's .NewsItem__* rules whatever the
   load order. */
.CompanyAnalystNotesAndNews .NewsItem__content.profile {
  white-space: normal;
}

.CompanyAnalystNotesAndNews .NewsItem__link.profile {
  overflow: visible;
  white-space: normal;
  text-overflow: clip;
}

.CompanyAnalystNotesAndNews .NewsItem__content.profile .NewsItemTags {
  flex-shrink: 0;
  white-space: nowrap;
}

/* /company lock-up popover (CompanyProfileSteps): a little wider than Tooltip--md's 300px so a
   "… shares on Jan 1, 2027" row keeps its "on" on the line. The modifier rides the Razor wrapper
   (_ProfileTab.cshtml); view-tooltip.js copies the wrapper's classes onto the portal, where the
   width applies. */
.Tooltip.CompanyProfileStepsTooltip .react-tooltip-lite {
  width: 340px;
}

/* FullCalendar renders the day numbers and column headers as href-less anchors. FullCalendar
   5.0's stylesheet has no reset for them (5.1 added one), so Bootstrap's link color and hover
   underline bled through on the master calendar. */
.fc a:not([href]) {
  color: inherit;
  text-decoration: inherit;
}

/* Screens pages + /screens/add: the "My Screens" additional action's content box is absolutely
   positioned, full width, and straddles the content's top edge (PrimarySectionAdditionalAction.scss),
   so it lay over the top third of the wizard's header Next button and took its clicks (the legacy
   had the same dead zone). Only the box's own content takes the pointer now. */
.PrimarySectionAdditionalAction .InnerComponent__content {
  pointer-events: none;
}

.PrimarySectionAdditionalAction .InnerComponent__content > * {
  pointer-events: auto;
}

/* /company Financials: the stub-period column borders (TableRow.scss). The legacy
   CompanyProfileTable effect tags the StubsCell / .Tp / .Mp / .qm cells' TableCells and each row's
   first and last of them; company-profile.js markStubsCells is the port. Annual term only, as the
   legacy. The rules were missing from the extracted view-grid.css. */
.annual .TableCell.stubs-table-cell.first-stubs-table-cell {
  border-left: 1px solid #dee2e6;
}

.annual .TableCell.stubs-table-cell.last-stubs-table-cell {
  border-right: 1px solid #dee2e6;
}

/* Current-columns drag and drop (ViewColumnsAddSelected — view-toolbar.js bindDragSource): a
   pointer-driven port of react-sortable-hoc's grab. The pressed card follows the pointer as a
   floating copy (the helper, appended to body), its own slot fades, and the slot under the pointer
   highlights as the drop target. touch-action: none lets a touch pointer drag instead of scroll. */
.DragDropItem--draggable {
  cursor: grab;
  touch-action: none;
}

.DragDrop--dragging .DragDropItem--draggable {
  cursor: grabbing;
}

.DragDropItem--draggable[data-drag-source] .ViewColumnsAddSelectedItem {
  opacity: 0.35;
}

.DragDropItem--draggable[data-drag-over] .ViewColumnsAddSelectedItem__content {
  outline: 2px dashed #3261b4;
  outline-offset: -2px;
}

.DragDropHelper {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1100;
  margin: 0;
  pointer-events: none;
  opacity: 0.9;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
}

body.DragDrop--dragging {
  user-select: none;
}