/* =====================================================================
   Collectibles.com — Help Scout Docs DARK theme
   Matches the Collectibles.com app. Rounded cards, purple accents.
   Covers: homepage (2-column card grid), collection/category pages,
   article pages, and the inline article accordion.

   Upload via: Help Scout → Docs → Settings → Custom Code →
   "Upload stylesheet"  (NOT the "Headers" box) → then click SAVE.
   The accordion ALSO needs the companion script (collectibles-accordion.js)
   pasted into the "Headers" box. After saving, hard-refresh (Ctrl+Shift+R).
   ===================================================================== */

:root {
  --c-bg:          #101112;
  --c-bg-deep:     #0C0D0E;
  --c-surface:     #15181E;
  --c-surface-2:   #1D2027;
  --c-border:      rgba(255, 255, 255, 0.09);
  --c-border-2:    rgba(255, 255, 255, 0.16);

  --c-text:        #F0F2F6;
  --c-text-muted:  #CBD2DB;
  --c-text-dim:    #8A91A0;

  --c-accent:      #783DF5;
  --c-accent-deep: #591CDD;
  --c-accent-soft: rgba(120, 61, 245, 0.18);
  --c-magenta:     #E6007E;

  --radius:        16px;
  --radius-sm:     11px;
  --shadow:        0 6px 22px rgba(0, 0, 0, 0.35);
  --shadow-hover:  0 12px 30px rgba(120, 61, 245, 0.28);
}

/* ----------------------------- Base ---------------------------------- */
html, body { background: var(--c-bg) !important; color: var(--c-text) !important; }
body, p, span, li, td, th, label { color: var(--c-text); }
a { color: var(--c-accent); }
a:hover { color: #9b6dff; }
::selection { background: var(--c-accent); color: #fff; }

* { scrollbar-color: var(--c-accent) var(--c-bg-deep); scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--c-bg-deep); }
::-webkit-scrollbar-thumb { background: #2a2c33; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--c-accent); }

/* --------------------------- Top nav bar ----------------------------- */
header#mainNav, header#mainNav .navbar-inner {
  background: var(--c-bg-deep) !important;
  background-image: none !important;
  border: none !important;
  box-shadow: 0 1px 0 var(--c-border) !important;
}
header#mainNav .brand img { border-radius: 9px; }
header#mainNav nav ul li > a {
  color: var(--c-text-muted) !important;
  font-weight: 600 !important;
  opacity: 1 !important;
  text-shadow: none !important;
  padding: 6px 4px !important;
  border-bottom: 2px solid transparent !important;
}
header#mainNav nav ul li > a:hover,
header#mainNav nav ul li.active > a {
  color: #fff !important;
  background: transparent !important;
  border-bottom: 2px solid var(--c-accent) !important;
}
header#mainNav .btn-navbar { background: var(--c-surface-2) !important; border: 1px solid var(--c-border) !important; box-shadow: none !important; }
header#mainNav .btn-navbar .icon-bar { background: var(--c-text) !important; box-shadow: none !important; }

/* --------------------- Hero / search section ------------------------- */
section#docsSearch {
  background: var(--c-bg-deep) !important;
  background-image: radial-gradient(820px 300px at 50% -30%, var(--c-accent-soft), transparent 70%) !important;
  border-bottom: 1px solid var(--c-border) !important;
}
section#docsSearch h1 { color: var(--c-text) !important; font-weight: 800 !important; }

form#searchBar input.search-query {
  background: var(--c-surface) !important;
  color: var(--c-text) !important;
  border: 1px solid var(--c-border-2) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: none !important;
}
form#searchBar input.search-query::placeholder { color: var(--c-text-dim) !important; }
form#searchBar input.search-query:focus {
  border-color: var(--c-accent) !important;
  box-shadow: 0 0 0 3px var(--c-accent-soft) !important;
  outline: none !important;
}
form#searchBar button {
  background-image: linear-gradient(135deg, var(--c-accent), var(--c-accent-deep)) !important;
  background-color: var(--c-accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  text-shadow: none !important;
}
form#searchBar button:hover { background-image: linear-gradient(135deg, var(--c-accent-deep), var(--c-accent-deep)) !important; }
form#searchBar button i, form#searchBar button span { color: #fff !important; }

