/* ==============================================================
   Tower Control — Mission Console
   --------------------------------------------------------------
   Restyled to live inside the host app's chrome:
     - .overview-flex / .overview-left-panel / .overview-right-panel
     - .builder-leftbar-home (left nav style)
     - .step_header_block (top title)
     - .overview-main-panel (right surface)

   Light is the default; dark scopes under body.appbuilder-dark and
   reuses the existing app tokens (--bg, --bg-panel, --bg-elev,
   --bg-hover, --fg, --fg-muted, --border, --border-strong, --accent).

   Local semantic accents kept as plain hex with dark overrides; nothing
   new defined on :root so we don't pollute the global token set.
   ============================================================== */

/* ---------- Left nav: section labels grouping the .builder-leftbar-home
              items into Mission Control / Forensic / Business / Tower AI ---------- */
.tc-nav-section {
	font-family: OpenSans, sans-serif;
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #808080;
	padding: 14px 8px 4px;
	user-select: none;
}
/* Extra breathing room between groups — applies to every section
   label except the first so Forensic / Business / Tower AI sit
   visibly apart from the items above them. */
.tc-nav-section:not(:first-of-type) { padding-top: 22px; }
body.appbuilder-dark .tc-nav-section { color: var(--fg-muted); }

/* Tower Control leftbar items: scoped position:relative so the
   badge inside can be absolutely centered against the row's full
   height (24px line-height + 4px vertical padding) without affecting
   Directory's reuse of .builder-leftbar-home. */
.builder-leftbar-home > div.tc-nav-item,
.tc-leftbar div.tc-nav-item { position: relative; }

/* Split the Tower Control leftbar into a scrollable top (nav) and a
   pinned bottom (profile-mode Disconnect). Inherits all
   .builder-leftbar-home item styling, so it stays visually identical
   to the rest of the app's left navigation. */
