/**
 * Crimson Wave — centralized design system
 * Tokens + public-site UI/UX/responsive overlay.
 * Does not change routes, APIs, or form submit logic.
 */

:root {
  --color-primary-navy: #161C34;
  --color-secondary-navy: #202946;
  --color-navy-light: #293555;
  --color-primary-red: #AE2129;
  --color-dark-red: #7E161D;
  --color-hover-red: #BE2A33;
  --color-white: #FFFFFF;
  --color-off-white: #F5F5F3;
  --color-light-gray: #F5F7FC;
  --color-border: #E3E5EA;
  --color-text-primary: #161C34;
  --color-text-secondary: #646978;
  --color-text-muted: #969BA7;
  --color-text-on-navy: #FFFFFF;
  --color-text-on-navy-muted: #E3E5EA;
  --color-text-on-red: #FFFFFF;
  --color-success: #16A34A;
  --color-warning: #D97706;
  --color-danger: #DC2626;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  --container: min(100% - 32px, 1360px);
  --radius-btn: 12px;
  --radius-card: 16px;
  --touch: 44px;

  --font-sans: Inter, Manrope, "IBM Plex Sans", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
  --font-display: Manrope, Inter, "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --fs-h1: clamp(1.875rem, 4vw, 3.5rem);
  --fs-h2: clamp(1.625rem, 3vw, 2.5rem);
  --fs-h3: clamp(1.3125rem, 2vw, 1.75rem);
  --fs-h4: clamp(1.125rem, 1.4vw, 1.375rem);
  --fs-body: clamp(0.96875rem, 0.4vw, 1.125rem);
  --fs-small: 0.875rem;
  --fs-caption: 0.8125rem;
  --fs-label: 0.75rem;
  --lh: 1.55;

  --glass: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(255, 255, 255, 0.55);
  --glass-dark: rgba(22, 28, 52, 0.88);
  --shadow-card: 0 12px 40px rgba(22, 28, 52, 0.08);
  --shadow-red: 0 8px 20px rgba(153, 27, 27, 0.22);
  --shadow-navy: 0 8px 20px rgba(22, 28, 52, 0.22);

  --z-base: 1;
  --z-sticky: 50;
  --z-dropdown: 100;
  --z-overlay: 500;
  --z-modal: 1000;
  --z-toast: 1200;

  /* Keep existing overlay/token names in sync */
  --brand-maroon: #AE2129;
  --brand-maroon-hover: #BE2A33;
  --brand-maroon-dark: #7E161D;
  --brand-maroon-soft: #FEF2F2;
  --brand-maroon-light: #FEF2F2;
  --brand-maroon-border: #FECACA;
  --brand-maroon-bright: #BE2A33;
  --brand-blue: #161C34;
  --brand-blue-hover: #202946;
  --brand-blue-medium: #202946;
  --brand-blue-soft: #F5F7FC;
  --brand-blue-light: #F5F5F3;
  --brand-blue-border: #E3E5EA;
  --brand-blue-muted: #646978;
  --brand-blue-mist: #969BA7;
  --navy: #161C34;
  --navy-foreground: #FFFFFF;
  --crimson: #AE2129;
  --crimson-foreground: #FFFFFF;
  --color-navy: #161C34;
  --color-crimson: #AE2129;
  --color-primary: #161C34;
  --color-background: #F5F5F3;
  --color-card: #FFFFFF;
  --color-foreground: #161C34;
  --background: #F5F5F3;
  --foreground: #161C34;
  --card: #FFFFFF;
  --card-foreground: #161C34;
  --muted: #F5F7FC;
  --muted-foreground: #646978;
  --primary: #161C34;
  --primary-foreground: #FFFFFF;
  --secondary: #F5F7FC;
  --secondary-foreground: #161C34;
  --accent: #AE2129;
  --accent-foreground: #FFFFFF;
  --destructive: #DC2626;
  --destructive-foreground: #FFFFFF;
  --input: #E3E5EA;
  --ring: #202946;
  --popover: #FFFFFF;
  --popover-foreground: #161C34;
  --sidebar: #161C34;
  --sidebar-foreground: #FFFFFF;
  --sidebar-primary: #AE2129;
  --sidebar-primary-foreground: #FFFFFF;
  --sidebar-accent: #202946;
  --sidebar-accent-foreground: #FFFFFF;
  --sidebar-border: #202946;
  --sidebar-ring: #AE2129;
  --surface: #FFFFFF;
  --white: #FFFFFF;
  --warm-white: #F5F5F3;
  --surface-alt: #F5F7FC;
  --border: #E3E5EA;
  --text-primary: #161C34;
  --text-secondary: #646978;
  --text-muted: #646978;
  --status-success: #16A34A;
  --status-warning: #D97706;
  --status-danger: #DC2626;
  --status-info: #202946;
  --ams-primary: #AE2129;
  --ams-secondary: #161C34;
  --ams-sidebar: #161C34;
  --ams-button: #AE2129;
  --ams-text: #161C34;
  --ams-surface: #FFFFFF;
  --ams-muted: #646978;
  --ams-border: #E3E5EA;
  --ams-soft: #F5F5F3;
}

