/* Generated from components/*/style.css by scripts/build-bundle.mjs. Do not edit. */

/* Accordion */
/* Accordion — Sirius (Figma 684:453): header that expands a list of rows */
.nv-accordion {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  background: var(--bg-gray-weak);
  border-radius: var(--radius-m);
  font-family: var(--font-sans);
  color: var(--ink-default);
}

/* _accordion-header (681:243) */
.nv-accordion__header {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px; /* untokenized */
  width: 100%;
  margin: 0;
  padding: var(--space-s) 20px; /* 20px untokenized */
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.nv-accordion__header:focus-visible {
  outline: none;
}
.nv-accordion__title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
}
.nv-accordion__title-group {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  min-width: 0;
}
.nv-accordion__dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink-accent-hover);
}
.nv-accordion__title {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}
.nv-accordion__count {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xxs);
  padding: var(--space-xxs) 10px; /* 10px untokenized */
  background: var(--ink-inverse);
  border-radius: var(--radius-xss);
  font-size: 12px;
  line-height: 1.3;
  white-space: nowrap;
}
.nv-accordion__count-num {
  font-family: var(--font-mono);
  font-weight: 300;
  color: var(--ink-accent-hover);
}
.nv-accordion__count-label {
  font-weight: 600;
  color: var(--ink-secondary);
}
.nv-accordion__chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: #121b4a; /* untokenized: Figma icon fill */
  transition: transform 150ms ease;
}
.nv-accordion__header[aria-expanded="false"] .nv-accordion__chevron {
  transform: rotate(180deg);
}
.nv-accordion__description {
  font-size: 14px;
  line-height: 1.3;
  color: var(--ink-secondary);
}

/* Content: InnerDivider + RowList */
.nv-accordion__panel {
  border-top: 1px solid var(--line-border-standard);
  padding: var(--space-xxs) 20px var(--space-xs);
}
.nv-accordion__panel[hidden] {
  display: none;
}
.nv-accordion__rows {
  margin: 0;
  padding: 0;
  list-style: none;
}
.nv-accordion__rows > li + li {
  border-top: 1px solid var(--line-border-standard);
}

/* _accordion-row (681:265) */
.nv-accordion-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  padding: 12px 0; /* untokenized */
  border-radius: var(--radius-xs);
}
.nv-accordion-row:hover,
.nv-accordion-row--hover {
  background: var(--bg-weak);
}
.nv-accordion-row__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-xxs);
  min-width: 0;
}
.nv-accordion-row__title {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink-default);
}
.nv-accordion-row__details {
  display: flex;
  align-items: center;
  gap: 12px; /* untokenized */
  font-size: 14px;
  line-height: 1.3;
  color: var(--ink-secondary);
  white-space: nowrap;
}
.nv-accordion-row__badge {
  padding: 3px var(--space-xs); /* 3px untokenized */
  background: var(--bg-warning-weak);
  border-radius: var(--radius-xss);
  font-weight: 600;
  color: var(--ink-warning);
}

/* AgentChat */
/* AgentChat — the Ask Nauta conversation (Figma page "Ask Nauta" 4267:2, home 6:343).
   Only what is new to the feature lives here. Buttons, table, chips, choice controls,
   dividers, file badges and text fields come from their own components.
   Blocks:
     .nv-chat              conversation column (message turns)
     .nv-chat-composer     Ask Nauta/Input (20:4801)
     .nv-chat-option       Ask Nauta/Option (4404:33)
     .nv-chat-suggestions  Ask Nauta/Suggested prompts (4407:26)
     .nv-chat-picker       Ask Nauta/Picker (4404:34)
     .nv-chat-answers      Ask Nauta/Answered questions (4938:418)
     .nv-chat-dropzone     Ask Nauta/Dropzone overlay (2716:54)
     .nv-chat-widget       Ask Nauta/Widget/* (916:5183, 916:4851)
     .nv-chat-quick        home "quick questions" card (6:928) */

/* ---------- Conversation column ---------- */

.nv-chat {
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
  font-family: var(--font-sans);
  color: var(--ink-default);
}

.nv-chat__turn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-s);
  max-width: 1040px;
}

.nv-chat__turn--user {
  align-self: flex-end;
  align-items: stretch;
  gap: var(--space-xs);
  max-width: 640px;
}

.nv-chat__text {
  margin: 0;
  font-size: 16px;
  line-height: 1.3;
}

/* Sender=Client: the only filled bubble */
.nv-chat__bubble {
  margin: 0;
  padding: var(--space-xs) var(--space-s);
  border-radius: var(--radius-xs);
  background: var(--bg-mild);
  font-size: 16px;
  line-height: 1.3;
}

/* Sender=Ask Nauta, Type=Only text / Download: no surface */
.nv-chat__answer {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  padding: var(--space-xs) 0;
}

.nv-chat__answer-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
}

/* Answer content lists */
.nv-chat__list {
  margin: 0;
  padding-left: var(--space-m);
  font-size: 16px;
  line-height: 1.3;
}

/* Type=Fallback */
.nv-chat__fallback {
  display: flex;
  gap: var(--space-xs);
  align-items: flex-start;
  max-width: 640px;
  padding: var(--space-xs) var(--space-s);
  border-radius: var(--radius-xs);
  background: var(--bg-gray-weak);
  font-size: 16px;
  line-height: 1.3;
}

.nv-chat__fallback-icon {
  flex: none;
  width: 20px;
  height: 20px;
  color: #cf3838; /* Untokenized: error_outline fill in Figma */
}

.nv-chat__fallback p {
  margin: 0;
}

/* Footer: time · copy · feedback */
.nv-chat__meta {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: 12px;
  line-height: 1.3;
  color: var(--ink-secondary);
}

.nv-chat__turn--user .nv-chat__meta {
  justify-content: flex-end;
}

.nv-chat__meta-actions {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.nv-chat__icon-btn {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-xss);
  background: none;
  color: var(--ink-weak);
  cursor: pointer;
}

.nv-chat__icon-btn .nv-icon {
  display: block;
}

.nv-chat__icon-btn:focus-visible,
.nv-chat__download:focus-visible,
.nv-chat-option:focus-visible,
.nv-chat-option__trailing:focus-visible,
.nv-chat-composer__action:focus-visible,
.nv-chat-quick__question:focus-visible,
.nv-chat-widget__add:focus-visible {
  outline: none;
}

/* Table answers: the delay-risk status dot (Sirius status-indicator 36:1697) */
.nv-chat__status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}

.nv-chat__status::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 2px; /* Untokenized */
  background: var(--bg-error);
}

/* Type=Download: download card */
.nv-chat__download {
  display: inline-flex;
  align-items: center;
  gap: 12px; /* Untokenized */
  padding: 12px var(--space-s); /* 12 untokenized */
  border: 1px solid var(--line-border-standard);
  border-radius: var(--radius-s);
  background: var(--ink-inverse);
  color: var(--ink-action);
  text-decoration: none;
}

.nv-chat__download .nv-filetype {
  height: 32px;
}

.nv-chat__file {
  display: flex;
  flex-direction: column;
  gap: 2px; /* Untokenized */
  white-space: nowrap;
}

.nv-chat__file-name {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}

.nv-chat__file-meta {
  font-size: 12px;
  line-height: 1.3;
  color: var(--ink-secondary);
}

.nv-chat__download .nv-icon {
  flex: none;
}

/* ---------- Composer: Ask Nauta/Input ---------- */

.nv-chat-composer {
  display: flex;
  flex-direction: column;
  gap: var(--space-xxs);
  width: 100%;
  font-family: var(--font-sans);
  color: var(--ink-default);
}

.nv-chat-composer__label {
  font-size: 12px;
  line-height: 1.3;
}

.nv-chat-composer__field {
  --nv-chat-stroke: linear-gradient(255deg, rgb(77 113 221 / 0.1) 0%, rgb(242 244 255 / 0.1) 100%); /* Untokenized */
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-xxs);
  box-sizing: border-box;
  min-height: 128px;
  padding: var(--space-m) var(--space-m) 64px;
  border: 4px solid transparent;
  border-radius: var(--radius-l);
  background:
    linear-gradient(var(--bg-default), var(--bg-default)) padding-box,
    var(--nv-chat-stroke) border-box;
  box-shadow: var(--elevation-002);
}

/* state=focused */
.nv-chat-composer__field:focus-within,
.nv-chat-composer--focused .nv-chat-composer__field {
  --nv-chat-stroke: linear-gradient(115deg, rgb(242 244 255 / 0.2) 0%, rgb(77 113 221 / 0.2) 48.7%, rgb(58 85 174 / 0.2) 67.9%, rgb(8 14 38 / 0.2) 100%); /* Untokenized */
}

/* state=error */
.nv-chat-composer--error .nv-chat-composer__field {
  --nv-chat-stroke: linear-gradient(255deg, rgb(202 85 7 / 0.2) 0%, rgb(221 19 0 / 0.2) 100%); /* Untokenized */
}

.nv-chat-composer__input {
  flex: 1 0 0;
  min-width: 0;
  min-height: 21px;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  resize: none;
  background: transparent;
  font: inherit;
  font-size: 16px;
  line-height: 1.3;
  color: var(--ink-default);
  field-sizing: content;
}

.nv-chat-composer__input::placeholder {
  color: var(--ink-weak);
}

.nv-chat-composer--error .nv-chat-composer__input {
  color: var(--ink-error);
}

.nv-chat-composer__action {
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius-xss);
  background: none;
  color: var(--ink-default);
  cursor: pointer;
}

.nv-chat-composer__action .nv-icon {
  display: block;
}

/* Clear (close 16): only once there is text */
.nv-chat-composer__clear {
  flex: none;
  width: 16px;
  height: 16px;
}

.nv-chat-composer__attach,
.nv-chat-composer__send {
  position: absolute;
  bottom: 20px;
  width: 24px;
  height: 24px;
}

.nv-chat-composer__attach { left: 20px; }
.nv-chat-composer__send { right: 20px; }

/* Empty composer: attach and send sit in ink-secondary, clear is hidden */
.nv-chat-composer--empty .nv-chat-composer__attach,
.nv-chat-composer--empty .nv-chat-composer__send {
  color: var(--ink-secondary);
}

.nv-chat-composer--empty:not(:focus-within) .nv-chat-composer__clear {
  display: none;
}

.nv-chat-composer--focused.nv-chat-composer--empty .nv-chat-composer__attach,
.nv-chat-composer:focus-within .nv-chat-composer__attach {
  color: var(--ink-default);
}

.nv-chat-composer__hint {
  margin: 0;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.3;
  color: #464d59; /* Untokenized: Colors/ink/standard has no CSS token */
}

.nv-chat-composer--error .nv-chat-composer__hint {
  color: var(--ink-error);
}

/* state=disabled */
.nv-chat-composer--disabled .nv-chat-composer__label,
.nv-chat-composer--disabled .nv-chat-composer__input,
.nv-chat-composer--disabled .nv-chat-composer__input::placeholder,
.nv-chat-composer--disabled .nv-chat-composer__hint {
  color: var(--ink-disabled);
}

.nv-chat-composer--disabled .nv-chat-composer__field {
  background: var(--bg-disabled);
  box-shadow: none;
}

.nv-chat-composer--disabled .nv-chat-composer__action {
  color: var(--ink-secondary);
  cursor: not-allowed;
}

/* Inside a prompt sheet the composer keeps its own surface */
.nv-chat-suggestions .nv-chat-composer {
  width: 100%;
}

/* ---------- Option row: Ask Nauta/Option ---------- */

.nv-chat-option {
  display: flex;
  align-items: center;
  gap: 12px; /* Untokenized */
  box-sizing: border-box;
  width: 100%;
  padding: 10px 12px; /* Untokenized */
  border: 0;
  border-radius: var(--radius-s);
  background: transparent;
  font: inherit;
  text-align: left;
  color: var(--ink-default);
  cursor: pointer;
}

.nv-chat-option:hover,
.nv-chat-option--hover,
.nv-chat-option--selected,
.nv-chat-option[aria-selected="true"],
.nv-chat-option:has(.nv-choice__input:checked) {
  background: var(--bg-weak);
}

.nv-chat-option:active,
.nv-chat-option--pressed {
  background: var(--bg-mild);
}

.nv-chat-option--disabled,
.nv-chat-option:disabled,
.nv-chat-option:has(.nv-choice__input:disabled) {
  opacity: 0.4;
  background: transparent;
  cursor: not-allowed;
}

.nv-chat-option__content {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: 2px; /* Untokenized */
  min-width: 0;
}

.nv-chat-option__title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink-default);
}

.nv-chat-option__meta {
  font-size: 12px;
  line-height: 1.3;
  color: var(--ink-secondary);
}

.nv-chat-option__arrow {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--ink-default);
}

/* ---------- Suggested prompts sheet ---------- */

.nv-chat-suggestions {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  box-sizing: border-box;
  width: 100%;
  padding: var(--space-s);
  border-radius: var(--radius-l);
  background: var(--bg-default);
  box-shadow: var(--elevation-001);
  font-family: var(--font-sans);
}

.nv-chat-suggestions__prompts {
  display: flex;
  flex-direction: column;
  gap: var(--space-xxs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nv-chat-suggestions__header {
  display: flex;
  align-items: center;
  gap: var(--space-s);
}

.nv-chat-suggestions__caption {
  flex: 1 0 0;
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink-secondary);
}

.nv-chat-suggestions__counter {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 300;
  line-height: 1.3;
  color: var(--ink-secondary);
}

/* ---------- Picker ---------- */

.nv-chat-picker {
  display: flex;
  flex-direction: column;
  gap: 20px; /* Untokenized */
  box-sizing: border-box;
  width: 100%;
  max-width: 640px;
  padding: var(--space-l);
  border-radius: var(--radius-l);
  background: var(--bg-default);
  box-shadow: var(--elevation-003);
  font-family: var(--font-sans);
}

.nv-chat-picker__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.nv-chat-picker__title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink-default);
}

.nv-chat-picker__subtitle {
  margin: 0;
  font-size: 14px;
  line-height: 1.3;
  color: var(--ink-secondary);
}

.nv-chat-picker__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-xxs);
  margin: 0;
  padding: 0;
  border: 0;
}

.nv-chat-picker__caption {
  display: flex;
  align-items: center;
  gap: 6px; /* Untokenized */
  margin: 0;
  padding: 0 0 var(--space-xxs);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink-secondary);
}

.nv-chat-picker__caption .nv-icon {
  flex: none;
}

.nv-chat-picker__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
}

.nv-chat-picker__footer p {
  margin: 0;
  font-size: 14px;
  line-height: 1.3;
  color: var(--ink-secondary);
}

/* ---------- Answered questions log ---------- */

.nv-chat-answers {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  box-sizing: border-box;
  width: 100%;
  max-width: 848px;
  margin: 0;
  padding: var(--space-m);
  border: 1px solid var(--line-border-standard);
  border-radius: var(--radius-l);
  background: var(--bg-default);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.3;
}

.nv-chat-answers__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-xxs);
  margin: 0;
}

.nv-chat-answers__question {
  margin: 0;
  color: var(--ink-secondary);
}

.nv-chat-answers__answer {
  margin: 0;
  color: var(--ink-default);
}

/* ---------- Dropzone overlay ---------- */

.nv-chat-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-s);
  box-sizing: border-box;
  min-height: 440px;
  padding: var(--space-xl);
  border: 2px dashed var(--ink-action);
  border-radius: var(--radius-l);
  background: var(--bg-weak);
  font-family: var(--font-sans);
  text-align: center;
}

.nv-chat-dropzone__icon {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: var(--radius-m);
  background: var(--ink-inverse);
  font-size: 40px;
  font-weight: 600;
  line-height: 1;
  color: var(--ink-action);
}

.nv-chat-dropzone__title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink-default);
}

.nv-chat-dropzone__hint {
  margin: var(--space-xs) 0 0;
  font-size: 14px;
  line-height: 1.3;
  color: var(--ink-secondary);
}

/* ---------- Widgets ---------- */

.nv-chat-widget {
  display: inline-flex;
  flex-direction: column;
  gap: var(--space-m);
  box-sizing: border-box;
  padding: var(--space-m);
  border-radius: var(--radius-l);
  background: var(--bg-default);
  box-shadow: var(--elevation-001);
  font-family: var(--font-sans);
}

.nv-chat-widget--form {
  display: flex;
  width: 100%;
}

.nv-chat-widget__header {
  display: flex;
  align-items: center;
  gap: var(--space-s);
}

.nv-chat-widget__heading {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: 2px; /* Untokenized */
}

.nv-chat-widget__title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink-default);
}

.nv-chat-widget__subtitle {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-weak);
}

.nv-chat-widget__row {
  display: flex;
  align-items: flex-end;
  gap: var(--space-m);
}

.nv-chat-widget__row > .nv-textfield {
  flex: 1 0 0;
  min-width: 0;
}

.nv-chat-widget__add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px; /* Untokenized */
  box-sizing: border-box;
  width: 100%;
  height: 48px;
  border: 1px dashed var(--bg-mild);
  border-radius: var(--radius-m);
  background: none;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink-action);
  cursor: pointer;
}

.nv-chat-widget__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-m);
}

/* ---------- Home: quick questions ("Things you might want to check") ---------- */

.nv-chat-quick {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  box-sizing: border-box;
  width: 100%;
  max-width: 848px;
  padding: var(--space-m);
  border: 1px solid rgb(77 113 221 / 0.1); /* Untokenized */
  border-radius: var(--radius-l);
  background: linear-gradient(109deg, rgb(255 255 255 / 0) 0.8%, rgb(255 255 255 / 0.5) 100.7%); /* Untokenized */
  backdrop-filter: blur(6px);
  font-family: var(--font-sans);
}

