/* Layout primitives. Canonical breakpoint: mobile <=768px, desktop >=769px. */

/* === Layout primitives =============================================== */
.stack-sm {
    display: grid;
    gap: var(--space-1);
}

.cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    align-items: center;
}

.grid {
    display: grid;
    gap: var(--space-3);
}

.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }

.grid-cols-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-cols-5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }

.gap-sm { gap: var(--space-1); }
.gap-md { gap: var(--space-2); }


.detail-layout {
    display: grid;
    grid-template-columns: minmax(260px, 32%) 1fr;
    gap: var(--space-3);
    align-items: start;
}

.command-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 34%);
    gap: var(--space-3);
    align-items: start;
}

/* Federation forum tab bar — box-style visual overrides on top of .tab-bar/.tab-btn */
.forum-board-tabs {
    gap: var(--space-1);
    overflow-x: auto;
    padding: var(--space-1) var(--space-1) 0;
    scrollbar-width: thin;
    border-bottom: none;
}

.forum-board-tab {
    min-height: 36px;
    border: 1px solid var(--color-border-subtle);
    border-bottom: none;
    border-radius: var(--radius-control) var(--radius-control) 0 0;
    background: var(--color-bg-panel-raised);
    color: var(--color-text-secondary);
}

.forum-board-tab:hover,
.forum-board-tab:focus-visible {
    border-color: var(--color-accent);
    background: var(--color-bg-panel-raised);
    color: var(--color-text-primary);
}

.forum-board-tab.active {
    border-color: var(--color-accent);
    background: color-mix(in srgb, var(--color-accent) 18%, var(--color-bg-panel-raised));
    color: var(--color-text-primary);
    border-bottom-color: var(--color-accent);
}

.forum-board-rule {
    margin: var(--space-1) 0 0;
    border: 0;
    border-top: 1px solid var(--color-border-subtle);
}

.forum-board-description {
    padding: var(--space-2);
    color: var(--color-text-secondary);
    font-size: 0.875rem;
}

.forum-thread-stack {
    min-width: 0;
}

.mail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
    align-items: start;
}

.command-main,
.command-side,
.mail-list-column,
.mail-detail-column,
.mail-compose-column {
    min-width: 0;
}