@charset "UTF-8";
/***** Normalize.css *****/
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

main {
  display: block;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

pre {
  font-family: monospace, monospace;
  font-size: 1em;
}

a {
  background-color: transparent;
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted;
}

b,
strong {
  font-weight: bolder;
}

code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

img {
  border-style: none;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

[type=checkbox],
[type=radio] {
  box-sizing: border-box;
  padding: 0;
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

details {
  display: block;
}

summary {
  display: list-item;
}

template {
  display: none;
}

[hidden] {
  display: none;
}

/***** Base *****/
* {
  box-sizing: border-box;
}

/* Theme-toggle custom properties. Dark is the default (matches the compiled
   #0A0F18/#D1E4EB/etc. settings values below); [data-theme="light"]
   overrides every one of them back to the original Copenhagen palette. SCSS
   darken()/lighten() can't operate on var() at compile time, so each derived
   shade that used to be computed from a variable is pre-computed per mode
   instead of nesting darken()/lighten() around var(). */
:root {
  --t-brand: #0A0F18;
  --t-brand-text: #FFFFFF;
  --t-bg: #0A0F18;
  --t-text: #D1E4EB;
  --t-text-muted: #B6C7D8;
  --t-link: #75E3FF;
  --t-link-hover: #91ECFF;
  --t-link-visited: #75E3FF;
  --t-link-darken: #0fceff;
  --t-elevated: #1F4456;
  --t-elevated-hover: #04090b;
  --t-surface-subtle-3: #16303D;
  --t-surface-subtle-5: #1F4456;
  --t-glow-1: rgba(117, 227, 255, 0.12);
  --t-glow-2: rgba(39, 89, 114, 0.28);
  --t-pill-bg: #ADEFFF;
  --t-pill-text: #132A34;
  --t-pill-hover: #8FE7FF;
  --t-surface-hover: #1F4456;
  --t-surface-hover-fg: var(--t-link);
}
:root[data-theme="light"] {
  --t-brand: #0075E2;
  --t-brand-text: #FFFFFF;
  --t-bg: #FFFFFF;
  /* Retuned to match dark mode's actual hue cluster (~192-200deg cyan-teal)
     instead of a separately-chosen, more indigo blue (~209deg) with fully
     desaturated neutrals - see the "Light Theme Retune" proposal. */
  --t-text: #14262E;
  --t-text-muted: #365063;
  --t-link: #0072A3;
  --t-link-hover: #00567A;
  --t-link-visited: #0072A3;
  --t-link-darken: #002b3d;
  --t-elevated: #0072A3;
  --t-elevated-hover: #00567A;
  --t-surface-subtle-3: #F5F8FA;
  --t-surface-subtle-5: #EEF4F6;
  --t-glow-1: transparent;
  --t-glow-2: transparent;
  --t-pill-bg: #CCF0FF;
  --t-pill-text: #005275;
  --t-pill-hover: #ADE7FF;
  --t-surface-hover: #C3DDE9;
  --t-surface-hover-fg: #005275;
}

body {
  background-color: var(--t-bg);
  color: var(--t-text);
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(ellipse 900px 650px at 12% 0%, var(--t-glow-1), transparent 60%),
    radial-gradient(ellipse 1000px 750px at 92% 65%, var(--t-glow-2), transparent 60%);
  background-repeat: no-repeat;
}
@media (min-width: 1024px) {
  body > main {
    min-height: 65vh;
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  margin-top: 0;
}

h1 {
  font-size: 32px;
}

h2 {
  font-size: 22px;
}

h3 {
  font-size: 18px;
  font-weight: 600;
}

h4 {
  font-size: 16px;
}

a {
  color: var(--t-link);
  text-decoration: none;
}
a:visited {
  color: var(--t-link-visited);
}
a:hover, a:active, a:focus {
  text-decoration: underline;
}

.hbs-form input,
.hbs-form textarea, .search input,
.search textarea {
  color: #000;
  font-size: 14px;
}
.hbs-form input, .search input {
  max-width: 100%;
  box-sizing: border-box;
  transition: border 0.12s ease-in-out;
  /* We use the :where selector to not increase the specificity of the selector */
}
.hbs-form input:where(:not([type=checkbox])), .search input:where(:not([type=checkbox])) {
  outline: none;
}
.hbs-form input:where(:not([type=checkbox])):focus, .search input:where(:not([type=checkbox])):focus {
  border: 1px solid var(--t-brand);
}
.hbs-form input[disabled], .search input[disabled] {
  background-color: #ddd;
}
.hbs-form select, .search select {
  -webkit-appearance: none;
  -moz-appearance: none;
  background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23CCC' d='M0 0h10L5 6 0 0z'/%3E%3C/svg%3E%0A") no-repeat #fff;
  background-position: right 10px center;
  border: 1px solid #848F99;
  border-radius: 4px;
  padding: 8px 30px 8px 10px;
  outline: none;
  color: #555;
  width: 100%;
}
.hbs-form select:focus, .search select:focus {
  border: 1px solid var(--t-brand);
}
.hbs-form select::-ms-expand, .search select::-ms-expand {
  display: none;
}
.hbs-form textarea, .search textarea {
  border: 1px solid #848F99;
  border-radius: 2px;
  resize: vertical;
  width: 100%;
  outline: none;
  padding: 10px;
}
.hbs-form textarea:focus, .search textarea:focus {
  border: 1px solid var(--t-brand);
}

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

.container-divider {
  /* The stock light-grey rule under the nav/hero clashes with the dark theme
     and reads as a stray separator line on inner pages, so drop the border. */
  border-top: 0;
  margin-bottom: 20px;
}

/* Sticky footer. On short pages (e.g. a category with only a few sections)
   the content does not fill the viewport, which left the footer floating in
   the middle. Lay the body out as a column at least a screen tall and let the
   main content grow, so the footer (and the Zendesk attribution after it) are
   always pushed to the bottom. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
body > main {
  flex: 1 0 auto;
}

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

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

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

/***** Buttons *****/
.button, .pagination-next-link, .pagination-prev-link, .pagination-first-link, .pagination-last-link, .subscriptions-subscribe button, .requests-table-toolbar .organization-subscribe button, .community-follow button, .article-subscribe button, .section-subscribe button, .split-button button {
  background-color: transparent;
  border: 1px solid var(--t-link);
  border-radius: 4px;
  color: var(--t-link);
  cursor: pointer;
  display: inline-block;
  font-size: 12px;
  line-height: 2.34;
  margin: 0;
  padding: 0 20px;
  text-align: center;
  transition: background-color 0.12s ease-in-out, border-color 0.12s ease-in-out, color 0.15s ease-in-out;
  user-select: none;
  white-space: nowrap;
  width: 100%;
  -webkit-touch-callout: none;
}
@media (min-width: 768px) {
  .button, .pagination-next-link, .pagination-prev-link, .pagination-first-link, .pagination-last-link, .subscriptions-subscribe button, .requests-table-toolbar .organization-subscribe button, .community-follow button, .article-subscribe button, .section-subscribe button, .split-button button {
    width: auto;
  }
}
.button:visited, .pagination-next-link:visited, .pagination-prev-link:visited, .pagination-first-link:visited, .pagination-last-link:visited, .subscriptions-subscribe button:visited, .requests-table-toolbar .organization-subscribe button:visited, .community-follow button:visited, .article-subscribe button:visited, .section-subscribe button:visited, .split-button button:visited {
  color: var(--t-link);
}
.button:hover, .pagination-next-link:hover, .pagination-prev-link:hover, .pagination-first-link:hover, .pagination-last-link:hover, .subscriptions-subscribe button:hover, .requests-table-toolbar .organization-subscribe button:hover, .community-follow button:hover, .article-subscribe button:hover, .section-subscribe button:hover, .split-button button:hover, .button:active, .pagination-next-link:active, .pagination-prev-link:active, .pagination-first-link:active, .pagination-last-link:active, .subscriptions-subscribe button:active, .requests-table-toolbar .organization-subscribe button:active, .community-follow button:active, .article-subscribe button:active, .section-subscribe button:active, .split-button button:active, .button:focus, .pagination-next-link:focus, .pagination-prev-link:focus, .pagination-first-link:focus, .pagination-last-link:focus, .subscriptions-subscribe button:focus, .requests-table-toolbar .organization-subscribe button:focus, .community-follow button:focus, .article-subscribe button:focus, .section-subscribe button:focus, .split-button button:focus, .button.button-primary, .button-primary.pagination-next-link, .button-primary.pagination-prev-link, .button-primary.pagination-first-link, .button-primary.pagination-last-link, .subscriptions-subscribe button.button-primary, .subscriptions-subscribe button[data-selected=true], .requests-table-toolbar .organization-subscribe button.button-primary, .requests-table-toolbar .organization-subscribe button[data-selected=true], .community-follow button.button-primary, .article-subscribe button.button-primary, .article-subscribe button[data-selected=true], .section-subscribe button.button-primary, .section-subscribe button[data-selected=true], .split-button button.button-primary {
  background-color: var(--t-elevated);
  color: var(--t-brand-text);
  text-decoration: none;
}
.button.button-primary:hover, .button-primary.pagination-next-link:hover, .button-primary.pagination-prev-link:hover, .button-primary.pagination-first-link:hover, .button-primary.pagination-last-link:hover, .subscriptions-subscribe button.button-primary:hover, .subscriptions-subscribe button[data-selected=true]:hover, .requests-table-toolbar .organization-subscribe button.button-primary:hover, .requests-table-toolbar .organization-subscribe button[data-selected=true]:hover, .community-follow button.button-primary:hover, .article-subscribe button.button-primary:hover, .article-subscribe button[data-selected=true]:hover, .section-subscribe button.button-primary:hover, .section-subscribe button[data-selected=true]:hover, .split-button button:hover, .button.button-primary:focus, .button-primary.pagination-next-link:focus, .button-primary.pagination-prev-link:focus, .button-primary.pagination-first-link:focus, .button-primary.pagination-last-link:focus, .subscriptions-subscribe button.button-primary:focus, .subscriptions-subscribe button[data-selected=true]:focus, .requests-table-toolbar .organization-subscribe button.button-primary:focus, .requests-table-toolbar .organization-subscribe button[data-selected=true]:focus, .community-follow button.button-primary:focus, .article-subscribe button.button-primary:focus, .article-subscribe button[data-selected=true]:focus, .section-subscribe button.button-primary:focus, .section-subscribe button[data-selected=true]:focus, .split-button button.button-primary:focus, .button.button-primary:active, .button-primary.pagination-next-link:active, .button-primary.pagination-prev-link:active, .button-primary.pagination-first-link:active, .button-primary.pagination-last-link:active, .subscriptions-subscribe button.button-primary:active, .subscriptions-subscribe button[data-selected=true]:active, .requests-table-toolbar .organization-subscribe button.button-primary:active, .requests-table-toolbar .organization-subscribe button[data-selected=true]:active, .community-follow button.button-primary:active, .article-subscribe button.button-primary:active, .article-subscribe button[data-selected=true]:active, .section-subscribe button.button-primary:active, .section-subscribe button[data-selected=true]:active, .split-button button.button-primary:active {
  background-color: var(--t-elevated-hover);
  border-color: var(--t-elevated-hover);
}
.button[data-disabled], [data-disabled].pagination-next-link, [data-disabled].pagination-prev-link, [data-disabled].pagination-first-link, [data-disabled].pagination-last-link, .subscriptions-subscribe button[data-disabled], .requests-table-toolbar .organization-subscribe button[data-disabled], .community-follow button[data-disabled], .article-subscribe button[data-disabled], .section-subscribe button[data-disabled], .split-button button[data-disabled] {
  cursor: default;
}

.button-large, .hbs-form input[type=submit] {
  cursor: pointer;
  background-color: var(--t-elevated);
  border: 0;
  border-radius: 4px;
  color: var(--t-brand-text);
  font-size: 14px;
  line-height: 2.72;
  min-width: 190px;
  padding: 0 1.9286em;
  width: 100%;
}
@media (min-width: 768px) {
  .button-large, .hbs-form input[type=submit] {
    width: auto;
  }
}
.button-large:visited, .hbs-form input[type=submit]:visited {
  color: var(--t-brand-text);
}
.button-large:hover, .button-large:active, .button-large:focus, .hbs-form input[type=submit]:hover, .hbs-form input[type=submit]:active, .hbs-form input[type=submit]:focus {
  background-color: var(--t-elevated-hover);
}
.button-large[disabled], .hbs-form input[type=submit][disabled] {
  background-color: #ddd;
}

.button-secondary {
  color: var(--t-text-muted);
  border: 1px solid #848F99;
  background-color: transparent;
}
.button-secondary:visited {
  color: var(--t-text-muted);
}
.button-secondary:hover, .button-secondary:focus, .button-secondary:active {
  color: var(--t-text);
  border: 1px solid #848F99;
  background-color: var(--t-surface-subtle-3);
}

/***** Split button *****/
.split-button {
  display: flex;
}

.split-button button {
  background-color: var(--t-elevated);
  border: 0;
  color: var(--t-brand-text);
  height: 32px;
  line-height: 16px;
  outline-color: var(--t-brand);
}

[dir=rtl] .split-button button:not(:only-child):first-child {
  border-left: 1px solid var(--t-brand-text);
  border-top-left-radius: unset;
  border-bottom-left-radius: unset;
}
[dir=ltr] .split-button button:not(:only-child):first-child {
  border-right: 1px solid var(--t-brand-text);
  border-top-right-radius: unset;
  border-bottom-right-radius: unset;
}
.split-button button:not(:only-child):last-child {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 26px;
  min-width: 26px;
  max-width: 26px;
  padding: 0;
}
[dir=rtl] .split-button button:not(:only-child):last-child {
  border-top-right-radius: unset;
  border-bottom-right-radius: unset;
}
[dir=ltr] .split-button button:not(:only-child):last-child {
  border-top-left-radius: unset;
  border-bottom-left-radius: unset;
}

/***** Tables *****/
.table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border-spacing: 0;
}
@media (min-width: 768px) {
  .table {
    table-layout: auto;
  }
}
.table th,
.table th a {
  color: var(--t-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 #ddd;
  display: block;
  padding: 20px 0;
}
@media (min-width: 768px) {
  .table tr {
    display: table-row;
  }
}
.table td {
  display: block;
}
@media (min-width: 768px) {
  .table td {
    display: table-cell;
  }
}
@media (min-width: 1024px) {
  .table td, .table th {
    padding: 20px 30px;
  }
}
@media (min-width: 768px) {
  .table td, .table th {
    padding: 10px 20px;
    height: 60px;
  }
}

/***** Forms *****/
.form {
  max-width: 650px;
}

.form-field ~ .form-field {
  margin-top: 25px;
}

.form-field label {
  display: block;
  font-size: 13px;
  margin-bottom: 5px;
}

.form-field input {
  border: 1px solid #848F99;
  border-radius: 4px;
  padding: 10px;
  width: 100%;
}
.form-field input:focus {
  border: 1px solid var(--t-brand);
}

.form-field input[type=text] {
  border: 1px solid #848F99;
  border-radius: 4px;
}
.form-field input[type=text]:focus {
  border: 1px solid var(--t-brand);
}

.form-field input[type=checkbox] {
  width: auto;
}

.form-field .nesty-input {
  border-radius: 4px;
  border: 1px solid #848F99;
  height: 40px;
  line-height: 40px;
  outline: none;
  vertical-align: middle;
}
.form-field .nesty-input:focus {
  border: 1px solid var(--t-brand);
  text-decoration: none;
}

.form-field .hc-multiselect-toggle {
  border: 1px solid #848F99;
}

.form-field .hc-multiselect-toggle:focus {
  outline: none;
  border: 1px solid var(--t-brand);
  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(--t-text-muted);
  margin-left: 4px;
}

.form-field p {
  color: var(--t-text-muted);
  font-size: 12px;
  margin: 5px 0;
}

.form footer {
  margin-top: 40px;
  padding-top: 30px;
}

.form footer a {
  color: var(--t-text-muted);
  cursor: pointer;
  margin-right: 15px;
}

.form .suggestion-list {
  font-size: 13px;
  margin-top: 30px;
}
.form .suggestion-list label {
  border-bottom: 1px solid #ddd;
  display: block;
  padding-bottom: 5px;
}
.form .suggestion-list li {
  padding: 10px 0;
}
.form .suggestion-list li a:visited {
  color: var(--t-link-visited);
}

/***** Header *****/
/* Two bar header, modelled on secureauth.com: a thin full width status
   strip at the very top, then any site alert bars beneath it, then a
   floating rounded nav pill that sits in front of the rotating hero (the
   wireframe shows around it). The whole top group is in normal flow so a
   variable height alert bar slots in cleanly; the nav pill overlays the
   hero via a negative top margin on the hero rather than fixed offsets. */

/* Top status strip */
.topbar {
  position: relative;
  z-index: 3;
  width: 100%;
  height: 38px;
  background-color: var(--t-bg);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
}
:root[data-theme="light"] .topbar {
  border-bottom-color: rgba(20, 30, 38, 0.08);
}
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Floating nav pill */
.site-nav {
  /* Sticky so the nav pill follows the page as you scroll. Sticky (not fixed)
     means it just pins at the top once it reaches it, so a variable-height
     alert bar above it needs no offset maths. */
  position: sticky;
  top: 0;
  z-index: 500;
  padding: 14px 24px 8px;
}
.site-nav-pill {
  max-width: 1400px;
  margin: 0 auto;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 0 24px;
  border-radius: 80px;
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.14);
}
/* Frosting lives on a ::before so the pill itself is NOT a backdrop-filter root.
   An ancestor with backdrop-filter cancels a descendant's, which was killing the
   blur on the nested Products/Documentation mega-menus; this keeps theirs working
   while the pill still frosts the rotating wireframe behind it. */
.site-nav-pill::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-color: rgba(18, 24, 31, 0.14);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
:root[data-theme="light"] .site-nav-pill {
  border-color: rgba(20, 30, 38, 0.12);
}
:root[data-theme="light"] .site-nav-pill::before {
  background-color: rgba(255, 255, 255, 0.18);
}
.site-nav-links {
  display: flex;
  align-items: center;
  gap: 6px;
}
.site-nav-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
}
.site-nav .logo img {
  max-height: 30px;
}

/* Nav item styling for the KB toggle and Ask AI */
.site-nav-links .kb-toggle,
.site-nav-links .ask-ai {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--t-text);
  font-size: 14px;
  font-weight: 500;
  padding: 9px 18px;
  border-radius: 999px;
  border: 0;
  background: none;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.site-nav-links .kb-toggle:hover,
.site-nav-links .ask-ai:hover,
.site-nav-links .kb-toggle:focus,
.site-nav-links .ask-ai:focus {
  background-color: var(--t-surface-hover);
  color: var(--t-surface-hover-fg);
  text-decoration: none;
}
.site-nav-links .ask-ai:visited { color: var(--t-text); }
/* When the Knowledge Base menu is open, the toggle becomes a filled cyan
   pill, matching the active nav item treatment on secureauth.com. */
.site-nav-links .kb-toggle[aria-expanded="true"],
.site-nav-links .kb-toggle[aria-expanded="true"]:hover,
.site-nav-links .kb-toggle[aria-expanded="true"]:focus {
  background-color: var(--t-pill-bg);
  color: var(--t-pill-text);
}

/* Login link and Submit a Request call to action in the pill */
.site-nav-actions .nav-login {
  color: var(--t-link);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.site-nav-actions .nav-login:hover { text-decoration: underline; }
/* Register link: a light outlined pill (like the reference "Free Trial" button)
   so it reads as a distinct action next to the plain Login text link. Reuses
   .nav-login for the accent colour + responsive hide; these rules add the pill. */
.site-nav-actions .nav-register {
  padding: 8px 16px;
  border: 1px solid var(--t-link);
  border-radius: 999px;
  background-color: var(--t-bg);
  text-decoration: none;
}
.site-nav-actions .nav-register:hover {
  text-decoration: none;
  background-color: var(--t-surface-subtle-3);
  border-color: var(--t-link);
}

/* Home announcement rotator (initPromo in sa-brand.js): up to 3 slides below
   the hero search. One slide = static; 2-3 cross-fade on a timer + dot clicks,
   with the track height animated to each slide's content. */
.sa-promo {
  --sa-pt: 0; /* 0 solid .. 1 most see-through; set from promo_transparency/10 by initPromo */
  max-width: 640px;
  width: 100%;
  margin: 110px auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.sa-promo-track { width: 100%; }
.sa-promo-slide {
  box-sizing: border-box;
  width: 100%;
  text-align: center;
  padding: 22px 26px;
  border-radius: 16px;
  /* the cyan->violet gradient edge is a MASKED ring (::after) so it shows at every
     transparency level without needing an opaque fill to hide a border-box gradient. */
  border: 0;
  background: transparent;
  position: relative;
}
/* The card's whole fill lives on ::before so its opacity scales with the 0-10
   transparency setting (--sa-pt = promo_transparency / 10; 0 = solid, 1 = fully
   see-through). This is the ONLY fill on the card, so fading it genuinely reveals
   the page — nothing opaque underneath. */
.sa-promo-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(150deg, rgba(24, 31, 46, 0.78), rgba(15, 20, 31, 0.74));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  opacity: calc(1 - var(--sa-pt, 0));
  z-index: 0;
  pointer-events: none;
}
.sa-promo-slide > * { position: relative; z-index: 1; }
/* cyan->violet lit edge as a masked gradient ring: always visible, and it never blocks
   the fade underneath (a border-box gradient would need an opaque fill to hide it). */
.sa-promo-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(130deg, var(--t-link), #9364FF);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: 2;
  pointer-events: none;
}
:root[data-theme="light"] .sa-promo-slide::before {
  /* floored fade so the white promo text stays legible over the pale page */
  opacity: calc(1 - 0.45 * var(--sa-pt, 0));
}
/* Coverflow: active card centred & sharp; neighbours peek left/right, scaled
   down, dimmed and blurred. The track clips the far edges so peeks never cause
   sideways scroll. */
.sa-promo--carousel .sa-promo-track {
  position: relative;
  transition: height 0.6s ease;
}
.sa-promo--carousel .sa-promo-slide {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 66%;
  margin: 0 auto;
  transform: scale(0.8);
  opacity: 0;
  filter: blur(4px);
  transition: transform 0.85s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.7s ease, filter 0.7s ease;
  pointer-events: none;
  z-index: 1;
}
.sa-promo--carousel .sa-promo-slide.is-active {
  transform: translateX(0) scale(1);
  opacity: 1;
  filter: none;
  pointer-events: auto;
  z-index: 3;
}
/* fill + lit edge now come from .sa-promo-slide (base) + ::before, so they fade with --sa-pt */
.sa-promo--carousel .sa-promo-slide.is-prev {
  transform: translateX(-60%) scale(0.8);
  opacity: 0.4;
  filter: blur(3px);
  z-index: 2;
}
.sa-promo--carousel .sa-promo-slide.is-next {
  transform: translateX(60%) scale(0.8);
  opacity: 0.4;
  filter: blur(3px);
  z-index: 2;
}
/* Narrow screens: not enough room for full side peeks, so fall back to just the
   centred card (cross-fade) rather than clip the neighbours at the screen edge. */
@media (max-width: 850px) {
  .sa-promo--carousel .sa-promo-slide { width: 100%; }
  .sa-promo--carousel .sa-promo-slide.is-prev,
  .sa-promo--carousel .sa-promo-slide.is-next { opacity: 0; }
  .sa-promo--carousel .sa-promo-slide.is-active { transform: none; }
}
/* Stacked mode: one card in a fixed spot. Pronounced fade: the outgoing card
   fades fully OUT, then (after a short beat) the incoming card fades IN - so both
   phases read clearly rather than washing into each other. No coverflow, no side
   peeks. The active card wears the same lit gradient edge as the carousel. */
.sa-promo--stacked .sa-promo-track {
  position: relative;
  transition: height 0.6s ease;
}
.sa-promo--stacked .sa-promo-slide {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  margin: 0 auto;
  opacity: 0;
  transition: opacity 1.4s ease-in-out;
  pointer-events: none;
  z-index: 1;
  /* Full card look (fill + border) comes from .sa-promo-slide + ::before, so every
     stacked slide cross-fades as a whole and the fill fades with --sa-pt. */
}
.sa-promo--stacked .sa-promo-slide.is-active {
  opacity: 1;
  transition: opacity 1.4s ease-in-out 1.4s;
  pointer-events: auto;
  z-index: 3;
}
/* Card transparency is now the 0-10 promo_transparency setting, applied as --sa-pt on
   .sa-promo (see .sa-promo-slide::before above). No separate transparent class. On the
   light theme the fill stays a dark card (floored opacity), so the white promo text
   keeps reading — no text flip needed. */
.sa-promo-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--t-link);
  margin-bottom: 12px;
  padding: 4px 12px;
  border-radius: 999px;
  /* a soft pill badge tinted to whatever colour the eyebrow is set to
     (currentColor = the per-field colour picker value). */
  background: color-mix(in srgb, currentColor 16%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 38%, transparent);
}
.sa-promo-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--t-text);
  margin: 0 0 6px;
  text-wrap: balance;
}
.sa-promo-text {
  font-size: 14.5px;
  color: var(--t-text-muted);
  line-height: 1.5;
  margin: 0 0 16px;
}
.sa-promo-btn,
.sa-promo-btn:visited {
  display: inline-flex;
  align-items: center;
  background-color: var(--t-elevated);
  color: var(--t-brand-text);
  font-size: 14px;
  font-weight: 600;
  padding: 9px 20px;
  border-radius: 999px;
  text-decoration: none;
}
.sa-promo-btn:hover {
  background-color: var(--t-elevated-hover);
  color: var(--t-brand-text);
  text-decoration: none;
}
.sa-promo-dots { display: flex; gap: 8px; margin-top: 14px; }
.sa-promo-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.28);
  transition: background 0.15s ease, transform 0.15s ease;
}
:root[data-theme="light"] .sa-promo-dot { background: rgba(20, 30, 40, 0.22); }
.sa-promo-dot:hover { background: var(--t-link); }
.sa-promo-dot.is-active { background: var(--t-link); transform: scale(1.25); }
@media (prefers-reduced-motion: reduce) {
  .sa-promo--carousel .sa-promo-track,
  .sa-promo--carousel .sa-promo-slide,
  .sa-promo--stacked .sa-promo-track,
  .sa-promo--stacked .sa-promo-slide { transition: none; }
}
/* Gentle entrance: the cards stay hidden until well after the hero has settled
   (1.1s delay), then fade in very slowly over 3s with a soft rise; a glow lifts
   them off the dark hero. (sa-fade-in-up is hero-element-only, hence a dedicated
   animation here.) */
.sa-promo { animation: sa-promo-in 3s ease-in-out 1.1s both; }
@keyframes sa-promo-in {
  from { opacity: 0; transform: translateY(26px) scale(0.94); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.sa-promo-slide { box-shadow: 0 8px 52px -6px color-mix(in srgb, rgba(250, 250, 247, 1) 52%, transparent); }
:root[data-theme="light"] .sa-promo-slide { box-shadow: 0 10px 42px -10px color-mix(in srgb, rgba(250, 250, 247, 1) 52%, transparent); }
@media (prefers-reduced-motion: reduce) {
  .sa-promo { animation: none; }
}
.site-nav-actions .nav-cta {
  display: inline-flex;
  align-items: center;
  background-color: var(--t-elevated);
  color: var(--t-brand-text);
  font-size: 14px;
  font-weight: 600;
  padding: 9px 18px;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
}
.site-nav-actions .nav-cta:hover,
.site-nav-actions .nav-cta:visited {
  background-color: var(--t-elevated-hover);
  color: var(--t-brand-text);
  text-decoration: none;
}

/* The three former home tiles, now pill buttons in the nav. Subtle filled
   pills at rest, brand fill on hover. */
.site-nav-actions .nav-pill,
.site-nav-actions .nav-pill:visited {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  color: var(--t-text);
  background-color: var(--t-surface-hover);
  text-decoration: none;
  white-space: nowrap;
}
.site-nav-actions .nav-pill:hover,
.site-nav-actions .nav-pill:focus {
  background-color: var(--t-elevated);
  color: var(--t-brand-text);
  text-decoration: none;
}

/* Hide the desktop nav links on narrow screens; the hamburger takes over.
   The standalone theme toggle and the signed-in user dropdown also collapse
   into the hamburger menu, so hide them here too (leaving only the logo and
   the hamburger in the pill). */
@media (max-width: 1149px) {
  .site-nav-links,
  .site-nav-actions .nav-pill,
  .site-nav-actions .nav-login,
  .site-nav-actions .nav-cta,
  .site-nav-actions > .sa-theme-toggle,
  .site-nav-actions > .user-info {
    display: none;
  }
}
@media (min-width: 1150px) {
  .nav-wrapper-mobile {
    display: none;
  }
}

.logo img {
  max-height: 32px;
  vertical-align: middle;
}

/* Logo rebuilt to match secureauth.com exactly: their own swirl mark (a
   two path SVG, filled with currentColor so it themes) plus the SecureAuth
   wordmark in Funnel Sans 600 at 24px, icon 32px, same as their nav. White
   in dark mode, near black in light. */
/* Scoped under .logo and given explicit colour on the word too, so the
   stock .logo a / .logo span link colour (the cyan link token) does not
   win on specificity and tint the logo. White in dark, near black light. */
.logo .sa-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #FFFFFF;
}
:root[data-theme="light"] .logo .sa-logo {
  color: #0A0F18;
}
.logo .sa-logo-word {
  color: inherit;
}
.sa-logo-mark {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}
.sa-logo-word {
  font-family: 'Funnel Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
}

.logo-img-light {
  display: none;
}
:root[data-theme="light"] .logo-img-dark {
  display: none;
}
:root[data-theme="light"] .logo-img-light {
  display: inline;
}

.logo span {
  margin: 0 10px;
  color: var(--t-link);
}

.logo a {
  display: inline-block;
}

.logo a:hover, .logo a:focus, .logo a:active {
  text-decoration: none;
}

.sa-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--t-text);
  background: transparent;
  color: var(--t-text);
  cursor: pointer;
  padding: 0;
  margin-left: 12px;
  flex-shrink: 0;
  order: 5;
  transition: opacity 0.15s ease;
}
.sa-theme-toggle:hover {
  opacity: 0.75;
}
.sa-theme-toggle-moon {
  display: none;
}
:root[data-theme="light"] .sa-theme-toggle-sun {
  display: none;
}
:root[data-theme="light"] .sa-theme-toggle-moon {
  display: block;
}

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

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

