/* ==========================================================================
   PIPE17 HELP CENTER  ·  style.css
   ==========================================================================

   Zendesk Guide theme stylesheet, aligned to the Pipe17 marketing design
   system. Written as one token-driven system: change a value in section 01 and
   it propagates everywhere.

   --------------------------------------------------------------------------
   SECTION INDEX  (sections appear below in this order)
   --------------------------------------------------------------------------
     01  DESIGN TOKENS ............ colour, type, space, radius, elevation
     02  RESET & BASE ............. normalise, focus rings, skip link
     03  TYPOGRAPHY ............... heading scale, body copy, meta text
     04  LAYOUT & GRID ............ containers, .box surface, 12-col grid
     05  BUTTONS, BADGES, CHIPS ... .btn variants, status pills, content tags
     06  FORMS .................... inputs, selects, validation, length meter
     07  TOPBAR & NAVIGATION ...... sticky header, search docking, mobile menu
     08  HERO & SEARCH ............ hero band, brand backdrop, search field
     09  HOME PAGE BLOCKS ......... entry cards, category tree, promoted, CTA
     10  ARTICLE PAGE ............. breadcrumbs, column rails, TOC, vote
     11  LONG-FORM CONTENT ........ article & comment prose, tables, callouts
     12  COMMENTS & VOTING ........ comment list, vote pills, comment form
     13  REQUESTS, LISTS & TABLES . my activities, request tables, pagination
     14  SEARCH RESULTS ........... result list, filter rail
     15  COMMUNITY & PROFILE ...... topics, posts, user profile
     16  NOTIFICATIONS & DROPDOWNS  system messages, menus
     17  FOOTER ................... footer columns, social links
     18  REFINEMENTS .............. remaining hooks and small corrections
     19  DARK MODE, MOTION, PRINT . theme-gated dark mode, a11y preferences

     The locale flag sprite lives in assets/flags.css, loaded from
     document_head.hbs only when the "Use flags" setting is on.

   --------------------------------------------------------------------------
   HOW THIS FILE WORKS  ·  read before editing
   --------------------------------------------------------------------------
   1. NEVER hard-code a brand colour. Everything derives from the Guide theme
      settings via the tokens in section 01, so the theme editor keeps working.

   2. Tints and text tones mix toward --mix-bg / --mix-fg. Dark mode flips only
      those two, and every derived colour reverses direction automatically.
      Mixing toward a literal #fff or #000 breaks dark mode.

   2b. NEVER use --p-ink or --p-navy as the background of a panel that paints
       hard-coded white text. Both are palette tokens and --p-ink inverts to
       near-white in dark mode. Use --p-scrim / --p-scrim-deep, which read from
       the same settings but are never overridden in section 19.
   3. Contrast is verified, not guessed. --p-muted, --p-faint, --p-accent-strong
      and the four --tone-* values sit at the minimum percentages that clear
      WCAG AA 4.5:1. Lightening any of them needs a re-audit. --p-deco is the
      one deliberately-low-contrast token and is for decoration only, never
      text.

   4. Logical properties throughout (margin-inline, inset-inline, padding-block)
      so right-to-left locales work without a parallel [dir="rtl"] block.

   5. Custom properties declare a static fallback first, then a color-mix()
      refinement. Browsers without color-mix() keep the fallback.

   6. !important appears only where it counters an !important utility from
      assets/lotus-utilities.css. Each instance says which utility and why.

   7. Visual decoration comes from the brand Background Pool assets, not from
      invented flourishes. Earlier drafts had a mint radial "bloom", a dot-grid
      texture and a marker-pen headline underline; all were removed as generic
      template tells. Do not reintroduce them.

   8. Typography follows the design system's Foundations > Typography, with two
      documented deviations for Help Center prose. Both are noted in section 01.
   ========================================================================== */

/* ==========================================================================
   01  DESIGN TOKENS
   ========================================================================== */

:root {
  /* -- Brand, straight from theme settings -------------------------------- */
  --p-ink: rgba(24, 46, 55, 1);
  --p-navy: #101828;

  /* Scrims for panels that stay dark in BOTH colour schemes - the hero backdrop
     and the "still have questions" CTA. Those panels paint hard-coded white
     text on themselves, so their backgrounds must NOT follow the palette flip.
     --p-ink is a *text* token and inverts to near-white in dark mode; using it
     as a backdrop turned the CTA scrim near-white and dropped its white
     headline to 1.14:1. These two read from the same settings as --p-ink and
     --p-navy but are deliberately never overridden in section 19. */
  --p-scrim: rgba(24, 46, 55, 1);
  --p-scrim-deep: #101828;
  --p-accent: #05C896;
  --p-surface: #fff;
  --p-bg: #F2F7F7;
  --p-text: #373C50;
  --p-border: #eceeef;
  --p-hero-title: #ffffff;
  --p-icon: #0c9;

  --p-btn-1: rgba(24, 46, 55, 1);
  --p-btn-2: rgba(24, 46, 55, 1);

  --p-topbar-bg: #101828;
  --p-topbar-text: #fff;
  --p-topbar-link: #fff;
  --p-topbar-btn: #fff;

  --p-footer-bg: #fff;
  --p-footer-text: #4c536e;
  --p-footer-link: #4c536e;

  --p-info: #5bc0de;
  --p-success: #0c9;
  --p-warning: #fad782;
  --p-danger: #ff5252;

  /* -- Mix anchors ---------------------------------------------------------
     Every derived tint mixes a hue toward --mix-bg; every derived text tone
     mixes toward --mix-fg. Dark mode flips just these two, so all 46 derived
     colours reverse direction at once rather than each needing a hand-written
     dark twin. Never mix toward a literal #fff or #000. */
  --mix-bg: #fff;
  --mix-fg: #000;

  /* -- Derived neutrals --------------------------------------------------- */
  /* Contrast-verified against #fff, --p-bg and --p-tint. The percentages are
     the minimum that clear WCAG AA 4.5:1 on all three; do not lighten them
     without re-running the contrast audit. */
  --p-muted: #5f6373;
  --p-muted: color-mix(in srgb, var(--p-text) 80%, var(--mix-bg));   /* 5.5:1 */

  --p-faint: #676b7a;
  --p-faint: color-mix(in srgb, var(--p-text) 76%, var(--mix-bg));   /* 4.9:1 */

  /* Decorative only - borders, separators, list markers, icon tints. Never
     use for text: it is deliberately below the text contrast threshold. */
  --p-deco: #979aa4;
  --p-deco: color-mix(in srgb, var(--p-text) 52%, var(--mix-bg));

  --p-hairline: #e7eaee;
  --p-hairline: color-mix(in srgb, var(--p-border) 88%, var(--p-text) 4%);

  --p-tint: #f6f9fa;
  --p-tint: color-mix(in srgb, var(--p-bg) 62%, var(--mix-bg));

  /* -- Derived accents ---------------------------------------------------- */
  /* The brand mint is only ~3:1 on white, so it cannot be used for text. This
     is the darkened form used for every accent-coloured STRING (links, active
     nav, callout titles); the raw --p-accent stays for fills, borders and focus
     rings, where the 3:1 non-text contrast bar applies. Verified
     5.3-5.8:1 on #fff, --p-tint and --p-accent-soft. */
  --p-accent-strong: #037457;
  --p-accent-strong: color-mix(in srgb, var(--p-accent) 58%, var(--mix-fg));

  --p-accent-soft: #e6faf4;
  --p-accent-soft: color-mix(in srgb, var(--p-accent) 10%, var(--mix-bg));

  --p-accent-line: #b8f0e0;
  --p-accent-line: color-mix(in srgb, var(--p-accent) 32%, var(--mix-bg));

  --p-ink-soft: #eef1f3;
  --p-ink-soft: color-mix(in srgb, var(--p-ink) 8%, var(--mix-bg));

  /* -- Semantic text tones -------------------------------------------------
     One token per state, used for every badge label, callout title and error
     string. Each is verified >=4.5:1 against its matching tint background, so
     semantic colour never costs readability. Pale hues (warning) need a lower
     percentage than saturated ones (danger) to reach the same contrast. */
  --tone-info: #2a6f8a;
  --tone-info: color-mix(in srgb, var(--p-info) 52%, var(--mix-fg));

  --tone-success: #04745a;
  --tone-success: color-mix(in srgb, var(--p-accent) 56%, var(--mix-fg));

  --tone-warning: #73612f;
  --tone-warning: color-mix(in srgb, var(--p-warning) 46%, var(--mix-fg));

  --tone-danger: #99312f;
  --tone-danger: color-mix(in srgb, var(--p-danger) 58%, var(--mix-fg));

  /* -- Typography -----------------------------------------------------------
     Mapped from the Pipe17 marketing design system (Foundations > Typography):
       H1     League Spartan 700 . 52px . uppercase . line-height 1  (blog 36px)
       H2     League Spartan 700 . 36px . uppercase . line-height 1
       H3     Poppins 600 . 20px
       Body   Poppins 400 . 18px/1.3 desktop, 16px at <=767px
       Label  League Spartan 500 . 16px . uppercase . 1px tracking
       Quote  Merriweather 700 italic . 22px  (pull quotes only)

     Two deliberate deviations from the marketing spec, both because a Help
     Center renders author-written prose rather than brand display copy:
       1. Article titles use the 36px "blog post" H1 size, not 52px.
       2. Uppercase is applied to theme chrome only - never to article titles
          or article-body headings. All-caps measurably slows reading and these
          strings are full sentences written by agents, not brand headlines.
     Both are one-line changes if you want the marketing treatment verbatim. */
  --p-font: Poppins, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --p-font-display: "League Spartan", var(--p-font);
  --p-font-quote: "Merriweather", Georgia, "Times New Roman", serif;
  --p-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  /* Their token name, kept verbatim so it matches the design system docs */
  --p17-body-size: 18px;

  --fs-base: var(--p17-body-size);
  --lh-base: 1.3;

  /* Long-form prose overrides the marketing 1.3: at 18px it is far too tight
     for multi-paragraph troubleshooting articles. Chrome keeps 1.3. */
  --lh-prose: 1.62;

  --fs-h1-hero: clamp(2rem, 1.1rem + 3.1vw, 3.25rem);   /* -> 52px */
  --fs-h1: clamp(1.625rem, 1.25rem + 1.6vw, 2.25rem);   /* -> 36px, blog rule */
  --fs-h2: clamp(1.5rem, 1.2rem + 1.3vw, 2.25rem);      /* -> 36px */
  --fs-h3: 1.25rem;                                     /*    20px */
  --fs-h4: 1.125rem;
  --fs-h5: 1rem;
  --fs-h6: 1rem;
  --fs-quote: 1.375rem;                                 /*    22px */
  --fs-sm: 0.875rem;
  --fs-xs: 0.8125rem;

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semi: 600;
  --fw-bold: 700;

  /* League Spartan uppercase does not want the negative tracking a grotesque
     like Inter did; label tracking is their specified 1px. */
  --tracking-tight: 0;
  --tracking-display: 0.005em;
  --tracking-caps: 1px;

  /* -- Space scale -------------------------------------------------------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 56px;
  --s-10: 72px;
  --s-11: 96px;

  --gutter: 16px;
  --container-max: 1240px;
  --container-pad: clamp(18px, 4vw, 34px);
  --measure: 74ch;

  /* -- Radii -------------------------------------------------------------- */
  --r-btn: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* -- Elevation ---------------------------------------------------------- */
  --sh-1: 0 1px 2px rgba(16, 32, 45, 0.04), 0 1px 3px rgba(16, 32, 45, 0.06);
  --sh-2: 0 2px 4px rgba(16, 32, 45, 0.04), 0 8px 20px -6px rgba(16, 32, 45, 0.1);
  --sh-3: 0 2px 6px rgba(16, 32, 45, 0.05), 0 14px 36px -10px rgba(16, 32, 45, 0.18);
  --sh-inset: inset 0 1px 0 rgba(255, 255, 255, 0.06);

  --ring: 0 0 0 4px rgba(5, 200, 150, 0.3);
  --ring: 0 0 0 4px color-mix(in srgb, var(--p-accent) 30%, transparent);

  /* -- Motion ------------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;

  /* -- Assets ------------------------------------------------------------- */
  --logo-height: 80px;
  --icon-height: 86px;
  --social-icon-height: 16px;
}


/* ==========================================================================
   02  RESET & BASE
   ========================================================================== */

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
  scroll-padding-top: var(--s-9);
  /* Native controls, scrollbars and form widgets follow the theme */
  color-scheme: light;
}

body {
  min-height: 100%;
  margin: 0;
  font-family: var(--p-font);
  font-size: var(--fs-base);
  font-weight: var(--fw-normal);
  line-height: var(--lh-base);
  color: var(--p-text);
  background-color: var(--p-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-variant-ligatures: common-ligatures;
  overflow-wrap: break-word;
}

body.menu-opened {
  overflow: hidden;
}

img,
picture,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

svg {
  fill: currentColor;
}

input,
button,
select,
textarea,
optgroup {
  font: inherit;
  letter-spacing: inherit;
}

/* `color` is deliberately NOT inherited here. Zendesk's own stylesheet loads
   after this one and hard-codes a white background on its custom form controls
   (the tagger/impact combobox is an <input> with NO type attribute, so the
   styled list in section 03 does not match it). Inheriting the page colour put
   near-white text on that white background in dark mode - measured 1.28:1.
   Without the inherit, an unmatched control keeps the browser's own readable
   default. Buttons still take it, since they are all styled explicitly. */
button {
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

ul,
ol {
  padding-inline-start: 1.25em;
}

[hidden] {
  display: none !important;
}

hr {
  height: 1px;
  margin-block: var(--s-7);
  border: 0;
  background: var(--p-hairline);
}

/* Their spec: 18px desktop, 16px at <=767px. Driven through --p17-body-size so
   one variable moves every place that inherits body copy. */
@media (max-width: 767px) {
  :root {
    --p17-body-size: 16px;
  }
}

::selection {
  color: #fff;
  background: var(--p-accent-strong);
}

/* -- Focus: visible for keyboards, quiet for mice ------------------------- */
:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--p-accent-strong);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* -- Overlay behind the open mobile menu --------------------------------- */
.body-overlay {
  position: fixed;
  inset-inline-start: 0;
  top: 0;
  z-index: 98;
  display: block;
  width: 100%;
  height: 100%;
  visibility: hidden;
  /* A dimming scrim, so it must stay dark in both schemes. */
  background: var(--p-scrim);
  opacity: 0;
  transition: opacity var(--dur-3) var(--ease), visibility var(--dur-3);
}

.menu-opened .body-overlay {
  visibility: visible;
  opacity: 0.45;
}

/* -- Skip link ------------------------------------------------------------ */
.skip-navigation {
  position: absolute;
  inset-inline-start: 50%;
  top: var(--s-3);
  z-index: 200;
  padding: var(--s-3) var(--s-5);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--p-ink);
  text-decoration: none;
  background: #fff;
  border-radius: var(--r-pill);
  box-shadow: var(--sh-3);
  transform: translate(-50%, -160%);
  transition: transform var(--dur-2) var(--ease-out);
}

.skip-navigation:focus {
  transform: translate(-50%, 0);
}


/* ==========================================================================
   03  TYPOGRAPHY
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  margin: 0;
  color: var(--p-ink);
  text-wrap: balance;
}

/* H1 / H2 are the display pair: League Spartan 700, line-height 1 */
h1,
h2,
.h1,
.h2 {
  font-family: var(--p-font-display);
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: var(--tracking-display);
}

h1,
.h1 {
  font-size: var(--fs-h1);
}

h2,
.h2 {
  font-size: var(--fs-h2);
}

/* H3 and below are Poppins 600 - per the spec, the display face stops at H2 */
h3,
h4,
h5,
.h3,
.h4,
.h5 {
  font-family: var(--p-font);
  font-weight: var(--fw-semi);
  line-height: 1.3;
  letter-spacing: 0;
}

h3,
.h3 {
  font-size: var(--fs-h3);
}

h4,
.h4 {
  font-size: var(--fs-h4);
}

h5,
.h5 {
  font-size: var(--fs-h5);
}

/* H6 carries the spec's Label style: League Spartan 500, uppercase, 1px */
h6,
.h6,
.label-display {
  font-family: var(--p-font-display);
  font-size: var(--fs-h6);
  font-weight: var(--fw-medium);
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--p-muted);
}

p {
  margin: 0;
}

strong,
b {
  font-weight: var(--fw-semi);
}

small {
  font-size: var(--fs-sm);
}

a {
  color: var(--p-accent-strong);
  text-decoration: none;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.18em;
  transition: color var(--dur-1) var(--ease),
    text-decoration-color var(--dur-1) var(--ease);
}

a:hover {
  color: black;
  text-decoration: underline;
}

.link-black {
  color: var(--p-text);
}

.link-black:hover {
  color: var(--p-accent-strong);
}

/* -- Meta text ------------------------------------------------------------ */
.meta,
.meta__item,
.page-description {
  font-size: var(--fs-sm);
  color: var(--p-muted);
}

.meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
}

.meta__item + .meta__item::before {
  margin-inline-end: var(--s-2);
  color: var(--p-faint);
  content: "·";
}

.meta__link {
  color: var(--p-muted);
  text-decoration: underline;
  text-decoration-color: var(--p-hairline);
}

.meta__link:hover {
  color: var(--p-accent-strong);
}

