/**
 * PII Discovery dashboard — "Our Products / The Platform" visual for PII Discovery AI Agent.
 *
 * A fully self-contained, animated product dashboard (auto-cycling KPI tabs →
 * PII / Compliance / Issues screens). Every rule is scoped under `.dpdp-pdd` so
 * it cannot leak into — or be overridden by — the rest of the theme. Authored at
 * a fixed design width (1460px) and scaled to fit its column by
 * assets/js/pii-discovery-dashboard.js. No page-editor / ACF controls.
 */

.dpdp-pdd {
	/* Scoped design tokens — never touch the theme's :root vars. */
	--pdd-blue: #2f6bff; --pdd-blue-deep: #1d3faf;
	--pdd-ink: #1e293b; --pdd-ink-2: #334155; --pdd-muted: #94a3b8; --pdd-muted-2: #64748b;
	--pdd-line: #eceef4; --pdd-line-2: #f1f2f7;
	--pdd-green: #1a9e54; --pdd-red: #e5484d; --pdd-amber: #e08a00;
	--pdd-card: #fff;
	--pdd-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Inter", sans-serif;

	position: relative;
	width: 100%;
	margin: 0 auto;
	overflow: hidden;
	aspect-ratio: 1460 / 1180; /* reserves space before JS sets the exact height */
	color: var(--pdd-ink);
	font-family: var(--pdd-font);
	text-align: left;
}
.dpdp-pdd * { box-sizing: border-box; margin: 0; padding: 0; }

/* Fixed-width design stage, scaled to the container by JS. */
.dpdp-pdd-stage {
	position: absolute;
	top: 0;
	left: 0;
	width: 1460px;
	transform-origin: top left;
	will-change: transform;
}

