@charset "UTF-8";

/* =====================================================================
   PRODUCTION MAP  (js/production-map.js draws it; see the notes there)
   Google Cloud Summits "production process map": an inline-SVG map the
   camera travels across. Used on google-summits.html in
   - "Redesigning the way the work worked" (50/50 image container,
     data-production-map="pipeline")
   - the full-width 20:8 band after "From identity to production system"
     (data-production-map="system").

   Theme: the panel is "theme-media" (Google light #F1F3F4 / dark
   #202124, like the other Summits panels); everything drawn on it uses
   the --pm-* variables below, so the map has its own Google light and
   dark versions. Brand colours (the KV, Google blue/red/yellow/green)
   never change. The step rail is site UI, so it uses the site tokens.

   Lengths inside the SVG are world units (a doc is 1200 x 1200), not
   screen px: the camera scales them.
   ===================================================================== */

.pmap {
	/* Drafting style (user review 2026-11-11: in line with "The result" and
	   the Security KV logo build): the docs are drawn straight on the panel
	   as 1px line work, on a block-out grid; asset frames are the paper. */
	--pm-doc: #F1F3F4;      /* the panel's own colour: masks lines behind chips and labels */
	--pm-frame: #FFFFFF;    /* asset frames (the paper) */
	--pm-card: #F8F9FA;     /* spec cards, panels */
	--pm-line: #DADCE0;     /* card strokes, rules, placeholder bars */
	--pm-hair: #BDC1C6;     /* construction lines, block-out grid, guide circles (= --sr-line) */
	--pm-ink: #5F6368;      /* dashed strokes, ticks, dimension lines, icons, mono text (= --sr-ink) */
	--pm-text: #202124;     /* title lockups, logo */
	--pm-muted: #5F6368;
	--pm-slot: #E8EAED;     /* partner-logo slot */
	--pm-film: #E8EAED;     /* film frames */
	--pm-blue: #4285F4;
	--pm-red: #EA4335;
	--pm-yellow: #FBBC04;
	--pm-green: #34A853;
	position: relative;
}

html[data-theme="dark"] .pmap {
	--pm-doc: #202124;
	--pm-frame: #2D2E31;
	--pm-card: #35363A;
	--pm-line: #5F6368;
	--pm-hair: #5F6368;
	--pm-ink: #9AA0A6;
	--pm-text: #E8EAED;
	--pm-muted: #9AA0A6;
	--pm-slot: #3C4043;
	--pm-film: #17181A;
}

.pmap__svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	z-index: 0;
}

.pmap__world {
	transition: opacity 0.5s ease;
}

/* end of the loop: fade out, rewind, fade in */
.pmap--cut .pmap__world {
	opacity: 0;
}

.pmap--cut .a,
.pmap--cut .a-draw {
	transition: none !important;
}

/* Stacked layouts: the 16:9 (50/50) and 20:8 (full-width) containers get
   too shallow for the map, so it takes a square instead (same idea as
   the animated 20:8 band). Breakpoint classes come from js/ui-prefs.js;
   the @media copies are the no-JS fallback. */
html.bp-max-1024 .split-layout-media.pmap,
html.bp-max-1080 .full-width-image--20-8.pmap {
	aspect-ratio: 1 / 1;
}

@media (max-width: 1024px) {
	html:not(.dfui) .split-layout-media.pmap {
		aspect-ratio: 1 / 1;
	}
}

@media (max-width: 1080px) {
	html:not(.dfui) .full-width-image--20-8.pmap {
		aspect-ratio: 1 / 1;
	}
}

/* ---------- drawing styles ---------- */
/* All line work is 1px on screen whatever the camera's zoom (non-scaling
   strokes), dashes are the site's 4/4 module-divider dash. */
.pmap .pm-doc,
.pmap .pm-dash,
.pmap .pm-tick,
.pmap .pm-mini,
.pmap .pm-card,
.pmap .pm-rule,
.pmap .pm-guide,
.pmap .pm-red,
.pmap .pm-tint,
.pmap .pm-lockbox,
.pmap .pm-head,
.pmap .pm-badge-bg,
.pmap .pm-st-bg,
.pmap .pm-cta-line,
.pmap .pm-hair,
.pmap .pm-inkline {
	vector-effect: non-scaling-stroke;
	stroke-width: 1 !important;
}

