/* ================================================================
   nonoun-css Base Reset & Document Defaults

   Universal reset uses real specificity to override UA defaults.
   Document defaults use :where() for zero specificity so consumers
   can override font-family, background, etc. without fighting.
   ================================================================ */

@layer ui {

  /* ── Universal Reset ── */

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

  :where(body) {
    font-family: var(--n-font-family);
    margin: 0;
  }

  /* WHY: UA [hidden]{display:none} loses to author-layer :where() display values.
     Real specificity (0,1,0) ensures [hidden] always wins over :where() components. */
  [hidden] {
    display: none;
  }

  /* ── Control Text Selection ── */
  /* WHY: Interactive and display components should not have selectable text.
     Real specificity (0,0,1+) ensures this beats :where() component defaults.
     Opt in with [user-selectable] on any element that needs text selection. */

  :where(
    n-button, n-select, n-combobox, n-command,
    n-checkbox, n-radio, n-switch, n-range,
    n-segmented-control, n-tabs, n-tab,
    n-listbox, n-option, n-option-group, n-option-group-header,
    n-badge, n-kbd, n-avatar,
    n-breadcrumb, n-pagination, n-pagination-dots,
    n-accordion, n-calendar, n-tree,
    n-icon, n-tooltip,
    n-field, n-input-otp,
    n-sidebar-nav, n-sidebar-nav-item, n-sidebar-item, n-sidebar-group-header,
    n-header, n-footer, n-toolbar,
    n-container > n-header, n-container > n-footer
  ) {
    user-select: none;
  }

  [user-selectable] {
    user-select: text;
  }

  /* ── Document Defaults ── */

  :where(native-dashboard-spa),
  :where(native-app) {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;

    font-family: var(--n-font-family);
    line-height: var(--n-text-line-height);
    background: var(--n-doc-neutral);
    color: var(--n-ink-neutral);
    min-height: 100dvh;
  }

  /* ── Container Headings ── */
  /* WHY: Reset h1–h3 inside containers so page-level heading styles
     (large sizes, margins, text-transform) don't bleed in.
     Uses the container's --n-font-* scale for sizing. */

  :where(n-container) :where(h1, h2, h3) {
    margin: 0;
    font-weight: var(--n-button-font-weight);
    line-height: var(--n-control-line-height-relaxed);
    letter-spacing: 0;
    text-transform: none;
    color: var(--n-ink-strong);
  }

  :where(n-container) :where(h1) { font-size: var(--n-font-xl); }
  :where(n-container) :where(h2) { font-size: var(--n-font-lg); }
  :where(n-container) :where(h3) { font-size: var(--n-font-md); }

  /* ── Reduced Motion ── */

  @media (prefers-reduced-motion: reduce) {
    :root {
      --n-duration: 0s;
    }
  }
}

/* ══════════════════════════════════════════════════════════════════
   Layout Utilities — n-stack, n-inset, n-grid
   CSS-only layout containers. No custom element registration.
   ══════════════════════════════════════════════════════════════════ */

@layer ui {

  /* ── Stack ── */

  :where(n-stack) {
    --n-padding-block: 0;
    --n-padding-inline: 0;

    display: flex;
    flex: 1 1 0%;
    min-width: 0;
    min-height: inherit;
    flex-direction: column;
    gap: calc(var(--n-space) * var(--n-space-k));
    padding-block: var(--n-padding-block);
    padding-inline: var(--n-padding-inline);
  }

  /* ── Adaptive Grid ── */
  /* WHY: When <nav> and/or <aside> children are present, n-stack
     auto-switches from flex to grid with leading/label/trailing columns. */

  /* Both leading + trailing → three columns */
  :where(n-stack):has(> nav):has(> aside) {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
  }

  /* Leading only → two columns */
  :where(n-stack):has(> nav):not(:has(> aside)) {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
  }

  /* Trailing only → two columns */
  :where(n-stack):not(:has(> nav)):has(> aside) {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
  }

  /* Nav (leading) — flex row for grouped icons/buttons */
  :where(n-stack) > :where(nav) {
    display: flex;
    align-items: center;
    gap: calc(var(--n-space) * 2);
    min-width: 0;
  }

  /* Aside (trailing) — flex row, pushed to end */
  :where(n-stack) > :where(aside) {
    display: flex;
    align-items: center;
    gap: calc(var(--n-space) * 2);
    min-width: 0;
    overflow: hidden;
  }

}

