/*
 * Nightz Prism: an analytical reading surface.
 *
 * Scoped entirely to [data-skin='prism'] so the existing dashboard is untouched
 * when the skin is off, and deliberately not a recolour of Nightz Command:
 *
 *   Command                          Prism
 *   4px spacing steps, 12px gaps     8px steps, 20 to 32px gaps
 *   6px radius, hairline 1px lines   14px radius, layered surfaces
 *   flat panels, no shadow           one soft elevation, used sparingly
 *   uppercase micro labels           sentence case titles with a note line
 *   uniform 12 column grid           a hero band, then wide reading cards
 *   left rail navigation             pill navigation with a leading marker
 *   one accent, status colours       three data accents plus status
 *
 * Command answers "what needs a human right now". Prism answers "what is
 * happening over time", so it trades density for legibility: fewer things per
 * screen, bigger numbers, more air, and charts that carry the meaning.
 *
 * No heavy blur and no glow: every accent here still passes as readable text on
 * its own surface.
 */

[data-skin="prism"] {
  /* Layered surfaces, deep navy through graphite. */
  --prs-base: #080b13;
  --prs-surface: #0e1320;
  --prs-card: #121a2b;
  --prs-raised: #182236;
  --prs-line: rgba(146, 170, 214, 0.12);
  --prs-line-soft: rgba(146, 170, 214, 0.07);

  /* Three data accents. Chrome stays neutral; colour means something. */
  --prs-blue: #6ea8fe;
  --prs-cyan: #4fd1e0;
  --prs-violet: #b39dfb;
  --prs-blue-soft: rgba(110, 168, 254, 0.13);
  --prs-cyan-soft: rgba(79, 209, 224, 0.13);
  --prs-violet-soft: rgba(179, 157, 251, 0.13);

  --prs-ok: #4ade9b;
  --prs-warn: #f5c26b;
  --prs-crit: #f87f8c;
  --prs-ok-soft: rgba(74, 222, 155, 0.12);
  --prs-warn-soft: rgba(245, 194, 107, 0.12);
  --prs-crit-soft: rgba(248, 127, 140, 0.12);

  /*
   * Contrast, measured against the surfaces these actually sit on:
   *   text   on --prs-card    15.1:1
   *   text-2 on --prs-card     8.0:1
   *   text-3 on --prs-raised   4.9:1  (worst case; card notes and axis labels
   *                                    are small, so they clear 4.5:1 as well)
   */
  --prs-text: #eaeffb;
  --prs-text-2: #a3b0c9;
  --prs-text-3: #8290ab;

  /* An 8px scale, deliberately looser than Command's 4px one. */
  --prs-1: 8px;
  --prs-2: 14px;
  --prs-3: 20px;
  --prs-4: 32px;
  --prs-5: 48px;

  --prs-radius: 14px;
  --prs-radius-sm: 9px;
  --prs-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.9);
  --prs-ease: 180ms cubic-bezier(0.2, 0, 0.2, 1);

  background: var(--prs-base);
  color: var(--prs-text);
}

@media (prefers-reduced-motion: reduce) {
  [data-skin="prism"] * {
    transition-duration: 0ms !important;
    animation-duration: 0ms !important;
  }
}

/* ---------------------------------------------------------- shell feel *
 * Prism changes the navigation too: pills with a leading marker instead of
 * Command's left rail, a quieter sidebar, and a taller top bar. Layout metrics
 * (widths, flex direction) are left alone so nothing can reflow badly.
 */

[data-skin="prism"] .dashboard-sidebar {
  background: linear-gradient(180deg, #0d121e 0%, #0a0e18 100%);
  border-right: 1px solid var(--prs-line-soft);
  padding-top: var(--prs-3);
}

[data-skin="prism"] .dashboard-sidebar::before {
  background: linear-gradient(180deg, transparent, var(--prs-violet), var(--prs-cyan), transparent);
  opacity: 0.35;
}

[data-skin="prism"] .sidebar-section-label {
  color: var(--prs-text-3);
  letter-spacing: 0.18em;
  font-size: 9px;
}

[data-skin="prism"] .nav-link {
  border-radius: 999px;
  padding: 0.5rem 0.9rem;
  color: var(--prs-text-2);
  font-size: 0.84rem;
}

[data-skin="prism"] .nav-link::after {
  content: "";
  order: -1;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--prs-line);
  flex-shrink: 0;
  transition: background var(--prs-ease);
}

