/* nova-ui 5cbbc6bfed */
/* The ONE entry point of the UI kit: the list of parts, in order. Pages do not load this file as it is: core/AssetCss joins the parts into one stylesheet
   (every @import below replaced by the file it names) and serves it at /nova-assets/ui-<fingerprint>.css with a year of cache; the address changes when any part
   changes. (This file is the fallback when the bundle cannot be made.) Add a part by adding a line here.
   Brand::css() prints the live --nv-* values in a <style> tag AFTER the stylesheet, so they override tokens.css. */
/* ui/css/tokens.css */
/* Design tokens: FALLBACK values only.
   The live values come from Brand::css() (settings), printed in a <style> tag after this file, so they win on ties.
   This is the ONLY kit file that may contain a brand colour. Every other file reads var(--nv-*).
   Names match Brand::css() exactly; the "alias" block at the end adds the longer names some modules prefer. */

:root {
  /* surfaces and ink */
  --nv-canvas: #f6f6f3;
  --nv-surface: #ffffff;
  --nv-surface-alt: #f1f1ee;
  --nv-border: #e6e6e1;
  --nv-border-soft: #eeeeea;
  --nv-text: #121417;
  --nv-text-2: #53575e;
  --nv-text-3: #686c75;   /* the design's #6c7079, 4 steps darker: 4.65:1 on the grey surface (AA needs 4.5) */

  /* brand */
  --nv-primary: #1f5ee0;
  --nv-primary-hover: #1848b3;
  --nv-deep: #0b2a6f;
  --nv-primary-light: #edf2fd;
  --nv-primary-tint: #dbeafe;
  --nv-accent: #3f7cf0;
  --nv-cyan: #7fa3ee;
  --nv-on-primary: #ffffff;
  --nv-primary-rgb: 31, 94, 224;
  --nv-ring: #1f5ee0;

  /* status */
  --nv-success: #15803d;
  --nv-success-bg: #dcfce7;
  --nv-danger: #c62828;
  --nv-danger-bg: #fdecec;
  --nv-warning: #b7791f;
  --nv-warning-bg: #fdf3e2;

  /* hero / photo / card gradients are built from these (same in light and dark) */
  --nv-hero-primary: #1f5ee0;
  --nv-hero-deep: #0b2a6f;
  --nv-hero-deeper: #091e5a;
  --nv-hero-accent: #3f7cf0;
  --nv-hero-card-a: #2a66e8;
  --nv-hero-card-b: #1846b0;
  --nv-hero-primary-rgb: 31, 94, 224;
  --nv-hero-deep-rgb: 11, 42, 111;
  --nv-hero-deeper-rgb: 9, 30, 90;

  /* shape */
  --nv-r-card: 24px;
  --nv-r-hero: 28px;
  --nv-r-panel: 32px;
  --nv-r-row: 16px;
  --nv-r-input: 14px;
  --nv-r-tile: 14px;
  --nv-r-pill: 999px;

  /* elevation: only floating layers have a shadow */
  --nv-shadow-pop: 0 20px 50px rgba(var(--nv-ink-rgb), .14);
  --nv-shadow-chat: 0 24px 60px rgba(var(--nv-ink-rgb), .28);
  --nv-shadow-signin: 0 30px 60px -20px rgba(0, 0, 0, .45);
  --nv-shadow-card: 0 24px 48px -22px rgba(var(--nv-ink-rgb), .5);

  /* motion */
  --nv-ease: cubic-bezier(.2, .8, .2, 1);
  --nv-dur-enter: 300ms;
  --nv-dur-hover: 180ms;

  /* gradients */
  --nv-grad-hero: linear-gradient(135deg, var(--nv-hero-deep) 0%, var(--nv-hero-primary) 62%, var(--nv-hero-accent) 100%);
  --nv-grad-chat: linear-gradient(135deg, var(--nv-hero-deep), var(--nv-hero-primary));
  --nv-grad-card-debit: linear-gradient(135deg, var(--nv-hero-card-a) 0%, var(--nv-hero-card-b) 100%);
  --nv-grad-photo: linear-gradient(110deg, rgba(var(--nv-hero-deeper-rgb), .96) 0%, rgba(var(--nv-hero-deep-rgb), .88) 45%, rgba(var(--nv-hero-primary-rgb), .5) 100%);
  --nv-grad-signin: linear-gradient(160deg, rgba(var(--nv-hero-deeper-rgb), .85) 0%, rgba(var(--nv-hero-primary-rgb), .55) 100%);
  --nv-grad-invest: linear-gradient(135deg, #052e16 0%, #15803d 60%, #22c55e 100%);
  --nv-grad-rewards: linear-gradient(135deg, #4c1d95 0%, #7c3aed 60%, #a78bfa 100%);
  --nv-grad-fx: linear-gradient(135deg, #0f766e, #14b8a6);
  --nv-grad-card-rewards: linear-gradient(135deg, #24272d 0%, #0e0f11 100%);
  --nv-grad-card-travel: linear-gradient(135deg, #6b6f76 0%, #34373d 100%);

  /* categories (transaction avatars, budget, goals, holdings) */
  --nv-cat-groceries: #16a34a;
  --nv-cat-restaurants: #f97316;
  --nv-cat-shopping: #8b5cf6;
  --nv-cat-utilities: #1f5ee0;
  --nv-cat-housing: #b45309;
  --nv-cat-travel: #0d9488;
  --nv-cat-health: #e11d48;
  --nv-cat-entertainment: #ec4899;
  --nv-cat-other: #9aa0a6;
  --nv-cat-income: #15803d;
  --nv-cat-loan: #4338ca;
  --nv-cat-insurance: #0369a1;
  --nv-cat-transportation: #ca8a04;
  --nv-cat-rewards: #a21caf;
  --nv-cat-groceries-bg: rgba(22, 163, 74, .13);
  --nv-cat-restaurants-bg: rgba(249, 115, 22, .13);
  --nv-cat-shopping-bg: rgba(139, 92, 246, .13);
  --nv-cat-utilities-bg: rgba(31, 94, 224, .13);
  --nv-cat-housing-bg: rgba(180, 83, 9, .13);
  --nv-cat-travel-bg: rgba(13, 148, 136, .13);
  --nv-cat-health-bg: rgba(225, 29, 72, .13);
  --nv-cat-entertainment-bg: rgba(236, 72, 153, .13);
  --nv-cat-other-bg: rgba(154, 160, 166, .13);
  --nv-cat-income-bg: rgba(21, 128, 61, .13);
  --nv-cat-loan-bg: rgba(67, 56, 202, .13);
  --nv-cat-insurance-bg: rgba(3, 105, 161, .13);
  --nv-cat-transportation-bg: rgba(202, 138, 4, .13);
  --nv-cat-rewards-bg: rgba(162, 28, 175, .13);

  /* account kinds */
  --nv-kind-checking: var(--nv-primary);
  --nv-kind-checking-bg: var(--nv-primary-tint);
  --nv-kind-savings: #15803d;
  --nv-kind-savings-bg: #dcfce7;
  --nv-kind-credit: #7c3aed;
  --nv-kind-credit-bg: #f3e8ff;

  --nv-font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* kit-only tokens (Brand::css does not send these; set them in Settings > brand.tokens to change them) */
  --nv-ink-rgb: 18, 20, 23;   /* the text colour as r, g, b, for shadows and scrims: rgba(var(--nv-ink-rgb), .14) */
  --nv-chip-gold-a: #f4d58d;
  --nv-chip-gold-b: #c9a227;
  --nv-r-sm: 10px;
  --nv-r-md: 12px;
  --nv-warning-ink: #9a6412;
  --nv-ink-lift: 0%;   /* text drawn in a category or tint colour: color-mix(in srgb, <colour>, var(--nv-text) var(--nv-ink-lift)). 0% keeps the colour (light); dark mode lifts it toward the text colour so it reads (AA) on the dark surface */
  --nv-toggle-off: #d0d0cb;
  --nv-step-idle: #b4b6b9;
  --nv-scrim: rgba(var(--nv-ink-rgb), .5);
  --nv-tip-bg: rgba(var(--nv-ink-rgb), .94);
  --nv-tip-text: #ffffff;
  --nv-tip-muted: #a9adb5;   /* secondary text on a dark surface (the dark logo's sub-label, tooltips) */
  --nv-series-2: #fb923c;
  --nv-toast-success: #0f3d2b;
  --nv-toast-info: var(--nv-primary-hover);
  --nv-toast-error: #7f1d1d;
  --nv-toast-text: #ffffff;
  --nv-sidebar-bg: linear-gradient(180deg, var(--nv-hero-deep), color-mix(in srgb, var(--nv-hero-deep) 70%, var(--nv-hero-primary)));
  --nv-sidebar-text: rgba(255, 255, 255, .72);
  --nv-sidebar-muted: rgba(255, 255, 255, .55);
  --nv-glass: rgba(255, 255, 255, .16);
  --nv-on-hero: #ffffff;
  --nv-on-danger: #ffffff;   /* text on the solid red of a danger button and on the solid amber of a warning toast: dark mode uses lighter reds and ambers, which need dark text */
  --nv-on-warning: #ffffff;
  --nv-on-hero-2: rgba(255, 255, 255, .8);
  --nv-skeleton: var(--nv-surface-alt);
  --nv-skeleton-shine: rgba(255, 255, 255, .55);
  --nv-shadow-drawer: -8px 0 40px rgba(var(--nv-ink-rgb), .2);
  --nv-shadow-tabbar: 0 16px 40px rgba(var(--nv-ink-rgb), .16), 0 2px 8px rgba(var(--nv-ink-rgb), .08);
  --nv-shadow-toast: 0 12px 30px rgba(var(--nv-ink-rgb), .24);

  /* layout sizes */
  --nv-sidebar-w: 252px;
  --nv-header-h: 72px;
  --nv-header-h-mobile: 64px;
  --nv-page-max: 1440px;
  --nv-site-max: 1200px;
  --nv-gutter: clamp(14px, 2.4vw, 32px);
  --nv-site-gutter: clamp(20px, 4vw, 40px);
  --nv-tabbar-space: 104px;
  --nv-chat-space: 152px;
}

[data-theme="dark"] {
  --nv-canvas: #0e0f11;
  --nv-surface: #17191c;
  --nv-surface-alt: #1f2226;
  --nv-border: #2c2f34;
  --nv-border-soft: #25282c;
  --nv-text: #ececea;
  --nv-text-2: #a8abb1;
  --nv-text-3: #8a8e95;
  --nv-primary: #7299f3;
  --nv-primary-hover: #3b6fe6;
  --nv-deep: #0b0c0e;
  --nv-primary-light: #1b2334;
  --nv-primary-tint: #1b2334;
  --nv-on-primary: #111111;
  --nv-primary-rgb: 114, 153, 243;
  --nv-ring: #7299f3;
  --nv-success: #4ade80;
  --nv-success-bg: rgba(74, 222, 128, .14);
  --nv-danger: #f87171;
  --nv-danger-bg: rgba(248, 113, 113, .14);
  --nv-warning: #fbbf24;
  --nv-warning-bg: rgba(251, 191, 36, .14);
  --nv-warning-ink: #fbbf24;
  --nv-ink-lift: 45%;   /* every category colour reaches 4.5:1 on the dark surface and on its own 13% tint at 40% (measured), 45% leaves room */
  --nv-on-danger: #111111;
  --nv-on-warning: #111111;
  --nv-toggle-off: #3a3e44;
  --nv-step-idle: #4a4e55;
  --nv-scrim: rgba(0, 0, 0, .6);
  --nv-skeleton-shine: rgba(255, 255, 255, .06);
  --nv-shadow-pop: 0 20px 50px rgba(0, 0, 0, .5);
  --nv-shadow-drawer: -8px 0 40px rgba(0, 0, 0, .5);
  --nv-shadow-tabbar: 0 16px 40px rgba(0, 0, 0, .5), 0 2px 8px rgba(0, 0, 0, .3);
  --nv-kind-savings-bg: rgba(74, 222, 128, .14);
  --nv-kind-credit-bg: rgba(167, 139, 250, .16);
}

/* Aliases: the same values under the longer names. They are declared on :root AND on [data-theme] so they follow the active theme. */
:root,
[data-theme] {
  --nv-radius-card: var(--nv-r-card);
  --nv-radius-hero: var(--nv-r-hero);
  --nv-radius-panel: var(--nv-r-panel);
  --nv-radius-row: var(--nv-r-row);
  --nv-radius-input: var(--nv-r-input);
  --nv-radius-tile: var(--nv-r-tile);
  --nv-radius-pill: var(--nv-r-pill);
  --nv-primary-soft: var(--nv-primary-light);
  --nv-success-soft: var(--nv-success-bg);
  --nv-danger-soft: var(--nv-danger-bg);
  --nv-warning-soft: var(--nv-warning-bg);
}

/* ui/css/base.css */
/* Reset, typography, focus, motion. Reads tokens only. */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--nv-canvas);
  color: var(--nv-text);
  font-family: var(--nv-font);
  font-size: 15px;
  line-height: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 600; letter-spacing: -.02em; text-wrap: balance; color: var(--nv-text); }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
img, svg, video { max-width: 100%; }
img { display: block; }
hr { border: 0; border-top: 1px solid var(--nv-border-soft); margin: 0; }
table { border-collapse: collapse; }
strong, b { font-weight: 600; }
small { font-size: 13px; }
code, kbd, samp { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em; }

a { color: var(--nv-primary); text-decoration: none; }
a:hover { color: var(--nv-primary-hover); }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled, [aria-disabled="true"] { cursor: not-allowed; }
input::placeholder, textarea::placeholder { color: var(--nv-text-3); opacity: 1; }

::selection { background: rgba(var(--nv-primary-rgb), .22); }

/* One focus ring for everything */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--nv-ring); outline-offset: 2px; }
[tabindex="-1"]:focus { outline: none; }

[hidden] { display: none !important; }

/* Numbers line up */
.nv-num, .nv-money-text { font-variant-numeric: tabular-nums; }

/* Screens and cards enter softly */
.nv-rise { animation: nv-rise var(--nv-dur-enter) var(--nv-ease) both; }

@keyframes nv-draw { from { stroke-dashoffset: 2400; } to { stroke-dashoffset: 0; } }
@keyframes nv-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes nv-rise-site { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes nv-toast { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes nv-slide-in { from { transform: translateX(100%); } to { transform: none; } }
@keyframes nv-slide-in-left { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes nv-sheet { from { transform: translateY(100%); } to { transform: none; } }
@keyframes nv-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes nv-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes nv-mega { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes nv-spin { to { transform: rotate(360deg); } }
@keyframes nv-shine { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@keyframes nv-ring { from { stroke-dashoffset: var(--nv-c); } }
@keyframes nv-pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }

/* Motion: honour the system setting AND the in-app switch (boot sets data-reduce-motion on <html>) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;   /* a loop of .01ms repeated for ever redraws a random frame on every tick: it flickers, which is what the setting is meant to stop */
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .nv-spinner, .nv-skeleton::after { animation: none !important; }   /* a still ring and a flat bar say "busy" without moving */
}
html[data-reduce-motion="true"] *,
html[data-reduce-motion="true"] *::before,
html[data-reduce-motion="true"] *::after {
  animation-duration: .01ms !important;
  animation-delay: 0s !important;
  animation-iteration-count: 1 !important;
  transition-duration: .01ms !important;
  scroll-behavior: auto !important;
}
html[data-reduce-motion="true"] .nv-spinner,
html[data-reduce-motion="true"] .nv-skeleton::after { animation: none !important; }

/* Phones: inputs at 16px stop iOS zooming the page on focus (R13) */
@media (max-width: 899px), (pointer: coarse) {
  input, select, textarea { font-size: 16px; }
}

/* Screen-reader only text, and a skip link */
.nv-sr-only {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.nv-skip {
  position: fixed; left: 12px; top: -60px; z-index: 200; padding: 10px 16px; border-radius: var(--nv-r-pill);
  background: var(--nv-primary); color: var(--nv-on-primary); font-weight: 600; transition: top var(--nv-dur-hover);
}
.nv-skip:focus { top: 12px; color: var(--nv-on-primary); }

/* Body lock while an overlay is open */
html.nv-locked, html.nv-locked body { overflow: hidden; }

/* ui/css/layout.css */
/* Layout: page container, stacks, grids, the signed-in shell (sidebar, header, tab bar), public-site container.
   The desktop / phone switch is pure CSS at 900px, so no JavaScript has to watch the width. */

/* ---- containers */
.nv-page {
  width: 100%; max-width: var(--nv-page-max); margin: 0 auto;
  padding: 22px var(--nv-gutter) var(--nv-tabbar-space);
}
.nv-container {
  width: 100%; max-width: var(--nv-site-max); margin: 0 auto; padding-inline: var(--nv-site-gutter);
}
.nv-section { padding-block: clamp(56px, 8vw, 112px); }

/* One screen of the app: heading block, then content. Enters softly. */
.nv-screen { display: flex; flex-direction: column; gap: 22px; animation: nv-rise var(--nv-dur-enter) var(--nv-ease) both; min-width: 0; }
.nv-screen__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.nv-screen__title { font-size: clamp(24px, 2.4vw, 30px); font-weight: 600; letter-spacing: -.03em; line-height: normal; }
.nv-screen__sub { margin-top: 4px; font-size: 15px; line-height: normal; color: var(--nv-text-3); }
.nv-screen__actions { display: flex; flex-wrap: wrap; gap: 9px; }

/* ---- stack / cluster / grid helpers (gap comes from --nv-gap, default 16px) */
.nv-stack { display: flex; flex-direction: column; gap: var(--nv-gap, 16px); min-width: 0; }
.nv-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nv-gap, 12px); min-width: 0; }
.nv-row-flex { display: flex; align-items: center; gap: var(--nv-gap, 12px); min-width: 0; }
.nv-between { display: flex; align-items: center; justify-content: space-between; gap: var(--nv-gap, 12px); }
.nv-grid { display: grid; grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr)); gap: var(--nv-gap, 16px); }
/* Columns that wrap by themselves: --min is the narrowest a column may get */
.nv-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min, 240px)), 1fr)); gap: var(--nv-gap, 16px); }
.nv-cols--fill { grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--min, 240px)), 1fr)); }

