@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: #EEF1F6;
  color: #0D1420;
  font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  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: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  margin-top: 0;
}

h1 {
  font-size: 32px;
}

h2 {
  font-size: 22px;
}

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

h4 {
  font-size: 16px;
}

a {
  color: #1B4FE0;
  text-decoration: none;
}
a:visited {
  color: #1B4FE0;
}
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 #1B4FE0;
}
.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 #1B4FE0;
}
.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 #1B4FE0;
}

.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 #1B4FE0;
  border-radius: 4px;
  color: #1B4FE0;
  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: #1B4FE0;
}
.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: #1B4FE0;
  color: #FFFFFF;
  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: #102f85;
  border-color: #102f85;
}
.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: #1B4FE0;
  border: 0;
  border-radius: 4px;
  color: #FFFFFF;
  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: #FFFFFF;
}
.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: #102f85;
}
.button-large[disabled], .hbs-form input[type=submit][disabled] {
  background-color: #ddd;
}

.button-secondary {
  color: #2a4169;
  border: 1px solid #848F99;
  background-color: transparent;
}
.button-secondary:visited {
  color: #2a4169;
}
.button-secondary:hover, .button-secondary:focus, .button-secondary:active {
  color: #0D1420;
  border: 1px solid #848F99;
  background-color: #e4e9f1;
}

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

.split-button button {
  background-color: #1B4FE0;
  border: 0;
  color: #FFFFFF;
  height: 32px;
  line-height: 16px;
  outline-color: #1B4FE0;
}

[dir=rtl] .split-button button:not(:only-child):first-child {
  border-left: 1px solid #FFFFFF;
  border-top-left-radius: unset;
  border-bottom-left-radius: unset;
}
[dir=ltr] .split-button button:not(:only-child):first-child {
  border-right: 1px solid #FFFFFF;
  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: #2a4169;
  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 #1B4FE0;
}

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

.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 #1B4FE0;
  text-decoration: none;
}

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

.form-field .hc-multiselect-toggle:focus {
  outline: none;
  border: 1px solid #1B4FE0;
  text-decoration: none;
}

.form-field textarea {
  vertical-align: middle;
}

.form-field input[type=checkbox] + label {
  margin: 0 0 0 10px;
}

.form-field .optional {
  color: #2a4169;
  margin-left: 4px;
}

.form-field p {
  color: #2a4169;
  font-size: 12px;
  margin: 5px 0;
}

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

.form footer a {
  color: #2a4169;
  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: #1B4FE0;
}

/***** 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: #1B4FE0;
}

.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: #1B4FE0;
  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: #1B4FE0;
  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: #0D1420;
  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: #0D1420;
}
.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: #1B4FE0;
  border: 1px solid #1B4FE0;
  border-radius: 4px;
  color: #FFFFFF;
  display: inline-flex;
  font-size: 14px;
  font-weight: 600;
  gap: 6px;
  line-height: 1.4286;
  padding: 6px 14px;
}
.ask-ai:visited {
  color: #FFFFFF;
}
.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: #FFFFFF;
}
.nav-wrapper-desktop .ask-ai:hover, .nav-wrapper-desktop .ask-ai:focus, .nav-wrapper-desktop .ask-ai:active {
  background-color: rgba(184, 21, 21, 0.08);
  border-color: rgba(184, 21, 21, 0.08);
  color: #FFFFFF;
  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: #FFFFFF;
}
.nav-wrapper-mobile .ask-ai:hover, .nav-wrapper-mobile .ask-ai:focus, .nav-wrapper-mobile .ask-ai:active {
  background-color: rgba(184, 21, 21, 0.08);
  border-color: rgba(184, 21, 21, 0.08);
  color: #FFFFFF;
  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: #1B4FE0;
  min-width: 0;
  padding: 0;
  white-space: nowrap;
}
.user-info > button:hover, .user-info > button:focus {
  color: #1B4FE0;
  background-color: transparent;
}
.user-info > button::after {
  color: #1B4FE0;
  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: #1B4FE0;
  border: 2px solid #fff;
  border-radius: 50%;
  bottom: -4px;
  background-color: #FFFFFF;
  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: #2a4169;
}
.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: #2a4169;
  display: inline-block;
}

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

/***** Breadcrumbs *****/
.breadcrumbs {
  margin: 0 0 15px 0;
  padding: 0;
  display: flex;
}
@media (min-width: 768px) {
  .breadcrumbs {
    margin: 0;
  }
}
.breadcrumbs li {
  display: inline-block;
  color: #2a4169;
  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: #1B4FE0;
}

/***** 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: #1B4FE0;
}
.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: #1B4FE0;
  color: #fff;
}
.search .clear-button:focus {
  outline: 0;
  box-shadow: 0 0 0 3px #1B4FE0;
}
.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: #1B4FE0;
}
[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: #1B4FE0;
}

[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: #1B4FE0;
}
[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: #1B4FE0;
}

.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-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 #1B4FE0;
  border-radius: 4px;
  box-sizing: border-box;
  color: #1B4FE0;
  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: #1B4FE0;
}
.blocks-item:hover *, .blocks-item:focus *, .blocks-item:active * {
  color: #FFFFFF;
  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: #0D1420;
}
.blocks-item-link {
  color: #1B4FE0;
  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 #1B4FE0;
  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-position: center;
  background-repeat: no-repeat;
  max-width: 100%;
}
.community a {
  color: #1B4FE0;
  text-decoration: underline;
}
.community a:visited {
  color: #1B4FE0;
}
.community a:hover, .community a:active, .community a:focus {
  color: rgba(184, 21, 21, 0.08);
}

.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: #0D1420;
  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: #1B4FE0;
  text-decoration: underline;
}
.recent-activity-controls a:visited {
  color: #1B4FE0;
}
.recent-activity-controls a:hover, .recent-activity-controls a:active, .recent-activity-controls a:focus {
  color: rgba(184, 21, 21, 0.08);
}
.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: #1B4FE0;
  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: #0D1420;
}
.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: #0D1420;
}

.icon-star {
  color: #1B4FE0;
  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: #0D1420;
  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: #1B4FE0;
  text-decoration: underline;
}
.article-body a:visited {
  color: #1B4FE0;
}
.article-body a:hover, .article-body a:active, .article-body a:focus {
  color: rgba(184, 21, 21, 0.08);
}
.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: #dde3ed;
}
.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: #e4e9f1;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}
.article-body pre {
  background: #e4e9f1;
  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: #2a4169;
  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: #2a4169;
}
.article-comment-count:hover {
  text-decoration: none;
}
.article-comment-count-icon {
  vertical-align: middle;
  color: #1B4FE0;
  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: #1B4FE0;
  text-decoration: underline;
}
.article-more-questions a:visited {
  color: #1B4FE0;
}
.article-more-questions a:hover, .article-more-questions a:active, .article-more-questions a:focus {
  color: rgba(184, 21, 21, 0.08);
}
.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: #0D1420;
  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: #0D1420;
  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: #2a4169;
}

/***** 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: #2a4169;
}
.share a:hover {
  text-decoration: none;
  color: #1B4FE0;
}
.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: #2a4169;
  display: inline-block;
  font-size: 13px;
  margin-bottom: 0;
}
.comment-callout a {
  color: #1B4FE0;
  text-decoration: underline;
}
.comment-callout a:visited {
  color: #1B4FE0;
}
.comment-callout a:hover, .comment-callout a:active, .comment-callout a:focus {
  color: rgba(184, 21, 21, 0.08);
}
.comment-sorter {
  display: inline-block;
  float: right;
}
.comment-sorter .dropdown-toggle {
  color: #2a4169;
  font-size: 13px;
}
[dir=rtl] .comment-sorter {
  float: left;
}
.comment-wrapper {
  display: flex;
  position: relative;
}
.comment-wrapper.comment-official {
  border: 1px solid #1B4FE0;
  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: #1B4FE0;
}
.comment-body {
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  word-wrap: break-word;
  display: flow-root;
  font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  line-height: 1.6;
  overflow-x: auto;
}
.comment-body a {
  color: #1B4FE0;
  text-decoration: underline;
}
.comment-body a:visited {
  color: #1B4FE0;
}
.comment-body a:hover, .comment-body a:active, .comment-body a:focus {
  color: rgba(184, 21, 21, 0.08);
}
.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: #dde3ed;
}
.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: #e4e9f1;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}
.comment-body pre {
  background: #e4e9f1;
  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: #2a4169;
  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: #2a4169;
  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: #1B4FE0;
}

.vote-up, .vote-down {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent;
  border: none;
  color: #2a4169;
  cursor: pointer;
  min-height: 35px;
  min-width: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vote-voted {
  color: #1B4FE0;
}

.vote-voted:hover {
  color: #102f85;
}

/***** 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 {
  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: #1B4FE0;
}
.community-follow button:hover::after, .community-follow button:focus::after {
  border-color: #FFFFFF;
  color: #FFFFFF;
}
.community-follow button[data-selected=true] {
  background-color: #1B4FE0;
  color: #FFFFFF;
}
.community-follow button[data-selected=true]::after {
  border-left: 1px solid #FFFFFF;
  color: #FFFFFF;
}
.community-follow button[data-selected=true]:hover {
  background-color: #102f85;
  border-color: #102f85;
}
.community-follow button::after {
  border-left: 1px solid #1B4FE0;
  content: attr(data-follower-count);
  color: #1B4FE0;
  display: inline-block;
  font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  margin-left: 15px;
  padding-left: 10px;
  position: absolute;
  right: 10px;
}
@media (min-width: 768px) {
  .community-follow button::after {
    position: static;
  }
}
[dir=rtl] .community-follow button::after {
  border-left: 0;
  border-right: 1px solid #1B4FE0;
  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: #1B4FE0;
  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: #1B4FE0;
}
.striped-list .meta-group {
  margin: 5px 0;
}
.striped-list-count {
  color: #2a4169;
  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: #0D1420;
    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: #1B4FE0;
}
.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: #2a4169;
}
.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: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  line-height: 1.6;
  word-break: break-word;
}
.post-info-container {
  display: flex;
  margin-bottom: 40px;
}
.post-info {
  min-width: 0;
  padding-right: 20px;
  width: 100%;
}
[dir=rtl] .post-info {
  padding-right: 0;
  padding-left: 20px;
}
.post-meta {
  display: inline-block;
  flex: 1;
  margin-left: 10px;
  vertical-align: middle;
}
[dir=rtl] .post-meta {
  margin-left: 0;
  margin-right: 10px;
}
.post-body {
  display: flow-root;
}
.post-body a {
  color: #1B4FE0;
  text-decoration: underline;
}
.post-body a:visited {
  color: #1B4FE0;
}
.post-body a:hover, .post-body a:active, .post-body a:focus {
  color: rgba(184, 21, 21, 0.08);
}
.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: #dde3ed;
}
.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: #e4e9f1;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}
.post-body pre {
  background: #e4e9f1;
  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: #2a4169;
  font-style: italic;
  padding: 0 15px;
}
.post-footer {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
}
.post-comment-count {
  color: #2a4169;
}
.post-comment-count:hover {
  text-decoration: none;
}
.post-comment-count .icon-comments {
  color: #1B4FE0;
  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 #1B4FE0;
}

.collapsible-nav-list {
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  .collapsible-nav-list {
    flex-direction: row;
  }
}
.collapsible-nav-list li {
  color: #0D1420;
  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: #0D1420;
  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 #1B4FE0;
    order: 1;
  }
}
.collapsible-nav-list li[aria-selected=true] a,
.collapsible-nav-list li.current a {
  color: #0D1420;
}

.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 #1B4FE0;
}
.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: #dde3ed;
  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: #2a4169;
  font-size: 13px;
}
@media (min-width: 768px) {
  .contributions-table td:last-child {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
  }
}

.no-activities {
  color: #2a4169;
}

/***** 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: #2a4169;
  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 #1B4FE0;
}
.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 #1B4FE0;
}
.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: #e4e9f1;
    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: #2a4169;
  width: 40%;
}
.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: #2a4169;
  font-size: 13px;
}
.meta-data:not(:last-child)::after {
  content: "·";
  margin: 0 5px;
}

/* User Profiles */
.profile-header {
  padding: 30px 0;
  background-color: #e4e9f1;
}

.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: #2a4169;
  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 #1B4FE0;
  border-radius: 4px;
  color: #1B4FE0;
  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: #dde3ed;
  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: #2a4169;
  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: #2a4169;
  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: #e4e9f1;
}
@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: #EEF1F6;
  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: #0D1420;
}
.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) {
  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: #1B4FE0;
}
.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: #1B4FE0;
}
.search-results .no-results .action-prompt a:visited {
  color: #1B4FE0;
}

.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: #2a4169;
  font-size: 13px;
}
.search-result-votes-icon, .search-result-meta-count-icon {
  color: #1B4FE0;
  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 {
  margin-bottom: 10px;
  height: 320px;
}
.service-catalog-description {
  display: flow-root;
}
.service-catalog-description a {
  color: #1B4FE0;
  text-decoration: underline;
}
.service-catalog-description a:visited {
  color: #1B4FE0;
}
.service-catalog-description a:hover, .service-catalog-description a:active, .service-catalog-description a:focus {
  color: rgba(184, 21, 21, 0.08);
}
.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: #dde3ed;
}
.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: #e4e9f1;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}
.service-catalog-description pre {
  background: #e4e9f1;
  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: #2a4169;
  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;
}

/* ==========================================================================
   STACK THEME LAYER — by Artica
   Restyles Copenhagen 1:1 to the Stack design system (software & cloud).

   The system in one line: anything that is *metadata* — a count, an ID, a
   date, a status, a tab label, a button label, a breadcrumb, an eyebrow — is
   uppercase mono with wide tracking; anything that is *content* — a title, a
   description, prose — is Space Grotesk (headings) or IBM Plex Sans (body).
   Structure is carried by 1px borders, not shadows.
   ========================================================================== */

/***** Design tokens *****
 * Change these (plus the manifest defaults, fonts, and icon set) to re-skin
 * the theme. Values marked [setting] are wired to manifest settings and get
 * substituted server-side by Zendesk before the CSS is served. Everything
 * derived from the brand color is computed with darken()/lighten() so the
 * whole system tracks the admin's brand color rather than pinning hexes.
 *****/
:root {
  /* wired to manifest settings */
  --stack-brand: #1B4FE0;              /* [setting] primary actions, links, accents, hero */
  --stack-brand-hover: #1641b7;  /* [setting] filled-control hover */
  --stack-brand-bright: #4e77ea; /* [setting] hover on dark surfaces, status dot */
  --stack-tint: #e9eefc;   /* [setting] selected states, icon tiles, badges */
  --stack-tint-2: #f7f9fe; /* [setting] info callout background */
  --stack-tint-border: #c5d2f8; /* [setting] sidebar hover rule */
  --stack-soft-on-dark: #8ea8f1; /* [setting] eyebrow on dark surfaces */
  --stack-on-brand: #FFFFFF;      /* [setting] text on filled brand surfaces */
  --stack-ink: #0D1420;                 /* [setting] headings & primary text */
  --stack-bg: #EEF1F6;            /* [setting] page background */
  --stack-link: #1B4FE0;                /* [setting] link color */
  --stack-link-hover: rgba(184, 21, 21, 0.08);    /* [setting] link hover */
  --stack-link-visited: #1B4FE0; /* [setting] visited link color */
  --stack-font-heading: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;      /* [setting] Space Grotesk by default */
  --stack-font-body: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;            /* [setting] IBM Plex Sans by default */

  /* mono is structural to the design language, so it is not user-editable */
  --stack-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* fixed design constants */
  --stack-ink-static: #0D1420;      /* dark surfaces: community band, code, submit */
  --stack-ink-2: #2A3243;           /* body copy inside articles */
  --stack-slate: #3E4859;           /* header nav links, form labels */
  --stack-mid: #5C6678;             /* secondary text, icons */
  --stack-muted: #77808F;           /* tertiary text, inactive tab labels */
  --stack-faint: #8A93A5;           /* meta text, timestamps */
  --stack-placeholder: #98A1B2;     /* ::placeholder */
  --stack-divider-faint: #B4BCC9;   /* breadcrumb separators, chevrons */

  --stack-line-strong: #C9D0DC;     /* input & secondary-button borders */
  --stack-line: #DCE1EA;            /* card, header, footer borders */
  --stack-line-soft: #E6EAF1;       /* section dividers inside cards */
  --stack-line-softer: #EDF0F5;     /* list-row dividers */
  --stack-line-softest: #F2F5FA;    /* detail-row dividers, hover fill */

  --stack-surface: #FFFFFF;         /* cards, header, footer */
  --stack-surface-alt: #F5F7FB;     /* table headers, toolbar strips */
  --stack-surface-hover: #F7F9FC;   /* row hover, dropzone, muted panels */

  --stack-code-text: #C7D2F0;       /* code text on the dark code block */

  /* status triplets: background / text / border */
  --stack-open-bg: #FCEBEA;   --stack-open-fg: #A5231C;   --stack-open-bd: #F3CFCC;
  --stack-good-bg: #E9F5EE;   --stack-good-fg: #186A42;   --stack-good-bd: #C9E5D5;
  --stack-warn-bg: #FDF4E3;   --stack-warn-fg: #8A6300;   --stack-warn-bd: #F0E0BC;
  --stack-warn-rule: #C08A00; /* warning callout left rule */
  --stack-warn-callout-bg: #FDF8EC;

  /* blueprint grid overlay (hero + community band) */
  --stack-grid-line: rgba(255, 255, 255, 0.07);

  /* the three shadows the theme allows itself */
  --stack-shadow-hero: 0 18px 40px rgba(9, 24, 66, 0.22);
  --stack-shadow-menu: 0 12px 32px rgba(13, 20, 32, 0.12);
  --stack-shadow-tag: 0 10px 28px rgba(13, 20, 32, 0.28);

  /* radius scale (pills stay literal 999px) */
  --stack-radius-card: 10px;
  --stack-radius-card-sm: 8px;
  --stack-radius-control: 6px;
  --stack-radius-badge: 4px;
  --stack-radius-tile: 8px;

  /* the one shared layout constant */
  --stack-container: 1220px;
}