.nv-chat-quick__header {
  display: flex;
  align-items: center;
  gap: var(--space-xxs);
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--ink-secondary);
}

.nv-chat-quick__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nv-chat-quick__question {
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: var(--space-s);
  border: 0;
  border-radius: var(--radius-s);
  background: var(--bg-weak);
  font: inherit;
  font-size: 16px;
  line-height: 1.3;
  text-align: left;
  color: var(--ink-default);
  cursor: pointer;
}

/* AgentStatus */
/* AgentStatus — what the agent is doing right now.
   Sources: Ask Nauta/Thinking* (5136:49, 5149:128, 5157:159, 5158:198 on the loaders page 3:7661),
   the home "Generating your … report" loader (912:2614 on home 6:343) and the
   "Review Progress" side panel (98:1692, rows 76:955 on tasks 36:1742).
   Blocks:
     .nv-agent-working   one-line working indicator (star + shimmering label)
     .nv-agent-status    reasoning trace: header toggle + steps (done / active / failed)
     .nv-agent-fanout    parallel agents block (Thinking agents + Thinking agent cards)
     .nv-agent-progress  Review Progress panel with ordered task steps
   Buttons, chips, loaders, dividers, page progress and toasts come from their components. */

/* ---------- Working indicator ---------- */

.nv-agent-working {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  font-family: var(--font-sans);
}

.nv-agent-working__star {
  flex: none;
  width: 32px;
  height: 32px;
  filter: drop-shadow(0 0 3px rgb(77 113 221 / 0.4)); /* Untokenized */
  animation: nv-agent-pulse 1.6s ease-in-out infinite;
}

.nv-agent-working__label {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.15px; /* Untokenized */
  color: transparent;
  background: linear-gradient(90deg, #525252 0%, #fff 50%, #525252 100%) 0 0 / 200% 100%; /* Untokenized: Figma shimmer */
  -webkit-background-clip: text;
  background-clip: text;
  animation: nv-agent-shimmer 2s linear infinite;
}

/* ---------- Reasoning trace: Ask Nauta/Thinking ---------- */

.nv-agent-status {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xs);
  width: 100%;
  max-width: 640px;
  font-family: var(--font-sans);
}

.nv-agent-status--collapsed {
  gap: 0;
}

.nv-agent-status__steps {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nv-agent-status--collapsed .nv-agent-status__steps,
.nv-agent-status--collapsed .nv-agent-status__retry {
  display: none;
}

.nv-agent-status__step {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.nv-agent-status__row {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  height: 24px;
  font-size: 14px;
  line-height: 1.3;
  color: var(--ink-secondary);
}

.nv-agent-status__icon {
  flex: none;
  width: 24px;
  height: 24px;
}

.nv-agent-status__label {
  flex: 1 0 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* state=active: the step running now */
.nv-agent-status__step--active .nv-agent-status__row {
  font-weight: 600;
  color: var(--ink-default);
}

.nv-agent-status__step--active .nv-agent-status__icon {
  animation: nv-agent-pulse 1.6s ease-in-out infinite;
}

/* state=failed: the step that broke */
.nv-agent-status__step--failed .nv-agent-status__row {
  color: var(--ink-error);
}

/* Connector: 16 tall, centred under the 24 px icon (step pitch 40) */
.nv-agent-status__connector {
  display: flex;
  justify-content: center;
  width: 24px;
  height: 16px;
}

/* The Ask Nauta star that closes a loading trace */
.nv-agent-status__star {
  display: block;
  width: 24px;
  height: 24px;
  animation: nv-agent-spin 2.4s linear infinite;
}

/* ---------- Fan-out: Ask Nauta/Thinking agents ---------- */

.nv-agent-fanout {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  max-width: 640px;
  font-family: var(--font-sans);
}

.nv-agent-fanout__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  box-sizing: border-box;
  width: 100%;
  padding: var(--space-s);
  box-shadow: inset 0 0 0 1px var(--line-border-standard); /* hairline drawn inside, as Figma strokes take no space */
  border-radius: var(--radius-l);
  background: var(--bg-default);
}

.nv-agent-fanout__header {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--ink-secondary);
}

.nv-agent-fanout__header .nv-icon {
  flex: none;
}

.nv-agent-fanout__title {
  display: flex;
  align-items: center;
  gap: var(--space-xxs);
}

.nv-agent-fanout__count {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--ink-default);
}

.nv-agent-fanout__grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* One agent card: 192 wide, name truncates */
.nv-agent-fanout__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-s);
  box-sizing: border-box;
  width: 192px;
  padding: var(--space-s);
  box-shadow: inset 0 0 0 1px var(--line-border-standard); /* hairline drawn inside, as Figma strokes take no space */
  border-radius: var(--radius-l);
  background: var(--bg-default);
}

.nv-agent-fanout__head {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  width: 100%;
  height: 24px;
}

.nv-agent-fanout__name {
  flex: 1 0 0;
  min-width: 0;
  overflow: hidden;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink-default);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nv-agent-fanout__connector {
  display: flex;
  justify-content: center;
  width: 24px;
  height: 16px;
}

/* ---------- Review Progress panel ---------- */

.nv-agent-progress {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  box-sizing: border-box;
  width: 100%;
  max-width: 450px;
  padding: var(--space-m);
  border: 1px solid var(--line-border-standard);
  border-radius: var(--radius-m);
  background: var(--bg-default);
  font-family: var(--font-sans);
  color: var(--ink-default);
}

.nv-agent-progress__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

.nv-agent-progress__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

.nv-agent-progress__heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-xxs);
}

.nv-agent-progress__title-row {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.nv-agent-progress__title {
  flex: 1 0 0;
  min-width: 0;
  margin: 0;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.3;
}

.nv-agent-progress__subtitle {
  margin: 0;
  font-size: 14px;
  line-height: 1.3;
  color: var(--ink-secondary);
}

/* task-filters: four equal buttons */
.nv-agent-progress__filters {
  display: flex;
  gap: 10px; /* Untokenized */
}

.nv-agent-progress__filter {
  flex: 1 0 0;
  min-width: 0;
  height: 54px;
  padding: var(--space-xs) var(--space-s);
  border: 0;
  border-radius: var(--radius-m);
  background: var(--bg-gray-weak);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink-default);
  cursor: pointer;
}

.nv-agent-progress__filter[aria-pressed="true"] {
  background: var(--bg-mild);
}

.nv-agent-progress__filter:focus-visible {
  outline: none;
}

/* Ordered steps */
.nv-agent-progress__tasks {
  display: flex;
  flex-direction: column;
  gap: var(--space-xxs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nv-agent-progress__task {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  box-sizing: border-box;
  min-height: 64px;
  padding: 0 0 var(--space-s);
}

/* status=completed has no drag handle: the title lines up 24 px in */
.nv-agent-progress__task--completed {
  padding-left: var(--space-m);
}

.nv-agent-progress__drag {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--ink-weak);
}

.nv-agent-progress__task-body {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: var(--space-xxs);
  min-width: 0;
}

.nv-agent-progress__task-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink-default);
}

.nv-agent-progress__task-detail {
  margin: 0;
  font-size: 14px;
  line-height: 1.3;
  color: var(--ink-secondary);
}

.nv-agent-progress__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

/* status=Reviewing: the step in progress */
.nv-agent-progress__task--reviewing .nv-agent-progress__task-title {
  color: var(--ink-accent-hover);
}

/* "In review now" tag: background-mild + ink-accent-hover (no Tag variant carries this pair) */
.nv-agent-progress__review-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xxs);
  height: 24px;
  box-sizing: border-box;
  padding: var(--space-xxs) var(--space-xs);
  border-radius: var(--radius-xss);
  background: var(--bg-mild);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink-accent-hover);
}

/* status=Disabled: not reachable yet */
.nv-agent-progress__task--disabled .nv-agent-progress__task-title,
.nv-agent-progress__task--disabled .nv-agent-progress__task-detail,
.nv-agent-progress__task--disabled .nv-agent-progress__drag {
  color: var(--ink-disabled);
}

/* progress-congrats */
.nv-agent-progress__congrats {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-s);
  padding: var(--space-s) var(--space-xs);
  border-radius: var(--radius-m);
  background: var(--bg-weak);
  text-align: center;
}

.nv-agent-progress__congrats-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink-accent-hover);
}

.nv-agent-progress__congrats-text {
  margin: 0;
  font-size: 16px;
  line-height: 1.3;
}

.nv-agent-progress__congrats-list {
  display: flex;
  gap: var(--space-s);
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nv-agent-progress__congrats-list li {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  align-items: center;
  font-size: 12px;
  line-height: 1.3;
}

.nv-agent-progress__congrats-list .nv-icon {
  color: var(--ink-accent-hover);
}

.nv-agent-progress__congrats-close {
  position: absolute;
  top: var(--space-xs);
  right: var(--space-xs);
}

/* ---------- Motion ---------- */

@keyframes nv-agent-shimmer {
  to { background-position: -200% 0; }
}

@keyframes nv-agent-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

@keyframes nv-agent-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .nv-agent-working__star,
  .nv-agent-working__label,
  .nv-agent-status__step--active .nv-agent-status__icon,
  .nv-agent-status__star {
    animation: none;
  }

  /* Without the moving highlight the label reads as plain secondary ink */
  .nv-agent-working__label {
    background: none;
    color: var(--ink-secondary);
  }
}

/* Visually hidden step state ("Done: ", "In progress: ", "Failed: ") for screen readers */
.nv-agent-status__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Default states, named so markup can state them: a finished step and the next task use the base styles. */
.nv-agent-status__step--done {}
.nv-agent-progress__task--next {}

/* Avatar */
/* Avatar — Sirius round agent avatar (Figma 4629:16945) */
.nv-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--bg-mild);
  color: var(--ink-default);
  font-family: var(--font-sans);
  font-size: 12px; /* caption/semibold at size 32 */
  font-weight: 600;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}
.nv-avatar--48 { width: 48px; height: 48px; font-size: 14px; }
.nv-avatar--56 { width: 56px; height: 56px; font-size: 16px; }
/* type=photo: the agent portrait fills the circle */
.nv-avatar__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-pill);
}

/* Breadcrumbs */
/* Breadcrumbs — Sirius (Figma 2313:52). Trail of 1–4 levels; the last item is always Current. */
.nv-breadcrumbs {
  font-family: var(--font-sans);
}
.nv-breadcrumbs__list {
  display: flex;
  align-items: flex-start;
  gap: 6px; /* untokenized: Figma gap 6px */
  margin: 0;
  padding: 0;
  list-style: none;
}
.nv-breadcrumbs__item {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 14px;
  line-height: 1.3;
  white-space: nowrap;
}
/* Separator "/" between items (Breadcrumb Separator 2313:14) */
.nv-breadcrumbs__item + .nv-breadcrumbs__item::before {
  content: "/";
  color: #99a2bc; /* untokenized */
  font-weight: 400;
}
/* State=Default */
.nv-breadcrumbs__link {
  color: #99a2bc; /* untokenized: close to --ink-weak (#9aa5bc) but not exact */
  font-weight: 400;
  text-decoration: none;
  border-radius: var(--radius-xss);
}
.nv-breadcrumbs__link:focus-visible {
  outline: none;
}
/* State=Current */
.nv-breadcrumbs__current {
  color: #4d71dd; /* untokenized */
  font-weight: 600;
}

/* Button */
/* Button — Sirius "buttons" page (Figma 1:1485). Styles: primary, secondary, ghost.
   Sizes: xs (24) · sm (32) · md (40, default) · lg (48) · xl (56). */

.nv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  box-sizing: border-box;
  height: 40px;
  margin: 0;
  padding: 0 var(--space-s);
  border: 1px solid transparent;
  border-radius: var(--radius-s);
  background: transparent;
  color: var(--ink-action);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  -webkit-font-smoothing: antialiased;
}

.nv-btn__icon {
  flex: none;
  font-size: 24px;
}

.nv-btn:focus-visible {
  outline: none;
}

.nv-btn:disabled,
.nv-btn[aria-disabled="true"] {
  cursor: not-allowed;
}

/* ---- Styles ---- */

.nv-btn--primary {
  background: var(--ink-action);
  color: var(--ink-inverse);
}
.nv-btn--primary:hover,
.nv-btn--primary:active,
.nv-btn--primary.nv-btn--hover,
.nv-btn--primary.nv-btn--pressed {
  background: var(--ink-accent-pressed);
}

.nv-btn--secondary {
  background: var(--ink-inverse);
  border-color: var(--line-border-standard);
  color: var(--ink-action);
}
.nv-btn--secondary:hover,
.nv-btn--secondary.nv-btn--hover {
  background: var(--bg-default);
  border-color: var(--ink-accent-pressed);
  color: var(--ink-accent-pressed);
}
.nv-btn--secondary:active,
.nv-btn--secondary.nv-btn--pressed {
  background: var(--ink-inverse);
  border-color: var(--ink-accent-pressed);
  color: var(--ink-accent-pressed);
}

.nv-btn--ghost {
  height: auto;
  padding: 0;
  border: 0;
  border-radius: var(--radius-xss);
  background: transparent;
  color: var(--ink-action);
}
.nv-btn--ghost:hover,
.nv-btn--ghost:active,
.nv-btn--ghost.nv-btn--hover,
.nv-btn--ghost.nv-btn--pressed {
  color: var(--ink-accent-pressed);
}

/* Disabled (after hover rules so it wins) */
.nv-btn--primary:disabled,
.nv-btn--primary[aria-disabled="true"],
.nv-btn--secondary:disabled,
.nv-btn--secondary[aria-disabled="true"] {
  background: var(--bg-disabled);
  color: var(--ink-disabled);
}
.nv-btn--secondary:disabled,
.nv-btn--secondary[aria-disabled="true"] {
  border-color: var(--ink-disabled);
}
.nv-btn--ghost:disabled,
.nv-btn--ghost[aria-disabled="true"] {
  color: var(--ink-disabled);
}

/* ---- Sizes (primary + secondary geometry) ---- */

.nv-btn--xs {
  height: 24px;
  gap: var(--space-xxs);
  padding: 0 var(--space-xs);
  border-radius: var(--radius-xs);
  font-size: 12px;
}
.nv-btn--xs .nv-btn__icon { font-size: 16px; }

.nv-btn--sm {
  height: 32px;
  gap: var(--space-xxs);
  padding: 0 var(--space-s);
}
.nv-btn--sm .nv-btn__icon { font-size: 20px; }

.nv-btn--lg {
  height: 48px;
  gap: 12px;
  padding: 0 var(--space-m);
  border-radius: var(--radius-m);
  font-size: 16px;
}

.nv-btn--xl {
  height: 56px;
  gap: 12px;
  padding: 0 28px;
  border-radius: var(--radius-m);
  font-size: 16px;
}

/* Icon only: square, padding = (height - icon) / 2 */
.nv-btn--icon { padding: 0; width: 40px; }
.nv-btn--icon.nv-btn--xs { width: 24px; }
.nv-btn--icon.nv-btn--sm { width: 32px; }
.nv-btn--icon.nv-btn--lg { width: 48px; }
.nv-btn--icon.nv-btn--xl { width: 56px; }

/* Ghost has no box: only gap, type and icon follow the size */
.nv-btn--ghost.nv-btn--xs,
.nv-btn--ghost.nv-btn--sm,
.nv-btn--ghost.nv-btn--lg,
.nv-btn--ghost.nv-btn--xl,
.nv-btn--ghost.nv-btn--icon {
  height: auto;
  width: auto;
  padding: 0;
  border-radius: var(--radius-xss);
}

/* ---- Button pair (Figma "double-buttons", mobile bottom bar) ---- */

.nv-btn-pair {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  box-sizing: border-box;
  width: 100%;
  padding: var(--space-xs) var(--space-m) var(--space-s);
  background: linear-gradient(180deg, rgb(255 255 255 / 0) 0%, rgb(255 255 255 / 0.8) 50.278%, var(--bg-default) 100%);
}
.nv-btn-pair > .nv-btn {
  flex: 1 0 0;
  min-width: 0;
}
/* In the pair, a disabled secondary loses its outline (matches primary disabled) */
.nv-btn-pair > .nv-btn--secondary:disabled,
.nv-btn-pair > .nv-btn--secondary[aria-disabled="true"] {
  border-color: var(--bg-disabled);
}

/* ---- Social sign-in button (Figma "button-social") ---- */

.nv-btn-social {
  display: flex;
  align-items: center;
  gap: var(--space-m);
  box-sizing: border-box;
  width: 100%;
  height: 64px;
  margin: 0;
  padding: 0 var(--space-l);
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-s);
  background: var(--bg-default);
  box-shadow: var(--elevation-001);
  color: var(--ink-default);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  -webkit-font-smoothing: antialiased;
}
.nv-btn-social__logo {
  flex: none;
  display: block;
  width: 24px;
  height: 24px;
}
.nv-btn-social:hover,
.nv-btn-social.nv-btn-social--hover {
  background: var(--bg-weak);
}
.nv-btn-social:active,
.nv-btn-social.nv-btn-social--pressed {
  background: var(--bg-mild);
  box-shadow: none;
}
.nv-btn-social:focus-visible {
  outline: none;
}
.nv-btn-social:disabled,
.nv-btn-social[aria-disabled="true"] {
  background: var(--bg-disabled);
  box-shadow: none;
  color: var(--ink-weak);
  cursor: not-allowed;
}
.nv-btn-social:disabled .nv-btn-social__logo,
.nv-btn-social[aria-disabled="true"] .nv-btn-social__logo {
  opacity: 0.5;
}

/* Card */
/* Card — Sirius artifact-card (852:2541) and card-ghost (5330:39). */

/* ---------- artifact-card ---------- */
.nv-card {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  width: 100%;
  padding: var(--space-m);
  background: var(--bg-default);
  border: 1px solid var(--line-border-standard);
  border-radius: var(--radius-l);
  font-family: var(--font-sans);
  color: var(--ink-default);
  transition: box-shadow 120ms ease, border-color 120ms ease;
}
.nv-card:hover,
.nv-card--hover {
  border-color: transparent;
  box-shadow: var(--elevation-003);
}
.nv-card:active,
.nv-card--pressed {
  border-color: var(--bg-weak);
  box-shadow: var(--elevation-003);
}
.nv-card--selected,
.nv-card--selected:hover {
  border-color: var(--bg-gray);
  box-shadow: var(--elevation-003);
}
.nv-card:has(.nv-card__link:focus-visible) {
  outline: none;
}

.nv-card__top {
  display: flex;
  flex-direction: column;
}
.nv-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nv-card__status {
  padding: var(--space-xxs);
  font-size: 11px;
  font-weight: 600;
  line-height: 16.5px;
  color: #35d263;
  white-space: nowrap;
}
.nv-card__menu {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-default);
  cursor: pointer;
  border-radius: var(--radius-xss);
}
.nv-card__menu .nv-icon { display: block; }
.nv-card__menu:focus-visible {
  outline: none;
}

.nv-card__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  overflow: hidden;
}
.nv-card__title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink-default);
}
/* the title link covers the whole card, so the card is one click target */
.nv-card__link {
  color: inherit;
  text-decoration: none;
  outline: none;
}
.nv-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.nv-card__description {
  margin: 0;
  font-size: 14px;
  line-height: 1.3;
  color: var(--ink-secondary);
}

.nv-card__footer {
  display: flex;
  align-items: center;
}
.nv-card__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-xxs);
  font-size: 12px;
  line-height: 1.3;
  white-space: nowrap;
}
.nv-card__meta-label { color: var(--ink-secondary); }
.nv-card__meta-value {
  font-family: var(--font-mono);
  font-weight: 300;
  color: var(--ink-default);
}
.nv-card__actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1 0 0;
  gap: var(--space-xs);
  align-items: center;
  justify-content: flex-end;
}

/* state=disabled: everything in ink/disabled, no elevation */
.nv-card--disabled,
.nv-card--disabled:hover,
.nv-card--disabled:active {
  border-color: var(--line-border-standard);
  box-shadow: none;
  color: var(--ink-disabled);
}
.nv-card--disabled .nv-card__status,
.nv-card--disabled .nv-card__title,
.nv-card--disabled .nv-card__description,
.nv-card--disabled .nv-card__meta-label,
.nv-card--disabled .nv-card__meta-value,
.nv-card--disabled .nv-card__menu { color: var(--ink-disabled); }
.nv-card--disabled .nv-card__link { pointer-events: none; cursor: default; }
.nv-card--disabled .nv-card__menu { cursor: default; }

/* ---------- card-ghost: the empty slot where the next card goes ---------- */
.nv-card-ghost {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  width: 100%;
  height: 183px;
  padding: var(--space-m);
  overflow: hidden;
  background: transparent;
  border: 1px solid var(--line-border-standard);
  border-radius: var(--radius-l);
  font-family: var(--font-sans);
  color: var(--ink-secondary);
  text-align: center;
  cursor: pointer;
}
.nv-card-ghost:hover,
.nv-card-ghost--hover { background: var(--bg-gray-weak); }
.nv-card-ghost:active,
.nv-card-ghost--pressed { background: var(--bg-mild); }
.nv-card-ghost:focus-visible {
  outline: none;
}
.nv-card-ghost__icon { display: block; }
.nv-card-ghost__title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}
.nv-card-ghost__subtitle {
  font-size: 12px;
  line-height: 1.3;
}

/* Chip */
/* Chip — Sirius "chips" page.
   .nv-chip        standard chip (Figma 3:4433): labels, tags and basic filters, five sizes.
   .nv-chip-intent unified intent chip (Figma 2698:79): neutral / positive / warning / critical. */

/* ---------- Standard chip ---------- */
.nv-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xxs);
  box-sizing: border-box;
  height: 24px;
  margin: 0;
  padding: 0; /* unselected chips sit flush: no fill, no padding */
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--ink-default);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  cursor: pointer;
}

.nv-chip__icon {
  display: block;
  flex: none;
  font-size: 16px;
}

.nv-chip:focus-visible {
  outline: none;
}

/* selected-filled: white surface */
.nv-chip--filled {
  padding: var(--space-xxs) var(--space-xs);
  border-radius: var(--radius-xss);
  background: var(--ink-inverse);
}

/* selected-outline: standard border, no fill */
.nv-chip--outline {
  padding: var(--space-xxs) var(--space-xs);
  border: 1px solid var(--line-border-standard);
  border-radius: var(--radius-xss);
}

/* Sizes. x-small (24) is the base. */
.nv-chip--sm {
  height: 32px;
  font-size: 14px;
}

.nv-chip--md {
  height: 40px;
  gap: var(--space-xs);
  font-size: 16px;
}

.nv-chip--lg,
.nv-chip--xl {
  gap: 12px;
  font-size: 16px;
}

.nv-chip--lg { height: 48px; }
.nv-chip--xl { height: 56px; }

.nv-chip--md .nv-chip__icon,
.nv-chip--lg .nv-chip__icon,
.nv-chip--xl .nv-chip__icon {
  font-size: 24px;
}

.nv-chip--md.nv-chip--filled,
.nv-chip--md.nv-chip--outline {
  padding: var(--space-xs) 12px;
}

.nv-chip--lg.nv-chip--filled,
.nv-chip--lg.nv-chip--outline,
.nv-chip--xl.nv-chip--filled,
.nv-chip--xl.nv-chip--outline {
  padding: 12px var(--space-s);
  border-radius: var(--radius-xs);
}

/* Disabled: label and icons go to ink-disabled, surface and border stay. */
.nv-chip:disabled,
.nv-chip[aria-disabled="true"] {
  color: var(--ink-disabled);
  cursor: not-allowed;
}

/* ---------- Intent chip ---------- */
.nv-chip-intent {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xxs);
  box-sizing: border-box;
  height: 20px;
  padding: 0 var(--space-xs);
  border-radius: var(--radius-xss);
  background: var(--bg-gray-weak);
  color: var(--ink-secondary);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}

.nv-chip-intent__dot {
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: var(--radius-pill);
  background: currentColor;
}

.nv-chip-intent--sm {
  height: 24px;
  gap: 6px;
  padding: 0 10px;
  font-size: 12px;
}

.nv-chip-intent--sm .nv-chip-intent__dot {
  width: 6px;
  height: 6px;
}

.nv-chip-intent--md {
  height: 32px;
  gap: var(--space-xs);
  padding: 0 12px;
  font-size: 13px;
}

.nv-chip-intent--md .nv-chip-intent__dot {
  width: 8px;
  height: 8px;
}

.nv-chip-intent--positive {
  background: var(--bg-positive-weak);
  color: var(--ink-positive);
}

.nv-chip-intent--warning {
  background: var(--bg-warning-weak);
  color: var(--ink-warning);
}

.nv-chip-intent--error {
  background: var(--bg-error-weak);
  color: var(--ink-error);
}

/* ChoiceControl */
/* Choice control — Sirius "check/radio-buttons" page (Figma 3:4338), one set with Type = Checkbox | Radiobutton.
   A native input (visually hidden) followed by a 16 px glyph box holding two Material icons (off and on). */

.nv-choice {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: var(--ink-action);
  cursor: pointer;
}

.nv-choice__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
  opacity: 0;
}

.nv-choice__glyph {
  display: block;
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-xss);
}
.nv-choice--radio .nv-choice__glyph {
  border-radius: 50%;
}

/* Which glyph shows */
.nv-choice__glyph .nv-icon { display: block; }
.nv-choice__glyph .nv-choice__on { display: none; }
.nv-choice__input:checked + .nv-choice__glyph .nv-choice__off { display: none; }
.nv-choice__input:checked + .nv-choice__glyph .nv-choice__on { display: block; }

/* Focus */
.nv-choice__input:focus-visible + .nv-choice__glyph {
  outline: none;
}

/* Disabled */
.nv-choice:has(.nv-choice__input:disabled) {
  color: var(--ink-disabled);
  cursor: not-allowed;
}

/* Divider */
/* Divider — Sirius divider (Figma 36:4884). 1 px --line-border-standard line,
   horizontal or vertical, full-bleed or inset by 16 px. */
.nv-divider {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 1px;
  margin: 0;
  border: 0;
  background: var(--line-border-standard);
  background-clip: content-box;
  flex: none;
}

.nv-divider--inset {
  padding: 0 var(--space-s);
}

.nv-divider--vertical {
  width: 1px;
  height: auto;
  min-height: 1em;
  align-self: stretch;
}

.nv-divider--vertical.nv-divider--inset {
  padding: var(--space-s) 0;
}

/* Drawer */
/* Drawer — Sirius entity detail drawer (Figma page "drawers" 1359:1542)
   drawer-container 1359:2063 · drawer-header 1359:1563 · drawer-entity-details 1359:1569
   drawer-field-row 1359:1670 · drawer-collapsible-section 1359:1693 */

/* ---------- drawer-container (1359:2063) ---------- */
.nv-drawer {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-l);
  width: 773px;
  max-width: 100%;
  max-height: 100vh;
  padding: var(--space-m);
  overflow-y: auto;
  background: var(--bg-default);
  border-radius: var(--radius-xl) 0 0 var(--radius-xl);
  box-shadow: var(--elevation-003);
  font-family: var(--font-sans);
  color: var(--ink-default);
}

/* ---------- drawer-header (1359:1563) ---------- */
.nv-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
}
.nv-drawer__nav {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  min-width: 0;
}
.nv-drawer__title {
  margin: 0;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 600;
  color: #080e26; /* untokenized */
  white-space: nowrap;
}
.nv-drawer__pager {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}
.nv-drawer__counter {
  font-size: 14px;
  line-height: 1.3;
  font-weight: 400;
  color: #595e6f; /* untokenized */
  white-space: nowrap;
}

/* ---------- drawer-entity-details (1359:1569) ---------- */
.nv-drawer__entity {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}
.nv-drawer__entity-id {
  margin: 0;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 600;
  color: #080e26; /* untokenized */
  white-space: nowrap;
}

/* ---------- Content area: stacked drawer-field-row ---------- */
.nv-drawer__content {
  display: flex;
  flex-direction: column;
}

/* ---------- drawer-field-row (1359:1670): three compact text fields ---------- */
.nv-drawer__field-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-s);
  padding: var(--space-s) 0;
}
.nv-drawer__field {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: var(--space-xxs);
  min-width: 0;
}
.nv-drawer__label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xxs);
  font-size: 12px;
  line-height: 1.3;
  font-weight: 400;
  color: var(--ink-default);
}
.nv-drawer__label-text { flex: 1 1 0; min-width: 0; }
.nv-drawer__label-icon {
  display: block;
  flex: none;
}
.nv-drawer__section-status .nv-drawer__status-icon { color: var(--ink-warning); }
.nv-drawer__info {
  display: inline-flex;
  flex: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-weak);
  cursor: pointer;
  border-radius: var(--radius-pill);
}
.nv-drawer__info:hover { color: var(--ink-secondary); }
.nv-drawer__info:focus-visible {
  outline: none;
}
.nv-drawer__input {
  box-sizing: border-box;
  width: 100%;
  height: 32px;
  margin: 0;
  padding: 0 var(--space-xs);
  border: 1px solid var(--line-border-standard);
  border-radius: var(--radius-s);
  background: var(--bg-default);
  font-family: var(--font-mono);
  font-weight: 300;
  font-size: 12px;
  line-height: 1.3;
  color: var(--ink-default);
  text-overflow: ellipsis;
}
.nv-drawer__input::placeholder {
  font-family: var(--font-sans);
  font-weight: 400;
  color: var(--ink-weak);
}
.nv-drawer__input:hover { border-color: var(--ink-weak); }
.nv-drawer__input:focus-visible {
  outline: none;
}

/* ---------- Sections area: stacked drawer-collapsible-section, gap 24 ---------- */
.nv-drawer__sections {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

/* ---------- drawer-collapsible-section (1359:1693) ---------- */
.nv-drawer__section {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  width: 100%;
  margin: 0;
  padding: var(--space-s) 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: var(--radius-xs);
}
.nv-drawer__section:focus-visible {
  outline: none;
}
.nv-drawer__section-data {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  min-width: 0;
}
.nv-drawer__section-heading {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  min-width: 0;
}
.nv-drawer__section-title {
  font-size: 16px;
  line-height: 1.3;
  font-weight: 600;
  color: #080e26; /* untokenized */
  white-space: nowrap;
}
/* Figma's "divider" here is a 1px line rotated to 0 width: it renders as a 1px dot */
.nv-drawer__section-sep {
  display: block;
  flex: none;
  width: 1px;
  height: 1px;
  background: #e7e8ed; /* untokenized */
}
.nv-drawer__section-desc {
  font-size: 12px;
  line-height: 1.3;
  font-weight: 400;
  color: #595e6f; /* untokenized */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nv-drawer__section-status {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-xxs);
  width: 202px;
  font-size: 12px;
  line-height: 1.3;
  font-weight: 600;
  color: var(--ink-default);
  white-space: nowrap;
}
.nv-drawer__section-toggle {
  display: inline-flex;
  flex: none;
  color: var(--ink-default);
}

/* Dropdown */
/* Dropdown family from the Sirius "dropdown" page (328:1495):
   .nv-dropdown        dropdown field 26:617
   .nv-dropdown__menu  _combo_drop-area 350:1016 with _atom-drop rows 26:674 and header 3373:296
   .nv-dropdown-button button_dropdown 328:1566
   .nv-button-count    button-count 4868:33
   .nv-filter-dropdown filter-dropdown 5278:350
   Borders are inset shadows so they sit inside the box like Figma's inside strokes. */

/* ---------- Field ---------- */
.nv-dropdown {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-xxs);
  width: 100%;
  font-family: var(--font-sans);
  color: var(--ink-default);
}
.nv-dropdown--open { gap: 2px; }

.nv-dropdown__label {
  display: flex;
  align-items: flex-start;
  margin: 0;
  font-size: 12px;
  line-height: 1.3;
  font-weight: 400;
  color: var(--ink-default);
  white-space: nowrap;
}
.nv-dropdown__required { color: var(--brand-black); }

.nv-dropdown__trigger {
  display: flex;
  align-items: center;
  gap: var(--space-xxs);
  box-sizing: border-box;
  width: 100%;
  min-height: 56px;
  max-height: 56px;
  margin: 0;
  padding: var(--space-s);
  border: 0;
  border-radius: var(--radius-m);
  background: var(--ink-inverse);
  box-shadow: inset 0 0 0 1px var(--line-border-standard);
  font: inherit;
  text-align: left;
  color: var(--ink-default);
  cursor: pointer;
  overflow: hidden;
}
.nv-dropdown__trigger:focus-visible { outline: none; }
.nv-dropdown__trigger[aria-expanded="true"] { box-shadow: inset 0 0 0 1px var(--line-border-strong); }

.nv-dropdown__value {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 16px;
  line-height: 1.3;
  color: var(--ink-default);
}
.nv-dropdown__value--placeholder { color: var(--ink-weak); }

.nv-dropdown__chevron { display: block; width: 24px; height: 24px; flex-shrink: 0; color: var(--ink-default); }

.nv-dropdown__hint {
  margin: 0;
  font-size: 10px;
  line-height: 1.3;
  font-weight: 600;
  color: var(--ink-secondary);
}

.nv-dropdown--compact .nv-dropdown__trigger {
  min-height: 40px;
  padding: var(--space-xxs) var(--space-xs) var(--space-xxs) var(--space-s);
}
.nv-dropdown--compact .nv-dropdown__value { font-size: 14px; }

.nv-dropdown--error .nv-dropdown__trigger { box-shadow: inset 0 0 0 1px var(--line-border-error); }
.nv-dropdown--error .nv-dropdown__value { color: var(--ink-error); }
.nv-dropdown--error .nv-dropdown__hint { color: var(--ink-error); }

.nv-dropdown--disabled .nv-dropdown__label,
.nv-dropdown--disabled .nv-dropdown__hint { color: var(--ink-disabled); }
.nv-dropdown--disabled .nv-dropdown__trigger {
  background: var(--bg-disabled);
  box-shadow: none;
  cursor: not-allowed;
}
.nv-dropdown--disabled .nv-dropdown__value,
.nv-dropdown--disabled .nv-dropdown__chevron { color: var(--ink-disabled); }

/* ---------- Menu (combo drop area) ---------- */
.nv-dropdown__menu {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: var(--space-xs);
  list-style: none;
  background: var(--ink-inverse);
  border-radius: var(--radius-m);
  box-shadow: var(--elevation-002);
}
.nv-dropdown__menu--narrow { width: 245px; }
.nv-dropdown__menu--flush { gap: 0; padding: var(--space-xxs) 0; }

.nv-dropdown__option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
  width: 100%;
  height: 40px;
  margin: 0;
  padding: 12px var(--space-s);
  border: 0;
  border-radius: var(--radius-xs);
  background: var(--ink-inverse);
  font: inherit;
  font-size: 14px;
  line-height: 1.3;
  text-align: left;
  color: var(--ink-default);
  cursor: pointer;
}
.nv-dropdown__option[aria-selected="true"] { background: var(--bg-gray-weak); }
.nv-dropdown__option:hover,
.nv-dropdown__option.nv-dropdown__option--hover,
.nv-dropdown__option[aria-selected]:hover,
.nv-dropdown__option[aria-selected].nv-dropdown__option--hover { background: var(--bg-weak); }
.nv-dropdown__option:focus-visible { outline: none; }
.nv-dropdown__option:disabled,
.nv-dropdown__option[aria-disabled="true"] { color: var(--ink-disabled); cursor: not-allowed; }
.nv-dropdown__option:disabled:hover,
.nv-dropdown__option[aria-disabled="true"]:hover { background: var(--ink-inverse); }
.nv-dropdown__option[aria-selected="true"]:disabled:hover,
.nv-dropdown__option[aria-selected="true"][aria-disabled="true"]:hover { background: var(--bg-gray-weak); }

