/*******************************************************************************
 * @file         style.css
 * @brief        Brand colors sampled directly from the TopoTrace logo assets.
 * @project      TopoTrace
 *
 * @author       Michael McGinnis
 * @date         2026-09-14
 * @version      1.0.0
 *
 * Copyright (c) 2026 TopoTrace LLC. All rights reserved.
 * Licensed under the Apache License, Version 2.0 -- see the LICENSE file at the repository root.
 ******************************************************************************/

/* Brand colors sampled directly from the TopoTrace logo assets. */
:root {
  --mu-black: #1a2123;
  --mu-black-soft: #262f32;
  --mu-yellow: #fbc41b;
  --mu-yellow-dark: #d9a70f;
  --mu-white: #ffffff;
  --mu-page-bg: #f4f3ef;
  --mu-card-bg: #ffffff;
  --mu-border: #e4e1d8;
  --mu-text: #23272a;
  --mu-text-muted: #6b7278;
  --radius: 10px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--mu-page-bg);
  color: var(--mu-text);
}

a { color: inherit; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: var(--mu-black);
  color: var(--mu-white);
  padding: 14px 24px;
  flex-wrap: wrap;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--mu-white);
}
.brand-mark { height: 36px; width: auto; display: block; }
.brand-word {
  font-weight: 800;
  letter-spacing: 0.06em;
  font-size: 1.25rem;
}
.brand-tagline {
  font-size: 0.75rem;
  color: var(--mu-yellow);
  border-left: 1px solid rgba(255,255,255,0.25);
  padding-left: 12px;
  margin-left: 2px;
  white-space: nowrap;
}

.view-tabs {
  display: flex;
  gap: 2px;
}
/* Icon-only nav -- was a row of text tabs (Hosts/Board/Fleet/Agents/
   Compliance/Ask TopoTrace/Docs/Settings), which got cramped as more tabs
   were added. Each link is now a plain inline SVG with a native title
   tooltip for the name; the text label itself is kept in the DOM for
   screen readers but visually hidden (not display:none, so it's still
   announced) rather than removed. */
.view-tabs a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 6px;
}
.view-tabs a svg { width: 18px; height: 18px; flex: none; }
.view-tabs a .tab-label {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.view-tabs a:hover { color: var(--mu-white); background: rgba(255,255,255,0.08); }
.view-tabs a.active { color: var(--mu-black); background: var(--mu-yellow); }

.search {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.search select, .search input {
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid transparent;
  font-size: 0.9rem;
}
.search input { min-width: 200px; }
.search button {
  padding: 8px 14px;
  border-radius: 6px;
  border: none;
  background: var(--mu-yellow);
  color: var(--mu-black);
  font-weight: 700;
  cursor: pointer;
}
.search button:hover { background: var(--mu-yellow-dark); }
.search button.ghost {
  background: transparent;
  color: var(--mu-white);
  font-weight: 500;
  border: 1px solid rgba(255,255,255,0.35);
}

main#app {
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px 24px 60px;
}

.section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
}
.section-heading h1 { font-size: 1.3rem; margin: 0; }
.section-heading .meta { color: var(--mu-text-muted); font-size: 0.85rem; }