/***** Stack fonts *****/
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/hc/theming_assets/01M34QY4DJ0DCCBABWK7TXEZ12) format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url(/hc/theming_assets/01M34QY40P5Y6K9BSCRBC3NWC5) format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/hc/theming_assets/01M34QY4GRYFEGEB4DH31S9M02) format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/hc/theming_assets/01M34QY31E149GJ7SBRPH6RNRR) format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/hc/theming_assets/01M34QY4DQ6MGVNYHSJ5356C2W) format("woff2");
}
@font-face {
  font-family: "Material Symbols Rounded";
  font-style: normal;
  font-weight: 100 700;
  font-display: block;
  src: url(/hc/theming_assets/01M34QY4DHG7QRADPJ4DACCFMG) format("woff2");
}

.stack-icon {
  font-family: "Material Symbols Rounded";
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}

/* The signature micro-label. Applied directly wherever the DOM is ours, and
   mixed into Copenhagen's own classes further down. */
.stack-micro {
  font-family: var(--stack-font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.4;
}


/***** Base *****/
body {
  background-color: var(--stack-bg);
  color: var(--stack-ink);
  font-family: var(--stack-font-body);
  font-size: 16px;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

/* Footer pinned to the viewport bottom on short pages. */
body > main {
  flex: 1 0 auto;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--stack-font-heading);
  font-weight: 600;
  color: var(--stack-ink);
}

h1 {
  font-size: 40px;
  letter-spacing: -0.035em;
  line-height: 1.12;
}

h2 {
  font-size: 24px;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

h3 {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

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

:focus-visible {
  outline: 2px solid var(--stack-brand);
  outline-offset: 2px;
  border-radius: 2px;
}

.container {
  max-width: var(--stack-container);
  margin: 0 auto;
  padding: 0 32px;
}
@media (min-width: 1160px) {
  .container {
    padding: 0 32px;
    width: 100%;
  }
}

.container-divider {
  display: none;
}

.error-page {
  max-width: var(--stack-container);
  margin: 0 auto;
  padding: 0 32px;
}
@media (min-width: 1160px) {
  .error-page {
    padding: 0 32px;
    width: 100%;
  }
}


/***** Buttons *****/
/* Primary: filled brand, mono uppercase label, 6px radius. */
.button-large,
.hbs-form input[type=submit],
.post-sidebar .button-large {
  background-color: var(--stack-brand);
  border: 1px solid var(--stack-brand);
  border-radius: var(--stack-radius-control);
  color: var(--stack-on-brand);
  font-family: var(--stack-font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.4;
  min-width: 0;
  padding: 13px 28px;
  transition: background-color 0.15s, border-color 0.15s;
}
.button-large:hover, .button-large:focus, .button-large:active,
.hbs-form input[type=submit]:hover, .hbs-form input[type=submit]:focus {
  background-color: var(--stack-brand-hover);
  border-color: var(--stack-brand-hover);
  color: var(--stack-on-brand);
  text-decoration: none;
}

/* Secondary: white, strong hairline, ink label; hover turns brand. */
.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: var(--stack-surface);
  border: 1px solid var(--stack-line-strong);
  border-radius: var(--stack-radius-control);
  color: var(--stack-ink);
  font-family: var(--stack-font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.4;
  padding: 11px 22px;
  transition: border-color 0.15s, color 0.15s;
}
.button:hover, .button:focus, .button:active,
.subscriptions-subscribe button:hover, .subscriptions-subscribe button:focus,
.community-follow button:hover, .community-follow button:focus,
.article-subscribe button:hover, .article-subscribe button:focus,
.section-subscribe button:hover, .section-subscribe button:focus {
  border-color: var(--stack-brand);
  color: var(--stack-brand);
  background-color: var(--stack-surface);
  text-decoration: none;
}

/* .button-large wins over .button when both are present (Copenhagen stacks them). */
.button.button-large {
  background-color: var(--stack-brand);
  border-color: var(--stack-brand);
  color: var(--stack-on-brand);
}
.button.button-large:hover, .button.button-large:focus {
  background-color: var(--stack-brand-hover);
  border-color: var(--stack-brand-hover);
  color: var(--stack-on-brand);
}

.button-secondary {
  color: var(--stack-ink);
  border: 1px solid var(--stack-line-strong);
  background-color: var(--stack-surface);
  border-radius: var(--stack-radius-control);
}
.button-secondary:hover, .button-secondary:focus, .button-secondary:active {
  color: var(--stack-brand);
  border-color: var(--stack-brand);
  background-color: var(--stack-surface);
}


/***** Tables (Copenhagen's generic .table) *****/
.table {
  background: var(--stack-surface);
  border: 1px solid var(--stack-line);
  border-radius: var(--stack-radius-card);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}
.table th,
.table th a {
  color: var(--stack-mid);
  font-family: var(--stack-font-mono);
  font-weight: 400;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.table thead tr {
  background: var(--stack-surface-alt);
  border-bottom: 1px solid var(--stack-line);
}
.table tr {
  border-bottom: 1px solid var(--stack-line-softer);
}
.table tbody tr:hover {
  background: var(--stack-surface-hover);
}
@media (min-width: 768px) {
  .table td, .table th {
    padding: 15px 24px;
    height: auto;
  }
}
@media (min-width: 1024px) {
  .table td, .table th {
    padding: 17px 24px;
  }
}
.table td {
  font-size: 15px;
}


/***** Forms (hbs) *****/
.form {
  max-width: 760px;
}

.form-header {
  font-size: 38px;
  letter-spacing: -0.035em;
}

/* Labels above inputs: mono, uppercase, slate. */
.form-field label,
#service-catalog-item label {
  font-family: var(--stack-font-mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 9px;
  color: var(--stack-slate);
}

.form-field .optional {
  font-family: var(--stack-font-mono);
  font-weight: 400;
  color: var(--stack-faint);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hbs-form input,
.hbs-form textarea,
.search input,
.search textarea {
  color: var(--stack-ink);
  font-size: 15px;
  font-family: var(--stack-font-body);
}

.form-field input,
.form-field input[type=text] {
  background-color: var(--stack-surface);
  border: 1px solid var(--stack-line-strong);
  border-radius: var(--stack-radius-control);
  padding: 13px 15px;
}
.form-field input:focus,
.form-field input[type=text]:focus {
  border-color: var(--stack-brand);
}

.hbs-form textarea {
  background-color: var(--stack-surface);
  border: 1px solid var(--stack-line-strong);
  border-radius: var(--stack-radius-control);
  padding: 14px 16px;
}
.hbs-form textarea:focus {
  border-color: var(--stack-brand);
}

.hbs-form select, .search select {
  border: 1px solid var(--stack-line-strong);
  border-radius: var(--stack-radius-control);
  padding: 11px 34px 11px 12px;
  color: var(--stack-ink);
  font-size: 15px;
  background-color: var(--stack-surface);
}
.hbs-form select:focus, .search select:focus {
  border-color: var(--stack-brand);
}

.form-field .nesty-input {
  background-color: var(--stack-surface);
  border: 1px solid var(--stack-line-strong);
  border-radius: var(--stack-radius-control);
  height: 46px;
  line-height: 46px;
  padding: 0 15px;
  font-size: 15px;
  color: var(--stack-ink);
}
.form-field .nesty-input:focus {
  border-color: var(--stack-brand);
}

.form-field .hc-multiselect-toggle {
  background-color: var(--stack-surface);
  border: 1px solid var(--stack-line-strong);
  border-radius: var(--stack-radius-control);
}
.form-field .hc-multiselect-toggle:focus {
  border-color: var(--stack-brand);
}

.form-field p {
  color: var(--stack-muted);
  font-size: 14px;
}

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


/***** Header *****/
.header {
  background-color: var(--stack-surface);
  border-bottom: 1px solid var(--stack-line);
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0 max(32px, calc((100% - (var(--stack-container) - 64px)) / 2));
  height: 68px;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 60;
  gap: 24px;
}
@media (min-width: 1160px) {
  .header {
    padding: 0 max(32px, calc((100% - (var(--stack-container) - 64px)) / 2));
    width: 100%;
  }
}

.logo a {
  display: flex;
  align-items: center;
  gap: 11px;
}
.logo a:hover {
  text-decoration: none;
}

.logo img {
  max-height: 28px;
  width: auto;
  border-radius: 5px;
}

.logo span {
  margin: 0;
  color: var(--stack-ink);
  font-family: var(--stack-font-heading);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.035em;
  white-space: nowrap;
}

.nav-wrapper-desktop {
  display: flex;
  align-items: center;
  gap: 30px;
}
@media (max-width: 1023px) {
  .nav-wrapper-desktop {
    display: none;
  }
}

.user-nav-list {
  display: flex;
  align-items: center;
  gap: 30px;
}

/* Nav links: mono 11.5px, wide tracking, uppercase; hover → brand. */
.nav-wrapper-desktop a {
  color: var(--stack-slate);
  font-family: var(--stack-font-mono);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 0;
  transition: color 0.15s;
}
[dir=rtl] .nav-wrapper-desktop a {
  padding: 0;
}
.nav-wrapper-desktop a:hover,
.nav-wrapper-desktop a:focus {
  color: var(--stack-brand);
  text-decoration: none;
}

/* Ask AI keeps the primary-button treatment so it still reads as an action. */
.nav-wrapper-desktop .ask-ai,
.nav-wrapper-mobile .ask-ai {
  background-color: var(--stack-brand);
  border: 1px solid var(--stack-brand);
  color: var(--stack-on-brand);
  border-radius: var(--stack-radius-control);
  padding: 8px 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.nav-wrapper-desktop .ask-ai:hover,
.nav-wrapper-desktop .ask-ai:focus {
  background-color: var(--stack-brand-hover);
  border-color: var(--stack-brand-hover);
  color: var(--stack-on-brand);
}

/* User chip: bordered pill-ish box with avatar, name, chevron. */
.user-info > button {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--stack-ink);
  font-size: 13.5px;
  font-weight: 500;
  font-family: var(--stack-font-body);
  background: var(--stack-surface);
  border: 1px solid var(--stack-line);
  border-radius: var(--stack-radius-control);
  padding: 6px 10px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.user-info > button:hover, .user-info > button:focus {
  color: var(--stack-ink);
  border-color: var(--stack-brand);
}
.user-info > button > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.user-info > button .dropdown-chevron-icon {
  color: var(--stack-mid);
}

.header .user-avatar {
  height: 22px;
  width: 22px;
  border-radius: 50%;
}

.nav-wrapper-mobile .menu-button-mobile {
  min-height: 44px;
  min-width: 44px;
  border: 1px solid var(--stack-line);
  border-radius: var(--stack-radius-control);
  background: var(--stack-surface);
  gap: 8px;
}
.nav-wrapper-mobile .menu-list-mobile {
  top: 68px;
  border-color: var(--stack-line);
  background: var(--stack-surface);
}
.nav-wrapper-mobile .menu-list-mobile-items a,
.nav-wrapper-mobile .menu-list-mobile-items button {
  padding: 13px 24px;
  font-size: 15px;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.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,
.nav-wrapper-mobile .menu-list-mobile-items button:active,
.nav-wrapper-mobile .menu-list-mobile-items button:focus,
.nav-wrapper-mobile .menu-list-mobile-items button:hover {
  background-color: var(--stack-line-softest);
  color: var(--stack-brand);
  text-decoration: none;
}
.nav-wrapper-mobile .menu-list-mobile-items .nav-divider {
  border-color: var(--stack-line-soft);
}

.user-nav[aria-expanded=true] {
  border-color: var(--stack-line);
  top: 68px;
}

.skip-navigation {
  background-color: var(--stack-ink-static);
  color: #FFFFFF;
  border-radius: var(--stack-radius-control);
}

/***** Dropdown menus (user chip, language, topic filters) *****/
.dropdown-menu {
  background: var(--stack-surface);
  border: 1px solid var(--stack-line);
  border-radius: var(--stack-radius-card-sm);
  box-shadow: var(--stack-shadow-menu);
  padding: 6px;
  min-width: 216px;
}
.dropdown-menu [role^=menuitem] {
  padding: 9px 12px;
  font-size: 13.5px;
  font-family: var(--stack-font-body);
  color: var(--stack-ink);
  border-radius: 5px;
}
.dropdown-menu [role^=menuitem]:hover,
.dropdown-menu [role^=menuitem]:focus {
  background-color: var(--stack-line-softest);
  color: var(--stack-brand);
  text-decoration: none;
}
.dropdown-menu .separator {
  border-top: 1px solid var(--stack-line-soft);
  margin: 5px 8px;
}


/***** Footer *****/
.footer {
  background-color: var(--stack-surface);
  color: var(--stack-mid);
  border-top: 1px solid var(--stack-line);
  margin-top: auto;
  padding: 0;
  flex-shrink: 0;
}
.footer a {
  color: var(--stack-mid);
}
.footer-inner {
  max-width: var(--stack-container);
  margin: 0 auto;
  padding: 32px;
  align-items: center;
  gap: 24px;
  display: flex;
  justify-content: space-between;
}
@media (min-width: 1160px) {
  .footer-inner {
    padding: 32px;
    width: 100%;
  }
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.footer .footer-brand, .footer .footer-brand:visited {
  color: var(--stack-ink);
}
.footer-brand:hover, .footer-brand:focus, .footer-brand:active {
  text-decoration: none;
}
.footer-brand:hover .footer-brand-name {
  color: var(--stack-brand);
}

/* Footer logo mark: 22×22 dark square, two bars — the header mark's small sibling. */
.footer-brand-logo {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  background: var(--stack-ink-static);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.5px;
  flex-shrink: 0;
}
.footer-brand-logo::before,
.footer-brand-logo::after {
  content: "";
  display: block;
  height: 2px;
  border-radius: 1px;
  background: #FFFFFF;
}
.footer-brand-logo::before { width: 11px; }
.footer-brand-logo::after { width: 11px; opacity: 0.6; }

.footer-brand-name {
  font-family: var(--stack-font-heading);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.03em;
  transition: color 0.15s;
}

/* Language selector: bordered control with a mono locale label. */
.footer-language-selector,
.footer-locale-static {
  display: flex;
  align-items: center;
}
.footer-language-selector .dropdown-toggle,
.footer-locale-static {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--stack-line);
  border-radius: var(--stack-radius-control);
  padding: 8px 14px;
  background: var(--stack-surface);
  color: var(--stack-mid);
  font-family: var(--stack-font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.footer-language-selector .dropdown-toggle:hover,
.footer-language-selector .dropdown-toggle:focus {
  border-color: var(--stack-brand);
  color: var(--stack-brand);
}
.footer-language-icon {
  font-size: 17px;
}

/* Floating "Powered by Artica" tag — fixed, centered, above everything. */
.stack-attribution {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 22px;
  z-index: 1000;
  background: var(--stack-ink-static);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  padding: 9px 20px;
  display: flex;
  align-items: center;
  gap: 9px;
  box-shadow: var(--stack-shadow-tag);
  font-family: var(--stack-font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #FFFFFF;
  white-space: nowrap;
}
.stack-attribution::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--stack-brand-bright);
  flex-shrink: 0;
}
a.stack-attribution,
a.stack-attribution:visited {
  color: #FFFFFF;
  text-decoration: none;
}
a.stack-attribution:hover,
a.stack-attribution:focus {
  color: #FFFFFF;
  text-decoration: none;
  border-color: rgba(255, 255, 255, 0.4);
}


/***** Breadcrumbs *****/
/* Mono, uppercase, "/" separators in faint gray. */
.breadcrumbs {
  flex-wrap: wrap;
  row-gap: 4px;
  margin: 0;
}
.breadcrumbs li {
  color: var(--stack-mid);
  font-family: var(--stack-font-mono);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
}
@media (max-width: 767px) {
  .breadcrumbs li {
    max-width: 220px;
  }
}
.breadcrumbs li + li::before {
  content: "/";
  color: var(--stack-divider-faint);
  margin: 0 10px;
  font-family: var(--stack-font-mono);
}
.breadcrumbs li a,
.breadcrumbs li a:visited {
  color: var(--stack-brand);
}
.breadcrumbs li a:hover {
  color: var(--stack-link-hover);
}

/* Shared page-top row: breadcrumb left, compact search right. */
.sub-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0;
  margin-bottom: 0;
}


/***** Search field *****/
.search {
  background-color: var(--stack-surface);
  border: 1px solid var(--stack-line);
  border-radius: var(--stack-radius-control);
  align-items: center;
  transition: border-color 0.15s;
}
.search:focus-within {
  border-color: var(--stack-brand);
}
.search input[type=search] {
  color: var(--stack-ink);
  font-size: 14px;
  height: 40px;
  background-color: transparent;
  border-radius: var(--stack-radius-control);
}
.search input[type=search]:focus {
  color: var(--stack-ink);
}
.search input[type=search]::placeholder {
  color: var(--stack-placeholder);
  opacity: 1;
}
.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;
}

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

/* Submit sits inside the field, dark, square — hero variant restyles it further. */
.search input[type=submit] {
  background-color: var(--stack-ink-static);
  color: #FFFFFF;
  border: 0;
  border-radius: 0;
  padding: 0 22px;
  margin: 0;
  align-self: stretch;
  font-family: var(--stack-font-mono);
  font-weight: 400;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  flex: none;
  transition: background-color 0.15s;
}
.search input[type=submit]:hover,
.search input[type=submit]:focus {
  background-color: var(--stack-brand);
}
.search input[type=submit]:focus-visible {
  outline: 2px solid var(--stack-brand);
  outline-offset: -3px;
}

/* The clear (×) button is appended last in the DOM by script.js, so flex
   `order` keeps it inside the field, before the submit: [input][×][Search] */
.search input[type=search] { order: 1; }
.search .clear-button {
  order: 2;
  color: var(--stack-faint);
  background-color: transparent;
  width: 28px;
  height: 28px;
  flex: none;
  align-self: center;
  padding: 0;
  margin: 0 6px;
  border-radius: var(--stack-radius-badge);
}
.search input[type=submit] { order: 3; }
.search .clear-button svg {
  width: 11px;
  height: 11px;
}
.search .clear-button:hover {
  background-color: var(--stack-tint);
  color: var(--stack-brand);
}
.search .clear-button:focus {
  box-shadow: none;
  outline: 2px solid var(--stack-brand);
  outline-offset: -2px;
}
[dir=ltr] .search-has-value input[type=search],
[dir=ltr] .search .clear-button {
  border-radius: var(--stack-radius-control);
}

.search-icon {
  left: 14px;
  width: 19px;
  height: 19px;
  color: var(--stack-faint);
}
[dir=rtl] .search-icon {
  right: 14px;
}

/* The compact search that rides in the breadcrumb row. */
.sub-nav .search-container {
  width: 320px;
  flex-shrink: 0;
  position: relative;
}
.sub-nav .search-container .search {
  width: 100%;
}
/***** Hero *****/
/* Full-bleed brand band with a blueprint grid and two hairline circles. */
.hero {
  background-color: var(--stack-brand);
  background-image:
    linear-gradient(var(--stack-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--stack-grid-line) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: 0 0;
  height: auto;
  padding: 88px 32px 92px;
  margin-bottom: 0;
  position: relative;
  overflow: hidden;
}

/* Decorative geometry — off-canvas to the right, purely CSS. */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.hero::before {
  width: 420px;
  height: 420px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  top: -140px;
  right: -90px;
}
.hero::after {
  width: 300px;
  height: 300px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  bottom: -130px;
  right: 90px;
}

.hero-inner {
  position: relative;
  z-index: 1;
  transform: none;
  top: auto;
  max-width: calc(var(--stack-container) - 64px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 0;
}

/* Eyebrow above the hero headline. */
.hero-eyebrow {
  font-family: var(--stack-font-mono);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  margin: 0 0 20px;
}

.hero-title {
  margin: 0 0 34px;
  font-family: var(--stack-font-heading);
  font-weight: 600;
  font-size: 56px;
  line-height: 1.06;
  color: #FFFFFF;
  letter-spacing: -0.035em;
  max-width: 820px;
  text-wrap: pretty;
}

.hero-search {
  position: relative;
  width: 100%;
  max-width: 660px;
}

.hero .search {
  border: 0;
  border-radius: var(--stack-radius-card-sm);
  overflow: hidden;
  box-shadow: var(--stack-shadow-hero);
  padding: 0;
}
.hero .search input[type=search] {
  height: 58px;
  font-size: 16px;
}
[dir=ltr] .hero .search input[type=search] {
  padding-left: 50px;
}
.hero .search-icon {
  left: 16px;
  width: 22px;
  height: 22px;
  z-index: 1;
}
[dir=rtl] .hero .search-icon {
  right: 16px;
}
.hero .search input[type=submit] {
  padding: 0 26px;
}

/* Community hero variant: same geometry on the dark surface. */
.community-hero {
  background-color: var(--stack-ink-static);
  background-image:
    linear-gradient(var(--stack-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--stack-grid-line) 1px, transparent 1px);
  background-size: 48px 48px;
  padding: 66px 32px 70px;
  margin-bottom: 0;
}
.community-hero::before,
.community-hero::after {
  display: none;
}
.community-hero .hero-inner {
  max-width: calc(var(--stack-container) - 64px);
}
.community-hero .hero-eyebrow {
  color: var(--stack-soft-on-dark);
  margin-bottom: 16px;
}
.community-hero .hero-title {
  font-size: 44px;
  margin-bottom: 30px;
}
.community-hero .hero-search {
  max-width: 560px;
}
.community-hero .search {
  box-shadow: none;
}
.community-hero .search input[type=search] {
  height: 52px;
  font-size: 15.5px;
}
.community-hero .search input[type=submit] {
  background-color: var(--stack-brand);
}
.community-hero .search input[type=submit]:hover,
.community-hero .search input[type=submit]:focus {
  background-color: var(--stack-brand-hover);
}
.community-hero .search {
  border-radius: var(--stack-radius-card-sm);
  overflow: hidden;
}

/* Service catalog hero variant: brand band, no search. */
.service-catalog-hero {
  background-color: var(--stack-brand);
  background-image:
    linear-gradient(var(--stack-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--stack-grid-line) 1px, transparent 1px);
  background-size: 56px 56px;
  height: auto;
  padding: 60px 32px 64px;
  text-align: left;
  margin-bottom: 0;
}

.service-catalog-hero-inner {
  max-width: calc(var(--stack-container) - 64px);
  margin: 0 auto;
  display: block;
}

.service-catalog-hero-eyebrow {
  font-family: var(--stack-font-mono);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  margin: 0 0 18px;
}

.service-catalog-hero-title {
  margin: 0;
  font-family: var(--stack-font-heading);
  font-weight: 600;
  font-size: 44px;
  color: #FFFFFF;
  letter-spacing: -0.035em;
  line-height: 1.1;
}

.service-catalog-hero-subtitle {
  margin: 14px 0 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 16px;
  max-width: 620px;
}

.service-catalog-hero-badge {
  display: none;
}


/***** Page headers *****/
.page-header {
  display: block;
}
.page-header h1 {
  font-size: 40px;
  letter-spacing: -0.035em;
  margin: 0;
  display: block;
}

/* Mono eyebrow above a page title: "CATEGORY · 32 ARTICLES". */
.stack-eyebrow {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--stack-font-mono);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stack-brand);
  margin: 0 0 14px;
}
.stack-eyebrow > * + *:not(:empty)::before {
  content: "\00b7";
  margin-right: 8px;
  color: var(--stack-brand);
}
.stack-eyebrow .stack-count {
  color: var(--stack-brand);
}
.stack-eyebrow .stack-count:empty {
  display: none;
}

.page-header-icon {
  display: none;
}

.page-header-description {
  font-style: normal;
  color: var(--stack-mid);
  font-size: 17px;
  line-height: 1.55;
  margin: 16px 0 0;
  max-width: 640px;
}


/***** Section heading rows (H2 + trailing rule, or H2 + mono count) *****/
/* "Promoted articles" / "Recent activity": title then a hairline to the edge. */
.stack-section-heading {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 0 0 18px;
}
.stack-section-heading h2 {
  margin: 0;
  flex-shrink: 0;
}
.stack-section-heading::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--stack-line);
}

/* "Browse the knowledge base" + right-aligned mono count. */
.stack-section-heading.stack-section-heading-count::after {
  display: none;
}
.stack-section-heading.stack-section-heading-count {
  justify-content: space-between;
}
.stack-count {
  font-family: var(--stack-font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stack-faint);
}


/***** Home page rhythm *****/
.home-page-section,
.section.knowledge-base,
.section.home-section {
  margin: 0;
  padding: 56px 0 0;
}
.section.knowledge-base {
  padding-top: 56px;
}
.knowledge-base .categories {
  margin: 0;
}
.knowledge-base .articles {
  margin: 56px 0 0;
}
.knowledge-base .articles h2 {
  margin: 0;
}


/***** Blocks: home category cards *****/
.blocks-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 0;
  counter-reset: stack-block;
  list-style: none;
  padding: 0;
}
@media (min-width: 768px) {
  .blocks-list {
    margin: 0;
  }
}

.blocks-item {
  counter-increment: stack-block;
  margin: 0;
  height: auto;
  width: auto;
  border: 1px solid var(--stack-line);
  border-radius: var(--stack-radius-card-sm);
  background: var(--stack-surface);
  transition: border-color 0.15s, transform 0.15s;
}
.blocks-item:hover,
.blocks-item:focus-within,
.blocks-item:active {
  border-color: var(--stack-brand);
  transform: translateY(-2px);
}
.blocks-item:hover *,
.blocks-item:focus *,
.blocks-item:active * {
  color: inherit;
}

.blocks-item-link {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  padding: 24px 24px 22px;
  border: 0;
  color: var(--stack-ink);
  text-align: left;
}
.blocks-item-link:hover,
.blocks-item-link:focus {
  text-decoration: none;
  color: var(--stack-ink);
}

/* Top row: mono index on the left, arrow_outward on the right. */
.blocks-item-icon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: auto;
  background: none;
  border-radius: 0;
  margin: 0 0 4px;
  font-family: var(--stack-font-mono);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--stack-brand);
}
.blocks-item-icon::before {
  content: counter(stack-block, decimal-leading-zero);
}
.blocks-item-icon .stack-icon {
  font-size: 18px;
  color: var(--stack-divider-faint);
}

.blocks-item-title {
  font-family: var(--stack-font-heading);
  font-weight: 600;
  font-size: 18.5px;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--stack-ink);
  margin: 0;
}

.blocks-item-description {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--stack-mid);
  margin: 0;
}
.blocks-item-description:not(:empty) {
  margin: 0;
}