/* Main column + side column (the dashboard layout): wraps on its own, no media query */
.nv-split { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.nv-split > .nv-split__main { flex: 2 1 var(--nv-main-basis, 560px); min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.nv-split > .nv-split__side { flex: 1 1 var(--nv-side-basis, 300px); min-width: 0; display: flex; flex-direction: column; gap: 20px; }

/* ---- signed-in shell */
.nv-shell { display: flex; min-height: 100vh; background: var(--nv-canvas); color: var(--nv-text); }
.nv-shell__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.nv-sidebar {
  width: var(--nv-sidebar-w); flex: none; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column;
  background: var(--nv-sidebar-bg); color: var(--nv-sidebar-text);
}
.nv-sidebar__brand { padding: 22px 26px; display: flex; align-items: center; }
.nv-sidebar__nav { flex: 1; overflow-y: auto; scrollbar-width: none; padding: 4px 14px 14px; display: flex; flex-direction: column; gap: 18px; }
.nv-sidebar__nav::-webkit-scrollbar { display: none; }
.nv-sidebar__foot { margin: 0 14px 14px; padding: 10px; border-radius: var(--nv-r-row); background: rgba(255, 255, 255, .09); display: flex; align-items: center; gap: 10px; }
.nv-sidebar__legal { padding: 0 26px 18px; font-size: 11px; line-height: 1.5; color: rgba(255, 255, 255, .45); }
.nv-sidebar__legal b { display: inline-block; padding: 2px 7px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 4px; letter-spacing: .08em; color: rgba(255, 255, 255, .7); margin-right: 6px; }

.nv-nav { display: flex; flex-direction: column; gap: 1px; }
.nv-nav__title { padding: 0 12px 6px; font-size: 12px; font-weight: 500; color: var(--nv-sidebar-muted); }
.nv-nav__item {
  display: flex; align-items: center; gap: 11px; width: 100%; min-height: 38px; padding: 0 12px; border: 0; border-radius: var(--nv-r-md);
  background: transparent; color: var(--nv-sidebar-text); font-size: 14px; font-weight: 500; text-align: left; text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.nv-nav__item:hover { background: rgba(255, 255, 255, .08); color: var(--nv-on-hero); }
.nv-nav__item[aria-current="page"], .nv-nav__item.is-active {
  background: rgba(255, 255, 255, .16); color: var(--nv-on-hero); font-weight: 600; box-shadow: 0 1px 2px rgba(var(--nv-ink-rgb), .06);
}
.nv-nav__item > .nv-nav__label { flex: 1; min-width: 0; }
.nv-nav__item:focus-visible { outline-color: var(--nv-on-hero); outline-offset: -2px; }
.nv-sidebar :focus-visible { outline-color: var(--nv-on-hero); }

/* The same list inside a light drawer (phones): a bigger row, blue when active */
.nv-nav--light .nv-nav__item { min-height: 48px; padding: 12px; font-size: 15px; color: var(--nv-text-2); }
.nv-nav--light .nv-nav__item:hover { background: var(--nv-surface-alt); color: var(--nv-text); }
.nv-nav--light .nv-nav__item[aria-current="page"], .nv-nav--light .nv-nav__item.is-active {
  background: var(--nv-primary-light); color: var(--nv-primary); box-shadow: 0 1px 2px rgba(var(--nv-ink-rgb), .06);
}
.nv-nav--light .nv-nav__item:focus-visible { outline-color: var(--nv-ring); }

.nv-header {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 16px; height: var(--nv-header-h);
  padding: 0 var(--nv-gutter); background: var(--nv-canvas);
}
.nv-header__search { flex: 1 1 380px; max-width: 420px; margin-right: auto; position: relative; }
.nv-header--mobile { height: var(--nv-header-h-mobile); padding: 0 16px; gap: 12px; }
.nv-header--mobile .nv-header__brand { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; }
.nv-main { flex: 1; width: 100%; max-width: var(--nv-page-max); margin: 0 auto; padding: 22px var(--nv-gutter) var(--nv-tabbar-space); min-width: 0; }

/* Bottom tab bar (phones) */
.nv-tabbar {
  position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 40; display: flex;
  max-width: 520px; margin: 0 auto; background: var(--nv-surface); border: 1px solid var(--nv-border-soft);
  padding: 6px 8px; border-radius: 28px; box-shadow: var(--nv-shadow-tabbar);
}
.nv-tabbar__item {
  flex: 1; min-width: 0; min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  padding: 4px 2px; border: 0; border-radius: var(--nv-r-md); background: transparent; color: var(--nv-text-3); font-size: 11.5px; font-weight: 600; text-decoration: none;
}
.nv-tabbar__item[aria-current="page"], .nv-tabbar__item.is-active { color: var(--nv-primary); }

/* Phones show the tab bar and the mobile header; desktop shows the sidebar and the full header */
@media (max-width: 899px) {
  .nv-sidebar, .nv-header--desktop { display: none; }
}
@media (min-width: 900px) {
  .nv-header--mobile, .nv-tabbar { display: none; }
}

/* ---- public site */
.nv-topbar { background: var(--nv-canvas); color: var(--nv-text-2); }
.nv-topbar .nv-container { height: 38px; display: flex; align-items: center; gap: 22px; font-size: 13px; }
.nv-sitehead { position: sticky; top: 0; z-index: 50; background: var(--nv-canvas); }
.nv-sitehead .nv-container { height: 76px; display: flex; align-items: center; gap: 28px; }
.nv-sitefoot { background: var(--nv-surface); border-radius: var(--nv-r-panel) var(--nv-r-panel) 0 0; margin-top: clamp(40px, 6vw, 80px); }
.nv-mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--nv-surface); border-bottom: 1px solid var(--nv-border-soft); box-shadow: 0 18px 40px rgba(var(--nv-ink-rgb), .12); animation: nv-mega .18s ease both; }

/* Hero on a photo: image under the brand gradient, white text on top */
.nv-photo-hero { position: relative; overflow: hidden; background: var(--nv-hero-deep); color: var(--nv-on-hero); isolation: isolate; }
.nv-photo-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .32; z-index: -2; }
.nv-photo-hero::before { content: ""; position: absolute; inset: 0; background: var(--nv-grad-photo); z-index: -1; }

/* Two panes: the sign-in screens (photo on the left, form on the right) */
.nv-panes { min-height: 100vh; display: flex; flex-wrap: wrap; background: var(--nv-deep); }
.nv-panes__art { flex: 1 1 460px; position: relative; padding: 44px clamp(20px, 5vw, 72px) 56px; display: flex; flex-direction: column; justify-content: center; gap: 26px; background: var(--nv-hero-deep); overflow: hidden; color: var(--nv-on-hero); isolation: isolate; }
.nv-panes__art > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .35; z-index: -2; }
.nv-panes__art::before { content: ""; position: absolute; inset: 0; background: var(--nv-grad-signin); z-index: -1; }
.nv-panes__form { flex: 1 1 420px; display: flex; align-items: center; justify-content: center; padding: 40px clamp(18px, 4vw, 56px) 56px; background: var(--nv-canvas); }
.nv-panes__card { --nv-input-h: 46px; --nv-input-r: 12px; width: 100%; max-width: 412px; background: var(--nv-surface); border-radius: var(--nv-r-card); box-shadow: 0 18px 50px rgba(var(--nv-ink-rgb), .16); padding: 30px 28px 26px; }

/* ui/css/components.css */
/* Core components: buttons, icon buttons, chips, badges, avatars, cards, rows, progress, stat, empty, skeleton, banner.
   Buttons and chips are pills. Cards have no border and no shadow. Hit areas reach 44px without changing how things look. */

/* A small control can have a 44px hit area: the ::before is at least 44px each way and centred on the control, so it holds whatever size a screen gives the control
   (a border, a shorter chip, a 40px arrow) and nothing has to say how big it is. A control already 44px or more keeps its own box. */
.nv-btn, .nv-iconbtn, .nv-chip, .nv-toggle, .nv-seg__btn, .nv-tab, .nv-pg__btn { position: relative; }
.nv-iconbtn::before, .nv-toggle::before, .nv-chip::before, .nv-seg__btn::before, .nv-pg__btn::before {
  content: ""; position: absolute; top: 50%; left: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); border-radius: inherit;
}