.nv-dropdown__option-text { flex: 1 1 0; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.nv-dropdown__option-icon { display: block; width: 20px; height: 20px; flex-shrink: 0; }
.nv-dropdown__check { display: block; width: 16px; height: 16px; flex-shrink: 0; margin-left: auto; }
.nv-dropdown__shortcut { flex-shrink: 0; margin-left: auto; font-size: 13px; color: var(--ink-disabled); }

/* Type=Button: icon + semibold label, gap 4 */
.nv-dropdown__option--button { gap: var(--space-xxs); font-weight: 600; color: var(--ink-action); }
.nv-dropdown__option--button .nv-dropdown__option-text { flex: 0 1 auto; }
.nv-dropdown__option--button .nv-dropdown__check { margin-left: auto; }
/* Type=Action: add icon + regular label */
.nv-dropdown__option--action { color: var(--ink-action); }

.nv-dropdown__header {
  display: flex;
  align-items: flex-start;
  box-sizing: border-box;
  height: 32px;
  margin: 0;
  padding: var(--space-xs) var(--space-s) var(--space-xxs);
  font-size: 12px;
  line-height: 1.3;
  color: var(--ink-disabled);
}

.nv-dropdown__divider {
  height: 1px;
  margin: 0;
  border: 0;
  background: var(--line-border-standard);
}

.nv-dropdown__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 104px;
  margin: 0;
  font-size: 14px;
  line-height: 1.3;
  color: var(--ink-weak);
  text-align: center;
}

/* ---------- button_dropdown ---------- */
.nv-dropdown-button {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xxs);
  font-family: var(--font-sans);
  color: var(--ink-default);
}
.nv-dropdown-button--open { gap: 2px; }
.nv-dropdown-button__label { margin: 0; font-size: 12px; line-height: 1.3; white-space: nowrap; }
.nv-dropdown-button__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xxs);
  box-sizing: border-box;
  height: 32px;
  margin: 0;
  padding: 6px var(--space-s);
  border: 0;
  border-radius: var(--radius-s);
  background: var(--ink-inverse);
  box-shadow: inset 0 0 0 1px var(--line-border-standard);
  font: inherit;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 600;
  color: var(--ink-action);
  white-space: nowrap;
  cursor: pointer;
}
.nv-dropdown-button__trigger .nv-icon { display: block; width: 20px; height: 20px; flex-shrink: 0; }
.nv-dropdown-button__trigger:focus-visible { outline: none; }
.nv-dropdown-button__trigger[aria-expanded="true"] { box-shadow: inset 0 0 0 1px var(--line-border-strong); }
.nv-dropdown-button--error .nv-dropdown-button__trigger { box-shadow: inset 0 0 0 1px var(--line-border-error); }
.nv-dropdown-button--disabled .nv-dropdown-button__label { color: var(--ink-disabled); }
.nv-dropdown-button--disabled .nv-dropdown-button__trigger {
  background: var(--bg-disabled);
  box-shadow: inset 0 0 0 1px var(--ink-disabled);
  color: var(--ink-disabled);
  cursor: not-allowed;
}

/* ---------- button-count ---------- */
.nv-button-count {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  box-sizing: border-box;
  height: 40px;
  margin: 0;
  padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-s);
  border: 0;
  border-radius: var(--radius-s);
  background: var(--ink-inverse);
  box-shadow: inset 0 0 0 1px var(--line-border-standard);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.3;
  color: var(--ink-default);
  white-space: nowrap;
  cursor: pointer;
}
.nv-button-count:hover,
.nv-button-count--hover { background: var(--bg-weak); }
.nv-button-count[aria-expanded="true"] { background: var(--bg-mild); }
.nv-button-count:focus-visible { outline: none; }
.nv-button-count__icon { display: block; width: 24px; height: 24px; flex-shrink: 0; }

/* ---------- filter-dropdown ---------- */
.nv-filter-dropdown {
  display: flex;
  flex-direction: column;
  width: 328px;
  max-width: 100%;
  overflow: hidden;
  background: var(--ink-inverse);
  border-radius: var(--radius-m);
  box-shadow: var(--elevation-002);
  font-family: var(--font-sans);
  color: var(--ink-default);
}
.nv-filter-dropdown .nv-dropdown__menu { background: transparent; box-shadow: none; border-radius: 0; }
.nv-filter-dropdown__footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 12px var(--space-s);
}

/* EmptyState */
/* EmptyState — Sirius "empty-state" (Figma page empty-state 3456:603, component set 3456:620) */
.nv-empty-state {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-s);
  width: 640px;
  max-width: 100%;
  padding: var(--space-xxl);
  background: var(--bg-default);
  font-family: var(--font-sans);
  color: var(--ink-default);
}
/* 88 x 88 illustration slot: a plain filled frame in Figma; swap artwork in per use */
.nv-empty-state__illustration {
  display: block;
  flex: none;
  width: 88px;
  height: 88px;
  border-radius: var(--radius-xs);
  background: var(--bg-disabled);
  overflow: hidden;
}
.nv-empty-state__illustration > img,
.nv-empty-state__illustration > svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.nv-empty-state__title {
  margin: 0;
  font-size: 16px;
  line-height: 1.3;
  font-weight: 600;
  color: var(--ink-default);
}
.nv-empty-state__body {
  margin: 0;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 400;
  color: var(--ink-secondary);
}
.nv-empty-state__actions {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

/* ErrorState */
/* ErrorState — Sirius "error-state" (Figma page error-state 3457:2, component set 3457:21) */
.nv-error-state {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-s);
  width: 640px;
  max-width: 100%;
  padding: var(--space-xxl);
  background: var(--bg-default);
  font-family: var(--font-sans);
  color: var(--ink-default);
}
/* 88 x 88 illustration slot: a plain filled frame in Figma; swap artwork in per use */
.nv-error-state__illustration {
  display: block;
  flex: none;
  width: 88px;
  height: 88px;
  border-radius: var(--radius-xs);
  background: var(--bg-disabled);
  overflow: hidden;
}
.nv-error-state__illustration > img,
.nv-error-state__illustration > svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.nv-error-state__title {
  margin: 0;
  font-size: 16px;
  line-height: 1.3;
  font-weight: 600;
  color: var(--ink-default);
}
.nv-error-state__body {
  margin: 0;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 400;
  color: var(--ink-secondary);
}
.nv-error-state__actions {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}
/* machine-readable failure reference (error code + request id) */
.nv-error-state__code {
  margin: 0;
  font-size: 12px;
  line-height: 1.3;
  font-weight: 400;
  color: var(--ink-disabled);
  overflow-wrap: anywhere;
}

/* FileTypeIcon */
/* FileTypeIcon: raster file-type badges from Sirius "file type icons" (199:5715).
   Figma ships them at 100px tall; width follows each asset's own proportion. */
.nv-filetype {
  display: inline-block;
  height: 100px;
  width: auto;
  flex-shrink: 0;
  vertical-align: middle;
}

/* Filters */
/* Filters: Sirius "filters" page (908:630), the rule-based advanced filter family.
   Filter/Rules Chip 925:19548 · Filter/Rule Row 925:19679 · Filter/Panel Footer 925:19696
   Filter/Context Menu 925:19697 · Filter/Panel 931:396 · Filter/Saved Views Bar 931:440.
   Rule fields reuse TextField (.nv-textfield); buttons reuse Button (.nv-btn);
   the basic filter dropdown reuses Dropdown (.nv-dropdown__menu) and Search. */

/* ---------- Rules chip ---------- */
.nv-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xxs);
  box-sizing: border-box;
  height: 28px;
  margin: 0;
  padding: var(--space-xxs) var(--space-xs);
  border: 0;
  border-radius: var(--radius-xss);
  background: var(--bg-mild);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.3;
  font-weight: 600;
  color: var(--ink-accent-hover);
  white-space: nowrap;
  cursor: pointer;
}
.nv-filter-chip:focus-visible { outline: none; }
.nv-filter-chip__icon { display: block; width: 20px; height: 20px; flex-shrink: 0; }

/* ---------- Panel ---------- */
.nv-filter-panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-s);
  box-sizing: border-box;
  width: 760px;
  max-width: 100%;
  padding: var(--space-s);
  background: var(--bg-default);
  border-radius: var(--radius-s);
  box-shadow: 0 4px 16px 0 rgb(0 0 0 / 0.08);
  font-family: var(--font-sans);
  color: var(--ink-default);
}
.nv-filter-panel__title { margin: 0; font-size: 16px; line-height: 1.3; font-weight: 500; color: #333333; }
.nv-filter-panel__note { margin: 0; font-size: 12px; line-height: 1.3; color: #808080; }
.nv-filter-panel__divider {
  align-self: stretch;
  height: 1px;
  margin: 0;
  border: 0;
  background: var(--line-border-standard);
}
.nv-filter-panel__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-self: stretch;
}
.nv-filter-panel > .nv-textfield { align-self: stretch; }

/* ---------- Rule row ---------- */
.nv-filter-rule {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  align-self: stretch;
}
.nv-filter-rule__conjunction { flex: 0 0 120px; margin: 0; font-size: 16px; line-height: 1.3; }
.nv-filter-rule .nv-filter-rule__conjunction.nv-textfield { width: 120px; }
.nv-filter-rule .nv-filter-rule__field { flex: 0 0 144px; width: 144px; }
.nv-filter-rule .nv-filter-rule__value { flex: 0 0 232px; width: 232px; }

.nv-filter-rule__more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  margin: 0 0 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: var(--radius-xss);
  cursor: pointer;
}
.nv-filter-rule__more .nv-icon { display: block; }
.nv-filter-rule__more:focus-visible { outline: none; }

/* ---------- Context menu ---------- */
.nv-filter-menu {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 190px;
  margin: 0;
  padding: var(--space-xs);
  list-style: none;
  overflow: hidden;
  background: var(--ink-inverse);
  border-radius: var(--radius-m);
  box-shadow: var(--elevation-002);
  font-family: var(--font-sans);
}
.nv-filter-menu__item {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  height: 48px;
  margin: 0;
  padding: 12px var(--space-s);
  border: 0;
  border-radius: var(--radius-xs);
  background: var(--ink-inverse);
  font: inherit;
  font-size: 14px;
  line-height: 1.3;
  color: var(--ink-default);
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}
.nv-filter-menu__item:focus-visible { outline: none; }

/* ---------- Saved views bar ---------- */
.nv-filter-views {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.3;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
}
.nv-filter-views__label { color: #4d4d4d; }
.nv-filter-views__link { color: #4d70de; text-decoration: underline; border-radius: var(--radius-xss); }
.nv-filter-views__link:focus-visible { outline: none; }
.nv-filter-views__sep { color: #b3b3b3; }

/* ---------- Basic filter dropdown (anchored to a filter button) ---------- */
.nv-filter-basic {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xs);
}
.nv-filter-basic .nv-dropdown__menu { width: 327px; max-width: 100%; background: var(--bg-default); }

/* FloatingActionBar */
/* Floating Action Bar + Change status popover — Sirius "buttons" page (Figma 2855:2950, 4317:538, 4326:27).
   Actions are Button instances (.nv-btn--secondary.nv-btn--sm.nv-btn--icon); Button's style.css must be loaded. */

.nv-action-bar {
  display: inline-flex;
  align-items: center;
  gap: var(--space-m);
  box-sizing: border-box;
  height: 48px;
  padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-m);
  border: 1px solid transparent;
  border-radius: var(--radius-s);
  background: var(--bg-default);
  box-shadow: var(--elevation-004);
  font-family: var(--font-sans);
}

.nv-action-bar__count {
  margin: 0;
  color: var(--ink-default);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}

.nv-action-bar__actions {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
}

/* Collapsed action: 32 px square icon button; the label is revealed on hover / focus */
.nv-action-bar__label {
  display: none;
}
.nv-action-bar .nv-action-bar__action:not(:disabled):hover,
.nv-action-bar .nv-action-bar__action:focus-visible,
.nv-action-bar .nv-action-bar__action.nv-action-bar__action--expanded {
  width: auto;
  padding: 0 var(--space-s);
  /* keep the resting secondary look; Figma does not tint the expanded action */
  border-color: var(--line-border-standard);
  background: var(--ink-inverse);
  color: var(--ink-action);
}
.nv-action-bar .nv-action-bar__action:not(:disabled):hover .nv-action-bar__label,
.nv-action-bar .nv-action-bar__action:focus-visible .nv-action-bar__label,
.nv-action-bar .nv-action-bar__action--expanded .nv-action-bar__label {
  display: inline;
}

/* Merge expands as a primary button (as drawn in Figma) */
.nv-action-bar .nv-action-bar__action--merge:not(:disabled):hover,
.nv-action-bar .nv-action-bar__action--merge:focus-visible,
.nv-action-bar .nv-action-bar__action--merge.nv-action-bar__action--expanded {
  border-color: var(--ink-action);
  background: var(--ink-action);
  color: var(--ink-inverse);
}

/* Pressed */
.nv-action-bar:has(.nv-action-bar__action:active),
.nv-action-bar--pressed {
  border-color: var(--bg-weak);
  box-shadow: var(--elevation-003);
}

/* Disabled: actions keep their white box and hairline, only the ink greys out */
.nv-action-bar--disabled {
  box-shadow: var(--elevation-002);
}
.nv-action-bar--disabled .nv-action-bar__count {
  color: var(--ink-disabled);
}
.nv-action-bar--disabled .nv-action-bar__action:disabled {
  border-color: var(--line-border-standard);
  background: var(--ink-inverse);
  color: var(--ink-disabled);
}

/* ---- Change status popover ---- */

.nv-status-menu {
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-sizing: border-box;
  width: 300px;
  padding: var(--space-xs);
  border-radius: var(--radius-s);
  background: var(--bg-default);
  box-shadow: var(--elevation-001);
  font-family: var(--font-sans);
}

.nv-status-menu__header {
  margin: 0;
  padding: 6px var(--space-xs);
  color: var(--ink-secondary);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
}

.nv-status-menu__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  box-sizing: border-box;
  width: 100%;
  height: 40px;
  margin: 0;
  padding: var(--space-xs);
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--ink-default);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.nv-icon.nv-status-menu__check {
  display: none;
  flex: none;
  font-size: 16px;
}

.nv-status-menu__option:hover,
.nv-status-menu__option--hover,
.nv-status-menu__option[aria-checked="true"] {
  background: var(--bg-weak);
}
.nv-status-menu__option[aria-checked="true"] .nv-icon.nv-status-menu__check {
  display: block;
}

.nv-status-menu__option:focus-visible {
  outline: none;
}

.nv-status-menu__option:disabled,
.nv-status-menu__option[aria-disabled="true"] {
  background: transparent;
  opacity: 0.4;
  cursor: not-allowed;
}

/* Icon */
/* Material Icons, by ligature: <span class="nv-icon" aria-hidden="true">expand_more</span> */
.nv-icon {
  font-family: var(--font-icon);
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  overflow: hidden;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  color: inherit;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "liga";
  user-select: none;
}
.nv-icon--20 { font-size: 20px; }
.nv-icon--16 { font-size: 16px; }
.nv-icon--filled { font-family: var(--font-icon-filled); }

/* KpiWidget */
/* KpiWidget — Sirius kpi-widget (3451:124). Label + value, optional trend chip, context line and info icon. */

.nv-kpi {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xs);
  width: 100%;
  min-width: 0;
  padding: var(--space-s) var(--space-m);
  background: var(--bg-default);
  border: 1px solid var(--line-border-standard);
  border-radius: var(--radius-l);
  font-family: var(--font-sans);
  color: var(--ink-default);
}

.nv-kpi__label-row {
  display: flex;
  align-items: center;
  gap: var(--space-xxs);
  width: 100%;
  overflow: hidden;
}
.nv-kpi__label {
  flex: 1 0 0;
  min-width: 0;
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--ink-secondary);
}
.nv-kpi__info {
  display: inline-flex;
  flex: none;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-secondary);
  cursor: help;
  border-radius: var(--radius-pill);
}
.nv-kpi__info .nv-icon { display: block; }
.nv-kpi__info:focus-visible {
  outline: none;
}

.nv-kpi__value-row {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  max-width: 100%;
  overflow: hidden;
}
.nv-kpi__value {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 300;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  color: var(--ink-default);
  white-space: nowrap;
}
.nv-kpi__context {
  margin: 0;
  font-size: 12px;
  line-height: 1.3;
  color: var(--ink-secondary);
  white-space: nowrap;
}

/* severity colours the value only */
.nv-kpi--warning .nv-kpi__value { color: var(--ink-warning); }
.nv-kpi--error .nv-kpi__value { color: var(--ink-error); }

/* size=compact: narrow columns and mobile — padding 16, label and context at 10 */
.nv-kpi--compact { padding: var(--space-s); }
.nv-kpi--compact .nv-kpi__label,
.nv-kpi--compact .nv-kpi__context { font-size: 10px; }

/* metric strip: widgets fill the row */
.nv-kpi-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: var(--space-s);
}

/* Loader */
/* Loader — Sirius loaders (Figma 3:7687).
   Spinner types: standard (default) and --white. Result types (static ring + icon):
   --success, --info, --alert, --error, --neutral. Six sizes, 16 to 72 px.
   Rings are drawn centred on the box edge, as in Figma, so the stroke overflows the box by half its width. */