/* ── Attribute API (unlayered) ── */

/* Direction */
:where(n-stack)[direction="row"] { flex-direction: row; }
:where(n-stack)[direction="column-reverse"] { flex-direction: column-reverse; }
:where(n-stack)[direction="row-reverse"] { flex-direction: row-reverse; }

/* Wrap */
:where(n-stack)[wrap] { flex-wrap: wrap; }

/* Sticky */
:where(n-stack)[sticky="top"] {
  position: sticky;
  top: 0;
  z-index: 1;
  background: inherit;
}

:where(n-stack)[sticky="bottom"] {
  position: sticky;
  bottom: 0;
  z-index: 1;
  background: inherit;
}

/* Truncate */
[truncate]:where(n-stack) > :where(:not(nav):not(aside)) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* Dividers */
:where(n-stack)[dividers] > :where(:not(:first-child)) {
  border-block-start: 1px solid var(--n-border-muted);
}

@layer ui {

  /* ── Grid ── */

  :where(n-grid) {
    --n-padding-block: 0;
    --n-padding-inline: 0;

    display: grid;
    flex: 1 1 0%;
    min-width: 0;
    min-height: 0;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: calc(var(--n-space) * 2);
    padding-block: var(--n-padding-block);
    padding-inline: var(--n-padding-inline);
  }

}

/* ── Attribute API (unlayered) ── */

/* Fixed columns */
:where(n-grid)[cols="1"] { grid-template-columns: 1fr; }
:where(n-grid)[cols="2"] { grid-template-columns: repeat(2, 1fr); }
:where(n-grid)[cols="3"] { grid-template-columns: repeat(3, 1fr); }
:where(n-grid)[cols="4"] { grid-template-columns: repeat(4, 1fr); }
:where(n-grid)[cols="5"] { grid-template-columns: repeat(5, 1fr); }
:where(n-grid)[cols="6"] { grid-template-columns: repeat(6, 1fr); }

/* Min column width (auto-fill) */
:where(n-grid)[min="8rem"] { grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); }
:where(n-grid)[min="10rem"] { grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); }
:where(n-grid)[min="12rem"] { grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }
:where(n-grid)[min="14rem"] { grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
:where(n-grid)[min="16rem"] { grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
:where(n-grid)[min="20rem"] { grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); }
:where(n-grid)[min="24rem"] { grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr)); }

@layer ui {

  /* ── Inset ── */

  :where(n-inset) {
    display: flex;
    flex: 1 1 0%;
    min-width: 0;
    flex-direction: column;
    gap: calc(var(--n-space) * 2);
    padding-inline-start: calc(var(--n-space-k) * var(--n-space));
  }

}


/* ══════════════════════════════════════════════════════════════════
   Containers — sub-containers + container component CSS.
   <n-header>, <n-footer>, <n-aside> are defined inline.
   Container components are @imported from src/containers/.
   ══════════════════════════════════════════════════════════════════ */

