/* ═══════════════════════════════════════════════════════
   RESET & BASE
═══════════════════════════════════════════════════════ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}
html {
  scroll-behavior: smooth
}
body, html {
  background: var(--bg)
}
body {
  font-family: -apple-system, BlinkMacSystemFont, Roboto, system-ui, "Helvetica Neue", Arial, sans-serif;
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  line-height: 1.6
}
:where(a) {
  color: var(--link)
}
:where(a:visited) {
  color: var(--link-visited)
}
:where(a:hover) {
  color: var(--link-hover)
}
img {
  display: block;
  max-width: 100%
}

/* Global UI containment: long translations and missing-DC diagnostics must never
   expand the document or introduce horizontal page scrolling. */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
}

.container,
.header-inner,
.header-nav,
.mobile-header-menu,
.hero,
main,
.two-col,
.two-col-main,
.two-col-aside,
.popular-grid,
.popular-card,
.sidebar-card,
.sidebar-links,
.article-layout,
.article-sidebar,
.footer-inner,
.footer-links {
  min-width: 0;
  max-width: 100%;
}

.header-nav-link,
.mobile-header-nav-link,
.section-heading,
.popular-card-title,
.sidebar-card-title,
.sidebar-link,
.footer-links a,
.helpful-label.more-questions {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Desktop navigation must remain a single compact row even when an audit
   placeholder expands into Zendesks long missing-translation message. */
.header-nav-link {
  max-width: min(240px, 24vw);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
button {
  font-family: inherit
}

/* ═══════════════════════════════════════════════════════
   SCROLLBARS (global)
   Thin ghost scrollbar applied to every scrollable element.
   Override per-element only when intentional (e.g. textareas
   use a fatter 12px variant for grabbability).
═══════════════════════════════════════════════════════ */

/* Firefox — inherits down the tree */
:root {
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

/* WebKit / Blink — Chrome, Safari, Edge, mobile browsers */
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--text-dim);
}
::-webkit-scrollbar-corner {
  background: transparent;
}


/* ═══════════════════════════════════════════════════════
   BUTTONS (global)
═══════════════════════════════════════════════════════ */

/* secondary / ghost — default for subscribe, actions, follow */
.btn,
.article-subscribe button,
.community-follow button,
.user-profile-actions button,
.split-button button,
.actions button,
.comment-actions button,
.post-actions button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background .15s, border-color .15s, color .15s;
}

.btn:hover,
.article-subscribe button:hover,
.community-follow button:hover,
.user-profile-actions button:hover,
.split-button button:hover,
.actions button:hover,
.comment-actions button:hover,
.post-actions button:hover {
  background: var(--surface2);
  border-color: var(--border);
  color: var(--text);
}

/* primary — filled coral, for primary CTAs */
.btn-primary,
.button,
a.button,
.button-large,
a.button-large {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent);
  border: none;
  border-radius: 100px;
  padding: 8px 20px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: opacity .15s;
}

.btn-primary:hover,
.button:hover,
a.button:hover,
.button-large:hover,
a.button-large:hover {
  opacity: .85;
  color: #fff;
}

.btn-primary:hover {
  background: var(--color-coral-dark, #e03040);
  border-color: var(--color-coral-dark, #e03040);
  color: #fff;
}

/* destructive — delete / remove actions */
.btn-danger {
  color: #e05050;
  border-color: rgba(224, 80, 80, .3);
}

.btn-danger:hover {
  background: rgba(224, 80, 80, .08);
  border-color: rgba(224, 80, 80, .5);
  color: #e05050;
}
@media (max-width: 767px) {
  html, body {
    overflow-x: clip !important;
  }
}

/* ═══════════════════════════════════════════════════════
   DROPDOWNS (global)
═══════════════════════════════════════════════════════ */

.dropdown {
  position: relative;
}

.dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}

.dropdown-toggle:hover {
  background: var(--surface2);
  border-color: var(--accent-border);
  color: var(--text);
}

.dropdown-toggle .dropdown-chevron-icon {
  opacity: .6;
  transition: transform .15s;
}

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

.dropdown-menu {
  position: absolute;
  top: calc(100% + var(--dropdown-gap));
  right: auto;
  left: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--dropdown-panel-radius);
  padding: var(--dropdown-panel-padding);
  min-width: 160px;
  z-index: 100;
  display: none;
  flex-direction: column;
  box-shadow: var(--dropdown-panel-shadow);
}

.dropdown-toggle[aria-expanded="true"] + .dropdown-menu {
  display: flex;
}

.dropdown-menu.dropdown-menu-end {
  right: 0;
  left: auto;
}

.dropdown-menu.dropdown-menu-top {
  top: auto;
  bottom: calc(100% + var(--dropdown-gap));
}

.dropdown-menu a,
.dropdown-menu button {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--dropdown-option-height);
  padding: var(--dropdown-option-padding);
  font-size: var(--dropdown-option-font-size);
  font-weight: 400;
  color: var(--text-muted);
  text-decoration: none;
  border-radius: var(--dropdown-option-radius);
  background: none;
  border: none;
  cursor: pointer;
  width: 100%;
  text-align: left;
  transition: background .12s, color .12s;
}

.dropdown-menu a:hover,
.dropdown-menu a:focus-visible,
.dropdown-menu button:hover,
.dropdown-menu button:focus-visible,
.dropdown-menu a[aria-checked="true"],
.dropdown-menu button[aria-checked="true"] {
  background: var(--surface2);
  color: var(--text);
  outline: none;
}
.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 32px
}
@media (max-width: 900px) {
  .container {
    padding: 0 20px
  }
}

/* External destination confirmation for article/post prose and request-form help links. */
.post-body.prose {
  padding-top: 0;
}

.fav-external-link-dialog {
  width: min(420px, calc(100vw - 32px));
  margin: auto;
  padding: 0;
  overflow: visible;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
}

.fav-external-link-dialog::backdrop {
  background: rgba(0, 0, 0, .72);
  backdrop-filter: blur(4px);
}

.fav-external-link-dialog__inner {
  position: relative;
  padding: 22px;
}

.fav-external-link-dialog__header {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.fav-external-link-dialog__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  transition: color .2s, transform .2s;
}

.fav-external-link-dialog__close:hover {
  color: var(--accent);
}

.fav-external-link-dialog__close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--accent-dim);
}

.fav-external-link-dialog__close:active {
  transform: scale(.96);
}

.fav-external-link-dialog__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--accent-border);
  border-radius: 8px;
  background: var(--accent-dim);
  color: var(--accent);
}

.fav-external-link-dialog__label {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  line-height: 1.2;
  text-transform: uppercase;
}

.fav-external-link-dialog h2 {
  margin: 0;
  font-size: 18px;
  line-height: 1.3;
}

.fav-external-link-dialog p {
  margin: 8px 0 0;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.6;
}

.fav-external-link-dialog__host {
  color: var(--text);
  overflow-wrap: anywhere;
}

.fav-external-link-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 22px;
}

.fav-external-link-dialog__actions button {
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.fav-external-link-dialog__cancel {
  background: var(--surface2);
  color: var(--text);
}

.fav-external-link-dialog__continue {
  border-color: var(--accent) !important;
  background: var(--accent);
  color: #fff;
}

@media (max-width: 520px) {
  .fav-external-link-dialog__inner {
    padding: 20px;
  }

  .fav-external-link-dialog__actions {
    flex-direction: column-reverse;
  }

  .fav-external-link-dialog__actions button {
    width: 100%;
  }

  .fav-external-link-dialog h2 > span {
    display: block;
  }
}

/* ── native Contributions / Following pages ── */
.my-activities-page {
  padding-top: 32px;
  padding-bottom: 80px;
}

.my-activities-page .my-activities-header {
  padding-top: 0;
}

.my-activities-page .my-activities-header h1 {
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 900;
  letter-spacing: -.7px;
  line-height: 1.15;
}

.my-activities-following-header {
  display: flex;
  align-items: center;
  min-height: 36px;
  margin-left: auto;
}

.my-activity-card-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.my-activity-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: inherit;
  text-decoration: none;
  transition: background .15s, border-color .15s, transform .12s;
}

a.my-activity-card:hover,
a.my-activity-card:focus-visible,
.subscription-card:focus-within {
  border-color: var(--accent-border);
  background: var(--surface2);
  outline: none;
}

a.my-activity-card:hover,
a.my-activity-card:focus-visible {
  transform: translateX(4px);
}

.contribution-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "icon header arrow"
    "icon meta arrow";
  column-gap: 18px;
  row-gap: 6px;
}

.my-activity-card__content-icon {
  --fav-tint: color-mix(in srgb, var(--fav-color) 14%, transparent);
  grid-area: icon;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--fav-color);
  border-radius: 10px;
  background: var(--fav-tint);
  color: var(--fav-color);
}

.contribution-parent-icon::before {
  content: '';
  width: 18px;
  height: 18px;
  background: var(--fav-icon-fill);
  mask: var(--fav-icon) center / contain no-repeat;
  -webkit-mask: var(--fav-icon) center / contain no-repeat;
}

.contribution-parent-icon--topic {
  --fav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a4 4 0 0 1-4 4H8l-5 3V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4z'/%3E%3Cpath d='M8 9h8M8 13h5'/%3E%3C/svg%3E");
}

.my-activity-card__header {
  grid-area: header;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.my-activity-card__title {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.my-activity-card__meta {
  grid-area: meta;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  min-width: 0;
  color: var(--text-muted);
  font-size: 12px;
}

.my-activity-card__meta .meta-data {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.my-activity-card__meta .meta-data + .meta-data::before {
  content: '·';
  margin-right: 3px;
  color: var(--text-dim);
}

.my-activity-card__meta .article-meta-icon {
  margin-right: 0;
}

.my-activity-card__arrow {
  grid-area: arrow;
  align-self: center;
  color: var(--text-dim);
  font-size: 20px;
  transition: color .15s, transform .15s;
}

.contribution-card:hover .my-activity-card__arrow,
.contribution-card:focus-visible .my-activity-card__arrow {
  color: var(--accent);
  transform: translateX(4px);
}

.subscription-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 76px;
  padding-block: 16px;
}

.my-activity-card__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border: 1px solid var(--border);
  border-radius: 50%;
  object-fit: cover;
}

.my-activity-card__avatar--content {
  border-color: var(--accent-border);
  background: var(--accent-dim);
  color: var(--accent);
}

.my-activity-card__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-width: 0;
}

.subscription-card .my-activity-card__header {
  gap: 8px;
}

.subscription-card .subscriptions-subscribe {
  align-self: center;
}

.subscriptions-subscribe button,
.subscriptions-subscribe a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 13px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}

.subscriptions-subscribe button:hover,
.subscriptions-subscribe a:hover,
.subscriptions-subscribe button:focus-visible,
.subscriptions-subscribe a:focus-visible {
  border-color: var(--accent-border);
  background: var(--accent-dim);
  color: var(--accent);
  outline: none;
}

.my-activities-page .no-activities {
  padding: 32px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-muted);
  text-align: center;
}

/* ── Approval requests (native Zendesk renderer) ── */
#approval-request-list .approval-list-title,
#approval-request-list > div:has([data-garden-id="dropdowns.combobox.field"]) > [data-garden-id="typography.font"]:first-child {
  position: relative;
  display: flex !important;
  align-items: center;
  gap: 16px;
  margin: 0 0 32px;
  color: var(--text) !important;
  font-size: clamp(26px, 3vw, 34px) !important;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -.7px;
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: normal;
}

#approval-request-list .approval-list-title::before,
#approval-request-list > div:has([data-garden-id="dropdowns.combobox.field"]) > [data-garden-id="typography.font"]:first-child::before {
  content: '';
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  border: 1px solid var(--accent);
  border-radius: var(--dropdown-panel-radius);
  background: var(--accent-dim);
}

#approval-request-list .approval-list-title::after,
#approval-request-list > div:has([data-garden-id="dropdowns.combobox.field"]) > [data-garden-id="typography.font"]:first-child::after {
  content: '';
  position: absolute;
  left: 17px;
  top: 50%;
  width: 22px;
  height: 22px;
  background: var(--accent);
  mask: var(--fav-icon) center / contain no-repeat;
  -webkit-mask: var(--fav-icon) center / contain no-repeat;
  transform: translateY(-50%);
}

.approval-list-page {
  padding-top: 38px;
  padding-bottom: 80px;
}

#approval-request-list > div {
  max-width: none;
  padding: 0;
}

#approval-request-list > div:has(> .approval-detail-preview) {
  gap: 0 !important;
  margin-top: 0 !important;
}

#approval-request-list > div:has(> [data-garden-id="typography.font"]:first-child):has([data-garden-id="dropdowns.combobox.field"]) {
  gap: 0 !important;
  row-gap: 0 !important;
}

/* Search and status filter row emitted by Zendesk's native component. */
.approval-list-controls {
  display: flex !important;
  align-items: stretch !important;
  gap: 14px !important;
}

.approval-list-controls > .approval-list-search-control {
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 0 !important;
}

.approval-list-controls > .approval-list-status-control {
  display: flex !important;
  flex-direction: column !important;
  flex: 0 0 280px !important;
  width: 280px !important;
  min-width: 220px !important;
}

.approval-list-controls > .approval-list-status-control > [data-garden-id="dropdowns.combobox"] {
  flex: 1 1 auto !important;
  height: 50px !important;
  margin: 0 !important;
}

#approval-request-list [data-garden-id="forms.faux_input"] {
  display: flex !important;
  align-items: center !important;
  min-height: 50px;
  padding: 0 !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  background: var(--surface) !important;
  color: var(--text) !important;
  font-family: inherit !important;
  font-size: 14px !important;
  box-shadow: none !important;
}

#approval-request-list [data-garden-id="forms.media_figure"] {
  position: static !important;
  inset: auto !important;
  align-self: center !important;
  flex: 0 0 auto;
  margin: 0 12px 0 16px !important;
  transform: none !important;
  color: var(--text-dim) !important;
}

#approval-request-list [data-garden-id="forms.media_input"] {
  align-self: stretch !important;
  width: 100% !important;
  min-height: 0 !important;
  padding: 0 16px 0 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--text) !important;
  font-family: inherit !important;
  font-size: 14px !important;
  box-shadow: none !important;
  outline: none !important;
}

#approval-request-list .approval-list-search-field {
  border: 1px solid var(--border) !important;
  background: var(--surface) !important;
}

#approval-request-list [data-garden-id="forms.faux_input"]:focus-within {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 4px var(--accent-dim) !important;
}

#approval-request-list label {
  color: var(--text-muted) !important;
  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

#approval-request-list [data-garden-id="dropdowns.combobox.field"] > label:not([hidden]) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

#approval-request-list button[aria-haspopup="listbox"],
#approval-request-list [role="combobox"] {
  height: 50px !important;
  min-height: 50px;
  padding-block: 0 !important;
  border-color: var(--border) !important;
  border-radius: var(--radius-sm) !important;
  background: var(--surface) !important;
  color: var(--text) !important;
  font-family: inherit !important;
  box-shadow: none !important;
}

#approval-request-list [data-garden-id="dropdowns.combobox.container"],
#approval-request-list [data-garden-id="dropdowns.combobox.input_group"] {
  height: 100% !important;
  min-height: 0 !important;
  align-items: center !important;
}

#approval-request-list [data-garden-id="dropdowns.combobox.value"] {
  color: var(--text) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

#approval-request-list [data-garden-id="dropdowns.combobox.floating"] {
  border: 1px solid var(--border) !important;
  border-radius: var(--dropdown-panel-radius) !important;
  background: var(--surface) !important;
  box-shadow: var(--dropdown-panel-shadow) !important;
  overflow: hidden !important;
}

#approval-request-list [role="listbox"] {
  padding: 8px !important;
  border: 0 !important;
  border-radius: inherit !important;
  background: var(--surface) !important;
}

#approval-request-list [role="option"] {
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  height: var(--dropdown-option-height) !important;
  min-height: var(--dropdown-option-height) !important;
  max-height: var(--dropdown-option-height) !important;
  padding: 0 14px !important;
  border: 0 !important;
  border-radius: var(--dropdown-option-radius) !important;
  background: transparent !important;
  color: var(--text-muted) !important;
  font-family: inherit !important;
  font-size: var(--dropdown-option-font-size) !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  box-shadow: none !important;
}

#approval-request-list [role="option"]:hover,
#approval-request-list [role="option"][aria-selected="true"] {
  background: var(--surface2) !important;
  color: var(--text) !important;
}

#approval-request-list [role="option"] > svg {
  display: none !important;
}

.approval-list-table {
  width: 100%;
  margin-top: 28px;
  border-collapse: separate !important;
  border-spacing: 0 10px !important;
}

.approval-list-table thead th {
  padding: 0 18px 6px !important;
  border: 0 !important;
  color: var(--text-dim) !important;
  font-family: inherit !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .08em;
  text-align: start !important;
  text-transform: uppercase;
}

.approval-list-table tbody td {
  padding: 18px !important;
  border-top: 1px solid var(--border) !important;
  border-bottom: 1px solid var(--border) !important;
  background: var(--surface) !important;
  color: var(--text-muted) !important;
  font-family: inherit !important;
  font-size: 13px !important;
  text-align: start !important;
}

.approval-list-table tbody tr {
  position: relative;
  cursor: pointer;
}

.approval-list-table tbody td:first-child {
  border-left: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.approval-list-table tbody td:last-child {
  border-right: 1px solid var(--border) !important;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.approval-list-table tbody tr:hover td {
  border-color: var(--accent-border) !important;
  background: var(--surface2) !important;
}

.approval-list-table a {
  color: var(--text) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

.approval-list-table tbody td:first-child a::after {
  content: '';
  position: absolute;
  z-index: 1;
  inset: 0;
  border-radius: var(--radius-sm);
}

.approval-list-table tbody tr:has(td:first-child a:focus-visible) td {
  border-color: var(--accent) !important;
  background: var(--surface2) !important;
}

.approval-preview-status {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.approval-preview-status--pending {
  border-color: var(--accent-border);
  background: var(--accent-dim);
  color: var(--accent);
}

.approval-preview-status--approved {
  border-color: rgba(36, 213, 72, .35);
  background: rgba(36, 213, 72, .1);
  color: var(--color-green);
}

.approval-preview-status--denied {
  color: var(--text-muted);
}

.approval-detail-preview {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.approval-detail-preview__back {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  align-self: flex-start;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.approval-detail-preview__back:hover { color: var(--accent); }

.approval-detail-preview__header {
  position: relative;
  padding: 8px 0 20px;
  border-bottom: 1px solid var(--border);
}

.approval-detail-preview__header::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 72px;
  height: 3px;
  border-radius: 999px;
  background: var(--accent);
}

.approval-detail-preview__header h1 {
  margin: 14px 0 6px;
  color: var(--text);
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -1px;
}

.approval-detail-preview__header p,
.approval-detail-preview__card p {
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.6;
}

.approval-detail-preview__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 20px;
  align-items: start;
}

.approval-detail-preview__card {
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.approval-detail-preview__main {
  border-left: 3px solid var(--accent);
}

.approval-detail-preview__card h2 {
  margin: 0 0 14px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  line-height: 1.4;
  text-transform: uppercase;
}

.approval-detail-preview__card-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 14px;
}

.approval-detail-preview__card-title-row h2 {
  margin-bottom: 0;
}

.approval-detail-preview__note {
  margin-top: 22px;
  padding: 18px;
  border-radius: var(--radius-xs);
  background: var(--bg);
}

.approval-detail-preview__note strong {
  display: block;
  margin-bottom: 10px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  line-height: 1.4;
  text-transform: uppercase;
}

.approval-detail-preview__facts dl,
.approval-detail-preview__facts dl > div { margin: 0; }

.approval-detail-preview__facts dl > div {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 12px;
  padding: 9px 0;
}

.approval-detail-preview__facts dt {
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.approval-detail-preview__facts dd {
  color: var(--text-muted);
  font-size: 13px;
}

.approval-detail-preview__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.approval-detail-preview__actions h2 { margin-bottom: 4px; }

.approval-detail-preview__buttons {
  display: flex;
  gap: 10px;
  flex: 0 0 auto;
}

.approval-detail-preview__buttons button {
  min-height: 44px;
  padding: 8px 20px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  cursor: default;
}

.approval-detail-preview__deny {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
}

.approval-detail-preview__approve {
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
}

#approval-request-list .approval-list-empty,
#approval-request-list > div:has([data-garden-id="dropdowns.combobox.field"]) > [data-garden-id="typography.font"]:last-child:not(:first-child) {
  display: block;
  width: 100%;
  margin: 28px 0 0 !important;
  padding: 40px 24px !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  background: var(--surface) !important;
  color: var(--text-muted) !important;
  text-align: center;
  box-sizing: border-box;
}

#approval-request-list .approval-list-empty[hidden] {
  display: none !important;
}

@media (max-width: 700px) {
  .approval-list-controls {
    flex-direction: column !important;
    gap: 10px !important;
  }

  .approval-list-controls > .approval-list-status-control {
    flex-basis: auto !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  #approval-request-list .approval-list-title,
  #approval-request-list > div:has([data-garden-id="dropdowns.combobox.field"]) > [data-garden-id="typography.font"]:first-child {
    gap: 12px;
    margin-bottom: 24px;
    font-size: clamp(22px, 6.3vw, 28px) !important;
    line-height: 1.08;
  }

  #approval-request-list .approval-list-title::before,
  #approval-request-list > div:has([data-garden-id="dropdowns.combobox.field"]) > [data-garden-id="typography.font"]:first-child::before {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
  }

  #approval-request-list .approval-list-title::after,
  #approval-request-list > div:has([data-garden-id="dropdowns.combobox.field"]) > [data-garden-id="typography.font"]:first-child::after {
    left: 14.5px;
    width: 19px;
    height: 19px;
  }

  .approval-list-page {
    padding-top: 24px;
    padding-bottom: 56px;
  }

  .approval-list-table {
    display: block;
    margin-top: 20px;
  }

  .approval-list-table thead {
    display: none;
  }

  .approval-list-table tbody,
  .approval-list-table td {
    display: block;
    width: 100%;
  }

  .approval-list-table tbody {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .approval-list-table tbody tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 8px;
    row-gap: 5px;
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
  }

  .approval-list-table tbody td {
    display: inline-flex;
    align-items: center;
    width: auto;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  .approval-list-table tbody td:first-child {
    width: 100%;
    margin-bottom: 3px;
    padding: 0 !important;
    border: 0 !important;
    font-size: 15px !important;
  }

  .approval-list-table tbody td:last-child {
    width: 100%;
    margin-top: 7px;
    padding: 0 !important;
    border: 0 !important;
  }

  .approval-list-table tbody td:nth-child(2),
  .approval-list-table tbody td:nth-child(3),
  .approval-list-table tbody td:nth-child(4) {
    width: 100%;
    gap: 7px;
    color: var(--text-muted) !important;
    font-size: 12px !important;
  }

  .approval-list-table tbody td:nth-child(2) {
    --approval-meta-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='5' r='2.5'/%3E%3Cpath d='M3.5 13c.5-2.4 2-3.6 4.5-3.6s4 1.2 4.5 3.6'/%3E%3C/svg%3E");
  }

  .approval-list-table tbody td:nth-child(3) {
    --approval-meta-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2.5 3 11 5-11 5 2-5-2-5zM4.5 8h5'/%3E%3C/svg%3E");
  }

  .approval-list-table tbody td:nth-child(4) {
    --approval-meta-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='3.5' width='11' height='10' rx='1.5'/%3E%3Cpath d='M5 2v3M11 2v3M2.5 6.5h11'/%3E%3C/svg%3E");
  }

  .approval-list-table tbody td:nth-child(2)::before,
  .approval-list-table tbody td:nth-child(3)::before,
  .approval-list-table tbody td:nth-child(4)::before {
    content: '';
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    background: var(--text-dim);
    mask: var(--approval-meta-icon) center / contain no-repeat;
    -webkit-mask: var(--approval-meta-icon) center / contain no-repeat;
  }

  .approval-list-table tbody tr:hover td {
    background: transparent !important;
  }

  .approval-detail-preview__layout {
    grid-template-columns: 1fr;
  }

  .approval-detail-preview__header h1 {
    font-size: 28px;
  }

  .approval-detail-preview__card {
    padding: 20px;
  }

  .approval-detail-preview__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .approval-detail-preview__buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .approval-detail-preview__buttons button {
    padding-inline: 12px;
  }

}

@media (max-width: 700px) {
  .my-activities-page {
    padding-top: 24px;
    padding-bottom: 56px;
  }

  .my-activities-page .my-activities-header {
    gap: 16px;
  }

  .my-activities-page .my-activities-sub-nav {
    width: 100%;
  }

  .my-activities-following-header {
    width: 100%;
    margin-left: 0;
  }

  .my-activities-following-header .dropdown-menu {
    right: auto;
    left: 0;
    width: max-content;
    min-width: 160px;
    max-width: calc(100vw - 40px);
  }

  .community-post-list-page .topic-filters .dropdown:first-child .dropdown-menu {
    right: auto;
    left: 0;
  }

  .community-post-list-page .topic-filters .dropdown-menu {
    max-width: calc(100vw - 40px);
  }

  .my-activity-card {
    padding: 16px;
  }

  .my-activity-card__header {
    align-items: flex-start;
    flex-direction: column-reverse;
    gap: 6px;
  }

  .my-activity-card__meta {
    gap: 6px;
  }

  .subscription-card {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .subscription-card .my-activity-card__avatar {
    display: none;
  }
}

/* ═══════════════════════════════════════════════════════
   HEADER
═══════════════════════════════════════════════════════ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(13, 13, 13, .92);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  min-height: var(--header-h)
}

.header-inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px
}

.header-cta {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--accent);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    padding: 6px 16px;
    border-radius: 100px;
    white-space: nowrap;
    flex-shrink: 0;
    justify-self: end;
    transition: background .15s, transform .1s, box-shadow .15s;
    box-shadow: 0 2px 14px rgba(255, 68, 88, .3);
}

/* ── Logo ── */
.header-logo {
  display: flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  flex-shrink: 0
}
.logo-img {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  object-fit: cover
}
.logo-wordmark {
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
  color: var(--text);
  letter-spacing: -.5px
}
.logo-wordmark-dot {
  color: var(--accent)
}
.logo-badge {
  display: inline-flex;
  align-items: center;
  position: relative;
  top: 1px;
  min-height: 18px;
  padding: 0 6px;
  border: 1px solid var(--border);
  border-radius: 100px;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
}

/* ── Desktop nav ── */
.header-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0
}

.header-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 8px;
  background: none;
  border: none;
  cursor: pointer;
  transition: color .15s, background .15s;
  white-space: nowrap;
  font-family: inherit;
  line-height: 1
}
.header-nav-link:hover,
.header-nav-link.active {
  color: var(--text);
  background: var(--surface)
}
.header-nav-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px
}

.dropdown-chevron {
  flex-shrink: 0;
  transition: transform .2s ease;
  color: var(--text-dim)
}
.header-nav-dropdown-trigger[aria-expanded="true"] .dropdown-chevron {
  transform: rotate(180deg)
}
.header-nav-dropdown-trigger { cursor: pointer }

/* ── Desktop dropdown ── */
.header-nav-dropdown {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer
}
.header-nav-dropdown-menu {
  position: absolute;
  top: calc(100% + var(--dropdown-gap));
  left: 0;
  min-width: 200px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--dropdown-panel-radius);
  box-shadow: var(--dropdown-panel-shadow);
  padding: var(--dropdown-panel-padding);
  display: none;
  z-index: 300;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .15s ease, transform .15s ease
}
.header-nav-dropdown-menu.is-open {
  display: block;
  opacity: 1;
  transform: translateY(0)
}
.header-nav-dropdown-menu--right { left: auto; right: 0 }

.header-nav-dropdown-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  font-size: 13px;
  color: var(--text-muted)
}
.header-nav-dropdown-spinner {
  width: 12px;
  height: 12px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: header-nav-spin .6s linear infinite;
  flex-shrink: 0
}
@keyframes header-nav-spin { to { transform: rotate(360deg) } }

.header-nav-dropdown-item {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: var(--dropdown-option-height);
  padding: var(--dropdown-option-padding);
  font-size: var(--dropdown-option-font-size);
  font-weight: 400;
  color: var(--text-muted);
  text-decoration: none;
  border-radius: var(--radius-xs);
  transition: color .12s, background .12s;
  white-space: nowrap
}
.header-nav-dropdown-item svg { flex-shrink: 0; opacity: .6 }
.header-nav-dropdown-item:hover { color: var(--text); background: var(--surface2) }
.header-nav-dropdown-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px }
.header-nav-dropdown-item--danger { color: #ff5c7a }
.header-nav-dropdown-item--danger:hover { background: rgba(255,68,88,.1); color: var(--accent) }
.header-nav-dropdown-divider { height: 1px; background: var(--border); margin: 5px 6px }

/* User trigger */
.header-nav-user-trigger {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  height: 32px;
  gap: 6px;
  padding: 0 12px;
  background: none !important;
  border: none !important;
  box-shadow: none !important
}
.header-nav-avatar {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
  max-width: 26px;
  max-height: 26px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid var(--border);
  flex-shrink: 0;
  display: block
}
.header-nav-avatar--lg { width: 38px; height: 38px; min-width: 38px; min-height: 38px; max-width: 38px; max-height: 38px }

/* Login CTA */
.header-nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--accent);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  text-decoration: none;
  padding: 7px 17px;
  border-radius: 100px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background .15s, transform .1s, box-shadow .15s;
  box-shadow: 0 2px 14px rgba(255,68,88,.3)
}
.header-nav-cta:hover {
  background: #e03347;
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(255,68,88,.45)
}

/* ── Mobile hamburger ── */
.mobile-header-menu-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 38px;
  height: 38px;
  background: none;
  border: none;
  border-radius: 9px;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: opacity .15s
}
.mobile-header-menu-btn:hover { opacity: .7 }
.mobile-header-menu-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }
.hamburger-bar {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--text-muted);
  border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease, width .2s ease
}
.mobile-header-menu-btn.is-open .hamburger-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); background: var(--text) }
.mobile-header-menu-btn.is-open .hamburger-bar:nth-child(2) { opacity: 0; width: 0 }
.mobile-header-menu-btn.is-open .hamburger-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); background: var(--text) }

/* ── Mobile slide-down menu ── */
.mobile-header-menu {
  overflow: hidden;
  max-height: 0;
  transition: max-height .3s cubic-bezier(.4,0,.2,1);
  background: var(--surface);
  border-top: 1px solid var(--border);
}

.mobile-header-menu.is-open { max-height: 80vh; overflow-y: auto }
.mobile-header-menu-nav { padding: 10px 16px 20px }

.mobile-header-nav-link {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 12px 10px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  border-radius: var(--radius-xs);
  transition: color .12s, background .12s
}
.mobile-header-nav-link:hover { color: var(--text); background: var(--surface2) }
.mobile-header-nav-link svg { flex-shrink: 0; opacity: .55 }
.mobile-header-nav-link--danger { color: #ff5c7a }
.mobile-header-nav-link--danger:hover { background: rgba(255,68,88,.08) }

.mobile-header-nav-accordion { overflow: hidden }
.mobile-header-accordion-trigger { justify-content: flex-start; width: 100% }
.mobile-chevron { margin-left: auto }
.mobile-header-accordion-trigger[aria-expanded="true"] .mobile-chevron { transform: rotate(180deg) }
.mobile-header-accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height .25s ease;
  padding-left: 14px
}
.mobile-header-accordion-content.is-open { max-height: 400px }
.mobile-header-accordion-item {
  display: block;
  padding: 10px 10px 10px 27px;
  font-size: 14px;
  color: var(--text-muted);
  text-decoration: none;
  border-radius: var(--radius-xs);
  transition: color .12s, background .12s
}
.mobile-header-accordion-item:hover { color: var(--text); background: var(--surface2) }

.mobile-header-nav-divider { height: 1px; background: var(--border); margin: 8px 0 }
.mobile-header-nav-user { display: flex; align-items: center; gap: 12px; padding: 12px 10px 8px }
.mobile-header-nav-user-info { display: flex; flex-direction: column; gap: 2px }
.mobile-header-nav-username { font-size: 14px; font-weight: 700; color: var(--text) }
.mobile-header-nav-user-sub { font-size: 12px; color: var(--text-dim) }

.mobile-header-nav-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 6px 0 2px;
  padding: 12px 20px;
  background: var(--accent);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 100px;
  box-shadow: 0 2px 14px rgba(255,68,88,.3);
  transition: background .15s, box-shadow .15s
}
.mobile-header-nav-cta:hover { background: #e03347; box-shadow: 0 4px 20px rgba(255,68,88,.45) }

/* ── Responsive ── */
@media (max-width: 768px) {
  .header-nav { display: none }
  .mobile-header-menu-btn { display: flex }
  .site-header { height: auto; min-height: var(--header-h) }
  .header-inner { height: var(--header-h) }
}

/* ═══════════════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════════════ */

.hero {
  background: linear-gradient(180deg, rgba(255, 68, 88, .06), transparent);
  border-bottom: 1px solid var(--border);
  padding: 40px 0 32px;
  text-align: center
}

.hero-title {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 900;
  letter-spacing: -1px;
  margin-bottom: 6px
}

.hero-sub {
  max-width: 680px;
  margin: 0 auto 20px;
  font-size: 15px;
  color: var(--text-muted);
  text-wrap: balance
}

.pills-strip {
  border-bottom: 1px solid var(--border)
}

.hero-search {
  position: relative;
  max-width: 560px;
  margin: 0 auto
}

.hero-search form.search {
  position: relative;
  margin: 0
}

.hero-search input,
.hero-search input[type="search"],
.hero-search #query {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 14px 52px 14px 50px;
  font-size: 16px;
  color: var(--text);
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  -webkit-appearance: none;
  appearance: none
}

.hero-search input::placeholder,
.hero-search input[type="search"]::placeholder,
.hero-search #query::placeholder {
  color: var(--text-dim)
}

.hero-search input:focus,
.hero-search input[type="search"]:focus,
.hero-search #query:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-dim)
}

.hero-search input[type="search"]::-webkit-search-cancel-button,
.hero-search #query::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  display: none
}

.hero-search-icon {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--text-dim);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center
}

.hero-search-icon svg {
  width: 20px;
  height: 20px;
  display: block
}

