/*
 * What's New · "docs" card-viz variant (.cv-es2-*) — the ESS "My Documents"
 * sidebar demo for the "Your documents, one click away" card.
 *
 * Ported from the approved standalone design (DesignSync). `.cv-rip` /
 * `.cv-cin` (generic ripple + fake-cursor) and the `cvRip`/`cvClk`/
 * `cvDsNudge` keyframes aren't defined anywhere else in this theme yet, so
 * they're declared here rather than assumed from whats-new.css. Only
 * enqueued on the What's New page — see hrblizz_whats_new_assets().
 */

@keyframes cvRip { 0% { opacity: 1; transform: scale(0.2); } to { opacity: 0; transform: scale(1.6); } }
@keyframes cvClk { 50% { transform: scale(0.82); } }
@keyframes cvDsNudge { 50% { transform: translateY(3px); } }

.cv-rip { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 95, 31, 0.38), rgba(255, 95, 31, 0) 70%); opacity: 0; transform: scale(0.2); pointer-events: none; }
.cv-rip.go { animation: cvRip 0.7s var(--cv-e, ease) both; }
.cv-cin { position: relative; }
.cv-cin, .cv-cin svg { width: 100%; height: 100%; display: block; }
.cv-cin.clk svg { animation: cvClk 0.35s ease 0.05s both; }

