@charset "UTF-8";
/*
  Marketplacer Help Center — style.css
  Built from scratch against Design System v1.1
  Replaces all previous Batch 1–5 patches.

  Structure:
  1.  Design tokens  (:root, light, dark)
  2.  Reset & base
  3.  Layout (header, footer, containers)
  4.  Navigation & breadcrumbs
  5.  Home page
  6.  Category & section pages
  7.  Article page (3-col layout)
  8.  Doc sidebar & tree
  9.  TOC
  10. Article body (typography, note boxes, code, tables)
  11. Buttons & forms
  12. Audience badges & role filtering
  13. Mismatch warning banner
  14. Theme toggle
  15. Heading-link copy button
  16. Community pages
  17. Request pages
  18. Search results
  19. Utilities & responsive
*/

/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */

:root {
  /* — Brand palette (Design System v1.1) — */
  --mp-primary:        #005C71;
  --mp-primary-dark:   #003D4E;
  --mp-primary-light:  #DBE9EE;
  --mp-accent:         #00CFB4;
  --mp-accent-dark:    #009E8A;
  --mp-accent-light:   #D7FFF9;
  --mp-accent-soft:    rgba(0, 207, 180, 0.12);
  --mp-accent-ring:    rgba(0, 207, 180, 0.30);

  /* — Seller audience accent — */
  --mp-seller:         #7e22ce;
  --mp-seller-soft:    rgba(192, 132, 252, 0.12);
  --mp-seller-border:  rgba(126, 34, 206, 0.20);

  /* — Neutral ramp — */
  --mp-dark:   #070E14;
  --mp-mid:    #1E2D3D;
  --mp-muted:  #627180;
  --mp-border: #DDE5EC;
  --mp-bg:     #F4F8FB;
  --mp-white:  #FFFFFF;

  /* — Semantic text — */
  --mp-text:           #070E14;
  --mp-text-secondary: #627180;
  --mp-text-tertiary:  #8FA3B1;

  /* — Semantic surfaces (light defaults) — */
  --mp-bg-page:     #F4F8FB;
  --mp-bg-surface:  #FFFFFF;
  --mp-bg-elevated: #FFFFFF;
  --mp-bg-hover:    #EBF3F6;
  --mp-bg-subtle:   #F4F8FB;
  --mp-bg-code:     #EBF3F6;
  --mp-border-color: #DDE5EC;
  --mp-border-strong: #B8C8D4;
  --mp-shadow-sm:   0 1px 3px rgba(7,14,20,0.06);
  --mp-shadow-md:   0 8px 32px rgba(7,14,20,0.10);
--mp-shadow-lg:   0 12px 32px rgba(7,14,20,0.12);

  /* — Brand gradients (Design System v1.1) — */
  --mp-gradient-1: linear-gradient(135deg, #005C71 0%, #00CFB4 100%); /* Primary → Accent */
  --mp-gradient-2: linear-gradient(135deg, #070E14 0%, #005C71 100%); /* Dark → Primary */
  --mp-gradient-3: linear-gradient(135deg, #003D4E 0%, #009E8A 100%); /* Primary Dark → Accent Dark */

  /* — Utility state colours — */
  --mp-info-bg:      #EBF5F8;
  --mp-info-border:  rgba(0,92,113,0.20);
  --mp-info-text:    #005C71;
  --mp-success-bg:   #ECFDF5;
  --mp-success-border: rgba(16,185,129,0.25);
  --mp-success-text: #065F46;
  --mp-warning-bg:   #FFFBEB;
  --mp-warning-border: rgba(245,158,11,0.30);
  --mp-warning-text: #92400E;
  --mp-warning-text-strong: #451A03;
  --mp-warning-icon: #D97706;
  --mp-warning-btn-bg: #D97706;
  --mp-warning-btn-text: #FFFFFF;
  --mp-error-bg:     #FEF2F2;
  --mp-error-border: rgba(239,68,68,0.25);
  --mp-error-text:   #991B1B;

  /* — Geometry — */
  --mp-radius-xs:    4px;
  --mp-radius-sm:    6px;
  --mp-radius-md:    8px;
  --mp-radius-lg:    12px;
  --mp-radius-xl:    16px;
  --mp-header-height: 71px;
  --mp-sidebar-width: 260px;
  --mp-toc-width:     220px;

  /* — Typography — */
  --mp-font:         'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mp-font-mono:    'SF Mono', 'Fira Code', 'Cascadia Code', monospace;

  /* — Motion — */
  --mp-t-fast: 0.15s ease;
  --mp-t-med:  0.20s ease;
  --mp-t-slow: 0.25s ease;
}

/* Light theme (explicit) */
[data-theme="light"],
:root:not([data-theme]) {
  --mp-text:           #070E14;
  --mp-text-secondary: #627180;
  --mp-text-tertiary:  #8FA3B1;
  --mp-bg-page:        #F4F8FB;
  --mp-bg-surface:     #FFFFFF;
  --mp-bg-elevated:    #FFFFFF;
  --mp-bg-hover:       #EBF3F6;
  --mp-bg-subtle:      #F4F8FB;
  --mp-bg-code:        #EBF3F6;
  --mp-border-color:   #DDE5EC;
  --mp-border-strong:  #B8C8D4;
  --mp-shadow-sm:      0 1px 3px rgba(7,14,20,0.06);
  --mp-shadow-md:      0 8px 32px rgba(7,14,20,0.10);
  --mp-seller:         #7e22ce;
  --mp-seller-soft:    rgba(192, 132, 252, 0.12);
  --mp-seller-border:  rgba(126, 34, 206, 0.20);
  --mp-warning-bg:     #FFFBEB;
  --mp-warning-border: rgba(245,158,11,0.30);
  --mp-warning-text:   #92400E;
  --mp-warning-text-strong: #451A03;
  --mp-warning-icon:   #D97706;
  --mp-warning-btn-bg: #D97706;
  --mp-warning-btn-text: #FFFFFF;
}

/* Dark theme */
[data-theme="dark"] {
  --mp-text:           #F0F6FA;
  --mp-text-secondary: #A8BCC8;
  --mp-text-tertiary:  #627A8A;
  --mp-bg-page:        #0F1923;
  --mp-bg-surface:     #152030;
  --mp-bg-elevated:    #1A2B3C;
  --mp-bg-hover:       #1F3245;
  --mp-bg-subtle:      #152030;
  --mp-bg-code:        #111D28;
  --mp-border-color:   #243B50;
  --mp-border-strong:  #2E4D66;
  --mp-shadow-sm:      0 1px 3px rgba(0,0,0,0.30);
  --mp-shadow-md:      0 8px 32px rgba(0,0,0,0.40);
  --mp-seller:         #c084fc;
  --mp-seller-soft:    rgba(192, 132, 252, 0.10);
  --mp-seller-border:  rgba(192, 132, 252, 0.22);
  --mp-warning-bg:     rgba(251,191,36,0.08);
  --mp-warning-border: rgba(251,191,36,0.30);
  --mp-warning-text:   #FCD34D;
  --mp-warning-text-strong: #FDE68A;
  --mp-warning-icon:   #FBBF24;
  --mp-warning-btn-bg: #FBBF24;
  --mp-warning-btn-text: #070E14;
}

/* ============================================================
   2. RESET & BASE
   ============================================================ */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--mp-header-height) + 32px);
}

body {
  font-family: var(--mp-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--mp-text);
  background-color: var(--mp-bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color var(--mp-t-med), color var(--mp-t-med);
}

@media (min-width: 1024px) {
  body > main { min-height: 65vh; }
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--mp-font);
  font-weight: 700;
  line-height: 1.25;
  color: var(--mp-text);
  margin-top: 0;
  letter-spacing: -0.02em;
}

h1 { font-weight: 800; }
h2 { font-weight: 700; }
h3 { font-weight: 600; }
h4 { font-weight: 600; }

h1 { font-size: 32px; }
h2 { font-size: 24px; margin-top: 32px; }
h3 { font-size: 20px; margin-top: 24px; }
h4 { font-size: 17px; margin-top: 20px; }
h5 { font-size: 15px; margin-top: 16px; }
h6 { font-size: 13px; margin-top: 12px; }

p { margin-top: 0; margin-bottom: 16px; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--mp-primary);
  text-decoration: none;
  transition: color var(--mp-t-fast);
}
a:hover, a:focus { color: var(--mp-primary-dark); text-decoration: underline; }

[data-theme="dark"] a { color: var(--mp-accent); }
[data-theme="dark"] a:hover { color: var(--mp-accent-dark); }

ul, ol { padding-left: 24px; margin-bottom: 16px; }
li { margin-bottom: 4px; }
li ul li { list-style-type: circle; }

img { max-width: 100%; height: auto; display: block; }

code, kbd, samp {
  font-family: var(--mp-font-mono);
  font-size: 0.875em;
}

hr {
  border: none;
  border-top: 1px solid var(--mp-border-color);
  margin: 32px 0;
}

/* ============================================================
   3. LAYOUT — HEADER
   ============================================================ */

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--mp-header-height);
  background: rgba(7, 14, 20, 0.97);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 6px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

[data-theme="light"] .header,
:root:not([data-theme]) .header {
  background: rgba(7, 14, 20, 0.96);
}

.logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.logo a { display: flex; align-items: center; text-decoration: none; }
.logo img {
  height: 28px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
}

.nav-wrapper {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  height: 100%;
  flex-shrink: 0;
}

.user-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
}

.user-nav a,
.nav-wrapper a {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.65);
  text-decoration: none;
  padding: 6px 10px;
  border-radius: var(--mp-radius-sm);
  transition: color var(--mp-t-fast), background var(--mp-t-fast);
  white-space: nowrap;
  line-height: 1;
}
.user-nav a:hover,
.nav-wrapper a:hover {
  color: #fff;
  background: rgba(255,255,255,0.06);
  text-decoration: none;
}

/* ── Zendesk user_info widget ── */
.user-info {
  display: flex;
  align-items: center;
  height: var(--mp-header-height);
  flex-shrink: 0;
  position: relative;
}
/* Avatar */
.user-info img {
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
}
/* Sign-in / user name */
.user-info > a,
.user-info .user-name,
.user-info [role="button"],
.user-info > span > a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,0.65) !important;
  padding: 5px 10px !important;
  border-radius: var(--mp-radius-sm) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer;
  max-height: 36px;
  overflow: hidden;
  transition: color var(--mp-t-fast), background var(--mp-t-fast) !important;
}
.user-info > a:hover,
.user-info .user-name:hover,
.user-info [role="button"]:hover,
.user-info > span > a:hover {
  color: #fff !important;
  background: rgba(255,255,255,0.06) !important;
  text-decoration: none !important;
}
/* Dropdown caret */
.user-info .dropdown-toggle::after,
.user-info .icon-chevron-down { opacity: 0.45; font-size: 10px; }
/* Dropdown panel */
.user-info .dropdown-menu {
  display: none;
  position: absolute;
  top: calc(var(--mp-header-height) + 4px);
  right: 0;
  background: var(--mp-mid) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: var(--mp-radius-md) !important;
  box-shadow: var(--mp-shadow-md) !important;
  padding: 6px 0 !important;
  min-width: 180px !important;
  z-index: 200 !important;
}
/* Show when aria-expanded="true" is on the menu itself */
.user-info .dropdown-menu[aria-expanded="true"] {
  display: block !important;
}
/* Inner menu wrapper */
.user-info .dropdown-menu #user-menu,
.user-info .dropdown-menu [role="menu"] {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}
.user-info .dropdown-menu a,
.user-info .dropdown-menu [role="menuitem"] {
  display: block !important;
  padding: 10px 16px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  font-family: var(--mp-font) !important;
  color: rgba(255,255,255,0.70) !important;
  text-decoration: none !important;
  background: transparent !important;
  transition: background var(--mp-t-fast), color var(--mp-t-fast) !important;
  white-space: nowrap !important;
  border: none !important;
}
.user-info .dropdown-menu a:hover,
.user-info .dropdown-menu [role="menuitem"]:hover {
  background: rgba(255,255,255,0.08) !important;
  color: #fff !important;
  text-decoration: none !important;
}

