@charset "UTF-8";
/* ================================================================
   REWIND KB THEME: style.css

   CONTENTS
     1. Design tokens (brand palette + semantic roles)
     2. Animations
     3. Vendor: Bootstrap 5.3.3 (custom build, minified, do not edit)
     4. Theme chrome (Bootstrap bridge, buttons, focus, header,
        hero, page banner, cards, link lists, footer)
     5. Zendesk base styles (articles, search, requests, profiles)
        5.14 Brand refinements (search, breadcrumbs, article page,
             sidebar, votes, forms)
     6. Rewind KB components (rw- prefix)

   HOW TO CHANGE COLOURS
   Change values in section 1 only. Rules elsewhere reference the
   semantic role tokens (--rw-text, --rw-action ...), which point
   at the brand palette. Bootstrap (section 3) is re-pointed at the
   brand from section 4.0, never edited inside the vendor block.

   ORDER MATTERS
   Sections keep the original cascade order. Moving blocks can
   change which rule wins.

   History
   [Sep 2026] Pass 1: unminified, labelled and tokenized. No visual change.
   [Oct 2026] Pass 2: brand rebrand (Ink / Signal / Bone, Space Grotesk
              + Inter Tight, 16px root, brand buttons and focus ring,
              light reading pages, Ink homepage hero).
   ================================================================ */


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

   Brand values from the Rewind design system (rewind.com/brand).
   Semantic role tokens below the palette are what rules use.
   ================================================================ */

:root {
  /* Brand palette. Values from the Rewind design system
     (rewind.com/brand, June 2026). */
  --rw-ink-950: #020917;
  --rw-ink-900: #0a1326;
  --rw-ink-800: #141d33;
  --rw-ink-700: #232d45;
  --rw-ink-600: #36415c;
  --rw-ink-500: #515b76;
  --rw-ink-400: #7b8499;
  --rw-ink-300: #a8afbe;
  --rw-ink-200: #ccd1da;
  --rw-ink-150: #dfe3e9;
  --rw-ink-100: #eceef2;
  --rw-ink-50: #f5f6f8;
  --rw-ink-25: #fafbfc;

  --rw-signal: #fdad0d;          /* fills and buttons only, with Ink text */
  --rw-signal-600: #e6970a;      /* button hover */
  --rw-signal-200: #ffe0a3;      /* text selection */
  --rw-signal-100: #fff3da;      /* active nav fill */
  --rw-signal-on-light: #97600a; /* Signal as text, link or icon on Paper/Bone (guidelines: 5.3:1 / 4.8:1) */
  --rw-signal-on-light-deep: #7e5808; /* hover state of the above */

  --rw-bone: #f5f5f0;
  --rw-bone-300: #deded4;
  --rw-paper: #ffffff;

  --rw-info: #2f6fdb;
  --rw-info-bg: #eaf1fc;
  --rw-warn: #d4860b;
  --rw-warn-bg: #fdf2dc;
  --rw-danger: #d6453d;
  --rw-danger-bg: #fbeae9;
  --rw-ok: #1f9d6b;
  --rw-ok-bg: #e8f6ef;

  --rw-font-display: "Space Grotesk", "Inter Tight", system-ui, sans-serif;
  --rw-font-sans: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --rw-radius: 8px;

  /* Semantic roles. Rules reference THESE, not the palette. */
  --rw-text: var(--rw-ink-950);          /* headings, links, strong UI, step circles, tooltips */
  --rw-text-body: var(--rw-ink-700);     /* running text */
  --rw-text-muted: var(--rw-ink-500);    /* meta data, captions, table headers */
  --rw-step: var(--rw-ink-600);          /* rw-steps and walkthrough number circles */
  --rw-mark: var(--rw-ink-600);          /* rw-check verdict marks in tables */
  --rw-action: var(--rw-signal-on-light);          /* accent on light surfaces: link hover, ghost links, markers */
  --rw-action-hover: var(--rw-signal-on-light-deep);
  --rw-action-active: var(--rw-signal-on-light-deep);
  --rw-border: var(--rw-ink-100);        /* component borders, hover fills */
  --rw-divider: var(--rw-ink-150);       /* accordion item dividers */
  --rw-surface: var(--rw-ink-50);        /* light fills */
  --rw-surface-raised: var(--rw-ink-25); /* table header rows */
  --rw-line: var(--rw-ink-100);
  --rw-furniture: #d3d3d3;    /* rw-meta: kept neutral to pair with Zendesk's summary block */
  --rw-furniture-bg: #f3f3f3; /* until that block gets a brand override (see section 6 end) */
  --rw-card-shadow: transparent;
  --rw-hero-a: var(--rw-ink-900);
  --rw-hero-b: var(--rw-ink-900);
  --rw-action-rgb: 151, 96, 10;
  --rw-text-rgb: 2, 9, 23;
}


/* ================================================================
   2. ANIMATIONS
   ================================================================ */

