:root {
    --surface: #ffffff;
    --surface-soft: #f6f7f9;
    --surface-warm: #fbf3e2;
    --ink: #171a21;
    --ink-muted: #5b6270;
    --teal: #0e6f5c;
    --teal-dark: #0a5546;
    --gold: #c99a3b;
    --gold-text: #7a5509;
    --gold-surface: #fef7e7;
    --gold-border: #f2dcab;
    --line: #e7e9ee;
    --danger: #a84848;
    --radius-lg: 1rem;
    --radius-md: .75rem;
    --radius-sm: .5rem;
    --radius-pill: 999px;
    --shadow-soft: 0 .5rem 1.75rem rgb(23 26 33 / 7%);
    --container: 70rem;
    --narrow: 48rem;
    --font-size-base: 1rem;
    --font-stack: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    /* The RC3 community/editor rules were authored against a --color-* naming
       scheme that was never defined here, so every var() in that block was
       silently falling back to inherit/currentColor. These aliases point the
       newer names at the existing palette. */
    --color-surface: var(--surface);
    --color-surface-soft: var(--surface-soft);
    --color-border: var(--line);
    --color-muted: var(--ink-muted);
    --color-primary: var(--teal);
}

[dir="rtl"] {
    letter-spacing: normal;
}

[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5,
[dir="rtl"] h6,
[dir="rtl"] .brand,
[dir="rtl"] .eyebrow,
[dir="rtl"] .hero-copy h1,
[dir="rtl"] .question-title,
[dir="rtl"] .error-code {
    letter-spacing: normal;
    line-height: 1.35;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Replaced elements never overflow their container, whatever their intrinsic
   size. Avatars accept an arbitrary remote URL, so this is a floor, not a
   substitute for sizing each avatar explicitly. */
img,
svg,
video {
    max-inline-size: 100%;
    block-size: auto;
}

html {
    background: var(--surface);
    color: var(--ink);
    font-size: var(--font-size-base);
    scroll-behavior: smooth;
}

body {
    min-block-size: 100vh;
    margin: 0;
    background: var(--surface);
    color: var(--ink);
    font-family: var(--font-stack);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    color: inherit;
    font: inherit;
}

button,
.button {
    cursor: pointer;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: .1875rem solid var(--teal-dark);
    outline-offset: .1875rem;
}

[hidden] {
    display: none !important;
}

.container {
    inline-size: min(100% - 2rem, var(--container));
    margin-inline: auto;
}

.narrow-container {
    max-inline-size: var(--narrow);
}

.visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: fixed;
    z-index: 20;
    inset-block-start: .75rem;
    inset-inline-start: .75rem;
    padding-block: .5rem;
    padding-inline: .8rem;
    border-radius: var(--radius-md);
    background: var(--ink);
    color: var(--surface);
    transform: translateY(-200%);
}

.skip-link:focus {
    transform: translateY(0);
}

.site-header {
    position: relative;
    z-index: 10;
    border-block-end: 1px solid var(--line);
    background: rgb(255 255 255 / 94%);
    backdrop-filter: blur(1rem);
}

.header-inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-block-size: 4.75rem;
}

.brand {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: .55rem;
    color: var(--ink);
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -.03em;
}

.brand-mark {
    display: inline-grid;
    place-items: center;
    inline-size: 2rem;
    block-size: 2rem;
    border-radius: .65rem;
    background: var(--teal);
    color: var(--surface);
    font-size: 1.1rem;
    font-weight: 800;
}

.header-search,
.section-search {
    display: flex;
    align-items: center;
    gap: .35rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--surface-soft);
}

.header-search {
    flex: 1 1 18rem;
    max-inline-size: 25rem;
    margin-inline: auto;
    padding-block: .2rem;
    padding-inline: .8rem .3rem;
}

.header-search input,
.section-search input {
    min-inline-size: 0;
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
}

.header-search input {
    padding-block: .55rem;
    padding-inline: .35rem;
}

/* UI controls follow the active interface direction; user-generated content may still use dir="auto". */
input[type="search"],
.header-search input,
.section-search input {
    text-align: start;
}

html[dir="rtl"] input[type="search"] {
    direction: rtl;
}

html[dir="ltr"] input[type="search"] {
    direction: ltr;
}

.icon-button {
    display: inline-grid;
    place-items: center;
    inline-size: 2rem;
    block-size: 2rem;
    border: 0;
    border-radius: 50%;
    background: var(--teal);
    color: var(--surface);
    font-size: 1.25rem;
    line-height: 1;
}

.site-nav {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 1.1rem;
    font-size: .875rem;
    font-weight: 650;
}

.site-nav a:not(.button) {
    color: var(--ink-muted);
}

/* Create and account both collapse into a disclosure so the bar carries a
   fixed number of controls whatever the site adds. No JS: <details> already
   does this, and the mobile menu-toggle keeps working unchanged. */
.nav-menu {
    position: relative;
}

.nav-menu > summary {
    cursor: pointer;
    list-style: none;
    white-space: nowrap;
}

.nav-menu > summary::-webkit-details-marker {
    display: none;
}

.nav-menu > summary::after {
    content: "";
    display: inline-block;
    inline-size: .4em;
    block-size: .4em;
    margin-inline-start: .45em;
    border-inline-end: 2px solid currentColor;
    border-block-end: 2px solid currentColor;
    transform: translateY(-.15em) rotate(45deg);
}

.nav-menu[open] > summary::after {
    transform: translateY(.1em) rotate(-135deg);
}

.nav-menu > div {
    position: absolute;
    inset-block-start: calc(100% + .4rem);
    inset-inline-end: 0;
    z-index: 30;
    display: grid;
    gap: .15rem;
    min-inline-size: 11rem;
    padding: .35rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: 0 12px 32px rgb(15 23 42 / 12%);
}

.nav-menu > div a,
.nav-menu > div button {
    display: block;
    inline-size: 100%;
    padding-block: .45rem;
    padding-inline: .6rem;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--ink-muted);
    font: inherit;
    text-align: start;
    cursor: pointer;
}

.nav-menu > div a:hover,
.nav-menu > div button:hover {
    background: var(--surface-muted, rgb(15 23 42 / 5%));
    color: var(--teal);
}

.nav-menu .nav-logout {
    margin: 0;
}

.site-nav a:not(.button):hover,
.text-link:hover {
    color: var(--teal);
}

.site-breadcrumbs-wrap {
    padding-block: .7rem .25rem;
    margin-block-end: 0;
}

.site-breadcrumbs-wrap + .content-section,
.site-breadcrumbs-wrap + .hero-section {
    padding-block-start: 1rem;
}

.site-breadcrumbs {
    color: var(--ink-muted);
    font-size: .82rem;
}

.site-breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-breadcrumbs li {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    min-inline-size: 0;
}

.site-breadcrumbs li:not(:last-child)::after {
    content: '›';
    color: var(--line-strong, var(--line));
    font-size: 1.05rem;
    line-height: 1;
}

.site-breadcrumbs a {
    color: var(--ink-muted);
    text-decoration: none;
}

.site-breadcrumbs a:hover,
.site-breadcrumbs a:focus-visible {
    color: var(--teal);
    text-decoration: underline;
    text-underline-offset: .15em;
}

.site-breadcrumbs [aria-current="page"] {
    color: var(--ink);
    font-weight: 700;
}

.language-switch-form {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin: 0;
}

.language-select {
    max-inline-size: 9.5rem;
    min-block-size: 2rem;
    padding-block: .25rem;
    padding-inline: .45rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
}

.language-link {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ink-muted);
    font: inherit;
    cursor: pointer;
    white-space: nowrap;
}

.language-link:hover {
    color: var(--teal);
}

.menu-toggle {
    display: none;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    margin-inline-start: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-block-size: 2.8rem;
    padding-block: .65rem;
    padding-inline: 1.1rem;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: var(--teal);
    color: var(--surface);
    font-size: .9rem;
    font-weight: 750;
    line-height: 1.2;
    transition: background .16s ease, transform .16s ease;
}

.button:hover {
    background: var(--teal-dark);
    transform: translateY(-1px);
}

.button-small {
    min-block-size: 2.25rem;
    padding-block: .45rem;
    padding-inline: .8rem;
    font-size: .8rem;
}

.button-secondary {
    border-color: var(--teal);
    background: transparent;
    color: var(--teal);
}

.button-secondary:hover {
    background: var(--teal);
    color: var(--surface);
}

.site-main {
    overflow: clip;
}

