/*
 * AnsPress Template Override Styles
 * All values use ACSS custom properties — see .claude/acss-variables.md
 * Do not add hardcoded px, hex, rem, or font-size values here.
 */

/* ─── Force all AnsPress elements to inherit ACSS font settings ─────────────── */
/* Browsers reset font-family and font-size on form elements — this restores    */
/* inheritance so ACSS global typography controls everything inside AnsPress.   */

.ap-questions-wrap,
#ap-single,
#ap-ask-page {
    font-family: inherit;
    font-size: inherit;
}

.ap-questions-wrap input,
.ap-questions-wrap textarea,
.ap-questions-wrap select,
.ap-questions-wrap button,
#ap-single input,
#ap-single textarea,
#ap-single select,
#ap-single button,
#ap-ask-page input,
#ap-ask-page textarea,
#ap-ask-page select,
#ap-ask-page button {
    font-family: inherit;
    font-size: inherit;
}

/* ─── Global AnsPress text colour — inherits ACSS global text colour setting ── */
/* All main body content (excerpts, question/answer text) inherits this.         */
/* Muted metadata using var(--base-light) still overrides as expected.           */

.ap-questions-wrap,
#ap-single {
    color: var(--text-color);
}

/* ─── Question list wrapper — 1/4 sidebar + 3/4 main content grid ───────────── */

/* Mobile-first: single column stack for all viewports below 992px */
.ap-questions-wrap {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: var(--grid-gap);
    row-gap: var(--grid-gap);
    align-items: start;
}

/* All children stack naturally in a single column by default */
.ap-questions-wrap > .ap-list-head-wrap,
.ap-questions-wrap > .ap-unpublished-alert,
.ap-questions-wrap > .ap-sidebar-filters,
.ap-questions-wrap > .ap-questions,
.ap-questions-wrap > .ap-no-questions,
.ap-questions-wrap > .ap-pagination {
    grid-column: 1 / -1;
    grid-row: auto;
}

/* ── 992px and above: 1/3 filter | 2/3 cards ── */
@media (min-width: 992px) {
    .ap-questions-wrap {
        grid-template-columns: 1fr 2fr;
    }

    /* Row 1: sort bar spans both columns */
    .ap-questions-wrap > .ap-list-head-wrap {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .ap-questions-wrap > .ap-unpublished-alert {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    /* Row 2: filter col 1, cards col 2 */
    .ap-questions-wrap > .ap-sidebar-filters {
        grid-column: 1;
        grid-row: 2;
        position: sticky;
        top: var(--offset);
        align-self: start;
    }

    .ap-questions-wrap > .ap-questions,
    .ap-questions-wrap > .ap-no-questions {
        grid-column: 2;
        grid-row: 2;
    }

    /* Row 3: pagination under cards column */
    .ap-questions-wrap > .ap-pagination {
        grid-column: 2;
        grid-row: 3;
    }
}

/* ── 1200px and above: widen to 1/4 filter | 3/4 cards ── */
@media (min-width: 1200px) {
    .ap-questions-wrap {
        grid-template-columns: 1fr 3fr;
    }
}

/* ─── List head bar ─────────────────────────────────────────────────────────── */

.ap-list-head-wrap {
    margin-block-end: 0;
}

.ap-list-head-bar {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-s);
    align-items: center;
}

/* 992px+: match the 1fr/2fr split used by the filter sidebar + cards below */
@media (min-width: 992px) {
    .ap-list-head-bar {
        grid-template-columns: 1fr 2fr;
    }
}

/* 1200px+: match the 1fr/3fr split used by the filter sidebar + cards below */
@media (min-width: 1200px) {
    .ap-list-head-bar {
        grid-template-columns: 1fr 3fr;
    }
}

.ap-question-count {
    margin: 0;
    font-size: var(--h5);
    font-weight: 700;
    color: var(--base);
    white-space: nowrap;
}

.ap-tax-count,
.ap-tagq-count,
.ap-term-count {
    display: inline-flex !important;
    align-items: center;
    padding-block: 0.15em !important;
    padding-inline: var(--space-s) !important;
    border-radius: var(--radius-xxl) !important;
    font-size: var(--text-xs) !important;
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
    background-color: var(--shade-ultra-light);
    color: var(--primary);
    border: 1px solid var(--shade-light);
}

/* ── Category grid ───────────────────────────────────────────────────────── */
#ap-categories {
    width: 100%;
}

/* ── Tag grid ────────────────────────────────────────────────────────────── */
#ap-tags {
    width: 100%;
}

#ap-tags .ap-cat-grid {
    grid-template-columns: var(--grid-auto-6);
}

/* Capitalise every word in tag names — archive grid and single tag heading */
#ap-tags .ap-cat-card__title,
#ap-tag .entry-title {
    text-transform: capitalize;
}

/* Single category/tag heading row — title left, count pill right */
#ap-category .ap-taxo-header,
#ap-tag .ap-taxo-header {
    display: flex;
    align-items: center;
    gap: var(--space-s);
}

#ap-category .ap-taxo-header .ap-tax-count,
#ap-tag .ap-taxo-header .ap-tax-count {
    margin-inline-start: auto;
    flex-shrink: 0;
}

/* Override #anspress a { box-shadow: none } — ID specificity needed */
#ap-categories .ap-cat-card,
#ap-tags .ap-cat-card {
    box-shadow: 1px 1px 3px 1px var(--base-dark-trans-30);
}

/* Icon in the single category/tag page heading */
#ap-category .entry-title .apicon-category,
#ap-tag .entry-title .apicon-tag {
    font-style: normal;
    font-size: 0.85em;
    line-height: 1;
    margin-inline-end: 0.25em;
    color: var(--primary);
    vertical-align: middle;
}

/* apicon-category icon before each category title in the grid */
#ap-categories .ap-cat-card__title .apicon-category {
    font-style: normal;
    font-size: 0.9em;
    line-height: 1;
    margin-inline-end: 0.3em;
    color: var(--primary);
}

/* apicon-tag icon before each tag title in the grid */
#ap-tags .ap-cat-card__title .apicon-tag {
    font-style: normal;
    font-size: 0.9em;
    line-height: 1;
    margin-inline-end: 0.3em;
    color: var(--primary);
}