.hero-search .clear-button {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  z-index: 3;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 999px;
  background: transparent !important;
  color: var(--text-dim);
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s, transform .2s
}

.hero-search .clear-button:hover {
  color: var(--accent)
}

.hero-search .clear-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--accent-dim)
}

.hero-search .clear-button:active {
  transform: translateY(-50%) scale(.96)
}

.hero-search .clear-button svg {
  width: 12px;
  height: 12px;
  display: block
}

.hero-search .clear-button[hidden],
.hero-search .clear-button:empty {
  display: none;
}

/* Hide clear button when input is empty (no search-has-value on form) */
.hero-search form:not(.search-has-value) .clear-button {
  display: none;
}

.search-wrapper {
  position: relative;
  max-width: 560px;
  margin: 0 auto
}

.search-wrapper .hero-search {
  margin: 0
}

/* ═══════════════════════════════════════════════════════
   HERO SEARCH DROPDOWN
═══════════════════════════════════════════════════════ */

/* Panel — match .header-nav-dropdown-menu / Garden listbox */
zd-autocomplete,
zd-autocomplete-results,
zd-autocomplete-section {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--dropdown-panel-radius) !important;
  box-shadow: var(--dropdown-panel-shadow) !important;
  padding: var(--dropdown-panel-padding) !important;
  overflow: hidden !important;
  color: var(--text) !important;
  margin-top: var(--dropdown-gap) !important;
}

/* Section header "Top articles results" — match .sidebar-card-title */
zd-autocomplete-header,
zd-autocomplete-title,
zd-autocomplete-group-title {
  display: block !important;
  padding: 10px 12px 6px !important;
  margin-bottom: 2px !important;
  background: transparent !important;
  color: var(--text-muted) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  text-align: left !important;
  border-bottom: none !important;
  min-height: 0 !important;
}

/* Universal text / link colour — muted by default, brightens on hover */
zd-autocomplete *,
zd-autocomplete a,
zd-autocomplete a:link,
zd-autocomplete a:visited,
zd-autocomplete a:hover,
zd-autocomplete a:active,
zd-autocomplete a:focus {
  color: var(--text-muted) !important;
  text-decoration: none !important;
  background: transparent !important;
}

/* Hide metadata we don't want */
zd-autocomplete-breadcrumbs,
zd-autocomplete-meta,
zd-autocomplete-description,
zd-autocomplete-breadcrumbs-multibrand {
  display: none !important;
}

/* Nuke Zendesk's own borders, outlines, shadows, and sizing on every
   descendant — pairs with the typography hammer below */
zd-autocomplete,
zd-autocomplete *,
zd-autocomplete-results,
zd-autocomplete-results *,
zd-autocomplete-section,
zd-autocomplete-section * {
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  border: 0 !important;
  border-left: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* Restore the panel's own border + shadow after the nuke above */
zd-autocomplete,
zd-autocomplete-results,
zd-autocomplete-section {
  border: 1px solid var(--border) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .5) !important;
}

/* Restore the header's sidebar-card-title typography after the nuke */
zd-autocomplete-header,
zd-autocomplete-title,
zd-autocomplete-group-title {
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
}

/* Result row container — rounded pill with padding */
zd-autocomplete-multibrand {
  display: block !important;
  position: relative !important;
  padding: 9px 12px !important;
  border-radius: var(--radius-xs) !important;
  cursor: pointer !important;
  transition: color .12s, background .12s !important;
  background: transparent !important;
  overflow: visible !important;
}

/* Kill Zendesk's pink selected-state background */
zd-autocomplete-multibrand::before,
zd-autocomplete-multibrand::after {
  content: none !important;
}

/* Hover / selected — neutral surface2 like Garden options */
zd-autocomplete-multibrand:hover,
zd-autocomplete-multibrand[aria-selected="true"] {
  background: var(--surface2) !important;
}

zd-autocomplete-multibrand:hover,
zd-autocomplete-multibrand:hover *,
zd-autocomplete-multibrand[aria-selected="true"],
zd-autocomplete-multibrand[aria-selected="true"] * {
  color: var(--text) !important;
}

/* Matched-term — inherit everything, no special treatment */
zd-autocomplete-multibrand em,
zd-autocomplete-results em,
zd-autocomplete em {
  font-weight: inherit !important;
  font-size: inherit !important;
  color: inherit !important;
  background: transparent !important;
  font-style: normal !important;
}

/* On touch screens, keep instant-search results inside one stable, scrollable
   panel. iOS otherwise resizes the panel while the keyboard is open, which can
   move a result between touch-down and click and leave lower results trapped
   behind the browser controls. */
@media (max-width: 767px) {
  zd-autocomplete {
    height: min(220px, 32dvh) !important;
    max-height: min(220px, 32dvh) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }

  zd-autocomplete-results,
  zd-autocomplete-section {
    max-height: none !important;
    overflow: visible !important;
  }

  zd-autocomplete-multibrand {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    touch-action: manipulation;
  }
}

/* ═══════════════════════════════════════════════════════
   SEARCH RESULTS
═══════════════════════════════════════════════════════ */

/* ── layout ── */
.search-results {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
  padding: 32px 0 64px;
}

/* ── Search result meta ── */
.search-result-meta-container {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}
.search-result-meta-count,
.search-result-votes {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--text-muted);
}
.search-result-meta-count-icon,
.search-result-votes-icon {
  opacity: .6;
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .search-results {
    grid-template-columns: 1fr;
  }
}

/* ─────────────────────────────────────────
   SIDEBAR
───────────────────────────────────────── */

.search-results-sidebar {
  position: sticky;
  top: 24px;
}

.search-results-sidebar .filters-in-section {
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 24px;
}

.search-results-sidebar .filters-in-section:last-child {
  border-bottom: none;
}

.search-results-sidebar .collapsible-sidebar-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  padding: 0 0 10px;
  cursor: default;
  pointer-events: none;
  color: var(--text-muted);
  gap: 8px;
}

.search-results-sidebar .sidenav-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
  padding: 0;
  flex: 1;
  text-align: left;
  display: block;
}

.search-results-sidebar .collapsible-sidebar-toggle-icon {
  display: none;
}

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

.search-results-sidebar .sidenav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--text-muted);
  text-decoration: none;
  transition: background .15s, color .15s;
  gap: 8px;
}

.search-results-sidebar .sidenav-item:hover {
  background: var(--border-dim);
  color: var(--text);
}

.search-results-sidebar .sidenav-item.current {
  background: rgba(255, 68, 88, .1);
  color: var(--accent);
}

.search-results-sidebar .filter-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-results-sidebar .doc-count {
  font-size: 11px;
  color: var(--text-muted);
  opacity: .6;
  flex-shrink: 0;
}

.search-results-sidebar .see-all-filters {
  font-size: 12px;
  color: var(--accent);
  background: none;
  border: none;
  padding: 6px 10px;
  cursor: pointer;
  text-align: left;
  opacity: .8;
  transition: opacity .15s;
}

.search-results-sidebar .see-all-filters:hover {
  opacity: 1;
}

.search-results-sidebar .sidenav-tag {
  list-style: none;
}

.search-results-sidebar .content-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 68, 88, .12);
  border: 1px solid rgba(255, 68, 88, .3);
  border-radius: 20px;
  padding: 4px 10px 4px 12px;
  font-size: 12px;
  color: var(--accent);
}

.search-results-sidebar .content-tag a {
  display: flex;
  align-items: center;
  color: inherit;
  opacity: .7;
  transition: opacity .15s;
}

.search-results-sidebar .content-tag a:hover {
  opacity: 1;
}

/* ─────────────────────────────────────────
   RESULTS COLUMN
───────────────────────────────────────── */

.search-results-column {
  min-width: 0;
}

.search-results-subheading {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  margin: 0 0 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

/* ─────────────────────────────────────────
   RESULT LIST
───────────────────────────────────────── */

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

.search-results-list li {
  border: none;
}

.search-results-list article {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 10px);
  padding: 14px 20px;
  position: relative;
  transition: background .15s, border-color .15s, transform .12s;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "header"
    "desc"
    "meta";
  align-items: start;
  gap: 8px 20px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

.search-results-list article:hover,
.search-results-list article:focus-within {
  background: var(--surface2);
  border-color: var(--accent-border);
  transform: translateX(4px);
}

/* remove arrow — not needed with this layout */
.search-results-list article::after {
  display: none;
}

/* full card clickable via title link overlay */
.search-result-title a::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

/* col 1 row 1: title container */
.search-result-header {
  grid-area: header;
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
}

/* ── title ── */
.search-result-title-container {
  display: block;
}

.search-result-title {
  font-size: 13px;
  font-weight: 600;
  margin: 0;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-result-title a {
  color: var(--text);
  text-decoration: none;
  transition: color .15s;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* hide vote/comment icons */
.search-result-icons {
  display: none;
}

/* ── breadcrumbs below title ── */
.search-result-breadcrumbs {
  --fav-color: var(--accent);
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 6px;
  align-items: center;
  justify-content: flex-end;
}

.search-result-breadcrumbs li {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  color: var(--text-muted);
}

.search-result-breadcrumbs li + li::before {
  display: none;
}

.search-result-location-pill {
  color: var(--fav-color);
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 9px;
  border: 1px solid color-mix(in srgb, var(--fav-color) 30%, transparent);
  border-radius: 100px;
  background: color-mix(in srgb, var(--fav-color) 15%, transparent);
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color .15s, background .15s, border-color .15s;
}

.search-result-location {
  min-width: 0;
  max-width: 45%;
}

/* col 2: meta-right spans both rows */
.search-result-meta-right {
  grid-area: meta;
  align-self: start;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 0;
  min-width: 0;
  white-space: nowrap;
  font-size: 0;
}

.search-result-meta-right .meta-data {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--text-muted);
  opacity: .6;
}

.search-result-meta-right .meta-data + .meta-data::before {
  content: '·';
  margin: 0 5px;
  opacity: .4;
  font-size: 12px;
}

.search-result-meta-right .search-result-icons {
  display: none;
}

.search-result-location-meta {
  display: none !important;
}

.search-result-description {
  grid-area: desc;
  font-size: 13px;
  color: var(--text-muted);
  text-align: left;
  line-height: 1.55;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.search-result-description em {
  color: var(--accent);
  font-style: normal;
  font-weight: 600;
}

/* ─────────────────────────────────────────
   NO RESULTS
───────────────────────────────────────── */

.no-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 64px 24px;
  gap: 12px;
}

.no-results svg {
  opacity: .25;
  margin-bottom: 8px;
}

.no-results .headline {
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
}

.no-results .action-prompt {
  font-size: 13px;
  color: var(--text-muted);
}

.no-results .action-prompt a {
  color: var(--accent);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: opacity .15s;
}

.no-results .action-prompt a:hover {
  opacity: .8;
}

/* ─────────────────────────────────────────
   GENERATIVE ANSWERS
───────────────────────────────────────── */

.search-results-column .generative-answer {
  background: var(--border-dim);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--text);
}

/* ─────────────────────────────────────────
   PAGINATION (global — mirrors header-nav)
───────────────────────────────────────── */

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2px;
  padding: 32px 0;
}

.pagination .pagination-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
  justify-content: center;
}

.pagination .pagination-list li {
  display: flex;
}

/* same base as .header-nav a */
.pagination a,
.pagination .current-page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  color: var(--text-muted);
  white-space: nowrap;
  transition: color .15s, background .15s;
}

/* same as .header-nav a:hover */
.pagination a:hover {
  color: var(--text);
  background: var(--surface);
}

/* active page — coral tint, same shape */
.pagination .current-page {
  color: var(--accent);
  background: var(--surface);
  font-weight: 600;
}

/* hide text-based icons — replaced with SVGs via JS */
.pagination-next-icon,
.pagination-prev-icon,
.pagination-last-icon,
.pagination-first-icon {
  display: none;
}

/* ─────────────────────────────────────────
   MOBILE
───────────────────────────────────────── */

@media (max-width: 900px) {
  .search-results-sidebar {
    position: static;
  }

  .search-results-sidebar .collapsible-sidebar-toggle {
    cursor: pointer;
    pointer-events: auto;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0;
  }

  .search-results-sidebar .collapsible-sidebar-toggle-icon {
    display: block;
    flex-shrink: 0;
  }

  .search-results-sidebar .x-icon {
    display: none;
  }

  .search-results-sidebar .collapsible-sidebar-toggle[aria-expanded="true"] .x-icon {
    display: block;
  }

  .search-results-sidebar .collapsible-sidebar-toggle[aria-expanded="true"] .chevron-icon {
    display: none;
  }

  .search-results-sidebar .collapsible-sidebar-toggle[aria-expanded="false"] ~ .multibrand-filter-list,
  .search-results-sidebar .collapsible-sidebar-toggle:not([aria-expanded]) ~ .multibrand-filter-list {
    display: none;
  }

  .search-results-sidebar .collapsible-sidebar-toggle[aria-expanded="true"] ~ .multibrand-filter-list {
    display: flex;
    padding-top: 8px;
  }

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

  .search-results-list article {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    gap: 4px 0;
    padding: 14px 16px;
  }

  .search-result-header {
    grid-column: 1;
    grid-row: 1;
    align-items: flex-start;
    gap: 0;
  }

  .search-result-header > .search-result-location {
    display: none;
  }

  .search-result-title,
  .search-result-title a {
    white-space: normal;
    overflow: hidden;
    text-overflow: initial;
  }

  .search-result-title a {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .search-result-description {
    grid-column: 1;
    grid-row: 2;
  }

  .search-result-meta-right {
    grid-column: 1;
    grid-row: 3;
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow: hidden;
  }

  .search-result-meta-right > .meta-data:not(.search-result-location-meta) {
    flex-shrink: 0;
  }

  .search-result-location-meta {
    display: inline-flex !important;
    flex: 0 1 auto;
    gap: 3px !important;
    min-width: 0;
    overflow: hidden;
  }

  .search-result-location-meta .article-meta-icon {
    flex: 0 0 auto;
  }

  .search-result-location-label {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* ═══════════════════════════════════════════════════════
   QUICK ACCESS / STORIES
═══════════════════════════════════════════════════════ */
.quick-access {
  padding: 24px 0;
  border-bottom: 1px solid var(--border)
}
.stories-row {
  display: flex;
  direction: ltr;
  justify-content: flex-start;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
  cursor: grab;
  scrollbar-width: none
}
.stories-row.dragging {
  cursor: grabbing;
  user-select: none;
}
.stories-row::-webkit-scrollbar {
  display: none
}
.story {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 18px 16px 14px;
  cursor: pointer;
  flex-shrink: 0;
  min-width: 100px;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: border-color .2s, background .2s, box-shadow .18s
}
.story:after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  opacity: 0;
  transition: opacity .2s
}
.story:hover:after {
  opacity: 1
}
.story-ring {
  --fav-tint: color-mix(in srgb, var(--fav-color) 14%, transparent);
  width: 75px;
  height: 75px;
  border-radius: 50%;
  position: relative;
  border: 2px solid transparent;
  background: linear-gradient(var(--bg), var(--bg)) padding-box,
              var(--story-ring-gradient) border-box;
  color: var(--fav-color);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .2s, transform .18s;
}
.story-ring::before {
  content: '';
  display: block;
  position: relative;
  z-index: 1;
  mask-image: var(--fav-icon);
  -webkit-mask-image: var(--fav-icon);
  width: 22px;
  height: 22px;
  background-color: var(--fav-icon-fill);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}
.story-ring::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--fav-tint);
  transition: background .2s
}
.story-ring.see-more {
  --fav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='0' y='0' width='15' height='4' rx='1'/%3E%3Crect x='0' y='6' width='15' height='4' rx='1'/%3E%3Crect x='0' y='12' width='15' height='4' rx='1'/%3E%3C/svg%3E");
  background: transparent;
  border: 2px dashed var(--border);
  color: var(--text-muted);
}
.story-ring.see-more::after {
  background: var(--surface2);
}
.story:hover .story-ring {
  transform: translateY(-2px) scale(0.893);
}
.story:hover .story-ring::after {
  background: color-mix(in srgb, var(--fav-color) 20%, transparent)
}
.story:hover .story-ring.see-more {
  background: transparent
}
.story:hover .story-ring.see-more::after {
  background: color-mix(in srgb, var(--accent) 14%, var(--surface2))
}
.story-label {
  font-size: 11.5px;
  font-weight: 400;
  color: var(--text-muted);
  text-align: center;
  max-width: 84px;
  line-height: 1.35;
  transition: color .2s;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.story:hover .story-label {
  color: var(--text)
}

/* ═══════════════════════════════════════════════════════
   RTL CONTENT BOUNDARY
   The Help Center shell always retains one LTR layout. RTL is applied only to
   explicit reading-content islands, never to navigation or component geometry.
═══════════════════════════════════════════════════════ */
html[dir="rtl"],
html[dir="rtl"] body,
html[dir="rtl"] body * {
  direction: ltr !important;
}

html[dir="rtl"] body {
  text-align: left;
}

html[dir="rtl"] .prose,
html[dir="rtl"] .prose * {
  direction: rtl !important;
  text-align: right;
}

/* Isolate mixed-direction text without changing its surrounding component. */
html[dir="rtl"] .story-label,
html[dir="rtl"] .req-list-title,
html[dir="rtl"] .footer-locale-current,
html[dir="rtl"] .footer-locale-option bdi {
  unicode-bidi: plaintext;
}

/* ═══════════════════════════════════════════════════════
   CATEGORY PILLS
═══════════════════════════════════════════════════════ */
.category-pills {
  padding: 12px 0;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none
}
.category-pills::-webkit-scrollbar {
  display: none
}
.category-pills .breadcrumbs {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: max-content
}
.category-pills .breadcrumbs li {
  display: flex;
  flex: 0 0 auto
}
.category-pills .breadcrumbs li::before {
  display: none !important
}
.category-pills .breadcrumbs a,
.category-pills .breadcrumbs span {
  padding: 7px 16px;
  border-radius: 100px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s
}
.category-pills .breadcrumbs a:hover {
  background: var(--accent-dim);
  border-color: var(--accent-border);
  color: var(--accent)
}
.category-pills .breadcrumbs li.current a,
.category-pills .breadcrumbs li[aria-current="page"] a,
.category-pills .breadcrumbs li:last-child a {
  background: var(--accent-dim);
  border-color: var(--accent-border);
  color: var(--accent)
}
@media (max-width: 900px) {
  .category-pills {
    margin-left: -24px;
    margin-right: -24px;
  }

  .category-pills::before,
  .category-pills::after {
    content: '';
    flex-shrink: 0;
    width: 24px;
  }
}

/* ═══════════════════════════════════════════════════════
   PAGE BODY / SECTION HEADING
═══════════════════════════════════════════════════════ */
.page-body {
  padding: 40px 0 80px
}
.section-heading {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.3px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px
}
.section-heading:before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 18px;
  background: var(--accent);
  border-radius: 2px
}
.section-heading a {
  color: inherit !important;
  text-decoration: none !important;
}
.section-heading a:after {
  content: " ›";
  color: var(--accent-dim);
}
.section-heading a:hover::after {
  color: var(--accent);
}

/* ═══════════════════════════════════════════════════════
   POPULAR GRID
═══════════════════════════════════════════════════════ */
@media (min-width: 600px) {
  .popular-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
    gap: 16px;
    margin-bottom: 48px
  }
}
@media (max-width: 599px),
       (orientation: landscape) and (max-height: 500px) and (max-width: 900px) {
.popular-grid {
  display: flex;
  align-items: stretch;
  gap: 16px;
  margin-bottom: 24px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  width: calc(100% + 40px);
  max-width: none;
  padding: 0 20px;
  margin-left: -20px;
  margin-right: -20px;
}

.popular-grid::-webkit-scrollbar {
  display: none;
}

  .popular-grid > * {
    /* Desktop maximum: (1200px container - 64px padding - 32px gaps) / 3. */
    flex: 0 0 clamp(280px, 88vw, 368px);
    min-width: 0;
  }
}

@media (max-width: 1024px) {
  .popular-grid {
    grid-template-columns: repeat(2, 1fr)
  }
}
.popular-card {
  width: 100%;
  height: 145px;
  max-width: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  text-decoration: none;
  color: inherit;
  transition: background .15s, border-color .15s, transform .12s;
  position: relative;
  overflow: hidden
}
.popular-card:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent)
}
.popular-card:hover {
  background: var(--surface2);
  border-color: var(--accent-border);
  transform: translateY(-2px)
}
.popular-card-icon {
  font-size: 28px;
  margin-bottom: 14px
}
.popular-card-title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 4px
}
.popular-card-desc {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden
}
@media (max-width: 380px) {
  .popular-card-desc {
    -webkit-line-clamp: 3;
  }
}

/* ═══════════════════════════════════════════════════════
   TOPICS GRID
═══════════════════════════════════════════════════════ */
.topics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  margin-bottom: 56px
}
.topic-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 18px 20px;
  text-decoration: none;
  color: inherit;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: background .15s, border-color .15s
}
.topic-card:hover {
  background: var(--surface2);
  border-color: var(--accent-border)
}
.topic-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--accent-dim);
  border: 1px solid var(--accent-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0
}
.topic-card-body {
  flex: 1 1;
  min-width: 0
}
.topic-card-name {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 2px
}
.topic-card-count {
  font-size: 12px;
  color: var(--text-muted)
}

/* ═══════════════════════════════════════════════════════
   TWO COL LAYOUT
═══════════════════════════════════════════════════════ */
.two-col {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 40px;
  align-items: start
}
.two-col-aside {
  position: sticky;
  top: calc(var(--header-h) + 20px);
  display: flex;
  flex-direction: column;
  gap: 16px
}
@media (max-width: 1024px) {
  .two-col {
    grid-template-columns: 1fr
  }
  .two-col-aside {
    position: static
  }
  .home-page-aside {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ═══════════════════════════════════════════════════════
   SIDEBAR
═══════════════════════════════════════════════════════ */
.sidebar-card .related-articles-title,
.sidebar-card .recent-articles-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 14px
}
.sidebar-card .related-articles li,
.sidebar-card .recent-articles li {
  display: flex;
  flex-direction: column;
  gap: 2px
}
.sidebar-card .related-articles a,
.sidebar-card .recent-articles a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 13px;
  color: var(--text-muted);
  transition: background .15s, color .15s
}
.sidebar-card .related-articles a:hover,
.sidebar-card .recent-articles a:hover {
  background: var(--surface2);
  color: var(--text)
}
.sidebar-card .related-articles a::before,
.sidebar-card .recent-articles a::before {
  content: ' ';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0
}
.recently-viewed-card:not(:has(.recent-articles li)) {
  display: none
}
.sidebar-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px
}
.sidebar-card-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 14px
}
.sidebar-links {
  display: flex;
  flex-direction: column;
  gap: 2px
}
.sidebar-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 13px;
  color: var(--text-muted);
  transition: background .15s, color .15s
}
.sidebar-link:hover {
  background: var(--surface2);
  color: var(--text)
}
.sidebar-link-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0
}
.sidebar-link-text {
  min-width: 0
}
.sidebar-link--legal,
.sidebar-link:has(.sidebar-link-number) {
  display: block;
  padding-inline-start: 25px;
  overflow-wrap: normal;
  text-indent: -15px;
  word-break: normal
}
.sidebar-link--legal .sidebar-link-dot,
.sidebar-link:has(.sidebar-link-number) .sidebar-link-dot {
  display: inline-block;
  margin-inline-end: 10px;
  vertical-align: .12em
}
.sidebar-link:has(.sidebar-link-number) .sidebar-link-number {
  display: inline;
  color: inherit;
  font-weight: inherit;
  margin-inline-end: .35em;
  white-space: nowrap
}
.sidebar-link--legal .sidebar-link-text,
.sidebar-link:has(.sidebar-link-number) .sidebar-link-text {
  display: inline;
  overflow-wrap: normal;
  word-break: normal
}
.community-user-links .sidebar-link::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  flex: 0 0 5px;
}
.sidebar-current-link-dot {
  background: var(--accent);
  opacity: .6
}

@media (max-width: 600px) {
  .home-page-aside .sidebar-card {
    padding: 16px;
  }

  .home-page-aside .sidebar-card-title {
    margin-bottom: 8px;
  }

  .home-page-aside .sidebar-links {
    gap: 0;
  }

  .home-page-aside .sidebar-link {
    gap: 9px;
    padding: 6px 4px;
  }
}

@media (max-width: 519px) {
  .home-page-aside {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

.contact-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  margin-bottom: 8px;
  transition: background .15s, border-color .15s
}
.contact-btn.primary {
  background: var(--accent);
  color: #fff
}
.contact-btn.primary:hover {
  background: #e03347
}
.contact-btn.secondary {
  background: var(--surface2);
  color: var(--text-muted);
  border: 1px solid var(--border)
}
.contact-btn.secondary:hover {
  border-color: var(--accent);
  color: var(--text)
}

/* ═══════════════════════════════════════════════════════
   BREADCRUMB
═══════════════════════════════════════════════════════ */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 28px;
  flex-wrap: wrap;
  font-size: 13px
}
.breadcrumb a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color .15s
}
.breadcrumb a:hover {
  color: var(--accent)
}
.breadcrumb-sep {
  color: var(--text-dim)
}
.breadcrumb-current {
  color: var(--text);
  font-weight: 500
}


/* ── Article meta items ── */
.article-author-name {
  font-size: 13px;
  color: var(--text-muted);
}
.article-created,
.article-updated,
.article-read-time {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--text-muted);
}
.article-vote-label {
  font-size: 13px;
  color: var(--text-muted);
}
.fav-note-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.fav-tip-title {
  font-size: 13px;
  font-weight: 700;
  color: #9b5de5;
  margin-bottom: 4px;
}

/* ═══════════════════════════════════════════════════════
   ARTICLE
═══════════════════════════════════════════════════════ */
.article-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 48px;
  align-items: start
}
.article-layout > article {
  min-width: 0;
  max-width: 100%;
}
.article-sidebar {
  position: relative;
  min-width: 0;
}
.article-sidebar-inner {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}
.article-category {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: color-mix(in srgb, var(--fav-color) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--fav-color) 30%, transparent);
  color: var(--fav-color);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 100px;
  margin-bottom: 14px
}

.post-topic {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: color-mix(in srgb, var(--fav-color) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--fav-color) 30%, transparent);
  color: var(--fav-color);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 100px;
  margin-bottom: 14px;
}

.post-label-row {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 28px;
  margin-bottom: 14px;
}

.post-label-row .post-topic,
.post-label-row .article-category {
  margin-bottom: 0;
}

.post-label-follow {
  margin-inline-start: auto;
}

.post-state-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  color: var(--text-muted);
  outline: none;
}

.post-state-icon[hidden] {
  display: none;
}

.post-state-icon--featured {
  color: var(--accent);
}

.post-state-icon svg {
  display: block;
  opacity: .65;
}

.post-state-icon--featured > svg {
  opacity: .85;
}
.article-title {
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 900;
  letter-spacing: -.8px;
  line-height: 1.15;
  margin-bottom: 16px
}
.article-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.article-meta-icon {
  flex-shrink: 0;
  opacity: .7;
  vertical-align: middle;
  color: var(--text-muted);
  margin-right: 4px;
}

.article-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-muted)
}

.article-meta a {
  text-decoration: none;
  transition: color .15s;
}
.article-meta a:hover {
  color: var(--accent);
}

.article-mobile-toc {
  display: none;
}

.article-tags {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  vertical-align: middle;
}

.article-tag-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 4px;
  column-gap: 0;
}

.article-tag-item {
  color: var(--text-muted);
  display: flex;
  align-items: center;
  font-size: 13px;
}

.article-tag-item:not(:last-child)::after {
  content: '·';
  color: var(--text-muted);
  margin: 0 6px;
}

.article-tag-item a {
  text-decoration: none;
  transition: color .15s;
}

.article-tag-item a:hover {
  color: var(--accent);
}

.article-author {
  display: flex;
  align-items: center;
  gap: 8px;
}
.article-author-avatar {
  position: relative;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.article-author-avatar .icon-agent {
  display: none;
}
.article-author-avatar .user-avatar {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border);
  display: block;
}
.article-attachments {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.attachments {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.attachment-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color .15s, background .15s;
}

.attachment-item:hover {
  border-color: var(--accent-border);
  background: var(--surface2);
}

.attachment-icon {
  color: var(--accent);
  flex-shrink: 0;
}

.attachment-item > a {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color .15s;
}

.attachment-item > a:hover {
  color: var(--accent);
}

.attachment-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.attachment-meta-item {
  font-size: 11px;
  color: var(--text-muted);
  text-decoration: none;
}

.attachment-meta-item.meta-data:last-child {
  color: var(--accent);
  font-weight: 600;
  transition: opacity .15s;
}

.attachment-meta-item.meta-data:last-child:hover {
  opacity: .8;
}

/* Request sidebar attachment cards: keep file information together and
   reserve the trailing edge for a compact, accessible download action. */
.request-sidebar-attachment {
  gap: 12px;
  min-width: 0;
}

.request-sidebar-attachment-thumbnail {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 5px;
  flex-shrink: 0;
}

.request-sidebar-attachment-details {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}

.request-sidebar-attachment-details > .attachment-meta-item.meta-data {
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.2;
}

.request-sidebar-attachment-name {
  display: block;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color .15s;
}

.request-sidebar-attachment-name:hover {
  color: var(--accent);
}

.attachment-item > .request-sidebar-attachment-download {
  display: inline-flex;
  width: 44px;
  height: 44px;
  margin: -6px -8px -6px 0;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
  border-radius: 50%;
  color: var(--text-muted);
  text-decoration: none;
  transition: color .15s, background .15s;
}

.request-sidebar-attachment-download:hover,
.request-sidebar-attachment-download:focus-visible {
  color: var(--accent);
  background: transparent;
}

.request-sidebar-attachment-download:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.request-sidebar-attachment-download-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 1024px) {
  .article-layout {
    grid-template-columns: 1fr
  }
  .article-sidebar {
    position: static
  }
  .article-sidebar-inner {
    position: static !important;
    width: auto !important;
    transform: none !important;
  }

  .article-sidebar #on-this-page {
    display: none !important;
  }

  .article-mobile-toc {
    display: block;
    position: sticky;
    top: var(--header-h);
    z-index: 150;
    width: calc(100% + 64px);
    margin: 0 -32px 24px;
    padding: 0 32px;
    background: rgba(13, 13, 13, .96);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
  }

  .article-mobile-toc[hidden] {
    display: none !important;
  }

  .article-mobile-toc-toggle {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 56px;
    gap: 10px;
    padding: 12px 0;
    color: var(--text-muted);
    background: transparent;
    border: 0;
    cursor: pointer;
    text-align: left;
  }

  .article-mobile-toc-title {
    flex: 1;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
  }

  .article-mobile-toc-count {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border: 1px solid var(--accent-border);
    border-radius: 999px;
    color: var(--accent);
    background: var(--accent-dim);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
  }

  .article-mobile-toc-chevron {
    flex: 0 0 auto;
    transition: transform .2s ease;
  }

  .article-mobile-toc.is-open .article-mobile-toc-chevron {
    transform: rotate(180deg);
  }

  .article-mobile-toc-panel {
    max-height: min(52vh, 420px);
    margin-inline-end: -32px;
    padding: 4px 0 14px;
    padding-inline-end: 32px;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
  }

  .article-mobile-toc-panel[hidden] {
    display: none;
  }

  .article-mobile-toc-panel .sidebar-link {
    min-height: 42px;
    padding: 10px 12px;
    font-size: 14px;
  }

  .article-body h2[id] {
    scroll-margin-top: calc(var(--header-h) + 72px);
  }
}

@media (max-width: 900px) {
  .article-mobile-toc {
    width: calc(100% + 40px);
    margin-right: -20px;
    margin-left: -20px;
    padding-right: 20px;
    padding-left: 20px;
  }

  .article-mobile-toc-panel {
    margin-inline-end: -20px;
    padding-inline-end: 20px;
  }
}

/* ═══════════════════════════════════════════════════════
   TOC
═══════════════════════════════════════════════════════ */
.toc {
  display: flex;
  flex-direction: column;
  gap: 4px
}
.toc-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 13px;
  color: var(--text-muted);
  transition: background .15s, color .15s
}
.toc-item.active,
.toc-item:hover {
  background: var(--surface2);
  color: var(--text)
}
.toc-item.active {
  background: var(--accent-dim);
  color: var(--accent);
  font-weight: 600
}
.toc-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0
}

/* ═══════════════════════════════════════════════════════
   PROSE
═══════════════════════════════════════════════════════ */
.prose {
  min-width: 0;
  max-width: 100%;
  padding-top: 28px
}
.prose p {
  font-size: 16px;
  line-height: 1.75;
  color: rgba(255, 255, 255, .85);
  margin-bottom: 20px
}
.prose h1 {
  position: relative;
  margin: 44px 0 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-size: clamp(24px, 2.8vw, 28px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.5px
}
.prose h1::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: -1px;
  width: 56px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent)
}
.prose > h1:first-child {
  margin-top: 0
}
.prose h2 {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.3px;
  margin: 36px 0 16px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 10px
}
.prose h2:before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 20px;
  background: var(--accent);
  border-radius: 2px;
  flex-shrink: 0
}
.prose h3 {
  font-size: 16px;
  font-weight: 700;
  margin: 24px 0 10px;
  color: var(--text)
}
.prose :is(ol, ul) > li > :is(h2, h3, h4, h5, h6):first-child {
  margin-top: 0
}
.prose ol,
.prose ul {
  padding-inline-start: 0;
  list-style: none;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px
}
.prose ul > li {
  position: relative;
  padding-inline-start: 20px;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .85)
}
.prose ul > li:before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  position: absolute;
  inset-inline-start: 0;
  top: 9px
}
.prose ul ul > li:before {
  width: 6px;
  height: 6px;
  border-radius: 0;
  top: 10px;
}
.prose li p {
  margin-bottom: 0
}
.prose ol > li {
  position: relative;
  --list-item-indent: 36px;
  padding-inline-start: 36px;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .85);
  scroll-margin-top: 24px;
}
.prose li > ol,
.prose li > ul {
  /* Reduced from 16px to 4px so child items stay close to their parent. */
  padding-inline-start: 4px;
  margin-top: 10px;
  margin-bottom: 0;
  gap: 10px
}
.prose ol {
  counter-reset: ol-counter
}
.prose ol > li:before {
  content: counter(ol-counter);
  counter-increment: ol-counter;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  box-sizing: border-box;
  border-radius: 12px;
  background: var(--accent);
  color: white;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  inset-inline-start: 0;
  top: 2px;
  direction: ltr;
  unicode-bidi: isolate
}
.prose ol[type="a"] > li:before {
  content: counter(ol-counter, upper-alpha)
}
.prose ol[type="i"] > li:before {
  content: counter(ol-counter, upper-roman)
}
.prose ol.list-lower[type="a"] > li:before {
  content: counter(ol-counter, lower-alpha)
}
.prose ol.list-lower[type="i"] > li:before {
  content: counter(ol-counter, lower-roman)
}