/* Container components */
@layer ui {

  /* ══════════════════════════════════════════════════════════════════
     <n-container> — Unified surface container (card + panel)
     Default = card elevation, density-scaled padding + gap
     [data-kind="panel"] = panel elevation
     ══════════════════════════════════════════════════════════════════ */

  :where(n-container):not(:defined) { visibility: hidden; }

  /* ── Base (card mode) ── */

  :where(n-container) {
    --n-ground: var(--n-card);
    --n-ground-hover: var(--n-card-hover);

    /* Default size context — children inherit md */
    --n-size: var(--n-size-md);
    --n-font-size: var(--n-font-md);
    --n-letter-spacing: var(--n-tracking-md);
    --n-space: var(--n-space-md);
    --n-icon-size: var(--n-icon-md);
    --n-widget-size: var(--n-widget-md);
    --n-widget-font: var(--n-widget-font-md);

    display: flex;
    flex: 1 1 0%;
    min-width: 0;
    flex-direction: column;
    /* WHY: Container uses symmetric padding (all sides = inline).
       Uses --n-pad-inline directly — must NOT redefine --n-pad-block/gap
       because those cascade to child components (buttons, inputs). */
    gap: var(--n-pad-inline);
    padding-block: var(--n-pad-inline);
    padding-inline: var(--n-pad-inline);
    background: var(--n-ground);
    border-radius: var(--n-radius);

    font-size: var(--n-font-size);
    line-height: var(--n-line-height);

    transition:
      background var(--n-duration) var(--n-easing),
      color var(--n-duration) var(--n-easing),
      border-color var(--n-duration) var(--n-easing),
      box-shadow var(--n-duration) var(--n-easing),
      opacity var(--n-duration) var(--n-easing),
      transform var(--n-duration) var(--n-easing);
  }

  /* ── Panel mode ── */

  :where(n-container[data-kind="panel"]) {
    --n-ground: var(--n-panel);
    overflow: visible;
    scrollbar-width: none;
  }

  /* ── Media slot ── */

  :where(n-container) > :where([slot="media"]) {
    display: block;
    width: 100%;
    object-fit: cover;
  }

  /* ── Sub-container integration ── */
  /* WHY: Sub-container elements (<n-header>, <n-body>, <n-footer>) work as
     direct children of n-container. Structured mode activates when <n-header>
     or <n-footer> is present — overflow delegates to <n-body>. */

  :where(n-container):has(> n-header, > n-footer) {
    overflow: hidden;
    padding: 0;
    min-height: 0;
  }

  :where(n-container):has(> n-header, > n-footer) > :where(n-body) {
    flex: 1 1 0%;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: none;
  }

  /* ── Container n-header grid columns — nav (leading) + aside (trailing) ──
     WHY: Containers use <nav>/<aside> children for leading/trailing slots
     instead of the generic n-header [slot="leading"]/[slot="trailing"]. */

  :where(n-container) > :where(n-header):has(> nav):has(> aside) {
    grid-template-columns: auto 1fr minmax(0, auto);
  }
  :where(n-container) > :where(n-header):has(> nav):not(:has(> aside)) {
    grid-template-columns: auto 1fr;
  }
  :where(n-container) > :where(n-header):not(:has(> nav)):has(> aside) {
    grid-template-columns: 1fr minmax(0, auto);
  }
  :where(n-container) > :where(n-header) > :where(nav) {
    display: flex;
    align-items: center;
    gap: calc(var(--n-space) * 2);
  }
  :where(n-container) > :where(n-header) > :where(aside) {
    grid-column: -1;
    display: flex;
    align-items: center;
    gap: calc(var(--n-space) * 2);
    min-width: 0;
    overflow: hidden;
  }

  /* Panel-mode section defaults */
  :where(n-container[data-kind="panel"]) > :where(n-body) {
    display: flex;
    flex-direction: column;
    gap: var(--n-pad-inline);
    padding-block: var(--n-pad-inline);
    padding-inline: var(--n-pad-inline);
    box-sizing: border-box;
  }

}

/* ══════════════════════════════════════════════════════════════════
   Attribute API (unlayered)
   Selectors at (0,1,0) — beat layered component defaults.
   ══════════════════════════════════════════════════════════════════ */

:where(n-container)[inline] {
  flex: 0 0 auto;
}

:where(n-container)[dividers] > :where(:not(:first-child)) {
  border-block-start: 1px solid var(--n-border-muted);
}

:where(n-container)[interactive] {
  cursor: pointer;
}

:where(n-container)[interactive]:hover,
:where(n-container)[interactive][force-hover] {
  background: var(--n-ground-hover);
  border-color: var(--n-border-hover);
}

:where(n-container)[interactive]:focus-visible,
:where(n-container)[interactive][force-focus-visible] {
  outline: 2px solid var(--n-focus-ring);
  outline-offset: 2px;
}

:where(n-container)[bordered] {
  border: 1px solid var(--n-border-muted);
}

:where(n-container[data-kind="panel"])[show-scrollbar] {
  scrollbar-width: thin;
}

[padding="0"]:where(n-container),
[padding="none"]:where(n-container) {
  padding: 0;
}

[scrollable]:where(n-container[data-kind="panel"]) {
  overflow-y: auto;
}

