/*
 * Nvwa Web primitives and components.
 *
 * Source of truth:
 *   ios/Nvwa/Sources/Nvwa/Tokens
 *   ios/Nvwa/Sources/Nvwa/Components
 *   Nvwa Figma file B7QSpRFNAt2tZ6S2JiG3Ij
 *
 * This file is intentionally standalone. Load it after the legacy stylesheet
 * while the Web UI is migrated so the compatibility aliases below resolve to
 * the current Nvwa values.
 */

:root {
  color-scheme: light;

  /* The 28 current Nvwa colour variables. */
  --nvwa-core-bright-blue: #6999ff;
  --nvwa-primary-green: #0051fe;
  --nvwa-text-primary: #000000;
  --nvwa-text-secondary: #868685;
  --nvwa-text-blue: #0051fe;
  --nvwa-color-on-blue: #ffffff;
  --nvwa-text-black: #000000;
  --nvwa-bg-main: #ffffff;
  --nvwa-bg-container: #ffffff;
  --nvwa-bg-dialogue: #ffffff;
  --nvwa-bg-vessel: #efefef;
  --nvwa-bg-card: #f6f6f6;
  --nvwa-bg-input: #efefef;
  --nvwa-button-gray: #dededd;
  --nvwa-line: #dededd;
  --nvwa-secondary-pink: #ffd7ef;
  --nvwa-secondary-bright-orange: #ffc091;
  --nvwa-secondary-bright-yellow: #ffeb69;
  --nvwa-secondary-bright-blue: #a0e1e1;
  --nvwa-sentiment-warning: #edc843;
  --nvwa-sentiment-positive: #2f5711;
  --nvwa-sentiment-negative: #a8200d;
  --nvwa-market-buy: #1d7353;
  --nvwa-market-sell: #ce2632;
  --nvwa-alpha-blue-10: #0051fe1a;
  --nvwa-alpha-green-20: #4ab18b33;
  --nvwa-alpha-red-20: #ce263233;
  --nvwa-alpha-yellow-20: #edc84333;

  /* Geometry and elevation. */
  --nvwa-radius-block: 20px;
  --nvwa-radius-card: 16px;
  --nvwa-radius-control: 10px;
  --nvwa-radius-control-legacy: 12px;
  --nvwa-radius-capsule: 999px;
  --nvwa-input-height: 48px;
  --nvwa-content-width: 760px;
  --nvwa-control-huge: 48px;
  --nvwa-control-large: 40px;
  --nvwa-control-small: 32px;
  --nvwa-control-tiny: 28px;
  --nvwa-shadow-small: 0 0 40px rgb(69 71 69 / 20%);
  --nvwa-shadow-dropdown:
    0 2px 6px rgb(24 26 32 / 10%),
    0 8px 14px rgb(71 77 87 / 8%);
  --nvwa-shadow-reorder-row: 0 4px 24px rgb(0 0 0 / 16%);
  --nvwa-shadow-reorder-chip: 0 3px 12px rgb(69 71 69 / 20%);

  /* Inter is already loaded by PawFolio; Chinese falls back to PingFang. */
  --nvwa-font-family: Inter, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;

  /* The 15 exact Nvwa typography tokens: font shorthand + tracking. */
  --nvwa-type-t-semi-bold: 600 30px/34px var(--nvwa-font-family);
  --nvwa-track-t-semi-bold: -0.025em;
  --nvwa-type-t-s-semi-bold: 600 26px/32px var(--nvwa-font-family);
  --nvwa-track-t-s-semi-bold: -0.015em;
  --nvwa-type-t-sub-semi-bold: 600 22px/28px var(--nvwa-font-family);
  --nvwa-track-t-sub-semi-bold: -0.015em;
  --nvwa-type-t-b-semi-bold: 600 18px/24px var(--nvwa-font-family);
  --nvwa-track-t-b-semi-bold: -0.01em;
  --nvwa-type-t-g-medium: 500 14px/20px var(--nvwa-font-family);
  --nvwa-track-t-g-medium: 0.015em;
  --nvwa-type-b-l-regular: 400 16px/24px var(--nvwa-font-family);
  --nvwa-track-b-l-regular: -0.005em;
  --nvwa-type-b-l-semi-bold: 600 16px/24px var(--nvwa-font-family);
  --nvwa-track-b-l-semi-bold: 0.005em;
  --nvwa-type-b-m-regular: 400 14px/22px var(--nvwa-font-family);
  --nvwa-track-b-m-regular: 0.01em;
  --nvwa-type-b-m-semi-bold: 600 14px/22px var(--nvwa-font-family);
  --nvwa-track-b-m-semi-bold: 0.0125em;
  --nvwa-type-b-s-regular: 400 12px/20px var(--nvwa-font-family);
  --nvwa-track-b-s-regular: 0.01em;
  --nvwa-type-b-s-semi-bold: 600 12px/20px var(--nvwa-font-family);
  --nvwa-track-b-s-semi-bold: 0.01em;
  --nvwa-type-link-l-semi-bold: 600 16px/24px var(--nvwa-font-family);
  --nvwa-track-link-l-semi-bold: 0.01em;
  --nvwa-type-link-m-semi-bold: 600 14px/22px var(--nvwa-font-family);
  --nvwa-track-link-m-semi-bold: 0.0125em;
  --nvwa-type-c-1-regular: 400 11px/18px var(--nvwa-font-family);
  --nvwa-track-c-1-regular: 0.01em;
  --nvwa-type-c-2-regular: 400 10px/16px var(--nvwa-font-family);
  --nvwa-track-c-2-regular: 0.01em;

  /* Semantic aliases used by PawFolio while the old Web CSS is retired. */
  --nvwa-gray-primary: var(--nvwa-text-primary);
  --nvwa-gray-secondary: var(--nvwa-text-secondary);
  --nvwa-accent: var(--nvwa-primary-green);
  --nvwa-on-accent: var(--nvwa-color-on-blue);
  --nvwa-bg: var(--nvwa-bg-main);
  --nvwa-bg-neutral: var(--nvwa-bg-vessel);
  --nvwa-bg-light: var(--nvwa-bg-input);
  --nvwa-pink: var(--nvwa-secondary-pink);
  --nvwa-bright-orange: var(--nvwa-secondary-bright-orange);
  --nvwa-bright-yellow: var(--nvwa-secondary-bright-yellow);
  --nvwa-bright-blue: var(--nvwa-secondary-bright-blue);
  --bg-1: var(--nvwa-bg-main);
  --bg-2: var(--nvwa-bg-input);
  --surface-1: var(--nvwa-bg-vessel);
  --ink: var(--nvwa-text-primary);
  --ink-80: color-mix(in srgb, var(--nvwa-text-primary) 80%, transparent);
  --ink-40: var(--nvwa-text-secondary);
  --ink-20: var(--nvwa-bg-vessel);
  --ink-10: var(--nvwa-line);
  --ink-4: var(--nvwa-bg-input);
  --on-ink: var(--nvwa-bg-main);
  --tint-blue: var(--nvwa-bg-input);
  --tint-green: var(--nvwa-bg-input);
  --tint-orange: var(--nvwa-bg-input);
  --on-tint-blue: var(--nvwa-secondary-bright-blue);
  --on-tint-green: var(--nvwa-primary-green);
  --on-tint-orange: var(--nvwa-secondary-bright-orange);
  --on-tint: var(--nvwa-text-primary);
  --accent: var(--nvwa-primary-green);
  --gain: var(--nvwa-market-buy);
  --loss: var(--nvwa-market-sell);
  --flat: var(--nvwa-text-secondary);
  --destructive: var(--nvwa-sentiment-negative);
  --error: var(--nvwa-sentiment-negative);
  --session-open: var(--nvwa-sentiment-positive);
  --session-pre: var(--nvwa-sentiment-warning);
  --session-after: var(--nvwa-sentiment-warning);
  --session-night: var(--nvwa-sentiment-negative);
  --session-closed: var(--nvwa-sentiment-negative);
  --series-blue: var(--nvwa-secondary-bright-blue);
  --series-cyan: var(--nvwa-secondary-pink);
  --series-mint: var(--nvwa-secondary-bright-orange);
  --series-purple: var(--nvwa-secondary-bright-yellow);
  --thumb-ring: var(--nvwa-bg-main);
  --segment-active: var(--nvwa-bg-container);
  --radius-block: var(--nvwa-radius-block);
  --radius-card: var(--nvwa-radius-card);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --nvwa-core-bright-blue: #4782ff;
  --nvwa-primary-green: #2d66f0;
  --nvwa-text-primary: #ffffff;
  --nvwa-text-blue: #4782ff;
  --nvwa-bg-main: #000000;
  --nvwa-bg-container: #373737;
  --nvwa-bg-dialogue: #262626;
  --nvwa-bg-vessel: #212121;
  --nvwa-bg-card: #212121;
  --nvwa-bg-input: #1d1d1d;
  --nvwa-button-gray: #3c3c3c;
  --nvwa-line: #2b2b2b;
  --nvwa-sentiment-negative: #dc432d;
  --nvwa-market-buy: #2cc094;
  --nvwa-market-sell: #f0616d;
  --nvwa-alpha-blue-10: #4782ff33;
  --nvwa-alpha-green-20: #2cc09433;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    color-scheme: dark;
    --nvwa-core-bright-blue: #4782ff;
    --nvwa-primary-green: #2d66f0;
    --nvwa-text-primary: #ffffff;
    --nvwa-text-blue: #4782ff;
    --nvwa-bg-main: #000000;
    --nvwa-bg-container: #373737;
    --nvwa-bg-dialogue: #262626;
    --nvwa-bg-vessel: #212121;
    --nvwa-bg-card: #212121;
    --nvwa-bg-input: #1d1d1d;
    --nvwa-button-gray: #3c3c3c;
    --nvwa-line: #2b2b2b;
    --nvwa-sentiment-negative: #dc432d;
    --nvwa-market-buy: #2cc094;
    --nvwa-market-sell: #f0616d;
    --nvwa-alpha-blue-10: #4782ff33;
    --nvwa-alpha-green-20: #2cc09433;
  }
}