@keyframes showMenu {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes lettersUp {
  0% {
    opacity: 0;
    transform: translatey(100px);
  }
  to {
    opacity: 1;
    transform: translatey(0);
  }
}
@keyframes pulsingGradient {
  0% {
    background-position: 0 0;
  }
  to {
    background-position: -300px 0;
  }
}
@keyframes boomerang {
  10% {
    transform: rotate(-20deg);
  }
  35% {
    transform: translate(220%, -55%) scale(0.5) rotate(-200deg);
  }
  75% {
    transform: translate(-210%, 55%) scale(0.9) rotate(260deg);
  }
  90% {
    transform: translate(0) rotate(0deg);
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes pulseAnimation {
  0% {
    box-shadow: 0 0 0 0 rgba(var(--rw-text-rgb), 0.4);
  }
  to {
    box-shadow: 0 0 0 10px rgba(var(--rw-text-rgb), 0);
  }
}
[data-scroll="in"],
[data-scroll="out"],
[data-scroll] {
  transition: all 0.5s ease;
}
[data-scroll] {
  transition: 0.4s ease-in-out;
}
[data-scroll="in"] {
  opacity: 1;
  transform: translatey(0);
}
[data-scroll="out"] {
  opacity: 0;
  transform: translatey(20px);
}


/* ================================================================
   3. VENDOR: BOOTSTRAP 5.3.3 (CUSTOM BUILD)

   Minified on purpose. Custom spacing (7.5/15/30/60/120px),
   breakpoints (479/767/980/1200px) and colours are compiled in,
   so a stock Bootstrap CDN copy would change layouts. Do not edit.
   Override from section 4 instead.
   ================================================================ */

/*!
 * Bootstrap  v5.3.3 (https://getbootstrap.com/)
 * Copyright 2011-2024 The Bootstrap Authors
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) */:root{--bs-indigo:#6610f2;--bs-pink:#d63384;--bs-red:#dc3545;--bs-orange:#fd7e14;--bs-yellow:#ffc107;--bs-green:#198754;--bs-teal:#20c997;--bs-cyan:#0dcaf0;--bs-black:#000;--bs-white:#fff;--bs-gray:#6c757d;--bs-gray-dark:#343a40;--bs-gray-100:#f8f9fa;--bs-gray-200:#e9ecef;--bs-gray-300:#dee2e6;--bs-gray-400:#ced4da;--bs-gray-500:#adb5bd;--bs-gray-600:#6c757d;--bs-gray-700:#495057;--bs-gray-800:#343a40;--bs-gray-900:#212529;--bs-primary:#f7c20f;--bs-blue:#3498db;--bs-secondary:#3c5df3;--bs-secondary-light:#ebeefe;--bs-light:#ecf0f1;--bs-lightblue:rgba(189,201,255,.5);--bs-dark:#2c3e50;--bs-purple:#5f27cd;--bs-primary-rgb:247,194,15;--bs-blue-rgb:52,152,219;--bs-secondary-rgb:60,93,243;--bs-secondary-light-rgb:235,238,254;--bs-light-rgb:236,240,241;--bs-lightblue-rgb:189,201,255;--bs-dark-rgb:44,62,80;--bs-purple-rgb:95,39,205;--bs-primary-text-emphasis:#634e06;--bs-secondary-text-emphasis:#182561;--bs-success-text-emphasis:#0a3622;--bs-info-text-emphasis:#055160;--bs-warning-text-emphasis:#664d03;--bs-danger-text-emphasis:#58151c;--bs-light-text-emphasis:#495057;--bs-dark-text-emphasis:#495057;--bs-primary-bg-subtle:#fdf3cf;--bs-secondary-bg-subtle:#d8dffd;--bs-success-bg-subtle:#d1e7dd;--bs-info-bg-subtle:#cff4fc;--bs-warning-bg-subtle:#fff3cd;--bs-danger-bg-subtle:#f8d7da;--bs-light-bg-subtle:#fcfcfd;--bs-dark-bg-subtle:#ced4da;--bs-primary-border-subtle:#fce79f;--bs-secondary-border-subtle:#b1befa;--bs-success-border-subtle:#a3cfbb;--bs-info-border-subtle:#9eeaf9;--bs-warning-border-subtle:#ffe69c;--bs-danger-border-subtle:#f1aeb5;--bs-light-border-subtle:#e9ecef;--bs-dark-border-subtle:#adb5bd;--bs-white-rgb:255,255,255;--bs-black-rgb:0,0,0;--bs-font-sans-serif:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--bs-font-monospace:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--bs-gradient:linear-gradient(180deg,hsla(0,0%,100%,.15),hsla(0,0%,100%,0));--bs-body-font-family:var(--bs-font-sans-serif);--bs-body-font-size:1rem;--bs-body-font-weight:400;--bs-body-line-height:1.5;--bs-body-color:#212529;--bs-body-color-rgb:33,37,41;--bs-body-bg:#fff;--bs-body-bg-rgb:255,255,255;--bs-emphasis-color:#000;--bs-emphasis-color-rgb:0,0,0;--bs-secondary-color:rgba(33,37,41,.75);--bs-secondary-color-rgb:33,37,41;--bs-secondary-bg:#e9ecef;--bs-secondary-bg-rgb:233,236,239;--bs-tertiary-color:rgba(33,37,41,.5);--bs-tertiary-color-rgb:33,37,41;--bs-tertiary-bg:#f8f9fa;--bs-tertiary-bg-rgb:248,249,250;--bs-heading-color:inherit;--bs-link-color:#f7c20f;--bs-link-color-rgb:247,194,15;--bs-link-decoration:underline;--bs-link-hover-color:#c69b0c;--bs-link-hover-color-rgb:198,155,12;--bs-code-color:#d63384;--bs-highlight-color:#212529;--bs-highlight-bg:#fff3cd;--bs-border-width:1px;--bs-border-style:solid;--bs-border-color:#dee2e6;--bs-border-color-translucent:rgba(0,0,0,.175);--bs-border-radius:0.375rem;--bs-border-radius-sm:0.25rem;--bs-border-radius-lg:0.5rem;--bs-border-radius-xl:1rem;--bs-border-radius-xxl:2rem;--bs-border-radius-2xl:var(--bs-border-radius-xxl);--bs-border-radius-pill:50rem;--bs-box-shadow:0 0.5rem 1rem rgba(0,0,0,.15);--bs-box-shadow-sm:0 0.125rem 0.25rem rgba(0,0,0,.075);--bs-box-shadow-lg:0 1rem 3rem rgba(0,0,0,.175);--bs-box-shadow-inset:inset 0 1px 2px rgba(0,0,0,.075);--bs-focus-ring-width:0.25rem;--bs-focus-ring-opacity:0.25;--bs-focus-ring-color:rgba(247,194,15,.25);--bs-form-valid-color:#198754;--bs-form-valid-border-color:#198754;--bs-form-invalid-color:#dc3545;--bs-form-invalid-border-color:#dc3545}*,:after,:before{box-sizing:border-box}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}body{background-color:var(--bs-body-bg);color:var(--bs-body-color);font-family:var(--bs-body-font-family);font-size:var(--bs-body-font-size);font-weight:var(--bs-body-font-weight);line-height:var(--bs-body-line-height);margin:0;text-align:var(--bs-body-text-align);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0)}hr{border:0;border-top:var(--bs-border-width) solid;color:inherit;margin:1rem 0;opacity:.25}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{color:var(--bs-heading-color);font-weight:500;line-height:1.2;margin-bottom:.5rem}.h1,h1{font-size:calc(1.375rem + 1.5vw)}@media (min-width:1200px){.h1,h1{font-size:2.5rem}}.h2,h2{font-size:calc(1.325rem + .9vw)}@media (min-width:1200px){.h2,h2{font-size:2rem}}.h3,h3{font-size:calc(1.3rem + .6vw)}@media (min-width:1200px){.h3,h3{font-size:1.75rem}}.h4,h4{font-size:calc(1.275rem + .3vw)}@media (min-width:1200px){.h4,h4{font-size:1.5rem}}.h5,h5{font-size:1.25rem}.h6,h6{font-size:1rem}p{margin-bottom:1rem;margin-top:0}abbr[title]{cursor:help;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none}address{font-style:normal;line-height:inherit;margin-bottom:1rem}ol,ul{padding-left:2rem}dl,ol,ul{margin-bottom:1rem;margin-top:0}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}blockquote{margin:0 0 1rem}b,strong{font-weight:bolder}.small,small{font-size:.875em}.mark,mark{background-color:var(--bs-highlight-bg);color:var(--bs-highlight-color);padding:.1875em}sub,sup{font-size:.75em;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:rgba(var(--bs-link-color-rgb),var(--bs-link-opacity,1));text-decoration:underline}a:hover{--bs-link-color-rgb:var(--bs-link-hover-color-rgb)}a:not([href]):not([class]),a:not([href]):not([class]):hover{color:inherit;text-decoration:none}code,kbd,pre,samp{font-family:var(--bs-font-monospace);font-size:1em}pre{display:block;font-size:.875em;margin-bottom:1rem;margin-top:0;overflow:auto}pre code{color:inherit;font-size:inherit;word-break:normal}code{color:var(--bs-code-color);font-size:.875em;word-wrap:break-word}a>code{color:inherit}kbd{background-color:var(--bs-body-color);border-radius:.25rem;color:var(--bs-body-bg);font-size:.875em;padding:.1875rem .375rem}kbd kbd{font-size:1em;padding:0}figure{margin:0 0 1rem}img,svg{vertical-align:middle}table{border-collapse:collapse;caption-side:bottom}caption{color:var(--bs-secondary-color);padding-bottom:.5rem;padding-top:.5rem;text-align:left}th{text-align:inherit;text-align:-webkit-match-parent}tbody,td,tfoot,th,thead,tr{border:0 solid;border-color:inherit}label{display:inline-block}button{border-radius:0}button:focus:not(:focus-visible){outline:0}button,input,optgroup,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit;margin:0}button,select{text-transform:none}[role=button]{cursor:pointer}select{word-wrap:normal}select:disabled{opacity:1}[list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator{display:none!important}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled){cursor:pointer}::-moz-focus-inner{border-style:none;padding:0}fieldset{border:0;margin:0;min-width:0;padding:0}legend{float:left;font-size:calc(1.275rem + .3vw);line-height:inherit;margin-bottom:.5rem;padding:0;width:100%}@media (min-width:1200px){legend{font-size:1.5rem}}legend+*{clear:left}::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-fields-wrapper,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-text,::-webkit-datetime-edit-year-field{padding:0}::-webkit-inner-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-color-swatch-wrapper{padding:0}::file-selector-button{-webkit-appearance:button;font:inherit}output{display:inline-block}iframe{border:0}summary{cursor:pointer;display:list-item}progress{vertical-align:baseline}[hidden]{display:none!important}.lead{font-size:1.25rem;font-weight:300}.list-unstyled{list-style:none;padding-left:0}.blockquote{font-size:1.25rem;margin-bottom:1rem}.blockquote>:last-child{margin-bottom:0}.img-fluid{height:auto;max-width:100%}.figure{display:inline-block}.container,.container-fluid{--bs-gutter-x:1.5rem;--bs-gutter-y:0;margin-left:auto;margin-right:auto;padding-left:calc(var(--bs-gutter-x)*.5);padding-right:calc(var(--bs-gutter-x)*.5);width:100%}@media (min-width:479px){.container{max-width:540px}}@media (min-width:767px){.container{max-width:720px}}@media (min-width:980px){.container{max-width:960px}}@media (min-width:1200px){.container{max-width:1216px}}:root{--bs-breakpoint-xs:0;--bs-breakpoint-sm:479px;--bs-breakpoint-md:767px;--bs-breakpoint-lg:980px;--bs-breakpoint-xl:1200px;--bs-breakpoint-xxl:1505px;--bs-breakpoint-xxxl:1680px}.row{--bs-gutter-x:1.5rem;--bs-gutter-y:0;display:flex;flex-wrap:wrap;margin-left:calc(var(--bs-gutter-x)*-.5);margin-right:calc(var(--bs-gutter-x)*-.5);margin-top:calc(var(--bs-gutter-y)*-1)}.row>*{flex-shrink:0;margin-top:var(--bs-gutter-y);max-width:100%;padding-left:calc(var(--bs-gutter-x)*.5);padding-right:calc(var(--bs-gutter-x)*.5);width:100%}.col{flex:1 0 0%}.col-12,.row-cols-1>*{flex:0 0 auto;width:100%}.offset-1{margin-left:8.33333333%}.g-1{--bs-gutter-x:7.5px;--bs-gutter-y:7.5px}.g-2{--bs-gutter-x:15px;--bs-gutter-y:15px}.g-3{--bs-gutter-x:30px;--bs-gutter-y:30px}.g-4{--bs-gutter-x:60px;--bs-gutter-y:60px}.g-5{--bs-gutter-x:120px;--bs-gutter-y:120px}@media (min-width:479px){.col-sm-8{flex:0 0 auto;width:66.66666667%}}@media (min-width:767px){.col-md-8{flex:0 0 auto;width:66.66666667%}}@media (min-width:980px){.col-lg{flex:1 0 0%}.row-cols-lg-3>*{flex:0 0 auto;width:33.33333333%}.col-lg-3{flex:0 0 auto;width:25%}.col-lg-4{flex:0 0 auto;width:33.33333333%}.col-lg-6{flex:0 0 auto;width:50%}.col-lg-8{flex:0 0 auto;width:66.66666667%}.col-lg-9{flex:0 0 auto;width:75%}.col-lg-10{flex:0 0 auto;width:83.33333333%}}@media (min-width:1200px){.col-xl-3{flex:0 0 auto;width:25%}.col-xl-5{flex:0 0 auto;width:41.66666667%}.col-xl-8{flex:0 0 auto;width:66.66666667%}}.form-field label{margin-bottom:.5rem}.form-field input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-clip:padding-box;background-color:var(--bs-body-bg);border:1px solid #94a3a1;border-radius:4px;color:var(--bs-body-color);display:block;font-size:1rem;font-weight:400;line-height:1.5;padding:.375rem .75rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;width:100%}@media (prefers-reduced-motion:reduce){.form-field input{transition:none}}.form-field input[type=file]{overflow:hidden}.form-field input[type=file]:not(:disabled):not([readonly]){cursor:pointer}.form-field input:focus{background-color:var(--bs-body-bg);border-color:#3c5df3;box-shadow:0 0 0 .25rem rgba(60,93,243,.25);color:var(--bs-body-color);outline:0}.form-field input::-webkit-date-and-time-value{height:1.5em;margin:0;min-width:85px}.form-field input::-webkit-datetime-edit{display:block;padding:0}.form-field input::-moz-placeholder{color:var(--bs-secondary-color);opacity:1}.form-field input::placeholder{color:var(--bs-secondary-color);opacity:1}.form-field input:disabled{background-color:var(--bs-secondary-bg);opacity:1}.form-field input::file-selector-button{background-color:var(--bs-tertiary-bg);border:0 solid;border-color:inherit;border-inline-end-width:1px;border-radius:0;color:var(--bs-body-color);margin:-.375rem -.75rem;margin-inline-end:.75rem;padding:.375rem .75rem;pointer-events:none;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.form-field input::file-selector-button{transition:none}}.form-field input:hover:not(:disabled):not([readonly])::file-selector-button{background-color:var(--bs-secondary-bg)}select{--bs-form-select-bg-img:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--bs-body-bg);background-image:var(--bs-form-select-bg-img),var(--bs-form-select-bg-icon,none);background-position:right .75rem center;background-repeat:no-repeat;background-size:16px 12px;border:1px solid #94a3a1;border-radius:4px;color:var(--bs-body-color);display:block;font-size:1rem;font-weight:400;line-height:1.5;padding:.375rem 2.25rem .375rem .75rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;width:100%}@media (prefers-reduced-motion:reduce){select{transition:none}}select:focus{border-color:#3c5df3;box-shadow:0 0 0 .25rem rgba(247,194,15,.25);outline:0}select[multiple],select[size]:not([size="1"]){background-image:none;padding-right:.75rem}select:disabled{background-color:var(--bs-secondary-bg)}select:-moz-focusring{color:transparent;text-shadow:0 0 0 var(--bs-body-color)}.article-subscribe button,.btn,.button,.community-follow button,.requests-table-toolbar .organization-subscribe button,.split-button button,.subscriptions-subscribe button,.user-profile-actions button,[type=submit]{--bs-btn-padding-x:0.75rem;--bs-btn-padding-y:0.375rem;--bs-btn-font-family: ;--bs-btn-font-size:1rem;--bs-btn-font-weight:400;--bs-btn-line-height:1.5;--bs-btn-color:var(--bs-body-color);--bs-btn-bg:transparent;--bs-btn-border-width:var(--bs-border-width);--bs-btn-border-color:transparent;--bs-btn-border-radius:4px;--bs-btn-hover-border-color:transparent;--bs-btn-box-shadow:inset 0 1px 0 hsla(0,0%,100%,.15),0 1px 1px rgba(0,0,0,.075);--bs-btn-disabled-opacity:0.65;--bs-btn-focus-box-shadow:0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb),.5);background-color:var(--bs-btn-bg);border:var(--bs-btn-border-width) solid var(--bs-btn-border-color);border-radius:var(--bs-btn-border-radius);color:var(--bs-btn-color);cursor:pointer;display:inline-block;font-family:var(--bs-btn-font-family);font-size:var(--bs-btn-font-size);font-weight:var(--bs-btn-font-weight);line-height:var(--bs-btn-line-height);padding:var(--bs-btn-padding-y) var(--bs-btn-padding-x);text-align:center;text-decoration:none;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle}@media (prefers-reduced-motion:reduce){.article-subscribe button,.btn,.button,.community-follow button,.requests-table-toolbar .organization-subscribe button,.split-button button,.subscriptions-subscribe button,.user-profile-actions button,[type=submit]{transition:none}}.article-subscribe button:hover,.btn:hover,.button:hover,.community-follow button:hover,.requests-table-toolbar .organization-subscribe button:hover,.split-button button:hover,.subscriptions-subscribe button:hover,.user-profile-actions button:hover,[type=submit]:hover{background-color:var(--bs-btn-hover-bg);border-color:var(--bs-btn-hover-border-color);color:var(--bs-btn-hover-color)}.article-subscribe button:focus-visible,.btn:focus-visible,.button:focus-visible,.community-follow button:focus-visible,.requests-table-toolbar .organization-subscribe button:focus-visible,.split-button button:focus-visible,.subscriptions-subscribe button:focus-visible,.user-profile-actions button:focus-visible,[type=submit]:focus-visible{background-color:var(--bs-btn-hover-bg);border-color:var(--bs-btn-hover-border-color);box-shadow:var(--bs-btn-focus-box-shadow);color:var(--bs-btn-hover-color);outline:0}.active.button,.active[type=submit],.article-subscribe :not(.btn-check)+button:active,.article-subscribe button.active,.article-subscribe button.show,.article-subscribe button:first-child:active,.btn.active,.btn.show,.btn:first-child:active,.button:first-child:active,.community-follow :not(.btn-check)+button:active,.community-follow button.active,.community-follow button.show,.community-follow button:first-child:active,.requests-table-toolbar .organization-subscribe :not(.btn-check)+button:active,.requests-table-toolbar .organization-subscribe button.active,.requests-table-toolbar .organization-subscribe button.show,.requests-table-toolbar .organization-subscribe button:first-child:active,.show.button,.show[type=submit],.split-button :not(.btn-check)+button:active,.split-button button.active,.split-button button.show,.split-button button:first-child:active,.subscriptions-subscribe :not(.btn-check)+button:active,.subscriptions-subscribe button.active,.subscriptions-subscribe button.show,.subscriptions-subscribe button:first-child:active,.user-profile-actions :not(.btn-check)+button:active,.user-profile-actions button.active,.user-profile-actions button.show,.user-profile-actions button:first-child:active,:not(.btn-check)+.btn:active,:not(.btn-check)+.button:active,:not(.btn-check)+[type=submit]:active,[type=submit]:first-child:active{background-color:var(--bs-btn-active-bg);border-color:var(--bs-btn-active-border-color);color:var(--bs-btn-active-color)}.active.button:focus-visible,.active[type=submit]:focus-visible,.article-subscribe :not(.btn-check)+button:active:focus-visible,.article-subscribe button.active:focus-visible,.article-subscribe button.show:focus-visible,.article-subscribe button:first-child:active:focus-visible,.btn.active:focus-visible,.btn.show:focus-visible,.btn:first-child:active:focus-visible,.button:first-child:active:focus-visible,.community-follow :not(.btn-check)+button:active:focus-visible,.community-follow button.active:focus-visible,.community-follow button.show:focus-visible,.community-follow button:first-child:active:focus-visible,.requests-table-toolbar .organization-subscribe :not(.btn-check)+button:active:focus-visible,.requests-table-toolbar .organization-subscribe button.active:focus-visible,.requests-table-toolbar .organization-subscribe button.show:focus-visible,.requests-table-toolbar .organization-subscribe button:first-child:active:focus-visible,.show.button:focus-visible,.show[type=submit]:focus-visible,.split-button :not(.btn-check)+button:active:focus-visible,.split-button button.active:focus-visible,.split-button button.show:focus-visible,.split-button button:first-child:active:focus-visible,.subscriptions-subscribe :not(.btn-check)+button:active:focus-visible,.subscriptions-subscribe button.active:focus-visible,.subscriptions-subscribe button.show:focus-visible,.subscriptions-subscribe button:first-child:active:focus-visible,.user-profile-actions :not(.btn-check)+button:active:focus-visible,.user-profile-actions button.active:focus-visible,.user-profile-actions button.show:focus-visible,.user-profile-actions button:first-child:active:focus-visible,:not(.btn-check)+.btn:active:focus-visible,:not(.btn-check)+.button:active:focus-visible,:not(.btn-check)+[type=submit]:active:focus-visible,[type=submit]:first-child:active:focus-visible{box-shadow:var(--bs-btn-focus-box-shadow)}.article-subscribe button.disabled,.article-subscribe button:disabled,.article-subscribe fieldset:disabled button,.btn.disabled,.btn:disabled,.button:disabled,.community-follow button.disabled,.community-follow button:disabled,.community-follow fieldset:disabled button,.disabled.button,.disabled[type=submit],.requests-table-toolbar .organization-subscribe button.disabled,.requests-table-toolbar .organization-subscribe button:disabled,.requests-table-toolbar .organization-subscribe fieldset:disabled button,.split-button button.disabled,.split-button button:disabled,.split-button fieldset:disabled button,.subscriptions-subscribe button.disabled,.subscriptions-subscribe button:disabled,.subscriptions-subscribe fieldset:disabled button,.user-profile-actions button.disabled,.user-profile-actions button:disabled,.user-profile-actions fieldset:disabled button,[type=submit]:disabled,fieldset:disabled .article-subscribe button,fieldset:disabled .btn,fieldset:disabled .button,fieldset:disabled .community-follow button,fieldset:disabled .requests-table-toolbar .organization-subscribe button,fieldset:disabled .split-button button,fieldset:disabled .subscriptions-subscribe button,fieldset:disabled .user-profile-actions button,fieldset:disabled [type=submit]{background-color:var(--bs-btn-disabled-bg);border-color:var(--bs-btn-disabled-border-color);color:var(--bs-btn-disabled-color);opacity:var(--bs-btn-disabled-opacity);pointer-events:none}.btn-secondary,.button-secondary,.split-button button:hover,input[type=submit]{--bs-btn-color:#fff;--bs-btn-bg:#3c5df3;--bs-btn-border-color:#3c5df3;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#334fcf;--bs-btn-hover-border-color:#304ac2;--bs-btn-focus-shadow-rgb:89,117,245;--bs-btn-active-color:#fff;--bs-btn-active-bg:#304ac2;--bs-btn-active-border-color:#2d46b6;--bs-btn-active-shadow:inset 0 3px 5px rgba(0,0,0,.125);--bs-btn-disabled-color:#fff;--bs-btn-disabled-bg:#3c5df3;--bs-btn-disabled-border-color:#3c5df3}.article-subscribe button,.btn-outline-secondary,.community-follow button,.split-button button,.subscriptions-subscribe button{--bs-btn-color:#3c5df3;--bs-btn-border-color:#3c5df3;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#3c5df3;--bs-btn-hover-border-color:#3c5df3;--bs-btn-focus-shadow-rgb:60,93,243;--bs-btn-active-color:#fff;--bs-btn-active-bg:#3c5df3;--bs-btn-active-border-color:#3c5df3;--bs-btn-active-shadow:inset 0 3px 5px rgba(0,0,0,.125);--bs-btn-disabled-color:#3c5df3;--bs-btn-disabled-bg:transparent;--bs-btn-disabled-border-color:#3c5df3;--bs-gradient:none}.user-profile-actions button{--bs-btn-color:#ecf0f1;--bs-btn-border-color:#ecf0f1;--bs-btn-hover-color:#000;--bs-btn-hover-bg:#ecf0f1;--bs-btn-hover-border-color:#ecf0f1;--bs-btn-focus-shadow-rgb:236,240,241;--bs-btn-active-color:#000;--bs-btn-active-bg:#ecf0f1;--bs-btn-active-border-color:#ecf0f1;--bs-btn-active-shadow:inset 0 3px 5px rgba(0,0,0,.125);--bs-btn-disabled-color:#ecf0f1;--bs-btn-disabled-bg:transparent;--bs-btn-disabled-border-color:#ecf0f1;--bs-gradient:none}.btn-link{--bs-btn-font-weight:400;--bs-btn-color:var(--bs-link-color);--bs-btn-bg:transparent;--bs-btn-border-color:transparent;--bs-btn-hover-color:var(--bs-link-hover-color);--bs-btn-hover-border-color:transparent;--bs-btn-active-color:var(--bs-link-hover-color);--bs-btn-active-border-color:transparent;--bs-btn-disabled-color:#6c757d;--bs-btn-disabled-border-color:transparent;--bs-btn-box-shadow:0 0 0 #000;--bs-btn-focus-shadow-rgb:210,165,13;text-decoration:underline}.btn-link:focus-visible{color:var(--bs-btn-color)}.btn-link:hover{color:var(--bs-btn-hover-color)}.btn-lg{--bs-btn-padding-y:0.5rem;--bs-btn-padding-x:1rem;--bs-btn-font-size:1.25rem;--bs-btn-border-radius:6px}.article-subscribe button,.btn-sm,.community-follow button,.split-button button,.subscriptions-subscribe button{--bs-btn-padding-y:0.25rem;--bs-btn-padding-x:0.5rem;--bs-btn-font-size:0.875rem;--bs-btn-border-radius:4px}.fade{transition:opacity .15s linear}@media (prefers-reduced-motion:reduce){.fade{transition:none}}.fade:not(.show){opacity:0}.collapse:not(.show){display:none}.collapsing{height:0;overflow:hidden;transition:height .1s ease}@media (prefers-reduced-motion:reduce){.collapsing{transition:none}}.collapsing.collapse-horizontal{height:auto;transition:width .35s ease;width:0}@media (prefers-reduced-motion:reduce){.collapsing.collapse-horizontal{transition:none}}.dropdown,.dropdown-center,.dropend,.dropstart,.dropup,.dropup-center{position:relative}.dropdown-toggle{white-space:nowrap}.dropdown-toggle:after{border-bottom:0;border-left:.3em solid transparent;border-right:.3em solid transparent;border-top:.3em solid;content:"";display:inline-block;margin-left:.255em;vertical-align:.255em}.dropdown-toggle:empty:after{margin-left:0}.dropdown-menu{--bs-dropdown-zindex:1000;--bs-dropdown-min-width:10rem;--bs-dropdown-padding-x:0;--bs-dropdown-padding-y:0.5rem;--bs-dropdown-spacer:0.125rem;--bs-dropdown-font-size:1rem;--bs-dropdown-color:var(--bs-body-color);--bs-dropdown-bg:var(--bs-body-bg);--bs-dropdown-border-color:var(--bs-border-color-translucent);--bs-dropdown-border-radius:var(--bs-border-radius);--bs-dropdown-border-width:var(--bs-border-width);--bs-dropdown-inner-border-radius:calc(var(--bs-border-radius) - var(--bs-border-width));--bs-dropdown-divider-bg:var(--bs-border-color-translucent);--bs-dropdown-divider-margin-y:0.5rem;--bs-dropdown-box-shadow:var(--bs-box-shadow);--bs-dropdown-link-color:var(--bs-body-color);--bs-dropdown-link-hover-color:var(--bs-body-color);--bs-dropdown-link-hover-bg:var(--bs-tertiary-bg);--bs-dropdown-link-active-color:#fff;--bs-dropdown-link-active-bg:#3c5df3;--bs-dropdown-link-disabled-color:var(--bs-tertiary-color);--bs-dropdown-item-padding-x:1rem;--bs-dropdown-item-padding-y:0.25rem;--bs-dropdown-header-color:#6c757d;--bs-dropdown-header-padding-x:1rem;--bs-dropdown-header-padding-y:0.5rem;background-clip:padding-box;background-color:var(--bs-dropdown-bg);border:var(--bs-dropdown-border-width) solid var(--bs-dropdown-border-color);border-radius:var(--bs-dropdown-border-radius);color:var(--bs-dropdown-color);font-size:var(--bs-dropdown-font-size);list-style:none;margin:0;min-width:var(--bs-dropdown-min-width);padding:var(--bs-dropdown-padding-y) var(--bs-dropdown-padding-x);z-index:var(--bs-dropdown-zindex)}.dropdown-menu-end{--bs-position:end}.dropup .dropdown-toggle:after{border-bottom:.3em solid;border-left:.3em solid transparent;border-right:.3em solid transparent;border-top:0;content:"";display:inline-block;margin-left:.255em;vertical-align:.255em}.dropup .dropdown-toggle:empty:after{margin-left:0}.dropend .dropdown-toggle:after{border-bottom:.3em solid transparent;border-left:.3em solid;border-right:0;border-top:.3em solid transparent;content:"";display:inline-block;margin-left:.255em;vertical-align:.255em}.dropend .dropdown-toggle:empty:after{margin-left:0}.dropend .dropdown-toggle:after{vertical-align:0}.dropstart .dropdown-toggle:after{content:"";display:inline-block;display:none;margin-left:.255em;vertical-align:.255em}.dropstart .dropdown-toggle:before{border-bottom:.3em solid transparent;border-right:.3em solid;border-top:.3em solid transparent;content:"";display:inline-block;margin-right:.255em;vertical-align:.255em}.dropstart .dropdown-toggle:empty:after{margin-left:0}.dropstart .dropdown-toggle:before{vertical-align:0}.dropdown-item{background-color:transparent;border:0;border-radius:var(--bs-dropdown-item-border-radius,0);clear:both;color:var(--bs-dropdown-link-color);display:block;font-weight:400;padding:var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);text-align:inherit;text-decoration:none;white-space:nowrap;width:100%}.dropdown-item:focus,.dropdown-item:hover{background-color:var(--bs-dropdown-link-hover-bg);color:var(--bs-dropdown-link-hover-color)}.dropdown-item.active,.dropdown-item:active{background-color:var(--bs-dropdown-link-active-bg);color:var(--bs-dropdown-link-active-color);text-decoration:none}.dropdown-item.disabled,.dropdown-item:disabled{background-color:transparent;color:var(--bs-dropdown-link-disabled-color);pointer-events:none}.dropdown-menu.show{display:block}.nav{--bs-nav-link-padding-x:1rem;--bs-nav-link-padding-y:0.5rem;--bs-nav-link-font-weight: ;--bs-nav-link-color:var(--bs-link-color);--bs-nav-link-hover-color:var(--bs-link-hover-color);--bs-nav-link-disabled-color:var(--bs-secondary-color);display:flex;flex-wrap:wrap;list-style:none;margin-bottom:0;padding-left:0}.nav-link{background:none;border:0;color:var(--bs-nav-link-color);display:block;font-size:var(--bs-nav-link-font-size);font-weight:var(--bs-nav-link-font-weight);padding:var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);text-decoration:none;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out}@media (prefers-reduced-motion:reduce){.nav-link{transition:none}}.nav-link:focus,.nav-link:hover{color:var(--bs-nav-link-hover-color)}.nav-link:focus-visible{box-shadow:0 0 0 .25rem rgba(247,194,15,.25);outline:0}.nav-link.disabled,.nav-link:disabled{color:var(--bs-nav-link-disabled-color);cursor:default;pointer-events:none}.navbar{--bs-navbar-padding-x:0;--bs-navbar-padding-y:0.5rem;--bs-navbar-color:rgba(var(--bs-emphasis-color-rgb),0.65);--bs-navbar-hover-color:rgba(var(--bs-emphasis-color-rgb),0.8);--bs-navbar-disabled-color:rgba(var(--bs-emphasis-color-rgb),0.3);--bs-navbar-active-color:rgba(var(--bs-emphasis-color-rgb),1);--bs-navbar-brand-padding-y:0.3125rem;--bs-navbar-brand-margin-end:1rem;--bs-navbar-brand-font-size:1.25rem;--bs-navbar-brand-color:rgba(var(--bs-emphasis-color-rgb),1);--bs-navbar-brand-hover-color:rgba(var(--bs-emphasis-color-rgb),1);--bs-navbar-nav-link-padding-x:0.5rem;--bs-navbar-toggler-padding-y:0.25rem;--bs-navbar-toggler-padding-x:0.75rem;--bs-navbar-toggler-font-size:1.25rem;--bs-navbar-toggler-icon-bg:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(33, 37, 41, 0.75)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");--bs-navbar-toggler-border-color:rgba(var(--bs-emphasis-color-rgb),0.15);--bs-navbar-toggler-border-radius:4px;--bs-navbar-toggler-focus-width:0.25rem;--bs-navbar-toggler-transition:box-shadow 0.15s ease-in-out;flex-wrap:wrap;padding:var(--bs-navbar-padding-y) var(--bs-navbar-padding-x);position:relative}.navbar,.navbar>.container,.navbar>.container-fluid{align-items:center;display:flex;justify-content:space-between}.navbar>.container,.navbar>.container-fluid{flex-wrap:inherit}.navbar-nav{--bs-nav-link-padding-x:0;--bs-nav-link-padding-y:0.5rem;--bs-nav-link-font-weight: ;--bs-nav-link-color:var(--bs-navbar-color);--bs-nav-link-hover-color:var(--bs-navbar-hover-color);--bs-nav-link-disabled-color:var(--bs-navbar-disabled-color);display:flex;flex-direction:column;list-style:none;margin-bottom:0;padding-left:0}.navbar-nav .nav-link.active,.navbar-nav .nav-link.show{color:var(--bs-navbar-active-color)}.navbar-nav .dropdown-menu{position:static}.navbar-collapse{align-items:center;flex-basis:100%;flex-grow:1}.navbar-toggler{background-color:transparent;border:var(--bs-border-width) solid var(--bs-navbar-toggler-border-color);border-radius:var(--bs-navbar-toggler-border-radius);color:var(--bs-navbar-color);font-size:var(--bs-navbar-toggler-font-size);line-height:1;padding:var(--bs-navbar-toggler-padding-y) var(--bs-navbar-toggler-padding-x);transition:var(--bs-navbar-toggler-transition)}@media (prefers-reduced-motion:reduce){.navbar-toggler{transition:none}}.navbar-toggler:hover{text-decoration:none}.navbar-toggler:focus{box-shadow:0 0 0 var(--bs-navbar-toggler-focus-width);outline:0;text-decoration:none}@media (min-width:1200px){.navbar-expand-xl{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand-xl .navbar-nav{flex-direction:row}.navbar-expand-xl .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-xl .navbar-nav .nav-link{padding-left:var(--bs-navbar-nav-link-padding-x);padding-right:var(--bs-navbar-nav-link-padding-x)}.navbar-expand-xl .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-xl .navbar-toggler{display:none}.navbar-expand-xl .offcanvas{background-color:transparent!important;border:0!important;flex-grow:1;height:auto!important;position:static;transform:none!important;transition:none;visibility:visible!important;width:auto!important;z-index:auto}}.card{--bs-card-spacer-y:1rem;--bs-card-spacer-x:1rem;--bs-card-title-spacer-y:0.5rem;--bs-card-title-color: ;--bs-card-subtitle-color: ;--bs-card-border-width:var(--bs-border-width);--bs-card-border-color:var(--bs-border-color-translucent);--bs-card-border-radius:var(--bs-border-radius);--bs-card-box-shadow: ;--bs-card-inner-border-radius:calc(var(--bs-border-radius) - var(--bs-border-width));--bs-card-cap-padding-y:0.5rem;--bs-card-cap-padding-x:1rem;--bs-card-cap-bg:rgba(var(--bs-body-color-rgb),0.03);--bs-card-cap-color: ;--bs-card-height: ;--bs-card-color: ;--bs-card-bg:var(--bs-body-bg);--bs-card-img-overlay-padding:1rem;--bs-card-group-margin:0.75rem;color:var(--bs-body-color);display:flex;flex-direction:column;height:var(--bs-card-height);min-width:0;position:relative;word-wrap:break-word;background-clip:border-box;background-color:var(--bs-card-bg);border:var(--bs-card-border-width) solid var(--bs-card-border-color);border-radius:var(--bs-card-border-radius)}.card>hr{margin-left:0;margin-right:0}.card>.list-group{border-bottom:inherit;border-top:inherit}.card>.list-group:first-child{border-top-left-radius:var(--bs-card-inner-border-radius);border-top-right-radius:var(--bs-card-inner-border-radius);border-top-width:0}.card>.list-group:last-child{border-bottom-left-radius:var(--bs-card-inner-border-radius);border-bottom-right-radius:var(--bs-card-inner-border-radius);border-bottom-width:0}.card-body{color:var(--bs-card-color);flex:1 1 auto;padding:var(--bs-card-spacer-y) var(--bs-card-spacer-x)}.card-title{color:var(--bs-card-title-color);margin-bottom:var(--bs-card-title-spacer-y)}.list-group{--bs-list-group-color:var(--bs-body-color);--bs-list-group-bg:var(--bs-body-bg);--bs-list-group-border-color:var(--bs-border-color);--bs-list-group-border-width:var(--bs-border-width);--bs-list-group-border-radius:var(--bs-border-radius);--bs-list-group-item-padding-x:1rem;--bs-list-group-item-padding-y:0.5rem;--bs-list-group-action-color:var(--bs-secondary-color);--bs-list-group-action-hover-color:var(--bs-emphasis-color);--bs-list-group-action-hover-bg:var(--bs-tertiary-bg);--bs-list-group-action-active-color:var(--bs-body-color);--bs-list-group-action-active-bg:var(--bs-secondary-bg);--bs-list-group-disabled-color:var(--bs-secondary-color);--bs-list-group-disabled-bg:var(--bs-body-bg);--bs-list-group-active-color:#fff;--bs-list-group-active-bg:#3c5df3;--bs-list-group-active-border-color:#3c5df3;border-radius:var(--bs-list-group-border-radius);display:flex;flex-direction:column;margin-bottom:0;padding-left:0}.list-group-item{background-color:var(--bs-list-group-bg);border:var(--bs-list-group-border-width) solid var(--bs-list-group-border-color);color:var(--bs-list-group-color);display:block;padding:var(--bs-list-group-item-padding-y) var(--bs-list-group-item-padding-x);position:relative;text-decoration:none}.list-group-item:first-child{border-top-left-radius:inherit;border-top-right-radius:inherit}.list-group-item:last-child{border-bottom-left-radius:inherit;border-bottom-right-radius:inherit}.list-group-item.disabled,.list-group-item:disabled{background-color:var(--bs-list-group-disabled-bg);color:var(--bs-list-group-disabled-color);pointer-events:none}.list-group-item.active{background-color:var(--bs-list-group-active-bg);border-color:var(--bs-list-group-active-border-color);color:var(--bs-list-group-active-color);z-index:2}.list-group-item+.list-group-item{border-top-width:0}.list-group-item+.list-group-item.active{border-top-width:var(--bs-list-group-border-width);margin-top:calc(var(--bs-list-group-border-width)*-1)}.list-group-flush{border-radius:0}.list-group-flush>.list-group-item{border-width:0 0 var(--bs-list-group-border-width)}.list-group-flush>.list-group-item:last-child{border-bottom-width:0}.clearfix:after{clear:both;content:"";display:block}.icon-link{align-items:center;backface-visibility:hidden;display:inline-flex;gap:.375rem;text-decoration-color:rgba(var(--bs-link-color-rgb),var(--bs-link-opacity,.5));text-underline-offset:.25em}.icon-link>.bi{flex-shrink:0;height:1em;width:1em;fill:currentcolor;transition:transform .2s ease-in-out}@media (prefers-reduced-motion:reduce){.icon-link>.bi{transition:none}}.icon-link-hover:focus-visible>.bi,.icon-link-hover:hover>.bi{transform:var(--bs-icon-link-transform,translate3d(.25em,0,0))}.ratio{position:relative;width:100%}.ratio:before{content:"";display:block;padding-top:var(--bs-aspect-ratio)}.ratio>*{height:100%;left:0;position:absolute;top:0;width:100%}.fixed-top{top:0}.fixed-bottom,.fixed-top{left:0;position:fixed;right:0;z-index:1030}.fixed-bottom{bottom:0}.sticky-top{position:sticky;top:0;z-index:1020}.vstack{align-self:stretch;display:flex;flex:1 1 auto;flex-direction:column}.visibility-hidden,.visually-hidden{height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;width:1px!important;clip:rect(0,0,0,0)!important;border:0!important;white-space:nowrap!important}.visibility-hidden:not(caption),.visually-hidden:not(caption){position:absolute!important}.vr{align-self:stretch;background-color:currentcolor;display:inline-block;min-height:1em;opacity:.25;width:var(--bs-border-width)}.d-block{display:block!important}.d-flex{display:flex!important}.d-none{display:none!important}.shadow{box-shadow:var(--bs-box-shadow)!important}.position-relative{position:relative!important}.position-sticky{position:sticky!important}.top-0{top:0!important}.border{border:var(--bs-border-width) var(--bs-border-style) var(--bs-border-color)!important}.border-0{border:0!important}.border-top{border-top:var(--bs-border-width) var(--bs-border-style) var(--bs-border-color)!important}.border-end{border-right:var(--bs-border-width) var(--bs-border-style) var(--bs-border-color)!important}.border-bottom{border-bottom:var(--bs-border-width) var(--bs-border-style) var(--bs-border-color)!important}.border-start{border-left:var(--bs-border-width) var(--bs-border-style) var(--bs-border-color)!important}.w-100{width:100%!important}.h-100{height:100%!important}.flex-column{flex-direction:column!important}.flex-wrap{flex-wrap:wrap!important}.justify-content-start{justify-content:flex-start!important}.justify-content-end{justify-content:flex-end!important}.justify-content-center{justify-content:center!important}.justify-content-between{justify-content:space-between!important}.align-items-center{align-items:center!important}.order-1{order:1!important}.m-1{margin:7.5px!important}.mx-auto{margin-left:auto!important;margin-right:auto!important}.mt-0{margin-top:0!important}.mt-3{margin-top:30px!important}.mb-0{margin-bottom:0!important}.mb-1{margin-bottom:7.5px!important}.mb-2{margin-bottom:15px!important}.mb-3{margin-bottom:30px!important}.p-0{padding:0!important}.p-1{padding:7.5px!important}.p-2{padding:15px!important}.p-3{padding:30px!important}.px-0{padding-left:0!important;padding-right:0!important}.px-2{padding-left:15px!important;padding-right:15px!important}.px-3{padding-left:30px!important;padding-right:30px!important}.py-0{padding-bottom:0!important;padding-top:0!important}.py-1{padding-bottom:7.5px!important;padding-top:7.5px!important}.py-2{padding-bottom:15px!important;padding-top:15px!important}.py-3{padding-bottom:30px!important;padding-top:30px!important}.pt-2{padding-top:15px!important}.pb-1{padding-bottom:7.5px!important}.pb-3{padding-bottom:30px!important}.ps-0{padding-left:0!important}.gap-1{gap:7.5px!important}.gap-2{gap:15px!important}.row-gap-3{row-gap:30px!important}.fs-1{font-size:calc(1.375rem + 1.5vw)!important}.fw-bold{font-weight:700!important}.lh-1{line-height:1!important}.text-center{text-align:center!important}.text-decoration-none{text-decoration:none!important}.text-wrap{white-space:normal!important}.text-secondary{--bs-text-opacity:1;color:rgba(var(--bs-secondary-rgb),var(--bs-text-opacity))!important}.text-dark{--bs-text-opacity:1;color:rgba(var(--bs-dark-rgb),var(--bs-text-opacity))!important}.text-white{--bs-text-opacity:1;color:rgba(var(--bs-white-rgb),var(--bs-text-opacity))!important}.bg-secondary-light{--bs-bg-opacity:1;background-color:rgba(var(--bs-secondary-light-rgb),var(--bs-bg-opacity))!important}.user-select-none{-webkit-user-select:none!important;-moz-user-select:none!important;user-select:none!important}.rounded{border-radius:var(--bs-border-radius)!important}.rounded-pill{border-radius:var(--bs-border-radius-pill)!important}.visible{visibility:visible!important}.invisible{visibility:hidden!important}.z-1{z-index:1!important}@media (min-width:767px){.gap-md-3{gap:30px!important}}@media (min-width:980px){.d-lg-inline{display:inline!important}.d-lg-flex{display:flex!important}.d-lg-none{display:none!important}.justify-content-lg-end{justify-content:flex-end!important}.order-lg-0{order:0!important}.mt-lg-0{margin-top:0!important}.mt-lg-1{margin-top:7.5px!important}.mb-lg-0{margin-bottom:0!important}.mb-lg-2{margin-bottom:15px!important}.ms-lg-auto{margin-left:auto!important}.py-lg-1{padding-bottom:7.5px!important;padding-top:7.5px!important}.py-lg-4{padding-bottom:60px!important;padding-top:60px!important}.gap-lg-1{gap:7.5px!important}}@media (min-width:1200px){.d-xl-flex{display:flex!important}.mb-xl-0{margin-bottom:0!important}.ms-xl-4{margin-left:60px!important}.py-xl-3{padding-bottom:30px!important;padding-top:30px!important}.pe-xl-4{padding-right:60px!important}.fs-1{font-size:2.5rem!important}}


/* ================================================================
   4. THEME CHROME
   ================================================================ */

/* ------------------------------------------------------------
   4.0  Bootstrap variable bridge
   Re-points Bootstrap's own custom properties at brand tokens.
   Must sit AFTER the vendor block (section 3) to win.
   ------------------------------------------------------------ */

:root {
  --bs-body-font-family: var(--rw-font-sans);
  --bs-body-color: var(--rw-text-body);
  --bs-body-color-rgb: 35, 45, 69;
  --bs-link-color: var(--rw-text);
  --bs-link-color-rgb: 2, 9, 23;
  --bs-link-hover-color: var(--rw-action);
  --bs-link-hover-color-rgb: 151, 96, 10;
  --bs-border-color: var(--rw-ink-150);
  --bs-border-radius: var(--rw-radius);
  --bs-border-radius-sm: var(--rw-radius);
  --bs-border-radius-lg: var(--rw-radius);
  --bs-secondary-rgb: 151, 96, 10;
  --bs-secondary-light-rgb: 245, 245, 240;
  --bs-dark-rgb: 2, 9, 23;
  --bs-focus-ring-color: rgba(253, 173, 13, 0.5);
  --bs-code-color: var(--rw-ink-800); /* replaces Bootstrap's pink */
}


/* ------------------------------------------------------------
   4.1  Base and type utilities
   Heading sizes live in 5.1 (Zendesk base) so they are not
   overridden by it. Only template utility classes live here.
   ------------------------------------------------------------ */

html {
  background: var(--rw-paper);
  font-size: 100%; /* 16px root. Was 20px before the rebrand. */
  scroll-padding-top: 24px;
}

body {
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Footer sits at the bottom of the window on short pages
     (no-results search, 404) instead of floating mid-screen. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh; /* mobile: ignores the collapsing address bar */
}

body > main {
  flex: 1 0 auto;
}

.main-header.scroll,
body,
header {
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 2000px;
}

::selection {
  background: var(--rw-signal-200);
  color: var(--rw-ink-950);
}

a {
  color: var(--rw-text);
  text-decoration: none;
}

a:hover {
  color: var(--rw-action);
}

ol {
  list-style-position: inside;
  padding-left: 0;
}

.title-h1 {
  font-family: var(--rw-font-display);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.title-h3 {
  font-family: var(--rw-font-display);
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 1.2;
}

.title-p {
  font-size: 1.125rem;
  line-height: 1.4;
}

.text-smaller {
  font-size: 1rem !important;
}

.split-button button,
.text-smallest {
  font-size: 0.875rem !important;
}

.animate-on-scroll {
  transition: all 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
  transition-delay: 0.1s;
}

/* Eyebrow: the brand's tracked uppercase label (Space Grotesk 600).
   Signal-on-light on light surfaces; base Signal on Ink. */
.rw-eyebrow {
  color: var(--rw-signal-on-light);
  font-family: var(--rw-font-display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  line-height: 1.25;
  margin: 0 0 16px;
  text-transform: uppercase;
}

.rw-eyebrow--on-ink {
  color: var(--rw-signal);
}

/* Dark surfaces: text flips to Paper */
.bg-gradient-darkblue-new,
.profile-header {
  background: var(--rw-ink-900);
}

.dark-background,
.dark-background .breadcrumbs a,
.dark-background .h1,
.dark-background .h2,
.dark-background .h3,
.dark-background .h4,
.dark-background .h5,
.dark-background h1,
.dark-background h2,
.dark-background h3,
.dark-background h4,
.dark-background h5,
.dark-background li,
.dark-background p,
.dark-background span,
.dark-background strong,
.profile-header,
.profile-header .breadcrumbs a,
.profile-header .h1,
.profile-header .h2,
.profile-header .h3,
.profile-header .h4,
.profile-header .h5,
.profile-header h1,
.profile-header h2,
.profile-header h3,
.profile-header h4,
.profile-header h5,
.profile-header li,
.profile-header p,
.profile-header span,
.profile-header strong {
  color: var(--rw-paper);
}

.rounded-corners-md,
.rounded-corners-md > img {
  border-radius: var(--rw-radius);
}

/* Callout backgrounds: see 5.14 Brand refinements (callout boxes). */


/* ------------------------------------------------------------
   4.2  Buttons
   Primary = base Signal with Ink text (brand rule: fills and
   buttons keep base Signal, never the deepened tint).
   Secondary = Ink outline. On Ink surfaces = Paper outline.
   ------------------------------------------------------------ */

.article-subscribe button,
.btn,
.button,
.community-follow button,
.requests-table-toolbar .organization-subscribe button,
.split-button button,
.subscriptions-subscribe button,
.user-profile-actions button,
[type="submit"] {
  --bs-btn-font-family: var(--rw-font-sans);
  --bs-btn-font-weight: 500;
  --bs-btn-border-radius: var(--rw-radius);
  --bs-btn-padding-x: 1.25rem;
  --bs-btn-padding-y: 0.625rem;
  font-weight: 500;
}

.article-subscribe button:not(.btn-link),
.btn:not(.btn-link),
.button:not(.btn-link),
.community-follow button:not(.btn-link),
.requests-table-toolbar .organization-subscribe button:not(.btn-link),
.split-button button:not(.btn-link),
.subscriptions-subscribe button:not(.btn-link),
.user-profile-actions button:not(.btn-link),
[type="submit"]:not(.btn-link) {
  min-width: 120px;
}

.article-subscribe button:hover,
.btn-link,
.btn:hover,
.button:hover,
.community-follow button:hover,
.requests-table-toolbar .organization-subscribe button:hover,
.split-button button:hover,
.subscriptions-subscribe button:hover,
.user-profile-actions button:hover,
[type="submit"]:hover {
  text-decoration: none;
}

/* Primary (Bootstrap "secondary" is the class the theme uses for CTAs) */
.btn-secondary,
.button-secondary,
input[type="submit"] {
  --bs-btn-color: var(--rw-ink-950);
  --bs-btn-bg: var(--rw-signal);
  --bs-btn-border-color: var(--rw-signal);
  --bs-btn-hover-color: var(--rw-ink-950);
  --bs-btn-hover-bg: var(--rw-signal-600);
  --bs-btn-hover-border-color: var(--rw-signal-600);
  --bs-btn-active-color: var(--rw-ink-950);
  --bs-btn-active-bg: var(--rw-signal-600);
  --bs-btn-active-border-color: var(--rw-signal-600);
  --bs-btn-disabled-color: var(--rw-ink-950);
  --bs-btn-disabled-bg: var(--rw-signal);
  --bs-btn-disabled-border-color: var(--rw-signal);
}

/* Secondary: Ink outline */
.article-subscribe button,
.btn-outline-secondary,
.community-follow button,
.requests-table-toolbar .organization-subscribe button,
.split-button button,
.subscriptions-subscribe button {
  --bs-btn-color: var(--rw-ink-950);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--rw-ink-950);
  --bs-btn-hover-color: var(--rw-paper);
  --bs-btn-hover-bg: var(--rw-ink-950);
  --bs-btn-hover-border-color: var(--rw-ink-950);
  --bs-btn-active-color: var(--rw-paper);
  --bs-btn-active-bg: var(--rw-ink-950);
  --bs-btn-active-border-color: var(--rw-ink-950);
  --bs-btn-disabled-color: var(--rw-ink-950);
  --bs-btn-disabled-border-color: var(--rw-ink-950);
}

/* Secondary on Ink surfaces: Paper outline */
.rw-btn-outline-on-ink {
  --bs-btn-color: var(--rw-paper);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--rw-paper);
  --bs-btn-hover-color: var(--rw-ink-950);
  --bs-btn-hover-bg: var(--rw-paper);
  --bs-btn-hover-border-color: var(--rw-paper);
  --bs-btn-active-color: var(--rw-ink-950);
  --bs-btn-active-bg: var(--rw-paper);
  --bs-btn-active-border-color: var(--rw-paper);
}

.article-subscribe button,
.btn-sm,
.community-follow button,
.split-button button,
.subscriptions-subscribe button {
  padding: 0.375em 1em !important;
}

.article-subscribe button.ps-0,
.btn-sm.ps-0,
.community-follow button.ps-0,
.split-button button.ps-0,
.subscriptions-subscribe button.ps-0 {
  padding-left: 0 !important;
}

/* Ghost link ("View all >", "Learn more >").
   Signal-on-light on light surfaces, base Signal on Ink. */
.btn-link,
.btn-link.text-dark {
  color: var(--rw-action) !important;
  font-weight: 500;
  padding-left: 0;
  padding-right: 0;
}

.btn-link:hover,
.btn-link.text-dark:hover {
  color: var(--rw-action-hover) !important;
}

.btn-link:after {
  border-color: currentColor;
  border-style: solid;
  border-width: 0 1.5px 1.5px 0;
  content: "";
  display: inline-block;
  height: 0.4em;
  margin-left: 8px;
  transform: translateY(-0.1em) rotate(-45deg);
  transition: transform 0.12s ease;
  width: 0.4em;
}

.btn-link:focus-within:after,
.btn-link:hover:after {
  transform: translate(3px, -0.1em) rotate(-45deg);
}

.dark-background .btn-link:not(.card-btn),
.profile-header .btn-link:not(.card-btn) {
  color: var(--rw-signal) !important;
}

@media (prefers-reduced-motion: reduce) {
  .btn-link:after {
    transition: none;
  }
}

@media (max-width: 766.98px) {
  .action-buttons .btn,
  .action-buttons .button,
  .action-buttons [type="submit"] {
    text-align: center;
    width: 100%;
  }
}


/* ------------------------------------------------------------
   4.3  Focus
   Brand rule: a 2px Signal ring with a 2px offset on keyboard focus.
   Signal follows the backdrop, as the guidelines do for Signal text:
     Paper / Bone surfaces -> deepened tint #97600A (5.3:1 / 4.8:1,
                              clears the 3:1 WCAG needs for focus)
     Ink surfaces          -> base Signal #FDAD0D (10.6:1)
   !important is deliberate: no component may suppress focus.
   ------------------------------------------------------------ */

:focus-visible {
  box-shadow: none !important;
  outline: 2px solid var(--rw-signal-on-light) !important;
  outline-offset: 2px !important;
}

.rw-hero :focus-visible,
.dark-background :focus-visible,
.profile-header :focus-visible,
.rw-cta :focus-visible,
.main-footer :focus-visible,
.rw-walkthrough-note :focus-visible {
  outline-color: var(--rw-signal) !important;
}

@media (min-width: 980px) {
  body:has(.rw-hero) .main-header :focus-visible {
    outline-color: var(--rw-signal) !important;
  }
}

/* Back-to-top moves focus to the content; no ring on that container */
#main-content:focus-visible {
  outline: none !important;
}


/* ------------------------------------------------------------
   4.4  Site header
   Default (every page, every width): Paper bar, dark wordmark,
   in normal document flow.
   Homepage at desktop width: transparent over the Ink hero with
   the light wordmark. Detected with :has(.rw-hero), so no
   template logic is needed. Browsers without :has() simply show
   the Paper bar on the homepage too.
   ------------------------------------------------------------ */

.main-header {
  background: var(--rw-paper);
  border-bottom: 1px solid var(--rw-ink-150);
  position: relative;
  width: 100%;
  z-index: 999;
}

.main-header .navbar {
  min-height: 72px;
  padding: 12px 0;
}

@media (max-width: 766.98px) {
  .main-header .container {
    padding: 0 16px;
  }
}

.rw-logo-link {
  display: inline-flex;
  align-items: center;
}

.rw-logo {
  display: block;
  height: 28px;
  width: auto;
}

.rw-logo--on-ink {
  display: none;
}

.main-header .navbar-toggler {
  align-items: center;
  border: 0;
  border-radius: var(--rw-radius);
  color: var(--rw-ink-950);
  display: none;
  height: 40px;
  justify-content: center;
  padding: 0;
  width: 40px;
}

@media (max-width: 979.98px) {
  .main-header .navbar-toggler {
    display: flex;
  }
}

.main-header .navbar-toggler:focus:not(:focus-visible) {
  box-shadow: none;
}

/* Mobile menu panel */
.main-header .navbar-collapse {
  margin-left: -16px;
  margin-right: -16px;
}

.main-header .navbar-nav {
  background-color: var(--rw-paper);
  border-top: 1px solid var(--rw-ink-150);
  margin-top: 12px;
  max-height: calc(100vh - 72px);
  overflow-y: auto;
  padding: 16px;
}

.main-header .navbar-nav .menu-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.main-header .menu--dropdown {
  list-style: none;
  padding-left: 12px;
}

.main-header .dropdown-item,
.main-header .nav-link {
  border-radius: var(--rw-radius);
  color: var(--rw-ink-950);
  display: block;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.5;
  padding: 10px 12px;
  text-decoration: none;
}

.main-header .dropdown-item:focus,
.main-header .dropdown-item:hover,
.main-header .nav-link:hover {
  background: var(--rw-ink-50);
  color: var(--rw-ink-950);
}

.main-header .menu-item-has-children > a:after {
  border-color: currentColor;
  border-style: solid;
  border-width: 0 1.5px 1.5px 0;
  content: "";
  display: inline-block;
  height: 0.4em;
  margin-left: 8px;
  transform: translateY(-0.2em) rotate(45deg);
  width: 0.4em;
}

/* External-link arrow (Phosphor ArrowUpRight), coloured by currentColor */
.rw-ext {
  background-color: currentColor;
  display: inline-block;
  height: 0.75em;
  margin-left: 4px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M200,64V168a8,8,0,0,1-16,0V83.31L69.66,197.66a8,8,0,0,1-11.32-11.32L172.69,72H88a8,8,0,0,1,0-16H192A8,8,0,0,1,200,64Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M200,64V168a8,8,0,0,1-16,0V83.31L69.66,197.66a8,8,0,0,1-11.32-11.32L172.69,72H88a8,8,0,0,1,0-16H192A8,8,0,0,1,200,64Z'/%3E%3C/svg%3E") center / contain no-repeat;
  vertical-align: 0.05em;
  width: 0.75em;
}

/* Account area: Submit a request (signed out) or the profile menu
   (signed in). Always the last, right-most item. */
.main-header .rw-nav-cta {
  margin-top: 12px;
}

.main-header .rw-nav-cta .btn {
  width: 100%;
}

@media (min-width: 980px) {
  /* Full navigation from 980px (iPad landscape and up). The template
     uses navbar-expand-xl, which this custom Bootstrap build expands
     only at 1200px, and the build has no navbar-expand-lg, so the
     980-1199px range is expanded here. */
  .main-header .navbar {
    flex-wrap: nowrap;
  }

  .main-header .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }

  .main-header .navbar-nav {
    flex-direction: row;
  }

  .main-header .navbar-collapse {
    margin-left: 0;
    margin-right: 0;
  }

  .main-header .navbar-nav {
    align-items: center;
    background: transparent;
    border-top: 0;
    margin-top: 0;
    max-height: none;
    overflow-y: visible;
    padding: 0;
  }

  .main-header .navbar-nav {
    gap: 4px;
  }

  .main-header .rw-nav-cta {
    margin-left: 12px;
    margin-top: 0;
  }

  .main-header .rw-nav-cta .btn {
    width: auto;
  }

  /* Signed-in user menu: hover dropdown card */
  .main-header .navbar-nav .menu-item {
    position: relative;
  }

  .main-header .navbar-nav .menu-item > .menu--dropdown {
    background: var(--rw-paper);
    border: 1px solid var(--rw-ink-150);
    border-radius: var(--rw-radius);
    box-shadow: 0 12px 32px rgba(2, 9, 23, 0.1), 0 4px 8px rgba(2, 9, 23, 0.04);
    display: none;
    left: auto;
    padding: 8px;
    position: absolute;
    right: 0; /* account menu is right-most: open leftwards */
    top: 100%;
    width: 240px !important; /* beats Bootstrap's w-100 on the template's <ul> */
    z-index: 999;
  }

  .main-header .navbar-nav .menu-item:hover > .menu--dropdown,
  .main-header .navbar-nav .menu-item:focus-within > .menu--dropdown,
  .main-header .navbar-nav .menu-item.is-open > .menu--dropdown {
    animation: showMenu 0.15s ease-in 0s 1 normal forwards;
    display: block;
    opacity: 0;
  }

  /* Homepage: transparent header over the Ink hero */
  body:has(.rw-hero) .main-header {
    background: transparent;
    border-bottom-color: rgba(255, 255, 255, 0.08);
    left: 0;
    position: absolute;
    top: 0;
  }

  body:has(.rw-hero) .rw-logo--on-light {
    display: none;
  }

  body:has(.rw-hero) .rw-logo--on-ink {
    display: block;
  }

  body:has(.rw-hero) .main-header .navbar-nav > .menu-item > .nav-link {
    color: var(--rw-paper);
  }

  body:has(.rw-hero) .main-header .navbar-nav > .menu-item > .nav-link:hover {
    background: rgba(255, 255, 255, 0.08);
  }

  body:has(.rw-hero) .main-header .btn-outline-secondary {
    --bs-btn-color: var(--rw-paper);
    --bs-btn-border-color: var(--rw-paper);
    --bs-btn-hover-color: var(--rw-ink-950);
    --bs-btn-hover-bg: var(--rw-paper);
    --bs-btn-hover-border-color: var(--rw-paper);
    --bs-btn-active-color: var(--rw-ink-950);
    --bs-btn-active-bg: var(--rw-paper);
    --bs-btn-active-border-color: var(--rw-paper);
  }
}

@media (prefers-reduced-motion: reduce) {
  .main-header .navbar-nav .menu-item:hover > .menu--dropdown,
  .main-header .navbar-nav .menu-item:focus-within > .menu--dropdown {
    animation: none;
    opacity: 1;
  }
}


/* Account chip (signed in): circular avatar + full-strength name +
   chevron. Reads as "you" rather than as another nav link, without
   becoming a second button beside the Signal action slot. */
.main-header .rw-account > .nav-link {
  gap: 10px !important;
}

.main-header .rw-account .user-avatar {
  background: var(--rw-paper);
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--rw-ink-150);
  flex: none;
  height: 28px;
  object-fit: contain; /* square photos fill it; logo-style avatars stay whole */
  width: 28px;
}

/* Initial avatar: replaces Zendesk's default picture (script.js).
   Bone disc, Ink letter: legible on Paper and over the Ink hero.
   span.-qualified so it beats Zendesk's base .user-avatar rule. */
.main-header .rw-account .rw-avatar-initial,
span.rw-avatar-initial {
  align-items: center;
  background: var(--rw-bone);
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--rw-ink-150);
  color: var(--rw-ink-500); /* quiet: the name beside it carries the identity */
  display: inline-flex !important;
  flex: none;
  font-family: var(--rw-font-display);
  font-weight: 500;
  justify-content: center;
  line-height: 1;
  user-select: none;
}