[fade]:where(n-container[data-kind="panel"]) {
  --n-fade-top: calc((var(--n-size) + var(--n-space) * var(--n-space-k)) * 1.25);
  --n-fade-bottom: calc((var(--n-size) + var(--n-space) * var(--n-space-k)) * 1.25);
}

/* Fade masks — header/footer present → mask the section */
[fade]:where(n-container[data-kind="panel"]):has(> n-header) > :where(n-body) {
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    black var(--n-fade-top),
    black 100%
  );
}

[fade]:where(n-container[data-kind="panel"]):has(> n-footer) > :where(n-body) {
  mask-image: linear-gradient(
    to bottom,
    black 0,
    black calc(100% - var(--n-fade-bottom)),
    transparent 100%
  );
}

[fade]:where(n-container[data-kind="panel"]):has(> n-header):has(> n-footer) > :where(n-body) {
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    black var(--n-fade-top),
    black calc(100% - var(--n-fade-bottom)),
    transparent 100%
  );
}

@layer ui {

  /* ── Body ── */
  /* Generic content region. Fills remaining flex space.
     Does NOT declare overflow by default — scrolling is
     inherited from the parent height constraint. */

  :where(n-body) {
    --n-background: var(--n-panel);
    --n-font-family: inherit;

    display: flex;
    flex: 1 1 0%;
    min-width: 0;
    min-height: calc(var(--n-size) + var(--n-pad-inline) * 2);
    flex-direction: column;
    /* WHY: Body uses symmetric padding (same as container).
       Uses --n-pad-inline directly — must NOT redefine --n-pad-block/gap. */
    gap: var(--n-pad-inline);
    padding-block: var(--n-pad-inline);
    padding-inline: var(--n-pad-inline);
    background: var(--n-background);

    font-family: var(--n-font-family);
    font-size: var(--n-font-size);
    line-height: var(--n-line-height);
    box-sizing: border-box;
  }

}

/* ── Attribute API (unlayered) ── */

:where(n-body)[show-scrollbar],
:where(n-body)[scrollbar="thin"] {
  scrollbar-width: thin;
}

:where(n-body)[scrollbar="none"] {
  scrollbar-width: none;
}

:where(n-body)[overflow="hidden"] {
  overflow: hidden;
}

:where(n-body)[overflow="auto"] {
  overflow: auto;
}

:where(n-body)[overflow="scroll"] {
  overflow: scroll;
}

:where(n-body)[relative] {
  position: relative;
}

[padding="0"]:where(n-body),
[padding="none"]:where(n-body) {
  padding: 0;
}

@layer ui {

  :where(n-divider) {
    display: flex;
    flex: none;
    min-width: 0;
    align-items: center;
    gap: calc(var(--n-space) * var(--n-space-k));
    border: 0;
    color: var(--n-ink-muted);
    font-size: var(--n-font-size);
    letter-spacing: var(--n-letter-spacing);
  }

  /* Horizontal with text content */
  :where(n-divider):not([orientation="vertical"]) {
    flex-direction: row;
  }

  :where(n-divider):not([orientation="vertical"]):empty {
    border-block-start: 1px solid var(--n-border-muted);
  }

  :where(n-divider):not([orientation="vertical"]):not(:empty)::before,
  :where(n-divider):not([orientation="vertical"]):not(:empty)::after {
    content: '';
    flex: 1;
    border-block-start: 1px solid var(--n-border-muted);
  }

  /* ── Attribute API ── */

  :where(n-divider)[orientation="vertical"] {
    align-self: stretch;
    flex-direction: column;
    justify-content: center;
    width: auto;
    height: var(--n-divider-size);
  }

  :where(n-divider)[orientation="vertical"]:empty::after {
    content: '';
    align-self: center;
    block-size: 100%;
    border-inline-start: 1px solid var(--n-border-muted);
  }

  :where(n-divider)[orientation="vertical"]:not(:empty)::before,
  :where(n-divider)[orientation="vertical"]:not(:empty)::after {
    content: '';
    flex: 1;
    border-inline-start: 1px solid var(--n-border-muted);
  }

}