.tc-leftbar {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 0;
}
.tc-leftbar-top    { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.tc-leftbar-bottom {
	flex: 0 0 auto;
	padding-top: 6px;
	border-top: 1px solid #E6E2DC;
}
body.appbuilder-dark .tc-leftbar-bottom { border-top-color: var(--border); }

/* The outer .tc-leftbar is a plain flex column; .builder-leftbar-home
   sits on the two inner blocks (.tc-leftbar-top and .tc-leftbar-bottom).
   This means the shared `.builder-leftbar-home div:hover` rule never
   matches the wrappers themselves — only the actual nav items inside.

   Section labels ARE direct children though, so the shared rule would
   paint them on hover. Suppress that here (uses !important to clear
   the dark-mode shared rule which has !important on its background).
   Specificity raised via the chained .tc-leftbar selector. */
.tc-leftbar .tc-nav-section:hover {
	background-color: transparent !important;
	cursor: default;
}
body.appbuilder-dark .tc-leftbar .tc-nav-section:hover {
	background-color: transparent !important;
	color: #808080 !important;       /* keep the muted label color */
}
body.appbuilder-dark .tc-leftbar .tc-nav-section {
	color: var(--fg-muted);
}

/* ==============================================================
   Standalone Tower Control profile chrome
   --------------------------------------------------------------
   When the user launches Tower Control from the top-right picklist,
   the app shell adds body.appbuilder-towerctl-profile. We hide the
   outer chrome (left dark sidebar, design-time tab strip, any home
   sub-leftbar) so the mission console fills the screen. The app
   top bar stays — we keep the ChapsVision logo + user picklist —
   and the title slot is replaced with a "Tower Control" tag.
   ============================================================== */
body.appbuilder-towerctl-profile #mySidebar          { display: none !important; }
body.appbuilder-towerctl-profile #mySidebar + td > #myForm { width: 100vw !important; }
body.appbuilder-towerctl-profile .w2ui-tabs-line,
body.appbuilder-towerctl-profile .w2ui-tab-strip,
body.appbuilder-towerctl-profile .w2ui-scroll-wrapper > .w2ui-tab { display: none !important; }

/* Title-tag positioning in profile mode.
   --------------------------------------------------------------
   The default .builder_title sits at top:12px / left:16px and its
   inner div gets a 8px padding (rgb(1,117,255) blue) — those rules
   apply when the chapsbuilder app renders a normal app title. In
   Tower Control profile we want the logo+title flush with the
   "MISSION CONTROL" label below it in the leftbar.

   Leftbar geometry: .overview-left-panel starts at page-x=0
   (mySidebar is hidden); .builder-leftbar-home adds 2px padding;
   .tc-nav-section adds 8px left padding → first character of
   "MISSION CONTROL" sits at x=10px. We mirror that here.

   The double-class selectors raise specificity above .builder_title
   div (which has padding:8px) so our zero-padding wins.
*/
body.appbuilder-towerctl-profile .builder_title {
	position: absolute;
	top: 0;
	left: 0;
}
body.appbuilder-towerctl-profile .builder_title .builder-towerctl-titletag {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: OpenSans, sans-serif;
	font-size: 18px;
	font-weight: 600;
	color: #269DF0;          /* same blue as the primary buttons in panels */
	padding: 0 0 0 10px;     /* aligns the image with the MISSION CONTROL label */
	line-height: 64px;
}
.builder-towerctl-titletag img {
	height: 32px;
	width: auto;
	display: block;
}
body.appbuilder-dark.appbuilder-towerctl-profile .builder_title .builder-towerctl-titletag {
	color: var(--fg-strong);
}

/* Badges sit pinned to the right edge, vertically centered against
   the text baseline regardless of the row's intrinsic line box. */
.tc-nav-badge {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	font-family: OpenSans, sans-serif;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.05em;
	padding: 0 6px;
	line-height: 16px;
	border-radius: 8px;
	background: #ECEAE6;
	color: #808080;
}
.tc-nav-badge.tc-badge-live { background: rgba(38, 157, 240, 0.14); color: #1F84C6; }
.tc-nav-badge.tc-badge-warn { background: rgba(230, 168, 23, 0.18); color: #B07E08; }
.tc-nav-badge.tc-badge-crit { background: rgba(220, 53, 69, 0.16);  color: #C0392B; }

body.appbuilder-dark .tc-nav-badge          { background: var(--bg-elev); color: var(--fg-muted); }
body.appbuilder-dark .tc-nav-badge.tc-badge-live { background: rgba(38, 157, 240, 0.20); color: #5EB7F5; }
body.appbuilder-dark .tc-nav-badge.tc-badge-warn { background: rgba(251, 191, 36, 0.16); color: #FBBF24; }
body.appbuilder-dark .tc-nav-badge.tc-badge-crit { background: rgba(248, 113, 113, 0.16); color: #F87171; }

/* ==============================================================
   Right pane — scroll container inside .overview-main-panel
   ============================================================== */
.tc-scroll {
	width: 100%;
	height: 100%;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 18px 22px 32px;
	box-sizing: border-box;
	font-family: OpenSans, sans-serif;
	color: #27251E;
}
body.appbuilder-dark .tc-scroll { color: var(--fg); }

/* ==============================================================
   Generic surface — panel boxes inside the scroll area
   ============================================================== */
.tc-panel {
	background: #ffffff;
	border: 1px solid #E6E2DC;
	border-radius: 6px;
	padding: 14px 16px;
}
body.appbuilder-dark .tc-panel {
	background: var(--bg-panel);
	border-color: var(--border);
}

.tc-panel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
}
.tc-panel-title {
	font-family: OpenSans, sans-serif;
	font-size: 13px;
	font-weight: 600;
	color: #27251E;
}
.tc-panel-sub {
	font-family: OpenSans, sans-serif;
	font-size: 11px;
	color: #808080;
	margin-left: 8px;
}
body.appbuilder-dark .tc-panel-title { color: var(--fg-strong); }
body.appbuilder-dark .tc-panel-sub   { color: var(--fg-muted); }

/* In-panel tab pill (Flights / Tokens / Tools) */
.tc-tabs {
	display: inline-flex;
	background: #F4F2EE;
	border: 1px solid #E6E2DC;
	border-radius: 5px;
	padding: 2px;
}
.tc-tab {
	padding: 3px 10px;
	font-size: 11px;
	color: #606060;
	cursor: pointer;
	border-radius: 3px;
	user-select: none;
}
.tc-tab:hover     { color: #27251E; }
.tc-tab.tc-active { background: #ffffff; color: #27251E; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }

body.appbuilder-dark .tc-tabs           { background: var(--bg-elev); border-color: var(--border); }
body.appbuilder-dark .tc-tab            { color: var(--fg-muted); }
body.appbuilder-dark .tc-tab:hover      { color: var(--fg); }
body.appbuilder-dark .tc-tab.tc-active  { background: var(--bg-hover); color: var(--fg-strong); box-shadow: none; }

/* Generic small button — matches the muted toolbar feel of the app */
.tc-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	font-family: OpenSans, sans-serif;
	font-size: 12px;
	background: #ffffff;
	border: 1px solid #E6E2DC;
	border-radius: 4px;
	color: #27251E;
	cursor: pointer;
}
.tc-btn:hover { background: #F4F2EE; }
.tc-btn-primary {
	background: #269DF0;
	border-color: #269DF0;
	color: #ffffff;
}
.tc-btn-primary:hover { background: #2685C4; border-color: #2685C4; color: #ffffff; }

body.appbuilder-dark .tc-btn             { background: var(--bg-elev); border-color: var(--border); color: var(--fg); }
body.appbuilder-dark .tc-btn:hover       { background: var(--bg-hover); }
body.appbuilder-dark .tc-btn-primary     { background: var(--accent); border-color: var(--accent); color: #ffffff; }
body.appbuilder-dark .tc-btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

/* ==============================================================
   Page head — actions slot embedded in .step_header_block
   so the per-panel buttons sit on the same row as the title
   and don't consume extra vertical space.
   ============================================================== */
.tc-header-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
.tc-header-title-wrap { min-width: 0; flex: 1; }
.tc-header-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

/* ==============================================================
   Tower AI banner — recurring "active observation" component
   ============================================================== */
.tc-tower-banner {
	display: flex;
	gap: 12px;
	padding: 12px 14px;
	margin-bottom: 16px;
	background: #F0F7FC;
	border: 1px solid #CDE4F4;
	border-radius: 6px;
}
.tc-tower-orb {
	width: 22px; height: 22px;
	border-radius: 50%;
	background: radial-gradient(circle at 30% 30%, #5EB7F5, #1F84C6);
	box-shadow: 0 0 10px rgba(38, 157, 240, 0.45);
	flex-shrink: 0;
	margin-top: 2px;
}
.tc-tower-body  { flex: 1; min-width: 0; }
.tc-tower-label {
	font-family: OpenSans, sans-serif;
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #1F84C6;
	font-weight: 600;
	margin-bottom: 4px;
}
.tc-tower-msg   { font-size: 13px; line-height: 1.5; color: #27251E; }
.tc-tower-msg code {
	font-family: Consolas, monospace;
	background: rgba(38, 157, 240, 0.10);
	padding: 1px 5px;
	border-radius: 3px;
	font-size: 11px;
	color: #1F84C6;
}
.tc-tower-actions { margin-top: 10px; display: flex; gap: 8px; }

body.appbuilder-dark .tc-tower-banner {
	background: rgba(38, 157, 240, 0.10);
	border-color: rgba(38, 157, 240, 0.30);
}
body.appbuilder-dark .tc-tower-label { color: #5EB7F5; }
body.appbuilder-dark .tc-tower-msg   { color: var(--fg); }
body.appbuilder-dark .tc-tower-msg code {
	background: rgba(38, 157, 240, 0.18);
	color: #5EB7F5;
}

/* Phase-note variant of the tower banner — amber-tinted so it
   reads as "informational, not action-required" and clearly
   distinguishes "this section is still synthetic / waiting on
   instrumentation" from the regular Tower AI observation banner. */
.tc-tower-banner.tc-phase-note {
	background: #FFF8E1;
	border-color: #E6C36A;
}
.tc-tower-banner.tc-phase-note .tc-tower-orb {
	background: radial-gradient(circle at 30% 30%, #F5C76E, #B7861F);
	box-shadow: 0 0 10px rgba(230, 168, 23, 0.40);
}
.tc-tower-banner.tc-phase-note .tc-tower-label { color: #A0741A; }
.tc-tower-banner.tc-phase-note .tc-tower-msg   { color: #5C4310; }

body.appbuilder-dark .tc-tower-banner.tc-phase-note {
	background: rgba(230, 168, 23, 0.12);
	border-color: rgba(230, 168, 23, 0.40);
}
body.appbuilder-dark .tc-tower-banner.tc-phase-note .tc-tower-label { color: #F5C76E; }
body.appbuilder-dark .tc-tower-banner.tc-phase-note .tc-tower-msg   { color: var(--fg);
}

/* ==============================================================
   KPI strip
   ============================================================== */
.tc-kpi-strip {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 12px;
	margin-bottom: 14px;
}
.tc-kpi {
	background: #ffffff;
	border: 1px solid #E6E2DC;
	border-radius: 6px;
	padding: 10px 12px;
	overflow: hidden;
}
.tc-kpi-label {
	font-family: OpenSans, sans-serif;
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #808080;
	display: flex; align-items: center; gap: 6px;
	margin-bottom: 6px;
}
.tc-kpi-value {
	font-family: OpenSans, sans-serif;
	font-size: 22px;
	font-weight: 600;
	color: #27251E;
	line-height: 1.1;
}
.tc-kpi-value-unit { font-size: 11px; color: #808080; margin-left: 2px; }
.tc-kpi-delta {
	font-size: 11px;
	margin-top: 4px;
	color: #808080;
}
.tc-kpi-delta .tc-up   { color: #2E8B57; }
.tc-kpi-delta .tc-down { color: #C0392B; }
.tc-kpi-spark { height: 30px; margin-top: 4px; }

.tc-kpi-warn { border-color: #E6A817; box-shadow: inset 0 0 0 1px rgba(230, 168, 23, 0.18); }
.tc-kpi-crit { border-color: #C0392B; box-shadow: inset 0 0 0 1px rgba(192, 57, 43, 0.18); }

body.appbuilder-dark .tc-kpi             { background: var(--bg-panel); border-color: var(--border); }
body.appbuilder-dark .tc-kpi-label       { color: var(--fg-muted); }
body.appbuilder-dark .tc-kpi-value       { color: var(--fg-strong); }
body.appbuilder-dark .tc-kpi-value-unit  { color: var(--fg-muted); }
body.appbuilder-dark .tc-kpi-delta       { color: var(--fg-muted); }
body.appbuilder-dark .tc-kpi-delta .tc-up   { color: #34D399; }
body.appbuilder-dark .tc-kpi-delta .tc-down { color: #F87171; }
body.appbuilder-dark .tc-kpi-warn { border-color: #FBBF24; box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.18); }
body.appbuilder-dark .tc-kpi-crit { border-color: #F87171; box-shadow: inset 0 0 0 1px rgba(248, 113, 113, 0.18); }

@media (max-width: 1400px) {
	.tc-kpi-strip { grid-template-columns: repeat(3, 1fr); }
}

/* ==============================================================
   Rows — multi-column content grid
   ============================================================== */
.tc-row { display: grid; gap: 14px; margin-bottom: 14px; }
.tc-row-2-1 { grid-template-columns: 2fr 1fr; }
.tc-row-1-1 { grid-template-columns: 1fr 1fr; }
.tc-row-1   { grid-template-columns: 1fr; }

/* Standalone .tc-panel blocks (direct children of the scroll
   container, not wrapped in a .tc-row) need their own bottom
   margin so consecutive panels — e.g. "Per-agent memory map"
   above "Retrieval relevance distribution", or "Scorecard"
   above "Recent eval runs" — don't visually collide.

   Scoped to direct children so panels inside a .tc-row (where
   the grid `gap` already handles spacing) don't pick up extra
   margin and grow the gap. */
.tc-scroll > .tc-panel { margin-bottom: 14px; }

/* ==============================================================
   Chart containers
   ============================================================== */
.tc-chart         { width: 100%; height: 260px; }
.tc-chart-heatmap { width: 100%; height: 220px; }

/* ==============================================================
   Agents-at-a-glance list
   ============================================================== */
.tc-agent-list { display: flex; flex-direction: column; max-height: 320px; overflow-y: auto; }
.tc-agent-row {
	display: flex; align-items: center; gap: 10px;
	padding: 6px 4px;
	border-bottom: 1px solid #F1EEE8;
}
.tc-agent-row:last-child { border-bottom: 0; }
.tc-agent-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.tc-agent-dot.tc-ok   { background: #2E8B57; }
.tc-agent-dot.tc-warn { background: #E6A817; }
.tc-agent-dot.tc-crit { background: #C0392B; }
.tc-agent-meta { flex: 1; min-width: 0; }
.tc-agent-name { font-size: 12px; color: #27251E; }
.tc-agent-role { font-size: 10px; color: #808080; }
.tc-agent-p95  { font-family: OpenSans, sans-serif; font-size: 11px; color: #606060; }
.tc-agent-status {
	font-size: 9px; padding: 1px 6px; border-radius: 8px;
	letter-spacing: 0.05em;
}
.tc-agent-status.tc-ok   { background: rgba(46, 139, 87, 0.14); color: #2E8B57; }
.tc-agent-status.tc-warn { background: rgba(230, 168, 23, 0.18); color: #B07E08; }
.tc-agent-status.tc-crit { background: rgba(192, 57, 43, 0.14); color: #C0392B; }

body.appbuilder-dark .tc-agent-row       { border-bottom-color: var(--border); }
body.appbuilder-dark .tc-agent-name      { color: var(--fg); }
body.appbuilder-dark .tc-agent-role      { color: var(--fg-muted); }
body.appbuilder-dark .tc-agent-p95       { color: var(--fg-muted); }
body.appbuilder-dark .tc-agent-dot.tc-ok    { background: #34D399; }
body.appbuilder-dark .tc-agent-dot.tc-warn  { background: #FBBF24; }
body.appbuilder-dark .tc-agent-dot.tc-crit  { background: #F87171; }
body.appbuilder-dark .tc-agent-status.tc-ok    { background: rgba(52, 211, 153, 0.16); color: #34D399; }
body.appbuilder-dark .tc-agent-status.tc-warn  { background: rgba(251, 191, 36, 0.16); color: #FBBF24; }
body.appbuilder-dark .tc-agent-status.tc-crit  { background: rgba(248, 113, 113, 0.16); color: #F87171; }

/* ==============================================================
   Live message stream
   ============================================================== */
.tc-stream {
	font-family: OpenSans, sans-serif;
	font-size: 11px;
	max-height: 260px;
	overflow-y: auto;
}
.tc-stream-row {
	display: grid;
	grid-template-columns: 64px 70px 70px 1fr 72px;
	gap: 10px;
	padding: 4px 0;
	align-items: center;
	border-bottom: 1px solid #F1EEE8;
}
.tc-stream-row:last-child { border-bottom: 0; }
.tc-stream-t     { color: #808080; }
.tc-stream-from  { color: #1F84C6; font-weight: 600; }
.tc-stream-to    { color: #6F4FB8; font-weight: 600; }
/* The message column holds literal code-like payloads
   (rag_search({...}), sql.execute({...})) — a monospace
   face keeps brackets / commas readable. */
.tc-stream-msg   { font-family: Consolas, monospace; color: #27251E; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-stream-dur   { color: #606060; text-align: right; }
.tc-stream-dur.tc-timeout { color: #C0392B; font-weight: 600; }
.tc-stream-pulse { font-size: 10px; color: #2E8B57; }

body.appbuilder-dark .tc-stream-row    { border-bottom-color: var(--border); }
body.appbuilder-dark .tc-stream-t      { color: var(--fg-muted); }
body.appbuilder-dark .tc-stream-from   { color: #5EB7F5; }
body.appbuilder-dark .tc-stream-to     { color: #A78BFA; }
body.appbuilder-dark .tc-stream-msg    { color: var(--fg); }
body.appbuilder-dark .tc-stream-dur    { color: var(--fg-muted); }
body.appbuilder-dark .tc-stream-dur.tc-timeout { color: #F87171; }
body.appbuilder-dark .tc-stream-pulse  { color: #34D399; }

/* ==============================================================
   Flights in progress
   ============================================================== */
.tc-flight { padding: 9px 0; border-bottom: 1px solid #F1EEE8; }
.tc-flight:last-child { border-bottom: 0; }
.tc-flight-head { display: flex; align-items: center; gap: 10px; }
.tc-flight-id   { font-size: 11px; color: #808080; }
.tc-flight-name { flex: 1; font-size: 12px; color: #27251E; }
.tc-flight-time { font-size: 11px; color: #606060; }
.tc-flight-cost { font-size: 11px; color: #808080; margin-left: 6px; }
.tc-flight-path { display: flex; align-items: center; gap: 4px; margin-top: 6px; }
.tc-flight-node { width: 7px; height: 7px; border-radius: 50%; background: #269DF0; }
.tc-flight-node.tc-pending { background: #D6D2CC; }
.tc-flight-node.tc-current { background: #269DF0; box-shadow: 0 0 6px rgba(38,157,240,0.6); }
.tc-flight-edge { width: 16px; height: 1px; background: #D6D2CC; }
.tc-flight-status { font-size: 10px; padding: 1px 6px; border-radius: 8px; margin-left: 6px; }
.tc-flight-status.tc-running { background: rgba(46, 139, 87, 0.14);  color: #2E8B57; }
.tc-flight-status.tc-slow    { background: rgba(230, 168, 23, 0.18); color: #B07E08; }
.tc-flight-status.tc-stuck   { background: rgba(192, 57, 43, 0.14);  color: #C0392B; }

body.appbuilder-dark .tc-flight                  { border-bottom-color: var(--border); }
body.appbuilder-dark .tc-flight-id               { color: var(--fg-muted); }
body.appbuilder-dark .tc-flight-name             { color: var(--fg); }
body.appbuilder-dark .tc-flight-time             { color: var(--fg-muted); }
body.appbuilder-dark .tc-flight-cost             { color: var(--fg-muted); }
body.appbuilder-dark .tc-flight-node             { background: #5EB7F5; }
body.appbuilder-dark .tc-flight-node.tc-pending  { background: var(--border-strong); }
body.appbuilder-dark .tc-flight-node.tc-current  { background: #5EB7F5; box-shadow: 0 0 6px rgba(94, 183, 245, 0.6); }
body.appbuilder-dark .tc-flight-edge             { background: var(--border-strong); }
body.appbuilder-dark .tc-flight-status.tc-running { background: rgba(52, 211, 153, 0.16); color: #34D399; }
body.appbuilder-dark .tc-flight-status.tc-slow    { background: rgba(251, 191, 36, 0.16); color: #FBBF24; }
body.appbuilder-dark .tc-flight-status.tc-stuck   { background: rgba(248, 113, 113, 0.16); color: #F87171; }

/* ==============================================================
   Stub for not-yet-built panels
   ============================================================== */
.tc-stub {
	min-height: 60vh;
	display: flex; flex-direction: column;
	align-items: center; justify-content: center;
	color: #808080;
	font-family: OpenSans, sans-serif;
}
.tc-stub i { font-size: 48px; margin-bottom: 14px; opacity: 0.35; }
.tc-stub-title { font-size: 18px; color: #27251E; margin-bottom: 4px; }
.tc-stub-sub   { font-size: 12px; }
body.appbuilder-dark .tc-stub        { color: var(--fg-muted); }
body.appbuilder-dark .tc-stub-title  { color: var(--fg-strong); }

/* ==============================================================
   Shared atoms — pills, chips, segmented controls, toggles, bars,
   helper text colors. Used by panels 2-11.
   ============================================================== */

/* Inline status pill */
.tc-pill {
	display: inline-flex; align-items: center; gap: 4px;
	font-family: OpenSans, sans-serif;
	font-size: 10px;
	font-weight: 600;
	padding: 1px 7px;
	border-radius: 8px;
	background: #ECEAE6;
	color: #606060;
}
.tc-pill-ok      { background: rgba(46, 139, 87, 0.14);  color: #2E8B57; }
.tc-pill-warn    { background: rgba(230, 168, 23, 0.18); color: #B07E08; }
.tc-pill-crit    { background: rgba(192, 57, 43, 0.14);  color: #C0392B; }
.tc-pill-live    { background: rgba(46, 139, 87, 0.14);  color: #2E8B57; }
.tc-pill-tag     { background: #F4F2EE;                  color: #606060; font-weight: 500; }
.tc-risk-l0      { background: rgba(46, 139, 87, 0.14);  color: #2E8B57; }
.tc-risk-l1      { background: rgba(38, 157, 240, 0.14); color: #1F84C6; }
.tc-risk-l2      { background: rgba(230, 168, 23, 0.18); color: #B07E08; }
.tc-risk-l3      { background: rgba(192, 57, 43, 0.14);  color: #C0392B; }

body.appbuilder-dark .tc-pill         { background: var(--bg-elev); color: var(--fg-muted); }
body.appbuilder-dark .tc-pill-ok      { background: rgba(52, 211, 153, 0.16); color: #34D399; }
body.appbuilder-dark .tc-pill-warn    { background: rgba(251, 191, 36, 0.16); color: #FBBF24; }
body.appbuilder-dark .tc-pill-crit    { background: rgba(248, 113, 113, 0.16); color: #F87171; }
body.appbuilder-dark .tc-pill-live    { background: rgba(52, 211, 153, 0.16); color: #34D399; }
body.appbuilder-dark .tc-pill-tag     { background: var(--bg-elev); color: var(--fg-muted); }
body.appbuilder-dark .tc-risk-l0      { background: rgba(52, 211, 153, 0.16); color: #34D399; }
body.appbuilder-dark .tc-risk-l1      { background: rgba(94, 183, 245, 0.20); color: #5EB7F5; }
body.appbuilder-dark .tc-risk-l2      { background: rgba(251, 191, 36, 0.16); color: #FBBF24; }
body.appbuilder-dark .tc-risk-l3      { background: rgba(248, 113, 113, 0.16); color: #F87171; }

/* Segmented control (used in header-actions for Bottlenecks, Incidents, Cost, Quality, Memory tabs) */
.tc-segmented {
	display: inline-flex;
	background: #F4F2EE;
	border: 1px solid #E6E2DC;
	border-radius: 5px;
	padding: 2px;
}
.tc-seg {
	padding: 4px 12px;
	font-size: 11px;
	color: #606060;
	cursor: pointer;
	border-radius: 3px;
	user-select: none;
}
.tc-seg:hover     { color: #27251E; }
.tc-seg.tc-active { background: #ffffff; color: #27251E; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }

body.appbuilder-dark .tc-segmented           { background: var(--bg-elev); border-color: var(--border); }
body.appbuilder-dark .tc-seg                 { color: var(--fg-muted); }
body.appbuilder-dark .tc-seg.tc-active       { background: var(--bg-hover); color: var(--fg-strong); box-shadow: none; }

/* Filter chip row */
.tc-registry-filters {
	display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
	margin-bottom: 14px;
}
.tc-chip {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: 11px;
	padding: 3px 10px;
	border-radius: 12px;
	background: #F4F2EE;
	border: 1px solid #E6E2DC;
	color: #606060;
	cursor: pointer;
	user-select: none;
}
.tc-chip:hover      { background: #ECEAE6; color: #27251E; }
.tc-chip.tc-active  { background: #ffffff; color: #27251E; border-color: #269DF0; box-shadow: 0 0 0 1px #269DF0; }
.tc-chip-status     { cursor: default; }
.tc-spacer          { flex: 1; }

body.appbuilder-dark .tc-chip             { background: var(--bg-elev); border-color: var(--border); color: var(--fg-muted); }
body.appbuilder-dark .tc-chip:hover       { background: var(--bg-hover); color: var(--fg); }
body.appbuilder-dark .tc-chip.tc-active   { background: var(--bg-panel); color: var(--fg-strong); border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }

/* Toggle switch (Layers, Policies, Advisor modes) */
.tc-toggle {
	position: relative;
	display: inline-block;
	width: 28px; height: 16px;
	background: #D6D2CC;
	border-radius: 8px;
	flex-shrink: 0;
	cursor: pointer;
	transition: background 0.15s;
}
.tc-toggle::after {
	content: '';
	position: absolute;
	left: 2px; top: 2px;
	width: 12px; height: 12px;
	border-radius: 50%;
	background: #ffffff;
	transition: left 0.15s;
}
.tc-toggle.tc-on            { background: #269DF0; }
.tc-toggle.tc-on::after     { left: 14px; }
body.appbuilder-dark .tc-toggle         { background: var(--border-strong); }
body.appbuilder-dark .tc-toggle::after  { background: #c0c0c0; }
body.appbuilder-dark .tc-toggle.tc-on   { background: var(--accent); }
body.appbuilder-dark .tc-toggle.tc-on::after { background: #ffffff; }

/* Generic progress bar */
.tc-bar {
	flex: 1;
	height: 6px;
	background: #ECEAE6;
	border-radius: 3px;
	overflow: hidden;
	margin-top: 4px;
}
.tc-bar > div { height: 100%; border-radius: 3px; background: #269DF0; transition: width 0.15s; }
.tc-bar-val   { font-family: OpenSans, sans-serif; font-size: 11px; color: #808080; margin-left: 6px; }
body.appbuilder-dark .tc-bar         { background: var(--bg-elev); }
body.appbuilder-dark .tc-bar-val     { color: var(--fg-muted); }

/* Helper text colors */
.tc-mono       { font-family: Consolas, monospace; }
.tc-muted      { color: #808080; }
.tc-accent     { color: #1F84C6; }
.tc-ok-text    { color: #2E8B57; }
.tc-warn-text  { color: #B07E08; }
.tc-bad-text   { color: #C0392B; }
.tc-ui-badge   { display: inline-block; font-family: OpenSans, sans-serif;
	font-size: 9px; font-weight: 700; letter-spacing: .04em;
	color: #fff; background: #2F9EEE; border-radius: 4px;
	padding: 1px 4px; vertical-align: middle; }
.tc-delta-bad  { color: #C0392B; font-family: OpenSans, sans-serif; margin-left: 6px; font-weight: 600; }
.tc-right      { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.tc-row-sub    { display: block; font-size: 10px; color: #808080; margin-top: 2px; }
.tc-stats-row  { display: flex; gap: 6px; }

body.appbuilder-dark .tc-muted       { color: var(--fg-muted); }
body.appbuilder-dark .tc-accent      { color: #5EB7F5; }
body.appbuilder-dark .tc-ok-text     { color: #34D399; }
body.appbuilder-dark .tc-warn-text   { color: #FBBF24; }
body.appbuilder-dark .tc-bad-text    { color: #F87171; }
body.appbuilder-dark .tc-delta-bad   { color: #F87171; }
body.appbuilder-dark .tc-row-sub     { color: var(--fg-muted); }

/* KPI strip — 4-column variant for Incidents / Trace / Cost */
.tc-kpi-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) {
	.tc-kpi-4 { grid-template-columns: repeat(2, 1fr); }
}

/* Row variants */
.tc-row-3     { grid-template-columns: 1fr 1fr 1fr; }
.tc-row-1-1-1 { grid-template-columns: 1fr 1fr 1fr; }

/* Danger button */
.tc-btn-danger {
	background: #ffffff;
	border-color: rgba(192, 57, 43, 0.45);
	color: #C0392B;
}
.tc-btn-danger:hover { background: rgba(192, 57, 43, 0.06); }
body.appbuilder-dark .tc-btn-danger        { background: var(--bg-elev); border-color: rgba(248, 113, 113, 0.45); color: #F87171; }
body.appbuilder-dark .tc-btn-danger:hover  { background: rgba(248, 113, 113, 0.10); }

/* Metric labels (used in many panels) */
.tc-metric-label {
	font-family: OpenSans, sans-serif;
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #808080;
	font-weight: 600;
	margin-bottom: 4px;
}
.tc-metric-value { font-size: 14px; color: #27251E; }
.tc-metric-value.tc-muted { color: #808080; }
.tc-metric-value.tc-bad   { color: #C0392B; font-weight: 600; }
body.appbuilder-dark .tc-metric-label       { color: var(--fg-muted); }
body.appbuilder-dark .tc-metric-value       { color: var(--fg); }
body.appbuilder-dark .tc-metric-value.tc-bad{ color: #F87171; }

/* Stat list (used in advisor, memory, queue) */
.tc-stat-list { display: flex; flex-direction: column; }
.tc-stat-row  {
	display: flex; justify-content: space-between; align-items: center;
	padding: 5px 0;
	font-size: 12px;
	border-bottom: 1px solid #F1EEE8;
}
.tc-stat-row:last-child { border-bottom: 0; }
.tc-stat-row span { color: #606060; }
.tc-stat-row b    { color: #27251E; font-weight: 600; }
.tc-stat-list-inline { margin-top: 8px; }
body.appbuilder-dark .tc-stat-row             { border-bottom-color: var(--border); }
body.appbuilder-dark .tc-stat-row span        { color: var(--fg-muted); }
body.appbuilder-dark .tc-stat-row b           { color: var(--fg); }

/* Row line lists (topology side panels) */
.tc-row-list { display: flex; flex-direction: column; }
.tc-row-line {
	display: flex; align-items: center; gap: 10px;
	padding: 6px 0;
	border-bottom: 1px solid #F1EEE8;
	font-size: 12px;
}
.tc-row-line:last-child  { border-bottom: 0; }
.tc-row-line.tc-row-stacked { align-items: flex-start; }
.tc-row-line > span:first-child { flex: 1; }
.tc-row-line > div:first-child  { flex: 1; }
.tc-row-num   { color: #606060; font-family: OpenSans, sans-serif; }
body.appbuilder-dark .tc-row-line { border-bottom-color: var(--border); }
body.appbuilder-dark .tc-row-num  { color: var(--fg-muted); }

/* ==============================================================
   Topology panel
   ============================================================== */
.tc-topology-layout {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: 14px;
	margin-bottom: 14px;
}
.tc-topology-side {
	display: flex; flex-direction: column; gap: 12px;
}
.tc-topology-canvas { display: flex; flex-direction: column; min-height: 520px; }
.tc-chart-graph     { flex: 1; min-height: 480px; width: 100%; }

.tc-side-card { padding: 12px; }
.tc-side-label {
	font-family: OpenSans, sans-serif;
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #808080;
	font-weight: 600;
	margin-bottom: 8px;
}
.tc-side-options { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.tc-side-opt {
	font-size: 12px; padding: 5px 8px; border-radius: 4px; color: #606060; cursor: pointer;
}
.tc-side-opt:hover    { background: #F4F2EE; color: #27251E; }
.tc-side-opt.tc-active{ background: rgba(38, 157, 240, 0.10); color: #1F84C6; }
.tc-legend           { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.tc-legend-row       { display: flex; align-items: center; gap: 8px; font-size: 11px; color: #606060; }
.tc-legend-swatch    { width: 10px; height: 10px; border-radius: 2px; }
.tc-legend-n         { margin-left: auto; color: #808080; font-family: Consolas, monospace; font-size: 10px; }

.tc-layer-list       { display: flex; flex-direction: column; gap: 4px; }
.tc-layer-row        { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.tc-layer-dot        { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.tc-layer-name       { flex: 1; color: #27251E; }

body.appbuilder-dark .tc-side-label         { color: var(--fg-muted); }
body.appbuilder-dark .tc-side-opt           { color: var(--fg-muted); }
body.appbuilder-dark .tc-side-opt:hover     { background: var(--bg-hover); color: var(--fg); }
body.appbuilder-dark .tc-side-opt.tc-active { background: rgba(94, 183, 245, 0.16); color: #5EB7F5; }
body.appbuilder-dark .tc-legend-row         { color: var(--fg-muted); }
body.appbuilder-dark .tc-legend-n           { color: var(--fg-muted); }
body.appbuilder-dark .tc-layer-name         { color: var(--fg); }

/* Topology critical-findings strip */
.tc-findings        { display: flex; flex-direction: column; gap: 8px; }
.tc-finding         { padding: 8px 10px; border-radius: 4px; border-left: 3px solid; background: #F4F2EE; }
.tc-finding-crit    { border-left-color: #C0392B; background: rgba(192, 57, 43, 0.08); }
.tc-finding-warn    { border-left-color: #E6A817; background: rgba(230, 168, 23, 0.08); }
.tc-finding-title   { font-size: 12px; color: #27251E; font-weight: 600; }
.tc-finding-sub     { font-size: 11px; color: #606060; margin-top: 2px; }

body.appbuilder-dark .tc-finding         { background: var(--bg-elev); }
body.appbuilder-dark .tc-finding-crit    { background: rgba(248, 113, 113, 0.10); }
body.appbuilder-dark .tc-finding-warn    { background: rgba(251, 191, 36, 0.10); }
body.appbuilder-dark .tc-finding-title   { color: var(--fg); }
body.appbuilder-dark .tc-finding-sub     { color: var(--fg-muted); }

/* ==============================================================
   Bottlenecks panel
   ============================================================== */
.tc-bottleneck {
	background: #ffffff;
	border: 1px solid #E6E2DC;
	border-left: 3px solid #269DF0;
	border-radius: 6px;
	padding: 12px 14px;
	margin-bottom: 12px;
}
.tc-bottleneck-crit { border-left-color: #C0392B; }
.tc-bottleneck-warn { border-left-color: #E6A817; }
.tc-bottleneck-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tc-bottleneck-title { font-size: 14px; font-weight: 600; color: #27251E; }
.tc-bottleneck-path  { font-size: 11px; color: #606060; }
.tc-bottleneck-actions { margin-left: auto; display: flex; gap: 6px; }
.tc-bottleneck-metrics {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
	margin-top: 10px;
}
.tc-bottleneck-explain {
	display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
	margin-top: 10px;
}
.tc-explain-block {
	background: #FAF8F5;
	border: 1px solid #EEECEA;
	border-radius: 4px;
	padding: 8px 10px;
	font-size: 12px;
	color: #27251E;
}
.tc-explain-suggest      { background: rgba(38, 157, 240, 0.05); border-color: rgba(38, 157, 240, 0.20); }
.tc-explain-label {
	font-family: OpenSans, sans-serif;
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #1F84C6;
	font-weight: 600;
	margin-bottom: 4px;
}
.tc-explain-sub  { font-size: 10px; color: #808080; margin-top: 4px; }

body.appbuilder-dark .tc-bottleneck         { background: var(--bg-panel); border-color: var(--border); }
body.appbuilder-dark .tc-bottleneck-title   { color: var(--fg); }
body.appbuilder-dark .tc-bottleneck-path    { color: var(--fg-muted); }
body.appbuilder-dark .tc-explain-block      { background: var(--bg-elev); border-color: var(--border); color: var(--fg); }
body.appbuilder-dark .tc-explain-suggest    { background: rgba(94, 183, 245, 0.10); border-color: rgba(94, 183, 245, 0.25); }
body.appbuilder-dark .tc-explain-label      { color: #5EB7F5; }
body.appbuilder-dark .tc-explain-sub        { color: var(--fg-muted); }

/* Latency budget */
.tc-budget       { display: flex; flex-direction: column; gap: 8px; }
.tc-budget-row   { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; font-size: 12px; }
.tc-budget-label { color: #27251E; }
.tc-budget-value { color: #606060; font-family: OpenSans, sans-serif; }
.tc-budget-bar   {
	grid-column: 1 / -1;
	height: 6px; background: #ECEAE6; border-radius: 3px; overflow: hidden;
}
.tc-budget-bar > div { height: 100%; border-radius: 3px; }
.tc-budget-total {
	display: flex; justify-content: space-between; padding: 10px 0 0;
	border-top: 1px solid #E6E2DC; margin-top: 6px;
	font-weight: 600; color: #27251E;
}
body.appbuilder-dark .tc-budget-label    { color: var(--fg); }
body.appbuilder-dark .tc-budget-value    { color: var(--fg-muted); }
body.appbuilder-dark .tc-budget-bar      { background: var(--bg-elev); }
body.appbuilder-dark .tc-budget-total    { border-top-color: var(--border); color: var(--fg); }

.tc-queue-stats  { display: flex; flex-direction: column; margin-top: 10px; }
.tc-queue-row    { display: flex; justify-content: space-between; padding: 4px 0; font-size: 12px; }
.tc-queue-row span { color: #606060; }
.tc-queue-row b    { color: #27251E; }
body.appbuilder-dark .tc-queue-row span  { color: var(--fg-muted); }
body.appbuilder-dark .tc-queue-row b     { color: var(--fg); }

/* Saturation map */
.tc-sat-table   { display: grid; grid-template-columns: 1fr 1.5fr 2fr 2fr 0.8fr; gap: 12px; row-gap: 8px; align-items: center; font-size: 12px; }
.tc-sat-head    { display: contents; }
.tc-sat-head > div { font-family: OpenSans, sans-serif; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: #808080; font-weight: 600; padding-bottom: 4px; border-bottom: 1px solid #E6E2DC; }
.tc-sat-row     { display: contents; }
.tc-sat-row > div { padding: 4px 0; border-bottom: 1px solid #F1EEE8; display: flex; align-items: center; gap: 8px; }
.tc-sat-row .tc-bar { margin-top: 0; }
body.appbuilder-dark .tc-sat-head > div  { color: var(--fg-muted); border-bottom-color: var(--border); }
body.appbuilder-dark .tc-sat-row > div   { border-bottom-color: var(--border); }

/* ==============================================================
   Incidents panel
   ============================================================== */
.tc-incident {
	background: #ffffff;
	border: 1px solid #E6E2DC;
	border-left: 3px solid #269DF0;
	border-radius: 6px;
	padding: 14px 16px;
	margin-bottom: 14px;
}
.tc-incident-crit { border-left-color: #C0392B; }
.tc-incident-warn { border-left-color: #E6A817; }
.tc-incident-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tc-incident-title { flex: 1; font-size: 14px; font-weight: 600; color: #27251E; }
.tc-incident-actions { display: flex; gap: 6px; }
.tc-incident-meta { display: flex; gap: 16px; margin-top: 8px; font-size: 11px; color: #606060; }
.tc-incident-summary {
	margin-top: 8px;
	padding: 8px 10px;
	background: #FAF8F5;
	border-radius: 4px;
	font-size: 12px;
	color: #27251E;
}
.tc-incident-cols {
	display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
	margin-top: 10px;
	font-size: 12px;
}
.tc-incident-tl {
	margin-top: 12px;
	padding-top: 10px;
	border-top: 1px solid #F1EEE8;
}
.tc-incident-tl-row {
	display: grid; grid-template-columns: 60px 100px 1fr; gap: 12px;
	padding: 3px 0;
	font-size: 12px;
	align-items: baseline;
}
body.appbuilder-dark .tc-incident         { background: var(--bg-panel); border-color: var(--border); }
body.appbuilder-dark .tc-incident-title   { color: var(--fg); }
body.appbuilder-dark .tc-incident-meta    { color: var(--fg-muted); }
body.appbuilder-dark .tc-incident-summary { background: var(--bg-elev); color: var(--fg); }
body.appbuilder-dark .tc-incident-tl      { border-top-color: var(--border); }

/* ==============================================================
   Trace Explorer
   ============================================================== */
.tc-trace-head    { margin-bottom: 14px; }
.tc-trace-flight  { margin: 0; font-size: 18px; color: #27251E; display: flex; align-items: center; gap: 10px; }
.tc-trace-sub     { font-size: 12px; color: #808080; margin-top: 2px; }
.tc-trace-layout  { display: grid; grid-template-columns: 1fr 320px; gap: 14px; }
.tc-trace-waterfall { display: flex; flex-direction: column; }
.tc-trace-inspect {
	background: #FAF8F5;
	border: 1px solid #EEECEA;
	border-radius: 4px;
	padding: 10px 12px;
	font-size: 12px;
}

.tc-span-row {
	display: grid; grid-template-columns: 360px 1fr; gap: 12px;
	padding: 3px 0;
	font-size: 12px;
	align-items: center;
}
.tc-span-label { display: flex; align-items: center; gap: 8px; color: #27251E; }
.tc-span-label .tc-mono { flex-shrink: 0; }
.tc-span-ms    { color: #808080; font-size: 11px; }
.tc-span-track {
	position: relative;
	height: 16px;
	background: rgba(0, 0, 0, 0.02);
	border-radius: 2px;
}
.tc-span-bar {
	position: absolute;
	top: 1px; bottom: 1px;
	background: #5EB7F5;
	border-radius: 2px;
	display: flex; align-items: center;
	padding: 0 4px;
}
.tc-span-bar-ms { color: #ffffff; font-size: 9px; font-family: Consolas, monospace; opacity: 0.85; }
.tc-span-crit { box-shadow: 0 0 0 1px rgba(192, 57, 43, 0.6); }

.tc-inspect-head { font-size: 13px; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid #EEECEA; }
.tc-inspect-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; font-size: 11px; margin-bottom: 10px; }
.tc-inspect-grid > div { display: flex; justify-content: space-between; padding: 2px 0; }
.tc-inspect-grid > div > span:first-child { color: #808080; }
.tc-inspect-section {
	font-family: OpenSans, sans-serif;
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #808080;
	font-weight: 600;
	margin: 10px 0 4px;
}
.tc-code {
	background: #ffffff;
	border: 1px solid #EEECEA;
	border-radius: 3px;
	padding: 8px;
	font-family: Consolas, monospace;
	font-size: 11px;
	color: #27251E;
	margin: 0;
	overflow-x: auto;
	white-space: pre;
}
.tc-anno {
	margin-top: 6px;
	padding: 6px 8px;
	background: rgba(230, 168, 23, 0.08);
	border-left: 2px solid #E6A817;
	font-size: 11px;
	color: #27251E;
}
.tc-anno-info { background: rgba(38, 157, 240, 0.08); border-left-color: #269DF0; }
.tc-inspect-actions { margin-top: 10px; display: flex; gap: 6px; }

body.appbuilder-dark .tc-trace-flight    { color: var(--fg); }
body.appbuilder-dark .tc-trace-sub       { color: var(--fg-muted); }
body.appbuilder-dark .tc-trace-inspect   { background: var(--bg-elev); border-color: var(--border); }
body.appbuilder-dark .tc-span-label      { color: var(--fg); }
body.appbuilder-dark .tc-span-ms         { color: var(--fg-muted); }
body.appbuilder-dark .tc-span-track      { background: rgba(255, 255, 255, 0.04); }
body.appbuilder-dark .tc-inspect-head    { border-bottom-color: var(--border); }
body.appbuilder-dark .tc-inspect-grid > div > span:first-child { color: var(--fg-muted); }
body.appbuilder-dark .tc-inspect-section { color: var(--fg-muted); }
body.appbuilder-dark .tc-code            { background: var(--bg); border-color: var(--border); color: var(--fg); }
body.appbuilder-dark .tc-anno            { background: rgba(251, 191, 36, 0.10); color: var(--fg); }
body.appbuilder-dark .tc-anno-info       { background: rgba(94, 183, 245, 0.10); border-left-color: #5EB7F5; }

/* ==============================================================
   Memory & Context
   ============================================================== */
.tc-donut-layout    { display: grid; grid-template-columns: 130px 1fr; gap: 16px; align-items: center; }
.tc-chart-donut     { width: 130px; height: 130px; }

.tc-mem-table {
	display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr 1fr 1.5fr 1fr;
	gap: 12px; row-gap: 8px; font-size: 12px; align-items: center;
}
.tc-mem-head { display: contents; }
.tc-mem-head > div { font-family: OpenSans, sans-serif; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: #808080; font-weight: 600; padding-bottom: 4px; border-bottom: 1px solid #E6E2DC; }
.tc-mem-row  { display: contents; }
.tc-mem-row > div { padding: 4px 0; border-bottom: 1px solid #F1EEE8; }
body.appbuilder-dark .tc-mem-head > div  { color: var(--fg-muted); border-bottom-color: var(--border); }
body.appbuilder-dark .tc-mem-row > div   { border-bottom-color: var(--border); }

.tc-drift {
	display: flex; align-items: center; gap: 12px;
	padding: 8px 10px;
	border-left: 3px solid #269DF0;
	background: #FAF8F5;
	border-radius: 4px;
	margin-bottom: 6px;
}
.tc-drift-crit { border-left-color: #C0392B; }
.tc-drift-warn { border-left-color: #E6A817; }
.tc-drift-ok   { border-left-color: #2E8B57; }
.tc-drift > div:first-child { flex: 1; }
.tc-drift-title { font-size: 12px; color: #27251E; font-weight: 500; }
.tc-drift-sub   { font-size: 11px; color: #606060; margin-top: 2px; }
body.appbuilder-dark .tc-drift         { background: var(--bg-elev); }
body.appbuilder-dark .tc-drift-title   { color: var(--fg); }
body.appbuilder-dark .tc-drift-sub     { color: var(--fg-muted); }

/* ==============================================================
   Agent Registry
   ============================================================== */
.tc-registry-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 12px;
}
.tc-agent-card {
	background: #ffffff;
	border: 1px solid #E6E2DC;
	border-radius: 6px;
	padding: 12px;
}
.tc-agent-card-head     { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.tc-agent-card-icon {
	width: 28px; height: 28px;
	display: inline-flex; align-items: center; justify-content: center;
	background: rgba(38, 157, 240, 0.10);
	color: #269DF0;
	border-radius: 4px;
}
.tc-agent-card-name b   { font-size: 13px; color: #27251E; }
.tc-agent-card-name span{ display: block; font-size: 11px; color: #808080; }
.tc-agent-card-stats {
	display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 10px;
	align-items: end;
	margin-bottom: 10px;
}
.tc-agent-stat       { font-size: 16px; color: #27251E; font-weight: 600; margin-top: 2px; }
.tc-agent-card-spark { height: 36px; }
.tc-agent-card-model { font-size: 11px; color: #606060; margin-bottom: 8px; }
.tc-agent-card-tools .tc-pill { margin: 2px 4px 2px 0; font-weight: 500; }
body.appbuilder-dark .tc-agent-card       { background: var(--bg-panel); border-color: var(--border); }
body.appbuilder-dark .tc-agent-card-icon  { background: rgba(94, 183, 245, 0.16); color: #5EB7F5; }
body.appbuilder-dark .tc-agent-card-name b  { color: var(--fg); }
body.appbuilder-dark .tc-agent-card-name span { color: var(--fg-muted); }
body.appbuilder-dark .tc-agent-stat       { color: var(--fg-strong); }
body.appbuilder-dark .tc-agent-card-model { color: var(--fg-muted); }

/* ==============================================================
   Cost & Tokens / Quality scorecards (tables share grid layout)
   ============================================================== */
.tc-cost-table {
	display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
	gap: 12px; row-gap: 6px;
	font-size: 12px; align-items: center;
}
.tc-cost-head { display: contents; }
.tc-cost-head > div { font-family: OpenSans, sans-serif; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: #808080; font-weight: 600; padding-bottom: 4px; border-bottom: 1px solid #E6E2DC; }
.tc-cost-row  { display: contents; }
.tc-cost-row > div { padding: 4px 0; border-bottom: 1px solid #F1EEE8; display: flex; align-items: center; gap: 6px; }
.tc-cost-row > div .tc-bar { margin-top: 0; }
.tc-eff-table { grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr 1fr; }
/* Registry > Model catalog. 7 columns: Model · Provider · Tier ·
   Context · $/M in · $/M out · Calls 24h. The Model column is
   wider since it holds the model id (claude-sonnet-4.6 etc.). */
.tc-models-table { grid-template-columns: 2.2fr 1fr 0.8fr 1fr 0.9fr 0.9fr 0.9fr; }
body.appbuilder-dark .tc-cost-head > div  { color: var(--fg-muted); border-bottom-color: var(--border); }
body.appbuilder-dark .tc-cost-row > div   { border-bottom-color: var(--border); }

.tc-quality-table {
	display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr 1fr 1fr 1.4fr;
	gap: 12px; row-gap: 6px;
	font-size: 12px; align-items: center;
}
.tc-quality-head { display: contents; }
.tc-quality-head > div { font-family: OpenSans, sans-serif; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: #808080; font-weight: 600; padding-bottom: 4px; border-bottom: 1px solid #E6E2DC; }
.tc-quality-row  { display: contents; }
.tc-quality-row > div { padding: 4px 0; border-bottom: 1px solid #F1EEE8; display: flex; align-items: center; gap: 6px; }
.tc-quality-row > div .tc-bar { margin-top: 0; }
body.appbuilder-dark .tc-quality-head > div { color: var(--fg-muted); border-bottom-color: var(--border); }
body.appbuilder-dark .tc-quality-row > div  { border-bottom-color: var(--border); }

/* Failure modes list */
.tc-failure-list  { display: flex; flex-direction: column; gap: 8px; }
.tc-failure-row   { font-size: 12px; }
.tc-failure-head  { display: flex; justify-content: space-between; align-items: baseline; }
.tc-failure-head span:first-child { color: #27251E; }
body.appbuilder-dark .tc-failure-head span:first-child { color: var(--fg); }

/* Eval runs */
.tc-eval-list { display: flex; flex-direction: column; gap: 8px; }
.tc-eval-row  {
	display: flex; justify-content: space-between; align-items: center;
	padding: 8px 10px;
	border-left: 3px solid #269DF0;
	background: #FAF8F5;
	border-radius: 4px;
	font-size: 12px;
}
.tc-eval-warn { border-left-color: #E6A817; background: rgba(230, 168, 23, 0.06); }
.tc-eval-crit { border-left-color: #C0392B; background: rgba(192, 57, 43, 0.06); }
.tc-eval-ok   { border-left-color: #2E8B57; }
body.appbuilder-dark .tc-eval-row       { background: var(--bg-elev); }
body.appbuilder-dark .tc-eval-warn      { background: rgba(251, 191, 36, 0.10); }
body.appbuilder-dark .tc-eval-crit      { background: rgba(248, 113, 113, 0.10); }

/* ==============================================================
   Advisor & Actions
   ============================================================== */
.tc-advisor-hero {
	display: flex; align-items: center; gap: 16px;
	padding: 16px 18px;
	margin-bottom: 16px;
	background: #F0F7FC;
	border: 1px solid #CDE4F4;
	border-radius: 8px;
}
.tc-tower-orb-lg {
	width: 48px; height: 48px;
	background: radial-gradient(circle at 30% 30%, #5EB7F5, #1F84C6);
	box-shadow: 0 0 24px rgba(38, 157, 240, 0.6);
}
.tc-advisor-title { font-size: 22px; font-weight: 600; color: #27251E; display: flex; align-items: center; gap: 10px; }
.tc-advisor-sub   { font-size: 12px; color: #606060; margin-top: 4px; max-width: 720px; }
body.appbuilder-dark .tc-advisor-hero    { background: rgba(38, 157, 240, 0.10); border-color: rgba(38, 157, 240, 0.30); }
body.appbuilder-dark .tc-advisor-title   { color: var(--fg-strong); }
body.appbuilder-dark .tc-advisor-sub     { color: var(--fg-muted); }

.tc-mode-card-list { display: flex; flex-direction: column; gap: 8px; }
.tc-mode-card {
	display: flex; gap: 10px; align-items: center;
	padding: 8px 10px;
	border: 1px solid #E6E2DC;
	border-radius: 4px;
}
.tc-mode-card b    { font-size: 12px; color: #27251E; }
.tc-mode-card span { display: block; font-size: 11px; color: #606060; }
.tc-mode-card-active { border-color: #269DF0; background: rgba(38, 157, 240, 0.05); }
body.appbuilder-dark .tc-mode-card       { border-color: var(--border); }
body.appbuilder-dark .tc-mode-card b     { color: var(--fg); }
body.appbuilder-dark .tc-mode-card span  { color: var(--fg-muted); }
body.appbuilder-dark .tc-mode-card-active{ background: rgba(94, 183, 245, 0.10); border-color: var(--accent); }

.tc-insight {
	display: flex; gap: 12px;
	padding: 10px 12px;
	border-radius: 4px;
	border: 1px solid #EEECEA;
	margin-bottom: 8px;
}
.tc-insight-icon {
	width: 28px; height: 28px; flex-shrink: 0;
	display: inline-flex; align-items: center; justify-content: center;
	background: rgba(38, 157, 240, 0.10);
	color: #269DF0;
	border-radius: 4px;
}
.tc-insight-body { flex: 1; min-width: 0; }
.tc-insight-title { font-size: 12px; font-weight: 600; color: #27251E; }
.tc-insight-sub   { font-size: 11px; color: #606060; margin-top: 2px; }
.tc-insight-actions { display: flex; gap: 6px; margin-top: 8px; }
body.appbuilder-dark .tc-insight         { border-color: var(--border); }
body.appbuilder-dark .tc-insight-icon    { background: rgba(94, 183, 245, 0.16); color: #5EB7F5; }
body.appbuilder-dark .tc-insight-title   { color: var(--fg); }
body.appbuilder-dark .tc-insight-sub     { color: var(--fg-muted); }

.tc-audit       { display: flex; flex-direction: column; }
.tc-audit-row   {
	display: grid; grid-template-columns: 70px 70px 1fr auto;
	gap: 12px; align-items: center;
	padding: 6px 0;
	border-bottom: 1px solid #F1EEE8;
	font-size: 12px;
}
.tc-audit-row:last-child { border-bottom: 0; }
.tc-audit-body div:first-child { color: #27251E; }
body.appbuilder-dark .tc-audit-row       { border-bottom-color: var(--border); }
body.appbuilder-dark .tc-audit-body div:first-child { color: var(--fg); }

/* Reasoning trace numbered steps */
.tc-reason       { display: flex; flex-direction: column; }
.tc-reason-step  {
	display: grid; grid-template-columns: 28px 1fr;
	gap: 12px;
	padding: 8px 0;
	border-bottom: 1px solid #F1EEE8;
}
.tc-reason-step:last-child { border-bottom: 0; }
.tc-reason-num {
	width: 24px; height: 24px;
	display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid #CDE4F4;
	background: rgba(38, 157, 240, 0.08);
	color: #1F84C6;
	border-radius: 50%;
	font-size: 11px;
	font-weight: 600;
}
body.appbuilder-dark .tc-reason-step     { border-bottom-color: var(--border); }
body.appbuilder-dark .tc-reason-num      { border-color: rgba(94, 183, 245, 0.30); background: rgba(94, 183, 245, 0.12); color: #5EB7F5; }

/* Talk-to-Tower-AI input */
.tc-talk-input  {
	display: flex; gap: 8px;
	padding: 8px;
	border: 1px solid #E6E2DC;
	border-radius: 4px;
	background: #FAF8F5;
}
.tc-talk-input input {
	flex: 1;
	background: transparent;
	border: 0;
	outline: 0;
	font-family: OpenSans, sans-serif;
	font-size: 13px;
	color: #27251E;
}
.tc-talk-input input::placeholder { color: #808080; }
body.appbuilder-dark .tc-talk-input        { background: var(--bg-elev); border-color: var(--border); }
body.appbuilder-dark .tc-talk-input input  { color: var(--fg); }
body.appbuilder-dark .tc-talk-input input::placeholder { color: var(--fg-muted); }

/* ==============================================================
   Policies
   ============================================================== */
.tc-policy-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.tc-policy {
	background: #ffffff;
	border: 1px solid #E6E2DC;
	border-radius: 6px;
	padding: 12px 14px;
}
.tc-policy-off  { opacity: 0.6; }
.tc-policy-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tc-policy-id   { font-size: 11px; color: #1F84C6; background: rgba(38, 157, 240, 0.10); padding: 1px 6px; border-radius: 3px; }
.tc-policy-title { flex: 1; min-width: 240px; font-size: 13px; color: #27251E; }
.tc-policy-trigger { font-size: 11px; color: #606060; text-align: right; }
.tc-policy-body {
	display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
	margin-top: 10px;
}
body.appbuilder-dark .tc-policy        { background: var(--bg-panel); border-color: var(--border); }
body.appbuilder-dark .tc-policy-id     { background: rgba(94, 183, 245, 0.16); color: #5EB7F5; }
body.appbuilder-dark .tc-policy-title  { color: var(--fg); }
body.appbuilder-dark .tc-policy-trigger{ color: var(--fg-muted); }

.tc-risk-grid {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
	margin-top: 8px;
}
.tc-risk-card {
	background: #ffffff;
	border: 1px solid #E6E2DC;
	border-top: 3px solid #269DF0;
	border-radius: 4px;
	padding: 12px;
}
.tc-risk-sub   { font-size: 12px; color: #27251E; font-weight: 600; margin: 2px 0 8px; }
.tc-risk-items { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #606060; }
body.appbuilder-dark .tc-risk-card     { background: var(--bg-panel); border-color: var(--border); }
body.appbuilder-dark .tc-risk-card[style*='#269DF0'] { border-top-color: #269DF0; }
body.appbuilder-dark .tc-risk-sub      { color: var(--fg); }
body.appbuilder-dark .tc-risk-items    { color: var(--fg-muted); }

/* ==============================================================
   Business Outcomes
   ============================================================== */

/* Workflow ranking table */
.tc-outcomes-table {
	display: grid; grid-template-columns: 2.4fr 1fr 1.4fr 1.4fr 0.8fr 1.4fr;
	gap: 12px; row-gap: 6px;
	font-size: 12px; align-items: center;
}
.tc-outcomes-head { display: contents; }
.tc-outcomes-head > div {
	font-family: OpenSans, sans-serif;
	font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
	color: #808080; font-weight: 600;
	padding-bottom: 4px;
	border-bottom: 1px solid #E6E2DC;
}
.tc-outcomes-row { display: contents; }
.tc-outcomes-row > div {
	padding: 6px 0;
	border-bottom: 1px solid #F1EEE8;
	display: flex; align-items: center; gap: 6px;
}
.tc-outcomes-row > div .tc-bar { margin-top: 0; }
body.appbuilder-dark .tc-outcomes-head > div { color: var(--fg-muted); border-bottom-color: var(--border); }
body.appbuilder-dark .tc-outcomes-row > div  { border-bottom-color: var(--border); }

/* Tenant table (narrower 4-col override) */
.tc-outcomes-tenant-table { grid-template-columns: 1.6fr 1fr 1fr 1.6fr; }

/* Adoption funnel — horizontal bars whose width = % of top of funnel */
.tc-funnel { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.tc-funnel-row {
	display: grid; grid-template-columns: 160px 1fr; gap: 12px;
	align-items: center;
	font-size: 12px;
}
.tc-funnel-label { color: #606060; }
.tc-funnel-bar {
	display: flex; justify-content: space-between; align-items: center;
	padding: 6px 10px;
	background: rgba(38, 157, 240, 0.12);
	border-left: 3px solid #269DF0;
	border-radius: 3px;
	color: #1F84C6;
	font-weight: 600;
}
.tc-funnel-pct { font-family: Consolas, monospace; font-size: 11px; color: #606060; font-weight: 500; }
body.appbuilder-dark .tc-funnel-label { color: var(--fg-muted); }
body.appbuilder-dark .tc-funnel-bar   { background: rgba(94, 183, 245, 0.16); border-left-color: var(--accent); color: #5EB7F5; }
body.appbuilder-dark .tc-funnel-pct   { color: var(--fg-muted); }

/* Notable wins feed */
.tc-wins { display: flex; flex-direction: column; gap: 8px; }
.tc-win {
	display: grid; grid-template-columns: 40px 1fr 120px;
	gap: 14px; align-items: center;
	padding: 10px 12px;
	background: #FAF8F5;
	border: 1px solid #EEECEA;
	border-left: 3px solid #2E8B57;
	border-radius: 4px;
}
.tc-win-icon {
	width: 36px; height: 36px;
	display: inline-flex; align-items: center; justify-content: center;
	background: rgba(46, 139, 87, 0.14);
	color: #2E8B57;
	border-radius: 4px;
	font-size: 16px;
}
.tc-win-cat {
	font-family: OpenSans, sans-serif;
	font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
	color: #2E8B57; font-weight: 600;
	margin-bottom: 2px;
}
.tc-win-title { font-size: 13px; color: #27251E; font-weight: 600; }
.tc-win-sub   { font-size: 11px; color: #606060; margin-top: 2px; }
.tc-win-value      { text-align: right; }
.tc-win-amount     { font-size: 18px; color: #2E8B57; font-weight: 600; }
.tc-win-amount-sub { font-size: 10px; color: #808080; letter-spacing: 0.05em; text-transform: uppercase; }

body.appbuilder-dark .tc-win              { background: var(--bg-elev); border-color: var(--border); border-left-color: #34D399; }
body.appbuilder-dark .tc-win-icon         { background: rgba(52, 211, 153, 0.16); color: #34D399; }
body.appbuilder-dark .tc-win-cat          { color: #34D399; }
body.appbuilder-dark .tc-win-title        { color: var(--fg); }
body.appbuilder-dark .tc-win-sub          { color: var(--fg-muted); }
body.appbuilder-dark .tc-win-amount       { color: #34D399; }
body.appbuilder-dark .tc-win-amount-sub   { color: var(--fg-muted); }

/* 5-column KPI strip for outcomes */
.tc-kpi-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1300px) { .tc-kpi-5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px)  { .tc-kpi-5 { grid-template-columns: repeat(2, 1fr); } }

/* KPI variant with sparkline inline next to the value */
.tc-kpi-spark-inline .tc-kpi-spark-row {
	display: flex; justify-content: space-between; align-items: center; gap: 10px;
}
.tc-kpi-spark-mini { flex: 1; max-width: 100px; height: 26px; }

/* Per-flow scorecard section */
.tc-flow-section { margin-bottom: 14px; }
.tc-flow-section-head { margin-bottom: 10px; }
.tc-flow-section-head .tc-panel-title { font-size: 14px; font-weight: 600; }
.tc-flow-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
@media (max-width: 1200px) { .tc-flow-grid { grid-template-columns: 1fr; } }

.tc-flow-card {
	background: #ffffff;
	border: 1px solid #E6E2DC;
	border-radius: 6px;
	padding: 14px;
}
.tc-flow-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.tc-flow-icon {
	width: 30px; height: 30px;
	display: inline-flex; align-items: center; justify-content: center;
	background: #F4F2EE; color: #606060;
	border-radius: 5px;
}
.tc-flow-name        { flex: 1; min-width: 0; }
.tc-flow-name b      { font-size: 13px; color: #27251E; display: block; }
.tc-flow-name span   { font-size: 11px; color: #808080; }

/* Per-flow status pills */
.tc-flow-ok   { background: rgba(46, 139, 87, 0.14);  color: #2E8B57; }
.tc-flow-best { background: rgba(46, 139, 87, 0.18);  color: #2E8B57; border: 1px solid rgba(46,139,87,0.3); }
.tc-flow-risk { background: rgba(230, 168, 23, 0.18); color: #B07E08; }
body.appbuilder-dark .tc-flow-ok   { background: rgba(52, 211, 153, 0.16); color: #34D399; }
body.appbuilder-dark .tc-flow-best { background: rgba(52, 211, 153, 0.22); color: #34D399; border-color: rgba(52,211,153,0.4); }
body.appbuilder-dark .tc-flow-risk { background: rgba(251, 191, 36, 0.16); color: #FBBF24; }

.tc-flow-metrics {
	display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px;
	padding-bottom: 12px;
	margin-bottom: 12px;
	border-bottom: 1px solid #F1EEE8;
}
.tc-flow-metric-value {
	font-size: 18px; font-weight: 600; color: #27251E;
}
.tc-flow-metric-unit  { font-size: 11px; color: #808080; font-weight: 400; margin-left: 2px; }
.tc-flow-metric-delta { font-size: 11px; margin-left: 6px; font-weight: 500; }
body.appbuilder-dark .tc-flow-card           { background: var(--bg-panel); border-color: var(--border); }
body.appbuilder-dark .tc-flow-icon           { background: var(--bg-elev); color: var(--fg-muted); }
body.appbuilder-dark .tc-flow-name b         { color: var(--fg); }
body.appbuilder-dark .tc-flow-name span      { color: var(--fg-muted); }
body.appbuilder-dark .tc-flow-metrics        { border-bottom-color: var(--border); }
body.appbuilder-dark .tc-flow-metric-value   { color: var(--fg-strong); }
body.appbuilder-dark .tc-flow-metric-unit    { color: var(--fg-muted); }

/* Per-flow funnel bars */
.tc-flow-funnel       { display: flex; flex-direction: column; gap: 6px; }
.tc-flow-funnel-row   { display: grid; grid-template-columns: 90px 1fr; gap: 10px; align-items: center; font-size: 11px; }
.tc-flow-funnel-label { color: #606060; }
.tc-flow-funnel-bar   {
	position: relative;
	height: 16px;
	background: #F1EEE8;
	border-radius: 3px;
	overflow: hidden;
}
.tc-flow-funnel-fill  { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; opacity: 0.85; }
.tc-flow-funnel-value {
	position: absolute;
	right: 8px; top: 50%;
	transform: translateY(-50%);
	font-family: OpenSans, sans-serif;
	font-size: 11px;
	font-weight: 600;
	color: #27251E;
}
body.appbuilder-dark .tc-flow-funnel-label { color: var(--fg-muted); }
body.appbuilder-dark .tc-flow-funnel-bar   { background: var(--bg-elev); }
body.appbuilder-dark .tc-flow-funnel-value { color: var(--fg-strong); }

/* Cost vs Value chart + footer */
.tc-chart-cvv      { width: 100%; height: 320px; }
.tc-cvv-footer {
	display: grid; grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	padding-top: 12px;
	margin-top: 8px;
	border-top: 1px solid #F1EEE8;
}
.tc-cvv-footer > div { text-align: center; }
.tc-cvv-stat {
	font-family: OpenSans, sans-serif;
	font-size: 20px; font-weight: 600; color: #27251E;
	margin-top: 4px;
}
body.appbuilder-dark .tc-cvv-footer { border-top-color: var(--border); }
body.appbuilder-dark .tc-cvv-stat   { color: var(--fg-strong); }

/* Stakeholder digest card */
.tc-digest-card    { display: flex; flex-direction: column; }
.tc-digest-lede    {
	font-size: 14px; font-weight: 600; color: #27251E;
	margin: 4px 0 10px;
}
.tc-digest-list    { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.tc-digest-row     {
	display: grid; grid-template-columns: 18px 1fr; gap: 10px;
	align-items: start;
	font-size: 12px; color: #27251E; line-height: 1.5;
}
.tc-digest-row i   { margin-top: 3px; }
.tc-bullet-ok      { color: #2E8B57; }
.tc-bullet-info    { color: #269DF0; }
.tc-bullet-warn    { color: #B07E08; }
.tc-bullet-bad     { color: #C0392B; }
.tc-digest-actions {
	display: flex; gap: 8px; justify-content: flex-end;
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid #F1EEE8;
}
body.appbuilder-dark .tc-digest-lede     { color: var(--fg); }
body.appbuilder-dark .tc-digest-row      { color: var(--fg); }
body.appbuilder-dark .tc-digest-actions  { border-top-color: var(--border); }
body.appbuilder-dark .tc-bullet-ok       { color: #34D399; }
body.appbuilder-dark .tc-bullet-info     { color: #5EB7F5; }
body.appbuilder-dark .tc-bullet-warn     { color: #FBBF24; }
body.appbuilder-dark .tc-bullet-bad      { color: #F87171; }

/* SLA / contract commitments table */
.tc-sla-table {
	display: grid; grid-template-columns: 2.2fr 1.4fr 0.9fr 0.9fr 1.1fr 1.4fr;
	gap: 12px; row-gap: 6px;
	font-size: 12px; align-items: center;
}
.tc-sla-head { display: contents; }
.tc-sla-head > div {
	font-family: OpenSans, sans-serif;
	font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
	color: #808080; font-weight: 600;
	padding-bottom: 4px;
	border-bottom: 1px solid #E6E2DC;
}
.tc-sla-row  { display: contents; }
.tc-sla-row > div {
	padding: 6px 0;
	border-bottom: 1px solid #F1EEE8;
	display: flex; align-items: center;
}
.tc-sla-row > div .tc-bar { margin-top: 0; flex: 1; }
body.appbuilder-dark .tc-sla-head > div { color: var(--fg-muted); border-bottom-color: var(--border); }
body.appbuilder-dark .tc-sla-row > div  { border-bottom-color: var(--border); }