@font-face {
  font-family: "InterVariable";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/InterVariable-884c49a1.woff2") format("woff2");
}

@font-face {
  font-family: "InterVariable";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/InterVariable-Italic-0aa7a4b3.woff2") format("woff2");
}

:root {
  --font-sans: "InterVariable", ui-sans-serif, system-ui, sans-serif;

  font-family: var(--font-sans);
  font-optical-sizing: auto;
  font-variant-ligatures: common-ligatures contextual;
}

:root,
[data-theme="light"] {
  --nk-font-sans: var(--font-sans);
  --nk-color-canvas: oklch(1 0 0);
  --nk-color-surface: oklch(1 0 0);
  --nk-color-foreground: oklch(0.21 0.006 285.885);
  --nk-color-primary: oklch(0.274 0.006 286.033);
  --nk-color-primary-foreground: oklch(1 0 0);
  --nk-color-focus: var(--color-brand);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --nk-color-canvas: oklch(0.141 0.005 285.823);
    --nk-color-surface: oklch(0.178 0.006 285.885);
    --nk-color-foreground: oklch(0.967 0.001 286.375);
    --nk-color-primary: oklch(1 0 0);
    --nk-color-primary-foreground: oklch(0.274 0.006 286.033);
    --nk-color-focus: var(--color-brand);
    --nk-button-default-background: oklch(0.3 0.01 286);
  }
}

[data-theme="dark"] {
  --nk-color-canvas: oklch(0.141 0.005 285.823);
  --nk-color-surface: oklch(0.178 0.006 285.885);
  --nk-color-foreground: oklch(0.967 0.001 286.375);
  --nk-color-primary: oklch(1 0 0);
  --nk-color-primary-foreground: oklch(0.274 0.006 286.033);
  --nk-color-focus: var(--color-brand);
  --nk-button-default-background: oklch(0.3 0.01 286);
}

[data-site-shell-content] {
  display: flex;
  flex-direction: column;
  min-block-size: calc(100vh - var(--nk-app-shell-topbar-height));
  min-block-size: calc(100dvh - var(--nk-app-shell-topbar-height));
}

@media (color-gamut: p3) {
  :root {
    --color-brand: color(display-p3 0.129427 0.318577 0.686222 / 1);
  }
}

/* Demo showcase: let the command-palette trigger compress inside the
 * application shell instead of colliding with the user identity. The gem
 * gives the palette root `inline-size: 100%` (a full-width trigger design);
 * inside the shell's footer that makes it grab the whole row. Size it to
 * content so flex can compress the identity and the trigger together. */
[data-ui="application-shell"] [data-nk="command-palette"] {
  inline-size: auto;
}

[data-nk="app-shell"] [data-slot="command-palette-trigger"],
[data-nk="app-shell"]
  [data-slot="command-palette-trigger"]
  [data-slot="button-label"] {
  min-inline-size: 0;
}

[data-nk="app-shell"]
  [data-slot="command-palette-trigger"]
  [data-slot="button-icon-start"] {
  flex-shrink: 0;
}

[data-nk="app-shell"] [data-slot="command-palette-trigger-label"] {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (width < 72rem) {
  [data-nk="app-shell"][data-layout="topbar"]
    [data-slot="command-palette-trigger-label"] {
    display: none;
  }
}

/* Topbar at mid widths: nav items become icon-only so the last item never
 * collides with the user identity (workspace + icons + identity fit). */
@media (width < 64rem) {
  [data-ui="application-shell"][data-layout="topbar"][data-nk="app-shell"]
    [data-slot="app-navigation-item-label"] {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    white-space: nowrap;
    clip: rect(0, 0, 0, 0);
    border: 0;
  }
}