[data-skin="prism"] .nav-link:hover {
  background: rgba(146, 170, 214, 0.07);
  color: var(--prs-text);
}

[data-skin="prism"] .nav-link.active {
  background: var(--prs-blue-soft);
  color: #cfe0ff;
}

[data-skin="prism"] .nav-link.active::after {
  background: var(--prs-blue);
  border-color: var(--prs-blue);
}

[data-skin="prism"] .nav-link.active::before {
  display: none;
}

[data-skin="prism"] .dashboard-topbar {
  background: linear-gradient(180deg, rgba(18, 26, 43, 0.9), rgba(8, 11, 19, 0));
  border-bottom: 1px solid var(--prs-line-soft);
}

[data-skin="prism"] .topbar-title {
  letter-spacing: -0.02em;
}

[data-skin="prism"] .group-tabbar {
  border-bottom-color: var(--prs-line-soft);
}
[data-skin="prism"] .group-tab {
  color: var(--prs-text-3);
  border-radius: 8px 8px 0 0;
}
[data-skin="prism"] .group-tab:hover {
  color: var(--prs-text);
}
[data-skin="prism"] .group-tab.active {
  color: var(--prs-blue);
  border-bottom-color: var(--prs-blue);
}

/* ---------------------------------------------------------------- layout */

[data-skin="prism"] .prs-page {
  display: flex;
  flex-direction: column;
  gap: var(--prs-4);
  padding-bottom: var(--prs-4);
  max-width: 1560px;
}

[data-skin="prism"] .prs-lede {
  max-width: 74ch;
}

[data-skin="prism"] .prs-h1 {
  margin: 0;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--prs-text);
  line-height: 1.2;
}

[data-skin="prism"] .prs-sub {
  margin: var(--prs-1) 0 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--prs-text-2);
}

[data-skin="prism"] .prs-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--prs-text-3);
}

[data-skin="prism"] .prs-section {
  display: flex;
  flex-direction: column;
  gap: var(--prs-3);
}

[data-skin="prism"] .prs-split {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
  gap: var(--prs-3);
  align-items: start;
}

[data-skin="prism"] .prs-halves {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: var(--prs-3);
  align-items: start;
}

[data-skin="prism"] .prs-thirds {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: var(--prs-3);
  align-items: start;
}

@media (max-width: 1180px) {
  [data-skin="prism"] .prs-split {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ------------------------------------------------------------ hero band */

[data-skin="prism"] .prs-band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: var(--prs-3);
}

[data-skin="prism"] .prs-metric {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--prs-1);
  padding: var(--prs-3) var(--prs-3) var(--prs-2);
  background: linear-gradient(160deg, rgba(146, 170, 214, 0.05), transparent 62%), var(--prs-card);
  border: 1px solid var(--prs-line-soft);
  border-radius: var(--prs-radius);
  box-shadow: var(--prs-shadow);
  min-width: 0;
  overflow: hidden;
}

[data-skin="prism"] .prs-metric-k {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--prs-text-3);
}

[data-skin="prism"] .prs-metric-v {
  font-size: 34px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--prs-text);
  word-break: break-word;
}

[data-skin="prism"] .prs-metric-n {
  font-size: 12px;
  color: var(--prs-text-2);
  line-height: 1.5;
}

[data-skin="prism"] .prs-metric.t-blue {
  border-top: 2px solid var(--prs-blue);
}
[data-skin="prism"] .prs-metric.t-cyan {
  border-top: 2px solid var(--prs-cyan);
}
[data-skin="prism"] .prs-metric.t-violet {
  border-top: 2px solid var(--prs-violet);
}
[data-skin="prism"] .prs-metric.t-ok {
  border-top: 2px solid var(--prs-ok);
}
[data-skin="prism"] .prs-metric.t-warn {
  border-top: 2px solid var(--prs-warn);
}
[data-skin="prism"] .prs-metric.t-crit {
  border-top: 2px solid var(--prs-crit);
}

/* ----------------------------------------------------------------- card */

[data-skin="prism"] .prs-card {
  display: flex;
  flex-direction: column;
  background: var(--prs-card);
  border: 1px solid var(--prs-line-soft);
  border-radius: var(--prs-radius);
  box-shadow: var(--prs-shadow);
  min-width: 0;
}