@media (max-width: 768px) {
  .nav-wrapper-desktop {
    display: none;
  }
}
@media (min-width: 768px) {
  .nav-wrapper-desktop {
    display: none;
  }
}
@media (min-width: 1024px) {
  .nav-wrapper-desktop {
    display: inline-block;
  }
}
.nav-wrapper-desktop a {
  border: 0;
  color: var(--t-link);
  display: none;
  font-size: 14px;
  padding: 0 20px 0 0;
  width: auto;
}
@media (min-width: 768px) {
  .nav-wrapper-desktop a {
    display: inline-block;
  }
}
[dir=rtl] .nav-wrapper-desktop a {
  padding: 0 0 0 20px;
}
.nav-wrapper-desktop a:hover, .nav-wrapper-desktop a:focus, .nav-wrapper-desktop a:active {
  background-color: transparent;
  color: var(--t-link);
  text-decoration: underline;
}

@media (min-width: 1150px) {
  .nav-wrapper-mobile {
    display: none;
  }
}
.nav-wrapper-mobile .menu-button-mobile {
  background: none;
  border: 0;
  width: auto;
  min-width: 0;
  cursor: pointer;
  /* The hamburger icon is stroke:currentColor, so give the button the theme
     text colour or it falls back to black and vanishes in dark mode. */
  color: var(--t-text);
}
/* At mobile width the account avatar belongs INSIDE the opened hamburger menu
   (its profile row), not on the bar. Zendesk renders the avatar on the
   hamburger button itself - hide it so only the menu icon shows. */
