@charset "UTF-8";
/* ============================================================
   style.css — Workshop Help Center theme (Copenhagen v3.1.2, restyled to BLAST)
   ============================================================
   Structure:
     • Original Copenhagen CSS (top ~3.8k lines; section headers added inline)
     • "BLAST DESIGN SYSTEM LAYER" (search for that banner) — :root token vars
       plus per-page refinements. Later blocks intentionally override earlier
       Copenhagen rules.

   BLAST design tokens (authoritative — deviate only when asked):
     Fonts:      P22 Mackinac (headings/display) + Proxima Nova (body/UI), loaded
                 as Fraunces + Mulish webfonts in document_head.hbs (licensed
                 names listed first in the stacks). NOTE: earlier drafts used Inter.
     Brand:      blue/500 #0056d6 (rgba(0, 86, 214, 1)) — accents, active states, icons
     Neutrals:   gray ramp #f6f6f6 … #171717   Muted text #707070; "·" seps #d0d0d0
     Type scale: 12,14,16,18,20,24,28,36 (11 = badge)
     Radius:     2,4,6,8,12          Spacing: 8,16,24,32,40,48,56
     Card UI:    #fff, 1px solid #ededed, radius 12, subtle hover shadow
   Zendesk vars: rgba(0, 86, 214, 1), rgba(25, 23, 23, 1), rgba(0, 86, 214, 1), rgba(0, 86, 214, 1),
                 rgba(0, 75, 187, 1), rgba(246, 246, 246, 1), rgba(255, 255, 255, 1)

   Notable custom blocks (search the file for the name):
     • "BLAST DESIGN SYSTEM LAYER" — :root tokens + typography
     • "FULL-WIDTH LAYOUT"         — article 3-column TOC / body / rail grid
     • .blocks-list grid           — home & category 3-col category cards
     • .section-tree grid          — category 2-col section cards (equal 24px gaps)
     • .search / .hero-search-container — unified white search styling +
       rounded hero focus ring (dropdown is home-only)
     • "PERSISTENT HEADER SEARCH" — one global search in the header on every
       interior page; hidden on home & results via :has()
     • "DARK MODE" — html[data-ws-theme="dark"] skin: BLAST-var remaps +
       component overrides; toggle button lives in header.hbs
     • .article-rail-help-button   — support CTA (incl. :visited white override)
     • .btn-primary-nav            — header "Submit a request" (always-white label)

   GOTCHA: `a:visited { color:rgba(0, 86, 214, 1) !important }` (specificity 0,1,1)
   outranks a plain single-class button colour rule (0,1,0). Any white-on-colour
   button needs a higher-specificity :visited override — see .article-rail-help-button.
   ============================================================ */

/***** Normalize.css *****/
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Reset browser inconsistencies across rendering engines. */
html { line-height: 1.15; -webkit-text-size-adjust: 100%; }
body { margin: 0; }
main { display: block; }
h1 { font-size: 2em; margin: 0.67em 0; }
hr { box-sizing: content-box; height: 0; overflow: visible; }
pre { font-family: monospace, monospace; font-size: 1em; }
a { background-color: transparent; }
abbr[title] { border-bottom: none; text-decoration: underline; text-decoration: underline dotted; }
b, strong { font-weight: bolder; }
code, kbd, samp { font-family: monospace, monospace; font-size: 1em; }
small { font-size: 80%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sub { bottom: -0.25em; }
sup { top: -0.5em; }
img { border-style: none; }
button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; }
button, input { overflow: visible; }
button, select { text-transform: none; }
button, [type=button], [type=reset], [type=submit] { -webkit-appearance: button; }
button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner { border-style: none; padding: 0; }
button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring { outline: 1px dotted ButtonText; }
fieldset { padding: 0.35em 0.75em 0.625em; }
legend { box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; }
progress { vertical-align: baseline; }
textarea { overflow: auto; }
[type=checkbox], [type=radio] { box-sizing: border-box; padding: 0; }
[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button { height: auto; }
[type=search] { -webkit-appearance: textfield; outline-offset: -2px; }
[type=search]::-webkit-search-decoration { -webkit-appearance: none; }
::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; }
details { display: block; }
summary { display: list-item; }
template { display: none; }
[hidden] { display: none; }

/***** Base *****/
/* Global box-model reset, base font stack (Inter + Zendesk fallback),
   font-smoothing, and minimum main-content height for short pages. */
* { box-sizing: border-box; }

body {
  background-color: rgba(246, 246, 246, 1);
  color: rgba(25, 23, 23, 1);
  font-family: 'Inter', 'Proxima Nova', 'Mulish', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter', 'Proxima Nova', 'Mulish', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  margin-top: 0;
  font-weight: 600;
  line-height: 1.3;
}

h1 { font-size: 36px; }
h2 { font-size: 28px; }
h3 { font-size: 18px; font-weight: 600; }
h4 { font-size: 16px; }

a {
  color: rgba(0, 86, 214, 1);
  text-decoration: none;
}
a:visited { color: rgba(0, 86, 214, 1); }
a:hover, a:active, a:focus { text-decoration: underline; }

input, textarea {
  color: rgba(25, 23, 23, 1);
  font-size: 14px;
}

input {
  max-width: 100%;
  box-sizing: border-box;
  transition: border 0.15s ease;
}
input:not([type=checkbox]) { outline: none; }
input:not([type=checkbox]):focus { border: 1px solid rgba(0, 86, 214, 1); }
input[disabled] { background-color: #ededed; }

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23CCC' d='M0 0h10L5 6 0 0z'/%3E%3C/svg%3E%0A") no-repeat #fff;
  background-position: right 12px center;
  border: 1px solid #d0d0d0;
  border-radius: 8px;
  padding: 9px 32px 9px 12px;
  outline: none;
  color: rgba(25, 23, 23, 1);
  width: 100%;
}
select:focus { border: 1px solid rgba(0, 86, 214, 1); box-shadow: 0 0 0 3px rgba(0,86,214,0.12); }
select::-ms-expand { display: none; }

textarea {
  border: 1px solid #d0d0d0;
  border-radius: 8px;
  resize: vertical;
  width: 100%;
  outline: none;
  padding: 12px;
}
textarea:focus { border: 1px solid rgba(0, 86, 214, 1); box-shadow: 0 0 0 3px rgba(0,86,214,0.12); }

.container {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 5%;
}
@media (min-width: 1160px) {
  .container { padding: 0; width: 92%; }
}

.container-divider {
  border-top: 1px solid #ededed;
  margin-bottom: 32px;
}

ul { list-style: none; margin: 0; padding: 0; }

.error-page {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 5%;
}
@media (min-width: 1160px) {
  .error-page { padding: 0; width: 92%; }
}

.visibility-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

/***** Buttons *****/
/* Base .button style: transparent background, brand-colour border, brand text.
   Hover/active/focus and .button-primary all fill with rgba(0, 86, 214, 1).
   .button-primary:hover uses the fixed BLAST token #0041a1 (blue/700).
   .button-large (and input[type=submit]) is a solid filled variant used for
   primary form actions — full-width on mobile, auto-width on ≥768px.
   .button-secondary is a muted outline for lower-priority actions. */
.button, .pagination-next-link, .pagination-prev-link, .pagination-first-link, .pagination-last-link,
.subscriptions-subscribe button, .requests-table-toolbar .organization-subscribe button,
.community-follow button, .article-subscribe button, .section-subscribe button, .split-button button {
  background-color: transparent;
  border: 1.5px solid rgba(0, 86, 214, 1);
  border-radius: 8px;
  color: rgba(0, 86, 214, 1);
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  line-height: 2.2;
  margin: 0;
  padding: 0 20px;
  text-align: center;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
  user-select: none;
  white-space: nowrap;
  width: auto; /* always inline — full-width forms use .button-large / input[type=submit] */
  -webkit-touch-callout: none;
}
.button:visited, .pagination-next-link:visited, .pagination-prev-link:visited,
.pagination-first-link:visited, .pagination-last-link:visited { color: rgba(0, 86, 214, 1); }

.button:hover, .pagination-next-link:hover, .pagination-prev-link:hover,
.pagination-first-link:hover, .pagination-last-link:hover,
.subscriptions-subscribe button:hover, .requests-table-toolbar .organization-subscribe button:hover,
.community-follow button:hover, .article-subscribe button:hover, .section-subscribe button:hover,
.split-button button:hover,
.button:active, .pagination-next-link:active, .pagination-prev-link:active,
.pagination-first-link:active, .pagination-last-link:active,
.button:focus, .pagination-next-link:focus, .pagination-prev-link:focus,
.pagination-first-link:focus, .pagination-last-link:focus,
.button.button-primary, .button-primary.pagination-next-link, .button-primary.pagination-prev-link,
.button-primary.pagination-first-link, .button-primary.pagination-last-link,
.subscriptions-subscribe button.button-primary, .subscriptions-subscribe button[data-selected=true],
.requests-table-toolbar .organization-subscribe button.button-primary,
.requests-table-toolbar .organization-subscribe button[data-selected=true],
.community-follow button.button-primary,
.article-subscribe button.button-primary, .article-subscribe button[data-selected=true],
.section-subscribe button.button-primary, .section-subscribe button[data-selected=true],
.split-button button.button-primary {
  background-color: rgba(0, 86, 214, 1);
  color: rgba(255, 255, 255, 1);
  text-decoration: none;
}

.button.button-primary:hover, .button-primary.pagination-next-link:hover,
.button-primary.pagination-prev-link:hover, .button-primary.pagination-first-link:hover,
.button-primary.pagination-last-link:hover,
.subscriptions-subscribe button.button-primary:hover, .subscriptions-subscribe button[data-selected=true]:hover,
.requests-table-toolbar .organization-subscribe button.button-primary:hover,
.requests-table-toolbar .organization-subscribe button[data-selected=true]:hover,
.community-follow button.button-primary:hover,
.article-subscribe button.button-primary:hover, .article-subscribe button[data-selected=true]:hover,
.section-subscribe button.button-primary:hover, .section-subscribe button[data-selected=true]:hover,
.split-button button:hover,
.button.button-primary:focus, .button-primary.pagination-next-link:focus,
.button-primary.pagination-prev-link:focus, .button-primary.pagination-first-link:focus,
.button-primary.pagination-last-link:focus,
.subscriptions-subscribe button.button-primary:focus, .subscriptions-subscribe button[data-selected=true]:focus,
.requests-table-toolbar .organization-subscribe button.button-primary:focus,
.requests-table-toolbar .organization-subscribe button[data-selected=true]:focus,
.article-subscribe button.button-primary:focus, .article-subscribe button[data-selected=true]:focus,
.section-subscribe button.button-primary:focus, .section-subscribe button[data-selected=true]:focus,
.split-button button.button-primary:focus,
.button.button-primary:active, .button-primary.pagination-next-link:active,
.button-primary.pagination-prev-link:active, .button-primary.pagination-first-link:active,
.button-primary.pagination-last-link:active,
.subscriptions-subscribe button.button-primary:active, .subscriptions-subscribe button[data-selected=true]:active,
.requests-table-toolbar .organization-subscribe button.button-primary:active,
.requests-table-toolbar .organization-subscribe button[data-selected=true]:active,
.article-subscribe button.button-primary:active, .article-subscribe button[data-selected=true]:active,
.section-subscribe button.button-primary:active, .section-subscribe button[data-selected=true]:active,
.split-button button.button-primary:active {
  background-color: #0041a1;
  border-color: #0041a1;
}

.button[data-disabled], [data-disabled].pagination-next-link, [data-disabled].pagination-prev-link,
[data-disabled].pagination-first-link, [data-disabled].pagination-last-link,
.subscriptions-subscribe button[data-disabled], .requests-table-toolbar .organization-subscribe button[data-disabled],
.community-follow button[data-disabled], .article-subscribe button[data-disabled],
.section-subscribe button[data-disabled], .split-button button[data-disabled] {
  cursor: default;
}

