/* Public tools (qr-generator, runway, liabilities, documents, calculator/*): the product look without the
   signed-in sidebar. Components come from the DS files the pages load (fields: nv-field, choices and tool
   tracks: nv-tabs, selects: nv-select, buttons: ds-primitives, numbers: nv-stat, tables: nv-table,
   toasts: toast-stack). This file only sets the canvas, the shell and the two-column body.
   Surfaces follow the client invoice page: page, island, well (inputs and tracks inside an island). */

body.nv-tools {
  --nv-tools-page: #020203;
  --nv-tools-island: color-mix(in srgb, #888888 9%, #020203);
  --nv-tools-well: color-mix(in srgb, #888888 15%, #020203);
  --nv-tools-well-hover: color-mix(in srgb, #888888 21%, #020203);
  --nv-tools-max: 1120px;
  --nv-island-radius: 2rem;
  --nv-island-padding: 24px;
  /* DS components read these. */
  --dash-card: var(--nv-tools-island);
  --dash-surface: var(--nv-tools-well);
  --dash-surface-hover: var(--nv-tools-well-hover);
  --dash-page-island-bg: var(--nv-tools-island);
  --nv-table-island: var(--nv-tools-island);
  --nv-table-well: var(--nv-tools-well);
  --color-input-bg: var(--nv-tools-well);
  --color-input-bg-hover: var(--nv-tools-well-hover);
  --color-button-secondary: var(--nv-tools-well);
  --color-button-secondary-hover: var(--nv-tools-well-hover);
  min-height: 100dvh;
  margin: 0;
  background: var(--nv-tools-page);
  color: var(--nv-text-primary);
  font-family: var(--nv-font-sans);
  -webkit-font-smoothing: antialiased;
}

html.light body.nv-tools {
  --nv-tools-page: color-mix(in srgb, #5e5e5e 7%, #ffffff);
  --nv-tools-island: #ffffff;
  --nv-tools-well: color-mix(in srgb, #5e5e5e 8%, #ffffff);
  --nv-tools-well-hover: color-mix(in srgb, #5e5e5e 13%, #ffffff);
}

body.nv-tools *,
body.nv-tools *::before,
body.nv-tools *::after { box-sizing: border-box; }

.nv-tools :is(h1, h2, h3, p) { margin: 0; }

/* Top bar: wordmark, theme, account. */
.nv-tools-bar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: calc(var(--nv-tools-max) + 48px);
  margin: 0 auto;
  padding: 16px 24px;
  background: var(--nv-tools-page);
}

.nv-tools-bar .prelaunch-brand { padding-inline-start: 0; transform: translateY(-3px); }

.nv-tools-bar__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nv-tools .nv-icon-button {
  display: inline-grid;
  width: 32px;
  height: 32px;
  place-items: center;
  padding: 0;
  background: transparent;
  color: var(--nv-text-secondary);
}

.nv-tools .nv-icon-button:hover { background: var(--nv-tools-well); color: var(--nv-text-primary); }
.nv-tools .nv-icon-button svg { width: 18px; height: 18px; }
html:not(.light) [data-tools-theme] .nv-tools-sun,
html.light [data-tools-theme] .nv-tools-moon { display: none; }

.nv-tools .nv-button { text-decoration: none; }
.nv-tools .nv-button:focus-visible,
.nv-tools .nv-icon-button:focus-visible { outline: 2px solid var(--nv-text-tertiary); outline-offset: 2px; }

.nv-tools-main {
  display: grid;
  gap: 24px;
  max-width: calc(var(--nv-tools-max) + 48px);
  margin: 0 auto;
  padding: 8px 24px 64px;
}

/* Tool tracks: DS tab track of links on the page canvas. */
.nv-tools-nav { display: grid; justify-items: start; gap: 8px; min-width: 0; }
.nv-tools-nav .nv-m-tabs { --dash-surface-hover: var(--nv-tools-island); --dash-page-island-bg: var(--nv-tools-well); }
.nv-tools-nav a.nv-m-tabs__tab { text-decoration: none; }

.nv-tools-head { display: grid; gap: 4px; }

.nv-tools-head h1 {
  font-size: var(--nv-type-title-1-size, 28px);
  font-weight: var(--nv-type-title-1-weight, 600);
  line-height: var(--nv-type-title-1-line, 34px);
  letter-spacing: var(--nv-type-title-1-tracking, -.02em);
}

.nv-tools-head p {
  color: var(--nv-text-secondary);
  font-size: var(--nv-type-body-size, 14px);
  line-height: var(--nv-type-body-line, 20px);
}

/* Body: inputs left, result right; stacked under 960 px. */
.nv-tools-grid {
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.nv-tools-island {
  min-width: 0;
  padding: var(--nv-island-padding);
  border-radius: var(--nv-island-radius);
  background: var(--nv-tools-island);
}

.nv-tools-form { display: grid; gap: 16px; }

.nv-tools-island__title {
  font-size: var(--nv-type-headline-size, 15px);
  font-weight: var(--nv-type-headline-weight, 600);
  line-height: var(--nv-type-headline-line, 20px);
  letter-spacing: var(--nv-type-headline-tracking, -.009em);
}

.nv-tools-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

/* Fields: the DS field (nv-field) inside an island; labels are the field's own footnote. */
.nv-tools .nv-dialog__field > span { display: flex; justify-content: space-between; gap: 8px; }
.nv-tools .nv-dialog__field input { font-variant-numeric: tabular-nums; }
.nv-tools .nv-dialog__field textarea { border-radius: 20px; }

.nv-tools-choice { width: 100%; background: var(--nv-tools-well); }
.nv-tools-choice .nv-m-tabs__tab { --dash-page-island-bg: var(--nv-tools-island); }

/* Selects inside a field take the field width and height. */
.nv-tools .nv-dialog__field .nv-select-wrap { width: 100%; }
.nv-tools .nv-dialog__field .nv-select__trigger {
  width: 100%;
  justify-content: flex-start;
  background: var(--nv-tools-well);
  color: var(--nv-text-primary);
  font-size: 13px;
  font-weight: 400;
}
.nv-tools .nv-dialog__field .nv-select__trigger:hover,
.nv-tools .nv-dialog__field .nv-select-wrap.is-open .nv-select__trigger { background: var(--nv-tools-well-hover); }

.nv-tools-hint { color: var(--nv-text-tertiary); font-size: var(--nv-type-footnote-size, 12px); line-height: var(--nv-type-footnote-line, 16px); }

/* Result column. */
.nv-tools-output { display: grid; gap: 16px; min-width: 0; }

.nv-tools-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.nv-tools-stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nv-tools .nv-o-stat { min-height: 0; background: var(--nv-tools-island); }

.nv-tools-panel { display: grid; gap: 16px; }

.nv-tools-panel__head {
  display: flex;
  min-height: 32px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
}

.nv-tools-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.nv-tools-empty {
  display: grid;
  min-height: 120px;
  place-content: center;
  gap: 4px;
  padding: 24px;
  color: var(--nv-text-secondary);
  font-size: var(--nv-type-callout-size, 13px);
  line-height: var(--nv-type-callout-line, 18px);
  text-align: center;
}

.nv-tools-empty strong { color: var(--nv-text-primary); font-weight: 600; }

/* Big answer line for one-number calculators. */
.nv-tools-answer { display: grid; gap: 4px; }

.nv-tools-answer__value {
  overflow-wrap: anywhere;
  font-size: var(--nv-type-large-title-size, 32px);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  letter-spacing: -.022em;
}

.nv-tools-answer__caption { color: var(--nv-text-secondary); font-size: var(--nv-type-callout-size, 13px); line-height: var(--nv-type-callout-line, 18px); }

/* Breakdown list: label left, amount right, no rules. */
.nv-tools-lines { display: grid; gap: 4px; margin: 0; }
.nv-tools-lines > div { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; font-size: var(--nv-type-body-size, 14px); line-height: 20px; }
.nv-tools-lines dt { color: var(--nv-text-secondary); }
.nv-tools-lines dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 500; text-align: right; }
.nv-tools-lines > .is-total dd,
.nv-tools-lines > .is-total dt { color: var(--nv-text-primary); font-weight: 600; }

/* Tables: the DS table island (nv-o-table + nv-tbl); the island frame comes from nv-table.css. */
.nv-tools-island.nv-o-table { display: block; padding: 0; }
.nv-tools .nv-o-table__head { display: flex; }

/* QR preview: white tile so any camera reads it, in both themes. */
.nv-tools-qr {
  display: grid;
  min-height: 288px;
  place-items: center;
  border-radius: 24px;
  background: var(--nv-tools-well);
}
.nv-tools-qr > :is(svg, canvas) { display: block; width: 240px; height: 240px; border-radius: 16px; }
.nv-tools-qr__bone { width: 240px; height: 240px; border-radius: 16px; }

/* Liabilities: one block per debt, no rules between them. */
.nv-tools-debts { display: grid; gap: 20px; }
.nv-tools-debt { display: grid; gap: 12px; min-width: 0; margin: 0; padding: 0; border: 0; }
.nv-tools-debt__legend {
  padding: 0;
  color: var(--nv-text-tertiary);
  font-size: var(--nv-type-footnote-size, 12px);
  font-weight: 500;
  line-height: 16px;
}
.nv-tools-debt__top { display: flex; align-items: flex-end; gap: 8px; }
.nv-tools-debt__top > .nv-dialog__field { flex: 1; }
.nv-tools-debt__top > .nv-icon-button { margin-block-end: 4px; }
.nv-tools-debt__top > .nv-icon-button:disabled { opacity: .35; pointer-events: none; }
.nv-tools-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.nv-tools-add { justify-self: start; gap: 6px; }
.nv-tools-add svg { width: 16px; height: 16px; }

/* Documents: a quiet sheet on the island. */
.nv-tools-doc { display: grid; gap: 16px; padding: 8px 4px; }
.nv-tools-doc__kind { color: var(--nv-text-tertiary); font-size: var(--nv-type-footnote-size, 12px); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.nv-tools-doc__title { margin: -8px 0 0; font-size: var(--nv-type-title-2-size, 22px); font-weight: 600; line-height: var(--nv-type-title-2-line, 28px); letter-spacing: -.017em; }
.nv-tools-doc__by { margin-top: -8px; color: var(--nv-text-secondary); font-size: var(--nv-type-callout-size, 13px); line-height: 18px; }
.nv-tools-doc h4 { margin: 0 0 8px; font-size: var(--nv-type-headline-size, 15px); font-weight: 600; line-height: 20px; }
.nv-tools-doc :is(p, ul) { margin: 0; font-size: var(--nv-type-body-size, 14px); line-height: 22px; white-space: pre-line; }
.nv-tools-doc ul { padding-inline-start: 18px; white-space: normal; }
.nv-tools-doc .is-empty { color: var(--nv-text-quaternary); }

/* Quiet line under the result: keep it in the product. */
.nv-tools-keep {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 16px var(--nv-island-padding);
  border-radius: var(--nv-island-radius);
  background: var(--nv-tools-island);
  color: var(--nv-text-secondary);
  font-size: var(--nv-type-callout-size, 13px);
  line-height: var(--nv-type-callout-line, 18px);
}

.nv-tools-keep strong { display: block; color: var(--nv-text-primary); font-size: var(--nv-type-body-size, 14px); font-weight: 600; line-height: 20px; }

/* Skeleton bones for the parts that load (QR library, FX rates). */
.nv-tools-bone {
  display: block;
  border-radius: 999px;
  background: var(--nv-tools-well);
  color: transparent;
}

.nv-tools-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  max-width: calc(var(--nv-tools-max) + 48px);
  margin: 0 auto;
  padding: 0 24px 40px;
  color: var(--nv-text-tertiary);
  font-size: var(--nv-type-footnote-size, 12px);
  line-height: 16px;
}

.nv-tools-foot a { color: inherit; text-decoration: none; }
.nv-tools-foot a:hover { color: var(--nv-text-secondary); }

[hidden] { display: none !important; }

@media (max-width: 959px) {
  .nv-tools-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  body.nv-tools { --nv-island-padding: 20px; --nv-island-radius: 24px; }
  .nv-tools-bar { padding: 12px 16px; }
  .nv-tools-bar [data-tools-login] { display: none; }
  .nv-tools-main { gap: 20px; padding: 4px 16px 48px; }
  .nv-tools-foot { padding: 0 16px 32px; }
  .nv-tools-head h1 { font-size: var(--nv-type-title-2-size, 22px); line-height: var(--nv-type-title-2-line, 28px); }
  .nv-tools-stats--3 { grid-template-columns: minmax(0, 1fr); }
  .nv-tools-nav .nv-m-tabs { max-width: calc(100vw - 32px); }
}

@media (max-width: 420px) {
  .nv-tools-stats { grid-template-columns: minmax(0, 1fr); }
}

@media print {
  body.nv-tools { background: #fff; color: #111; }
  .nv-tools-bar, .nv-tools-nav, .nv-tools-head, .nv-tools-form, .nv-tools-keep, .nv-tools-foot, .nv-tools-actions, .nv-toast-stack { display: none !important; }
  .nv-tools-grid { display: block; }
  .nv-tools-main { padding: 0; }
  .nv-tools-island { padding: 0; background: none; }
  .nv-tools-panel__head { display: none; }
  .nv-tools-doc, .nv-tools-doc * { color: #111 !important; }
}