/* Card footer: hairline rule + mono count, pushed to the bottom of the card. */
.blocks-item-meta {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--stack-line-softer);
  font-family: var(--stack-font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stack-faint);
  counter-reset: stack-subcount;
}
.blocks-item-meta .stack-tick {
  display: none;
}
.blocks-item-meta .stack-tick + .stack-tick,
.blocks-item-meta .stack-tick:first-child {
  counter-increment: stack-subcount;
}
.blocks-item-meta:empty {
  display: none;
}


/***** Promoted articles *****/
.article-list.promoted-articles {
  display: block;
  background: var(--stack-surface);
  border: 1px solid var(--stack-line);
  border-radius: var(--stack-radius-card-sm);
  overflow: hidden;
  margin: 0;
  padding: 0;
  list-style: none;
}

.promoted-articles-item {
  display: block;
  width: 100%;
  float: none;
  text-align: left;
  border-bottom: 1px solid var(--stack-line-softer);
  padding: 0;
  margin: 0;
  transition: background-color 0.15s;
}
.promoted-articles-item:last-child {
  border-bottom: 0;
}
.promoted-articles-item:hover {
  background: var(--stack-surface-hover);
}

.promoted-articles-item a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 22px;
  font-size: 15.5px;
  font-weight: 500;
  color: var(--stack-ink);
  border: 0;
}
.promoted-articles-item a:hover,
.promoted-articles-item a:focus {
  color: var(--stack-brand);
  text-decoration: none;
}
.promoted-articles-item:last-child a {
  border: 0;
}

/* Bookmark glyph in place of Copenhagen's leading marker. */
.promoted-articles-item a::before {
  content: "bookmark";
  font-family: "Material Symbols Rounded";
  font-size: 19px;
  font-weight: normal;
  line-height: 1;
  color: var(--stack-brand);
  flex-shrink: 0;
  font-feature-settings: "liga";
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}


/***** Community band on the home page *****/
.section.home-section.community {
  text-align: left;
  background: var(--stack-ink-static);
  background-image: linear-gradient(90deg, var(--stack-grid-line) 1px, transparent 1px);
  background-size: 40px 40px;
  border-radius: var(--stack-radius-card);
  padding: 44px 48px;
  margin: 56px 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.community-copy {
  flex: 1;
  min-width: 0;
}
.community h2 {
  font-family: var(--stack-font-mono);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stack-soft-on-dark);
  margin: 0 0 14px;
}

.community-image {
  margin: 0;
  background: none;
  background-image: none;
  height: auto;
  min-height: 0;
  width: auto;
}

.community-banner-title {
  font-family: var(--stack-font-heading);
  font-weight: 600;
  font-size: 32px;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: #FFFFFF;
  margin: 0 0 12px;
}

.community-banner-subtitle {
  font-size: 15.5px;
  line-height: 1.6;
  color: #A9B2C4;
  margin: 0;
  max-width: 520px;
}

/* The two stacked actions on the right of the band. */
.community-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-shrink: 0;
}
.community a.community-link,
.community a.community-link:visited {
  background: var(--stack-brand);
  border: 1px solid var(--stack-brand);
  color: var(--stack-on-brand);
  border-radius: var(--stack-radius-control);
  padding: 12px 24px;
  font-family: var(--stack-font-mono);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  transition: background-color 0.15s, border-color 0.15s;
}
.community a.community-link,
.community .community-new-post {
  text-decoration: none;
}
.community a.community-link:hover,
.community a.community-link:focus {
  background: var(--stack-brand-bright);
  border-color: var(--stack-brand-bright);
  color: var(--stack-on-brand);
  text-decoration: none;
}

/* On-dark ghost button. */
.community .community-new-post,
.community .community-new-post:visited {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #FFFFFF;
  border-radius: var(--stack-radius-control);
  padding: 12px 24px;
  font-family: var(--stack-font-mono);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  transition: border-color 0.15s;
}
.community .community-new-post:hover,
.community .community-new-post:focus {
  border-color: #FFFFFF;
  color: #FFFFFF;
  text-decoration: none;
}


/***** Recent activity *****/
.section.home-section.activity {
  padding-top: 56px;
}

.recent-activity-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 0 0 18px;
  font-family: var(--stack-font-heading);
  font-weight: 600;
  font-size: 24px;
  letter-spacing: -0.025em;
}
.recent-activity-header::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--stack-line);
}

.recent-activity-list {
  background: var(--stack-surface);
  border: 1px solid var(--stack-line);
  border-radius: var(--stack-radius-card-sm);
  overflow: hidden;
  margin: 0;
  padding: 0;
  list-style: none;
}

.recent-activity-item {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 24px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--stack-line-softer);
  margin: 0;
  transition: background-color 0.15s;
}
.recent-activity-item > h3 {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  font-size: inherit;
  font-weight: 400;
  letter-spacing: normal;
}
.recent-activity-item:last-child {
  border-bottom: 0;
}
.recent-activity-item:hover {
  background: var(--stack-surface-hover);
}

/* Category name above the title, in mono brand. */
.recent-activity-item-parent {
  display: block;
  order: -1;
  font-family: var(--stack-font-mono);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stack-brand);
  margin: 0 0 5px;
}
.recent-activity-item-parent:hover {
  color: var(--stack-link-hover);
}

.recent-activity-item-link,
.recent-activity-item-link:visited {
  display: block;
  font-size: 15.5px;
  font-weight: 400;
  color: var(--stack-ink);
  line-height: 1.4;
}
.recent-activity-item-link:hover,
.recent-activity-item-link:focus {
  color: var(--stack-brand);
  text-decoration: none;
}

.recent-activity-item > .recent-activity-item-link {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
}

.recent-activity-item-meta {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-shrink: 0;
  margin: 0;
}

.recent-activity-item-time,
.recent-activity-item-comment {
  font-family: var(--stack-font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--stack-faint);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.recent-activity-comment-icon svg {
  width: 16px;
  height: 16px;
  color: var(--stack-divider-faint);
}

/* "See more" row rendered as the last line of the card. */
.recent-activity-controls {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--stack-line-softer);
  text-align: left;
}
.recent-activity-controls a,
.recent-activity-controls button {
  display: block;
  padding: 16px 22px;
  font-family: var(--stack-font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stack-brand);
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  width: 100%;
}
.recent-activity-controls a:hover,
.recent-activity-controls button:hover {
  background: var(--stack-surface-hover);
  text-decoration: none;
}


/***** Category page *****/
.category-container {
  display: block;
  padding-bottom: 80px;
}

.category-content {
  width: 100%;
  margin: 0;
}

/* Header card. */
.category-content .page-header {
  background: var(--stack-surface);
  border: 1px solid var(--stack-line);
  border-radius: var(--stack-radius-card);
  padding: 44px 48px;
  margin: 0 0 24px;
}
.category-content .page-header h1 {
  font-size: 44px;
  letter-spacing: -0.035em;
}

/* Two-column grid of section cards. */
.section-tree {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin: 0;
}

.section-tree .section {
  background: var(--stack-surface);
  border: 1px solid var(--stack-line);
  border-radius: var(--stack-radius-card);
  padding: 28px 30px;
  margin: 0;
  display: flex;
  flex-direction: column;
  transition: border-color 0.15s;
}
.section-tree .section:hover {
  border-color: var(--stack-brand);
}

.section-tree-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--stack-line-softer);
  margin: 0 0 4px;
}
.section-tree-title a {
  font-family: var(--stack-font-heading);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--stack-ink);
}
.section-tree-title a:hover {
  color: var(--stack-brand);
  text-decoration: none;
}
/* Mono article count on the right of the section card header. */
.section-tree-title .stack-count {
  flex-shrink: 0;
}

.section-tree .article-list {
  margin: 0;
  padding: 0;
  list-style: none;
  flex: 1;
}

.article-list-item {
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.article-list-item a.article-list-link {
  display: block;
  padding: 9px 0;
  font-size: 15px;
  color: var(--stack-ink-2);
  border: 0;
  flex: 1;
  min-width: 0;
}
.article-list-item a.article-list-link:hover,
.article-list-item a.article-list-link:focus {
  color: var(--stack-brand);
  text-decoration: none;
}
.article-list-item .icon-star {
  color: var(--stack-brand);
  flex-shrink: 0;
}
.article-list-item .icon-lock {
  color: var(--stack-faint);
  flex-shrink: 0;
}

/* "See all N articles →" footer link above a hairline. */
.see-all-articles {
  display: block;
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--stack-line-softer);
  font-family: var(--stack-font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stack-brand);
}
.see-all-articles::after {
  content: " \2192";
}
.see-all-articles:hover {
  color: var(--stack-link-hover);
  text-decoration: none;
}