.nav-wrapper-mobile .menu-button-mobile .user-avatar {
  display: none;
}
.nav-wrapper-mobile .menu-button-mobile .icon-menu {
  padding: 7px;
  vertical-align: middle;
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
.nav-wrapper-mobile .menu-button-mobile[aria-expanded=true] .icon-menu {
  background: var(--t-surface-hover);
}
/* Themed floating panel below the nav pill (the stock rule was a hardcoded
   white box pinned to the old full-width header's 71px height, which read as
   an unreadable white slab in dark mode and sat in the wrong place under the
   floating pill). Positioned relative to .site-nav, inset from the edges and
   rounded to match the pill. */
.nav-wrapper-mobile .menu-list-mobile {
  position: absolute;
  background-color: var(--t-surface-subtle-3);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  right: 16px;
  left: 16px;
  top: 84px;
  padding: 8px 0;
  z-index: 10;
  /* The nav is sticky, so this panel is anchored to it and does not move with
     page scroll. When the menu is taller than the screen (signed-in, with the
     KB + Documentation lists), the lower items - Sign out especially - would
     sit permanently below the fold with no way to reach them. Cap the height to
     the viewport and let the panel scroll internally instead. dvh tracks the
     mobile browser's shrinking chrome; vh is the fallback. */
  max-height: calc(100vh - 104px);
  max-height: calc(100dvh - 104px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
:root[data-theme="light"] .nav-wrapper-mobile .menu-list-mobile {
  border-color: rgba(20, 30, 38, 0.12);
  box-shadow: 0 18px 40px -18px rgba(23, 73, 77, 0.28);
}
.nav-wrapper-mobile .menu-list-mobile[aria-expanded=false] {
  display: none;
}
.nav-wrapper-mobile .menu-list-mobile[aria-expanded=true] {
  display: block;
}
.nav-wrapper-mobile .menu-list-mobile-items .item {
  margin: 4px 0;
}
.nav-wrapper-mobile .menu-list-mobile-items li:empty:not(.nav-divider) {
  display: none;
}
.nav-wrapper-mobile .menu-list-mobile-items .nav-divider {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0;
}
:root[data-theme="light"] .nav-wrapper-mobile .menu-list-mobile-items .nav-divider {
  border-bottom-color: rgba(20, 30, 38, 0.1);
}
/* Section labels ("Knowledge Base", "Documentation") inside the mobile menu. */
.nav-wrapper-mobile .mobile-nav-heading {
  color: var(--t-text-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 10px 24px 4px;
  margin: 0;
}
/* Theme toggle rendered as a full-width row inside the mobile menu (the
   standalone circular toggle is hidden at these widths). */
.nav-wrapper-mobile .menu-theme-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: none;
  border: 0;
  padding: 8px 24px;
  color: var(--t-text);
  cursor: pointer;
  text-align: start;
  font: inherit;
  font-size: 14px;
}
.nav-wrapper-mobile .menu-theme-toggle:hover,
.nav-wrapper-mobile .menu-theme-toggle:focus {
  background-color: var(--t-surface-hover);
}
.nav-wrapper-mobile .menu-theme-toggle svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.nav-wrapper-mobile .menu-list-mobile-items .nav-divider:last-child {
  display: none;
}
.nav-wrapper-mobile .menu-list-mobile-items button {
  background: none;
  border: none;
  padding: 8px 24px;
  width: 100%;
  height: 100%;
  color: var(--t-text);
  cursor: pointer;
  text-align: start;
}
.nav-wrapper-mobile .menu-list-mobile-items button:active, .nav-wrapper-mobile .menu-list-mobile-items button:focus, .nav-wrapper-mobile .menu-list-mobile-items button:hover {
  background-color: var(--t-surface-hover);
  text-decoration: underline;
}
.nav-wrapper-mobile .menu-list-mobile-items a {
  display: block;
  padding: 8px 24px;
  width: 100%;
  height: 100%;
  color: var(--t-text);
}
.nav-wrapper-mobile .menu-list-mobile-items a:active, .nav-wrapper-mobile .menu-list-mobile-items a:focus, .nav-wrapper-mobile .menu-list-mobile-items a:hover {
  background-color: var(--t-surface-hover);
}
.nav-wrapper-mobile .menu-list-mobile-items .my-profile {
  display: flex;
  line-height: 1.5;
}
.nav-wrapper-mobile .menu-list-mobile-items .my-profile .my-profile-tooltip {
  font-size: 12px;
  color: #68737D;
}
.nav-wrapper-mobile .menu-list-mobile-items .menu-profile-avatar {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 8px;
  margin-top: 1px;
}
[dir=rtl] .nav-wrapper-mobile .menu-list-mobile-items .menu-profile-avatar {
  margin-right: 0;
  margin-left: 8px;
}

.skip-navigation {
  align-items: center;
  background-color: black;
  color: white;
  display: flex;
  font-size: 14px;
  justify-content: center;
  left: -999px;
  margin: 20px;
  padding: 20px;
  overflow: hidden;
  position: absolute;
  top: auto;
  z-index: -999;
}
[dir=rtl] .skip-navigation {
  left: initial;
  right: -999px;
}
.skip-navigation:focus, .skip-navigation:active {
  left: auto;
  overflow: auto;
  text-align: center;
  text-decoration: none;
  top: auto;
  z-index: 999;
}
[dir=rtl] .skip-navigation:focus, [dir=rtl] .skip-navigation:active {
  left: initial;
  right: auto;
}

#zd-modal-container ~ .skip-navigation {
  display: none;
}

.ask-ai {
  align-items: center;
  background-color: var(--t-link);
  border: 1px solid var(--t-link);
  border-radius: 4px;
  color: var(--t-brand-text);
  display: inline-flex;
  font-size: 14px;
  font-weight: 600;
  gap: 6px;
  line-height: 1.4286;
  padding: 6px 14px;
}
.ask-ai:visited {
  color: var(--t-brand-text);
}
.ask-ai .ask-ai-icon {
  flex-shrink: 0;
}

.nav-wrapper-desktop .ask-ai {
  margin-inline-end: 16px;
  padding: 6px 14px;
}
.nav-wrapper-desktop .ask-ai, .nav-wrapper-desktop .ask-ai:visited {
  color: var(--t-brand-text);
}
.nav-wrapper-desktop .ask-ai:hover, .nav-wrapper-desktop .ask-ai:focus, .nav-wrapper-desktop .ask-ai:active {
  background-color: var(--t-link-hover);
  border-color: var(--t-link-hover);
  color: var(--t-brand-text);
  text-decoration: none;
}

.nav-wrapper-mobile .ask-ai {
  margin: 4px 24px;
  padding: 6px 14px;
  width: auto;
  height: auto;
}
.nav-wrapper-mobile .ask-ai, .nav-wrapper-mobile .ask-ai:visited {
  color: var(--t-brand-text);
}
.nav-wrapper-mobile .ask-ai:hover, .nav-wrapper-mobile .ask-ai:focus, .nav-wrapper-mobile .ask-ai:active {
  background-color: var(--t-link-hover);
  border-color: var(--t-link-hover);
  color: var(--t-brand-text);
  text-decoration: none;
}

/***** User info in header *****/
.user-info {
  display: inline-block;
}
.user-info .dropdown-toggle::after {
  display: none;
}
@media (min-width: 768px) {
  .user-info .dropdown-toggle::after {
    display: inline-block;
  }
}
.user-info > button {
  border: 0;
  color: var(--t-link);
  min-width: 0;
  padding: 0;
  white-space: nowrap;
}
.user-info > button:hover, .user-info > button:focus {
  color: var(--t-link);
  background-color: transparent;
}
.user-info > button::after {
  color: var(--t-link);
  padding-right: 15px;
}
[dir=rtl] .user-info > button::after {
  padding-left: 15px;
  padding-right: 0;
}

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

/***** User avatar *****/
.user-avatar {
  height: 25px;
  width: 25px;
  border-radius: 50%;
  display: inline-block;
  vertical-align: middle;
}

.avatar {
  display: inline-block;
  position: relative;
}
.avatar img {
  height: 40px;
  width: 40px;
}
.avatar .icon-agent {
  color: var(--t-link);
  border: 2px solid #fff;
  border-radius: 50%;
  bottom: -4px;
  background-color: var(--t-brand-text);
  font-size: 17px;
  height: 17px;
  line-height: 17px;
  position: absolute;
  right: -2px;
  text-align: center;
  width: 17px;
}

/***** Footer *****/
.footer {
  border-top: 1px solid #ddd;
  margin-top: 60px;
  padding: 30px 0;
}
.footer a {
  color: var(--t-text-muted);
}
.footer-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 5%;
  display: flex;
  justify-content: space-between;
}
@media (min-width: 1160px) {
  .footer-inner {
    padding: 0;
    width: 90%;
  }
}
.footer-language-selector button {
  color: var(--t-text-muted);
  display: inline-block;
}

.powered-by-zendesk a,
.powered-by-zendesk a:visited {
  color: var(--t-text-muted);
}

/***** Breadcrumbs *****/
.breadcrumbs {
  margin: 0 0 15px 0;
  padding: 0;
  display: flex;
}
@media (min-width: 768px) {
  .breadcrumbs {
    margin: 0;
  }
}
.breadcrumbs li {
  display: inline-block;
  color: var(--t-text-muted);
  font-size: 13px;
  max-width: 450px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.breadcrumbs li + li::before {
  content: ">";
  margin: 0 4px;
  color: var(--t-text-muted);
}
/* secureauth.com-style breadcrumbs: ancestor links are muted grey, the
   current (last) page uses the bright text colour, separators stay muted. */
.breadcrumbs li a,
.breadcrumbs li a:visited {
  color: var(--t-text-muted);
  text-decoration: none;
}
.breadcrumbs li a:hover,
.breadcrumbs li a:focus {
  color: var(--t-text);
  text-decoration: underline;
}
.breadcrumbs li:last-child {
  color: #FFFFFF;
  font-weight: 700;
}
:root[data-theme="light"] .breadcrumbs li:last-child {
  color: #0A0F18;
}

/***** Search field *****/
.search-container {
  position: relative;
}

.search {
  border-color: #848F99;
  border-radius: 30px;
  border-style: solid;
  border-width: 1px;
  display: flex;
  position: relative;
  transition: border 0.12s ease-in-out;
}
.search:focus-within {
  border-color: var(--t-brand);
}
.search input[type=search],
.search .clear-button {
  background-color: #fff;
  border-radius: 30px;
  border: none;
}
.search-full input[type=search], .search-full .clear-button {
  border-color: #fff;
}
/* Smoked-glass search treatment (translucent + blurred) instead of a
   solid pill, matching secureauth.com's own nav bar look. Covers both
   the big hero search (.search-full, on the home/category banner) and
   the slim sub-nav search reused across section/article/community/
   search-results/new-request/service pages (.search-container .search),
   so every search field on the site reads consistently. Dark and light
   get their own tuned values rather than sharing one, since a dark
   smoked glass over a light page just reads as a plain grey box.

   Dark is the BARE (unscoped) default here, not :root[data-theme="dark"]
   -- matching every other themed rule in this file. document_head.hbs
   only ever sets the data-theme attribute for a RETURNING visitor with a
   saved localStorage preference; a first-time visitor gets no attribute
   at all and falls through to the bare :root styling, which is meant to
   BE dark by default. Scoping this specifically to [data-theme="dark"]
   (as first written) only matched once the toggle button had explicitly
   set that attribute -- meaning a fresh page load rendered the plain
   white fallback pill, and only correctly showed the glass effect after
   toggling light-then-back-to-dark, since that toggle explicitly writes
   the attribute. Caught live: the bug reproduced exactly that way.

   color is !important because the base template's own
   ".search input[type=search]" (and its ":focus" variant, which is
   MORE specific than this rule) both set color separately and one of
   them always wins the normal cascade -- the typed-text color was
   silently stuck at the base template's grey (#666, #555 on focus)
   even though this rule "looked" correct in the stylesheet. Confirmed
   live: placeholder rendered bright, typed text rendered dark. */
.search-full input[type=search],
.search-full .clear-button,
.search-container .search input[type=search],
.search-container .search .clear-button {
  background-color: rgba(18, 24, 31, 0.45);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-color: rgba(255, 255, 255, 0.16);
  color: #F4F7F9 !important;
}
.search-full input[type=search]::placeholder,
.search-container .search input[type=search]::placeholder {
  color: rgba(232, 236, 239, 0.62);
}
.search-full .search-icon,
.search-container .search-icon {
  color: rgba(232, 236, 239, 0.8);
}
:root[data-theme="light"] .search-full input[type=search],
:root[data-theme="light"] .search-full .clear-button,
:root[data-theme="light"] .search-container .search input[type=search],
:root[data-theme="light"] .search-container .search .clear-button {
  background-color: rgba(148, 158, 167, 0.22);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-color: rgba(20, 30, 38, 0.14);
  color: var(--t-text) !important;
}
:root[data-theme="light"] .search-full input[type=search]::placeholder,
:root[data-theme="light"] .search-container .search input[type=search]::placeholder {
  color: var(--t-text-muted);
}
:root[data-theme="light"] .search-full .search-icon,
:root[data-theme="light"] .search-container .search-icon {
  color: var(--t-text-muted);
}
.search input[type=search] {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  color: #666;
  flex: 1 1 auto;
  height: 40px;
  width: 100%;
}
.search input[type=search]:focus {
  color: #555;
}
.search input[type=search]::-webkit-search-decoration, .search input[type=search]::-webkit-search-cancel-button, .search input[type=search]::-webkit-search-results-button, .search input[type=search]::-webkit-search-results-decoration {
  -webkit-appearance: none;
}
/* Instant-search dropdown: the result TITLE is a Zendesk web component
   (<zd-autocomplete-option>) hardcoded to #555, unreadable on the dark dropdown.
   Brighten it to the theme text colour in dark mode (light mode's #555 on the pale
   dropdown is already fine). The breadcrumb path already uses a theme colour. */
:root:not([data-theme="light"]) zd-autocomplete-option {
  color: var(--t-text) !important;
}
/* ...and Zendesk highlights the hovered/selected option with a light #F3F3F3 bg,
   which now hides that light text. Repaint the highlight dark so it stays legible. */
:root:not([data-theme="light"]) zd-autocomplete-option:hover,
:root:not([data-theme="light"]) zd-autocomplete-option[aria-selected="true"] {
  background-color: var(--t-surface-subtle-5) !important;
}
.search input[type=search]:-webkit-autofill, .search input[type=search]:-webkit-autofill:hover, .search input[type=search]:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #fff inset;
}
.search .clear-button {
  align-items: center;
  box-sizing: border-box;
  color: #777;
  cursor: pointer;
  display: none;
  flex: none;
  justify-content: center;
  padding: 0 15px;
}
.search .clear-button:hover {
  background-color: var(--t-brand);
  color: #fff;
}
.search .clear-button:focus {
  outline: 0;
  box-shadow: 0 0 0 3px var(--t-brand);
}
.search-has-value .clear-button {
  display: flex;
}

[dir=ltr] .search input[type=search] {
  padding-left: 40px;
  padding-right: 20px;
}
[dir=ltr] .search-has-value input[type=search] {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  border-right-color: transparent;
}
[dir=ltr] .search-has-value input[type=search]:focus {
  border-right-color: var(--t-brand);
}
[dir=ltr] .search .clear-button {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  border-left-color: transparent;
}
[dir=ltr] .search .clear-button:focus {
  border-left-color: var(--t-brand);
}

[dir=rtl] .search input[type=search] {
  padding-left: 20px;
  padding-right: 40px;
}
[dir=rtl] .search-has-value input[type=search] {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  border-left-color: transparent;
}
[dir=rtl] .search-has-value input[type=search]:focus {
  border-left-color: var(--t-brand);
}
[dir=rtl] .search .clear-button {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  border-right-color: transparent;
}
[dir=rtl] .search .clear-button:focus {
  border-right-color: var(--t-brand);
}

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

/***** Hero component *****/
/* Reworked to echo secureauth.com's marketing hero: a slowly rotating
   wireframe shape (the site's own hero-shape SVG, recoloured per theme),
   an uppercase brand eyebrow, a large Funnel Sans headline, and the
   existing smoked glass search field beneath it. Same layout in both
   themes; only the palette and the shape colour differ. */
.hero {
  position: relative;
  z-index: 1;
  overflow: hidden;
  /* Pull up by the nav pill's height so the pill floats in front of the
     hero and the rotating wireframe shows around it. Top padding then
     keeps the headline clear of the pill. */
  margin-top: -78px;
  min-height: calc(100vh - 38px);
  /* Top padding anchors the content a fixed distance below the nav so it can
     never ride up behind the floating nav pill, whatever the window height or
     however far the headline wraps at narrow widths. This top anchoring (not
     vertical centring) is what keeps the headline clear of the pill. */
  padding: 240px 20px 60px;
  text-align: center;
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
/* Inner-page heroes (category, section, etc.) reuse .hero for the search bar
   but have no rotating wireframe, so they should be a compact band under the
   nav rather than the full-height home hero - that keeps the page's own
   content (e.g. a category's section list) visible right under the search
   instead of pushed a full screen down. */
.hero:not(:has(.hero-grid)) {
  min-height: 0;
  padding: 104px 20px 26px;
}

/* Per-page hero background for category/section pages: the SecureAuth
   wireframe (shared texture, oriented/scaled per page) plus a coloured glow
   whose colour is chosen per category/section id by initHeroBg() in
   sa-brand.js. Sits behind the page content and fades out toward the content
   below, so the transparent cards read over it. */
main { position: relative; }
.inner-hero-bg {
  position: absolute;
  top: -78px;
  left: 0;
  right: 0;
  height: 760px;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 66%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 66%, transparent 100%);
}
/* The wireframe: a gradient filled layer cut into one of secureauth.com's
   own "wave" line masks (which wave, and the gradient/glow colour, are chosen
   per page by initHeroBg()). Same technique secureauth.com uses. */
.inner-hero-bg__wire {
  position: absolute;
  inset: -8% -6% -20% -6%;
  background: var(--wire-gradient, linear-gradient(160deg, #4CB5E2 0%, #4354B8 58%, #0D1E4D 100%));
  opacity: 0.34;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-position: center top;
  mask-position: center top;
}
:root[data-theme="light"] .inner-hero-bg__wire {
  /* The per-page gradient is tuned for the dark ground and is nearly
     invisible on white, so light mode uses a darker mid-blue wireframe at a
     higher opacity to stay visible. Per-page colour still comes through the
     glow layer. */
  background: linear-gradient(160deg, #3A6BC8 0%, #2E4B9E 58%, #16264D 100%);
  opacity: 0.34;
}
/* On an article page the body is bare text over a transparent container, so the
   wireframe runs directly behind the title and Overview and, in light mode at
   0.34, competes with the reading text. Fade it right back on article pages only
   (category/section pages, where content is carded, keep the fuller texture).
   Dark mode reads fine, so it is untouched. */
:root[data-theme="light"] main:has(.article-body) .inner-hero-bg__wire {
  opacity: 0.1;
}
:root[data-theme="light"] main:has(.article-body) .inner-hero-bg__glow {
  opacity: 0.45;
}
.inner-hero-bg__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(58% 52% at 50% 6%, var(--page-glow, rgba(60, 120, 255, 0.32)) 0%, rgba(10, 15, 24, 0) 60%);
}
/* Keep page content above the background layer. */
.sub-nav,
.category-container,
.section-container,
.article-container,
/* Static pages that opt into the background (Submit a Request, Requests) put
   their content straight in .container - lift the container itself, but only
   when it actually follows an .inner-hero-bg so no other page is affected. */
.inner-hero-bg ~ .container {
  position: relative;
  z-index: 1;
}
.hero-shape {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.hero-shape__img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  height: 260vh;
  min-height: 1300px;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  animation: sa-hero-spin 120s linear infinite;
}
@keyframes sa-hero-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
/* One-time "explode out" entrance: the whole wireframe starts as a small shape
   in the centre and scales up to full size on load, while the image inside keeps
   rotating (scale lives on this wrapper, rotation on the img, so the two
   transforms compose instead of overwriting each other). */
.hero-shape__burst {
  position: absolute;
  inset: 0;
  transform-origin: center center;
  animation: sa-hero-burst 2.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes sa-hero-burst {
  from { transform: scale(0.08); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-shape__burst { animation: none; }
}
/* Dark is the bare default; show the dark shape, hide the light one. The
   light theme swaps them. */
.hero-shape__img--light { display: none; }
:root[data-theme="light"] .hero-shape__img--dark { display: none; }
:root[data-theme="light"] .hero-shape__img--light { display: block; }
/* A soft central vignette so the headline and search read cleanly over
   the lines, tinted to each theme's own ground colour. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse 60% 70% at center, rgba(10, 15, 24, 0.42) 0%, rgba(10, 15, 24, 0.1) 62%, rgba(10, 15, 24, 0) 100%);
}
:root[data-theme="light"] .hero::before {
  background: radial-gradient(ellipse 60% 70% at center, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.2) 62%, rgba(255, 255, 255, 0) 100%);
}
/* Home hero background: secureauth.com-style animated grid, pinned to the bottom
   of the hero and faded out toward the top. <object> runs the SVG's animation.
   Dark grid by default; light-tinted grid in light mode. */
.hero-grid {
  transition: opacity .35s ease;
  position: absolute;
  left: 0; right: 0; bottom: 0;
  width: 100%;
  height: 66vh;
  border: 0;
  pointer-events: none;
  z-index: 0;
  display: block;
  -webkit-mask-image: linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,.28) 9%, rgba(0,0,0,.72) 17%, #000 26%, #000 100%);
          mask-image: linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,.28) 9%, rgba(0,0,0,.72) 17%, #000 26%, #000 100%);
}
.hero-grid--dark  { opacity: 1; }
.hero-grid--light { opacity: 0; }
:root[data-theme="light"] .hero-grid--dark  { opacity: 0; }
:root[data-theme="light"] .hero-grid--light { opacity: 1; }
.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 680px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.hero-search {
  position: relative;
  width: 100%;
}
.hero-eyebrow {
  margin: 0;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--t-link);
}
.hero-headline {
  margin: 0;
  font-family: 'Funnel Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-weight: 800;
  font-size: clamp(32px, 5.2vw, 58px);
  line-height: 1.03;
  letter-spacing: -0.02em;
  color: #FFFFFF;
}
:root[data-theme="light"] .hero-headline {
  color: var(--t-text);
}
.hero .search-full {
  width: 100%;
  margin-top: 4px;
}
@keyframes sa-fade-in-up {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero-eyebrow,
.hero-headline,
.hero .search-full {
  animation: sa-fade-in-up 0.6s ease both;
}
.hero-headline { animation-delay: 0.08s; }
.hero .search-full { animation-delay: 0.16s; }
@media (prefers-reduced-motion: reduce) {
  .hero-shape__img,
  .hero-eyebrow,
  .hero-headline,
  .hero .search-full {
    animation: none;
  }
}

.page-header {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 10px 0;
}
@media (min-width: 768px) {
  .page-header {
    align-items: baseline;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px;
    margin: 0 0 20px 0;
  }
}
.page-header .section-subscribe {
  flex-shrink: 0;
  margin-bottom: 10px;
}
@media (min-width: 768px) {
  .page-header .section-subscribe {
    margin-bottom: 0;
    /* h1 has flex-grow:1 with no flex-basis limit, so a long title
       claims the row and pushes Follow onto its own wrapped line -
       margin-left:auto pins it to the right edge of whichever line
       it ends up on, whether that's shared with the title or alone. */
    margin-left: auto;
  }
}
.page-header h1 {
  flex-grow: 1;
  margin-bottom: 10px;
}
.page-header-description {
  font-style: italic;
  margin: 0 0 30px 0;
  word-break: break-word;
}
@media (min-width: 1024px) {
  .page-header-description {
    flex-basis: 100%;
  }
}
.page-header .icon-lock {
  height: 20px;
  width: 20px;
  position: relative;
  left: -5px;
  vertical-align: baseline;
}

.sub-nav {
  align-items: baseline;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 15px 30px;
  justify-content: space-between;
  margin-bottom: 55px;
}
@media (min-width: 768px) {
  .sub-nav {
    flex-direction: row;
  }
}
.sub-nav .breadcrumbs {
  margin: 0;
}
.sub-nav .search-container {
  max-width: 300px;
  width: 100%;
}
@media (min-width: 768px) {
  .sub-nav .search-container {
    flex: 0 1 300px;
  }
}
.sub-nav input[type=search]::after {
  font-size: 15px;
}

/***** Blocks *****/
/* Used in Homepage#categories and Community#topics */
.blocks-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  list-style: none;
  padding: 0;
}
@media (min-width: 768px) {
  .blocks-list {
    margin: 0 -15px;
  }
}
.blocks-item {
  border: 1px solid var(--t-link);
  border-radius: 4px;
  box-sizing: border-box;
  color: var(--t-link);
  display: flex;
  flex: 1 0 340px;
  margin: 0 0 30px;
  max-width: 100%;
  text-align: center;
}
@media (min-width: 768px) {
  .blocks-item {
    margin: 0 15px 30px;
  }
}
.blocks-item:hover, .blocks-item:focus, .blocks-item:active {
  background-color: var(--t-elevated);
}
.blocks-item:hover *, .blocks-item:focus *, .blocks-item:active * {
  color: var(--t-brand-text);
  text-decoration: none;
}
.blocks-item-internal {
  background-color: transparent;
  border: 1px solid #ddd;
}
.blocks-item-internal .icon-lock {
  height: 15px;
  width: 15px;
  bottom: 5px;
  position: relative;
}
.blocks-item-internal a {
  color: var(--t-text);
}
.blocks-item-link {
  color: var(--t-link);
  padding: 20px 30px;
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: center;
  border-radius: inherit;
}
.blocks-item-link:visited, .blocks-item-link:hover, .blocks-item-link:active {
  color: inherit;
  text-decoration: none;
}
.blocks-item-link:focus {
  outline: 0;
  box-shadow: 0 0 0 3px var(--t-brand);
  text-decoration: none;
}
.blocks-item-title {
  margin-bottom: 0;
  font-size: 16px;
}
.blocks-item-description {
  margin: 0;
}
.blocks-item-description:not(:empty) {
  margin-top: 10px;
}

/* Homepage category pills - scoped to .categories.blocks (home_page.hbs
   only) so the category/section listings on category and section pages
   keep their existing card treatment. */
.categories.blocks .blocks-list {
  gap: 14px;
  justify-content: center;
  max-width: 620px;
  margin: 0 auto;
}
.categories.blocks .blocks-item {
  flex: 0 0 auto;
  border: none;
  border-radius: 999px;
  background: var(--t-pill-bg);
  color: var(--t-pill-text);
  margin: 0;
}
.categories.blocks .blocks-item:hover,
.categories.blocks .blocks-item:focus,
.categories.blocks .blocks-item:active {
  background-color: var(--t-pill-hover);
}
.categories.blocks .blocks-item:hover *,
.categories.blocks .blocks-item:focus *,
.categories.blocks .blocks-item:active * {
  color: var(--t-pill-text);
}
.categories.blocks .blocks-item-link {
  padding: 22px 32px;
  color: var(--t-pill-text);
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.categories.blocks .blocks-item-title {
  font-size: 18px;
  font-weight: 700;
  white-space: nowrap;
}
.categories.blocks .blocks-item-description {
  display: none;
}

/***** Homepage *****/
.section {
  margin-bottom: 40px;
}
@media (min-width: 768px) {
  .section {
    margin-bottom: 60px;
  }
}

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

/***** Promoted articles: featured card plus compact list *****/
.sa-promoted h2 {
  margin-bottom: 16px;
  text-align: center;
}
.sa-promoted__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  visibility: hidden;
  animation: sa-promoted-reveal 0s linear 1.5s forwards;
}
.sa-promoted__grid.is-ready {
  visibility: visible;
  animation: none;
}
@keyframes sa-promoted-reveal {
  to { visibility: visible; }
}
.sa-promoted__item {
  grid-column: 2;
  min-width: 0;
}
.sa-promoted__item.is-featured,
.sa-promoted__grid.is-single .sa-promoted__item {
  grid-column: 1;
}
.sa-promoted__grid.is-single {
  grid-template-columns: minmax(0, 1fr);
}
.sa-promoted__card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  padding: 12px 16px;
  border: 1px solid var(--t-surface-hover);
  border-radius: 12px;
  background: var(--t-surface-subtle-3);
  color: var(--t-link);
  text-decoration: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.sa-promoted__card:hover,
.sa-promoted__card:focus-visible {
  border-color: var(--t-link);
  background: var(--t-surface-subtle-5);
  color: var(--t-link-hover);
  text-decoration: none;
}
.sa-promoted__title {
  font-size: 15px;
  line-height: 1.45;
}
.sa-promoted__title .icon-lock {
  margin-left: 4px;
  vertical-align: baseline;
}
.sa-promoted__pill,
.sa-promoted__more {
  display: none;
}
.sa-promoted__item.is-featured .sa-promoted__card {
  justify-content: center;
  padding: 20px 24px;
  border-color: var(--t-link);
}
.sa-promoted__item.is-featured .sa-promoted__title {
  font-size: 19px;
  font-weight: 600;
}
.sa-promoted__item.is-featured .sa-promoted__pill {
  display: inline-block;
  align-self: flex-start;
  padding: 2px 10px;
  border-radius: 999px;
  background: #FFD34D;
  color: #3D2E00;
  font-weight: 600;
  font-size: 12px;
}
.sa-promoted__item.is-featured .sa-promoted__pill::before {
  content: "\2605";
  margin-right: 4px;
}
.sa-promoted__item.is-featured .sa-promoted__more {
  display: block;
  margin-top: 4px;
  color: var(--t-text-muted);
  font-size: 13px;
}
@media (max-width: 767px) {
  .sa-promoted__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .sa-promoted__item,
  .sa-promoted__item.is-featured {
    grid-column: 1;
    grid-row: auto !important;
  }
}

/***** Community section in homepage *****/
.community {
  text-align: center;
}
.community-image {
  min-height: 300px;
  margin-top: 32px;
  background-image: url(/hc/theming_assets/01JMZ2A8X5R9P02BHNMW34D4FS);
  background-position: center;
  background-repeat: no-repeat;
  max-width: 100%;
}
.community a {
  color: var(--t-link);
  text-decoration: underline;
}
.community a:visited {
  color: var(--t-link-visited);
}
.community a:hover, .community a:active, .community a:focus {
  color: var(--t-link-hover);
}

.community,
.activity {
  border-top: 1px solid var(--t-surface-hover);
  padding: 30px 0;
}

/***** Recent activity *****/
.recent-activity-header {
  margin-bottom: 10px;
  text-align: center;
}
.recent-activity-list {
  padding: 0;
}
.recent-activity-item {
  border-bottom: 1px solid #ddd;
  overflow: auto;
  padding: 20px 0;
}
.recent-activity-item h3 {
  margin: 0;
}
.recent-activity-item-parent {
  font-size: 16px;
  font-weight: 600;
}
.recent-activity-item-parent, .recent-activity-item-link {
  margin: 6px 0;
  display: inline-block;
  width: 100%;
}
@media (min-width: 768px) {
  .recent-activity-item-parent, .recent-activity-item-link {
    width: 70%;
    margin: 0;
  }
}
.recent-activity-item-link {
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.recent-activity-item-meta {
  color: var(--t-text);
  margin: 15px 0 0 0;
  float: none;
}
@media (min-width: 768px) {
  .recent-activity-item-meta {
    margin: 0;
    float: right;
  }
  [dir=rtl] .recent-activity-item-meta {
    float: left;
  }
}
.recent-activity-item-time, .recent-activity-item-comment {
  display: inline-block;
  font-size: 13px;
}
.recent-activity-item-comment {
  padding-left: 5px;
}
[dir=rtl] .recent-activity-item-comment {
  padding: 0 5px 0 0;
}
.recent-activity-item-comment::before {
  display: inline-block;
}
.recent-activity-controls {
  padding-top: 15px;
}
.recent-activity-controls a {
  color: var(--t-link);
  text-decoration: underline;
}
.recent-activity-controls a:visited {
  color: var(--t-link-visited);
}
.recent-activity-controls a:hover, .recent-activity-controls a:active, .recent-activity-controls a:focus {
  color: var(--t-link-hover);
}
.recent-activity-accessibility-label {
  border: 0;
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}
.recent-activity-comment-icon svg {
  vertical-align: middle;
  color: var(--t-link);
  width: 16px;
  height: 16px;
}
.recent-activity-comment-icon:after {
  content: attr(data-comment-count);
  margin-left: 3px;
}
[dir=rtl] .recent-activity-comment-icon:after {
  margin-left: 0;
  margin-right: 3px;
}

/***** Category pages *****/
.category-container {
  display: flex;
  justify-content: flex-end;
}
.category-content {
  flex: 1;
  max-width: 100%;
}
/* Stock Copenhagen reserves the left 20% for a category sidebar via
   flex:0 0 80% + justify-content:flex-end on the parent. This account
   doesn't currently render one, which left that 20% permanently empty
   and shifted the centered heading/pills off-center from the search box
   above. .sa-no-sidebar is added by a small script in category_page.hbs
   when .category-container has no sidebar sibling, so this only takes
   over in that case - if a sidebar is ever added back, the script stops
   adding the class and this reverts to the original 80%/flex-end stock
   behavior with no further CSS changes needed. (A plain :only-child
   selector was tried first but Zendesk's theme compiler silently strips
   that pseudo-class from the compiled CSS, so this uses a JS-toggled
   class instead, which survives compilation.) */
@media (min-width: 1024px) {
  .category-container.sa-no-sidebar .category-content {
    flex: 1 1 100%;
    max-width: 100%;
  }
}

.section-tree {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media (min-width: 768px) {
  .section-tree {
    flex-direction: row;
  }
}
.section-tree .section {
  flex: initial;
  max-width: 100%;
}
@media (min-width: 768px) {
  .section-tree .section {
    flex: 0 0 45%; /* Two columns for tablet and desktop. Leaving 5% separation between columns */
  }
}
.section-tree-title {
  margin-bottom: 0;
  font-size: 18px;
  font-weight: 600;
}
.section-tree-title a {
  color: var(--t-text);
}
.section-tree .see-all-articles {
  display: block;
  padding: 15px 0;
}

.article-list-item {
  font-size: 16px;
  padding: 15px 0;
  text-overflow: ellipsis;
  overflow: hidden;
}
.article-list-item a {
  color: var(--t-text);
}

.icon-star {
  color: var(--t-link);
  font-size: 18px;
}

/***** Section pages *****/
.section-container {
  display: flex;
  justify-content: flex-end;
}
.section-content {
  flex: 1;
  max-width: 100%;
}
@media (min-width: 1024px) {
  .section-content {
    flex: 0 0 80%;
  }
}
.section-list {
  margin: 40px 0;
}

.section-list-item {
  border-bottom: 1px solid #ddd;
  font-size: 16px;
  padding: 15px 0;
}
.section-list-item:first-child {
  border-top: 1px solid #ddd;
}
.section-list-item a {
  align-items: center;
  color: var(--t-text);
  display: flex;
  justify-content: space-between;
}

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

/***** Article *****/
.article {
  /*
  * The article grid is defined this way to optimize readability:
  * Sidebar | Content | Free space
  * 17%     | 66%     | 17%
  */
  flex: 1 0 auto;
}
@media (min-width: 1024px) {
  .article {
    flex: 1 0 66%;
    max-width: 66%;
    min-width: 640px;
    padding: 0 30px;
  }
}
.article-container {
  display: flex;
  flex-direction: column;
}
@media (min-width: 1024px) {
  .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: 40px;
  margin-top: 20px;
}
@media (min-width: 768px) {
  .article-header {
    flex-direction: row;
    margin-top: 0;
  }
}
.article-avatar {
  margin-right: 10px;
}
.article-author {
  margin-bottom: 10px;
}
.article-title {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
@media (min-width: 768px) {
  .article-title {
    flex-basis: 100%; /* Take entire row */
  }
}
.article-title .icon-lock {
  position: relative;
  left: -5px;
  vertical-align: baseline;
}
.article [role=button] {
  flex-shrink: 0; /*Avoid collapsing elements in Safari (https://github.com/philipwalton/flexbugs#1-minimum-content-sizing-of-flex-items-not-honored)*/
  width: 100%;
}
@media (min-width: 768px) {
  .article [role=button] {
    width: auto;
  }
}
.article-info {
  max-width: 100%;
}
.article-meta {
  display: inline-block;
  vertical-align: middle;
}
.article-body {
  display: flow-root;
}
.article-body a {
  color: var(--t-link);
  text-decoration: underline;
}
.article-body a:visited {
  color: var(--t-link-visited);
}
.article-body a:hover, .article-body a:active, .article-body a:focus {
  color: var(--t-link-hover);
}
/* The internal-article warning banner is baked into article bodies as a
   hardcoded inline style (pale cream background, no explicit text color)
   across the existing KB corpus, generated by a separate content-writing
   tool - it was never theme-aware. In dark mode the banner text falls back
   to the page's own light body-text color, landing on that same pale
   cream background: ~1.2:1 contrast, effectively invisible. Can't fix this
   by editing hundreds of existing (and future) articles' HTML from here,
   so instead this overrides it centrally via the inline style's own
   distinctive signature + !important - one rule fixes every article,
   existing and future, without touching KB content at all. Verified
   >=10:1 contrast for the text color in both modes; the red border is
   left as-is (a thin decorative line, not held to text-contrast rules,
   and reads fine against both backgrounds either way). Dark is the BARE
   default here (not :root[data-theme="dark"]) for the same reason as the
   search field fix above -- a first-time visitor never gets that literal
   attribute set, only the bare :root styling, so scoping to the explicit
   attribute left this broken on first page load until the theme was
   toggled. Same bug, caught and fixed the same way once found. */
p[style*="background-color:#fff3cd" i] {
  background-color: #E4BF44 !important;
  color: #1D1600 !important;
  border-color: #E4BF44 !important;
}
:root[data-theme="light"] p[style*="background-color:#fff3cd" i] {
  color: #4A3200 !important;
}
/* Same failure as the internal banner just above, a different article,
   a different inline color: a pale pink test-only warning box
   (background-color #f8d7da, red border #dc3545) sets no explicit text
   color at all, so it silently inherits whatever this theme's own body
   text color is. That is a light, readable color in light mode by
   coincidence, and an equally light color in dark mode by design, which
   lands unreadable on this pale pink fill. Confirmed live, reported by
   the user with a screenshot. Fixed the same way, centrally, via the
   inline style's own signature plus important, rather than editing the
   article itself. Unlike the amber banner above, this fill is a fixed
   inline color that never changes with the theme, so one dark red text
   color, checked for contrast, is correct in both modes; no separate
   light mode override is needed here. */
p[style*="#f8d7da" i] {
  color: #5c1a1a !important;
}
/* Article page and section page Follow/Unfollow buttons: pill shape.
   Scoped to just these two selectors from the shared rule they are
   grouped with, not the whole group, which also covers pagination links,
   community follow, org and user subscribe, and split buttons; widening
   further than these two was not asked for. Same specificity as the base
   rule's own clauses for these same selectors, so this wins purely on
   being later in the file; no important needed.
   Note for future edits: a comment here containing a double hyphen or an
   arrow sequence made the theme compiler silently drop this whole rule
   with no error, confirmed by testing with and without those characters.
   Keep comments near this rule plain punctuation only. */
.article-subscribe button,
.section-subscribe button {
  border-radius: 999px;
}
/* Zendesk's native AI agent answer panel (Answer Bot generative modal,
   shown after submitting a request) is a Garden styled components React
   widget, not part of this theme's own templates. Its own class names are
   auto generated build hashes that can change on any Zendesk deployment,
   so this targets the one stable, hand named id Zendesk gives the answer
   text and reaches its light background parent through it. Root cause:
   the surrounding modal's color correctly inherits this theme's dark text
   token since color is an inherited CSS property, but background color is
   never inherited, so this one card kept Zendesk's own hardcoded light
   fill in dark mode while showing light colored text on top of it. Light
   mode was never broken, since that same hardcoded light fill happens to
   already suit a light theme. */
div:has(> #ab-generative-modal-generated-answer-content) {
  background-color: var(--t-surface-subtle-3);
  color: var(--t-text);
}
/* Same AI agent modal, second spot: the "I found something that might
   help" pill above the main answer card has the identical hardcoded light
   fill bug, confirmed live (rgb(244, 246, 248) background under inherited
   light colored text). This element has no id and no useful class of its
   own, but Garden gives every one of its components a stable data garden
   id attribute, unlike the auto generated per build hash classes, so this
   targets any bare wrapper div that directly holds a Garden typography
   span, scoped to inside the answer bot modal only so it cannot reach a
   typography span anywhere else on the site. */
[data-garden-id="modals.modal"] div:has(> [data-garden-id="typography.font"]) {
  background-color: var(--t-surface-subtle-3);
  color: var(--t-text);
}
.article-body img {
  height: auto;
  max-width: 100%;
}
.article-body p > img.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.article-body p > img.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.article-body p > img.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.article-body p > img.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.article-body figure.image {
  display: table;
  margin: 0 auto;
}
.article-body figure.image > img {
  display: block;
  width: 100%;
}
.article-body figure.image.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.article-body figure.image.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.article-body figure.image.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.article-body figure.image.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.article-body figcaption {
  padding: 10px 0;
  font-size: 12px;
  text-align: center;
  background-color: var(--t-surface-subtle-5);
}
.article-body ul,
.article-body ol {
  padding-left: 20px;
  list-style-position: outside;
  margin: 20px 0 20px 20px;
}
[dir=rtl] .article-body ul,
[dir=rtl] .article-body ol {
  padding-right: 20px;
  padding-left: 0;
  margin-left: 0;
  margin-right: 20px;
}
.article-body ul > ul,
.article-body ol > ol,
.article-body ol > ul,
.article-body ul > ol,
.article-body li > ul,
.article-body li > ol {
  margin: 0;
}
.article-body ul {
  list-style-type: disc;
}
.article-body :not(pre) > code {
  background: var(--t-surface-subtle-3);
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}
.article-body pre {
  background: var(--t-surface-subtle-3);
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
  direction: ltr;
}
.article-body blockquote {
  border-left: 1px solid #ddd;
  color: var(--t-text-muted);
  font-style: italic;
  padding: 0 15px;
}
.article-body > p:last-child {
  margin-bottom: 0;
}
.article-content {
  line-height: 1.6;
  margin: 40px 0;
  word-wrap: break-word;
}
.article-footer {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
}
.article-comment-count {
  color: var(--t-text-muted);
}
.article-comment-count:hover {
  text-decoration: none;
}
.article-comment-count-icon {
  vertical-align: middle;
  color: var(--t-link);
  width: 18px;
  height: 18px;
}
.article-sidebar {
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
  flex: 1 0 auto;
  margin-bottom: 20px;
  padding: 0;
}
@media (min-width: 1024px) {
  .article-sidebar {
    border: 0;
    flex: 0 0 17%;
    height: auto;
    max-width: 17%;
  }
}
.article-relatives {
  border-top: 1px solid #ddd;
  display: flex;
  flex-direction: column;
  padding: 20px 0;
}
@media (min-width: 768px) {
  .article-relatives {
    flex-direction: row;
  }
}
.article-relatives > * {
  flex: 1 0 50%;
  min-width: 50%;
  overflow-wrap: break-word;
  margin-right: 0;
}
.article-relatives > *:last-child {
  padding: 0;
}
@media (min-width: 768px) {
  .article-relatives > * {
    padding-right: 20px;
  }
}
.article-votes {
  border-top: 1px solid #ddd;
  padding: 30px 0;
  text-align: center;
}
.article-votes-question {
  font-size: 15px;
  font-weight: normal;
  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(--t-link);
  text-decoration: underline;
}
.article-more-questions a:visited {
  color: var(--t-link-visited);
}
.article-more-questions a:hover, .article-more-questions a:active, .article-more-questions a:focus {
  color: var(--t-link-hover);
}
.article-return-to-top {
  border-top: 1px solid #848F99;
}
@media (min-width: 1024px) {
  .article-return-to-top {
    display: none;
  }
}
.article-return-to-top a {
  color: var(--t-text);
  display: block;
  padding: 20px 0;
}
.article-return-to-top a:hover, .article-return-to-top a:focus {
  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;
  position: relative;
  font-weight: 600;
}
.sidenav-item {
  display: block;
  margin-top: 10px;
  margin-bottom: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

/***** Attachments *****/
/* Styles attachments inside posts, articles and comments */
.attachments .attachment-item {
  padding-left: 20px;
  position: relative;
  margin-bottom: 10px;
}
.attachments .attachment-item:last-child {
  margin-bottom: 0;
}
.attachments .attachment-item .attachment-icon {
  color: var(--t-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;
}

.upload-dropzone span {
  color: var(--t-text-muted);
}

/***** Social share links *****/
.share {
  padding: 0;
  white-space: nowrap;
}

.share li, .share a {
  display: inline-block;
}

.share li {
  height: 25px;
  width: 25px;
}

.share a {
  color: var(--t-text-muted);
}
.share a:hover {
  text-decoration: none;
  color: var(--t-link);
}
.share a svg {
  height: 18px;
  width: 18px;
  display: block;
}

/***** Comments *****/
/* Styles comments inside articles, posts and requests */
.comment {
  border-bottom: 1px solid #ddd;
  padding: 20px 0;
}
.comment-heading, .recent-articles-title,
.related-articles-title {
  margin-bottom: 5px;
  margin-top: 0;
  font-size: 18px;
  font-weight: 600;
}
.comment-overview {
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
  padding: 20px 0;
}
.comment-overview p {
  margin-top: 0;
}
.comment-callout {
  color: var(--t-text-muted);
  display: inline-block;
  font-size: 13px;
  margin-bottom: 0;
}
.comment-callout a {
  color: var(--t-link);
  text-decoration: underline;
}
.comment-callout a:visited {
  color: var(--t-link-visited);
}
.comment-callout a:hover, .comment-callout a:active, .comment-callout a:focus {
  color: var(--t-link-hover);
}
.comment-sorter {
  display: inline-block;
  float: right;
}
.comment-sorter .dropdown-toggle {
  color: var(--t-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(--t-link);
  padding: 40px 20px 20px;
}
@media (min-width: 768px) {
  .comment-wrapper.comment-official {
    padding-top: 20px;
  }
}
.comment-info {
  min-width: 0;
  padding-right: 20px;
  width: 100%;
}
[dir=rtl] .comment-info {
  padding-right: 0;
  padding-left: 20px;
}
.comment-author {
  align-items: flex-end;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
@media (min-width: 768px) {
  .comment-author {
    justify-content: space-between;
  }
}
.comment-avatar {
  margin-right: 10px;
}
[dir=rtl] .comment-avatar {
  margin-left: 10px;
  margin-right: 0;
}
.comment-meta {
  flex: 1 1 auto;
}
.comment-labels {
  flex-basis: 100%;
}
@media (min-width: 768px) {
  .comment-labels {
    flex-basis: auto;
  }
}
.comment .status-label:not(.status-label-official) {
  margin-top: 10px;
}
@media (min-width: 768px) {
  .comment .status-label:not(.status-label-official) {
    margin-top: 0;
  }
}
.comment-form {
  display: flex;
  padding-top: 30px;
  word-wrap: break-word;
}
.comment-container {
  width: 100%;
}
.comment-form-controls {
  display: none;
  margin-top: 10px;
  text-align: left;
}
@media (min-width: 768px) {
  [dir=ltr] .comment-form-controls {
    text-align: right;
  }
}
.comment-form-controls input[type=submit] {
  margin-top: 15px;
}
@media (min-width: 1024px) {
  .comment-form-controls input[type=submit] {
    margin-left: 15px;
  }
  [dir=rtl] .comment-form-controls input[type=submit] {
    margin-left: 0;
    margin-right: 15px;
  }
}
.comment-form-controls input[type=checkbox] {
  margin-right: 5px;
}
.comment-form-controls input[type=checkbox] [dir=rtl] {
  margin-left: 5px;
}
.comment-ccs {
  display: none;
}
.comment-ccs + textarea {
  margin-top: 10px;
}
.comment-attachments {
  margin-top: 10px;
}
.comment-attachments a {
  color: var(--t-link);
}
.comment-body {
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  word-wrap: break-word;
  display: flow-root;
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  line-height: 1.6;
  overflow-x: auto;
}
.comment-body a {
  color: var(--t-link);
  text-decoration: underline;
}
.comment-body a:visited {
  color: var(--t-link-visited);
}
.comment-body a:hover, .comment-body a:active, .comment-body a:focus {
  color: var(--t-link-hover);
}
.comment-body img {
  height: auto;
  max-width: 100%;
}
.comment-body p > img.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.comment-body p > img.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.comment-body p > img.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.comment-body p > img.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.comment-body figure.image {
  display: table;
  margin: 0 auto;
}
.comment-body figure.image > img {
  display: block;
  width: 100%;
}
.comment-body figure.image.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.comment-body figure.image.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.comment-body figure.image.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.comment-body figure.image.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.comment-body figcaption {
  padding: 10px 0;
  font-size: 12px;
  text-align: center;
  background-color: var(--t-surface-subtle-5);
}
.comment-body ul,
.comment-body ol {
  padding-left: 20px;
  list-style-position: outside;
  margin: 20px 0 20px 20px;
}
[dir=rtl] .comment-body ul,
[dir=rtl] .comment-body ol {
  padding-right: 20px;
  padding-left: 0;
  margin-left: 0;
  margin-right: 20px;
}
.comment-body ul > ul,
.comment-body ol > ol,
.comment-body ol > ul,
.comment-body ul > ol,
.comment-body li > ul,
.comment-body li > ol {
  margin: 0;
}
.comment-body ul {
  list-style-type: disc;
}
.comment-body :not(pre) > code {
  background: var(--t-surface-subtle-3);
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}
.comment-body pre {
  background: var(--t-surface-subtle-3);
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
  direction: ltr;
}
.comment-body blockquote {
  border-left: 1px solid #ddd;
  color: var(--t-text-muted);
  font-style: italic;
  padding: 0 15px;
}
.comment-mark-as-solved {
  display: inline-block;
}

/***** Vote *****/
/* Used in article comments, post comments and post */
.vote {
  display: flex;
  flex-direction: column;
  text-align: center;
}
.vote a:active, .vote a:hover, .vote a:focus {
  text-decoration: none;
}

.vote-sum {
  color: var(--t-text-muted);
  display: block;
  margin: 3px 0;
}
[dir=rtl] .vote-sum {
  direction: ltr;
  unicode-bidi: bidi-override;
}

.vote-up svg {
  transform: scale(1, -1);
}

.vote-up:hover,
.vote-down:hover {
  color: var(--t-link);
}

.vote-up, .vote-down {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent;
  border: none;
  color: var(--t-text-muted);
  cursor: pointer;
  min-height: 35px;
  min-width: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vote-voted {
  color: var(--t-link);
}

.vote-voted:hover {
  color: var(--t-link-darken);
}

/***** Actions *****/
/* Styles admin and en user actions(edit, delete, change status) in comments and posts */
.actions {
  text-align: center;
  flex-shrink: 0; /*Avoid collapsing elements in Safari*/
}
.actions button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent;
  border: none;
  cursor: pointer;
  min-height: 35px;
  min-width: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/***** Community *****/
.community-hero {
  background-image: url(/hc/theming_assets/01JMZ2A8BM8FQN58B7HHP5RV5Z);
  margin-bottom: 10px;
}
.community-footer {
  padding-top: 50px;
  text-align: center;
}
.community-footer-title {
  font-size: 16px;
  margin-bottom: 20px;
}
.community-featured-posts .title {
  font-size: 18px;
  font-weight: 600;
}
.community-featured-posts, .community-activity {
  padding-top: 40px;
  width: 100%;
}
.community-header {
  margin-bottom: 30px;
}
.community-header .title {
  margin-bottom: 0;
  font-size: 16px;
}

.post-to-community {
  margin-top: 10px;
}
@media (min-width: 768px) {
  .post-to-community {
    margin: 0;
  }
}

/* Community topics grid */
.topics {
  max-width: none;
  width: 100%;
}
.topics-item .meta-group {
  justify-content: center;
  margin-top: 20px;
}

/* Community topic page */
.topic-header {
  border-bottom: 1px solid #ddd;
  font-size: 13px;
}
@media (min-width: 768px) {
  .topic-header {
    padding-bottom: 10px;
  }
}
.topic-header .dropdown {
  display: block;
  border-top: 1px solid #ddd;
  padding: 10px 0;
}
@media (min-width: 768px) {
  .topic-header .dropdown {
    border-top: 0;
    display: inline-block;
    margin-right: 20px;
    padding: 0;
  }
}

.no-posts-with-filter {
  margin-top: 20px;
  margin-bottom: 20px;
}

/* Topic, post and user follow button */
.community-follow {
  margin-bottom: 10px;
  width: 100%;
}
@media (min-width: 768px) {
  .community-follow {
    margin-bottom: 0;
    width: auto;
  }
}
.community-follow button {
  line-height: 30px;
  padding: 0 10px 0 15px;
  position: relative;
  width: 100%;
}
@media (min-width: 768px) {
  .community-follow button {
    width: auto;
  }
}
.community-follow button:hover {
  background-color: var(--t-elevated);
}
.community-follow button:hover::after, .community-follow button:focus::after {
  border-color: var(--t-brand-text);
  color: var(--t-brand-text);
}
.community-follow button[data-selected=true] {
  background-color: var(--t-elevated);
  color: var(--t-brand-text);
}
.community-follow button[data-selected=true]::after {
  border-left: 1px solid var(--t-brand-text);
  color: var(--t-brand-text);
}
.community-follow button[data-selected=true]:hover {
  background-color: var(--t-elevated-hover);
  border-color: var(--t-elevated-hover);
}
.community-follow button::after {
  border-left: 1px solid var(--t-link);
  content: attr(data-follower-count);
  color: var(--t-link);
  display: inline-block;
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  margin-left: 15px;
  padding-left: 10px;
  position: absolute;
  right: 10px;
}
@media (min-width: 768px) {
  .community-follow button::after {
    position: static;
  }
}
[dir=rtl] .community-follow button::after {
  border-left: 0;
  border-right: 1px solid var(--t-link);
  margin: 0 10px 0 0;
  padding: 0 10px 0 0;
}

/***** Striped list *****/
/* Used in community posts list and requests list */
.striped-list {
  padding: 0;
}
.striped-list-item {
  align-items: flex-start;
  border-bottom: 1px solid #ddd;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px 0;
}
@media (min-width: 768px) {
  .striped-list-item {
    align-items: center;
    flex-direction: row;
  }
}
.striped-list-info {
  flex: 2;
}
.striped-list-title {
  color: var(--t-link);
  margin-bottom: 10px;
  margin-right: 5px;
}
.striped-list-title:hover, .striped-list-title:focus, .striped-list-title:active {
  text-decoration: underline;
}
.striped-list-title:visited {
  color: var(--t-link-visited);
}
.striped-list .meta-group {
  margin: 5px 0;
}
.striped-list-count {
  color: var(--t-text-muted);
  font-size: 13px;
  justify-content: flex-start;
  text-transform: capitalize;
}
@media (min-width: 768px) {
  .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: 768px) {
  .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: 768px) {
  .striped-list-number {
    color: var(--t-text);
    display: block;
  }
}

/***** Status labels *****/
/* Styles labels used in posts, articles and requests */
.status-label {
  background-color: #038153;
  border-radius: 4px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  margin-right: 2px;
  padding: 3px 10px;
  vertical-align: middle;
  white-space: nowrap;
  display: inline-block;
}
.status-label:hover, .status-label:active, .status-label:focus {
  text-decoration: none;
}
.status-label-pinned, .status-label-featured, .status-label-official {
  background-color: var(--t-elevated);
}
.status-label-official {
  border-radius: 0;
  margin-right: 0;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
  width: 100%;
}
@media (min-width: 768px) {
  .status-label-official {
    border-radius: 0 0 4px 4px;
    right: 30px;
    width: auto;
  }
}
[dir=rtl] .status-label-official {
  left: 30px;
  right: auto;
}
.status-label-not-planned, .status-label-closed {
  background-color: #e9ebed;
  color: var(--t-text-muted);
}
.status-label-pending, .status-label-pending-moderation {
  background-color: #1f73b7;
  text-align: center;
}
.status-label-open {
  background-color: #c72a1c;
}
.status-label-solved {
  background-color: #68737d;
}
.status-label-new {
  background-color: #ffb648;
  color: #703b15;
}
.status-label-hold {
  background-color: #000;
}
.status-label-request {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 768px) {
  .status-label-request {
    max-width: 150px;
  }
}

/***** Post *****/
/*
* The post grid is defined this way:
* Content | Sidebar
* 70%     | 30%
*/
.post {
  flex: 1;
  margin-bottom: 10px;
}
@media (min-width: 1024px) {
  .post {
    flex: 1 0 70%;
    max-width: 70%;
  }
}
.post-container {
  display: flex;
  flex-direction: column;
}
@media (min-width: 1024px) {
  .post-container {
    flex-direction: row;
  }
}
.post-header {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 10px;
}
@media (min-width: 768px) {
  .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: 768px) {
  .post-title {
    margin-bottom: 0;
    padding-right: 10px;
  }
}
.post-title h1 {
  display: inline;
  vertical-align: middle;
}
@media (min-width: 768px) {
  .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: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  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-right: 0;
  padding-left: 20px;
}
.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 {
  color: var(--t-link);
  text-decoration: underline;
}
.post-body a:visited {
  color: var(--t-link-visited);
}
.post-body a:hover, .post-body a:active, .post-body a:focus {
  color: var(--t-link-hover);
}
.post-body img {
  height: auto;
  max-width: 100%;
}
.post-body p > img.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.post-body p > img.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.post-body p > img.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.post-body p > img.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.post-body figure.image {
  display: table;
  margin: 0 auto;
}
.post-body figure.image > img {
  display: block;
  width: 100%;
}
.post-body figure.image.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.post-body figure.image.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.post-body figure.image.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.post-body figure.image.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.post-body figcaption {
  padding: 10px 0;
  font-size: 12px;
  text-align: center;
  background-color: var(--t-surface-subtle-5);
}
.post-body ul,
.post-body ol {
  padding-left: 20px;
  list-style-position: outside;
  margin: 20px 0 20px 20px;
}
[dir=rtl] .post-body ul,
[dir=rtl] .post-body ol {
  padding-right: 20px;
  padding-left: 0;
  margin-left: 0;
  margin-right: 20px;
}
.post-body ul > ul,
.post-body ol > ol,
.post-body ol > ul,
.post-body ul > ol,
.post-body li > ul,
.post-body li > ol {
  margin: 0;
}
.post-body ul {
  list-style-type: disc;
}
.post-body :not(pre) > code {
  background: var(--t-surface-subtle-3);
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}
.post-body pre {
  background: var(--t-surface-subtle-3);
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
  direction: ltr;
}
.post-body blockquote {
  border-left: 1px solid #ddd;
  color: var(--t-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(--t-text-muted);
}
.post-comment-count:hover {
  text-decoration: none;
}
.post-comment-count .icon-comments {
  color: var(--t-link);
  display: inline-block;
  width: 18px;
  height: 18px;
  margin: 5px;
  vertical-align: middle;
}
.post-sidebar {
  border-top: 1px solid #ddd;
  flex: 1;
  padding: 30px 0;
  text-align: center;
}
@media (min-width: 1024px) {
  .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-sidebar-title {
  font-size: 18px;
  font-weight: 600;
}
.post-comments {
  margin-bottom: 20px;
}
@media (min-width: 1024px) {
  .post-comments {
    margin-bottom: 0;
  }
}

/***** Community Badges *****/
/* Styles labels used next to the authors of article comments, community posts, and community comments */
.community-badge-title {
  background-color: #04444d;
  border-radius: 4px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 0px 8px;
  vertical-align: top;
  white-space: nowrap;
  display: inline-block;
  line-height: 18px;
  vertical-align: middle;
}

.community-badge-titles {
  display: inline;
}

.community-badge-achievement {
  display: block;
  height: 16px;
  white-space: nowrap;
  width: 16px;
}
.community-badge-achievement img {
  width: 100%;
  height: 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 {
  padding: 2px 8px;
  line-height: 20px;
}
.profile-info .community-badge-achievement {
  height: 40px;
  width: 40px;
}
.profile-info .community-badge-achievements-rest {
  line-height: 40px;
  font-size: 20px;
}

/* Navigation element that collapses on mobile */
.collapsible-nav {
  flex-direction: column;
  font-size: 14px;
  position: relative;
}
@media (min-width: 768px) {
  .collapsible-nav {
    flex-direction: row;
  }
}

.collapsible-nav-border {
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
}
@media (min-width: 768px) {
  .collapsible-nav-border {
    border-top: 0;
  }
}

.collapsible-nav-toggle {
  top: 22.5px;
  transform: translateY(-50%);
  position: absolute;
  right: 0;
  padding: 0;
  border: 0;
  background: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
}
@media (min-width: 768px) {
  .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 {
  display: inline-block;
}
.collapsible-nav-toggle[aria-expanded=true] .x-icon {
  display: inline-block;
}
.collapsible-nav-toggle:focus {
  outline: none;
  border: 1px solid var(--t-link);
}

.collapsible-nav-list {
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  .collapsible-nav-list {
    flex-direction: row;
  }
}
.collapsible-nav-list li {
  color: var(--t-text);
  line-height: 45px;
  order: 1;
}
@media (min-width: 768px) {
  .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 {
    text-decoration: none;
    padding: 15px 0;
  }
}
.collapsible-nav-list li a {
  color: var(--t-text);
  display: block;
}
@media (min-width: 768px) {
  .collapsible-nav-list li:hover {
    border-bottom: 4px solid #ddd;
  }
  .collapsible-nav-list li:hover a:not([aria-current=page]) {
    padding: 15px 0 11px 0;
    text-decoration: none;
  }
}
.collapsible-nav-list li:not([aria-selected=true]),
.collapsible-nav-list li:not(.current) {
  display: none;
}
@media (min-width: 768px) {
  .collapsible-nav-list li:not([aria-selected=true]),
  .collapsible-nav-list li:not(.current) {
    display: block;
  }
}
@media (min-width: 768px) {
  .collapsible-nav-list li[aria-selected=true] {
    padding: 15px 0 11px 0;
  }
}
.collapsible-nav-list li[aria-selected=true],
.collapsible-nav-list li.current {
  order: 0;
  position: relative;
}
@media (min-width: 768px) {
  .collapsible-nav-list li[aria-selected=true],
  .collapsible-nav-list li.current {
    border-bottom: 4px solid var(--t-link);
    order: 1;
  }
}
.collapsible-nav-list li[aria-selected=true] a,
.collapsible-nav-list li.current a {
  color: var(--t-text);
}

.collapsible-nav[aria-expanded=true] li:not([aria-selected=true]),
.collapsible-nav[aria-expanded=true] li:not(.current) {
  display: block;
}

/* Sidebar navigation that collapses on mobile */
.collapsible-sidebar {
  flex: 1;
  max-height: 45px;
  overflow: hidden;
  padding: 10px 0;
  position: relative;
}
@media (min-width: 1024px) {
  .collapsible-sidebar {
    max-height: none;
    padding: 0;
  }
}
.collapsible-sidebar-title {
  margin-top: 0;
}
.collapsible-sidebar-toggle {
  position: absolute;
  top: 22.5px;
  transform: translateY(-50%);
  right: 0;
  padding: 0;
  border: 0;
  background: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
}
@media (min-width: 1024px) {
  .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 {
  display: inline-block;
}
.collapsible-sidebar-toggle[aria-expanded=true] .x-icon {
  display: inline-block;
}
.collapsible-sidebar-toggle:focus {
  outline: none;
  border: 1px solid var(--t-link);
}
.collapsible-sidebar-body {
  display: none;
}
@media (min-width: 1024px) {
  .collapsible-sidebar-body {
    display: block;
  }
}
.collapsible-sidebar[aria-expanded=true] {
  max-height: none;
}
.collapsible-sidebar[aria-expanded=true] .collapsible-sidebar-body {
  display: block;
}

/***** My activities *****/
.my-activities-nav {
  background-color: var(--t-surface-subtle-5);
  margin-bottom: 20px;
}
.my-activities-sub-nav {
  margin-bottom: 30px;
}
.my-activities-table .striped-list-title { /* My activities tables */
  display: block;
  margin-bottom: 10px;
  max-width: 350px;
  white-space: normal;
}
@media (min-width: 1024px) {
  .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: 768px) {
  .my-activities-table thead {
    display: table-header-group;
  }
}
.my-activities-table th:first-child,
.my-activities-table td:first-child {
  padding-left: 0;
}
@media (min-width: 1024px) {
  .my-activities-table th:first-child,
  .my-activities-table td:first-child {
    width: 500px;
  }
}
.my-activities-table th:last-child,
.my-activities-table td:last-child {
  padding-right: 0;
}
.my-activities-table td:not(:first-child) {
  display: none;
}
@media (min-width: 768px) {
  .my-activities-table td:not(:first-child) {
    display: table-cell;
  }
}

/* Requests table */
.requests-search {
  width: 100%;
}
.requests-table-toolbar {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  .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: 768px) {
  .requests-table-toolbar .request-table-filter {
    width: auto;
  }
}
.requests-table-toolbar .request-filter {
  display: block;
}
@media (min-width: 768px) {
  .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: 768px) {
  .requests-table-toolbar .request-filter-label {
    margin-top: 0;
  }
}
.requests-table-toolbar select {
  max-height: 40px;
  margin-bottom: 30px;
  width: 100%;
}
@media (min-width: 768px) {
  .requests-table-toolbar select {
    margin-bottom: 0;
    max-width: 300px;
    width: auto;
  }
}
@media (min-width: 768px) {
  .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: 768px) {
  .requests .requests-table-meta {
    display: none;
  }
}
.requests .requests-table thead {
  display: none;
}
@media (min-width: 768px) {
  .requests .requests-table thead {
    display: table-header-group;
  }
}
.requests .requests-table-info {
  display: block;
}
@media (min-width: 768px) {
  .requests .requests-table-info {
    display: table-cell;
    vertical-align: middle;
    width: auto;
  }
}
.requests .requests-table .requests-link {
  position: relative;
}
.requests .requests-table .requests-sort-symbol {
  position: absolute;
  left: calc(100% + 3px);
  bottom: 0;
  font-size: 10px;
}

/* Following table */
@media (min-width: 768px) {
  .subscriptions-subscribe button {
    width: auto;
  }
}
.subscriptions-table td:last-child {
  display: block;
}
@media (min-width: 768px) {
  .subscriptions-table td:last-child {
    display: table-cell;
  }
}
.subscriptions-table td:first-child {
  display: flex;
  align-items: center;
}
.subscriptions-table .user-avatar {
  margin-right: 10px;
}
.subscriptions .striped-list-title {
  display: inline-block;
  vertical-align: middle;
}

/* Contributions table */
.contributions-table td:last-child {
  color: var(--t-text-muted);
  font-size: 13px;
}
@media (min-width: 768px) {
  .contributions-table td:last-child {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
  }
}

.no-activities {
  color: var(--t-text-muted);
}

/***** Request *****/
.request-container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media (min-width: 1024px) {
  .request-container {
    align-items: flex-start;
    flex-direction: row;
  }
}
.request-container .comment-container {
  min-width: 0;
}
.request-breadcrumbs {
  margin-top: 30px;
  margin-bottom: 40px;
}
@media (min-width: 1024px) {
  .request-breadcrumbs {
    margin-top: 36px;
    margin-bottom: 60px;
  }
}
.request-main {
  flex: 1 0 auto;
  max-width: 100%;
  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: 1024px) {
  .request-main {
    flex: 0 0 66%;
    order: 0;
    min-width: 0;
  }
}
.request-main .comment-form-controls {
  display: block;
}
.request-main .comment-ccs {
  display: block;
}
.request-main .comment-show-container {
  border-radius: 2px;
  border: 1px solid #ddd;
  color: var(--t-text-muted);
  text-align: inherit;
  padding: 8px 25px;
  width: 100%;
}
.request-main .comment-show-container.hidden {
  display: none;
}
.request-main .form-field.comment-ccs > ul {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: 0;
}
.request-main .form-field.comment-ccs > ul[data-hc-focus=true] {
  border: 1px solid var(--t-brand);
}
.request-main .form-field.comment-ccs > input[type=text] {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: 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(--t-brand);
}
.request-main input#mark_as_solved {
  display: none;
}
.request-title {
  width: 100%;
}
@media (min-width: 1024px) {
  .request-title {
    border-bottom: 1px solid #ddd;
    margin-bottom: 0;
    max-width: 66%;
    padding-bottom: 20px;
  }
}
.request-sidebar {
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
  flex: 1 0 auto;
  order: 0;
}
@media (min-width: 1024px) {
  .request-sidebar {
    background-color: var(--t-surface-subtle-3);
    border: 0;
    font-size: 13px;
    flex: 0 0 auto;
    padding: 0 20px;
    width: 30%;
  }
}
.request-sidebar h2 {
  font-size: 15px;
  font-weight: 600;
  position: relative;
}
@media (min-width: 1024px) {
  .request-sidebar h2 {
    display: none;
  }
}
.request-details {
  border-bottom: 1px solid #ddd;
  font-size: 0;
  margin: 0;
  padding-bottom: 20px;
}
.request-details:last-child {
  border: 0;
}
.request-details dt, .request-details dd {
  display: inline-block;
  vertical-align: top;
  font-size: 13px;
  margin: 20px 0 0 0;
}
.request-details dd {
  padding: 0 10px;
  width: 60%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.request-details dd::after {
  content: "\a";
  white-space: pre;
}
.request-details dt {
  line-break: strict;
  color: var(--t-text-muted);
  width: 40%;
  overflow-wrap: break-word;
}
.request-details .request-collaborators {
  display: inline-block;
}
.request-attachments dt, .request-attachments dd {
  width: 100%;
}
.request-attachments dd {
  margin: 10px 0 0 0;
}
.request-form textarea {
  min-height: 120px;
}
.request-follow-up {
  padding-top: 20px;
}

/***** Pagination *****/
.pagination {
  margin: 20px 0;
  text-align: center;
}
.pagination-next, .pagination-prev, .pagination-first, .pagination-last {
  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);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}
.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;
}

/***** Metadata *****/
.meta-group {
  display: block;
}

.meta-group-opposite {
  float: right;
}

[dir=rtl] .meta-group-opposite {
  float: left;
}

.meta-group * {
  display: inline;
}

.meta-data {
  color: var(--t-text-muted);
  font-size: 13px;
}
.meta-data:not(:last-child)::after {
  content: "·";
  margin: 0 5px;
}

/* User Profiles */
.profile-header {
  padding: 30px 0;
  background-color: var(--t-surface-subtle-3);
}

.profile-header .container {
  display: flex;
  flex-wrap: wrap;
}
@media (min-width: 768px) {
  .profile-header .container {
    flex-wrap: nowrap;
  }
}

.profile-header .profile-info {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  min-width: 0;
}

.profile-avatar {
  position: relative;
  line-height: 0;
  align-self: center;
  margin-right: 10px;
}
[dir=rtl] .profile-avatar {
  margin-left: 10px;
  margin-right: 0;
}

.profile-avatar .user-avatar {
  width: 80px;
  height: 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-direction: column;
  justify-content: center;
  flex-grow: 1;
  flex-basis: 0;
  min-width: 0;
}
.profile-header .basic-info .name {
  margin: 0;
  line-height: 25px;
  vertical-align: middle;
  display: inline;
}

.profile-header .options {
  display: flex;
  flex-basis: 100%;
  margin-top: 12px;
  align-items: flex-start;
  flex-wrap: wrap;
}
@media (min-width: 768px) {
  .profile-header .options {
    flex-wrap: nowrap;
    flex-basis: auto;
    margin-top: 0;
    margin-left: 10px;
  }
  [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 {
  width: 100%;
  margin-bottom: 15px;
}

.profile-header .description {
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  word-wrap: break-word;
  margin: 15px 0;
  flex-basis: 100%;
}

.profile-stats {
  font-size: 13px;
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
}

.profile-stats .stat {
  display: flex;
  margin-bottom: 10px;
}

.profile-stats .stat-label {
  color: var(--t-text-muted);
  flex: 0 0 100px;
  margin-right: 10px;
}
[dir=rtl] .profile-stats .stat-label {
  margin-left: 10px;
  margin-right: 0;
}

.profile-stats-activity {
  border-top: solid 1px #ddd;
  margin-top: 15px;
}
@media (min-width: 768px) {
  .profile-stats-activity {
    border-top: 0;
    flex-direction: row;
  }
}

@media (min-width: 768px) {
  .profile-stats-activity .stat {
    flex-direction: column;
  }
}

.profile-stats-activity .stat:first-child {
  margin-top: 10px;
}
@media (min-width: 768px) {
  .profile-stats-activity .stat:first-child {
    margin-top: 0;
  }
}

@media (min-width: 768px) {
  .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;
  }
}

@media (min-width: 768px) {
  .profile-stats-activity .stat-label {
    flex: 0 1 auto;
  }
}

.profile-stats-counters {
  border-bottom: solid 1px #ddd;
}
@media (min-width: 768px) {
  .profile-stats-counters {
    flex: 0 0 200px;
    border-bottom: 0;
    margin-left: 40px;
  }
  [dir=rtl] .profile-stats-counters {
    margin-left: 0;
    margin-right: 40px;
  }
}
@media (min-width: 1024px) {
  .profile-stats-counters {
    flex: 0 0 270px;
    margin-left: 60px;
  }
  [dir=rtl] .profile-stats-counters {
    margin-right: 60px;
    margin-left: 0;
  }
}

@media (min-width: 768px) {
  .profile-stats-counters .stat {
    flex-direction: column;
  }
}
@media (min-width: 1024px) {
  .profile-stats-counters .stat {
    flex-direction: row;
  }
}

@media (min-width: 768px) {
  .profile-stats-counters .stat:not(:last-child) {
    margin-bottom: 15px;
  }
}

@media (min-width: 768px) {
  .profile-stats-counters .stat-label {
    flex: 0 1 auto;
  }
}
@media (min-width: 1024px) {
  .profile-stats-counters .stat-label {
    flex: 0 0 100px;
  }
}

.profile-private-badge {
  flex-basis: 100%;
  border: solid 1px var(--t-link);
  border-radius: 4px;
  color: var(--t-link);
  padding: 5px 20px;
  font-size: 12px;
  text-align: center;
}
.profile-private-badge .profile-private-icon {
  margin-left: 5px;
  line-height: 15px;
}
@media (min-width: 768px) {
  .profile-private-badge {
    flex-basis: auto;
  }
}

.profile-nav {
  background-color: var(--t-surface-subtle-5);
  margin-bottom: 37px;
}

.profile-section {
  width: 100%;
}
@media (min-width: 1024px) {
  .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 {
  flex-basis: 100%;
  padding: 10px 0;
  color: var(--t-text-muted);
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (min-width: 768px) {
  .profile-section-description {
    flex: 1 0 50%;
    padding-bottom: 0;
  }
}

.profile-section-sorter {
  flex-basis: 100%;
  border-top: solid 1px #eee;
  font-size: 13px;
}
.profile-section-sorter .dropdown-toggle {
  padding: 10px 0;
  width: 100%;
}
.profile-section-sorter .dropdown-toggle::after {
  position: absolute;
  right: 0;
}
[dir=rtl] .profile-section-sorter .dropdown-toggle::after {
  left: 0;
  right: initial;
}
@media (min-width: 768px) {
  .profile-section-sorter .dropdown-toggle::after {
    position: relative;
  }
}
@media (min-width: 768px) {
  .profile-section-sorter {
    flex: 0 1 auto;
    padding-top: 0;
    border-top: 0;
    margin-left: 20px;
  }
  [dir=rtl] .profile-section-sorter {
    margin-left: 0;
    margin-right: 20px;
  }
}

.profile-badges-items {
  margin-top: 25px;
}
.profile-badges-item {
  border-top: 1px solid #ddd;
  display: flex;
  flex: 1;
  flex-direction: row;
  justify-content: flex-start;
  padding: 27px 12px;
}
.profile-badges-item > div {
  padding-right: 12px;
  padding-left: 12px;
}
.profile-badges-item-image {
  height: 40px;
  width: 40px;
  margin-right: 12px;
}
.profile-badges-item-image img {
  max-height: 40px;
}
[dir=rtl] .profile-badges-item-image {
  margin-left: 12px;
  margin-right: 0;
}
.profile-badges-item-title, .profile-badges-item-metadata-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(--t-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 {
  margin: 0 0 5px 0;
  display: inline;
  line-height: 21px;
  font-size: 15px;
  vertical-align: middle;
}

.profile-contribution-body {
  margin: 10px 0;
}

.profile-contribution-list > .profile-contribution {
  border-top: 1px solid #eee;
}
@media (min-width: 768px) {
  .profile-contribution-list > .profile-contribution {
    padding-left: 30px;
  }
  [dir=rtl] .profile-contribution-list > .profile-contribution {
    padding-right: 30px;
    padding-left: 0;
  }
}

.profile-contribution-list > .profile-contribution:last-child {
  border-bottom: 1px solid #eee;
}

.profile-contribution-icon {
  left: 0;
  position: absolute;
  color: #ccc;
  line-height: 25px;
}
[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-right: 30px;
  padding-left: 0;
}
@media (min-width: 768px) {
  .profile-contribution-list .profile-contribution-header {
    margin-left: 0;
  }
  [dir=rtl] .profile-contribution-list .profile-contribution-header {
    padding-right: 0;
  }
}

.profile-comments .profile-contribution-breadcrumbs {
  margin-left: 30px;
}
[dir=rtl] .profile-comments .profile-contribution-breadcrumbs {
  padding-right: 30px;
  padding-left: 0;
}
@media (min-width: 768px) {
  .profile-comments .profile-contribution-breadcrumbs {
    margin-left: 0;
  }
  [dir=rtl] .profile-comments .profile-contribution-breadcrumbs {
    padding-right: 0;
  }
}

.profile-section .no-activity,
.profile-section .private-activity {
  display: block;
  margin-top: 40px;
  color: #999;
}

.private-activity-icon {
  margin-right: 10px;
}
[dir=rtl] .private-activity-icon {
  margin-right: 0;
  margin-left: 10px;
}

.profile-activity-list {
  margin-top: 25px;
}

.profile-activity {
  position: relative;
  padding-bottom: 30px;
}
@media (min-width: 768px) {
  .profile-activity {
    padding-left: 20px;
  }
  [dir=rtl] .profile-activity {
    padding-right: 20px;
    padding-left: 0;
  }
}

@media (min-width: 768px) {
  .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 {
  display: flex;
  align-items: center;
  margin-left: 35px;
}
[dir=rtl] .profile-activity-header {
  margin-left: 0;
  margin-right: 35px;
}
@media (min-width: 768px) {
  .profile-activity-header {
    margin-left: 0;
  }
  [dir=rtl] .profile-activity-header {
    margin-right: 0;
  }
}

.profile-activity-header .user-avatar {
  width: 40px;
  height: 40px;
  margin-right: 10px;
  min-width: 40px;
  align-self: flex-start;
}
[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 {
  font-weight: 600;
  display: inline;
}

.profile-activity-contribution {
  padding: 20px;
  margin-top: 10px;
  border-radius: 8px;
  background-color: var(--t-surface-subtle-3);
}
@media (min-width: 768px) {
  .profile-activity-contribution {
    margin-top: 0;
    margin-left: 50px;
  }
  [dir=rtl] .profile-activity-contribution {
    margin-left: 0;
    margin-right: 50px;
  }
}

.profile-activity-icon {
  position: absolute;
  left: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-size: 14px 14px;
  background-repeat: no-repeat;
  background-color: var(--t-bg);
  background-position: 50% 50%;
  text-align: center;
  color: #ccc;
}
[dir=rtl] .profile-activity-icon {
  right: 0;
}
@media (min-width: 768px) {
  .profile-activity-icon {
    left: -14px;
  }
  [dir=rtl] .profile-activity-icon {
    right: -14px;
  }
}

.profile-activity-icon svg {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  width: 1em;
  height: 1em;
  margin: auto;
}

/***** Search results *****/
.search-results {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media (min-width: 1024px) {
  .search-results {
    flex-direction: row;
  }
}
.search-results-column {
  flex: 1;
}
@media (min-width: 1024px) {
  .search-results-column {
    flex: 0 0 75%;
  }
}
.search-results-sidebar {
  border-top: 1px solid #ddd;
  flex: 1 0 auto;
  margin-bottom: 20px;
  padding: 0;
}
@media (min-width: 1024px) {
  .search-results-sidebar {
    border: 0;
    flex: 0 0 20%;
    height: auto;
  }
}
.search-results-sidebar .sidenav-item {
  border-radius: 4px;
  padding: 10px 36px;
  margin-bottom: 4px;
  color: var(--t-text);
}
.search-results-sidebar .sidenav-item:hover, .search-results-sidebar .sidenav-item.current {
  background-color: #e9ebed;
  text-decoration: none;
}
/* The hover/current background above is a fixed light gray (#e9ebed),
   fine against light mode's dark text, but the text itself stays on
   var(--t-text) - light-colored in dark mode - leaving it almost
   invisible on that same light chip. Give dark mode a dark, readable
   label color here; explicitly keep light mode on its original
   var(--t-text) so it's untouched. */
.search-results-sidebar .sidenav-item:hover,
.search-results-sidebar .sidenav-item.current {
  color: #132A34;
}
:root[data-theme="light"] .search-results-sidebar .sidenav-item:hover,
:root[data-theme="light"] .search-results-sidebar .sidenav-item.current {
  color: var(--t-text);
}
.search-results-sidebar .sidenav-subitem {
  unicode-bidi: embed;
}
.search-results-sidebar .sidenav-tag {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  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 {
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  line-height: 24px;
  text-align: center;
  letter-spacing: -0.000427656px;
  color: #49545C;
  flex-grow: 0;
  vertical-align: middle;
  display: inline-block;
}
.search-results-sidebar .sidenav-tag .content-tag .close-icon {
  color: #555555;
  vertical-align: middle;
  display: inline-block;
}
.search-results-sidebar .collapsible-sidebar {
  margin-bottom: 30px;
}
.search-results-sidebar .collapsible-sidebar[aria-expanded=false] .multibrand-filter-list {
  display: none;
}
@media (min-width: 1024px) {
  .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):not(.see-all-filters-item) {
  display: none;
}
.search-results-sidebar .multibrand-filter-list .doc-count {
  color: #666;
}
.search-results-sidebar .see-all-filters {
  background: none;
  border: none;
  cursor: pointer;
  display: block;
  padding: 10px;
  color: var(--t-link);
}
.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: bold;
}
.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 #ddd;
}
.search-results .no-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 4rem;
}
.search-results .no-results .headline {
  color: #2F3941;
  font-weight: 400;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: -0.45px;
}
.search-results .no-results .action-prompt {
  color: #68737D;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.154px;
}
.search-results .no-results .action-prompt a {
  color: var(--t-link);
}
.search-results .no-results .action-prompt a:visited {
  color: var(--t-link);
}

.search-result-title-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.search-result-title {
  font-size: 16px;
  margin-bottom: 0;
}
.search-result-votes, .search-result-meta-count {
  color: var(--t-text-muted);
  font-size: 13px;
}
.search-result-votes-icon, .search-result-meta-count-icon {
  color: var(--t-link);
  vertical-align: middle;
  width: 13px;
  height: 13px;
}
[dir=ltr] .search-result-votes, [dir=ltr] .search-result-meta-count {
  margin-left: 20px;
}
[dir=rtl] .search-result-votes, [dir=rtl] .search-result-meta-count {
  margin-right: 20px;
}
.search-result-meta-container {
  color: #666;
  display: flex;
  flex-direction: column;
}
@media (min-width: 1024px) {
  .search-result-meta-container {
    flex-direction: row;
    align-items: center;
  }
}
@media (min-width: 1024px) {
  .search-result-meta-container nav {
    flex: 1;
  }
}
@media (min-width: 1024px) {
  [dir=ltr] .search-result-meta-container .meta-data {
    margin-left: 20px;
  }
}
@media (min-width: 1024px) {
  [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-top: 10px;
  margin-bottom: 0;
  word-break: break-word;
}

/* By default use bold instead of italic to highlight */
.search-results-description em {
  font-style: normal;
  font-weight: bold;
}

/* Add a yellow background for Chinese */
html[lang|=zh] .search-results-description em {
  font-style: normal;
  background: yellow;
}

/***** Notifications *****/
.notification {
  border: 1px solid;
  display: table;
  font-family: sans-serif;
  font-size: 12px;
  padding: 13px 15px;
  transition: height 0.2s;
  width: 100%;
  color: #555;
}

.notification a {
  color: #158ec2;
}

.notification-inner {
  margin: 0 auto;
  padding: 0 20px;
  max-width: 980px;
}

.notification-icon, .notification-inline.notification-error::before, .notification-text, .notification-dismiss {
  display: table-cell;
  vertical-align: middle;
}

.notification-text {
  padding: 0 15px;
  width: 100%;
}

.notification + .notification {
  margin-bottom: -1px;
  position: relative;
  top: -1px;
}

/* Error */
.notification-error {
  background: #ffeded;
  border-color: #f7cbcb;
}

.notification-error .notification-icon::before, .notification-error .notification-inline.notification-error::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' focusable='false' viewBox='0 0 12 12'%3E%3Cg fill='none' stroke='%23555555'%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='%23555555'/%3E%3C/svg%3E");
}

/* Notice */
.notification-notice {
  background: #dbf3ff;
  border-color: #b5e0f5;
}

.notification-notice .notification-icon::before, .notification-notice .notification-inline.notification-error::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' focusable='false' viewBox='0 0 12 12'%3E%3Cg fill='none' stroke='%23555555'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3.5 6l2 2L9 4.5'/%3E%3Ccircle cx='6' cy='6' r='5.5'/%3E%3C/g%3E%3C/svg%3E");
}

/* Alert / Lock */
.notification-alert {
  color: #ad5e18;
  background: #fff8ed;
  border-color: #fcdba9;
}

.notification-alert .notification-icon::before, .notification-alert .notification-inline.notification-error::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' focusable='false' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23ad5e18' stroke-linecap='round' d='M5.06 1.27l-4.5 8.5c-.18.33.06.73.44.73h9c.38 0 .62-.4.44-.73l-4.5-8.5a.494.494 0 00-.88 0zM5.5 4v2'/%3E%3Ccircle cx='5.5' cy='8' r='.8' fill='%23ad5e18'/%3E%3C/svg%3E");
}

.notification-icon::before, .notification-inline.notification-error::before {
  background-size: cover;
  content: "";
  display: inline-block;
  height: 14px;
  width: 14px;
  vertical-align: middle;
}

/* Dismiss button */
.notification-dismiss, a.notification-dismiss {
  color: #555;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 100ms ease;
  text-decoration: none !important;
}

.notification-dismiss:hover {
  opacity: 1;
}

/* Inline notifications */
.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,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' focusable='false' 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;
}
.notification-inline.notification-large {
  padding: 13px 15px;
  margin-bottom: 25px;
}

.notification-left-aligned {
  text-align: left;
  padding-left: 0;
}

html[dir=rtl] .notification-left-aligned {
  text-align: right;
  padding-left: auto;
  padding-right: 0;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-toggle {
  cursor: pointer;
  background: none;
  border: 0;
  display: inline-block;
  padding: 0;
  text-align: initial;
  vertical-align: middle;
}
.dropdown-toggle:hover {
  text-decoration: none;
}
.dropdown-toggle > * {
  display: inline-block;
}
.dropdown-toggle[aria-expanded=true] + .dropdown-menu {
  display: block;
}

.dropdown-menu {
  background: #fff;
  border: 1px solid #d8dcde;
  border-radius: 3px;
  box-shadow: 0px 20px 30px 0px rgba(23, 73, 77, 0.15);
  display: none;
  font-size: 14px;
  font-style: normal;
  font-weight: normal;
  left: 0;
  margin-top: 1px;
  min-width: 170px;
  padding: 10px 0;
  position: absolute;
  text-align: left;
  z-index: 1000;
}
[dir=rtl] .dropdown-menu {
  text-align: right;
}
.dropdown-menu [role=separator] {
  border-bottom: 1px solid #e9ebed;
  margin: 4px 0;
}
.dropdown-menu [role=menuitem],
.dropdown-menu [role=menuitemradio] {
  color: #2f3941;
  cursor: pointer;
  display: block;
  padding: 7px 40px 7px 20px;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
  -webkit-appearance: none;
  text-align: start;
  line-height: inherit;
  width: 100%;
}
[dir=rtl] .dropdown-menu [role=menuitem],
[dir=rtl] .dropdown-menu [role=menuitemradio] {
  padding: 7px 20px 7px 40px;
}
.dropdown-menu [role=menuitem]:hover, .dropdown-menu [role=menuitem]:focus,
.dropdown-menu [role=menuitemradio]:hover,
.dropdown-menu [role=menuitemradio]:focus {
  background: rgba(31, 115, 183, 0.08);
  text-decoration: none;
  color: #2f3941;
}
.dropdown-menu [role=menuitem][aria-selected=true], .dropdown-menu [role=menuitem][aria-checked=true],
.dropdown-menu [role=menuitemradio][aria-selected=true],
.dropdown-menu [role=menuitemradio][aria-checked=true] {
  cursor: default;
}
.dropdown-menu [role=menuitem][aria-selected=true]::after, .dropdown-menu [role=menuitem][aria-checked=true]::after,
.dropdown-menu [role=menuitemradio][aria-selected=true]::after,
.dropdown-menu [role=menuitemradio][aria-checked=true]::after {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M1 7l3 3 7-7'%3E%3C/path%3E%3C/svg%3E");
  display: inline-block;
  height: 12px;
  margin-left: 10px;
  width: 12px;
}
[dir=rtl] .dropdown-menu [role=menuitem][aria-selected=true]::after, [dir=rtl] .dropdown-menu [role=menuitem][aria-checked=true]::after,
[dir=rtl] .dropdown-menu [role=menuitemradio][aria-selected=true]::after,
[dir=rtl] .dropdown-menu [role=menuitemradio][aria-checked=true]::after {
  margin-left: 0;
  margin-right: 10px;
  float: left;
}
.dropdown-menu [role=menuitem][hidden], .dropdown-menu [role=menuitem][aria-hidden=true],
.dropdown-menu [role=menuitemradio][hidden],
.dropdown-menu [role=menuitemradio][aria-hidden=true] {
  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;
}

/* Theme aware dropdown menu. The stock menu is a hardcoded white box with
   dark text, which is unreadable as a floating panel in dark mode. Retint
   it to the theme's own elevated surface and text tokens so the Knowledge
   Base menu (and the signed in user menu) read correctly in both modes.
   Placed after the base rules so it wins on source order at equal
   specificity, no important needed. */
.dropdown-menu {
  background-color: rgba(18, 24, 31, 0.14);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.7);
}
:root[data-theme="light"] .dropdown-menu {
  background-color: var(--t-surface-subtle-3);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-color: rgba(20, 30, 38, 0.12);
  box-shadow: 0 18px 40px -18px rgba(23, 73, 77, 0.28);
}
.dropdown-menu [role=menuitem],
.dropdown-menu [role=menuitemradio],
.dropdown-menu a {
  color: var(--t-text);
}
.dropdown-menu [role=menuitem]:hover,
.dropdown-menu [role=menuitem]:focus,
.dropdown-menu [role=menuitemradio]:hover,
.dropdown-menu [role=menuitemradio]:focus,
.dropdown-menu a:hover,
.dropdown-menu a:focus {
  background-color: var(--t-surface-hover);
  color: var(--t-surface-hover-fg);
}
.dropdown-menu [role=separator] {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}
:root[data-theme="light"] .dropdown-menu [role=separator] {
  border-bottom-color: rgba(20, 30, 38, 0.1);
}
/* Knowledge Base mega menu: a wide panel with a section label and a grid
   of category cards (icon, title, description), modelled on secureauth.com's
   Platform menu. The categories and their descriptions are pulled live and
   the cards are built by initKbNav in sa-brand.js. */
.kb-mega {
  width: 620px;
  max-width: calc(100vw - 40px);
  padding: 12px;
  border-radius: 16px;
  /* Drop the panel so its top lines up with the BOTTOM OF THE NAV PILL (the
     visible navbar), not the toggle - measured live: at margin-top:15px the
     menu top sits at the pill's bottom edge, a clean attach with no floaty gap
     and no overlap. Overrides stock .dropdown-menu's 1px. */
  margin-top: 15px;
}
/* These menus open on HOVER, so the gap between the toggle and the panel would
   let the menu close as the cursor crosses it. This invisible bridge fills
   that gap (it's a child of the menu, so it shares the toggle's hover region)
   and keeps the menu open while moving from the label down onto it. */
.kb-mega::before {
  content: "";
  position: absolute;
  top: -16px;
  left: 0;
  right: 0;
  height: 16px;
}
.kb-mega-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--t-text-muted);
  padding: 8px 12px 10px;
}
.kb-mega-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
}
/* Scoped to .kb-mega (0,2,0) so these beat stock's
   .dropdown-menu [role=menuitem] (0,1,1), which the cards match via their
   role="menuitem" and which otherwise forces display:block + its own padding
   (that regression is what stacked the icon over the title). */
.kb-mega .kb-card {
  display: flex;
  flex-direction: row;
  /* Title-only cards (the usual case - categories rarely carry a description)
     read best with the icon and label vertically centred, matching the
     Documentation menu. Two-line cards top-align instead, see the :has() rule
     below. */
  align-items: center;
  gap: 13px;
  padding: 12px;
  border-radius: 12px;
  text-decoration: none;
  color: var(--t-text);
}
/* When a KB card actually has a description (two lines of body), align the icon
   to the top of the text block instead of centring on the whole thing. */
.kb-mega .kb-card:has(.kb-card-desc) {
  align-items: flex-start;
}
.kb-mega .kb-card:hover,
.kb-mega .kb-card:focus {
  background-color: var(--t-surface-hover);
  text-decoration: none;
}
.kb-card-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background-color: var(--t-surface-hover);
  color: var(--t-link);
}
.kb-card:hover .kb-card-icon,
.kb-card:focus .kb-card-icon {
  background-color: var(--t-elevated);
  color: var(--t-brand-text);
}
/* Dark mode: the shared rule above does nothing useful here - the resting icon is
   already the light cyan --t-link (#75E3FF) and --t-elevated == the resting box bg,
   so hover looked identical. Do the OPPOSITE of light mode instead: fill the icon
   box LIGHT BLUE with a dark glyph (the theme's pill tokens) - a clear light-blue
   hover that mirrors light mode's dark fill. */
:root:not([data-theme="light"]) .kb-card:hover .kb-card-icon,
:root:not([data-theme="light"]) .kb-card:focus .kb-card-icon {
  background-color: var(--t-pill-bg);
  color: var(--t-pill-text);
}
.kb-card-icon svg {
  width: 20px;
  height: 20px;
}
/* Admin-uploaded Documentation link icons (a custom_block_2 file setting)
   render as an <img>; keep them the same footprint as the default SVGs. */
.kb-card-icon img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}
.kb-card-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.kb-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--t-text);
}
.kb-card-desc {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--t-text-muted);
}
/* Documentation menu cards carry only a title (no description), so centre
   the title against the icon instead of top aligning it. */
.docs-mega .kb-card {
  align-items: center;
}

/* Instant search results panel. Zendesk renders instant search as a set of
   zd-autocomplete web components whose panel carries a hardcoded white
   background from Zendesk's own cross origin stylesheet, which glares as a
   bright box in dark mode. Retint the panel and every result part to the
   same tokens as the Knowledge Base dropdown so the two floating menus read
   as one design. That white lives in a stylesheet this theme cannot
   reorder, so the surface colours are forced. */
zd-autocomplete[role="listbox"] {
  background-color: var(--t-surface-subtle-3) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 16px !important;
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.7) !important;
  padding: 8px !important;
  color: var(--t-text);
}
:root[data-theme="light"] zd-autocomplete[role="listbox"] {
  border-color: rgba(20, 30, 38, 0.12) !important;
  box-shadow: 0 18px 40px -18px rgba(23, 73, 77, 0.28) !important;
}
zd-autocomplete[role="listbox"]::-webkit-scrollbar {
  width: 10px;
}
zd-autocomplete[role="listbox"]::-webkit-scrollbar-track {
  background: transparent;
}
zd-autocomplete[role="listbox"]::-webkit-scrollbar-thumb {
  background: var(--t-surface-hover);
  border-radius: 8px;
  border: 2px solid var(--t-surface-subtle-3);
}
/* Each suggested result row. Transparent by default so the panel shows
   through, with the same hover surface as a Knowledge Base card. */
zd-autocomplete-multibrand[role="option"] {
  border-radius: 12px !important;
  color: var(--t-text-muted) !important;
}
zd-autocomplete-multibrand[role="option"]:hover,
zd-autocomplete-multibrand[role="option"][aria-selected="true"] {
  background-color: var(--t-surface-hover) !important;
}
/* Result title. The matched term is an em inside it, lifted to the link
   colour so the match stands out the way it does on secureauth.com. */
zd-autocomplete-title-multibrand {
  color: var(--t-text) !important;
}
zd-autocomplete-title-multibrand em {
  color: var(--t-link) !important;
  font-style: normal;
}
/* Breadcrumb path shown under each result title. */
zd-autocomplete-breadcrumbs-multibrand {
  color: var(--t-text-muted) !important;
}
zd-autocomplete a {
  color: var(--t-link) !important;
}

.content-tags > p {
  color: #68737D;
  margin-top: 32px;
  margin-bottom: 4px;
}
.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 {
  padding-right: 8px;
  margin-right: 8px;
}
[dir=rtl] .content-tag-list li {
  padding-left: 8px;
  margin-left: 8px;
}
.content-tag-list li:last-child {
  border: none;
}

/***** WYSIWYG Editor *****/
#hc-wysiwyg {
  border: 1px solid #848F99;
}

/***** Upload Dropzone *****/
.upload-dropzone {
  border: 1px solid #848F99;
}

/***** Summary component *****/
zd-summary-block {
  background: #f3f6f6;
}
[dir=ltr] zd-summary-block {
  border-left-color: #859fa1;
}
[dir=rtl] zd-summary-block {
  border-right-color: #859fa1;
}

.service-catalog-hero {
  background-image: url(/hc/theming_assets/01KPTVCGYREW7SJKVZM2VQXWVQ);
  margin-bottom: 10px;
  height: 320px;
}
.service-catalog-description {
  display: flow-root;
}
.service-catalog-description a {
  color: var(--t-link);
  text-decoration: underline;
}
.service-catalog-description a:visited {
  color: var(--t-link-visited);
}
.service-catalog-description a:hover, .service-catalog-description a:active, .service-catalog-description a:focus {
  color: var(--t-link-hover);
}
.service-catalog-description img {
  height: auto;
  max-width: 100%;
}
.service-catalog-description p > img.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.service-catalog-description p > img.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.service-catalog-description p > img.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.service-catalog-description p > img.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.service-catalog-description figure.image {
  display: table;
  margin: 0 auto;
}
.service-catalog-description figure.image > img {
  display: block;
  width: 100%;
}
.service-catalog-description figure.image.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.service-catalog-description figure.image.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.service-catalog-description figure.image.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.service-catalog-description figure.image.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.service-catalog-description figcaption {
  padding: 10px 0;
  font-size: 12px;
  text-align: center;
  background-color: var(--t-surface-subtle-5);
}
.service-catalog-description ul,
.service-catalog-description ol {
  padding-left: 20px;
  list-style-position: outside;
  margin: 20px 0 20px 20px;
}
[dir=rtl] .service-catalog-description ul,
[dir=rtl] .service-catalog-description ol {
  padding-right: 20px;
  padding-left: 0;
  margin-left: 0;
  margin-right: 20px;
}
.service-catalog-description ul > ul,
.service-catalog-description ol > ol,
.service-catalog-description ol > ul,
.service-catalog-description ul > ol,
.service-catalog-description li > ul,
.service-catalog-description li > ol {
  margin: 0;
}
.service-catalog-description ul {
  list-style-type: disc;
}
.service-catalog-description :not(pre) > code {
  background: var(--t-surface-subtle-3);
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}
.service-catalog-description pre {
  background: var(--t-surface-subtle-3);
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
  direction: ltr;
}
.service-catalog-description blockquote {
  border-left: 1px solid #ddd;
  color: var(--t-text-muted);
  font-style: italic;
  padding: 0 15px;
}
.service-catalog-main-content {
  display: flex;
  gap: 32px;
}
.service-catalog-list {
  width: 100%;
}
.service-catalog-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 20px;
}

.is-service-catalog-preview #navbar-container,
.is-service-catalog-preview .navbar-container,
.is-service-catalog-preview .assembly-bar,
.is-service-catalog-preview [data-garden-id="chrome.subnav"] {
  display: none !important;
}
/* ============================================================
   SecureAuth brand layer
   Appended to stock Copenhagen. Colours/fonts come from the
   manifest settings (var(--t-brand), 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, ...) so this
   file only adds what Copenhagen has no equivalent for.
   ============================================================ */

/* ---- Header status indicator (Statuspage.io) ---- */
.status-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 20px;
  font-size: 14px;
  color: var(--t-text);
  text-decoration: none;
  white-space: nowrap;
}
.status-link:hover { text-decoration: underline; }
.status-link[hidden] { display: none; }

.status-indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #9a9a9a;
  flex: 0 0 auto;
}
.status-indicator--none     { background: #2ecc71; }
.status-indicator--minor    { background: #f1c40f; }
.status-indicator--major    { background: #e67e22; }
.status-indicator--critical { background: #e74c3c; }

@media (max-width: 767px) {
  .status-link .status-description { display: none; }
}

/* ---- Site-wide alert banners ----
   Layout, colours and severity icons all come from assets/notification.css.
   Only the bits it has no rule for live here. */
.notifications { margin: 0; }
.notifications .alert[hidden] { display: none; }
.alert__body { display: flex; align-items: center; padding: 12px 16px; }
.alert__body > *:first-child { margin-top: 0; }
.alert__body > *:last-child { margin-bottom: 0; }
.alert__icon--close { background-color: transparent; cursor: pointer; opacity: .8; }
.alert__icon--close:hover { opacity: 1; }

/* ---- Footer ---- */
.sa-footer {
  background: #1d2b33;
  color: #a6b5ba;
  padding: 32px 0;
}
.sa-footer a { color: #a6b5ba; }
.sa-footer a:hover { color: #fff; }

.sa-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.sa-footer__brand { display: flex; flex-direction: column; gap: 8px; }
.sa-footer__logo img { max-height: 40px; width: auto; }
/* Footer uses the same swirl + wordmark logo as the nav. The footer band is
   always dark navy regardless of page theme, so this logo is always white. */
.sa-footer__logo .sa-logo { display: inline-flex; align-items: center; gap: 10px; color: #FFFFFF; }
.sa-footer__logo .sa-logo-mark { width: 34px; height: 34px; flex-shrink: 0; }
.sa-footer__logo .sa-logo-word { font-size: 25px; }
.sa-footer__copyright { margin: 0; font-size: 13px; }

.sa-footer__social { display: flex; align-items: center; gap: 16px; }
.sa-footer__social a { color: #e1e1e6; display: inline-flex; }
.sa-footer__social a:hover { color: #fff; }

.sa-footer__links { display: flex; gap: 20px; font-size: 13px; }
/* Footer support phone (tap-to-call) */
.sa-footer__contact { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--t-text-muted); }
.sa-footer__contact svg { color: var(--t-link); flex: none; }
.sa-footer__contact a { color: var(--t-link); font-weight: 700; text-decoration: none; }
.sa-footer__contact a:hover { color: var(--t-link-hover); text-decoration: underline; }

@media (max-width: 767px) {
  .sa-footer__inner { flex-direction: column; align-items: flex-start; }
}

/* ---- Homepage tiles (ported from the v1 custom blocks) ---- */
.sa-tiles { padding-top: 8px; }
.sa-tiles__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}
.sa-tiles__item { display: flex; }
.sa-tiles__link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  padding: 24px;
  border: 1px solid #e9ebed;
  border-radius: 6px;
  background: var(--t-bg);
  text-decoration: none;
  color: var(--t-text);
  transition: box-shadow .15s ease, border-color .15s ease;
}
.sa-tiles__link:hover,
.sa-tiles__link:focus-visible {
  border-color: var(--t-link);
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
  text-decoration: none;
}
.sa-tiles__icon { width: 40px; height: 40px; }
.sa-tiles__title { font-weight: 600; font-size: 16px; color: var(--t-link); }
.sa-tiles__text  { font-size: 14px; line-height: 1.5; }

/* ---- Home page: announcements + tiles ordering ---- */
.sa-home-blocks {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.sa-home-blocks .sa-announcements { order: 2; }
.sa-home-blocks--announcements-first .sa-announcements { order: 0; }
.sa-announcements[hidden] { display: none; }

.sa-announcements__heading {
  margin: 0 0 16px;
  color: var(--t-text);
  text-align: center;
}
.sa-announcements__list {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sa-announcement {
  position: relative;
  grid-column: 2;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 16px;
  border: 1px solid var(--t-surface-hover);
  border-radius: 12px;
  background: var(--t-surface-subtle-3);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.sa-announcement:hover {
  border-color: var(--t-link);
  background: var(--t-surface-subtle-5);
}
.sa-announcement:first-child {
  grid-column: 1;
  justify-content: center;
  padding: 20px 24px;
  border-color: var(--t-link);
}
.sa-announcement:first-child:nth-last-child(3) { grid-row: span 2; }
.sa-announcement:first-child:nth-last-child(4) { grid-row: span 3; }
.sa-announcement:first-child:nth-last-child(5) { grid-row: span 4; }
.sa-announcement:only-child { grid-column: 1 / -1; }
.sa-announcement:first-child::before {
  content: "Latest";
  align-self: flex-start;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--t-pill-bg);
  color: var(--t-pill-text);
  font-size: 12px;
  font-weight: 600;
}
.sa-announcement.sa-announcement--alert_info    { border-color: #5bc0de; }
.sa-announcement.sa-announcement--alert_success { border-color: #2ecc71; }
.sa-announcement.sa-announcement--alert_warning { border-color: #f0ad4e; }
.sa-announcement.sa-announcement--alert_danger  { border-color: #e74c3c; }

.sa-announcement__title {
  display: block;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.45;
  color: var(--t-link);
  text-decoration: none;
}
.sa-announcement__title::after {
  content: "";
  position: absolute;
  inset: 0;
}
.sa-announcement__title:hover { text-decoration: none; }
.sa-announcement:first-child .sa-announcement__title { font-size: 19px; }
.sa-announcement__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--t-text);
}
.sa-announcement:not(:first-child) .sa-announcement__text { display: none; }
.sa-announcement__meta {
  display: block;
  font-size: 12px;
  color: var(--t-text-muted);
}
@media (max-width: 767px) {
  .sa-announcements__list { grid-template-columns: minmax(0, 1fr); }
  .sa-announcement,
  .sa-announcement:first-child {
    grid-column: 1;
    grid-row: auto !important;
  }
}

/* ---- Alert banner: headline + link ---- */
.alert__link {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
  color: inherit;
  text-decoration: none;
}
.alert__link:hover .alert__headline { text-decoration: underline; }
.alert__headline { font-weight: 600; }
.alert__more {
  font-size: .875em;
  opacity: .85;
  white-space: nowrap;
}
.alert__more::after { content: ' \2192'; }

/* Alert banner severity colors, reasserted here regardless of theme.
   Zendesk's own bundled notification.css ships all four severities with
   background-color plus color: #fff, but three of the four backgrounds
   are too light for white text or the white icon to actually read
   against, confirmed by computing real WCAG contrast, not by eye:
   info 2.57 to 1, success 2.11 to 1, danger 2.44 to 1, all well under
   the 4.5 to 1 minimum for normal text. Warning (pale yellow plus dark
   grey text) already passed at 9.14 to 1 in its original stock shade,
   #F8D88B, but read as a dull mustard rather than a clean yellow; the
   value below is a brighter gold picked from a set of contrast checked
   options and confirmed by the user, still comfortably over 9 to 1
   against the same dark grey text.
   The icon for each severity is a hardcoded white or dark SVG baked into
   notification.css as a data URI, not something a color rule here can
   repaint, so text color alone cannot fix info, success or danger; the
   fix here instead deepens each background just enough that the
   existing white text and white icon both read correctly, while leaving
   the family of colors recognizable as the same info, success and
   danger hues. This block is the one place that owns every severity
   going forward.
   Selectors are qualified with the real wrapper class, notifications,
   purely to outrank notification.css's own bare severity class rules on
   specificity, since that stylesheet loads after this one; no important
   needed anywhere in this block. Same in both themes, since these are
   semantic status colors, not part of the light or dark surface
   system. */
.notifications .alert--alert_info {
  background-color: #0d5f9e;
}
.notifications .alert--alert_success {
  background-color: #0a6a50;
}
.notifications .alert--alert_danger {
  background-color: #a82e2e;
}
.notifications .alert--alert_warning {
  background-color: #ffe270;
  color: #333;
}

/* ---- Category page: section buttons on one row ----
   Copenhagen sizes .blocks-item as flex: 1 0 340px with 15px side margins, so
   only two fit per row regardless of how many sections a category has. Scoped
   to .section-tree so the home page keeps its own tile sizing. */
/* .section-tree is a flex container in stock Copenhagen (it laid out two
   columns of sections). Our single <ul> became a flex item and shrank to its
   content, so the grid had no width to distribute. Make it a block again. */
.section-tree {
  display: block;
}
.section-tree .blocks-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin: 0;
}
.section-tree .blocks-item {
  flex: initial;
  margin: 0;
  min-width: 0;
}

/* ===== SecureAuth house-style KB restore: article body headings =====
   Restores the heading hierarchy/spacing from the pre-Copenhagen theme
   ("SA Production July 24 update") for article body content only. */
.article-body h3 {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.2;
  margin: 0 0 24px;
}
.article-body h4 {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.2;
  margin: 0 0 24px;
}
.article-title {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

/* Per-area heading font settings: Article content (above) and Page titles
   (below) are independently controllable via Admin Center > Guide >
   Customize design > Settings; anything not covered by either (comments,
   Related articles, Community, nav, etc.) stays on the theme's own global
   heading_font setting, untouched. */
.page-header h1 {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

/* ===== SecureAuth house-style KB restore: Applies-to / Deployment-model tags ===== */
.tags {
  list-style: none !important;
  margin: 0;
  overflow: hidden;
  padding: 0;
  display: inline-flex;
}
.tag {
  background: var(--t-elevated);
  border-radius: 13px;
  color: #fff;
  display: inline-block;
  height: 26px;
  line-height: 26px;
  padding: 0 14px 0 22px;
  position: relative;
  margin: 0 10px 10px 0;
  text-decoration: none;
  transition: color 0.2s;
  margin-left: 5px;
}
.tag::before {
  background: #fff;
  border-radius: 10px;
  box-shadow: inset 0 1px rgba(0, 0, 0, 0.25);
  content: '';
  height: 6px;
  left: 9px;
  position: absolute;
  width: 6px;
  top: 10px;
}

/* Force the ported Applies-to/Deployment-model block onto its own full-width
   row within the Copenhagen article-header flex container. */
.article-header .article-tags-wrap {
  flex-basis: 100%;
  margin-top: 10px;
}

/* Both .article-header's margin-bottom (40px) and .article-content's
   margin-top (also 40px, via `margin: 40px 0`) apply here, and adjacent
   sibling margins collapse to the larger of the two - so overriding only
   one had no visible effect. Zero out the header's side and let the
   content's top margin alone control the gap, so the result is
   deterministic. The content's own margin-bottom (spacing before the
   footer) is untouched. */
.article-header:has(> .article-tags-wrap) {
  margin-bottom: 0;
}
.article-header:has(> .article-tags-wrap) + .article-info .article-content {
  margin-top: 0;
}

/* Copenhagen never resets <p> margins for article body content, so
   paragraphs fall back to the browser default (margin: 1em 0, ~15px both
   sides here) and adjacent paragraph margins collapse unpredictably. The
   old theme set p { margin: 0 0 24px } explicitly - zero top, 24px bottom
   only - which is what every hand-tuned spacer paragraph in the house
   style (the <br>&nbsp; blocks before headings) was calibrated against.
   Restore that exactly, scoped to article body content only. The existing
   .article-body > p:last-child rule already zeroes the last paragraph's
   bottom margin and remains in effect (higher specificity). */
.article-body p {
  margin: 0 0 24px;
}

/* Copenhagen's normalize reset leaves b/strong at the relative keyword
   `bolder`, which resolves to 700 against normal-weight (400) body text.
   The old theme set an explicit 600 for both - confirmed live against Corp
   (computed font-weight 600 there vs 700 here on identical markup). Applied
   unscoped/site-wide, matching the old theme's own rule exactly - Copenhagen's
   own UI chrome (buttons, nav, headings) sets font-weight explicitly on
   classed elements rather than relying on bare b/strong, so this only
   affects literal bold text in article/comment body content. */
b,
strong {
  font-weight: 600;
}

/* Category page section boxes: cap at 2 per row (was: as many 340px+ boxes
   as the viewport fits, via the shared .blocks-item flex-basis). Scoped to
   the category page's own .section-tree wrapper so .blocks-item's shared
   styling on the home page / community topics pages is untouched. */
.section-tree .blocks-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 768px) {
  .section-tree .blocks-list {
    grid-template-columns: repeat(2, 1fr);
    margin: 0;
  }
}
.section-tree .blocks-item {
  flex: none;
  margin: 0;
  max-width: 100%;
}

/* Section page article list ("Option A: polished list"): dividers, hover
   state, per-row icon + last-updated meta, and a client-side Order By
   control (title A-Z/Z-A, recently updated). Sorting is client-side and
   only reorders the current page of results - Zendesk paginates section
   pages server-side with no reader-facing sort hook, so this can't reach
   across pages on large sections. Replaces Copenhagen's bare text-link list. */

.section-content .article-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
  margin: 0;
}
/* Search results page: cards are rendered by initSearchCards() and reuse the
   .section-content article-card styles above. .section-content sits directly in
   .container here (no flex parent), so its 80% flex-basis is inert and the list
   fills the width; this is just the heading + empty/loading states. */
.sa-search-results { padding-bottom: 44px; }
.sa-search-heading {
  font-size: 22px;
  font-weight: 600;
  color: var(--t-text);
  margin: 4px 0 22px;
  min-height: 27px;
}
.sa-search-empty {
  list-style: none;
  color: var(--t-text-muted);
  font-size: 15px;
  padding: 22px 2px;
}
.sa-search-more {
  list-style: none;
  color: var(--t-text-muted);
  font-size: 13px;
  text-align: center;
  padding: 16px 2px 2px;
}
/* Product the search-result article covers (from its Applies:<product> label),
   a subtle pill in the card's meta line. */
.sa-card-product {
  display: inline-block;
  margin-left: 10px;
  padding: 1.5px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.5;
  background: var(--t-surface-hover);
  color: var(--t-text);
  vertical-align: 1px;
}
.section-content .article-list-item {
  list-style: none;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  /* Mostly-opaque blended card (frosted) so the hero wireframe never bleeds
     through the KB title text - the wireframe stays visible in the gaps and
     margins around the cards, matching secureauth.com's own cards. */
  background: linear-gradient(105deg, rgba(24, 33, 48, 0.82), rgba(15, 21, 32, 0.76));
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  padding: 0;
  transition: border-color 0.12s ease;
}
:root[data-theme="light"] .section-content .article-list-item {
  border-color: rgba(20, 30, 38, 0.1);
  background: linear-gradient(105deg, rgba(255, 255, 255, 0.9), rgba(244, 248, 250, 0.82));
}
.section-content .article-list-item:hover {
  border-color: rgba(255, 255, 255, 0.18);
}
:root[data-theme="light"] .section-content .article-list-item:hover {
  border-color: rgba(20, 30, 38, 0.2);
}
.article-list-item .article-list-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 18px;
  color: inherit;
  text-decoration: none;
  border-radius: 14px;
  transition: background-color 0.12s ease;
}
.article-list-item .article-list-link:hover {
  background-color: rgba(255, 255, 255, 0.03);
}
:root[data-theme="light"] .article-list-item .article-list-link:hover {
  background-color: rgba(20, 30, 38, 0.03);
}
.article-list-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--t-surface-hover);
  color: var(--t-link);
  display: flex;
  align-items: center;
  justify-content: center;
}
.article-list-main {
  flex: 1;
  min-width: 0;
}
.article-list-title {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--t-text);
}
.article-list-title .icon-star,
.article-list-title .icon-lock {
  width: 14px;
  height: 14px;
  vertical-align: -2px;
  margin-left: 4px;
}
.article-list-meta {
  display: block;
  font-size: 12.5px;
  color: var(--t-text-muted);
  margin-top: 3px;
}
.article-list-chevron {
  flex-shrink: 0;
  color: var(--t-text-muted);
  transition: transform 0.12s ease, color 0.12s ease;
}
.article-list-item .article-list-link:hover .article-list-chevron {
  color: var(--t-text);
  transform: translateX(2px);
}
/* Bug status pill, injected per article by initBugStatus() in sa-brand.js:
   Open = amber, Fixed = green. Sits between the meta and the chevron. */
.bug-status-pill {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
.bug-status-pill--open {
  background: rgba(255, 176, 32, 0.16);
  color: #FFC24B;
  border: 1px solid rgba(255, 176, 32, 0.38);
}
.bug-status-pill--fixed {
  background: rgba(45, 200, 120, 0.16);
  color: #4BD488;
  border: 1px solid rgba(45, 200, 120, 0.38);
}
:root[data-theme="light"] .bug-status-pill--open {
  background: rgba(190, 120, 0, 0.14);
  color: #8A5A00;
  border-color: rgba(190, 120, 0, 0.32);
}
:root[data-theme="light"] .bug-status-pill--fixed {
  background: rgba(18, 130, 74, 0.12);
  color: #0F6E42;
  border-color: rgba(18, 130, 74, 0.32);
}

/* Bug status FILTER bar - on a Bugs section, initBugStatus() client-renders the
   full (un-paginated) article list and inserts this bar above it. Chips filter
   All / Open / Fixed; the active Open/Fixed chip takes the pill's own colour. */
.sa-bug-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0 0 20px;
}
.sa-bug-filter__btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  color: var(--t-text-muted);
  background: var(--t-surface-subtle-3);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 8px 15px;
  cursor: pointer;
  transition: color 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}
:root[data-theme="light"] .sa-bug-filter__btn { border-color: rgba(20, 30, 40, 0.14); }
.sa-bug-filter__btn:hover { color: var(--t-text); background: var(--t-surface-hover); }
.sa-bug-filter__count {
  font-size: 11px;
  font-weight: 700;
  color: var(--t-text-muted);
  background: rgba(255, 255, 255, 0.07);
  border-radius: 999px;
  padding: 2px 7px;
  min-width: 20px;
  text-align: center;
}
:root[data-theme="light"] .sa-bug-filter__count { background: rgba(20, 30, 40, 0.07); }
.sa-bug-filter__btn.is-active {
  color: var(--t-pill-text);
  background: var(--t-pill-bg);
  border-color: var(--t-pill-bg);
}
.sa-bug-filter__btn.is-active .sa-bug-filter__count { color: var(--t-pill-text); background: rgba(0, 0, 0, 0.16); }
.sa-bug-filter__btn--open.is-active { color: #3a2600; background: #FFC24B; border-color: #FFC24B; }
.sa-bug-filter__btn--fixed.is-active { color: #06301b; background: #4BD488; border-color: #4BD488; }
.sa-bug-filter__btn--open.is-active .sa-bug-filter__count,
.sa-bug-filter__btn--fixed.is-active .sa-bug-filter__count { color: inherit; background: rgba(0, 0, 0, 0.2); }
.sa-bug-hide { display: none !important; }

/* Hover preview: the section article list shows each KB's Overview in a small
   floating card on hover/focus (built by initBugStatus() from the same
   articles fetch that drives the status pills). position:fixed and
   pointer-events:none so it never traps the cursor or blocks the card click;
   JS positions it beside the hovered row and hides it on scroll/resize. */
.kb-preview-pop {
  overflow-wrap: anywhere;
  word-break: break-word;
  position: fixed;
  width: 360px;
  max-width: calc(100vw - 16px);
  padding: 13px 15px 14px;
  border-radius: 12px;
  background: #16303D;
  color: #D6E6EE;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.5);
  font-size: 13.5px;
  line-height: 1.5;
  z-index: 900;
  pointer-events: none;
}
:root[data-theme="light"] .kb-preview-pop {
  background: #FFFFFF;
  color: #1B2A3A;
  border-color: rgba(10, 15, 24, 0.12);
  box-shadow: 0 16px 40px rgba(20, 40, 70, 0.2);
}
/* Section "Follow" subscribe dropdown - Zendesk's @reach/menu-button portals its
   menu into <reach-portal> at body level with hashed classes. Two problems:
   (1) its positioned wrapper is z:auto, so it renders BEHIND the article cards
   (whose .section-container is z:1 from the hero background) - raise it; and
   (2) it's a plain white box - theme it to match the site's dark dropdowns.
   Anchored on the stable [data-reach-menu-item] attribute. */
reach-portal > div:has([data-reach-menu-item]) {
  z-index: 1200 !important;
}
reach-portal div:has(> [data-reach-menu-item]) {
  background: var(--t-surface-subtle-3) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 12px !important;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.45) !important;
  padding: 6px !important;
  overflow: hidden;
}
:root[data-theme="light"] reach-portal div:has(> [data-reach-menu-item]) {
  border-color: rgba(20, 30, 38, 0.12) !important;
  box-shadow: 0 14px 36px rgba(20, 40, 70, 0.18) !important;
}
reach-portal [data-reach-menu-item] {
  color: var(--t-text) !important;
  border-radius: 8px !important;
}
reach-portal [data-reach-menu-item][data-selected],
reach-portal [data-reach-menu-item]:hover {
  background: var(--t-surface-hover) !important;
  color: var(--t-surface-hover-fg) !important;
}
.kb-preview-pop__label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--t-text-muted);
  margin-bottom: 6px;
}
/* Latest-update preview body: render the comment with its real formatting
   (paragraphs, lists, tables) instead of one flat line. Compact, and scrolls
   inside itself when a comment runs long. Inline styles are stripped in JS so the
   text takes the theme token. */
.kb-preview-pop__body {
  display: block;
  margin-top: 2px;
  max-height: 300px;
  overflow-y: auto;
  overflow-x: hidden;
  color: var(--t-text);
  font-size: 13px;
  line-height: 1.5;
}
.kb-preview-pop__body > :first-child { margin-top: 0; }
.kb-preview-pop__body > :last-child { margin-bottom: 0; }
.kb-preview-pop__body p { margin: 0 0 8px; }
.kb-preview-pop__body ul,
.kb-preview-pop__body ol { margin: 0 0 8px; padding-left: 20px; }
.kb-preview-pop__body li { margin: 2px 0; }
.kb-preview-pop__body a { color: var(--t-link); }
.kb-preview-pop__body img { max-width: 100%; height: auto; border-radius: 6px; margin: 4px 0; }
.kb-preview-pop__body h1,
.kb-preview-pop__body h2,
.kb-preview-pop__body h3,
.kb-preview-pop__body h4 { font-size: 13.5px; font-weight: 700; margin: 8px 0 4px; }
.kb-preview-pop__body pre {
  white-space: pre-wrap;
  word-break: break-word;
  background: rgba(255, 255, 255, 0.06);
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 12px;
  overflow-x: auto;
}
.kb-preview-pop__body code { font-family: ui-monospace, "IBM Plex Mono", monospace; font-size: 12px; }
.kb-preview-pop__body blockquote {
  margin: 0 0 8px;
  padding-left: 10px;
  border-left: 2px solid rgba(255, 255, 255, 0.2);
  color: var(--t-text-muted);
}
.kb-preview-pop__body table {
  border-collapse: collapse;
  width: 100%;
  font-size: 12px;
  margin: 0 0 8px;
  display: block;
  overflow-x: auto;
}
.kb-preview-pop__body th,
.kb-preview-pop__body td {
  border: 1px solid rgba(255, 255, 255, 0.14);
  padding: 3px 7px;
  text-align: left;
  white-space: nowrap;
}
:root[data-theme="light"] .kb-preview-pop__body pre { background: rgba(20, 30, 38, 0.05); }
:root[data-theme="light"] .kb-preview-pop__body blockquote { border-left-color: rgba(20, 30, 38, 0.2); }
:root[data-theme="light"] .kb-preview-pop__body th,
:root[data-theme="light"] .kb-preview-pop__body td { border-color: rgba(20, 30, 38, 0.16); }
/* Bug header fields (Version(s) Affected / Bug Number / Fixed in Version(s))
   shown above the Overview on Bug articles, divided off with a hairline. */
.kb-preview-pop__meta {
  margin: 0 0 10px;
  padding: 0 0 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 12.5px;
  line-height: 1.45;
}
:root[data-theme="light"] .kb-preview-pop__meta {
  border-bottom-color: rgba(10, 15, 24, 0.12);
}
.kb-preview-pop__meta-row {
  display: block;
}
.kb-preview-pop__meta-row + .kb-preview-pop__meta-row {
  margin-top: 2px;
}
.kb-preview-pop__meta-key {
  font-weight: 700;
  color: var(--t-text-muted);
}
/* Requests hover preview: "From <name>" line and the attachment row. */
.kb-preview-pop__from {
  display: block;
  font-size: 12px;
  color: var(--t-text-muted);
  margin-bottom: 5px;
}
.kb-preview-pop__attach {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 12px;
  color: var(--t-text-muted);
}
.kb-preview-pop__attach svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--t-link);
}
.kb-preview-pop__attach a {
  color: var(--t-link);
  text-decoration: underline;
  word-break: break-word;
}
.kb-preview-pop__attach a:hover {
  text-decoration: none;
}
:root[data-theme="light"] .kb-preview-pop__attach {
  border-top-color: rgba(10, 15, 24, 0.1);
}
/* The requests preview is interactive (viewer can move onto it and click the
   attachment links); the KB preview stays a passive tooltip. It can show a long
   latest comment, so cap the height and let it scroll. */
.kb-preview-pop--interactive {
  pointer-events: auto;
  max-height: 55vh;
  overflow-y: auto;
}

/* ============================================================
   Satisfaction (CSAT) survey on the request/case page. Zendesk's BASE
   stylesheet (not this theme) renders a hardcoded white .satisfaction-box with
   a faint <h4>, jarring in dark mode. Theme the card, heading, Good/Bad choice
   buttons (label[role=button]) and the reason/comment fields for both modes.
   Base rules are un-!important, so !important on the key props wins the tie.
   Markup confirmed live 2026-09-04.
   ============================================================ */
.satisfaction-box {
  background: var(--t-surface-subtle-3) !important;
  color: var(--t-text);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  padding: 22px 24px;
}
:root[data-theme="light"] .satisfaction-box {
  border-color: rgba(20, 30, 38, 0.1);
}
.satisfaction-box h1,
.satisfaction-box h2,
.satisfaction-box h3,
.satisfaction-box h4 {
  color: var(--t-text) !important;
  margin-top: 0;
}
/* Good / Bad choices (radios are stock-hidden; the labels are the buttons) */
.satisfaction-box label[role="button"] {
  color: var(--t-text) !important;
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 10px;
}
:root[data-theme="light"] .satisfaction-box label[role="button"] {
  border-color: rgba(20, 30, 38, 0.2) !important;
}
.satisfaction-box label[role="button"]:hover {
  background: var(--t-surface-hover) !important;
  border-color: var(--t-link) !important;
}
/* Good = green, Bad = red (per request). Solid fills with white text, so the
   same values read well on both the dark and light card. */
.satisfaction-box label[data-satisfied] {
  background: #1E8E4F !important;
  border-color: transparent !important;
  color: #FFFFFF !important;
}
.satisfaction-box label[data-satisfied]:hover {
  background: #18793F !important;
  border-color: transparent !important;
}
.satisfaction-box label[data-unsatisfied] {
  background: #C33A2C !important;
  border-color: transparent !important;
  color: #FFFFFF !important;
}
.satisfaction-box label[data-unsatisfied]:hover {
  background: #A82E22 !important;
  border-color: transparent !important;
}
/* Reason dropdown + comment box (shown after a rating is chosen) */
.satisfaction-box .form-field label,
.satisfaction-box .satisfaction-reason label,
.satisfaction-box .satisfaction-comment label {
  color: var(--t-text-muted) !important;
}
.satisfaction-box select,
.satisfaction-box textarea {
  background: var(--t-bg) !important;
  color: var(--t-text) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 8px;
}
:root[data-theme="light"] .satisfaction-box select,
:root[data-theme="light"] .satisfaction-box textarea {
  border-color: rgba(20, 30, 38, 0.16) !important;
}
.satisfaction-box .satisfaction-cancel {
  color: var(--t-text-muted) !important;
}
.satisfaction-box .satisfaction-submit {
  background: var(--t-elevated) !important;
  color: #FFFFFF !important;
  border: 0 !important;
  border-radius: 999px;
  padding: 9px 20px;
  cursor: pointer;
}
/* Rated state: centre the chosen rating between the two headings and show it as
   a solid green (good) / red (bad) pill. When rated, the pill is a disabled
   label[for="satisfaction_rating_score_good|bad"] with NO data-satisfied attr,
   so the choice-button rules above don't reach it. Keyed off the stable radio
   id so it works in both the rated and the choose-a-rating states. Markup
   confirmed live 2026-09-08 (request 160419). */
.satisfaction-box form.edit_satisfaction_rating {
  text-align: left;
  margin: 8px 0 12px;
}
.satisfaction-box form.edit_satisfaction_rating label[role="button"] {
  display: inline-block !important;
  opacity: 1 !important;
  cursor: default;
}
.satisfaction-box label[for="satisfaction_rating_score_good"] {
  background: #1E8E4F !important;
  border-color: transparent !important;
  color: #FFFFFF !important;
}
.satisfaction-box label[for="satisfaction_rating_score_bad"] {
  background: #C33A2C !important;
  border-color: transparent !important;
  color: #FFFFFF !important;
}

/* ============================================================
   Request / case page - brought in line with the site: glow
   background, a status pill + meta in the header, the conversation
   as glass cards (agent replies accented), a themed reply box, and
   Ticket-details as an info card. Restyles stock Copenhagen classes.
   ============================================================ */
.request-title {
  color: var(--t-text);
  /* kill stock Copenhagen's hardcoded grey `border-bottom:1px solid #ddd`
     (desktop only) - it sat across the new meta row. The divider now lives
     under .request-header-meta instead. */
  border-bottom: 0 !important;
  margin-bottom: 12px !important;
  padding-bottom: 0 !important;
}
.request-header-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin: 0 0 26px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 13px;
  color: var(--t-text-muted);
}
:root[data-theme="light"] .request-header-meta {
  border-bottom-color: rgba(20, 30, 38, 0.1);
}
.request-header-id {
  font-weight: 600;
  color: var(--t-text);
}
.request-header-dot {
  opacity: 0.5;
}

/* Status pill (header + sidebar), colour-coded by ticket status. */
.status-label {
  display: inline-flex;
  align-items: center;
  padding: 4px 13px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  background: var(--t-surface-hover);
  color: var(--t-text);
}
.status-label-open,
.status-label-new {
  background: rgba(255, 176, 32, 0.16);
  color: #FFC24B;
  border-color: rgba(255, 176, 32, 0.38);
}
:root[data-theme="light"] .status-label-open,
:root[data-theme="light"] .status-label-new {
  background: rgba(190, 120, 0, 0.14);
  color: #8A5A00;
  border-color: rgba(190, 120, 0, 0.32);
}
.status-label-pending,
.status-label-hold {
  background: rgba(80, 190, 255, 0.16);
  color: #7FD4FF;
  border-color: rgba(80, 190, 255, 0.36);
}
:root[data-theme="light"] .status-label-pending,
:root[data-theme="light"] .status-label-hold {
  background: rgba(0, 114, 163, 0.12);
  color: #005E88;
  border-color: rgba(0, 114, 163, 0.3);
}
.status-label-solved,
.status-label-closed {
  background: rgba(45, 200, 120, 0.16);
  color: #4BD488;
  border-color: rgba(45, 200, 120, 0.38);
}
:root[data-theme="light"] .status-label-solved,
:root[data-theme="light"] .status-label-closed {
  background: rgba(18, 130, 74, 0.12);
  color: #0F6E42;
  border-color: rgba(18, 130, 74, 0.32);
}

/* Conversation: each comment a glass card; agent replies get a cyan edge. */
.comment-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.comment {
  list-style: none;
  margin: 0 0 14px;
  padding: 18px 20px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  background: linear-gradient(105deg, rgba(24, 33, 48, 0.82), rgba(15, 21, 32, 0.76));
  backdrop-filter: blur(7px);
}
:root[data-theme="light"] .comment {
  border-color: rgba(42, 62, 98, 0.16);
  background: linear-gradient(105deg, rgba(225, 232, 244, 0.96), rgba(211, 222, 239, 0.9));
}
.comment--agent {
  border-left: 3px solid var(--t-link);
}
.comment-wrapper,
.comment-info {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
}
.comment-author {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.comment-avatar .user-avatar,
.comment-avatar img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
}
.comment-meta > span a,
.comment-meta > span {
  color: var(--t-text) !important;
  font-weight: 600;
}
.comment-meta .meta-data,
.meta-data {
  color: var(--t-text-muted) !important;
  font-weight: 400;
  font-size: 12.5px;
}
.comment-body {
  color: var(--t-text);
  line-height: 1.6;
}
.comment-body a {
  color: var(--t-link);
}

/* Attachments (comment + sidebar) as download chips. */
.attachments {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.attachment-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  background: var(--t-surface-subtle-3);
  font-size: 12.5px;
}
:root[data-theme="light"] .attachment-item {
  border-color: rgba(20, 30, 38, 0.12);
}
.attachment-item > a {
  color: var(--t-link);
  text-decoration: none;
  font-weight: 600;
}
.attachment-icon {
  color: var(--t-text-muted);
  flex-shrink: 0;
}
.attachment-meta .meta-data,
.attachment-meta a {
  color: var(--t-text-muted) !important;
}

/* Reply box. */
.request-follow-up {
  color: var(--t-text-muted);
  margin: 6px 0;
}
.comment-form {
  margin-top: 20px;
}
.comment-show-container {
  background: var(--t-surface-subtle-3) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: var(--t-text-muted) !important;
  border-radius: 12px !important;
  padding: 15px 20px !important;
  text-align: left;
  width: 100%;
  cursor: pointer;
}
:root[data-theme="light"] .comment-show-container {
  border-color: rgba(20, 30, 38, 0.12) !important;
}
.comment-show-container:hover {
  border-color: var(--t-link) !important;
}
.comment-form textarea,
.comment-fields textarea {
  background: var(--t-bg) !important;
  color: var(--t-text) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 10px;
}
:root[data-theme="light"] .comment-form textarea,
:root[data-theme="light"] .comment-fields textarea {
  border-color: rgba(20, 30, 38, 0.16) !important;
}
.comment-form-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.comment-form .button,
.request-submit-comment .button,
.comment-form input[type="submit"] {
  background: var(--t-elevated) !important;
  color: #FFFFFF !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 10px 22px !important;
  cursor: pointer;
}
.comment-form .button-secondary,
.mark-as-solved {
  background: transparent !important;
  color: var(--t-text) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 999px !important;
  padding: 10px 20px !important;
}
:root[data-theme="light"] .comment-form .button-secondary,
:root[data-theme="light"] .mark-as-solved {
  border-color: rgba(20, 30, 38, 0.2) !important;
}
/* The reply editor is CKEditor 5 (ck-* classes) - its default light theme is a
   white box, jarring in dark mode. Theme the editable area, toolbar, buttons,
   icons and the CC field. Core CKEditor colour variables are set on the editor
   root as a safety net; the visible surfaces are also overridden directly. */
.comment-form .ck.ck-editor,
.comment-form .ck-reset {
  --ck-border-radius: 12px;
  --ck-color-base-background: var(--t-bg);
  --ck-color-base-border: rgba(255, 255, 255, 0.16);
  --ck-color-base-text: var(--t-text);
  --ck-color-text: var(--t-text);
  --ck-color-toolbar-background: var(--t-surface-subtle-3);
  --ck-color-toolbar-border: rgba(255, 255, 255, 0.16);
  --ck-color-button-default-background: transparent;
  --ck-color-button-default-hover-background: var(--t-surface-hover);
  --ck-color-button-on-background: var(--t-surface-hover);
  --ck-color-button-on-hover-background: var(--t-surface-hover);
  --ck-color-input-background: var(--t-bg);
  --ck-color-input-border: rgba(255, 255, 255, 0.16);
  --ck-color-input-text: var(--t-text);
  --ck-color-dropdown-panel-background: var(--t-surface-subtle-3);
  --ck-color-panel-background: var(--t-surface-subtle-3);
  --ck-color-panel-border: rgba(255, 255, 255, 0.16);
}
.comment-form .ck.ck-editor__main > .ck-editor__editable,
.comment-form .ck-editor__editable.ck-editor__editable_inline,
.comment-form .ck.ck-content {
  background: var(--t-bg) !important;
  color: var(--t-text) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  border-radius: 0 0 12px 12px !important;
}
/* Typed text in the reply editor defaulted to black and was invisible on the dark
   editor. A base rule ".ck.ck-content p" carries color:#000 with !important; a plain
   ".comment-form .ck-content p" ties it on specificity and loses on source order, so
   it never applied (the Submit-a-Request editor only wins because its id selector
   outranks that base rule). Adding the extra .ck class lifts these to a higher
   specificity so they win, and the theme text token reads correctly in both modes. */
.comment-form .ck-editor__editable,
.comment-form .ck.ck-content,
.comment-form .ck.ck-content p,
.comment-form .ck.ck-content li,
.comment-form .ck.ck-content ul,
.comment-form .ck.ck-content ol,
.comment-form .ck.ck-content span,
.comment-form .ck.ck-content strong,
.comment-form .ck.ck-content em,
.comment-form .ck.ck-content blockquote,
.comment-form .ck.ck-content h1,
.comment-form .ck.ck-content h2,
.comment-form .ck.ck-content h3,
.comment-form .ck.ck-content h4 {
  color: var(--t-text) !important;
}
.comment-form .ck.ck-toolbar {
  background: var(--t-surface-subtle-3) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  border-radius: 12px 12px 0 0 !important;
}
/* The toolbar sits inside a sticky-panel wrapper whose own border keeps square
   top corners - round + clip it so the top of the editor is rounded. */
.comment-form .ck.ck-editor__top,
.comment-form .ck-sticky-panel,
.comment-form .ck-sticky-panel__content {
  border-radius: 12px 12px 0 0 !important;
  border-top-color: rgba(255, 255, 255, 0.16) !important;
  background: transparent !important;
  overflow: hidden;
}
/* --ck-border-radius:12px would over-round the small toolbar buttons; keep
   them modest. */
.comment-form .ck.ck-button {
  border-radius: 6px !important;
}
.comment-form .ck.ck-toolbar .ck.ck-toolbar__separator {
  background: rgba(255, 255, 255, 0.16) !important;
}
.comment-form .ck.ck-button,
.comment-form a.ck.ck-button {
  color: var(--t-text) !important;
  background: transparent !important;
}
.comment-form .ck.ck-button:not(.ck-disabled):hover,
.comment-form .ck.ck-button.ck-on {
  background: var(--t-surface-hover) !important;
}
.comment-form .ck.ck-button .ck-button__label {
  color: var(--t-text) !important;
}
.comment-form .ck.ck-icon {
  color: var(--t-text) !important;
}
.comment-form .ck.ck-icon > :not([fill="none"]) {
  fill: currentColor !important;
}
/* CC "Add emails" field above the editor: dark bar, and every inner wrapper of
   the token field neutralised to transparent so its white background can't show
   through (the wrapper class is opaque/unknown, so blanket the descendants). */
.comment-ccs {
  background: var(--t-bg) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 12px !important;
  color: var(--t-text) !important;
}
.comment-ccs *:not(svg):not(path) {
  background-color: transparent !important;
  border-color: transparent !important;
  border-radius: 0 !important;
}
.comment-ccs input,
.comment-ccs .ccs-input,
.comment-ccs textarea {
  color: var(--t-text) !important;
  border: 0 !important;
}
.comment-ccs input::placeholder,
.comment-ccs .ccs-input::placeholder {
  color: var(--t-text-muted) !important;
}
:root[data-theme="light"] .comment-form .ck.ck-editor__main > .ck-editor__editable,
:root[data-theme="light"] .comment-form .ck-editor__editable.ck-editor__editable_inline,
:root[data-theme="light"] .comment-form .ck.ck-content,
:root[data-theme="light"] .comment-form .ck.ck-toolbar,
:root[data-theme="light"] .comment-ccs,
:root[data-theme="light"] .comment-ccs input {
  border-color: rgba(20, 30, 38, 0.16) !important;
}
/* The Submit-a-Request page's Description field uses the same CKEditor but in the
   new-request form container (#new-request-form), out of .comment-form scope, so
   it showed as a bright white box in dark mode. Apply the same dark theming. */
#new-request-form .ck.ck-editor,
#new-request-form .ck-reset {
  --ck-border-radius: 12px;
  --ck-color-base-background: var(--t-bg);
  --ck-color-base-border: rgba(255, 255, 255, 0.16);
  --ck-color-base-text: var(--t-text);
  --ck-color-text: var(--t-text);
  --ck-color-toolbar-background: var(--t-surface-subtle-3);
  --ck-color-toolbar-border: rgba(255, 255, 255, 0.16);
  --ck-color-button-default-background: transparent;
  --ck-color-button-default-hover-background: var(--t-surface-hover);
  --ck-color-button-on-background: var(--t-surface-hover);
  --ck-color-button-on-hover-background: var(--t-surface-hover);
  --ck-color-input-background: var(--t-bg);
  --ck-color-input-border: rgba(255, 255, 255, 0.16);
  --ck-color-input-text: var(--t-text);
  --ck-color-dropdown-panel-background: var(--t-surface-subtle-3);
  --ck-color-panel-background: var(--t-surface-subtle-3);
  --ck-color-panel-border: rgba(255, 255, 255, 0.16);
}
#new-request-form .ck.ck-editor__main > .ck-editor__editable,
#new-request-form .ck-editor__editable.ck-editor__editable_inline,
#new-request-form .ck.ck-content {
  background: var(--t-bg) !important;
  color: var(--t-text) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  border-radius: 0 0 12px 12px !important;
}
#new-request-form .ck.ck-toolbar {
  background: var(--t-surface-subtle-3) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  border-radius: 12px 12px 0 0 !important;
}
#new-request-form .ck.ck-editor__top,
#new-request-form .ck-sticky-panel,
#new-request-form .ck-sticky-panel__content {
  border-radius: 12px 12px 0 0 !important;
  border-top-color: rgba(255, 255, 255, 0.16) !important;
  background: transparent !important;
  overflow: hidden;
}
#new-request-form .ck.ck-button { border-radius: 6px !important; }
#new-request-form .ck.ck-toolbar .ck.ck-toolbar__separator {
  background: rgba(255, 255, 255, 0.16) !important;
}
#new-request-form .ck.ck-button,
#new-request-form a.ck.ck-button {
  color: var(--t-text) !important;
  background: transparent !important;
}
#new-request-form .ck.ck-button:not(.ck-disabled):hover,
#new-request-form .ck.ck-button.ck-on {
  background: var(--t-surface-hover) !important;
}
#new-request-form .ck.ck-button .ck-button__label { color: var(--t-text) !important; }
#new-request-form .ck.ck-icon { color: var(--t-text) !important; }
#new-request-form .ck.ck-icon > :not([fill="none"]) { fill: currentColor !important; }
:root[data-theme="light"] #new-request-form .ck.ck-editor__main > .ck-editor__editable,
:root[data-theme="light"] #new-request-form .ck-editor__editable.ck-editor__editable_inline,
:root[data-theme="light"] #new-request-form .ck.ck-content,
:root[data-theme="light"] #new-request-form .ck.ck-toolbar {
  border-color: rgba(20, 30, 38, 0.16) !important;
}
/* "Fields marked with an asterisk (*) are required." - Zendesk renders it as a
   faint thin paragraph; its colour already reads correctly in both themes, so
   only boost its prominence (weight + size) to make it more obvious. */