ul.ap-term-tag-box {
    display: grid !important;
    grid-template-columns: var(--grid-auto-6);
    gap: var(--grid-gap);
    border: none !important; /* AnsPress main.css sets border:solid 1px #ddd — remove */
    list-style: none;
    margin: 0 !important;
    padding: 0;
    width: 100%;
    flex-wrap: unset;
}

ul.ap-term-tag-box > li {
    margin: 0 !important;
    padding: 0 !important;
    min-width: 0;
    flex-basis: unset !important;
    flex-grow: unset !important;
    flex-shrink: unset !important;
    border: none !important; /* AnsPress uses right+bottom borders as grid lines — not needed with CSS grid */
}

.ap-tags-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-s);
    background-color: var(--shade-ultra-light);
    border: 1px solid var(--shade-light);
    border-radius: var(--radius-m);
    height: 100%;
}

.ap-tags-item .ap-term-title {
    font-weight: 600;
    font-size: var(--text-m);
    color: var(--primary);
    text-decoration: none;
}

.ap-tags-item .ap-term-title:hover {
    text-decoration: underline;
}

.ap-tags-item .ap-tagq-count {
    align-self: flex-start;
    background-color: var(--primary) !important;
    color: var(--white) !important;
    border: none !important;
    font-style: normal !important;
}

ul.ap-term-category-box {
    display: grid !important;
    grid-template-columns: var(--grid-auto-4);
    gap: var(--grid-gap);
    list-style: none;
    margin: 0 !important;
    padding: 0;
    width: 100%;
    flex-wrap: unset; /* neutralise any residual flex */
}

ul.ap-term-category-box > li {
    margin: 0 !important;
    padding: 0 !important;
    min-width: 0;
    flex-basis: unset !important;
    flex-grow: unset !important;
    flex-shrink: unset !important;
}

.ap-category-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    height: 100%;
}

/* Thumbnail container — fixed aspect ratio so all cards are uniform */
.ap-cat-img-c {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--radius-m);
    background-color: var(--shade-ultra-light);
}

.ap-categories-feat {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

/* Override AnsPress inline height on the link */
.ap-categories-feat[style] {
    height: 100% !important;
}

.ap-categories-feat img,
.ap-category-defimage {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ap-term-title {
    display: flex;
    flex-direction: column;
    gap: var(--space-xxs);
    padding-block-start: var(--space-xs);
}

.ap-term-title .term-title {
    font-weight: 600;
    font-size: var(--text-m);
    color: var(--text-color);
    text-decoration: none;
}

.ap-term-title .term-title:hover {
    color: var(--primary);
    text-decoration: underline;
}

.ap-sub-category {
    font-size: var(--text-xs);
    color: var(--base-light);
}

.ap-taxo-description {
    font-size: var(--text-s);
    color: var(--base-medium);
    margin-block-start: var(--space-xxs);
}

/* Category thumbnail count — absolutely positioned pill overlay */
.ap-cat-img-c .ap-term-count {
    position: absolute;
    bottom: var(--space-xs);
    left: var(--space-xs);
    display: inline-flex !important;
    width: fit-content !important;
    align-items: center;
    padding-block: 0.15em !important;
    padding-inline: var(--space-s) !important;
    border-radius: var(--radius-xxl) !important;
    font-size: var(--text-xs) !important;
    font-style: normal !important;
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
    background-color: var(--primary) !important;
    color: var(--white) !important;
    border: none !important;
    z-index: 1;
}

/* ─── Category grid cards (/categories/) ───────────────────────────────────── */

.ap-cat-grid {
    display: grid;
    grid-template-columns: var(--grid-auto-4);
    gap: var(--grid-gap);
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

.ap-cat-grid__item {
    min-width: 0;
}

/* Whole card is a link — block flex column so footer sticks to the bottom */
.ap-cat-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--space-s);
    background-color: var(--white);
    border-radius: var(--radius-s);
    text-decoration: none;
    color: inherit;
}

.ap-cat-card:hover {
}

.ap-cat-card__header {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin-block-end: var(--space-s);
}

.ap-cat-card__title {
    margin: 0;
    font-size: var(--text-m);
    font-weight: 700;
    color: var(--primary);
    line-height: 1.3;
}

.ap-cat-card:hover .ap-cat-card__title {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ap-cat-card__desc {
    margin: 0;
    font-size: var(--text-xs);
    color: var(--base-medium);
    line-height: 1.5;
}

.ap-cat-card__divider {
    border: none;
    border-top: 1px solid var(--shade-light);
    margin-block-end: var(--space-s);
}

.ap-cat-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-s);
}

.ap-cat-card__count {
    display: inline-flex;
    align-items: center;
    padding-block: 0.15em;
    padding-inline: var(--space-s);
    border-radius: var(--radius-xxl);
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
    background-color: var(--shade-ultra-light);
    color: var(--primary);
    border: 1px solid var(--shade-light);
}

.ap-cat-card__image {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
}

.ap-cat-card__img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    display: block;
}

/* Left column: search form + active filter pills */
.ap-list-head-left {
    display: flex;
    align-items: center;
    gap: var(--space-s);
    min-width: 0;
}

/* Right column: question count on left, sort dropdown on right */
.ap-list-head-actions {
    display: flex;
    align-items: center;
    gap: var(--space-s);
    justify-content: space-between;
}

/* Active filter pills */
.ap-active-filters {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    flex-wrap: wrap;
}

.ap-active-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    padding-block: var(--space-2xs);
    padding-inline: var(--space-xs);
    background-color: var(--primary-ultra-light, var(--shade-ultra-light));
    color: var(--primary);
    border: 1px solid var(--primary-light, var(--shade-light));
    border-radius: var(--radius-full, 9999px);
    font-size: var(--text-s);
    font-weight: var(--font-medium);
    white-space: nowrap;
    max-width: 24ch;
}

.ap-active-filter-pill__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ap-active-filter-pill__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    text-decoration: none;
    opacity: 0.7;
    flex-shrink: 0;
    line-height: 1;
    font-size: var(--text-m);
    transition: opacity 0.15s ease;
}

.ap-active-filter-pill__remove:hover {
    opacity: 1;
    color: var(--primary-dark, var(--primary));
}

