/* Generated from agentic/tokens.css and agentic/agentic.css by scripts/build-bundle.mjs. Do not edit. Load after tokens.css and bundle.css. */
/* Agentic tokens: the roles only the agentic components need (urgency, live, autonomy, confidence, evidence,
   face, motion). Built on Sirius variables; load after dist/tokens.css. A value under "No Sirius variable"
   has no counterpart in Sirius, so design can decide whether it earns one. */
:root {
  /* Urgency: how soon something needs a person. Blue is one operational family; warm is for exceptions. */
  --urgency-critical: var(--bg-error);
  --urgency-critical-weak: var(--bg-error-weak);
  --urgency-soon: var(--status-attention);
  --urgency-soon-weak: var(--status-attention-weak);
  --urgency-watch: var(--brand-blue-dark);
  --urgency-watch-weak: var(--status-transit-weak);
  --urgency-calm: var(--brand-navy-light);
  --urgency-calm-weak: var(--brand-dock-sand);

  /* Live: whether an agent is working. */
  --live-working: var(--brand-green-dark);
  --live-working-glow: var(--brand-action-green);
  --live-idle: var(--ink-weak);
  --live-blocked: var(--status-attention);

  /* Autonomy: who holds the decision. */
  --autonomy-yours: var(--status-attention);
  --autonomy-yours-weak: var(--status-attention-weak);
  --autonomy-learning: var(--brand-blue-dark);
  --autonomy-learning-weak: var(--status-transit-weak);
  --autonomy-autonomous: var(--brand-green-dark);
  --autonomy-autonomous-weak: var(--brand-green-light);

  /* Confidence. */
  --confidence-high: var(--brand-green-dark);
  --confidence-medium: var(--brand-vibrant-blue);
  --confidence-low: var(--status-attention);

  /* Agent face and evidence. */
  --face-surface: var(--brand-ice-blue);
  --face-ink: var(--brand-blue-dark);
  --evidence-ink: var(--ink-secondary);
  --evidence-surface: var(--brand-dock-sand);
  --evidence-line: var(--brand-sand-dark);
  --value-estimate: var(--ink-secondary);

  /* No Sirius variable. */
  --nx-space-12: 12px;
  --gap-inline: 6px;
  --ink-inverse-weak: #a9bad4;
  --elevation-3-up: 0 -10px 24px -10px rgb(15 27 77 / 0.2); /* Elevation-003 mirrored upward */
  --control-height: 40px;
  --control-height-sm: 32px;
  --table-row-height: 36px;
  --rail-width: 72px;
  --rail-width-expanded: 240px;

  /* Motion. Sirius defines none; these are the agentic components' own. */
  --duration-quick: 180ms;
  --duration-settle: 240ms;
  --duration-notice: 900ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.5, 0, 0.9, 0.4);
  --ease-move: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-linear: linear;
}

/* Nauta v2 Agentic UI — component recipes. Plain CSS, no framework.
   Every value comes from tokens.css. Prefix: nv- */
.nx {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.3;
  color: var(--ink-default);
  -webkit-font-smoothing: antialiased;
}
.nx *,
.nx *::before,
.nx *::after { box-sizing: border-box; }

/* Half a step, named once. A mark and the word it belongs to -- a dot and its
   status, a face and its name, an icon and its label -- are one thing, and the
   spacing scale's smallest real step pulls them apart. Everything structural
   still uses the scale; this is only for what reads as a single object. */:root,
.nx { --gap-inline: 6px; }
.nx-muted { color: var(--ink-secondary); }
.nx-dot {
  display: inline-block; vertical-align: middle;
  width: 7px; height: 7px; border-radius: var(--radius-pill);
  background: var(--live-working); flex: none;
  /* Working state is persistent; an idle page does not pulse. */
}
.nx-dot--blocked { background: var(--live-blocked); animation: none; }

@keyframes nx-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(170, 199, 42, 0.5); }
  70%  { box-shadow: 0 0 0 7px rgba(170, 199, 42, 0); }
  100% { box-shadow: 0 0 0 0 rgba(170, 199, 42, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .nx-dot { animation: none; }
}

/* ---------- Card ---------- */
.nx-card {
  background: var(--bg-default);
  box-shadow: var(--elevation-001);
  border-radius: var(--radius-m);
  padding: var(--space-m);
}
.nx-card--flat { border-radius: var(--radius-s); padding: var(--space-s); }
.nx-card__title { font-size: 18px; font-weight: 700; line-height: 1.3; margin: 0; }
.nx-card__meta { margin-top: 4px; }
.nx-card__body { margin-top: var(--nx-space-12); font-size: 14px; line-height: 1.3; }

/* A secondary line under something. One class decides what a note is -- size,
   colour and the air above it -- so no renderer has to carry type rules inline. */
.nx-note { font-size: 12px; color: var(--ink-secondary); margin: 0; }
.nx-note--after { margin-top: var(--space-xs); }
.nx-note--apart { margin-top: var(--nx-space-12); }
.nx-note--over { margin-bottom: var(--nx-space-12); }
.nx-card__actions { margin-top: var(--space-s); display: flex; gap: var(--space-xs); flex-wrap: wrap; align-items: center; }
a.nx-card,
button.nx-card { display: block; width: 100%; text-align: left; cursor: pointer; font: inherit; color: inherit; }
a.nx-card:hover,
button.nx-card:hover { background: var(--bg-weak); }
.nx-metric__value { font-family: var(--font-mono); font-size: 24px; font-weight: 600; line-height: 1.3;
                    font-variant-numeric: tabular-nums; min-width: 0; overflow-wrap: anywhere; }

/* ---------- preview helpers (not part of the system) ---------- */
.nx-demo { padding: var(--space-m); display: grid; gap: var(--space-s); }
.nx-demo__row { display: flex; gap: var(--space-xs); flex-wrap: wrap; align-items: center; }
.nx-demo__note { font-size: 12px; color: var(--ink-secondary); }

.nx-feed { display: grid; gap: var(--space-xs); }
.nx-feed__item {
  display: flex; gap: var(--nx-space-12); align-items: center;
  border-bottom: 1px solid var(--line-border-standard); padding: var(--nx-space-12) 0;
}
.nx-feed__mark {
  width: 28px; height: 28px; border-radius: var(--radius-pill); flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-default); color: var(--brand-blue-dark); font-size: 12px;
}
.nx-feed__item--escalated .nx-feed__mark { color: var(--ink-secondary); }
.nx-feed__text { flex: 1; line-height: 1.3; }
.nx-feed__ref {
  display: block; width: fit-content; max-width: 100%; margin-top: 4px; font-family: var(--font-sans); font-size: 12px;
  color: var(--ink-secondary); text-decoration: none; border-bottom: 1px solid transparent;
}
.nx-feed__ref:hover { color: var(--brand-blue-dark); border-bottom-color: currentColor; }
.nx-feed__when { font-family: var(--font-sans); font-size: 12px; color: var(--ink-secondary); white-space: nowrap; }
.nx-feed__day {
  font-family: var(--font-sans); font-size: 12px;
  color: var(--ink-secondary); padding-top: var(--space-xs);
}

