/* Pace vignettes — built from marketing/pace-vignettes/src by build.mjs. Do not edit. */
.pace-vignette { display: block; position: relative; aspect-ratio: var(--pv-ar, 3 / 2); overflow: visible; cursor: pointer; }
/* Shared tokens, read off the app (REFERENCE.md "Shared tokens"): globals.css:6-38 light :root. */
.pv-root { --pv-card: #fff; --pv-text: #09090b; --pv-muted: #71717a; --pv-muted-bg: #f4f4f5; --pv-border: #f0f0f4; --pv-border-strong: #d4d4d9; --pv-blue: #156cc2; --pv-green: #16a34a; --pv-amber: #d97706; --pv-red: #dc2626; --pv-radius: 14px;
  --pv-shadow: 0 1px 2px rgba(26,22,21,.06), 0 12px 32px -8px rgba(26,22,21,.18), 0 40px 80px -24px rgba(26,22,21,.22);
  font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif; color: var(--pv-text); }
.pv-canvas { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
.pv-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pv-card { position: absolute; background: var(--pv-card); border: 1px solid var(--pv-border); border-radius: var(--pv-radius); box-shadow: var(--pv-shadow);
  transform: rotate(-3deg) translateY(14px); transition: transform 900ms cubic-bezier(.2,.8,.2,1); }
.pv-playing .pv-card { transform: none; }
.pv-cursor { position: absolute; left: 70%; top: 110%; opacity: 0; transition-property: left, top, opacity, transform; transition-timing-function: cubic-bezier(.3,.7,.2,1); pointer-events: none; z-index: 10; }
.pv-cursor-on { opacity: 1; }
.pv-press { transform: scale(.85); }
.pv-instant, .pv-instant * { transition: none !important; animation: none !important; }
.pv-instant .pv-cursor { opacity: 0 !important; }

.pace-vignette[data-vignette="flighting"] { --pv-ar: 960 / 560; }
.pace-vignette[data-vignette="forecast"] { --pv-ar: 960 / 640; }
/* flighting — Budget tab "Budget rhythm" + FlightEditor, beside the flighted SpendProgressBar,
   drawn at --z × the app's px (a zoomed crop). Values and their file:line: REFERENCE.md "## flighting". */
.pv-flighting { --z: 1.4; --pv-sky: rgba(125,211,252,.7); --pv-sky-past: rgba(125,211,252,.35); }
.pv-flighting .pv-flighting-panel { left: 26px; top: 30px; width: 908px; height: 500px; padding: 30px 32px; box-sizing: border-box; display: flex; gap: 36px; }
.pv-flighting label, .pv-flighting .pv-flighting-cap { display: block; font-size: calc(12px * var(--z)); font-weight: 500; color: var(--pv-muted); margin-bottom: calc(4px * var(--z)); }

/* Left: Budget rhythm row + editor viewport */
.pv-flighting .pv-flighting-left { width: 492px; flex: none; display: flex; flex-direction: column; }
.pv-flighting .pv-flighting-rhythm { display: flex; align-items: center; justify-content: space-between; margin-bottom: calc(12px * var(--z)); }
.pv-flighting .pv-flighting-rhythm b { font-size: calc(14px * var(--z)); font-weight: 500; }
/* Segmented control: inline-flex rounded-md bg-muted p-0.5; buttons rounded-sm px-3 py-1 text-xs font-medium */
.pv-flighting .pv-flighting-seg-ctl { display: inline-flex; background: var(--pv-muted-bg); padding: calc(2px * var(--z)); border-radius: calc(10.8px * var(--z)); }
.pv-flighting .pv-flighting-seg-ctl span { padding: calc(4px * var(--z)) calc(12px * var(--z)); border-radius: calc(8.8px * var(--z)); font-size: calc(12px * var(--z)); line-height: calc(16px * var(--z)); font-weight: 500; color: var(--pv-muted); }
.pv-flighting .pv-flighting-seg-ctl .pv-flighting-seg-on { background: #fff; color: var(--pv-text); box-shadow: 0 1px 2px rgba(0,0,0,.05); }

/* FlightEditor: rounded-lg border bg-background p-4 shadow-sm space-y-3; the viewport scrolls to the phases */
.pv-flighting .pv-flighting-editor { position: relative; flex: 1; overflow: hidden; border: 1px solid var(--pv-border); border-radius: calc(12.8px * var(--z)); box-shadow: 0 1px 2px rgba(0,0,0,.05);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 18px), transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 18px), transparent 100%); }
.pv-flighting .pv-flighting-scroll { padding: calc(16px * var(--z)); display: flex; flex-direction: column; align-items: flex-start; gap: calc(12px * var(--z)); transition: transform 1000ms cubic-bezier(.65,0,.25,1) 150ms; }
.pv-flighting .pv-flighting-scroll > * { flex: none; }
.pv-flighting .pv-flighting-scroll > div { width: 100%; }
.pv-flighting .pv-flighting-editor.phased .pv-flighting-scroll { transform: translateY(-252px); }
.pv-flighting .pv-flighting-dates { display: grid; grid-template-columns: 1fr 1fr; gap: calc(12px * var(--z)); }
/* Date trigger: h-9 w-[150px] outline button, CalendarIcon mr-2 h-4 w-4 */
.pv-flighting .pv-flighting-date, .pv-flighting .pv-flighting-input { display: flex; align-items: center; height: calc(36px * var(--z)); box-sizing: border-box; border: 1px solid var(--pv-border-strong); border-radius: calc(10.8px * var(--z)); background: #fff; font-size: calc(14px * var(--z)); padding: 0 calc(12px * var(--z)); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pv-flighting .pv-flighting-date { width: calc(150px * var(--z)); }
.pv-flighting .pv-flighting-date svg { width: calc(16px * var(--z)); height: calc(16px * var(--z)); margin-right: calc(8px * var(--z)); flex: none; }
.pv-flighting .pv-flighting-input em { margin-left: auto; font-style: normal; font-size: calc(12px * var(--z)); color: var(--pv-muted); }
.pv-flighting .pv-flighting-input s { text-decoration: none; color: var(--pv-muted); margin-right: calc(6px * var(--z)); }
.pv-flighting .pv-flighting-budget { width: calc(200px * var(--z)); }
.pv-flighting hr { width: 100%; border: 0; border-top: 1px solid var(--pv-border); margin: 0; }

/* Switch: h-6 w-11 rounded-full border-2; unchecked bg-input + border-border-strong, checked bg-green-500; thumb h-5 w-5 translate-x-5 */
.pv-flighting .pv-flighting-toggle { display: flex; align-items: center; justify-content: space-between; }
.pv-flighting .pv-flighting-toggle b { font-size: calc(14px * var(--z)); font-weight: 500; }
.pv-flighting .pv-flighting-switch { position: relative; width: calc(44px * var(--z)); height: calc(24px * var(--z)); box-sizing: border-box; border-radius: 999px; border: calc(2px * var(--z)) solid var(--pv-border-strong); background: #fff; transition: background-color 200ms ease, border-color 200ms ease; }
.pv-flighting .pv-flighting-switch i { position: absolute; top: 0; left: 0; width: calc(20px * var(--z)); height: calc(20px * var(--z)); border-radius: 50%; background: #fff; box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1), 0 0 0 1px rgba(0,0,0,.04); transition: transform 200ms cubic-bezier(.3,.7,.2,1); }
.pv-flighting .pv-flighting-switch.on { background: #22c55e; border-color: transparent; }
.pv-flighting .pv-flighting-switch.on i { transform: translateX(calc(20px * var(--z))); }

/* Phase rows: Phase n (w-14 text-xs muted), two h-9 w-20 inputs, ghost trash h-9 w-9; summary text-xs */
.pv-flighting .pv-flighting-phases { display: flex; flex-direction: column; gap: calc(8px * var(--z)); }
.pv-flighting .pv-flighting-phase { display: flex; align-items: center; gap: calc(8px * var(--z)); opacity: 0; transform: translateY(10px); transition: opacity 400ms ease, transform 500ms cubic-bezier(.2,.8,.2,1); }
.pv-flighting .pv-flighting-phase:nth-child(1) { transition-delay: 450ms; }
.pv-flighting .pv-flighting-phase:nth-child(2) { transition-delay: 560ms; }
.pv-flighting .pv-flighting-phase:nth-child(3) { transition-delay: 670ms; }
.pv-flighting .pv-flighting-editor.phased .pv-flighting-phase { opacity: 1; transform: none; }
.pv-flighting .pv-flighting-phase-name { width: calc(56px * var(--z)); font-size: calc(12px * var(--z)); color: var(--pv-muted); }
.pv-flighting .pv-flighting-w20 { width: calc(80px * var(--z)); padding-right: calc(8px * var(--z)); }
.pv-flighting .pv-flighting-trash { display: flex; align-items: center; justify-content: center; width: calc(36px * var(--z)); height: calc(36px * var(--z)); color: var(--pv-text); }
.pv-flighting .pv-flighting-trash svg, .pv-flighting .pv-flighting-add svg { width: calc(16px * var(--z)); height: calc(16px * var(--z)); }
.pv-flighting .pv-flighting-add svg { width: calc(12px * var(--z)); height: calc(12px * var(--z)); margin-right: calc(4px * var(--z)); }
.pv-flighting .pv-flighting-sum { display: flex; align-items: center; justify-content: space-between; font-size: calc(12px * var(--z)); color: var(--pv-muted); opacity: 0; transition: opacity 400ms ease 800ms; }
.pv-flighting .pv-flighting-add { display: inline-flex; align-items: center; height: calc(32px * var(--z)); padding: 0 calc(12px * var(--z)); color: var(--pv-text); font-weight: 500; }
.pv-flighting .pv-flighting-editor.phased .pv-flighting-sum { opacity: 1; }

/* Right: Daily figure, per-day budget bars, flighted spend bar + rhythm label */
.pv-flighting .pv-flighting-right { flex: 1; min-width: 0; display: flex; flex-direction: column; padding-top: 6px; }
.pv-flighting .pv-flighting-daily-row { display: flex; align-items: baseline; gap: 4px; font-size: calc(12px * var(--z)); color: var(--pv-muted); }
.pv-flighting .pv-flighting-daily { font-size: calc(24px * var(--z)); font-weight: 700; color: var(--pv-text); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.pv-flighting .pv-flighting-bars { flex: 1; display: flex; align-items: flex-end; gap: 3px; margin-top: 22px; border-bottom: 1px solid var(--pv-border); }
.pv-flighting .pv-flighting-day { flex: 1; height: 0; border-radius: 3px 3px 1px 1px; background: var(--pv-sky); transition: height 600ms cubic-bezier(.2,.8,.2,1); }
.pv-flighting .pv-flighting-past { background: var(--pv-sky-past); }
.pv-flighting .pv-flighting-today { background: #38bdf8; box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(56,189,248,.45); }
.pv-flighting .pv-flighting-right.on .pv-flighting-day { height: var(--h0); }
.pv-flighting .pv-flighting-right.phased .pv-flighting-day { height: var(--h1); }
.pv-flighting .pv-flighting-axis { display: flex; justify-content: space-between; font-size: 15px; color: var(--pv-muted); margin: 8px 0 22px; }

/* SpendProgressBar, flight mode: h-3 pill, border, p-[1.5px]; 1px gaps; past sky-300/35, active .flight-bar-fill sky-300/70 + shimmer */
.pv-flighting .pv-flighting-track { height: calc(12px * var(--z) * 1.6); box-sizing: border-box; border: 1px solid var(--pv-border-strong); border-radius: 999px; padding: calc(1.5px * var(--z) * 1.6); }
.pv-flighting .pv-flighting-inner { display: flex; height: 100%; border-radius: 999px; overflow: hidden; }
.pv-flighting .pv-flighting-seg { position: relative; height: 100%; overflow: hidden; box-sizing: border-box; transition: width 900ms cubic-bezier(.65,0,.25,1), background-color 500ms ease; }
.pv-flighting .pv-flighting-seg + .pv-flighting-seg { border-left: 2px solid #fff; }
.pv-flighting .pv-flighting-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 0 999px 999px 0; background-color: var(--pv-sky);
  background-image: linear-gradient(100deg, transparent 35%, rgba(255,255,255,.45) 50%, transparent 65%); background-size: 250% 100%; background-repeat: no-repeat;
  animation: pv-flighting-shimmer 4s linear infinite; transition: width 700ms cubic-bezier(.2,.8,.2,1), opacity 400ms ease; }
@keyframes pv-flighting-shimmer { from { background-position: 150% 0; } to { background-position: -50% 0; } }
.pv-flighting .pv-flighting-right.on .pv-flighting-seg1 .pv-flighting-fill { width: 45%; transition-delay: 500ms; }
.pv-flighting .pv-flighting-right.phased .pv-flighting-seg1 { background: var(--pv-sky-past); }
.pv-flighting .pv-flighting-right.phased .pv-flighting-seg1 .pv-flighting-fill { opacity: 0; transition-delay: 0ms; }
.pv-flighting .pv-flighting-right.phased .pv-flighting-seg2 .pv-flighting-fill { width: 36%; transition-delay: 800ms; }
.pv-flighting .pv-flighting-label-row { display: flex; align-items: baseline; gap: 10px; margin-top: 14px; font-size: calc(12px * var(--z)); white-space: nowrap; }
.pv-flighting .pv-flighting-label { font-weight: 500; min-height: 1.2em; }
.pv-flighting .pv-flighting-label-row span { color: var(--pv-muted); }

/* forecast — SaturationCurveChart + ScenarioCard, drawn at --z × the app's px (a zoomed crop).
   Values and their file:line: REFERENCE.md "## forecast". */
.pv-forecast { --z: 1.45; --pv-fc: #4285f4; }
.pv-forecast .pv-forecast-panel { left: 22px; top: 30px; width: 640px; height: 578px; padding: 30px 34px; box-sizing: border-box; }

/* Header: Sparkles h-4 + "Saturation curve" text-base semibold + Info; CPA / Next $1k toggle */
.pv-forecast .pv-forecast-head { display: flex; align-items: center; gap: calc(8px * var(--z)); height: calc(28px * var(--z)); }
.pv-forecast .pv-forecast-spark { width: calc(16px * var(--z)); height: calc(16px * var(--z)); }
.pv-forecast .pv-forecast-title { font-size: calc(16px * var(--z)); font-weight: 600; letter-spacing: -0.01em; }
.pv-forecast .pv-forecast-info { width: calc(14px * var(--z)); height: calc(14px * var(--z)); color: var(--pv-muted); }
.pv-forecast .pv-forecast-view { margin-left: auto; display: inline-flex; gap: calc(4px * var(--z)); padding: calc(2px * var(--z)); border: 1px solid var(--pv-border); border-radius: calc(10.8px * var(--z)); font-size: calc(11px * var(--z)); color: var(--pv-muted); }
.pv-forecast .pv-forecast-view span { padding: calc(4px * var(--z)) calc(10px * var(--z)); border-radius: calc(8.8px * var(--z)); }
.pv-forecast .pv-forecast-view .pv-forecast-view-on { background: var(--pv-text); color: #fff; font-weight: 500; }

/* Headline sentence: text-sm text-foreground/90, only once a scenario is selected */
.pv-forecast .pv-forecast-headline { margin: calc(4px * var(--z)) 0 calc(8px * var(--z)); font-size: calc(13px * var(--z)); line-height: 1.4; color: rgba(9,9,11,.9); height: calc(19px * var(--z)); white-space: nowrap;
  opacity: 0; transform: translateY(6px); transition: opacity 500ms ease, transform 500ms cubic-bezier(.2,.8,.2,1); }
.pv-forecast .pv-forecast-headline.on { opacity: 1; transform: none; }

/* Legend: text-[11px] muted, gap-3 */
.pv-forecast .pv-forecast-legend { display: flex; gap: calc(8px * var(--z)); font-size: calc(10px * var(--z)); color: var(--pv-muted); margin-bottom: calc(10px * var(--z)); white-space: nowrap; }
.pv-forecast .pv-forecast-legend span { display: inline-flex; align-items: center; gap: calc(6px * var(--z)); }
.pv-forecast .pv-forecast-swatch { display: inline-block; width: calc(16px * var(--z)); height: calc(10px * var(--z)); border-radius: 3px; background: var(--pv-fc); opacity: .18; }
.pv-forecast .pv-forecast-dot { display: inline-block; width: calc(10px * var(--z)); height: calc(10px * var(--z)); border-radius: 50%; background: var(--pv-fc); box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--pv-border); }

/* Plot */
.pv-forecast .pv-forecast-plot { position: relative; }
.pv-forecast .pv-forecast-svg { display: block; overflow: visible; }
.pv-forecast .pv-forecast-grid { stroke: #e4e4ea; stroke-dasharray: 3 3; }
.pv-forecast .pv-forecast-axis { stroke: #e4e4ea; }
.pv-forecast .pv-forecast-tick { font-size: 15px; fill: var(--pv-muted); font-variant-numeric: tabular-nums; }
.pv-forecast .pv-forecast-axis-title { font-size: 12px; font-weight: 600; letter-spacing: .08em; fill: var(--pv-muted); }
.pv-forecast .pv-forecast-region { font-size: 14px; font-weight: 600; fill: var(--pv-muted); }
.pv-forecast .pv-forecast-today-text { font-size: 14px; font-weight: 600; fill: var(--pv-text); }

/* Curve draw: solid (measured) part strokes on, then the dashed estimate, band and area fade in */
.pv-forecast .pv-forecast-draw { fill: none; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1100ms cubic-bezier(.45,.05,.3,1); }
.pv-forecast .pv-forecast-halo { stroke-width: 11; stroke-opacity: .1; }
.pv-forecast .pv-forecast-line { stroke-width: 4; }
.pv-forecast .pv-forecast-dash { fill: none; stroke-width: 3.2; stroke-opacity: .55; stroke-dasharray: 10 8; stroke-linecap: round; opacity: 0; transition: opacity 300ms ease 1100ms; }
.pv-forecast .pv-forecast-band { opacity: 0; transition: opacity 700ms ease 700ms; }
.pv-forecast .pv-forecast-fill { opacity: 0; transition: opacity 700ms ease 500ms; }
.pv-forecast .pv-forecast-curve.on .pv-forecast-draw { stroke-dashoffset: 0; }
.pv-forecast .pv-forecast-curve.on .pv-forecast-dash { opacity: 1; }
.pv-forecast .pv-forecast-curve.on .pv-forecast-band { opacity: .12; }
.pv-forecast .pv-forecast-curve.on .pv-forecast-fill { opacity: 1; }
.pv-forecast .pv-forecast-today { opacity: 0; transition: opacity 400ms ease 900ms; }
.pv-forecast .pv-forecast-curve.on ~ .pv-forecast-today { opacity: 1; }

/* The dragged marker: fades in under the cursor, then slides current → +20% */
.pv-forecast .pv-forecast-marker { transform: translate(var(--mx), var(--my)); opacity: 0; transition: transform 900ms cubic-bezier(.45,.05,.25,1), opacity 250ms ease; }
.pv-forecast .pv-forecast-marker.show { opacity: 1; }
.pv-forecast .pv-forecast-marker.moved { transform: translate(var(--nx), var(--ny)); }
.pv-forecast .pv-forecast-rule { stroke: rgba(9,9,11,.22); stroke-dasharray: 2 3; stroke-width: 1.5; }

/* Docked readout: popover rect rx 10, border, 3px colour accent, 13px bold name, 12px lines */
.pv-forecast .pv-forecast-readout { position: absolute; left: 76px; top: 44px; padding: 12px 18px 12px 24px; background: #fff; border: 1px solid var(--pv-border); border-radius: 12px;
  box-shadow: 0 5px 10px rgba(0,0,0,.12); font-size: 16px; line-height: 1.55; color: rgba(9,9,11,.85); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pv-forecast .pv-forecast-readout::before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 4px; border-radius: 2px; background: var(--pv-fc); }
.pv-forecast .pv-forecast-readout b { font-weight: 600; color: var(--pv-text); }
.pv-forecast .pv-forecast-readout-name { position: relative; display: block; height: 26px; font-size: 18px; font-weight: 700 !important; }
.pv-forecast .pv-forecast-readout-name span { position: absolute; left: 0; top: 0; transition: opacity 300ms ease, transform 300ms ease; }
.pv-forecast .pv-forecast-name-b { opacity: 0; transform: translateY(6px); }
.pv-forecast .pv-forecast-readout.moved .pv-forecast-name-a { opacity: 0; transform: translateY(-6px); }
.pv-forecast .pv-forecast-readout.moved .pv-forecast-name-b { opacity: 1; transform: none; }

/* Scenario card — rounded-lg border bg-card p-4, selected: border-primary/40 ring-1 ring-primary/30 */
.pv-forecast .pv-forecast-card { --z: 1.3; left: 610px; top: 300px; width: 328px; padding: calc(16px * var(--z)); box-sizing: border-box; border-radius: calc(12.8px * var(--z));
  border-color: rgba(0,0,0,.4); box-shadow: 0 0 0 1px rgba(0,0,0,.3), var(--pv-shadow);
  opacity: 0; transform: rotate(-3deg) translateY(40px) scale(.96); transition: transform 700ms cubic-bezier(.2,.8,.2,1), opacity 500ms ease; }
.pv-forecast.pv-playing .pv-forecast-card { transform: translateY(40px) scale(.96); }
.pv-forecast .pv-forecast-card.on { opacity: 1; transform: none; }
.pv-forecast .pv-forecast-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: calc(12px * var(--z)); font-size: calc(14px * var(--z)); }
.pv-forecast .pv-forecast-card-top b { font-weight: 600; }
.pv-forecast .pv-forecast-delta { font-size: calc(11px * var(--z)); font-weight: 600; height: calc(20px * var(--z)); line-height: calc(18px * var(--z)); padding: 0 calc(8px * var(--z)); border-radius: 999px; border: 1px solid #a7f3d0; background: #ecfdf5; color: #047857; box-sizing: border-box; }
.pv-forecast .pv-forecast-card-spend { font-size: calc(20px * var(--z)); line-height: 1.4; font-weight: 700; font-variant-numeric: tabular-nums; }
.pv-forecast .pv-forecast-card-sub { display: flex; align-items: center; gap: calc(8px * var(--z)); font-size: calc(12px * var(--z)); color: var(--pv-muted); }
.pv-forecast .pv-forecast-ai { display: inline-flex; align-items: center; gap: 2px; font-size: calc(10px * var(--z)); font-weight: 500; text-transform: uppercase; letter-spacing: .05em; padding: calc(2px * var(--z)) calc(6px * var(--z)); border-radius: 999px; border: 1px solid #fde68a; background: #fffbeb; color: #92400e; }
.pv-forecast .pv-forecast-ai svg { width: calc(10px * var(--z)); height: calc(10px * var(--z)); }
.pv-forecast .pv-forecast-card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: calc(8px * var(--z)); margin-top: calc(16px * var(--z)); padding-top: calc(12px * var(--z)); border-top: 1px solid var(--pv-border); }
.pv-forecast .pv-forecast-card-grid i, .pv-forecast .pv-forecast-pills i { display: block; font-style: normal; font-size: calc(10px * var(--z)); font-weight: 500; text-transform: uppercase; letter-spacing: .05em; color: var(--pv-muted); }
.pv-forecast .pv-forecast-card-grid span { display: flex; align-items: baseline; gap: calc(4px * var(--z)); margin-top: calc(2px * var(--z)); }
.pv-forecast .pv-forecast-card-grid b { font-size: calc(16px * var(--z)); font-weight: 600; font-variant-numeric: tabular-nums; }
.pv-forecast .pv-forecast-card-grid em { font-style: normal; font-size: calc(11px * var(--z)); font-weight: 500; font-variant-numeric: tabular-nums; }
.pv-forecast .pv-forecast-up { color: #059669; }
.pv-forecast .pv-forecast-down { color: #e11d48; }
.pv-forecast .pv-forecast-pills { display: flex; flex-wrap: wrap; align-items: center; gap: calc(6px * var(--z)); margin-top: calc(12px * var(--z)); }
.pv-forecast .pv-forecast-pills i { display: inline; margin-right: 2px; }
.pv-forecast .pv-forecast-pills span { font-size: calc(10px * var(--z)); font-weight: 500; font-variant-numeric: tabular-nums; padding: calc(2px * var(--z)) calc(6px * var(--z)); border-radius: 999px; border: 1px solid; }
.pv-forecast .pv-forecast-good { border-color: #a7f3d0 !important; background: #ecfdf5; color: #047857; }
.pv-forecast .pv-forecast-bad { border-color: #fecdd3 !important; background: #fff1f2; color: #be123c; }