/* Style the toggle button */
.user-info .btn.with-image.dropdown-toggle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 5px 10px !important;
  border-radius: var(--mp-radius-sm) !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  color: rgba(255,255,255,0.65) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  transition: background var(--mp-t-fast), color var(--mp-t-fast) !important;
  max-height: 44px !important;
  box-shadow: none !important;
}
.user-info .btn.with-image.dropdown-toggle:hover {
  background: rgba(255,255,255,0.08) !important;
  color: #fff !important;
}
.user-info .btn.with-image.dropdown-toggle::after {
  content: '▾';
  font-size: 10px;
  opacity: 0.45;
  margin-left: 2px;
}

/* ── Role switcher — classes from mp-role.js ── */

/* Container — always sits in the dark header, so hard-code dark palette */
.mp-role-switcher {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 6px !important;
  flex-shrink: 0;
}

/* "View as:" label */
.mp-role-switcher-label {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.40) !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}

/* All buttons — reset then style */
.mp-role-switcher-btn {
  -webkit-appearance: none !important;
  appearance: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 26px !important;
  padding: 0 10px !important;
  margin: 0 !important;
  width: auto !important;
  font-family: var(--mp-font) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  text-decoration: none !important;
  box-shadow: none !important;
  outline: none !important;
  transition: background var(--mp-t-fast), color var(--mp-t-fast), border-color var(--mp-t-fast) !important;
  /* Inactive: subtle on dark header */
  background: rgba(255,255,255,0.08) !important;
  color: rgba(255,255,255,0.60) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
}

/* Segmented join */
.mp-role-switcher-btn:first-of-type {
  border-radius: var(--mp-radius-sm) 0 0 var(--mp-radius-sm) !important;
}
.mp-role-switcher-btn:last-of-type {
  border-radius: 0 var(--mp-radius-sm) var(--mp-radius-sm) 0 !important;
}
.mp-role-switcher-btn:not(:first-of-type) {
  border-left: none !important;
}

/* Inactive hover */
.mp-role-switcher-btn[aria-pressed="false"]:hover,
.mp-role-switcher-btn:not([aria-pressed]):hover {
  background: rgba(255,255,255,0.14) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,0.20) !important;
}

/* Active state */
.mp-role-switcher-btn[aria-pressed="true"],
.mp-role-switcher-btn[aria-pressed="true"]:hover,
.mp-role-switcher-btn[aria-pressed="true"]:focus {
  background: var(--mp-accent) !important;
  color: #070E14 !important;
  border-color: var(--mp-accent) !important;
  font-weight: 700 !important;
}

/* Active adjacent border fix */
.mp-role-switcher-btn[aria-pressed="true"] + .mp-role-switcher-btn {
  border-left: 1px solid rgba(255,255,255,0.12) !important;
}

/* Focus ring */
.mp-role-switcher-btn:focus-visible {
  outline: 2px solid var(--mp-accent) !important;
  outline-offset: 2px !important;
}

/* Mobile hamburger */
.icon-menu {
  display: none;
  cursor: pointer;
  font-size: 20px;
  color: rgba(255,255,255,0.75);
  margin-right: 8px;
}
@media (max-width: 767px) {
  .icon-menu { display: block; }
  .user-nav { display: none; }
  .user-nav.is-open { display: flex; flex-direction: column; position: absolute; top: var(--mp-header-height); left: 0; right: 0; background: var(--mp-dark); padding: 12px; border-bottom: 1px solid rgba(255,255,255,0.07); z-index: 99; }
}

/* ============================================================
   4. LAYOUT — FOOTER
   ============================================================ */

.footer {
  border-top: 1px solid var(--mp-border-color);
  padding: 24px;
  font-size: 13px;
  color: var(--mp-text-tertiary);
  background: var(--mp-bg-surface);
}
.footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.footer a {
  color: var(--mp-text-tertiary);
  text-decoration: none;
}
.footer a:hover { color: var(--mp-text-secondary); text-decoration: none; }

/* Language selector */
.language-selector .dropdown-toggle {
  cursor: pointer;
  font-size: 13px;
  color: var(--mp-text-tertiary);
}
.language-selector .dropdown-menu {
  position: absolute;
  right: 0;
  background: var(--mp-bg-elevated);
  border: 1px solid var(--mp-border-color);
  border-radius: var(--mp-radius-md);
  box-shadow: var(--mp-shadow-md);
  padding: 6px 0;
  min-width: 160px;
  z-index: 50;
}
.language-selector .dropdown-menu a {
  display: block;
  padding: 8px 16px;
  font-size: 13px;
  color: var(--mp-text-secondary);
}
.language-selector .dropdown-menu a:hover {
  background: var(--mp-bg-hover);
  color: var(--mp-text);
  text-decoration: none;
}
.dropdown { position: relative; }

/* ============================================================
   5. LAYOUT — CONTAINERS
   ============================================================ */

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

.container-divider {
  border-top: 1px solid var(--mp-border-color);
}

/* ============================================================
   6. HOME PAGE
   ============================================================ */

.mp-home-hero {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(0,207,180,0.13) 0%, transparent 70%),
    radial-gradient(circle 400px at 90% 10%, rgba(0,92,113,0.35) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 80% 100%, rgba(0,92,113,0.10) 0%, transparent 60%),
    #070E14;
  min-height: calc(100vh - var(--mp-header-height));
  padding: 72px 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mp-home-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,207,180,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,207,180,0.035) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}
.mp-home-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 0 auto;
  width: 100%;
  text-align: center;
}
.mp-home-hero-title {
  font-size: 40px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.03em;
  margin-bottom: 28px;
}
@media (max-width: 767px) {
  .mp-home-hero-title { font-size: 28px; }
  .mp-home-hero { padding: 48px 20px 56px; }
}

/* Light-mode hero override */
[data-theme="light"] .mp-home-hero,
:root:not([data-theme]) .mp-home-hero {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(0,207,180,0.10) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 80% 100%, rgba(0,92,113,0.08) 0%, transparent 60%),
    #F4F8FB;
}
[data-theme="light"] .mp-home-hero::before,
:root:not([data-theme]) .mp-home-hero::before {
  background-image:
    linear-gradient(rgba(0,92,113,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,92,113,0.055) 1px, transparent 1px);
}
[data-theme="light"] .mp-home-hero-title,
:root:not([data-theme]) .mp-home-hero-title {
  color: var(--mp-text);
}

/* Light-mode search — tweak shadow */
[data-theme="light"] .mp-home-search .search input[type="search"],
:root:not([data-theme]) .mp-home-search .search input[type="search"] {
  box-shadow: 0 4px 24px rgba(0,92,113,0.10), 0 1px 0 rgba(0,0,0,0.04);
  border-color: var(--mp-border-color);
}

/* Light-mode chips */
[data-theme="light"] .mp-chip,
:root:not([data-theme]) .mp-chip {
  background: rgba(0,92,113,0.06);
  border-color: rgba(0,92,113,0.15);
  color: var(--mp-text-secondary);
}
[data-theme="light"] .mp-chip:hover,
:root:not([data-theme]) .mp-chip:hover {
  background: rgba(0,207,180,0.10);
  border-color: rgba(0,207,180,0.35);
  color: var(--mp-primary);
}

/* Hero search */
.mp-home-search { width: 88%; max-width: 640px; margin: 0; }
.mp-home-search .search {
  position: relative;
  width: 100%;
}

.mp-home-search .search input[type="search"],
.mp-home-search input[type="search"] {
  width: 100%;
  height: 56px;
  padding: 0 24px 0 52px;
  text-align: left;
  font-family: var(--mp-font);
  font-size: 16px;
  font-weight: 400;
  color: var(--mp-text);
  background: #fff;
  border: 1.5px solid transparent;
  border-radius: var(--mp-radius-lg);
  outline: none;
  box-shadow: 0 4px 32px rgba(0,0,0,0.30), 0 1px 0 rgba(255,255,255,0.06);
  transition: border-color var(--mp-t-med), box-shadow var(--mp-t-med);
}
.mp-home-search .search input[type="search"]:focus {
  border-color: var(--mp-accent);
  box-shadow: 0 0 0 3px var(--mp-accent-ring), 0 4px 32px rgba(0,0,0,0.25);
}
.mp-home-search .search input[type="search"]::placeholder {
  color: rgba(98,113,128,0.60);
}

[data-theme="dark"] .mp-home-search .search input[type="search"] {
  background: rgba(255,255,255,0.08);
  color: #fff;
  border-color: rgba(255,255,255,0.12);
}
[data-theme="dark"] .mp-home-search .search input[type="search"]::placeholder {
  color: rgba(255,255,255,0.35);
}

.mp-home-search .zd-autocomplete {
  width: 100% !important;
  left: 0 !important;
  right: 0 !important;
  position: absolute !important;
}

.mp-home-search .search::before {
  content: '';
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23627180' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") center/contain no-repeat;
  pointer-events: none;
  z-index: 1;
}

/* Home container */
.mp-home-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 56px 24px;
  background: var(--mp-bg-page);
}

/* Section title */
.mp-section-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--mp-text-tertiary);
  margin-bottom: 20px;
  margin-top: 0;
}

/* Category grid */
.mp-home-categories { margin-bottom: 48px; }
.mp-category-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  justify-content: center;
}
.mp-category-card-wrapper { display: contents; }
.mp-category-card {
  display: flex;
  flex-direction: column;
  padding: 24px;
  background: var(--mp-bg-surface);
  border: 1px solid var(--mp-border-color);
  border-radius: var(--mp-radius-lg);
  text-decoration: none;
  color: var(--mp-text);
  transition: box-shadow var(--mp-t-med), transform var(--mp-t-med), border-color var(--mp-t-med);
  box-shadow: var(--mp-shadow-sm);
  position: relative;
}
.mp-category-card:hover {
  box-shadow: var(--mp-shadow-md);
  transform: translateY(-2px);
  border-color: var(--mp-border-strong);
  text-decoration: none;
  color: var(--mp-text);
}
.mp-category-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.mp-category-card-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--mp-radius-md);
  background: var(--mp-accent-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mp-primary);
  flex-shrink: 0;
}
[data-theme="dark"] .mp-category-card-icon {
  background: rgba(0,207,180,0.12);
  color: var(--mp-accent);
}
.mp-category-card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--mp-text);
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.mp-category-card-desc {
  font-size: 13px;
  color: var(--mp-text-secondary);
  line-height: 1.55;
  flex: 1;
  margin: 0 0 16px;
}
.mp-category-card-arrow {
  color: var(--mp-primary);
  margin-top: auto;
  transition: transform var(--mp-t-fast);
}
[data-theme="dark"] .mp-category-card-arrow { color: var(--mp-accent); }
.mp-category-card:hover .mp-category-card-arrow {
  transform: translateX(3px);
}

/* Home lower section */
.mp-home-lower {
  display: block;
  gap: 32px;
  align-items: start;
}
@media (max-width: 767px) {
  .mp-home-lower { grid-template-columns: 1fr; }
}

/* Promoted articles */
.mp-home-promoted {}
.mp-promoted-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.mp-promoted-item { border-bottom: 1px solid var(--mp-border-color); }
.mp-promoted-item:last-child { border-bottom: none; }
.mp-promoted-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  text-decoration: none;
  color: var(--mp-text);
  gap: 12px;
  transition: color var(--mp-t-fast);
}
.mp-promoted-link:hover { color: var(--mp-primary); text-decoration: none; }
[data-theme="dark"] .mp-promoted-link:hover { color: var(--mp-accent); }
.mp-promoted-title { font-size: 14px; font-weight: 500; }
.mp-promoted-arrow { color: var(--mp-text-tertiary); flex-shrink: 0; transition: transform var(--mp-t-fast); }
.mp-promoted-link:hover .mp-promoted-arrow { transform: translateX(3px); color: currentColor; }

/* Changelog card */
.mp-home-changelog {}
.mp-changelog-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  background: var(--mp-bg-surface);
  border: 1px solid var(--mp-border-color);
  border-radius: var(--mp-radius-lg);
  text-decoration: none;
  color: var(--mp-text);
  min-width: 260px;
  transition: box-shadow var(--mp-t-med), border-color var(--mp-t-med);
  box-shadow: var(--mp-shadow-sm);
}
.mp-changelog-card:hover {
  box-shadow: var(--mp-shadow-md);
  border-color: var(--mp-border-strong);
  text-decoration: none;
  color: var(--mp-text);
}
.mp-changelog-card-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--mp-radius-md);
  background: var(--mp-accent-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mp-primary);
  flex-shrink: 0;
}
[data-theme="dark"] .mp-changelog-card-icon {
  background: rgba(0,207,180,0.12);
  color: var(--mp-accent);
}
.mp-changelog-card-body { flex: 1; }
.mp-changelog-card-title { font-size: 14px; font-weight: 700; margin: 0 0 3px; }
.mp-changelog-card-desc { font-size: 12px; color: var(--mp-text-secondary); line-height: 1.5; margin: 0; }
.mp-changelog-card-arrow {
  color: var(--mp-text-tertiary);
  flex-shrink: 0;
  transition: transform var(--mp-t-fast);
}
.mp-changelog-card:hover .mp-changelog-card-arrow { transform: translate(2px,-2px); }

/* Pagination */
.pagination,
nav.pagination ul,
nav[role="navigation"] .pagination {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 32px;
  list-style: none;
  padding: 0;
  flex-wrap: wrap;
}
.pagination li {
  list-style: none;
  margin: 0;
}
.pagination li::marker,
.pagination li::before { display: none; content: none; }
.pagination li a,
.pagination li span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--mp-radius-md);
  font-size: 13px;
  font-weight: 600;
  border: 1.5px solid var(--mp-border-color);
  background: var(--mp-bg-surface);
  color: var(--mp-text-secondary);
  text-decoration: none;
  transition: all var(--mp-t-fast);
}
.pagination li a:hover {
  border-color: var(--mp-primary);
  color: var(--mp-primary);
  text-decoration: none;
}
.pagination li.active a,
.pagination li.current a {
  background: var(--mp-primary);
  border-color: var(--mp-primary);
  color: #fff;
}
[data-theme="dark"] .pagination li.active a,
[data-theme="dark"] .pagination li.current a {
  background: var(--mp-accent);
  border-color: var(--mp-accent);
  color: var(--mp-dark);
}
.pagination li.disabled span,
.pagination li.disabled a { opacity: 0.35; pointer-events: none; }

/* ============================================================
   7. NAVIGATION — BREADCRUMBS
   ============================================================ */

.breadcrumbs,
.mp-article-breadcrumb .breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
}
.breadcrumbs li,
.breadcrumbs li a {
  font-size: 13px;
  font-weight: 500;
  color: var(--mp-text-tertiary);
  text-decoration: none;
  transition: color var(--mp-t-fast);
}
.breadcrumbs li a:hover { color: var(--mp-primary); text-decoration: none; }
[data-theme="dark"] .breadcrumbs li a:hover { color: var(--mp-accent); }
.breadcrumbs li + li::before {
  content: '/';
  margin-right: 4px;
  color: var(--mp-border-strong);
}
.breadcrumbs li:last-child,
.breadcrumbs li:last-child a {
  color: var(--mp-text-secondary);
  font-weight: 600;
}

/* ============================================================
   8. ARTICLE PAGE — 3-COLUMN LAYOUT
   ============================================================ */

.mp-article-layout {
  display: grid;
  grid-template-columns: var(--mp-sidebar-width) 1fr var(--mp-toc-width);
  grid-template-rows: auto 1fr;
  gap: 0;
  max-width: 1440px;
  margin: 0 auto;
  min-height: calc(100vh - var(--mp-header-height));
  align-items: start;
}

/* No TOC variant (section page) */
.mp-article-layout.mp-no-toc {
  grid-template-columns: var(--mp-sidebar-width) 1fr;
}
.mp-article-layout.mp-no-toc .mp-article-toc {
  display: none;
}

.mp-article-main {
  padding: 40px 48px;
  min-width: 0;
  width: 100%;
}
@media (max-width: 1199px) {
  .mp-article-main { padding: 32px 32px; }
}

/* Mobile sidebar toggle */
.mp-doc-sidebar-toggle {
  display: none;
  align-items: center;
  gap: 8px;
  background: var(--mp-bg-surface);
  border: 1px solid var(--mp-border-color);
  border-radius: var(--mp-radius-md);
  padding: 8px 14px;
  font-family: var(--mp-font);
  font-size: 13px;
  font-weight: 600;
  color: var(--mp-text-secondary);
  cursor: pointer;
  margin: 16px 20px 0;
  transition: background var(--mp-t-fast), color var(--mp-t-fast);
}
.mp-doc-sidebar-toggle:hover {
  background: var(--mp-bg-hover);
  color: var(--mp-text);
}

@media (max-width: 767px) {
  .mp-article-layout {
    display: block;
  }
  .mp-doc-sidebar {
    position: fixed;
    top: var(--mp-header-height);
    left: -100%;
    width: 280px;
    height: calc(100vh - var(--mp-header-height));
    z-index: 90;
    transition: left var(--mp-t-slow);
    overflow-y: auto;
  }
  .mp-doc-sidebar.is-open {
    left: 0;
    box-shadow: var(--mp-shadow-md);
  }
  .mp-doc-sidebar-toggle { display: flex; }
  .mp-article-main { padding: 24px 20px; }
  .mp-article-toc { display: none; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .mp-article-layout {
    grid-template-columns: var(--mp-sidebar-width) 1fr;
  }
  .mp-article-toc { display: none; }
}

/* Article subnav (breadcrumb + scoped search row) */
.mp-article-subnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.mp-article-subnav .breadcrumbs { margin-bottom: 0; }

/* Article header */
.mp-article-header { margin-bottom: 24px; }
.mp-article-title {
  font-size: 28px;
  font-weight: 800;
  color: var(--mp-text);
  line-height: 1.2;
  letter-spacing: -0.025em;
  margin: 0 0 12px;
}
.mp-article-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.mp-article-meta-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--mp-text-tertiary);
}
.mp-badge-slot { display: inline-flex; }

/* Article footer */
.mp-article-footer { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--mp-border-color); }
.mp-article-votes { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mp-article-votes-question { font-size: 14px; color: var(--mp-text-secondary); font-weight: 500; }
.mp-article-votes-controls { display: flex; gap: 8px; }
.article-vote {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1.5px solid var(--mp-border-color);
  border-radius: var(--mp-radius-md);
  background: var(--mp-bg-surface);
  color: var(--mp-text-secondary);
  font-family: var(--mp-font);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--mp-t-fast);
  min-width: 44px;
  height: 36px;
}
.article-vote:hover {
  border-color: var(--mp-primary);
  color: var(--mp-primary);
  background: var(--mp-primary-light);
  text-decoration: none;
}
[data-theme="dark"] .article-vote:hover {
  border-color: var(--mp-accent);
  color: var(--mp-accent);
  background: var(--mp-accent-soft);
}
/* Thumb up icon */
/* Thumb up — light mode */
.article-vote-up::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23627180' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3H14z'/%3E%3Cpath d='M7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: background var(--mp-t-fast);
}
.article-vote-up:hover::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23005C71' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3H14z'/%3E%3Cpath d='M7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3'/%3E%3C/svg%3E");
}

/* Thumb down — light mode */
.article-vote-down::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23627180' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3H10z'/%3E%3Cpath d='M17 2h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: background var(--mp-t-fast);
}
.article-vote-down:hover::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23005C71' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3H10z'/%3E%3Cpath d='M17 2h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17'/%3E%3C/svg%3E");
}

/* Dark mode overrides */
[data-theme="dark"] .article-vote-up::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238FA3B1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3H14z'/%3E%3Cpath d='M7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3'/%3E%3C/svg%3E");
}
[data-theme="dark"] .article-vote-up:hover::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2300CFB4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3H14z'/%3E%3Cpath d='M7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3'/%3E%3C/svg%3E");
}
[data-theme="dark"] .article-vote-down::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238FA3B1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3H10z'/%3E%3Cpath d='M17 2h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17'/%3E%3C/svg%3E");
}
[data-theme="dark"] .article-vote-down:hover::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2300CFB4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3H10z'/%3E%3Cpath d='M17 2h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17'/%3E%3C/svg%3E");
}

/* Hide Zendesk's own icon text inside the vote links */
.article-vote .icon-thumbs-up,
.article-vote .icon-thumbs-down {
  display: none;
}

/* Attachments */
.mp-article-attachments { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--mp-border-color); }
.mp-attachments-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--mp-text-tertiary); margin: 0 0 12px; }
.mp-attachments-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.mp-attachment-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--mp-border-color);
  border-radius: var(--mp-radius-md);
  background: var(--mp-bg-subtle);
}
.mp-attachment-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--mp-primary);
  text-decoration: none;
  font-weight: 500;
}
.mp-attachment-name:hover { text-decoration: underline; }
[data-theme="dark"] .mp-attachment-name { color: var(--mp-accent); }
.mp-attachment-meta { font-size: 11px; color: var(--mp-text-tertiary); }

/* Related / recent articles */
.mp-article-relatives { margin-top: 32px; }

/* Return to top */
.article-return-to-top-custom {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 50;
}
.article-return-to-top-custom a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--mp-bg-surface);
  border: 1px solid var(--mp-border-color);
  border-radius: var(--mp-radius-md);
  color: var(--mp-text-secondary);
  box-shadow: var(--mp-shadow-md);
  transition: all var(--mp-t-fast);
  text-decoration: none;
}
.article-return-to-top-custom a:hover {
  background: var(--mp-bg-hover);
  color: var(--mp-text);
  transform: translateY(-2px);
  text-decoration: none;
}

/* ============================================================
   9. DOC SIDEBAR & TREE
   ============================================================ */

.mp-doc-sidebar {
  position: sticky;
  top: var(--mp-header-height);
  height: calc(100vh - var(--mp-header-height));
  overflow-y: auto;
  background: var(--mp-bg-surface);
  border-right: 1px solid var(--mp-border-color);
  scrollbar-width: thin;
  scrollbar-color: var(--mp-border-color) transparent;
}
.mp-doc-sidebar::-webkit-scrollbar { width: 4px; }
.mp-doc-sidebar::-webkit-scrollbar-track { background: transparent; }
.mp-doc-sidebar::-webkit-scrollbar-thumb { background: var(--mp-border-color); border-radius: 4px; }

.mp-doc-sidebar-inner { padding: 24px 0 40px; }

.mp-doc-sidebar-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--mp-text-tertiary);
  padding: 0 20px 12px;
  border-bottom: 1px solid var(--mp-border-color);
  margin-bottom: 12px;
}

/* Tree groups */
.mp-doc-tree-group { margin-bottom: 4px; }
.mp-doc-tree-group-title {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: none;
  box-shadow: none;
  outline: none;
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 20px;
  font-family: var(--mp-font);
  font-size: 13px;
  font-weight: 600;
  color: var(--mp-text-secondary);
  cursor: pointer;
  user-select: none;
  transition: color var(--mp-t-fast), background var(--mp-t-fast);
  border-radius: 0;
}
.mp-doc-tree-group-title:hover {
  color: var(--mp-text);
  background: var(--mp-bg-hover);
}
.mp-doc-tree-group-title:focus { outline: none; }
.mp-doc-tree-group-title:focus-visible {
  outline: 2px solid var(--mp-accent);
  outline-offset: -2px;
}
.mp-doc-tree-caret {
  color: var(--mp-text-tertiary);
  transition: transform var(--mp-t-fast);
  flex-shrink: 0;
  display: flex;
}
/* Collapsed by default — sections hidden */
.mp-doc-tree-group[data-collapsed="true"] .mp-doc-tree-sections {
  display: none;
}
/* Expanded — sections visible, caret rotated */
.mp-doc-tree-group[data-collapsed="false"] .mp-doc-tree-sections {
  display: block;
}
.mp-doc-tree-group[data-collapsed="false"] .mp-doc-tree-caret {
  transform: rotate(180deg);
}
/* Fallback for old .is-open pattern */
.mp-doc-tree-group.is-open .mp-doc-tree-caret { transform: rotate(180deg); }

/* Expanded group — active category styling */
.mp-doc-tree-group[data-collapsed="false"] > .mp-doc-tree-group-title {
  color: var(--mp-text);
  background: var(--mp-bg-hover);
  border-left: 2px solid var(--mp-accent);
  padding-left: 18px;
}
.mp-doc-tree-group[data-collapsed="false"] > .mp-doc-tree-group-title .mp-doc-tree-caret {
  color: var(--mp-accent);
}

.mp-doc-tree-group[data-collapsed="false"] .mp-doc-tree-sections {
  list-style: none;
  padding: 0;
  margin-bottom: 4px;
}
.mp-doc-tree-sections li,
.mp-doc-tree-sections li::marker,
.mp-doc-tree-sections li::before {
  list-style: none;
  content: none;
}

/* Tree items */
.mp-doc-tree-items {
  list-style: none;
  padding: 0;
  margin: 0;
}
.mp-doc-tree-items li { margin: 0; }
.mp-doc-tree-item {
  display: block;
  padding: 6px 20px 6px 36px;
  font-size: 13px;
  font-weight: 400;
  color: var(--mp-text-secondary);
  text-decoration: none;
  transition: background var(--mp-t-fast), color var(--mp-t-fast);
  border-left: 2px solid transparent;
  line-height: 1.45;
}
.mp-doc-tree-item:hover {
  background: var(--mp-bg-hover);
  color: var(--mp-text);
  text-decoration: none;
}
.mp-doc-tree-item.mp-doc-tree-item-active {
  background: var(--mp-accent-soft);
  color: var(--mp-primary);
  border-left-color: var(--mp-accent);
  font-weight: 600;
}
[data-theme="dark"] .mp-doc-tree-item.mp-doc-tree-item-active {
  color: var(--mp-accent);
}
.mp-doc-tree-see-more {
  display: block;
  padding: 5px 20px 5px 36px;
  font-size: 12px;
  color: var(--mp-text-tertiary);
  text-decoration: none;
}
.mp-doc-tree-see-more:hover { color: var(--mp-primary); text-decoration: none; }

/* Skeleton loading state */
.mp-doc-tree[data-state="loading"] .mp-doc-tree-group-title,
.mp-doc-tree[data-state="loading"] .mp-doc-tree-item {
  opacity: 0.5;
}

/* ============================================================
   10. TOC (right rail)
   ============================================================ */

.mp-article-toc {
  position: sticky;
  top: var(--mp-header-height);
  height: calc(100vh - var(--mp-header-height));
  overflow-y: auto;
  padding: 40px 20px 40px 0;
  scrollbar-width: thin;
  scrollbar-color: var(--mp-border-color) transparent;
}
.mp-article-toc::-webkit-scrollbar { width: 4px; }
.mp-article-toc::-webkit-scrollbar-thumb { background: var(--mp-border-color); border-radius: 4px; }

.mp-article-toc-inner { padding-left: 16px; border-left: 1px solid var(--mp-border-color); }
.mp-article-toc-title {
  font-size: 11px;          /* DS eyebrow spec */
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--mp-accent);  /* DS eyebrow: accent colour */
  margin-bottom: 12px;
}

#toc {
  list-style: none;
  padding: 0;
  margin: 0;
}
#toc li { margin: 0; list-style: none; }
/* h2-level links — slightly larger, primary nav weight */
#toc > li > a {
  font-size: 13px;
}
#toc a {
  display: block;
  padding: 4px 6px;
  font-size: 12px;
  color: var(--mp-text-tertiary);
  text-decoration: none;
  line-height: 1.4;
  border-radius: var(--mp-radius-sm);
  transition: color var(--mp-t-fast), background var(--mp-t-fast);
}
#toc a:hover {
  color: var(--mp-text-secondary);
  background: var(--mp-bg-hover);
  text-decoration: none;
}
#toc li.active > a,
#toc li.active a {
  color: var(--mp-primary);
  font-weight: 600;
  background: var(--mp-accent-soft); /* DS active row pattern */
}
[data-theme="dark"] #toc li.active > a,
[data-theme="dark"] #toc li.active a {
  color: var(--mp-accent);
}
/* Nested TOC — indent + connector line, no bullets */
#toc ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
#toc ul li {
  list-style: none;
  position: relative;
  padding-left: 12px;
}
#toc ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--mp-border-strong); /* step up from border-color for visibility */
}
#toc ul li.active::before {
  background: var(--mp-accent);        /* accent on active, not just primary */
}
[data-theme="dark"] #toc ul li.active::before {
  background: var(--mp-accent);
}

/* TOC scrollable (> 12 items, applied by script.js) */
#toc.toc-scroll {
  max-height: 70vh;
  overflow-y: auto;
}

/* Scoped search */
.mp-scoped-search { flex-shrink: 0; }
.mp-scoped-search .search { position: relative; }
.mp-scoped-search input[type="search"] {
  height: 34px;
  padding: 0 12px 0 34px;
  font-family: var(--mp-font);
  font-size: 13px;
  color: var(--mp-text);
  background: var(--mp-bg-subtle);
  border: 1px solid var(--mp-border-color);
  border-radius: var(--mp-radius-md);
  outline: none;
  transition: border-color var(--mp-t-fast), box-shadow var(--mp-t-fast);
  width: 200px;
}
.mp-scoped-search input[type="search"]:focus {
  border-color: var(--mp-primary);
  box-shadow: 0 0 0 3px rgba(0,92,113,0.10);
  background: var(--mp-bg-surface);
}
.mp-scoped-search input[type="search"]::placeholder { color: var(--mp-text-tertiary); }
.mp-scoped-search .search::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238FA3B1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") center/contain no-repeat;
  pointer-events: none;
}

/* ============================================================
   11. ARTICLE BODY TYPOGRAPHY
   ============================================================ */

.article-body {
  font-size: 15px;
  line-height: 1.75;
  color: var(--mp-text);
  overflow-wrap: break-word;
  word-break: break-word;
}
.article-body > * + * { margin-top: 0; }
.article-body p { margin-bottom: 18px; color: var(--mp-text-secondary); }
.article-body p:last-child { margin-bottom: 0; }

.article-body h1,
.article-body h2,
.article-body h3,
.article-body h4,
.article-body h5 {
  color: var(--mp-text);
  position: relative;
  scroll-margin-top: calc(var(--mp-header-height) + 20px);
}
.article-body h2 { font-size: 22px; margin-top: 40px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--mp-border-color); }
.article-body h3 { font-size: 18px; margin-top: 32px; margin-bottom: 10px; }
.article-body h4 { font-size: 15px; margin-top: 24px; margin-bottom: 8px; }

.article-body a {
  color: var(--mp-primary);
  text-decoration: underline;
  text-decoration-color: rgba(0,92,113,0.30);
  text-underline-offset: 3px;
}
.article-body a:hover { text-decoration-color: var(--mp-primary); }
[data-theme="dark"] .article-body a { color: var(--mp-accent); text-decoration-color: rgba(0,207,180,0.35); }
[data-theme="dark"] .article-body a:hover { text-decoration-color: var(--mp-accent); }

.article-body strong, .article-body b { font-weight: 700; color: var(--mp-text); }
.article-body em, .article-body i { font-style: italic; }

.article-body ul, .article-body ol { padding-left: 24px; margin-bottom: 18px; }
.article-body li { margin-bottom: 6px; color: var(--mp-text-secondary); }
.article-body ul li::marker { color: var(--mp-accent); }
.article-body ol li::marker { color: var(--mp-primary); font-weight: 700; }
[data-theme="dark"] .article-body ol li::marker { color: var(--mp-accent); }

/* Code */
.article-body code {
  font-family: var(--mp-font-mono);
  font-size: 0.85em;
  background: var(--mp-bg-code);
  border: 1px solid var(--mp-border-color);
  border-radius: var(--mp-radius-xs);
  padding: 2px 6px;
  color: var(--mp-primary);
}
[data-theme="dark"] .article-body code { color: var(--mp-accent); }
.article-body pre {
  background: var(--mp-bg-code);
  border: 1px solid var(--mp-border-color);
  border-radius: var(--mp-radius-md);
  padding: 18px 20px;
  overflow-x: auto;
  margin-bottom: 20px;
}
.article-body pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: 13px;
  color: var(--mp-text);
}

/* Blockquote */
.article-body blockquote {
  border-left: 3px solid var(--mp-accent);
  padding: 4px 0 4px 20px;
  margin: 24px 0;
  color: var(--mp-text-secondary);
  font-style: italic;
}
.article-body blockquote p { color: var(--mp-text-secondary); }

/* Tables */
/* The base theme sets display:table (plus margin-left/right:auto for
   alignment) on figure.wysiwyg-table-align-* — that's meant for the
   rich-text editor's table alignment feature, but it makes the figure
   shrink-wrap to its content's full natural width instead of staying
   inside the article column. For data tables that's exactly wrong:
   it lets the figure (and everything inside it) balloon past the
   article width, bypassing the table-wrapper scroll fix entirely.
   Force it back to a normal full-width block. */
.article-body figure.wysiwyg-table {
  display: block;
  max-width: 100%;
  margin: 0 0 24px;
}
.article-body table,
table, th, td {
  border-collapse: collapse;
}
   /* .table-wrapper is created by addHorizontalScrollbarToTable() in
      script.js, which already wraps every table and sets overflow-x:auto
      inline — but never let the table itself grow past 100% width, so it
      silently did nothing and columns kept getting crushed. This gives
      the wrapper its visual styling and lets the table grow to its
      natural width so the wrapper actually has something to scroll. */
   .article-body .table-wrapper {
     max-width: 100%;
     overflow-y: hidden;
     border: 1px solid var(--mp-border-color);
     border-radius: var(--mp-radius-md);
     -webkit-overflow-scrolling: touch;
     scrollbar-width: thin;
     scrollbar-color: var(--mp-border-color) transparent;
   }
   .article-body .table-wrapper::-webkit-scrollbar { height: 6px; }
   .article-body .table-wrapper::-webkit-scrollbar-track { background: transparent; }
   .article-body .table-wrapper::-webkit-scrollbar-thumb { background: var(--mp-border-color); border-radius: 4px; }
   .article-body .table-wrapper table {
     width: max-content;
     min-width: 100%;
   }
   .article-body table {
     font-size: 14px;
     margin-bottom: 0;
   }
   .article-body td, .article-body th {
     min-width: 100px;
   }
.article-body table {
  font-size: 14px;
  margin-bottom: 0;
}
.article-body td, .article-body th {
  min-width: 100px;
}
.article-body thead th {
  background: var(--mp-primary-light);
  color: var(--mp-primary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 10px 16px;
  text-align: left;
  border-bottom: 1px solid var(--mp-border-color);
}
[data-theme="dark"] .article-body thead th {
  background: rgba(0,92,113,0.15);
  color: var(--mp-accent);
}
.article-body tbody tr { background: var(--mp-bg-surface); transition: background var(--mp-t-fast); }
.article-body tbody tr:hover { background: var(--mp-bg-hover); }
.article-body td, .article-body th {
  padding: 10px 16px;
  border-bottom: 1px solid var(--mp-border-color);
  vertical-align: top;
  line-height: 1.5;
  color: var(--mp-text-secondary);
  overflow-wrap: break-word;
}
.article-body tbody tr:last-child td { border-bottom: none; }
.article-body tbody td:first-child { font-weight: 600; color: var(--mp-text); }

/* Sticky first column — stays visible while the rest of a wide table
   scrolls horizontally inside .table-wrapper. */
.article-body .table-wrapper td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background-color: inherit; /* follow the row's bg, incl. hover, automatically */
  box-shadow: 1px 0 0 var(--mp-border-color); /* thin edge so it reads as "pinned" once scrolled */
}

/* Note/callout boxes */
.article-body div.note {
  border-left: 3px solid var(--mp-info-border);
  background: var(--mp-info-bg);
  border-radius: 0 var(--mp-radius-md) var(--mp-radius-md) 0;
  padding: 14px 18px;
  margin: 20px 0;
  font-size: 14px;
}
.article-body div.note p,
.article-body div.note li { color: var(--mp-info-text); margin-bottom: 6px; }
.article-body div.note p:last-child { margin-bottom: 0; }