/* ---------- EvidenceTrail (moment 05, "how it thought") ---------- */
.nx-evidence { display: grid; gap: var(--space-s); }
.nx-evidence__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--nx-space-12); }
.nx-evidence__elapsed { font-family: var(--font-sans); font-weight: 400; font-size: 12px; color: var(--ink-secondary); }

/* the spine: a node per step, a line between them, and a filled node where it lands */
.nx-evidence__steps { display: grid; gap: 0; }
.nx-evidence__step {
  display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: var(--nx-space-12);
  padding-bottom: var(--space-s); position: relative;
}
.nx-evidence__step:last-child { padding-bottom: 0; }
.nx-evidence__step::before {
  content: ""; position: absolute; left: 13px; top: 22px; bottom: -2px; width: 2px;
  background: var(--evidence-line);
}
.nx-evidence__step:last-child::before { display: none; }
.nx-evidence__node {
  grid-row: 1 / span 3; width: 28px; height: 28px; border-radius: var(--radius-pill);
  background: var(--bg-default); border: 2px solid var(--evidence-line);
  display: grid; place-items: center; font-family: var(--font-mono); font-size: 12px;
  color: var(--ink-secondary); position: relative; z-index: 1;
 font-weight: 300;}
.nx-evidence__kind {
  font-family: var(--font-sans); font-weight: 600; font-size: 12px; letter-spacing: 0; color: var(--ink-secondary);
}
.nx-evidence__what { color: var(--ink-default); font-weight: 600; font-size: 12px; line-height: 1.3; margin-top: 1px; }
.nx-evidence__detail { color: var(--evidence-ink); font-size: 12px; line-height: 1.3; margin-top: 2px; }
.nx-evidence__source {
  display: inline-block; margin-top: 6px; font-family: var(--font-sans); font-weight: 400; font-size: 12px;
  color: var(--ink-secondary); text-decoration: none;
  border: 1px solid var(--line-border-standard); border-radius: var(--radius-xss); padding: 3px 8px;
}
.nx-evidence__source:hover { border-color: var(--brand-blue-dark); color: var(--brand-blue-dark); }

/* where it lands */
.nx-evidence__step--end .nx-evidence__node {
  background: var(--ink-default); border-color: var(--ink-default); color: var(--ink-inverse);
}
.nx-evidence__step--end .nx-evidence__kind { color: var(--brand-blue-dark); }
.nx-evidence__claim { font-size: 14px; font-weight: 600; line-height: 1.3; margin-top: 1px; }
.nx-confidence { display: flex; align-items: center; gap: var(--nx-space-12); flex-wrap: wrap; margin-top: var(--nx-space-12); }
.nx-confidence__track { display: flex; gap: var(--space-xxs); max-width: 120px; flex: none; }
.nx-confidence__seg { height: 6px; width: 24px; border-radius: var(--radius-xss); background: var(--bg-gray); }
.nx-confidence--high .nx-confidence__seg.on { background: var(--confidence-high); }
.nx-confidence--medium .nx-confidence__seg.on { background: var(--confidence-medium); }
.nx-confidence--low .nx-confidence__seg.on { background: var(--confidence-low); }
.nx-evidence__wrong { color: var(--brand-blue-dark); font-size: 12px; text-decoration: none; margin-left: auto; }

/* ---------- HandoffTrail + AutonomyMeter (moment 07, "the handoff") ---------- */
.nx-handoff { display: grid; gap: var(--space-s); }
.nx-handoff__lane { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xs); position: relative; }
.nx-handoff__step {
  background: var(--bg-default); border: 1px solid var(--line-border-standard); border-radius: var(--radius-s);
  padding: var(--nx-space-12); display: grid; gap: var(--space-xxs); align-content: start;
}
.nx-handoff__step--human { background: var(--autonomy-yours-weak); border-color: transparent; }
.nx-handoff__step--done { background: var(--autonomy-autonomous-weak); border-color: transparent; }
.nx-handoff__who { font-family: var(--font-sans); font-weight: 600; font-size: 12px; letter-spacing: 0; color: var(--ink-secondary); }
.nx-handoff__what { font-weight: 600; font-size: 14px; }
.nx-handoff__when { font-size: 12px; color: var(--ink-secondary); }

/* the rule the trail is running under, said once below it */
.nx-handoff__autonomy { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-xs); font-size: 12px; }
.nx-autonomy { display: grid; gap: var(--space-xs); }
.nx-autonomy__row { display: flex; align-items: center; gap: var(--nx-space-12); flex-wrap: wrap; }
.nx-autonomy__rule { flex: 1 1 150px; font-size: 14px; }
.nx-autonomy__track { width: 120px; height: 6px; border-radius: var(--radius-xss); background: var(--bg-gray); overflow: hidden; }
.nx-autonomy__fill { display: block; height: 100%; background: var(--autonomy-learning); border-radius: var(--radius-xss); }
.nx-autonomy__fill--done { background: var(--autonomy-autonomous); }
.nx-autonomy__fill--none { background: var(--autonomy-yours); }

/* ---------- UrgencyClock (the clock that drains) ---------- */
.nx-clock { display: grid; gap: var(--space-xs); }
.nx-clock__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--nx-space-12); }
.nx-clock__left { font-family: var(--font-mono); font-size: 24px; font-weight: 600; letter-spacing: 0; line-height: 1.3; }
.nx-clock__cost { font-size: 12px; color: var(--ink-secondary); text-align: right; }
.nx-clock__track { height: 8px; border-radius: var(--radius-pill); background: var(--bg-gray); overflow: hidden; }
.nx-clock__fill { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--urgency-watch); transition: width 600ms linear; }
.nx-clock__foot { display: flex; justify-content: space-between; gap: var(--nx-space-12); font-size: 12px; color: var(--ink-secondary); }
.nx-clock--critical .nx-clock__left { color: var(--urgency-critical); }
.nx-clock--critical .nx-clock__fill { background: var(--urgency-critical); }
.nx-clock--soon .nx-clock__fill { background: var(--urgency-soon); }
.nx-clock--calm .nx-clock__fill { background: var(--urgency-calm); }
.nx-clock--stopped .nx-clock__fill { background: var(--autonomy-autonomous); }
.nx-clock--stopped .nx-clock__left { color: var(--ink-default); text-decoration: line-through; text-decoration-color: var(--ink-secondary); }

/* ---------- BoardLanes (the pipeline) ---------- */
.nx-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(190px, 1fr); gap: var(--nx-space-12); align-items: start; overflow-x: auto; padding-bottom: var(--space-xs); }
.nx-board__lane { background: transparent; border: 0; border-radius: 0; padding: 0; display: grid; gap: var(--space-xs); align-content: start; }