/* Article HTML can retain an LTR direction on individual list elements.
   Anchor custom list geometry to the locale so RTL markers still mirror. */
html[dir="rtl"] .prose ul > li {
  padding-left: 0;
  padding-right: 20px
}
html[dir="rtl"] .prose ol > li {
  padding-left: 0;
  padding-right: 36px
}
html[dir="rtl"] .prose li > ol,
html[dir="rtl"] .prose li > ul {
  padding-left: 0;
  padding-right: 4px
}
html[dir="rtl"] .prose ul > li:before,
html[dir="rtl"] .prose ol > li:before {
  left: auto;
  right: 0
}

.prose ol:is(.legal-list, .heading-list) > li {
  --list-item-indent: 0px;
  counter-increment: ol-counter;
  padding-inline-start: 0;
  margin-top: 32px
}
html[dir="rtl"] .prose ol:is(.legal-list, .heading-list) > li {
  padding-right: 0
}
.prose ol:is(.legal-list, .heading-list) > li:first-child {
  margin-top: 0
}
.prose ol:is(.legal-list, .heading-list) > li:before {
  content: none;
  counter-increment: none;
  display: none
}
.prose ol:is(.legal-list, .heading-list) > li > h2 {
  display: block;
  margin: 0 0 16px;
  padding-inline-start: 10px;
  border-inline-start: 3px solid var(--accent);
  line-height: 1.35
}
.prose ol:is(.legal-list, .heading-list) > li > h2:before {
  content: counter(ol-counter) ". ";
  display: inline;
  width: auto;
  height: auto;
  margin: 0;
  background: none;
  border-radius: 0
}
.prose ol.legal-list > li > p {
  margin-inline-start: 13px
}
.prose ol.legal-list > li > ol {
  margin: 16px 0 0;
  padding-inline-start: 0
}

/* Legal hierarchy: 1. Heading > 1.1 > a > i > A > I.
   Decimal labels use inline coral text; shorter labels keep compact bubbles.
   Emphasis steps from solid coral through tinted coral to breadcrumb grey and outline.
   Each nested clause adds 8px; procedural step lists keep their own styling. */
.prose ol.legal-list ol {
  --legal-marker: counter(ol-counter) ".";
  /* Safe fallback for legal documents that nest beyond the named levels. */
  --legal-marker-background: transparent;
  --legal-marker-color: var(--text-muted);
  --legal-marker-border: color-mix(in srgb, var(--text-muted) 45%, transparent);
}
.prose ol.legal-list > li > ol {
  --legal-marker: counters(ol-counter, ".");
  --legal-marker-background: transparent;
  --legal-marker-color: var(--accent);
  --legal-marker-border: transparent;
}
.prose ol.legal-list > li > ol > li > ol {
  --legal-marker: counter(ol-counter, lower-alpha);
  --legal-marker-background: var(--accent);
  --legal-marker-color: white;
  --legal-marker-border: transparent;
}
.prose ol.legal-list > li > ol > li > ol > li > ol {
  --legal-marker: counter(ol-counter, lower-roman);
  --legal-marker-background: var(--surface2);
  --legal-marker-color: white;
  --legal-marker-border: transparent;
}
.prose ol.legal-list > li > ol > li > ol > li > ol > li > ol {
  --legal-marker: counter(ol-counter, upper-alpha);
  --legal-marker-background: var(--accent-dim);
  --legal-marker-color: var(--accent);
  --legal-marker-border: var(--accent-border);
}
.prose ol.legal-list > li > ol > li > ol > li > ol > li > ol > li > ol {
  --legal-marker: counter(ol-counter, upper-roman);
  --legal-marker-background: var(--surface);
  --legal-marker-color: var(--text-muted);
  --legal-marker-border: var(--border);
}
.prose ol.legal-list ol:not(.step-list, .step-list-block, .step-list *, .step-list-block *) > li {
  --list-item-indent: 40px;
  padding-inline-start: var(--list-item-indent);
}
.prose ol.legal-list ol:not(.step-list, .step-list-block, .step-list *, .step-list-block *) > li > p {
  font-size: inherit;
  line-height: inherit;
}
.prose ol.legal-list ol:not(.step-list, .step-list-block, .step-list *, .step-list-block *) > li > p:first-child {
  margin-top: 0;
}
.prose ol.legal-list > li > ol:not(.step-list, .step-list-block) > li {
  --list-item-indent: 40px;
}
.prose ol.legal-list ol ol:not(.step-list, .step-list-block, .step-list *, .step-list-block *) {
  margin-inline-start: calc(8px - var(--list-item-indent));
  padding-inline-start: 0;
}
.prose ol.legal-list ol:not(.step-list, .step-list-block, .step-list *, .step-list-block *) > li:before {
  content: var(--legal-marker);
  width: 24px;
  min-width: 24px;
  padding: 0;
  background: var(--legal-marker-background);
  color: var(--legal-marker-color);
  /* Inset outlines preserve the tested bubble dimensions and text alignment. */
  box-shadow: inset 0 0 0 1px var(--legal-marker-border);
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.prose ol.legal-list > li > ol:not(.step-list, .step-list-block) > li:before {
  /* Right-anchor decimal labels so longer values grow into the outer margin. */
  width: 44px;
  min-width: 44px;
  height: auto;
  padding: 0;
  inset-inline-start: -12px;
  top: 0;
  display: block;
  font-size: inherit;
  line-height: inherit;
  text-align: end;
}
html[dir="rtl"] .prose ol.legal-list ol:not(.step-list, .step-list-block, .step-list *, .step-list-block *) > li {
  padding-left: 0;
  padding-right: var(--list-item-indent);
}
html[dir="rtl"] .prose ol.legal-list ol ol:not(.step-list, .step-list-block, .step-list *, .step-list-block *) {
  /* Mirror nesting even when the article's lists retain dir="ltr". */
  margin-left: 0;
  margin-right: calc(8px - var(--list-item-indent));
  padding-right: 0;
}

@media (max-width: 767px) {
  .prose ol:is(.legal-list, .heading-list) > li {
    padding-inline-start: 0;
    margin-top: 26px
  }
  .prose ol:is(.legal-list, .heading-list) > li > h2 {
    font-size: 16px
  }
}

.prose strong {
  color: var(--text);
  font-weight: 700
}
.prose em {
  color: var(--accent);
  font-style: normal
}
.prose blockquote {
  border-left: 3px solid var(--accent);
  padding: 14px 20px;
  margin: 24px 0;
  background: var(--accent-dim);
  border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
  font-style: italic;
  color: rgba(255, 255, 255, .9)
}
.prose a {
  color: var(--accent);
  text-decoration: none;
  text-underline-offset: 3px
}
.prose hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 32px 0
}
.prose code {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 13px
}
.prose pre.wysiwyg-code-block {
  max-width: 100%;
  margin: 24px 0;
  padding: 14px 20px;
  overflow-x: auto;
  border: 0;
  border-inline-start: 3px solid var(--accent);
  border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
  background: var(--accent-dim);
  color: var(--text);
  font-size: 13px;
  line-height: 1.6;
  tab-size: 2;
  -webkit-overflow-scrolling: touch
}
.prose pre.wysiwyg-code-block > code {
  display: block;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit
}
.prose details > summary::marker {
  color: var(--accent);
}
.prose details.disclosure-block {
  --disclosure-border: var(--border);
  margin: 24px 0;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--disclosure-border);
  border-radius: var(--radius-sm)
}
.prose .disclosure-block > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  list-style: none;
  cursor: pointer;
  color: var(--text);
  font-weight: 700
}
.prose .disclosure-block > summary::marker {
  content: ""
}
.prose .disclosure-block > summary::-webkit-details-marker {
  display: none
}
.prose .disclosure-block > summary > :is(h2, h3, h4, h5, h6) {
  flex: 1;
  min-width: 0;
  margin: 0
}
.prose .disclosure-block > summary > h2::before {
  content: none;
  display: none
}
.prose .disclosure-block > summary::after {
  content: "";
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin-inline-start: auto;
  background:
    linear-gradient(var(--accent), var(--accent)) center / 18px 3px no-repeat,
    linear-gradient(var(--accent), var(--accent)) center / 3px 18px no-repeat;
}
.prose .disclosure-block[open] > summary::after {
  background:
    linear-gradient(var(--accent), var(--accent)) center / 18px 3px no-repeat;
}
.prose .disclosure-block[open] > summary {
  border-bottom: 1px solid var(--disclosure-border)
}
.prose .disclosure-block > ol.step-list-block {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent
}
.prose .disclosure-block > .disclosure-block-body {
  padding: 16px 18px
}
.prose .disclosure-block > .disclosure-block-body > :last-child {
  margin-bottom: 0
}
.prose details.disclosure-block-note {
  --disclosure-border: var(--accent-night-border);
  background: var(--accent-night-gradient);
}
.prose details.disclosure-block-tip {
  --disclosure-border: rgba(155, 93, 229, .25);
  background: rgba(155, 93, 229, .07);
}
.prose .disclosure-block-tip > summary::before {
  content: "💡";
  width: auto;
  height: auto;
  border: 0;
  font-size: 16px;
  line-height: 1;
  transform: none
}
.prose .disclosure-block-tip > summary[data-icon]::before {
  content: attr(data-icon)
}
.prose .disclosure-block-tip[open] > summary::before,
html[dir="rtl"] .prose .disclosure-block-tip:not([open]) > summary::before {
  transform: none
}
.prose zd-tabs {
  display: block;
  max-width: 100%;
  margin: 24px 0
}
.prose zd-tabs .wysiwyg-tabs-bar {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 0 12px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  border: 0 !important;
  white-space: nowrap !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none !important
}
.prose zd-tabs .wysiwyg-tabs-bar::-webkit-scrollbar {
  display: none !important
}
.prose zd-tabs .wysiwyg-tabs-tab {
  appearance: none !important;
  flex: 0 0 auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 7px 16px !important;
  border: 1px solid var(--border) !important;
  border-radius: 100px !important;
  background: var(--surface) !important;
  box-shadow: none !important;
  color: var(--text-muted) !important;
  font: inherit !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: background .15s, border-color .15s, color .15s !important
}
.prose zd-tabs .wysiwyg-tabs-tab::before,
.prose zd-tabs .wysiwyg-tabs-tab::after {
  content: none !important;
  display: none !important
}
.prose zd-tabs .wysiwyg-tabs-tab:hover {
  background: var(--accent-dim) !important;
  border-color: var(--accent-border) !important;
  color: var(--accent) !important
}
.prose zd-tabs .wysiwyg-tabs-tab[aria-selected="true"] {
  background: var(--accent-dim) !important;
  border-color: var(--accent-border) !important;
  color: var(--accent) !important;
  box-shadow: none !important
}
.prose zd-tabs .wysiwyg-tabs-tab:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px !important
}
.prose zd-tabs:is(.tabs-style--box, .tabs-style--note, .tabs-style--tip) .wysiwyg-disclosure-content {
  box-sizing: border-box;
  width: 100%;
  margin: 4px 0 0;
  padding: 16px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface)
}
.prose zd-tabs.tabs-style--note .wysiwyg-disclosure-content {
  border-color: rgba(255, 68, 88, .2);
  background: linear-gradient(135deg, rgba(255, 68, 88, .08), rgba(155, 93, 229, .05))
}
.prose zd-tabs.tabs-style--tip .wysiwyg-disclosure-content {
  border-color: rgba(155, 93, 229, .25);
  background: rgba(155, 93, 229, .07)
}
.prose zd-tabs:is(.tabs-style--box, .tabs-style--note, .tabs-style--tip) .wysiwyg-disclosure-content > :first-child {
  margin-top: 0
}
.prose zd-tabs:is(.tabs-style--box, .tabs-style--note, .tabs-style--tip) .wysiwyg-disclosure-content > :last-child {
  margin-bottom: 0
}
@media (max-width: 600px) {
  .prose zd-tabs:is(.tabs-style--box, .tabs-style--note, .tabs-style--tip) .wysiwyg-disclosure-content {
    padding: 16px
  }
}
.prose figure.wysiwyg-table,
.prose .prose-table-scroll {
  display: block;
  box-sizing: border-box;
  min-width: 0;
  width: 100% !important;
  max-width: 100%;
  margin: 24px 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
.prose table {
  width: 100%;
  margin: 24px 0;
  border: 0 !important;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 14px
}
.prose figure.wysiwyg-table table,
.prose .prose-table-scroll table {
  margin: 0;
}
.prose table tr,
.prose table th,
.prose table td {
  border: 0 !important;
}
.prose table th,
.prose table td {
  padding: 10px 14px;
  text-align: left;
  vertical-align: top
}
.prose table th {
  font-weight: 700;
  color: var(--text)
}
.prose table td {
  color: rgba(255, 255, 255, .85)
}
.prose table tbody > tr:not(:last-child) {
  border-bottom: 1px solid var(--border) !important
}
.prose table thead tr,
.prose table tbody > tr:first-child:has(> td > strong) {
  border-bottom: 2px solid var(--accent) !important
}
@media (max-width: 700px) {
  .prose figure.wysiwyg-table table,
  .prose .prose-table-scroll table {
    min-width: 720px;
  }
}

.prose img {
  height: auto;
  max-width: 100%;
}
.prose :is(ol.step-list, ol.step-list-block) img {
  display: block;
  margin-block: 14px 0 !important;
  margin-inline: auto !important
}
.prose .video-embed {
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000
}
.prose .video-embed--portrait {
  width: 50%;
  aspect-ratio: 750 / 1334
}
.prose .video-embed > iframe {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  border: 0
}
@media (max-width: 600px) {
  .prose .video-embed--portrait {
    width: 100%
  }
}

/* ═══════════════════════════════════════════════════════
   HANDBOOK
═══════════════════════════════════════════════════════ */
.handbook-hero {
  padding: 72px 0 56px;
  background: radial-gradient(ellipse at 50% 0, rgba(255, 68, 88, .12) 0, transparent 70%);
  border-bottom: 1px solid var(--border);
  text-align: center
}
.handbook-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px
}
.handbook-title {
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: 16px
}
.handbook-sub {
  font-size: 17px;
  color: var(--text-muted);
  max-width: 480px;
  margin: 0 auto
}
.handbook-body {
  padding-top: 64px;
  padding-bottom: 80px
}
.handbook-section {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 32px;
  padding-bottom: 64px;
  margin-bottom: 64px;
  border-bottom: 1px solid var(--border)
}
.handbook-section:last-of-type {
  border-bottom: none
}
.handbook-section-num {
  font-size: 13px;
  font-weight: 800;
  color: var(--accent);
  padding-top: 6px;
  letter-spacing: .05em
}
.handbook-section-content h2 {
  font-size: 24px;
  font-weight: 800;
  margin-bottom: 10px
}
.handbook-section-content > p {
  font-size: 15px;
  color: var(--text-muted);
  margin-bottom: 24px;
  line-height: 1.6
}
.handbook-cards-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px
}
@media (max-width: 640px) {
  .handbook-cards-row {
    grid-template-columns: 1fr
  }
}
.handbook-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 20px;
  transition: border-color .15s, background .15s
}
.handbook-card:hover {
  border-color: var(--accent-border);
  background: var(--surface2)
}
.handbook-card-media {
  margin: -20px -20px 16px;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  overflow: hidden
}
.handbook-card-media-placeholder {
  height: 140px;
  background: var(--surface2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: rgba(255, 68, 88, .4);
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
  position: relative;
  overflow: hidden
}
.handbook-card-media-placeholder:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 68, 88, .06) 50%, transparent);
  animation: media-shimmer 2s ease-in-out infinite
}
@keyframes media-shimmer {
  0% { transform: translateX(-100%) }
  to { transform: translateX(100%) }
}
.handbook-card-media img,
.handbook-card-media video {
  width: 100%;
  height: 140px;
  object-fit: cover;
  display: block
}
.handbook-card-icon {
  font-size: 24px;
  margin-bottom: 10px
}
.handbook-card-label {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 6px
}
.handbook-card-text {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5
}
.handbook-callout {
  background: rgba(255, 68, 88, .08);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
  padding: 16px 20px;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .9);
  margin-bottom: 28px
}
.handbook-stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px
}
@media (max-width: 640px) {
  .handbook-stat-row {
    grid-template-columns: 1fr
  }
}
.handbook-stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 20px;
  text-align: center
}
.handbook-stat-num {
  font-size: 36px;
  font-weight: 900;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 8px
}
.handbook-stat-label {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4
}
.handbook-earning-tips {
  display: flex;
  flex-direction: column;
  gap: 12px
}
.handbook-earning-tip {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 14px;
  color: rgba(255, 255, 255, .85);
  line-height: 1.5
}
.handbook-earning-tip-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  margin-top: 6px
}
.handbook-dosdont {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px
}
@media (max-width: 640px) {
  .handbook-dosdont {
    grid-template-columns: 1fr
  }
}
.handbook-do-col,
.handbook-dont-col {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden
}
.handbook-col-header {
  padding: 12px 16px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase
}
.handbook-col-do {
  background: rgba(34, 197, 94, .1);
  color: #4ade80;
  border-bottom: 1px solid rgba(34, 197, 94, .2)
}
.handbook-col-dont {
  background: rgba(255, 68, 88, .1);
  color: var(--accent);
  border-bottom: 1px solid rgba(255, 68, 88, .2)
}
.handbook-dosdont-item {
  display: flex;
  gap: 10px;
  padding: 11px 16px;
  font-size: 13px;
  line-height: 1.4;
  color: rgba(255, 255, 255, .8);
  border-bottom: 1px solid var(--border)
}
.handbook-dosdont-item:last-child {
  border-bottom: none
}
.handbook-check {
  color: #4ade80;
  font-weight: 700;
  flex-shrink: 0
}
.handbook-x {
  color: var(--accent);
  font-weight: 700;
  flex-shrink: 0
}
.handbook-checklist {
  display: flex;
  flex-direction: column;
  gap: 10px
}
.handbook-check-item {
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 14px;
  color: rgba(255, 255, 255, .75)
}
.handbook-check-done {
  color: rgba(255, 255, 255, .4);
  text-decoration: line-through
}
.handbook-check-box {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  border: 2px solid var(--border);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center
}
.handbook-check-done .handbook-check-box {
  background: var(--accent);
  border-color: var(--accent)
}
.handbook-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 28px 32px;
  margin-top: 48px
}
@media (max-width: 640px) {
  .handbook-cta {
    flex-direction: column;
    text-align: center
  }
}
.handbook-cta h3 {
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 6px
}
.handbook-cta p {
  font-size: 14px;
  color: var(--text-muted)
}

.academy-level-badge {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--accent);
    border: 1px solid rgba(255,68,88,.3);
    border-radius: 20px;
    padding: 4px 14px;
    margin-bottom: 12px
}

.academy-tips {
    display: flex;
    flex-direction: column;
    gap: 16px
}

.academy-tip {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 20px 24px
}

.academy-tip-title {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 6px
}

.academy-tip-text {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.6
}

.academy-scripts {
    display: flex;
    flex-direction: column;
    gap: 14px
}

.academy-script {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 18px 22px
}

.academy-script-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--accent);
    margin-bottom: 8px
}

.academy-script-text {
    font-size: 14px;
    color: rgba(255,255,255,.85);
    line-height: 1.6;
    font-style: italic
}

.academy-fears {
    display: flex;
    flex-direction: column;
    gap: 16px
}

.academy-fear {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 20px 24px
}

.academy-fear-q {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 8px
}

.academy-fear-a {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.6
}

/* ═══════════════════════════════════════════════════════
   FAVORITED COMPONENTS
═══════════════════════════════════════════════════════ */
.fav-note {
  background: var(--accent-night-gradient);
  border: 1px solid var(--accent-night-border);
  border-radius: var(--radius-sm);
  padding: 16px 20px;
  margin: 10px 0;
}
.fav-note p {
  margin: 0;
  font-size: 15px
}
.fav-tip {
  background: rgba(155, 93, 229, .07);
  border: 1px solid rgba(155, 93, 229, .25);
  border-radius: var(--radius-sm);
  padding: 16px 20px;
  margin: 10px 0;
  display: flex;
  gap: 12px;
  align-items: flex-start
}
.fav-tip-icon {
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 2px
}
.fav-tip-body {
  flex: 1 1
}
.fav-tip-body p {
  margin: 0;
  font-size: 14px;
  color: rgba(255, 255, 255, .8)
}
.fav-note p + p,
.fav-tip-body p + p {
  margin-top: 12px
}

/* Zendesk editor callouts. The --zd-wysiwyg-* properties are Guide's
   supported theming API, so Zendesk remains responsible for their layout. */
.prose .wysiwyg-callout {
  --zd-wysiwyg-callout-border-radius: var(--radius-sm);
  --zd-wysiwyg-callout-icon-size: 16px;
  --zd-wysiwyg-callout-info-bg: rgba(255, 68, 88, .08);
  --zd-wysiwyg-callout-info-icon-color: var(--accent);
  --zd-wysiwyg-callout-tip-bg: rgba(155, 93, 229, .07);
  --zd-wysiwyg-callout-tip-icon-color: #9b5de5;
  --zd-wysiwyg-callout-warning-bg: rgba(245, 166, 35, .08);
  --zd-wysiwyg-callout-warning-icon-color: #f5a623;
  --zd-wysiwyg-callout-error-bg: rgba(255, 68, 88, .08);
  --zd-wysiwyg-callout-error-icon-color: var(--accent);
  margin: 10px 0;
  border: 1px solid rgba(255, 68, 88, .2)
}
.prose .wysiwyg-callout > :first-child {
  margin-top: 0
}
.prose .wysiwyg-callout > :last-child {
  margin-bottom: 0
}
.prose .wysiwyg-callout-info {
  background: linear-gradient(135deg, rgba(255, 68, 88, .08), rgba(155, 93, 229, .05))
}
.prose .wysiwyg-callout-tip {
  border-color: rgba(155, 93, 229, .25)
}
.prose .wysiwyg-callout-warning {
  border-color: rgba(245, 166, 35, .28)
}
.prose .wysiwyg-callout-error {
  border-color: rgba(255, 68, 88, .28)
}
.prose ol.step-list-block {
  gap: 0;
  margin-bottom: 28px;
  padding: 0 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm)
}
.prose ol.step-list .step-list-block {
  background: var(--accent-night-gradient);
  border-color: var(--accent-night-border)
}
.prose ol.step-list-block > li {
  padding-block: 16px;
  padding-inline: 44px 0;
  color: inherit;
  border-bottom: 1px solid var(--disclosure-border, var(--border))
}
.prose ol.step-list-block > li:last-child {
  border-bottom: 0
}
.prose ol.step-list-block > li:before {
  width: 28px;
  min-width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 50%;
  inset-inline-start: 0;
  top: 16px;
  font-size: 13px
}
.prose ol.step-list-block > li > :is(h2, h3, h4, h5, h6):first-child {
  margin: 0 0 2px;
  padding: 0;
  border: 0;
  font-size: 15px;
  line-height: 1.5
}
.prose ol.step-list-block > li > p {
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.5
}
.prose ol.step-list-block > li > :last-child {
  margin-bottom: 0
}

.prose ol.step-list {
  gap: 12px;
  margin-bottom: 28px
}
.prose ol.step-list > li {
  padding-block: 16px;
  padding-inline: 62px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: inherit;
  transition: border-color .15s, background .15s
}
.prose ol.step-list > li:hover {
  border-color: var(--accent-border);
  background: var(--surface2)
}
.prose ol.step-list > li:before {
  width: 28px;
  min-width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 50%;
  inset-inline-start: 18px;
  top: 16px;
  font-size: 13px
}
.prose ol.step-list > li > :is(h2, h3, h4, h5, h6):first-child {
  margin: 0 0 2px;
  padding: 0;
  border: 0;
  font-size: 15px;
  line-height: 1.5
}
.prose ol.step-list > li > :last-child {
  margin-bottom: 0
}
@media (max-width: 480px) {
  .prose ol.step-list-block {
    padding-inline: 14px
  }
  .prose ol.step-list-block > li {
    padding-inline-start: 42px
  }
  .prose ol.step-list-block > li:before {
    inset-inline-start: 0
  }
  .prose ol.step-list-block > li:has(> :is(h2, h3, h4, h5, h6):first-child) {
    padding-inline-start: 0
  }
  .prose ol.step-list-block > li:has(> :is(h2, h3, h4, h5, h6):first-child) > :is(h2, h3, h4, h5, h6):first-child {
    display: flex;
    align-items: center;
    min-height: 28px;
    padding-inline-start: 42px;
    margin-bottom: 6px
  }
  .prose ol > li > ol.step-list {
    width: calc(100% + var(--list-item-indent));
    margin-inline-start: calc(-1 * var(--list-item-indent));
    padding-inline-start: 0
  }
  .prose ol.step-list > li {
    padding: 14px
  }
  .prose ol.step-list > li:before {
    position: static;
    width: 100%;
    min-width: 100%;
    height: 24px;
    margin-bottom: 12px;
    border-radius: 999px
  }
  .prose ol.step-list > li:has(> :is(h2, h3, h4, h5, h6):first-child) {
    padding: 14px
  }
  .prose ol.step-list > li:has(> :is(h2, h3, h4, h5, h6):first-child):before {
    position: absolute;
    width: 28px;
    min-width: 28px;
    height: 28px;
    margin-bottom: 0;
    border-radius: 50%;
    inset-inline-start: 14px;
    top: 14px
  }
  .prose ol.step-list > li:has(> :is(h2, h3, h4, h5, h6):first-child) > :is(h2, h3, h4, h5, h6):first-child {
    display: flex;
    align-items: center;
    min-height: 28px;
    padding-inline-start: 42px;
    margin-bottom: 6px
  }
}

.fav-steps {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 28px;
  counter-reset: step-counter
}
.fav-step {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  transition: border-color .15s, background .15s;
  counter-increment: step-counter
}
.fav-step:hover {
  border-color: var(--accent-border);
  background: var(--surface2)
}
.fav-step-num {
  content: counter(step-counter);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: white;
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0
}
.fav-step-body {
  flex: 1 1
}
.fav-step-title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 2px
}
.fav-step-desc {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5
}

/* ── Article count (category + section pages) ── */
.article-count {
  font-size: 12px;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.article-count-placeholder {
  display: inline-block;
  width: 116px;
  height: 9px;
  border-radius: 999px;
  background: var(--border);
  opacity: .7
}
/* ── Handbook do/don't items ── */
.handbook-do-item .handbook-check { color: #4ade80; }
.handbook-dont-item .handbook-x   { color: var(--accent); }
.handbook-cta-text {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.6;
}
.handbook-cta-text h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}


/* ═══════════════════════════════════════════════════════
   PAGE HEADER / ARTICLE LIST
═══════════════════════════════════════════════════════ */
.cat-intro {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border)
}
.cat-header {
  display: flex;
  align-items: center;
  gap: 16px
}
.cat-heading {
  min-width: 0
}
.header-icon {
  --fav-tint: color-mix(in srgb, var(--fav-color) 14%, transparent);
  width: 56px;
  height: 56px;
  border-radius: var(--dropdown-panel-radius);
  background: var(--fav-tint);
  border: 1px solid var(--fav-color);
  color: var(--fav-color);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0
}
.header-icon::before {
  content: '';
  display: block;
  width: 26px;
  height: 26px;
  background-color: var(--fav-icon-fill);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-image: var(--fav-icon);
  -webkit-mask-image: var(--fav-icon);
}
.cat-title {
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 900;
  letter-spacing: -.6px;
  margin-bottom: 4px
}
.cat-desc {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-top: 12px
}
.cat-count {
  font-size: 13px;
  color: var(--text-dim);
  font-weight: 600
}
@media (max-width: 700px) {
  .cat-header {
    gap: 12px
  }
  .header-icon {
    width: 48px;
    height: 48px
  }
  .header-icon::before {
    width: 19px;
    height: 19px
  }
  .cat-title {
    font-size: 22px;
    letter-spacing: -.4px
  }
  .cat-desc {
    margin-top: 12px
  }
}
.cat-list {
  display: flex;
  flex-direction: column;
  gap: 8px
}
.section-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase
}
.section-label::after {
  content: "";
  height: 1px;
  flex: 1 1 auto;
  background: var(--border)
}

/* Section navigation is intentionally distinct from article rows. Category
   pages and nested-section lists share the component; parent ID classes allow
   targeted one-, three- or four-column layouts later without changing it. */
.category-grid,
.section-grid,
.topic-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 24px
}
.section-card {
  --fav-tint: color-mix(in srgb, var(--fav-color) 14%, transparent);
  --section-card-background: #211827;
  --section-card-footer-background: #111111;
  --section-card-action: #0098f7;
  --section-card-footer-height: 36px;
  display: grid;
  grid-template-rows: 1fr auto;
  min-width: 0;
  min-height: 180px;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  background: var(--section-card-background);
  border-radius: var(--radius-sm);
  transition: transform .15s ease, filter .15s ease
}
.section-card:hover {
  filter: brightness(1.08);
  transform: translateY(-2px)
}
.section-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px
}
.section-card__body {
  padding: 16px
}
.section-card__heading {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  min-width: 0
}
.section-card__icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  background: var(--fav-tint);
  border: 1px solid var(--fav-color);
  color: var(--fav-color);
  border-radius: 50%
}
.section-card__icon::before {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  background-color: var(--fav-icon-fill);
  mask: var(--fav-icon) center / contain no-repeat;
  -webkit-mask: var(--fav-icon) center / contain no-repeat
}
.section-card__title {
  min-width: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere
}
.section-card__description {
  display: -webkit-box;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3
}
.section-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--section-card-footer-height);
  padding: 0 12px;
  color: var(--text-dim);
  background: var(--section-card-footer-background);
  font-size: 12px;
  font-weight: 400
}
.section-card__meta .article-count {
  display: inline-flex;
  align-items: center;
  gap: 6px
}
.section-card__action,
.topic-card__action {
  display: none;
  place-items: center;
  width: var(--section-card-footer-height, 36px);
  height: var(--section-card-footer-height, 36px);
  flex: 0 0 var(--section-card-footer-height, 36px);
  background: var(--section-card-action, #0098f7);
  border: 0;
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
}
.section-card__action::before,
.topic-card__action::before {
  content: "";
  width: 6px;
  height: 6px;
  border-block-start: 2px solid #fff;
  border-inline-end: 2px solid #fff;
  transform: translateX(-1px) rotate(45deg)
}
@media (max-width: 1024px) {
  .category-grid,
  .section-grid,
  .topic-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}
@media (max-width: 700px) {
  .category-grid,
  .section-grid,
  .topic-grid {
    grid-template-columns: 1fr
  }
}
@media (max-width: 420px) {
  .section-card,
  .topic-card {
    min-height: 170px
  }
}
.home-section-grid {
  margin-bottom: 48px
}
.section-card-shell,
.topic-card-shell {
  display: contents;
}
@media (max-width: 599px),
       (orientation: landscape) and (max-height: 500px) and (max-width: 900px) {
  .home-section-grid {
    display: flex;
    align-items: stretch;
    gap: 16px;
    width: calc(100% + 40px);
    max-width: none;
    margin: 0 -20px 40px;
    padding: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-padding-inline: 20px;
    cursor: grab;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch
  }
  .home-section-grid::-webkit-scrollbar {
    display: none
  }
  .home-section-grid.dragging {
    cursor: grabbing;
    user-select: none
  }
  .home-section-grid > .section-card-shell {
    position: relative;
    display: block;
    flex: 0 0 clamp(280px, 88vw, 368px);
    min-width: 0;
  }
  .home-section-grid > .section-card-shell > .section-card {
    height: 100%;
  }
  .home-section-grid > .section-card-shell:not(:last-child) .section-card__meta {
    padding-right: 0
  }
  .home-section-grid > .section-card-shell:not(:last-child) .section-card__action {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 1;
    display: grid;
  }
  .home-section-grid > .section-card-shell:first-child {
    margin-left: 20px
  }
  .home-section-grid > .section-card-shell:last-child {
    margin-right: 20px
  }
}
.cat-article {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  color: inherit;
  transition: background .15s, border-color .15s, transform .12s
}
.cat-article.promoted {
  background: var(--accent-night-gradient);
  border-color: var(--accent-night-border)
}
.cat-article:hover {
  background: var(--surface2);
  border-color: var(--accent-border);
  transform: translateX(4px)
}
.cat-article.promoted:hover {
  background: var(--accent-night-gradient)
}
.cat-article.promoted .cat-article-title {
  display: flex;
  align-items: center;
  gap: 7px
}
.cat-article.promoted .icon-star {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 45%, transparent))
}
.cat-article-body {
  flex: 1 1;
  min-width: 0
}
.cat-article-title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 4px
}
.cat-article-desc {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden
}
.cat-article-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 12px;
  color: var(--text-dim);
}

.cat-article-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  white-space: nowrap;
}

.cat-article-meta .article-tags {
  min-width: 0;
  flex: 1 1 auto;
}
.cat-article-arrow {
  font-size: 20px;
  color: var(--text-dim);
  transition: color .15s, transform .15s;
  flex-shrink: 0
}
.cat-article:hover .cat-article-arrow {
  color: var(--accent);
  transform: translateX(4px)
}
.cat-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted);
  font-size: 15px
}

