/*
 * ============================================================
 * RAD Design System — Shared Documentation Stylesheet
 * rad-system.css
 *
 * Applied to all component pages (/rad/components/*.html)
 * and the 5 main RAD pages.
 *
 * Goals:
 *   - Always light mode, professional/operational feel
 *   - Inter as primary typeface (headings + body)
 *   - Poppins for IDs, code, labels, breadcrumbs
 *   - Clean hierarchy, comfortable reading, no decoration
 * ============================================================
 */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
*, *::before, *::after { font-family: 'Poppins', sans-serif; }

/* ── Design tokens ─────────────────────────────────────────── */
:root {
  --doc-teal:        #2bafb6;
  --doc-teal-dim:    #208f96;
  --doc-teal-ghost:  rgba(43,175,182,0.07);
  --doc-teal-border: rgba(43,175,182,0.22);
  --doc-aubergine:   #6a4177;
  --doc-aubergine-ghost: rgba(106,65,119,0.07);
  --doc-charcoal:    #132030;
  --doc-charcoal-hi: rgba(19,32,48,0.85);  /* primary body text */
  --doc-charcoal-md: rgba(19,32,48,0.55);  /* secondary / support text */
  --doc-charcoal-lo: rgba(19,32,48,0.38);  /* metadata / labels */
  --doc-grey:        #899eb3;
  --doc-paper:       #f5f5f5;
  --doc-white:       #ffffff;
  --doc-sidebar-bg:  #ffffff;
  --doc-border:      rgba(24,35,51,0.08);
  --doc-border-md:   rgba(24,35,51,0.12);
  --doc-inter:       'Poppins', sans-serif;
  --doc-heading:     'Poppins', sans-serif;
  --doc-mono:        'Poppins', sans-serif;
}

/* ── Kill decorative elements ──────────────────────────────── */
* { cursor: auto !important; }
.cursor-dot,
.cursor-ring,
#particle-canvas { display: none !important; }

/* ── Force light mode ──────────────────────────────────────── */
html { color-scheme: light; }

body {
  background: var(--doc-paper) !important;
  color: var(--doc-charcoal) !important;
  font-family: var(--doc-inter) !important;
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.65;
  cursor: auto !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Typography overrides ──────────────────────────────────── */
h1, h2, h3, h4, h5, h6,
.page-title, .section-title, .comp-page-title,
.pattern-title, .theme-heading, .catalog-group-title,
.group-title, .doc-title, .content-title {
  font-family: var(--doc-heading) !important;
  font-style: normal !important;
  font-weight: 700;
  color: var(--doc-charcoal);
  line-height: 1.25;
  letter-spacing: -0.01em;
}

/* Prevent any em/i inside headings from going italic */
h1 em, h2 em, h3 em, h4 em, h5 em, h6 em,
.page-title em, .section-title em, .comp-page-title em,
.pattern-title em, .theme-heading em {
  font-style: normal !important;
  color: inherit !important;
}

/* Component section title */
.section-title,
.comp-page-title,
.page-title {
  font-family: var(--doc-heading) !important;
  font-size: clamp(22px, 2.5vw, 32px) !important;
  font-weight: 700 !important;
  color: var(--doc-charcoal) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.2 !important;
}

/* Section description / body */
.section-body,
.comp-section-body {
  font-family: var(--doc-inter) !important;
  font-size: 15px !important;
  line-height: 1.75 !important;
  color: var(--doc-charcoal-md) !important;
  max-width: 720px;
}
.section-body strong,
.comp-section-body strong {
  color: var(--doc-charcoal) !important;
  font-weight: 500;
}

/* Monospaced elements use Poppins */
.section-label,
.comp-breadcrumb,
.comp-page-id,
.rad-sidebar-brand,
.rad-sbnav-group,
.rad-code,
code, pre,
.comp-meta-label,
.comp-meta-value,
.sidenav-label {
  font-family: var(--doc-mono) !important;
}

/* ── RAD top navigation (new standalone nav) ───────────────── */
.rad-topnav {
  position: sticky;
  top: 0;
  z-index: 200;
  height: 56px;
  padding: 0;
  background: rgba(255,255,255,0.97) !important;
  border-bottom: 1px solid var(--doc-border) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.rad-topnav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 32px;
  box-sizing: border-box;
}
/* Brand */
.rad-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  flex-shrink: 0;
  cursor: pointer;
}
.rad-brand-mark {
  font-family: var(--doc-mono) !important;
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--doc-teal);
}
.rad-brand-sep {
  width: 1px;
  height: 18px;
  background: rgba(24,35,51,0.14);
  display: inline-block;
}
.rad-brand-sub {
  font-family: var(--doc-inter) !important;
  font-size: 12px;
  color: var(--doc-grey);
  font-weight: 400;
}
/* Nav links */
.rad-topnav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0 16px 0 auto;
  padding: 0;
  position: relative;
}
.rad-topnav-links > li > a {
  font-family: var(--doc-inter) !important;
  font-size: 13px;
  font-weight: 500;
  color: rgba(19,32,48,0.65) !important;
  padding: 6px 10px;
  border-radius: 4px;
  text-decoration: none;
  transition: color 0.15s, background 0.15s;
  display: block;
}
.rad-topnav-links > li > a:hover {
  color: var(--doc-charcoal) !important;
  background: rgba(19,32,48,0.04);
}
.rad-topnav-links > li > a.active,
.rad-topnav-links > li > a[aria-current] {
  color: var(--doc-teal) !important;
}

