/* Lovescape Help Center 1.4.1
   Generated by tools/build_css.py from src/css/ -- do not edit directly.
   Layer order: 00-tokens.css 10-copenhagen.css 20-foundation.css 30-home.css 40-article.css 50-pages.css 60-settings-bridge.css
*/

/* ===== 00-tokens.css ===== */
/* =========================================================================
   Lovescape Help Center — design tokens
   -------------------------------------------------------------------------
   Dark is the default because the product is dark. Light is served to
   readers whose OS asks for it, and to anyone who flips the toggle in the
   header; the choice is remembered in localStorage.

   Every colour below is a plain hex, and every value is one a Sass pass
   can carry through untouched. Zendesk compiles style.css through Sass, so
   a clever colour function or cascade layer here risks failing the whole
   compile rather than degrading in one rule. Keep it boring.
   ========================================================================= */

:root {
  /* Type ------------------------------------------------------------------ */
  --ls-font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --ls-font-prose: "Source Serif 4", Georgia, "Times New Roman", serif;
  --ls-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text",
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ls-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --ls-step--1: 0.8125rem;   /* 13px — meta, labels */
  --ls-step-0: 0.9375rem;    /* 15px — UI text */
  --ls-step-1: 1.0625rem;    /* 17px — prose */
  --ls-step-2: 1.375rem;     /* 22px — h3 */
  --ls-step-3: 1.75rem;      /* 28px — h2 */
  --ls-step-4: 2.25rem;      /* 36px — article h1 */
  --ls-step-5: clamp(2rem, 1.35rem + 2.8vw, 3.5rem); /* hero */

  /* Space & shape --------------------------------------------------------- */
  /* The one page width. The header and footer keep full-bleed backgrounds
     but align their contents to this, so nothing sits on a second grid. */
  --ls-max: 1320px;
  /* In rem, not ch: a ch-based measure is re-measured when the web font
     swaps in, which moves the whole column. 40rem is ~72 characters of
     Source Serif at 17px. */
  --ls-measure: 40rem;
  --ls-radius: 14px;
  --ls-radius-sm: 9px;
  --ls-radius-pill: 999px;
  --ls-gutter: clamp(1rem, 0.5rem + 2vw, 2rem);

  /* Motion ---------------------------------------------------------------- */
  --ls-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ls-fast: 140ms;
  --ls-slow: 320ms;

  /* Dark palette (default) ------------------------------------------------ */
  --ls-bg: #0b0a12;          /* page ground: near-black with a plum bias */
  --ls-surface-1: #131120;   /* the base theme's 3% offset slot */
  --ls-surface-2: #1a1727;   /* the base theme's 5% offset slot */
  --ls-card: #14121f;
  --ls-card-hover: #1b1829;
  --ls-line: #262234;       /* dividers: decorative, deliberately quiet */
  /* Component boundaries -- inputs, buttons, the prompt field. These are the
     only thing identifying a control on this ground, so WCAG 1.4.11 asks for
     3:1 against both the page and a card. Verified by
     tools/check-contrast.py; do not quieten it to taste. */
  --ls-line-strong: #6b6585;

  --ls-text: #f2f0f7;
  --ls-text-muted: #a39fb4;

  /* The accent is scheme-independent, because it is admin-editable and one
     picker cannot sensibly produce two values. It has to clear three bars at
     once: white text on it (4.5:1), and it as a focus ring on both the dark
     and the light ground (3:1). #8557EE is the product's violet moved just
     far enough down to satisfy all three -- #8b5cf6 fails the first at
     4.23:1. The settings bridge re-declares these two from the manifest, so
     the light palette below must NOT redefine them or it would win on
     specificity and silently ignore the setting. */
  --ls-brand: #8557ee;
  --ls-brand-deep: #6d3ee8;
  --ls-brand-wash: #1a1430;  /* violet tint that survives on a dark ground */
  --ls-on-brand: #ffffff;

  --ls-link: #b79cff;
  --ls-link-hover: #d6c7ff;
  --ls-link-visited: #c6a8f0;

  /* Ember is reserved for generated output: result counts, confirmations.
     Interface = cool, output = warm. Do not spend it on decoration. */
  --ls-ember: #ff8a5b;
  --ls-ember-wash: #2a1710;

  --ls-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 12px 32px -12px rgba(0, 0, 0, 0.8);
  --ls-focus: 0 0 0 2px var(--ls-bg), 0 0 0 4px var(--ls-brand);
  --ls-scheme: dark;
}

/* Light palette. Applied when the OS asks for light and the reader has not
   overridden it, or when the toggle sets data-ls-theme="light". */
@media (prefers-color-scheme: light) {
  :root:not([data-ls-theme="dark"]) {
    --ls-bg: #f7f5fa;
    --ls-surface-1: #efecf5;
    --ls-surface-2: #e7e3ef;
    --ls-card: #ffffff;
    --ls-card-hover: #fbfaff;
    --ls-line: #e2deec;
    --ls-line-strong: #8f85a6;

    --ls-text: #14121f;
    --ls-text-muted: #605a72;

    /* Accent tokens are owned by the settings bridge; only the wash, which
       is a panel tint rather than the accent itself, changes by scheme. */
    --ls-brand-wash: #f1ebff;

    --ls-link: #5a2fd6;
    --ls-link-hover: #3d1aa8;
    --ls-link-visited: #7b4fb8;

    --ls-ember: #c2410c;
    --ls-ember-wash: #fff1e9;

    --ls-shadow: 0 1px 2px rgba(20, 18, 31, 0.06), 0 12px 28px -14px rgba(20, 18, 31, 0.18);
    --ls-scheme: light;
  }
}

:root[data-ls-theme="light"] {
  --ls-bg: #f7f5fa;
  --ls-surface-1: #efecf5;
  --ls-surface-2: #e7e3ef;
  --ls-card: #ffffff;
  --ls-card-hover: #fbfaff;
  --ls-line: #e2deec;
  --ls-line-strong: #8f85a6;

  --ls-text: #14121f;
  --ls-text-muted: #605a72;

  --ls-brand-wash: #f1ebff;

  --ls-link: #5a2fd6;
  --ls-link-hover: #3d1aa8;
  --ls-link-visited: #7b4fb8;

  --ls-ember: #c2410c;
  --ls-ember-wash: #fff1e9;

  --ls-shadow: 0 1px 2px rgba(20, 18, 31, 0.06), 0 12px 28px -14px rgba(20, 18, 31, 0.18);
  --ls-scheme: light;
}

:root[data-ls-theme="dark"] {
  --ls-scheme: dark;
}

html {
  color-scheme: var(--ls-scheme);
}

/* ===== 10-copenhagen.css ===== */
@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;
}

body {
  background-color: var(--ls-bg);
  color: var(--ls-text);
  font-family: var(--ls-font-body);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 1024px) {
  body > main {
    min-height: 65vh;
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--ls-font-display);
  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(--ls-link);
  text-decoration: none;
}
a:visited {
  color: var(--ls-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(--ls-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(--ls-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(--ls-brand);
}

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

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

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(--ls-brand);
  border-radius: 4px;
  color: var(--ls-brand);
  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(--ls-brand);
}
.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(--ls-brand);
  color: var(--ls-on-brand);
  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(--ls-brand-deep);
  border-color: var(--ls-brand-deep);
}
.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(--ls-brand);
  border: 0;
  border-radius: 4px;
  color: var(--ls-on-brand);
  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(--ls-on-brand);
}
.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(--ls-brand-deep);
}
.button-large[disabled], .hbs-form input[type=submit][disabled] {
  background-color: #ddd;
}

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

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

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