.article-body div.note.tip {
  border-left-color: #38BDF8;
  background: #F0F9FF;
}
.article-body div.note.tip p,
.article-body div.note.tip li { color: #0369A1; }

.article-body div.note.important {
  border-left-color: #FB923C;
  background: #FFF7ED;
}
.article-body div.note.important p,
.article-body div.note.important li { color: #9A3412; }

.article-body div.note.warning {
  border-left-color: var(--mp-warning-icon);
  background: var(--mp-warning-bg);
}
.article-body div.note.warning p,
.article-body div.note.warning li { color: var(--mp-warning-text); }

/* Dark mode notes */
[data-theme="dark"] .article-body div.note {
  background: rgba(0,92,113,0.10);
  border-left-color: var(--mp-accent);
}
[data-theme="dark"] .article-body div.note p,
[data-theme="dark"] .article-body div.note li { color: var(--mp-text); }

[data-theme="dark"] .article-body div.note.tip {
  background: rgba(56,189,248,0.08);
  border-left-color: #38BDF8;
}
[data-theme="dark"] .article-body div.note.tip p,
[data-theme="dark"] .article-body div.note.tip li { color: #7DD3FC; }

[data-theme="dark"] .article-body div.note.important {
  background: rgba(212,93,0,0.10);
  border-left-color: #FB923C;
}
[data-theme="dark"] .article-body div.note.important p,
[data-theme="dark"] .article-body div.note.important li { color: #FDBA74; }

[data-theme="dark"] .article-body div.note.warning {
  background: var(--mp-warning-bg);
  border-left-color: var(--mp-warning-icon);
}
[data-theme="dark"] .article-body div.note.warning p,
[data-theme="dark"] .article-body div.note.warning li { color: var(--mp-warning-text); }

.article-body div.note a { color: var(--mp-primary); }
[data-theme="dark"] .article-body div.note a { color: var(--mp-accent); }

/* Images in article */
.article-body img { border-radius: var(--mp-radius-md); max-width: 100%; margin: 16px 0; }

/* ============================================================
   12. SECTION PAGE
   ============================================================ */

.mp-section-header { margin-bottom: 32px; }
.mp-section-header .mp-section-title {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--mp-text);
  margin-bottom: 8px;
}
.mp-section-description { font-size: 15px; color: var(--mp-text-secondary); margin-bottom: 20px; }
.mp-section-header .mp-scoped-search { margin-top: 16px; }

/* Article list */
.mp-article-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.mp-article-list-item {
  border-bottom: 1px solid var(--mp-border-color);
}
.mp-article-list-item:first-child { border-top: 1px solid var(--mp-border-color); }
.mp-article-list-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  text-decoration: none;
  color: var(--mp-text);
  gap: 12px;
  transition: color var(--mp-t-fast);
}
.mp-article-list-link:hover { color: var(--mp-primary); text-decoration: none; }
[data-theme="dark"] .mp-article-list-link:hover { color: var(--mp-accent); }
.mp-article-list-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  flex: 1;
}
.mp-article-list-star { color: var(--mp-accent); }
.mp-article-list-arrow { color: var(--mp-text-tertiary); flex-shrink: 0; transition: transform var(--mp-t-fast); }
.mp-article-list-link:hover .mp-article-list-arrow { transform: translateX(3px); }

.mp-section-empty { padding: 32px 0; color: var(--mp-text-tertiary); font-size: 14px; }

/* Sub-sections */
.mp-subsections { margin-top: 40px; }
.mp-subsections-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--mp-text-tertiary); margin-bottom: 16px; }
.mp-subsection { margin-bottom: 32px; }
.mp-subsection-title a { font-size: 16px; font-weight: 700; color: var(--mp-text); text-decoration: none; }
.mp-subsection-title a:hover { color: var(--mp-primary); }
.mp-article-list-nested { margin-top: 12px; }
.mp-see-all-articles { display: inline-block; margin-top: 10px; font-size: 13px; color: var(--mp-primary); text-decoration: none; font-weight: 500; }
.mp-see-all-articles:hover { text-decoration: underline; }
[data-theme="dark"] .mp-see-all-articles { color: var(--mp-accent); }

/* ============================================================
   13. BUTTONS & FORMS
   ============================================================ */

/* Base button */
.button,
[role="button"],
input[type="submit"],
button.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--mp-font);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  padding: 14px 28px;
  border-radius: var(--mp-radius-sm);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: all var(--mp-t-med);
  width: auto;
  user-select: none;
  -webkit-appearance: none;
  appearance: none;
}

/* Primary */
.button,
input[type="submit"] {
  background: var(--mp-accent);
  color: var(--mp-dark);
  border-color: var(--mp-accent);
}
.button:hover,
input[type="submit"]:hover {
  background: var(--mp-accent-dark);
  border-color: var(--mp-accent-dark);
  color: var(--mp-dark);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0,207,180,0.30);
  text-decoration: none;
}
.button:focus-visible,
input[type="submit"]:focus-visible {
  outline: 3px solid var(--mp-primary);
  outline-offset: 3px;
}

/* Secondary / outline */
[role="button"] {
  background: transparent;
  color: var(--mp-primary);
  border-color: var(--mp-primary);
}
[role="button"]:hover {
  background: var(--mp-primary);
  color: #fff;
  text-decoration: none;
}

/* Large button */
.button-large,
input[type="submit"] {
  padding: 13px 28px;
  font-size: 14px;
  min-width: 140px;
}

/* Submit disabled */
input[type="submit"][disabled] {
  background: var(--mp-border-color);
  border-color: var(--mp-border-color);
  color: var(--mp-text-tertiary);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Secondary variant */
.button-secondary {
  background: transparent;
  color: var(--mp-text-secondary);
  border-color: var(--mp-border-color);
}
.button-secondary:hover {
  color: var(--mp-text);
  border-color: var(--mp-border-strong);
  background: var(--mp-bg-hover);
}

/* Form fields */
.form { max-width: 650px; }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field ~ .form-field { margin-top: 24px; }

.form-field label,
.form-field .form-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--mp-text);
  display: block;
}
.form-field.required > label::after,
.form-field.required > .form-label::after {
  content: "*";
  color: #EF4444;
  margin-left: 3px;
}
.form-field p { font-size: 12px; color: var(--mp-text-tertiary); margin: 2px 0 0; }

input[type="text"],
input[type="email"],
input[type="search"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="password"],
textarea,
select,
.nesty-input {
  font-family: var(--mp-font);
  font-size: 14px;
  font-weight: 400;
  background: var(--mp-bg-surface);
  border: 1.5px solid var(--mp-border-color);
  border-radius: var(--mp-radius-md);
  padding: 11px 14px;
  color: var(--mp-text);
  outline: none;
  width: 100%;
  transition: border-color var(--mp-t-fast), box-shadow var(--mp-t-fast);
  -webkit-appearance: none;
  appearance: none;
}
input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="search"]::placeholder,
textarea::placeholder { color: rgba(98,113,128,0.55); }

input[type="text"]:hover,
input[type="email"]:hover,
input[type="search"]:hover,
textarea:hover,
select:hover { border-color: var(--mp-border-strong); }

input[type="text"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus,
.nesty-input:focus {
  border-color: var(--mp-primary);
  box-shadow: 0 0 0 3px rgba(0,92,113,0.10);
}
[data-theme="dark"] input[type="text"]:focus,
[data-theme="dark"] input[type="email"]:focus,
[data-theme="dark"] input[type="search"]:focus,
[data-theme="dark"] textarea:focus {
  border-color: var(--mp-accent);
  box-shadow: 0 0 0 3px rgba(0,207,180,0.15);
}

[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="url"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background: var(--mp-bg-elevated);
  border-color: var(--mp-border-color);
  color: var(--mp-text);
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder { color: rgba(143,163,177,0.45); }

textarea { resize: vertical; min-height: 100px; line-height: 1.6; }

select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='none' stroke='%23627180' stroke-width='2'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
  cursor: pointer;
}

input[type="checkbox"],
input[type="radio"] {
  width: auto;
  padding: 0;
  accent-color: var(--mp-primary);
  cursor: pointer;
}
[data-theme="dark"] input[type="checkbox"],
[data-theme="dark"] input[type="radio"] {
  accent-color: var(--mp-accent);
}

.form footer { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--mp-border-color); }
.form footer a { color: var(--mp-text-tertiary); cursor: pointer; margin-right: 16px; font-size: 13px; }

/* Suggestion list (new request) */
.form .suggestion-list { font-size: 13px; margin-top: 24px; }
.form .suggestion-list label {
  display: block;
  padding: 10px 0;
  border-bottom: 1px solid var(--mp-border-color);
  cursor: pointer;
  color: var(--mp-text-secondary);
}
.form .suggestion-list label:hover { color: var(--mp-primary); }

/* Nesty (tag input) */
.nesty-input {
  height: 44px;
  line-height: 44px;
  cursor: pointer;
}

/* ============================================================
   14. AUDIENCE BADGES & ROLE FILTERING
   ============================================================ */

.mp-audience-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--mp-radius-xs);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: 1px solid var(--mp-border-color);
  color: var(--mp-text-tertiary);
  background: transparent;
  line-height: 1.4;
}
.mp-audience-badge.mp-audience-operator {
  color: var(--mp-primary);
  border-color: rgba(0,92,113,0.20);
  background: var(--mp-primary-light);
}
[data-theme="dark"] .mp-audience-badge.mp-audience-operator {
  color: var(--mp-accent);
  border-color: rgba(0,207,180,0.20);
  background: rgba(0,207,180,0.08);
}
.mp-audience-badge.mp-audience-seller {
  color: var(--mp-seller);
  border-color: var(--mp-seller-border);
  background: var(--mp-seller-soft);
}
.mp-audience-badge.mp-audience-both { background: transparent; }

/* Role-based dimming */
[data-mp-role="operator"] [data-mp-audience="seller"]:not(.mp-audience-badge),
[data-mp-role="seller"] [data-mp-audience="operator"]:not(.mp-audience-badge) {
  opacity: 0.40;
  transition: opacity var(--mp-t-fast);
}
[data-mp-role="operator"] [data-mp-audience="seller"]:not(.mp-audience-badge):hover,
[data-mp-role="seller"] [data-mp-audience="operator"]:not(.mp-audience-badge):hover,
[data-mp-role="operator"] [data-mp-audience="seller"]:not(.mp-audience-badge):focus-within,
[data-mp-role="seller"] [data-mp-audience="operator"]:not(.mp-audience-badge):focus-within {
  opacity: 1;
}

/* ============================================================
   15. MISMATCH WARNING BANNER
   ============================================================ */

.mp-mismatch-warning {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px 14px 18px;
  margin: 0 0 28px;
  background: var(--mp-warning-bg);
  border: 1px solid var(--mp-warning-border);
  border-left: 3px solid var(--mp-warning-icon);
  border-radius: var(--mp-radius-md);
  color: var(--mp-warning-text);
  font-size: 14px;
  line-height: 1.5;
}
.mp-mismatch-icon { color: var(--mp-warning-icon); font-size: 18px; flex-shrink: 0; line-height: 1; }
.mp-mismatch-msg { flex: 1; }
.mp-mismatch-msg strong { color: var(--mp-warning-text-strong); font-weight: 600; }
.mp-mismatch-actions { flex-shrink: 0; }
.mp-mismatch-switch {
  background: var(--mp-warning-btn-bg);
  color: var(--mp-warning-btn-text);
  border: none;
  padding: 7px 14px;
  border-radius: var(--mp-radius-md);
  font-family: var(--mp-font);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: filter var(--mp-t-fast);
  width: auto !important;
  line-height: 1.4;
}
.mp-mismatch-switch:hover { filter: brightness(1.1); }
.mp-mismatch-dismiss {
  background: transparent;
  border: none;
  color: var(--mp-warning-text);
  font-size: 18px;
  width: 28px;
  height: 28px;
  border-radius: var(--mp-radius-xs);
  cursor: pointer;
  flex-shrink: 0;
  opacity: 0.6;
  transition: opacity var(--mp-t-fast), background var(--mp-t-fast);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mp-mismatch-dismiss:hover { opacity: 1; background: rgba(0,0,0,0.05); }
[data-theme="dark"] .mp-mismatch-dismiss:hover { background: rgba(255,255,255,0.05); }

@media (max-width: 767px) {
  .mp-mismatch-warning { flex-wrap: wrap; }
  .mp-mismatch-actions { flex-basis: 100%; margin-top: 4px; }
}

/* ============================================================
   16. THEME TOGGLE
   ============================================================ */

.mp-theme-toggle {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.55);
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: var(--mp-radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  margin-left: 8px;
  transition: color var(--mp-t-fast), background var(--mp-t-fast);
  flex-shrink: 0;
  box-shadow: none;
  outline: none;
}
.mp-theme-toggle:hover { background: rgba(255,255,255,0.08); color: #fff; }
.mp-theme-toggle:focus, .mp-theme-toggle:active { outline: none; box-shadow: none; background: transparent; }
.mp-theme-toggle:focus-visible { outline: 2px solid var(--mp-accent-ring); outline-offset: 2px; }
.mp-theme-toggle svg { width: 18px; height: 18px; pointer-events: none; display: block; }

/* Show sun on dark, moon on light */
[data-theme="dark"] .mp-theme-toggle .mp-sun { display: block; }
[data-theme="dark"] .mp-theme-toggle .mp-moon { display: none; }
[data-theme="light"] .mp-theme-toggle .mp-sun,
:root:not([data-theme]) .mp-theme-toggle .mp-sun { display: none; }
[data-theme="light"] .mp-theme-toggle .mp-moon,
:root:not([data-theme]) .mp-theme-toggle .mp-moon { display: block; }

/* ============================================================
   17. HEADING-LINK COPY BUTTON
   ============================================================ */

.article-body h2,
.article-body h3,
.article-body h4 {
  scroll-margin-top: calc(var(--mp-header-height) + 20px);
}
.mp-heading-link {
  position: absolute;
  left: -28px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: var(--mp-text-tertiary);
  cursor: pointer;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--mp-radius-xs);
  opacity: 0;
  transition: opacity var(--mp-t-fast), color var(--mp-t-fast), background var(--mp-t-fast);
  padding: 0;
}
.article-body h2:hover .mp-heading-link,
.article-body h3:hover .mp-heading-link,
.article-body h4:hover .mp-heading-link,
.mp-heading-link:focus { opacity: 1; }
.mp-heading-link:hover { color: var(--mp-accent); background: var(--mp-bg-hover); }
.mp-heading-link.mp-heading-link-copied { color: var(--mp-accent); opacity: 1; }
.mp-heading-link-tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  background: var(--mp-text);
  color: var(--mp-bg-page);
  padding: 3px 8px;
  border-radius: var(--mp-radius-xs);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
}
.mp-heading-link-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: var(--mp-text);
}
@media (max-width: 767px) {
  .mp-heading-link {
    position: relative;
    left: 0;
    transform: none;
    top: 0;
    margin-left: 8px;
    opacity: 0.5;
    vertical-align: middle;
  }
}