#new-request-form [data-garden-id="typography.paragraph"][aria-hidden="true"] {
  font-weight: 600 !important;
  font-size: 14px !important;
}
/* Typed text in the Description editor defaulted to dark, invisible on the dark
   box. Force the editable AND its content elements to the theme text colour
   (the bare .ck-content colour set above wasn't inherited by the typed nodes). */
#new-request-form .ck-editor__editable,
#new-request-form .ck-content,
#new-request-form .ck-content p,
#new-request-form .ck-content li,
#new-request-form .ck-content span,
#new-request-form .ck-content strong,
#new-request-form .ck-content em,
#new-request-form .ck-content blockquote,
#new-request-form .ck-content h1,
#new-request-form .ck-content h2,
#new-request-form .ck-content h3,
#new-request-form .ck-content h4 {
  color: var(--t-text) !important;
}
/* CC field: an added email renders as a faint Garden tag (light text on a light
   chip) - invisible in dark mode. Repaint the chip and its label/remove button. */
#new-request-form [data-garden-id="tags.tag_view"] {
  background: var(--t-surface-hover) !important;
  color: var(--t-text) !important;
}
#new-request-form [data-garden-id="tags.tag_view"] *:not(svg):not(path) {
  color: var(--t-text) !important;
  background: transparent !important;
}
/* Invalid CC email: the bundle marks the chip with a warning icon
   (data-garden-id="tags.avatar") that valid chips don't have - turn the whole
   chip red (border, tint, text and the warning icon) so a bad address is obvious. */