.page-description {
  max-width: var(--measure);
  margin-block-start: var(--s-3);
  font-size: 1.0625rem;
  line-height: 1.6;
}

.list-unstyled {
  padding-inline-start: 0;
  margin: 0;
  list-style: none;
}

.is-hidden {
  display: none !important;
}

.clearfix::after {
  display: table;
  clear: both;
  content: "";
}


/* ==========================================================================
   04  LAYOUT & GRID
   ========================================================================== */

.lt-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.layout__main {
  flex: 1 0 auto;
}

.container {
  width: 100%;
  margin-inline: auto;
}

.container-inner {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* Generic surface used across article, comments, vote, tags blocks */
.box {
  padding: clamp(20px, 3vw, 34px);
  margin-block-end: var(--s-7);
  background: var(--p-surface);
  border: 1px solid var(--p-hairline);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
}

.box_min {
  padding: var(--s-5) var(--s-6);
}

.box_top {
  margin-block-start: var(--s-7);
}


/* ---- 12-column grid (logical props = automatic RTL) ---- */
.row{display:flex;flex-wrap:wrap;margin-inline:calc(var(--gutter) * -1)}
.column{position:relative;flex:0 0 auto;width:100%;min-width:0;padding-inline:var(--gutter)}
.column--xs-1{flex:0 0 8.333333%;max-width:8.333333%}
.column--xs-2{flex:0 0 16.666667%;max-width:16.666667%}
.column--xs-3{flex:0 0 25%;max-width:25%}
.column--xs-4{flex:0 0 33.333333%;max-width:33.333333%}
.column--xs-5{flex:0 0 41.666667%;max-width:41.666667%}
.column--xs-6{flex:0 0 50%;max-width:50%}
.column--xs-7{flex:0 0 58.333333%;max-width:58.333333%}
.column--xs-8{flex:0 0 66.666667%;max-width:66.666667%}
.column--xs-9{flex:0 0 75%;max-width:75%}
.column--xs-10{flex:0 0 83.333333%;max-width:83.333333%}
.column--xs-11{flex:0 0 91.666667%;max-width:91.666667%}
.column--xs-12{flex:0 0 100%;max-width:100%}
.column--xs-offset-1{margin-inline-start:8.333333%}
.column--xs-offset-2{margin-inline-start:16.666667%}
.column--xs-offset-3{margin-inline-start:25%}
.column--xs-offset-4{margin-inline-start:33.333333%}
.column--xs-offset-5{margin-inline-start:41.666667%}
.column--xs-offset-6{margin-inline-start:50%}
.column--xs-offset-7{margin-inline-start:58.333333%}
.column--xs-offset-8{margin-inline-start:66.666667%}
.column--xs-offset-9{margin-inline-start:75%}
.column--xs-offset-10{margin-inline-start:83.333333%}
.column--xs-offset-11{margin-inline-start:91.666667%}
.column--xs-offset-12{margin-inline-start:100%}
.column--xs-offset-0{margin-inline-start:0}
@media (min-width:576px){
.column--sm-1{flex:0 0 8.333333%;max-width:8.333333%}
.column--sm-2{flex:0 0 16.666667%;max-width:16.666667%}
.column--sm-3{flex:0 0 25%;max-width:25%}
.column--sm-4{flex:0 0 33.333333%;max-width:33.333333%}
.column--sm-5{flex:0 0 41.666667%;max-width:41.666667%}
.column--sm-6{flex:0 0 50%;max-width:50%}
.column--sm-7{flex:0 0 58.333333%;max-width:58.333333%}
.column--sm-8{flex:0 0 66.666667%;max-width:66.666667%}
.column--sm-9{flex:0 0 75%;max-width:75%}
.column--sm-10{flex:0 0 83.333333%;max-width:83.333333%}
.column--sm-11{flex:0 0 91.666667%;max-width:91.666667%}
.column--sm-12{flex:0 0 100%;max-width:100%}
.column--sm-offset-1{margin-inline-start:8.333333%}
.column--sm-offset-2{margin-inline-start:16.666667%}
.column--sm-offset-3{margin-inline-start:25%}
.column--sm-offset-4{margin-inline-start:33.333333%}
.column--sm-offset-5{margin-inline-start:41.666667%}
.column--sm-offset-6{margin-inline-start:50%}
.column--sm-offset-7{margin-inline-start:58.333333%}
.column--sm-offset-8{margin-inline-start:66.666667%}
.column--sm-offset-9{margin-inline-start:75%}
.column--sm-offset-10{margin-inline-start:83.333333%}
.column--sm-offset-11{margin-inline-start:91.666667%}
.column--sm-offset-12{margin-inline-start:100%}
.column--sm-offset-0{margin-inline-start:0}
}
@media (min-width:768px){
.column--md-1{flex:0 0 8.333333%;max-width:8.333333%}
.column--md-2{flex:0 0 16.666667%;max-width:16.666667%}
.column--md-3{flex:0 0 25%;max-width:25%}
.column--md-4{flex:0 0 33.333333%;max-width:33.333333%}
.column--md-5{flex:0 0 41.666667%;max-width:41.666667%}
.column--md-6{flex:0 0 50%;max-width:50%}
.column--md-7{flex:0 0 58.333333%;max-width:58.333333%}
.column--md-8{flex:0 0 66.666667%;max-width:66.666667%}
.column--md-9{flex:0 0 75%;max-width:75%}
.column--md-10{flex:0 0 83.333333%;max-width:83.333333%}
.column--md-11{flex:0 0 91.666667%;max-width:91.666667%}
.column--md-12{flex:0 0 100%;max-width:100%}
.column--md-offset-1{margin-inline-start:8.333333%}
.column--md-offset-2{margin-inline-start:16.666667%}
.column--md-offset-3{margin-inline-start:25%}
.column--md-offset-4{margin-inline-start:33.333333%}
.column--md-offset-5{margin-inline-start:41.666667%}
.column--md-offset-6{margin-inline-start:50%}
.column--md-offset-7{margin-inline-start:58.333333%}
.column--md-offset-8{margin-inline-start:66.666667%}
.column--md-offset-9{margin-inline-start:75%}
.column--md-offset-10{margin-inline-start:83.333333%}
.column--md-offset-11{margin-inline-start:91.666667%}
.column--md-offset-12{margin-inline-start:100%}
.column--md-offset-0{margin-inline-start:0}
}
@media (min-width:992px){
.column--lg-1{flex:0 0 8.333333%;max-width:8.333333%}
.column--lg-2{flex:0 0 16.666667%;max-width:16.666667%}
.column--lg-3{flex:0 0 25%;max-width:25%}
.column--lg-4{flex:0 0 33.333333%;max-width:33.333333%}
.column--lg-5{flex:0 0 41.666667%;max-width:41.666667%}
.column--lg-6{flex:0 0 50%;max-width:50%}
.column--lg-7{flex:0 0 58.333333%;max-width:58.333333%}
.column--lg-8{flex:0 0 66.666667%;max-width:66.666667%}
.column--lg-9{flex:0 0 75%;max-width:75%}
.column--lg-10{flex:0 0 83.333333%;max-width:83.333333%}
.column--lg-11{flex:0 0 91.666667%;max-width:91.666667%}
.column--lg-12{flex:0 0 100%;max-width:100%}
.column--lg-offset-1{margin-inline-start:8.333333%}
.column--lg-offset-2{margin-inline-start:16.666667%}
.column--lg-offset-3{margin-inline-start:25%}
.column--lg-offset-4{margin-inline-start:33.333333%}
.column--lg-offset-5{margin-inline-start:41.666667%}
.column--lg-offset-6{margin-inline-start:50%}
.column--lg-offset-7{margin-inline-start:58.333333%}
.column--lg-offset-8{margin-inline-start:66.666667%}
.column--lg-offset-9{margin-inline-start:75%}
.column--lg-offset-10{margin-inline-start:83.333333%}
.column--lg-offset-11{margin-inline-start:91.666667%}
.column--lg-offset-12{margin-inline-start:100%}
.column--lg-offset-0{margin-inline-start:0}
}
@media (min-width:1200px){
.column--xl-1{flex:0 0 8.333333%;max-width:8.333333%}
.column--xl-2{flex:0 0 16.666667%;max-width:16.666667%}
.column--xl-3{flex:0 0 25%;max-width:25%}
.column--xl-4{flex:0 0 33.333333%;max-width:33.333333%}
.column--xl-5{flex:0 0 41.666667%;max-width:41.666667%}
.column--xl-6{flex:0 0 50%;max-width:50%}
.column--xl-7{flex:0 0 58.333333%;max-width:58.333333%}
.column--xl-8{flex:0 0 66.666667%;max-width:66.666667%}
.column--xl-9{flex:0 0 75%;max-width:75%}
.column--xl-10{flex:0 0 83.333333%;max-width:83.333333%}
.column--xl-11{flex:0 0 91.666667%;max-width:91.666667%}
.column--xl-12{flex:0 0 100%;max-width:100%}
.column--xl-offset-1{margin-inline-start:8.333333%}
.column--xl-offset-2{margin-inline-start:16.666667%}
.column--xl-offset-3{margin-inline-start:25%}
.column--xl-offset-4{margin-inline-start:33.333333%}
.column--xl-offset-5{margin-inline-start:41.666667%}
.column--xl-offset-6{margin-inline-start:50%}
.column--xl-offset-7{margin-inline-start:58.333333%}
.column--xl-offset-8{margin-inline-start:66.666667%}
.column--xl-offset-9{margin-inline-start:75%}
.column--xl-offset-10{margin-inline-start:83.333333%}
.column--xl-offset-11{margin-inline-start:91.666667%}
.column--xl-offset-12{margin-inline-start:100%}
.column--xl-offset-0{margin-inline-start:0}
}

/* ==========================================================================
   05  BUTTONS, BADGES, CHIPS
   ========================================================================== */

.btn,
.lt-btn,
input[type="submit"],
.lt-section-subscribe button,
.lt-article-subscribe button,
.lt-community-follow button,
.lt-profile__buttons button,
.lt-profile__buttons a,
.lt-organization-subscribe button,
.subscriptions-subscribe button,
.pagination-next-link,
.pagination-prev-link,
.pagination-first-link,
.pagination-last-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 0.6875rem 1.125rem;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  line-height: 1.25;
  color: var(--p-ink);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  background: var(--p-surface);
  border: 1px solid var(--p-hairline);
  border-radius: var(--r-btn);
  box-shadow: var(--sh-1);
  transition: background-color var(--dur-2) var(--ease),
    border-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease),
    box-shadow var(--dur-2) var(--ease), transform var(--dur-1) var(--ease);
}

.btn:hover,
.lt-btn:hover,
input[type="submit"]:hover,
.lt-section-subscribe button:hover,
.lt-article-subscribe button:hover,
.lt-community-follow button:hover,
.lt-profile__buttons button:hover,
.lt-profile__buttons a:hover,
.lt-organization-subscribe button:hover,
.subscriptions-subscribe button:hover,
.pagination-next-link:hover,
.pagination-prev-link:hover,
.pagination-first-link:hover,
.pagination-last-link:hover {
  color: var(--p-ink);
  text-decoration: none;
  border-color: var(--p-accent-line);
  box-shadow: var(--sh-2);
  transform: translateY(-1px);
}

.btn:active,
.lt-btn:active,
input[type="submit"]:active {
  transform: translateY(0);
  box-shadow: var(--sh-1);
}

.btn:focus-visible,
input[type="submit"]:focus-visible {
  outline: none;
  box-shadow: var(--sh-1), var(--ring);
}

.btn[disabled],
.btn[aria-disabled="true"],
input[type="submit"][disabled] {
  cursor: not-allowed;
  opacity: 0.55;
  transform: none;
  box-shadow: none;
}

/* -- Primary: the one action we want people to take ----------------------- */
.btn--primary,
input[type="submit"] {
  color: #fff;
  background: var(--p-btn-1);
  border-color: transparent;
  box-shadow: 0 1px 2px rgba(16, 32, 45, 0.12),
    0 6px 16px -6px rgba(16, 32, 45, 0.28);
}

.btn--primary:hover,
input[type="submit"]:hover {
  color: #fff;
  background: var(--p-ink);
  border-color: transparent;
  box-shadow: 0 2px 4px rgba(16, 32, 45, 0.14),
    0 12px 26px -8px rgba(16, 32, 45, 0.34);
}

/* -- Accent: reserved for the highest-intent CTAs ------------------------- */
.btn--submit-a-request,
.still-have-questions__btn,
.see-all-articles {
  color: var(--p-ink);
  background: var(--p-accent);
  border-color: transparent;
  box-shadow: 0 1px 2px rgba(4, 168, 126, 0.2),
    0 8px 20px -8px rgba(4, 168, 126, 0.45);
}

/* Resting state is dark ink on bright mint; hover goes to the darkened mint,
   so the label has to flip to white to stay readable. */
.btn--submit-a-request:hover,
.still-have-questions__btn:hover,
.see-all-articles:hover {
  color: #fff;
  background: var(--p-accent-strong);
  border-color: transparent;
  box-shadow: 0 2px 6px rgba(4, 168, 126, 0.24),
    0 14px 30px -10px rgba(4, 168, 126, 0.5);
}

/* -- Default / secondary -------------------------------------------------- */
.btn--default,
.lt-btn--default {
  color: var(--p-ink);
  background: var(--p-surface);
  border-color: var(--p-hairline);
}

.btn--default:hover,
.lt-btn--default:hover {
  background: var(--p-accent-soft);
  border-color: var(--p-accent-line);
}

/* -- Topbar variants ------------------------------------------------------ */
.btn--topbar {
  padding: 0.625rem 1.0625rem;
}

.btn--login {
  color: var(--p-topbar-btn);
  background: transparent;
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: none;
}

.btn--login:hover {
  color: var(--p-topbar-btn);
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.55);
  box-shadow: none;
}

/* -- Subscribe / follow buttons carry an icon ----------------------------- */
.lt-article-subscribe button,
.lt-section-subscribe button,
.lt-community-follow button,
.lt-organization-subscribe button {
  font-size: var(--fs-sm);
}

/* ==========================================================================
   Badges, labels & status pills
   ========================================================================== */

.label,
.status-label,
.lt-status-label,
.post-status,
.request-status,
.escalation-badge,
.status-label-pending-moderation {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 0.25rem 0.625rem;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  line-height: 1.45;
  white-space: nowrap;
  color: var(--p-muted);
  background: var(--p-tint);
  border: 1px solid var(--p-hairline);
  border-radius: var(--r-pill);
}

/* Semantic tones — one mixin, applied by state class */
.request-status--open,
.post-status-planned,
.lt-status-label--pending,
.status-label-pending-moderation,
.comment-pending {
  color: #8a5a00;
  color: var(--tone-warning);
  background: color-mix(in srgb, var(--p-warning) 22%, var(--mix-bg));
  border-color: color-mix(in srgb, var(--p-warning) 42%, var(--mix-bg));
}

.request-status--answered,
.post-status-completed,
.lt-status-label--official {
  color: var(--p-accent-strong);
  background: var(--p-accent-soft);
  border-color: var(--p-accent-line);
}

.request-status--closed,
.post-status-not-planned {
  color: var(--p-muted);
  background: var(--p-tint);
  border-color: var(--p-hairline);
}

.post-status-featured,
.post-status-pinned {
  color: var(--tone-info);
  background: color-mix(in srgb, var(--p-info) 16%, var(--mix-bg));
  border-color: color-mix(in srgb, var(--p-info) 38%, var(--mix-bg));
}

.escalation-badge {
  color: var(--tone-danger);
  background: color-mix(in srgb, var(--p-danger) 14%, var(--mix-bg));
  border-color: color-mix(in srgb, var(--p-danger) 36%, var(--mix-bg));
}

/* -- Content tags --------------------------------------------------------- */
.content-tags__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  padding-inline-start: 0;
  margin: 0;
  list-style: none;
}

.content-tags__item {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0.3125rem 0.75rem;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--p-ink);
  background: var(--p-tint);
  border: 1px solid var(--p-hairline);
  border-radius: var(--r-pill);
  transition: background-color var(--dur-2) var(--ease),
    border-color var(--dur-2) var(--ease);
}

.content-tags__item:hover {
  color: var(--p-accent-strong);
  text-decoration: none;
  background: var(--p-accent-soft);
  border-color: var(--p-accent-line);
}

.content-tags__item--search .close-icon::before {
  content: "×";
  font-size: 1.1em;
  line-height: 1;
  opacity: 0.6;
}

.content-tags__item--search:hover .close-icon::before {
  opacity: 1;
}

/* -- Community badges ----------------------------------------------------- */
.community-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  color: var(--p-muted);
}

.community-badge-titles {
  padding: 0.1875rem 0.5rem;
  background: var(--p-tint);
  border-radius: var(--r-pill);
}

.community-badge-titles img,
.community-badge-achievements img {
  width: 16px;
  height: 16px;
}

.community-badge-achievements {
  display: inline-block;
  margin-inline-end: var(--s-1);
}


/* ==========================================================================
   06  FORMS
   ========================================================================== */

.form-field,
.form-field + .form-field {
  margin-block-end: var(--s-6);
}

label,
.form-field > label {
  display: block;
  margin-block-end: var(--s-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--p-ink);
}

.form-field .optional {
  margin-inline-start: var(--s-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-normal);
  color: var(--p-faint);
}