/* Browser window */
.dpdp-pdd .window {
	width: 100%;
	background: #fff;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 40px 80px -30px rgba(15,23,42,.45), 0 0 0 1px rgba(15,23,42,.05);
}
.dpdp-pdd .chrome { display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: #f2f3f5; border-bottom: 1px solid #e6e8eb; }
.dpdp-pdd .dots { display: flex; gap: 8px; } .dpdp-pdd .dots span { width: 12px; height: 12px; border-radius: 50%; display: block; }
.dpdp-pdd .dots .r { background: #ff5f57; } .dpdp-pdd .dots .y { background: #febc2e; } .dpdp-pdd .dots .g { background: #28c840; }
.dpdp-pdd .nav-arrows { display: flex; gap: 16px; color: #b3b8bd; } .dpdp-pdd .nav-arrows svg { width: 16px; height: 16px; }
.dpdp-pdd .urlbar {
	flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; background: #fff; border-radius: 8px;
	padding: 7px 14px; color: #3c4043; font-size: 13px; box-shadow: inset 0 0 0 1px #e6e8eb; max-width: 560px; margin: 0 auto;
}
.dpdp-pdd .urlbar svg { width: 13px; height: 13px; color: #9aa0a6; }
.dpdp-pdd .urlbar b { font-weight: 400; color: #202124; } .dpdp-pdd .urlbar .path { color: #5f6368; }
.dpdp-pdd .chrome-ico { display: flex; gap: 14px; color: #9aa0a6; } .dpdp-pdd .chrome-ico svg { width: 18px; height: 18px; }
.dpdp-pdd .content { background: linear-gradient(135deg, #e8ebf6, #eef0f8); padding: 30px 26px; }

.dpdp-pdd .wrap { width: 100%; max-width: 1380px; margin: 0 auto; }

.dpdp-pdd .card { background: var(--pdd-card); border-radius: 20px; box-shadow: 0 20px 44px -26px rgba(20,30,70,.28), 0 0 0 1px rgba(20,30,70,.04); }
.dpdp-pdd .arrow { width: 34px; height: 34px; border-radius: 11px; color: #8ea0c0; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: .16s; flex-shrink: 0; }
.dpdp-pdd .arrow:hover { background: #f1f5ff; color: var(--pdd-blue); }
.dpdp-pdd .arrow svg { width: 19px; height: 19px; }
.dpdp-pdd .sec-head { display: flex; align-items: center; gap: 13px; margin-bottom: 20px; }
.dpdp-pdd .sec-head .ic { width: 34px; height: 34px; color: #3a4a68; flex-shrink: 0; }
.dpdp-pdd .sec-head .ic svg { width: 100%; height: 100%; }
.dpdp-pdd .sec-head h3 { font-size: 21px; font-weight: 800; letter-spacing: -.01em; color: #101a30; flex: 1; }

/* ---------- Tabs (top KPI cards) ---------- */
.dpdp-pdd .tabs { display: grid; grid-template-columns: 1.18fr 1fr 1fr; gap: 22px; margin-bottom: 22px; }
.dpdp-pdd .tab {
	position: relative; border-radius: 20px; padding: 26px 28px; cursor: pointer; overflow: hidden;
	background: var(--pdd-card); box-shadow: 0 14px 34px -24px rgba(20,30,70,.3), 0 0 0 1px rgba(20,30,70,.05);
	transition: transform .2s ease, box-shadow .2s ease;
}
.dpdp-pdd .tab:hover { transform: translateY(-3px); }
.dpdp-pdd .tab .top { display: flex; align-items: center; gap: 13px; margin-bottom: 22px; }
.dpdp-pdd .tab .tic { width: 30px; height: 30px; color: #3a4a68; flex-shrink: 0; }
.dpdp-pdd .tab .tic svg { width: 100%; height: 100%; }
.dpdp-pdd .tab .tlbl { font-size: 18px; font-weight: 700; color: #20304f; line-height: 1.25; flex: 1; }
.dpdp-pdd .tab .tarrow { color: #9fb0cd; }
.dpdp-pdd .tab .tarrow svg { width: 19px; height: 19px; }
.dpdp-pdd .tab .val { display: flex; align-items: center; gap: 16px; }
.dpdp-pdd .tab .num { font-size: 46px; font-weight: 800; letter-spacing: -.02em; line-height: 1; color: #0d1730; }
.dpdp-pdd .badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 12px; font-size: 15px; font-weight: 700; }
.dpdp-pdd .badge svg { width: 16px; height: 16px; }
.dpdp-pdd .badge-sens { background: #eaf0ff; color: #3455c8; }
.dpdp-pdd .badge-good { background: #e9f7ee; color: #1a9e54; }

/* active tab = blue gradient */
.dpdp-pdd .tab.active {
	background: linear-gradient(135deg, #3a78ff 0%, #255fe6 55%, #1f4fd0 100%);
	box-shadow: 0 22px 46px -20px rgba(37,95,230,.7);
}
.dpdp-pdd .tab.active::after {
	content: ""; position: absolute; inset: 0; opacity: .5; pointer-events: none;
	background-image: radial-gradient(circle at 78% 22%, rgba(255,255,255,.16), transparent 42%),
		repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 26px),
		repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 26px);
}
.dpdp-pdd .tab.active .tic, .dpdp-pdd .tab.active .tlbl, .dpdp-pdd .tab.active .num, .dpdp-pdd .tab.active .tarrow { color: #fff; position: relative; z-index: 1; }
.dpdp-pdd .tab.active .badge-sens { background: rgba(255,255,255,.16); color: #fff; position: relative; z-index: 1; }

/* ---------- Screens ---------- */
/* Equal min-height across all three screens so the widget's height stays
   constant as the tabs auto-cycle (prevents the page row from reflowing). */
.dpdp-pdd .screen { display: none; animation: dpdppdd-fade .45s ease; min-height: 840px; }
.dpdp-pdd .screen.on { display: block; }
@keyframes dpdppdd-fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.dpdp-pdd .grid-2 { display: grid; grid-template-columns: 1.05fr 1fr; gap: 22px; margin-bottom: 22px; }

/* Data sources */
.dpdp-pdd .pad { padding: 26px 28px; }
.dpdp-pdd .src-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.dpdp-pdd .src { border: 1px solid #e9edf5; border-radius: 15px; padding: 20px 16px; text-align: center; transition: .18s; }
.dpdp-pdd .src:hover { border-color: #c9dbff; box-shadow: 0 10px 24px -16px rgba(47,107,255,.5); transform: translateY(-2px); }
.dpdp-pdd .src .si { width: 34px; height: 34px; color: var(--pdd-blue); margin: 0 auto 14px; }
.dpdp-pdd .src .si svg { width: 100%; height: 100%; }
.dpdp-pdd .src .sn { font-size: 30px; font-weight: 800; color: #0d1730; letter-spacing: -.02em; line-height: 1; }
.dpdp-pdd .src .st { font-size: 14.5px; color: var(--pdd-muted-2); font-weight: 500; margin-top: 6px; }

.dpdp-pdd .divide { height: 1px; background: var(--pdd-line); margin: 26px 0; }
.dpdp-pdd .risk-lbl { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.dpdp-pdd .risk-lbl h4 { font-size: 18px; font-weight: 800; color: #101a30; }
.dpdp-pdd .risk-lbl svg { width: 18px; height: 18px; color: #9fb0cd; }
.dpdp-pdd .risk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.dpdp-pdd .risk { border-radius: 14px; padding: 18px 18px 16px; }
.dpdp-pdd .risk .rt { font-size: 15.5px; font-weight: 700; margin-bottom: 8px; }
.dpdp-pdd .risk .rn { font-size: 34px; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.dpdp-pdd .risk .rd { font-size: 13.5px; font-weight: 500; margin-top: 10px; }
.dpdp-pdd .r-high { background: #fdf1f1; border: 1px solid #f6d9d9; } .dpdp-pdd .r-high .rt, .dpdp-pdd .r-high .rn { color: #e5484d; } .dpdp-pdd .r-high .rd { color: #c76b6b; }
.dpdp-pdd .r-med { background: #fff8ea; border: 1px solid #f6e6c0; } .dpdp-pdd .r-med .rt, .dpdp-pdd .r-med .rn { color: #e08a00; } .dpdp-pdd .r-med .rd { color: #bd8a2c; }
.dpdp-pdd .r-low { background: #eef4ff; border: 1px solid #d5e2fb; } .dpdp-pdd .r-low .rt, .dpdp-pdd .r-low .rn { color: #2f6bff; } .dpdp-pdd .r-low .rd { color: #5f7bb5; }

/* Data everywhere */
.dpdp-pdd .chips { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 6px; }
.dpdp-pdd .geo {
	display: inline-flex; align-items: center; gap: 10px; background: #fff; border: 1px solid #e4e9f2; border-radius: 12px;
	padding: 11px 16px; font-size: 15.5px; font-weight: 600; color: #26344f; cursor: pointer; transition: .16s;
}
.dpdp-pdd .geo:hover { border-color: #bcd2ff; background: #f6f9ff; }
.dpdp-pdd .geo .fl { font-size: 19px; line-height: 1; }
.dpdp-pdd .geo.more { color: var(--pdd-blue); border-color: #cfe0ff; }
.dpdp-pdd .map { position: relative; margin-top: 22px; height: 290px; border-radius: 14px; overflow: hidden; background: radial-gradient(circle at 30% 40%, #f2f6ff, #fbfcff); }
.dpdp-pdd .map svg { width: 100%; height: 100%; display: block; }
.dpdp-pdd .node { fill: #2f6bff; }
.dpdp-pdd .ping { fill: #2f6bff; opacity: .5; animation: dpdppdd-ping 2.6s ease-out infinite; }
@keyframes dpdppdd-ping { 0% { r: 4; opacity: .55; } 70% { r: 16; opacity: 0; } 100% { opacity: 0; } }
.dpdp-pdd .flow { fill: none; stroke: #2f6bff; stroke-width: 1.6; stroke-dasharray: 5 6; opacity: .5; stroke-dashoffset: 0; animation: dpdppdd-dash 3.2s linear infinite; }
@keyframes dpdppdd-dash { to { stroke-dashoffset: -110; } }

/* PII Types */
.dpdp-pdd .types { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.dpdp-pdd .type { border: 1px solid #e9edf5; border-radius: 15px; padding: 20px 18px; display: flex; align-items: center; justify-content: space-between; gap: 8px; transition: .18s; }
.dpdp-pdd .type:hover { border-color: #c9dbff; transform: translateY(-2px); box-shadow: 0 10px 24px -16px rgba(47,107,255,.5); }
.dpdp-pdd .type.hi { background: #eef4ff; border-color: #cfe0ff; }
.dpdp-pdd .type .tn { font-size: 27px; font-weight: 800; color: #0d1730; letter-spacing: -.02em; line-height: 1; }
.dpdp-pdd .type.hi .tn { color: var(--pdd-blue); }
.dpdp-pdd .type .tt { font-size: 13.5px; color: var(--pdd-muted-2); font-weight: 500; margin-top: 6px; }
.dpdp-pdd .type .tico { width: 34px; height: 26px; color: #8aa0c4; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.dpdp-pdd .type .tico svg { width: 100%; height: 100%; }
.dpdp-pdd .type .upi { font-weight: 900; font-size: 15px; font-style: italic; color: #f39c12; letter-spacing: -1px; }
.dpdp-pdd .feat { display: flex; gap: 20px; margin-top: 20px; }
.dpdp-pdd .fbox { flex: 1; display: flex; align-items: center; gap: 16px; border: 1px solid #eef1f7; border-radius: 15px; padding: 18px 22px; background: #fcfdff; }
.dpdp-pdd .fbox .fi { width: 46px; height: 46px; border-radius: 12px; background: #eaf1ff; color: var(--pdd-blue); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.dpdp-pdd .fbox .fi svg { width: 24px; height: 24px; }
.dpdp-pdd .fbox h5 { font-size: 16.5px; font-weight: 800; color: #111c33; }
.dpdp-pdd .fbox p { font-size: 13.5px; color: var(--pdd-muted-2); margin-top: 4px; font-weight: 500; }

/* ---------- Compliance screen ---------- */
.dpdp-pdd .gauge-wrap { display: flex; align-items: center; gap: 40px; flex-wrap: wrap; }
.dpdp-pdd .gauge { position: relative; width: 210px; height: 210px; flex-shrink: 0; }
.dpdp-pdd .gauge svg { transform: rotate(-90deg); }
.dpdp-pdd .gauge .track { fill: none; stroke: #eef1f7; stroke-width: 16; }
.dpdp-pdd .gauge .prog { fill: none; stroke: url(#pdd-gg); stroke-width: 16; stroke-linecap: round; stroke-dasharray: 565; stroke-dashoffset: 565; transition: stroke-dashoffset 1.4s cubic-bezier(.4,0,.2,1); }
.dpdp-pdd .gauge .gc { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.dpdp-pdd .gauge .gp { font-size: 52px; font-weight: 800; color: #0d1730; letter-spacing: -.02em; line-height: 1; }
.dpdp-pdd .gauge .gs { font-size: 14px; color: var(--pdd-muted-2); font-weight: 600; margin-top: 4px; }
.dpdp-pdd .gauge-info { flex: 1; min-width: 240px; }
.dpdp-pdd .gauge-info h4 { font-size: 22px; font-weight: 800; color: #101a30; margin-bottom: 8px; }
.dpdp-pdd .gauge-info p { font-size: 15px; color: var(--pdd-muted-2); line-height: 1.6; font-weight: 500; }
.dpdp-pdd .mini-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 22px; }
.dpdp-pdd .ms { background: #f7f9fd; border: 1px solid #eef1f7; border-radius: 13px; padding: 15px 16px; }
.dpdp-pdd .ms .mn { font-size: 26px; font-weight: 800; color: #0d1730; letter-spacing: -.02em; }
.dpdp-pdd .ms .ml { font-size: 13px; color: var(--pdd-muted-2); font-weight: 600; margin-top: 4px; }

.dpdp-pdd .bars { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 34px; }
.dpdp-pdd .bar-row .bh { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 9px; }
.dpdp-pdd .bar-row .bl { font-size: 15.5px; font-weight: 700; color: #22314e; }
.dpdp-pdd .bar-row .bv { font-size: 15.5px; font-weight: 800; color: var(--pdd-blue); }
.dpdp-pdd .track2 { height: 11px; background: #eef1f7; border-radius: 8px; overflow: hidden; }
.dpdp-pdd .fill2 { height: 100%; border-radius: 8px; width: 0; transition: width 1.3s cubic-bezier(.4,0,.2,1); }
.dpdp-pdd .g-blue { background: linear-gradient(90deg, #3a78ff, #255fe6); }
.dpdp-pdd .g-green { background: linear-gradient(90deg, #25b56b, #1a9e54); }
.dpdp-pdd .g-amber { background: linear-gradient(90deg, #ffb020, #e08a00); }
.dpdp-pdd .g-red { background: linear-gradient(90deg, #f2686c, #e5484d); }

/* ---------- Issues screen ---------- */
.dpdp-pdd .sev-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.dpdp-pdd .sev { border-radius: 16px; padding: 22px 22px; position: relative; overflow: hidden; }
.dpdp-pdd .sev .sn { font-size: 40px; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.dpdp-pdd .sev .stt { font-size: 16px; font-weight: 700; margin-top: 10px; }
.dpdp-pdd .sev .sd { font-size: 13px; font-weight: 500; margin-top: 5px; opacity: .85; }
.dpdp-pdd .sev .sbar { position: absolute; left: 0; bottom: 0; height: 5px; width: 100%; }
.dpdp-pdd .s-crit { background: #fdf1f1; border: 1px solid #f6d9d9; } .dpdp-pdd .s-crit .sn, .dpdp-pdd .s-crit .stt { color: #c81e1e; } .dpdp-pdd .s-crit .sd { color: #b05a5a; } .dpdp-pdd .s-crit .sbar { background: #c81e1e; }
.dpdp-pdd .s-high { background: #fef4ed; border: 1px solid #f7ddc9; } .dpdp-pdd .s-high .sn, .dpdp-pdd .s-high .stt { color: #d9691a; } .dpdp-pdd .s-high .sd { color: #bd7d47; } .dpdp-pdd .s-high .sbar { background: #d9691a; }
.dpdp-pdd .s-med { background: #fff8ea; border: 1px solid #f6e6c0; } .dpdp-pdd .s-med .sn, .dpdp-pdd .s-med .stt { color: #e08a00; } .dpdp-pdd .s-med .sd { color: #bd8a2c; } .dpdp-pdd .s-med .sbar { background: #e08a00; }
.dpdp-pdd .s-low { background: #eef4ff; border: 1px solid #d5e2fb; } .dpdp-pdd .s-low .sn, .dpdp-pdd .s-low .stt { color: #2f6bff; } .dpdp-pdd .s-low .sd { color: #5f7bb5; } .dpdp-pdd .s-low .sbar { background: #2f6bff; }

.dpdp-pdd .issue-list { display: flex; flex-direction: column; gap: 0; }
.dpdp-pdd .irow { display: flex; align-items: center; gap: 16px; padding: 18px 4px; border-bottom: 1px solid var(--pdd-line-2); }
.dpdp-pdd .irow:last-child { border-bottom: none; }
.dpdp-pdd .irow .idot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
.dpdp-pdd .irow .inm { font-size: 15.5px; font-weight: 600; color: #22314e; flex: 1; }
.dpdp-pdd .irow .ibar { width: 180px; height: 9px; background: #eef1f7; border-radius: 6px; overflow: hidden; }
.dpdp-pdd .irow .ibar i { display: block; height: 100%; width: 0; border-radius: 6px; transition: width 1.2s cubic-bezier(.4,0,.2,1); }
.dpdp-pdd .irow .ic { font-size: 16px; font-weight: 800; color: #0d1730; width: 34px; text-align: right; }

.dpdp-pdd .res-wrap { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; }
.dpdp-pdd .donut { position: relative; width: 180px; height: 180px; flex-shrink: 0; }
.dpdp-pdd .donut svg { transform: rotate(-90deg); }
.dpdp-pdd .donut .dc { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.dpdp-pdd .donut .dn { font-size: 38px; font-weight: 800; color: #0d1730; letter-spacing: -.02em; }
.dpdp-pdd .donut .dl { font-size: 13px; color: var(--pdd-muted-2); font-weight: 600; }
.dpdp-pdd .legend { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 14px; }
.dpdp-pdd .leg { display: flex; align-items: center; gap: 12px; }
.dpdp-pdd .leg .ld { width: 13px; height: 13px; border-radius: 4px; flex-shrink: 0; }
.dpdp-pdd .leg .lt { font-size: 15.5px; font-weight: 600; color: #22314e; flex: 1; }
.dpdp-pdd .leg .ln { font-size: 16px; font-weight: 800; color: #0d1730; }