/* ---- buttons */
.nv-btn {
  --nv-btn-h: 44px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--nv-btn-h); padding: 0 22px;
  border: 1px solid transparent; border-radius: var(--nv-r-pill); background: var(--nv-primary); color: var(--nv-on-primary);
  font-size: 15px; font-weight: 600; line-height: 1; white-space: nowrap; text-decoration: none; user-select: none;
  transition: background var(--nv-dur-hover) ease, color var(--nv-dur-hover) ease, border-color var(--nv-dur-hover) ease, opacity var(--nv-dur-hover) ease;
}
.nv-btn:hover { background: var(--nv-primary-hover); color: var(--nv-on-primary); }
.nv-btn--sm { --nv-btn-h: 36px; padding: 0 15px; font-size: 14px; }
.nv-btn--lg { --nv-btn-h: 48px; padding: 0 26px; font-size: 15.5px; }
.nv-btn--block { display: flex; width: 100%; }
.nv-btn--secondary { background: var(--nv-surface-alt); color: var(--nv-text-2); }
.nv-btn--secondary:hover { background: color-mix(in srgb, var(--nv-surface-alt) 92%, var(--nv-text)); color: var(--nv-text); }
.nv-btn--soft { background: var(--nv-primary-light); color: var(--nv-primary); }
.nv-btn--soft:hover { background: color-mix(in srgb, var(--nv-primary-light) 88%, var(--nv-primary)); color: var(--nv-primary); }
.nv-btn--ghost { background: transparent; color: var(--nv-text-2); }
.nv-btn--ghost:hover { background: var(--nv-surface-alt); color: var(--nv-text); }
.nv-btn--text { background: transparent; color: var(--nv-primary); padding: 0 6px; height: auto; min-height: 36px; }
.nv-btn--text:hover { background: transparent; color: var(--nv-primary-hover); }
.nv-btn--danger { background: var(--nv-danger); color: var(--nv-on-danger); }
.nv-btn--danger:hover { background: color-mix(in srgb, var(--nv-danger) 85%, #000); color: var(--nv-on-danger); }
.nv-btn--danger-soft { background: var(--nv-danger-bg); color: var(--nv-danger); border-color: var(--nv-danger); }
.nv-btn--danger-soft:hover { background: var(--nv-danger-bg); color: var(--nv-danger); filter: brightness(.97); }
.nv-btn--success-soft { background: var(--nv-success-bg); color: var(--nv-success); border-color: var(--nv-success); }
.nv-btn--success-soft:hover { background: var(--nv-success-bg); color: var(--nv-success); filter: brightness(.97); }
.nv-btn--outline { background: transparent; color: var(--nv-text-2); border-color: var(--nv-border); }
.nv-btn--outline:hover { background: var(--nv-surface-alt); color: var(--nv-text); }
.nv-btn--light { background: var(--nv-on-hero); color: var(--nv-hero-deep); }                      /* on a photo hero */
.nv-btn--light:hover { background: var(--nv-on-hero); color: var(--nv-hero-deep); filter: brightness(.96); }
.nv-btn--glass { background: rgba(255, 255, 255, .14); color: var(--nv-on-hero); }                 /* second button on a photo hero */
.nv-btn--glass:hover { background: rgba(255, 255, 255, .22); color: var(--nv-on-hero); }
.nv-btn:disabled, .nv-btn[aria-disabled="true"] { opacity: .55; pointer-events: none; }
.nv-btn[aria-busy="true"] { pointer-events: none; }
.nv-btn[aria-busy="true"] > :not(.nv-spinner) { opacity: .0; }
.nv-btn[aria-busy="true"] > .nv-spinner { position: absolute; }
.nv-spinner {
  width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent;
  animation: nv-spin .7s linear infinite; flex: none;
}
@media (max-width: 899px), (pointer: coarse) {
  .nv-btn--sm { --nv-btn-h: 40px; }
  .nv-btn { min-height: 44px; }
  .nv-btn--text { min-height: 44px; }
}
.nv-btn--icon { padding: 0; width: var(--nv-btn-h); }
/* quiet text buttons keep their look; their hit area grows to 44px */
.nv-card__action, .nv-link { position: relative; }
.nv-card__action::before, .nv-link::before { content: ""; position: absolute; inset: -7px -6px; }
@media (pointer: coarse), (max-width: 899px) { .nv-link::before { inset: -13px -6px; } }   /* a text link is 44px to touch */

/* ---- icon buttons (round) */
.nv-iconbtn {
  width: 42px; height: 42px; flex: none; display: inline-grid; place-items: center; padding: 0; border: 0; border-radius: 50%;
  background: var(--nv-surface); color: var(--nv-text-2); transition: color var(--nv-dur-hover) ease, background var(--nv-dur-hover) ease; text-decoration: none;
}
.nv-iconbtn:hover { color: var(--nv-text); }
.nv-iconbtn--sm { width: 36px; height: 36px; }
.nv-iconbtn--xs { width: 34px; height: 34px; }
.nv-iconbtn--soft { background: var(--nv-surface-alt); color: var(--nv-text); }
.nv-iconbtn--soft:hover { background: color-mix(in srgb, var(--nv-surface-alt) 90%, var(--nv-text)); }
.nv-iconbtn--plain { background: transparent; }
.nv-iconbtn--plain:hover { background: var(--nv-surface-alt); }
.nv-iconbtn--glass { background: var(--nv-glass); color: var(--nv-on-hero); }
.nv-iconbtn--glass:hover { background: rgba(255, 255, 255, .26); color: var(--nv-on-hero); }
.nv-iconbtn--square { border-radius: var(--nv-r-md); }
.nv-iconbtn--primary { background: var(--nv-primary); color: var(--nv-on-primary); }
.nv-iconbtn--primary:hover { background: var(--nv-primary-hover); color: var(--nv-on-primary); }
.nv-iconbtn[aria-disabled="true"], .nv-iconbtn:disabled { opacity: .5; pointer-events: none; }
.nv-iconbtn__dot { position: absolute; top: 9px; right: 10px; width: 9px; height: 9px; border-radius: 50%; background: var(--nv-primary); border: 2px solid var(--nv-surface); }

/* ---- chips: filter pills. Group them in .nv-chips */
.nv-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.nv-chips--nowrap { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.nv-chips--nowrap::-webkit-scrollbar { display: none; }
.nv-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 13px; border: 1px solid transparent; border-radius: var(--nv-r-pill);
  background: var(--nv-surface-alt); color: var(--nv-text-2); font-size: 13px; font-weight: 600; white-space: nowrap; flex: none;
  transition: background var(--nv-dur-hover) ease, color var(--nv-dur-hover) ease;
}
.nv-chip:hover { color: var(--nv-text); }
.nv-chip[aria-pressed="true"], .nv-chip.is-active { background: var(--nv-primary); color: var(--nv-on-primary); }
.nv-chips--soft .nv-chip { background: transparent; color: var(--nv-text-3); }
.nv-chips--soft .nv-chip[aria-pressed="true"] { background: var(--nv-primary-light); color: var(--nv-primary); border-color: var(--nv-primary); }
.nv-chip:disabled, .nv-chip[aria-disabled="true"] { opacity: .65; }
.nv-chip__x { margin-right: -4px; opacity: .7; }

/* ---- segmented control (range picker): a grey pill holding pills; the chosen one is white with a hairline shadow */
.nv-seg { display: inline-flex; gap: 2px; padding: 3px; max-width: 100%; border-radius: var(--nv-r-pill); background: var(--nv-surface-alt); }
/* five or more options may not fit a phone: the group scrolls sideways instead of widening the page. Scrolling clips the hit area the buttons extend past the grey pill, so the pill is as tall as the target (44px) */
.nv-seg--scroll { overflow-x: auto; scrollbar-width: none; padding-block: 7px; }
.nv-seg--scroll::-webkit-scrollbar { display: none; }
.nv-seg__btn {
  flex: none; white-space: nowrap; min-width: 40px; height: 30px; padding: 0 12px; border: 0; border-radius: var(--nv-r-pill); background: transparent; color: var(--nv-text-2);
  font-size: 13px; font-weight: 600; transition: background var(--nv-dur-hover) ease, color var(--nv-dur-hover) ease, box-shadow var(--nv-dur-hover) ease;
}
.nv-seg__btn:hover { color: var(--nv-text); }
.nv-seg__btn[aria-pressed="true"], .nv-seg__btn[aria-selected="true"] { background: var(--nv-surface); color: var(--nv-text); box-shadow: 0 1px 2px rgba(var(--nv-ink-rgb), .08); }

/* ---- badges and counts */
.nv-badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 20px; font-size: 12.5px; font-weight: 600; line-height: 1.35; white-space: nowrap;
  background: var(--nv-surface-alt); color: var(--nv-text-2);
}
.nv-badge--sm { padding: 2px 8px; font-size: 12px; }
.nv-badge--success { background: var(--nv-success-bg); color: var(--nv-success); }
.nv-badge--warning { background: var(--nv-warning-bg); color: var(--nv-warning-ink); }
.nv-badge--danger { background: var(--nv-danger-bg); color: var(--nv-danger); }
.nv-badge--primary, .nv-badge--info { background: var(--nv-primary-light); color: var(--nv-primary); }
.nv-badge--solid { background: var(--nv-primary); color: var(--nv-on-primary); }
.nv-badge--glass { background: rgba(255, 255, 255, .18); color: var(--nv-on-hero); height: 26px; padding: 0 9px; border-radius: var(--nv-r-pill); font-size: 13px; }
.nv-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.nv-count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--nv-r-sm); background: var(--nv-primary); color: var(--nv-on-primary); font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.nv-count--danger { background: var(--nv-danger); color: var(--nv-on-danger); }
.nv-count--on-dark { background: var(--nv-primary); color: var(--nv-on-primary); }

/* ---- avatars: initials on a tinted circle, or a photo */
.nv-avatar {
  --nv-av: 40px; --nv-av-c: var(--nv-text-2); width: var(--nv-av); height: var(--nv-av); flex: none; display: inline-grid; place-items: center; border-radius: 50%; overflow: hidden;
  background: color-mix(in srgb, var(--nv-av-c) 13%, transparent); color: color-mix(in srgb, var(--nv-av-c), var(--nv-text) var(--nv-ink-lift)); font-size: calc(var(--nv-av) * .325); font-weight: 600; letter-spacing: 0; line-height: 1;
}
.nv-avatar--neutral { background: var(--nv-surface-alt); color: var(--nv-text-2); }
.nv-avatar--image { background: var(--nv-primary-tint); }
.nv-avatar > img { width: 100%; height: 100%; object-fit: cover; }
.nv-avatar--square { border-radius: var(--nv-r-tile); }

/* ---- cards: no border, no shadow */
.nv-card { position: relative; background: var(--nv-surface); border-radius: var(--nv-r-card); padding: 22px; min-width: 0; color: var(--nv-text); }
.nv-card--sm { padding: 16px; }
.nv-card--lg { padding: 28px; }
.nv-card--flush { padding: 0; overflow: hidden; }
.nv-card--flush :focus-visible { outline-offset: -2px; }   /* the card clips what is outside it: a ring drawn outside a row that touches the edge would be cut off */
.nv-card--list { padding: 20px 12px 12px; }
.nv-card--alt { background: var(--nv-surface-alt); }
.nv-card--panel { border-radius: var(--nv-r-panel); }
.nv-card--hero { border-radius: var(--nv-r-hero); padding: 28px 26px 24px; background: var(--nv-grad-hero); color: var(--nv-on-hero); overflow: hidden; isolation: isolate; }
.nv-card--hero h1, .nv-card--hero h2, .nv-card--hero h3 { color: inherit; }
.nv-card--invest { background: var(--nv-grad-invest); }
.nv-card--rewards { background: var(--nv-grad-rewards); }
.nv-card--fx { background: var(--nv-grad-fx); }
.nv-card--photo { color: var(--nv-on-hero); background: var(--nv-hero-deep); overflow: hidden; isolation: isolate; }
.nv-card--photo::after { content: ""; position: absolute; inset: 0; background: var(--nv-grad-photo); z-index: -1; }
.nv-card__photo { position: absolute; z-index: -2; object-fit: cover; }
.nv-card--hero .nv-card__photo { right: -8%; top: 0; height: 100%; width: 58%; opacity: .28; -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%); mask-image: linear-gradient(90deg, transparent, #000 45%); }
.nv-card--photo > .nv-card__photo { inset: 0; width: 100%; height: 100%; opacity: .35; }
.nv-card--click { cursor: pointer; transition: transform var(--nv-dur-hover) ease; }
.nv-card--click:hover { transform: translateY(-2px); }
.nv-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.nv-card--list .nv-card__head, .nv-card--flush .nv-card__head { padding: 0 12px 8px; margin-bottom: 0; }
.nv-card--flush .nv-card__head { padding: 20px 22px 12px; }
.nv-card__title { font-size: 16px; font-weight: 600; letter-spacing: -.02em; }
.nv-card__sub { margin-top: 2px; font-size: 13px; color: var(--nv-text-3); }
.nv-card__action { border: 0; background: transparent; padding: 6px 0; color: var(--nv-text-2); font-size: 14px; font-weight: 500; }
.nv-card__action:hover { color: var(--nv-text); }
.nv-card--hero .nv-card__sub { color: var(--nv-on-hero-2); }

/* ---- list rows: icon or avatar, text, amount */
.nv-rows { display: flex; flex-direction: column; }
.nv-row {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 8px 12px; border: 0; border-radius: var(--nv-r-row);
  background: transparent; text-align: left; color: var(--nv-text); text-decoration: none; transition: background var(--nv-dur-hover) ease;
}
button.nv-row, a.nv-row, .nv-row--click { cursor: pointer; }
button.nv-row:hover, a.nv-row:hover, .nv-row--click:hover { background: var(--nv-surface-alt); color: var(--nv-text); }
.nv-row[aria-current="true"], .nv-row.is-selected { background: var(--nv-primary-light); }
.nv-row--tall { min-height: 64px; padding: 10px 12px; }
.nv-rows--divided > .nv-row { border-radius: 0; padding: 14px 20px; border-top: 1px solid var(--nv-border-soft); }
.nv-rows--divided > .nv-row:first-child { border-top: 0; }
.nv-row__body { flex: 1; min-width: 0; }
.nv-row__title { display: block; font-size: 15px; font-weight: 500; color: var(--nv-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nv-row__sub { display: block; font-size: 13px; color: var(--nv-text-3); }
.nv-row__end { flex: none; text-align: right; }
.nv-row__amount { display: block; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.nv-row__amount--in { color: var(--nv-success); }
.nv-row__lead { flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--nv-surface-alt); color: var(--nv-text-2); }
.nv-row__lead--tile { border-radius: var(--nv-r-tile); background: var(--nv-primary-light); color: var(--nv-primary); }
.nv-row__lead--kind { width: 42px; height: 42px; border-radius: var(--nv-r-tile); background: var(--nv-kind-bg, var(--nv-kind-checking-bg)); color: var(--nv-kind-fg, var(--nv-kind-checking)); }
.nv-row--kind-savings { --nv-kind-bg: var(--nv-kind-savings-bg); --nv-kind-fg: var(--nv-kind-savings); }
.nv-row--kind-credit { --nv-kind-bg: var(--nv-kind-credit-bg); --nv-kind-fg: var(--nv-kind-credit); }
.nv-row__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--nv-primary); flex: none; }

/* ---- progress bar and ring */
.nv-progress { --nv-pc: var(--nv-primary); height: 8px; border-radius: 4px; background: var(--nv-surface-alt); overflow: hidden; }
.nv-progress--thin { height: 6px; }
.nv-progress--thick { height: 10px; border-radius: 5px; }
.nv-progress__bar { height: 100%; width: var(--nv-pv, 0%); border-radius: inherit; background: var(--nv-pc); transform-origin: left; animation: nv-grow .7s cubic-bezier(.32, .72, 0, 1) both; }
.nv-progress.is-over { --nv-pc: var(--nv-warning); }
.nv-progress-meta { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 6px; font-size: 13px; color: var(--nv-text-3); }
.nv-ring { position: relative; display: inline-grid; place-items: center; flex: none; }
.nv-ring__center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; line-height: 1.15; }