/***** Section page *****/
.section-container {
  display: block;
  padding-bottom: 80px;
}

.section-content {
  width: 100%;
  margin: 0;
  background: var(--stack-surface);
  border: 1px solid var(--stack-line);
  border-radius: var(--stack-radius-card);
  overflow: hidden;
}

.section-content .page-header {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 0 32px;
  padding: 40px 44px;
  border-bottom: 1px solid var(--stack-line-softer);
  margin: 0;
}
.section-content .page-header .stack-eyebrow,
.section-content .page-header h1 {
  grid-column: 1;
}
.section-content .page-header h1 {
  font-size: 40px;
  letter-spacing: -0.035em;
}
.section-content .page-header-description {
  font-size: 16.5px;
  grid-column: 1;
}
.section-content .section-subscribe {
  grid-column: 2;
  grid-row: 1 / span 2;
  justify-self: end;
}

/* Article rows: mono index, title, mono date, chevron. */
.section-content .article-list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: stack-article;
}
.section-content .article-list-item {
  counter-increment: stack-article;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 44px;
  border-bottom: 1px solid var(--stack-line-softer);
  transition: background-color 0.15s;
}
.section-content .article-list-item:last-child {
  border-bottom: 0;
}
.section-content .article-list-item:hover {
  background: var(--stack-surface-hover);
}
.section-content .article-list-item::before {
  content: counter(stack-article, decimal-leading-zero);
  font-family: var(--stack-font-mono);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--stack-divider-faint);
  width: 22px;
  flex-shrink: 0;
}
.section-content .article-list-item a.article-list-link {
  flex: 1;
  padding: 0;
  font-size: 16px;
  color: var(--stack-ink);
}
.section-content .article-list-item a.article-list-link:hover {
  color: var(--stack-brand);
}
/* Trailing chevron on each row. */
.section-content .article-list-item a.article-list-link::after {
  content: "chevron_right";
  font-family: "Material Symbols Rounded";
  font-size: 18px;
  font-weight: normal;
  line-height: 1;
  color: var(--stack-divider-faint);
  float: right;
  margin-left: 16px;
  font-feature-settings: "liga";
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

/* Sub-sections list, when a section nests. */
.section-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.section-list-item {
  border-bottom: 1px solid var(--stack-line-softer);
}
.section-list-item a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 44px;
  font-size: 16px;
  color: var(--stack-ink);
}
.section-list-item a:hover {
  background: var(--stack-surface-hover);
  color: var(--stack-brand);
  text-decoration: none;
}
.section-list-item a svg {
  color: var(--stack-divider-faint);
  flex-shrink: 0;
}
/***** Article page *****/
.article-container {
  display: grid;
  grid-template-columns: 264px 1fr;
  gap: 44px;
  align-items: start;
  padding-bottom: 80px;
}

/* Sidebar: "articles in this section" */
.article-sidebar {
  position: sticky;
  top: 92px;
  /* Copenhagen sizes these sidebars as flex children (flex:0 0 17% plus a
     matching max-width). Inside a grid track that max-width collapses the
     column to ~45px, so it has to be cleared explicitly. */
  width: auto;
  max-width: none;
  flex: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

.collapsible-sidebar {
  border: 0;
  padding: 0;
  margin: 0;
  background: none;
}

.collapsible-sidebar-title,
.search-results-sidebar .sidenav-title {
  display: block;
  font-family: var(--stack-font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stack-mid);
  padding: 0 0 12px;
  margin: 0 0 10px;
  border-bottom: 1px solid var(--stack-line);
}

.collapsible-sidebar-body ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

a.sidenav-item {
  display: block;
  padding: 10px 12px;
  border: 0;
  border-left: 2px solid transparent;
  font-size: 14px;
  line-height: 1.45;
  color: var(--stack-mid);
  border-radius: 0 var(--stack-radius-badge) var(--stack-radius-badge) 0;
  transition: color 0.15s, border-color 0.15s, background-color 0.15s;
}
a.sidenav-item:hover,
a.sidenav-item:focus {
  color: var(--stack-brand);
  border-left-color: var(--stack-tint-border);
  text-decoration: none;
}
a.sidenav-item.current-article {
  border-left: 2px solid var(--stack-brand);
  background: var(--stack-tint);
  font-weight: 600;
  color: var(--stack-brand);
}
[dir=rtl] a.sidenav-item.current-article {
  border-left: 0;
  border-right: 2px solid var(--stack-brand);
  border-radius: var(--stack-radius-badge) 0 0 var(--stack-radius-badge);
}

.article-sidebar-item {
  display: block;
  padding: 10px 12px;
  font-family: var(--stack-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stack-brand);
}

/* Article card */
.article {
  background: var(--stack-surface);
  border: 1px solid var(--stack-line);
  border-radius: var(--stack-radius-card);
  padding: 46px 56px 40px;
  max-width: 860px;
  width: 100%;
  margin: 0;
}

.article-header {
  display: block;
  margin: 0;
}
.stack-byline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--stack-line-soft);
}
.stack-byline .article-author {
  padding-bottom: 0;
  border-bottom: 0;
  flex: 1;
  min-width: 0;
}

.article-title {
  font-size: 40px;
  letter-spacing: -0.035em;
  line-height: 1.12;
  margin: 0 0 26px;
  display: block;
}

/* Byline row: avatar + name/date on the left, read time + follow on the right. */
.article-author {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--stack-line-soft);
  margin: 0;
  position: relative;
}

.article-avatar {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  margin: 0;
}
.article-avatar img,
.comment-avatar img,
.post-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.article-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.article-meta a {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--stack-ink);
}
.article-meta a:hover {
  color: var(--stack-brand);
}
.article-meta .meta-group {
  display: flex;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  flex-direction: row-reverse;
  justify-content: flex-end;
}
.article-meta .meta-data {
  font-family: var(--stack-font-mono);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stack-faint);
}

/* Read time, computed client-side from the rendered body. */
.stack-read-time {
  font-family: var(--stack-font-mono);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stack-faint);
  margin-left: auto;
}

.article-subscribe {
  flex-shrink: 0;
  margin: 0;
}
.article-subscribe button {
  background: var(--stack-brand);
  border-color: var(--stack-brand);
  color: var(--stack-on-brand);
}
.article-subscribe button:hover,
.article-subscribe button:focus {
  background: var(--stack-brand-hover);
  border-color: var(--stack-brand-hover);
  color: var(--stack-on-brand);
}

.article-info {
  margin: 0;
}

/***** Article body *****/
.article-body {
  padding-top: 30px;
  font-size: 16px;
  line-height: 1.72;
  color: var(--stack-ink-2);
}

.article-body p {
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.72;
}

.article-body h2 {
  font-size: 24px;
  letter-spacing: -0.025em;
  margin: 34px 0 14px;
}

.article-body h3 {
  font-size: 18px;
  letter-spacing: -0.02em;
  margin: 26px 0 12px;
}

.article-body ul,
.article-body ol {
  padding-left: 22px;
  margin: 0 0 16px;
}
[dir=rtl] .article-body ul,
[dir=rtl] .article-body ol {
  padding-left: 0;
  padding-right: 22px;
}

.article-body li {
  margin-bottom: 8px;
  line-height: 1.72;
}

.article-body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--stack-radius-card-sm);
}

/* Inline code */
.article-body code,
.post-body code,
.comment-body code {
  font-family: var(--stack-font-mono);
  font-size: 14px;
  background: var(--stack-bg);
  border: 1px solid var(--stack-line);
  border-radius: var(--stack-radius-badge);
  padding: 1px 6px;
  color: var(--stack-ink);
}

/* Code block */
.article-body pre,
.post-body pre {
  background: var(--stack-ink-static);
  border-radius: var(--stack-radius-card-sm);
  padding: 22px 24px;
  overflow-x: auto;
  border: 0;
  margin: 0 0 20px;
}
.article-body pre code,
.post-body pre code {
  font-family: var(--stack-font-mono);
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--stack-code-text);
  background: none;
  border: 0;
  padding: 0;
}

/* Info callout — blockquote carries it. */
.article-body blockquote,
.post-body blockquote,
.comment-body blockquote {
  border: 0;
  border-left: 3px solid var(--stack-brand);
  background: var(--stack-tint-2);
  padding: 16px 20px;
  border-radius: 0 var(--stack-radius-control) var(--stack-radius-control) 0;
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--stack-ink-2);
}
[dir=rtl] .article-body blockquote,
[dir=rtl] .post-body blockquote {
  border-left: 0;
  border-right: 3px solid var(--stack-brand);
  border-radius: var(--stack-radius-control) 0 0 var(--stack-radius-control);
}

/* Warning variant, opt-in from the article editor via a class. */
.article-body blockquote.warning,
.article-body blockquote.note {
  border-left-color: var(--stack-warn-rule);
  background: var(--stack-warn-callout-bg);
}

/* Table */
.article-body table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--stack-line);
  border-radius: var(--stack-radius-control);
  overflow: hidden;
  margin: 0 0 20px;
}
.article-body table th {
  background: var(--stack-surface-alt);
  font-family: var(--stack-font-mono);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stack-mid);
  padding: 11px 14px;
  text-align: left;
  border: 0;
  border-bottom: 1px solid var(--stack-line);
}
.article-body table td {
  font-size: 14.5px;
  padding: 11px 14px;
  border: 0;
  border-bottom: 1px solid var(--stack-line-softer);
  color: var(--stack-ink-2);
}
.article-body table tr:last-child td {
  border-bottom: 0;
}
.article-body table td:first-child {
  font-family: var(--stack-font-mono);
  font-size: 13px;
}

/***** Article footer: share, votes, callout *****/
.article-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 34px;
  padding-top: 24px;
  border-top: 1px solid var(--stack-line-soft);
}

.share {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Mono "SHARE" label ahead of the icons. */
.share::before {
  content: attr(data-label);
  font-family: var(--stack-font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stack-mid);
}
.share li {
  margin: 0;
  display: flex;
}
.share li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--stack-mid);
  border-radius: var(--stack-radius-badge);
}
.share a svg {
  width: 20px;
  height: 20px;
}
.share a:hover, .share a:focus {
  color: var(--stack-brand);
  background: var(--stack-line-softest);
}

.article-comment-count {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--stack-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--stack-faint);
}

/* Helpful widget */
.article-votes {
  background: var(--stack-surface-hover);
  border: 1px solid var(--stack-line);
  border-radius: var(--stack-radius-card-sm);
  padding: 26px;
  text-align: center;
  margin: 32px 0 0;
}

.article-votes-question {
  font-family: var(--stack-font-mono);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stack-mid);
  margin: 0 0 16px;
}

.article-votes-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0;
}

.article-vote {
  padding: 10px 30px;
}
.article-vote[aria-pressed=true] {
  background: var(--stack-brand);
  border-color: var(--stack-brand);
  color: var(--stack-on-brand);
}

.article-votes-count {
  display: block;
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--stack-faint);
  font-family: var(--stack-font-body);
}

.article-more-questions {
  text-align: center;
  font-size: 15px;
  color: var(--stack-mid);
  margin: 26px 0 0;
}
.article-more-questions:not(:has(*)) {
  display: none;
}
.article-more-questions a {
  color: var(--stack-brand);
}

.article-return-to-top {
  display: none;
}

/***** Recently viewed / related *****/
.article-relatives:not(:has(a)) {
  display: none;
}
.article-relatives {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  padding-top: 32px;
  margin-top: 32px;
  border-top: 1px solid var(--stack-line-soft);
}
.article-relatives section {
  margin: 0;
}
.article-relatives h3,
.related-articles h3 {
  font-family: var(--stack-font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stack-mid);
  margin: 0 0 6px;
}
.article-relatives ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.article-relatives ul a {
  display: block;
  padding: 8px 0;
  font-size: 14.5px;
  color: var(--stack-brand);
  line-height: 1.45;
}
.article-relatives ul a:hover {
  text-decoration: underline;
}

/***** Comments (article + post) *****/
.comment-overview {
  display: flex;
  align-items: baseline;
  gap: 14px;
  border: 0;
  padding: 0;
  margin: 0 0 18px;
}

.comment-heading {
  font-family: var(--stack-font-heading);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.02em;
  margin: 0;
}

.comment-callout {
  font-family: var(--stack-font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stack-faint);
  margin: 0;
  background: none;
  padding: 0;
  border: 0;
}

.article-comments,
.post-comments {
  margin-top: 34px;
  padding-top: 30px;
  border-top: 1px solid var(--stack-line-soft);
}

.comment-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.comment {
  display: block;
  padding: 20px 0;
  border-top: 1px solid var(--stack-line-softest);
  margin: 0;
}
.comment:first-child {
  border-top: 0;
  padding-top: 0;
}

.comment-author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.comment-avatar {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  margin: 0;
}

.comment-meta > span {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--stack-ink);
}
.comment-meta .meta-data,
.comment-meta time {
  font-family: var(--stack-font-mono);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stack-faint);
}

.comment-body {
  font-size: 15px;
  line-height: 1.65;
  color: var(--stack-ink-2);
  margin: 12px 0 0;
  padding-left: 46px;
}
[dir=rtl] .comment-body {
  padding-left: 0;
  padding-right: 46px;
}

.comment-labels {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.comment-form {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--stack-line-soft);
}

/* Comments-closed notice. */
.comment-closed-notice,
.comments-disabled-notice {
  background: var(--stack-surface-hover);
  border: 1px dashed var(--stack-line-strong);
  border-radius: var(--stack-radius-control);
  padding: 16px 18px;
  font-size: 14px;
  color: var(--stack-muted);
}


/***** Status labels & badges *****/
.status-label {
  display: inline-block;
  border-radius: var(--stack-radius-badge);
  padding: 4px 10px;
  font-family: var(--stack-font-mono);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid transparent;
  background: var(--stack-line-softest);
  color: var(--stack-mid);
  border-color: var(--stack-line);
}
.status-label-open,
.status-label-new {
  background: var(--stack-open-bg);
  color: var(--stack-open-fg);
  border-color: var(--stack-open-bd);
}
.status-label-solved,
.status-label-answered {
  background: var(--stack-good-bg);
  color: var(--stack-good-fg);
  border-color: var(--stack-good-bd);
}
.status-label-pending,
.status-label-pending-moderation,
.status-label-hold {
  background: var(--stack-warn-bg);
  color: var(--stack-warn-fg);
  border-color: var(--stack-warn-bd);
}
.status-label-not-planned,
.status-label-closed {
  background: var(--stack-line-softest);
  color: var(--stack-mid);
  border-color: var(--stack-line);
}
.status-label-pinned,
.status-label-featured,
.status-label-official {
  background: var(--stack-tint);
  color: var(--stack-brand);
  border-color: transparent;
  border-radius: 3px;
  padding: 3px 8px;
  font-size: 10px;
  letter-spacing: 0.09em;
}
/***** Community: topic list *****/
.page-header.community-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 0 0 20px;
}
.page-header.community-header .dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.page-header.community-header .title {
  font-family: var(--stack-font-heading);
  font-weight: 600;
  font-size: 24px;
  letter-spacing: -0.025em;
  margin: 0;
  color: var(--stack-ink);
}
.page-header.community-header .dropdown-chevron-icon {
  color: var(--stack-divider-faint);
}
.community-header .page-header-description {
  margin: 10px 0 0;
}

/* Topic cards: icon tile + title/description/meta, two columns. */
.topics .blocks-list {
  grid-template-columns: repeat(2, 1fr);
}

.topics .blocks-item-link {
  display: grid;
  grid-template-columns: 40px 1fr;
  grid-template-rows: auto auto auto;
  column-gap: 18px;
  row-gap: 6px;
  padding: 26px 28px;
  align-items: start;
}

.topics .blocks-item {
  transform: none;
}
.topics .blocks-item:hover,
.topics .blocks-item:focus-within {
  transform: none;
  border-color: var(--stack-brand);
}

.topics .blocks-item-icon {
  grid-row: 1 / span 3;
  grid-column: 1;
  width: 40px;
  height: 40px;
  background: var(--stack-tint);
  border-radius: var(--stack-radius-tile);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  color: var(--stack-brand);
}
.topics .blocks-item-icon::before {
  content: none;
}
.topics .blocks-item-icon .stack-icon {
  font-size: 20px;
  color: var(--stack-brand);
}

.topics .blocks-item-title {
  grid-column: 2;
  font-size: 18px;
}

.topics .blocks-item-description {
  grid-column: 2;
}

.topics .blocks-item .meta-group {
  grid-column: 2;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  gap: 0;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}
.topics .blocks-item .meta-group .meta-data {
  font-family: var(--stack-font-mono);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stack-faint);
}

/* Featured posts card on the topic list. */
.community-featured-posts {
  margin: 56px 0 0;
}
.community-featured-posts .title {
  font-size: 22px;
  margin: 0;
}
.community-featured-posts .promoted-articles {
  background: var(--stack-surface);
  border: 1px solid var(--stack-line);
  border-radius: var(--stack-radius-card-sm);
  padding: 6px 26px;
  margin: 0;
  list-style: none;
}
.community-featured-posts .promoted-articles-item {
  border-bottom: 1px solid var(--stack-line-softer);
}
.community-featured-posts .promoted-articles-item:last-child {
  border-bottom: 0;
}
.community-featured-posts .promoted-articles-item a {
  padding: 16px 0;
  font-size: 15.5px;
  font-weight: 400;
  color: var(--stack-brand);
}
.community-featured-posts .promoted-articles-item a::before {
  content: none;
}
.community-featured-posts .promoted-articles-item:hover {
  background: none;
}
.community-featured-posts .promoted-articles-item a:hover {
  text-decoration: underline;
}