/* Typography utilities. */
.nvwa-type-t,
.nvwa-type-title-screen { font: var(--nvwa-type-t-semi-bold); letter-spacing: var(--nvwa-track-t-semi-bold); }
.nvwa-type-t-s,
.nvwa-type-title-section { font: var(--nvwa-type-t-s-semi-bold); letter-spacing: var(--nvwa-track-t-s-semi-bold); }
.nvwa-type-t-sub,
.nvwa-type-title-subsection { font: var(--nvwa-type-t-sub-semi-bold); letter-spacing: var(--nvwa-track-t-sub-semi-bold); }
.nvwa-type-t-b,
.nvwa-type-title-body { font: var(--nvwa-type-t-b-semi-bold); letter-spacing: var(--nvwa-track-t-b-semi-bold); }
.nvwa-type-t-g,
.nvwa-type-title-group { font: var(--nvwa-type-t-g-medium); letter-spacing: var(--nvwa-track-t-g-medium); }
.nvwa-type-b-l { font: var(--nvwa-type-b-l-regular); letter-spacing: var(--nvwa-track-b-l-regular); }
.nvwa-type-b-l-semibold { font: var(--nvwa-type-b-l-semi-bold); letter-spacing: var(--nvwa-track-b-l-semi-bold); }
.nvwa-type-b-m { font: var(--nvwa-type-b-m-regular); letter-spacing: var(--nvwa-track-b-m-regular); }
.nvwa-type-b-m-semibold { font: var(--nvwa-type-b-m-semi-bold); letter-spacing: var(--nvwa-track-b-m-semi-bold); }
.nvwa-type-b-s { font: var(--nvwa-type-b-s-regular); letter-spacing: var(--nvwa-track-b-s-regular); }
.nvwa-type-b-s-semibold { font: var(--nvwa-type-b-s-semi-bold); letter-spacing: var(--nvwa-track-b-s-semi-bold); }
.nvwa-type-link-l { font: var(--nvwa-type-link-l-semi-bold); letter-spacing: var(--nvwa-track-link-l-semi-bold); }
.nvwa-type-link-m { font: var(--nvwa-type-link-m-semi-bold); letter-spacing: var(--nvwa-track-link-m-semi-bold); }
.nvwa-type-c-1 { font: var(--nvwa-type-c-1-regular); letter-spacing: var(--nvwa-track-c-1-regular); }
.nvwa-type-c-2 { font: var(--nvwa-type-c-2-regular); letter-spacing: var(--nvwa-track-c-2-regular); }
.nvwa-type-link-l,
.nvwa-type-link-m {
  text-decoration-line: underline;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: from-font;
  text-underline-position: from-font;
}
.nvwa-tabular,
.nvwa-money { font-variant-numeric: tabular-nums; }