/* ============================================================
   18. ALERTS / STATUS BANNERS
   ============================================================ */

.alert,
.article-body div.note {
  border-radius: var(--mp-radius-md);
  padding: 14px 18px;
  margin-bottom: 16px;
  font-size: 14px;
  line-height: 1.6;
}
.alert { display: flex; align-items: flex-start; gap: 12px; }
.alert svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }
.alert-title { font-weight: 700; margin-bottom: 3px; font-size: 13px; }
.alert-info    { background: var(--mp-info-bg); border: 1px solid var(--mp-info-border); color: var(--mp-info-text); }
.alert-success { background: var(--mp-success-bg); border: 1px solid var(--mp-success-border); color: var(--mp-success-text); }
.alert-warning { background: var(--mp-warning-bg); border: 1px solid var(--mp-warning-border); color: var(--mp-warning-text); }
.alert-error   { background: var(--mp-error-bg); border: 1px solid var(--mp-error-border); color: var(--mp-error-text); }

/* ============================================================
   19. COMMUNITY PAGES
   ============================================================ */

.community-header { margin-bottom: 32px; }

/* Post list */
.post-list { list-style: none; padding: 0; margin: 0; }
.post-list-item { border-bottom: 1px solid var(--mp-border-color); }
.post-list-item a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  text-decoration: none;
  color: var(--mp-text);
  gap: 12px;
  font-size: 14px;
  font-weight: 500;
  transition: color var(--mp-t-fast);
}
.post-list-item a:hover { color: var(--mp-primary); text-decoration: none; }
[data-theme="dark"] .post-list-item a:hover { color: var(--mp-accent); }

/* Comments */
.comment { border-bottom: 1px solid var(--mp-border-color); padding: 20px 0; }
.comment-heading { margin-bottom: 5px; margin-top: 0; }
.comment-overview { border-bottom: 1px solid var(--mp-border-color); border-top: 1px solid var(--mp-border-color); padding: 20px 0; }
.comment-overview p { margin-top: 0; }
.comment-callout { color: var(--mp-text-tertiary); display: inline-block; font-weight: 400; font-size: 13px; margin-bottom: 0; }
.comment-callout a { color: var(--mp-primary); }
[data-theme="dark"] .comment-callout a { color: var(--mp-accent); }
.comment-sorter { display: inline-block; float: right; }
.comment-sorter a { color: var(--mp-text-tertiary); font-weight: 400; font-size: 13px; text-decoration: none; }
[dir="rtl"] .comment-sorter { float: left; }
.comment-wrapper { display: flex; justify-content: space-between; position: relative; }
.comment-wrapper.comment-official { border: 1px solid var(--mp-primary); padding: 20px; border-radius: var(--mp-radius-md); }
.comment-info { min-width: 0; padding-right: 20px; width: 100%; }
[dir="rtl"] .comment-info { padding-right: 0; padding-left: 20px; }
.comment-author { align-items: flex-end; display: flex; flex-wrap: wrap; margin-bottom: 20px; }
@media (min-width: 768px) { .comment-author { justify-content: space-between; } }
.comment-avatar { margin-right: 10px; }
[dir="rtl"] .comment-avatar { margin-left: 10px; margin-right: 0; }
.comment-meta { flex: 1 0 auto; }
.comment-labels { flex-basis: 100%; }
@media (min-width: 768px) { .comment-labels { flex-basis: auto; } }
.comment-form { display: flex; padding-top: 30px; word-wrap: break-word; }
.comment-container { width: 100%; }
.comment-form-controls { display: none; margin-top: 10px; text-align: left; }
@media (min-width: 768px) { [dir="ltr"] .comment-form-controls { text-align: right; } }
.comment-form-controls input[type="submit"] { margin-top: 15px; }
@media (min-width: 1024px) {
  .comment-form-controls input[type="submit"] { margin-left: 15px; }
  [dir="rtl"] .comment-form-controls input[type="submit"] { margin-left: 0; margin-right: 15px; }
}
.comment-form-controls input[type="checkbox"] { margin-right: 5px; }
.comment-ccs { display: none; }
.comment-ccs + textarea { margin-top: 10px; }
.comment-attachments { margin-top: 10px; }
.comment-attachments a { color: var(--mp-primary); }
[data-theme="dark"] .comment-attachments a { color: var(--mp-accent); }
.comment-body { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; word-wrap: break-word; }

/* Status labels (community) */
.status-label {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: var(--mp-border-color);
  color: var(--mp-text-secondary);
}
.status-label-official { background: var(--mp-primary-light); color: var(--mp-primary); }
[data-theme="dark"] .status-label-official { background: rgba(0,92,113,0.20); color: var(--mp-accent); }

/* ============================================================
   20. REQUEST PAGES
   ============================================================ */

/* My activities sub-nav */
.my-activities-sub-nav {
  border-bottom: 1px solid var(--mp-border-color);
  margin-bottom: 24px;
  display: flex;
  gap: 0;
}
.my-activities-sub-nav a {
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--mp-text-secondary);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color var(--mp-t-fast), border-color var(--mp-t-fast);
  margin-bottom: -1px;
}
.my-activities-sub-nav a:hover { color: var(--mp-text); text-decoration: none; }
.my-activities-sub-nav a.current { color: var(--mp-primary); border-bottom-color: var(--mp-primary); }
[data-theme="dark"] .my-activities-sub-nav a.current { color: var(--mp-accent); border-bottom-color: var(--mp-accent); }

/* Request/ticket list */
.request-table, .table { width: 100%; table-layout: fixed; border-collapse: collapse; }
.table th, .request-table th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--mp-text-tertiary);
  text-align: left;
  padding: 10px 16px;
  border-bottom: 1px solid var(--mp-border-color);
}
.table td, .request-table td { padding: 12px 16px; border-bottom: 1px solid var(--mp-border-color); font-size: 14px; color: var(--mp-text-secondary); vertical-align: middle; }
.table tbody tr, .request-table tbody tr { background: var(--mp-bg-surface); transition: background var(--mp-t-fast); }
.table tbody tr:hover, .request-table tbody tr:hover { background: var(--mp-bg-hover); }
.table tbody td:first-child, .request-table tbody td:first-child { font-weight: 600; color: var(--mp-text); }
.table a, .request-table a { color: var(--mp-primary); }
[data-theme="dark"] .table a, [data-theme="dark"] .request-table a { color: var(--mp-accent); }
@media (min-width: 768px) {
  .table tr, .request-table tr { display: table-row; padding: 0; }
  .table td, .table th, .request-table td, .request-table th { display: table-cell; }
}
@media (max-width: 767px) {
  .table tr, .request-table tr { display: block; padding: 16px 0; }
  .table td, .request-table td { display: block; }
}

/* ============================================================
   21. SEARCH RESULTS
   ============================================================ */

.search-results { list-style: none; padding: 0; margin: 0; }
.search-result { border-bottom: 1px solid var(--mp-border-color); padding: 20px 0; }
.search-result:first-child { border-top: 1px solid var(--mp-border-color); }
.search-result-link { font-size: 16px; font-weight: 600; color: var(--mp-primary); text-decoration: none; display: block; margin-bottom: 5px; }
.search-result-link:hover { text-decoration: underline; }
[data-theme="dark"] .search-result-link { color: var(--mp-accent); }
.search-result-description { font-size: 13px; color: var(--mp-text-secondary); line-height: 1.55; }
.search-result-meta { font-size: 12px; color: var(--mp-text-tertiary); margin-top: 5px; }

/* Search query highlight */
mark, .search-result mark {
  background: var(--mp-accent-light);
  color: var(--mp-primary-dark);
  padding: 0 2px;
  border-radius: 2px;
}
[data-theme="dark"] mark, [data-theme="dark"] .search-result mark {
  background: rgba(0,207,180,0.15);
  color: var(--mp-accent);
}

/* ============================================================
   22. ERROR PAGE
   ============================================================ */

.error-page {
  max-width: 480px;
  margin: 80px auto;
  padding: 0 24px;
  text-align: center;
}
.error-page h1 { font-size: 64px; font-weight: 800; color: var(--mp-border-color); letter-spacing: -0.04em; margin-bottom: 8px; }
.error-page h2 { font-size: 22px; font-weight: 700; color: var(--mp-text); margin: 0 0 12px; }
.error-page p { color: var(--mp-text-secondary); margin-bottom: 24px; }

/* ============================================================
   23. USER PROFILE / CONTRIBUTIONS
   ============================================================ */

.user-info-header { margin-bottom: 32px; }
.user-name { font-size: 22px; font-weight: 700; color: var(--mp-text); margin-bottom: 4px; }
.recent-activity-item { border-bottom: 1px solid var(--mp-border-color); padding: 12px 0; }
.recent-activity-item a { color: var(--mp-primary); }
[data-theme="dark"] .recent-activity-item a { color: var(--mp-accent); }

/* ============================================================
   24. ICON FONT (Zendesk built-in icons)
   ============================================================ */

[class*="icon-"]::before {
  font-family: "Flat-UI-Icons";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  text-decoration: none;
  text-transform: none;
}

.icon-arrow-up::before   { content: "\e905"; }
.icon-lock::before       { content: "\e909"; }
.icon-menu::before       { content: "\e902"; }

/* ============================================================
   25. REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   26. FOCUS STYLES (accessibility)
   ============================================================ */

:focus-visible {
  outline: 3px solid var(--mp-primary);
  outline-offset: 3px;
  border-radius: var(--mp-radius-xs);
}
[data-theme="dark"] :focus-visible {
  outline-color: var(--mp-accent);
}
/* Never remove focus for keyboard users */
:focus:not(:focus-visible) { outline: none; }

/* ============================================================
   27. DROPDOWN (language selector etc.)
   ============================================================ */

.dropdown-toggle::after {
  color: inherit;
}

/* ============================================================
   28. LOADING SPINNER (Zendesk native)
   ============================================================ */

[data-loading="true"] input,
[data-loading="true"] textarea {
  background-image: url("/hc/theming_assets/01HZH0A43JZNPYMPXKQ3G28DX3");
  background-repeat: no-repeat;
  background-position: 99% 50%;
  background-size: 16px 16px;
}

/* ============================================================
   29. SUGGESTED QUESTION CHIPS (home page hero)
   ============================================================ */

.mp-suggested-questions {
  margin-top: 20px;
}

.mp-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.mp-chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 100px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--mp-t-fast), border-color var(--mp-t-fast), color var(--mp-t-fast);
  backdrop-filter: blur(4px);
}

.mp-chip:hover {
  background: rgba(0, 207, 180, 0.15);
  border-color: rgba(0, 207, 180, 0.40);
  color: var(--mp-accent);
  text-decoration: none;
}

@media (max-width: 767px) {
  .mp-chips {
    gap: 6px;
  }
  .mp-chip {
    font-size: 12px;
    padding: 7px 13px;
  }
}