.button-large, input[type=submit] {
  cursor: pointer;
  background-color: rgba(0, 86, 214, 1);
  border: 0;
  border-radius: 8px;
  color: rgba(255, 255, 255, 1);
  font-size: 14px;
  font-weight: 600;
  line-height: 2.6;
  min-width: 160px;
  padding: 0 1.75em;
  width: 100%;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
@media (min-width: 768px) {
  .button-large, input[type=submit] { width: auto; }
}
.button-large:visited, input[type=submit]:visited { color: rgba(255, 255, 255, 1); }
.button-large:hover, .button-large:active, .button-large:focus,
input[type=submit]:hover, input[type=submit]:active, input[type=submit]:focus {
  background-color: #004bbb;
  box-shadow: 0 4px 12px rgba(0,86,214,0.25);
}
.button-large[disabled], input[type=submit][disabled] { background-color: #d0d0d0; }

.button-secondary {
  color: #707070;
  border: 1.5px solid #d0d0d0;
  background-color: transparent;
}
.button-secondary:visited { color: #707070; }
.button-secondary:hover, .button-secondary:focus, .button-secondary:active {
  color: rgba(25, 23, 23, 1);
  border: 1.5px solid #939393;
  background-color: #fbfbfb;
}

/***** Split button *****/
/* Two-part button (main action + dropdown chevron) used on the community
   follow/unfollow control.  The separator between the two halves uses
   rgba(255, 255, 255, 1) to remain visible against the filled brand background. */
.split-button { display: flex; }
.split-button button {
  background-color: rgba(0, 86, 214, 1);
  border: 0;
  color: rgba(255, 255, 255, 1);
  height: 34px;
  line-height: 16px;
  outline-color: rgba(0, 86, 214, 1);
}
[dir=rtl] .split-button button:not(:only-child):first-child {
  border-left: 1px solid rgba(255, 255, 255, 1);
  border-top-left-radius: unset;
  border-bottom-left-radius: unset;
}
[dir=ltr] .split-button button:not(:only-child):first-child {
  border-right: 1px solid rgba(255, 255, 255, 1);
  border-top-right-radius: unset;
  border-bottom-right-radius: unset;
}
.split-button button:not(:only-child):last-child {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 28px;
  min-width: 28px;
  max-width: 28px;
  padding: 0;
}
[dir=rtl] .split-button button:not(:only-child):last-child {
  border-top-right-radius: unset;
  border-bottom-right-radius: unset;
}
[dir=ltr] .split-button button:not(:only-child):last-child {
  border-top-left-radius: unset;
  border-bottom-left-radius: unset;
}

/***** Tables *****/
/* Used on the requests list page for the ticket table.
   Switches from display:block (stacked) on mobile to display:table on ≥768px.
   Column headers are uppercase, muted, and small for a clean data-table look. */
.table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border-spacing: 0;
}
@media (min-width: 768px) { .table { table-layout: auto; } }
.table th, .table th a {
  color: #707070;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: left;
}
[dir=rtl] .table th, [dir=rtl] .table th a { text-align: right; }
.table tr {
  border-bottom: 1px solid #ededed;
  display: block;
  padding: 16px 0;
}
@media (min-width: 768px) { .table tr { display: table-row; } }
.table td { display: block; }
@media (min-width: 768px) { .table td { display: table-cell; } }
@media (min-width: 1024px) { .table td, .table th { padding: 18px 28px; } }
@media (min-width: 768px) { .table td, .table th { padding: 12px 18px; height: 56px; } }

/***** Forms *****/
/* .form is the container for all Zendesk-generated forms (new request, profile
   edit, etc.).  Field labels are 13px/500 for hierarchy clarity.  Input/textarea
   borders are 1.5px solid #d0d0d0; on :focus they switch to rgba(0, 86, 214, 1) with a
   subtle 3px rgba glow.  Nesty (multi-select) and hc-multiselect inputs receive
   the same border treatment. */
.form { max-width: 650px; }
.form-field ~ .form-field { margin-top: 24px; }
.form-field label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 6px;
  color: rgba(25, 23, 23, 1);
}
.form-field input {
  border: 1.5px solid #d0d0d0;
  border-radius: 8px;
  padding: 10px 12px;
  width: 100%;
}
.form-field input:focus { border: 1.5px solid rgba(0, 86, 214, 1); box-shadow: 0 0 0 3px rgba(0,86,214,0.12); }
.form-field input[type=text] { border: 1.5px solid #d0d0d0; border-radius: 8px; }
.form-field input[type=text]:focus { border: 1.5px solid rgba(0, 86, 214, 1); }
.form-field input[type=checkbox] { width: auto; }
.form-field .nesty-input {
  border-radius: 8px;
  border: 1.5px solid #d0d0d0;
  height: 42px;
  line-height: 42px;
  outline: none;
  vertical-align: middle;
}
.form-field .nesty-input:focus { border: 1.5px solid rgba(0, 86, 214, 1); text-decoration: none; }
.form-field .hc-multiselect-toggle { border: 1.5px solid #d0d0d0; }
.form-field .hc-multiselect-toggle:focus { outline: none; border: 1.5px solid rgba(0, 86, 214, 1); text-decoration: none; }
.form-field textarea { vertical-align: middle; }
.form-field input[type=checkbox] + label { margin: 0 0 0 8px; }
.form-field .optional { color: #707070; margin-left: 4px; }
.form-field p { color: #707070; font-size: 12px; margin: 5px 0; }
.form footer { margin-top: 40px; padding-top: 28px; }
.form footer a { color: #707070; cursor: pointer; margin-right: 15px; }
.form .suggestion-list { font-size: 14px; margin-top: 28px; }
.form .suggestion-list label { border-bottom: 1px solid #ededed; display: block; padding-bottom: 6px; }
.form .suggestion-list li { padding: 10px 0; }
.form .suggestion-list li a:visited { color: rgba(0, 86, 214, 1); }

/***** Header *****/
/* Sticky (top: 0), per the original Copenhagen design — re-affirmed in the
   "Sticky header design decision" block near the bottom of this file, because
   the header carries the theme's persistent search box. Elements that stick
   below it offset from --ws-header-height (published by script.js).
   The `.is-scrolled` class (added by JS after 8px of scroll) applies a
   drop-shadow once the page is scrolled. */
.header {
  background-color: #ffffff;
  border-bottom: 1px solid #ededed;
  position: sticky;
  top: 0;
  z-index: 100;
  transition: box-shadow 0.2s ease;
}

.header.is-scrolled {
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  border-bottom-color: transparent;
}

.header-inner {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 5%;
  display: flex;
  align-items: center;
  height: 68px;
  justify-content: space-between;
}
@media (min-width: 1160px) {
  .header-inner { padding: 0; width: 92%; }
}

.logo img { max-height: 36px; vertical-align: middle; }
.logo .brand-name { margin: 0 10px; color: rgba(25, 23, 23, 1); font-weight: 600; font-size: 16px; }
.logo a { display: inline-flex; align-items: center; }
.logo a:hover, .logo a:focus, .logo a:active { text-decoration: none; }

.user-nav {
  display: inline-block;
  position: absolute;
  white-space: nowrap;
}
@media (min-width: 768px) { .user-nav { position: relative; } }
.user-nav[aria-expanded=true] {
  background-color: #fff;
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
  border: 1px solid #ededed;
  border-radius: 12px;
  right: 0;
  left: 0;
  top: 68px;
  z-index: 1;
}
.user-nav[aria-expanded=true] > a { display: block; margin: 16px 20px; }
.user-nav[aria-expanded=true] > .user-nav-list li { display: block; }
.user-nav[aria-expanded=true] > .user-nav-list a { display: block; margin: 16px 20px; }

.user-nav-list { display: block; list-style: none; }
.user-nav-list > li { display: inline-block; }

@media (max-width: 768px) {
  .nav-wrapper-desktop { display: none; }
}
@media (min-width: 768px) {
  .nav-wrapper-desktop { display: none; }
}
@media (min-width: 1024px) {
  .nav-wrapper-desktop { display: inline-flex; align-items: center; gap: 8px; }
}

.nav-wrapper-desktop a {
  border: 0;
  color: rgba(25, 23, 23, 1);
  display: none;
  font-size: 14px;
  font-weight: 500;
  padding: 0 14px 0 0;
  width: auto;
}
@media (min-width: 768px) { .nav-wrapper-desktop a { display: inline-block; } }
[dir=rtl] .nav-wrapper-desktop a { padding: 0 0 0 14px; }
.nav-wrapper-desktop a:hover, .nav-wrapper-desktop a:focus, .nav-wrapper-desktop a:active {
  background-color: transparent;
  color: rgba(0, 86, 214, 1);
  text-decoration: none;
}

.btn-primary-nav {
  background-color: rgba(0, 86, 214, 1) !important;
  color: rgba(255, 255, 255, 1) !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 0 16px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 2.4 !important;
  display: inline-flex !important;
  align-items: center !important;
  margin-left: 8px;
}
.btn-primary-nav:hover, .btn-primary-nav:focus {
  background-color: #004bbb !important;
  text-decoration: none !important;
  color: rgba(255, 255, 255, 1) !important;
  box-shadow: 0 2px 8px rgba(0,86,214,0.3) !important;
}
/* Higher-specificity guard for the DEFAULT state: Zendesk's base nav-link
   CSS (loaded on the live site, not in local preview) can override the link
   colour to blue, leaving blue-on-blue text until hover. These selectors beat
   it so the "Submit a request" label is always white. */
.nav-wrapper-desktop a.btn-primary-nav,
.nav-wrapper-desktop a.btn-primary-nav:visited,
.user-nav-list a.btn-primary-nav,
.user-nav-list a.btn-primary-nav:visited,
.nav-wrapper-mobile a.btn-primary-nav {
  color: rgba(255, 255, 255, 1) !important;
}

@media (min-width: 1024px) { .nav-wrapper-mobile { display: none; } }
.nav-wrapper-mobile .menu-button-mobile {
  background: none;
  border: 0;
  width: auto;
  min-width: 44px;
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
  color: rgba(25, 23, 23, 1);
}
.nav-wrapper-mobile .menu-button-mobile:hover { background-color: #f6f6f6; }
.nav-wrapper-mobile .menu-button-mobile .icon-menu {
  vertical-align: middle;
  width: 22px;
  height: 22px;
}
.nav-wrapper-mobile .menu-button-mobile[aria-expanded=true] .icon-menu {
  color: rgba(0, 86, 214, 1);
}
.nav-wrapper-mobile .menu-list-mobile {
  position: absolute;
  background-color: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  border: 1px solid #ededed;
  border-top: 0;
  border-radius: 0 0 12px 12px;
  right: 0;
  left: 0;
  top: 68px;
  z-index: 2;
}
.nav-wrapper-mobile .menu-list-mobile[aria-expanded=false] { display: none; }
.nav-wrapper-mobile .menu-list-mobile[aria-expanded=true] { display: block; }
.nav-wrapper-mobile .menu-list-mobile-items .item { margin: 2px 0; }
.nav-wrapper-mobile .menu-list-mobile-items li:empty:not(.nav-divider) { display: none; }
.nav-wrapper-mobile .menu-list-mobile-items .nav-divider {
  border-bottom: 1px solid #ededed;
  padding: 0;
}
.nav-wrapper-mobile .menu-list-mobile-items .nav-divider:last-child { display: none; }
.nav-wrapper-mobile .menu-list-mobile-items button {
  background: none;
  border: none;
  padding: 10px 20px;
  width: 100%;
  height: 100%;
  color: rgba(25, 23, 23, 1);
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  text-align: start;
}
.nav-wrapper-mobile .menu-list-mobile-items button:active,
.nav-wrapper-mobile .menu-list-mobile-items button:focus,
.nav-wrapper-mobile .menu-list-mobile-items button:hover {
  background-color: #f6f6f6;
  text-decoration: none;
}
.nav-wrapper-mobile .menu-list-mobile-items a {
  display: block;
  padding: 10px 20px;
  width: 100%;
  height: 100%;
  color: rgba(25, 23, 23, 1);
  font-size: 14px;
  font-weight: 500;
}
.nav-wrapper-mobile .menu-list-mobile-items a:active,
.nav-wrapper-mobile .menu-list-mobile-items a:focus,
.nav-wrapper-mobile .menu-list-mobile-items a:hover {
  background-color: #f6f6f6;
  text-decoration: none;
}
.nav-wrapper-mobile .menu-list-mobile-items .my-profile { display: flex; line-height: 1.5; }
.nav-wrapper-mobile .menu-list-mobile-items .my-profile .my-profile-tooltip { font-size: 12px; color: #707070; }
.nav-wrapper-mobile .menu-list-mobile-items .menu-profile-avatar {
  height: 22px;
  width: 22px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 10px;
  margin-top: 1px;
}
[dir=rtl] .nav-wrapper-mobile .menu-list-mobile-items .menu-profile-avatar { margin-right: 0; margin-left: 10px; }

.skip-navigation {
  align-items: center;
  background-color: rgba(0, 86, 214, 1);
  color: rgba(255, 255, 255, 1);
  display: flex;
  font-size: 14px;
  font-weight: 600;
  justify-content: center;
  left: -999px;
  margin: 12px;
  padding: 12px 24px;
  border-radius: 8px;
  overflow: hidden;
  position: absolute;
  top: auto;
  z-index: -999;
}
[dir=rtl] .skip-navigation { left: initial; right: -999px; }
.skip-navigation:focus, .skip-navigation:active {
  left: auto;
  overflow: auto;
  text-align: center;
  text-decoration: none;
  top: auto;
  z-index: 999;
}
[dir=rtl] .skip-navigation:focus, [dir=rtl] .skip-navigation:active { left: initial; right: auto; }
#zd-modal-container ~ .skip-navigation { display: none; }

/***** User info in header *****/
/* The user avatar + dropdown toggle in the top-right corner.
   On mobile the dropdown chevron (::after) is hidden; shown on ≥768px.
   The .dropdown-menu is positioned and managed by the Dropdown JS class. */
.user-info { display: inline-block; }
.user-info .dropdown-toggle::after { display: none; }
@media (min-width: 768px) { .user-info .dropdown-toggle::after { display: inline-block; } }
.user-info > button {
  border: 0;
  color: rgba(25, 23, 23, 1);
  min-width: 0;
  padding: 4px 8px;
  white-space: nowrap;
  border-radius: 8px;
  font-weight: 500;
  font-size: 14px;
}
.user-info > button:hover, .user-info > button:focus {
  color: rgba(25, 23, 23, 1);
  background-color: #f6f6f6;
}
.user-info > button::after { color: rgba(25, 23, 23, 1); padding-right: 10px; }
[dir=rtl] .user-info > button::after { padding-left: 10px; padding-right: 0; }

#user #user-name { display: none; font-size: 14px; }
@media (min-width: 768px) { #user #user-name { display: inline-block; } }
#user #user-name:hover { text-decoration: underline; }

/***** User avatar *****/
/* 28px circular avatar for the header user button.
   .avatar is a relative wrapper so the .icon-agent badge (brand-colour circle)
   can be absolutely positioned over the bottom-right corner of the photo. */
.user-avatar {
  height: 28px;
  width: 28px;
  border-radius: 50%;
  display: inline-block;
  vertical-align: middle;
}
.avatar { display: inline-block; position: relative; }
.avatar img { height: 40px; width: 40px; border-radius: 50%; }
.avatar .icon-agent {
  color: rgba(0, 86, 214, 1);
  border: 2px solid #fff;
  border-radius: 50%;
  bottom: -4px;
  background-color: rgba(255, 255, 255, 1);
  font-size: 18px;
  height: 17px;
  line-height: 17px;
  position: absolute;
  right: -2px;
  text-align: center;
  width: 17px;
}

/***** Footer *****/
/* Site footer: muted #fbfbfb background, top border, 72px top margin.
   Inner layout is flex row: brand logo/name on the left, links + language
   selector on the right.  On short pages the footer is pushed to the viewport
   bottom via the `body { display:flex; flex-direction:column }` rule in the
   custom additions section below. */
.footer {
  background-color: #fbfbfb;
  border-top: 1px solid #ededed;
  margin-top: 72px;
  padding: 32px 0;
}
.footer a {
  color: #707070;
  font-size: 14px;
  font-weight: 500;
}
.footer a:hover { color: rgba(0, 86, 214, 1); text-decoration: none; }
.footer-inner {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 5%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media (min-width: 1160px) {
  .footer-inner { padding: 0; width: 92%; }
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}
.footer-brand a {
  display: flex;
  align-items: center;
}
.footer-logo {
  height: 26px;
  width: auto;
  display: block;
}
.footer-right { display: flex; align-items: center; gap: 20px; }
.footer-language-selector button {
  color: #707070;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
}

.powered-by-zendesk a, .powered-by-zendesk a:visited { color: #707070; }

/***** Breadcrumbs *****/
/* Flex-wrap row with "/" separators (li + li::before).
   Links use rgba(0, 86, 214, 1); the last crumb is plain text (rgba(25, 23, 23, 1)).
   NOTE: The custom additions section overrides these with chevron "›" separators
   and bolder hierarchy styling using !important. */
.breadcrumbs {
  margin: 0 0 16px 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}
@media (min-width: 768px) { .breadcrumbs { margin: 0; } }
.breadcrumbs li {
  color: #707070;
  font-size: 14px;
  max-width: 450px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.breadcrumbs li + li::before {
  content: "/";
  margin: 0 6px;
  color: #d0d0d0;
}
.breadcrumbs li a { color: rgba(0, 86, 214, 1); }
.breadcrumbs li a:visited { color: rgba(0, 86, 214, 1); }
.breadcrumbs li a:hover { text-decoration: underline; }

/***** Search field *****/
/* .search — the bordered pill that wraps the <input type="search">.
   Contains the input and the JS-injected clear (×) button.
   .search-has-value (toggled by JS) shows the clear button when the input
   has a value and adjusts input border-radius to butt against the button.
   .search-full strips inner visual chrome for contexts where the outer wrapper
   provides the border (e.g. the hero and header search containers). */
.search-container { position: relative; }

.search {
  border-color: #d0d0d0;
  border-radius: 8px;
  border-style: solid;
  border-width: 1.5px;
  display: flex;
  position: relative;
  transition: border 0.15s ease, box-shadow 0.15s ease;
  background: #fff;
}
.search:focus-within {
  border-color: rgba(0, 86, 214, 1);
  box-shadow: 0 0 0 3px rgba(0,86,214,0.12);
}
.search input[type=search], .search .clear-button {
  background-color: #fff;
  border-radius: 8px;
  border: none;
}
.search-full input[type=search], .search-full .clear-button { border-color: #fff; }
.search input[type=search] {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  color: rgba(25, 23, 23, 1);
  flex: 1 1 auto;
  height: 48px;
  width: 100%;
  font-size: 16px;
}
.search input[type=search]:focus { color: rgba(25, 23, 23, 1); }
.search input[type=search]::-webkit-search-decoration,
.search input[type=search]::-webkit-search-cancel-button,
.search input[type=search]::-webkit-search-results-button,
.search input[type=search]::-webkit-search-results-decoration { -webkit-appearance: none; }
.search input[type=search]:-webkit-autofill,
.search input[type=search]:-webkit-autofill:hover,
.search input[type=search]:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px #fff inset; }
.search .clear-button {
  align-items: center;
  box-sizing: border-box;
  color: #939393;
  cursor: pointer;
  display: none;
  flex: none;
  justify-content: center;
  padding: 0 16px;
}
.search .clear-button:hover { background-color: rgba(0, 86, 214, 1); color: #fff; border-radius: 0 8px 8px 0; }
.search .clear-button:focus { outline: 0; box-shadow: 0 0 0 3px rgba(0, 86, 214, 1); }
.search-has-value .clear-button { display: flex; }

[dir=ltr] .search input[type=search] { padding-left: 48px; padding-right: 20px; }
[dir=ltr] .search-has-value input[type=search] {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  border-right-color: transparent;
}
[dir=ltr] .search-has-value input[type=search]:focus { border-right-color: rgba(0, 86, 214, 1); }
[dir=ltr] .search .clear-button { border-bottom-left-radius: 0; border-top-left-radius: 0; border-left-color: transparent; }
[dir=ltr] .search .clear-button:focus { border-left-color: rgba(0, 86, 214, 1); }

[dir=rtl] .search input[type=search] { padding-left: 20px; padding-right: 48px; }
[dir=rtl] .search-has-value input[type=search] {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  border-left-color: transparent;
}
[dir=rtl] .search-has-value input[type=search]:focus { border-left-color: rgba(0, 86, 214, 1); }
[dir=rtl] .search .clear-button { border-bottom-right-radius: 0; border-top-right-radius: 0; border-right-color: transparent; }
[dir=rtl] .search .clear-button:focus { border-right-color: rgba(0, 86, 214, 1); }

.search-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 16px;
  z-index: 1;
  width: 20px;
  height: 20px;
  color: #939393;
  pointer-events: none;
}
[dir=rtl] .search-icon { left: auto; right: 16px; }

/***** Hero *****/
/* Full-width homepage hero banner.
   Uses the admin-configured /hc/theming_assets/01KPBY4F48JFH97KB7CMGWR86E as a cover image with
   a dark blue gradient overlay (::before pseudo-element, z-index 0) for text
   legibility.  The inner .hero-inner has z-index 1 to sit above the overlay.
   The search bar inside the hero gets an elevated box-shadow and no border. */
.hero {
  background-image: url(/hc/theming_assets/01KPBY4F48JFH97KB7CMGWR86E);
  background-position: center;
  background-size: cover;
  background-color: rgba(0, 86, 214, 1);
  min-height: 340px;
  padding: 0 24px;
  text-align: center;
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(0,40,120,0.78) 0%, rgba(0,60,180,0.65) 100%);
  z-index: 0;
}

.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 640px;
  width: 100%;
  margin: 0 auto;
  padding: 60px 0;
}

/* (the .hero-tagline element was removed from home_page.hbs — the hero is
   just the search box) */

.hero-inner .search {
  background: rgba(255,255,255,0.97);
  border: none;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}
.hero-inner .search:focus-within {
  box-shadow: 0 8px 32px rgba(0,0,0,0.25), 0 0 0 3px rgba(255,255,255,0.5);
}
.hero-inner .search input[type=search] {
  height: 56px;
  font-size: 16px;
  color: #171717;
}
.hero-inner .search-icon { color: #707070; }

/***** Section heading *****/
/* Used for H2-level headings above content groups on the home page
   (e.g. "All categories").  Has a 2px solid #ededed bottom border to
   separate it visually from the content below. */
.section-heading {
  font-size: 20px;
  font-weight: 600;
  color: rgba(25, 23, 23, 1);
  margin: 48px 0 24px;
  padding-bottom: 12px;
  border-bottom: 2px solid #ededed;
}

/***** Page header (category/section pages) *****/
/* .page-header was the original top-of-page flex row (title + subscribe button)
   used before the category/section pages were redesigned to use hero banners.
   Still used as a fallback in some page contexts. */
.page-header {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 10px 0 32px;
}
@media (min-width: 768px) {
  .page-header {
    align-items: baseline;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 16px;
    margin: 0 0 32px;
  }
}
.page-header .section-subscribe { flex-shrink: 0; margin-bottom: 10px; }
@media (min-width: 768px) { .page-header .section-subscribe { margin-bottom: 0; } }
.page-header h1 { flex-grow: 1; margin-bottom: 8px; font-size: 28px; }
.page-header-description {
  color: #707070;
  margin: 0 0 28px 0;
  word-break: break-word;
  font-size: 16px;
}
@media (min-width: 1024px) { .page-header-description { flex-basis: 100%; } }
.page-header .icon-lock { height: 20px; width: 20px; position: relative; left: -5px; vertical-align: baseline; }

.sub-nav {
  align-items: baseline;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: space-between;
  margin-bottom: 40px;
  padding: 20px 0;
  border-bottom: 1px solid #ededed;
}
@media (min-width: 768px) { .sub-nav { flex-direction: row; } }
.sub-nav .breadcrumbs { margin: 0; }
.sub-nav .search-container { max-width: 280px; width: 100%; }
@media (min-width: 768px) { .sub-nav .search-container { flex: 0 1 280px; } }

/***** Category cards (blocks) *****/
/* .blocks-list is a CSS Grid: 1 col → 2 col (≥600px) → 3 col (≥960px).
   Each .blocks-item is a white card with a 14px border-radius, subtle
   border, and a lift animation on hover (translateY -2px + deeper shadow).
   The .blocks-item-icon is a 44px rounded square with brand-tinted background
   and brand-colour SVG icon (matched by keyword in JS). */
.blocks-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (min-width: 600px) {
  .blocks-list { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .blocks-list { grid-template-columns: repeat(3, 1fr); }
}

.blocks-item {
  background: #ffffff;
  border: 1px solid #ededed;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
  display: flex;
}
.blocks-item:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,0.1);
  transform: translateY(-2px);
  border-color: rgba(0, 86, 214, 1);
}

.blocks-item-link {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 20px;
  flex: 1;
  border-radius: inherit;
  color: rgba(25, 23, 23, 1);
  text-decoration: none;
}
.blocks-item-link:visited { color: rgba(25, 23, 23, 1); }
.blocks-item-link:hover, .blocks-item-link:focus, .blocks-item-link:active {
  color: rgba(25, 23, 23, 1);
  text-decoration: none;
  outline: none;
}
.blocks-item-link:focus-visible {
  outline: 2px solid rgba(0, 86, 214, 1);
  outline-offset: 2px;
}

.blocks-item-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  background-color: rgba(0,86,214,0.08);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(0, 86, 214, 1);
}

.blocks-item-body {
  flex: 1;
  min-width: 0;
}

.blocks-item-title {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: rgba(25, 23, 23, 1);
  margin-bottom: 0;
  line-height: 1.4;
}

.blocks-item-description {
  display: block;
  font-size: 14px;
  color: #939393;
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.blocks-item-description:empty { display: none; }

.blocks-item-arrow {
  flex-shrink: 0;
  color: #d0d0d0;
  transition: color 0.2s ease, transform 0.2s ease;
}
.blocks-item:hover .blocks-item-arrow {
  color: rgba(0, 86, 214, 1);
  transform: translateX(3px);
}

.blocks-item-internal {
  background-color: #fbfbfb;
  border: 1px solid #ededed;
}
.blocks-item-internal .icon-lock { height: 15px; width: 15px; bottom: 5px; position: relative; }
.blocks-item-internal a { color: rgba(25, 23, 23, 1); }

/***** Homepage *****/
/* Shared section bottom margin for the home page content groups. */
.section { margin-bottom: 48px; }
@media (min-width: 768px) { .section { margin-bottom: 64px; } }

.home-section h2 { margin-bottom: 12px; text-align: center; }

/***** Promoted articles *****/
/* Grid of featured articles shown on the home page when the admin has
   enabled "Promoted articles" in Guide.  Uses a CSS Grid with a shared
   border — items have right/bottom borders so the grid forms a single
   unified card outline (last child rules reset unwanted borders). */
.promoted-section { margin-top: 16px; }

.promoted-articles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  background: #ffffff;
  border: 1px solid #ededed;
  border-radius: 12px;
  overflow: hidden;
}
@media (min-width: 768px) {
  .promoted-articles { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .promoted-articles { grid-template-columns: repeat(3, 1fr); }
}

.promoted-articles-item {
  flex: 1 0 auto;
  border-bottom: 1px solid #ededed;
}
.promoted-articles-item:last-child { border-bottom: 0; }
@media (min-width: 768px) {
  .promoted-articles-item { border-right: 1px solid #ededed; border-bottom: 1px solid #ededed; }
  .promoted-articles-item:nth-child(2n) { border-right: 0; }
}
@media (min-width: 1024px) {
  .promoted-articles-item:nth-child(2n) { border-right: 1px solid #ededed; }
  .promoted-articles-item:nth-child(3n) { border-right: 0; }
}

.promoted-articles-item a {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 20px;
  color: rgba(25, 23, 23, 1);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.15s ease;
  border: 0;
}
.promoted-articles-item a:hover {
  background-color: #fbfbfb;
  text-decoration: none;
  color: rgba(0, 86, 214, 1);
}
.promoted-article-icon {
  flex-shrink: 0;
  color: rgba(0, 86, 214, 1);
  margin-top: 1px;
}
.promoted-articles-item .icon-lock { vertical-align: baseline; }

/***** Community section *****/
/* Block displayed at the bottom of the home page when community is enabled.
   Contains a centred image (admin-configurable via /hc/theming_assets/01KPBY4G5GRN69QYD4ESXR6AH3) and
   links to community topics. */
.community { text-align: center; border-top: 1px solid #ededed; padding: 40px 0; }
.community-image {
  min-height: 280px;
  background-image: url(/hc/theming_assets/01KPBY4G5GRN69QYD4ESXR6AH3);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  /* FULL-BLEED: the banner spans the whole viewport, edge to edge — its
     .community section sits OUTSIDE .container in home_page.hbs (structural
     full-width; no 100vw hacks, so it's exact on every scrollbar platform).
     Edge-to-edge, so no border radius. */
  width: 100%;
  max-width: 100%;
  margin: 28px 0 0;
  border-radius: 0;
  overflow: hidden;
}
.community a { color: rgba(0, 86, 214, 1); text-decoration: underline; }
.community a:visited { color: rgba(0, 86, 214, 1); }
.community a:hover, .community a:active, .community a:focus { color: rgba(0, 75, 187, 1); }
.community, .activity { border-top: 1px solid #ededed; padding: 32px 0; }

/***** Recent activity *****/
/* Activity feed shown on the home page when community is enabled.
   Each item (.recent-activity-item) is a flex row with title, link, and
   meta (time, comment count) aligned at baseline. */
.recent-activity-header { margin-bottom: 12px; text-align: center; }
.recent-activity-list { padding: 0; }
.recent-activity-item { border-bottom: 1px solid #ededed; overflow: auto; padding: 18px 0; }
.recent-activity-item h3 { margin: 0; }
.recent-activity-item-parent { font-size: 16px; font-weight: 600; }
.recent-activity-item-parent, .recent-activity-item-link {
  margin: 6px 0;
  display: inline-block;
  width: 100%;
}
@media (min-width: 768px) {
  .recent-activity-item-parent, .recent-activity-item-link { width: 70%; margin: 0; }
}
.recent-activity-item-link { font-size: 14px; overflow: hidden; text-overflow: ellipsis; }
.recent-activity-item-meta { color: rgba(25, 23, 23, 1); margin: 12px 0 0 0; float: none; }
@media (min-width: 768px) {
  .recent-activity-item-meta { margin: 0; float: right; }
  [dir=rtl] .recent-activity-item-meta { float: left; }
}
.recent-activity-item-time, .recent-activity-item-comment { display: inline-block; font-size: 14px; }
.recent-activity-item-comment { padding-left: 5px; }
[dir=rtl] .recent-activity-item-comment { padding: 0 5px 0 0; }
.recent-activity-item-comment::before { display: inline-block; }
.recent-activity-controls { padding-top: 14px; }
.recent-activity-controls a { color: rgba(0, 86, 214, 1); text-decoration: underline; }
.recent-activity-controls a:visited { color: rgba(0, 86, 214, 1); }
.recent-activity-controls a:hover, .recent-activity-controls a:active, .recent-activity-controls a:focus { color: rgba(0, 75, 187, 1); }
.recent-activity-accessibility-label {
  border: 0; clip: rect(0 0 0 0); -webkit-clip-path: inset(50%); clip-path: inset(50%);
  height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; white-space: nowrap;
}
.recent-activity-comment-icon svg { vertical-align: middle; color: rgba(0, 86, 214, 1); width: 16px; height: 16px; }
.recent-activity-comment-icon:after { content: attr(data-comment-count); margin-left: 3px; }
[dir=rtl] .recent-activity-comment-icon:after { margin-left: 0; margin-right: 3px; }

/***** Category pages *****/
/* .category-container / .category-content — flex container for the category
   page.  .category-content takes full width because we don't use a sidebar
   on category pages (all content width, ≤1160px container). */
/* 32px top padding separates the cards from the blue category hero — the
   sub-nav search bar used to provide this gap before search moved into the
   global header. */
.category-container { display: flex; justify-content: flex-end; padding-top: 32px; }
.category-content { flex: 1; max-width: 100%; }
@media (min-width: 1024px) { .category-content { flex: 1; max-width: 100%; } }

.section-tree {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 24px;
}
@media (min-width: 768px) { .section-tree { flex-direction: row; } }
.section-tree .section { flex: initial; max-width: 100%; }
@media (min-width: 768px) { .section-tree .section { flex: 0 0 45%; } }
.section-tree-title {
  margin-bottom: 0;
  font-size: 18px;
  font-weight: 600;
  padding-bottom: 8px;
  border-bottom: 2px solid #ededed;
  margin-bottom: 8px;
}
.section-tree-title a { color: rgba(25, 23, 23, 1); }
.section-tree-title a:hover { color: rgba(0, 86, 214, 1); text-decoration: none; }
.section-tree .see-all-articles { display: block; padding: 12px 0; font-size: 14px; font-weight: 500; }

.article-list-item {
  font-size: 16px;
  padding: 12px 0;
  border-bottom: 1px solid #f6f6f6;
  display: flex;
  align-items: center;
  gap: 5px;
}
.article-list-item:last-child { border-bottom: 0; }
.article-list-item a { color: rgba(25, 23, 23, 1); }
.article-list-item a:hover { color: rgba(0, 86, 214, 1); text-decoration: none; }

.icon-star { color: rgba(0, 86, 214, 1); font-size: 16px; }

/***** Section pages *****/
/* .section-container / .section-content — same pattern as category pages.
   .section-list renders child sub-sections as chevron-right rows.
   The article list is replaced by the custom .section-article-cards in the
   section_page.hbs template (see custom additions CSS further below). */
.section-container { display: flex; justify-content: flex-end; }
.section-content { flex: 1; max-width: 100%; }
@media (min-width: 1024px) { .section-content { flex: 0 0 80%; } }
.section-list { margin: 32px 0; }

.section-list-item {
  border-bottom: 1px solid #ededed;
  font-size: 16px;
  padding: 14px 0;
}
.section-list-item:first-child { border-top: 1px solid #ededed; }
.section-list-item a {
  align-items: center;
  color: rgba(25, 23, 23, 1);
  display: flex;
  justify-content: space-between;
  font-weight: 500;
}
.section-list-item a:hover { color: rgba(0, 86, 214, 1); text-decoration: none; }

.see-all-sections-trigger { cursor: pointer; display: block; padding: 14px; text-align: center; }
.see-all-sections-trigger[aria-hidden=true] { display: none; }

/***** Article *****/
/* The main article card: white background, 16px border-radius, generous
   padding that grows on wider screens (28px → 36px → 44px).
   .article-container is the two-column flex wrapper (sidebar + article).
   .article-header is a flex column that switches to row on ≥768px so the
   subscribe button sits at the top-right of the author block.
   .article-meta-bar shows date + read-time side by side with a "·" separator
   (read-time is injected by JS and starts display:none). */
.article {
  flex: 1 0 auto;
  background: #fff;
  border-radius: 12px;
  border: 1px solid #ededed;
  padding: 28px 24px 40px;
}
@media (min-width: 768px) {
  .article { padding: 36px 36px 44px; }
}
@media (min-width: 1024px) {
  .article { flex: 1 1 auto; min-width: 0; padding: 44px 52px 52px; }
}
.article-container { display: flex; flex-direction: column; gap: 24px; padding: 24px 0 48px; }
@media (min-width: 1024px) { .article-container { flex-direction: row; align-items: flex-start; gap: 32px; } }

.article-header {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 16px;
  margin-top: 24px;
}
@media (min-width: 768px) { .article-header { flex-direction: row; margin-top: 0; } }
.article-avatar { margin-right: 10px; }
.article-author { margin-bottom: 4px; }
/* No top margin on the article's first block, so the body sits snugly under
   the header/meta instead of stacking another margin on top of it. */
.article-body > :first-child { margin-top: 0; }
.article-title {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.3;
  color: rgba(25, 23, 23, 1);
}
@media (min-width: 768px) { .article-title { flex-basis: 100%; } }
.article-title .icon-lock { position: relative; left: -5px; vertical-align: baseline; }
.article [role=button] { flex-shrink: 0; width: 100%; }
@media (min-width: 768px) { .article [role=button] { width: auto; } }
.article-info { max-width: 100%; }
.article-meta { display: inline-block; vertical-align: middle; }

.article-meta-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.article-updated-info {
  font-size: 14px;
  color: #939393;
}
.article-read-time {
  font-size: 14px;
  color: #939393;
  display: none; /* shown by JS once calculated */
}
.article-read-time::before {
  content: "·";
  margin-right: 8px;
  opacity: 0.5;
}

.article-body {
  display: flow-root;
  font-size: 16px;
  line-height: 1.75;
  color: rgba(25, 23, 23, 1);
}
.article-body a { color: rgba(0, 86, 214, 1); text-decoration: underline; }
.article-body a:visited { color: rgba(0, 86, 214, 1); }
.article-body a:hover, .article-body a:active, .article-body a:focus { color: rgba(0, 75, 187, 1); }
.article-body img { height: auto; max-width: 100%; border-radius: 8px; }
.article-body p > img.image-style-align-left { float: left; margin: 8px 20px 6px 0; }
.article-body p > img.image-style-align-right { float: right; margin: 8px 0 6px 20px; }
.article-body p > img.image-style-block-align-right { margin-left: auto; margin-right: 0; }
.article-body p > img.image-style-block-align-left { margin-left: 0; margin-right: auto; }
.article-body figure.image { display: table; margin: 0 auto; }
.article-body figure.image > img { display: block; width: 100%; }
.article-body figure.image.image-style-align-left { float: left; margin: 8px 20px 6px 0; }
.article-body figure.image.image-style-align-right { float: right; margin: 8px 0 6px 20px; }
.article-body figure.image.image-style-block-align-right { margin-left: auto; margin-right: 0; }
.article-body figure.image.image-style-block-align-left { margin-left: 0; margin-right: auto; }
.article-body figcaption {
  padding: 8px 12px;
  font-size: 12px;
  text-align: center;
  color: #707070;
  background-color: #ededed;
  border-radius: 0 0 8px 8px;
}
.article-body ul, .article-body ol {
  padding-left: 20px;
  list-style-position: outside;
  margin: 20px 0 20px 20px;
}
[dir=rtl] .article-body ul, [dir=rtl] .article-body ol { padding-right: 20px; padding-left: 0; margin-left: 0; margin-right: 20px; }
.article-body ul > ul, .article-body ol > ol, .article-body ol > ul, .article-body ul > ol,
.article-body li > ul, .article-body li > ol { margin: 0; }
.article-body ul { list-style-type: disc; }
.article-body :not(pre) > code {
  background: #f6f6f6;
  border: 1px solid #ededed;
  border-radius: 6px;
  padding: 2px 6px;
  margin: 0 2px;
  font-size: 14px;
}
.article-body pre {
  background: #f6f6f6;
  border: 1px solid #ededed;
  border-radius: 8px;
  padding: 16px 20px;
  overflow: auto;
  white-space: pre;
  font-size: 14px;
}
.article-body blockquote {
  border-left: 3px solid rgba(0, 86, 214, 1);
  color: #707070;
  font-style: italic;
  padding: 4px 16px;
  margin: 20px 0;
  background: rgba(0,86,214,0.04);
  border-radius: 0 6px 6px 0;
}
.article-body > p:last-child { margin-bottom: 0; }

.article-content { line-height: 1.75; margin: 0 0 40px; word-wrap: break-word; }

.article-footer {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
}
.article-comment-count { color: #707070; }
.article-comment-count:hover { text-decoration: none; }
.article-comment-count-icon { vertical-align: middle; color: rgba(0, 86, 214, 1); width: 18px; height: 18px; }

/* Article sidebar: card-style (border, radius 12px) white panel.
   On desktop (≥1024px): fixed 220px wide, sticky.
   `top: 88px` here accounts for a sticky header; the custom additions
   section overrides this to `top: 40px !important` since our header
   is non-sticky and we only need to clear the tab-nav bar. */
.article-sidebar {
  /* transparent layout container — the visible card is .article-toc, which JS
     hides when there are no headings, so no empty box is left behind. */
  flex: 1 0 auto;
  margin-bottom: 0;
}
@media (min-width: 1024px) {
  .article-sidebar {
    flex: 0 0 220px;
    max-width: 220px;
    height: auto;
    position: sticky;
    top: 88px;         /* clears the sticky header */
    align-self: flex-start;
  }
}

.article-relatives {
  border-top: 1px solid #ededed;
  display: flex;
  flex-direction: column;
  padding: 24px 0;
  gap: 24px;
}
@media (min-width: 768px) { .article-relatives { flex-direction: row; gap: 0; } }
.article-relatives > * { flex: 1 0 50%; min-width: 50%; overflow-wrap: break-word; margin-right: 0; }
.article-relatives > *:last-child { padding: 0; }
@media (min-width: 768px) { .article-relatives > * { padding-right: 24px; } }

.article-votes {
  border-top: 1px solid #ededed;
  padding: 32px 0;
  text-align: center;
  background: #fbfbfb;
  border-radius: 12px;
  margin: 24px 0;
  padding: 28px 24px;
  border: 1px solid #ededed;
}
.article-votes-question {
  display: block;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 16px;
  color: rgba(25, 23, 23, 1);
}
.article-vote {
  margin: 8px 6px;
  min-width: 100px;
  width: auto;
  border-radius: 8px;
}

.article-more-questions { margin: 12px 0 20px; text-align: center; }
.article-more-questions a { color: rgba(0, 86, 214, 1); text-decoration: underline; }
.article-more-questions a:visited { color: rgba(0, 86, 214, 1); }
.article-more-questions a:hover, .article-more-questions a:active, .article-more-questions a:focus { color: rgba(0, 75, 187, 1); }

/* Replaced by floating back-to-top button */
.article-return-to-top { display: none; }

.article td > p:first-child, .article th > p:first-child { margin-top: 0; }
.article td > p:last-child, .article th > p:last-child { margin-bottom: 0; }

/***** Collapsible sidebar *****/
/* Pattern used on article page (article list), search page (filters), and
   request detail (ticket details).  On mobile (<1024px) the toggle button
   is shown (display:flex) and the body is hidden by default.  On desktop
   (≥1024px) the toggle is hidden and the body always shows (display:block). */
.collapsible-sidebar { border: 0; }
.collapsible-sidebar-toggle {
  background: none;
  border: 0;
  cursor: pointer;
  display: none;
  padding: 16px 0;
  width: 100%;
  text-align: left;
  color: rgba(25, 23, 23, 1);
  font-weight: 600;
  font-size: 14px;
  align-items: center;
  gap: 8px;
}
@media (max-width: 1023px) { .collapsible-sidebar-toggle { display: flex; } }
.collapsible-sidebar-toggle-icon { flex-shrink: 0; }
.collapsible-sidebar-toggle .x-icon { display: none; }
.collapsible-sidebar[aria-expanded=true] .collapsible-sidebar-toggle .chevron-icon { display: none; }
.collapsible-sidebar[aria-expanded=true] .collapsible-sidebar-toggle .x-icon { display: block; }

.collapsible-sidebar-title {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #707070;
  margin-bottom: 12px;
  padding-top: 4px;
}

.collapsible-sidebar-body { display: none; }
.collapsible-sidebar[aria-expanded=true] .collapsible-sidebar-body { display: block; }
@media (min-width: 1024px) {
  .collapsible-sidebar-title { display: block; }
  .collapsible-sidebar-body { display: block; }
}

.sidenav-title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #707070;
  margin-bottom: 12px;
  display: none;
}
@media (min-width: 1024px) { .sidenav-title { display: block; } }

.sidenav-item {
  display: block;
  margin-top: 0;
  margin-bottom: 0;
  padding: 7px 14px;
  border-radius: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
  color: #454545;
  transition: background 0.12s ease, color 0.12s ease;
}
.sidenav-item:hover { background: #f6f6f6; color: rgba(0, 86, 214, 1); text-decoration: none; }
.sidenav-item.current-article {
  background: rgba(0,86,214,0.08);
  color: rgba(0, 86, 214, 1);
  font-weight: 600;
}

.recent-articles li, .related-articles li { margin-bottom: 12px; }

/***** Attachments *****/
/* File attachment list in article bodies.
   The paperclip icon (.attachment-icon) is absolutely positioned to the left
   of each item; padding-left: 20px on the <li> creates the indent for it. */
.attachments .attachment-item { padding-left: 20px; position: relative; margin-bottom: 10px; }
.attachments .attachment-item:last-child { margin-bottom: 0; }
.attachments .attachment-item .attachment-icon { color: rgba(25, 23, 23, 1); left: 0; position: absolute; top: 5px; }
[dir=rtl] .attachments .attachment-item { padding-left: 0; padding-right: 20px; }
[dir=rtl] .attachments .attachment-item .attachment-icon { left: auto; right: 0; }
.upload-dropzone span { color: #707070; }

/***** Social share *****/
/* Row of social share icon buttons (Twitter/X, LinkedIn, etc.).
   JS overrides the default anchor behaviour to open a 500×500 popup. */
.share { padding: 0; white-space: nowrap; }
.share li, .share a { display: inline-block; }
.share li { height: 28px; width: 28px; }
.share a { color: #707070; }
.share a:hover { text-decoration: none; color: rgba(0, 86, 214, 1); }
.share a svg { height: 18px; width: 18px; display: block; }

/***** Comments *****/
/* Comment list: each .comment is bordered below (no top border — top border is
   on the .comment-overview header).  Comment author block uses flex with
   align-items: flex-end so the timestamp aligns to the name baseline.
   Request pages use !important overrides to left-align instead of space-between.
   .comment-body renders Zendesk rich-text HTML with the same body typography
   rules as .article-body (links, code, blockquote, images, lists). */
.comment { border-bottom: 1px solid #ededed; padding: 24px 0; }
.comment-heading, .recent-articles-title, .related-articles-title {
  margin-bottom: 6px;
  margin-top: 0;
  font-size: 18px;
  font-weight: 600;
}
.comment-overview { border-bottom: 1px solid #ededed; border-top: 1px solid #ededed; padding: 20px 0; }
.comment-overview p { margin-top: 0; }
.comment-callout { color: #707070; display: inline-block; font-size: 14px; margin-bottom: 0; }
.comment-callout a { color: rgba(0, 86, 214, 1); text-decoration: underline; }
.comment-callout a:visited { color: rgba(0, 86, 214, 1); }
.comment-callout a:hover, .comment-callout a:active, .comment-callout a:focus { color: rgba(0, 75, 187, 1); }
.comment-sorter { display: inline-block; float: right; }
.comment-sorter .dropdown-toggle { color: #707070; font-size: 14px; }
[dir=rtl] .comment-sorter { float: left; }
.comment-wrapper { display: flex; position: relative; }
.comment-wrapper.comment-official { border: 1px solid rgba(0, 86, 214, 1); border-radius: 8px; padding: 40px 20px 20px; }
@media (min-width: 768px) { .comment-wrapper.comment-official { padding-top: 20px; } }
.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; } }
/* Request page: keep comment author name on the LEFT, not space-between */
.request-main .comment-author,
.request-container .comment-author {
  justify-content: flex-start !important;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 10px;
}
.comment-avatar { margin-right: 10px; }
[dir=rtl] .comment-avatar { margin-left: 10px; margin-right: 0; }
.comment-meta { flex: 1 1 auto; }
.comment-labels { flex-basis: 100%; }
@media (min-width: 768px) { .comment-labels { flex-basis: auto; } }
.comment .status-label:not(.status-label-official) { margin-top: 10px; }
@media (min-width: 768px) { .comment .status-label:not(.status-label-official) { margin-top: 0; } }
.comment-form { display: flex; padding-top: 28px; 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: rgba(0, 86, 214, 1); }
.comment-body {
  -moz-hyphens: auto; -ms-hyphens: auto; -webkit-hyphens: auto;
  word-break: break-word; word-wrap: break-word; display: flow-root;
  font-family: 'Inter', 'Proxima Nova', 'Mulish', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; line-height: 1.65; overflow-x: auto;
}
.comment-body a { color: rgba(0, 86, 214, 1); text-decoration: underline; }
.comment-body a:visited { color: rgba(0, 86, 214, 1); }
.comment-body a:hover, .comment-body a:active, .comment-body a:focus { color: rgba(0, 75, 187, 1); }
.comment-body img { height: auto; max-width: 100%; border-radius: 6px; }
.comment-body p > img.image-style-align-left { float: left; margin: 8px 20px 6px 0; }
.comment-body p > img.image-style-align-right { float: right; margin: 8px 0 6px 20px; }
.comment-body p > img.image-style-block-align-right { margin-left: auto; margin-right: 0; }
.comment-body p > img.image-style-block-align-left { margin-left: 0; margin-right: auto; }
.comment-body figure.image { display: table; margin: 0 auto; }
.comment-body figure.image > img { display: block; width: 100%; }
.comment-body figure.image.image-style-align-left { float: left; margin: 8px 20px 6px 0; }
.comment-body figure.image.image-style-align-right { float: right; margin: 8px 0 6px 20px; }
.comment-body figure.image.image-style-block-align-right { margin-left: auto; margin-right: 0; }
.comment-body figure.image.image-style-block-align-left { margin-left: 0; margin-right: auto; }
.comment-body figcaption {
  padding: 8px 0; font-size: 12px; text-align: center;
  background-color: #ededed;
}
.comment-body ul, .comment-body ol { padding-left: 20px; list-style-position: outside; margin: 20px 0 20px 20px; }
[dir=rtl] .comment-body ul, [dir=rtl] .comment-body ol { padding-right: 20px; padding-left: 0; margin-left: 0; margin-right: 20px; }
.comment-body ul > ul, .comment-body ol > ol, .comment-body ol > ul, .comment-body ul > ol,
.comment-body li > ul, .comment-body li > ol { margin: 0; }
.comment-body ul { list-style-type: disc; }
.comment-body :not(pre) > code { background: #f6f6f6; border: 1px solid #ededed; border-radius: 4px; padding: 2px 5px; margin: 0 2px; }
.comment-body pre { background: #f6f6f6; border: 1px solid #ededed; border-radius: 8px; padding: 14px 18px; overflow: auto; white-space: pre; }
.comment-body blockquote { border-left: 3px solid rgba(0, 86, 214, 1); color: #707070; font-style: italic; padding: 4px 16px; margin: 16px 0; }
.comment-mark-as-solved { display: inline-block; }

/***** Vote *****/
/* Up/down vote controls used on article footers and community comments.
   The up-vote SVG is flipped vertically via `transform: scale(1,-1)`.
   `.vote-voted` adds brand colour to the selected vote button. */
.vote { display: flex; flex-direction: column; text-align: center; }
.vote a:active, .vote a:hover, .vote a:focus { text-decoration: none; }
.vote-sum { color: #707070; display: block; margin: 4px 0; }
[dir=rtl] .vote-sum { direction: ltr; unicode-bidi: bidi-override; }
.vote-up svg { transform: scale(1, -1); }
.vote-up:hover, .vote-down:hover { color: rgba(0, 86, 214, 1); }
.vote-up, .vote-down {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-color: transparent; border: none; color: #707070;
  cursor: pointer; min-height: 38px; min-width: 38px;
  display: flex; align-items: center; justify-content: center;
}
.vote-voted { color: rgba(0, 86, 214, 1); }
.vote-voted:hover { color: #0041a1; }

/***** Actions *****/
/* The gear-icon settings menu (edit/delete/flag) shown on comments.
   The button container uses flex + centering; hover adds a muted background. */
.actions { text-align: center; flex-shrink: 0; }
.actions button {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-color: transparent; border: none; cursor: pointer;
  min-height: 38px; min-width: 38px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px;
}
.actions button:hover { background-color: #f6f6f6; }

/***** Meta / badges *****/
/* .meta-group: a flex row of small metadata items (date, author, etc.).
   .meta-data: 12px muted text for secondary information.
   .status-label: pill-shaped uppercase badge (e.g. "Pending Approval").
   .community-badge-title / achievement: inline badge chips and icon images. */
.meta-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.meta-group-opposite { justify-content: flex-end; }
.meta-data { color: #707070; font-size: 12px; }

.status-label {
  background-color: #f6f6f6;
  border-radius: 12px;
  color: #454545;
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.status-label-official { background-color: rgba(0, 86, 214, 1); color: rgba(255, 255, 255, 1); }
.status-label-pending-moderation { background-color: #fff9e5; color: #856500; }
.escalation-badge { background-color: #f6f6f6; color: rgba(0, 86, 214, 1); }

.community-badge { display: inline-flex; align-items: center; }
.community-badge-title {
  background: rgba(0,86,214,0.08);
  color: rgba(0, 86, 214, 1);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 8px;
}
.community-badge-achievement img { height: 24px; width: 24px; }
.community-badge-achievements-rest { font-size: 12px; color: #707070; }
.community-badge-titles { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; padding: 0; }
.community-badge-achievements { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; padding: 0; }

/***** Notification *****/
/* Alert banners shown above forms (success, error, inline info).
   .notification-error is used below form fields as a small red validation
   message — NOT as a banner (no background, just red text, 12px).
   NOTE: The custom additions suppress `.notification-inline[aria-hidden="true"]`
   which Zendesk renders as an empty blue bar on the CC field — see bottom. */
.notification { padding: 12px 16px; border-radius: 8px; margin-bottom: 20px; font-size: 14px; }
.notification-success { background: #e9f8f6; color: #004e50; border: 1px solid #bbe7e9; }
.notification-error { color: #ab0d1f; font-size: 12px; margin-top: 4px; }
.notification-inline { background: #e9f2ff; color: #0041a1; border: 1px solid #afcfff; }

/***** Dropdowns *****/
/* All dropdown menus (sort, comment sorter, user nav, language picker).
   The menu is hidden by default (display:none) and shown when
   `.dropdown-toggle[aria-expanded=true]` is present (toggled by the Dropdown
   JS class).  Overflow repositioning (end/top) is also handled by the JS class.
   `aria-checked=true` on a menu item adds a brand-tint background (active filter).
   A special rule strips form chrome from `.dropdown-menu form` because
   {{change_password}} renders a <form> inside the user dropdown. */
.dropdown { position: relative; display: inline-block; }
.dropdown-toggle { cursor: pointer; }
.dropdown-toggle .dropdown-chevron-icon { vertical-align: middle; margin-left: 4px; }
.dropdown-menu {
  background-color: #fff;
  border: 1px solid #ededed;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  display: none;
  min-width: 160px;
  padding: 6px;
  position: absolute;
  top: calc(100% + 6px);
  white-space: nowrap;
  z-index: 200;
}
.dropdown-toggle[aria-expanded=true] + .dropdown-menu,
.dropdown-toggle[aria-expanded=true] ~ .dropdown-menu { display: block; }
.dropdown-menu a, .dropdown-menu button {
  border-radius: 6px;
  color: rgba(25, 23, 23, 1);
  cursor: pointer;
  display: block;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 12px;
  text-align: left;
  white-space: nowrap;
  width: 100%;
  background: none;
  border: none;
  text-decoration: none;
}
.dropdown-menu a:hover, .dropdown-menu button:hover { background-color: #f6f6f6; text-decoration: none; color: rgba(25, 23, 23, 1); }
/* Selected/active item — brand tint background so it reads as distinct from hover */
.dropdown-menu a[aria-checked=true] {
  color: rgba(0, 86, 214, 1);
  font-weight: 600;
  background-color: rgba(0, 86, 214, 0.06);
}
/* Fix hover-over-selected collision: keep brand colour, deepen tint */
.dropdown-menu a[aria-checked=true]:hover {
  background-color: rgba(0, 86, 214, 0.12);
  color: rgba(0, 86, 214, 1);
  text-decoration: none;
}
.dropdown-menu .separator { border-top: 1px solid #ededed; margin: 4px 0; padding: 0; height: 0; display: block; }
/* Fix gray bar at bottom: the {{change_password}} helper renders a <form> element.
   Strip all default browser chrome from any form inside the dropdown. */
.dropdown-menu form { margin: 0; padding: 0; background: none; border: none; }
.dropdown-menu-end { right: 0; left: auto; }
.dropdown-menu-top { top: auto; bottom: calc(100% + 6px); }

/***** Search results *****/
/* NOTE: the old .search-results-hero / .search-results-bar (a page-level pill
   search bar) was REMOVED when search moved into the global sticky header —
   Zendesk pre-fills every {{search}} input with the current query on this page,
   so the header search arrives pre-filled. Only the results layout remains. */

.search-results {
  display: flex;
  gap: 40px;
  flex-direction: column;
}
@media (min-width: 768px) { .search-results { flex-direction: row; } }

.search-results-sidebar {
  flex: 0 0 220px;
  max-width: 220px;
}
@media (max-width: 767px) { .search-results-sidebar { max-width: 100%; } }

.search-results-column { flex: 1; min-width: 0; }

.search-results-subheading {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 24px;
  color: rgba(25, 23, 23, 1);
}

.search-results-list { list-style: none; padding: 0; margin: 0; }
.search-results-list > li {
  border-bottom: 1px solid #ededed;
  padding: 24px 0;
}
.search-results-list > li:first-child { padding-top: 0; }
.search-results-list > li:last-child { border-bottom: 0; }

.search-result-title-container { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.search-result-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 6px;
}
.search-result-title a { color: rgba(0, 86, 214, 1); }
.search-result-title a:hover { text-decoration: underline; }
.search-result-icons { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.search-result-meta-container { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin-bottom: 8px; }
.search-result-breadcrumbs { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; }
.search-result-breadcrumbs li { font-size: 12px; color: #707070; }
.search-result-breadcrumbs li + li::before { content: " / "; margin: 0 4px; color: #d0d0d0; }
.search-result-breadcrumbs a { color: #707070; }
.search-result-description { font-size: 14px; color: #454545; margin: 0; line-height: 1.6; }
.search-result-votes, .search-result-meta-count {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #707070;
}
.search-result-votes-icon, .search-result-meta-count-icon { width: 14px; height: 14px; }

.no-results { text-align: center; padding: 60px 20px; }
.no-results .headline { font-size: 18px; font-weight: 600; margin: 20px 0 8px; }
.no-results .action-prompt { color: #707070; font-size: 14px; margin: 6px 0; }
.no-results svg { opacity: 0.5; }

.filters-in-section { margin-bottom: 28px; }
.multibrand-filter-list { list-style: none; padding: 0; margin: 0; }
.multibrand-filter-list--collapsed .sidenav-item:nth-child(n+7) { display: none; }
.see-all-filters {
  background: none; border: none; cursor: pointer;
  color: rgba(0, 86, 214, 1); font-size: 14px; font-weight: 500;
  padding: 6px 0; text-decoration: underline;
}
.see-all-filters[aria-hidden=true] { display: none; }
.sidenav-tag .content-tag {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(0,86,214,0.08); border-radius: 12px; padding: 3px 10px 3px 12px;
}
.sidenav-tag .content-tag .label { font-size: 14px; color: rgba(0, 86, 214, 1); font-weight: 500; }
.sidenav-tag .content-tag a { color: #707070; display: inline-flex; align-items: center; }
.sidenav-subitem { font-size: 14px; }
.filter-name { color: rgba(25, 23, 23, 1); }
.doc-count { color: #707070; }

/***** Community *****/
/* Community-specific pages (topics, post detail, contributions).
   .community-follow: the follow/unfollow split button with follower count.
   .striped-list / .striped-list-item: the post listing on topic pages. */
.community-hero { background-image: url(/hc/theming_assets/01KPBY4FNTN70YY2E1SN2N68G7); margin-bottom: 12px; }
.community-footer { padding-top: 48px; text-align: center; }
.community-footer-title { font-size: 16px; font-weight: 600; margin-bottom: 18px; }
.community-featured-posts .title { font-size: 18px; font-weight: 600; }
.community-featured-posts, .community-activity { padding-top: 40px; width: 100%; }
.community-header { margin-bottom: 28px; }
.community-header .title { margin-bottom: 0; font-size: 16px; }
.post-to-community { margin-top: 10px; }
@media (min-width: 768px) { .post-to-community { margin: 0; } }
.topics { max-width: none; width: 100%; }
.topics-item .meta-group {
  justify-content: flex-start;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #eeeeee;
  gap: 12px;
  flex-wrap: nowrap;
}
.topic-header { border-bottom: 1px solid #ededed; font-size: 14px; }
@media (min-width: 768px) { .topic-header { padding-bottom: 10px; } }
.topic-header .dropdown { display: block; border-top: 1px solid #ededed; padding: 10px 0; }
@media (min-width: 768px) { .topic-header .dropdown { border-top: 0; display: inline-block; margin-right: 20px; padding: 0; } }
.no-posts-with-filter { margin-top: 20px; margin-bottom: 20px; }
.community-follow { margin-bottom: 10px; width: 100%; }
@media (min-width: 768px) { .community-follow { margin-bottom: 0; width: auto; } }
.community-follow button { line-height: 30px; padding: 0 10px 0 15px; position: relative; width: 100%; }
@media (min-width: 768px) { .community-follow button { width: auto; } }
.community-follow button:hover { background-color: rgba(0, 86, 214, 1); }
.community-follow button:hover::after, .community-follow button:focus::after { border-color: rgba(255, 255, 255, 1); color: rgba(255, 255, 255, 1); }
.community-follow button[data-selected=true] { background-color: rgba(0, 86, 214, 1); color: rgba(255, 255, 255, 1); }
.community-follow button[data-selected=true]::after { border-left: 1px solid rgba(255, 255, 255, 1); color: rgba(255, 255, 255, 1); }
.community-follow button[data-selected=true]:hover { background-color: #0041a1; border-color: #0041a1; }
.community-follow button::after {
  border-left: 1px solid rgba(0, 86, 214, 1); content: attr(data-follower-count); color: rgba(0, 86, 214, 1);
  display: inline-block; font-family: 'Inter', 'Proxima Nova', 'Mulish', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; margin-left: 15px; padding-left: 10px;
  position: absolute; right: 10px;
}
@media (min-width: 768px) { .community-follow button::after { position: static; } }
[dir=rtl] .community-follow button::after { border-left: 0; border-right: 1px solid rgba(0, 86, 214, 1); margin: 0 10px 0 0; padding: 0 10px 0 0; }

/***** Striped list *****/
/* Used for community post listings.  Each row is a flex item with the post
   title + description on the left and the vote/comment count column on the right. */
.striped-list { padding: 0; }
.striped-list-item {
  align-items: flex-start;
  border-bottom: 1px solid #ededed;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 18px 0;
}
@media (min-width: 768px) { .striped-list-item { align-items: center; flex-direction: row; } }
.striped-list-info { flex: 2; }
.striped-list-title { color: rgba(0, 86, 214, 1); margin-bottom: 8px; margin-right: 5px; }
.striped-list-title:hover, .striped-list-title:focus, .striped-list-title:active { text-decoration: underline; }
.striped-list-meta { flex: 1; padding: 0; }
@media (min-width: 768px) { .striped-list-meta { text-align: right; padding: 0 0 0 20px; } }
[dir=rtl] .striped-list-meta { text-align: left; padding: 0 20px 0 0; }

/***** Pagination *****/
/* DESIGN NOTE: The original Copenhagen pagination uses flex-based layout,
   which causes the nav arrows to appear in unexpected order in some browsers
   depending on how Zendesk renders the {{pagination}} helper markup.
   We use `display: block; text-align: center` instead — this approach is
   robust against markup order changes and doesn't require knowing whether
   prev/next links appear before or after the page number list.
   `display: inline-flex !important` on individual links/buttons aligns
   their text vertically despite the inline-block context.
   See also: the final "guarantee" rules in the custom additions section. */
/* text-align centering avoids all flexbox ordering issues */
.pagination {
  display: block;
  text-align: center;
  margin: 40px 0;
  padding: 0;
  list-style: none;
}
.pagination ul { display: block; text-align: center; list-style: none; padding: 0; margin: 0; }
.pagination li { display: inline-block; }
.pagination-next-link, .pagination-prev-link, .pagination-first-link, .pagination-last-link,
.pagination a {
  font-size: 14px;
  font-weight: 500;
  padding: 0 16px;
  border-radius: 8px;
  display: inline-flex !important;
  align-items: center;
  width: auto !important;
  max-width: none !important;
  margin: 4px;
}
.pagination-page-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 8px; font-size: 14px; font-weight: 500;
  color: rgba(25, 23, 23, 1); border: 1.5px solid #ededed; text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.pagination-page-link:hover { background: #f6f6f6; border-color: #d0d0d0; text-decoration: none; }
.pagination-current-page {
  background-color: rgba(0, 86, 214, 1); color: rgba(255, 255, 255, 1); border-color: rgba(0, 86, 214, 1);
}

/***** Requests *****/
/* Base layout for the request (ticket) detail page.
   .request-container uses a single-column grid on mobile, two-column on ≥1024px
   (main comment thread + sidebar).  Further overrides appear in the custom
   additions section below. */
.request-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.request-header h1 { flex: 1; }
.request-container {}
.request-sidebar { border: 1px solid #ededed; border-radius: 12px; padding: 20px; }
.request-sidebar-title { font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #707070; margin-bottom: 12px; }

/***** Subscriptions page *****/
/* Subscriptions / following page controls.
   .requests-table-toolbar: flex row for the status filter + org filter selects. */
.subscriptions-subscribe { display: inline-block; }
.requests-table-toolbar { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.requests-table-toolbar .organization-subscribe { display: inline-block; }

/***** Content tags *****/
/* Pill-shaped label list shown at the bottom of articles that have been
   tagged with content tags in Guide admin.  Each tag links to a filtered
   search results page via `{{link "search_result" content_tag_id=id}}`. */
.content-tags { margin-top: 24px; }
.content-tags p { font-size: 14px; color: #707070; margin-bottom: 8px; }
.content-tag-list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; }
.content-tag-item {
  background: #f6f6f6; border-radius: 12px; padding: 4px 12px;
  font-size: 12px; font-weight: 500;
  transition: background 0.15s ease;
}
.content-tag-item:hover { background: rgba(0,86,214,0.1); }
.content-tag-item a { color: rgba(25, 23, 23, 1); }
.content-tag-item a:hover { color: rgba(0, 86, 214, 1); text-decoration: none; }

/***** Generative answers *****/
/* Space above the AI-generated answer block (Zendesk AI add-on).
   The block itself is rendered by the {{generative_answers}} helper;
   we only provide the bottom margin to separate it from the results heading. */
.generative-answers { margin-bottom: 24px; }

/***** Collapsible nav (community) *****/
/* Mobile-only toggle for community nav lists (topic navigation).
   Hidden on ≥1024px (the nav list is always visible at that breakpoint). */
.collapsible-nav-toggle {
  background: none; border: 0; cursor: pointer; width: 100%;
  text-align: left; padding: 12px 0; font-weight: 600;
  display: flex; align-items: center; gap: 8px;
}
/* Hide the ∨/× toggle on desktop — the nav list is always visible there */
@media (min-width: 1024px) { .collapsible-nav-toggle { display: none; } }
.collapsible-nav-body { display: none; }
.collapsible-nav[aria-expanded=true] .collapsible-nav-body { display: block; }
@media (min-width: 1024px) { .collapsible-nav-body { display: block; } }

/***** Responsive utilities *****/
/* Override sidebars to full-width on mobile and let the flex/grid containers
   take over.  This replaces the fixed-width values set in the desktop rules. */
@media (max-width: 767px) {
  .article-sidebar { max-width: 100%; }
  .search-results-sidebar { max-width: 100%; }
  .category-content { flex: 1; }
  .section-content { flex: 1; }
}

/***** Focus ring *****/
/* Global 2px solid rgba(0, 86, 214, 1) outline for keyboard-navigable elements.
   Using :focus-visible (not :focus) to avoid showing the ring on mouse click. */
:focus-visible {
  outline: 2px solid rgba(0, 86, 214, 1);
  outline-offset: 2px;
}

/***** Fix 1: Hero search icon positioning *****/
/* The hero search bar on the home page uses an absolutely-positioned .search-icon
   SVG.  Without `position: relative` on the wrapper the icon escapes its container
   and lands in the wrong place.  `width: 100%` ensures the pill stretches to match
   the .hero-inner constraint. */
.hero-search-container {
  position: relative; /* ensures .search-icon absolute-positions inside this */
  width: 100%;
}

/***** Fix 2: Category card overflow *****/
/* The .blocks-list grid can "blow out" when card titles are very long and the
   browser can't shrink flex/grid children below their content width.
   Adding `min-width: 0` to both .blocks-item and .blocks-item-body enables
   truncation.  `overflow: hidden` on .blocks-item clips any content that escapes
   the card border-radius.
   .blocks-item-description is changed from `white-space: nowrap` to a two-line
   clamp so the card stays a consistent height across different description lengths. */
/* Prevent grid blowout — children must be able to shrink */
.blocks-item {
  min-width: 0;
  overflow: hidden;
}
.blocks-item-body {
  min-width: 0; /* critical: allows flex child to shrink below content width */
  overflow: hidden;
}
.blocks-item-description {
  white-space: normal;          /* allow wrapping */
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.blocks-list {
  width: 100%;
}

/***** Fix 3: Profile page *****/
/* The profile header uses the same hero image and gradient as the home page
   hero, creating a consistent brand-colour banner across all full-width headers.
   Zendesk cannot process rgba(0, 86, 214, 1) inside a gradient() function, so we set
   `background-color: rgba(0, 86, 214, 1)` as a fallback for browsers that don't support
   the image, and use pure rgba() values inside the gradient overlay.
   The grid layout (auto 1fr auto) on `.profile-info` places: avatar | name+badges | options button.
   Description and activity stats span all three columns (grid-column: 1 / -1). */
.profile-header {
  background: linear-gradient(160deg, rgba(0,40,120,0.82) 0%, rgba(0,60,180,0.68) 100%),
              url(/hc/theming_assets/01KPBY4F48JFH97KB7CMGWR86E) center/cover no-repeat;
  background-color: rgba(0, 86, 214, 1);
  padding: 32px 0 28px;
  margin-bottom: 0;
}
.profile-header .container {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
@media (min-width: 768px) {
  .profile-header .container { flex-direction: row; align-items: flex-start; gap: 40px; }
}

.profile-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.profile-avatar {
  display: inline-flex;
  position: relative;
}
.profile-avatar .user-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.6);
}
.profile-avatar .icon-agent {
  position: absolute;
  bottom: -2px;
  right: -2px;
  background: rgba(0, 86, 214, 1);
  color: white;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid white;
}

.basic-info .name {
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 8px;
}
.basic-info .name a { color: #fff; }
.basic-info .name a:hover { text-decoration: underline; }

.community-name-and-title-badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 8px;
}

.options {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.profile-private-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.85);
  border-radius: 12px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
}
.profile-private-icon { vertical-align: middle; }
.description {
  color: rgba(255,255,255,0.8);
  font-size: 14px;
  margin: 0;
}

.profile-stats {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.profile-stats-activity {
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}
.profile-stats-counters {
  background: rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 14px 20px;
  flex-direction: column;
  gap: 8px;
  min-width: 180px;
}
@media (min-width: 768px) {
  .profile-stats-counters { flex-shrink: 0; align-self: flex-start; }
}
.stat { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.profile-stats-counters .stat {
  border-bottom: 1px solid rgba(255,255,255,0.12);
  padding-bottom: 8px;
}
.profile-stats-counters .stat:last-child { border-bottom: 0; padding-bottom: 0; }
.stat-label { color: rgba(255,255,255,0.65); font-size: 14px; }
.stat-value { color: #fff; font-weight: 600; font-size: 16px; }
.profile-stats-activity .stat-label { color: rgba(255,255,255,0.6); font-size: 12px; }
.profile-stats-activity .stat-value { color: rgba(255,255,255,0.9); font-size: 14px; font-weight: 500; }

/* Profile nav tabs
   Sticky tab bar just below the profile header.
   `top: 68px` here assumes a sticky header; the custom additions section
   overrides this to `top: 0 !important` because our header is non-sticky. */
.profile-nav {
  background: #fff;
  border-bottom: 1px solid #ededed;
  position: sticky;
  top: 68px;
  z-index: 50;
}
.profile-nav .container { padding-top: 0; padding-bottom: 0; }
.collapsible-nav-list {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 4px;
  overflow-x: auto;
}
.collapsible-nav-list li { flex-shrink: 0; }
.collapsible-nav-list a {
  display: block;
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 500;
  color: #707070;
  border-bottom: 2px solid transparent;
  text-decoration: none;
  transition: color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}
.collapsible-nav-list a:hover { color: rgba(0, 86, 214, 1); text-decoration: none; }
.collapsible-nav-list .current a,
.collapsible-nav-list a[aria-current=page] {
  color: rgba(0, 86, 214, 1);
  border-bottom-color: rgba(0, 86, 214, 1);
  font-weight: 600;
}

/* Profile content sections */
.profile-section {
  margin: 24px 0;
}
.profile-section-header {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid #ededed;
}
.profile-section-title {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
}
.profile-section-description { color: #707070; font-size: 14px; }
.profile-section-sorter { margin-left: auto; }
/* Style the sort dropdown to match the page toolbar filter selects */
.profile-section-sorter .dropdown-toggle {
  font-size: 14px;
  font-family: inherit;
  border: 1px solid #ededed;
  border-radius: 8px;
  padding: 6px 10px;
  background: #fff;
  color: rgba(25, 23, 23, 1);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: normal;
  font-weight: 500;
  transition: border-color 0.15s ease;
}
.profile-section-sorter .dropdown-toggle:hover,
.profile-section-sorter .dropdown-toggle[aria-expanded=true] {
  border-color: rgba(0, 86, 214, 1);
}

/* Activity list */
.profile-activity-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.profile-activity {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 6px 12px;
  padding: 12px 0;
  border-bottom: 1px solid #f6f6f6;
}
.profile-activity:last-child { border-bottom: 0; }
.profile-activity-icon {
  color: rgba(0, 86, 214, 1);
  margin-top: 4px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
/* The contribution block inside an activity must span BOTH grid columns,
   otherwise it lands in the 28px icon column and crushes all text */
.profile-activity .profile-activity-contribution {
  grid-column: 1 / -1;
  display: block;
  padding-left: 40px; /* align with the text column (28px icon + 12px gap) */
}
.profile-activity-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.profile-activity-header .user-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  flex-shrink: 0;
}
.profile-activity-description {
  font-size: 14px;
  color: #707070;
  margin: 0;
}

/* Profile contribution items */
.profile-contribution-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.profile-contribution {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 6px 12px;
  padding: 12px 0;
  border-bottom: 1px solid #f6f6f6;
  align-items: start;
}
.profile-contribution:last-child { border-bottom: 0; }
/* Force nav, body, and meta into column 2 — otherwise grid auto-places them into the 28px icon column */
.profile-contribution > nav,
.profile-contribution > .profile-contribution-body,
.profile-contribution > .meta-group {
  grid-column: 2;
}
.profile-contribution-icon {
  color: rgba(0, 86, 214, 1);
  margin-top: 3px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.profile-activity-contribution,
.profile-contribution-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.profile-contribution-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}
.profile-contribution-title a { color: rgba(0, 86, 214, 1); }
.profile-contribution-title a:hover { text-decoration: underline; }
.profile-contribution-body {
  font-size: 14px;
  color: #454545;
  margin: 6px 0 8px;
  line-height: 1.5;
}
.profile-contribution-breadcrumbs {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0 0 4px;
  flex-wrap: wrap;
}
.profile-contribution-breadcrumbs li { font-size: 12px; color: #939393; }
.profile-contribution-breadcrumbs li + li::before { content: " / "; margin: 0 4px; color: #d0d0d0; }
.profile-contribution-breadcrumbs a { color: #707070; }

/* Badges page */
.profile-badges-items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.profile-badges-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: #fff;
  border: 1px solid #ededed;
  border-radius: 12px;
  padding: 16px;
}
.profile-badges-item-image img { width: 40px; height: 40px; }
.profile-badges-item-title { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.profile-badges-item-description { font-size: 14px; color: #707070; margin: 0; }
.profile-badges-item-metadata { margin-left: auto; flex-shrink: 0; text-align: right; }
.profile-badges-item-metadata-title { font-size: 11px; color: #939393; text-transform: uppercase; letter-spacing: 0.05em; }
.profile-badges-item-metadata-description { font-size: 12px; color: #707070; margin: 4px 0 0; }

/* User profile actions */
.user-profile-actions button { font-size: 14px; }
.no-activity, .private-activity {
  display: block;
  text-align: center;
  color: #707070;
  font-size: 14px;
  padding: 48px 0;
}
.private-activity { display: flex; align-items: center; justify-content: center; gap: 8px; }

/***** Fix 4: Category page — section cards *****/
/* Each section in the category page is displayed as a white card (not a plain
   list).  Cards are 50% wide on ≥768px (calc(50% - 12px) accounts for the 24px
   gap between the two columns).  A brand-colour dot pseudo-element precedes
   the section title for visual accent without requiring an extra HTML element.
   Article list items inside each card use a 4px round dot bullet (::before). */
.section-tree {
  gap: 24px;
}
.section-tree .section {
  background: #fff;
  border: 1px solid #ededed;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 0;
  transition: box-shadow 0.2s ease;
}
.section-tree .section:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.07);
}
@media (min-width: 768px) {
  .section-tree .section {
    flex: 0 0 calc(50% - 12px);
    max-width: calc(50% - 12px);
    margin-right: 0;
  }
}
.section-tree-title {
  border-bottom: none;
  margin-bottom: 16px;
  padding-bottom: 0;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(25, 23, 23, 1);
}
.section-tree-title::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(0, 86, 214, 1);
  flex-shrink: 0;
}
.section-tree .article-list { padding-top: 0; }
.section-tree .article-list-item {
  padding: 8px 0;
  font-size: 14px;
  border-bottom: 1px solid #f6f6f6;
}
.section-tree .article-list-item:last-child { border-bottom: 0; }
.section-tree .article-list-item a {
  color: #454545;
  display: flex;
  align-items: center;
  gap: 8px;
}
.section-tree .article-list-item a::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #d0d0d0;
  flex-shrink: 0;
}
.section-tree .article-list-item a:hover { color: rgba(0, 86, 214, 1); text-decoration: none; }
.section-tree .see-all-articles {
  font-size: 14px;
  font-weight: 600;
  color: rgba(0, 86, 214, 1);
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.section-tree .see-all-articles:hover { text-decoration: none; opacity: 0.8; }

/***** Category hero banner *****/
/* Full-width brand-coloured hero banner used on category landing pages.
   Design: rgba(0, 86, 214, 1) solid background with a pure-CSS linear-gradient overlay
   that adds subtle dark-top and light-bottom shading for visual depth.
   WHY HARDCODED RGBA: Zendesk's template engine substitutes rgba(0, 86, 214, 1) in
   standalone `background-color` declarations but refuses to process it inside
   CSS function arguments (e.g. `gradient(..., rgba(0, 86, 214, 1), ...)`), so all
   gradient stops must use hardcoded rgba() values.
   The breadcrumb and title text colours are overridden to white/translucent
   so they remain legible regardless of which brand colour the admin chooses. */
.category-hero {
  /* Zendesk only processes rgba(0, 86, 214, 1) in standalone properties, not inside gradient() */
  background-color: rgba(0, 86, 214, 1);
  background-image: linear-gradient(135deg, rgba(0,0,0,0.22) 0%, rgba(0,0,0,0.04) 60%, rgba(255,255,255,0.06) 100%);
  padding: 36px 0 32px;
  margin-bottom: 0;
}
/* Breadcrumbs inside the hero: muted white text so the standard breadcrumb
   styles (dark/grey) don't fight the brand-colour background.
   Chevron separators (::before pseudo-element) get the same 65% opacity. */
.category-hero-breadcrumb .breadcrumbs li,
.category-hero-breadcrumb .breadcrumbs li + li::before {
  color: rgba(255,255,255,0.65);
}
.category-hero-breadcrumb .breadcrumbs li a {
  color: rgba(255,255,255,0.85);
}
.category-hero-breadcrumb .breadcrumbs li a:hover { color: #fff; }

/* Hero body: flex row with icon on the left.
   `align-items: flex-start` so a multi-line description doesn't
   vertically re-centre the icon as it grows. */
.category-hero-body {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-top: 16px;
}

/* Category icon container: frosted-glass look via rgba(255,255,255,0.15)
   background, 12px radius, 52×52px.
   `flex-shrink: 0` prevents the icon box from being squeezed when the
   title text is long. `margin-top: 2px` aligns the icon's visual centre
   with the first line of the title text. */
.category-hero-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  background: rgba(255,255,255,0.15);
  border-radius: 12px;
  color: #fff;
  flex-shrink: 0;
  margin-top: 2px;
}

/* Hero title: white, 28px/700 — matches the section hero title size
   for visual consistency across category and section landing pages. */
.category-hero-title {
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 6px;
  line-height: 1.2;
}

/* Hero description: 80% opacity white so it reads as secondary to the title.
   max-width 560px prevents very long descriptions from stretching across the
   full container on wide screens. */
.category-hero-description {
  color: rgba(255,255,255,0.8);
  font-size: 16px;
  margin: 0;
  max-width: 560px;
  line-height: 1.5;
}

/* The stock Copenhagen theme renders a `.container-divider` <hr> between the
   hero and the content below. On hero pages the divider is redundant because
   the hero already provides a clear visual break. Hide it immediately after
   either hero element so the white content area butts up cleanly against the
   brand-colour band. */
.category-hero + .container-divider,
.section-page-hero + .container-divider { display: none; }

/* Inner sub-nav: a thin search-only bar used on category pages.
   `border-bottom` separates it visually from the section list below.
   `.breadcrumbs` are hidden here because breadcrumbs are already in the hero. */
.sub-nav-inner {
  border-bottom: 1px solid #ededed;
  padding: 12px 0;
  margin-bottom: 24px;
}
.sub-nav-inner .breadcrumbs { display: none; }

/***** Section page hero *****/
/* Full-width brand-colour hero banner for section (sub-category) landing pages.
   Mirrors the category hero pattern exactly — same gradient overlay, same
   padding, same breadcrumb and title colours — so the two page types feel
   visually consistent when a user navigates from Category → Section.
   Breadcrumb text is forced white/translucent for legibility on any brand colour.
   The title has a 16px top margin to push it below the breadcrumb row. */
.section-page-hero {
  background-color: rgba(0, 86, 214, 1);
  background-image: linear-gradient(135deg, rgba(0,0,0,0.22) 0%, rgba(0,0,0,0.04) 60%, rgba(255,255,255,0.06) 100%);
  padding: 36px 0 32px;
}
/* Breadcrumbs styled white/translucent inside the coloured hero band */
.section-page-breadcrumb .breadcrumbs li,
.section-page-breadcrumb .breadcrumbs li + li::before {
  color: rgba(255,255,255,0.65);
}
.section-page-breadcrumb .breadcrumbs li a {
  color: rgba(255,255,255,0.85);
}
.section-page-breadcrumb .breadcrumbs li a:hover { color: #fff; }

/* Section title: 28px/700 white — consistent with category hero title */
.section-page-title {
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  margin: 16px 0 6px;
  line-height: 1.2;
}

/* Optional description: only rendered when the Guide admin fills it in.
   80% white opacity makes it clearly secondary to the title.
   560px max-width prevents runaway line lengths on wide displays. */
.section-page-description {
  color: rgba(255,255,255,0.8);
  font-size: 16px;
  margin: 0;
  max-width: 560px;
}

/* Sub-nav bar: contains the scoped search input (left) and optional
   "Follow section" subscribe button (right).  Flex row with space-between
   keeps them at opposite ends.  An early pass of this CSS had the border-bottom
   visible; the CROSS-PAGE CONSISTENCY PASS later overrides it to `none`
   with !important to match the category page sub-nav. */
.sub-nav-section {
  padding: 12px 0;
  margin-bottom: 8px;
  border-bottom: 1px solid #ededed;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
/* Search field: limited to 360px so the subscribe button has room;
   the CROSS-PAGE CONSISTENCY PASS later expands this to 100% width. */
.sub-nav-section .search-container { flex: 1; max-width: 360px; }

/***** Section page article cards *****/
/* FIRST-PASS STYLING: This is the initial card layout added when the article
   list was first redesigned.  The CROSS-PAGE CONSISTENCY PASS (further down)
   supersedes many of these rules with !important to adopt the full white-card
   design (border, border-radius 12px, hover box-shadow).
   Keep these rules in place — the later overrides are additive, not replacements,
   and removing these would leave the cards unstyled in case the cascade changes.

   Layout:
     .section-page-content  — outer container, 48px bottom padding for breathing room
     .section-article-cards — <ul> with flex column, zero gap (cards share dividers)
     .section-article-card  — <li>, border-bottom divider only (no border-radius yet)
     .section-article-card-link — full-card anchor, flex row: icon | body | arrow
     .section-article-card-icon — 32×32px brand-tinted rounded square
     .section-article-card-title — flex: 1, truncation-safe text
     .section-article-card-arrow — trailing chevron, turns brand colour on hover */
.section-page-content {
  /* 32px top clears the blue section hero (the sub-nav search that used to sit
     between them moved into the global header); 48px bottom for breathing room */
  padding: 32px 0 48px;
}
/* <ul> reset: no browser bullets or indentation */
.section-article-cards {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
/* Divider pattern: each card has a bottom border; first card adds a top border
   so the list is framed top and bottom with consistent 1px rules.
   The CROSS-PAGE CONSISTENCY PASS changes these to full white card borders later. */
.section-article-card {
  border-bottom: 1px solid #eeeeee;
}
.section-article-card:first-child { border-top: 1px solid #eeeeee; }

/* The entire card is one <a> — large tap target.
   hover: subtle grey wash + link colour change, no underline (card UI pattern). */
.section-article-card-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 12px;
  color: rgba(25, 23, 23, 1);
  text-decoration: none;
  border-radius: 8px;
  transition: background 0.15s ease, color 0.15s ease;
}
.section-article-card-link:hover {
  background: rgba(0,0,0,0.03);
  color: rgba(0, 86, 214, 1);
  text-decoration: none;
}

/* Brand-tinted document icon box: #e9f2ff background (~10% brand-blue opacity)
   with brand-colour SVG stroke.  The CROSS-PAGE CONSISTENCY PASS upgrades
   this to 36×36px with #e9f2ff background and !important rules. */
.section-article-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: #e9f2ff;
  border-radius: 8px;
  color: rgba(0, 86, 214, 1);
  flex-shrink: 0;
}

/* Title: flex: 1 so it stretches to fill available width between icon and arrow.
   `min-width` is not set here but the CROSS-PAGE CONSISTENCY PASS adds it. */
.section-article-card-title {
  flex: 1;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
}

/* Trailing chevron arrow: muted grey by default, inherits link colour on hover
   through the parent anchor's colour transition. `margin-left: auto` keeps it
   pinned to the right edge when card-body has no flex width set. */
.section-article-card-arrow {
  color: #939393;
  flex-shrink: 0;
  margin-left: auto;
}
.section-article-card-link:hover .section-article-card-arrow { color: rgba(0, 86, 214, 1); }

/***** Fix 5: Article Table of Contents *****/
/* A TOC widget injected by script.js (the `buildTOC` custom function) into
   the `.article-toc` placeholder div in article_page.hbs.
   Design: light grey-blue card (#fbfbfb) with 1px border and 10px radius —
   visually secondary to the article body, clearly a navigation aid.

   Structure:
     .article-toc        — outer card wrapper
     .article-toc-title  — all-caps label ("CONTENTS")
     .article-toc-list   — <ul> of anchor links, one per h2/h3 heading
     li.toc-h3           — sub-heading items, indented and smaller

   Active-link tracking:
     script.js updates the `.is-active` class on scroll using an
     IntersectionObserver.  The active link gets brand colour + a brand-colour
     left border bar to show reading position at a glance.

   The left border technique (2px solid) is used instead of background highlight
   to keep the text alignment clean across h2 and h3 levels. */
.article-toc {
  background: #fff;
  border: 1px solid #ededed;
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 32px;
  margin-top: 8px;
}

/* "CONTENTS" label: all-caps, extra letter-spacing, muted colour — clear
   heading for the navigation widget without competing with article headings. */
.article-toc-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #939393;
  margin: 0 0 10px;
}

/* List reset + compact flex column.  2px gap keeps items tight without
   the list collapsing into an indistinguishable block. */
.article-toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Each TOC link: block layout so the border-left spans the full row.
   12px left padding keeps text clear of the 2px left-border.
   Colour and border both transition so hover and active states feel smooth. */
.article-toc-list li a {
  display: block;
  font-size: 14px;
  color: #454545;
  padding: 4px 0;
  border-left: 2px solid #ededed;
  padding-left: 12px;
  transition: color 0.15s ease, border-color 0.15s ease;
  text-decoration: none;
  line-height: 1.4;
}
.article-toc-list li a:hover {
  color: rgba(0, 86, 214, 1);
  border-left-color: rgba(0, 86, 214, 1);
  text-decoration: none;
}

/* Active state: brand colour text + solid brand border bar.
   font-weight 600 provides additional emphasis for the current section. */
.article-toc-list li a.is-active {
  color: rgba(0, 86, 214, 1);
  border-left-color: rgba(0, 86, 214, 1);
  font-weight: 600;
}

/* H3-level TOC items: indented 24px (vs 12px for h2) to visually communicate
   hierarchy.  Slightly smaller 13px font reinforces the sub-heading relationship. */
.article-toc-list li.toc-h3 a {
  padding-left: 24px;
  font-size: 14px;
}

/***** Back to top button *****/
/* Fixed-position circular button that smoothly fades + slides in after the
   user scrolls past the SHOW_AFTER threshold (script.js, ~300px).
   Clicking scrolls the page back to the top with smooth behaviour.

   Position: bottom: 96px to clear the Zendesk chat bubble widget
             (which sits at ~80px from the bottom by default).
             right: 32px gives comfortable margin from the viewport edge.
   z-index: 200 — above article content and sidebar but below modal overlays.

   Visibility toggling:
     Default state: opacity 0, pointer-events none, translateY(10px).
     When .is-visible is added by JS: opacity 1, pointer-events auto, translateY(0).
     The CSS transition animates both in and out automatically.

   Colour: rgba(0, 86, 214, 1) bg with rgba(255, 255, 255, 1) icon — always legible
           regardless of which brand colour the admin selects.

   Hover: lifts -2px and deepens the shadow for tactile feel.
   Active: drops back to 0 to simulate physical press. */
.back-to-top {
  position: fixed;
  bottom: 96px; /* sits above the Zendesk chat widget */
  right: 32px;
  z-index: 200;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 86, 214, 1);
  color: rgba(255, 255, 255, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.back-to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.back-to-top:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
  transform: translateY(-2px);
}
.back-to-top:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/***** Article reading progress indicator (vertical, right side) *****/
/* A compact reading-progress bar positioned along the right side of the viewport.
   Shows how far through the article the user has scrolled.

   Design decisions:
   - Vertical orientation (narrow 6px × 200px rail) rather than horizontal
     top-of-page bar to avoid interfering with the sticky elements at the top
     and to give a more subtle, secondary feel.
   - Vertically centred (top: 50%, transform: translateY(-50%)) so it reads
     as a sidebar element, not a header or footer element.
   - right: 20px — inset from the viewport edge so it doesn't overlap the
     browser scrollbar on Windows (typically 15-17px wide).
   - z-index: 200 — same layer as the back-to-top button, above page content.
   - pointer-events: none — purely decorative; does not intercept clicks.
   - overflow: hidden on the rail clips the fill bar cleanly at rail boundaries.

   JS interaction (script.js `updateProgress`):
     On scroll (passive listener), JS reads scrollTop / scrollHeight and sets
     .article-progress-fill's height as a percentage.
     NO CSS transition is used so the fill tracks scroll position in real time
     without any visual lag or rubbernecking effect. */

/* Rail: the static grey track */
.article-progress-rail {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 200px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  z-index: 200;
  pointer-events: none;
  overflow: hidden;
}

/* Fill: grows from height 0% → 100% as the user reads down the article.
   Brand colour so the fill is visually connected to the site's primary action
   colour without an explicit label being needed. */
.article-progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  background: rgba(0, 86, 214, 1);
  border-radius: 6px;
  /* No transition: real-time with no lag */
}


/* ============================================================
   WORKSHOP HELP CENTER — DESIGN SYSTEM
   ============================================================
   TOKENS
   ──────
   Colors (Zendesk vars, replaced at render time):
     rgba(0, 86, 214, 1)          Primary blue  (default #0056D6)
     rgba(25, 23, 23, 1)           Body text     (default #262626)
     rgba(0, 86, 214, 1)           Link blue
     rgba(246, 246, 246, 1)     Page bg       (default warm cream)

   Hardcoded palette:
     --border:       #ededed   Dividers, card borders
     --border-sub:   #eeeeee   Subtle row dividers
     --surface:      #fff      Cards, panels
     --surface-alt:  #fbfbfb   Sidebar / toc bg
     --muted:        #707070   Secondary text
     --muted-light:  #939393   Placeholder / arrows

   COMPONENTS (see sections below)
   ────────────────────────────────
     1. Hero banner        .page-hero
     2. Sticky tab nav     .tab-nav
     3. Toolbar            .page-toolbar
     4. Activity card row  .activity-card
     5. Status badges      .status-badge
     6. Empty state        .empty-state
     7. Request thread     .comment / .request-sidebar
     8. Search results     .search-results-list
     9. Error page         .error-page
   ============================================================ */


/* ── 1. HERO BANNER ─────────────────────────────────────────
   Used on: category, section, requests, contributions,
            subscriptions, request (ticket), new-request,
            search results
   ─────────────────────────────────────────────────────────── */
/* Generic `.page-hero` class used across all non-homepage page types.
   The category and section pages each have their own scoped hero classes
   (.category-hero, .section-page-hero) defined above; this generic class
   handles the remaining page types (requests, profile, new-request, etc.)
   where the template outputs a shared `.page-hero` wrapper.

   Consistent treatment across pages:
     - Same gradient overlay pattern as category/section heroes
     - Same breadcrumb white/translucent treatment
     - Slightly reduced padding (32px vs 36px) since these pages don't
       have an icon or as much metadata in the hero area

   .page-hero-eyebrow: optional label/tag above the title (e.g. a status badge).
   .page-hero-badge: frosted-glass pill used for things like ticket status inside the hero. */
.page-hero {
  background-color: rgba(0, 86, 214, 1);
  /* Pure-CSS overlay — no Zendesk vars inside gradient() */
  background-image: linear-gradient(135deg, rgba(0,0,0,0.22) 0%, rgba(0,0,0,0.04) 60%, rgba(255,255,255,0.06) 100%);
  padding: 32px 0 28px;
}
/* Force breadcrumb items white/translucent on the colour background */
.page-hero .breadcrumbs li,
.page-hero .breadcrumbs li + li::before { color: rgba(255,255,255,0.6); }
.page-hero .breadcrumbs li a { color: rgba(255,255,255,0.85); }
.page-hero .breadcrumbs li a:hover { color: #fff; }
.page-hero-eyebrow {
  margin-bottom: 12px;
}
/* Hero title: 26px (slightly smaller than 28px on category/section heroes
   since those pages have more prominent content hierarchy needs). */
.page-hero-title {
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 6px;
  line-height: 1.25;
}
.page-hero-subtitle {
  color: rgba(255,255,255,0.78);
  font-size: 14px;
  margin: 0;
}
/* Frosted-glass pill badge rendered inside the hero (e.g. ticket status).
   rgba(255,255,255,0.18) frosted glass look works on any brand colour. */
.page-hero-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(255,255,255,0.18);
  color: #fff;
  margin-top: 10px;
}


/* ── 2. STICKY TAB NAV ──────────────────────────────────────
   Used on: requests, contributions/subscriptions,
            profile (already styled), request detail
   ─────────────────────────────────────────────────────────── */
/* White sticky tab bar that sits below the hero and above the page content.
   Positioned to clear the sticky header — the CROSS-PAGE CONSISTENCY PASS
   overrides the top offset to var(--ws-header-height) so it tracks the real
   header height (incl. the taller wrapped mobile header).

   Horizontal overflow (overflow-x: auto) allows many tabs to scroll on mobile
   without wrapping.  `flex-shrink: 0` on list items prevents tab squishing.

   Active tab uses a 2px bottom border in brand colour (the underline-tab pattern)
   rather than a background change, keeping the nav visually light.
   Both Zendesk's `.current` class and `[aria-current=page]` attribute trigger
   the active style to handle whichever the template sets. */
.tab-nav {
  background: #fff;
  border-bottom: 1px solid #ededed;
  position: sticky;
  top: 68px; /* overridden to top: 0 !important in the CROSS-PAGE CONSISTENCY PASS */
  z-index: 50;
}
.tab-nav .container { padding-top: 0; padding-bottom: 0; }
.tab-nav .collapsible-nav-list {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 0;
  overflow-x: auto; /* horizontal scroll on mobile */
}
.tab-nav .collapsible-nav-list li { flex-shrink: 0; }
.tab-nav .collapsible-nav-list a {
  display: block;
  padding: 13px 18px;
  font-size: 14px;
  font-weight: 500;
  color: #707070;
  border-bottom: 2px solid transparent; /* placeholder — shows brand colour when active */
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.tab-nav .collapsible-nav-list a:hover { color: rgba(0, 86, 214, 1); text-decoration: none; }
/* Active tab: brand colour text + 2px brand-colour underline.
   `.current` is set by Zendesk's collapsible-nav helper;
   `[aria-current=page]` is set by ARIA-aware templates. */
.tab-nav .collapsible-nav-list .current a,
.tab-nav .collapsible-nav-list a[aria-current=page] {
  color: rgba(0, 86, 214, 1);
  border-bottom-color: rgba(0, 86, 214, 1);
  font-weight: 600;
}


/* ── 3. PAGE TOOLBAR ────────────────────────────────────────
   Search + filter bar used on requests / contributions pages
   ─────────────────────────────────────────────────────────── */
/* Horizontal toolbar between the tab-nav and the content list.
   Flex row that wraps on narrow viewports so the search and filter
   stack vertically on mobile.

   .page-toolbar          — outer flex container with divider border-bottom
   .page-toolbar .search-container — search field (flex: 1, max 340px)
   .page-toolbar-filter   — label + select/button pairing on the right

   The `select` element uses a custom SVG chevron image injected via
   `background` shorthand (data URI) and `-webkit-appearance: none` to
   remove the native browser dropdown arrow and render a consistent look.

   BUTTON VARIANT: When Zendesk renders the status filter as a `<button>`
   (subscriptions page), `.button.request-filter` overrides the select
   arrow background and adjusts padding for inline-flex layout. */
.page-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 16px 0 12px;
  border-bottom: 1px solid #ededed;
  margin-bottom: 4px;
}
/* Search field occupies available space up to 340px */
.page-toolbar .search-container {
  flex: 1;
  min-width: 180px;
  max-width: 340px;
}
.page-toolbar-filter {
  display: flex;
  align-items: center;
  gap: 6px;
}
/* Filter label: muted, medium weight — clearly secondary to the input */
.page-toolbar-filter label {
  font-size: 14px;
  font-weight: 500;
  color: #707070;
  white-space: nowrap;
}
/* Filter select: custom styled with a data-URI chevron SVG.
   `-webkit-appearance: none` removes native OS styling on Safari/Chrome.
   28px right padding creates room for the SVG arrow without text overlap. */
.page-toolbar-filter select,
.request-filter {
  font-size: 14px;
  font-family: inherit;
  border: 1px solid #ededed;
  border-radius: 8px;
  padding: 6px 28px 6px 10px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%236b7280' stroke-linecap='round' d='M3 4.5l2.6 2.6c.2.2.5.2.7 0L9 4.5'/%3E%3C/svg%3E") no-repeat right 8px center;
  -webkit-appearance: none;
  appearance: none;
  color: rgba(25, 23, 23, 1);
  cursor: pointer;
}
/* Focus ring: brand-colour outline instead of OS default */
.page-toolbar-filter select:focus,
.request-filter:focus {
  outline: 2px solid rgba(0, 86, 214, 1);
  outline-offset: 0;
}
/* Button variant: the subscriptions page renders the filter as a <button>
   rather than a <select>.  Override the arrow background and padding so it
   looks like a compact inline-flex button instead of a select dropdown. */
button.request-filter {
  background-image: none;
  background-color: #fff;
  padding: 6px 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
/* ── Requests page search input ──────────────────────────────────────────── */
/* The {{input 'query' type='search' class='requests-search'}} Zendesk helper
   renders a plain <input type="search"> inside a .search-container div.
   Without custom CSS it would look like the native browser search input,
   inconsistent with the rest of the design system.

   Key overrides:
   - height: 40px — matches the toolbar button height
   - padding-left: 36px — creates space for the absolutely-positioned
     `.search-icon` SVG that sits inside .search-container
   - border: 1.5px (slightly heavier than the 1px card borders for emphasis)
   - appearance: none — remove iOS/Safari default input chrome
   - The ::-webkit-search-* pseudo-elements remove the native browser
     clear (×) button and any search decoration that varies by browser */
.requests-search {
  width: 100%;
  height: 40px;
  padding: 0 12px 0 36px; /* 36px left = room for the absolutely-positioned .search-icon */
  border: 1.5px solid #d0d0d0;
  border-radius: 8px;
  background: #fff;
  font-size: 14px;
  color: rgba(25, 23, 23, 1);
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
/* Focus: brand-colour border + soft glow ring for clear keyboard focus state */
.requests-search:focus {
  border-color: rgba(0, 86, 214, 1);
  box-shadow: 0 0 0 3px rgba(0, 86, 214, 0.12);
  outline: none;
}
/* Suppress native browser search field decorations (the × clear button,
   magnifier icon, history dropdown arrow) that vary inconsistently between
   Chrome, Safari, and Edge.  Our custom .search-icon SVG replaces them. */
.requests-search::-webkit-search-decoration,
.requests-search::-webkit-search-cancel-button,
.requests-search::-webkit-search-results-button,
.requests-search::-webkit-search-results-decoration { -webkit-appearance: none; }


/* ── 4. ACTIVITY CARD ROW ───────────────────────────────────
   Used on: requests, contributions, subscriptions pages
   ─────────────────────────────────────────────────────────── */
/* Reusable row pattern for listing tickets/contributions/subscriptions.
   Each row is an <li> inside .activity-list.

   Layout (flex row inside .activity-card-link):
     .activity-card-icon  — 32×32px brand-tinted icon box (flex-shrink: 0)
     .activity-card-body  — flex: 1, contains title + meta rows
     .activity-card-aside — right-side status badge + follow button column

   The hover state uses a near-transparent rgba wash on the entire link area
   (border-radius: 8px) rather than a border change, so the list dividers
   remain visible and consistent.

   Title clamp: `-webkit-line-clamp: 2` truncates long subject lines to 2
   lines, preventing cards from becoming very tall on mobile.

   Meta dots: `.activity-card-meta-dot::before { content: "·" }` uses the same
   CSS content separator pattern as `.section-article-meta-dot`.

   Aside: right-column with status badge above and optional follow button below.
   `flex-direction: column; align-items: flex-end` stacks them right-aligned. */
.activity-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
}
/* Divider-only card: no border-radius so the rows feel like a list,
   not isolated cards.  The CROSS-PAGE CONSISTENCY PASS adds border-radius
   and hover background to the overall card element. */
.activity-card {
  border-bottom: 1px solid #eeeeee;
}
.activity-card:first-child { border-top: 1px solid #eeeeee; }
/* Full-card anchor: flex row, align-items: flex-start so the icon and aside
   are top-aligned regardless of how tall the body grows. */
.activity-card-link {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 15px 10px;
  color: rgba(25, 23, 23, 1);
  text-decoration: none;
  border-radius: 8px;
  transition: background 0.15s ease;
}
.activity-card-link:hover {
  background: rgba(0,0,0,0.03);
  text-decoration: none;
}
/* Brand-tinted icon box: same #e9f2ff background as section card icons.
   `margin-top: 1px` nudges it to align with the title text cap-height. */
.activity-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #e9f2ff;
  color: rgba(0, 86, 214, 1);
  flex-shrink: 0;
  margin-top: 1px;
}
/* Body: flex: 1 + min-width: 0 is the standard trick to allow text-overflow
   and -webkit-line-clamp to work inside a flex child. */
.activity-card-body { flex: 1; min-width: 0; }
/* Title: 2-line clamp prevents excessive row heights on mobile.
   `-webkit-box` is still required for Safari compatibility with line-clamp. */
.activity-card-title {
  font-size: 16px;
  font-weight: 500;
  color: rgba(25, 23, 23, 1);
  margin: 0 0 5px;
  line-height: 1.4;
  /* Clamp to 2 lines */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.activity-card-link:hover .activity-card-title { color: rgba(0, 86, 214, 1); }
/* Meta row: muted 12px text, flex-wrap so items spill to a new line on mobile.
   `gap: 6px 12px` gives column gap 12px, row gap 6px when wrapping. */
.activity-card-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  font-size: 12px;
  color: #939393;
}
/* Dot separator: ::before pseudo-element places a "·" before any .meta-dot element */
.activity-card-meta-dot::before {
  content: "·";
  margin-right: 2px;
}
/* Aside: right column for status badge + follow button.
   `flex-shrink: 0` prevents it from being squeezed by a long title.
   `margin-top: 2px` aligns the top of the badge with the title text. */
.activity-card-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
  margin-top: 2px;
}


/* ── 5. STATUS BADGES ───────────────────────────────────────
   Pill-shaped labels with semantic color
   ─────────────────────────────────────────────────────────── */
/* Consistent pill-shaped status labels used across the activity card aside,
   request detail hero, and search results.

   Colour semantics follow standard Tailwind/GitHub conventions:
     open    → blue  (#e9f2ff / #004bbb) — active, in progress
     pending → amber (#fff9e5 / #856500) — waiting for reply
     solved  → green (#e9f8f6 / #004e50) — resolved
     closed  → grey  (#f6f6f6 / #707070) — archived
     new     → purple (#eceafd / #4f28af) — not yet seen by agent

   `.status-label` is the Zendesk built-in class (output by `{{status}}`
   helper); it's styled the same as `.status-badge` so template-rendered
   labels match custom-rendered ones on the same page. */
.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap; /* never wraps the label text */
}
/* Semantic colour variants — light background + dark text for legibility */
.status-badge-open,
.status-label-open { background: #e9f2ff; color: #004bbb; }
.status-badge-pending,
.status-label-pending { background: #fff9e5; color: #856500; }
.status-badge-solved,
.status-label-solved { background: #e9f8f6; color: #004e50; }
.status-badge-closed,
.status-label-closed { background: #f6f6f6; color: #707070; }
.status-badge-new { background: #eceafd; color: #4f28af; }
/* Zendesk built-in `.status-label` output by {{status}} helper */
.status-label {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
}


/* ── 6. EMPTY STATE ─────────────────────────────────────────
   Centered message when there's no content
   ─────────────────────────────────────────────────────────── */
/* Shown when a list (requests, contributions, subscriptions, search results)
   has no items to display.

   Layout: centred text column with an SVG icon above the title.
     .empty-state-icon  — 48×48px icon, muted grey (#d0d0d0), centred
     .empty-state-title — "You haven't submitted any requests" etc., 16px/600
     .empty-state-body  — supporting text or action link, 14px

   `.no-activities` is the legacy class used by some Zendesk-rendered pages
   (profile contributions tab); it uses the same centering but without the
   icon/title/body sub-structure (just a single <p>). */
.empty-state {
  text-align: center;
  padding: 56px 24px;
  color: #939393;
}
.empty-state-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 16px; /* centred horizontally, 16px gap to title */
  color: #d0d0d0;
}
.empty-state-title {
  font-size: 16px;
  font-weight: 600;
  color: #454545;
  margin: 0 0 6px;
}
.empty-state-body {
  font-size: 14px;
  margin: 0;
}
/* Legacy Zendesk-output class — same spacing, simpler structure */
.no-activities {
  display: block;
  text-align: center;
  padding: 56px 24px;
  color: #939393;
  font-size: 16px;
}


/* ── 7a. REQUEST THREAD (request_page.hbs) ──────────────────
   ─────────────────────────────────────────────────────────── */
/* Styling for the request (support ticket) detail page.

   Page layout:
     Hero banner (.page-hero) — ticket subject + status badge
     .request-container — CSS grid: 1fr on mobile, 1fr 280px on ≥1024px
       Left: .comment-list — the ticket thread
       Right: .request-sidebar — metadata panel (sticky card)

   Comment thread structure:
     .comment          — padded row with bottom divider (no divider on :last-child)
     .comment-author   — avatar + name/timestamp flex row
     .comment-body     — the message body; padding-left: 46px aligns it under
                         the name (36px avatar + 10px gap = 46px indent)
     .attachment-item  — file pill below comment body

   The CROSS-PAGE CONSISTENCY PASS later wraps each .comment in a white card
   with border and border-radius for the request-main context specifically. */
/* Breadcrumbs inside the request hero: white/translucent on the colour band */
.request-hero-breadcrumb .breadcrumbs li,
.request-hero-breadcrumb .breadcrumbs li + li::before { color: rgba(255,255,255,0.6); }
.request-hero-breadcrumb .breadcrumbs li a { color: rgba(255,255,255,0.85); }

/* Ticket subject: 24px (BLAST H3; smaller than the 28px section/category
   hero since the full subject may be long; max-width: 760px caps line length). */
.request-hero-title {
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  margin: 14px 0 0;
  line-height: 1.3;
  max-width: 760px;
}

/* Grid container: single column mobile → two-column on desktop (≥1024px).
   Sidebar is 280px — wider than article sidebar (220px) to accommodate more
   metadata fields (status, priority, assignee, dates). */
.request-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  padding: 32px 0 48px;
}
@media (min-width: 1024px) {
  .request-container { grid-template-columns: 1fr 280px; }
}

/* Comment list: plain <ul> reset, no padding/margin */
.comment-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Individual comment: bordered row.  No border on the last comment so the
   list doesn't end with a dangling divider before the reply form. */
.comment {
  padding: 24px 0;
  border-bottom: 1px solid #eeeeee;
}
.comment:last-child { border-bottom: 0; }

/* Author row: avatar + meta stack, flex row */
.comment-author {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}
.comment-avatar .user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
}
.comment-author-name {
  font-size: 14px;
  font-weight: 600;
  color: rgba(25, 23, 23, 1);
  margin: 0 0 2px;
}
.comment-author-name a { color: rgba(25, 23, 23, 1); } /* author name not styled as a link */
.comment-timestamp {
  font-size: 12px;
  color: #939393;
}

/* Comment body: 46px left indent aligns the text under the author name
   (36px avatar width + 10px gap = 46px).  line-height: 1.65 for
   comfortable paragraph reading. */
.comment-body {
  font-size: 16px;
  line-height: 1.65;
  color: rgba(25, 23, 23, 1);
  padding-left: 46px; /* indent to align under name */
}
.comment-body a { color: rgba(0, 86, 214, 1); }
.comment-body p { margin: 0 0 12px; }
.comment-body p:last-child { margin-bottom: 0; }

/* Attachment pill: inline file link with icon.  #fbfbfb background matches
   the sidebar/toc surface colour. `flex-shrink: 0` on the icon prevents
   it from being squashed by long filenames. */
.attachment-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #fbfbfb;
  border: 1px solid #ededed;
  border-radius: 8px;
  margin-top: 8px;
}
.attachment-icon { color: rgba(0, 86, 214, 1); flex-shrink: 0; }
.attachment-item a { font-size: 14px; color: rgba(0, 86, 214, 1); }

/* ── 7b. REQUEST SIDEBAR ────────────────────────────────────
   ─────────────────────────────────────────────────────────── */
/* Sticky metadata panel on the request detail page.
   Mirrors the article-sidebar pattern: #fbfbfb surface, 1px border,
   14px border-radius, sticky with top offset.

   Originally top: 84px (to clear the sticky header + tab-nav);
   the CROSS-PAGE CONSISTENCY PASS overrides to top: 40px !important
   since the header is no longer sticky.

   .request-details — a <dl> grouping related metadata fields
   .request-details dt — field label (all-caps, muted, 11px)
   .request-details dd — field value (14px, normal text weight)
   First <dt> has no top margin; subsequent ones have 14px for spacing.

   Comment reply form:
   .comment-show-container — collapsed "Add to conversation…" placeholder
     that expands (via JS) into the full rich-text editor on click.
   .comment-form-controls  — submit + mark-solved button row below the editor.
   .mark-as-solved          — secondary action button, same 8px radius. */
.request-sidebar {
  background: #fbfbfb;
  border: 1px solid #ededed;
  border-radius: 12px;
  padding: 20px 24px;
  align-self: flex-start;
  position: sticky;
  top: 84px; /* overridden to top: 40px !important in CROSS-PAGE CONSISTENCY PASS */
}

/* Section title inside sidebar: all-caps label, same style as article-sidebar */
.collapsible-sidebar-title {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #939393;
  margin: 0 0 16px;
}

/* Metadata definition list */
.request-details {
  margin: 0 0 20px;
}
.request-details:last-child { margin-bottom: 0; }
.request-details dt {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #939393;
  margin: 14px 0 3px; /* 14px top gap between each field */
}
.request-details dt:first-child { margin-top: 0; } /* no gap above first field */
.request-details dd {
  font-size: 14px;
  color: rgba(25, 23, 23, 1);
  margin: 0;
}

/* Reply form */
/* Collapsed state: a button-like placeholder the user clicks to expand the
   full editor.  Full width, left-aligned text, 1px border. */
.comment-form { display: flex; align-items: flex-start; gap: 12px; margin-top: 32px; }
.comment-form .comment-container { flex: 1; }
.comment-show-container {
  font-size: 14px;
  color: #707070;
  border: 1px solid #ededed;
  background: #fff;
  border-radius: 8px;
  padding: 11px 16px;
  cursor: pointer;
  width: 100%;
  text-align: left;
}
/* Controls row below the editor: submit button + mark-solved button */
.comment-form-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.mark-as-solved {
  font-size: 14px;
  padding: 8px 16px;
  border-radius: 8px;
}


/* ── 8. SEARCH RESULTS ──────────────────────────────────────
   ─────────────────────────────────────────────────────────── */
/* FIRST-PASS search results layout (design-system section).
   NOTE: The "SEARCH RESULTS — final authoritative pass" block further down
   in the file overrides most of these rules with !important to enforce
   the white-card list design.  These rules remain here to document the
   intended layout and serve as fallback if the cascade order changes.

   Two-column layout: 220px sidebar + 1fr main on ≥768px.
   Sidebar: stacked .filters-in-section cards (filter groups).
   Main: .search-results-list with divider-separated result rows (first pass)
         → upgraded to white cards in the authoritative pass.

   .sidenav-item: flex row with justify-content: space-between so the
     filter label sits left and the .doc-count number sits right.
   .search-result-description: clamped to 3 lines in this first pass
     (reduced to 2 lines in the authoritative pass). */
.search-results {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  padding: 24px 0 48px;
}
@media (min-width: 768px) {
  .search-results { grid-template-columns: 220px 1fr; }
}
/* Sidebar: stacks multiple filter cards vertically with 12px gap */
.search-results-sidebar { display: flex; flex-direction: column; gap: 12px; }
/* Filter group card: light #fbfbfb surface, 12px radius */
.filters-in-section {
  background: #fbfbfb;
  border: 1px solid #ededed;
  border-radius: 12px;
  padding: 16px 18px;
}
/* Filter group title: all-caps 11px label above the filter links */
.filters-in-section .sidenav-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #939393;
  margin: 0 0 10px;
}
/* Filter link: label on left, doc count on right via justify-content: space-between */
.sidenav-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-size: 14px;
  color: #454545;
  text-decoration: none;
  border-bottom: 1px solid #eeeeee;
}
.sidenav-item:last-of-type { border-bottom: 0; }
.sidenav-item:hover { color: rgba(0, 86, 214, 1); text-decoration: none; }
.sidenav-item.current { color: rgba(0, 86, 214, 1); font-weight: 600; }
/* Document count: muted number to the right of the filter label */
.doc-count { font-size: 12px; color: #939393; }
/* Results list: divider-only style (upgraded to white cards in authoritative pass) */
.search-results-list {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
}
.search-results-list > li {
  padding: 20px 0;
  border-bottom: 1px solid #eeeeee;
}
.search-results-list > li:last-child { border-bottom: 0; }
/* Result title: larger 17px in first pass, reduced to 16px in authoritative pass */
.search-result-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 6px;
}
.search-result-title a { color: rgba(25, 23, 23, 1); }
.search-result-title a:hover { color: rgba(0, 86, 214, 1); text-decoration: underline; }
/* Meta row: author, date, breadcrumb — flex-wrap for multi-line on small widths */
.search-result-meta-container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 4px;
  margin-bottom: 8px;
}
/* Excerpt: 3-line clamp (authoritative pass reduces to 2 lines with !important) */
.search-result-description {
  font-size: 14px;
  color: #454545;
  line-height: 1.6;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* "N results for X" heading above the results list */
.search-results-subheading {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 4px;
}
/* No-results: centred illustration + headline + suggested action link */
.no-results {
  text-align: center;
  padding: 48px 0;
}
.no-results .headline {
  font-size: 18px;
  font-weight: 600;
  margin: 16px 0 8px;
}
.no-results .action-prompt {
  font-size: 14px;
  color: #707070;
  margin-bottom: 8px;
}
.no-results .action-prompt a { color: rgba(0, 86, 214, 1); font-weight: 500; }


/* ── 9. ERROR PAGE ──────────────────────────────────────────
   ─────────────────────────────────────────────────────────── */
/* Centred error page (404, 403, etc.) with icon + headline + CTA.
   max-width: 520px ensures the text doesn't span too wide on large screens.

   .error-page-icon: circular 72×72px brand-tinted badge containing an SVG
     (e.g. broken link, lock) — larger than the 48px empty-state icon since
     this is the primary focus of the page.

   Heading hierarchy:
     h1 (32px/700) — error code or short title ("Page not found")
     h2 (17px/400) — more descriptive subtitle (normal weight, muted)
     p  (14px)     — optional guidance text (lightest colour)

   .btn-back: brand-coloured CTA button with inline arrow icon.
     Hover: opacity 0.88 — subtle dimming rather than colour change.
     The CROSS-PAGE CONSISTENCY PASS overrides .btn-back to invert
     to white-on-brand on hover for a more striking effect, using
     `box-shadow: inset 0 0 0 2px rgba(0, 86, 214, 1)` as the outline stroke. */
.error-page {
  text-align: center;
  padding: 80px 24px 80px;
  max-width: 520px;
  margin: 0 auto;
}
.error-page-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  background: #e9f2ff;
  border-radius: 50%;
  color: rgba(0, 86, 214, 1);
  margin: 0 auto 24px;
}
.error-page h1 {
  font-size: 36px;
  font-weight: 700;
  margin: 0 0 8px;
}
.error-page h2 {
  font-size: 18px;
  font-weight: 400;
  color: #707070;
  margin: 0 0 28px;
}
.error-page p {
  font-size: 14px;
  color: #707070;
  margin: 0 0 28px;
}
/* "Back to home" CTA: brand-coloured filled button, inline-flex for icon + text */
.btn-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 86, 214, 1);
  color: #fff;
  padding: 10px 24px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.15s ease;
}
/* First-pass hover: simple opacity dim.  Overridden to invert to white/brand
   in the CROSS-PAGE CONSISTENCY PASS for a stronger visual effect. */
.btn-back:hover { opacity: 0.88; color: #fff; text-decoration: none; }


/* ── NEW REQUEST PAGE ───────────────────────────────────────
   ─────────────────────────────────────────────────────────── */
/* The submit-a-ticket form rendered by Zendesk.  max-width: 700px keeps the
   form fields at a comfortable reading/filling width.  `margin: 32px auto 64px`
   centres it horizontally and gives generous top/bottom breathing room.
   The ROUND 2 FIXES block adds `margin-top: 24px` to the form footer/submit
   row and fixes the CC field blue empty error bar (see notification fix). */
.new-request-form {
  max-width: 700px;
  margin: 32px auto 64px;
}
.new-request-form h1 {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 24px;
}


/* ── MY ACTIVITIES NAV (contributions / subscriptions) ──────
   Full-width top-of-page nav between contributions & following
   ─────────────────────────────────────────────────────────── */
/* Secondary nav bar used on the my-activities pages to switch between
   "My Contributions" and "Following" (subscriptions).  Sits directly below
   the page hero, above the toolbar and list.

   Reuses the same underline-tab pattern as .tab-nav (2px brand-colour
   border-bottom on the active tab) for visual consistency.
   The .tab-nav class also applies to these pages via the template; this
   selector provides a fallback/alias in case templates use .my-activities-nav
   directly in a custom theme modification. */
.my-activities-nav {
  background: #fff;
  border-bottom: 1px solid #ededed;
}
.my-activities-nav .container { padding-top: 0; padding-bottom: 0; }
.my-activities-nav .collapsible-nav-list {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 0;
}
.my-activities-nav .collapsible-nav-list a {
  display: block;
  padding: 13px 18px;
  font-size: 14px;
  font-weight: 500;
  color: #707070;
  border-bottom: 2px solid transparent; /* active tab shows brand colour */
  text-decoration: none;
  white-space: nowrap;
}
.my-activities-nav .collapsible-nav-list a:hover { color: rgba(0, 86, 214, 1); text-decoration: none; }
/* Active tab: brand text + brand 2px underline.  `.current` is set by the collapsible-nav helper. */
.my-activities-nav .collapsible-nav-list .current a { color: rgba(0, 86, 214, 1); border-bottom-color: rgba(0, 86, 214, 1); font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════
   COMMUNITY PAGE UPDATES
   Enhancements to the community topic list, post detail, and
   striped-list components.  All rules here are additive — they
   supplement Copenhagen's existing community CSS, not replace it.
   ─────────────────────────────────────────────────────────────── */

/* Community footer CTA: centred banner at the bottom of the community
   homepage encouraging visitors to submit a new post.
   Separated from main content by a top border + padding. */
.community-footer {
  padding: 40px 0 48px;
  text-align: center;
  border-top: 1px solid #ededed;
  margin-top: 32px;
}
.community-footer-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
  color: rgba(25, 23, 23, 1);
}

/* Featured/pinned posts section: same border-top + top-padding pattern
   as the community footer to visually separate it from the regular list. */
.community-featured-posts {
  padding-top: 40px;
  border-top: 1px solid #ededed;
  margin-top: 32px;
}
.community-featured-posts-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
  color: rgba(25, 23, 23, 1);
}

/* Tab nav on community pages: the container is justify-content: space-between
   to push a "New Post" button to the far right of the nav bar.
   The button is `flex-shrink: 0` so it never gets squeezed by tab labels. */
.tab-nav .container { justify-content: space-between; }
.tab-nav .post-to-community { flex-shrink: 0; }
.tab-nav .post-to-community .button {
  font-size: 14px;
  padding: 6px 14px;
  line-height: 1.4;
}

/* Striped list: used for community post lists (e.g. topics page).
   Increase row padding and make the title bolder for better scannability. */
.striped-list-item {
  padding: 14px 0;
}
.striped-list-title {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 4px;
  display: inline-block; /* allows margin-bottom on an inline element */
}
/* Count column: centred stats (votes, comments) with a consistent minimum width */
.striped-list-count-item {
  text-align: center;
  min-width: 52px;
}
.striped-list-number {
  display: block;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
  color: rgba(25, 23, 23, 1);
}

/* Topics list: extra bottom padding so the last topic card isn't flush
   with the community-footer or page bottom edge. */
.topics-list { padding-bottom: 24px; }

/* ── Community post detail page ─────────────────────────────────────────── */
/* Two-column flex layout: post body (flex: 1) + sidebar (220px fixed).
   On mobile (≤767px): stack vertically, sidebar goes full-width below the post.
   `align-items: flex-start` keeps the sidebar top-aligned as the post body grows. */
.post-container {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  padding: 32px 0 48px;
}
.post { flex: 1; min-width: 0; }
/* Sidebar: "Related posts" or community topic info card */
.post-sidebar {
  flex: 0 0 220px;
  background: #fbfbfb;
  border: 1px solid #ededed;
  border-radius: 12px;
  padding: 20px;
}
.post-sidebar-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 14px;
  color: rgba(25, 23, 23, 1);
}
@media (max-width: 767px) {
  .post-container { flex-direction: column; gap: 24px; }
  .post-sidebar { flex: 0 0 auto; width: 100%; }
}

/* Post info container: author metadata (left) + vote widget (right).
   `align-items: flex-start` prevents the vote widget from stretching to
   match the full height of the author block on multi-badge profiles. */
.post-info-container {
  display: flex;
  gap: 20px;
  margin-bottom: 24px;
  align-items: flex-start;
}
.post-info { flex: 1; min-width: 0; }
/* Post author row: avatar (36px) + meta column, flex-start aligned */
.post-author {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 20px;
}
.post-meta {
  flex: 1;
  min-width: 0;
}
/* Post body content: top border separates it from the author/vote row */
.post-content {
  padding: 16px 0;
  border-top: 1px solid #eeeeee;
}
.post-body { font-size: 16px; line-height: 1.5; }
/* Vote widget: vertical column — up-arrow / score / down-arrow.
   The ROUND 2 FIXES block overrides this to `flex-direction: column-reverse`
   to put the settings/options icon above the vote controls. */
.post-actions-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Comment overview heading above the reply thread */
.comment-overview {
  padding: 20px 0 12px;
  border-top: 1px solid #ededed;
  margin-top: 24px;
}
.comment-heading {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 4px;
}

/* Post footer: share button left / comment count right.
   Sits below the post body and above the comment thread. */
.post-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  border-top: 1px solid #eeeeee;
  margin-top: 16px;
}
/* Comment count link: muted, turns brand colour on hover */
.post-comment-count {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #707070;
  text-decoration: none;
}
.post-comment-count:hover { color: rgba(0, 86, 214, 1); }

/* ZEROTH-PASS search results layout (earliest iteration).
   NOTE: This block predates both the design-system section-8 block and the
   final authoritative pass.  All properties here are overridden by later
   blocks with !important.  Kept in place to document the development history
   and as a cascade fallback layer.
   The flex layout (gap: 32px, sidebar flex: 0 0 220px) was established here
   and carried forward to later iterations unchanged. */
.search-results { display: flex; gap: 32px; align-items: flex-start; }
.search-results-sidebar { flex: 0 0 220px; }
.search-results-column { flex: 1; min-width: 0; }
.search-results-subheading {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 20px;
  color: rgba(25, 23, 23, 1);
}
/* These title/description values are overridden in the authoritative pass */
.search-result-title {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 4px;
}
.search-result-description {
  font-size: 14px;
  color: #707070;
  line-height: 1.6;
  margin: 6px 0 0;
}
.search-result-meta-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 4px 0 6px;
}
@media (max-width: 767px) {
  .search-results { flex-direction: column; }
  .search-results-sidebar { flex: 0 0 auto; width: 100%; }
}

/* No-results: centred area with illustration, headline, and suggested action.
   Also overridden by later no-results blocks — this is the earliest pass. */
.no-results {
  text-align: center;
  padding: 40px 20px;
}
.no-results .headline {
  font-size: 18px;
  font-weight: 600;
  margin: 20px 0 8px;
  color: rgba(25, 23, 23, 1);
}
.no-results .action-prompt {
  font-size: 14px;
  color: #707070;
  margin-bottom: 6px;
}
.no-results .action-prompt a {
  color: rgba(0, 86, 214, 1);
  text-decoration: underline;
}

/* ── REQUESTS TABLE (legacy fallback) ───────────────────────
   Copenhagen's original request list uses an HTML `<table>`.
   The new design replaces it with the .activity-card list pattern
   on supported page templates, but `.requests-table-info` styles
   are kept to ensure the table-based fallback renders acceptably
   in case the template hasn't been updated.
   ─────────────────────────────────────────────────────────── */
.requests-table-info a { font-size: 14px; font-weight: 500; color: rgba(25, 23, 23, 1); }
.requests-table-info a:hover { color: rgba(0, 86, 214, 1); }


/* ── SUBSCRIPTIONS TABLE tweaks ─────────────────────────────
   The subscriptions page (Manage subscriptions) renders a table
   with a subscribe/unsubscribe button per row.  Make the button
   compact (12px, 4px 12px padding) to fit cleanly in the table cell.
   ─────────────────────────────────────────────────────────── */
.subscriptions-subscribe .button { font-size: 12px; padding: 4px 12px; }

/* ═══════════════════════════════════════════════════════════════
   ROUND 2 FIXES
   A second pass of targeted fixes applied after the design system
   was assembled.  Each fix addresses a specific visual issue found
   during QA on the community and request pages.
   ─────────────────────────────────────────────────────────────── */

/* Fix 1: Striped list vote/comment counts — horizontal with divider
   PROBLEM: Copenhagen's default striped list renders the vote/comment
   count column as a flex-column, stacking the label above the number
   vertically.  On wider cards this wastes horizontal space and looks odd.
   SOLUTION: Lay the count items horizontally (flex-row) with a 1px
   border-left divider between them.  Each item is a centered column with
   the number large (18px/700) and the label tiny (11px all-caps).
   min-width: 64px + padding: 0 16px ensures the items don't collapse. */
.post-overview-count.striped-list-count {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
  margin-left: 24px;
}
.striped-list-count-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 64px;
  padding: 0 16px;
  text-align: center;
}
/* Divider between adjacent count items (e.g. Votes | Comments) */
.striped-list-count-item + .striped-list-count-item {
  border-left: 1px solid #ededed;
}
/* Large number: prominent stat value */
.striped-list-number {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  color: rgba(25, 23, 23, 1);
  display: block;
}
/* All other children of a count item (the label): tiny all-caps */
.striped-list-count-item > :not(.striped-list-number) {
  font-size: 11px;
  color: #939393;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Fix 2: Community post author — date below name (not pushed to opposite end)
   PROBLEM: `.meta-group` inside `.post-meta` was using `justify-content: flex-end`
   (or similar) causing the date to appear at the far right of the author block.
   SOLUTION: Reset to `justify-content: flex-start` so date sits under name.
   Author name: font-weight 600 to distinguish from badge/date text. */
.post-meta > .meta-group {
  justify-content: flex-start;
  margin-top: 2px;
}
.post-meta > span:first-child {
  font-weight: 600;
  font-size: 14px;
  color: rgba(25, 23, 23, 1);
}

/* Fix 3: Follow button in activity card aside — compact pill style
   PROBLEM: The default community-follow button is full-width and styled
   for the community section header; in the narrow .activity-card-aside
   column it breaks the layout.
   SOLUTION: Force the button to auto-width with a 20px pill border-radius.
   Two states: filled brand-colour pill (following) vs outline pill (not following).
   `data-selected=true/false` is a Zendesk-rendered attribute on the button. */
.activity-card-aside .community-follow {
  margin: 0;
  width: auto;
}
.activity-card-aside .community-follow button,
.activity-card-aside button[data-selected] {
  font-size: 12px;
  padding: 5px 14px;
  line-height: 1.5;
  border-radius: 12px;
  width: auto;
  font-weight: 500;
  letter-spacing: 0.01em;
}
/* Following state: filled brand-colour pill */
.activity-card-aside .community-follow button[data-selected=true],
.activity-card-aside button[data-selected=true] {
  background-color: rgba(0, 86, 214, 1);
  color: rgba(255, 255, 255, 1);
  border-color: rgba(0, 86, 214, 1);
}
/* Not-following state: transparent with brand outline */
.activity-card-aside .community-follow button[data-selected=false],
.activity-card-aside button[data-selected=false] {
  background: transparent;
  color: rgba(0, 86, 214, 1);
  border-color: rgba(0, 86, 214, 1);
}

/* Fix 4: Request filter label — plain text, NOT a select element
   PROBLEM: The label next to the status/sort filter was inheriting select
   styles (border, padding, arrow) in some environments.
   SOLUTION: Explicitly reset to plain muted text.  `white-space: nowrap`
   prevents label wrapping onto a second line in the flex toolbar. */
.request-filter-label {
  font-size: 14px;
  font-weight: 500;
  color: #707070;
  white-space: nowrap;
}

/* Fix 5: New Request page — breathing room before submit button
   PROBLEM: Zendesk renders the submit button inside a `<footer>` or
   `.request-submit` container immediately after the last form-field,
   with no margin, leaving it visually cramped against the CC field above.
   SOLUTION: Add margin-top: 24px to the form footer, the submit container,
   and the last form-field.  Also ensure the attachments area has bottom
   margin before the submit action. */
.new-request-form .form-field:last-of-type,
.new-request-form footer,
.new-request-form .request-submit { margin-top: 24px; }
.new-request-form .comment-attachments { margin-bottom: 20px; }

/* Generic attachment area + reply form controls on request detail page:
   consistent spacing between attachment list and the send button row. */
.comment-attachments { margin-bottom: 16px; }
.comment-form-controls { padding-top: 16px; border-top: 1px solid #eeeeee; margin-top: 8px; }

/* Fix 6: Post actions layout — settings icon above vote controls
   PROBLEM: The original layout puts vote controls at the top, then the
   settings (edit/delete) icon below.  This is visually awkward when only
   the settings icon is visible to non-owners.
   SOLUTION: `flex-direction: column-reverse` flips the order so the settings
   icon appears at the top of the column and vote controls below it.
   `padding-top: 4px` adds a small gap from the top of the flex container. */
.post-actions-wrapper {
  flex-direction: column-reverse;
  padding-top: 4px;
}

/* Tighten post info layout: name and date column with 4px gap,
   no stray margins from community badge and meta-group elements. */
.post-author { align-items: flex-start; }
.post-meta { display: flex; flex-direction: column; gap: 4px; }
.post-meta .community-badge-titles { margin: 0; }
.post-meta .meta-group { margin: 0; }

/* Vote controls: compact vertical column — up arrow / score number / down arrow.
   font-weight 600 on the score makes the net vote count clearly readable. */
.post-vote.vote {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.post-vote .vote-sum { font-size: 16px; font-weight: 600; color: rgba(25, 23, 23, 1); }

/* ═══════════════════════════════════════════════════════════════
   CROSS-PAGE CONSISTENCY PASS
   A third sweep applied after the design system and round-2 fixes
   were complete.  Ensures shared components (pagination, activity
   cards, section article cards, dropdowns, profile header) look
   and behave identically on every page.  Most rules use !important
   to win the cascade against both Copenhagen defaults and earlier
   custom addition blocks.
   ═══════════════════════════════════════════════════════════════ */

/* ── Sign-out link: subtle top separator via CSS so template stays clean ─── */
/* PROBLEM: The sign-out link appears at the bottom of the user dropdown but
   has no visual separation from the profile/activity links above it.
   SOLUTION: Use attribute selectors on the href (both sign_out and signout
   spellings to cover different Zendesk locales/versions) to add a 1px top
   border + top padding via CSS.  This avoids modifying the HBS template to
   add a separator element. */
.user-info .dropdown-menu a[href*="sign_out"],
.user-info .dropdown-menu a[href*="signout"] {
  margin-top: 4px;
  border-top: 1px solid #ededed;
  padding-top: 10px;
}

/* ── Sub-nav search on article + section pages: consistent height/style ──── */
/* PROBLEM: The {{search}} Zendesk helper renders a search box that is 50px
   tall by default. On sub-nav bars this makes it taller than all surrounding
   elements, breaking the bar's visual alignment.
   SOLUTION: Override height to 40px and font-size to 14px on both .sub-nav
   and .sub-nav-section variants (article page and section page respectively).
   border-radius: 8px matches the rest of the design system inputs. */
.sub-nav .search { border-radius: 8px; }
.sub-nav .search input[type=search] { height: 40px; font-size: 14px; }
.sub-nav-section .search { border-radius: 8px; }
.sub-nav-section .search input[type=search] { height: 40px; font-size: 14px; }

/* ── Consistent empty-state card padding ─────────────────────────────────── */
/* Normalise padding across the various empty-state containers.  The design
   system block above defines 56px; this pass overrides to 48px for a slightly
   less cavernous feel on pages with less vertical space. */
.empty-state { padding: 48px 24px; }

/* ── Pagination: final guarantee (last word in cascade) ──────────────────── */
/* PROBLEM: The {{pagination}} Zendesk helper outputs a `<nav>` + `<ul>` that
   different versions of Copenhagen and Zendesk stylesheets may render as flex
   or block, causing pagination links to stack vertically or appear in wrong
   order.
   SOLUTION: Force `display: block; text-align: center` on the wrapper + ul,
   and `display: inline-block` on each item/link/span so they line up in a
   single centred horizontal row regardless of the cascade.
   The directional links (prev/next/first/last) use `inline-flex` to align
   their icon and text side-by-side.  `!important` ensures this wins. */
.pagination, .pagination ul { display: block !important; text-align: center !important; }
.pagination a, .pagination li, .pagination span { display: inline-block !important; width: auto !important; }
.pagination-next-link, .pagination-prev-link, .pagination-first-link, .pagination-last-link {
  display: inline-flex !important; width: auto !important; margin: 4px;
}

/* ── Activity list spacing consistent across requests/contributions/subs ─── */
/* Add a subtle 10px border-radius and hover background to .activity-card so
   rows feel interactive (card-like) without adding a full border.
   `margin: 16px 0` on .activity-list adds vertical breathing room above and
   below the list on all three pages it appears. */
.activity-list { margin: 16px 0; }
.activity-card { border-radius: 8px; transition: background 0.12s ease; }
.activity-card:hover { background: rgba(0, 0, 0, 0.02); }

/* ── Section page article cards: full card style with metadata ───────────── */
/* AUTHORITATIVE CARD UPGRADE: Overrides the initial section-article-card
   styles (defined in the "Section page article cards" block above) to adopt
   the full white-card design used across the design system.

   Changes from the initial pass:
     - gap: 0 (divider-only) → gap: 10px (isolated white cards)
     - .section-article-card: removes divider-only pattern, adds white #fff
       background, 1px solid #ededed border all-around, 12px border-radius
     - border-bottom and :first-child border-top both use !important to beat
       the initial-pass rules that only added top/bottom dividers
     - .section-article-card:hover: subtle border darkening + box-shadow lift
     - .section-article-card-link: padding upgraded to 18px 20px !important
       (the redundant `padding: 14px 0` line below it is a development artifact;
       the !important version wins)
     - .section-article-card-icon: background updated from #e9f2ff to #f6f6f6

   These rules do NOT have !important on all properties — the SECTION PAGE ARTICLE
   CARD BODY + META LAYOUT block at the very end adds !important overrides for
   the icon size, border-radius, and background to match the search-result-type-icon. */
.section-article-cards {
  padding: 0; margin: 0; list-style: none;
  display: flex; flex-direction: column; gap: 10px; /* 10px gap between isolated cards */
}
/* White card with border: replaces the old divider-only approach */
.section-article-card {
  background: #fff;
  border: 1px solid #ededed;
  border-radius: 12px;
  border-bottom: 1px solid #ededed !important; /* override the old border-bottom rule */
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
/* Ensure first card also has a top border (isolated card model, not divider model) */
.section-article-card:first-child { border-top: 1px solid #ededed !important; }
/* Hover: border softly darkens + 8px shadow lift */
.section-article-card:hover {
  border-color: #d0d0d0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
/* Card link: 18px 20px padding gives comfortable interior whitespace.
   NOTE: The `padding: 14px 0` line is a development artifact left from an
   earlier iteration; the `18px 20px !important` value above it wins. */
.section-article-card-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px !important;
  padding: 14px 0; /* artifact — overridden by the !important line above */
  color: rgba(25, 23, 23, 1);
  text-decoration: none;
  transition: color 0.12s ease;
}
.section-article-card-link:hover { color: rgba(0, 86, 214, 1); text-decoration: none; }
/* Icon box: neutral #f6f6f6 background (less saturated than the earlier #e9f2ff).
   The final SECTION CARD BODY + META block below overrides to #e9f2ff with !important. */
.section-article-card-icon {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 8px;
  background: #f6f6f6;
  display: flex; align-items: center; justify-content: center;
  color: rgba(0, 86, 214, 1);
}
.section-article-card-title { flex: 1; font-size: 16px; font-weight: 500; min-width: 0; }
.section-article-card-arrow { flex-shrink: 0; color: #939393; }

/* ── Profile sort dropdown: keep consistent with subscriptions filter ─────── */
/* PROBLEM: The profile contributions page renders a sort order dropdown
   (.profile-section-sorter .dropdown-toggle) that may inherit generic button
   or select styles and look inconsistent with the .request-filter button on
   the requests page.
   SOLUTION: Apply the same base styles to both selectors so they look identical:
     - 8px border-radius, 1px #ededed border, white background
     - inline-flex with 6px gap (for caret icon alignment)
     - `background-image: none` removes any inherited select arrow
   Focus ring: brand-colour border + soft 3px glow using hardcoded rgba
   (Zendesk doesn't substitute rgba(0, 86, 214, 1) inside rgba()). */
.profile-section-sorter .dropdown-toggle,
button.request-filter {
  font-size: 14px;
  font-family: inherit;
  border: 1px solid #ededed;
  border-radius: 8px;
  padding: 6px 12px;
  background: #fff;
  color: rgba(25, 23, 23, 1);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: normal;
  font-weight: 500;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  background-image: none; /* remove any inherited select arrow */
}
/* Hover + open state: brand-colour border + glow ring */
.profile-section-sorter .dropdown-toggle:hover,
.profile-section-sorter .dropdown-toggle[aria-expanded=true],
button.request-filter:hover,
button.request-filter[aria-expanded=true] {
  border-color: rgba(0, 86, 214, 1);
  box-shadow: 0 0 0 3px rgba(0, 86, 214, 0.08);
}

/* ── Request page: each reply as a distinct card ─────────────────────────── */
/* PROBLEM: The initial request thread styles used a divider-only pattern
   (padding + border-bottom) for comments.  On QA this looked too plain
   and inconsistent with the white-card pattern used across other pages.
   SOLUTION: Scope to `.request-main .comment-list` (not the generic class)
   to upgrade ONLY the request ticket thread to isolated white cards.
   The community post comment thread (also `.comment-list`) keeps the
   divider-only style.

   Agent replies: get a 3px brand-colour left border accent + very light
   brand tint (#fbfbfb) to distinguish staff responses from customer messages
   at a glance, without being as heavy as a different background colour. */
.request-main .comment-list {
  display: flex;
  flex-direction: column;
  gap: 12px; /* gaps between isolated cards */
  margin: 0;
}
/* White card per comment: border all-around + 12px radius.
   !important beats the initial `.comment { border-bottom: 1px solid #eeeeee }`. */
.request-main .comment {
  background: #fff;
  border: 1px solid #ededed !important;
  border-radius: 12px;
  padding: 20px 24px;
  border-bottom: none !important; /* card model has no separate bottom divider */
}
.request-main .comment:last-child {
  border-bottom: none !important;
}
/* Agent replies: brand-colour left accent bar + faint blue wash.
   Uses `!important` to override the base `.comment` border. */
.request-main .comment.comment-agent {
  border-left: 3px solid rgba(0, 86, 214, 1) !important;
  background: #fbfbfb;
}

/* ── Profile header: hide empty badge/action containers ─────────────────── */
/* PROBLEM: For profiles without achievements, titles, or edit buttons,
   Zendesk still renders the empty container elements.  These create unwanted
   whitespace in the profile header grid layout.
   SOLUTION: Use the CSS `:empty` pseudo-class to hide any container that has
   no child content.  This is safe because `:empty` only matches truly empty
   elements (no children, not even whitespace text nodes).
   Additional tweaks: tighten the grid gap and normalise the name margin
   so the heading doesn't have excessive bottom space when badges are absent. */
.community-badge-achievements:empty { display: none; }
.community-badge-titles:empty { display: none; }
.options:empty { display: none; }
/* Tighten internal gap in the profile info column */
.profile-header .profile-info { gap: 8px; }
/* Don't add extra bottom margin to the name heading when badges are absent */
.basic-info .name { margin-bottom: 4px; }

/* ═══════════════════════════════════════════════════════════════
   SEARCH RESULTS — final authoritative pass (wins cascade)
   Overrides the first-pass design-system search results block with
   !important rules to enforce the card/sidebar language used on
   article and request pages.

   Key changes from the first pass:
     - .search-results switches from grid to flex (flex-row) layout
       matching the article-container flex pattern
     - Sidebar becomes sticky (top: 88px → overridden to 40px in the
       non-sticky header pass below)
     - .filters-in-section upgraded from #fbfbfb → white card (#fff)
     - Collapsible toggle hidden on desktop (list always visible)
     - .search-results-list upgraded from divider-only rows to isolated
       white cards with border + border-radius + hover box-shadow
     - .search-result-description clamped from 3 lines to 2 lines
     - .search-result-title link colour changed from rgba(25, 23, 23, 1) to
       rgba(0, 86, 214, 1) for affordance
     - Adds .search-result-row + .search-result-type-icon for the
       custom SVG icon switcher in search_results.hbs
   ═══════════════════════════════════════════════════════════════ */

/* Layout: flex row (not grid) to match article-container pattern exactly.
   padding: 32px 0 56px gives generous top/bottom breathing room. */
.search-results {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 32px;
  padding: 32px 0 56px;
}
/* Mobile: stack sidebar above results column */
@media (max-width: 767px) {
  .search-results { flex-direction: column !important; }
  .search-results-sidebar { flex: 0 0 auto !important; width: 100% !important; max-width: 100% !important; }
}

/* Sidebar: 220px fixed-width, sticky, stacked filter cards.
   top: 88px was the original sticky-header offset; overridden to
   top: 40px !important later in the non-sticky header block. */
.search-results-sidebar {
  flex: 0 0 220px !important;
  max-width: 220px !important;
  position: sticky;
  top: 88px; /* overridden to 40px !important in the non-sticky header block */
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Each filter section is a white card (upgraded from #fbfbfb in first pass) */
.filters-in-section {
  background: #fff !important;
  border: 1px solid #ededed !important;
  border-radius: 12px !important;
  padding: 16px 18px !important;
}
/* Section title inside filter card: all-caps 11px muted label.
   Covers both `.sidenav-title` (custom) and `.collapsible-sidebar-title` (Zendesk). */
.filters-in-section .sidenav-title,
.filters-in-section .collapsible-sidebar-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #939393;
  margin: 0 0 10px;
}

/* Filter links: upgraded from 6px padding to 7px, font-weight 500 (bolder),
   color reset to rgba(25, 23, 23, 1) (not the muted lighten() value of the first pass).
   Display is forced with !important to prevent any inherited flex/block clash. */
.sidenav-item {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  padding: 7px 0;
  font-size: 14px;
  font-weight: 500;
  color: rgba(25, 23, 23, 1);
  text-decoration: none;
  border-bottom: 1px solid #f6f6f6;
}
.sidenav-item:last-of-type { border-bottom: 0; }
.sidenav-item:hover { color: rgba(0, 86, 214, 1); text-decoration: none; }
.sidenav-item.current { color: rgba(0, 86, 214, 1); font-weight: 600; }
/* Doc count: smaller muted number, font-weight 400 (normal) */
.doc-count { font-size: 12px; color: #939393; font-weight: 400; }

/* Collapsible toggle: hidden on desktop since the list is always visible.
   On mobile (≤767px) the toggle is shown so users can collapse filter groups. */
.filters-in-section .collapsible-sidebar-toggle { display: none; }
@media (max-width: 767px) {
  .filters-in-section .collapsible-sidebar-toggle { display: flex; }
}
/* Force the body + multibrand list to always be visible on desktop
   (Zendesk JS may toggle these, so !important is needed) */
.filters-in-section .collapsible-sidebar-body,
.filters-in-section .multibrand-filter-list { display: block !important; }

/* Main results column: flex: 1, min-width: 0 for text truncation safety */
.search-results-column {
  flex: 1 !important;
  min-width: 0 !important;
}

/* "N results for …" heading */
.search-results-subheading {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: rgba(25, 23, 23, 1) !important;
  margin: 0 0 20px !important;
}

/* Results list: flex column with 10px gap between isolated white cards.
   Resets the first-pass divider-only pattern. */
.search-results-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Each result is a white card matching the request-page comment card style */
.search-results-list > li {
  background: #fff;
  border: 1px solid #ededed;
  border-radius: 12px;
  padding: 20px 24px;
  border-bottom: none !important; /* remove old divider — card model has no separate bottom border */
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
/* Hover: border softens to darker grey + subtle lift shadow */
.search-results-list > li:hover {
  border-color: #d0d0d0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
/* Ensure consistent top padding on first card (overrides any inherited margin) */
.search-results-list > li:first-child { padding-top: 20px !important; }
.search-results-list > li:last-child { border-bottom: none !important; }

/* Result title: 16px (down from 17px in first pass) + rgba(0, 86, 214, 1) (up from rgba(25, 23, 23, 1)).
   Using link colour provides affordance — the title looks clickable. */
.search-result-title {
  font-size: 16px !important;
  font-weight: 600 !important;
  margin: 0 0 6px !important;
  line-height: 1.35;
}
.search-result-title a { color: rgba(0, 86, 214, 1) !important; text-decoration: none; }
.search-result-title a:hover { text-decoration: underline; }

/* Meta row: breadcrumb path + author + date.  10px column gap, flex-wrap
   so items spill to a second line on narrow result cards. */
.search-result-meta-container {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin: 4px 0 10px !important;
}
/* Breadcrumb trail within each result: "Category › Section" path.
   Chevron separator "›" added via ::before on li + li. */
.search-result-breadcrumbs {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 0;
  align-items: center;
}
.search-result-breadcrumbs li { font-size: 12px; color: #707070; }
/* Breadcrumb links: brand colour, normal weight */
.search-result-breadcrumbs li a { color: rgba(0, 86, 214, 1); font-size: 12px; font-weight: 500; text-decoration: none; }
.search-result-breadcrumbs li a:hover { text-decoration: underline; }
/* Chevron separator between breadcrumb items */
.search-result-breadcrumbs li + li::before { content: "›"; margin: 0 4px; color: #d0d0d0; }
/* Zendesk-rendered .meta-data span (author, date) */
.search-results-list .meta-data { font-size: 12px; color: #707070; }

/* Excerpt text: 2-line clamp (down from 3 in the first pass) to keep cards compact.
   Hardcoded #707070 (vs the first-pass `lighten(rgba(25, 23, 23, 1))`) for consistency with
   meta text colour across the design system. */
.search-result-description {
  font-size: 14px !important;
  color: #707070 !important;
  line-height: 1.6 !important;
  margin: 0 !important;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 2 lines instead of the first-pass 3 */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Hero strip above search results: merge into the page background.
   `rgba(246, 246, 246, 1)` (warm cream / white, set in theme settings) so the
   hero doesn't create a jarring colour block above the search input. */
.search-results-hero {
  background: rgba(246, 246, 246, 1);
  border-bottom: 1px solid #ededed;
  padding: 20px 0;
}

/* ── Search result type icon ─────────────────────────────────────────────── */
/* CUSTOM ADDITION: adds a content-type icon to the left of each search result.
   The .search-result-row wrapper + .search-result-type-icon icon box are
   added in search_results.hbs's {{#each results}} block.
   Three content types are handled:
     community_post           → chat bubble SVG
     external_content_record  → external link arrow SVG
     default (articles)       → document/file SVG

   Design:
     36×36px box, 9px radius, #e9f2ff background (~brand tint at 6% opacity),
     brand-colour SVG stroke.  `margin-top: 2px` aligns the icon with the
     title text cap-height. */
.search-result-row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.search-result-type-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: #e9f2ff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(0, 86, 214, 1);
  margin-top: 2px; /* align with title cap-height */
}
/* Article element (content area to the right of the icon): flex: 1 + min-width: 0
   for safe text truncation inside a flex child */
.search-result-row article { flex: 1; min-width: 0; }

/* ── Error page button: final hover upgrade ─────────────────────────────── */
/* PROBLEM: The first-pass .btn-back:hover used `opacity: 0.88` which is subtle.
   SOLUTION: Override to an invert-on-hover effect: white background, brand text,
   with an inset box-shadow acting as a 2px brand-colour border ring.
   This makes the CTA feel more interactive and prominent.
   `opacity: 1 !important` cancels the first-pass opacity change. */
.btn-back {
  color: #fff !important;
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease !important;
  opacity: 1 !important;
}
.btn-back:hover {
  background-color: #fff !important;
  color: rgba(0, 86, 214, 1) !important;
  box-shadow: inset 0 0 0 2px rgba(0, 86, 214, 1) !important; /* simulates a 2px border without layout shift */
  opacity: 1 !important;
  text-decoration: none !important;
}
.btn-back svg { flex-shrink: 0; } /* icon never squashes under long button labels */

/* ── Category page: wider search bar, no divider beneath sub-nav ─────────── */
/* The category_page.hbs template uses `.sub-nav-inner` for the search-only
   sub-nav below the hero.  Override the first-pass 1px border-bottom and
   constrained search width with full-width expansion + no divider. */
.sub-nav-inner {
  border-bottom: none !important;
  padding: 20px 0 8px !important;
  margin-bottom: 16px !important;
}
/* Full-width search on category pages: `flex: 1; max-width: 100%; width: 100%`
   chain ensures the search field expands to the full container width on all
   three cascading elements (.search-container, .search, and the input). */
.sub-nav-inner .search-container {
  max-width: 100% !important;
  width: 100% !important;
  flex: 1 !important;
}
.sub-nav-inner .search {
  max-width: 100% !important;
  width: 100% !important;
}
.sub-nav-inner .search input[type=search] {
  width: 100% !important;
}

/* ── Sticky header design decision ────────────────────────────────────────── */
/* DECISION: The header IS sticky (position: sticky; top: 0) — the Copenhagen
   default, deliberately restored. An earlier pass made it non-sticky to free
   viewport height, but the header now carries the theme's ONE persistent
   search box (.header-search-container): "search stored in the header" only
   works if the header stays on screen while you scroll. The .is-scrolled
   shadow (script.js) marks the pinned state.
   OFFSETS: script.js publishes the header's real height as --ws-header-height
   on <html> (re-measured on resize — the mobile header wraps to two rows).
   Everything that sticks below the header offsets from that variable with a
   68px fallback; sidebars add a 24px (BLAST spacing) breathing gap. */
.header {
  position: sticky !important;
  top: 0 !important;
}

/* Sticky offsets below the header (all var-driven, see above) */
@media (min-width: 1024px) {
  .article-sidebar {
    top: calc(var(--ws-header-height, 68px) + 24px) !important;
  }
}
.search-results-sidebar {
  top: calc(var(--ws-header-height, 68px) + 24px) !important;
}
.profile-nav {
  top: var(--ws-header-height, 68px) !important; /* flush under the header */
}
.request-sidebar {
  top: calc(var(--ws-header-height, 68px) + 24px) !important;
}

/* ── Container divider and sub-nav border removal ────────────────────────── */
/* .container-divider: Copenhagen renders an <hr class="container-divider">
   between the hero band and the main content on article and category pages.
   With the hero bands we've added, this divider is visually redundant — the
   brand-colour hero already provides a clear break.  Hide it globally.
   (The HBS template comment in article_page.hbs also documents this removal.) */
.container-divider {
  display: none !important;
}
/* Sub-nav bottom border: the `.sub-nav` bar (below article/section heroes)
   has a `border-bottom: 1px solid` in Copenhagen's base CSS.  Remove it to
   let the content flow cleanly after the search bar without a double-line
   effect under the hero. */
.sub-nav {
  border-bottom: none !important;
  margin-bottom: 8px !important;
}

/* ── Breadcrumb redesign: chevron separators, styled hierarchy ────────────── */
/* PROBLEM: Copenhagen's default breadcrumbs use a `>` text separator and
   inconsistent font sizes/weights across items.
   SOLUTION: Full redesign of the breadcrumb component using CSS-only changes
   (no HBS template modifications needed).

   Design:
     - Display: flex row, items wrap on narrow viewports
     - Separator: "›" via `li + li::before`, muted light grey (#c1c1c1),
       7px horizontal margin, slightly larger than body text (16px) for
       clear visual separation
     - Non-current items: #707070 muted text, font-weight 500
     - Current (last) item: rgba(25, 23, 23, 1) dark text, font-weight 600 (bolder)
     - Hover: brand colour, no underline (breadcrumbs are nav elements, not
       inline text links)

   The `!important` is needed on every property because Copenhagen's base CSS
   styles .breadcrumbs with its own specificity chain, and these overrides
   must win across all page types (article, section, category, hero). */
.breadcrumbs {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 0 !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.breadcrumbs li {
  display: flex !important;
  align-items: center !important;
  font-size: 14px !important;
}
/* Chevron separator: "›" pseudo-element between adjacent breadcrumb items.
   16px, font-weight 300 makes it appear lighter than the surrounding text. */
.breadcrumbs li + li::before {
  content: "›" !important;
  margin: 0 7px !important;
  color: #c1c1c1 !important;
  font-size: 16px !important;
  font-weight: 300 !important;
  line-height: 1 !important;
}
/* Ancestor items: muted grey, medium weight */
.breadcrumbs li a,
.breadcrumbs li span {
  color: #707070 !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
  letter-spacing: 0 !important;
}
.breadcrumbs li a:hover {
  color: rgba(0, 86, 214, 1) !important;
  text-decoration: none !important;
}
/* Current page (last item): dark text, semi-bold weight to mark it as active */
.breadcrumbs li:last-child > a,
.breadcrumbs li:last-child > span {
  color: rgba(25, 23, 23, 1) !important;
  font-weight: 600 !important;
}

/* ── Sidebar: current article — more padding + shadow ────────────────────── */
/* The currently-viewed article in the article sidebar gets elevated treatment
   to make it immediately identifiable as "you are here".
   Extra padding (11px 14px vs. standard ~6px) + a brand-tinted drop shadow
   + 8px border-radius create a "lifted card" effect within the sidebar list.
   `!important` is required to override the base `.sidenav-item` padding. */
.sidenav-item.current-article {
  padding: 11px 14px !important;
  box-shadow: 0 2px 10px rgba(0, 86, 214, 0.13) !important;
  border-radius: 8px !important;
}

/* ── User dropdown: only highlight the ACTUAL current page ───────────────── */
/* PROBLEM: The Zendesk `{{#my_profile}}` Handlebars helper may set
   `aria-current="page"` on ALL links inside the user dropdown menu, not just
   the one matching the current URL.  This causes every menu item to appear
   visually active simultaneously.
   SOLUTION: A two-part fix:
     1. CSS: Reset ALL dropdown links to normal (non-highlighted) appearance,
        including the `[aria-current]` attribute selectors that Copenhagen
        uses for active link styling.
     2. JS (script.js, "User dropdown active-state normaliser" custom addition):
        Removes `aria-current` from all menu links, then adds `.dropdown-nav-current`
        ONLY to the link whose pathname matches `window.location.pathname`.
   CSS only reacts to .dropdown-nav-current (not to aria-current) to avoid
   the incorrect Zendesk-set aria-current values affecting appearance. */

/* Step 1: Reset all dropdown links to default appearance */
.user-info .dropdown-menu a,
.user-info .dropdown-menu a[aria-current],
.user-info .dropdown-menu a[aria-current=page] {
  color: rgba(25, 23, 23, 1) !important;
  font-weight: 400 !important;
  background-color: transparent !important;
}
/* Step 2: Highlight only the JS-verified current page link */
.user-info .dropdown-menu a.dropdown-nav-current {
  color: rgba(0, 86, 214, 1) !important;
  font-weight: 600 !important;
  background-color: rgba(0, 86, 214, 0.06) !important; /* subtle brand tint */
}
/* Hover on the active link: slightly deeper tint for feedback */
.user-info .dropdown-menu a.dropdown-nav-current:hover {
  background-color: rgba(0, 86, 214, 0.12) !important;
}

/* ── Sticky tab nav + profile nav: pin flush under the sticky header ──────── */
/* Offsets from --ws-header-height (published by script.js) so they track the
   real header height, including the taller wrapped mobile header. */
.tab-nav {
  top: var(--ws-header-height, 68px) !important;
}
.profile-nav {
  top: var(--ws-header-height, 68px) !important; /* also set above in the sidebar-offsets block */
}

/* ── Sticky footer: push footer to bottom on short-content pages ─────────── */
/* PROBLEM: On pages with very little content (e.g. an empty search result,
   a 404 error page), the footer renders immediately below the content,
   leaving a large empty space below it to the bottom of the viewport.
   SOLUTION: The classic CSS flex sticky-footer pattern:
     body: display flex + flex-direction column + min-height 100vh
     main: flex: 1 → grows to fill remaining viewport height
   This pushes the footer to the viewport bottom on short pages while having
   no effect on pages with enough content to scroll.
   `min-height: unset !important` overrides Copenhagen's `min-height: 65vh`
   media query rule on `main`, which would conflict with flex: 1. */
body {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100vh !important;
}
body > main {
  flex: 1 !important;
  min-height: unset !important; /* override the 65vh media query in Copenhagen base */
}

/* ── Profile header: three-column grid layout ────────────────────────────── */
/* PROBLEM: Copenhagen's default profile header stacks avatar, name, and stats
   vertically, which wastes space and doesn't match the "card header" aesthetic
   of a modern profile page.
   SOLUTION: A CSS grid with 3 columns:
     Column 1 (auto): avatar  — sized by the avatar element itself
     Column 2 (1fr):  name + badges — fills remaining space
     Column 3 (auto): edit/options button — sized by the button
   Description and activity stats span all 3 columns (grid-column: 1 / -1)
   so they sit as full-width rows below the avatar/name/button trio.

   Stats (profile-stats-activity): Zendesk originally stacks stats vertically.
   Override to flex-direction: row with 40px gaps so the metrics (e.g.
   "12 Posts", "3 Answers") sit side by side for quick scanning.
   Each stat is a flex column: value stacked above label (column layout). */
.profile-header .profile-info {
  display: grid !important;
  grid-template-columns: auto 1fr auto !important; /* avatar | name | button */
  align-items: center !important;
  column-gap: 20px !important;
  row-gap: 14px !important;
}
/* Column 1: avatar */
.profile-header .profile-info > .avatar.profile-avatar {
  grid-column: 1 !important;
  align-self: center !important;
}
/* Column 2: name + badges column */
.profile-header .profile-info > .basic-info {
  grid-column: 2 !important;
  align-self: center !important;
}
.basic-info .name { margin-bottom: 2px !important; }
/* Column 3: edit/options button */
.profile-header .profile-info > .options {
  grid-column: 3 !important;
  align-self: center !important;
}
/* Full-width row: bio/description (only present if user has set one) */
.profile-header .profile-info > .description {
  grid-column: 1 / -1 !important;
}
/* Full-width row: activity stats — horizontal flex row */
.profile-header .profile-info > .profile-stats-activity {
  grid-column: 1 / -1 !important;
  flex-direction: row !important; /* override Zendesk's flex-column */
  gap: 40px !important;
  margin-top: 0 !important;
  align-items: flex-start !important;
}
/* Individual stat: value on top, label below (column inside the horizontal row) */
.profile-stats-activity .stat {
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 2px !important;
}

/* ── Submit request page: fix CC field blue empty error bar ──────────────── */
/* BUG: On the new-request form, Zendesk renders a `.notification.notification-inline`
   validation container below the CC (carbon copy) email input field.  On initial
   page load (before the user has interacted with the field), this container is
   present in the DOM with `aria-hidden="true"` (indicating no actual error exists)
   but is still visually rendered as a blue #e9f2ff bar, creating a confusing
   false-positive error-state appearance.
   FIX: Hide the notification element when `aria-hidden="true"` — this is the
   authoritative ARIA signal that there is no active error to display.
   When Zendesk detects a real validation error, it sets `aria-hidden="false"`,
   which does NOT match this selector, so the notification correctly becomes visible. */
.notification.notification-inline[aria-hidden="true"] {
  display: none !important;
}

/* ── Section page article card: body + meta layout ───────────────────────── */
/* FINAL UPGRADE: Adds the `.section-article-card-body` flex column and
   `.section-article-card-meta` row that were introduced in section_page.hbs
   as part of the CUSTOM REDESIGN of the article card.

   The HBS template was redesigned to output:
     .section-article-card-body (flex column)
       .section-article-card-title  (title + star/lock icons)
       .section-article-card-meta   (author · date · comment count)

   These CSS rules support that structure:

   .section-article-card-body:
     flex: 1; min-width: 0 — standard flex child that allows internal text
     truncation and wrapping without overflowing the card.
     gap: 5px — compact vertical gap between title and meta rows.

   .section-article-card-title:
     display: flex + gap: 6px — allows the title text and inline star/lock
     icons to sit on the same line with controlled spacing.
     flex-wrap: wrap — wraps title + icons cleanly on narrow cards.
     Color: rgba(25, 23, 23, 1) by default → rgba(0, 86, 214, 1) on parent :hover.

   .section-article-card-meta:
     Muted 12px row for author · date · comment count.
     No gap (gap: 0) — spacing is handled by the .section-article-meta-dot
     ::before pseudo-element which injects "·" + 5px margins.

   .section-article-meta-dot::before:
     content: "·" — CSS separator dot pattern (same approach as article meta
     on the article page sidebar, keeping both consistent).
     margin: 0 5px — 5px on each side of the dot.
     color: #d0d0d0 — lighter than the meta text to visually recede.

   .section-article-card-icon (final upgrade):
     36×36px (up from 32px), 9px radius (up from 8px), #e9f2ff background
     (slightly more brand-tinted than the #f6f6f6 used in the consistency pass).
     align-self: flex-start + margin-top: 2px — pins the icon to the top of
     the card body and optically aligns it with the first line of the title. */
.section-article-card-body {
  flex: 1;
  min-width: 0; /* allows text truncation inside a flex child */
  display: flex;
  flex-direction: column;
  gap: 5px; /* tight gap between title row and meta row */
}
/* Title: flex row to inline star/lock status icons next to the title text */
.section-article-card-title {
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  color: rgba(25, 23, 23, 1) !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: wrap !important; /* wrap icons to a second line on very narrow cards */
}
/* Hover: entire title inherits the link colour from the parent anchor */
.section-article-card-link:hover .section-article-card-title {
  color: rgba(0, 86, 214, 1) !important;
}
/* Meta row: muted 12px text, no gap (dots handle spacing) */
.section-article-card-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  font-size: 12px;
  color: #707070;
  line-height: 1.4;
}
/* Dot separator: "·" with 5px padding on each side, very light (#d0d0d0) */
.section-article-meta-dot::before {
  content: "·";
  margin: 0 5px;
  color: #d0d0d0;
}
/* Icon box: final dimensions — 36×36px, 9px radius, brand-tinted #e9f2ff bg.
   align-self: flex-start pins it to the top of the flex row (prevents stretching
   to match a tall multi-line title).
   margin-top: 2px optically aligns the icon's visual centre with the
   title text cap-height. */
.section-article-card-icon {
  flex-shrink: 0 !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
  background: #e9f2ff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: rgba(0, 86, 214, 1) !important;
  align-self: flex-start !important;
  margin-top: 2px !important;
}

/* ── Section page: full-width search, no divider — match category page ──── */
/* PROBLEM: The section page sub-nav was limited to a 360px search field
   (set in the first-pass "Section page article cards" block) and had a
   visible border-bottom divider.  The category page sub-nav was separately
   upgraded to full-width + no divider (in the "Category page: wider search
   bar" block above).  This inconsistency made the two page types feel different.
   SOLUTION: Mirror the exact same overrides applied to `.sub-nav-inner`
   (category page) but on `.sub-nav-section` (section page).
   The same three-level chain (search-container / search / input) is needed
   because the {{search}} helper nests the input inside two wrappers. */
.sub-nav-section {
  border-bottom: none !important;
  padding: 20px 0 8px !important;
  margin-bottom: 16px !important;
}
.sub-nav-section .search-container {
  max-width: 100% !important;
  width: 100% !important;
  flex: 1 !important;
}
.sub-nav-section .search {
  max-width: 100% !important;
  width: 100% !important;
}
.sub-nav-section .search input[type=search] {
  width: 100% !important;
}

/* ════════════════════════════════════════════════════════════════════
   ARTICLE PAGE — SIDEBAR TOC
   ════════════════════════════════════════════════════════════════════
   The "Articles in this section" sidebar list has been replaced with
   the "On this page" Table of Contents (built by buildArticleToc in
   script.js).  The TOC is now the only content in .article-sidebar.

   LAYOUT:
     .article-container is a flex row (sidebar left + article right).
     Sidebar is 220px wide; .article gets flex:1 and takes all remaining
     space, making the body noticeably wider than before.

   TOC STRUCTURE (injected by JS):
     <nav id="article-toc">
       <p class="article-toc-title">On this page</p>
       <ul class="article-toc-list">
         <li class="toc-h2"><a>…</a></li>   ← h2 headings
         <li class="toc-h3"><a>…</a></li>   ← h3 headings (indented)
       </ul>
     </nav>
   Active section: JS adds .is-active to the <a> for the current heading. */

/* Sidebar container: fixed width so the article body is predictably wide */
.article-sidebar {
  width: 220px !important;
  min-width: 180px !important;
  max-width: 240px !important;
  flex-shrink: 0 !important;
}

/* TOC nav: sticky so it scrolls with the user down long articles.
   Offset clears the sticky header (+24px BLAST gap). */
.article-sidebar .article-toc {
  position: sticky !important;
  top: calc(var(--ws-header-height, 68px) + 24px) !important;
}

/* "ON THIS PAGE" label — uppercase, muted, small caps feel */
.article-toc-title {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: #939393 !important;
  margin: 0 0 10px 0 !important;
  padding: 0 !important;
}

/* TOC list: no bullets, no default padding */
.article-toc-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* TOC links: muted grey, left-border accent on active */
.article-toc-list a {
  display: block !important;
  padding: 5px 10px !important;
  font-size: 14px !important;
  color: #707070 !important;
  border-left: 2px solid transparent !important;
  line-height: 1.4 !important;
  border-radius: 0 4px 4px 0 !important;
  text-decoration: none !important;
  transition: color 0.12s, background 0.12s, border-color 0.12s !important;
}
.article-toc-list a:hover {
  color: rgba(0, 86, 214, 1) !important;
  background: rgba(0, 86, 214, 0.04) !important;
  border-left-color: rgba(0, 86, 214, 0.25) !important;
}

/* Active section: brand-colour border + text + very subtle tinted bg */
.article-toc-list a.is-active {
  color: rgba(0, 86, 214, 1) !important;
  border-left-color: rgba(0, 86, 214, 1) !important;
  background: rgba(0, 86, 214, 0.06) !important;
  font-weight: 600 !important;
}

/* h3 sub-items: indented and slightly smaller than h2 items */
.article-toc-list .toc-h3 > a {
  padding-left: 20px !important;
  font-size: 12px !important;
}

/* ════════════════════════════════════════════════════════════════════
   ARTICLE PAGE — VISITED LINK COLOUR REMOVAL
   ════════════════════════════════════════════════════════════════════
   Zendesk's default rgba(0, 86, 214, 1) (typically a muted purple/grey)
   makes every link the user has ever clicked appear faded.  This creates
   visual noise on article cards and list items.

   INTENT (from user): links are black (rgba(25, 23, 23, 1)) by default,
   turn blue (rgba(0, 86, 214, 1)) only on hover/active — visited links must
   NOT turn purple.  We achieve this by forcing a:visited to inherit
   the same color as a non-visited link, and leaving hover blue. */

/* Global: visited links keep the same colour as unvisited */
a:visited {
  color: rgba(0, 86, 214, 1) !important;
}

/* Article body links: always rgba(0, 86, 214, 1) (blue), no purple on visited */
.article-body a {
  color: rgba(0, 86, 214, 1) !important;
}
.article-body a:visited {
  color: rgba(0, 86, 214, 1) !important;
}
.article-body a:hover,
.article-body a:active {
  color: rgba(0, 86, 214, 1) !important;
  text-decoration: underline !important;
}

/* Article/section card title links: start as rgba(25, 23, 23, 1) (black),
   go blue only on card hover — the parent :hover rule in the
   existing .section-article-card-link:hover block handles this.
   We only need to ensure visited state is not purple. */
.article-list-link {
  color: rgba(25, 23, 23, 1) !important;
}
.article-list-link:visited {
  color: rgba(25, 23, 23, 1) !important;
}
.article-list-link:hover,
.article-list-link:active {
  color: rgba(0, 86, 214, 1) !important;
}

/* ════════════════════════════════════════════════════════════════════
   CATEGORY PAGE — VISUAL HIERARCHY + WHITE HERO BREADCRUMBS
   ════════════════════════════════════════════════════════════════════

   THREE CHANGES:
   1. HERO BREADCRUMBS: The global breadcrumb rule colours text #707070,
      which is barely readable against the dark brand-colour hero
      background.  We override to white/translucent inside .category-hero
      and .section-page-hero.

   2. HERO ICON REMOVED: The open-book icon in .category-hero-body
      duplicates the icon shown on every category block on the home page.
      Hiding it gives the hero a cleaner, text-focused appearance.

   3. SECTION HIERARCHY: Section titles (.section-tree-title) get a
      brand-colour bottom border accent and more vertical spacing.
      Sections are separated by a hairline divider.  Article list items
      get a touch more breathing room. */

/* ── 1. White breadcrumbs inside category hero ── */
.category-hero-breadcrumb .breadcrumbs li a,
.category-hero-breadcrumb .breadcrumbs li span {
  color: rgba(255, 255, 255, 0.75) !important;
  font-weight: 500 !important;
}
.category-hero-breadcrumb .breadcrumbs li:last-child > a,
.category-hero-breadcrumb .breadcrumbs li:last-child > span {
  color: #fff !important;
  font-weight: 600 !important;
}
.category-hero-breadcrumb .breadcrumbs li + li::before {
  color: rgba(255, 255, 255, 0.4) !important;
}

/* ── 1b. White breadcrumbs inside section page hero ── */
.section-page-breadcrumb .breadcrumbs li a,
.section-page-breadcrumb .breadcrumbs li span {
  color: rgba(255, 255, 255, 0.75) !important;
  font-weight: 500 !important;
}
.section-page-breadcrumb .breadcrumbs li:last-child > a,
.section-page-breadcrumb .breadcrumbs li:last-child > span {
  color: #fff !important;
  font-weight: 600 !important;
}
.section-page-breadcrumb .breadcrumbs li + li::before {
  color: rgba(255, 255, 255, 0.4) !important;
}

/* ── 2. Category hero icon — shown again (display:none removed); script.js
   populates it with the same keyword-matched icon as the home category card. ── */

/* ── 3. Section tree: a 2-column grid so the row gap equals the column gap.
   The old flex layout plus per-section margin/padding/border made the rows
   far taller than the columns (and double-bordered the cards); now the cards
   are spaced only by a single 24px grid gap on both axes. */
.section-tree {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 24px !important;
}
@media (max-width: 767px) {
  .section-tree { grid-template-columns: 1fr !important; }
}
.section-tree .section { max-width: none !important; margin: 0 !important; }
/* Section title: inline brand-colour bottom border acts as an accent bar */
.section-tree-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: rgba(25, 23, 23, 1) !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 14px !important;
  padding-bottom: 8px !important;
  border-bottom: 2px solid rgba(0, 86, 214, 1) !important;
  /* inline-FLEX (not inline-block) so the title shrinks to its content for the
     underline accent AND the 8px gap to the brand dot (::before) still applies —
     `gap` is ignored on inline-block, which made the dot collide with the text. */
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important; /* BLAST sp-2 — space between the brand dot and the text */
}
/* Article list: slightly more vertical breathing room per item */
.article-list-item {
  padding: 5px 0 !important;
}

/* ════════════════════════════════════════════════════════════════════
   SEARCH RESULTS — GENERATIVE ANSWER CARD
   ════════════════════════════════════════════════════════════════════
   The {{generative_answers}} helper renders an AI-generated quick answer
   at the top of results when the Zendesk AI add-on is active.

   PROBLEMS:
   - The answer text is rendered with <strong> / <b> tags, making it
     visually heavy and hard to read as flowing prose.
   - There is no visual container — the answer blends into the page.

   FIXES:
   - Wrap the answer in the same card language as the article cards
     (white bg, 1px border, 12px radius, soft shadow).
   - Strip bold weight from all inline text inside the answer block. */

/* Generative answer card */
.generative-answer {
  background: #fff !important;
  border: 1px solid #ededed !important;
  border-radius: 12px !important;
  padding: 20px 24px !important;
  margin-bottom: 20px !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
}

/* Remove bold from AI answer body text so it reads as normal prose */
.generative-answer strong,
.generative-answer b {
  font-weight: 400 !important;
}

/* ████████████████████████████████████████████████████████████████████████
   BLAST DESIGN SYSTEM LAYER
   ████████████████████████████████████████████████████████████████████████
   Source: BLAST Design System (Figma) → design-system-tokens.md
   This block is appended LAST so it is the authoritative styling layer.

   What it does:
     1. Declares every BLAST token as a CSS custom property (:root)
     2. Applies the type system (P22 Mackinac display serif for H1/hero
        titles, Proxima Nova body sans everywhere else) using the token
        font stacks — licensed names first, web-font fallbacks loaded in
        document_head.hbs (Fraunces / Mulish)
     3. Sets BLAST neutral text colors, the #f6f6f6 page background, and
        link behaviour (black→blue, no visited purple)
     4. Standardises radius + shadow on card surfaces to the token scale
     5. Page-specific refinements: home categories, category hierarchy,
        article TOC sidebar + wider body + related-articles cards, search.

   NOTE: the ad-hoc hex greys used earlier in this file were already
   remapped to the BLAST neutral scale in a separate pass, so the values
   below and above now share one palette.
   ████████████████████████████████████████████████████████████████████████ */

:root {
  /* ── Neutrals (gray) ── */
  --blast-white:    #ffffff;
  --blast-gray-50:  #f6f6f6;
  --blast-gray-100: #fbfbfb;
  --blast-gray-150: #eeeeee;
  --blast-gray-200: #ededed;
  --blast-gray-250: #d0d0d0;
  --blast-gray-300: #c1c1c1;
  --blast-gray-400: #939393;
  --blast-gray-500: #707070;
  --blast-gray-600: #525252;
  --blast-gray-700: #454545;
  --blast-gray-800: #262626;
  --blast-gray-900: #171717;

  /* ── Blue (brand) ── */
  --blast-blue-50:  #e9f2ff;
  --blast-blue-100: #afcfff;
  --blast-blue-500: #0056d6;  /* == rgba(0, 86, 214, 1) / rgba(0, 86, 214, 1) */
  --blast-blue-600: #004bbb;  /* == hover link */
  --blast-blue-700: #0041a1;

  /* ── Semantic: text ── */
  --color-text-primary:   var(--blast-gray-700); /* #454545 */
  --color-text-secondary: var(--blast-gray-500); /* #707070 */
  --color-text-tertiary:  var(--blast-gray-400); /* #939393 */
  --color-text-disabled:  var(--blast-gray-300); /* #c1c1c1 */
  --color-text-strong:    var(--blast-gray-900); /* #171717 — headings */
  --color-text-blue:      var(--blast-blue-500);
  --color-text-white:     var(--blast-white);

  /* ── Semantic: bg / border ── */
  --color-bg-base-light:   var(--blast-white);
  --color-bg-base-default: var(--blast-gray-50);
  --color-bg-blue-subtle:  var(--blast-blue-50);
  --color-border-default:  var(--blast-gray-200); /* #ededed */
  --color-border-bold:     var(--blast-gray-250); /* #d0d0d0 */
  --color-border-focus:    var(--blast-blue-500);

  /* ── Radius scale ── */
  --radius-none: 0px;
  --radius-sm: 2px;
  --radius-default: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;

  /* ── Spacing scale (semantic) ── */
  --sp-8: 8px;   --sp-16: 16px; --sp-24: 24px; --sp-32: 32px;
  --sp-40: 40px; --sp-48: 48px; --sp-56: 56px;

  /* ── Shadows (Baja + Tailwind tokens) ── */
  --shadow-sm:       0 1px 2px 0 rgba(0,0,0,0.05);
  --shadow-card:     0 2px 3px 0 rgba(0,0,0,0.16);
  --shadow:          0 3px 10px 2px rgba(0,0,0,0.10);
  --shadow-md:       0 4px 6px -1px rgba(0,0,0,0.10);
  --shadow-lg:       0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -2px rgba(0,0,0,0.10);
  --shadow-dropdown: 5px 3px 20px 0 rgba(0,0,0,0.10);

  /* ── Type families ──
     Licensed BLAST fonts first; loaded web-font analogs as fallback. */
  --font-display: 'P22 Mackinac', 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:    'Proxima Nova', 'Mulish', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* ════════════════════════════════════════════════════════════════════
   TYPOGRAPHY
   ════════════════════════════════════════════════════════════════════
   Body uses Proxima/Mulish (set via 'Proxima Nova', 'Mulish', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif in manifest too).
   Only H1-level "hero" titles use the Mackinac/Fraunces DISPLAY serif —
   per BLAST: heading/Heading 1 = P22 Mackinac; H2–H5 = Proxima Nova. */

body {
  font-family: var(--font-body) !important;
  color: var(--color-text-primary);
  background-color: var(--color-bg-base-default) !important;
  font-size: 16px;
  line-height: 1.5;          /* 24px at 16px — body/paragraph token */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Display serif for the big H1 moments only */
h1,
.article-title,
.category-hero-title,
.section-page-title {
  font-family: var(--font-display) !important;
  font-weight: 500 !important;        /* Mackinac Medium */
  letter-spacing: -0.015em !important;
  line-height: 1.12 !important;
}

/* Token sizes for the hero / page H1s */
.category-hero-title,
.section-page-title { font-size: 36px !important; }   /* heading/H1 */
.article-title      { font-size: 36px !important; line-height: 1.15 !important; }

/* H2–H5 stay in the body sans (inherited from 'Proxima Nova', 'Mulish', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif); we only
   pin the weight to Semibold to match the BLAST heading styles. Sizes are
   intentionally NOT forced globally so component-specific headings
   (e.g. .section-tree-title at 16px) keep their tuned sizes. */
h2, h3, h4, h5, h6 {
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
}

/* The search-results H1 holds the AI answer + count text — keep it sans
   and modest so it reads as a label, not a giant serif hero. */
.search-results-subheading {
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  font-size: 20px !important;
  letter-spacing: normal !important;
}

/* ════════════════════════════════════════════════════════════════════
   LINKS — black to start, blue on hover/active, never visited-purple
   ════════════════════════════════════════════════════════════════════
   Manifest already sets rgba(0, 86, 214, 1) == rgba(0, 86, 214, 1) and
   rgba(0, 75, 187, 1) to blue/600; these rules reinforce it at the CSS
   layer and define the "starts as text colour" behaviour for nav/list
   links the user asked for. */
a:visited { color: inherit; }                 /* kill the purple/tan visited colour */
a:hover, a:active { color: var(--blast-blue-600); }

/* In-body article prose links stay BLUE (discoverable), underline on hover */
.article-body a,
.article-body a:visited { color: var(--color-text-blue) !important; }
.article-body a:hover,
.article-body a:active   { color: var(--blast-blue-600) !important; text-decoration: underline !important; }

/* ════════════════════════════════════════════════════════════════════
   CARD SURFACES — unify radius + shadow on the token scale
   ════════════════════════════════════════════════════════════════════ */
.section-article-card,
.search-results-list > li,
.generative-answer,
.blocks-item-link,
.article {
  border-radius: var(--radius-xl) !important;   /* 12px */
  border: 1px solid var(--color-border-default) !important;
  box-shadow: var(--shadow-sm) !important;
}
.section-article-card:hover,
.blocks-item-link:hover {
  border-color: var(--color-border-bold) !important;
  box-shadow: var(--shadow-md) !important;
}

/* Buttons + inputs to token radius + body font */
.button { border-radius: var(--radius-md) !important; font-family: var(--font-body) !important; font-weight: 700 !important; }
.search input[type=search],
input[type=text], input[type=email], input[type=search], textarea, select {
  border-radius: var(--radius-md) !important;
  font-family: var(--font-body) !important;
}

/* ════════════════════════════════════════════════════════════════════
   HOME PAGE — categories grid (show ALL categories, even cards)
   ════════════════════════════════════════════════════════════════════
   Note (user): "home page shows only a few categories, below lists all".
   We render every category as an equal card in a responsive grid so the
   full set is always visible at a glance — no truncated/odd first row.
   Section headings get the BLAST H3 treatment. */
.section.knowledge-base .blocks-list,
.categories .blocks-list {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;   /* condensed 3-up grid */
  gap: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
@media (max-width: 1023px) {
  .section.knowledge-base .blocks-list,
  .categories .blocks-list { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
  .section.knowledge-base .blocks-list,
  .categories .blocks-list { grid-template-columns: 1fr !important; }
}
.blocks-item { margin: 0 !important; }
.blocks-item-link {
  height: 100% !important;
  background: var(--color-bg-base-light) !important;
  border-radius: var(--radius-xl) !important;
}
/* Home section headings ("Categories", "Promoted articles") → H3 token (24px) */
.section-heading,
.home-section h2,
.knowledge-base > .section-heading {
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  font-size: 24px !important;
  color: var(--color-text-strong) !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 20px !important;
}

/* ════════════════════════════════════════════════════════════════════
   CATEGORY PAGE — stronger hierarchy (header ▸ section title ▸ articles)
   ════════════════════════════════════════════════════════════════════
   Builds on the earlier category block: larger serif hero title, clearer
   section titles, and more separation between the three levels. White
   breadcrumbs + removed hero icon are handled in the earlier block. */
.category-hero { padding-top: 40px !important; padding-bottom: 44px !important; }
.category-hero-description,
.section-page-description {
  color: rgba(255,255,255,0.82) !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
}
/* Section title: larger (H4) with the brand accent underline */
.section-tree-title {
  font-size: 20px !important;
  font-weight: 600 !important;
  color: var(--color-text-strong) !important;
  padding-bottom: 10px !important;
  border-bottom: 2px solid var(--blast-blue-500) !important;
}
/* Article rows: clear hover affordance, secondary meta colour */
.article-list-link {
  font-size: 16px !important;
  line-height: 1.5 !important;
}
.article-list-item { padding: 6px 0 !important; }

/* ════════════════════════════════════════════════════════════════════
   ARTICLE PAGE — wider body + related-articles cards
   ════════════════════════════════════════════════════════════════════ */
/* Wider reading column: sidebar fixed, article takes the rest */
.article-container { gap: 48px !important; align-items: flex-start !important; }
.article { flex: 1 1 auto !important; min-width: 0 !important; }
.article-body { max-width: none !important; font-size: 16px !important; line-height: 1.5 !important; } /* body/paragraph 16/24 */

/* TOC sidebar refinements (token type + sticky already set above).
   Per the user's "text is black to start" rule, inactive nav links use
   text/primary (#454545, reads as near-black); the active section turns
   brand blue via the .is-active rule above. */
.article-toc-title { color: var(--color-text-tertiary) !important; }
.article-toc-list a { color: var(--color-text-primary) !important; }
.article-toc-list a:hover { color: var(--blast-blue-500) !important; }

/* Mobile (<1024): sidebar stacks full-width above the article as a card */
@media (max-width: 1023px) {
  .article-sidebar {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }
  .article-sidebar .article-toc {
    position: static !important;
    border: 1px solid var(--color-border-default) !important;
    border-radius: var(--radius-xl) !important;
    background: var(--color-bg-base-light) !important;
    padding: 16px 18px !important;
  }
}

/* ── Related / recently-viewed articles (bottom of article) ──────────
   Styles the {{recent_articles}} + {{related_articles}} helper output
   inside .article-relatives into a Polymarket-docs-style card grid:
   a labelled section, then equal cards with a trailing arrow. */
.article-relatives {
  display: block !important;
  margin-top: 48px !important;
  padding-top: 32px !important;
  border-top: 1px solid var(--color-border-default) !important;
}
.article-relatives > * + * { margin-top: 32px !important; }
.article-relatives h2,
.article-relatives h3,
.article-relatives h4 {
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  font-size: 20px !important;
  color: var(--color-text-strong) !important;
  margin: 0 0 16px 0 !important;
}
.article-relatives ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 12px !important;
}
.article-relatives li { margin: 0 !important; }
.article-relatives li a {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 16px 18px !important;
  background: var(--color-bg-base-light) !important;
  border: 1px solid var(--color-border-default) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-sm) !important;
  color: var(--color-text-strong) !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
  transition: border-color .14s ease, box-shadow .14s ease, color .14s ease !important;
}
/* trailing arrow built with a pseudo-element so we need no template change */
.article-relatives li a::after {
  content: "→" !important;
  color: var(--color-text-tertiary) !important;
  font-weight: 400 !important;
  flex-shrink: 0 !important;
  transition: transform .14s ease, color .14s ease !important;
}
.article-relatives li a:visited { color: var(--color-text-strong) !important; }
.article-relatives li a:hover {
  border-color: var(--color-border-bold) !important;
  box-shadow: var(--shadow-md) !important;
  color: var(--blast-blue-500) !important;
}
.article-relatives li a:hover::after {
  transform: translateX(3px) !important;
  color: var(--blast-blue-500) !important;
}

/* ════════════════════════════════════════════════════════════════════
   SEARCH PAGE — quick-answer card + result icon tile
   ════════════════════════════════════════════════════════════════════
   The generative answer card + de-bolding are handled in the earlier
   block; here we apply the token shadow and make the result type-icon
   tile match the category icon tiles (blue-50 bg, brand-blue glyph). */
.generative-answer { box-shadow: var(--shadow-sm) !important; border-radius: var(--radius-xl) !important; }
.search-result-type-icon {
  background: var(--color-bg-blue-subtle) !important;  /* blue-50, like category tiles */
  color: var(--blast-blue-500) !important;
  border-radius: var(--radius-lg) !important;
}

/* ════════════════════════════════════════════════════════════════════
   UNLISTED ARTICLES — hide rows tagged by script.js
   ════════════════════════════════════════════════════════════════════
   script.js fetches the set of `unlisted`-labelled article ids from the
   Help Center API and tags any link to them — by setting
   data-unlisted-item="true" on the nearest list row — across listings,
   search results, the instant-search dropdown, and related/recent lists.
   This rule does the actual hiding.

   NOTE: hiding is JS-driven, NOT server-rendered. Curlybars can't read
   article labels in list/templates (and Zendesk's importer rejects
   `{{#each labels}}{{#is name ...}}`), so the templates carry no marker.
   The article PAGE itself is never tagged, so an unlisted article stays
   fully visible when opened by direct link (script.js adds a noindex meta
   there instead). */
[data-unlisted-item="true"] { display: none !important; }

/* ════════════════════════════════════════════════════════════════════
   FULL-WIDTH LAYOUT — article page 3-column + wider search
   ════════════════════════════════════════════════════════════════════
   The global container was widened (max-width 1600px) so pages use the
   full page instead of a narrow centered column. On the article page that
   extra width would over-stretch the reading column, so the layout becomes
   a 3-column docs grid: TOC (left) · article (center, readable) · rail
   (right). The rail fills the right margin with the related/recently-viewed
   articles + a help card, instead of leaving it empty.

   Responsive:
     • ≥1400px → true 3 columns (TOC + article + sticky rail)
     • 1024–1399px → TOC + article on one row, rail wraps full-width below
     • <1024px → everything stacks (existing mobile behaviour) */

@media (min-width: 1024px) {
  /* allow the rail to wrap onto its own row below the article when narrow */
  .article-container { flex-wrap: wrap !important; gap: 32px !important; }

  /* TOC sidebar: fixed left column */
  .article-sidebar {
    flex: 0 0 260px !important;
    width: 260px !important;
    min-width: 260px !important;
    max-width: 260px !important;
  }

  /* Article: fills the space between the sidebars (no 66% cap).
     flex-basis 0 (not auto) is essential: with flex-wrap on, an `auto`
     (content-sized) basis is too wide to share the row, so the columns
     wrap onto separate rows. Basis 0 lets the article shrink and sit
     between the fixed-width TOC and rail. */
  .article {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  /* Rail: full-width (wraps below) until there's room for a 3rd column */
  .article-rail { flex: 0 0 100% !important; width: 100% !important; }
}

@media (min-width: 1400px) {
  /* enough room → rail becomes a 3rd column on the right.
     NOT sticky: a short sticky rail pins near the top of the viewport and
     appears to "float in the middle" beside a long article. In normal flow it
     stays anchored in its column and scrolls together with the article. */
  .article-rail {
    flex: 0 0 340px !important;
    width: 340px !important;
    align-self: flex-start !important;
  }
}

/* Rail internals: stack its blocks with spacing */
.article-rail > * + * { margin-top: 20px !important; }

/* Related/recently-viewed inside the rail: single column, no top divider
   (the divider only made sense when this sat at the bottom of the body) */
.article-rail .article-relatives {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: none !important;
}
.article-rail .article-relatives ul { grid-template-columns: 1fr !important; }
.article-rail .article-relatives h2,
.article-rail .article-relatives h3,
.article-rail .article-relatives h4 { font-size: 16px !important; }

/* Help card — always present so the rail is never empty */
.article-rail-help {
  background: var(--color-bg-base-light);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  padding: 20px;
}
.article-rail-help-title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  color: var(--color-text-strong);
  margin: 0 0 8px 0;
}
.article-rail-help .request-callout,
.article-rail-help-text { margin: 0 0 14px; color: var(--color-text-secondary); font-size: 14px; }
.article-rail-help a:not(.article-rail-help-button) { color: var(--blast-blue-500); font-weight: 600; }
/* Support CTA rendered as a solid brand button so it's clearly clickable */
.article-rail-help-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 4px;
  padding: 11px 18px;
  background: var(--blast-blue-500) !important;
  color: #fff !important;
  font-weight: 600;
  font-size: 14px;
  border-radius: 8px;
  text-decoration: none !important;
  transition: filter 0.15s ease;
}
.article-rail-help-button:hover,
.article-rail-help-button:focus { filter: brightness(0.92); }
/* Force the white label in EVERY link state. The theme's global
   `a:visited { color: rgba(0, 86, 214, 1) !important }` (blue) outranks a plain
   `.article-rail-help-button`, so on a request page you've already visited the
   label would turn blue-on-blue and vanish. This higher-specificity selector
   (0,3,1 — includes :visited) with !important keeps it white in all states. */
.article-rail-help a.article-rail-help-button,
.article-rail-help a.article-rail-help-button:link,
.article-rail-help a.article-rail-help-button:visited,
.article-rail-help a.article-rail-help-button:hover,
.article-rail-help a.article-rail-help-button:focus,
.article-rail-help a.article-rail-help-button:active { color: #fff !important; }

/* Sub-nav search: widen so it uses the top-right space (was capped at 280px) */
/* Cap applies only to the ARTICLE sub-nav (plain .sub-nav). The category
   (.sub-nav-inner) and section (.sub-nav-section) sub-navs keep their own
   full-width search — without this exclusion the 440px cap was bleeding onto
   them and making the category search look tiny. */
.sub-nav:not(.sub-nav-inner):not(.sub-nav-section) .search-container { max-width: 440px !important; }
@media (min-width: 768px) {
  .sub-nav:not(.sub-nav-inner):not(.sub-nav-section) .search-container { flex: 0 1 440px !important; }
}

/* ════════════════════════════════════════════════════════════════════
   HERO SEARCH — clean white box, consistent focus ring
   ════════════════════════════════════════════════════════════════════
   On the live site, Zendesk's base / instant-search CSS adds a default
   focus outline (and sometimes a grey border in the combobox "expanded"
   state) on the search input. That outline is rectangular, so it gets
   clipped against the box's rounded corners and looks cut off. We hard-
   suppress any border/outline on the input and instead put a single
   rounded focus ring on the white box itself, so the focus state follows
   the box shape and stays consistent. */
.hero-search-container .search { background: #fff !important; }
.hero-search-container .search input[type=search] {
  background: #fff !important;
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 12px !important;   /* match the .search wrapper so no corner sliver shows */
}
/* Focus indicator is the single rounded white ring on the box itself
   (.hero-inner .search:focus-within) — it follows the rounded corners, so
   nothing looks cut off. No separate ring is added here. */

/* ════════════════════════════════════════════════════════════════════
   PERSISTENT HEADER SEARCH
   ════════════════════════════════════════════════════════════════════
   One search field in the global header (header.hbs), shown on every interior
   page — it replaces the old per-page sub-nav search bars. It inherits the
   shared .search look (white box, 1.5px border, blue focus ring) for a
   consistent appearance everywhere; only its size and placement are set here.
   Shown on the SEARCH RESULTS page too — Zendesk pre-fills every {{search}}
   input with the current query there, so the header search arrives pre-filled
   and refinable (the old page-level results bar was removed). Hidden only on
   HOME while the hero's big search is on screen, via :has(). */
.header-search-container {
  flex: 0 1 480px;
  min-width: 120px;
  margin: 0 24px;
}
.header-search-container .search { border-radius: 8px; }
.header-search-container .search input[type=search] { height: 42px; font-size: 15px; }

body:has(.hero-search-container) .header-search-container { display: none !important; }

/* HOME ONLY: once the hero search scrolls behind the sticky header, script.js
   (homeHeaderSearchReveal, passive scroll listener) adds body.ws-hero-scrolled
   and the header search fades in — so the sticky header always offers search.
   Specificity (0,3,1) deliberately beats the (0,2,1) hide rule above.
   The results page has no hero, so it stays hidden there. */
body.ws-hero-scrolled:has(.hero-search-container) .header-search-container {
  display: block !important;
  animation: ws-header-search-in 0.22s ease;
}
@keyframes ws-header-search-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  body.ws-hero-scrolled:has(.hero-search-container) .header-search-container { animation: none; }
}

/* ════════════════════════════════════════════════════════════════════
   SINGLE-SECTION CATEGORY → SECTION-PAGE LOOK
   ════════════════════════════════════════════════════════════════════
   Companion to script.js › singleSectionCategory. When a category has exactly
   ONE section, the JS adds .section-tree--single and rebuilds the article rows
   with the section page's .section-article-card* classes (those styles apply
   as-is). This block removes what the JS can't: the 2-col card grid, the
   section-card chrome, and the redundant lone section title. Placed at the end
   of the file so it beats the earlier .section-tree grid/card rules. */
.section-tree.section-tree--single {
  display: block !important;   /* kill the 2-col grid — one full-width list */
}
.section-tree.section-tree--single > .section {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  max-width: none !important;
}
.section-tree.section-tree--single > .section:hover {
  box-shadow: none !important;
}
.section-tree.section-tree--single .section-tree-title {
  display: none !important;    /* the category hero already names the page */
}

/* Below the desktop-nav breakpoint the search drops to its own full-width row
   beneath the logo + menu button, so it never crowds them. */
@media (max-width: 1023px) {
  .header-inner { flex-wrap: wrap; height: auto; padding-top: 12px; padding-bottom: 12px; }
  .header-search-container { order: 3; flex-basis: 100%; max-width: none; min-width: 0; margin: 12px 0 2px; }
}

/* ════════════════════════════════════════════════════════════════════
   TAG FILTERS (companion to script.js › labelTagFilters)
   ════════════════════════════════════════════════════════════════════
   Floating "Filter by tag" side panel on category/section pages (sticky
   below the header, like the search sidebar) and a sidebar block on the
   search-results page. Chips are real <label><input type=checkbox>…</label>
   pairs — the input is visually hidden but keyboard-focusable; the chip
   shows a focus ring via :has(:focus-visible). BLAST: 14px body, radius 8,
   brand blue selected state on the blue tint. */
[data-ws-tag-hidden="true"] { display: none !important; }
[data-ws-tag-empty="true"]  { display: none !important; }
/* Injected rows (scope articles not rendered by the template) exist only for
   filtering: hidden unless a selected tag matches them. */
[data-ws-tag-injected]:not([data-ws-tag-show="true"]) { display: none !important; }

/* Floating side panel (category + section pages) */
.ws-tag-filter-side {
  flex: 0 0 240px;
  position: sticky;
  top: calc(var(--ws-header-height, 68px) + 24px);
  align-self: flex-start;
  max-height: calc(100vh - var(--ws-header-height, 68px) - 48px);
  overflow: auto;
  background: #fff;
  border: 1px solid #ededed;
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.category-container { gap: 32px; }
/* Section page: JS wraps the content in a flex row with the panel */
.ws-side-layout {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  padding-top: 32px;
}
.ws-side-layout > .section-page-content {
  flex: 1;
  min-width: 0;
  padding-top: 0;   /* the wrapper supplies the 32px top rhythm */
}

.ws-tag-filter-title {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #707070;
  margin: 0;
}
/* Sidebar variant (search results) inherits the .filters-in-section card look */
.ws-tag-filter-sidebar .ws-tag-chips { margin-top: 10px; }

.ws-tag-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  min-width: 0;
}
/* In the side panel the chips stack as full-width rows: name left, count right */
.ws-tag-filter-side .ws-tag-chips { flex-direction: column; align-items: stretch; }
.ws-tag-filter-side .ws-tag-chip { width: 100%; justify-content: space-between; }

.ws-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: #fff;
  border: 1px solid #d0d0d0;
  border-radius: 8px;
  font-size: 14px;
  color: #171717;
  cursor: pointer;
  user-select: none;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.ws-tag-chip:hover { border-color: #939393; }
/* Visually-hidden but focusable checkbox */
.ws-tag-chip input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
}
.ws-tag-chip:has(input:checked) {
  background: #e9f2ff;                 /* brand tint */
  border-color: var(--blast-blue-500, #0056d6);
  color: var(--blast-blue-500, #0056d6);
  font-weight: 600;
}
.ws-tag-chip:has(input:focus-visible) {
  box-shadow: 0 0 0 3px rgba(0, 86, 214, 0.25);
}
.ws-tag-chip-count {
  font-size: 12px;
  color: #707070;
  font-variant-numeric: tabular-nums;
}
.ws-tag-chip:has(input:checked) .ws-tag-chip-count { color: inherit; }

.ws-tag-filter-clear {
  background: none;
  border: none;
  padding: 4px 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--blast-blue-500, #0056d6);
  cursor: pointer;
  border-radius: 6px;
  align-self: flex-start;
}
.ws-tag-filter-clear:hover { text-decoration: underline; }
.ws-tag-filter-clear:focus-visible { box-shadow: 0 0 0 3px rgba(0, 86, 214, 0.25); outline: none; }

/* Mobile: the floating panel becomes a normal full-width block on top */
@media (max-width: 1023px) {
  .category-container { flex-wrap: wrap; }
  .ws-side-layout { flex-direction: column; }
  .ws-tag-filter-side {
    position: static;
    flex: 1 1 100%;
    width: 100%;
    max-height: none;
  }
  .ws-tag-filter-side .ws-tag-chips { flex-direction: row; align-items: center; }
  .ws-tag-filter-side .ws-tag-chip { width: auto; }
}

/* ════════════════════════════════════════════════════════════════════
   HEADER CORNER — signed-out polish
   ════════════════════════════════════════════════════════════════════
   Signed-out order (header.hbs): Community · Sign in · [Submit a request].
   The list is a flex row with a real gap, and "Sign in" is a quiet padded
   link with a soft hover pill — so nothing crowds the primary CTA. The
   signed-in view (Community · CTA · avatar) inherits the same rhythm. */
.user-nav-list {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.user-nav-list > li { display: inline-flex; }
.user-nav-list a.sign-in {
  font-weight: 600;
  padding: 9px 14px !important;
  border-radius: 8px;
  color: #3a4046;
}
.user-nav-list a.sign-in:hover,
.user-nav-list a.sign-in:focus {
  background: #f6f6f6;
  color: var(--blast-blue-500, #0056d6);
  text-decoration: none;
}
/* a touch more air before the solid button */
.user-nav-list a.btn-primary-nav { margin-left: 6px !important; }

/* ════════════════════════════════════════════════════════════════════
   SEARCH SIDEBAR — collapse when empty
   ════════════════════════════════════════════════════════════════════
   The stock Type filter was removed from search_results.hbs (it always
   read "All types / Articles" with identical counts). The sidebar now
   exists for the injected "Filter by tag" panel and the rarely-rendered
   stock sections (source / subfilter / content-tag). When none of them
   are present the sidebar collapses so the results take the full width —
   :has(*) is whitespace-safe, and the rule un-hides the sidebar the
   moment the tag panel is injected. */
.search-results-sidebar:not(:has(*)) { display: none; }

/* ════════════════════════════════════════════════════════════════════
   DARK MODE (html[data-ws-theme="dark"])
   ════════════════════════════════════════════════════════════════════
   The attribute is set BEFORE first paint (document_head.hbs snippet) from
   localStorage "wsTheme" or the OS preference; the header .ws-theme-toggle
   (script.js › themeToggle) flips + persists it.

   Strategy: (1) remap the BLAST layer's CSS variables — every rule that uses
   them goes dark for free, !important included; (2) systematically re-skin the
   components that use literal colors (cards, searches, lists, chips, prose).
   Brand-blue BUTTONS keep their blue/500 background (white label reads fine);
   text LINKS lighten to keep contrast on dark surfaces. Blue heroes (home /
   category / section / page heroes) already sit on brand gradients and are
   left as they are. */

/* ── Toggle button: FLOATING, bottom-left corner (both themes) ──
   Fixed so it's reachable on every page at any scroll position. Bottom-LEFT
   deliberately: the Zendesk chat widget and the back-to-top button own the
   bottom-right corner. Rendered from header.hbs but out of flow. */
.ws-theme-toggle {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 200;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: #fff;
  border: 1px solid #ededed;
  border-radius: 50%;
  color: #3a4046;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.ws-theme-toggle:hover {
  color: #171717;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
}
.ws-theme-toggle:focus-visible { box-shadow: 0 0 0 3px rgba(0, 86, 214, 0.25); outline: none; }
/* moon shown in light mode (click → dark); sun shown in dark mode */
.ws-theme-toggle .ws-theme-icon-sun { display: none; }
html[data-ws-theme="dark"] .ws-theme-toggle .ws-theme-icon-sun { display: block; }
html[data-ws-theme="dark"] .ws-theme-toggle .ws-theme-icon-moon { display: none; }

html[data-ws-theme="dark"] {
  color-scheme: dark;

  /* dark palette */
  --wsdk-bg: #0f1216;
  --wsdk-surface: #171b22;
  --wsdk-surface-2: #1e242e;
  --wsdk-border: #2a3039;
  --wsdk-border-strong: #3a414c;
  --wsdk-text: #e8ebf0;
  --wsdk-text-2: #b4bac4;
  --wsdk-muted: #8a919d;
  --wsdk-link: #82abff;
  --wsdk-link-hover: #a8c4ff;
  --wsdk-tint: rgba(96, 152, 255, 0.16);

  /* BLAST variable remaps — every var-driven rule flips automatically,
     `!important` rules included (e.g. the BLAST layer's `body { background:
     var(--color-bg-base-default) !important }`). Full inventory of the
     --color-* tokens the layer defines: */
  --color-text-primary: var(--wsdk-text-2);
  --color-text-secondary: var(--wsdk-text-2);
  --color-text-tertiary: var(--wsdk-muted);
  --color-text-disabled: #5c636e;
  --color-text-strong: var(--wsdk-text);
  --color-text-blue: var(--wsdk-link);
  --color-bg-base-light: var(--wsdk-surface);
  --color-bg-base-default: var(--wsdk-bg);
  --color-bg-blue-subtle: var(--wsdk-tint);
  --color-border-default: var(--wsdk-border);
  --color-border-bold: var(--wsdk-border-strong);
}

/* ── Base ── */
html[data-ws-theme="dark"] body {
  background-color: var(--wsdk-bg);
  color: var(--wsdk-text-2);
}
html[data-ws-theme="dark"] a { color: var(--wsdk-link); }
html[data-ws-theme="dark"] a:hover,
html[data-ws-theme="dark"] a:active { color: var(--wsdk-link-hover); }
html[data-ws-theme="dark"] h1,
html[data-ws-theme="dark"] h2,
html[data-ws-theme="dark"] h3,
html[data-ws-theme="dark"] h4 { color: var(--wsdk-text); }
html[data-ws-theme="dark"] .section-heading {
  color: var(--wsdk-text);
  border-bottom-color: var(--wsdk-border);
}

/* ── Header ── */
html[data-ws-theme="dark"] .header {
  background-color: var(--wsdk-surface);
  border-bottom-color: var(--wsdk-border);
}
html[data-ws-theme="dark"] .header.is-scrolled { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5); }
html[data-ws-theme="dark"] .nav-wrapper-desktop a { color: var(--wsdk-text-2); }
html[data-ws-theme="dark"] .nav-wrapper-desktop a:hover { color: var(--wsdk-text); }
html[data-ws-theme="dark"] .user-nav-list a.sign-in { color: var(--wsdk-text-2); }
html[data-ws-theme="dark"] .user-nav-list a.sign-in:hover,
html[data-ws-theme="dark"] .user-nav-list a.sign-in:focus {
  background: var(--wsdk-surface-2);
  color: var(--wsdk-link);
}
html[data-ws-theme="dark"] .ws-theme-toggle {
  background: var(--wsdk-surface-2);
  border-color: var(--wsdk-border-strong);
  color: var(--wsdk-text-2);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}
html[data-ws-theme="dark"] .ws-theme-toggle:hover { color: var(--wsdk-text); }
html[data-ws-theme="dark"] .menu-button-mobile { color: var(--wsdk-text-2); }
html[data-ws-theme="dark"] .menu-button-mobile:hover { background-color: var(--wsdk-surface-2); }
html[data-ws-theme="dark"] .menu-list-mobile,
html[data-ws-theme="dark"] .dropdown-menu {
  background: var(--wsdk-surface-2);
  border-color: var(--wsdk-border-strong);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
html[data-ws-theme="dark"] .dropdown-menu a,
html[data-ws-theme="dark"] .dropdown-menu button,
html[data-ws-theme="dark"] .menu-list-mobile-items a,
html[data-ws-theme="dark"] .menu-list-mobile-items button { color: var(--wsdk-text-2); }
html[data-ws-theme="dark"] .dropdown-menu a:hover,
html[data-ws-theme="dark"] .dropdown-menu button:hover { background: rgba(255, 255, 255, 0.06); color: var(--wsdk-text); }
html[data-ws-theme="dark"] .dropdown-menu .separator,
html[data-ws-theme="dark"] .nav-divider { border-color: var(--wsdk-border); }
html[data-ws-theme="dark"] .user-info .dropdown-toggle { color: var(--wsdk-text-2); }

/* ── Search fields (header, sub-nav, hero — one consistent dark field) ── */
html[data-ws-theme="dark"] .search {
  background: var(--wsdk-surface-2);
  border-color: var(--wsdk-border-strong);
}
html[data-ws-theme="dark"] .search input[type=search],
html[data-ws-theme="dark"] .search .clear-button {
  background-color: transparent;
  color: var(--wsdk-text);
}
html[data-ws-theme="dark"] .search input[type=search]::placeholder { color: var(--wsdk-muted); }
html[data-ws-theme="dark"] .search-icon { color: var(--wsdk-muted); }
html[data-ws-theme="dark"] .search:focus-within {
  border-color: var(--wsdk-link);
  box-shadow: 0 0 0 3px rgba(96, 152, 255, 0.22);
}
html[data-ws-theme="dark"] .search input[type=search]:-webkit-autofill,
html[data-ws-theme="dark"] .search input[type=search]:-webkit-autofill:hover,
html[data-ws-theme="dark"] .search input[type=search]:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--wsdk-surface-2) inset;
  -webkit-text-fill-color: var(--wsdk-text);
}
html[data-ws-theme="dark"] .hero-search-container .search { background: var(--wsdk-surface-2) !important; }
html[data-ws-theme="dark"] .hero-search-container .search input[type=search] { background: transparent !important; color: var(--wsdk-text); }
html[data-ws-theme="dark"] .search .clear-button:hover { background: var(--wsdk-border-strong); color: var(--wsdk-text); }

/* ── Card family: home category cards, section cards, article-card rows,
      TOC, rail blocks, filters, activity cards, empty states ── */
html[data-ws-theme="dark"] .blocks-item-link,
html[data-ws-theme="dark"] .section-tree .section,
html[data-ws-theme="dark"] .section-article-card,
html[data-ws-theme="dark"] .article,
html[data-ws-theme="dark"] .article-toc,
html[data-ws-theme="dark"] .recent-articles-list li,
html[data-ws-theme="dark"] .search-results-list > li,
html[data-ws-theme="dark"] .filters-in-section,
html[data-ws-theme="dark"] .ws-tag-filter-side,
html[data-ws-theme="dark"] .activity-card,
html[data-ws-theme="dark"] .empty-state,
html[data-ws-theme="dark"] .request-sidebar,
html[data-ws-theme="dark"] .comment {
  background: var(--wsdk-surface);
  border-color: var(--wsdk-border);
}
html[data-ws-theme="dark"] .blocks-item-link:hover,
html[data-ws-theme="dark"] .section-tree .section:hover,
html[data-ws-theme="dark"] .section-article-card:hover,
html[data-ws-theme="dark"] .search-results-list > li:hover {
  border-color: var(--wsdk-border-strong);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
}
/* !important where the light theme itself uses !important on these */
html[data-ws-theme="dark"] .blocks-item-title,
html[data-ws-theme="dark"] .section-tree-title,
html[data-ws-theme="dark"] .section-article-card-title,
html[data-ws-theme="dark"] .article-title,
html[data-ws-theme="dark"] .search-results-subheading { color: var(--wsdk-text) !important; }
html[data-ws-theme="dark"] .article-votes-question { color: var(--wsdk-text-2); }
html[data-ws-theme="dark"] .blocks-item-description,
html[data-ws-theme="dark"] .section-article-card-meta,
html[data-ws-theme="dark"] .article-updated-info,
html[data-ws-theme="dark"] .article-read-time,
html[data-ws-theme="dark"] .meta-data,
html[data-ws-theme="dark"] .doc-count { color: var(--wsdk-muted); }
html[data-ws-theme="dark"] .blocks-item-icon,
html[data-ws-theme="dark"] .section-article-card-icon,
html[data-ws-theme="dark"] .search-result-type-icon {
  background: var(--wsdk-tint);
  color: var(--wsdk-link);
}
html[data-ws-theme="dark"] .blocks-item-arrow,
html[data-ws-theme="dark"] .section-article-card-arrow { color: var(--wsdk-muted); }

/* Article lists inside category cards */
html[data-ws-theme="dark"] .article-list-item { border-color: var(--wsdk-border); }
html[data-ws-theme="dark"] .article-list-link { color: var(--wsdk-text-2) !important; }
html[data-ws-theme="dark"] .article-list-link:hover,
html[data-ws-theme="dark"] .article-list-link:active { color: var(--wsdk-link) !important; }
html[data-ws-theme="dark"] .see-all-articles { color: var(--wsdk-link); }

/* ── Breadcrumbs on light surfaces (article sub-nav etc.) ── */
html[data-ws-theme="dark"] .sub-nav .breadcrumbs li,
html[data-ws-theme="dark"] .sub-nav .breadcrumbs li a { color: var(--wsdk-muted) !important; }
html[data-ws-theme="dark"] .sub-nav .breadcrumbs li:last-child,
html[data-ws-theme="dark"] .sub-nav .breadcrumbs li:last-child a { color: var(--wsdk-text-2) !important; }

/* ── Article prose ── */
html[data-ws-theme="dark"] .article-body { color: var(--wsdk-text-2); }
html[data-ws-theme="dark"] .article-body strong { color: var(--wsdk-text); }
html[data-ws-theme="dark"] .article-body pre,
html[data-ws-theme="dark"] .article-body code {
  background: var(--wsdk-surface-2);
  border-color: var(--wsdk-border);
  color: var(--wsdk-text-2);
}
html[data-ws-theme="dark"] .article-body blockquote {
  background: var(--wsdk-surface-2);
  border-color: var(--wsdk-link);
  color: var(--wsdk-text-2);
}
html[data-ws-theme="dark"] .article-body table th { background: var(--wsdk-surface-2); }
html[data-ws-theme="dark"] .article-body table th,
html[data-ws-theme="dark"] .article-body table td { border-color: var(--wsdk-border); }
html[data-ws-theme="dark"] .article-body img { opacity: 0.92; }
html[data-ws-theme="dark"] .article-body hr { border-color: var(--wsdk-border); }

/* TOC + rail */
html[data-ws-theme="dark"] .article-toc-title { color: var(--wsdk-muted); }
html[data-ws-theme="dark"] .article-toc a { color: var(--wsdk-text-2); }
html[data-ws-theme="dark"] .article-toc a:hover { color: var(--wsdk-link); }
html[data-ws-theme="dark"] .recent-articles-title { color: var(--wsdk-text); }
html[data-ws-theme="dark"] .recent-articles-list li a { color: var(--wsdk-text-2); }
html[data-ws-theme="dark"] .article-relatives li a:visited { color: var(--wsdk-text-2) !important; }

/* Buttons (secondary) + votes; brand-blue primaries stay untouched */
html[data-ws-theme="dark"] .button:not(.button-primary):not(.btn-primary-nav) {
  background: transparent;
  border-color: var(--wsdk-border-strong);
  color: var(--wsdk-text-2);
}
html[data-ws-theme="dark"] .button:not(.button-primary):not(.btn-primary-nav):hover {
  background: var(--wsdk-surface-2);
  color: var(--wsdk-text);
}
html[data-ws-theme="dark"] .back-to-top {
  background: var(--wsdk-surface-2);
  border-color: var(--wsdk-border-strong);
  color: var(--wsdk-text-2);
}

/* ── Tag filter chips ── */
html[data-ws-theme="dark"] .ws-tag-filter-title,
html[data-ws-theme="dark"] .collapsible-sidebar-title { color: var(--wsdk-muted); }
html[data-ws-theme="dark"] .ws-tag-chip {
  background: var(--wsdk-surface-2);
  border-color: var(--wsdk-border-strong);
  color: var(--wsdk-text-2);
}
html[data-ws-theme="dark"] .ws-tag-chip:hover { border-color: var(--wsdk-muted); }
html[data-ws-theme="dark"] .ws-tag-chip:has(input:checked) {
  background: var(--wsdk-tint);
  border-color: var(--wsdk-link);
  color: var(--wsdk-link);
}
html[data-ws-theme="dark"] .ws-tag-chip-count { color: var(--wsdk-muted); }
html[data-ws-theme="dark"] .ws-tag-chip:has(input:checked) .ws-tag-chip-count { color: inherit; }
html[data-ws-theme="dark"] .ws-tag-filter-clear { color: var(--wsdk-link); }

/* ── Search page ── */
/* !important: the "SEARCH RESULTS — final authoritative pass" styles these
   with !important, so the dark skin must match its weight. */
html[data-ws-theme="dark"] .search-result-title a { color: var(--wsdk-link) !important; }
html[data-ws-theme="dark"] .search-results-subheading { color: var(--wsdk-text) !important; }
html[data-ws-theme="dark"] .search-result-breadcrumbs li a { color: var(--wsdk-muted) !important; }
html[data-ws-theme="dark"] .search-results-sidebar .filters-in-section,
html[data-ws-theme="dark"] .ws-tag-filter {
  background: var(--wsdk-surface) !important;
  border-color: var(--wsdk-border) !important;
}
html[data-ws-theme="dark"] .search-result-description { color: var(--wsdk-text-2); }
html[data-ws-theme="dark"] .search-result-breadcrumbs li a { color: var(--wsdk-muted); }
html[data-ws-theme="dark"] .sidenav-item { color: var(--wsdk-text-2); }
html[data-ws-theme="dark"] .sidenav-item:hover,
html[data-ws-theme="dark"] .sidenav-item.current { color: var(--wsdk-link); }

/* ── Tab / profile navs, toolbars ── */
html[data-ws-theme="dark"] .tab-nav,
html[data-ws-theme="dark"] .profile-nav {
  background: var(--wsdk-surface);
  border-color: var(--wsdk-border);
}
html[data-ws-theme="dark"] .tab-nav a { color: var(--wsdk-text-2); }
html[data-ws-theme="dark"] .tab-nav .current a,
html[data-ws-theme="dark"] .tab-nav a:hover { color: var(--wsdk-link); }

/* ── Forms (request form, comments, community composer) ── */
html[data-ws-theme="dark"] .form input[type=text],
html[data-ws-theme="dark"] .form input[type=email],
html[data-ws-theme="dark"] .form textarea,
html[data-ws-theme="dark"] .form select,
html[data-ws-theme="dark"] .comment-container textarea,
html[data-ws-theme="dark"] .request-container input,
html[data-ws-theme="dark"] .request-container textarea,
html[data-ws-theme="dark"] .request-container select {
  background: var(--wsdk-surface-2);
  border-color: var(--wsdk-border-strong);
  color: var(--wsdk-text);
}
html[data-ws-theme="dark"] .form label { color: var(--wsdk-text-2); }

/* ── Community / misc surfaces ── */
html[data-ws-theme="dark"] .community { border-top-color: var(--wsdk-border); }
html[data-ws-theme="dark"] .footer { background: var(--wsdk-surface); border-top: 1px solid var(--wsdk-border); }
html[data-ws-theme="dark"] .footer a { color: var(--wsdk-text-2); }
html[data-ws-theme="dark"] .striped-list-item { border-color: var(--wsdk-border); }
html[data-ws-theme="dark"] .error-page h1,
html[data-ws-theme="dark"] .error-page h2 { color: var(--wsdk-text); }

/* ════════════════════════════════════════════════════════════════════
   DARK MODE — METICULOUS PASS
   ════════════════════════════════════════════════════════════════════
   Grep-driven sweep of EVERY light background/border/dark-text declaration in
   this file (68 bg / 86 border / 12 text rules inventoried), covering the
   surfaces the earlier block missed — chiefly the article-votes card, the
   request/community/profile templates, form controls, badges, pagination, and
   a few specificity fights (`!important` used only where the light rule uses
   it or outranks the attribute selector). */

/* ── Article votes card (was its own #fbfbfb card) + footer blocks ── */
html[data-ws-theme="dark"] .article-votes {
  background: var(--wsdk-surface);
  border-color: var(--wsdk-border);
}
html[data-ws-theme="dark"] .article-relatives,
html[data-ws-theme="dark"] .article-toc-list li a { border-color: var(--wsdk-border); }
html[data-ws-theme="dark"] .article-toc-list li a { color: var(--wsdk-text-2); }
html[data-ws-theme="dark"] .article-body figcaption,
html[data-ws-theme="dark"] .comment-body figcaption {
  background: var(--wsdk-surface-2);
  color: var(--wsdk-muted);
}
html[data-ws-theme="dark"] .comment-body pre,
html[data-ws-theme="dark"] .comment-body :not(pre) > code,
html[data-ws-theme="dark"] .article-body :not(pre) > code {
  background: var(--wsdk-surface-2);
  border-color: var(--wsdk-border);
  color: var(--wsdk-text-2);
}

/* ── First-child "framing" borders (top hairline leak on card lists) ──
   !important: the light rules use it (`.section-article-card:first-child
   { border-top: … !important }`, line ~4524). */
html[data-ws-theme="dark"] .section-article-card,
html[data-ws-theme="dark"] .section-article-card:first-child,
html[data-ws-theme="dark"] .activity-card:first-child,
html[data-ws-theme="dark"] .section-list-item:first-child {
  border-top-color: var(--wsdk-border) !important;
  border-bottom-color: var(--wsdk-border) !important;
}
html[data-ws-theme="dark"] .section-article-card:hover { border-color: var(--wsdk-border-strong); }

/* ── User dropdown: beat the !important reset trio ── */
html[data-ws-theme="dark"] .user-info .dropdown-menu a,
html[data-ws-theme="dark"] .user-info .dropdown-menu a[aria-current],
html[data-ws-theme="dark"] .user-info .dropdown-menu a[aria-current=page] {
  color: var(--wsdk-text-2) !important;
}
html[data-ws-theme="dark"] .user-info .dropdown-menu a:hover { color: var(--wsdk-text) !important; }
html[data-ws-theme="dark"] .user-info .dropdown-menu a.dropdown-nav-current {
  color: var(--wsdk-link) !important;
  background-color: var(--wsdk-tint) !important;
}
html[data-ws-theme="dark"] .user-info .dropdown-menu a[href*="sign_out"],
html[data-ws-theme="dark"] .user-info .dropdown-menu a[href*="signout"] { border-color: var(--wsdk-border); }
html[data-ws-theme="dark"] .user-info > button:hover,
html[data-ws-theme="dark"] .user-info > button:focus { background: var(--wsdk-surface-2); }

/* ── Cards & panels not covered before ── */
html[data-ws-theme="dark"] .blocks-item,
html[data-ws-theme="dark"] .attachment-item,
html[data-ws-theme="dark"] .comment-show-container,
html[data-ws-theme="dark"] .generative-answer,
html[data-ws-theme="dark"] .my-activities-nav,
html[data-ws-theme="dark"] .post-sidebar,
html[data-ws-theme="dark"] .profile-badges-item,
html[data-ws-theme="dark"] .promoted-articles,
html[data-ws-theme="dark"] .request-main .comment,
html[data-ws-theme="dark"] .requests-search,
html[data-ws-theme="dark"] .topic-header,
html[data-ws-theme="dark"] .user-nav[aria-expanded=true] {
  background: var(--wsdk-surface);
  border-color: var(--wsdk-border);
}
html[data-ws-theme="dark"] .blocks-item-internal,
html[data-ws-theme="dark"] .request-main .comment.comment-agent { background: var(--wsdk-surface-2); }
html[data-ws-theme="dark"] .promoted-articles-item { border-color: var(--wsdk-border); }
html[data-ws-theme="dark"] .promoted-articles-item a:hover { background: var(--wsdk-surface-2); }

/* ── Hairline borders on remaining structures ── */
html[data-ws-theme="dark"] .comment,
html[data-ws-theme="dark"] .comment-form-controls,
html[data-ws-theme="dark"] .comment-overview,
html[data-ws-theme="dark"] .community-featured-posts,
html[data-ws-theme="dark"] .community-footer,
html[data-ws-theme="dark"] .form .suggestion-list label,
html[data-ws-theme="dark"] .page-toolbar,
html[data-ws-theme="dark"] .post-content,
html[data-ws-theme="dark"] .post-footer,
html[data-ws-theme="dark"] .profile-section-header,
html[data-ws-theme="dark"] .recent-activity-item,
html[data-ws-theme="dark"] .section-list-item,
html[data-ws-theme="dark"] .section-tree-title,
html[data-ws-theme="dark"] .striped-list-item,
html[data-ws-theme="dark"] .striped-list-count-item + .striped-list-count-item,
html[data-ws-theme="dark"] .table tr,
html[data-ws-theme="dark"] .topic-header .dropdown,
html[data-ws-theme="dark"] .topics-item .meta-group,
html[data-ws-theme="dark"] .sidenav-item { border-color: var(--wsdk-border); }

/* ── Controls: selects, filters, pagination, secondary buttons ── */
html[data-ws-theme="dark"] .page-toolbar-filter select,
html[data-ws-theme="dark"] .request-filter,
html[data-ws-theme="dark"] button.request-filter,
html[data-ws-theme="dark"] .profile-section-sorter .dropdown-toggle,
html[data-ws-theme="dark"] select,
html[data-ws-theme="dark"] textarea {
  background: var(--wsdk-surface-2);
  border-color: var(--wsdk-border-strong);
  color: var(--wsdk-text);
}
html[data-ws-theme="dark"] .form-field input,
html[data-ws-theme="dark"] .form-field input[type=text],
html[data-ws-theme="dark"] .form-field .nesty-input,
html[data-ws-theme="dark"] .form-field .hc-multiselect-toggle {
  background: var(--wsdk-surface-2);
  border-color: var(--wsdk-border-strong);
  color: var(--wsdk-text);
}
html[data-ws-theme="dark"] input[disabled] { background: var(--wsdk-surface-2); color: var(--wsdk-muted); }
html[data-ws-theme="dark"] .pagination-page-link { border-color: var(--wsdk-border); color: var(--wsdk-text-2); }
html[data-ws-theme="dark"] .pagination-page-link:hover {
  background: var(--wsdk-surface-2);
  border-color: var(--wsdk-border-strong);
}
html[data-ws-theme="dark"] .button-secondary { border-color: var(--wsdk-border-strong); color: var(--wsdk-text-2); }
html[data-ws-theme="dark"] .button-secondary:hover,
html[data-ws-theme="dark"] .button-secondary:focus,
html[data-ws-theme="dark"] .button-secondary:active {
  background: var(--wsdk-surface-2);
  color: var(--wsdk-text);
}
html[data-ws-theme="dark"] .btn-back:hover,
html[data-ws-theme="dark"] .actions button:hover { background: var(--wsdk-surface-2); }
html[data-ws-theme="dark"] .see-all-filters { color: var(--wsdk-link); }

/* ── Badges, labels, tags, notifications ── */
html[data-ws-theme="dark"] .status-label,
html[data-ws-theme="dark"] .status-badge-closed,
html[data-ws-theme="dark"] .status-label-closed {
  background: var(--wsdk-surface-2);
  color: var(--wsdk-text-2);
}
html[data-ws-theme="dark"] .status-badge-open,
html[data-ws-theme="dark"] .status-label-open { background: var(--wsdk-tint); color: var(--wsdk-link); }
html[data-ws-theme="dark"] .content-tag-item,
html[data-ws-theme="dark"] .escalation-badge { background: var(--wsdk-surface-2); color: var(--wsdk-text-2); }
html[data-ws-theme="dark"] .notification-inline { background: var(--wsdk-tint); color: var(--wsdk-text-2); }

/* ── Icon chips still on the light blue tint ── */
html[data-ws-theme="dark"] .activity-card-icon,
html[data-ws-theme="dark"] .error-page-icon { background: var(--wsdk-tint); color: var(--wsdk-link); }

/* ── Text stragglers ── */
html[data-ws-theme="dark"] .empty-state-title { color: var(--wsdk-text); }
html[data-ws-theme="dark"] .profile-contribution-body { color: var(--wsdk-text-2); }
html[data-ws-theme="dark"] .activity-card-title { color: var(--wsdk-text); }
html[data-ws-theme="dark"] .activity-card-meta { color: var(--wsdk-muted); }

/* ════════════════════════════════════════════════════════════════════
   DARK MODE — SUBMIT A REQUEST / {{request_form}} PASS
   ════════════════════════════════════════════════════════════════════
   The request widget renders `form.request-form` (NOT `.form`), so the earlier
   `.form label` dark rule never matched its labels — they stayed rgba(25, 23, 23, 1).
   This pass keys on the classes the widget actually renders: .form-field
   wrappers, the nesty dropdown (input anchor + body-appended .nesty-panel),
   the upload dropzone, and the footer submit. The rich-text DESCRIPTION editor
   is deliberately kept as a white field with dark text — its content renders
   in Zendesk-controlled markup (iframes/injected styles) that theme CSS can't
   reliably restyle, and a white editor field on a dark form is a standard,
   legible pattern. */
html[data-ws-theme="dark"] .form-field label,
html[data-ws-theme="dark"] .request-form label { color: var(--wsdk-text-2); }
html[data-ws-theme="dark"] .form-field .optional,
html[data-ws-theme="dark"] .form-field p { color: var(--wsdk-muted); }

html[data-ws-theme="dark"] .request-form input:not([type=submit]):not([type=checkbox]):not([type=radio]),
html[data-ws-theme="dark"] .request-form textarea,
html[data-ws-theme="dark"] .request-form select {
  background: var(--wsdk-surface-2);
  border-color: var(--wsdk-border-strong);
  color: var(--wsdk-text);
}
html[data-ws-theme="dark"] .form-field .nesty-input {
  background: var(--wsdk-surface-2);
  border-color: var(--wsdk-border-strong);
  color: var(--wsdk-text);
}
/* The dropdown panel Zendesk appends to <body> — default styling is white */
html[data-ws-theme="dark"] .nesty-panel {
  background: var(--wsdk-surface-2);
  border: 1px solid var(--wsdk-border-strong);
  color: var(--wsdk-text-2);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
html[data-ws-theme="dark"] .nesty-panel li:hover,
html[data-ws-theme="dark"] .nesty-panel [aria-selected="true"],
html[data-ws-theme="dark"] .nesty-panel .active {
  background: var(--wsdk-tint);
  color: var(--wsdk-link);
}
/* Upload dropzone (dashed drop target) */
html[data-ws-theme="dark"] .upload-dropzone,
html[data-ws-theme="dark"] #upload-dropzone {
  background: var(--wsdk-surface-2);
  border-color: var(--wsdk-border-strong);
}
html[data-ws-theme="dark"] .upload-dropzone span { color: var(--wsdk-muted); }
html[data-ws-theme="dark"] .upload-dropzone a,
html[data-ws-theme="dark"] .upload-dropzone span a { color: var(--wsdk-link); }
/* Description editor: white field, dark text, dark-appropriate border */
html[data-ws-theme="dark"] .request-form [contenteditable] {
  background: #fff;
  color: #171717;
  border-radius: 8px;
}
html[data-ws-theme="dark"] .form-field-editor,
html[data-ws-theme="dark"] .request-form [data-helper="wysiwyg"] {
  background: #fff;
  border-radius: 8px;
  border: 1.5px solid var(--wsdk-border-strong);
}
/* Attachment paperclip + disabled submit */
html[data-ws-theme="dark"] .attachments .attachment-item .attachment-icon { color: var(--wsdk-text-2); }
html[data-ws-theme="dark"] .button-large[disabled],
html[data-ws-theme="dark"] input[type=submit][disabled] { background-color: var(--wsdk-border-strong); }

/* Description editor chrome — BOTH themes. Zendesk's rich-text editor ships
   its own injected styles; these are the theme-level guarantees so the field
   always reads as a bordered white input with dark text (incl. in dark mode,
   where a white editor field is the deliberate, legible choice). */
.form-field-editor,
.request-form [data-helper="wysiwyg"] {
  background: #fff;
  border: 1.5px solid #d0d0d0;
  border-radius: 8px;
}
.request-form [contenteditable] {
  color: #171717;
  background: #fff;
  border-radius: 8px;
  min-height: 120px;
}