/* public/css/dashboard.css — Conclave Dashboard Layout & Component Styles */

/* ── Flex layout wrapper ────────────────────────────────────────────────────── */

#dashboard-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 0;           /* gap handled by sidebar margin so toggle sits flush */
  position: relative;
}

/* ── Toggle button — floats OUTSIDE the collapsible sidebar ─────────────────── */

#sidebar-toggle {
  flex-shrink: 0;
  align-self: flex-start;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-top: 2px;
  margin-right: 8px;
  background: transparent;
  border: 1px solid rgba(0, 116, 128, 0.25);
  color: #666;
  border-radius: 8px;
  padding: 0;
  cursor: pointer;
  font-size: 0.75rem;
  white-space: nowrap;
  transition: color 0.2s, border-color 0.2s;
  z-index: 10;
}

#sidebar-toggle:hover {
  color:        var(--ona-teal);
  border-color: var(--ona-teal);
}

/* ── Sidebar — collapses to zero width, content clipped by overflow:hidden ───── */

#dashboard-sidebar {
  width: 280px;
  min-width: 280px;
  flex-shrink: 0;
  overflow: hidden;
  transition: width 0.3s ease, min-width 0.3s ease;
  margin-right: 16px;
}

#dashboard-sidebar.sidebar-collapsed {
  width: 0;
  min-width: 0;
  margin-right: 0;
}

/* Fixed inner width prevents content wrapping during the slide animation */
#sidebar-inner {
  width: 280px;
}

/* ── Main content panel ─────────────────────────────────────────────────────── */

#dashboard-main {
  flex: 1;
  min-width: 0; /* Prevents flex item from overflowing its container */
  transition: none; /* flex:1 reflows naturally — no explicit width transition needed */
}

/* ── Accordion cards ────────────────────────────────────────────────────────── */

.dash-card {
  background:    #141416;
  border:        1px solid rgba(0, 116, 128, 0.22);
  border-radius: 20px;
  margin-bottom: 12px;
  overflow:      hidden;
  box-shadow:    0 2px 16px rgba(0, 0, 0, 0.35);
  transition:    box-shadow 0.25s ease, border-color 0.25s ease;
}
.dash-card:hover {
  border-color: rgba(0, 116, 128, 0.42);
  box-shadow:   0 4px 24px rgba(0, 0, 0, 0.45), 0 0 16px rgba(0, 116, 128, 0.06);
}

.dash-card-header {
  background:    #0e0e10;
  border-bottom: 1px solid rgba(0, 116, 128, 0.15);
  border-left:   3px solid var(--ona-teal);
}

.dash-accordion-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: transparent;
  border: none;
  padding: 12px 16px;
  color: #c3c3c3;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: color 0.15s;
}

.dash-accordion-btn:hover,
.dash-accordion-btn[aria-expanded="true"] {
  color: var(--ona-teal);
}

.dash-chevron {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

/* Chevron points right when section is collapsed, down when open */
.dash-accordion-btn[aria-expanded="false"] .dash-chevron {
  transform: rotate(-90deg);
}

.dash-card-body {
  padding: 20px;
}

/* ── Metric table collapsibles ──────────────────────────────────────────────── */

.metric-collapse-card {
  background: #0d0d0f;
  border: 1px solid #252525;
  border-radius: 4px;
  margin-bottom: 6px;
}

.metric-collapse-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: transparent;
  border: none;
  padding: 8px 12px;
  color: var(--ona-teal);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
}

.metric-collapse-btn:hover {
  background: rgba(244, 121, 32, 0.06);
}

.metric-chevron {
  flex-shrink: 0;
  color: #D1D1D1;
  transition: transform 0.2s ease;
}

.metric-collapse-btn[aria-expanded="false"] .metric-chevron {
  transform: rotate(-90deg);
}

.metric-collapse-body {
  padding: 0 12px 12px;
}

/* ── Metric tables ──────────────────────────────────────────────────────────── */

.metric-table {
  font-size: 0.82rem;
}

.metric-table thead th {
  color: var(--ona-teal);
  border-bottom-color: #333;
}

.metric-table tbody tr:hover {
  background-color: rgba(0, 116, 128, 0.08);
}

/* ── Sidebar multi-select height cap ────────────────────────────────────────── */

select[multiple] {
  max-height: 90px;
  overflow-y: auto;
}

/* ── Mobile: stack sidebar above main panel ─────────────────────────────────── */

@media (max-width: 991.98px) {
  #dashboard-wrapper {
    flex-direction: column;
  }

  /* Override the width transition — full width on small screens */
  #dashboard-sidebar,
  #dashboard-sidebar.sidebar-collapsed {
    width: 100%;
    min-width: 0;
    margin-right: 0;
    transition: none;
    overflow: visible;
  }

  #sidebar-inner {
    width: 100%;
  }

  /* Hide toggle on mobile — sidebar is always visible stacked above content */
  #sidebar-toggle {
    display: none;
  }
}

/* ── Extracted from dashboard.ejs inline styles ──────────────────────────── */

/* Outer section wrapper */
.dashboard-section {
  padding: 20px 0 40px;
}

/* Sidebar card background */
.sidebar-card {
  background:    #141416;
  border:        1px solid rgba(0, 116, 128, 0.22);
  border-radius: 20px;
  box-shadow:    0 2px 16px rgba(0, 0, 0, 0.30);
}