/* A tinted heading groups the lane without placing another box around its cards. */
.nx-board__head { display: flex; align-items: baseline; justify-content: flex-start; gap: var(--space-xs);
  border-bottom: 1px solid var(--line-border-standard); padding: var(--space-xs) 0; }
.nx-board__lane--hot .nx-board__head { border-bottom-color: var(--line-border-strong); color: var(--ink-default); }
.nx-board__lane--hot .nx-board__count,
.nx-board__lane--hot .nx-board__narrow { color: var(--ink-secondary); }
.nx-board__lane--hot .nx-board__narrow:hover { background: var(--bg-default); color: var(--brand-blue-dark); }
.nx-board__lane--hot .nx-board__narrow:focus-visible { outline-color: var(--brand-blue-dark); }
.nx-board__count { font-family: var(--font-mono); font-weight: 300; font-size: 12px; color: var(--ink-secondary); }

/* Narrow one lane, from its own header. Quiet until you need it. */
.nx-board__narrow {
  display: inline-flex; align-items: center; gap: var(--gap-inline);
  appearance: none; border: 0; background: transparent; cursor: pointer;
  border-radius: var(--radius-xss); padding: 2px 5px;
  font-family: var(--font-sans); font-weight: 600; font-size: 12px; color: var(--ink-secondary);
}
.nx-board__narrow:hover { background: var(--bg-gray); color: var(--ink-default); }
.nx-board__narrow[aria-expanded="true"],
.nx-board__narrow:has(span) { color: var(--brand-blue-dark); }
.nx-board__narrow:focus-visible { outline: 2px solid var(--brand-blue-dark); outline-offset: 1px; }
.nx-board__card { background: var(--bg-default); border: 1px solid var(--line-border-standard); border-radius: var(--radius-s); padding: var(--nx-space-12); display: grid; gap: var(--space-xxs); }
.nx-board__card[data-urgency="critical"] { border-color: var(--urgency-critical-weak); }
.nx-board__title { font-weight: 600; font-size: 14px; line-height: 1.3; }
.nx-board__meta { display: flex; gap: var(--space-xs); align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--ink-secondary); }
.nx-board__empty { font-size: 12px; color: var(--ink-secondary); padding: var(--nx-space-12) 0; text-align: center; }

/* ---------- StageTrail (where a record is, in the operation's own steps) ------
   Opening a shipment should not show a form. The steps are always all there,
   including the ones it has not reached: that is the difference between a trail
   and a progress bar, and it is what lets an operator see what is coming. */
/* The story layout only ever opens over something, so it brings the drawer
   surface with it — the frame adds none. The dots layout sits inside a card and
   brings nothing. */
.nx-stage { display: grid; gap: var(--nx-space-12);
            background: var(--bg-default); border: 1px solid var(--line-border-standard);
            border-radius: var(--radius-m); padding: var(--space-m); box-shadow: var(--elevation-003); }
.nx-stage--dots { background: none; border: 0; border-radius: 0; padding: 0; box-shadow: none; }
.nx-stage__now { margin: 0; font-size: 12px; color: var(--ink-secondary); }
.nx-stage__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }

/* The step wraps by how much room it has, not by how wide the window is: this
   trail opens in a 560px drawer inside a 1440px page, and a media query cannot
   see that. */
.nx-stage__step {
  display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: var(--nx-space-12);
  padding: var(--nx-space-12) 0; border-bottom: 1px solid var(--bg-gray-weak);
}
.nx-stage__body { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-xxs) var(--nx-space-12); }
.nx-stage__step:last-child { border-bottom: 0; }
.nx-stage__mark { font-size: 12px; line-height: 1.3; color: var(--ink-secondary); text-align: center; }
.nx-stage__step[data-state="done"] .nx-stage__mark { color: var(--ink-secondary); }
.nx-stage__step[data-state="now"] .nx-stage__mark { color: var(--brand-blue-dark); }
.nx-stage__step[data-state="waiting"] .nx-stage__mark { color: var(--status-attention); }
.nx-stage__label { font-size: 14px; font-weight: 600; flex: 0 0 auto; min-width: 190px; }
.nx-stage__step[data-state="ahead"] .nx-stage__label { color: var(--ink-secondary); font-weight: 400; }
.nx-stage__said { font-size: 12px; color: var(--ink-secondary); line-height: 1.3; flex: 1 1 240px; }
.nx-stage__step .nx-ref { margin-left: auto; }
.nx-stage__step[data-state="now"] .nx-stage__said { color: var(--ink-default); }
.nx-stage__step[data-state="waiting"] .nx-stage__said { color: var(--status-attention); }

/* The same steps where there is only room for position. */
/* the gap between dots is the size of a dot, so the row reads as a measure */
.nx-stage--dots { display: flex; align-items: center; gap: 5px; }
.nx-stage__dot { width: 7px; height: 7px; border-radius: var(--radius-pill); flex: none;
                 box-shadow: inset 0 0 0 1px var(--ink-secondary); }
.nx-stage__dot[data-state="done"] { background: var(--ink-secondary); box-shadow: none; }
.nx-stage__dot[data-state="now"] { background: var(--brand-blue-dark); box-shadow: none; }
.nx-stage__dot[data-state="waiting"] { background: var(--status-attention); box-shadow: none; }
.nx-stage__note { margin-left: var(--space-xs); font-size: 12px; color: var(--ink-secondary); }

/* ---------- DecisionQueue (the wrapper and the order) ----------
   One container, a row per decision. */