/* Shared interaction contract. */
:where(
  .nvwa-button,
  .nvwa-navigation__action,
  .nvwa-modal-header__action,
  .nvwa-input__clear,
  .nvwa-segment__item,
  .nvwa-section,
  .nvwa-checkbox,
  .nvwa-dropdown-button,
  .nvwa-dropdown-menu__item,
  .nvwa-time-point-picker__button,
  .nvwa-calendar button,
  .nvwa-scroll-confirm
) {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

:where(
  .nvwa-button,
  .nvwa-navigation__action,
  .nvwa-modal-header__action,
  .nvwa-input__clear,
  .nvwa-segment__item,
  .nvwa-section,
  .nvwa-checkbox,
  .nvwa-dropdown-button,
  .nvwa-dropdown-menu__item,
  .nvwa-time-point-picker__button,
  .nvwa-calendar button,
  .nvwa-scroll-confirm,
  .nvwa-input-shell input
):focus-visible {
  outline: 2px solid var(--nvwa-text-primary);
  outline-offset: 2px;
}

:where(.nvwa-button, .nvwa-scroll-confirm, .nvwa-input-shell, .nvwa-select)[disabled],
:where(.nvwa-button, .nvwa-scroll-confirm, .nvwa-input-shell, .nvwa-select)[aria-disabled="true"],
:where(.nvwa-button, .nvwa-scroll-confirm, .nvwa-input-shell, .nvwa-select).is-disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.nvwa-icon {
  display: block;
  inline-size: 1em;
  block-size: 1em;
  flex: none;
  color: inherit;
  fill: currentColor;
  object-fit: contain;
  pointer-events: none;
}

/* Buttons: Primary / Secondary / Outline / Warning / Outline Warning / Buy / Sell. */
.nvwa-button {
  --nvwa-button-height: var(--nvwa-control-large);
  --nvwa-button-padding: 24px;
  --nvwa-button-gap: 8px;
  appearance: none;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--nvwa-button-gap);
  min-inline-size: 0;
  block-size: var(--nvwa-button-height);
  padding-inline: var(--nvwa-button-padding);
  border: 0;
  border-radius: var(--nvwa-radius-capsule);
  background: var(--nvwa-primary-green);
  color: var(--nvwa-color-on-blue);
  font: var(--nvwa-type-b-m-semi-bold);
  letter-spacing: var(--nvwa-track-b-m-semi-bold);
  white-space: nowrap;
  cursor: pointer;
}

.nvwa-button--huge {
  --nvwa-button-height: var(--nvwa-control-huge);
  --nvwa-button-padding: 24px;
  font: var(--nvwa-type-b-l-semi-bold);
  letter-spacing: var(--nvwa-track-b-l-semi-bold);
}
.nvwa-button--large { --nvwa-button-height: var(--nvwa-control-large); --nvwa-button-padding: 24px; }
.nvwa-button--small { --nvwa-button-height: var(--nvwa-control-small); --nvwa-button-padding: 12px; }
.nvwa-button--tiny {
  --nvwa-button-height: var(--nvwa-control-tiny);
  --nvwa-button-padding: 12px;
  font: var(--nvwa-type-b-s-regular);
  letter-spacing: var(--nvwa-track-b-s-regular);
}
.nvwa-button--expanded { inline-size: 100%; }
.nvwa-button--secondary { background: var(--nvwa-button-gray); color: var(--nvwa-text-primary); }
.nvwa-button--outline {
  border: 1px solid var(--nvwa-line);
  background: var(--nvwa-bg-main);
  color: var(--nvwa-text-primary);
}
.nvwa-button--outline.nvwa-button--huge { --nvwa-button-gap: 4px; }
.nvwa-button--warning { background: var(--nvwa-alpha-red-20); color: var(--nvwa-sentiment-negative); }
.nvwa-button--outline-warning {
  border: 1px solid var(--nvwa-sentiment-negative);
  background: var(--nvwa-bg-main);
  color: var(--nvwa-sentiment-negative);
}
.nvwa-button--outline-warning.nvwa-button--small {
  font: var(--nvwa-type-b-m-regular);
  letter-spacing: var(--nvwa-track-b-m-regular);
}
.nvwa-button--buy { background: var(--nvwa-market-buy); color: var(--nvwa-color-on-blue); }
.nvwa-button--sell { background: var(--nvwa-market-sell); color: var(--nvwa-color-on-blue); }
.nvwa-button__icon,
.nvwa-button__spinner { inline-size: 16px; block-size: 16px; flex: none; }
.nvwa-button__spinner { display: none; }
.nvwa-button[data-loading="true"] > :not(.nvwa-button__spinner),
.nvwa-button.is-loading > :not(.nvwa-button__spinner) { display: none; }
.nvwa-button[data-loading="true"] .nvwa-button__spinner,
.nvwa-button.is-loading .nvwa-button__spinner { display: block; }

/* Circular progress used for Nvwa loading states on the Web. */
.nvwa-spinner {
  box-sizing: border-box;
  display: inline-block;
  inline-size: 16px;
  block-size: 16px;
  border: 2px solid currentColor;
  border-inline-end-color: transparent;
  border-radius: 50%;
}

/* Toggle: 50 x 28, 20-point thumb, 4-point inset. */
.nvwa-toggle {
  appearance: none;
  position: relative;
  box-sizing: border-box;
  inline-size: 50px;
  block-size: 28px;
  margin: 0;
  border: 0;
  border-radius: var(--nvwa-radius-capsule);
  background: var(--nvwa-text-secondary);
  cursor: pointer;
}
.nvwa-toggle::after {
  content: "";
  position: absolute;
  inset-block-start: 4px;
  inset-inline-start: 4px;
  inline-size: 20px;
  block-size: 20px;
  border-radius: 50%;
  background: var(--nvwa-bg-container);
}
.nvwa-toggle:checked { background: var(--nvwa-text-primary); }
.nvwa-toggle:checked::after { transform: translateX(22px); }
.nvwa-toggle:disabled { cursor: not-allowed; opacity: 0.45; }