.form-field p,
.help-block {
  margin-block-start: var(--s-2);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--p-muted);
}

/* Matched by exclusion rather than by an allowlist of types. Zendesk renders
   its tagger/impact field as `<input role="combobox">` with NO type attribute,
   which input[type="text"] does not match - so it fell through to Zendesk's own
   white background while inheriting the page's light text. Anything that is not
   a button, a toggle, or a file/range/colour picker gets the theme's field
   treatment, including future input types. */
input:not([type]),
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="search"],
textarea,
select,
ul[data-hc-pills-container] {
  display: block;
  width: 100%;
  padding: 0.6875rem 0.875rem;
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--p-text);
  background-color: var(--p-surface);
  background-clip: padding-box;
  border: 1px solid var(--p-hairline);
  border-radius: var(--r-btn);
  box-shadow: inset 0 1px 2px rgba(16, 32, 45, 0.04);
  transition: border-color var(--dur-2) var(--ease),
    box-shadow var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease);
  appearance: none;
}

textarea {
  min-height: 168px;
  resize: vertical;
}

input::placeholder,
textarea::placeholder {
  color: var(--p-faint);
  opacity: 1;
}

/* Zendesk ships its own stylesheet for the request form's custom controls and
   hard-codes a white surface on them. Whether that file lands before or after
   the theme's is outside our control, so specificity has to decide rather than
   source order - at equal specificity the later file wins, and Zendesk's white
   background paired with the theme's light dark-mode text measured 1.27:1 on the
   "what impact" combobox. The `body` prefix lifts these above a bare
   `input:not([type])` or `[role="combobox"]` selector without needing
   !important. Keep the two properties together: a background that wins while
   the colour loses is exactly the failure this prevents. */
body input:not([type]),
body [role="combobox"],
body input[type="text"][role="combobox"],
body ul[data-hc-pills-container] {
  color: var(--p-text);
  background-color: var(--p-surface);
  border-color: var(--p-hairline);
}

input:not([type]):hover,
input[type="text"]:hover,
input[type="email"]:hover,
input[type="datetime-local"]:hover,
textarea:hover,
select:hover {
  border-color: color-mix(in srgb, var(--p-accent) 30%, var(--p-hairline));
}

input:not([type]):focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="date"]:focus,
input[type="datetime-local"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus,
ul[data-hc-pills-container][data-hc-focus="true"] {
  outline: none;
  border-color: var(--p-accent);
  box-shadow: inset 0 1px 2px rgba(16, 32, 45, 0.03), var(--ring);
}

/* Native select chevron, drawn rather than imported */
select {
  padding-inline-end: 2.25rem;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 1.0625rem center, right 0.75rem center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}

[dir="rtl"] select {
  background-position: left 0.75rem center, left 1.0625rem center;
}

select::-ms-expand {
  display: none;
}

select[size],
select[multiple] {
  height: auto;
  background-image: none;
}

/* -- Checkbox ------------------------------------------------------------- */
.form-field.boolean {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
}

input[type="checkbox"],
input[type="radio"] {
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  margin: 0.1875rem 0 0;
  cursor: pointer;
  accent-color: var(--p-accent-strong);
}

.form-field.boolean label {
  margin: 0;
  font-weight: var(--fw-normal);
  line-height: 1.5;
  cursor: pointer;
}

input[type="file"] {
  display: block;
  width: 100%;
  font-size: var(--fs-sm);
  color: var(--p-muted);
}

fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

legend {
  display: block;
  width: 100%;
  padding: 0;
  margin-block-end: var(--s-4);
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  color: var(--p-ink);
}

/* -- CC pills field ------------------------------------------------------- */
ul[data-hc-pills-container] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  min-height: 46px;
  list-style: none;
}

ul[data-hc-pills-container]::placeholder {
  color: var(--p-faint);
}

/* -- Description minimum-length meter (markup injected by script.js) -------
   script.js only sets the width and toggles .is-met; every colour is here so
   the meter follows the theme tokens and adapts to dark mode. */
#desc-char-wrapper {
  margin-block-start: var(--s-3);
}

.desc-char-track {
  height: 6px;
  overflow: hidden;
  background: var(--p-hairline);
  border-radius: var(--r-pill);
}

#desc-char-bar {
  width: 0%;
  height: 100%;
  background: var(--tone-warning);
  border-radius: var(--r-pill);
  transition: width var(--dur-3) var(--ease-out),
    background-color var(--dur-2) var(--ease);
}

#desc-char-bar.is-met {
  background: var(--p-accent);
}

#desc-char-label {
  display: inline-block;
  margin-block-start: var(--s-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: 0.01em;
  color: var(--p-muted);
}

#desc-char-label.is-met {
  color: var(--tone-success);
}

#desc-submit-error {
  padding: var(--s-3) var(--s-4);
  margin-block-start: var(--s-3);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--tone-danger);
  background: color-mix(in srgb, var(--p-danger) 8%, var(--mix-bg));
  border: 1px solid color-mix(in srgb, var(--p-danger) 30%, var(--mix-bg));
  border-radius: var(--r-sm);
}

/* Zendesk field-level validation text (not the page-level .notification panel) */
.form-field .notification-error,
.form-field [id$="_error"],
[id$="_error"] {
  display: block;
  margin-block-start: var(--s-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: 1.5;
  color: var(--tone-danger);
  background: none;
  border: 0;
}

/* A field that failed validation gets a red edge */
.form-field.error input[type="text"],
.form-field.error input[type="email"],
.form-field.error textarea,
.form-field.error select {
  border-color: color-mix(in srgb, var(--p-danger) 55%, var(--mix-bg));
}


/* ==========================================================================
   07  TOPBAR & NAVIGATION
   ========================================================================== */

/* --------------------------------------------------------------------------
   Sticky header
   --------------------------------------------------------------------------
   .layout__head is the sticky element rather than .topbar, because a sticky
   child can only travel within its own containing block — sticking .topbar
   inside .layout__head would do nothing at all.

   --header-h is written by script.js from the real measured height, so the TOC
   offset, scroll-padding and heading scroll-margin below always match the
   actual header instead of a guessed constant. The fallback covers no-JS.
   -------------------------------------------------------------------------- */
.layout__head {
  position: sticky;
  top: 0;
  z-index: 60;
}

:root {
  --header-h: 100px;
  --header-gap: calc(var(--header-h) + var(--s-5));
}

/* The template pairs .lt-mb-9 on the topbar with .lt-mt-n9 on the hero so the
   hero sits flush beneath it. Both are !important utilities, so countering them
   needs !important too. Left alone, that 64px of topbar margin becomes part of
   the sticky box — a transparent strip that overlays content and swallows
   clicks. Pages without a hero already carry their own top padding, so zeroing
   the pair changes nothing visually. */
.layout__head .topbar {
  margin-block-end: 0 !important;
}

/* .lt-mt-n9 pulls the hero 4rem upward, which puts the top 40px of hero content
   BEHIND the opaque topbar - that is what made the illustration look cut off.
   Do not remove this without re-measuring the image-to-header gap. */
.hero-unit {
  margin-block-start: 0 !important;
}

/* Anchor targets must clear the sticky header, or in-page links land underneath
   it. This is the classic sticky-header bug and it needs handling in three
   places: the scroll container, the headings, and the sticky rails. */
html {
  scroll-padding-top: var(--header-gap);
}

/* Single source of truth for the gap between the sticky header and page
   content. It is structural rather than per-page because category_page,
   section_page, new_request_page and community_post_page have no page class to
   hang padding on - previously they leaned on the topbar's .lt-mb-9 margin,
   which is now zeroed. The hero opts out: it paints its own background right
   up to the header. */
.layout__main > *:first-child:not(.hero-unit) {
  padding-block-start: clamp(24px, 3vw, 40px);
}

/* -- Compact mode: once the page search docks into the header, tighten it so
      the sticky bar costs as little vertical space as possible. ------------- */
/* NOTE: the class is applied TO .topbar, not to an ancestor, so this must be a
   compound selector. `.topbar--search-docked .topbar` would look for a nested
   topbar and silently match nothing. The doubled class also lifts specificity
   above .lt-py-4, which sets its padding with !important. */
.topbar.topbar--search-docked {
  padding-block: var(--s-3) !important;
}

.topbar--search-docked .topbar__logo {
  max-height: 34px;
}

/* -- Slot the page search docks into ------------------------------------- */
.topbar__searchslot {
  display: none;
}

.topbar--search-docked .topbar__searchslot {
  display: block;
  flex: 1 1 300px;
  min-width: 0;
}

/* The field arrives carrying whatever spacing utility it had in the page body
   (.lt-mb-9 on the hero, .lt-mb-6 on inner pages). Those are !important, and
   left in place they make the docked header TALLER than the undocked one. */
.topbar__searchslot .search-box {
  margin: 0 !important;
}

@media (min-width: 992px) {
  .topbar__searchslot {
    max-width: 440px;
    margin-inline: var(--s-5);
  }
}

@media (max-width: 991px) {
  /* Below the lg breakpoint .topbar__inner is not a flex row, so a docked field
     stacks under the logo and the sticky header eats ~146px of a phone screen.
     Make the row flex and let the field share it with the logo. The menu is
     forced onto its own full-width line so opening it still works - closed it
     has zero height and costs nothing. */
  .topbar.topbar--search-docked {
    padding-block: var(--s-2) !important;
  }

  .topbar--search-docked .topbar__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-3);
  }

  .topbar--search-docked .topbar__inner > div:first-child {
    flex: 0 0 auto;
    gap: var(--s-3);
  }

  .topbar--search-docked .topbar__searchslot {
    flex: 1 1 120px;
    margin-block-start: 0;
  }

  .topbar--search-docked .topbar__menu {
    flex: 1 0 100%;
  }

  .topbar--search-docked .topbar__logo {
    max-height: 26px;
  }

  .topbar--search-docked .lines-button {
    width: 38px;
    height: 38px;
  }

  .topbar--search-docked .search-box #query {
    height: 38px;
  }
}

/* Compact, on-dark treatment while docked. Three-class specificity so it wins
   over both .search-box and .search-box_page. */
.topbar__searchslot .search-box #query {
  height: 42px;
  padding-inline: 40px var(--s-4);
  font-size: var(--fs-sm);
  color: var(--p-topbar-text);
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.22);
  border-radius: var(--r-pill);
  box-shadow: none;
}

.topbar__searchslot .search-box #query::placeholder {
  color: rgba(255, 255, 255, 0.62);
}

/* Invert to a light field on focus so typed text is unambiguous */
.topbar__searchslot .search-box #query:focus {
  color: var(--p-text);
  background: var(--p-surface);
  border-color: var(--p-accent);
  box-shadow: var(--ring);
}

.topbar__searchslot .search-box svg {
  inset-inline-start: 14px;
  width: 16px;
  height: 17px;
  fill: rgba(255, 255, 255, 0.7);
}

.topbar__searchslot .search-box:focus-within svg {
  fill: var(--p-accent-strong);
}

.topbar {
  position: relative;
  z-index: 30;
  color: var(--p-topbar-text);
  background: var(--p-topbar-bg);
}

.topbar__inner {
  align-items: center;
  gap: var(--s-5);
}

.topbar__logo {
  height: var(--logo-height);
  max-height: 52px;
  width: auto;
  transition: opacity var(--dur-2) var(--ease);
}

.topbar__logo:hover {
  opacity: 0.85;
}

.topbar__menu {
  flex: 1 1 auto;
  min-width: 0;
}

.topbar__navigation {
  gap: var(--s-1);
  flex-wrap: wrap;
}

.topbar__link {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.875rem;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--p-topbar-link);
  text-decoration: none;
  border-radius: var(--r-pill);
  transition: background-color var(--dur-2) var(--ease),
    color var(--dur-2) var(--ease);
}

.topbar__link:hover,
.topbar__link:focus-visible {
  color: var(--p-topbar-link);
  text-decoration: none;
  background: rgba(255, 255, 255, 0.14);
}

.topbar__controls {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

/* -- Signed-in user menu -------------------------------------------------- */
.user-info .dropdown-toggle--user {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0.3125rem 0.75rem 0.3125rem 0.3125rem;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--p-topbar-text);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--r-pill);
  transition: background-color var(--dur-2) var(--ease);
}

.user-info .dropdown-toggle--user:hover {
  background: rgba(255, 255, 255, 0.2);
}

.user-name {
  max-width: 12ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lt-user-avatar,
.lt-avatar img {
  border-radius: 50%;
  object-fit: cover;
  background: var(--p-tint);
}

.lt-user-avatar--topbar {
  width: 28px;
  height: 28px;
}

.lt-user-avatar--default {
  width: 40px;
  height: 40px;
}

.lt-user-avatar--profile {
  width: 96px;
  height: 96px;
}

/* -- Language selector ---------------------------------------------------- */
.language-selector .dropdown-toggle {
  cursor: pointer;
}

/* -- Mobile hamburger ----------------------------------------------------- */
.lines-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: var(--p-topbar-text);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--r-btn);
  transition: background-color var(--dur-2) var(--ease);
}

.lines-button:hover {
  background: rgba(255, 255, 255, 0.2);
}

.lines,
.lines::before,
.lines::after {
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--dur-3) var(--ease-out),
    opacity var(--dur-1) var(--ease), top var(--dur-3) var(--ease-out);
}

.lines {
  position: relative;
}

.lines::before,
.lines::after {
  position: absolute;
  inset-inline-start: 0;
  content: "";
}

.lines::before {
  top: -6px;
}

.lines::after {
  top: 6px;
}

.lines-button.is-active .lines {
  background: transparent;
}

.lines-button.is-active .lines::before {
  top: 0;
  transform: rotate(45deg);
}

.lines-button.is-active .lines::after {
  top: 0;
  transform: rotate(-45deg);
}

/* -- Collapsed menu panel on small screens -------------------------------- */
@media (max-width: 991px) {
  .topbar__collapse {
    display: none;
    padding-block: var(--s-5) var(--s-2);
  }

  .topbar__navigation {
    flex-direction: column;
    align-items: stretch;
    margin-block-end: var(--s-4) !important;
  }

  .topbar__link {
    justify-content: center;
    padding-block: 0.6875rem;
    background: rgba(255, 255, 255, 0.06);
  }

  .topbar__controls {
    flex-direction: column;
    align-items: stretch;
  }

  .topbar__controls > *,
  .topbar__controls .btn {
    width: 100%;
  }
}

/* ==========================================================================
   08  HERO & SEARCH
   ========================================================================== */

.hero-unit {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--p-hero-title);
  background: var(--p-scrim-deep);
  background-image: linear-gradient(
    170deg,
    var(--p-scrim-deep) 0%,
    color-mix(in srgb, var(--p-scrim-deep) 76%, var(--p-scrim)) 100%
  );
}

/* The hero's visual interest comes from the brand Background Pool asset set in
   the "Hero background image" setting - see the block below. Earlier drafts of
   this theme added an invented mint radial "bloom" and a dot-grid texture here;
   both were removed as generic template decoration that the brand system does
   not specify. Do not reintroduce them. */
.hero-unit::after {
  position: absolute;
  inset: 0;
  z-index: -2;
  content: "";
  pointer-events: none;
}

/* -- Brand hero backdrop --------------------------------------------------
   Driven by the "Hero background image" setting, passed in as --hero-bg from
   the template so an unset value can never emit an invalid url(). The asset is
   the design system's Background Pool hero (p17 hero bg f): near-black ground
   with the mint isometric lattice massed top-right.

   The scrim guarantees headline contrast no matter which backdrop is swapped
   in, so this does not have to be re-audited every time marketing ships a new
   one. It fades out by 70% width, leaving the lattice untouched. */
.hero-unit--has-bg::after {
  /* Sits below the headline swash, which is also a negative-z pseudo-element in
     this isolated stacking context. At the same z-index the later-painted
     backdrop covered it. */
  z-index: -2;
  background-image: linear-gradient(
      90deg,
      var(--p-scrim-deep) 0%,
      color-mix(in srgb, var(--p-scrim-deep) 72%, transparent) 42%,
      transparent 70%
    ),
    var(--hero-bg);
  background-position: center right;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 1;
  mask-image: none;
  -webkit-mask-image: none;
}

/* The backdrop already carries the visual interest; the bloom would muddy it */
.hero-unit--has-bg::before {
  display: none;
}

/* With no spot illustration, the copy column gets a comfortable measure
   instead of stretching across the full width. */
.hero-unit--has-bg .hero-unit__title,
.hero-unit--has-bg .hero-unit__subtitle {
  max-width: 22ch;
}

.hero-unit--has-bg .hero-unit__subtitle {
  max-width: 44ch;
}

.hero-unit .container-inner {
  padding-block: clamp(28px, 4vw, 52px) clamp(48px, 7vw, 78px);
}

.hero-unit--no-custom-blocks .container-inner {
  padding-block: clamp(28px, 4vw, 52px) clamp(56px, 8vw, 92px);
}

.hero-unit__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0.3125rem 0.8125rem;
  margin-block-end: var(--s-5);
  font-family: var(--p-font);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--p-accent);
  background: color-mix(in srgb, var(--p-accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--p-accent) 34%, transparent);
  border-radius: var(--r-pill);
}

.hero-unit__eyebrow::before {
  width: 6px;
  height: 6px;
  content: "";
  background: var(--p-accent);
  border-radius: 50%;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--p-accent) 26%, transparent);
}