.community-activity {
  margin: 56px 0 0;
  border-top: 0;
  padding-top: 0;
}
.community-activity .recent-activity-header {
  margin: 0;
}

/* Centered footer CTA. */
.community-footer {
  text-align: center;
  padding: 56px 0 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.community-footer-title {
  font-family: var(--stack-font-heading);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.025em;
  margin: 0;
}
.community-footer .button-large {
  padding: 14px 32px;
}


/***** Community: topic page *****/
/* Copenhagen's .topic-header is the filter strip, not a card — the card is
   .stack-topic-card, introduced in the topic template. */
.stack-topic-card {
  background: var(--stack-surface);
  border: 1px solid var(--stack-line);
  border-radius: var(--stack-radius-card);
  padding: 36px 40px;
  margin: 0 0 24px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
}
.stack-topic-card-copy {
  min-width: 0;
}
.stack-topic-card .page-header-description {
  max-width: 560px;
  font-size: 16px;
}
.stack-topic-card h1 {
  font-size: 38px;
}
.topic-header {
  margin: 0 0 16px;
}
.community-header-posts .title {
  font-size: 32px;
  letter-spacing: -0.03em;
}

/* Stacked actions on the right of the topic header. */
.topic-header-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
  align-items: stretch;
}

/* Filter row: mono dropdown toggles. */
.topic-filters,
.profile-section-sorter {
  display: flex;
  align-items: center;
  gap: 26px;
  margin: 0 0 16px;
}
.topic-filters .dropdown {
  margin: 0;
}
[dir=rtl] .topic-filters .dropdown {
  margin: 0;
}
.topic-filters .dropdown-toggle,
.profile-section-sorter .dropdown-toggle,
.my-activities-sub-nav .dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: var(--stack-font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stack-mid);
}
.topic-filters .dropdown-toggle:hover,
.profile-section-sorter .dropdown-toggle:hover {
  color: var(--stack-brand);
}

/* Post rows */
.striped-list {
  background: var(--stack-surface);
  border: 1px solid var(--stack-line);
  border-radius: var(--stack-radius-card-sm);
  overflow: hidden;
  margin: 0;
  padding: 0;
  list-style: none;
}

.striped-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 26px;
  border-bottom: 1px solid var(--stack-line-softer);
  background: none;
  transition: background-color 0.15s;
}
.striped-list-item:last-child {
  border-bottom: 0;
}
.striped-list-item:hover {
  background: var(--stack-surface-hover);
}

.striped-list-title,
.striped-list-title:visited {
  font-size: 16px;
  font-weight: 500;
  color: var(--stack-ink);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.striped-list-title:hover {
  color: var(--stack-brand);
  text-decoration: none;
}

.striped-list .meta-group {
  display: flex;
  gap: 0;
  margin: 5px 0 0;
  padding: 0;
  list-style: none;
}
.striped-list .meta-data {
  font-family: var(--stack-font-mono);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stack-faint);
}

/* The two right-hand stat columns (votes / comments). */
.striped-list-count {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
  min-width: 62px;
  font-family: var(--stack-font-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stack-faint);
}
.striped-list-number {
  font-family: var(--stack-font-mono);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--stack-ink);
  display: block;
}

.no-posts-with-filter {
  padding: 40px 26px;
  text-align: center;
  color: var(--stack-muted);
  font-size: 15px;
}


/***** Community: post list page *****/
.community-post-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 0 0 20px;
}
.community-post-list-header h1 {
  font-size: 36px;
  margin: 0;
}


/***** Community: post page *****/
.post-container {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 32px;
  align-items: start;
  padding-bottom: 80px;
}

.post {
  background: var(--stack-surface);
  border: 1px solid var(--stack-line);
  border-radius: var(--stack-radius-card);
  padding: 40px 44px;
  margin: 0;
  width: 100%;
}

.post-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin: 0;
}

.post-title h1 {
  font-size: 34px;
  letter-spacing: -0.03em;
  margin: 0;
}

/* Vote control: bordered column with arrows and a mono count. */
.post-info-container {
  display: flex;
  gap: 28px;
  align-items: flex-start;
}

.post-actions-wrapper {
  flex-shrink: 0;
  order: -1;
}
.post-actions-wrapper .vote,
.post-vote {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  border: 1px solid var(--stack-line);
  border-radius: var(--stack-radius-tile);
  padding: 10px 12px;
  background: var(--stack-surface);
}
.post-vote .vote-up,
.post-vote .vote-down {
  background: none;
  border: 0;
  color: var(--stack-mid);
  cursor: pointer;
  padding: 2px;
  line-height: 0;
  border-radius: var(--stack-radius-badge);
}
.post-vote .vote-up:hover,
.post-vote .vote-down:hover,
.post-vote .vote-up:focus,
.post-vote .vote-down:focus {
  color: var(--stack-brand);
}
.post-vote .vote-up svg,
.post-vote .vote-down svg {
  width: 22px;
  height: 22px;
}
.post-vote .vote-sum {
  font-family: var(--stack-font-mono);
  font-size: 16px;
  font-weight: 400;
  color: var(--stack-ink);
  padding: 2px 0;
}

.post-info {
  flex: 1;
  min-width: 0;
}

.post-avatar {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
}

.post-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--stack-line-soft);
  margin: 18px 0 0;
}
.post-meta span a {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--stack-ink);
}
.post-meta .meta-data,
.post-meta time {
  font-family: var(--stack-font-mono);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stack-faint);
}

.post-body {
  font-size: 16px;
  line-height: 1.72;
  color: var(--stack-ink-2);
  padding-top: 24px;
}
.post-body p {
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.72;
}

.post-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--stack-line-soft);
}

.post-comments .comment-form {
  margin-top: 22px;
}

/* Sidebar CTA card. */
.post-sidebar {
  position: sticky;
  top: 92px;
  max-width: none;
  flex: none;
  background: var(--stack-surface);
  border: 1px solid var(--stack-line);
  border-radius: var(--stack-radius-card);
  padding: 28px;
  width: auto;
  margin: 0;
}
.post-sidebar-title {
  font-family: var(--stack-font-heading);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
  line-height: 1.3;
}
.post-sidebar .button-large {
  display: block;
  width: 100%;
  text-align: center;
}

/* Follow toggles on section / topic / post read as secondary buttons. */
.community-follow {
  flex-shrink: 0;
}
.community-follow button {
  padding: 9px 18px;
  font-size: 11px;
}
.community-follow button[data-selected=true] {
  border-color: var(--stack-brand);
  color: var(--stack-brand);
}
.community-follow button[data-follower-count]:not([data-follower-count=""])::after {
  content: " · " attr(data-follower-count);
  font-family: var(--stack-font-mono);
  color: var(--stack-faint);
}
[dir=rtl] .community-follow button[data-follower-count]:not([data-follower-count=""])::after {
  content: attr(data-follower-count) " · ";
}


/***** My activities (contributions / following) *****/
/* Full-width white sub-nav strip. */
.my-activities-nav {
  background: var(--stack-surface);
  border-bottom: 1px solid var(--stack-line);
  margin: 0 0 40px;
  padding: 0;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.my-activities-nav .collapsible-nav-list {
  max-width: var(--stack-container);
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  gap: 4px;
  list-style: none;
  border: 0;
}
.my-activities-nav .collapsible-nav-list li {
  border: 0;
  margin: 0;
}
.my-activities-nav .collapsible-nav-list li a {
  display: block;
  padding: 16px 18px;
  font-family: var(--stack-font-mono);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stack-muted);
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.my-activities-nav .collapsible-nav-list li:hover a {
  color: var(--stack-ink);
  text-decoration: none;
}
.my-activities-nav .collapsible-nav-list li.current a {
  color: var(--stack-brand);
  border-bottom-color: var(--stack-brand);
}
.my-activities-nav .collapsible-nav-list li.current {
  background: none;
}

.collapsible-nav-border {
  border: 0;
}
.collapsible-nav-border .collapsible-nav-list li,
.collapsible-nav-border .collapsible-nav-list li a {
  border-color: transparent;
}
.collapsible-nav-border .collapsible-nav-list li:hover,
.collapsible-nav-border .collapsible-nav-list li.current {
  background: none;
}
.collapsible-nav-border .collapsible-nav-list li.current a {
  color: var(--stack-brand);
}

.my-activities-header,
.my-activities-following-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 0 0 20px;
}
.my-activities-header h1 {
  font-size: 40px;
  margin: 0;
}

.my-activities-sub-nav {
  margin: 0 0 18px;
}

.my-activities-table .striped-list-title {
  font-size: 15.5px;
}

/* Contributions rows: mono type label, title, date, comment count. */
.my-activities-table .striped-list-item {
  padding: 18px 26px;
  gap: 20px;
}
.stack-activity-type {
  font-family: var(--stack-font-mono);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stack-brand);
  width: 88px;
  flex-shrink: 0;
}

.no-activity,
.private-activity {
  background: var(--stack-surface);
  border: 1px solid var(--stack-line);
  border-radius: var(--stack-radius-card-sm);
  padding: 48px 26px;
  text-align: center;
  color: var(--stack-muted);
  font-size: 15px;
  margin: 0;
}

.subscriptions-subscribe button {
  padding: 8px 14px;
  font-size: 10.5px;
}
.subscriptions-subscribe button::after {
  content: none;
}
.subscriptions-subscribe button[data-selected=true],
.subscriptions-subscribe button[data-selected=true]:focus {
  border-color: var(--stack-line-strong);
  color: var(--stack-ink);
}


/***** Pagination *****/
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 26px;
  padding: 0;
  list-style: none;
}
.pagination-next-link, .pagination-prev-link,
.pagination-first-link, .pagination-last-link {
  padding: 9px 16px;
  font-size: 10.5px;
}
.pagination-current {
  font-family: var(--stack-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--stack-mid);
}


/***** Request pages *****/
.request-breadcrumbs {
  padding: 22px 0;
  margin: 0;
}

.request-container {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 32px;
  align-items: start;
  padding-bottom: 80px;
}

.request-main {
  max-width: none;
  flex: none;
  background: var(--stack-surface);
  border: 1px solid var(--stack-line);
  border-radius: var(--stack-radius-card);
  padding: 40px 44px;
  width: 100%;
  margin: 0;
}

.request-title {
  font-size: 34px;
  letter-spacing: -0.03em;
  border: 0;
  margin: 0 0 6px;
  padding: 0;
}

.request-main .comment-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.request-main .comment {
  display: flex;
  gap: 16px;
  padding: 22px 0;
  border-top: 1px solid var(--stack-line-soft);
  border-bottom: 0;
}
.request-main .comment + .comment {
  border-top: 1px solid var(--stack-line-soft);
}
.request-main .comment .comment-body {
  padding-left: 0;
  font-size: 15.5px;
  line-height: 1.7;
}

.request-main .comment-form {
  padding-top: 26px;
  border-top: 1px solid var(--stack-line-soft);
  margin: 0;
}
.request-main .comment-form textarea {
  min-height: 110px;
}
.request-main .comment-form-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 16px;
}
.request-main .comment-show-container {
  margin: 0 0 16px;
}

.mark-as-solved {
  order: -1;
}

/* Sidebar: request details key/value stack. */
.request-sidebar {
  position: sticky;
  top: 92px;
  width: auto;
  max-width: none;
  flex: none;
  background: var(--stack-surface);
  border: 1px solid var(--stack-line);
  border-radius: var(--stack-radius-card);
  padding: 26px 28px;
  margin: 0;
}
.request-sidebar .collapsible-sidebar-title {
  border-bottom: 1px solid var(--stack-line-softer);
  margin-bottom: 4px;
}

/* Copenhagen renders one <dl class="request-details"> per group, each holding
   several dt/dd pairs, and collapses whitespace with font-size:0 + inline-block.
   Reset that to a two-column grid so each pair is a bordered key/value row. */
.request-details {
  font-size: inherit;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  column-gap: 16px;
  margin: 0;
}
.request-details + .request-details {
  margin: 0;
}
.request-details dt,
.request-details dd {
  display: block;
  width: auto;
  padding: 12px 0;
  border-bottom: 1px solid var(--stack-line-softest);
}
.request-details dt {
  font-family: var(--stack-font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--stack-faint);
  white-space: nowrap;
}
.request-details dd {
  font-size: 14px;
  color: var(--stack-ink);
  text-align: right;
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}
.request-details dd::after {
  content: none;
}
.request-details dd a {
  color: var(--stack-brand);
}


/***** Search results *****/
.search-results {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 36px;
  align-items: start;
  padding-bottom: 80px;
}

.search-results-sidebar {
  width: auto;
  max-width: none;
  flex: none;
  margin: 0;
  padding: 0;
}

.search-results-sidebar .filters-in-section {
  margin: 0;
  padding: 0;
  list-style: none;
}

.multibrand-filter-list a.sidenav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  border: 0;
  border-radius: var(--stack-radius-control);
  font-size: 14.5px;
  color: var(--stack-ink);
}
.multibrand-filter-list a.sidenav-item:hover {
  background: var(--stack-line-softest);
  color: var(--stack-ink);
  text-decoration: none;
}
.multibrand-filter-list a.sidenav-item.current {
  background: var(--stack-tint);
  color: var(--stack-brand);
  font-weight: 600;
}
.multibrand-filter-list a.sidenav-item .doc-count {
  font-family: var(--stack-font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--stack-faint);
}
.multibrand-filter-list a.sidenav-item.current .doc-count {
  color: var(--stack-brand);
}

.search-results-column {
  width: auto;
  max-width: none;
  flex: none;
  margin: 0;
}

.search-results-subheading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  font-family: var(--stack-font-heading);
  font-weight: 600;
  font-size: 28px;
  letter-spacing: -0.03em;
  margin: 0 0 20px;
  color: var(--stack-ink);
}

.search-results-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.search-results-list > li {
  background: var(--stack-surface);
  border: 1px solid var(--stack-line);
  border-radius: var(--stack-radius-card);
  padding: 24px 26px;
  transition: border-color 0.15s;
}
.search-results-list > li:hover {
  border-color: var(--stack-brand);
}

.search-result-title {
  margin: 10px 0 8px;
}
.search-result-title a {
  font-family: var(--stack-font-heading);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.02em;
  color: var(--stack-ink);
  line-height: 1.35;
}
.search-result-title a:hover {
  color: var(--stack-brand);
}

.search-result-description {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--stack-mid);
  margin: 0;
}

/* Breadcrumb path above the result title, in mono. */
.search-results-list .breadcrumbs li,
.search-result-breadcrumbs li {
  font-family: var(--stack-font-mono);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stack-faint);
}
.search-results-list .breadcrumbs li a,
.search-result-breadcrumbs li a {
  color: var(--stack-faint);
}
.search-results-list .breadcrumbs li + li::before,
.search-result-breadcrumbs li + li::before {
  content: "\203A";
  margin: 0 7px;
  color: var(--stack-divider-faint);
}

/* Type badge on each result. */
.search-result-type {
  display: inline-block;
  background: var(--stack-tint);
  color: var(--stack-brand);
  border-radius: 3px;
  padding: 3px 8px;
  font-family: var(--stack-font-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.search-result-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* Empty state */
.no-results {
  background: var(--stack-surface);
  border: 1px solid var(--stack-line);
  border-radius: var(--stack-radius-card);
  padding: 56px 40px;
  text-align: center;
}
.no-results > svg {
  display: none;
}
.no-results-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--stack-radius-tile);
  background: var(--stack-tint);
  margin: 0 auto 20px;
}
.no-results-icon .stack-icon {
  font-size: 26px;
  color: var(--stack-brand);
}
.search-results .no-results .headline,
.no-results .headline {
  font-family: var(--stack-font-heading);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.025em;
  color: var(--stack-ink);
  margin: 0 0 10px;
}
.no-results .action-prompt {
  font-size: 15px;
  color: var(--stack-mid);
  margin: 0;
}
.no-results .action-prompt a {
  color: var(--stack-brand);
}


/***** Error page *****/
.error-page {
  padding-top: 22px;
  padding-bottom: 80px;
}
.error-page > .breadcrumbs {
  margin-bottom: 60px;
}
.error-page-card {
  max-width: 660px;
  margin: 0 auto;
  background: var(--stack-surface);
  border: 1px solid var(--stack-line);
  border-radius: var(--stack-radius-card);
  padding: 66px 56px;
  text-align: center;
}
.error-page-code {
  font-family: var(--stack-font-mono);
  font-size: 64px;
  font-weight: 400;
  letter-spacing: -0.04em;
  color: var(--stack-brand);
  line-height: 1;
  margin: 0 0 24px;
}
.error-page h1 {
  font-size: 32px;
  letter-spacing: -0.03em;
  margin: 0 0 14px;
}
.error-page h2 {
  font-size: 32px;
  letter-spacing: -0.03em;
  margin: 0 0 14px;
}
.error-page p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--stack-mid);
  margin: 0 0 28px;
}
.error-page .search {
  border: 1px solid var(--stack-line-strong);
  border-radius: var(--stack-radius-card-sm);
  overflow: hidden;
  margin: 0 0 22px;
}
.error-page .search input[type=search] {
  height: 50px;
}
.error-page .search input[type=submit] {
  background: var(--stack-brand);
}
.error-page .search input[type=submit]:hover {
  background: var(--stack-brand-hover);
}
.error-page-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.error-page > a {
  display: none;
}
.error-page > a::before {
  content: none;
}


