@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: #EEF1F4;
  color: rgba(0, 0, 0, 1);
  font-family: Barlow, -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: Oswald, 'Arial Narrow', Impact, Haettenschweiler, 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: rgba(0, 61, 165, 1);
  text-decoration: none;
}
a:visited {
  color: #14181D;
}
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 rgba(0, 61, 165, 1);
}
.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 rgba(0, 61, 165, 1);
}
.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 rgba(0, 61, 165, 1);
}

.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 rgba(0, 61, 165, 1);
  border-radius: 4px;
  color: rgba(0, 61, 165, 1);
  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: rgba(0, 61, 165, 1);
}
.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: rgba(0, 61, 165, 1);
  color: rgba(255, 255, 255, 1);
  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: #00173f;
  border-color: #00173f;
}
.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: rgba(0, 61, 165, 1);
  border: 0;
  border-radius: 4px;
  color: rgba(255, 255, 255, 1);
  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: rgba(255, 255, 255, 1);
}
.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: #00173f;
}
.button-large[disabled], .hbs-form input[type=submit][disabled] {
  background-color: #ddd;
}

.button-secondary {
  color: #333;
  border: 1px solid #848F99;
  background-color: transparent;
}
.button-secondary:visited {
  color: #333;
}
.button-secondary:hover, .button-secondary:focus, .button-secondary:active {
  color: rgba(0, 0, 0, 1);
  border: 1px solid #848F99;
  background-color: #e5e9ee;
}

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

.split-button button {
  background-color: rgba(0, 61, 165, 1);
  border: 0;
  color: rgba(255, 255, 255, 1);
  height: 32px;
  line-height: 16px;
  outline-color: rgba(0, 61, 165, 1);
}

[dir=rtl] .split-button button:not(:only-child):first-child {
  border-left: 1px solid rgba(255, 255, 255, 1);
  border-top-left-radius: unset;
  border-bottom-left-radius: unset;
}
[dir=ltr] .split-button button:not(:only-child):first-child {
  border-right: 1px solid rgba(255, 255, 255, 1);
  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: #333;
  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 rgba(0, 61, 165, 1);
}

.form-field input[type=text] {
  border: 1px solid #848F99;
  border-radius: 4px;
}
.form-field input[type=text]:focus {
  border: 1px solid rgba(0, 61, 165, 1);
}

.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 rgba(0, 61, 165, 1);
  text-decoration: none;
}

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

.form-field .hc-multiselect-toggle:focus {
  outline: none;
  border: 1px solid rgba(0, 61, 165, 1);
  text-decoration: none;
}

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

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

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

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

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

.form footer a {
  color: #333;
  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: #14181D;
}

/***** 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: rgba(0, 61, 165, 1);
}

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

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

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

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

[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: rgba(0, 61, 165, 1);
}
[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: rgba(0, 61, 165, 1);
}

.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 rgba(0, 61, 165, 1);
  border-radius: 4px;
  box-sizing: border-box;
  color: rgba(0, 61, 165, 1);
  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: rgba(0, 61, 165, 1);
}
.blocks-item:hover *, .blocks-item:focus *, .blocks-item:active * {
  color: rgba(255, 255, 255, 1);
  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: rgba(0, 0, 0, 1);
}
.blocks-item-link {
  color: rgba(0, 61, 165, 1);
  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 rgba(0, 61, 165, 1);
  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: rgba(0, 61, 165, 1);
  text-decoration: underline;
}
.community a:visited {
  color: #14181D;
}
.community a:hover, .community a:active, .community a:focus {
  color: rgba(0, 170, 19, 1);
}

.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: rgba(0, 0, 0, 1);
  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: rgba(0, 61, 165, 1);
  text-decoration: underline;
}
.recent-activity-controls a:visited {
  color: #14181D;
}
.recent-activity-controls a:hover, .recent-activity-controls a:active, .recent-activity-controls a:focus {
  color: rgba(0, 170, 19, 1);
}
.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: rgba(0, 61, 165, 1);
  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: rgba(0, 0, 0, 1);
}
.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: rgba(0, 0, 0, 1);
}

.icon-star {
  color: rgba(0, 61, 165, 1);
  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: rgba(0, 0, 0, 1);
  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: rgba(0, 61, 165, 1);
  text-decoration: underline;
}
.article-body a:visited {
  color: #14181D;
}
.article-body a:hover, .article-body a:active, .article-body a:focus {
  color: rgba(0, 170, 19, 1);
}
.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: #dfe4ea;
}
.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: #e5e9ee;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}
.article-body pre {
  background: #e5e9ee;
  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: #333;
  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: #333;
}
.article-comment-count:hover {
  text-decoration: none;
}
.article-comment-count-icon {
  vertical-align: middle;
  color: rgba(0, 61, 165, 1);
  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: rgba(0, 61, 165, 1);
  text-decoration: underline;
}
.article-more-questions a:visited {
  color: #14181D;
}
.article-more-questions a:hover, .article-more-questions a:active, .article-more-questions a:focus {
  color: rgba(0, 170, 19, 1);
}
.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: rgba(0, 0, 0, 1);
  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: rgba(0, 0, 0, 1);
  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: #333;
}

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

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

.vote-voted {
  color: rgba(0, 61, 165, 1);
}

.vote-voted:hover {
  color: #00173f;
}

/***** 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: rgba(0, 61, 165, 1);
}
.community-follow button:hover::after, .community-follow button:focus::after {
  border-color: rgba(255, 255, 255, 1);
  color: rgba(255, 255, 255, 1);
}
.community-follow button[data-selected=true] {
  background-color: rgba(0, 61, 165, 1);
  color: rgba(255, 255, 255, 1);
}
.community-follow button[data-selected=true]::after {
  border-left: 1px solid rgba(255, 255, 255, 1);
  color: rgba(255, 255, 255, 1);
}
.community-follow button[data-selected=true]:hover {
  background-color: #00173f;
  border-color: #00173f;
}
.community-follow button::after {
  border-left: 1px solid rgba(0, 61, 165, 1);
  content: attr(data-follower-count);
  color: rgba(0, 61, 165, 1);
  display: inline-block;
  font-family: Oswald, 'Arial Narrow', Impact, Haettenschweiler, 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 rgba(0, 61, 165, 1);
  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: rgba(0, 61, 165, 1);
  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: #14181D;
}
.striped-list .meta-group {
  margin: 5px 0;
}
.striped-list-count {
  color: #333;
  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: rgba(0, 0, 0, 1);
    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: rgba(0, 61, 165, 1);
}
.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: #333;
}
.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: Barlow, -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: rgba(0, 61, 165, 1);
  text-decoration: underline;
}
.post-body a:visited {
  color: #14181D;
}
.post-body a:hover, .post-body a:active, .post-body a:focus {
  color: rgba(0, 170, 19, 1);
}
.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: #dfe4ea;
}
.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: #e5e9ee;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}
.post-body pre {
  background: #e5e9ee;
  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: #333;
  font-style: italic;
  padding: 0 15px;
}
.post-footer {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
}
.post-comment-count {
  color: #333;
}
.post-comment-count:hover {
  text-decoration: none;
}
.post-comment-count .icon-comments {
  color: rgba(0, 61, 165, 1);
  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 rgba(0, 61, 165, 1);
}

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

.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 rgba(0, 61, 165, 1);
}
.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: #dfe4ea;
  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: #333;
  font-size: 13px;
}
@media (min-width: 768px) {
  .contributions-table td:last-child {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
  }
}

.no-activities {
  color: #333;
}

/***** 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: #333;
  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 rgba(0, 61, 165, 1);
}
.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 rgba(0, 61, 165, 1);
}
.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: #e5e9ee;
    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: #333;
  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: #333;
  font-size: 13px;
}
.meta-data:not(:last-child)::after {
  content: "·";
  margin: 0 5px;
}

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

.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: #333;
  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 rgba(0, 61, 165, 1);
  border-radius: 4px;
  color: rgba(0, 61, 165, 1);
  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: #dfe4ea;
  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: #333;
  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: #333;
  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: #e5e9ee;
}
@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: #EEF1F4;
  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: rgba(0, 0, 0, 1);
}
.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: rgba(0, 61, 165, 1);
}
.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: rgba(0, 61, 165, 1);
}
.search-results .no-results .action-prompt a:visited {
  color: rgba(0, 61, 165, 1);
}

.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: #333;
  font-size: 13px;
}
.search-result-votes-icon, .search-result-meta-count-icon {
  color: rgba(0, 61, 165, 1);
  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: rgba(0, 61, 165, 1);
  text-decoration: underline;
}
.service-catalog-description a:visited {
  color: #14181D;
}
.service-catalog-description a:hover, .service-catalog-description a:active, .service-catalog-description a:focus {
  color: rgba(0, 170, 19, 1);
}
.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: #dfe4ea;
}
.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: #e5e9ee;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}
.service-catalog-description pre {
  background: #e5e9ee;
  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: #333;
  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;
}/* ==========================================================================
   ANVIL THEME LAYER — by Artica
   Restyles Copenhagen 1:1 to the Anvil design system (manufacturing help
   center). Cool steel grays, a single safety-yellow accent, zero border
   radius, hazard-stripe motifs, condensed all-caps headings, and monospace
   for anything a machine produced.
   Tokens: safety #FFD100 (var(--anvil-brand)), page #EEF1F4 (var(--anvil-bg)),
   ink #14181D (var(--anvil-ink)), dark bands #1B2027 (var(--anvil-steel-800)).
   ========================================================================== */

/***** 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.
 *****/
:root {
  /* ---- steel scale — the theme's spine (see handoff "Design Tokens") ---- */
  --anvil-steel-900: #14181D;  /* primary text, solid buttons, table heads, tiles */
  --anvil-steel-800: #1B2027;  /* header, hero, footer, banner field */
  --anvil-steel-700: #3A434E;  /* borders/dividers on dark, hazard dark stop */
  --anvil-steel-600: #39424D;  /* body text at reduced emphasis */
  --anvil-steel-500: #59636F;  /* secondary text, muted labels, glyphs on light */
  --anvil-steel-400: #8B959F;  /* tertiary text, placeholders, metadata */
  --anvil-steel-300: #AEB7C2;  /* body text on dark */
  --anvil-steel-200: #C9D0D8;  /* input borders, secondary button borders */
  --anvil-steel-150: #D5DBE1;  /* card/panel borders, grid gap lines */
  --anvil-steel-100: #E2E7EC;  /* row dividers, avatar fill, toolbar chrome */
  --anvil-steel-050: #F4F6F8;  /* subtle panel fill */
  --anvil-steel-025: #F7F9FA;  /* sidebar search field fill */
  --anvil-danger: #A6392C;     /* "Denied" status pill only */

  /* wired to manifest settings */
  --anvil-brand: rgba(0, 61, 165, 1);             /* [setting] THE accent — safety yellow */
  --anvil-brand-darker: #002a72; /* [setting] hover on filled controls */
  --anvil-on-brand: rgba(255, 255, 255, 1);     /* [setting] text on the accent */
  --anvil-ink: rgba(0, 0, 0, 1);                /* [setting] headings & body text */
  --anvil-bg: #EEF1F4;           /* [setting] page background */
  --anvil-link: rgba(0, 61, 165, 1);               /* [setting] link color */
  --anvil-link-hover: rgba(0, 170, 19, 1);   /* [setting] link hover */
  --anvil-font-heading: Oswald, 'Arial Narrow', Impact, Haettenschweiler, sans-serif;     /* [setting] Oswald by default */
  --anvil-font-body: Barlow, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;           /* [setting] Barlow by default */
  --anvil-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* the two accent tints are derived so a re-tinted brand carries through the
     warning callout, the success toast and the hazard stripe */
  --anvil-safety-tint: #FFF8DB;                     /* fallback for older engines */
  --anvil-safety-tint: color-mix(in srgb, rgba(0, 61, 165, 1) 16%, #FFFFFF);

  /* surfaces */
  --anvil-surface: #FFFFFF;          /* cards, inputs, dropdowns, sidebar */
  --anvil-surface-alt: #FFFFFF;      /* sidebar + panel surface */
  --anvil-surface-warm: #1B2027;     /* dark band start (hero, banner) */
  --anvil-surface-warm-2: #14181D;   /* dark band end */
  --anvil-surface-warm-3: #1B2027;   /* services band */
  --anvil-surface-stat: #FFFFFF;     /* stat tiles */
  --anvil-row-hover: #F4F6F8;        /* list row hover inside cards */
  --anvil-tint: #14181D;             /* icon tiles, table header rows */
  --anvil-tint-strong: #F4F6F8;      /* selected control wash */
  --anvil-tint-hover: #F4F6F8;       /* menu item + user chip hover */
  --anvil-tree-hover: #F4F6F8;       /* nav tree row hover */
  --anvil-note-bg: var(--anvil-safety-tint); /* blockquote / warning callout */

  /* ink scale */
  --anvil-ink-static: #14181D;       /* fixed ink (dark chips, code blocks) */
  --anvil-ink-2: #39424D;            /* top-nav links, sidebar rows */
  --anvil-ink-3: #39424D;            /* body copy, subheads */
  --anvil-ink-4: #59636F;            /* secondary text, blurbs */
  --anvil-ink-5: #59636F;            /* meta text, eyebrows */
  --anvil-prose: #39424D;            /* article body prose */
  --anvil-prose-2: #39424D;          /* callout + snippet copy */
  --anvil-muted: #8B959F;            /* placeholders, small icons */
  --anvil-muted-2: #8B959F;          /* sidebar caret icons */
  --anvil-muted-soft: #AEB7C2;       /* breadcrumb separators */
  --anvil-on-dark: #FFFFFF;          /* text on ink surfaces */

  /* brand ramp */
  --anvil-brand-ink: rgba(0, 61, 165, 1);         /* [setting] links, stat numbers */
  --anvil-brand-ink-dark: rgba(0, 170, 19, 1); /* [setting] link hover */
  --anvil-brand-soft: var(--anvil-brand); /* glyphs inside dark icon tiles */
  --anvil-gold-accent: var(--anvil-brand); /* attribution accent */
  --anvil-avatar-bg: #E2E7EC;        /* avatar placeholder fill */

  /* borders */
  --anvil-border: #D5DBE1;           /* cards, panels, sidebar, grid gap lines */
  --anvil-border-input: #C9D0D8;     /* inputs & search */
  --anvil-border-hairline: #E2E7EC;  /* list row dividers */
  --anvil-border-cell: #E2E7EC;      /* in-card row dividers */
  --anvil-border-warm: #D5DBE1;      /* panel borders */
  --anvil-border-hero: #3A434E;      /* hero bottom border (on dark) */
  --anvil-border-strong: #C9D0D8;    /* outline buttons, dropzone */

  /* status pills — Oswald 10.5/600/0.14em, 5px 9px */
  --anvil-status-open-bg: #14181D;
  --anvil-status-open-ink: var(--anvil-brand);
  --anvil-status-pending-bg: #E2E7EC;
  --anvil-status-pending-ink: #39424D;
  --anvil-status-solved-bg: #14181D;
  --anvil-status-solved-ink: #FFFFFF;
  --anvil-status-open: #14181D;
  --anvil-status-pending: #39424D;
  --anvil-status-solved: #14181D;
  --anvil-empty-icon: var(--anvil-steel-200);

  /* shadows — the design specifies exactly one, on the user dropdown */
  --anvil-shadow-rest: none;
  --anvil-shadow-hover: none;
  --anvil-shadow-menu: 0 12px 28px rgba(20, 24, 29, 0.18);
  --anvil-shadow-tag: none;
  --anvil-shadow-hero: none;

  /* radius — zero everywhere, no exceptions */
  --anvil-radius-card: 0;
  --anvil-radius-card-sm: 0;
  --anvil-radius-tile: 0;
  --anvil-radius-input: 0;
  --anvil-radius-row: 0;
  --anvil-radius-menu: 0;
  --anvil-radius-band: 0;

  /* Copenhagen-surface aliases — the base layer references these by name */
  --anvil-deep: #14181D;             /* code blocks, dark chips */
  --anvil-header-bg: #1B2027;        /* sticky top bar */
  --anvil-warm: #F4F6F8;             /* sub-nav bands, toolbar hover chips */
  --anvil-code-chip: #E2E7EC;        /* inline code background */
  --anvil-muted-blue: #59636F;       /* secondary text on tints */
  --anvil-border-blue: #D5DBE1;
  --anvil-border-blue-strong: #C9D0D8; /* attachment dropzone */
  --anvil-footer-ink: #8B959F;       /* footer meta text */
  --anvil-dot-on-dark: transparent;
  --anvil-dot-on-light: transparent;

  /* signature motifs */
  --anvil-hazard: repeating-linear-gradient(
      135deg, rgba(0, 61, 165, 1) 0 4px, #14181D 4px 8px);
  --anvil-hazard-wide: repeating-linear-gradient(
      135deg, rgba(0, 61, 165, 1) 0 8px, #14181D 8px 16px);
  --anvil-dark-texture: repeating-linear-gradient(
      135deg, rgba(255, 209, 0, 0.055) 0 2px, transparent 2px 14px);
  --anvil-rule: 2px solid #14181D;   /* the signature section divider */

  /* layout */
  --anvil-sidebar-width: 288px;
  --anvil-gutter: 34px;
  --anvil-page-max: 1520px;
  --anvil-home-max: 1520px;
  --anvil-header-h: 64px;
}


/***** Anvil fonts *****/
/* Oswald carries every heading, button, tab and label; Barlow carries body
   copy; IBM Plex Mono carries anything a machine produced. All three are
   self-hosted latin + latin-ext subsets so the theme has no CDN dependency. */
@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url(/hc/theming_assets/01M1HJTWQQXJX4Q8SKPVA0EWQ4) format("woff2");
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/hc/theming_assets/01M1HJTWJ091CY4GKKNYE0T89T) format("woff2");
}
@font-face {
  font-family: "Barlow";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/hc/theming_assets/01M1HJTWRF93KVX2CBF0AX2XA3) format("woff2");
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/hc/theming_assets/01M1HJTVYA6NJD8HNNP40B1D46) format("woff2");
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/hc/theming_assets/01M1HJTTZG25GM1SV51ZSYV6W4) format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/hc/theming_assets/01M1HJTVVFHASHJJ6WJ9YBSD2G) format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/hc/theming_assets/01M1HJTWATDSB2RHXJRZFS301S) format("woff2");
}
/* Retained so the manifest's alternate font options still self-host. */
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url(/hc/theming_assets/01M1HJTWJ8W1DPG3H6N7SY3XB3) format("woff2");
}
@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url(/hc/theming_assets/01M1HJTWH9MG52FS5HVYE76957) format("woff2");
}
@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/hc/theming_assets/01M1HJTWTGQRVFA4ZJF858JMT2) format("woff2");
}
@font-face {
  font-family: "Material Symbols Sharp";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(/hc/theming_assets/01M1HJTVJBG3TYF1WTKPGQAQE5) format("woff2");
}

/* Glyphs render through CSS ligature content, never as raw text in templates
   (Zendesk marketplace flags literal strings in .hbs files). Context classes
   set the default glyph; JS-seeded icons override via data-icon. */
.blocks-item-icon .anvil-icon::before {
  content: "description";
}
.topics-item .blocks-item-icon .anvil-icon::before {
  content: "forum";
}
.page-header-icon .anvil-icon::before {
  content: "description";
}
.no-results-icon .anvil-icon::before {
  content: "search_off";
}
.service-catalog-hero-badge .anvil-icon::before {
  content: "check_circle";
}
.footer-brand-logo .anvil-icon::before {
  content: "precision_manufacturing";
}
.footer-language-icon::before {
  content: "language";
}
/* the attribution's only glyph is the hover arrow */
.anvil-attribution .anvil-icon::before {
  content: "arrow_forward";
}
.anvil-brand-mark .anvil-icon::before {
  content: "precision_manufacturing";
}
.anvil-sidebar-search-icon::before {
  content: "search";
}
.anvil-sidebar-home-icon::before {
  content: "home";
}
.anvil-tree-caret::before {
  content: "chevron_right";
}
.anvil-tree-row[aria-expanded="true"] > .anvil-tree-caret::before {
  content: "expand_more";
}
.anvil-sidebar-toggle-icon::before {
  content: "menu";
}
.anvil-sidebar-close-icon::before {
  content: "close";
}
.anvil-hero-pill-icon::before {
  content: "warning";
}
.anvil-icon[data-icon]::before {
  content: attr(data-icon) !important;
}

.anvil-icon {
  font-family: "Material Symbols Sharp";
  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;
}

/***** Base *****/
body {
  background-color: var(--anvil-bg);
  color: var(--anvil-ink);
  font-family: var(--anvil-font-body);
  font-size: 17px;
  line-height: 1.7;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
}

body > main {
  flex: 1 0 auto;
}

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

h1 {
  font-size: 38px;
  letter-spacing: -0.4px;
  line-height: 1.25;
}

h2 {
  font-size: 24px;
  letter-spacing: -0.3px;
}

h3 {
  font-size: 19px;
  font-weight: 800;
}

a {
  color: var(--anvil-link);
}
a:hover, a:active {
  color: var(--anvil-link-hover);
}

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

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

.container-divider {
  display: none;
}

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

/***** Buttons → pills *****/
.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 {
  border: 1.5px solid var(--anvil-brand);
  border-radius: 999px;
  font-family: var(--anvil-font-body);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.45;
  padding: 9px 22px;
}
.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 {
  text-decoration: none;
}

.button-large, .hbs-form input[type=submit] {
  background-color: var(--anvil-brand);
  border: 0;
  border-radius: 999px;
  color: var(--anvil-on-brand);
  font-family: var(--anvil-font-body);
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.45;
  min-width: 0;
  padding: 12px 28px;
}

.button-secondary {
  color: var(--anvil-ink);
  border: 1.5px solid var(--anvil-border-input);
  background-color: #FFFFFF;
  border-radius: 999px;
}
.button-secondary:hover, .button-secondary:focus, .button-secondary:active {
  color: var(--anvil-ink);
  border: 1.5px solid var(--anvil-border-input);
  background-color: var(--anvil-warm);
}

/***** Tables *****/
.table th,
.table th a {
  color: var(--anvil-ink);
  font-family: var(--anvil-font-heading);
  font-weight: 800;
  font-size: 14.5px;
}
.table tr {
  border-bottom: 1px solid var(--anvil-border);
}
.table thead tr {
  border-bottom: 2px solid var(--anvil-border);
}
@media (min-width: 768px) {
  .table td, .table th {
    padding: 12px 20px 12px 2px;
    height: auto;
  }
}
@media (min-width: 1024px) {
  .table td, .table th {
    padding: 16px 30px 16px 2px;
  }
}
.table td {
  font-size: 15.5px;
}

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

.form-header {
  font-size: 38px;
}

.form-field label {
  font-family: var(--anvil-font-heading);
  font-weight: 800;
  font-size: 16.5px;
  margin-bottom: 9px;
  color: var(--anvil-ink);
}

.form-field .optional {
  font-family: var(--anvil-font-body);
  font-weight: 500;
  color: var(--anvil-muted);
  font-size: 14.5px;
}

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

.form-field input,
.form-field input[type=text] {
  background-color: #FFFFFF;
  border: 1.5px solid var(--anvil-border-input);
  border-radius: var(--anvil-radius-input);
  padding: 13px 16px;
}
.form-field input:focus,
.form-field input[type=text]:focus {
  border: 1.5px solid var(--anvil-brand);
}

.hbs-form textarea {
  background-color: #FFFFFF;
  border: 1.5px solid var(--anvil-border-input);
  border-radius: var(--anvil-radius-input);
  padding: 13px 16px;
}
.hbs-form textarea:focus {
  border: 1.5px solid var(--anvil-brand);
}

.hbs-form select, .search select {
  border: 1.5px solid var(--anvil-border-input);
  border-radius: var(--anvil-radius-input);
  padding: 13px 36px 13px 16px;
  color: var(--anvil-ink);
  font-size: 16px;
}
.hbs-form select:focus, .search select:focus {
  border: 1.5px solid var(--anvil-brand);
}

.form-field .nesty-input {
  background-color: #FFFFFF;
  border: 1.5px solid var(--anvil-border-input);
  border-radius: var(--anvil-radius-input);
  height: 48px;
  line-height: 48px;
  padding: 0 16px;
  font-size: 16px;
  color: var(--anvil-ink);
}
.form-field .nesty-input:focus {
  border: 1.5px solid var(--anvil-brand);
}

.form-field .hc-multiselect-toggle {
  background-color: #FFFFFF;
  border: 1.5px solid var(--anvil-border-input);
  border-radius: var(--anvil-radius-input);
}
.form-field .hc-multiselect-toggle:focus {
  border: 1.5px solid var(--anvil-brand);
}

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

/***** Header *****/
.header {
  background-color: var(--anvil-header-bg);
  border-bottom: 1px solid var(--anvil-border);
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 13px max(32px, calc((100% - 1180px) / 2));
  height: auto;
  min-height: 76px;
  flex-shrink: 0;
}
@media (min-width: 1160px) {
  .header {
    padding: 13px max(32px, calc((100% - 1180px) / 2));
    width: 100%;
  }
}

.logo a {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo img {
  max-height: 42px;
  border-radius: 13px;
}

.logo span {
  margin: 0;
  color: var(--anvil-ink);
  font-family: var(--anvil-font-heading);
  font-weight: 800;
  font-size: 21px;
  letter-spacing: -0.2px;
  white-space: nowrap;
}

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

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

.nav-wrapper-desktop a {
  color: var(--anvil-link);
  font-size: 15.5px;
  font-weight: 600;
  padding: 0 28px 0 0;
}
[dir=rtl] .nav-wrapper-desktop a {
  padding: 0 0 0 28px;
}

.nav-wrapper-desktop .ask-ai,
.nav-wrapper-mobile .ask-ai {
  background-color: var(--anvil-link);
  border-color: var(--anvil-link);
  border-radius: 999px;
  font-weight: 700;
  padding: 8px 18px;
}

.user-info > button {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--anvil-ink);
  font-size: 15.5px;
  font-weight: 600;
  font-family: var(--anvil-font-body);
  background: none;
  cursor: pointer;
}
.user-info > button:hover, .user-info > button:focus {
  color: var(--anvil-ink);
}
.user-info > button .dropdown-chevron-icon {
  color: var(--anvil-muted);
}

.header .user-avatar {
  height: 34px;
  width: 34px;
}

.nav-wrapper-mobile .menu-button-mobile {
  min-height: 44px;
  min-width: 44px;
}
.nav-wrapper-mobile .menu-list-mobile {
  top: 76px;
  border-color: var(--anvil-border);
}
.nav-wrapper-mobile .menu-list-mobile-items a,
.nav-wrapper-mobile .menu-list-mobile-items button {
  padding: 11px 24px;
  font-size: 16px;
}
.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(--anvil-warm);
}
.nav-wrapper-mobile .menu-list-mobile-items .nav-divider {
  border-color: var(--anvil-border);
}

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

.skip-navigation {
  background-color: var(--anvil-deep);
  border-radius: 999px;
}

/***** Footer *****/
.footer {
  background-color: var(--anvil-deep);
  color: var(--anvil-footer-ink);
  border-top: 80px solid transparent;
  background-clip: padding-box;
  margin-top: auto;
  padding: 36px 0;
  flex-shrink: 0;
}
.footer a {
  color: var(--anvil-footer-ink);
}
.footer-inner {
  max-width: 1244px;
  padding: 0 32px;
  align-items: center;
  gap: 24px;
}
@media (min-width: 1160px) {
  .footer-inner {
    padding: 0 32px;
    width: 100%;
  }
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 11px;
}
.footer .footer-brand, .footer .footer-brand:visited {
  color: #FFFFFF;
}
.footer-brand:hover, .footer-brand:focus, .footer-brand:active {
  text-decoration: none;
}
.footer-brand:hover .footer-brand-name {
  text-decoration: underline;
}

.footer-brand-logo {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
}
.footer-brand-logo .anvil-icon {
  font-size: 20px;
}

.footer-brand-name {
  font-family: var(--anvil-font-heading);
  font-weight: 800;
  font-size: 17px;
}

.footer-language-selector,
.footer-locale-static {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--anvil-footer-ink);
}

.footer-language-selector button {
  color: var(--anvil-footer-ink);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 600;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--anvil-font-body);
}

.footer-language-icon {
  font-size: 19px;
}

/* Floating attribution tag */
.anvil-attribution {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 22px;
  z-index: 60;
  background: #FFFFFF;
  border: 1px solid var(--anvil-border);
  border-radius: 999px;
  padding: 9px 18px 9px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: var(--anvil-shadow-tag);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--anvil-ink-static);
  white-space: nowrap;
}
.anvil-attribution .anvil-icon {
  font-size: 18px;
  color: var(--anvil-brand);
}
a.anvil-attribution,
a.anvil-attribution:visited {
  color: var(--anvil-ink-static);
  text-decoration: none;
}
a.anvil-attribution:hover,
a.anvil-attribution:focus {
  color: var(--anvil-ink-static);
  text-decoration: none;
  border-color: var(--anvil-brand);
  box-shadow: 0 8px 24px rgba(28, 43, 69, 0.2);
}

/***** Breadcrumbs *****/
.breadcrumbs {
  flex-wrap: wrap;
  row-gap: 4px;
}
.breadcrumbs li {
  color: var(--anvil-muted-soft);
  font-size: 15px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
}
@media (max-width: 767px) {
  .breadcrumbs li {
    max-width: 240px;
  }
}
.breadcrumbs li + li::before {
  content: "chevron_right";
  font-family: "Material Symbols Sharp";
  font-size: 17px;
  font-weight: normal;
  line-height: 1;
  color: var(--anvil-muted-soft);
  margin: 0 8px;
  font-feature-settings: "liga";
  font-variation-settings: "FILL" 0, "wght" 450, "GRAD" 0, "opsz" 24;
}
.breadcrumbs li a {
  color: var(--anvil-link);
}
.breadcrumbs li a:visited {
  color: var(--anvil-link);
}

.sub-nav {
  align-items: center;
  padding-top: 34px;
  margin-bottom: 44px;
}

/***** Search field *****/
.search {
  background-color: #FFFFFF;
  border-color: var(--anvil-border-input);
  border-width: 1.5px;
  border-radius: 999px;
  align-items: center;
}
.search:focus-within {
  border-color: var(--anvil-brand);
}
.search input[type=search],
.search .clear-button {
  border-radius: 999px;
}
.search input[type=search] {
  color: var(--anvil-ink);
  font-size: 15.5px;
  height: 44px;
  background-color: transparent;
}
.search input[type=search]:focus {
  color: var(--anvil-ink);
}
.search input[type=search]::placeholder {
  color: var(--anvil-muted);
  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: 46px;
}

.search input[type=submit] {
  background-color: var(--anvil-brand);
  color: var(--anvil-on-brand);
  border: 0;
  border-radius: 999px;
  padding: 10px 26px;
  margin: 5px;
  font-family: var(--anvil-font-body);
  font-weight: 700;
  font-size: 15.5px;
  cursor: pointer;
  flex: none;
  transition: background-color 0.12s ease-in-out;
}
.search input[type=submit]:hover,
.search input[type=submit]:focus {
  background-color: var(--anvil-brand-darker);
}
.search input[type=submit]:focus-visible {
  outline: 2px solid var(--anvil-deep);
  outline-offset: 2px;
}

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

.search-icon {
  left: 18px;
  width: 20px;
  height: 20px;
  color: var(--anvil-muted);
}
[dir=rtl] .search-icon {
  right: 18px;
}

/***** Hero *****/
.hero {
  background-color: var(--anvil-deep);
  background-image: radial-gradient(var(--anvil-dot-on-dark) 1.6px, transparent 1.6px);
  background-position: 0 0;
  background-size: 28px 28px;
  background-repeat: repeat;
  height: auto;
  padding: 78px 32px 92px;
  margin-bottom: 0;
}

.hero-inner {
  position: static;
  transform: none;
  top: auto;
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}

.hero-title {
  margin: 0;
  font-family: var(--anvil-font-heading);
  font-weight: 900;
  font-size: 46px;
  line-height: 1.25;
  color: #FFFFFF;
  letter-spacing: -0.5px;
  text-wrap: pretty;
}

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

.hero .search {
  border: 0;
  box-shadow: var(--anvil-shadow-hero);
  padding: 5px 5px 5px 0;
}
.hero .search input[type=search] {
  height: 48px;
  font-size: 16.5px;
}
[dir=ltr] .hero .search input[type=search] {
  padding-left: 52px;
}
.hero .search-icon {
  left: 24px;
  width: 22px;
  height: 22px;
}
[dir=rtl] .hero .search-icon {
  right: 24px;
}

/* Community hero variant */
.community-hero {
  background-color: var(--anvil-deep);
  background-image: radial-gradient(var(--anvil-dot-on-dark) 1.6px, transparent 1.6px);
  background-position: 0 0;
  background-size: 28px 28px;
  background-repeat: repeat;
  padding: 56px 32px 62px;
  margin-bottom: 0;
}
.community-hero .hero-inner {
  max-width: 760px;
  gap: 22px;
}
.community-hero .hero-title {
  font-size: 34px;
  letter-spacing: -0.4px;
}
.community-hero .hero-search {
  max-width: 560px;
}

/* Service catalog hero variant */
.service-catalog-hero {
  background-color: var(--anvil-tint);
  background-image: radial-gradient(var(--anvil-dot-on-light) 1.6px, transparent 1.6px);
  background-position: 0 0;
  background-size: 26px 26px;
  background-repeat: repeat;
  height: auto;
  padding: 54px 32px;
  text-align: left;
  margin-bottom: 0;
}

.service-catalog-hero-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.service-catalog-hero-title {
  margin: 0;
  font-family: var(--anvil-font-heading);
  font-weight: 900;
  font-size: 30px;
  color: var(--anvil-deep);
  letter-spacing: -0.4px;
  line-height: 1.3;
}

.service-catalog-hero-subtitle {
  margin: 6px 0 0;
  color: var(--anvil-muted-blue);
  font-size: 16.5px;
}

.service-catalog-hero-badge {
  width: 88px;
  height: 88px;
  border-radius: 26px;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 26px rgba(27, 59, 111, 0.14);
  flex-shrink: 0;
  color: var(--anvil-brand);
}
.service-catalog-hero-badge .anvil-icon {
  font-size: 44px;
}
@media (max-width: 767px) {
  .service-catalog-hero-badge {
    display: none;
  }
}

/***** Page headers *****/
.page-header h1 {
  font-size: 40px;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 0;
}

.page-header-icon {
  width: 54px;
  height: 54px;
  border-radius: var(--anvil-radius-card-sm);
  background: var(--anvil-tint);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--anvil-brand);
  flex-shrink: 0;
}
.page-header-icon .anvil-icon {
  font-size: 30px;
}

.page-header-description {
  color: var(--anvil-muted);
  font-size: 17.5px;
  margin: 16px 0 0;
}

/***** Blocks (home category cards / community topic cards) *****/
.blocks-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin: 0;
}
@media (min-width: 768px) {
  .blocks-list {
    margin: 0;
  }
}
@media (max-width: 1023px) {
  .blocks-list {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 767px) {
  .blocks-list {
    grid-template-columns: 1fr;
  }
}

.knowledge-base .blocks-list {
  margin-top: -38px;
  position: relative;
  z-index: 1;
}
@media (max-width: 767px) {
  .knowledge-base .blocks-list {
    margin-top: -48px;
  }
}

.blocks-item {
  background: #FFFFFF;
  border: 1.5px solid var(--anvil-border);
  border-radius: var(--anvil-radius-card);
  color: var(--anvil-ink);
  margin: 0;
  flex: none;
  text-align: left;
  box-shadow: var(--anvil-shadow-rest);
  transition: border-color 0.15s, box-shadow 0.15s;
}
@media (min-width: 768px) {
  .blocks-item {
    margin: 0;
  }
}
.blocks-item:hover, .blocks-item:focus-within, .blocks-item:active {
  background-color: #FFFFFF;
  border-color: var(--anvil-brand);
  box-shadow: var(--anvil-shadow-hover);
}
.blocks-item:hover *, .blocks-item:focus *, .blocks-item:active * {
  color: inherit;
  text-decoration: none;
}

.blocks-item-link {
  color: var(--anvil-ink);
  padding: 26px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 12px;
}
.blocks-item-link:focus {
  box-shadow: none;
  outline: 2px solid var(--anvil-brand);
  outline-offset: 2px;
}

.blocks-item-icon {
  width: 46px;
  height: 46px;
  border-radius: var(--anvil-radius-tile);
  background: var(--anvil-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--anvil-brand);
}
.blocks-item-icon .anvil-icon {
  font-size: 26px;
}

.blocks-item-title {
  font-family: var(--anvil-font-heading);
  font-weight: 800;
  font-size: 20px;
  color: var(--anvil-ink);
  margin: 0;
}

.blocks-item-description {
  color: var(--anvil-muted);
  font-size: 15.5px;
  line-height: 1.6;
}
.blocks-item-description:not(:empty) {
  margin-top: 0;
}

/* Community topic cards */
.topics .blocks-list {
  grid-template-columns: repeat(2, 1fr);
  margin-top: 26px;
}
@media (max-width: 767px) {
  .topics .blocks-list {
    grid-template-columns: 1fr;
  }
}
.topics .blocks-item-link {
  align-items: center;
  text-align: center;
  padding: 34px;
  gap: 8px;
}
.topics .blocks-item-icon {
  width: 50px;
  height: 50px;
  border-radius: 15px;
}
.topics .blocks-item-icon .anvil-icon {
  font-size: 27px;
}
.topics .blocks-item-title {
  font-size: 21px;
}
.topics .blocks-item .meta-group {
  color: var(--anvil-muted);
  font-size: 14.5px;
  display: flex;
  gap: 0;
  margin: 0;
}
.topics .blocks-item .meta-group .meta-data {
  color: var(--anvil-muted);
  font-size: 14.5px;
}

/***** Homepage sections *****/
.section {
  margin-bottom: 64px;
}
@media (min-width: 768px) {
  .section {
    margin-bottom: 64px;
  }
}
.section.hero,
.section.knowledge-base {
  margin-bottom: 0;
}
.knowledge-base .categories {
  margin-bottom: 64px;
}

.home-section h2,
.knowledge-base .articles h2 {
  font-size: 27px;
  margin-bottom: 18px;
}
.knowledge-base .articles h2 {
  text-align: left;
}

/***** Promoted articles *****/
.promoted-articles,
.article-list.promoted-articles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 48px;
}
@media (max-width: 767px) {
  .promoted-articles,
  .article-list.promoted-articles {
    grid-template-columns: 1fr;
  }
}
.promoted-articles-item {
  padding-right: 0;
  width: auto;
  align-self: stretch;
}
@media (min-width: 1024px) {
  .promoted-articles-item {
    padding-right: 0;
    width: auto;
    align-self: stretch;
  }
}
.promoted-articles-item a {
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--anvil-border);
  padding: 15px 2px;
  font-weight: 600;
  font-size: 16.5px;
}
.promoted-articles-item a::before {
  content: "description";
  font-family: "Material Symbols Sharp";
  font-size: 20px;
  font-weight: normal;
  color: var(--anvil-muted);
  line-height: 1;
  font-feature-settings: "liga";
  font-variation-settings: "FILL" 0, "wght" 450, "GRAD" 0, "opsz" 24;
  flex-shrink: 0;
}
.promoted-articles-item:last-child a {
  border-bottom: 1px solid var(--anvil-border);
}

/***** Community section on homepage *****/
.community,
.activity {
  border-top: 0;
  padding: 0;
}

.community {
  margin-top: 72px;
}

.community h2 {
  font-size: 27px;
  margin-bottom: 0;
}

.community a.community-link {
  display: inline-block;
  margin-top: 8px;
  font-weight: 600;
  color: var(--anvil-link);
}

.community-image {
  min-height: 0;
  margin-top: 28px;
  background-color: var(--anvil-tint);
  background-image: radial-gradient(var(--anvil-dot-on-light) 1.6px, transparent 1.6px);
  background-position: 0 0;
  background-size: 26px 26px;
  background-repeat: repeat;
  border-radius: 22px;
  padding: 66px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.community-banner-title {
  margin: 0;
  font-family: var(--anvil-font-heading);
  font-weight: 900;
  font-size: 32px;
  color: var(--anvil-deep);
  letter-spacing: -0.4px;
  line-height: 1.3;
}

.community-banner-subtitle {
  margin: 0;
  color: var(--anvil-muted-blue);
  font-size: 17px;
  max-width: 560px;
}

/***** Recent activity *****/
.activity {
  margin-top: 72px;
}

.recent-activity-header {
  font-size: 27px;
  margin-bottom: 18px;
}

.recent-activity-item {
  border-bottom: 1px solid var(--anvil-border);
  padding: 18px 2px;
}

.recent-activity-item-parent {
  font-family: var(--anvil-font-heading);
  font-weight: 800;
  font-size: 16px;
}

.recent-activity-item-link {
  color: var(--anvil-ink);
  font-size: 16px;
}
.recent-activity-item-link:visited {
  color: var(--anvil-ink);
}

.recent-activity-item-meta {
  color: var(--anvil-muted);
}

.recent-activity-item-time, .recent-activity-item-comment {
  font-size: 14.5px;
  color: var(--anvil-muted);
}

.recent-activity-comment-icon svg {
  color: var(--anvil-muted);
  width: 19px;
  height: 19px;
}

.recent-activity-controls {
  padding-top: 18px;
}
.recent-activity-controls a,
.community a.community-link {
  font-weight: 600;
}
.recent-activity-controls a:visited,
.community a.community-link:visited {
  color: var(--anvil-link);
}
.recent-activity-controls a:hover,
.community a.community-link:hover {
  color: var(--anvil-link-hover);
}

/***** Category page *****/
.category-container {
  justify-content: center;
}
.category-content {
  max-width: 936px;
  flex: 1;
  padding-top: 22px;
}

.category-content .page-header h1 {
  font-size: 40px;
}

.section-tree {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px 64px;
  margin-top: 52px;
}
@media (max-width: 767px) {
  .section-tree {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}
.section-tree .section {
  margin-bottom: 0;
  flex: none;
  max-width: none;
}

.section-tree-title {
  font-size: 23px;
  margin-bottom: 8px;
}
.section-tree-title a {
  color: var(--anvil-ink);
}

.article-list {
  display: flex;
  flex-direction: column;
}

.article-list-item {
  border-bottom: 1px solid var(--anvil-border);
  padding: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.article-list-item .icon-star {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  color: var(--anvil-brand);
}
.article-list-item a.article-list-link {
  display: block;
  flex: 1;
  min-width: 0;
  padding: 12px 0;
  font-weight: 500;
  font-size: 16px;
}

.see-all-articles {
  display: inline-block;
  margin-top: 14px;
  font-weight: 700;
  font-size: 15.5px;
}

/***** Section page *****/
.section-container {
  display: flex;
  justify-content: center;
}
.section-content {
  max-width: 796px;
  flex: 1;
  padding-top: 22px;
  margin-bottom: 0;
}

.section-content .page-header h1 {
  font-size: 40px;
}

.section-content .article-list {
  margin-top: 36px;
}

.section-content .article-list-item a.article-list-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 19px 2px;
  font-weight: 600;
  font-size: 17px;
}
.section-content .article-list-item a.article-list-link::after {
  content: "chevron_right";
  font-family: "Material Symbols Sharp";
  font-size: 20px;
  color: var(--anvil-muted-soft);
  line-height: 1;
  font-feature-settings: "liga";
  font-variation-settings: "FILL" 0, "wght" 450, "GRAD" 0, "opsz" 24;
  flex-shrink: 0;
}

.section-list-item {
  border-bottom: 1px solid var(--anvil-border);
}
.section-list-item a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 19px 2px;
  font-weight: 600;
  font-size: 17px;
}

/***** Article page *****/
@media (min-width: 1024px) {
  .article-container {
    display: grid;
    grid-template-columns: 264px minmax(0, 1fr);
    gap: 56px;
    align-items: start;
  }
  .article {
    flex: none;
    max-width: none;
    min-width: 0;
    padding: 0;
  }
  .article-sidebar {
    position: sticky;
    top: 24px;
    flex: none;
    max-width: none;
  }
}

@media (min-width: 1024px) {
  .collapsible-sidebar {
    background: #FFFFFF;
    border: 1.5px solid var(--anvil-border);
    border-radius: var(--anvil-radius-card);
    padding: 24px;
  }
}

.sidenav-title,
.collapsible-sidebar-title {
  font-family: var(--anvil-font-heading);
  font-weight: 800;
  font-size: 16px;
  color: var(--anvil-ink);
}

.collapsible-sidebar-body ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 14px;
}
.collapsible-sidebar-body a.sidenav-item,
.collapsible-sidebar-body .sidenav-item {
  line-height: 1.45;
  padding: 0;
  margin: 0;
}

a.sidenav-item {
  font-size: 15px;
  font-weight: 500;
  color: var(--anvil-link);
  display: block;
}
a.sidenav-item.current-article {
  color: var(--anvil-ink);
  font-weight: 700;
  border-left: 3px solid var(--anvil-brand);
  padding-left: 10px;
  margin-left: -13px;
}
[dir=rtl] a.sidenav-item.current-article {
  border-left: 0;
  border-right: 3px solid var(--anvil-brand);
  padding-left: 0;
  padding-right: 10px;
  margin-left: 0;
  margin-right: -13px;
}

.article-sidebar-item {
  display: inline-block;
  margin-top: 14px;
  font-weight: 700;
  font-size: 15px;
}

.article-title {
  font-size: 38px;
  letter-spacing: -0.4px;
}

.article-header {
  margin-bottom: 0;
}

.article-author {
  display: flex;
  align-items: center;
  margin-top: 22px;
}

.article-avatar {
  margin-right: 12px;
}
.article-avatar img {
  width: 44px;
  height: 44px;
}

.article-meta a {
  font-weight: 700;
}

.meta-data {
  color: var(--anvil-muted);
  font-size: 14px;
}

.article-subscribe {
  margin-top: 22px;
}

.article-info {
  margin-top: 40px;
}

.article-body {
  font-size: 17px;
  line-height: 1.7;
  color: var(--anvil-ink);
}
.article-body h2 {
  font-size: 26px;
  margin: 36px 0 12px;
}
.article-body h3 {
  font-size: 20px;
  margin: 30px 0 10px;
}
.article-body p {
  margin: 0 0 16px;
}
.article-body ul, .article-body ol {
  margin: 0 0 16px;
  padding-left: 26px;
}
.article-body li {
  margin-bottom: 6px;
}
.article-body blockquote {
  margin: 0 0 16px;
  border-left: 4px solid var(--anvil-brand);
  background: var(--anvil-tint);
  border-radius: 0 14px 14px 0;
  padding: 16px 22px;
  font-style: italic;
  color: var(--anvil-muted-blue);
}
[dir=rtl] .article-body blockquote {
  border-left: 0;
  border-right: 4px solid var(--anvil-brand);
  border-radius: var(--anvil-radius-tile) 0 0 14px;
}
.article-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15.5px;
  margin: 0 0 16px;
}
.article-body table th {
  text-align: left;
  padding: 10px 14px;
  background: var(--anvil-tint);
  border: 1px solid var(--anvil-border-blue);
  font-family: var(--anvil-font-heading);
  font-weight: 800;
  font-size: 15px;
}
.article-body table td {
  padding: 10px 14px;
  border: 1px solid var(--anvil-border-cell);
}
.article-body pre {
  background: var(--anvil-deep);
  color: var(--anvil-footer-ink);
  border-radius: var(--anvil-radius-tile);
  padding: 20px 24px;
  font-size: 14.5px;
  line-height: 1.7;
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  margin: 0 0 16px;
}
.article-body code {
  background: var(--anvil-code-chip);
  border-radius: 6px;
  padding: 2px 7px;
  font-size: 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.article-body pre code {
  background: transparent;
  padding: 0;
  border-radius: 0;
  font-size: inherit;
}
.article-body img {
  max-width: 100%;
}

/* Share icons → tinted circles */
.share {
  display: flex;
  gap: 12px;
  white-space: normal;
}
.share li {
  margin: 0;
  width: auto;
  height: auto;
}
.share a,
.share li a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--anvil-tint);
  color: var(--anvil-brand);
  display: flex;
  align-items: center;
  justify-content: center;
}
.share a:hover, .share a:focus {
  background: var(--anvil-border-blue);
  text-decoration: none;
}
.share a svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.article-footer {
  margin-top: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.article-comment-count {
  color: var(--anvil-muted);
  font-size: 14.5px;
}

/* Vote block */
.article-votes {
  border-top: 1px solid var(--anvil-border);
  margin-top: 36px;
  padding-top: 32px;
  text-align: center;
}

.article-votes-question {
  font-family: var(--anvil-font-heading);
  font-weight: 800;
  font-size: 17px;
  margin-bottom: 14px;
}

.article-votes-controls {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.article-vote {
  min-width: 0;
  padding: 9px 34px;
}
.article-vote.button-primary,
.article-vote[aria-pressed=true] {
  background-color: var(--anvil-brand);
  border-color: var(--anvil-brand);
  color: var(--anvil-on-brand);
}

.article-votes-count {
  display: block;
  color: var(--anvil-muted);
  font-size: 14px;
  margin-top: 12px;
}

.article-more-questions {
  margin-top: 22px;
  font-size: 15.5px;
  text-align: center;
}
.article-more-questions a {
  text-decoration: underline;
}

.article-return-to-top {
  border-top: 1px solid var(--anvil-border);
  margin-top: 32px;
  padding-top: 20px;
}
.article-return-to-top a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 15px;
}

/* Recently viewed / related */
.article-relatives {
  border-top: 1px solid var(--anvil-border);
  margin-top: 32px;
  padding-top: 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
.article-relatives:not(:has(*)),
.article-more-questions:not(:has(*)) {
  display: none;
}
@media (max-width: 767px) {
  .article-relatives {
    grid-template-columns: 1fr;
  }
}
.article-relatives .sidenav-title,
.article-relatives h2,
.article-relatives h3,
.recent-articles h2,
.recent-articles h3,
.related-articles h2,
.related-articles h3 {
  font-family: var(--anvil-font-heading);
  font-weight: 800;
  font-size: 19px;
  margin: 0 0 14px;
  color: var(--anvil-ink);
}
.article-relatives ul {
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.article-relatives ul a {
  font-size: 15.5px;
  font-weight: 500;
}

/***** Comments *****/
.comment-heading {
  font-family: var(--anvil-font-heading);
  font-weight: 800;
  font-size: 19px;
}

.comment-overview {
  border-top: 1px solid var(--anvil-border);
  border-bottom: 0;
  margin-top: 32px;
  padding-top: 28px;
  padding-bottom: 0;
}

.comment-callout {
  color: var(--anvil-muted);
  font-size: 14.5px;
}

.comment {
  border-top: 1px solid var(--anvil-border);
  padding: 24px 0;
}

.comment-avatar img {
  width: 42px;
  height: 42px;
}

.comment-meta span a,
.comment-meta > span {
  font-weight: 700;
}

/* moderation/escalation chips keep breathing room from the meta text */
.comment-labels {
  margin-inline-start: 10px;
}
.comment-labels .status-label,
.comment-meta .status-label {
  margin: 0 4px;
}

.comment-body {
  font-size: 16px;
  line-height: 1.7;
}

.comment-form {
  border-top: 1px solid var(--anvil-border);
  padding-top: 28px;
}

/***** Community *****/
.community-header {
  margin-top: 12px;
  margin-bottom: 0;
}
.community-header .page-header-description {
  margin: 0 0 20px;
  font-style: italic;
  color: var(--anvil-muted);
  font-size: 17.5px;
}

.community-header .title,
.page-header.community-header .title {
  font-family: var(--anvil-font-heading);
  font-weight: 800;
  font-size: 28px;
  color: var(--anvil-ink);
  margin: 0;
}

.page-header.community-header {
  align-items: center;
  margin-top: 34px;
  margin-bottom: 0;
}

.page-header.community-header .dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
  color: var(--anvil-ink);
}
.page-header.community-header .dropdown-chevron-icon {
  color: var(--anvil-muted);
  width: 16px;
  height: 16px;
}

.community-featured-posts .title {
  font-family: var(--anvil-font-heading);
  font-weight: 800;
  font-size: 24px;
  margin-bottom: 14px;
}
.community-featured-posts .promoted-articles {
  display: flex;
  flex-direction: column;
}
.community-featured-posts .promoted-articles-item {
  align-self: stretch;
  width: 100%;
}
.community-featured-posts .promoted-articles-item a {
  padding: 14px 2px;
  font-size: 16px;
}
.community-featured-posts .promoted-articles-item a::before {
  content: none;
}

.community-activity .recent-activity-header {
  font-size: 24px;
}

.community-footer {
  padding-top: 64px;
  padding-bottom: 0;
}
.community-footer-title {
  font-family: var(--anvil-font-heading);
  font-weight: 800;
  font-size: 20px;
  margin-bottom: 16px;
}

/* Topic page header */
.topic-header {
  margin-top: 26px;
}

.topic-filters .dropdown-toggle,
.my-activities-following-header .dropdown-toggle,
.profile-section-sorter .dropdown-toggle {
  color: var(--anvil-link);
  font-weight: 700;
  font-size: 15px;
  font-family: var(--anvil-font-body);
  background: none;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
}
.topic-filters .dropdown {
  margin-right: 26px;
}
[dir=rtl] .topic-filters .dropdown {
  margin-right: 0;
  margin-left: 26px;
}

/* Follow split pill (subscribe + follower count) */
.community-follow {
  width: auto;
}
.community-follow button {
  width: auto;
}
.topic-filters .dropdown,
.topic-filters .dropdown-toggle {
  border: 0;
}
.community-follow button {
  border-radius: 999px;
  overflow: hidden;
  padding: 9px 20px;
  line-height: 1.45;
  font-size: 14.5px;
  white-space: nowrap;
}
.community-follow button:hover {
  background-color: var(--anvil-brand);
  color: var(--anvil-on-brand);
}

/* With a follower count → two flush segments inside one pill */
.community-follow button[data-follower-count]:not([data-follower-count=""]) {
  display: inline-flex;
  align-items: center;
  padding: 0 0 0 20px;
}
.community-follow button[data-follower-count]:not([data-follower-count=""])::after {
  border-left: 1.5px solid var(--anvil-brand);
  background: var(--anvil-tint);
  color: var(--anvil-brand);
  font-family: var(--anvil-font-body);
  font-weight: 700;
  margin-left: 16px;
  padding: 9px 16px;
  position: static;
  display: inline-flex;
  align-items: center;
  align-self: stretch;
}
[dir=rtl] .community-follow button[data-follower-count]:not([data-follower-count=""]) {
  padding: 0 20px 0 0;
}
[dir=rtl] .community-follow button[data-follower-count]:not([data-follower-count=""])::after {
  border-left: 0;
  border-right: 1.5px solid var(--anvil-brand);
  margin-left: 0;
  margin-right: 16px;
  padding: 9px 16px;
}
.community-follow button[data-follower-count=""]::after,
.community-follow button:not([data-follower-count])::after {
  content: none;
}

/* Following (selected) state → filled left segment, white count segment */
.community-follow button[data-selected=true] {
  background-color: var(--anvil-brand);
  color: var(--anvil-on-brand);
}
.community-follow button[data-selected=true]::after {
  border-left-color: var(--anvil-brand);
  background: #FFFFFF;
  color: var(--anvil-brand);
}
[dir=rtl] .community-follow button[data-selected=true]::after {
  border-right-color: var(--anvil-brand);
}
.community-follow button[data-selected=true]:hover {
  background-color: var(--anvil-brand);
  border-color: var(--anvil-brand);
}
.community-follow button:hover::after, .community-follow button:focus::after {
  border-color: var(--anvil-brand);
  color: var(--anvil-brand);
}

/***** Striped list (posts) *****/
.striped-list-item {
  border-bottom: 1px solid var(--anvil-border);
  padding: 20px 2px;
}

.striped-list-title {
  font-weight: 700;
  font-size: 17.5px;
  margin-bottom: 0;
}
.striped-list-title:visited {
  color: var(--anvil-link);
}

.striped-list .meta-group {
  margin: 2px 0 0;
}
.striped-list .meta-data {
  color: var(--anvil-muted);
  font-size: 14.5px;
}

.striped-list-count {
  color: var(--anvil-muted);
  font-size: 13.5px;
  text-transform: capitalize;
}
@media (min-width: 768px) {
  .striped-list-count {
    flex: none;
    display: flex;
    gap: 44px;
    justify-content: flex-end;
  }
}
.striped-list-number {
  font-weight: 700;
  font-size: 17px;
}
@media (min-width: 768px) {
  .striped-list-number {
    color: var(--anvil-ink);
  }
}

.no-posts-with-filter {
  color: var(--anvil-muted);
  padding: 20px 0;
}

/***** Post page *****/
@media (min-width: 1024px) {
  .post-container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 56px;
    align-items: start;
  }
  .post {
    flex: none;
    max-width: none;
    min-width: 0;
  }
}

.post-header {
  align-items: flex-start;
}

.post-title h1 {
  font-size: 34px;
  letter-spacing: -0.4px;
  line-height: 1.25;
}

.post-info-container {
  display: flex;
  gap: 20px;
  margin-top: 24px;
}

.post-actions-wrapper {
  order: -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}

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

.post-avatar img {
  width: 42px;
  height: 42px;
}

.post-meta span a {
  font-weight: 700;
}

.post-body {
  font-size: 16.5px;
  line-height: 1.7;
}
.post-body p {
  margin: 14px 0 0;
}
.post-body pre {
  background: var(--anvil-deep);
  color: var(--anvil-footer-ink);
  border-radius: var(--anvil-radius-tile);
  padding: 20px 24px;
  font-size: 14.5px;
  overflow-x: auto;
}
.post-body blockquote {
  border-left: 4px solid var(--anvil-brand);
  background: var(--anvil-tint);
  border-radius: 0 14px 14px 0;
  padding: 16px 22px;
  font-style: italic;
  color: var(--anvil-muted-blue);
  margin: 14px 0 0;
}

.post-vote .vote-up,
.post-vote .vote-down {
  color: var(--anvil-muted);
}
.post-vote .vote-up {
  color: var(--anvil-brand);
}
.post-vote .vote-sum {
  color: var(--anvil-ink);
  font-weight: 700;
}

.post-footer {
  margin-top: 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.post-comments {
  margin-top: 12px;
}
.post-comments .comment-form {
  border-top: 1px solid var(--anvil-border);
  padding-top: 28px;
}

.post-sidebar {
  background: #FFFFFF;
  border: 1.5px solid var(--anvil-border);
  border-radius: var(--anvil-radius-card);
  padding: 26px;
  align-self: start;
}

.post-sidebar-title {
  font-family: var(--anvil-font-heading);
  font-weight: 800;
  font-size: 19px;
  line-height: 1.4;
  margin-bottom: 18px;
}

.post-sidebar .post-to-community,
.post-sidebar .button-large {
  display: block;
  width: 100%;
  text-align: center;
}

/***** Status labels *****/
.status-label {
  background-color: var(--anvil-status-solved);
  border-radius: 999px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 4px 14px;
}
.status-label-pinned, .status-label-featured, .status-label-official {
  background-color: var(--anvil-brand);
}
.status-label-not-planned, .status-label-closed {
  background-color: var(--anvil-tint);
  color: var(--anvil-deep);
}
.status-label-pending, .status-label-pending-moderation {
  background-color: var(--anvil-status-pending);
  color: #fff;
}
.status-label-open {
  background-color: var(--anvil-status-open);
}
.status-label-solved {
  background-color: var(--anvil-status-solved);
}
.status-label-answered {
  background-color: var(--anvil-status-solved);
}
.status-label-new {
  background-color: var(--anvil-status-pending);
  color: #fff;
}
.status-label-hold {
  background-color: var(--anvil-deep);
}
.status-label-official {
  border-radius: 0 0 14px 14px;
}

/***** Profile *****/
.profile-header {
  background-color: var(--anvil-tint);
  border-bottom: 1px solid var(--anvil-border-blue);
  padding: 40px 0;
}

.profile-avatar {
  margin-right: 22px;
}
.profile-avatar .user-avatar {
  width: 84px;
  height: 84px;
}

.profile-header .basic-info .name {
  font-size: 32px;
  letter-spacing: -0.3px;
  line-height: 1.2;
}
.profile-header .basic-info .name a {
  color: var(--anvil-ink);
}

.profile-stats {
  font-size: 14.5px;
  color: var(--anvil-muted-blue);
}

.profile-stats-activity {
  display: flex;
  gap: 34px;
  margin-top: 12px;
  flex-basis: 100%;
  border-top: 0;
}
@media (min-width: 768px) {
  .profile-stats-activity {
    margin-left: 106px; /* avatar 84px + 22px gap → aligns with the name */
  }
  [dir=rtl] .profile-stats-activity {
    margin-left: 0;
    margin-right: 106px;
  }
}
.profile-stats-activity .stat {
  display: flex;
  flex-direction: column-reverse;
}
.profile-stats-activity .stat-value {
  font-weight: 700;
  color: var(--anvil-ink);
}

.profile-stats-counters {
  display: grid;
  grid-template-columns: auto auto;
  gap: 8px 26px;
  align-content: start;
  padding-top: 6px;
}
/* Design: [avatar+name+stats] … [counters] [Edit profile] */
@media (min-width: 1024px) {
  .profile-header .container {
    position: relative;
  }
  .profile-header .options {
    position: absolute;
    top: 40px;
    right: 32px;
    margin: 0;
    flex-basis: auto;
  }
  [dir=rtl] .profile-header .options {
    right: auto;
    left: 32px;
  }
  .profile-stats-counters {
    margin-right: 176px;
  }
  [dir=rtl] .profile-stats-counters {
    margin-right: 40px;
    margin-left: 176px;
  }
}
.profile-stats-counters .stat {
  display: contents;
}
.profile-stats-counters .stat-value {
  font-weight: 700;
  color: var(--anvil-ink);
}

.user-profile-actions {
  margin-bottom: 15px;
}
.user-profile-actions button {
  background-color: var(--anvil-brand);
  color: var(--anvil-on-brand);
  border: 0;
  height: auto;
  padding: 11px 26px;
  font-size: 15px;
}

.profile-nav {
  background-color: var(--anvil-warm);
  border-bottom: 1px solid var(--anvil-border);
}

.profile-nav .collapsible-nav-list li,
.my-activities-nav .collapsible-nav-list li {
  font-weight: 700;
  font-size: 15.5px;
  color: var(--anvil-muted);
}
.profile-nav .collapsible-nav-list li a,
.my-activities-nav .collapsible-nav-list li a {
  color: var(--anvil-muted);
}
@media (min-width: 768px) {
  .profile-nav .collapsible-nav-list li:hover,
  .my-activities-nav .collapsible-nav-list li:hover {
    border-bottom: 3px solid var(--anvil-border-input);
  }
  .profile-nav .collapsible-nav-list li.current,
  .my-activities-nav .collapsible-nav-list li.current {
    border-bottom: 3px solid var(--anvil-brand);
  }
  .profile-nav .collapsible-nav-list li.current a,
  .my-activities-nav .collapsible-nav-list li.current a {
    color: var(--anvil-deep);
  }
}

.profile-section {
  padding-top: 44px;
}

.profile-section-title {
  font-size: 26px;
  margin-bottom: 4px;
}

.profile-section-description {
  color: var(--anvil-muted);
  font-size: 14.5px;
}

.profile-activity-list {
  margin-top: 32px;
  border-left: 2px solid var(--anvil-border);
  display: flex;
  flex-direction: column;
  gap: 34px;
}
[dir=rtl] .profile-activity-list {
  border-left: 0;
  border-right: 2px solid var(--anvil-border);
}

.profile-activity {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 6px 16px;
  margin-left: -21px;
  position: static;
  padding-left: 0;
  padding-bottom: 0;
}
[dir=rtl] .profile-activity {
  margin-left: 0;
  margin-right: -21px;
  padding-right: 0;
}
.profile-activity:not(:last-child),
[dir=rtl] .profile-activity:not(:last-child) {
  border-left: 0;
  border-right: 0;
}
.profile-activity .profile-activity-icon {
  grid-row: 1 / 3;
}
.profile-activity .profile-activity-header {
  grid-column: 2;
  align-self: center;
}
.profile-activity .profile-activity-contribution {
  grid-column: 2;
}
.profile-activity-list {
  max-width: 900px;
}

.profile-activity-icon,
[dir=rtl] .profile-activity-icon {
  position: static;
  left: auto;
  right: auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: var(--anvil-tint);
  color: var(--anvil-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 2px solid var(--anvil-bg);
  box-sizing: border-box;
}
.profile-activity-icon svg {
  position: static;
  transform: none;
  width: 16px;
  height: 16px;
}

.profile-activity-header {
  display: flex;
  align-items: center;
  gap: 8px;
}
.profile-activity-header .user-avatar {
  width: 20px;
  height: 20px;
}
.profile-activity-description {
  margin: 0;
  font-size: 15px;
}

.profile-activity-contribution {
  min-width: 0;
}

.profile-activity .profile-contribution,
.profile-activity .profile-activity-contribution {
  margin-top: 0;
  margin-left: 0;
  margin-right: 0;
  background: #FFFFFF;
  border: 1.5px solid var(--anvil-border);
  border-radius: var(--anvil-radius-card-sm);
  padding: 20px 24px;
}
[dir=rtl] .profile-activity .profile-activity-contribution {
  margin-right: 0;
}
.profile-activity-header,
[dir=rtl] .profile-activity-header {
  margin-left: 0;
  margin-right: 0;
}
.profile-activity-header .user-avatar {
  width: 22px;
  height: 22px;
  min-width: 22px;
  align-self: center;
}

.profile-contribution-title {
  font-size: 18px;
  margin: 0;
}
.profile-contribution-title a {
  font-family: var(--anvil-font-heading);
  font-weight: 800;
}

.profile-contribution-breadcrumbs {
  margin: 2px 0 0;
}
.profile-contribution-breadcrumbs li {
  font-size: 13.5px;
  font-weight: 500;
}

.profile-contribution-body {
  margin: 10px 0 0;
  color: var(--anvil-muted);
  font-size: 15px;
}

.profile-contribution .meta-group {
  margin-top: 10px;
}
.profile-contribution .meta-data {
  font-size: 13.5px;
}

.profile-contribution-list > .profile-contribution {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 2px 16px;
  align-items: start;
  border-top: 0;
  border-bottom: 1px solid var(--anvil-border);
  padding: 24px 2px;
}
.profile-contribution-list .profile-contribution-icon,
[dir=rtl] .profile-contribution-list .profile-contribution-icon {
  position: static;
  left: auto;
  right: auto;
  grid-row: 1 / 6;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--anvil-tint);
  color: var(--anvil-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.profile-contribution-list > .profile-contribution > *:not(.profile-contribution-icon) {
  grid-column: 2;
}

/* status chips (e.g. Pending approval) sit beside titles, not against them */
.profile-contribution-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 2px;
}

.no-activity, .private-activity {
  color: var(--anvil-muted);
}

/***** My activities *****/
.my-activities-nav {
  background-color: var(--anvil-warm);
  border-bottom: 1px solid var(--anvil-border);
  margin-bottom: 0;
}

.my-activities-header {
  margin-top: 46px;
}
.my-activities-header h1 {
  font-size: 38px;
}

.my-activities-sub-nav {
  margin-top: 24px;
  margin-bottom: 30px;
}

.collapsible-nav-border {
  border-bottom: 2px solid var(--anvil-border);
  border-top: 0;
}
.collapsible-nav-border .collapsible-nav-list li {
  font-weight: 700;
  font-size: 15.5px;
}
.collapsible-nav-border .collapsible-nav-list li a {
  color: var(--anvil-muted);
}
@media (min-width: 768px) {
  .collapsible-nav-border .collapsible-nav-list li:hover {
    border-bottom: 3px solid var(--anvil-border-input);
  }
  .collapsible-nav-border .collapsible-nav-list li.current {
    border-bottom: 3px solid var(--anvil-brand);
  }
  .collapsible-nav-border .collapsible-nav-list li.current a {
    color: var(--anvil-deep);
  }
}

.my-activities-following-header {
  margin: 20px 0;
}

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

.subscriptions-subscribe button {
  padding: 7px 20px;
  font-size: 14px;
}
.subscriptions-subscribe button::after {
  content: none;
}
.subscriptions-subscribe button.button-primary,
.subscriptions-subscribe button[data-selected=true] {
  background-color: transparent;
  color: var(--anvil-brand);
  border-color: var(--anvil-brand);
}
.subscriptions-subscribe button[data-selected=true]:hover,
.subscriptions-subscribe button[data-selected=true]:focus {
  background-color: var(--anvil-brand);
  color: var(--anvil-on-brand);
}

/***** Request page *****/
.request-breadcrumbs {
  padding-top: 34px;
  margin-bottom: 40px;
}
@media (min-width: 1024px) {
  .request-breadcrumbs {
    margin-bottom: 40px;
  }
}

.request-title {
  font-size: 36px;
  letter-spacing: -0.4px;
  line-height: 1.25;
}
@media (min-width: 1024px) {
  .request-title {
    border-bottom: 0;
    max-width: 100%;
    padding-bottom: 0;
  }
}

@media (min-width: 1024px) {
  .request-container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 48px;
    align-items: start;
  }
  .request-main {
    flex: none;
    min-width: 0;
    max-width: none;
  }
}

.request-main .comment-list {
  border-top: 1px solid var(--anvil-border);
  margin-top: 26px;
}

.request-main .comment {
  border-top: 0;
  border-bottom: 0;
  padding: 26px 0;
}
.request-main .comment + .comment {
  border-top: 1px solid var(--anvil-border);
}

.request-main .comment-show-container {
  background: #FFFFFF;
  border: 1.5px solid var(--anvil-border-input);
  border-radius: var(--anvil-radius-input);
  color: var(--anvil-muted);
  font-size: 15.5px;
  padding: 14px 16px;
}

.request-main .comment-form {
  border-top: 0;
  padding-top: 8px;
}

.request-main .comment-form-controls {
  margin-top: 18px;
}

.mark-as-solved {
  border: 1.5px solid var(--anvil-brand);
  color: var(--anvil-brand);
  background: transparent;
  border-radius: 999px;
  padding: 11px 26px;
  font-weight: 700;
  font-size: 15px;
}

@media (min-width: 1024px) {
  .request-sidebar {
    background: #FFFFFF;
    border: 1.5px solid var(--anvil-border);
    border-radius: var(--anvil-radius-card);
    padding: 26px;
    flex: none;
    position: static;
    width: auto;
    font-size: 15px;
  }
}

.request-sidebar .collapsible-sidebar-title {
  font-family: var(--anvil-font-heading);
  font-weight: 800;
  font-size: 18px;
  color: var(--anvil-ink);
}

.request-details {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px 22px;
  font-size: 15px;
  margin: 0;
  padding-bottom: 0;
  border-bottom: 0;
}
.request-details dt,
.request-details dd {
  display: block;
  font-size: 15px;
  margin: 0;
  width: auto;
  padding: 0;
}
.request-details dt {
  color: var(--anvil-muted);
  font-weight: 600;
}
.request-details dd::after {
  content: none;
}
.request-details + .request-details {
  border-top: 1px solid var(--anvil-border);
  padding-top: 18px;
  margin-top: 18px;
}

/***** Pagination *****/
.pagination-next-link, .pagination-prev-link, .pagination-first-link, .pagination-last-link {
  border: 1.5px solid var(--anvil-border-input);
  background: #FFFFFF;
  color: var(--anvil-ink);
  border-radius: 999px;
  padding: 9px 18px;
  font-weight: 700;
  font-size: 14.5px;
}

/***** Search results *****/
@media (min-width: 1024px) {
  .search-results {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 56px;
    align-items: start;
  }
  .search-results-sidebar {
    flex: none;
    max-width: none;
    padding: 0;
    border: 0;
  }
  .search-results-column {
    flex: none;
    max-width: none;
  }
}

.search-results-sidebar .sidenav-title {
  font-size: 18px;
  margin-bottom: 14px;
}

.search-results-sidebar .filters-in-section {
  background: transparent;
  border: 0;
  padding: 0;
  margin-bottom: 24px;
}

.multibrand-filter-list a.sidenav-item {
  padding: 10px 18px;
  border-radius: var(--anvil-radius-input);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 500;
  font-size: 15.5px;
}
/* The selected facet is marked by the safety bar, not a fill. */
.multibrand-filter-list a.sidenav-item.current {
  background: none;
  font-weight: 500;
  color: var(--anvil-ink);
  padding: 12px 0;
}
.multibrand-filter-list a.sidenav-item .doc-count {
  color: var(--anvil-muted);
  font-weight: 600;
}

.search-results-subheading {
  font-size: 13px;
}

.search-result-title {
  font-size: 18px;
}
.search-result-title a {
  font-family: var(--anvil-font-heading);
  font-weight: 800;
}

.search-results-list > li {
  border-bottom: 1px solid var(--anvil-border);
  padding: 20px 0;
}
.search-results-list .breadcrumbs li {
  border-bottom: 0;
  padding: 0;
}

.search-result-description {
  color: var(--anvil-muted);
  font-size: 15px;
  margin: 8px 0 0;
}

.search-result-breadcrumbs li {
  font-size: 13.5px;
  font-weight: 500;
}

/* Empty state */
.no-results {
  text-align: center;
  padding: 64px 24px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.no-results > svg {
  display: none;
}
.no-results-icon {
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: var(--anvil-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  color: var(--anvil-empty-icon);
}
.no-results-icon .anvil-icon {
  font-size: 54px;
}
.search-results .no-results .headline,
.no-results .headline {
  font-family: var(--anvil-font-heading);
  font-weight: 800;
  font-size: 24px;
  line-height: 1.4;
  color: var(--anvil-ink);
}
.search-results .no-results .action-prompt,
.no-results .action-prompt {
  color: var(--anvil-muted);
  font-size: 16.5px;
}
.search-results .no-results .action-prompt a,
.no-results .action-prompt a {
  color: var(--anvil-link);
  font-weight: 600;
  text-decoration: underline;
}

/***** Error page *****/
.error-page {
  padding-top: 80px;
  padding-bottom: 40px;
}
.error-page h1 {
  font-family: var(--anvil-font-heading);
  font-weight: 900;
  font-size: 58px;
  color: var(--anvil-brand);
  letter-spacing: -1px;
  line-height: 1;
  margin-bottom: 26px;
}
.error-page h2 {
  font-size: 30px;
  margin-bottom: 14px;
}
.error-page p {
  color: var(--anvil-muted);
  margin: 0 0 26px;
}
.error-page > a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  text-decoration: underline;
}
.error-page > a::before {
  content: "arrow_back";
  font-family: "Material Symbols Sharp";
  font-size: 20px;
  line-height: 1;
  text-decoration: none;
  font-feature-settings: "liga";
  font-variation-settings: "FILL" 0, "wght" 450, "GRAD" 0, "opsz" 24;
}

/***** Dropdown menus *****/
.dropdown-menu {
  background: #FFFFFF;
  border: 1px solid var(--anvil-border);
  border-radius: var(--anvil-radius-input);
  box-shadow: var(--anvil-shadow-hover);
  padding: 8px 0;
}
.dropdown-menu [role^=menuitem] {
  font-size: 15px;
  padding: 10px 16px;
}
.dropdown-menu [role^=menuitem]:hover, .dropdown-menu [role^=menuitem]:focus {
  background: var(--anvil-warm);
  text-decoration: none;
}

/***** Notifications *****/
.notification-error {
  border-radius: var(--anvil-radius-input);
}
.notification-inline.notification-error {
  color: #C0392B;
}

/***** WYSIWYG editor (hbs forms) *****/
/* WYSIWYG editors (comments, post details, request description):
   one clean generic chrome — neutral border, white fill, brand focus ring.
   CKEditor's own inner borders/shadows/focus rings are switched off via its
   theme variables so only our single outer frame renders. */
.hbs-form [data-helper=wysiwyg],
.hbs-form .ck.ck-editor,
#new-request-form .ck.ck-editor {
  border: 1px solid #D8DCDE;
  border-radius: 6px;
  background: #FFFFFF;
  overflow: hidden;
  transition: border-color 0.12s ease-in-out;
  --ck-border-radius: 0;
  --ck-color-base-border: transparent;
  --ck-color-toolbar-border: transparent;
  --ck-color-focus-border: transparent;
  --ck-focus-ring: 1px solid transparent;
  --ck-inner-shadow: none;
  --ck-drop-shadow: none;
  --ck-drop-shadow-active: none;
}
.hbs-form .ck.ck-sticky-panel__content,
#new-request-form .ck.ck-sticky-panel__content {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
.hbs-form [data-helper=wysiwyg]:focus-within,
.hbs-form .ck.ck-editor:focus-within,
#new-request-form .ck.ck-editor:focus-within {
  border-color: var(--anvil-brand);
}
.hbs-form .ck.ck-toolbar,
#new-request-form .ck.ck-toolbar {
  background: #FFFFFF;
  border: 0;
  border-bottom: 1px solid #E8EAEC;
  border-radius: 0;
}
.hbs-form .ck.ck-content,
.hbs-form .ck.ck-editor__editable,
#new-request-form .ck.ck-content,
#new-request-form .ck.ck-editor__editable {
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0;
  min-height: 210px;
  font-family: var(--anvil-font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--anvil-ink);
  padding: 16px;
}
.hbs-form .ck.ck-editor__main > .ck-editor__editable:not(.ck-focused) {
  border: 0;
}

/* Upload dropzone */
.upload-dropzone,
[data-helper=upload] .upload-dropzone {
  border: 2px dashed var(--anvil-border-blue-strong);
  border-radius: var(--anvil-radius-tile);
  background: #FFFFFF;
  padding: 34px;
  text-align: center;
  color: var(--anvil-brand);
  font-weight: 600;
  font-size: 15.5px;
}
.upload-dropzone a, .upload-dropzone span {
  color: var(--anvil-brand);
}

/* =============================================================
   React bundle surfaces (new request form, request list,
   approvals, service catalog) — Zendesk Garden components
   ============================================================= */

#new-request-form,
#main-content .request-list,
#approval-request-list,
#approval-request,
#service-catalog-main-content,
#service-catalog-item {
  font-family: var(--anvil-font-body);
}

/* Labels */
#new-request-form label,
#approval-request label,
#service-catalog-item label {
  font-family: var(--anvil-font-heading);
  font-weight: 800;
  font-size: 16.5px;
  color: var(--anvil-ink);
}

/* Inputs & textareas & comboboxes */
#new-request-form input[type=text],
#new-request-form input:not([type]),
#new-request-form textarea,
#new-request-form [role=combobox],
#approval-request input[type=text],
#approval-request textarea,
#service-catalog-item input[type=text],
#service-catalog-item textarea,
#service-catalog-item [role=combobox] {
  background-color: #FFFFFF !important;
  border: 1.5px solid var(--anvil-border-input);
  border-radius: var(--anvil-radius-input);
  font-family: var(--anvil-font-body);
  font-size: 16px;
  color: var(--anvil-ink);
}
#new-request-form input[type=text]:focus,
#new-request-form textarea:focus,
#new-request-form [role=combobox]:focus-within,
#approval-request input[type=text]:focus,
#approval-request textarea:focus {
  border-color: var(--anvil-brand);
}

/* Garden buttons → pills */
[data-garden-id="buttons.button"] {
  border-radius: 999px !important;
  font-family: var(--anvil-font-body) !important;
  font-weight: 700 !important;
}
[data-garden-id="buttons.anchor"] {
  color: var(--anvil-link);
}

/* Garden tabs */
[data-garden-id="tabs.tablist"] {
  border-bottom: 2px solid var(--anvil-border) !important;
}
[data-garden-id="tabs.tab"] {
  font-weight: 700 !important;
  font-size: 16px !important;
  color: var(--anvil-muted) !important;
}
[data-garden-id="tabs.tab"][aria-selected=true] {
  color: var(--anvil-deep) !important;
  border-bottom-color: var(--anvil-brand) !important;
}

/* Garden tables */
[data-garden-id="tables.table"] {
  font-size: 15.5px !important;
}
[data-garden-id="tables.header_cell"] {
  font-family: var(--anvil-font-heading) !important;
  font-weight: 800 !important;
  font-size: 14.5px !important;
  color: var(--anvil-ink) !important;
  border-bottom: 2px solid var(--anvil-border) !important;
}
[data-garden-id="tables.row"],
[data-garden-id="tables.cell"] {
  border-bottom-color: var(--anvil-border) !important;
}
[data-garden-id="tables.cell"] a {
  font-weight: 600;
  text-decoration: underline;
}

/* Garden media/text inputs (search fields in react lists) */
[data-garden-id="forms.faux_input"] {
  background-color: #FFFFFF !important;
  border: 1.5px solid var(--anvil-border-input) !important;
  border-radius: 999px !important;
  min-height: 44px;
}
[data-garden-id="forms.faux_input"]:focus-within {
  border-color: var(--anvil-brand) !important;
  box-shadow: none !important;
}
[data-garden-id="forms.media_input"],
[data-garden-id="forms.input"] {
  font-family: var(--anvil-font-body) !important;
  color: var(--anvil-ink) !important;
}
/* inputs nested in a faux-input pill stay transparent (the pill is white) */
[data-garden-id="forms.faux_input"] [data-garden-id="forms.media_input"],
[data-garden-id="forms.faux_input"] [data-garden-id="forms.input"] {
  background-color: transparent !important;
}
/* standalone inputs/textareas are always white */
[data-garden-id="forms.input"]:not([data-garden-id="forms.faux_input"] *),
[data-garden-id="forms.media_input"]:not([data-garden-id="forms.faux_input"] *),
[data-garden-id="forms.textarea"] {
  background-color: #FFFFFF !important;
}
/* selects/comboboxes: don't fight Garden's internal chrome — pin a plain,
   generic look (neutral gray border, default radius, white fill) */
[data-garden-id="dropdowns.combobox"] [data-garden-id="forms.faux_input"],
[data-garden-id="dropdowns.select"],
[data-garden-id="selects.select"],
[data-garden-id="forms.select"] {
  border: 1px solid #D8DCDE !important;
  border-radius: 4px !important;
  background-color: #FFFFFF !important;
  box-shadow: none !important;
  min-height: 40px;
}
[data-garden-id="dropdowns.combobox"] [data-garden-id="forms.faux_input"]:focus-within,
[data-garden-id="dropdowns.select"]:focus-within,
[data-garden-id="selects.select"]:focus-within,
[data-garden-id="forms.select"]:focus-within {
  border-color: var(--anvil-brand) !important;
}

/* (Garden selects are styled generically above, next to the combobox rule —
   deliberately left on Garden's own chrome to avoid double-ring artifacts.) */

/* Garden menus */
[data-garden-id="dropdowns.menu"],
[data-garden-id="dropdowns.combobox.listbox"] {
  border-radius: var(--anvil-radius-input);
  border: 1px solid var(--anvil-border);
  box-shadow: var(--anvil-shadow-hover);
}

/* Garden tags (status pills in react tables) — shape/typography only;
   pill colors come from the instance's ticket-status configuration */
[data-garden-id="tags.tag_view"] {
  border-radius: 999px !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  padding: 2px 14px !important;
  height: auto !important;
  min-height: 24px;
}

/* (React request-form CKEditor uses the shared generic editor chrome
   defined in the WYSIWYG section above.) */

/* File dropzone in react request form */
#new-request-form [data-garden-id="forms.file_upload"] {
  border: 2px dashed var(--anvil-border-blue-strong);
  border-radius: var(--anvil-radius-tile);
  background: #FFFFFF;
  padding: 34px;
  color: var(--anvil-brand);
  font-weight: 600;
  font-size: 15.5px;
}

/***** Responsive: global *****/
@media (max-width: 767px) {
  .container {
    padding: 0 20px;
  }

  h1 {
    font-size: 30px;
  }

  .hero {
    padding: 56px 20px 76px;
  }

  .hero-title {
    font-size: 32px;
  }

  .community-hero {
    padding: 44px 20px 52px;
  }
  .community-hero .hero-title {
    font-size: 28px;
  }

  .service-catalog-hero {
    padding: 40px 20px;
  }
  .service-catalog-hero-title {
    font-size: 24px;
  }

  .page-header h1 {
    font-size: 30px;
    gap: 12px;
  }
  .page-header-icon {
    width: 44px;
    height: 44px;
    border-radius: 13px;
  }
  .page-header-icon .anvil-icon {
    font-size: 24px;
  }

  .article-title {
    font-size: 30px;
  }

  .request-title,
  .post-title h1 {
    font-size: 28px;
  }

  .my-activities-header h1,
  .form-header {
    font-size: 30px;
  }

  .error-page h1 {
    font-size: 44px;
  }
  .error-page h2 {
    font-size: 24px;
  }

  .footer {
    border-top-width: 56px;
  }
  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }

  .anvil-attribution {
    bottom: 14px;
    padding: 8px 14px 8px 11px;
    font-size: 12.5px;
  }

  .profile-stats-activity {
    flex-wrap: wrap;
    gap: 18px 28px;
  }

  .sub-nav {
    padding-top: 24px;
    margin-bottom: 32px;
  }

  .community-image {
    padding: 48px 24px;
  }
  .community-banner-title {
    font-size: 25px;
  }

  .post-info-container {
    flex-direction: column;
  }
  .post-actions-wrapper {
    order: 2;
    flex-direction: row;
    gap: 4px;
  }
  .post-actions-wrapper .vote {
    flex-direction: row;
    align-items: center;
  }
}

/* Make sure interactive elements meet 44px touch targets on mobile */
@media (max-width: 767px) {
  .button, .button-large,
  .search input[type=submit],
  .community-follow button,
  .article-subscribe button,
  .section-subscribe button {
    min-height: 44px;
  }
  .article-list-item a.article-list-link,
  .promoted-articles-item a,
  .striped-list-title {
    min-height: 44px;
  }
}


/* ==========================================================================
   ANVIL SHELL — persistent left navigation, sticky top bar, pinned footer
   Copenhagen renders header / main / footer as siblings of <body>, so the
   sidebar is taken out of flow and the content column is inset with padding.
   That survives the extra <body> children Guide and zcli inject.
   ========================================================================== */

body {
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

@media (min-width: 1024px) {
  body {
    padding-left: var(--anvil-sidebar-width);
  }
  [dir="rtl"] body {
    padding-left: 0;
    padding-right: var(--anvil-sidebar-width);
  }
}

/***** Sidebar *****/
.anvil-sidebar {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  width: var(--anvil-sidebar-width);
  z-index: 30;
}

.anvil-sidebar-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: var(--anvil-surface-alt);
  border-inline-end: 1px solid var(--anvil-border);
}

.anvil-sidebar-scrim {
  display: none;
}

.anvil-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 20px 14px;
  flex: 0 0 auto;
}

.anvil-brand-link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  text-decoration: none;
}
.anvil-brand-link:hover {
  text-decoration: none;
}

.anvil-brand-mark {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 11px;
  background-color: var(--anvil-brand);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.anvil-brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.anvil-brand-mark .anvil-icon {
  font-size: 21px;
}

.anvil-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  min-width: 0;
}

.anvil-brand-name {
  font-family: var(--anvil-font-heading);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.01em;
  color: var(--anvil-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.anvil-brand-overline {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--anvil-ink-5);
  white-space: nowrap;
}

.anvil-sidebar-close {
  display: none;
  margin-inline-start: auto;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border: 0;
  background: none;
  border-radius: 999px;
  color: var(--anvil-ink-3);
  cursor: pointer;
}
.anvil-sidebar-close:hover {
  background-color: var(--anvil-tint-hover);
}
.anvil-sidebar-close .anvil-icon {
  font-size: 22px;
}

/***** Sidebar search *****/
/* Copenhagen's {{search}} renders the form as the visual field: a flex row of
   [input][clear ×][submit]. Anvil keeps that model and promotes the wrapper to
   the field so the icon can sit inside as a real flex item — the × then lands
   inline instead of being absolutely positioned against the wrong box. */
.anvil-sidebar-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 16px 14px;
  padding: 8px 12px;
  background-color: var(--anvil-surface);
  border: 1px solid var(--anvil-border-input);
  border-radius: var(--anvil-radius-input);
}
.anvil-sidebar-search:focus-within {
  border-color: var(--anvil-brand);
  box-shadow: 0 0 0 3px rgba(201, 146, 43, 0.18);
}

.anvil-sidebar-search .anvil-sidebar-search-icon {
  flex: 0 0 auto;
  font-size: 19px;
  color: var(--anvil-muted);
  pointer-events: none;
}

.anvil-sidebar-search .search {
  flex: 1;
  min-width: 0;
  margin: 0;
  border: 0;
  background: none;
  border-radius: 0;
}
.anvil-sidebar-search .search:focus-within {
  border-color: transparent;
}

.anvil-sidebar-search input[type="search"] {
  padding: 0;
  height: auto;
  min-height: 0;
  font-size: 14px;
  color: var(--anvil-ink);
  background: none;
  border-radius: 0;
  box-shadow: none;
}
.anvil-sidebar-search input[type="submit"] {
  display: none;
}

/***** Navigation tree *****/
.anvil-tree {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px 12px 16px;
  min-height: 0;
}

.anvil-tree-overline {
  margin: 0;
  padding: 8px 10px 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--anvil-muted);
}

.anvil-tree-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: var(--anvil-radius-row);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--anvil-ink-2);
  text-decoration: none;
  cursor: pointer;
}
.anvil-tree-row:hover {
  background-color: var(--anvil-tint-hover);
  color: var(--anvil-ink-2);
  text-decoration: none;
}
.anvil-tree-row[data-level="0"],
.anvil-tree-row-static {
  font-weight: 600;
}
.anvil-tree-row[data-level="2"],
.anvil-tree-row[data-level="3"] {
  font-size: 13.5px;
}
.anvil-tree-row.is-active {
  background-color: var(--anvil-tint-strong);
  color: var(--anvil-brand-ink-dark);
  font-weight: 700;
}

.anvil-tree-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.anvil-tree-caret,
.anvil-tree-caret-slot {
  flex: 0 0 18px;
  font-size: 18px;
  color: var(--anvil-muted-2);
  border-radius: 6px;
}
.anvil-tree-caret.is-empty {
  visibility: hidden;
}
.anvil-tree-caret.is-toggle:hover {
  color: var(--anvil-brand-ink);
}
.anvil-tree-row-static .anvil-tree-caret-slot {
  color: var(--anvil-muted-2);
}

.anvil-tree-group[hidden] {
  display: none;
}

/***** Sidebar footer chip *****/
.anvil-sidebar-footer {
  flex: 0 0 auto;
  padding: 12px 16px 16px;
  border-top: 1px solid var(--anvil-border);
  background-color: var(--anvil-surface-alt);
}

.anvil-attribution {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  border-radius: var(--anvil-radius-input);
  background-color: var(--anvil-ink-static);
  color: var(--anvil-on-dark);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  /* the layer's floating-tag rules no longer apply — reset them explicitly */
  position: static;
  transform: none;
  box-shadow: none;
  border: 0;
  white-space: nowrap;
}
.anvil-attribution:hover {
  color: #fff;
  text-decoration: none;
}
.anvil-attribution .anvil-icon {
  font-size: 16px;
  color: var(--anvil-gold-accent);
}

/***** Top bar *****/
.header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 26px;
  padding: 14px var(--anvil-gutter);
  min-height: 0;
  background-color: var(--anvil-header-bg);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--anvil-border);
}
@media (min-width: 1160px) {
  .header {
    padding: 14px var(--anvil-gutter);
  }
}

/* Anvil keeps the wordmark in the top bar at every width; only the drawer
   toggle is desktop-hidden. */
@media (min-width: 1024px) {
  .anvil-sidebar-toggle {
    display: none;
  }
}

.anvil-sidebar-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-inline-end: auto;
  border: 1px solid var(--anvil-border);
  border-radius: var(--anvil-radius-input);
  background-color: var(--anvil-surface);
  color: var(--anvil-ink-2);
  cursor: pointer;
}
.anvil-sidebar-toggle:hover {
  border-color: var(--anvil-brand);
  color: var(--anvil-brand-ink);
}
.anvil-sidebar-toggle .anvil-icon {
  font-size: 22px;
}

.nav-wrapper-desktop {
  gap: 26px;
}

.user-nav-list {
  gap: 26px;
}

.nav-wrapper-desktop a {
  padding: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--anvil-ink-2);
}
[dir="rtl"] .nav-wrapper-desktop a {
  padding: 0;
}
.nav-wrapper-desktop a:hover {
  color: var(--anvil-brand-ink);
}

.nav-wrapper-desktop .ask-ai,
.nav-wrapper-mobile .ask-ai {
  color: var(--anvil-on-brand);
  padding: 8px 18px;
}
.nav-wrapper-desktop .ask-ai:hover {
  color: var(--anvil-on-brand);
}

/***** User chip + menu *****/
.user-info > button {
  gap: 9px;
  padding: 5px 10px 5px 5px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 15px;
}
.user-info > button:hover {
  background-color: var(--anvil-tint-hover);
}
.user-info > button .dropdown-chevron-icon {
  color: var(--anvil-ink-5);
}

.header .user-avatar {
  height: 30px;
  width: 30px;
  background-color: var(--anvil-avatar-bg);
}

.header .dropdown-menu {
  top: 46px;
  width: 210px;
  min-width: 210px;
  padding: 6px;
  background-color: var(--anvil-surface);
  border: 1px solid var(--anvil-border);
  border-radius: var(--anvil-radius-menu);
  box-shadow: var(--anvil-shadow-menu);
}
.header .dropdown-menu [role="menuitem"] {
  padding: 9px 12px;
  border-radius: var(--anvil-radius-row);
  font-size: 14px;
  color: var(--anvil-ink);
}
.header .dropdown-menu [role="menuitem"]:hover,
.header .dropdown-menu [role="menuitem"]:focus {
  background-color: var(--anvil-tint-hover);
  color: var(--anvil-ink);
}
.header .dropdown-menu .separator {
  height: 1px;
  margin: 5px 8px;
  background-color: var(--anvil-border-hairline);
}

/***** Inner-page header bar (breadcrumbs + pill search) *****/
/* (crumb layout lives in the controls block — Copenhagen puts .breadcrumbs on
   the <ol> itself, not on a wrapper element) */
.container {
  max-width: calc(var(--anvil-page-max) + var(--anvil-gutter) * 2);
  padding: 0 var(--anvil-gutter);
}
@media (min-width: 1160px) {
  .container {
    padding: 0 var(--anvil-gutter);
  }
}

.sub-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0 0;
  margin: 0;
  border: 0;
  background: none;
  min-height: 0;
}

.sub-nav .breadcrumbs {
  margin: 0;
  padding: 0;
  font-size: 14px;
}
.sub-nav .breadcrumbs ol,
.sub-nav .breadcrumbs ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
}
.breadcrumbs li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--anvil-ink-4);
}
.breadcrumbs li + li::before {
  content: "\203A";
  color: var(--anvil-muted-soft);
  margin: 0;
  padding: 0;
}
.breadcrumbs a {
  color: var(--anvil-brand-ink);
  font-weight: 600;
}
.breadcrumbs a:hover {
  color: var(--anvil-brand-ink-dark);
}

.sub-nav .search-container {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 330px;
  max-width: 40vw;
  flex: 0 0 auto;
  margin: 0;
  padding: 9px 16px;
  background-color: var(--anvil-surface);
  border: 1px solid var(--anvil-border-input);
  border-radius: 999px;
}
.sub-nav .search-container:focus-within {
  border-color: var(--anvil-brand);
  box-shadow: 0 0 0 3px rgba(201, 146, 43, 0.18);
}
.sub-nav .search-container .search-icon {
  /* Copenhagen centres this icon with `top: 50%` + a -50% translate while it is
     absolutely positioned. As a flex item the offset has nothing to cancel, so
     the transform has to go too or the icon rides 9px high. */
  position: static;
  inset: auto;
  transform: none;
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin: 0;
  color: var(--anvil-muted);
  stroke-width: 1.2;
}
.sub-nav .search-container .search {
  flex: 1;
  min-width: 0;
  margin: 0;
  border: 0;
  background: none;
  border-radius: 0;
}
.sub-nav .search-container .search:focus-within {
  border-color: transparent;
}
.sub-nav input[type="search"] {
  padding: 0;
  height: auto;
  min-height: 0;
  font-size: 14.5px;
  color: var(--anvil-ink);
  background: none;
  border-radius: 0;
  box-shadow: none;
}
.sub-nav .search-container input[type="submit"] {
  display: none;
}

/***** Footer *****/
.footer {
  border-top: 1px solid var(--anvil-border);
  background-color: var(--anvil-surface-alt);
  background-image: none;
  color: var(--anvil-ink-5);
  padding: 0;
  margin: 0;
  flex-shrink: 0;
}

.footer-inner {
  max-width: calc(var(--anvil-page-max) + var(--anvil-gutter) * 2);
  margin: 0 auto;
  padding: 26px var(--anvil-gutter) 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--anvil-ink);
  text-decoration: none;
}
.footer-brand:hover {
  color: var(--anvil-ink);
  text-decoration: none;
}

.footer-brand-logo {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  border-radius: var(--anvil-radius-row);
  background-color: var(--anvil-brand);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer-brand-logo .anvil-icon {
  font-size: 16px;
}

.footer-brand-name {
  font-family: var(--anvil-font-heading);
  font-weight: 700;
  font-size: 15px;
  color: var(--anvil-ink);
}

.footer-language-selector .dropdown-toggle,
.footer-locale-static {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--anvil-ink-5);
  background: none;
  border: 0;
  padding: 0;
}
.footer-language-icon {
  font-size: 18px;
}


/* ==========================================================================
   ANVIL HOME PAGE
   ========================================================================== */

.hero {
  background-color: transparent;
  background-image: linear-gradient(180deg, var(--anvil-surface-warm) 0%, var(--anvil-bg) 100%);
  background-size: auto;
  background-repeat: no-repeat;
  background-position: 0 0;
  border-bottom: 1px solid var(--anvil-border-hero);
  padding: 74px var(--anvil-gutter) 66px;
  margin: 0;
  text-align: center;
}

.hero-inner {
  max-width: 820px;
  margin: 0 auto;
  padding: 0;
}

.hero-announcement {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 22px;
  padding: 6px 14px;
  border-radius: 999px;
  background-color: var(--anvil-surface);
  border: 1px solid var(--anvil-border);
  font-size: 13px;
  font-weight: 600;
  color: var(--anvil-ink-5);
}
.hero-announcement .anvil-icon {
  font-size: 16px;
  color: var(--anvil-brand);
}

.hero-title {
  font-family: var(--anvil-font-heading);
  font-weight: 800;
  font-size: 52px;
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: var(--anvil-ink);
  margin: 0 0 16px;
  text-wrap: balance;
  text-shadow: none;
}

.hero-subtitle {
  margin: 0 auto 30px;
  max-width: 560px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--anvil-ink-3);
}

.hero .hero-search {
  display: block;
  max-width: none;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}

.hero .search-icon {
  display: none;
}

.hero .hero-search .search,
.hero .search.search-full {
  display: flex;
  align-items: stretch;
  min-width: 0;
  margin: 0;
  padding: 0;
  background-color: #fff;
  border: 1px solid var(--anvil-brand);
}
.hero .hero-search .search::before {
  content: "search";
  font-family: "Material Symbols Sharp";
  font-size: 24px;
  line-height: 1;
  color: var(--anvil-steel-500);
  align-self: center;
  padding-inline-start: 16px;
  flex: 0 0 auto;
  font-feature-settings: "liga";
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

.hero .hero-search input[type="search"] {
  flex: 1;
  height: auto;
  min-height: 0;
  font-family: var(--anvil-font-body);
  font-size: 17px;
  color: var(--anvil-ink);
  background: none;
  border: 0;
  box-shadow: none;
}
.hero .hero-search input[type="search"]:focus {
  outline: none;
}
.hero .hero-search input[type="search"]::placeholder {
  color: var(--anvil-steel-400);
}
.hero .hero-search input[type="submit"] {
  display: block;
  flex: 0 0 auto;
  border: 0;
  background-color: var(--anvil-steel-800);
  color: #fff;
  padding: 0 26px;
  font-family: var(--anvil-font-heading);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
}
.hero .hero-search input[type="submit"]:hover {
  background-color: var(--anvil-steel-900);
}

/***** Category grid *****/
.section.knowledge-base {
  max-width: var(--anvil-home-max);
  margin: 0 auto;
  padding: 0;
}

.container > .section.knowledge-base {
  padding-top: 56px;
}

.blocks-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.blocks-item {
  margin: 0;
  width: auto;
  min-height: 0;
}

.blocks-item-link {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  text-align: start;
  height: 100%;
  box-sizing: border-box;
  background-color: var(--anvil-surface);
  border: 1px solid var(--anvil-border);
  border-radius: var(--anvil-radius-card);
  padding: 24px;
  box-shadow: none;
  transition: box-shadow 0.18s, transform 0.18s, border-color 0.18s;
}
.blocks-item-link:hover,
.blocks-item-link:focus-visible {
  border-color: var(--anvil-brand);
  box-shadow: var(--anvil-shadow-hover);
  transform: translateY(-2px);
  text-decoration: none;
}

.blocks-item-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: var(--anvil-radius-tile);
  background-color: var(--anvil-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}
.blocks-item-icon .anvil-icon {
  font-size: 21px;
  color: var(--anvil-brand-soft);
}

.blocks-item-title {
  font-family: var(--anvil-font-heading);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.3;
  color: var(--anvil-ink);
  margin: 0;
}

.blocks-item-description {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--anvil-ink-4);
  margin: 0;
  -webkit-line-clamp: none;
  max-height: none;
}

.blocks-item-count {
  margin-top: 4px;
  font-size: 13px;
  font-weight: 700;
  color: var(--anvil-brand-ink);
}

/***** Promoted articles *****/
.section.knowledge-base .articles {
  margin-top: 52px;
}

.knowledge-base .articles > h2 {
  font-family: var(--anvil-font-heading);
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -0.01em;
  margin: 0 0 18px;
  text-align: start;
}

.article-list.promoted-articles,
.knowledge-base .promoted-articles {
  display: block;
  grid-template-columns: none;
  column-count: initial;
  columns: auto;
  column-gap: normal;
  margin: 0;
  padding: 0;
  list-style: none;
}

.promoted-articles-item {
  margin: 0;
  padding: 0;
  text-align: start;
  break-inside: auto;
}

.promoted-articles-item a {
  display: block;
  padding: 14px 0;
  border-bottom: 1px solid var(--anvil-border-hairline);
  font-size: 16px;
  font-weight: 600;
  color: var(--anvil-brand-ink);
}
.promoted-articles-item a::before {
  content: none;
}
.promoted-articles-item a:hover {
  color: var(--anvil-brand-ink-dark);
  text-decoration: none;
}

/***** Community banner *****/
.home-section.community {
  max-width: var(--anvil-home-max);
  margin: 0 auto;
  padding: 52px 0 0;
  text-align: center;
}

.home-section.community > h2 {
  font-family: var(--anvil-font-heading);
  font-weight: 800;
  font-size: 26px;
  margin: 0 0 6px;
}

.community-link {
  display: inline-block;
  margin-bottom: 22px;
  font-size: 15px;
  color: var(--anvil-brand-ink);
  text-decoration: underline;
}

.community a.community-image {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  min-height: 220px;
  box-sizing: border-box;
  border-radius: var(--anvil-radius-band);
  border: 1px solid var(--anvil-border-warm);
  background-color: transparent;
  background-image: linear-gradient(135deg, var(--anvil-surface-warm) 0%, var(--anvil-surface-warm-2) 100%);
  background-size: auto;
  background-repeat: no-repeat;
  background-position: 0 0;
  padding: 36px 48px;
  margin-top: 0;
  text-align: start;
  text-decoration: none;
  height: auto;
}
.community a.community-image:hover {
  text-decoration: none;
  border-color: var(--anvil-brand);
  box-shadow: var(--anvil-shadow-hover);
}

.community-banner-copy {
  display: block;
  max-width: 520px;
}

.community-banner-eyebrow {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--anvil-brand-ink);
  margin-bottom: 10px;
}

.community-banner-title {
  display: block;
  font-family: var(--anvil-font-heading);
  font-weight: 800;
  font-size: 30px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--anvil-ink);
  margin: 0 0 8px;
}

.community-banner-subtitle {
  display: block;
  font-size: 16px;
  line-height: 1.6;
  color: var(--anvil-ink-3);
  margin: 0;
}

.community-banner-stats {
  display: flex;
  gap: 14px;
}

.community-banner-stat {
  display: block;
  background-color: var(--anvil-surface-stat);
  border: 1px solid var(--anvil-border-warm);
  border-radius: var(--anvil-radius-card-sm);
  padding: 18px 22px;
  min-width: 112px;
}

.community-banner-stat-value {
  display: block;
  font-family: var(--anvil-font-heading);
  font-weight: 800;
  font-size: 26px;
  line-height: 1.2;
  color: var(--anvil-brand-ink);
}

.community-banner-stat-label {
  display: block;
  font-size: 13px;
  color: var(--anvil-ink-4);
}

/***** Recent activity *****/
.home-section.activity {
  max-width: var(--anvil-home-max);
  margin: 0 auto;
  padding: 52px 0 80px;
}

.recent-activity-header {
  font-family: var(--anvil-font-heading);
  font-weight: 800;
  font-size: 26px;
  margin: 0 0 18px;
  text-align: center;
}

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

/* Copenhagen emits the topic/section link, the title and the meta block as
   three siblings; the design stacks the first two and floats the meta right. */
.recent-activity-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  column-gap: 24px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--anvil-border-hairline);
  margin: 0;
}

.recent-activity-item > h3 {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
}

.recent-activity-item-link {
  grid-column: 1;
  grid-row: 2;
}

.recent-activity-item-meta {
  grid-column: 2;
  grid-row: 1 / 3;
  display: flex;
  align-items: center;
  gap: 14px;
  justify-self: end;
}

.recent-activity-item-parent {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--anvil-ink-5);
  margin: 0 0 3px;
}
.recent-activity-item-parent:hover {
  color: var(--anvil-brand-ink);
}

.recent-activity-item-link {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: var(--anvil-brand-ink);
}
.recent-activity-item-link:hover {
  color: var(--anvil-brand-ink-dark);
}

.recent-activity-item-meta,
.recent-activity-item-time {
  color: var(--anvil-ink-5);
  font-size: 13.5px;
  white-space: nowrap;
}

.recent-activity-item-comment {
  color: var(--anvil-ink-5);
  font-size: 13.5px;
}

.recent-activity-controls {
  margin-top: 18px;
}
.recent-activity-controls a {
  font-size: 15px;
  color: var(--anvil-brand-ink);
  text-decoration: underline;
}

/* The clear (×) button is a flex item of the form, after the input — Copenhagen's
   `order` rules keep it inside the field. It only needs sizing here. */
.anvil-sidebar-search .clear-button,
.sub-nav .search-container .clear-button,
.hero .hero-search .clear-button {
  width: 24px;
  height: 24px;
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--anvil-muted);
  box-shadow: none;
}
.anvil-sidebar-search .clear-button:hover,
.sub-nav .search-container .clear-button:hover,
.hero .hero-search .clear-button:hover {
  background-color: var(--anvil-tint-hover);
  color: var(--anvil-ink-3);
}
.anvil-sidebar-search .clear-button svg,
.sub-nav .search-container .clear-button svg,
.hero .hero-search .clear-button svg {
  width: 11px;
  height: 11px;
}


/* ==========================================================================
   ANVIL INNER PAGES — shared page furniture
   ========================================================================== */

/* the separator inherits the icon font from the layer above it; force the
   text font back so the › renders as a chevron and not a .notdef box */
.breadcrumbs li + li::before {
  font-family: var(--anvil-font-body);
  font-size: 14px;
  font-variation-settings: normal;
  font-feature-settings: normal;
  margin: 0;
}

.page-header {
  display: block;
  margin: 0 0 40px;
  padding: 0;
  border: 0;
}

.page-header h1 {
  font-family: var(--anvil-font-heading);
  font-weight: 800;
  font-size: 40px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--anvil-ink);
  margin: 0 0 10px;
  display: block;
}

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

.page-header-description {
  font-size: 17px;
  line-height: 1.6;
  font-style: normal;
  color: var(--anvil-ink-4);
  margin: 0;
  max-width: 640px;
}

.category-container,
.section-container {
  padding: 34px 0 80px;
  margin: 0;
  display: block;
}

.category-content,
.section-content {
  max-width: none;
  margin: 0;
  padding: 0;
}

/***** Category page — two-column grid of section cards *****/
.section-tree {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 44px 56px;
  margin: 0;
}

.section-tree > .section {
  background-color: var(--anvil-surface);
  border: 1px solid var(--anvil-border);
  border-radius: var(--anvil-radius-card);
  padding: 26px 26px 20px;
  margin: 0;
  box-shadow: none;
}

.section-tree-title {
  margin: 0 0 4px;
  padding: 0;
  border: 0;
  font-family: var(--anvil-font-heading);
  font-weight: 700;
  font-size: 21px;
  line-height: 1.3;
}
.section-tree-title a {
  color: var(--anvil-ink);
}
.section-tree-title a:hover {
  color: var(--anvil-brand-ink);
  text-decoration: none;
}

.section-tree-description {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--anvil-ink-5);
}

.section-tree .article-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 0;
  background: none;
  border-radius: 0;
}

.section-tree .article-list-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 0;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--anvil-border-cell);
  background: none;
}
.section-tree .article-list-item:hover {
  background: none;
}

.section-tree .article-list-item a.article-list-link {
  display: block;
  flex: 1;
  padding: 0;
  font-size: 15.5px;
  font-weight: 400;
  color: var(--anvil-ink-2);
}
.section-tree .article-list-item a.article-list-link:hover {
  color: var(--anvil-brand-ink);
  text-decoration: none;
}
.section-tree .article-list-item a.article-list-link::after {
  content: none;
}
.section-tree .article-list-item .icon-star,
.section-tree .article-list-item .icon-lock {
  display: none;
}

.see-all-articles {
  display: inline-block;
  margin-top: 14px;
  font-size: 14px;
  font-weight: 700;
  color: var(--anvil-brand-ink);
}
.see-all-articles:hover {
  color: var(--anvil-brand-ink-dark);
  text-decoration: none;
}
.see-all-articles::after {
  content: none;
}

/***** Section page — header row + article card *****/
.section-content .page-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  column-gap: 24px;
  margin-bottom: 34px;
}
.section-content .page-header h1 {
  grid-column: 1;
  grid-row: 1;
}
.section-content .section-subscribe {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  justify-self: end;
}
.section-content .page-header-description {
  grid-column: 1;
  grid-row: 2;
  max-width: 620px;
}

.section-content .section-list,
.section-content > .article-list {
  display: block;
  background-color: var(--anvil-surface);
  border: 1px solid var(--anvil-border);
  border-radius: var(--anvil-radius-card);
  overflow: hidden;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}

.section-content .section-list-item,
/* Article rows on a section page: a `description` glyph, the title, and an
   `arrow_forward` in steel — no card, no fill, per the handoff. */
.section-content > .article-list > .article-list-item {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--anvil-steel-100);
  background: none;
}
.section-content > .article-list > .article-list-item::before {
  content: "description";
  font-family: "Material Symbols Sharp";
  font-feature-settings: "liga";
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  font-size: 19px;
  line-height: 1;
  color: var(--anvil-steel-400);
  flex: 0 0 19px;
  text-transform: none;
  letter-spacing: normal;
}
.section-content .section-list-item:last-child {
  border-bottom: 0;
}

.section-content .section-list-item > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 20px;
  color: var(--anvil-ink);
}
.section-content > .article-list > .article-list-item > .article-list-link {
  flex: 1 1 auto;
  display: block;
  padding: 16px 2px;
  font-family: var(--anvil-font-body);
  font-size: 17px;
  font-weight: 400;
  color: var(--anvil-ink);
}
.section-content .section-list-item > a:hover {
  background-color: var(--anvil-steel-050);
  color: var(--anvil-ink);
  text-decoration: none;
}
.section-content > .article-list > .article-list-item > .article-list-link:hover {
  background: none;
  color: var(--anvil-ink);
  text-decoration: underline;
  text-decoration-color: var(--anvil-brand);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.section-content .section-list-item > a svg {
  display: none;
}

.section-content > .article-list > .article-list-item > .article-list-link::after {
  content: "arrow_forward";
  font-family: "Material Symbols Sharp";
  font-feature-settings: "liga";
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  font-size: 18px;
  line-height: 1;
  color: var(--anvil-steel-200);
  float: inline-end;
  border: 0;
  width: auto;
  height: auto;
  position: static;
  transform: none;
  opacity: 1;
  background: none;
  text-transform: none;
  letter-spacing: normal;
}

.section-content > .article-list > .article-list-item > .icon-star,
.section-content > .article-list > .article-list-item > .icon-lock {
  display: none;
}


/* ==========================================================================
   ANVIL CONTROLS — buttons, follow toggles, pills, tabs, badges
   ========================================================================== */

/* Copenhagen puts the class on the <ol> itself, so the crumbs are laid out
   here rather than on a wrapper. */
ol.breadcrumbs,
ul.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
}

/***** Primary (filled) buttons *****/
.button,
button.button,
input[type="submit"],
.form .button,
.comment-form .button,
.post-form .button,
.upload-dropzone + .button {
  border-radius: var(--anvil-radius-input);
  border: 0;
  background-color: var(--anvil-brand);
  color: var(--anvil-on-brand);
  font-family: var(--anvil-font-body);
  font-weight: 700;
  font-size: 15px;
  padding: 12px 26px;
  box-shadow: none;
  transition: background-color 0.18s;
}
.button:hover,
button.button:hover,
input[type="submit"]:hover {
  background-color: var(--anvil-brand-ink);
  border-color: var(--anvil-brand-ink);
  color: var(--anvil-on-brand);
}

/***** Follow / subscribe toggles → outline button *****/
.subscriptions-subscribe button,
.requests-table-toolbar .organization-subscribe button,
.community-follow button,
.article-subscribe button,
.section-subscribe button,
.split-button button {
  padding: 9px 20px;
  border-radius: 11px;
  border: 1px solid var(--anvil-border-strong);
  background-color: var(--anvil-surface);
  color: var(--anvil-prose-2);
  font-family: var(--anvil-font-body);
  font-size: 14.5px;
  font-weight: 700;
  box-shadow: none;
  transition: border-color 0.18s, background-color 0.18s, color 0.18s;
}
.subscriptions-subscribe button:hover,
.community-follow button:hover,
.article-subscribe button:hover,
.section-subscribe button:hover,
.split-button button:hover {
  border-color: var(--anvil-brand);
  background-color: var(--anvil-surface);
  color: var(--anvil-brand-ink);
}

/* subscribed state — Copenhagen flips aria-selected / the "Following" label */
.subscriptions-subscribe button[aria-selected="true"],
.community-follow button[aria-selected="true"],
.article-subscribe button[aria-selected="true"],
.section-subscribe button[aria-selected="true"],
.split-button button[aria-selected="true"] {
  background-color: var(--anvil-ink-static);
  border-color: var(--anvil-ink-static);
  color: var(--anvil-on-dark);
}
.subscriptions-subscribe button[aria-selected="true"]:hover,
.community-follow button[aria-selected="true"]:hover,
.article-subscribe button[aria-selected="true"]:hover,
.section-subscribe button[aria-selected="true"]:hover,
.split-button button[aria-selected="true"]:hover {
  background-color: var(--anvil-ink-static);
  border-color: var(--anvil-ink-static);
  color: var(--anvil-on-dark);
}

/* the follower-count segment of the split pill */
.split-button .dropdown-toggle,
.split-button button + button {
  border-inline-start: 0;
}

/***** Status badges *****/
.status-label,
.request-status,
.striped-list-status {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background-color: var(--anvil-border-hairline);
  color: var(--anvil-ink-3);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
  border: 0;
  text-transform: none;
  letter-spacing: 0;
}
.status-label-open,
.status-label-new,
.request-status-open,
.request-status-new {
  background-color: var(--anvil-status-open-bg);
  color: var(--anvil-status-open-ink);
}
.status-label-pending,
.status-label-hold,
.request-status-pending,
.request-status-hold {
  background-color: var(--anvil-status-pending-bg);
  color: var(--anvil-status-pending-ink);
}
.status-label-solved,
.status-label-closed,
.status-label-answered,
.request-status-solved,
.request-status-closed {
  background-color: var(--anvil-status-solved-bg);
  color: var(--anvil-status-solved-ink);
}

/***** Avatars *****/
.user-avatar,
.avatar img,
.comment-avatar img,
.post-author-avatar img {
  border-radius: 999px;
  background-color: var(--anvil-avatar-bg);
}


/* ==========================================================================
   ANVIL ARTICLE PAGE
   ========================================================================== */

.article-container {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 48px;
  padding: 28px 0 80px;
  margin: 0;
  max-width: none;
}

/***** "Articles in this section" rail — a plain list, not a card *****/
.article-sidebar {
  flex: 0 1 240px;
  min-width: 200px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

.article-sidebar .collapsible-sidebar {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
  box-shadow: none;
}

.collapsible-sidebar-title.sidenav-title {
  display: block;
  font-family: var(--anvil-font-heading);
  font-weight: 700;
  font-size: 15px;
  color: var(--anvil-ink);
  margin: 0 0 12px;
  padding: 0;
  text-transform: none;
  letter-spacing: 0;
}

.collapsible-sidebar-body ul {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.article-sidebar .sidenav-item {
  display: block;
  padding: 8px 10px;
  border-radius: var(--anvil-radius-row);
  border: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--anvil-ink-2);
  background: none;
}
.article-sidebar .sidenav-item:hover {
  background-color: var(--anvil-tint-hover);
  color: var(--anvil-ink-2);
  text-decoration: none;
}
.article-sidebar .sidenav-item.current-article {
  background-color: var(--anvil-tint-strong);
  color: var(--anvil-brand-ink-dark);
  font-weight: 700;
  border: 0;
}

.article-sidebar .article-sidebar-item {
  display: inline-block;
  margin: 10px 0 0 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--anvil-brand-ink);
}

/***** Article body column *****/
.article {
  flex: 1 1 520px;
  min-width: 0;
  max-width: none;
  margin: 0;
  padding: 0;
}

.article-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 20px;
  margin: 0;
  padding: 0 0 22px;
  border-bottom: 1px solid var(--anvil-border-hairline);
}

.article-title {
  grid-column: 1 / -1;
  font-family: var(--anvil-font-heading);
  font-weight: 800;
  font-size: 38px;
  line-height: 1.18;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
  text-wrap: pretty;
}

.article-author {
  grid-column: 1;
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0;
}

.article-avatar .user-avatar,
.article-author .user-avatar {
  width: 40px;
  height: 40px;
}

.article-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
  gap: 0;
}
.article-meta a {
  font-size: 15px;
  font-weight: 700;
  color: var(--anvil-brand-ink);
}
.article-meta .meta-group {
  font-size: 13.5px;
  color: var(--anvil-ink-5);
}
.article-meta .meta-data {
  font-size: 13.5px;
  color: var(--anvil-ink-5);
}

.article-subscribe {
  grid-column: 2;
  justify-self: end;
  margin: 0;
}

.article-info {
  margin: 0;
  padding: 0;
  border: 0;
}

.article-body {
  font-size: 17px;
  line-height: 1.72;
  color: var(--anvil-prose);
  padding-top: 8px;
}

.article-body h2 {
  font-family: var(--anvil-font-heading);
  font-weight: 700;
  font-size: 24px;
  color: var(--anvil-ink);
  margin: 32px 0 12px;
}
.article-body h3 {
  font-family: var(--anvil-font-heading);
  font-weight: 700;
  font-size: 19px;
  margin: 26px 0 10px;
}
.article-body p {
  margin: 0 0 16px;
}

/***** Share icons → plain glyphs *****/
.article-share {
  display: flex;
  gap: 14px;
  margin: 28px 0 0;
  padding: 0;
}
.article-share a,
.article-share li a {
  width: auto;
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--anvil-ink-5);
  display: inline-flex;
  align-items: center;
}
.article-share a:hover {
  background: none;
  color: var(--anvil-brand-ink);
}
.article-share svg {
  width: 22px;
  height: 22px;
}

.article-footer {
  border: 0;
  padding: 0;
  margin: 0;
}

/***** "Was this article helpful?" card *****/
.article-votes {
  margin-top: 34px;
  padding: 26px;
  border: 1px solid var(--anvil-border);
  border-radius: var(--anvil-radius-card);
  background-color: var(--anvil-surface);
  text-align: center;
}

.article-votes-question {
  font-family: var(--anvil-font-body);
  font-size: 16px;
  font-weight: 700;
  color: var(--anvil-ink);
  margin: 0 0 14px;
  letter-spacing: 0;
}

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

.article-vote,
button.article-vote {
  padding: 9px 20px;
  border-radius: 11px;
  border: 1px solid var(--anvil-border-strong);
  background-color: var(--anvil-surface);
  color: var(--anvil-prose-2);
  font-size: 14.5px;
  font-weight: 700;
  min-width: 76px;
}
.article-vote:hover,
button.article-vote:hover {
  border-color: var(--anvil-brand);
  background-color: var(--anvil-surface);
  color: var(--anvil-brand-ink);
}
.article-vote.button-primary,
button.article-vote.button-primary {
  background-color: var(--anvil-ink-static);
  border-color: var(--anvil-ink-static);
  color: var(--anvil-on-dark);
}

.article-votes-count {
  display: block;
  margin-top: 12px;
  font-size: 13.5px;
  color: var(--anvil-ink-5);
}

.article-more-questions {
  margin-top: 26px;
  text-align: center;
  font-size: 15px;
  color: var(--anvil-ink-3);
}
.article-more-questions a {
  color: var(--anvil-brand-ink);
  text-decoration: underline;
}

.article-return-to-top {
  margin-top: 18px;
  text-align: center;
  border: 0;
}
.article-return-to-top a {
  font-size: 14px;
  color: var(--anvil-ink-5);
}

/***** Recently viewed / related *****/
.article-relatives {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
  margin-top: 44px;
  padding-top: 32px;
  border-top: 1px solid var(--anvil-border-hairline);
}
.article-relatives:empty {
  display: none;
  border: 0;
  margin: 0;
  padding: 0;
}

.article-relatives h3,
.recent-articles-title,
.related-articles-title {
  font-family: var(--anvil-font-heading);
  font-weight: 700;
  font-size: 18px;
  margin: 0 0 12px;
}

.article-relatives ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.article-relatives li {
  margin: 0;
  padding: 0;
  border: 0;
}
.article-relatives a {
  font-size: 15px;
  color: var(--anvil-brand-ink);
}
.article-relatives a:hover {
  color: var(--anvil-brand-ink-dark);
}

/***** Comments *****/
.article-comments,
.comments {
  margin-top: 44px;
  padding-top: 28px;
  border-top: 1px solid var(--anvil-border-hairline);
}
.article-comments .comments {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.comment-overview {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
  border-bottom: 0;
  padding: 0;
  margin: 0 0 18px;
}

.comment-heading {
  font-family: var(--anvil-font-heading);
  font-weight: 800;
  font-size: 22px;
  margin: 0;
  letter-spacing: -0.01em;
}

.comment-callout {
  font-size: 14px;
  color: var(--anvil-ink-5);
  margin: 0;
}

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

.comment {
  padding: 16px 0;
  border-top: 1px solid var(--anvil-border-cell);
  border-bottom: 0;
  margin: 0;
}

.comment-avatar .user-avatar,
.comment .user-avatar {
  width: 38px;
  height: 38px;
}

.comment-meta a,
.comment-author a {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--anvil-ink);
}

.comment-body {
  font-size: 15.5px;
  color: var(--anvil-prose);
}

.comment-form textarea,
.comment-form .comment-field {
  border: 1px solid var(--anvil-border-input);
  border-radius: var(--anvil-radius-menu);
  background-color: var(--anvil-surface);
  font-size: 15px;
  color: var(--anvil-ink);
  padding: 12px 14px;
  min-height: 96px;
}
.comment-form textarea:focus {
  border-color: var(--anvil-brand);
  outline: none;
  box-shadow: 0 0 0 3px rgba(201, 146, 43, 0.18);
}

/* Specificity catch-ups: the Copenhagen layer targets these with an extra
   element or class, so the Anvil values need to match its selector shape. */
.article-sidebar .collapsible-sidebar-body a.sidenav-item,
.article-sidebar .collapsible-sidebar-body .sidenav-item {
  display: block;
  padding: 8px 10px;
  margin: 0;
  border: 0;
  border-radius: var(--anvil-radius-row);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--anvil-ink-2);
  background: none;
}
.article-sidebar .collapsible-sidebar-body a.sidenav-item:hover {
  background-color: var(--anvil-tint-hover);
  color: var(--anvil-ink-2);
  text-decoration: none;
}
.article-sidebar .collapsible-sidebar-body a.sidenav-item.current-article {
  background-color: var(--anvil-tint-strong);
  color: var(--anvil-brand-ink-dark);
  font-weight: 700;
  border-left: 0;
  border-right: 0;
  padding-left: 10px;
  padding-right: 10px;
  margin-left: 0;
  margin-right: 0;
}
[dir="rtl"] .article-sidebar .collapsible-sidebar-body a.sidenav-item.current-article {
  border-right: 0;
  padding-right: 10px;
  margin-right: 0;
}

/* "Following" state — Copenhagen marks it with data-selected, not aria-selected */
.subscriptions-subscribe button[data-selected="true"],
.community-follow button[data-selected="true"],
.article-subscribe button[data-selected="true"],
.section-subscribe button[data-selected="true"],
.article-subscribe button.button-primary,
.section-subscribe button.button-primary,
.community-follow button.button-primary,
.subscriptions-subscribe button.button-primary {
  background-color: var(--anvil-ink-static);
  border: 1px solid var(--anvil-ink-static);
  color: var(--anvil-on-dark);
  padding: 9px 20px;
  border-radius: 11px;
  font-size: 14.5px;
  font-weight: 700;
}
.subscriptions-subscribe button[data-selected="true"]:hover,
.community-follow button[data-selected="true"]:hover,
.article-subscribe button[data-selected="true"]:hover,
.section-subscribe button[data-selected="true"]:hover,
.article-subscribe button.button-primary:hover,
.section-subscribe button.button-primary:hover {
  background-color: var(--anvil-ink-static);
  border-color: var(--anvil-ink-static);
  color: var(--anvil-on-dark);
}

.article-share .share a,
.article-share .share li a {
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  color: var(--anvil-ink-5);
}
.article-share .share a:hover,
.article-share .share a:focus {
  background: none;
  color: var(--anvil-brand-ink);
}
.article-share .share a svg {
  width: 22px;
  height: 22px;
}

/* the relatives rail collapses when Guide returns neither list — :empty is not
   enough because the template leaves whitespace behind */
.article-relatives:not(:has(*)) {
  display: none;
  margin: 0;
  padding: 0;
  border: 0;
}


/* ==========================================================================
   ANVIL SEARCH RESULTS
   ========================================================================== */

.search-results-column,
.search-results {
  padding-top: 34px;
}

.search-results-sidebar {
  flex: 0 1 250px;
  min-width: 200px;
  padding-top: 34px;
}

.search-results-sidebar .sidenav-title,
.search-results-sidebar h3 {
  font-family: var(--anvil-font-heading);
  font-weight: 700;
  font-size: 16px;
  color: var(--anvil-ink);
  margin: 0 0 12px;
  text-transform: none;
  letter-spacing: 0;
}

.search-results-sidebar .sidenav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 11px;
  border: 0;
  font-size: 14.5px;
  font-weight: 400;
  color: var(--anvil-ink-2);
  background: none;
}
.search-results-sidebar .sidenav-item:hover {
  background-color: var(--anvil-tint-hover);
  color: var(--anvil-ink-2);
  text-decoration: none;
}
.search-results-sidebar .sidenav-item.current {
  background-color: transparent;
  color: var(--anvil-ink);
  font-weight: 500;
}
.search-results-sidebar .doc-count {
  color: var(--anvil-ink-5);
  font-weight: 400;
}

.search-results h1 {
  font-family: var(--anvil-font-heading);
  font-weight: 600;
  font-size: 34px;
  margin: 0 0 6px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.search-results-count,
.search-results-subheading + p {
  font-size: 14.5px;
  color: var(--anvil-ink-5);
  margin: 0 0 24px;
}

.search-result {
  padding: 18px 0;
  border-bottom: 1px solid var(--anvil-border-hairline);
  margin: 0;
}

.search-result-link {
  font-size: 18px;
  font-weight: 700;
  color: var(--anvil-brand-ink);
}
.search-result-link:hover {
  color: var(--anvil-brand-ink-dark);
}

.search-result-breadcrumbs {
  font-size: 13.5px;
  color: var(--anvil-ink-5);
  margin: 3px 0 6px;
}
.search-result-breadcrumbs a,
.search-result-breadcrumbs li {
  color: var(--anvil-ink-5);
  font-weight: 400;
}
.search-result-breadcrumbs a:hover {
  color: var(--anvil-brand-ink);
}

.search-result-description {
  font-size: 15px;
  line-height: 1.6;
  color: var(--anvil-prose-2);
}

.search-result-meta,
.search-result-meta-count {
  font-size: 13.5px;
  color: var(--anvil-ink-5);
}

/* zero-result state */
.search-results .no-results {
  text-align: center;
  padding: 70px 20px;
}
.no-results-icon {
  width: 96px;
  height: 96px;
  margin: 0 auto 18px;
  border-radius: 24px;
  background-color: var(--anvil-tint);
  display: flex;
  align-items: center;
  justify-content: center;
}
.no-results-icon .anvil-icon {
  font-size: 44px;
  color: var(--anvil-empty-icon);
}
.search-results .no-results .headline,
.search-results .no-results h2 {
  font-family: var(--anvil-font-heading);
  font-weight: 800;
  font-size: 24px;
  margin: 0 0 6px;
}
.search-results .no-results p {
  color: var(--anvil-ink-4);
  margin: 0 0 8px;
}


/* ==========================================================================
   ANVIL COMMUNITY
   ========================================================================== */

.community .page-header,
.page-header.community-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 34px 0 24px;
}

.page-header.community-header .title,
.community-header h1 {
  font-family: var(--anvil-font-heading);
  font-weight: 800;
  font-size: 34px;
  margin: 0;
  letter-spacing: -0.01em;
}

/***** Topic cards — centred, no icon tile *****/
.topics .blocks-list.topics-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 0;
}

.topics-item .blocks-item-link {
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 24px;
}
.topics-item .blocks-item-icon {
  display: none;
}
.topics-item .blocks-item-title {
  font-family: var(--anvil-font-heading);
  font-weight: 700;
  font-size: 19px;
  margin: 0 0 6px;
}
.topics-item .blocks-item-description,
.topics-item .blocks-item-metadata {
  font-size: 14px;
  color: var(--anvil-ink-5);
}

/***** Featured posts + community activity *****/
.community-featured-posts .title,
.community-activity .recent-activity-header {
  font-family: var(--anvil-font-heading);
  font-weight: 800;
  font-size: 22px;
  margin: 44px 0 14px;
}
.community-activity .recent-activity-header {
  text-align: center;
}

.community-featured-posts .promoted-articles-item a {
  padding: 13px 0;
  border-bottom: 1px solid var(--anvil-border-hairline);
  font-size: 16px;
  font-weight: 600;
  color: var(--anvil-brand-ink);
}

/***** Post lists (topic page + all posts) *****/
.post-list,
.striped-list {
  background-color: var(--anvil-surface);
  border: 1px solid var(--anvil-border);
  border-radius: var(--anvil-radius-card);
  overflow: hidden;
  margin: 0;
  padding: 0;
  list-style: none;
}

.post-list-item,
.striped-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 24px;
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--anvil-border-cell);
  background: none;
}
.post-list-item:last-child,
.striped-list-item:last-child {
  border-bottom: 0;
}
.post-list-item:hover,
.striped-list-item:hover {
  background-color: var(--anvil-row-hover);
}

.post-list-item .post-list-title,
.striped-list-title {
  font-size: 16.5px;
  font-weight: 700;
  color: var(--anvil-ink);
}
.post-list-item .post-list-title:hover,
.striped-list-title:hover {
  color: var(--anvil-brand-ink);
  text-decoration: none;
}

.post-list-item .meta-group,
.striped-list-item .meta-group,
.post-info {
  font-size: 13.5px;
  color: var(--anvil-ink-5);
}

.striped-list-count,
.post-list-item .post-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 13.5px;
  color: var(--anvil-ink-5);
  white-space: nowrap;
}

/***** Sort pills *****/
.community-filters,
.post-sorter,
.topic-sorter {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
}

.community-filters .dropdown-toggle,
.post-sorter .dropdown-toggle,
.topic-sorter .dropdown-toggle {
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--anvil-border);
  background-color: var(--anvil-surface);
  color: var(--anvil-ink-3);
  font-size: 13.5px;
  font-weight: 700;
}
.community-filters .dropdown-toggle:hover,
.post-sorter .dropdown-toggle:hover {
  border-color: var(--anvil-brand);
  color: var(--anvil-brand-ink);
}

/***** Topic / post page shell *****/
.topic-container,
.post-container {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 48px;
  padding: 34px 0 80px;
}

.topic-main,
.post-main,
.topic-content,
.post-content {
  flex: 1 1 480px;
  min-width: 0;
}

.topic-sidebar,
.post-sidebar,
.community-sidebar {
  flex: 1 1 280px;
  max-width: 340px;
}

.topic-sidebar .callout,
.post-sidebar .callout,
.community-callout {
  background-color: var(--anvil-surface);
  border: 1px solid var(--anvil-border);
  border-radius: var(--anvil-radius-card);
  padding: 22px;
}
.community-callout h3,
.topic-sidebar h3,
.post-sidebar h3 {
  font-family: var(--anvil-font-heading);
  font-weight: 700;
  font-size: 17px;
  margin: 0 0 12px;
}

/***** Post detail *****/
.post-header h1,
.post-title {
  font-family: var(--anvil-font-heading);
  font-weight: 800;
  font-size: 36px;
  line-height: 1.2;
  margin: 0 0 14px;
  letter-spacing: -0.01em;
}

.post-body,
.post-content .post-body {
  font-size: 17px;
  line-height: 1.72;
  color: var(--anvil-prose);
}

.vote {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.vote-sum {
  font-size: 15px;
  font-weight: 700;
  color: var(--anvil-ink);
}
.vote-up,
.vote-down {
  color: var(--anvil-brand);
  background: none;
  border: 0;
}
.vote-up:hover,
.vote-down:hover {
  color: var(--anvil-brand-ink);
}


/* ==========================================================================
   ANVIL REQUESTS, APPROVALS & FORMS
   ========================================================================== */

.my-activities-header h1,
.my-activities-page h1 {
  font-family: var(--anvil-font-heading);
  font-weight: 800;
  font-size: 36px;
  margin: 0 0 18px;
  letter-spacing: -0.01em;
}

.my-activities-header {
  padding-top: 34px;
  margin: 0;
  border: 0;
}

/***** Underline tab strip (requests, approvals, activities) *****/
.collapsible-nav-list,
.my-activities-sub-nav .collapsible-nav-list {
  display: flex;
  gap: 6px;
  border-bottom: 1px solid var(--anvil-border);
  margin: 22px 0 26px;
  padding: 0;
  list-style: none;
}

.collapsible-nav-list li a {
  display: block;
  padding: 11px 18px;
  font-size: 15px;
  font-weight: 700;
  color: var(--anvil-ink-4);
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  border-radius: 0;
  background: none;
}
.collapsible-nav-list li a:hover {
  color: var(--anvil-brand-ink);
  text-decoration: none;
}
.collapsible-nav-list li a[aria-current="page"],
.collapsible-nav-list li.current a {
  color: var(--anvil-brand-ink-dark);
  border-bottom-color: var(--anvil-brand);
}

/***** Request detail *****/
.request-container {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 44px;
  padding: 34px 0 80px;
}

.request-main,
.request-content {
  flex: 1 1 480px;
  min-width: 0;
}

.request-sidebar {
  flex: 1 1 280px;
  width: auto;
  max-width: 340px;
  background-color: var(--anvil-surface);
  border: 1px solid var(--anvil-border);
  border-radius: var(--anvil-radius-card);
  padding: 24px;
}

.request-title h1,
.request-title {
  font-family: var(--anvil-font-heading);
  font-weight: 800;
  font-size: 34px;
  margin: 0 0 22px;
  border: 0;
  letter-spacing: -0.01em;
}

.request-details {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px 16px;
  font-size: 14.5px;
}
.request-details dt {
  color: var(--anvil-ink-5);
  font-weight: 400;
}
.request-details dd {
  margin: 0;
  font-weight: 600;
  text-align: end;
}

/***** New request / new post forms *****/
.form,
.post-form,
.new-request-form {
  background-color: var(--anvil-surface);
  border: 1px solid var(--anvil-border);
  border-radius: var(--anvil-radius-card);
  padding: 28px;
  max-width: 820px;
}

.form-field label,
.post-form label,
.form label {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--anvil-ink);
  margin-bottom: 7px;
}

.form-field input[type="text"],
.form-field input[type="email"],
.form-field textarea,
.form-field select,
.form input[type="text"],
.form textarea,
.form select {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1px solid var(--anvil-border-input);
  border-radius: var(--anvil-radius-input);
  background-color: var(--anvil-surface-alt);
  font-size: 15px;
  color: var(--anvil-ink);
}
.form-field input[type="text"]:focus,
.form-field textarea:focus,
.form-field select:focus {
  border-color: var(--anvil-brand);
  outline: none;
  box-shadow: 0 0 0 3px rgba(201, 146, 43, 0.18);
}

.upload-dropzone {
  border: 1.5px dashed var(--anvil-border-strong);
  border-radius: var(--anvil-radius-menu);
  padding: 26px;
  text-align: center;
  color: var(--anvil-ink-5);
  font-size: 15px;
  background-color: var(--anvil-surface-alt);
}


/* ==========================================================================
   ANVIL SERVICE CATALOG
   ========================================================================== */

.service-catalog-hero {
  margin: 24px 0 0;
  border-radius: 22px;
  border: 1px solid var(--anvil-border-warm);
  background-color: transparent;
  background-image: linear-gradient(135deg, var(--anvil-surface-warm) 0%, var(--anvil-surface-warm-3) 100%);
  background-size: auto;
  background-repeat: no-repeat;
  padding: 38px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  min-height: 0;
  text-align: start;
}

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

.service-catalog-hero-copy {
  max-width: 520px;
}

.service-catalog-hero h1,
.service-catalog-hero h2,
.service-catalog-hero-title {
  font-family: var(--anvil-font-heading);
  font-weight: 800;
  font-size: 30px;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
  color: var(--anvil-ink);
}

.service-catalog-hero-subtitle {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--anvil-ink-3);
}

.service-catalog-hero-stats {
  display: flex;
  gap: 28px;
}
.service-catalog-hero-stat-value {
  display: block;
  font-family: var(--anvil-font-heading);
  font-weight: 800;
  font-size: 30px;
  color: var(--anvil-brand-ink);
  line-height: 1.2;
}
.service-catalog-hero-stat-label {
  display: block;
  font-size: 13.5px;
  color: var(--anvil-ink-4);
}


/* ==========================================================================
   ANVIL PROFILE, CONTRIBUTIONS & FOLLOWING
   ========================================================================== */

.profile-header,
.profile-info {
  background-color: var(--anvil-surface-alt);
  border-bottom: 1px solid var(--anvil-border);
}

.profile-name h1,
.profile-info h1 {
  font-family: var(--anvil-font-heading);
  font-weight: 800;
  font-size: 34px;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}

.profile-stats,
.profile-stats-activity {
  font-size: 13.5px;
  color: var(--anvil-ink-5);
}
.profile-stats strong,
.profile-stats-activity strong {
  color: var(--anvil-ink);
}

.contributions-list,
.subscriptions-table,
.my-activities-table {
  background-color: var(--anvil-surface);
  border: 1px solid var(--anvil-border);
  border-radius: var(--anvil-radius-card);
  overflow: hidden;
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}

.subscriptions-table th,
.my-activities-table th,
.requests-table th {
  background-color: var(--anvil-tint);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--anvil-ink-3);
  padding: 14px 24px;
  border: 0;
  text-align: start;
}

.subscriptions-table td,
.my-activities-table td,
.requests-table td {
  padding: 14px 24px;
  border: 0;
  border-top: 1px solid var(--anvil-border-cell);
  font-size: 15px;
  color: var(--anvil-ink-3);
}

.subscriptions-table tbody tr:hover,
.my-activities-table tbody tr:hover,
.requests-table tbody tr:hover {
  background-color: var(--anvil-row-hover);
}

.subscriptions-table td a,
.my-activities-table td a,
.requests-table td a {
  color: var(--anvil-brand-ink);
  font-weight: 600;
}


/* ==========================================================================
   ANVIL ERROR PAGE
   ========================================================================== */

.error-page {
  max-width: calc(var(--anvil-page-max) + var(--anvil-gutter) * 2);
  margin: 0 auto;
  padding: 70px var(--anvil-gutter) 120px;
  text-align: start;
}

.error-page-mark {
  font-family: var(--anvil-font-heading);
  font-weight: 800;
  font-size: 64px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--anvil-brand);
  margin: 0 0 10px;
}

.error-page h1 {
  font-family: var(--anvil-font-heading);
  font-weight: 800;
  font-size: 30px;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}

.error-page-description {
  margin: 0 0 18px;
  color: var(--anvil-ink-4);
  font-size: 17px;
}

.error-page-link {
  font-size: 16px;
  color: var(--anvil-brand-ink);
  text-decoration: underline;
}

/* ---- community post page: two-column body + left-hand vote rail ---- */
.post-container {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 48px;
  padding: 34px 0 80px;
}

.post-container > .post {
  flex: 1 1 480px;
  min-width: 0;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

.post-container > .post-sidebar {
  flex: 1 1 280px;
  max-width: 340px;
  margin: 0;
  background-color: var(--anvil-surface);
  border: 1px solid var(--anvil-border);
  border-radius: var(--anvil-radius-card);
  padding: 22px;
}
.post-sidebar-title {
  font-family: var(--anvil-font-heading);
  font-weight: 700;
  font-size: 17px;
  margin: 0 0 12px;
}
.post-sidebar .button {
  width: 100%;
  text-align: center;
}

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

.post-info-container {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

/* Copenhagen renders the vote group after the body; the design reads it as a
   left-hand rail, so it is reordered rather than re-templated. */
.post-actions-wrapper {
  order: -1;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding-top: 4px;
}
.post-info {
  flex: 1;
  min-width: 0;
}

.post-vote.vote {
  flex-direction: column;
  gap: 2px;
}
.post-vote .vote-up,
.post-vote .vote-down {
  width: 28px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--anvil-brand);
  background: none;
  border: 0;
}
.post-vote .vote-up svg {
  transform: rotate(180deg);
}
.post-vote .vote-sum {
  font-size: 15px;
  font-weight: 700;
  color: var(--anvil-ink);
}

.post-author {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 16px;
}
.post-avatar .user-avatar {
  width: 38px;
  height: 38px;
}
.post-meta a {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--anvil-brand-ink);
}
.post-meta .meta-data {
  font-size: 13px;
  color: var(--anvil-ink-5);
}

.post-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 24px;
  border: 0;
  padding: 0;
}

.post-share .share a,
.post-share .share li a {
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  color: var(--anvil-ink-5);
}
.post-share .share a:hover {
  background: none;
  color: var(--anvil-brand-ink);
}
.post-share .share a svg {
  width: 22px;
  height: 22px;
}

.post-comment-count,
.article-comment-count {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13.5px;
  color: var(--anvil-ink-5);
}

/* ---- community topic page ---- */
.topic-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
}

.community-footer {
  text-align: center;
  margin-top: 44px;
  padding-bottom: 80px;
}
.community-footer-title {
  font-family: var(--anvil-font-heading);
  font-weight: 800;
  font-size: 20px;
  margin: 0 0 14px;
}

.posts-list.striped-list {
  margin-bottom: 0;
}
.striped-list-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}


/* ==========================================================================
   ANVIL — page-specific corrections over the Copenhagen layer
   ========================================================================== */

/***** Error page *****/
/* The code line is a machine value, not a headline. */
.error-page > .error-page-mark {
  font-family: var(--anvil-font-mono);
  color: var(--anvil-steel-400);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.2;
  margin: 0 0 16px;
}
.error-page h1,
.error-page h2 {
  font-family: var(--anvil-font-heading);
  font-weight: 600;
  font-size: 52px;
  color: var(--anvil-ink);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  line-height: 1.0;
  margin: 0 0 18px;
  text-wrap: balance;
}
.error-page > p.error-page-description {
  color: var(--anvil-steel-500);
  font-size: 19px;
  line-height: 1.55;
  margin: 0 0 30px;
}
.error-page > a.error-page-link {
  font-family: var(--anvil-font-heading);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--anvil-on-brand);
  text-decoration: none;
}
.error-page > a.error-page-link:hover {
  text-decoration: none;
  color: var(--anvil-on-brand);
}
.error-page > a.error-page-link::before {
  content: none;
}

/***** Profile activity — cards, no timeline rule *****/
.profile-section .profile-activity-list,
.profile-activity-list {
  margin-top: 22px;
  margin-left: 0;
  border-left: 0;
  border-right: 0;
  gap: 18px;
  max-width: none;
}
[dir="rtl"] .profile-activity-list {
  border-right: 0;
  margin-right: 0;
}

.profile-activity {
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 0 14px;
  margin-left: 0;
  margin-right: 0;
}

.profile-activity .profile-activity-icon {
  position: static;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background-color: var(--anvil-avatar-bg);
  color: var(--anvil-brand-soft);
  border: 0;
  grid-row: 1 / 3;
  align-self: start;
}
.profile-activity .profile-activity-icon svg {
  width: 17px;
  height: 17px;
}

.profile-activity .profile-activity-header {
  grid-column: 2;
  grid-row: 1;
  margin: 0 0 6px;
  font-size: 14px;
  color: var(--anvil-ink-5);
}
.profile-activity .profile-activity-header .user-avatar {
  display: none;
}

.profile-activity .profile-activity-contribution,
.profile-activity .profile-contribution {
  grid-column: 2;
  grid-row: 2;
  background-color: var(--anvil-surface);
  border: 1px solid var(--anvil-border);
  border-radius: var(--anvil-radius-card-sm);
  padding: 18px 20px;
  margin: 0;
}
.profile-activity .profile-contribution {
  border-top: 1px solid var(--anvil-border);
  border-bottom: 1px solid var(--anvil-border);
  padding-left: 20px;
}

.profile-contribution-title a {
  font-size: 16.5px;
  font-weight: 700;
  color: var(--anvil-brand-ink);
}
.profile-contribution-breadcrumbs,
.profile-contribution-breadcrumbs a {
  font-size: 13.5px;
  color: var(--anvil-ink-5);
}
.profile-contribution-body {
  font-size: 15px;
  color: var(--anvil-prose-2);
  margin: 8px 0 0;
}

/***** Activity / profile tab bands sit on the page, not on a tinted strip *****/
.profile-nav,
.my-activities-sub-nav {
  background-color: transparent;
  border-bottom: 0;
  margin-top: 0;
  margin-bottom: 0;
}
.collapsible-nav-border {
  border-bottom: 1px solid var(--anvil-border);
}
.collapsible-nav-border .collapsible-nav-list li a,
.profile-nav .collapsible-nav-list li a,
.my-activities-nav .collapsible-nav-list li a {
  color: var(--anvil-ink-4);
}
@media (min-width: 768px) {
  .collapsible-nav-border .collapsible-nav-list li.current,
  .profile-nav .collapsible-nav-list li.current,
  .my-activities-nav .collapsible-nav-list li.current {
    border-bottom: 3px solid var(--anvil-brand);
  }
  .collapsible-nav-border .collapsible-nav-list li.current a,
  .profile-nav .collapsible-nav-list li.current a,
  .my-activities-nav .collapsible-nav-list li.current a {
    color: var(--anvil-brand-ink-dark);
  }
  .collapsible-nav-border .collapsible-nav-list li:hover,
  .profile-nav .collapsible-nav-list li:hover,
  .my-activities-nav .collapsible-nav-list li:hover {
    border-bottom: 3px solid var(--anvil-border-input);
  }
}

/***** Garden request list — the React bundle injects its own styles at
   runtime, so these hooks need !important to land. *****/
#main-content [data-garden-id="tables.table"] {
  background-color: #fff !important;
  border: 1px solid var(--anvil-border) !important;
  border-radius: 0 !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  overflow: hidden !important;
}

#main-content [data-garden-id="tables.header_row"],
#main-content [data-garden-id="tables.head"] {
  background-color: var(--anvil-steel-900) !important;
  border: 0 !important;
}

#main-content [data-garden-id="tables.header_cell"] {
  background-color: transparent !important;
  border: 0 !important;
  padding: 12px 18px !important;
  font-family: var(--anvil-font-heading) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: #fff !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
}
#main-content [data-garden-id="tables.header_cell"] svg,
#main-content [data-garden-id="tables.head"] svg {
  color: var(--anvil-brand) !important;
}

#main-content [data-garden-id="tables.row"] {
  background-color: transparent !important;
  border: 0 !important;
}
#main-content [data-garden-id="tables.row"]:hover {
  background-color: var(--anvil-steel-050) !important;
}

#main-content [data-garden-id="tables.cell"] {
  border: 0 !important;
  border-top: 1px solid var(--anvil-steel-100) !important;
  padding: 16px 18px !important;
  font-family: var(--anvil-font-mono) !important;
  font-size: 13px !important;
  letter-spacing: 0.02em !important;
  color: var(--anvil-steel-500) !important;
}
/* the subject column is prose, not a machine value */
#main-content [data-garden-id="tables.cell"]:first-child {
  font-family: var(--anvil-font-body) !important;
  font-size: 16.5px !important;
  color: var(--anvil-ink) !important;
  letter-spacing: normal !important;
}
#main-content [data-garden-id="tables.cell"] a {
  color: var(--anvil-ink) !important;
  font-weight: 400 !important;
  text-decoration: none !important;
}
#main-content [data-garden-id="tables.cell"] a:hover {
  color: var(--anvil-ink) !important;
  text-decoration: underline !important;
  text-decoration-color: var(--anvil-brand) !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 3px !important;
}

/* status pills inside the react tables */
#main-content [data-garden-id="tags.tag_view"] {
  border-radius: 0 !important;
  padding: 5px 9px !important;
  height: auto !important;
  min-height: 0 !important;
  font-family: var(--anvil-font-heading) !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  background-color: var(--anvil-status-open-bg) !important;
  color: var(--anvil-status-open-ink) !important;
  border: 0 !important;
}

/* react tabs → the 5px safety bar flush to a 2px ink rule */
#main-content [data-garden-id="tabs.tablist"] {
  display: flex !important;
  align-items: stretch !important;
  border-bottom: var(--anvil-rule) !important;
  gap: 0 !important;
}
#main-content [data-garden-id="tabs.tab"] {
  padding: 12px 18px !important;
  font-family: var(--anvil-font-heading) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  color: var(--anvil-steel-500) !important;
  border: 0 !important;
  border-bottom: 5px solid transparent !important;
  margin-bottom: -2px !important;
  background: none !important;
  border-radius: 0 !important;
}
#main-content [data-garden-id="tabs.tab"][aria-selected="true"] {
  color: var(--anvil-ink) !important;
  border-bottom-color: var(--anvil-brand) !important;
}

/* react search + filter row */
#main-content [data-garden-id="forms.faux_input"],
#main-content [data-garden-id="forms.input"] {
  border: 1px solid var(--anvil-border-input) !important;
  border-radius: 0 !important;
  background-color: #fff !important;
  font-family: var(--anvil-font-body) !important;
  font-size: 16px !important;
  color: var(--anvil-ink) !important;
  min-height: 0 !important;
  padding: 10px 12px !important;
}
#main-content [data-garden-id="forms.faux_input"]:focus-within {
  outline: 2px solid var(--anvil-brand) !important;
  outline-offset: -1px !important;
  border-color: var(--anvil-border-input) !important;
  box-shadow: none !important;
}
#main-content [data-garden-id="buttons.button"] {
  border-radius: 0 !important;
  font-family: var(--anvil-font-heading) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.16em !important;
  border: 1px solid var(--anvil-steel-900) !important;
  background-color: #fff !important;
  color: var(--anvil-ink) !important;
  box-shadow: none !important;
  padding: 11px 22px !important;
  min-height: 0 !important;
}
#main-content [data-garden-id="buttons.button"]:hover {
  background-color: var(--anvil-steel-050) !important;
  color: var(--anvil-ink) !important;
}
#main-content [data-garden-id="buttons.button"][data-garden-is-primary="true"],
#main-content [data-garden-id="buttons.button"].primary {
  background-color: var(--anvil-brand) !important;
  border-color: var(--anvil-brand) !important;
  color: var(--anvil-on-brand) !important;
}

/* the services band sits inside the page gutter rather than bleeding full width */
.section.service-catalog-hero {
  max-width: calc(var(--anvil-page-max) + var(--anvil-gutter) * 2);
  margin: 24px auto 0;
  width: auto;
  height: auto;
}
.service-catalog-hero + .container > .sub-nav {
  padding-top: 18px;
}
.container > h1 {
  font-family: var(--anvil-font-heading);
  font-weight: 800;
  font-size: 36px;
  margin: 12px 0 24px;
  letter-spacing: -0.01em;
}


/* ==========================================================================
   ANVIL SERVICE CATALOG & APPROVALS (React-rendered templates)
   These bundles inject their own styles at runtime, so the hooks below use
   !important where they compete with Garden's inline stylesheet.
   ========================================================================== */

.service-catalog-main-content {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 44px;
  padding-bottom: 80px;
}

.service-catalog-sidebar {
  flex: 0 1 250px;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.service-catalog-sidebar .sidenav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 11px;
  border: 0;
  font-size: 14.5px;
  font-weight: 400;
  color: var(--anvil-ink-2);
}
.service-catalog-sidebar .sidenav-item:hover {
  background-color: var(--anvil-tint-hover);
  text-decoration: none;
}
.service-catalog-sidebar .sidenav-item.current {
  background-color: var(--anvil-tint-strong);
  color: var(--anvil-brand-ink-dark);
  font-weight: 700;
}
.service-catalog-sidebar .doc-count {
  color: var(--anvil-ink-5);
}

.service-catalog-list {
  flex: 1 1 460px;
  min-width: 0;
  width: auto;
}

.service-catalog-list > h2 {
  font-family: var(--anvil-font-heading);
  font-weight: 800;
  font-size: 22px;
  margin: 0 0 16px;
}

.service-catalog-search [data-garden-id="forms.faux_input"],
.service-catalog-search input[type="text"] {
  max-width: 420px;
  border-radius: var(--anvil-radius-input) !important;
  border: 1px solid var(--anvil-border-input) !important;
  background-color: var(--anvil-surface) !important;
  padding: 10px 14px !important;
  font-size: 14.5px !important;
}

.service-catalog-list-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 20px 0 14px;
  font-size: 14px;
  color: var(--anvil-ink-5);
}

.service-catalog-items {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.service-catalog-item {
  margin: 0;
}

.service-catalog-item > a {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  box-sizing: border-box;
  background-color: var(--anvil-surface);
  border: 1px solid var(--anvil-border);
  border-radius: var(--anvil-radius-card-sm);
  padding: 20px;
  color: var(--anvil-ink) !important;
  transition: box-shadow 0.18s, border-color 0.18s;
}
.service-catalog-item > a:hover {
  border-color: var(--anvil-brand);
  box-shadow: var(--anvil-shadow-hover);
  text-decoration: none !important;
}

.service-catalog-item-icon,
.service-catalog-item-icon-large {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--anvil-radius-tile);
  background-color: var(--anvil-tint);
  color: var(--anvil-brand-soft);
}
.service-catalog-item-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
}
.service-catalog-item-icon .anvil-icon {
  font-size: 20px;
}
.service-catalog-item-icon-large {
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  border-radius: 18px;
}
.service-catalog-item-icon-large .anvil-icon {
  font-size: 32px;
}

.service-catalog-item-title {
  font-size: 16px;
  font-weight: 700;
}

/***** Service item page *****/
.service-catalog-item-layout,
.approval-request-layout {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 44px;
  padding: 34px 0 80px;
}

.service-catalog-item-main,
.approval-request-main {
  flex: 1 1 480px;
  min-width: 0;
}

.service-catalog-item-rail,
.approval-request-rail {
  flex: 1 1 280px;
  max-width: 340px;
}

.service-catalog-item-head {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 20px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--anvil-border-hairline);
}
.service-catalog-item-head h1 {
  font-family: var(--anvil-font-heading);
  font-weight: 800;
  font-size: 34px;
  margin: 0;
  letter-spacing: -0.01em;
}

.service-catalog-description {
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--anvil-prose-2);
  max-width: 640px;
}
.service-catalog-description ul {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.service-catalog-description ul li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15.5px;
  color: var(--anvil-prose);
}
.service-catalog-description ul li::before {
  content: "check_circle";
  font-family: "Material Symbols Sharp";
  font-feature-settings: "liga";
  font-size: 19px;
  line-height: 1.3;
  color: var(--anvil-brand);
  flex: 0 0 auto;
}

.service-catalog-item-card,
.approval-request-card {
  background-color: var(--anvil-surface);
  border: 1px solid var(--anvil-border);
  border-radius: var(--anvil-radius-card);
  padding: 24px;
}
.service-catalog-item-card-label {
  font-size: 13px;
  color: var(--anvil-ink-5);
  margin: 0 0 4px;
}
.service-catalog-item-card-value {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 18px;
}
.service-catalog-item-card .button {
  width: 100%;
}

/***** Approvals *****/
#approval-request-list h1,
#approval-request h1 {
  font-family: var(--anvil-font-heading);
  font-weight: 800;
  font-size: 36px;
  margin: 34px 0 18px;
  letter-spacing: -0.01em;
}
#approval-request h1 {
  font-size: 34px;
  margin: 0 0 6px;
}

.approval-request-summary {
  margin: 0 0 24px;
  color: var(--anvil-ink-4);
  font-size: 16.5px;
}

.approval-request-card h3 {
  font-family: var(--anvil-font-heading);
  font-weight: 700;
  font-size: 17px;
  margin: 0 0 16px;
}

.approval-request-details {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
}
.approval-request-details-stacked {
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}
.approval-request-details > div {
  min-width: 0;
}
.approval-request-details-stacked > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.approval-request-details dt {
  font-size: 13px;
  color: var(--anvil-ink-5);
  margin-bottom: 4px;
  font-weight: 400;
}
.approval-request-details-stacked dt {
  font-size: 14.5px;
  margin-bottom: 0;
}
.approval-request-details dd {
  margin: 0;
  font-size: 15px;
  color: var(--anvil-ink);
}
.approval-request-details-stacked dd {
  font-size: 14.5px;
  font-weight: 600;
}

.approval-request-actions {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}
.approval-request-actions .button-secondary,
button.button-secondary {
  background-color: var(--anvil-surface);
  border: 1px solid var(--anvil-border-strong);
  color: var(--anvil-prose-2);
  padding: 12px 24px;
}
.approval-request-actions .button-secondary:hover,
button.button-secondary:hover {
  background-color: var(--anvil-surface);
  border-color: var(--anvil-brand);
  color: var(--anvil-brand-ink);
}

#approval-request .comments {
  margin-top: 34px;
  padding-top: 24px;
}

.service-catalog-sidebar .sidenav-item {
  margin: 0;
}

/* Garden field labels follow Anvil's form label, not the display face */
#new-request-form label,
#approval-request label,
#service-catalog-item label {
  display: block;
  font-family: var(--anvil-font-body);
  font-weight: 700;
  font-size: 14.5px;
  color: var(--anvil-ink);
  margin-bottom: 7px;
}


/* ==========================================================================
   ANVIL RESPONSIVE
   ≥1024px  desktop — the navigation tree is docked as a 300px rail
   <1024px  tablet & mobile — the tree becomes an off-canvas drawer opened
            from the top bar, and every two-column body stacks
   ========================================================================== */

@media (max-width: 1023px) {
  .anvil-sidebar {
    position: fixed;
    inset: 0;
    width: auto;
    z-index: 60;
    pointer-events: none;
    visibility: hidden;
  }
  body.anvil-sidebar-open .anvil-sidebar {
    pointer-events: auto;
    visibility: visible;
  }

  .anvil-sidebar-scrim {
    display: block;
    position: absolute;
    inset: 0;
    background-color: rgba(43, 36, 25, 0.4);
    opacity: 0;
    transition: opacity 0.2s ease;
  }
  body.anvil-sidebar-open .anvil-sidebar-scrim {
    opacity: 1;
  }

  .anvil-sidebar-panel {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: min(320px, 88vw);
    transform: translateX(-100%);
    transition: transform 0.24s ease;
    box-shadow: var(--anvil-shadow-menu);
  }
  [dir="rtl"] .anvil-sidebar-panel {
    transform: translateX(100%);
  }
  body.anvil-sidebar-open .anvil-sidebar-panel {
    transform: translateX(0);
  }

  body.anvil-sidebar-open {
    overflow: hidden;
  }

  .anvil-sidebar-close {
    display: flex;
  }

  /* the wordmark returns to the top bar while the tree is hidden */
  .header {
    justify-content: space-between;
    gap: 16px;
    padding: 12px 24px;
  }
  .header .logo {
    display: block;
    margin-inline-end: auto;
  }
  .header .logo img {
    max-height: 34px;
    border-radius: 11px;
  }
  .header .logo span {
    font-size: 18px;
  }
  .anvil-sidebar-toggle {
    display: flex;
    margin-inline-end: 0;
    order: -1;
  }

  :root {
    --anvil-gutter: 24px;
  }

  /* two-column bodies stack */
  .article-container,
  .post-container,
  .topic-container,
  .request-container,
  .service-catalog-item-layout,
  .approval-request-layout,
  .service-catalog-main-content {
    gap: 32px;
  }
  .article-sidebar,
  .search-results-sidebar,
  .service-catalog-sidebar {
    flex: 1 1 100%;
    min-width: 0;
  }
  .post-container > .post-sidebar,
  .topic-sidebar,
  .request-sidebar,
  .service-catalog-item-rail,
  .approval-request-rail {
    flex: 1 1 100%;
    max-width: none;
  }

  .section-tree {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .blocks-list,
  .topics .blocks-list.topics-list,
  .service-catalog-items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero {
    padding: 56px var(--anvil-gutter) 48px;
  }
  .hero-title {
    font-size: 40px;
  }
  .hero-subtitle {
    font-size: 17px;
  }

  .page-header h1,
  .article-title,
  .my-activities-header h1,
  .my-activities-page h1,
  .container > h1 {
    font-size: 32px;
  }

  .article-relatives {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .approval-request-details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  a.community-image,
  .section.service-catalog-hero {
    padding: 28px 24px;
    gap: 24px;
  }
  .community-banner-title,
  .service-catalog-hero-title {
    font-size: 26px;
  }
}

@media (max-width: 767px) {
  :root {
    --anvil-gutter: 20px;
  }

  .header {
    padding: 10px 20px;
    gap: 12px;
  }
  .header .logo span {
    font-size: 17px;
  }

  .hero {
    padding: 44px var(--anvil-gutter) 40px;
  }
  .hero-title {
    font-size: 32px;
    line-height: 1.15;
  }
  .hero-subtitle {
    font-size: 16px;
    margin-bottom: 22px;
  }
  .hero-announcement {
    font-size: 12.5px;
    text-align: start;
  }
  .hero input[type="search"] {
    font-size: 16px;
    padding: 12px 16px 12px 46px;
  }
  .hero .hero-search .search::before {
    padding-inline-start: 14px;
    font-size: 20px;
  }

  .blocks-list,
  .topics .blocks-list.topics-list,
  .service-catalog-items {
    grid-template-columns: minmax(0, 1fr);
  }

  /* breadcrumbs above, full-width search below */
  .sub-nav {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding-top: 18px;
  }
  .sub-nav .search-container {
    width: 100%;
    max-width: none;
  }

  .page-header h1,
  .article-title,
  .my-activities-header h1,
  .my-activities-page h1,
  .container > h1,
  .post-header h1,
  .post-title,
  #approval-request-list h1,
  #approval-request h1,
  .service-catalog-item-head h1,
  .request-title h1,
  .request-title,
  .profile-name h1,
  .profile-info h1,
  .search-results-subheading,
  .search-results h1 {
    font-size: 28px;
    line-height: 1.2;
  }

  .section-content .page-header {
    grid-template-columns: minmax(0, 1fr);
  }
  .section-content .section-subscribe {
    grid-column: 1;
    grid-row: 3;
    justify-self: start;
    margin-top: 16px;
  }

  .article-header {
    grid-template-columns: minmax(0, 1fr);
  }
  .article-subscribe {
    grid-column: 1;
    justify-self: start;
    margin-top: 14px;
  }

  .post-header,
  .community .page-header,
  .page-header.community-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .approval-request-details {
    grid-template-columns: minmax(0, 1fr);
  }
  .approval-request-actions {
    flex-direction: column;
  }
  .approval-request-actions .button {
    width: 100%;
  }

  /* card rows breathe a little tighter on a phone */
  .section-content .section-list-item > a,
  .section-content > .article-list > .article-list-item > .article-list-link,
  .post-list-item,
  .striped-list-item {
    padding: 15px 18px;
  }

  a.community-image,
  .section.service-catalog-hero {
    padding: 24px 20px;
    flex-direction: column;
    align-items: flex-start;
  }
  .community-banner-stats,
  .service-catalog-hero-stats {
    width: 100%;
  }
  .community-banner-stat {
    flex: 1;
  }

  .recent-activity-item {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    row-gap: 4px;
  }
  .recent-activity-item-meta {
    grid-column: 1;
    grid-row: 3;
    justify-self: start;
  }

  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding-bottom: 48px;
  }

  .article-body {
    font-size: 16px;
  }
  .article-body pre {
    font-size: 13px;
  }

  /* wide content scrolls inside its own box rather than the page */
  .article-body table,
  .subscriptions-table,
  .my-activities-table,
  .requests-table,
  #main-content [data-garden-id="tables.table"] {
    display: block;
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
  }
  .article-body pre {
    overflow-x: auto;
  }

  .error-page {
    padding: 44px var(--anvil-gutter) 80px;
  }
  .error-page-mark {
    font-size: 52px;
  }
}

/* Touch targets: every interactive control clears 44px on a phone. */
@media (max-width: 767px) {
  .anvil-tree-row,
  .article-sidebar .collapsible-sidebar-body a.sidenav-item,
  .search-results-sidebar .sidenav-item,
  .service-catalog-sidebar .sidenav-item,
  .collapsible-nav-list li a,
  .header .dropdown-menu [role="menuitem"],
  .nav-wrapper-mobile .menu-list-mobile-items .item a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .anvil-sidebar-toggle,
  .anvil-sidebar-close,
  .menu-button-mobile {
    min-width: 44px;
    min-height: 44px;
  }
  .button,
  button.button,
  input[type="submit"],
  .article-vote,
  .subscriptions-subscribe button,
  .community-follow button,
  .article-subscribe button,
  .section-subscribe button,
  .split-button button {
    min-height: 44px;
  }
  .anvil-sidebar-search input[type="search"],
  .sub-nav input[type="search"] {
    min-height: 44px;
  }
  .promoted-articles-item a,
  .article-relatives a,
  .community-featured-posts .promoted-articles-item a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}

/* The request-list bundle renders a five-column Garden table that cannot fit a
   phone. It scrolls inside its own box so the page itself never does. */
@media (max-width: 1023px) {
  #main-content [data-garden-id="tables.table"] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  #main-content [data-garden-id="tables.head"],
  #main-content [data-garden-id="tables.body"] {
    display: table !important;
    width: max-content !important;
    min-width: 100% !important;
  }
}

/* Garden parks its hover tooltips in an absolutely-positioned wrapper that
   still counts toward the document's scroll width. They are hover affordances
   with no touch equivalent, so they come out entirely on small screens. */
@media (max-width: 1023px) {
  #main-content div:has(> [data-garden-id="tooltip.tooltip"]) {
    display: none !important;
  }
}

/* Garden keeps its closed floating menus mounted just off the right edge, which
   would otherwise let the page scroll sideways on a phone. `clip` contains them
   without creating a scroll container, so the sticky top bar keeps working. */
@media (max-width: 1023px) {
  /* `position: relative` makes #main-content the containing block for those
     absolutely-positioned menus, so the clip below actually reaches them.
     overflow-y stays visible, so nothing is cut off vertically. */
  body > main,
  #main-content,
  #service-catalog-main-content {
    position: relative;
    overflow-x: clip;
  }
}

/* Activities: the outer strip (Contributions / Following) is an underline tab
   row on the page background; the inner strip is the design's pill filter. */
.my-activities-nav {
  background-color: transparent;
  border-bottom: 0;
}

/* Activity tabs (Contributions / Following, and the type tabs beneath) use the
   handoff's tab treatment: flat uppercase labels on a 2px ink rule with a 5px
   safety bar under the current one — not pills. */
.my-activities-sub-nav {
  margin: 0 0 24px;
}
.my-activities-sub-nav .collapsible-nav-border,
.my-activities-nav .collapsible-nav-border {
  border-bottom: 1px solid var(--anvil-border);
}
.my-activities-sub-nav .collapsible-nav-list,
.my-activities-nav .collapsible-nav-list {
  border-bottom: 0;
  gap: 0;
  margin: 0;
}
.my-activities-sub-nav .collapsible-nav-list li,
.my-activities-nav .collapsible-nav-list li {
  border: 0;
}
.my-activities-sub-nav .collapsible-nav-list li a,
.my-activities-nav .collapsible-nav-list li a {
  padding: 14px 18px;
  border: 0;
  background: none;
  color: var(--anvil-steel-500);
  font-family: var(--anvil-font-heading);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 0;
}
.my-activities-sub-nav .collapsible-nav-list li a:hover,
.my-activities-nav .collapsible-nav-list li a:hover {
  border: 0;
  color: var(--anvil-ink);
  text-decoration: none;
}
.my-activities-sub-nav .collapsible-nav-list li.current a,
.my-activities-sub-nav .collapsible-nav-list li a[aria-current="page"],
.my-activities-nav .collapsible-nav-list li.current a,
.my-activities-nav .collapsible-nav-list li a[aria-current="page"] {
  background: none;
  border: 0;
  color: var(--anvil-ink);
}
@media (min-width: 768px) {
  .my-activities-sub-nav .collapsible-nav-list li.current,
  .my-activities-nav .collapsible-nav-list li.current {
    border-bottom: 5px solid var(--anvil-brand);
    margin-bottom: -1px;
  }
  .my-activities-sub-nav .collapsible-nav-list li:hover,
  .my-activities-nav .collapsible-nav-list li:hover {
    border-bottom: 5px solid var(--anvil-steel-150);
    margin-bottom: -1px;
  }
  .my-activities-sub-nav .collapsible-nav-list li.current:hover,
  .my-activities-nav .collapsible-nav-list li.current:hover {
    border-bottom-color: var(--anvil-brand);
  }
  .my-activities-sub-nav .collapsible-nav-list li.current a,
  .my-activities-nav .collapsible-nav-list li.current a {
    color: var(--anvil-ink);
  }
}

/* ---- community topic page header ---- */
.page-header:has(> .post-to-community) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 34px 0 8px;
}
.page-header:has(> .post-to-community) h1 {
  margin: 0;
  font-size: 36px;
}

.community-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin: 0 0 26px;
}
.community-header .page-header-description {
  margin: 0;
  font-style: normal;
  font-size: 16.5px;
  color: var(--anvil-ink-4);
  max-width: 620px;
}
.community-header .community-follow {
  flex: 0 0 auto;
}

.topic-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
}
.topic-filters {
  display: flex;
  align-items: center;
  gap: 10px;
}
.topic-filters .dropdown-toggle,
.topic-header .dropdown-toggle {
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--anvil-border);
  background-color: var(--anvil-surface);
  color: var(--anvil-ink-3);
  font-size: 13.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.topic-filters .dropdown-toggle:hover,
.topic-header .dropdown-toggle:hover {
  border-color: var(--anvil-brand);
  color: var(--anvil-brand-ink);
}

/* post rows: title, byline, then the vote/comment counts on the right */
.striped-list-item .post-overview-item,
.striped-list-item .meta-group {
  font-size: 13.5px;
  color: var(--anvil-ink-5);
}
.striped-list-item .striped-list-count {
  display: flex;
  align-items: center;
  gap: 24px;
  text-align: center;
}

/* With "Articles in this section" switched off the rail has nothing to hold,
   so it stops reserving a column. */
.article-sidebar:not(:has(*)) {
  display: none;
}

/* Copenhagen's collapsible "Articles in this section" rail on small screens:
   the toggle is absolutely positioned at the right edge of the heading row, so
   the heading needs room for it and a tap target that clears 44px. */
@media (max-width: 1023px) {
  .article-sidebar .collapsible-sidebar {
    position: relative;
  }
  .collapsible-sidebar-title.sidenav-title {
    display: block;
    padding-inline-end: 44px;
    margin-bottom: 0;
    min-height: 44px;
    line-height: 44px;
  }
  .collapsible-sidebar-toggle {
    top: 22px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .article-sidebar .collapsible-sidebar-body {
    padding-top: 8px;
  }
}


/* ==========================================================================
   ANVIL — review fixes
   ========================================================================== */

/* The attribution is a real control: an outlined block that fills with ink on
   hover. Copenhagen's floating-tag rule targets `a.anvil-attribution`, which
   outranks the plain class selector, so the states are written at that same
   specificity or the fill gets cancelled. */
a.anvil-attribution,
a.anvil-attribution:visited {
  color: var(--anvil-steel-300);
  background-color: var(--anvil-steel-900);
  text-decoration: none;
}
a.anvil-attribution:hover,
a.anvil-attribution:focus-visible {
  color: var(--anvil-steel-900);
  background-color: var(--anvil-steel-900);
  text-decoration: none;
}

/* The drawer toggle belongs to the tablet/mobile drawer only — on desktop the
   tree is docked and there is nothing to toggle. (The earlier hide sat above
   the button's own `display: flex`, so it lost on source order.) */
.anvil-sidebar-toggle {
  display: none;
}
@media (max-width: 1023px) {
  .anvil-sidebar-toggle {
    display: flex;
  }
}

/* Guide renders an empty <li> when a nav link is unavailable on the brand
   (e.g. Submit a request while the Service Catalog owns that entry point).
   Without this it still claims a 26px gap. */
.user-nav-list li:empty,
.menu-list-mobile-items li.item:empty {
  display: none;
}

/* Home category and community topic cards: the card treatment lives entirely on
   the <li>, so the <a> carries no border, background or shadow of its own —
   otherwise every card is drawn twice and only one of the two edges reacts to
   hover. (This rule used to zero the <li>'s border instead, which is what left
   the hovered card with no hairline at all.) */
.blocks-item-link,
.blocks-item-link:hover,
.blocks-item-link:focus-within,
.blocks-item-link:active {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* The 70px of dead space under the footer brand row was inherited from the
   prototype, where a floating attribution tag sat in it. Anvil's attribution
   lives in the sidebar, so the footer closes up. */
.footer-inner {
  padding: 26px var(--anvil-gutter) 32px;
}

/* Tab strips: hover changed the border on the <li> as well as the <a>, so the
   row grew by 3px and the labels jumped. Hover is a colour change only; the
   underline belongs to the current tab. */
@media (min-width: 768px) {
  .collapsible-nav-border .collapsible-nav-list li:hover,
  .profile-nav .collapsible-nav-list li:hover,
  .my-activities-nav .collapsible-nav-list li:hover,
  .my-activities-sub-nav .collapsible-nav-list li:hover {
    border-bottom: 0;
  }
}
.collapsible-nav-list li {
  border-bottom: 0;
}
.collapsible-nav-list li a:hover {
  color: var(--anvil-brand-ink);
  border-bottom-color: transparent;
}
.collapsible-nav-list li.current a:hover {
  border-bottom-color: var(--anvil-brand);
}
/* the pill strip keeps its own hover, without a shifting underline */
.my-activities-sub-nav .collapsible-nav-list li a:hover {
  border-color: var(--anvil-brand);
  color: var(--anvil-brand-ink);
}
.my-activities-sub-nav .collapsible-nav-list li.current a:hover {
  background-color: var(--anvil-ink-static);
  border-color: var(--anvil-ink-static);
  color: var(--anvil-on-dark);
}

/* Copenhagen zeroes the outer padding on the activities tables so they sit
   flush in its layout; Anvil wraps them in a card, so the first and last
   cells need their gutter back. */
.my-activities-table th:first-child,
.my-activities-table td:first-child,
.requests-table th:first-child,
.requests-table td:first-child {
  padding-inline-start: 24px;
}
.my-activities-table th:last-child,
.my-activities-table td:last-child,
.requests-table th:last-child,
.requests-table td:last-child {
  padding-inline-end: 24px;
}

/* Form labels: the rich-text editor ships its own visually-hidden label, which
   the blanket `display: block` above dragged into view. Only real field labels
   are restyled. */
#new-request-form label.ck-label,
#new-request-form .ck label,
#approval-request .ck label,
#service-catalog-item .ck label,
#new-request-form label.visibility-hidden,
#new-request-form label.visually-hidden,
#new-request-form label[class*="ScreenReader"],
#new-request-form label[class*="screen-reader"] {
  display: none;
}

/* Pages whose body ends in a form card or a table ran straight into the footer.
   Both form templates share `#main-content.form`; the activity pages end in a
   table inside `#main-content.requests`. */
#main-content.form {
  margin-bottom: 64px;
}
#main-content.requests,
#main-content.request-list,
#main-content > #approval-request-list,
#main-content > #approval-request,
.profile-section,
.my-activities-page {
  padding-bottom: 64px;
}

/* Community post page: the share row needs air above the comments rule, and
   the comment block needs the same rhythm as the article page. */
.post-footer {
  margin-top: 32px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--anvil-border-hairline);
}
.post .comment-overview {
  margin-top: 32px;
}
.post-container .comment-list {
  margin-bottom: 8px;
}
.post-container .comment-form,
.post-container .comment-container {
  margin-top: 24px;
}
.post-info-container {
  margin-bottom: 8px;
}

/* Post rows: the featured / pinned / status chips belong beside the title, not
   stacked between the title and the byline. */
.striped-list-info {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  text-align: start;
  gap: 4px 10px;
  min-width: 0;
}
.striped-list-info > .striped-list-title {
  flex: 0 1 auto;
}
.striped-list-info > .post-overview-item {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.striped-list-info > .meta-group {
  flex: 1 0 100%;
  margin: 0;
}
.status-label-featured,
.status-label-pinned {
  background-color: var(--anvil-tint);
  color: var(--anvil-brand-ink);
}

/* Copenhagen re-pads a hovered tab (`li:hover a:not([aria-current])`) to line it
   up with its own 4px hover underline. Anvil draws the underline on the anchor
   and the pill strip has no underline at all, so both keep their resting
   padding — otherwise the label grows and jumps under the cursor. */
@media (min-width: 768px) {
  .collapsible-nav-list li:hover a:not([aria-current="page"]) {
    padding: 11px 18px;
  }
  .my-activities-sub-nav .collapsible-nav-list li:hover a:not([aria-current="page"]) {
    padding: 7px 14px;
  }
}

/* Chalk pads the search input to clear its absolutely-positioned icon. Anvil's
   icon is a flex item beside the field, so the input starts at the edge. */
[dir] .anvil-sidebar-search input[type="search"],
[dir] .sub-nav .search-container input[type="search"] {
  padding: 0;
}
[dir] .hero .hero-search input[type="search"] {
  padding: 18px 16px;
}

/* the hero's drop shadow belongs to the field wrapper, not the form inside it —
   otherwise it draws a second, inset rectangle around the input */
.hero .hero-search .search,
.anvil-sidebar-search .search,
.sub-nav .search-container .search {
  box-shadow: none;
}


/* ==========================================================================
   ANVIL — review round 2
   ========================================================================== */

.anvil-attribution {
  justify-content: flex-start;
}

/* --------------------------------------------------------------------------
   Navigation tree: branches and leaves read differently
   Every active row used to get the same filled pill, so landing on a category
   looked identical to landing on an article and the tree lost its hierarchy.
   A leaf keeps the design's filled pill ("you are here"); a branch gets accent
   text and a brand rule instead, which suits a header-like row better.
   The hover wash is also pulled well clear of the active fill — at #F6ECD6 it
   was within a few values of #F6E4BE, which is what made it feel clunky.
   -------------------------------------------------------------------------- */
.anvil-tree-row:hover {
  background-color: var(--anvil-tree-hover);
  color: var(--anvil-ink);
}

/* branch (category / section) — accent text + rule, no band.
   The rule is a pseudo-element rather than an inset shadow: an inset shadow
   follows the row's 9px radius and bows into a bracket shape. */
.anvil-tree-row.is-active {
  position: relative;
  background-color: transparent;
  color: var(--anvil-brand-ink-dark);
  font-weight: 700;
}
.anvil-tree-row.is-active::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: 999px;
  background-color: var(--anvil-brand);
}
.anvil-tree-row.is-active:hover {
  background-color: var(--anvil-tree-hover);
  color: var(--anvil-brand-ink-dark);
}
.anvil-tree-row.is-active > .anvil-tree-caret {
  color: var(--anvil-brand);
}

/* leaf (article) — the design's filled pill, no rule */
.anvil-tree-row-leaf.is-active {
  background-color: var(--anvil-tint-strong);
  color: var(--anvil-brand-ink-dark);
  font-weight: 700;
}
.anvil-tree-row-leaf.is-active::before {
  content: none;
}
.anvil-tree-row-leaf.is-active:hover {
  background-color: var(--anvil-tint-strong);
  color: var(--anvil-brand-ink-dark);
}

/* Copenhagen gives the post avatar a 30px bottom margin; with align-items:
   center the flex row centres the margin box, so the circle rode 15px above
   the author's name. */
.post-author .avatar.post-avatar,
.post-author .post-avatar {
  margin-bottom: 0;
}

/* community topic list: the New post button needs air above the topic grid */
.page-header.community-header {
  margin: 34px 0 26px;
}
.topics .blocks-list.topics-list {
  margin-top: 6px;
}


/* ==========================================================================
   ANVIL DESIGN SYSTEM — the industrial layer
   Everything below re-cuts the shell and page furniture inherited from the
   base to the Anvil handoff: zero radius, the 2px section rule, condensed
   all-caps Oswald headings, Barlow prose, IBM Plex Mono for machine values,
   and the safety-yellow accent as the only colour that is not steel.
   ========================================================================== */

/***** 1. Global type & primitives *****/

html {
  scroll-padding-top: calc(var(--anvil-header-h) + 16px);
}

body {
  font-family: var(--anvil-font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--anvil-ink);
  background-color: var(--anvil-bg);
}

::selection {
  background: var(--anvil-brand);
  color: var(--anvil-steel-900);
}

::placeholder {
  color: var(--anvil-steel-400);
  opacity: 1;
}

/* Zero radius everywhere — no exceptions. */
*,
*::before,
*::after {
  border-radius: 0 !important;
}

/* Links are distinguished by weight and context, not colour; hover draws the
   safety underline. */
a {
  color: var(--anvil-link);
  text-decoration: none;
}
a:hover,
a:focus-visible {
  color: var(--anvil-link-hover);
  text-decoration: underline;
  text-decoration-color: var(--anvil-brand);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* One focus treatment for every field. */
input:focus,
textarea:focus,
select:focus {
  outline: 2px solid var(--anvil-brand);
  outline-offset: -1px;
  border-color: var(--anvil-border-input);
  box-shadow: none;
}
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--anvil-brand);
  outline-offset: 2px;
}

/* Every Oswald element is uppercase with positive tracking — the tracking is
   what makes the theme read as industrial, so it is set on the shared class
   rather than per component. */
h1, h2, h3, h4, h5, h6,
.anvil-eyebrow,
.anvil-kicker {
  font-family: var(--anvil-font-heading);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--anvil-ink);
  letter-spacing: 0.05em;
  line-height: 1.1;
}

h1 { font-size: 40px; letter-spacing: 0.015em; line-height: 1.0; }
h2 { font-size: 24px; letter-spacing: 0.07em; }
h3 { font-size: 17px; letter-spacing: 0.08em; }

/* The signature divider: a 2px ink rule under every major section heading
   and page title. */
.anvil-rule,
.section > h2,
.home-section > h2 {
  border-bottom: var(--anvil-rule);
  padding-bottom: 10px;
  margin-bottom: 20px;
}

/* Machine-generated values — IDs, dates, timestamps, counts, log output. */
.anvil-mono,
time,
.meta-data,
.request-id,
.article-votes-count {
  font-family: var(--anvil-font-mono);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--anvil-steel-400);
}

/***** 2. Shell — full-width header, sticky docs rail, pinned footer *****/
/* The base insets every body child behind a fixed sidebar. Anvil's header and
   footer are full-bleed instead, and the sidebar sits *below* the header in
   normal flow so the home hero can span the full width above it. script.js
   wraps main's children into .anvil-shell to give the sidebar and the content
   column a shared grid parent (Guide renders header/main/footer as siblings,
   so no such parent exists in the markup). */
@media (min-width: 1024px) {
  body {
    padding-left: 0;
  }
  [dir="rtl"] body {
    padding-right: 0;
  }
}

.anvil-shell {
  max-width: var(--anvil-page-max);
  margin: 0 auto;
}
@media (min-width: 1024px) {
  .anvil-shell {
    display: grid;
    grid-template-columns: var(--anvil-sidebar-width) minmax(0, 1fr);
    align-items: start;
  }
}

/***** Header *****/
.header {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--anvil-header-h);
  padding: 0;
  margin: 0;
  background-color: var(--anvil-steel-800);
  border-bottom: 3px solid var(--anvil-brand);
  display: flex;
  align-items: center;
  gap: 28px;
  max-width: none;
}
.header > .logo,
.header > .nav-wrapper-desktop,
.header > .nav-wrapper-mobile,
.header > .anvil-sidebar-toggle {
  position: relative;
  z-index: 1;
}
/* The 1520px content band inside a full-bleed bar. */
.header {
  padding-inline: max(28px, calc((100% - var(--anvil-page-max)) / 2 + 28px));
}

/* Logo lockup: safety square, wordmark, hairline divider, qualifier. */
.header .logo {
  margin: 0;
  height: auto;
  flex: 0 0 auto;
}
.header .logo a {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.header .logo a:hover {
  text-decoration: none;
}
.anvil-brand-mark {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  background-color: var(--anvil-brand);
  display: block;
  overflow: hidden;
}
.anvil-brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.anvil-brand-name {
  font-family: var(--anvil-font-heading);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
  line-height: 1;
}
.anvil-brand-overline {
  font-family: var(--anvil-font-heading);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--anvil-steel-400);
  white-space: nowrap;
  line-height: 1;
  border-left: 1px solid var(--anvil-steel-700);
  padding-left: 10px;
}

/* Nav sits hard right — desktop only; the drawer takes over below 768px. */
.header .nav-wrapper-desktop {
  margin-inline-start: auto;
}
/* Copenhagen's mobile nav is still shown at exactly 768px, so bringing the
   desktop nav in at `min-width: 768px` put both in the bar and pushed the
   header 38px past the viewport on every page. The desktop nav starts one
   pixel later, where the mobile one actually ends. */
@media (min-width: 769px) {
  .header .nav-wrapper-desktop {
    display: flex;
    align-items: center;
    gap: 26px;
  }
}
.user-nav-list {
  display: flex;
  align-items: center;
  gap: 26px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.user-nav-list > li {
  margin: 0;
}
.user-nav a {
  font-family: var(--anvil-font-heading);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--anvil-steel-150);
  white-space: nowrap;
  padding: 0;
  border: 0;
  background: none;
}
.user-nav a:hover {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: var(--anvil-brand);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
/* The primary call to action. */
.user-nav a.submit-a-request {
  background-color: var(--anvil-brand);
  color: var(--anvil-on-brand);
  padding: 9px 16px;
  font-weight: 600;
}
.user-nav a.submit-a-request:hover {
  background-color: var(--anvil-brand-darker);
  color: var(--anvil-on-brand);
  text-decoration: none;
}
/* Guide suppresses the label on instances where the link is unavailable. */
.user-nav-list > li:empty {
  display: none;
}

.header .ask-ai {
  font-family: var(--anvil-font-heading);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--anvil-steel-150);
  border: 1px solid var(--anvil-steel-700);
  padding: 8px 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
}
.header .ask-ai:hover {
  color: #fff;
  border-color: var(--anvil-brand);
  text-decoration: none;
}

/* User menu */
.header .user-info .dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--anvil-steel-700);
  background: none;
  padding: 6px 10px;
  color: #fff;
  cursor: pointer;
}
.header .user-info .dropdown-toggle > span {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--anvil-font-heading);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.header .user-avatar,
.header .user-info img {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  object-fit: cover;
  background-color: var(--anvil-steel-900);
}
.header .user-info .dropdown-toggle:hover {
  border-color: var(--anvil-brand);
}
.header .dropdown-menu {
  width: 228px;
  min-width: 228px;
  margin-top: 8px;
  padding: 6px 0;
  background-color: #fff;
  border: 1px solid var(--anvil-border-input);
  box-shadow: var(--anvil-shadow-menu);
  z-index: 50;
}
.header .dropdown-menu a {
  display: block;
  padding: 10px 16px;
  font-family: var(--anvil-font-body);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--anvil-ink);
}
.header .dropdown-menu a:hover {
  background-color: var(--anvil-steel-050);
  text-decoration: none;
}
.header .dropdown-menu .separator {
  height: 1px;
  background-color: var(--anvil-steel-100);
  margin: 6px 0;
}
.header .dropdown-menu a[href*="sign_out"],
.header .dropdown-menu a:last-child {
  color: var(--anvil-steel-500);
}

/***** Sidebar — the docs rail *****/
/* Below 1024px the rail is an off-canvas drawer (the base's rules, which this
   must not outrank) — so the docked treatment is scoped to the wide breakpoint
   rather than declared unconditionally. */
@media (min-width: 1024px) {
  .anvil-sidebar {
    position: sticky;
    top: var(--anvil-header-h);
    max-height: calc(100vh - var(--anvil-header-h));
    align-self: start;
    grid-column: 1;
    width: auto;
    z-index: 20;
  }
}
.anvil-sidebar-panel {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border-inline: 1px solid var(--anvil-border);
  border-inline-start: 1px solid var(--anvil-border);
  padding-bottom: 40px;
}
@media (min-width: 1024px) {
  /* A percentage max-height against an auto-height parent computes to `none`,
     which let a fully expanded tree run past the sticky box and over the
     footer. Bounding it to the viewport makes the rail scroll inside itself. */
  .anvil-sidebar-panel {
    max-height: calc(100vh - var(--anvil-header-h));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* Search is its own sticky sub-header inside the scrolling rail. */
.anvil-sidebar-search {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 18px 18px 14px;
  background-color: #fff;
  border: 0;
  border-bottom: 1px solid var(--anvil-steel-100);
}
.anvil-sidebar-search:focus-within {
  box-shadow: none;
}
.anvil-sidebar-search .search {
  flex: 1;
  min-width: 0;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background-color: var(--anvil-steel-025);
  border: 1px solid var(--anvil-border-input);
}
.anvil-sidebar-search .search:focus-within {
  outline: 2px solid var(--anvil-brand);
  outline-offset: -1px;
}
.anvil-sidebar-search .anvil-sidebar-search-icon {
  position: absolute;
  inset-inline-start: 28px;
  font-size: 20px;
  color: var(--anvil-steel-400);
  pointer-events: none;
  z-index: 1;
}
.anvil-sidebar-search .search input[type="search"] {
  padding: 0 0 0 28px;
  font-family: var(--anvil-font-body);
  font-size: 14px;
  border: 0;
  background: none;
  box-shadow: none;
  min-height: 0;
  height: auto;
}
.anvil-sidebar-search .search input[type="search"]:focus {
  outline: none;
}

/* Tree head: label + collapse-all */
/* The tree is the rail's only scrolling region, so the utility links and the
   "Powered by Artica" block stay in the viewport however deep the tree goes.
   `min-height: 0` is what makes the shrink legal inside a flex column — without
   it the box refuses to go below its content height and the rows paint over
   whatever follows (which is exactly what they used to do). Grow is off, so a
   short tree still sits directly above the links rather than being stretched
   to the bottom of the rail. */
.anvil-tree {
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0;
}
.anvil-tree-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px 10px;
}
.anvil-tree-overline {
  margin: 0;
  padding: 0;
  font-family: var(--anvil-font-heading);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--anvil-steel-500);
}
.anvil-tree-collapse {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--anvil-font-heading);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--anvil-steel-400);
}
.anvil-tree-collapse:hover {
  color: var(--anvil-ink);
}

/* Tree rows */
.anvil-tree-list {
  display: block;
}
.anvil-tree-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 8px 47px;
  font-family: var(--anvil-font-body);
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--anvil-steel-600);
  text-decoration: none;
  background: none;
}
.anvil-tree-row:hover {
  background-color: var(--anvil-tree-hover);
  color: var(--anvil-ink);
  text-decoration: none;
}
/* Level 0 — the category button */
.anvil-tree-row[data-level="0"] {
  padding: 13px 18px;
  border-top: 1px solid var(--anvil-steel-100);
  font-family: var(--anvil-font-heading);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--anvil-ink);
}
.anvil-tree-row[data-level="0"] .anvil-tree-caret {
  margin-inline-start: auto;
  color: var(--anvil-steel-400);
}
/* Level 2 — nested section */
.anvil-tree-row[data-level="2"],
.anvil-tree-row[data-level="3"] {
  padding: 7px 10px 7px 64px;
  font-size: 14px;
  color: var(--anvil-steel-500);
}
/* The active indicator: a 3px safety bar, inset. */
.anvil-tree-row.is-active {
  background: none;
  color: var(--anvil-ink);
  font-weight: 500;
}
.anvil-tree-row.is-active::before {
  content: "";
  position: absolute;
  inset-inline-start: 26px;
  top: 6px;
  bottom: 6px;
  width: 3px;
  background-color: var(--anvil-brand);
}
.anvil-tree-row[data-level="2"].is-active::before,
.anvil-tree-row[data-level="3"].is-active::before {
  inset-inline-start: 44px;
  top: 5px;
  bottom: 5px;
}
.anvil-tree-row[data-level="0"].is-active::before {
  inset-inline-start: 0;
  top: 0;
  bottom: 0;
}
.anvil-tree-caret {
  flex: 0 0 auto;
  font-size: 20px;
  color: var(--anvil-steel-400);
}
/* Category rows use add/remove; section rows use the chevron pair. */
.anvil-tree-row[data-level="0"] > .anvil-tree-caret::before {
  content: "add";
}
.anvil-tree-row[data-level="0"][aria-expanded="true"] > .anvil-tree-caret::before {
  content: "remove";
}
.anvil-tree-row[data-level="1"] > .anvil-tree-caret,
.anvil-tree-row[data-level="2"] > .anvil-tree-caret {
  order: 2;
  margin-inline-start: auto;
  width: 34px;
  justify-content: center;
  display: flex;
}
.anvil-tree-row[data-level="1"] > .anvil-tree-caret::before,
.anvil-tree-row[data-level="2"] > .anvil-tree-caret::before {
  content: "expand_more";
}
.anvil-tree-row[data-level="1"][aria-expanded="true"] > .anvil-tree-caret::before,
.anvil-tree-row[data-level="2"][aria-expanded="true"] > .anvil-tree-caret::before {
  content: "expand_less";
}
/* Category glyph */
.anvil-tree-icon {
  flex: 0 0 auto;
  font-size: 19px;
  color: var(--anvil-steel-500);
}

/***** Sidebar utility links *****/
.anvil-sidebar-utility {
  border-top: 1px solid var(--anvil-steel-100);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
}
.anvil-utility-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-family: var(--anvil-font-body);
  font-size: 14.5px;
  color: var(--anvil-steel-600);
  text-decoration: none;
}
.anvil-utility-link:hover {
  color: var(--anvil-ink);
}
.anvil-utility-link::before {
  font-family: "Material Symbols Sharp";
  font-weight: normal;
  font-style: normal;
  font-size: 19px;
  line-height: 1;
  flex: 0 0 19px;
  color: var(--anvil-steel-400);
  font-feature-settings: "liga";
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}
.anvil-utility-home::before { content: "home"; }
.anvil-utility-community::before { content: "forum"; }
.anvil-utility-services::before { content: "handyman"; }
.anvil-utility-requests::before { content: "confirmation_number"; }
.anvil-sidebar-utility a:empty {
  display: none;
}

/***** "Powered by Artica" — hazard block *****/
.anvil-sidebar-footer {
  border-top: 1px solid var(--anvil-steel-100);
  margin-top: 6px;
  padding: 16px 18px 4px;
  background: none;
}
/* superseded by the attribution control block further down */
.anvil-attribution {
  text-decoration: none;
  box-shadow: none;
}
.anvil-attribution:hover {
  text-decoration: none;
}
.anvil-attribution-stripe {
  display: none;
}
.anvil-attribution-text {
  padding: 2px 0;
  font-family: var(--anvil-font-heading);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.2;
}
.anvil-attribution-text b {
  color: inherit;
  font-weight: 600;
}

/***** Footer *****/
.footer {
  margin-top: auto;
  background-color: var(--anvil-steel-800);
  border-top: 3px solid var(--anvil-brand);
  padding: 34px 0;
  max-width: none;
}
.footer-inner {
  max-width: var(--anvil-page-max);
  margin: 0 auto;
  padding-inline: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.footer-brand:hover {
  text-decoration: none;
}
.footer-brand-logo {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  background-color: var(--anvil-brand);
  display: block;
}
.footer-brand-name {
  font-family: var(--anvil-font-heading);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
}
.footer-brand-qualifier {
  color: #fff;
}
.footer-language-selector .dropdown-toggle,
.footer-locale-static {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: none;
  padding: 0;
  font-family: var(--anvil-font-heading);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--anvil-steel-400);
  cursor: pointer;
}
.footer-language-selector .dropdown-toggle:hover {
  color: #fff;
}
.footer .footer-language-icon {
  font-size: 17px;
}

/***** Shell columns *****/
main {
  padding: 0;
  margin: 0;
  max-width: none;
  width: 100%;
}
.anvil-main-col {
  min-width: 0;
  padding: 0 var(--anvil-gutter) 110px;
}
@media (min-width: 1024px) {
  .anvil-main-col {
    grid-column: 2;
  }
}
/* Before the shell is assembled the sidebar is a plain block; keeping it out
   of view avoids a flash of an unstyled rail above the content. */
html:not(.anvil-shell-ready) .anvil-sidebar {
  display: none;
}

/***** Home hero — full-bleed dark band above the grid *****/
.hero {
  margin: 0;
  padding: 76px 28px 84px;
  background-color: var(--anvil-steel-800);
  background-image: var(--anvil-dark-texture);
  border-bottom: 1px solid var(--anvil-steel-700);
  border-radius: 0;
  box-shadow: none;
  text-align: start;
}
.hero-inner {
  max-width: var(--anvil-page-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 60px;
  align-items: end;
}
@media (max-width: 1023px) {
  .hero {
    padding: 48px 24px 52px;
  }
  .hero-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    align-items: start;
  }
}

/* Eyebrow: a 44x8 safety bar then the label. */
.hero-announcement {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 22px;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  font-family: var(--anvil-font-heading);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--anvil-brand);
}
.hero-announcement .anvil-icon {
  display: none;
}
.hero-announcement::before {
  content: "";
  width: 44px;
  height: 8px;
  flex: 0 0 44px;
  background-color: var(--anvil-brand);
}

.hero-title {
  font-family: var(--anvil-font-heading);
  font-size: 68px;
  line-height: 0.98;
  font-weight: 600;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: #fff;
  text-wrap: balance;
  margin: 0 0 22px;
}
.hero-subtitle {
  font-family: var(--anvil-font-body);
  font-size: 18px;
  line-height: 1.55;
  font-weight: 400;
  color: var(--anvil-steel-300);
  max-width: 52ch;
  margin: 0;
}

/* Search block sits in the hero's right column. */
.hero-search {
  margin: 0;
  max-width: none;
}
.hero-search::before {
  content: attr(data-label);
  display: block;
  font-family: var(--anvil-font-heading);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--anvil-steel-400);
  margin-bottom: 12px;
}
.hero-search .search-icon {
  display: none;
}
.hero .search {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin: 0;
  padding: 0;
  background-color: #fff;
  border: 1px solid var(--anvil-brand);
}
.hero .search::before {
  content: "search";
  font-family: "Material Symbols Sharp";
  font-size: 24px;
  line-height: 1;
  color: var(--anvil-steel-500);
  align-self: center;
  padding-inline-start: 16px;
  flex: 0 0 auto;
  font-feature-settings: "liga";
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}
.hero .search input[type="search"] {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  box-shadow: none;
  padding: 18px 16px;
  font-family: var(--anvil-font-body);
  font-size: 17px;
  color: var(--anvil-ink);
  height: auto;
  min-height: 0;
}
.hero .search input[type="search"]:focus {
  outline: none;
}
.hero .search input[type="submit"] {
  flex: 0 0 auto;
  border: 0;
  background-color: var(--anvil-steel-800);
  color: #fff;
  padding: 0 26px;
  font-family: var(--anvil-font-heading);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
}
.hero .search input[type="submit"]:hover {
  background-color: var(--anvil-steel-900);
}

/***** 3. Home page *****/

.hero-search-label {
  font-family: var(--anvil-font-heading);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--anvil-steel-400);
  margin: 0 0 12px;
  border: 0;
  padding: 0;
}

/* Section headings: the 2px ink rule with an optional mono count beside the
   title. */
.section-title,
.section > h2,
.home-section > h2,
.knowledge-base > .articles > h2 {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  font-family: var(--anvil-font-heading);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--anvil-ink);
  border-bottom: var(--anvil-rule);
  padding: 0 0 10px;
  margin: 0 0 22px;
}
.section-count {
  font-family: var(--anvil-font-mono);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--anvil-steel-400);
}

.container {
  max-width: none;
  padding: 0;
  margin: 0;
}
.section:not(.hero),
.home-section {
  margin: 0 0 46px;
  padding: 0;
}
.knowledge-base {
  padding-top: 30px;
}

/***** Category grid — 1px gap lines, no shadows *****/
.blocks-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background-color: var(--anvil-border);
  border: 1px solid var(--anvil-border);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 1200px) {
  .blocks-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 700px) {
  .blocks-list {
    grid-template-columns: minmax(0, 1fr);
  }
}
.blocks-item {
  margin: 0;
  padding: 0;
  background-color: #fff;
  box-shadow: none;
  border: 0;
}
.blocks-item-link {
  display: flex;
  flex-direction: column;
  min-height: 196px;
  padding: 26px 24px 24px;
  height: 100%;
  text-decoration: none;
  background: none;
  border: 0;
  box-shadow: none;
}
.blocks-item-link:hover {
  text-decoration: none;
  background-color: var(--anvil-steel-050);
}
.blocks-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.blocks-item-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  background-color: var(--anvil-steel-900);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}
.blocks-item-icon .anvil-icon {
  font-size: 22px;
  color: var(--anvil-brand);
}
.blocks-item-code {
  font-family: var(--anvil-font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--anvil-steel-400);
}
.blocks-item-title {
  font-family: var(--anvil-font-heading);
  font-size: 20px;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--anvil-ink);
  margin: 0 0 10px;
}
.blocks-item-description {
  font-family: var(--anvil-font-body);
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--anvil-steel-500);
  margin: 0;
}
.blocks-item-meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: auto;
  padding-top: 18px;
}
.blocks-item-meta .blocks-item-count {
  font-family: var(--anvil-font-heading);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--anvil-steel-500);
}
.blocks-item-meta .blocks-item-count + .blocks-item-count::before {
  content: "·";
  margin-inline-end: 8px;
  color: var(--anvil-steel-300);
}

/***** Promoted articles — safety square bullets *****/
.promoted-articles {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.promoted-articles-item {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--anvil-steel-100);
}
.promoted-articles-item a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 2px;
  font-family: var(--anvil-font-body);
  font-size: 16.5px;
  color: var(--anvil-ink);
  text-decoration: none;
}
.promoted-articles-item a::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  background-color: var(--anvil-brand);
}
.promoted-articles-item a:hover {
  text-decoration: underline;
  text-decoration-color: var(--anvil-brand);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/***** Community section *****/
.home-section.community {
  position: relative;
}
.home-section.community > h2 {
  margin-bottom: 0;
}
.community-link {
  display: block;
  margin: -34px 0 22px;
  text-align: end;
  font-family: var(--anvil-font-heading);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--anvil-steel-500);
}

/***** Community banner — all CSS, no artwork *****/
.community-image {
  position: relative;
  display: block;
  overflow: hidden;
  min-height: 264px;
  padding: 52px 44px 44px;
  background-color: var(--anvil-steel-800);
  background-image:
    radial-gradient(120% 140% at 88% 12%, rgba(255, 209, 0, 0.16), transparent 58%),
    var(--anvil-dark-texture);
  border: 1px solid var(--anvil-steel-900);
  text-decoration: none;
}
.community-image:hover {
  text-decoration: none;
}
.community-banner-hazard {
  position: absolute;
  top: 0;
  inset-inline: 0;
  height: 10px;
  background-image: var(--anvil-hazard-wide);
}
.community-image::after {
  content: "";
  position: absolute;
  bottom: 0;
  inset-inline: 0;
  height: 2px;
  background-color: var(--anvil-steel-700);
}
.community-banner-geo {
  position: absolute;
  display: block;
  pointer-events: none;
}
.community-banner-geo-1 {
  width: 300px;
  height: 300px;
  border: 26px solid rgba(213, 219, 225, 0.09);
  inset-inline-end: -40px;
  bottom: -70px;
}
.community-banner-geo-2 {
  width: 170px;
  height: 170px;
  border: 16px solid rgba(255, 209, 0, 0.2);
  inset-inline-end: 56px;
  bottom: -24px;
  transform: rotate(45deg);
}
.community-banner-copy {
  position: relative;
  z-index: 1;
  display: block;
  max-width: 660px;
}
.community-banner-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--anvil-font-heading);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--anvil-brand);
  margin-bottom: 18px;
}
.community-banner-eyebrow::before {
  content: "";
  width: 44px;
  height: 8px;
  flex: 0 0 44px;
  background-color: var(--anvil-brand);
}
.community-banner-title {
  display: block;
  font-family: var(--anvil-font-heading);
  font-size: 44px;
  line-height: 1.02;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #fff;
  text-wrap: balance;
  margin-bottom: 16px;
}
.community-banner-subtitle {
  display: block;
  font-family: var(--anvil-font-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--anvil-steel-300);
  margin-bottom: 26px;
  max-width: 52ch;
}
.community-banner-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background-color: var(--anvil-brand);
  color: var(--anvil-on-brand);
  padding: 13px 22px;
  font-family: var(--anvil-font-heading);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.community-image:hover .community-banner-cta {
  background-color: var(--anvil-brand-darker);
}
.community-banner-cta-icon::before {
  content: "arrow_forward";
}
.community-banner-cta-icon {
  font-size: 18px;
}
/* the mono stat tag, top right */
.community-banner-stats {
  position: absolute;
  top: 24px;
  inset-inline-end: 22px;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  padding: 0;
}
.community-banner-stat {
  display: flex;
  align-items: baseline;
  gap: 5px;
  background: none;
  border: 0;
  padding: 0;
  box-shadow: none;
  font-family: var(--anvil-font-mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--anvil-steel-400);
}
.community-banner-stat + .community-banner-stat::before {
  content: "·";
  margin-inline-end: 5px;
}
.community-banner-stat-value,
.community-banner-stat-label {
  font-family: inherit;
  font-size: inherit;
  font-weight: 400;
  color: inherit;
  letter-spacing: inherit;
}

/***** Recent activity *****/
.recent-activity-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.recent-activity-item {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px 2px;
  margin: 0;
  border-bottom: 1px solid var(--anvil-steel-100);
}
.recent-activity-item-parent {
  display: block;
  font-family: var(--anvil-font-heading);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--anvil-steel-500);
  margin-bottom: 3px;
}
.recent-activity-item-link {
  font-family: var(--anvil-font-body);
  font-size: 16.5px;
  color: var(--anvil-ink);
}
.recent-activity-item-link,
.recent-activity-item-parent {
  text-decoration: none;
}
.recent-activity-item-meta {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 0 0 auto;
}
.recent-activity-item-time {
  font-family: var(--anvil-font-mono);
  font-size: 12px;
  letter-spacing: 0.03em;
  color: var(--anvil-steel-400);
  white-space: nowrap;
}
.recent-activity-item-comment {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--anvil-font-mono);
  font-size: 12px;
  color: var(--anvil-steel-400);
}
.recent-activity-controls {
  padding-top: 16px;
}
.recent-activity-controls a,
.see-more-link {
  font-family: var(--anvil-font-heading);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--anvil-ink);
}

/***** 4. Corrections over the inherited layer *****/

/* Hero: explicit placement — the copy stack owns column 1, the search block
   owns column 2 and bottom-aligns with it. */
.hero-inner {
  grid-template-rows: auto auto 1fr;
}
.hero-announcement { grid-area: 1 / 1 / 2 / 2; }
.hero-title        { grid-area: 2 / 1 / 3 / 2; }
.hero-subtitle     { grid-area: 3 / 1 / 4 / 2; }
.hero-search {
  grid-area: 1 / 2 / 4 / 3;
  align-self: end;
  display: block;
  width: 100%;
  max-width: none;
  position: static;
}
@media (max-width: 1023px) {
  .hero-inner {
    grid-template-rows: auto;
  }
  .hero-announcement,
  .hero-title,
  .hero-subtitle,
  .hero-search {
    grid-area: auto;
  }
}

/* Category grid: auto-fit so a help center with fewer than three categories
   never leaves a dead track showing the gap-line colour. */
.blocks-list {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
@media (max-width: 700px) {
  .blocks-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Recent activity heading takes the section rule like every other h2. */
.recent-activity-header {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  font-family: var(--anvil-font-heading);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-align: start;
  color: var(--anvil-ink);
  border-bottom: var(--anvil-rule);
  padding: 0 0 10px;
  margin: 0 0 22px;
}
.recent-activity-item h3 {
  margin: 0;
  display: block;
  min-width: 0;
  border: 0;
  padding: 0;
}
.recent-activity-item-parent {
  white-space: nowrap;
}

/* "Join the conversation" sits on the community rule, hard right. */
.home-section.community > h2 {
  margin-bottom: 22px;
}
.community-link {
  position: absolute;
  top: 0;
  inset-inline-end: 0;
  margin: 0;
  padding-bottom: 10px;
  line-height: 1.1;
}
.community-link:hover {
  color: var(--anvil-ink);
}

/* The wordmark sits on the dark bar — the base tinted it for a light header. */
.header .logo .anvil-brand-name {
  color: #fff;
}
.header .logo .anvil-brand-overline {
  color: var(--anvil-steel-400);
}

/* Hero rows are content-sized; the search block bottom-aligns against the
   copy stack rather than stretching a spare track. */
.hero-inner {
  grid-template-rows: auto auto auto;
}

/* Recent activity: Guide renders the parent link, the title and the meta as
   three siblings — stack the first two and let the meta span both rows. */
.recent-activity-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  column-gap: 20px;
  align-items: center;
}
/* Guide nests the topic link inside the h3 and leaves the title and meta as
   siblings — the h3 is row one, the title row two, the meta spans both. */
.recent-activity-item h3 {
  grid-area: 1 / 1 / 2 / 2;
}
.recent-activity-item .recent-activity-item-link {
  grid-area: 2 / 1 / 3 / 2;
}
.recent-activity-item .recent-activity-item-meta {
  grid-area: 1 / 2 / 3 / 3;
}

/***** 5. Inner pages — shared furniture *****/

/* Breadcrumbs */
.breadcrumbs {
  margin: 20px 0 4px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  list-style: none;
}
.breadcrumbs li {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-family: var(--anvil-font-heading);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--anvil-steel-900);
}
.breadcrumbs li a {
  color: var(--anvil-steel-500);
  text-decoration: none;
}
.breadcrumbs li a:hover {
  color: var(--anvil-ink);
}
.breadcrumbs li + li::before {
  content: "chevron_right";
  font-family: "Material Symbols Sharp";
  font-size: 14px;
  line-height: 1;
  color: var(--anvil-steel-300);
  margin: 0;
  padding: 0;
  font-feature-settings: "liga";
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

/* Page headers */
.page-header,
.section-header,
.category-header,
.post-header,
.request-header {
  border-bottom: var(--anvil-rule);
  padding-bottom: 24px;
  margin: 34px 0 26px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}
.page-header h1,
.section-header h1,
.category-header h1 {
  margin: 0;
  font-size: 40px;
  letter-spacing: 0.015em;
  line-height: 1.0;
}

/***** Buttons *****/
.button,
.button-large,
button.button,
a.button,
input[type="submit"],
[data-garden-id="buttons.button"] {
  font-family: var(--anvil-font-heading);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: 0;
  box-shadow: none;
  padding: 11px 22px;
  border: 1px solid var(--anvil-steel-900);
  background-color: transparent;
  color: var(--anvil-ink);
  cursor: pointer;
}
.button:hover,
a.button:hover,
button.button:hover {
  background-color: var(--anvil-steel-050);
  color: var(--anvil-ink);
  text-decoration: none;
}
/* Primary — the safety accent */
.button-primary,
input[type="submit"],
.button.button-primary,
.form .form-field input[type="submit"] {
  background-color: var(--anvil-brand);
  border-color: var(--anvil-brand);
  color: var(--anvil-on-brand);
}
.button-primary:hover,
input[type="submit"]:hover {
  background-color: var(--anvil-brand-darker);
  border-color: var(--anvil-brand-darker);
  color: var(--anvil-on-brand);
}
/* Secondary outline */
.button-secondary {
  border-color: var(--anvil-border-input);
  color: var(--anvil-steel-500);
  background-color: #fff;
}

/***** Follow / subscribe toggles *****/
.subscribe-button,
.article-subscribe button,
.section-subscribe button,
.community-follow button,
.post-subscribe button,
.topic-subscribe button {
  font-family: var(--anvil-font-heading);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background-color: #fff;
  border: 1px solid var(--anvil-steel-900);
  color: var(--anvil-ink);
  padding: 11px 20px;
  border-radius: 0;
  box-shadow: none;
}
.subscribe-button:hover,
.article-subscribe button:hover,
.section-subscribe button:hover {
  background-color: var(--anvil-steel-050);
}

/***** Status pills *****/
.status-label,
.request-status,
[data-garden-id="tags.tag_view"] {
  font-family: var(--anvil-font-heading);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 9px;
  border-radius: 0;
  border: 0;
  display: inline-block;
  line-height: 1.2;
}
.status-label-open,
.status-label-new {
  background-color: var(--anvil-status-open-bg);
  color: var(--anvil-status-open-ink);
}
.status-label-pending,
.status-label-hold {
  background-color: var(--anvil-status-pending-bg);
  color: var(--anvil-status-pending-ink);
}
.status-label-solved,
.status-label-closed,
.status-label-answered {
  background-color: var(--anvil-status-solved-bg);
  color: var(--anvil-status-solved-ink);
}

/***** Tabs — 5px safety bar flush to the rule *****/
.tab-list,
.sub-nav-list,
.profile-nav-list,
.contributions-nav {
  display: flex;
  gap: 0;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
  border-bottom: var(--anvil-rule);
}
.tab-list li,
.sub-nav-list li {
  margin: 0;
}
.tab-list a,
.sub-nav-list a,
.tab-list button {
  position: relative;
  display: block;
  padding: 12px 18px;
  font-family: var(--anvil-font-heading);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--anvil-steel-500);
  border: 0;
  background: none;
  text-decoration: none;
}
.tab-list a:hover,
.sub-nav-list a:hover {
  color: var(--anvil-ink);
  text-decoration: none;
}
.tab-list a.is-active,
.tab-list li.current a,
.sub-nav-list a.is-active,
.sub-nav-list li.current a,
[aria-selected="true"].tab-list-item {
  color: var(--anvil-ink);
}
.tab-list a.is-active::after,
.tab-list li.current a::after,
.sub-nav-list li.current a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -2px;
  height: 5px;
  background-color: var(--anvil-brand);
}

/***** Forms *****/
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="tel"],
input[type="number"],
textarea,
select {
  font-family: var(--anvil-font-body);
  font-size: 16.5px;
  color: var(--anvil-ink);
  background-color: #fff;
  border: 1px solid var(--anvil-border-input);
  border-radius: 0;
  box-shadow: none;
  padding: 13px 14px;
}
label,
.form-field > label,
.form-field legend {
  font-family: var(--anvil-font-heading);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--anvil-ink);
}
.form-field {
  margin-bottom: 22px;
}
.form .form-field .nesty-input,
.form-field .nesty-input {
  border: 1px solid var(--anvil-border-input);
  border-radius: 0;
}
/* Attachment dropzone */
.form-field.attachments .dropzone,
.upload-dropzone {
  border: 2px dashed var(--anvil-border-input);
  background-color: #fff;
  padding: 26px;
  text-align: center;
  border-radius: 0;
}

/***** Tables — dark header rows, mono first column *****/
table,
.table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--anvil-font-body);
  font-size: 15.5px;
}
thead th,
.table thead th {
  background-color: var(--anvil-steel-900);
  color: #fff;
  font-family: var(--anvil-font-heading);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 12px 18px;
  text-align: start;
  border: 0;
}
tbody td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--anvil-steel-100);
  border-top: 0;
}

/***** Empty states *****/
.no-results,
.empty-state {
  border: 1px solid var(--anvil-border);
  background-color: #fff;
  padding: 44px;
  text-align: center;
  font-family: var(--anvil-font-body);
  font-size: 16.5px;
  color: var(--anvil-steel-500);
}
.no-results-icon .anvil-icon {
  font-size: 44px;
  color: var(--anvil-steel-200);
}

/***** 6. Article page *****/

.article-sidebar {
  flex: 0 1 216px;
  min-width: 196px;
}
@media (min-width: 1024px) {
  .article-sidebar {
    position: sticky;
    top: calc(var(--anvil-header-h) + 24px);
  }
}
.article-sidebar .article-relatives h3,
.sidenav-title {
  font-family: var(--anvil-font-heading);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--anvil-ink);
  border-bottom: var(--anvil-rule);
  padding-bottom: 10px;
  margin: 0 0 4px;
}
.sidenav-item {
  position: relative;
  display: block;
  padding: 10px 0 10px 12px;
  border-bottom: 1px solid var(--anvil-steel-100);
  font-family: var(--anvil-font-body);
  font-size: 14.5px;
  color: var(--anvil-steel-600);
  border-radius: 0;
  background: none;
}
.sidenav-item:hover {
  background: none;
  color: var(--anvil-ink);
}
.sidenav-item.current-article,
.sidenav-item[aria-current="page"] {
  background: none;
  color: var(--anvil-ink);
  font-weight: 500;
}
.sidenav-item.current-article::before,
.sidenav-item[aria-current="page"]::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background-color: var(--anvil-brand);
}

.article {
  flex: 1 1 480px;
  max-width: 780px;
}
.article-title,
.article h1 {
  font-family: var(--anvil-font-heading);
  font-size: 40px;
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  text-wrap: pretty;
  margin: 0 0 20px;
}
.article-author {
  display: flex;
  align-items: center;
  gap: 12px;
}
.article-avatar,
.article-author img,
.avatar img {
  width: 36px;
  height: 36px;
  object-fit: cover;
  background-color: var(--anvil-avatar-bg);
}
.article-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  border-bottom: var(--anvil-rule);
  padding-bottom: 16px;
  margin-bottom: 28px;
}
.article-author-name,
.article-meta .name {
  font-family: var(--anvil-font-heading);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--anvil-ink);
}
.article-meta time,
.meta-data time {
  font-family: var(--anvil-font-mono);
  font-size: 12.5px;
  color: var(--anvil-steel-400);
}

/* Prose kit */
.article-body {
  font-family: var(--anvil-font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--anvil-steel-600);
}
.article-body h2 {
  font-size: 22px;
  letter-spacing: 0.06em;
  margin: 34px 0 14px;
  border: 0;
  padding: 0;
}
.article-body h3 {
  font-size: 17px;
  letter-spacing: 0.08em;
  margin: 28px 0 10px;
}
.article-body strong {
  color: var(--anvil-steel-900);
  font-weight: 600;
}
.article-body a {
  border-bottom: 2px solid var(--anvil-brand);
  color: var(--anvil-ink);
}
.article-body a:hover {
  text-decoration: none;
}
.article-body ul,
.article-body ol {
  padding-inline-start: 22px;
  margin: 16px 0;
}
.article-body li {
  margin-bottom: 8px;
}
.article-body blockquote {
  background-color: var(--anvil-safety-tint);
  border: 0;
  border-inline-start: 6px solid var(--anvil-brand);
  padding: 16px 18px;
  margin: 22px 0;
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--anvil-steel-600);
}
.article-body pre {
  background-color: var(--anvil-steel-900);
  color: var(--anvil-steel-150);
  padding: 18px 20px;
  font-family: var(--anvil-font-mono);
  font-size: 13.5px;
  line-height: 1.7;
  overflow: auto;
  border: 0;
}
.article-body code {
  font-family: var(--anvil-font-mono);
  font-size: 0.92em;
  background-color: var(--anvil-code-chip);
  padding: 2px 5px;
}
.article-body pre code {
  background: none;
  padding: 0;
  color: inherit;
}
.article-body table {
  margin: 22px 0;
}
.article-body table th {
  background-color: var(--anvil-steel-900);
  color: #fff;
  font-family: var(--anvil-font-heading);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 10px 12px;
}
.article-body table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--anvil-steel-100);
}
.article-body table td:first-child {
  font-family: var(--anvil-font-mono);
  font-size: 14px;
}

/* Share row */
.article-share {
  display: flex;
  gap: 8px;
  margin: 30px 0;
  padding: 0;
  list-style: none;
}
.article-share a,
.share a {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--anvil-border-input);
  background-color: #fff;
  color: var(--anvil-steel-500);
}
.article-share a:hover {
  border-color: var(--anvil-steel-900);
  color: var(--anvil-ink);
}

/* Was this helpful */
.article-votes {
  border-top: 1px solid var(--anvil-border);
  border-bottom: 1px solid var(--anvil-border);
  padding: 26px 0;
  margin: 30px 0;
  text-align: center;
}
.article-votes-question,
.article-votes h3 {
  font-family: var(--anvil-font-heading);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--anvil-ink);
  margin: 0 0 16px;
  border: 0;
  padding: 0;
}
.article-vote {
  font-family: var(--anvil-font-heading);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 9px 26px;
  border: 1px solid var(--anvil-steel-900);
  background-color: #fff;
  color: var(--anvil-ink);
  margin: 0 4px;
}
.article-vote-down {
  border-color: var(--anvil-border-input);
  color: var(--anvil-steel-500);
}
.article-votes-count {
  display: block;
  margin-top: 14px;
  font-family: var(--anvil-font-mono);
  font-size: 12.5px;
  color: var(--anvil-steel-400);
}

/* Related / recently viewed */
.article-relatives {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 40px;
  margin: 34px 0;
}
.recent-articles h3,
.related-articles h3 {
  font-family: var(--anvil-font-heading);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-bottom: var(--anvil-rule);
  padding-bottom: 10px;
  margin: 0 0 4px;
}
.recent-articles li,
.related-articles li {
  border-bottom: 1px solid var(--anvil-steel-100);
  margin: 0;
}
.recent-articles li a,
.related-articles li a {
  display: block;
  padding: 11px 0;
  font-family: var(--anvil-font-body);
  font-size: 15.5px;
  color: var(--anvil-steel-600);
}

/* Comments */
.comment {
  border: 1px solid var(--anvil-steel-100);
  background-color: #fff;
  padding: 16px;
  margin-bottom: 12px;
}
.comment-avatar img,
.comment .avatar img {
  width: 32px;
  height: 32px;
}
.comment-author,
.comment .name {
  font-family: var(--anvil-font-heading);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.comment-body {
  font-family: var(--anvil-font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--anvil-steel-600);
}
.comment-form textarea,
.comment-container textarea {
  min-height: 96px;
  border: 1px solid var(--anvil-border-input);
  font-family: var(--anvil-font-body);
  font-size: 16px;
}

/***** 7. Icon pseudo-elements *****/
/* Material Symbols ligatures are case-sensitive: an ancestor's
   `text-transform: uppercase` turns "chevron_right" into "CHEVRON_RIGHT" and
   the ligature stops resolving, printing the glyph name as text. Every icon
   pseudo-element therefore resets the transform (and the tracking, which would
   otherwise pull the glyph off-centre). */
.breadcrumbs li + li::before,
.anvil-utility-link::before,
.hero .hero-search .search::before,
.hero .search::before,
.anvil-icon::before {
  text-transform: none;
  letter-spacing: normal;
  font-style: normal;
  font-weight: normal;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
}

/***** 8. Article page corrections *****/

/* The sidebar rail already carries a search field on desktop; Copenhagen's
   in-page one is kept for the drawer widths, where the rail is hidden. */
@media (min-width: 1024px) {
  .sub-nav .search-container {
    display: none;
  }
}
.sub-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
}

.sidenav-title,
.collapsible-sidebar-title {
  display: block;
  font-family: var(--anvil-font-heading);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--anvil-ink);
  border-bottom: var(--anvil-rule);
  padding: 0 0 10px;
  margin: 0 0 4px;
}

/* Header row: title, then author + follow on one line above the rule. */
.article-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  border-bottom: var(--anvil-rule);
  padding-bottom: 16px;
  margin: 0 0 28px;
}
.article-header .article-title {
  flex: 1 1 100%;
  margin: 0;
}
.article-header .article-author {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}
.article-header .article-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  border: 0;
  padding: 0;
  margin: 0;
}
.article-header .article-meta > a {
  font-family: var(--anvil-font-heading);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--anvil-ink);
  border: 0;
}
.article-header .meta-group,
.article-header .meta-data {
  border: 0;
  padding: 0;
  margin: 0;
}
.article-header .meta-data time {
  font-family: var(--anvil-font-mono);
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: var(--anvil-steel-400);
  border: 0;
}
.article-header .article-subscribe {
  margin-inline-start: auto;
  flex: 0 0 auto;
}
.article-subscribe button {
  background-color: var(--anvil-steel-900);
  border-color: var(--anvil-steel-900);
  color: #fff;
  padding: 10px 20px;
}
.article-subscribe button:hover {
  background-color: var(--anvil-steel-800);
  color: #fff;
}

/* Helpfulness block: bounded top and bottom only. */
.article-votes {
  border: 0;
  border-top: 1px solid var(--anvil-border);
  border-bottom: 1px solid var(--anvil-border);
  background: none;
  padding: 26px 0;
  box-shadow: none;
}
.article-vote,
.article-vote-up,
.article-vote-down {
  background-color: #fff;
  color: var(--anvil-ink);
  border: 1px solid var(--anvil-steel-900);
  fill: currentColor;
}
.article-vote-down {
  border-color: var(--anvil-border-input);
  color: var(--anvil-steel-500);
}
.article-vote-up:hover,
.article-vote-down:hover {
  background-color: var(--anvil-steel-050);
}

/* Share row: square outline buttons. */
.article-share,
.share {
  display: flex;
  gap: 8px;
  margin: 30px 0;
  padding: 0;
  list-style: none;
}
.share li {
  margin: 0;
}
.share li a,
.article-share li a {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--anvil-border-input);
  background-color: #fff;
  color: var(--anvil-steel-500);
}
.share li a:hover {
  border-color: var(--anvil-steel-900);
  color: var(--anvil-ink);
  text-decoration: none;
}
.share li a svg {
  width: 19px;
  height: 19px;
}

/* These three ride on selectors the inherited layer already cut at two
   classes, so they match its specificity rather than fight it with
   !important. */
.collapsible-sidebar .collapsible-sidebar-title.sidenav-title {
  font-family: var(--anvil-font-heading);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--anvil-ink);
  border-bottom: var(--anvil-rule);
  padding: 0 0 10px;
  margin: 0 0 4px;
  background: none;
}

.article-footer .article-share .share li a,
.article-share .share li a,
.post-share .share li a {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--anvil-border-input);
  background-color: #fff;
  color: var(--anvil-steel-500);
  box-shadow: none;
}
.article-share .share li a:hover,
.post-share .share li a:hover {
  border-color: var(--anvil-steel-900);
  color: var(--anvil-ink);
  background-color: #fff;
}
.article-share .share li a svg,
.post-share .share li a svg {
  width: 17px;
  height: 17px;
}

/* A cast vote reads as the accent — the theme's one "selected" colour. */
.article-votes .article-vote[aria-pressed="true"] {
  background-color: var(--anvil-brand);
  border-color: var(--anvil-brand);
  color: var(--anvil-on-brand);
}

/***** 9. Category page *****/

.category-header {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  border-bottom: var(--anvil-rule);
  padding: 0 0 26px;
  margin: 34px 0 26px;
  background: none;
  text-align: start;
}
.category-header .page-header-icon {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  background-color: var(--anvil-steel-900);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  border: 0;
}
.category-header .page-header-icon .anvil-icon {
  font-size: 28px;
  color: var(--anvil-brand);
}
.category-header .page-header-body {
  flex: 1 1 auto;
  min-width: 0;
}
.page-header-code {
  display: block;
  font-family: var(--anvil-font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--anvil-steel-400);
  margin-bottom: 6px;
}
.category-header h1 {
  font-size: 44px;
  line-height: 1.02;
  letter-spacing: 0.01em;
  margin: 0;
}
.category-header .page-header-description {
  font-family: var(--anvil-font-body);
  font-size: 18px;
  line-height: 1.5;
  color: var(--anvil-steel-500);
  max-width: 70ch;
  margin: 10px 0 0;
  text-align: start;
}
.page-header-meta {
  flex: 0 0 auto;
  padding-top: 26px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.page-header-count {
  font-family: var(--anvil-font-heading);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--anvil-steel-500);
  white-space: nowrap;
}
.page-header-count + .page-header-count::before {
  content: "·";
  margin-inline-end: 8px;
  color: var(--anvil-steel-300);
}

/* Two-column section tree */
.section-tree {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 44px 52px;
  align-items: start;
}
@media (max-width: 900px) {
  .section-tree {
    grid-template-columns: minmax(0, 1fr);
    gap: 38px;
  }
}
.section-tree > .section {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
.section-tree-title {
  margin: 0 0 6px;
  border: 0;
  padding: 0;
  font-family: var(--anvil-font-heading);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.section-tree-title a {
  color: var(--anvil-ink);
}
.section-tree-description {
  font-family: var(--anvil-font-body);
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--anvil-steel-500);
  margin: 0 0 14px;
}

/* Nested-section chips */
.section-tree-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.section-tree-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--anvil-border-input);
  background-color: #fff;
  padding: 7px 11px;
  font-family: var(--anvil-font-heading);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--anvil-ink);
}
.section-tree-chip:hover {
  border-color: var(--anvil-steel-900);
  text-decoration: none;
}
.section-tree-chip-icon {
  font-size: 15px;
  color: var(--anvil-steel-400);
}

/* Article rows */
.section-tree .article-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 0;
  background: none;
}
.section-tree .article-list-item {
  margin: 0;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--anvil-steel-100);
  background: none;
}
.section-tree .article-list-item a.article-list-link {
  display: block;
  padding: 11px 0;
  font-family: var(--anvil-font-body);
  font-size: 16px;
  color: var(--anvil-ink);
  background: none;
  border: 0;
}
.see-all-articles {
  display: inline-block;
  margin-top: 14px;
  padding-bottom: 2px;
  font-family: var(--anvil-font-heading);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--anvil-ink);
  border-bottom: 2px solid var(--anvil-brand);
}
.see-all-articles:hover {
  text-decoration: none;
  border-bottom-color: var(--anvil-steel-900);
}

/***** 10. Section page *****/

.section-content {
  max-width: 900px;
}
/* The category tree's section headings are plain titles, not ruled section
   headings — the generic `.section > h2` rule must not reach them. */
.section-tree > .section > .section-tree-title {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 6px;
}

.section-content .page-header {
  align-items: flex-end;
  padding-bottom: 24px;
}
.section-content .page-header h1 {
  font-size: 42px;
  flex: 1 1 auto;
}
.section-content .page-header .page-header-description {
  flex: 1 1 100%;
  order: 3;
  font-family: var(--anvil-font-body);
  font-size: 17px;
  line-height: 1.5;
  color: var(--anvil-steel-500);
  margin: 0;
}
.section-subscribe {
  flex: 0 0 auto;
}

/* Nested sections: a two-column 1px-gap grid of cards. */
.section-list-label,
.article-list-label {
  font-family: var(--anvil-font-heading);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--anvil-ink);
  margin: 0 0 12px;
}
.section-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background-color: var(--anvil-border);
  border: 1px solid var(--anvil-border);
  margin: 0 0 34px;
  padding: 0;
  list-style: none;
}
@media (max-width: 700px) {
  .section-list {
    grid-template-columns: minmax(0, 1fr);
  }
}
.section-list-item {
  margin: 0;
  padding: 0;
  border: 0;
  background-color: #fff;
  box-shadow: none;
}
.section-list-item a {
  display: block;
  padding: 18px 20px;
  font-family: var(--anvil-font-heading);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--anvil-ink);
}
.section-list-item a:hover {
  background-color: var(--anvil-steel-050);
  text-decoration: none;
}
.section-list-item a svg {
  display: none;
}

/* Article rows */
.article-list-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.article-list-count {
  font-family: var(--anvil-font-mono);
  font-size: 12.5px;
  color: var(--anvil-steel-400);
}
.section-content .article-list,
.article-list-rows {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 0;
  background: none;
  box-shadow: none;
}

/***** 11. Search results *****/

.search-results-title {
  font-family: var(--anvil-font-heading);
  font-size: 34px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.05;
  margin: 34px 0 6px;
  border: 0;
  padding: 0;
}
/* Guide leaves the heading blank on instances without the shared string —
   the count line below carries the meaning, so collapse the empty node. */
.search-results-title:empty {
  display: none;
}
.search-results-subheading {
  font-family: var(--anvil-font-mono);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.03em;
  text-transform: none;
  color: var(--anvil-steel-400);
  border-bottom: var(--anvil-rule);
  padding: 0 0 12px;
  margin: 0 0 8px;
}
.search-results-title:empty + .search-results-subheading {
  margin-top: 34px;
}

/* Filter rail */
.search-results {
  display: flex;
  flex-wrap: wrap;
  gap: 44px;
  align-items: flex-start;
}
.search-results-sidebar {
  flex: 0 1 236px;
  min-width: 200px;
}
.search-results-column {
  flex: 1 1 440px;
  min-width: 0;
}
.search-results-sidebar .multibrand-filter-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.search-results-sidebar .multibrand-filter-list li {
  margin: 0;
}
.search-results-sidebar .sidenav-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid var(--anvil-steel-100);
  background: none;
  font-family: var(--anvil-font-body);
  font-size: 15.5px;
  color: var(--anvil-steel-600);
}
.search-results-sidebar .sidenav-item:hover {
  background: none;
  color: var(--anvil-ink);
}
.search-results-sidebar .sidenav-item.current,
.search-results-sidebar .sidenav-item[aria-current="page"] {
  background: none;
  color: var(--anvil-ink);
  font-weight: 500;
}
.search-results-sidebar .sidenav-item.current::before,
.search-results-sidebar .sidenav-item[aria-current="page"]::before {
  content: "";
  position: absolute;
  inset-inline-start: -12px;
  top: 6px;
  bottom: 6px;
  width: 3px;
  background-color: var(--anvil-brand);
}
.search-results-sidebar .doc-count {
  font-family: var(--anvil-font-mono);
  font-size: 12.5px;
  color: var(--anvil-steel-400);
  flex: 0 0 auto;
}
.search-results-sidebar .filter-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Results */
.search-results-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.search-results-list > li {
  margin: 0;
  padding: 20px 0;
  border-bottom: 1px solid var(--anvil-steel-100);
}
.search-result-title {
  margin: 0 0 4px;
  border: 0;
  padding: 0;
  font-family: var(--anvil-font-heading);
  font-size: 21px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.2;
}
.search-result-title a {
  color: var(--anvil-ink);
}
.search-result-meta,
.search-result-breadcrumbs {
  font-family: var(--anvil-font-heading);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--anvil-steel-400);
}
.search-result-description {
  font-family: var(--anvil-font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--anvil-steel-500);
  margin: 8px 0 0;
}
.search-result-votes,
.search-result-meta-count {
  font-family: var(--anvil-font-mono);
  font-size: 12px;
  color: var(--anvil-steel-400);
}

/* The inherited rail clipped its own rows, which cut off the safety bar sitting
   in the gutter to their left. */
.search-results-sidebar .sidenav-item,
.search-results-sidebar .sidenav-item.current {
  overflow: visible;
}
.multibrand-filter-list a.sidenav-item {
  padding: 12px 0;
  font-family: var(--anvil-font-body);
  font-size: 15.5px;
}
.multibrand-filter-list a.sidenav-item .doc-count {
  font-family: var(--anvil-font-mono);
  font-size: 12.5px;
  font-weight: 400;
  color: var(--anvil-steel-400);
}

/* `.collapsible-sidebar` clips its own box (it animates closed on mobile), so
   the facet section is widened 12px to the left and pulled back by the same
   amount: the labels stay flush with the "Type" heading and the safety bar has
   somewhere to sit. */
.search-results-sidebar .filters-in-section {
  padding-inline-start: 12px;
  margin-inline-start: -12px;
}
.search-results-sidebar .filters-in-section > .sidenav-title,
.search-results-sidebar .filters-in-section > .collapsible-sidebar-title {
  margin-inline-start: 0;
}

/***** 12. Forms — new request / new post *****/

/* The handoff puts the form directly on the page, not inside a card. */
#main-content.form,
.form {
  max-width: 760px;
  background: none;
  border: 0;
  padding: 0;
  box-shadow: none;
}
.form .form-field {
  margin-bottom: 22px;
}
.form-field .field-note,
.form-field .nesty-input + p,
.form .form-field p {
  font-family: var(--anvil-font-body);
  font-size: 15.5px;
  color: var(--anvil-steel-500);
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  margin: 0 0 8px;
}
/* the "fields marked with an asterisk" note carries the section rule */
.form > p:first-child,
.form-field-required-note {
  font-family: var(--anvil-font-body);
  font-size: 16.5px;
  color: var(--anvil-steel-500);
  border-bottom: var(--anvil-rule);
  padding-bottom: 18px;
  margin: 0 0 26px;
}

/* Submit is the page's primary action. */
#main-content [data-garden-id="buttons.button"][type="submit"],
.form input[type="submit"],
.form button[type="submit"] {
  background-color: var(--anvil-brand) !important;
  border-color: var(--anvil-brand) !important;
  color: var(--anvil-on-brand) !important;
  padding: 14px 32px !important;
  font-size: 13px !important;
}
#main-content [data-garden-id="buttons.button"][type="submit"]:hover {
  background-color: var(--anvil-brand-darker) !important;
  border-color: var(--anvil-brand-darker) !important;
}

/* Attachment dropzone: steel prompt on a dashed steel frame. */
[data-garden-id="forms.file_upload"],
.form .dropzone,
.upload-dropzone {
  border: 2px dashed var(--anvil-border-input) !important;
  background-color: #fff !important;
  color: var(--anvil-steel-500) !important;
  padding: 26px !important;
  font-family: var(--anvil-font-body) !important;
  font-size: 16px !important;
}
[data-garden-id="forms.file_upload"] * {
  color: var(--anvil-steel-500) !important;
}

/* Rich-text toolbar sits directly on the textarea, per the handoff. */
.ck.ck-toolbar,
[data-garden-id="forms.faux_input"] .ck-toolbar {
  background-color: var(--anvil-steel-050) !important;
  border: 1px solid var(--anvil-border-input) !important;
  border-bottom: 0 !important;
  padding: 6px !important;
}
.ck.ck-editor__main > .ck-editor__editable {
  border: 1px solid var(--anvil-border-input) !important;
  min-height: 190px !important;
  font-family: var(--anvil-font-body) !important;
  font-size: 16.5px !important;
}

/***** 13. Community *****/

.community-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  border-bottom: var(--anvil-rule);
  padding-bottom: 22px;
  margin: 34px 0 26px;
}
.community-header h1,
.community-header .title {
  margin: 0;
  font-family: var(--anvil-font-heading);
  font-size: 40px;
  font-weight: 600;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  line-height: 1.0;
}
/* Copenhagen appends a caret for the mobile topic switcher; the desktop
   heading is not a menu. */
@media (min-width: 768px) {
  .community-header .dropdown-toggle::after,
  .community-header h1::after {
    display: none;
  }
}
.post-to-community {
  flex: 0 0 auto;
  background-color: var(--anvil-brand);
  border: 1px solid var(--anvil-brand);
  color: var(--anvil-on-brand);
  font-family: var(--anvil-font-heading);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 12px 22px;
}
.post-to-community:hover {
  background-color: var(--anvil-brand-darker);
  border-color: var(--anvil-brand-darker);
  color: var(--anvil-on-brand);
  text-decoration: none;
}

/* Topic cards */
.topics-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1px;
  background-color: var(--anvil-border);
  border: 1px solid var(--anvil-border);
  margin: 0 0 46px;
  padding: 0;
  list-style: none;
}
@media (max-width: 700px) {
  .topics-list {
    grid-template-columns: minmax(0, 1fr);
  }
}
.topics-item {
  margin: 0;
  padding: 0;
  border: 0;
  background-color: #fff;
  box-shadow: none;
}
.topics-item .blocks-item-link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: start;
  height: 100%;
  min-height: 150px;
  padding: 24px;
}
.topics-item .blocks-item-icon {
  display: none;
}
.topics-item .blocks-item-title {
  font-family: var(--anvil-font-heading);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.15;
  color: var(--anvil-ink);
  margin: 0 0 10px;
  text-align: start;
}
.topics-item .blocks-item-description {
  font-family: var(--anvil-font-body);
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--anvil-steel-500);
  text-align: start;
  margin: 0;
}
.topics-item .meta-data,
.topics-item .blocks-item-count {
  margin-top: auto;
  padding-top: 18px;
  font-family: var(--anvil-font-mono);
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: var(--anvil-steel-400);
  text-align: start;
}

/* Featured posts — safety square bullets, same row shape as the home page. */
.community-featured-posts .promoted-articles-item a::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  background-color: var(--anvil-brand);
  font-size: 0;
}

/* Post list rows */
.posts-list.striped-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.striped-list-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px 100px;
  gap: 18px;
  align-items: center;
  margin: 0;
  padding: 18px 2px;
  border: 0;
  border-top: 1px solid var(--anvil-steel-100);
  background: none;
}
.striped-list-info {
  min-width: 0;
}
.striped-list-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--anvil-font-body);
  font-size: 17px;
  font-weight: 400;
  color: var(--anvil-ink);
}
.striped-list-item .meta-group,
.striped-list-item .meta-data {
  font-family: var(--anvil-font-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--anvil-steel-400);
  margin-top: 4px;
}
.striped-list-count-item {
  text-align: center;
}
.striped-list-number {
  display: block;
  font-family: var(--anvil-font-heading);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--anvil-ink);
  line-height: 1.1;
}
.striped-list-count-item .striped-list-count,
.striped-list-count-item > span:last-child {
  display: block;
  font-family: var(--anvil-font-heading);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--anvil-steel-400);
}
.status-label-featured,
.status-label-pinned {
  background-color: var(--anvil-brand);
  color: var(--anvil-on-brand);
  font-family: var(--anvil-font-heading);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 3px 7px;
}

/* Closing call to action */
.community-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
  padding: 46px 0 0;
  margin: 0;
  max-width: none;
  background: none;
  border: 0;
}
.community-footer-title {
  font-family: var(--anvil-font-heading);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--anvil-ink);
  margin: 0;
  border: 0;
  padding: 0;
}
.community-footer .post-to-community {
  background-color: var(--anvil-steel-900);
  border-color: var(--anvil-steel-900);
  color: #fff;
}
.community-footer .post-to-community:hover {
  background-color: var(--anvil-steel-800);
  border-color: var(--anvil-steel-800);
  color: #fff;
}

/* Post rows: Guide wraps the two stat columns in `.striped-list-count`, so the
   row is a flex of [info][counts] rather than a three-column grid. */
.posts-list.striped-list,
.striped-list {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
}
.striped-list-item {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0;
  padding: 18px 2px;
  border: 0;
  border-top: 1px solid var(--anvil-steel-100);
  background: none;
}
.striped-list-info {
  flex: 1 1 auto;
  min-width: 0;
}
.striped-list-count {
  flex: 0 0 auto;
  display: flex;
  gap: 0;
  color: var(--anvil-steel-400);
  font-size: inherit;
  text-transform: none;
}
.striped-list-count-item {
  width: 96px;
  text-align: center;
  display: block;
  font-family: var(--anvil-font-heading);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--anvil-steel-400);
}
.striped-list-number {
  display: block;
  font-family: var(--anvil-font-heading);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--anvil-ink);
  line-height: 1.15;
  margin-bottom: 2px;
}
.striped-list .meta-data {
  font-family: var(--anvil-font-mono);
  font-size: 12px;
  color: var(--anvil-steel-400);
}
.striped-list-title {
  font-weight: 400;
  font-size: 17px;
}

/* The topic switcher caret belongs to the mobile menu only. */
@media (min-width: 768px) {
  .community-header .dropdown-toggle .dropdown-chevron-icon {
    display: none;
  }
}

/***** 14. Community post page *****/

.post-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  border-bottom: var(--anvil-rule);
  padding-bottom: 20px;
  margin: 34px 0 26px;
}
.post-title {
  flex: 1 1 320px;
  margin: 0;
  font-family: var(--anvil-font-heading);
  font-size: 38px;
  font-weight: 600;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  line-height: 1.05;
}
.post-header .community-follow {
  flex: 0 0 auto;
  margin: 0;
}

/* Vote column: a bordered white box, arrows above and below the score. */
.post-vote,
.comment-vote {
  border: 1px solid var(--anvil-border);
  background-color: #fff;
  padding: 8px 0;
  width: 56px;
  flex: 0 0 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.post-vote .vote-sum,
.comment-vote .vote-sum {
  font-family: var(--anvil-font-heading);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--anvil-ink);
}
.post-vote .vote-up,
.post-vote .vote-down,
.comment-vote .vote-up,
.comment-vote .vote-down {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--anvil-steel-500);
  border: 0;
  background: none;
}
.post-vote .vote-up:hover,
.post-vote .vote-down:hover,
.comment-vote .vote-up:hover,
.comment-vote .vote-down:hover {
  color: var(--anvil-ink);
}
.post-vote .vote-up[aria-pressed="true"],
.post-vote .vote-down[aria-pressed="true"] {
  color: var(--anvil-brand);
}

.post-info-container {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}
.post-info {
  flex: 1 1 auto;
  min-width: 0;
}
.post-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.post-meta .post-author,
.post-meta a {
  font-family: var(--anvil-font-heading);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--anvil-ink);
}
.post-meta .meta-data,
.post-meta time {
  font-family: var(--anvil-font-mono);
  font-size: 12.5px;
  color: var(--anvil-steel-400);
  text-transform: none;
  letter-spacing: 0.02em;
}
.post-body {
  font-family: var(--anvil-font-body);
  font-size: 17.5px;
  line-height: 1.65;
  color: var(--anvil-steel-600);
}
.post-avatar img,
.post-avatar {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
}

/* Side card */
.post-sidebar {
  flex: 0 1 300px;
  min-width: 260px;
  border: 1px solid var(--anvil-border);
  background-color: #fff;
  padding: 22px;
  align-self: flex-start;
}
@media (min-width: 1024px) {
  .post-sidebar {
    position: sticky;
    top: calc(var(--anvil-header-h) + 24px);
  }
}
.post-sidebar-title {
  font-family: var(--anvil-font-heading);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--anvil-ink);
  margin: 0 0 16px;
  border: 0;
  padding: 0;
  line-height: 1.2;
}
.post-sidebar .post-to-community,
.post-sidebar .button {
  display: block;
  width: 100%;
  text-align: center;
  background-color: var(--anvil-steel-900);
  border: 1px solid var(--anvil-steel-900);
  color: #fff;
  padding: 13px 18px;
}
.post-sidebar .post-to-community:hover,
.post-sidebar .button:hover {
  background-color: var(--anvil-steel-800);
  border-color: var(--anvil-steel-800);
  color: #fff;
}

/* Comments */
.comment-heading {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  border-bottom: var(--anvil-rule);
  padding-bottom: 10px;
  margin: 34px 0 20px;
  font-family: var(--anvil-font-heading);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.comment-heading .comment-count,
.comment-heading .meta-data {
  font-family: var(--anvil-font-mono);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.03em;
  text-transform: none;
  color: var(--anvil-steel-400);
}
.comment-wrapper,
.comment {
  border: 1px solid var(--anvil-steel-100);
  background-color: #fff;
  padding: 16px;
  margin-bottom: 12px;
}
.comment-author,
.comment-author a {
  font-family: var(--anvil-font-heading);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--anvil-ink);
}
.comment-meta .meta-data,
.comment-meta time {
  font-family: var(--anvil-font-mono);
  font-size: 12.5px;
  color: var(--anvil-steel-400);
}
.comment-body {
  font-family: var(--anvil-font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--anvil-steel-600);
}
.comment-form-controls .button,
.comment-form-controls input[type="submit"] {
  background-color: var(--anvil-brand);
  border-color: var(--anvil-brand);
  color: var(--anvil-on-brand);
  padding: 11px 24px;
}

/* Split follow control: label + dark counter cell */
.community-follow {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--anvil-steel-900);
}
.community-follow button {
  border: 0;
  background: none;
  padding: 10px 18px;
  font-family: var(--anvil-font-heading);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--anvil-ink);
}
.community-follow button:hover {
  background-color: var(--anvil-steel-050);
}
.community-follow .follow-count,
.community-follow span[data-follower-count] {
  display: flex;
  align-items: center;
  padding: 0 14px;
  background-color: var(--anvil-steel-900);
  color: var(--anvil-brand);
  font-family: var(--anvil-font-mono);
  font-size: 13px;
  border-inline-start: 1px solid var(--anvil-steel-900);
}

/***** 15. Error page *****/

.error-page {
  max-width: 720px;
  padding: 60px 0 110px;
  margin: 0;
  text-align: start;
  background: none;
  border: 0;
}
.error-page-mark {
  font-family: var(--anvil-font-mono);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--anvil-steel-400);
  margin: 0 0 16px;
  line-height: 1.2;
}
.error-page-hazard {
  display: block;
  width: 80px;
  height: 10px;
  background-image: var(--anvil-hazard);
  margin-bottom: 22px;
}
.error-page h1 {
  font-family: var(--anvil-font-heading);
  font-size: 52px;
  line-height: 1.0;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--anvil-ink);
  margin: 0 0 18px;
  text-wrap: balance;
}
.error-page-description {
  font-family: var(--anvil-font-body);
  font-size: 19px;
  line-height: 1.55;
  color: var(--anvil-steel-500);
  margin: 0 0 30px;
}
.error-page-link {
  display: inline-block;
  background-color: var(--anvil-brand);
  border: 1px solid var(--anvil-brand);
  color: var(--anvil-on-brand);
  padding: 13px 26px;
  font-family: var(--anvil-font-heading);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
}
.error-page-link:hover {
  background-color: var(--anvil-brand-darker);
  border-color: var(--anvil-brand-darker);
  color: var(--anvil-on-brand);
  text-decoration: none;
}

/***** 16. Profile, contributions & following *****/

/* Guide's profile header is
     header.profile-header > .container > [ .profile-info , ul.profile-stats-counters ]
   with the avatar, name, actions and the activity stats nested inside
   .profile-info — so the two halves are laid out on .container, not on
   .profile-info. */
.profile-header {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
  margin: 0;
}
.profile-header > .container {
  max-width: none;
  padding: 0 0 24px;
  margin: 34px 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 26px;
  border-bottom: var(--anvil-rule);
}
.profile-info {
  flex: 1 1 420px;
  min-width: 0;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  column-gap: 20px;
  row-gap: 18px;
  align-items: start;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
}
.profile-info .profile-avatar {
  grid-area: 1 / 1 / 3 / 2;
}
.profile-info .basic-info {
  grid-area: 1 / 2 / 2 / 3;
  min-width: 0;
}
.profile-info .options {
  grid-area: 1 / 3 / 2 / 4;
}
.profile-info .profile-stats-activity {
  grid-area: 2 / 2 / 3 / 4;
}
.profile-avatar,
.profile-avatar img,
.profile-info .avatar img {
  width: 76px;
  height: 76px;
  flex: 0 0 76px;
  background-color: var(--anvil-avatar-bg);
  object-fit: cover;
}
.profile-info h1.name,
.profile-name {
  font-family: var(--anvil-font-heading);
  font-size: 38px;
  font-weight: 600;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  line-height: 1.05;
  margin: 0;
}
.profile-info h1.name a {
  color: var(--anvil-ink);
}

/* Activity stats: uppercase label over a monospace value. */
.profile-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 26px;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 0;
  background: none;
}
.profile-stats .stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
  border: 0;
  padding: 0;
  margin: 0;
}
.profile-stats .stat-label {
  font-family: var(--anvil-font-heading);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--anvil-steel-500);
}
.profile-stats .stat-value,
.profile-stats .stat-value time {
  font-family: var(--anvil-font-mono);
  font-size: 14px;
  color: var(--anvil-ink);
  margin: 0;
}

/* The counters are a bordered panel of label/value rows. */
.profile-stats-counters {
  flex: 0 0 auto;
  min-width: 240px;
  display: block;
  border: 1px solid var(--anvil-border);
  background-color: #fff;
  padding: 16px 18px;
}
.profile-stats-counters .stat {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 7px 0;
}
.profile-stats-counters .stat-label {
  font-family: var(--anvil-font-body);
  font-size: 14.5px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--anvil-steel-400);
}
.profile-stats-counters .stat-value {
  font-family: var(--anvil-font-mono);
  font-size: 13px;
  color: var(--anvil-ink);
}

/* Edit-profile / follow controls */
.profile-info .options {
  display: flex;
  align-items: center;
  gap: 10px;
}
.user-profile-actions button {
  font-family: var(--anvil-font-heading);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border: 1px solid var(--anvil-steel-900);
  background-color: #fff;
  color: var(--anvil-ink);
  padding: 10px 18px;
}
.user-profile-actions button:hover {
  background-color: var(--anvil-steel-050);
}

/* Profile / activity tabs */
.profile-nav .collapsible-nav-list,
.my-activities-nav .collapsible-nav-list,
.collapsible-nav-border .collapsible-nav-list {
  display: flex;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.profile-nav .collapsible-nav-list li a,
.my-activities-nav .collapsible-nav-list li a,
.collapsible-nav-border .collapsible-nav-list li a {
  display: block;
  padding: 14px 18px;
  font-family: var(--anvil-font-heading);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--anvil-steel-500);
}
@media (min-width: 768px) {
  .collapsible-nav-border .collapsible-nav-list li.current,
  .profile-nav .collapsible-nav-list li.current,
  .my-activities-nav .collapsible-nav-list li.current {
    border-bottom: 5px solid var(--anvil-brand);
    margin-bottom: -1px;
  }
  .collapsible-nav-border .collapsible-nav-list li.current a,
  .profile-nav .collapsible-nav-list li.current a,
  .my-activities-nav .collapsible-nav-list li.current a {
    color: var(--anvil-ink);
  }
  .collapsible-nav-border .collapsible-nav-list li:hover,
  .profile-nav .collapsible-nav-list li:hover,
  .my-activities-nav .collapsible-nav-list li:hover {
    border-bottom: 5px solid var(--anvil-steel-150);
    margin-bottom: -1px;
  }
}

/* Activity feed cards */
.profile-contribution,
.activity-item {
  border: 1px solid var(--anvil-border);
  background-color: #fff;
  padding: 16px 18px;
  box-shadow: none;
}
.profile-contribution-title,
.profile-contribution h3 {
  font-family: var(--anvil-font-heading);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin: 0 0 6px;
  border: 0;
  padding: 0;
}
.profile-contribution-breadcrumbs,
.profile-contribution-breadcrumbs a {
  font-family: var(--anvil-font-heading);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--anvil-steel-400);
}
.profile-contribution-body {
  font-family: var(--anvil-font-body);
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--anvil-steel-500);
}

/* Contributions & following tables */
.my-activities-table,
.subscriptions-table {
  width: 100%;
  border-collapse: collapse;
}
.my-activities-table thead th,
.subscriptions-table thead th {
  background: none;
  color: var(--anvil-steel-500);
  font-family: var(--anvil-font-heading);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--anvil-border);
  padding: 12px 2px;
}
.my-activities-table tbody td,
.subscriptions-table tbody td {
  border-top: 1px solid var(--anvil-steel-100);
  border-bottom: 0;
  padding: 16px 2px;
  font-family: var(--anvil-font-mono);
  font-size: 13px;
  color: var(--anvil-steel-500);
}
.my-activities-table .striped-list-title,
.subscriptions .striped-list-title,
.my-activities-table tbody td:first-child,
.subscriptions-table tbody td:first-child {
  font-family: var(--anvil-font-body);
  font-size: 16px;
  color: var(--anvil-ink);
}
.subscriptions-table .button,
.unsubscribe-button {
  background-color: var(--anvil-steel-900);
  border-color: var(--anvil-steel-900);
  color: #fff;
  padding: 9px 18px;
  font-size: 11px;
  letter-spacing: 0.14em;
}

/* Activity tables sit on the page, not in a card.
   `display: block` on the table with `display: table` on thead and tbody makes
   them two independent table boxes: each sizes its own columns, so the headers
   stop lining up with the cells and the text reads as overlapping columns.
   The table stays a real table and the *container* does the scrolling. */
#main-content.requests {
  overflow-x: auto;
}
.my-activities-table,
.subscriptions-table,
.contributions-table,
.requests-table {
  background: none;
  border: 0;
  box-shadow: none;
  display: table;
  width: 100%;
  min-width: 740px;
  table-layout: fixed;
  border-collapse: collapse;
}
/* the handoff's column proportions */
.subscriptions-table th:nth-child(2),
.subscriptions-table td:nth-child(2) { width: 110px; }
.subscriptions-table th:nth-child(3),
.subscriptions-table td:nth-child(3) { width: 130px; }
.subscriptions-table th:nth-child(4),
.subscriptions-table td:nth-child(4) { width: 130px; }
.contributions-table th:nth-child(2),
.contributions-table td:nth-child(2) { width: 110px; }
.contributions-table th:nth-child(3),
.contributions-table td:nth-child(3) { width: 110px; }
.contributions-table th:nth-child(4),
.contributions-table td:nth-child(4) { width: 160px; }
.contributions-table th:nth-child(5),
.contributions-table td:nth-child(5) { width: 160px; }
/* long titles wrap inside their column instead of pushing the grid */
.my-activities-table td,
.subscriptions-table td,
.contributions-table td {
  overflow-wrap: anywhere;
}
.my-activities-table tbody tr,
.subscriptions-table tbody tr {
  background: none;
  border: 0;
}
.my-activities-table tbody tr:hover,
.subscriptions-table tbody tr:hover {
  background-color: var(--anvil-steel-050);
}

/* The base makes .profile-info a full-width flex row; Anvil needs it to be a
   grid that shares the header with the counters panel. */
.profile-header .profile-info {
  flex: 1 1 420px;
  flex-basis: 420px;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  column-gap: 20px;
  row-gap: 18px;
  align-items: start;
}
.profile-header .profile-avatar {
  align-self: start;
  margin: 0;
}
.profile-header .profile-stats-activity {
  border-top: 0;
  margin-top: 0;
}
.profile-header .profile-stats-counters {
  border-bottom: 0;
  margin: 0;
  flex: 0 0 270px;
}
/* The profile header reflows in two steps. Below 1024 the counters panel drops
   under the identity block and runs full width — at 768 the two were still
   side by side, which left ~420px for an avatar, a 38px name, three stats and
   the edit control. Below 768 the options move to their own row as well. */
@media (max-width: 1023px) {
  .profile-header > .container {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }
  .profile-header .profile-info {
    flex: 1 1 auto;
    width: 100%;
  }
  .profile-header .profile-stats-counters {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
  }
  /* as a full-width strip the rows read better spread out than stacked */
  .profile-header .profile-stats-counters {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 32px;
  }
  .profile-header .profile-stats-counters .stat {
    flex: 1 1 auto;
    min-width: 140px;
  }
}

@media (max-width: 767px) {
  .profile-header .profile-info {
    grid-template-columns: 76px minmax(0, 1fr);
  }
  .profile-header .profile-info .options {
    grid-area: 3 / 1 / 4 / 3;
    justify-self: start;
  }
  .profile-header .profile-info .profile-stats-activity {
    grid-area: 2 / 1 / 3 / 3;
  }
  .profile-header .profile-stats-activity {
    gap: 14px 22px;
  }
  .profile-header .profile-stats-counters .stat {
    min-width: 120px;
  }
}

/* Copenhagen's split button positions itself absolutely; anchor it to the
   options cell so it cannot drift over the counters panel. */
.profile-header .profile-info .options {
  position: relative;
  justify-self: end;
  align-self: start;
  min-width: 0;
}
/* the inherited rule stretches this to `width: 100%`, which left the button
   floating away from the name it belongs to */
.profile-header .user-profile-actions {
  width: auto;
  margin-bottom: 0;
}
.profile-header .user-profile-actions .split-button,
.profile-header .split-button {
  display: inline-flex;
  width: auto;
}
.profile-header .user-profile-actions {
  position: relative;
}
/* the follow control is empty on your own profile */
.profile-header .options .community-follow:empty {
  display: none;
}

/***** 17. Request page *****/

.request-title {
  font-family: var(--anvil-font-heading);
  font-size: 38px;
  font-weight: 600;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  line-height: 1.05;
  border-bottom: var(--anvil-rule);
  padding-bottom: 20px;
  margin: 34px 0 26px;
}

/* Conversation entries are separated by a hairline, not boxed. */
.request-container .comment-wrapper,
.request-container .comment {
  border: 0;
  border-bottom: 1px solid var(--anvil-steel-100);
  background: none;
  padding: 22px 0;
  margin: 0;
}
.request-container .comment-body {
  font-family: var(--anvil-font-body);
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--anvil-steel-600);
}
.request-container .comment-avatar img,
.request-container .comment-avatar {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
}
/* Agent replies get the dark tile with the safety glyph. */
.request-container .comment-wrapper .icon-agent,
.comment-wrapper.comment-official .comment-avatar {
  background-color: var(--anvil-steel-900);
  color: var(--anvil-brand);
}

/* Detail panel */
.request-sidebar {
  flex: 0 1 320px;
  min-width: 280px;
  border: 1px solid var(--anvil-border);
  background-color: #fff;
  padding: 0;
  align-self: flex-start;
}
@media (min-width: 1024px) {
  .request-sidebar {
    position: sticky;
    top: calc(var(--anvil-header-h) + 24px);
  }
}
.request-sidebar .collapsible-sidebar-title {
  display: block;
  background-color: var(--anvil-steel-900);
  color: #fff;
  font-family: var(--anvil-font-heading);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 12px 16px;
  margin: 0;
  border: 0;
}
.request-sidebar .collapsible-sidebar-body {
  padding: 4px 16px 12px;
}
.request-sidebar dl,
.request-sidebar .request-details {
  margin: 0;
}
.request-sidebar dt {
  font-family: var(--anvil-font-body);
  font-size: 14.5px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--anvil-steel-400);
}
.request-sidebar dd {
  font-family: var(--anvil-font-body);
  font-size: 14.5px;
  color: var(--anvil-ink);
  margin: 0;
}
.request-sidebar dd time,
.request-sidebar .request-id {
  font-family: var(--anvil-font-mono);
  font-size: 13px;
}
.request-sidebar .request-details > div,
.request-sidebar dl > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--anvil-steel-100);
}
.request-sidebar .request-details > div:last-child,
.request-sidebar dl > div:last-child {
  border-bottom: 0;
}

/* Composer */
.comment-container textarea,
.request-container textarea {
  min-height: 110px;
  border: 1px solid var(--anvil-border-input);
  font-family: var(--anvil-font-body);
  font-size: 16.5px;
  padding: 13px 14px;
}
.comment-form-controls {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
}
.comment-form-controls .mark-as-solved {
  background-color: #fff;
  border: 1px solid var(--anvil-steel-900);
  color: var(--anvil-ink);
}
.comment-form-controls .button-large:not(.mark-as-solved),
.comment-form-controls input[type="submit"] {
  background-color: var(--anvil-brand);
  border-color: var(--anvil-brand);
  color: var(--anvil-on-brand);
}

/***** 18. Service catalog *****/

/* The handoff's one image slot. With no image the band is the same CSS
   treatment as the community banner (explicitly sanctioned in the handoff);
   `settings.services_banner` drops an image in behind the same scrim. */
.section.service-catalog-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  max-width: none;
  width: auto;
  height: auto;
  margin: 26px 0 0;
  padding: 44px 40px 38px;
  background-color: var(--anvil-steel-800);
  background-image:
    radial-gradient(120% 140% at 88% 12%, rgba(255, 209, 0, 0.16), transparent 58%),
    var(--anvil-dark-texture);
  background-size: auto;
  border: 1px solid var(--anvil-steel-900);
}
.section.service-catalog-hero.has-image {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.section.service-catalog-hero.has-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(20, 24, 29, 0.72);
}
.service-catalog-hero-hazard {
  position: absolute;
  top: 0;
  inset-inline: 0;
  height: 10px;
  background-image: var(--anvil-hazard-wide);
  z-index: 2;
}
.service-catalog-hero-copy,
.service-catalog-hero-stats {
  position: relative;
  z-index: 1;
}
.service-catalog-hero-copy {
  max-width: 660px;
}
.service-catalog-hero-title {
  font-family: var(--anvil-font-heading);
  font-size: 40px;
  line-height: 1.02;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #fff;
  text-wrap: balance;
  margin: 0 0 14px;
}
.service-catalog-hero-subtitle {
  font-family: var(--anvil-font-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--anvil-steel-300);
  margin: 0;
  max-width: 52ch;
}
.service-catalog-hero-stats {
  display: flex;
  gap: 34px;
}
.service-catalog-hero-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: 0;
  padding: 0;
  box-shadow: none;
}
.service-catalog-hero-stat-value {
  font-family: var(--anvil-font-mono);
  font-size: 22px;
  color: var(--anvil-brand);
  line-height: 1;
}
.service-catalog-hero-stat-label {
  font-family: var(--anvil-font-heading);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--anvil-steel-400);
}

.service-catalog-hero + .container > .sub-nav {
  padding-top: 18px;
}
.container > h1 {
  font-family: var(--anvil-font-heading);
  font-size: 40px;
  font-weight: 600;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  line-height: 1.0;
  border-bottom: var(--anvil-rule);
  padding-bottom: 20px;
  margin: 10px 0 26px;
}

/* Category rail */
.service-catalog-sidebar {
  flex: 0 1 236px;
  min-width: 200px;
  gap: 0;
  padding-inline-start: 12px;
  margin-inline-start: -12px;
}
.service-catalog-sidebar .sidenav-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid var(--anvil-steel-100);
  background: none;
  overflow: visible;
  font-family: var(--anvil-font-body);
  font-size: 15.5px;
  color: var(--anvil-steel-600);
}
.service-catalog-sidebar .sidenav-item .doc-count {
  font-family: var(--anvil-font-mono);
  font-size: 12.5px;
  color: var(--anvil-steel-400);
}
.service-catalog-sidebar .sidenav-item.current {
  background: none;
  color: var(--anvil-ink);
  font-weight: 500;
}
.service-catalog-sidebar .sidenav-item.current::before {
  content: "";
  position: absolute;
  inset-inline-start: -12px;
  top: 6px;
  bottom: 6px;
  width: 3px;
  background-color: var(--anvil-brand);
}

/* Service cards */
.service-catalog-list > h2 {
  font-family: var(--anvil-font-heading);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 0;
  padding: 0;
  margin: 0 0 18px;
}
.service-catalog-list-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--anvil-font-mono);
  font-size: 12.5px;
  color: var(--anvil-steel-400);
  margin: 0 0 18px;
}
.service-catalog-search {
  max-width: 380px;
  margin-bottom: 14px;
}
.service-catalog-items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background-color: var(--anvil-border);
  border: 1px solid var(--anvil-border);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 700px) {
  .service-catalog-items {
    grid-template-columns: minmax(0, 1fr);
  }
}
.service-catalog-item {
  margin: 0;
  padding: 0;
  border: 0;
  background-color: #fff;
  box-shadow: none;
}
.service-catalog-item > a {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  height: 100%;
  padding: 22px;
  border: 0;
  background: none;
  text-decoration: none;
}
.service-catalog-item > a:hover {
  background-color: var(--anvil-steel-050);
  text-decoration: none;
}
.service-catalog-item-icon {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  background-color: var(--anvil-steel-900);
  display: flex;
  align-items: center;
  justify-content: center;
}
.service-catalog-item-icon .anvil-icon {
  font-size: 21px;
  color: var(--anvil-brand);
}
.service-catalog-item-title {
  font-family: var(--anvil-font-heading);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--anvil-ink);
  line-height: 1.2;
}
.service-catalog-item-description {
  font-family: var(--anvil-font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--anvil-steel-500);
}

/* Service detail */
.service-catalog-item-head {
  display: flex;
  align-items: center;
  gap: 20px;
  border-bottom: var(--anvil-rule);
  padding-bottom: 20px;
  margin-bottom: 24px;
}
.service-catalog-item-icon-large {
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  background-color: var(--anvil-steel-900);
  display: flex;
  align-items: center;
  justify-content: center;
}
.service-catalog-item-icon-large .anvil-icon {
  font-size: 32px;
  color: var(--anvil-brand);
}
.service-catalog-item-head h1 {
  font-size: 36px;
  margin: 0;
  border: 0;
  padding: 0;
}
.service-catalog-description {
  font-family: var(--anvil-font-body);
  font-size: 18px;
  line-height: 1.6;
  color: var(--anvil-steel-600);
  max-width: 64ch;
}
.service-catalog-item-rail {
  flex: 0 1 320px;
  min-width: 280px;
}
.service-catalog-item-card {
  border: 1px solid var(--anvil-border);
  background-color: #fff;
  padding: 20px;
}
.service-catalog-item-card-label {
  font-family: var(--anvil-font-heading);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--anvil-steel-500);
  margin: 0 0 6px;
}
.service-catalog-item-card-value {
  font-family: var(--anvil-font-body);
  font-size: 16.5px;
  color: var(--anvil-ink);
  margin: 0 0 16px;
}
.service-catalog-item-card .button,
.service-catalog-item-card [data-garden-id="buttons.button"] {
  display: block;
  width: 100%;
  background-color: var(--anvil-brand) !important;
  border-color: var(--anvil-brand) !important;
  color: var(--anvil-on-brand) !important;
  padding: 14px !important;
}

/***** 19. Approvals *****/

.approval-request-layout {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 44px;
}
.approval-request-main {
  flex: 1 1 460px;
  min-width: 0;
}
.approval-request-rail {
  flex: 0 1 320px;
  min-width: 280px;
}
.approval-request-main > h1 {
  font-family: var(--anvil-font-heading);
  font-size: 36px;
  font-weight: 600;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  line-height: 1.05;
  margin: 0 0 12px;
  border: 0;
  padding: 0;
}
.approval-request-summary {
  font-family: var(--anvil-font-body);
  font-size: 17.5px;
  line-height: 1.55;
  color: var(--anvil-steel-500);
  border-bottom: var(--anvil-rule);
  padding-bottom: 20px;
  margin: 0 0 26px;
}
.approval-request-card {
  border: 1px solid var(--anvil-border);
  background-color: #fff;
  padding: 0;
  margin-bottom: 24px;
}
.approval-request-card > h3 {
  background-color: var(--anvil-steel-050);
  color: var(--anvil-ink);
  font-family: var(--anvil-font-heading);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 12px 18px;
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--anvil-border);
}
.approval-request-rail .approval-request-card > h3 {
  background-color: var(--anvil-steel-900);
  color: #fff;
  font-weight: 500;
  border-bottom: 0;
}
.approval-request-details {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  padding: 18px;
  margin: 0;
}
.approval-request-details-stacked {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  padding: 4px 16px 12px;
}
.approval-request-details dt {
  font-family: var(--anvil-font-body);
  font-size: 13.5px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--anvil-steel-400);
  margin-bottom: 3px;
}
.approval-request-details dd {
  font-family: var(--anvil-font-body);
  font-size: 15px;
  color: var(--anvil-ink);
  margin: 0;
}
.approval-request-details-stacked > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--anvil-steel-100);
}
.approval-request-details-stacked > div:last-child {
  border-bottom: 0;
}
.approval-request-details-stacked dt {
  margin: 0;
}
.approval-request-actions {
  display: flex;
  gap: 10px;
  margin-bottom: 30px;
}
.approval-request-actions .button:first-child,
.approval-request-actions [data-garden-id="buttons.button"]:first-child {
  background-color: var(--anvil-brand) !important;
  border-color: var(--anvil-brand) !important;
  color: var(--anvil-on-brand) !important;
  padding: 13px 26px !important;
}
.approval-request-actions .button-secondary {
  background-color: #fff !important;
  border-color: var(--anvil-steel-900) !important;
  color: var(--anvil-ink) !important;
}
.comment-callout {
  font-family: var(--anvil-font-body);
  font-size: 15.5px;
  color: var(--anvil-steel-500);
  margin: 0 0 16px;
}

/* An odd last card would leave a dead cell showing the gap-line colour; it
   spans the row instead. */
.service-catalog-items > .service-catalog-item:last-child:nth-child(odd),
.section-list > .section-list-item:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

/***** 20. Final corrections *****/

/* Approve is the primary decision; the Garden hook outranks the class. */
#main-content .approval-request-actions [data-garden-id="buttons.button"]:first-child,
#main-content .approval-request-actions .button:first-child {
  background-color: var(--anvil-brand) !important;
  border-color: var(--anvil-brand) !important;
  color: var(--anvil-on-brand) !important;
}

/* Sortable column headers wrap their label in a button/span that resets the
   inherited casing. */
#main-content [data-garden-id="tables.header_cell"] button,
#main-content [data-garden-id="tables.header_cell"] span,
#main-content [data-garden-id="tables.sortable_cell"],
#main-content [data-garden-id="tables.sortable_cell"] * {
  font-family: var(--anvil-font-heading) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  color: #fff !important;
}

/* The search sits in a 440px field, per the handoff toolbar. */
#request-list .search-field,
#main-content [data-garden-id="forms.faux_input"]:has(> svg) {
  max-width: 440px;
}

/* Copenhagen's split-button leaves an empty menu stub next to the label. */
.user-profile-actions .split-button-menu:empty,
.profile-header .split-button > *:empty {
  display: none;
}

/* The "fields marked with an asterisk" note carries the section rule. */
.form > .form-field:first-of-type {
  margin-top: 0;
}
#main-content.form > p,
.form > p {
  font-family: var(--anvil-font-body);
  font-size: 16.5px;
  color: var(--anvil-steel-500);
}
#main-content.form > p:first-of-type,
.form > p:first-of-type {
  border-bottom: var(--anvil-rule);
  padding-bottom: 18px;
  margin: 0 0 26px;
}

/***** 21. Responsive — drawer widths *****/

@media (max-width: 1023px) {
  .anvil-main-col {
    padding: 0 24px 80px;
  }
  .header {
    gap: 14px;
  }
}

@media (max-width: 767px) {
  /* The lockup keeps the mark and the wordmark; the qualifier is dropped so
     the bar still fits a 44px drawer toggle and a 44px user menu. */
  .header {
    padding-inline: 16px;
    gap: 10px;
  }
  .header .logo a {
    gap: 8px;
  }
  .anvil-brand-overline {
    display: none;
  }
  .anvil-brand-name {
    font-size: 17px;
    letter-spacing: 0.12em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .header .logo {
    min-width: 0;
    overflow: hidden;
  }
  .anvil-main-col {
    padding: 0 18px 72px;
  }

  /* Type steps down; the hero stacks to one column. */
  .hero {
    padding: 40px 18px 44px;
  }
  .hero-title {
    font-size: 38px;
    line-height: 1.02;
  }
  .hero-subtitle {
    font-size: 16.5px;
  }
  .hero .hero-search .search input[type="search"] {
    padding: 15px 12px;
    font-size: 16px;
  }
  .hero .hero-search input[type="submit"] {
    padding: 0 16px;
    font-size: 11.5px;
    letter-spacing: 0.12em;
  }

  h1,
  .page-header h1,
  .section-header h1,
  .article-title,
  .article h1,
  .request-title,
  .post-title,
  .profile-info h1.name,
  .community-header h1 {
    font-size: 30px;
    line-height: 1.05;
  }
  .category-header h1 {
    font-size: 30px;
  }
  .error-page h1 {
    font-size: 34px;
  }
  .search-results-title {
    font-size: 26px;
  }
  h2,
  .section-title,
  .section > h2,
  .home-section > h2,
  .recent-activity-header,
  .comment-heading {
    font-size: 19px;
    letter-spacing: 0.06em;
  }
  .community-banner-title {
    font-size: 28px;
  }
  .service-catalog-hero-title {
    font-size: 26px;
  }

  /* Side rails stack under the content. */
  .article-container,
  .search-results,
  .request-container,
  .post-info-container,
  .approval-request-layout,
  .service-catalog-main-content {
    flex-direction: column;
    gap: 28px;
  }
  .article-sidebar,
  .search-results-sidebar,
  .request-sidebar,
  .post-sidebar,
  .approval-request-rail,
  .service-catalog-item-rail,
  .service-catalog-sidebar {
    position: static;
    flex: 1 1 auto;
    width: 100%;
    max-height: none;
  }

  /* Banners and bands lose their generous padding. */
  .community-image {
    padding: 34px 20px 28px;
    min-height: 0;
  }
  .community-banner-geo {
    display: none;
  }
  .community-banner-stats {
    position: static;
    margin-bottom: 14px;
  }
  .section.service-catalog-hero {
    padding: 32px 20px 26px;
  }
  .service-catalog-hero-stats {
    gap: 22px;
  }

  /* Grids collapse to a single column. */
  .blocks-list,
  .topics-list,
  .section-list,
  .service-catalog-items,
  .section-tree,
  .article-relatives,
  .approval-request-details {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Wide tables scroll inside their container rather than crushing — the
     container scrolls, not the table, so the columns stay aligned. */
  #main-content.requests,
  #main-content [data-garden-id="tables.table"] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Post rows: the stat columns sit under the title. */
  .striped-list-item {
    flex-wrap: wrap;
    gap: 10px;
  }
  .striped-list-info {
    flex: 1 1 100%;
  }
  .striped-list-count-item {
    width: auto;
    min-width: 84px;
    text-align: start;
  }

  /* Recent activity meta drops below the title. */
  .recent-activity-item {
    grid-template-columns: minmax(0, 1fr);
  }
  .recent-activity-item h3,
  .recent-activity-item .recent-activity-item-link,
  .recent-activity-item .recent-activity-item-meta {
    grid-area: auto;
  }
  .recent-activity-item .recent-activity-item-meta {
    margin-inline-start: 0;
    gap: 14px;
  }

  /* Category header stacks; the count moves under the description. */
  .category-header {
    gap: 16px;
  }
  .category-header .page-header-meta {
    padding-top: 0;
    flex-basis: 100%;
  }

  /* Every control clears a 44px tap target. */
  .button,
  .button-large,
  .post-to-community,
  .article-vote,
  .subscribe-button,
  .article-subscribe button,
  .section-subscribe button,
  .community-follow button,
  .error-page-link,
  .user-profile-actions button,
  .anvil-utility-link,
  .anvil-tree-row,
  .anvil-tree-collapse,
  .search-results-sidebar .sidenav-item,
  .service-catalog-sidebar .sidenav-item,
  .multibrand-filter-list a.sidenav-item,
  .sidenav-item,
  .promoted-articles-item a,
  .striped-list-title,
  .breadcrumbs li a,
  .footer-language-selector .dropdown-toggle,
  #main-content [data-garden-id="buttons.button"],
  #main-content [data-garden-id="tabs.tab"] {
    min-height: 44px;
  }
  .article-share .share li a,
  .post-share .share li a {
    width: 44px;
    height: 44px;
  }
  .breadcrumbs li a,
  .promoted-articles-item a,
  .striped-list-title,
  .anvil-utility-link {
    display: flex;
    align-items: center;
  }
  .user-nav a.submit-a-request,
  .comment-form-controls .button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* Content-tag picker (new post) — Copenhagen ships it unstyled. */
.content-tag-input,
[data-content-tag-input],
.form-field .content-tag-field input[type="text"] {
  width: 100%;
  max-width: 100%;
  padding: 13px 14px;
  font-family: var(--anvil-font-body);
  font-size: 16.5px;
  border: 1px solid var(--anvil-border-input);
}
.content-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}
.content-tag-item,
.content-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--anvil-border-input);
  background-color: #fff;
  padding: 6px 10px;
  font-family: var(--anvil-font-heading);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--anvil-ink);
}

/* ==========================================================================
   ANVIL — review round 1
   ========================================================================== */

/***** Search fields must not resize when the clear (x) button appears *****/
/* Copenhagen injects the clear button as a flex item once the field has a
   value; without a fixed row height the field grew as soon as you typed. */
.anvil-sidebar-search .search,
.sub-nav .search-container .search,
.service-catalog-search {
  min-height: 40px;
}
.anvil-sidebar-search .search input[type="search"],
.sub-nav .search-container .search input[type="search"] {
  line-height: 20px;
}
.anvil-sidebar-search .clear-button,
.sub-nav .search-container .clear-button,
.hero .hero-search .clear-button {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  align-self: center;
  padding: 0;
  margin: 0;
}
.hero .hero-search .search {
  min-height: 56px;
  align-items: center;
}
.hero .hero-search input[type="submit"] {
  align-self: stretch;
}

/***** Home — the category grid was clearing the heading's rule *****/
/* `.knowledge-base` sets its own top padding and the grid is the section's
   first block child, so the h2's bottom margin collapsed through it. */
.section.knowledge-base > .section-title,
.knowledge-base .section-title {
  margin-bottom: 22px;
  position: relative;
  z-index: 1;
}
.section.knowledge-base .categories.blocks {
  margin-top: 0;
  padding-top: 0;
}
.categories.blocks .blocks-list {
  margin-top: 0;
}

/***** Article page — the rail reads on the right of the content *****/
.article-container {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 44px;
}
.article-container > .article {
  order: 1;
  flex: 1 1 480px;
}
.article-container > .article-sidebar {
  order: 2;
  flex: 0 1 216px;
}
/* Breadcrumbs need air under the sticky bar. */
.sub-nav {
  padding-top: 12px;
}
.breadcrumbs {
  margin-top: 8px;
}

/***** Grids: never show a dead cell in the gap-line colour *****/
/* The 1px "gap line" is the container's background showing through; an unused
   track therefore paints a grey block. Drawing the lines on the items instead
   keeps the hairlines and leaves empty tracks transparent. */
.blocks-list,
.topics-list,
.service-catalog-items,
.section-list {
  background-color: transparent;
  border: 0;
  gap: 0;
}
.blocks-item,
.topics-item,
.service-catalog-item,
.section-list-item {
  border-top: 1px solid var(--anvil-border);
  border-left: 1px solid var(--anvil-border);
}
.blocks-list,
.topics-list,
.service-catalog-items,
.section-list {
  border-right: 1px solid var(--anvil-border);
  border-bottom: 1px solid var(--anvil-border);
  /* the trailing edges only make sense once there is at least one item */
}
.blocks-list:empty,
.topics-list:empty,
.service-catalog-items:empty,
.section-list:empty {
  border: 0;
}

/***** Tabs must not shift on hover *****/
/* The hover and current states added a 5px border, moving the row by 5px.
   The border is always present and only changes colour. */
.my-activities-sub-nav .collapsible-nav-list li,
.my-activities-nav .collapsible-nav-list li,
.profile-nav .collapsible-nav-list li,
.collapsible-nav-border .collapsible-nav-list li {
  border-bottom: 5px solid transparent;
  margin-bottom: -1px;
}
@media (min-width: 768px) {
  .my-activities-sub-nav .collapsible-nav-list li:hover,
  .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-color: var(--anvil-steel-150);
    margin-bottom: -1px;
  }
  .my-activities-sub-nav .collapsible-nav-list li.current,
  .my-activities-nav .collapsible-nav-list li.current,
  .profile-nav .collapsible-nav-list li.current,
  .collapsible-nav-border .collapsible-nav-list li.current,
  .my-activities-sub-nav .collapsible-nav-list li.current:hover,
  .my-activities-nav .collapsible-nav-list li.current:hover,
  .profile-nav .collapsible-nav-list li.current:hover,
  .collapsible-nav-border .collapsible-nav-list li.current:hover {
    border-bottom-color: var(--anvil-brand);
    margin-bottom: -1px;
  }
}

/***** Search results keeps its search field *****/
/* The rest of the theme hides Copenhagen's in-page field on desktop because
   the rail carries one; on the results page itself people expect to refine
   the query where they are. */
@media (min-width: 1024px) {
  .search-results-container .sub-nav .search-container,
  body:has(.search-results) .sub-nav .search-container {
    display: flex;
    flex: 0 1 auto;
  }
}

/***** Community — NEW POST buttons *****/
a.post-to-community,
button.post-to-community,
.community-header .post-to-community {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--anvil-brand);
  border: 1px solid var(--anvil-brand);
  color: var(--anvil-on-brand);
  font-family: var(--anvil-font-heading);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 12px 22px;
  text-decoration: none;
  box-shadow: none;
}
a.post-to-community:hover,
button.post-to-community:hover,
.community-header .post-to-community:hover {
  background-color: var(--anvil-brand-darker);
  border-color: var(--anvil-brand-darker);
  color: var(--anvil-on-brand);
  text-decoration: none;
}
.community-footer a.post-to-community,
.post-sidebar a.post-to-community {
  background-color: var(--anvil-steel-900);
  border-color: var(--anvil-steel-900);
  color: #fff;
}
.community-footer a.post-to-community:hover,
.post-sidebar a.post-to-community:hover {
  background-color: var(--anvil-steel-800);
  border-color: var(--anvil-steel-800);
  color: #fff;
}

/***** Profile — activity feed and contribution rows *****/
/* Every profile glyph is a bare ink mark. The Articles / Posts tabs use
   `.profile-contribution-icon` while the overview uses
   `.profile-activity-icon`, so both are covered here and read identically. */
.profile-activity-item .profile-activity-icon,
.profile-contribution-icon,
.activity-item-icon,
.profile-activity-list .icon {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  background-color: transparent;
  background-image: none;
  color: var(--anvil-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
}
.profile-activity-item .profile-activity-icon svg,
.profile-contribution-icon svg,
.activity-item-icon svg {
  width: 17px;
  height: 17px;
  color: var(--anvil-ink);
  stroke: currentColor;
}
.profile-activity-item .profile-activity-icon .anvil-icon,
.profile-contribution-icon .anvil-icon {
  font-size: 17px;
  color: var(--anvil-ink);
}

/* Contribution cards: one hairline box, no fill, no shadow. */
.profile-contribution,
.profile-activity-item .profile-contribution {
  border: 1px solid var(--anvil-border);
  background-color: #fff;
  padding: 16px 18px;
  box-shadow: none;
}

/* The split button leaves an empty stub beside the label. */
.user-profile-actions.split-button > *:not(button),
.profile-header .options > *:empty,
.profile-header .split-button-menu {
  display: none;
}

/* The article rail's current item takes the safety bar, not a fill. */
.article-sidebar .collapsible-sidebar-body a.sidenav-item.current-article,
.article-sidebar .sidenav-item.current-article,
.article-sidebar a.sidenav-item[aria-current="page"] {
  background: none;
  background-color: transparent;
  color: var(--anvil-ink);
  font-weight: 500;
}

/* `.post-to-community` is Copenhagen's wrapper span — the control inside it is
   the `.button`. Styling the wrapper painted a filled block behind an outlined
   button; the accent belongs on the button itself. */
.post-to-community,
.community-header .post-to-community,
.community-footer .post-to-community,
.post-sidebar .post-to-community {
  display: inline-flex;
  background: none;
  border: 0;
  padding: 0;
  box-shadow: none;
}
.post-to-community > .button,
.post-to-community > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--anvil-brand);
  border: 1px solid var(--anvil-brand);
  color: var(--anvil-on-brand);
  font-family: var(--anvil-font-heading);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 12px 22px;
  text-decoration: none;
  box-shadow: none;
}
.post-to-community > .button:hover,
.post-to-community > a:hover {
  background-color: var(--anvil-brand-darker);
  border-color: var(--anvil-brand-darker);
  color: var(--anvil-on-brand);
  text-decoration: none;
}
/* the closing call to action and the post rail use the ink variant */
.community-footer .post-to-community > .button,
.community-footer .post-to-community > a,
.post-sidebar .post-to-community > .button,
.post-sidebar .post-to-community > a {
  background-color: var(--anvil-steel-900);
  border-color: var(--anvil-steel-900);
  color: #fff;
  width: 100%;
}
.community-footer .post-to-community > .button:hover,
.community-footer .post-to-community > a:hover,
.post-sidebar .post-to-community > .button:hover,
.post-sidebar .post-to-community > a:hover {
  background-color: var(--anvil-steel-800);
  border-color: var(--anvil-steel-800);
  color: #fff;
}
.post-sidebar .post-to-community {
  display: flex;
  width: 100%;
}

/* Gap-line grids: draw the hairline on each card and overlap the edges, so an
   unused track shows nothing at all instead of a framed empty box. */
.blocks-list,
.topics-list,
.service-catalog-items,
.section-list {
  background-color: transparent;
  border: 0;
  gap: 0;
  /* The cards overlap their edges by 1px, which puts the last row's bottom
     border and the last column's right border just outside the grid's content
     box. `overflow: hidden` was clipping exactly those two edges, so a hovered
     card in the bottom row looked cut off along the bottom. */
  overflow: visible;
}
.blocks-item,
.topics-item,
.service-catalog-item,
.section-list-item {
  border: 1px solid var(--anvil-border);
  margin: 0 -1px -1px 0;
}

/* The topics grid is cut at three classes upstream, so the gap reset has to
   match that specificity to land. */
.topics .blocks-list.topics-list {
  gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
@media (max-width: 700px) {
  .topics .blocks-list.topics-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
   ANVIL — review round 2
   ========================================================================== */

/***** Profile activity feed *****/
/* Guide's class is `.profile-activity-icon` on a `.profile-activity` row (not
   `.profile-activity-item`), which is why the earlier rule never landed. The
   glyph tile matches the category marks: dark square, safety glyph. */
/* The activity glyph is a bare mark, not a tile — the dark square reads as a
   category badge and was too heavy for a feed row. */
.profile-activity .profile-activity-icon,
.profile-activity-list .profile-activity-icon {
  position: static;
  inset: auto;
  width: 30px;
  height: 30px;
  background-color: transparent;
  background-image: none;
  color: var(--anvil-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  box-shadow: none;
}
.profile-activity .profile-activity-icon svg,
.profile-activity-list .profile-activity-icon svg {
  position: static;
  top: auto;
  transform: none;
  width: 17px;
  height: 17px;
  color: var(--anvil-ink);
  stroke: currentColor;
}
/* The inherited layer already lays each row out as
   grid(icon | content) with the icon spanning both rows — keep that and only
   restyle the tile. */
.profile-activity-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-family: var(--anvil-font-body);
  font-size: 15px;
  color: var(--anvil-steel-500);
  margin: 0 0 10px;
}
.profile-activity-header .user-avatar {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
}
.profile-activity-header time,
.profile-activity-header .meta-data {
  font-family: var(--anvil-font-mono);
  font-size: 12.5px;
  color: var(--anvil-steel-400);
}
.profile-activity > .profile-activity-body,
.profile-activity > div:not(.profile-activity-icon) {
  min-width: 0;
  flex: 1 1 auto;
}
.profile-activity-contribution,
.profile-contribution {
  border: 1px solid var(--anvil-border);
  background-color: #fff;
  padding: 16px 18px;
  box-shadow: none;
}

/* The follow control renders as an empty div on your own profile; Copenhagen
   leaves a whitespace text node inside it, so `:empty` never matched and the
   bordered box read as a stray dot beside "Edit profile". */
.profile-header .options .community-follow:not(:has(button)) {
  display: none;
}

/***** Community post — comments were double-boxed *****/
/* Guide nests these as `li.comment > div.comment-wrapper`, and both were
   carrying the card border. The list item is the card; the wrapper is plain. */
.comment-list > li.comment {
  border: 1px solid var(--anvil-steel-100);
  background-color: #fff;
  padding: 16px;
  margin: 0 0 12px;
  list-style: none;
}
.comment-list > li.comment > .comment-wrapper {
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
}

/* A comment's vote control is a quiet inline stack, not a bordered box —
   only the post itself gets the framed vote column. */
.comment-vote {
  border: 0;
  background: none;
  padding: 0;
  width: auto;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.comment-vote .vote-sum {
  font-family: var(--anvil-font-heading);
  font-size: 15px;
  font-weight: 600;
}

/* The post's own moderation menu sits under the vote column; keep it aligned
   with it rather than floating loose. */
.post-info-container > .post-vote,
.post-vote {
  align-self: flex-start;
}
.comment-actions-container,
.post-actions-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* "Official comment" is a checkbox row, not a stacked label. */
.comment-ccs,
.comment-form-controls .checkbox,
.comment-form-controls label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--anvil-font-heading);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--anvil-steel-500);
}
.comment-form-controls input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--anvil-brand);
}

/***** Search fields — one size, everywhere *****/
#main-content [data-garden-id="forms.faux_input"]:has(> svg) {
  max-width: 440px;
  min-height: 44px !important;
  height: 44px !important;
  padding: 0 12px !important;
  align-items: center !important;
}
/* Only the input *inside* a faux_input surrenders its own border and padding —
   the wrapper is the field there. A standalone Garden input (the new-request
   subject, for one) keeps its own box. */
#main-content [data-garden-id="forms.faux_input"] [data-garden-id="forms.input"] {
  border: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  background: none !important;
}
/* Copenhagen renders the icon as a sibling of the form, so the *container* is
   the visual field, not the form inside it. */
/* `flex-basis` is a *main-axis* size: `.sub-nav` stacks to a column at phone
   widths, where a 380px basis became a 380px-tall search box. Sizing with
   width/max-width keeps it 380px wide on desktop and harmless when stacked. */
.sub-nav .search-container {
  flex: 0 1 auto;
  width: 100%;
  max-width: 380px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  background-color: #fff;
  border: 1px solid var(--anvil-border-input);
  min-height: 44px;
}
.sub-nav .search-container:focus-within {
  outline: 2px solid var(--anvil-brand);
  outline-offset: -1px;
}
.sub-nav .search-container .search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  background: none;
  border: 0;
  margin: 0;
}
.sub-nav .search-container .search input[type="search"] {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  box-shadow: none;
  font-family: var(--anvil-font-body);
  font-size: 15px;
  padding: 0;
}
.sub-nav .search-container .search input[type="search"]:focus {
  outline: none;
}
.sub-nav .search-container .search input[type="submit"] {
  display: none;
}
.sub-nav .search-container .search-icon {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  color: var(--anvil-steel-400);
  position: static;
  transform: none;
  margin: 0;
}

/* Garden's search field is div[forms.field] > div[forms.faux_input] > svg +
   input. The bare `input` selector in the form section was giving the inner
   input its own border and padding, so the control read as a box inside a box. */
#main-content [data-garden-id="forms.faux_input"] {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
#main-content [data-garden-id="forms.faux_input"] > svg {
  flex: 0 0 auto;
  align-self: center;
  width: 17px;
  height: 17px;
  margin: 0;
  position: static;
  transform: none;
  color: var(--anvil-steel-400);
}
#main-content [data-garden-id="forms.faux_input"] input,
#main-content [data-garden-id="forms.faux_input"] input[type="text"],
#main-content [data-garden-id="forms.faux_input"] input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  border: 0 !important;
  background: none !important;
  padding: 0 !important;
  min-height: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  font-family: var(--anvil-font-body) !important;
  font-size: 15px !important;
}
#main-content [data-garden-id="forms.field"]:has([data-garden-id="forms.faux_input"] > svg) {
  max-width: 440px;
}

/* The request-list result tally is a machine count. Scoped to the list — the
   same Garden hook carries the new-request form's required-fields note. */
#request-list > p,
#approval-request-list > p,
#request-list [data-garden-id="typography.paragraph"],
#approval-request-list [data-garden-id="typography.paragraph"] {
  font-family: var(--anvil-font-mono);
  font-size: 12.5px;
  color: var(--anvil-steel-400);
}

/* Comment row: author line, body, then the vote/menu cluster on the right. */
/* The body is a sibling of the author row inside `.comment-info`, so the row
   has to wrap and let the body claim a full line of its own. */
.comment-list > li.comment .comment-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 14px;
}
.comment-list > li.comment .comment-author {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
}
.comment-list > li.comment .comment-actions-container {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
.comment-list > li.comment .comment-vote {
  flex-direction: row;
  gap: 4px;
  align-items: center;
}
.comment-list > li.comment .comment-body {
  flex: 1 1 100%;
  margin-top: 10px;
}

/* Restoring the field on the results page had un-hidden it everywhere, because
   the field styling sits later in the file than the desktop hide. Re-assert
   both, last: hidden on desktop (the rail carries search), shown on the
   results page where refining the query in place is the expected move. */
@media (min-width: 1024px) {
  .sub-nav .search-container {
    display: none;
  }
  .search-results-container .sub-nav .search-container,
  body:has(.search-results) .sub-nav .search-container {
    display: flex;
  }
}

/* ==========================================================================
   ANVIL — card hover
   The inherited layer gave cards a lift-and-shadow hover
   (`transform: translateY(-2px)` + `box-shadow` + a brand border). Anvil moved
   the border onto `.blocks-item` and zeroed the shadow token, so all that
   survived was the 2px lift — which broke the shared hairlines between cards
   and left a gap at the seam. That is the sloppiness.

   The hover is now flat, in the theme's own language: the card fills with the
   panel tint and its hairline goes to ink. No movement, no shadow, no radius.
   ========================================================================== */

.blocks-item-link,
.topics-item .blocks-item-link,
.service-catalog-item > a,
.section-list-item > a {
  transform: none;
  box-shadow: none;
  transition: none;
}
.blocks-item-link:hover,
.blocks-item-link:focus-visible,
.topics-item .blocks-item-link:hover,
.service-catalog-item > a:hover,
.section-list-item > a:hover {
  transform: none;
  box-shadow: none;
  border-color: transparent;
  background: none;
  text-decoration: none;
}

/* The fill and the hairline belong to the bordered box, so the tint reaches
   the card's edges instead of stopping short of the border. */
.blocks-item,
.topics-item,
.service-catalog-item,
.section-list-item {
  transition: background-color 0.12s ease, border-color 0.12s ease;
}
.blocks-item:hover,
.topics-item:hover,
.service-catalog-item:hover,
.section-list-item:hover,
.blocks-item:focus-within,
.topics-item:focus-within,
.service-catalog-item:focus-within,
.section-list-item:focus-within {
  background-color: var(--anvil-steel-050);
  border-color: var(--anvil-steel-900);
  /* the cards overlap their edges by 1px, so the darker hairline has to sit
     above its neighbours or it gets clipped along the seam */
  position: relative;
  z-index: 1;
}

/* The blocks below the tree keep their height too, so nothing can be squeezed
   out of the rail's scrolling column. */
.anvil-sidebar-search,
.anvil-sidebar-utility,
.anvil-sidebar-footer {
  flex: 0 0 auto;
}

/* The rail itself no longer scrolls — the tree inside it does — so the blocks
   after the tree are pinned within the viewport-height column. */
@media (min-width: 1024px) {
  .anvil-sidebar-panel {
    height: auto;
    max-height: calc(100vh - var(--anvil-header-h));
    overflow: hidden;
  }
}

/* ==========================================================================
   ANVIL — attribution control
   A solid ink block that flips to the safety accent on hover: the fill wipes
   in from the left, the label and mark invert, and the arrow commits. It is
   the same ink -> accent language as the primary buttons, so it reads as a
   control rather than a caption, without going back to the hazard stripe.
   ========================================================================== */

.anvil-sidebar-footer {
  border-top: 1px solid var(--anvil-steel-100);
  margin-top: 6px;
  padding: 14px 18px 16px;
}

.anvil-attribution {
  /* `position: relative` is needed to contain the accent wipe — but the
     inherited floating-tag rule also sets `left: 50%` / `bottom: 22px`, which
     were inert under `position: static` and start moving the block the moment
     it is positioned. Clear the offsets and the stacking with it. */
  position: relative;
  inset: auto;
  z-index: auto;
  transform: none;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px;
  border: 1px solid var(--anvil-steel-900);
  box-shadow: none;
  transition: color 0.2s ease, border-color 0.2s ease;
}
/* the accent wipe: painted over the block's own background, under its text */
.anvil-attribution::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--anvil-brand);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.anvil-attribution:hover,
.anvil-attribution:focus-visible {
  border-color: var(--anvil-brand);
}
.anvil-attribution:hover::after,
.anvil-attribution:focus-visible::after {
  transform: scaleX(1);
}

/* the safety square echoes the header lockup; it inverts with the fill */
.anvil-attribution-mark {
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  background-color: var(--anvil-brand);
  transition: background-color 0.2s ease;
}
.anvil-attribution:hover .anvil-attribution-mark,
.anvil-attribution:focus-visible .anvil-attribution-mark {
  background-color: var(--anvil-steel-900);
}

.anvil-attribution-text {
  padding: 0;
  font-family: var(--anvil-font-heading);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.2;
  white-space: nowrap;
}
.anvil-attribution-text b {
  color: var(--anvil-brand);
  font-weight: 600;
  transition: color 0.2s ease;
}
.anvil-attribution:hover .anvil-attribution-text b,
.anvil-attribution:focus-visible .anvil-attribution-text b {
  color: var(--anvil-steel-900);
}

/* the arrow marks it as leaving the help centre, and only commits on hover */
.anvil-attribution .anvil-attribution-arrow {
  margin-inline-start: auto;
  flex: 0 0 auto;
  font-size: 15px;
  color: var(--anvil-steel-900);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.2s ease, transform 0.28s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.anvil-attribution .anvil-attribution-arrow::before {
  content: "arrow_forward";
}
.anvil-attribution:hover .anvil-attribution-arrow,
.anvil-attribution:focus-visible .anvil-attribution-arrow {
  opacity: 1;
  transform: none;
}

/* the stripe element is gone from the markup; keep the old hook harmless */
.anvil-attribution-stripe {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .anvil-attribution,
  .anvil-attribution::after,
  .anvil-attribution-mark,
  .anvil-attribution-text b,
  .anvil-attribution-arrow {
    transition: none;
  }
}

/* ==========================================================================
   ANVIL — focus rings
   Two fields were reachable by keyboard but gave no visible focus:
   the hero search (its field border is already safety yellow, so the design's
   inset safety ring was invisible against it) and Garden's form inputs (the
   bundle paints its own `outline: 2px solid transparent`).
   ========================================================================== */

/* Hero search: the ring sits outside the field so it reads as a second line
   against the dark band rather than merging with the yellow border. */
.hero .hero-search .search:focus-within,
.hero .search.search-full:focus-within {
  outline: 2px solid var(--anvil-brand);
  outline-offset: 3px;
}

/* Garden inputs, textareas and selects take the design's ring. The bundle's
   own focus style is a transparent outline, so this has to be forced. */
#main-content [data-garden-id="forms.input"]:focus,
#main-content [data-garden-id="forms.input"]:focus-visible,
#main-content [data-garden-id="forms.textarea"]:focus,
#main-content [data-garden-id="forms.select"]:focus,
#main-content [data-garden-id="forms.faux_input"]:focus-within,
#main-content [data-garden-id="forms.file_upload"]:focus-within {
  outline: 2px solid var(--anvil-brand) !important;
  outline-offset: -1px !important;
  border-color: var(--anvil-border-input) !important;
  box-shadow: none !important;
}
/* the rich-text body is a contenteditable div, not an input */
.ck.ck-editor__main > .ck-editor__editable:focus,
.ck.ck-editor__main > .ck-editor__editable.ck-focused {
  outline: 2px solid var(--anvil-brand) !important;
  outline-offset: -1px !important;
  border-color: var(--anvil-border-input) !important;
  box-shadow: none !important;
}

/* ==========================================================================
   ANVIL — tap targets at phone width
   scripts/tap-targets.js measures every interactive control at 390px. These
   are the ones the first responsive pass missed: the two brand links, the
   collapsible nav and sort toggles, the post vote buttons, the profile feed
   links, and the bundled editor's toolbar.
   ========================================================================== */

@media (max-width: 767px) {
  .header .logo a,
  .footer-brand {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .collapsible-nav-toggle,
  .collapsible-sidebar-toggle,
  .dropdown-toggle,
  .comment-sorter .dropdown-toggle,
  .footer-language-selector .dropdown-toggle {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* the vote column stays 56px wide; only the buttons grow */
  .post-vote .vote-up,
  .post-vote .vote-down,
  .comment-vote .vote-up,
  .comment-vote .vote-down,
  .article-vote {
    min-height: 44px;
    min-width: 44px;
  }
  .post-vote {
    padding: 4px 0;
  }

  /* profile feed and activity links */
  .profile-activity-contribution a,
  .profile-contribution-title a,
  .profile-activity-header a,
  .my-activities-table a,
  .subscriptions-table a,
  .recent-articles li a,
  .related-articles li a,
  .search-result-title a,
  .sidenav-item {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* the bundled rich-text editor's toolbar */
  .ck.ck-toolbar .ck-button,
  .ck.ck-toolbar button {
    min-height: 44px;
    min-width: 40px;
  }
  .ck.ck-toolbar {
    flex-wrap: wrap;
  }
}

@media (max-width: 767px) {
  /* Recent-activity rows carry two separate links (topic, then title), so both
     have to clear the target — the row gets taller rather than the links
     overlapping each other. */
  .recent-activity-item-parent,
  .recent-activity-item-link,
  .post-comment-count,
  .post-meta a,
  .comment-author a,
  .comment-meta a,
  .striped-list-title,
  .promoted-articles-item a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* vote controls: the buttons carry no class of their own */
  .post-vote button,
  .comment-vote button,
  .post-actions-wrapper button,
  .comment-actions-container button {
    min-height: 44px;
    min-width: 44px;
  }

  /* form controls were landing a pixel short of the target */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="url"],
  input[type="tel"],
  input[type="number"],
  select,
  #main-content [data-garden-id="forms.input"],
  #main-content [data-garden-id="forms.faux_input"] {
    min-height: 44px;
  }
}

@media (max-width: 767px) {
  /* The last of the undersized controls, from scripts/tap-targets.json:
     the "see more" links, Copenhagen's share row, the search clear button,
     the category-tree leaf links, and Garden's own buttons and inputs. */
  .recent-activity-controls a,
  .see-more-link,
  .community-link,
  .article-sidebar-item,
  .anvil-tree-row,
  .breadcrumbs li a,
  .profile-activity-header a,
  .comment-author,
  .post-meta .post-author {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .article-share .share li a,
  .post-share .share li a {
    width: 44px;
    height: 44px;
  }

  .search .clear-button,
  .anvil-sidebar-search .clear-button,
  .sub-nav .search-container .clear-button,
  .hero .hero-search .clear-button {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
  }

  #main-content [data-garden-id="buttons.button"],
  #main-content [data-garden-id="buttons.anchor"],
  #main-content [data-garden-id="forms.input"],
  #main-content [data-garden-id="tables.cell"] a {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }
}

@media (max-width: 767px) {
  /* section titles in the category tree, and the article's author link */
  .section-tree-title a,
  .article-header .article-meta > a,
  .article-meta > a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* the share row is cut at four classes upstream, so 38px was winning */
  .article-footer .article-share .share li a,
  .post-footer .post-share .share li a {
    width: 44px;
    height: 44px;
  }

  /* Garden's sortable column headers and the column picker */
  #main-content [data-garden-id="tables.sortable_cell"],
  #main-content [data-garden-id="tables.header_cell"] button,
  #main-content [class*="StyledSortableButton"],
  #main-content [aria-label="Show and hide columns"] {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }
}

/* ==========================================================================
   ANVIL — mobile header controls
   Copenhagen anchors the mobile menu with `left:0; right:0; top:71px`, which
   assumes it spans the header. In Anvil it resolves against the 67px nav
   wrapper instead, so the panel came out 67px wide with every label wrapped —
   and pushed the document to 410px. It is now a right-aligned dropdown that
   cannot exceed the viewport.
   ========================================================================== */

@media (max-width: 1023px) {
  /* both header toggles read as part of the dark bar, like the user chip */
  .anvil-sidebar-toggle,
  .nav-wrapper-mobile .menu-button-mobile {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background-color: transparent;
    border: 1px solid var(--anvil-steel-700);
    color: var(--anvil-steel-150);
  }
  .anvil-sidebar-toggle:hover,
  .nav-wrapper-mobile .menu-button-mobile:hover {
    border-color: var(--anvil-brand);
    color: #fff;
    background-color: transparent;
  }
  .anvil-sidebar-toggle .anvil-icon {
    font-size: 22px;
  }
  /* Copenhagen draws this as a 16px glyph inside a 30px circle with 7px of
     padding. Keeping that padding while shrinking the box to 18px left a 2px
     content area — the icon rendered as a dot. */
  .nav-wrapper-mobile .menu-button-mobile .icon-menu {
    background: none;
    padding: 0;
    width: 20px;
    height: 20px;
    border-radius: 0;
  }
  .nav-wrapper-mobile .menu-button-mobile[aria-expanded="true"] {
    border-color: var(--anvil-brand);
    color: #fff;
  }
  .nav-wrapper-mobile .menu-button-mobile[aria-expanded="true"] .icon-menu {
    background: none;
  }
  /* the avatar inside the toggle would blow past 44px */
  .nav-wrapper-mobile .menu-button-mobile .user-avatar {
    display: none;
  }

  /* the panel: right-aligned under the bar, never wider than the viewport */
  .nav-wrapper-mobile {
    position: relative;
  }
  .nav-wrapper-mobile .menu-list-mobile {
    top: calc(100% + 10px);
    right: 0;
    left: auto;
    width: max-content;
    min-width: 240px;
    max-width: calc(100vw - 24px);
    background-color: #fff;
    border: 1px solid var(--anvil-border-input);
    box-shadow: var(--anvil-shadow-menu);
    z-index: 60;
    padding: 6px 0;
  }
  .nav-wrapper-mobile .menu-list-mobile-items {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .nav-wrapper-mobile .menu-list-mobile-items .item {
    margin: 0;
  }
  .nav-wrapper-mobile .menu-list-mobile-items a,
  .nav-wrapper-mobile .menu-list-mobile-items button {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 44px;
    padding: 10px 16px;
    font-family: var(--anvil-font-body);
    font-size: 15px;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    text-align: start;
    color: var(--anvil-ink);
    background: none;
    border: 0;
    white-space: nowrap;
  }
  .nav-wrapper-mobile .menu-list-mobile-items a:hover,
  .nav-wrapper-mobile .menu-list-mobile-items button:hover {
    background-color: var(--anvil-steel-050);
    color: var(--anvil-ink);
    text-decoration: none;
  }
  .nav-wrapper-mobile .menu-list-mobile-items .nav-divider {
    height: 1px;
    background-color: var(--anvil-steel-100);
    margin: 6px 0;
  }
  /* the "submit a request" CTA keeps the accent inside the menu */
  .nav-wrapper-mobile .menu-list-mobile-items a.submit-a-request {
    font-family: var(--anvil-font-heading);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }
  /* Ask AI sits outside the <ul>; keep it on the same rhythm */
  .nav-wrapper-mobile .menu-list-mobile .ask-ai {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    margin: 0;
    padding: 10px 16px;
    border: 0;
    font-family: var(--anvil-font-heading);
    font-size: 12px;
    letter-spacing: 0.14em;
    color: var(--anvil-ink);
  }
}

/* The Articles / Posts tabs render the feed through `.profile-contribution-list`,
   whose own rule paints the glyph on a `--anvil-tint` tile — which in Anvil is
   ink, so the mark was black on black. Match the overview: bare ink glyph. */
.profile-contribution-list .profile-contribution-icon,
[dir="rtl"] .profile-contribution-list .profile-contribution-icon {
  width: 30px;
  height: 30px;
  background: none;
  background-color: transparent;
  color: var(--anvil-ink);
  border-radius: 0;
}
.profile-contribution-list .profile-contribution-icon svg {
  width: 17px;
  height: 17px;
  color: var(--anvil-ink);
  stroke: currentColor;
}

/* The activity tables scroll inside `#main-content.requests`, and that works —
   the container clips and scrolls. Chromium still propagates the clipped
   table's layout overflow to the viewport, though, so the *page* gained a
   phantom 144px horizontal scroll with nothing visible in it. `contain: paint`
   stops the propagation while leaving the container's own scrolling intact.
   Verified: document scrollWidth 1167 -> 1024, window maxScrollX 144 -> 0. */
#main-content.requests {
  contain: paint;
}
#main-content [data-garden-id="tables.table"] {
  contain: paint;
}

/* ==========================================================================
   ANVIL — mobile stacking corrections (profile & community post)
   Two separate faults, both measured at 390px:
   1. The profile avatar spans grid rows 1-2 while the stats row is placed in
      row 2 column 1 — they occupied the same cell, so the first stat label sat
      behind the avatar. The stats were also stretching to 125px tall each.
   2. `.post-header` and `.post-info-container` stack to a column at this width,
      which turns `flex: 1 1 320px` on the title into a 320px *height* — the
      same main-axis trap as the sub-nav search. That is the empty band under
      the post title.
   ========================================================================== */

@media (max-width: 767px) {
  /* --- profile header --------------------------------------------------- */
  .profile-header .profile-info .profile-avatar {
    grid-area: 1 / 1 / 2 / 2;
  }
  .profile-header .profile-info .basic-info {
    grid-area: 1 / 2 / 2 / 3;
    align-self: center;
  }
  .profile-header .profile-stats-activity {
    align-items: flex-start;
    gap: 14px 24px;
  }
  /* stats size to their content instead of stretching to the row height */
  .profile-header .profile-stats-activity .stat {
    flex: 0 0 auto;
    width: auto;
    height: auto;
    min-width: 0;
    justify-content: flex-start;
    gap: 2px;
  }
  /* The counters keep the desktop panel's shape — a vertical list of
     label/value rows. Every axis and basis is stated so no inherited
     row-oriented `flex-basis` can leak in as a row height. */
  .profile-header .profile-stats-counters {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0;
  }
  .profile-header .profile-stats-counters .stat {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    height: auto;
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 0;
  }

  /* --- community post --------------------------------------------------- */
  /* the header is a column here, so a px flex-basis would be a height */
  .post-header {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  .post-header .post-title {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
  }
  .post-header .community-follow {
    align-self: flex-start;
  }

  /* the vote column is only 56px — it stays beside the post rather than
     claiming a row of its own */
  .post-info-container {
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
  }
  .post-info-container .post-vote {
    flex: 0 0 48px;
    width: 48px;
  }
  .post-info-container .post-info {
    flex: 1 1 auto;
    min-width: 0;
  }
}

@media (max-width: 767px) {
  /* The stat labels were shrink-wrapping to their longest word and stacking
     six lines deep, which is what made each stat 124px tall. They are two or
     three words — they get a line each and the row wraps between stats. */
  .profile-header .profile-stats .stat-label,
  .profile-header .profile-stats .stat-value,
  .profile-header .profile-stats .stat-value time {
    white-space: nowrap;
  }
  .profile-header .profile-stats-activity .stat {
    margin: 0;
  }
  .profile-header .profile-stats-activity .stat-label {
    margin-right: 0;
  }
}

@media (max-width: 767px) {
  /* The inherited layer gives `.stat-label` `flex-basis: 100px` for a *row*
     layout (fixed-width label, value fills). The activity stats run as a
     column here, so that basis was applying to the label's HEIGHT — 100px of
     empty space between every label and its value. Same main-axis trap as the
     sub-nav search and the post title. */
  .profile-header .profile-stats .stat-label,
  .profile-header .profile-stats .stat-value {
    flex: 0 0 auto;
    height: auto;
  }
  /* the three activity stats are short — run them as a wrapping row */
  .profile-header .profile-stats-activity {
    flex-direction: row;
    flex-wrap: wrap;
  }
}