/* Ask button — styled as an ACSS primary button */
.ap-btn-ask {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-block: var(--btn-padding-block);
    padding-inline: var(--btn-padding-inline);
    background-color: var(--primary);
    color: var(--white);
    font-size: var(--text-m);
    font-weight: var(--btn-weight);
    font-style: var(--btn-text-style);
    letter-spacing: var(--btn-letter-spacing);
    line-height: var(--btn-line-height);
    text-transform: var(--btn-text-transform);
    text-decoration: var(--btn-text-decoration);
    border: var(--btn-border-size) solid var(--primary);
    border-radius: var(--btn-radius);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.ap-btn-ask:hover,
.ap-btn-ask:focus-visible {
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
    color: var(--white);
    text-decoration: none;
}

/* Select / Unselect As Best Answer button */
.ap-btn-select {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-block: var(--btn-pad-y);
    padding-inline: var(--btn-pad-x);
    background-color: var(--primary);
    color: var(--btn-text-color);
    font-size: var(--text-m);
    font-weight: var(--btn-weight);
    font-style: var(--btn-text-style);
    letter-spacing: var(--btn-letter-spacing);
    line-height: var(--btn-line-height);
    text-transform: var(--btn-text-transform);
    text-decoration: var(--btn-text-decoration);
    border: var(--btn-border-size) solid var(--primary);
    border-radius: var(--btn-radius);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.ap-btn-select:hover,
.ap-btn-select:focus-visible {
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
    color: var(--btn-hover-text-color);
    text-decoration: none;
}

.ap-btn-select.active {
    background-color: var(--shade-ultra-light);
    border-color: var(--shade-light);
    color: var(--base-medium);
}

.ap-btn-select.active:hover,
.ap-btn-select.active:focus-visible {
    background-color: var(--shade-light);
    border-color: var(--shade-medium);
    color: var(--text-color);
}


/* Search form — fills the full left grid column */
.ap-search-form {
    display: flex;
    align-items: center;
    width: 100%;
}

.ap-search-inner {
    display: flex;
    align-items: center;
    width: 100%;
    border: 1px solid var(--shade-light);
    border-radius: var(--btn-radius);
    overflow: hidden;
    background-color: var(--white);
    transition: border-color 0.15s ease;
}

.ap-search-inner:focus-within {
    border-color: var(--primary);
    outline: 2px solid var(--primary);
    outline-offset: 0;
}

.ap-search-input {
    border: none;
    outline: none;
    background: transparent;
    padding-block: var(--btn-pad-y);
    padding-inline: var(--space-s);
    font-size: var(--text-m);
    color: var(--base-medium);
    flex: 1;
    min-width: 0;
}

.ap-search-input::placeholder {
    color: var(--base-medium);
}

.ap-search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-block: var(--btn-pad-y);
    padding-inline: var(--space-s);
    background: transparent;
    border: none;
    color: var(--base-light);
    cursor: pointer;
    transition: color 0.15s ease;
    flex-shrink: 0;
}

.ap-search-btn:hover {
    color: var(--primary);
}

/* Sort dropdown */
.ap-sort-form {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.ap-sort-label {
    font-size: var(--text-xs);
    color: var(--base-medium);
    white-space: nowrap;
    cursor: default;
}

.ap-sort-form select {
    appearance: none;
    -webkit-appearance: none;
    background-color: transparent;
    border: none;
    outline: none;
    padding-block: 0;
    padding-inline-start: 0;
    padding-inline-end: 1.4em;
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1.6;
    color: var(--primary);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    /* Chevron icon — larger */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%23005a9e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0 center;
    background-size: 14px 9px;
}

.ap-sort-form select:hover {
    color: var(--primary-dark);
}

.ap-sort-form select:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* ─── Question card list ────────────────────────────────────────────────────── */

.ap-questions {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
    border: none !important; /* AnsPress main.css sets border:solid 1px #eee — remove */
}

/* ─── Individual question card ──────────────────────────────────────────────── */

.ap-card {
    background-color: white;
    border-radius: var(--radius-s);
}

.ap-card__inner {
    padding: var(--space-s);
}

/* ── Card layout: mobile-first single column, pill left at 992px+ ── */

.ap-card__layout {
    display: grid;
    grid-template-columns: 1fr; /* single column: pill above content */
    gap: var(--space-s);
    align-items: start;
}

.ap-card__pill-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs);
    padding-block-start: 0;
}

.ap-card__content-col {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

@media (min-width: 992px) {
    .ap-card__layout {
        grid-template-columns: 1fr 3fr; /* pill 1/4 | content 3/4 */
    }

    .ap-card__pill-col {
        padding-block-start: var(--space-xs);
    }
}

/* Answer count pill */
.ap-card__answer-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    flex-shrink: 0;
    padding-block: 0.15em;
    padding-inline: var(--space-s);
    border-radius: var(--radius-xxl);
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1.6;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity 0.15s ease;
}

.ap-card__answer-pill:hover {
    opacity: 0.85;
}

.ap-card__answer-pill--answered {
    background-color: var(--action);
    color: white;
}

.ap-card__answer-pill--answered:hover {
    color: white;
}

.ap-card__answer-pill--solved {
    background-color: var(--primary);
    color: white;
}

.ap-card__answer-pill--solved:hover {
    color: white;
}

.ap-card__answer-pill--unanswered {
    background-color: var(--shade-light);
    color: var(--base);
}

.ap-card__answer-pill--unanswered:hover {
    color: var(--base);
}


/* Question title */
.ap-card__title {
    margin: 0;
    font-size: var(--text-l);
    line-height: 1.3;
    flex: 1;
    min-width: 0; /* allow title to shrink inside flex */
}

.ap-card__title-link {
    color: var(--base);
    text-decoration: none;
}

.ap-card__title-link:hover,
.ap-card__title-link:focus-visible {
    color: var(--primary);
    text-decoration: underline;
}

/* ── Excerpt ── */

.ap-card__excerpt {
    font-size: var(--text-s);
    color: var(--text-color);
    margin: 0;
    /* Clamp to 3 lines */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Taxonomy pills (categories) + plain-text tags ── */

.ap-card__terms {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs);
}