/***** Notifications *****/
.notification-inline.notification-error,
.notification-error {
  border-radius: var(--stack-radius-control);
  border: 1px solid var(--stack-open-bd);
  background: var(--stack-open-bg);
  color: var(--stack-open-fg);
  font-size: 14.5px;
}
/***** User profile *****/
/* White band under the header carrying identity, stats and tabs. */
.profile-header {
  background: var(--stack-surface);
  border-bottom: 0;
  padding: 0;
  margin: 0;
}
.profile-header .container {
  padding: 40px 32px 0;
}

.profile-header-inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
}

/* Copenhagen's `.profile-header .profile-info` outranks a single class, so the
   identity column is addressed at matching specificity. */
.profile-header .profile-identity {
  display: grid;
  grid-template-columns: 76px 1fr;
  column-gap: 20px;
  row-gap: 14px;
  align-items: start;
  min-width: 0;
  flex: none;
  width: auto;
}
.profile-header .profile-identity > .profile-avatar {
  grid-row: 1 / span 2;
  grid-column: 1;
}
.profile-header .profile-identity > .basic-info,
.profile-header .profile-identity > .description,
.profile-header .profile-identity > .profile-stats-activity {
  grid-column: 2;
  width: auto;
}

.profile-avatar {
  grid-row: 1 / span 2;
  width: 76px;
  height: 76px;
  margin: 0;
}
.profile-avatar .user-avatar {
  width: 76px;
  height: 76px;
  border-radius: 12px;
  object-fit: cover;
}

.profile-header .basic-info {
  grid-column: 2;
  min-width: 0;
}
.profile-header .basic-info .name,
.profile-header .basic-info .name a {
  font-family: var(--stack-font-heading);
  font-weight: 600;
  font-size: 36px;
  letter-spacing: -0.035em;
  color: var(--stack-ink);
  margin: 0;
  line-height: 1.15;
}

.profile-header .description {
  grid-column: 2;
  font-size: 15px;
  color: var(--stack-mid);
  margin: 0;
}

/* Three-stat row under the name. */
.profile-stats-activity {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}
[dir=rtl] .profile-stats-activity {
  margin: 0;
}

.profile-stats .stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
}
.profile-stats .stat-label {
  font-family: var(--stack-font-mono);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stack-faint);
}
.profile-stats-activity .stat-value {
  font-family: var(--stack-font-mono);
  font-size: 16px;
  font-weight: 400;
  color: var(--stack-ink);
}

/* Right column: four counters over the Edit profile action. */
.profile-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
  flex-shrink: 0;
}

.profile-stats-counters {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 240px;
}
[dir=rtl] .profile-stats-counters {
  margin: 0;
}
.profile-stats-counters .stat {
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
}
.profile-stats-counters .stat-value {
  font-family: var(--stack-font-mono);
  font-size: 13px;
  font-weight: 400;
  color: var(--stack-ink);
}

.profile-header .options {
  display: flex;
  align-items: center;
  gap: 10px;
  position: static;
  margin: 0;
}
[dir=rtl] .profile-header .options {
  position: static;
}

.user-profile-actions button,
.user-profile-actions .button {
  background: var(--stack-brand);
  border-color: var(--stack-brand);
  color: var(--stack-on-brand);
}
.user-profile-actions button:hover,
.user-profile-actions button:focus {
  background: var(--stack-brand-hover);
  border-color: var(--stack-brand-hover);
  color: var(--stack-on-brand);
}

.profile-private-badge {
  font-family: var(--stack-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stack-muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Profile tabs sit at the bottom of the band. */
.profile-nav {
  background: var(--stack-surface);
  border: 0;
  border-bottom: 1px solid var(--stack-line);
  margin: 0 0 32px;
}
.profile-nav .container {
  padding: 0 32px;
}
.profile-nav .collapsible-nav-list {
  display: flex;
  gap: 4px;
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
  border: 0;
}
.profile-nav .collapsible-nav-list li {
  border: 0;
  margin: 0;
  background: none;
}
.profile-nav .collapsible-nav-list li a {
  display: block;
  padding: 14px 18px;
  font-family: var(--stack-font-mono);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stack-muted);
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.profile-nav .collapsible-nav-list li:hover a {
  color: var(--stack-ink);
  text-decoration: none;
}
.profile-nav .collapsible-nav-list li.current a {
  color: var(--stack-brand);
  border-bottom-color: var(--stack-brand);
}

/* Activity feed: one card per entry, body indented behind a tint rule. */
.profile-section {
  padding-bottom: 80px;
  width: 100%;
  max-width: none;
  float: none;
}
.profile-section .profile-activity-list,
.profile-section .profile-contribution-list {
  width: 100%;
  max-width: none;
}
.profile-section-title {
  font-family: var(--stack-font-heading);
  font-weight: 600;
  font-size: 24px;
  letter-spacing: -0.025em;
  margin: 0 0 4px;
}
.profile-section-description {
  display: block;
  font-size: 14.5px;
  color: var(--stack-mid);
  margin: 0 0 20px;
}

.profile-activity-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 0;
}
[dir=rtl] .profile-activity-list {
  margin: 0;
  padding: 0;
}

.profile-activity {
  display: block;
  background: var(--stack-surface);
  border: 1px solid var(--stack-line);
  border-radius: var(--stack-radius-card);
  padding: 22px 26px;
  margin: 0;
  position: relative;
}
[dir=rtl] .profile-activity,
[dir=rtl] .profile-activity:not(:last-child) {
  border-left: 1px solid var(--stack-line);
  margin: 0;
}

/* Copenhagen absolutely positions this icon outside the card — hide it. */
.profile-activity .profile-activity-icon,
.profile-activity-icon svg,
[dir=rtl] .profile-activity-icon {
  display: none;
}

.profile-activity .profile-activity-header,
.profile-activity-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-size: 13.5px;
  color: var(--stack-ink);
}
[dir=rtl] .profile-activity-header {
  margin: 0 0 14px;
}
.profile-activity-header .user-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
}
.profile-activity-header time,
.profile-activity-header .meta-data {
  font-family: var(--stack-font-mono);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stack-faint);
  margin-left: auto;
}

.profile-activity .profile-activity-contribution,
.profile-activity-contribution {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  border-left: 2px solid var(--stack-tint);
  padding-left: 18px;
  margin: 0;
}
[dir=rtl] .profile-activity .profile-activity-contribution {
  border-left: 0;
  border-right: 2px solid var(--stack-tint);
  padding-left: 0;
  padding-right: 18px;
  margin: 0;
}

.profile-contribution-title,
.profile-contribution-title a {
  font-size: 16px;
  font-weight: 500;
  color: var(--stack-brand);
  margin: 0 0 6px;
  line-height: 1.4;
}

.profile-contribution-breadcrumbs {
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
}
.profile-contribution-breadcrumbs li {
  font-family: var(--stack-font-mono);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stack-faint);
}
.profile-contribution-breadcrumbs li a {
  color: var(--stack-faint);
}

.profile-contribution-body,
.profile-activity-description {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--stack-mid);
  margin: 0 0 8px;
}

.profile-contribution .meta-group,
.profile-contribution .meta-data {
  font-family: var(--stack-font-mono);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stack-faint);
  margin: 0;
  padding: 0;
  list-style: none;
}
.profile-contribution .meta-group {
  display: flex;
}

/* Contributions list on the profile uses the same card, without the timeline. */
.profile-contribution-list > .profile-contribution {
  background: var(--stack-surface);
  border: 1px solid var(--stack-line);
  border-radius: var(--stack-radius-card);
  padding: 22px 26px;
  margin: 0 0 14px;
}
.profile-contribution-list > .profile-contribution > *:not(.profile-contribution-icon) {
  margin-left: 0;
}
[dir=rtl] .profile-contribution-list .profile-contribution-icon {
  display: none;
}
.profile-contribution-icon {
  display: none;
}
.profile-contribution-header {
  margin: 0 0 8px;
}


/***** Garden / React bundles *****/
/* The request list, new request form, approvals and service catalog render
   through Zendesk's own React bundles, which inject inline styles at runtime;
   these overrides need !important to land. */
[data-garden-id="tables.table"] {
  background: var(--stack-surface) !important;
  border: 1px solid var(--stack-line) !important;
  border-radius: var(--stack-radius-card) !important;
  overflow: hidden !important;
  border-collapse: separate !important;
}
[data-garden-id="tables.header_cell"] {
  background: var(--stack-surface-alt) !important;
  border-bottom: 1px solid var(--stack-line) !important;
  font-family: var(--stack-font-mono) !important;
  font-size: 10.5px !important;
  font-weight: 400 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--stack-mid) !important;
  padding: 13px 24px !important;
}
[data-garden-id="tables.cell"] {
  border-bottom: 1px solid var(--stack-line-softer) !important;
  font-family: var(--stack-font-body) !important;
  font-size: 14px !important;
  color: var(--stack-ink) !important;
  padding: 17px 24px !important;
}
[data-garden-id="tables.cell"] a {
  color: var(--stack-brand) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
}
[data-garden-id="tables.row"]:hover {
  background: var(--stack-surface-hover) !important;
}

[data-garden-id="forms.input"],
[data-garden-id="forms.textarea"],
[data-garden-id="forms.select"],
[data-garden-id="forms.faux_input"] {
  border: 1px solid var(--stack-line-strong) !important;
  border-radius: var(--stack-radius-control) !important;
  font-family: var(--stack-font-body) !important;
  font-size: 15px !important;
  color: var(--stack-ink) !important;
  background-color: var(--stack-surface) !important;
}
[data-garden-id="forms.input"]:focus,
[data-garden-id="forms.textarea"]:focus,
[data-garden-id="forms.select"]:focus-within,
[data-garden-id="forms.faux_input"]:focus-within {
  border-color: var(--stack-brand) !important;
  box-shadow: none !important;
}
[data-garden-id="forms.faux_input"] [data-garden-id="forms.input"] {
  border: 0 !important;
}

[data-garden-id="forms.input_label"],
#service-catalog-item label {
  font-family: var(--stack-font-mono) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--stack-slate) !important;
}

[data-garden-id="buttons.button"] {
  border-radius: var(--stack-radius-control) !important;
  font-family: var(--stack-font-mono) !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}
[data-garden-id="buttons.button"][data-garden-is-primary="true"] {
  background-color: var(--stack-brand) !important;
  border-color: var(--stack-brand) !important;
  color: var(--stack-on-brand) !important;
}
[data-garden-id="buttons.anchor"] {
  color: var(--stack-brand) !important;
}

[data-garden-id="tabs.tablist"] {
  border-bottom: 1px solid var(--stack-line) !important;
  gap: 0 !important;
}
[data-garden-id="tabs.tab"] {
  padding: 12px 18px !important;
  font-family: var(--stack-font-mono) !important;
  font-size: 11.5px !important;
  font-weight: 400 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--stack-muted) !important;
  border-bottom: 2px solid transparent !important;
  background: none !important;
}
[data-garden-id="tabs.tab"]:hover {
  color: var(--stack-ink) !important;
}
[data-garden-id="tabs.tab"][aria-selected=true] {
  color: var(--stack-brand) !important;
  border-bottom-color: var(--stack-brand) !important;
}

[data-garden-id="tags.tag_view"] {
  border-radius: var(--stack-radius-badge) !important;
  font-family: var(--stack-font-mono) !important;
  font-size: 10.5px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

[data-garden-id="dropdowns.combobox.listbox"] {
  border: 1px solid var(--stack-line) !important;
  border-radius: var(--stack-radius-card-sm) !important;
  box-shadow: var(--stack-shadow-menu) !important;
}

#service-catalog-item [role=combobox] {
  border-radius: var(--stack-radius-control) !important;
}

/* Service catalog cards */
#service-catalog-list [data-garden-id="typography.xl"],
.service-catalog-item-title {
  font-family: var(--stack-font-heading) !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
}


/***** New request form: rich text + dropzone *****/
#new-request-form .ck.ck-editor,
.hbs-form .ck.ck-editor {
  border: 1px solid var(--stack-line-strong);
  border-radius: var(--stack-radius-control);
  overflow: hidden;
}
#new-request-form .ck.ck-editor:focus-within {
  border-color: var(--stack-brand);
}
#new-request-form .ck.ck-toolbar,
.ck.ck-toolbar {
  background: var(--stack-surface-alt) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--stack-line) !important;
  padding: 8px 10px !important;
}
#new-request-form .ck.ck-sticky-panel__content {
  border: 0 !important;
}
/* Sizing for both editor states lives in the "Rich text" block further down. */
#new-request-form .ck.ck-editor__editable {
  border: 0 !important;
  box-shadow: none !important;
}
.ck.ck-button {
  border-radius: var(--stack-radius-badge) !important;
  color: var(--stack-mid) !important;
}
.ck.ck-button:hover {
  background: var(--stack-line-softest) !important;
  color: var(--stack-brand) !important;
}

/* Attachment dropzone */
[data-helper=upload] .upload-dropzone,
#new-request-form [data-garden-id="forms.file_upload"] {
  border: 1px dashed var(--stack-line-strong) !important;
  border-radius: var(--stack-radius-control) !important;
  padding: 30px !important;
  text-align: center;
  background: var(--stack-surface-hover) !important;
  color: var(--stack-mid) !important;
  font-size: 14.5px;
  transition: border-color 0.15s, background-color 0.15s;
}
[data-helper=upload] .upload-dropzone:hover,
#new-request-form [data-garden-id="forms.file_upload"]:hover {
  border-color: var(--stack-brand) !important;
  background: var(--stack-tint-2) !important;
}
.upload-dropzone a,
.upload-dropzone span {
  color: var(--stack-mid);
  font-size: 14.5px;
}
.upload-dropzone a {
  color: var(--stack-brand);
}

#approval-request textarea:focus {
  border-color: var(--stack-brand) !important;
}


/***** Responsive *****
 * ≤1080px — every sidebar grid collapses to one column and un-sticks.
 * ≤900px  — 3-up grids go to 2, 2-up grids go to 1.
 * ≤640px  — everything is one column; display type steps down; tables
 *           become stacked label/value cards; nav collapses to a menu.
 *****/
