/* =========================================================
   GRID / PANELS
========================================================= */

.grid-2 {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(300px, .9fr);
    gap: 16px;
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 14px;
}

.panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.panel + .panel {
    margin-top: 16px;
}

/* Inside a grid row, gap already spaces panels out — the block-flow rule
   above would otherwise also match two panels sitting side by side (still
   adjacent siblings in the DOM), eating into the second one's stretched
   height by 16px and making it read shorter than its row-mate. */
.grid-2 > .panel + .panel,
.grid-3 > .panel + .panel {
    margin-top: 0;
}

.panel-header {
    min-height: 56px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.panel-title {
    font-size: 12px;
    font-weight: 800;
}

.panel-subtitle {
    color: var(--text-3);
    font-size: 10px;
    margin-top: 2px;
}

.panel-body {
    padding: 16px;
}