#new-request-form [data-garden-id="tags.tag_view"]:has([data-garden-id="tags.avatar"]) {
  background: rgba(200, 60, 50, 0.28) !important;
  border: 1px solid #F06E6E !important;
}
#new-request-form [data-garden-id="tags.tag_view"]:has([data-garden-id="tags.avatar"]) span,
#new-request-form [data-garden-id="tags.tag_view"]:has([data-garden-id="tags.avatar"]) [data-garden-id="tags.avatar"],
#new-request-form [data-garden-id="tags.tag_view"]:has([data-garden-id="tags.avatar"]) [data-garden-id="tags.close"] {
  color: #F06E6E !important;
}
:root[data-theme="light"] #new-request-form [data-garden-id="tags.tag_view"]:has([data-garden-id="tags.avatar"]) {
  background: rgba(195, 58, 44, 0.1) !important;
  border-color: #C33A2C !important;
}
:root[data-theme="light"] #new-request-form [data-garden-id="tags.tag_view"]:has([data-garden-id="tags.avatar"]) span,
:root[data-theme="light"] #new-request-form [data-garden-id="tags.tag_view"]:has([data-garden-id="tags.avatar"]) [data-garden-id="tags.avatar"],
:root[data-theme="light"] #new-request-form [data-garden-id="tags.tag_view"]:has([data-garden-id="tags.avatar"]) [data-garden-id="tags.close"] {
  color: #C33A2C !important;
}
/* Submit button: the bundle renders it as a neutral grey - repaint as the brand
   CTA (same colours as the "Submit a Request" nav pill). */