/* Section heading labels ("Filter Cardinals", "Network Display") */
.sidebar-section-label {
  color: #D1D1D1;
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* Individual filter labels */
.sidebar-label {
  color: #c3c3c3;
}

/* Divider between sidebar sections */
.sidebar-divider {
  border-color: #333;
}

/* Edge weight range slider accent colour */
.sidebar-range {
  accent-color: var(--ona-teal);
}

/* Run Analysis button */
.run-analysis-btn {
  background: #8B0000;
  color: #fff;
  font-weight: 600;
}

/* ── Loading state elements ───────────────────────────────────────────────── */

/* Initial hidden state for all section loading spinners */
.dashboard-loading {
  display: none;
}

/* Spinner icon colour */
.dashboard-spinner {
  color: var(--ona-teal);
}

/* "Loading…" status text below each spinner */
.dashboard-loading-text {
  color: #D1D1D1;
}

/* ── Plotly chart container heights ──────────────────────────────────────── */

.chart-sm {
  height: 320px;
}

.chart-md {
  height: 440px;
}

.chart-lg {
  height: 500px;
}

/* ── Cytoscape network graph containers ──────────────────────────────────── */

/* Relative wrapper needed for absolute-positioned tooltip */
.graph-wrapper {
  position: relative;
}

/* The div Cytoscape mounts into */
.graph-container {
  width: 100%;
  height: 780px;
  background: #0a0a0c;
  border-radius: 12px;
  border: 1px solid rgba(0, 116, 128, 0.10);
}

/* Tooltip overlay shown on node hover */
.graph-tooltip {
  position: absolute;
  pointer-events: none;
  display: none;
  background: rgba(0, 0, 0, 0.85);
  color: #c3c3c3;
  border: 1px solid #333;
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 0.8rem;
  max-width: 220px;
  line-height: 1.5;
}

/* ── ONA demo split-pane layout ──────────────────────────────────────────────
   Used by /demo/lawyers and /demo/management.
   The #dashboard-wrapper already provides the outer flex row
   (filter sidebar | #dashboard-main). Inside #dashboard-main we add a second
   flex row: left Cytoscape canvas (flex: 1) + right insights panel (320px).
────────────────────────────────────────────────────────────────────────────── */

.ona-vital-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 8px;
}

.ona-main-split {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  align-items: flex-start;
  height: calc(100vh - 220px);
  min-height: 580px;
}

/* Left pane — spans first 3 of 4 grid columns, aligning with
   Connectivity / Information Speed / Silo Index vital cards */
.ona-canvas-pane {
  grid-column: span 3;
  min-width: 0;
  position: relative;
  height: 100%;
}

/* Override the fixed 900px height when inside the split-pane */
.ona-canvas-pane .graph-container {
  height: 100%;
}

/* Right pane — spans 4th column, aligning with Communities vital card.
   Acts as a transparent flex-column layout rail; visual styling is on
   the individual .ona-bento-box tiles inside it. */
.ona-insights-pane {
  grid-column: span 1;
  height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: transparent;
  border: none;
  padding: 0;
  scrollbar-width: thin;
  scrollbar-color: #333 transparent;
}

.ona-insights-pane::-webkit-scrollbar { width: 5px; }
.ona-insights-pane::-webkit-scrollbar-track { background: transparent; }
.ona-insights-pane::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }

/* ── Individual bento box tile inside the insights pane ─────────────────────── */
.ona-bento-box {
  background:    #111;
  border:        1px solid rgba(0, 116, 128, 0.18);
  border-radius: 10px;
  padding:       0;          /* padding handled by lb-accordion-btn and lb-accordion-body */
  flex-shrink:   0;
  overflow:      hidden;     /* keeps border-radius clean with child button */
}

/* Bento box accordion header — blends into the tile background */
.ona-bento-btn {
  background: #111;
}
.ona-bento-btn:hover {
  background: rgba(0, 116, 128, 0.06);
}

/* Bento box accordion body — consistent inner padding */
.ona-bento-box .lb-accordion-body {
  padding: 12px 16px 14px;
  background: #111;
}

/* Section heading inside the insights pane */
.ona-pane-heading {
  color: var(--ona-orange);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid #2a2a2a;
}

/* Global metric stat cards */
.ona-metric-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 16px;
}

.ona-metric-card {
  background: #0d0d0f;
  border: 1px solid #252525;
  border-radius: 6px;
  padding: 10px 12px;
}

.ona-metric-card .ona-metric-value {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--ona-teal);
  line-height: 1.1;
}

.ona-metric-card .ona-metric-label {
  font-size: 0.7rem;
  color: #D1D1D1;
  margin-top: 2px;
}

/* Node detail panel — shown when a node is clicked */
.ona-node-panel {
  background: #0d0d0f;
  border: 1px solid #2a2a2a;
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 16px;
}

.ona-node-panel .ona-node-name {
  color: var(--ona-teal);
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 8px;
}

.ona-node-panel .ona-node-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  margin-bottom: 4px;
  color: #c3c3c3;
}

.ona-node-panel .ona-node-row span:first-child {
  color: #D1D1D1;
}

.ona-node-interpretation {
  margin-top: 8px;
  padding: 8px;
  background: rgba(209, 180, 156, 0.07);
  border-left: 3px solid var(--ona-orange);
  border-radius: 0 4px 4px 0;
  font-size: 0.75rem;
  color: #c3c3c3;
  line-height: 1.45;
}

/* ── Sidebar legend items (lawyers / management) ─────────────────────────── */
.ona-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: #c3c3c3;
  margin-bottom: 4px;
  padding: 4px 6px;
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
  transition: background 0.12s, color 0.12s;
  border: 1px solid transparent;
}
.ona-legend-item:hover {
  background: rgba(0, 116, 128, 0.08);
  color: var(--ona-teal);
  border-color: rgba(0, 116, 128, 0.18);
}
.ona-legend-item.legend-locked {
  background: rgba(0, 116, 128, 0.14);
  color: var(--ona-teal);
  border-color: rgba(0, 116, 128, 0.35);
}
.ona-legend-item.legend-locked .ona-legend-swatch {
  box-shadow: 0 0 0 2px rgba(0, 116, 128, 0.5);
}
/* Dimmed state when another category is hovered/locked */
.ona-legend-item.legend-dim {
  opacity: 0.35;
}