[data-skin="prism"] .prs-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--prs-2);
  flex-wrap: wrap;
  padding: var(--prs-3) var(--prs-3) var(--prs-2);
}

[data-skin="prism"] .prs-card-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--prs-text);
}

[data-skin="prism"] .prs-card-note {
  margin: 3px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--prs-text-3);
  max-width: 62ch;
}

[data-skin="prism"] .prs-card-body {
  padding: 0 var(--prs-3) var(--prs-3);
}
[data-skin="prism"] .prs-card-body.is-flush {
  padding: 0 0 var(--prs-1);
}

[data-skin="prism"] .prs-scroll {
  max-height: 420px;
  overflow-y: auto;
  scrollbar-width: thin;
}

/* ----------------------------------------------------------------- rows */

[data-skin="prism"] .prs-row {
  display: flex;
  align-items: center;
  gap: var(--prs-2);
  padding: var(--prs-2) var(--prs-3);
  border-top: 1px solid var(--prs-line-soft);
  transition: background var(--prs-ease);
}

[data-skin="prism"] .prs-card-body.is-flush .prs-row:first-child {
  border-top: 0;
}
[data-skin="prism"] .prs-row:hover {
  background: var(--prs-raised);
}

[data-skin="prism"] .prs-row-main {
  flex: 1;
  min-width: 0;
}

[data-skin="prism"] .prs-row-t {
  font-size: 13.5px;
  color: var(--prs-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-skin="prism"] .prs-row-s {
  font-size: 11.5px;
  color: var(--prs-text-3);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-skin="prism"] .prs-row-v {
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--prs-text);
  flex-shrink: 0;
}

[data-skin="prism"] .prs-rank {
  width: 24px;
  flex-shrink: 0;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--prs-text-3);
  text-align: right;
}

/* ----------------------------------------------------------- bar tracks */

[data-skin="prism"] .prs-bar {
  height: 7px;
  border-radius: 999px;
  background: rgba(146, 170, 214, 0.09);
  overflow: hidden;
  margin-top: 7px;
}

[data-skin="prism"] .prs-bar > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--prs-blue);
}

[data-skin="prism"] .prs-bar.c-cyan > span {
  background: var(--prs-cyan);
}
[data-skin="prism"] .prs-bar.c-violet > span {
  background: var(--prs-violet);
}
[data-skin="prism"] .prs-bar.c-ok > span {
  background: var(--prs-ok);
}
[data-skin="prism"] .prs-bar.c-warn > span {
  background: var(--prs-warn);
}
[data-skin="prism"] .prs-bar.c-crit > span {
  background: var(--prs-crit);
}

/* ---------------------------------------------------------- area chart */

[data-skin="prism"] .prs-chart {
  width: 100%;
  height: 230px;
  display: block;
}

[data-skin="prism"] .prs-chart-axis {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  color: var(--prs-text-3);
  font-variant-numeric: tabular-nums;
  padding-top: 6px;
}

[data-skin="prism"] .prs-legend {
  display: flex;
  gap: var(--prs-2);
  flex-wrap: wrap;
  font-size: 11.5px;
  color: var(--prs-text-2);
}

[data-skin="prism"] .prs-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

[data-skin="prism"] .prs-swatch {
  width: 9px;
  height: 9px;
  border-radius: 3px;
  background: var(--prs-blue);
}

/* --------------------------------------------------------------- pills */

[data-skin="prism"] .prs-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  white-space: nowrap;
}

[data-skin="prism"] .prs-pill.t-ok {
  color: var(--prs-ok);
  background: var(--prs-ok-soft);
  border-color: rgba(74, 222, 155, 0.28);
}
[data-skin="prism"] .prs-pill.t-warn {
  color: var(--prs-warn);
  background: var(--prs-warn-soft);
  border-color: rgba(245, 194, 107, 0.28);
}
[data-skin="prism"] .prs-pill.t-crit {
  color: var(--prs-crit);
  background: var(--prs-crit-soft);
  border-color: rgba(248, 127, 140, 0.28);
}
[data-skin="prism"] .prs-pill.t-blue {
  color: var(--prs-blue);
  background: var(--prs-blue-soft);
  border-color: rgba(110, 168, 254, 0.28);
}
[data-skin="prism"] .prs-pill.t-violet {
  color: var(--prs-violet);
  background: var(--prs-violet-soft);
  border-color: rgba(179, 157, 251, 0.28);
}
[data-skin="prism"] .prs-pill.t-mute {
  color: var(--prs-text-3);
  background: rgba(146, 170, 214, 0.07);
  border-color: var(--prs-line);
}