[dir=rtl] .split-button button:not(:only-child):first-child {
  border-left: 1px solid var(--ls-on-brand);
  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(--ls-on-brand);
  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(--ls-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(--ls-brand);
}

.form-field input[type=text] {
  border: 1px solid #848F99;
  border-radius: 4px;
}
.form-field input[type=text]:focus {
  border: 1px solid var(--ls-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(--ls-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(--ls-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(--ls-text-muted);
  margin-left: 4px;
}

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

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

.form footer a {
  color: var(--ls-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(--ls-link-visited);
}

/***** Header *****/
.header {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 5%;
  position: relative;
  align-items: center;
  display: flex;
  height: 71px;
  justify-content: space-between;
}
@media (min-width: 1160px) {
  .header {
    padding: 0;
    width: 90%;
  }
}

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

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

.logo a {
  display: inline-block;
}

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

.user-nav {
  display: inline-block;
  position: absolute;
  white-space: nowrap;
}
@media (min-width: 768px) {
  .user-nav {
    position: relative;
  }
}
.user-nav[aria-expanded=true] {
  background-color: #fff;
  box-shadow: 0 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(--ls-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(--ls-link);
  text-decoration: underline;
}

@media (min-width: 1024px) {
  .nav-wrapper-mobile {
    display: none;
  }
}
.nav-wrapper-mobile .menu-button-mobile {
  background: none;
  border: 0;
  width: auto;
  min-width: 71px;
  cursor: pointer;
}
.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: #f3f3f3;
}
.nav-wrapper-mobile .menu-list-mobile {
  position: absolute;
  background-color: #fff;
  box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.15);
  border-top: solid 1px #ddd;
  border-bottom: solid 1px #ddd;
  right: 0;
  left: 0;
  top: 71px;
  z-index: 2;
}
.nav-wrapper-mobile .menu-list-mobile[aria-expanded=false] {
  display: none;
}
.nav-wrapper-mobile .menu-list-mobile[aria-expanded=true] {
  display: block;
}
.nav-wrapper-mobile .menu-list-mobile-items .item {
  margin: 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: 0.1px solid #ddd;
  padding: 0;
}
.nav-wrapper-mobile .menu-list-mobile-items .nav-divider:last-child {
  display: none;
}
.nav-wrapper-mobile .menu-list-mobile-items button {
  background: none;
  border: none;
  padding: 8px 24px;
  width: 100%;
  height: 100%;
  color: var(--ls-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: #f3f3f3;
  text-decoration: underline;
}
.nav-wrapper-mobile .menu-list-mobile-items a {
  display: block;
  padding: 8px 24px;
  width: 100%;
  height: 100%;
  color: var(--ls-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: #f3f3f3;
}
.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(--ls-link);
  border: 1px solid var(--ls-link);
  border-radius: 4px;
  color: var(--ls-on-brand);
  display: inline-flex;
  font-size: 14px;
  font-weight: 600;
  gap: 6px;
  line-height: 1.4286;
  padding: 6px 14px;
}
.ask-ai:visited {
  color: var(--ls-on-brand);
}
.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(--ls-on-brand);
}
.nav-wrapper-desktop .ask-ai:hover, .nav-wrapper-desktop .ask-ai:focus, .nav-wrapper-desktop .ask-ai:active {
  background-color: var(--ls-link-hover);
  border-color: var(--ls-link-hover);
  color: var(--ls-on-brand);
  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(--ls-on-brand);
}
.nav-wrapper-mobile .ask-ai:hover, .nav-wrapper-mobile .ask-ai:focus, .nav-wrapper-mobile .ask-ai:active {
  background-color: var(--ls-link-hover);
  border-color: var(--ls-link-hover);
  color: var(--ls-on-brand);
  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(--ls-link);
  min-width: 0;
  padding: 0;
  white-space: nowrap;
}
.user-info > button:hover, .user-info > button:focus {
  color: var(--ls-link);
  background-color: transparent;
}
.user-info > button::after {
  color: var(--ls-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(--ls-brand);
  border: 2px solid #fff;
  border-radius: 50%;
  bottom: -4px;
  background-color: var(--ls-on-brand);
  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(--ls-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(--ls-text-muted);
  display: inline-block;
}

.powered-by-zendesk a,
.powered-by-zendesk a:visited {
  color: var(--ls-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(--ls-text-muted);
  font-size: 13px;
  max-width: 450px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.breadcrumbs li + li::before {
  content: ">";
  margin: 0 4px;
}
.breadcrumbs li a:visited {
  color: var(--ls-link);
}

/***** 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(--ls-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;
}
.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;
}
.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(--ls-brand);
  color: #fff;
}
.search .clear-button:focus {
  outline: 0;
  box-shadow: 0 0 0 3px var(--ls-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(--ls-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(--ls-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(--ls-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(--ls-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 *****/
.hero {
  background-image: url(/hc/theming_assets/01J0NT4DEZRC5G2BEAT5HKJJE0);
  background-position: center;
  background-size: cover;
  height: 300px;
  padding: 0 20px;
  text-align: center;
  width: 100%;
}
.hero-inner {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  max-width: 610px;
  margin: 0 auto;
}

.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;
  }
}
.page-header .section-subscribe {
  flex-shrink: 0;
  margin-bottom: 10px;
}
@media (min-width: 768px) {
  .page-header .section-subscribe {
    margin-bottom: 0;
  }
}
.page-header h1 {
  flex-grow: 1;
  margin-bottom: 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(--ls-brand);
  border-radius: 4px;
  box-sizing: border-box;
  color: var(--ls-brand);
  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(--ls-brand);
}
.blocks-item:hover *, .blocks-item:focus *, .blocks-item:active * {
  color: var(--ls-on-brand);
  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(--ls-text);
}
.blocks-item-link {
  color: var(--ls-brand);
  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(--ls-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 *****/
.section {
  margin-bottom: 40px;
}
@media (min-width: 768px) {
  .section {
    margin-bottom: 60px;
  }
}

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

/***** Promoted articles *****/
.promoted-articles {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
@media (min-width: 1024px) {
  .promoted-articles {
    flex-direction: row;
  }
}
.promoted-articles-item {
  flex: 1 0 auto;
}
@media (min-width: 1024px) {
  .promoted-articles-item {
    align-self: flex-end;
    flex: 0 0 auto;
    padding-right: 30px;
    width: 33%; /* Three columns on desktop */
  }
  [dir=rtl] .promoted-articles-item {
    padding: 0 0 0 30px;
  }
}
.promoted-articles-item:nth-child(3n) {
  padding-right: 0;
}
.promoted-articles-item a {
  display: block;
  border-bottom: 1px solid #ddd;
  padding: 15px 0;
}
.promoted-articles-item .icon-lock {
  vertical-align: baseline;
}
.promoted-articles-item:last-child a {
  border: 0;
}
@media (min-width: 1024px) {
  .promoted-articles-item:last-child a {
    border-bottom: 1px solid #ddd;
  }
}

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

.community,
.activity {
  border-top: 1px solid #ddd;
  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(--ls-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(--ls-link);
  text-decoration: underline;
}
.recent-activity-controls a:visited {
  color: var(--ls-link-visited);
}
.recent-activity-controls a:hover, .recent-activity-controls a:active, .recent-activity-controls a:focus {
  color: var(--ls-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(--ls-brand);
  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%;
}
@media (min-width: 1024px) {
  .category-content {
    flex: 0 0 80%;
  }
}

.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(--ls-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(--ls-text);
}

.icon-star {
  color: var(--ls-brand);
  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(--ls-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(--ls-link);
  text-decoration: underline;
}
.article-body a:visited {
  color: var(--ls-link-visited);
}
.article-body a:hover, .article-body a:active, .article-body a:focus {
  color: var(--ls-link-hover);
}
.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(--ls-surface-2);
}
.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(--ls-surface-1);
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}
.article-body pre {
  background: var(--ls-surface-1);
  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(--ls-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(--ls-text-muted);
}
.article-comment-count:hover {
  text-decoration: none;
}
.article-comment-count-icon {
  vertical-align: middle;
  color: var(--ls-brand);
  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(--ls-link);
  text-decoration: underline;
}
.article-more-questions a:visited {
  color: var(--ls-link-visited);
}
.article-more-questions a:hover, .article-more-questions a:active, .article-more-questions a:focus {
  color: var(--ls-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(--ls-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(--ls-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(--ls-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(--ls-text-muted);
}
.share a:hover {
  text-decoration: none;
  color: var(--ls-brand);
}
.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(--ls-text-muted);
  display: inline-block;
  font-size: 13px;
  margin-bottom: 0;
}
.comment-callout a {
  color: var(--ls-link);
  text-decoration: underline;
}
.comment-callout a:visited {
  color: var(--ls-link-visited);
}
.comment-callout a:hover, .comment-callout a:active, .comment-callout a:focus {
  color: var(--ls-link-hover);
}
.comment-sorter {
  display: inline-block;
  float: right;
}
.comment-sorter .dropdown-toggle {
  color: var(--ls-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(--ls-brand);
  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(--ls-brand);
}
.comment-body {
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  word-wrap: break-word;
  display: flow-root;
  font-family: var(--ls-font-body);
  line-height: 1.6;
  overflow-x: auto;
}
.comment-body a {
  color: var(--ls-link);
  text-decoration: underline;
}
.comment-body a:visited {
  color: var(--ls-link-visited);
}
.comment-body a:hover, .comment-body a:active, .comment-body a:focus {
  color: var(--ls-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(--ls-surface-2);
}
.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(--ls-surface-1);
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}
.comment-body pre {
  background: var(--ls-surface-1);
  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(--ls-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(--ls-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(--ls-brand);
}

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

.vote-voted {
  color: var(--ls-brand);
}

.vote-voted:hover {
  color: var(--ls-brand-deep);
}

/***** 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/01J0NT4DX7CAH773BKXD2WRGEH);
  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(--ls-brand);
}
.community-follow button:hover::after, .community-follow button:focus::after {
  border-color: var(--ls-on-brand);
  color: var(--ls-on-brand);
}
.community-follow button[data-selected=true] {
  background-color: var(--ls-brand);
  color: var(--ls-on-brand);
}
.community-follow button[data-selected=true]::after {
  border-left: 1px solid var(--ls-on-brand);
  color: var(--ls-on-brand);
}
.community-follow button[data-selected=true]:hover {
  background-color: var(--ls-brand-deep);
  border-color: var(--ls-brand-deep);
}
.community-follow button::after {
  border-left: 1px solid var(--ls-brand);
  content: attr(data-follower-count);
  color: var(--ls-brand);
  display: inline-block;
  font-family: var(--ls-font-display);
  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(--ls-brand);
  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(--ls-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(--ls-link-visited);
}
.striped-list .meta-group {
  margin: 5px 0;
}
.striped-list-count {
  color: var(--ls-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(--ls-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(--ls-brand);
}
.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(--ls-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: var(--ls-font-body);
  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(--ls-link);
  text-decoration: underline;
}
.post-body a:visited {
  color: var(--ls-link-visited);
}
.post-body a:hover, .post-body a:active, .post-body a:focus {
  color: var(--ls-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(--ls-surface-2);
}
.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(--ls-surface-1);
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}
.post-body pre {
  background: var(--ls-surface-1);
  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(--ls-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(--ls-text-muted);
}
.post-comment-count:hover {
  text-decoration: none;
}
.post-comment-count .icon-comments {
  color: var(--ls-brand);
  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(--ls-brand);
}

.collapsible-nav-list {
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  .collapsible-nav-list {
    flex-direction: row;
  }
}
.collapsible-nav-list li {
  color: var(--ls-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(--ls-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(--ls-brand);
    order: 1;
  }
}
.collapsible-nav-list li[aria-selected=true] a,
.collapsible-nav-list li.current a {
  color: var(--ls-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(--ls-brand);
}
.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(--ls-surface-2);
  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(--ls-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(--ls-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-bottom: 40px;
}
@media (min-width: 1024px) {
  .request-breadcrumbs {
    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(--ls-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(--ls-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(--ls-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(--ls-surface-1);
    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(--ls-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(--ls-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(--ls-surface-1);
}

.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(--ls-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(--ls-brand);
  border-radius: 4px;
  color: var(--ls-brand);
  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(--ls-surface-2);
  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(--ls-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(--ls-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(--ls-surface-1);
}
@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(--ls-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(--ls-text);
}
.search-results-sidebar .sidenav-item:hover, .search-results-sidebar .sidenav-item.current {
  background-color: #e9ebed;
  text-decoration: none;
}
.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(--ls-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(--ls-link);
}
.search-results .no-results .action-prompt a:visited {
  color: var(--ls-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(--ls-text-muted);
  font-size: 13px;
}
.search-result-votes-icon, .search-result-meta-count-icon {
  color: var(--ls-brand);
  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;
}

.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/01KEH46HRYV6CEVN20DYQSP8AG);
  margin-bottom: 10px;
  height: 320px;
}
.service-catalog-description {
  display: flow-root;
}
.service-catalog-description a {
  color: var(--ls-link);
  text-decoration: underline;
}
.service-catalog-description a:visited {
  color: var(--ls-link-visited);
}
.service-catalog-description a:hover, .service-catalog-description a:active, .service-catalog-description a:focus {
  color: var(--ls-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(--ls-surface-2);
}
.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(--ls-surface-1);
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}
.service-catalog-description pre {
  background: var(--ls-surface-1);
  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(--ls-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;
}
/* ===== 20-foundation.css ===== */
/* =========================================================================
   Foundation — sits on top of the Copenhagen base
   ========================================================================= */

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

html { scroll-behavior: smooth; }

body {
  background-color: var(--ls-bg);
  color: var(--ls-text);
  font-family: var(--ls-font-body);
  font-size: var(--ls-step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ls-font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ls-text);
  text-wrap: balance;
}

a { color: var(--ls-link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--ls-link-hover); }
a:visited { color: var(--ls-link-visited); }

::selection { background: var(--ls-brand); color: var(--ls-on-brand); }

:focus-visible {
  outline: none;
  box-shadow: var(--ls-focus);
  border-radius: var(--ls-radius-sm);
}

hr, .container-divider { border: 0; border-top: 1px solid var(--ls-line); margin: 0; height: 0; background: none; }

/* =========================================================================
   The page grid
   -------------------------------------------------------------------------
   The base theme gives .container, .header, .footer-inner and .error-page
   `max-width: 1160px` and then, in a second rule, `width: 90%`. The width
   wins whenever 90% of the window is the smaller number, so the page was
   never wider than 90% of the viewport and any max-width set here could not
   take effect. `width: auto` is what releases it -- do not drop it.

   Every one of these uses the same three declarations, so the logo, the
   section headings and the footer links all land on the same left edge. --}}
   ========================================================================= */
.container,
.header-inner,
.footer-inner,
.error-page {
  width: auto;
  max-width: var(--ls-max);
  margin-inline: auto;
  padding-inline: var(--ls-gutter);
}

/* A single shared eyebrow: small, tracked-out, muted. Used for section
   labels so the page has one consistent way of naming a region. */
.ls-eyebrow {
  font-family: var(--ls-font-body);
  font-size: var(--ls-step--1);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ls-text-muted);
  margin: 0 0 0.75rem;
}

/* Buttons ---------------------------------------------------------------- */
.ls-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.125rem;
  border-radius: var(--ls-radius-pill);
  border: 1px solid var(--ls-line-strong);
  background: transparent;
  color: var(--ls-text);
  font-family: inherit;
  font-size: var(--ls-step-0);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--ls-fast) var(--ls-ease),
              border-color var(--ls-fast) var(--ls-ease),
              transform var(--ls-fast) var(--ls-ease);
}
.ls-btn:hover { background: var(--ls-card-hover); border-color: var(--ls-brand); color: var(--ls-text); }
.ls-btn:active { transform: translateY(1px); }

.ls-btn--primary {
  background: var(--ls-brand);
  border-color: var(--ls-brand);
  color: var(--ls-on-brand);
}
.ls-btn--primary:hover { background: var(--ls-brand-deep); border-color: var(--ls-brand-deep); color: var(--ls-on-brand); }

.ls-btn--quiet { border-color: transparent; color: var(--ls-text-muted); }
.ls-btn--quiet:hover { background: var(--ls-surface-1); color: var(--ls-text); }

/* Pills ------------------------------------------------------------------ */
.ls-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.3125rem 0.75rem;
  border-radius: var(--ls-radius-pill);
  border: 1px solid var(--ls-line);
  background: var(--ls-card);
  color: var(--ls-text-muted);
  font-size: var(--ls-step--1);
  font-weight: 500;
  text-decoration: none;
  transition: color var(--ls-fast) var(--ls-ease), border-color var(--ls-fast) var(--ls-ease);
}
.ls-pill:hover { color: var(--ls-text); border-color: var(--ls-brand); }

/* =========================================================================
   Top banner
   -------------------------------------------------------------------------
   Sits above the sticky header, so it scrolls away while the header stays.
   The art is 1440x46 and 375x46; scaling by width keeps the composition
   intact and lets the strip grow a little taller on a wide monitor, which
   reads better than cropping it.
   ========================================================================= */
.ls-banner {
  position: relative;
  display: block;
  width: 100%;
  /* The first stop of the art's own gradient. A sub-pixel rounding gap at
     the edges then shows banner blue rather than the page ground. */
  background: #2c85d9;
  line-height: 0;
}
/* Set in document_head before the first paint, so a strip the reader has
   already dismissed never appears and then disappears. */
html.ls-banner-off .ls-banner { display: none; }
.ls-banner-link { display: block; }
.ls-banner picture,
.ls-banner img {
  display: block;
  width: 100%;
  height: auto;
}

/* Laid exactly over the close button drawn into the art: a 32px circle
   flush to the right edge in both files. The art scales by width, so the
   overlay is sized as a fraction of it -- 32/375 narrow, 32/1440 wide. */
.ls-banner-close {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 8.5333%;
  padding: 0;
  border: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
@media (min-width: 768px) {
  .ls-banner-close { width: 2.2222%; }
}
.ls-banner-close:focus-visible { box-shadow: var(--ls-focus); }

/* =========================================================================
   Header
   ========================================================================= */
.header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: block;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  background: var(--ls-bg);
  border-bottom: 1px solid var(--ls-line);
}
/* The bar spans the window; its contents line up with .container, so the
   logo sits directly above the first section heading instead of 70px to its
   left. */
.header-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-block: 0.75rem;
}

/* The reading-progress hairline lives on the header's bottom edge, so it
   reads as the page filling up rather than as a separate widget. */
.ls-progress {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 0;
  background: var(--ls-brand);
  transition: width 80ms linear;
  pointer-events: none;
}

.header .logo { display: flex; align-items: center; gap: 0.625rem; height: auto; margin: 0; }
.header .logo a { display: flex; align-items: center; gap: 0.625rem; text-decoration: none; color: var(--ls-text); }
.header .logo img { max-height: 26px; width: auto; }
/* The shipped mark is black. Both variants are served and CSS picks one, so
   flipping the appearance switch does not flash the wrong logo. */
.header .logo .ls-logo-light { display: none; }
.header .logo .ls-logo-dark { display: block; }
:root[data-ls-theme="light"] .header .logo .ls-logo-light { display: block; }
:root[data-ls-theme="light"] .header .logo .ls-logo-dark { display: none; }
@media (prefers-color-scheme: light) {
  :root:not([data-ls-theme="dark"]) .header .logo .ls-logo-light { display: block; }
  :root:not([data-ls-theme="dark"]) .header .logo .ls-logo-dark { display: none; }
}

/* "Help" is the route home inside the help centre; the mark beside it leaves
   for the product. Two destinations, so it reads as a link, not a label. */
.header .logo .ls-logo-help {
  font-family: var(--ls-font-display);
  font-weight: 700;
  font-size: var(--ls-step-0);
  letter-spacing: -0.01em;
  color: var(--ls-text-muted);
  padding: 0.25rem 0.375rem;
  border-radius: var(--ls-radius-sm);
}
.header .logo .ls-logo-help:hover { color: var(--ls-text); background: var(--ls-surface-1); }

.header-inner .nav-wrapper-desktop { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }
.user-nav { display: flex; }
.user-nav-list { display: flex; align-items: center; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }
.user-nav-list a {
  display: inline-flex;
  padding: 0.5rem 0.75rem;
  border-radius: var(--ls-radius-sm);
  color: var(--ls-text-muted);
  font-weight: 500;
  text-decoration: none;
  border: 0;
}
.user-nav-list a:hover { background: var(--ls-surface-1); color: var(--ls-text); }
/* "Submit a request" is the only call to action left in the bar, so it takes
   the accent rather than an outline. Sign-in was removed from the header;
   Guide still prompts for it on the pages that need it, and the unauthorized
   error page keeps its own link. */
.user-nav-list a.submit-a-request {
  border: 1px solid var(--ls-brand);
  border-radius: var(--ls-radius-pill);
  background: var(--ls-brand);
  color: var(--ls-on-brand);
}
.user-nav-list a.submit-a-request:hover {
  background: var(--ls-brand-deep);
  border-color: var(--ls-brand-deep);
  color: var(--ls-on-brand);
}

.ask-ai {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.875rem;
  border-radius: var(--ls-radius-pill);
  border: 1px solid var(--ls-brand);
  background: var(--ls-brand-wash);
  color: var(--ls-link);
  font-weight: 600;
  text-decoration: none;
}
.ask-ai:hover { background: var(--ls-brand); color: var(--ls-on-brand); }
.ask-ai:hover .ask-ai-icon { color: var(--ls-on-brand); }

/* Theme toggle ----------------------------------------------------------- */
.ls-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: var(--ls-radius-pill);
  border: 1px solid var(--ls-line);
  background: transparent;
  color: var(--ls-text-muted);
  cursor: pointer;
}
.ls-theme-toggle:hover { color: var(--ls-text); border-color: var(--ls-line-strong); background: var(--ls-surface-1); }
.ls-theme-toggle .ls-icon-sun { display: none; }
.ls-theme-toggle .ls-icon-moon { display: block; }
:root[data-ls-theme="light"] .ls-theme-toggle .ls-icon-sun { display: block; }
:root[data-ls-theme="light"] .ls-theme-toggle .ls-icon-moon { display: none; }
@media (prefers-color-scheme: light) {
  :root:not([data-ls-theme="dark"]) .ls-theme-toggle .ls-icon-sun { display: block; }
  :root:not([data-ls-theme="dark"]) .ls-theme-toggle .ls-icon-moon { display: none; }
}

/* Dropdowns (kept on Copenhagen's markup and JS) ------------------------- */
.dropdown-menu {
  background: var(--ls-card);
  border: 1px solid var(--ls-line);
  border-radius: var(--ls-radius);
  box-shadow: var(--ls-shadow);
  padding: 0.375rem;
}
.dropdown-menu a,
.dropdown-menu [role="menuitem"] {
  border-radius: var(--ls-radius-sm);
  color: var(--ls-text);
  padding: 0.5rem 0.75rem;
}
.dropdown-menu a:hover,
.dropdown-menu [role="menuitem"]:hover { background: var(--ls-surface-2); color: var(--ls-text); }
.dropdown-toggle { color: var(--ls-text-muted); }
.separator { border-top: 1px solid var(--ls-line); margin: 0.375rem 0; }

/* Mobile nav ------------------------------------------------------------- */
.nav-wrapper-mobile { margin-left: auto; }
.menu-button-mobile {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  border: 1px solid var(--ls-line);
  border-radius: var(--ls-radius-sm);
  background: transparent;
  color: var(--ls-text);
}
.menu-list-mobile {
  background: var(--ls-card);
  border: 1px solid var(--ls-line);
  border-radius: var(--ls-radius);
  box-shadow: var(--ls-shadow);
}
.menu-list-mobile .item a { color: var(--ls-text); }
.nav-divider { border-top: 1px solid var(--ls-line); }

@media (max-width: 900px) {
  .header-inner .nav-wrapper-desktop { display: none; }
  .nav-wrapper-mobile { display: flex; align-items: center; gap: 0.5rem; }
}
@media (min-width: 901px) {
  .nav-wrapper-mobile { display: none; }
}

/* =========================================================================
   Footer
   ========================================================================= */
.footer {
  /* This help centre's pages are short; a 4rem lead-in plus 3rem of padding
     made the footer the tallest thing on the home page. */
  margin-top: 2.5rem;
  padding: 1.75rem 0 2rem;
  background: var(--ls-surface-1);
  border-top: 1px solid var(--ls-line);
  color: var(--ls-text-muted);
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
}
.footer a { color: var(--ls-text-muted); }
.footer a:hover { color: var(--ls-text); }
.footer-language-selector { margin-left: auto; }

.ls-footer-links { display: flex; flex-wrap: wrap; gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.ls-footer-note {
  width: 100%;
  margin: 0.5rem 0 0;
  font-size: var(--ls-step--1);
  color: var(--ls-text-muted);
}
/* 18+ marker: stated plainly, once, where it belongs. */
.ls-age-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  padding: 0.125rem 0.5rem;
  margin-right: 0.5rem;
  border: 1px solid var(--ls-line-strong);
  border-radius: var(--ls-radius-sm);
  font-family: var(--ls-font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ls-text);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===== 30-home.css ===== */
/* =========================================================================
   Home page — hero prompt, instant results, categories
   -------------------------------------------------------------------------
   The hero is the signature. Lovescape's primary gesture is "describe what
   you want and get a result back", so the help centre's search is dressed
   as that same instrument: a prompt field with a live caret, results that
   resolve underneath it, and a warm count when they land.
   ========================================================================= */

/* The violet bloom is a background gradient rather than an absolutely
   positioned pseudo-element. A background is clipped by the element box for
   free, so the hero needs no overflow rule — and the results panel, which is
   absolutely positioned inside it, is no longer cut off at the hero's edge. */
.ls-hero {
  position: relative;
  padding: clamp(2rem, 1.25rem + 2.6vw, 3.75rem) var(--ls-gutter) clamp(1.25rem, 0.75rem + 1.4vw, 2rem);
  background-image: radial-gradient(
    58rem 30rem at 50% -12%,
    var(--ls-brand-wash) 0%,
    transparent 66%
  );
  background-repeat: no-repeat;
}

.ls-hero-inner { position: relative; max-width: 46rem; margin: 0 auto; text-align: center; }

.ls-hero h1 {
  font-size: var(--ls-step-5);
  letter-spacing: -0.035em;
  margin: 0 0 0.75rem;
}
.ls-hero-sub {
  margin: 0 auto 1.5rem;
  max-width: 34rem;
  font-size: var(--ls-step-1);
  color: var(--ls-text-muted);
}

/* The prompt ------------------------------------------------------------- */
.ls-prompt { position: relative; text-align: left; }

.ls-prompt-field {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0 0.75rem 0 1.125rem;
  background: var(--ls-card);
  border: 1px solid var(--ls-line-strong);
  border-radius: var(--ls-radius);
  box-shadow: var(--ls-shadow);
  transition: border-color var(--ls-fast) var(--ls-ease);
}
.ls-prompt-field:focus-within { border-color: var(--ls-brand); }

/* The caret: a violet bar that blinks until the reader starts typing. It is
   the tell that this field expects a sentence, not a keyword. */
.ls-prompt-caret {
  flex: none;
  width: 2px;
  height: 1.375rem;
  background: var(--ls-brand);
  border-radius: 1px;
  animation: ls-blink 1.1s steps(2, start) infinite;
}
.ls-prompt-field:focus-within .ls-prompt-caret,
.ls-prompt.is-dirty .ls-prompt-caret { animation: none; opacity: 0.35; }
@keyframes ls-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.15; } }

.ls-prompt .search,
.ls-prompt form[role="search"] {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 0;
  height: auto;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.ls-prompt input[type="search"] {
  width: 100%;
  /* The base theme pins .search input[type=search] to height:40px with
     border-box, which silently swallowed the padding below and kept the
     hero's signature field at 40px. Release the height so the padding is
     what decides the size. */
  height: auto;
  padding: 0.9375rem 0;
  border: 0;
  background: transparent;
  color: var(--ls-text);
  font-family: var(--ls-font-body);
  font-size: var(--ls-step-1);
  line-height: 1.4;
  box-shadow: none;
}
.ls-prompt input[type="search"]:focus { outline: none; box-shadow: none; }
.ls-prompt input[type="search"]::placeholder { color: var(--ls-text-muted); opacity: 1; }
.ls-prompt input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
.ls-prompt .search-icon { display: none; }

.ls-kbd {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--ls-line);
  border-radius: var(--ls-radius-sm);
  background: var(--ls-surface-1);
  color: var(--ls-text-muted);
  font-family: var(--ls-font-mono);
  font-size: 0.75rem;
}
@media (max-width: 700px) { .ls-kbd { display: none; } }

/* Suggested questions — real top queries, editable in theme settings. */
.ls-suggests {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin: 0.875rem 0 0;
  padding: 0;
  list-style: none;
}

/* Results panel ---------------------------------------------------------- */
.ls-panel {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  right: 0;
  z-index: 30;
  overflow: hidden;
  background: var(--ls-card);
  border: 1px solid var(--ls-line-strong);
  border-radius: var(--ls-radius);
  box-shadow: var(--ls-shadow);
}
.ls-panel[hidden] { display: none; }

/* A hairline that sweeps while the query is in flight. It replaces a
   spinner: the same gesture the product uses while generating. */
.ls-panel-sweep {
  height: 2px;
  background: var(--ls-line);
  overflow: hidden;
}
.ls-panel-sweep::after {
  content: "";
  display: block;
  height: 100%;
  width: 40%;
  background: var(--ls-brand);
  transform: translateX(-100%);
}
.ls-panel.is-loading .ls-panel-sweep::after { animation: ls-sweep 900ms var(--ls-ease) infinite; }
@keyframes ls-sweep {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}

.ls-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1.125rem;
  border-bottom: 1px solid var(--ls-line);
}
/* Ember marks output. The count is the one place on the home page where a
   number is genuinely a result rather than decoration. */
.ls-panel-count {
  font-family: var(--ls-font-mono);
  font-size: var(--ls-step--1);
  font-weight: 600;
  color: var(--ls-ember);
}
.ls-panel-hint { font-size: var(--ls-step--1); color: var(--ls-text-muted); }

.ls-results { margin: 0; padding: 0.375rem; list-style: none; max-height: 22rem; overflow-y: auto; }
.ls-result a {
  display: block;
  padding: 0.75rem 0.875rem;
  border-radius: var(--ls-radius-sm);
  text-decoration: none;
  color: var(--ls-text);
}
.ls-result a:hover,
.ls-result.is-active a { background: var(--ls-surface-2); }
.ls-result-title { display: block; font-weight: 600; margin-bottom: 0.1875rem; }
.ls-result-title em { font-style: normal; color: var(--ls-link); }
.ls-result-meta {
  display: block;
  font-size: var(--ls-step--1);
  color: var(--ls-text-muted);
}

.ls-panel-empty { padding: 1.25rem 1.125rem; background: var(--ls-ember-wash); }
.ls-panel-empty p { margin: 0 0 0.75rem; color: var(--ls-text); }
.ls-panel-empty strong { font-weight: 600; }

.ls-panel-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.625rem 1.125rem;
  border-top: 1px solid var(--ls-line);
  background: var(--ls-surface-1);
  font-size: var(--ls-step--1);
}

/* Categories ------------------------------------------------------------- */
.ls-home-section { padding: clamp(1.5rem, 1rem + 1.4vw, 2.25rem) 0 0; }
/* Scoped away from .ls-eyebrow: an eyebrow is a label, not a heading, even
   when it is marked up as one for the document outline. */
.ls-home-section > h2:not(.ls-eyebrow) {
  font-size: var(--ls-step-3);
  margin: 0 0 1.5rem;
}

.ls-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* A capped width is what keeps a lone card from stretching across the whole
   page. auto-fit collapses empty tracks, so without this a help centre with
   one section would render one 1180px-wide card. */
.ls-cat {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0.625rem;
  max-width: 26rem;
  padding: 1.125rem 1.25rem;
  background: var(--ls-card);
  border: 1px solid var(--ls-line);
  border-radius: var(--ls-radius);
  transition: border-color var(--ls-fast) var(--ls-ease),
              background var(--ls-fast) var(--ls-ease),
              transform var(--ls-fast) var(--ls-ease);
}
.ls-cat:hover { border-color: var(--ls-brand); background: var(--ls-card-hover); transform: translateY(-2px); }

/* The name row is the hit area, and the arrow is the affordance. Together
   they make a card read as finished with no description under it -- which is
   the normal case here, because Guide's descriptions are blank. */
.ls-cat-hit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  text-decoration: none;
  color: var(--ls-text);
}
.ls-cat-hit:hover { color: var(--ls-text); }
.ls-cat-hit:hover .ls-cat-arrow { color: var(--ls-brand); transform: translateX(2px); }

.ls-cat-name {
  font-family: var(--ls-font-display);
  /* Not --ls-step-2: at 22px the longest real section name, "Features &
     Capabilities", wraps to two lines in a three-up grid and the cards stop
     reading as equals. 20px fits every current name on one line. */
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  text-wrap: balance;
}
.ls-cat-arrow {
  flex: none;
  color: var(--ls-line-strong);
  transition: color var(--ls-fast) var(--ls-ease), transform var(--ls-fast) var(--ls-ease);
}

.ls-cat-desc { margin: 0; color: var(--ls-text-muted); font-size: var(--ls-step-0); }
.ls-cat-desc:empty { display: none; }

/* Sections listed inside the card: the reader can jump straight to the
   right shelf instead of opening the category to find out what is in it.

   `margin: auto 0 0` used to push this block to the bottom of the card.
   Cards in a grid row are stretched to the tallest one, so a category with
   two sections next to one with five ended up with a hole between its title
   and its list. Content sits at the top; the leftover space falls to the
   bottom, where it reads as the card's own padding. */
.ls-cat-sections {
  display: flex;
  flex-direction: column;
  margin: 0.125rem 0 0;
  padding: 0.625rem 0 0;
  border-top: 1px solid var(--ls-line);
  list-style: none;
}
.ls-cat-sections:empty { display: none; }
.ls-cat-sections a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.375rem 0;
  color: var(--ls-text-muted);
  font-size: var(--ls-step-0);
  line-height: 1.35;
  text-decoration: none;
}
.ls-cat-sections a:hover { color: var(--ls-text); }
.ls-cat-sections a::after {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: 0;
  transition: opacity var(--ls-fast) var(--ls-ease);
}
.ls-cat-sections a:hover::after { opacity: 0.7; }

/* Most read -------------------------------------------------------------- */
.ls-columns {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 1rem + 3vw, 3rem);
  align-items: start;
}
@media (max-width: 860px) { .ls-columns { grid-template-columns: 1fr; } }

.ls-linklist { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ls-line); }
.ls-linklist li { border-bottom: 1px solid var(--ls-line); }
.ls-linklist a {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.875rem 0.25rem;
  color: var(--ls-text);
  text-decoration: none;
  font-weight: 500;
}
.ls-linklist a:hover { color: var(--ls-link); }
.ls-linklist-index {
  flex: none;
  min-width: 1.5rem;
  font-family: var(--ls-font-mono);
  font-size: var(--ls-step--1);
  color: var(--ls-text-muted);
}

/* Contact card ----------------------------------------------------------- */
.ls-contact {
  padding: 1.5rem;
  background: var(--ls-brand-wash);
  border: 1px solid var(--ls-brand);
  border-radius: var(--ls-radius);
}
.ls-contact h2, .ls-contact h3 { margin: 0 0 0.5rem; font-size: var(--ls-step-2); }
.ls-contact p { margin: 0 0 1.125rem; color: var(--ls-text-muted); }
.ls-contact .ls-btn { width: 100%; justify-content: center; }
.ls-contact-meta {
  margin: 0.875rem 0 0;
  font-size: var(--ls-step--1);
  color: var(--ls-text-muted);
}

/* Shown when there are no promoted articles to sit beside. Laid out across
   the page rather than as a narrow column with empty space next to it. */
.ls-contact--wide {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
}
.ls-contact--wide > div { flex: 1 1 22rem; }
.ls-contact--wide p { margin: 0; }
.ls-contact--wide h2 { margin-bottom: 0.375rem; }
.ls-contact--wide .ls-btn { width: auto; flex: none; }
.ls-contact--wide .ls-contact-meta { margin-top: 0.5rem; }

/* ===== 40-article.css ===== */
/* =========================================================================
   Article page
   -------------------------------------------------------------------------
   Prose is set in Source Serif 4. A literary body face belongs to a product
   that writes stories and characters, and it holds a long line better than
   the UI sans does.
   ========================================================================= */

.ls-subnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
}
.ls-subnav .breadcrumbs { margin: 0; }
.breadcrumbs ol { margin: 0; padding: 0; }
.breadcrumbs li { color: var(--ls-text-muted); font-size: var(--ls-step--1); }
.breadcrumbs li a { color: var(--ls-text-muted); text-decoration: none; }
.breadcrumbs li a:hover { color: var(--ls-link); text-decoration: underline; }
.breadcrumbs li:not(:last-child)::after { color: var(--ls-line-strong); }

/* Compact search that rides along in the sub-nav on inner pages. */
.ls-subnav-search { flex: none; width: min(20rem, 45vw); }
.ls-subnav-search .ls-prompt-field { padding: 0 0.625rem 0 0.875rem; box-shadow: none; border-radius: var(--ls-radius-pill); }
.ls-subnav-search input[type="search"] { height: auto; padding: 0.5rem 0; font-size: var(--ls-step-0); }
.ls-subnav-search .ls-prompt-caret { height: 1rem; }
@media (max-width: 760px) { .ls-subnav-search { display: none; } }

.ls-article-layout {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
  align-items: start;
  padding-bottom: 3rem;
}
@media (max-width: 1000px) { .ls-article-layout { grid-template-columns: 1fr; } }
/* Set by ls-article.js when the sidebar has nothing to show: a short article
   in a section of one leaves both the contents list and the section index
   empty, and an empty 15rem column is just a margin pretending to be
   content. */
.ls-article-layout--solo { grid-template-columns: minmax(0, 1fr); }

.ls-aside {
  position: sticky;
  top: 4.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  max-height: calc(100vh - 6rem);
  overflow-y: auto;
  padding-right: 0.5rem;
}
@media (max-width: 1000px) {
  /* Content first. Below the article the section index is still a useful
     "what else is here", which is not true of a contents list -- that one is
     re-mounted under the title by ls-article.js. */
  .ls-aside {
    position: static;
    order: 2;
    max-height: none;
    overflow: visible;
    padding-right: 0;
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--ls-line);
  }
}

/* Table of contents ------------------------------------------------------ */
.ls-toc-mobile:empty { display: none; }
.ls-toc-mobile { margin: 0 0 2rem; }
@media (min-width: 1001px) { .ls-toc-mobile { display: none; } }

.ls-toc-details {
  border: 1px solid var(--ls-line);
  border-radius: var(--ls-radius-sm);
  background: var(--ls-card);
}
.ls-toc-details > summary {
  padding: 0.75rem 1rem;
  cursor: pointer;
  font-size: var(--ls-step--1);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ls-text-muted);
  list-style-position: inside;
}
.ls-toc-details[open] > summary { border-bottom: 1px solid var(--ls-line); color: var(--ls-text); }
.ls-toc-details .ls-toc-list { border-left: 0; padding: 0.5rem 1rem 0.75rem; }

.ls-toc-list { margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--ls-line); }
.ls-toc-list a {
  display: block;
  padding: 0.3125rem 0 0.3125rem 0.875rem;
  margin-left: -1px;
  border-left: 2px solid transparent;
  color: var(--ls-text-muted);
  font-size: var(--ls-step--1);
  line-height: 1.45;
  text-decoration: none;
}
.ls-toc-list a:hover { color: var(--ls-text); }
.ls-toc-list a.is-current {
  color: var(--ls-text);
  border-left-color: var(--ls-brand);
  font-weight: 600;
}
.ls-toc-list .ls-toc-h3 a { padding-left: 1.625rem; font-size: 0.8125rem; }

