/*
 * What's New · "glmap" card-viz variant (.cv-pc-*) — the Payroll Admin
 * Console "GL mapping" Reports-page demo for the "Reports that stay right
 * when your layout changes" card.
 *
 * Ported from the approved standalone design (DesignSync). Builds on the
 * `.cv-pc` sidebar/main/head/scrim/drawer chrome already ported in
 * whats-new-cv-g2n.css and the `.cv-rip`/`.cv-morph`/`cvW5in` keyframe
 * already ported in whats-new-cv-docs.css / whats-new-cv-arrears.css — only
 * the spreadsheet grid, context menu, download dropdown and export-drawer
 * field list this variant adds are declared here. `--cm`/`--cs` are the
 * same easing custom properties `.cv-es2` already defines.
 */

.cv-pc-pill.yellow { color: #7a4e00; background: #fff1d6; }

/* ── Header: "Private" accessibility pill + collapse chevron ───────────── */
.cv-w5-by { display: flex; align-items: center; gap: 12px; }
.cv-w5-by > span:first-child { display: flex; flex-direction: column; gap: 5px; }
.cv-w5-by small { font: 500 10.5px/1 var(--font-body); color: #8b9ab2; }
.cv-w5-by .cv-pc-pill { height: 22px; padding: 0 9px; font-size: 11px; }
.cv-w5-x { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #f0f3f8; color: #001738; }
.cv-w5-x svg { width: 14px; height: 14px; transform: rotate(-90deg); }

/* ── Report card shell + toolbar ─────────────────────────────────────── */
.cv-w5-rep { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.cv-w5-rep-h { padding: 13px 16px; border-bottom: 1px solid #e3e6ec; }
.cv-w5-rep-h b { font: 700 14px/1.2 var(--font-body); color: #001738; white-space: nowrap; }
.cv-w5-tb { display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 14px; font: 500 11.5px/1 var(--font-body); color: #3f587f; border-bottom: 1px solid #e3e6ec; }
.cv-w5-tb i { width: 1px; height: 14px; background: #e3e6ec; }
.cv-w5-tb b { text-decoration: underline; }

/* ── Spreadsheet grid ────────────────────────────────────────────────── */
.cv-w5-ss { position: relative; flex: 1; min-height: 0; overflow: hidden; background: #fff; }
.cv-w5-ss-in { position: absolute; top: 0; left: 0; height: 350px; transition: width 0.9s var(--cm); }
.cv-w5-ss-corner { position: absolute; top: 0; left: 0; box-sizing: border-box; width: 30px; height: 25px; background: #f3f5f8; border-bottom: 1px solid #e3e6ec; border-right: 1px solid #e3e6ec; }
.cv-w5-ss-rh { position: absolute; top: 0; left: 0; box-sizing: border-box; width: 30px; height: 25px; display: grid; place-items: center; font: 600 10.5px/1 var(--font-body); color: #8b9ab2; background: #f9fafb; border-bottom: 1px solid #eef0f4; border-right: 1px solid #e3e6ec; }
.cv-w5-ss-slot { position: absolute; top: 0; height: 25px; pointer-events: none; }
.cv-w5-ss-col { position: absolute; top: 0; left: 0; height: 100%; transition: transform 0.9s var(--cm), opacity 0.5s; }
.cv-w5-ss-col .lt, .cv-w5-ss-col .c { position: absolute; top: 0; left: 0; box-sizing: border-box; width: 100%; height: 25px; display: flex; align-items: center; padding: 0 8px; overflow: hidden; font: 500 11.5px/1 var(--font-body); color: #001738; white-space: nowrap; border-bottom: 1px solid #eef0f4; border-right: 1px solid #eef0f4; }
.cv-w5-ss-col .lt { font: 600 10.5px/1 var(--font-body); color: #8b9ab2; background: #f9fafb; border-color: #e3e6ec; justify-content: center; transition: background-color 0.4s, color 0.4s; }
.cv-w5-ss-col .meta { color: #3f587f; }
.cv-w5-ss-col .hd { background: #f0f3f8; font-weight: 700; }
.cv-w5-ss-col .num { font-variant-numeric: tabular-nums; justify-content: flex-end; }
.cv-w5-ss-col.hov .lt { color: #a63d12; background: #ffe9de; }
.cv-w5-ss-col.is-new { opacity: 0; }
.cv-w5-ss-col.is-new.on { opacity: 1; }
.cv-w5-ss-col.is-new .c, .cv-w5-ss-col.is-new .lt { background: #fff6f1; }
.cv-w5-ss-col.is-new .c.hd { color: #a63d12; background: #ffe9de; }
.cv-w5-ss-col.is-new.on .c { animation: cvW5in 0.5s var(--cm) both; animation-delay: calc(var(--i, 0) * 70ms + 0.3s); }
.cv-w5-ss-col.kept .c:not(.meta) { background: #f4fff7; transition: background-color 0.5s; }
.cv-w5-ss-col.kept .c.hd { color: #0a4e20; background: #dcf1e4; }
.cv-w5-kept { position: absolute; top: 27px; left: 0; z-index: 3; display: inline-flex; align-items: center; gap: 5px; height: 22px; margin-top: 6px; padding: 0 8px; font: 700 10.5px/1 var(--font-body); color: #fff; white-space: nowrap; background: #0f8529; border-radius: 6px; opacity: 0; transition: transform 0.9s var(--cm), opacity 0.4s; }
.cv-w5-kept svg { width: 11px; height: 11px; }
.cv-w5-kept.on { opacity: 1; }

/* ── Right-click context menu ────────────────────────────────────────── */
.cv-w5-ctx { position: absolute; top: 24px; z-index: 4; display: flex; flex-direction: column; padding: 6px; background: #fff; border-radius: 10px; box-shadow: 0 12px 28px rgba(0, 23, 56, 0.18), 0 0 0 1px #e3e6ec; opacity: 0; transform-origin: 0 0; transform: translateY(-6px) scale(0.97); transition: opacity 0.3s, transform 0.45s var(--cm); }
.cv-w5-ctx.on { opacity: 1; transform: none; }
.cv-w5-ctx span { position: relative; padding: 8px 12px; border-radius: 7px; font: 600 12px/1 var(--font-body); color: #001738; white-space: nowrap; }
.cv-w5-ctx span.hot { color: #a63d12; background: #fff1ea; }
.cv-w5-ctx span.dl { color: #b42318; }

/* ── Footer: Cancel + Download dropdown ─────────────────────────────── */
.cv-w5-rfoot { display: flex; justify-content: flex-end; align-items: center; gap: 16px; padding: 12px 16px; border-top: 1px solid #e3e6ec; }
.cv-w5-rfoot .cv-pc-pbtn { gap: 8px; }
.cv-w5-rfoot .cv-pc-pbtn svg { width: 13px; height: 13px; }
.cv-w5-dlw { position: relative; }
.cv-w5-dlm { position: absolute; right: 0; bottom: 44px; display: flex; flex-direction: column; min-width: 150px; padding: 6px; background: #fff; border-radius: 10px; box-shadow: 0 12px 28px rgba(0, 23, 56, 0.18), 0 0 0 1px #e3e6ec; opacity: 0; transform: translateY(6px); transition: opacity 0.3s, transform 0.45s var(--cm); }
.cv-w5-dlm.on { opacity: 1; transform: none; }
.cv-w5-dlm span { padding: 8px 10px; border-radius: 7px; font: 600 12px/1 var(--font-body); color: #001738; white-space: nowrap; }
.cv-w5-dlm span.on { color: #a63d12; background: #fff1ea; }

/* ── Export drawer ───────────────────────────────────────────────────── */
.cv-w5-xdrw { width: 330px; }
.cv-w5-xm { display: flex; flex-direction: column; border: 1px solid #e3e6ec; border-radius: 12px; overflow: hidden; }
.cv-w5-xr { display: grid; grid-template-columns: minmax(0, 1fr) auto 20px; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid #eef0f4; opacity: 0; transform: translateX(16px); transition: opacity 0.45s var(--cm), transform 0.7s var(--cm); transition-delay: calc(var(--i) * 90ms + 0.35s); }
.cv-w5-xr:last-child { border-bottom: 0; }
.cv-w5-xr.on { opacity: 1; transform: none; }
.cv-w5-xr .hd { display: flex; align-items: center; gap: 6px; min-width: 0; }
.cv-w5-xr .hd b { font: 700 12.5px/1.1 var(--font-body); color: #001738; white-space: nowrap; }
.cv-w5-xr .hd em { font: 700 9.5px/1 var(--font-body); color: #a63d12; background: #ffe9de; border-radius: 4px; padding: 3px 5px; font-style: normal; }
.cv-w5-xr .tg { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; white-space: nowrap; }
.cv-w5-xr .tg i { font: 500 10.5px/1 var(--font-mono, monospace); color: #cc4c19; font-style: normal; }
.cv-w5-xr .tg b { font: 700 12px/1 var(--font-body); color: #001738; font-variant-numeric: tabular-nums; }
.cv-w5-xr .ok { display: grid; place-items: center; width: 20px; height: 20px; color: #0a6b22; background: #dcf1e4; border-radius: 50%; }
.cv-w5-xr .ok svg { width: 11px; height: 11px; }
.cv-w5-xnote { display: flex; align-items: center; gap: 10px; padding: 11px 12px; color: #0a6b22; background: #f4fff7; border: 1px solid #b5e5c1; border-radius: 12px; opacity: 0; transform: translateY(8px); transition: opacity 0.5s var(--cm) 1s, transform 0.7s var(--cm) 1s; }
.cv-w5-xnote.on { opacity: 1; transform: none; }
.cv-w5-xnote > svg { flex: none; width: 14px; height: 14px; }
.cv-w5-xnote span { display: flex; flex-direction: column; gap: 4px; }
.cv-w5-xnote b { font: 700 12.5px/1 var(--font-body); color: #0a4e20; }
.cv-w5-xnote small { font: 500 11px/1 var(--font-body); color: #3f587f; }

@media (prefers-reduced-motion: reduce) {
	.cv-w5-ss-col, .cv-w5-ss-col .c { transition: none !important; animation: none !important; }
}