.ona-legend-swatch {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: box-shadow 0.12s;
}

.ona-legend-size-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
}

.ona-legend-circle {
  border-radius: 50%;
  background: #D1D1D1;
  flex-shrink: 0;
}

/* ── Floating legend overlay (conclave graphs) ──────────────────────────── */
.graph-legend-overlay {
  position: absolute;
  bottom: 12px;
  right: 12px;
  z-index: 10;
  background: rgba(13, 13, 15, 0.88);
  border: 1px solid #2a2a2c;
  border-radius: 6px;
  padding: 10px 12px;
  min-width: 145px;
  max-width: 210px;
  backdrop-filter: blur(4px);
  pointer-events: all;
}
.graph-legend-overlay-title {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ona-teal);
  margin-bottom: 8px;
  padding-bottom: 5px;
  border-bottom: 1px solid #2a2a2a;
}
/* Floating overlay uses same interactive item style */
.graph-legend-overlay .ona-legend-item {
  font-size: 0.72rem;
  margin-bottom: 2px;
}

/* Glossary terms */
.ona-glossary-term {
  margin-bottom: 12px;
}

.ona-glossary-term dt {
  color: #c3c3c3;
  font-weight: 600;
  font-size: 0.8rem;
  margin-bottom: 2px;
}

.ona-glossary-term dd {
  color: #D1D1D1;
  font-size: 0.75rem;
  line-height: 1.45;
  margin-left: 0;
}

/* ONA insight finding cards */
.ona-finding-card {
  background: #0d0d0f;
  border: 1px solid #252525;
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 8px;
}

.ona-finding-card .ona-finding-title {
  color: var(--ona-teal);
  font-size: 0.78rem;
  font-weight: 600;
  margin-bottom: 4px;
}

.ona-finding-card .ona-finding-body {
  color: #D1D1D1;
  font-size: 0.74rem;
  line-height: 1.45;
  margin: 0;
}

/* Placeholder text while no analysis has run */
.ona-placeholder {
  text-align: center;
  padding: 40px 0;
  color: #D1D1D1;
  font-size: 0.85rem;
}

/* Loading overlay for the canvas pane */
.ona-canvas-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #0d0d0f;
  border-radius: 6px;
  z-index: 10;
}

/* Mobile: stack canvas above insights, both full width */
@media (max-width: 991.98px) {
  .ona-main-split {
    grid-template-columns: 1fr;
    height: auto;
  }

  .ona-canvas-pane {
    grid-column: span 1;
    height: 60vh;
    min-height: 380px;
  }

  .ona-insights-pane {
    grid-column: span 1;
    height: auto;
    max-height: 60vh;
  }
}

/* ── Business Insights strip — between vital signs and split-pane ───────── */

.ona-insights-strip {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   12px;
  margin-bottom:         12px;
}
@media (min-width: 576px) {
  .ona-insights-strip { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
  .ona-insights-strip { grid-template-columns: repeat(3, 1fr); }
}

.ona-insight-card {
  align-self:    stretch;
  background:    #0d0d0f;
  border:        1px solid #252525;
  border-left:   3px solid var(--ona-teal);
  border-radius: 6px;
  padding:       10px 12px;
}

.ona-insight-heading {
  font-size:      0.63rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color:          var(--ona-teal);
  margin-bottom:  6px;
}

.ona-insight-body {
  font-size:   0.72rem;
  color:       #D1D1D1;
  line-height: 1.5;
}

.ona-insight-body strong {
  color:       #c8c8c8;
  font-weight: 600;
}

/* ── Community Composition section ──────────────────────────────────────── */

/* #community-composition-section {
  margin-top: 18px;
}

/* ── Cross-Attribute Heatmap section ─────────────────────────────────────── */

/* #heatmap-section {
  margin-top: 18px;
} */ */

.heatmap-all-grid {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   28px;
}

@media (max-width: 767px) {
  .heatmap-all-grid { grid-template-columns: 1fr; }
}

.heatmap-sub-heading {
  font-size:      0.62rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color:          var(--ona-teal);
  margin-bottom:  10px;
}

.heatmap-grid-item {
  overflow-x: auto;   /* individual matrix scrolls if labels are very long */
}

.heatmap-table {
  border-collapse: separate;
  border-spacing:  3px;
  font-size:       0.62rem;
}

.heatmap-table th {
  color:          #666;
  font-weight:    600;
  text-transform: capitalize;
  padding:        0 4px 6px;
  white-space:    nowrap;
  text-align:     center;
}

.heatmap-table th.heatmap-row-header {
  text-align:  right;
  padding-right: 8px;
  padding-bottom: 0;
  vertical-align: middle;
}

.heatmap-cell {
  width:         44px;
  height:        44px;
  min-width:     44px;
  border-radius: 4px;
  text-align:    center;
  vertical-align: middle;
  font-size:     0.65rem;
  font-weight:   600;
  cursor:        default;
  transition:    outline 0.1s ease;
}

.heatmap-cell:hover {
  outline: 2px solid rgba(0, 116, 128, 0.7);
  outline-offset: 1px;
  z-index: 1;
  position: relative;
}

.heatmap-empty-msg {
  font-size: 0.72rem;
  color:     #D1D1D1;
  padding:   12px 0;
}


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

.community-comp-tile {
  background:    #111;
  border:        1px solid rgba(0, 116, 128, 0.18);
  border-left:   3px solid var(--ona-teal);
  border-radius: 8px;
  padding:       12px 14px;
}

.community-comp-title {
  font-size:      0.62rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color:          var(--ona-teal);
  margin-bottom:  10px;
}

.community-comp-attr {
  margin-bottom: 9px;
}

.community-comp-attr-label {
  font-size:     0.60rem;
  color:         #666;
  margin-bottom: 3px;
  text-transform: capitalize;
}

.community-comp-bar-track {
  display:       flex;
  height:        8px;
  border-radius: 4px;
  overflow:      hidden;
  background:    #1e1e1e;
  margin-bottom: 4px;
}

.community-comp-bar-seg {
  height:     100%;
  transition: width 0.3s ease;
  cursor:     default;
}

.community-comp-legend {
  display:   flex;
  flex-wrap: wrap;
  gap:       4px 10px;
}

.community-comp-legend-item {
  display:     flex;
  align-items: center;
  gap:         4px;
  font-size:   0.58rem;
  color:       #777;
}

.community-comp-legend-dot {
  width:         7px;
  height:        7px;
  border-radius: 50%;
  flex-shrink:   0;
}

/* ── Vital signs strip — top of dashboard-main, above the split-pane ─────── */

.ona-vital-card {
  background: #111;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  padding: 12px 14px;
}

.ona-vital-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #D1D1D1;
  margin-bottom: 4px;
}