.host-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.host-card {
  background: var(--mu-card-bg);
  border: 1px solid var(--mu-border);
  border-radius: var(--radius);
  padding: 16px;
  text-decoration: none;
  color: var(--mu-text);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.host-card:hover {
  box-shadow: 0 4px 16px rgba(26,33,35,0.10);
  transform: translateY(-1px);
}
.host-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.platform-icon { width: 32px; height: 32px; flex: none; }
.host-name { font-weight: 700; font-size: 1.05rem; }
.host-platform { color: var(--mu-text-muted); font-size: 0.8rem; text-transform: capitalize; }

.host-card dl {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 10px;
  font-size: 0.85rem;
}
.host-card dt { color: var(--mu-text-muted); }
.host-card dd { margin: 0; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.host-card .last-cooked {
  font-size: 0.75rem;
  color: var(--mu-text-muted);
  border-top: 1px solid var(--mu-border);
  padding-top: 8px;
}

.empty-state {
  text-align: center;
  padding: 60px 20px;
}
.empty-state img { max-width: 360px; width: 100%; height: auto; margin-bottom: 20px; }
.empty-state h2 { margin: 0 0 8px; }
.empty-state p { color: var(--mu-text-muted); margin: 0 0 4px; }
.empty-state code {
  background: var(--mu-black);
  color: var(--mu-yellow);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.9rem;
}

.back-link {
  display: inline-block;
  margin-bottom: 14px;
  color: var(--mu-text-muted);
  text-decoration: none;
  font-size: 0.9rem;
}
.back-link:hover { color: var(--mu-text); }

.detail-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}
.detail-head .platform-icon { width: 48px; height: 48px; }
.detail-head h1 { margin: 0; }
.detail-meta { font-size: 0.9rem; color: var(--mu-text-muted); }

.fact-card {
  background: var(--mu-card-bg);
  border: 1px solid var(--mu-border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 18px;
}
.fact-card h2 {
  margin: 0 0 14px;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--mu-text-muted);
}
.fact-table { width: 100%; border-collapse: collapse; }
.fact-table tr { border-bottom: 1px solid var(--mu-border); }
.fact-table tr:last-child { border-bottom: none; }
.fact-table td { padding: 8px 6px; font-size: 0.92rem; }
.fact-table td:first-child { color: var(--mu-text-muted); width: 40%; }

/* Sub-table for {"count","items"} list-shaped facts (installed_software,
   disk_usage, pending_updates, etc.) -- see renderListFact/isListShapedFact
   in app.js. A scroll cap keeps a 2000+-row Installed Software card from
   turning the host-detail page into an endless scroll. */
.fact-list-scroll { max-height: 360px; overflow-y: auto; border: 1px solid var(--mu-border); border-radius: var(--radius); }
.fact-list-table td:first-child { width: auto; color: var(--mu-text); }
.fact-list-table th {
  position: sticky;
  top: 0;
  background: var(--mu-card-bg);
  text-align: left;
  padding: 8px 6px;
  font-size: 0.82rem;
  color: var(--mu-text-muted);
  border-bottom: 1px solid var(--mu-border);
}

.badge {
  display: inline-block;
  background: var(--mu-yellow);
  color: var(--mu-black);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: 8px;
}

/* Kanban board */
.board {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  overflow-x: auto;
  padding-bottom: 12px;
}
.board-column {
  background: var(--mu-card-bg);
  border: 1px solid var(--mu-border);
  border-radius: var(--radius);
  width: 270px;
  flex: none;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 220px);
}
.board-column.drag-over { outline: 2px dashed var(--mu-yellow-dark); outline-offset: -2px; }
.board-column-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--mu-border);
  font-weight: 700;
  font-size: 0.9rem;
}
.board-column-header .count {
  background: var(--mu-page-bg);
  color: var(--mu-text-muted);
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 0.75rem;
  font-weight: 600;
}
.board-column-body {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  min-height: 60px;
}
.board-card {
  background: var(--mu-page-bg);
  border: 1px solid var(--mu-border);
  border-radius: 8px;
  padding: 10px 12px;
  cursor: grab;
}
.board-card:active { cursor: grabbing; }
.board-card.dragging { opacity: 0.4; }
.board-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.board-card .platform-icon { width: 20px; height: 20px; flex: none; }
.board-card-name {
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  color: var(--mu-text);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.board-card-name:hover { text-decoration: underline; }
.board-card .last-cooked { font-size: 0.72rem; color: var(--mu-text-muted); margin-top: 6px; }
.board-card .tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }

.tag-pill {
  display: inline-block;
  background: var(--mu-black);
  color: var(--mu-yellow);
  font-size: 0.68rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.tag-pill.removable { padding-right: 6px; }
.tag-pill button {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  font-size: 0.8rem;
  margin-left: 4px;
  padding: 0;
  line-height: 1;
}

.stale-badge {
  display: inline-block;
  background: #fdecec;
  color: #a33a2a;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: 6px;
}

.board-add-column {
  flex: none;
  width: 220px;
}
.board-add-column form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  background: var(--mu-card-bg);
  border: 1px dashed var(--mu-border);
  border-radius: var(--radius);
}
.board-add-column input {
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid var(--mu-border);
  font-size: 0.85rem;
}
.board-add-column button {
  padding: 7px 10px;
  border-radius: 6px;
  border: none;
  background: var(--mu-yellow);
  color: var(--mu-black);
  font-weight: 700;
  cursor: pointer;
  font-size: 0.85rem;
}
.board-add-column button:hover { background: var(--mu-yellow-dark); }

/* Host detail: group/tag editors, change timeline */
.editor-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 10px 0 20px;
}
.editor-row label { font-size: 0.8rem; color: var(--mu-text-muted); font-weight: 600; }
.editor-row select, .editor-row input[type="text"], .editor-row input[type="password"] {
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid var(--mu-border);
  font-size: 0.85rem;
}
.editor-row input[type="text"], .editor-row input[type="password"] { min-width: 140px; }
.editor-row input[type="checkbox"] { width: 16px; height: 16px; }
.editor-row button {
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--mu-border);
  background: var(--mu-card-bg);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 600;
}
.editor-row button:hover { background: var(--mu-page-bg); }
.editor-row .save-msg { font-size: 0.78rem; color: var(--mu-text-muted); }