/* ── Mega dropdown ─────────────────────────────────────────── */
.rad-has-dropdown {
  position: relative;
}
.rad-has-dropdown > a {
  display: flex;
  align-items: center;
  gap: 4px;
}
.rad-mega-drop {
  position: absolute;
  top: calc(100% + 8px);
  left: -16px;
  min-width: 180px;
  background: var(--doc-white);
  border: 1px solid var(--doc-border-md);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(24,35,51,0.12), 0 2px 8px rgba(24,35,51,0.06);
  padding: 12px 16px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  /* Delay hiding so diagonal mouse movement doesn't close the dropdown */
  transition: opacity 0.18s ease 0.1s, transform 0.18s ease 0.1s, visibility 0s 0.28s;
  z-index: 500;
  pointer-events: none;
}
/* Invisible bridge fills the gap between trigger and dropdown */
.rad-mega-drop::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: -24px;
  right: -24px;
  height: 16px;
}
.rad-has-dropdown:hover .rad-mega-drop,
.rad-has-dropdown:focus-within .rad-mega-drop {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  /* Show immediately, no delay */
  transition: opacity 0.15s ease 0s, transform 0.15s ease 0s, visibility 0s 0s;
}
.rad-mega-drop--wide,
.rad-mega-drop--patterns-wide {
  display: grid;
  grid-template-columns: repeat(4, 180px);
  gap: 0 24px;
  padding: 16px 20px;
  left: auto;
  right: 0;
}

/* Pattern card dropdown */
.rad-mega-drop--patterns {
  display: grid;
  grid-template-columns: repeat(4, 140px);
  gap: 8px;
  padding: 12px;
  left: auto;
  right: 0;
}
.rad-pattern-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-decoration: none !important;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid transparent;
  transition: border-color 0.15s;
}
.rad-pattern-card:hover {
  border-color: var(--doc-teal-border);
}
.rad-pattern-card::after { display: none !important; }
.rad-pattern-thumb {
  background: var(--doc-paper);
  border-radius: 6px;
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
}
.rad-pattern-thumb svg {
  width: 100%;
  height: 100%;
}
.rad-pattern-name {
  font-family: var(--doc-inter) !important;
  font-size: 12px;
  font-weight: 500;
  color: var(--doc-charcoal-hi) !important;
  padding: 0 4px 4px;
}
.rad-pattern-card:hover .rad-pattern-name {
  color: var(--doc-teal) !important;
}
.rad-mega-drop a {
  display: block;
  font-family: var(--doc-inter) !important;
  font-size: 13px;
  font-weight: 400;
  color: var(--doc-charcoal-hi) !important;
  text-decoration: none;
  padding: 3px 0;
  white-space: nowrap;
  transition: color 0.1s;
  border: none !important;
}
.rad-mega-drop a::after { display: none !important; }
.rad-mega-drop a:hover { color: var(--doc-teal) !important; }
.rad-mega-label {
  display: block;
  font-family: var(--doc-mono) !important;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--doc-charcoal-lo);
  margin-top: 14px;
  margin-bottom: 4px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--doc-border);
}
.rad-mega-col .rad-mega-label:first-child { margin-top: 0; }

/* Hide sidebar everywhere (belt-and-suspenders) */
.rad-sidebar, .rad-sidebar-toggle { display: none !important; }

/* Remove sidebar offset + align to nav grid */
.rads-layout,
.page-header,
.comp-page-wrap,
.rad-catalog-layout,
.rad-tokens-layout,
.rad-patterns-layout,
.rad-theming-layout,
.rad-overview-layout,
footer.rad-footer,
footer {
  margin-left: 0 !important;
}