.nv-loader {
  --nv-loader-size: 72px;
  --nv-loader-track: 3px;
  --nv-loader-arc: 5px;
  --nv-loader-ring: 3px;
  --nv-loader-icon: 32px;
  display: inline-grid;
  flex: none;
  place-items: center;
  width: var(--nv-loader-size);
  height: var(--nv-loader-size);
  color: var(--ink-action);
  vertical-align: middle;
}

.nv-loader__svg,
.nv-loader__icon {
  grid-area: 1 / 1;
  display: block;
  overflow: visible;
}

.nv-loader__svg {
  width: 100%;
  height: 100%;
}

.nv-loader__track {
  fill: none;
  stroke: var(--line-border-standard);
  stroke-width: var(--nv-loader-track);
}

.nv-loader__arc {
  fill: none;
  stroke: currentColor;
  stroke-width: var(--nv-loader-arc);
  stroke-linecap: round;
  stroke-dasharray: 3 1; /* three quarters of the ring (pathLength="4") */
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  transform-box: view-box;
}

.nv-loader .nv-loader__icon {
  width: var(--nv-loader-icon);
  height: var(--nv-loader-icon);
  font-size: var(--nv-loader-icon); /* Material Icons glyph scales with the ring */
}

/* Spinners rotate; result types do not. */
.nv-loader:not(.nv-loader--positive):not(.nv-loader--info):not(.nv-loader--warning):not(.nv-loader--error):not(.nv-loader--neutral) .nv-loader__svg {
  animation: nv-loader-spin 0.9s linear infinite;
}

@keyframes nv-loader-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .nv-loader .nv-loader__svg {
    animation: none !important;
  }
}

/* Sizes */
.nv-loader--md { --nv-loader-size: 56px; --nv-loader-track: 3px; --nv-loader-arc: 4px; --nv-loader-ring: 3px; --nv-loader-icon: 24px; }
.nv-loader--sm { --nv-loader-size: 40px; --nv-loader-track: 3px; --nv-loader-arc: 3px; --nv-loader-ring: 2px; --nv-loader-icon: 24px; }
.nv-loader--xs { --nv-loader-size: 32px; --nv-loader-track: 3.2px; --nv-loader-arc: 3.2px; --nv-loader-ring: 2px; --nv-loader-icon: 16px; }
.nv-loader--2xs { --nv-loader-size: 24px; --nv-loader-track: 2.4px; --nv-loader-arc: 2.4px; --nv-loader-ring: 1.5px; --nv-loader-icon: 12px; }
.nv-loader--3xs { --nv-loader-size: 16px; --nv-loader-track: 1.6px; --nv-loader-arc: 1.6px; --nv-loader-ring: 1px; --nv-loader-icon: 8px; }

/* standard-white: white arc on a half-opacity track, for dark surfaces */
.nv-loader--white { color: var(--ink-inverse); }
.nv-loader--white .nv-loader__track { opacity: 0.5; }
.nv-loader--white.nv-loader--xs { --nv-loader-track: 3px; --nv-loader-arc: 3px; }
.nv-loader--white.nv-loader--2xs { --nv-loader-track: 2.25px; --nv-loader-arc: 2.25px; }
.nv-loader--white.nv-loader--3xs { --nv-loader-track: 1.5px; --nv-loader-arc: 1.5px; }

/* Result types: full ring in the state colour, icon in the middle */
.nv-loader--positive,
.nv-loader--info,
.nv-loader--warning,
.nv-loader--error,
.nv-loader--neutral {
  --nv-loader-track: var(--nv-loader-ring);
}

.nv-loader--positive .nv-loader__track,
.nv-loader--info .nv-loader__track,
.nv-loader--warning .nv-loader__track,
.nv-loader--error .nv-loader__track,
.nv-loader--neutral .nv-loader__track {
  stroke: currentColor;
  stroke-linecap: round;
}

.nv-loader--positive { color: var(--ink-positive); }
.nv-loader--info { color: var(--ink-weak); }
.nv-loader--warning { color: var(--line-border-warning); }
.nv-loader--warning .nv-loader__icon { color: var(--bg-warning); }
.nv-loader--error { color: var(--line-border-error); }
.nv-loader--error .nv-loader__icon { color: var(--ink-error); }
.nv-loader--neutral { color: var(--ink-accent-hover); }

/* Default size (72px), named so markup can state it. */
.nv-loader--lg {}

/* Logo */
/* Logo — Sirius brand logo (Figma 9:1118). Artwork lives in assets/logo-*.svg; never recolor it in CSS. */
.nv-logo {
  display: inline-block;
  flex-shrink: 0;
  line-height: 0;
}
.nv-logo__img {
  display: block;
  max-width: none;
}
.nv-logo:focus-visible {
  outline: none;
}

/* Modal */
/* Modal — Sirius modals (Figma page "modals" 494:702)
   Modal/Card 900:837 · Modal/Header 494:1468 · Modal/Body 905:662 · Modal/Footer 900:753 · Modal in viewport 900:838 */

/* ---------- Card (900:837) ---------- */
.nv-modal {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 560px;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-l);
  background: var(--bg-default);
  box-shadow: 0 8px 32px 0 rgb(0 0 0 / 0.15); /* untokenized */
  overflow: hidden;
  font-family: var(--font-sans);
  color: var(--ink-default);
}
.nv-modal--md { width: 800px; }
.nv-modal--lg { width: 1200px; }
/* size=large, layout=split: left panel + 400px right column holding header/body/footer */
.nv-modal--split {
  width: 1200px;
  flex-direction: row;
}
.nv-modal__aside {
  flex: 1 1 0;
  min-width: 0;
  min-height: 400px;
  background: #f2f4ff; /* untokenized */
}
.nv-modal__panel {
  display: flex;
  flex-direction: column;
  flex: none;
  width: 400px;
  max-width: 100%;
  border-left: 1px solid #e7e8ed; /* untokenized */
}

/* Native <dialog> usage: keep the UA's hidden state and paint the Sirius scrim as the backdrop */
dialog.nv-modal {
  max-height: calc(100vh - var(--space-l));
  margin: auto;
}
dialog.nv-modal:not([open]) { display: none; }
.nv-modal::backdrop {
  background: rgb(65 72 77 / 0.7); /* same scrim as Overlay; untokenized */
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

/* ---------- Header (494:1468) ---------- */
/* type=Ltitle+close (default) */
.nv-modal__header {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--space-xxs);
  padding: var(--space-m) var(--space-m) 0;
}
.nv-modal__title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
}
.nv-modal__title-row > .nv-modal__title { flex: 1 1 0; }
.nv-modal__title {
  min-width: 0;
  margin: 0;
  font-size: 24px;
  line-height: 1.3;
  font-weight: 600;
  color: var(--ink-default);
  overflow: hidden;
  text-overflow: ellipsis;
}
.nv-modal__description {
  margin: 0;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 400;
  color: var(--ink-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nv-modal__divider {
  display: block;
  flex: none;
  height: 1px;
  margin: var(--space-s) 0 0;
  border: 0;
  background: var(--line-border-standard);
}
/* type=Ltitle: no close, divider sits 4px under the title, 16px padding below */
.nv-modal__header--title { padding-bottom: var(--space-s); }
.nv-modal__header--title > .nv-modal__divider { margin-top: 0; }

/* Bar types (close-label, double-buttons, single-buttons, three-buttons, cancel-label, address, outside-search):
   72px tall (80 with three buttons), padding 24/24/16, gap 8 between the bar and the divider */
.nv-modal__header--bar {
  gap: var(--space-xs);
  min-height: 72px;
  padding-bottom: var(--space-s);
}
.nv-modal__header--bar > .nv-modal__divider { margin-top: 0; }
/* Centred-title bar: start slot · centred title · end slot */
.nv-modal__bar {
  display: grid;
  grid-template-columns: 1fr minmax(0, auto) 1fr;
  align-items: center;
  gap: var(--space-xs);
  min-height: 24px;
}
.nv-modal__bar > :first-child { justify-self: start; }
.nv-modal__bar > :last-child { justify-self: end; }
/* Leading-title bar (double-buttons, three-buttons): close · title fills · trailing buttons */
.nv-modal__bar--start {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}
.nv-modal__bar--start > .nv-modal__bar-title {
  flex: 1 1 0;
  text-align: left;
}
.nv-modal__bar-title {
  min-width: 0;
  margin: 0;
  font-size: 16px;
  line-height: 1.3;
  font-weight: 600;
  color: var(--ink-default);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nv-modal__bar-subtitle {
  margin: 0;
  font-size: 12px;
  line-height: 1.3;
  font-weight: 400;
  color: var(--ink-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nv-modal__bar-end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-xs);
}
/* type=address: overline + title stacked */
.nv-modal__bar-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  max-width: 295px;
}
.nv-modal__bar-overline {
  margin: 0;
  font-size: 12px;
  line-height: 1.3;
  font-weight: 400;
  color: var(--ink-default);
}
.nv-modal__bar-stack > .nv-modal__bar-title { text-align: left; max-width: 100%; }
/* type=cancel-label: plain text "Cancel" action, 16 regular */
.nv-modal__cancel {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 16px;
  line-height: 20px;
  font-weight: 400;
  color: var(--ink-default);
  cursor: pointer;
  border-radius: var(--radius-xss);
}
.nv-modal__cancel:hover { color: var(--ink-accent-hover); }
.nv-modal__cancel:active { color: var(--ink-accent-pressed); }
.nv-modal__cancel:focus-visible {
  outline: none;
}
/* type=outside-search: bar + back-button search input underneath (128px tall) */
.nv-modal__header--search { min-height: 128px; }
.nv-modal__search {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  width: 327px;
  max-width: 100%;
  height: 48px;
  padding: 12px var(--space-m) 12px var(--space-s);
  border: 1px solid var(--line-border-standard);
  border-radius: var(--radius-m);
  background: var(--bg-default);
}
.nv-modal__search:focus-within { border-color: var(--line-border-strong); }
.nv-modal__search-back {
  display: inline-flex;
  flex: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-default);
  cursor: pointer;
  border-radius: var(--radius-xss);
}
.nv-modal__search-back:focus-visible {
  outline: none;
}
.nv-modal__search-input {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  line-height: 1.3;
  color: var(--ink-default);
  outline: none;
}
.nv-modal__search-input::placeholder { color: var(--ink-default); }

/* ---------- Body (905:662) ---------- */
/* type=Empty: free slot, 120 min */
.nv-modal__body {
  box-sizing: border-box;
  min-height: 120px;
  background: var(--bg-default);
}
/* type=Form */
.nv-modal__body--form,
.nv-modal__body--progress {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-m);
  min-height: 0;
  padding: var(--space-l);
}
.nv-modal__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.nv-modal__field-label {
  font-size: 14px;
  line-height: 1.3;
  font-weight: 500;
  color: #616373; /* untokenized */
}
.nv-modal__input {
  box-sizing: border-box;
  width: 100%;
  height: 44px;
  margin: 0;
  padding: 12px var(--space-s);
  border: 1px solid #d1d6db; /* untokenized */
  border-radius: var(--radius-xs);
  background: var(--bg-default);
  font: inherit;
  font-size: 14px;
  line-height: 1.3;
  color: var(--ink-default);
}
.nv-modal__input::placeholder { color: #9ea1ab; /* untokenized */ }
.nv-modal__input:focus-visible {
  outline: none;
}
/* type=Upload */
.nv-modal__body--upload {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  min-height: 0;
  padding: var(--space-l);
}
.nv-modal__dropzone {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 160px;
  margin: 0;
  border: 1.5px dashed #878ffc; /* untokenized */
  border-radius: var(--radius-s);
  background: #f2f5ff; /* untokenized */
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}
.nv-modal__dropzone:focus-visible {
  outline: none;
}
.nv-modal__dropzone-icon {
  font-size: 32px;
  line-height: 1;
  color: #616bf5; /* untokenized */
}
.nv-modal__dropzone-text {
  font-size: 14px;
  line-height: 1.3;
  color: #616373; /* untokenized */
}
/* type=Success */
.nv-modal__body--success {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-s);
  min-height: 0;
  padding: 48px var(--space-l);
  text-align: center;
}
.nv-modal__success-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  padding: 0 var(--space-xxs);
  border-radius: var(--radius-l);
  background: #d9f2de; /* untokenized */
  font-size: 28px;
  line-height: 1.3;
  font-weight: 700;
  color: #219640; /* untokenized */
}
.nv-modal__success-title {
  margin: 0;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 700;
  color: #121217; /* untokenized */
}
.nv-modal__success-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.3;
  color: #616373; /* untokenized */
}
/* type=Progress */
.nv-modal__file {
  display: flex;
  align-items: center;
  gap: 12px;
}
.nv-modal__file-name {
  flex: 1 1 0;
  min-width: 0;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 500;
  color: #121217; /* untokenized */
}
.nv-modal__file-size {
  flex: none;
  font-size: 12px;
  line-height: 1.3;
  color: #9ea1ab; /* untokenized */
}
.nv-modal__progress {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.nv-modal__progress-track {
  height: 8px;
  border-radius: var(--radius-xss);
  background: #edf0f2; /* untokenized */
  overflow: hidden;
}
.nv-modal__progress-fill {
  height: 100%;
  border-radius: var(--radius-xss);
  background: #616bf5; /* untokenized */
}
.nv-modal__progress-label {
  font-size: 12px;
  line-height: 1.3;
  font-weight: 500;
  color: #616373; /* untokenized */
}

/* ---------- Footer (900:753) ---------- */
.nv-modal__footer {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  padding: var(--space-m);
}
/* inset divider (Insent=Yes): 16px in from each side */
.nv-modal__footer-divider {
  display: block;
  height: 1px;
  margin: 0 var(--space-s);
  border: 0;
  background: var(--line-border-standard);
}
/* type=ghost-primary · secondary-primary · single-primary: right-aligned, gap 12 */
.nv-modal__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}
/* type=equal-width: buttons share the row */
.nv-modal__actions--equal { justify-content: stretch; }
.nv-modal__actions--equal > * { flex: 1 1 0; min-width: 0; }

/* NavBar */
/* NavBar — Sirius navbar-v2 (Figma 2247:91): 240px left navigation, Expanded and Collapsed */
.nv-navbar {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: var(--layout-nav-width);
  height: 100%;
  padding: var(--space-xl) var(--space-s);
  overflow: hidden auto;
  background: var(--ink-inverse);
  box-shadow: var(--elevation-003);
  box-sizing: border-box;
  font-family: var(--font-sans);
  color: var(--ink-action);
}
.nv-navbar__top {
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
}
.nv-navbar__logo-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  padding: 0 var(--space-xs);
}
.nv-navbar__logo {
  display: block;
  line-height: 0;
  border-radius: var(--radius-xss);
}
/* collapse-btn: 32px tall, 8px radius, 20px menu_open icon */
.nv-navbar__collapse {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-xs);
  background: none;
  color: var(--ink-action);
  cursor: pointer;
}
.nv-navbar__collapse .nv-icon { display: block; }

.nv-navbar__items {
  display: flex;
  flex-direction: column;
  gap: var(--space-xxs);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* nav-item-v2 (2240:35): group header */
.nv-navbar__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  width: 100%;
  height: 40px;
  margin: 0;
  padding: var(--space-xs);
  border: 0;
  border-radius: var(--radius-s);
  background: none;
  box-sizing: border-box;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink-action);
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.nv-navbar__item-main {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  min-width: 0;
}
.nv-navbar__item-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}
.nv-navbar__chevron {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: #121b4a; /* untokenized: Figma icon fill */
}
/* Active=true */
.nv-navbar__item--active,
.nv-navbar__item[aria-current="page"] {
  background: var(--bg-weak);
}

/* sub-nav-item-v2 (2252:1624): child row, indented under its group */
.nv-navbar__subitem {
  display: flex;
  align-items: center;
  height: 36px;
  padding: 0 0 0 var(--space-m);
  border-radius: var(--radius-s);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--ink-secondary);
  text-decoration: none;
  white-space: nowrap;
}
.nv-navbar__subitem-content {
  display: flex;
  flex: 1 0 0;
  align-items: center;
  gap: var(--space-xs);
  height: 36px;
  padding: 0 var(--space-xs);
  border-radius: var(--radius-s);
  min-width: 0;
}
.nv-navbar__subitem-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}
/* Active=On */
.nv-navbar__subitem[aria-current="page"] .nv-navbar__subitem-content {
  background: var(--bg-weak);
  font-weight: 500;
  color: var(--ink-action);
}
.nv-navbar__item:focus-visible,
.nv-navbar__subitem:focus-visible,
.nv-navbar__collapse:focus-visible,
.nv-navbar__logo:focus-visible,
.nv-navbar__agent:focus-visible,
.nv-navbar__see-all:focus-visible,
.nv-navbar__logout:focus-visible {
  outline: none;
}

/* bottom-section */
.nv-navbar__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}
.nv-navbar__agents {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}
.nv-navbar__agents-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}
.nv-navbar__agents-header {
  padding: 0 0 var(--space-xxs) var(--space-xs);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink-weak);
}
/* agent-row-v2 (2242:36) */
.nv-navbar__agent {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  height: 40px;
  padding: var(--space-xxs) 12px var(--space-xxs) var(--space-xs); /* 12px untokenized */
  border-radius: var(--radius-s);
  box-sizing: border-box;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink-action);
  text-decoration: none;
  white-space: nowrap;
}
.nv-navbar__agent-main {
  display: flex;
  align-items: center;
  gap: 12px; /* untokenized */
}
.nv-navbar__avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  background: var(--bg-mild);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  color: var(--ink-action);
}
.nv-navbar__status {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ink-positive);
}
.nv-navbar__agents-footer {
  padding: 0 var(--space-xs);
}
.nv-navbar__see-all {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xxs);
  border-radius: var(--radius-xss);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink-action);
  text-decoration: none;
}
.nv-navbar__see-all .nv-icon { display: block; }
.nv-navbar__divider {
  height: 1px;
  margin: 0;
  border: 0;
  background: var(--line-border-standard);
}
/* nav-logout-v2 (2242:44) */
.nv-navbar__logout {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  width: 100%;
  height: 40px;
  margin: 0;
  padding: var(--space-xs);
  border: 0;
  border-radius: var(--radius-s);
  background: none;
  box-sizing: border-box;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink-action);
  cursor: pointer;
}
.nv-navbar__logout .nv-icon { flex-shrink: 0; }