@media (max-width: 1080px) {
  .article-container,
  .post-container,
  .request-container,
  .search-results {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .article-sidebar,
  .post-sidebar,
  .request-sidebar {
    position: static;
    top: auto;
    order: 2;
  }
  .article {
    max-width: none;
  }
  .search-results-sidebar {
    order: -1;
  }
  .multibrand-filter-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .multibrand-filter-list a.sidenav-item {
    border: 1px solid var(--stack-line);
    background: var(--stack-surface);
  }
}

@media (max-width: 900px) {
  .blocks-list {
    grid-template-columns: repeat(2, 1fr);
  }
  .section-tree,
  .topics .blocks-list,
  .article-relatives {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .section.home-section.community {
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
  }
  .community-actions {
    flex-direction: row;
    width: 100%;
  }
  .profile-header-inner {
    flex-direction: column;
    gap: 24px;
  }
  .profile-aside {
    align-items: flex-start;
    width: 100%;
  }
  .profile-stats-counters {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
    min-width: 0;
  }
  .profile-stats-counters .stat {
    flex-direction: column;
    gap: 4px;
  }
}

@media (max-width: 767px) {
  .container,
  .error-page,
  .footer-inner,
  .my-activities-nav .collapsible-nav-list,
  .profile-nav .container,
  .profile-header .container {
    padding-left: 20px;
    padding-right: 20px;
  }
  .footer-inner {
    padding-top: 24px;
    padding-bottom: 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .hero {
    padding: 52px 20px 56px;
  }
  .hero-title {
    font-size: 34px;
  }
  .community-hero {
    padding: 44px 20px 48px;
  }
  .community-hero .hero-title,
  .service-catalog-hero-title {
    font-size: 30px;
  }
  .service-catalog-hero {
    padding: 40px 20px 44px;
  }
  .hero .search input[type=search] {
    height: 50px;
  }

  h1,
  .page-header h1,
  .my-activities-header h1,
  .category-content .page-header h1,
  .section-content .page-header h1,
  .profile-header .basic-info .name,
  .profile-header .basic-info .name a {
    font-size: 28px;
  }
  .article-title,
  .request-title,
  .post-title h1,
  .stack-topic-card h1,
  .form-header,
  .community-post-list-header h1 {
    font-size: 26px;
  }
  h2 { font-size: 21px; }

  .blocks-list,
  .section-tree,
  .topics .blocks-list {
    grid-template-columns: 1fr;
  }

  /* Card interiors lose their generous desktop padding. */
  .article {
    padding: 28px 22px 26px;
  }
  .category-content .page-header,
  .stack-topic-card,
  .post,
  .request-main,
  .error-page-card {
    padding: 28px 22px;
  }
  .section-content .page-header {
    padding: 26px 22px;
    flex-direction: column;
    gap: 16px;
  }
  .section-content .article-list-item,
  .section-list-item a {
    padding: 16px 22px;
  }
  .section.home-section.community {
    padding: 28px 22px;
  }
  .error-page-card {
    padding: 44px 24px;
  }
  .error-page-code {
    font-size: 48px;
  }

  /* Breadcrumb row stacks; the compact search goes full width. */
  .sub-nav {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 16px 0;
  }
  .sub-nav .search-container {
    width: 100%;
  }

  .section.knowledge-base,
  .section.home-section,
  .section.home-section.activity,
  .community-featured-posts,
  .community-activity {
    padding-top: 40px;
    margin-top: 0;
  }
  .section.home-section.community {
    margin-top: 40px;
  }

  .stack-section-heading {
    gap: 14px;
  }

  /* Rows: stack the meta under the title instead of squeezing it. */
  .recent-activity-item,
  .striped-list-item {
    flex-wrap: wrap;
    gap: 10px;
    padding: 16px 18px;
  }
  .recent-activity-item-meta {
    gap: 12px;
    flex-wrap: wrap;
  }
  .striped-list-count {
    min-width: 0;
    flex-direction: row;
    gap: 6px;
    align-items: baseline;
  }
  .striped-list-number {
    font-size: 14px;
  }

  .promoted-articles-item a {
    padding: 14px 18px;
    font-size: 15px;
  }

  .article-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .article-author {
    flex-wrap: wrap;
    gap: 12px;
  }
  .stack-read-time {
    margin-left: 0;
  }
  .article-relatives {
    gap: 24px;
  }

  .stack-topic-card,
  .community-post-list-header,
  .my-activities-header,
  .page-header.community-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .topic-header-actions {
    flex-direction: row;
  }

  .post-info-container {
    flex-direction: column;
    gap: 20px;
  }
  .post-actions-wrapper .vote,
  .post-vote {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    align-self: flex-start;
  }

  .request-main .comment-form-controls {
    flex-direction: column;
    align-items: stretch;
  }
  .request-details dd {
    text-align: left;
  }

  /* Tap targets: every interactive row clears 44px. */
  .nav-wrapper-mobile .menu-list-mobile-items a,
  .nav-wrapper-mobile .menu-list-mobile-items button,
  .multibrand-filter-list a.sidenav-item,
  a.sidenav-item,
  .my-activities-nav .collapsible-nav-list li a,
  .profile-nav .collapsible-nav-list li a,
  .dropdown-menu [role^=menuitem] {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .button,
  .button-large,
  .hbs-form input[type=submit],
  .search input[type=submit] {
    min-height: 44px;
  }
  .share li a {
    width: 44px;
    height: 44px;
  }
  .post-vote .vote-up,
  .post-vote .vote-down {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Garden tables become stacked label/value cards. */
  [data-garden-id="tables.table"],
  [data-garden-id="tables.table"] tbody,
  [data-garden-id="tables.table"] tr,
  [data-garden-id="tables.cell"] {
    display: block !important;
    width: auto !important;
  }
  [data-garden-id="tables.table"] thead {
    display: none !important;
  }
  [data-garden-id="tables.table"] tr {
    border-bottom: 1px solid var(--stack-line-softer) !important;
    padding: 6px 0 !important;
  }
  [data-garden-id="tables.cell"] {
    display: flex !important;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    border: 0 !important;
    padding: 8px 18px !important;
  }
  [data-garden-id="tables.cell"]::before {
    content: attr(data-label);
    font-family: var(--stack-font-mono);
    font-size: 10.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--stack-faint);
    flex-shrink: 0;
  }

  .table,
  .table tbody,
  .table tr,
  .table td {
    display: block;
    width: auto;
  }
  .table thead {
    display: none;
  }
  .table tr {
    border-bottom: 1px solid var(--stack-line-softer);
    padding: 6px 0;
  }
  .table td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 18px !important;
    height: auto;
  }

  .stack-attribution {
    bottom: 14px;
    padding: 8px 16px;
    font-size: 10px;
  }
}


/***** Search result card: meta row above the title *****/
.search-result-meta-container {
  order: -1;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0;
}
.search-results-list > li article > header {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.search-result-title-container {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.search-result-icons {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}
.search-result-votes,
.search-result-meta-count {
  font-family: var(--stack-font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--stack-faint);
}
.search-result-meta-container .meta-data {
  font-family: var(--stack-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stack-faint);
}
.search-results-sort {
  flex-shrink: 0;
}


/***** Form pages as cards *****/
.stack-form-card {
  background: var(--stack-surface);
  border: 1px solid var(--stack-line);
  border-radius: var(--stack-radius-card);
  padding: 44px 48px;
  max-width: 760px;
  margin: 0 0 80px;
}
.stack-form-card .form-header {
  margin: 0 0 10px;
  font-size: 38px;
  letter-spacing: -0.035em;
}

/***** Activity tables (contributions / following) *****/
.stack-cell-mono {
  font-family: var(--stack-font-mono);
  font-size: 12.5px;
  letter-spacing: 0.03em;
  color: var(--stack-mid);
}
.my-activities-table .stack-activity-type {
  font-family: var(--stack-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stack-brand);
  width: auto;
}
.my-activities-table .striped-list-title {
  color: var(--stack-brand);
  font-weight: 500;
}
.no-activities {
  background: var(--stack-surface);
  border: 1px solid var(--stack-line);
  border-radius: var(--stack-radius-card-sm);
  padding: 48px 26px;
  text-align: center;
  color: var(--stack-muted);
  font-size: 15px;
}

@media (max-width: 767px) {
  .stack-form-card {
    padding: 28px 22px;
  }
  /* Stacked table cells announce their column via data-label. */
  .table td::before {
    content: attr(data-label);
    font-family: var(--stack-font-mono);
    font-size: 10.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--stack-faint);
    flex-shrink: 0;
  }
  .table td:not([data-label])::before {
    content: none;
  }
}


/***** Garden status tags → Stack status pills *****/
/* script.js buckets each tag by the bundle's own hue and stamps
   data-stack-status; the palette below is the design's status triplets. */
[data-garden-id="tags.tag_view"][data-stack-status] {
  border: 1px solid transparent !important;
  border-radius: var(--stack-radius-badge) !important;
  padding: 4px 10px !important;
  height: auto !important;
  min-height: 0 !important;
}
[data-garden-id="tags.tag_view"][data-stack-status="open"] {
  background: var(--stack-open-bg) !important;
  color: var(--stack-open-fg) !important;
  border-color: var(--stack-open-bd) !important;
}
[data-garden-id="tags.tag_view"][data-stack-status="solved"] {
  background: var(--stack-good-bg) !important;
  color: var(--stack-good-fg) !important;
  border-color: var(--stack-good-bd) !important;
}
[data-garden-id="tags.tag_view"][data-stack-status="pending"] {
  background: var(--stack-warn-bg) !important;
  color: var(--stack-warn-fg) !important;
  border-color: var(--stack-warn-bd) !important;
}
[data-garden-id="tags.tag_view"][data-stack-status="neutral"] {
  background: var(--stack-line-softest) !important;
  color: var(--stack-mid) !important;
  border-color: var(--stack-line) !important;
}

/* Sortable column headings sit in a button inside the header cell. */
[data-garden-id="tables.sortable"],
[data-garden-id="tables.header_cell"] [data-garden-id="typography.ellipsis"] {
  font-family: var(--stack-font-mono) !important;
  font-size: 10.5px !important;
  font-weight: 400 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--stack-mid) !important;
}

[data-garden-id="tables.cell"] a {
  text-decoration: none !important;
}
[data-garden-id="tables.cell"] a:hover {
  text-decoration: underline !important;
}

/* Title-first pages start below the header with the design's rhythm. */
.my-activities-header {
  padding-top: 44px;
}


/***** Profile band compaction *****/
/* Copenhagen spaces these stats for a stacked layout and absolutely positions
   the actions; both are neutralized at matching specificity here. */
.profile-header .profile-stats,
.profile-header .profile-stats .stat,
.profile-header .options,
.profile-header .basic-info,
.profile-header .community-name-and-title-badges {
  margin: 0;
  padding: 0;
  min-height: 0;
  position: static;
}
.profile-header .profile-stats-counters .stat {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  height: auto;
  line-height: 1.4;
}
.profile-header .profile-stats-activity .stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: auto;
}
.profile-header .community-badge-achievements:empty,
.profile-header .community-badge-titles:empty {
  display: none;
}
.profile-aside {
  justify-content: flex-start;
}
/* The identity block and the tab strip read as one band. */
.profile-header .container {
  padding-bottom: 28px;
}
.profile-nav {
  margin-top: 0;
}

/* `.profile-header .container` (0,2,0) sets align-items, so the band's own
   flex alignment has to be declared at the same specificity or the aside
   column stretches to the full band height. */
.profile-header .profile-header-inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
}
.profile-header .profile-aside {
  align-self: flex-start;
  flex: none;
}
.profile-header .profile-stats-counters {
  flex: none;
  height: auto;
}


/***** Request page details & reply *****/
/* The sidebar heading is hidden at desktop by Copenhagen's collapsible logic. */
.request-sidebar .collapsible-sidebar-title,
.article-sidebar .collapsible-sidebar-title {
  display: block;
}
.request-sidebar .collapsible-sidebar-toggle,
.article-sidebar .collapsible-sidebar-toggle,
.search-results-sidebar .collapsible-sidebar-toggle {
  display: none;
}

/* A zero column gap keeps the key/value rule continuous across dt and dd. */
.request-details {
  column-gap: 0;
}
.request-details dt {
  padding-right: 16px;
}
/* Copenhagen emits empty pairs for absent fields. */
.request-details dt:empty,
.request-details dd:empty {
  padding: 0;
  border: 0;
}

/* The collapsed reply field should read as the textarea it becomes. */
.request-main .comment-form .comment-container,
.request-main .comment-form textarea,
.request-main .comment-form .ck.ck-editor__editable {
  background: var(--stack-surface);
  border: 1px solid var(--stack-line-strong);
  border-radius: var(--stack-radius-control);
  color: var(--stack-muted);
  font-size: 15px;
  padding: 14px 16px;
  min-height: 48px;
}
.request-main .comment-form .comment-container:focus-within {
  border-color: var(--stack-brand);
}


/***** Error page corrections *****/
/* `.error-page p` (0,1,1) outranks a bare class, so the code needs the
   parent in the selector to keep its display treatment. */
.error-page .error-page-code {
  font-family: var(--stack-font-mono);
  font-size: 64px;
  font-weight: 400;
  letter-spacing: -0.04em;
  color: var(--stack-brand);
  line-height: 1;
  margin: 0 0 24px;
}
.error-page-search {
  position: relative;
}
.error-page .breadcrumbs {
  margin-bottom: 60px;
}


/***** Community post page corrections *****/
/* Copenhagen caps the post column at 70% of the row. */
.post-container .post {
  max-width: none;
  width: 100%;
}
.post-container .post-info-container {
  align-items: flex-start;
}
.post-container .post-info {
  flex: 1;
  min-width: 0;
  width: auto;
  max-width: none;
}
.post-actions-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
/* The post actions menu (edit/delete) is an owner affordance, not part of the
   vote control — keep it small and beneath. */
.post-actions-wrapper .dropdown-toggle {
  background: none;
  border: 0;
  color: var(--stack-faint);
  cursor: pointer;
  padding: 4px;
}
.post-actions-wrapper .dropdown-toggle:hover {
  color: var(--stack-brand);
}

/* The design's follow control is a plain FOLLOW / UNFOLLOW toggle. */
.community-follow button[data-follower-count]:not([data-follower-count=""])::after,
[dir=rtl] .community-follow button[data-follower-count]:not([data-follower-count=""])::after,
.community-follow button:not([data-follower-count])::after,
.community-follow button[data-selected=true]::after,
[dir=rtl] .community-follow button[data-selected=true]::after {
  content: none;
}

/* Empty comment scaffolding leaves stray rules behind. */
.post-comments .comment-list:empty,
.article-comments .comment-list:empty {
  display: none;
}


/***** Striped list rows (topic / post lists) *****/
.striped-list > ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.striped-list > ul > li {
  border-bottom: 1px solid var(--stack-line-softer);
}
.striped-list > ul > li:last-child {
  border-bottom: 0;
}
.striped-list-item {
  border-bottom: 0;
}
.striped-list-info {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
  min-width: 0;
}
/* Title and any FEATURED badge share one line. */
.striped-list-info > .post-overview-item {
  display: inline;
}
.striped-list-item .striped-list-title {
  display: inline;
  margin-right: 10px;
}
/* The two stat columns sit side by side, each stacking value over label. */
.striped-list-count {
  flex-direction: row;
  align-items: flex-start;
  gap: 28px;
  min-width: 0;
}
.striped-list-count-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 62px;
  font-family: var(--stack-font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stack-faint);
}

/***** Follow toggles read as secondary buttons everywhere *****/
.community-follow button,
.community-follow button[data-selected=true],
.section-subscribe button,
.section-subscribe button[data-selected=true] {
  background-color: var(--stack-surface);
  color: var(--stack-ink);
  border: 1px solid var(--stack-line-strong);
  line-height: 1.4;
  padding: 9px 18px;
  width: auto;
  position: relative;
}
.community-follow button[data-selected=true],
.section-subscribe button[data-selected=true] {
  border-color: var(--stack-brand);
  color: var(--stack-brand);
}
.community-follow button:hover,
.community-follow button:focus,
.community-follow button[data-selected=true]:hover,
.section-subscribe button:hover,
.section-subscribe button:focus {
  background-color: var(--stack-surface);
  border-color: var(--stack-brand);
  color: var(--stack-brand);
}

/* Title and FEATURED badge share a line; meta sits under them. */
.striped-list-info {
  display: block;
}
.striped-list-info > .meta-group {
  display: flex;
  margin-top: 6px;
}
.striped-list-count {
  flex: none;
  width: auto;
}


/***** Touch targets *****
 * At phone widths every control that is a discrete target — buttons, toggles,
 * tabs, list-row links, form affordances — clears 44px. Inline links inside
 * prose and breadcrumbs are deliberately excluded: padding them out would
 * break line rhythm, and WCAG exempts links embedded in a block of text.
 *****/
@media (max-width: 767px) {
  .dropdown-toggle,
  .collapsible-nav-toggle,
  .collapsible-sidebar-toggle,
  .menu-button-mobile,
  .search .clear-button,
  .comment-show-container,
  .see-all-filters,
  .striped-list-title,
  .recent-activity-item-link,
  .promoted-articles-item a,
  .section-content .article-list-item a.article-list-link,
  .section-list-item a,
  .article-relatives ul a,
  .footer-brand,
  .footer-language-selector .dropdown-toggle,
  .footer-locale-static,
  .stack-attribution,
  .see-all-articles,
  .recent-activity-controls a,
  .recent-activity-controls button,
  [data-garden-id="buttons.button"],
  [data-garden-id="buttons.anchor"],
  .ck.ck-button {
    min-height: 44px;
  }

  /* Give the ones that are flex/inline a way to actually use that height. */
  .dropdown-toggle,
  .collapsible-nav-toggle,
  .collapsible-sidebar-toggle,
  .search .clear-button,
  .footer-brand,
  .footer-language-selector .dropdown-toggle,
  .footer-locale-static,
  .stack-attribution,
  .ck.ck-button,
  [data-garden-id="buttons.button"],
  [data-garden-id="buttons.anchor"] {
    display: inline-flex;
    align-items: center;
  }
  .striped-list-title,
  .recent-activity-item-link,
  .see-all-articles {
    display: flex;
    align-items: center;
  }
  .search .clear-button {
    width: 44px;
  }
  .stack-attribution {
    padding: 0 20px;
  }
}

.community h2 {
  text-align: left;
}

@media (max-width: 767px) {
  /* The desktop row is a two-column grid; on phones it becomes one column
     with the meta beneath the title. */
  .recent-activity-item {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    row-gap: 6px;
  }
  .recent-activity-item > h3,
  .recent-activity-item > .recent-activity-item-link {
    grid-column: 1;
  }
  .recent-activity-item > .recent-activity-item-link {
    grid-row: 2;
  }
  .recent-activity-item-meta {
    grid-column: 1;
    grid-row: 3;
  }
}

@media (max-width: 767px) {
  .skip-navigation,
  .community-follow button,
  .section-subscribe button,
  .article-subscribe button,
  .subscriptions-subscribe button,
  .user-profile-actions button,
  .split-button button,
  .post-vote .vote-up,
  .post-vote .vote-down {
    min-height: 44px;
  }
  .ck.ck-button {
    min-height: 44px !important;
    min-width: 44px !important;
  }
}

/* A 1px border shift is too quiet to serve as a focus indicator on its own. */
.search:focus-within {
  border-color: var(--stack-brand);
  box-shadow: 0 0 0 3px var(--stack-tint);
}


/***** Service catalog item page *****/
/* Hooks are stamped by script.js — see markServicePage(). */
#service-catalog-item h1[data-garden-id="typography.font"] {
  font-family: var(--stack-font-heading) !important;
  font-weight: 600 !important;
  font-size: 34px !important;
  letter-spacing: -0.03em !important;
  color: var(--stack-ink) !important;
}
#service-catalog-item [data-stack-service-icon] {
  width: 52px !important;
  height: 52px !important;
  border-radius: var(--stack-radius-card) !important;
  background: var(--stack-tint) !important;
  color: var(--stack-brand) !important;
  border: 0 !important;
}
#service-catalog-item [data-stack-service-icon] svg {
  width: 26px !important;
  height: 26px !important;
  color: var(--stack-brand) !important;
}
#service-catalog-item [data-stack-service-panel] {
  background: var(--stack-surface) !important;
  border: 1px solid var(--stack-line) !important;
  border-radius: var(--stack-radius-card) !important;
  padding: 26px 28px !important;
}
#service-catalog-item [data-stack-detail-label] {
  font-family: var(--stack-font-mono) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
  color: var(--stack-faint) !important;
}
#service-catalog-item [data-stack-detail-value] {
  font-family: var(--stack-font-body) !important;
  font-size: 14px !important;
  color: var(--stack-ink) !important;
}
#service-catalog-item button[data-garden-id="buttons.button"] {
  background: var(--stack-brand) !important;
  border-color: var(--stack-brand) !important;
  color: var(--stack-on-brand) !important;
  padding: 14px 32px !important;
}

/***** Service catalog list page *****/
.multibrand-filter-list a.sidenav-item,
#service-catalog-main-content [role="listitem"] {
  border-radius: var(--stack-radius-control);
}
#service-catalog-main-content [data-garden-id="avatars.avatar"],
#service-catalog-main-content [data-testid="service-catalog-list-item-container"] figure {
  border: 0 !important;
  border-radius: var(--stack-radius-tile) !important;
  background: var(--stack-tint) !important;
  color: var(--stack-brand) !important;
  width: 38px !important;
  height: 38px !important;
  box-shadow: none !important;
}
#service-catalog-main-content [data-testid="service-catalog-list-item-container"] figure svg,
#service-catalog-item [data-stack-service-icon] svg {
  color: var(--stack-brand) !important;
}