/* Match nav container: max-width 1200px centered with 32px inner padding.
   At viewports > 1200px this equals (viewport - 1200) / 2 + 32px, same as the nav brand. */
.page-header {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.page-header-inner {
  padding-left: 32px !important;
  padding-right: 32px !important;
}
.rad-catalog-layout,
.rad-patterns-layout,
.rad-tokens-layout,
.rad-theming-layout,
.rad-overview-layout {
  padding-left: max(32px, calc((100vw - 1200px) / 2 + 32px)) !important;
  padding-right: max(32px, calc((100vw - 1200px) / 2 + 32px)) !important;
}

/* Right side actions */
.rad-topnav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
/* Destination pill — light variant (cross-site link to portfolio) */
.rad-dest-pill {
  font-family: var(--doc-inter) !important;
  font-size: 13px;
  font-weight: 500;
  color: var(--doc-charcoal) !important;
  background: var(--doc-white);
  border: 1px solid var(--doc-border);
  border-radius: 20px;
  padding: 5px 14px;
  text-decoration: none;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  white-space: nowrap;
}
.rad-dest-pill:hover {
  color: var(--doc-teal) !important;
  border-color: var(--doc-teal-border);
  background: var(--doc-teal-ghost);
}

/* ── Hide old portfolio nav elements ────────────────────────── */
/* (Safety net — suppresses any portfolio nav HTML that appears in RAD pages) */
.nav-logo, .nav-links,
.nav-hamburger, .nav-left, .nav-right,
.nav-theme-toggle { display: none !important; }

/* ── Old nav base (safety fallback) ────────────────────────── */
nav {
  background: rgba(255,255,255,0.97) !important;
  border-bottom: 1px solid var(--doc-border) !important;
  backdrop-filter: blur(8px) !important;
}

/* Mobile nav */
@media (max-width: 768px) {
  .nav-links {
    background: rgba(255,255,255,0.98) !important;
  }
}

@media (max-width: 900px) {
  .rad-has-dropdown .rad-mega-drop { display: none; }
}

.nav-hamburger span {
  background: var(--doc-charcoal) !important;
}

/* ── Hamburger button ───────────────────────────────────────── */
.rad-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  padding: 6px;
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 6px;
  flex-shrink: 0;
  transition: background 0.15s;
}
.rad-hamburger:hover {
  background: rgba(19,32,48,0.05);
}
.rad-hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--doc-charcoal);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
  transform-origin: center;
}
.rad-hamburger.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.rad-hamburger.is-open span:nth-child(2) {
  opacity: 0;
}
.rad-hamburger.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ── Mobile menu panel ──────────────────────────────────────── */
.rad-mobile-menu {
  display: none;
  background: var(--doc-white);
  border-top: 1px solid var(--doc-border);
  border-bottom: 1px solid var(--doc-border);
  padding: 12px 20px 16px;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.25s ease, opacity 0.2s ease;
}
.rad-mobile-menu.is-open {
  max-height: 320px;
  opacity: 1;
}
.rad-mobile-links {
  list-style: none;
  margin: 0;
  padding: 0;
}
.rad-mobile-links li a {
  display: block;
  font-size: 15px;
  font-weight: 500;
  color: rgba(19,32,48,0.72);
  padding: 10px 0;
  border-bottom: 1px solid var(--doc-border);
  text-decoration: none;
  transition: color 0.15s;
}
.rad-mobile-links li a:hover,
.rad-mobile-links li a[aria-current] {
  color: var(--doc-teal);
}
.rad-mobile-portfolio {
  display: inline-block;
  margin-top: 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--doc-charcoal);
  text-decoration: none;
  border: 1px solid var(--doc-border);
  border-radius: 20px;
  padding: 5px 14px;
  transition: color 0.15s, border-color 0.15s;
}
.rad-mobile-portfolio:hover {
  color: var(--doc-teal);
  border-color: var(--doc-teal-border);
}

/* ── Responsive breakpoints ─────────────────────────────────── */
@media (max-width: 1100px) {
  .rad-topnav-inner {
    padding: 0 16px;
    gap: 16px;
  }
}

@media (max-width: 768px) {
  .rad-topnav-links,
  .rad-topnav-actions {
    display: none !important;
  }
  .rad-hamburger {
    display: flex;
  }
  .rad-mobile-menu {
    display: block;
  }
  .rad-topnav-inner {
    padding: 0 16px;
    gap: 12px;
  }
}

/* ── Left sidebar ──────────────────────────────────────────── */
.rad-sidebar {
  background: var(--doc-sidebar-bg) !important;
  border-right: 1px solid var(--doc-border-md) !important;
}