/* Category pill — keeps the coloured badge style */
.ap-card__term-pill {
    display: inline-flex;
    align-items: center;
    padding-block: 0.15em;
    padding-inline: var(--space-s);
    background-color: var(--accent);
    color: white;
    font-size: var(--text-xs);
    border-radius: var(--radius-xxl);
    text-decoration: none;
    border: none;
    line-height: 1.6;
    transition: background-color 0.15s ease;
}

.ap-card__term-pill:hover,
.ap-card__term-pill:focus-visible {
    color: white;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ap-card__term-pill .apicon-category {
    font-style: normal;
    font-size: 0.9em;
    line-height: 1;
    margin-inline-end: 0.3em;
}

/* Tag list — pipe-separated plain text, no pill chrome */
.ap-card__tag-list {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    font-size: var(--text-xs);
    color: var(--primary);
    line-height: 1.6;
}

.ap-card__tag-list .ap-card__tag-link {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.15s ease;
}

.ap-card__tag-list .ap-card__tag-link:hover,
.ap-card__tag-list .ap-card__tag-link:focus-visible {
    color: var(--primary-dark);
}

.ap-card__tag-sep {
    color: var(--primary);
    user-select: none;
}

.ap-card__tag-list > i[class^="apicon-"],
.ap-card__tag-list > i[class*=" apicon-"] {
    font-style: normal;
    color: var(--primary);
    margin-inline-end: 0.35em;
}

.ap-card__tag-list > i[class^="apicon-"]::after,
.ap-card__tag-list > i[class*=" apicon-"]::after {
    content: '\00a0Tags:';
    font-style: normal;
    color: var(--primary);
}

/* ── Metadata row ── */

.ap-card__meta {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0.35em;
    margin-block-start: var(--space-xs);
    padding-block-start: var(--space-xs);
    border-top: 1px solid var(--shade-ultra-light);
}

.ap-card__date {
    font-size: var(--text-xs);
    line-height: 1.6;
    color: var(--base-medium);
    white-space: nowrap;
}

.ap-card__by {
    font-size: var(--text-xs);
    color: var(--base-medium);
}

/* Author block */
.ap-card__author {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    text-decoration: none;
    color: var(--primary);
}

.ap-card__author:hover .ap-card__author-name {
    color: var(--primary-dark);
    text-decoration: underline;
}

/* CSS initials avatar circle */
.ap-card__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75em;
    height: 1.75em;
    border-radius: var(--radius-50);
    color: white;
    font-size: var(--text-xs);
    font-weight: 700;
    flex-shrink: 0;
    /* background-color is set inline by bricks_child_get_avatar_initials() */
}

.ap-card__author-name {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--primary);
}

.ap-card__reputation {
    font-size: var(--text-xs);
    color: var(--primary);
}

.ap-card__expert-indicator {
    margin-inline-start: auto;
    font-size: var(--text-xs);
    color: var(--primary);
    font-weight: 600;
    white-space: nowrap;
}

.ap-card__member-level {
    display: inline-flex;
    align-items: center;
    padding-block: 0.1em;
    padding-inline: var(--space-xs);
    border-radius: var(--radius-xxl);
    font-size: var(--text-xs);
    line-height: 1.6;
    background-color: var(--primary-trans-10);
    color: var(--primary);
    border: 1px solid var(--primary-trans-20);
}

/* ── Post-status badge (moderate / private) ── */
/* AnsPress outputs .ap-post-status for non-published questions */
.ap-card .ap-post-status {
    display: inline-block;
    padding-block: var(--space-xs);
    padding-inline: var(--space-s);
    background-color: var(--shade-ultra-light);
    border: 1px solid var(--shade-light);
    border-radius: var(--radius-s);
    font-size: var(--text-xs);
    color: var(--base-light);
    margin-block-end: var(--space-xs);
}

/* ── Pagination ── */
.ap-questions-wrap .ap-pagination {
    margin-block-start: var(--space-m);
    display: flex;
    justify-content: center;
    gap: var(--space-xs);
    flex-wrap: wrap;
}

/* ── Empty state ── */
.ap-no-questions {
    font-size: var(--text-m);
    color: var(--base);
    padding-block: var(--space-l);
    text-align: center;
}

/* ─── Sidebar filter panel ──────────────────────────────────────────────────── */

.ap-sidebar-filters {
    background-color: white;
    border: 1px solid var(--shade-light);
    border-radius: var(--radius-s);
    padding: var(--space-m);
}

.ap-sidebar-filters__heading {
    font-size: var(--text-s);
    font-weight: 700;
    color: var(--base);
    margin-block-end: var(--space-s);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.ap-sidebar-filters__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.ap-sidebar-filters__link {
    display: flex;
    align-items: center;
    gap: var(--space-s);
    padding-block: var(--space-xs);
    padding-inline: var(--space-xs);
    border-radius: var(--radius-s);
    text-decoration: none;
    color: var(--base);
    font-size: var(--text-s);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.ap-sidebar-filters__link:hover {
    background-color: var(--primary-trans-10);
    color: var(--primary);
}

/* Radio circle indicator */
.ap-sidebar-filters__radio {
    display: inline-block;
    flex-shrink: 0;
    width: 1em;
    height: 1em;
    border-radius: var(--radius-50);
    border: 2px solid var(--shade-light);
    background-color: white;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.ap-sidebar-filters__link--active .ap-sidebar-filters__radio {
    border-color: var(--primary);
    background-color: var(--primary);
    /* Inner white dot via box-shadow — no extra element needed */
    box-shadow: inset 0 0 0 3px white;
}

.ap-sidebar-filters__link.ap-sidebar-filters__link--active {
    color: var(--primary);
    font-weight: 600;
    background-color: var(--primary-trans-10);
}

.ap-sidebar-filters__link.ap-sidebar-filters__link--active .ap-sidebar-filters__label {
    color: var(--primary);
    font-weight: 600;
}

.ap-sidebar-filters__label {
    flex: 1;
}

.ap-sidebar-filters__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5em;
    height: 1.5em;
    padding-inline: var(--space-xs);
    border-radius: var(--radius-xxl);
    background-color: var(--black-trans-30);
    color: var(--base);
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1;
    /* Align count to the right edge */
    margin-inline-start: auto;
}

.ap-sidebar-filters__link--active .ap-sidebar-filters__count {
    background-color: var(--primary);
    color: white;
}

/* ── AnsPress form submit button — styled as ACSS primary button ── */
.ap-btn-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-block: var(--btn-pad-y);
    padding-inline: var(--btn-pad-x);
    min-width: var(--btn-width);
    background-color: var(--primary);
    color: var(--btn-text-color);
    font-size: var(--text-m);
    font-weight: var(--btn-weight);
    font-style: var(--btn-text-style);
    letter-spacing: var(--btn-letter-spacing);
    line-height: var(--btn-line-height);
    text-transform: var(--btn-text-transform);
    text-decoration: var(--btn-text-decoration);
    border: var(--btn-border-size) solid var(--primary);
    border-radius: var(--btn-radius);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.ap-btn-submit:hover,
.ap-btn-submit:focus-visible {
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
    color: var(--btn-hover-text-color);
}

/* ── Unpublished alert ── */

/* ═══════════════════════════════════════════════════════════════════════════
   SINGLE QUESTION PAGE
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Link colour override — use var(--primary) instead of ACSS var(--action) ── */

#ap-single a {
    color: var(--primary);
}

#ap-single a:hover,
#ap-single a:focus-visible {
    color: var(--primary-dark);
}