.hero-unit__title {
  color: var(--p-hero-title);
  font-family: var(--p-font-display);
  font-size: var(--fs-h1-hero);
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
}

/* The word wrapped by data-underline gets an accent swash */
.hero-unit__subtitle {
  max-width: 46ch;
  margin-block-start: var(--s-4);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem);
  font-weight: var(--fw-normal);
  line-height: 1.55;
  letter-spacing: 0;
  color: color-mix(in srgb, var(--p-hero-title) 78%, transparent);
}

.lt-text-md-start .hero-unit__subtitle,
.lt-text-center .hero-unit__subtitle {
  margin-inline: auto;
}

@media (min-width: 768px) {
  .lt-text-md-start .hero-unit__subtitle {
    margin-inline: 0;
  }
}

/* width:auto + max-height means a height cap shrinks the width proportionally
   instead of squashing the artwork. The cap also guarantees the image can never
   demand more vertical room than the hero gives it, so .hero-unit's
   `overflow: hidden` (needed for the accent bloom) can never clip it. */
.hero-unit__image {
  width: auto;
  height: auto;
  max-width: min(100%, 400px);
  max-height: clamp(150px, 18vw, 224px);
  object-fit: contain;
  margin-inline: auto;
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.28));
}

@media (max-width: 767px) {
  .hero-unit__image {
    max-width: 220px;
    margin-block-start: var(--s-6);
  }
}

/* -- Search field --------------------------------------------------------- */
.search-box {
  position: relative;
  clear: both;
}

.search-box svg {
  position: absolute;
  inset-inline-start: clamp(18px, 2.2vw, 26px);
  top: 50%;
  z-index: 2;
  width: 20px;
  height: 21px;
  pointer-events: none;
  fill: var(--p-deco);
  transform: translateY(-50%);
  transition: fill var(--dur-2) var(--ease);
}

.search-box:focus-within svg {
  fill: var(--p-accent-strong);
}

.search-box .search {
  width: 100%;
}

.search-box #query {
  display: block;
  width: 100%;
  height: clamp(58px, 6vw, 70px);
  padding-inline: calc(clamp(18px, 2.2vw, 26px) + 32px) var(--s-5);
  font-size: clamp(1rem, 0.95rem + 0.35vw, 1.125rem);
  color: var(--p-text);
  background: var(--p-surface);
  border: 1px solid transparent;
  border-radius: var(--r-xl);
  box-shadow: 0 2px 6px rgba(6, 22, 32, 0.08),
    0 18px 42px -14px rgba(6, 22, 32, 0.45);
  transition: box-shadow var(--dur-2) var(--ease),
    border-color var(--dur-2) var(--ease);
}

.search-box #query::placeholder {
  color: var(--p-faint);
}

.search-box #query:focus {
  border-color: var(--p-accent);
  box-shadow: 0 2px 6px rgba(6, 22, 32, 0.08),
    0 18px 42px -14px rgba(6, 22, 32, 0.45), var(--ring);
}

/* Standalone search (article page, search results) sits on the light body */
.search-box_page #query {
  height: clamp(54px, 5vw, 62px);
  border-color: var(--p-hairline);
  box-shadow: var(--sh-1);
}

.search-box_page #query:focus {
  border-color: var(--p-accent);
  box-shadow: var(--sh-1), var(--ring);
}

.search-box input[type="submit"] {
  display: none;
}

/* -- Instant-search suggestions ------------------------------------------- */
/* Zendesk reuses this one class in two very different places:
     1. under a {{search}} field, inside .search-box, which IS position:relative
     2. under the SUBJECT field of {{request_form}} on the new request page,
        where nothing in the ancestor chain is positioned
   Making it a floating dropdown unconditionally broke case 2: with no
   positioned ancestor it resolved against <body>, so `top: 100%` put a
   full-viewport-width panel at 100% of the BODY height - a huge box in the
   wrong place, overlapping the form, with nothing to dismiss it.
   The dropdown treatment is therefore scoped to case 1. Case 2 renders as a
   card in the normal flow, which is what the stock theme did, so it can never
   cover anything. Do not lift `position` back out of this scope. */
.searchbox-suggestions {
  margin-block-start: var(--s-3);
  overflow: hidden;
  background: var(--p-surface);
  border: 1px solid var(--p-hairline);
  border-radius: var(--r-md);
}

.search-box .searchbox-suggestions {
  position: absolute;
  inset-inline: 0;
  top: calc(100% + var(--s-2));
  z-index: 40;
  /* Bounded so a long result set scrolls inside the panel instead of running
     down the page. 60vh keeps the field itself on screen on a phone. */
  max-height: min(60vh, 420px);
  margin-block-start: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  box-shadow: var(--sh-3);
}

.searchbox-suggestions[hidden] {
  display: none;
}

.searchbox-suggestions ul {
  padding: var(--s-2);
  margin: 0;
  list-style: none;
}

.searchbox-suggestions li {
  margin: 0;
}

.searchbox-suggestions li a {
  display: block;
  padding: var(--s-3) var(--s-4);
  font-size: var(--fs-sm);
  color: var(--p-text);
  border-radius: var(--r-sm);
}

.searchbox-suggestions li a:hover,
.searchbox-suggestions li[aria-selected="true"] a {
  color: var(--p-ink);
  text-decoration: none;
  background: var(--p-accent-soft);
}

/* -- New request form: dismissible "Suggested articles" ------------------- */
/* The X and the click-outside/Escape handlers live in script.js; these rules
   position the button and hide the panel once it has been dismissed. Scoped to
   the enhanced panel so an un-scripted fallback still shows suggestions. */
.suggestion-list--enhanced {
  position: relative;
}

.suggestion-list--enhanced.is-dismissed {
  display: none !important;
}

.suggestion-list__close {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  font-size: 22px;
  line-height: 1;
  color: var(--p-muted);
  cursor: pointer;
  background: var(--p-tint);
  border: 1px solid var(--p-hairline);
  border-radius: 50%;
  transition: color var(--dur-2) var(--ease),
    background-color var(--dur-2) var(--ease),
    border-color var(--dur-2) var(--ease);
}

.suggestion-list__close:hover,
.suggestion-list__close:focus-visible {
  color: var(--tone-danger);
  background: var(--p-accent-soft);
  border-color: var(--p-accent-line);
  outline: none;
}

/* ==========================================================================
   09  HOME PAGE BLOCKS
   ========================================================================== */

/* -- Custom blocks: the three entry-point cards --------------------------- */
.custom-blocks {
  position: relative;
  z-index: 10;
  margin-block-start: clamp(-64px, -5vw, -40px);
}

.custom-blocks .row {
  row-gap: var(--s-5);
}

.custom-block__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(22px, 2.6vw, 30px);
  color: var(--p-text);
  text-decoration: none;
  background: var(--p-surface);
  border: 1px solid var(--p-hairline);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
  transition: transform var(--dur-3) var(--ease-out),
    box-shadow var(--dur-3) var(--ease-out),
    border-color var(--dur-2) var(--ease);
}

.custom-block__link:hover {
  text-decoration: none;
  border-color: var(--p-accent-line);
  box-shadow: var(--sh-3);
  transform: translateY(-1px);
}

.custom-block__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-block-end: var(--s-5);
  background: var(--p-accent-soft);
  border-radius: var(--r-md);
  transition: background-color var(--dur-2) var(--ease);
}

.custom-block__link:hover .custom-block__icon {
  background: color-mix(in srgb, var(--p-accent) 18%, var(--mix-bg));
}

.custom-block__icon img,
.custom-block__icon svg {
  width: auto;
  max-width: 30px;
  height: var(--icon-height);
  max-height: 30px;
  fill: var(--p-icon);
}

/* These are <h2> elements for heading order, but at card scale the spec's H3
   style is the right one: Poppins 600 / 20px. League Spartan is a display face
   and reads oddly small and sentence-cased. */
.custom-block__title {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-block-end: var(--s-2);
  font-family: var(--p-font);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semi);
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  color: var(--p-ink);
  transition: color var(--dur-2) var(--ease);
}

/* Arrow affordance that slides on hover */
.custom-block__title::after {
  font-size: 0.85em;
  line-height: 1;
  content: "→";
  color: var(--p-accent-strong);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity var(--dur-2) var(--ease),
    transform var(--dur-2) var(--ease-out);
}

[dir="rtl"] .custom-block__title::after {
  content: "←";
  transform: translateX(6px);
}

.custom-block__link:hover .custom-block__title {
  color: var(--p-accent-strong);
}

.custom-block__link:hover .custom-block__title::after {
  opacity: 1;
  transform: translateX(0);
}

.custom-block__description {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--p-muted);
}

/* -- Category tree -------------------------------------------------------- */
.category-tree {
  padding-block-start: clamp(48px, 6vw, 72px);
}

.category-tree__title {
  font-size: var(--fs-h2);
  text-transform: uppercase;
}

.category-tree__title-link {
  color: var(--p-ink);
}

.category-tree__title-link:hover {
  color: var(--p-accent-strong);
  text-decoration: none;
}

.category-tree__description {
  max-width: var(--measure);
  margin-block-end: var(--s-6);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--p-muted);
}

.section {
  margin-block-end: var(--s-4);
  overflow: hidden;
  background: var(--p-surface);
  border: 1px solid var(--p-hairline);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  transition: border-color var(--dur-2) var(--ease),
    box-shadow var(--dur-2) var(--ease);
}

.section:hover {
  border-color: color-mix(in srgb, var(--p-accent) 24%, var(--p-hairline));
  box-shadow: var(--sh-2);
}

.section__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-5) clamp(18px, 2.4vw, 26px);
  cursor: pointer;
  user-select: none;
}

.section__title-name {
  font-size: var(--fs-h4);
  color: var(--p-ink);
}

.section__title-meta {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--s-3);
}

/* Count badge so a collapsed section still tells you how much is inside */
.section__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  padding: 0.125rem 0.4375rem;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  font-variant-numeric: tabular-nums;
  color: var(--p-muted);
  background: var(--p-tint);
  border: 1px solid var(--p-hairline);
  border-radius: var(--r-pill);
  transition: color var(--dur-2) var(--ease),
    background-color var(--dur-2) var(--ease),
    border-color var(--dur-2) var(--ease);
}

.section__title:hover .section__count {
  color: var(--tone-success);
  background: var(--p-accent-soft);
  border-color: var(--p-accent-line);
}

.section__title-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  font-size: 0.875rem;
  color: var(--p-muted);
  background: var(--p-tint);
  border-radius: 50%;
  transition: transform var(--dur-3) var(--ease-out),
    background-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}

.section__title:hover .section__title-meta {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--s-3);
}

/* Count badge so a collapsed section still tells you how much is inside */
.section__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  padding: 0.125rem 0.4375rem;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  font-variant-numeric: tabular-nums;
  color: var(--p-muted);
  background: var(--p-tint);
  border: 1px solid var(--p-hairline);
  border-radius: var(--r-pill);
  transition: color var(--dur-2) var(--ease),
    background-color var(--dur-2) var(--ease),
    border-color var(--dur-2) var(--ease);
}

.section__title:hover .section__count {
  color: var(--tone-success);
  background: var(--p-accent-soft);
  border-color: var(--p-accent-line);
}

.section__title:hover .section__title-icon {
  color: var(--p-accent-strong);
  background: var(--p-accent-soft);
}

.section__title.is-active .section__title-meta {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--s-3);
}

/* Count badge so a collapsed section still tells you how much is inside */
.section__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  padding: 0.125rem 0.4375rem;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  font-variant-numeric: tabular-nums;
  color: var(--p-muted);
  background: var(--p-tint);
  border: 1px solid var(--p-hairline);
  border-radius: var(--r-pill);
  transition: color var(--dur-2) var(--ease),
    background-color var(--dur-2) var(--ease),
    border-color var(--dur-2) var(--ease);
}

.section__title:hover .section__count {
  color: var(--tone-success);
  background: var(--p-accent-soft);
  border-color: var(--p-accent-line);
}

.section__title.is-active .section__title-icon {
  transform: rotate(180deg);
}

.article-list {
  display: none;
  padding: 0 clamp(18px, 2.4vw, 26px) var(--s-4);
  margin: 0;
  list-style: none;
  border-top: 1px solid var(--p-hairline);
}

.article-list.article-list_page,
.article-list[data-tree-box].is-active {
  display: block;
}

.article-list_page {
  padding: 0;
  border-top: 0;
}

.article-list__item {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  padding-block: 0.125rem;
  border-bottom: 1px solid color-mix(in srgb, var(--p-hairline) 60%, transparent);
}

.article-list__item:last-child {
  border-bottom: 0;
}

.article-list__item .fa-star {
  flex-shrink: 0;
  font-size: 0.75rem;
  color: var(--p-warning);
}

.article-list__item-link {
  display: block;
  flex: 1 1 auto;
  padding-block: var(--s-3);
  font-size: 0.9375rem;
  color: var(--p-text);
  transition: color var(--dur-1) var(--ease),
    padding-inline-start var(--dur-2) var(--ease-out);
}

.article-list__item-link:hover {
  color: var(--p-accent-strong);
  text-decoration: none;
  padding-inline-start: var(--s-2);
}

.see-all-articles {
  margin-block-start: var(--s-4);
}

/* -- Promoted articles ---------------------------------------------------- */
.promoted-articles {
  padding-block: var(--s-4) clamp(40px, 5vw, 64px);
}

.promoted-articles__title {
  font-size: var(--fs-h2);
  text-transform: uppercase;
}

.promoted-articles__description {
  max-width: var(--measure);
  margin-block: var(--s-3) var(--s-6);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--p-muted);
}

.promoted-articles__list {
  row-gap: var(--s-5);
}

.promoted-articles__item {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(20px, 2.4vw, 26px);
  background: var(--p-surface);
  border: 1px solid var(--p-hairline);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  transition: transform var(--dur-3) var(--ease-out),
    box-shadow var(--dur-3) var(--ease-out),
    border-color var(--dur-2) var(--ease);
}

.promoted-articles__item:hover {
  border-color: var(--p-accent-line);
  box-shadow: var(--sh-3);
  transform: translateY(-1px);
}

.promoted-articles__item-header {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-block-end: var(--s-4);
}

.promoted-articles__item-img img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.promoted-articles__item-time {
  font-size: var(--fs-xs);
  color: var(--p-faint);
}

.promoted-articles__item-title {
  display: block;
  margin-block-end: var(--s-2);
  font-size: var(--fs-h5);
  font-weight: var(--fw-semi);
  line-height: 1.4;
  color: var(--p-ink);
  letter-spacing: var(--tracking-tight);
}

.promoted-articles__item:hover .promoted-articles__item-title {
  color: var(--p-accent-strong);
  text-decoration: none;
}

.promoted-articles__item-text {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--p-muted);
}

/* -- "Still have questions" CTA band -------------------------------------- */
.still-have-questions {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(30px, 4.5vw, 56px);
  margin-block-end: clamp(48px, 6vw, 80px);
  color: #fff;
  background: var(--p-scrim);
  background-image: linear-gradient(
    135deg,
    var(--p-scrim) 0%,
    color-mix(in srgb, var(--p-scrim-deep) 78%, var(--p-scrim)) 100%
  );
  border-radius: var(--r-xl);
  box-shadow: var(--sh-3);
}

/* -- Closing CTA backdrop -------------------------------------------------
   Uses the design system's "Closing Cta Overlays" Background Pool asset, passed
   in as --cta-bg from the template so an unset value cannot emit an invalid
   url(). Same scrim approach as the hero: guarantees heading contrast whatever
   overlay is swapped in. */
.still-have-questions--has-bg {
  background-image: linear-gradient(
      90deg,
      var(--p-scrim) 0%,
      color-mix(in srgb, var(--p-scrim) 74%, transparent) 44%,
      transparent 72%
    ),
    var(--cta-bg);
  background-position: center right;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Without the spot illustration the copy gets a readable measure rather than
   stretching the full width of the band. */
.still-have-questions--has-bg .still-have-questions__title,
.still-have-questions--has-bg .still-have-questions__text {
  /* 36ch keeps "Technical Support Engineers" from splitting across lines;
     balance stops the last line becoming an orphan. */
  max-width: 36ch;
  text-wrap: balance;
}

.still-have-questions .row {
  align-items: center;
  row-gap: var(--s-6);
}

.still-have-questions__title {
  font-size: var(--fs-h2);
  text-transform: uppercase;
  color: #fff;
}

.still-have-questions__text {
  max-width: 42ch;
  margin-block: var(--s-4) var(--s-6);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  font-weight: var(--fw-normal);
  line-height: 1.55;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.8);
}

.still-have-questions__img-box {
  display: flex;
  align-items: center;
  justify-content: center;
}

.still-have-questions__img {
  max-width: min(100%, 300px);
  filter: drop-shadow(0 16px 34px rgba(0, 0, 0, 0.3));
}

@media (max-width: 575px) {
  .still-have-questions__img-box {
    display: none;
  }
}

/* ==========================================================================
   10  ARTICLE PAGE
   ========================================================================== */

.article {
  /* Top gap comes from .layout__main > *:first-child - see section 07. */
  padding-block-end: clamp(40px, 5vw, 72px);
}