.rad-sidebar-header {
  border-bottom: 1px solid var(--doc-border-md) !important;
}

.rad-sidebar-brand {
  color: var(--doc-teal) !important;
  font-family: var(--doc-mono) !important;
  letter-spacing: 0.20em;
}

.rad-sidebar-version {
  color: var(--doc-charcoal-lo) !important;
}

/* Sidebar group headers — neutral, receding, metadata level */
.rad-sbnav-group {
  font-family: var(--doc-mono) !important;
  color: var(--doc-charcoal-lo) !important;
  font-size: 10px !important;
  letter-spacing: 0.10em !important;
  border-top-color: var(--doc-border) !important;
  opacity: 1;
}
.rad-sbnav-group:hover { color: var(--doc-charcoal-md) !important; }

.rad-sbnav-group-count {
  color: var(--doc-charcoal-lo) !important;
}

.rad-sbnav-group-chevron {
  color: var(--doc-charcoal-lo) !important;
}

/* Sidebar component links — charcoal text, teal border on active only */
.rad-sbnav-comp {
  font-family: var(--doc-inter) !important;
  color: var(--doc-charcoal-md) !important;
  font-size: 12px !important;
  opacity: 1;
}
.rad-sbnav-comp:hover {
  color: var(--doc-charcoal) !important;
  background: rgba(19,32,48,0.04) !important;
}
.rad-sbnav-comp.active {
  color: var(--doc-charcoal) !important;
  border-left-color: var(--doc-teal) !important;
  background: rgba(19,32,48,0.04) !important;
  font-weight: 500;
}

.rad-sbnav-section {
  font-family: var(--doc-inter) !important;
  color: var(--doc-charcoal-md) !important;
  font-size: 12.5px !important;
}
.rad-sbnav-section:hover {
  color: var(--doc-charcoal) !important;
  background: rgba(19,32,48,0.04) !important;
}
.rad-sbnav-section.active {
  color: var(--doc-charcoal) !important;
  background: rgba(19,32,48,0.04) !important;
  border-left-color: var(--doc-teal) !important;
  font-weight: 500;
}

.rad-sbnav-sub-item {
  color: var(--doc-charcoal-lo) !important;
  font-family: var(--doc-inter) !important;
  font-size: 12px !important;
}
.rad-sbnav-sub-item:hover { color: var(--doc-charcoal-md) !important; }

.rad-sbnav-search {
  background: rgba(19,32,48,0.04) !important;
  border-color: var(--doc-border-md) !important;
  color: var(--doc-charcoal) !important;
  font-family: var(--doc-mono) !important;
}
.rad-sbnav-search::placeholder { color: var(--doc-grey) !important; opacity: 0.6; }

.rad-sbnav-divider {
  border-top-color: var(--doc-border) !important;
}

.sidenav-ip {
  color: var(--doc-charcoal-lo) !important;
  border-left-color: var(--doc-border-md) !important;
  font-family: var(--doc-mono) !important;
}
.sidenav-ip a { color: var(--doc-teal) !important; }

/* ── Content area ──────────────────────────────────────────── */
.comp-content,
.rad-content {
  padding-top: 60px;
}

/* Breadcrumb */
.comp-breadcrumb,
.comp-breadcrumb-sep {
  font-family: var(--doc-mono) !important;
  font-size: 11px !important;
  color: var(--doc-grey) !important;
  letter-spacing: 0.06em;
}
.comp-breadcrumb a { color: var(--doc-teal) !important; text-decoration: none; }
.comp-breadcrumb a:hover { text-decoration: underline; }
.comp-breadcrumb-sep { color: rgba(19,32,48,0.25) !important; }

/* Component ID / eyebrow — metadata level, not interactive */
.comp-page-id,
.section-label,
.page-eyebrow {
  font-family: var(--doc-mono) !important;
  color: var(--doc-charcoal-lo) !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 10.5px !important;
}
.comp-page-eyebrow-sep { color: var(--doc-charcoal-lo) !important; }

/* Section separator */
.comp-section {
  border-bottom-color: var(--doc-border) !important;
}
.section-intro {
  border-bottom-color: var(--doc-border) !important;
}

.md-h2 { border-top-color: var(--doc-border) !important; }
.rad-rule { border-top-color: var(--doc-border) !important; }

/* Meta grid */
.comp-meta-grid {
  border-color: var(--doc-border) !important;
}
.comp-meta-label {
  color: var(--doc-charcoal-lo) !important;
  font-family: var(--doc-mono) !important;
}
.comp-meta-value {
  font-family: var(--doc-mono) !important;
  color: var(--doc-charcoal) !important;
}

