/**
 * Agentic Breach Management dashboard — "Our Products / The Platform" visual.
 *
 * A fully self-contained, animated "Report a Security Breach" console: an AI-agent
 * cursor auto-fills the form, submits, then fires animated flow lines through
 * Evidence Collection → AI Agent triage. Every rule is scoped under `.dpdp-abm` so
 * it cannot leak into — or be overridden by — the rest of the theme. Authored at a
 * fixed 1300px design width and scaled to fit its column by
 * assets/js/agentic-breach-management-dashboard.js (the script is scale-aware so the
 * cursor/flow geometry stays correct). No page-editor / ACF controls.
 */

.dpdp-abm {
	/* Scoped design tokens — never touch the theme's :root vars. */
	--red: #e5484d; --red-2: #d63a3f; --red-soft: #fdecee; --red-line: #f4c9cc;
	--ink: #1c2743; --ink-2: #3a4869; --muted: #98a1b4; --muted-2: #6b7690;
	--line: #e7e9f1; --field: #eef0f6;
	--green: #1a9e54; --green-bg: #e7f6ec;
	--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Inter", sans-serif;

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

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

/* Browser window */
.dpdp-abm .window { width: 100%; background: #fff; border-radius: 16px; overflow: hidden; position: relative; box-shadow: 0 40px 80px -30px rgba(15,23,42,.45), 0 0 0 1px rgba(15,23,42,.05); }
.dpdp-abm .chrome { display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: #f2f3f5; border-bottom: 1px solid #e6e8eb; }
.dpdp-abm .dots { display: flex; gap: 8px; } .dpdp-abm .dots span { width: 12px; height: 12px; border-radius: 50%; }
.dpdp-abm .dots .r { background: #ff5f57; } .dpdp-abm .dots .y { background: #febc2e; } .dpdp-abm .dots .g { background: #28c840; }
.dpdp-abm .nav-arrows { display: flex; gap: 16px; color: #b3b8bd; } .dpdp-abm .nav-arrows svg { width: 16px; height: 16px; }
.dpdp-abm .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-abm .urlbar svg { width: 13px; height: 13px; color: #9aa0a6; }
.dpdp-abm .urlbar b { font-weight: 400; color: #202124; } .dpdp-abm .urlbar .path { color: #5f6368; }
.dpdp-abm .chrome-ico { display: flex; gap: 14px; color: #9aa0a6; } .dpdp-abm .chrome-ico svg { width: 18px; height: 18px; }

/* Rose content area */
.dpdp-abm .content { background: linear-gradient(155deg, #fdeef1 0%, #fbe6ea 55%, #f8e0e6 100%); padding: 34px; }
.dpdp-abm .stage { position: relative; display: flex; gap: 8px; align-items: stretch; }

/* Form card */
.dpdp-abm .card { flex: 1; background: #fff; border-radius: 26px; padding: 40px 44px 44px; box-shadow: 0 34px 80px -40px rgba(120,40,50,.4), 0 0 0 1px rgba(120,40,50,.04); }
.dpdp-abm .top { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 34px; }
.dpdp-abm .top .warn { width: 62px; height: 62px; border-radius: 16px; background: var(--red-soft); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.dpdp-abm .top .warn svg { width: 32px; height: 32px; color: var(--red); }
.dpdp-abm .top h1 { font-size: 29px; font-weight: 800; letter-spacing: -.02em; color: #182444; }
.dpdp-abm .top p { font-size: 16px; color: var(--muted-2); margin-top: 6px; font-weight: 500; }

.dpdp-abm .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 34px; }
.dpdp-abm .fld label { display: block; font-size: 16.5px; font-weight: 700; color: #25324f; margin-bottom: 11px; }
.dpdp-abm .fld label .i { display: inline-flex; vertical-align: -3px; margin-left: 5px; color: #b7bfce; }
.dpdp-abm .fld label .i svg { width: 16px; height: 16px; }
.dpdp-abm .inp { position: relative; }
.dpdp-abm .inp input { width: 100%; height: 56px; border: 1.5px solid #e6e9f1; border-radius: 13px; background: #fff; padding: 0 16px; font-family: var(--font); font-size: 16px; color: #1e2a44; transition: .18s; }
.dpdp-abm .inp input::placeholder { color: #9aa3b4; }
.dpdp-abm .inp input:focus, .dpdp-abm .inp.focused input { outline: none; border-color: var(--red); box-shadow: 0 0 0 4px rgba(229,72,77,.12); }
.dpdp-abm .inp .lead { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: #8b94a6; pointer-events: none; }
.dpdp-abm .inp .lead svg { width: 20px; height: 20px; }
.dpdp-abm .inp.has-lead input { padding-left: 46px; }
.dpdp-abm .inp .trail { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); color: #8b94a6; pointer-events: none; }
.dpdp-abm .inp .trail svg { width: 20px; height: 20px; }
.dpdp-abm .help { font-size: 14px; color: var(--muted); margin-top: 9px; line-height: 1.5; font-weight: 500; }

/* Radios */
.dpdp-abm .radios { display: flex; gap: 34px; align-items: center; height: 56px; }
.dpdp-abm .rad { display: flex; align-items: center; gap: 12px; cursor: pointer; font-size: 18px; font-weight: 600; color: #25324f; }
.dpdp-abm .rad .dot { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #cbd2e0; position: relative; transition: .15s; }
.dpdp-abm .rad.sel .dot { border-color: var(--red); }
.dpdp-abm .rad.sel .dot::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--red); }

.dpdp-abm .send-wrap { display: flex; justify-content: flex-end; margin-top: 24px; }
.dpdp-abm .send { display: inline-flex; align-items: center; gap: 12px; background: var(--red); color: #fff; border: none; border-radius: 14px; padding: 17px 30px; font-size: 18px; font-weight: 700; font-family: var(--font); cursor: pointer; box-shadow: 0 16px 30px -12px rgba(229,72,77,.7); transition: .16s; }
.dpdp-abm .send:hover { background: var(--red-2); }
.dpdp-abm .send.press { transform: scale(.96); }
.dpdp-abm .send svg { width: 22px; height: 22px; }

/* Right rail */
.dpdp-abm .rail { width: 236px; flex-shrink: 0; position: relative; display: flex; flex-direction: column; align-items: center; }
.dpdp-abm .aicard { background: #fff; border-radius: 22px; padding: 22px 20px 20px; width: 100%; text-align: center; margin-top: 34px; box-shadow: 0 24px 50px -30px rgba(120,40,50,.35), 0 0 0 1px rgba(120,40,50,.04); transition: .3s; }
.dpdp-abm .aicard.on { box-shadow: 0 26px 54px -22px rgba(229,72,77,.55), 0 0 0 2px rgba(229,72,77,.25); }
.dpdp-abm .robot { width: 118px; height: 118px; border-radius: 50%; margin: 0 auto 14px; background: radial-gradient(circle at 50% 40%, #fbe0e4, #f7d0d6); display: flex; align-items: center; justify-content: center; }
.dpdp-abm .robot svg { width: 82px; height: 82px; }
.dpdp-abm .aicard b { font-size: 23px; font-weight: 800; color: #1a2745; letter-spacing: -.01em; }
.dpdp-abm .aicard .sub { font-size: 16px; color: var(--muted-2); margin-top: 3px; font-weight: 500; }
.dpdp-abm .status { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; background: var(--green-bg); color: var(--green); border-radius: 22px; padding: 8px 15px; font-size: 16px; font-weight: 700; transition: .25s; }
.dpdp-abm .status svg { width: 18px; height: 18px; }
.dpdp-abm .status.busy { background: #fff3e0; color: #e08a00; }

.dpdp-abm .node { position: relative; margin-top: 96px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.dpdp-abm .nbox { width: 74px; height: 66px; border-radius: 16px; background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 16px 34px -18px rgba(120,40,50,.4), 0 0 0 1px rgba(120,40,50,.04); transition: .3s; }
.dpdp-abm .nbox svg { width: 34px; height: 34px; color: var(--red); }
.dpdp-abm .node.on .nbox { transform: translateY(-3px) scale(1.06); box-shadow: 0 22px 40px -16px rgba(229,72,77,.6), 0 0 0 2px rgba(229,72,77,.3); }
.dpdp-abm .node .nlabel { font-size: 16px; font-weight: 700; color: #2b3852; text-align: center; line-height: 1.3; }

/* Flow SVG overlay */
.dpdp-abm .flow { position: absolute; inset: 0; pointer-events: none; z-index: 4; overflow: visible; }
.dpdp-abm .flow path { fill: none; stroke: #efb7bc; stroke-width: 2.2; stroke-dasharray: 2 8; stroke-linecap: round; transition: stroke .3s, stroke-width .3s; }
.dpdp-abm .flow path.on { stroke: var(--red); stroke-width: 2.6; animation: dpdpabm-flow 1s linear infinite; }
@keyframes dpdpabm-flow { to { stroke-dashoffset: -20; } }

/* Fake cursor */
.dpdp-abm .cursor { position: absolute; left: 0; top: 0; width: 26px; height: 26px; z-index: 20; pointer-events: none; transform: translate(40px, 40px); transition: transform .85s cubic-bezier(.45,.05,.2,1); filter: drop-shadow(0 3px 5px rgba(0,0,0,.28)); }
.dpdp-abm .cursor svg { width: 100%; height: 100%; }