/* sidebar search (.sm) — button is a tiny icon inside the field, NOT a pill */
form#searchBar.sm button {
  background: none !important; background-image: none !important; box-shadow: none !important;
  border: none !important; width: auto !important; color: var(--c-accent) !important;
}
form#searchBar.sm button i, form#searchBar.sm button .icon-search { color: var(--c-accent) !important; }
form#searchBar.sm input.search-query { padding-right: 38px !important; }

form#searchBar #serp-dd, form#searchBar ul.result {
  background: var(--c-surface) !important;
  border: 1px solid var(--c-border-2) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.5) !important;
}
form#searchBar #serp-dd a, form#searchBar ul.result a, form#searchBar ul.result li { color: var(--c-text) !important; }
form#searchBar #serp-dd a:hover, form#searchBar ul.result li:hover { background: var(--c-accent-soft) !important; }

/* ------------------------- Content area ------------------------------ */
section#contentArea { background: var(--c-bg) !important; }
#noResults { color: var(--c-text-dim) !important; }

/* === HOMEPAGE: cards side by side (2-column grid), a bit smaller === */
section.twoCol {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 24px !important;
  float: none !important; width: auto !important; margin: 0 !important;
}
section.twoCol::before, section.twoCol::after { display: none !important; content: none !important; }