/* Section index (Copenhagen's collapsible-sidebar markup, restyled) ------ */
.sidenav-title, .ls-aside-title {
  display: block;
  font-family: var(--ls-font-body);
  font-size: var(--ls-step--1);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ls-text-muted);
  margin: 0 0 0.625rem;
}
.collapsible-sidebar-body ul { margin: 0; padding: 0; list-style: none; }
.sidenav-item {
  display: block;
  padding: 0.375rem 0.625rem;
  border-radius: var(--ls-radius-sm);
  color: var(--ls-text-muted);
  font-size: var(--ls-step--1);
  text-decoration: none;
  border: 0;
}
.sidenav-item:hover { background: var(--ls-surface-1); color: var(--ls-text); }
.sidenav-item.current-article {
  background: var(--ls-brand-wash);
  color: var(--ls-text);
  font-weight: 600;
  box-shadow: inset 2px 0 0 var(--ls-brand);
}

/* Article header --------------------------------------------------------- */
/* The element keeps Copenhagen's .article class, because other base rules
   hang off it, but that class also carries a flex layout of its own:
   max-width 66%, min-width 640px and side padding above 1024px. Left alone
   it shrinks this grid's column to two thirds and overflows narrow ones. */
.ls-article-layout > .ls-article {
  min-width: 0;
  max-width: none;
  padding: 0;
  flex: none;
}
.ls-article-header { padding: 0.5rem 0 1.5rem; border-bottom: 1px solid var(--ls-line); margin-bottom: 2rem; }
.article-title, .ls-article-header h1 {
  font-size: var(--ls-step-4);
  letter-spacing: -0.03em;
  margin: 0 0 0.875rem;
  max-width: 30ch;
}
.ls-article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  font-size: var(--ls-step--1);
  color: var(--ls-text-muted);
}

