/* pn-dashboard.css: the brand palette and base styles for Patternode dashboards.
 *
 * Load after tokens.css. Every dashboard inherits the same roles, so they read as one
 * product and follow light and dark together: the OS preference standalone, the site's
 * theme when framed (pn-embed.js sets <html data-theme>).
 *
 *   --pn-d-*        dashboard roles: surfaces, text, edges, accent, highlight, status
 *   --pn-d-cat-1..8 series colours for marks (nodes, lines, bars), contrast-checked per theme
 *   .pn-dash        opt-in base styles on <body>: type, surfaces, buttons, chips, tabs, inputs, tables
 *
 * Use the roles, not hex values and not ramp steps. A dashboard with its own semantics (the
 * knowledge graph's node classes) defines its own variables on top of these. For canvas, or
 * anything that cannot take var(), read a resolved colour with pnEmbed.color('--pn-d-cat-1')
 * and redraw in pnEmbed.onTheme.
 */
:root {
  --pn-d-bg: var(--pn-bg);
  --pn-d-panel: var(--pn-surface);
  --pn-d-raised: var(--pn-surface-raised);
  --pn-d-border: var(--pn-border);
  --pn-d-edge: var(--pn-neutral-300);          /* graph edges, gridlines */
  --pn-d-faint: var(--pn-neutral-400);
  --pn-d-subtle: var(--pn-neutral-500);
  --pn-d-muted: var(--pn-text-muted);
  --pn-d-text-2: var(--pn-neutral-800);
  --pn-d-text: var(--pn-text);
  --pn-d-link: var(--pn-link);
  --pn-d-accent: var(--pn-action);             /* active controls, the selected view */
  --pn-d-accent-ink: #fff;                     /* text on the accent */
  --pn-d-signal: var(--pn-chart-line);         /* the one live line */
  --pn-d-hit: var(--pn-tertiary-500);          /* selection and search hits: rose, never a market colour */
  --pn-d-up: var(--pn-chart-up);
  --pn-d-down: var(--pn-chart-down);
  --pn-d-ok: var(--pn-success-600);
  --pn-d-warn: var(--pn-warning-600);
  --pn-d-err: var(--pn-danger-600);
  --pn-d-cat-1: var(--pn-primary-600);
  --pn-d-cat-2: var(--pn-secondary-600);
  --pn-d-cat-3: var(--pn-warning-600);
  --pn-d-cat-4: var(--pn-tertiary-600);
  --pn-d-cat-5: var(--pn-cat-5);
  --pn-d-cat-6: var(--pn-neutral-500);
  --pn-d-cat-7: var(--pn-primary-800);
  --pn-d-cat-8: var(--pn-secondary-800);
  --pn-d-radius: var(--pn-radius-md);
}
:root[data-theme="dark"] {
  --pn-d-edge: var(--pn-neutral-700);
  --pn-d-faint: var(--pn-neutral-600);
  --pn-d-text-2: var(--pn-neutral-200);
  --pn-d-accent-ink: var(--pn-brand-navy);
  --pn-d-hit: var(--pn-tertiary-400);
  --pn-d-ok: var(--pn-success-400);
  --pn-d-warn: var(--pn-warning-400);
  --pn-d-err: var(--pn-danger-300);
  --pn-d-cat-1: var(--pn-primary-400);
  --pn-d-cat-2: var(--pn-secondary-400);
  --pn-d-cat-3: var(--pn-cat-3);
  --pn-d-cat-4: var(--pn-tertiary-400);
  --pn-d-cat-5: var(--pn-cat-5);
  --pn-d-cat-6: var(--pn-neutral-400);
  --pn-d-cat-7: var(--pn-primary-200);
  --pn-d-cat-8: var(--pn-secondary-200);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --pn-d-edge: var(--pn-neutral-700);
    --pn-d-faint: var(--pn-neutral-600);
    --pn-d-text-2: var(--pn-neutral-200);
    --pn-d-accent-ink: var(--pn-brand-navy);
    --pn-d-hit: var(--pn-tertiary-400);
    --pn-d-ok: var(--pn-success-400);
    --pn-d-warn: var(--pn-warning-400);
    --pn-d-err: var(--pn-danger-300);
    --pn-d-cat-1: var(--pn-primary-400);
    --pn-d-cat-2: var(--pn-secondary-400);
    --pn-d-cat-3: var(--pn-cat-3);
    --pn-d-cat-4: var(--pn-tertiary-400);
    --pn-d-cat-5: var(--pn-cat-5);
    --pn-d-cat-6: var(--pn-neutral-400);
    --pn-d-cat-7: var(--pn-primary-200);
    --pn-d-cat-8: var(--pn-secondary-200);
  }
}

/* Base styles, opt-in: <body class="pn-dash">. */
.pn-dash { margin: 0; background: var(--pn-d-bg); color: var(--pn-d-text); font: 14px/1.5 var(--pn-font-sans); }
.pn-dash *, .pn-dash *::before, .pn-dash *::after { box-sizing: border-box; }
.pn-dash a { color: var(--pn-d-link); }
.pn-dash :focus-visible { outline: 2px solid var(--pn-focus); outline-offset: 2px; }
.pn-dash .pn-mono, .pn-dash code { font-family: var(--pn-font-mono); }
.pn-dash .pn-num { font-variant-numeric: tabular-nums; }
.pn-dash .pn-muted { color: var(--pn-d-muted); }
.pn-dash .pn-panel { background: var(--pn-d-panel); border: 1px solid var(--pn-d-border); border-radius: var(--pn-d-radius); }
.pn-dash .pn-btn {
  background: var(--pn-d-panel); color: var(--pn-d-text); border: 1px solid var(--pn-d-border);
  border-radius: var(--pn-d-radius); padding: 5px 12px; font: inherit; font-size: 12.5px; cursor: pointer;
}
.pn-dash .pn-btn:hover { border-color: var(--pn-d-accent); }
.pn-dash .pn-btn.primary, .pn-dash .pn-btn[aria-pressed="true"] { background: var(--pn-d-accent); border-color: var(--pn-d-accent); color: var(--pn-d-accent-ink); font-weight: 600; }
.pn-dash .pn-chip {
  display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--chip, var(--pn-d-muted));
  background: color-mix(in oklab, var(--chip, var(--pn-d-muted)) 18%, transparent);
}
.pn-dash .pn-input {
  background: var(--pn-d-bg); color: var(--pn-d-text); border: 1px solid var(--pn-d-border);
  border-radius: var(--pn-d-radius); padding: 7px 10px; font: inherit; font-size: 12.5px;
}
.pn-dash .pn-input:focus { outline: none; border-color: var(--pn-d-accent); }
.pn-dash .pn-table { border-collapse: collapse; width: 100%; font-size: 12px; font-variant-numeric: tabular-nums; }
.pn-dash .pn-table th { text-align: left; color: var(--pn-d-muted); font-weight: 600; }
.pn-dash .pn-table th, .pn-dash .pn-table td { padding: 4px 8px; border-bottom: 1px solid var(--pn-d-border); }
.pn-dash .pn-label { font: 500 11px/1 var(--pn-font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--pn-d-muted); }