/* ═══════════════════════════════════════════════════════
   HELPFUL ROW
═══════════════════════════════════════════════════════ */
.helpful-row {
  display: grid;
  text-align: center;
  align-items: center;
  gap: 12px;
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--border)
}
.helpful-label {
  font-size: 14px;
  color: var(--text-muted)
}
.helpful-label.more-questions a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
  transition: opacity .15s;
}
.helpful-label.more-questions a:hover {
  opacity: .8;
}
.article-more-questions {
  margin: 0;
  text-align: center;
}
.helpful-btn {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s
}
.helpful-btn:hover {
  background: var(--surface2);
  color: var(--text);
}
/* btn-is-voted is set by our MutationObserver as a reliable fallback */
.helpful-btn.btn-is-voted {
  background: var(--accent-dim);
  border-color: var(--accent-border);
  color: var(--accent);
}
.helpful-btn.btn-is-voted:hover {
  background: rgba(255,68,88,.2);
}

/* Zendesk may apply voted class to button, form, or wrapper */
.helpful-btn.voted,
.helpful-row-vote form.voted .helpful-btn,
.helpful-row-vote .voted .helpful-btn,
.helpful-row-vote .helpful-btn[aria-pressed="true"],
.helpful-row-vote .helpful-btn.selected {
  background: var(--accent-dim);
  border-color: var(--accent-border);
  color: var(--accent);
}
.helpful-btn.voted:hover,
.helpful-row-vote form.voted .helpful-btn:hover,
.helpful-row-vote .voted .helpful-btn:hover {
  background: rgba(255,68,88,.2);
}

/* ═══════════════════════════════════════════════════════
   ARTICLE COMMENTS
═══════════════════════════════════════════════════════ */

/* ── Header ── */
/* comment overview — title/callout left, sorter right */
.article-comments .comment-overview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 40px;
  margin-bottom: 16px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}

.article-comments .comment-overview-left {
  flex: 1;
  min-width: 0;
}

.article-comments .comment-heading,
.post-comments-section .comment-heading ,
.post .comment-heading {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.3px;
  margin-top: 0;
  padding-top: 0;
  border-top: none;
  display: flex;
  align-items: center;
  gap: 10px
}

.article-comments .comment-heading:before,
.post-comments-section .comment-heading:before ,
.post .comment-heading:before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 18px;
  background: var(--accent);
  border-radius: 2px
}

.article-comments .comment-callout,
.post-comments-section .comment-callout ,
.post .comment-callout {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 16px;
}

/* ── Sorter — aligned to top-right of overview ── */
.article-comments .comment-sorter {
  position: relative;
  display: inline-block;
  margin-top: 0;
  flex-shrink: 0;
}

/* ── Comment List ── */
.article-comments .comment-list,
.post-comments-section .comment-list ,
.post .comment-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.article-comments .comment,
.post-comments-section .comment ,
.post .comment {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  transition: border-color .15s;
}

.article-comments .comment:hover,
.post-comments-section .comment:hover ,
.post .comment:hover {
  border-color: var(--accent-border);
}

.article-comments .comment-wrapper,
.post-comments-section .comment-wrapper ,
.post .comment-wrapper {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
}

/* ── Author ── */
.article-comments .comment-info,
.post-comments-section .comment-info ,
.post .comment-info {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.article-comments .comment-author,
.post-comments-section .comment-author ,
.post .comment-author {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: wrap;
}

/* Official comments can present either the staff member or the current brand. */
.official-comment-brand-identity {
  display: none;
}

.hide-official-comment-author:not(.staff-viewer) .comment-official .official-comment-person-avatar,
.hide-official-comment-author:not(.staff-viewer) .comment-official .official-comment-person-meta {
  display: none;
}

.hide-official-comment-author:not(.staff-viewer) .comment-official .official-comment-brand-identity {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex: 1 1 auto;
}

.official-comment-brand-avatar {
  overflow: hidden;
  border-radius: 50%;
}

.post-comments-section .official-comment-brand-avatar .user-avatar {
  transform: scale(1.12);
}

.article-comments form.comment-form,
.post-comments-section form.comment-form {
  display: block;
}

.comment-as-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  color: var(--text-muted);
  font-size: 13px;
}

.comment-as-label {
  flex: 0 0 auto;
}

.comment-as-identity {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: var(--text);
  font-weight: 700;
}

.comment-as-identity[hidden] {
  display: none;
}

.comment-as-avatar {
  display: block;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 50%;
  object-fit: cover;
}

.comment-as-brand-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.12);
}

.comment-as-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.comment-author-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.icon-fav-staff {
  width: 25px;
  height: 25px;
  flex: 0 0 auto;
  color: var(--accent);
}

.article-comments .comment-avatar,
.post-comments-section .comment-avatar ,
.post .comment-avatar {
  position: relative;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.article-comments .comment-avatar .icon-agent,
.post-comments-section .comment-avatar .icon-agent ,
.post .comment-avatar .icon-agent {
  display: none;
}

.article-comments .comment-avatar .user-avatar,
.post-comments-section .comment-avatar .user-avatar ,
.post .comment-avatar .user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border);
  display: block;
}

.article-comments .comment-meta,
.post-comments-section .comment-meta ,
.post .comment-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.article-comments .comment-meta span a,
.post-comments-section .comment-meta span a,
.post .comment-meta span a,
.article-comments .comment-meta > span,
.post-comments-section .comment-meta > span ,
.post .comment-meta > span {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  transition: color .15s;
}

.article-comments .comment-meta span a:hover,
.post-comments-section .comment-meta span a:hover ,
.post .comment-meta span a:hover {
  color: var(--accent);
}

.article-comments .meta-group,
.post-comments-section .meta-group ,
.post .meta-group {
  display: flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  grid-column: unset;
  grid-row: unset;
  text-align: left;
  font-size: unset;
  white-space: normal;
}

.article-comments .meta-data,
.post-comments-section .meta-data ,
.post .meta-data {
  font-size: 11px;
  color: var(--text-muted);
}

/* ── Badges ── */
.article-comments .community-badge-titles,
.post-comments-section .community-badge-titles ,
.post .community-badge-titles {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.article-comments .community-badge-title,
.post-comments-section .community-badge-title ,
.post .community-badge-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 2px 6px;
  border-radius: 20px;
  background: rgba(255, 68, 88, .1);
  color: var(--accent);
}

.article-comments .community-badge-achievements,
.post-comments-section .community-badge-achievements ,
.post .community-badge-achievements {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.article-comments .community-badge-achievement img,
.post-comments-section .community-badge-achievement img ,
.post .community-badge-achievement img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.article-comments .community-badge-achievements-rest,
.post-comments-section .community-badge-achievements-rest ,
.post .community-badge-achievements-rest {
  font-size: 11px;
  color: var(--text-muted);
  text-decoration: none;
}

/* ── Labels ── */
.article-comments .comment-labels,
.post-comments-section .comment-labels ,
.post .comment-labels {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-left: auto;
}

.article-comments .status-label {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 20px;
  text-decoration: none;
}

.article-comments .escalation-badge {
  background: rgba(155, 93, 229, .1);
  color: rgb(155, 93, 229);
  border: 1px solid rgba(155, 93, 229, .25);
}

.article-comments .status-label-pending-moderation {
  background: rgba(255, 180, 0, .1);
  color: rgb(255, 180, 0);
  border: 1px solid rgba(255, 180, 0, .25);
}

/* ── Body ── */
.article-comments .comment-body,
.post-comments-section .comment-body ,
.post .comment-body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
  padding: 12px 0;
}

/* ── Actions ── */
.article-comments .comment-actions-container,
.post-comments-section .comment-actions-container ,
.post .comment-actions-container {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

/* Normalize Zendesk action-menu separators with the rest of the theme. */
[role="menu"] [role="separator"],
.dropdown-menu hr {
  height: 1px !important;
  margin: 8px 12px !important;
  border: 0 !important;
  background: var(--border) !important;
}

.article-comments .comment-vote,
.post-comments-section .comment-vote ,
.post .comment-vote {
  display: flex;
  align-items: center;
  gap: 6px;
}

.article-comments .comment-vote .vote-up,
.post-comments-section .comment-vote .vote-up,
.post .comment-vote .vote-up,
.article-comments .comment-vote .vote-down,
.post-comments-section .comment-vote .vote-down ,
.post .comment-vote .vote-down {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  padding: 4px;
  border-radius: 6px;
  transition: color .15s, background .15s;
  display: flex;
  align-items: center;
}

.article-comments .comment-vote .vote-up:hover,
.post-comments-section .comment-vote .vote-up:hover,
.post .comment-vote .vote-up:hover,
.article-comments .comment-vote .vote-down:hover,
.post-comments-section .comment-vote .vote-down:hover ,
.post .comment-vote .vote-down:hover {
  color: var(--accent);
  background: var(--accent-dim);
}

.article-comments .comment-vote .vote-voted,
.post-comments-section .comment-vote .vote-voted ,
.post .comment-vote .vote-voted {
  color: var(--accent);
}

.article-comments .vote-sum,
.post-comments-section .vote-sum ,
.post .vote-sum {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  min-width: 16px;
  text-align: center;
}

.article-comments .comment-actions,
.post-comments-section .comment-actions ,
.post .comment-actions {
  margin-left: auto;
}

.article-comments .comment-actions button
.post-comments-section .comment-actions button,
.post .comment-actions button,
.article-comments .comment-actions a {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  padding: 4px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  transition: color .15s, background .15s;
}

.article-comments .comment-actions button:hover
.post-comments-section .comment-actions button:hover,
.post .comment-actions button:hover,
.article-comments .comment-actions a:hover {
  color: var(--text);
  background: var(--surface2);
}

/* ── Comment Form ── */
.article-comments .comment-form,
.post-comments-section .comment-form ,
.post .comment-form {
  display: flex;
  gap: 12px;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  align-items: flex-start;
}

.article-comments .comment-container,
.post-comments-section .comment-container ,
.post .comment-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.article-comments .comment-form-controls {
  display: flex;
  justify-content: flex-end;
}

.article-comments .comment-form-controls .button {
  background: var(--accent);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  padding: 8px 20px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity .15s;
}

.article-comments .comment-form-controls .button:hover {
  opacity: .85;
}

/* ── TEXTAREA ── */
.article-comments textarea,
.post-comments-section textarea ,
.post textarea {
  width: 100% !important;
  height: 60px;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  padding: 18px 20px !important;
  font-size: 14px !important;
  color: var(--text) !important;
  outline: none !important;
  box-shadow: none !important;
  transition: border-color .2s, border-radius .2s, height .2s, box-shadow .2s !important;
  resize: none !important;
  box-sizing: border-box;
  font-family: inherit;
  line-height: 1.5;
  overflow: hidden;
  -webkit-appearance: none;
  appearance: none;
}

.article-comments textarea::placeholder,
.post-comments-section textarea::placeholder ,
.post textarea::placeholder {
  color: var(--text-dim) !important;
}

.article-comments textarea:hover,
.post-comments-section textarea:hover ,
.post textarea:hover {
  border-color: rgba(255, 255, 255, .14) !important;
}

.article-comments textarea:focus,
.post-comments-section textarea:focus ,
.post textarea:focus {
  height: 60px;
  border-color: var(--accent) !important;
  border-radius: 16px !important;
  box-shadow: 0 0 0 4px var(--accent-dim) !important;
  outline: none !important;
  overflow: auto;
  resize: vertical;
}

/* ═══════════════════════════════════════════════════════
   CONTRIBUTIONS PAGE
═══════════════════════════════════════════════════════ */

/* ── top nav strip ── */
.my-activities-nav {
  border-bottom: 1px solid var(--border);
  margin-bottom: 0;
}

.my-activities-nav .collapsible-nav {
  display: flex;
  align-items: center;
}

.my-activities-nav .collapsible-nav-list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 4px;
}

.my-activities-nav .collapsible-nav-list li a {
  display: block;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}

.my-activities-nav .collapsible-nav-list li a:hover {
  color: var(--text);
}

.my-activities-nav .collapsible-nav-list li.current a {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.my-activities-nav .collapsible-nav-toggle {
  display: none;
}

/* ── page header ── */
.my-activities-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 28px 0 20px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}

.my-activities-header h1 {
  font-size: 22px;
  font-weight: 600;
  margin: 0;
  color: var(--text);
}

/* ── sub nav (filter tabs) ── */
.my-activities-sub-nav .collapsible-nav {
  display: flex;
  align-items: center;
}

.my-activities-sub-nav .collapsible-nav-list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 4px;
}

.my-activities-sub-nav .collapsible-nav-list li a {
  display: block;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  border-radius: 20px;
  border: 1px solid transparent;
  transition: background .15s, color .15s, border-color .15s;
}

.my-activities-sub-nav .collapsible-nav-list li a:hover {
  background: var(--border-dim);
  color: var(--text);
}

.my-activities-sub-nav .collapsible-nav-list li.current a {
  background: rgba(255, 68, 88, .1);
  border-color: rgba(255, 68, 88, .3);
  color: var(--accent);
}

.my-activities-sub-nav .collapsible-nav-toggle {
  display: none;
}

/* ── table ── */
.my-activities-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.my-activities-table thead tr {
  border-bottom: 1px solid var(--border);
}

.my-activities-table th {
  padding: 10px 12px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

.my-activities-table tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background .12s;
}

.my-activities-table tbody tr:last-child {
  border-bottom: none;
}

.my-activities-table tbody tr:hover {
  background: var(--border-dim);
}

.my-activities-table td {
  padding: 14px 12px;
  color: var(--text-muted);
  vertical-align: middle;
}

.my-activities-table td:first-child {
  max-width: 420px;
}

.striped-list-title {
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
  font-size: 13px;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color .15s;
}

.striped-list-title:hover {
  color: var(--accent);
}

/* type badge */
.contributions-table td:nth-child(2) {
  white-space: nowrap;
}

/* vote count */
.contributions-table td:nth-child(3) {
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* date columns */
.contributions-table td:nth-child(4),
.contributions-table td:nth-child(5) {
  white-space: nowrap;
  font-size: 12px;
  opacity: .7;
}

/* ── empty state ── */
.no-activities {
  text-align: center;
  padding: 48px 24px;
  font-size: 14px;
  color: var(--text-muted);
  opacity: .6;
}

/* ── mobile ── */
@media (max-width: 900px) {
  .my-activities-nav .collapsible-nav-toggle,
  .my-activities-sub-nav .collapsible-nav-toggle {
    display: none;
  }

  .my-activities-nav .collapsible-nav[aria-expanded="false"] .collapsible-nav-list,
  .my-activities-sub-nav .collapsible-nav[aria-expanded="false"] .collapsible-nav-list,
  .my-activities-nav .collapsible-nav[aria-expanded="true"] .collapsible-nav-list,
  .my-activities-sub-nav .collapsible-nav[aria-expanded="true"] .collapsible-nav-list {
    display: flex;
  }

  .my-activities-nav .collapsible-nav-list,
  .my-activities-sub-nav .collapsible-nav-list {
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;
    padding: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .my-activities-nav .collapsible-nav-list::-webkit-scrollbar,
  .my-activities-sub-nav .collapsible-nav-list::-webkit-scrollbar {
    display: none;
  }

  .my-activities-nav .collapsible-nav-list li,
  .my-activities-sub-nav .collapsible-nav-list li {
    flex: 0 0 auto;
  }

  .my-activities-nav .collapsible-nav-list li a {
    padding: 13px 14px;
    white-space: nowrap;
  }

  .my-activities-sub-nav {
    max-width: 100%;
    overflow: hidden;
  }

  .my-activities-sub-nav .collapsible-nav-list {
    gap: 6px;
  }

  .my-activities-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .my-activities-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .my-activities-table th:nth-child(3),
  .my-activities-table td:nth-child(3),
  .my-activities-table th:nth-child(5),
  .my-activities-table td:nth-child(5) {
    display: none;
  }
}

/* ═══════════════════════════════════════════════════════
   USER PROFILE PAGE
═══════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────
   USER PROFILE PAGE
───────────────────────────────────────── */

/* ── profile header ── */
.profile-header {
  padding: 32px 0 0;
}

.profile-header .container {
  padding-bottom: 0;
}

.profile-info {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 12px;
}

/* avatar */
.profile-avatar {
  position: relative;
  width: 72px;
  height: 72px;
  flex-shrink: 0;
}

.profile-avatar .user-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border);
  display: block;
}

.striped-list-title-text {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-avatar .icon-agent {
  position: absolute;
  bottom: 2px;
  right: 2px;
  background: var(--accent);
  color: #fff;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  padding: 3px;
}

/* basic info */
.basic-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.community-name-and-title-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.basic-info .name {
  font-size: 20px;
  font-weight: 600;
  margin: 0;
  color: var(--text);
}

.basic-info .name a {
  color: inherit;
  text-decoration: none;
  transition: color .15s;
}

.basic-info .name a:hover {
  color: var(--accent);
}

.name .icon-fav-staff,
.comment-author-name .icon-fav-staff,
.comment-as-identity .icon-fav-staff {
  background: var(--accent);
  color: #000;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  padding: 3px;
  display: inline-block;
  vertical-align: middle;
}

.comment-as-official-badge[hidden] {
  display: none;
}

.community-badge-titles {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.community-badge-title {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  background: rgba(255, 68, 88, .12);
  border: 1px solid rgba(255, 68, 88, .3);
  color: var(--accent);
}

.community-badge-achievements {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.community-badge-achievement img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}

.community-badge-achievements-rest {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--border-dim);
  border: 1px solid var(--border);
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  transition: background .15s, color .15s;
}

.community-badge-achievements-rest:hover {
  background: var(--border);
  color: var(--text);
}

/* options */
.options {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-left: auto;
}

.comment-link {
  font-size: 12px;
  color: var(--accent);
  text-decoration: none;
}
.comment-link:hover {
  text-decoration: underline;
}

.profile-activity-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface);
  color: var(--text-muted);
  flex-shrink: 0;
}

/* Dynamic type classes e.g. .profile-activity-post, .profile-activity-article */
[class*="profile-activity-"] .profile-activity-icon {
  background: var(--surface2);
}

.profile-private-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--text-muted);
  background: var(--border-dim);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 4px 10px;
}

.profile-header .description {
  font-size: 13px;
  color: var(--text-muted);
  margin: 4px 0 0;
  line-height: 1.6;
  flex-basis: 100%;
}

/* stats row — both lists on one line on desktop */
.profile-stats-row {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding-top: 16px;
  padding-bottom: 16px;
  gap: 0;
}

.profile-stats-activity,
.profile-stats-counters {
  display: flex;
  flex-wrap: nowrap;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0;
}

/* vertical divider between the two lists */
.profile-stats-activity {
  border-right: 1px solid var(--border);
  padding-right: 24px;
  margin-right: 24px;
}

.profile-stats-activity .stat,
.profile-stats-counters .stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-right: 24px;
  margin-right: 24px;
  border-right: 1px solid var(--border);
}

.profile-stats-activity .stat:last-child,
.profile-stats-counters .stat:last-child {
  border-right: none;
  margin-right: 0;
  padding-right: 0;
}

.stat-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
  opacity: .6;
}

.stat-value {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}

/* ─────────────────────────────────────────
   PROFILE SIDEBAR LAYOUT
───────────────────────────────────────── */

.profile-layout,
.requests-layout {
  display: flex;
  align-items: flex-start;
  gap: 0;
  padding-top: 24px;
}

.profile-sidebar,
.requests-sidebar {
  width: 220px;
  flex-shrink: 0;
  padding: 24px 24px 40px 0;
}

/* desktop: button shown as static label only, icons hidden */
.profile-sidebar .collapsible-sidebar-toggle,
.requests-sidebar .collapsible-sidebar-toggle,
#fav-support .collapsible-sidebar-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  padding: 0 0 10px 0;
  cursor: default;
  pointer-events: none;
  color: var(--text-muted);
  gap: 8px;
}

.profile-sidebar .sidenav-title,
.requests-sidebar .sidenav-title,
#fav-support .sidenav-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
  padding: 0;
  flex: 1;
  text-align: left;
  display: block;
}

.profile-sidebar .collapsible-sidebar-toggle-icon,
.requests-sidebar .collapsible-sidebar-toggle-icon,
#fav-support .collapsible-sidebar-toggle-icon {
  display: none; /* hidden on desktop */
}

.profile-sidebar-nav,
.requests-sidebar-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.profile-sidebar-nav li,
.requests-sidebar-nav li {
  display: block;
}

.profile-sidebar-nav .sidenav-item,
.requests-sidebar-nav .sidenav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 10px;
  font-size: 13px;
  color: var(--text-muted);
  text-decoration: none;
  border-radius: 8px;
  transition: background .15s, color .15s;
  gap: 8px;
}

.profile-sidebar-nav .sidenav-item:hover,
.requests-sidebar-nav .sidenav-item:hover {
  background: var(--border-dim);
  color: var(--text);
}

.profile-sidebar-nav .sidenav-item.current,
.requests-sidebar-nav .sidenav-item.current {
  background: rgba(255, 68, 88, .1);
  color: var(--accent);
}

.profile-sidebar-nav .filter-name,
.requests-sidebar-nav .filter-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-sidebar-nav .doc-count,
.requests-sidebar-nav .doc-count {
  font-size: 11px;
  color: var(--text-muted);
  opacity: .6;
  flex-shrink: 0;
}

.profile-main,
.requests-main {
  flex: 1;
  min-width: 0;
  padding: 0 0 40px 32px;
}

/* ─────────────────────────────────────────
   PROFILE SECTION
───────────────────────────────────────── */

.profile-section {
  padding: 28px 0 40px;
}

/* Zendesk preview can retain the profile header while independently marking
   the activity body private. Do not expose profile stats in that state. */
body:has(.private-activity) .profile-stats-row {
  display: none;
}

.profile-section-header {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.profile-section-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  color: var(--text);
}

.profile-section-description {
  font-size: 13px;
  color: var(--text-muted);
  opacity: .7;
}

.profile-section-sorter {
  margin-left: auto;
  position: relative;
}

/* ─────────────────────────────────────────
   ACTIVITY LIST
───────────────────────────────────────── */

.profile-activity-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* outer activity card — single column, header above contribution card */
.profile-activity {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 10px);
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.profile-activity-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* inner contribution card — 3-col 2-row grid: icon | title+breadcrumbs | meta */
.profile-activity-contribution.profile-contribution {
  background: var(--surface2, var(--border-dim));
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
  display: grid;
  grid-template-columns: 24px minmax(160px, 240px) minmax(0, auto);
  grid-template-rows: auto auto;
  align-items: start;
  gap: 4px 20px;
  overflow: hidden;
  transition: background .15s, border-color .15s, transform .12s;
}

.profile-activity-contribution.profile-contribution:hover {
  border-color: var(--accent-border);
}

/* icon spans both rows, vertically centred */
.profile-activity-contribution.profile-contribution .profile-contribution-icon {
  grid-column: 1;
  grid-row: 1 / 3;
  align-self: center;
}

/* title — row 1 of col 2 */
.profile-activity-contribution.profile-contribution .profile-contribution-header {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* breadcrumbs — row 2 of col 2, directly below title */
.profile-activity-contribution.profile-contribution > nav {
  grid-column: 2;
  grid-row: 2;
}

.profile-activity-contribution.profile-contribution .profile-contribution-body {
  display: none;
}

/* meta spans both rows, vertically centred */
.profile-activity-contribution.profile-contribution .meta-group {
  grid-column: 3;
  grid-row: 1 / 3;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-align: right;
  align-self: center;
}

.profile-activity-header .user-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.profile-activity-description {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
}

/* ─────────────────────────────────────────
   CONTRIBUTION LIST (articles / posts / comments tabs)
───────────────────────────────────────── */

.profile-contribution-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* contribution row — 4-column grid: icon | title+breadcrumbs | body | meta */
.profile-contribution {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 10px);
  padding: 14px 20px;
  position: relative;
  cursor: pointer;
  display: grid;
  grid-template-columns: 24px minmax(160px, 240px) 1fr minmax(0, auto);
  grid-template-rows: auto auto;
  align-items: start;
  gap: 4px 20px;
  transition: background .15s, border-color .15s, transform .12s;
}

.profile-contribution:hover,
.profile-contribution:focus-within {
  background: var(--surface2);
  border-color: var(--accent-border);
  transform: translateX(4px);
}

/* icon — spans both rows, vertically centred */
.profile-contribution-icon {
  grid-column: 1;
  grid-row: 1 / 3;
  color: var(--text-muted);
  opacity: .4;
  display: flex;
  align-items: center;
  align-self: center;
}

/* title — row 1 of col 2 */
.profile-contribution-header {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

/* breadcrumbs — row 2 of col 2, directly below title */
.profile-contribution > nav {
  grid-column: 2;
  grid-row: 2;
}

.profile-contribution-title {
  font-size: 13px;
  font-weight: 600;
  margin: 0;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.profile-contribution-title a {
  color: var(--text);
  text-decoration: none;
  transition: color .15s;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-contribution-title a:hover {
  color: var(--accent);
}

/* Make the full contribution card use its title destination, matching article
   and post cards elsewhere in the theme. */
.profile-contribution-title a::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

/* Preserve explicit secondary actions when they appear in filtered views. */
.profile-contribution .comment-link {
  position: relative;
  z-index: 1;
}

/* breadcrumbs — always horizontal */
.profile-contribution-breadcrumbs {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
  gap: 0;
}

.profile-contribution-breadcrumbs li {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  color: var(--text-muted);
}

.profile-contribution-breadcrumbs li + li::before {
  content: '/';
  margin: 0 4px;
  opacity: .4;
}

.profile-contribution-breadcrumbs a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color .15s;
}

.profile-contribution-breadcrumbs a:hover {
  color: var(--text);
}

/* body — col 3, spans both rows */
.profile-contribution-body {
  grid-column: 3;
  grid-row: 1 / 3;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  align-self: center;
}

/* meta — col 4, spans both rows */
.meta-group {
  grid-column: 4;
  grid-row: 1 / 3;
  display: block;
  font-size: 0;
  white-space: nowrap;
  text-align: right;
  min-width: 0;
  overflow: hidden;
  align-self: center;
}

.meta-group .meta-data {
  display: inline;
  font-size: 12px;
  color: var(--text-muted);
  opacity: .6;
}

.meta-group .meta-data:not(:last-child)::after {
  content: '·';
  margin: 0 4px;
  opacity: .4;
  font-size: 12px;
}

.meta-group .meta-data a {
  font-size: 12px;
  color: var(--accent);
  text-decoration: none;
  transition: opacity .15s;
}

.meta-group .meta-data a:hover {
  opacity: .8;
}

/* comments have no title — hide empty header col and span breadcrumbs into it */
.profile-comments .profile-contribution-header {
  display: none;
}

.profile-comments .profile-contribution > nav {
  grid-column: 2;
  grid-row: 1 / 3;
}

/* Profile contributions use the same title / content / meta hierarchy as
   content cards elsewhere in the theme. */
.profile-contribution--article,
.profile-contribution--post,
.profile-contribution--comment,
.profile-activity-contribution.profile-contribution--article,
.profile-activity-contribution.profile-contribution--post,
.profile-activity-contribution.profile-contribution--comment {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  gap: 6px;
}

.profile-contribution--article .profile-contribution-icon,
.profile-contribution--post .profile-contribution-icon,
.profile-contribution--comment .profile-contribution-icon,
.profile-contribution--article > nav,
.profile-contribution--post > nav,
.profile-contribution--comment > nav {
  display: none;
}

.profile-contribution--article .profile-contribution-header,
.profile-contribution--post .profile-contribution-header,
.profile-contribution--comment .profile-contribution-header,
.profile-activity-contribution.profile-contribution--article .profile-contribution-header,
.profile-activity-contribution.profile-contribution--post .profile-contribution-header,
.profile-activity-contribution.profile-contribution--comment .profile-contribution-header {
  display: flex;
  grid-column: 1;
  grid-row: 1;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
}

.profile-comments .profile-contribution--comment > nav {
  display: none;
}

.profile-contribution--article .profile-contribution-title,
.profile-contribution--post .profile-contribution-title,
.profile-contribution--comment .profile-contribution-title {
  font-size: 14px;
}

.profile-contribution--article .profile-contribution-body,
.profile-contribution--post .profile-contribution-body,
.profile-contribution--comment .profile-contribution-body,
.profile-activity-contribution.profile-contribution--article .profile-contribution-body,
.profile-activity-contribution.profile-contribution--post .profile-contribution-body,
.profile-activity-contribution.profile-contribution--comment .profile-contribution-body {
  display: -webkit-box;
  grid-column: 1;
  grid-row: 2;
  align-self: auto;
  -webkit-line-clamp: 2;
}

.profile-contribution--article .meta-group,
.profile-contribution--post .meta-group,
.profile-contribution--comment .meta-group,
.profile-activity-contribution.profile-contribution--article .meta-group,
.profile-activity-contribution.profile-contribution--post .meta-group,
.profile-activity-contribution.profile-contribution--comment .meta-group {
  grid-column: 1;
  grid-row: 3;
  align-self: auto;
  text-align: left;
  white-space: normal;
}

.profile-contribution--article .meta-data,
.profile-contribution--post .meta-data,
.profile-contribution--comment .meta-data {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.profile-comment-vote-meta[hidden],
.profile-contribution[hidden],
.profile-activity[hidden],
.profile-stats-row[hidden] {
  display: none !important;
}

/* Apply profile element settings before JavaScript runs to avoid a flash of
   comment activity or vote metadata during initial render. */
.profile-hide-post-voting .profile-contribution--comment:has(.profile-contribution-title a[href*="/community/posts/"]) .profile-comment-vote-meta,
.profile-hide-post-comments .profile-activity:has(.profile-contribution--comment .profile-contribution-title a[href*="/community/posts/"]):not(:has(.profile-official-comment-badge)),
.profile-hide-post-comments .profile-contribution--comment:has(.profile-contribution-title a[href*="/community/posts/"]):not(:has(.profile-official-comment-badge)),
.profile-hide-article-comments .profile-activity:has(.profile-contribution--comment .profile-contribution-title a[href*="/articles/"]):not(:has(.profile-official-comment-badge)),
.profile-hide-article-comments .profile-contribution--comment:has(.profile-contribution-title a[href*="/articles/"]):not(:has(.profile-official-comment-badge)) {
  display: none;
}

.profile-private-official-label {
  display: none;
}

.profile-hide-public-official-comments:not(.staff-viewer) .profile-contribution--comment:has(.profile-official-comment-badge) > *:not(.profile-private-official-label) {
  display: none !important;
}

.profile-hide-public-official-comments:not(.staff-viewer) .profile-contribution--comment:has(.profile-official-comment-badge) {
  display: block;
  cursor: default;
  pointer-events: none;
  color: var(--text-muted);
}

.profile-hide-public-official-comments:not(.staff-viewer) .profile-contribution--comment:has(.profile-official-comment-badge) > .profile-private-official-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
}

.profile-hide-public-official-comments:not(.staff-viewer) .profile-contribution--comment:has(.profile-official-comment-badge):hover,
.profile-hide-public-official-comments:not(.staff-viewer) .profile-contribution--comment:has(.profile-official-comment-badge):focus-within {
  background: var(--surface2);
  border-color: var(--border);
  transform: none;
}

.profile-contribution--article .article-meta-icon,
.profile-contribution--post .article-meta-icon,
.profile-contribution--comment .article-meta-icon {
  flex: 0 0 auto;
}

.profile-activity-comment-link {
  color: inherit;
  text-decoration: none;
}

.profile-activity-comment-link:hover {
  color: inherit;
  text-decoration: none;
}

.profile-official-comment-badge {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  box-sizing: border-box;
  padding: 3.5px;
  border-radius: 50%;
  background: var(--accent);
  color: #000;
}

.profile-comment-body {
  display: flex !important;
  align-items: flex-start;
  gap: 6px;
}

.profile-comment-text {
  display: -webkit-box;
  min-width: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* status labels */
.status-label {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
}

.status-label-pending-moderation {
  background: rgba(239, 159, 39, .15);
  color: #ef9f27;
  border: 1px solid rgba(239, 159, 39, .3);
}

.status-label-official {
  background: rgba(29, 158, 117, .12);
  color: #1d9e75;
  border: 1px solid rgba(29, 158, 117, .3);
}

/* ─────────────────────────────────────────
   BADGES SECTION
───────────────────────────────────────── */

.profile-badges-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.profile-badges-item {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  align-items: center;
  gap: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 10px);
  padding: 16px 20px;
  transition: border-color .15s;
}

.profile-badges-item:hover {
  border-color: var(--accent-border);
}

.profile-badges-item-image img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
}

.profile-badges-item-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}

.profile-badges-item-description {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.5;
}

.profile-badges-item-metadata {
  text-align: right;
  flex-shrink: 0;
}

.profile-badges-item-metadata-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
  opacity: .6;
  margin-bottom: 4px;
}

.profile-badges-item-metadata-description {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0;
}

/* ─────────────────────────────────────────
   EMPTY / PRIVATE STATES
───────────────────────────────────────── */

.no-activity,
.no-activities {
  display: block;
  text-align: center;
  padding: 48px 24px;
  font-size: 14px;
  color: var(--text-muted);
  opacity: .6;
}

.private-activity {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 48px 24px;
  font-size: 14px;
  color: var(--text-muted);
  opacity: .6;
}

/* ─────────────────────────────────────────
   PAGINATION
───────────────────────────────────────── */

/* hide X icon by default, show chevron */
.profile-nav .collapsible-nav-toggle .x-icon {
  display: none;
}

.profile-nav .collapsible-nav-toggle .chevron-icon {
  display: block;
}

/* swap icons when nav is expanded */
.profile-nav .collapsible-nav[aria-expanded="true"] .collapsible-nav-toggle .chevron-icon {
  display: none;
}

.profile-nav .collapsible-nav[aria-expanded="true"] .collapsible-nav-toggle .x-icon {
  display: block;
}

/* ── profile-nav mobile toggle ── */
@media (max-width: 900px) {
  .profile-nav .collapsible-nav-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    border-bottom: 1px solid var(--border);
    padding: 10px 0;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    gap: 8px;
  }

  /* Visible by default; hidden when wrapper aria-expanded=false */
  .profile-nav .collapsible-nav[aria-expanded="false"] .collapsible-nav-list {
    display: none;
  }
  .profile-nav .collapsible-nav[aria-expanded="true"] .collapsible-nav-list {
    display: flex;
  }
  .profile-nav .collapsible-nav-list {
    flex-direction: column;
    gap: 2px;
    padding: 8px 0 12px;
  }
  .profile-nav .collapsible-nav-list a {
    display: block;
    padding: 7px 10px;
    font-size: 13px;
    border-radius: 8px;
    color: var(--text);
    text-decoration: none;
  }
  .profile-nav .collapsible-nav-list li.current a {
    color: var(--accent);
    background: var(--surface);
  }
}

