/* ────────────────────────────────────────────────────────────────────────── governance_viz.css — shared styles for the operator-screen visualisations graduated out of the /demo layer (see docs/wpcompliance/demo_graduation_plan.md). Design contract: - CHROME (cards, borders, text) reuses governance.html's own theme variables (--bg-card, --border, --text, --muted, --accent, …) so each visualisation blends into the operator screen instead of importing the demo's dark palette. - SEMANTIC COLOUR (call_type hue, guardrail-blocked red) is defined here so the meaning carried by the original demo is preserved verbatim. - Everything is namespaced under a `.gv-*` prefix so it can never collide with governance.html's existing class names. Loaded once from governance.html ; each phase's JS module (aurora.js, …) renders into containers styled by the rules below. ────────────────────────────────────────────────────────────────────────── */ :root { /* call_type → hue. Mirrors the palette the Aurora demo shipped with so the visual reads identically once graduated. */ --gv-hue-chat: #5b8cff; --gv-hue-orch: #2dd4bf; --gv-hue-eval: #9c6bff; --gv-hue-rag: #16d390; --gv-hue-tool: #f5b341; --gv-hue-other: #6b7280; --gv-hue-blocked: #ef4e62; /* prompt-lifecycle "bark" colours (genealogy forest) */ --gv-bark-prod: #f5b341; /* production = golden */ --gv-bark-appr: #d97706; /* approved = amber */ --gv-bark-draft: #16d390; /* draft = sapling green */ --gv-bark-arch: #5a6076; /* archived = bare grey */ /* regulation-garden plant colours */ --gv-leaf-healthy: #16d390; --gv-leaf-dim: #0e7a55; --gv-leaf-wilt: #b58838; --gv-leaf-dead: #5a6076; --gv-bloom-red: #ef4e62; --gv-bloom-gold: #f5b341; --gv-plant-stem: #6d8470; --gv-plant-soil: rgba(110, 80, 50, 0.45); } /* ── View toggle (Table ⇄ Visual) — the shared Phase-0 primitive ──────────── */ .gv-view-toggle { display: inline-flex; gap: 0; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; vertical-align: middle; } .gv-view-toggle button { border: none; border-radius: 0; padding: 5px 12px; margin: 0; background: var(--bg-input); color: var(--muted); cursor: pointer; font-size: 12px; font-family: inherit; line-height: 1.4; transition: background .15s, color .15s; } .gv-view-toggle button + button { border-left: 1px solid var(--border); } .gv-view-toggle button:hover { color: var(--text); } .gv-view-toggle button.on { background: rgba(37,99,235,0.18); color: var(--text); } .gv-view-toggle button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } /* ── Stats strip (shared) ─────────────────────────────────────────────────── */ .gv-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; } .gv-stat { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; } .gv-stat .gv-stat-label { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; } .gv-stat .gv-stat-value { font-size: 20px; font-weight: 700; font-family: 'Fira Code', monospace; color: var(--text); } .gv-stat .gv-stat-sub { font-size: 11px; color: var(--faint); margin-top: 2px; } /* ══════════════════════════════════════════════════════════════════════════ Aurora — provenance ribbon (Phase 1, Audit Log panel) ══════════════════════════════════════════════════════════════════════════ */ .gv-aurora { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 18px; position: relative; overflow: hidden; } .gv-ribbons { display: flex; gap: 4px; align-items: flex-end; height: 280px; padding: 8px 4px; overflow-x: auto; overflow-y: hidden; } .gv-ribbon { flex: 0 0 9px; min-width: 6px; max-width: 16px; border-radius: 4px 4px 1px 1px; cursor: pointer; position: relative; transition: transform .15s, box-shadow .15s, filter .15s; /* top-to-bottom gradient sized by total_tokens; --h is the call_type hue. */ background: linear-gradient( to bottom, var(--h, var(--gv-hue-other)) 0%, color-mix(in oklab, var(--h, var(--gv-hue-other)) 30%, transparent) 100% ); box-shadow: 0 0 8px color-mix(in oklab, var(--h, var(--gv-hue-other)) 55%, transparent); } .gv-ribbon:hover { transform: translateY(-3px); filter: brightness(1.2); box-shadow: 0 0 16px color-mix(in oklab, var(--h, var(--gv-hue-other)) 80%, transparent); } .gv-ribbon.blocked { --h: var(--gv-hue-blocked); animation: gvBlockedPulse 2.4s ease-in-out infinite; } @keyframes gvBlockedPulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.35); } } .gv-ribbon.selected { outline: 2px solid var(--text); outline-offset: 2px; } .gv-empty { padding: 60px 20px; text-align: center; color: var(--muted); font-size: 13px; width: 100%; } .gv-errored { padding: 40px 20px; text-align: center; color: var(--error); font-size: 13px; } /* Legend under the ribbon canvas — maps hue → call_type. */ .gv-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; font-size: 11px; color: var(--muted); } .gv-legend .gv-legend-item { display: inline-flex; align-items: center; gap: 6px; } .gv-legend .gv-swatch { width: 10px; height: 10px; border-radius: 3px; display: inline-block; box-shadow: 0 0 6px currentColor; } /* ── Provenance chain (appended to the operator's existing detail modal) ───── */ .gv-chain-block { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; margin-bottom: 14px; } .gv-chain-title { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 600; margin-bottom: 8px; } .gv-chain { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; list-style: none; } .gv-chain li { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--border); } .gv-chain li:last-child { border-bottom: none; } .gv-chain .gv-stage-dot { flex-shrink: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--gv-hue-chat); margin-top: 4px; box-shadow: 0 0 6px currentColor; } .gv-chain .gv-stage-dot.prompt { background: var(--gv-hue-rag); } .gv-chain .gv-stage-dot.model { background: var(--gv-hue-chat); } .gv-chain .gv-stage-dot.guardrail { background: var(--gv-hue-blocked); } .gv-chain .gv-stage-dot.audit { background: var(--gv-hue-eval); } .gv-chain .gv-stage-text { flex: 1; min-width: 0; } .gv-chain .gv-stage-label { font-size: 10px; text-transform: uppercase; color: var(--faint); letter-spacing: 0.05em; margin-bottom: 2px; } .gv-chain .gv-stage-value { font-family: 'Fira Code', monospace; font-size: 12px; color: var(--text); word-break: break-all; } .gv-chain .gv-stage-value.dim { color: var(--faint); font-style: italic; } .gv-chain-blocked { background: rgba(239,78,98,0.12); border: 1px solid rgba(239,78,98,0.4); color: var(--gv-hue-blocked); padding: 7px 11px; border-radius: 6px; font-size: 12px; margin-bottom: 12px; font-weight: 600; } /* ══════════════════════════════════════════════════════════════════════════ Cockpit — system-pulse orb + reflex ribbon (Phase 2, Orchestrator panel) ══════════════════════════════════════════════════════════════════════════ */ .gv-cockpit-strip { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 16px 20px; margin-bottom: 20px; } @media (max-width: 760px) { .gv-cockpit-strip { grid-template-columns: 1fr; } } .gv-pulse { display: flex; align-items: center; gap: 14px; } .gv-orb-wrap { position: relative; width: 84px; height: 84px; flex-shrink: 0; } .gv-orb { position: absolute; inset: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #16d390 0%, #0e7a55 60%, #074a33 100%); box-shadow: 0 0 28px rgba(22,211,144,0.45), inset 0 0 18px rgba(255,255,255,0.08); transition: background .5s ease, box-shadow .5s ease; } .gv-orb.warn { background: radial-gradient(circle at 35% 30%, #f5b341 0%, #b07a1c 60%, #663f08 100%); box-shadow: 0 0 28px rgba(245,179,65,0.4), inset 0 0 18px rgba(255,255,255,0.08); } .gv-orb.error { background: radial-gradient(circle at 35% 30%, #ef4e62 0%, #93142a 60%, #4a0613 100%); box-shadow: 0 0 28px rgba(239,78,98,0.45), inset 0 0 18px rgba(255,255,255,0.08); } .gv-orb.idle { background: radial-gradient(circle at 35% 30%, #4f5a78 0%, #2b3245 60%, #181c28 100%); box-shadow: 0 0 16px rgba(91,140,255,0.18), inset 0 0 18px rgba(255,255,255,0.04); } .gv-orb-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(22,211,144,0.4); animation: gvPulseRing 2.6s cubic-bezier(0.4,0,0.2,1) infinite; } .gv-orb.warn ~ .gv-orb-ring { border-color: rgba(245,179,65,0.35); } .gv-orb.error ~ .gv-orb-ring { border-color: rgba(239,78,98,0.35); } .gv-orb.idle ~ .gv-orb-ring { border-color: rgba(120,130,160,0.18); animation-duration: 4.5s; } @keyframes gvPulseRing { 0% { transform: scale(0.7); opacity: 0.9; } 100% { transform: scale(1.15); opacity: 0; } } .gv-orb-label .gv-orb-state { font-size: 16px; font-weight: 600; color: var(--text); } .gv-orb-label .gv-orb-detail { font-size: 12px; color: var(--muted); margin-top: 3px; max-width: 240px; } /* Reflex ribbon — last N guardrail decisions as severity-height bars. */ .gv-reflex { min-width: 0; } .gv-reflex-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 6px; flex-wrap: wrap; } .gv-reflex-caption { font-size: 11px; color: var(--muted); } .gv-reflex-legend { display: flex; gap: 12px; font-size: 11px; color: var(--muted); } .gv-reflex-legend span { display: inline-flex; align-items: center; gap: 5px; } .gv-reflex-legend i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; } .gv-reflex-ribbon { height: 50px; display: flex; align-items: flex-end; gap: 2px; border: 1px solid var(--border); border-radius: 10px; padding: 6px; background: rgba(255,255,255,0.015); overflow: hidden; } .gv-bar-cell { flex: 1; min-width: 2px; max-width: 9px; border-radius: 1px; background: var(--gv-hue-rag); opacity: 0.9; cursor: pointer; transition: height .25s ease, filter .15s ease; } .gv-bar-cell:hover { filter: brightness(1.25); } .gv-bar-cell:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .gv-bar-cell.allow { background: var(--gv-hue-rag); } .gv-bar-cell.warn { background: var(--gv-hue-tool); } .gv-bar-cell.block { background: var(--gv-hue-blocked); } .gv-bar-cell.redact { background: var(--gv-hue-eval); } .gv-bar-cell.empty { background: rgba(255,255,255,0.05); opacity: 0.5; cursor: default; } /* Guardrail breakdown — colored proportional bars (Metrics panel). */ .gv-breakdown { display: flex; flex-direction: column; gap: 10px; } .gv-bd-row { display: grid; grid-template-columns: minmax(150px, 260px) 1fr 150px; align-items: center; gap: 14px; } @media (max-width: 720px) { .gv-bd-row { grid-template-columns: 1fr; gap: 4px; } } .gv-bd-name { font-family: 'Fira Code', monospace; font-size: 12px; color: var(--text); overflow-wrap: anywhere; } .gv-bd-name .gv-bd-stage { color: var(--muted); } .gv-bd-bar { height: 10px; background: rgba(255,255,255,0.05); border-radius: 6px; overflow: hidden; } .gv-bd-fill { height: 100%; border-radius: 6px; transition: width .5s cubic-bezier(0.4,0,0.2,1); background: linear-gradient(90deg, var(--gv-hue-chat), var(--gv-hue-eval)); } .gv-bd-row.block .gv-bd-fill { background: linear-gradient(90deg, var(--gv-hue-blocked), #b1394a); } .gv-bd-row.warn .gv-bd-fill { background: linear-gradient(90deg, var(--gv-hue-tool), #c08a26); } .gv-bd-row.allow .gv-bd-fill { background: linear-gradient(90deg, var(--gv-hue-rag), #0e7a55); } .gv-bd-row.redact .gv-bd-fill { background: linear-gradient(90deg, var(--gv-hue-eval), #6d3fc4); } .gv-bd-count { font-size: 12px; color: var(--muted); text-align: right; font-family: 'Fira Code', monospace; } .gv-bd-count strong { color: var(--text); } /* ══════════════════════════════════════════════════════════════════════════ Atlas — model planetarium (Phase 3, Model Registry panel) ══════════════════════════════════════════════════════════════════════════ */ .gv-atlas { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 8px; position: relative; overflow: hidden; } .gv-atlas svg { width: 100%; height: 560px; display: block; } .gv-atlas-legend { display: flex; flex-wrap: wrap; gap: 16px; padding: 10px 12px 4px; font-size: 11px; color: var(--muted); } .gv-atlas-legend .gv-legend-item { display: inline-flex; align-items: center; gap: 6px; } .gv-atlas-legend .gv-dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; } .gv-atlas-active-status { font-size: 11px; color: var(--muted); padding: 0 12px 8px; } .gv-atlas-active-status.live { color: var(--gv-hue-rag); font-weight: 600; } .gv-orbit-ring { fill: none; stroke: rgba(120,130,160,0.12); stroke-width: 1; stroke-dasharray: 2 6; } .gv-sun { filter: drop-shadow(0 0 24px rgba(245,179,65,0.45)); } .gv-sun-pulse { fill: none; stroke: rgba(245,179,65,0.5); animation: gvSunPulse 3.4s ease-in-out infinite; } @keyframes gvSunPulse { 0%, 100% { transform: scale(1); opacity: 0.6; } 50% { transform: scale(1.18); opacity: 0.2; } } .gv-atlas-sunlabel { fill: var(--muted); font-size: 10px; font-family: 'Fira Code', monospace; } .gv-planet { cursor: pointer; transition: transform 0.2s ease; } .gv-planet:hover { transform: scale(1.18); transform-origin: center; transform-box: fill-box; } .gv-planet .body { stroke: rgba(255,255,255,0.18); stroke-width: 0.6; filter: drop-shadow(0 0 6px var(--planet-color, var(--gv-hue-chat))); transition: filter 0.25s ease; } .gv-planet:focus-visible .body { stroke: #fff; stroke-width: 1.8; outline: none; } .gv-planet .ring { fill: none; stroke: rgba(255,255,255,0.55); stroke-width: 1; } .gv-planet.guardrail-strict .ring { stroke: var(--gv-hue-tool); stroke-width: 1.6; } .gv-planet.guardrail-redact_only .ring { stroke: var(--gv-hue-eval); stroke-width: 2.2; stroke-dasharray: 2 2; } .gv-planet .label { font-size: 10px; font-family: 'Fira Code', monospace; fill: var(--muted); text-anchor: middle; pointer-events: none; opacity: 0; transition: opacity .15s ease; } .gv-planet:hover .label, .gv-planet:focus-visible .label, .gv-planet.active-model .label { opacity: 1; } svg.labels-all .gv-planet .label { opacity: 1; } svg.labels-off .gv-planet .label { opacity: 0; } svg.labels-off .gv-planet:hover .label, svg.labels-off .gv-planet:focus-visible .label { opacity: 1; } .gv-active-halo { fill: none; stroke: var(--gv-hue-rag); stroke-width: 1.5; opacity: 0.5; } .gv-active-badge { font-size: 9px; font-family: 'Fira Code', monospace; fill: var(--gv-hue-rag); font-weight: 700; } /* ══════════════════════════════════════════════════════════════════════════ Genealogy — prompt-version forest (Phase 4, Prompt Catalog panel) ══════════════════════════════════════════════════════════════════════════ */ .gv-forest { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; padding: 4px 2px; } .gv-tree { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 16px 16px 12px; position: relative; transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.2s ease; } .gv-tree:hover { transform: translateY(-2px); border-color: var(--border-lt); box-shadow: 0 10px 30px rgba(0,0,0,0.4); } .gv-tree-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 4px; } .gv-tree-name { font-size: 14px; font-weight: 600; font-family: 'Fira Code', monospace; color: var(--text); flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; word-break: normal; } .gv-tree-tag { font-size: 10px; color: var(--muted); background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: 999px; padding: 3px 8px; text-transform: uppercase; letter-spacing: 0.06em; flex: 0 1 auto; max-width: 55%; white-space: normal; overflow-wrap: anywhere; } .gv-tree-meta { font-size: 11px; color: var(--faint); margin-bottom: 12px; display: flex; gap: 12px; flex-wrap: wrap; } .gv-tree-meta .item { display: inline-flex; gap: 4px; align-items: center; } .gv-trunk { position: relative; padding: 8px 0 4px 14px; border-left: 2px dashed rgba(120,130,160,0.25); margin-left: 8px; } .gv-trunk.canopy-prod { border-left-color: var(--gv-bark-prod); border-left-style: solid; } .gv-trunk.canopy-appr { border-left-color: var(--gv-bark-appr); border-left-style: solid; } .gv-trunk.canopy-draft { border-left-color: var(--gv-bark-draft); border-left-style: solid; } .gv-trunk.canopy-arch { border-left-color: var(--gv-bark-arch); } .gv-version { position: relative; cursor: pointer; padding: 5px 6px 5px 18px; border-radius: 7px; margin: 2px 0; transition: background 0.15s ease; } .gv-version:hover { background: rgba(255,255,255,0.04); } .gv-version:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .gv-version.selected { background: rgba(91,140,255,0.10); outline: 1px solid rgba(91,140,255,0.4); } .gv-version::before { content: ''; position: absolute; left: -8px; top: 50%; width: 14px; height: 14px; border-radius: 50%; transform: translateY(-50%); background: var(--gv-bark-draft); border: 2px solid var(--bg-body); box-shadow: 0 0 0 1px var(--border); transition: box-shadow 0.15s ease; } .gv-version.status-production::before { background: var(--gv-bark-prod); box-shadow: 0 0 8px var(--gv-bark-prod), 0 0 0 1px var(--gv-bark-prod); } .gv-version.status-approved::before { background: var(--gv-bark-appr); box-shadow: 0 0 6px var(--gv-bark-appr); } .gv-version.status-draft::before { background: var(--gv-bark-draft); } .gv-version.status-archived::before { background: var(--gv-bark-arch); } .gv-version-label { font-family: 'Fira Code', monospace; font-size: 12px; color: var(--text); } .gv-version-status { font-size: 10px; color: var(--faint); text-transform: uppercase; letter-spacing: 0.08em; margin-left: 6px; } .gv-version-rating { float: right; color: var(--gv-bark-prod); font-size: 11px; font-family: 'Fira Code', monospace; } .gv-version-rating .star { color: var(--gv-bark-prod); } .gv-version-fork { margin-left: 4px; padding: 1px 4px; border-radius: 3px; font-size: 9px; font-family: monospace; text-transform: uppercase; background: rgba(156,107,255,0.12); color: var(--gv-hue-eval); border: 1px solid rgba(156,107,255,0.3); } .gv-forest-stats { font-size: 11px; color: var(--muted); margin: 4px 0 10px; } /* ══════════════════════════════════════════════════════════════════════════ Garden — regulation plants (Phase 5, NEW Policy Watch panel) ══════════════════════════════════════════════════════════════════════════ */ .gv-garden { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; padding: 4px 2px; } .gv-plant { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 16px 16px 12px; cursor: pointer; display: flex; flex-direction: column; position: relative; transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.2s ease; } .gv-plant:hover { transform: translateY(-3px); border-color: var(--border-lt); box-shadow: 0 14px 40px rgba(0,0,0,0.45); } .gv-plant:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .gv-plant.selected { border-color: rgba(91,140,255,0.55); box-shadow: 0 0 32px rgba(91,140,255,0.25); } .gv-plant-svg { width: 100%; height: 130px; display: block; margin: 6px 0 12px; } .gv-plant-svg .stem { stroke: var(--gv-plant-stem); stroke-width: 2.2; stroke-linecap: round; fill: none; } .gv-plant-svg .leaf { fill: var(--gv-leaf-healthy); transition: fill 0.4s ease; } .gv-plant-svg .leaf.wilt { fill: var(--gv-leaf-wilt); } .gv-plant-svg .leaf.dead { fill: var(--gv-leaf-dead); } .gv-plant-svg .leaf.dim { fill: var(--gv-leaf-dim); } .gv-plant-svg .flower { fill: var(--gv-bloom-gold); opacity: 0; transition: opacity 0.5s ease, transform 0.5s ease; transform-origin: center; } .gv-plant-svg .flower.show { opacity: 1; } .gv-plant-svg .flower.red { fill: var(--gv-bloom-red); animation: gvFlowerPulse 2s ease-in-out infinite; } .gv-plant-svg .flower.gold { fill: var(--gv-bloom-gold); } .gv-plant-svg .soil { fill: var(--gv-plant-soil); } .gv-plant-svg .root { stroke: var(--gv-plant-stem); stroke-width: 1; stroke-linecap: round; fill: none; opacity: 0.55; } @keyframes gvFlowerPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } } .gv-plant-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 4px; } .gv-plant-name { font-size: 14px; font-weight: 600; color: var(--text); word-break: break-word; line-height: 1.3; } .gv-plant-tag { font-size: 10px; color: var(--muted); background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: 999px; padding: 3px 8px; text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; } .gv-plant-meta { font-size: 11px; color: var(--faint); display: flex; gap: 12px; flex-wrap: wrap; } .gv-plant-meta .item { display: inline-flex; gap: 4px; align-items: center; } .gv-plant-state { margin-top: 10px; padding: 8px 10px; border-radius: 8px; background: rgba(255,255,255,0.02); border: 1px solid var(--border); font-size: 11px; color: var(--muted); line-height: 1.4; } .gv-plant-state strong { color: var(--text); font-weight: 600; } .gv-plant.healthy .gv-plant-state strong { color: var(--gv-leaf-healthy); } .gv-plant.bloom-red .gv-plant-state strong { color: var(--gv-bloom-red); } .gv-plant.bloom-gold .gv-plant-state strong { color: var(--gv-bloom-gold); } .gv-plant.wilting .gv-plant-state strong { color: var(--gv-leaf-wilt); } .gv-plant.seedling .gv-plant-state strong { color: var(--gv-hue-chat); } .gv-garden-stats { font-size: 11px; color: var(--muted); margin: 4px 0 10px; } .gv-garden-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 11px; color: var(--muted); margin: 0 0 12px; } .gv-garden-legend .gv-legend-item { display: inline-flex; align-items: center; gap: 6px; } .gv-garden-legend .gv-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }