/* Default theme is dark. The light theme lives under :root[data-theme="light"] further down — adding a `data-theme="light"` attribute to (handled by the boot script in index.html + the topbar toggle) flips the entire palette without touching JSX. Tokens ending in -fg/-bg/-stroke are explicitly theme-paired so SVG hardcodes in graph.jsx don't have to branch in JS. */ :root { /* Design-brief palette (Process Map.dc.html, 2026-07): neutral charcoal surfaces + a single cyan accent. Replaces the old blue-tinted dark scale so the app reads like a focused devtool rather than a "dashboard blue". */ --bg: #121212; --bg-1: #1E1E1E; /* panels: top bar, rails, side panel */ --bg-2: #242424; /* raised: cards, inputs, hover */ --bg-3: #2A2A2A; /* raised2: active / selected surfaces */ --line: #2E2E2E; --line-2: #454545; /* borderStrong: hover borders, dividers */ --text: rgba(255,255,255,0.87); /* hi */ --text-2: rgba(255,255,255,0.60); /* med */ --text-3: rgba(255,255,255,0.38); /* low */ --text-4: rgba(255,255,255,0.24); --accent: #22D3EE; /* brief accent (cyan) */ --accent-2: #22D3EE; /* alias — both point at the brief accent */ --accent-deep: #0891B2; /* darker cyan for deep-accent buttons */ --accent-soft: rgba(34,211,238,0.15); /* active-tab / selected tint */ --accent-border: rgba(34,211,238,0.35); /* active-tab border */ --warn: #E69F00; /* Wong orange (status: warn) */ --bad: #D55E00; /* Wong vermilion (status: gap/error) */ --good: #009E73; /* Wong bluish-green (status: ok) */ --violet: #CC79A7; /* Wong reddish-purple */ --pink: #CC79A7; --indigo: #4C8DDA; /* Wong blue */ --grid: rgba(255, 255, 255, 0.05); /* Wong colorblind-safe categorical palette (Process Map.dc.html brief). Theme-independent so a colour keeps its meaning in light and dark — the whole point of the palette. Used for edge types + overlay dimensions. */ --cat-1: #E69F00; /* orange */ --cat-2: #009E73; /* bluish-green */ --cat-3: #F0E442; /* yellow */ --cat-4: #4C8DDA; /* blue */ --cat-5: #D55E00; /* vermilion */ --cat-6: #CC79A7; /* reddish-purple */ --cat-7: #999999; /* gray */ --status-ok: #009E73; --status-warn: #E69F00; --status-gap: #D55E00; /* Edge-type semantics — solid = authored, dashed = computed. */ --edge-calls: var(--cat-1); /* orange */ --edge-rw: var(--cat-2); /* green — reads/writes */ --edge-syncs: var(--cat-4); /* blue — bidirectional sync */ --edge-depends: var(--cat-6); /* purple */ --edge-computed: #8A8A8A; /* gray, dashed */ /* Cross-theme tokens. The dark values live here; the light overrides mirror them under [data-theme="light"]. New code MUST reference these instead of hardcoding rgba/hex so a future theme stays a one-stop edit. */ --surface-translucent: rgba(30, 30, 30, 0.88); /* canvas-toolbar, minimap */ --backdrop: rgba(0, 0, 0, 0.5); /* modal backdrop */ --shadow-md: 0 6px 22px rgba(0, 0, 0, 0.55); --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.6); --primary-fg: #0A0A0A; /* accentText — text on cyan btn */ --card-selected-fill: #2A2A2A; /* selected process/task body */ --artifact-produced-fill: #10231C; /* dark-green hex fill */ --artifact-orphan-fill: #2A1B0A; /* dark-amber hex fill */ --artifact-produced-stroke: #009E73; --artifact-orphan-stroke: #E69F00; --canvas-glow: rgba(34, 211, 238, 0.05); /* radial gradient on canvas */ --sandbox-bg: rgba(245, 158, 11, 0.10); /* topbar SANDBOX pill bg */ --sandbox-fg: var(--warn); /* topbar SANDBOX pill text */ /* Spec §2.1 domain accents — used for process-card left borders. */ --domain-compliance: #FB7185; --domain-risk: #F59E0B; --domain-client: #5EE6E6; --domain-operations: #34D399; --domain-procurement: #A78BFA; --domain-service: #E879F9; --domain-default: #5EE6E6; --radius-sm: 4px; --radius: 6px; --radius-lg: 10px; --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; --sans: "IBM Plex Sans", "Inter Tight", ui-sans-serif, system-ui, -apple-system, sans-serif; } /* Light theme — invert the surface scale, keep the accent palette (cyan reads OK on both) but darken --accent slightly so it has enough contrast on a white-ish background. SVG fills for artifact hexes flip to tinted pastels; the dark-on-dark "selected" fill becomes a light-blue tint. */ :root[data-theme="light"] { /* Design-brief light palette: cool off-white #EEF0F3 with white panels and a desaturated cyan accent (#0E9CB8) that clears contrast on white. */ --bg: #EEF0F3; /* canvas */ --bg-1: #FFFFFF; /* panels: top bar, rails, side panel */ --bg-2: #F5F6F8; /* raised: cards, inputs, hover */ --bg-3: #ECEEF1; /* raised2: active / selected surfaces */ --line: #DCDFE4; --line-2: #B4B9C1; --text: rgba(17,20,24,0.90); /* hi */ --text-2: rgba(17,20,24,0.62); /* med */ --text-3: rgba(17,20,24,0.44); /* low — nudged up from .40 for 12px AA */ --text-4: rgba(17,20,24,0.30); --accent: #0E9CB8; /* brief light accent (desaturated cyan) */ --accent-2: #0E9CB8; --accent-deep: #0B7E96; --accent-soft: rgba(14,156,184,0.14); --accent-border: rgba(14,156,184,0.30); --warn: #B8790A; /* Wong orange, darkened for light-bg contrast */ --bad: #C24E00; /* Wong vermilion, darkened */ --good: #067A5A; /* Wong green, darkened */ --violet: #A85B87; --pink: #A85B87; --indigo: #3D74BE; --grid: rgba(20, 30, 50, 0.06); --surface-translucent: rgba(255, 255, 255, 0.90); --backdrop: rgba(20, 30, 50, 0.42); --shadow-md: 0 6px 22px rgba(20, 30, 50, 0.18); --shadow-lg: 0 24px 60px rgba(20, 30, 50, 0.20); --primary-fg: #FFFFFF; --card-selected-fill: #DCF4F9; /* cyan-tinted selected card body */ --artifact-produced-fill: #E6F6F0; --artifact-orphan-fill: #FBF0E2; --artifact-produced-stroke: #067A5A; --artifact-orphan-stroke: #B8790A; --canvas-glow: rgba(14, 156, 184, 0.04); /* L2: stronger sandbox pill tint — the dark-theme rgba(245,158,11,0.10) vanishes on white. amber-600 at 18% reads as a clear "sandbox" badge against light bg without competing with content. */ --sandbox-bg: rgba(217, 119, 6, 0.18); --sandbox-fg: #B45309; /* amber-700 — passes AA on the lighter tint */ } * { box-sizing: border-box; } html, body, #root { height: 100%; margin: 0; } body { background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 13px; line-height: 1.45; letter-spacing: -0.005em; overflow: hidden; -webkit-font-smoothing: antialiased; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } input, select { font: inherit; color: inherit; } /* App skeleton */ .app { display: grid; grid-template-rows: 56px 1fr 28px; grid-template-columns: 236px 1fr 360px; grid-template-areas: "topbar topbar topbar" "left canvas right" "status status status"; height: 100vh; } /* Demo-mode adds a banner row above the topbar; without this override the implicitly-placed banner div drops into the next free grid cell (bottom left) and squeezes its text into a 248px column — see round 12 fix. */ .app.demo { grid-template-rows: 32px 56px 1fr 28px; grid-template-areas: "demo demo demo" "topbar topbar topbar" "left canvas right" "status status status"; } .demo-banner { grid-area: demo; background: var(--accent-2, #5EE6E6); color: #000; padding: 6px 14px; font-size: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; z-index: 100; } .demo-banner a { color: #000; text-decoration: underline; } .demo-banner span { flex: 1 1 auto; text-align: center; } .demo-banner > a:first-child { flex: 0 0 auto; } .topbar { grid-area: topbar; border-bottom: 1px solid var(--line); background: var(--bg-1); } .left { grid-area: left; border-right: 1px solid var(--line); background: var(--bg-1); overflow: hidden auto; } .canvas { grid-area: canvas; background: var(--bg); position: relative; overflow: hidden; } .right { grid-area: right; border-left: 1px solid var(--line); background: var(--bg-1); overflow: hidden; display: flex; flex-direction: column; } .status { grid-area: status; border-top: 1px solid var(--line); background: var(--bg-1); } /* Topbar */ .topbar { display: flex; align-items: center; gap: 12px; padding: 0 14px; /* Prevent any child forcing the bar to wrap. Search shrinks first (only flex-grow > 0), then breadcrumb ellipsises; brand and tabs hold their intrinsic width. UI critic R7 #6.1. */ flex-wrap: nowrap; min-width: 0; overflow: hidden; } .brand { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; font-family: var(--sans); color: var(--text); white-space: nowrap; } /* Design-brief wordmark: sentence-case "ProcessMap", tight tracking. */ .brand-name { color: var(--text); font-weight: 600; font-size: 14px; letter-spacing: -0.01em; } .brand-sub { color: var(--text-3); margin-left: 6px; font-family: var(--mono); font-size: 11px; } .topbar-divider { width: 1px; height: 24px; background: var(--line); flex: 0 0 auto; } .topbar .breadcrumb { display: flex; align-items: center; gap: 6px; color: var(--text-2); font-family: var(--mono); font-size: 11.5px; /* Single-line, ellipsis on overflow so a long crumb doesn't push the search/tabs off-screen. */ flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .topbar .breadcrumb .crumb { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .topbar .breadcrumb .sep { color: var(--text-3); } .topbar .breadcrumb .crumb { color: var(--text-2); cursor: pointer; padding: 2px 4px; border-radius: 3px; } .topbar .breadcrumb .crumb:hover { background: var(--bg-3); color: var(--text); } .topbar .breadcrumb .crumb.active { color: var(--text); } .topbar .search { margin-left: auto; display: flex; align-items: center; gap: 8px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 5px 9px; /* Search is the only flex-grow > 0 — it shrinks first when the bar gets crowded. Floor at 120px (still usable; sub-160 gets cramped but at least the trailing controls stay visible — round 8 critic #1). */ flex: 1 1 320px; min-width: 120px; } .topbar .search input { background: transparent; border: 0; outline: 0; flex: 1; font-size: 12.5px; color: var(--text); } .topbar .search .kbd { font-family: var(--mono); font-size: 10.5px; color: var(--text-3); border: 1px solid var(--line-2); padding: 1px 5px; border-radius: 3px; } /* Trailing widgets (Health link, Saved-views menu, +New, Clerk org switcher, user button) must hold their intrinsic width — clipping them is worse than shrinking the search field further. Round 8 critic #1. */ .topbar > .topbar-right, .topbar > [class*="newmenu"], .topbar > .iconbtn, .topbar > .savedviews { flex: 0 0 auto; } .topbar .savedviews, .topbar .iconbtn { display: flex; align-items: center; gap: 6px; padding: 5px 9px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-2); color: var(--text-2); font-size: 12px; } .topbar .savedviews:hover, .topbar .iconbtn:hover { color: var(--text); border-color: var(--line-2); } .topbar .tabs { display: flex; gap: 2px; margin-left: 14px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 2px; /* Hold intrinsic width so view-switch tabs aren't sacrificed when the bar is crowded — round 8 critic #1. */ flex: 0 0 auto; } .topbar .tabs button { font-size: 12px; padding: 5px 12px; border-radius: 4px; color: var(--text-3); /* Sentence-case + sans-serif so the four primary nav tabs are visually distinct from rail section headers and form-field labels (which still use mono uppercase). Designer critique §1 + §2. */ font-family: var(--sans); font-weight: 500; letter-spacing: 0; text-transform: none; } .topbar .tabs button:hover { color: var(--text-2); } .topbar .tabs button.active { background: var(--bg); color: var(--text); font-weight: 600; box-shadow: inset 0 -2px 0 0 var(--accent-2); } /* Left sidebar */ .left h6 { font-family: var(--mono); font-size: 10.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.08em; padding: 14px 14px 6px; margin: 0; } /* Design-brief: overlay layers are toggle switches, not checkboxes. */ .layer-row { display: grid; grid-template-columns: 32px 12px 1fr auto; gap: 9px; align-items: center; padding: 6px 12px; margin: 0 2px; border-radius: 6px; cursor: pointer; user-select: none; color: var(--text-2); } .layer-row:hover { background: var(--bg-2); color: var(--text); } .layer-row.on { color: var(--text); } .layer-row .swatch { width: 12px; height: 12px; border-radius: 3px; } .layer-row .check { /* toggle track */ width: 32px; height: 18px; border-radius: 10px; background: var(--line-2); position: relative; transition: background .15s; border: 0; } .layer-row.on .check { background: var(--accent); } .layer-row .check::after { /* knob */ content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: left .15s; } .layer-row.on .check::after { left: 16px; } .layer-row .count { font-family: var(--mono); font-size: 11px; color: var(--text-3); } .facet { padding: 0 14px 8px; } .facet .pill { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 11px; padding: 3px 8px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--line); color: var(--text-2); margin: 0 4px 4px 0; cursor: pointer; } .facet .pill.on { background: rgba(56, 189, 248, 0.12); border-color: var(--accent-deep); color: var(--accent); } .facet .pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); } .facet .pill .pill-info { margin-left: 6px; padding: 0 5px; border-radius: 3px; font-size: 10px; font-family: var(--mono); color: var(--text-3); cursor: pointer; border-left: 1px solid var(--line); } .facet .pill .pill-info:hover { color: var(--accent-2); background: rgba(94,230,230,0.1); } .savedview-list { padding: 0 8px 14px; } .savedview-list .row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 4px; color: var(--text-2); font-size: 12px; cursor: pointer; } .savedview-list .row:hover { background: var(--bg-2); color: var(--text); } .savedview-list .row .icon { width: 12px; opacity: 0.7; } /* Canvas chrome */ .canvas-toolbar { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; align-items: center; gap: 8px; z-index: 5; pointer-events: none; } .canvas-toolbar > * { pointer-events: auto; } .zoombox, .legendbox, .modebox { background: var(--surface-translucent); backdrop-filter: blur(8px); border: 1px solid var(--line); border-radius: var(--radius); font-family: var(--mono); font-size: 11px; color: var(--text-2); display: flex; align-items: center; } /* Round 14 — the zoom cluster must never be pushed off-canvas by a long legend: pin it right and let the legend shrink/clip instead. */ .zoombox { margin-left: auto; flex-shrink: 0; } .legendbox { flex: 0 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; } .zoombox button { padding: 4px 8px; border-right: 1px solid var(--line); color: var(--text-2); } .zoombox button:last-child { border-right: 0; } .zoombox button:hover { color: var(--text); } .zoombox .zoom-val { padding: 4px 10px; color: var(--text); } .modebox { padding: 2px; } .modebox button { padding: 4px 10px; border-radius: 4px; color: var(--text-2); font-family: var(--mono); font-size: 11px; white-space: nowrap; } .modebox button.active { background: var(--bg-3); color: var(--text); } .modebox-multi-pill { margin-left: 4px; padding: 4px 10px; border-radius: 4px; font-family: var(--mono); font-size: 11px; background: var(--accent-2, #5EE6E6); color: var(--primary-fg); white-space: nowrap; cursor: pointer; font-weight: 700; } .modebox-multi-pill:hover { filter: brightness(1.1); } .modebox-static { padding: 4px 10px; border-radius: 4px; color: var(--text); font-family: var(--mono); font-size: 11px; background: var(--bg-3); white-space: nowrap; } /* Legend is informational, not actionable — visually demote it so it stops reading as another row of clickable verbs next to the modebox (designer critique §11). Smaller text, no border, just floats over the canvas with muted background. */ .legendbox { padding: 4px 8px; gap: 10px; background: transparent !important; backdrop-filter: none !important; border: 0 !important; color: var(--text-3); font-size: 10.5px; margin-left: 4px; } .legendbox .item { display: flex; align-items: center; gap: 5px; } .legendbox .item .swatch { width: 8px; height: 8px; border-radius: 2px; } .minimap { position: absolute; right: 14px; bottom: 16px; width: 220px; height: 140px; background: var(--surface-translucent); border: 1px solid var(--line-2); border-radius: var(--radius); box-shadow: var(--shadow-md); overflow: hidden; z-index: 5; } /* Right details panel — sub-tabs use sentence-case sans + a 2px bottom-border selected state so they read as actual tabs rather than as another row of labels (designer critique §9 + §2). */ .right .panel-tabs { display: flex; gap: 2px; padding: 8px 10px 0; border-bottom: 1px solid var(--line); } .right .panel-tabs button { font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: 0; padding: 6px 10px 7px; color: var(--text-3); text-transform: none; border-bottom: 2px solid transparent; margin-bottom: -1px; } .right .panel-tabs button:hover { color: var(--text-2); } .right .panel-tabs button.active { color: var(--text); font-weight: 600; border-bottom-color: var(--accent-2); } .right .panel-tabs .panel-tab-label { font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: 0; padding: 6px 10px 7px; color: var(--text-3); text-transform: none; border-bottom: 2px solid transparent; margin-bottom: -1px; } .right .panel-tabs .panel-tab-label.active { color: var(--text); font-weight: 600; border-bottom-color: var(--accent-2); } .right .panel-body { flex: 1; overflow: auto; padding: 14px 16px 32px; } .kv { display: grid; grid-template-columns: 92px 1fr; gap: 6px 10px; align-items: start; margin: 8px 0; } .kv .k { font-family: var(--mono); font-size: 10.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; padding-top: 3px; } .kv .v { font-size: 12.5px; color: var(--text); } .kv .v.editable { border: 1px solid transparent; border-radius: 3px; padding: 2px 4px; margin: -2px -4px; } .kv .v.editable:hover { border-color: var(--line-2); } .section-title { display: flex; align-items: center; justify-content: space-between; font-family: var(--mono); font-size: 10.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.08em; margin: 18px 0 6px; } .tag { display: inline-flex; align-items: center; gap: 5px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 3px; padding: 2px 7px; font-family: var(--mono); font-size: 10.5px; color: var(--text-2); } .tag .dot { width: 6px; height: 6px; border-radius: 50%; } .authority { font-family: var(--mono); font-size: 10px; text-transform: uppercase; padding: 1px 5px; border-radius: 2px; letter-spacing: 0.06em; } .authority.mirrored { background: rgba(56,189,248,0.14); color: var(--accent); } .authority.curated { background: rgba(192,132,252,0.14); color: var(--violet); } .authority.derived { background: rgba(52,211,153,0.14); color: var(--good); } .status-badge { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 10.5px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); } .status-badge.published { color: var(--good); border-color: rgba(52,211,153,0.4); } .status-badge.draft { color: var(--text-3); } .status-badge.in_review { color: var(--warn); border-color: rgba(245,158,11,0.4); } .status-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .btn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 4px; font-size: 12px; font-family: var(--mono); background: var(--bg-2); border: 1px solid var(--line); color: var(--text); } .btn:hover { border-color: var(--line-2); background: var(--bg-3); } .btn.primary { background: var(--accent-deep); border-color: var(--accent-deep); color: var(--primary-fg); } .btn.primary:hover { background: var(--accent-2); } .btn.ghost { background: transparent; } .btn.danger { color: var(--bad); } .note { background: var(--bg-2); border: 1px solid var(--line); border-radius: 5px; padding: 10px 12px; font-size: 12px; color: var(--text-2); } .note .head { display: flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px; } /* Status strip */ .status { display: flex; align-items: center; gap: 8px; padding: 0 14px; font-family: var(--mono); font-size: 11px; color: var(--text-3); } .status .sep { color: var(--text-4); font-weight: 400; } .status .seg { display: flex; align-items: center; gap: 6px; } .status .seg .dot { width: 6px; height: 6px; border-radius: 50%; } .status .seg .dot.healthy { background: var(--good); box-shadow: 0 0 8px rgba(52,211,153,0.7); } .status .seg .dot.warning { background: var(--warn); box-shadow: 0 0 8px rgba(245,158,11,0.7); } .status .seg .dot.bad { background: var(--bad); } .status .grow { flex: 1; } .status .seg b { color: var(--text-2); font-weight: 500; } .status .seg .num { color: var(--text); } /* SVG canvas */ .graph { width: 100%; height: 100%; background: radial-gradient(circle at 50% 50%, var(--canvas-glow), transparent 60%), var(--bg); } .grid-bg { fill: var(--bg); } /* Node hover/selected */ .node-shadow { transition: opacity 120ms ease; } .node-shadow.dim { opacity: 0.15; } .process-card { cursor: grab; transition: opacity 140ms ease; } .process-card:active, .process-card.dragging { cursor: grabbing; } .process-card.dragging .body { stroke: var(--accent-2); stroke-width: 1.6; } .process-card.dim { opacity: 0.25; } .task.dim { opacity: 0.25; transition: opacity 0.15s ease; } .task.dragging .body { stroke: var(--accent-2); stroke-width: 1.6; } .process-card .body { fill: var(--bg-2); stroke: var(--line); stroke-width: 1; transition: stroke 120ms, fill 120ms; } .process-card:hover .body { stroke: var(--line-2); fill: var(--bg-3); } /* Round 12.13 — right-vertex drag-to-connect handle. Hidden by default so landscape stays clean; fades in on hover or when the card is selected. The transparent hit-target circle (first , fill="transparent") stays pointer-active regardless of opacity so users can grab from anywhere on the right edge. */ .process-card .proc-handle circle:nth-of-type(2), .process-card .proc-handle text { opacity: 0; transition: opacity 120ms; } .process-card:hover .proc-handle circle:nth-of-type(2), .process-card:hover .proc-handle text, .process-card.selected .proc-handle circle:nth-of-type(2), .process-card.selected .proc-handle text { opacity: 1; } .process-card.selected .body { stroke: var(--accent-2); stroke-width: 1.5; fill: var(--card-selected-fill); filter: url(#glow); } .process-card.selected .badge { fill: var(--accent-2); } /* Round 11D — marquee multi-select halo. Single "selected" still gets the glow; "multi" (size > 1 in the bulk set) overlays a dashed accent stroke so the user can tell single from bulk at a glance. */ .process-card.multi .body { stroke: var(--accent-2); stroke-width: 2; stroke-dasharray: 4 3; fill: var(--card-selected-fill); filter: none; } .task.multi .body { stroke: var(--accent-2); stroke-width: 2; stroke-dasharray: 4 3; } /* Marquee selection rectangle (graph coords; rendered inside the pan/zoom group so its stroke widens/narrows with zoom — that's intentional). */ .marquee-rect { fill: rgba(94, 230, 230, 0.08); stroke: #5EE6E6; stroke-width: 1.5; stroke-dasharray: 5 3; pointer-events: none; } .process-card .name { fill: var(--text); font-size: 13px; font-weight: 500; font-family: var(--sans); letter-spacing: -0.01em; } .process-card .domain { font-size: 9px; font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.14em; font-weight: 500; } .process-card .stat { fill: var(--text-3); font-size: 10px; font-family: var(--mono); } .process-card .status-badge-rect { stroke: none; } .process-card .status-badge-text { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; } .proc-edge { fill: none; stroke: #5EE6E6; stroke-width: 1.5; marker-end: url(#arr); } /* Authored process-to-process edges share one colour (Authored flow). The subtype is encoded with dash patterns so the line never collides with a computed overlay's colour (see Connections panel swatches). */ .proc-edge.precedes, .proc-edge.artifact { stroke: #5EE6E6; } .proc-edge.decision { stroke: #5EE6E6; stroke-dasharray: 4 3; } .proc-edge.trigger { stroke: #5EE6E6; stroke-dasharray: 1 3; } .proc-edge.loopback { stroke: #5EE6E6; stroke-dasharray: 6 3 1 3; } .proc-edge.app { stroke: var(--good); stroke-dasharray: 1 4; } /* Tag overlap is a computed overlay (spec §4.3): symmetric, dotted, color-set per tag. */ .proc-edge.tag-overlap { stroke-dasharray: 3 4; stroke-width: 1.1; opacity: 0.55; marker-end: none; } .proc-edge.dim { opacity: 0.18; } .proc-edge.hi { stroke-width: 2.4; opacity: 1; filter: url(#glow); } /* n8n-style "marching ants" — selected authored edges get an animated dashed stroke so it's obvious which edge is the delete-target. Overrides any subtype dasharray during selection. */ .proc-edge.selected, .task-edge.selected { stroke-dasharray: 8 4 !important; animation: edge-flow 0.6s linear infinite; } @keyframes edge-flow { to { stroke-dashoffset: -12; } } @media (prefers-reduced-motion: reduce) { .proc-edge.selected, .task-edge.selected { animation: none; } } /* Round 12.27 — simulation tracer highlight. Imperative attribute applied by simulate.jsx on the active node's . Pulsing glow so the user's eye is drawn to the current step without changing layout. */ [data-sim-active="true"] { filter: drop-shadow(0 0 6px rgba(94, 230, 230, 0.85)) drop-shadow(0 0 14px rgba(94, 230, 230, 0.55)); animation: sim-pulse 1.2s ease-in-out infinite; } @keyframes sim-pulse { 0%, 100% { filter: drop-shadow(0 0 6px rgba(94, 230, 230, 0.85)) drop-shadow(0 0 14px rgba(94, 230, 230, 0.55)); } 50% { filter: drop-shadow(0 0 10px rgba(94, 230, 230, 1)) drop-shadow(0 0 22px rgba(94, 230, 230, 0.75)); } } @media (prefers-reduced-motion: reduce) { [data-sim-active="true"] { animation: none; } } /* Round 12.8 — n8n-style hover affordance: edges thicken on hover so the user can target them confidently. Pairs with the wider transparent hit- target so a near-miss still highlights. */ .proc-edge:hover { stroke-width: 2; } .edge-label { font-family: var(--mono); font-size: 10px; fill: var(--text-3); } /* Task graph */ .lane-bg { fill: var(--bg-1); stroke: var(--line); stroke-dasharray: 2 4; } .lane-label { font-family: var(--mono); font-size: 10.5px; fill: var(--text-3); text-transform: uppercase; letter-spacing: 0.08em; } .task .body { fill: var(--bg-2); stroke: var(--line-2); stroke-width: 1; transition: all 120ms; } .task.decision .body { stroke: var(--warn); } .task:hover .body { stroke: var(--accent); } .task.selected .body { stroke: var(--accent); stroke-width: 1.5; fill: var(--card-selected-fill); filter: url(#glow); } .task .name { fill: var(--text); font-size: 12px; font-weight: 500; } .task .meta { fill: var(--text-3); font-size: 10px; font-family: var(--mono); } /* Round 11B — mid-edge "+" insert. Wide invisible hit area always present; visible glyph fades in on hover. Lives only on task edges, not on group containers or process-landscape edges. */ .midedge-add:hover .midedge-add-bg, .midedge-add:hover .midedge-add-glyph { opacity: 1 !important; } /* The "+" handle is always visible (was previously hover-only — discoverable trumps subtle for users who didn't know to hover). Decision branches still keep the legacy hover-fade so the canvas isn't littered with extra glyphs. */ .task .task-handle circle, .task .handle-glyph { transition: opacity 120ms, transform 120ms; } .task:hover .task-handle:not(.branch) circle:nth-of-type(2) { opacity: 1; transform: scale(1.08); transform-origin: center; transform-box: fill-box; } .task .task-handle.branch circle { opacity: 0; } .task:hover .task-handle.branch circle { opacity: 0.95; } .task:hover .task-handle.branch .handle-glyph { opacity: 1; } .task .task-handle.branch .handle-glyph { opacity: 0; } .task-edge { fill: none; stroke: var(--line-2); stroke-width: 1.4; marker-end: url(#arr); } /* Spec §4.2: precedes (cyan), decision (amber), trigger (rose), loopback (dashed rose) */ .task-edge.precedes, .task-edge.normal { stroke: #5EE6E6; } .task-edge.decision, .task-edge.decision_yes, .task-edge.decision_no { stroke: var(--warn); } .task-edge.trigger, .task-edge.exception { stroke: var(--bad); } .task-edge.loopback, .task-edge.rework { stroke: var(--bad); stroke-dasharray: 4 3; } .task-edge.artifact-flow { stroke: #E879F9; stroke-dasharray: 5 4; stroke-width: 1.2; opacity: 0.75; } .task-edge-label.artifact-flow { fill: #E879F9; opacity: 0.85; } .task-edge.hi { stroke-width: 2.6; opacity: 1; filter: url(#glow); } .task-edge:hover { stroke-width: 2; } .task-edge-label { fill: var(--text-2); font-family: var(--mono); font-size: 10px; /* Bumped halo from 3px → 4.5px so labels stay readable when they cross adjacent node borders or other edges (designer critique §12). */ paint-order: stroke; stroke: var(--bg); stroke-width: 4.5px; } .task-edge-label.artifact-flow { paint-order: stroke; stroke: var(--bg); stroke-width: 4.5px; } /* Artifact lineage */ .artifact-node .body { fill: rgba(192,132,252,0.16); stroke: var(--violet); stroke-width: 1; } .artifact-node .name { fill: var(--violet); font-size: 11px; font-family: var(--mono); } /* Halos for app/role overlays on tasks */ .halo { fill: none; stroke-width: 2; opacity: 0.85; } /* Tweaks */ .tweaks-panel { font-family: var(--sans) !important; } /* Tooltips */ .tip { position: absolute; pointer-events: none; background: var(--bg-3); border: 1px solid var(--line-2); border-radius: 5px; padding: 6px 10px; font-size: 11.5px; font-family: var(--mono); color: var(--text); white-space: nowrap; z-index: 10; box-shadow: 0 8px 24px rgba(0,0,0,0.4); } /* Diff & approvals */ .approval-card { background: var(--bg-2); border: 1px solid var(--line); border-radius: 5px; padding: 10px 12px; margin-bottom: 8px; } .approval-card .title { font-size: 12.5px; color: var(--text); margin-bottom: 4px; } .approval-card .meta { font-family: var(--mono); font-size: 10.5px; color: var(--text-3); } .approval-card .actions { display: flex; gap: 6px; margin-top: 8px; } /* Source rows */ .src-row { display: grid; grid-template-columns: 16px 1fr auto auto; gap: 10px; align-items: center; padding: 7px 14px; border-top: 1px solid var(--line); font-size: 12px; } .src-row .name { color: var(--text); } .src-row .meta { font-family: var(--mono); font-size: 10.5px; color: var(--text-3); } /* Scrollbars */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: 6px; border: 2px solid var(--bg-1); } ::-webkit-scrollbar-thumb:hover { background: var(--line-2); } ::-webkit-scrollbar-track { background: transparent; } /* SVG glow filter target */ .svg-defs { position: absolute; width: 0; height: 0; } /* Modals */ .modal-backdrop { position: fixed; inset: 0; background: var(--backdrop); backdrop-filter: blur(2px); display: grid; place-items: center; z-index: 1000; animation: bpm-fade 90ms ease; } .modal-card { background: var(--bg-1); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow-lg), 0 0 0 1px rgba(125,211,252,0.04); font-family: var(--sans); max-width: calc(100vw - 40px); max-height: calc(100vh - 80px); overflow: hidden; display: flex; flex-direction: column; } .modal-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--text-3); text-transform: uppercase; } .modal-body { padding: 16px; overflow: auto; } .modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); } .modal-error { background: rgba(239, 68, 68, 0.08); border: 1px solid rgba(239, 68, 68, 0.4); color: var(--bad); border-radius: 4px; padding: 6px 10px; font-family: var(--mono); font-size: 11.5px; margin-bottom: 6px; } .modal-card input:focus, .modal-card select:focus, .modal-card textarea:focus { border-color: var(--accent-deep); } @keyframes bpm-fade { from { opacity: 0 } to { opacity: 1 } } /* Canvas empty state */ .canvas-empty { position: absolute; inset: 60px 12px 12px 12px; display: grid; place-items: center; pointer-events: none; z-index: 4; } .canvas-empty .card { background: var(--surface-translucent); border: 1px dashed var(--line-2); border-radius: 8px; padding: 22px 28px; text-align: center; pointer-events: auto; max-width: 380px; } .canvas-empty h4 { margin: 0 0 6px; font-family: var(--mono); font-size: 11px; color: var(--text-3); letter-spacing: 0.08em; text-transform: uppercase; } .canvas-empty p { margin: 0 0 14px; font-size: 13px; color: var(--text-2); line-height: 1.5; } /* Tag chips (entity panel + sidebar) */ .tagchip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 9px; font-family: var(--mono); font-size: 10.5px; background: var(--bg-2); border: 1px solid var(--line); color: var(--text-2); cursor: pointer; } .tagchip .swatch { width: 7px; height: 7px; border-radius: 50%; } .tagchip:hover { color: var(--text); border-color: var(--line-2); } .tagchip.detach { padding-right: 4px; } .tagchip.detach .x { margin-left: 2px; padding: 0 4px; border-radius: 8px; color: var(--text-3); } .tagchip.detach .x:hover { color: var(--bad); background: rgba(251,113,133,0.12); } /* Map Health rows */ .maphealth { display: flex; flex-direction: column; gap: 6px; } .maphealth .row { display: grid; grid-template-columns: 14px 1fr auto; gap: 8px; align-items: start; padding: 8px 10px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 5px; font-size: 12px; color: var(--text-2); } .maphealth .row:hover { border-color: var(--line-2); } .maphealth .row .icon { font-family: var(--mono); font-size: 12px; color: var(--warn); line-height: 1; } .maphealth .row.bad .icon { color: var(--bad); } .maphealth .row.info .icon { color: var(--text-3); } .maphealth .row .meta { font-family: var(--mono); font-size: 10px; color: var(--text-3); } /* Onboarding wizard (Phase 6). Centered card on the dark background; minimal typography that matches the rest of the app. */ .onboarding-wizard { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--bg, #0B0E14); color: var(--text, #E6EAF2); font-family: var(--sans, "Inter Tight", system-ui, sans-serif); padding: 40px 20px; } .onboarding-wizard h1 { font-size: 28px; font-weight: 600; margin: 0 0 8px; letter-spacing: -0.01em; } .onboarding-wizard p { color: var(--text-2, #A6AFC2); font-size: 14px; margin: 0 0 28px; } .onboarding-wizard label { display: flex; align-items: flex-start; gap: 10px; width: 100%; max-width: 480px; padding: 14px 16px; margin-bottom: 10px; background: var(--bg-2, #11151E); border: 1px solid var(--line, #1E2330); border-radius: 6px; cursor: pointer; font-size: 13.5px; line-height: 1.45; transition: border-color 0.12s ease, background 0.12s ease; } .onboarding-wizard label:hover { border-color: var(--line-2, #2A3145); background: var(--bg-3, #161B26); } .onboarding-wizard label input[type="radio"] { margin-top: 2px; accent-color: var(--accent, #5EE6E6); } .onboarding-wizard input[type="text"] { width: 100%; max-width: 480px; box-sizing: border-box; padding: 10px 12px; margin: 6px 0 16px; background: var(--bg-2, #11151E); border: 1px solid var(--line, #1E2330); border-radius: 5px; color: var(--text, #E6EAF2); font-size: 13.5px; font-family: inherit; outline: none; } .onboarding-wizard input[type="text"]:focus { border-color: var(--accent, #5EE6E6); } .onboarding-wizard button { width: 100%; max-width: 480px; padding: 11px 18px; margin-top: 12px; background: var(--accent, #5EE6E6); color: var(--bg-1, #0B0E14); border: 0; border-radius: 5px; cursor: pointer; font-size: 13.5px; font-weight: 600; letter-spacing: 0.01em; font-family: inherit; transition: opacity 0.12s ease; } .onboarding-wizard button:disabled { opacity: 0.45; cursor: not-allowed; } /* Settings (Phase 7) — sidebar nav + main panel, dark theme. */ .settings-shell { display: grid; grid-template-columns: 200px 1fr; height: 100vh; background: var(--bg); color: var(--text); font-family: var(--sans); overflow: hidden; } .settings-nav { background: var(--bg-1); border-right: 1px solid var(--line); padding: 18px 10px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; } .settings-nav-title { font-family: var(--mono); font-size: 10.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.08em; padding: 0 10px 12px; } .settings-nav-link { display: block; padding: 7px 10px; border-radius: 4px; color: var(--text-2); font-size: 13px; text-decoration: none; cursor: pointer; } .settings-nav-link:hover { background: var(--bg-2); color: var(--text); } .settings-nav-link.active { background: var(--bg-3); color: var(--text); box-shadow: inset 2px 0 0 0 var(--accent-2); } .settings-nav-back { margin-top: auto; display: block; padding: 7px 10px; font-family: var(--mono); font-size: 11px; color: var(--text-3); text-decoration: none; } .settings-nav-back:hover { color: var(--text-2); } .settings-main { overflow-y: auto; padding: 28px 36px; } .settings-section { max-width: 880px; } .settings-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; } .settings-h2 { font-size: 18px; font-weight: 600; margin: 0 0 18px; letter-spacing: -0.005em; } .settings-section-head .settings-h2 { margin-bottom: 0; } .settings-empty { padding: 24px; background: var(--bg-1); border: 1px dashed var(--line); border-radius: 6px; color: var(--text-3); font-size: 13px; text-align: center; } .settings-error { background: rgba(251, 113, 133, 0.08); border: 1px solid rgba(251, 113, 133, 0.4); color: var(--bad); border-radius: 4px; padding: 8px 12px; font-family: var(--mono); font-size: 11.5px; margin-bottom: 14px; white-space: pre-wrap; } .settings-table { width: 100%; border-collapse: collapse; font-size: 13px; } .settings-table th { text-align: left; font-family: var(--mono); font-size: 10.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500; padding: 8px 10px; border-bottom: 1px solid var(--line); } .settings-table td { padding: 10px; border-bottom: 1px solid var(--line); color: var(--text); vertical-align: middle; } .settings-table tr:hover td { background: var(--bg-1); } /* Map Health dashboard rows — clickable list items in each section. */ .health-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 4px; color: var(--text); font-family: var(--sans); font-size: 13px; cursor: pointer; text-align: left; width: 100%; } .health-row:hover { background: var(--bg-3); border-color: var(--line-2); } .health-row-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .health-row-meta { font-family: var(--mono); font-size: 10.5px; color: var(--text-3); letter-spacing: 0.04em; } .settings-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--bg-3); border: 1px solid var(--line-2); display: grid; place-items: center; font-family: var(--mono); font-size: 11px; color: var(--accent-2); text-transform: uppercase; } .settings-pill { display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 9px; background: var(--bg-3); border: 1px solid var(--line-2); font-size: 10.5px; color: var(--text-3); letter-spacing: 0.02em; vertical-align: middle; } .settings-pill.mono { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; } .settings-muted { color: var(--text-3); } .settings-select { background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 4px; color: var(--text); padding: 5px 8px; font: inherit; font-size: 12.5px; width: 100%; outline: none; } .settings-select:focus { border-color: var(--accent-deep); } .settings-select:disabled { opacity: 0.55; cursor: not-allowed; } .settings-iconbtn { width: 24px; height: 24px; border-radius: 4px; background: transparent; border: 0; color: var(--text-3); font-size: 16px; line-height: 1; cursor: pointer; } .settings-iconbtn:hover { color: var(--bad); background: rgba(251,113,133,0.10); } .settings-iconbtn:disabled { opacity: 0.4; cursor: not-allowed; } .settings-btn { background: var(--bg-2); border: 1px solid var(--line-2); color: var(--text); padding: 7px 14px; border-radius: 4px; font: inherit; font-size: 12.5px; cursor: pointer; } .settings-btn:hover { border-color: var(--accent-deep); } .settings-btn:disabled { opacity: 0.45; cursor: not-allowed; } .settings-btn.small { padding: 4px 10px; font-size: 12px; } .settings-btn.primary { background: var(--accent-deep); border-color: var(--accent-deep); color: var(--primary-fg); font-weight: 600; } .settings-btn.primary:hover { filter: brightness(1.08); } .settings-btn.danger { background: rgba(251, 113, 133, 0.10); border-color: rgba(251, 113, 133, 0.45); color: var(--bad); } .settings-btn.danger:hover { background: rgba(251, 113, 133, 0.18); } .settings-actions { display: flex; gap: 8px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); } /* Roles tab two-pane layout */ .roles-layout { display: grid; grid-template-columns: 260px 1fr; gap: 18px; align-items: start; } .roles-list { background: var(--bg-1); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; } .roles-list-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 10.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; } .roles-list-item { display: block; width: 100%; text-align: left; padding: 10px 12px; background: transparent; border: 0; border-bottom: 1px solid var(--line); cursor: pointer; color: var(--text); } .roles-list-item:last-child { border-bottom: 0; } .roles-list-item:hover { background: var(--bg-2); } .roles-list-item.active { background: var(--bg-3); box-shadow: inset 2px 0 0 0 var(--accent-2); } .roles-list-name { font-size: 13px; } .roles-list-meta { font-family: var(--mono); font-size: 10.5px; color: var(--text-3); margin-top: 2px; } .roles-editor { background: var(--bg-1); border: 1px solid var(--line); border-radius: 6px; padding: 16px 18px; } .settings-field { margin-bottom: 16px; } .settings-label { display: block; font-family: var(--mono); font-size: 10.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; } .settings-input { width: 100%; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 4px; color: var(--text); padding: 8px 10px; font: inherit; font-size: 13px; outline: none; } .settings-input:focus { border-color: var(--accent-deep); } .settings-input[readonly] { color: var(--text-2); background: var(--bg-1); } .settings-hint { font-family: var(--mono); font-size: 10.5px; color: var(--text-3); margin-bottom: 14px; } /* Sub-project 2: Members tab pending-invites section + accept-invite page. */ .settings-subhead { font-family: var(--mono); font-size: 10.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; font-weight: 500; } .auth-page { min-height: 100vh; display: grid; place-items: center; background: var(--bg); padding: 24px; } .auth-card { width: 100%; max-width: 460px; background: var(--bg-1); border: 1px solid var(--line); border-radius: 8px; padding: 32px; display: flex; flex-direction: column; gap: 12px; align-items: stretch; } .auth-brand { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 13px; letter-spacing: 0.04em; color: var(--text); font-weight: 600; margin-bottom: 4px; text-decoration: none; } .auth-brand .brand-mark { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--accent-2); position: relative; display: inline-block; } .auth-brand .brand-mark::after { content: ""; position: absolute; inset: 3px; background: var(--accent-2); border-radius: 50%; opacity: 0.85; } .auth-recovery { color: var(--text-3); font-size: 13px; margin-top: 4px; text-align: center; } .auth-recovery a { color: var(--text-2); } .auth-title { font-size: 18px; font-weight: 600; margin: 0; letter-spacing: -0.005em; } .auth-muted { color: var(--text-3); font-size: 13px; margin: 0 0 8px; } .perm-group { margin-bottom: 14px; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; } .perm-group-head { background: var(--bg-2); padding: 6px 10px; font-family: var(--mono); font-size: 10.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; border-bottom: 1px solid var(--line); } .perm-row { display: grid; grid-template-columns: 18px 200px 1fr; gap: 10px; align-items: center; padding: 6px 10px; font-size: 12.5px; cursor: pointer; border-bottom: 1px solid var(--line); } .perm-row:last-child { border-bottom: 0; } .perm-row:hover { background: var(--bg-2); } .perm-row.disabled { cursor: default; opacity: 0.65; } .perm-row.disabled:hover { background: transparent; } .perm-slug { font-family: var(--mono); font-size: 11.5px; color: var(--text-2); } .perm-desc { color: var(--text-3); font-size: 12px; } /* Org tab key-value display + danger zone */ .settings-kv { background: var(--bg-1); border: 1px solid var(--line); border-radius: 6px; margin-bottom: 24px; } .settings-kv-row { display: grid; grid-template-columns: 160px 1fr; padding: 12px 16px; border-bottom: 1px solid var(--line); } .settings-kv-row:last-child { border-bottom: 0; } .settings-kv-key { font-family: var(--mono); font-size: 10.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; } .settings-kv-val { color: var(--text); font-size: 13px; } .settings-kv-val.mono { font-family: var(--mono); font-size: 12px; color: var(--text-2); } .settings-danger-zone { border: 1px solid rgba(251, 113, 133, 0.30); border-radius: 6px; padding: 16px 18px; background: rgba(251, 113, 133, 0.04); } .settings-danger-head { font-family: var(--mono); font-size: 10.5px; color: var(--bad); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; }