section.collection {
  background: var(--c-surface) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
  padding: 18px 20px !important;
  margin: 0 !important; width: auto !important; float: none !important;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
section.collection:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover) !important; border-color: var(--c-accent) !important; }
section.collection .collection-head h2 { font-size: 19px !important; margin-bottom: 6px !important; }
section.collection .collection-head h2 a { color: var(--c-text) !important; font-weight: 700; }
section.collection .collection-head h2 a:hover { color: #9b6dff !important; }
section.collection .collection-head p { color: var(--c-text-dim) !important; }
section.collection ul.popArticles li { border-color: var(--c-border) !important; }
section.collection ul.popArticles li a { color: var(--c-text-muted) !important; font-size: 14px !important; }
section.collection ul.popArticles li a:hover { color: #9b6dff !important; }
section.collection a.browse {
  display: inline-block; color: var(--c-accent) !important; font-weight: 700;
  border: 1px solid var(--c-accent) !important; border-radius: 999px !important; padding: 6px 16px !important;
}
section.collection a.browse:hover { background: var(--c-accent) !important; color: #fff !important; }

/* === HOMEPAGE category grid — big centered icon + title per card
   (like a category landing grid). The article list is hidden so each
   card reads as a clean category tile; "Browse all articles" is the action. */
section.twoCol { align-items: stretch !important; }
section.collection { text-align: center !important; padding: 32px 24px !important; }
section.collection .collection-head { display: flex !important; flex-direction: column; align-items: center; }
section.collection .collection-head::before {
  content: ""; display: block; width: 46px; height: 46px; margin: 2px auto 16px;
  background: no-repeat center / contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23783df5' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.93a2 2 0 0 1-1.66-.9l-.82-1.2A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2Z'/%3E%3C/svg%3E");
}
/* Collection Management — layers */
section#collection-1 .collection-head::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23783df5' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z'/%3E%3Cpath d='m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65'/%3E%3Cpath d='m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65'/%3E%3C/svg%3E"); }
/* FAQ — question */
section#collection-62 .collection-head::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23783df5' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); }
/* Repackz — package */
section#collection-192 .collection-head::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23783df5' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7.5 4.27 9 5.15'/%3E%3Cpath d='M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z'/%3E%3Cpath d='m3.3 7 8.7 5 8.7-5'/%3E%3Cpath d='M12 22V12'/%3E%3C/svg%3E"); }
/* The Basics — book */
section#collection-74 .collection-head::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23783df5' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 7v14'/%3E%3Cpath d='M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z'/%3E%3C/svg%3E"); }
section.collection ul.popArticles { display: none !important; }
section.collection a.browse { margin-top: 6px !important; }

/* === Collection & article pages: align columns with header/footer === */
#contentArea > .row-fluid:has(#main-content) {
  display: flex !important; gap: 32px !important; align-items: flex-start !important; margin: 0 !important;
}
#contentArea > .row-fluid:has(#main-content)::before,
#contentArea > .row-fluid:has(#main-content)::after { display: none !important; content: none !important; }
#contentArea > .row-fluid:has(#main-content) aside#sidebar { order: 0 !important; flex: 0 0 270px !important; width: 270px !important; margin: 0 !important; }
#contentArea > .row-fluid:has(#main-content) #main-content { order: 1 !important; flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; }

/* transparent wrapper so we never get a box-in-a-box */
#main-content .contentWrapper { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; }
#main-content .contentWrapper > h1 { color: var(--c-text) !important; font-weight: 800; margin: 2px 0 18px 4px !important; }

/* the actual DARK cards (fixes the white box + invisible text) */
#main-content article#fullArticle,
#main-content ul.articleList,
section.articleFoot {
  background: var(--c-surface) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
  padding: 14px 18px !important;
}
#main-content article#fullArticle { padding: 28px 32px !important; }
#main-content article#fullArticle h1 { color: var(--c-text) !important; font-weight: 800; }

/* article list (collection page) — readable rows on dark.
   IMPORTANT: target the DIRECT child (> a) so only the row link is styled.
   Links inside an expanded accordion panel live in the same <li>, so a plain
   "li a" rule would turn them into full-width blocks (causing line breaks). */
ul.articleList { list-style: none !important; margin: 0 !important; padding: 4px !important; }
ul.articleList li { border: none !important; padding: 0 !important; margin: 0 !important; }
ul.articleList li + li { border-top: 1px solid var(--c-border) !important; }
ul.articleList li > a {
  display: flex !important; align-items: center; gap: 10px;
  color: var(--c-text) !important; font-weight: 500;
  padding: 12px 14px !important; border-radius: 10px !important;
  transition: background .12s ease, color .12s ease;
}
ul.articleList li > a:hover { background: var(--c-accent-soft) !important; color: #fff !important; }
/* keep the row icon aligned with the title instead of floating left/below */
ul.articleList li > a i.icon-article-doc { margin-right: 0 !important; vertical-align: 0 !important; flex: 0 0 18px; }
/* links inside an expanded answer must flow inline, not as blocks.
   margin:0 is essential — Help Scout pairs padding-left:24px with
   margin-left:-24px on links; zeroing only padding leaves the negative
   margin, which drags the link left and overlaps the preceding word. */
.acc-panel-inner a { display: inline !important; margin: 0 !important; padding: 0 !important; background: none !important; border-radius: 0 !important; }

/* nicer article icon — replace Help Scout's default doc glyph with a clean
   purple line-style article icon (one colour, used for every list item) */
i.icon-article-doc {
  font-size: 0 !important;
  width: 18px; height: 18px; display: inline-block; vertical-align: -4px; margin-right: 10px;
  background: no-repeat center / 16px 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23783df5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3Cpath d='M9 13h6'/%3E%3Cpath d='M9 17h4'/%3E%3C/svg%3E") !important;
}
i.icon-article-doc::before { content: '' !important; }

/* === Sidebar === */
aside#sidebar { color: var(--c-text) !important; }
aside#sidebar h3 { color: var(--c-text) !important; font-weight: 800; margin-top: 18px; }
aside#sidebar ul.nav.nav-list {
  background: var(--c-surface) !important; border: 1px solid var(--c-border) !important;
  border-radius: var(--radius) !important; box-shadow: var(--shadow) !important; padding: 8px !important;
}
aside#sidebar ul.nav.nav-list li a { color: var(--c-text-muted) !important; border-radius: var(--radius-sm) !important; padding: 9px 12px !important; display: block; }
aside#sidebar ul.nav.nav-list li a:hover { background: var(--c-accent-soft) !important; color: #fff !important; }
aside#sidebar ul.nav.nav-list li.active > a { background: linear-gradient(135deg, var(--c-accent), var(--c-accent-deep)) !important; color: #fff !important; }

/* === Per-category icons in the sidebar (themed purple line icons) ===
   Matched by the category slug in each link's href. The active item's
   icon is flipped to white so it stays visible on the purple pill. */
aside#sidebar ul.nav.nav-list li a::before {
  content: ""; display: inline-block; width: 16px; height: 16px;
  margin-right: 9px; vertical-align: -3px; background: no-repeat center / contain;
  /* default (folder) — used for any category not matched below */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23783df5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.93a2 2 0 0 1-1.66-.9l-.82-1.2A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2Z'/%3E%3C/svg%3E");
}
aside#sidebar ul.nav.nav-list li.active > a::before { filter: brightness(0) invert(1); }

/* Buyback & Selling — dollar sign */
aside#sidebar ul.nav.nav-list li a[href*="buyback-selling"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23783df5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' x2='12' y1='2' y2='22'/%3E%3Cpath d='M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6'/%3E%3C/svg%3E"); }
/* Fees & Tax — receipt */
aside#sidebar ul.nav.nav-list li a[href*="fees-tax"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23783df5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 2v20l2-1 2 1 2-1 2 1 2-1 2 1 2-1 2 1V2l-2 1-2-1-2 1-2-1-2 1-2-1Z'/%3E%3Cpath d='M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8'/%3E%3Cpath d='M12 17.5v-11'/%3E%3C/svg%3E"); }
/* Getting Started — rocket */
aside#sidebar ul.nav.nav-list li a[href*="getting-started"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23783df5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z'/%3E%3Cpath d='m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z'/%3E%3Cpath d='M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0'/%3E%3Cpath d='M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5'/%3E%3C/svg%3E"); }
/* Legal & Policies — scales */
aside#sidebar ul.nav.nav-list li a[href*="legal-policies"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23783df5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m16 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z'/%3E%3Cpath d='m2 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z'/%3E%3Cpath d='M7 21h10'/%3E%3Cpath d='M12 3v18'/%3E%3Cpath d='M3 7h2c2 0 5-1 7-2 2 1 5 2 7 2h2'/%3E%3C/svg%3E"); }
/* Opening & Odds — dice */
aside#sidebar ul.nav.nav-list li a[href*="opening-odds"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23783df5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='12' height='12' x='2' y='10' rx='2'/%3E%3Cpath d='m17.92 14 3.5-3.5a2.24 2.24 0 0 0 0-3l-5-4.92a2.24 2.24 0 0 0-3 0L10 6'/%3E%3Cpath d='M6 18h.01'/%3E%3Cpath d='M10 14h.01'/%3E%3Cpath d='M15 6h.01'/%3E%3Cpath d='M18 9h.01'/%3E%3C/svg%3E"); }
/* Promotions & Rewards — gift */
aside#sidebar ul.nav.nav-list li a[href*="promotions-rewards"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23783df5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='4' rx='1'/%3E%3Cpath d='M12 8v13'/%3E%3Cpath d='M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7'/%3E%3Cpath d='M7.5 8a2.5 2.5 0 0 1 0-5C10 3 12 8 12 8s2-5 4.5-5a2.5 2.5 0 0 1 0 5'/%3E%3C/svg%3E"); }
/* Shipping & Redemption — truck */
aside#sidebar ul.nav.nav-list li a[href*="shipping-redemption"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23783df5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2'/%3E%3Cpath d='M15 18H9'/%3E%3Cpath d='M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.62l-3.48-4.35A1 1 0 0 0 17.52 8H14'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3C/svg%3E"); }
/* Wallet & Payments — wallet */
aside#sidebar ul.nav.nav-list li a[href*="wallet-payments"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23783df5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 7V4a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v4h-3a2 2 0 0 0 0 4h3a1 1 0 0 0 1-1v-2'/%3E%3Cpath d='M3 5v14a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-4'/%3E%3C/svg%3E"); }
/* Withdrawals (and the 'Witdrawals' typo category) — bank.
   "drawals" matches both spellings: with-drawals and the wit-drawals typo. */
aside#sidebar ul.nav.nav-list li a[href*="drawals"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23783df5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='3' x2='21' y1='22' y2='22'/%3E%3Cline x1='6' x2='6' y1='18' y2='11'/%3E%3Cline x1='10' x2='10' y1='18' y2='11'/%3E%3Cline x1='14' x2='14' y1='18' y2='11'/%3E%3Cline x1='18' x2='18' y1='18' y2='11'/%3E%3Cpolygon points='12 2 20 7 4 7'/%3E%3C/svg%3E"); }
/* XPR — lightning */
aside#sidebar ul.nav.nav-list li a[href*="-xpr"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23783df5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='13 2 3 14 12 14 11 22 21 10 12 10 13 2'/%3E%3C/svg%3E"); }
/* XPR & Subscriptions — repeat (overrides the XPR rule above for this slug) */
aside#sidebar ul.nav.nav-list li a[href*="xpr-subscriptions"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23783df5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m17 2 4 4-4 4'/%3E%3Cpath d='M3 11v-1a4 4 0 0 1 4-4h14'/%3E%3Cpath d='m7 22-4-4 4-4'/%3E%3Cpath d='M21 13v1a4 4 0 0 1-4 4H3'/%3E%3C/svg%3E"); }

/* === Article body + accordion typography ===
   Force ALL text in article content to readable light colours. Help Scout's
   default body colour (#585858) and bold (#494949) are unreadable on dark.
   Applies to article pages (#fullArticle) AND the inline accordion panels
   (.acc-panel-inner), which hold fetched article HTML. */
article#fullArticle, .acc-panel-inner { color: var(--c-text); line-height: 1.7; }
article#fullArticle p, article#fullArticle li, article#fullArticle ul, article#fullArticle ol,
article#fullArticle span, article#fullArticle strong, article#fullArticle b, article#fullArticle em,
article#fullArticle div, article#fullArticle dd, article#fullArticle dt,
article#fullArticle td, article#fullArticle tr, article#fullArticle tbody,
.acc-panel-inner p, .acc-panel-inner li, .acc-panel-inner ul, .acc-panel-inner ol,
.acc-panel-inner span, .acc-panel-inner strong, .acc-panel-inner b, .acc-panel-inner em,
.acc-panel-inner div, .acc-panel-inner dd, .acc-panel-inner dt,
.acc-panel-inner td, .acc-panel-inner tr, .acc-panel-inner tbody {
  color: var(--c-text) !important;
}
article#fullArticle h1, article#fullArticle h2, article#fullArticle h3,
article#fullArticle h4, article#fullArticle h5, article#fullArticle h6,
.acc-panel-inner h1, .acc-panel-inner h2, .acc-panel-inner h3,
.acc-panel-inner h4, .acc-panel-inner h5, .acc-panel-inner h6 {
  color: var(--c-text) !important;
}
article#fullArticle a, .acc-panel-inner a { color: #9b6dff !important; }
article#fullArticle a:hover, .acc-panel-inner a:hover { color: #b794ff !important; }
article#fullArticle img, .acc-panel-inner img { border-radius: var(--radius-sm) !important; border: 1px solid var(--c-border) !important; max-width: 100% !important; height: auto !important; }

article#fullArticle code, .acc-panel-inner code, code {
  background: var(--c-surface-2) !important; color: #E6C6FF !important;
  border: 1px solid var(--c-border) !important; border-radius: 6px; padding: 1px 6px;
}
article#fullArticle pre, .acc-panel-inner pre { background: var(--c-surface-2) !important; border: 1px solid var(--c-border) !important; border-radius: var(--radius-sm) !important; padding: 16px !important; }
article#fullArticle pre code, .acc-panel-inner pre code { background: none !important; border: none !important; }