.article > .container-inner > h1 {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  max-width: 30ch;
  /* Breadcrumbs sit directly above this, so the first value is the
     breadcrumb-to-title gap and the second is title-to-content. Scale:
     --s-3 12px, --s-4 16px, --s-5 20px, --s-6 24px, --s-7 32px. */
  margin-block: var(--s-6) var(--s-5);
  font-family: var(--p-font);
  font-size: var(--fs-h1);
  font-weight: var(--fw-semi);
  line-height: 1.2;
  text-transform: none;
}

.article > .container-inner > h1 .fa-lock {
  flex-shrink: 0;
  margin-block-start: 0.28em;
  font-size: 0.5em;
  color: var(--p-faint);
}

/* -- Breadcrumbs ---------------------------------------------------------- */
.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding-inline-start: 0;
  margin: 0;
  font-size: var(--fs-sm);
  list-style: none;
}

.breadcrumbs li {
  display: inline-flex;
  align-items: center;
  color: var(--p-muted);
}

.breadcrumbs li::before {
  margin-inline: var(--s-2);
  color: var(--p-deco);
  content: "/";
}

.breadcrumbs li:first-child::before {
  display: none;
}

[dir="rtl"] .breadcrumbs li::before {
  content: "\\";
}

.breadcrumbs li a {
  color: var(--p-muted);
  border-radius: var(--r-sm);
}

.breadcrumbs li a:hover {
  color: var(--p-accent-strong);
  text-decoration: underline;
}

.breadcrumbs li:last-child {
  font-weight: var(--fw-medium);
  color: var(--p-ink);
}

.breadcrumbs--search-results {
  margin-block-end: var(--s-4);
}

/* -- Author / entry meta -------------------------------------------------- */
.lt-entry-info {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.lt-entry-info__avatar {
  flex-shrink: 0;
}

.lt-avatar {
  position: relative;
  display: block;
}

/* Agent verification dot */
.lt-avatar--agent::before {
  position: absolute;
  inset-block-end: -1px;
  inset-inline-end: -1px;
  z-index: 2;
  width: 12px;
  height: 12px;
  content: "";
  background: var(--p-accent);
  border: 2px solid var(--p-surface);
  border-radius: 50%;
}

.author,
.lt-entry-info__author {
  display: block;
  font-size: 0.9375rem;
  font-weight: var(--fw-semi);
  color: var(--p-ink);
}

.author a,
.lt-entry-info__author a {
  color: inherit;
}

.author a:hover,
.lt-entry-info__author a:hover {
  color: var(--p-accent-strong);
  text-decoration: none;
}

/* -- Column layout: fixed rails, fluid centre ----------------------------- */
.article-container__column {
  width: 100%;
  min-width: 0;
  padding-inline: var(--gutter);
}

.article-container__sidenav,
.article-container__toc {
  display: none;
}

.sidenav-enabled .article-container__sidenav,
.toc-enabled .article-container__toc {
  display: block;
}

@media (min-width: 992px) {
  .article-container__article {
    flex: 1 1 0%;
    min-width: 0;
  }

  .article-container__sidebar {
    flex: 0 0 292px;
    max-width: 292px;
  }

  .sidenav-enabled .article-container__sidenav,
  .toc-enabled .article-container__toc {
    flex: 0 0 250px;
    max-width: 250px;
  }

  /* With a TOC in play, related articles move to a full-width band below */
  .toc-enabled .article-container__sidebar {
    flex: 1 1 100%;
    max-width: 100%;
    margin-block-start: var(--s-7);
    padding-block-start: var(--s-6);
    border-top: 1px solid var(--p-hairline);
  }

  .article-container__toc > div,
  .article-container__sidenav > div {
    position: sticky;
    top: var(--header-gap);
    max-height: calc(100vh - var(--header-gap) - var(--s-6));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

@media (max-width: 991px) {
  .sidenav-enabled .article-container__sidenav {
    padding-block-end: var(--s-6);
  }
}

/* -- Table of contents harmonised with brand ------------------------------ */
.lt-toc--list,
.lt-toc--item {
  padding-inline-start: 0;
  margin-inline-start: 0;
  list-style: none;
}

.lt-toc--title {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--p-muted);
}

.lt-toc--link {
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--p-muted);
  transition: color var(--dur-1) var(--ease);
}

.lt-toc--link:hover {
  color: var(--p-accent-strong);
  text-decoration: none;
}

.lt-toc--link.is-active,
.lt-toc_is-desktop .lt-toc--link.is-active {
  font-weight: var(--fw-semi);
  color: var(--p-accent-strong);
}

/* -- Related articles (sidebar) ------------------------------------------- */
.related-articles .section-articles__title {
  margin-block-end: var(--s-4);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--p-muted);
}

.section-articles__list {
  padding-inline-start: 0;
  margin: 0 0 var(--s-5);
  list-style: none;
}

.section-articles__item {
  border-bottom: 1px solid color-mix(in srgb, var(--p-hairline) 60%, transparent);
}

.section-articles__item:last-child {
  border-bottom: 0;
}

.section-articles__link {
  display: block;
  padding-block: var(--s-3);
  padding-inline-start: var(--s-3);
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--p-text);
  border-inline-start: 2px solid transparent;
  transition: color var(--dur-1) var(--ease),
    border-color var(--dur-1) var(--ease);
}

.section-articles__link:hover {
  color: var(--p-accent-strong);
  text-decoration: none;
  border-inline-start-color: var(--p-accent-line);
}

.section-articles__link.is-active {
  font-weight: var(--fw-semi);
  color: var(--p-accent-strong);
  border-inline-start-color: var(--p-accent);
}

/* -- Attachments ---------------------------------------------------------- */
.article__attachments {
  margin-block-start: var(--s-7);
}

.attachment-list {
  padding-inline-start: 0;
  margin: 0;
  list-style: none;
}

.attachment-list__item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  margin-block-end: var(--s-2);
  font-size: var(--fs-sm);
  background: var(--p-tint);
  border: 1px solid var(--p-hairline);
  border-radius: var(--r-sm);
  transition: border-color var(--dur-2) var(--ease);
}

.attachment-list__item:hover {
  border-color: var(--p-accent-line);
}

.attachment-list__item:last-child {
  margin-block-end: 0;
}

.attachment-list__icon {
  flex-shrink: 0;
  color: var(--p-faint);
}

.attachment-list__item .meta {
  margin-inline-start: auto;
  font-size: var(--fs-xs);
  color: var(--p-faint);
}

/* -- Tags, inline in the article card footer ------------------------------ */
.article__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  padding-block-start: var(--s-5);
  margin-block-start: var(--s-6);
  border-top: 1px solid var(--p-hairline);
}

.article__tags h4 {
  margin: 0;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--p-muted);
}

/* -- Article vote --------------------------------------------------------- */
.article__vote {
  text-align: center;
}

.article__vote-question {
  margin-block-end: var(--s-5);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semi);
  color: var(--p-ink);
}

.article__vote-controls {
  gap: var(--s-3);
}

.article__vote-item {
  gap: var(--s-3);
  min-width: 140px;
  padding: 0.8125rem 1.5rem;
  color: var(--p-text);
}

.article__vote-item::before {
  display: inline-block;
  flex-shrink: 0;
  content: "";
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
}

/* {{vote}} renders no inner text — the label lives in the title attribute */
.article__vote-item::after {
  content: attr(title);
}

.article__vote-item_up::before {
  width: 16px;
  height: 12px;
  background-image: url(/hc/theming_assets/01KZD4N57W2000KBW7X5DZGHX9);
}

.article__vote-item_down::before {
  width: 13px;
  height: 13px;
  background-image: url(/hc/theming_assets/01KZD4N5A9QNFK3772BH223WQH);
}

.article__vote-item:hover {
  color: var(--p-ink);
  background: var(--p-accent-soft);
  border-color: var(--p-accent-line);
}

.article__vote-item_voted {
  color: var(--p-accent-strong);
  background: var(--p-accent-soft);
  border-color: var(--p-accent);
  box-shadow: none;
}

.article__vote-count {
  padding-block-start: var(--s-5);
}

.article__vote-count .meta {
  justify-content: center;
  font-size: var(--fs-sm);
  color: var(--p-faint);
}

/* -- Footer CTA box ------------------------------------------------------- */
.cta-box {
  padding: clamp(22px, 3vw, 34px);
  margin-block-end: var(--s-7);
  background: var(--p-surface);
  border: 1px solid var(--p-hairline);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
}

.cta-box__img {
  width: 76px;
  height: auto;
}

.cta-box__title {
  margin-block-end: var(--s-4);
  font-size: var(--fs-h4);
  letter-spacing: var(--tracking-tight);
}

/* -- Share ---------------------------------------------------------------- */
.share {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  padding: 0;
  margin: 0;
}

.share li {
  display: block;
  list-style: none;
}

.share li a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  overflow: hidden;
  color: #fff;
  border-radius: 50%;
  transition: transform var(--dur-2) var(--ease-out),
    filter var(--dur-2) var(--ease);
}

.share li a::before {
  display: block;
  font: normal normal normal 17px/1 "Font Awesome 5 Brands";
  color: #fff;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

.share li a:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
}

.share-facebook {
  background: #3b5998;
}

.share-facebook::before {
  content: "\f39e";
}

.share-twitter {
  background: #1da1f2;
}

.share-twitter::before {
  content: "\f099";
}

.share-linkedin {
  background: #0a66c2;
}

.share-linkedin::before {
  content: "\f0e1";
}

.share-googleplus {
  background: #db4437;
}

.share-googleplus::before {
  content: "\f0d5";
}


/* ==========================================================================
   11  LONG-FORM CONTENT (article & comment bodies)
   ========================================================================== */

.article__body,
.comment__body,
#hc-wysiwyg,
.lt-profile-contribution__body {
  font-size: var(--p17-body-size);
  line-height: var(--lh-prose);
  color: var(--p-text);
}

.article__body {
  max-width: var(--measure);
}

.article__body > *:first-child {
  margin-block-start: 0;
}

.article__body > *:last-child {
  margin-block-end: 0;
}

.article__body p,
.comment__body p {
  margin-block: 0 1.15em;
}

.article__body h1,
.article__body h2,
.article__body h3,
.article__body h4,
.article__body h5,
.article__body h6 {
  margin-block: 1.9em 0.6em;
  scroll-margin-top: var(--header-gap);
}

/* Author-written headings stay in Poppins sentence case. The display face and
   uppercase are reserved for theme chrome - see the note in section 01. */
.article__body :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--p-font);
  font-weight: var(--fw-semi);
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.3;
  color: var(--p-ink);
}

.article__body h2 {
  padding-block-end: 0.35em;
  font-size: var(--fs-h3);
  border-bottom: 1px solid var(--p-hairline);
}

.article__body h3 {
  font-size: var(--fs-h4);
}

.article__body h4 {
  font-size: var(--fs-h5);
}

.article__body h5,
.article__body h6 {
  font-size: var(--fs-h6);
  text-transform: none;
  letter-spacing: var(--tracking-tight);
  color: var(--p-ink);
}

.article__body a,
.comment__body a {
  color: var(--p-accent-strong);
  text-decoration: underline;
  text-decoration-color: var(--p-accent-line);
}

.article__body a:hover,
.comment__body a:hover {
  color: var(--p-ink);
  text-decoration-color: currentColor;
}

.article__body ul,
.article__body ol,
.comment__body ul,
.comment__body ol {
  padding-inline-start: 1.4em;
  margin-block: 0 1.15em;
}

.article__body li,
.comment__body li {
  margin-block-end: 0.4em;
}

.article__body li::marker {
  color: var(--p-deco);
}

.article__body ul ul,
.article__body ol ol,
.article__body ul ol,
.article__body ol ul {
  margin-block: 0.4em 0.4em;
}

.article__body img,
.comment__body img {
  height: auto;
  margin-block: 1.5em;
  border-radius: var(--r-md);
}

.article__body hr {
  margin-block: 2.2em;
}

/* -- Blockquote ----------------------------------------------------------- */
/* Pull quote, per Foundations > Typography: Merriweather 700 italic, 22px.
   Scoped to quotes only - the serif never appears anywhere else. */
blockquote {
  padding-inline: var(--s-6) 0;
  padding-block: var(--s-2);
  margin-block: 1.6em;
  font-family: var(--p-font-quote);
  font-size: var(--fs-quote);
  font-style: italic;
  font-weight: var(--fw-bold);
  line-height: 1.4;
  color: var(--p-ink);
  border-inline-start: 3px solid var(--p-accent);
}

blockquote > *:last-child {
  margin-block-end: 0;
}

blockquote.is-colored {
  padding: var(--s-5) var(--s-6);
  color: var(--p-text);
  background: var(--p-accent-soft);
  border-inline-start-color: var(--p-accent);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}

[dir="rtl"] blockquote.is-colored {
  border-radius: var(--r-md) 0 0 var(--r-md);
}

/* -- Code ----------------------------------------------------------------- */
code {
  padding: 0.15em 0.4em;
  font-family: var(--p-font-mono);
  font-size: 0.875em;
  color: color-mix(in srgb, var(--p-ink) 88%, var(--p-accent));
  background: var(--p-ink-soft);
  border-radius: var(--r-sm);
  overflow-wrap: break-word;
}

pre {
  padding: var(--s-5);
  margin-block: 1.5em;
  overflow-x: auto;
  font-family: var(--p-font-mono);
  font-size: 0.875rem;
  line-height: 1.65;
  tab-size: 2;
  background: var(--p-tint);
  border: 1px solid var(--p-hairline);
  border-radius: var(--r-md);
}

pre code {
  padding: 0;
  font-size: inherit;
  color: inherit;
  background: none;
  border-radius: 0;
}

/* -- Tables --------------------------------------------------------------- */
table {
  width: 100%;
  margin-block: 1.6em;
  font-size: 0.9375rem;
  border-collapse: collapse;
  border-spacing: 0;
}

.article__body table {
  display: block;
  overflow-x: auto;
  white-space: normal;
}

th,
td {
  padding: 0.75rem 0.875rem;
  text-align: start;
  vertical-align: top;
  border-bottom: 1px solid var(--p-hairline);
}

th {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--p-muted);
  background: var(--p-tint);
  white-space: nowrap;
}

thead th {
  border-bottom: 1px solid var(--p-border);
}

tbody tr:last-child td {
  border-bottom: 0;
}

tbody tr {
  transition: background-color var(--dur-1) var(--ease);
}

.article__body tbody tr:hover {
  background: var(--p-tint);
}

caption {
  padding-block-end: var(--s-3);
  font-size: var(--fs-sm);
  color: var(--p-muted);
  text-align: start;
}

.table--bordered,
.table--bordered th,
.table--bordered td {
  border: 1px solid var(--p-hairline);
}

/* -- Definition lists ----------------------------------------------------- */
dl {
  margin-block: 1.4em;
}

dt {
  font-weight: var(--fw-semi);
  color: var(--p-ink);
}

dd {
  margin-block-end: var(--s-4);
  margin-inline-start: 0;
}

.dl-horizontal dt {
  float: inline-start;
  width: 160px;
  overflow: hidden;
  clear: both;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dl-horizontal dd {
  margin-inline-start: 176px;
}

.dl-horizontal::after {
  display: table;
  clear: both;
  content: "";
}

@media (max-width: 575px) {
  .dl-horizontal dt {
    float: none;
    width: auto;
  }

  .dl-horizontal dd {
    margin-inline-start: 0;
  }
}

/* -- Decorated lists ------------------------------------------------------ */
.list-bullet,
.list-colored {
  padding-inline-start: 0;
  list-style: none;
}

.list-bullet > li,
.list-colored > li {
  position: relative;
  padding-inline-start: 1.6em;
  margin-block-end: 0.5em;
}

.list-bullet > li::before,
.list-colored > li::before {
  position: absolute;
  inset-inline-start: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  content: "";
  background: var(--p-accent);
  border-radius: 50%;
}

.list-colored > li::before {
  background: var(--p-accent-strong);
}

.list-bullet > ul,
.list-bullet > ol {
  margin-block-start: 0.5em;
}

/* -- Callouts ------------------------------------------------------------- */
.callout,
.note {
  position: relative;
  padding: var(--s-5) var(--s-6);
  margin-block: 1.6em;
  font-size: 1rem;
  line-height: 1.65;
  border: 1px solid var(--p-hairline);
  border-inline-start: 3px solid var(--p-faint);
  border-radius: var(--r-md);
  background: var(--p-tint);
}

.callout > *:last-child,
.callout p:last-child,
.note > *:last-child,
.note p:last-child {
  margin-block-end: 0;
}

.callout__title,
.note-title {
  display: block;
  margin-block-end: var(--s-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--p-ink);
}

.callout--primary,
.note--default {
  background: var(--p-ink-soft);
  border-inline-start-color: var(--p-ink);
}

.callout--info,
.note--info {
  background: color-mix(in srgb, var(--p-info) 9%, var(--mix-bg));
  border-color: color-mix(in srgb, var(--p-info) 26%, var(--mix-bg));
  border-inline-start-color: var(--p-info);
}

.callout--info .callout__title,
.note--info .note-title {
  color: var(--tone-info);
}

.callout--success,
.note--success {
  background: var(--p-accent-soft);
  border-color: var(--p-accent-line);
  border-inline-start-color: var(--p-accent);
}

.callout--success .callout__title,
.note--success .note-title {
  color: var(--p-accent-strong);
}

.callout--warning,
.note--warning {
  background: color-mix(in srgb, var(--p-warning) 20%, var(--mix-bg));
  border-color: color-mix(in srgb, var(--p-warning) 42%, var(--mix-bg));
  border-inline-start-color: var(--p-warning);
}

.callout--warning .callout__title,
.note--warning .note-title {
  color: var(--tone-warning);
}

.callout--danger,
.note--danger {
  background: color-mix(in srgb, var(--p-danger) 8%, var(--mix-bg));
  border-color: color-mix(in srgb, var(--p-danger) 26%, var(--mix-bg));
  border-inline-start-color: var(--p-danger);
}

.callout--danger .callout__title,
.note--danger .note-title {
  color: var(--tone-danger);
}

.callout--dashed {
  background: transparent;
  border: 1px dashed var(--p-border);
}

.callout--transparent {
  background: transparent;
  border-color: var(--p-hairline);
  border-inline-start-width: 1px;
}

/* -- Accordion ------------------------------------------------------------ */
.accordion {
  margin-block: 1.6em;
  overflow: hidden;
  background: var(--p-surface);
  border: 1px solid var(--p-hairline);
  border-radius: var(--r-md);
}

.accordion__item-title {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  padding-inline-end: var(--s-9);
  font-size: 1rem;
  font-weight: var(--fw-semi);
  color: var(--p-ink);
  cursor: pointer;
  user-select: none;
  transition: background-color var(--dur-2) var(--ease);
}

.accordion__item-title:hover {
  background: var(--p-tint);
}

.accordion__item-title::before {
  position: absolute;
  inset-inline-end: var(--s-5);
  font: normal normal 900 0.8125rem/1 "Font Awesome 5 Free";
  color: var(--p-faint);
  content: "\f078";
  transition: transform var(--dur-3) var(--ease-out);
}

.accordion__item-title--active::before {
  color: var(--p-accent-strong);
  transform: rotate(180deg);
}

.accordion > .accordion__item + .accordion__item > .accordion__item-title {
  border-top: 1px solid var(--p-hairline);
}

.accordion__item-content {
  display: none;
  padding: 0 var(--s-5) var(--s-5);
  font-size: 1rem;
  line-height: 1.68;
  color: var(--p-text);
}

.accordion__item-content > *:last-child {
  margin-block-end: 0;
}

/* -- Tabs ----------------------------------------------------------------- */
.tabs {
  margin-block: 1.6em;
}

.tabs-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  padding-inline-start: 0;
  margin: 0 0 var(--s-5);
  list-style: none;
  border-bottom: 1px solid var(--p-hairline);
}

