/* i18n paint gate: js/i18n.js sets data-i18n-pending on synchronously for non-English locales and removes it after translating the DOM. Hiding the translatable leaf text until then collapses the English→translated swap into a single paint (no flicker). visibility (not display) preserves layout so clearing the gate causes no reflow. */ :root[data-i18n-pending] [data-i18n] { visibility: hidden; } :root, :root[data-theme="light"] { --color-bark-50: #2f2016; --color-bark-100: #3d2a1c; --color-bark-200: #4d3524; --color-bark-300: #6f4a2e; --color-bark-400: #8c5f38; --color-bark-500: #a67748; --color-bark-600: #b89064; --color-bark-700: #ccb08a; --color-bark-800: #e0cfb5; --color-bark-900: #f5ede3; --color-bark-950: #faf6f1; --color-wa-dark: #f5ede3; --color-wa-panel: #fefcf9; --color-wa-bubble: #d9fdd3; --color-wa-incoming: #efe4d5; --color-wa-input: #ffffff; --theme-nav-hover: rgba(61, 42, 28, 0.06); --theme-surface-soft: rgba(255, 255, 255, 0.85); --theme-overlay-strong: rgba(61, 42, 28, 0.28); --theme-overlay-soft: rgba(61, 42, 28, 0.2); --theme-panel-bg: #fefcf9; --theme-panel-border: rgba(224, 207, 181, 0.8); --theme-control-bg: #f5ede3; --theme-control-bg-hover: #efe4d5; --theme-control-border: rgba(224, 207, 181, 0.95); --theme-control-text: #3d2a1c; --theme-chat-bg: #f5ede3; --theme-chat-pattern-opacity: 0.08; --theme-react-bg: #ffffff; --theme-react-border: rgba(224, 207, 181, 0.95); --theme-react-text: #6f4a2e; --theme-react-shadow: rgba(61, 42, 28, 0.12); --theme-scrollbar-track: transparent; --theme-scrollbar-thumb: rgba(61, 42, 28, 0.18); --theme-scrollbar-thumb-hover: rgba(61, 42, 28, 0.32); } :root[data-theme="dark"] { --color-bark-50: #faf6f1; --color-bark-100: #f0e8db; --color-bark-200: #e0cfb5; --color-bark-300: #ccb08a; --color-bark-400: #b89064; --color-bark-500: #a67748; --color-bark-600: #8c5f38; --color-bark-700: #6f4a2e; --color-bark-800: #5a3d28; --color-bark-900: #3d2a1c; --color-bark-950: #221710; --color-wa-dark: #0b141a; --color-wa-panel: #111b21; --color-wa-bubble: #005c4b; --color-wa-incoming: #1f2c34; --color-wa-input: #2a3942; --theme-nav-hover: rgba(255, 255, 255, 0.05); --theme-surface-soft: rgba(34, 23, 16, 0.9); --theme-overlay-strong: rgba(11, 20, 26, 0.45); --theme-overlay-soft: rgba(11, 20, 26, 0.35); --theme-panel-bg: #3d2a1c; --theme-panel-border: rgba(90, 61, 40, 0.5); --theme-control-bg: rgba(34, 23, 16, 0.9); --theme-control-bg-hover: rgba(61, 42, 28, 0.92); --theme-control-border: rgba(90, 61, 40, 0.5); --theme-control-text: #f0e8db; --theme-chat-bg: #0b141a; --theme-chat-pattern-opacity: 0.02; --theme-react-bg: #202c33; --theme-react-border: rgba(255, 255, 255, 0.18); --theme-react-text: #aebac1; --theme-react-shadow: rgba(11, 20, 26, 0.7); --theme-scrollbar-track: transparent; --theme-scrollbar-thumb: rgba(255, 255, 255, 0.15); --theme-scrollbar-thumb-hover: rgba(255, 255, 255, 0.28); } .client-item:hover { background: var(--theme-nav-hover) !important; } .chat-bg { background-color: var(--theme-chat-bg) !important; background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.02'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") !important; } :root[data-theme="light"] .chat-bg { background-image: none !important; } .theme-toggle { position: fixed; right: 0.85rem; bottom: 0.85rem; z-index: 80; display: inline-flex; align-items: center; gap: 0.35rem; border: 1px solid var(--theme-control-border); background: var(--theme-control-bg); color: var(--theme-control-text); border-radius: 999px; padding: 0.4rem 0.7rem; font-family: "DM Sans", sans-serif; font-size: 0.72rem; line-height: 1; font-weight: 600; letter-spacing: 0.02em; cursor: pointer; backdrop-filter: blur(5px); transition: background 0.15s ease; } .theme-toggle:hover { background: var(--theme-control-bg-hover); } .theme-toggle-icon { font-size: 0.8rem; } @media (max-width: 639px) { .theme-toggle { right: 0.65rem; bottom: 0.65rem; padding: 0.36rem 0.62rem; } } /* Support page: operator-state card shadow — soft in both themes */ :root[data-theme="dark"] .support-session-card { box-shadow: 0 24px 80px rgba(0, 0, 0, 0.28); } :root[data-theme="light"] .support-session-card { box-shadow: 0 12px 32px rgba(61, 42, 28, 0.08); } /* API app secret reveal warning — readable amber in both themes */ .api-app-secret-warning { color: #fbbf24; } :root[data-theme="light"] .api-app-secret-warning { color: #b45309; } /* Support page: active (post-impersonation) card — readable emerald in light mode */ :root[data-theme="light"] .support-active-card { border-color: rgba(5, 122, 85, 0.35); background: rgba(5, 122, 85, 0.08); } :root[data-theme="light"] .support-active-card .text-emerald-300\/80 { color: #057a55; } :root[data-theme="light"] .support-active-card .text-emerald-50, :root[data-theme="light"] .support-active-card .text-emerald-100\/85 { color: #04543a; } :root[data-theme="light"] .support-active-card a, :root[data-theme="light"] .support-active-card button { border-color: rgba(5, 122, 85, 0.35); color: #04543a; } :root[data-theme="light"] .support-active-card a:hover, :root[data-theme="light"] .support-active-card button:hover { background: rgba(5, 122, 85, 0.12); } /* Phase off-graph override warning — danger rose, readable in both themes */ .phase-override-danger { color: #fda4af; } :root[data-theme="light"] .phase-override-danger { border-color: rgba(190, 18, 60, 0.4); background: rgba(190, 18, 60, 0.08); color: #9f1239; } /* Sidebar impersonation banner — readable amber in light mode */ :root[data-theme="light"] .sidebar-impersonation-label { color: #9a4c00; } :root[data-theme="light"] .sidebar-impersonation-text, :root[data-theme="light"] .sidebar-impersonation-btn { color: #7c3f00; } :root[data-theme="light"] .sidebar-impersonation-btn { border-color: rgba(154, 76, 0, 0.35); } :root[data-theme="light"] .sidebar-impersonation-btn:hover { background: rgba(237, 137, 54, 0.18); } /* Router escalation WhatsApp status warning — readable amber in light mode */ :root[data-theme="light"] .router-escalation-warning-text { color: #7c3f00; } /* Contact missing-name warning icon — readable amber in light mode */ :root[data-theme="light"] .client-name-warning { color: #9a4c00; } /* Account-health fault banner — readable amber in light mode */ :root[data-theme="light"] .account-health-banner { border-color: rgba(154, 76, 0, 0.35); background: rgba(237, 137, 54, 0.1); color: #7c3f00; } :root[data-theme="light"] .account-health-banner a { color: #7c3f00; } :root[data-theme="light"] .account-health-banner a:hover { color: #5a2d00; } /* Line setup: Meta connection disabled card — readable rose in light mode */ :root[data-theme="light"] .meta-disabled-card { border-color: rgba(190, 18, 60, 0.35); background: rgba(190, 18, 60, 0.08); } :root[data-theme="light"] .meta-disabled-card .text-rose-100, :root[data-theme="light"] .meta-disabled-card .text-rose-100\/80 { color: #831843; } :root[data-theme="light"] .meta-disabled-card .text-rose-200\/70 { color: #9f1239; } /* Coexistence card: amber text on an amber tint goes near-invisible in light mode. Darken the amber tones the same way the meta-disabled card darkens its rose tones. */ :root[data-theme="light"] .coexistence-card { border-color: rgba(180, 83, 9, 0.3); background: rgba(245, 158, 11, 0.1); } :root[data-theme="light"] .coexistence-card .text-amber-100, :root[data-theme="light"] .coexistence-card .text-amber-100\/70, :root[data-theme="light"] .coexistence-card .text-amber-100\/80, :root[data-theme="light"] .coexistence-card .text-amber-200 { color: #92400e; } :root[data-theme="light"] .coexistence-card .text-amber-200\/70 { color: #b45309; } /* The sync-status rows render pale emerald/red on a near-white bark-950 tint in light mode — darken to readable tones. */ :root[data-theme="light"] .coexistence-card .text-emerald-300 { color: #047857; } :root[data-theme="light"] .coexistence-card .text-red-300, :root[data-theme="light"] .coexistence-card .text-red-100 { color: #b91c1c; } /* Phases page: chip colors per phase id, with both-mode legibility */ .phase-chip-onboarding { background: #38bdf8; } .phase-chip-active { background: #34d399; } .phase-chip-dormant { background: #fbbf24; } .phase-chip-churned { background: #f87171; } .phase-chip-default { background: #a78bfa; } .phase-chip-pending { background: #f59e0b; box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.18); } :root[data-theme="light"] .phase-chip-onboarding { background: #0284c7; } :root[data-theme="light"] .phase-chip-active { background: #047857; } :root[data-theme="light"] .phase-chip-dormant { background: #b45309; } :root[data-theme="light"] .phase-chip-churned { background: #b91c1c; } :root[data-theme="light"] .phase-chip-default { background: #6d28d9; } :root[data-theme="light"] .phase-chip-pending { background: #b45309; box-shadow: 0 0 0 2px rgba(180, 83, 9, 0.2); } /* Phases page: pending-request banner — readable amber in both modes */ .phase-pending-banner { border: 1px solid rgba(245, 158, 11, 0.45); background: rgba(245, 158, 11, 0.1); color: #fde68a; } :root[data-theme="light"] .phase-pending-banner { border-color: rgba(180, 83, 9, 0.4); background: rgba(245, 158, 11, 0.12); color: #7c3f00; } /* Phases page: trigger-source badges in history timeline */ .phase-trigger-badge { border: 1px solid transparent; } .phase-trigger-webhook { background: rgba(56, 189, 248, 0.16); color: #bae6fd; border-color: rgba(56, 189, 248, 0.3); } .phase-trigger-rule { background: rgba(167, 139, 250, 0.16); color: #ddd6fe; border-color: rgba(167, 139, 250, 0.3); } .phase-trigger-manual { background: rgba(52, 211, 153, 0.16); color: #a7f3d0; border-color: rgba(52, 211, 153, 0.3); } .phase-trigger-external { background: rgba(244, 114, 182, 0.16); color: #fbcfe8; border-color: rgba(244, 114, 182, 0.3); } .phase-trigger-model-approved { background: rgba(245, 158, 11, 0.16); color: #fde68a; border-color: rgba(245, 158, 11, 0.3); } .phase-trigger-manual_override { background: rgba(190, 18, 60, 0.16); color: #fda4af; border-color: rgba(190, 18, 60, 0.35); } .phase-trigger-default { background: rgba(140, 95, 56, 0.16); color: #ccb08a; border-color: rgba(140, 95, 56, 0.3); } :root[data-theme="light"] .phase-trigger-webhook { background: rgba(2, 132, 199, 0.12); color: #075985; border-color: rgba(2, 132, 199, 0.3); } :root[data-theme="light"] .phase-trigger-rule { background: rgba(109, 40, 217, 0.1); color: #4c1d95; border-color: rgba(109, 40, 217, 0.3); } :root[data-theme="light"] .phase-trigger-manual { background: rgba(4, 120, 87, 0.1); color: #04543a; border-color: rgba(4, 120, 87, 0.3); } :root[data-theme="light"] .phase-trigger-external { background: rgba(190, 24, 93, 0.1); color: #831843; border-color: rgba(190, 24, 93, 0.3); } :root[data-theme="light"] .phase-trigger-model-approved { background: rgba(180, 83, 9, 0.1); color: #7c3f00; border-color: rgba(180, 83, 9, 0.35); } :root[data-theme="light"] .phase-trigger-manual_override { background: rgba(190, 18, 60, 0.1); color: #9f1239; border-color: rgba(190, 18, 60, 0.35); } :root[data-theme="light"] .phase-trigger-default { background: rgba(140, 95, 56, 0.1); color: #5a3d28; border-color: rgba(140, 95, 56, 0.3); } /* Admin Phases tab: active phase-detail sub-tab — readable accent in light mode */ :root[data-theme="light"] .phases-admin-subtab-active { color: #1c140d; border-color: #b45309; } /* Admin Phases tab: amber accents (action links, dirty marker, initial badge, active segmented-toggle button) and destructive rose buttons — readable in light mode */ :root[data-theme="light"] .phases-admin-action { color: #9a4c00; } :root[data-theme="light"] .phases-admin-action:hover { color: #7c3f00; } :root[data-theme="light"] .phases-admin-dirty { color: #7c3f00; } :root[data-theme="light"] .phases-admin-initial-badge { background: rgba(180, 83, 9, 0.12); color: #7c3f00; border-color: rgba(180, 83, 9, 0.4); } :root[data-theme="light"] .phases-admin-toggle-active { background: rgba(180, 83, 9, 0.18); color: #7c3f00; } :root[data-theme="light"] .phases-admin-destructive { color: #9f1239; border-color: rgba(190, 18, 60, 0.4); } :root[data-theme="light"] .phases-admin-destructive:hover { color: #831843; background: rgba(190, 18, 60, 0.08); } :root[data-theme="light"] .phases-admin-edge-remove { color: #9f1239; } :root[data-theme="light"] .phases-admin-edge-remove:hover { color: #831843; } /* Phases page: confirm dialog primary button (default + destructive) */ .phase-confirm-btn { background: #f59e0b; color: #1f1206; } .phase-confirm-btn:hover { background: #fbbf24; } .phase-confirm-btn.phase-confirm-destructive { background: #dc2626; color: #fff; } .phase-confirm-btn.phase-confirm-destructive:hover { background: #ef4444; } :root[data-theme="light"] .phase-confirm-btn { background: #b45309; color: #fff; } :root[data-theme="light"] .phase-confirm-btn:hover { background: #92400e; } :root[data-theme="light"] .phase-confirm-btn.phase-confirm-destructive { background: #b91c1c; } :root[data-theme="light"] .phase-confirm-btn.phase-confirm-destructive:hover { background: #991b1b; } /* Scrollbar theming */ * { scrollbar-color: var(--theme-scrollbar-thumb) var(--theme-scrollbar-track); scrollbar-width: thin; } *::-webkit-scrollbar { width: 8px; height: 8px; } *::-webkit-scrollbar-track { background: var(--theme-scrollbar-track); } *::-webkit-scrollbar-thumb { background: var(--theme-scrollbar-thumb); border-radius: 4px; } *::-webkit-scrollbar-thumb:hover { background: var(--theme-scrollbar-thumb-hover); } /* Template variable tokens. Three semantic colors so authors can tell at a glance which {{vars}} Yapper auto-resolves (cyan), which the sender must supply (amber, "custom.*"), and which are unrecognized free-form (rose). The same shape is reused in three surfaces: the variable palette, the textarea highlight overlay, and the sample-fields legend. */ .template-var-token { display: inline-flex; align-items: center; padding: 0.125rem 0.5rem; border-radius: 9999px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.75rem; font-weight: 600; line-height: 1.1; border: 1px solid transparent; white-space: nowrap; } .template-var-token--auto { background: rgba(34, 211, 238, 0.12); color: #67e8f9; border-color: rgba(34, 211, 238, 0.35); } .template-var-token--custom { background: rgba(251, 191, 36, 0.12); color: #fcd34d; border-color: rgba(251, 191, 36, 0.35); } .template-var-token--unknown { background: rgba(244, 63, 94, 0.1); color: #fda4af; border-color: rgba(244, 63, 94, 0.32); } :root[data-theme="light"] .template-var-token--auto { background: rgba(8, 145, 178, 0.12); color: #0e7490; border-color: rgba(8, 145, 178, 0.4); } :root[data-theme="light"] .template-var-token--custom { background: rgba(180, 83, 9, 0.1); color: #92400e; border-color: rgba(180, 83, 9, 0.4); } :root[data-theme="light"] .template-var-token--unknown { background: rgba(190, 18, 60, 0.08); color: #9f1239; border-color: rgba(190, 18, 60, 0.4); } /* Back-compat alias: pre-existing .template-auto-var rendered the auto pill. */ .template-auto-var { display: inline-flex; align-items: center; padding: 0.125rem 0.5rem; border-radius: 9999px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.75rem; font-weight: 600; background: rgba(34, 211, 238, 0.12); color: #67e8f9; border: 1px solid rgba(34, 211, 238, 0.35); } :root[data-theme="light"] .template-auto-var { background: rgba(8, 145, 178, 0.12); color: #0e7490; border-color: rgba(8, 145, 178, 0.4); } /* Variable palette: clickable chips that insert {{var}} at cursor. */ .template-var-chip { cursor: pointer; transition: transform 0.08s ease, box-shadow 0.08s ease, background-color 0.12s ease; } .template-var-chip:hover { transform: translateY(-1px); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25); } .template-var-chip:active { transform: translateY(0); } .template-var-chip:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } /* Template body editor: a contentEditable div that renders {{vars}} as inline pill spans alongside normal editable text. */ .template-body-input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.875rem; line-height: 1.6; letter-spacing: 0; padding: 0.625rem; border-radius: 0.5rem; border: 1px solid rgba(80, 80, 80, 0.4); background: rgba(10, 10, 10, 0.45); color: #f0e8db; caret-color: #fde68a; min-height: 8rem; max-height: 24rem; overflow-y: auto; white-space: pre-wrap; word-wrap: break-word; word-break: normal; overflow-wrap: break-word; tab-size: 4; outline: none; } .template-body-input:focus { border-color: rgba(251, 191, 36, 0.55); box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.18); } .template-body-input:empty::before { content: attr(data-placeholder); color: rgba(204, 176, 138, 0.55); pointer-events: none; } :root[data-theme="light"] .template-body-input { background: rgba(255, 255, 255, 0.85); border-color: rgba(120, 113, 108, 0.5); color: #3d2a1c; caret-color: #b45309; } :root[data-theme="light"] .template-body-input:focus { border-color: rgba(180, 83, 9, 0.6); box-shadow: 0 0 0 2px rgba(180, 83, 9, 0.18); } :root[data-theme="light"] .template-body-input:empty::before { color: rgba(111, 74, 46, 0.5); } .template-body-input .var-pill { display: inline-block; padding: 0.05rem 0.4rem; margin: 0 1px; border-radius: 9999px; font-weight: 600; border: 1px solid transparent; vertical-align: baseline; user-select: all; } .template-body-input .var-pill--auto { background: rgba(34, 211, 238, 0.18); color: #67e8f9; border-color: rgba(34, 211, 238, 0.5); } .template-body-input .var-pill--custom { background: rgba(251, 191, 36, 0.18); color: #fcd34d; border-color: rgba(251, 191, 36, 0.5); } .template-body-input .var-pill--unknown { background: rgba(244, 63, 94, 0.15); color: #fda4af; border-color: rgba(244, 63, 94, 0.45); } :root[data-theme="light"] .template-body-input .var-pill--auto { background: rgba(8, 145, 178, 0.16); color: #0e7490; border-color: rgba(8, 145, 178, 0.5); } :root[data-theme="light"] .template-body-input .var-pill--custom { background: rgba(180, 83, 9, 0.14); color: #92400e; border-color: rgba(180, 83, 9, 0.5); } :root[data-theme="light"] .template-body-input .var-pill--unknown { background: rgba(190, 18, 60, 0.12); color: #9f1239; border-color: rgba(190, 18, 60, 0.5); } /* Phase graph: SVG + HTML node renderer (phases.html, admin > phases) */ .phase-graph { border: 1px solid rgba(82, 73, 60, 0.5); background: rgba(28, 25, 22, 0.4); border-radius: 1rem; padding: 0.5rem; overflow: auto; max-height: 44rem; } :root[data-theme="light"] .phase-graph { border-color: rgba(120, 113, 100, 0.35); background: rgba(250, 250, 249, 0.8); } .phase-graph-canvas { position: relative; } .phase-graph-svg { position: absolute; inset: 0; pointer-events: none; } .phase-graph-edge { fill: none; stroke: rgba(168, 162, 158, 0.45); stroke-width: 1.5; } .phase-graph-edge.is-back { stroke: rgba(245, 158, 11, 0.55); stroke-dasharray: 4 3; } .phase-graph-edge.is-sibling { stroke: rgba(168, 162, 158, 0.55); stroke-dasharray: 3 3; } .phase-graph-edge.is-self { stroke: rgba(168, 162, 158, 0.55); } .phase-graph-arrow-head { fill: rgba(168, 162, 158, 0.7); } :root[data-theme="light"] .phase-graph-edge { stroke: rgba(87, 83, 78, 0.55); } :root[data-theme="light"] .phase-graph-edge.is-back { stroke: rgba(180, 83, 9, 0.7); } :root[data-theme="light"] .phase-graph-arrow-head { fill: rgba(87, 83, 78, 0.85); } .phase-graph-node { position: absolute; display: flex; align-items: center; gap: 0.5rem; padding: 0 0.75rem; border-radius: 0.625rem; border: 1px solid rgba(82, 73, 60, 0.6); background: rgba(41, 37, 32, 0.95); color: #f5f5f4; font-size: 0.8125rem; cursor: pointer; user-select: none; transition: border-color 120ms ease, transform 120ms ease, background 120ms ease; } .phase-graph-node:hover { border-color: rgba(245, 158, 11, 0.5); transform: translateY(-1px); } .phase-graph-node.is-selected { border-color: rgba(245, 158, 11, 0.85); background: rgba(245, 158, 11, 0.08); } .phase-graph-node.is-initial { box-shadow: inset 2px 0 0 0 rgba(245, 158, 11, 0.7); } :root[data-theme="light"] .phase-graph-node { border-color: rgba(120, 113, 100, 0.45); background: #ffffff; color: #1c1917; } :root[data-theme="light"] .phase-graph-node:hover { border-color: rgba(180, 83, 9, 0.55); } :root[data-theme="light"] .phase-graph-node.is-selected { border-color: rgba(180, 83, 9, 0.85); background: rgba(245, 158, 11, 0.12); } .phase-graph-node-dot { width: 0.5rem; height: 0.5rem; border-radius: 9999px; flex-shrink: 0; } .phase-graph-node-dot-fallback { background: #a78bfa; } .phase-graph-node-label { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .phase-graph-node-count { flex-shrink: 0; font-size: 0.6875rem; font-variant-numeric: tabular-nums; color: #a8a29e; padding: 0.0625rem 0.375rem; border-radius: 9999px; background: rgba(82, 73, 60, 0.4); } :root[data-theme="light"] .phase-graph-node-count { color: #57534e; background: rgba(231, 229, 228, 0.9); } .phase-graph-node-initial { position: absolute; left: 0.5rem; top: -0.6rem; padding: 0.0625rem 0.5rem; border-radius: 9999px; background: #3a2a14; color: #fcd34d; border: 1px solid rgba(245, 158, 11, 0.5); font-size: 0.625rem; line-height: 1.1; letter-spacing: 0.025em; text-transform: uppercase; } :root[data-theme="light"] .phase-graph-node-initial { background: #fde6c4; color: #7c3f00; border-color: rgba(180, 83, 9, 0.55); } .phase-graph-edge.is-to-draft { stroke-dasharray: 6 4; stroke: rgba(245, 158, 11, 0.7); } :root[data-theme="light"] .phase-graph-edge.is-to-draft { stroke: rgba(180, 83, 9, 0.75); } .phase-graph-node.is-draft { opacity: 0.65; border-style: dashed !important; } .phase-graph-node-draft { position: absolute; right: 0.5rem; top: -0.6rem; padding: 0.0625rem 0.5rem; border-radius: 9999px; background: #3a2a14; color: #fcd34d; border: 1px dashed rgba(245, 158, 11, 0.5); font-size: 0.625rem; line-height: 1.1; letter-spacing: 0.025em; text-transform: uppercase; } :root[data-theme="light"] .phase-graph-node-draft { background: #fde6c4; color: #7c3f00; border-color: rgba(180, 83, 9, 0.55); } .phase-graph-node-warn { position: absolute; right: 0.25rem; bottom: -0.4rem; font-size: 0.75rem; color: #fcd34d; } :root[data-theme="light"] .phase-graph-node-warn { color: #b45309; } .phase-graph-node-noninteractive { position: absolute; left: 0.25rem; bottom: -0.4rem; font-size: 0.8rem; line-height: 1; color: #7dd3fc; } :root[data-theme="light"] .phase-graph-node-noninteractive { color: #0369a1; }