.nx-queue { background: var(--bg-default); box-shadow: var(--elevation-001); border-radius: var(--radius-m); }
.nx-queue__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-s); align-items: start; padding: var(--space-m); border-top: 1px solid var(--line-border-standard); }
.nx-queue > :first-child { border-top: 0; }
.nx-queue__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-xs); }
.nx-queue__title { margin: 0 var(--space-xs) 0 0; font-size: 16px; font-weight: 600; line-height: 1.3; }
.nx-queue__what { margin: var(--space-xxs) 0 0; font-size: 14px; color: var(--ink-secondary); }
.nx-queue__actions { margin-top: var(--space-s); display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.nx-queue__split { margin: 0; padding: var(--space-xs) var(--space-m); border-top: 1px solid var(--line-border-standard); }
.nx-queue__more { margin: 0; padding: var(--space-xs) var(--space-m) var(--space-s); font-size: 12px; color: var(--ink-secondary); }
.nx-queue__empty { margin: 0; padding: var(--space-m) 0; text-align: center;
                   font-size: 12px; color: var(--ink-secondary); }

/* ---------- WorkInFlight (what the agent has in its hands) ----------
   The pipeline is a row of steps and the item's position in it is the whole
   message: you read where it is, not four sentences. The step it is on is the
   only filled thing on the card, which is one accent per surface applied to a
   component whose entire job is to say "here". A finished step recedes to a tick
   — green is spent on a met goal and nowhere else, so three cards with two done
   steps each do not turn the front of the case into a scoreboard. */
.nx-flight { display: grid; gap: var(--space-xs); }
.nx-flight__item {
  background: var(--bg-default); box-shadow: var(--elevation-001);
  border-radius: var(--radius-s); padding: var(--nx-space-12) var(--space-s);
  display: grid; gap: var(--nx-space-12);
}
.nx-flight__head { display: flex; align-items: center; gap: var(--nx-space-12); }
.nx-flight__what { display: grid; gap: 1px; min-width: 0; flex: 1; }
.nx-flight__title { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.3;
                    display: flex; align-items: center; gap: var(--gap-inline); }
.nx-flight__clock { font-size: 14px; font-weight: 600; color: var(--ink-secondary);
                    font-variant-numeric: tabular-nums; flex: none; }
.nx-flight__stages { display: flex; flex-wrap: wrap; gap: var(--gap-inline); margin: 0; padding: 0; list-style: none; }

/* What is in hand past the third item. A disclosure, not a button: it is one more
   row of the same list, it opens in place, and it needs no script -- which is why
   it still works wherever this block is rendered. It stays grey and goes navy
   under the pointer: the accent is spent on the work, never on the control that
   reveals more of it. Two words, because the row is a hinge, not a sentence. */
.nx-flight__more { display: grid; gap: var(--space-xs); }
.nx-flight__more > summary {
  list-style: none; cursor: pointer; width: max-content;
  display: inline-flex; align-items: center; gap: var(--gap-inline);
  font-size: 12px; font-weight: 600; color: var(--ink-secondary); padding: 2px 0;
}
.nx-flight__more > summary::-webkit-details-marker { display: none; }
.nx-flight__more > summary::after {
  content: ""; width: 6px; height: 6px; margin-left: 2px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}
.nx-flight__more[open] > summary::after { transform: rotate(-135deg) translateY(-1px); }
.nx-flight__more > summary:hover { color: var(--ink-default); }
.nx-flight__more--open { display: none; }
.nx-flight__more[open] .nx-flight__more--shut { display: none; }
.nx-flight__more[open] .nx-flight__more--open { display: inline; }
.nx-flight__stage {
  display: inline-flex; align-items: center; gap: var(--gap-inline);
  border-radius: var(--radius-pill); padding: 4px 11px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
  color: var(--ink-secondary); box-shadow: inset 0 0 0 1px var(--line-border-standard);
}
.nx-flight__stage--done { color: var(--ink-secondary); box-shadow: none; }
.nx-flight__stage--now { color: var(--ink-inverse); background: var(--ink-default); box-shadow: none; }
.nx-flight__stage--stuck { color: var(--status-attention); background: var(--status-attention-weak); box-shadow: none; }
.nx-flight__tick { width: 9px; height: 9px; flex: none; position: relative; }
.nx-flight__tick::after {
  content: ""; position: absolute; left: 2px; top: 0; width: 4px; height: 8px;
  border: solid currentColor; border-width: 0 1.6px 1.6px 0; transform: rotate(42deg);
}
.nx-flight__blocked { margin: 0; font-size: 12px; line-height: 1.3; color: var(--status-attention); }
.nx-flight__empty { margin: 0; padding: var(--space-s) 0; text-align: center;
                    font-size: 12px; color: var(--ink-secondary); }

/* ---------- GoalTrack (what the case is closing) ----------
   The number that matters is what is LEFT, not the percentage: "11 to go" is
   something you can act on, "72%" is a report. The mark on the track is where
   the count would have to be today to finish on time, so being ahead of it is
   visible without a single colour. Green appears once, when a goal is met,
   which is what keeps it worth seeing. */
.nx-goals { display: grid; gap: var(--space-m); }
.nx-goal { display: grid; gap: var(--space-xs); }
.nx-goal__head { display: flex; align-items: baseline; gap: var(--space-xs); flex-wrap: wrap; }
.nx-goal__left { font-size: 18px; font-weight: 600; line-height: 1.3; font-variant-numeric: tabular-nums; }
.nx-goal__togo { font-size: 12px; font-weight: 600; color: var(--ink-secondary); }
.nx-goal__label { font-size: 12px; color: var(--ink-secondary); }
.nx-goal__count { margin-left: auto; font-family: var(--font-mono); font-weight: 300; font-size: 12px;
                  color: var(--ink-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.nx-goal__track { position: relative; height: 6px; border-radius: var(--radius-pill); background: var(--bg-gray); }
.nx-goal__fill { height: 100%; border-radius: var(--radius-pill); background: var(--ink-default);
                 transition: width var(--duration-settle) var(--ease-out); }
.nx-goal__mark { position: absolute; top: -4px; width: 2px; height: 14px; border-radius: 1px;
                 background: var(--ink-secondary); transform: translateX(-1px); }
.nx-goal__foot { display: flex; align-items: baseline; gap: var(--space-xs); flex-wrap: wrap;
                 font-size: 12px; color: var(--ink-secondary); }
.nx-goal__pace { color: var(--ink-secondary); }
.nx-goal__last { margin-left: auto; }

/* A met goal. The check and the lime are the still counterparts: everything
   below them is the moment it happened, and nothing is lost without it. */
.nx-goal--done .nx-goal__fill { background: var(--confidence-high); }
.nx-goal--done .nx-goal__left { display: inline-flex; align-items: center; gap: var(--gap-inline);
                                font-size: 14px; font-weight: 600; color: var(--ink-default); }
.nx-goal--done .nx-goal__label { color: var(--ink-default); font-weight: 600; }
.nx-goal__check { width: 16px; height: 16px; border-radius: var(--radius-pill); flex: none;
                  background: var(--confidence-high); position: relative; }
.nx-goal__check::after { content: ""; position: absolute; left: 5px; top: 3px;
                         width: 4px; height: 8px; border: solid var(--brand-navy-blue);
                         border-width: 0 2px 2px 0; transform: rotate(42deg); }
.nx-goal__early { color: var(--ink-positive); font-weight: 600; }

/* The landing. A goal crosses its target once, so this is allowed to be the
   loudest thing on the screen for 900ms and then never again. */
.nx-goal--landed .nx-goal__track { animation: nx-goal-ring var(--duration-notice) var(--ease-out) both; }
.nx-goal--landed .nx-goal__fill { position: relative; overflow: hidden; }
.nx-goal--landed .nx-goal__fill::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, .85) 50%, transparent 100%);
  animation: nx-goal-sweep var(--duration-notice) var(--ease-out) both;
}
.nx-goal--landed .nx-goal__check { animation: nx-goal-pop var(--duration-settle) var(--ease-out) both; }