/* ─── Page wrapper — two-column layout ─────────────────────────────────────── */

.ap-single-wrap {
    container-type: inline-size;
}

.ap-single-layout {
    display: grid;
    grid-template-columns: var(--grid--2-1); /* 2fr main / 1fr sidebar ≈ 66/33 */
    column-gap: var(--grid-gap);
    row-gap: var(--grid-gap);
    align-items: start;
}

.ap-single-sidebar {
    position: sticky;
    top: var(--offset);
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
}

/* ── Tablet portrait and below (<992px): single question collapses to one column ── */
@media (max-width: 991px) {
    .ap-single-layout {
        grid-template-columns: 1fr;
    }

    .ap-single-sidebar {
        position: static;
    }
}

/* ─── Question meta row ───────────────────────────────────────────────────────
 *
 * Row 1: solved · views · activity (left)  |  follow button (right)
 * Row 2: category (left)
 * Row 3: tags (full width)
 *
 * Flex with wrap. Subscribe gets margin-inline-start:auto to push right on
 * row 1. A ::before pseudo-element (order:1, flex-basis:100%, height:0) acts
 * as an invisible line-break, pushing categories (order:1) to row 2 as a
 * natural content-width pill. Tags (order:2, flex-basis:100%) take row 3.
 * ─────────────────────────────────────────────────────────────────────────── */

.ap-single-question-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs);
    margin-block-end: var(--space-s);
}

/* Follow button — order: 0 keeps it on row 1 with status pills;
   margin-inline-start: auto pushes it to the far right of that row. */
.ap-single-question-meta .ap-display-meta-item.subscribe {
    order: 0;
    margin-inline-start: auto;
}

/* Invisible flex-break between row 1 and category row.
   ::before is first in DOM so it appears before categories (also order:1),
   consuming a full-width but zero-height row, pushing categories below. */
.ap-single-question-meta::before {
    content: '';
    order: 1;
    flex-basis: 100%;
    height: 0;
    margin: 0;
    padding: 0;
}

/* Category — own line (row 2).
   order:1 places it after the ::before break. No flex-basis override needed —
   the outer span naturally sizes to content (inline-flex). The base
   .ap-display-meta-item.categories rule supplies the accent pill styling,
   so the icon sits correctly inside the pill. */
.ap-single-question-meta .ap-display-meta-item.categories {
    order: 1;
}

/* Tags — own line (row 3) */
.ap-single-question-meta .ap-display-meta-item.tags {
    order: 2;
    flex-basis: 100%;
    white-space: normal;
    flex-wrap: wrap;
}

/* Each meta item rendered as a pill */
.ap-display-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    padding-block: 0.15em;
    padding-inline: var(--space-s);
    border-radius: var(--radius-xxl);
    font-size: var(--text-xs);
    line-height: 1.6;
    white-space: nowrap;
    background-color: var(--shade-ultra-light);
    color: var(--base-medium);
    border: 1px solid var(--shade-light);
}

/* Icon <i> elements inside the pill */
.ap-display-meta-item > i[class^="apicon-"],
.ap-display-meta-item > i[class*=" apicon-"] {
    font-style: normal;
    font-size: 0.9em;
    line-height: 1;
}

/* Text <i> elements (AnsPress wraps label text in <i> tags) */
.ap-display-meta-item > i:not([class]) {
    font-style: normal;
}

/* Solved pill — primary colour */
.ap-display-meta-item.solved {
    background-color: var(--primary);
    color: white;
    border-color: var(--primary);
}

/* Views pill */
.ap-display-meta-item.views {
    background-color: var(--shade-ultra-light);
    color: var(--base-medium);
}

/* Subscribe / Follow question button — pushed to the far right of the meta row */
/* Strip pill styling from the wrapper — the inner <a> is the button */
.ap-display-meta-item.subscribe {
    margin-inline-start: auto;
    background-color: transparent;
    border-color: transparent;
    padding: 0;
}

.ap-display-meta-item.subscribe:hover,
.ap-display-meta-item.subscribe:focus-visible {
    background-color: transparent;
    border-color: transparent;
}

/*
 * Follow question button — mirrors ACSS btn--primary btn--outline / btn--primary.
 * Sets the same local --btn-* custom properties that ACSS uses so the button
 * automatically picks up any future changes to the site's button config.
 */
.ap-btn-subscribe {
    /* Outline (not following) — mirrors btn--primary.btn--outline */
    --btn-background:       transparent;
    --btn-background-hover: var(--primary-hover);
    --btn-text-color:       var(--primary);
    --btn-text-color-hover: var(--primary-ultra-light);
    --btn-border-color:     var(--primary);
    --btn-border-color-hover: var(--primary-hover);

    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    padding-block: var(--btn-padding-block);
    padding-inline: var(--btn-padding-inline);
    min-inline-size: 0; /* override ACSS 15rem min-width — this is a small inline button */
    border-radius: var(--btn-radius);
    border-width: var(--btn-outline-border-width);
    border-style: var(--btn-border-style);
    border-color: var(--btn-border-color);
    background: var(--btn-background);
    color: var(--btn-text-color);
    font-size: var(--btn-font-size, var(--text-s));
    font-weight: var(--btn-font-weight);
    font-style: var(--btn-font-style);
    text-transform: var(--btn-text-transform);
    letter-spacing: var(--btn-letter-spacing);
    text-decoration: var(--btn-text-decoration);
    line-height: var(--btn-line-height);
    white-space: nowrap;
    cursor: pointer;
    transition: var(--btn-transition, var(--transition));
}