/* a doc: an unfilled sheet outline, so the block-out grid runs under its artwork */
.pmap .pm-doc {
	fill: none;
	stroke: var(--pm-ink);
	stroke-dasharray: 4 4;
}

/* block-out grid (every doc's edges and centre lines carried across the
   map), corner guide circles, dimension lines, mono call-outs */
.pmap .pm-hair { fill: none; stroke: var(--pm-hair); }
.pmap .pm-hair--mid { stroke-dasharray: 2 6; }
.pmap .pm-mono--s { font-size: 22px; }
.pmap .pm-inkline { fill: none; stroke: var(--pm-ink); }
.pmap .pm-mono {
	font-family: Consolas, "Courier New", monospace;
	font-size: 30px;
	letter-spacing: 0.08em;
	fill: var(--pm-ink);
}

.pmap .pm-doc-fill { fill: var(--pm-doc); }

/* Illustrations (Print, Venue fit-out; user review 2026-11-12, after the
   line drawings on the Figma feedback page): objects are ink line on
   paper, three tones for the three faces of anything drawn in projection;
   the hall is the lighter construction line (no figures: user review); only the
   Summits graphics are in colour (fills set inline). */
.pmap .pm-ill,
.pmap .pm-ext {
	vector-effect: non-scaling-stroke;
	stroke-width: 1;
	stroke-linejoin: round;
}

.pmap .pm-ill { fill: var(--pm-frame); stroke: var(--pm-ink); }
.pmap .pm-ill--2 { fill: var(--pm-card); }
.pmap .pm-ill--3 { fill: var(--pm-doc); }
.pmap .pm-ext { stroke: var(--pm-ink); }   /* extruded portal forms: fills inline */

/* Architectural / CAD drawing kit (user review 2026-11-15: "less is more", technical
   and architectural drafting fused with CAD; Venue fit-out first). Objects are 1px
   ink outlines on the panel's own colour; brand colour only as thin set-out lines
   (stroke set inline); dash-dot = grid and centre lines; dashed = hidden lines. */