[data-skin="prism"] .prs-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* -------------------------------------------------------------- controls */

[data-skin="prism"] .prs-controls {
  display: flex;
  align-items: center;
  gap: var(--prs-1);
  flex-wrap: wrap;
}

[data-skin="prism"] .prs-btn {
  appearance: none;
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--prs-text-2);
  background: rgba(146, 170, 214, 0.06);
  border: 1px solid var(--prs-line);
  border-radius: var(--prs-radius-sm);
  padding: 8px 14px;
  cursor: pointer;
  transition:
    background var(--prs-ease),
    color var(--prs-ease),
    border-color var(--prs-ease);
  white-space: nowrap;
}

[data-skin="prism"] .prs-btn:hover {
  background: var(--prs-raised);
  color: var(--prs-text);
}
[data-skin="prism"] .prs-btn:focus-visible {
  outline: 2px solid var(--prs-blue);
  outline-offset: 2px;
}
[data-skin="prism"] .prs-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

[data-skin="prism"] .prs-btn.is-primary {
  color: #d6e5ff;
  background: var(--prs-blue-soft);
  border-color: rgba(110, 168, 254, 0.4);
}

[data-skin="prism"] .prs-btn.is-crit {
  color: var(--prs-crit);
  background: var(--prs-crit-soft);
  border-color: rgba(248, 127, 140, 0.35);
}

[data-skin="prism"] .prs-btn.is-sm {
  padding: 5px 10px;
  font-size: 11.5px;
}

[data-skin="prism"] .prs-btn[aria-pressed="true"] {
  color: #d6e5ff;
  background: var(--prs-blue-soft);
  border-color: rgba(110, 168, 254, 0.4);
}

/* Segmented control: Prism's answer to a tab bar. */
[data-skin="prism"] .prs-seg {
  display: inline-flex;
  padding: 3px;
  gap: 3px;
  background: rgba(146, 170, 214, 0.06);
  border: 1px solid var(--prs-line-soft);
  border-radius: 999px;
}

[data-skin="prism"] .prs-seg button {
  appearance: none;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--prs-text-3);
  background: none;
  border: 0;
  border-radius: 999px;
  padding: 5px 13px;
  cursor: pointer;
  transition:
    background var(--prs-ease),
    color var(--prs-ease);
}

[data-skin="prism"] .prs-seg button:hover {
  color: var(--prs-text);
}
[data-skin="prism"] .prs-seg button:focus-visible {
  outline: 2px solid var(--prs-blue);
  outline-offset: 2px;
}
[data-skin="prism"] .prs-seg button[aria-pressed="true"] {
  background: var(--prs-raised);
  color: var(--prs-text);
}

[data-skin="prism"] .prs-input {
  font: inherit;
  font-size: 12.5px;
  color: var(--prs-text);
  background: var(--prs-base);
  border: 1px solid var(--prs-line);
  border-radius: var(--prs-radius-sm);
  padding: 8px 12px;
  min-width: 0;
}

[data-skin="prism"] .prs-input::placeholder {
  color: var(--prs-text-3);
}
[data-skin="prism"] .prs-input:focus-visible {
  outline: 2px solid var(--prs-blue);
  outline-offset: 1px;
  border-color: transparent;
}
[data-skin="prism"] .prs-input.is-grow {
  flex: 1 1 240px;
}

[data-skin="prism"] textarea.prs-input {
  resize: vertical;
  width: 100%;
  line-height: 1.55;
}

/* ---------------------------------------------------------------- table */

[data-skin="prism"] .prs-table-wrap {
  overflow: auto;
  max-height: 60vh;
  scrollbar-width: thin;
}

[data-skin="prism"] .prs-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}

[data-skin="prism"] .prs-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--prs-surface);
  border-bottom: 1px solid var(--prs-line);
  padding: 11px var(--prs-3);
  text-align: left;
  white-space: nowrap;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--prs-text-3);
}

[data-skin="prism"] .prs-table td {
  padding: 13px var(--prs-3);
  border-bottom: 1px solid var(--prs-line-soft);
  color: var(--prs-text-2);
  vertical-align: middle;
}