.tabs-link {
  display: inline-block;
  padding: var(--s-3) var(--s-4);
  margin-block-end: -1px;
  font-size: 0.9375rem;
  font-weight: var(--fw-medium);
  color: var(--p-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color var(--dur-2) var(--ease),
    border-color var(--dur-2) var(--ease);
}

.tabs-link:hover {
  color: var(--p-ink);
  text-decoration: none;
}

.tabs-link.is-active {
  color: var(--p-accent-strong);
  border-bottom-color: var(--p-accent);
}

/* -- Images & embeds ------------------------------------------------------ */
.image-with-border {
  border: 1px solid var(--p-hairline);
  border-radius: var(--r-md);
}

.image-with-shadow {
  border-radius: var(--r-md);
  box-shadow: var(--sh-2);
}

.image-with-lightbox {
  cursor: zoom-in;
  transition: opacity var(--dur-2) var(--ease);
}

.image-with-lightbox:hover {
  opacity: 0.9;
}

.image-overlay {
  position: relative;
  display: inline-block;
}

.image-overlay::before {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(
    180deg,
    transparent 40%,
    rgba(6, 22, 32, 0.55) 100%
  );
  border-radius: var(--r-md);
}

.image-with-video-icon {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.image-with-video-icon::before {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  background: rgba(6, 22, 32, 0.32);
  border-radius: var(--r-md);
  transition: background-color var(--dur-2) var(--ease);
}

.image-with-video-icon::after {
  position: absolute;
  inset-inline-start: 50%;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  font: normal normal 900 20px/64px "Font Awesome 5 Free";
  color: var(--p-ink);
  text-align: center;
  content: "\f04b";
  background: #fff;
  border-radius: 50%;
  box-shadow: var(--sh-3);
  transform: translate(-50%, -50%);
  transition: transform var(--dur-3) var(--ease-out);
}

.image-with-video-icon:hover::before {
  background: rgba(6, 22, 32, 0.18);
}

.image-with-video-icon:hover::after {
  transform: translate(-50%, -50%);
}

.embed-responsive {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  margin-block: 1.6em;
  overflow: hidden;
  border-radius: var(--r-md);
}

.embed-responsive--16by9 {
  aspect-ratio: 16 / 9;
}

.embed-responsive--4by3 {
  aspect-ratio: 4 / 3;
}

.embed-responsive iframe,
.embed-responsive video,
.embed-responsive img,
.embed-responsive embed,
.embed-responsive object {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
}


/* ==========================================================================
   12  COMMENTS & VOTING
   ========================================================================== */

.comments__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block-end: var(--s-5);
  margin-block-end: var(--s-5);
  border-bottom: 1px solid var(--p-hairline);
}

.comments__title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-3);
}

.comments__title .h3 {
  font-size: var(--fs-h4);
}

.comments__list {
  padding-inline-start: 0;
  margin: 0;
  list-style: none;
}

.comment {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--s-4);
  padding-block: var(--s-6);
  border-bottom: 1px solid var(--p-hairline);
}

.comment:first-child {
  padding-block-start: 0;
}

.comment:last-child {
  border-bottom: 0;
}

.comment__content {
  flex: 1 1 320px;
  min-width: 0;
}

.comment__body {
  margin-block-start: var(--s-4);
  font-size: 1rem;
  line-height: 1.68;
}

.comment__body > *:last-child {
  margin-block-end: 0;
}

.comment--official {
  padding: var(--s-6);
  background: var(--p-accent-soft);
  border: 1px solid var(--p-accent-line);
  border-radius: var(--r-md);
}

.comment__official-heading {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-block-end: var(--s-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--p-accent-strong);
}

.question-official-answer {
  padding: var(--s-6);
  margin-block-end: var(--s-6);
  background: var(--p-accent-soft);
  border: 1px solid var(--p-accent-line);
  border-radius: var(--r-md);
}

.comment__voting-and-actions {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-inline-start: auto;
}

/* -- Comment vote pill ---------------------------------------------------- */
.vote {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 0.1875rem;
  background: var(--p-tint);
  border: 1px solid var(--p-hairline);
  border-radius: var(--r-pill);
}

.vote__control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  min-width: 0;
  padding: 0;
  font-size: 0.75rem;
  color: var(--p-muted);
  background: transparent;
  border: 0;
  border-radius: 50%;
  box-shadow: none;
}

.vote__control:hover {
  color: var(--p-accent-strong);
  background: var(--p-surface);
  border: 0;
  box-shadow: var(--sh-1);
  transform: none;
}

.vote__control--voted {
  color: var(--p-accent-strong);
  background: var(--p-surface);
  box-shadow: var(--sh-1);
}

.vote-sum {
  min-width: 1.5em;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--p-ink);
  text-align: center;
}

/* -- Comment actions cog -------------------------------------------------- */
.comment__actions .dropdown-toggle,
.comment__actions button,
.post__actions button,
.post__actions .dropdown-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  font-size: 0.8125rem;
  color: var(--p-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 50%;
  box-shadow: none;
}

.comment__actions button:hover,
.post__actions button:hover {
  color: var(--p-ink);
  background: var(--p-tint);
  border-color: var(--p-hairline);
  box-shadow: none;
  transform: none;
}

.comment__actions button::after,
.post__actions .dropdown-toggle::after,
.comment__sorter .btn::after {
  display: none;
}

.comment-actions-container {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

/* -- Comment form --------------------------------------------------------- */
.comments__callout {
  padding-block-start: var(--s-5);
  font-size: var(--fs-sm);
  color: var(--p-muted);
}

.comment-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  padding-block-start: var(--s-5);
}

.comment-form__avatar {
  flex-shrink: 0;
}

.comment-form__body {
  flex: 1 1 320px;
  min-width: 0;
}

.comment-form__controls {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex: 1 1 100%;
}

.comment-form__controls label {
  margin: 0;
  font-weight: var(--fw-normal);
}

.comment-form__attachments {
  flex: 1 1 100%;
}

.comment-form input[type="submit"] {
  margin-inline-start: auto;
}

.comment-labels {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-block-end: var(--s-2);
}

.comment-link {
  font-size: var(--fs-xs);
  color: var(--p-faint);
}


/* ==========================================================================
   13  REQUESTS, LISTS & TABLES
   ========================================================================== */

/* -- Segmented nav (Requests / Contributions / Subscriptions) ------------- */
.my-activities-menu--main .my-activities-menu__items {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  padding: var(--s-1);
  margin: 0 0 var(--s-6);
  list-style: none;
  background: var(--p-ink-soft);
  border-radius: var(--r-pill);
}

.my-activities-menu--main .my-activities-menu__item {
  padding: 0;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}

.my-activities-menu--main .my-activities-menu__item,
.my-activities-menu--main .my-activities-menu__item a {
  display: block;
  padding: 0.5rem 1rem;
  color: var(--p-muted);
  border-radius: var(--r-pill);
  transition: color var(--dur-2) var(--ease),
    background-color var(--dur-2) var(--ease);
}

.my-activities-menu--main .my-activities-menu__item a:hover {
  color: var(--p-ink);
  text-decoration: none;
  background: rgba(255, 255, 255, 0.65);
}

.my-activities-menu--main .my-activities-menu__item.is-active {
  font-weight: var(--fw-semi);
  color: var(--p-ink);
  background: var(--p-surface);
  box-shadow: var(--sh-1);
}

/* -- Sub filter row ------------------------------------------------------- */
.my-activities-menu--sub .my-activities-menu__items {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  padding-inline-start: 0;
  margin: 0 0 var(--s-5);
  list-style: none;
  border-bottom: 1px solid var(--p-hairline);
}

.my-activities-menu--sub .my-activities-menu__item {
  font-size: 0.9375rem;
}

.my-activities-menu--sub .my-activities-menu__item,
.my-activities-menu--sub .my-activities-menu__item a {
  display: block;
  padding: var(--s-3) var(--s-4);
  margin-block-end: -1px;
  color: var(--p-muted);
  border-bottom: 2px solid transparent;
  transition: color var(--dur-2) var(--ease),
    border-color var(--dur-2) var(--ease);
}

.my-activities-menu--sub .my-activities-menu__item a:hover {
  color: var(--p-ink);
  text-decoration: none;
}

.my-activities-menu--sub .my-activities-menu__item.is-active {
  font-weight: var(--fw-semi);
  color: var(--p-accent-strong);
  border-bottom-color: var(--p-accent);
}

/* -- Filters toolbar ------------------------------------------------------ */
.request-table-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  margin-block-end: var(--s-6);
}

.request-table-filters__item {
  flex: 1 1 200px;
  min-width: 0;
}

.request-table-filters__item label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--p-muted);
}

.request-table-organization {
  display: flex;
  gap: var(--s-2);
}

.request-table-organization__col--main {
  flex: 1 1 auto;
  min-width: 0;
}

.request-table-organization__col--button {
  flex-shrink: 0;
}

/* -- Requests table ------------------------------------------------------- */
.my-activities-items {
  width: 100%;
  margin: 0;
  font-size: 0.9375rem;
  border-collapse: collapse;
}

.my-activities-items__head .my-activities-items__col {
  padding: 0 var(--s-3) var(--s-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--p-muted);
  white-space: nowrap;
  background: none;
  border-bottom: 1px solid var(--p-border);
}

.my-activities-items__head .my-activities-items__col a {
  color: inherit;
}

.my-activities-items__body .my-activities-items__row {
  transition: background-color var(--dur-1) var(--ease);
}

.my-activities-items__body .my-activities-items__row:hover {
  background: var(--p-tint);
}

.my-activities-items__body .my-activities-items__col {
  padding: var(--s-4) var(--s-3);
  vertical-align: middle;
  border-bottom: 1px solid var(--p-hairline);
}

.my-activities-items__body .my-activities-items__row:last-child .my-activities-items__col {
  border-bottom: 0;
}

.my-activities-items__request-id {
  font-family: var(--p-font-mono);
  font-size: var(--fs-sm);
  color: var(--p-faint);
  white-space: nowrap;
}

.my-activities-item__title {
  font-weight: var(--fw-medium);
  color: var(--p-ink);
}

.my-activities-item__title:hover {
  color: var(--p-accent-strong);
  text-decoration: none;
}

.my-activities-item__meta {
  margin-block-start: var(--s-1);
  font-size: var(--fs-xs);
  color: var(--p-faint);
}

.my-activities-item__icon {
  color: var(--p-faint);
}

.no-activity,
.lt-profile__no-activity,
.lt-profile__private-activity {
  padding: var(--s-9) var(--s-5);
  font-size: 0.9375rem;
  color: var(--p-muted);
  text-align: center;
}

@media (max-width: 767px) {
  .my-activities-items,
  .my-activities-items__body,
  .my-activities-items__row,
  .my-activities-items__col {
    display: block;
    width: 100%;
  }

  .my-activities-items__head {
    display: none;
  }

  .my-activities-items__body .my-activities-items__row {
    padding: var(--s-4) 0;
    border-bottom: 1px solid var(--p-hairline);
  }

  .my-activities-items__body .my-activities-items__col {
    padding: var(--s-1) 0;
    border-bottom: 0;
  }
}

/* -- Single request page --------------------------------------------------- */
.request-details {
  padding: var(--s-5) var(--s-6);
  margin-block-end: var(--s-6);
  background: var(--p-tint);
  border: 1px solid var(--p-hairline);
  border-radius: var(--r-md);
}

.request-sidebar dd {
  margin-block-end: var(--s-4);
  font-size: 0.9375rem;
  color: var(--p-text);
}

.request-id {
  font-family: var(--p-font-mono);
  font-size: var(--fs-sm);
  color: var(--p-faint);
}

.request__comment {
  margin-block-start: var(--s-6);
}

.request-follow-up:empty {
  display: none;
}

/* -- Pagination ----------------------------------------------------------- */
.pagination,
.pagination-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding-inline-start: 0;
  margin-block: var(--s-7) 0;
  list-style: none;
}

.pagination-list li {
  display: block;
}

.pagination-list a,
.pagination-list span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding-inline: var(--s-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--p-muted);
  border-radius: var(--r-btn);
  transition: background-color var(--dur-2) var(--ease),
    color var(--dur-2) var(--ease);
}

.pagination-list a:hover {
  color: var(--p-ink);
  text-decoration: none;
  background: var(--p-ink-soft);
}

.pagination-list .is-active a,
.pagination-list [aria-current="page"] {
  color: var(--p-ink);
  background: var(--p-surface);
  border: 1px solid var(--p-hairline);
  box-shadow: var(--sh-1);
}

.pagination-first-text,
.pagination-prev-text,
.pagination-next-text,
.pagination-last-text {
  font-size: var(--fs-sm);
}


/* ==========================================================================
   14  SEARCH RESULTS
   ========================================================================== */

.search-results {
  padding-block-end: clamp(40px, 5vw, 72px);
}

.search-results-count {
  margin-block: var(--s-3) var(--s-6);
  font-size: var(--fs-sm);
  color: var(--p-muted);
}

.search-results-box {
  padding: clamp(20px, 3vw, 30px);
  background: var(--p-surface);
  border: 1px solid var(--p-hairline);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
}

.search-results-list {
  padding-inline-start: 0;
  margin: 0;
  list-style: none;
}

.search-result {
  padding-block: var(--s-5);
  border-bottom: 1px solid var(--p-hairline);
}

.search-result:first-child {
  padding-block-start: 0;
}

.search-result:last-child {
  border-bottom: 0;
}

.search-result__title,
.search-result-link {
  display: block;
  font-size: var(--fs-h5);
  font-weight: var(--fw-semi);
  line-height: 1.4;
  color: var(--p-ink);
  letter-spacing: var(--tracking-tight);
}

.search-result__title:hover,
.search-result-link:hover {
  color: var(--p-accent-strong);
  text-decoration: none;
}

.search-result__description {
  margin-block: var(--s-2) var(--s-3);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--p-muted);
}

.search-result__description em,
.search-result__title em {
  font-style: normal;
  font-weight: var(--fw-semi);
  color: var(--p-ink);
  background: color-mix(in srgb, var(--p-warning) 40%, transparent);
  border-radius: 3px;
  padding-inline: 2px;
}

.search-result__meta,
.search-result__subfilters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-xs);
  color: var(--p-faint);
}

.search-result-votes {
  font-size: var(--fs-xs);
  color: var(--p-faint);
}

.search-result__show-more {
  display: inline-block;
  margin-block-start: var(--s-2);
  font-size: var(--fs-sm);
}

/* -- Filter rail ---------------------------------------------------------- */
.search-results-filters {
  margin-block-end: var(--s-6);
}

.search-results-filter__title,
.search-results-filter__title-btn {
  display: block;
  width: 100%;
  padding: 0;
  margin-block-end: var(--s-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  text-align: start;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--p-muted);
  background: none;
  border: 0;
}

.search-results-filter__list {
  padding-inline-start: 0;
  margin: 0 0 var(--s-6);
  list-style: none;
}