@layer ui {

  /* ══════════════════════════════════════════════════════════════════
     <n-panes> — Coordinated pane group container
     Flex layout with pointer-proximity resize between children.
     Default orientation: horizontal (side-by-side).
     ══════════════════════════════════════════════════════════════════ */

  :where(n-panes):not(:defined) { visibility: hidden; }
  :where(n-pane):not(:defined) { visibility: hidden; }

  :where(n-panes) {
    display: flex;
    flex-direction: row;
    flex: 1 1 0%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
  }

  /* ══════════════════════════════════════════════════════════════════
     <n-pane> — Individual pane with optional header, close, minimize
     ══════════════════════════════════════════════════════════════════ */

  :where(n-pane) {
    --n-pane-handle-accent: var(--n-ink-accent);
    --n-pane-border-color: var(--n-border-muted);

    display: flex;
    flex-direction: column;
    flex: 1 1 0%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    position: relative;
  }

  /* ── Slot placement (order-based pinning) ── */

  /* Leading / header pins to top */
  :where(n-pane) > :where(n-header),
  :where(n-pane) > :where([slot="leading"]) {
    order: -1;
    flex: none;
  }

  /* Content / body stretches to fill */
  :where(n-pane) > :where(n-body),
  :where(n-pane) > :where([slot="content"]) {
    flex: 1 1 0%;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: none;
  }

  /* Trailing / footer pins to bottom */
  :where(n-pane) > :where(n-footer),
  :where(n-pane) > :where([slot="trailing"]) {
    order: 999;
    flex: none;
  }

  /* Canvas: covers entire pane, behind content */
  :where(n-pane) > :where([slot="canvas"]) {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
  }

  :where(n-pane) > :where(:not([slot="canvas"])) {
    z-index: 1;
    position: relative;
  }

  /* ── Compact header inside pane ── */

  :where(n-pane) > :where(n-header) {
    --n-pad-block: 0.125rem;
    --n-pad-inline: 0.375rem;
    min-height: var(--n-pane-header-height, 1.75rem);
    font-size: var(--n-pane-header-font-size, 0.6875rem);
    font-weight: var(--n-button-font-weight);
    gap: calc(var(--n-space) * 1);
  }

  /* ── Minimized state ── */

  :where(n-pane[minimized]) {
    flex: none;
  }

  :where(n-pane[minimized]) > :where(:not(n-header):not([slot="leading"])) {
    display: none;
  }

  /* ── Edge resize handles (stamped by n-pane per resize attr) ── */

  :where(n-pane) > :where(.pane-edge) {
    position: absolute;
    z-index: 3;
    touch-action: none;
  }

  :where(n-pane) > :where(.pane-edge[data-edge="right"]) {
    top: 0; bottom: 0; right: -8px; width: 16px;
    cursor: col-resize;
  }

  :where(n-pane) > :where(.pane-edge[data-edge="left"]) {
    top: 0; bottom: 0; left: -8px; width: 16px;
    cursor: col-resize;
  }

  :where(n-pane) > :where(.pane-edge[data-edge="top"]) {
    left: 0; right: 0; top: -8px; height: 16px;
    cursor: row-resize;
  }

  :where(n-pane) > :where(.pane-edge[data-edge="bottom"]) {
    left: 0; right: 0; bottom: -8px; height: 16px;
    cursor: row-resize;
  }

  :where(n-pane) > :where(.pane-edge)::after {
    content: '';
    position: absolute;
    background: var(--n-pane-handle-accent);
    opacity: 0;
    transition: opacity var(--n-duration, 150ms) var(--n-easing, ease);
    border-radius: 2px;
  }

  /* Inline edges: vertical accent bar */
  :where(n-pane) > :where(.pane-edge[data-edge="left"])::after,
  :where(n-pane) > :where(.pane-edge[data-edge="right"])::after {
    top: 0; bottom: 0; left: 50%; width: 3px;
    transform: translateX(-50%);
  }

  /* Block edges: horizontal accent bar */
  :where(n-pane) > :where(.pane-edge[data-edge="top"])::after,
  :where(n-pane) > :where(.pane-edge[data-edge="bottom"])::after {
    left: 0; right: 0; top: 50%; height: 3px;
    transform: translateY(-50%);
  }

  :where(n-pane) > :where(.pane-edge):hover::after,
  :where(n-pane[data-resizing]) > :where(.pane-edge)::after {
    opacity: 1;
  }

  /* ── Between-pane accent bar (::after on pane, driven by n-panes hit-testing) ── */

  :where(n-pane[data-edge-near])::after,
  :where(n-pane[data-edge-active])::after {
    content: '';
    position: absolute;
    z-index: 4;
    background: var(--n-pane-handle-accent);
    border-radius: 2px;
    pointer-events: none;
  }

  :where(n-pane[data-edge-near="right"])::after,
  :where(n-pane[data-edge-active="right"])::after {
    top: 0; bottom: 0; right: 0; width: 3px;
  }

  :where(n-pane[data-edge-near="bottom"])::after,
  :where(n-pane[data-edge-active="bottom"])::after {
    left: 0; right: 0; bottom: 0; height: 3px;
  }

  /* ── Border between adjacent panes ── */

  :where(n-panes) > :where(n-pane) + :where(n-pane) {
    border-inline-start: 1px solid var(--n-pane-border-color);
  }

}