/* ─────────────────────────────────────────
   MOBILE
───────────────────────────────────────── */

@media (max-width: 900px) {
  .options {
    margin-left: 0;
    flex-wrap: wrap;
  }

  /* stats: single row, centered, equally spaced on mobile */
  .profile-stats-row {
    flex-direction: column;
    gap: 0;
    padding-top: 12px;
  }

  .profile-stats-activity,
  .profile-stats-counters {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: 100%;
    flex: unset;
    gap: 0;
  }

  .profile-stats-activity {
    border-right: none;
    padding-right: 0;
    margin-right: 0;
    border-bottom: 1px solid var(--border);
    padding-bottom: 12px;
    margin-bottom: 12px;
  }

  .profile-stats-activity .stat,
  .profile-stats-counters .stat {
    flex: 1 !important;
    text-align: center;
    padding: 0 !important;
    margin: 0 !important;
    border-right: 1px solid var(--border);
    box-sizing: border-box;
    min-width: 0;
  }

  .profile-stats-activity .stat:last-child,
  .profile-stats-counters .stat:last-child {
    border-right: none !important;
  }

  .profile-stats-activity .stat-label,
  .profile-stats-counters .stat-label {
    font-size: 9px;
    line-height: 1.2;
  }

  .profile-stats-activity .stat-value,
  .profile-stats-counters .stat-value {
    font-size: 13px;
    line-height: 1.3;
  }

  /* sidebar collapses like search results sidebar on mobile */
  .profile-layout,
  .requests-layout {
    flex-direction: column;
  }

  .profile-sidebar,
  .requests-sidebar {
    width: 100%;
    padding: 0;
  }

  .profile-sidebar .collapsible-sidebar-toggle,
  .requests-sidebar .collapsible-sidebar-toggle {
    cursor: pointer;
    pointer-events: auto;
    padding: 12px 0;
    margin-bottom: 0;
    border-bottom: 1px solid var(--border);
  }

  .profile-sidebar .collapsible-sidebar-toggle-icon,
  .requests-sidebar .collapsible-sidebar-toggle-icon {
    display: block;
    flex-shrink: 0;
  }

  /* x hidden by default, chevron shown */
  .profile-sidebar .x-icon,
  .requests-sidebar .x-icon {
    display: none;
  }

  .profile-sidebar .collapsible-sidebar-toggle[aria-expanded="true"] .x-icon,
  .requests-sidebar .collapsible-sidebar-toggle[aria-expanded="true"] .x-icon {
    display: block;
  }

  .profile-sidebar .collapsible-sidebar-toggle[aria-expanded="true"] .chevron-icon,
  .requests-sidebar .collapsible-sidebar-toggle[aria-expanded="true"] .chevron-icon {
    display: none;
  }

  /* list hidden when collapsed, visible when expanded or not yet interacted */
  .profile-sidebar .collapsible-sidebar-toggle[aria-expanded="false"] ~ .profile-sidebar-nav,
  .requests-sidebar .collapsible-sidebar-toggle[aria-expanded="false"] ~ .requests-sidebar-nav {
    display: none;
  }

  .profile-sidebar .collapsible-sidebar-toggle[aria-expanded="true"] ~ .profile-sidebar-nav,
  .requests-sidebar .collapsible-sidebar-toggle[aria-expanded="true"] ~ .requests-sidebar-nav {
    display: flex;
    flex-direction: column;
    padding: 8px 0 12px;
  }

  /* req-sidebar-filters: hide/show with nav (desktop only — mobile always shows) */
  @media (min-width: 901px) {
    .requests-sidebar .collapsible-sidebar-toggle[aria-expanded="false"] ~ .req-sidebar-filters {
      display: none;
    }
    .requests-sidebar .collapsible-sidebar-toggle[aria-expanded="true"] ~ .req-sidebar-filters {
      display: block;
    }
  }

  .profile-sidebar .sidenav-item,
  .requests-sidebar .sidenav-item {
    padding: 7px 10px;
    font-size: 13px;
    justify-content: space-between;
  }

  .profile-main,
  .requests-main {
    padding: 0 0 32px 0;
    width: 100%;
    min-width: 0;
  }

  /* section header: title full-width, description + sorter on same row below */
  .profile-section-header {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 4px 8px;
  }

  .profile-section-title {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .profile-section-description {
    grid-column: 1;
    grid-row: 2;
  }

  .profile-section-sorter {
    grid-column: 2;
    grid-row: 2;
    margin-left: 0;
  }

  /* comments mobile: breadcrumbs span full width */
  .profile-comments .profile-contribution > nav {
    grid-column: 1;
    grid-row: 1;
  }

  /* stack contribution cards on mobile — hide icon, full-width content */
  .profile-contribution {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
  }

  .profile-contribution-icon {
    display: none;
  }

  .profile-contribution-header {
    grid-column: 1;
    grid-row: 1;
  }

  .profile-contribution > nav {
    grid-column: 1;
    grid-row: 2;
  }

  .profile-contribution-body {
    grid-column: 1;
    grid-row: 3;
  }

  .meta-group {
    grid-column: 1;
    grid-row: 4;
    text-align: left;
    white-space: normal;
  }

  /* each span is an atomic unit — wraps whole to next line, never splits mid-text */
  .meta-group .meta-data {
    display: inline-block;
    white-space: nowrap;
  }

  /* stack activity contribution block on mobile — hide icon, full-width content */
  .profile-activity-contribution.profile-contribution {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }

  .profile-activity-contribution.profile-contribution .profile-contribution-icon {
    display: none;
  }

  .profile-activity-contribution.profile-contribution .profile-contribution-header {
    grid-column: 1;
    grid-row: 1;
  }

  .profile-activity-contribution.profile-contribution > nav {
    grid-column: 1;
    grid-row: 2;
  }

  .profile-activity-contribution.profile-contribution .meta-group {
    grid-column: 1;
    grid-row: 3;
    text-align: left;
    white-space: normal;
  }

  .profile-badges-item {
    grid-template-columns: 44px 1fr;
  }

  .profile-badges-item-metadata {
    grid-column: 2;
    text-align: left;
  }
}

/* ═══════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════ */
.site-footer {
  border-top: 1px solid var(--border);
  margin-top: auto
}
.footer-inner {
  padding: 36px 0 calc(40px + env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 24px 32px
}
.footer-logo {
  display: flex;
  align-items: center;
  gap: 7px;
  grid-column: 1;
  grid-row: 2;
  justify-self: start;
  text-decoration: none
}
.footer-logo-mark {
  width: 26px;
  height: 26px;
  background: var(--accent);
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center
}
.footer-word {
  color: var(--text);
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -.5px;
  line-height: 1
}
.footer-word-dot {
  color: var(--accent)
}
@media (max-width: 1100px) {
  .footer-inner {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 20px 16px;
  }

  .footer-logo {
    grid-column: 1;
    grid-row: 1;
  }

  .footer-locale {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
  }

  .footer-links {
    grid-column: 1 / -1;
    grid-row: 2;
    width: calc(100% + 40px);
    max-width: none;
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 20px, #000 calc(100% - 20px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 20px, #000 calc(100% - 20px), transparent);
  }
}
.footer-links {
  display: flex;
  grid-column: 1 / -1;
  grid-row: 1;
  justify-content: center;
  gap: 24px;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none
}
.footer-links::-webkit-scrollbar {
  display: none
}
.footer-links a {
  font-size: 14px;
  color: #b8b8b8;
  text-decoration: none;
  transition: color .15s
}
.footer-links a:hover {
  color: var(--text)
}
.footer-copy {
  grid-column: 2;
  grid-row: 2;
  justify-self: center;
  font-size: 13px;
  color: rgba(255, 255, 255, .5)
}

.footer-copy--right {
  white-space: nowrap;
}

.footer-copy--center {
  white-space: nowrap;
}

.footer-locale {
  position: relative;
  grid-column: 3;
  grid-row: 2;
  justify-self: end;
}

.footer-locale-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 4px 0;
  border: 0;
  border-radius: 4px;
  color: #b8b8b8;
  background: transparent;
  font: inherit;
  font-size: 14px;
  font-weight: 400;
  white-space: nowrap;
  cursor: pointer;
  transition: color .15s;
}

.footer-locale-trigger:hover,
.footer-locale-trigger[aria-expanded="true"] {
  color: var(--text);
  background: transparent;
}

.footer-locale-trigger:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.footer-locale-chevron {
  transition: transform .18s ease;
}

.footer-locale-trigger[aria-expanded="true"] .footer-locale-chevron {
  transform: rotate(180deg);
}

.footer-locale-menu {
  position: absolute;
  z-index: 300;
  right: 0;
  bottom: calc(100% + var(--dropdown-gap));
  width: max-content;
  min-width: 210px;
  max-width: min(300px, calc(100vw - 32px));
  padding: var(--dropdown-panel-padding);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--dropdown-panel-radius);
  background: var(--surface);
  box-shadow: var(--dropdown-panel-shadow);
}

.footer-locale-menu-scroll {
  display: flex;
  width: 100%;
  max-height: calc(min(360px, 60vh) - 12px);
  flex-direction: column;
  gap: 4px;
  padding-inline-end: 4px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}


.footer-locale-menu[hidden] {
  display: none;
}

.footer-locale-selected,
.footer-locale-option {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: var(--dropdown-option-height);
  gap: 16px;
  padding: var(--dropdown-option-padding);
  border-radius: var(--dropdown-option-radius);
  font-size: var(--dropdown-option-font-size);
  font-weight: 400;
}

.footer-locale-selected {
  color: var(--text);
  background: var(--surface2);
}

/* Defensive compatibility for cached/legacy footer markup. */
.footer-locale-selected > svg {
  display: none !important;
}

.footer-locale-selected bdi,
.footer-locale-option bdi {
  width: 100%;
  text-align: left;
  unicode-bidi: isolate;
}


.footer-locale-option {
  direction: ltr;
  text-align: left;
  unicode-bidi: plaintext;
  color: var(--text-muted);
  text-decoration: none;
  transition: color .15s, background .15s;
}

.footer-locale-option[hidden] {
  display: none;
}

.locale-fallback-label {
  display: none;
}

.footer-locale-status {
  display: none;
  flex: 0 0 auto;
  font-size: 12px;
  line-height: 1;
}

.footer-locale--staff .footer-locale-option--staff-only .footer-locale-status,
.footer-locale--staff.footer-locale--staff-only-current .footer-locale-selected .footer-locale-status {
  display: inline-block;
}

.footer-locale-option:hover,
.footer-locale-option:focus-visible {
  color: var(--text);
  background: var(--surface2);
  outline: none;
}

@media (max-width: 1100px) {
  .footer-logo {
    grid-column: 1;
    grid-row: 1;
  }

  .footer-locale {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }

  .footer-links {
    grid-column: 1 / -1;
    grid-row: 2;
    gap: 24px;
    justify-content: flex-start;
  }

  .footer-copy {
    grid-column: 1 / -1;
    grid-row: 3;
    justify-self: center;
  }
}

@media (max-width: 480px) {
  .footer-locale-current {
    max-width: max(96px, calc(100vw - 190px));
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ═══════════════════════════════════════════════════════
   EASTER EGG
═══════════════════════════════════════════════════════ */
.easter-eggplant {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  left: 50%;
  top: -120px;
  transform: translateX(-50%);
  font-size: 120px;
  line-height: 1;
  animation: eggplant-land .6s cubic-bezier(.22, 1, .36, 1) forwards, eggplant-exit .4s ease-in 2.2s forwards
}
@keyframes eggplant-land {
  0% { top: -120px; transform: translateX(-50%) rotate(-15deg) scale(.6) }
  70% { top: 50vh; transform: translateX(-50%) translateY(-50%) rotate(4deg) scale(1.08) }
  85% { top: 50vh; transform: translateX(-50%) translateY(-50%) rotate(-2deg) scale(.97) }
  to { top: 50vh; transform: translateX(-50%) translateY(-50%) rotate(0deg) scale(1) }
}
@keyframes eggplant-exit {
  0% { opacity: 1; transform: translateX(-50%) translateY(-50%) scale(1) }
  to { opacity: 0; transform: translateX(-50%) translateY(-50%) scale(1.3) }
}

/* ═══════════════════════════════════════════════════════════════
   GARDEN COMPONENTS — GLOBAL
   These apply everywhere Garden renders on Zendesk.
   Page-specific overrides come after this section.
═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────
   LABELS & HINTS
───────────────────────────────────────── */
[data-garden-id="forms.input_label"],
[data-garden-id="forms.label"] {
  display: inline-block !important;
  margin-bottom: 8px !important;
  color: var(--text) !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  font-weight: 600 !important;
}

[data-garden-id="forms.input_hint"],
[data-garden-id="forms.checkbox_hint"] {
  color: var(--text-dim) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}

/* Markup support in hints */
[data-garden-id="forms.input_hint"] a,
[data-garden-id="forms.checkbox_hint"] a,
.req-form-notice-body a {
  color: var(--accent) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  transition: opacity .15s !important;
}
[data-garden-id="forms.input_hint"] a:hover,
[data-garden-id="forms.checkbox_hint"] a:hover,
.req-form-notice-body a:hover {
  opacity: .75 !important;
}
[data-garden-id="forms.input_hint"] strong,
[data-garden-id="forms.checkbox_hint"] strong,
.req-form-notice-body strong {
  color: var(--text) !important;
  font-weight: 700 !important;
}
[data-garden-id="forms.input_hint"] u,
[data-garden-id="forms.checkbox_hint"] u,
.req-form-notice-body u {
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}
[data-garden-id="forms.input_hint"] em,
[data-garden-id="forms.checkbox_hint"] em,
.req-form-notice-body em {
  font-style: italic !important;
}
[data-garden-id="forms.input_hint"] code,
[data-garden-id="forms.checkbox_hint"] code,
.req-form-notice-body code {
  color: var(--accent) !important;
  background: var(--accent-dim) !important;
  border: 1px solid var(--accent-border) !important;
  border-radius: 4px !important;
  padding: 1px 6px !important;
  font-size: 12px !important;
  font-family: ui-monospace, monospace !important;
}
.hint-link-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 9px !important;
  line-height: 1 !important;
  vertical-align: super !important;
  margin-left: 2px !important;
  opacity: .7 !important;
}

[data-garden-id="dropdowns.combobox.label"] {
  display: inline-block !important;
  margin-bottom: 8px !important;
  color: var(--text) !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  font-weight: 600 !important;
}
[data-garden-id="dropdowns.combobox.hint"] {
  color: var(--text-dim) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}

/* ─────────────────────────────────────────
   TYPOGRAPHY
───────────────────────────────────────── */
[data-garden-id="typography.font"] {
  color: var(--text-muted) !important;
}
[data-garden-id="typography.ellipsis"] {
  color: inherit !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  background: transparent !important;
}

/* ─────────────────────────────────────────
   BUTTONS
───────────────────────────────────────── */
[data-garden-id="buttons.button"] {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 100px !important;
  padding: 10px 20px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--text-muted) !important;
  cursor: pointer !important;
  transition: border-color .15s, color .15s, background .15s, transform .1s, box-shadow .15s !important;
  box-shadow: none !important;
}
[data-garden-id="buttons.button"]:hover {
  border-color: var(--accent-border) !important;
  color: var(--text) !important;
  background: var(--surface2) !important;
}
[data-garden-id="buttons.button"]:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 4px var(--accent-dim) !important;
  outline: none !important;
}

[data-garden-id="buttons.anchor"] {
  color: var(--text) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: color .15s !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}
[data-garden-id="buttons.anchor"]:hover {
  color: var(--accent) !important;
}

/* ─────────────────────────────────────────
   FAUX INPUT (search wrapper)
───────────────────────────────────────── */
[data-garden-id="forms.faux_input"] {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  padding: 0 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  transition: border-color .2s, box-shadow .2s !important;
  box-shadow: none !important;
  color: var(--text) !important;
}
[data-garden-id="forms.faux_input"]:focus-within {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 4px var(--accent-dim) !important;
}
[data-garden-id="forms.faux_input"] svg {
  color: var(--text-dim) !important;
  flex-shrink: 0 !important;
}

/* ─────────────────────────────────────────
   MEDIA INPUT (inside faux wrapper)
───────────────────────────────────────── */
[data-garden-id="forms.media_input"] {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 10px 0 !important;
  font-size: 14px !important;
  color: var(--text) !important;
  outline: none !important;
  box-shadow: none !important;
  width: 100% !important;
}
[data-garden-id="forms.media_input"]::placeholder {
  color: var(--text-dim) !important;
}

/* ─────────────────────────────────────────
   DROPDOWN MENUS
   Form comboboxes/listboxes are handled by forms.css.
───────────────────────────────────────── */

[data-garden-id="dropdowns.menu"],
[data-garden-id="dropdowns.menu.floating"] [role="menu"] {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--dropdown-panel-radius) !important;
  box-shadow: var(--dropdown-panel-shadow) !important;
  overflow: hidden !important;
  padding: var(--dropdown-panel-padding) !important;
  color: var(--text) !important;
}

[data-garden-id="dropdowns.menu"] [role="menuitem"],
[data-garden-id="dropdowns.menu"] [role="menuitemcheckbox"],
[data-garden-id="dropdowns.menu.floating"] [role="menuitem"],
[data-garden-id="dropdowns.menu.floating"] [role="menuitemcheckbox"] {
  min-height: var(--dropdown-option-height) !important;
  padding: var(--dropdown-option-padding) !important;
  display: flex !important;
  align-items: center !important;
  border-radius: var(--dropdown-option-radius) !important;
  font-size: var(--dropdown-option-font-size) !important;
  font-weight: 400 !important;
  color: var(--text-muted) !important;
  cursor: pointer !important;
  transition: background .15s !important;
  background: transparent !important;
}

[data-garden-id="dropdowns.menu"] [role="menuitem"]:hover,
[data-garden-id="dropdowns.menu"] [role="menuitemcheckbox"]:hover,
[data-garden-id="dropdowns.menu.floating"] [role="menuitem"]:hover,
[data-garden-id="dropdowns.menu.floating"] [role="menuitemcheckbox"]:hover {
  background: var(--surface2) !important;
  color: var(--text) !important;
}

/* Zendesk community Follow and moderator menus are rendered in a React portal. */
body.community-enabled reach-portal [role="menu"] {
  min-width: 220px !important;
  padding: var(--dropdown-panel-padding) !important;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--dropdown-panel-radius) !important;
  box-shadow: var(--dropdown-panel-shadow) !important;
  color: var(--text) !important;
  overflow: hidden !important;
}

body.community-enabled reach-portal [role="menuitem"],
body.community-enabled reach-portal [role="menuitemcheckbox"] {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: var(--dropdown-option-height) !important;
  padding: var(--dropdown-option-padding) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: var(--dropdown-option-radius) !important;
  color: var(--text-muted) !important;
  font-size: var(--dropdown-option-font-size) !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background .12s, color .12s !important;
  outline: none !important;
  box-shadow: none !important;
}

body.community-enabled reach-portal [role="menuitem"]:hover,
body.community-enabled reach-portal [role="menuitem"]:focus-visible,
body.community-enabled reach-portal [role="menuitemcheckbox"]:hover,
body.community-enabled reach-portal [role="menuitemcheckbox"]:focus-visible,
body.community-enabled reach-portal [role="menuitemcheckbox"][aria-checked="true"] {
  background: var(--surface2) !important;
  color: var(--text) !important;
  outline: none !important;
  box-shadow: none !important;
}

body.community-enabled reach-portal [role="menu"] hr {
  height: 1px !important;
  margin: 6px !important;
  background: var(--border) !important;
  border: 0 !important;
}

body.community-enabled reach-portal [role="menu"] > div:empty {
  height: 1px !important;
  margin: 6px !important;
  padding: 0 !important;
  background: var(--border) !important;
  border: 0 !important;
}

/* The moderator menu has many actions; keep it compact and prevent Zendesk's
   generated wrapper spacing from stretching the panel down the page. */
body.community-enabled reach-portal [role="menu"]:has([data-action="edit-post"]) {
  max-height: calc(100vh - 24px) !important;
  overflow-y: auto !important;
}

/* Zendesk anchors the moderator portal to the cog's leading edge. Align the
   panel's trailing edge to that end-positioned trigger at every viewport. */
body.community-enabled reach-portal [role="menu"]:has([data-action="edit-post"]) {
  transform: translateX(calc(-100% + 50px)) !important;
  transform-origin: top right !important;
}

body.community-enabled reach-portal [role="menu"]:has([data-action="edit-post"]) > div:first-child:not(:empty) {
  display: flex !important;
  align-items: center !important;
  min-height: 32px !important;
  margin: 0 6px 6px !important;
  padding: 0 6px !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--text-muted) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}

body.community-enabled reach-portal [role="menu"]:has([data-action="edit-post"]) [role="menuitem"] {
  width: 100% !important;
  min-height: 36px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  box-sizing: border-box !important;
}

body.community-enabled reach-portal [role="menu"]:has([data-action="edit-post"]) [role="menuitem"]:has(> svg) {
  background: var(--surface2) !important;
  color: var(--text) !important;
}

body.community-enabled reach-portal [role="menu"]:has([data-action="edit-post"]) [role="menuitem"]:has(> svg) > svg,
body.community-enabled reach-portal [role="menu"]:has([data-action="edit-post"]) [role="menuitem"]:has(> svg) > span:empty {
  display: none !important;
}

body.community-enabled reach-portal [role="menu"]:has([data-action="edit-post"]) > div:empty {
  height: 1px !important;
  margin: 6px !important;
  padding: 0 !important;
  background: var(--border) !important;
  border: 0 !important;
}

[data-garden-id="dropdowns.combobox.listbox"]:not(.fav-form-listbox):not(.fav-content-tags-listbox):has([data-garden-id="dropdowns.combobox.optgroup"]) > [role="option"]:first-child {
  color: #ff5c7a !important;
  font-weight: 400 !important;
}

[data-garden-id="dropdowns.combobox.listbox"]:not(.fav-form-listbox):not(.fav-content-tags-listbox):has([data-garden-id="dropdowns.combobox.optgroup"]) > [role="option"]:first-child:hover,
[data-garden-id="dropdowns.combobox.listbox"]:not(.fav-form-listbox):not(.fav-content-tags-listbox):has([data-garden-id="dropdowns.combobox.optgroup"]) > [role="option"]:first-child[aria-selected="true"] {
  background: rgba(255, 68, 88, .1) !important;
  color: var(--accent) !important;
}

[data-garden-id="dropdowns.combobox.separator"] {
  display: block !important;
  height: 1px !important;
  background: var(--border) !important;
  margin: 5px 6px !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  list-style: none !important;
}

/* ─────────────────────────────────────────
   TAGS
───────────────────────────────────────── */
[data-garden-id="tags.tag_view"] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 4px 12px !important;
  border-radius: 100px !important;
  border: 1px solid var(--accent-border) !important;
  background: var(--accent-dim) !important;
  color: var(--accent) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  box-shadow: none !important;
  margin: 0 !important;
}
[data-garden-id="tags.close"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin-left: 2px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--accent) !important;
  box-shadow: none !important;
}
[data-garden-id="tags.close"] svg {
  width: 12px !important;
  height: 12px !important;
}

/* ─────────────────────────────────────────
   CHECKBOX
───────────────────────────────────────── */
[data-garden-id="forms.checkbox"] {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
[data-garden-id="forms.checkbox_label"] {
  position: relative !important;
  display: inline-flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  margin: 0 !important;
  color: var(--text) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  cursor: pointer !important;
}
[data-garden-id="forms.checkbox_label"]::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 1px !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 6px !important;
  border: 1px solid var(--border) !important;
  background: var(--surface) !important;
  display: inline-block !important;
  transition: border-color .15s, background .15s, box-shadow .15s !important;
}
[data-garden-id="forms.checkbox_label"] svg[data-garden-id="forms.check_svg"],
[data-garden-id="forms.checkbox_label"] svg[data-garden-id="forms.dash_svg"] {
  position: absolute !important;
  left: 3px !important;
  top: 4px !important;
  width: 12px !important;
  height: 12px !important;
  margin: 0 !important;
  display: none !important;
  color: #fff !important;
  pointer-events: none !important;
}
[data-garden-id="forms.checkbox"]:checked + [data-garden-id="forms.checkbox_label"]::before {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
}
[data-garden-id="forms.checkbox"]:checked + [data-garden-id="forms.checkbox_label"] svg[data-garden-id="forms.check_svg"] {
  display: block !important;
}
[data-garden-id="forms.checkbox"]:focus + [data-garden-id="forms.checkbox_label"]::before {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 4px var(--accent-dim) !important;
}

/* ─────────────────────────────────────────
   FILE UPLOAD
───────────────────────────────────────── */
[data-garden-id="forms.file_upload"] {
  width: 100% !important;
  min-height: 56px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--surface) !important;
  border: 1px dashed rgba(255, 255, 255, .14) !important;
  border-radius: var(--radius) !important;
  padding: 14px 16px !important;
  color: var(--text-dim) !important;
  cursor: pointer !important;
  transition: border-color .2s, box-shadow .2s, background .2s !important;
}
[data-garden-id="forms.file_upload"]:hover {
  border-color: var(--accent) !important;
  background: rgba(255, 79, 109, .04) !important;
}
[data-garden-id="forms.file_upload"]:focus-within {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 4px var(--accent-dim) !important;
}
[data-garden-id="forms.file_upload"] span {
  color: var(--text-dim) !important;
  font-size: 14px !important;
}
[data-garden-id="forms.file_list"] {
  list-style: none !important;
  padding: 0 !important;
  margin: 8px 0 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

[data-garden-id="forms.file_list"] li {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 14px !important;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  transition: border-color .15s !important;
}

[data-garden-id="forms.file_list"] li:hover {
  border-color: var(--accent-border) !important;
}

/* ─────────────────────────────────────────
   TABLES
───────────────────────────────────────── */
[data-garden-id="tables.table"] {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: 14px !important;
  background: transparent !important;
  border: none !important;
}
[data-garden-id="tables.head"] {
  background: transparent !important;
  border-bottom: 1px solid var(--border) !important;
}
[data-garden-id="tables.header_row"] {
  background: transparent !important;
  border: none !important;
}
[data-garden-id="tables.header_cell"] {
  padding: 10px 16px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
  background: transparent !important;
  border: none !important;
  white-space: nowrap !important;
}
[data-garden-id="tables.sortable"] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
  cursor: pointer !important;
  transition: color .15s !important;
}
[data-garden-id="tables.sortable"]:hover {
  color: var(--text) !important;
}
[data-garden-id="tables.sortable"] svg {
  color: var(--text-dim) !important;
  flex-shrink: 0 !important;
}
[data-garden-id="tables.overflow_button"] {
  background: transparent !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  width: 28px !important;
  height: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--text-dim) !important;
  cursor: pointer !important;
  transition: border-color .15s, color .15s !important;
  box-shadow: none !important;
}
[data-garden-id="tables.overflow_button"]:hover {
  border-color: var(--accent-border) !important;
  color: var(--accent) !important;
}
[data-garden-id="tables.body"] {
  background: transparent !important;
}
[data-garden-id="tables.row"] {
  border-bottom: 1px solid var(--border) !important;
  transition: background .15s !important;
  background: transparent !important;
}
[data-garden-id="tables.row"]:hover {
  background: var(--surface) !important;
}
[data-garden-id="tables.row"]:last-child {
  border-bottom: none !important;
}
[data-garden-id="tables.cell"] {
  padding: 14px 16px !important;
  color: var(--text) !important;
  background: transparent !important;
  border: none !important;
  vertical-align: middle !important;
}

/* ─────────────────────────────────────────
   TABS
───────────────────────────────────────── */
[data-garden-id="tabs.tabs"] {
  background: transparent !important;
  border-bottom: 1px solid var(--border) !important;
  margin-bottom: 20px !important;
}
[data-garden-id="tabs.tablist"] {
  display: flex !important;
  gap: 2px !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}
[data-garden-id="tabs.tablist"]::-webkit-scrollbar {
  display: none !important;
}
[data-garden-id="tabs.tab"] {
  padding: 10px 16px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--text-muted) !important;
  border-bottom: 2px solid transparent !important;
  margin-bottom: -1px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: color .15s, border-color .15s !important;
  background: transparent !important;
  box-shadow: none !important;
}
[data-garden-id="tabs.tab"]:hover {
  color: var(--text) !important;
}
[data-garden-id="tabs.tab"][aria-selected="true"] {
  color: var(--accent) !important;
  border-bottom-color: var(--accent) !important;
}

/* ─────────────────────────────────────────
   TOOLTIPS — portalled to body
───────────────────────────────────────── */
[data-garden-id="tooltip.tooltip"] {
  background: var(--surface2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-xs) !important;
  color: var(--text) !important;
  font-size: 12px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .4) !important;
}

/* ─────────────────────────────────────────
   MODALS — portalled to body
───────────────────────────────────────── */
[data-garden-id="modals.backdrop"] {
  background: rgba(0, 0, 0, .7) !important;
  backdrop-filter: blur(4px) !important;
}
[data-garden-id="modals.modal"] {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .6) !important;
  color: var(--text) !important;
  padding: 0 !important;
  max-width: 480px !important;
  width: calc(100vw - 40px) !important;
}
[data-garden-id="modals.header"] {
  font-size: 18px !important;
  font-weight: 800 !important;
  letter-spacing: -.3px !important;
  color: var(--text) !important;
  padding: 20px 24px 16px !important;
  border-bottom: 1px solid var(--border) !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: transparent !important;
}
[data-garden-id="modals.header"]::before {
  content: "" !important;
  display: inline-block !important;
  width: 3px !important;
  height: 18px !important;
  background: var(--accent) !important;
  border-radius: 2px !important;
  flex-shrink: 0 !important;
}
[data-garden-id="modals.body"] {
  padding: 20px 24px !important;
  background: transparent !important;
  color: var(--text) !important;
}
[data-garden-id="modals.close"] {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  width: 32px !important;
  height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--surface2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  color: var(--text-muted) !important;
  cursor: pointer !important;
  transition: border-color .15s, color .15s, background .15s !important;
  box-shadow: none !important;
}
[data-garden-id="modals.close"]:hover {
  background: var(--accent-dim) !important;
  border-color: var(--accent-border) !important;
  color: var(--accent) !important;
}
[data-garden-id="modals.footer"] {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  padding: 16px 24px !important;
  border-top: 1px solid var(--border) !important;
  background: transparent !important;
}
[data-garden-id="modals.footer_item"] {
  display: contents !important;
}
/* Cancel */
[data-garden-id="modals.footer"] [data-garden-id="buttons.button"]:not([type="submit"]) {
  background: var(--surface2) !important;
  color: var(--text-muted) !important;
}
[data-garden-id="modals.footer"] [data-garden-id="buttons.button"]:not([type="submit"]):hover {
  border-color: var(--accent-border) !important;
  color: var(--text) !important;
}
/* Apply / confirm */
[data-garden-id="modals.footer"] [data-garden-id="buttons.button"][type="submit"] {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
  box-shadow: 0 2px 14px rgba(255, 68, 88, .3) !important;
}
[data-garden-id="modals.footer"] [data-garden-id="buttons.button"][type="submit"]:hover {
  background: #e03347 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 20px rgba(255, 68, 88, .45) !important;
}
[data-garden-id="modals.footer"] [data-garden-id="buttons.button"][type="submit"]:focus {
  outline: none !important;
  box-shadow: 0 4px 20px rgba(255, 68, 88, .45), 0 0 0 4px var(--accent-dim) !important;
}

/* ═══════════════════════════════════════════════════════════════
   REQUEST PAGE (single ticket view)
═══════════════════════════════════════════════════════════════ */

.request-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 48px;
  align-items: start;
}

.request-chat-main {
  width: 100%;
}

/* Desktop container padding (overridden to 0 on mobile) */
.request-chat-page {
  padding-top: 32px;
  padding-bottom: 80px;
}

.request-chat-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 48px;
  align-items: start;
}

