/* GENERATED FROM packages/shared/ui/nc-tokens.css -- DO NOT EDIT HERE.
   Edit the package, then run `node scripts/sync-design.mjs`. */

/*
 * Nitro Console design tokens. One file for both sites.
 *
 * The rules behind every value are in the Brand Book
 * (nitroconsole.business/docs/BRAND-BOOK.md); "Brand Book §…" below points
 * there, a bare (§…) to UI/UX.md. Components that use these tokens are in
 * packages/shared/ui/nc-components.css.
 *
 * GENERATED COPY WARNING: this file is edited here only, in
 * packages/shared/ui/nc-tokens.css. `node scripts/sync-design.mjs` copies it to
 * nitroconsole.com and nitroconsole.business as src/styles/nc-tokens.css, and
 * every page loads it before any other stylesheet. `--check` fails on drift.
 *
 * Colour and font tokens are defined here and nowhere else. Older stylesheets
 * use the retired names at the bottom of :root; they now resolve to the
 * signed-off values instead of carrying their own.
 */

:root {
  color-scheme: dark;

  /* Surfaces and text (§2.2) */
  --nc-black: #0B0B0F;
  --nc-chrome: #111419;
  --nc-surface: #1A1D22;
  --nc-surface-raised: #22262C;
  --nc-surface-hover: #292E35;
  --nc-border: #6D7884; /* at least 3:1 against every interactive surface */
  --nc-border-strong: #7A8491;
  --nc-text: #F5F7FA;
  --nc-text-muted: #A7ADB6;
  --nc-text-faint: var(--nc-text-muted); /* disabled controls stay readable */

  /* The one accent (§2.2) */
  --nc-action: #1F80FF;        /* focus ring, selected edges, active icons: never text or a fill behind text */
  --nc-action-fill: #1A6FE0;   /* filled primary buttons, white label 4.8:1 */
  --nc-action-pressed: #165EC0;
  --nc-action-text: #4D9AFF;   /* any blue text, at least 4.8:1 on every surface */
  --nc-action-tint: linear-gradient(rgba(31, 128, 255, 0.2), rgba(31, 128, 255, 0.08));
  --nc-action-edge: var(--nc-action); /* selected edge: >=3:1 on every surface */
  --nc-action-hover-tint: rgba(77, 154, 255, 0.03); /* quiet-action text stays >=4.6:1 */

  /* Status (§2.2): dots and icons only, labels stay --nc-text */
  --nc-success: #42D77D;
  --nc-info: #1F80FF;
  --nc-warning: #F2BF4B;
  --nc-danger: #FF6B6B;
  --nc-rating: #FFC857;        /* review stars and rating bars */
  --nc-neutral: #747C87;

  /* Status tints (Brand Book §3.5): backgrounds of whole-width notices only, never
     behind a chip label. Text on them stays --nc-text. */
  --nc-danger-tint: rgba(255, 107, 107, 0.16);
  --nc-danger-hover-tint: rgba(255, 107, 107, 0.04); /* danger text stays >=4.6:1 */
  --nc-warning-tint: rgba(242, 191, 75, 0.14);
  --nc-success-tint: rgba(66, 215, 125, 0.14);
  --nc-on-danger: #0B0B0F;     /* label on a filled danger button, 7.1:1 */
  --nc-on-action: #FFFFFF;     /* label on --nc-action-fill, 4.8:1 */

  /* Overlays (Brand Book §3.1, §6.3) */
  --nc-scrim: rgba(11, 11, 15, 0.56);
  --nc-surface-overlay: rgba(34, 38, 44, 0.96); /* toasts, menus: raised, slightly see-through */

  /* Type (§2.1, §2.5.4, Brand Book §2) */
  --nc-font-sans: Helvetica, "Helvetica Neue", Arial, sans-serif;
  --nc-type-display: clamp(2rem, 1.75rem + 1.2vw, 3.375rem);
  --nc-type-title: 1.75rem;
  --nc-type-section: 1.375rem;
  --nc-type-card: 1.125rem;
  --nc-type-body: 1rem;
  --nc-type-control: 0.9375rem;
  --nc-type-support: 0.875rem;
  --nc-type-caption: 0.75rem;
  --nc-weight-regular: 400;
  --nc-weight-medium: 500;    /* tab labels only */
  --nc-weight-bold: 700;      /* titles, buttons, chips; hierarchy comes from 700 vs 400 */
  --nc-leading-display: 1.05;
  --nc-leading-title: 1.15;
  --nc-leading-section: 1.2;
  --nc-leading-card: 1.3;
  --nc-leading-body: 1.5;
  --nc-leading-control: 1.4;
  --nc-leading-support: 1.45;
  --nc-leading-caption: 1.3;
  --nc-tracking-tight: -0.02em;  /* display */
  --nc-tracking-title: -0.01em;  /* titles, section titles */
  --nc-tracking-caption: 0.01em; /* chips, badges */
  --nc-measure: 65ch;            /* longest line of running text */

  /* Spacing (§2.3): a 6 px grid. Every padding, margin, gap and gutter is a
     multiple of 6 (hairlines and 1-3 px optical nudges excepted). The old 4 and
     8 px steps both land on 6, so space-1 and space-2 are the same tight step. */
  --nc-space-1: 6px;
  --nc-space-2: 6px;
  --nc-space-3: 12px;
  --nc-space-4: 18px;
  --nc-space-5: 24px;
  --nc-space-6: 30px;
  --nc-space-7: 48px;
  --nc-space-8: 66px;

  /* Shape and elevation (§2.3) */
  --nc-radius-control: 14px;   /* buttons, fields, search */
  --nc-radius-card: 16px;      /* cards, tiles, list groups */
  --nc-radius-nav: 18px;       /* rail items */
  --nc-radius-sheet: 24px;     /* sheet top corners, dialogs */
  --nc-radius-inner: 8px;      /* thumbnails, icon wells */
  --nc-radius-pill: 999px;

  /* Strokes (Brand Book §6.2): hairlines separate, 2 px marks state, 3 px marks a
     notice's tone. Nothing else is outlined. */
  --nc-stroke: 1px;
  --nc-stroke-state: 2px;      /* focus ring, active tab underline, selected underline */
  --nc-stroke-edge: 3px;       /* attention strip and toast tone edge */
  --nc-focus-ring: var(--nc-stroke-state) solid var(--nc-action);
  --nc-focus-offset: 2px;

  /* Elevation (Brand Book §6.3): three tonal levels on the page, two shadows off it.
     Level 0 page --nc-black · 1 --nc-surface · 2 --nc-surface-raised. */
  --nc-shadow-overlay: none; /* sheets, drawers, dialogs: no decorative shadow, the strong border separates them */
  --nc-shadow-float: none;   /* toasts, menus, tooltips: separated by the strong border */

  /* Layers (Brand Book §6.4) */
  --nc-z-sticky: 10;           /* sticky page buttons, table heads */
  --nc-z-shell: 100;           /* header, rail, tab bar */
  --nc-z-menu: 1000;           /* dropdown menus, tooltips */
  --nc-z-toast: 2147483600;   /* above every page layer; the region also joins the top layer */
  --nc-z-skip: 2147483647;     /* skip link */

  /* Touch targets (§7): at least 44 x 44 px. Older rules read this token;
     where it was undefined their !important minimum collapsed to auto. */
  --nc-touch-target: 44px;

  /* Control sizes (§4, Brand Book §5) */
  --nc-control-height: 44px;        /* buttons, chips, segmented, steppers */
  --nc-control-height-block: 48px;  /* full-width form and sheet buttons */
  --nc-control-height-hero: 60px;   /* one hero action on a landing page */
  --nc-field-height: 62px;          /* form fields */
  --nc-field-height-dense: 52px;    /* fields inside sheets and drawers */
  --nc-search-height: 58px;
  --nc-status-height: 24px;         /* status chips, badges */
  --nc-row-min: 64px;               /* list rows */
  --nc-nav-item-height: 58px;       /* rail rows */
  --nc-disabled-opacity: 0.45;
  --nc-press-scale: 0.97;

  /* Icons (§2.4, Brand Book §7) */
  --nc-icon-nav: 26px;
  --nc-icon-header: 22px;
  --nc-icon-button: 24px;
  --nc-icon-inline: 20px;
  --nc-icon-meta: 16px;             /* beside 14 px support text (café card facts) */
  --nc-icon-empty: 48px;

  /* Layout (§2.5, Brand Book §4). Four screen types, decided by window width
     alone (never by device, pointer or page), the same on all three sites:

       Mobile   0-767 px     phone header + bottom bar, one column
                             (320-359 px only tightens sizes; same elements)
       Tablet   768-1099 px  80 px icon rail, no phone header or bottom bar
       Laptop   1100-1919 px labelled rail
       TV       1920 px +    labelled rail, wider gutter

     Breakpoints can't be variables in a media query, so every layout query
     uses exactly these edges: max-width 359px; max-width 767.98px /
     min-width 768px; max-width 1099.98px / min-width 1100px;
     max-width 1919.98px / min-width 1920px. design:verify enforces it. */
  --nc-page-gutter: 18px;
  --nc-content-max: 440px;          /* phone content column */
  --nc-form-max: 560px;             /* forms, onboarding steps, sheets */
  --nc-workspace-max: 1180px;       /* rail + content, centred */
  --nc-rail-gap: 30px;
  --nc-header-height: 60px;
  --nc-bottom-nav-height: 93px;     /* five tabs plus the active-label strip */
  --nc-safe-top: env(safe-area-inset-top, 0px);
  --nc-safe-bottom: env(safe-area-inset-bottom, 0px);
  --nc-header-total: calc(var(--nc-header-height) + var(--nc-safe-top));
  --nc-bottom-nav-total: calc(var(--nc-bottom-nav-height) + var(--nc-safe-bottom));

  /* Motion (§6.2, Brand Book §8.3) */
  --nc-motion-press: 140ms;
  --nc-motion-ui: 180ms;
  --nc-ease-ui: cubic-bezier(0.23, 1, 0.32, 1);
  --nc-motion-sheet-in: 280ms;
  --nc-motion-sheet-out: 200ms;
  --nc-ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);
  --nc-motion-toast-in: 200ms;
  --nc-motion-toast-out: 150ms;
  --nc-ease-out: ease-out;

  /* Retired names, kept so older rules resolve to the values above (§11.1) */
  --nc-brand: var(--nc-action-fill);
  --nc-brand-strong: var(--nc-action);
  --nc-brand-hover: var(--nc-action);
  --nc-brand-pressed: var(--nc-action-pressed);
  --nc-brand-active: var(--nc-action-pressed);
  --nc-brand-soft: rgba(31, 128, 255, 0.18);
  --nc-blue: var(--nc-action-fill);
  --nc-focus: var(--nc-action);
  --nc-muted: var(--nc-text-muted);
  --nc-font-ui: var(--nc-font-sans);
}