/* ============================================================
   30. CATEGORY PAGE — section grid & cards
   ============================================================ */

/* Category header */
.mp-category-header {
  margin-bottom: 32px;
}
.mp-category-title {
  font-size: 28px;
  font-weight: 800;
  color: var(--mp-text);
  letter-spacing: -0.025em;
  margin: 0 0 8px;
}
.mp-category-description {
  font-size: 15px;
  color: var(--mp-text-secondary);
  line-height: 1.6;
  margin: 0 0 20px;
}
.mp-category-header .mp-scoped-search { margin-top: 16px; }
.mp-category-empty {
  padding: 32px 0;
  color: var(--mp-text-tertiary);
  font-size: 14px;
}

/* Section grid — same rhythm as home category grid */
.mp-section-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}

.mp-section-card-wrapper {
  display: contents;
}

/* Section card */
.mp-section-card {
  display: flex;
  flex-direction: column;
  padding: 24px;
  background: var(--mp-bg-surface);
  border: 1px solid var(--mp-border-color);
  border-radius: var(--mp-radius-lg);
  text-decoration: none;
  color: var(--mp-text);
  transition: box-shadow var(--mp-t-med), transform var(--mp-t-med), border-color var(--mp-t-med);
  box-shadow: var(--mp-shadow-sm);
  position: relative;
}
.mp-section-card:hover {
  box-shadow: var(--mp-shadow-md);
  transform: translateY(-2px);
  border-color: var(--mp-border-strong);
  text-decoration: none;
  color: var(--mp-text);
}

/* Card top row: icon + optional lock */
.mp-section-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.mp-section-card-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--mp-radius-md);
  background: var(--mp-accent-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mp-primary);
  flex-shrink: 0;
}
[data-theme="dark"] .mp-section-card-icon {
  background: rgba(0, 207, 180, 0.12);
  color: var(--mp-accent);
}

/* Card text */
.mp-section-card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--mp-text);
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.mp-section-card-desc {
  font-size: 13px;
  color: var(--mp-text-secondary);
  line-height: 1.55;
  flex: 1;
  margin: 0 0 14px;
}

/* Article count — muted, not a link */
.mp-section-card-meta {
  font-size: 12px;
  font-weight: 600;
  color: var(--mp-text-tertiary);
  margin-bottom: 12px;
}
.mp-section-card-meta a,
.mp-section-card .mp-section-card-meta a {
  color: var(--mp-text-tertiary) !important;
  text-decoration: none !important;
}

/* Arrow — pinned to bottom */
.mp-section-card-arrow {
  color: var(--mp-primary);
  margin-top: auto;
  transition: transform var(--mp-t-fast);
}
[data-theme="dark"] .mp-section-card-arrow {
  color: var(--mp-accent);
}
.mp-section-card:hover .mp-section-card-arrow {
  transform: translateX(3px);
}

/* Internal badge */
.mp-section-card-internal .mp-section-card-icon {
  background: var(--mp-bg-subtle);
  color: var(--mp-text-tertiary);
}

/* ============================================================
   31. SEARCH RESULTS PAGE
   ============================================================ */

.mp-search-results-page {
  max-width: 1280px;
  margin: 0 auto;
  padding: 40px 24px 80px;
}

.mp-search-results-inner {
  max-width: 760px;
  margin: 0 auto;
}

/* Header */
.mp-search-results-header {
  margin-bottom: 28px;
}
.mp-search-results-title {
  font-size: 24px;
  font-weight: 800;
  color: var(--mp-text);
  letter-spacing: -0.025em;
  margin: 0 0 4px;
}
.mp-search-results-summary {
  font-size: 13px;
  color: var(--mp-text-tertiary);
  margin: 0;
}

/* Quick answer (AI) slot */
.mp-quick-answer-slot {
  margin-bottom: 28px;
}
.mp-quick-answer-slot:empty {
  display: none;
}

/* Section label */
.mp-search-section .mp-section-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--mp-text-tertiary);
  margin: 0 0 16px;
}

/* Results list */
.mp-search-results-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Individual result */
.mp-search-result {
  border-bottom: 1px solid var(--mp-border-color);
}
.mp-search-result:first-child {
  border-top: 1px solid var(--mp-border-color);
}

.mp-search-result-link {
  display: block;
  padding: 18px 0;
  text-decoration: none;
  color: var(--mp-text);
  transition: color var(--mp-t-fast);
}
.mp-search-result-link:hover {
  text-decoration: none;
  color: var(--mp-text);
}

/* Result head: title + votes */
.mp-search-result-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.mp-search-result-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--mp-primary);
  line-height: 1.4;
  transition: color var(--mp-t-fast);
}
[data-theme="dark"] .mp-search-result-title {
  color: var(--mp-accent);
}
.mp-search-result-link:hover .mp-search-result-title {
  text-decoration: underline;
}
.mp-search-result-votes {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--mp-text-tertiary);
  flex-shrink: 0;
  margin-top: 2px;
}

/* Breadcrumb trail inside result */
.mp-search-result-breadcrumbs {
  list-style: none;
  padding: 0;
  margin: 0 0 6px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
}
.mp-search-result-breadcrumbs li {
  display: flex;
  align-items: center;
  font-size: 11px;
  color: var(--mp-text-tertiary);
  margin: 0;
}
.mp-search-result-breadcrumbs li + li::before {
  content: '/';
  margin-right: 4px;
  opacity: 0.5;
}

/* Snippet */
.mp-search-result-snippet {
  font-size: 13px;
  color: var(--mp-text-secondary);
  line-height: 1.6;
  margin: 0 0 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Meta row (date etc) */
.mp-search-result-meta {
  display: flex;
  align-items: center;
  gap: 12px;
}
.mp-search-result-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--mp-text-tertiary);
}

/* Highlighted search terms */
.mp-search-result-snippet em,
.mp-search-result-title em {
  font-style: normal;
  background: var(--mp-accent-light);
  color: var(--mp-primary-dark);
  padding: 0 2px;
  border-radius: 2px;
}
[data-theme="dark"] .mp-search-result-snippet em,
[data-theme="dark"] .mp-search-result-title em {
  background: rgba(0,207,180,0.15);
  color: var(--mp-accent);
}

/* Empty state */
.mp-search-empty {
  text-align: center;
  padding: 64px 24px;
  color: var(--mp-text-tertiary);
}
.mp-search-empty svg {
  margin: 0 auto 16px;
  opacity: 0.3;
}
.mp-search-empty-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--mp-text-secondary);
  margin: 0 0 8px;
}
.mp-search-empty-desc {
  font-size: 14px;
  color: var(--mp-text-tertiary);
  margin: 0;
}
.mp-search-empty-desc a {
  color: var(--mp-primary);
}
[data-theme="dark"] .mp-search-empty-desc a {
  color: var(--mp-accent);
}

/* Pagination */
.mp-search-pagination {
  margin-top: 32px;
}
.mp-search-pagination nav,
.mp-search-pagination ul {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  padding: 0;
  margin: 0;
  flex-wrap: wrap;
}
.mp-search-pagination li {
  margin: 0;
}
.mp-search-pagination li a,
.mp-search-pagination li span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 8px;
  border-radius: var(--mp-radius-md);
  font-size: 13px;
  font-weight: 600;
  border: 1.5px solid var(--mp-border-color);
  background: var(--mp-bg-surface);
  color: var(--mp-text-secondary);
  text-decoration: none;
  transition: all var(--mp-t-fast);
}
.mp-search-pagination li a:hover {
  border-color: var(--mp-primary);
  color: var(--mp-primary);
  text-decoration: none;
}
[data-theme="dark"] .mp-search-pagination li a:hover {
  border-color: var(--mp-accent);
  color: var(--mp-accent);
}
.mp-search-pagination li.active a,
.mp-search-pagination li.current a,
.mp-search-pagination li[class*="active"] a {
  background: var(--mp-primary);
  border-color: var(--mp-primary);
  color: #fff;
}
[data-theme="dark"] .mp-search-pagination li.active a,
[data-theme="dark"] .mp-search-pagination li.current a {
  background: var(--mp-accent);
  border-color: var(--mp-accent);
  color: var(--mp-dark);
}
.mp-search-pagination li.disabled span,
.mp-search-pagination li.disabled a {
  opacity: 0.35;
  pointer-events: none;
}
/* Hide any stray bullet markers */
.mp-search-pagination li::marker,
.mp-search-pagination li::before {
  display: none;
  content: none;
}

/* Vote count — keep after vote block */
.article-votes-count { font-size: 12px; color: var(--mp-text-tertiary); }

/* ============================================================
   32. IMAGE LIGHTBOX
   ============================================================ */

/* Article images — show pointer to indicate clickable */
.article-body img {
  cursor: zoom-in;
  border-radius: var(--mp-radius-md);
  max-width: 100%;
  height: auto;
  margin: 16px 0;
  display: block;
}

/* Overlay */
.mp-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(7, 14, 20, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  align-items: center;
  justify-content: center;
  padding: 24px;
  cursor: zoom-out;
}
.mp-lightbox.mp-lightbox-open {
  display: flex;
}

/* Image inside lightbox */
.mp-lightbox-img {
  max-width: 100%;
  max-height: calc(100vh - 80px);
  object-fit: contain;
  border-radius: var(--mp-radius-md);
  box-shadow: 0 24px 80px rgba(0,0,0,0.60);
  cursor: default;
  display: block;
}

/* Caption */
.mp-lightbox-caption {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 13px;
  color: rgba(255,255,255,0.60);
  text-align: center;
  max-width: 600px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mp-lightbox-caption:empty {
  display: none;
}

/* Close button */
.mp-lightbox-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: var(--mp-radius-md);
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.80);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--mp-t-fast), color var(--mp-t-fast);
  z-index: 1001;
}
.mp-lightbox-close:hover {
  background: rgba(255,255,255,0.18);
  color: #fff;
}

/* Prevent body scroll when lightbox is open */
body.mp-lightbox-locked {
  overflow: hidden;
}

/* ============================================================
   33. MY ACTIVITIES / REQUESTS PAGE
   ============================================================ */

/* Top nav (Requests / Contributions / Following) */
.my-activities-nav {
  background: var(--mp-bg-surface);
  border-bottom: 1px solid var(--mp-border-color);
}
.my-activities-nav .collapsible-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: flex-end;
  gap: 0;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}
.my-activities-nav .collapsible-nav-list li {
  margin: 0;
}
.my-activities-nav .collapsible-nav-list li a,
.my-activities-nav .collapsible-nav-list li[aria-selected] {
  display: block;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--mp-text-tertiary);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--mp-t-fast), border-color var(--mp-t-fast);
  white-space: nowrap;
}
.my-activities-nav .collapsible-nav-list li a:hover {
  color: var(--mp-text);
  text-decoration: none;
}
.my-activities-nav .collapsible-nav-list li[aria-selected="true"] {
  display: block;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 700;
  color: var(--mp-primary);
  border-bottom: 2px solid var(--mp-primary);
  margin-bottom: -1px;
}
[data-theme="dark"] .my-activities-nav .collapsible-nav-list li[aria-selected="true"] {
  color: var(--mp-accent);
  border-bottom-color: var(--mp-accent);
}

/* Page container */
.my-activities-header {
  padding: 32px 0 16px;
}
.my-activities-header h1 {
  font-size: 24px;
  font-weight: 800;
  color: var(--mp-text);
  letter-spacing: -0.025em;
  margin-bottom: 16px;
}

/* Sub-nav (My requests / CC'd on) */
.my-activities-sub-nav .collapsible-nav-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--mp-border-color);
}
.my-activities-sub-nav .collapsible-nav-list li {
  margin: 0;
}
.my-activities-sub-nav .collapsible-nav-list li a,
.my-activities-sub-nav .collapsible-nav-list li[aria-selected] {
  display: block;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--mp-text-tertiary);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--mp-t-fast), border-color var(--mp-t-fast);
}
.my-activities-sub-nav .collapsible-nav-list li a:hover {
  color: var(--mp-text);
  text-decoration: none;
}
.my-activities-sub-nav .collapsible-nav-list li[aria-selected="true"] {
  display: block;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--mp-primary);
  border-bottom: 2px solid var(--mp-primary);
  margin-bottom: -1px;
}
[data-theme="dark"] .my-activities-sub-nav .collapsible-nav-list li[aria-selected="true"] {
  color: var(--mp-accent);
  border-bottom-color: var(--mp-accent);
}