@keyframes nx-goal-ring {
  0%   { box-shadow: 0 0 0 0 var(--confidence-high); }
  60%  { box-shadow: 0 0 0 7px rgba(170, 199, 42, 0); }
  100% { box-shadow: 0 0 0 0 rgba(170, 199, 42, 0); }
}

@keyframes nx-goal-sweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

@keyframes nx-goal-pop { 0% { transform: scale(.3); } 62% { transform: scale(1); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .nx-goal--landed .nx-goal__track, .nx-goal--landed .nx-goal__fill::after,
  .nx-goal--landed .nx-goal__check { animation: none; }
  .nx-goal--landed .nx-goal__fill::after { display: none; }
}

/* Row layout. Same elements as the stack — .nx-goal, .nx-goal__left,
   .nx-goal__track, .nx-goal__foot. Only the wrapper changes. */
.nx-goals--row { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--space-m); align-items: start;
                 padding-bottom: var(--space-s); border-bottom: 1px solid var(--line-border-standard); }
.nx-goals--row .nx-goal__head { gap: var(--gap-inline); }
.nx-goals--row .nx-goal__label { flex-basis: 100%; }
.nx-goals--row .nx-goal__count { margin-left: 0; align-self: baseline; }
@media (max-width: 900px) {
  .nx-goals--row { grid-auto-flow: row; gap: var(--space-s); }
}
@media (prefers-reduced-motion: reduce) {
  .nx-goal__fill { transition: none; }
}

/* ---------- MatchPanel (two sides and why they fit) ---------- */
.nx-match { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--nx-space-12); align-items: stretch; }
.nx-match__side { background: var(--bg-default); border: 1px solid var(--line-border-standard); border-radius: var(--radius-s); padding: var(--space-s); display: grid; gap: var(--space-xxs); align-content: start; }
.nx-match__side--chosen { border-color: var(--brand-blue-dark); box-shadow: 0 0 0 3px var(--face-surface); }
.nx-match__name { font-weight: 600; font-size: 14px; line-height: 1.3; }
.nx-match__fact { font-size: 12px; color: var(--ink-secondary); }
.nx-match__link { display: grid; place-items: center; align-content: center; gap: var(--gap-inline); min-width: 96px; }
.nx-match__score { font-family: var(--font-mono); font-size: 18px; font-weight: 600; color: var(--brand-blue-dark); }
.nx-match__why { display: grid; gap: var(--gap-inline); margin-top: var(--nx-space-12); }
.nx-match__reason { display: flex; gap: var(--space-xs); font-size: 12px; align-items: baseline; }
.nx-match__reason::before { content: "+"; font-family: var(--font-mono); color: var(--ink-secondary); }
.nx-match__reason--against::before { content: "−"; color: var(--urgency-soon); }
.nx-match__reason--against { color: var(--ink-secondary); }

/* ---------- ProjectionChart (what happens if nobody acts) ---------- */
.nx-projection { display: grid; gap: var(--nx-space-12); }
.nx-projection__chart { position: relative; background: var(--bg-default); border: 1px solid var(--line-border-standard); border-radius: var(--radius-s); padding: var(--space-s); }
.nx-projection__legend { display: flex; gap: var(--space-s); flex-wrap: wrap; font-size: 12px; color: var(--ink-secondary); }
.nx-projection__key { display: inline-flex; align-items: center; gap: var(--gap-inline); }
.nx-projection__swatch { width: 16px; height: 3px; border-radius: 2px; background: var(--brand-blue-dark); }
.nx-projection__swatch--projected { background: repeating-linear-gradient(90deg, var(--brand-blue-dark) 0 4px, transparent 4px 7px); }
.nx-projection__swatch--band { height: 10px; background: var(--value-estimate); opacity: .3; }
.nx-projection__swatch--risk { background: var(--urgency-critical); }
.nx-projection__callout { display: flex; gap: var(--nx-space-12); align-items: baseline; background: var(--urgency-critical-weak); border-radius: var(--radius-xs); padding: var(--nx-space-12) var(--space-s); }
.nx-projection__when { font-family: var(--font-mono); font-size: 14px; color: var(--urgency-critical); white-space: nowrap; }
.nx-projection__what { font-size: 14px; }

/* ---------- AgentRelay (the work passing hands) ---------- */
.nx-relay { display: flex; align-items: center; gap: var(--space-xs); flex-wrap: wrap; }
.nx-relay__agent { display: flex; align-items: center; gap: var(--space-xs); border: 1px solid var(--line-border-standard); border-radius: var(--radius-pill); padding: 5px 14px 5px 5px; }
.nx-relay__agent--human { background: var(--autonomy-yours-weak); border-color: transparent; }
.nx-relay__agent--active { border-color: var(--brand-blue-dark); box-shadow: 0 0 0 3px var(--face-surface); }
.nx-relay__avatar { width: 28px; height: 28px; border-radius: var(--radius-pill); background: var(--face-surface); color: var(--face-ink); display: grid; place-items: center; font-family: var(--font-sans); font-weight: 600; font-size: 12px; }
.nx-relay__agent--human .nx-relay__avatar { background: var(--brand-sand-dark); color: var(--brand-orange-dark); }
.nx-relay__body { display: grid; gap: 1px; }
.nx-relay__name { font-size: 12px; font-weight: 600; line-height: 1.3; display: flex; align-items: center; gap: var(--gap-inline); }
.nx-relay__what { font-size: 12px; color: var(--ink-secondary); line-height: 1.3; }
.nx-relay__arrow { font-family: var(--font-sans); color: var(--ink-secondary); }

/* ---------- LearnedRules (what it learned from you) ---------- */
.nx-rules { display: grid; gap: var(--space-xs); }
.nx-rule { background: var(--bg-default); border: 1px solid var(--line-border-standard); border-radius: var(--radius-s); padding: var(--nx-space-12) var(--space-s); display: grid; gap: var(--space-xxs); }
.nx-rule--proposed { border-style: dashed; }
.nx-rule__text { font-size: 14px; line-height: 1.3; }
.nx-rule__value { background: var(--autonomy-learning-weak); border-radius: var(--radius-xss); padding: 0 5px; font-family: var(--font-mono); font-size: 12px; }
.nx-rule__origin { font-size: 12px; color: var(--ink-secondary); }
.nx-rule__foot { display: flex; gap: var(--nx-space-12); align-items: center; flex-wrap: wrap; margin-top: 4px; }

/* ============================================================
   Live motion — movement is information, never decoration.
   Every animation here has a still counterpart that carries the
   same fact, so nothing is lost under prefers-reduced-motion.
   ============================================================ */

/* A region the front keeps in sync. data-stale marks a lost connection. */
.nx-live { position: relative; }
.nx-live[data-stale="true"] { opacity: .7; }
.nx-live[data-stale="true"]::after {
  content: attr(data-stale-label); position: absolute; inset: auto 0 0 0;
  font-family: var(--font-sans); font-size: 12px;
  color: var(--urgency-soon); background: var(--urgency-soon-weak); padding: 3px 8px; border-radius: var(--radius-xss);
}