.request-chat-content {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.request-chat-sidebar {
  position: sticky;
  top: calc(var(--header-h) + 20px);
}

.request-chat-sidebar-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Hide toggle and sidebar-body controls on desktop */
.request-chat-sidebar .collapsible-sidebar-toggle { display: none; }
.request-chat-sidebar .x-icon                     { display: none; }

/* ── Header ── */
.request-chat-header { margin-bottom: 24px; }

.request-chat-title,
h1.request-chat-title {
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: -.3px !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  color: var(--text) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Status pills ── */
.status-label-request {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .3px;
  border: 1px solid transparent;
  /* Colours come from --req-status-* variables set by status class */
  background:   var(--req-status-bg,     rgba(255,68,88,.12));
  border-color: var(--req-status-border, rgba(255,68,88,.3));
  color:        var(--req-status-color,  var(--accent));
}

/* ════════════════════════════════════════════════════════
   TICKET STATUS — VARIABLE SYSTEM
   Each status group defines three variables:
     --req-status-color   text / icon colour
     --req-status-bg      pill background
     --req-status-border  pill border
   The base .status-label-request class consumes them.
   JS also writes --req-status-color onto .request-chat-header
   so the mobile toggle text inherits the right colour.
════════════════════════════════════════════════════════ */

/* ── Base pill: consumes variables ── */
.status-label-request {
  background:    var(--req-status-bg,     rgba(255,68,88,.12));
  border-color:  var(--req-status-border, rgba(255,68,88,.3));
  color:         var(--req-status-color,  var(--accent));
}

/* ── Open / Active ── */
.status-label-new,
.status-label-open,
.status-label-awaiting_reply,
.status-label-awaiting-reply,
.status-label-awaiting_your_reply,
.status-label-awaiting-your-reply,
.status-label-action_required,
.status-label-action-required,
.status-label-open_question,
.status-label-reopened,
.status-label-hold,
.status-label-on_hold,
.status-label-on-hold {
  --req-status-color:  var(--accent);
  --req-status-bg:     rgba(255,68,88,.12);
  --req-status-border: rgba(255,68,88,.3);
}

/* ── Community roadmap states ── */
.status-label-planned {
  --req-status-color:  #63b3ed;
  --req-status-bg:     rgba(99,179,237,.1);
  --req-status-border: rgba(99,179,237,.3);
}

.status-label-not_planned,
.status-label-not-planned {
  --req-status-color:  #ef7b86;
  --req-status-bg:     rgba(239,123,134,.1);
  --req-status-border: rgba(239,123,134,.28);
}

/* ── Pending / Customer reply needed ── */
.status-label-pending,
.status-label-waiting,
.status-label-waiting_for_customer,
.status-label-waiting-for-customer,
.status-label-waiting_on_customer,
.status-label-waiting-on-customer,
.status-label-awaiting_customer,
.status-label-awaiting-customer,
.status-label-customer_reply,
.status-label-needs_info,
.status-label-needs-info,
.status-label-more_info_needed,
.status-label-more-info-needed {
  --req-status-color:  #fbbf24;
  --req-status-bg:     rgba(251,191,36,.1);
  --req-status-border: rgba(251,191,36,.3);
}

/* ── Internally blocked / third-party wait ── */
.status-label-blocked,
.status-label-waiting_third_party,
.status-label-waiting-third-party,
.status-label-waiting_on_third_party,
.status-label-waiting-on-third-party,
.status-label-escalated_internally,
.status-label-escalated-internally {
  --req-status-color:  #9b5de5;
  --req-status-bg:     rgba(155,93,229,.1);
  --req-status-border: rgba(155,93,229,.3);
}

/* ── Solved / Resolved ── */
.status-label-solved,
.status-label-resolved,
.status-label-answered,
.status-label-completed,
.status-label-done,
.status-label-fixed,
.status-label-fulfilled,
.status-label-implemented {
  --req-status-color:  #b3b3b3;
  --req-status-bg:     rgba(179,179,179,.1);
  --req-status-border: rgba(179,179,179,.24);
}

/* ── Closed / final ── */
.status-label-closed {
  --req-status-color:  #858585;
  --req-status-bg:     rgba(255,255,255,.035);
  --req-status-border: rgba(255,255,255,.12);
}

/* ── In Progress ── */
.status-label-in_progress,
.status-label-in-progress,
.status-label-inprogress,
.status-label-working,
.status-label-investigating,
.status-label-under_review,
.status-label-under-review,
.status-label-being_processed,
.status-label-assigned {
  --req-status-color:  #63b3ed;
  --req-status-bg:     rgba(99,179,237,.1);
  --req-status-border: rgba(99,179,237,.3);
}

/* ── Escalated / Urgent ── */
.status-label-escalated,
.status-label-urgent,
.status-label-critical,
.status-label-high_priority,
.status-label-high-priority {
  --req-status-color:  #ef4444;
  --req-status-bg:     rgba(239,68,68,.12);
  --req-status-border: rgba(239,68,68,.3);
}

/* ── Cancelled / Deleted / Archived ── */
.status-label-cancelled,
.status-label-canceled,
.status-label-deleted,
.status-label-archived,
.status-label-duplicate,
.status-label-withdrawn,
.status-label-not_an_issue,
.status-label-not-an-issue,
.status-label-wont_fix,
.status-label-wont-fix {
  --req-status-color:  #78788c;
  --req-status-bg:     rgba(120,120,140,.1);
  --req-status-border: rgba(120,120,140,.25);
}

/* Toggle pill uses its own --req-status-color via .status-label-request,
   same as the sidebar pill — no header-level indirection so the colour
   updates whenever the status-label-* class is rewritten on poll. */

/* ── Comment thread ── */
.request-chat-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.request-chat-list.is-bootstrap-loading {
  min-height: 100%;
}

.request-chat-list.is-bootstrap-loading > .request-chat-message,
.request-chat-list.is-bootstrap-loading > #request-chat-load-sentinel {
  display: none;
}

.request-chat-message {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  transition: border-color .15s;
}

.request-chat-message:hover { border-color: var(--accent-border); }
.request-chat-message.request-chat-message-agent { border-left: 3px solid var(--accent); }

/* Optimistic message states — shown while a reply is in-flight or after
   submit failure. Pending uses a subtle pulse to read as "working on it",
   Failed uses a dashed coral border to draw attention. */
.request-chat-message-pending {
  opacity: .65;
  animation: chat-message-pending-pulse 1.6s ease-in-out infinite;
}

.request-chat-message-pending .request-chat-meta-data {
  color: var(--accent);
}

.request-chat-message-failed {
  border-color: var(--accent) !important;
  border-style: dashed !important;
  opacity: 1;
}

.request-chat-message-failed .request-chat-meta-data {
  color: var(--accent);
  font-weight: 600;
}

.request-chat-pending-attachments {
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
}

@keyframes chat-message-pending-pulse {
  0%, 100% { opacity: .55; }
  50%      { opacity: .85; }
}

/* Button loading state — hide the text, overlay a spinner.
   Apply with: button.classList.add('is-loading') */
.button.is-loading,
.is-loading {
  color: transparent !important;
  pointer-events: none;
  position: relative;
}

.button.is-loading::after,
.is-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: header-nav-spin .7s linear infinite;
}

/* Disable the textarea visually while submitting, but keep its layout. */
.request-chat-form.is-submitting textarea {
  opacity: .55;
  cursor: not-allowed;
}

.request-chat-message-inner {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.request-chat-info {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.request-chat-author {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.request-chat-avatar {
  position: relative;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--surface2);
  border: 1px solid var(--border);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.request-chat-avatar .user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: none;
  display: block;
}


.request-chat-avatar .icon-agent { display: none; }

.request-chat-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.request-chat-meta > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.request-chat-meta .request-chat-staff-badge {
  width: 18px;
  height: 18px;
  padding: 3px;
  border-radius: 50%;
  background: var(--accent);
  color: #000;
  flex: 0 0 auto;
}

.request-chat-meta > span a {
  color: inherit;
  text-decoration: none;
  transition: color .15s;
}

.request-chat-meta > span a:hover { color: var(--accent); }

.request-chat-meta-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.request-chat-meta-data {
  font-size: 11px;
  color: var(--text-muted);
  opacity: .7;
}

.request-chat-body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
  padding: 12px 0;
  /* Long URLs, tokens, and code strings break to fit the bubble instead
     of pushing the message — and the page — sideways. `anywhere` is the
     modern spec value; `break-word` is the Safari fallback. min-width:0
     allows this element to shrink below its content's min-content width
     when nested inside flex parents. */
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
}

.request-chat-body a {
  /* Auto-linked URLs in message bodies — same treatment so the link's
     unbreakable href text doesn't escape the bubble. */
  overflow-wrap: anywhere;
  word-break: break-word;
}

.request-chat-body a,
.request-chat-body a:visited,
.request-chat-body a:hover,
.request-chat-body a:focus,
.request-chat-body a:active {
  color: var(--accent) !important;
  text-decoration: none !important;
}

.request-chat-body p {
  margin: 0;
}

.request-chat-body ul,
.request-chat-body ol {
  margin: 8px 0 12px;
  padding-left: 28px;
}

.request-chat-body ul {
  list-style: disc;
}

.request-chat-body ol {
  list-style: decimal;
}

.request-chat-body ul ul {
  list-style: circle;
}

.request-chat-body ul ul,
.request-chat-body ul ol,
.request-chat-body ol ul,
.request-chat-body ol ol {
  margin: 4px 0;
}

.request-chat-body li {
  padding-left: 3px;
}

.request-chat-body li + li {
  margin-top: 3px;
}

.request-chat-body h1,
.request-chat-body h2,
.request-chat-body h3,
.request-chat-body h4 {
  margin: 18px 0 8px;
  color: var(--text);
  font-weight: 800;
  line-height: 1.3;
}

.request-chat-body h1:first-child,
.request-chat-body h2:first-child,
.request-chat-body h3:first-child,
.request-chat-body h4:first-child {
  margin-top: 0;
}

.request-chat-body h1 { font-size: 1.5em; }
.request-chat-body h2 { font-size: 1.3em; }
.request-chat-body h3 { font-size: 1.15em; }
.request-chat-body h4 { font-size: 1em; }

.request-chat-body blockquote {
  margin: 12px 0;
  padding: 8px 14px;
  border-left: 3px solid var(--accent);
  color: var(--text-muted);
  background: rgba(255, 255, 255, .03);
}

.request-chat-body pre {
  max-width: 100%;
  margin: 12px 0;
  padding: 12px 14px;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #0f1014;
  color: var(--text);
  white-space: pre;
  tab-size: 2;
}

.request-chat-body pre code {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  white-space: inherit;
}

.request-chat-body code:not(pre code) {
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: rgba(255, 255, 255, .05);
  font-size: .92em;
}

.request-chat-body hr {
  margin: 16px 0;
  border: 0;
  border-top: 1px solid var(--border);
}

.request-chat-body img {
  max-width: 100%;
  height: auto;
}

/* ── Comment attachments ── */
.request-chat-attachments {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.request-chat-attachment-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color .15s, background .15s;
}

.request-chat-attachment-item:hover {
  border-color: var(--accent-border);
  background: var(--surface2);
}

.request-chat-attachment-icon {
  color: var(--accent);
  flex-shrink: 0;
}

.request-chat-attachment-item > a {
  flex: 1;
  min-width: 0; /* allow flex item to shrink below content width — required for text-overflow:ellipsis to actually engage */
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color .15s;
}

.request-chat-attachment-item > a:hover { color: var(--accent); }

.request-chat-attachment-size {
  font-size: 11px;
  color: var(--text-muted);
  flex-shrink: 0; /* never let a long filename crush the size badge */
}

/* Inline images in chat */
.request-chat-attachment-image {
  flex-direction: column;
  align-items: center; /* center the image preview and meta row inside the card */
  gap: 8px;
  padding: 10px 12px;
}

.request-chat-inline-image {
  max-width: min(100%, 320px);
  max-height: 240px;
  height: auto;
  width: auto;
  border-radius: var(--radius-sm);
  display: block;
  border: 1px solid var(--border);
  background: var(--surface2);
  cursor: pointer;
}

/* ── Attachments — compact wrapping-row layout ──
   Lay attachments out as a wrapping row of compact cards instead of
   full-width-per-item rows. Image thumbnails sit side by side; file
   pills shrink to their content. Same pattern on mobile and desktop —
   only the thumbnail size differs (smaller on phones so two fit per
   row in a narrower message bubble). */
.request-chat-attachments {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
}

/* File cards: shrink to content, gain a compact pill feel */
.request-chat-attachment-item {
  flex: 0 0 auto;
  max-width: 100%;
  padding: 8px 12px;
}

/* Image cards: thumbnail-sized, no chrome — the image IS the preview.
   Meta row (size + download) sits underneath compactly. */
.request-chat-attachment-image {
  padding: 0;
  background: transparent;
  border: none;
  gap: 4px;
}

.request-chat-attachment-image:hover {
  background: transparent;
  border: none;
}

.request-chat-attachment-image > a {
  display: block;
  line-height: 0; /* kill the inline-element gap below the img */
}

/* Default (desktop / ≥901px) thumbnail size — 3-ish per row in a typical
   message bubble. */
.request-chat-attachment-image .request-chat-inline-image {
  max-width: 200px;
  max-height: 200px;
}

/* Size text beneath the thumbnail — small and dim, matches file pills */
.request-chat-attachment-image .request-chat-attachment-size {
  padding: 0 2px;
}

/* Phone widths: tighter thumbnails so two fit per row in a ~320px bubble.
   At 150px + 8px gap, two images take ~308px, comfortably under the
   message-body width on a 380px viewport. */
@media (max-width: 900px) {
  .request-chat-attachment-image .request-chat-inline-image {
    max-width: 150px;
    max-height: 150px;
  }
}

/* ── Request page upload widget (upload-dropzone / upload-pool) ── */
.upload-dropzone {
  width: 100%;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1px dashed rgba(255, 255, 255, .14);
  border-radius: 24px;
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color .2s, background .2s;
  box-sizing: border-box;
  position: relative;
}

.upload-dropzone:hover,
.upload-dropzone[data-hc-focus="true"] {
  border-color: var(--accent);
  background: rgba(255, 79, 109, .04);
}

.upload-dropzone input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}

.upload-dropzone span {
  font-size: 14px;
  color: var(--text-dim);
  position: relative;
  z-index: 2;
  pointer-events: none;
}

.upload-dropzone span a {
  color: var(--text-dim);
  text-decoration: none;
  pointer-events: none;
}

.upload-pool {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.upload-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color .15s;
  position: relative;
  overflow: hidden;
}

.upload-item:hover {
  border-color: var(--accent-border);
  background: var(--surface2);
}

.upload-item-icon { color: var(--accent); flex-shrink: 0; }
.upload-item-icon-spacer { display: none; }

.upload-link {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color .15s;
}

.upload-link:hover { color: var(--accent); }

.upload-path {
  font-size: 11px;
  color: var(--text-muted);
  margin: 0;
  white-space: nowrap;
}

.upload-remove {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  cursor: pointer;
  color: var(--text-dim);
  transition: background .15s, color .15s;
}

.upload-remove:hover {
  background: var(--surface2);
  color: var(--accent);
}

.upload-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background: var(--accent);
  transition: width .2s;
}

.notification-error { color: var(--accent); font-size: 12px; margin-top: 6px; }

/* ── Header ── */
.request-chat-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg);
  padding: 12px 0;
  margin-bottom: 0;
  border-bottom: none;
  -webkit-mask-image: none;
  mask-image: none;
}

.request-chat-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 6px;
}

/* Back link, desktop status — hidden on desktop/mobile respectively */
.request-chat-back-link { display: none; }
.request-chat-desktop-status { display: inline-flex; } /* shown on desktop */
/* Toggle status badge — hidden on desktop */
.request-chat-toggle-status { display: none; }

/* Mobile toggle — hidden on desktop */
.request-chat-details-toggle { display: none; }

/* Mobile-only elements — hidden on desktop */
.request-chat-composer-toolbar  { display: none; }  /* mobile toolbar (attach btn + send) */
.request-chat-header-panel      { display: none; }  /* mobile slide-down details panel */
.request-chat-back-link         { display: none; }  /* mobile back arrow */
.request-chat-details-toggle    { display: none; }  /* mobile TICKET DETAILS toggle */

@media (min-width: 901px) {
  .request-chat-header-row {
    display: block;
    padding-bottom: 0;
  }

  .request-chat-title,
  h1.request-chat-title {
    position: relative;
    width: 100%;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
    font-size: clamp(24px, 2.8vw, 28px) !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    letter-spacing: -.5px !important;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  .request-chat-title::after {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    bottom: -1px;
    width: 56px;
    height: 2px;
    border-radius: 2px;
    background: var(--accent);
  }
}

/* Attachment sheet + backdrop — mobile only */
.request-chat-attach-sheet    { display: none; }
.request-chat-attach-backdrop { display: none; }

/* Upload widget IS visible on desktop — do NOT hide .request-chat-attachments-expanded here */

/* Style the desktop upload dropzone to match the dark theme */
.request-chat-page .upload-dropzone {
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 13px;
  padding: 14px 20px;
  text-align: center;
  transition: border-color .15s, background .15s;
}
.request-chat-page .upload-dropzone:hover {
  border-color: var(--accent-border);
  background: var(--surface2);
}
.request-chat-page .upload-pool { margin-top: 8px; }

/* ── Chat layout ── */
.request-chat-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg);
  padding: 12px 0 12px;
  margin-bottom: 0;
  border-bottom: none;
  -webkit-mask-image: none;
  mask-image: none;
}

.request-chat-area {
  position: relative; /* positioning context for the new-reply banner */
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.request-chat-scroll {
  position: relative;
  overflow-y: auto;
  height: calc(100vh - var(--header-h) - 260px);
  min-height: 300px;
  padding: 20px 0 8px;
  -webkit-mask-image: none;
  mask-image: none;
}

.request-chat-load-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  font-size: 12px;
  color: var(--text-muted);
}

.request-chat-list.is-bootstrap-loading .request-chat-load-indicator {
  position: fixed;
  top: 50%;
  left: var(--request-chat-loader-x, 50%);
  z-index: 70;
  transform: translate(-50%, -50%);
  padding: 12px;
  font-size: 13px;
  pointer-events: none;
}

/* ── Reply form ── */
.request-chat-reply {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.request-chat-form {
  display: block;
}

.request-chat-reply-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.request-chat-form textarea {
  width: 100% !important;
  height: 60px;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  padding: 18px 20px !important;
  font-size: 16px !important; /* min 16px prevents iOS zoom on focus */
  color: var(--text) !important;
  outline: none !important;
  box-shadow: none !important;
  transition: border-color .2s, border-radius .2s, height .2s, box-shadow .2s !important;
  resize: none !important;
  box-sizing: border-box;
  font-family: inherit;
  line-height: 1.5;
  overflow: hidden;
  -webkit-appearance: none;
  appearance: none;
}

.request-chat-form textarea::-webkit-scrollbar { width: 12px; }

.request-chat-form textarea::-webkit-scrollbar-track { background: transparent; }

.request-chat-form textarea::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: var(--radius);
    background-clip: padding-box;
    border: 4px solid transparent;
    border-top-width: 24px;
    border-bottom-width: 24px;
}

.request-chat-form textarea::-webkit-scrollbar-corner { background: transparent; }

.request-chat-form textarea::-webkit-resizer { background: transparent; }

.request-chat-form textarea::placeholder { color: var(--text-dim) !important; }

.request-chat-form textarea:hover { border-color: rgba(255,255,255,.14) !important; }

.request-chat-form textarea:focus {
  height: 200px;
  border-color: var(--accent) !important;
  border-radius: 16px !important;
  box-shadow: 0 0 0 4px var(--accent-dim) !important;
  outline: none !important;
  overflow: auto;
  resize: vertical;
}

.request-chat-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* ── Sidebar info list ── */
.request-chat-info-list {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 4fr);
  gap: 6px 12px;
  align-items: baseline;
}

.request-chat-info-list dt {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-muted);
  opacity: .7;
  overflow-wrap: anywhere;
}

.request-chat-info-list dd {
  font-size: 13px;
  color: var(--text);
  margin: 0;
  min-width: 0;
}
.request-chat-info-list dd .status-label {
  max-width: 100%;
  white-space: normal;
  text-align: center;
  justify-content: center;
  line-height: 1.25;
  font-size: 10px;
  padding: 2px 8px;
}

.request-chat-collaborators {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.request-chat-collaborators li { font-size: 13px; color: var(--text-muted); }

/* ═══════════════════════════════════════════════════════
   DESKTOP COMPOSER (mirrors mobile pattern)
   Wrapper provides the visual envelope; textarea inside is
   transparent/borderless. Toolbar holds attach + send.
═══════════════════════════════════════════════════════ */

/* Wrapper — applies on all viewports */
.request-chat-composer-wrap {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
  position: relative;
}

.request-chat-composer-wrap:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-dim);
}

/* Drag-over state — coral dashed border + drop overlay */
.request-chat-composer-wrap.is-dragover {
  border-color: var(--accent);
  border-style: dashed;
  background: rgba(255, 79, 109, .04);
  box-shadow: 0 0 0 4px var(--accent-dim);
}

.request-chat-composer-wrap.is-dragover::before {
  content: 'Drop files to attach';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(26, 26, 26, .92);
  color: var(--accent);
  font-size: 14px;
  font-weight: 700;
  z-index: 5;
  pointer-events: none;
  border-radius: inherit;
}

/* Reply container — relative anchor for desktop sheet positioning */
.request-chat-reply {
  position: relative;
}

/* ── GLOBAL hide rules — apply at every viewport size ──
   The composer toolbar (attach btn + send) handles file picking and
   submission for both desktop and mobile, so the visible upload widget
   and the duplicate submit in the controls row are always redundant.
   These need to be outside any media query so resizing across the 900↔901px
   boundary doesn't reveal them. */
.request-chat-attachments-expanded {
  display: none !important;
}

.request-chat-controls input[type="submit"],
.request-chat-controls .request-chat-send {
  display: none !important;
}

/* Desktop scope only: rebuild composer */
@media (min-width: 901px) {
  /* Override desktop textarea to be transparent — wrapper provides border/radius */
  .request-chat-form textarea {
    height: 88px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 14px 16px 8px !important;
    box-shadow: none !important;
    transition: none !important;
    overflow: hidden auto !important;
  }

  .request-chat-form textarea:focus {
    height: 88px !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    overflow: hidden auto !important;
    resize: none !important;
  }

  /* Show composer toolbar on desktop */
  .request-chat-composer-toolbar {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    position: static;
    padding: 8px 14px 10px;
    background: transparent;
    border-top: 1px solid var(--border);
  }

  .request-chat-composer-toolbar .request-chat-attach-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 0;
    font-family: inherit;
    transition: color .15s;
  }

  .request-chat-composer-toolbar .request-chat-attach-btn:hover {
    color: var(--accent);
  }

  .request-chat-composer-toolbar .request-chat-send {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    padding: 8px 18px !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    white-space: nowrap;
    border-radius: 100px !important;
    background: var(--accent) !important;
    color: #fff !important;
    border: none !important;
    cursor: pointer !important;
    transition: background .15s, opacity .15s, transform .1s !important;
  }

  .request-chat-composer-toolbar .request-chat-send:hover:not(:disabled) {
    opacity: .9;
  }

  .request-chat-composer-toolbar .request-chat-send:active:not(:disabled) {
    transform: scale(.97);
  }

  .request-chat-composer-toolbar .request-chat-send:disabled {
    background: var(--surface2) !important;
    color: var(--text-dim) !important;
    cursor: not-allowed !important;
  }

  .request-chat-composer-toolbar .request-chat-send-icon {
    flex-shrink: 0;
  }

  /* Controls row reflowed — only mark-as-solved checkbox + optional ghost btn */
  .request-chat-controls {
    margin-top: 12px;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  /* Desktop attach sheet — absolutely positioned above composer */
  .request-chat-attach-sheet {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: auto; /* JS sets this */
    z-index: 50;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px;
    transform: translateY(8px) scale(.96);
    opacity: 0;
    visibility: hidden;
    transform-origin: bottom center;
    transition: transform .18s ease, opacity .15s ease, visibility 0s linear .18s;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .5);
    max-width: 100%;
  }

  .request-chat-attach-sheet.is-open {
    transform: translateY(0) scale(1);
    opacity: 1;
    visibility: visible;
    transition: transform .2s cubic-bezier(.32,1,.36,1), opacity .15s ease, visibility 0s linear 0s;
  }

  .request-chat-attach-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 10px;
  }

  .request-chat-attach-sheet-title {
    font-size: 11px;
    font-weight: 800;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
  }

  .request-chat-attach-sheet-close {
    background: none;
    border: none;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-muted);
    border-radius: 50%;
    transition: color .15s, background .15s;
  }

  .request-chat-attach-sheet-close:hover {
    color: var(--text);
    background: var(--surface2);
  }

  .request-chat-attach-sheet-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
    max-height: 240px;
    overflow-y: auto;
  }

  .request-chat-attach-sheet-add {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    background: transparent;
    border: 1px dashed rgba(255, 255, 255, .12);
    border-radius: var(--radius-sm);
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    transition: border-color .15s, color .15s;
    font-family: inherit;
  }

  .request-chat-attach-sheet-add:hover {
    border-color: var(--accent-border);
    color: var(--accent);
  }
}

/* ═══════════════════════════════════════════════════════
   ATTACH SHEET ITEMS — shared across desktop + mobile
   Outside any media query so both viewports use them.
   Mobile rules later in file override these where needed.
═══════════════════════════════════════════════════════ */

.sheet-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color .15s;
  box-sizing: border-box;
}

.sheet-item:hover {
  border-color: var(--accent-border);
}

.sheet-item-thumb {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: var(--radius-xs);
  flex-shrink: 0;
  border: 1px solid var(--border);
  background: var(--surface2);
  display: block;
}

/* When the inline thumb is an SVG (non-image file), tile the icon */
.sheet-item > svg {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  padding: 10px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  box-sizing: border-box;
}

.sheet-item-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}

.sheet-item-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.sheet-item-size {
  font-size: 11px;
  color: var(--text-muted);
  display: block;
}

.sheet-item-remove {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 13px;
  cursor: pointer;
  padding: 4px 8px;
  flex-shrink: 0;
  border-radius: 50%;
  line-height: 1;
  transition: color .15s, background .15s;
  font-family: inherit;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sheet-item-remove:hover {
  color: var(--accent);
  background: var(--accent-dim);
}

/* =============================================================
   REQUEST CHAT - MOBILE
   overflow:hidden on body stops iOS scrolling the page.
   Flex column from main fills viewport — scroll area gets flex:1.
   Reply is fixed above keyboard (iOS 15+ native behaviour).
============================================================= */
@media (max-width: 900px) {

  /* Lock body/html scroll — iOS Safari ignores overflow:hidden on body alone
     but respects it when combined on both html + body */
  html.request-chat-active,
  html.request-chat-active body {
    overflow: hidden !important;
    height: 100% !important;
    width: 100% !important;
    /* position:fixed stops iOS rubber-band / Safari chrome show/hide */
    position: fixed !important;
  }
  /* Body needs to stay at top so fixed children position correctly */
  html.request-chat-active body {
    top: 0;
    left: 0;
  }

  /* Hide site chrome */
  html.request-chat-active .hero,
  html.request-chat-active .pills-strip,
  html.request-chat-active .site-footer,
  html.request-chat-active .site-header { display: none; }

  /* Hide everything in main except the chat wrapper */
  html.request-chat-active main.container > *:not(.request-chat-main) { display: none; }
  html.request-chat-active main.container {
    padding: 0 !important;
    max-width: 100%;
  }

  /* ── Core fix: position the chat wrapper fixed to the viewport ──
     This is the only reliable way to prevent iOS page scroll
     while keeping inner div scrollable. */
  html.request-chat-active .request-chat-main {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex !important;
    flex-direction: column !important;
    background: var(--bg);
    z-index: 10;
    overflow: hidden;
    width: 100%;
    padding: 0;
  }

  /* All intermediate wrappers — fill and pass through */
  .request-chat-layout,
  .request-chat-content,
  .request-chat-area {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    width: 100%;
    padding: 0;
  }

  /* Header: pinned at top, never shrinks */
  .request-chat-header {
    flex-shrink: 0;
    position: relative;   /* anchors absolute panel to bottom of header */
    z-index: 60;
    background: var(--bg);
    padding: 12px 20px 0;
    border-bottom: none;
    -webkit-mask-image: none;
    mask-image: none;
    box-sizing: border-box;
    overflow: visible;    /* allow panel to overflow downward */
  }

  /* Scroll area: fills all remaining space, scrolls internally */
  .request-chat-scroll {
    flex: 1 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important; /* never allow sideways swipe — long content wraps inside messages instead */
    -webkit-overflow-scrolling: touch;
    /* Reserve scrollbar space on both edges so message bubbles stay
       centered when the thread is long enough to scroll — matches the
       fix on the mobile details panel. */
    scrollbar-gutter: stable both-edges;
    padding: 12px 20px 12px; /* normal padding — reply bar is now a flex sibling */
    box-sizing: border-box;
    -webkit-mask-image: none;
    mask-image: none;
    background: var(--bg);
    min-height: 0 !important;
    overflow-anchor: none;
    /* Flex column so .request-chat-list can use margin-top:auto to stick
       to the bottom when content is shorter than the viewport. Prevents
       the "last message floating mid-screen" feel and means late layout
       shifts (image loads, font swaps) don't push content out of view. */
    display: flex;
    flex-direction: column;
  }

  .request-chat-scroll > .request-chat-list {
    margin-top: auto;
  }

  /* Reply bar: flex sibling at bottom of column.
     Stays in flow so the scroll area's flex:1 naturally stops at its
     top edge — scrollbar is bounded to the visible scroll region and
     "scroll to bottom" lands cleanly above the composer.
     iOS keyboard: .request-chat-main is fixed to the layout viewport
     and the visualViewport resize listener handles scroll-to-bottom. */
  .request-chat-reply {
    flex-shrink: 0;
    z-index: 100;
    margin: 0;
    padding: 10px 20px 10px;
    border-top: 1px solid var(--border);
    background: var(--bg);
    box-sizing: border-box;
    max-height: 50vh;
    overflow: visible;
  }
  .request-chat-reply .request-chat-reply-container {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  /* Suppress satisfaction widget */
  .request-chat-main > .satisfaction { display: none !important; }

  /* Sidebar hidden on mobile */
  .request-chat-sidebar { display: none; }

  /* Back link */
  /* Header row: back arrow icon + title inline */
  .request-chat-header-row {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .request-chat-back-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    color: var(--accent);
    text-decoration: none;
    opacity: .9;
    transition: opacity .15s;
  }
  .request-chat-back-link:hover { opacity: 1; }

  /* Title sits next to back arrow */
  .request-chat-header-row .request-chat-title {
    font-size: 18px !important;
    font-weight: 700;
    letter-spacing: -.3px;
    line-height: 1.2;
    margin: 0;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Toggle status badge — inherits full label variable system, compact size */
  .request-chat-toggle-status.status-label-request {
    font-size: 10px;
    padding: 2px 7px;
    letter-spacing: .04em;
    vertical-align: middle;
  }

  /* Show status text in toggle on mobile, hide desktop status pill */
  /* Show toggle status — display:inline-flex to render as badge */
  .request-chat-toggle-status { display: inline-flex; }
  .request-chat-desktop-status { display: none; }

  /* Details toggle */
  .request-chat-details-toggle {
    display: flex;
    align-items: center;
    width: 100%;
    background: none;
    border: none;
    border-bottom: 1px solid var(--border);
    padding: 12px 0;
    cursor: pointer;
    color: var(--text-muted);
    gap: 8px;
  }
  /* Title grows to fill space — pushes badge + icon to the right */
  .request-chat-details-toggle .sidenav-title { flex: 1; }
  .request-chat-details-toggle .sidenav-title {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
    flex: 1;
    text-align: left;
  }
  .request-chat-details-toggle .collapsible-sidebar-toggle-icon { display: block; flex-shrink: 0; }
  .request-chat-details-toggle .x-icon { display: none; }
  .request-chat-details-toggle[aria-expanded="true"] .x-icon { display: block; }
  .request-chat-details-toggle[aria-expanded="true"] .chevron-icon { display: none; }
  /* Keep border-bottom always visible — consistent regardless of panel state */

  /* Ticket details panel — fills from header to reply bar, scrolls internally */
  .request-chat-header-panel {
    display: block; /* override desktop display:none */
    position: fixed;
    left: 0;
    right: 0;
    top: 80px;     /* overridden by JS */
    bottom: 170px; /* overridden by JS (reply bar height) */
    z-index: 65;
    background: var(--bg);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: max-height .3s ease, opacity .2s ease;
    box-shadow: 0 4px 24px rgba(0,0,0,.4);
    border-bottom: 1px solid var(--border);
  }
  .request-chat-header-panel.is-open {
    max-height: 100vh; /* top+bottom constraints cap the real height */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Reserve scrollbar space on both edges so the cards stay centered
       whether or not the scrollbar is currently rendered. Without
       'both-edges', the scrollbar only consumes the right-side gutter
       and the cards visually shift leftward when content overflows. */
    scrollbar-gutter: stable both-edges;
    opacity: 1;
    pointer-events: auto;
  }
  .request-chat-header-panel-inner {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 20px 24px;
    /* Normalise text sizes inside panel */
    font-size: 14px;
  }
  /* Keep info list text compact */
  .request-chat-header-panel .request-chat-info-list dt {
    font-size: 11px;
    letter-spacing: .06em;
  }
  .request-chat-header-panel .request-chat-info-list dd {
    font-size: 13px;
    font-weight: 400;
  }
  .request-chat-header-panel .sidebar-card-title {
    font-size: 11px;
  }
  .request-chat-header-panel .status-label {
    font-size: 11px;
    padding: 2px 8px;
  }

  /* Mobile composer */
  html.request-chat-active .request-chat-form .request-chat-controls { display: none !important; }

  /* Hide upload pool in composer — tracked invisibly, displayed in sheet */
  html.request-chat-active .request-chat-attachments-expanded { display: none !important; }

  /* Composer: column layout — textarea on top, toolbar row below */
  .request-chat-composer-wrap {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color .2s, box-shadow .2s;
  }

  .request-chat-composer-wrap:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-dim);
  }

  html.request-chat-active .request-chat-form textarea {
    height: 88px !important;
    min-height: 88px !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 12px 16px 8px !important;
    box-shadow: none !important;
    resize: none !important;
    overflow: hidden auto !important; /* hidden x, scrollable y */
    font-size: 16px !important;       /* 16px minimum prevents iOS zoom */
    line-height: 1.45 !important;
  }
  html.request-chat-active .request-chat-form textarea:focus {
    height: 88px !important;
    min-height: 88px !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
  }

  .request-chat-composer-toolbar {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    position: static;
    padding: 8px 12px 10px;
    background: transparent;
    border-top: 1px solid var(--border);
  }

  .request-chat-composer-toolbar .request-chat-attach-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
  }

  /* ── Attachment sheet — mobile only ── */
  .request-chat-attach-sheet {
    display: block; /* override desktop display:none */
    position: fixed;
    left: 8px;
    right: 8px;
    bottom: 0; /* JS sets real value on open */
    z-index: 102;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px; /* fully rounded — floats above composer */
    padding: 16px 16px 16px;
    transform: translateY(150%);
    visibility: hidden;
    transition: transform .25s cubic-bezier(.32,1,.36,1), visibility 0s linear .25s;
    box-shadow: 0 -4px 24px rgba(0,0,0,.5);
  }
  .request-chat-attach-sheet.is-open {
    transform: translateY(0);
    visibility: visible;
    transition: transform .25s cubic-bezier(.32,1,.36,1), visibility 0s linear 0s;
  }
  .request-chat-attach-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 12px;
  }
  .request-chat-attach-sheet-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .08em;
  }
  .request-chat-attach-sheet-close {
    background: none;
    border: none;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 16px;
    border-radius: 50%;
    transition: color .15s, background .15s;
  }
  .request-chat-attach-sheet-close:hover { color: var(--text); background: var(--surface2); }
  .request-chat-attach-sheet-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
    max-height: 180px;
    overflow-y: auto;
  }
  .sheet-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    transition: border-color .15s;
  }
  .sheet-item:hover { border-color: var(--accent-border); }
  .sheet-item-thumb {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
    border: 1px solid var(--border);
    background: var(--surface2);
  }
  .sheet-item-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .sheet-item-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .sheet-item-size {
    font-size: 11px;
    color: var(--text-muted);
  }
  .sheet-item-remove {
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 13px;
    cursor: pointer;
    padding: 3px 5px;
    flex-shrink: 0;
    border-radius: 50%;
    line-height: 1;
    transition: color .15s, background .15s;
    font-family: inherit;
  }
  .sheet-item-remove:hover { color: var(--accent); background: var(--accent-dim); }
  .request-chat-attach-sheet-add {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    background: transparent;
    border: 1px dashed rgba(255,255,255,.12);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    transition: border-color .15s, color .15s;
    font-family: inherit;
  }
  .request-chat-attach-sheet-add:hover {
    border-color: var(--accent-border);
    color: var(--accent);
  }


  .request-chat-send {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    padding: 0 !important;
    border-radius: 50% !important;
    background: var(--accent) !important;
    color: #fff !important;
    border: none !important;
    cursor: pointer !important;
    transition: background .15s, transform .1s !important;
  }

  .request-chat-send:active:not(:disabled) {
    transform: scale(.94);
  }

  .request-chat-send:disabled {
    background: var(--surface2) !important;
    color: var(--text-dim) !important;
    cursor: not-allowed !important;
  }

  .request-chat-send-label {
    display: none; /* mobile is icon-only */
  }

  .request-closed-notice {
    margin: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  .request-closed-notice-content {
    padding: 14px 16px;
    width: 100%;
    text-align: center;
  }

  .request-closed-notice-title {
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 6px;
    letter-spacing: -.01em;
    white-space: normal;
  }

  .request-closed-notice-body {
    font-size: 12px;
    line-height: 1.4;
    margin: 0 0 10px;
    color: var(--text-muted);
  }

  .request-closed-notice-actions {
    gap: 8px;
    margin: 0;
  }

  .request-closed-new-request {
    padding: 7px 16px;
    font-size: 12px;
    border-radius: var(--radius-sm);
  }
}