.hero-section {
    padding-block: clamp(3.5rem, 8vw, 7rem) clamp(3rem, 6vw, 5rem);
    background: linear-gradient(135deg, var(--surface) 0%, var(--surface-soft) 100%);
}

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(16rem, .75fr);
    gap: clamp(2rem, 8vw, 7rem);
    align-items: end;
}

.hero-copy {
    max-inline-size: 44rem;
}

.eyebrow {
    margin-block: 0 .85rem;
    color: var(--teal);
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .08em;
    line-height: 1.3;
    text-transform: uppercase;
}

.hero-copy h1,
.form-section h1,
.question-detail h1,
.empty-state h1 {
    max-inline-size: 45rem;
    margin-block: 0 1.2rem;
    font-size: clamp(2.25rem, 5vw, 4.35rem);
    font-weight: 850;
    letter-spacing: -.055em;
    line-height: 1.08;
}

.hero-lede,
.section-lede {
    max-inline-size: 37rem;
    margin-block: 0;
    color: var(--ink-muted);
    font-size: clamp(1rem, 1.6vw, 1.2rem);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem;
    margin-block-start: 2rem;
}

.text-link {
    color: var(--teal);
    font-size: .9rem;
    font-weight: 750;
}

.hero-note {
    display: flex;
    gap: 1rem;
    padding-block: 1.25rem;
    padding-inline: 1.25rem;
    border: 1px solid var(--line);
    border-block-start: .25rem solid var(--gold);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-soft);
}

.hero-note-mark {
    display: inline-grid;
    flex: 0 0 auto;
    place-items: center;
    inline-size: 2.35rem;
    block-size: 2.35rem;
    border-radius: 50%;
    background: var(--surface-warm);
    color: var(--gold);
    font-size: 1.4rem;
    font-weight: 800;
}

.hero-note h2 {
    margin-block: .1rem .35rem;
    font-size: 1rem;
    line-height: 1.35;
}

.hero-note p {
    margin-block: 0 .75rem;
    color: var(--ink-muted);
    font-size: .84rem;
}

.content-section {
    padding-block: clamp(3rem, 6vw, 5rem);
}

.section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    margin-block-end: 1.5rem;
}

.section-heading h2 {
    margin: 0;
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    letter-spacing: -.035em;
    line-height: 1.2;
}

.section-search {
    flex: 0 1 22rem;
    padding-block: .25rem;
    padding-inline: .9rem .25rem;
}

.section-search input {
    padding-block: .55rem;
    padding-inline: .25rem;
}

.notice {
    margin-block: 0 1rem;
    padding-block: .7rem;
    padding-inline: .9rem;
    border-radius: var(--radius-md);
    font-size: .85rem;
}

.notice-muted {
    background: var(--surface-soft);
    color: var(--ink-muted);
}

.notice-error {
    background: color-mix(in srgb, var(--danger) 12%, var(--surface));
    color: var(--danger);
}

.auth-links {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1.25rem;
    margin-block-start: 1rem;
    font-size: .85rem;
}

.auth-links a,
.vote-controls a {
    color: var(--teal);
    font-weight: 750;
}

.profile-card {
    max-inline-size: 38rem;
    padding-block: 2rem;
    padding-inline: clamp(1.25rem, 4vw, 2.5rem);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
}

.profile-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .75rem;
    margin-block: 1.5rem;
}

.profile-grid div {
    padding-block: .8rem;
    padding-inline: .9rem;
    border-radius: var(--radius-md);
    background: var(--surface-soft);
}

.profile-grid dt {
    color: var(--ink-muted);
    font-size: .75rem;
}

.profile-grid dd {
    margin-block-start: .25rem;
    font-weight: 750;
}

.empty-state {
    display: grid;
    justify-items: center;
    padding-block: 4rem;
    padding-inline: 1.5rem;
    border: 1px dashed var(--line);
    border-radius: var(--radius-lg);
    text-align: center;
}

.empty-state h3 {
    margin-block: 1rem .35rem;
    font-size: 1.25rem;
}

.empty-state p {
    max-inline-size: 30rem;
    margin-block: 0 1.3rem;
    color: var(--ink-muted);
}

.empty-mark {
    display: inline-grid;
    place-items: center;
    inline-size: 3rem;
    block-size: 3rem;
    border-radius: 50%;
    background: var(--surface-warm);
    color: var(--gold);
    font-size: 1.5rem;
}

.topics-page {
    padding-block: clamp(2rem, 5vw, 4rem);
}

.topics-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(13rem, 17rem);
    gap: clamp(1.25rem, 4vw, 3rem);
    align-items: stretch;
    overflow: hidden;
    padding-block: clamp(1.5rem, 4vw, 3rem);
    padding-inline: clamp(1.25rem, 4vw, 3rem);
    border: 1px solid color-mix(in srgb, var(--teal) 18%, var(--line));
    border-radius: calc(var(--radius-lg) + .25rem);
    background: linear-gradient(135deg, color-mix(in srgb, var(--teal) 8%, var(--surface)) 0%, var(--surface) 62%, var(--gold-surface) 100%);
    box-shadow: var(--shadow-soft);
}

.topics-hero::after {
    position: absolute;
    inset-block-start: -4rem;
    inset-inline-end: -2rem;
    inline-size: 12rem;
    block-size: 12rem;
    border: 1px solid color-mix(in srgb, var(--gold) 22%, transparent);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.topics-hero-copy,
.topics-hero-action {
    position: relative;
    z-index: 1;
}

.topics-hero-copy h1 {
    max-inline-size: 38rem;
    margin-block: .25rem .6rem;
    font-size: clamp(2rem, 5vw, 3.6rem);
    letter-spacing: -.045em;
    line-height: 1.1;
}

.topics-hero-copy .section-lede {
    max-inline-size: 42rem;
    margin-block: 0;
}

.topics-hero-action {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: .45rem;
    padding-block: 1rem;
    padding-inline: 1.25rem;
    border: 1px solid color-mix(in srgb, var(--teal) 18%, var(--line));
    border-radius: var(--radius-lg);
    background: rgb(255 255 255 / 68%);
}

.topics-hero-count {
    color: var(--teal);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 850;
    letter-spacing: -.05em;
    line-height: 1;
}

.topics-hero-action > span:not(.topics-hero-count) {
    color: var(--ink-muted);
    font-size: .78rem;
    font-weight: 700;
}

.topics-hero-action .button {
    margin-block-start: .65rem;
}

.topics-tabs {
    display: flex;
    gap: .45rem;
    margin-block: 1.1rem 1.25rem;
    overflow-x: auto;
    scrollbar-width: thin;
}

.topics-tab {
    flex: 0 0 auto;
    padding-block: .55rem;
    padding-inline: .9rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    color: var(--ink-muted);
    font-size: .82rem;
    font-weight: 750;
}

.topics-tab:hover,
.topics-tab:focus-visible,
.topics-tab.is-active {
    border-color: var(--teal);
    background: var(--teal);
    color: var(--surface);
}

.topics-filter-panel {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 2fr) auto;
    gap: .9rem;
    align-items: end;
    padding-block: 1rem;
    padding-inline: 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface-soft);
}

.topics-filter-search,
.topics-filter-grid {
    min-inline-size: 0;
}

.topics-filter-search,
.topics-filter-grid label {
    display: grid;
    gap: .35rem;
}

.topics-filter-search label,
.topics-filter-grid label {
    color: var(--ink-muted);
    font-size: .73rem;
    font-weight: 750;
}

.topics-filter-search input,
.topics-filter-grid select {
    inline-size: 100%;
    min-block-size: 2.55rem;
    padding-block: .55rem;
    padding-inline: .75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
}

.topics-filter-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .65rem;
}

.topics-filter-submit {
    min-block-size: 2.55rem;
    white-space: nowrap;
}

.topics-results-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    margin-block: 2rem .85rem;
}

.topics-results-head .eyebrow {
    margin-block-end: .25rem;
}

.topics-results-head h2 {
    margin: 0;
    font-size: clamp(1.25rem, 3vw, 1.8rem);
    letter-spacing: -.03em;
}

.topics-results-count {
    display: inline-grid;
    place-items: center;
    min-inline-size: 2.6rem;
    min-block-size: 2.6rem;
    padding-inline: .65rem;
    border-radius: var(--radius-pill);
    background: var(--gold-surface);
    color: var(--gold-text);
    font-size: .85rem;
    font-weight: 850;
}

.topic-list {
    display: grid;
    gap: .8rem;
}