/* The still counterparts. These are data, not motion: they stay until the front clears them. */[data-new="true"] { position: relative; }
[data-new="true"]::before {
  content: ""; position: absolute; left: -9px; top: 50%; transform: translateY(-50%);
  width: 5px; height: 5px; border-radius: var(--radius-pill); background: var(--brand-blue-dark);
}
[data-changed="true"] { background-color: var(--bg-mild); }

/* Arriving and leaving. */
.nx-enter { animation: nx-enter var(--duration-settle) var(--ease-out) both; }

@keyframes nx-enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.nx-leave { animation: nx-leave var(--duration-quick) var(--ease-in) both; }

@keyframes nx-leave { to { opacity: 0; transform: translateY(-4px); } }

/* Something changed in place: a brief wash. No edge accents or inset stripes. */
.nx-flash { animation: nx-flash var(--duration-notice) var(--ease-out) 1; }

@keyframes nx-flash { from { background-color: var(--urgency-watch-weak); } to { background-color: transparent; } }

/* A number replaced by another. The old one leaves upward, the new one follows it. */
.nx-tick { display: inline-block; overflow: hidden; vertical-align: bottom; }
.nx-tick__value { display: block; animation: nx-tick var(--duration-quick) var(--ease-out) both; }

@keyframes nx-tick { from { transform: translateY(70%); opacity: 0; } to { transform: none; opacity: 1; } }

/* A list filling in, oldest first. */
.nx-stream > * { animation: nx-enter var(--duration-settle) var(--ease-out) both; }
.nx-stream > *:nth-child(1) { animation-delay: 0ms; }
.nx-stream > *:nth-child(2) { animation-delay: 70ms; }
.nx-stream > *:nth-child(3) { animation-delay: 140ms; }
.nx-stream > *:nth-child(4) { animation-delay: 210ms; }
.nx-stream > *:nth-child(5) { animation-delay: 280ms; }
.nx-stream > *:nth-child(n+6) { animation-delay: 350ms; }

/* The agent is producing something we cannot show yet. Never a spinner: the shape of what is coming. */
.nx-shimmer {
  color: transparent !important; border-radius: var(--radius-xss);
  background: linear-gradient(90deg, var(--bg-gray) 25%, var(--bg-weak) 37%, var(--bg-gray) 63%);
  background-size: 400% 100%; animation: nx-shimmer 1400ms var(--ease-linear) infinite;
}

@keyframes nx-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* Preview only: loops so the catalogue shows the behaviour without a script. */
.nx-loop-drain { animation: nx-loop-drain 14s var(--ease-linear) infinite; }

@keyframes nx-loop-drain { from { width: 30%; } to { width: 0%; } }
.nx-loop-enter { animation: nx-enter var(--duration-settle) var(--ease-out) infinite alternate; animation-duration: 1800ms; }
.nx-loop-flash { animation: nx-flash 2600ms var(--ease-out) infinite; }
@media (prefers-reduced-motion: reduce) {
  .nx-enter, .nx-leave, .nx-flash, .nx-stream > *, .nx-tick__value,
  .nx-loop-drain, .nx-loop-enter, .nx-loop-flash { animation: none !important; }
  .nx-shimmer { animation: none; background: var(--bg-gray); }
}

/* ---------- BoardLanes, the real card ----------
   The lanes never fold. On a narrow screen the board scrolls sideways, because
   left to right is the flow and stacking destroys it. */
.nx-board { grid-auto-columns: minmax(232px, 1fr); overscroll-behavior-x: contain; }
.nx-board__card--quiet { background: transparent; box-shadow: none; }

/* A card the agent still has open. It is not waiting for you, so it is quieter
   than the ones that are — but it is the only card on the board that moves. */
.nx-board__card--working { background: var(--bg-mild); border-color: transparent; gap: var(--gap-inline); }
.nx-board__card--working .nx-shimmer { display: block; border-radius: 3px; }
.nx-board__doing { margin: 2px 0 4px; font-size: 12px; color: var(--ink-secondary); line-height: 1.3; }
.nx-board__card--done { border-color: transparent; background: transparent; }

/* A check type is a taxonomy, not a severity, so it reads as a label. */
.nx-board__tag {
  align-self: start; justify-self: start;
  font-family: var(--font-sans); font-weight: 600; font-size: 12px; letter-spacing: 0; color: var(--ink-secondary); background: none; padding: 0;
}

/* Monospace is for what you would copy out: an identifier, an amount. Nothing else. */
.nx-board__data { margin: 0; font-family: var(--font-sans); font-weight: 400; font-size: 12px; line-height: 1.3;
                  color: var(--ink-secondary); font-variant-numeric: tabular-nums; }
.nx-board__data--dim { font-family: var(--font-sans); font-size: 12px; color: var(--ink-secondary); }
.nx-board__read { margin: 7px 0 0; padding: var(--space-xs); border-radius: var(--radius-xss); border: 1px solid var(--line-border-standard);
                  font-size: 12px; line-height: 1.3; color: var(--ink-secondary); }
.nx-board__read b { color: var(--ink-default); font-weight: 600; }
.nx-board__stake { margin: 6px 0 0; font-family: var(--font-sans); font-weight: 400; font-size: 12px; color: var(--ink-secondary); }
.nx-board__when { margin: 4px 0 0; font-family: var(--font-sans); font-size: 12px; color: var(--ink-secondary); }
.nx-board__actions { display: flex; flex-wrap: wrap; gap: var(--gap-inline); margin-top: var(--nx-space-12); }

/* ---------- DetailPanel (what opens when you click a record) ----------
   Fixed to the right, 560px. Its actions stay at the top: the decision is the
   first thing in reach, not the reward for scrolling. */
/* The detail is a drawer: it opens over the board, so it carries the surface
   that says so — its own edge, its own padding, its own lift. */
.nx-detail { display: grid; gap: var(--space-s); align-content: start;
             background: var(--bg-default); border: 1px solid var(--line-border-standard);
             border-radius: var(--radius-m); padding: var(--space-m); box-shadow: var(--elevation-003); }
.nx-detail__refs { display: flex; gap: var(--space-xs); flex-wrap: wrap; font-family: var(--font-sans); font-weight: 400; font-size: 12px; color: var(--ink-secondary); }
.nx-detail__title { font-size: 24px; font-weight: 700; letter-spacing: 0; margin: 6px 0 0; line-height: 1.3; }
.nx-detail__verdict { font-size: 12px; line-height: 1.3; margin: 4px 0 0; color: var(--ink-secondary); }
.nx-detail__verdict b { color: var(--urgency-critical); font-weight: 600; }
.nx-detail__verdict--ok b { color: var(--confidence-high); }
.nx-detail__meta { margin: 6px 0 0; font-size: 12px; color: var(--ink-secondary); line-height: 1.3; }
.nx-detail__actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--nx-space-12);
                      padding-bottom: var(--space-s); border-bottom: 1px solid var(--line-border-standard); }