/* CKEditor styles injected by wysiwyg-bundle.js on editor ready */

/* ═══════════════════════════════════════════════════════
   TRENDING ARTICLES
   — home_page trending list, shared with requests list
═══════════════════════════════════════════════════════ */
.trending-list {
  display: flex;
  flex-direction: column;
  gap: 2px
}
.article-view-switcher {
  display: inline-block;
  position: relative;
  margin-bottom: 20px
}
.article-view-switcher__toggle.dropdown-toggle {
  padding: 0;
  gap: 8px;
  border: 0;
  background: none;
  color: var(--text)
}
.article-view-switcher__toggle.dropdown-toggle:hover {
  border: 0;
  background: none;
  color: var(--text)
}
.article-view-switcher__heading.section-heading {
  margin-bottom: 0;
  pointer-events: none
}
.article-view-switcher__toggle .article-view-switcher__chevron {
  color: var(--accent);
  opacity: .8;
  transition: color .15s, transform .15s
}
.article-view-switcher__toggle[aria-expanded="true"] .article-view-switcher__chevron {
  color: var(--accent);
  opacity: 1
}
.article-view-switcher__menu {
  inset-inline-start: 0;
  inset-inline-end: auto;
  min-width: 210px
}
.article-view-switcher__menu button:hover,
.article-view-switcher__menu button:focus-visible,
.article-view-switcher__menu button[aria-checked="true"] {
  background: var(--surface2);
  color: var(--text);
  outline: none
}
.article-view-empty {
  display: grid;
  min-height: 180px;
  margin: 0;
  padding: 32px;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.5;
  text-align: center
}
.home-content--no-articles {
  grid-template-columns: minmax(0, 1fr);
}
.home-content--no-articles .two-col-main {
  display: none;
}
.home-content--no-articles .home-page-aside {
  position: static;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}
@media (max-width: 600px) {
  .home-content--no-articles .home-page-aside {
    grid-template-columns: minmax(0, 1fr);
  }
}
.trending-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: inherit;
  transition: background .15s
}
.trending-item:hover {
  background: var(--surface)
}
.trending-num {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-dim);
  min-width: 20px
}
.trending-body {
  flex: 1 1;
  min-width: 0
}
.trending-title {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}
.trending-meta {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px
}
.trending-arrow {
  color: var(--text-dim);
  font-size: 16px
}

/* ═══════════════════════════════════════════════════════
   REQUESTS PAGE — LAYOUT (Desktop)
═══════════════════════════════════════════════════════ */

.requests-layout {
  display: flex;
  align-items: flex-start;
  gap: 0;
  padding-top: 24px;
}

.profile-sidebar,
.requests-sidebar {
  width: 220px;
  flex-shrink: 0;
  padding: 24px 24px 40px 0;
}

/* desktop: button shown as static label only, icons hidden */
.profile-sidebar .collapsible-sidebar-toggle,
.requests-sidebar .collapsible-sidebar-toggle,
#fav-support .collapsible-sidebar-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  padding: 0 0 10px 0;
  cursor: default;
  pointer-events: none;
  color: var(--text-muted);
  gap: 8px;
}

.profile-sidebar .sidenav-title,
.requests-sidebar .sidenav-title,
#fav-support .sidenav-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
  padding: 0;
  flex: 1;
  text-align: left;
  display: block;
}

.profile-sidebar .collapsible-sidebar-toggle-icon,
.requests-sidebar .collapsible-sidebar-toggle-icon,
#fav-support .collapsible-sidebar-toggle-icon {
  display: none; /* hidden on desktop */
}

.profile-sidebar-nav,
.requests-sidebar-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.profile-sidebar-nav li,
.requests-sidebar-nav li {
  display: block;
}

.profile-sidebar-nav .sidenav-item,
.requests-sidebar-nav .sidenav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 10px;
  font-size: 13px;
  color: var(--text-muted);
  text-decoration: none;
  border-radius: 8px;
  transition: background .15s, color .15s;
  gap: 8px;
}

.profile-sidebar-nav .sidenav-item:hover,
.requests-sidebar-nav .sidenav-item:hover {
  background: var(--border-dim);
  color: var(--text);
}

.profile-sidebar-nav .sidenav-item.current,
.requests-sidebar-nav .sidenav-item.current {
  background: rgba(255, 68, 88, .1);
  color: var(--accent);
}

.profile-sidebar-nav .filter-name,
.requests-sidebar-nav .filter-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-sidebar-nav .doc-count,
.requests-sidebar-nav .doc-count {
  font-size: 11px;
  color: var(--text-muted);
  opacity: .6;
  flex-shrink: 0;
}

.profile-main,
.requests-main {
  flex: 1;
  min-width: 0;
}


/* ─────────────────────────────────────────────────────
   REQUESTS PAGE — LAYOUT (Mobile, max-width: 900px)
───────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .requests-layout {
    flex-direction: column;
  }

  .profile-sidebar,
  .requests-sidebar {
    width: 100%;
    padding: 0;
  }

  .profile-sidebar .collapsible-sidebar-toggle,
  .requests-sidebar .collapsible-sidebar-toggle {
    cursor: pointer;
    pointer-events: auto;
    padding: 12px 0;
    margin-bottom: 0;
    border-bottom: 1px solid var(--border);
  }

  .profile-sidebar .collapsible-sidebar-toggle-icon,
  .requests-sidebar .collapsible-sidebar-toggle-icon {
    display: block;
    flex-shrink: 0;
  }

  /* x hidden by default, chevron shown */
  .profile-sidebar .x-icon,
  .requests-sidebar .x-icon {
    display: none;
  }

  .profile-sidebar .collapsible-sidebar-toggle[aria-expanded="true"] .x-icon,
  .requests-sidebar .collapsible-sidebar-toggle[aria-expanded="true"] .x-icon {
    display: block;
  }

  .profile-sidebar .collapsible-sidebar-toggle[aria-expanded="true"] .chevron-icon,
  .requests-sidebar .collapsible-sidebar-toggle[aria-expanded="true"] .chevron-icon {
    display: none;
  }

  /* list hidden when collapsed, visible when expanded or not yet interacted */
  .profile-sidebar .collapsible-sidebar-toggle[aria-expanded="false"] ~ .profile-sidebar-nav,
  .requests-sidebar .collapsible-sidebar-toggle[aria-expanded="false"] ~ .requests-sidebar-nav {
    display: none;
  }

  .profile-sidebar .collapsible-sidebar-toggle[aria-expanded="true"] ~ .profile-sidebar-nav,
  .requests-sidebar .collapsible-sidebar-toggle[aria-expanded="true"] ~ .requests-sidebar-nav {
    display: flex;
    flex-direction: column;
    padding: 8px 0 12px;
  }

  /* req-sidebar-filters: hide/show with nav (desktop only — mobile always shows) */
  @media (min-width: 901px) {
    .requests-sidebar .collapsible-sidebar-toggle[aria-expanded="false"] ~ .req-sidebar-filters {
      display: none;
    }
    .requests-sidebar .collapsible-sidebar-toggle[aria-expanded="true"] ~ .req-sidebar-filters {
      display: block;
    }
  }

  .profile-sidebar .sidenav-item,
  .requests-sidebar .sidenav-item {
    padding: 7px 10px;
    font-size: 13px;
    justify-content: space-between;
  }

  .profile-main,
  .requests-main {
    padding: 0 0 32px 0;
    width: 100%;
    min-width: 0;
  }
} /* end @media (max-width: 900px) */


/* ─────────────────────────────────────────────────────
   REQUESTS PAGE — FILTERS, CARDS, PAGINATION
───────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════
   REQUESTS PAGE  (#req-app)
═══════════════════════════════════════════════════════════════ */

#req-app {
  margin-top: 28px;
}

/* ── Sidebar tab buttons — extend sidenav-item for buttons ── */
.profile-sidebar-nav .req-tab,
.requests-sidebar-nav .req-tab {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}

/* ── Section header ── */
.requests-section-header {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.requests-section-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  color: var(--text);
}

.requests-section-description {
  font-size: 13px;
  color: var(--text-muted);
  opacity: .7;
}

/* ── Sidebar filters ── */
.req-sidebar-filters {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

@media (max-width: 900px) {
  /* Filters always visible on mobile regardless of sidebar collapse state */
  .requests-sidebar .collapsible-sidebar-toggle[aria-expanded="false"] ~ .req-sidebar-filters,
  .requests-sidebar .collapsible-sidebar-toggle:not([aria-expanded]) ~ .req-sidebar-filters {
    display: flex !important;
    border-top: none; /* toggle already has border-bottom — avoid double line */
    margin-top: 12px;
    padding-top: 0;
  }
}

.req-sidebar-filters .req-search-wrap {
  width: 100%;
}

.req-sidebar-filters .req-search {
  width: 100%;
  box-sizing: border-box;
}

.req-sidebar-filters .req-select {
  width: 100%;
  box-sizing: border-box;
}

/* ── Request list ── */
.req-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.req-list-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: inherit;
  transition: background .15s;
}
.req-list-item:hover { background: var(--surface); }

.req-list-num {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dim);
  min-width: 36px;
  flex-shrink: 0;
}

.req-list-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.req-list-title {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.req-list-meta {
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  overflow: hidden;
}
.req-list-meta-left,
.req-list-meta-right {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.req-list-status {
  flex-shrink: 0;
  margin-right: 4px;
}

.req-list-arrow {
  color: var(--text-dim);
  flex-shrink: 0;
}

/* ── Count ── */

.req-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.req-search-icon {
  position: absolute;
  left: 10px;
  color: var(--text-dim);
  pointer-events: none;
}

.req-search {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 7px 12px 7px 32px;
  font-size: 14px;
  color: var(--text);
  width: 220px;
  transition: border-color .15s, box-shadow .15s;
  outline: none;
  font-family: inherit;
}

.req-search::placeholder {
  color: var(--text-dim);
}

.req-search:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}

.req-select {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 7px 12px;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
  outline: none;
  font-family: inherit;
  transition: border-color .15s;
}

.req-select:focus {
  border-color: var(--accent);
}

/* ── Status filter dropdown — fully self-contained ── */
.req-status-dropdown {
  position: relative;
  display: block;
  width: 100%;
}

.req-status-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  text-align: left;
}

.req-status-trigger[aria-expanded="true"] {
  border-color: var(--accent);
}

/* Chevron — coral, flips on open */
.req-status-chevron {
  flex-shrink: 0;
  color: var(--accent);
  transition: transform .2s ease;
}

.req-status-trigger[aria-expanded="true"] .req-status-chevron {
  transform: rotate(180deg);
}

/* Menu panel */
.req-status-menu {
  position: absolute;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  top: calc(100% + var(--dropdown-gap));
  left: 0;
  right: 0;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--dropdown-panel-radius);
  box-shadow: var(--dropdown-panel-shadow);
  padding: var(--dropdown-panel-padding);
  display: none;
  z-index: 300;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .15s ease, transform .15s ease;
  box-sizing: border-box;
}

.req-status-menu.is-open {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

/* Option buttons */
.req-status-option {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: var(--dropdown-option-height);
  padding: var(--dropdown-option-padding);
  font-size: var(--dropdown-option-font-size);
  font-weight: 400;
  color: var(--text-muted);
  text-align: left;
  background: none;
  border: none;
  border-radius: var(--dropdown-option-radius);
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: color .12s, background .12s;
}

.req-status-option:hover {
  color: var(--text);
  background: var(--surface2);
}

.req-status-option[aria-selected="true"],
.req-status-option[aria-selected="true"]:hover {
  color: var(--text);
  background: var(--surface2);
}

/* ── Cards ── */
.req-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.req-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  transition: border-color .15s;
}

.req-card:hover {
  border-color: var(--accent-border);
}

.req-card-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.req-card-subject {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color .15s;
}

.req-card-subject:hover { color: var(--accent); }

.req-card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
  flex-wrap: wrap;
}

.req-card-id {
  font-family: monospace;
  color: var(--text-dim);
}

.req-card-sep {
  color: var(--text-dim);
  opacity: .5;
}

.req-card-aside {
  flex-shrink: 0;
}

/* ── Status pill ── */
.req-status {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .3px;
  border: 1px solid;
  white-space: nowrap;
}

/* ── States ── */
.req-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 48px 0;
  justify-content: center;
  color: var(--text-muted);
  font-size: 13px;
}

.req-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: req-spin .7s linear infinite;
  flex-shrink: 0;
}

@keyframes req-spin { to { transform: rotate(360deg); } }

.req-empty {
  padding: 48px 0;
  text-align: center;
  font-size: 14px;
  color: var(--text-muted);
}

/* ── Pagination ── */
.req-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px 0;
  margin-top: 4px;
}

.req-page-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}

.req-page-btn:hover:not([disabled]) {
  background: var(--surface2);
  border-color: var(--accent-border);
  color: var(--text);
}

.req-page-btn[disabled] {
  opacity: .35;
  cursor: not-allowed;
}

.req-page-label {
  font-size: 13px;
  color: var(--text-muted);
}

/* ── Mobile ── */
@media (max-width: 900px) {
  .req-card-meta { flex-direction: column; align-items: flex-start; gap: 2px; }
  .req-card-sep { display: none; }
}

/* ── Container ── */


.req-body {
  /* container for the rendered list/cards */
}

.req-tab-org-li {
  /* shown/hidden by JS based on org membership */
}

.req-tab-org {
  /* org requests tab — same styling as other tabs */
}

.req-empty {
  text-align: center;
  color: var(--text-muted);
  padding: 40px 0;
  font-size: 14px;
}


/* ── Community footer (suggest new post) ── */
.community-footer {
  padding: 40px 0;
  text-align: center;
  border-top: 1px solid var(--border);
  margin-top: 40px;
}
.community-footer-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 16px;
}
/* ── Post overview count ── */
.post-overview-count {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: var(--text-muted);
}
/* ── Post page layout ── */
.post-container {
  display: flex;
  gap: 40px;
  align-items: flex-start;
}
.post-header {
  margin-bottom: 20px;
}
.post-info-container {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
}
.post-info {
  flex: 1;
  min-width: 0;
}
.post-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}
.post-content {
  font-size: 15px;
  line-height: 1.7;
}
.post-comment-count {
  font-size: 13px;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.post-actions-wrapper {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--border);
  margin-top: 20px;
}
.post-sidebar-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  margin-bottom: 12px;
}


/* ═══════════════════════════════════════════════════════
   COMMUNITY PAGES
   — post_list, topic_list, topic_page, post_page
═══════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────
   COMMUNITY HERO (search bar)
───────────────────────────────────────── */

.community-hero {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 28px 0;
}

.community-hero .hero-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 32px;
  max-width: 680px;
}

.community-hero .search-icon {
  color: var(--text-muted);
  opacity: .5;
  flex-shrink: 0;
  margin-left: 20px;
}

.community-hero .search-full input[type="search"] {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 14px 20px 14px 0 !important;
  font-size: 14px;
  color: var(--text);
  width: 100%;
}

/* ─────────────────────────────────────────
   COMMUNITY PAGE HEADER
───────────────────────────────────────── */

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

.community-header .section-heading {
  margin-bottom: 0;
}

.community-all-posts-item {
  margin-top: 2px;
}

.community-all-posts-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.community-all-posts-item .trending-body {
  display: flex;
  align-items: center;
  min-height: 44px;
}

/* view switcher — heading acts as dropdown trigger */
.community-view-switcher .dropdown-toggle {
  display: flex;
  align-items: center;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: inherit;
  text-align: left;
}

.community-view-switcher .section-heading {
  pointer-events: none;
}

.community-switcher-chevron {
  color: var(--accent-dim);
  transition: transform .2s, color .2s;
  flex-shrink: 0;
  margin-left: 2px;
}

/* chevron: right-facing (pointing right = rotate -90°) when closed */
.community-view-switcher .dropdown-toggle .community-switcher-chevron {
  transform: rotate(-90deg);
  color: var(--accent-dim);
}

/* chevron: down-facing + coral when open */
.community-view-switcher .dropdown-toggle[aria-expanded="true"] .community-switcher-chevron {
  transform: rotate(0deg);
  color: var(--accent);
}

.community-view-switcher .dropdown-menu a:hover,
.community-view-switcher .dropdown-menu a:focus-visible,
.community-view-switcher .dropdown-menu a[aria-checked="true"] {
  background: var(--surface2);
  color: var(--text);
  outline: none;
}

/* topic/post page description row */
.community-header:not(.page-header) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0 0;
  margin-bottom: 20px;
}

.page-header-description {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
}

.post-to-community .button,
.post-to-community a.button-large {
  white-space: nowrap;
}

/* ─────────────────────────────────────────
   TOPIC HEADER (filters + sorters)
───────────────────────────────────────── */

.topic-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}

.topic-filters {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ─────────────────────────────────────────
   STRIPED LIST (post list cards)
───────────────────────────────────────── */

.striped-list > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.striped-list-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 10px);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 20px;
  transition: background .15s, border-color .15s, transform .12s;
  position: relative;
  cursor: pointer;
}

.striped-list-item:hover,
.striped-list-item:focus-within {
  background: var(--surface2);
  border-color: var(--accent-border);
  transform: translateX(4px);
}

.post-featured {
  background: var(--accent-night-gradient);
  border-color: var(--accent-night-border);
}

.post-featured:hover,
.post-featured:focus-within {
  background: var(--accent-night-gradient);
}

.post-featured .striped-list-title,
.striped-list-title--pinned {
  display: flex;
  align-items: center;
  gap: 7px;
}

.post-featured .striped-list-title .icon-star {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 45%, transparent));
}

.striped-list-title .icon-pin {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  color: var(--accent);
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 35%, transparent));
}

.striped-list-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.striped-list-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  transition: color .15s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.posts-list .striped-list-title:hover {
  color: var(--text);
}

.post-overview-item {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

.post-status-meta {
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  color: var(--req-status-color, var(--text-muted)) !important;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.post-status-meta svg {
  flex: 0 0 12px;
  opacity: .75;
}

/* meta row */
.striped-list-item .meta-group {
  display: block;
  font-size: 0;
  white-space: nowrap;
  grid-column: unset;
  grid-row: unset;
  text-align: left;
  align-self: auto;
}

.striped-list-item .meta-data {
  display: inline;
  font-size: 11px;
  color: var(--text-muted);
  opacity: .6;
}

.community-posts-list .striped-list-item {
  padding: 20px 24px;
  gap: 16px;
}

.community-posts-list .striped-list-info {
  gap: 0;
}

.community-posts-list .striped-list-title {
  margin-bottom: 4px;
  font-size: 15px;
  font-weight: 700;
}

.community-posts-list .striped-list-item .meta-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 12px;
  white-space: normal;
}

.community-posts-list .striped-list-item .meta-data {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 12px;
  color: var(--text-dim);
  opacity: 1;
}

.community-posts-list .striped-list-item .meta-data::after {
  content: none;
}

.community-posts-list .meta-separator {
  color: var(--text-dim);
  font-size: 12px;
  opacity: .55;
}

.community-posts-list .meta-data .article-meta-icon {
  flex: 0 0 12px;
}

.community-posts-list .striped-list-excerpt {
  margin-bottom: 8px;
  font-size: 13px;
  line-height: 1.5;
}

.community-posts-list .striped-list-arrow {
  flex-shrink: 0;
  color: var(--text-dim);
  font-size: 20px;
  transition: color .15s, transform .15s;
}

.community-posts-list .striped-list-item:hover .striped-list-arrow,
.community-posts-list .striped-list-item:focus-within .striped-list-arrow {
  color: var(--accent);
  transform: translateX(4px);
}

/* ─────────────────────────────────────────
   TOPIC BLOCKS (topic list grid)
───────────────────────────────────────── */

.topic-grid-community {
  padding-top: 0;
  margin-bottom: 48px;
}

.topic-card {
  --fav-tint: color-mix(in srgb, var(--fav-color) 14%, transparent);
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: stretch;
  gap: 0;
  min-width: 0;
  min-height: 180px;
  padding: 0;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  background: #211827;
  border: 0;
  border-radius: var(--radius-sm);
  transition: transform .15s ease, filter .15s ease;
}

.topic-card:hover {
  background: #211827;
  border-color: transparent;
  filter: brightness(1.08);
  transform: translateY(-2px);
}

.topic-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.topic-card__body {
  padding: 16px;
}

.topic-card__heading {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  margin-bottom: 14px;
}

.topic-card__icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  color: var(--fav-color);
  background: var(--fav-tint);
  border: 1px solid var(--fav-color);
  border-radius: 50%;
}

.topic-card__icon::before {
  content: '';
  display: block;
  width: 18px;
  height: 18px;
  background: var(--fav-icon-fill);
  mask: var(--fav-icon) center / contain no-repeat;
  -webkit-mask: var(--fav-icon) center / contain no-repeat;
}

.topic-card__title {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 6px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.topic-card__description {
  display: -webkit-box;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.topic-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  min-height: 36px;
  padding: 0 12px;
  color: var(--text-dim);
  background: #111;
  font-size: 12px;
}

.topic-card__count {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

/* Match the homepage section-card rail on compact viewports. */
@media (max-width: 599px),
       (orientation: landscape) and (max-height: 500px) and (max-width: 900px) {
  .topic-grid-community {
    display: flex;
    align-items: stretch;
    gap: 16px;
    width: calc(100% + 40px);
    max-width: none;
    margin: 0 -20px 40px;
    padding: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-padding-inline: 20px;
    cursor: grab;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .topic-grid-community::-webkit-scrollbar {
    display: none;
  }

  .topic-grid-community.dragging {
    cursor: grabbing;
    user-select: none;
  }

  .topic-grid-community > .topic-card-shell {
    position: relative;
    display: block;
    flex: 0 0 clamp(280px, 88vw, 368px);
    min-width: 0;
  }

  .topic-grid-community > .topic-card-shell > .topic-card {
    height: 100%;
  }

  .topic-grid-community > .topic-card-shell:not(:last-child) .topic-card__meta {
    padding-right: 0;
  }

  .topic-grid-community > .topic-card-shell:not(:last-child) .topic-card__action {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 1;
    display: grid;
  }

  .topic-grid-community > .topic-card-shell:first-child {
    margin-left: 20px;
  }

  .topic-grid-community > .topic-card-shell:last-child {
    margin-right: 20px;
  }
}

.community-topic-page {
  padding-top: 32px;
  padding-bottom: 80px;
}

.new-community-post-header {
  display: flex;
  align-items: center;
  gap: 16px;
}

.new-community-post-intro {
  padding-bottom: 0;
  border-bottom: 0;
}

.new-request-page {
  padding-top: 32px;
  padding-bottom: 80px;
}

.community-topic-intro__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.community-topic-intro .topic-header {
  padding: 16px 0 0;
  margin-bottom: 0;
  border-bottom: 0;
}

.community-topic-meta,
.section-header-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0;
}

.community-topic-meta-item,
.section-header-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.community-topic-meta-item .article-meta-icon,
.section-header-meta-item .article-meta-icon {
  margin-right: 0;
}

.community-follow--meta,
.community-follow--meta > div {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.community-follow--meta button,
.community-follow--meta a {
  min-height: 0;
  padding: 0;
  color: inherit;
  background: none;
  border: 0;
  border-radius: 0;
  font: inherit;
  text-decoration: none;
}

.community-follow--meta button:hover,
.community-follow--meta button:focus-visible,
.community-follow--meta a:hover,
.community-follow--meta a:focus-visible {
  color: var(--accent);
  background: none;
  outline: none;
}

.community-new-post-meta,
.community-new-post-meta-separator {
  display: none;
}

.striped-list-excerpt {
  display: -webkit-box;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.community-overview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  align-items: start;
  gap: 28px;
  margin-top: 0;
  padding-top: 0;
}

.community-overview--full {
  grid-template-columns: minmax(0, 1fr);
}

.community-featured-card {
  position: sticky;
  top: calc(var(--header-h) + 20px);
}

.community-featured-link > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .community-overview {
    grid-template-columns: 1fr;
  }

  .community-featured-card {
    position: static;
  }
}

@media (max-width: 700px) {
  .new-community-post-header {
    gap: 12px;
  }

  .community-topic-intro__top {
    align-items: flex-start;
    flex-direction: column;
  }

  .post-to-community {
    display: none;
  }

  .community-new-post-meta-separator {
    display: inline;
  }

  .community-new-post-meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: inherit;
    font: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    text-decoration: none;
  }

  .community-new-post-meta .article-meta-icon {
    flex: 0 0 12px;
    margin-right: 0;
  }

  .community-new-post-meta:hover,
  .community-new-post-meta:focus-visible {
    color: var(--accent);
    outline: none;
  }
}

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

.blocks-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 10px);
  transition: border-color .15s, background .15s;
}

.blocks-item:hover {
  border-color: var(--accent-border);
  background: var(--surface2);
}

.blocks-item-link {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
  text-decoration: none;
  height: 100%;
  box-sizing: border-box;
}

.blocks-item-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color .15s;
}

.blocks-item:hover .blocks-item-title {
  color: var(--accent);
}

.icon-lock {
  color: var(--text-muted);
  opacity: .5;
  flex-shrink: 0;
}

.blocks-item-description {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blocks-item .meta-group {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  font-size: 0;
  grid-column: unset;
  grid-row: unset;
  align-self: auto;
  text-align: left;
  white-space: normal;
}

.blocks-item .meta-data {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  color: var(--text-muted);
  opacity: .6;
}

.blocks-item .meta-data + .meta-data::before {
  content: '·';
  margin: 0 5px;
  opacity: .4;
  font-size: 11px;
}

/* ─────────────────────────────────────────
   POST PAGE LAYOUT  (mirrors article-layout)
───────────────────────────────────────── */

.post-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 48px;
  align-items: start;
}

.post-sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: sticky;
  top: calc(var(--header-h) + 20px);
}

/* comments section — full-width below the layout grid */
.post-comments-section ,
.post {
  margin-top: 0;
}

/* ── post title — mirrors .article-title ── */
.post-title {
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 900;
  letter-spacing: -.6px;
  line-height: 1.15;
  margin: 0 0 12px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.post-status-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 20px;
}

/* ── post meta — mirrors .article-meta ── */
.post-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

.post-author-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.post-author-avatar {
  position: relative;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.post-author-avatar .user-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border);
  display: block;
}

.post-author-avatar .icon-agent { display: none; }

.post-author-name a {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  transition: color .15s;
}

.post-author-name a:hover { color: var(--accent); }

.post-date {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-muted);
}

/* ── post body ── */
.post-body-section {
  margin-bottom: 0;
}

.post-body {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text);
}

.post-body p { margin: 0 0 1em; }
.post-body p:last-child { margin-bottom: 0; }

/* ── post footer: votes left, share right ── */
.post-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  margin-top: 0;
}

.post-body-section {
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0;
}

.post-body-section:not(:has(> *)) {
  display: none;
}

.post-body-section:not(:has(> .post-body)) > .content-tags {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* ── vote + actions — full-width bar below content ── */
.post-vote {
  display: flex;
  align-items: center;
  gap: 6px;
}

.post-vote .vote-up,
.post-vote .vote-down {
  background: none;
  border: 1px solid var(--border);
  cursor: pointer;
  color: var(--text-muted);
  padding: 6px 8px;
  border-radius: 8px;
  transition: color .15s, background .15s, border-color .15s;
  display: flex;
  align-items: center;
  gap: 4px;
}

.post-vote .vote-up:hover,
.post-vote .vote-down:hover {
  color: var(--accent);
  border-color: var(--accent-border);
  background: var(--accent-dim);
}

.post-vote .vote-voted {
  color: var(--accent);
  border-color: var(--accent-border);
}

.post-vote .vote-sum {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  min-width: 20px;
  text-align: center;
}

.post-actions {
  margin-left: auto;
}

/* ── content tags ── */
.content-tags {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.content-tags p {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--text-muted);
  opacity: .6;
  margin: 0 0 8px;
}

.content-tag-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.content-tag-item a {
  display: inline-block;
  font-size: 12px;
  color: var(--text-muted);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 3px 10px;
  text-decoration: none;
  transition: border-color .15s, color .15s;
}

.content-tag-item a:hover {
  border-color: var(--accent-border);
  color: var(--accent);
}

/* ── post page comment section — mirrors .article-comments ── */
.post-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 48px;
  align-items: start;
}

.post-sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: sticky;
  top: calc(var(--header-h) + 20px);
}

/* comments section — full-width below the layout grid */
.post-comments-section ,
.post {
  margin-top: 0;
}

/* ── post title — mirrors .article-title ── */
.post-title {
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 900;
  letter-spacing: -.6px;
  line-height: 1.15;
  margin: 0 0 12px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.post-status-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 20px;
}

/* ── post meta — mirrors .article-meta ── */
.post-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

.post-author-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.post-author-avatar {
  position: relative;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.post-author-avatar .user-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border);
  display: block;
}

.post-author-avatar .icon-agent { display: none; }

.post-author-name a {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  transition: color .15s;
}

.post-author-name a:hover { color: var(--accent); }

.post-date {
  font-size: 13px;
  color: var(--text-muted);
}

/* ── post body ── */
.post-body-section {
  margin-bottom: 0;
}

.post-body {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text);
}

.post-body p { margin: 0 0 1em; }
.post-body p:last-child { margin-bottom: 0; }

/* ── post footer: votes left, share right ── */
.post-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  margin-top: 0;
}

.post-body-section {
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0;
}

/* ── vote + actions — full-width bar below content ── */
.post-vote {
  display: flex;
  align-items: center;
  gap: 6px;
}

.post-vote .vote-up,
.post-vote .vote-down {
  background: none;
  border: 1px solid var(--border);
  cursor: pointer;
  color: var(--text-muted);
  padding: 6px 8px;
  border-radius: 8px;
  transition: color .15s, background .15s, border-color .15s;
  display: flex;
  align-items: center;
  gap: 4px;
}

.post-vote .vote-up:hover,
.post-vote .vote-down:hover {
  color: var(--accent);
  border-color: var(--accent-border);
  background: var(--accent-dim);
}

.post-vote .vote-voted {
  color: var(--accent);
  border-color: var(--accent-border);
}

.post-vote .vote-sum {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  min-width: 20px;
  text-align: center;
}

.post-actions {
  margin-left: auto;
}

/* ── content tags ── */
.content-tags {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.content-tags p {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--text-muted);
  opacity: .6;
  margin: 0 0 8px;
}

.content-tag-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.content-tag-item a {
  display: inline-block;
  font-size: 12px;
  color: var(--text-muted);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 3px 10px;
  text-decoration: none;
  transition: border-color .15s, color .15s;
}

.content-tag-item a:hover {
  border-color: var(--accent-border);
  color: var(--accent);
}

/* ── post page comment section — mirrors .article-comments ── */
.post-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 48px;
  align-items: start;
}

.post-sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: sticky;
  top: calc(var(--header-h) + 20px);
}

/* comments section — full-width below the layout grid */
.post-comments-section ,
.post {
  margin-top: 0;
}

/* ── post title — mirrors .article-title ── */
.post-title {
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 900;
  letter-spacing: -.6px;
  line-height: 1.15;
  margin: 0 0 12px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.post-status-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 20px;
}

/* ── post meta — mirrors .article-meta ── */
.post-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

.post-author-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.post-author-avatar {
  position: relative;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.post-author-avatar .user-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border);
  display: block;
}

.post-author-avatar .icon-agent { display: none; }

.post-author-name a {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  transition: color .15s;
}

.post-author-name a:hover { color: var(--accent); }

.post-date {
  font-size: 13px;
  color: var(--text-muted);
}

/* ── post body ── */
.post-body-section {
  margin-bottom: 0;
}

.post-body {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text);
}

.post-body p { margin: 0 0 1em; }
.post-body p:last-child { margin-bottom: 0; }

/* ── post footer: votes left, share right ── */
.post-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  margin-top: 0;
}

.post-body-section {
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0;
}

/* ── vote + actions — full-width bar below content ── */
.post-vote {
  display: flex;
  align-items: center;
  gap: 6px;
}

.post-vote .vote-up,
.post-vote .vote-down {
  background: none;
  border: 1px solid var(--border);
  cursor: pointer;
  color: var(--text-muted);
  padding: 6px 8px;
  border-radius: 8px;
  transition: color .15s, background .15s, border-color .15s;
  display: flex;
  align-items: center;
  gap: 4px;
}

.post-vote .vote-up:hover,
.post-vote .vote-down:hover {
  color: var(--accent);
  border-color: var(--accent-border);
  background: var(--accent-dim);
}