.pmap .pm-paper,
.pmap .pm-cl,
.pmap .pm-dd,
.pmap .pm-hid,
.pmap .pm-hatch,
.pmap .pm-hid path,
.pmap .pm-hid circle {
	vector-effect: non-scaling-stroke;
	stroke-width: 1;
	stroke-linejoin: round;
}
.pmap .pm-paper { fill: var(--pm-doc); stroke: var(--pm-ink); }
/* the radial KV drawn as line work: panel fill, a 1px line in each shape's own colour (stroke set inline) */
.pmap .pm-kvl { fill: var(--pm-doc); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.pmap .pm-cl { fill: none; }
.pmap .pm-dd { fill: none; stroke: var(--pm-hair); stroke-dasharray: 16 4 2 4; }
.pmap .pm-hid { fill: none; stroke: var(--pm-hair); stroke-dasharray: 4 4; }
.pmap .pm-hatch { fill: none; stroke: var(--pm-hair); }
.pmap .pm-mono--xs { font-size: 18px; }
.pmap .pm-bubble { fill: var(--pm-doc); stroke: var(--pm-ink); vector-effect: non-scaling-stroke; stroke-width: 1; }
.pmap .pm-arc { fill: none; }
.pmap .pm-sign {
	font-family: "Nunito Sans", sans-serif;
	font-weight: 600;
	font-size: 30px;
	letter-spacing: -0.01em;
	fill: var(--pm-text);
}

.pmap .pm-dash {
	fill: none;
	stroke: var(--pm-ink);
	stroke-dasharray: 4 4;
}

.pmap .pm-dash.pm-doc-fill,
.pmap .pm-dash.pm-badge-bg { fill: var(--pm-doc); }

.pmap .pm-dash--fine {
	stroke: var(--pm-hair);
	stroke-dasharray: 2 4;
}

.pmap .pm-tick {
	fill: none;
	stroke: var(--pm-ink);
	stroke-width: 3;
}

.pmap .pm-frame { fill: var(--pm-frame); }
.pmap .pm-film { fill: var(--pm-film); }
.pmap .pm-slot { fill: var(--pm-slot); }

.pmap .pm-mini {
	stroke: var(--pm-line);
	stroke-width: 1.5;
}

.pmap .pm-card {
	fill: var(--pm-card);
	stroke: var(--pm-line);
	stroke-width: 2;
}

.pmap .pm-card.pm-doc-fill { fill: var(--pm-doc); }

.pmap .pm-rule {
	fill: none;
	stroke: var(--pm-line);
	stroke-width: 2;
}

.pmap .pm-guide {
	fill: none;
	stroke: var(--pm-line);
	stroke-width: 2.5;
}

.pmap .pm-red {
	fill: none;
	stroke: var(--pm-red);
	stroke-width: 2.5;
}

.pmap .pm-curve {
	fill: none;
	stroke: var(--pm-blue);
	stroke-width: 8;
	stroke-linecap: round;
}

.pmap .pm-bar { fill: var(--pm-line); }
.pmap .pm-bar--ink { fill: var(--pm-muted); }
.pmap .pm-ico { color: var(--pm-ink); }
.pmap .pm-ico--ghost { color: var(--pm-line); }
.pmap .pm-ico--blue { color: var(--pm-blue); }
.pmap .pm-ico--green { color: var(--pm-green); }
.pmap .pm-ico--red { color: var(--pm-red); }
.pmap .pm-ico--yellow { color: var(--pm-yellow); }

.pmap .pm-glyph {
	fill: var(--pm-text);
	font-family: system-ui, -apple-system, "Segoe UI", "Noto Sans", sans-serif;
	font-weight: 500;
}

.pmap .pm-key { fill: var(--pm-ink); }
.pmap .pm-okdot { fill: #05B505; stroke: var(--pm-doc); stroke-width: 3; }

.pmap .pm-head {
	fill: none;
	stroke: var(--pm-ink);
	stroke-width: 4;
}

.pmap .pm-head-cap { fill: var(--pm-ink); }

/* step dots in a doc header: 1px rings, no solid circles (user review 2026-11-15);
   done = ink, to come = hairline, current = blue with a guide ring round it */
.pmap .pm-dot { fill: none; stroke: var(--pm-hair); stroke-width: 1; vector-effect: non-scaling-stroke; }
.pmap .pm-dot--done { stroke: var(--pm-ink); }
.pmap .pm-dot--on { stroke: var(--pm-blue); }

/* badges: dashed circle + icon (the Figma link chip) */
.pmap .pm-badge-bg {
	fill: var(--pm-doc);
	stroke: var(--pm-ink);
	stroke-dasharray: 4 4;
}

/* the badges that were solid brand colour are drafted nodes now (js badge(): ring,
   guide ring, crosshair ticks, ink icon) */

/* tinted blocks (auto-layout style highlights) */
.pmap .pm-tint { stroke-width: 2.5; }
.pmap .pm-tint--b { fill: rgba(66, 133, 244, 0.16); stroke: var(--pm-blue); }
.pmap .pm-tint--r { fill: rgba(234, 67, 53, 0.16); stroke: var(--pm-red); }
.pmap .pm-tint--y { fill: rgba(251, 188, 4, 0.2); stroke: var(--pm-yellow); }
.pmap .pm-tint--g { fill: rgba(52, 168, 83, 0.18); stroke: var(--pm-green); }
.pmap .pm-rowhl { stroke: none; }

.pmap .pm-lockbox {
	fill: none;
	stroke: var(--pm-blue);
	stroke-width: 5;
}

.pmap .pm-ring {
	fill: none;
	stroke: var(--pm-ink);
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
}

/* status chips: the production file's own states */
.pmap .pm-st { color: #05B505; --pm-st-bg: #CDF0CD; }
.pmap .pm-st--wip { color: #E58300; --pm-st-bg: #FAE6CC; }
.pmap .pm-st--rev { color: #AD2DFE; --pm-st-bg: #EFD5FF; }
html[data-theme="dark"] .pmap .pm-st { --pm-st-bg: #0E3A0E; }
html[data-theme="dark"] .pmap .pm-st--wip { --pm-st-bg: #4A2F08; }
html[data-theme="dark"] .pmap .pm-st--rev { --pm-st-bg: #3A1455; }
.pmap .pm-st-bg { fill: var(--pm-st-bg); stroke: currentColor; stroke-width: 2; }
.pmap .pm-st-bar { fill: currentColor; }
.pmap .pm-st .pm-ico { color: inherit; }

/* ghost docs around the map: only a snippet of the real thing */
.pmap .pm-ghosts { opacity: 0.45; }

/* ---------- build-in animation (a stop switches .on) ---------- */
.pmap .a {
	opacity: 0;
	transform-box: fill-box;
	transform-origin: 50% 50%;
	transition: opacity 0.4s ease, transform 0.4s ease;
}

/* the campaign motion (Figma notes 279:63132 / 279:64560): pops start from
   nothing and overshoot a touch; wipes and runs are the soft in-out */
.pmap .a-pop { transform: scale(0); }
.pmap .a-run { transform: translateX(var(--dx, 0px)) scale(0); }
.pmap .a-up { transform: translateY(50px); }
.pmap .a-down { transform: translateY(-90px); }
.pmap .a-left { transform: translateX(160px); }
.pmap .a-right { transform: translateX(-160px); }
.pmap .a-wipe { transform: scaleX(0); transform-origin: 0 50%; }

.pmap .on .a {
	opacity: 1;
	transform: none;
	transition: opacity 0.7s cubic-bezier(.65,0,.35,1) var(--d, 0s), transform 1.1s cubic-bezier(.65,0,.35,1) var(--d, 0s);
}

.pmap .on .a-pop {
	transition: opacity 0.25s ease var(--d, 0s), transform 0.75s cubic-bezier(0.3, 1.18, 0.5, 1) var(--d, 0s);   /* pops: ~3% overshoot, like the logo build guides */
}

.pmap .on .a-wipe {
	transition: opacity 0.25s ease var(--d, 0s), transform 1s cubic-bezier(.65,0,.35,1) var(--d, 0s);
}

/* node: pops at the left end (0.3s), then runs right with the pill */
.pmap .a-run { transition: none; }
.pmap .on .a-run {
	animation: pm-run 1.35s linear var(--d, 0s) both;
}

@keyframes pm-run {
	0% { opacity: 1; transform: translateX(var(--dx)) scale(0); animation-timing-function: cubic-bezier(0.3, 1.18, 0.5, 1); }
	28% { opacity: 1; transform: translateX(var(--dx)) scale(1); animation-timing-function: cubic-bezier(.65,0,.35,1); }
	100% { opacity: 1; transform: none; }
}


.pmap .a-draw {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
}

.pmap .a-draw--rev { stroke-dashoffset: -1; }   /* draws from the far end back */

.pmap .on .a-draw {
	stroke-dashoffset: 0;
	transition: stroke-dashoffset 1.8s cubic-bezier(.65,0,.35,1) var(--d, 0s);
}

/* highlights that fade once a block has settled */
.pmap .on .pm-settle {
	opacity: 0;
	transition: opacity 0.7s ease 3s;
}

.pmap .on .pm-unlock {
	opacity: 0;
	transition: opacity 0.3s ease 2.4s;
}

/* ---------- loops (only while a stop is on) ---------- */
.pmap .pm-flow {
	fill: none;
	stroke: var(--pm-blue);
	stroke-width: 7;
	stroke-linecap: round;
	stroke-dasharray: 0.1 44;
	opacity: 0;
}

.pmap .on .pm-flow {
	opacity: 1;
	animation: pm-flow 1.8s linear infinite;
}

.pmap .pm-spin,
.pmap .pm-ring {
	transform-box: fill-box;
	transform-origin: 50% 50%;
}

.pmap .on .pm-spin { animation: pm-rot 16s linear infinite; }
.pmap .on .pm-spin--slow { animation-duration: 40s; }
/* the KV's ring segments drawing on, as the "GIF" in the prototype frame */
.pmap .pm-kvdraw { stroke-dasharray: 1 1.2; }
.pmap .on .pm-kvdraw { animation: pm-kvdraw 4.2s ease-in-out 2s infinite; }
.pmap .on .pm-ring { animation: pm-ring 2.4s ease-out infinite; }
.pmap .on .pm-rec,
.pmap .on .pm-blink { animation: pm-blink 1.2s ease-in-out infinite; }
.pmap .on .pm-playhead { animation: pm-head 4.5s linear infinite; }
.pmap .on .pm-playhead--film { animation-name: pm-head-film; }
.pmap .on .pm-playhead--run { animation-name: pm-head-run; animation-duration: 6s; }
.pmap .on .pm-rowhl { animation: pm-rows 6.6s steps(11) infinite; }
/* localisation: the scan bar steps down the nine language rows (68 apart) */
.pmap .on .pm-locscan .pm-rowhl { animation: pm-locrows 5.4s steps(9) infinite; }

.pmap .pm-cyc { opacity: 0; }
.pmap .on .pm-cyc { animation: pm-cyc 6s linear infinite; }
.pmap .on .pm-cyc--2 { animation-delay: -4s; }
.pmap .on .pm-cyc--3 { animation-delay: -2s; }

/* sign-off: WIP -> review -> approved, once, staggered per card (--sd) */
.pmap .pm-s1,
.pmap .pm-s2,
.pmap .pm-s3 { opacity: 0; }
.pmap .on .pm-s1 { animation: pm-s1 3.2s linear var(--sd, 0s) both; }
.pmap .on .pm-s2 { animation: pm-s2 3.2s linear var(--sd, 0s) both; }
.pmap .on .pm-s3 { animation: pm-s3 3.2s linear var(--sd, 0s) both; }

@keyframes pm-flow { to { stroke-dashoffset: -44.1; } }
@keyframes pm-rot { to { transform: rotate(360deg); } }
@keyframes pm-kvdraw { 0% { stroke-dashoffset: 1; } 45%, 88% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -1.1; } }
@keyframes pm-ring { from { transform: scale(0.8); opacity: 0.9; } to { transform: scale(1.3); opacity: 0; } }
@keyframes pm-blink { 50% { opacity: 0.25; } }
@keyframes pm-head { to { transform: translateX(920px); } }
@keyframes pm-head-film { to { transform: translateX(960px); } }
@keyframes pm-head-run { to { transform: translateX(1032px); } }
@keyframes pm-rows { to { transform: translateY(616px); } }
@keyframes pm-locrows { to { transform: translateY(612px); } }
@keyframes pm-cyc { 0% { opacity: 0; } 4%, 33% { opacity: 1; } 37%, 100% { opacity: 0; } }
@keyframes pm-s1 { 0% { opacity: 0; } 6%, 30% { opacity: 1; } 36%, 100% { opacity: 0; } }
@keyframes pm-s2 { 0%, 30% { opacity: 0; } 36%, 64% { opacity: 1; } 70%, 100% { opacity: 0; } }
@keyframes pm-s3 { 0%, 64% { opacity: 0; } 70%, 100% { opacity: 1; } }

/* off screen / tab hidden: hold every loop */
.pmap--idle .pmap__world * {
	animation-play-state: paused !important;
}

/* ---------- drafting overlay: screen space, over the map, never scaled by the camera ----------
   Rulers on the bottom and right edges that track the camera (numbered in
   modules of 100 world units: a doc is 12 x 12), brackets on them marking
   the current doc's extents, the figure title, the step read-out, the
   camera's position and zoom, and a figures table that counts up on the
   closing overview. Sizes are divided by the page scale (--ui-scale) so
   they stay the same on screen. js: draft() in production-map.js. */
.pmap__draft {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	z-index: 1;
	pointer-events: none;
	overflow: hidden;
}

.pmap__draft path {
	fill: none;
	stroke: var(--pm-ink);
	stroke-width: calc(1px / var(--ui-scale, 1));
}

.pmap__draft text {
	font-family: Consolas, "Courier New", monospace;
	font-size: calc(10.5px / var(--ui-scale, 1));
	letter-spacing: 0.08em;
	fill: var(--pm-ink);
}

.pmap__draft .pmd-small { font-size: calc(8.5px / var(--ui-scale, 1)); }

/* the narrative note: sentence case, comes up 1.4s after its stop starts building */
.pmap__draft .pmd-note { letter-spacing: 0.02em; opacity: 0; }
.pmap__draft .pmd-note.is-on { opacity: 1; transition: opacity 0.9s cubic-bezier(.65,0,.35,1) 1.4s; }
.pmap--cut .pmap__draft .pmd-note { opacity: 0; transition: opacity 0.3s ease; }
.pmap__draft .pmd-step { transition: opacity 0.4s ease; }
.pmap__draft .pmd-facts { opacity: 0; transition: opacity 0.8s cubic-bezier(.65,0,.35,1); }
.pmap__draft .pmd-facts.is-on { opacity: 1; }
.pmap--cut .pmap__draft .pmd-facts { opacity: 0; }

/* ---------- step rail (site UI: follows the site theme) ---------- */
.pmap__rail {
	position: absolute;
	z-index: 2;
	left: 10px;
	top: 10px;
	bottom: 10px;
	width: 34px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	pointer-events: none;
}

.pmap__step {
	pointer-events: auto;
	flex: 0 1 30px;
	min-height: 0;
	width: 30px;
	max-height: 30px;
	aspect-ratio: 1 / 1;
	padding: 0;
	border: var(--stroke-thin) solid var(--color-border-default);
	border-radius: 50%;
	background: var(--color-background-page);
	color: var(--color-text-secondary);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color var(--duration-base) var(--easing-default),
		color var(--duration-base) var(--easing-default),
		border-color var(--duration-base) var(--easing-default);
}

.pmap__step svg {
	flex: none;
	width: 18px;
	height: 18px;
	display: block;
	fill: currentColor;
	color: inherit;
}

.pmap__step.is-done {
	color: var(--color-text-primary);
	border-color: var(--color-border-strong);
}

.pmap__step.is-current,
.pmap__step:hover {
	background: var(--color-background-inverse);
	border-color: var(--color-background-inverse);
	color: var(--color-text-inverse);
}

.pmap__step:focus-visible {
	outline: 1px solid var(--color-text-primary);
	outline-offset: 2px;
}

.pmap__toggle {
	margin-top: 6px;
}

/* phones: the page isn't scaled down there, so the rail is drawn smaller */
html.bp-max-600 .pmap__rail {
	left: 6px;
	width: 24px;
	gap: 1px;
}

html.bp-max-600 .pmap__step {
	flex-basis: 22px;
	width: 22px;
	max-height: 22px;
}

html.bp-max-600 .pmap__step svg {
	width: 14px;
	height: 14px;
}

@media (max-width: 600px) {
	html:not(.dfui) .pmap__rail { left: 6px; width: 24px; gap: 1px; }
	html:not(.dfui) .pmap__step { flex-basis: 22px; width: 22px; max-height: 22px; }
	html:not(.dfui) .pmap__step svg { width: 14px; height: 14px; }
}

.pmap__i-play,
.pmap--paused .pmap__i-pause {
	display: none;
}

.pmap--paused .pmap__i-play {
	display: inline;
}

/* reduced motion: a still of the finished map; no play/pause */
.pmap--still .pmap__toggle {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.pmap .a,
	.pmap .on .a,
	.pmap .on .a-draw,
	.pmap__world {
		transition: none;
	}

	.pmap__world * {
		animation: none !important;
	}

	.pmap .pm-s3 { opacity: 1; }
	.pmap .pm-cyc--1 { opacity: 1; }
	.pmap .pm-cta-win { transform: translateX(var(--w)) !important; }
	.pmap .pm-flow { opacity: 0 !important; }
	.pmap .pm-settle,
	.pmap .pm-unlock { opacity: 0; }
}

/* ---------- campaign assets drawn on the map ---------- */
/* country name on the regional hero (cycles: the localised versions) */
.pmap .pm-hero-word {
	font-family: "Nunito Sans", sans-serif;
	font-weight: 600;
	font-size: 250px;
	letter-spacing: -0.02em;
	fill: var(--pm-text);
}

/* CTA button reveal, on a loop: a node draws the outlined button left to
   right, it holds, then a node sweeps it away. --w = button width. */
.pmap .pm-cta-line { fill: none; stroke: currentColor; }
.pmap .pm-cta-label { color: inherit; }
.pmap .pm-cta-node { fill: #174EA6; transform-box: fill-box; transform-origin: center; transform: scale(0); }
.pmap .pm-cta-win { transform: translateX(0); }
.pmap .on .pm-cta-win { animation: pm-cta-win 7s linear infinite; }
.pmap .on .pm-cta-run { animation: pm-cta-run 7s linear infinite; }
.pmap .on .pm-cta-node { animation: pm-cta-node 7s linear infinite; }
@keyframes pm-cta-win {
	0%, 8% { transform: translateX(0); animation-timing-function: cubic-bezier(0.5, 0, 0.2, 1); }
	26%, 72% { transform: translateX(var(--w)); animation-timing-function: cubic-bezier(0.5, 0, 0.2, 1); }
	90%, 100% { transform: translateX(calc(var(--w) * 2)); }
}
@keyframes pm-cta-run {
	0%, 8% { transform: translateX(0); animation-timing-function: cubic-bezier(0.5, 0, 0.2, 1); }
	26% { transform: translateX(var(--w)); }
	26.01%, 72% { transform: translateX(0); animation-timing-function: cubic-bezier(0.5, 0, 0.2, 1); }
	90%, 100% { transform: translateX(var(--w)); }
}
@keyframes pm-cta-node {
	0% { transform: scale(0); animation-timing-function: cubic-bezier(0.3, 1.4, 0.5, 1); }
	7%, 26% { transform: scale(1); animation-timing-function: ease-in; }
	30%, 66% { transform: scale(0); animation-timing-function: cubic-bezier(0.3, 1.4, 0.5, 1); }
	72%, 90% { transform: scale(1); animation-timing-function: ease-in; }
	95%, 100% { transform: scale(0); }
}

/* ---------- CAD pass (user review 2026-11-15: the Venue sheet approved as the look
   for every stop). The mock-UI fills become drawing: sheets, cards, film frames and
   placeholder bars are 1px outlines on the panel colour; chunky strokes are 1px; the
   status chips are outlined. Brand artwork (KVs, lockups, campaign assets' own colours)
   is untouched. ---------- */
.pmap .pm-frame,
.pmap .pm-card,
.pmap .pm-film,
.pmap .pm-mini,
.pmap .pm-slot,
.pmap .pm-bar,
.pmap .pm-st-bg,
.pmap .pm-st-bar,
.pmap .pm-lockbox,
.pmap .pm-tick,
.pmap .pm-head,
.pmap .pm-head-cap {
	vector-effect: non-scaling-stroke;
	stroke-width: 1 !important;
}
.pmap .pm-frame { fill: var(--pm-doc); stroke: var(--pm-ink); }
.pmap .pm-mini { fill: var(--pm-doc); stroke: var(--pm-hair); }
.pmap .pm-card { fill: var(--pm-doc); stroke: var(--pm-ink); }
.pmap .pm-film { fill: var(--pm-doc); stroke: var(--pm-ink); }
.pmap .pm-slot { fill: none; stroke: var(--pm-hair); stroke-dasharray: 4 4; }
.pmap .pm-bar { fill: none; stroke: var(--pm-hair); }
.pmap .pm-bar--ink { fill: none; stroke: var(--pm-ink); }
.pmap .pm-st-bg { fill: none; stroke: currentColor; }
.pmap .pm-st-bar { fill: none; stroke: currentColor; }
.pmap .pm-head-cap { fill: none; stroke: var(--pm-ink); }
.pmap .pm-tint { fill-opacity: 0.35; }