/* State=Collapsed: 72px rail, icons only */
.nv-navbar--collapsed {
  align-items: center;
  width: 72px;
}
.nv-navbar--collapsed .nv-navbar__top,
.nv-navbar--collapsed .nv-navbar__bottom { align-items: center; width: 100%; }
.nv-navbar--collapsed .nv-navbar__items { gap: var(--space-xs); align-items: center; }
.nv-navbar--collapsed .nv-navbar__item,
.nv-navbar--collapsed .nv-navbar__logout,
.nv-navbar--collapsed .nv-navbar__agent {
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
}
.nv-navbar--collapsed .nv-navbar__item-label,
.nv-navbar--collapsed .nv-navbar__logout-label,
.nv-navbar--collapsed .nv-navbar__agent-name,
.nv-navbar--collapsed .nv-navbar__chevron,
.nv-navbar--collapsed .nv-navbar__sub-row,
.nv-navbar--collapsed .nv-navbar__agents-header {
  display: none;
}
/* collapsed agent: status dot sits on the avatar at 22/22 */
.nv-navbar--collapsed .nv-navbar__agent { position: relative; }
.nv-navbar--collapsed .nv-navbar__status {
  position: absolute;
  top: 26px;
  left: 26px;
}
.nv-navbar--collapsed .nv-navbar__agents { align-items: center; }
.nv-navbar--collapsed .nv-navbar__agents-footer { padding: 0; }
.nv-navbar--collapsed .nv-navbar__divider { width: 100%; }

/* sidebar-filter-item (4829:29): in-page category / filter row */
.nv-sidebar-filter {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  width: 100%;
  margin: 0;
  padding: var(--space-xs);
  border: 0;
  border-radius: var(--radius-s);
  background: none;
  box-sizing: border-box;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--ink-secondary);
  text-align: left;
  cursor: pointer;
}
.nv-sidebar-filter__icon { flex-shrink: 0; }
.nv-sidebar-filter:hover,
.nv-sidebar-filter--hover {
  background: var(--bg-gray-weak);
  color: var(--ink-default);
}
.nv-sidebar-filter[aria-pressed="true"],
.nv-sidebar-filter[aria-current="true"] {
  background: var(--bg-weak);
  font-weight: 600;
  color: var(--ink-default);
}
.nv-sidebar-filter:focus-visible {
  outline: none;
}

/* Notification */
/* Notification — Sirius toast (Figma 3:7942) and suggestion-banner (Figma 4082:220). */

/* ---------- Toast ---------- */
.nv-toast {
  --nv-toast-ink: var(--ink-default);
  --nv-toast-text: var(--nv-toast-ink);
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
  box-sizing: border-box;
  width: 100%;
  max-width: 480px;
  padding: var(--space-s) var(--space-m);
  border: 1px solid transparent;
  border-radius: var(--radius-m);
  background: var(--bg-gray);
  color: var(--nv-toast-ink);
  font-family: var(--font-sans);
}

.nv-toast__icon {
  display: block;
  flex: none;
  font-size: 24px;
}

.nv-toast__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--space-s);
  min-width: 0;
}

.nv-toast__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-xxs);
}

.nv-toast__title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
}

.nv-toast__message {
  margin: 0;
  color: var(--nv-toast-text);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
}

.nv-toast__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

/* States (filled is the default look) */
.nv-toast--positive { --nv-toast-ink: var(--ink-positive); background: var(--bg-positive-weak); }
.nv-toast--warning { --nv-toast-ink: var(--ink-warning); background: var(--bg-warning-weak); }
.nv-toast--info { --nv-toast-ink: var(--ink-action); background: var(--bg-weak); }
.nv-toast--error { --nv-toast-ink: var(--ink-error); background: var(--bg-error-weak); }
.nv-toast--neutral { --nv-toast-ink: var(--ink-default); background: var(--bg-gray); }

/* filled=false: white surface, state-coloured border, secondary message */
.nv-toast--outline {
  --nv-toast-text: var(--ink-secondary);
  background: var(--bg-default);
}

.nv-toast--outline.nv-toast--positive { border-color: var(--line-border-positive); }
.nv-toast--outline.nv-toast--warning { border-color: var(--line-border-warning); }
.nv-toast--outline.nv-toast--info { border-color: var(--ink-accent-hover); }
.nv-toast--outline.nv-toast--error { border-color: var(--line-border-error); }
.nv-toast--outline.nv-toast--neutral { border-color: var(--line-border-standard); }

/* compact=true: smaller type, no gap between title and message, no actions */
.nv-toast--compact .nv-toast__text { gap: var(--space-none); }
.nv-toast--compact .nv-toast__title { font-size: 14px; }
.nv-toast--compact .nv-toast__message { font-size: 12px; }

/* ---------- Suggestion banner ---------- */
.nv-suggestion {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  box-sizing: border-box;
  width: 100%;
  max-width: 480px;
  padding: var(--space-s);
  border-radius: var(--radius-m);
  background: var(--bg-weak);
  font-family: var(--font-sans);
}

.nv-suggestion__icon {
  display: block;
  flex: none;
  width: 24px;
  height: 24px;
}

.nv-suggestion__message {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  color: var(--ink-action);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
}

.nv-suggestion__actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--space-xs);
}

/* Overlay */
/* Overlay — Sirius "backgroud layer" scrim (Figma page overlay 277:3501, component 277:3509) */
.nv-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(65 72 77 / 0.7); /* #41484D at 70%: untokenized */
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

/* PageHeader */
/* PageHeader — Sirius "Headers" (Figma 2311:1396): title, description, actions, divider, breadcrumbs */
.nv-page-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  padding: var(--space-l) 56px 0 28px; /* 56px / 28px untokenized */
  font-family: var(--font-sans);
  color: var(--ink-default);
}
.nv-page-header__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
}
.nv-page-header__heading {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-xxs);
  min-height: 67px; /* untokenized */
  min-width: 0;
}
.nv-page-header__title {
  margin: 0;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.3;
  background: var(--gradient-04);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  white-space: nowrap;
}
.nv-page-header__description {
  margin: 0;
  font-size: 14px;
  line-height: 1.3;
  color: var(--ink-default);
}
.nv-page-header__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-xs);
}
/* "Last updated" chip: the Chip component (outline, sm) with a regular-weight lead-in */
.nv-page-header__updated-label {
  font-weight: 400;
}

/* Pagination */
/* Pagination — Sirius page controls (Figma page "pagination" 3:8624) */

/* page-control/default (4:279): dots in a pill */
.nv-page-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xxs);
  padding: var(--space-xxs) var(--space-xs);
  background: var(--bg-weak);
  border-radius: var(--radius-pill);
}
/* _dot (4:383): 8px hit box, 6px dot */
.nv-page-control__dot {
  position: relative;
  display: block;
  width: 8px;
  height: 8px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 50%;
  cursor: pointer;
}
.nv-page-control__dot::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 50%;
  background: var(--ink-weak); /* type=unselected */
}
.nv-page-control__dot[aria-current="true"]::before {
  background: var(--ink-default); /* type=selected */
}
.nv-page-control__dot:focus-visible {
  outline: none;
}

/* page-control / progress (4:374): 73px track with a filled bar */
.nv-page-progress {
  display: flex;
  flex-direction: column;
  width: 73px;
  padding: var(--space-xxs);
  border-radius: var(--radius-pill);
  box-sizing: border-box;
}
.nv-page-progress__bar {
  display: flex;
  height: 8px;
  padding: 1px;
  background: var(--bg-mild);
  border-radius: var(--radius-l);
  box-sizing: border-box;
}
.nv-page-progress__fill {
  height: 100%;
  width: 24px; /* set per step, e.g. style="width:40%" */
  background: var(--ink-accent-hover);
  border-radius: var(--radius-l);
}

/* progress (4:382): label + page-control / progress */
.nv-progress-step {
  display: inline-flex;
  align-items: center;
  gap: 5px; /* untokenized */
}
.nv-progress-step__label {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink-secondary);
  text-align: right;
  white-space: nowrap;
}

/* Progress */
/* Progress — Sirius progress-bar (Figma 653:1434) built on the internal _progress-bar (653:1257).
   The fill width comes from the --nv-progress custom property (0% to 100%), set per instance. */
.nv-progress {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  font-family: var(--font-sans);
  color: var(--ink-default);
}

.nv-progress__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-xs);
}

.nv-progress__label {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}

.nv-progress__value-group {
  display: flex;
  align-items: flex-end;
  gap: var(--space-xs);
  white-space: nowrap;
}

.nv-progress__value {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 300;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.nv-progress__units {
  color: var(--ink-secondary);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.3;
}

/* Bar (track + fill) */
.nv-progress__bar {
  --nv-progress: 0%;
  display: flex;
  overflow: hidden;
  width: 100%;
  height: 10px;
  border-radius: 6px;
  background: var(--bg-weak);
}

.nv-progress__fill {
  width: var(--nv-progress);
  height: 100%;
  border-radius: 6px;
  background: var(--ink-accent-hover);
}

.nv-progress--warning .nv-progress__bar { background: var(--bg-warning-weak); }
.nv-progress--warning .nv-progress__fill { background: var(--bg-warning); }
.nv-progress--positive .nv-progress__bar { background: var(--bg-positive-weak); }
.nv-progress--positive .nv-progress__fill { background: var(--bg-positive); }
.nv-progress--error .nv-progress__bar { background: var(--bg-error-weak); }
.nv-progress--error .nv-progress__fill { background: var(--bg-error); }

/* RatingStep */
/* Rating step — Sirius "rating-step" page (Figma 3293:2). One numbered step of a rating scale.
   A visually hidden radio + a 36 px circle; place one per step inside a radiogroup. */

.nv-rating-step {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}

.nv-rating-step__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
  opacity: 0;
}

.nv-rating-step__num {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line-border-standard);
  border-radius: 50%;
  background: var(--bg-default);
  color: var(--ink-default);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  -webkit-font-smoothing: antialiased;
}

.nv-rating-step__input:checked + .nv-rating-step__num {
  border-color: var(--ink-action);
  background: var(--ink-action);
  color: var(--ink-inverse);
}

.nv-rating-step__input:focus-visible + .nv-rating-step__num {
  outline: none;
}

.nv-rating-step:has(.nv-rating-step__input:disabled) {
  cursor: not-allowed;
}
.nv-rating-step__input:disabled + .nv-rating-step__num {
  border-color: var(--bg-disabled);
  background: var(--bg-disabled);
  color: var(--ink-disabled);
}

/* Search */
/* Search: Sirius "search" pattern 653:2078 with its atoms _search-input 455:776,
   _search-result-item 653:1730, _search-empty-state 653:1739 and search-results 653:1831. */
.nv-search {
  display: flex;
  flex-direction: column;
  width: 100%;
  font-family: var(--font-sans);
  color: var(--ink-default);
}

/* input */
.nv-search__field {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  height: 48px;
  padding: 0 var(--space-m) 0 var(--space-s);
  background: var(--bg-default);
  border-radius: var(--radius-m);
  box-shadow: inset 0 0 0 1px var(--line-border-standard);
}
.nv-search--sm .nv-search__field { height: 40px; }
/* with a value the trailing clear button takes the right padding down to 16 (large) / 12 (small) */
.nv-search__field:has(.nv-search__input:not(:placeholder-shown)) { padding-right: var(--space-s); }
.nv-search--sm .nv-search__field:has(.nv-search__input:not(:placeholder-shown)) { padding-right: 12px; }
/* Figma has no focus state; none is drawn */
.nv-search__field:has(.nv-search__input:focus-visible) { outline: none; }

.nv-search__icon {
  display: block;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.nv-search__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: var(--radius-xss);
  cursor: pointer;
}
.nv-search__back .nv-icon { display: block; }
.nv-search__back:focus-visible { outline: none; }

.nv-search__input {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 14px;
  line-height: 1.3;
  color: var(--ink-default);
  text-overflow: ellipsis;
  outline: none;
}
.nv-search__input::placeholder { color: var(--ink-default); opacity: 1; }
.nv-search__input:focus::placeholder { color: var(--ink-weak); }
.nv-search__input::-webkit-search-cancel-button { display: none; }

.nv-search__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: var(--radius-xss);
  cursor: pointer;
}
.nv-search__clear .nv-icon { display: block; }
.nv-search__clear:focus-visible { outline: none; }
.nv-search__input:placeholder-shown ~ .nv-search__clear { display: none; }

/* static demo modifier for the focused state (placeholder turns weak) */
.nv-search--focused .nv-search__input::placeholder { color: var(--ink-weak); }

/* loading: the query is replaced by a weak "searching" line, no clear button */
.nv-search--loading .nv-search__input::placeholder { color: var(--ink-weak); }
.nv-search--loading .nv-search__clear { display: none; }

/* disabled */
.nv-search--disabled .nv-search__field { opacity: 0.4; }
.nv-search--disabled .nv-search__input,
.nv-search--disabled .nv-search__back { cursor: not-allowed; }

/* results panel */
.nv-search__panel {
  display: flex;
  flex-direction: column;
  margin: var(--space-xxs) 0 0;
  padding: var(--space-xs) 0;
  list-style: none;
  background: var(--bg-default);
  border-radius: var(--radius-m);
  box-shadow: var(--elevation-001);
}
.nv-search__panel--standalone { margin-top: 0; }

.nv-search__section {
  display: flex;
  align-items: center;
  height: 36px;
  margin: 0;
  padding: var(--space-xs) var(--space-s) var(--space-xxs);
  box-sizing: border-box;
  font-size: 12px;
  line-height: 1.3;
  font-weight: 600;
  color: var(--ink-secondary);
}

.nv-search__item {
  display: flex;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 0 var(--space-s);
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  font: inherit;
  font-size: 14px;
  line-height: 1.3;
  color: var(--ink-default);
  text-align: left;
}
button.nv-search__item { cursor: pointer; }
.nv-search__item:hover,
.nv-search__item--hover { background: var(--bg-gray-weak); }
.nv-search__item:active,
.nv-search__item--pressed { background: var(--bg-disabled); }
button.nv-search__item:focus-visible,
.nv-search__item-action:focus-visible { outline: none; }

/* recent rows hold two actions: open the term, remove it */
.nv-search__item-action {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 0;
  min-width: 0;
  align-self: stretch;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: left;
  border-radius: var(--radius-xs);
  cursor: pointer;
}

.nv-search__item-icon {
  display: block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.nv-search__item-text { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.nv-search__item--subtitle { min-height: 52px; padding-top: 6px; padding-bottom: 6px; }
.nv-search__item-content { display: flex; flex-direction: column; gap: 2px; flex: 1 1 0; min-width: 0; }
.nv-search__item-title { font-size: 14px; font-weight: 600; }
.nv-search__item-subtitle { font-size: 12px; color: var(--ink-secondary); }

.nv-search__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: var(--radius-xss);
  cursor: pointer;
}
.nv-search__remove .nv-icon { display: block; }
.nv-search__remove:focus-visible { outline: none; }

.nv-search__footer {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  margin: 0;
  padding: 0 var(--space-s);
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 12px;
  line-height: 1.3;
  font-weight: 600;
  color: var(--ink-accent-hover);
  text-decoration: none;
  cursor: pointer;
}
.nv-search__footer:focus-visible { outline: none; }

/* loading skeleton */
.nv-search__skeleton {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 44px;
  padding: 0 var(--space-s);
}
.nv-search__skeleton::before {
  content: "";
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border-radius: var(--radius-pill);
  background: var(--bg-disabled);
}
.nv-search__skeleton-bar {
  height: 14px;
  width: 150px;
  border-radius: var(--radius-xss);
  background: var(--bg-disabled);
}

/* empty and error body */
.nv-search__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-l) var(--space-m);
  text-align: center;
}
.nv-search__empty .nv-search__empty-icon { display: block; width: 32px; height: 32px; font-size: 32px; }
.nv-search__empty-title { margin: 0; font-size: 14px; line-height: 1.3; font-weight: 600; color: var(--ink-default); }
.nv-search__empty-text { margin: 0; font-size: 12px; line-height: 1.3; color: var(--ink-secondary); }
.nv-search__skeleton:nth-child(3n + 2) .nv-search__skeleton-bar { width: 180px; }
.nv-search__skeleton:nth-child(3n) .nv-search__skeleton-bar { width: 210px; }

/* SegmentedControl */
/* Segmented control — Sirius "segmented controls" page (Figma 4:2057).
   Built on native radio inputs: arrow keys and form submission work without script. */

.nv-segmented {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  align-items: center;
  box-sizing: border-box;
  height: 40px;
  padding: var(--space-xxs);
  overflow: hidden;
  border-radius: var(--radius-m);
  background: var(--bg-gray-weak);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

.nv-segmented__item {
  position: relative;
  display: flex;
  min-width: 0;
  cursor: pointer;
}

/* Visually hidden, still focusable and announced */
.nv-segmented__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
  opacity: 0;
}

.nv-segmented__seg {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-sizing: border-box;
  padding: 6px var(--space-s);
  border-radius: var(--radius-s);
  background: transparent;
  color: var(--ink-secondary);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
  white-space: nowrap;
}

.nv-segmented__icon {
  flex: none;
  font-size: 20px;
}