.ap-btn-subscribe:hover,
.ap-btn-subscribe:focus-visible {
    background: var(--btn-background-hover);
    color: var(--btn-text-color-hover);
    border-color: var(--btn-border-color-hover);
    text-decoration: var(--btn-text-decoration-hover, none);
}

/* Filled (currently following) — mirrors btn--primary */
.ap-btn-subscribe.active {
    --btn-background:       var(--primary);
    --btn-background-hover: var(--primary-hover);
    --btn-text-color:       var(--primary-ultra-light);
    --btn-text-color-hover: var(--primary-ultra-light);
    --btn-border-color:     var(--primary);
    --btn-border-color-hover: var(--primary-hover);
}

.ap-btn-subscribe .apsubscribers-count {
    opacity: 0.75;
}

/* Active/history pill */
.ap-display-meta-item.active,
.ap-display-meta-item.history {
    background-color: var(--shade-ultra-light);
    color: var(--base-medium);
}

/* Categories pill — accent colour */
.ap-display-meta-item.categories {
    background-color: var(--accent);
    color: white;
    border-color: var(--accent);
    white-space: normal;
    flex-wrap: wrap;
}

/* Tags — strip pill chrome, render as plain primary underlined text */
.ap-display-meta-item.tags {
    background-color: transparent;
    border-color: transparent;
    color: var(--primary);
    padding: 0;
    white-space: normal;
    flex-wrap: wrap;
    gap: 0;
}

/* Category links — white on accent background */
.ap-display-meta-item.categories a,
#ap-single .ap-display-meta-item.categories a {
    color: var(--white);
    text-decoration: none;
}

.ap-display-meta-item.categories a:hover,
#ap-single .ap-display-meta-item.categories a:hover {
    color: var(--white);
    text-decoration: underline;
}

/* Tag links — primary, underlined, icon also primary */
.ap-display-meta-item.tags a,
#ap-single .ap-display-meta-item.tags a {
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ap-display-meta-item.tags a:hover,
#ap-single .ap-display-meta-item.tags a:hover {
    color: var(--primary-dark);
}

/* Icon inside tags — primary colour, followed by "Tags:" label */
.ap-display-meta-item.tags > i[class^="apicon-"],
.ap-display-meta-item.tags > i[class*=" apicon-"] {
    color: var(--primary);
    margin-inline-end: var(--space-xs);
}

.ap-display-meta-item.tags > i[class^="apicon-"]::after,
.ap-display-meta-item.tags > i[class*=" apicon-"]::after {
    content: '\00a0Tags:';
    font-style: normal;
    color: var(--primary);
    text-decoration: none;
}

/* Pipe separator between tag links — sits outside the preceding link */
.ap-display-meta-item.tags a + a::before {
    content: '\00a0|\00a0';
    display: inline-block; /* breaks text-decoration inheritance so | is not underlined */
    text-decoration: none;
    color: var(--primary);
}

/* Featured pill */
.ap-display-meta-item.featured {
    background-color: var(--action);
    color: white;
    border-color: var(--action);
}

/* ─── Question body card ─────────────────────────────────────────────────────── */

.ap-single-question {
    background-color: white;
    border: 1px solid var(--shade-light);
    border-radius: var(--radius-s);
    padding: var(--space-m);
    margin-block-end: var(--space-m);
}

/* Vote + body side by side */
/* ── Content column (full width — left vote column removed) ── */
.ap-single-question__body {
    min-width: 0;
}

/* Question vote bar — "I have the same question" horizontal row */
.ap-single-question__vote-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-s);
    padding-block: var(--space-s);
    margin-block-start: var(--space-m);
    border-top: 1px solid var(--shade-light);
    border-bottom: 1px solid var(--shade-light);
    margin-block-end: var(--space-s);
}

/* Switch .ap-vote to horizontal row inside the question vote bar */
.ap-single-question__vote-bar .ap-vote {
    flex-direction: row !important;
    align-items: center;
    gap: var(--space-xs);
}

.ap-single-question__vote-bar .ap-vote a.vote-up,
.ap-single-question__vote-bar .ap-vote a.vote-down {
    width: auto !important;
}

.ap-single-question__vote-bar .net-vote-count {
    display: inline-flex !important;
    align-items: center;
    font-size: var(--text-s);
    font-weight: 700;
    color: var(--text-color);
    height: auto !important;
    line-height: inherit !important;
}

.ap-single-question__vote-bar .ap-vote-count-label {
    margin-inline-start: calc(6px - var(--space-xs));
}

/* "I have the same question" — active/voted state */
.ap-single-question__vote-bar .ap-vote a.vote-up.active,
.ap-single-question__vote-bar .ap-vote a.vote-up.voted {
    background-image: none !important;
    background-color: var(--ap-same-q-active, var(--action)) !important;
    border-color: var(--ap-same-q-active, var(--action)) !important;
    color: var(--white) !important;
}

.ap-single-question__title {
    font-size: var(--h3);
    margin-block-end: var(--space-s);
    color: var(--base);
    line-height: 1.3;
}

/* Author row */
.ap-single-question__author-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-block-end: var(--space-m);
    padding-block-end: var(--space-s);
    border-bottom: 1px solid var(--shade-ultra-light);
}

/* Shared pill base for author and date */
.ap-single-question__author-pill,
.ap-single-question__posted-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding-block: 0.15em;
    padding-inline: var(--space-s);
    border-radius: var(--radius-xxl);
    font-size: var(--text-xs);
    line-height: 1.6;
    white-space: nowrap;
    text-decoration: none;
}

/* Author pill — shade background */
.ap-single-question__author-pill {
    background-color: var(--shade-ultra-light);
    color: var(--base);
    border: 1px solid var(--shade-light);
}