/* Prose ------------------------------------------------------------------ */
.article-body {
  font-family: var(--ls-font-prose);
  font-size: var(--ls-step-1);
  line-height: 1.7;
  color: var(--ls-text);
  max-width: var(--ls-measure);
}
/* Rhythm between blocks. Do not reintroduce a `.article-body p { margin: 0 }`
   rule here: at (0,1,1) it outranks the sibling selector below and glues
   consecutive paragraphs together, which only shows up on articles that have
   two in a row. */
.article-body > * { margin-top: 0; margin-bottom: 0; }
.article-body > * + * { margin-top: 1.125em; }
.article-body h2,
.article-body h3,
.article-body h4 {
  font-family: var(--ls-font-display);
  letter-spacing: -0.02em;
  scroll-margin-top: 5rem;
}
.article-body h2 { font-size: var(--ls-step-3); margin-top: 2.5em; margin-bottom: 0.5em; }
.article-body h3 { font-size: var(--ls-step-2); margin-top: 2em; margin-bottom: 0.4em; }
.article-body h4 { font-size: var(--ls-step-1); margin-top: 1.75em; margin-bottom: 0.35em; }
.article-body h2 + *, .article-body h3 + *, .article-body h4 + * { margin-top: 0; }

.article-body ul, .article-body ol { padding-left: 1.5em; }
.article-body li + li { margin-top: 0.4em; }
.article-body li::marker { color: var(--ls-brand); }