.topic-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1.2rem;
    padding-block: 1.2rem;
    padding-inline: 1.3rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: 0 .2rem 1rem rgb(23 26 33 / 3%);
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.topic-card:hover {
    border-color: color-mix(in srgb, var(--teal) 55%, var(--line));
    box-shadow: var(--shadow-soft);
    transform: translateY(-1px);
}

.topic-card-main {
    min-inline-size: 0;
}

.topic-card-topline,
.topic-badges,
.topic-card-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .45rem .65rem;
}

.topic-card-topline {
    justify-content: space-between;
    min-block-size: 1.5rem;
}

.topic-badge {
    display: inline-flex;
    align-items: center;
    padding-block: .2rem;
    padding-inline: .55rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    color: var(--ink-muted);
    font-size: .68rem;
    font-weight: 800;
}

.topic-badge-pinned {
    border-color: var(--gold-border);
    background: var(--gold-surface);
    color: var(--gold-text);
}

.topic-badge-announcement {
    border-color: color-mix(in srgb, var(--teal) 30%, var(--line));
    background: color-mix(in srgb, var(--teal) 9%, var(--surface));
    color: var(--teal-dark);
}

.topic-badge-muted {
    background: var(--surface-soft);
}

.topic-category {
    color: var(--ink-muted);
    font-size: .72rem;
    font-weight: 700;
}

.topic-card h3 {
    margin-block: .7rem .35rem;
    font-size: clamp(1.05rem, 2vw, 1.25rem);
    line-height: 1.35;
}

.topic-card h3 a:hover {
    color: var(--teal);
}