#new-request-form button[type="submit"],
#new-request-form [data-garden-id="buttons.button"][type="submit"] {
  background: var(--t-elevated) !important;
  color: var(--t-brand-text) !important;
  border-color: var(--t-elevated) !important;
}
#new-request-form button[type="submit"]:hover,
#new-request-form [data-garden-id="buttons.button"][type="submit"]:hover {
  background: var(--t-elevated-hover) !important;
  border-color: var(--t-elevated-hover) !important;
}
/* Required-field validation errors ("Subject: cannot be blank" etc.) - Garden's
   default red is too soft, especially in light theme. Make them bold and a
   stronger, theme-appropriate red (the icon inherits currentColor, so it reddens
   too). The invalid field's own red border is Garden's and already fine. */
#new-request-form [data-garden-id="forms.input_message"],
#new-request-form [data-garden-id="dropdowns.combobox.message"] {
  color: #F06E6E !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
}
:root[data-theme="light"] #new-request-form [data-garden-id="forms.input_message"],
:root[data-theme="light"] #new-request-form [data-garden-id="dropdowns.combobox.message"] {
  color: #C0271A !important;
}
/* Description box: red outline when the field is invalid (blank on submit), to
   match the other required fields. CKEditor flags the editable with
   aria-invalid="true"; red-border the whole box (toolbar + editable + wrapper). */