/* Avatar. Override --nvwa-avatar-size only for authored product instances. */
.nvwa-avatar {
  --nvwa-avatar-size: 42px;
  --nvwa-avatar-flag-size: 16px;
  position: relative;
  display: inline-grid;
  place-items: center;
  inline-size: var(--nvwa-avatar-size);
  block-size: var(--nvwa-avatar-size);
  flex: none;
  overflow: visible;
  border-radius: 50%;
  background: var(--nvwa-bg-vessel);
  color: var(--nvwa-text-primary);
  font: var(--nvwa-type-b-l-semi-bold);
  letter-spacing: var(--nvwa-track-b-l-semi-bold);
}
.nvwa-avatar--navigation {
  --nvwa-avatar-size: 40px;
  --nvwa-avatar-flag-size: 15px;
  font: var(--nvwa-type-t-g-medium);
  letter-spacing: var(--nvwa-track-t-g-medium);
}
.nvwa-avatar--profile {
  --nvwa-avatar-size: 120px;
  --nvwa-avatar-flag-size: 46px;
  font: var(--nvwa-type-t-semi-bold);
  letter-spacing: var(--nvwa-track-t-semi-bold);
}
.nvwa-avatar__image {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.nvwa-avatar__flag {
  position: absolute;
  inset-inline-end: 0;
  inset-block-end: 0;
  box-sizing: content-box;
  inline-size: var(--nvwa-avatar-flag-size);
  block-size: var(--nvwa-avatar-flag-size);
  padding: 2px;
  border-radius: 50%;
  background: var(--nvwa-bg-main);
  object-fit: cover;
}

/* Top navigation: 64-point bar, 40-point controls inside 44-point targets. */
.nvwa-navigation-shell {
  position: sticky;
  inset-block-start: 0;
  z-index: 20;
  padding-block-start: env(safe-area-inset-top, 0px);
  background: var(--nvwa-bg-main);
}
.nvwa-navigation {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  min-inline-size: 0;
  inline-size: 100%;
  block-size: 64px;
  padding-inline-start: max(14px, calc(env(safe-area-inset-left, 0px) + 14px));
  padding-inline-end: max(14px, calc(env(safe-area-inset-right, 0px) + 14px));
}
.nvwa-navigation__slot,
.nvwa-navigation__action {
  box-sizing: border-box;
  inline-size: 44px;
  block-size: 44px;
  flex: 0 0 44px;
}
.nvwa-navigation__action {
  appearance: none;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--nvwa-text-primary);
  cursor: pointer;
}
.nvwa-navigation__control {
  display: grid;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  border-radius: 50%;
  background: var(--nvwa-bg-vessel);
}
.nvwa-navigation__action--primary { color: var(--nvwa-color-on-blue); }
.nvwa-navigation__action--primary .nvwa-navigation__control { background: var(--nvwa-primary-green); }
.nvwa-navigation__icon { inline-size: 24px; block-size: 24px; }
.nvwa-navigation__trailing {
  display: flex;
  align-items: center;
  gap: 15px;
}
.nvwa-navigation__trailing:has(> :nth-child(2)) .nvwa-navigation__icon {
  inline-size: 20px;
  block-size: 20px;
}
.nvwa-navigation__artwork {
  inline-size: 20px;
  block-size: 20px;
  border-radius: 50%;
  object-fit: cover;
}
.nvwa-navigation__title {
  min-inline-size: 0;
  flex: 1 1 auto;
  overflow: hidden;
  color: var(--nvwa-text-primary);
  font: var(--nvwa-type-t-b-semi-bold);
  letter-spacing: var(--nvwa-track-t-b-semi-bold);
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Inputs: label/support + a 48-point shared shell. */
.nvwa-field {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  min-inline-size: 0;
}
.nvwa-field__label,
.nvwa-field__hint {
  min-block-size: 20px;
  color: var(--nvwa-text-secondary);
  font: var(--nvwa-type-b-s-regular);
  letter-spacing: var(--nvwa-track-b-s-regular);
}
.nvwa-field__required { color: var(--nvwa-sentiment-negative); }
.nvwa-input-shell,
.nvwa-select {
  appearance: none;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 4px;
  min-inline-size: 0;
  inline-size: 100%;
  block-size: 48px;
  padding-inline: 16px;
  border: 0;
  border-radius: 10px;
  background: var(--nvwa-bg-input);
  color: var(--nvwa-text-primary);
  text-align: start;
}
.nvwa-input-shell input {
  appearance: none;
  min-inline-size: 0;
  inline-size: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--nvwa-text-primary);
  caret-color: var(--nvwa-primary-green);
  font: var(--nvwa-type-t-g-medium);
  font-variant-numeric: inherit;
  letter-spacing: var(--nvwa-track-t-g-medium);
}
.nvwa-input-shell input::placeholder { color: var(--nvwa-text-secondary); opacity: 1; }
.nvwa-input-shell:focus-within,
.nvwa-select:focus-visible { outline: 2px solid var(--nvwa-text-primary); outline-offset: -2px; }
.nvwa-input__value { min-inline-size: 0; flex: 1 1 auto; }
.nvwa-input__trailing { display: flex; align-items: center; flex: none; gap: 10px; margin-inline-start: 32px; }
.nvwa-input__unit,
.nvwa-select__value {
  color: var(--nvwa-text-primary);
  font: var(--nvwa-type-t-g-medium);
  letter-spacing: var(--nvwa-track-t-g-medium);
  white-space: nowrap;
}
.nvwa-input__unit-button {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--nvwa-text-primary);
  font: var(--nvwa-type-b-m-regular);
  letter-spacing: var(--nvwa-track-b-m-regular);
}
.nvwa-input__icon,
.nvwa-select__icon { inline-size: 20px; block-size: 20px; flex: none; color: var(--nvwa-text-secondary); }
.nvwa-input__clear {
  appearance: none;
  position: relative;
  display: grid;
  place-items: center;
  inline-size: 20px;
  block-size: 20px;
  flex: none;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--nvwa-text-secondary);
  cursor: pointer;
}
.nvwa-input__clear::before {
  content: "";
  position: absolute;
  inset: -12px;
}
.nvwa-search-input { gap: 4px; }
.nvwa-search-input input { flex: 1 1 auto; }
.nvwa-date-input,
.nvwa-select { cursor: pointer; }
.nvwa-date-input__value,
.nvwa-select__copy { min-inline-size: 0; flex: 1 1 auto; }
.nvwa-select__copy { display: flex; flex-direction: column; align-items: flex-start; }
.nvwa-select__value { overflow: hidden; text-overflow: ellipsis; }
.nvwa-select__placeholder { color: var(--nvwa-text-secondary); }
.nvwa-select__secondary {
  overflow: hidden;
  color: var(--nvwa-text-secondary);
  font: var(--nvwa-type-c-2-regular);
  letter-spacing: var(--nvwa-track-c-2-regular);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Segmented control. */
.nvwa-segment {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 2px;
  inline-size: min(345px, 100%);
  block-size: 40px;
  padding: 2px;
  border-radius: var(--nvwa-radius-capsule);
  background: var(--nvwa-bg-vessel);
}
.nvwa-segment--expanded { inline-size: 100%; }
.nvwa-segment__native {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.nvwa-segment__item,
.nvwa-segment__label {
  appearance: none;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  min-inline-size: 0;
  block-size: 36px;
  flex: 1 1 0;
  padding: 0;
  border: 0;
  border-radius: var(--nvwa-radius-capsule);
  background: transparent;
  color: var(--nvwa-text-secondary);
  font: var(--nvwa-type-b-m-semi-bold);
  letter-spacing: var(--nvwa-track-b-m-semi-bold);
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
}
.nvwa-segment__item[aria-selected="true"],
.nvwa-segment__item[aria-pressed="true"],
.nvwa-segment__native:checked + .nvwa-segment__label,
.nvwa-segment__item.is-selected {
  background: var(--nvwa-bg-container);
  color: var(--nvwa-segment-selected, var(--nvwa-text-blue));
}
.nvwa-segment--small {
  inline-size: max-content;
  max-inline-size: 100%;
  block-size: 28px;
}
.nvwa-segment--small .nvwa-segment__item,
.nvwa-segment--small .nvwa-segment__label {
  block-size: 24px;
  flex: 0 0 auto;
  padding-inline: 8px;
  font: var(--nvwa-type-b-s-semi-bold);
  letter-spacing: var(--nvwa-track-b-s-semi-bold);
}

/* Section chips. Selection is intentionally immediate. */
.nvwa-section {
  appearance: none;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  block-size: 28px;
  padding: 3px 16px;
  border: 0;
  border-radius: 24px;
  background: transparent;
  color: var(--nvwa-text-secondary);
  font: var(--nvwa-type-b-s-semi-bold);
  letter-spacing: var(--nvwa-track-b-s-semi-bold);
  white-space: nowrap;
  cursor: pointer;
  transition: none;
}
.nvwa-section--expanded { min-inline-size: 0; flex: 1 1 0; padding-inline: 0; }
.nvwa-section[aria-selected="true"],
.nvwa-section[aria-pressed="true"],
.nvwa-section.is-selected { background: var(--nvwa-alpha-blue-10); color: var(--nvwa-primary-green); }
.nvwa-section--secondary[aria-selected="true"],
.nvwa-section--secondary[aria-pressed="true"],
.nvwa-section--secondary.is-selected { background: var(--nvwa-bg-vessel); color: var(--nvwa-text-primary); }
.nvwa-section--currency {
  gap: 5px;
  block-size: 36px;
  padding: 0 10px;
  border-radius: var(--nvwa-radius-capsule);
  color: var(--nvwa-text-primary);
}
.nvwa-section--currency[aria-selected="true"],
.nvwa-section--currency[aria-pressed="true"],
.nvwa-section--currency.is-selected { background: var(--nvwa-bg-vessel); color: var(--nvwa-text-primary); }
.nvwa-section--currency .nvwa-section__icon { inline-size: 20px; block-size: 20px; }
.nvwa-section--text {
  gap: 4px;
  block-size: auto;
  padding: 0;
  border-radius: 0;
  color: var(--nvwa-text-secondary);
  font: var(--nvwa-type-b-s-regular);
  letter-spacing: var(--nvwa-track-b-s-regular);
}
.nvwa-section--text[aria-selected="true"],
.nvwa-section--text[aria-pressed="true"],
.nvwa-section--text.is-selected { background: transparent; color: var(--nvwa-text-primary); }
.nvwa-section--text .nvwa-section__icon { inline-size: 16px; block-size: 16px; }

/* Slider. Set --nvwa-slider-progress from JS, e.g. 40%. */
.nvwa-slider {
  appearance: none;
  box-sizing: border-box;
  inline-size: 100%;
  block-size: 16px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.nvwa-slider::-webkit-slider-runnable-track {
  block-size: 4px;
  border-radius: 2px;
  background: linear-gradient(
    to right,
    var(--nvwa-primary-green) 0 var(--nvwa-slider-progress, 0%),
    var(--nvwa-bg-input) var(--nvwa-slider-progress, 0%) 100%
  );
}
.nvwa-slider::-webkit-slider-thumb {
  appearance: none;
  box-sizing: border-box;
  inline-size: 12px;
  block-size: 12px;
  margin-block-start: -4px;
  border: 2px solid var(--nvwa-primary-green);
  border-radius: 50%;
  background: var(--nvwa-bg-main);
}
.nvwa-slider::-moz-range-track { block-size: 4px; border: 0; border-radius: 2px; background: var(--nvwa-bg-input); }
.nvwa-slider::-moz-range-progress { block-size: 4px; border-radius: 2px; background: var(--nvwa-primary-green); }
.nvwa-slider::-moz-range-thumb {
  box-sizing: border-box;
  inline-size: 12px;
  block-size: 12px;
  border: 2px solid var(--nvwa-primary-green);
  border-radius: 50%;
  background: var(--nvwa-bg-main);
}
.nvwa-slider:disabled { cursor: not-allowed; opacity: 0.45; }

/* Hint and tag. */
.nvwa-hint {
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  gap: 4px;
  min-block-size: 32px;
  inline-size: 100%;
  padding: 6px 12px;
  border: 1px solid var(--nvwa-line);
  border-radius: 10px;
  background: var(--nvwa-bg-vessel);
  color: var(--nvwa-text-primary);
  font: var(--nvwa-type-b-s-regular);
  letter-spacing: var(--nvwa-track-b-s-regular);
  overflow-wrap: break-word;
}
.nvwa-hint--positive { border-color: transparent; background: var(--nvwa-alpha-green-20); }
.nvwa-hint--warning { border-color: transparent; background: var(--nvwa-alpha-yellow-20); }
.nvwa-hint--negative { border-color: transparent; background: var(--nvwa-alpha-red-20); }
.nvwa-hint__mark {
  inline-size: 12px;
  block-size: 12px;
  margin-block-start: 4px;
  flex: none;
  border-radius: 50%;
  background: var(--nvwa-line);
  color: var(--nvwa-text-black);
}
.nvwa-hint--positive .nvwa-hint__mark { background: var(--nvwa-alpha-green-20); }
.nvwa-hint--warning .nvwa-hint__mark { background: var(--nvwa-sentiment-warning); }
.nvwa-hint--negative .nvwa-hint__mark { background: var(--nvwa-alpha-red-20); }
.nvwa-hint__content { min-inline-size: 0; flex: 1 1 auto; }
.nvwa-hint__highlight { color: var(--nvwa-primary-green); }
.nvwa-hint__action { color: var(--nvwa-primary-green); font-weight: 600; }
.nvwa-hint__right-icon { inline-size: 20px; block-size: 20px; flex: none; color: var(--nvwa-text-primary); }

.nvwa-tag {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 0;
  block-size: 16px;
  padding: 2px 6px;
  border-radius: var(--nvwa-radius-capsule);
  background: var(--nvwa-bg-input);
  color: var(--nvwa-text-primary);
  font: var(--nvwa-type-c-2-regular);
  letter-spacing: var(--nvwa-track-c-2-regular);
  white-space: nowrap;
}
.nvwa-tag--green { background: var(--nvwa-alpha-green-20); color: var(--nvwa-market-buy); }
.nvwa-tag--red { background: var(--nvwa-alpha-red-20); color: var(--nvwa-sentiment-negative); }
.nvwa-tag--blue { background: var(--nvwa-alpha-blue-10); color: var(--nvwa-primary-green); }
.nvwa-tag__icon { inline-size: 16px; block-size: 16px; }

/* Checkbox. The host supplies the checked and unchecked Remix glyphs. */
.nvwa-checkbox {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-block-size: 20px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--nvwa-text-primary);
  font: var(--nvwa-type-b-s-regular);
  letter-spacing: var(--nvwa-track-b-s-regular);
  cursor: pointer;
}
.nvwa-checkbox__icon { inline-size: 20px; block-size: 20px; color: var(--nvwa-text-secondary); }
.nvwa-checkbox[aria-checked="true"] .nvwa-checkbox__icon,
.nvwa-checkbox.is-checked .nvwa-checkbox__icon { color: var(--nvwa-text-primary); }

/* Dropdown triggers and menu. */
.nvwa-dropdown-button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--nvwa-text-primary);
  font: var(--nvwa-type-b-s-regular);
  letter-spacing: var(--nvwa-track-b-s-regular);
  white-space: nowrap;
  cursor: pointer;
}
.nvwa-dropdown-button--small-semibold { font: var(--nvwa-type-b-s-semi-bold); letter-spacing: var(--nvwa-track-b-s-semi-bold); }
.nvwa-dropdown-button--medium { font: var(--nvwa-type-b-m-semi-bold); letter-spacing: var(--nvwa-track-b-m-semi-bold); }
.nvwa-dropdown-button--large { font: var(--nvwa-type-b-l-semi-bold); letter-spacing: var(--nvwa-track-b-l-semi-bold); }
.nvwa-dropdown-button__icon { inline-size: 12px; block-size: 12px; }
.nvwa-dropdown-button--medium .nvwa-dropdown-button__icon,
.nvwa-dropdown-button--large .nvwa-dropdown-button__icon { inline-size: 14px; block-size: 14px; }