.article-body a { color: var(--ls-link); }

.article-body strong { font-weight: 600; }

/* Blockquote is the one device article authors have in the Zendesk editor,
   so it is styled as a callout rather than as a pull quote. */
.article-body blockquote {
  margin: 1.75em 0;
  padding: 1rem 1.25rem;
  border: 0;
  border-left: 3px solid var(--ls-brand);
  border-radius: 0 var(--ls-radius-sm) var(--ls-radius-sm) 0;
  background: var(--ls-brand-wash);
  color: var(--ls-text);
  font-style: normal;
}
.article-body blockquote > * + * { margin-top: 0.75em; }

.article-body code {
  font-family: var(--ls-font-mono);
  font-size: 0.875em;
  padding: 0.15em 0.4em;
  border-radius: 5px;
  background: var(--ls-surface-2);
  color: var(--ls-text);
}
.article-body pre {
  margin: 1.75em 0;
  padding: 1rem 1.125rem;
  overflow-x: auto;
  background: var(--ls-surface-2);
  border: 1px solid var(--ls-line);
  border-radius: var(--ls-radius-sm);
  font-family: var(--ls-font-mono);
  font-size: 0.875rem;
  line-height: 1.55;
}
.article-body pre code { background: none; padding: 0; }

.article-body img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1.75em 0;
  border: 1px solid var(--ls-line);
  border-radius: var(--ls-radius-sm);
  cursor: zoom-in;
}