/* The rail (§2.5.2): icons only on tablets, labelled from 1100 px. */
:root { --nc-rail-width: 80px; }
@media (min-width: 1100px) {
  :root { --nc-rail-width: clamp(240px, 18vw, 280px); }
}

/* XS phones, 320-359 px (§2.5.4) */
@media (max-width: 359px) {
  :root {
    --nc-type-display: 2rem;
    --nc-type-title: 1.625rem;
    --nc-type-section: 1.25rem;
    --nc-page-gutter: 12px;
  }
}

/* Page gutter by screen type (§2.5.2) */
@media (min-width: 768px) {
  :root { --nc-page-gutter: 24px; }
}
@media (min-width: 1100px) {
  :root { --nc-page-gutter: 30px; }
}
@media (min-width: 1920px) {
  :root { --nc-page-gutter: 48px; }
}

/* Reduced motion (§6.2): cross-fades only. Durations stay short and no
   component scales or slides. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --nc-press-scale: 1;
    --nc-motion-sheet-in: 150ms;
    --nc-motion-sheet-out: 150ms;
    --nc-motion-toast-in: 0ms;
    --nc-motion-toast-out: 0ms;
  }
}

/* One font declaration for the whole product (§2.1). Form controls do not
   inherit fonts by default, so they are told to. */