#new-request-form .ck.ck-editor:has(.ck-editor__editable[aria-invalid="true"]) .ck.ck-content,
#new-request-form .ck.ck-editor:has(.ck-editor__editable[aria-invalid="true"]) .ck.ck-toolbar,
#new-request-form .ck.ck-editor:has(.ck-editor__editable[aria-invalid="true"]) .ck-editor__top,
#new-request-form .ck.ck-editor:has(.ck-editor__editable[aria-invalid="true"]) .ck-sticky-panel__content {
  border-color: #F06E6E !important;
}
:root[data-theme="light"] #new-request-form .ck.ck-editor:has(.ck-editor__editable[aria-invalid="true"]) .ck.ck-content,
:root[data-theme="light"] #new-request-form .ck.ck-editor:has(.ck-editor__editable[aria-invalid="true"]) .ck.ck-toolbar,
:root[data-theme="light"] #new-request-form .ck.ck-editor:has(.ck-editor__editable[aria-invalid="true"]) .ck-editor__top,
:root[data-theme="light"] #new-request-form .ck.ck-editor:has(.ck-editor__editable[aria-invalid="true"]) .ck-sticky-panel__content {
  border-color: #C0271A !important;
}
/* ============================================================
   Submit a Request redesign: section headers, Impact and Urgency
   level legends, and level colouring. All of these elements are
   injected by initNewRequestRedesign(); the native Garden controls
   stay the submitted source of truth. */
#new-request-form {
  --sa-sev-green: #4FE39B; --sa-sev-green-bg: rgba(79, 227, 155, 0.13); --sa-sev-green-bd: rgba(79, 227, 155, 0.5);
  --sa-sev-amber: #FFCE5B; --sa-sev-amber-bg: rgba(255, 206, 91, 0.13); --sa-sev-amber-bd: rgba(255, 206, 91, 0.5);
  --sa-sev-red: #FF7A7A; --sa-sev-red-bg: rgba(255, 122, 122, 0.13); --sa-sev-red-bd: rgba(255, 122, 122, 0.5);
  --sa-nrf-muted: #93A6B4;
}
:root[data-theme="light"] #new-request-form {
  --sa-sev-green: #0E8A54; --sa-sev-green-bg: rgba(14, 138, 84, 0.10); --sa-sev-green-bd: rgba(14, 138, 84, 0.4);
  --sa-sev-amber: #9A6B12; --sa-sev-amber-bg: rgba(214, 158, 46, 0.16); --sa-sev-amber-bd: rgba(214, 158, 46, 0.45);
  --sa-sev-red: #C0271A; --sa-sev-red-bg: rgba(192, 39, 26, 0.09); --sa-sev-red-bd: rgba(192, 39, 26, 0.4);
  --sa-nrf-muted: #4E6475;
}
#new-request-form .sa-nrf-group {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin: 34px 0 6px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.10);
}
:root[data-theme="light"] #new-request-form .sa-nrf-group { border-top-color: rgba(20, 30, 38, 0.10); }
#new-request-form .sa-nrf-group.sa-first { border-top: 0; padding-top: 0; margin-top: 6px; }
#new-request-form .sa-nrf-group h2 { margin: 0; font-size: 18px; font-weight: 700; color: var(--t-text); }
#new-request-form .sa-nrf-tag { margin-left: auto; font-size: 11.5px; font-weight: 700; color: var(--sa-nrf-muted); }
#new-request-form .sa-nrf-tag.pre {
  color: var(--sa-sev-green); background: var(--sa-sev-green-bg);
  border: 1px solid var(--sa-sev-green-bd); border-radius: 999px; padding: 3px 11px;
}
#new-request-form .sa-nrf-legend { list-style: none; margin: 9px 0 2px; padding: 0; display: grid; gap: 2px; }
#new-request-form .sa-nrf-legend li {
  display: grid; grid-template-columns: 64px 1fr; gap: 10px; align-items: baseline;
  font-size: 12.5px; color: var(--sa-nrf-muted); padding: 3px 8px; margin: 0 -8px; border-radius: 8px;
}
#new-request-form .sa-nrf-legend .lv { font-weight: 800; font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; }
#new-request-form .sa-nrf-legend .lv-low { color: var(--sa-sev-green); }
#new-request-form .sa-nrf-legend .lv-med { color: var(--sa-sev-amber); }
#new-request-form .sa-nrf-legend .lv-high { color: var(--sa-sev-red); }
#new-request-form [data-sa-level="low"] + .sa-nrf-legend li.r-low,
#new-request-form [data-sa-level="med"] + .sa-nrf-legend li.r-med,
#new-request-form [data-sa-level="high"] + .sa-nrf-legend li.r-high {
  color: var(--t-text); background: rgba(127, 127, 127, 0.10);
}
/* Hide any 1px overflow on a combobox trigger so a coloured one never shows a
   vertical scrollbar, and keep the option menu compact (min of 300px and 40vh)
   so it fits below the field far more often, clears the sticky nav when Garden
   does flip it above, and always scrolls internally so no option is unreachable. */
#new-request-form [data-garden-id="dropdowns.combobox.trigger"] { overflow: hidden !important; }
#new-request-form [role="listbox"] { max-height: min(300px, 40vh) !important; }
/* Level colouring: colour the border and add a 1px inset ring of the same colour.
   No border-WIDTH change, so the fixed-height trigger keeps its content box and
   cannot overflow into a scrollbar (the earlier 2px border was the cause). */
#new-request-form [data-sa-level] [data-garden-id="dropdowns.combobox.trigger"] {
  transition: box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
#new-request-form [data-sa-level="low"] [data-garden-id="dropdowns.combobox.trigger"] { border-color: var(--sa-sev-green) !important; background: var(--sa-sev-green-bg) !important; box-shadow: inset 0 0 0 1px var(--sa-sev-green) !important; }
#new-request-form [data-sa-level="med"] [data-garden-id="dropdowns.combobox.trigger"] { border-color: var(--sa-sev-amber) !important; background: var(--sa-sev-amber-bg) !important; box-shadow: inset 0 0 0 1px var(--sa-sev-amber) !important; }
#new-request-form [data-sa-level="high"] [data-garden-id="dropdowns.combobox.trigger"] { border-color: var(--sa-sev-red) !important; background: var(--sa-sev-red-bg) !important; box-shadow: inset 0 0 0 1px var(--sa-sev-red) !important; }
/* ============================================================
   Richer skin: the whole form as a card, a signed-in banner, section headers
   with an accent bar, help chips under Description, and field polish. All are
   safe (styling plus injected sibling elements); no field is reparented. */
#new-request-form form {
  background: rgba(255, 255, 255, 0.028);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 18px;
  padding: 6px 26px 26px;
  box-shadow: 0 26px 64px -34px rgba(0, 0, 0, 0.7);
}
:root[data-theme="light"] #new-request-form form {
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(20, 40, 60, 0.12);
  box-shadow: 0 22px 50px -30px rgba(20, 50, 80, 0.35);
}
@media (max-width: 640px) { #new-request-form form { padding: 6px 16px 20px; } }
#new-request-form form > [data-garden-id="forms.field"],
#new-request-form form > [data-garden-id="dropdowns.combobox.field"] { margin-top: 16px; }
/* Two-column pairing: same-subject short fields sit side by side (Version +
   Deployment, Impact + Urgency); everything else spans the full width; the grid
   collapses to one column on a narrow screen. */
#new-request-form form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 20px; row-gap: 0; align-items: start; }
#new-request-form form > * { grid-column: 1 / -1; }
#new-request-form form > [data-sa-pair] { grid-column: span 1; }
@media (max-width: 720px) { #new-request-form form { grid-template-columns: 1fr; } }
/* Compact Low/Med/High picker overlaid on the Impact and Urgency triggers. The
   native value text is hidden and clicks pass through to open Zendesk's own
   dropdown (which lists the full descriptions); the native value still submits. */
#new-request-form { --sa-pick-bg: #16222c; }
:root[data-theme="light"] #new-request-form { --sa-pick-bg: #ffffff; }
#new-request-form [data-sa-picker] [data-garden-id="dropdowns.combobox.trigger"] { position: relative; border-color: rgba(255,255,255,0.15) !important; background: var(--sa-pick-bg) !important; box-shadow: none !important; }
:root[data-theme="light"] #new-request-form [data-sa-picker] [data-garden-id="dropdowns.combobox.trigger"] { border-color: rgba(20, 40, 60, 0.2) !important; }
#new-request-form [data-sa-picker] [data-garden-id="dropdowns.combobox.input"] { color: transparent !important; caret-color: transparent !important; }
/* opaque strip that covers the native value text, leaving the chevron clear */
#new-request-form .sa-seg { position: absolute; left: 1px; top: 1px; bottom: 1px; right: 26px; display: flex; align-items: center; gap: 5px; padding-left: 10px; background: var(--sa-pick-bg); border-radius: 9px 0 0 9px; pointer-events: none; z-index: 2; }
#new-request-form .sa-seg .s { font-size: 12px; font-weight: 800; letter-spacing: 0.02em; padding: 3px 9px; border-radius: 999px; color: var(--sa-nrf-muted); border: 1px solid transparent; background: transparent; }
#new-request-form [data-sa-picker][data-sa-level="low"] .sa-seg .s.low { color: var(--sa-sev-green); background: var(--sa-sev-green-bg); border-color: var(--sa-sev-green-bd); }
#new-request-form [data-sa-picker][data-sa-level="med"] .sa-seg .s.med { color: var(--sa-sev-amber); background: var(--sa-sev-amber-bg); border-color: var(--sa-sev-amber-bd); }
#new-request-form [data-sa-picker][data-sa-level="high"] .sa-seg .s.high { color: var(--sa-sev-red); background: var(--sa-sev-red-bg); border-color: var(--sa-sev-red-bd); }
/* Any field whose description moved to an info icon: hide the native hint line
   (keeps rows tidy and paired dropdowns aligned). Covers combobox and plain fields. */
#new-request-form [data-sa-info] > [data-garden-id="dropdowns.combobox.hint"],
#new-request-form [data-sa-info] > [data-garden-id="forms.input_hint"] { display: none !important; }
/* the "i" icon that carries the field description as a hover tooltip. */
#new-request-form .sa-info { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; margin-left: 7px; border-radius: 999px; border: 1px solid currentColor; color: var(--sa-nrf-muted); font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 700; font-size: 11px; line-height: 1; cursor: help; position: relative; vertical-align: middle; }
#new-request-form .sa-info:hover, #new-request-form .sa-info:focus { color: var(--t-link); outline: none; }
#new-request-form .sa-info::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); width: max-content; max-width: 260px; padding: 8px 11px; border-radius: 8px; background: #0B1A24; color: #E8EFF6; border: 1px solid rgba(255, 255, 255, 0.12); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; font-style: normal; font-weight: 400; font-size: 12px; line-height: 1.4; white-space: normal; text-align: left; box-shadow: 0 14px 34px -14px rgba(0, 0, 0, 0.75); opacity: 0; pointer-events: none; transition: opacity 0.15s ease; z-index: 60; }
#new-request-form .sa-info:hover::after, #new-request-form .sa-info:focus::after { opacity: 1; }
:root[data-theme="light"] #new-request-form .sa-info::after { background: #ffffff; color: #0E2230; border-color: rgba(20, 40, 60, 0.14); }
#new-request-form [data-garden-id="dropdowns.combobox.trigger"],
#new-request-form [data-garden-id="forms.input"],
#new-request-form [data-garden-id="forms.faux_input"] { border-radius: 10px !important; }
#new-request-form .sa-nrf-signed {
  display: flex; align-items: center; gap: 12px; padding: 16px 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
:root[data-theme="light"] #new-request-form .sa-nrf-signed { border-bottom-color: rgba(20, 40, 60, 0.1); }
#new-request-form .sa-nrf-signed .av {
  flex: none; width: 38px; height: 38px; border-radius: 999px; color: #fff; font-weight: 800; font-size: 14px;
  display: grid; place-items: center; background: linear-gradient(150deg, var(--t-link), var(--t-elevated));
}
#new-request-form .sa-nrf-signed .who { font-weight: 700; font-size: 14.5px; color: var(--t-text); }
#new-request-form .sa-nrf-signed .sub { font-size: 12.5px; color: var(--sa-nrf-muted); }
#new-request-form .sa-nrf-signed .pill {
  margin-left: auto; font-size: 11.5px; font-weight: 700; color: var(--sa-sev-green);
  background: var(--sa-sev-green-bg); border: 1px solid var(--sa-sev-green-bd); border-radius: 999px; padding: 5px 12px;
}
#new-request-form .sa-nrf-group h2 { display: flex; align-items: center; gap: 10px; }
#new-request-form .sa-nrf-group h2::before {
  content: ""; flex: none; width: 4px; height: 18px; border-radius: 999px; background: var(--t-link);
}
#new-request-form .sa-nrf-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 11px 0 2px; }
#new-request-form .sa-nrf-chips .c {
  font-size: 12px; color: var(--sa-nrf-muted); background: rgba(127, 127, 127, 0.10);
  border: 1px solid rgba(127, 127, 127, 0.18); border-radius: 999px; padding: 5px 11px;
}
/* ============================================================
   Submit a Request page shell (new_request_page.hbs): a modern hero header and a
   two column layout (the form card beside a helpful sidebar), applied to every
   request form. */
.nrf-page { --nrf-muted: #93A6B4; }
:root[data-theme="light"] .nrf-page { --nrf-muted: #4E6475; }
.nrf-hero { margin: 6px 0 24px; }
.nrf-eyebrow { margin: 0 0 8px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; font-size: 12px; color: var(--t-link); }
.nrf-hero h1 { margin: 0 0 10px; }
.nrf-sub { margin: 0; max-width: 62ch; font-size: 16px; color: var(--nrf-muted); }
.nrf-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 30px; align-items: start; }
.nrf-page .nrf-main.form { min-width: 0; max-width: none; margin: 0; }
.nrf-aside { display: grid; gap: 16px; }
@media (min-width: 1024px) { .nrf-aside { position: sticky; top: 100px; } }
@media (max-width: 900px) { .nrf-layout { grid-template-columns: 1fr; } .nrf-aside { order: 2; } }
.nrf-card { border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 14px; background: rgba(255, 255, 255, 0.03); padding: 16px 18px; }
:root[data-theme="light"] .nrf-card { border-color: rgba(20, 40, 60, 0.12); background: rgba(255, 255, 255, 0.66); }
.nrf-card h3 { margin: 0 0 10px; font-size: 15px; font-weight: 700; color: var(--t-text); }
.nrf-tips, .nrf-steps { margin: 0; padding-left: 18px; display: grid; gap: 8px; font-size: 13px; line-height: 1.5; color: var(--nrf-muted); }
.nrf-card a { color: var(--t-link); font-weight: 600; }
/* Submit-a-request: urgent support-phone card */
.nrf-card--urgent .nrf-urgent-lead { margin: 0 0 12px; font-size: 13px; line-height: 1.5; color: var(--nrf-muted); }
.nrf-card .nrf-phone { display: inline-flex; align-items: center; gap: 9px; font-size: 18px; font-weight: 700; color: var(--t-link); text-decoration: none; }
.nrf-card .nrf-phone svg { flex: none; }
.nrf-card .nrf-phone:hover { color: var(--t-link-hover); }
/* Urgent tel: link inside the form-selector instruction label */
.sa-form-phone { color: var(--t-link); text-decoration: none; white-space: nowrap; }
.sa-form-phone:hover { color: var(--t-link-hover); text-decoration: underline; }
/* Home hero: subtle, understated urgent-support line under the search box */
.sa-hero-phone { margin: 14px 0 0; text-align: center; font-size: 13px; color: var(--t-text-muted); opacity: .72; }
.sa-hero-phone a { color: var(--t-link); font-weight: 500; text-decoration: none; white-space: nowrap; }
.sa-hero-phone a:hover { text-decoration: underline; }
.nrf-links { display: grid; gap: 11px; }
.nrf-links a { display: block; }
/* File dropzone -> smoked-glass pill (the inner upload widget's own border/bg
   is neutralised so only the pill shows). */
.comment-attachments {
  margin-top: 12px;
  padding: 15px 24px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  backdrop-filter: blur(8px);
  text-align: center;
}
:root[data-theme="light"] .comment-attachments {
  border-color: rgba(20, 30, 38, 0.12) !important;
  background: rgba(20, 30, 38, 0.035) !important;
}
.comment-attachments *:not(svg):not(path) {
  background: transparent !important;
  border: 0 !important;
}
.comment-attachments a {
  color: var(--t-link) !important;
}

/* Ticket-details sidebar as an info card. */
.request-sidebar {
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(6px);
  padding: 18px 20px;
}
:root[data-theme="light"] .request-sidebar {
  border-color: rgba(20, 30, 38, 0.1);
  background: rgba(20, 30, 38, 0.03);
}
/* Keep the details card in view while reading a long case. Sticky below the nav
   pill (which pins at ~86px); scroll inside itself if the details run very long. */
@media (min-width: 1024px) {
  .request-sidebar {
    position: sticky;
    top: 100px;
    align-self: flex-start;
    max-height: calc(100vh - 124px);
    overflow-y: auto;
  }
}
/* "Jump to top" / "Jump to latest" buttons: pinned at the top of the (sticky) details
   card by initJumpToLatest, so they stay visible while scrolling a long case. The two
   buttons share the card width, divided off from the details by a hairline. */
.sa-jump-actions {
  display: flex;
  gap: 8px;
  margin: 0 0 16px;
  padding: 0 0 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
:root[data-theme="light"] .sa-jump-actions {
  border-bottom-color: rgba(20, 30, 38, 0.12);
}
.sa-jump-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--t-surface-subtle-3);
  color: var(--t-text);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  padding: 8px 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.sa-jump-btn:hover,
.sa-jump-btn:focus-visible {
  background: var(--t-surface-hover);
  border-color: var(--t-link);
  transform: translateY(-1px);
  outline: none;
}
:root[data-theme="light"] .sa-jump-btn {
  border-color: rgba(20, 30, 38, 0.16);
}
.collapsible-sidebar-title,
.request-sidebar h2 {
  color: var(--t-text);
  font-size: 15px;
}
.collapsible-sidebar-toggle {
  color: var(--t-text);
}
.request-details {
  margin: 0 0 14px;
}
.request-details dt {
  color: var(--t-text-muted);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 12px;
}
.request-details dd {
  color: var(--t-text);
  /* Match the label's top margin so values line up with their labels (they sat a few
     px high before). dt and dd are top-aligned inline-blocks. */
  margin: 12px 0 0;
}
.request-details dd a {
  color: var(--t-link);
}
.request-collaborators {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Touch devices have no hover, and the card already opens on tap, so don't
   let a stray tap flash the preview. */
@media (hover: none) {
  .kb-preview-pop { display: none !important; }
}

/* ============================================================
   Requests / My Tickets page - Zendesk's Garden request TABLE
   restyled into cards. CSS-only, so the module's native search,
   Filter button and click-to-sort headers keep working and
   survive re-renders. Everything is hooked to Garden's stable
   data-garden-id / data-test-id attributes (never the volatile
   styled-components hash classes) and scoped to .sa-requests
   (added to this page's container) so no other page is touched.
   Garden injects its own runtime styles after this sheet, so the
   key visual props use !important to win the tie.
   ============================================================ */
/* table + head become blocks so we can lay them out freely */
.sa-requests [data-garden-id="tables.table"] {
  display: block;
  border: 0;
}
/* Garden's own sortable header is hidden - replaced by the custom .sa-sort-bar
   (built in sa-brand.js) because Garden's sort buttons proved flaky and left an
   empty box. The old .sa-requests header_row / sortable rules below are now
   inert (they sit inside this hidden head). */
.sa-requests [data-garden-id="tables.head"] {
  display: none !important;
}
/* Custom sort bar: the transparent pill + our own sort pills. */
.sa-requests .sa-sort-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  width: fit-content;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
  padding: 10px 16px;
  margin: 0 0 18px;
}
:root[data-theme="light"] .sa-requests .sa-sort-bar {
  border-color: rgba(20, 30, 38, 0.1);
  background: rgba(20, 30, 38, 0.035);
}
.sa-requests .sa-sort-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--t-text-muted);
  margin-right: 2px;
}
.sa-requests .sa-sort-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--t-surface-subtle-3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--t-text) !important;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.sa-requests .sa-sort-pill:hover {
  background: var(--t-surface-hover);
}
.sa-requests .sa-sort-pill--active {
  background: var(--t-pill-bg);
  color: var(--t-pill-text) !important;
  border-color: transparent;
}
:root[data-theme="light"] .sa-requests .sa-sort-pill {
  border-color: rgba(20, 30, 38, 0.14);
}
.sa-requests .sa-sort-caret {
  font-size: 11px;
}
/* redundant Garden tooltips inside the table (every cell duplicates its own
   text as a hover tooltip) - not wanted in a card */