@media (min-width: 980px) {
  /* Over the Ink hero the disc goes translucent, like the hero's
     topic chips, so it sits in the dark header instead of glowing */
  body:has(.rw-hero) .main-header .rw-account .rw-avatar-initial {
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.62);
  }

  body:has(.rw-hero) .main-header .rw-account .user-avatar {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.24);
  }
}

/* Header tiers (desktop), matching the marketing site:
     navigation  full strength, 15px   (Browse / Integrations / Support, later)
     utilities   muted, 14px           (.rw-nav-util)
     divider                           (.rw-nav-divider)
     account     Sign in as Signal text (.rw-signin), one Signal button,
                 or the profile menu when signed in
   On mobile everything sits in the menu panel at full strength. */
.main-header .rw-nav-divider {
  display: none;
}

.main-header .rw-signin {
  color: var(--rw-signal-on-light);
}

@media (min-width: 980px) {
  .main-header .navbar-nav > .rw-nav-util > .nav-link {
    color: var(--rw-ink-600);
    font-size: 0.875rem;
    padding-left: 10px;
    padding-right: 10px;
  }

  .main-header .navbar-nav > .rw-nav-util > .nav-link:hover {
    background: transparent;
    color: var(--rw-ink-950);
  }

  .main-header .rw-nav-divider {
    align-self: center;
    background: var(--rw-ink-150);
    display: block;
    height: 20px;
    list-style: none;
    margin: 0 12px;
    width: 1px;
  }

  .main-header .rw-nav-divider + .rw-nav-cta {
    margin-left: 0;
  }

  /* Homepage, over the Ink hero */
  body:has(.rw-hero) .main-header .navbar-nav > .rw-nav-util > .nav-link {
    color: rgba(255, 255, 255, 0.72);
  }

  body:has(.rw-hero) .main-header .navbar-nav > .rw-nav-util > .nav-link:hover {
    background: transparent;
    color: var(--rw-paper);
  }

  body:has(.rw-hero) .main-header .rw-nav-divider {
    background: rgba(255, 255, 255, 0.2);
  }

  body:has(.rw-hero) .main-header .rw-signin {
    color: var(--rw-signal);
  }
}

/* ------------------------------------------------------------
   4.5  Homepage hero
   Ink with the brand "Beam" gradient under a 70% Ink veil,
   the same treatment as the marketing homepage. Shorter than
   the marketing hero: a KB hero only needs the question and
   the search field.
   ------------------------------------------------------------ */

.rw-hero {
  background: var(--rw-ink-950) url(/hc/theming_assets/01M3V8CEP9A05EYDDW6R3306M3) center / cover no-repeat;
  color: var(--rw-paper);
  padding: 64px 0 72px;
  position: relative;
}

.rw-hero::before {
  background: rgba(2, 9, 23, 0.7);
  content: "";
  inset: 0;
  position: absolute;
}

.rw-hero > .container {
  position: relative;
}

@media (min-width: 980px) {
  .rw-hero {
    padding: 168px 0 96px; /* 72px header sits over the top */
  }
}

.rw-hero-inner {
  margin: 0 auto;
  max-width: 52rem;
  text-align: center;
}

.rw-hero-title {
  color: var(--rw-paper);
  font-family: var(--rw-font-display);
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.06;
  margin: 0 0 32px;
}

.rw-hero-search {
  margin: 0 auto;
  max-width: 40rem;
}

.rw-hero .search {
  border-color: transparent;
}

.rw-hero .search input[type="search"] {
  height: 56px;
}

.rw-hero-topics {
  margin-top: 32px;
}

.rw-hero-topics-label {
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.875rem;
  margin: 0 0 12px;
}

.popular-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.rw-topic {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--rw-radius);
  color: var(--rw-paper);
  display: inline-flex;
  font-size: 0.875rem;
  line-height: 1.4;
  padding: 8px 14px;
  text-decoration: none;
  transition: background 0.12s ease;
}

.rw-topic:hover {
  background: rgba(255, 255, 255, 0.16);
  color: var(--rw-paper);
}


/* ------------------------------------------------------------
   4.6  Page banner (every page except the homepage)
   Short Bone band holding breadcrumbs and search. Reading pages
   stay light so the answer sits close to the top.
   ------------------------------------------------------------ */

.main-banner {
  position: relative;
}

.main-banner--simple {
  background: var(--rw-bone);
  border-bottom: 1px solid var(--rw-bone-300);
  padding: 20px 0;
}

@media (min-width: 980px) {
  .main-banner--simple {
    padding: 24px 0;
  }
}

.main-banner--simple .search input[type="search"] {
  height: 44px;
}

/* Desktop: breadcrumbs + search stay on screen while reading.
   Mobile is left static: there the band stacks breadcrumbs above
   search and would take a fifth of the screen. */
@media (min-width: 980px) {
  html {
    /* Must stay 0. A page-level scroll-padding tells the browser the
       top 120px is covered, and browsers keep a focused text field out
       of that zone: typing in the sticky search would scroll the page
       up on every keystroke. !important also neutralises an inline
       scroll-padding-top that a script writes onto <html>. */
    scroll-padding-top: 0 !important;
  }

  /* Anchor jumps land below the band: the targets keep clear. */
  .article-body [id],
  .article-body h1,
  .article-body h2,
  .article-body h3,
  .article-body h4 {
    scroll-margin-top: 120px;
  }

  .main-banner--simple {
    position: sticky;
    top: 0;
    z-index: 990; /* under the header's account menu (999) */
  }

  .article-sidebar.position-sticky {
    top: 120px !important; /* overrides Bootstrap .top-0 */
  }
}

/* User profile keeps its Ink band */
.main-banner--simple.profile-header {
  background: var(--rw-ink-900);
  border-bottom: 0;
  padding: 48px 0;
  position: relative;
}


/* ------------------------------------------------------------
   4.7  Cards (homepage categories, category page sections)
   Flat Bone, 8px radius, no shadow, per the brand cards.
   ------------------------------------------------------------ */

.card {
  --bs-card-bg: var(--rw-bone);
  background-color: var(--rw-bone);
  border: 0;
  border-radius: var(--rw-radius);
  box-shadow: none;
}

.card .card-body {
  padding: 32px;
}

.card .card-body:not(.card-body--no-btn) {
  padding-bottom: 72px;
}

.card .card-title {
  color: var(--rw-ink-950);
  font-family: var(--rw-font-sans);
  font-size: 1.125rem;
  font-weight: 500;
}

.card .card-title a {
  color: var(--rw-ink-950);
  text-decoration: none;
}

.card .card-title a:hover {
  color: var(--rw-action);
}

.card .card-btn {
  /* Bottom-right: reads as "go further", and it's larger than a list
     link so it's easy to spot (close to the 18px card title). */
  --bs-btn-font-size: 1.0625rem;
  --bs-btn-font-weight: 500;
  bottom: 28px;
  font-size: 1.0625rem;
  left: auto;
  position: absolute;
  right: 32px;
}

.card .card-btn.btn-sm:not(.px-3) {
  padding-left: 0 !important;
  padding-right: 0 !important;
}


/* Two cards per row on tablets in portrait (767-979px). The custom
   Bootstrap build has no row-cols-md-*, so this is the theme's own. */
@media (min-width: 767px) and (max-width: 979.98px) {
  .rw-row-cols-md-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }
}


/* ------------------------------------------------------------
   4.8  Link lists
   ------------------------------------------------------------ */

:root {
  --preview-bar-display: block;
}

.article-link-items a,
.form .suggestion-list ul a {
  color: var(--rw-text);
  text-decoration: underline;
  text-decoration-color: var(--rw-ink-300);
  text-underline-offset: 3px;
}

.article-link-items a:hover,
.form .suggestion-list ul a:hover {
  color: var(--rw-action);
  text-decoration-color: currentColor;
}

/* Homepage category card order */
[data-rw-platform-name="Shopify"] {
  order: -11;
}
[data-rw-platform-name="BigCommerce"] {
  order: -9;
}
[data-rw-platform-name="GitHub"] {
  order: -8;
}
[data-rw-platform-name="Confluence"] {
  order: -7;
}
[data-rw-platform-name="JIRA"],
[data-rw-platform-name="Jira"] {
  order: -6;
}
[data-rw-platform-name="Bitbucket"] {
  order: -5;
}
[data-rw-platform-name="Trello"] {
  order: -4;
}


/* ------------------------------------------------------------
   4.9  Contact band and footer
   Ink card on Paper (as the marketing CTA), then an Ink footer.
   ------------------------------------------------------------ */

.rw-cta {
  /* Top half matches the page, bottom half is the footer's Ink, so the
     card bridges the two (same device as the marketing site footer). */
  background: linear-gradient(to bottom, var(--rw-paper) 50%, var(--rw-ink-950) 50%);
  padding: 64px 0 0;
}

.rw-cta-inner {
  background: #0d1627; /* marketing CTA card colour (Figma "CTA 1"); sits between ink-950 and ink-900 */
  border-radius: var(--rw-radius);
  padding: 64px 24px;
  text-align: center;
}

@media (min-width: 980px) {
  .rw-cta-inner {
    padding: 88px 48px;
  }
}

.rw-cta-title {
  color: var(--rw-paper);
  font-family: var(--rw-font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.15; /* room between lines when the title wraps on small screens */
  margin: 0 0 16px;
}

.rw-cta-text {
  color: rgba(255, 255, 255, 0.72);
  font-size: 1.0625rem;
  line-height: 1.6;
  margin: 0 auto 32px;
  max-width: 34rem;
}

.rw-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.rw-cta + .main-footer {
  border-top: 0;
}

.main-footer {
  /* Ink band continuing below the CTA card, then the footer panel
     lifted 4% (the marketing site's footer treatment). */
  background:
    linear-gradient(var(--rw-ink-950), var(--rw-ink-950)) top / 100% 88px no-repeat,
    linear-gradient(94.3deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.067) 100%),
    var(--rw-ink-950); /* panel gradient as on the marketing homepage footer */
  color: rgba(255, 255, 255, 0.62);
  padding: 152px 0 64px; /* 88px Ink band + 64px panel padding */
}

.main-footer .rw-footer-inner {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 20px;
  text-align: center;
}

.main-footer p {
  font-size: 0.875rem;
  line-height: 1.7;
  margin: 0;
}

.main-footer a {
  color: rgba(255, 255, 255, 0.92);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.3);
  text-underline-offset: 3px;
}

.main-footer a:hover {
  color: var(--rw-signal);
  text-decoration-color: currentColor;
}

.main-footer .rw-logo-link {
  text-decoration: none;
}


/* Footer CTA variants: the sales-diversion card replaces the default
   one on the Submit a request page only. */
.rw-cta--sales {
  display: none;
}

body:has(.rw-page-new-request) .rw-cta--default {
  display: none;
}

body:has(.rw-page-new-request) .rw-cta--sales {
  display: block;
}


/* ------------------------------------------------------------
   4.10 Sticky band controls and back to top (built by script.js)

   Desktop pages with the band:
     .rw-band-tab   tab under the band: hides it (chevron up) and,
                    once hidden, brings it back (chevron down)
   Floating .rw-to-top: mobile only (below 980px).
   ------------------------------------------------------------ */

.rw-to-top {
  align-items: center;
  background: var(--rw-ink-950);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--rw-radius);
  bottom: 96px;
  box-shadow: 0 4px 12px rgba(2, 9, 23, 0.18);
  color: var(--rw-paper);
  cursor: pointer;
  display: flex;
  height: 44px;
  justify-content: center;
  opacity: 0;
  padding: 0;
  position: fixed;
  right: 24px;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  visibility: hidden;
  width: 44px;
  z-index: 998;
}

.rw-to-top.is-visible {
  opacity: 1;
  transform: none;
  visibility: visible;
}

.rw-to-top:hover {
  background: var(--rw-ink-800);
}

.rw-to-top-icon {
  background-color: currentColor;
  height: 20px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M205.66,117.66a8,8,0,0,1-11.32,0L136,59.31V216a8,8,0,0,1-16,0V59.31L61.66,117.66a8,8,0,0,1-11.32-11.32l72-72a8,8,0,0,1,11.32,0l72,72A8,8,0,0,1,205.66,117.66Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M205.66,117.66a8,8,0,0,1-11.32,0L136,59.31V216a8,8,0,0,1-16,0V59.31L61.66,117.66a8,8,0,0,1-11.32-11.32l72-72a8,8,0,0,1,11.32,0l72,72A8,8,0,0,1,205.66,117.66Z'/%3E%3C/svg%3E") center / contain no-repeat;
  width: 20px;
}

.rw-to-top .rw-to-top-icon {
  height: 20px;
  width: 20px;
}

.rw-band-sentinel {
  height: 0;
}

.rw-band-tab {
  display: none;
}

@media (max-width: 979.98px) {
  .rw-to-top {
    bottom: 16px;
    left: 16px;
    right: auto;
  }
}