/* ---- stat tile */
.nv-stat { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: 18px; background: var(--nv-surface); min-width: 0; }
.nv-stat--alt { background: var(--nv-surface-alt); }
.nv-stat--glass { background: rgba(255, 255, 255, .14); color: var(--nv-on-hero); }
.nv-stat__label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--nv-text-3); }
.nv-stat--glass .nv-stat__label { color: var(--nv-on-hero-2); }
.nv-stat__value { font-size: 24px; font-weight: 600; letter-spacing: -.03em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.nv-stat__sub { font-size: 13px; color: var(--nv-text-3); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.nv-stat--glass .nv-stat__sub { color: var(--nv-on-hero-2); }
.nv-delta { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; font-size: 13px; color: var(--nv-text-2); }
.nv-delta--up { color: var(--nv-success); }
.nv-delta--down { color: var(--nv-danger); }
.nv-stat__spark { margin-top: 6px; }

/* ---- empty state and skeleton */
.nv-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 40px 20px; text-align: center; color: var(--nv-text-2); }
.nv-empty__icon { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: var(--nv-surface-alt); color: var(--nv-text-3); margin-bottom: 6px; }
.nv-empty__title { font-size: 16px; font-weight: 600; color: var(--nv-text); letter-spacing: -.01em; }
.nv-empty__text { font-size: 14px; color: var(--nv-text-3); max-width: 40ch; }
.nv-empty__action { margin-top: 10px; }

.nv-skeleton { position: relative; overflow: hidden; background: var(--nv-skeleton); border-radius: var(--nv-r-sm); height: 14px; }
.nv-skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--nv-skeleton-shine), transparent); animation: nv-shine 1.4s ease-in-out infinite; }
.nv-skeleton--circle { border-radius: 50%; }
.nv-skeleton--rect { border-radius: var(--nv-r-row); }
.nv-skeleton-stack { display: flex; flex-direction: column; gap: 10px; }

/* ---- banner (inline message) */
.nv-banner { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: var(--nv-r-row); background: var(--nv-primary-light); color: var(--nv-text); font-size: 14px; line-height: 1.5; }
.nv-banner__icon { flex: none; margin-top: 1px; color: var(--nv-primary); }
.nv-banner__body { flex: 1; min-width: 0; }
.nv-banner__title { font-weight: 600; margin-bottom: 2px; }
.nv-banner__text { color: var(--nv-text-2); }
.nv-banner__text:empty { display: none; }
.nv-banner__actions { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }
.nv-banner--success { background: var(--nv-success-bg); } .nv-banner--success .nv-banner__icon { color: var(--nv-success); }
.nv-banner--warning { background: var(--nv-warning-bg); } .nv-banner--warning .nv-banner__icon { color: var(--nv-warning-ink); }
.nv-banner--danger { background: var(--nv-danger-bg); } .nv-banner--danger .nv-banner__icon { color: var(--nv-danger); }
.nv-banner--plain { background: var(--nv-surface-alt); } .nv-banner--plain .nv-banner__icon { color: var(--nv-text-2); }

/* ---- small text helpers used by components */
.nv-h1 { font-size: clamp(24px, 2.4vw, 30px); font-weight: 600; letter-spacing: -.03em; }
.nv-h2 { font-size: 16px; font-weight: 600; letter-spacing: -.02em; }
.nv-muted { color: var(--nv-text-3); }
.nv-meta { font-size: 13px; color: var(--nv-text-3); }
.nv-amount { font-variant-numeric: tabular-nums; font-weight: 600; }
.nv-amount--in { color: var(--nv-success); }
.nv-amount--out { color: var(--nv-text); }
.nv-divider { height: 1px; background: var(--nv-border-soft); border: 0; margin: 0; }
.nv-link { color: var(--nv-primary); font-weight: 600; background: none; border: 0; padding: 0; text-decoration: none; }
.nv-link:hover { color: var(--nv-primary-hover); }

/* ---- the plain pages the core shows before any screen exists: not found, could not load, loading */
.nv-notice { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 48px 16px; }
.nv-notice--page { min-height: 100vh; justify-content: center; background: var(--nv-canvas); color: var(--nv-text); }
.nv-notice__title { margin: 0; font-size: 24px; line-height: 1.25; }
.nv-notice__text { margin: 0; max-width: 44ch; font-size: 16px; line-height: 1.5; color: var(--nv-text-2); }
.nv-notice__action { margin-top: 8px; }
.nv-pending { display: grid; gap: 16px; padding: 8px 0; }
.nv-pending__bar { height: 32px; border-radius: var(--nv-r-tile); }
.nv-pending__block { height: 140px; border-radius: var(--nv-r-tile); }
.nv-outlet:focus { outline: none; }
.nv-contents { display: contents; }
.nv-offscreen { position: fixed; left: -9999px; top: 0; opacity: 0; }
.nv-noscript { margin: 0; padding: 24px; font: 16px/1.5 system-ui, sans-serif; }
/* the loading mark the server prints inside #nova-root until the app replaces it */
.nv-boot { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: var(--nv-text-3); font-size: 14px; }
.nv-boot__mark { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--nv-border); border-top-color: var(--nv-primary); animation: nv-boot-spin .9s linear infinite; }
@keyframes nv-boot-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .nv-boot__mark { animation: none; } }
[data-reduce-motion="true"] .nv-boot__mark { animation: none; }
.nv-stat--click { text-align: left; border: 0; width: 100%; }
.nv-skeleton--bar { display: block; }
.nv-skeleton-item { padding: 8px 12px; }
.nv-skeleton-item > .nv-skeleton--circle { flex: none; }
.nv-skeleton-item > .nv-skeleton-stack { flex: 1; }
.nv-cell-code { display: block; max-width: 26ch; }

/* ui/css/components-brand.css */
/* Brand pieces: the logo (mark + word + sub-label) and the bank card face. Colours come from tokens. */

/* ---- logo. --nv-logo-size is the height of the mark; the text scales with it */
.nv-logo { --nv-logo-size: 34px; display: inline-flex; align-items: center; gap: calc(var(--nv-logo-size) * .32); color: var(--nv-text); line-height: normal; }
.nv-logo__mark { width: var(--nv-logo-size); height: var(--nv-logo-size); flex: none; display: block; }
.nv-logo__tile { fill: var(--nv-primary-hover); }
.nv-logo__glyph { fill: var(--nv-on-hero); }
.nv-logo__spark { fill: var(--nv-cyan); }
.nv-logo__text { display: flex; flex-direction: column; min-width: 0; }
.nv-logo__word { font-weight: 700; font-size: calc(var(--nv-logo-size) * .5); letter-spacing: .14em; color: var(--nv-text); white-space: nowrap; }
.nv-logo__sub { font-size: calc(var(--nv-logo-size) * .34); letter-spacing: .2em; color: var(--nv-text-3); white-space: nowrap; text-transform: uppercase; }
.nv-logo--image { display: block; }
.nv-logo--image img, img.nv-logo__img { display: block; height: var(--nv-logo-size); width: auto; max-width: 100%; }
/* on a dark or photo background: white tile, brand ink, white word */
.nv-logo--dark .nv-logo__tile { fill: var(--nv-on-hero); }
.nv-logo--dark .nv-logo__glyph { fill: var(--nv-hero-card-b); }
.nv-logo--dark .nv-logo__word { color: var(--nv-on-hero); }
.nv-logo--dark .nv-logo__sub { color: var(--nv-tip-muted); }
/* in the blue sidebar: brand tile, white glyph, white word, soft sub-label */
.nv-logo--onblue .nv-logo__tile { fill: var(--nv-hero-card-b); }
.nv-logo--onblue .nv-logo__word { color: var(--nv-on-hero); letter-spacing: .14em; font-size: calc(var(--nv-logo-size) * .469); }
.nv-logo--onblue .nv-logo__sub { color: rgba(255, 255, 255, .55); letter-spacing: .18em; font-size: calc(var(--nv-logo-size) * .344); }

/* ---- bank card face (1.586 : 1). Only the last four digits ever reach the browser. */
.nv-bankcard {
  --nv-bc-bg: var(--nv-grad-card-debit);
  position: relative; width: 100%; max-width: 392px; aspect-ratio: 1.585; margin-inline: auto; padding: 22px; display: flex; flex-direction: column;
  border-radius: var(--nv-r-card); background: var(--nv-bc-bg); color: var(--nv-on-hero); box-shadow: var(--nv-shadow-card); overflow: hidden; isolation: isolate;
  transition: transform .25s ease; container-type: inline-size;
}
.nv-bankcard::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .09) 50%, transparent 62%); pointer-events: none; }
.nv-bankcard--rewards { --nv-bc-bg: var(--nv-grad-card-rewards); }
.nv-bankcard--travel { --nv-bc-bg: var(--nv-grad-card-travel); }
.nv-bankcard--sm { max-width: 240px; padding: 14px; border-radius: var(--nv-r-row); }
.nv-bankcard__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.nv-bankcard__brand { font-weight: 700; font-size: 14px; letter-spacing: .16em; }
.nv-bankcard__tier { font-size: 12.5px; letter-spacing: .14em; color: rgba(255, 255, 255, .72); margin-top: 2px; text-transform: uppercase; }
.nv-bankcard__wave { color: rgba(255, 255, 255, .9); flex: none; }
.nv-bankcard__mid { display: flex; align-items: center; gap: 14px; margin-top: 22px; }
.nv-bankcard__chip { position: relative; flex: none; width: 44px; height: 32px; border-radius: 6px; background: linear-gradient(140deg, var(--nv-chip-gold-a), var(--nv-chip-gold-b)); }
.nv-bankcard__chip::after { content: ""; position: absolute; inset: 6px 8px; border-left: 1px solid rgba(0, 0, 0, .25); border-right: 1px solid rgba(0, 0, 0, .25); }
.nv-bankcard__number { font-size: clamp(17px, 2.4vw, 21px); letter-spacing: .14em; font-variant-numeric: tabular-nums; white-space: pre; min-width: 0; overflow: hidden; }
@container (max-width: 330px) { .nv-bankcard__number { font-size: 16px; letter-spacing: .1em; } }
.nv-bankcard__bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-top: auto; }
.nv-bankcard__label { font-size: 11px; letter-spacing: .14em; color: rgba(255, 255, 255, .6); }
.nv-bankcard__value { font-size: 14px; letter-spacing: .06em; margin-top: 3px; font-variant-numeric: tabular-nums; }
.nv-bankcard__network { font-size: 15px; font-weight: 700; letter-spacing: .02em; color: rgba(255, 255, 255, .92); display: flex; align-items: center; }
.nv-bankcard__frozen {
  position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background: rgba(var(--nv-ink-rgb), .62); backdrop-filter: blur(1.5px); -webkit-backdrop-filter: blur(1.5px); font-size: 14px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
}
.nv-bankcard.is-frozen { transform: scale(.985); }

/* ui/css/components-forms.css */
/* Forms: field shell, inputs, select, check / radio / choice tiles, toggle, slider, money, OTP, file drop, search, date range, form grid.
   Inputs are 48px tall, filled with surface-alt, no border until there is an error. 16px text on phones (base.css). */

.nv-form { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.nv-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.nv-form__section { grid-column: 1 / -1; margin-top: 6px; font-size: 14px; font-weight: 600; color: var(--nv-text); }
.nv-form__title { font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
.nv-form__intro { margin-top: 4px; font-size: 14px; color: var(--nv-text-3); }
.nv-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.nv-form__actions--end { justify-content: flex-end; }
.nv-form__actions .nv-form__spacer { flex: 1; }
.nv-form__banner { margin: 0; }
.nv-form__step { display: flex; flex-direction: column; gap: 18px; animation: nv-rise .25s var(--nv-ease) both; }
@media (max-width: 599px) { .nv-form__grid { grid-template-columns: minmax(0, 1fr); } }

/* ---- field shell */
.nv-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; grid-column: 1 / -1; }
.nv-field--half { grid-column: auto; }
@media (max-width: 599px) { .nv-field--half { grid-column: 1 / -1; } }
.nv-field[hidden] { display: none; }
.nv-label { font-size: 13px; font-weight: 600; color: var(--nv-text-2); line-height: 1.3; }
.nv-label__opt { font-weight: 400; color: var(--nv-text-3); margin-left: 4px; }
.nv-label__req { color: var(--nv-danger); margin-left: 2px; }
.nv-help { font-size: 13px; color: var(--nv-text-3); line-height: 1.45; }
.nv-error { font-size: 14px; color: var(--nv-danger); line-height: 1.4; }
.nv-error:empty, .nv-help:empty { display: none; }

/* ---- text inputs */
.nv-input-wrap { position: relative; display: flex; align-items: center; min-width: 0; }
.nv-input {
  width: 100%; min-width: 0; height: var(--nv-input-h, 48px); padding: 0 14px; border: 1px solid transparent; border-radius: var(--nv-input-r, var(--nv-r-input));
  background: var(--nv-surface-alt); color: var(--nv-text); font-size: 15px; line-height: 1.3; appearance: none; -webkit-appearance: none;
  transition: border-color var(--nv-dur-hover) ease, background var(--nv-dur-hover) ease;
}
.nv-input:hover:not(:disabled) { border-color: var(--nv-border); }
.nv-input:focus-visible { outline-offset: 1px; }
.nv-input:disabled, .nv-input[readonly] { opacity: .7; cursor: not-allowed; }
.nv-input[readonly] { cursor: default; }
.nv-field.has-error .nv-input, .nv-input[aria-invalid="true"] { border-color: var(--nv-danger); }
textarea.nv-input { height: auto; min-height: 96px; padding: 12px 14px; resize: vertical; line-height: 1.5; }
input[type="date"].nv-input, input[type="time"].nv-input { min-width: 0; }
input[type="number"].nv-input { -moz-appearance: textfield; appearance: textfield; }
input[type="number"].nv-input::-webkit-outer-spin-button, input[type="number"].nv-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="color"].nv-input { padding: 4px; width: 64px; cursor: pointer; }
/* prefix / suffix (a symbol next to the text): the box looks like an input and holds a bare input */
.nv-box {
  display: flex; align-items: center; gap: 6px; width: 100%; min-width: 0; height: var(--nv-input-h, 48px); padding: 0 14px; border: 1px solid transparent; border-radius: var(--nv-input-r, var(--nv-r-input));
  background: var(--nv-surface-alt); color: var(--nv-text); cursor: text; transition: border-color var(--nv-dur-hover) ease;
}
.nv-box:hover:not(.is-disabled) { border-color: var(--nv-border); }
.nv-box:focus-within { outline: 2px solid var(--nv-ring); outline-offset: 1px; }
.nv-box.is-disabled { opacity: .7; cursor: not-allowed; }
.nv-field.has-error .nv-box, .nv-box.is-invalid { border-color: var(--nv-danger); }
.nv-box__input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: transparent; color: inherit; outline: none; font-size: 15px; font-variant-numeric: tabular-nums; }
.nv-box__affix { flex: none; color: var(--nv-text-3); font-size: 15px; user-select: none; }
.nv-box--lg { height: 56px; }
.nv-box--lg .nv-box__input, .nv-box--lg .nv-box__affix { font-size: 18px; }
.nv-input-wrap--action .nv-input { padding-right: 74px; }
.nv-input__action { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); height: 30px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: var(--nv-primary); font-size: 13px; font-weight: 600; }
.nv-input__action:hover { background: var(--nv-primary-light); }
.nv-input--lg { height: 56px; font-size: 18px; }
.nv-input--mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13.5px; line-height: 1.5; }