.article-body hr { margin: 2.5em 0; border-top: 1px solid var(--ls-line); }

.article-body table {
  width: 100%;
  margin: 1.75em 0;
  border-collapse: collapse;
  font-family: var(--ls-font-body);
  font-size: var(--ls-step-0);
}
.article-body th, .article-body td {
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--ls-line);
  text-align: left;
  vertical-align: top;
}
.article-body th { background: var(--ls-surface-1); font-weight: 600; }
/* Wide tables scroll inside their own frame instead of pushing the page. */
.ls-table-scroll { overflow-x: auto; margin: 1.75em 0; }
.ls-table-scroll table { margin: 0; }

/* Image lightbox --------------------------------------------------------- */
.ls-lightbox {
  padding: 0;
  border: 0;
  max-width: 96vw;
  max-height: 96vh;
  background: transparent;
}
.ls-lightbox::backdrop { background: rgba(4, 3, 8, 0.88); }
.ls-lightbox img { display: block; max-width: 96vw; max-height: 90vh; border-radius: var(--ls-radius); }
.ls-lightbox-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: var(--ls-radius-pill);
  background: rgba(11, 10, 18, 0.7);
  color: #fff;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

/* Content tags ----------------------------------------------------------- */
.content-tags { margin-top: 2.5rem; }
.content-tags p { font-size: var(--ls-step--1); color: var(--ls-text-muted); margin: 0 0 0.5rem; }
.content-tag-list { display: flex; flex-wrap: wrap; gap: 0.375rem; margin: 0; padding: 0; list-style: none; }
.content-tag-item a {
  display: inline-flex;
  padding: 0.25rem 0.625rem;
  border-radius: var(--ls-radius-pill);
  border: 1px solid var(--ls-line);
  background: var(--ls-card);
  color: var(--ls-text-muted);
  font-size: var(--ls-step--1);
  text-decoration: none;
}
.content-tag-item a:hover { border-color: var(--ls-brand); color: var(--ls-text); }