/* Service list: facets, meta row and cards. */
#service-catalog-main-content [data-stack-facet] {
  border-radius: var(--stack-radius-control) !important;
  padding: 11px 14px !important;
  font-size: 14.5px !important;
  background: transparent !important;
  color: var(--stack-ink) !important;
}
#service-catalog-main-content [data-stack-facet]:hover {
  background: var(--stack-line-softest) !important;
}
#service-catalog-main-content [data-stack-facet][aria-current="true"],
#service-catalog-main-content [data-stack-facet][data-selected="true"],
#service-catalog-main-content aside [role="button"]:first-child {
  background: var(--stack-tint) !important;
  color: var(--stack-brand) !important;
  font-weight: 600 !important;
}
#service-catalog-main-content [data-stack-facet] span:last-child {
  font-family: var(--stack-font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.05em !important;
}
#service-catalog-main-content [data-stack-service-meta] {
  align-items: baseline !important;
}
#service-catalog-main-content [data-stack-service-count] {
  font-family: var(--stack-font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--stack-faint) !important;
}
/* The bundle wraps each card in a container that also paints a border; the
   card treatment belongs on the inner link, and the wrapper is flattened. */
#service-catalog-main-content [data-testid="service-catalog-list-item-container"] {
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}
#service-catalog-main-content [data-testid="service-catalog-list-item-container"] > a {
  display: block !important;
  background: var(--stack-surface) !important;
  border: 1px solid var(--stack-line) !important;
  border-radius: var(--stack-radius-card-sm) !important;
  padding: 22px !important;
  height: 100% !important;
  transition: border-color 0.15s !important;
  text-decoration: none !important;
}
#service-catalog-main-content [data-testid="service-catalog-list-item-container"] > a:hover {
  border-color: var(--stack-brand) !important;
}
#service-catalog-main-content h2[data-garden-id="typography.font"] {
  font-family: var(--stack-font-heading) !important;
  font-weight: 600 !important;
  font-size: 26px !important;
  letter-spacing: -0.025em !important;
}

@media (max-width: 767px) {
  /* Garden's grid row uses negative margins that push past the viewport. */
  #service-catalog-main-content [data-garden-id="grid.row"] {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  #service-catalog-main-content [data-garden-id="grid.col"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
    flex-basis: 100% !important;
  }
  #service-catalog-main-content,
  #service-catalog-main-content main,
  #service-catalog-main-content aside {
    max-width: 100% !important;
    overflow-x: hidden;
  }
}


/* ==========================================================================
   REVIEW FIXES
   Each block notes the Copenhagen rule it neutralizes, since most of these
   were specificity collisions rather than missing styles.
   ========================================================================== */

/***** Header: user dropdown inherits the nav's mono uppercase *****/
/* `.nav-wrapper-desktop a` also matches the dropdown's links, so menu items
   rendered as <a> came out uppercase while <button> items stayed sentence
   case. Reset both to the design's 13.5px body type. */
.nav-wrapper-desktop .dropdown-menu a,
.nav-wrapper-desktop .dropdown-menu button,
.dropdown-menu [role^=menuitem] {
  font-family: var(--stack-font-body);
  font-size: 13.5px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--stack-ink);
  text-align: left;
  width: 100%;
  background: none;
  border: 0;
  cursor: pointer;
}
.nav-wrapper-desktop .dropdown-menu a:hover,
.nav-wrapper-desktop .dropdown-menu button:hover {
  color: var(--stack-brand);
}

/***** Home: category card hover fills brand *****/
/* `.blocks-item:hover { background-color: #1B4FE0 }` in the base — the
   design's hover is border + lift only. */
.blocks-item:hover,
.blocks-item:focus-within,
.blocks-item:active {
  background-color: var(--stack-surface);
}
.blocks-item:hover .blocks-item-title,
.blocks-item:focus-within .blocks-item-title {
  color: var(--stack-ink);
}
.blocks-item:hover .blocks-item-description,
.blocks-item:focus-within .blocks-item-description {
  color: var(--stack-mid);
}
.blocks-item:hover .blocks-item-icon,
.blocks-item:focus-within .blocks-item-icon {
  color: var(--stack-brand);
}
.blocks-item:hover .blocks-item-meta,
.blocks-item:focus-within .blocks-item-meta {
  color: var(--stack-faint);
}
.topics .blocks-item:hover .blocks-item-icon,
.topics .blocks-item:focus-within .blocks-item-icon {
  background: var(--stack-tint);
}

/***** Home: "See more" belongs inside the activity card *****/
/* The helper renders the control as a sibling of the list, so the two are
   joined into one card rather than styled as separate blocks. */
.recent-activity:has(.recent-activity-controls) .recent-activity-list {
  border-bottom: 0;
  border-radius: var(--stack-radius-card-sm) var(--stack-radius-card-sm) 0 0;
}
.recent-activity-controls {
  border: 1px solid var(--stack-line);
  border-top: 1px solid var(--stack-line-softer);
  border-radius: 0 0 var(--stack-radius-card-sm) var(--stack-radius-card-sm);
  background: var(--stack-surface);
  overflow: hidden;
}

/***** Article: sidebar item rhythm *****/
/* Copenhagen gives each sidenav item `margin: 10px 0 16px`, which doubles the
   gap the design asks for. */
.collapsible-sidebar-body a.sidenav-item,
.article-sidebar a.sidenav-item {
  margin: 0;
}
.collapsible-sidebar-body ul li + li {
  margin-top: 2px;
}

/***** Article & post: comment form breathing room *****/
.comment-form {
  gap: 14px;
  align-items: flex-start;
}
.comment-form .avatar {
  flex-shrink: 0;
  margin: 0;
}
.comment-form .comment-container {
  flex: 1;
  min-width: 0;
}

/***** Community post list: separate the sections from their cards *****/
.community-featured-posts .title,
.community-activity .recent-activity-header,
.community-post-list-header {
  margin-bottom: 18px;
}
.community-featured-posts,
.community-activity {
  margin-top: 56px;
}

/***** Community post page: vote column beside the whole content column *****/
.post-layout {
  display: flex;
  align-items: flex-start;
  gap: 28px;
}
.post-column {
  flex: 1;
  min-width: 0;
}
.post-layout .post-actions-wrapper {
  order: -1;
  flex-shrink: 0;
}
.post-layout .post-info-container {
  display: block;
}
.post-layout .post-header {
  align-items: flex-start;
  margin-bottom: 18px;
}
.post-layout .post-author {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--stack-line-soft);
  margin: 0;
}
.post-layout .post-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.post-layout .post-meta .meta-group {
  display: flex;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.post-layout .post-content,
.post-layout .post-body {
  padding-top: 24px;
}
.post-layout .community-badge-titles:empty,
.post-layout .community-badge-achievements:empty {
  display: none;
}
/* The owner actions menu is a small affordance under the vote control. */
.post-actions-wrapper .post-actions {
  display: flex;
  justify-content: center;
  color: var(--stack-faint);
}
.post-actions-wrapper .post-actions a:hover {
  color: var(--stack-brand);
}

/***** Activity / profile tabs: hover must not reflow *****/
/* Base rule: `.collapsible-nav-list li:hover a:not([aria-current=page])`
   rewrites padding, and `li:hover` adds a 4px bottom border. */
.my-activities-nav .collapsible-nav-list li:hover,
.profile-nav .collapsible-nav-list li:hover,
.collapsible-nav-border .collapsible-nav-list li:hover {
  border-bottom: 0;
}
.my-activities-nav .collapsible-nav-list li:hover a:not([aria-current=page]) {
  padding: 16px 18px;
}
.profile-nav .collapsible-nav-list li:hover a:not([aria-current=page]) {
  padding: 14px 18px;
}
.my-activities-nav .collapsible-nav-list li:hover a,
.profile-nav .collapsible-nav-list li:hover a {
  border-bottom: 2px solid var(--stack-line-strong);
}
.my-activities-nav .collapsible-nav-list li.current:hover a,
.profile-nav .collapsible-nav-list li.current:hover a {
  border-bottom-color: var(--stack-brand);
}

/***** Activity tables: first/last cell padding and follow buttons *****/
/* `.my-activities-table td:first-child` zeroes the left padding. */
.my-activities-table th:first-child,
.my-activities-table td:first-child {
  padding-left: 24px;
}
.my-activities-table th:last-child,
.my-activities-table td:last-child {
  padding-right: 24px;
}
.my-activities-table td:not(:first-child) {
  padding-left: 24px;
}
.my-activities-table td,
.my-activities-table th {
  vertical-align: middle;
}
/* The Follow/Unfollow control is a secondary button, not a filled one. */
.subscriptions-subscribe button,
.subscriptions-subscribe button[data-selected=true],
.subscriptions-subscribe button[data-selected=true]:focus,
.subscriptions-subscribe button:hover {
  background-color: var(--stack-surface);
  color: var(--stack-ink);
  border: 1px solid var(--stack-line-strong);
}
.subscriptions-subscribe button:hover,
.subscriptions-subscribe button[data-selected=true] {
  border-color: var(--stack-brand);
  color: var(--stack-brand);
}
.subscriptions-table td .meta-data,
.my-activities-table .stack-cell-mono {
  font-family: var(--stack-font-mono);
}

/***** Rich text: focus must not resize the field *****/
/* The base scoped padding/min-height to `:not(.ck-focused)`, so clicking in
   dropped both and the box jumped. */
.hbs-form .ck.ck-editor__main > .ck-editor__editable,
#new-request-form .ck.ck-editor__editable {
  border: 0 !important;
  box-shadow: none !important;
  min-height: 220px;
  padding: 16px !important;
  font-size: 15px;
  font-family: var(--stack-font-body);
}
/* {{wysiwyg}} renders a plain <textarea> server-side and CKEditor replaces it
   on first interaction. If the two have different heights the field visibly
   jumps, so the pre-init textarea is pinned to the same box as the editor.
   `.new_community_post` needs the extra class to outrank the shared rule. */
.hbs-form textarea[data-helper=wysiwyg],
.hbs-form textarea[data-helper=wysiwyg]:focus {
  min-height: 220px;
  height: 220px;
}
.hbs-form.new_community_post .ck.ck-editor__main > .ck-editor__editable,
.new_community_post .ck.ck-editor__main > .ck-editor__editable {
  min-height: 200px;
}
.hbs-form.new_community_post textarea[data-helper=wysiwyg],
.new_community_post textarea[data-helper=wysiwyg] {
  min-height: 200px;
  height: 200px;
}
/* The comment reply box is deliberately shorter than a composer. */
.request-main .comment-form textarea[data-helper=wysiwyg],
.post-comments .comment-form textarea[data-helper=wysiwyg],
.article-comments .comment-form textarea[data-helper=wysiwyg] {
  min-height: 110px;
  height: 110px;
}
.hbs-form textarea,
.form-field input,
.form-field input[type=text],
.hbs-form select {
  transition: border-color 0.15s;
}

/***** Profile: avatars, actions, feed *****/
/* Copenhagen sizes avatars by width alone, which stretches non-square images. */
.profile-header .profile-avatar .user-avatar,
.profile-activity-header .user-avatar,
.profile-contribution .user-avatar,
.comment-avatar .user-avatar,
.post-avatar .user-avatar,
.article-avatar .user-avatar,
.header .user-avatar {
  object-fit: cover;
  aspect-ratio: 1;
  flex-shrink: 0;
}
.profile-activity-header .user-avatar {
  width: 26px;
  height: 26px;
  min-width: 26px;
  border-radius: 50%;
}
.profile-header .profile-avatar,
.profile-header .profile-avatar .user-avatar {
  width: 76px;
  height: 76px;
  min-width: 76px;
  border-radius: 12px;
}
/* Edit profile is a split button; keep its parts on one line and on-brand. */
.profile-header .options .split-button,
.profile-header .options .user-profile-actions {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  height: auto;
  width: auto;
}
.profile-header .options .split-button button,
.profile-header .options .user-profile-actions button {
  padding: 11px 20px;
  height: auto;
  white-space: nowrap;
}
.profile-header .options .split-button button + button {
  border-left: 1px solid rgba(255, 255, 255, 0.35);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  padding: 11px 12px;
}
.profile-header .options .split-button button:first-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.profile-activity-header {
  min-width: 0;
}
.profile-activity-header > * {
  min-width: 0;
}


/***** Round two *****/

/* Profile: the tab list's 34px top margin escaped its white parent and left a
   gray band between the identity block and the tabs. Move the space inside. */
.profile-header .container {
  padding-bottom: 0;
}
.profile-nav {
  padding-top: 34px;
}
.profile-nav .collapsible-nav-list {
  margin: 0;
}

/* Community post: Copenhagen spreads the byline with space-between and gives
   .post-meta its own bottom rule, doubling the divider. */
.post-layout .post-author {
  justify-content: flex-start;
  align-items: center;
}
.post-layout .post-meta {
  margin: 0;
  padding: 0;
  border-bottom: 0;
  flex: 1;
  text-align: left;
}
.post-layout .post-meta > span {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--stack-ink);
}
.post-layout .post-avatar {
  margin: 0;
}

/* No comments yet: drop the leading rule so the reply box doesn't float under
   an empty band. (`:empty` never matches — the list holds whitespace.) */
.post-comments .comment-list:not(:has(li)),
.article-comments .comment-list:not(:has(li)) {
  display: none;
}
.post-comments .comment-list:not(:has(li)) + .comment-form,
.article-comments .comment-list:not(:has(li)) + .comment-form,
.post-comments .comment-form:first-of-type,
.article-comments .comment-form:first-of-type {
  border-top: 0;
  padding-top: 0;
  margin-top: 18px;
}

/* Byline text stacks left of centre beside the avatar. */
.post-layout .post-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
}

/* "Featured posts" gets the same trailing rule as the other section headings. */
.community-featured-posts .title {
  display: flex;
  align-items: center;
  gap: 20px;
}
.community-featured-posts .title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--stack-line);
}

@media (max-width: 767px) {
  /* The vote column sits above the content on phones. */
  .post-layout {
    flex-direction: column;
    gap: 18px;
  }
  .post-layout .post-actions-wrapper {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    align-self: flex-start;
  }
  .post-layout .post-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

/* Wide tracking adds a trailing space after the last glyph of every nav label,
   so the measured 30px gaps read unevenly depending on the word. Pull that
   trailing space back so the optical gaps match the metric ones. */
.nav-wrapper-desktop a,
.user-nav-list a {
  margin-right: -0.09em;
}
[dir=rtl] .nav-wrapper-desktop a,
[dir=rtl] .user-nav-list a {
  margin-right: 0;
  margin-left: -0.09em;
}

/* Some {{link}} helpers render nothing when the feature is off for the brand
   (service catalog, new request). The empty <li> still occupies a flex slot,
   which shows up as a double gap in the nav — so drop items with no control
   inside. `:empty` does not match here: the <li> contains whitespace. */
.user-nav-list li:not(:has(a)):not(:has(button)),
.menu-list-mobile-items li.item:not(:has(a)):not(:has(button)) {
  display: none;
}

/* Page bottom padding (80px in the spec) — these pages end on a card with no
   trailing section, so the footer butted straight up against it. */
.section.home-section.activity {
  padding-bottom: 80px;
}
.my-activities-nav ~ .container {
  padding-bottom: 80px;
}
#service-catalog-main-content {
  padding-bottom: 24px;
}
@media (max-width: 767px) {
  .section.home-section.activity,
  .my-activities-nav ~ .container {
    padding-bottom: 48px;
  }
}

/* Edit profile is a lone button here — squaring its right corners for a
   dropdown sibling that never renders made it look clipped. */
.profile-header .options .split-button button:first-child:only-child {
  border-radius: var(--stack-radius-control);
}
.profile-header .options .split-button button:first-child:not(:only-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/* Activity feed: bring back the per-type icon (article / post / comment) as a
   tinted tile in its own column, rather than Copenhagen's absolutely
   positioned marker hanging outside the card. */
.profile-activity {
  display: grid;
  grid-template-columns: 30px 1fr;
  column-gap: 14px;
  align-items: start;
}
.profile-activity .profile-activity-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  position: static;
  left: auto;
  top: auto;
  width: 30px;
  height: 30px;
  border-radius: var(--stack-radius-tile);
  background: var(--stack-tint);
  color: var(--stack-brand);
  grid-column: 1;
  grid-row: 1;
  margin: 0;
}
.profile-activity .profile-activity-icon svg {
  display: block;
  width: 15px;
  height: 15px;
  color: var(--stack-brand);
}
.profile-activity .profile-activity-header {
  grid-column: 2;
  grid-row: 1;
  min-height: 30px;
}
.profile-activity .profile-activity-contribution,
.profile-activity-contribution {
  grid-column: 2;
  grid-row: 2;
}
[dir=rtl] .profile-activity .profile-activity-icon {
  grid-column: 1;
}

/* CKEditor gives its first paragraph a top margin, which stacked on the
   editable's own padding and left the caret floating well below the toolbar. */
/* CKEditor injects its own stylesheet at runtime, after the theme's, so these
   need !important to land. */
.ck.ck-editor__editable > *:first-child,
.ck.ck-content > *:first-child,
.ck-editor__editable p:first-child {
  margin-top: 0 !important;
}
.ck.ck-editor__editable > *:last-child,
.ck.ck-content > *:last-child,
.ck-editor__editable p:last-child {
  margin-bottom: 0 !important;
}