.metrics { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
.metric { overflow: hidden; min-height: 148px; padding: var(--sp-5); }
.metric__top { display: flex; justify-content: space-between; align-items: start; }
.metric__label { color: var(--ink-soft); font-size: var(--text-sm); font-weight: 650; }
.metric__icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 11px; background: var(--accent-soft); color: var(--accent); }
.metric__icon svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.metric__value { margin-top: var(--sp-4); font-family: var(--font-display); font-size: 2.35rem; line-height: 1; letter-spacing: -.04em; }
.metric__foot { margin-top: var(--sp-2); color: var(--ink-muted); font-size: var(--text-xs); }
.metric__trend { color: var(--mint); font-weight: 750; }

.workload { grid-column: span 8; min-height: 372px; }
.capacity { grid-column: span 4; min-height: 372px; }
.segmented { position: relative; display: inline-grid; grid-auto-flow: column; padding: 3px; border: 1px solid var(--line); border-radius: 12px; background: var(--canvas-soft); }
.segmented__indicator { position: absolute; z-index: 0; left: 0; top: 3px; height: calc(100% - 6px); border-radius: 9px; background: var(--surface-raised); box-shadow: var(--shadow-xs); pointer-events: none; }
.segmented button { position: relative; z-index: 1; min-width: 42px; height: 28px; padding: 0 9px; border: 0; background: transparent; color: var(--ink-muted); font-size: var(--text-xs); font-weight: 750; cursor: pointer; }
.segmented button[aria-checked="true"] { color: var(--ink); }
.segmented button:focus-visible { outline: 2px solid var(--accent); border-radius: 8px; }
.chart-wrap { position: relative; height: 236px; margin-top: var(--sp-3); }
.chart-svg { width: 100%; height: 100%; overflow: visible; }
.chart-grid line { stroke: var(--line); stroke-width: 1; }
.chart-area { fill: var(--accent-soft); opacity: .78; }
.chart-line { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.chart-dot { fill: var(--surface); stroke: var(--accent); stroke-width: 2.5; }
.chart-axis { display: flex; justify-content: space-between; color: var(--ink-muted); font-family: var(--font-mono); font-size: .62rem; }
.chart-summary { position: absolute; top: 2px; left: 4px; }
.chart-summary strong { display: block; font-family: var(--font-display); font-size: 1.8rem; font-weight: 500; line-height: 1; }
.chart-summary span { color: var(--ink-muted); font-size: var(--text-xs); }

.capacity__list { display: grid; gap: 18px; }
.person { display: grid; grid-template-columns: 34px 1fr auto; gap: var(--sp-3); align-items: center; }
.person__avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-size: var(--text-xs); font-weight: 800; }
.person__name { font-size: var(--text-sm); font-weight: 750; }
.person__role { color: var(--ink-muted); font-size: var(--text-xs); }
.person__load { color: var(--ink-soft); font-size: var(--text-xs); font-weight: 700; }
.person__bar { grid-column: 2 / 4; height: 5px; margin-top: -6px; border-radius: 5px; background: var(--canvas-soft); overflow: hidden; }
.person__bar i { display: block; height: 100%; width: var(--load); border-radius: inherit; background: var(--tone, var(--accent)); }

.approvals { grid-column: span 5; }
.activity { grid-column: span 7; }
.approval-list, .activity-list { list-style: none; display: grid; }
.approval { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); }
.approval:last-child { border-bottom: 0; }
.approval__thumb { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--apricot-soft); color: var(--coral); font-family: var(--font-display); font-size: 1.3rem; }
.approval__title, .activity-item__title { font-size: var(--text-sm); font-weight: 750; }
.approval__meta, .activity-item__meta { color: var(--ink-muted); font-size: var(--text-xs); }
.approval__actions { display: flex; gap: 5px; }
.approval__actions .icon-btn { width: 32px; height: 32px; }
.activity-list { gap: 2px; }
.activity-item { position: relative; display: grid; grid-template-columns: 34px 1fr auto; gap: var(--sp-3); align-items: start; padding: 10px 0; }
.activity-item::before { content: ''; position: absolute; left: 16px; top: 43px; bottom: -8px; width: 1px; background: var(--line); }
.activity-item:last-child::before { display: none; }
.activity-item__mark { position: relative; z-index: 1; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: var(--text-xs); font-weight: 800; }
.activity-item time { color: var(--ink-muted); font-family: var(--font-mono); font-size: .62rem; }

@media (max-width: 1100px) { .metrics { grid-template-columns: repeat(2, 1fr); } .workload, .capacity { grid-column: span 12; } .capacity__list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .approvals, .activity { grid-column: span 12; } }
@media (max-width: 560px) { .metrics { grid-template-columns: 1fr 1fr; gap: var(--sp-3); } .metric { min-height: 128px; padding: var(--sp-4); } .metric__value { font-size: 1.8rem; } .metric__icon { display: none; } .capacity__list { grid-template-columns: 1fr; } .approval { grid-template-columns: 40px 1fr; } .approval__actions { grid-column: 2; } .chart-wrap { height: 210px; } }

/* Editorial ledger treatment. */
.metrics { gap: 0; border: 1px solid var(--line-strong); background: var(--surface); box-shadow: var(--shadow-xs); }
.metric { border: 0; border-right: 1px solid var(--line-strong); border-radius: 0; box-shadow: none; background: transparent; }
.metric:last-child { border-right: 0; }
.metric::before { left: 0; width: 100%; height: 3px; }
.metric:nth-child(2)::before { background: var(--ink); }.metric:nth-child(3)::before { background: var(--coral); }.metric:nth-child(4)::before { background: var(--mint); }
.metric__icon { border-radius: 2px; }
.metric__value { font-size: 2.7rem; }
.segmented { border-radius: 3px; }.segmented__indicator { border-radius: 2px; }
.chart-line { stroke-width: 3; }.chart-area { opacity: .55; }
.person__avatar, .activity-item__mark, .approval__thumb { border-radius: 3px; }
@media(max-width:1100px){.metric:nth-child(2){border-right:0}.metric:nth-child(-n+2){border-bottom:1px solid var(--line-strong)}}

.metrics { border-color: var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.metric { border-color: var(--line); }
.metric::before { display: none; }
.metric__icon, .person__avatar, .activity-item__mark, .approval__thumb { border-radius: 8px; }
.metric__value { font-family: var(--font-ui); font-size: 2.3rem; font-weight: 600; letter-spacing: -.055em; }
.segmented { border-radius: 8px; }.segmented__indicator { border-radius: 6px; }
.chart-line { stroke: #4d5fd5; stroke-width: 2.5; }.chart-area { fill:#e7e9f8;opacity:.65; }