@media (min-width: 980px) {
  /* Back to top is mobile-only: on desktop the sticky band keeps
     search and breadcrumbs on screen already. */
  .rw-to-top {
    display: none;
  }

  .main-banner--simple {
    transition: transform 0.25s ease;
  }

  .main-banner--simple.is-stuck.is-collapsed {
    transform: translateY(-100%);
  }

  html.rw-band-hidden .article-sidebar.position-sticky {
    top: 40px !important;
  }


  /* Hide / show tab */
  .rw-band-tab {
    align-items: center;
    background: var(--rw-bone);
    border: 1px solid var(--rw-bone-300);
    border-radius: 0 0 var(--rw-radius) var(--rw-radius);
    border-top: 0;
    box-shadow: 0 4px 8px rgba(2, 9, 23, 0.06);
    color: var(--rw-ink-700);
    cursor: pointer;
    display: flex;
    height: 24px;
    justify-content: center;
    left: 50%;
    opacity: 0;
    padding: 0;
    position: absolute;
    top: calc(100% - 1px); /* covers the band's bottom border: one shape */
    transform: translateX(-50%);
    transition: opacity 0.2s ease, visibility 0.2s;
    visibility: hidden;
    width: 56px;
  }

  .main-banner--simple.is-stuck .rw-band-tab {
    opacity: 1;
    visibility: visible;
  }

  .rw-band-tab:hover {
    background: var(--rw-bone-300);
    color: var(--rw-ink-950);
  }

  .rw-band-tab-chevron {
    border-color: currentColor;
    border-style: solid;
    border-width: 0 1.5px 1.5px 0;
    display: inline-block;
    height: 7px;
    transform: translateY(2px) rotate(-135deg); /* up: hide the band */
    transition: transform 0.2s ease;
    width: 7px;
  }

  .main-banner--simple.is-collapsed .rw-band-tab-chevron {
    transform: translateY(-2px) rotate(45deg); /* down: bring it back */
  }
}

@media (prefers-reduced-motion: reduce) {
  .main-banner--simple,
  .rw-band-tab,
  .rw-band-tab-chevron,
  .rw-to-top {
    transition: none;
  }
}


/* ================================================================
   5. ZENDESK BASE STYLES

   Zendesk's Copenhagen base theme, as compiled into this theme,
   re-pointed at brand tokens.
   ================================================================ */

* {
  box-sizing: border-box;
}

/* ------------------------------------------------------------
   5.1  Base: body, headings, forms, buttons
   ------------------------------------------------------------ */
body {
  background-color: var(--rw-paper);
  color: var(--rw-text-body);
  font-family: var(--rw-font-sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 980px) {
  body > main {
    min-height: 58vh;
  }
}
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--rw-text);
  font-family: var(--rw-font-display);
  font-weight: 400;
  letter-spacing: -0.01em;
  margin-top: 0;
}
/* Brand type scale, sized for documentation.
   H1/H2: Space Grotesk (Light / Regular). H3 and below: Inter Tight. */
.h1,
h1 {
  font-size: 2.5rem;
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.h2,
h2 {
  font-size: 1.75rem;
  line-height: 1.2;
}
.h3,
h3 {
  font-family: var(--rw-font-sans);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.35;
}
.h4,
h4,
.h5,
h5,
.h6,
h6 {
  font-family: var(--rw-font-sans);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.4;
}
input,
textarea {
  color: var(--rw-ink-950);
  font-size: 1rem;
}
input {
  box-sizing: border-box;
  max-width: 100%;
  transition: border 0.12s ease-in-out;
}
input:not([type="checkbox"]) {
  outline: none;
}
input:not([type="checkbox"]):focus {
  border: 1px solid var(--rw-action);
}
input[disabled] {
  background-color: #ddd;
}
select {
  font-size: 16px;
}
textarea {
  border: 1px solid var(--rw-surface);
  border-radius: 2px;
  outline: none;
  padding: 10px;
  resize: vertical;
  width: 100%;
}
textarea:focus {
  border: 1px solid var(--rw-action);
}
.button[data-disabled],
.requests-table-toolbar .organization-subscribe button[data-disabled] {
  cursor: default;
}
.split-button {
  display: flex;
}
[dir="rtl"] .split-button button:not(:only-child):first-child {
  border-bottom-left-radius: unset;
  border-left: 1px solid var(--rw-action);
  border-top-left-radius: unset;
}
[dir="ltr"] .split-button button:not(:only-child):first-child {
  border-bottom-right-radius: unset;
  border-right: 1px solid var(--rw-action);
  border-top-right-radius: unset;
}
.split-button button:not(:only-child):last-child {
  align-items: center;
  display: flex;
  justify-content: center;
  max-width: 26px;
  min-width: 26px;
  padding: 0;
  width: 26px;
}
[dir="rtl"] .split-button button:not(:only-child):last-child {
  border-bottom-right-radius: unset;
  border-top-right-radius: unset;
}
[dir="ltr"] .split-button button:not(:only-child):last-child {
  border-bottom-left-radius: unset;
  border-top-left-radius: unset;
}
.table {
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;
  width: 100%;
}
@media (min-width: 980px) {
  .table {
    table-layout: auto;
  }
}
.table th,
.table th a {
  color: var(--rw-text-muted);
  font-size: 13px;
  text-align: left;
}
[dir="rtl"] .table th,
[dir="rtl"] .table th a {
  text-align: right;
}
.table tr {
  border-bottom: 1px solid var(--rw-surface);
  display: block;
  padding: 20px 0;
}
@media (min-width: 980px) {
  .table tr {
    display: table-row;
  }
}
.table td {
  display: block;
}
@media (min-width: 980px) {
  .table td {
    display: table-cell;
  }
  .table td,
  .table th {
    height: 60px;
    padding: 20px 30px;
    padding: 10px 20px;
  }
}
.form {
  max-width: 650px;
}
.form-field ~ .form-field {
  margin-top: 15px;
}
.form-field .nesty-input {
  border: 1px solid var(--rw-surface);
  border-radius: 4px;
  height: 40px;
  line-height: 40px;
  outline: none;
  vertical-align: middle;
}
.form-field .nesty-input:focus {
  border: 1px solid var(--rw-action);
  text-decoration: none;
}
.form-field textarea {
  vertical-align: middle;
}
.form-field input[type="checkbox"] + label {
  margin: 0 0 0 10px;
}
.form-field .optional {
  color: var(--rw-text-muted);
  margin-left: 4px;
}
.form-field p {
  color: var(--rw-text-muted);
  font-size: 12px;
  margin: 5px 0;
}
.form footer {
  margin-top: 30px;
}
.form footer a {
  color: var(--rw-text-muted);
  cursor: pointer;
  margin-right: 15px;
}
.form .suggestion-list {
  font-size: 13px;
  margin-top: 30px;
}
.form .suggestion-list label {
  border-bottom: 1px solid var(--rw-surface);
  display: block;
  padding-bottom: 5px;
}
.form .suggestion-list ul {
  list-style: none;
  padding-left: 0;
}
.form .suggestion-list li {
  padding: 7.5px 0;
}
.form .suggestion-list li a:visited {
  color: var(--rw-text);
}

/* ------------------------------------------------------------
   5.2  Skip link, avatars, breadcrumbs
   ------------------------------------------------------------ */
.skip-navigation {
  align-items: center;
  background-color: #000;
  color: var(--rw-paper);
  display: flex;
  font-size: 14px;
  justify-content: center;
  left: -999px;
  margin: 20px;
  overflow: hidden;
  padding: 20px;
  position: absolute;
  top: auto;
  z-index: -999;
}
[dir="rtl"] .skip-navigation {
  left: auto;
  right: -999px;
}
.skip-navigation:active,
.skip-navigation:focus {
  left: auto;
  overflow: auto;
  text-align: center;
  text-decoration: none;
  top: auto;
  z-index: 999;
}
[dir="rtl"] .skip-navigation:active,
[dir="rtl"] .skip-navigation:focus {
  left: auto;
  right: auto;
}
.user-avatar {
  border-radius: 50%;
  display: inline-block;
  height: 25px;
  vertical-align: middle;
  width: 25px;
}
.avatar {
  display: inline-block;
  position: relative;
}
.avatar img {
  height: 40px;
  -o-object-fit: contain;
  object-fit: contain;
  width: 40px;
}
.avatar .icon-agent {
  background-color: var(--rw-line);
  border: 2px solid var(--rw-paper);
  border-radius: 50%;
  bottom: -4px;
  color: var(--rw-action);
  font-size: 17px;
  height: 17px;
  line-height: 17px;
  position: absolute;
  right: -2px;
  text-align: center;
  width: 17px;
}
.breadcrumbs {
  display: flex;
  list-style: none;
  margin: 0 0 15px;
  padding: 0;
}
@media (min-width: 980px) {
  .breadcrumbs {
    margin: 0;
  }
}
.breadcrumbs li {
  font-size: 13px;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (min-width: 980px) {
  .breadcrumbs li {
    max-width: 450px;
  }
}
.breadcrumbs li + li:before {
  content: ">";
  margin: 0 4px;
}
.breadcrumbs a:hover {
  text-decoration: underline;
}

/* ------------------------------------------------------------
   5.3  Search field
   ------------------------------------------------------------ */
.search-wrapper {
  position: relative;
}
.search-wrapper img {
  left: 15px;
  position: absolute;
  top: 13px;
  z-index: 10;
}
.search {
  border: 1px solid var(--rw-surface);
  border-radius: 4px;
  display: flex;
  position: relative;
  transition: border 0.12s ease-in-out;
}
.search:focus-within {
  border-color: var(--rw-action);
}
.search .clear-button,
.search input[type="search"] {
  background-color: var(--rw-paper);
  border: none;
  border-radius: 4px;
}
.search-full .clear-button,
.search-full input[type="search"] {
  border-color: var(--rw-paper);
}
.search input[type="search"] {
  -moz-appearance: none;
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  color: #666;
  flex: 1 1 auto;
  height: 46px;
  width: 100%;
}
.search input[type="search"]:focus {
  color: #555;
}
.search input[type="search"]::-webkit-search-cancel-button,
.search input[type="search"]::-webkit-search-decoration,
.search input[type="search"]::-webkit-search-results-button,
.search input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none;
}
.search input[type="search"]:-webkit-autofill,
.search input[type="search"]:-webkit-autofill:focus,
.search input[type="search"]:-webkit-autofill:hover {
  -webkit-box-shadow: inset 0 0 0 1000px var(--rw-paper);
}
.search .clear-button {
  align-items: center;
  box-sizing: border-box;
  color: #777;
  cursor: pointer;
  display: none;
  flex: none;
  justify-content: center;
  padding: 0 15px;
}
.search .clear-button:hover {
  background-color: var(--rw-action);
  color: var(--rw-paper);
}
.search .clear-button:focus {
  box-shadow: 0 0 0 3px var(--rw-action);
  outline: 0;
}
.search-has-value .clear-button {
  display: flex;
}
[dir="ltr"] .search input[type="search"] {
  padding-left: 60px;
  padding-right: 20px;
}
[dir="ltr"] .search-has-value input[type="search"] {
  border-bottom-right-radius: 0;
  border-right-color: transparent;
  border-top-right-radius: 0;
}
[dir="ltr"] .search-has-value input[type="search"]:focus {
  border-right-color: var(--rw-action);
}
[dir="ltr"] .search .clear-button {
  border-bottom-left-radius: 0;
  border-left-color: transparent;
  border-top-left-radius: 0;
}
[dir="ltr"] .search .clear-button:focus {
  border-left-color: var(--rw-action);
}
[dir="rtl"] .search input[type="search"] {
  padding-left: 20px;
  padding-right: 60px;
}
[dir="rtl"] .search-has-value input[type="search"] {
  border-bottom-left-radius: 0;
  border-left-color: transparent;
  border-top-left-radius: 0;
}
[dir="rtl"] .search-has-value input[type="search"]:focus {
  border-left-color: var(--rw-action);
}
[dir="rtl"] .search .clear-button {
  border-bottom-right-radius: 0;
  border-right-color: transparent;
  border-top-right-radius: 0;
}
[dir="rtl"] .search .clear-button:focus {
  border-right-color: var(--rw-action);
}
.search-icon {
  color: #777;
  height: 18px;
  left: 15px;
  pointer-events: none;
  position: relative;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  z-index: 1;
}
[dir="rtl"] .search-icon {
  left: auto;
  right: 15px;
}

/* ------------------------------------------------------------
   5.4  Blocks list
   ------------------------------------------------------------ */
.blocks-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  list-style: none;
  padding: 0;
}
@media (min-width: 980px) {
  .blocks-list {
    margin: 0 -15px;
  }
}
.blocks-item {
  border: 1px solid #0b1b31;
  border-radius: 4px;
  box-sizing: border-box;
  color: #0b1b31;
  display: flex;
  flex: 1 0 340px;
  margin: 0 0 30px;
  max-width: 100%;
  text-align: center;
  transition: 0.3s;
}
@media (min-width: 980px) {
  .blocks-item {
    margin: 0 15px 30px;
  }
}
.blocks-item:active,
.blocks-item:focus,
.blocks-item:hover {
  background-color: #0b1b31;
}
.blocks-item:active *,
.blocks-item:focus *,
.blocks-item:hover * {
  color: var(--rw-paper);
  text-decoration: none;
}
.blocks-item-internal {
  background-color: transparent;
  border: 1px solid var(--rw-surface);
}
.blocks-item-internal .icon-lock {
  bottom: 5px;
  height: 15px;
  position: relative;
  width: 15px;
}
.blocks-item-internal a {
  color: var(--rw-text);
}
.blocks-item-link {
  border-radius: inherit;
  color: #0b1b31;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  padding: 20px 30px;
}
.blocks-item-link:active,
.blocks-item-link:hover,
.blocks-item-link:visited {
  color: inherit;
  text-decoration: none;
}
.blocks-item-link:focus {
  box-shadow: 0 0 0 3px var(--rw-action);
  outline: 0;
  text-decoration: none;
}
.blocks-item-title {
  font-size: 16px;
  margin-bottom: 0;
}
.blocks-item-description {
  margin: 0;
}
.blocks-item-description:not(:empty) {
  margin-top: 10px;
}

/* ------------------------------------------------------------
   5.5  Article page
   ------------------------------------------------------------ */