/* Avatar circle inside pill */
.ap-single-question__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6em;
    height: 1.6em;
    border-radius: var(--radius-50);
    color: white;
    font-size: var(--text-xs);
    font-weight: 700;
    flex-shrink: 0;
}

/* Reputation appended by AnsPress addon filter */
.ap-single-question__author-pill .ap-user-reputation {
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
}

/* Date pill — muted */
.ap-single-question__posted-pill {
    background-color: var(--shade-ultra-light);
    color: var(--base-medium);
    border: 1px solid var(--shade-light);
}

.ap-single-question__posted-pill:hover {
    color: var(--primary);
    border-color: var(--primary-light);
}

/* Question content body */
.ap-single-question__content {
    font-size: var(--text-m);
    color: var(--base);
    line-height: 1.7;
    margin-block-end: var(--space-m);
}

/* Post action buttons (edit/delete/flag) */
.ap-single-question__footer {
    display: flex;
    align-items: center;
    gap: var(--space-s);
    padding-block-start: var(--space-s);
    border-top: 1px solid var(--shade-ultra-light);
}

/* ─── Answers section ────────────────────────────────────────────────────────── */

/* AnsPress wraps answers in <apanswersw> — target it directly */
apanswersw #ap-answers-c {
    margin-block-start: var(--space-m);
}

.ap-answers-label {
    font-size: var(--text-l);
    font-weight: 700;
    color: var(--base);
    margin-block-end: var(--space-m);
}

/* ─── Single answer card ─────────────────────────────────────────────────────── */

.ap-answer {
    background-color: white;
    border: 1px solid var(--shade-light);
    border-radius: var(--radius-s);
    padding: var(--space-m);
    margin-block-end: var(--space-m);
}

/* Accepted answer — primary border + subtle tint */
.ap-answer--accepted {
    border-color: var(--ap-accepted-color, var(--action));
    background-color: var(--primary-ultra-light);
}

/* Accepted badge */
.ap-answer__accepted-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding-block: 0.15em;
    padding-inline: var(--space-s);
    border-radius: var(--radius-xxl);
    background-color: var(--ap-accepted-color, var(--action));
    color: white;
    font-size: var(--text-xs);
    font-weight: 700;
    line-height: 1.6;
    margin-block-end: var(--space-s);
}

/* Vote + body layout — mirrors question layout */
.ap-answer__body {
    min-width: 0;
}

/* Horizontal vote bar — sits above the footer divider */
.ap-answer__vote-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-s);
    padding-block: var(--space-s);
    margin-block-start: var(--space-m);
    border-top: 1px solid var(--shade-light);
    border-bottom: 1px solid var(--shade-light);
    margin-block-end: var(--space-s);
}

.ap-answer__vote-prompt {
    font-size: var(--text-s);
    font-weight: 600;
    color: var(--base-medium);
    white-space: nowrap;
}

/* Switch the .ap-vote container to horizontal row */
.ap-answer__vote-bar .ap-vote {
    flex-direction: row !important;
    align-items: center;
    gap: var(--space-xs);
}

.ap-answer__vote-bar .ap-vote a.vote-up,
.ap-answer__vote-bar .ap-vote a.vote-down {
    width: auto !important;
}

/* Count + "votes" label — inline */
.ap-answer__vote-bar .net-vote-count {
    display: inline-flex !important;
    align-items: center;
    gap: var(--space-xxs);
    font-size: var(--text-s);
    font-weight: 700;
    color: var(--text-color);
    height: auto !important;
    line-height: inherit !important;
}

.ap-vote-count-label {
    font-size: var(--text-s);
    font-weight: 600;
    color: var(--base-medium);
    margin-inline-start: calc(6px - var(--space-xs));
}

/* Author row */
.ap-answer__author-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-block-end: var(--space-m);
    padding-block-end: var(--space-s);
    border-bottom: 1px solid var(--shade-ultra-light);
}

/* Shared pill base */
.ap-answer__author-pill,
.ap-answer__posted-pill,
.ap-answer__expert-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding-block: 0.15em;
    padding-inline: var(--space-s);
    border-radius: var(--radius-xxl);
    font-size: var(--text-xs);
    line-height: 1.6;
    white-space: nowrap;
    text-decoration: none;
}

/* Author pill */
.ap-answer__author-pill {
    background-color: var(--shade-ultra-light);
    color: var(--base);
    border: 1px solid var(--shade-light);
}

/* Avatar circle inside pill */
.ap-answer__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6em;
    height: 1.6em;
    border-radius: var(--radius-50);
    color: white;
    font-size: var(--text-xs);
    font-weight: 700;
    flex-shrink: 0;
}

/* Reputation appended by AnsPress addon filter */
.ap-answer__author-pill .ap-user-reputation {
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
}

/* Expert pill — accent colour, only shown for level 2 users */
.ap-answer__expert-pill {
    background-color: var(--primary);
    color: var(--white);
    border: 1px solid var(--primary);
    font-weight: 600;
}

/* Date pill */
.ap-answer__posted-pill {
    background-color: var(--shade-ultra-light);
    color: var(--base-medium);
    border: 1px solid var(--shade-light);
}

.ap-answer__posted-pill:hover {
    color: var(--primary);
    border-color: var(--primary-light);
}

.ap-answer__text {
    font-size: var(--text-m);
    color: var(--base);
    line-height: 1.7;
    margin-block-end: var(--space-m);
}

.ap-answer__footer {
    display: flex;
    align-items: center;
    gap: var(--space-s);
    padding-block-start: var(--space-s);
    border-top: 1px solid var(--shade-ultra-light);
}

/* ─── Sidebar boxes ──────────────────────────────────────────────────────────── */

.ap-single-sidebar__box {
    background-color: white;
    border: 1px solid var(--shade-light);
    border-radius: var(--radius-s);
    padding: var(--space-m);
}

.ap-single-sidebar__heading {
    font-size: var(--text-s);
    font-weight: 700;
    color: var(--base);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-block-end: var(--space-s);
}