/* Hover (unselected) */
.nv-segmented__item:hover .nv-segmented__seg,
.nv-segmented__seg--hover {
  background: var(--bg-default);
  color: var(--ink-default);
}

/* Selected */
.nv-segmented__input:checked + .nv-segmented__seg {
  background: var(--bg-default);
  color: var(--ink-default);
  font-weight: 600;
}

/* Keyboard focus */
.nv-segmented__input:focus-visible + .nv-segmented__seg {
  outline: none;
}

/* Disabled */
.nv-segmented__item:has(.nv-segmented__input:disabled) {
  cursor: not-allowed;
}
.nv-segmented__input:disabled + .nv-segmented__seg,
.nv-segmented__item:hover .nv-segmented__input:disabled + .nv-segmented__seg {
  background: transparent;
  color: var(--ink-disabled);
  font-weight: 400;
  opacity: 0.5;
}

/* ---- Style: elevated (selected segment lifts) ---- */
.nv-segmented--elevated {
  overflow: visible;
}
.nv-segmented--elevated .nv-segmented__input:checked + .nv-segmented__seg {
  box-shadow: var(--elevation-001);
}

/* ---- Sizes ---- */
.nv-segmented--sm {
  height: 36px;
  border-radius: var(--radius-s);
}
.nv-segmented--sm .nv-segmented__seg {
  padding: var(--space-xxs) 12px;
  border-radius: var(--radius-xs);
}
.nv-segmented--sm .nv-segmented__icon {
  font-size: 16px;
}

.nv-segmented--touch {
  height: 56px;
  border-radius: var(--radius-m);
}
.nv-segmented--touch .nv-segmented__seg {
  height: 48px;
  padding: 0 var(--space-s);
}

/* Slider */
/* Slider — Sirius "slider" page (Figma 420:4018). Native <input type="range">.
   The current position is passed as a custom property, --nv-slider-value (a number, 0–100),
   which script keeps in sync with the input value; it drives the fill and the value label. */

.nv-slider {
  --nv-slider-value: 50;
  --nv-slider-pos: calc(8px + (100% - 16px) * var(--nv-slider-value) / 100);
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-sizing: border-box;
  width: 100%;
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
.nv-slider:has(.nv-slider__value) {
  padding-top: 48px;
}

.nv-slider__row {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.nv-slider__icon {
  flex: none;
  font-size: 24px;
  color: #121b4a;
}

.nv-slider__control {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: 16px;
}

.nv-slider__input {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 16px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}
.nv-slider__input::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--ink-action) 0 var(--nv-slider-pos), var(--bg-gray-weak) var(--nv-slider-pos) 100%);
}
.nv-slider__input::-moz-range-track {
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--bg-gray-weak);
}
.nv-slider__input::-moz-range-progress {
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--ink-action);
}
.nv-slider__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -6px;
  border: 0;
  border-radius: 50%;
  background: var(--ink-action);
}
.nv-slider__input::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 0;
  border-radius: 50%;
  background: var(--ink-action);
}
.nv-slider__input:focus-visible {
  outline: none;
}
.nv-slider__input:focus-visible::-webkit-slider-thumb {
  outline: none;
}
.nv-slider__input:focus-visible::-moz-range-thumb {
  outline: none;
}

/* Value label: white chip + 24 px connector, centred over the thumb */
.nv-slider__value {
  position: absolute;
  bottom: 14px;
  left: var(--nv-slider-pos);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  max-width: 67px;
  transform: translateX(-50%);
  pointer-events: none;
}
.nv-slider__value::after {
  content: "";
  width: 2px;
  height: 24px;
  background: var(--line-border-standard);
}
.nv-slider__value-text {
  padding: var(--space-xxs) var(--space-xs);
  border-radius: var(--radius-xss);
  background: var(--ink-inverse);
  color: var(--ink-default);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}

/* Min / max texts */
.nv-slider__ends {
  display: flex;
  justify-content: space-between;
  gap: var(--space-xs);
  color: var(--ink-default);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.3;
}

/* Disabled */
.nv-slider:has(.nv-slider__input:disabled) .nv-slider__input {
  cursor: not-allowed;
}
.nv-slider__input:disabled::-webkit-slider-runnable-track {
  background: linear-gradient(90deg, var(--ink-disabled) 0 var(--nv-slider-pos), var(--bg-gray-weak) var(--nv-slider-pos) 100%);
}
.nv-slider__input:disabled::-moz-range-progress { background: var(--ink-disabled); }
.nv-slider__input:disabled::-webkit-slider-thumb { background: var(--ink-disabled); }
.nv-slider__input:disabled::-moz-range-thumb { background: var(--ink-disabled); }
.nv-slider:has(.nv-slider__input:disabled) .nv-slider__value-text,
.nv-slider:has(.nv-slider__input:disabled) .nv-slider__ends {
  color: var(--ink-disabled);
}
.nv-slider:has(.nv-slider__input:disabled) .nv-slider__icon {
  color: var(--ink-disabled);
}

/* Table */
/* Table — Sirius cell + cell-header primitives composed into a native <table>.
   Figma: tables page, cell 3025:336, cell-header 3025:385, Table/Cell dropdown/Option 4595:45. */

.nv-table {
  border-collapse: collapse;
  font-family: var(--font-sans);
  color: var(--ink-default);
  background: transparent;
}

/* ---------- cell-header: no fill, no border, sits on canvas ---------- */
.nv-table__head {
  box-sizing: border-box;
  height: 40px;
  padding: var(--space-xs);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink-action);
  text-align: left;
  white-space: nowrap;
  vertical-align: middle;
  background: transparent;
  border: 0;
}
.nv-table--cozy .nv-table__head { height: 44px; }
.nv-table--comfortable .nv-table__head { height: 48px; }
.nv-table__head--end { text-align: right; }

/* sortable header: the whole label is the control */
.nv-table__sort {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  border-radius: var(--radius-xss);
}
.nv-table__sort:focus-visible {
  outline: none;
}
.nv-table__sort-icon {
  color: var(--ink-secondary);
  font-weight: 600;
}
.nv-table__sort-icon::before { content: ""; }
.nv-table__head[aria-sort="ascending"] .nv-table__sort-icon::before { content: "\2191"; }
.nv-table__head[aria-sort="descending"] .nv-table__sort-icon::before { content: "\2193"; }

/* ---------- cell ---------- */
.nv-table__cell {
  box-sizing: border-box;
  height: 32px;
  padding: 0 var(--space-xs);
  background: var(--bg-default);
  border: 1px solid var(--line-border-standard);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--ink-default);
  text-align: left;
  white-space: nowrap;
  vertical-align: middle;
}
.nv-table--cozy .nv-table__cell { height: 36px; }
.nv-table--comfortable .nv-table__cell { height: 40px; }

/* type=code: alphanumeric IDs and dates, Martian Mono, left-aligned */
.nv-table__cell--code,
.nv-table__cell--number {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 300;
  font-variant-numeric: tabular-nums;
}
/* type=number: currency and counts, right-aligned */
.nv-table__cell--number { text-align: right; }

/* type=missing: placeholder copy in ink/weak */
.nv-table__cell--missing { color: var(--ink-weak); }

/* states */
.nv-table__cell:hover,
.nv-table__cell--hover { background: var(--bg-gray-weak); }
.nv-table__cell--selected,
.nv-table__row--selected > .nv-table__cell,
.nv-table__cell[aria-selected="true"],
.nv-table__row[aria-selected="true"] > .nv-table__cell { background: var(--bg-weak); }

/* state=editing: inline input, accent border, placeholder ink/weak */
.nv-table__cell--editing,
.nv-table__cell--editing:hover {
  position: relative;
  background: var(--bg-default);
  padding: 0;
}
.nv-table__input {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: inherit;
  margin: 0;
  padding: 0 var(--space-xs);
  border: 1px solid var(--ink-accent-hover);
  background: var(--bg-default);
  font: inherit;
  color: var(--ink-default);
  text-align: inherit;
  outline: none;
}
.nv-table__input::placeholder { color: var(--ink-weak); opacity: 1; }

/* state=edited: user-overridden value + info marker */
.nv-table__value {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xxs);
  vertical-align: middle;
}
.nv-table__edited {
  display: inline-flex;
  flex: none;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-secondary);
  cursor: help;
  border-radius: var(--radius-pill);
}
.nv-table__edited .nv-icon { display: block; }
.nv-table__edited:focus-visible {
  outline: none;
}

/* ---------- Table/Cell dropdown (in-cell suggestions) ---------- */
.nv-table__suggest {
  display: flex;
  flex-direction: column;
  gap: var(--space-xxs);
  box-sizing: border-box;
  width: 240px;
  margin: 0;
  padding: var(--space-xs);
  list-style: none;
  background: var(--bg-default);
  border-radius: var(--radius-m);
  box-shadow: var(--elevation-002);
}
.nv-table__option {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 var(--space-s);
  border-radius: var(--radius-xs);
  background: var(--bg-default);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.3;
  color: var(--ink-default);
  cursor: pointer;
  white-space: nowrap;
}
.nv-table__option:hover,
.nv-table__option[aria-selected="true"] { background: var(--bg-weak); }

/* a header used as a row label takes the row's height */
.nv-table tbody .nv-table__head { height: auto; padding-top: 0; padding-bottom: 0; }

/* Defaults, named so markup can state them: compact density and a blank cell carry no extra styles. */
.nv-table--compact {}
.nv-table__cell--blank {}

/* Tabs */
/* Tabs — Sirius (Figma page "tabs" 193:3526): tabs-slider, _tab, tabs-category, menu, tabs-section */

/* tabs-slider (193:3600). No side padding on purpose: labels align with the content edge. */
.nv-tabs {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-s);
  overflow-x: auto;
  scrollbar-width: none;
  font-family: var(--font-sans);
}
.nv-tabs::-webkit-scrollbar { display: none; }
/* divider: 1px line at y=48 under the 50px tabs */
.nv-tabs::after {
  content: "";
  position: absolute;
  top: 48px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--line-border-standard);
  pointer-events: none;
}

/* _tab (193:3628) */
.nv-tabs__tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  gap: var(--space-xxs);
  margin: 0;
  padding: var(--space-s) var(--space-xxs); /* the 4px side padding is click area: keep it */
  border: 0;
  background: none;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 18px; /* untokenized: DM Sans 14 "normal" line, keeps the tab at 50px */
  color: var(--ink-weak); /* selected=off */
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
}
.nv-tabs__tab:hover,
.nv-tabs__tab--hover {
  color: var(--ink-accent-hover); /* selected=hover */
}
.nv-tabs__tab[aria-selected="true"] {
  font-weight: 600;
  color: var(--ink-action); /* selected=on */
  cursor: default;
}
.nv-tabs__tab:focus-visible {
  outline: none;
}
.nv-tabs__icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}
/* indicator=true: 3px bar under the selected tab */
.nv-tabs--indicator .nv-tabs__tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1px;
  height: 3px;
  border-radius: var(--radius-pill);
  background: var(--ink-action);
}
/* selected=menu (193:3862): dropdown trigger inside the bar */
.nv-tabs__tab--menu {
  font-weight: 600;
  color: var(--ink-action);
}
.nv-tabs__tab--menu:hover { color: var(--ink-action); }
.nv-tabs__chevron {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

/* tabs-category (292:5416): "Saved views:" + view buttons split by 1px dividers */
.nv-tabs-category {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.3;
}
.nv-tabs-category__label {
  color: var(--ink-default);
  white-space: nowrap;
}
.nv-tabs-category__list {
  display: flex;
  align-items: stretch;
  gap: var(--space-s);
  margin: 0;
  padding: 0;
  list-style: none;
}
.nv-tabs-category__list > li {
  display: flex;
  align-items: center;
}
.nv-tabs-category__list > li + li {
  border-left: 1px solid var(--line-border-standard);
  padding-left: var(--space-s);
}

/* menu (343:4153): table menu row above the tabs */
.nv-tabs-menu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
}
.nv-tabs-menu__icons {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}
/* state=expanded: the trigger gets the strong border while its dropdown is open */
.nv-tabs-menu .nv-btn[aria-expanded="true"] {
  border-color: var(--line-border-strong);
}

/* tabs-section (195:1533): menu + tabs-slider + tabs-category */
.nv-tabs-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

/* Tag */
/* Tag — Sirius status chips (container-status, order status), category tags (tag) and tag-trend.
   Status colours come only from the --container-* / --order-* tokens. */

.nv-tag {
  --nv-tag-ink: var(--ink-default);
  --nv-tag-bg: transparent;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xxs);
  box-sizing: border-box;
  height: 24px;
  padding: var(--space-xxs) var(--space-xs);
  border-radius: var(--radius-xss);
  background: var(--nv-tag-bg);
  color: var(--nv-tag-ink);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}

.nv-tag__icon {
  display: block;
  flex: none;
  font-size: 16px;
}

/* Sub-state of a container status: outlined in the status colour, with the ring icon. */
.nv-tag--outline {
  background: transparent;
  border: 1px solid var(--nv-tag-ink);
}

/* ---------- Container status ---------- */
.nv-tag--booking-confirmation { --nv-tag-ink: var(--container-booking-confirmation); --nv-tag-bg: var(--container-booking-confirmation-weak); }
.nv-tag--container-created { --nv-tag-ink: var(--container-container-created); --nv-tag-bg: var(--container-container-created-weak); }
.nv-tag--in-route-origin { --nv-tag-ink: var(--container-in-route-origin); --nv-tag-bg: var(--container-in-route-origin-weak); }
.nv-tag--in-transit { --nv-tag-ink: var(--container-in-transit); --nv-tag-bg: var(--container-in-transit-weak); }
.nv-tag--arrived-at-port { --nv-tag-ink: var(--container-arrived-at-port); --nv-tag-bg: var(--container-arrived-at-port-weak); }
.nv-tag--customs { --nv-tag-ink: var(--container-customs); --nv-tag-bg: var(--container-customs-weak); }
.nv-tag--in-route-destination { --nv-tag-ink: var(--container-in-route-destination); --nv-tag-bg: var(--container-in-route-destination-weak); }
.nv-tag--received { --nv-tag-ink: var(--container-received); --nv-tag-bg: var(--container-received-weak); }
.nv-tag--returned { --nv-tag-ink: var(--container-returned); --nv-tag-bg: var(--container-returned-weak); }
.nv-tag--cancelled { --nv-tag-ink: var(--container-cancelled); --nv-tag-bg: var(--container-cancelled-weak); }
.nv-tag--waiting-for-tracking { --nv-tag-ink: var(--ink-accent-hover); --nv-tag-bg: var(--bg-weak); }

/* ---------- Order status ---------- */
.nv-tag--order-confirmed { --nv-tag-ink: var(--order-confirmed); --nv-tag-bg: var(--order-confirmed-weak); }
.nv-tag--order-issued { --nv-tag-ink: var(--order-issued); --nv-tag-bg: var(--order-issued-weak); }
.nv-tag--order-in-progress { --nv-tag-ink: var(--order-in-progress); --nv-tag-bg: var(--order-in-progress-weak); }
.nv-tag--order-received { --nv-tag-ink: var(--order-received); --nv-tag-bg: var(--order-received-weak); }
.nv-tag--order-on-hold { --nv-tag-ink: var(--order-on-hold); --nv-tag-bg: var(--order-on-hold-weak); }
.nv-tag--order-in-route-to-dc { --nv-tag-ink: var(--order-in-route-to-dc); --nv-tag-bg: var(--order-in-route-to-dc-weak); }
.nv-tag--order-arrived-to-dc { --nv-tag-ink: var(--order-arrived-to-dc); --nv-tag-bg: var(--order-arrived-to-dc-weak); }

/* ---------- Category tags ---------- */
.nv-tag--container-type { border: 1px solid var(--bg-gray); }
.nv-tag--shipping-mode { --nv-tag-ink: var(--ink-action); --nv-tag-bg: var(--bg-gray-weak); }
.nv-tag--supplier { --nv-tag-bg: var(--bg-gray); }
.nv-tag--early { --nv-tag-ink: var(--ink-action); --nv-tag-bg: var(--bg-mild); }
.nv-tag--delayed { --nv-tag-ink: var(--bg-error); --nv-tag-bg: var(--bg-error-weak); }
.nv-tag--on-time { --nv-tag-ink: var(--ink-positive); --nv-tag-bg: var(--bg-positive-weak); }
.nv-tag--warning { --nv-tag-ink: var(--ink-warning); --nv-tag-bg: var(--bg-warning-weak); }
.nv-tag--error { --nv-tag-ink: var(--ink-inverse); --nv-tag-bg: var(--bg-error); }

/* ---------- Trend tag ---------- */
.nv-tag-trend {
  display: inline-flex;
  align-items: center;
  color: var(--ink-error);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 300;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* 12 px glyph (off the 16/20/24 scale) to fit the trend pill */
.nv-icon.nv-tag-trend__icon {
  display: block;
  flex: none;
  font-size: 12px;
}

.nv-tag-trend--up-negative,
.nv-tag-trend--down-negative { color: var(--ink-error); }
.nv-tag-trend--up-positive,
.nv-tag-trend--down-positive { color: var(--ink-positive); }
.nv-tag-trend--flat { color: var(--ink-accent-hover); }

/* TextField */
/* TextField: Sirius "text-field" component set 18:3301.
   Border is drawn with an inset shadow so it sits inside the box like Figma's inside stroke. */
.nv-textfield {
  display: flex;
  flex-direction: column;
  gap: var(--space-xxs);
  width: 100%;
  font-family: var(--font-sans);
  color: var(--ink-default);
}

.nv-textfield__label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xxs);
  margin: 0;
  font-size: 12px;
  line-height: 1.3;
  font-weight: 400;
  color: var(--ink-default);
}
.nv-textfield__label-text { flex: 1 1 0; min-width: 0; }
.nv-textfield__required { flex-shrink: 0; }
.nv-textfield__label-icon { display: inline-flex; width: 16px; height: 16px; flex-shrink: 0; }

