/* ══════════════════════════════════════════════════════════════
   Page: Cockpit
   ══════════════════════════════════════════════════════════════ */

.cockpit { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: var(--space-3); }
.cockpit .card { margin: 0; padding: 14px; }
.q-row { display: grid; gap: var(--space-2); }
.q-row-3 { grid-template-columns: repeat(3, 1fr); }
.q-row-4 { grid-template-columns: repeat(4, 1fr); }
.q-metric { text-align: center; }
.q-metric .v { font-size: 18px; font-weight: 700; }
.q-metric .l { font-size: var(--font-size-xs); color: var(--text3); }
.sleeve-row { display: flex; align-items: center; gap: var(--space-2); padding: 4px 0;
    border-bottom: 1px solid var(--border); font-size: var(--font-size-sm); }
.sleeve-row:last-child { border-bottom: none; }
.sleeve-dot { width: 6px; height: 6px; border-radius: var(--radius-full); flex-shrink: 0; }
.phase-pill { font-size: var(--font-size-xs); padding: 1px 6px; border-radius: 3px;
    background: var(--bg); font-weight: 600; }
.mini-trade { display: flex; align-items: center; gap: 6px; padding: 3px 0; font-size: var(--font-size-sm);
    border-bottom: 1px solid rgba(48,54,61,0.5); }
.mini-trade:last-child { border-bottom: none; }

/* ── Sleeves grid ── */
.sleeve-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
.sleeve { padding: var(--space-4); border-radius: var(--radius-xl); border: 1px solid var(--border); background: var(--bg); }
.sleeve .name { font-weight: 600; font-size: var(--font-size-base); text-transform: uppercase; color: var(--text2); letter-spacing: 1px; }
.sleeve .phase { font-size: 22px; font-weight: 700; margin: 6px 0; }
.sleeve .detail { font-size: var(--font-size-base); color: var(--text2); }
.sleeve .alloc-bar { height: 4px; background: var(--border); border-radius: 2px; margin-top: var(--space-2); overflow: hidden; }
.sleeve .alloc-fill { height: 100%; border-radius: 2px; transition: width .3s; }