.nvwa-dropdown-button--background {
  block-size: 40px;
  gap: 8px;
  padding-inline: 12px;
  border-radius: 8px;
  background: var(--nvwa-bg-input);
  font: 500 14px/22px var(--nvwa-font-family);
  letter-spacing: 0;
}
.nvwa-dropdown-button--background .nvwa-dropdown-button__icon { inline-size: 20px; block-size: 20px; color: var(--nvwa-text-secondary); }
.nvwa-dropdown-button--background-small {
  block-size: 24px;
  gap: 0;
  padding: 3px 8px;
  border-radius: 6px;
  font: 500 12px/18px var(--nvwa-font-family);
  letter-spacing: 0;
}
.nvwa-dropdown-button--background-small .nvwa-dropdown-button__icon { inline-size: 16px; block-size: 16px; }

.nvwa-dropdown-menu {
  box-sizing: border-box;
  inline-size: 113px;
  padding-block: 10px;
  border-radius: 12px;
  background: var(--nvwa-bg-main);
  box-shadow: var(--nvwa-shadow-dropdown);
}
.nvwa-dropdown-menu__item {
  appearance: none;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 4px;
  inline-size: 100%;
  min-block-size: 38px;
  padding: 8px 10px;
  border: 0;
  background: transparent;
  color: #757575;
  font: var(--nvwa-type-b-m-regular);
  letter-spacing: var(--nvwa-track-b-m-regular);
  text-align: start;
  cursor: pointer;
}
html[data-theme="dark"] .nvwa-dropdown-menu__item { color: var(--nvwa-text-secondary); }
.nvwa-dropdown-menu__item[aria-selected="true"],
.nvwa-dropdown-menu__item.is-selected { color: var(--nvwa-text-primary); }
.nvwa-dropdown-menu__check { inline-size: 20px; block-size: 20px; margin-inline-start: auto; }

