/* Narrative Desk — scoped styles (Iter 25EI).

   Every class is nd- prefixed so nothing collides with existing desk CSS.

   The handover shipped these with light-mode fallbacks (--card/--ink/--rule)
   on the assumption the host app defined them. This app doesn't — dashboard.css
   declares a dark palette under different names (--surface/--text/--border), so
   the nd- variables are mapped onto the real tokens here. Change the palette in
   :root and this module follows; it never hard-codes a theme colour except the
   two stance tints, which are derived from --up/--down. */

.nd-widget-inner, .nd-tab {
  --nd-card:      var(--surface, #1c1c20);
  --nd-card-2:    var(--surface-hover, #222226);
  --nd-ink:       var(--text, #e0e0e0);
  --nd-ink-soft:  var(--text-muted, #ffffff80);
  --nd-ink-faint: var(--text-faint, #5A5957);
  --nd-rule:      var(--border, #2a2a30);
  --nd-rule-soft: var(--border2, rgba(42,42,48,0.3));
  --nd-rising:    var(--secondary, #BB653B);
  --nd-falling:   var(--accent, #4F98A3);
  --nd-flat:      var(--text-faint, #5A5957);
  --nd-mono:      ui-monospace, 'SF Mono', Menlo, monospace;
  color: var(--nd-ink);
}

/* A rising narrative is a risk building, so it takes the warning colour, not
   the "good" one — this is share of voice, not price. */
.nd-up   { color: var(--nd-rising); }
.nd-down { color: var(--nd-falling); }
.nd-nil  { color: var(--nd-flat); }

/* ---------- widget ----------
   No border or header here: the My Desk card supplies both. */
.nd-stamp-row { display: flex; justify-content: flex-end; padding: 0 0 6px; }
.nd-stamp { font-family: var(--nd-mono); font-size: 10.5px; color: var(--nd-ink-faint); }

.nd-mover {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 12px;
  width: 100%; text-align: left; align-items: center;
  padding: 12px 2px; border: 0; border-bottom: 1px solid var(--nd-rule-soft);
  background: transparent; cursor: pointer; font: inherit; color: inherit;
}
.nd-mover.nd-mover-static { cursor: default; }
.nd-mover:not(.nd-mover-static):hover { background: var(--nd-card-2); }
.nd-mover:focus-visible { outline: 2px solid var(--nd-ink); outline-offset: -2px; }
.nd-mover-nm  { font-weight: 600; font-size: 14.5px; letter-spacing: -.01em; }
.nd-mover-sub { grid-column: 1; font-family: var(--nd-mono); font-size: 10.5px; color: var(--nd-ink-faint); }
.nd-mover-z {
  grid-row: 1 / 3; grid-column: 2; text-align: right;
  font-family: var(--nd-mono); font-weight: 600; font-size: 19px; letter-spacing: -.03em;
}
.nd-mover-z small {
  display: block; font-size: 9.5px; font-weight: 400; letter-spacing: .06em;
  color: var(--nd-ink-faint); text-transform: uppercase;
}

.nd-spark { display: flex; align-items: flex-end; gap: 1.5px; height: 22px; grid-column: 1 / 3; margin-top: 5px; }
.nd-spark i { flex: 1; background: var(--nd-rule); border-radius: .5px; min-height: 1px; }
.nd-spark i.nd-hot  { background: var(--nd-rising); }
.nd-spark i.nd-cool { background: var(--nd-falling); }

.nd-widget-ft { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 11px 2px 2px; }

.nd-link {
  font-family: var(--nd-mono); font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--nd-ink); background: none; border: 0; border-bottom: 1px solid var(--nd-rule);
  padding: 0 0 1px; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.nd-link:hover { border-bottom-color: var(--nd-ink); }

/* ---------- loading + empty ---------- */
.nd-skel {
  height: 46px; background: var(--nd-rule-soft); border-radius: 3px;
  animation: nd-pulse 1.4s ease-in-out infinite;
}
@keyframes nd-pulse { 0%,100% { opacity: 1 } 50% { opacity: .5 } }
@media (prefers-reduced-motion: reduce) { .nd-skel { animation: none } }

.nd-empty { padding: 14px 2px; color: var(--nd-ink-soft); font-size: 13.5px; }
.nd-empty p { margin: 0 0 8px; }
.nd-empty-meta { font-family: var(--nd-mono); font-size: 10.5px; color: var(--nd-ink-faint); }

/* ---------- subtab ---------- */
.nd-tab { margin-top: 22px; }
.nd-tab[hidden] { display: none; }
.nd-tab-hd {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 24px; flex-wrap: wrap; padding-bottom: 16px; border-bottom: 2px solid var(--nd-rule);
}
.nd-eyebrow {
  font-family: var(--nd-mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--nd-ink-faint); margin: 0 0 6px;
}
.nd-h2 { margin: 0; font-size: clamp(20px, 3vw, 27px); letter-spacing: -.025em; line-height: 1.1; }
.nd-h3 { margin: 0; font-size: 16px; letter-spacing: -.02em; font-weight: 700; }

.nd-runstats { display: flex; gap: 22px; flex-wrap: wrap; }
.nd-k { display: block; font-family: var(--nd-mono); font-size: 9.5px; letter-spacing: .11em; text-transform: uppercase; color: var(--nd-ink-faint); }
.nd-v { display: block; font-family: var(--nd-mono); font-size: 19px; font-weight: 600; letter-spacing: -.03em; line-height: 1.25; }
.nd-v small { font-size: 12px; color: var(--nd-ink-faint); font-weight: 400; }
.nd-meter { width: 100%; max-width: 200px; height: 5px; background: var(--nd-rule-soft); border-radius: 3px; margin-top: 6px; overflow: hidden; }
.nd-meter i { display: block; height: 100%; background: var(--nd-ink); }

.nd-sov-hd { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; margin: 26px 0 4px; }
.nd-axis { font-family: var(--nd-mono); font-size: 10px; color: var(--nd-ink-faint); letter-spacing: .04em; }
.nd-axis-block { display: block; margin-bottom: 14px; }

.nd-track {
  display: grid; grid-template-columns: 180px 1fr 128px; gap: 0 18px; align-items: center;
  width: 100%; text-align: left; padding: 11px 0;
  border: 0; border-bottom: 1px solid var(--nd-rule-soft);
  background: transparent; cursor: pointer; font: inherit; color: inherit;
}
.nd-track:hover { background: var(--nd-card-2); }
.nd-track[aria-selected="true"] { background: var(--nd-card); }
.nd-track[aria-selected="true"] .nd-t-nm {
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px;
}
.nd-track:focus-visible { outline: 2px solid var(--nd-ink); outline-offset: 2px; }

.nd-t-nm  { display: block; font-weight: 600; font-size: 14.5px; letter-spacing: -.01em; }
.nd-t-sub { display: block; font-family: var(--nd-mono); font-size: 10px; color: var(--nd-ink-faint); margin-top: 2px; }

.nd-wave { display: flex; align-items: flex-end; gap: 2px; height: 46px; }
.nd-wave i { flex: 1; background: var(--nd-rule); border-radius: 1px 1px 0 0; min-height: 2px; }
.nd-wave i.nd-today { background: var(--nd-ink); }
.nd-wave i.nd-hot   { background: var(--nd-rising); }
.nd-wave i.nd-cool  { background: var(--nd-falling); }

.nd-t-right { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.nd-tone { position: relative; width: 52px; height: 16px; background: var(--nd-rule-soft); border-radius: 1px; overflow: hidden; }
.nd-tone i { position: absolute; top: 0; bottom: 0; background: var(--nd-rising); }
.nd-tone i.nd-pos { background: var(--nd-falling); }
.nd-t-z { font-family: var(--nd-mono); font-weight: 600; font-size: 17px; letter-spacing: -.03em; min-width: 48px; text-align: right; }

.nd-panel { border: 1px solid var(--nd-rule); border-radius: 3px; background: var(--nd-card); padding: 17px; margin-top: 26px; }
.nd-ev { border-top: 1px solid var(--nd-rule-soft); padding: 13px 0; }
.nd-ev:first-of-type { border-top: 0; padding-top: 4px; }
.nd-ev-hd { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; margin-bottom: 6px; }
.nd-ev-src { font-weight: 600; font-size: 13.5px; }
.nd-ev-meta { font-family: var(--nd-mono); font-size: 10px; color: var(--nd-ink-faint); white-space: nowrap; }
.nd-ev-span { font-size: 13.5px; color: var(--nd-ink-soft); border-left: 2px solid var(--nd-rule); padding-left: 11px; margin: 0 0 7px; font-style: italic; }
.nd-ev-tags { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.nd-tag {
  font-family: var(--nd-mono); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 2px; background: var(--nd-card-2); color: var(--nd-ink-soft);
  box-shadow: inset 0 0 0 1px var(--nd-rule-soft);
}
.nd-tag.nd-neg     { background: var(--down-bg, rgba(194,74,74,0.12)); color: var(--nd-rising); box-shadow: none; }
.nd-tag.nd-pos-tag { background: var(--up-bg, rgba(14,179,91,0.12)); color: var(--nd-falling); box-shadow: none; }

@media (max-width: 900px) {
  .nd-track { grid-template-columns: 1fr auto; gap: 8px 12px; }
  .nd-wave  { grid-column: 1 / 3; order: 3; }
}