.topic-excerpt {
    display: -webkit-box;
    max-block-size: 3.2em;
    margin-block: 0 .75rem;
    overflow: hidden;
    color: var(--ink-muted);
    font-size: .87rem;
    line-height: 1.6;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.topic-card-meta {
    color: var(--ink-muted);
    font-size: .73rem;
}

.topic-card-stats {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    min-inline-size: 5.25rem;
    padding-inline-start: 1rem;
    border-inline-start: 1px solid var(--line);
}

.topic-card-stats span {
    display: grid;
    justify-items: center;
    gap: .05rem;
    color: var(--ink-muted);
    font-size: .7rem;
    text-align: center;
}

.topic-card-stats strong {
    color: var(--ink);
    font-size: 1.1rem;
    line-height: 1.1;
}

.topic-card-stats small {
    font-size: .68rem;
}

.question-list {
    display: grid;
    gap: .8rem;
}

.question-card {
    display: flex;
    gap: 1.25rem;
    padding-block: 1.2rem;
    padding-inline: 1.3rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.question-card:hover {
    border-color: var(--teal);
    box-shadow: var(--shadow-soft);
    transform: translateY(-1px);
}

.question-stats {
    display: flex;
    flex: 0 0 5rem;
    flex-direction: column;
    gap: .5rem;
    color: var(--ink-muted);
    font-size: .72rem;
    text-align: center;
}

.question-stats span {
    display: grid;
    gap: .05rem;
}

.question-stats strong {
    color: var(--ink);
    font-size: 1.05rem;
}

.stat-answer strong {
    color: var(--teal);
}

.question-card-body {
    min-inline-size: 0;
    flex: 1;
}

.question-card h3 {
    margin-block: 0 .45rem;
    font-size: 1.05rem;
    line-height: 1.4;
}

.question-card h3 a:hover {
    color: var(--teal);
}

.question-card p {
    display: -webkit-box;
    max-block-size: 3.2em;
    margin-block: 0 .8rem;
    overflow: hidden;
    color: var(--ink-muted);
    font-size: .86rem;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.question-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem 1rem;
    color: var(--ink-muted);
    font-size: .75rem;
}

.question-meta span + span {
    position: relative;
}

.question-meta span + span::before {
    position: absolute;
    inset-inline-start: -.6rem;
    color: var(--line);
    content: "·";
}

.question-container {
    max-inline-size: var(--narrow);
}

.question-detail {
    padding-block-end: 2.25rem;
    border-block-end: 1px solid var(--line);
}

.question-detail h1 {
    font-size: clamp(2rem, 4vw, 3.25rem);
}

.question-meta-large {
    margin-block-end: 1.75rem;
}

.vote-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .65rem;
    margin-block-end: 1.4rem;
    color: var(--ink-muted);
    font-size: .82rem;
}

.vote-controls strong {
    min-inline-size: 2rem;
    color: var(--ink);
    font-size: 1.05rem;
    text-align: center;
}

.vote-controls form {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

.rich-text {
    overflow-wrap: anywhere;
    font-size: 1.02rem;
    line-height: 1.85;
    white-space: normal;
}

.answers-section {
    padding-block-start: 2rem;
}

.section-heading.compact {
    margin-block-end: 1rem;
}

.section-heading.compact h2 {
    font-size: 1.35rem;
}

.answer-list {
    display: grid;
    gap: .8rem;
}

.answer-card {
    padding-block: 1.25rem;
    padding-inline: 1.3rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
}

.answer-best {
    border-color: var(--gold);
    background: var(--surface-warm);
}

.best-badge {
    display: inline-flex;
    margin-block-end: .8rem;
    padding-block: .25rem;
    padding-inline: .65rem;
    border-radius: var(--radius-pill);
    background: var(--gold-surface, #fef7e7);
    color: var(--gold-text, #7a5509);
    border: 1px solid var(--gold-border, #f2dcab);
    font-size: .72rem;
    font-weight: 800;
}

.answer-meta {
    margin-block-start: .85rem;
    color: var(--ink-muted);
    font-size: .78rem;
}

.answer-composer {
    margin-block-start: 2rem;
    padding-block-start: 1.5rem;
    border-block-start: 1px solid var(--line);
}

.answer-composer h2 {
    margin-block: 0 1rem;
    font-size: 1.35rem;
}

.nav-logout {
    display: inline;
    margin: 0;
}

.nav-logout button {
    padding: .35rem .5rem;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font: inherit;
}

.nav-logout button:hover {
    color: var(--teal);
}

/* ==========================================================================
   Responsive tiers
   ==========================================================================
   Widths are expressed in rem so the layout reflows with the reader's browser
   font size rather than staying pinned to a pixel grid. A media query's rem is
   measured against the browser default, so these are stable regardless of the
   operator's `--font-size-base` setting.

     32.5rem   520px   narrow phone
     35rem     560px
     36.25rem  580px
     38.75rem  620px
     40rem     640px   phone / phablet boundary
     45rem     720px
     47.5rem   760px
     53.75rem  860px
     56.25rem  900px   sidebar collapse
     57rem     912px
     60rem     960px   two-column threshold
     70rem     1120px  header wrap

   Advertisement device-class queries stay in px: they classify the device for
   ad targeting, which is a product contract rather than a layout decision.
   ========================================================================== */
@media (min-width: 57rem) and (max-width: 70rem) {
    .header-inner {
        gap: .5rem;
    }

    .header-search {
        flex-basis: 10rem;
        max-inline-size: 16rem;
    }

    .site-nav {
        gap: .35rem;
        font-size: .78rem;
    }
}

.form-section {
    padding-block-start: clamp(3rem, 8vw, 6rem);
}

.form-hint {
    margin-block: 0 1.5rem;
    color: var(--ink-muted);
    font-size: .85rem;
}

.question-form {
    display: grid;
    gap: 1.1rem;
    padding-block: 1.5rem;
    padding-inline: 1.5rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
}

.field-group {
    display: grid;
    gap: .4rem;
}

.field-group label {
    font-size: .85rem;
    font-weight: 750;
}

.field-group label span {
    color: var(--danger);
}

.field-group input,
.field-group textarea,
.field-group select {
    inline-size: 100%;
    padding-block: .75rem;
    padding-inline: .85rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
}

.field-group textarea {
    resize: vertical;
}

.field-group input:focus,
.field-group textarea:focus,
.field-group select:focus {
    border-color: var(--teal);
    outline: .1875rem solid var(--teal-dark);
    outline-offset: .1875rem;
}

.route-reference {
    padding-block: .5rem;
    padding-inline: .75rem;
    border-radius: var(--radius-md);
    background: var(--surface-soft);
    color: var(--ink-muted);
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: .8rem;
}

.question-empty {
    min-block-size: 24rem;
    align-content: center;
}

.empty-state-small {
    padding-block: 2rem;
}

.error-section {
    min-block-size: 32rem;
    display: grid;
    align-items: center;
}

.error-code {
    color: var(--gold);
    font-size: clamp(3rem, 8vw, 6rem);
    font-weight: 850;
    letter-spacing: -.08em;
    line-height: 1;
}

.site-footer {
    margin-block-start: 2rem;
    border-block-start: 1px solid var(--line);
    background: var(--surface-soft);
}

.site-version {
    display: block;
    margin-top: .35rem;
    color: var(--muted, #5d6c66);
    font-size: .78rem;
}

/* Optional widget sidebar. The `has-sidebar` class is only emitted when the
   section holds widgets, so the default single-column layout is untouched.
   The sidebar comes second in the source so it follows the main content for
   screen readers and on narrow screens; the grid places it beside on wide
   ones, and `inline` keeps that flipped correctly in RTL. */
.has-sidebar {
    display: grid;
    gap: 2rem;
    align-items: start;
}
.content-sidebar {
    display: grid;
    gap: 1.25rem;
    min-inline-size: 0;
}
@media (min-width: 60rem) {
    .has-sidebar {
        grid-template-columns: minmax(0, 1fr) minmax(14rem, 18rem);
    }
    .content-sidebar {
        grid-column: 2;
        grid-row: 1 / span 99;
        position: sticky;
        inset-block-start: 1.5rem;
    }
}

/* Widget-driven theme regions. Each exists only once an administrator places a
   widget in the matching section, so a default site renders none of them. */
.header-top {
    padding-block: .6rem;
    border-block-end: 1px solid var(--line);
}
.footer-widgets {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1.5rem;
    padding-block: 2rem 1rem;
}
.footer-widget-column { min-inline-size: 0; }
.footer-bottom {
    padding-block: 1rem;
    border-block-start: 1px solid var(--line);
    font-size: .85rem;
}

.footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 1.5rem;
    color: var(--ink-muted);
    font-size: .8rem;
}

.footer-inner strong {
    color: var(--ink);
}

.footer-inner p {
    margin-block: .25rem 0;
}

.footer-inner a,
.footer-inner .language-link {
    color: var(--teal);
    font-weight: 750;
}

@media (max-width: 70rem) {
    .header-inner {
        flex-wrap: wrap;
        padding-block: .75rem;
    }

    .header-search {
        order: 4;
        flex-basis: 100%;
        max-inline-size: none;
        margin-inline: 0;
    }

    .menu-toggle {
        display: inline-grid;
        place-items: center;
    }

    .nav-menu > div {
        position: static;
        border: 0;
        box-shadow: none;
        padding-inline: 0;
        min-inline-size: 0;
    }

    .site-nav {
        position: absolute;
        inset-block-start: 100%;
        inset-inline: 1rem;
        display: grid;
        gap: 0;
        padding-block: .4rem;
        padding-inline: .4rem;
        border: 1px solid var(--line);
        border-radius: var(--radius-lg);
        background: var(--surface);
        box-shadow: var(--shadow-soft);
    }

    .site-nav a,
    .site-nav .language-link {
        padding-block: .65rem;
        padding-inline: .7rem;
    }

    .site-nav .language-switch-form,
    .site-nav .language-link {
        inline-size: 100%;
    }

    .hero-grid {
        grid-template-columns: 1fr;
    }

    .hero-note {
        max-inline-size: 34rem;
    }
}

@media (max-width: 40rem) {
    .container {
        inline-size: min(100% - 1.25rem, var(--container));
    }

    .section-heading,
    .footer-inner {
        align-items: stretch;
        flex-direction: column;
    }

    .section-search {
        flex-basis: auto;
    }

    .topics-hero {
        grid-template-columns: 1fr;
    }

    .topics-hero-action {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        column-gap: .65rem;
    }

    .topics-hero-action .button {
        grid-column: 1 / -1;
        margin-block-start: .45rem;
    }

    .topics-filter-panel {
        grid-template-columns: 1fr;
    }

    .topics-filter-grid {
        grid-template-columns: 1fr;
    }

    .topics-filter-submit {
        inline-size: 100%;
    }

    .topics-results-head {
        align-items: center;
    }

    .topic-card {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .topic-card-stats {
        flex-direction: row;
        align-items: stretch;
        justify-content: stretch;
        padding-block-start: .9rem;
        padding-inline-start: 0;
        border-block-start: 1px solid var(--line);
        border-inline-start: 0;
    }

    .topic-card-stats span {
        flex: 1;
    }

    .question-card {
        flex-direction: column;
        gap: .8rem;
    }

    .question-stats {
        flex-basis: auto;
        flex-direction: row;
        justify-content: start;
        gap: 1rem;
        text-align: start;
    }

    .profile-grid {
        grid-template-columns: 1fr;
    }

    .question-stats span {
        display: flex;
        align-items: baseline;
        gap: .3rem;
    }

    .question-form {
        padding-inline: 1rem;
    }
}

/* Capping transitions alone left keyframe animations running at full speed, so
   a reader who asked the operating system for less motion still got it. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

.form-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}
/* A single-language site drops the content-locale field, leaving one visible
   child plus a hidden input; the remaining field takes the full row. */
.form-grid-2:has(> .field-group:only-of-type) {
    grid-template-columns: 1fr;
}
.check-row {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-block: .8rem 1rem;
}
.field-honeypot {
    position: absolute !important;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
@media (max-width: 40rem) {
    .form-grid-2 { grid-template-columns: 1fr; }
}

/* Community interactions */
.question-community-actions { display:flex; gap:.75rem; align-items:center; margin-block-start:1.25rem; }
.follow-form { display:inline-flex; margin:0; }
.comment-thread { margin-block:1.5rem; padding:1rem; border:1px solid var(--border-color, #d8e3df); border-radius:1rem; background:var(--surface-color, #fff); }
.comment-list { display:grid; gap:.65rem; margin-block:.75rem; }
.comment-item { padding:.75rem .9rem; border:1px solid var(--border-color, #d8e3df); border-radius:.75rem; background:var(--surface-soft, #f7faf9); }
.comment-item p { margin:0 0 .35rem; white-space:pre-wrap; overflow-wrap:anywhere; }
.comment-item small,.comment-empty { color:var(--muted-color, #64706c); }
.comment-form { display:grid; gap:.55rem; margin-block-start:.75rem; }
.comment-form textarea { inline-size:100%; min-block-size:4.5rem; }
.compact-comment-list { margin-block-start:1rem; }
.compact-comment-form { margin-block-start:.65rem; }
.answer-comments { border-block-start:1px solid var(--border-color, #d8e3df); margin-block-start:1rem; padding-block-start:.75rem; }
.duplicate-suggestions { margin-block-start:.75rem; padding:.85rem 1rem; border:1px solid var(--border-color, #d8e3df); border-radius:.85rem; background:var(--surface-soft, #f7faf9); }
.duplicate-suggestions p { margin:.25rem 0 .5rem; color:var(--muted-color, #64706c); }
.duplicate-suggestions ul { margin:0; padding-inline-start:1.25rem; display:grid; gap:.35rem; }
.notifications-section .notification-preferences,.notifications-section .notification-inbox { margin-block-start:1.5rem; }
.notification-preference-row { display:flex; flex-wrap:wrap; gap:1rem; padding:.85rem 0; border:0; border-block-end:1px solid var(--border-color, #d8e3df); }
.notification-preference-row legend { inline-size:100%; font-weight:700; }
.notification-list { display:grid; gap:.75rem; }
.notification-item { display:flex; justify-content:space-between; gap:1rem; align-items:flex-start; padding:1rem; border:1px solid var(--border-color, #d8e3df); border-radius:1rem; background:var(--surface-color, #fff); }
.notification-item.notification-unread { border-inline-start:4px solid var(--primary-color, #087864); }
.notification-item h3 { margin:0 0 .35rem; font-size:1rem; }
.notification-item p { margin:.25rem 0; }
.notification-actions { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; }
.notification-actions form { margin:0; }

html[dir="rtl"] input[type="search"],
html[dir="rtl"] .header-search input,
html[dir="rtl"] .section-search input { direction:rtl; text-align:start; }
html[dir="ltr"] input[type="search"],
html[dir="ltr"] .header-search input,
html[dir="ltr"] .section-search input { direction:ltr; text-align:start; }

/* Public member profiles */
.profile-hero{display:flex;align-items:flex-start;gap:1.25rem;margin-block-end:1.5rem}.profile-avatar{inline-size:84px;block-size:84px;border-radius:50%;object-fit:cover;border:1px solid var(--color-border)}.profile-avatar-fallback{display:grid;place-items:center;background:var(--color-surface-soft);font-size:2rem;font-weight:800}.profile-handle{color:var(--color-muted)}.profile-activity{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-block-start:1.5rem}.profile-activity>section{padding:1rem;border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface)}.activity-list{display:grid;gap:.75rem;padding:0;list-style:none}.activity-list li{padding-block-end:.75rem;border-block-end:1px solid var(--color-border)}@media(max-width: 45rem){.profile-activity{grid-template-columns:1fr}.profile-hero{flex-direction:column}}

/* API token settings */
.api-token-once{display:grid;gap:.75rem}.api-token-once code{display:block;max-inline-size:100%;overflow-wrap:anywhere;padding:.75rem;background:var(--color-surface-soft);border-radius:var(--radius-md)}.settings-panel{margin-block:1.25rem;padding:1rem;border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface)}.token-scopes{display:grid;gap:.5rem;border:0;padding:0;margin:0 0 1rem}.token-list{display:grid;gap:.75rem}.token-card{display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:.9rem;border:1px solid var(--color-border);border-radius:var(--radius-md)}@media(max-width: 40rem){.token-card{align-items:flex-start;flex-direction:column}}

/* Dedicated search */
.search-page .search-heading{align-items:center}.search-count{color:var(--color-muted);font-weight:700}.search-filter-card{display:grid;gap:1rem;margin-block:1rem 1.5rem;padding:1rem;border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface)}.search-query-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.65rem}.search-query-row input{min-inline-size:0}.search-filter-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.85rem}.search-filter-grid label{display:grid;gap:.35rem}.search-filter-grid label>span{font-size:.875rem;font-weight:700;color:var(--color-muted)}.search-filter-actions{display:flex;justify-content:flex-end}.search-results-list h2{font-size:1.12rem;margin:0}.pagination{display:flex;gap:.4rem;flex-wrap:wrap;margin-block-start:1.25rem}.pagination a{display:grid;place-items:center;min-inline-size:2.3rem;min-block-size:2.3rem;border:1px solid var(--color-border);border-radius:var(--radius-md);text-decoration:none}.pagination a[aria-current="page"]{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}@media(max-width: 53.75rem){.search-filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width: 36.25rem){.search-query-row,.search-filter-grid{grid-template-columns:1fr}.search-query-row .button{inline-size:100%}}

/* Public layout widgets */
.public-widget-stack{display:grid;gap:1rem}.public-widget{padding:1.1rem;border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface)}.public-widget>h2{margin-block-start:0}.public-widget-question-list{display:grid;gap:.6rem}.public-widget-question{display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:.75rem;border:1px solid var(--color-border);border-radius:var(--radius-md);text-decoration:none}.public-widget-question small{color:var(--color-muted);white-space:nowrap}.public-widget-categories{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.65rem}.public-widget-categories>a{display:flex;justify-content:space-between;gap:.75rem;padding:.75rem;border:1px solid var(--color-border);border-radius:var(--radius-md);text-decoration:none}.public-widget-copy>:first-child{margin-block-start:0}.public-widget-copy>:last-child{margin-block-end:0}@media(max-width: 47.5rem){.public-widget-categories{grid-template-columns:1fr 1fr}}@media(max-width: 32.5rem){.public-widget-categories{grid-template-columns:1fr}.public-widget-question{align-items:flex-start;flex-direction:column}}

/* Progressive tag picker and compact question actions. */
.tag-picker { position: relative; }
.tag-picker-search { width: 100%; }
.tag-picker.is-enhanced .tag-picker-source {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.tag-picker-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-block-end: .5rem; }
.tag-picker-chip,
.tag-picker-option {
    font: inherit;
    color: var(--color-text, #172033);
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #d9deea);
    border-radius: 999px;
    padding: .45rem .7rem;
    cursor: pointer;
}
.tag-picker-chip { background: color-mix(in srgb, var(--color-primary, #315be8) 10%, var(--color-surface, #fff)); }
.tag-picker-options {
    position: absolute;
    z-index: 30;
    inset-inline: 0;
    inset-block-start: calc(100% - .25rem);
    display: grid;
    gap: .35rem;
    max-block-size: 15rem;
    overflow: auto;
    padding: .5rem;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #d9deea);
    border-radius: .8rem;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .12);
}
.tag-picker-options[hidden] { display: none; }
.tag-picker-option { inline-size: 100%; text-align: start; border-radius: .65rem; }
.tag-picker-option:hover,
.tag-picker-option:focus-visible { border-color: var(--color-primary, #315be8); outline: none; }
.tag-picker-status { min-block-size: 1.25em; }

.question-action-bar {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: .55rem;
    margin-block-start: 1rem;
    overflow-x: auto;
    scrollbar-width: thin;
}
.question-action-bar form { margin: 0; }
.action-row > * { flex: 0 0 auto; }
.action-row .vote-controls { margin-block-end: 0; }
.action-row .vote-controls form { flex-wrap: nowrap; }
.action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    min-block-size: 2.25rem;
    inline-size: 2.25rem;
    min-inline-size: 2.25rem;
    padding-inline: .4rem;
    white-space: nowrap;
    text-decoration: none;
}
.action-button svg { inline-size: 1.15rem; block-size: 1.15rem; flex: 0 0 auto; }
.action-button-label {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
.comment-report-action > summary.action-button { cursor: pointer; list-style: none; font-size: .85rem; color: var(--color-primary, #087864); }
.comment-report-action > summary.action-button::-webkit-details-marker { display: none; }
.question-report-action { position: relative; }
.question-report-action > summary { list-style: none; cursor: pointer; }
.question-report-action > summary::-webkit-details-marker { display: none; }
.report-popover {
    position: absolute;
    z-index: 25;
    inset-inline-start: 0;
    margin-block-start: .5rem;
    inline-size: min(22rem, calc(100vw - 2rem));
    padding: 1rem;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #d9deea);
    border-radius: .9rem;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .12);
}
.report-done {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 2rem;
    padding-block: .25rem;
    padding-inline: .65rem;
    border-radius: 999px;
    background: var(--color-surface-soft, #f7faf9);
    border: 1px solid var(--color-border, #d9deea);
    color: var(--color-muted, #64706c);
    font-size: .8rem;
    font-weight: 600;
    line-height: 1;
}
.comment-meta .report-done {
    min-block-size: auto;
    padding-block: .15rem;
    padding-inline: .45rem;
    font-size: .75rem;
}

/* Q&A hierarchy: comments belong to their question/answer target, never a standalone feed. */
.question-tags { display:flex; flex-wrap:wrap; gap:.45rem; margin-block:.85rem 0; }
.question-tag { display:inline-flex; align-items:center; min-block-size:2rem; padding:.3rem .65rem; border:1px solid var(--color-border, #d9deea); border-radius:999px; background:var(--color-surface-soft, #f7faf9); color:var(--color-text, #172033); text-decoration:none; font-size:.875rem; }
.question-tag:hover,.question-tag:focus-visible { border-color:var(--color-primary, #087864); }
.compact-comment-thread { margin-block-start:1rem; padding-block-start:.75rem; border-block-start:1px solid var(--color-border, #d9deea); }
.question-comment-thread { margin-block-start:1.15rem; }
.comment-thread-heading { display:flex; align-items:center; justify-content:space-between; gap:.75rem; color:var(--color-muted, #64706c); font-size:.9rem; }
.compact-comment-list { display:grid; gap:.35rem; margin-block:.6rem 0; }
.compact-comment-list .comment-item { padding:.55rem .7rem; border-radius:.6rem; background:var(--color-surface-soft, #f7faf9); }
.comment-meta { display:flex; align-items:center; flex-wrap:wrap; gap:.55rem; color:var(--color-muted, #64706c); }
.comment-meta details { position:relative; }
.comment-report-action > summary,.comment-composer > summary { cursor:pointer; list-style:none; font-size:.85rem; color:var(--color-primary, #087864); }
.comment-report-action > summary::-webkit-details-marker,.comment-composer > summary::-webkit-details-marker { display:none; }
.comment-report-form { display:grid; gap:.5rem; position:absolute; z-index:35; inset-inline-start:0; inline-size:min(20rem, calc(100vw - 2rem)); padding:.75rem; margin-block-start:.35rem; background:var(--color-surface, #fff); border:1px solid var(--color-border, #d9deea); border-radius:.75rem; box-shadow:0 12px 30px rgba(15,23,42,.12); }
.comment-report-form select,.comment-report-form textarea { inline-size:100%; }
.comment-composer { margin-block-start:.55rem; }
.comment-form.compact-comment-form { max-inline-size:46rem; }
.comment-textarea { inline-size:100%; text-align:start; unicode-bidi:plaintext; }
.comment-textarea[dir="rtl"],html[dir="rtl"] .comment-textarea { direction:rtl; text-align:start; }
.comment-textarea[dir="ltr"],html[dir="ltr"] .comment-textarea { direction:ltr; text-align:start; }
.answer-actions { display:flex; align-items:center; flex-wrap:nowrap; gap:.65rem; margin-block-start:.75rem; overflow-x:auto; scrollbar-width:thin; }
.answer-actions form { margin:0; }
.answer-comments { margin-block-start:.85rem; padding-block-start:.65rem; }
@media (max-width: 40rem) {
    /* These action rows already scroll horizontally, so the narrow screen is a
       reason to let a target keep its size, not to shrink it below the thumb. */
    .comment-report-form { position:fixed; inset-inline:1rem; inset-block:auto 1rem; inline-size:auto; max-block-size:70vh; overflow:auto; }
}
.question-comment-thread > summary.comment-thread-heading { cursor:pointer; list-style:none; }
.question-comment-thread > summary.comment-thread-heading::-webkit-details-marker { display:none; }
.question-comment-thread > summary.comment-thread-heading::after { content:"+"; font-weight:800; }
.question-comment-thread[open] > summary.comment-thread-heading::after { content:"−"; }

/* RC3 community identity and homepage insight widgets */
.author-inline{display:inline-flex;align-items:center;gap:.45rem;text-decoration:none;color:inherit}.author-inline img{inline-size:26px;block-size:26px;max-inline-size:none;border-radius:50%;object-fit:cover;flex:0 0 auto;border:1px solid var(--color-border)}
.author-chip{display:inline-flex;align-items:center;gap:.45rem;text-decoration:none;color:inherit}
/* max-inline-size:none defeats the global 100% floor: inside a flex row the
   chip can be squeezed narrower than its avatar, and a percentage cap would
   then collapse the image instead of the label. */
.author-chip img{inline-size:28px;block-size:28px;max-inline-size:none;border-radius:50%;object-fit:cover;flex:0 0 auto;border:1px solid var(--color-border);background:var(--surface-soft)}
.author-chip bdi{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.question-meta-large .author-chip img{inline-size:36px;block-size:36px}
.public-widget-tags{display:flex;flex-wrap:wrap;gap:.6rem}.public-widget-tags .tag-chip{display:inline-flex;align-items:center;gap:.55rem;text-decoration:none}.public-widget-tags .tag-chip bdi{font-size:.78rem;color:var(--color-muted)}
.public-widget-contributors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}.public-widget-contributor{display:flex;align-items:center;gap:.75rem;padding:.8rem;border:1px solid var(--color-border);border-radius:var(--radius-md);text-decoration:none;color:inherit}.public-widget-contributor img{inline-size:44px;block-size:44px;max-inline-size:none;border-radius:50%;object-fit:cover;flex:0 0 auto}.public-widget-contributor span{display:grid;gap:.18rem;min-inline-size:0}.public-widget-contributor strong{overflow:hidden;text-overflow:ellipsis}.public-widget-contributor small{color:var(--color-muted)}
@media(max-width: 45rem){.public-widget-contributors{grid-template-columns:1fr}.question-meta{flex-wrap:wrap}}

/* WYSIWYG editor: the contenteditable surface mirrors the safe server renderer. */

/* Responsive advertising placements */
.ad-slot {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  margin-block: 1rem;
  text-align: center;
  contain: layout paint;
}
.site-header > .ad-slot,
.site-footer > .ad-slot {
  width: min(100% - 2rem, 1180px);
  margin-inline: auto;
}
.ad-slot img,
.ad-slot-image {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
}
.ad-slot iframe,
.ad-slot ins,
.ad-slot > div {
  max-width: 100%;
}
.ad-slot-link {
  display: block;
  max-width: 100%;
}
.ad-slot-after_question {
  margin-block: 1.25rem 1.5rem;
}
.ad-slot-between_answers {
  margin-block: 1.25rem;
}
@media (max-width: 40rem) {
  .ad-slot { margin-block: .85rem; }
  .site-header > .ad-slot,
  .site-footer > .ad-slot { width: calc(100% - 1rem); }
}

/* Advertisement device visibility: configured per slot in Administration. */
@media (min-width: 1025px) { .ad-hide-desktop { display: none !important; } }
@media (min-width: 641px) and (max-width: 1024px) { .ad-hide-tablet { display: none !important; } }
@media (max-width: 40rem) { .ad-hide-mobile { display: none !important; } }

.form-bot-trap { position:absolute !important; inline-size:1px !important; block-size:1px !important; overflow:hidden !important; clip-path:inset(50%) !important; white-space:nowrap !important; }

/* Community homepage — Theme System 2.0 layouts */
.community-hero{padding-block:2.2rem 1.25rem}.community-hero-inner{display:flex;align-items:end;justify-content:space-between;gap:2rem;padding:1.5rem;border:1px solid var(--color-border,var(--line));border-radius:var(--radius-xl,1.5rem);background:var(--color-surface,var(--surface));box-shadow:var(--shadow-sm)}.community-hero .hero-copy{max-inline-size:48rem}.community-hero h1{margin-block:.2rem .5rem;font-size:clamp(1.8rem,4vw,3rem)}.community-toolbar{display:flex;align-items:end;justify-content:space-between;gap:1rem;margin-block-end:.8rem}.community-toolbar h2{margin:0}.community-feed-tabs{display:flex;gap:.35rem;overflow-x:auto;padding-block:.35rem 1rem}.community-feed-tabs a{white-space:nowrap;padding:.55rem .85rem;border:1px solid var(--color-border,var(--line));border-radius:999px;background:var(--color-surface,var(--surface));color:var(--color-muted,var(--ink-muted));font-size:.82rem;font-weight:700}.community-feed-tabs a[aria-current="page"]{border-color:var(--color-primary,var(--teal));background:var(--color-primary,var(--teal));color:#fff}.community-feed-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:1.25rem;align-items:start}.community-feed-grid.has-community-sidebar{grid-template-columns:minmax(0,1fr) minmax(15rem,19rem)}.community-feed{display:grid;gap:var(--home-feed-gap,1rem);min-inline-size:0}.community-sidebar{position:sticky;top:5.5rem;display:grid;gap:1rem}.community-feed-item{display:grid;grid-template-columns:5.2rem minmax(0,1fr);gap:1.1rem;padding:1.1rem 1.2rem;border:1px solid var(--card-border,var(--line));border-radius:var(--card-radius,var(--radius-lg));background:var(--card-bg,var(--surface));box-shadow:var(--card-shadow,var(--shadow-sm));transition:border-color .16s ease,transform .16s ease}.community-feed-item:hover{border-color:var(--color-primary,var(--teal));transform:translateY(-1px)}.feed-item-stats{display:grid;align-content:start;gap:.45rem;color:var(--color-muted,var(--ink-muted));font-size:.68rem;text-align:center}.feed-item-stats span{display:grid}.feed-item-stats strong{color:var(--color-text,var(--ink));font-size:1rem}.feed-item-body{min-inline-size:0}.feed-item-kicker{display:flex;align-items:center;gap:.45rem;min-block-size:1.4rem;margin-block-end:.3rem}.feed-type-badge{font-size:.7rem;font-weight:800;color:var(--color-primary,var(--teal));text-transform:uppercase;letter-spacing:.04em}.community-feed-item.is-discussion .feed-type-badge{color:var(--color-secondary,#3977c9)}.community-feed-item h3{margin:0 0 .4rem;font-size:1.05rem;line-height:1.45}.community-feed-item h3 a:hover{color:var(--color-primary,var(--teal))}.community-feed-item p{display:-webkit-box;margin:0 0 .65rem;overflow:hidden;color:var(--color-muted,var(--ink-muted));font-size:.86rem;line-height:1.65;-webkit-box-orient:vertical;-webkit-line-clamp:2}.feed-tags{display:flex;flex-wrap:wrap;gap:.35rem;margin-block-end:.65rem}.feed-tags a{padding:.2rem .48rem;border-radius:.4rem;background:var(--color-surface-soft,var(--surface-soft));color:var(--color-primary,var(--teal));font-size:.7rem;font-weight:700}.feed-item-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem .9rem;color:var(--color-muted,var(--ink-muted));font-size:.73rem}.feed-item-meta time{margin-inline-start:auto}.feed-item-meta .author-inline{gap:.35rem}.feed-item-meta img{border-radius:50%}body[data-home-layout="compact"] .community-hero{display:none}body[data-home-layout="compact"] .community-feed{gap:.5rem}body[data-home-layout="compact"] .community-feed-item{padding:.75rem .9rem;border-radius:var(--radius-md)}body[data-home-layout="qa_focus"] .community-feed-item.is-discussion{opacity:.82}body[data-density="compact"] .community-feed-item{padding-block:.75rem}body[data-density="spacious"] .community-feed-item{padding-block:1.45rem}.site-header[data-header-layout="compact"],body[data-header-layout="compact"] .site-header{min-block-size:auto}.site-header[data-header-layout="compact"] .site-header-inner,body[data-header-layout="compact"] .site-header-inner{padding-block:.45rem}body[data-sidebar-position="start"] .community-feed-grid.has-community-sidebar{grid-template-columns:minmax(15rem,19rem) minmax(0,1fr)}body[data-sidebar-position="start"] .community-sidebar{grid-column:1;grid-row:1}body[data-sidebar-position="start"] .community-feed{grid-column:2;grid-row:1}@media(max-width: 56.25rem){.community-feed-grid.has-community-sidebar{grid-template-columns:1fr}.community-sidebar{position:static;grid-column:auto!important;grid-row:auto!important}.community-feed{grid-column:auto!important;grid-row:auto!important}.community-hero-inner,.community-toolbar{align-items:stretch;flex-direction:column}.community-toolbar .section-search{inline-size:100%}}@media(max-width: 38.75rem){.community-feed-item{grid-template-columns:1fr;gap:.7rem}.feed-item-stats{display:flex;justify-content:start;gap:1rem;text-align:start}.feed-item-stats span{display:flex;gap:.25rem}.feed-item-meta time{margin-inline-start:0}.community-hero{padding-block:1rem}.community-hero-inner{padding:1rem}.community-hero .hero-actions{inline-size:100%}.community-hero .button{flex:1}}

/* Question/topic page layout presets */
.question-shell .question-detail,.topic-shell .question-detail{padding:clamp(1rem,2vw,1.6rem);border:1px solid var(--color-border,var(--line));border-radius:var(--radius-xl,1.5rem);background:var(--color-surface,var(--surface));box-shadow:var(--shadow-sm)}.question-status-row,.topic-status-row{margin-block-end:.7rem}.question-answer-stack{margin-block-start:1.6rem}.question-answer-stack .answer-card,.topic-thread .comment-item{border-color:var(--color-border,var(--line));background:var(--color-surface,var(--surface))}.topic-thread{margin-block-start:1.35rem}.topic-status-row{display:flex;flex-wrap:wrap;gap:.45rem}.topic-status-row .admin-badge{border-radius:999px}body[data-question-layout="wide"] .question-container{max-inline-size:min(96vw,var(--question-max-width,72rem))}body[data-question-layout="wide"] .question-detail .rich-text{max-inline-size:66rem}body[data-question-layout="sidebar"] .question-container{max-inline-size:var(--question-max-width,72rem)}body[data-question-layout="sidebar"] .question-container.has-sidebar{display:grid;grid-template-columns:minmax(0,1fr) minmax(15rem,19rem);gap:1.25rem}body[data-question-layout="sidebar"] .question-container.has-sidebar>.content-sidebar{position:sticky;top:5.5rem}body[data-topic-layout="compact"] .topic-shell .question-detail{padding:.95rem 1.1rem;border-radius:var(--radius-lg)}body[data-topic-layout="compact"] .topic-thread .comment-item{padding-block:.7rem}body[data-topic-layout="compact"] .rich-text{line-height:1.6}@media(max-width: 56.25rem){body[data-question-layout="sidebar"] .question-container.has-sidebar{display:block}body[data-question-layout="sidebar"] .question-container.has-sidebar>.content-sidebar{position:static;margin-block-end:1rem}}

/* ==========================================================================
   Dark Mode System Variables & Theme Adaptations
   ========================================================================== */
html[data-theme-mode="dark"] {
  --surface: #171a21;
  --surface-soft: #20242d;
  --surface-warm: #26221c;
  --ink: #f0f2f5;
  --ink-muted: #9ba3af;
  --line: #2d323e;
  --color-surface: #171a21;
  --color-surface-soft: #20242d;
  --color-border: #2d323e;
  --color-text: #f0f2f5;
  --color-muted: #9ba3af;
  --shadow-soft: 0 .5rem 1.75rem rgb(0 0 0 / 40%);
}

html[data-theme-mode="dark"] body {
  background-color: #0f1117;
  color: #f0f2f5;
}

html[data-theme-mode="dark"] .site-header {
  background-color: #171a21;
  border-block-end-color: #2d323e;
}

html[data-theme-mode="dark"] .card,
html[data-theme-mode="dark"] .question-card,
html[data-theme-mode="dark"] .topic-card,
html[data-theme-mode="dark"] .community-feed-item,
html[data-theme-mode="dark"] .admin-card {
  background-color: #171a21;
  border-color: #2d323e;
  color: #f0f2f5;
}

html[data-theme-mode="dark"] :where(input, select, textarea) {
  background-color: #11141a;
  border-color: #2d323e;
  color: #f0f2f5;
}

/* Orbit Dark (Reddit Midnight) */
html[data-theme-mode="dark"].theme-orbit,
html[data-theme-mode="dark"] body.theme-orbit {
  background-color: #030303;
}
html[data-theme-mode="dark"] .theme-orbit .site-header {
  background-color: #1A1A1B;
  border-block-end-color: #343536;
}
html[data-theme-mode="dark"] .theme-orbit .orbit-card {
  background-color: #1A1A1B;
  border-color: #343536;
}
html[data-theme-mode="dark"] .theme-orbit .orbit-vote-rail {
  background-color: #151719;
  color: #D7DADC;
}
html[data-theme-mode="dark"] .theme-orbit .orbit-post-title a {
  color: #D7DADC;
}
html[data-theme-mode="dark"] .theme-orbit .orbit-post-excerpt {
  color: #818384;
}

/* Nexus Dark (Stack Dark) */
html[data-theme-mode="dark"].theme-nexus,
html[data-theme-mode="dark"] body.theme-nexus {
  background-color: #2D2D2D;
}
html[data-theme-mode="dark"] .theme-nexus .site-header {
  background-color: #1F1F1F;
  border-block-start-color: #F48024;
  border-block-end-color: #3F3F3F;
}
html[data-theme-mode="dark"] .theme-nexus .nexus-row {
  border-block-end-color: #3F3F3F;
}
html[data-theme-mode="dark"] .theme-nexus .nexus-title a {
  color: #58A6FF;
}
html[data-theme-mode="dark"] .theme-nexus .nexus-excerpt {
  color: #A0A0A0;
}
html[data-theme-mode="dark"] .theme-nexus .nexus-tag-chip {
  background-color: #39424E;
  color: #9FD0F7;
}

/* Zenith Dark (Cyber Midnight) */
html[data-theme-mode="dark"].theme-zenith,
html[data-theme-mode="dark"] body.theme-zenith {
  background-color: #0B0F19;
}
html[data-theme-mode="dark"] .theme-zenith .site-header {
  background-color: #111827;
  border-block-end-color: #4F46E5;
}
html[data-theme-mode="dark"] .theme-zenith .zenith-hero-panel,
html[data-theme-mode="dark"] .theme-zenith .zenith-card {
  background-color: #111827;
  border-color: #1F2937;
}

/* Cortex Dark (Obsidian Pro) */
html[data-theme-mode="dark"].theme-cortex,
html[data-theme-mode="dark"] body.theme-cortex {
  background-color: #121212;
}
html[data-theme-mode="dark"] .theme-cortex .site-header {
  background-color: #181818;
  border-block-end-color: #2E2E2E;
}
html[data-theme-mode="dark"] .theme-cortex .cortex-row {
  border-block-end-color: #242424;
}

/* Hikaya & Rawy Dark (Espresso Night) */
html[data-theme-mode="dark"].theme-hikaya,
html[data-theme-mode="dark"] body.theme-hikaya,
html[data-theme-mode="dark"].theme-rawy,
html[data-theme-mode="dark"] body.theme-rawy {
  background-color: #191614;
}
html[data-theme-mode="dark"] .theme-hikaya .site-header,
html[data-theme-mode="dark"] .theme-rawy .site-header {
  background-color: #221E1B;
  border-block-end-color: #38322D;
}
html[data-theme-mode="dark"] .theme-hikaya .hikaya-story-card,
html[data-theme-mode="dark"] .theme-rawy .rawy-card {
  background-color: #221E1B;
  border-color: #38322D;
}
html[data-theme-mode="dark"] .theme-hikaya .hikaya-story-title a {
  color: #E8E2D8;
}
html[data-theme-mode="dark"] .theme-hikaya .hikaya-story-excerpt {
  color: #A69E92;
}
html[data-theme-mode="dark"] .theme-hikaya .hikaya-quote-box {
  background-color: #26201D;
  color: #E8E2D8;
}

/* Dark-mode accents. The dark overrides re-point surfaces and text but left
   --color-primary/--color-secondary at their light values, so links and
   accents dropped below 4.5:1 on every theme. Hue is preserved; only
   lightness rises, and only as far as the threshold requires. */
html[data-theme-mode="dark"] {
  --color-primary: #16957C;
  --color-primary-hover: #1BB99A;
  --color-secondary: #4F85CC;
  --color-accent: #C99A3B;
  --teal: #16957C;
  --teal-dark: #1BB99A;
  --gold: #C99A3B;
}
html[data-theme-mode="dark"].theme-cortex,
html[data-theme-mode="dark"] body.theme-cortex {
  --color-primary: #0B82FA;
  --color-primary-hover: #3396FB;
  --color-secondary: #828690;
  --color-accent: #D97706;
  --teal: #0B82FA;
  --teal-dark: #3396FB;
  --gold: #D97706;
}
html[data-theme-mode="dark"].theme-hikaya,
html[data-theme-mode="dark"] body.theme-hikaya {
  --color-primary: #CA6C81;
  --color-primary-hover: #D58A9B;
  --color-secondary: #C47333;
  --color-accent: #C4841D;
  --teal: #CA6C81;
  --teal-dark: #D58A9B;
  --gold: #C4841D;
}
html[data-theme-mode="dark"].theme-nexus,
html[data-theme-mode="dark"] body.theme-nexus {
  --color-primary: #D95E03;
  --color-primary-hover: #FC7009;
  --color-secondary: #0388EC;
  --color-accent: #F48024;
  --teal: #D95E03;
  --teal-dark: #FC7009;
  --gold: #F48024;
}
html[data-theme-mode="dark"].theme-orbit,
html[data-theme-mode="dark"] body.theme-orbit {
  --color-primary: #F64105;
  --color-primary-hover: #FB5D29;
  --color-secondary: #0287EA;
  --color-accent: #FF4500;
  --teal: #F64105;
  --teal-dark: #FB5D29;
  --gold: #FF4500;
}
html[data-theme-mode="dark"].theme-rawy,
html[data-theme-mode="dark"] body.theme-rawy {
  --color-primary: #C76C4E;
  --color-primary-hover: #D1866D;
  --color-secondary: #4D8F87;
  --color-accent: #C4841D;
  --teal: #C76C4E;
  --teal-dark: #D1866D;
  --gold: #C4841D;
}
html[data-theme-mode="dark"].theme-zenith,
html[data-theme-mode="dark"] body.theme-zenith {
  --color-primary: #7C76E8;
  --color-primary-hover: #9D99EE;
  --color-secondary: #038AD0;
  --color-accent: #D97706;
  --teal: #7C76E8;
  --teal-dark: #9D99EE;
  --gold: #D97706;
}

/* ==========================================================================
   Touch targets
   ==========================================================================
   A fingertip is roughly 44px wide and does not get more precise on a small
   screen. Sizing is keyed to `pointer: coarse` rather than to a width
   breakpoint, so a touch laptop is treated as touch and a narrow desktop
   window is not. Rows that hold these controls already scroll horizontally,
   so a larger target costs nothing but the scroll they already had. */
@media (pointer: coarse) {
    .action-button,
    .icon-button,
    .button-small,
    .pagination a,
    .language-select {
        min-block-size: 2.75rem;
        min-inline-size: 2.75rem;
    }

    /* These two set a fixed box, which a min-* alone cannot grow. */
    .action-button,
    .icon-button {
        inline-size: auto;
        block-size: auto;
        padding-inline: .55rem;
    }

    /* 44px targets need room between them, or the neighbour catches the tap. */
    .action-row,
    .answer-actions,
    .question-action-bar {
        gap: .85rem;
    }
}

/* Scroll-to-top. Positioned with logical inset so it lands on the trailing edge
   in both directions, and sized to the touch floor. */
.scroll-to-top {
    position: fixed;
    inset-inline-end: 1.25rem;
    inset-block-end: 1.25rem;
    z-index: 40;
    display: grid;
    place-items: center;
    min-inline-size: 2.75rem;
    min-block-size: 2.75rem;
    padding: 0;
    border: 1px solid var(--color-border, var(--line));
    border-radius: 50%;
    background: var(--color-surface, var(--surface));
    color: var(--color-text, var(--ink));
    box-shadow: var(--shadow-md);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    transition: transform .16s ease, border-color .16s ease;
}
.scroll-to-top:hover { border-color: var(--color-primary, var(--teal)); transform: translateY(-2px); }
.scroll-to-top[hidden] { display: none; }
#scroll-top-sentinel { position: absolute; inset-block-start: 0; block-size: 1px; inline-size: 1px; }


/* Mobile bottom navigation. Off unless the operator enables it, and shown only
   under a coarse pointer: on a mouse-driven narrow window the header is already
   within easy reach, and a fixed bar would only steal vertical space. */
.mobile-bottom-nav { display: none; }
@media (pointer: coarse) and (max-width: 40rem) {
    .mobile-bottom-nav {
        position: fixed;
        inset-inline: 0;
        inset-block-end: 0;
        z-index: 45;
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        border-block-start: 1px solid var(--color-border, var(--line));
        background: var(--color-surface, var(--surface));
        padding-block-end: env(safe-area-inset-bottom, 0);
    }
    .mobile-bottom-nav a {
        display: grid;
        place-items: center;
        gap: .15rem;
        min-block-size: 3.25rem;
        padding-block: .4rem;
        color: var(--color-muted, var(--ink-muted));
        text-decoration: none;
        font-size: .7rem;
    }
    .mobile-bottom-nav a[aria-current="page"] { color: var(--color-primary, var(--teal)); }
    .mobile-bottom-nav-icon { font-size: 1.15rem; line-height: 1; }
    /* The bar is fixed, so the page reserves the space it covers rather than
       hiding the last element behind it. */
    body.has-bottom-nav { padding-block-end: 4rem; }
    body.has-bottom-nav .scroll-to-top { inset-block-end: 4.5rem; }
}

/* Collapsible header search. The toggle only exists on narrow screens; above
   that breakpoint the field is always visible and the button is removed from
   the accessibility tree as well as from view. */
.header-search-toggle { display: none; }
@media (max-width: 40rem) {
    .header-search-toggle { display: inline-grid; }
    .header-search { display: none; }
    .header-search.is-open { display: flex; }
}

/* "Read next": the internal links that keep a long post from being a dead end
   for a reader and for a crawler. Two columns where there is room, one below
   the phone tier; logical properties so it mirrors in RTL without a second
   rule. */
.related-content {
    margin-block-start: 2.25rem;
    padding: 1.15rem 1.25rem;
    border: 1px solid var(--color-border, var(--line));
    border-radius: var(--radius-lg, 1rem);
    background: var(--color-surface, var(--surface));
}
.related-content h2 {
    margin: 0 0 .9rem;
    color: var(--color-primary, var(--teal));
    font-size: 1.1rem;
}
.related-content-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .7rem 1.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.related-content-item {
    display: grid;
    gap: .2rem;
    min-inline-size: 0;
    padding-inline-start: .85rem;
    border-inline-start: 3px solid var(--color-accent, #c99a3b);
}
.related-content-item a {
    color: var(--color-text, var(--ink));
    font-weight: 700;
    line-height: 1.55;
    text-decoration: none;
    overflow-wrap: anywhere;
}
.related-content-item a:hover,
.related-content-item a:focus-visible {
    color: var(--color-primary, var(--teal));
    text-decoration: underline;
}
.related-content-item small {
    color: var(--color-muted, var(--ink-muted));
    font-size: .76rem;
}
@media (max-width: 40rem) {
    .related-content-list { grid-template-columns: minmax(0, 1fr); }
}