/* Attachments ------------------------------------------------------------ */
.attachments { margin: 2rem 0 0; padding: 0; list-style: none; }
.attachment-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--ls-line);
  border-radius: var(--ls-radius-sm);
  background: var(--ls-card);
}
.attachment-item + .attachment-item { margin-top: 0.5rem; }

/* =========================================================================
   Feedback — the highest-value block on the page
   -------------------------------------------------------------------------
   A thumbs-down alone tells us nothing actionable. Answering "No" opens one
   field asking what the reader actually needed; that text is what turns a
   vote into a content backlog item.
   ========================================================================= */
.ls-feedback {
  margin: 3rem 0 0;
  padding: 1.5rem;
  background: var(--ls-card);
  border: 1px solid var(--ls-line);
  border-radius: var(--ls-radius);
}
.ls-feedback h2 { font-size: var(--ls-step-2); margin: 0 0 0.25rem; }
.ls-feedback-sub { margin: 0 0 1.125rem; font-size: var(--ls-step--1); color: var(--ls-text-muted); }
.ls-feedback-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem; }

/* Zendesk's {{vote}} helper renders the buttons; these style its output. */
.article-vote,
.ls-feedback .button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.125rem;
  border-radius: var(--ls-radius-pill);
  border: 1px solid var(--ls-line-strong);
  background: transparent;
  color: var(--ls-text);
  font-family: inherit;
  font-size: var(--ls-step-0);
  font-weight: 600;
  cursor: pointer;
}
.article-vote:hover { border-color: var(--ls-brand); background: var(--ls-card-hover); }
.article-vote.button-primary {
  background: var(--ls-brand);
  border-color: var(--ls-brand);
  color: var(--ls-on-brand);
}
.article-votes-count, .article-vote-label { color: var(--ls-text-muted); font-size: var(--ls-step--1); }

.ls-followup { margin: 1.125rem 0 0; }
.ls-followup[hidden] { display: none; }
.ls-followup label { display: block; font-size: var(--ls-step--1); font-weight: 600; margin-bottom: 0.5rem; }
.ls-followup textarea {
  width: 100%;
  min-height: 5rem;
  padding: 0.75rem 0.875rem;
  background: var(--ls-bg);
  border: 1px solid var(--ls-line-strong);
  border-radius: var(--ls-radius-sm);
  color: var(--ls-text);
  font-family: inherit;
  font-size: var(--ls-step-0);
  resize: vertical;
}
.ls-followup textarea:focus-visible { border-color: var(--ls-brand); }
.ls-followup-actions { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.75rem; }
.ls-followup-hint { font-size: var(--ls-step--1); color: var(--ls-text-muted); }

.ls-feedback-thanks {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin: 1.125rem 0 0;
  padding: 0.875rem 1rem;
  border-radius: var(--ls-radius-sm);
  background: var(--ls-ember-wash);
  color: var(--ls-text);
  font-size: var(--ls-step-0);
}
.ls-feedback-thanks[hidden] { display: none; }

/* Related / recently viewed --------------------------------------------- */
.article-relatives { margin-top: 3rem; display: grid; gap: 2rem; }
.article-relatives h3, .recent-articles h3, .related-articles h3 {
  font-size: var(--ls-step-2);
  margin: 0 0 0.875rem;
}
.article-relatives ul, .recent-articles ul, .related-articles ul {
  margin: 0; padding: 0; list-style: none;
  border-top: 1px solid var(--ls-line);
}
.article-relatives li, .recent-articles li, .related-articles li { border-bottom: 1px solid var(--ls-line); }
.article-relatives li a, .recent-articles li a, .related-articles li a {
  display: block;
  padding: 0.75rem 0.25rem;
  color: var(--ls-text);
  text-decoration: none;
  font-weight: 500;
}
.article-relatives li a:hover { color: var(--ls-link); }

/* Comments --------------------------------------------------------------- */
.article-comments { margin-top: 3.5rem; }
.comment-heading { font-size: var(--ls-step-3); }
.comment { padding: 1.25rem 0; border-top: 1px solid var(--ls-line); }
.comment-body { font-family: var(--ls-font-prose); font-size: var(--ls-step-1); line-height: 1.65; }
.comment-callout { color: var(--ls-text-muted); font-size: var(--ls-step--1); }
.status-label { border-radius: var(--ls-radius-pill); }

.article-footer, .article-return-to-top { color: var(--ls-text-muted); }
.article-more-questions { margin-top: 1.5rem; color: var(--ls-text-muted); }

@media print {
  .header, .footer, .ls-aside, .ls-feedback, .article-comments, .ls-subnav-search, .ls-progress { display: none !important; }
  .ls-article-layout { grid-template-columns: 1fr; }
  .article-body { max-width: none; color: #000; }
}

/* ===== 50-pages.css ===== */
/* =========================================================================
   Category, section, search results, forms, profile
   ========================================================================= */

/* The base theme lays this out as a baseline-aligned row above 768px, which
   parks the description beside the title, and sets it in italics. Stack it
   instead: title, then description, then the follow button. */
.page-header {
  display: grid;
  gap: 0.625rem;
  justify-items: start;
  margin: 0;
  padding: 1rem 0 2rem;
}
.page-header h1 { font-size: var(--ls-step-4); letter-spacing: -0.03em; margin: 0; max-width: 30ch; }
.page-header-description {
  margin: 0;
  max-width: 60ch;
  color: var(--ls-text-muted);
  font-size: var(--ls-step-1);
  font-style: normal;
}

/* Category page ---------------------------------------------------------- */
/* Two columns where there is room, one where there is not. justify-content
   is reset explicitly: the base theme sets space-between for its own flex
   layout, and inherited into a grid that stops the column stretching, which
   left every article list at its content width in the middle of the page. */
.section-tree {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: 2.5rem clamp(1.5rem, 1rem + 3vw, 3.5rem);
  justify-content: stretch;
  align-items: start;
  padding-bottom: 3rem;
}
.section-tree .section { max-width: none; }
.section-tree-title { font-size: var(--ls-step-2); margin: 0 0 0.75rem; }
.section-tree-title a { color: var(--ls-text); text-decoration: none; }
.section-tree-title a:hover { color: var(--ls-link); }

.article-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ls-line); }
.article-list-item {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0;
  border-bottom: 1px solid var(--ls-line);
}
.article-list-link {
  display: block;
  flex: 1;
  padding: 0.8125rem 0.25rem;
  color: var(--ls-text);
  text-decoration: none;
  font-weight: 500;
}
.article-list-link:hover { color: var(--ls-link); }
.icon-star { color: var(--ls-ember); flex: none; align-self: center; }
.icon-lock { color: var(--ls-text-muted); flex: none; align-self: center; }

.see-all-articles { display: inline-block; margin-top: 0.875rem; font-size: var(--ls-step-0); font-weight: 600; }

.section-list { margin: 0 0 2rem; padding: 0; list-style: none; display: grid; gap: 0.5rem; }
.section-list-item a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.875rem 1.125rem;
  background: var(--ls-card);
  border: 1px solid var(--ls-line);
  border-radius: var(--ls-radius-sm);
  color: var(--ls-text);
  text-decoration: none;
  font-weight: 600;
}
.section-list-item a:hover { border-color: var(--ls-brand); background: var(--ls-card-hover); }

/* Search results --------------------------------------------------------- */
.search-results { padding-bottom: 3rem; }
.search-results-column { min-width: 0; }
.search-results-list { margin: 0; padding: 0; list-style: none; }
.search-result {
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--ls-line);
}
.search-result-link {
  font-family: var(--ls-font-display);
  font-size: var(--ls-step-2);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ls-text);
  text-decoration: none;
}
.search-result-link:hover { color: var(--ls-link); }
.search-result-description {
  margin: 0.375rem 0 0;
  font-family: var(--ls-font-prose);
  font-size: var(--ls-step-1);
  line-height: 1.6;
  color: var(--ls-text-muted);
  max-width: var(--ls-measure);
}
.search-result-description em, .search-result-link em { font-style: normal; background: var(--ls-brand-wash); color: var(--ls-text); }
.search-result-meta, .meta-group { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; font-size: var(--ls-step--1); color: var(--ls-text-muted); }
.meta-data { color: var(--ls-text-muted); }
.search-result-votes { color: var(--ls-text-muted); }