[data-skin="prism"] .prs-table tbody tr {
  transition: background var(--prs-ease);
}
[data-skin="prism"] .prs-table tbody tr:hover td {
  background: var(--prs-raised);
}
[data-skin="prism"] .prs-table tbody tr[aria-current="true"] td {
  background: var(--prs-blue-soft);
}
[data-skin="prism"] .prs-table tbody tr:last-child td {
  border-bottom: 0;
}
[data-skin="prism"] .prs-table .prs-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--prs-text);
}

[data-skin="prism"] .prs-linkcell {
  font: inherit;
  color: var(--prs-blue);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: left;
}

[data-skin="prism"] .prs-linkcell:hover {
  text-decoration: underline;
}
[data-skin="prism"] .prs-linkcell:focus-visible {
  outline: 2px solid var(--prs-blue);
  outline-offset: 2px;
}

[data-skin="prism"] .prs-mono {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11.5px;
  color: var(--prs-text-3);
}

/* -------------------------------------------------------------- records */

[data-skin="prism"] .prs-note {
  padding: var(--prs-2) var(--prs-3);
  border-top: 1px solid var(--prs-line-soft);
  border-left: 2px solid transparent;
}

[data-skin="prism"] .prs-note.t-ok {
  border-left-color: var(--prs-ok);
}
[data-skin="prism"] .prs-note.t-warn {
  border-left-color: var(--prs-warn);
}
[data-skin="prism"] .prs-note.t-crit {
  border-left-color: var(--prs-crit);
}
[data-skin="prism"] .prs-note.t-blue {
  border-left-color: var(--prs-blue);
}

[data-skin="prism"] .prs-note-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--prs-1);
  font-size: 11px;
  color: var(--prs-text-3);
  margin-bottom: 4px;
}

[data-skin="prism"] .prs-note-body {
  font-size: 13px;
  line-height: 1.6;
  color: var(--prs-text);
  word-break: break-word;
  white-space: pre-wrap;
}

/* ------------------------------------------------------------- timeline */

[data-skin="prism"] .prs-time {
  list-style: none;
  margin: 0;
  padding: var(--prs-1) 0 var(--prs-1) var(--prs-3);
  position: relative;
}

[data-skin="prism"] .prs-time::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 14px;
  bottom: 14px;
  width: 1px;
  background: var(--prs-line);
}

[data-skin="prism"] .prs-time li {
  position: relative;
  padding: 9px 0;
  font-size: 12.5px;
  color: var(--prs-text-2);
  line-height: 1.55;
}

[data-skin="prism"] .prs-time li::before {
  content: "";
  position: absolute;
  left: calc(var(--prs-3) * -1 + 2px);
  top: 15px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--prs-card);
  border: 1px solid var(--prs-blue);
}

[data-skin="prism"] .prs-time li.t-warn::before {
  border-color: var(--prs-warn);
}
[data-skin="prism"] .prs-time li.t-crit::before {
  border-color: var(--prs-crit);
}
[data-skin="prism"] .prs-time-what {
  color: var(--prs-text);
}
[data-skin="prism"] .prs-time-when {
  font-size: 11px;
  color: var(--prs-text-3);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------- key value */

[data-skin="prism"] .prs-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--prs-2);
}

[data-skin="prism"] .prs-fact {
  padding: var(--prs-2);
  background: var(--prs-surface);
  border: 1px solid var(--prs-line-soft);
  border-radius: var(--prs-radius-sm);
  min-width: 0;
}

[data-skin="prism"] .prs-fact-k {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--prs-text-3);
}

[data-skin="prism"] .prs-fact-v {
  margin-top: 4px;
  font-size: 15px;
  font-weight: 600;
  color: var(--prs-text);
  font-variant-numeric: tabular-nums;
  word-break: break-word;
}

/* --------------------------------------------------------------- states */

[data-skin="prism"] .prs-empty,
[data-skin="prism"] .prs-error {
  padding: var(--prs-4) var(--prs-3);
  text-align: center;
  font-size: 13px;
  line-height: 1.6;
  color: var(--prs-text-3);
  margin: 0;
}

[data-skin="prism"] .prs-error {
  color: var(--prs-crit);
}

[data-skin="prism"] .prs-banner {
  display: flex;
  gap: var(--prs-2);
  padding: var(--prs-2) var(--prs-3);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--prs-text-2);
  background: var(--prs-surface);
  border: 1px solid var(--prs-line-soft);
  border-left: 3px solid var(--prs-blue);
  border-radius: var(--prs-radius-sm);
}