/* Time point picker: Figma `2300:1034` / Nvwa `Type=Type4`. */
.nvwa-time-point-picker {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  inline-size: min(398px, 100%);
  block-size: 132px;
  padding: 8px;
  border-radius: 16px;
  background: var(--nvwa-bg-main);
  box-shadow: var(--nvwa-shadow-small);
}

.nvwa-time-point-picker__clock {
  display: flex;
  align-items: center;
  gap: 24px;
  min-inline-size: 0;
}

.nvwa-time-point-picker__column {
  display: grid;
  grid-template-rows: 36px 24px 36px;
  place-items: center;
  gap: 10px;
  min-inline-size: 36px;
}

.nvwa-time-point-picker__column--weekday {
  min-inline-size: max-content;
  margin-inline-start: 24px;
}

.nvwa-time-point-picker__button {
  appearance: none;
  display: grid;
  place-items: center;
  inline-size: 36px;
  block-size: 36px;
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: var(--nvwa-bg-main);
  color: var(--nvwa-text-primary);
  cursor: pointer;
}

.nvwa-time-point-picker__button .nvwa-icon {
  inline-size: 24px;
  block-size: 24px;
}

.nvwa-time-point-picker__value,
.nvwa-time-point-picker__separator {
  display: grid;
  place-items: center;
  block-size: 24px;
  color: var(--nvwa-text-primary);
  font: var(--nvwa-type-t-b-semi-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--nvwa-track-t-b-semi-bold);
  white-space: nowrap;
}

.nvwa-time-point-picker__separator {
  inline-size: max-content;
}

@media (max-width: 359px) {
  .nvwa-time-point-picker__clock { gap: 14px; }
  .nvwa-time-point-picker__column--weekday { margin-inline-start: 14px; }
}