.search-results-subheading { font-size: var(--ls-step-3); margin: 0 0 0.375rem; }
.search-results-count { color: var(--ls-text-muted); font-size: var(--ls-step-0); margin: 0 0 1.5rem; }

/* Zero results is a hand-off, not a dead end. */
.ls-noresults {
  padding: 1.5rem;
  border: 1px solid var(--ls-line);
  border-left: 3px solid var(--ls-ember);
  border-radius: var(--ls-radius);
  background: var(--ls-ember-wash);
}
.ls-noresults h2 { font-size: var(--ls-step-2); margin: 0 0 0.5rem; }
.ls-noresults p { margin: 0 0 1rem; color: var(--ls-text); }

.multibrand-filter-list, .search-results-sidebar { font-size: var(--ls-step-0); }
.multibrand-filter-list h3, .search-results-sidebar h3 {
  font-size: var(--ls-step--1);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ls-text-muted);
}
.multibrand-filter-list a { color: var(--ls-text-muted); text-decoration: none; }
.multibrand-filter-list a:hover { color: var(--ls-text); }
.multibrand-filter-list li.current a { color: var(--ls-text); font-weight: 600; }

/* Pagination ------------------------------------------------------------- */
.pagination { display: flex; justify-content: center; gap: 0.25rem; margin: 2rem 0; padding: 0; list-style: none; }
.pagination-current, .pagination-page, .pagination-prev a, .pagination-next a, .pagination li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 0.5rem;
  border-radius: var(--ls-radius-sm);
  color: var(--ls-text-muted);
  text-decoration: none;
}
.pagination li a:hover { background: var(--ls-surface-1); color: var(--ls-text); }
.pagination-current {
  background: var(--ls-brand);
  color: var(--ls-on-brand);
  font-weight: 600;
}

/* Forms: request form, profile, community. The React-rendered request form
   inherits from Garden tokens, so keep this to the surrounding chrome and
   to plain inputs Zendesk renders server-side. --------------------------- */
.form, .form-field { color: var(--ls-text); }
.form-field label, .form label { color: var(--ls-text); font-weight: 600; font-size: var(--ls-step-0); }
/* Form controls the base theme renders server-side, and ONLY those.
   ---------------------------------------------------------------------------
   Two rules learned the hard way, both from the request form going dead:

   1. Never select `input`, `textarea` or `select` bare. Zendesk renders the
      request form and the request list from React with Garden components,
      whose own styling hangs off generated classes at specificity (0,1,0).
      An element+attribute selector here is (0,1,1) and silently outranks it.

   2. Never use the `font` shorthand on a form control. `font: inherit`
      replaces the whole font shorthand -- including the system-font value the
      UA gives controls -- and in Chrome a Garden text input then stops
      accepting typed characters entirely: it focuses, keydown and keypress
      fire unprevented, and no beforeinput or input event is ever produced.
      Verified by bisection: line-height, font-family and font-size set
      individually are all harmless; the shorthand alone breaks it.

   `.hbs-form` and `.form-field` are the base theme's own wrappers (comment
   forms, community posts, subscribe, profile). Garden uses neither. */
.hbs-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.hbs-form textarea,
.hbs-form select,
.form-field input:not([type="checkbox"]):not([type="radio"]),
.form-field textarea,
.form-field select {
  background: var(--ls-card);
  border: 1px solid var(--ls-line-strong);
  border-radius: var(--ls-radius-sm);
  color: var(--ls-text);
  font-family: inherit;
  font-size: var(--ls-step-0);
}
.hbs-form input:focus-visible,
.hbs-form textarea:focus-visible,
.hbs-form select:focus-visible,
.form-field input:focus-visible,
.form-field textarea:focus-visible,
.form-field select:focus-visible { border-color: var(--ls-brand); }
.hbs-form input::placeholder,
.hbs-form textarea::placeholder,
.form-field input::placeholder,
.form-field textarea::placeholder { color: var(--ls-text-muted); }

.button, button.button, a.button, .hbs-form input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  border-radius: var(--ls-radius-pill);
  border: 1px solid var(--ls-line-strong);
  background: transparent;
  color: var(--ls-text);
  font-family: inherit;
  font-size: var(--ls-step-0);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.button:hover { border-color: var(--ls-brand); background: var(--ls-card-hover); color: var(--ls-text); }
.button-primary, .hbs-form input[type="submit"] {
  background: var(--ls-brand);
  border-color: var(--ls-brand);
  color: var(--ls-on-brand);
}
.button-primary:hover, .hbs-form input[type="submit"]:hover {
  background: var(--ls-brand-deep);
  border-color: var(--ls-brand-deep);
  color: var(--ls-on-brand);
}

/* My requests / profile tables ------------------------------------------ */
table { border-color: var(--ls-line); }
th { color: var(--ls-text); border-color: var(--ls-line); }
td { border-color: var(--ls-line); color: var(--ls-text); }
.my-activities-header h1 { font-size: var(--ls-step-4); }
.striped-list-item:nth-child(odd), tr:nth-child(even) { background: var(--ls-surface-1); }

/* Error page ------------------------------------------------------------- */
.error-page { padding-block: 4rem 5rem; text-align: center; }
.error-page h1 { font-size: var(--ls-step-5); margin: 0 0 0.5rem; }
.error-page h2 { font-size: var(--ls-step-2); font-family: var(--ls-font-body); font-weight: 500; color: var(--ls-text-muted); margin: 0 0 1.5rem; }

/* Recent activity (home) ------------------------------------------------- */
.recent-activity-header { font-size: var(--ls-step-3); }
.recent-activity-list { border-top: 1px solid var(--ls-line); }
.recent-activity-item { border-bottom: 1px solid var(--ls-line); padding: 0.875rem 0; }
.recent-activity-item-parent, .recent-activity-item-link { color: var(--ls-text); }
.recent-activity-item-meta, .recent-activity-item-comment { color: var(--ls-text-muted); }

/* Community -------------------------------------------------------------- */
.community-image, .hero-inner { border-radius: var(--ls-radius); }
.topic-item, .post-list-item { border-bottom: 1px solid var(--ls-line); }


/* =========================================================================
   Thin content
   -------------------------------------------------------------------------
   This help centre is small: one category, three sections, eleven articles.
   Lists of one and blocks of none are the normal case, not the edge case,
   so they get designed for rather than left to look broken.
   ========================================================================= */

/* A single row does not need the rule above it that makes a list look like
   a table -- the row's own bottom border is enough. */
.ls-list--single { border-top: 0; }

/* Belt and braces for the JS in ls-app.js: if it never runs, an empty list
   still takes up no space. */
.ls-linklist:empty,
.article-list:empty,
.section-list:empty,
.ls-cat-sections:empty,
.ls-cat-grid:empty { display: none; }

/* Zendesk's helpers leave a heading standing over an empty list. */
.article-relatives[hidden],
.recent-articles[hidden],
.related-articles[hidden],
.collapsible-sidebar[hidden],
.ls-aside[hidden] { display: none !important; }

/* A page-header description that resolved to nothing should not add a gap. */
.page-header-description:empty { display: none; }

/* ===== 60-settings-bridge.css ===== */
/* =========================================================================
   Theme settings -> tokens
   -------------------------------------------------------------------------
   The accent colour is admin-editable, so it is applied where a wrong
   choice can only look off: fills, borders, focus rings. Link *text*
   colours stay token-defined per scheme, because deriving them from an
   arbitrary picker value is how help centres end up with 2:1 contrast on
   the one element every reader has to click.

   No Sass colour functions here on purpose. Zendesk compiles style.css
   through a Sass pass, and a function fed an unexpected value fails the
   whole compile rather than degrading.
   ========================================================================= */
:root {
  --ls-brand: #8557EE;
  --ls-on-brand: #FFFFFF;
}

/* Heading anchor: invisible until the heading is hovered or focused, so it
   never competes with the prose. */
.ls-anchor {
  margin-left: 0.4em;
  padding: 0 0.15em;
  border: 0;
  background: none;
  color: var(--ls-line-strong);
  font-family: var(--ls-font-mono);
  font-size: 0.7em;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--ls-fast) var(--ls-ease), color var(--ls-fast) var(--ls-ease);
}
h2:hover > .ls-anchor,
h3:hover > .ls-anchor,
.ls-anchor:focus-visible { opacity: 1; }
.ls-anchor:hover { color: var(--ls-brand); }
.ls-anchor.is-copied { opacity: 1; color: var(--ls-ember); }

/* Anything the theme hides from view but keeps for assistive tech. */
.visibility-hidden, .ls-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.skip-navigation {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--ls-brand);
  color: var(--ls-on-brand);
  border-radius: 0 0 var(--ls-radius-sm) 0;
}
.skip-navigation:focus { left: 0; color: var(--ls-on-brand); }