.nx-detail__section { display: grid; gap: var(--nx-space-12); }
.nx-detail__original { border: 1px solid var(--line-border-standard); border-radius: var(--radius-xs); padding: var(--nx-space-12) var(--space-s); }
.nx-excerpt {
  margin: var(--space-xs) 0 0; padding: var(--nx-space-12); border: 1px solid var(--line-border-standard); border-radius: var(--radius-xss);
  font-weight: 400; font-size: 12px; line-height: 1.3;
  white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink-secondary);
}

/* ---------- DocumentView (the source document, as it is) ---------- */
.nx-doc { border: 1px solid var(--line-border-standard); border-radius: var(--radius-xs); background: var(--bg-default); padding: var(--space-s); display: grid; gap: var(--space-s); }
.nx-doc__head { display: flex; gap: var(--nx-space-12); align-items: baseline; flex-wrap: wrap; }
.nx-doc__id { font-family: var(--font-mono); font-size: 12px; font-weight: 300; }
.nx-doc__state { font-size: 12px; color: var(--ink-secondary); }
.nx-doc__parties { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-s); }
.nx-doc__party { display: grid; gap: 2px; font-size: 12px; color: var(--ink-secondary); }
.nx-doc__party strong { font-size: 12px; color: var(--ink-default); font-weight: 600; }
.nx-doc__lines { width: 100%; border-collapse: collapse; font-size: 12px; }
.nx-doc__lines th { text-align: left; font-family: var(--font-sans); font-weight: 600; font-size: 12px; letter-spacing: 0; color: var(--ink-secondary); padding: 0 var(--nx-space-12) var(--space-xs) 0;
                    border-bottom: 1px solid var(--line-border-standard); }
.nx-doc__lines td { padding: var(--nx-space-12) var(--nx-space-12) var(--nx-space-12) 0; border-bottom: 1px solid var(--bg-gray-weak); vertical-align: top; }
.nx-doc__lines tr:last-child td { border-bottom: 0; }
.nx-doc__lines td:first-child { font-family: var(--font-mono); font-weight: 300; font-size: 12px; white-space: nowrap; color: var(--ink-secondary); }
.nx-doc__lines th.num { text-align: right; }
.nx-doc__lines td.num { text-align: right; font-family: var(--font-mono); font-weight: 300; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nx-doc__lines tr[data-disputed="true"] { background: var(--urgency-critical-weak); }
.nx-doc__priced { display: block; color: var(--ink-secondary); font-size: 12px; margin-top: 2px; }
.nx-doc__totals { display: grid; gap: var(--space-xxs); margin-left: auto; min-width: 260px; font-size: 12px; }
.nx-doc__total { display: flex; justify-content: space-between; gap: var(--space-m); color: var(--ink-secondary); }
.nx-doc__total span:last-child { font-family: var(--font-mono); font-weight: 300; font-variant-numeric: tabular-nums; color: var(--ink-default); }
.nx-doc__total--grand { border-top: 1px solid var(--line-border-strong); padding-top: 6px; margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--ink-default); }
.nx-doc__foot { font-size: 12px; color: var(--ink-secondary); }

/* ---------- ComparisonTable (where the documents disagree) ---------- */
.nx-compare { border: 1px solid var(--line-border-standard); border-radius: var(--radius-xs); overflow: hidden; }
.nx-compare__head,
.nx-compare__row { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(var(--nx-sources, 3), minmax(0, 1fr)); gap: var(--space-xs); }
.nx-compare__head { padding: 0 var(--nx-space-12) var(--space-xs); font-family: var(--font-sans); font-weight: 600; font-size: 12px; letter-spacing: 0; color: var(--ink-secondary); }
.nx-compare__row { padding: var(--nx-space-12); border-bottom: 1px solid var(--bg-gray-weak); font-size: 12px; align-items: start; }
.nx-compare__row:last-child { border-bottom: 0; }
.nx-compare__row[data-verdict="differs"] { background: var(--urgency-critical-weak); }
.nx-compare__field b { font-size: 12px; font-weight: 600; display: block; }
.nx-compare__field small { font-size: 12px; color: var(--ink-secondary); }
.nx-compare__col { display: flex; flex-direction: column; gap: 2px; }
.nx-compare__value { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--ink-default); overflow-wrap: anywhere; }
.nx-compare__value--missing { color: var(--ink-secondary); }
.nx-compare__mark { font-size: 12px; }
.nx-compare__mark--agrees { color: var(--ink-secondary); }
.nx-compare__note { grid-column: 1 / -1; margin-top: 4px; font-size: 12px; color: var(--urgency-critical); }

/* like the dots row: the gap is the size of the dot that precedes it */
.nx-state[data-code="cancelled"],
.nx-state[data-code="done"]::before,
.nx-state[data-code="done"],
.nx-state[data-code="neutral"],
.nx-state[data-code="origin"],

/* ---------- CalendarView (when things land) ---------- */
.nx-cal { display: grid; gap: var(--nx-space-12); }
.nx-cal__head { display: flex; align-items: baseline; gap: var(--nx-space-12); flex-wrap: wrap; }
.nx-cal__month { font-size: 14px; font-weight: 600; }
.nx-cal__legend { margin-left: auto; display: flex; gap: var(--nx-space-12); font-size: 12px; color: var(--ink-secondary); }
.nx-cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px;
                background: var(--line-border-standard); border: 1px solid var(--line-border-standard);
                border-radius: var(--radius-xs); overflow: hidden; }
.nx-cal__dow { border-bottom: 1px solid var(--line-border-standard); padding: 6px 8px; font-family: var(--font-sans); font-weight: 600; font-size: 12px; color: var(--ink-secondary); }
.nx-cal__day { background: var(--bg-default); min-height: 104px; padding: 6px 7px; display: grid;
               gap: var(--space-xxs); align-content: start; }