/* Modal header and adaptive bottom sheet. */
.nvwa-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  align-items: end;
  background: rgb(0 0 0 / 42%);
  overscroll-behavior: contain;
}
.nvwa-sheet {
  --nvwa-sheet-max-width: 640px;
  display: grid;
  grid-template-rows: auto minmax(0, auto) auto;
  inline-size: min(100%, var(--nvwa-sheet-max-width));
  max-block-size: calc(100dvh - 80px);
  margin-inline: auto;
  overflow: hidden;
  border-radius: 16px 16px 0 0;
  background: var(--nvwa-bg-dialogue);
}
.nvwa-sheet__body {
  min-block-size: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.nvwa-sheet__body::-webkit-scrollbar { display: none; }
.nvwa-sheet__footer {
  padding: 12px 15px max(12px, env(safe-area-inset-bottom, 0px));
  background: var(--nvwa-bg-dialogue);
}
.nvwa-modal-header {
  box-sizing: border-box;
  display: grid;
  grid-template-rows: 16px 50px;
  block-size: 66px;
  border-radius: 16px 16px 0 0;
  background: var(--nvwa-bg-dialogue);
}
.nvwa-modal-header__drag-area { display: grid; place-items: center; block-size: 16px; }
.nvwa-modal-header__handle { inline-size: 40px; block-size: 4px; border-radius: 2px; background: var(--nvwa-bg-vessel); }
.nvwa-modal-header__row {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  block-size: 50px;
  padding-inline: 1px;
}
.nvwa-modal-header__title {
  grid-column: 2;
  overflow: hidden;
  color: var(--nvwa-text-primary);
  font: var(--nvwa-type-t-b-semi-bold);
  letter-spacing: var(--nvwa-track-t-b-semi-bold);
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nvwa-modal-header__action {
  appearance: none;
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--nvwa-text-primary);
  cursor: pointer;
}
.nvwa-modal-header__action:first-child { grid-column: 1; }
.nvwa-modal-header__action:last-child { grid-column: 3; }
.nvwa-modal-header__action--destructive { color: var(--nvwa-sentiment-negative); }
.nvwa-modal-header__icon { inline-size: 16px; block-size: 16px; }

/* Slide to confirm. JS owns drag geometry through --nvwa-scroll-offset. */
.nvwa-scroll-confirm {
  --nvwa-scroll-offset: 0px;
  appearance: none;
  position: relative;
  box-sizing: border-box;
  display: block;
  inline-size: min(345px, 100%);
  block-size: 56px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--nvwa-radius-capsule);
  background: var(--nvwa-bg-vessel);
  color: var(--nvwa-text-secondary);
  font: var(--nvwa-type-b-m-regular);
  letter-spacing: var(--nvwa-track-b-m-regular);
  cursor: grab;
  user-select: none;
  touch-action: pan-y;
}
.nvwa-scroll-confirm:active { cursor: grabbing; }
.nvwa-scroll-confirm__label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.nvwa-scroll-confirm__trail {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: calc(var(--nvwa-scroll-offset) + 56px);
  border-radius: inherit;
  background: var(--nvwa-bg-vessel);
  pointer-events: none;
}
.nvwa-scroll-confirm__knob {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: var(--nvwa-scroll-offset);
  display: grid;
  place-items: center;
  inline-size: 56px;
  block-size: 56px;
  border-radius: 50%;
  background: var(--nvwa-primary-green);
  color: var(--nvwa-color-on-blue);
}
.nvwa-scroll-confirm__glyph { inline-size: 28px; block-size: 28px; transform: rotate(90deg); }
.nvwa-scroll-confirm__spinner { inline-size: 24px; block-size: 24px; }
.nvwa-scroll-confirm[data-state="finish"] .nvwa-scroll-confirm__knob,
.nvwa-scroll-confirm.is-finished .nvwa-scroll-confirm__knob {
  inset-inline-start: auto;
  inset-inline-end: 0;
}
.nvwa-scroll-confirm[data-state="finish"] .nvwa-scroll-confirm__trail,
.nvwa-scroll-confirm.is-finished .nvwa-scroll-confirm__trail { inline-size: 100%; }
.nvwa-scroll-confirm[data-state="finish"] .nvwa-scroll-confirm__glyph,
.nvwa-scroll-confirm.is-finished .nvwa-scroll-confirm__glyph { display: none; }

/* Toast surface; position and lifetime remain the host's responsibility. */
.nvwa-toast {
  box-sizing: border-box;
  inline-size: max-content;
  max-inline-size: min(300px, calc(100vw - 32px));
  min-block-size: 32px;
  padding: 6px 8px;
  border-radius: 10px;
  background: var(--nvwa-text-primary);
  color: var(--nvwa-bg-main);
  font: var(--nvwa-type-b-s-regular);
  letter-spacing: var(--nvwa-track-b-s-regular);
  overflow-wrap: break-word;
}
.nvwa-toast-region {
  position: fixed;
  z-index: 120;
  inset-inline-start: 50%;
  inset-block-end: calc(80px + env(safe-area-inset-bottom, 0px));
  translate: -50% 12px;
  opacity: 0;
  pointer-events: none;
}
.nvwa-toast-region.is-visible { translate: -50% 0; opacity: 1; }

/* Tooltip: exact 283-point bubble and 17 x 9 pointer slot. */
.nvwa-tooltip {
  --nvwa-tooltip-arrow-width: 17px;
  --nvwa-tooltip-arrow-height: 9px;
  display: flex;
  align-items: center;
  filter: drop-shadow(0 0 20px rgb(69 71 69 / 20%));
}
.nvwa-tooltip--top,
.nvwa-tooltip--bottom { flex-direction: column; }
.nvwa-tooltip--left,
.nvwa-tooltip--right { flex-direction: row; }
.nvwa-tooltip__bubble {
  box-sizing: border-box;
  inline-size: min(283px, calc(100vw - 32px));
  padding: 24px;
  border-radius: 16px;
  background: var(--nvwa-bg-main);
}
.nvwa-tooltip__title {
  min-block-size: 24px;
  color: var(--nvwa-text-primary);
  font: var(--nvwa-type-t-b-semi-bold);
  letter-spacing: var(--nvwa-track-t-b-semi-bold);
}
.nvwa-tooltip__message {
  margin-block-start: 8px;
  color: var(--nvwa-text-secondary);
  font: var(--nvwa-type-b-m-regular);
  letter-spacing: var(--nvwa-track-b-m-regular);
}
.nvwa-tooltip__action {
  display: inline-block;
  margin-block-start: 0;
  color: var(--nvwa-text-primary);
  font: var(--nvwa-type-b-m-semi-bold);
  letter-spacing: var(--nvwa-track-b-m-semi-bold);
  text-decoration: underline;
}
.nvwa-tooltip__arrow {
  inline-size: var(--nvwa-tooltip-arrow-width);
  block-size: var(--nvwa-tooltip-arrow-height);
  flex: none;
  background: var(--nvwa-bg-main);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.nvwa-tooltip--bottom .nvwa-tooltip__arrow { order: -1; transform: rotate(180deg); }
.nvwa-tooltip--left .nvwa-tooltip__arrow { transform: rotate(-90deg); }
.nvwa-tooltip--right .nvwa-tooltip__arrow { order: -1; transform: rotate(90deg); }

/* Calendar: 7-column month view and 4-column year/decade view. */
.nvwa-calendar {
  box-sizing: border-box;
  inline-size: min(400px, 100%);
  padding: 8px;
  border-radius: 16px;
  background: var(--nvwa-bg-main);
  box-shadow: var(--nvwa-shadow-small);
}
.nvwa-calendar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  block-size: 52px;
}
.nvwa-calendar__header-title {
  appearance: none;
  min-inline-size: 88px;
  min-block-size: 26px;
  padding: 2px;
  border: 0;
  background: transparent;
  color: var(--nvwa-text-primary);
  font: var(--nvwa-type-b-m-semi-bold);
  letter-spacing: var(--nvwa-track-b-m-semi-bold);
  text-align: center;
  cursor: pointer;
}
.nvwa-calendar__nav {
  appearance: none;
  display: grid;
  place-items: center;
  inline-size: 28px;
  block-size: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--nvwa-text-primary);
  cursor: pointer;
}
.nvwa-calendar__nav .nvwa-icon { inline-size: 24px; block-size: 24px; }
.nvwa-calendar__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.nvwa-calendar__grid--year,
.nvwa-calendar__grid--decade { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.nvwa-calendar__weekday {
  display: grid;
  place-items: center;
  block-size: 38px;
  color: var(--nvwa-text-primary);
  font: var(--nvwa-type-b-m-semi-bold);
  letter-spacing: var(--nvwa-track-b-m-semi-bold);
}
.nvwa-calendar__weekday.is-weekend { color: var(--nvwa-text-secondary); font: var(--nvwa-type-b-m-regular); letter-spacing: var(--nvwa-track-b-m-regular); }
.nvwa-calendar__cell {
  display: grid;
  place-items: center;
  block-size: 40px;
}
.nvwa-calendar__day,
.nvwa-calendar__period {
  appearance: none;
  display: grid;
  place-items: center;
  inline-size: 32px;
  block-size: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--nvwa-text-primary);
  font: var(--nvwa-type-b-m-semi-bold);
  letter-spacing: var(--nvwa-track-b-m-semi-bold);
  cursor: pointer;
}
.nvwa-calendar__day.is-weekend { color: var(--nvwa-text-secondary); font: var(--nvwa-type-b-m-regular); letter-spacing: var(--nvwa-track-b-m-regular); }
.nvwa-calendar__period { inline-size: calc(100% - 8px); border-radius: var(--nvwa-radius-capsule); }
.nvwa-calendar__day[aria-selected="true"],
.nvwa-calendar__period[aria-selected="true"],
.nvwa-calendar__day[aria-pressed="true"],
.nvwa-calendar__period[aria-pressed="true"],
.nvwa-calendar__day.is-selected,
.nvwa-calendar__period.is-selected { background: var(--nvwa-primary-green); color: var(--nvwa-color-on-blue); }
.nvwa-calendar__day.is-past,
.nvwa-calendar__day:disabled { opacity: 0.45; cursor: not-allowed; }