/* ---- select */
.nv-select { position: relative; display: block; min-width: 0; }
.nv-select > select { padding-right: 40px; text-overflow: ellipsis; cursor: pointer; }
.nv-select__icon { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--nv-text-3); display: flex; }
.nv-select--sm > select { height: 40px; font-size: 14px; }
.nv-select--pill > select { border-radius: var(--nv-r-pill); padding-left: 18px; }
.nv-select > select option { color: var(--nv-text); background: var(--nv-surface); }

/* ---- checkbox, radio */
.nv-check { display: flex; align-items: flex-start; gap: 10px; min-height: 36px; padding: 6px 0; font-size: 14px; color: var(--nv-text-2); cursor: pointer; line-height: 1.45; }
.nv-check > input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--nv-primary); cursor: pointer; }
.nv-check > span { min-width: 0; padding-top: 1px; }
.nv-check a { font-weight: 600; }
.nv-checks { display: flex; flex-direction: column; }
.nv-checks--row { flex-direction: row; flex-wrap: wrap; gap: 4px 20px; }
@media (max-width: 899px), (pointer: coarse) { .nv-check { min-height: 44px; } }

/* ---- choice tiles (radio "cards") */
.nv-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 10px; }
.nv-choice {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 7px; padding: 14px; min-height: 104px; border: 1px solid transparent; border-radius: var(--nv-r-md);
  background: var(--nv-surface-alt); color: var(--nv-text-2); cursor: pointer; text-align: left; transition: background var(--nv-dur-hover) ease, border-color var(--nv-dur-hover) ease;
}
.nv-choice > input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.nv-choice__title { font-size: 14px; font-weight: 600; color: var(--nv-text); }
.nv-choice__hint { font-size: 13px; color: var(--nv-text-3); }
.nv-choice:has(input:checked), .nv-choice.is-selected { border-color: var(--nv-primary); background: var(--nv-primary-light); color: var(--nv-primary-hover); box-shadow: 0 4px 14px rgba(var(--nv-primary-rgb), .12); }
.nv-choice:has(input:checked) .nv-choice__title { color: var(--nv-primary); }
.nv-choice:has(input:focus-visible) { outline: 2px solid var(--nv-ring); outline-offset: 2px; }

/* ---- toggle (switch) */
.nv-toggle-row { display: flex; align-items: center; gap: 13px; min-width: 0; }
.nv-toggle-row__text { flex: 1; min-width: 0; }
.nv-toggle-row__label { display: block; font-size: 14px; font-weight: 600; color: var(--nv-text); }
.nv-toggle-row__sub { display: block; font-size: 13px; color: var(--nv-text-3); }
.nv-toggle {
  width: 42px; height: 24px; flex: none; border: 0; border-radius: var(--nv-r-md); padding: 2px; display: flex; justify-content: flex-start;
  background: var(--nv-toggle-off); transition: background .18s ease;
}
.nv-toggle__knob { width: 20px; height: 20px; border-radius: 50%; background: var(--nv-on-hero); box-shadow: 0 1px 3px rgba(var(--nv-ink-rgb), .3); transition: transform .18s ease; }
.nv-toggle[aria-checked="true"] { background: var(--nv-primary); }
.nv-toggle[aria-checked="true"] .nv-toggle__knob { transform: translateX(18px); }
.nv-toggle:disabled { opacity: .55; }

/* ---- slider */
.nv-slider { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.nv-slider__head { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; font-weight: 600; }
.nv-slider__value { color: var(--nv-primary); font-variant-numeric: tabular-nums; }
.nv-slider__ends { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--nv-text-3); }
.nv-slider__input {
  --nv-fill: 0%; width: 100%; height: 44px; margin: 0; background: transparent; appearance: none; -webkit-appearance: none; cursor: pointer;
}
.nv-slider__input::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(to right, var(--nv-primary) var(--nv-fill), var(--nv-surface-alt) var(--nv-fill)); }
.nv-slider__input::-moz-range-track { height: 6px; border-radius: 3px; background: var(--nv-surface-alt); }
.nv-slider__input::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--nv-primary); }
.nv-slider__input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; margin-top: -9px; border-radius: 50%; background: var(--nv-surface); border: 2px solid var(--nv-primary); box-shadow: 0 1px 4px rgba(var(--nv-ink-rgb), .25); }
.nv-slider__input::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--nv-surface); border: 2px solid var(--nv-primary); box-shadow: 0 1px 4px rgba(var(--nv-ink-rgb), .25); }
.nv-slider__input:disabled { opacity: .55; cursor: not-allowed; }

/* ---- OTP */
.nv-otp { display: flex; flex-direction: column; gap: 14px; }
.nv-otp__single { width: 100%; height: 60px; padding: 0 16px 0 calc(16px + .4em); border: 1px solid transparent; border-radius: var(--nv-r-input); background: var(--nv-surface-alt); color: var(--nv-text); font-size: 28px; font-weight: 600; letter-spacing: .4em; text-align: center; font-variant-numeric: tabular-nums; }
.nv-otp__single::placeholder { letter-spacing: .4em; }
.nv-otp.has-error .nv-otp__single, .nv-otp.has-error .nv-otp__box { border-color: var(--nv-danger); }
.nv-otp__dashes { display: grid; grid-template-columns: repeat(var(--nv-otp-n, 6), 1fr); gap: 6px; }
.nv-otp__dash { height: 4px; border-radius: 2px; background: var(--nv-border); transition: background .15s; }
.nv-otp__dash.is-on { background: var(--nv-primary); }
.nv-otp__boxes { display: grid; grid-template-columns: repeat(var(--nv-otp-n, 6), minmax(0, 1fr)); gap: 8px; }
.nv-otp__box { width: 100%; min-width: 0; height: 56px; padding: 0; border: 1px solid transparent; border-radius: var(--nv-r-input); background: var(--nv-surface-alt); color: var(--nv-text); font-size: 24px; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }
.nv-otp__box:focus-visible { outline-offset: 1px; border-color: var(--nv-primary); }

/* ---- file drop */
.nv-drop { display: flex; flex-direction: column; gap: 10px; }
.nv-drop__zone {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 150px; padding: 24px 18px; text-align: center;
  border: 2px dashed var(--nv-border); border-radius: 18px; background: transparent; color: var(--nv-text-2); transition: border-color var(--nv-dur-hover), background var(--nv-dur-hover);
}
.nv-drop__zone:hover, .nv-drop.is-over .nv-drop__zone { border-color: var(--nv-primary); background: var(--nv-primary-light); }
.nv-drop.has-error .nv-drop__zone { border-color: var(--nv-danger); }
.nv-drop__icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: var(--nv-surface-alt); color: var(--nv-primary); }
.nv-drop__title { font-size: 15px; font-weight: 600; color: var(--nv-text); }
.nv-drop__hint { font-size: 13px; color: var(--nv-text-3); }
.nv-drop__input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.nv-drop__list { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.nv-drop__item { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 12px; border-radius: var(--nv-r-md); background: var(--nv-surface-alt); font-size: 14px; }
.nv-drop__name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.nv-drop__size { font-size: 13px; color: var(--nv-text-3); flex: none; }
.nv-drop__thumb { width: 36px; height: 36px; border-radius: 8px; object-fit: cover; flex: none; }

/* ---- search */
.nv-search { position: relative; display: flex; align-items: center; width: 100%; min-width: 0; }
.nv-search__icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--nv-text-3); pointer-events: none; display: flex; }
.nv-search__input { width: 100%; height: 42px; padding: 0 40px 0 39px; border: 0; border-radius: var(--nv-r-pill); background: var(--nv-surface); color: var(--nv-text); font-size: 14px; }
.nv-search__input::-webkit-search-cancel-button { display: none; }
.nv-search--alt .nv-search__input { background: var(--nv-surface-alt); }
.nv-search--lg .nv-search__input { height: 52px; font-size: 16px; padding-left: 46px; }
.nv-search--lg .nv-search__icon { left: 17px; }
.nv-search__clear { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); }
@media (max-width: 899px), (pointer: coarse) { .nv-search__input { height: 44px; } }

/* ---- date range */
.nv-daterange { display: flex; flex-direction: column; gap: 10px; }
.nv-daterange__inputs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.nv-daterange__inputs .nv-input { flex: 1 1 140px; width: auto; }
.nv-daterange__sep { color: var(--nv-text-3); font-size: 13px; }

/* ---- repeater (list field) */
.nv-listfield { display: flex; flex-direction: column; gap: 8px; }
.nv-listfield__row { display: flex; align-items: center; gap: 8px; }
.nv-listfield__row .nv-input { flex: 1; }

/* Phones: every text input is at least 16px, so iOS does not zoom the page when it gets focus (R13) */
@media (max-width: 899px), (pointer: coarse) {
  .nv-input:not(.nv-input--lg), .nv-box__input, .nv-search__input, .nv-otp__box { font-size: 16px; }
  .nv-input__action { height: 44px; min-width: 44px; }
}

.nv-form__step-title { font-size: 17px; }
.nv-help--block { display: block; }
.nv-listfield__row--top { align-items: flex-start; }
.nv-listfield__grid { flex: 1; min-width: 0; }
.nv-cluster--nowrap { flex-wrap: nowrap; }