[data-skin="prism"] .prs-banner.t-warn {
  border-left-color: var(--prs-warn);
  color: var(--prs-warn);
  background: var(--prs-warn-soft);
}
[data-skin="prism"] .prs-banner.t-crit {
  border-left-color: var(--prs-crit);
  color: var(--prs-crit);
  background: var(--prs-crit-soft);
}

[data-skin="prism"] .prs-skel {
  height: 14px;
  border-radius: 7px;
  background: linear-gradient(
    90deg,
    rgba(146, 170, 214, 0.05),
    rgba(146, 170, 214, 0.13),
    rgba(146, 170, 214, 0.05)
  );
  background-size: 200% 100%;
  animation: prs-shimmer 1.2s linear infinite;
}

[data-skin="prism"] .prs-skel + .prs-skel {
  margin-top: 11px;
}
[data-skin="prism"] .prs-skel.is-tall {
  height: 74px;
  border-radius: var(--prs-radius-sm);
}

@keyframes prs-shimmer {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
}

/* -------------------------------------------------------------- utility */

[data-skin="prism"] .prs-stack {
  display: flex;
  flex-direction: column;
  gap: var(--prs-3);
}
[data-skin="prism"] .prs-inline {
  display: flex;
  align-items: center;
  gap: var(--prs-1);
  flex-wrap: wrap;
}
[data-skin="prism"] .prs-spread {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--prs-2);
  flex-wrap: wrap;
}
[data-skin="prism"] .prs-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Shared component bridge
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * Everything above styles Prism's OWN page markup (.prs-*). That was enough
 * while Prism was a preview living on four pages, but it is not enough for
 * Prism to be the dashboard: the twenty-odd production pages are built from a
 * shared component layer (.glass-panel, .stat-card, .data-table, .btn, .badge,
 * .empty-state, .kv-*) that this file did not touch. Turning the skin on
 * globally without this section produced a Prism sidebar and topbar wrapped
 * around pages that still looked like the old theme.
 *
 * Rather than hand-writing a Prism variant of every component - which would
 * have to be repeated for every component added later - this remaps the design
 * TOKENS those components already consume from theme.css. One block, and the
 * whole shared layer renders as Prism, including anything built after this.
 *
 * Only the component-level rules below the token block are hand-written, and
 * only where Prism's design language differs structurally from the default
 * (more air, larger radii, layered surfaces, no neon).
 */

[data-skin="prism"] {
  /* Surfaces: the layered navy-through-graphite ramp, replacing the default
   * translucent-over-black stack. Solid rather than alpha, so nested panels do
   * not compound into mud. */
  --bg-primary: var(--prs-base);
  --bg: var(--prs-base);
  --bg-secondary: var(--prs-card);
  --bg-tertiary: var(--prs-raised);
  --bg-card: var(--prs-card);
  --bg-surface: var(--prs-surface);
  --bg-elevated: var(--prs-raised);
  --bg-input: var(--prs-base);
  --bg-hover: rgba(146, 170, 214, 0.06);

  /* Text: the ramp whose contrast ratios are measured at the top of this file. */
  --text-primary: var(--prs-text);
  --text: var(--prs-text);
  --text-secondary: var(--prs-text-2);
  --text-tertiary: var(--prs-text-3);
  --text-muted: var(--prs-text-3);

  /* Borders: Prism's hairlines are cooler and slightly more visible than the
   * default white/5, because they do real work separating layered surfaces. */
  --border-color: var(--prs-line);
  --border: var(--prs-line);
  --border-strong: rgba(146, 170, 214, 0.22);
  --border-focus: var(--prs-blue);

  /* Accents. The default theme's signature blue is brighter and more saturated
   * than Prism's; several components reference --nd-blue* directly, so those
   * are remapped too or they would punch through as the old colour. */
  --nd-blue: var(--prs-blue);
  --nd-blue-bright: var(--prs-cyan);
  --nd-blue-dim: #4a7fd4;
  --nd-blue-glow: rgba(110, 168, 254, 0.3);
  --nd-blue-soft: var(--prs-blue-soft);
  --accent: var(--prs-blue);
  --accent-primary: var(--prs-blue);
  --accent-secondary: var(--prs-cyan);
  --accent-hover: var(--prs-cyan);
  --accent-muted: #4a7fd4;
  --accent-soft: var(--prs-blue-soft);
  --accent-20: rgba(110, 168, 254, 0.2);

  /* Status. The default --success is pure neon #00ff00, which is unreadable as
   * text on these surfaces and fights everything else in the palette. */
  --success: var(--prs-ok);
  --success-bg: var(--prs-ok-soft);
  --warning: var(--prs-warn);
  --warning-bg: var(--prs-warn-soft);
  --warn: var(--prs-warn);
  --warn-bg: var(--prs-warn-soft);
  --error: var(--prs-crit);
  --error-bg: var(--prs-crit-soft);
  --danger: var(--prs-crit);
  --danger-bg: var(--prs-crit-soft);
  --info: var(--prs-blue);
  --info-bg: var(--prs-blue-soft);

  /* Shape: Prism is softer and more elevated than the default 10px/flat look. */
  --radius: var(--prs-radius);
  --radius-sm: var(--prs-radius-sm);
  --radius-lg: 18px;
  --shadow: 0 2px 10px -6px rgba(0, 0, 0, 0.8);
  --shadow-md: var(--prs-shadow);
  --shadow-lg: 0 28px 60px -30px rgba(0, 0, 0, 0.95);
  --shadow-glow: none;
}

