@charset "UTF-8";

.aspire-hub-shell {
  --aspire-hub-surface: var(--color-article-card-bg, var(--bg-body));
  --aspire-hub-surface-soft: rgba(var(--color-body-rgb), 0.035);
  --aspire-hub-surface-strong: rgba(var(--color-body-rgb), 0.07);
  --aspire-hub-border: var(--color-border);
  --aspire-hub-muted: rgba(var(--color-body-rgb), 0.66);
  --aspire-hub-radius: var(--block-border-radius, 16px);
  --aspire-hub-radius-small: calc(var(--block-border-radius, 16px) / 2);
  row-gap: var(--section-spacing-mobile, 20px);
}

.aspire-hub-content,
.aspire-hub-sidebar {
  min-width: 0;
}

/* Legacy Hub menu-h is only a behavior hook; Vision ships no layout for it. */
.aspire-hub-content > .menu-h,
.aspire-hub-content .sorting,
.aspire-hub-content .topic-type {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}

.aspire-hub-content > .menu-h > li,
.aspire-hub-content .sorting > li,
.aspire-hub-content .topic-type > li {
  margin: 0;
  padding: 0;
}

.aspire-hub-content ul.row {
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.aspire-hub-sidebar > ul,
.aspire-hub-sidebar > aside > ul {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.aspire-hub-sidebar > aside {
  margin-top: 24px;
}

.aspire-hub-sidebar > ul li,
.aspire-hub-sidebar > aside > ul li {
  min-width: 0;
  overflow-wrap: anywhere;
}

.aspire-hub-content .badge.staff,
.aspire-hub-sidebar .badge.staff {
  border: 1px solid var(--aspire-hub-border);
  color: var(--color-body);
}

/* Hub topic voting occupies a dedicated article column. */
.aspire-hub-topic .entry-title {
  font-size: calc(var(--font-heading-scale) * 2.125rem);
  line-height: calc(var(--font-heading-line-height-scale) * 2.625rem);
}

.aspire-hub-voting-topic {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  column-gap: 20px;
  align-items: start;
}

.aspire-hub-voting-topic > .post-title-wrapper {
  grid-column: 1 / -1;
}

.aspire-hub-voting-topic > .aspire-hub-vote.qa {
  grid-column: 1;
  width: 62px;
  box-sizing: border-box;
}

.aspire-hub-voting-topic > .aspire-hub-voting-topic-body {
  grid-column: 2;
  min-width: 0;
}

/* Hub voting has no equivalent Vision component. */
.aspire-hub-vote {
  --aspire-hub-vote-positive: var(--green, var(--color-accent));
  --aspire-hub-vote-negative: var(--red, var(--color-body));
  display: grid;
  justify-items: center;
  gap: 6px;
  min-width: 52px;
  padding: 10px;
  border: 1px solid var(--aspire-hub-border);
  border-radius: var(--aspire-hub-radius-small);
  background: var(--aspire-hub-surface-soft);
}

.aspire-hub-vote a {
  display: inline-flex;
}

.aspire-hub-vote strong {
  color: var(--color-heading);
  font-size: 1.1rem;
}

.aspire-hub-vote.qa {
  grid-template-areas:
    "plus"
    "score"
    "minus";
  gap: 4px;
  min-width: 62px;
  padding: 8px;
  border-radius: 999px;
  background: var(--aspire-hub-surface);
}

.aspire-hub-vote.qa .plus {
  grid-area: plus;
}

.aspire-hub-vote.qa .minus {
  grid-area: minus;
}

.aspire-hub-vote.qa a {
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 30px;
  border-radius: 999px;
  color: var(--aspire-hub-muted);
  text-decoration: none;
}

.aspire-hub-vote.qa a:hover,
.aspire-hub-vote.qa a:focus {
  background: var(--aspire-hub-surface-strong);
  color: var(--color-accent);
}

.aspire-hub-vote.qa .plus:hover,
.aspire-hub-vote.qa .plus:focus {
  color: var(--aspire-hub-vote-positive);
}

.aspire-hub-vote.qa .minus:hover,
.aspire-hub-vote.qa .minus:focus {
  color: var(--aspire-hub-vote-negative);
}

.aspire-hub-vote.qa i.icon16 {
  display: block;
  width: 0;
  height: 0;
  margin: 0;
  overflow: visible;
  background: none !important;
  opacity: 0.46;
}

.aspire-hub-vote.qa i.up,
.aspire-hub-vote.qa i.up-bw {
  border-right: 6px solid transparent;
  border-bottom: 8px solid currentColor;
  border-left: 6px solid transparent;
}

.aspire-hub-vote.qa i.down,
.aspire-hub-vote.qa i.down-bw {
  border-top: 8px solid currentColor;
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
}

.aspire-hub-vote.qa i.up,
.aspire-hub-vote.qa i.down {
  opacity: 1;
}

.aspire-hub-vote.qa i.up {
  color: var(--aspire-hub-vote-positive);
}

.aspire-hub-vote.qa i.down {
  color: var(--aspire-hub-vote-negative);
}

.aspire-hub-vote.qa strong {
  grid-area: score;
  min-width: 2.2em;
  color: var(--color-heading);
  font-size: 1.18rem;
  font-weight: var(--font-body-bold-weight, 600);
  line-height: 1.15;
  text-align: center;
}

.aspire-hub-vote.qa strong.positive {
  color: var(--aspire-hub-vote-positive);
}

.aspire-hub-vote.qa strong.negative {
  color: var(--aspire-hub-vote-negative);
}

.aspire-hub-vote.helpful {
  justify-items: stretch;
}

.aspire-hub-vote .hidden {
  display: none;
}

/* Hub owns recursive comment trees, accepted solutions, and reply placement. */
.aspire-hub-comments ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.aspire-hub-comments ul ul {
  margin-top: 14px;
  padding-left: clamp(18px, 4vw, 42px);
}

.aspire-hub-comment {
  position: relative;
}

.aspire-hub-comment.new,
.aspire-hub-comment.is-new,
.aspire-hub-comment.solution,
.aspire-hub-comment.featured-comment {
  border-color: var(--color-accent);
}

.aspire-hub-comment-anchor {
  position: absolute;
  top: -120px;
}

.aspire-hub-comment-body,
.aspire-hub-comment-body-wrap {
  min-width: 0;
  overflow-wrap: break-word;
}

.aspire-hub-comment-body > :first-child {
  margin-top: 0;
}

.aspire-hub-comment-body > :last-child {
  margin-bottom: 0;
}

.aspire-hub-comment-meta {
  float: left;
  margin-right: 16px;
}

.aspire-hub-comment-meta + .aspire-hub-comment-body-wrap {
  overflow: hidden;
}

.aspire-hub-comments .sorting li.selected .button,
.aspire-hub-topic-form .topic-type li.selected .button {
  background: var(--color-accent);
  color: var(--solid-button-label, var(--bg-body));
}

/* Native Hub validation classes map to Vision's invalid field treatment. */
.aspire-hub-topic-form input.error,
.aspire-hub-topic-form textarea.error,
.aspire-hub-topic-form select.error,
.aspire-hub-comment-form input.error,
.aspire-hub-comment-form textarea.error {
  border-color: var(--red, var(--color-accent));
}

.aspire-hub-topic-form .form-notification.error {
  display: block;
  color: var(--red, var(--color-accent));
}

.aspire-hub-topic-form .errormsg {
  display: block;
  margin-top: 8px;
  color: var(--red, var(--color-accent));
}

.aspire-hub-comment-form .errormsg,
.aspire-hub-comment .errormsg {
  display: block;
  margin-top: 8px;
  color: var(--red, var(--color-accent));
}

.aspire-hub-topic-editor-field:has(> textarea.error) .redactor-layer,
.aspire-hub-topic-form .topic-tags .tagsinput:has(~ .errormsg) {
  border-color: var(--red, var(--color-accent));
}

.aspire-hub-comment.in-reply-to .aspire-hub-comment-form {
  width: 100%;
  margin-top: 16px;
}

.aspire-hub-reply-editor {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
}

.aspire-hub-reply-editor .aspire-hub-comment-meta {
  float: none;
  margin: 0;
}

.aspire-hub-reply-editor .aspire-hub-comment-body-wrap {
  display: grid;
  gap: 12px;
}

/* Authentication adapters are generated by Webasyst. */
.aspire-hub-comment-form .wa-auth-adapters {
  margin-top: 20px;
}

.aspire-hub-comment-form .wa-auth-adapters ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.aspire-hub-comment-form .wa-auth-adapters li {
  margin: 0;
  padding: 0;
}

.aspire-hub-comment-form .wa-auth-adapters a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.aspire-hub-comment-form .wa-auth-adapters img {
  display: block;
  width: 32px;
  height: 32px;
}

/* tagsInput generates the visible field after the native payload input. */
.aspire-hub-topic-form .topic-tags .tagsinput {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  width: 100% !important;
  min-height: 50px;
  height: auto !important;
  padding: 8px 16px;
  box-sizing: border-box;
  border: 1px solid var(--color-form-border);
  border-radius: var(--input-border-radius, 6px);
  background: transparent;
}

.aspire-hub-topic-form .topic-tags .tagsinput > div:not(.tags_clear) {
  display: contents;
}

.aspire-hub-topic-form .topic-tags .tagsinput .tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: var(--aspire-hub-radius-small);
  background: var(--aspire-hub-surface-strong);
}

.aspire-hub-topic-form .topic-tags .tagsinput input {
  flex: 1 1 150px;
  width: auto !important;
  min-width: 150px !important;
  height: auto;
  margin: 0;
  padding: 4px 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.aspire-hub-topic-form .topic-tags .tags_clear {
  display: none;
}

.aspire-hub-topic-form .topic-tags > label[for="ti-topic-form_tag"] {
  z-index: 1;
  height: auto;
  padding: 0 6px;
  background: var(--aspire-hub-surface);
  font-size: 0.6875rem;
  transform: translate(11px, -50%);
}

/* Redactor inserts these layers after template rendering. */
.aspire-hub-comment-redactor .redactor-box,
.aspire-hub-topic-form .redactor-box {
  width: 100%;
  margin: 0;
}

.aspire-hub-comment-redactor .redactor-toolbar,
.aspire-hub-topic-form .redactor-toolbar {
  width: 100% !important;
  box-sizing: border-box;
}

.aspire-hub-comment-redactor .redactor-layer,
.aspire-hub-topic-form .redactor-layer {
  border-color: var(--aspire-hub-border);
  border-radius: 0 0 var(--aspire-hub-radius-small) var(--aspire-hub-radius-small);
  background: var(--aspire-hub-surface);
  color: var(--color-body);
}

.aspire-hub-comment-redactor .redactor-box + label,
.aspire-hub-topic-editor-field .redactor-box + label {
  z-index: 1;
  height: auto;
  padding: 0 6px;
  background: var(--aspire-hub-surface);
  font-size: 0.6875rem;
  transform: translate(11px, -50%);
}

/* Native Hub toggles these classes after follow/unfollow requests. */
.aspire-hub-follow .hide-when-following,
.aspire-hub-follow .hide-when-not-following {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.aspire-hub-follow.following .hide-when-following,
.aspire-hub-follow.not-following .hide-when-not-following {
  display: none;
}

@media (max-width: 760px) {
  .aspire-hub-voting-topic {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 18px;
  }

  .aspire-hub-voting-topic > .aspire-hub-vote.qa,
  .aspire-hub-voting-topic > .aspire-hub-voting-topic-body {
    grid-column: 1;
  }

  .aspire-hub-comment-meta {
    float: none;
    margin: 0 0 12px;
  }

  .aspire-hub-comments ul ul {
    padding-left: 16px;
  }
}