/* ---- rich text (richText, the `richtext` field): a tight toolbar over an editing area that looks like the other inputs */
.nv-rich { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.nv-rich__bar { display: flex; flex-wrap: wrap; gap: 4px; }
.nv-rich__tool { min-width: 36px; font-weight: 600; }
.nv-rich__tool[aria-pressed="true"] { background: var(--nv-primary-light); color: var(--nv-primary); }
.nv-rich__b { font-weight: 800; }
.nv-rich__i { font-style: italic; }
.nv-rich__link { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.nv-rich__link[hidden] { display: none; }
.nv-rich__link .nv-input { flex: 1 1 220px; }
.nv-rich__editor { display: block; height: auto; min-height: calc(var(--nv-rich-rows, 8) * 1.5em + 24px); padding: 12px 16px; line-height: 1.5; overflow-wrap: anywhere; cursor: text; }
.nv-rich__editor:empty::before { content: attr(data-placeholder); color: var(--nv-text-3); pointer-events: none; }
.nv-rich__editor[contenteditable="false"] { opacity: .6; cursor: not-allowed; }
.nv-rich__editor p, .nv-rich__editor ul, .nv-rich__editor ol, .nv-rich__editor blockquote, .nv-rich__editor h2, .nv-rich__editor h3 { margin: 0 0 .75em; }
.nv-rich__editor ul, .nv-rich__editor ol { padding-left: 1.4em; }
.nv-rich__editor blockquote { padding-left: 12px; border-left: 3px solid var(--nv-border); color: var(--nv-text-2); }
.nv-rich__editor h2 { font-size: 1.25em; font-weight: 600; }
.nv-rich__editor h3 { font-size: 1.1em; font-weight: 600; }
.nv-rich__editor a { color: var(--nv-primary); text-decoration: underline; }
.nv-rich__editor > :last-child { margin-bottom: 0; }
@media (max-width: 899px) { .nv-rich__tool { min-width: 44px; min-height: 44px; } }

/* ui/css/components-data.css */
/* Data display: tabs, accordion, stepper, table (stacked cards on phones), pager, chart frame, legend, tooltip. */

/* ---- tabs */
.nv-tabs { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.nv-tablist { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.nv-tablist::-webkit-scrollbar { display: none; }
.nv-tablist.nv-seg { align-self: flex-start; max-width: 100%; }
.nv-tablist--underline { gap: 22px; border-bottom: 1px solid var(--nv-border-soft); }
.nv-tab {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 2px; border: 0; background: transparent; color: var(--nv-text-3);
  font-size: 15px; font-weight: 600; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; flex: none;
  transition: color var(--nv-dur-hover) ease, border-color var(--nv-dur-hover) ease;
}
.nv-tab:hover { color: var(--nv-text); }
.nv-tab[aria-selected="true"] { color: var(--nv-primary); border-bottom-color: var(--nv-primary); }
.nv-tabpanel { min-width: 0; animation: nv-fade .2s ease both; }
.nv-tabpanel:focus-visible { outline-offset: 4px; border-radius: 8px; }

/* ---- accordion (FAQ) */
.nv-acc { display: flex; flex-direction: column; }
.nv-acc__item { border-top: 1px solid var(--nv-border-soft); }
.nv-acc__item:first-child { border-top: 0; }
.nv-acc__head { margin: 0; font-size: inherit; letter-spacing: 0; }
.nv-acc__btn {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; min-height: 56px; padding: 14px 0; border: 0; background: transparent;
  color: var(--nv-text); font-size: 15px; font-weight: 600; text-align: left; line-height: 1.4;
}
.nv-acc__btn:hover .nv-acc__title { color: var(--nv-primary); }
.nv-acc__chev { flex: none; color: var(--nv-text-3); transition: transform .2s ease; display: flex; }
.nv-acc__item.is-open .nv-acc__chev { transform: rotate(180deg); }
.nv-acc__panel { padding: 0 0 18px; font-size: 14.5px; line-height: 1.65; color: var(--nv-text-2); animation: nv-fade .2s ease both; }
.nv-acc--card .nv-acc__item { padding: 0 20px; }

/* ---- stepper (Details · Review · Done) */
.nv-steps { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; }
.nv-step {
  display: flex; align-items: center; gap: 9px; padding: 9px 15px 9px 11px; border-radius: 30px; border: 1px solid transparent;
  background: var(--nv-surface-alt); color: var(--nv-text-3); font-size: 14px; font-weight: 500; min-height: 40px;
}
.nv-step__num { width: 22px; height: 22px; flex: none; display: grid; place-items: center; border-radius: 50%; font-size: 12.5px; font-weight: 700; color: var(--nv-on-hero); background: var(--nv-step-idle); }
.nv-step.is-active { background: var(--nv-primary-light); border-color: color-mix(in srgb, var(--nv-primary) 20%, transparent); color: var(--nv-primary); font-weight: 600; }
.nv-step.is-active .nv-step__num { background: var(--nv-primary); color: var(--nv-on-primary); }
.nv-step.is-done { color: var(--nv-success); }
.nv-step.is-done .nv-step__num { background: var(--nv-success); color: var(--nv-on-hero); }
.nv-steps--dots { gap: 6px; }
.nv-steps--dots .nv-step { padding: 0; min-height: 0; width: 8px; height: 8px; border-radius: 4px; background: var(--nv-toggle-off); }
.nv-steps--dots .nv-step.is-active { width: 22px; background: var(--nv-primary); }
.nv-steps--dots .nv-step.is-done { background: var(--nv-success); }
/* phones: one row, only the current step keeps its words */
@media (max-width: 599px) {
  .nv-steps:not(.nv-steps--dots) { position: relative; flex-wrap: nowrap; gap: 6px; overflow-x: auto; scrollbar-width: none; }
  .nv-steps:not(.nv-steps--dots) .nv-step { position: relative; padding: 7px 8px; flex: none; }   /* positioned, so the hidden labels sit inside their step and never widen the page */
  .nv-steps:not(.nv-steps--dots) .nv-step:not(.is-active) .nv-step__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .nv-steps:not(.nv-steps--dots) .nv-step.is-active { padding-right: 13px; }
}

/* ---- table */
.nv-tablewrap { position: relative; min-width: 0; }
.nv-tablewrap--card { background: var(--nv-surface); border-radius: var(--nv-r-card); overflow: hidden; }
.nv-tablescroll { width: 100%; overflow-x: auto; }
.nv-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.nv-table caption { text-align: left; padding: 0 0 10px; font-weight: 600; }
.nv-table th {
  padding: 12px 14px; text-align: left; font-size: 13px; font-weight: 600; color: var(--nv-text-3); white-space: nowrap; background: transparent; border-bottom: 1px solid var(--nv-border);
}
.nv-table td { padding: 14px; border-top: 1px solid var(--nv-border-soft); vertical-align: middle; color: var(--nv-text); }
.nv-table tbody tr:first-child td { border-top: 0; }
.nv-table tbody tr { transition: background var(--nv-dur-hover) ease; }
.nv-table tbody tr:hover { background: var(--nv-surface-alt); }
.nv-table tr[data-click] { cursor: pointer; }
.nv-table .is-num { text-align: right; font-variant-numeric: tabular-nums; }
.nv-table .is-center { text-align: center; }
.nv-table .is-strong { font-weight: 600; }
.nv-table .is-muted { color: var(--nv-text-3); }
.nv-table .is-min { width: 1%; white-space: nowrap; }
.nv-table--sticky thead th { position: sticky; top: 0; z-index: 1; background: var(--nv-surface); }
.nv-th-btn { display: inline-flex; align-items: center; gap: 4px; border: 0; background: transparent; padding: 0; font: inherit; color: inherit; font-weight: 600; min-height: 32px; }
.nv-th-btn:hover { color: var(--nv-text); }
@media (max-width: 899px), (pointer: coarse) { .nv-th-btn { min-height: 44px; } }
.nv-th-btn .nv-icon { opacity: .35; transition: opacity .15s, transform .15s; }
th[aria-sort="ascending"] .nv-th-btn, th[aria-sort="descending"] .nv-th-btn { color: var(--nv-text); }
th[aria-sort="ascending"] .nv-th-btn .nv-icon, th[aria-sort="descending"] .nv-th-btn .nv-icon { opacity: 1; color: var(--nv-primary); }
th[aria-sort="descending"] .nv-th-btn .nv-icon { transform: rotate(180deg); }
.nv-table__cell-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.nv-table__cell-text { min-width: 0; }
.nv-table__cell-title { display: block; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nv-table__cell-sub { display: block; font-size: 13px; color: var(--nv-text-3); }
.nv-table__loading td { padding: 0; border: 0; }
.nv-table__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 14px 6px; }
.nv-table__count { font-size: 13px; color: var(--nv-text-3); }
.nv-tablewrap.is-busy .nv-tablescroll { opacity: .55; pointer-events: none; transition: opacity .15s; }

/* phones: every row becomes a small card; the header stays for screen readers */
@media (max-width: 719px) {
  .nv-table--stack, .nv-table--stack tbody { display: block; }
  .nv-table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .nv-table--stack tbody tr { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 12px 14px; border-top: 1px solid var(--nv-border-soft); }
  .nv-table--stack tbody tr:first-child { border-top: 0; }
  .nv-table--stack td { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 5px 0; border: 0; min-height: 32px; text-align: right; }
  .nv-table--stack td::before { content: attr(data-label); flex: none; font-size: 13px; color: var(--nv-text-3); text-align: left; }
  .nv-table--stack td[data-primary] { justify-content: flex-start; font-weight: 600; font-size: 15px; text-align: left; padding-bottom: 6px; }
  .nv-table--stack td[data-primary]::before { display: none; }
  .nv-table--stack td[data-nolabel]::before { display: none; }
  .nv-table--stack .is-num { text-align: right; }
  .nv-tablewrap--card .nv-table--stack tbody tr { padding-inline: 18px; }
  .nv-table--stack .nv-table__cell-title { white-space: normal; }
}

/* ---- pager */
.nv-pg { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.nv-pg__btn {
  min-width: 40px; height: 40px; padding: 0 13px; border: 1px solid transparent; border-radius: var(--nv-r-pill);
  background: var(--nv-surface-alt); color: var(--nv-text-2); font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 4px;
}
.nv-pg__btn:hover:not(:disabled) { color: var(--nv-text); }
.nv-pg__btn[aria-current="page"] { background: var(--nv-primary); border-color: var(--nv-primary); color: var(--nv-on-primary); }
.nv-pg__btn:disabled { opacity: .55; cursor: default; color: var(--nv-text-3); }
.nv-pg__gap { padding: 0 4px; color: var(--nv-text-3); }
.nv-pg--compact .nv-pg__status { font-size: 13px; color: var(--nv-text-3); padding: 0 8px; }

/* ---- charts: a responsive frame, hand-built SVG inside */
.nv-chart { position: relative; width: 100%; min-width: 0; }
.nv-chart > svg { display: block; width: 100%; overflow: visible; }
.nv-chart__grid { stroke: var(--nv-border-soft); stroke-width: 1; shape-rendering: crispEdges; }
.nv-chart__axis { fill: var(--nv-text-3); font-size: 12px; font-variant-numeric: tabular-nums; font-family: inherit; }
.nv-chart__s1 { --nv-sc: var(--nv-primary); }
.nv-chart__s2 { --nv-sc: var(--nv-series-2); }
.nv-chart__hit { fill: transparent; cursor: crosshair; }
.nv-chart__line { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 2400; animation: nv-draw 1.1s ease-out both; }
.nv-chart__dot { stroke: var(--nv-surface); stroke-width: 2; }
.nv-chart__cross { stroke: var(--nv-text-3); stroke-width: 1; stroke-dasharray: 3 3; pointer-events: none; }
.nv-chart__bar { transition: opacity .15s ease; }
.nv-chart.is-hovering .nv-chart__bar:not(.is-hot) { opacity: .55; }
.nv-chart--static .nv-chart__line { animation: none; stroke-dasharray: none; }
.nv-chart__empty { display: flex; align-items: center; justify-content: center; min-height: 120px; color: var(--nv-text-3); font-size: 14px; }

.nv-tip {
  position: absolute; z-index: 5; left: 0; top: 0; min-width: 120px; max-width: 240px; padding: 10px 12px; border-radius: var(--nv-r-md); pointer-events: none;
  background: var(--nv-tip-bg); color: var(--nv-tip-text); box-shadow: var(--nv-shadow-toast), 0 0 0 1px rgba(255, 255, 255, .08); font-size: 14px; font-variant-numeric: tabular-nums;
  opacity: 0; transform: translate(-50%, -100%); transition: opacity .12s ease; white-space: nowrap;
}
.nv-tip.is-on { opacity: 1; }
.nv-tip__title { font-size: 12.5px; color: var(--nv-tip-muted); margin-bottom: 4px; }
.nv-tip__row { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.nv-tip__key { display: inline-flex; align-items: center; gap: 6px; }
.nv-tip__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--nv-sc, var(--nv-primary)); }

.nv-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--nv-text-2); }
.nv-legend__item { display: inline-flex; align-items: center; gap: 6px; }
.nv-legend__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--nv-sc, var(--nv-primary)); flex: none; }
.nv-legend--list { flex-direction: column; flex-wrap: nowrap; gap: 10px; font-size: 14px; }
.nv-legend--list .nv-legend__item { display: flex; align-items: center; gap: 9px; }
.nv-legend--list .nv-legend__dot { width: 10px; height: 10px; border-radius: 3px; }
.nv-legend__name { flex: 1; min-width: 0; }
.nv-legend__val { font-weight: 600; color: var(--nv-text); font-variant-numeric: tabular-nums; }
button.nv-legend__item { border: 0; background: transparent; padding: 2px 0; text-align: left; font: inherit; color: inherit; }
button.nv-legend__item:hover .nv-legend__name { color: var(--nv-text); }
/* On a phone or a touch screen a legend that can be pressed has rows 44px tall (R13); the rows touch, so the 10px gap is not added to them again. The 1440 look stays. */
@media (max-width: 899px), (pointer: coarse) {
  button.nv-legend__item { min-height: 44px; }
  .nv-legend--act.nv-legend--list { gap: 0; }
}

.nv-donut { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 24px; }
.nv-donut__figure { position: relative; flex: none; }
.nv-donut__figure svg { display: block; transform: rotate(-90deg); }
.nv-donut__seg { transition: opacity .15s ease, stroke-width .15s ease; }
.nv-donut.is-hovering .nv-donut__seg:not(.is-hot) { opacity: .45; }
.nv-donut__center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; padding: 0 14%; }
.nv-donut__label { font-size: 12.5px; color: var(--nv-text-3); line-height: 1.2; }
.nv-donut__total { font-size: 23px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.2; }
.nv-donut .nv-legend { flex: 1 1 200px; min-width: 0; }

.nv-spark { display: block; overflow: visible; }
.nv-spark path { fill: none; stroke: var(--nv-sc, var(--nv-primary)); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nv-spark .nv-spark__area { fill: var(--nv-sc, var(--nv-primary)); opacity: .12; stroke: none; }

.nv-chartbox { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.nv-conic-wrap { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.nv-conic { position: relative; flex: none; border-radius: 50%; }
.nv-conic__hole { position: absolute; border-radius: 50%; background: var(--nv-hole, var(--nv-surface)); display: grid; place-items: center; text-align: center; font-size: 12px; color: var(--nv-text-3); }
.nv-conic-wrap .nv-legend { flex: 1; min-width: 120px; gap: 9px; font-size: 13.5px; }
.nv-ring__arc { animation: nv-ring .8s cubic-bezier(.32, .72, 0, 1) both; }

.nv-pg__count { margin-right: auto; padding-right: 10px; }
.nv-step__btn { display: flex; align-items: center; gap: 9px; background: none; border: 0; padding: 0; color: inherit; font: inherit; }
.nv-ring__svg { display: block; transform: rotate(-90deg); }
.nv-donut__center--flat { padding: 0; }

/* ui/css/components-overlay.css */
/* Overlays: scrim, modal, drawer (right on desktop, bottom sheet on phones), sheet, popover, menu, tooltip, toast. */

.nv-scrim {
  position: fixed; inset: 0; z-index: 60; display: flex; background: var(--nv-scrim); animation: nv-fade .2s ease both; overscroll-behavior: contain;
}
.nv-scrim.is-closing { animation: nv-fade .16s ease reverse both; }

/* ---- modal */
.nv-scrim--center { align-items: center; justify-content: center; padding: 18px; z-index: 75; }
.nv-modal {
  --nv-w: 480px; width: min(var(--nv-w), 100%); max-height: min(720px, 100%); display: flex; flex-direction: column; border-radius: var(--nv-r-card); background: var(--nv-surface);
  color: var(--nv-text); box-shadow: var(--nv-shadow-pop); animation: nv-rise .22s var(--nv-ease) both; outline: none;
}
.nv-modal--sm { --nv-w: 400px; }
.nv-modal--lg { --nv-w: 640px; }
.nv-modal--xl { --nv-w: 860px; }
/* The Close button of a modal or drawer (components/dialog.js builds it in one place) is the kit's small round icon button: drawn 36px as the design shows it, pressed like a
   44px one through the ::before every icon button has (components.css). Nothing here sizes it, so a measuring tool that reads only its box sees 36px; the tap area is 44px (R13).
   ui/tests/dialog-close.test.mjs pins both halves. */
.nv-modal__head, .nv-drawer__head, .nv-sheet__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 22px 22px 6px; flex: none; }
.nv-modal__title, .nv-drawer__title, .nv-sheet__title { font-size: 19px; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; }
.nv-modal__sub, .nv-drawer__sub, .nv-sheet__sub { margin-top: 4px; font-size: 14px; color: var(--nv-text-3); }
.nv-modal__body, .nv-drawer__body, .nv-sheet__body { padding: 14px 22px 22px; overflow-y: auto; flex: 1 1 auto; min-height: 0; overscroll-behavior: contain; }
.nv-modal__foot, .nv-drawer__foot, .nv-sheet__foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; padding: 0 22px 22px; flex: none; }
.nv-drawer__foot { padding-top: 14px; border-top: 1px solid var(--nv-border-soft); }
.nv-modal--confirm .nv-modal__body { padding-top: 6px; font-size: 14.5px; color: var(--nv-text-2); line-height: 1.55; }
.nv-modal__icon { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--nv-primary-light); color: var(--nv-primary); margin: 22px 22px 0; }
.nv-modal__icon--danger { background: var(--nv-danger-bg); color: var(--nv-danger); }
.nv-modal__icon + .nv-modal__head { padding-top: 14px; }