/* ── Panels ──────────────────────────────────────────────────────────────
 * Prism uses one soft elevation sparingly, and trades density for legibility,
 * so panels get more internal air than the default theme gives them. */
[data-skin="prism"] .glass-panel {
  background: var(--prs-card);
  border-radius: var(--prs-radius);
  box-shadow: var(--prs-shadow);
  transition:
    border-color var(--prs-ease),
    box-shadow var(--prs-ease);
}
[data-skin="prism"] .glass-panel:hover {
  border-color: rgba(146, 170, 214, 0.22);
  box-shadow: var(--prs-shadow);
}
/* Sentence-case titles with a leading marker, matching .prs-h2, rather than the
 * default's uppercase micro-label with an accent tick. */
[data-skin="prism"] .glass-panel > h3,
[data-skin="prism"] .chart-container > h3 {
  color: var(--prs-text);
  font-size: 0.98rem;
  font-weight: 620;
  letter-spacing: -0.01em;
  text-transform: none;
  gap: var(--prs-1);
}
[data-skin="prism"] .glass-panel > h3::before,
[data-skin="prism"] .chart-container > h3::before {
  width: 3px;
  height: 1.05em;
  border-radius: 999px;
  background: var(--prs-blue);
}

/* ── Stat tiles ──────────────────────────────────────────────────────────
 * The default tile has a gradient top rule, a blur, and a lift-on-hover. Prism
 * reads as a calm surface: no gradient bar, no transform, bigger number. */
[data-skin="prism"] .stat-card {
  background: var(--prs-card);
  border-radius: var(--prs-radius);
  padding: var(--prs-3);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  transition:
    border-color var(--prs-ease),
    background var(--prs-ease);
}
[data-skin="prism"] .stat-card::before {
  display: none;
}
[data-skin="prism"] .stat-card:hover {
  border-color: rgba(146, 170, 214, 0.22);
  background: var(--prs-raised);
  box-shadow: none;
  transform: none;
}
[data-skin="prism"] .stat-label {
  font-size: 0.72rem;
  font-weight: 560;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--prs-text-3);
  margin-bottom: var(--prs-1);
}
[data-skin="prism"] .stat-value {
  font-size: 2.1rem;
  font-weight: 640;
  font-family: var(--font);
  letter-spacing: -0.03em;
  color: var(--prs-text);
}

/* ── Tables ──────────────────────────────────────────────────────────────
 * Wider rows and a quieter header: Prism's tables are for reading, not for
 * cramming maximum rows above the fold. */
[data-skin="prism"] .data-table thead {
  background: transparent;
  border-bottom: 1px solid var(--prs-line);
}
[data-skin="prism"] .data-table th {
  color: var(--prs-text-3);
  font-size: 0.74rem;
  font-weight: 560;
  letter-spacing: 0.02em;
  text-transform: none;
  padding: var(--prs-1) var(--prs-2);
}
[data-skin="prism"] .data-table td {
  padding: var(--prs-2);
  border-bottom: 1px solid var(--prs-line-soft);
  color: var(--prs-text-2);
}
[data-skin="prism"] .data-table tr:hover {
  background: rgba(146, 170, 214, 0.05);
}
[data-skin="prism"] .data-table td code {
  background: var(--prs-base);
  border: 1px solid var(--prs-line-soft);
  border-radius: var(--prs-radius-sm);
  color: var(--prs-cyan);
}