html {
  /* The page never scrolls sideways; carousels scroll inside their own row. */
  overflow-x: clip;
  overscroll-behavior-x: none;
  font-family: var(--nc-font-sans);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

:where(button, input, select, textarea, optgroup) {
  font-family: inherit;
}

/* Inputs are 16 px at every size so iOS never zooms into a field (§2.1,
   §2.5.4). One-time-code boxes are their own larger component. */
input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"], .otp-digit, .otp-input, .auth-otp input, [autocomplete="one-time-code"][maxlength="1"]),
select,
textarea {
  font-size: 16px !important;
}

/* `hidden` always hides. Component rules such as `display: grid` otherwise
   beat the browser's own [hidden] rule and show empty cards. */
[hidden]:not([hidden="until-found"]) {
  display: none !important;
}

/* Content safety (§2.5.6): a page canvas sizes to its column, never the
   viewport. Beside the rail, 100vw canvases ran under the right edge. The
   :not(#…) matches everything and lifts this above page rules that use ids. */
@media (min-width: 768px) {
  html body .app-shell .app-content > :not(#nc-canvas-guard) {
    max-inline-size: 100% !important;
  }
}

/* Text for screen readers only. */
:where(.nc-visually-hidden, .sr-only) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Icons (§2.4). Directional library glyphs point down (chevron.svg,
   navigation-control.svg) or right (circle-half.svg); these turn them. */
.nc-icon--left { transform: rotate(90deg); }
.nc-icon--right { transform: rotate(-90deg); }
.nc-icon--up { transform: rotate(180deg); }
.nc-icon--flip { transform: scaleX(-1); }

/* Direction glyphs. Every arrow in the product is one of two library icons,
   drawn as a mask so its colour is a token and never a literal:
     chevron.svg  the plain arrow (row ends, breadcrumbs, menus). Points down.
     back.svg     the circled arrow (back, previous, next). Points left.
   Colour is --nc-glyph-color (default: the surrounding text colour); size is
   --nc-glyph-size. Turn them with the modifiers below. */
.nc-glyph {
  display: inline-block;
  flex: none;
  inline-size: var(--nc-glyph-size, var(--nc-icon-inline));
  block-size: var(--nc-glyph-size, var(--nc-icon-inline));
  background-color: var(--nc-glyph-color, currentColor);
  -webkit-mask: var(--nc-glyph-src) center / contain no-repeat;
  mask: var(--nc-glyph-src) center / contain no-repeat;
}
.nc-glyph--chevron { --nc-glyph-src: url("/assets/icons/chevron.svg"); }
.nc-glyph--back { --nc-glyph-src: url("/assets/icons/back.svg"); --nc-glyph-size: var(--nc-icon-button); }
.nc-glyph--right { transform: rotate(-90deg); }
.nc-glyph--left { transform: rotate(90deg); }
.nc-glyph--up { transform: rotate(180deg); }
.nc-glyph--forward { transform: scaleX(-1); }
/* The arrow every select draws: the library chevron, never a drawn shape. */
:root { --nc-select-chevron: url("/assets/icons/chevron.svg"); }
.nc-glyph--muted { --nc-glyph-color: var(--nc-text-muted); }
.nc-glyph--action { --nc-glyph-color: var(--nc-action-text); }
@media (forced-colors: active) { .nc-glyph { background-color: CanvasText; } }

/* Library glyphs are white (Brand Book §7). An idle or decorative one
   (a search glyph in a field, a row chevron) is shown muted. */
.nc-icon--muted { opacity: 0.66; }

/* A single-colour glyph whose colour carries meaning (ticket, status check). */
.nc-icon-mask {
  display: inline-block;
  flex: 0 0 var(--nc-icon-size, 28px);
  inline-size: var(--nc-icon-size, 28px);
  block-size: var(--nc-icon-size, 28px);
  background-color: var(--nc-icon-color, currentColor);
  -webkit-mask: var(--nc-icon-source) center / contain no-repeat;
  mask: var(--nc-icon-source) center / contain no-repeat;
  pointer-events: none;
}

/* Accessibility fallbacks (§7) */
@media (prefers-contrast: more) {
  :root {
    --nc-text-muted: #C9CED6;
    --nc-border: #A7ADB6;
    --nc-border-strong: #F5F7FA;
  }
}

@media (forced-colors: active) {
  :root {
    --nc-text: CanvasText;
    --nc-text-muted: CanvasText;
    --nc-action: Highlight;
    --nc-action-text: LinkText;
    --nc-danger: CanvasText;
  }

  .nc-icon-mask {
    background-color: CanvasText;
  }
}

/* ── Page transitions (all three sites, every screen size) ─────────────────
   Moving between pages cross-fades the content while the app chrome (rail,
   header, tab bar) stays put. Browsers without cross-document view
   transitions simply navigate, and soft navigation animates the swap itself
   (soft-nav.js). Reduced motion keeps a short fade and drops the slide. */
.ncs-rail { view-transition-name: nc-rail; }
.ncs-header { view-transition-name: nc-header; }
.ncs-tabbar { view-transition-name: nc-tabbar; }
::view-transition-group(nc-rail),
::view-transition-group(nc-header),
::view-transition-group(nc-tabbar) { animation-duration: 0s; }
::view-transition-old(root) { animation: nc-page-out 120ms var(--nc-ease-out) both; }
::view-transition-new(root) { animation: nc-page-in 220ms var(--nc-ease-ui) both; }
@keyframes nc-page-out { to { opacity: 0; } }
@keyframes nc-page-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root) { animation-duration: 90ms; }
  ::view-transition-new(root) { animation: nc-page-fade 120ms linear both; }
  @keyframes nc-page-fade { from { opacity: 0; } to { opacity: 1; } }
}

/* The one star: the library's star.svg, drawn in the current text colour. Used wherever a rating
   shows a star, so the shape never differs between pages. */
.nc-star {
  display: inline-block;
  inline-size: 1em;
  block-size: 1em;
  flex: none;
  vertical-align: -0.125em;
  background: currentColor;
  -webkit-mask: url(/assets/icons/star.svg?v=20261021) center / contain no-repeat;
  mask: url(/assets/icons/star.svg?v=20261021) center / contain no-repeat;
}
/* star.svg and wifi.svg ship with dark fills; shown as an <img> on a dark screen they render white,
   as every other icon in the library does. */
img[src*="/assets/icons/star.svg"],
img[src*="/assets/icons/wifi.svg"] { filter: brightness(0) invert(1); }

/* A plain "Loading…" placeholder: invisible for the first second, so a quick answer never flashes it. */
.nc-after-1s {
  visibility: hidden;
  animation: ncx-after-1s 0s linear 1s forwards;
}
@keyframes ncx-after-1s { to { visibility: visible; } }