/* Dashboard tokens mapped onto the evvmesh.org palette (style.css :root). */
.nl {
  --color-bg: var(--bg); --color-panel: var(--card); --color-fg: var(--text); --color-fg-muted: var(--muted);
  --color-border-line: var(--line); --color-ok: var(--ok); --color-warn: var(--warn); --color-bad: var(--bad);
  --cds-chart-muted: #66778a; --cds-chart-grid: #26303a; --cds-chart-axis: #4a5866; --cds-chart-status-critical: var(--bad);
  --cds-surface-popover: #222b35; --cds-border: var(--line); --cds-shadow-popover: 0 6px 18px rgba(0,0,0,.4);
  --cds-text-secondary: var(--muted); --cds-radius: 10px; --cds-dur-slow: .3s;
  --cds-gap-xs: 4px; --cds-gap-sm: 8px; --cds-gap-md: 14px; --cds-gap-lg: 20px; --cds-gap-xl: 32px;
  --cds-pad-xs: 4px; --cds-pad-sm: 8px; --cds-pad-md: 12px; --cds-pad-lg: 16px;
  --cds-font-size-title: 1.9rem; --cds-font-size-heading: 1.35rem; --cds-font-size-body: 1rem; --cds-font-size-caption: .85rem;
  --cds-font-weight-medium: 600; --font-anthropic-sans: inherit; --font-anthropic-serif: inherit;
  margin-block: 1.2rem 2rem;
}
.nl .dash-skeleton { opacity: .4; }
.nl-banner { border: 1px solid var(--warn); background: rgba(224, 176, 74, .08); border-radius: 10px; padding: 10px 14px; max-width: none !important; }
.nl-banner.nl-archived { border-color: var(--brand); background: transparent; }
.nl a { color: var(--brand); }

  .nl { display: grid; gap: var(--cds-gap-xl); font-family: var(--font-anthropic-sans); max-width: 82rem; margin-inline: auto; }
  .nl h1 { font-family: var(--font-anthropic-serif); font-weight: 400; font-size: var(--cds-font-size-title); margin: 0; text-wrap: balance; }
  .nl h2 { font-size: var(--cds-font-size-heading); font-weight: var(--cds-font-weight-medium); margin: 0; text-wrap: balance; }
  .nl h3 { font-size: var(--cds-font-size-body); font-weight: var(--cds-font-weight-medium); margin: 0; }
  .nl p { margin: 0; max-width: 68ch; line-height: 1.5; }
  .nl .muted { color: var(--color-fg-muted); }
  .nl .cap { font-size: var(--cds-font-size-caption); }
  .nl-head { display: grid; gap: var(--cds-gap-sm); }
  .nl-section { display: grid; gap: var(--cds-gap-md); }
  .nl-section > header { display: grid; gap: var(--cds-gap-xs); }
  .nl-grid { display: grid; gap: var(--cds-gap-md); grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }
  .nl-card { background: var(--color-panel); border: 1px solid var(--color-border-line); border-radius: var(--cds-radius); padding: var(--cds-pad-lg); display: grid; gap: var(--cds-gap-sm); align-content: start; min-width: 0; position: relative; }
  .nl-tiles { display: grid; gap: var(--cds-gap-md); grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
  .nl-tile { background: var(--color-panel); border: 1px solid var(--color-border-line); border-radius: var(--cds-radius); padding: var(--cds-pad-md) var(--cds-pad-lg); display: grid; gap: var(--cds-gap-xs); }
  .nl-tile .big { font-family: var(--font-anthropic-serif); font-weight: 400; font-size: var(--cds-font-size-title); font-variant-numeric: tabular-nums; line-height: 1.1; }
  .nl-tile .big small { font-family: var(--font-anthropic-sans); font-size: var(--cds-font-size-body); color: var(--color-fg-muted); }
  .nl-findings { display: grid; gap: 0; list-style: none; margin: 0; padding: 0; }
  .nl-findings li { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--cds-gap-md); padding-block: var(--cds-pad-md); border-top: 1px solid var(--color-border-line); }
  .nl-findings li:first-child { border-top: 0; padding-top: 0; }
  .nl-findings .f-title { font-weight: var(--cds-font-weight-medium); }
  .nl-findings .f-subject { font-size: var(--cds-font-size-caption); color: var(--color-fg-muted); }
  @media (max-width: 34rem) { .nl-findings li { grid-template-columns: 1fr; gap: var(--cds-gap-xs); } }
  .pill { display: inline-flex; align-items: center; gap: .4em; font-size: var(--cds-font-size-caption); white-space: nowrap; align-self: start; }
  .pill::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; flex: none; }
  .s-ok { color: var(--color-ok); } .s-warn { color: var(--color-warn); } .s-bad { color: var(--color-bad); } .s-muted { color: var(--color-fg-muted); }
  .nl-scroll { overflow: auto; max-height: 34rem; }
  .nl table { border-collapse: collapse; width: 100%; font-size: var(--cds-font-size-caption); font-variant-numeric: tabular-nums; }
  .nl th, .nl td { text-align: left; padding: var(--cds-pad-xs) var(--cds-pad-sm); border-bottom: 1px solid var(--color-border-line); vertical-align: top; }
  .nl th { position: sticky; top: 0; background: var(--color-panel); font-weight: var(--cds-font-weight-medium); color: var(--color-fg-muted); z-index: 1; }
  .nl th.num, .nl td.num { text-align: right; }
  .nl th button { all: unset; cursor: pointer; }
  .nl th button:focus-visible { outline: 2px solid var(--cds-chart-axis); outline-offset: 2px; }
  .nl td.name { min-width: 9rem; }
  .barcell { display: grid; grid-template-columns: 3.2rem 1fr; align-items: center; gap: var(--cds-gap-sm); min-width: 8rem; }
  .barcell .track { height: .5rem; border-radius: .25rem; background: var(--cds-chart-grid); overflow: hidden; }
  .barcell .fill { height: 100%; border-radius: .25rem; }
  .nl-search { font: inherit; font-size: var(--cds-font-size-caption); padding: var(--cds-pad-xs) var(--cds-pad-sm); border: 1px solid var(--color-border-line); border-radius: var(--cds-radius); background: var(--color-bg); color: var(--color-fg); width: min(100%, 18rem); }
  .nl-toolbar { display: flex; flex-wrap: wrap; gap: var(--cds-gap-sm); align-items: center; justify-content: space-between; }
  .chart { min-height: 15rem; position: relative; }
  .chart.tall { min-height: 22rem; }
  .chart svg { display: block; overflow: visible; }
  .chart text { fill: var(--color-fg-muted); font-size: 11px; font-family: var(--font-anthropic-sans); }
  .chart .lbl { fill: var(--color-fg); }
  .legend { display: flex; flex-wrap: wrap; gap: var(--cds-gap-md); font-size: var(--cds-font-size-caption); color: var(--color-fg-muted); }
  .legend span { display: inline-flex; align-items: center; gap: .4em; }
  .legend i { width: .7rem; height: .7rem; border-radius: 2px; display: inline-block; }
  .tip { position: absolute; pointer-events: none; background: var(--cds-surface-popover); border: 1px solid var(--cds-border); border-radius: var(--cds-radius); box-shadow: var(--cds-shadow-popover); padding: var(--cds-pad-xs) var(--cds-pad-sm); font-size: var(--cds-font-size-caption); max-width: 16rem; z-index: 5; }
  .tip .t-head { color: var(--cds-text-secondary); }
  .failed { display: flex; align-items: center; justify-content: center; gap: .5em; min-height: inherit; color: var(--color-fg-muted); font-size: var(--cds-font-size-caption); }
  .failed::before { content: ""; width: .375rem; height: .375rem; border-radius: 50%; background: var(--color-bad); }
  [data-dash-source-state=empty] { color: transparent; }
  [data-dash-source-state=refreshing] { opacity: .5; transition: opacity var(--cds-dur-slow); }
  .chart.map { min-height: 26rem; touch-action: none; border: 1px solid var(--color-border-line); border-radius: var(--cds-radius); background: var(--color-bg); overflow: hidden; }
  .chart.map svg { overflow: hidden; cursor: grab; }
  .chart.map svg:active { cursor: grabbing; }
  .chart.map .node { cursor: pointer; }
  .map-ctrl { display: flex; gap: var(--cds-gap-xs); }
  .map-ctrl button, .map-legend button { font: inherit; font-size: var(--cds-font-size-caption); color: var(--color-fg); background: var(--color-panel); border: 1px solid var(--color-border-line); border-radius: var(--cds-radius); padding: var(--cds-pad-xs) var(--cds-pad-sm); cursor: pointer; min-width: 2rem; }
  .map-ctrl button:focus-visible, .map-legend button:focus-visible { outline: 2px solid var(--cds-chart-axis); outline-offset: 2px; }
  .map-legend button { display: inline-flex; align-items: center; gap: .4em; }
  .map-legend button[aria-pressed="false"] { opacity: .45; text-decoration: line-through; }
  .map-legend i { width: 1rem; height: 3px; border-radius: 2px; display: inline-block; }
  .matrix-wrap { overflow-x: auto; }
  .chart.matrix { min-height: 20rem; display: inline-block; min-width: 100%; }
  .nl-method { display: grid; gap: var(--cds-gap-sm); }
  .nl-method ul { margin: 0; padding-left: 1.2em; display: grid; gap: var(--cds-gap-xs); max-width: 72ch; line-height: 1.5; }