/* Design rules / guidelines */
.comp-design-rule {
  background: rgba(43,175,182,0.05) !important;
  border-left-color: var(--doc-teal) !important;
}

/* ── Component preview containers ──────────────────────────── */
.rad-preview,
.comp-preview-section {
  background: var(--doc-white) !important;
  border: 1px solid var(--doc-border) !important;
  border-radius: 8px !important;
  padding: 24px !important;
}

/* Preview toolbar */
.comp-preview-toolbar,
.comp-preview-header {
  background: transparent !important;
  border-bottom-color: var(--doc-border) !important;
}

.comp-preview-note {
  color: var(--doc-grey) !important;
  font-family: var(--doc-mono) !important;
  font-size: 11px !important;
}

/* Theme switcher dropdown */
.comp-theme-btn {
  color: var(--doc-charcoal) !important;
  border-color: var(--doc-border-md) !important;
  background: rgba(19,32,48,0.04) !important;
  font-family: var(--doc-mono) !important;
}
.comp-theme-dropdown {
  background: var(--doc-white) !important;
  border-color: var(--doc-border-md) !important;
  box-shadow: 0 4px 16px rgba(19,32,48,0.10) !important;
}
.comp-theme-group-label {
  color: var(--doc-grey) !important;
  border-top-color: var(--doc-border) !important;
  font-family: var(--doc-mono) !important;
}
.comp-theme-option:hover { background: rgba(19,32,48,0.04) !important; }
.comp-theme-option.is-active { background: rgba(19,32,48,0.05) !important; }
.comp-theme-name {
  color: var(--doc-charcoal) !important;
  font-family: var(--doc-mono) !important;
}

/* Variant labels */
.comp-variant-label {
  font-family: var(--doc-mono) !important;
  color: var(--doc-grey) !important;
  font-size: 10px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase;
}
.comp-variant-desc {
  color: var(--doc-grey) !important;
  font-family: var(--doc-inter) !important;
  font-size: 13.5px !important;
}

/* ── Code blocks ───────────────────────────────────────────── */
.rad-code,
code, pre {
  font-family: var(--doc-mono) !important;
  background: rgba(19,32,48,0.04) !important;
  border: 1px solid var(--doc-border) !important;
  color: var(--doc-charcoal) !important;
  border-radius: 5px;
}