/* ══════════════════════════════════════════════════════════════════
   Attribute API (unlayered)
   Selectors at (0,1,0) — beat layered component defaults.
   ══════════════════════════════════════════════════════════════════ */

/* ── Vertical orientation ── */

:where(n-panes)[orientation="vertical"] {
  flex-direction: column;
}

:where(n-panes)[orientation="vertical"] > :where(n-pane) + :where(n-pane) {
  border-inline-start: none;
  border-block-start: 1px solid var(--n-pane-border-color);
}

/* ── Border ── */

:where(n-pane)[border] {
  border: 1px solid var(--n-pane-border-color);
}

:where(n-pane)[border="block"] {
  border-block: 1px solid var(--n-pane-border-color);
}

:where(n-pane)[border="inline"] {
  border-inline: 1px solid var(--n-pane-border-color);
}

/* ── Scrollable pane ── */

:where(n-pane)[scrollable] {
  overflow-y: auto;
  scrollbar-width: none;
}

:where(n-pane)[scrollable="x"] {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

:where(n-pane)[scrollable="y"] {
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}

:where(n-pane)[scrollable="both"] {
  overflow: auto;
  scrollbar-width: none;
}

/* ── Hover-reveal mode: hide pane border — accent bar replaces it ── */

:where(n-panes)[handle="hover"] > :where(n-pane) + :where(n-pane) {
  border-inline-start: none;
}

:where(n-panes)[handle="hover"][orientation="vertical"] > :where(n-pane) + :where(n-pane) {
  border-block-start: none;
}


@layer ui {

  /* ╭──────────────────────────────────────────────────────────╮
     │  <n-header>                                              │
     │  Generic sub-container header with leading / label /     │
     │  trailing slots + optional content row below.            │
     │  Grid adapts columns to which slots are present.         │
     │  Parent containers (article, n-drawer) provide           │
     │  context-specific overrides.                             │
     ╰──────────────────────────────────────────────────────────╯ */

  :where(n-header) {
    --n-pad-block: var(--n-space);
    --n-background: var(--n-panel);
    --n-font-weight: var(--n-button-font-weight);
    --n-text-transform: none;
    --n-letter-spacing: normal;

    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    gap: var(--n-pad-gap);
    min-height: calc(var(--n-size) + var(--n-pad-block) * 2);
    padding-block: var(--n-pad-block);
    padding-inline: var(--n-pad-inline);
    font-weight: var(--n-font-weight);
    color: var(--n-ink-strong);
    min-width: 0;
    background: var(--n-background);

    font-size: var(--n-font-size);
    line-height: var(--n-line-height);
    text-transform: var(--n-text-transform);
    letter-spacing: var(--n-letter-spacing);
    box-sizing: border-box;
  }

  /* WHY: Custom elements with display:flex/block don't stretch in grid cells
     without explicit width. This ensures all direct children fill their column. */
  :where(n-header) > :where(*) {
    min-width: 0;
    box-sizing: border-box;
  }

  /* ── Slots ── */

  :where(n-header):has(> [slot="leading"]):has(> [slot="trailing"]) {
    grid-template-columns: auto 1fr minmax(0, auto);
  }

  :where(n-header):has(> [slot="leading"]):not(:has(> [slot="trailing"])) {
    grid-template-columns: auto 1fr;
  }

  :where(n-header):not(:has(> [slot="leading"])):has(> [slot="trailing"]) {
    grid-template-columns: 1fr minmax(0, auto);
  }

  :where(n-header) > :where([slot="leading"]) {
    grid-column: 1;
    display: flex;
    align-items: center;
    gap: calc(var(--n-space) * 2);
  }

  :where(n-header) > :where([slot="label"]),
  :where(n-header) > :where(:not([slot])) {
    min-width: 0;
  }

  :where(n-header) > :where([slot="trailing"]) {
    grid-column: -1;
    display: flex;
    align-items: center;
    gap: calc(var(--n-space) * 2);
    min-width: 0;
    overflow: hidden;
  }

  :where(n-header) > :where([slot="content"]) {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  /* ── Auto-slot (no children declare slot) ── */

  :where(n-header):not(:has(> [slot])):has(> :nth-child(2)):not(:has(> :nth-child(3))) {
    grid-template-columns: 1fr auto;
  }

  :where(n-header):not(:has(> [slot])):has(> :nth-child(3)) {
    grid-template-columns: auto 1fr auto;
  }

  :where(n-header):not(:has(> [slot])):has(> :nth-child(2)) > :last-child {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: calc(var(--n-space) * 2);
  }

  /* ╭──────────────────────────────────────────────────────────╮
     │  <n-footer>                                              │
     │  Generic sub-container footer with grid layout.          │
     │  Mirrors n-header slot structure (leading / trailing).   │
     │  Children stretch by default (matches n-header).         │
     ╰──────────────────────────────────────────────────────────╯ */

  :where(n-footer) {
    --n-pad-block: var(--n-space);
    --n-background: var(--n-panel);

    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    gap: var(--n-pad-gap);
    min-height: calc(var(--n-size) + var(--n-pad-block) * 2);
    padding-block: var(--n-pad-block);
    padding-inline: var(--n-pad-inline);
    min-width: 0;
    background: var(--n-background);

    font-size: var(--n-font-size);
    line-height: var(--n-line-height);
    box-sizing: border-box;
  }

  :where(n-footer) > :where(*) {
    min-width: 0;
    box-sizing: border-box;
  }

  /* ── Slots ── */

  :where(n-footer):has(> [slot="leading"]):has(> [slot="trailing"]) {
    grid-template-columns: auto 1fr minmax(0, auto);
  }

  :where(n-footer):has(> [slot="leading"]):not(:has(> [slot="trailing"])) {
    grid-template-columns: auto 1fr;
  }

  :where(n-footer):not(:has(> [slot="leading"])):has(> [slot="trailing"]) {
    grid-template-columns: 1fr minmax(0, auto);
  }

  :where(n-footer) > :where([slot="leading"]) {
    grid-column: 1;
    display: flex;
    align-items: center;
    gap: calc(var(--n-space) * 2);
  }

  :where(n-footer) > :where([slot="trailing"]) {
    grid-column: -1;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: calc(var(--n-space) * 2);
    min-width: 0;
    overflow: hidden;
  }

  :where(n-footer) > :where([slot="content"]) {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  /* ── Auto-slot (no children declare slot) ── */

  :where(n-footer):not(:has(> [slot])):has(> :nth-child(2)):not(:has(> :nth-child(3))) {
    grid-template-columns: 1fr auto;
  }

  :where(n-footer):not(:has(> [slot])):has(> :nth-child(3)) {
    grid-template-columns: auto 1fr auto;
  }

  :where(n-footer):not(:has(> [slot])):has(> :nth-child(2)) > :last-child {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: calc(var(--n-space) * 2);
  }

  /* ╭──────────────────────────────────────────────────────────╮
     │  <n-aside>                                               │
     │  Collapsible side panel. Animates width on [open].       │
     │  Used by dashboard layout for chat + inspector panels.   │
     ╰──────────────────────────────────────────────────────────╯ */

  :where(n-aside) {
    --n-aside-width: 360px;
    --n-aside-min-width: 280px;

    flex: none;
    position: relative;
    display: none;
    width: 0;
    min-width: 0;
    max-width: 480px;
    overflow: clip;
    padding: 0;
    transition:
      display var(--n-duration) var(--n-easing) allow-discrete,
      width var(--n-duration) var(--n-easing),
      min-width var(--n-duration) var(--n-easing);
  }

  :where(n-aside[open]) {
    display: flex;
    flex-direction: column;
    width: var(--n-aside-width);
    min-width: var(--n-aside-min-width);
  }

  :where(n-aside[resizing]) {
    transition: none;
  }

  /* ── Resize handle ── */

  :where(n-aside) :where(.layout-resize-handle) {
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    cursor: col-resize;
    z-index: 2;
  }

  :where(n-aside) :where(.layout-resize-handle):hover,
  :where(n-aside[resizing]) :where(.layout-resize-handle) {
    background: var(--n-border-muted);
  }

  :where(.layout-resize-handle[popover]) {
    position: fixed;
    inset: unset;
    width: 4px;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    cursor: col-resize;
  }

  :where(.layout-resize-handle[popover]):hover,
  :where(n-aside[resizing]) :where(.layout-resize-handle[popover]) {
    background: var(--n-border-muted);
  }

  :where(.layout-resize-handle[popover]):not(:popover-open) {
    display: none;
  }

  @starting-style {
    :where(n-aside[open]) {
      width: 0;
      min-width: 0;
    }
  }

}

/* ══════════════════════════════════════════════════════════════════
   Attribute API (unlayered)
   Selectors at (0,1,0) — beat layered component defaults.
   ══════════════════════════════════════════════════════════════════ */

/* ── Header ── */

[truncate]:where(n-header) > :where([slot="label"]),
[truncate]:where(n-header) > :where(:not([slot])) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:where(n-header)[align="center"] > :where([slot="label"]),
:where(n-header)[align="center"] > :where(:not([slot])) {
  text-align: center;
}

:where(n-header)[align="end"] > :where([slot="label"]),
:where(n-header)[align="end"] > :where(:not([slot])) {
  text-align: end;
}

:where(n-header)[dividers] {
  position: relative;
}

:where(n-header)[dividers]::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 1px;
  background: var(--n-border-muted);
}

:where(n-header)[sticky] {
  position: sticky;
  top: 0;
  z-index: 1;
  background: inherit;
}

/* ── Footer ── */

:where(n-footer)[dividers] {
  position: relative;
}

:where(n-footer)[dividers]::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  background: var(--n-border-muted);
}

:where(n-footer)[sticky] {
  position: sticky;
  bottom: 0;
  z-index: 1;
  background: inherit;
}

/* ── Padding ── */

[padding="none"] { --n-pad-block: 0; --n-pad-inline: 0; }
[padding="tight"] { --n-pad-block: calc(var(--n-space) * 4); --n-pad-inline: calc(var(--n-space) * 4); }
[padding="regular"] { --n-pad-block: calc(var(--n-space) * 6); --n-pad-inline: calc(var(--n-space) * 6); }
[padding="relaxed"] { --n-pad-block: calc(var(--n-space) * 8); --n-pad-inline: calc(var(--n-space) * 8); }

/* ── Justify ── */

[justify="start"]   { justify-content: flex-start; }
[justify="center"]  { justify-content: center; }
[justify="end"]     { justify-content: flex-end; }
[justify="spread"]  { justify-content: space-between; }
[justify="around"]  { justify-content: space-around; }
[justify="evenly"]  { justify-content: space-evenly; }

/* ── Gap ── */

[gap="0"] { gap: 0; }
[gap="1"] { gap: calc(var(--n-space) * 1); }
[gap="2"] { gap: calc(var(--n-space) * 2); }
[gap="3"] { gap: calc(var(--n-space) * 3); }
[gap="4"] { gap: calc(var(--n-space) * 4); }
[gap="6"] { gap: calc(var(--n-space) * 6); }
[gap="8"] { gap: calc(var(--n-space) * 8); }

/* ── Align ── */

[align="start"]    { align-items: flex-start; }
[align="center"]   { align-items: center; }
[align="end"]      { align-items: flex-end; }
[align="stretch"]  { align-items: stretch; }
[align="baseline"] { align-items: baseline; }