.changes-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.change-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--mu-border);
  font-size: 0.88rem;
}
.change-row:last-child { border-bottom: none; }
.change-action {
  flex: none;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
}
.change-action.add { background: #e4f5e6; color: #1f7a34; }
.change-action.remove { background: #fdecec; color: #a33a2a; }
.change-action.update { background: #fdf3d9; color: #8a6300; }
.change-detail { flex: 1; }
.change-time { flex: none; color: var(--mu-text-muted); font-size: 0.78rem; }

.error-banner {
  background: #fdecec;
  border: 1px solid #f3b4b4;
  color: #7a1f1f;
  padding: 12px 16px;
  border-radius: var(--radius);
  margin-bottom: 16px;
}

/* Posture badges -- coarse red/yellow/green, shared by the host detail
   header, the posture card, and the fleet summary's average-score tile. */
.posture-badge {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  vertical-align: middle;
}
.posture-good { background: #e4f5e6; color: #1f7a34; }
.posture-warn { background: #fdf3d9; color: #8a6300; }
.posture-bad { background: #fdecec; color: #a33a2a; }
.posture-body { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.posture-findings { margin: 0; padding-left: 18px; }
.posture-clean { color: var(--mu-text-muted); margin: 0; }

.vuln-list { list-style: none; margin: 0; padding: 0; }
.vuln-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--mu-border);
  font-size: 0.88rem;
}
.vuln-row:last-child { border-bottom: none; }
.vuln-detail { flex: 1; }
.severity-pill {
  flex: none;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
}
.severity-critical { background: #fdecec; color: #a33a2a; }
.severity-high { background: #fdecec; color: #a33a2a; }
.severity-medium { background: #fdf3d9; color: #8a6300; }
.severity-low { background: #eef1f2; color: #4a5257; }

/* Shadow AI -- its own visual identity, distinct from generic
   allow/deny violations and CVE severity, so it reads as its own
   category at a glance. */
.shadow-ai-pill { background: #ede4fb; color: #5b2fa8; }
.shadow-ai-card h2 { color: #5b2fa8; }

/* Ask TopoTrace -- a small chat-style panel over POST /api/ask. */
.ask-card { display: flex; flex-direction: column; gap: 12px; }
.ask-log {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: 55vh;
  overflow-y: auto;
  padding-right: 4px;
}
.ask-turn { display: flex; flex-direction: column; gap: 6px; }
.ask-question { color: var(--mu-text-muted); }
.ask-answer { white-space: pre-wrap; line-height: 1.5; }
.ask-error { color: #a33a2a; }
.ask-form { display: flex; gap: 10px; align-items: flex-end; }
.ask-input {
  flex: 1;
  resize: vertical;
  font: inherit;
  padding: 8px 10px;
  border: 1px solid var(--mu-border);
  border-radius: var(--radius);
  background: var(--mu-card-bg);
  color: inherit;
}
.ask-form button { flex: none; }

/* Fleet summary */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
.stat-card {
  background: var(--mu-card-bg);
  border: 1px solid var(--mu-border);
  border-radius: var(--radius);
  padding: 16px;
  text-align: center;
}
.stat-card.stat-warn { border-color: #f3b4b4; }
.stat-value { font-size: 1.8rem; font-weight: 700; }
.stat-label { color: var(--mu-text-muted); font-size: 0.82rem; margin-top: 4px; }

.platform-breakdown { list-style: none; margin: 0; padding: 0; }
.platform-breakdown li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--mu-border);
}
.platform-breakdown li:last-child { border-bottom: none; }
.platform-breakdown .platform-icon { width: 20px; height: 20px; }
.platform-breakdown .count { margin-left: auto; color: var(--mu-text-muted); }

.policy-list { list-style: none; margin: 0; padding: 0; }
.policy-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--mu-border);
  font-size: 0.88rem;
}
.policy-row:last-child { border-bottom: none; }
.policy-name { font-weight: 700; }
.policy-scope, .policy-condition { color: var(--mu-text-muted); }

.footer {
  text-align: center;
  color: var(--mu-text-muted);
  font-size: 0.8rem;
  padding: 20px;
}
.footer a { color: var(--mu-text-muted); }

/* Auth control (header) -- mirrors .search's dark-on-topbar button/input
   styling since .auth-control sits in the same header.topbar as .search. */
.auth-control {
  display: flex;
  align-items: center;
  gap: 10px;
}
.oauth-status {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--mu-white);
  font-size: 0.9rem;
}
.oauth-status a {
  color: var(--mu-yellow);
  font-weight: 600;
  text-decoration: none;
}
.oauth-status a:hover { text-decoration: underline; }
.auth-control button {
  padding: 8px 14px;
  border-radius: 6px;
  border: none;
  background: var(--mu-yellow);
  color: var(--mu-black);
  font-weight: 700;
  cursor: pointer;
}
.auth-control button:hover { background: var(--mu-yellow-dark); }
.auth-control button.ghost {
  background: transparent;
  color: var(--mu-white);
  font-weight: 500;
  border: 1px solid rgba(255,255,255,0.35);
}
.auth-form {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.auth-form input {
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid transparent;
  font-size: 0.9rem;
  min-width: 220px;
}
.auth-form .save-msg { color: var(--mu-white); opacity: 0.85; font-size: 0.78rem; }

/* Agents view (main content, light theme) -- one-time token reveal panel
   and the plain-text download list, styled to match .fact-card/.policy-row. */
.reveal-panel {
  background: #fff9e6;
  border: 1px solid var(--mu-yellow-dark);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 18px;
}
.reveal-panel p { margin: 0 0 10px; }
.install-snippet {
  background: var(--mu-black);
  color: var(--mu-white);
  padding: 12px 14px;
  border-radius: 6px;
  font-size: 0.82rem;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}
.reveal-panel button {
  margin-top: 10px;
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid var(--mu-border);
  background: var(--mu-card-bg);
  cursor: pointer;
  font-weight: 600;
}
.reveal-panel button:hover { background: var(--mu-page-bg); }

.downloads-list { list-style: none; margin: 0; padding: 0; }
.downloads-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--mu-border);
  font-size: 0.88rem;
}
.downloads-list li:last-child { border-bottom: none; }
.downloads-list a { color: var(--mu-text); font-weight: 700; text-decoration: none; }
.downloads-list a:hover { text-decoration: underline; }

/* Generic ghost button for light-background contexts (Revoke, etc. --
   distinct from .search/.auth-control's dark-header ghost variant). */
.policy-row button.ghost {
  padding: 5px 12px;
  border-radius: 6px;
  border: 1px solid var(--mu-border);
  background: transparent;
  color: var(--mu-text);
  cursor: pointer;
  font-weight: 600;
}
.policy-row button.ghost:hover { background: var(--mu-page-bg); }

/* Docs tab: two-column sidebar nav + rendered markdown body. */
.docs-layout {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}
.docs-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: none;
  width: 180px;
}
.docs-nav li { margin-bottom: 2px; }
.docs-nav a {
  display: block;
  padding: 8px 10px;
  border-radius: 6px;
  color: var(--mu-text);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.88rem;
}
.docs-nav a:hover { background: var(--mu-page-bg); }
.docs-nav a.active { background: var(--mu-accent-soft, var(--mu-page-bg)); color: var(--mu-accent, var(--mu-text)); }
.docs-body {
  flex: 1;
  min-width: 0;
  background: var(--mu-card-bg);
  border: 1px solid var(--mu-border);
  border-radius: var(--radius);
  padding: 20px 24px;
}
.docs-body h2 { font-size: 1.15rem; margin: 20px 0 10px; }
.docs-body h2:first-child { margin-top: 0; }
.docs-body h3 { font-size: 1rem; margin: 16px 0 8px; }
.docs-body h4 { font-size: 0.92rem; margin: 12px 0 6px; }
.docs-body p { line-height: 1.55; margin: 0 0 12px; }
.docs-body code { background: var(--mu-page-bg); padding: 1px 5px; border-radius: 4px; font-size: 0.85em; }
.docs-list { margin: 0 0 12px; padding-left: 22px; }
.docs-list li { margin-bottom: 4px; line-height: 1.5; }
.docs-table { width: 100%; border-collapse: collapse; margin: 0 0 16px; font-size: 0.88rem; }
.docs-table th, .docs-table td {
  text-align: left;
  padding: 6px 10px;
  border-bottom: 1px solid var(--mu-border);
}
.docs-table th { color: var(--mu-text-muted); font-size: 0.78rem; text-transform: uppercase; }
@media (max-width: 720px) {
  .docs-layout { flex-direction: column; }
  .docs-nav { width: 100%; }
}

/* Air-gapped import panel (Agents tab): a plain textarea for pasting
   the JSON blob an air-gapped host's script produced. */
.airgap-form { flex-direction: column; align-items: stretch; }
.airgap-textarea {
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8rem;
  padding: 8px 10px;
  border: 1px solid var(--mu-border);
  border-radius: 6px;
  resize: vertical;
  box-sizing: border-box;
}

/* Score trends (Fleet tab) and host sparklines -- see trendChart in app.js */
.trend-chart { width: 100%; height: auto; display: block; margin: 6px 0 4px; }
.trend-grid { stroke: var(--mu-border); stroke-width: 1; }
.trend-axis { fill: var(--mu-text-muted); font-size: 11px; }
.trend-label { fill: var(--mu-text); font-size: 12px; font-weight: 600; }
.trend-cross { stroke: var(--mu-text-muted); stroke-width: 1; stroke-dasharray: 3 3; }
.trend-tip-bg { fill: var(--mu-black); opacity: 0.92; }
.trend-tip-text { fill: var(--mu-white); font-size: 11px; }
.trend-legend { display: flex; gap: 16px; font-size: 0.82rem; color: var(--mu-text-muted); margin-top: 4px; }
.trend-legend span { display: inline-flex; align-items: center; gap: 6px; }
.trend-swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.mttr-grid { margin-top: 12px; }
.sparkline { width: 420px; max-width: 100%; height: auto; display: block; }
.fact-card details summary { cursor: pointer; font-size: 0.85rem; color: var(--mu-text-muted); margin-top: 8px; }
.spark-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

/* Blended risk (Fleet tab + host page) and baseline comparison */
.risk-list { list-style: none; padding: 0; margin: 8px 0 0; }
.risk-row { display: grid; grid-template-columns: 160px 1fr 110px auto; gap: 12px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--mu-border); font-size: 0.9rem; }
.risk-row:last-child { border-bottom: none; }
.risk-bar-wrap { display: block; height: 10px; background: var(--mu-page-bg); border-radius: 5px; overflow: hidden; }
.risk-bar { display: block; height: 100%; border-radius: 5px; background: var(--mu-yellow-dark); }
.risk-bar.risk-high, .risk-bar.risk-critical { background: #c0392b; }
.risk-bar.risk-low { background: #6b7278; }
.bench-table th { text-align: left; font-size: 0.8rem; color: var(--mu-text-muted); padding: 6px; }
.bench-delta { font-size: 0.82rem; font-weight: 600; }
.bench-better { color: #2e7d32; }
.bench-worse { color: #c0392b; }
.framework-block { padding: 8px 0; border-bottom: 1px solid var(--mu-border); }
.framework-block:last-child { border-bottom: none; }
.framework-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.fact-card h3.subhead { font-size: 0.82rem; text-transform: uppercase; letter-spacing: .04em; color: var(--mu-text-muted); margin: 14px 0 6px; }
.editor-row input.wide { min-width: 360px; flex: 1; }
.exec-summary p { margin: 6px 0; max-width: 78ch; }

/* Network & asset graph (Fleet tab) */
.asset-graph { width: 100%; height: auto; display: block; margin: 8px 0; background: var(--mu-page-bg); border-radius: var(--radius); }
.graph-edge { stroke: var(--mu-border); stroke-width: 1.2; }
.graph-edge-same-host { stroke: #2f6fb3; stroke-width: 2; stroke-dasharray: 4 3; }
.graph-hub { fill: var(--mu-card-bg); stroke: var(--mu-black-soft); stroke-width: 2; }
.graph-hub-label { font-size: 10px; font-weight: 700; fill: var(--mu-text); }
.graph-label { font-size: 11px; font-weight: 600; fill: var(--mu-text); }
.graph-sub { font-size: 9.5px; fill: var(--mu-text-muted); }
.graph-asset { fill: var(--mu-card-bg); stroke-width: 2; stroke-dasharray: 3 2; }
.graph-node-host { cursor: pointer; }

/* Entity relationship map (Entity map tab).
   Family carries color, kind carries shape, status carries a ring.
   Three family hues, because a node-link diagram can put any two nodes
   side by side: past three, a categorical palette stops separating
   every pair for colorblind readers. Validated all-pairs against this
   page background (#f4f3ef) -- worst CVD deltaE 9.2, worst
   normal-vision deltaE 24.0. All three sit under 3:1 contrast against
   the surface, so every node ships a visible text label and the tab
   ships a table view; color is never the only carrier. */
:root {
  --ent-asset: #2a78d6;
  --ent-finding: #eb6834;
  --ent-policy: #1baf7a;
  --ent-critical: #c0392b;
  --ent-warning: #d9a70f;
}
.entity-graph { width: 100%; height: auto; display: block; background: var(--mu-page-bg); border-radius: var(--radius); }
.entity-graph-wrap { position: relative; }
.ent-edge { stroke: #c9c6bb; stroke-width: 1.4; fill: none; }
.ent-edge-governs { stroke-dasharray: 5 3; }
.ent-edge-indirect { stroke-dasharray: 3 3; stroke: #8f8c82; stroke-width: 1.5; }
.ent-edge-dim { stroke: #e0ddd3; }
.ent-edge-active { stroke: var(--mu-black-soft); stroke-width: 2.2; }
.ent-node { cursor: pointer; }
.ent-node-shape { stroke: var(--mu-card-bg); stroke-width: 2; }
.ent-fam-asset .ent-node-shape { fill: var(--ent-asset); }
.ent-fam-finding .ent-node-shape { fill: var(--ent-finding); }
.ent-fam-policy .ent-node-shape { fill: var(--ent-policy); }
.ent-status-ring { fill: none; stroke-width: 2.4; }
.ent-status-critical .ent-status-ring { stroke: var(--ent-critical); }
.ent-status-warning .ent-status-ring { stroke: var(--ent-warning); }
.ent-node-dim { opacity: 0.28; }
.ent-node-focused .ent-node-shape { stroke: var(--mu-black); stroke-width: 2.6; }
.ent-focus-halo { fill: none; stroke: var(--mu-black); stroke-width: 1.6; stroke-dasharray: 3 3; opacity: .55; }
.ent-node-focused .ent-label { font-size: 12px; font-weight: 700; }
.ent-label { font-size: 10.5px; font-weight: 600; fill: var(--mu-text); paint-order: stroke; stroke: var(--mu-page-bg); stroke-width: 3px; stroke-linejoin: round; }
.ent-label-dim { opacity: 0.3; }

/* filter row: one row above the graph, per the interaction spec */
.ent-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0 4px; }
.ent-filters .ent-filter-label { font-size: 0.8rem; color: var(--mu-text-muted); text-transform: uppercase; letter-spacing: .04em; margin-right: 2px; }
.ent-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--mu-border); border-radius: 999px; background: var(--mu-card-bg); font-size: 0.82rem; cursor: pointer; color: var(--mu-text); }
.ent-chip[aria-pressed="true"] { border-color: var(--mu-black-soft); box-shadow: inset 0 0 0 1px var(--mu-black-soft); }
.ent-chip[aria-pressed="false"] { opacity: 0.55; }
.ent-chip-swatch { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.ent-chip-count { color: var(--mu-text-muted); font-variant-numeric: tabular-nums; }

/* legend: always present, naming both the family colors and the kind
   shapes, so identity never rests on color alone */
.ent-legend { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin: 6px 0 2px; font-size: 0.8rem; color: var(--mu-text-muted); }
.ent-legend-item { display: inline-flex; align-items: center; gap: 5px; }
.ent-legend svg { flex: none; }

/* hover tooltip */
.ent-tip { position: absolute; pointer-events: none; z-index: 5; background: var(--mu-black); color: var(--mu-white); padding: 6px 9px; border-radius: 6px; font-size: 0.78rem; line-height: 1.35; max-width: 260px; box-shadow: 0 4px 14px rgba(0,0,0,.22); }
.ent-tip-kind { color: var(--mu-yellow); text-transform: uppercase; letter-spacing: .05em; font-size: 0.68rem; }

/* detail pane + table view */
.ent-detail { border-top: 1px solid var(--mu-border); margin-top: 10px; padding-top: 10px; }
.ent-detail h3 { margin: 0 0 2px; font-size: 1rem; }
.ent-rel-list { list-style: none; padding: 0; margin: 8px 0 0; }
.ent-rel { display: grid; grid-template-columns: 108px 92px 1fr; gap: 10px; align-items: baseline; padding: 5px 0; border-bottom: 1px solid var(--mu-border); font-size: 0.87rem; }
.ent-rel:last-child { border-bottom: none; }
.ent-rel-kind { color: var(--mu-text-muted); font-size: 0.8rem; }
.ent-rel-type { color: var(--mu-text-muted); font-size: 0.8rem; }
.ent-rel-name { font-weight: 600; }
.ent-rel .ent-pill, .ent-detail p .ent-pill { margin-left: 6px; }
.ent-pill { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.ent-pill-critical { background: #fdecec; color: #a33a2a; }
.ent-pill-warning { background: #fdf3d9; color: #8a6300; }
.ent-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; margin-top: 8px; }
.ent-table th { text-align: left; font-size: 0.74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--mu-text-muted); border-bottom: 1px solid var(--mu-border); padding: 5px 8px 5px 0; }
.ent-table td { padding: 5px 8px 5px 0; border-bottom: 1px solid var(--mu-border); vertical-align: top; }
.ent-table tr:last-child td { border-bottom: none; }