/* Contain width without body overflow-x:hidden (that hides bugs instead of fixing layout). */
html {
  max-width: 100%;
}
#app {
  max-width: 100%;
  min-width: 0;
}

html,
body,
#app {
  background-color: var(--color-off-white);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh);
}

img,
video,
canvas {
  max-width: 100%;
  height: auto;
}

body.ams-public img {
  object-fit: contain;
}

/* ---------- Contrast ---------- */
body.ams-public,
body.ams-public main,
body.ams-seo {
  color: var(--color-text-primary);
}

body.ams-public h1,
body.ams-public h2,
body.ams-public h3,
body.ams-public h4,
body.ams-seo h1,
body.ams-seo h2,
body.ams-seo h3 {
  color: var(--color-primary-navy);
  font-family: var(--font-display);
  line-height: 1.2;
  overflow-wrap: anywhere;
}

body.ams-public h1 { font-size: var(--fs-h1); letter-spacing: -0.03em; }
body.ams-public h2 { font-size: var(--fs-h2); letter-spacing: -0.02em; }
body.ams-public h3 { font-size: var(--fs-h3); }
body.ams-public h4 { font-size: var(--fs-h4); }
body.ams-public p,
body.ams-public li { color: var(--color-text-secondary); }

body.ams-public .text-muted-foreground,
body.ams-public .text-slate-500,
body.ams-public .text-gray-500 {
  color: var(--color-text-secondary) !important;
}

body.ams-public .bg-navy,
body.ams-public section.bg-navy,
body.ams-public footer.bg-navy,
body.ams-public .bg-primary {
  background-color: var(--color-primary-navy) !important;
  color: var(--color-text-on-navy) !important;
}

body.ams-public .bg-navy h1,
body.ams-public .bg-navy h2,
body.ams-public .bg-navy h3,
body.ams-public .bg-navy h4,
body.ams-public .bg-navy p,
body.ams-public .bg-navy li,
body.ams-public .bg-navy span,
body.ams-public footer.bg-navy,
body.ams-public footer.bg-navy a,
body.ams-public footer.bg-navy h4,
body.ams-public footer.bg-navy p,
body.ams-public footer.bg-navy li {
  color: var(--color-text-on-navy) !important;
}

body.ams-public .bg-navy p,
body.ams-public .bg-navy .text-muted-foreground,
body.ams-public footer.bg-navy .text-muted-foreground,
body.ams-public footer.bg-navy p,
body.ams-public footer.bg-navy li {
  color: var(--color-text-on-navy-muted) !important;
}

body.ams-public .bg-crimson,
body.ams-public section.bg-crimson {
  background-color: var(--color-primary-red) !important;
  color: var(--color-text-on-red) !important;
}

body.ams-public .bg-crimson h1,
body.ams-public .bg-crimson h2,
body.ams-public .bg-crimson h3,
body.ams-public .bg-crimson p,
body.ams-public .bg-crimson span {
  color: #fff !important;
}

body.ams-public .bg-crimson .text-muted-foreground {
  color: #F5F5F3 !important;
}

body.ams-public section.bg-navy .rounded-2xl.border.backdrop-blur-xl,
body.ams-public section.bg-navy .rounded-2xl.border[class*="bg-white/"] {
  background: var(--glass-dark) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  color: #fff !important;
  box-shadow: var(--shadow-navy);
}