.cv-es2 { display: block !important; background: #f0f3f8; overflow: hidden; --ce: cubic-bezier(0.65, 0, 0.35, 1); --cs: cubic-bezier(0.34, 1.56, 0.64, 1); --cm: cubic-bezier(0.22, 1, 0.36, 1); }
/*
 * Fixed 640px-wide canvas, scaled down to fit the actual card width —
 * javascript/whats-new.js's initVizDocs() measures the real container on
 * load/resize and overrides height/transform inline; the scale(0.6) default
 * here only covers the instant before that JS runs (and no-JS fallback).
 */
.cv-es2-scr { position: absolute; left: 0; top: 0; width: 640px; height: 420px; transform-origin: 0 0; transform: scale(0.6); display: flex; background: #f0f3f8; transition: transform 1.15s var(--ce); will-change: transform; }
.cv-es2-rail { flex: none; width: 180px; display: flex; flex-direction: column; background: #fff; border-right: 1px solid #e3e6ec; }
.cv-es2-brand { height: 56px; flex: none; display: flex; align-items: center; gap: 10px; padding: 0 14px; background: #001738; }
.cv-es2-brand .lg { width: 30px; height: 30px; flex: none; border-radius: 50%; background: #fff; color: #ff5f1f; display: grid; place-items: center; font: 800 9px/1 var(--font-body); }
.cv-es2-brand b { font: 700 12.5px/1.15 var(--font-body); color: #fff; }
.cv-es2-nav { position: relative; flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 12px 10px; }
.cv-es2-ind { position: absolute; left: 10px; right: 10px; top: 12px; height: 36px; border-radius: 10px; background: #fff1ea; transition: transform 0.8s var(--cs); }
.cv-es2-it, .cv-es2-user { display: flex; align-items: center; gap: 10px; }
.cv-es2-it { position: relative; z-index: 1; height: 36px; padding: 0 11px; border-radius: 10px; color: #0b2a55; transition: color 0.4s, transform 0.45s var(--cm); }
.cv-es2-it svg { width: 18px; height: 18px; flex: none; }
.cv-es2-it b { font: 600 13px/1 var(--font-body); white-space: nowrap; }
.cv-es2-it em { margin-left: auto; font: 700 9.5px/1 var(--font-body); font-style: normal; letter-spacing: 0.04em; padding: 4px 6px; border-radius: 5px; background: #ff5f1f; color: #fff; }
.cv-es2-it.on { color: #cc4c19; }
.cv-es2-it.on b { font-weight: 700; }
.cv-es2-it.hot { transform: translateX(4px); }
.cv-es2-it .cv-rip { left: 20px; }
.cv-es2-user { flex: none; padding: 12px 14px; border-top: 1px solid #e3e6ec; background: #f8fafd; }
.cv-es2-prof .av, .cv-es2-user .av { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; background: #d9f0fa; color: #005e80; font: 700 11px/1 var(--font-body); }
.cv-es2-prof .av { width: 44px; height: 44px; font-size: 14px; }
.cv-es2-user b { display: block; font: 700 12.5px/1.1 var(--font-body); color: #001738; }
.cv-es2-user small { font: 500 11px/1.4 var(--font-body); color: #5b7090; }
.cv-es2-main { position: relative; flex: 1; min-width: 0; }
.cv-es2-pg { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 14px; padding: 22px; transition: opacity 0.6s ease, transform 0.8s var(--cm); }
.cv-es2-pg h4 { margin: 0; font: 700 22px/1.2 var(--font-body); color: #001738; }
.pg-docs { opacity: 0; transform: translateX(30px); pointer-events: none; }
.cv-es2.is-docs .pg-info { opacity: 0; transform: translateX(-30px); }
.cv-es2.is-docs .pg-docs { opacity: 1; transform: none; transition-delay: 0.15s; }
.cv-es2-prof { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; background: #fff; }
.cv-es2-prof > span:last-child { display: flex; flex-direction: column; gap: 4px; }
.cv-es2-prof small { font: 700 11px/1 var(--font-body); color: #ff5f1f; }
.cv-es2-prof b { font: 700 16px/1.1 var(--font-body); color: #001738; }
.cv-es2-prof i { font: 500 12px/1 var(--font-body); font-style: normal; color: #5b7090; }
.cv-es2-flt em, .cv-es2-tabs { background: #fff; box-shadow: inset 0 0 0 1px #e3e6ec; }
.cv-es2-tabs { display: flex; align-items: center; padding: 5px; border-radius: 11px; }
.cv-es2-tabs span { border-radius: 8px; font: 600 12.5px/1 var(--font-body); color: #3f587f; white-space: nowrap; padding: 8px 10px; }
.cv-es2-tabs span.on { background: #fff1ea; color: #cc4c19; }
.cv-es2-tabs.dark { background: #001738; box-shadow: none; }
.cv-es2-tabs.dark span { color: #fff; }
.cv-es2-tabs.dark span.on { background: #ff5f1f; color: #fff; }
.cv-es2-tabs .ic { display: grid; place-items: center; margin-left: auto; padding: 6px; }
.cv-es2-tabs .ic + .ic { margin-left: 0; }
.cv-es2-tabs .ic svg { width: 15px; height: 15px; }
.cv-es2-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 16px; border-radius: 14px; background: #fff; }
.cv-es2-grid span { gap: 5px; }
.cv-es2-grid small { font: 600 11px/1 var(--font-body); color: #5b7090; }
.cv-es2-flt, .cv-es2-grid b { font: 600 13.5px/1.2 var(--font-body); color: #001738; }
.cv-es2-flt { display: flex; align-items: center; gap: 10px; font: 600 12.5px/1 var(--font-body); }
.cv-es2-flt em { font-style: normal; font-weight: 500; color: #8b9ab2; padding: 8px 12px; min-width: 120px; border-radius: 8px; }
.cv-es2-grid span, .cv-es2-tbl { display: flex; flex-direction: column; }
.cv-es2-tbl { border-radius: 14px; background: #fff; overflow: hidden; }
.cv-es2-th, .cv-es2-tr { display: grid; align-items: center; padding: 0 16px; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.1fr) 64px 32px; column-gap: 14px; }
.cv-es2-th { height: 38px; border-bottom: 1px solid #e3e6ec; font: 700 10px/1 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: #001738; }
.cv-es2-tr { height: 54px; border-top: 1px solid #e3e6ec; opacity: 0; transform: translateY(10px); transition: opacity 0.5s ease, transform 0.7s var(--cm), background-color 0.35s; }
.cv-es2-tr:nth-child(2) { border-top: 0; }
.cv-es2-tr.on { opacity: 1; transform: none; }
.cv-es2-tr.hov { background: #fff9f6; }
.cv-es2-toast, .cv-es2-tr .fn { display: flex; align-items: center; }
.cv-es2-tr .fn { gap: 8px; min-width: 0; overflow: hidden; }
.cv-es2-tr .fn svg { width: 17px; height: 17px; flex: none; color: #ff5f1f; }
.cv-es2-tr .fn b, .cv-es2-tr .sd b { font: 500 13px/1.2 var(--font-body); color: #001738; white-space: nowrap; }
.cv-es2-tr .sd { display: flex; flex-direction: column; gap: 4px; overflow: hidden; }
.cv-es2-tr .sd b { font: 700 12.5px/1 var(--font-body); }
.cv-es2-tr .sd small { font: 500 11.5px/1 var(--font-body); color: #5b7090; white-space: nowrap; overflow: hidden; }
.cv-es2-tr .st { justify-self: start; font: 600 11.5px/1 var(--font-body); padding: 5px 9px; border-radius: 999px; white-space: nowrap; }
.cv-es2-tr .st.t-ok { background: #ddf5e3; color: #0b6b21; }
.cv-es2-tr .dl { position: relative; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: #1a3e6d; transition: background-color 0.35s, color 0.35s, box-shadow 0.35s, transform 0.5s var(--cs); }
.cv-es2-tr .dl svg { width: 16px; height: 16px; }
.cv-es2-tr .dl .dl-ok { display: none; }
.cv-es2-tr.hov .dl { background: #fff; box-shadow: inset 0 0 0 1.5px #ffc9b3; color: #ff5f1f; transform: scale(1.06); }
.cv-es2-tr .dl.busy { background: #ff5f1f; color: #fff; box-shadow: 0 0 0 6px rgba(255, 95, 31, 0.15); transform: scale(0.94); }
.cv-es2-tr .dl.busy .dl-ic svg { animation: cvDsNudge 0.55s ease-in-out infinite; }
.cv-es2-tr .dl.got { background: #0f8529; color: #fff; box-shadow: 0 0 0 6px rgba(15, 133, 41, 0.12); transform: none; }
.cv-es2-tr .dl.got .dl-ic { display: none; }
.cv-es2-tr .dl.got .dl-ok { display: block; animation: cvPop 0.55s var(--cs); }
.cv-es2-toast { position: absolute; left: 22px; right: 22px; bottom: 22px; gap: 12px; padding: 12px 16px; border-radius: 14px; background: #001738; color: #fff; box-shadow: 0 18px 36px rgba(0, 23, 56, 0.28); opacity: 0; transform: translateY(24px) scale(0.96); transition: opacity 0.45s, transform 0.75s var(--cs); pointer-events: none; }
.cv-es2-toast.on { opacity: 1; transform: none; }
.cv-es2-toast > span:last-child { display: flex; flex-direction: column; gap: 4px; }
.cv-es2-toast b { font: 700 14px/1 var(--font-body); }
.cv-es2-toast small { font: 500 12px/1 var(--font-body); color: rgba(255, 255, 255, 0.75); }
.cv-es2-toast .cv-zp-zk { width: 26px; height: 26px; color: #fff; }
.cv-es2-cur { position: absolute; left: 0; top: 0; width: 22px; height: 22px; z-index: 9; pointer-events: none; transform-origin: 0 0; transition: transform 1.1s var(--ce), opacity 0.4s; filter: drop-shadow(0 3px 5px rgba(0, 23, 56, 0.3)); }
.cv-es2-cur.off { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
	.cv-es2 *, .cv-rip, .cv-cin { transition: none !important; animation: none !important; }
	.cv-es2-cur { display: none; }
}