/* Component-owned Key Feature illustration containers. The host supplies the SVG as a mask. */
.nvwa-key-feature {
  --nvwa-key-feature-size: 56px;
  --nvwa-key-feature-glyph-size: 28px;
  display: inline-grid;
  place-items: center;
  inline-size: var(--nvwa-key-feature-size);
  block-size: var(--nvwa-key-feature-size);
  border-radius: 50%;
  background: var(--nvwa-primary-green);
  color: var(--nvwa-color-on-blue);
}
.nvwa-key-feature--add { background: var(--nvwa-bg-vessel); color: var(--nvwa-text-primary); }
.nvwa-key-feature--close,
.nvwa-key-feature--tick,
.nvwa-key-feature--warning { --nvwa-key-feature-size: 48px; --nvwa-key-feature-glyph-size: 24px; }
.nvwa-key-feature--close { background: var(--nvwa-sentiment-negative); color: #ffffff; }
.nvwa-key-feature--tick { background: var(--nvwa-primary-green); color: #ffffff; }
.nvwa-key-feature--warning { background: var(--nvwa-sentiment-warning); color: var(--nvwa-text-black); }
.nvwa-key-feature__glyph {
  inline-size: var(--nvwa-key-feature-glyph-size);
  block-size: var(--nvwa-key-feature-glyph-size);
  background: currentColor;
  -webkit-mask: var(--nvwa-icon-mask) center / contain no-repeat;
  mask: var(--nvwa-icon-mask) center / contain no-repeat;
}
.nvwa-key-feature--receive .nvwa-key-feature__glyph { transform: scaleY(-1); }

/* Runtime-only reorder lift treatment shared by vertical rows and chips. */
.nvwa-reorderable { user-select: none; }
.nvwa-reorderable.is-reordering { position: relative; z-index: 1; scale: 1.02; background: var(--nvwa-bg-main); }
.nvwa-reorderable--row.is-reordering { box-shadow: var(--nvwa-shadow-reorder-row); }
.nvwa-reorderable--chip.is-reordering { border-radius: var(--nvwa-radius-capsule); box-shadow: var(--nvwa-shadow-reorder-chip); }

@media (prefers-reduced-motion: no-preference) {
  .nvwa-button,
  .nvwa-navigation__action,
  .nvwa-modal-header__action,
  .nvwa-checkbox,
  .nvwa-dropdown-button,
  .nvwa-dropdown-menu__item,
  .nvwa-time-point-picker__button {
    transition: opacity 120ms ease-out, transform 120ms ease-out;
  }
  :where(
    .nvwa-button,
    .nvwa-navigation__action,
    .nvwa-modal-header__action,
    .nvwa-checkbox,
    .nvwa-dropdown-button,
    .nvwa-dropdown-menu__item
  ):active:not(:disabled) { opacity: 0.82; transform: scale(0.96); }
  .nvwa-toggle::after { transition: transform 160ms ease-out; }
  .nvwa-segment__item,
  .nvwa-segment__label { transition: background-color 60ms linear; }
  .nvwa-spinner { animation: nvwa-spin 700ms linear infinite; }
  .nvwa-scroll-confirm__knob,
  .nvwa-scroll-confirm__trail { transition: inset-inline-start 180ms ease-out, inline-size 180ms ease-out; }
  .nvwa-toast-region { transition: opacity 150ms ease-out, translate 150ms ease-out; }
  .nvwa-reorderable { transition: scale 160ms ease-out, box-shadow 160ms ease-out; }
}

@media (prefers-reduced-motion: reduce) {
  .nvwa-button,
  .nvwa-navigation__action,
  .nvwa-modal-header__action,
  .nvwa-toggle::after,
  .nvwa-segment__item,
  .nvwa-segment__label,
  .nvwa-scroll-confirm__knob,
  .nvwa-scroll-confirm__trail,
  .nvwa-toast-region,
  .nvwa-reorderable { animation: none !important; transition: none !important; }
  .nvwa-spinner { animation: none !important; }
}

@keyframes nvwa-spin { to { transform: rotate(1turn); } }

@media (forced-colors: active) {
  :where(
    .nvwa-button,
    .nvwa-navigation__action,
    .nvwa-modal-header__action,
    .nvwa-input__clear,
    .nvwa-segment__item,
    .nvwa-section,
    .nvwa-checkbox,
    .nvwa-dropdown-button,
    .nvwa-dropdown-menu__item,
    .nvwa-calendar button,
    .nvwa-scroll-confirm,
    .nvwa-input-shell input
  ):focus-visible { outline-color: CanvasText; }
}

@media (max-width: 320px) {
  .nvwa-sheet { inline-size: 100%; }
  .nvwa-tooltip__bubble { inline-size: calc(100vw - 24px); }
}