.post-vote .vote-voted {
  color: var(--accent);
  border-color: var(--accent-border);
}

.post-vote .vote-sum {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  min-width: 20px;
  text-align: center;
}

.post-actions {
  margin-left: auto;
}

/* ── content tags ── */
.content-tags {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.content-tags p {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--text-muted);
  opacity: .6;
  margin: 0 0 8px;
}

.content-tag-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.content-tag-item a {
  display: inline-block;
  font-size: 12px;
  color: var(--text-muted);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 3px 10px;
  text-decoration: none;
  transition: border-color .15s, color .15s;
}

.content-tag-item a:hover {
  border-color: var(--accent-border);
  color: var(--accent);
}

/* ── post page comment section — mirrors .article-comments ── */
.post-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 48px;
  align-items: start;
}

.post-sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: sticky;
  top: calc(var(--header-h) + 20px);
}

/* comments section — full-width below the layout grid */
.post-comments-section ,
.post {
  margin-top: 0;
}

/* ── post title — mirrors .article-title ── */
.post-title {
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 900;
  letter-spacing: -.6px;
  line-height: 1.15;
  margin: 0 0 12px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.post-status-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 20px;
}

/* ── post meta — mirrors .article-meta ── */
.post-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

.post-author-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.post-author-avatar {
  position: relative;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.post-author-avatar .user-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border);
  display: block;
}

.post-author-avatar .icon-agent { display: none; }

.post-author-name a {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  transition: color .15s;
}

.post-author-name a:hover { color: var(--accent); }

.post-date {
  font-size: 13px;
  color: var(--text-muted);
}

/* ── post body ── */
.post-body-section {
  margin-bottom: 0;
}

.post-body {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text);
}

.post-body p { margin: 0 0 1em; }
.post-body p:last-child { margin-bottom: 0; }

/* ── post footer: votes left, share right ── */
.post-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  margin-top: 0;
}

.post-body-section {
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0;
}

/* ── vote + actions — full-width bar below content ── */
.post-vote {
  display: flex;
  align-items: center;
  gap: 6px;
}

.post-vote .vote-up,
.post-vote .vote-down {
  background: none;
  border: 1px solid var(--border);
  cursor: pointer;
  color: var(--text-muted);
  padding: 6px 8px;
  border-radius: 8px;
  transition: color .15s, background .15s, border-color .15s;
  display: flex;
  align-items: center;
  gap: 4px;
}

.post-vote .vote-up:hover,
.post-vote .vote-down:hover {
  color: var(--accent);
  border-color: var(--accent-border);
  background: var(--accent-dim);
}

.post-vote .vote-voted {
  color: var(--accent);
  border-color: var(--accent-border);
}

.post-vote .vote-sum {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  min-width: 20px;
  text-align: center;
}

.post-actions {
  margin-left: auto;
}

/* ── content tags ── */
.content-tags {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.content-tags p {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--text-muted);
  opacity: .6;
  margin: 0 0 8px;
}

.content-tag-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.content-tag-item a {
  display: inline-block;
  font-size: 12px;
  color: var(--text-muted);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 3px 10px;
  text-decoration: none;
  transition: border-color .15s, color .15s;
}

.content-tag-item a:hover {
  border-color: var(--accent-border);
  color: var(--accent);
}

/* ── post page comment section — mirrors .article-comments ── */
.post-comments-section .comment-overview ,
.post .comment-overview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 40px;
  margin-bottom: 16px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}

.post-comments-section .comment-overview-left ,
.post .comment-overview-left {
  flex: 1;
  min-width: 0;
}

/* ── official comment card + badge ── */
.post-comments-section .comment.comment-official ,
.post .comment.comment-official {
  border-color: rgba(29, 158, 117, .3);
  background: rgba(29, 158, 117, .04);
}

.community-cta-footer {
  margin-top: 24px;
  padding-top: 24px;
  padding-bottom: 24px;
  border-top: 1px solid var(--border);
  display: flow-root;
}

.community-cta-footer .button-large {
  float: right;
}

/* ─────────────────────────────────────────
   FEATURED POSTS
───────────────────────────────────────── */

.community-featured-posts {
  padding: 20px 0;
  border-top: 1px solid var(--border);
  margin-top: 24px;
}

.community-featured-posts .title {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 12px;
  color: var(--text);
}

.promoted-articles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}

.promoted-articles-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 10px);
  transition: border-color .15s, background .15s;
}

.promoted-articles-item:hover {
  border-color: var(--accent-border);
  background: var(--surface2);
}

.promoted-articles-item a {
  display: block;
  padding: 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  transition: color .15s;
}

.promoted-articles-item:hover a {
  color: var(--accent);
}

/* ─────────────────────────────────────────
   NO POSTS STATE
───────────────────────────────────────── */

.no-posts-with-filter {
  font-size: 13px;
  color: var(--text-muted);
  padding: 32px 0;
  text-align: center;
}

/* ─────────────────────────────────────────
   COMMUNITY MOBILE
───────────────────────────────────────── */

@media (max-width: 900px) {
  .community-hero .hero-inner {
    padding: 0 16px;
    max-width: 100%;
  }

  .community-header.page-header,
  .page-header.community-header {
    flex-wrap: wrap;
    gap: 12px;
  }

  .blocks-list {
    grid-template-columns: 1fr;
  }

  .post-layout {
    grid-template-columns: 1fr;
  }

  .post-sidebar {
    position: static;
  }

  .community-cta-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}


/* ─────────────────────────────────────────
   VISIBILITY HIDDEN (screen-reader only)
───────────────────────────────────────── */

.visibility-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ─────────────────────────────────────────
   COMMUNITY HERO — search clear button
───────────────────────────────────────── */

.community-hero .clear-button {
  position: relative;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: 50%;
  color: var(--text-muted);
  cursor: pointer;
  opacity: .5;
  transition: opacity .15s, color .15s;
  padding: 0;
  margin-right: 8px;
}

.community-hero .clear-button:hover {
  opacity: 1;
  color: var(--accent);
}

.community-hero .clear-button svg {
  width: 12px;
  height: 12px;
  display: block;
}

/* ─────────────────────────────────────────
   RECENT ACTIVITY (community widget)
───────────────────────────────────────── */

.community-activity {
  margin-top: 24px;
  padding-top: 24px;
  padding-bottom: 24px;
  border-top: 1px solid var(--border);
}

.recent-activity-header {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.3px;
  color: var(--text);
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.recent-activity-header::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 18px;
  background: var(--accent);
  border-radius: 2px;
  flex-shrink: 0;
}

.recent-activity-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.recent-activity-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 10px);
  padding: 12px 16px;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 2px 12px;
  transition: border-color .15s;
  position: relative;
  cursor: pointer;
}

.recent-activity-item:hover,
.recent-activity-item:focus-within {
  border-color: var(--accent-border);
}

/* topic name — row 1 left */
.recent-activity-item h3 {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-muted);
  opacity: .6;
}

.recent-activity-item-parent {
  color: inherit;
  text-decoration: none;
  transition: color .15s;
  position: relative;
  z-index: 2;
}

.recent-activity-item-parent:hover {
  color: var(--accent);
  opacity: 1;
}

/* post title link — row 2 left */
.recent-activity-item-link {
  grid-column: 1;
  grid-row: 2;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color .15s;
  min-width: 0;
}

.recent-activity-item-link:focus-visible {
  outline: none;
}

.recent-activity-item:has(.recent-activity-item-link:focus-visible) {
  box-shadow: 0 0 0 2px var(--accent-border);
}

.recent-activity-item:hover .recent-activity-item-link {
  color: var(--accent);
}

/* meta row — spans both rows on the right */
.recent-activity-item-meta {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.recent-activity-item-time {
  font-size: 11px;
  color: var(--text-muted);
  opacity: .6;
  white-space: nowrap;
}

.recent-activity-item-comment {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text-muted);
  opacity: .6;
}

.recent-activity-comment-icon svg {
  display: block;
}

.recent-activity-accessibility-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* show comment count from data attr */
.recent-activity-comment-icon::after {
  content: attr(data-comment-count);
  font-size: 11px;
  margin-left: 3px;
}

.recent-activity-controls {
  margin-top: 12px;
  text-align: center;
}

.recent-activity-controls a {
  font-size: 12px;
  color: var(--accent);
  text-decoration: none;
  opacity: .8;
  transition: opacity .15s;
}

.recent-activity-controls a:hover {
  opacity: 1;
}

/* Compact numbered treatment used by the Community overview. */
.community-activity--compact {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.my-activities-page .my-activities-header .cat-header {
  margin: 0;
}

/* Preserve breathing room when Zendesk expands the recent-activity widget.
   The global sticky footer then follows the grown page instead of sitting
   directly against the final activity row. */
.community-topics-page {
  padding-bottom: 64px;
}

.community-activity--compact .recent-activity-list {
  gap: 2px;
  counter-reset: community-activity;
}

.community-activity--compact .recent-activity-item {
  counter-increment: community-activity;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  column-gap: 14px;
  row-gap: 2px;
  padding: 12px 14px;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  transition: background .15s;
}

.community-activity--compact .recent-activity-item::before {
  content: counter(community-activity, decimal-leading-zero);
  grid-column: 1;
  grid-row: 1 / 3;
  align-self: center;
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 800;
}

.community-activity--compact .recent-activity-item::after {
  content: '\203A';
  grid-column: 3;
  grid-row: 1 / 3;
  align-self: center;
  color: var(--text-dim);
  font-size: 16px;
}

.community-activity--compact .recent-activity-item:hover,
.community-activity--compact .recent-activity-item:focus-within {
  background: var(--surface);
}

.community-activity--compact .recent-activity-item-link {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  font-size: 14px;
  font-weight: 600;
}

.community-activity--compact .recent-activity-item:hover .recent-activity-item-link,
.community-activity--compact .recent-activity-item:focus-within .recent-activity-item-link {
  color: var(--text);
}

.community-activity--compact .recent-activity-item h3 {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  opacity: 1;
}

.community-activity--compact .recent-activity-item-meta {
  display: none;
}

@media (max-width: 600px) {
  .community-topics-page {
    padding-bottom: 48px;
  }

  .community-activity--compact .recent-activity-item {
    grid-template-columns: 20px minmax(0, 1fr) auto;
  }
}


/* ─────────────────────────────────────────
   POST PAGE — additional missing styles
───────────────────────────────────────── */

/* ── post footer: social share ── */
.post-share .share,
.article-share .share {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 8px;
  align-items: center;
}

.post-share .share a,
.article-share .share a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border);
  color: var(--text-muted);
  text-decoration: none;
  transition: border-color .15s, color .15s;
}

.post-share .share a:hover,
.article-share .share a:hover {
  border-color: var(--accent-border);
  color: var(--accent);
}

.post-share .share svg,
.article-share .share svg {
  display: block;
}

.article-actions-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.article-actions-footer .post-vote {
  grid-row: 1;
  justify-self: start;
}

.vote-sum-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  outline: none;
}

.vote-detail-tooltip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  z-index: 5;
  width: max-content;
  max-width: min(260px, 80vw);
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface2);
  box-shadow: var(--dropdown-panel-shadow);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.35;
  text-align: center;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 4px);
  transition: opacity .12s, visibility .12s, transform .12s;
}

.vote-detail-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  width: 7px;
  height: 7px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--surface2);
  transform: translate(-50%, -4px) rotate(45deg);
}

.vote-sum-wrap:hover .vote-detail-tooltip,
.vote-sum-wrap:focus-visible .vote-detail-tooltip,
.vote-sum-wrap:focus-within .vote-detail-tooltip,
.post-state-icon:hover .vote-detail-tooltip,
.post-state-icon:focus-visible .vote-detail-tooltip,
.post-state-icon:focus-within .vote-detail-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

@media (max-width: 600px) {
  .article-vote-tooltip {
    left: calc(50% - 10px);
    max-width: calc(100vw - 32px);
    transform: translate(0, 4px);
  }

  .article-vote-tooltip::after {
    left: 10px;
  }

  .vote-sum-wrap:hover .article-vote-tooltip,
  .vote-sum-wrap:focus-visible .article-vote-tooltip,
  .vote-sum-wrap:focus-within .article-vote-tooltip {
    transform: translate(0, 0);
  }
}

.post-vote-count-source,
.comment-vote-count-source {
  display: none;
}

.article-actions-footer .article-more-questions {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
}

.article-actions-footer .article-share {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
}

/* Rebalance the three action slots when an optional control is disabled. */
.article-actions-footer:has(.post-vote):not(:has(.article-share)) .article-more-questions {
  grid-column: 3;
  justify-self: end;
}

.article-actions-footer:not(:has(.post-vote)):has(.article-share) .article-more-questions {
  grid-column: 1;
  justify-self: start;
}

.article-actions-footer:not(:has(.post-vote)):not(:has(.article-share)) .article-more-questions {
  grid-column: 2;
  justify-self: center;
}

@media (max-width: 600px) {
  .article-actions-footer {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
  }

  .article-actions-footer .article-more-questions {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: center;
    text-align: center;
  }

  .article-actions-footer .article-share {
    grid-column: 2;
    grid-row: 1;
  }

  .article-actions-footer:has(.post-vote):not(:has(.article-share)) .article-more-questions {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    text-align: right;
  }

  .article-actions-footer:not(:has(.post-vote)):has(.article-share) .article-more-questions {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    text-align: left;
  }

  .article-actions-footer:not(:has(.post-vote)):not(:has(.article-share)) .article-more-questions {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: center;
  }
}

/* ── community-follow subscribe button + follower count ── */
.community-follow > div {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* follower count span (Zendesk-generated, no stable class) */
.community-follow > div > span:not([class*="button"]):not(button) {
  font-size: 11px;
  color: var(--text-muted);
  opacity: .6;
}

/* ── community post comment form controls (checkbox + label + submit) ── */
/* ── standalone comment-callout after comment list ── */
.post > .comment-callout {
  font-size: 13px;
  color: var(--text-muted);
  opacity: .7;
  margin: 12px 0 0;
  text-align: center;
}


/* ─────────────────────────────────────────
   COMMUNITY POST — textarea + submit
───────────────────────────────────────── */

.post-comments-section ,
.post {
  margin-top: 0;
}


.post-comments-section .comment-form-controls ,
.post .comment-form-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Hide native checkbox, use custom styled one */
.post-comments-section .comment-form-controls input[type="checkbox"],
.post .comment-form-controls input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.post-comments-section .comment-form-controls label,
.post .comment-form-controls label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-muted);
  cursor: pointer;
  flex: 1;
  user-select: none;
}

/* Custom checkbox box via ::before */
.post-comments-section .comment-form-controls label::before,
.post .comment-form-controls label::before {
  content: '';
  display: inline-block;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  transition: border-color .15s, background .15s, box-shadow .15s;
}

/* Checked state */
.post-comments-section .comment-form-controls input[type="checkbox"]:checked + label::before,
.post .comment-form-controls input[type="checkbox"]:checked + label::before {
  background: var(--accent);
  border-color: var(--accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1 4l3 3 5-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

/* Focus ring */
.post-comments-section .comment-form-controls input[type="checkbox"]:focus-visible + label::before,
.post .comment-form-controls input[type="checkbox"]:focus-visible + label::before {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}

/* Hover */
.post-comments-section .comment-form-controls label:hover::before,
.post .comment-form-controls label:hover::before {
  border-color: var(--accent-border);
}

.post-comments-section .comment-form-controls input[type="submit"] ,
.post .comment-form-controls input[type="submit"] {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 8px 20px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity .15s;
  white-space: nowrap;
}

.post-comments-section .comment-form-controls input[type="submit"]:hover ,
.post .comment-form-controls input[type="submit"]:hover {
  opacity: .85;
}

/* ═══════════════════════════════════════════════════════
   REQUEST CHAT — MOBILE
═══════════════════════════════════════════════════════ */

/* ── New reply notification banner ──
   Anchored inside .request-chat-area so the pill is centered over the
   chat column on both desktop and mobile, not over the viewport (which
   misaligns past a sidebar on desktop and lands on top of the composer
   on narrow mobile bubbles). The whole pill is the affordance — tapping
   it scrolls the chat to the latest message. */
.new-reply-banner {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  background: var(--surface);
  border: 1px solid var(--accent-border);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 100px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  transition: opacity .25s ease, transform .25s ease, background .15s, border-color .15s;
}

.new-reply-banner:hover,
.new-reply-banner:focus-visible {
  background: var(--accent-dim);
  border-color: var(--accent);
  outline: none;
}

.new-reply-banner svg {
  flex-shrink: 0;
  color: var(--accent);
}

.new-reply-banner-hide {
  opacity: 0;
  transform: translateX(-50%) translateY(8px);
  pointer-events: none;
}

/* ── Closed ticket notice ── */
.request-closed-notice {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0;
  margin: 20px 0;
}

.request-closed-notice-content {
  padding: 20px 24px;
  text-align: center;
}

.request-closed-notice-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 8px;
  letter-spacing: -.02em;
}

.request-closed-notice-body {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0 0 20px;
}

.request-closed-notice-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.request-closed-new-request {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent);
  border: none;
  border-radius: var(--radius);
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  transition: opacity .15s;
}

.request-closed-new-request:hover {
  opacity: .85;
  color: #fff;
}

/* ═══════════════════════════════════════════════════════════════
   ACCESS ERROR — full-screen notice when API returns 403/404
═══════════════════════════════════════════════════════════════ */
.request-access-error {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}

.request-access-error-content {
  max-width: 480px;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 40px 32px;
}

.request-access-error-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 12px;
  letter-spacing: -.02em;
}

.request-access-error-body {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-muted);
  margin: 0 0 24px;
}

.request-access-error-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent);
  border: none;
  border-radius: var(--radius);
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  transition: opacity .15s;
}

.request-access-error-action:hover {
  opacity: .85;
  color: #fff;
}

@media (max-width: 900px) {
  .request-access-error {
    min-height: 100vh;
    padding: 24px 16px;
  }
  .request-access-error-content {
    padding: 32px 20px;
  }
  .request-access-error-title {
    font-size: 18px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   USER PROFILE — ACCOUNT AREA REFRESH
   The profile uses the same horizontal, overflow-safe navigation
   language as the other signed-in areas. Article contributions retain
   the spacing and interaction treatment used by Help Center article rows.
═══════════════════════════════════════════════════════════════ */
.profile-header {
  padding: 48px 0 0;
}

.profile-info {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 8px 20px;
  margin: 0;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.profile-avatar {
  grid-column: 1;
  grid-row: 1 / 3;
  width: 88px;
  height: 88px;
}

.profile-avatar .user-avatar {
  width: 88px;
  height: 88px;
  border-color: var(--accent-border);
}

.profile-info .basic-info {
  grid-column: 2;
  grid-row: 1;
}

.profile-info .basic-info .name {
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.05;
}

.profile-info .options {
  grid-column: 3;
  grid-row: 1;
  align-self: start;
}

.profile-header .description {
  grid-column: 2 / 4;
  grid-row: 2;
  max-width: 70ch;
  margin: 0;
  font-size: 14px;
}

.profile-stats-row {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  margin-top: 16px;
  padding: 0;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.profile-stats-activity,
.profile-stats-counters {
  display: contents;
  margin: 0;
  padding: 0;
  border: 0;
}

.profile-stats-activity {
  border-right: 0;
}

.profile-stats-counters {
  border: 0;
}

.profile-stats-activity .stat,
.profile-stats-counters .stat {
  display: grid;
  align-content: center;
  align-items: center;
  justify-items: center;
  width: 100%;
  height: 100%;
  min-width: 0;
  margin: 0;
  padding: 18px 20px;
  border-right: 1px solid var(--border);
  text-align: center;
}

.profile-stats-activity .stat:last-child {
  padding-right: 20px;
  border-right: 1px solid var(--border);
}

.profile-stats-counters .stat:last-child {
  padding-right: 20px;
  border-right: 0;
}

.profile-stats-row .stat-value {
  overflow: hidden;
  font-size: 15px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-tabs {
  position: relative;
  margin-top: 28px;
  overflow-x: auto;
  border-bottom: 1px solid var(--border);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.profile-tabs::-webkit-scrollbar {
  display: none;
}

.profile-tabs .profile-sidebar-nav {
  display: flex;
  flex-direction: row;
  width: max-content;
  min-width: 100%;
  gap: 28px;
}

.profile-tabs .profile-sidebar-nav li {
  flex: 0 0 auto;
}

.profile-tabs .profile-sidebar-nav .sidenav-item {
  position: relative;
  display: flex;
  gap: 8px;
  padding: 15px 0 16px;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 650;
  line-height: 1;
  border-radius: 0;
  white-space: nowrap;
}

.profile-tabs .profile-sidebar-nav .sidenav-item:hover {
  color: var(--text);
  background: transparent;
}

.profile-tabs .profile-sidebar-nav .sidenav-item.current {
  color: var(--text);
  background: transparent;
}

.profile-tabs .profile-sidebar-nav .sidenav-item.current::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--accent);
}

.profile-tabs .profile-sidebar-nav .doc-count {
  font-size: 12px;
}

.profile-layout {
  display: block;
  padding-top: 0;
}

.profile-layout .profile-main {
  width: 100%;
  padding: 0 0 56px;
}

.profile-section {
  padding: 32px 0 0;
}

.profile-section-header {
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 18px;
  padding: 0;
  border-bottom: 0;
}

.profile-section-title {
  display: none;
}

.profile-section-header:has(.profile-section-title:only-child) {
  display: none;
}

.profile-activity-list,
.profile-contribution-list {
  gap: 12px;
}

.profile-activity {
  padding: 18px 20px;
  gap: 12px;
}

.profile-activity-contribution.profile-contribution {
  padding: 16px 18px;
}

/* Keep profile articles visually related to the article rows on section pages. */
.profile-contribution--article {
  padding: 20px 24px;
}

.profile-contribution--article .profile-contribution-title {
  font-size: 15px;
  font-weight: 700;
}

.profile-contribution--article .profile-contribution-body {
  margin-bottom: 2px;
  line-height: 1.5;
}

@media (max-width: 900px) {
  .profile-header {
    padding-top: 28px;
  }

  .profile-info {
    grid-template-columns: 64px minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    gap: 12px 16px;
    padding: 20px;
  }

  .profile-avatar,
  .profile-avatar .user-avatar {
    width: 64px;
    height: 64px;
  }

  .profile-avatar {
    grid-row: 1;
  }

  .profile-info .basic-info {
    grid-column: 2;
    grid-row: 1;
  }

  .profile-info .basic-info .name {
    font-size: 24px;
  }

  .profile-header .description {
    grid-column: 1 / 3;
    grid-row: 2;
  }

  .profile-info .options {
    grid-column: 1 / 3;
    grid-row: 3;
    width: 100%;
    margin: 0;
  }

  .profile-stats-row {
    display: block;
    overflow: hidden;
    padding: 0;
  }

  .profile-stats-activity,
  .profile-stats-counters {
    display: grid !important;
    width: 100%;
    border: 0;
  }

  .profile-stats-activity {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    border-bottom: 1px solid var(--border);
  }

  .profile-stats-counters {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .profile-stats-activity .stat,
  .profile-stats-counters .stat {
    min-width: 0;
    padding: 16px 18px !important;
    text-align: center;
    border-right: 1px solid var(--border) !important;
  }

  .profile-stats-activity .stat:last-child,
  .profile-stats-counters .stat:last-child {
    border-right: 0 !important;
  }

  .profile-stats-row .stat-label {
    font-size: 9px;
  }

  .profile-stats-row .stat-value {
    font-size: 13px;
  }

  .profile-tabs {
    margin-right: -20px;
    margin-left: -20px;
    padding: 0 20px;
  }

  .profile-tabs .profile-sidebar-nav {
    gap: 24px;
  }

  .profile-layout,
  .profile-layout .profile-main {
    display: block;
    width: 100%;
    padding-left: 0;
  }

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

  .profile-section-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px 12px;
  }

  .profile-section-header:has(.profile-section-title:only-child) {
    display: none;
  }

  .profile-section-title {
    display: none;
  }

  .profile-section-description {
    flex: 1 1 180px;
  }

  .profile-section-sorter {
    margin-left: auto;
  }

  .profile-contribution--article {
    padding: 18px 20px;
  }
}

@media (max-width: 520px) {
  .profile-info {
    padding: 18px;
  }

  .profile-info .options {
    align-items: stretch;
  }

  .profile-info .options > * {
    flex: 1 1 auto;
  }

  .profile-section-header {
    align-items: flex-start;
  }

  .profile-section-description {
    flex-basis: 100%;
  }

  .profile-stats-activity .stat,
  .profile-stats-counters .stat {
    padding: 14px 12px !important;
  }

  .profile-stats-row .stat-label {
    font-size: 8px;
    letter-spacing: .045em;
  }

  .profile-stats-row .stat-value {
    font-size: 12px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   REQUESTS — SHARED ACCOUNT PAGE PATTERN
═══════════════════════════════════════════════════════════════ */
.requests-page .requests-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
  gap: 14px;
  margin: 32px 0 0;
  padding: 0;
  border: 0;
}

.requests-controls .req-search-wrap,
.requests-controls .req-status-dropdown {
  width: 100%;
}

.requests-controls .req-search,
.requests-controls .req-select {
  box-sizing: border-box;
  width: 100%;
  height: 50px;
  min-height: 50px;
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.requests-controls .req-search {
  padding: 0 18px 0 50px;
}

.requests-controls .req-search-icon {
  left: 18px;
}

.requests-controls .req-select {
  padding: 0 16px;
  font-weight: 600;
}

.requests-controls .req-status-chevron {
  color: var(--text-dim);
}

.requests-tabs {
  position: relative;
  margin-top: 26px;
  overflow: clip;
  border-bottom: 1px solid var(--border);
}

.requests-tabs .requests-sidebar-nav {
  display: flex;
  flex-direction: row;
  width: 100%;
  min-width: 0;
  gap: 28px;
}

.requests-tabs .requests-sidebar-nav li {
  flex: 0 1 auto;
  min-width: 0;
}

.requests-tabs .requests-sidebar-nav .req-tab {
  position: relative;
  width: auto;
  padding: 15px 0 16px;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 650;
  line-height: 1;
  text-align: left;
  border-radius: 0;
  white-space: nowrap;
}

.requests-tabs .requests-sidebar-nav .req-tab:hover {
  color: var(--text);
  background: transparent;
}

.requests-tabs .requests-sidebar-nav .req-tab.current,
.requests-tabs .requests-sidebar-nav .req-tab.is-active {
  color: var(--text);
  background: transparent;
}

.requests-tabs .requests-sidebar-nav .req-tab.current::after,
.requests-tabs .requests-sidebar-nav .req-tab.is-active::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--accent);
}

.requests-page .requests-layout {
  display: block;
  padding-top: 0;
}

.requests-page .requests-main {
  width: 100%;
  padding: 0;
}

.requests-page #req-app {
  margin-top: 24px;
}

.requests-page .requests-section-header {
  justify-content: flex-end;
  margin: 0 0 12px;
  padding: 0;
  border: 0;
}

.requests-page .requests-section-title {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.requests-page .requests-section-description {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  opacity: 1;
}

.requests-page .req-list {
  gap: 10px;
}

.requests-page .req-empty {
  padding: 32px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-muted);
  text-align: center;
}

.requests-page .req-list-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px 18px;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: background .15s, border-color .15s, transform .12s;
}

.requests-page .req-list-item:hover {
  background: var(--surface2);
  border-color: var(--accent-border);
  transform: translateX(4px);
}

.requests-page .req-list-heading {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 8px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}

.requests-page .req-list-num {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  color: inherit;
  font: inherit;
}

.requests-page .req-list-title {
  grid-column: 1;
  grid-row: 1;
  font-size: 15px;
  font-weight: 700;
}

.requests-page .req-list-meta {
  display: inline-flex;
  align-items: center;
  margin-top: 0;
  flex-direction: row;
  gap: 8px;
  color: inherit;
  font: inherit;
  white-space: nowrap;
}

.requests-page .req-list-heading > .req-list-status::before,
.requests-page .req-list-heading > .req-list-meta::before {
  content: "•";
  color: var(--text-dim);
}

.requests-page .req-list-heading > .req-list-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.requests-page .req-list-meta svg,
.requests-page .req-list-ticket-icon,
.requests-page .req-list-status-icon {
  display: block;
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
}

.requests-page .req-list-status {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  margin: 0;
}

.requests-page .req-list-heading .req-list-status .status-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font: inherit;
  line-height: inherit;
}

.requests-page .req-list-arrow {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
  justify-self: end;
  transition: color .15s, transform .15s;
}

.requests-page .req-list-item:hover .req-list-arrow {
  color: var(--accent);
  transform: translateX(3px);
}

@media (max-width: 900px) {
  .requests-page .requests-controls {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    margin-top: 28px;
    padding: 0;
  }

  .requests-tabs {
    margin-right: -20px;
    margin-left: -20px;
    padding: 0 20px;
  }

  .requests-tabs .requests-sidebar-nav {
    display: flex !important;
    flex-direction: row !important;
    gap: 24px;
    padding: 0 !important;
  }

  .requests-page .requests-layout,
  .requests-page .requests-main {
    display: block;
    width: 100%;
    padding: 0;
  }

  .requests-page #req-app {
    margin-top: 20px;
  }

  .requests-page .req-list-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px 16px;
    padding: 18px;
  }

  .requests-page .req-list-num {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
  }

  .requests-page .req-list-body {
    grid-column: 1;
    grid-row: 2;
  }

  .requests-page .req-list-status {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    margin: 0;
  }

  .requests-page .req-list-arrow {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
    justify-self: end;
  }

  .requests-page .req-list-meta {
    flex-direction: row;
    gap: 8px;
    white-space: nowrap;
  }

}

@media (max-width: 520px) {
  .requests-page .cat-header {
    margin-bottom: 0;
  }

  .requests-page .req-list-meta {
    align-items: center;
    flex-direction: row;
    gap: 8px;
    white-space: nowrap;
  }
}

/* ═══════════════════════════════════════════════════════════════
   CONTRIBUTIONS / FOLLOWING — SHARED ACCOUNT NAVIGATION
═══════════════════════════════════════════════════════════════ */
.my-activities-page .my-activities-header {
  display: block;
  margin: 0;
  padding: 0 0 26px;
  border: 0;
}

.my-activities-page .my-activities-nav,
.my-activities-page .my-activities-sub-nav {
  position: relative;
  max-width: none;
  margin: 0;
  overflow-x: auto;
  border-bottom: 1px solid var(--border);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.my-activities-page .my-activities-nav::-webkit-scrollbar,
.my-activities-page .my-activities-sub-nav::-webkit-scrollbar {
  display: none;
}

.my-activities-page .my-activities-nav .collapsible-nav-list,
.my-activities-page .my-activities-sub-nav .collapsible-nav-list {
  display: flex;
  flex-flow: row nowrap;
  width: max-content;
  min-width: 100%;
  gap: 28px;
  margin: 0;
  padding: 0;
  overflow: visible;
  list-style: none;
}

.my-activities-page .my-activities-nav .collapsible-nav-list li,
.my-activities-page .my-activities-sub-nav .collapsible-nav-list li {
  flex: 0 0 auto;
}

.my-activities-page .my-activities-nav .collapsible-nav-list a,
.my-activities-page .my-activities-sub-nav .collapsible-nav-list a {
  position: relative;
  display: block;
  padding: 15px 0 16px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 650;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.my-activities-page .my-activities-nav .collapsible-nav-list a:hover,
.my-activities-page .my-activities-sub-nav .collapsible-nav-list a:hover {
  color: var(--text);
  background: transparent;
}

.my-activities-page .my-activities-nav .collapsible-nav-list li.current a,
.my-activities-page .my-activities-sub-nav .collapsible-nav-list li.current a {
  color: var(--text);
  border: 0;
  background: transparent;
}

.my-activities-page .my-activities-nav .collapsible-nav-list li.current a::after,
.my-activities-page .my-activities-sub-nav .collapsible-nav-list li.current a::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--accent);
}

.my-activities-page .my-activities-sub-nav {
  margin-top: 14px;
  border-bottom: 0;
}

.my-activities-page .my-activities-sub-nav .collapsible-nav-list a {
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 13px;
}

.my-activities-page .my-activities-sub-nav .collapsible-nav-list {
  gap: 8px;
  padding: 10px 0;
}

.my-activities-page .my-activities-sub-nav .collapsible-nav-list a:hover {
  border-color: var(--border);
  background: var(--surface);
}

.my-activities-page .my-activities-sub-nav .collapsible-nav-list li.current a {
  border: 1px solid var(--accent-border);
  background: var(--accent-dim);
  color: var(--accent);
}

.my-activities-page .my-activities-sub-nav .collapsible-nav-list li.current a::after {
  display: none;
}

.my-activities-page .my-activities-following-header {
  justify-content: flex-end;
  min-height: 0;
  margin: 24px 0 0;
}

.my-activities-page .my-activities-following-header .dropdown {
  position: relative;
  display: inline-flex;
}

.my-activities-page .my-activities-following-header .dropdown-menu {
  position: absolute;
  top: calc(100% + var(--dropdown-gap));
  right: 0;
  left: auto;
  width: 100%;
  min-width: 160px;
  margin-top: 0;
}

.my-activities-page #main-content {
  margin-top: 24px;
}

.my-activities-page .no-activities {
  padding: 40px 20px;
  color: var(--text-muted);
  opacity: .82;
}

@media (max-width: 900px) {
  .my-activities-page .my-activities-header {
    padding-bottom: 22px;
  }

  .my-activities-page .my-activities-nav,
  .my-activities-page .my-activities-sub-nav {
    margin-right: -20px;
    margin-left: -20px;
    padding: 0 20px;
  }

  .my-activities-page .my-activities-nav .collapsible-nav-list,
  .my-activities-page .my-activities-sub-nav .collapsible-nav-list {
    display: flex !important;
    flex-direction: row !important;
    gap: 24px;
    padding: 0 !important;
  }

  .my-activities-page .my-activities-sub-nav .collapsible-nav-list {
    gap: 8px;
    padding: 10px 44px 10px 0 !important;
  }

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

  .my-activities-page .my-activities-following-header .dropdown,
  .my-activities-page .my-activities-following-header .dropdown-toggle {
    width: auto;
    max-width: 100%;
  }
}