/* ── Controls ────────────────────────────────────────────────────────────
 * Pill buttons with a leading marker on the primary, echoing .nav-link. */
[data-skin="prism"] .btn {
  border-radius: var(--prs-radius-sm);
  font-weight: 560;
  letter-spacing: 0;
  text-transform: none;
  transition:
    background var(--prs-ease),
    border-color var(--prs-ease),
    color var(--prs-ease);
}
[data-skin="prism"] .btn-primary {
  background: var(--prs-blue);
  border-color: transparent;
  color: var(--prs-base);
}
[data-skin="prism"] .btn-primary:hover {
  background: var(--prs-cyan);
  color: var(--prs-base);
}
[data-skin="prism"] .btn-secondary {
  background: var(--prs-raised);
  border-color: var(--prs-line);
  color: var(--prs-text-2);
}
[data-skin="prism"] .btn-secondary:hover {
  background: var(--prs-card);
  border-color: rgba(146, 170, 214, 0.22);
  color: var(--prs-text);
}
[data-skin="prism"] .data-select,
[data-skin="prism"] input[type="text"],
[data-skin="prism"] input[type="search"],
[data-skin="prism"] input[type="number"],
[data-skin="prism"] input[type="password"],
[data-skin="prism"] textarea,
[data-skin="prism"] select {
  background: var(--prs-base);
  border: 1px solid var(--prs-line);
  border-radius: var(--prs-radius-sm);
  color: var(--prs-text);
}
[data-skin="prism"] .data-select:focus,
[data-skin="prism"] input:focus,
[data-skin="prism"] textarea:focus,
[data-skin="prism"] select:focus {
  border-color: var(--prs-blue);
  outline: 2px solid var(--prs-blue-soft);
  outline-offset: 1px;
}

/* ── Key/value lists and section headers ─────────────────────────────── */
[data-skin="prism"] .kv-row {
  border-bottom: 1px solid var(--prs-line-soft);
  padding: var(--prs-1) 0;
}
[data-skin="prism"] .kv-key {
  color: var(--prs-text-3);
  text-transform: none;
  letter-spacing: 0;
}
[data-skin="prism"] .kv-val {
  color: var(--prs-text);
}
[data-skin="prism"] .section-header {
  color: var(--prs-text);
  text-transform: none;
  letter-spacing: -0.01em;
}

/* ── Empty states ────────────────────────────────────────────────────────
 * An empty table is information, not an error. Prism states it plainly. */
[data-skin="prism"] .empty-state {
  color: var(--prs-text-3);
  background: transparent;
  border: 1px dashed var(--prs-line);
  border-radius: var(--prs-radius);
  padding: var(--prs-4) var(--prs-3);
}

/* ── Badges ──────────────────────────────────────────────────────────────
 * Tinted rather than solid, so a row of them does not out-shout the data. */
[data-skin="prism"] .badge {
  border-radius: 999px;
  font-weight: 560;
  letter-spacing: 0;
  text-transform: none;
  border: 1px solid transparent;
}
[data-skin="prism"] .badge-success {
  background: var(--prs-ok-soft);
  border-color: rgba(74, 222, 155, 0.3);
  color: var(--prs-ok);
}
[data-skin="prism"] .badge-warning {
  background: var(--prs-warn-soft);
  border-color: rgba(245, 194, 107, 0.3);
  color: var(--prs-warn);
}
[data-skin="prism"] .badge-danger {
  background: var(--prs-crit-soft);
  border-color: rgba(248, 127, 140, 0.3);
  color: var(--prs-crit);
}

/* Charts inherit the page background rather than punching a dark hole in it. */
[data-skin="prism"] .chart-container {
  background: var(--prs-card);
  border-radius: var(--prs-radius);
}

/* Status pills. Prism has no glow anywhere else, so the online state does not
   get one either; the colour alone carries it. */
[data-skin="prism"] .kv-online {
  color: var(--prs-ok);
  font-weight: 600;
  text-shadow: none;
}
[data-skin="prism"] .kv-offline {
  color: var(--prs-crit);
  font-weight: 600;
}