/* Toolbar */
.requests-table-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
  margin-bottom: 20px;
  width: 100%;
}
.requests-table-toolbar .search {
  flex: 1;
  min-width: 0;
  position: relative;
  overflow: hidden;
}
.requests-table-toolbar .search input,
.requests-table-toolbar input[type="search"] {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
/* Hide empty filter containers */
.request-table-filter:empty {
  display: none !important;
}
.requests-table-toolbar .search::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238FA3B1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") center/contain no-repeat;
  pointer-events: none;
  z-index: 1;
}
.requests-table-toolbar input[type="search"] {
  padding-left: 36px !important;
}
.request-table-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.request-table-filter select {
  width: auto !important;
  min-width: 120px;
}
.request-filter-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--mp-text-secondary);
  white-space: nowrap;
}
.no-activities {
  color: var(--mp-text-tertiary);
  font-size: 14px;
  padding: 32px 0;
}

/* ============================================================
   34. USER PROFILE PAGE
   ============================================================ */

.profile-header {
  background: var(--mp-bg-surface);
  border-bottom: 1px solid var(--mp-border-color);
  padding: 40px 0 32px;
}
.profile-info {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

/* Avatar */
.profile-avatar {
  position: relative;
  flex-shrink: 0;
}
.profile-avatar .user-avatar {
  width: 72px !important;
  height: 72px !important;
  border-radius: 50% !important;
  object-fit: cover;
  border: 3px solid var(--mp-border-color);
  display: block;
}
.profile-avatar .icon-agent {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 20px;
  height: 20px;
  background: var(--mp-accent);
  border-radius: 50%;
  border: 2px solid var(--mp-bg-surface);
}

/* Name + options */
.basic-info { flex: 1; min-width: 0; }
.basic-info .name {
  font-size: 24px;
  font-weight: 800;
  color: var(--mp-text);
  letter-spacing: -0.025em;
  margin: 0 0 8px;
}
.basic-info .name a {
  color: var(--mp-text);
  text-decoration: none;
}
.options {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.options .button,
.options a.button {
  font-size: 13px;
  padding: 8px 16px;
}
.profile-private-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  background: var(--mp-bg-subtle);
  border: 1px solid var(--mp-border-color);
  border-radius: 100px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--mp-text-tertiary);
}

/* Stats */
.profile-stats {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.profile-stats .stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.profile-stats .stat-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--mp-text-tertiary);
}
.profile-stats .stat-value {
  font-size: 15px;
  font-weight: 700;
  color: var(--mp-text);
}
.profile-stats-counters {
  padding-top: 20px;
  border-top: 1px solid var(--mp-border-color);
}

/* Profile nav */
.profile-nav {
  background: var(--mp-bg-surface);
  border-bottom: 1px solid var(--mp-border-color);
}
.profile-nav .collapsible-nav-list {
  list-style: none;
  padding: 0 24px;
  margin: 0 auto;
  max-width: 1280px;
  display: flex;
  gap: 0;
  align-items: flex-end;
}
.profile-nav .collapsible-nav-list li { margin: 0; }
.profile-nav .collapsible-nav-list li a,
.profile-nav .collapsible-nav-list li[aria-selected] {
  display: block;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--mp-text-tertiary);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--mp-t-fast), border-color var(--mp-t-fast);
  white-space: nowrap;
}
.profile-nav .collapsible-nav-list li a:hover { color: var(--mp-text); text-decoration: none; }
.profile-nav .collapsible-nav-list li[aria-selected="true"] {
  display: block;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 700;
  color: var(--mp-primary);
  border-bottom: 2px solid var(--mp-primary);
  margin-bottom: -1px;
}
[data-theme="dark"] .profile-nav .collapsible-nav-list li[aria-selected="true"] {
  color: var(--mp-accent);
  border-bottom-color: var(--mp-accent);
}

/* Profile section */
.profile-section { padding: 32px 0; }
.profile-section-header { margin-bottom: 24px; }
.profile-section-title { font-size: 18px; font-weight: 700; color: var(--mp-text); margin: 0 0 4px; }
.profile-section-description { font-size: 13px; color: var(--mp-text-tertiary); }

/* Activity list */
.profile-activity-list { list-style: none; padding: 0; margin: 0; }
.profile-activity {
  border-bottom: 1px solid var(--mp-border-color);
  padding: 16px 0;
}
.profile-activity:last-child { border-bottom: none; }
.profile-activity-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.profile-activity-header .user-avatar {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  flex-shrink: 0;
}
.profile-activity-description {
  font-size: 13px;
  color: var(--mp-text-tertiary);
  margin: 0;
}
.profile-contribution-title a {
  font-size: 15px;
  font-weight: 600;
  color: var(--mp-primary);
  text-decoration: none;
}
.profile-contribution-title a:hover { text-decoration: underline; }
[data-theme="dark"] .profile-contribution-title a { color: var(--mp-accent); }
.profile-contribution-body {
  font-size: 13px;
  color: var(--mp-text-secondary);
  margin: 8px 0;
  line-height: 1.55;
}
.meta-group { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.meta-group li { list-style: none; margin: 0; padding: 0; }
.meta-group li::marker, .meta-group li::before { display: none; content: none; }
.meta-data { font-size: 12px; color: var(--mp-text-tertiary); }
.meta-data a { color: var(--mp-primary); }
[data-theme="dark"] .meta-data a { color: var(--mp-accent); }
/* Dot separator between meta items */
.meta-group li + li::before {
  display: inline;
  content: '·';
  margin-right: 12px;
  color: var(--mp-border-strong);
}
.no-activity, .private-activity {
  display: block;
  padding: 32px 0;
  font-size: 14px;
  color: var(--mp-text-tertiary);
}

/* ============================================================
   35. SUBMIT A REQUEST PAGE
   ============================================================ */

.new-request-form,
.request-container {
  max-width: 720px;
  margin: 0 auto;
  padding: 40px 24px 80px;
}
.new-request-form h1 {
  font-size: 24px;
  font-weight: 800;
  color: var(--mp-text);
  letter-spacing: -0.025em;
  margin-bottom: 28px;
}

/* Attachments drop zone */
.upload-dropzone {
  border: 1.5px dashed var(--mp-border-color);
  border-radius: var(--mp-radius-md);
  padding: 20px;
  text-align: center;
  font-size: 13px;
  color: var(--mp-text-tertiary);
  background: var(--mp-bg-subtle);
  transition: border-color var(--mp-t-fast), background var(--mp-t-fast);
  cursor: pointer;
}
.upload-dropzone:hover {
  border-color: var(--mp-primary);
  background: var(--mp-primary-light);
}
.upload-dropzone a { color: var(--mp-primary); font-weight: 600; }
[data-theme="dark"] .upload-dropzone a { color: var(--mp-accent); }

/* Request page top search */
.request-header-search {
  margin-bottom: 24px;
}

/* ============================================================
   36. SUBMIT A REQUEST PAGE — targeted fixes
   ============================================================ */

/* Page container — scoped to avoid hitting other .container uses */
.container:has(.form):has(h1) {
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 24px 80px;
}

/* Sub-nav row (breadcrumb + search) */
.sub-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.sub-nav .breadcrumbs { margin-bottom: 0; }
.sub-nav .search {
  position: relative;
  flex-shrink: 0;
}
.sub-nav .search input[type="search"] {
  width: 220px !important;
  height: 36px !important;
  padding: 0 12px 0 34px !important;
  font-size: 13px !important;
  border-radius: var(--mp-radius-md) !important;
}
.sub-nav .search::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238FA3B1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") center/contain no-repeat;
  pointer-events: none;
  z-index: 1;
}

/* Page h1 */
.container:has(.form) h1 {
  font-size: 26px;
  font-weight: 800;
  color: var(--mp-text);
  letter-spacing: -0.025em;
  margin-bottom: 28px;
}

/* Form fields spacing */
.form .form-field,
.form [data-field-name] {
  margin-bottom: 20px;
}

/* Checkbox fields — Zendesk renders as .form-field.boolean */
.form .form-field.boolean {
  display: flex !important;
  flex-direction: row-reverse !important;
  align-items: flex-start !important;
  justify-content: flex-end !important;
  gap: 10px !important;
}
.form .form-field.boolean input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
  margin-top: 3px !important;
  cursor: pointer;
}
.form .form-field.boolean label {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--mp-text) !important;
  line-height: 1.5 !important;
  cursor: pointer;
  margin: 0 !important;
}

/* Attachment drop zone — Zendesk renders as .upload */
.form .upload,
.form .upload-dropzone,
.form [data-field-type="attachments"] .upload {
  border: 1.5px dashed var(--mp-border-color) !important;
  border-radius: var(--mp-radius-md) !important;
  padding: 24px !important;
  text-align: center !important;
  background: var(--mp-bg-subtle) !important;
  font-size: 13px !important;
  color: var(--mp-text-tertiary) !important;
  transition: border-color var(--mp-t-fast), background var(--mp-t-fast) !important;
  cursor: pointer !important;
}
.form .upload:hover,
.form .upload-dropzone:hover {
  border-color: var(--mp-primary) !important;
  background: var(--mp-primary-light) !important;
}
.form .upload a,
.form .upload-dropzone a {
  color: var(--mp-primary) !important;
  font-weight: 600 !important;
}
[data-theme="dark"] .form .upload a,
[data-theme="dark"] .form .upload-dropzone a {
  color: var(--mp-accent) !important;
}

/* Submit button */
.form footer input[type="submit"],
.form input[type="submit"] {
  margin-top: 8px;
}

/* ============================================================
   37. DOC TREE — section & article levels
   ============================================================ */

/* Section list inside a category group */
.mp-doc-tree-sections {
  list-style: none;
  padding: 0;
  margin: 0;
}
.mp-doc-tree-section {
  margin: 0;
}

/* Section link — top-level clickable row */
.mp-doc-tree-section-link {
  display: block;
  padding: 6px 20px 6px 28px;
  font-size: 13px;
  font-weight: 600;
  color: var(--mp-text-secondary);
  text-decoration: none;
  transition: background var(--mp-t-fast), color var(--mp-t-fast);
  border-left: 2px solid transparent;
  line-height: 1.4;
}
.mp-doc-tree-section-link:hover {
  background: var(--mp-bg-hover);
  color: var(--mp-text);
  text-decoration: none;
}

/* Current section — expanded state */
.mp-doc-tree-section-current > .mp-doc-tree-section-link {
  color: var(--mp-text);
  font-weight: 700;
  border-left-color: var(--mp-border-strong);
}

/* Articles list inside current section */
.mp-doc-tree-articles {
  list-style: none;
  padding: 0;
  margin: 0 0 4px;
}
.mp-doc-tree-articles li {
  margin: 0;
}

/* Article link */
.mp-doc-tree-article {
  display: block;
  padding: 5px 20px 5px 40px;
  font-size: 12px;
  font-weight: 400;
  color: var(--mp-text-secondary);
  text-decoration: none;
  line-height: 1.45;
  transition: background var(--mp-t-fast), color var(--mp-t-fast);
  border-left: 2px solid transparent;
}
.mp-doc-tree-article:hover {
  background: var(--mp-bg-hover);
  color: var(--mp-text);
  text-decoration: none;
}

/* Active article — currently reading */
.mp-doc-tree-article.mp-doc-tree-article-active {
  background: var(--mp-accent-soft);
  color: var(--mp-primary);
  border-left-color: var(--mp-accent);
  font-weight: 600;
}
[data-theme="dark"] .mp-doc-tree-article.mp-doc-tree-article-active {
  color: var(--mp-accent);
}

/* Loading / error states */
.mp-doc-tree-loading,
.mp-doc-tree-error {
  padding: 5px 20px 5px 40px;
  font-size: 12px;
  color: var(--mp-text-tertiary);
  font-style: italic;
}

/* ============================================================
   38. SCROLL ENTRANCE ANIMATIONS
   ============================================================ */

.js-ready .mp-category-card,
.js-ready .mp-section-card,
.js-ready .mp-promoted-item,
.js-ready .mp-changelog-card {
  opacity: 0;
  transform: translateY(16px);
}

.mp-reveal.mp-revealed {
  opacity: 1 !important;
  transform: translateY(0) !important;
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .js-ready .mp-category-card,
  .js-ready .mp-section-card,
  .js-ready .mp-promoted-item,
  .js-ready .mp-changelog-card {
    opacity: 1;
    transform: none;
  }
}