/* ── Tables ────────────────────────────────────────────────── */
.rad-table th {
  background: rgba(19,32,48,0.04) !important;
  border-bottom-color: var(--doc-border-md) !important;
  color: var(--doc-charcoal) !important;
  font-family: var(--doc-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
}
.rad-table td {
  border-bottom-color: var(--doc-border) !important;
  color: var(--doc-charcoal) !important;
  font-size: 14px !important;
}

/* ── Blockquote / note ─────────────────────────────────────── */
.md-blockquote {
  color: var(--doc-charcoal) !important;
  border-left-color: var(--doc-teal-border) !important;
}
.md-note {
  color: var(--doc-grey) !important;
  font-family: var(--doc-inter) !important;
}

/* ── Pagination ────────────────────────────────────────────── */
.comp-pagination {
  border-top-color: var(--doc-border) !important;
}
.comp-pag-link {
  border-color: var(--doc-border-md) !important;
  background: var(--doc-white) !important;
}
.comp-pag-link:hover { border-color: var(--doc-border-md) !important; background: rgba(19,32,48,0.02) !important; }
.comp-pag-dir {
  color: var(--doc-grey) !important;
  font-family: var(--doc-mono) !important;
  font-size: 10px !important;
}
.comp-pag-name {
  color: var(--doc-charcoal) !important;
  font-family: var(--doc-inter) !important;
}

/* ── Footer ────────────────────────────────────────────────── */
/* Ensure custom element is block-level */
rad-footer { display: block !important; }
/* Reset any nav/div inside footer from page-level nav CSS bleed */
rad-footer nav,
rad-footer div.rad-footer-links {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  z-index: auto !important;
  background: none !important;
  backdrop-filter: none !important;
  padding: 0 !important;
  width: auto !important;
}
/* Suppress existing footer styles from individual pages */
footer:not(.rad-site-footer) {
  border-top: none !important;
  background: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Dark footer — matches Design System homepage */
footer.rad-site-footer,
.rad-site-footer {
  background: #182333 !important;
  background-color: #182333 !important;
  padding: 40px 0 !important;
  margin: 0 !important;
  border-top: none !important;
  display: block !important;
  width: 100% !important;
}
.rad-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.rad-footer-brand {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rad-footer-wordmark {
  font-family: var(--doc-mono) !important;
  font-size: 16px;
  color: var(--doc-teal) !important;
  letter-spacing: 0.04em;
}
.rad-footer-tagline {
  font-family: var(--doc-inter) !important;
  font-size: 12px;
  color: rgba(137,158,179,0.8) !important;
}
.rad-footer-links {
  display: flex;
  align-items: center;
  gap: 24px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.rad-footer-link {
  font-family: var(--doc-inter) !important;
  font-size: 13px;
  color: rgba(137,158,179,0.8) !important;
  text-decoration: none;
  transition: color 0.15s;
}
.rad-footer-link:hover {
  color: rgba(255,255,255,0.85) !important;
}
.rad-footer-link::after { display: none !important; }
.rad-footer-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.rad-footer-copy {
  font-family: var(--doc-inter) !important;
  font-size: 12px;
  color: rgba(137,158,179,0.6) !important;
}
.rad-footer-portfolio-link {
  font-family: var(--doc-inter) !important;
  font-size: 12px;
  color: rgba(137,158,179,0.8) !important;
  text-decoration: none;
  transition: color 0.15s;
}
.rad-footer-portfolio-link:hover {
  color: rgba(255,255,255,0.85) !important;
}
.rad-footer-portfolio-link::after { display: none !important; }
@media (max-width: 640px) {
  .rad-footer-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  .rad-footer-right {
    align-items: flex-start;
  }
}

/* ── Accessibility: focus rings ─────────────────────────────── */
*:focus-visible {
  outline: 2px solid var(--doc-teal) !important;
  outline-offset: 2px !important;
}

/* ── Search modal ──────────────────────────────────────────── */
#rad-search-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(19,32,48,0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  align-items: flex-start;
  justify-content: center;
  padding-top: 80px;
}
#rad-search-overlay.is-open {
  display: flex;
}
#rad-search-modal {
  width: 100%;
  max-width: 560px;
  background: #ffffff;
  border: 1px solid rgba(19,32,48,0.1);
  border-radius: 12px;
  box-shadow: 0 24px 64px rgba(19,32,48,0.18);
  overflow: hidden;
  margin: 0 16px;
}
#rad-search-input-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(19,32,48,0.08);
}
#rad-search-input-wrap svg {
  flex-shrink: 0;
  color: rgba(19,32,48,0.35);
}
#rad-search-input {
  flex: 1;
  border: none;
  outline: none;
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  color: #132030;
  background: transparent;
  padding: 0;
}
#rad-search-input::placeholder {
  color: rgba(19,32,48,0.35);
}
#rad-search-esc {
  font-family: 'Poppins', sans-serif;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: rgba(19,32,48,0.35);
  background: rgba(19,32,48,0.05);
  border: 1px solid rgba(19,32,48,0.1);
  border-radius: 4px;
  padding: 2px 6px;
  cursor: pointer;
  flex-shrink: 0;
}
#rad-search-results {
  max-height: 380px;
  overflow-y: auto;
  padding: 8px 0;
}
#rad-search-results:empty::after {
  content: 'No results';
  display: block;
  padding: 16px;
  text-align: center;
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  color: rgba(19,32,48,0.35);
}
.rad-search-group {
  padding: 6px 16px 2px;
  font-family: 'Poppins', sans-serif;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(19,32,48,0.35);
}
.rad-search-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.1s;
}
.rad-search-item:hover,
.rad-search-item.is-selected {
  background: rgba(43,175,182,0.06);
}
.rad-search-item-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: rgba(43,175,182,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2bafb6;
  font-family: 'Poppins', sans-serif;
  font-size: 9px;
  letter-spacing: 0.06em;
  flex-shrink: 0;
}
.rad-search-item-icon.icon-page {
  background: rgba(19,32,48,0.05);
  color: rgba(19,32,48,0.4);
}
.rad-search-item-name {
  font-family: 'Poppins', sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  color: #132030;
  flex: 1;
}
.rad-search-item-meta {
  font-family: 'Poppins', sans-serif;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: rgba(19,32,48,0.35);
}
#rad-search-footer {
  padding: 8px 16px;
  border-top: 1px solid rgba(19,32,48,0.07);
  display: flex;
  gap: 16px;
}
.rad-search-hint {
  font-family: 'Poppins', sans-serif;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: rgba(19,32,48,0.35);
  display: flex;
  align-items: center;
  gap: 4px;
}
.rad-search-hint kbd {
  background: rgba(19,32,48,0.06);
  border: 1px solid rgba(19,32,48,0.1);
  border-radius: 3px;
  padding: 1px 5px;
  font-family: inherit;
  font-size: 9px;
}