.nv-textfield__control {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: var(--space-s);
  background: var(--bg-default);
  border-radius: var(--radius-m);
  box-shadow: inset 0 0 0 1px var(--line-border-standard);
  overflow: hidden;
}

.nv-textfield__input {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 16px;
  line-height: 1.3;
  color: var(--ink-default);
  text-overflow: ellipsis;
  outline: none;
}
.nv-textfield__input::placeholder { color: var(--ink-weak); opacity: 1; }

.nv-textfield__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--ink-default);
}

.nv-textfield__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink-default);
  border-radius: var(--radius-xss);
  cursor: pointer;
}
.nv-textfield__clear .nv-icon { display: block; width: 16px; height: 16px; }
.nv-textfield__clear:focus-visible { outline: none; }
/* the clear button only shows once there is a value */
.nv-textfield__input:placeholder-shown ~ .nv-textfield__clear { display: none; }

.nv-textfield__hint {
  margin: 0;
  font-size: 10px;
  line-height: 1.3;
  font-weight: 600;
  color: var(--ink-secondary);
}

/* focused: real focus or the static demo modifier */
.nv-textfield__control:focus-within,
.nv-textfield--focused .nv-textfield__control {
  box-shadow: inset 0 0 0 1px var(--line-border-strong);
}

/* error */
.nv-textfield--error .nv-textfield__control,
.nv-textfield--error .nv-textfield__control:focus-within {
  box-shadow: inset 0 0 0 1px var(--line-border-error);
}
.nv-textfield--error .nv-textfield__input { color: var(--ink-error); }

/* disabled */
.nv-textfield--disabled .nv-textfield__label { color: var(--ink-disabled); }
.nv-textfield--disabled .nv-textfield__required { color: var(--ink-default); }
.nv-textfield--disabled .nv-textfield__control,
.nv-textfield--disabled .nv-textfield__control:focus-within {
  background: var(--bg-disabled);
  box-shadow: none;
}
.nv-textfield--disabled .nv-textfield__input,
.nv-textfield--disabled .nv-textfield__input::placeholder { color: var(--ink-disabled); cursor: not-allowed; }
.nv-textfield--disabled .nv-textfield__clear { display: none; }

/* compact: dense layouts, filters, inline editing */
.nv-textfield--compact .nv-textfield__control {
  height: 32px;
  padding: 0 var(--space-xs);
  border-radius: var(--radius-s);
}
.nv-textfield--compact .nv-textfield__input { font-size: 12px; }

/* Toggle */
/* Toggle — Sirius "toggle" page (Figma 3268:2). Native checkbox with role="switch".
   Sizes: sm 28×16 (knob 12) · md 36×20 (knob 16, default) · lg 44×24 (knob 20). */

.nv-toggle {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  position: relative;
  color: var(--ink-default);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
  cursor: pointer;
  -webkit-font-smoothing: antialiased;
}

.nv-toggle__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
  opacity: 0;
}

.nv-toggle__track {
  --nv-toggle-knob: 16px;
  position: relative;
  flex: none;
  box-sizing: border-box;
  width: 36px;
  height: 20px;
  border: 1px solid var(--line-border-standard);
  border-radius: var(--radius-pill);
  background: var(--bg-default);
  transition: background-color 120ms ease, border-color 120ms ease;
}

.nv-toggle__knob {
  position: absolute;
  top: 50%;
  left: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--nv-toggle-knob);
  height: var(--nv-toggle-knob);
  border-radius: 50%;
  background: var(--ink-action);
  color: var(--ink-inverse);
  transform: translateY(-50%);
  transition: transform 120ms ease, background-color 120ms ease;
}

/* 12 px glyph (off the 16/20/24 scale) so it fits inside the md thumb */
.nv-icon.nv-toggle__icon {
  display: none;
  font-size: 12px;
}

/* has-icon: close when off, check when on (md and lg only) */
.nv-toggle--icon .nv-toggle__icon--off { display: block; }
.nv-toggle--icon .nv-toggle__input:checked + .nv-toggle__track .nv-toggle__icon--off { display: none; }
.nv-toggle--icon .nv-toggle__input:checked + .nv-toggle__track .nv-toggle__icon--on { display: block; }

/* On */
.nv-toggle__input:checked + .nv-toggle__track {
  border-color: var(--bg-positive);
  background: var(--bg-positive);
}
.nv-toggle__input:checked + .nv-toggle__track .nv-toggle__knob {
  background: var(--ink-inverse);
  color: var(--ink-action);
  transform: translate(var(--nv-toggle-knob), -50%);
}

/* Focus */
.nv-toggle__input:focus-visible + .nv-toggle__track {
  outline: none;
}

/* Disabled */
.nv-toggle:has(.nv-toggle__input:disabled) {
  color: var(--ink-disabled);
  cursor: not-allowed;
}
.nv-toggle__input:disabled + .nv-toggle__track {
  background: var(--bg-disabled);
}
.nv-toggle__input:disabled + .nv-toggle__track .nv-toggle__knob {
  background: var(--ink-disabled);
}
.nv-toggle__input:disabled:checked + .nv-toggle__track {
  border-color: var(--ink-disabled);
  background: var(--ink-disabled);
}
.nv-toggle__input:disabled:checked + .nv-toggle__track .nv-toggle__knob {
  background: var(--ink-inverse);
  color: var(--ink-disabled);
}

/* Sizes */
.nv-toggle--sm .nv-toggle__track {
  --nv-toggle-knob: 12px;
  width: 28px;
  height: 16px;
}
.nv-toggle--lg .nv-toggle__track {
  --nv-toggle-knob: 20px;
  width: 44px;
  height: 24px;
}
.nv-toggle--lg .nv-icon.nv-toggle__icon {
  font-size: 16px;
}

/* Optional label: inherits DM Sans Regular 14 and the gap from .nv-toggle. */
.nv-toggle__label {}

/* Tooltip */
/* Tooltip — Sirius tooltip (Figma 702:12748). Dark card, 160 px wide, 10 px semibold text. */
.nv-tooltip {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 160px;
  padding: var(--space-xs);
  border-radius: var(--radius-s);
  background: var(--bg-inverse);
  box-shadow: var(--elevation-001);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  overflow: hidden;
  color: var(--ink-inverse);
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.3;
}

.nv-tooltip__subtitle,
.nv-tooltip__content {
  margin: 0;
}

.nv-tooltip__content a {
  color: inherit;
  text-decoration: underline;
}

.nv-tooltip__content a:focus-visible {
  outline: none;
}

/* Anchoring: the tooltip opens above its trigger on hover and on keyboard focus. */
.nv-tooltip-anchor {
  position: relative;
  display: inline-flex;
}

.nv-tooltip-anchor > .nv-tooltip {
  position: absolute;
  bottom: calc(100% + var(--space-xs));
  left: 50%;
  z-index: 10;
  transform: translateX(-50%);
  visibility: hidden;
  opacity: 0;
}

.nv-tooltip-anchor:hover > .nv-tooltip,
.nv-tooltip-anchor:focus-within > .nv-tooltip {
  visibility: visible;
  opacity: 1;
}

/* Widget */
/* Widget — Sirius dashboard chart widgets (widgets page 255:2081):
   line (Active Operations), bar (Containers with penalties), area (Containers delayed),
   grouped bar (Expected this week), donut (Order type), and the Widget/KPI · KPI + chart · Chart · List tiles.
   Charts are inline SVG in the markup; this file styles the frame, header, legend and the SVG marks. */

.nv-widget {
  /* chart series colours: Figma graphics/* variables have no token yet (see README) */
  --nv-widget-series-green: #2acf56;
  --nv-widget-series-blue: #3a86fe;
  --nv-widget-series-red: #ff3c3c;
  --nv-widget-series-indigo: #6a71e5;
  --nv-widget-series-sky: #5dd2ff;
  --nv-widget-series-orange: #fa5607;

  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  gap: var(--space-s);
  width: 412px;
  max-width: 100%;
  height: 155px;
  padding: var(--space-s) var(--space-m);
  background: var(--bg-default);
  border: 1px solid transparent;
  border-radius: var(--radius-xl);
  box-shadow: var(--elevation-001);
  font-family: var(--font-sans);
  color: var(--ink-default);
  transition: box-shadow 120ms ease, border-color 120ms ease;
}
.nv-widget:hover,
.nv-widget--hover { box-shadow: var(--elevation-003); }
.nv-widget:active,
.nv-widget--pressed { border-color: var(--bg-weak); box-shadow: var(--elevation-003); }
.nv-widget--selected,
.nv-widget--selected:hover { border-color: var(--bg-gray); box-shadow: var(--elevation-003); }
.nv-widget:has(.nv-widget__link:focus-visible) {
  outline: none;
}

/* the title link stretches over the whole widget: one click target */
.nv-widget__link {
  color: inherit;
  text-decoration: none;
  outline: none;
}
.nv-widget__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

/* ---------- informers (left column) ---------- */
.nv-widget__informers {
  display: flex;
  flex: none;
  flex-direction: column;
  justify-content: space-between;
  align-self: stretch;
  min-width: 0;
}
.nv-widget__info-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-xxs);
}
.nv-widget__title {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--ink-default);
}
.nv-widget__title-line {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xxs);
}
.nv-widget__info {
  position: relative;
  z-index: 1;
  display: inline-flex;
  flex: none;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-secondary);
  cursor: help;
  border-radius: var(--radius-pill);
  vertical-align: middle;
}
.nv-widget__info .nv-icon { display: block; }
.nv-widget__info:focus-visible {
  outline: none;
}
.nv-widget__value {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 300;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.nv-widget__footnote {
  margin: 0;
  font-size: 10px;
  line-height: 1.3;
  color: var(--ink-secondary);
}
.nv-widget__footnote strong { font-weight: 600; }

/* ---------- legend ---------- */
.nv-widget__legend {
  display: flex;
  flex-direction: column;
  gap: var(--space-xxs);
  margin: 0;
  padding: 0;
  list-style: none;
}
.nv-widget__legend--row {
  flex-direction: row;
  gap: var(--space-s);
  justify-content: center;
}
.nv-widget__legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-xxs);
  font-size: 10px;
  line-height: 1.3;
  color: var(--ink-default);
  white-space: nowrap;
}
.nv-widget__legend--values .nv-widget__legend-item { font-size: 12px; }
.nv-widget__legend-label { color: var(--ink-secondary); }
.nv-widget__legend--plain .nv-widget__legend-label { color: inherit; }
.nv-widget__legend-value {
  font-family: var(--font-mono);
  font-weight: 300;
  color: var(--ink-default);
}
.nv-widget__swatch {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: currentColor;
}

/* ---------- chart area (right column) ---------- */
.nv-widget__chart {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: var(--space-xxs);
  align-self: stretch;
  min-width: 0;
}
.nv-widget__svg {
  display: block;
  overflow: visible;
}
.nv-widget__xaxis {
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 10px;
  line-height: 1.3;
  color: var(--ink-secondary);
  text-align: center;
  white-space: nowrap;
}

/* SVG marks */
.nv-widget__grid { stroke: var(--bg-gray-weak); stroke-width: 1; }
.nv-widget__tick { stroke: var(--bg-gray); stroke-width: 1; }
.nv-widget__axis-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 300;
  fill: var(--ink-weak);
}
.nv-widget__day-label {
  font-family: var(--font-sans);
  font-size: 10px;
  fill: var(--ink-secondary);
}
.nv-widget__line {
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 4px 8px color-mix(in srgb, currentColor 40%, transparent));
}
.nv-widget__line--thick { stroke-width: 4; }
.nv-widget__bar {
  fill: currentColor;
  filter: drop-shadow(0 7px 6px color-mix(in srgb, currentColor 13%, transparent));
}
.nv-widget__area-stop-top { stop-color: var(--nv-widget-series-blue); stop-opacity: 0.4; }
.nv-widget__area-stop-bottom { stop-color: var(--nv-widget-series-blue); stop-opacity: 0; }
.nv-widget__ring {
  fill: none;
  stroke: currentColor;
  stroke-width: 12;
  filter: drop-shadow(0 3px 6px color-mix(in srgb, currentColor 30%, transparent));
}

/* series colour helpers: set currentColor on a mark, swatch or axis label */
.nv-widget__s-green { color: var(--nv-widget-series-green); fill: var(--nv-widget-series-green); }
.nv-widget__s-blue { color: var(--nv-widget-series-blue); fill: var(--nv-widget-series-blue); }
.nv-widget__s-red { color: var(--nv-widget-series-red); fill: var(--nv-widget-series-red); }
.nv-widget__s-indigo { color: var(--nv-widget-series-indigo); fill: var(--nv-widget-series-indigo); }
.nv-widget__s-sky { color: var(--nv-widget-series-sky); fill: var(--nv-widget-series-sky); }
.nv-widget__s-orange { color: var(--nv-widget-series-orange); fill: var(--nv-widget-series-orange); }
.nv-widget__line.nv-widget__s-green,
.nv-widget__line.nv-widget__s-blue,
.nv-widget__ring { fill: none; }

/* ---------- layout variants ---------- */
/* bar: chart column capped at 204 */
.nv-widget--bar { justify-content: space-between; }
.nv-widget--bar .nv-widget__chart { max-width: 204px; justify-content: flex-end; }
.nv-widget__bars-x {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-s);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 10px;
  line-height: 1.3;
  color: var(--ink-secondary);
  text-align: center;
}

/* area: informers 99 wide */
.nv-widget--area { justify-content: space-between; }
.nv-widget--area .nv-widget__informers { width: 99px; }
.nv-widget--area .nv-widget__chart { flex: none; width: 245px; }
.nv-widget--area .nv-widget__xaxis { margin-left: 42px; }

/* donut: 303 wide, column layout */
.nv-widget--donut {
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  width: 303px;
  overflow: hidden;
}
.nv-widget__main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
}

/* grouped bar: 521 wide, header above the chart */
.nv-widget--grouped {
  flex-direction: column;
  align-items: center;
  width: 521px;
  height: auto;
  padding: var(--space-s) var(--space-m) var(--space-m);
}
.nv-widget__header { width: 100%; }
.nv-widget__figures {
  display: flex;
  gap: var(--space-s);
  align-items: stretch;
}
.nv-widget__figure {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  height: 35px;
  font-size: 14px;
  white-space: nowrap;
}
.nv-widget__figure-value {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 300;
}
.nv-widget__divider {
  flex: none;
  width: 1px;
  background: #f0f0f0;
}
.nv-widget__trend {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 300;
}
.nv-widget__trend-icon { display: block; font-size: 12px; } /* untokenized: 12px icon, below the 16px icon size */
.nv-widget__trend--up-negative { color: var(--ink-error); }
.nv-widget__trend--down-positive { color: var(--ink-positive); }
.nv-widget__chart-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  width: 100%;
}

/* ---------- state=disabled: no data, everything in ink/disabled ---------- */
.nv-widget--disabled,
.nv-widget--disabled:hover,
.nv-widget--disabled:active {
  border-color: transparent;
  box-shadow: var(--elevation-001);
}
.nv-widget--disabled .nv-widget__title,
.nv-widget--disabled .nv-widget__info,
.nv-widget--disabled .nv-widget__value,
.nv-widget--disabled .nv-widget__footnote,
.nv-widget--disabled .nv-widget__legend-item,
.nv-widget--disabled .nv-widget__legend-label,
.nv-widget--disabled .nv-widget__legend-value,
.nv-widget--disabled .nv-widget__xaxis { color: var(--ink-disabled); }
.nv-widget--disabled .nv-widget__axis-label { fill: var(--ink-disabled); }
.nv-widget--disabled .nv-widget__link { pointer-events: none; cursor: default; }

/* ---------- Widget/KPI · KPI + chart · Chart · List tiles ---------- */
.nv-widget-tile {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-s);
  width: 320px;
  max-width: 100%;
  padding: var(--space-m);
  background: var(--bg-default);
  border-radius: var(--radius-l);
  font-family: var(--font-sans);
  color: var(--ink-default);
}
.nv-widget-tile__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
}
.nv-widget-tile__titles {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.nv-widget-tile__title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink-default);
}
.nv-widget-tile__subtitle {
  margin: 0;
  font-size: 12px;
  line-height: 1.3;
  color: var(--ink-secondary);
}
.nv-widget-tile__action {
  display: inline-flex;
  flex: none;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-default);
  cursor: pointer;
  border-radius: var(--radius-xss);
}
.nv-widget-tile__action .nv-icon { display: block; }
.nv-widget-tile__action:focus-visible {
  outline: none;
}
.nv-widget-tile__metric {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
}
.nv-widget-tile__number {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 32px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}
.nv-widget-tile__caption {
  margin: 0;
  font-size: 12px;
  line-height: 1.3;
  color: var(--ink-secondary);
}
.nv-widget-tile__area {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 160px;
  overflow: hidden;
  background: var(--bg-weak);
  border-radius: var(--radius-s);
  font-size: 12px;
  color: var(--ink-secondary);
}
.nv-widget-tile__area--short { height: 96px; }
.nv-widget-tile__list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  line-height: 1.3;
}
.nv-widget-tile__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  white-space: nowrap;
}
.nv-widget-tile__row-value {
  font-family: var(--font-mono);
  font-weight: 300;
  color: var(--ink-secondary);
}

/* line: x-axis labels inset 40, each 40 wide */
.nv-widget--line .nv-widget__xaxis { padding: 0 var(--space-xl); }
.nv-widget--line .nv-widget__xaxis > li { width: 40px; }
.nv-widget--disabled .nv-widget__swatch { color: var(--ink-disabled); }