/* ---- drawer */
.nv-scrim--drawer { justify-content: flex-end; align-items: stretch; z-index: 70; }
.nv-drawer {
  --nv-w: 430px; display: flex; flex-direction: column; width: min(var(--nv-w), 92vw); height: 100%; background: var(--nv-surface); color: var(--nv-text);
  box-shadow: var(--nv-shadow-drawer); animation: nv-slide-in .26s cubic-bezier(.32, .72, 0, 1) both; outline: none;
}
.nv-drawer--wide { --nv-w: 560px; }
.nv-scrim--left { justify-content: flex-start; }
.nv-scrim--left .nv-drawer { --nv-w: 310px; width: min(var(--nv-w), 86vw); animation-name: nv-slide-in-left; box-shadow: none; }
.nv-drawer__head { padding-bottom: 14px; border-bottom: 1px solid var(--nv-border-soft); align-items: center; }
.nv-drawer__body { padding-top: 18px; }

/* ---- sheet (bottom) and the phone form of the drawer */
.nv-scrim--sheet { align-items: flex-end; justify-content: center; z-index: 72; }
.nv-sheet {
  width: 100%; max-width: 560px; max-height: 92vh; display: flex; flex-direction: column; background: var(--nv-surface); color: var(--nv-text); border-radius: 24px 24px 0 0;
  padding: 8px 14px calc(22px + env(safe-area-inset-bottom)); animation: nv-sheet .26s cubic-bezier(.32, .72, 0, 1) both; outline: none;
}
.nv-sheet__grab { width: 38px; height: 4px; border-radius: 2px; background: var(--nv-border); margin: 8px auto 14px; flex: none; }
.nv-sheet__head { padding: 0 4px 6px; }
.nv-sheet__body { padding: 8px 2px 0; }
.nv-sheet__foot { padding: 14px 4px 0; }
/* the More menu: a grid of icon tiles */
.nv-sheet-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.nv-sheet-group + .nv-sheet-group { margin-top: 20px; }
.nv-sheet-group__title { padding: 0 4px 8px; font-size: 13px; font-weight: 500; color: var(--nv-text-3); letter-spacing: 0; }
.nv-tile { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 6px 2px; border: 0; background: transparent; color: var(--nv-text-2); text-decoration: none; font-size: 12px; font-weight: 500; text-align: center; line-height: 1.25; }
.nv-tile__icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 18px; background: var(--nv-surface-alt); color: var(--nv-text); }
.nv-tile:hover .nv-tile__icon { background: var(--nv-primary-light); color: var(--nv-primary); }

@media (max-width: 899px) {
  .nv-scrim--drawer { align-items: flex-end; justify-content: stretch; }
  .nv-scrim--drawer .nv-drawer { width: 100%; height: auto; max-height: 88vh; border-radius: 18px 18px 0 0; animation-name: nv-sheet; padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -8px 40px rgba(var(--nv-ink-rgb), .2); }
  .nv-scrim--drawer .nv-drawer__head::before { content: ""; position: absolute; left: 50%; top: 8px; width: 38px; height: 4px; margin-left: -19px; border-radius: 2px; background: var(--nv-border); }
  .nv-scrim--drawer .nv-drawer__head { position: relative; padding-top: 26px; }
  .nv-scrim--left { justify-content: flex-start; align-items: stretch; }
  .nv-scrim--left .nv-drawer { width: min(var(--nv-w), 86vw); height: 100%; max-height: none; border-radius: 0; animation-name: nv-slide-in-left; }
  .nv-scrim--left .nv-drawer__head::before { display: none; }
  .nv-scrim--left .nv-drawer__head { padding-top: 22px; }
}

/* ---- popover and menu */
.nv-pop {
  position: fixed; z-index: 80; min-width: 160px; max-width: min(380px, calc(100vw - 16px)); max-height: min(520px, calc(100vh - 16px)); overflow: auto; border-radius: var(--nv-r-row); background: var(--nv-surface);
  color: var(--nv-text); box-shadow: var(--nv-shadow-pop); animation: nv-pop .16s ease both; outline: none;
}
.nv-pop--padded { padding: 8px; }
.nv-menu { display: flex; flex-direction: column; padding: 6px; gap: 1px; }
.nv-menu__item {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent;
  color: var(--nv-text-2); font-size: 14px; font-weight: 500; text-align: left; text-decoration: none; white-space: nowrap;
}
.nv-menu__item:hover, .nv-menu__item:focus-visible { background: var(--nv-surface-alt); color: var(--nv-text); outline: none; }
.nv-menu__item:focus-visible { box-shadow: inset 0 0 0 2px var(--nv-ring); }
.nv-menu__item--danger { color: var(--nv-danger); }
.nv-menu__item--danger:hover { color: var(--nv-danger); background: var(--nv-danger-bg); }
.nv-menu__item[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.nv-menu__sep { height: 1px; margin: 4px 6px; background: var(--nv-border-soft); border: 0; }
.nv-menu__head { padding: 10px 10px 12px; border-bottom: 1px solid var(--nv-border-soft); margin-bottom: 6px; }
@media (max-width: 899px), (pointer: coarse) { .nv-menu__item { min-height: 44px; } }

/* ---- tooltip (small hint on hover or focus) */
.nv-hint {
  position: fixed; z-index: 95; max-width: 240px; padding: 7px 10px; border-radius: 8px; background: var(--nv-tip-bg); color: var(--nv-tip-text); font-size: 12.5px; line-height: 1.35;
  pointer-events: none; animation: nv-fade .12s ease both; box-shadow: var(--nv-shadow-toast);
}

/* ---- toasts: bottom-right on desktop, bottom-centre above the tab bar on phones */
.nv-toasts {
  position: fixed; right: 22px; bottom: var(--nv-toast-bottom, 22px); z-index: 90; display: flex; flex-direction: column; align-items: flex-end; gap: 9px; pointer-events: none;
  max-width: calc(100vw - 24px);
}
.nv-toast {
  display: flex; align-items: flex-start; gap: 10px; max-width: 360px; padding: 12px 14px; border-radius: var(--nv-r-md); background: var(--nv-toast-success); color: var(--nv-toast-text);
  box-shadow: var(--nv-shadow-toast); animation: nv-toast .22s ease both; pointer-events: auto; font-size: 14px; line-height: 1.4;
}
.nv-toast--info { background: var(--nv-toast-info); }
.nv-toast--error { background: var(--nv-toast-error); }
.nv-toast--warning { background: var(--nv-warning-ink); color: var(--nv-on-warning); }
.nv-toast__icon { flex: none; margin-top: 1px; display: flex; }
.nv-toast__text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.nv-toast__close { flex: none; width: 28px; height: 28px; margin: -4px -6px -4px 0; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: inherit; opacity: .75; }
.nv-toast__close:hover { opacity: 1; background: rgba(255, 255, 255, .14); }
.nv-toast.is-leaving { animation: nv-fade .16s ease reverse both; }
@media (max-width: 899px) {
  .nv-toasts { left: 12px; right: 12px; bottom: var(--nv-toast-bottom, calc(96px + env(safe-area-inset-bottom))); align-items: stretch; }
  .nv-toast { max-width: none; }
}

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

/* ui/css/components-lines.css */
/* Lines: the rows of a "settings" card. A title, a quiet sentence under it, and something on the right (a switch, a button, a badge, channel pills). Put them
   in a card with padding "none" (so its heading gets the 20px 22px 12px spacing) inside .nv-lines. Every line has a hairline above it, the first included: that
   is the rule between the heading and the list. */
.nv-lines { display: flex; flex-direction: column; min-width: 0; }
.nv-line { display: flex; flex-wrap: wrap; align-items: center; gap: 13px; min-width: 0; padding: 14px 20px; border-top: 1px solid var(--nv-border-soft); }
.nv-line__lead {
  flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--nv-surface-alt); color: var(--nv-primary);
}
.nv-line__lead--quiet { color: var(--nv-text-2); }
.nv-line__lead--danger { color: var(--nv-danger); }
.nv-line__body { flex: 1 1 180px; min-width: 0; }
.nv-line__title { display: block; font-size: 14px; font-weight: 600; color: var(--nv-text); overflow-wrap: anywhere; }
.nv-line__sub { display: block; font-size: 13px; line-height: 1.45; color: var(--nv-text-3); overflow-wrap: anywhere; }
.nv-line__end { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; flex: 0 0 auto; max-width: 100%; }
.nv-line.is-unread { background: var(--nv-primary-light); }
/* A small status dot where a line has no icon (sign-in history: green, amber, red) */
.nv-line__dot { flex: none; width: 8px; height: 8px; border-radius: 4px; background: var(--nv-text-3); }
.nv-line__dot--ok { background: var(--nv-success); }
.nv-line__dot--wait { background: var(--nv-warning); }
.nv-line__dot--bad { background: var(--nv-danger); }