article#fullArticle blockquote, .acc-panel-inner blockquote {
  border-left: 4px solid var(--c-accent) !important; background: var(--c-accent-soft) !important;
  color: var(--c-text) !important; border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important; padding: 12px 18px !important;
}

article#fullArticle table, .acc-panel-inner table { border-color: var(--c-border) !important; }
article#fullArticle th, .acc-panel-inner th { background: var(--c-surface-2) !important; }
article#fullArticle th, article#fullArticle td, .acc-panel-inner th, .acc-panel-inner td { border-color: var(--c-border) !important; color: var(--c-text) !important; }
article#fullArticle hr, .acc-panel-inner hr, hr { border: none !important; border-top: 1px solid var(--c-border) !important; background: transparent !important; }

/* === Callouts — Help Scout uses pale pastel backgrounds (e.g. #e5fadc) that
   hide light text on a dark theme. Recolour to a dark tinted box with a
   colour-coded left border so they read clearly. === */
article#fullArticle [class*="callout"], .acc-panel-inner [class*="callout"] {
  background: var(--c-surface-2) !important;
  color: var(--c-text) !important;
  border: 1px solid var(--c-border) !important;
  border-left: 4px solid var(--c-accent) !important;
  border-radius: var(--radius-sm) !important;
  padding: 12px 16px !important;
}
article#fullArticle [class*="callout"] *, .acc-panel-inner [class*="callout"] * { color: var(--c-text) !important; }
.callout-green  { border-left-color: #39d98a !important; }
.callout-blue   { border-left-color: #4aa8ff !important; }
.callout-orange, .callout-yellow { border-left-color: #f5c451 !important; }
.callout-red    { border-left-color: #ff6b6b !important; }
.callout-purple { border-left-color: #a855f7 !important; }

/* === Category page head (title was #222 — unreadable on dark) === */
#categoryHead h1 { color: var(--c-text) !important; }
#categoryHead p.descrip { color: var(--c-text-dim) !important; }
#categoryHead .sort { width: auto !important; overflow: visible !important; }
#categoryHead .sort select, select#sortBy {
  background: var(--c-surface) !important; color: var(--c-text) !important;
  border: 1px solid var(--c-border-2) !important; border-radius: var(--radius-sm) !important;
  padding: 6px 30px 6px 12px !important; width: auto !important; min-width: 200px !important; height: auto !important;
}
#categoryHead .sort select option, select#sortBy option { background: var(--c-surface) !important; color: var(--c-text) !important; }

/* === Inline article accordion (works with the companion Headers script) === */
ul.articleList li a.acc-trigger { position: relative; padding-right: 40px !important; }
ul.articleList li a.acc-trigger::after {
  content: '+'; position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  color: var(--c-accent); font-weight: 700; font-size: 18px; line-height: 1;
}
ul.articleList li.acc-open > a.acc-trigger::after { content: '\2212'; }
.acc-panel { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.acc-panel-inner { padding: 4px 16px 18px; }
.acc-loading { color: var(--c-text-dim); padding: 8px 0; }

/* article rating + footer blocks */
div.articleRatings { color: var(--c-text-muted) !important; }
section.articleFoot, section.articleFoot p, section.articleFoot a { color: var(--c-text-muted) !important; }
section.articleFoot a { color: var(--c-accent) !important; }

.btn, button.btn, a.btn, input[type="submit"] {
  background-image: linear-gradient(135deg, var(--c-accent), var(--c-accent-deep)) !important;
  background-color: var(--c-accent) !important;
  color: #fff !important; border: none !important; border-radius: var(--radius-sm) !important; text-shadow: none !important;
}

/* ------------------------------ Footer ------------------------------- */
footer.center, footer {
  background: var(--c-bg-deep) !important;
  border-top: 1px solid var(--c-border) !important;
  box-shadow: inset 0 3px 0 var(--c-magenta);
  color: var(--c-text-dim) !important;
}
footer.center p, footer p, footer span { color: var(--c-text-dim) !important; }
footer.center a, footer a { color: var(--c-text-muted) !important; }
footer.center a:hover, footer a:hover { color: var(--c-accent) !important; }

/* ---- Responsive ---- */
@media (max-width: 767px) {
  section.twoCol { grid-template-columns: 1fr !important; }
  #contentArea > .row-fluid:has(#main-content) { flex-direction: column !important; }
  #contentArea > .row-fluid:has(#main-content) aside#sidebar { flex: 1 1 auto !important; width: 100% !important; }
}