/* =============================================================
   VISUAL SYSTEM — Homepage parity
   Charcoal dominant · Teal action · Aubergine accent · Paper bg
   ============================================================= */

/* ── Page background ─────────────────────────────────────────── */
body {
  background: var(--doc-paper) !important;
}

/* ── Page header (all doc pages) ────────────────────────────── */
.page-header {
  background: var(--doc-white) !important;
  border-bottom: 1px solid var(--doc-border) !important;
  padding: 24px 0 32px !important;
  margin: 0 !important;
}
.page-header-inner {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 32px !important;
}
.page-eyebrow {
  font-family: var(--doc-mono) !important;
  font-size: 11px !important;
  font-weight: 400;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  color: var(--doc-teal) !important;
  margin-bottom: 20px !important;
  display: block;
  opacity: 1 !important;
}
.page-title {
  font-family: var(--doc-heading) !important;
  font-size: clamp(32px, 4.5vw, 52px) !important;
  font-weight: 700 !important;
  color: var(--doc-charcoal) !important;
  letter-spacing: -0.025em !important;
  line-height: 1.1 !important;
  margin-bottom: 16px !important;
}
.page-subtitle {
  font-family: var(--doc-inter) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  color: rgba(24,35,51,0.62) !important;
  letter-spacing: 0 !important;
  line-height: 1.65 !important;
  max-width: 580px;
}

/* ── Catalog layout container ───────────────────────────────── */
.rad-catalog-layout {
  padding-top: 24px !important;
  padding-bottom: 80px !important;
}

/* ── Tier header — large section separator ──────────────────── */
.catalog-tier-header {
  background: none !important;
  border-top: none !important;
  border-bottom: none !important;
  margin: 72px 0 0 !important;
  padding: 0 0 32px !important;
}
.catalog-tier-header:first-child {
  margin-top: 52px !important;
  padding-top: 0 !important;
}
.catalog-tier-eyebrow {
  font-family: var(--doc-mono) !important;
  font-size: 10px !important;
  font-weight: 400;
  letter-spacing: 0.2em !important;
  text-transform: uppercase;
  color: var(--doc-aubergine) !important;
  margin-bottom: 10px !important;
  display: block;
  opacity: 1 !important;
}
.catalog-tier-title {
  font-family: var(--doc-inter) !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  color: var(--doc-charcoal) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.2 !important;
  margin-bottom: 10px !important;
}
.catalog-tier-desc {
  font-family: var(--doc-inter) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: rgba(24,35,51,0.58) !important;
  letter-spacing: 0 !important;
  line-height: 1.65 !important;
  max-width: 620px;
}

/* ── Group header — subsection divider ──────────────────────── */
.catalog-group {
  margin-bottom: 48px !important;
}
.catalog-group-header {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 20px 0 16px !important;
  border-bottom: 1px solid var(--doc-border) !important;
  border-top: none !important;
  margin-bottom: 20px !important;
}
.catalog-group-icon {
  width: 30px !important;
  height: 30px !important;
  border-radius: 6px !important;
  background: var(--doc-teal-ghost) !important;
  border: 1px solid var(--doc-teal-border) !important;
  color: var(--doc-teal) !important;
  font-size: 12px !important;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.catalog-group-title {
  font-family: var(--doc-heading) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--doc-charcoal) !important;
  letter-spacing: -0.01em !important;
  line-height: 1.3 !important;
}
.catalog-group-count {
  font-family: var(--doc-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.08em !important;
  color: var(--doc-charcoal-lo) !important;
  margin-left: auto !important;
}
.catalog-group-note {
  font-family: var(--doc-inter) !important;
  font-size: 13px !important;
  color: rgba(24,35,51,0.52) !important;
  letter-spacing: 0 !important;
  line-height: 1.6 !important;
}

/* ── Component cards ─────────────────────────────────────────── */
.catalog-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  gap: 12px !important;
}
.catalog-card {
  background: var(--doc-white) !important;
  border: 1px solid var(--doc-border) !important;
  border-radius: 8px !important;
  padding: 20px 22px 20px !important;
  box-shadow: 0 1px 3px rgba(24,35,51,0.05), 0 1px 2px rgba(24,35,51,0.03) !important;
  transition: box-shadow 0.18s ease, border-color 0.18s ease !important;
  position: relative;
  text-decoration: none;
  display: block;
}
.catalog-card:hover {
  background: var(--doc-white) !important;
  border-color: var(--doc-teal-border) !important;
  box-shadow: 0 4px 16px rgba(24,35,51,0.09), 0 1px 4px rgba(24,35,51,0.05) !important;
}
.catalog-card-prefix {
  font-family: var(--doc-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase;
  color: var(--doc-charcoal-lo) !important;
  margin-bottom: 8px !important;
  display: block;
}
.catalog-card-name {
  font-family: var(--doc-inter) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--doc-charcoal) !important;
  margin-bottom: 8px !important;
  line-height: 1.3 !important;
  display: block;
  letter-spacing: -0.01em;
}
.catalog-card-desc {
  font-family: var(--doc-inter) !important;
  font-size: 12.5px !important;
  color: rgba(24,35,51,0.58) !important;
  line-height: 1.6 !important;
  letter-spacing: 0 !important;
}
.catalog-card-arrow {
  color: var(--doc-teal) !important;
  font-size: 13px !important;
  opacity: 0 !important;
  transition: opacity 0.15s !important;
}
.catalog-card:hover .catalog-card-arrow {
  opacity: 1 !important;
}
.catalog-card-rad {
  font-family: var(--doc-mono) !important;
  font-size: 9px !important;
  color: var(--doc-charcoal-lo) !important;
  margin-top: 10px !important;
  letter-spacing: 0.06em !important;
}

