.forum-index-heading {
    position: relative;
    align-items: flex-start;
    gap: var(--spacing-medium);
    padding-block: 0 var(--spacing-small);
}

.forum-index-heading-copy { min-width: 0; }
.forum-index-heading-copy p {
    margin-block-start: 0.3rem;
    font-size: var(--font-size-small);
}

.forum-index-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--spacing-small);
}

.forum-index-actions > .button {
    gap: var(--spacing-small);
    min-height: 2.6rem;
    font-size: var(--font-size-small);
}

.forum-index-tools > summary {
    padding-inline: var(--spacing-small);
    list-style: none;
}
.forum-index-tools > summary::-webkit-details-marker,
.forum-category-header::-webkit-details-marker { display: none; }
.forum-index-tools > summary span { display: flex; }

.forum-index-tools-panel {
    position: absolute;
    z-index: 5;
    inset-block-start: 100%;
    inset-inline-end: 0;
    width: min(100%, 42rem);
    padding: var(--spacing-medium);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    background: var(--color-surface);
    box-shadow: 0 0.5rem 1.5rem color-mix(in srgb, var(--color-text) 12%, transparent);
}
.forum-index-tools-panel h2 { margin: 0 0 var(--spacing-small); font-size: var(--font-size-base); }
.forum-index-tools-panel .forum-read-actions { margin-block-start: var(--spacing-medium); }
.forum-search-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-small); }
.forum-search-form input { grid-column: 1 / -1; }
.forum-search-form .form-control { width: 100%; min-width: 0; }

.forum-category {
    container-type: inline-size;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    background: var(--color-surface);
    box-shadow: 0 0.25rem 1rem color-mix(in srgb, var(--color-text) 3%, transparent);
}

.forum-category-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-medium);
    min-height: 3.65rem;
    padding: 0.65rem 1.25rem;
    background: var(--block-header);
    list-style: none;
    cursor: pointer;
}
.forum-category-header:focus-visible,
.forum-index-tools > summary:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -3px; }
.forum-category-icon { display: flex; flex: 0 0 2rem; color: var(--color-primary); }
.forum-category-icon svg { width: 2rem; height: 2rem; }
.forum-category-copy { min-width: 0; }
.forum-category-copy h2 { margin: 0; font-size: calc(var(--font-size-base) * 1.125); line-height: 1.3; }
.forum-category-copy > span { display: block; color: var(--color-text-muted); font-size: calc(var(--font-size-small) * 0.93); }
.forum-category-chevron { display: flex; margin-inline-start: auto; color: var(--color-text-muted); }
.forum-category-chevron svg { width: 1.1rem; height: 1.1rem; transform: rotate(90deg); }
.forum-category[open] > summary .forum-category-chevron svg { transform: rotate(-90deg); }
.forum-category-rows { padding-inline: 1.25rem; }

.forum-row {
    display: grid;
    grid-template-columns: 2.5rem minmax(8rem, 1fr) 4.75rem 4.75rem minmax(10rem, 0.75fr);
    align-items: center;
    gap: var(--spacing-medium);
    min-height: 3.85rem;
    padding-block: var(--spacing-small);
    border-block-end: 1px solid var(--color-border-subtle);
}
.forum-row:last-child { border-block-end: 0; }
.forum-row-icon {
    position: relative;
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    place-items: center;
    border-radius: var(--radius-medium);
    color: var(--color-primary);
    background: var(--color-soft-blue);
}
.forum-row-icon svg {
    width: 1.5rem;
    height: 1.5rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.forum-row-icon--unread::after {
    position: absolute;
    inset-block-start: -0.1rem;
    inset-inline-end: -0.1rem;
    width: 0.6rem;
    height: 0.6rem;
    border: 2px solid var(--color-surface);
    border-radius: 50%;
    background: var(--color-primary);
    content: "";
}
.forum-row-main, .forum-row-stat, .forum-index-last-copy { display: grid; min-width: 0; }
.forum-row-title {
    overflow: hidden;
    color: var(--color-text);
    font-size: var(--font-size-base);
    font-weight: 700;
    line-height: 1.4;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.forum-row-description, .forum-row-stat > span, .forum-index-last-copy > span {
    overflow: hidden;
    color: var(--color-text-muted);
    font-size: calc(var(--font-size-small) * 0.93);
    text-overflow: ellipsis;
    white-space: nowrap;
}
.forum-row-stat strong { font-size: var(--font-size-small); font-weight: 600; }
.forum-row-last { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.forum-row-last .avatar { width: 2.25rem; height: 2.25rem; }
.forum-row-last > span { color: var(--color-text-muted); font-size: var(--font-size-small); }
.forum-index-last-copy > a {
    overflow: hidden;
    color: var(--color-primary);
    font-size: var(--font-size-small);
    font-weight: 600;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.forum-row-title:hover, .forum-index-last-copy > a:hover { color: var(--color-primary); text-decoration: underline; }

@container (max-width: 42rem) {
    .forum-row { grid-template-columns: 2.5rem minmax(7rem, 1fr) 3.5rem 3.5rem minmax(8rem, 0.75fr); gap: 0.75rem; }
    .forum-category-header { padding-inline: var(--spacing-medium); }
    .forum-category-rows { padding-inline: var(--spacing-medium); }
}

@media (max-width: 48rem) {
    .forum-index-heading { flex-wrap: wrap; }
    .forum-index-heading-copy { flex: 1 1 100%; }
    .forum-index-actions { width: 100%; justify-content: space-between; }
    .forum-index-actions > .button,
    .forum-index-tools > summary { min-height: 2.75rem; }
    .forum-category-header { gap: var(--spacing-small); padding: 0.75rem; }
    .forum-category-copy h2 { overflow-wrap: anywhere; }
    .forum-category-rows { padding-inline: 0.75rem; }
    .forum-row { grid-template-columns: 2.5rem minmax(0, 1fr) 3.5rem 3.5rem; padding-block: 0.75rem; }
    .forum-row-last { grid-column: 2 / -1; }
    .forum-row-last .avatar { width: 1.75rem; height: 1.75rem; }
    .forum-index-last-copy { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.5rem; }
    .forum-index-last-copy > a { max-width: 100%; }
    .forum-row-title { white-space: normal; }
    .forum-row-description { white-space: normal; overflow-wrap: anywhere; }
}

@media (max-width: 30rem) {
    .forum-row { grid-template-columns: 2.5rem repeat(2, minmax(0, 1fr)); gap: var(--spacing-small); }
    .forum-row-main { grid-column: 2 / -1; }
    .forum-row-stat { grid-row: 2; }
    .forum-row-stat > span { font-size: 0.72rem; }
    .forum-row-stat { display: flex; align-items: baseline; gap: 0.25rem; }
    .forum-row-stat:nth-child(3) { grid-column: 2; }
    .forum-row-stat:nth-child(4) { grid-column: 3; justify-content: flex-end; }
    .forum-row-last { grid-row: 3; }
    .forum-search-form { grid-template-columns: minmax(0, 1fr); }
}