body.ams-public section.bg-navy .rounded-2xl.border.backdrop-blur-xl :is(.text-foreground, .text-navy, .text-navy-foreground, h2, h3, p, span),
body.ams-public section.bg-navy .rounded-2xl.border[class*="bg-white/"] :is(.text-foreground, .text-navy, .text-navy-foreground, h2, h3, p, span) {
  color: #fff !important;
}

/* ---------- Buttons ---------- */
body.ams-public a.bg-crimson,
body.ams-public button.bg-crimson,
body.ams-public .ams-inq-home-btn,
.ams-seo-cta {
  background: var(--color-primary-red) !important;
  color: #fff !important;
  border: 1px solid var(--color-primary-red) !important;
  border-radius: var(--radius-btn) !important;
  min-height: var(--touch);
  min-width: var(--touch);
  padding: 12px 24px !important;
  font-weight: 700;
  box-shadow: var(--shadow-red);
  transition: background-color 180ms ease, transform 180ms ease;
}

body.ams-public a.bg-crimson:hover,
body.ams-public button.bg-crimson:hover,
body.ams-public .ams-inq-home-btn:hover {
  background: var(--color-hover-red) !important;
}

body.ams-public a.bg-navy,
body.ams-public button.bg-navy,
body.ams-public a.bg-primary,
body.ams-public button.bg-primary {
  background: var(--color-primary-navy) !important;
  color: #fff !important;
  border-radius: var(--radius-btn) !important;
  min-height: var(--touch);
  padding: 12px 24px !important;
}

/* Secondary / outline controls.
 *
 * The variant is identified by its `border` class, never by a substring match on
 * the class list. `button[class*="outline"]` used to be part of this selector and
 * matched every button on the site, because the shadcn base class list contains
 * `focus-visible:outline-none`. Filled CTAs were therefore painted white while
 * their label stayed white — an invisible button that only became readable on
 * hover, when the higher-specificity `.bg-crimson:hover` rule restored the fill.
 *
 * Filled variants are excluded explicitly: this rule outranks the crimson/navy
 * background rules on source order, so without the negations a button carrying
 * both `border` and `bg-crimson` would still be washed out. */
body.ams-public button.border:not([class*="bg-crimson"]):not([class*="bg-navy"]):not([class*="bg-primary"]),
body.ams-public a.border.bg-background,
body.ams-public a.border.bg-white {
  background: #fff !important;
  color: var(--color-primary-navy) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-btn) !important;
  min-height: var(--touch);
}

body.ams-public .bg-crimson a.border,
body.ams-public .bg-crimson button.border,
body.ams-public .bg-crimson a.bg-white,
body.ams-public section.bg-crimson a:not(.bg-crimson) {
  background: #fff !important;
  color: var(--color-primary-navy) !important;
}

:focus-visible {
  outline: 3px solid var(--color-hover-red);
  outline-offset: 2px;
}

/* ---------- Header ---------- */
body.ams-public header.sticky,
body.ams-public header.border-b {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--color-border) !important;
  color: var(--color-primary-navy) !important;
}

body.ams-public header a,
body.ams-public header button {
  color: var(--color-primary-navy);
  min-height: var(--touch);
}

body.ams-public header a.bg-crimson,
body.ams-public header button.bg-crimson {
  color: #fff !important;
}

body.ams-public header img {
  max-height: 44px;
  width: auto;
}

@media (max-width: 1023px) {
  body.ams-public header nav {
    max-width: 100%;
  }
}

/* ---------- Public containers / sections ---------- */
body.ams-public main > section,
body.ams-public main > div > section {
  padding-block: clamp(40px, 6vw, 96px);
}

body.ams-public main .mx-auto,
body.ams-public footer .mx-auto {
  width: min(100%, 1360px);
  max-width: 1360px;
  padding-inline: 16px;
  box-sizing: border-box;
}