/* formDialog(): the body and the sentence it shows when an action fails */
.nv-fdlg { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.nv-fdlg__note { margin: 0; }

/* ui/css/shell.css */
/* The app shell: what the engine in ui/js/shell draws around the screens (sidebar details, header buttons and popovers, search results, the tab bar's
   companions, the chat slot, session dialogs) and the signed-out pane. The frame itself (.nv-shell, .nv-sidebar, .nv-header, .nv-tabbar) is in layout.css.
   Colours are tokens only (R7); the desktop / phone switch is the same 900px as everywhere. */

:root { --nv-zoom: 1; }

/* ---- large text (Settings > Accessibility): the whole page is shown a little bigger, and the full-height pieces are shortened to match */
html[data-large-text="true"] { --nv-zoom: 1.12; }
html[data-large-text="true"] body { zoom: var(--nv-zoom); }
html[data-large-text="true"] .nv-sidebar { height: calc(100vh / var(--nv-zoom)); }
html[data-large-text="true"] .nv-shell, html[data-large-text="true"] .nv-panes { min-height: calc(100vh / var(--nv-zoom)); }

/* ---- the page */
.nv-shell__body { min-width: 0; }
.nv-main:focus, .nv-outlet:focus { outline: none; }
.nv-route { min-width: 0; animation: nv-rise var(--nv-dur-enter) var(--nv-ease) both; }
.nv-route > .nv-screen { animation: none; }
.nv-shell__banners .nv-offline { margin: 0 var(--nv-gutter) 10px; }

/* ---- the phone "More" sheet: as tall as its tiles, never more than 70% of the screen (the design) */
.nv-sheet--more .nv-sheet__body { max-height: 70vh; }

/* ---- sidebar */
.nv-sidebar__home { display: flex; border-radius: var(--nv-r-md); color: inherit; }
.nv-sidebar__home:hover { color: inherit; }
.nv-nav__item .nv-icon { flex: none; }
.nv-nav__badge {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  background: var(--nv-primary); color: var(--nv-on-primary); font-size: 12px; font-weight: 600; line-height: 1;
}
.nv-sidebar__me {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; text-decoration: none;
  border-radius: var(--nv-r-md);
}
.nv-sidebar__me:hover { color: inherit; }
.nv-sidebar__who { min-width: 0; display: flex; flex-direction: column; }
.nv-sidebar__name { font-size: 14px; font-weight: 600; color: var(--nv-on-hero); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nv-sidebar__role { font-size: 12px; color: var(--nv-sidebar-muted); }
.nv-sidebar__tool {
  width: 34px; height: 34px; flex: none; display: grid; place-items: center; border: 0; border-radius: var(--nv-r-sm); background: transparent;
  color: rgba(255, 255, 255, .75); text-decoration: none; transition: background .15s ease;
}
.nv-sidebar__tool:hover { background: rgba(255, 255, 255, .14); color: var(--nv-on-hero); }
.nv-sidebar .nv-avatar { --nv-av-c: var(--nv-on-hero); background: rgba(255, 255, 255, .18); color: var(--nv-on-hero); }
.nv-sidebar__legal { padding-top: 0; }

/* ---- header */
.nv-header__search .nv-search__input { box-shadow: none; }
.nv-header__actions { display: flex; align-items: center; gap: 8px; }
.nv-header__actions:empty { display: none; }
/* the picture is 40px as designed; the link around it is 44px (R13) and gives the 2px back with a negative margin, so nothing moves */
.nv-header--mobile .nv-header__avatar { box-sizing: border-box; width: 44px; height: 44px; margin: -2px; flex: none; padding: 2px; border: 0; border-radius: 50%; background: transparent; display: block; }
.nv-header--mobile .nv-header__avatar:focus-visible { outline-offset: 1px; }
.nv-header--mobile .nv-logo__word { font-size: 14px; }
.nv-header--mobile .nv-iconbtn--sm { width: 38px; height: 38px; }
.nv-header--mobile .nv-header__brand { margin-left: 0; }

.nv-profile-pill {
  display: flex; align-items: center; gap: 9px; height: 42px; padding: 0 12px 0 4px; border: 0; border-radius: var(--nv-r-pill); background: var(--nv-surface);
  color: var(--nv-text); cursor: pointer;
}
.nv-profile-pill__name { font-size: 14px; font-weight: 600; }
.nv-profile-pill .nv-icon { color: var(--nv-text-3); }
.nv-profile-pill { position: relative; }
.nv-profile-pill::before { content: ""; position: absolute; inset: -1px 0; border-radius: inherit; }   /* 42px as designed, 44px to touch */
.nv-menu__name { font-size: 14px; font-weight: 600; color: var(--nv-text); }
.nv-menu__sub { font-size: 13px; color: var(--nv-text-3); overflow-wrap: anywhere; white-space: normal; }

/* ---- notifications popover */
.nv-notif { display: flex; flex-direction: column; }
.nv-notif__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 15px 6px; }
.nv-notif__heading { font-size: 14px; font-weight: 600; letter-spacing: 0; }
.nv-notif__mark { font-size: 13px; }
.nv-notif__mark:disabled { color: var(--nv-text-3); cursor: default; }
.nv-notif__filters { gap: 6px; padding: 6px 15px 10px; border-bottom: 1px solid var(--nv-border-soft); }
.nv-notif__list { max-height: 326px; overflow-y: auto; overscroll-behavior: contain; }
.nv-notif__row {
  display: flex; align-items: flex-start; gap: 11px; width: 100%; padding: 12px 15px; border: 0; background: transparent; color: inherit; text-align: left;
  border-bottom: 1px solid var(--nv-border-soft);
}
.nv-notif__row:last-child { border-bottom: 0; }
.nv-notif__row:hover { background: var(--nv-surface-alt); }
.nv-notif__dot { flex: none; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: transparent; }
.nv-notif__row.is-unread .nv-notif__dot { background: var(--nv-primary); }
.nv-notif__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.nv-notif__title { font-size: 14px; font-weight: 600; color: var(--nv-text); }
.nv-notif__body { font-size: 13px; line-height: 1.45; color: var(--nv-text-3); }
.nv-notif__time { margin-top: 3px; font-size: 12.5px; color: var(--nv-text-3); }
.nv-notif__empty { padding: 28px 18px; text-align: center; font-size: 14px; color: var(--nv-text-3); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.nv-notif__error { margin: 8px 15px; font-size: 13px; color: var(--nv-danger); }
.nv-notif__all { width: 100%; padding: 12px; border: 0; border-top: 1px solid var(--nv-border-soft); background: transparent; color: var(--nv-primary); font-size: 14px; font-weight: 600; }
.nv-notif__all:hover { background: var(--nv-surface-alt); }

/* ---- search results (under the header pill) */
.nv-sr { padding: 6px; display: flex; flex-direction: column; gap: 1px; }
.nv-sr__group { padding: 8px 10px 4px; font-size: 12px; font-weight: 500; color: var(--nv-text-3); }
.nv-sr__row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 8px 10px; border: 0; border-radius: var(--nv-r-md); background: transparent; color: inherit; text-align: left; }
.nv-sr__row:hover, .nv-sr__row.is-active { background: var(--nv-surface-alt); }
.nv-sr__icon { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--nv-r-md); background: var(--nv-surface-alt); color: var(--nv-text-2); }
.nv-sr__row:hover .nv-sr__icon, .nv-sr__row.is-active .nv-sr__icon { background: var(--nv-surface); color: var(--nv-primary); }
.nv-sr__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.nv-sr__title { font-size: 14px; font-weight: 600; color: var(--nv-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nv-sr__sub { font-size: 12.5px; color: var(--nv-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nv-sr__amount { flex: none; font-size: 14px; font-weight: 600; color: var(--nv-text); }
.nv-sr__amount.is-in { color: var(--nv-success); }
.nv-sr__note { padding: 14px 12px; font-size: 14px; color: var(--nv-text-3); }

/* ---- chat slot (the support module draws the panel into .nv-chat) */
.nv-chat { position: fixed; right: 22px; bottom: 22px; z-index: 45; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.nv-chat__pill {
  display: flex; align-items: center; gap: 8px; height: 52px; padding: 0 18px 0 14px; border: 0; border-radius: var(--nv-r-pill); background: var(--nv-grad-chat);
  color: var(--nv-on-hero); font-size: 14px; font-weight: 600; box-shadow: 0 12px 30px rgba(var(--nv-primary-rgb), .35);
}
.nv-chat__pill[hidden] { display: none; }
/* the toasts live outside the shell (on <body>), so the room for the chat pill is set where they can inherit it */
html:has(.nv-shell--chat) { --nv-toast-bottom: 88px; }
@media (max-width: 899px) {
  .nv-chat { right: 12px; bottom: calc(84px + env(safe-area-inset-bottom)); }
  html:has(.nv-shell--chat) { --nv-toast-bottom: calc(148px + env(safe-area-inset-bottom)); }
  /* the pill floats 84px above the bottom and is 52px tall, so every screen ends above it (136px and 16px of air): the last button of any screen is never under it */
  .nv-shell--chat .nv-main { padding-bottom: calc(var(--nv-chat-space) + env(safe-area-inset-bottom)); }
}

/* ---- dialogs that belong to a session */
.nv-idle__text { font-size: 14.5px; line-height: 1.55; color: var(--nv-text-2); }
.nv-idle__left { font-variant-numeric: tabular-nums; color: var(--nv-text); }
.nv-stepup { display: flex; flex-direction: column; gap: 14px; }
.nv-stepup__prompt { font-size: 14.5px; line-height: 1.5; color: var(--nv-text-2); }
.nv-stepup__area { display: flex; justify-content: center; }
.nv-stepup__area > .nv-btn { width: 100%; }
.nv-stepup__error { min-height: 0; font-size: 14px; color: var(--nv-danger); }
.nv-stepup__error:empty { display: none; }
.nv-stepup__methods { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; font-size: 14px; }

/* ---- the signed-out page: picture pane + sign-in card */
.nv-signin__stack { position: relative; display: flex; flex-direction: column; gap: 26px; }
.nv-signin__title { max-width: 15ch; font-size: clamp(30px, 4.4vw, 46px); font-weight: 700; line-height: 1.08; letter-spacing: -.02em; color: var(--nv-on-hero); text-wrap: pretty; }
.nv-signin__lead { max-width: 46ch; font-size: 16.5px; line-height: 1.6; color: rgba(255, 255, 255, .78); }
.nv-signin__points { list-style: none; font-size: 16px; display: flex; flex-direction: column; gap: 12px; max-width: 44ch; }
.nv-signin__point { display: flex; align-items: flex-start; gap: 11px; font-size: 14.5px; line-height: 1.45; color: rgba(255, 255, 255, .9); }
.nv-signin__point .nv-icon { flex: none; margin-top: 2px; color: var(--nv-cyan); }
.nv-signin__note { max-width: 52ch; margin-top: 8px; font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, .58); }
.nv-signin__column { width: 100%; max-width: 412px; display: flex; flex-direction: column; gap: 14px; }
.nv-signin__column .nv-panes__card { max-width: none; }
.nv-signedout { min-height: 100vh; }

/* ui/css/utilities.css */
/* Utilities: small single-purpose classes. Use them for spacing and text; build anything bigger as a component. */

/* gap (works with .nv-stack, .nv-cluster, .nv-grid, .nv-cols, .nv-between) */
.nv-gap-0 { --nv-gap: 0; } .nv-gap-2 { --nv-gap: 2px; } .nv-gap-4 { --nv-gap: 4px; } .nv-gap-6 { --nv-gap: 6px; } .nv-gap-8 { --nv-gap: 8px; }
.nv-gap-10 { --nv-gap: 10px; } .nv-gap-12 { --nv-gap: 12px; } .nv-gap-14 { --nv-gap: 14px; } .nv-gap-16 { --nv-gap: 16px; } .nv-gap-18 { --nv-gap: 18px; }
.nv-gap-20 { --nv-gap: 20px; } .nv-gap-24 { --nv-gap: 24px; } .nv-gap-32 { --nv-gap: 32px; } .nv-gap-40 { --nv-gap: 40px; }

/* layout bits */
.nv-flex { display: flex; } .nv-inline-flex { display: inline-flex; } .nv-block { display: block; } .nv-none { display: none; }
.nv-wrap { flex-wrap: wrap; } .nv-nowrap { flex-wrap: nowrap; }
.nv-col { flex-direction: column; }
.nv-items-center { align-items: center; } .nv-items-start { align-items: flex-start; } .nv-items-end { align-items: flex-end; } .nv-items-stretch { align-items: stretch; }
.nv-justify-between { justify-content: space-between; } .nv-justify-center { justify-content: center; } .nv-justify-end { justify-content: flex-end; }
.nv-grow { flex: 1 1 0; min-width: 0; } .nv-shrink-0 { flex: none; } .nv-w-full { width: 100%; } .nv-min-0 { min-width: 0; }
.nv-mx-auto { margin-inline: auto; } .nv-ml-auto { margin-left: auto; } .nv-mr-auto { margin-right: auto; }
.nv-relative { position: relative; } .nv-overflow-hidden { overflow: hidden; }

/* spacing */
.nv-m-0 { margin: 0; } .nv-mt-4 { margin-top: 4px; } .nv-mt-8 { margin-top: 8px; } .nv-mt-12 { margin-top: 12px; } .nv-mt-16 { margin-top: 16px; } .nv-mt-24 { margin-top: 24px; }
.nv-mb-4 { margin-bottom: 4px; } .nv-mb-8 { margin-bottom: 8px; } .nv-mb-12 { margin-bottom: 12px; } .nv-mb-16 { margin-bottom: 16px; } .nv-mb-24 { margin-bottom: 24px; }
.nv-p-0 { padding: 0; } .nv-p-12 { padding: 12px; } .nv-p-16 { padding: 16px; } .nv-p-22 { padding: 22px; }

/* text */
.nv-text { color: var(--nv-text); } .nv-text-2 { color: var(--nv-text-2); } .nv-text-3 { color: var(--nv-text-3); }
.nv-primary { color: var(--nv-primary); } .nv-success { color: var(--nv-success); } .nv-danger { color: var(--nv-danger); } .nv-warning { color: var(--nv-warning-ink); }
.nv-fs-12 { font-size: 12px; } .nv-fs-13 { font-size: 13px; } .nv-fs-14 { font-size: 14px; } .nv-fs-15 { font-size: 15px; } .nv-fs-16 { font-size: 16px; } .nv-fs-18 { font-size: 18px; } .nv-fs-20 { font-size: 20px; } .nv-fs-24 { font-size: 24px; }
.nv-fw-500 { font-weight: 500; } .nv-fw-600 { font-weight: 600; } .nv-fw-700 { font-weight: 700; }
.nv-left { text-align: left; } .nv-center { text-align: center; } .nv-right { text-align: right; }
.nv-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.nv-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nv-nowrap-text { white-space: nowrap; }
.nv-upper { text-transform: uppercase; letter-spacing: .08em; }
.nv-balance { text-wrap: balance; } .nv-pretty { text-wrap: pretty; }

/* surfaces */
.nv-bg-canvas { background: var(--nv-canvas); } .nv-bg-surface { background: var(--nv-surface); } .nv-bg-alt { background: var(--nv-surface-alt); }
.nv-round { border-radius: var(--nv-r-card); } .nv-round-row { border-radius: var(--nv-r-row); } .nv-pill { border-radius: var(--nv-r-pill); } .nv-circle { border-radius: 50%; }

/* show / hide by width (same 900px switch as the shell) */
@media (max-width: 899px) { .nv-hide-mobile { display: none !important; } }
@media (min-width: 900px) { .nv-hide-desktop { display: none !important; } }
@media (max-width: 599px) { .nv-hide-xs { display: none !important; } }
/* the Account column and other wide-screen extras */
@media (max-width: 1279px) { .nv-hide-lt-xl { display: none !important; } }

/* columns that change count by width */
@media (max-width: 899px) { .nv-cols-2-mobile { --cols: 2; } }
.nv-cols-2 { --cols: 2; } .nv-cols-3 { --cols: 3; } .nv-cols-4 { --cols: 4; }
@media (max-width: 599px) { .nv-cols-3, .nv-cols-4 { --cols: 2; } }

/* the page must never scroll sideways */
.nv-no-x { overflow-x: clip; }

/* ui/css/print.css */
/* Print: hide the chrome, plain white page, keep rows and cards whole. Mark anything that must not print with data-noprint. */

@media print {
  [data-noprint], .nv-noprint, .nv-sidebar, .nv-header, .nv-tabbar, .nv-toasts, .nv-scrim, .nv-pop, .nv-hint, .nv-skip { display: none !important; }
  /* more specific than the bank's colour tag (a later <style> with :root and [data-theme="dark"]), so the dark theme's light text cannot reach the paper */
  html:root, html[data-theme], html[data-theme="dark"] {
    --nv-canvas: #fff; --nv-surface: #fff; --nv-surface-alt: #f3f3f3; --nv-text: #000; --nv-text-2: #222; --nv-text-3: #444; --nv-border: #bbb; --nv-border-soft: #ddd;
  }
  html, body { background: #fff !important; color: #000 !important; }
  body { font-size: 12pt; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .nv-shell { display: block; background: #fff; }
  .nv-main, .nv-page { max-width: none; padding: 0; }
  .nv-card { border-radius: 0; break-inside: avoid; page-break-inside: avoid; box-shadow: none; }
  .nv-card--hero, .nv-card--photo { background: #fff !important; color: #000 !important; border: 1px solid #999; }
  .nv-row, .nv-table tr, .nv-stat { break-inside: avoid; page-break-inside: avoid; }
  .nv-table thead { display: table-header-group; }
  .nv-screen { animation: none !important; }
  a[href]::after { content: none; }
  @page { margin: 16mm; }
}