.nx-cal__day--outside { color: var(--ink-disabled); }
.nx-cal__day--today .nx-cal__date { background: var(--bg-mild); border-radius: var(--radius-xss); padding: 2px 4px; justify-self: start; }
.nx-cal__date { font-family: var(--font-mono); font-weight: 300; font-size: 12px; color: var(--ink-secondary); }
.nx-cal__day--today .nx-cal__date { color: var(--brand-blue-dark); font-weight: 600; }
.nx-cal__item {
  display: grid; gap: 1px; border-radius: var(--radius-xss); padding: 4px 6px; text-decoration: none;
  border: 1px solid var(--line-border-standard);
}
.nx-cal__item[data-urgency="critical"] { background: var(--urgency-critical-weak); }
.nx-cal__item[data-urgency="soon"] { background: var(--urgency-soon-weak); }
.nx-cal__item[data-urgency="watch"] { background: var(--bg-mild); }
.nx-cal__item:hover { outline: 1px solid var(--brand-blue-dark); }
.nx-cal__what { font-size: 12px; font-weight: 600; line-height: 1.3; color: var(--ink-default); }
.nx-cal__ref { font-family: var(--font-mono); font-weight: 300; font-size: 12px; color: var(--ink-secondary); }
.nx-cal__money { font-family: var(--font-mono); font-weight: 300; font-size: 12px; color: var(--ink-secondary); }
.nx-cal__more { font-size: 12px; color: var(--brand-blue-dark); text-decoration: none; }

/* ---------- Links that are not sentences ----------
   A control or a surface never underlines, whatever element it is made of.
   Prose keeps its underline: that is how a reader tells a link from a button.
   This rule exists because every one of these has shipped underlined once. */
.nx-board__card,
.nx-cal__item,
.nx-cal__more,
.nx-ref,
.nx-evidence__source,
.nx-feed__ref,
.nx-evidence__wrong {
  text-decoration: none;
}
.nx-ref { font-family: var(--font-mono); font-weight: 300; font-variant-numeric: tabular-nums; font-size: 12px; color: var(--ink-secondary); }
.nx-ref:hover { color: var(--brand-blue-dark); }

/* A link takes the ink of whatever it sits in; only .nx-btn--link looks like one. */
.nx-cal__item,
.nx-cal__more,
.nx-board__card { color: inherit; }


/* ---------- AgentChat (a Sirius drawer holding a Sirius conversation, scoped to one record) ---------- */
.nx-chatdrawer { position: relative; gap: var(--space-m); border-radius: var(--radius-xl) 0 0 var(--radius-xl); overflow: visible; }
.nx-chatdrawer__log { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.nx-chatdrawer .nv-chat { gap: var(--space-m); }
.nx-chatdrawer .nv-btn-pair { margin-top: var(--space-s); }
/* The left edge narrows or widens the chat. */
.nx-chatdrawer__resize { position: absolute; inset: 0 auto 0 -6px; width: 12px; cursor: col-resize; touch-action: none; display: flex; align-items: center; justify-content: center; }
.nx-chatdrawer__resize::before { content: ""; width: 4px; height: 32px; border-radius: var(--radius-pill); background: var(--bg-gray); }
.nx-chatdrawer__resize:hover::before, .nx-chatdrawer__resize:active::before { background: var(--ink-secondary); }

/* ---------- Talk to the agent (the one control that opens the chat) ----------
   Identical wherever it appears: the header, a card, the detail panel. A Sirius secondary button with the
   agent's portrait inside it, so the button is a person and not a feature, and the live dot while it works. */
.nv-btn.nx-askagent { border-radius: var(--radius-pill); padding-inline: 3px var(--nx-space-12); gap: var(--gap-inline); }
.nx-askagent .nv-avatar { width: 24px; height: 24px; font-size: 12px; flex: none; }
.nx-askagent .nx-dot { margin-left: -2px; }
.nx-askagent:hover .nv-avatar { background: var(--brand-vibrant-blue); color: var(--brand-white); }

/* ---------- CaseScreen (arrangement only: a page made of Sirius and agentic parts) ---------- */
.nx-screen { display: flex; width: 1280px; border: 1px solid var(--line-border-standard); background: var(--bg-default); }
.nx-screen__main { flex: 1 1 auto; min-width: 0; padding: var(--space-m) var(--space-l) var(--space-xl); display: flex; flex-direction: column; gap: var(--space-m); }
.nx-agenthead { display: flex; align-items: flex-start; gap: var(--space-s); }
/* The avatar is centred on the whole heading, title and sentence together. The header's own padding is dropped. */
.nx-agenthead { align-items: center; }
.nx-agenthead .nv-page-header { flex: 1 1 auto; min-width: 0; padding: 0; }
.nx-section__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-s); }
.nx-section__head h2 { margin: 0; }
.nx-screen__kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-s); padding-bottom: var(--space-xs); }
/* Sirius draws the tile with a hairline. On this page every resting card is Elevation-001, so the tile follows. */
.nx-screen__kpis .nv-kpi { border: 0; box-shadow: var(--elevation-001); }
.nx-screen__bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-s); }
.nx-screen__table { overflow-x: auto; }
.nx-queue__more-btn { align-self: start; }
.nx-screen > .nv-navbar { align-self: stretch; }

.nx-screen__after { margin: var(--space-s) 0 var(--space-xs); }
/* The wire: what the back end sent. Not product UI; it explains why the screen above moves. */
.nx-wire { margin-top: var(--space-m); background: var(--bg-inverse); color: var(--ink-inverse); border-radius: var(--radius-m); padding: var(--space-m); }
.nx-wire__title { margin: 0; font-size: 14px; font-weight: 600; }
.nx-wire__lead { margin: var(--space-xxs) 0 var(--space-s); font-size: 12px; color: var(--ink-inverse-weak); }
.nx-wire__patch { border-top: 1px solid rgb(255 255 255 / 0.12); padding: var(--space-xs) 0; }
.nx-wire__head { display: flex; align-items: center; gap: var(--space-xs); font-size: 12px; color: var(--ink-inverse-weak); }
.nx-wire__op { padding: 1px var(--space-xs); border-radius: var(--radius-pill); font-weight: 600; color: var(--ink-inverse); background: var(--brand-vibrant-blue); }
.nx-wire__op[data-op="insert"] { background: var(--brand-green-dark); color: var(--brand-navy-blue); }
.nx-wire__op[data-op="remove"] { background: var(--brand-orange-dark); }
.nx-wire pre { margin: var(--space-xxs) 0 0; padding: 0; border: 0; border-radius: 0; background: transparent; overflow: visible; font-family: var(--font-mono); font-weight: 300; font-size: 12px; line-height: 1.3; white-space: pre-wrap; color: var(--ink-inverse); }

/* ---------- AgentVoice (the agent speaking, in the first person) ---------- */
.nx-voice { display: grid; gap: var(--space-xs); padding: var(--space-m); border-radius: var(--radius-m); background: var(--bg-inverse); color: var(--ink-inverse); }
.nx-voice__head { display: flex; align-items: center; gap: var(--space-xs); }
.nx-voice__who { font-size: 12px; font-weight: 600; color: var(--ink-inverse-weak); }
.nx-voice__text { margin: 0; font-size: 14px; line-height: 1.3; }
.nx-voice__act { margin-top: var(--space-xxs); display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.nx-voice .nv-chip-intent { background: rgb(255 255 255 / 0.12); color: var(--live-working-glow); }
.nx-voice .nx-dot { background: var(--live-working-glow); }