.search-results-filter__item {
  margin-block-end: var(--s-1);
}

.search-results-filter__item--subfilter {
  padding-inline-start: var(--s-4);
}

.search-results-filter__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  font-size: 0.9375rem;
  color: var(--p-text);
  border-radius: var(--r-sm);
  transition: background-color var(--dur-2) var(--ease),
    color var(--dur-2) var(--ease);
}

.search-results-filter__link:hover {
  color: var(--p-ink);
  text-decoration: none;
  background: var(--p-tint);
}

.search-results-filter__item.is-active .search-results-filter__link,
.search-results-filter__link[aria-current="true"] {
  font-weight: var(--fw-semi);
  color: var(--p-accent-strong);
  background: var(--p-accent-soft);
}

.search-results-filter__count {
  flex-shrink: 0;
  font-size: var(--fs-xs);
  color: var(--p-faint);
}


/* ==========================================================================
   15  COMMUNITY & USER PROFILE
   ========================================================================== */

.community-nav__items {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  padding-inline-start: 0;
  margin: 0 0 var(--s-6);
  list-style: none;
}

.community-nav__item,
.community-nav__item a {
  display: block;
  padding: var(--s-2) var(--s-4);
  font-size: 0.9375rem;
  font-weight: var(--fw-medium);
  color: var(--p-muted);
  border-radius: var(--r-pill);
  transition: color var(--dur-2) var(--ease),
    background-color var(--dur-2) var(--ease);
}

.community-nav__item a:hover {
  color: var(--p-ink);
  text-decoration: none;
  background: var(--p-ink-soft);
}

.community-nav__item.is-active {
  font-weight: var(--fw-semi);
  color: var(--p-ink);
  background: var(--p-ink-soft);
}

.community-nav__item--button {
  margin-inline-start: auto;
  padding: 0;
}

/* -- Topic & post lists --------------------------------------------------- */
.topic-list,
.post-list {
  padding-inline-start: 0;
  margin: 0;
  list-style: none;
}

.topic-list {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.topic-list-item__box {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(20px, 2.4vw, 26px);
  background: var(--p-surface);
  border: 1px solid var(--p-hairline);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  transition: transform var(--dur-3) var(--ease-out),
    box-shadow var(--dur-3) var(--ease-out),
    border-color var(--dur-2) var(--ease);
}

.topic-list-item__box:hover {
  border-color: var(--p-accent-line);
  box-shadow: var(--sh-3);
  transform: translateY(-1px);
}

.topic-list-item__title {
  margin-block-end: var(--s-2);
  font-size: var(--fs-h5);
  font-weight: var(--fw-semi);
  color: var(--p-ink);
}

.topic-list-item__meta,
.topic-followers {
  font-size: var(--fs-xs);
  color: var(--p-faint);
}

.post-list-item {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--s-4);
  padding-block: var(--s-5);
  border-bottom: 1px solid var(--p-hairline);
}

.post-list-item:last-child {
  border-bottom: 0;
}

.post-list-item__col--main {
  flex: 1 1 320px;
  min-width: 0;
}

.post-list-item__col--side {
  flex-shrink: 0;
  margin-inline-start: auto;
}

.post-list-item__title {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  font-size: var(--fs-h5);
  font-weight: var(--fw-semi);
  color: var(--p-ink);
}

.post-list-item__title .fa-star {
  font-size: 0.7em;
  color: var(--p-warning);
}

.post-list-item__meta {
  margin-block-start: var(--s-2);
  font-size: var(--fs-xs);
  color: var(--p-faint);
}

.post-list-item--pinned,
.post-list-item--featured {
  padding-inline: var(--s-4);
  background: var(--p-tint);
  border-radius: var(--r-md);
}

.post-info {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-1);
  font-size: var(--fs-xs);
  color: var(--p-faint);
}

.post-info + .post-info {
  margin-inline-start: var(--s-4);
}

.post-info__count {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--p-ink);
}

.topic-controls,
.topic-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  margin-block-end: var(--s-5);
}

.topic-controls__item--subscribe {
  margin-inline-start: auto;
}

.post-callout__title {
  font-size: var(--fs-h5);
  color: var(--p-ink);
}

/* -- Profile -------------------------------------------------------------- */
.lt-profile-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-5);
  padding: clamp(22px, 3vw, 32px);
  margin-block-end: var(--s-7);
  background: var(--p-surface);
  border: 1px solid var(--p-hairline);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
}

.lt-profile-header__avatar {
  flex-shrink: 0;
}

.lt-profile-header__name {
  font-size: var(--fs-h3);
  color: var(--p-ink);
}

.lt-profile-header__description {
  max-width: var(--measure);
  margin-block-start: var(--s-2);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--p-muted);
}

.lt-profile-header__private-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 0.1875rem 0.625rem;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  color: var(--p-muted);
  background: var(--p-tint);
  border-radius: var(--r-pill);
}

.lt-profile-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-7);
  margin-inline-start: auto;
}

.lt-profile-stats__stat {
  text-align: center;
}

.lt-profile-stats__value {
  display: block;
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  color: var(--p-ink);
}

.lt-profile-stats__label {
  display: block;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--p-faint);
}

.lt-profile-nav__items {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  padding-inline-start: 0;
  margin: 0 0 var(--s-6);
  list-style: none;
  border-bottom: 1px solid var(--p-hairline);
}

.lt-profile-nav__item,
.lt-profile-nav__item a {
  display: block;
  padding: var(--s-3) var(--s-4);
  margin-block-end: -1px;
  font-size: 0.9375rem;
  font-weight: var(--fw-medium);
  color: var(--p-muted);
  border-bottom: 2px solid transparent;
}

.lt-profile-nav__item a:hover {
  color: var(--p-ink);
  text-decoration: none;
}

.lt-profile-nav__item.is-active {
  font-weight: var(--fw-semi);
  color: var(--p-accent-strong);
  border-bottom-color: var(--p-accent);
}

.lt-profile-section {
  margin-block-end: var(--s-8);
}

.lt-profile-section__header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  margin-block-end: var(--s-4);
}

.lt-profile-section__title {
  font-size: var(--fs-h4);
}

.lt-profile-section__description {
  font-size: var(--fs-sm);
  color: var(--p-muted);
}

.lt-profile-activity-list,
.lt-profile-badge {
  padding-inline-start: 0;
  margin: 0;
  list-style: none;
}

.lt-profile-contribution {
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--p-hairline);
}

.lt-profile-contribution:last-child {
  border-bottom: 0;
}

.lt-profile-contribution__title {
  font-size: 1rem;
  font-weight: var(--fw-semi);
  color: var(--p-ink);
}

.lt-profile-contribution__breadcrumbs,
.lt-profile-contribution__status {
  margin-block-start: var(--s-1);
  font-size: var(--fs-xs);
  color: var(--p-faint);
}

.lt-profile-contribution__body {
  margin-block-start: var(--s-2);
  font-size: 0.9375rem;
  color: var(--p-muted);
}

.lt-profile-badge {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

.lt-profile-badge-item {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  font-size: var(--fs-sm);
  background: var(--p-tint);
  border: 1px solid var(--p-hairline);
  border-radius: var(--r-md);
}

.lt-profile-badge_image {
  width: 24px;
  height: 24px;
}

.lt-profile__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}


/* ==========================================================================
   16  NOTIFICATIONS & DROPDOWNS
   ========================================================================== */

.notification,
.notification-inline {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  margin-block-end: var(--s-4);
  font-size: 0.9375rem;
  line-height: 1.55;
  border: 1px solid var(--p-hairline);
  border-inline-start: 3px solid var(--p-faint);
  border-radius: var(--r-md);
  background: var(--p-tint);
}

.notification a {
  font-weight: var(--fw-semi);
  color: inherit;
  text-decoration: underline;
}

.notification-notice {
  color: var(--p-accent-strong);
  background: var(--p-accent-soft);
  border-color: var(--p-accent-line);
  border-inline-start-color: var(--p-accent);
}

.notification.notification-error,
.notification-inline.notification-error {
  color: var(--tone-danger);
  background: color-mix(in srgb, var(--p-danger) 8%, var(--mix-bg));
  border-color: color-mix(in srgb, var(--p-danger) 26%, var(--mix-bg));
  border-inline-start-color: var(--p-danger);
}

.notification-alert {
  color: var(--tone-warning);
  background: color-mix(in srgb, var(--p-warning) 18%, var(--mix-bg));
  border-color: color-mix(in srgb, var(--p-warning) 40%, var(--mix-bg));
  border-inline-start-color: var(--p-warning);
}

.notification-inline[aria-hidden="true"] {
  display: none;
}

.notification-inline.notification-large {
  padding: var(--s-5) var(--s-6);
  font-size: 1rem;
}

.notification-dismiss {
  margin-inline-start: auto;
  font-size: var(--fs-sm);
  color: inherit;
  opacity: 0.65;
}

.notification-dismiss:hover {
  text-decoration: none;
  opacity: 1;
}

/* -- Dropdowns ------------------------------------------------------------ */
.dropdown {
  position: relative;
}

.dropdown-toggle {
  cursor: pointer;
}

.dropdown-toggle::after {
  display: inline-block;
  margin-inline-start: var(--s-1);
  font: normal normal 900 0.625rem/1 "Font Awesome 5 Free";
  content: "\f078";
  opacity: 0.65;
  transition: transform var(--dur-2) var(--ease);
}

.dropdown-toggle[aria-expanded="true"]::after {
  transform: rotate(180deg);
}

.dropdown-menu {
  position: absolute;
  inset-inline-start: 0;
  top: calc(100% + var(--s-2));
  z-index: 60;
  display: none;
  min-width: 200px;
  padding: var(--s-2);
  background: var(--p-surface);
  border: 1px solid var(--p-hairline);
  border-radius: var(--r-md);
  box-shadow: var(--sh-3);
}

.dropdown-menu[aria-expanded="true"] {
  display: block;
  animation: hc-dropdown-in var(--dur-2) var(--ease-out) both;
}

@keyframes hc-dropdown-in {
  from {
    opacity: 0;
    transform: translateY(-1px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.dropdown-menu-end {
  inset-inline-start: auto;
  inset-inline-end: 0;
}

.dropdown-menu-top {
  top: auto;
  bottom: calc(100% + var(--s-2));
}

.dropdown-menu [role="menuitem"] {
  display: block;
  padding: var(--s-3) var(--s-4);
  font-size: 0.9375rem;
  color: var(--p-text);
  white-space: nowrap;
  border-radius: var(--r-sm);
  transition: background-color var(--dur-1) var(--ease),
    color var(--dur-1) var(--ease);
}

.dropdown-menu [role="menuitem"]:hover,
.dropdown-menu [role="menuitem"]:focus {
  color: var(--p-ink);
  text-decoration: none;
  background: var(--p-tint);
  outline: none;
}

.dropdown-menu [role="menuitem"][aria-selected="true"] {
  font-weight: var(--fw-semi);
  color: var(--p-accent-strong);
}

.dropdown-menu [role="menuitem"][aria-selected="true"]::after {
  float: inline-end;
  margin-inline-start: var(--s-3);
  font: normal normal 900 0.6875rem/1.4 "Font Awesome 5 Free";
  content: "\f00c";
}

.dropdown-menu [role="menuitem"][aria-hidden="true"] {
  display: none;
}

.dropdown-menu [role="separator"] {
  height: 1px;
  margin: var(--s-2) 0;
  background: var(--p-hairline);
}

/* Dropdown inside the dark topbar */
.topbar .dropdown-menu {
  color: var(--p-text);
}


/* ==========================================================================
   MISC PAGES
   ========================================================================== */

.error-page {
  padding-block: clamp(56px, 9vw, 120px);
  text-align: center;
}

.error-page__title {
  font-size: var(--fs-h1);
}

.error-page p {
  max-width: 52ch;
  margin: var(--s-5) auto var(--s-6);
  font-size: 1.0625rem;
  color: var(--p-muted);
}

.category-page,
.section-page,
.community-page,
.user-profile,
.request-page,
.article-list_page {
  padding-block-end: clamp(40px, 5vw, 72px);
}

.section-page h1,
.category-page h1 {
  margin-block: var(--s-4) var(--s-3);
}

.subscriptions-subscribe {
  display: flex;
  justify-content: flex-end;
}

.lt-status-label {
  margin-inline-start: var(--s-2);
}

/* Font Awesome spinner placeholder cleanup (script.js empties these) */
.fa-spin:empty {
  display: inline-block;
  min-width: 1em;
}

/* ==========================================================================
   17  FOOTER
   ========================================================================== */

.footer {
  padding-block: clamp(40px, 5vw, 64px) var(--s-6);
  margin-block-start: auto;
  font-size: var(--fs-sm);
  color: var(--p-footer-text);
  background: var(--p-footer-bg);
  border-top: 1px solid var(--p-hairline);
}

.footer .row {
  row-gap: var(--s-7);
}

.footer a {
  color: var(--p-footer-link);
  text-decoration: none;
}

.footer a:hover {
  color: var(--p-accent-strong);
  text-decoration: underline;
}

.footer__logo {
  margin-block-end: var(--s-4);
}

.footer__logo img {
  height: auto;
  max-width: 150px;
}

/* Two logotypes ship with the theme: a #101828 wordmark for the white footer
   and a white wordmark for the dark-mode footer. Only one is ever painted.
   The dark variant is first in the DOM so section 19 can suppress the light
   one with an adjacent-sibling selector - which means that if no dark
   logotype is uploaded, nothing is suppressed and the light one still shows. */
.footer__logo-img--dark {
  display: none;
}

.footer__text {
  max-width: 34ch;
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--p-faint);
}

.footer__header {
  margin-block-end: var(--s-4);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--p-ink);
}

.footer__menu {
  padding-inline-start: 0;
  margin: 0;
  list-style: none;
}

.footer__menu li {
  margin-block-end: var(--s-3);
}

.footer__menu li:last-child {
  margin-block-end: 0;
}

.footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-block-start: var(--s-5);
}

/* These anchors also carry Font Awesome's .fab class, which declares
   `display: inline-block` at the same specificity and loads after this sheet,
   so it wins and flex centring silently stops working - dropping the glyph to
   the top-left of the circle. The two-class selector below outranks it without
   needing !important. Do not flatten it back to a single class. */
.footer__social .footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  font-size: var(--social-icon-height);
  line-height: 1;
  text-align: center;
  color: var(--p-muted);
  background: var(--p-tint);
  border: 1px solid var(--p-hairline);
  border-radius: 50%;
  transition: color var(--dur-2) var(--ease),
    background-color var(--dur-2) var(--ease),
    border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease-out);
}

/* Font Awesome draws the icon as a ::before glyph; neutralise its inline
   metrics so it lands on the optical centre rather than the text baseline. */
.footer__social .footer__social-link::before {
  display: block;
  line-height: 1;
}

.footer__social .footer__social-link:hover {
  color: var(--p-accent-strong);
  text-decoration: none;
  background: var(--p-accent-soft);
  border-color: var(--p-accent-line);
  transform: translateY(-1px);
}

.footer_copyright {
  padding-block-start: var(--s-6);
  margin-block-start: var(--s-7);
  font-size: var(--fs-xs);
  color: var(--p-faint);
  border-top: 1px solid var(--p-hairline);
}

.powered-by-zendesk {
  margin-block-start: var(--s-2);
  font-size: var(--fs-xs);
  color: var(--p-faint);
}


/* ==========================================================================
   18  REFINEMENTS & REMAINING HOOKS
   ========================================================================== */