/* ---------- Cards ----------
 * A card is only painted white when it does not carry a translucent-white
 * utility. Painting every bordered card white also repainted the navy glass
 * panels (which carry bg-white/[0.03…0.06] + border-white/10 and inherit white
 * copy from section.bg-navy), which is what produced white text on a white
 * card in the product-registration and hero cards.
 *
 * The exclusion is deliberately expressed with simple negations only. An
 * ancestor negation such as :not(:is(.bg-navy) *) needs Selectors-4 complex
 * :not() support, and the failure mode when a browser disagrees is invisible
 * text — the exact defect being fixed here. Every translucent panel in the
 * bundle carries both bg-white/ and border-white/, so matching on the card's
 * own class list is sufficient and cannot be mis-parsed. */
html:not(.dark) body.ams-public .bg-card,
html:not(.dark) body.ams-public .rounded-xl.border:not([class*="bg-white/"]):not([class*="border-white/"]),
html:not(.dark) body.ams-public .rounded-2xl.border:not(.backdrop-blur-xl):not([class*="bg-white/"]):not([class*="border-white/"]) {
  border-radius: var(--radius-card) !important;
  background: #fff;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
}

html:not(.dark) body.ams-public .bg-card h3,
html:not(.dark) body.ams-public .rounded-xl.border:not([class*="bg-white/"]):not([class*="border-white/"]) h3,
html:not(.dark) body.ams-public .rounded-2xl.border:not([class*="bg-white/"]):not([class*="border-white/"]) h3 {
  color: var(--color-primary-navy);
}

html:not(.dark) body.ams-public .bg-card p,
html:not(.dark) body.ams-public .rounded-xl.border:not([class*="bg-white/"]):not([class*="border-white/"]) p {
  color: var(--color-text-secondary);
}

/* ---------- Forms ---------- */
body.ams-public input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="range"]),
body.ams-public select,
body.ams-public textarea,
body.ams-auth input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
body.ams-auth select,
body.ams-auth textarea {
  min-height: 48px;
  width: 100%;
  max-width: 100%;
  border-radius: 12px !important;
  border: 1px solid var(--color-border) !important;
  background: #fff !important;
  color: var(--color-text-primary) !important;
  font-size: 16px;
}

body.ams-public input::placeholder,
body.ams-auth input::placeholder {
  color: #969BA7;
  opacity: 1;
}

/* Radix renders its Select as a button, so the form-control block above misses
 * it and the trigger keeps its own 44px height. Restated here to keep a
 * dropdown the same height and radius as the input beside it in a two-column
 * row. The height is forced because the secondary-control rule matches the
 * same trigger through `button.border` and its negations outweigh this
 * selector. */
body.ams-public form [role="combobox"],
body.ams-auth form [role="combobox"] {
  min-height: 48px !important;
  width: 100%;
  border-radius: 12px !important;
}

body.ams-public label,
body.ams-auth label {
  color: var(--color-text-primary);
  font-weight: 600;
}

/* ---------- Tables ---------- */
body.ams-public table,
body.ams-portal table,
body.ams-admin main table {
  width: 100%;
}

body.ams-public .overflow-x-auto,
body.ams-portal .overflow-x-auto,
body.ams-admin main .overflow-x-auto {
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}

/* ---------- Modals ---------- */
[role="dialog"],
.ams-modal .box {
  width: min(720px, calc(100% - 24px));
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 16px;
}

#ams-lang-gate {
  z-index: 2000 !important;
  background:
    radial-gradient(120% 120% at 50% 0%, #202946 0%, #161C34 62%, #04101f 100%) !important;
}

#ams-lang-gate .ams-lang-card {
  width: min(420px, calc(100vw - 32px)) !important;
  background: var(--glass-dark) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
}

#ams-lang-gate h1,
#ams-lang-gate p { color: #fff !important; }
#ams-lang-gate .ams-en { background: #fff !important; color: #161C34 !important; min-height: var(--touch); }
#ams-lang-gate .ams-ar { background: #AE2129 !important; color: #fff !important; min-height: var(--touch); }

/* ---------- Footer ---------- */
body.ams-public footer {
  background: var(--color-primary-navy) !important;
  color: #E3E5EA !important;
}

body.ams-public footer a { color: #fff !important; }
body.ams-public footer a:hover { color: #FECACA !important; }

/* ---------- Chat / overlays ---------- */
#ams-chat-toggle,
#ams-chat-head {
  background: var(--color-primary-red) !important;
}
#ams-chat-panel {
  z-index: var(--z-modal);
  max-width: calc(100vw - 24px);
  max-height: 90vh;
}