/* ── IP / Licensing section ─────────────────────────────────── */
.ip-section,
section.ip-section {
  background: var(--doc-white) !important;
  border-top: 1px solid var(--doc-border) !important;
  padding: 56px 0 !important;
  margin: 0 !important;
}
.ip-inner {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 32px !important;
}
.ip-block-label,
.ip-label {
  font-family: var(--doc-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase;
  color: var(--doc-aubergine) !important;
  margin-bottom: 12px !important;
}
.ip-block-body,
.ip-body,
.ip-text {
  font-family: var(--doc-inter) !important;
  font-size: 14px !important;
  color: rgba(24,35,51,0.65) !important;
  line-height: 1.7 !important;
  letter-spacing: 0 !important;
}
.ip-block-body a,
.ip-body a,
.ip-text a {
  color: var(--doc-teal) !important;
}

/* ── Component page: meta grid values use sans (not mono) ──── */
.comp-meta-value {
  font-family: var(--doc-inter) !important;
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  color: var(--doc-charcoal) !important;
}

/* ── Component page: title sizing ───────────────────────────── */
.comp-page-title {
  font-size: clamp(28px, 3.5vw, 44px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.1 !important;
}
.comp-page-eyebrow {
  font-family: var(--doc-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.14em !important;
  color: var(--doc-charcoal-lo) !important;
}

/* ── Design rule callouts ────────────────────────────────────── */
.comp-design-rule {
  background: rgba(43,175,182,0.05) !important;
  border-left: 3px solid var(--doc-teal) !important;
  border-radius: 0 6px 6px 0 !important;
}

/* ── Downloads page cards / resource tiles ──────────────────── */
.dl-card,
.resource-card,
.download-card {
  background: var(--doc-white) !important;
  border: 1px solid var(--doc-border) !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 4px rgba(24,35,51,0.06) !important;
  transition: box-shadow 0.18s ease, border-color 0.18s ease !important;
}
.dl-card:hover,
.resource-card:hover,
.download-card:hover {
  border-color: var(--doc-teal-border) !important;
  box-shadow: 0 4px 16px rgba(24,35,51,0.10) !important;
}

/* ── Patterns page section cards ────────────────────────────── */
.pattern-stage,
.pattern-card,
.pattern-item {
  background: var(--doc-white) !important;
  border: 1px solid var(--doc-border) !important;
  border-radius: 8px !important;
}

/* ── Tokens / Theming page tables and cells ─────────────────── */
.token-row:nth-child(even),
.swatch-cell:nth-child(even) {
  background: rgba(24,35,51,0.02) !important;
}

/* ── Inline code + kbd tags ─────────────────────────────────── */
code:not(pre code) {
  font-size: 0.88em !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  background: rgba(24,35,51,0.06) !important;
  border: 1px solid var(--doc-border) !important;
}

/* ── Responsive adjustments ─────────────────────────────────── */
@media (max-width: 768px) {
  .page-header {
    padding: 48px 0 36px !important;
  }
  .catalog-tier-header {
    margin-top: 48px !important;
  }
  .catalog-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── Component page header wrap ──────────────────────────────── */
.comp-page-wrap {
  background: var(--doc-white) !important;
  border-bottom: 1px solid var(--doc-border) !important;
  padding-top: 40px !important;
  padding-bottom: 52px !important;
  padding-left: max(32px, calc((100vw - 1200px) / 2 + 32px)) !important;
  padding-right: max(32px, calc((100vw - 1200px) / 2 + 32px)) !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}