/* card.css: owner lane B. Stat and chart cards (CF-DS 3.4 card header, 3.11 metrics). Plain DS-1 surfaces (DR-110 add. 4): no tint, glow or gradient on the plate. */

/* the card plate. CF-DS names it .card, but app.css already uses .card for the board's cover cards, so the plate is .ov-card */
.ov-card{position:relative;isolation:isolate;display:flex;flex-direction:column;min-width:0;padding:var(--card-pad);border:1px solid var(--line);border-radius:var(--card-r);background:var(--surface);box-shadow:var(--hl-top);transition:box-shadow var(--dur-4) var(--ease),opacity var(--dur-2) var(--ease)}
.ov-card[hidden]{display:none}

/* card header: icon chip, title, count or scope badge, spacer, actions */
.card-h{display:flex;align-items:center;gap:10px;min-height:28px;margin:0 0 var(--s-4)}
.card-h h2,.card-h h3{margin:0;font:600 var(--fs-4)/24px var(--font);color:var(--text)}
.card-h .sp{flex:1}
.card-ic{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:var(--raised);box-shadow:var(--edge);color:var(--text-2)}
.card-ic .i{width:16px;height:16px}
.card-ic.amber{background:var(--amber-soft);box-shadow:none;color:var(--amber)}

/* metric tile: the number stays mono 300; unit, delta and caption in the UI face */
.ov-card.metric{padding:var(--s-5);min-height:132px}
.metric .card-h{margin-bottom:var(--s-3)}
.metric .card-h h2,.metric .card-h h3{font-size:var(--fs-3);line-height:20px;color:var(--text-2)}
.metric .nrow{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--s-1) var(--s-2);margin-top:auto}
.metric .num:not(.badge){font:300 var(--fs-8)/40px var(--mono);letter-spacing:-.04em;word-spacing:-.32em;color:var(--text);font-variant-numeric:tabular-nums}
.metric .unit{font:400 var(--fs-4)/20px var(--font);color:var(--text-2)}
.metric .badge{align-self:center;margin-left:var(--s-1)}
.metric .cap{margin-top:var(--s-2);color:var(--text-3);font:400 var(--fs-2)/18px var(--font)}
.metric.xl .num{font-size:var(--fs-10);line-height:48px}
.metric.xl .unit{font-size:var(--fs-5);line-height:24px}
.metric .num.none{color:var(--text-3)}
.metric-in{display:grid;gap:2px}
.metric-in .num{font:600 var(--fs-5)/24px var(--font);color:var(--text);font-variant-numeric:tabular-nums}
.metric-in .cap{color:var(--text-3);font:400 var(--fs-2)/18px var(--font)}
.metric-ins{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4)}
@media (prefers-reduced-motion:reduce){.ov-card{transition:none}}