/* -- Social links keep a hint of each network on hover -------------------- */
.footer__social .footer__social-link_facebook:hover {
  color: #3b5998;
  background: color-mix(in srgb, #3b5998 10%, var(--mix-bg));
  border-color: color-mix(in srgb, #3b5998 28%, var(--mix-bg));
}

.footer__social .footer__social-link_twitter:hover {
  color: #1da1f2;
  background: color-mix(in srgb, #1da1f2 10%, var(--mix-bg));
  border-color: color-mix(in srgb, #1da1f2 28%, var(--mix-bg));
}

.footer__social .footer__social-link_linkedin:hover {
  color: #0a66c2;
  background: color-mix(in srgb, #0a66c2 10%, var(--mix-bg));
  border-color: color-mix(in srgb, #0a66c2 28%, var(--mix-bg));
}

.footer__social .footer__social-link_youtube-play:hover {
  color: #ff0000;
  background: color-mix(in srgb, #ff0000 8%, var(--mix-bg));
  border-color: color-mix(in srgb, #ff0000 24%, var(--mix-bg));
}

.footer__social .footer__social-link_instagram:hover {
  color: #c13584;
  background: color-mix(in srgb, #c13584 10%, var(--mix-bg));
  border-color: color-mix(in srgb, #c13584 28%, var(--mix-bg));
}

.footer__menu_contacts li {
  margin-block-end: var(--s-2);
  font-size: var(--fs-sm);
}

/* -- Custom block icons: <img> is swapped for inline SVG by script.js ------ */
.custom-block__image,
.custom-block__icon .replaced-svg {
  width: auto;
  max-width: 30px;
  height: var(--icon-height);
  max-height: 30px;
  fill: var(--p-icon);
}

/* -- Promoted article marker in the category tree ------------------------- */
.article-list__item_is-promoted .article-list__item-link {
  font-weight: var(--fw-medium);
}

/* -- New-request description field: host for the injected length meter ---- */
.request_description {
  position: relative;
}

/* -- Profile meta row ----------------------------------------------------- */
.meta--profile {
  gap: var(--s-4);
  font-size: var(--fs-sm);
}

.meta--profile .meta__item + .meta__item::before {
  display: none;
}

/* -- Long words in narrow columns ----------------------------------------- */
.article-list__item-link,
.section-articles__link,
.search-result__title,
.my-activities-item__title,
.post-list-item__title,
.topic-list-item__title {
  overflow-wrap: anywhere;
}

/* -- Zendesk request-list beta widget: soften to match the theme ---------- */
[data-garden-id],
.request_list_container {
  --zd-font-family: var(--p-font);
}

/* -- Tighten the gap when the hero is the only header element ------------- */
.hero-unit--no-custom-blocks + .container > .container-inner {
  padding-block-start: clamp(40px, 5vw, 64px);
}

/* -- Hero eyebrow is optional (theme setting). Never leave a bare pill ----- */
.hero-unit__eyebrow:empty {
  display: none;
}

/* ==========================================================================
   19  DARK MODE, MOTION & PRINT
   ========================================================================== */

/* --------------------------------------------------------------------------
   Dark mode
   --------------------------------------------------------------------------
   Gated on the `hc-dark` class, which document_head.hbs adds to <html> only
   when the "Enable dark mode" theme setting is on. Turning that setting off in
   the Guide theme editor disables all of the below with no code change.

   Inside the gate we still honour prefers-color-scheme, so the help center
   follows each visitor's own device setting rather than forcing a choice.

   Only --mix-bg / --mix-fg and the base surfaces are redefined; the 46 derived
   tints and text tones in section 01 recompute themselves from those.
   -------------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
  html.hc-dark {
    color-scheme: dark;

    /* Flip the mix anchors: tints now darken, text tones now lighten */
    --mix-bg: #14242d;
    --mix-fg: #fff;

    /* Base surfaces */
    --p-bg: #0d1a21;
    --p-surface: #14242d;
    --p-text: #dde5ea;
    --p-ink: #f2f7f9;
    --p-border: #22363f;

    /* Readability-critical neutrals are set outright rather than derived */
    --p-muted: #9aabb5;
    --p-faint: #8598a3;   /* 4.8:1 on --p-tint */
    --p-deco: #5d707c;
    --p-tint: #1a2d37;

    /* Footer follows the page instead of the light setting value */
    --p-footer-bg: #0b161c;
    --p-footer-text: #9aabb5;
    --p-footer-link: #dde5ea;

    --sh-1: 0 1px 2px rgba(0, 0, 0, 0.32);
    --sh-2: 0 2px 4px rgba(0, 0, 0, 0.3), 0 8px 20px -6px rgba(0, 0, 0, 0.46);
    --sh-3: 0 2px 6px rgba(0, 0, 0, 0.36), 0 14px 36px -10px rgba(0, 0, 0, 0.6);
  }

  /* -- Theme chrome ------------------------------------------------------- */
  /* --p-ink flips to near-white in dark mode, but these two keep a bright mint
     fill, so their labels have to be pinned dark or they drop to 2:1. */
  html.hc-dark .btn--primary,
  html.hc-dark input[type="submit"],
  html.hc-dark .btn--submit-a-request,
  html.hc-dark .still-have-questions__btn,
  html.hc-dark .see-all-articles {
    color: #08171e;
    background: var(--p-accent);
  }

  html.hc-dark .btn--submit-a-request:hover,
  html.hc-dark .still-have-questions__btn:hover,
  html.hc-dark .see-all-articles:hover {
    color: #08171e;
    background: color-mix(in srgb, var(--p-accent) 80%, #fff);
  }

  html.hc-dark .btn--primary:hover,
  html.hc-dark input[type="submit"]:hover {
    color: #08171e;
    background: color-mix(in srgb, var(--p-accent) 80%, #fff);
  }

  html.hc-dark .search-box #query,
  html.hc-dark .search-box_page #query {
    background: var(--p-surface);
    border-color: var(--p-border);
  }

  html.hc-dark .my-activities-menu--main .my-activities-menu__item a:hover {
    background: rgba(255, 255, 255, 0.08);
  }

  html.hc-dark ::selection {
    color: #08171e;
    background: var(--p-accent);
  }

  /* ======================================================================
     AUTHOR-AUTHORED CONTENT SAFETY

     Article, comment and post bodies are user-generated HTML written against
     a light page. When the page goes dark, body text becomes light but an
     author's hard-coded background stays light — light-on-light, unreadable.

     CSS cannot read a colour value, so rather than guess we detect the
     mechanical tells (an inline background-color, a bgcolor attribute) and
     restore a light reading context for just that element and its subtree.
     The element then renders exactly as its author intended.
     ====================================================================== */

  /* 1. Elements that declare their own background COLOUR.
        Deliberately matches colour syntaxes only — `background-image` and
        `background: url(...)` are excluded, so an author's dark banner with
        light text is left alone. */
  html.hc-dark :is(.article__body, .comment__body, .post__body, #hc-wysiwyg)
    :is(
      [style*="background-color"],
      [style*="background:#"],
      [style*="background: #"],
      [style*="background:rgb"],
      [style*="background: rgb"],
      [style*="background:hsl"],
      [style*="background: hsl"],
      [bgcolor]
    ),
  /* Applied at runtime by script.js to any element whose COMPUTED background is
     light. This is the only way to catch a background that came from a CSS class
     rather than an inline style - CSS selectors cannot match on a colour they
     were never told the name of. */
  /* Footer logotype swap. See section 13 for why the dark variant is first
     in the DOM. display:none also removes the unused image from the
     accessibility tree, so the logo link is announced exactly once. */
  html.hc-dark .footer__logo-img--dark {
    display: block;
  }

  html.hc-dark .footer__logo-img--dark + .footer__logo-img--light {
    display: none;
  }

  html.hc-dark .hc-lightbg {
    color: #1b2b33;
    border-color: rgba(0, 0, 0, 0.12);
  }

  /* Descendants inherit that dark foreground unless they set their own */
  html.hc-dark :is(.article__body, .comment__body, .post__body, #hc-wysiwyg)
    :is(
      [style*="background-color"],
      [style*="background:#"],
      [style*="background: #"],
      [style*="background:rgb"],
      [style*="background: rgb"],
      [style*="background:hsl"],
      [style*="background: hsl"],
      [bgcolor]
    )
    :where(p, span, li, td, th, div, h1, h2, h3, h4, h5, h6, strong, em, b, i),
  html.hc-dark .hc-lightbg
    :where(p, span, li, td, th, div, h1, h2, h3, h4, h5, h6, strong, em, b, i) {
    color: inherit;
  }

  /* Links inside such a block need a dark-page-safe accent */
  html.hc-dark :is(.article__body, .comment__body, .post__body)
    :is([style*="background-color"], [style*="background:#"], [style*="background: #"], [bgcolor])
    a,
  html.hc-dark .hc-lightbg a {
    color: #04745a;
  }

  /* Inline code and pre inside an author's light block stay light too, so the
     block reads as one surface instead of a dark chip on a pale card. */
  html.hc-dark :is(.article__body, .comment__body, .post__body)
    :is([style*="background-color"], [style*="background:#"], [style*="background: #"], [style*="background:rgb"], [style*="background: rgb"], [bgcolor])
    :is(code, pre, kbd, samp),
  html.hc-dark .hc-lightbg :is(code, pre, kbd, samp) {
    color: #0f3d31;
    background: rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.12);
  }

  /* 2. Tables. Authors shade headers with bgcolor or inline styles, and our own
        dark `th` fill would sit on top of their light table — dark header band
        over a light body, with invisible header text. Stand our chrome down and
        let the author's shading show through. */
  /* The table itself keeps whatever the author painted (a bgcolor attribute or
     an inline style) — we only correct the foreground. Setting a background
     here would override the presentational hint and erase their shading. */
  html.hc-dark .article__body :is(table[bgcolor], table[style*="background"]) {
    color: #1b2b33;
    border-color: rgba(0, 0, 0, 0.14);
  }

  /* Inner cells DO need our dark `th` fill removed so the author's plate shows
     through instead of a dark header band over a light body. */
  html.hc-dark .article__body :is(table[bgcolor], table[style*="background"])
    :is(th, td, thead, tbody, tr) {
    color: #1b2b33;
    background: transparent;
    border-color: rgba(0, 0, 0, 0.14);
  }

  html.hc-dark .article__body :is(table[bgcolor], table[style*="background"]) tbody tr:hover {
    background: rgba(0, 0, 0, 0.04);
  }

  /* Cells that carry their own bgcolor keep it and just get readable text */
  html.hc-dark .article__body :is(th[bgcolor], td[bgcolor], th[style*="background"], td[style*="background"]) {
    color: #1b2b33;
  }

  /* 3. highlight.js ships the light "github" theme, which hard-codes a white
        background and near-black tokens. Neutralise the surface and let the
        token colours ride on our dark panel. */
  html.hc-dark .article__body pre,
  html.hc-dark .comment__body pre {
    background: #0b1a22;
    border-color: var(--p-border);
  }

  html.hc-dark .hljs {
    color: #dde5ea;
    background: transparent;
  }

  html.hc-dark .hljs-comment,
  html.hc-dark .hljs-quote {
    color: #7b8f9b;
  }

  html.hc-dark :is(.hljs-string, .hljs-doctag, .hljs-addition, .hljs-attribute) {
    color: #7ee0bd;
  }

  html.hc-dark :is(.hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-type) {
    color: #8ab4f8;
  }

  html.hc-dark :is(.hljs-number, .hljs-meta, .hljs-built_in, .hljs-title, .hljs-section) {
    color: #f0b866;
  }

  html.hc-dark :is(.hljs-deletion, .hljs-regexp, .hljs-symbol) {
    color: #ff8f8f;
  }

  /* 4. Screenshots and diagrams are usually exported on white. Don't invert
        them — that wrecks brand colours and photos. Sit them on a light plate
        so the edges read as intentional rather than as a blown-out rectangle. */
  html.hc-dark .article__body :is(img, figure > img),
  html.hc-dark .comment__body img {
    background: #fff;
    box-shadow: 0 0 0 1px var(--p-border);
  }

  /* Transparent-background assets (logos, icons) opt out with a class or by
     being an SVG, where a white plate would look like a bug. */
  html.hc-dark .article__body :is(img[src$=".svg"], img.no-plate, .replaced-svg) {
    background: transparent;
    box-shadow: none;
  }

  /* 5. Our own callouts and notes already derive from --mix-bg, but authors
        also paste raw <blockquote>/<hr>; keep those on-theme. */
  html.hc-dark .article__body hr {
    background: var(--p-border);
  }

  /* 6. Embedded iframes (videos, Loom, Figma) keep their own chrome; just
        make sure the frame edge is visible against the dark panel. */
  html.hc-dark .article__body iframe,
  html.hc-dark .embed-responsive {
    border: 1px solid var(--p-border);
    border-radius: var(--r-md);
  }

  /* 7. Zendesk-rendered widgets (request list beta, Garden form controls) are
        light-only components we don't own. Give them a light island rather
        than a half-converted dark one. */
  html.hc-dark :is([data-garden-id], .request_list_container) {
    color: #1b2b33;
    background: #f4f7f8;
    border-radius: var(--r-md);
  }
}


@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .custom-block__link:hover,
  .promoted-articles__item:hover,
  .topic-list-item__box:hover,
  .btn:hover,
  .footer__social-link:hover,
  .share li a:hover {
    transform: none;
  }
}

@media print {
  .topbar,
  .hero-unit,
  .footer,
  .search-box,
  .article__vote,
  .cta-box,
  .comment-form,
  .article-container__sidenav,
  .article-container__toc,
  .article-container__sidebar,
  .still-have-questions,
  .lt-d-print-none,
  .skip-navigation {
    display: none !important;
  }

  body {
    color: #000;
    background: #fff;
  }

  .box {
    padding: 0;
    border: 0;
    box-shadow: none;
  }

  .article__body {
    max-width: none;
    font-size: 11pt;
  }

  a {
    color: #000;
    text-decoration: underline;
  }

  .article__body a[href^="http"]::after {
    font-size: 9pt;
    content: " (" attr(href) ")";
    word-break: break-all;
  }
}

/* -- High contrast preference --------------------------------------------- */
@media (prefers-contrast: more) {
  :root {
    --p-muted: var(--p-text);
    --p-hairline: var(--p-text);
  }

  .btn,
  input,
  textarea,
  select {
    border-width: 2px;
  }
}

/*Custom code below*/

/* Reduce list spacing */
.article__body ul li p,
.article__body ol li p { margin-bottom: 3px; }

/* Tighten inline code (leave ``` code blocks alone) */
.article__body :not(pre) > code {
  padding: 1px 4px !important;
  line-height: 1.2;
  background: none;
  border: none;
  background-color: #091E420F;
}
html.hc-dark .article__body :not(pre) > code { background-color: #FFFFFF1F; }

/* Header row spacing matches body rows */
.article__body table th,
.article__body table td { padding: 8px !important; }
.article__body table thead th { font-weight: bold; }

/* Hide sunset support email line */
.article__body p:has(a[href^="mailto:support@pipe17.com"]),
.article__body li:has(a[href^="mailto:support@pipe17.com"]) { display: none !important; }

/* ===== Spacing / alignment fixes ===== */
.breadcrumbs + .search-box { margin-top: 20px; }
.breadcrumbs + h1 { margin-top: 24px; }
#request_form_recommendation { margin-bottom: 20px; }

.my-activities-menu--main .my-activities-menu__item { padding: 0; text-align: center; }
.my-activities-menu--main .my-activities-menu__item a,
.my-activities-menu--main .my-activities-menu__item.is-active { padding: 0.5rem 1rem; text-align: center; }

.lt-profile-stats .meta__item + .meta__item::before { display: none; }

.lt-section-subscribe { margin-bottom: 20px; }
.article-list_page { padding: 0 clamp(16px, 2vw, 24px); }
.article-list_page .article-list__item { padding-block: 0; }
.article-list_page .article-list__item-link { padding-block: 12px; }

/* ===== Request form: native select + hide suggested articles ===== */
body select:not([multiple]) {
  color: var(--p-text) !important;
  background-color: var(--p-surface) !important;
  border-color: var(--p-hairline) !important;
}
.suggestion-list,
[data-hc-suggestion-list] { display: none !important; }

/* ===== Request-form widgets follow the device theme (light + dark) ===== */
/* Tagger dropdowns — closed control */
body .nesty-input {
  color: var(--p-text) !important;
  background-color: var(--p-surface) !important;
  border-color: var(--p-hairline) !important;
}
/* Tagger dropdowns — open option list */
.nesty-panel {
  color: var(--p-text) !important;
  background-color: var(--p-surface) !important;
  border-color: var(--p-hairline) !important;
}
.nesty-panel ul,
.nesty-panel li,
.nesty-panel a,
.nesty-panel span {
  background-color: transparent !important;
  color: var(--p-text) !important;
  border-color: var(--p-hairline) !important;
}
.nesty-panel a:hover,
.nesty-panel li:hover > a,
.nesty-panel li.hover,
.nesty-panel .nesty-hover { background-color: var(--p-tint) !important; }

/* Description editor — frame + toolbar */
#hc-wysiwyg {
  background-color: var(--p-surface) !important;
  border: 1px solid var(--p-hairline) !important;
  border-radius: var(--r-btn) !important;
}
#hc-wysiwyg > div { background-color: var(--p-surface) !important; }
#hc-wysiwyg iframe,
#hc-wysiwyg .tox-edit-area__iframe { background-color: var(--p-surface) !important; }

/* Description toolbar — chip the real buttons (not the T's wrapper span) */
#hc-wysiwyg [role="toolbar"] [role="button"] {
  border: 1px solid var(--p-hairline) !important;
  border-radius: 6px !important;
  background-color: var(--p-tint) !important;
  transform: translateY(-3px) !important;   /* ← nudge all buttons up; adjust to taste */
}
#hc-wysiwyg [role="toolbar"] [role="button"]:hover {
  border-color: var(--p-accent-line) !important;
  background-color: var(--p-accent-soft) !important;
}
@media (prefers-color-scheme: dark) {
  html.hc-dark #hc-wysiwyg [role="toolbar"] [role="button"] {
    background-color: #e9eef2 !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
  }
  html.hc-dark #hc-wysiwyg [role="toolbar"] [role="button"]:hover {
    background-color: #ffffff !important;
  }
}
/* Request-form field borders: high contrast, follows the device */
.request-form select:not([multiple]),
.request-form input[type="text"],
.request-form input[type="email"],
.request-form textarea,
.request-form .nesty-input,
.request-form [data-hc-pills-container],
.request-form #hc-wysiwyg {
  border-color: #000 !important;
}
@media (prefers-color-scheme: dark) {
  html.hc-dark .request-form select:not([multiple]),
  html.hc-dark .request-form input[type="text"],
  html.hc-dark .request-form input[type="email"],
  html.hc-dark .request-form textarea,
  html.hc-dark .request-form .nesty-input,
  html.hc-dark .request-form [data-hc-pills-container],
  html.hc-dark .request-form #hc-wysiwyg {
    border-color: #fff !important;
  }
}
/* keep the CC field's inner typing input from drawing its own border */
.request-form [data-hc-pills-container] input {
  border-color: transparent !important;
}