.article-container {
  display: flex;
  flex-direction: column;
}
@media (min-width: 980px) {
  .article-container {
    flex-direction: row;
  }
}
.article-header {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 16px;
  margin-top: 20px;
}
@media (min-width: 980px) {
  .article-header {
    flex-direction: row;
    margin-top: 0;
  }
}
.article-avatar {
  margin-right: 10px;
}
.article-author {
  margin-bottom: 10px;
}
.article [role="button"] {
  flex-shrink: 0;
  width: 100%;
}
@media (min-width: 980px) {
  .article [role="button"] {
    width: auto;
  }
}
.article-info {
  max-width: 100%;
}
.article-meta {
  display: inline-block;
  vertical-align: middle;
}
.article-body {
  display: flow-root;
}
.article-body a {
  color: var(--rw-text);
  text-decoration: underline;
}
.article-body a:visited {
  color: var(--rw-text);
}
.article-body a:active,
.article-body a:focus,
.article-body a:hover {
  color: var(--rw-action);
}
.article-body img {
  height: auto;
  max-width: 100%;
}
.article-body figure.image {
  display: table;
  margin: 0 auto;
}
.article-body figure.image > img {
  display: block;
  width: 100%;
}
.article-body figcaption {
  background-color: #f2f2f2;
  font-size: 12px;
  padding: 10px 0;
  text-align: center;
}
.article-body ol,
.article-body ul {
  list-style-position: outside;
  margin: 20px 0 20px 20px;
  padding-left: 20px;
}
[dir="rtl"] .article-body ol,
[dir="rtl"] .article-body ul {
  margin-left: 0;
  margin-right: 20px;
  padding-left: 0;
  padding-right: 20px;
}
.article-body li > ol,
.article-body li > ul,
.article-body ol > ol,
.article-body ol > ul,
.article-body ul > ol,
.article-body ul > ul {
  margin: 0;
}
.article-body ul {
  list-style-type: disc;
}
.article-body :not(pre) > code {
  margin: 0 2px;
  padding: 0 5px;
}
.article-body :not(pre) > code,
.article-body pre {
  background: #f7f7f7;
  border: 1px solid var(--rw-surface);
  border-radius: 3px;
}
.article-body pre {
  overflow: auto;
  padding: 10px 15px;
  white-space: pre;
}
.article-body blockquote {
  border-left: 1px solid var(--rw-surface);
  color: var(--rw-text-muted);
  font-style: italic;
  padding: 0 15px;
}
.article-body > p:last-child {
  margin-bottom: 0;
}
.article-content {
  line-height: 1.6;
  margin: 16px 0;
  word-wrap: break-word;
}
.article-footer {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
}
.article-comment-count {
  color: var(--rw-text-muted);
}
.article-comment-count:hover {
  text-decoration: none;
}
.article-comment-count-icon {
  color: var(--rw-action);
  height: 18px;
  vertical-align: middle;
  width: 18px;
}
.article-sidebar {
  border-bottom: 1px solid var(--rw-surface);
  border-top: 1px solid var(--rw-surface);
  flex: 1 0 auto;
  margin-bottom: 20px;
  padding: 0;
}
@media (min-width: 980px) {
  .article-sidebar {
    border: 0;
    height: auto;
  }
}
.article-relatives {
  border-top: 1px solid var(--rw-surface);
  display: flex;
  flex-direction: column;
  padding: 20px 0;
}
@media (min-width: 980px) {
  .article-relatives {
    flex-direction: row;
  }
}
.article-relatives ul {
  list-style: none;
  margin-top: 15px;
  padding-left: 0;
}
.article-relatives > * {
  flex: 1 0 50%;
  margin-right: 0;
  min-width: 50%;
  overflow-wrap: break-word;
}
.article-relatives > :last-child {
  padding: 0;
}
@media (min-width: 980px) {
  .article-relatives > * {
    padding-right: 20px;
  }
}
.article-votes {
  border-top: 1px solid var(--rw-surface);
  padding: 30px 0;
  text-align: center;
}
.article-votes-question {
  font-size: 15px;
  font-weight: 400;
  margin-bottom: 0;
}
.article-vote {
  margin: 10px 5px;
  min-width: 90px;
  width: auto;
}
.article-more-questions {
  margin: 10px 0 20px;
  text-align: center;
}
.article-more-questions a {
  color: var(--rw-text);
  text-decoration: underline;
}
.article-more-questions a:visited {
  color: var(--rw-text);
}
.article-more-questions a:active,
.article-more-questions a:focus,
.article-more-questions a:hover {
  color: var(--rw-action);
}
.article-return-to-top {
  border-top: 1px solid var(--rw-surface);
}
@media (min-width: 980px) {
  .article-return-to-top {
    display: none;
  }
}
.article-return-to-top a {
  color: var(--rw-text);
  display: block;
  padding: 20px 0;
}
.article-return-to-top a:focus,
.article-return-to-top a:hover {
  text-decoration: none;
}
.article-return-to-top-icon {
  transform: rotate(0.5turn);
}
.article td > p:first-child,
.article th > p:first-child {
  margin-top: 0;
}
.article td > p:last-child,
.article th > p:last-child {
  margin-bottom: 0;
}
.sidenav-title {
  font-size: 15px;
  font-weight: 600;
  position: relative;
}
.sidenav-item {
  display: block;
  margin-bottom: 16px;
  margin-top: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.attachments .attachment-item {
  margin-bottom: 10px;
  padding-left: 20px;
  position: relative;
}
.attachments .attachment-item:last-child {
  margin-bottom: 0;
}
.attachments .attachment-item .attachment-icon {
  color: var(--rw-text);
  left: 0;
  position: absolute;
  top: 5px;
}
[dir="rtl"] .attachments .attachment-item {
  padding-left: 0;
  padding-right: 20px;
}
[dir="rtl"] .attachments .attachment-item .attachment-icon {
  left: auto;
  right: 0;
}
.share {
  padding: 0;
  white-space: nowrap;
}
.share a,
.share li {
  display: inline-block;
}
.share li {
  height: 25px;
  width: 25px;
}
.share a {
  color: var(--rw-text-muted);
}
.share a:hover {
  color: var(--rw-action);
  text-decoration: none;
}
.share a svg {
  display: block;
  height: 18px;
  width: 18px;
}

/* ------------------------------------------------------------
   5.6  Comments, votes, actions
   ------------------------------------------------------------ */
.comment {
  border-bottom: 1px solid var(--rw-surface);
  padding: 20px 0;
}
.comment-heading {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 5px;
  margin-top: 0;
}
.comment-overview {
  border-bottom: 1px solid var(--rw-surface);
  border-top: 1px solid var(--rw-surface);
  padding: 20px 0;
}
.comment-overview p {
  margin-top: 0;
}
.comment-callout {
  color: var(--rw-text-muted);
  display: inline-block;
  font-size: 13px;
  margin-bottom: 0;
}
.comment-callout a {
  color: var(--rw-text);
  text-decoration: underline;
}
.comment-callout a:visited {
  color: var(--rw-text);
}
.comment-callout a:active,
.comment-callout a:focus,
.comment-callout a:hover {
  color: var(--rw-action);
}
.comment-sorter {
  display: inline-block;
  float: right;
}
.comment-sorter .zd-dropdown-toggle {
  color: var(--rw-text-muted);
  font-size: 13px;
}
[dir="rtl"] .comment-sorter {
  float: left;
}
.comment-wrapper {
  display: flex;
  position: relative;
}
.comment-wrapper.comment-official {
  border: 1px solid var(--rw-action);
  padding: 40px 20px 20px;
}
@media (min-width: 980px) {
  .comment-wrapper.comment-official {
    padding-top: 20px;
  }
}
.comment-info {
  min-width: 0;
  padding-right: 20px;
  width: 100%;
}
[dir="rtl"] .comment-info {
  padding-left: 20px;
  padding-right: 0;
}
.comment-author {
  align-items: flex-end;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
@media (min-width: 980px) {
  .comment-author {
    justify-content: space-between;
  }
}
.comment-avatar {
  margin-right: 10px;
}
[dir="rtl"] .comment-avatar {
  margin-left: 10px;
  margin-right: 0;
}
.comment-meta {
  flex: 1 1 auto;
}
.comment-labels {
  flex-basis: 100%;
}
@media (min-width: 980px) {
  .comment-labels {
    flex-basis: auto;
  }
}
.comment .status-label:not(.status-label-official) {
  margin-top: 10px;
}
@media (min-width: 980px) {
  .comment .status-label:not(.status-label-official) {
    margin-top: 0;
  }
}
.comment-form {
  display: flex;
  padding-top: 30px;
  word-wrap: break-word;
}
.comment-container {
  width: 100%;
}
.comment-form-controls {
  display: none;
  margin-top: 10px;
  text-align: left;
}
@media (min-width: 980px) {
  [dir="ltr"] .comment-form-controls {
    text-align: right;
  }
}
.comment-form-controls input[type="submit"] {
  margin-top: 15px;
}
@media (min-width: 980px) {
  .comment-form-controls input[type="submit"] {
    margin-left: 15px;
  }
  [dir="rtl"] .comment-form-controls input[type="submit"] {
    margin-left: 0;
    margin-right: 15px;
  }
}
.comment-form-controls input[type="checkbox"] {
  margin-right: 5px;
}
.comment-form-controls input[type="checkbox"] [dir="rtl"] {
  margin-left: 5px;
}
.comment-ccs {
  display: none;
}
.comment-attachments,
.comment-ccs + textarea {
  margin-top: 10px;
}
.comment-attachments a {
  color: var(--rw-action);
}
.comment-body {
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  word-wrap: break-word;
  display: flow-root;
  font-family: var(--rw-font-sans);
  line-height: 1.6;
  overflow-x: auto;
}
.comment-body a {
  color: var(--rw-text);
  text-decoration: underline;
}
.comment-body a:visited {
  color: var(--rw-text);
}
.comment-body a:active,
.comment-body a:focus,
.comment-body a:hover {
  color: var(--rw-action);
}
.comment-body img {
  height: auto;
  max-width: 100%;
}
.comment-body figure.image {
  display: table;
  margin: 0 auto;
}
.comment-body figure.image > img {
  display: block;
  width: 100%;
}
.comment-body figcaption {
  background-color: #f2f2f2;
  font-size: 12px;
  padding: 10px 0;
  text-align: center;
}
.comment-body ol,
.comment-body ul {
  list-style-position: outside;
  margin: 20px 0 20px 20px;
  padding-left: 20px;
}
[dir="rtl"] .comment-body ol,
[dir="rtl"] .comment-body ul {
  margin-left: 0;
  margin-right: 20px;
  padding-left: 0;
  padding-right: 20px;
}
.comment-body li > ol,
.comment-body li > ul,
.comment-body ol > ol,
.comment-body ol > ul,
.comment-body ul > ol,
.comment-body ul > ul {
  margin: 0;
}
.comment-body ul {
  list-style-type: disc;
}
.comment-body :not(pre) > code {
  margin: 0 2px;
  padding: 0 5px;
}
.comment-body :not(pre) > code,
.comment-body pre {
  background: #f7f7f7;
  border: 1px solid var(--rw-surface);
  border-radius: 3px;
}
.comment-body pre {
  overflow: auto;
  padding: 10px 15px;
  white-space: pre;
}
.comment-body blockquote {
  border-left: 1px solid var(--rw-surface);
  color: var(--rw-text-muted);
  font-style: italic;
  padding: 0 15px;
}
.comment-list {
  list-style: none;
  padding-left: 0;
}
.vote {
  display: flex;
  flex-direction: column;
  text-align: center;
}
.vote a:active,
.vote a:focus,
.vote a:hover {
  text-decoration: none;
}
.vote-sum {
  color: var(--rw-text-muted);
  display: block;
  margin: 3px 0;
}
[dir="rtl"] .vote-sum {
  direction: ltr;
  unicode-bidi: bidi-override;
}
.vote-up svg {
  transform: scaleY(-1);
}
.vote-down:hover,
.vote-up:hover {
  color: var(--rw-action);
}
.vote-down,
.vote-up {
  align-items: center;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent;
  border: none;
  color: var(--rw-text-muted);
  cursor: pointer;
  display: flex;
  justify-content: center;
  min-height: 35px;
  min-width: 35px;
}
.vote-voted {
  color: var(--rw-action);
}
.vote-voted:hover {
  color: #0c2cbd;
}
.actions {
  flex-shrink: 0;
  text-align: center;
}
.actions button {
  align-items: center;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: center;
  min-height: 35px;
  min-width: 35px;
}

/* ------------------------------------------------------------
   5.7  Community
   NOT IN USE: community is disabled. Kept so the pages still render if it is ever enabled.
   ------------------------------------------------------------ */
.community-featured-posts .title {
  font-size: 18px;
  font-weight: 600;
}
.community-activity,
.community-featured-posts {
  padding-top: 40px;
  width: 100%;
}
.community-header {
  margin-bottom: 30px;
}
.community-header .title {
  font-size: 16px;
  margin-bottom: 0;
}
.post-to-community {
  margin-top: 10px;
}
@media (min-width: 980px) {
  .post-to-community {
    margin: 0;
  }
}
.topics {
  max-width: none;
  width: 100%;
}
.topics-item .meta-group {
  justify-content: center;
  margin-top: 20px;
}
.topic-header {
  border-bottom: 1px solid var(--rw-surface);
  font-size: 13px;
}
@media (min-width: 980px) {
  .topic-header {
    padding-bottom: 10px;
  }
}
.topic-header .dropdown {
  border-top: 1px solid var(--rw-surface);
  display: block;
  padding: 10px 0;
}
@media (min-width: 980px) {
  .topic-header .dropdown {
    border-top: 0;
    display: inline-block;
    margin-right: 20px;
    padding: 0;
  }
}
.no-posts-with-filter {
  margin-bottom: 20px;
  margin-top: 20px;
}
.community-follow {
  width: 100%;
}
@media (min-width: 980px) {
  .community-follow {
    margin-bottom: 0;
    width: auto;
  }
}
.community-follow button {
  position: relative;
  width: 100%;
}
@media (min-width: 980px) {
  .community-follow button {
    width: auto;
  }
}
.community-follow button:focus:after,
.community-follow button:hover:after {
  border-color: var(--rw-paper);
  color: var(--rw-paper);
}
.community-follow button:after {
  border-left: 1px solid var(--rw-action);
  color: var(--rw-action);
  content: attr(data-follower-count);
  display: inline-block;
  font-family: var(--rw-font-sans);
  margin-left: 15px;
  padding-left: 10px;
  position: absolute;
  right: 10px;
}
@media (min-width: 980px) {
  .community-follow button:after {
    position: static;
  }
}
[dir="rtl"] .community-follow button:after {
  border-left: 0;
  border-right: 1px solid var(--rw-action);
  margin: 0 10px 0 0;
  padding: 0 10px 0 0;
}
.striped-list {
  padding: 0;
}
.striped-list-item {
  align-items: flex-start;
  border-bottom: 1px solid var(--rw-surface);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px 0;
}
@media (min-width: 980px) {
  .striped-list-item {
    align-items: center;
    flex-direction: row;
  }
}
.striped-list-info {
  flex: 2;
}
.striped-list-title {
  color: var(--rw-text);
  margin-bottom: 10px;
  margin-right: 5px;
}
.striped-list-title:active,
.striped-list-title:focus,
.striped-list-title:hover {
  text-decoration: underline;
}
.striped-list-title:visited {
  color: var(--rw-text);
}
.striped-list .meta-group {
  margin: 5px 0;
}
.striped-list-count {
  color: var(--rw-text-muted);
  font-size: 13px;
  justify-content: flex-start;
  text-transform: capitalize;
}
@media (min-width: 980px) {
  .striped-list-count {
    display: flex;
    flex: 1;
    justify-content: space-around;
  }
}
.striped-list-count-item:after {
  content: "·";
  display: inline-block;
  padding: 0 5px;
}
@media (min-width: 980px) {
  .striped-list-count-item:after {
    display: none;
  }
}
.striped-list-count-item:last-child:after {
  display: none;
}
.striped-list-number {
  text-align: center;
}
@media (min-width: 980px) {
  .striped-list-number {
    color: var(--rw-text);
    display: block;
  }
}
.status-label {
  background-color: #038153;
  border-radius: 4px;
  color: var(--rw-paper);
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  margin-right: 2px;
  padding: 3px 10px;
  vertical-align: middle;
  white-space: nowrap;
}
.status-label:active,
.status-label:focus,
.status-label:hover {
  text-decoration: none;
}
.status-label-featured,
.status-label-official,
.status-label-pinned {
  background-color: var(--rw-action);
}
.status-label-official {
  border-radius: 0;
  margin-right: 0;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
  width: 100%;
}
@media (min-width: 980px) {
  .status-label-official {
    border-radius: 0 0 4px 4px;
    right: 30px;
    width: auto;
  }
}
[dir="rtl"] .status-label-official {
  left: 30px;
  right: auto;
}
.status-label-pending-moderation {
  background-color: #1f73b7;
  text-align: center;
}
.status-label-request {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 766.98px) {
  .status-label-request {
    max-width: 150px;
  }
}
.post {
  flex: 1;
  margin-bottom: 10px;
}
@media (min-width: 980px) {
  .post {
    flex: 1 0 70%;
    max-width: 70%;
  }
}
.post-header {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 10px;
}
@media (min-width: 980px) {
  .post-header {
    align-items: baseline;
    flex-direction: row;
  }
}
.post-header .status-label {
  vertical-align: super;
}
.post-title {
  margin-bottom: 20px;
  width: 100%;
}
@media (min-width: 980px) {
  .post-title {
    margin-bottom: 0;
    padding-right: 10px;
  }
}
.post-title .h1,
.post-title h1 {
  display: inline;
  vertical-align: middle;
}
@media (min-width: 980px) {
  .post-title .h1,
  .post-title h1 {
    margin-right: 5px;
  }
}
.post-author {
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
}
.post-avatar {
  margin-bottom: 30px;
}
.post-content {
  font-family: var(--rw-font-sans);
  line-height: 1.6;
  word-break: break-word;
}
.post-info-container {
  display: flex;
  margin-bottom: 40px;
}
.post-info {
  min-width: 0;
  padding-right: 20px;
  width: 100%;
}
[dir="rtl"] .post-info {
  padding-left: 20px;
  padding-right: 0;
}
.post-meta {
  display: inline-block;
  flex: 1;
  margin-left: 10px;
  vertical-align: middle;
}
[dir="rtl"] .post-meta {
  margin-left: 0;
  margin-right: 10px;
}
.post-body {
  display: flow-root;
}
.post-body a {
  text-decoration: underline;
}
.post-body a,
.post-body a:visited {
  color: var(--rw-text);
}
.post-body a:active,
.post-body a:focus,
.post-body a:hover {
  color: var(--rw-action);
}
.post-body img {
  height: auto;
  max-width: 100%;
}
.post-body figure.image {
  display: table;
  margin: 0 auto;
}
.post-body figure.image > img {
  display: block;
  width: 100%;
}
.post-body figcaption {
  background-color: #f2f2f2;
  font-size: 12px;
  padding: 10px 0;
  text-align: center;
}
.post-body ol,
.post-body ul {
  list-style-position: outside;
  margin: 20px 0 20px 20px;
  padding-left: 20px;
}
[dir="rtl"] .post-body ol,
[dir="rtl"] .post-body ul {
  margin-left: 0;
  margin-right: 20px;
  padding-left: 0;
  padding-right: 20px;
}
.post-body li > ol,
.post-body li > ul,
.post-body ol > ol,
.post-body ol > ul,
.post-body ul > ol,
.post-body ul > ul {
  margin: 0;
}
.post-body ul {
  list-style-type: disc;
}
.post-body :not(pre) > code {
  margin: 0 2px;
  padding: 0 5px;
}
.post-body :not(pre) > code,
.post-body pre {
  background: #f7f7f7;
  border: 1px solid var(--rw-surface);
  border-radius: 3px;
}
.post-body pre {
  overflow: auto;
  padding: 10px 15px;
  white-space: pre;
}
.post-body blockquote {
  border-left: 1px solid var(--rw-surface);
  color: var(--rw-text-muted);
  font-style: italic;
  padding: 0 15px;
}
.post-footer {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
}
.post-comment-count {
  color: var(--rw-text-muted);
}
.post-comment-count:hover {
  text-decoration: none;
}
.post-comment-count .icon-comments {
  color: var(--rw-action);
  display: inline-block;
  height: 18px;
  margin: 5px;
  vertical-align: middle;
  width: 18px;
}
.post-sidebar {
  border-top: 1px solid var(--rw-surface);
  flex: 1;
  padding: 30px 0;
  text-align: center;
}
@media (min-width: 980px) {
  .post-sidebar {
    border: 0;
    flex: 1 0 30%;
    padding: 0 0 0 50px;
    text-align: initial;
  }
  [dir="rtl"] .post-sidebar {
    padding: 0 50px 0 0;
  }
}
.post-comments {
  margin-bottom: 20px;
}
@media (min-width: 980px) {
  .post-comments {
    margin-bottom: 0;
  }
}
.community-badge-title {
  background-color: #04444d;
  border-radius: 4px;
  color: var(--rw-paper);
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  padding: 0 8px;
  vertical-align: top;
  vertical-align: middle;
  white-space: nowrap;
}
.community-badge-titles {
  display: inline;
}
.community-badge-achievement {
  display: block;
  height: 16px;
  white-space: nowrap;
  width: 16px;
}
.community-badge-achievement img {
  height: 100%;
  width: 100%;
}
.community-badge-achievements {
  display: flex;
}
.community-badge-achievements-rest {
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
  vertical-align: top;
}
.community-badge {
  margin: 2px;
}
.profile-info .community-badge-title {
  line-height: 20px;
  padding: 2px 8px;
}
.profile-info .community-badge-achievement {
  height: 40px;
  width: 40px;
}
.profile-info .community-badge-achievements-rest {
  font-size: 20px;
  line-height: 40px;
}

/* ------------------------------------------------------------
   5.8  Collapsible nav and sidebar
   ------------------------------------------------------------ */
.collapsible-nav {
  flex-direction: column;
  font-size: 14px;
  position: relative;
}
@media (min-width: 980px) {
  .collapsible-nav {
    flex-direction: row;
  }
}
.collapsible-nav-border {
  border-bottom: 1px solid var(--rw-surface);
  border-top: 1px solid var(--rw-surface);
}
@media (min-width: 980px) {
  .collapsible-nav-border {
    border-top: 0;
  }
}
.collapsible-nav-title {
  font-weight: 700;
  margin-bottom: 0;
  padding: 15px 0;
}
@media (min-width: 980px) {
  .collapsible-nav-title {
    display: none;
  }
}
.collapsible-nav-toggle {
  background: none;
  border: 0;
  border-radius: 50%;
  height: 25px;
  padding: 0;
  position: absolute;
  right: 0;
  top: 22.5px;
  transform: translateY(-50%);
  width: 25px;
}
@media (min-width: 980px) {
  .collapsible-nav-toggle {
    display: none;
  }
}
[dir="rtl"] .collapsible-nav-toggle {
  left: 0;
  right: auto;
}
.collapsible-nav-toggle-icon {
  display: none;
}
.collapsible-nav-toggle[aria-expanded="false"] .chevron-icon,
.collapsible-nav-toggle[aria-expanded="true"] .x-icon {
  display: inline-block;
}
.collapsible-nav-toggle:focus {
  border: 1px solid var(--rw-action);
  outline: none;
}
.collapsible-nav-list {
  display: flex;
  flex-direction: column;
  padding-left: 0;
  padding-right: 0;
}
@media (min-width: 980px) {
  .collapsible-nav-list {
    flex-direction: row;
  }
}
.collapsible-nav-list li {
  color: var(--rw-text);
  line-height: 45px;
  order: 1;
}
@media (min-width: 980px) {
  .collapsible-nav-list li {
    line-height: normal;
    margin-right: 30px;
  }
  [dir="rtl"] .collapsible-nav-list li {
    margin-left: 30px;
    margin-right: 0;
  }
  .collapsible-nav-list li a {
    padding: 15px 0;
    text-decoration: none;
  }
}
.collapsible-nav-list li a {
  color: var(--rw-text);
  display: block;
}
@media (min-width: 980px) {
  .collapsible-nav-list li:hover {
    border-bottom: 4px solid #ddd;
  }
  .collapsible-nav-list li:hover a:not([aria-current="page"]) {
    padding: 15px 0 11px;
    text-decoration: none;
  }
}
.collapsible-nav-list li:not(.current),
.collapsible-nav-list li:not([aria-selected="true"]) {
  display: none;
}
@media (min-width: 980px) {
  .collapsible-nav-list li:not(.current),
  .collapsible-nav-list li:not([aria-selected="true"]) {
    display: block;
  }
  .collapsible-nav-list li[aria-selected="true"] {
    padding: 15px 0 11px;
  }
}
.collapsible-nav-list li.current,
.collapsible-nav-list li[aria-selected="true"] {
  order: 0;
  position: relative;
}
@media (min-width: 980px) {
  .collapsible-nav-list li.current,
  .collapsible-nav-list li[aria-selected="true"] {
    border-bottom: 4px solid var(--rw-action);
    order: 1;
  }
}
.collapsible-nav-list li.current a,
.collapsible-nav-list li[aria-selected="true"] a {
  color: var(--rw-text);
}
.collapsible-nav[aria-expanded="true"] li:not(.current),
.collapsible-nav[aria-expanded="true"] li:not([aria-selected="true"]) {
  display: block;
}
.collapsible-sidebar {
  flex: 1;
  max-height: 45px;
  overflow: hidden;
  padding: 10px 0;
  position: relative;
}
@media (min-width: 980px) {
  .collapsible-sidebar {
    max-height: none;
    padding: 0;
  }
}
.collapsible-sidebar-title {
  margin-top: 0;
}
.collapsible-sidebar-toggle {
  background: none;
  border: 0;
  border-radius: 50%;
  height: 25px;
  padding: 0;
  position: absolute;
  right: 0;
  top: 22.5px;
  transform: translateY(-50%);
  width: 25px;
}
@media (min-width: 980px) {
  .collapsible-sidebar-toggle {
    display: none;
  }
}
[dir="rtl"] .collapsible-sidebar-toggle {
  left: 0;
  right: auto;
}
.collapsible-sidebar-toggle-icon {
  display: none;
}
.collapsible-sidebar-toggle[aria-expanded="false"] .chevron-icon,
.collapsible-sidebar-toggle[aria-expanded="true"] .x-icon {
  display: inline-block;
}
.collapsible-sidebar-toggle:focus {
  border: 1px solid var(--rw-action);
  outline: none;
}
.collapsible-sidebar-body {
  display: none;
}
@media (min-width: 980px) {
  .collapsible-sidebar-body {
    display: block;
  }
}
.collapsible-sidebar[aria-expanded="true"] {
  max-height: none;
}
.collapsible-sidebar[aria-expanded="true"] .collapsible-sidebar-body {
  display: block;
}

/* ------------------------------------------------------------
   5.9  My activities, requests, subscriptions
   ------------------------------------------------------------ */
.my-activities-nav {
  background-color: #f2f2f2;
  margin-bottom: 20px;
}
.my-activities-sub-nav {
  margin-bottom: 30px;
}
.my-activities-table .striped-list-title {
  display: block;
  margin-bottom: 10px;
  max-width: 350px;
  white-space: normal;
}
@media (min-width: 980px) {
  .my-activities-table .striped-list-title {
    margin-bottom: 0;
    max-width: 500px;
    min-width: 350px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.my-activities-table thead {
  display: none;
}
@media (min-width: 980px) {
  .my-activities-table thead {
    display: table-header-group;
  }
}
.my-activities-table td:first-child,
.my-activities-table th:first-child {
  padding-left: 0;
}
@media (min-width: 980px) {
  .my-activities-table td:first-child,
  .my-activities-table th:first-child {
    width: 500px;
  }
}
.my-activities-table td:last-child,
.my-activities-table th:last-child {
  padding-right: 0;
}
.my-activities-table td:not(:first-child) {
  display: none;
}
@media (min-width: 980px) {
  .my-activities-table td:not(:first-child) {
    display: table-cell;
  }
}
.requests-search {
  width: 100%;
}
.requests-table-toolbar {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
}
@media (min-width: 980px) {
  .requests-table-toolbar {
    flex-direction: row;
  }
}
.requests-table-toolbar .search {
  flex: 1;
  width: 100%;
}
.requests-table-toolbar .request-table-filter {
  width: 100%;
}
@media (min-width: 980px) {
  .requests-table-toolbar .request-table-filter {
    width: auto;
  }
}
.requests-table-toolbar .request-filter {
  display: block;
}
@media (min-width: 980px) {
  .requests-table-toolbar .request-filter {
    margin: 0 0 0 30px;
  }
  [dir="rtl"] .requests-table-toolbar .request-filter {
    margin: 0 30px 0 0;
  }
}
.requests-table-toolbar .request-filter-label {
  font-size: 13px;
  margin-top: 30px;
}
@media (min-width: 980px) {
  .requests-table-toolbar .request-filter-label {
    margin-top: 0;
  }
}
.requests-table-toolbar select {
  margin-bottom: 30px;
  max-height: 40px;
  width: 100%;
}
@media (min-width: 980px) {
  .requests-table-toolbar select {
    margin-bottom: 0;
    max-width: 300px;
    width: auto;
  }
  .requests-table-toolbar .organization-subscribe {
    margin-left: 10px;
  }
  [dir="rtl"] .requests-table-toolbar .organization-subscribe {
    margin: 0 10px 0 0;
  }
}
.requests-table-toolbar .organization-subscribe button {
  line-height: 40px;
  max-height: 40px;
  padding: 0 20px;
}
.requests-table-toolbar + .requests-search-info {
  margin-top: 15px;
}
.requests-table-toolbar + .requests-search-info.meta-data:after {
  content: "";
  margin: 0;
}
.requests-table-toolbar + .requests-search-info + .requests {
  margin-top: 20px;
}
.requests-table-toolbar + .requests {
  margin-top: 40px;
}
.requests .requests-table-meta {
  display: block;
}
@media (min-width: 980px) {
  .requests .requests-table-meta {
    display: none;
  }
}
.requests .requests-table thead {
  display: none;
}
@media (min-width: 980px) {
  .requests .requests-table thead {
    display: table-header-group;
  }
}
.requests .requests-table-info {
  display: block;
}
@media (min-width: 980px) {
  .requests .requests-table-info {
    display: table-cell;
    vertical-align: middle;
    width: auto;
  }
}
.subscriptions-subscribe button {
  font-size: 16px;
}
.subscriptions-table td:last-child {
  display: block;
}
@media (min-width: 980px) {
  .subscriptions-table td:last-child {
    display: table-cell;
  }
}
.subscriptions-table td:first-child {
  align-items: center;
  display: flex;
}
.subscriptions-table td {
  vertical-align: middle;
}
.subscriptions-table .user-avatar {
  margin-right: 10px;
}
.subscriptions .striped-list-title {
  display: inline-block;
  vertical-align: middle;
}
.contributions-table td:last-child {
  color: var(--rw-text-muted);
  font-size: 13px;
}
@media (min-width: 980px) {
  .contributions-table td:last-child {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
  }
}
.no-activities {
  color: var(--rw-text-muted);
}
.request-container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media (min-width: 980px) {
  .request-container {
    align-items: flex-start;
    flex-direction: row;
  }
}
.request-container .comment-container {
  min-width: 0;
}
.request-main {
  flex: 1 0 auto;
  order: 1;
}
.request-main .comment-fields,
.request-main .request-submit-comment {
  display: none;
}
.request-main .comment-fields.shown {
  display: block;
}
.request-main .request-submit-comment.shown {
  display: inline;
}
@media (min-width: 980px) {
  .request-main {
    flex: 0 0 66%;
    min-width: 0;
    order: 0;
  }
}
.request-main .comment-ccs,
.request-main .comment-form-controls {
  display: block;
}
.request-main .comment-show-container {
  border: 1px solid var(--rw-surface);
  border-radius: 2px;
  color: var(--rw-text-muted);
  padding: 8px 25px;
  text-align: inherit;
  width: 100%;
}
.request-main .comment-show-container.hidden {
  display: none;
}
.request-main .form-field.comment-ccs > input[type="text"],
.request-main .form-field.comment-ccs > ul {
  border-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.request-main .comment-ccs + textarea {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  margin-top: 0;
}
.request-main .comment-ccs + textarea:focus {
  border-top: 1px solid var(--rw-action);
}
.request-main input#mark_as_solved {
  display: none;
}
.request-title {
  width: 100%;
}
@media (min-width: 980px) {
  .request-title {
    border-bottom: 1px solid var(--rw-surface);
    margin-bottom: 0;
    max-width: 66%;
    padding-bottom: 20px;
  }
}
.request-sidebar {
  border-bottom: 1px solid var(--rw-surface);
  border-top: 1px solid var(--rw-surface);
  flex: 1 0 auto;
  order: 0;
}
@media (min-width: 980px) {
  .request-sidebar {
    background-color: var(--rw-surface);
    border: 0;
    border-radius: 10px;
    flex: 0 0 auto;
    font-size: 13px;
  }
}
.request-sidebar .h2,
.request-sidebar h2 {
  font-size: 15px;
  font-weight: 600;
  position: relative;
}
@media (min-width: 980px) {
  .request-sidebar .h2,
  .request-sidebar h2 {
    display: none;
  }
}
.request-details {
  border-bottom: 1px solid var(--rw-surface);
  font-size: 0;
  margin: 0;
  padding-bottom: 20px;
}
.request-details:last-child {
  border: 0;
}
.request-details dd,
.request-details dt {
  display: inline-block;
  font-size: 13px;
  margin: 20px 0 0;
  vertical-align: top;
}
.request-details dd {
  padding: 0 10px;
  width: 60%;
}
.request-details dd:after {
  content: "\a";
  white-space: pre;
}
.request-details dt {
  color: var(--rw-text-muted);
  width: 40%;
}
.request-details .request-collaborators {
  display: inline-block;
}
.request-attachments dd,
.request-attachments dt {
  width: 100%;
}
.request-attachments dd {
  margin: 10px 0 0;
}
.request-follow-up {
  padding-top: 20px;
}

/* ------------------------------------------------------------
   5.10 Pagination and meta data
   ------------------------------------------------------------ */
.pagination {
  margin: 20px 0;
  text-align: center;
}
.pagination .pagination-list {
  display: flex;
  gap: 24px;
  justify-content: flex-start;
  list-style-type: none;
  padding: 0;
}
.pagination-first,
.pagination-last,
.pagination-next,
.pagination-prev {
  display: inline-block;
}
.pagination-first-link,
.pagination-last-link {
  padding: 0 10px;
}
.pagination-first-text,
.pagination-last-text {
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
.pagination-next-link {
  padding-right: 10px;
}
.pagination-next-text {
  margin-right: 10px;
}
[dir="rtl"] .pagination-next-link {
  padding-left: 10px;
}
[dir="rtl"] .pagination-next-text {
  margin-left: 10px;
}
.pagination-prev-link {
  padding-left: 10px;
}
.pagination-prev-text {
  margin-left: 10px;
}
[dir="rtl"] .pagination-prev-link {
  padding-right: 10px;
}
[dir="rtl"] .pagination-prev-text {
  margin-right: 10px;
}
.meta-group {
  display: block;
}
.meta-group-opposite {
  float: right;
}
[dir="rtl"] .meta-group-opposite {
  float: left;
}
.meta-group * {
  display: inline;
}
.meta-data {
  color: var(--rw-text-muted);
  font-size: 13px;
}
.meta-data:not(:last-child):after {
  content:;
  margin: 0 5px;
}

/* ------------------------------------------------------------
   5.11 User profile
   ------------------------------------------------------------ */
.profile-header .container {
  display: flex;
  flex-wrap: wrap;
}
@media (min-width: 980px) {
  .profile-header .container {
    flex-wrap: nowrap;
  }
}
.profile-header .profile-info {
  display: flex;
  flex-basis: 100%;
  flex-wrap: wrap;
  min-width: 0;
}
.profile-avatar {
  align-self: center;
  line-height: 0;
  margin-right: 10px;
  position: relative;
}
[dir="rtl"] .profile-avatar {
  margin-left: 10px;
  margin-right: 0;
}
.profile-avatar .user-avatar {
  height: 80px;
  width: 80px;
}
.profile-avatar .icon-agent {
  bottom: 0;
  right: 0;
}
.profile-header .basic-info {
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  word-wrap: break-word;
  display: flex;
  flex-basis: 0;
  flex-direction: column;
  flex-grow: 1;
  justify-content: center;
  min-width: 0;
}
.profile-header .basic-info .name {
  display: inline;
  line-height: 25px;
  margin: 0;
  vertical-align: middle;
}
.profile-header .options {
  align-items: flex-start;
  display: flex;
  flex-basis: 100%;
  flex-wrap: wrap;
  margin-top: 12px;
}
@media (min-width: 980px) {
  .profile-header .options {
    flex-basis: auto;
    flex-wrap: nowrap;
    margin-left: 10px;
    margin-top: 0;
  }
  [dir="rtl"] .profile-header .options {
    margin-left: 0;
    margin-right: 10px;
  }
  .profile-header .options > :not(:last-child) {
    margin-bottom: 0;
    margin-right: 10px;
  }
  [dir="rtl"] .profile-header .options > :not(:last-child) {
    margin-left: 10px;
    margin-right: 0;
  }
}
.user-profile-actions {
  margin-bottom: 15px;
  width: 100%;
}
.profile-header .description {
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  word-wrap: break-word;
  flex-basis: 100%;
  margin: 15px 0;
}
.profile-stats {
  display: flex;
  flex-basis: 100%;
  flex-direction: column;
  font-size: 13px;
  padding-left: 0;
  padding-right: 0;
}
.profile-stats .stat {
  display: flex;
  margin-bottom: 10px;
}
.profile-stats .stat-label {
  color: var(--rw-text-muted);
  flex: 0 0 100px;
  margin-right: 10px;
}
[dir="rtl"] .profile-stats .stat-label {
  margin-left: 10px;
  margin-right: 0;
}
.dark-background .stat-label,
.profile-header .stat-label {
  color: #ced4da;
}
.profile-stats-activity {
  border-top: 1px solid rgba(236, 240, 241, 0.2);
  margin-top: 15px;
}
@media (min-width: 980px) {
  .profile-stats-activity {
    border-top: 0;
    flex-direction: row;
  }
  .profile-stats-activity .stat {
    flex-direction: column;
  }
}
.profile-stats-activity .stat:first-child {
  margin-top: 10px;
}
@media (min-width: 980px) {
  .profile-stats-activity .stat:first-child {
    margin-top: 0;
  }
  .profile-stats-activity .stat:not(:last-child) {
    margin-right: 40px;
  }
  [dir="rtl"] .profile-stats-activity .stat:not(:last-child) {
    margin-left: 40px;
    margin-right: 0;
  }
  .profile-stats-activity .stat-label {
    flex: 0 1 auto;
  }
}
.profile-stats-counters {
  border-bottom: 1px solid rgba(236, 240, 241, 0.2);
}
@media (min-width: 980px) {
  .profile-stats-counters {
    border-bottom: 0;
    flex: 0 0 200px;
    margin-left: 40px;
  }
  [dir="rtl"] .profile-stats-counters {
    margin-left: 0;
    margin-right: 40px;
  }
  .profile-stats-counters {
    flex: 0 0 270px;
    margin-left: 60px;
  }
  [dir="rtl"] .profile-stats-counters {
    margin-left: 0;
    margin-right: 60px;
  }
  .profile-stats-counters .stat {
    flex-direction: column;
    flex-direction: row;
  }
  .profile-stats-counters .stat:not(:last-child) {
    margin-bottom: 15px;
  }
  .profile-stats-counters .stat-label {
    flex: 0 1 auto;
    flex: 0 0 100px;
  }
}
.profile-private-badge {
  border: 1px solid var(--rw-action);
  border-radius: 4px;
  color: var(--rw-action);
  flex-basis: 100%;
  font-size: 12px;
  padding: 5px 20px;
  text-align: center;
}
.profile-private-badge .profile-private-icon {
  line-height: 15px;
  margin-left: 5px;
}
@media (min-width: 980px) {
  .profile-private-badge {
    flex-basis: auto;
  }
}
.profile-nav {
  background-color: #f2f2f2;
  margin-bottom: 37px;
}
.profile-section {
  width: 100%;
}
@media (min-width: 980px) {
  .profile-section {
    width: calc(100% - 330px);
  }
}
.profile-section-header {
  display: flex;
  flex-wrap: wrap;
}
.profile-section-title {
  flex-basis: 100%;
  margin-bottom: 0;
}
.profile-section-description {
  color: var(--rw-text-muted);
  flex-basis: 100%;
  font-size: 13px;
  overflow: hidden;
  padding: 10px 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (min-width: 980px) {
  .profile-section-description {
    flex: 1 0 50%;
    padding-bottom: 0;
  }
}
.profile-section-sorter {
  border-top: 1px solid #eee;
  flex-basis: 100%;
  font-size: 13px;
}
.profile-section-sorter .zd-dropdown-toggle {
  padding: 10px 0;
  width: 100%;
}
.profile-section-sorter .zd-dropdown-toggle:after {
  position: absolute;
  right: 0;
}
[dir="rtl"] .profile-section-sorter .zd-dropdown-toggle:after {
  left: 0;
  right: auto;
}
@media (min-width: 980px) {
  .profile-section-sorter .zd-dropdown-toggle:after {
    position: relative;
  }
  .profile-section-sorter {
    border-top: 0;
    flex: 0 1 auto;
    margin-left: 20px;
    padding-top: 0;
  }
  [dir="rtl"] .profile-section-sorter {
    margin-left: 0;
    margin-right: 20px;
  }
}
.profile-badges-items {
  margin-top: 25px;
}
.profile-badges-item {
  border-top: 1px solid var(--rw-surface);
  display: flex;
  flex: 1;
  flex-direction: row;
  justify-content: flex-start;
  padding: 27px 12px;
}
.profile-badges-item > div {
  padding-left: 12px;
  padding-right: 12px;
}
.profile-badges-item-image {
  height: 40px;
  margin-right: 12px;
  width: 40px;
}
.profile-badges-item-image img {
  max-height: 40px;
}
[dir="rtl"] .profile-badges-item-image {
  margin-left: 12px;
  margin-right: 0;
}
.profile-badges-item-metadata-title,
.profile-badges-item-title {
  font-size: 15px;
  margin-bottom: 10px;
}
.profile-badges-item-title {
  font-weight: 600;
}
.profile-badges-item-description,
.profile-badges-item-metadata-description {
  color: var(--rw-text-muted);
  font-size: 13px;
  margin: 0;
}
.profile-badges-item-metadata {
  margin-left: auto;
  text-align: right;
}
[dir="rtl"] .profile-badges-item-metadata {
  margin-left: 0;
  margin-right: auto;
  text-align: left;
}
.profile-contribution {
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  word-wrap: break-word;
  padding: 20px 0;
  position: relative;
}
.profile-contribution-header {
  margin-bottom: 5px;
}
.profile-contribution-title {
  display: inline;
  font-size: 15px;
  line-height: 21px;
  margin: 0 0 5px;
  vertical-align: middle;
}
.profile-contribution-body {
  margin: 10px 0;
}
.profile-contribution-list > .profile-contribution {
  border-top: 1px solid #eee;
}
@media (min-width: 980px) {
  .profile-contribution-list > .profile-contribution {
    padding-left: 30px;
  }
  [dir="rtl"] .profile-contribution-list > .profile-contribution {
    padding-left: 0;
    padding-right: 30px;
  }
}
.profile-contribution-list > .profile-contribution:last-child {
  border-bottom: 1px solid #eee;
}
.profile-contribution-icon {
  color: #ccc;
  left: 0;
  line-height: 25px;
  position: absolute;
}
[dir="rtl"] .profile-contribution-icon {
  right: 0;
}
.profile-contribution-icon svg {
  vertical-align: middle;
}
.profile-contribution-list .profile-contribution-header {
  margin-left: 30px;
}
[dir="rtl"] .profile-contribution-list .profile-contribution-header {
  padding-left: 0;
  padding-right: 30px;
}
@media (min-width: 980px) {
  .profile-contribution-list .profile-contribution-header {
    margin-left: 0;
  }
  [dir="rtl"] .profile-contribution-list .profile-contribution-header {
    padding-right: 0;
  }
}
.profile-section .no-activity,
.profile-section .private-activity {
  color: #999;
  display: block;
  margin-top: 40px;
}
.private-activity-icon {
  margin-right: 10px;
}
[dir="rtl"] .private-activity-icon {
  margin-left: 10px;
  margin-right: 0;
}
.profile-activity-list {
  margin-top: 25px;
}
.profile-activity {
  padding-bottom: 30px;
  padding-left: 30px;
  position: relative;
}
[dir="rtl"] .profile-activity {
  padding-left: 0;
  padding-right: 30px;
}
@media (min-width: 980px) {
  .profile-activity:not(:last-child) {
    border-left: 1px solid #ddd;
  }
  [dir="rtl"] .profile-activity:not(:last-child) {
    border-left: 0;
    border-right: 1px solid #ddd;
  }
}
.profile-activity-header {
  align-items: center;
  display: flex;
  margin-left: 35px;
}
[dir="rtl"] .profile-activity-header {
  margin-left: 0;
  margin-right: 35px;
}
@media (min-width: 980px) {
  .profile-activity-header {
    margin-left: 0;
  }
  [dir="rtl"] .profile-activity-header {
    margin-right: 0;
  }
}
.profile-activity-header .user-avatar {
  align-self: flex-start;
  height: 40px;
  margin-right: 10px;
  min-width: 40px;
  width: 40px;
}
[dir="rtl"] .profile-activity-header .user-avatar {
  margin-left: 10px;
  margin-right: 0;
}
.profile-activity-description {
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  word-wrap: break-word;
  margin: 0;
  min-width: 0;
  width: 100%;
}
.profile-activity-description span:first-child {
  display: inline;
  font-weight: 600;
}
.profile-activity-contribution {
  background-color: #f7f7f7;
  border-radius: 8px;
  margin-top: 10px;
  padding: 20px;
}
@media (min-width: 980px) {
  .profile-activity-contribution {
    margin-left: 50px;
    margin-top: 0;
  }
  [dir="rtl"] .profile-activity-contribution {
    margin-left: 0;
    margin-right: 50px;
  }
}
.profile-activity-icon {
  background-color: var(--rw-paper);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 14px 14px;
  border-radius: 50%;
  color: #ccc;
  height: 28px;
  left: 0;
  position: absolute;
  text-align: center;
  width: 28px;
}
[dir="rtl"] .profile-activity-icon {
  right: 0;
}
@media (min-width: 980px) {
  .profile-activity-icon {
    left: -14px;
  }
  [dir="rtl"] .profile-activity-icon {
    right: -14px;
  }
}
.profile-activity-icon svg {
  height: 1em;
  margin: auto;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  width: 1em;
}

/* ------------------------------------------------------------
   5.12 Search results page
   ------------------------------------------------------------ */
.search-results {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media (min-width: 980px) {
  .search-results {
    flex-direction: row;
  }
}
.search-results-column {
  flex: 1;
}
@media (min-width: 980px) {
  .search-results-column {
    flex: 0 0 75%;
  }
}
.search-results-sidebar {
  border-top: 1px solid var(--rw-surface);
  flex: 1 0 auto;
  margin-bottom: 20px;
  padding: 0;
}
@media (min-width: 980px) {
  .search-results-sidebar {
    border: 0;
    flex: 0 0 20%;
    height: auto;
  }
}
.search-results-sidebar .sidenav-item {
  border-radius: 4px;
  color: var(--rw-text);
  margin-bottom: 4px;
  padding: 10px 36px;
}
.search-results-sidebar .sidenav-item.current,
.search-results-sidebar .sidenav-item:hover {
  background-color: #e9ebed;
  text-decoration: none;
}
.search-results-sidebar .sidenav-subitem {
  unicode-bidi: embed;
}
.search-results-sidebar .sidenav-tag {
  align-items: flex-start;
  display: flex;
  flex-direction: row;
  flex-grow: 0;
}
.search-results-sidebar .sidenav-tag .content-tag {
  background: #e9ebed;
  border-radius: 4px;
  padding: 4px 12px;
  text-decoration: none;
}
.search-results-sidebar .sidenav-tag .content-tag .label {
  color: #49545c;
  display: inline-block;
  flex-grow: 0;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: -0.000427656px;
  line-height: 24px;
  text-align: center;
  vertical-align: middle;
}
.search-results-sidebar .sidenav-tag .content-tag .close-icon {
  color: #555;
  display: inline-block;
  vertical-align: middle;
}
.search-results-sidebar .collapsible-sidebar {
  margin-bottom: 30px;
}
.search-results-sidebar .collapsible-sidebar .multibrand-filter-list {
  list-style: none;
  padding-left: 0;
}
.search-results-sidebar .collapsible-sidebar[aria-expanded="false"] .multibrand-filter-list {
  display: none;
}
@media (min-width: 980px) {
  .search-results-sidebar .collapsible-sidebar[aria-expanded="false"] .multibrand-filter-list {
    display: block;
  }
}
.search-results-sidebar .multibrand-filter-list--collapsed li:nth-child(1n + 6) {
  display: none;
}
.search-results-sidebar .multibrand-filter-list .doc-count {
  color: #666;
}
.search-results-sidebar .see-all-filters {
  background: none;
  border: none;
  color: var(--rw-text);
  cursor: pointer;
  display: block;
  padding: 10px;
}
.search-results-sidebar .see-all-filters[aria-hidden="true"] {
  display: none;
}
.search-results-sidebar .see-all-filters:hover {
  text-decoration: underline;
}
.search-results-sidebar .see-all-filters:after {
  content: " ⌄";
  font-weight: 700;
}
.search-results-subheading {
  font-size: 18px;
  font-weight: 600;
}
.search-results-list {
  margin-bottom: 25px;
}
.search-results-list > li {
  padding: 20px 0;
}
.search-results-list > li:first-child {
  border-top: 1px solid var(--rw-surface);
}
.search-results .no-results {
  align-items: center;
  display: flex;
  flex-direction: column;
  padding-top: 4rem;
}
.search-results .no-results .headline {
  color: #2f3941;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.45px;
  line-height: 24px;
}
.search-results .no-results .action-prompt {
  color: #68737d;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.154px;
  line-height: 20px;
}
.search-results .no-results .action-prompt a,
.search-results .no-results .action-prompt a:visited {
  color: var(--rw-text);
}
.search-result-title-container {
  align-items: center;
  display: flex;
  justify-content: space-between;
}
.search-result-meta-count,
.search-result-votes {
  color: var(--rw-text-muted);
  font-size: 13px;
}
.search-result-meta-count-icon,
.search-result-votes-icon {
  color: var(--rw-action);
  height: 13px;
  vertical-align: middle;
  width: 13px;
}
[dir="ltr"] .search-result-meta-count,
[dir="ltr"] .search-result-votes {
  margin-left: 20px;
}
[dir="rtl"] .search-result-meta-count,
[dir="rtl"] .search-result-votes {
  margin-right: 20px;
}
.search-result-meta-container {
  color: #666;
  display: flex;
  flex-direction: column;
}
@media (min-width: 980px) {
  .search-result-meta-container {
    align-items: center;
    flex-direction: row;
  }
  .search-result-meta-container nav {
    flex: 1;
  }
  [dir="ltr"] .search-result-meta-container .meta-data {
    margin-left: 20px;
  }
  [dir="rtl"] .search-result-meta-container .meta-data {
    margin-right: 20px;
  }
}
.search-result-meta-container .meta-data:after {
  content: none;
}
.search-result-breadcrumbs {
  margin: 0;
}
.search-result-description {
  margin-bottom: 0;
  margin-top: 10px;
  word-break: break-word;
}

/* ------------------------------------------------------------
   5.13 Notifications, dropdowns, content tags
   ------------------------------------------------------------ */
.notification {
  border: 1px solid;
  color: #555;
  display: table;
  font-family: sans-serif;
  font-size: 12px;
  padding: 13px 15px;
  transition: height 0.2s;
  width: 100%;
}
.notification a {
  color: #158ec2;
}
.notification-inline.notification-error:before {
  display: table-cell;
}
.notification + .notification {
  margin-bottom: -1px;
  position: relative;
  top: -1px;
}
.notification-error {
  background: #ffeded;
  border-color: #f7cbcb;
}
.notification-error .notification-inline.notification-error:before {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cg fill='none' stroke='%23555'%3E%3Ccircle cx='5.5' cy='6.5' r='5'/%3E%3Cpath stroke-linecap='round' d='M5.5 3.5v3'/%3E%3C/g%3E%3Ccircle cx='5.5' cy='9' r='1' fill='%23555'/%3E%3C/svg%3E");
}
.notification-inline.notification-error:before {
  background-size: cover;
  content: "";
  display: inline-block;
  height: 14px;
  vertical-align: middle;
  width: 14px;
}
.notification-inline {
  border-radius: 4px;
  line-height: 14px;
  margin-top: 5px;
  padding: 5px;
  position: relative;
  text-align: left;
  vertical-align: middle;
}
[dir="rtl"] .notification-inline {
  text-align: right;
}
.notification-inline[aria-hidden="true"] {
  display: none;
}
.notification-inline.notification-error:before {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cg fill='none' stroke='%23e35b66'%3E%3Ccircle cx='5.5' cy='6.5' r='5'/%3E%3Cpath stroke-linecap='round' d='M5.5 3.5v3'/%3E%3C/g%3E%3Ccircle cx='5.5' cy='9' r='1' fill='%23e35b66'/%3E%3C/svg%3E");
  margin: -2px 5px 0 0;
}
[dir="rtl"] .notification-inline.notification-error:before {
  margin: 0 0 0 5px;
}
.notification-inline.notification-error {
  background-color: #fff0f1;
  border: 1px solid #e35b66;
  color: #cc3340;
}
.dropdown {
  display: inline-block;
  position: relative;
}
.zd-dropdown-toggle {
  background: none;
  border: 0;
  cursor: pointer;
  display: inline-block;
  padding: 0;
  text-align: initial;
  vertical-align: middle;
}
.zd-dropdown-toggle:hover {
  text-decoration: none;
}
.zd-dropdown-toggle > * {
  display: inline-block;
}
.zd-dropdown-toggle[aria-expanded="true"] + .dropdown-menu {
  display: block;
}
.dropdown-menu {
  background: var(--rw-paper);
  border: 1px solid #d8dcde;
  border-radius: 3px;
  box-shadow: 0 20px 30px 0 rgba(23, 73, 77, 0.15);
  display: none;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  left: 0;
  margin-top: 1px;
  min-width: 170px;
  padding: 10px 0;
  position: absolute;
  text-align: left;
  z-index: 1000;
}
.dropdown-menu [role="separator"] {
  border-bottom: 1px solid #e9ebed;
  margin: 4px 0;
}
.dropdown-menu [role="menuitem"],
.dropdown-menu [role="menuitemradio"] {
  -webkit-appearance: none;
  background-color: transparent;
  border: 0;
  color: #2f3941;
  cursor: pointer;
  display: block;
  line-height: inherit;
  padding: 7px 40px 7px 20px;
  text-align: start;
  white-space: nowrap;
  width: 100%;
}
[dir="rtl"] .dropdown-menu [role="menuitem"],
[dir="rtl"] .dropdown-menu [role="menuitemradio"] {
  padding: 7px 20px 7px 40px;
}
.dropdown-menu [role="menuitem"]:focus,
.dropdown-menu [role="menuitem"]:hover,
.dropdown-menu [role="menuitemradio"]:focus,
.dropdown-menu [role="menuitemradio"]:hover {
  background: rgba(31, 115, 183, 0.08);
  color: #2f3941;
  text-decoration: none;
}
.dropdown-menu [role="menuitem"][aria-checked="true"],
.dropdown-menu [role="menuitem"][aria-selected="true"],
.dropdown-menu [role="menuitemradio"][aria-checked="true"],
.dropdown-menu [role="menuitemradio"][aria-selected="true"] {
  cursor: default;
}
.dropdown-menu [role="menuitem"][aria-checked="true"]:after,
.dropdown-menu [role="menuitem"][aria-selected="true"]:after,
.dropdown-menu [role="menuitemradio"][aria-checked="true"]:after,
.dropdown-menu [role="menuitemradio"][aria-selected="true"]:after {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' aria-hidden='true' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m1 7 3 3 7-7'/%3E%3C/svg%3E");
  content: "";
  display: inline-block;
  height: 12px;
  margin-left: 10px;
  width: 12px;
}
[dir="rtl"] .dropdown-menu [role="menuitem"][aria-checked="true"]:after,
[dir="rtl"] .dropdown-menu [role="menuitem"][aria-selected="true"]:after,
[dir="rtl"] .dropdown-menu [role="menuitemradio"][aria-checked="true"]:after,
[dir="rtl"] .dropdown-menu [role="menuitemradio"][aria-selected="true"]:after {
  float: left;
  margin-left: 0;
  margin-right: 10px;
}
.dropdown-menu [role="menuitem"][aria-hidden="true"],
.dropdown-menu [role="menuitem"][hidden],
.dropdown-menu [role="menuitemradio"][aria-hidden="true"],
.dropdown-menu [role="menuitemradio"][hidden] {
  display: none !important;
}
.dropdown-menu-end {
  left: auto;
  right: 0;
}
.dropdown-menu-top {
  bottom: 100%;
  margin-bottom: 1px;
}
[dir="rtl"] .dropdown-menu {
  left: auto;
  right: 0;
  text-align: right;
}
[dir="rtl"] .dropdown-menu-end {
  left: 0;
  right: auto;
}
.dropdown-chevron-icon {
  vertical-align: middle;
}
.content-tags > p {
  color: #68737d;
  margin-bottom: 4px;
  margin-top: 32px;
}
.content-tags-add-hint {
  color: #68737d;
  font-size: 14px;
}
.content-tag-list {
  display: flex;
  flex-wrap: wrap;
  word-break: break-word;
}
.content-tag-list li {
  border-right: 1px solid #c2c8cc;
  margin-bottom: 4px;
}
[dir="ltr"] .content-tag-list li {
  margin-right: 8px;
  padding-right: 8px;
}
[dir="rtl"] .content-tag-list li {
  margin-left: 8px;
  padding-left: 8px;
}
.content-tag-list li:last-child {
  border: none;
}


/* ------------------------------------------------------------
   5.14 Brand refinements
   Sits after the Copenhagen rules so equal-specificity rules win.
   ------------------------------------------------------------ */

/* Search field (every search box: hero, page banner, results) */
.search {
  background: var(--rw-paper);
  border: 1px solid var(--rw-ink-200);
  border-radius: var(--rw-radius);
}

.search:focus-within {
  border-color: var(--rw-ink-950);
}

/* Focus ring goes on the whole field (input + clear button), not the
   bare input, so it always matches the field's visible edge. */
.search input[type="search"]:focus-visible {
  box-shadow: none !important;
  outline: none !important;
}

.search:focus-within {
  outline: 2px solid var(--rw-signal-on-light);
  outline-offset: 2px;
}

.rw-hero .search:focus-within {
  outline-color: var(--rw-signal);
}

.search .clear-button,
.search input[type="search"] {
  border-radius: var(--rw-radius);
}

.search input[type="search"] {
  color: var(--rw-ink-950);
  font-size: 1rem;
  height: 48px;
}

.search input[type="search"]::placeholder {
  color: var(--rw-ink-500);
  opacity: 1;
}

.search .clear-button:hover {
  background-color: var(--rw-ink-950);
  color: var(--rw-paper);
}

.search-wrapper img {
  height: 20px;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
}

[dir="ltr"] .search input[type="search"] {
  padding-left: 48px;
}

/* Breadcrumbs */
.breadcrumbs li {
  color: var(--rw-ink-950);
  font-size: 0.875rem;
}

.breadcrumbs a {
  color: var(--rw-text-muted);
}

.breadcrumbs a:hover {
  color: var(--rw-action);
}

.breadcrumbs li + li:before {
  color: var(--rw-ink-300);
  margin: 0 8px;
}

/* Page headings on category, section, search pages */
.page-header-description {
  color: var(--rw-text-muted);
  font-size: 1.0625rem;
  max-width: 46rem;
}

/* Article page */
.rw-article-title {
  color: var(--rw-ink-950);
  font-family: var(--rw-font-display);
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 8px; /* date sits tight under the title... */
}

.article-header {
  margin-bottom: 32px; /* ...and clearly apart from the content */
}

.article-body {
  color: var(--rw-text-body);
  font-size: 1.0625rem;
  line-height: 1.65;
}

/* Heading map. The article title is the page's Heading 1, so body
   headings step down one level from the brand scale:
     Title (h1)        -> brand H1  Space Grotesk Light
     Body Heading 1    -> brand H2  Space Grotesk Regular
     Body Heading 2    -> brand H3  Inter Tight Medium
     Body Heading 3/4  -> brand H4  Inter Tight Semibold
   Sizes are scaled down from the marketing scale to suit 17px body text. */
.article-body h1 {
  font-family: var(--rw-font-display);
  font-size: 1.875rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 2.5rem 0 1rem;
}

.article-body h2 {
  font-family: var(--rw-font-sans);
  font-size: 1.375rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.3;
  margin: 2.25rem 0 0.75rem;
}

.article-body h3 {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 1.75rem 0 0.5rem;
}

.article-body h4 {
  font-size: 1rem;
  font-weight: 600;
  margin: 1.5rem 0 0.5rem;
}

.article-body > :first-child {
  margin-top: 0;
}

.article-body a {
  text-decoration-color: var(--rw-ink-300);
  text-underline-offset: 3px;
}

.article-body a:active,
.article-body a:focus,
.article-body a:hover {
  text-decoration-color: currentColor;
}

/* Section sidebar: active item uses the brand nav pattern
   (Signal-100 fill + 3px Signal marker) */
.article-sidebar .collapsible-sidebar-title {
  color: var(--rw-ink-950);
  font-family: var(--rw-font-sans);
  font-size: 1rem !important;
  font-weight: 600 !important;
}

.article-sidebar .article-link-items {
  gap: 2px !important;
}

.article-sidebar .article-link-items a {
  border-radius: var(--rw-radius);
  color: var(--rw-text-body);
  display: block;
  font-size: 0.9375rem;
  line-height: 1.4;
  padding: 8px 12px !important;
  position: relative;
  text-decoration: none;
}

.article-sidebar .article-link-items a:hover {
  background: var(--rw-ink-50);
  color: var(--rw-ink-950);
}

.article-sidebar .article-link-items a[aria-current="page"] {
  background: var(--rw-signal-100);
  color: var(--rw-ink-950);
  font-weight: 500;
}

.article-sidebar .article-link-items a[aria-current="page"]::before {
  background: var(--rw-signal);
  border-radius: 999px;
  bottom: 10px; /* marker spans the title, however many lines it wraps to */
  content: "";
  left: 0;
  position: absolute;
  top: 10px;
  width: 3px;
}

/* "Was this article helpful?" */
.rw-votes {
  background: var(--rw-bone);
  border-radius: var(--rw-radius);
  margin-top: 48px;
  padding: 24px;
  text-align: center;
}

.rw-votes-question {
  color: var(--rw-ink-950);
  font-size: 1rem;
  font-weight: 500;
  margin: 0 0 12px;
}

.rw-votes-controls {
  display: inline-flex;
  gap: 8px;
}

.rw-votes .article-vote {
  margin: 0;
  min-width: 88px;
}

.rw-vote-selected {
  --bs-btn-color: var(--rw-paper);
  --bs-btn-bg: var(--rw-ink-950);
  --bs-btn-border-color: var(--rw-ink-950);
  --bs-btn-hover-color: var(--rw-paper);
  --bs-btn-hover-bg: var(--rw-ink-800);
  --bs-btn-hover-border-color: var(--rw-ink-800);
}

.rw-votes-count {
  color: var(--rw-text-muted);
  display: block;
  font-size: 0.8125rem;
  margin-top: 8px;
}

/* Form fields (request forms) */
.form-field input,
select,
textarea {
  border: 1px solid var(--rw-ink-200);
  border-radius: var(--rw-radius);
}

.form-field input:focus,
select:focus,
textarea:focus {
  border-color: var(--rw-ink-950);
  box-shadow: none;
}

/* Section page article list */
.list-group-flush > .list-group-item {
  border-color: var(--rw-ink-150);
}

/* Article meta ("Last updated ..."), left-aligned under the title */
.rw-article-meta {
  margin: 0;
}

.rw-article-meta .meta-data {
  color: var(--rw-text-muted);
  font-size: 0.875rem;
}

/* Recently viewed + related articles: read as links, headed quietly */
.article-relatives {
  border-top: 0;
  margin-top: 32px;
}

.article-relatives h2,
.article-relatives h3 {
  color: var(--rw-ink-950);
  font-family: var(--rw-font-sans);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0;
  margin-bottom: 12px;
}

.article-relatives ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.article-relatives a {
  color: var(--rw-text);
  text-decoration: underline;
  text-decoration-color: var(--rw-ink-300);
  text-underline-offset: 3px;
}

.article-relatives a:hover {
  color: var(--rw-action);
  text-decoration-color: currentColor;
}

/* ------------------------------------------------------------
   Callout boxes (style guide 4.5)
   Emphasis order: Important (amber) > Note (blue) > Tip (Bone).

   Semantic classes (use these for new articles):
     <div class="rw-callout rw-callout--note">      <strong>Note:</strong> ...</div>
     <div class="rw-callout rw-callout--tip">       <strong>Tip:</strong> ...</div>
     <div class="rw-callout rw-callout--important"> <strong>Important:</strong> ...</div>

   Legacy classes keep working, re-mapped by role so existing articles
   show the right emphasis with no edits. Their names no longer describe
   their colours, which is why new articles should use the classes above.
     Note      .bg-secondary-light  -> info blue  #eaf1fc
     Tip       .bg-blue-light       -> Bone       #f5f5f0
     Important .bg-yellow-light     -> warn amber #fdf2dc
   ------------------------------------------------------------ */
.rw-callout {
  border-radius: var(--rw-radius);
  margin: 0 0 1rem;
  padding: 16px 20px;
}

.rw-callout > strong:first-child {
  color: var(--rw-ink-950);
  margin-right: 6px;
}

.rw-callout > :last-child {
  margin-bottom: 0;
}

.bg-secondary-light,
.rw-callout--note {
  background-color: var(--rw-info-bg) !important;
}

.bg-blue-light,
.rw-callout--tip {
  background-color: var(--rw-bone) !important;
}

.rw-callout--important {
  background-color: var(--rw-warn-bg) !important;
}

/* Zendesk's native editor callouts (supported custom properties, per
   Zendesk's templating cookbook), mapped to the same roles so either
   authoring route renders identically. */
:root {
  --zd-wysiwyg-callout-border-radius: var(--rw-radius);
  --zd-wysiwyg-callout-info-bg: var(--rw-info-bg);
  --zd-wysiwyg-callout-tip-bg: var(--rw-bone);
  --zd-wysiwyg-callout-warning-bg: var(--rw-warn-bg);
  --zd-wysiwyg-callout-error-bg: var(--rw-danger-bg);
}

/* Mobile: lists start at the content edge instead of a deep indent */
@media (max-width: 766.98px) {
  .article-body .rw-checklist,
  .article-body .rw-steps,
  .rw-checklist,
  .rw-steps {
    padding-left: 0;
  }
}

/* Inline code and API / permission scope strings (style guide 4.3).
   Ink on a pale surface instead of Bootstrap's pink. .rw-scope is the
   same look for scope lists, e.g.
   <code class="rw-scope">read:space:confluence</code> */
.article-body :not(pre) > code,
.rw-scope {
  background: var(--rw-ink-50);
  border: 1px solid var(--rw-ink-150);
  border-radius: 4px;
  color: var(--rw-ink-800);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85em;
  margin: 0 1px;
  padding: 1px 6px;
  white-space: nowrap;
}

.article-body pre {
  background: var(--rw-ink-50);
  border: 1px solid var(--rw-ink-150);
  border-radius: var(--rw-radius);
  color: var(--rw-ink-800);
}

/* ------------------------------------------------------------
   Vertical rhythm in articles
   Section breaks (<hr>) get equal space above and below. Margins
   collapse between neighbours, so the larger margin wins: a list,
   table or callout before the rule and a heading after it all end up
   40px from the line.
   ------------------------------------------------------------ */
.article-body hr {
  border: 0;
  border-top: 1px solid var(--rw-ink-150);
  margin: 2.5rem 0;
  opacity: 1;
}

.article-body .rw-checklist,
.article-body .rw-steps {
  margin-bottom: 1.5rem;
}

.article-body .rw-accordion,
.article-body .rw-meta,
.article-body .rw-walkthrough,
.article-body [class*="bg-"][class*="-light"],
.article-body .rw-callout {
  margin-bottom: 1.5rem;
}

/* Tables without an rw- class (pasted or editor-made): brand baseline,
   so they don't look like a different site. rw-table is still the
   recommended markup. */
.article-body table:not([class*="rw-"]) {
  font-size: 0.9375rem;
}

.article-body table:not([class*="rw-"]) td,
.article-body table:not([class*="rw-"]) th {
  border-color: var(--rw-ink-150);
  padding: 12px 16px;
  vertical-align: top;
}

.article-body table:not([class*="rw-"]) thead th,
.article-body table:not([class*="rw-"]) tr:first-child > th {
  background-color: var(--rw-ink-25);
  color: var(--rw-ink-950);
  font-weight: 600;
}

/* Follow controls (Product Changelog article, Organization requests) */
.rw-article-meta {
  align-items: center;
  display: flex;
  flex: 1 1 100%; /* full row inside the flex article header */
  width: 100%;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: space-between;
}

.rw-follow {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
}

.rw-follow button {
  font-size: 0.875rem !important;
  min-width: 96px;
}

/* Following state: filled Ink, so it reads as "on". Zendesk marks the
   state with one of these attributes depending on the helper version. */
.rw-follow button[data-selected="true"],
.rw-follow button[aria-pressed="true"],
.rw-follow button.subscribed {
  --bs-btn-bg: var(--rw-ink-950);
  --bs-btn-color: var(--rw-paper);
  --bs-btn-hover-bg: var(--rw-ink-800);
  --bs-btn-hover-color: var(--rw-paper);
  background-color: var(--rw-ink-950);
  color: var(--rw-paper);
}

/* Page title with its primary action on the right (My requests) */
.rw-title-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  margin-bottom: 8px;
}

.rw-title-row h1 {
  margin: 0;
}

/* Pagination (search results, profile lists): centred, so a lone
   "Next" on page 1 doesn't sit stranded at the left edge */
.pagination .pagination-list {
  justify-content: center;
}

/* Account menu: Sign out separated from the task links */
.main-header .rw-menu-signout {
  border-top: 1px solid var(--rw-ink-150);
  margin-top: 6px;
  padding-top: 6px;
}

/* Hide the empty item when change_password renders nothing (SSO users) */
.main-header .menu--dropdown > li:empty,
.main-header .menu--dropdown > li:not(:has(*)) {
  display: none;
}

/* Search sidebar "Show more" (sources / categories / topics):
   lines up with the filter names above it and uses the theme's drawn
   chevron instead of a typed "⌄" glyph, which sat low on the baseline. */
.search-results-sidebar .see-all-filters {
  align-items: center;
  color: var(--rw-action);
  display: inline-flex;
  font-size: 0.9375rem;
  font-weight: 500;
  gap: 8px;
  padding: 10px 36px;
}

.search-results-sidebar .see-all-filters:hover {
  color: var(--rw-action-hover);
  text-decoration: none;
}

.search-results-sidebar .see-all-filters:after {
  border-color: currentColor;
  border-style: solid;
  border-width: 0 1.5px 1.5px 0;
  content: "";
  display: inline-block;
  height: 0.4em;
  transform: translateY(-0.15em) rotate(45deg);
  width: 0.4em;
}

.search-results-sidebar .see-all-filters[aria-expanded="true"]:after {
  transform: translateY(0.1em) rotate(-135deg);
}

/* Submit a request form: fill the column up to 650px. Its column is a
   flex container, so without this the form shrank to fit its contents
   (half-width on iPads). Right-aligned within its column on desktop. */
.rw-page-new-request .form {
  flex: 1 1 auto;
  max-width: 650px;
  width: 100%;
}

/* No floating back-to-top on the form page: on phones it would sit
   over the left-aligned Submit button. */
body:has(.rw-page-new-request) .rw-to-top {
  display: none;
}

/* iOS Safari paints buttons without a colour in system blue. Give
   every button a colour by default (styled buttons override this). */
button {
  color: inherit;
}

/* Collapsible sidebars and nav on small screens (search filters,
   "Articles in this section", requests nav). Ink icon instead of
   iOS blue; one chevron that flips when open instead of chevron/X. */
.collapsible-nav-toggle,
.collapsible-sidebar-toggle {
  color: var(--rw-ink-700);
}

.collapsible-sidebar-toggle .x-icon,
.collapsible-nav-toggle .x-icon {
  display: none !important;
}

.collapsible-sidebar-toggle .chevron-icon,
.collapsible-nav-toggle .chevron-icon {
  display: inline-block !important;
  transition: transform 0.2s ease;
}

.collapsible-sidebar-toggle[aria-expanded="true"] .chevron-icon,
.collapsible-nav-toggle[aria-expanded="true"] .chevron-icon {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .collapsible-sidebar-toggle .chevron-icon,
  .collapsible-nav-toggle .chevron-icon {
    transition: none;
  }
}

/* Collapsed sidebar: show only the title row. The box was clipped to
   45px, which let the top of the first (highlighted) filter peek out
   as a grey bar. */
@media (max-width: 979.98px) {
  .collapsible-sidebar:not([aria-expanded="true"]) > :not(.collapsible-sidebar-toggle):not(.collapsible-sidebar-title) {
    display: none;
  }
}

/* Request form rich-text editor (Zendesk uses CKEditor 5): put the
   focus ring around the whole editor, toolbar included, instead of
   only the typing area. */
.ck.ck-editor__editable:focus,
.ck.ck-editor__editable:focus-visible,
.ck.ck-editor__editable.ck-focused {
  box-shadow: none !important;
  outline: none !important;
}

.ck.ck-editor:focus-within {
  border-radius: var(--rw-radius);
  outline: 2px solid var(--rw-signal-on-light);
  outline-offset: 2px;
}

/* iPhone zooms in on any field with text smaller than 16px. Fields on
   the request form use 16px so typing doesn't trigger the zoom. */
.rw-page-new-request [contenteditable="true"],
.rw-page-new-request input,
.rw-page-new-request select,
.rw-page-new-request textarea {
  font-size: 16px;
}


/* ================================================================
   6. REWIND KB COMPONENTS (rw- prefix)

   Documented in the KB style guide, Section 10.
   Colour values come from the tokens in section 1.
   ================================================================ */

/* ============================================
   ARTICLE CALLOUT BOX
   Usage: Add class="bg-yellow-light" to a div
   in the article body to highlight important
   information or warnings
   ============================================ */
.bg-yellow-light {
    background-color: var(--rw-warn-bg) !important;
}

/* ============================================================
   REWIND KB — TABLE COMPONENT SYSTEM

   Colours: see the design tokens in section 1 of this file.

   Architecture:
     rw-meta               — Article metadata block (existing, unchanged)
     rw-table              — Base: shared chrome for all content tables
       rw-table--data      — Top-header: permissions, coverage, comparison.
                             Cells hold single symbolic verdicts
                             (check/dash/badge). Centered + middle-aligned.
       rw-table--index     — Left-header: data residency, platform matrices,
                             and description/prose tables (component → what
                             it covers). Left-aligned + top-aligned.
       rw-table--row-labels — Optional modifier: shades first column as label
		rw-section-row       — Full-width group label row (both modifiers)
     rw-table-note        — Full-width note row for table-wide caveats
     rw-accordion          — Expanding FAQ / Troubleshooting component

   Utilities (standalone, usable anywhere):
     rw-badge rw-badge-[color]  — Colour labels
     rw-check / rw-dash         — Yes / No symbols (require aria-label)

   Alignment rule (KB style guide 10.4): alignment follows column
   content type. Columns of sentences, phrases, or badge lists are
   left + top aligned (use rw-table--index). Columns where each cell
   is a single symbolic verdict are center + middle aligned (use
   rw-table--data). Row label columns are always left-aligned.

   Colour-to-meaning mapping is defined in the KB style guide,
   not in this file.
   ============================================================ */

/* ============================================================
   RW-META
   Modified [Aug 2026]:
   — CSS table display: label and value cells get full-height
     backgrounds and vertical centering natively (fixes the
     mobile wrap bug and top-aligned short cells). Values keep
     normal inline flow, so links and mixed content are safe.
   — Standalone component: fully enclosed with its own border
     and 4px radius on all corners. Does NOT assume a summary
     block above it — safe on articles with no summary.
   — 4px left accent echoes the summary block's accent bar so
     the two read as siblings when stacked, without depending
     on each other.
   — No bottom margin: the rw-divider that follows owns the
     gap before the first heading.
   ============================================================ */

.rw-meta {
  width: 100%;
  border: 1px solid var(--rw-furniture);
  border-left: 4px solid var(--rw-furniture);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 0;
}
 
.rw-meta-row {
  display: table;
  width: 100%;
  border-bottom: 1px solid var(--rw-furniture);
}
 
.rw-meta-row:last-child {
  border-bottom: none;
}
 
.rw-meta-label {
  display: table-cell;
  vertical-align: middle;
  font-weight: 600;
  color: var(--rw-text);
  background-color: var(--rw-furniture-bg);
  padding: 7px 12px;
  width: 200px;
  min-width: 200px;
  white-space: nowrap;
  border-right: 1px solid var(--rw-furniture);
}
 
.rw-meta-value {
  display: table-cell;
  vertical-align: middle;
  padding: 7px 12px;
  color: var(--rw-text);
}
 
/* Narrow screens: let labels wrap and give the value column room */
@media (max-width: 640px) {
  .rw-meta-label {
    white-space: normal;
    width: 35%;
    min-width: 130px;
  }
}

/* ============================================================
   RW-TABLE — BASE
   Always used together with a modifier class.
   Never use rw-table alone.
   ============================================================ */

.rw-table {
  width: 100%;
  border: 1px solid var(--rw-border);
  border-radius: 8px;
  overflow: hidden;
  margin: 0.5rem 0 1.5rem; /* top reduced from 1.5rem [Aug 2026]: the preceding
                              paragraph's 16px margin supplies most of the gap, and
                              the rw-table-wrapper/zd-html-block nesting prevents
                              margin collapse, so 1.5rem on top stacked to ~46px */
  color: var(--rw-text);
  border-collapse: separate;
  border-spacing: 0;
}

/* Horizontal scroll on mobile via Zendesk's figure wrapper */
figure.wysiwyg-table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0;
}

/* Horizontal scroll on mobile for tables inside HTML blocks.
   Wrap the table in <div class="rw-table-wrapper"> inside the HTML block. */
.rw-table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* All cells.
   vertical-align: middle is the base because rw-table--data
   (symbolic verdicts) wants middle; rw-table--index overrides
   to top for prose and badge-list content. */
.rw-table td,
.rw-table th {
  padding: 9px 14px;
  border-bottom: 1px solid var(--rw-border);
  vertical-align: middle;
  line-height: 1.5;
}

/* Remove border from last body row */
.rw-table tbody tr:last-child td,
.rw-table tbody tr:last-child th {
  border-bottom: none;
}

/* ── Shared section row styles (apply to both modifiers) ── */
.rw-table .rw-section-row td,
.rw-table .rw-section-row td:first-child {
  background-color: var(--rw-surface);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: left;
  cursor: default;
  border-bottom: 1px solid var(--rw-border);
}

/* Suppress hover on section rows */
.rw-table .rw-section-row:hover td {
  background-color: var(--rw-surface) !important;
  cursor: default !important;
}

/* ============================================================
   RW-TABLE-NOTE — FULL-WIDTH NOTE ROW

   A colspan row carrying a caveat that applies to every row in
   the table. Visually distinct from rw-section-row: that is a
   group label (uppercase, letter-spaced); this is a sentence
   the reader is meant to stop and read.

   Use for: scope statements, availability caveats, or any
   condition that qualifies the whole table.
   Never use for: grouping rows (use rw-section-row), or notes
   that apply to a single row (put the qualifier in the cell).

   Place it as the FIRST row of tbody, above any section rows,
   so it is read before any verdict.

   Accessibility note: a colspan row inside tbody is announced
   as a data row with no values. The semantically pure element
   is caption, but caption renders above the column headers —
   the position skimmers ignore. The trade is deliberate.

   HTML:
   <tr class="rw-table-note">
     <td colspan="5">These roles are scoped. The permissions below apply only to the integrations or backup configurations you assign to each user.</td>
   </tr>
   ============================================================ */

.rw-table .rw-table-note td,
.rw-table .rw-table-note td:first-child {
  background-color: var(--rw-border);
  border-left: 3px solid var(--rw-action);
  border-bottom: 1px solid var(--rw-border);
  padding: 12px 16px;
  text-align: left;
  vertical-align: middle;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--rw-text);
  text-transform: none;
  letter-spacing: normal;
}

/* Suppress hover, matching rw-section-row */
.rw-table .rw-table-note:hover td {
  background-color: var(--rw-border) !important;
  cursor: default !important;
}

/* ============================================================
   RW-TABLE--DATA
   Modifier: top-header orientation.
   Use for: permissions, coverage, feature comparison, payments.

   Cells hold ONE symbolic verdict each (rw-check, rw-dash, or a
   single badge) — centered horizontally, middle-aligned vertically.
   Do NOT use for tables whose value cells contain sentences or
   badge lists; those are rw-table--index tables (see 10.4).

   HTML:
   <table class="rw-table rw-table--data">
     <thead>
       <tr>
         <th>Feature</th>
         <th>Standard</th>
         <th>Advanced</th>
       </tr>
     </thead>
     <tbody>
       <tr class="rw-section-row">
         <td colspan="3">Backup &amp; storage</td>
       </tr>
       <tr>
         <td>Daily backups</td>
         <td><span class="rw-check" aria-label="Yes">✓</span></td>
         <td><span class="rw-dash" aria-label="No">—</span></td>
       </tr>
     </tbody>
   </table>
   ============================================================ */

.rw-table--data thead tr {
  background-color: var(--rw-surface-raised);
}

.rw-table--data thead th {
  font-weight: 600;
  text-align: center;
  border-bottom: 1px solid var(--rw-border);
  border-right: 1px solid var(--rw-border);
}

.rw-table--data thead th:first-child {
  text-align: left;
}

.rw-table--data thead th:last-child {
  border-right: none;
}

.rw-table--data tbody td {
  text-align: center;
}

.rw-table--data tbody td:first-child {
  text-align: left;
  font-weight: 500;
  color: inherit;
}

/* Section row font size override for data tables */
.rw-table--data .rw-section-row td,
.rw-table--data .rw-section-row td:first-child {
  font-size: 12px;
}

/* ============================================================
   RW-TABLE--ROW-LABELS
   Optional modifier: shades the first column as a label column.
   Add to rw-table--data tables where the first column
   identifies each row (e.g. action names, feature names).

   <table class="rw-table rw-table--data rw-table--row-labels">
   ============================================================ */

.rw-table--row-labels tbody td:first-child {
  background-color: var(--rw-surface);
  border-right: 1px solid var(--rw-border);
}


/* ============================================================
   RW-TABLE--INDEX
   Modifier: left-header orientation.
   Use for: data residency, platform-by-attribute tables, and
   description/prose tables (e.g. component → what it covers).

   Structurally different from rw-table--data:
   — Uses <th scope="row"> for row labels (semantic row headers)
   — Column headers are structural labels, not content
   — Value column contains badge lists or prose, not single
     check/dash verdicts
   — Everything is left-aligned and top-aligned (alignment rule
     for prose and list content — see style guide 10.4)

   HTML:
   <table class="rw-table rw-table--index">
     <thead>
       <tr>
         <th>Platform</th>
         <th>Available regions</th>
       </tr>
     </thead>
     <tbody>
       <tr class="rw-section-row">
         <td colspan="2">Customer-selectable</td>
       </tr>
       <tr>
         <th scope="row">Jira</th>
         <td>
           <span class="rw-badge rw-badge-blue" aria-label="United States">US</span>
         </td>
       </tr>
     </tbody>
   </table>
   ============================================================ */

.rw-table--index thead tr {
  background-color: var(--rw-surface-raised);
}

.rw-table--index thead th {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--rw-border);
  text-align: left;
}

.rw-table--index thead th:first-child {
  width: 220px;
  min-width: 220px;
  border-right: 1px solid var(--rw-border);
}

/* Row label column — always styled since th scope="row" is always
   a label. Long labels wrap within the 220px column (no nowrap)
   and top-align with the first line of their row's content. */
.rw-table--index tbody th {
  width: 220px;
  min-width: 220px;
  font-weight: 500;
  text-align: left;
  vertical-align: top;
  background-color: var(--rw-surface);
  border-right: 1px solid var(--rw-border);
  color: inherit;
  cursor: default;
}

.rw-table--index tbody th:hover {
  background-color: var(--rw-surface);
}

.rw-table--index tbody td {
  text-align: left;
  vertical-align: top;
  padding: 8px 14px;
}

/* Badge spacing for mobile wrapping */
.rw-table--index td .rw-badge {
  margin-bottom: 4px;
}

/* Section row font size override for index tables */
.rw-table--index .rw-section-row td,
.rw-table--index .rw-section-row td:first-child {
  font-size: 11px;
}

/* ============================================================
   RW-COLUMNS — TWO-COLUMN LIST LAYOUT (style guide 4.6)
   Borderless layout table for splitting long bullet lists
   (8+ items) into two balanced columns. Layout only — not a
   data table; never combine with rw-table classes.
   Author inside a zd-html-block.

   HTML:
   <table class="rw-columns">
     <tbody>
       <tr>
         <td><ul><li>…</li></ul></td>
         <td><ul><li>…</li></ul></td>
       </tr>
     </tbody>
   </table>
   ============================================================ */

table.rw-columns {
  width: 100%;
  border: 0;
  margin: 0 0 1rem;      /* no top margin — the preceding <p> owns the gap */
  border-collapse: collapse;
}

table.rw-columns td {
  border: 0;
  vertical-align: top;
  width: 50%;
  padding: 0 24px 0 0;
}

table.rw-columns td:last-child {
  padding-right: 0;
}

table.rw-columns ul {
  margin: 0;
  padding-left: 40px; /* match the standard article list indent so two-column
                         lists align with single-column lists — verify against
                         a normal ul's computed padding-left and use that value */
}

/* ============================================================
   BADGES — STANDALONE UTILITY

   Colour-to-meaning mapping lives in the KB style guide.
   aria-label is required on every badge for screen readers.

   Available colours:
     rw-badge-blue    — Blue
     rw-badge-green   — Green
     rw-badge-purple  — Purple
     rw-badge-amber   — Amber (default for conditional states)
     rw-badge-gray    — Gray
     rw-badge-red     — Red (reserved: deprecated/unsupported only)

   Example:
   <span class="rw-badge rw-badge-blue" aria-label="United States">US</span>
   ============================================================ */

.rw-badge {
  display: inline-block;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 20px;
  white-space: nowrap;
  line-height: 1.6;
  /* Tinted hairline in the badge's own text colour, so the pill keeps
     its edge on tinted surfaces (accordion rows, section rows), not
     only on white. Browsers without color-mix() simply skip it. */
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 22%, transparent);
}

.rw-badge-blue   { background: #e6efff; color: #123f99; }
.rw-badge-green  { background: #e4f6ee; color: #0a6040; }
.rw-badge-purple { background: #ece5ff; color: #4527b8; }
.rw-badge-amber  { background: #fff3da; color: #6b4400; }
.rw-badge-gray   { background: #eceef2; color: #141d33; }
.rw-badge-red    { background: #fbeae9; color: #a3302a; } /* Reserved */
/* Badge tints follow the brand design system (vertical and status tints);
   text colours are darkened so every pair clears 4.5:1. */


/* ============================================================
   RW-CHECKLIST — STANDALONE UTILITY
   Replaces bullet points with the check-blue.svg asset.

   Use for:
   — "Before you begin" sections in How To articles
   — Feature value lists in Feature Overview articles

   Never use for: sequential steps (use rw-steps instead),
   or unordered lists where checkmarks would imply completion.

   Accessibility notes:
   — Screen readers: <ul><li> structure is announced as a list.
     The ::before checkmark uses content:'' (empty) so screen
     readers do not announce it — items are read as plain list
     items with their text only. This is correct behaviour.
   — AI: <ul><li> structure is read as an unordered list.
     The CSS checkmark is invisible to AI parsers, but the
     HTML list structure conveys the meaning correctly.

   HTML:
   <ul class="rw-checklist">
     <li>Item one</li>
     <li>Item two</li>
   </ul>
   ============================================================ */

/* Higher-specificity selectors ensure theme rules like
   `article ul { list-style-type: disc }` do not override us. */
article .rw-checklist,
.rw-checklist {
  list-style: none;
  padding-left: 1.25rem;
}

/* Explicitly remove ::marker in case the theme styles
   `article ul li::marker` still fire despite list-style: none */
article .rw-checklist > li::marker,
.rw-checklist > li::marker {
  content: none;
}

article .rw-checklist > li,
.rw-checklist > li {
  position: relative;
  padding-left: 44px; /* matches rw-steps so both lists align when stacked */
  margin-bottom: 8px;
  list-style: none;
}

article .rw-checklist > li::before,
.rw-checklist > li::before {
  content: '';
  position: absolute;
  /* 24px check, centred on the same axis as the 28px rw-steps circle
     (2px inset each side) so both list types share one text edge.
     Deliberately a touch smaller: conditions, not actions. */
  left: 2px;
  top: 2px;
  width: 24px;
  height: 24px;
  /* Brand circled check (Phosphor CheckCircle Fill), recoloured by token.
     Inlined as a data URI: CSS masks refuse cross-origin files, and
     Zendesk serves theme assets from a different domain. */
  background-color: var(--rw-signal-on-light);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm45.66,85.66-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm45.66,85.66-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E") center / contain no-repeat;
}


/* ============================================================
   RW-IMG-SHADOW — OPTIONAL IMAGE UTILITY
   Adds a subtle drop shadow to images.
   Use selectively — not all images need a shadow.

   Good candidates: screenshots against white backgrounds,
   UI walkthroughs, any image that blends into the page.

   Skip for: diagrams, icons, images with transparent
   or dark backgrounds, GIFs.

   HTML:
   <img src="..." alt="..." class="rw-img-shadow">
   ============================================================ */

.rw-img-shadow {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  border-radius: 8px; /* matches rw-table content elements */
}

/* Breathing room for screenshots: clear of the line above (and the
   shadow's blur), and a larger gap before the next step or paragraph.
   Applies to shadowed screenshots anywhere and any image in a step. */
.rw-img-shadow,
.rw-steps > li img {
  display: block;
  margin-bottom: 20px;
  margin-top: 12px;
}


/* ============================================================
   RW-STEPS — NUMBERED STEP LIST
   Styled numbered list with circle step indicators.
   Add class to <ol> in article source.

   Use for: How To articles and any ordered step sequence.
   Do not use for numbered lists that are not procedural steps.

   Accessibility notes:
   — Screen readers: <ol><li> structure conveys ordering. Screen
     readers announce each item with its ordinal position (1, 2, 3)
     based on the list structure — not from the CSS circle numbers.
     The ::before circle content is generated by CSS counter() and
     is visual only; screen readers do not announce it.
   — VoiceOver (Safari/iOS) strips list semantics when
     list-style:none is applied. Fix: add role="list" to the <ol>
     element in the article source (see HTML template below).
   — AI: <ol><li> structure is read as an ordered/sequential list.
     The CSS numbers are invisible to AI parsers, but the HTML
     structure correctly conveys step ordering.
   — Copy-paste: CSS counter() values are visual only and are not
     included in the clipboard. This is a CSS limitation.
     Screen reader and AI ordering is not affected — both derive
     order from the <ol> structure, not from visible numbers.

   HTML (include role="list" for VoiceOver compatibility):
   <ol class="rw-steps" role="list">
     <li>First step</li>
     <li>Second step
       <ul>
         <li>Sub-point A</li>
         <li>Sub-point B</li>
       </ul>
     </li>
   </ol>
   ============================================================ */

.rw-steps {
  list-style: none;
  counter-reset: rw-step-counter;
  padding-left: 1.25rem;
}

.rw-steps > li {
  counter-increment: rw-step-counter;
  position: relative;
  padding-left: 44px;
  margin-bottom: 16px;
  min-height: 28px;
}

.rw-steps > li::before {
  content: counter(rw-step-counter);
  font-variant-numeric: tabular-nums; /* centres the narrow "1" like other digits */
  position: absolute;
  left: 0;
  top: 0;
  width: 28px;
  height: 28px;
  background-color: var(--rw-step); /* Ink 600: solid, but quieter than headings */
  color: var(--rw-paper);
  font-size: 1em;
  font-weight: 700;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Sub-bullets inside rw-steps */
.rw-steps > li ul {
  list-style-type: disc;
  padding-left: 20px;
  margin-top: 8px;
}

.rw-steps > li ul li::marker {
  color: var(--rw-text);
}


/* ============================================================
   RW-CHECK / RW-DASH — STANDALONE UTILITY

   Yes/No indicators for use inside table cells.
   aria-label is required on every span — the symbol alone
   is not sufficient for screen readers or AI indexing.

   <span class="rw-check" aria-label="Yes">✓</span>
   <span class="rw-dash"  aria-label="No">—</span>
   ============================================================ */

.rw-check {
  display: inline-block;
  width: 1.375rem;  /* 22px. Brand table uses 32px icons at 80px rows; scaled for denser KB tables */
  height: 1.375rem;
  /* Filled Ink circled check, as in the brand comparison table */
  background-color: var(--rw-ink-950);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm45.66,85.66-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm45.66,85.66-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E") center / contain no-repeat;
  color: transparent;
  vertical-align: middle;
}

/* The ✓ glyph stays in the HTML for copy-paste and AI parsers.
   Hide it (and the highlight) while text is selected so it can't
   paint over the icon. */
.rw-check::selection {
  background: transparent;
  color: transparent;
}

.rw-dash {
  color: #9aa3b0;
  font-weight: 400;
}


/* ============================================================
   RW-ACCORDION — FAQ AND TROUBLESHOOTING COMPONENT

   Expanding accordion component for FAQ and Troubleshooting
   sections. Uses native HTML <details> / <summary> elements
   for expand/collapse — no JavaScript required.

   All items for one group (e.g. all SAML error items) are
   wrapped in a single .rw-accordion container. Each item is
   a <details class="rw-accordion-item">.

   HTML:
   <div class="rw-accordion">

     <details class="rw-accordion-item">
       <summary class="rw-accordion-summary">Question or issue title</summary>
       <div class="rw-accordion-content">
         <p>Answer or resolution here</p>
       </div>
     </details>

     <details class="rw-accordion-item">
       <summary class="rw-accordion-summary">Second question</summary>
       <div class="rw-accordion-content">
         <p>Answer here</p>
       </div>
     </details>

   </div>

   For troubleshooting sections with subheadings, use a
   separate .rw-accordion div under each <h2> subheading.

   Optional status badge inside a summary (e.g. changelog entries):
   just place a <span class="rw-badge ..."> after the text inside
   <summary> — it's pushed to the right edge automatically.
   ============================================================ */

.rw-accordion {
  border: 1px solid var(--rw-border);
  border-radius: 8px;
  overflow: hidden;
  margin: 1rem 0;
  background-color: var(--rw-surface); /* fills the inset divider margin gaps — prevents white ends */
}

/* Inset divider between items — appears above each item except the first.
   Slightly darker than the outer border and inset on each end so it
   doesn't connect to the outer border. */
.rw-accordion-item + .rw-accordion-item::before {
  content: '';
  display: block;
  height: 1px;
  background-color: var(--rw-divider);
  margin: 0 16px;
}

/* Hide the divider above the next item when the preceding item is expanded */
.rw-accordion-item[open] + .rw-accordion-item::before {
  display: none;
}

/* Remove browser default disclosure triangle */
.rw-accordion-summary::-webkit-details-marker {
  display: none;
}

.rw-accordion-summary::marker {
  display: none;
}

.rw-accordion-summary {
  background-color: var(--rw-surface);
  cursor: pointer;
  padding: 14px 20px;
  font-size: 1.1em;
  font-weight: 600;
  color: var(--rw-text);
  user-select: none;
  list-style: none;
  display: flex;
  align-items: center;
}

/* Optional status badge placed inside a summary (e.g. changelog entry
   titles) — pushes itself to the right edge of the summary row. */
.rw-accordion-summary .rw-badge {
  margin-left: auto;
  flex-shrink: 0;
}

/* Collapsed indicator — chevron pointing right */
.rw-accordion-summary::before {
  content: '';
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  border-style: solid;
  border-color: var(--rw-text);
  border-width: 0 2px 2px 0;
  margin-right: 12px;
  flex-shrink: 0;
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
}

/* Expanded indicator — chevron rotates to point down */
.rw-accordion-item[open] > .rw-accordion-summary::before {
  transform: rotate(45deg);
}

.rw-accordion-summary:hover {
  background-color: var(--rw-border);
}

.rw-accordion-content {
  background-color: var(--rw-paper);
  padding: 16px 24px;
  /* No top border — the inset divider stays attached to the next question,
     not between the summary and the expanded content */
}

/* Ensure lists inside accordion content are styled correctly */
.rw-accordion-content ul {
  padding-left: 20px;
  margin: 8px 0;
}

.rw-accordion-content p:first-child,
.rw-accordion-content ul:first-child {
  margin-top: 0;
}

.rw-accordion-content p:last-child,
.rw-accordion-content ul:last-child {
  margin-bottom: 0;
}
/* ============================================================
   RW-WALKTHROUGH v2 — CLICK-THROUGH STEP GUIDE

   Screenshot-dominant click-through guide for long or complex
   procedures. Each step is a screenshot with an instruction
   card (GuideFlow-style) in a consistent position below it.

   Architecture — progressive enhancement:
   — The article HTML is a plain <ol class="rw-walkthrough-steps">
     containing ALL steps. Every step remains in the DOM at all
     times; JS only toggles visibility classes.
   — AI parsers and crawlers therefore always see the complete
     ordered step list. Screenshot alt text carries the visual
     description; the note card carries the instruction.
   — If script.js fails to load, the component degrades to a
     numbered list of screenshot + instruction card pairs.

   Requires: rw-walkthrough.js in the theme's script.js.

   Design tokens (matches rw-table system):
     Border:          var(--rw-border)
     Header bg:       var(--rw-surface-raised)
     Control bg:      var(--rw-surface)
     Radius:          8px  (content-element tier)
     Step circles:    var(--rw-step) Ink 600  (expanded view; matches rw-steps)
     Interactive:     Bone note panel + Signal Next button (see brand layer at the end; the
                       instruction card background)

   HTML (author this in an HTML block in the article):
   <div class="rw-walkthrough">
     <p class="rw-walkthrough-title">Update the Rewind app in Atlassian Admin</p>
     <ol class="rw-walkthrough-steps" role="list">
       <li>
         <img src="..." alt="Atlassian Admin dashboard with the Apps menu highlighted" class="rw-img-shadow">
         <div class="rw-walkthrough-note">
           <p><strong>Open Atlassian Admin.</strong> Go to admin.atlassian.com and select your organization.</p>
         </div>
       </li>
     </ol>
   </div>

   Notes:
   — role="list" on the <ol> is required for VoiceOver.
   — The <img> and the note card are both optional per step,
     but every step should have at least a note.
   — A bolded lead sentence in the note mirrors GuideFlow's
     heading style. Keep it short — it counts toward the
     5-word bold guideline in spirit, though instruction leads
     are a deliberate exception worth documenting.
   — JS injects Back/Next buttons INTO each note card. Footer
     Back/Next buttons are built only as a fallback when a step
     lacks a note card, so navigation always exists.
   ============================================================ */

.rw-walkthrough {
  border: 1px solid var(--rw-border);
  border-radius: 8px;
  overflow: hidden;
  margin: 1.5rem 0;
  background-color: var(--rw-paper);
  color: var(--rw-text);
}

/* ── Header bar (built by JS) ── */
.rw-walkthrough-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background-color: var(--rw-surface-raised);
  border-bottom: 1px solid var(--rw-border);
  padding: 12px 20px;
}

.rw-walkthrough-title {
  font-weight: 600;
  margin: 0;
  color: var(--rw-text);
}

.rw-walkthrough-count {
  font-size: 13px;
  color: var(--rw-text-muted);
  white-space: nowrap;
}

/* ── Progress bar (built by JS) ── */
.rw-walkthrough-progress {
  height: 4px;
  background-color: var(--rw-border);
}

.rw-walkthrough-progress-fill {
  height: 100%;
  width: 0;
  background-color: var(--rw-signal);
  transition: width 0.25s ease;
}

@media (prefers-reduced-motion: reduce) {
  .rw-walkthrough-progress-fill {
    transition: none;
  }
}

/* ── Step list ── */
.rw-walkthrough-steps {
  list-style: none;
  counter-reset: rw-wt-counter;
  margin: 0;
  padding: 0;
}

article .rw-walkthrough-steps,
.article-body .rw-walkthrough-steps {
  margin: 0;
  padding: 0;
}

.rw-walkthrough-steps > li {
  counter-increment: rw-wt-counter;
  position: relative;
  padding: 20px 24px;
  list-style: none;
}

.rw-walkthrough-steps > li::marker {
  content: none;
}

/* Screenshot is the hero — full width of the step area */
.rw-walkthrough-steps > li img {
  display: block;
  width: 100%;
  height: auto;
}

/* ── Instruction note card (GuideFlow-style) ── */
.rw-walkthrough-note {
  background-color: var(--rw-ink-950); /* Ink card: brand fills are Ink or base Signal */
  color: var(--rw-paper);
  border-radius: 8px;
  padding: 16px 20px;
  margin-top: 16px;
  line-height: 1.5;
}

.rw-walkthrough-note p {
  margin: 0 0 8px;
  color: var(--rw-paper);
}

.rw-walkthrough-note p:last-of-type {
  margin-bottom: 0;
}

.rw-walkthrough-note strong {
  color: var(--rw-paper);
}

/* Links inside the note must stay legible on blue */
.rw-walkthrough-note a,
article .rw-walkthrough-note a,
.article-body .rw-walkthrough-note a {
  color: var(--rw-paper);
  text-decoration: underline;
}

.rw-walkthrough-note a:hover,
article .rw-walkthrough-note a:hover,
.article-body .rw-walkthrough-note a:hover {
  color: var(--rw-border);
}

/* In-card Back/Next (built by JS) */
.rw-walkthrough-note-controls {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

.rw-walkthrough-note-btn {
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  padding: 5px 16px;
  border-radius: var(--rw-radius);
  cursor: pointer;
  transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.rw-walkthrough-note-btn--back {
  background: none;
  border: none;
  color: var(--rw-paper);
}

.rw-walkthrough-note-btn--back:hover,
.rw-walkthrough-note-btn--back:focus-visible {
  text-decoration: underline;
}

.rw-walkthrough-note-btn--next {
  background-color: var(--rw-signal);
  border: 1px solid var(--rw-signal);
  border-radius: var(--rw-radius);
  color: var(--rw-ink-950);
}

.rw-walkthrough-note-btn--next:hover,
.rw-walkthrough-note-btn--next:focus-visible {
  background-color: var(--rw-signal-600);
  border-color: var(--rw-signal-600);
}

.rw-walkthrough-note-btn:disabled {
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}

.rw-walkthrough-note-btn:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.4);
}

/* ── Click-through mode (JS adds .rw-walkthrough--active) ──
   Hide every step except the current one. display:none removes
   it from the visual page and the accessibility tree while the
   node stays in the DOM — AI parsers still read all steps. */
.rw-walkthrough--active:not(.rw-walkthrough--expanded)
  .rw-walkthrough-steps > li:not(.rw-wt-current) {
  display: none;
}

/* ── Expanded / no-JS view ──
   All steps visible as a numbered sequence. Navy step circles
   (rw-steps language) appear ONLY here — in click-through mode
   the header's "Step x of y" carries the position instead. */
.rw-walkthrough:not(.rw-walkthrough--active) .rw-walkthrough-steps > li,
.rw-walkthrough--expanded .rw-walkthrough-steps > li {
  padding-left: 68px;
}

.rw-walkthrough:not(.rw-walkthrough--active) .rw-walkthrough-steps > li + li,
.rw-walkthrough--expanded .rw-walkthrough-steps > li + li {
  border-top: 1px solid var(--rw-border);
}

.rw-walkthrough:not(.rw-walkthrough--active) .rw-walkthrough-steps > li::before,
.rw-walkthrough--expanded .rw-walkthrough-steps > li::before {
  content: counter(rw-wt-counter);
  font-variant-numeric: tabular-nums;
  position: absolute;
  left: 24px;
  top: 20px;
  width: 28px;
  height: 28px;
  background-color: var(--rw-step); /* matches rw-steps */
  color: var(--rw-paper);
  font-size: 1em;
  font-weight: 700;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* In-card nav is meaningless when all steps are visible */
.rw-walkthrough--expanded .rw-walkthrough-note-controls,
.rw-walkthrough:not(.rw-walkthrough--active) .rw-walkthrough-note-controls {
  display: none;
}

/* ── Footer controls (fallback — built by JS only when a
   step lacks an instruction card) ── */
.rw-walkthrough-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background-color: var(--rw-surface);
  border-top: 1px solid var(--rw-border);
  padding: 12px 20px;
}

.rw-walkthrough-btn {
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  padding: 6px 16px;
  border-radius: var(--rw-radius); /* matches brand button radius */
  border: 1px solid var(--rw-ink-950);
  cursor: pointer;
  transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
  min-width: 90px;
}

.rw-walkthrough-btn--next {
  background-color: var(--rw-signal);
  border-color: var(--rw-signal);
  color: var(--rw-ink-950);
}

.rw-walkthrough-btn--next:hover,
.rw-walkthrough-btn--next:focus-visible {
  background-color: var(--rw-signal-600);
  border-color: var(--rw-signal-600);
}

.rw-walkthrough-btn--back {
  background-color: transparent;
  color: var(--rw-ink-950);
}

.rw-walkthrough-btn--back:hover,
.rw-walkthrough-btn--back:focus-visible {
  background-color: var(--rw-ink-950);
  color: var(--rw-paper);
}

.rw-walkthrough-btn:disabled {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}

.rw-walkthrough-btn:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(var(--rw-action-rgb), 0.25);
}

/* ── View-all toggle (built by JS) ── */
.rw-walkthrough-viewall {
  background: none;
  border: none;
  padding: 10px 20px;
  width: 100%;
  text-align: center;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--rw-action);
  cursor: pointer;
  background-color: var(--rw-surface);
  border-top: 1px solid var(--rw-border);
}

.rw-walkthrough-viewall:hover,
.rw-walkthrough-viewall:focus-visible {
  background-color: var(--rw-border);
  text-decoration: underline;
}

.rw-walkthrough-viewall:focus-visible {
  outline: 0;
}

/* Hide footer prev/next while expanded */
.rw-walkthrough--expanded .rw-walkthrough-controls {
  display: none;
}

/* ============================================================
   RW-TOOLTIP — INLINE HOVER DEFINITION

   Small hover/focus tooltip for defining terms inline without
   breaking reading flow. Pure CSS — no JS required.

   Use for: supplementary definitions of product terms,
   acronyms, or jargon on first mention.

   Never use for: information a reader must see to complete a
   task. Tooltip text is invisible to skimmers, inconsistent
   across screen readers, and hover does not exist on touch
   devices (tap-focus works via tabindex, but is not
   discoverable). Critical info belongs in body text.

   Design tokens (matches rw-table / rw-walkthrough system):
     Tooltip bg:      var(--rw-text) Ink
     Underline:       var(--rw-action)  (brand accent — signals
                       interactivity, and distinguishes from
                       article links, which are solid-underlined
                       navy)
     Radius:          4px  (small-UI tier, matches buttons)
     Focus ring:      rgba(60, 93, 243, 0.25)  (matches theme
                       button focus shadow)

   Accessibility notes:
   — tabindex="0" on the span is REQUIRED so keyboard users can
     focus the term and reveal the tooltip.
   — Screen readers: support for CSS attr() generated content is
     inconsistent — some announce data-tooltip, some do not.
     This is acceptable ONLY because tooltip content is
     supplementary by rule (see above).
   — AI: the data-tooltip attribute lives in the HTML source, so
     Adabot and crawlers read the definition text even though it
     is visually hidden until hover. No AI-readability loss.

   Placement caveats:
   — The default tooltip renders ABOVE the term. Inside
     containers with overflow: hidden (rw-accordion, rw-table)
     or overflow-x: auto (rw-table-wrapper), a tooltip near the
     top edge of the container will be clipped. Use the
     rw-tooltip--below variant there, or avoid tooltips inside
     those components.
   — Terms at the far left/right edge of the content column can
     also clip, since the tooltip centers on the term.

   HTML (author in an HTML block or via source view):
   <span class="rw-tooltip" tabindex="0"
     data-tooltip="A non-personal account used exclusively for backup operations.">service account</span>

   Below variant (for use near the top of clipping containers):
   <span class="rw-tooltip rw-tooltip--below" tabindex="0"
     data-tooltip="...">term</span>
   ============================================================ */

.rw-tooltip {
  position: relative;
  border-bottom: 1px dotted var(--rw-action);
  cursor: pointer;
}

/* ── Tooltip bubble ── */
.rw-tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--rw-text);
  color: var(--rw-paper);
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.5;
  white-space: normal;
  width: max-content;
  max-width: 280px;
  text-align: left;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease;
  pointer-events: none;
}

/* ── Arrow pointing at the term ── */
.rw-tooltip::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 1px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--rw-text);
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease;
  pointer-events: none;
}

.rw-tooltip:hover::after,
.rw-tooltip:hover::before,
.rw-tooltip:focus::after,
.rw-tooltip:focus::before {
  opacity: 1;
  visibility: visible;
}

/* Keyboard focus ring on the term itself (matches theme buttons) */
.rw-tooltip:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(var(--rw-action-rgb), 0.25);
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .rw-tooltip::after,
  .rw-tooltip::before {
    transition: none;
  }
}

/* ── Below variant ──
   Flips the tooltip underneath the term. Use near the top of
   overflow-clipping containers (rw-accordion, rw-table). */
.rw-tooltip--below::after {
  bottom: auto;
  top: calc(100% + 6px);
}

.rw-tooltip--below::before {
  bottom: auto;
  top: calc(100% + 1px);
  border-top-color: transparent;
  border-bottom-color: var(--rw-text);
}

/* ============================================================
   ZD-SUMMARY-BLOCK — THEME OVERRIDE PLACEHOLDER

   Intentionally empty. Do not delete.

   The summary block's rendered styles come from Zendesk's
   APPLICATION stylesheet, not this theme — including its
   background (#f3f3f3), 4px left accent (#d3d3d3), 4px
   border-radius, 20px padding, and .9em bottom margin.
   This ruleset exists so brand-refresh overrides have a
   ready home when needed.

   IMPORTANT: keep the [dir] prefix on the selector. One of
   Zendesk's application rules is [dir="ltr"] zd-summary-block,
   which outranks a bare element selector — overrides written
   without the prefix can silently lose.

   History note [Aug 2026]: a "joined card" treatment (summary
   + rw-meta sharing one border and radius) was built and
   reverted — it broke on articles that have a summary but no
   meta table. Components must stand alone; see rw-meta.
   ============================================================ */

[dir] zd-summary-block {
  /* Intentionally empty — brand refresh overrides land here.
     [Oct 2026] Still empty on purpose: inspect the block's computed
     styles in the sandbox first (background + left accent), then set
     both here and update --rw-furniture / --rw-furniture-bg together
     so the summary block and rw-meta stay paired. */
}


/* ============================================================
   RW-TABLE — BRAND LAYER [Oct 2026]

   Restyles the table rules above without changing any markup.
     - Slightly smaller type (15px) so dense matrices breathe;
       body text stays 17px everywhere else.
     - Header row loses its vertical dividers (marketing table
       treatment); horizontal rules carry the structure.
     - Section rows use the brand eyebrow style (Space Grotesk,
       tracked caps), in Ink 600 rather than Signal, which is
       reserved for page-level eyebrows.
     - The full-width note row now matches the Note callout
       (info blue) instead of a grey slab with a Signal bar.
     - Data rows highlight on hover to help track across wide
       permission matrices.
     - Checks use --rw-mark (Ink 600), the same weight as the
       rw-steps circles, so a column of checks reads as a pattern
       rather than a row of heavy dots.
   ============================================================ */

.rw-table {
  border-color: var(--rw-divider);
  font-size: 0.9375rem;
}

.rw-table td,
.rw-table th {
  border-bottom-color: var(--rw-border);
  padding: 12px 16px;
}

.rw-table thead th {
  color: var(--rw-ink-950);
  font-weight: 600;
  vertical-align: bottom; /* wrapped headers line up on their last line */
}

.rw-table--data thead th {
  border-right: none;
}

/* Section rows: brand eyebrow */
.rw-table .rw-section-row td,
.rw-table .rw-section-row td:first-child,
.rw-table--data .rw-section-row td,
.rw-table--data .rw-section-row td:first-child,
.rw-table--index .rw-section-row td:first-child {
  background-color: var(--rw-ink-50);
  color: var(--rw-ink-600);
  font-family: var(--rw-font-display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  padding-bottom: 10px;
  padding-top: 10px;
}

.rw-table .rw-section-row:hover td {
  background-color: var(--rw-ink-50) !important;
}

/* Note row: same family as the Note callout */
.rw-table .rw-table-note td,
.rw-table .rw-table-note td:first-child {
  background-color: var(--rw-info-bg);
  border-left: 0;
  color: var(--rw-text-body);
  font-size: 0.875rem;
  padding: 12px 16px;
}

.rw-table .rw-table-note:hover td {
  background-color: var(--rw-info-bg) !important;
}

/* Row hover for tracking across wide matrices */
.rw-table--data tbody tr:not(.rw-section-row):not(.rw-table-note):hover td {
  background-color: var(--rw-ink-50);
}

/* Verdict marks */
.rw-check {
  background-color: var(--rw-mark);
}

.rw-dash {
  color: var(--rw-ink-300);
}

/* Index tables: headers match data tables (sentence case, Ink 950).
   Section rows are now the only tracked-caps element in any table,
   which keeps header vs group label unambiguous. */
.rw-table--index thead th {
  font-size: 0.9375rem;
  letter-spacing: 0;
  text-transform: none;
}

/* Value cells share the label column's padding, so the first line of
   a value sits level with its row label (was 4px higher). */
.rw-table--index tbody td {
  padding: 12px 16px;
}

.rw-table--index td .rw-badge {
  margin-bottom: 4px;
  margin-right: 2px;
}

/* Badges: one fixed size everywhere. They used to inherit their
   container's text size, so in an accordion summary (bold, larger
   text) they grew into oversized pills. */
.rw-badge {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5;
  padding: 2px 10px;
  vertical-align: middle;
}

/* Summary badges stay pinned right (margin-left: auto, as in the
   original component). The 12px chevron spacing moves into a flex
   gap so the title can never touch the badge when it wraps. */
.rw-accordion-summary {
  column-gap: 12px;
}

.rw-accordion-summary::before {
  margin-right: 0;
}

.rw-accordion-summary .rw-badge {
  flex: none;
  margin-left: auto;
}

/* ------------------------------------------------------------
   Verdict marks: which mark means "no" depends on the table type
     Access / permission tables   rw-check = Yes, rw-cross = No
       (restriction is the point, so "no" is stated plainly)
     Coverage tables (backup / restore)  rw-check = Yes, rw-dash = No
       (a gap isn't a deliberate restriction; a cross would read as
        a failure)
     Qualified answers ("URL only", "On request")  rw-badge
   Never mix rw-cross and rw-dash in one table. Every mark carries
   role="img" and aria-label="Yes" / "No".
   ------------------------------------------------------------ */
.rw-cross {
  background-color: var(--rw-ink-500);
  color: transparent;
  display: inline-block;
  height: 1.375rem;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M165.66,101.66,139.31,128l26.35,26.34a8,8,0,0,1-11.32,11.32L128,139.31l-26.34,26.35a8,8,0,0,1-11.32-11.32L116.69,128,90.34,101.66a8,8,0,0,1,11.32-11.32L128,116.69l26.34-26.35a8,8,0,0,1,11.32,11.32ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M165.66,101.66,139.31,128l26.35,26.34a8,8,0,0,1-11.32,11.32L128,139.31l-26.34,26.35a8,8,0,0,1-11.32-11.32L116.69,128,90.34,101.66a8,8,0,0,1,11.32-11.32L128,116.69l26.34-26.35a8,8,0,0,1,11.32,11.32ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z'/%3E%3C/svg%3E") center / contain no-repeat;
  overflow: hidden;
  vertical-align: middle;
  width: 1.375rem;
}

.rw-cross::selection,
.rw-dash::selection {
  background: transparent;
  color: inherit;
}

.rw-cross::selection {
  color: transparent;
}

/* Detail line under an item label (what's included when it's backed
   up or restored). Write it as either
     Git repository<br><em>refs, branches, commits</em>   (existing articles)
     Git repository <span class="rw-detail">refs, branches, commits</span>
   Both render as a muted, upright second line. */
.rw-table td br + em,
.rw-table th br + em,
.rw-detail {
  color: var(--rw-text-muted);
  display: block;
  font-size: 0.875rem;
  font-style: normal;
  line-height: 1.45;
  margin-top: 2px;
}

.rw-table td br:has(+ em),
.rw-table th br:has(+ em) {
  display: none; /* the em is already its own line */
}


/* ============================================================
   RW-WALKTHROUGH — BRAND LAYER [Oct 2026]

   Sits after the walkthrough rules above and restyles them.
   Principle: the screenshot is the hero and Signal marks the one
   action. So the instruction panel goes light (Bone, Ink text)
   instead of a solid Ink slab competing with the screenshot, and
   "Next" is the only Signal element in the component.
     Active view    white card > progress > screenshot > Bone note
                    with Back (Ink outline) + Next (Signal)
     Expanded view  plain numbered sequence: Ink 600 circles,
                    instruction as normal text, no panels
   Markup and script.js are unchanged.
   ============================================================ */

.rw-walkthrough {
  border-color: var(--rw-divider);
  color: var(--rw-text-body);
}

.rw-walkthrough-header {
  background-color: var(--rw-paper);
  border-bottom-color: var(--rw-border);
  padding: 14px 24px;
}

.rw-walkthrough .rw-walkthrough-title,
.article-body .rw-walkthrough-title {
  margin: 0; /* beats .article-body h3 margins so it centres with the count */
}

.rw-walkthrough-title {
  color: var(--rw-ink-950);
  font-family: var(--rw-font-sans);
  font-size: 1.0625rem;
  font-weight: 600;
}

.rw-walkthrough-count {
  color: var(--rw-text-muted);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}

.rw-walkthrough-progress {
  background-color: var(--rw-ink-100);
  height: 3px;
}

.rw-walkthrough-steps > li {
  padding: 24px;
}

/* Screenshots get a frame so pale UI doesn't dissolve into the card */
.rw-walkthrough-steps > li img {
  border: 1px solid var(--rw-divider);
  border-radius: var(--rw-radius);
  box-shadow: none;
  margin: 0;
}

/* Instruction panel: light, readable, still clearly a "card" */
.rw-walkthrough-note {
  background-color: var(--rw-bone);
  border-radius: var(--rw-radius);
  color: var(--rw-text-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  margin-top: 16px;
  padding: 18px 20px;
}

.rw-walkthrough-note p {
  color: var(--rw-text-body);
}

.rw-walkthrough-note strong {
  color: var(--rw-ink-950);
}

.rw-walkthrough-note a,
article .rw-walkthrough-note a,
.article-body .rw-walkthrough-note a {
  color: var(--rw-ink-950);
  text-decoration: underline;
  text-decoration-color: var(--rw-ink-300);
  text-underline-offset: 3px;
}

.rw-walkthrough-note a:hover,
article .rw-walkthrough-note a:hover,
.article-body .rw-walkthrough-note a:hover {
  color: var(--rw-action);
  text-decoration-color: currentColor;
}

/* In-panel controls: same button language as the rest of the KB */
.rw-walkthrough-note-controls {
  gap: 10px;
  margin-top: 16px;
}

.rw-walkthrough-note-btn {
  border-radius: var(--rw-radius);
  font-family: var(--rw-font-sans);
  font-size: 0.9375rem;
  font-weight: 500;
  min-width: 88px;
  padding: 8px 18px;
}

.rw-walkthrough-note-btn--back {
  background-color: transparent;
  border: 1px solid var(--rw-ink-950);
  color: var(--rw-ink-950);
}

.rw-walkthrough-note-btn--back:hover,
.rw-walkthrough-note-btn--back:focus-visible {
  background-color: var(--rw-ink-950);
  color: var(--rw-paper);
  text-decoration: none;
}

.rw-walkthrough-note-btn--next {
  background-color: var(--rw-signal);
  border: 1px solid var(--rw-signal);
  color: var(--rw-ink-950);
}

.rw-walkthrough-note-btn--next:hover,
.rw-walkthrough-note-btn--next:focus-visible {
  background-color: var(--rw-signal-600);
  border-color: var(--rw-signal-600);
}

/* Step 1 has nowhere to go back to: hide rather than grey out */
.rw-walkthrough-note-btn--back:disabled {
  visibility: hidden;
}

/* View-all toggle: a quiet footer link, not a grey bar */
.rw-walkthrough-viewall {
  background-color: var(--rw-paper);
  border-top-color: var(--rw-border);
  color: var(--rw-action);
  font-size: 0.875rem;
  padding: 12px 20px;
}

.rw-walkthrough-viewall:hover,
.rw-walkthrough-viewall:focus-visible {
  background-color: var(--rw-paper);
  color: var(--rw-action-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Expanded / no-JS view: reads like an rw-steps list with pictures */
.rw-walkthrough:not(.rw-walkthrough--active) .rw-walkthrough-steps > li + li,
.rw-walkthrough--expanded .rw-walkthrough-steps > li + li {
  border-top-color: var(--rw-border);
}

.rw-walkthrough:not(.rw-walkthrough--active) .rw-walkthrough-steps > li::before,
.rw-walkthrough--expanded .rw-walkthrough-steps > li::before {
  top: 24px;
}

.rw-walkthrough:not(.rw-walkthrough--active) .rw-walkthrough-note,
.rw-walkthrough--expanded .rw-walkthrough-note {
  background-color: transparent;
  margin-top: 12px;
  padding: 0;
}

/* "Step x of y" and the progress bar mean nothing once every step
   is showing, so they step aside in the expanded view */
.rw-walkthrough--expanded .rw-walkthrough-count,
.rw-walkthrough--expanded .rw-walkthrough-progress {
  display: none;
}