/* Stats row — two equal-width pills */
.ap-single-sidebar__stats {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

.ap-single-sidebar__stats li {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    padding-block: 0.15em;
    padding-inline: var(--space-s);
    background-color: var(--primary);
    color: white;
    font-size: var(--text-xs);
    line-height: 1.6;
    border-radius: var(--radius-xxl);
    white-space: nowrap;
}

.ap-single-sidebar__stat-value {
    font-weight: 700;
    color: inherit;
}

.ap-single-sidebar__stat-label {
    font-weight: 400;
    color: inherit;
}

/* Category / tag pills */
.ap-single-sidebar__terms {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

.ap-single-sidebar__term-pill {
    display: inline-flex;
    align-items: center;
    padding-block: 0.15em;
    padding-inline: var(--space-s);
    background-color: var(--accent);
    color: white;
    font-size: var(--text-xs);
    line-height: 1.6;
    border-radius: var(--radius-xxl);
    text-decoration: none;
    border: none;
    transition: background-color 0.15s ease;
}

.ap-single-sidebar__term-pill:hover,
.ap-single-sidebar__term-pill:focus-visible,
#ap-single .ap-single-sidebar__term-pill:hover,
#ap-single .ap-single-sidebar__term-pill:focus-visible {
    background-color: var(--accent-dark);
    color: var(--white);
}

#ap-single .ap-single-sidebar__term-pill,
#ap-single .ap-single-sidebar__term-pill:visited {
    color: var(--white);
}
.ap-unpublished-alert {
    margin-block-end: var(--space-m);
    padding: var(--space-s);
    border-radius: var(--radius-s);
    font-size: var(--text-s);
}

/* ── Vote buttons — Helpful / Unhelpful labels ───────────────────────────── */
.ap-vote {
    display: inline-flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-xs);
}

.ap-vote a.vote-up,
.ap-vote a.vote-down {
    display: flex !important;
    align-items: center;
    gap: var(--space-xs);
    width: 100% !important;
    height: auto !important;
    padding-block: 0.3em !important;
    padding-inline: var(--space-s) !important;
    line-height: 1.4 !important;
    white-space: nowrap;
}

.ap-vote-label {
    font-size: var(--text-xs);
    font-weight: 600;
    color: inherit;
    pointer-events: none; /* clicks must land on the <a>, not the span */
}

/* ── Answer form header ──────────────────────────────────────────────────── */
.ap-answer-form-header {
    margin-block-end: var(--space-m);
}

.ap-answer-form-title {
    font-size: var(--text-l);
    font-weight: 700;
    color: var(--text-color);
    margin-block-end: var(--space-xs);
}

.ap-answer-form-hint {
    font-size: var(--text-s);
    color: var(--base-medium);
    margin: 0;
}

/* ─── Profile answers list — match question card stack layout ────────────── */

#ap-bp-answers {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
}

/* ─── User profile bio row ───────────────────────────────────────────────── */

/* Put avatar, name, and reputation on a single horizontal row */
.ap-user-bio {
    display: flex;
    align-items: center;
    gap: var(--space-s);
}

/* The name + reputation sit inline inside .ap-user-name already;
   remove the overflow:hidden block that the original float layout needed */
.ap-user-bio .no-overflow {
    display: flex;
    align-items: center;
    gap: var(--space-s);
    overflow: visible;
}

/* ─── User profile — initials avatar ─────────────────────────────────────── */

.ap-user-avatar--initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: var(--radius-50);
    color: white;
    font-size: var(--text-m);
    font-weight: 700;
    flex-shrink: 0;
    /* background-color set inline by bricks_child_get_avatar_initials() */
}

/* Smaller variant used in the answer-item list on /profile/[slug]/answers/ */
.ap-user-avatar--initials-sm {
    width: 2.5rem;
    height: 2.5rem;
    font-size: var(--text-xs);
}

/* ─── Link colour overrides — use body text colour instead of --action ───── */
/*
 * AnsPress's own stylesheet leaves many links inheriting the global link colour
 * (ACSS --action) or sets hardcoded hex values. Override here so all plain
 * navigation and content links use var(--base) — the ACSS body text colour.
 */

/* Profile page tab nav (Questions / Answers / Reputation / Notifications) */
.ap-tab-nav li > a,
.ap-tab-nav li > a:visited {
    color: var(--base);
    text-decoration: none;
}

.ap-tab-nav li > a:hover,
.ap-tab-nav li > a:focus-visible {
    color: var(--base-dark);
    text-decoration: none;
}

/* User meta links (e.g. reputation, join date) */
.ap-user-meta a,
.ap-user-meta a:visited {
    color: var(--base);
    text-decoration: none;
}

/* Answer-item title link on /profile/[slug]/answers/ */
.ap-bpsingle-title > a,
.ap-bpsingle-hyperlink,
.ap-bpsingle-title > a:visited,
.ap-bpsingle-hyperlink:visited {
    color: var(--base);
}

.ap-bpsingle-title > a:hover,
.ap-bpsingle-hyperlink:hover {
    color: var(--base-dark);
}

/* "View Question" link beneath each answer excerpt */
.ap-view-question,
.ap-view-question:visited {
    color: var(--base);
    text-decoration: none;
}

.ap-view-question:hover,
.ap-view-question:focus-visible {
    color: var(--base-dark);
    text-decoration: underline;
}

/* ─── User profile bio — name and reputation badge colours ───────────────── */

/* Display name — override AnsPress's default font-weight-only rule so it
   always renders in var(--base) rather than inheriting a coloured ancestor */
.ap-user-name {
    color: var(--base);
}

/* Reputation badge — AnsPress sets color:#ff6122; background:#fbebbc;
   Reset both so the text reads as body colour on a transparent surface */
.ap-user-bio .ap-user-reputation {
    color: var(--base);
    background-color: transparent;
    border: none;
    padding: 0;
}

/* Sign in to comment link — shown to logged-out users in place of Add a Comment */
.ap-signin-to-comment {
    display: inline-block;
    margin-block-start: var(--space-xs);
    font-size: var(--text-xs);
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}



/* ─── Answer helpful-text — replaces raw vote count ─────────────────────── */

/* Hide the numeric count for answer vote areas; .ap-helpful-text takes over */
.ap-answer .net-vote-count {
    display: none;
}

.ap-helpful-text {
    display: block;
    font-size: var(--text-xs);
    line-height: var(--line-height-m);
    margin-block-start: var(--space-3xs);
}

.ap-helpful-count {
    color: var(--base);
}

.ap-helpful-label {
    color: var(--base-light);
}