.ona-vital-value {
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--ona-orange);
  line-height: 1.1;
}

.ona-vital-hint {
  font-size: 0.63rem;
  color: #D1D1D1;
  margin-top: 3px;
}

/* ── Vital card info trigger button ─────────────────────────────────────────── */
.ona-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0 0 0 5px;
  color: #888;
  font-size: 0.72rem;
  line-height: 1;
  cursor: pointer;
  vertical-align: middle;
  transition: color 0.2s ease;
}
.ona-info-btn:hover,
.ona-info-btn:focus {
  color: var(--ona-teal);
  outline: none;
}

/* ── ONA metric modals — dark theme matching dashboard ──────────────────────── */
.ona-modal .modal-content {
  background: #141416;
  border: 1px solid rgba(209, 180, 156, 0.28);
  border-radius: 16px;
  color: #ccc;
}
.ona-modal .modal-header {
  background: #0e0e10;
  border-bottom: 1px solid rgba(209, 180, 156, 0.18);
  border-left: 3px solid var(--ona-orange);
  border-radius: 15px 15px 0 0;
  padding: 14px 20px;
}
.ona-modal .modal-title {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ona-orange);
}
.ona-modal .modal-body {
  padding: 20px;
}
.ona-modal .close {
  color: #D1D1D1;
  opacity: 1;
  font-size: 1.2rem;
}
.ona-modal .close:hover { color: #fff; }

/* ── Vital card diagnostic pill ─────────────────────────────────────────────── */
.ona-vital-diagnosis {
  display: inline-block;
  margin-top: 7px;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 0.60rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  line-height: 1.6;
  opacity: 0;                     /* hidden until JS populates it */
  transition: opacity 0.3s ease;
}
.ona-vital-diagnosis.diag-visible { opacity: 1; }
.ona-vital-diagnosis.diag-optimal {
  background: rgba(0, 116, 128, 0.18);
  color: var(--ona-teal);
  border: 1px solid rgba(0, 116, 128, 0.30);
}
.ona-vital-diagnosis.diag-warning {
  background: rgba(209, 180, 156, 0.15);
  color: var(--ona-orange);
  border: 1px solid rgba(209, 180, 156, 0.30);
}

@media (max-width: 991.98px) {
  .ona-vital-strip {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Person Profile — role badge and data rows ──────────────────────────────── */

.ona-role-badge {
  display: inline-block;
  background: rgba(209, 180, 156, 0.10);
  color: var(--ona-orange);
  border: 1px solid rgba(209, 180, 156, 0.25);
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 0.73rem;
  font-weight: 600;
  margin-bottom: 10px;
}

.ona-panel-divider {
  border: none;
  border-top: 1px solid #2a2a2a;
  margin: 8px 0;
}

/* ── Metric Leaderboards ───────────────────────────────────────────────────── */
#leaderboard-section { margin-top: 16px; }

.lb-accordion {
  border: 1px solid #2a2a2c;
  border-radius: 6px;
  margin-bottom: 8px;
  overflow: hidden;
}

.lb-accordion-btn {
  width: 100%;
  background: #151517;
  border: none;
  padding: 11px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  text-align: left;
  color: #e0e0e0;
  transition: background 0.15s;
}
.lb-accordion-btn:hover { background: #1e1e20; }

.lb-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ona-teal);
  flex: 1;
}
.lb-subtitle {
  font-size: 0.68rem;
  color: #D1D1D1;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.lb-chevron { font-size: 0.6rem; color: #D1D1D1; margin-left: 6px; }

.lb-accordion-body {
  display: none;
  padding: 12px 16px 16px;
  background: #0f0f11;
}
.lb-accordion-body.lb-open { display: block; }

.lb-description {
  font-size: 0.74rem;
  color: #ACACAC;
  line-height: 1.6;
  margin-bottom: 12px;
}

.lb-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
}
.lb-table th {
  text-align: left;
  color: #888;
  font-weight: 600;
  font-size: 0.63rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 8px;
  border-bottom: 1px solid #222;
}
.lb-table td {
  padding: 6px 8px;
  border-bottom: 1px solid #18181a;
  color: #bbb;
}
.lb-rank  { color: #3a3a3c; width: 28px; font-size: 0.68rem; }
.lb-name  { font-weight: 500; }
.lb-score { color: #666; font-variant-numeric: tabular-nums; text-align: right; }

.lb-row { cursor: pointer; transition: background 0.1s; }
.lb-row:hover td { background: #1c1c1e; color: var(--ona-teal); }
.lb-row-active td { background: #1e1608; color: var(--ona-teal); }

.lb-unavailable {
  color: #3a3a3c;
  font-style: italic;
  text-align: center;
  padding: 14px;
  font-size: 0.74rem;
}

.lb-show-more {
  display: block;
  width: 100%;
  margin-top: 8px;
  background: none;
  border: 1px solid #242426;
  border-radius: 4px;
  color: #D1D1D1;
  font-size: 0.72rem;
  padding: 5px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.lb-show-more:hover { border-color: var(--ona-orange); color: var(--ona-orange); }

/* ── Network Influence Leader hero card ─────────────────────────────────────── */
.influence-leader-section { margin-bottom: 16px; }

.influence-leader-header {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 8px;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #c03535;
}

.influence-leader-card {
  background: linear-gradient(135deg, #130d0d 0%, #0f0f11 100%);
  border: 1px solid rgba(192, 53, 53, 0.60);
  border-radius: 6px;
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.influence-leader-card:hover {
  border-color: #c03535;
  box-shadow: 0 0 10px rgba(192, 53, 53, 0.22);
}

.influence-leader-name {
  font-size: 0.98rem;
  font-weight: 600;
  color: #c03535;
  margin-bottom: 2px;
}

.influence-leader-meta {
  font-size: 0.71rem;
  color: #D1D1D1;
  margin-bottom: 12px;
}

.influence-leader-composite {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--ona-orange);
  border: 1px solid rgba(209, 180, 156, 0.30);
  border-radius: 3px;
  padding: 1px 6px;
  margin-left: 6px;
  font-variant-numeric: tabular-nums;
}

.influence-scorecard {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.influence-scorecard-item {
  background: #1c1c1e;
  border-radius: 4px;
  padding: 7px 8px;
  text-align: center;
}

.influence-scorecard-label {
  font-size: 0.6rem;
  color: #D1D1D1;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 3px;
}

.influence-scorecard-value {
  font-size: 0.84rem;
  font-weight: 600;
  color: #bbb;
  font-variant-numeric: tabular-nums;
}

.influence-scorecard-bar {
  height: 3px;
  background: #2a2a2c;
  border-radius: 2px;
  margin-top: 4px;
  overflow: hidden;
}

.influence-scorecard-bar-fill {
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(89, 6, 6, 0.4), #c03535);
}

/* ── Purple styling for rank-1 row ───────────────────────────────────────────── */
.lb-row-top td { color: #c03535; }
.lb-row-top:hover td { color: #c03535; }
.lb-row-top .lb-rank { color: #c03535; font-weight: 700; }

/* ── Details badge in leaderboard rows ──────────────────────────────────────── */
.lb-details-badge {
  display: inline-block;
  font-size: 0.61rem;
  color: #ACACAC;
  background: #18181a;
  border: 1px solid #242426;
  border-radius: 3px;
  padding: 1px 5px;
  max-width: 88px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
  transition: color 0.1s, border-color 0.1s;
}
.lb-row:hover .lb-details-badge,
.lb-row-active .lb-details-badge {
  color: #D1D1D1;
  border-color: #3a3a3c;
}
.lb-row-top .lb-details-badge {
  color: #c03535;
  border-color: rgba(192, 53, 53, 0.35);
}

/* ── Composite table scroll wrapper ─────────────────────────────────────────── */
.lb-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 0;
}
.lb-table-scroll .lb-table {
  min-width: 520px;   /* Ensures all columns are accessible via scroll on narrow viewports */
}

/* ── Metadata cell (composite extra columns) ─────────────────────────────────── */
.lb-meta {
  color: #666;
  font-size: 0.72rem;
  white-space: nowrap;
}
.lb-row:hover .lb-meta,
.lb-row-active .lb-meta { color: #999; }
.lb-row-top .lb-meta    { color: #c03535; }

/* ── Hide on small viewports ─────────────────────────────────────────────────── */
@media (max-width: 540px) {
  .lb-col-hide-sm { display: none; }
}

/* ── Composite table educational intro ───────────────────────────────────────── */
.lb-composite-intro {
  font-size: 0.73rem;
  color: #ACACAC;
  line-height: 1.65;
  margin-bottom: 12px;
  border-left: 2px solid rgba(209, 180, 156, 0.30);
  padding-left: 10px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Brand Palette Integration & Bento Grid System
   Custom properties from style.css :root:
     --ona-teal:   #007480  (primary — leadership, core nodes, success)
     --ona-orange: #D1B49C  (secondary — operations, bridge nodes)
     --ona-purple: #590606  (alert — risk, isolates, selected highlights)
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --bento-tile-bg:        #ffffff;
  --bento-border:         rgba(0, 116, 128, 0.15);
  --bento-border-hover:   rgba(0, 116, 128, 0.40);
  --bento-radius:         24px;
  --bento-shadow:         0 2px 12px rgba(0, 116, 128, 0.07);
  --bento-shadow-hover:   0 8px 28px rgba(0, 116, 128, 0.18), 0 2px 8px rgba(89, 6, 6, 0.08);
  --bento-text-primary:   #1a1a2e;
  --bento-text-secondary: #5a5a72;
  --bento-text-muted:     #9999aa;
  --bento-section-bg:     #f0f2f5;
}

/* ── Bento tile utility class ────────────────────────────────────────────── */
.bento-tile {
  background:    var(--bento-tile-bg);
  border-radius: var(--bento-radius);
  border:        1px solid var(--bento-border);
  box-shadow:    var(--bento-shadow);
  transition:    box-shadow 0.2s ease, border-color 0.2s ease;
}
.bento-tile:hover {
  border-color: var(--bento-border-hover);
  box-shadow:   var(--bento-shadow-hover);
}

/* Left-border accent variants */
.bento-tile-teal   { border-left: 4px solid var(--ona-teal); }
.bento-tile-orange { border-left: 4px solid var(--ona-orange); }
.bento-tile-purple { border-left: 4px solid var(--ona-purple); }

/* ── ONA Dashboard: light section background ─────────────────────────────── */
.ona-dashboard {
  background: var(--bento-section-bg) !important;
}

/* ── Sidebar bento tile ──────────────────────────────────────────────────── */
.ona-dashboard .sidebar-card {
  background:    var(--bento-tile-bg);
  border:        1px solid var(--bento-border);
  border-radius: var(--bento-radius);
  box-shadow:    var(--bento-shadow);
}
.ona-dashboard .sidebar-section-label { color: var(--bento-text-muted); }
.ona-dashboard .sidebar-label         { color: var(--bento-text-primary); }
.ona-dashboard .sidebar-divider       { border-color: var(--bento-border); }

.ona-dashboard #sidebar-toggle {
  border-color: var(--bento-border);
  color: var(--bento-text-secondary);
}
.ona-dashboard #sidebar-toggle:hover {
  border-color: var(--ona-teal);
  color: var(--ona-teal);
}

.ona-dashboard .form-control {
  background:   #f8f9fa;
  color:        var(--bento-text-primary);
  border-color: rgba(0, 116, 128, 0.2);
}

.ona-dashboard .run-analysis-btn {
  background:   var(--ona-teal);
  border-color: var(--ona-teal);
  color:        #ffffff;
}
.ona-dashboard .run-analysis-btn:hover {
  background:   #005f69;
  border-color: #005f69;
}

/* ── Vital signs strip bento tiles ──────────────────────────────────────── */
.ona-dashboard .ona-vital-card {
  background:    var(--bento-tile-bg);
  border:        1px solid var(--bento-border);
  border-radius: var(--bento-radius);
  box-shadow:    var(--bento-shadow);
  transition:    box-shadow 0.2s, border-color 0.2s;
}
.ona-dashboard .ona-vital-card:hover {
  border-color: var(--bento-border-hover);
  box-shadow:   var(--bento-shadow-hover);
}
.ona-dashboard .ona-vital-label { color: var(--bento-text-muted); }
.ona-dashboard .ona-vital-hint  { color: var(--bento-text-muted); }

/* Connectivity — teal (stability) */
.ona-dashboard #vital-signs .ona-vital-card:nth-child(1) .ona-vital-value { color: var(--ona-teal); }
/* Information Speed — teal (as specified in brief) */
.ona-dashboard #vital-signs .ona-vital-card:nth-child(2) .ona-vital-value { color: var(--ona-teal); }
/* Silo Index — orange (operational / fluidity signal) */
.ona-dashboard #vital-signs .ona-vital-card:nth-child(3) .ona-vital-value { color: var(--ona-orange); filter: saturate(1.4); }
/* Communities — orange */
.ona-dashboard #vital-signs .ona-vital-card:nth-child(4) .ona-vital-value { color: var(--ona-orange); filter: saturate(1.4); }

/* ── Insights pane bento tiles (light theme override) ───────────────────── */
.ona-dashboard .ona-insights-pane {
  scrollbar-color: rgba(0, 116, 128, 0.2) transparent;
}
.ona-dashboard .ona-bento-box {
  background:    var(--bento-tile-bg);
  border:        1px solid var(--bento-border);
  border-radius: var(--bento-radius);
  box-shadow:    var(--bento-shadow);
}
.ona-dashboard .ona-bento-btn,
.ona-dashboard .ona-bento-box .lb-accordion-body {
  background: var(--bento-tile-bg);
}
.ona-dashboard .ona-bento-btn:hover {
  background: rgba(0, 116, 128, 0.04);
}
.ona-dashboard .ona-pane-heading {
  color:        var(--ona-teal);
  border-color: rgba(0, 116, 128, 0.18);
}
.ona-dashboard .ona-placeholder  { color: var(--bento-text-muted); }

.ona-dashboard .ona-node-panel {
  background:   #f8f9fa;
  border-color: var(--bento-border);
}
.ona-dashboard .ona-node-panel .ona-node-name             { color: var(--ona-teal); }
.ona-dashboard .ona-node-panel .ona-node-row              { color: var(--bento-text-primary); }
.ona-dashboard .ona-node-panel .ona-node-row span:first-child { color: var(--bento-text-secondary); }

.ona-dashboard .ona-node-interpretation {
  background:   rgba(0, 116, 128, 0.06);
  border-color: var(--ona-teal);
  color:        var(--bento-text-primary);
}
.ona-dashboard .ona-role-badge {
  background:   rgba(0, 116, 128, 0.10);
  color:        var(--ona-teal);
  border-color: rgba(0, 116, 128, 0.25);
}
.ona-dashboard .ona-panel-divider { border-color: var(--bento-border); }

.ona-dashboard .ona-glossary-term dt { color: var(--bento-text-primary); }
.ona-dashboard .ona-glossary-term dd { color: var(--bento-text-secondary); }

.ona-dashboard .ona-finding-card {
  background:   #f8f9fa;
  border-color: var(--bento-border);
}
.ona-dashboard .ona-finding-card .ona-finding-title { color: var(--ona-teal); }
.ona-dashboard .ona-finding-card .ona-finding-body  { color: var(--bento-text-secondary); }

/* ── Legend items in ONA sidebar ─────────────────────────────────────────── */
.ona-dashboard .ona-legend-item { color: var(--bento-text-primary); }
.ona-dashboard .ona-legend-item:hover {
  background:   rgba(0, 116, 128, 0.08);
  color:        var(--ona-teal);
  border-color: rgba(0, 116, 128, 0.20);
}
.ona-dashboard .ona-legend-item.legend-locked {
  background:   rgba(0, 116, 128, 0.12);
  color:        var(--ona-teal);
  border-color: rgba(0, 116, 128, 0.35);
}
.ona-dashboard .ona-legend-item.legend-locked .ona-legend-swatch {
  box-shadow: 0 0 0 2px rgba(0, 116, 128, 0.45);
}

/* ── Leaderboard accordions bento tiles ─────────────────────────────────── */
.ona-dashboard .lb-accordion {
  background:    var(--bento-tile-bg);
  border:        1px solid var(--bento-border);
  border-radius: var(--bento-radius);
  box-shadow:    var(--bento-shadow);
  transition:    box-shadow 0.2s, border-color 0.2s;
}
.ona-dashboard .lb-accordion:hover {
  border-color: var(--bento-border-hover);
  box-shadow:   var(--bento-shadow-hover);
}
.ona-dashboard .lb-accordion-btn {
  background: var(--bento-tile-bg);
  color:      var(--bento-text-primary);
}
.ona-dashboard .lb-accordion-btn:hover { background: rgba(0, 116, 128, 0.04); }

.ona-dashboard .lb-title    { color: var(--ona-teal); }
.ona-dashboard .lb-subtitle { color: var(--bento-text-muted); }
.ona-dashboard .lb-chevron  { color: var(--bento-text-muted); }

.ona-dashboard .lb-accordion-body { background: var(--bento-tile-bg); }
.ona-dashboard .lb-description    { color: var(--bento-text-secondary); }

.ona-dashboard .lb-table th {
  color:        var(--ona-teal);
  border-color: rgba(0, 116, 128, 0.15);
}
.ona-dashboard .lb-table td {
  color:        var(--bento-text-primary);
  border-color: rgba(0, 116, 128, 0.07);
}
.ona-dashboard .lb-rank  { color: var(--bento-text-muted); }
.ona-dashboard .lb-score { color: var(--bento-text-secondary); }
.ona-dashboard .lb-meta  { color: var(--bento-text-secondary); }

.ona-dashboard .lb-row:hover td {
  background: rgba(0, 116, 128, 0.05);
  color:      var(--ona-teal);
}
.ona-dashboard .lb-row-active td {
  background: rgba(0, 116, 128, 0.08);
  color:      var(--ona-teal);
}
.ona-dashboard .lb-row:hover .lb-meta,
.ona-dashboard .lb-row-active .lb-meta { color: var(--ona-teal); }

.ona-dashboard .lb-unavailable { color: var(--bento-text-muted); }

.ona-dashboard .lb-show-more {
  border-color: var(--bento-border);
  color:        var(--bento-text-muted);
}
.ona-dashboard .lb-show-more:hover {
  border-color: var(--ona-teal);
  color:        var(--ona-teal);
}

.ona-dashboard .lb-composite-intro {
  color:        var(--bento-text-secondary);
  border-color: rgba(0, 116, 128, 0.25);
}

.ona-dashboard .lb-details-badge {
  background:   #f0f2f5;
  border-color: rgba(0, 116, 128, 0.15);
  color:        var(--bento-text-secondary);
}
.ona-dashboard .lb-row:hover .lb-details-badge,
.ona-dashboard .lb-row-active .lb-details-badge {
  color:        var(--ona-teal);
  border-color: rgba(0, 116, 128, 0.30);
}
/* Key person risk — purple accent on high-impact rows */
.ona-dashboard .lb-row-top td         { color: var(--ona-teal); }
.ona-dashboard .lb-row-top:hover td   { color: #a07800; }
.ona-dashboard .lb-row-top .lb-rank   { color: var(--ona-teal); font-weight: 700; }
.ona-dashboard .lb-row-top .lb-details-badge {
  color:        var(--ona-teal);
  border-color: rgba(201, 162, 39, 0.3);
}
.ona-dashboard .lb-row-top .lb-meta   { color: var(--ona-teal); }

/* ── Influence Leader hero bento tile ───────────────────────────────────── */
.ona-dashboard .influence-leader-section { margin-bottom: 16px; }
.ona-dashboard .influence-leader-card {
  background:  linear-gradient(135deg, #fffdf5 0%, #fefefe 100%);
  border-color: var(--ona-teal);
  box-shadow:   0 2px 12px rgba(201, 162, 39, 0.10);
  border-radius: var(--bento-radius);
}
.ona-dashboard .influence-leader-card:hover {
  box-shadow: 0 8px 28px rgba(201, 162, 39, 0.20);
}
.ona-dashboard .influence-leader-name { color: #8b6800; }
.ona-dashboard .influence-leader-meta { color: var(--bento-text-secondary); }
.ona-dashboard .influence-scorecard-item { background: #f4f5f7; }
.ona-dashboard .influence-scorecard-label { color: var(--bento-text-muted); }
.ona-dashboard .influence-scorecard-value { color: var(--bento-text-primary); }
.ona-dashboard .influence-scorecard-bar  { background: rgba(0,116,128,0.1); }

/* ── Loading states ──────────────────────────────────────────────────────── */
.ona-dashboard .dashboard-spinner      { color: var(--ona-teal); }
.ona-dashboard .dashboard-loading-text { color: var(--bento-text-secondary); }

/* ── Conclave dash-card bento border + brand accents ────────────────────── */
/* Applied to all three dashboards — dark-theme variant keeps dark bg */
.dash-card {
  border-color:  var(--bento-border);
  border-radius: 16px;
}
.dash-card-header { background: rgba(0, 116, 128, 0.04); }
.dash-accordion-btn:hover,
.dash-accordion-btn[aria-expanded="true"] { color: var(--ona-teal); }

.metric-collapse-btn         { color: var(--ona-teal); }
.metric-collapse-btn:hover   { background: rgba(0, 116, 128, 0.06); }
.metric-table thead th {
  color:              var(--ona-teal);
  border-bottom-color: rgba(0, 116, 128, 0.20);
}
.metric-table tbody tr:hover { background-color: rgba(0, 116, 128, 0.06); }

/* ── Colour Key bento tile ───────────────────────────────────────────────────── */
.bento-colour-key-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.bento-colour-key-tile {
  padding: 16px;
  border-radius: 12px;
  border: 1px solid transparent;
}
.bento-colour-key-swatch {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin-bottom: 10px;
}
.bento-colour-key-label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}
.bento-colour-key-desc {
  font-size: 0.72rem;
  color: #D1D1D1;
  line-height: 1.5;
}
.bento-colour-key-teal {
  background:   rgba(0, 116, 128, 0.08);
  border-color: rgba(0, 116, 128, 0.25);
}
.bento-colour-key-teal .bento-colour-key-swatch { background: var(--ona-teal); }
.bento-colour-key-teal .bento-colour-key-label  { color: var(--ona-teal); }
.bento-colour-key-orange {
  background:   rgba(209, 180, 156, 0.08);
  border-color: rgba(209, 180, 156, 0.25);
}
.bento-colour-key-orange .bento-colour-key-swatch { background: var(--ona-orange); }
.bento-colour-key-orange .bento-colour-key-label  { color: var(--ona-orange); }
.bento-colour-key-purple {
  background:   rgba(89, 6, 6, 0.10);
  border-color: rgba(89, 6, 6, 0.25);
}
.bento-colour-key-purple .bento-colour-key-swatch { background: var(--ona-purple); }
.bento-colour-key-purple .bento-colour-key-label  { color: #c0393a; }
@media (max-width: 767px) {
  .bento-colour-key-grid { grid-template-columns: 1fr; }
}

/* ── Succession Planning Risks ───────────────────────────────────────────────── */

/* Responsive grid: 2–3 columns in the main analysis column, 1 column at narrow widths */
#succession-list {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap:                   2px 12px;
}

.succ-target-block {
  padding:       10px 10px 8px;
  border:        1px solid rgba(255,255,255,0.05);
  border-radius: 4px;
}

.succ-target-header {
  display:     flex;
  align-items: baseline;
  gap:         6px;
  margin-bottom: 6px;
}

.succ-rank {
  font-size:   0.68rem;
  font-weight: 700;
  color:       rgba(255,255,255,0.3);
  min-width:   14px;
  flex-shrink: 0;
}

.succ-target-name {
  font-size:   0.82rem;
  font-weight: 700;
  color:       var(--ona-teal);
  flex:        1;
  overflow:    hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.succ-pagerank {
  font-size:  0.66rem;
  color:      rgba(255,255,255,0.35);
  flex-shrink: 0;
}

.succ-successors {
  padding-left: 20px;
  display:      flex;
  flex-direction: column;
  gap:          4px;
}

.succ-item {
  display:     flex;
  align-items: baseline;
  justify-content: space-between;
  gap:         6px;
}

/* ── Utility classes replacing inline styles ─────────────────────────────────
   These classes exist solely to replace style="..." attributes in EJS templates.
   Do not use inline styles — add a class here instead.
   ─────────────────────────────────────────────────────────────────────────── */

/* Sidebar filter-group label at extra-small size */
.sidebar-label-xs     { font-size: 0.65rem; }

/* "Clear Filters" button teal outline */
.sidebar-filter-btn   { border-color: rgba(0, 116, 128, 0.4) !important; color: #007480 !important; font-size: 0.75rem; }

/* Canvas pane: graph-wrapper that must fill its parent's height */
.graph-wrapper-full   { height: 100%; }

/* Canvas placeholder dark background tile */
#canvas-placeholder   { background: #0d0d0f; border-radius: 6px; }

/* HITS (Knowledge Navigators / Subject Experts) two-column flex layout */
.hits-table-wrapper   { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
.hits-table-col       { flex: 1; min-width: 260px; }
.hits-col-label       { font-size: 0.78rem; margin-bottom: 6px !important; }

/* Teal accent text using the design-token colour */
.text-ona-teal        { color: var(--ona-teal); }

/* Muted grey note text */
.text-dim             { color: #555; }

/* Legend size indicator circles */
.ona-legend-circle--lg { width: 20px; height: 20px; }
.ona-legend-circle--md { width: 14px; height: 14px; }
.ona-legend-circle--sm { width:  8px; height:  8px; }

.succ-name {
  font-size:  0.77rem;
  font-weight: 500;
  color:      var(--ona-orange);
  flex:       1;
  overflow:   hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.succ-shared {
  font-size:  0.66rem;
  color:      rgba(255,255,255,0.35);
  flex-shrink: 0;
  white-space: nowrap;
}

.succ-empty {
  font-size: 0.72rem;
  color:     rgba(255,255,255,0.3);
  font-style: italic;
}

/* ── Score value colours — shared by node-detail panel and leaderboard tables ── */

.ona-score-composite { color: var(--ona-teal); font-weight: 600; }
.ona-score-hits      { color: var(--ona-orange); }