.sa-requests [data-garden-id="tables.table"] div:has(> [data-garden-id="tooltip.tooltip"]) {
  display: none !important;
}

/* HEADER ROW -> a "Sort by" chip bar keeping the native sort buttons */
.sa-requests [data-garden-id="tables.header_row"] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  /* The whole SORT BY row sits in a transparent rounded pill above the cards,
     with a gap below it before the first card (per request). */
  width: fit-content;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
  padding: 10px 16px;
  margin: 0 0 18px;
}
:root[data-theme="light"] .sa-requests [data-garden-id="tables.header_row"] {
  border-color: rgba(20, 30, 38, 0.1) !important;
  background: rgba(20, 30, 38, 0.035);
}
.sa-requests [data-garden-id="tables.header_row"]::before {
  content: "Sort by";
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--t-text-muted);
  margin-right: 2px;
}
/* strip Garden's cell chrome off every header cell */
.sa-requests th[data-garden-id="tables.header_cell"] {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  width: auto !important;
}
/* hide the non-sortable columns (Subject, ID) and the show/hide-columns
   overflow button - only the 3 sortable columns stay, as chips */
.sa-requests th[data-test-id="header-cell-subject"],
.sa-requests th[data-test-id="header-cell-id"],
.sa-requests th[data-garden-id="tables.header_cell"]:has(> [data-garden-id="tables.overflow_button"]) {
  display: none !important;
}
/* the sortable button itself = the chip (leave Garden's inner label+arrow
   layout alone, just restyle the box) */
.sa-requests [data-garden-id="tables.sortable"] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  background: var(--t-surface-subtle-3) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: var(--t-text) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
}
.sa-requests [data-garden-id="tables.sortable"]:hover {
  background: var(--t-surface-hover) !important;
}
/* Garden's own sort arrows are absolutely positioned hard against the chip's
   right edge (cramped). Hide them and show a clean direction caret on the
   currently-sorted column instead. */
.sa-requests [data-garden-id="tables.sortable"] div:has(> svg) {
  display: none !important;
}
.sa-requests th[aria-sort="ascending"] [data-garden-id="tables.sortable"]::after {
  content: "\2191";
  font-size: 11px;
  opacity: 0.9;
}
.sa-requests th[aria-sort="descending"] [data-garden-id="tables.sortable"]::after {
  content: "\2193";
  font-size: 11px;
  opacity: 0.9;
}
/* the column currently sorted (aria-sort set) reads as a filled chip */
.sa-requests th[aria-sort="ascending"] [data-garden-id="tables.sortable"],
.sa-requests th[aria-sort="descending"] [data-garden-id="tables.sortable"] {
  background: var(--t-pill-bg) !important;
  color: var(--t-pill-text) !important;
  border-color: transparent !important;
}
:root[data-theme="light"] .sa-requests [data-garden-id="tables.sortable"] {
  border-color: rgba(20, 30, 38, 0.14) !important;
}

/* BODY -> a stack of cards */
.sa-requests [data-garden-id="tables.body"] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.sa-requests [data-garden-id="tables.row"] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px 14px;
  padding: 15px 18px;
  /* Garden hard-sets height:40px on the row (a table-row height); without this
     override the card background stops after line 1 and the meta line overflows
     ~32px below it (confirmed live). Force auto so the card grows to 2 lines. */
  height: auto !important;
  min-height: 0 !important;
  /* positioned so the subject link's stretched ::after (below) covers the whole
     card, making the entire card clickable - not just the title. */
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 14px;
  background: linear-gradient(105deg, rgba(24, 33, 48, 0.82), rgba(15, 21, 32, 0.76));
  backdrop-filter: blur(7px);
  transition: border-color 0.15s ease;
}
.sa-requests [data-garden-id="tables.row"]:hover {
  border-color: rgba(117, 227, 255, 0.35) !important;
}
:root[data-theme="light"] .sa-requests [data-garden-id="tables.row"] {
  background: linear-gradient(105deg, rgba(225, 232, 244, 0.96), rgba(211, 222, 239, 0.9));
  border-color: rgba(42, 62, 98, 0.16) !important;
}
/* Case card with an UNANSWERED satisfaction survey - warm amber highlight so it
   nudges the customer to rate. Class .sa-needs-survey is set by
   initSurveyHighlight() (sa-brand.js) after a per-ticket page-HTML check. */
.sa-requests [data-garden-id="tables.row"].sa-needs-survey {
  border-color: rgba(255, 194, 75, 0.55) !important;
  background: linear-gradient(105deg, rgba(48, 39, 20, 0.82), rgba(34, 28, 16, 0.76)) !important;
}
:root[data-theme="light"] .sa-requests [data-garden-id="tables.row"].sa-needs-survey {
  border-color: rgba(190, 140, 20, 0.42) !important;
  background: linear-gradient(105deg, rgba(255, 248, 225, 0.92), rgba(255, 243, 212, 0.85)) !important;
}
/* Survey status pill on a request card. initSurveyHighlight() stamps
   data-survey = pending | good | bad on the row; the pill is a ::before flex item
   (order 6.5 -> bottom-right of the card, under the Solved status pill) so nothing
   is injected into Garden's React-managed row - robust across its re-renders.
   Pending = amber (matches the .sa-needs-survey card); Good = green, Bad = red. */
.sa-requests [data-garden-id="tables.row"][data-survey]::before {
  order: 7;
  margin-left: auto;
  align-self: center;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.sa-requests [data-garden-id="tables.row"][data-survey="pending"]::before {
  content: "Survey Requested";
  background: rgba(255, 194, 75, 0.16); color: #FFC24B; border-color: rgba(255, 194, 75, 0.5);
}
.sa-requests [data-garden-id="tables.row"][data-survey="good"]::before {
  content: "Survey Answered - Good";
  background: rgba(75, 212, 136, 0.16); color: #4BD488; border-color: rgba(75, 212, 136, 0.5);
}
.sa-requests [data-garden-id="tables.row"][data-survey="bad"]::before {
  content: "Survey Answered - Bad";
  background: rgba(240, 110, 110, 0.16); color: #F06E6E; border-color: rgba(240, 110, 110, 0.5);
}
:root[data-theme="light"] .sa-requests [data-garden-id="tables.row"][data-survey="pending"]::before {
  background: rgba(190, 140, 20, 0.12); color: #8A5A00; border-color: rgba(190, 140, 20, 0.45);
}
:root[data-theme="light"] .sa-requests [data-garden-id="tables.row"][data-survey="good"]::before {
  background: rgba(30, 142, 79, 0.12); color: #1E8E4F; border-color: rgba(30, 142, 79, 0.45);
}
:root[data-theme="light"] .sa-requests [data-garden-id="tables.row"][data-survey="bad"]::before {
  background: rgba(195, 58, 44, 0.12); color: #C33A2C; border-color: rgba(195, 58, 44, 0.45);
}
/* strip Garden's cell chrome */
.sa-requests [data-garden-id="tables.cell"] {
  border: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}
/* SUBJECT: the prominent title, fills the rest of line 1 */
.sa-requests td[data-test-id="table-cell-subject"] {
  order: 1;
  flex: 1 1 55%;
  min-width: 200px;
}
.sa-requests td[data-test-id="table-cell-subject"] [data-garden-id="buttons.anchor"] {
  display: inline;
  position: static !important;
  padding: 0 !important;
  color: var(--t-text) !important;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}
.sa-requests td[data-test-id="table-cell-subject"] [data-garden-id="buttons.anchor"]:hover {
  color: var(--t-link) !important;
}
/* Stretched link: the subject anchor's pseudo covers the whole card so a click
   anywhere on the card opens the case (the anchor is static, so this positions
   against the row, which is position:relative). */
.sa-requests td[data-test-id="table-cell-subject"] [data-garden-id="buttons.anchor"]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.sa-requests td[data-test-id="table-cell-subject"] [data-garden-id="typography.ellipsis"] {
  white-space: normal !important; /* let long subjects wrap inside the card */
}
/* STATUS: pill at the right of line 1 (Garden's Open/Solved colour kept) */
.sa-requests td[data-test-id="table-cell-status"] {
  order: 2;
  margin-left: auto;
}
/* Force a line break after the subject/status row so the meta always sits on
   its own second line, however wide the card is: a zero-height, full-width
   flex item (the row's own ::after) between order 2 and the meta at order 4+. */
.sa-requests [data-garden-id="tables.row"]::after {
  content: "";
  order: 3;
  flex: 0 0 100%;
  height: 0;
}
/* META line: id / created / updated, muted, on line 2 */
.sa-requests td[data-test-id="table-cell-id"],
.sa-requests td[data-test-id="table-cell-created_at"],
.sa-requests td[data-test-id="table-cell-updated_at"] {
  display: flex;
  align-items: baseline;
  gap: 5px;
  flex: 0 0 auto;
  font-size: 13.5px;
  color: var(--t-text-muted);
}
.sa-requests td[data-test-id="table-cell-id"] { order: 4; }
.sa-requests td[data-test-id="table-cell-created_at"] { order: 5; }
.sa-requests td[data-test-id="table-cell-updated_at"] { order: 6; }
.sa-requests td[data-test-id="table-cell-created_at"]::before { content: "Created"; opacity: 0.72; }
.sa-requests td[data-test-id="table-cell-updated_at"]::before { content: "Updated"; opacity: 0.72; }
/* the trailing empty overflow cell in each row */
.sa-requests [data-garden-id="tables.row"] td[data-garden-id="tables.cell"]:last-child {
  display: none !important;
}

/* Filter modal (the Garden "Filters" dialog) - its selected-value chip is
   Garden's NEUTRAL tag with a hardcoded light-grey background, which showed as
   light-on-light (invisible) on the dark modal (confirmed live: bg #E8EAEC,
   text #D1E4EB). Repaint it as a dark chip. Scoped to the modal so the coloured
   Open/Solved status pills in the cards (also tags.tag_view, but outside the
   modal) are untouched. */
.sa-requests [data-garden-id="modals.modal"] [data-garden-id="tags.tag_view"] {
  background: var(--t-surface-hover) !important;
  color: var(--t-text) !important;
}
:root[data-theme="light"] .sa-requests [data-garden-id="modals.modal"] [data-garden-id="tags.tag_view"] {
  background: var(--t-surface-subtle-5) !important;
  color: var(--t-text) !important;
}

/* Request tabs (My requests / CC'd / Organizational): Garden's SELECTED tab
   defaults to a muted grey (faint), the opposite of what you'd want. Make all
   tab labels full-contrast in both themes, active one bold. */
.sa-requests [data-garden-id="tabs.tab"] {
  color: var(--t-text) !important;
  font-weight: 600 !important;
}
.sa-requests [data-garden-id="tabs.tab"][aria-selected="true"] {
  color: var(--t-text) !important;
  font-weight: 700 !important;
}

/* Nav Knowledge Base / Documentation labels read a little soft on the pale
   light-mode nav pill - darken and slightly bolden them (light mode only; dark
   mode already uses bright text). */
:root[data-theme="light"] .site-nav-links .kb-toggle {
  color: #0A1620 !important;
  font-weight: 600 !important;
}

/* Category page hero search: submit=false left Enter-to-search non-functional
   (form never actually submits, with or without instant mode), but a real
   submit control overflows .hero-inner's fixed max-width - Copenhagen's
   .search-full CSS was never built to size one (every stock usage pairs
   search-full with submit=false). Keep the control in the DOM so Enter
   still works via native implicit form submission, just hide it visually. */
.hero input[type="submit"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* Category page section CARDS - icon + title + description cards in the same
   visual language as the Knowledge Base mega-menu, replacing the old cyan
   pills. Scoped to .section-tree so it doesn't touch .blocks-item usage
   elsewhere (community topics, etc). Placed at the end of the stylesheet so
   it wins over the earlier grid/pill .section-tree sizing rules. */
.section-tree .blocks-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px;
  max-width: 820px;
  margin: 0 auto;
}
.section-tree .blocks-item {
  flex: initial;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  /* Translucent glass fill so the (upcoming) hero background shows through,
     matching secureauth.com's stat cards. */
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--t-text);
  margin: 0;
}
:root[data-theme="light"] .section-tree .blocks-item {
  background: rgba(20, 30, 38, 0.03);
  border-color: rgba(20, 30, 38, 0.1);
}
.section-tree .blocks-item:hover,
.section-tree .blocks-item:focus,
.section-tree .blocks-item:active {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.2);
}
:root[data-theme="light"] .section-tree .blocks-item:hover,
:root[data-theme="light"] .section-tree .blocks-item:focus,
:root[data-theme="light"] .section-tree .blocks-item:active {
  background-color: rgba(20, 30, 38, 0.06);
  border-color: rgba(20, 30, 38, 0.2);
}
:root[data-theme="light"] .section-tree .blocks-item:hover,
:root[data-theme="light"] .section-tree .blocks-item:focus,
:root[data-theme="light"] .section-tree .blocks-item:active {
  border-color: rgba(20, 30, 38, 0.18);
}
.section-tree .blocks-item-link {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  padding: 18px 20px;
  color: var(--t-text);
  text-align: left;
}
.section-tree .blocks-item-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--t-surface-hover);
  color: var(--t-link);
}
.section-tree .blocks-item:hover .blocks-item-icon,
.section-tree .blocks-item:focus .blocks-item-icon {
  background: var(--t-elevated);
  color: var(--t-brand-text);
}
.section-tree .blocks-item-icon svg {
  width: 24px;
  height: 24px;
}
.section-tree .blocks-item-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.section-tree .blocks-item-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--t-text);
  white-space: normal;
}
.section-tree .blocks-item-description {
  display: block;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--t-text-muted);
}

/* Category page: center the title/description to match the now-centered
   pill row beneath it, instead of a left-aligned heading over a centered
   cluster. Scoped to .category-content so article/section page headers
   are untouched. */
.category-content .page-header {
  text-align: center;
  color: var(--t-pill-bg);
}
:root[data-theme="light"] .category-content .page-header {
  color: var(--t-pill-text);
}

/* ---- Comment author filter (request page): All / Customer / SecureAuth ---- */
.sa-cfilter {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 20px;
}
.sa-cfilter-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--t-text-muted);
  margin-right: 2px;
}
.sa-cfilter-btn {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--t-surface-subtle-3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--t-text) !important;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.sa-cfilter-btn:hover {
  background: var(--t-surface-hover);
}
.sa-cfilter-btn--active {
  background: var(--t-pill-bg);
  color: var(--t-pill-text) !important;
  border-color: transparent;
}
:root[data-theme="light"] .sa-cfilter-btn {
  border-color: rgba(20, 30, 38, 0.14);
}
.comment-list[data-cfilter="customer"] .comment.comment--agent {
  display: none;
}
.comment-list[data-cfilter="agent"] .comment:not(.comment--agent) {
  display: none;
}
.comment-list[data-cfilter="attachments"] .comment:not(.comment--has-attachments) {
  display: none;
}
.comment-list__empty {
  list-style: none;
  color: var(--t-text-muted);
  font-style: italic;
  padding: 14px 2px 4px;
}
/***** Featured promoted article in the top nav *****/
.site-nav-links .nav-featured {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 420px;
  margin-left: 6px;
  padding: 7px 16px 7px 8px;
  border: 1px solid #FFD34D;
  border-radius: 999px;
  color: var(--t-text);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.site-nav-links .nav-featured:visited {
  color: var(--t-text);
}
.site-nav-links .nav-featured:hover,
.site-nav-links .nav-featured:focus {
  background-color: var(--t-surface-hover);
  color: var(--t-surface-hover-fg);
  text-decoration: none;
}
.site-nav-links .nav-featured[hidden],
[data-sa-featured-item][hidden] {
  display: none;
}
.nav-featured__badge {
  flex: none;
  padding: 2px 10px;
  border-radius: 999px;
  background: #FFD34D;
  color: #3D2E00;
  font-size: 12px;
  font-weight: 600;
}
.nav-featured__title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 1200px) {
  .site-nav-links .nav-featured {
    padding-right: 8px;
  }
  .site-nav-links .nav-featured .nav-featured__title {
    display: none;
  }
}

/* Awaiting-reply badge, unread markers and mark-read controls */
.sa-await-badge{position:absolute;top:-7px;right:-7px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:#E7A83A;color:#1a1206;font-size:11.5px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px var(--t-bg)}
.sa-requests [data-garden-id="tables.row"].sa-row-new{box-shadow:inset 4px 0 0 var(--t-link)}
.sa-requests [data-garden-id="tables.row"].sa-row-new td[data-test-id="table-cell-subject"]::before{content:"New";display:block;width:-moz-fit-content;width:fit-content;margin:0 0 8px;padding:2px 8px;border-radius:999px;background:var(--t-pill-bg);color:var(--t-pill-text);font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
.sa-markall{margin-left:auto;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;border:none;background:transparent;color:var(--t-link);text-decoration:underline;padding:6px 4px}
.sa-unread-bar{display:flex;align-items:center;gap:12px;margin:0 0 16px;padding:12px 16px;border-radius:14px;background:var(--t-surface-subtle-3);border:1px solid var(--t-link);color:var(--t-text)}
.sa-unread-bar .ub-dot{width:9px;height:9px;border-radius:50%;background:var(--t-link);flex:none}
.sa-unread-bar b{color:var(--t-link)}
.sa-markread-btn{margin-left:auto;font:inherit;font-size:13px;font-weight:700;cursor:pointer;border:1px solid var(--t-link);background:transparent;color:var(--t-link);border-radius:999px;padding:6px 15px}
.sa-new-divider{list-style:none;display:flex;align-items:center;gap:10px;margin:8px 0 14px;color:var(--t-link);font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
.sa-new-divider::before,.sa-new-divider::after{content:"";flex:1;height:1px;background:var(--t-link);opacity:.35}
.comment.sa-comment-new{box-shadow:inset 3px 0 0 var(--t-link)}
.sa-pin-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:999px;background:var(--t-surface-subtle-3);border:1px solid rgba(255,255,255,.1);color:var(--t-text);font-size:12.5px;font-weight:600;line-height:1;cursor:pointer;font-family:inherit;transition:background .15s ease,color .15s ease,border-color .15s ease}
.sa-pin-btn:hover{background:var(--t-surface-hover)}
.sa-pin-btn--active{background:var(--t-pill-bg);color:var(--t-pill-text);border-color:transparent}
:root[data-theme="light"] .sa-pin-btn{border-color:rgba(20,30,38,.14)}
/* Requests list search field + Filter button rounded to match the theme */
.sa-requests [data-garden-id="forms.faux_input"]{border-radius:999px !important;background:var(--t-surface-subtle-3) !important;border:1px solid rgba(255,255,255,.12) !important;padding-left:18px !important}
.sa-requests [data-garden-id="forms.faux_input"]:focus-within{border-color:rgba(117,227,255,.45) !important}
:root[data-theme="light"] .sa-requests [data-garden-id="forms.faux_input"]{border-color:rgba(20,30,38,.14) !important}
.sa-requests [data-garden-id="buttons.button"]{border-radius:999px !important;background:var(--t-surface-subtle-3) !important;border:1px solid rgba(255,255,255,.12) !important;color:var(--t-text) !important;font-weight:600 !important;padding:0 20px !important}
.sa-requests [data-garden-id="buttons.button"]:hover{background:var(--t-surface-hover) !important}
:root[data-theme="light"] .sa-requests [data-garden-id="buttons.button"]{border-color:rgba(20,30,38,.14) !important}
/* Status badges (Awaiting reply / Solved) rounded to full pills */
.sa-requests td[data-test-id="table-cell-status"] [data-garden-id="tags.tag_view"]{border-radius:999px !important;padding-left:12px !important;padding-right:12px !important}

/***** Promoted spotlight: label pills (Hot Topic red, Featured gold) *****/
.sa-promoted__item.has-hot:not(.is-featured) .sa-promoted__pill,
.sa-promoted__item.has-featured:not(.is-featured) .sa-promoted__pill {
  display: inline-block;
  align-self: flex-start;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}
.sa-promoted__item.has-featured:not(.is-featured) .sa-promoted__pill {
  background: #FFD34D;
  color: #3D2E00;
}
.sa-promoted__item.has-featured:not(.is-featured) .sa-promoted__pill::before {
  content: "\2605";
  margin-right: 4px;
}
.sa-promoted__item.has-hot .sa-promoted__pill,
.sa-promoted__item.is-featured.has-hot .sa-promoted__pill {
  background: #C9302C;
  color: #FFFFFF;
}
.sa-promoted__item.has-hot .sa-promoted__pill::before,
.sa-promoted__item.is-featured.has-hot .sa-promoted__pill::before {
  content: none;
}
.sa-promoted__item.is-featured.has-hot .sa-promoted__card {
  border-color: #E5484D;
}
.site-nav-links .nav-featured.is-hot {
  border-color: #E5484D;
}
[data-sa-featured-link].is-hot .nav-featured__badge {
  background: #C9302C;
  color: #FFFFFF;
}

/***** Announcements: label pills (Hot Topic red, Featured gold) *****/
.sa-announcements__list {
  visibility: hidden;
  animation: sa-promoted-reveal 0s linear 1.5s forwards;
}
.sa-announcements__list.is-ready {
  visibility: visible;
  animation: none;
}
.sa-announcement.has-hot::before,
.sa-announcement.has-featured::before {
  align-self: flex-start;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}
.sa-announcement:first-child.has-hot::before,
.sa-announcement:first-child.has-featured::before {
  padding: 2px 10px;
  font-size: 12px;
}
.sa-announcement.has-hot::before {
  content: "Hot Topic";
  background: #C9302C;
  color: #FFFFFF;
}
.sa-announcement.has-featured::before {
  content: "\2605  Featured";
  background: #FFD34D;
  color: #3D2E00;
}
.sa-announcement.has-hot {
  border-color: #E5484D;
}

/***** Hot Topic flame icon (white outline flame inside the red pills) *****/
:root {
  --sa-flame: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 10.941c2.333 -3.308 .167 -7.823 -1 -8.941c0 3.395 -2.235 5.299 -3.667 6.706c-1.43 1.408 -2.333 3.621 -2.333 5.588c0 3.704 3.134 6.706 7 6.706s7 -3.002 7 -6.706c0 -1.712 -1.232 -4.403 -2.333 -5.588c-2.084 3.353 -3.257 3.353 -4.667 2.235'/%3E%3C/svg%3E");
}
.sa-promoted__item.has-hot:not(.is-featured) .sa-promoted__pill,
.sa-announcement.has-hot::before {
  background-image: var(--sa-flame);
  background-repeat: no-repeat;
  background-position: 6px center;
  background-size: 10px 10px;
  padding-left: 20px;
}
.sa-promoted__item.is-featured.has-hot .sa-promoted__pill,
.sa-announcement:first-child.has-hot::before,
[data-sa-featured-link].is-hot .nav-featured__badge {
  background-image: var(--sa-flame);
  background-repeat: no-repeat;
  background-position: 8px center;
  background-size: 12px 12px;
  padding-left: 24px;
}

/***** Hot Topic / Featured pills in KB lists (sized like the Bug Open/Fixed pills) *****/
.sa-label-pill {
  flex-shrink: 0;
  align-self: center;
  margin-left: 10px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}
.sa-label-pill--featured {
  background: #FFD34D;
  color: #3D2E00;
}
.sa-label-pill--featured::before {
  content: "\2605";
  margin-right: 4px;
}
.sa-label-pill--hot {
  padding-left: 26px;
  background-color: #C9302C;
  background-image: var(--sa-flame);
  background-repeat: no-repeat;
  background-position: 10px center;
  background-size: 12px 12px;
  color: #FFFFFF;
}

/***** Hot Topic / Featured pill on the article page (own line above the title) *****/
.sa-article-flag {
  width: 100%;
  margin-bottom: 12px;
}
.sa-article-pill {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}
.sa-article-pill--hot {
  padding-left: 28px;
  background-color: #C9302C;
  background-image: var(--sa-flame);
  background-repeat: no-repeat;
  background-position: 10px center;
  background-size: 12px 12px;
  color: #FFFFFF;
}
.sa-article-pill--featured {
  background: #FFD34D;
  color: #3D2E00;
}
.sa-article-pill--featured::before {
  content: "\2605";
  margin-right: 4px;
}

/***** Pills on narrow screens: pill text always stays inside its pill *****/
/* Cause: rows squeezed their pills (the Applies to / Deployment model row could not wrap, and KB list rows
   keep pills beside the title), and pills were allowed to break their text across lines, so the text ran
   outside the pill. Pills are now a single line that never shrinks, and rows move pills to a new line instead. */
.tags {
  flex-wrap: wrap;
  max-width: 100%;
}
.tags > b {
  white-space: nowrap;
}
.tag,
.bug-status-pill,
.sa-card-product,
.sa-label-pill,
.sa-article-pill,
.sa-promoted__pill,
.nav-featured__badge {
  flex-shrink: 0;
}
.tag,
.bug-status-pill,
.sa-card-product,
.sa-label-pill,
.sa-article-pill,
.sa-promoted__pill,
.nav-featured__badge,
#new-request-form .sa-nrf-signed .pill,
#new-request-form .sa-nrf-chips .c {
  box-sizing: border-box;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav-featured__badge {
  display: inline-block;
}
.status-label,
.sa-requests .sa-sort-pill,
.sa-announcement::before {
  white-space: nowrap;
}
/* Phones: in KB lists (sections, Bugs, search results) the pills move to their own line under the title,
   so the title keeps its width. The product label in search results gets its own line too. */
@media (max-width: 600px) {
  .article-list-item .article-list-link {
    flex-wrap: wrap;
    row-gap: 8px;
    column-gap: 12px;
    padding-left: 12px;
    padding-right: 12px;
  }
  .article-list-item .article-list-link .article-list-main {
    flex: 1 1 calc(100% - 76px);
  }
  .article-list-item .article-list-link .article-list-chevron {
    order: 1;
  }
  .article-list-item .article-list-link .sa-label-pill,
  .article-list-item .article-list-link .bug-status-pill {
    order: 2;
    margin-left: 0;
  }
  .article-list-item .article-list-link .article-list-main + .sa-label-pill,
  .article-list-item .article-list-link .article-list-main + .bug-status-pill {
    margin-left: 50px;
  }
  .sa-card-product {
    display: block;
    width: -moz-fit-content;
    width: fit-content;
    margin: 4px 0 0;
  }
}

/***** Breadcrumbs on narrow screens: whole crumbs wrap onto a new line instead of running off the screen *****/
.breadcrumbs {
  flex-wrap: wrap;
  row-gap: 4px;
}
@media (max-width: 767px) {
  .breadcrumbs li {
    max-width: 100%;
  }
}

/***** Nav bar on very small phones: tighter spacing so the logo and the menu button fit inside the bar *****/
@media (max-width: 359px) {
  .site-nav {
    padding-left: 12px;
    padding-right: 12px;
  }
  .site-nav-pill {
    gap: 12px;
    padding-left: 16px;
    padding-right: 10px;
  }
}