/* ---------- Responsive grids (public) ---------- */
@media (max-width: 1023px) {
  body.ams-public main .lg\:grid-cols-4,
  body.ams-public main .xl\:grid-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  body.ams-public main .lg\:grid-cols-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 767px) {
  body.ams-public main .grid {
    column-gap: 12px;
    row-gap: 16px;
  }

  body.ams-public main .md\:grid-cols-2,
  body.ams-public main .md\:grid-cols-3,
  body.ams-public main .lg\:grid-cols-2,
  body.ams-public main .lg\:grid-cols-3,
  body.ams-public main .lg\:grid-cols-4,
  body.ams-public main .xl\:grid-cols-4,
  body.ams-public main .grid-cols-2,
  body.ams-public main .grid-cols-3,
  body.ams-public main .grid-cols-4,
  body.ams-public main .sm\:grid-cols-2 {
    grid-template-columns: 1fr !important;
  }

  body.ams-public section.bg-navy .grid.grid-cols-2,
  body.ams-public section.bg-navy .grid.grid-cols-4,
  body.ams-public main .grid.grid-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Keeps a CTA from spanning the viewport on a phone. `.w-full` is exempt:
   * a Radix Select trigger is a `button.border` that declares full width, and
   * shrinking it to its label left the dropdown a quarter the width of the
   * input above it. */
  body.ams-public header a:not(.w-full),
  body.ams-public header button:not(.w-full),
  body.ams-public main a.bg-crimson:not(.w-full),
  body.ams-public main button.bg-crimson:not(.w-full),
  body.ams-public main a.bg-navy:not(.w-full),
  body.ams-public main button.border:not(.w-full) {
    width: auto;
    max-width: 100%;
  }

  body.ams-public section.bg-navy .flex.flex-wrap.gap-3 > a,
  body.ams-public section.bg-navy .flex.flex-wrap.gap-3 > button,
  body.ams-public .flex.flex-wrap.gap-3 > a.bg-crimson,
  body.ams-public .flex.flex-wrap.gap-3 > a.border {
    flex: 1 1 100%;
    justify-content: center;
  }

  body.ams-public section.bg-navy .absolute.rounded-2xl,
  body.ams-public section.bg-navy .absolute.rounded-xl,
  body.ams-public section.bg-navy .absolute[class*="shadow"] {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin-top: 16px;
    width: 100% !important;
    max-width: 100% !important;
  }

  body.ams-public footer .grid,
  body.ams-public footer .md\:grid-cols-2,
  body.ams-public footer .lg\:grid-cols-4,
  body.ams-public footer .grid-cols-2,
  body.ams-public footer .grid-cols-3,
  body.ams-public footer .grid-cols-4 {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 479px) {
  body.ams-public main .grid.grid-cols-4,
  body.ams-public section.bg-navy .grid.grid-cols-2,
  body.ams-public section.bg-navy .grid.grid-cols-4 {
    grid-template-columns: 1fr !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  body.ams-public main .lg\:grid-cols-3,
  body.ams-public main .md\:grid-cols-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.ams-public footer .grid,
  body.ams-public footer .lg\:grid-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Timeline: stack on mobile */
@media (max-width: 767px) {
  body.ams-public [class*="timeline"],
  body.ams-public ol.flex,
  body.ams-public .flex.justify-between:has(> .flex-1) {
    flex-direction: column !important;
    align-items: stretch !important;
  }
}

/* Cookie / toast */
body.ams-public [class*="cookie"],
body.ams-public .fixed.bottom-4,
body.ams-public .fixed.bottom-6 {
  z-index: var(--z-toast);
  max-width: calc(100vw - 24px);
}

/* Quote / contact / track / blog pages */
body.ams-page-quote main section,
body.ams-page-contact main section,
body.ams-page-track main section,
body.ams-page-about main section,
body.ams-page-services main section,
body.ams-page-blog main section {
  width: min(100%, 1360px);
  margin-inline: auto;
}

body.ams-page-quote form,
body.ams-page-contact form,
body.ams-page-track form {
  max-width: 100%;
}

body.ams-page-quote .ams-inq-types,
body.ams-page-quote [data-ams-inq-hidden-type="1"] + .ams-inq-types {
  width: 100%;
}

@media (max-width: 767px) {
  body.ams-page-quote main .grid,
  body.ams-page-contact main .grid {
    grid-template-columns: 1fr !important;
  }
}

/* Auth pages */
body.ams-auth {
  background:
    radial-gradient(900px 420px at 8% 0%, rgba(153, 27, 27, 0.08), transparent 50%),
    radial-gradient(800px 480px at 100% 100%, rgba(22, 28, 52, 0.10), transparent 46%),
    var(--color-off-white);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  body.ams-public *,
  body.ams-public *::before,
  body.ams-public *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Public contrast system ----------
 * Surface colour is declared on the surface element itself, never on its
 * descendants, so the cascade resolves context by inheritance: the nearest
 * surface ancestor supplies the colour. A white card inside a navy section
 * therefore gets dark copy, and a navy panel inside a light section gets light
 * copy, with no ancestor negation involved.
 *
 * Two rules that must not come back:
 *  - `body.ams-public .bg-background <element>` descendant overrides. The public
 *    shell is <div class="flex min-h-screen flex-col bg-background">, so they
 *    match every node on the page and win over the .bg-navy rules on source
 *    order, which is what pushed #161C34 headings and #646978 body copy onto
 *    navy cards. .bg-background is only used here with :not(.min-h-screen) so
 *    the shell is excluded.
 *  - `:not(:is(.bg-white, …) *)` guards. Complex :not() is Selectors 4; when a
 *    browser disagrees the result is invisible text, i.e. the defect being
 *    fixed. Only simple negations are used below.
 *
 * Measured against the app tokens (.bg-navy/.bg-primary/.bg-sidebar = #1a1d35):
 * #FFFFFF 15.2:1, #E3E5EA 12.3:1, #CBD5E1 11.1:1, #FCA5A5 8.7:1, while
 * .text-crimson (#af2127) is 2.4:1 and text-white/45 is 4.4:1.
 */
body.ams-public :is(.bg-navy, .bg-primary, .bg-sidebar, [class*="bg-navy/"]) {
  color: #E3E5EA;
}

body.ams-public :is(.bg-white, .bg-card, .bg-muted, .bg-surface, .bg-background:not(.min-h-screen)) {
  color: var(--color-text-secondary);
}

/* A translucent-white text utility only ever makes sense over a dark surface,
 * and the bundle has no variant-prefixed form (no hover:text-white/…), so these
 * can be pinned without looking at the ancestor at all. text-white/40 and /45
 * on navy measure 3.8:1 and 4.4:1, below the 4.5:1 body-copy floor. */
body.ams-public [class*="text-white/"] {
  color: #E3E5EA !important;
  opacity: 1 !important;
}

/* The faintest steps (text-white/10 … /55) keep a muted tone. */
body.ams-public :is([class*="text-white/1"], [class*="text-white/2"], [class*="text-white/3"], [class*="text-white/4"], [class*="text-white/5"]) {
  color: #CBD5E1 !important;
  opacity: 1 !important;
}

/* Crimson stays a button/graphic colour; as text on navy it needs the light
 * accent. Anchoring on the dark surface (rather than re-asserting the dark
 * crimson on light surfaces) is what makes the navy CTA panel nested inside a
 * light section work: .bg-navy is then the nearest matching ancestor, so the
 * eyebrow inside it lightens. A light-surface counter-rule would outrank this
 * one via the enclosing section and push #AE2129 back onto navy at 2.1:1. */
body.ams-public :is(.bg-navy, .bg-primary, .bg-sidebar, [class*="bg-navy/"]) :is(.text-crimson, [class*="text-crimson/"]) {
  color: #FCA5A5 !important;
  opacity: 1 !important;
}

/* Micro labels on dark surfaces read at 12px rather than 10–11px. Scoping this
 * by ancestor is safe: the worst case is a nested label that stays 10px.
 *
 * The floor is expressed as max(12px, 0.75rem) because the public shell sets a
 * 15.5px root, so a bare 0.75rem resolves to 11.6px and misses the 12px target.
 * Keeping the rem term means the label still grows for readers who raise their
 * browser's default font size. */
body.ams-public :is(.bg-navy, .bg-primary, .bg-sidebar, [class*="bg-navy/"]) :is([class*="text-[10px]"], [class*="text-[11px]"]) {
  font-size: max(12px, 0.75rem) !important;
  line-height: max(18px, 1.125rem) !important;
  font-weight: 500;
}

/* The larger label size must not push the 3-up metric tiles out of their grid
   on narrow phones, so drop the wide tracking and let the text wrap. */
@media (max-width: 480px) {
  body.ams-public :is(.bg-navy, .bg-primary, .bg-sidebar, [class*="bg-navy/"]) :is([class*="text-[10px]"], [class*="text-[11px]"]) {
    letter-spacing: 0.02em !important;
    overflow-wrap: anywhere;
  }
}

/* Cards assembled from translucent-white utilities are pinned to explicit dark
 * values so their computed background can never resolve to an opaque light one. */
body.ams-public :is(.bg-navy, .bg-primary, .bg-sidebar) :is(.rounded-xl, .rounded-2xl, .rounded-3xl).border[class*="bg-white/"]:not(a):not(button) {
  background-color: rgba(13, 39, 71, 0.92) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: #E3E5EA;
}

body.ams-public :is(.bg-navy, .bg-primary, .bg-sidebar) .rounded-lg.border[class*="bg-white/"]:not(a):not(button) {
  background-color: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: #E3E5EA;
}

body.ams-public :is(.bg-navy, .bg-primary, .bg-sidebar) :is(.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl).border[class*="bg-white/"]:not(a):not(button) :is(h1, h2, h3, h4, strong, b, dt) {
  color: #FFFFFF !important;
  opacity: 1 !important;
}

body.ams-public :is(.bg-navy, .bg-primary, .bg-sidebar) :is(.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl).border[class*="bg-white/"]:not(a):not(button) :is(p, li, dd, small, label) {
  color: #E3E5EA !important;
  opacity: 1 !important;
}

/* Solid crimson surfaces only: bg-crimson/10 chips stay light with crimson text. */
body.ams-public [class~="bg-crimson"] :is(h1, h2, h3, h4, p, li, span, strong, small, a, button) {
  color: #FFFFFF !important;
  opacity: 1 !important;
}

body.ams-public :is(button, a)[class~="bg-white"] {
  color: #161C34 !important;
}

body.ams-public :is(button, a):is([class~="bg-crimson"], [class~="bg-navy"]) {
  color: #FFFFFF !important;
}

body.ams-public :is([class*="cookie"], [data-cookie-banner]) button {
  background: #161C34 !important;
  border-color: #161C34 !important;
  color: #FFFFFF !important;
  font-weight: 700;
  opacity: 1 !important;
}

body.ams-public:not(.ams-page-home) main {
  width: 100%;
}

body.ams-public:not(.ams-page-home) main > :is(section, article),
body.ams-public:not(.ams-page-home) main > div > :is(section, article) {
  width: 100%;
  box-sizing: border-box;
}

body.ams-public:not(.ams-page-home) main
  :is(.container, [class*="max-w-"], .mx-auto) {
  width: min(100% - 32px, 1180px);
  max-width: 1180px;
  margin-inline: auto;
  box-sizing: border-box;
}

body.ams-public:not(.ams-page-home) main
  :is(.rounded-xl, .rounded-2xl, .rounded-3xl) {
  min-width: 0;
}

body.ams-public:not(.ams-page-home) main
  :is(h1, h2, h3, h4, p, li, label, input, textarea, select, button, a) {
  overflow-wrap: anywhere;
}

@media (max-width: 767px) {
  body.ams-public:not(.ams-page-home) main
    :is(.container, [class*="max-w-"], .mx-auto) {
    width: min(100% - 24px, 1180px);
  }

  body.ams-public:not(.ams-page-home) main
    :is(.flex.items-center, .flex.justify-between) {
    flex-wrap: wrap;
  }

  body.ams-public:not(.ams-page-home) main form
    :is(button[type="submit"], a.bg-crimson, a.bg-navy) {
    width: 100%;
    justify-content: center;
  }
}