/* defuss-shadcn - optional native layout utilities.
 * .flex / .grid only select a formatting context: no default gap or tracks.
 * .stack / .center / .container / .query and .grid-cols-auto are extensions.
 * Params are instance-owned: nested primitives do not inherit outer configs.
 * Native hidden/closed states are not overridden by display helpers.
 */
@layer components, utilities;

@layer components {
  :where(.flex, .inline-flex, .grid, .inline-grid, .stack, .center) {
    --layout-gap: initial;
  }
  :where(.grid, .inline-grid) { --layout-min: 16rem; }
  :where(.stack) {
    gap: var(--layout-gap, calc(var(--size-base, var(--spacing, 0.25rem)) * 4 * max(0, var(--layout-density, 1))));
    flex-direction: column;
  }
  :where(.flex, .inline-flex, .grid, .inline-grid, .center) {
    gap: var(--layout-gap, 0px);
  }
  :where(.container) {
    --layout-max: 80rem;
    --layout-gutter: calc(var(--size-base, var(--spacing, 0.25rem)) * 4 * max(0, var(--layout-density, 1)));
    box-sizing: border-box;
    inline-size: 100%;
    max-inline-size: var(--layout-max);
    min-inline-size: 0;
    margin-inline: auto;
    padding-inline: var(--layout-gutter);
  }
  :where(.center) { place-items: center; }
  :where(.query) { container: layout / inline-size; }
}

@layer utilities {
  :where(.flex:not([hidden]):not(dialog:not([open])):not([popover]:not(:popover-open)), .stack:not([hidden]):not(dialog:not([open])):not([popover]:not(:popover-open))) { display: flex; }
  :where(.inline-flex:not([hidden]):not(dialog:not([open])):not([popover]:not(:popover-open))) { display: inline-flex; }
  :where(.grid:not([hidden]):not(dialog:not([open])):not([popover]:not(:popover-open)), .center:not([hidden]):not(dialog:not([open])):not([popover]:not(:popover-open))) { display: grid; }
  :where(.inline-grid:not([hidden]):not(dialog:not([open])):not([popover]:not(:popover-open))) { display: inline-grid; }
  :where(.block:not([hidden]):not(dialog:not([open])):not([popover]:not(:popover-open))) { display: block; }
  :where(.inline-block:not([hidden]):not(dialog:not([open])):not([popover]:not(:popover-open))) { display: inline-block; }
  :where(.inline:not([hidden]):not(dialog:not([open])):not([popover]:not(:popover-open))) { display: inline; }
  :where(.hidden) { display: none; }
  :where(.flex-row) { flex-direction: row; }
  :where(.flex-col) { flex-direction: column; }
  :where(.flex-wrap) { flex-wrap: wrap; }
  :where(.flex-nowrap) { flex-wrap: nowrap; }
  :where(.flex-1) { flex: 1 1 0%; }
  :where(.flex-auto) { flex: 1 1 auto; }
  :where(.flex-initial) { flex: 0 1 auto; }
  :where(.flex-none) { flex: none; }
  :where(.grow) { flex-grow: 1; }
  :where(.grow-0) { flex-grow: 0; }
  :where(.shrink) { flex-shrink: 1; }
  :where(.shrink-0) { flex-shrink: 0; }
  :where(.basis-0) { flex-basis: 0px; }
  :where(.basis-auto) { flex-basis: auto; }
  :where(.basis-full) { flex-basis: 100%; }
  :where(.items-start) { align-items: flex-start; }
  :where(.items-end) { align-items: flex-end; }
  :where(.items-center) { align-items: center; }
  :where(.items-baseline) { align-items: baseline; }
  :where(.items-stretch) { align-items: stretch; }
  :where(.justify-start) { justify-content: flex-start; }
  :where(.justify-end) { justify-content: flex-end; }
  :where(.justify-center) { justify-content: center; }
  :where(.justify-between) { justify-content: space-between; }
  :where(.justify-around) { justify-content: space-around; }
  :where(.justify-evenly) { justify-content: space-evenly; }
  :where(.justify-normal) { justify-content: normal; }
  :where(.self-auto) { align-self: auto; }
  :where(.self-start) { align-self: flex-start; }
  :where(.self-end) { align-self: flex-end; }
  :where(.self-center) { align-self: center; }
  :where(.self-baseline) { align-self: baseline; }
  :where(.self-stretch) { align-self: stretch; }
  :where(.content-start) { align-content: flex-start; }
  :where(.content-end) { align-content: flex-end; }
  :where(.content-center) { align-content: center; }
  :where(.content-between) { align-content: space-between; }
  :where(.content-around) { align-content: space-around; }
  :where(.content-evenly) { align-content: space-evenly; }
  :where(.content-stretch) { align-content: stretch; }
  :where(.content-normal) { align-content: normal; }
  :where(.justify-items-start) { justify-items: start; }
  :where(.justify-items-end) { justify-items: end; }
  :where(.justify-items-center) { justify-items: center; }
  :where(.justify-items-stretch) { justify-items: stretch; }
  :where(.justify-self-auto) { justify-self: auto; }
  :where(.justify-self-start) { justify-self: start; }
  :where(.justify-self-end) { justify-self: end; }
  :where(.justify-self-center) { justify-self: center; }
  :where(.justify-self-stretch) { justify-self: stretch; }
  :where(.place-items-start) { place-items: start; }
  :where(.place-items-end) { place-items: end; }
  :where(.place-items-center) { place-items: center; }
  :where(.place-items-stretch) { place-items: stretch; }
  :where(.place-items-baseline) { place-items: baseline; }
  :where(.place-self-auto) { place-self: auto; }
  :where(.place-self-start) { place-self: start; }
  :where(.place-self-end) { place-self: end; }
  :where(.place-self-center) { place-self: center; }
  :where(.place-self-stretch) { place-self: stretch; }

  /* Intrinsic and explicit tracks; no implicit breakpoint generator. */
  :where(.grid-cols-auto) { grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--layout-min, 16rem)), 1fr)); }
  :where(.grid-cols-1) { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  :where(.col-span-1) { grid-column: span 1 / span 1; }
  :where(.grid-cols-2) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :where(.col-span-2) { grid-column: span 2 / span 2; }
  :where(.grid-cols-3) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  :where(.col-span-3) { grid-column: span 3 / span 3; }
  :where(.grid-cols-4) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  :where(.col-span-4) { grid-column: span 4 / span 4; }
  :where(.grid-cols-5) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  :where(.col-span-5) { grid-column: span 5 / span 5; }
  :where(.grid-cols-6) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  :where(.col-span-6) { grid-column: span 6 / span 6; }
  :where(.grid-cols-7) { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  :where(.col-span-7) { grid-column: span 7 / span 7; }
  :where(.grid-cols-8) { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  :where(.col-span-8) { grid-column: span 8 / span 8; }
  :where(.grid-cols-9) { grid-template-columns: repeat(9, minmax(0, 1fr)); }
  :where(.col-span-9) { grid-column: span 9 / span 9; }
  :where(.grid-cols-10) { grid-template-columns: repeat(10, minmax(0, 1fr)); }
  :where(.col-span-10) { grid-column: span 10 / span 10; }
  :where(.grid-cols-11) { grid-template-columns: repeat(11, minmax(0, 1fr)); }
  :where(.col-span-11) { grid-column: span 11 / span 11; }
  :where(.grid-cols-12) { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  :where(.col-span-12) { grid-column: span 12 / span 12; }
  :where(.grid-rows-1) { grid-template-rows: repeat(1, minmax(0, 1fr)); }
  :where(.row-span-1) { grid-row: span 1 / span 1; }
  :where(.grid-rows-2) { grid-template-rows: repeat(2, minmax(0, 1fr)); }
  :where(.row-span-2) { grid-row: span 2 / span 2; }
  :where(.grid-rows-3) { grid-template-rows: repeat(3, minmax(0, 1fr)); }
  :where(.row-span-3) { grid-row: span 3 / span 3; }
  :where(.grid-rows-4) { grid-template-rows: repeat(4, minmax(0, 1fr)); }
  :where(.row-span-4) { grid-row: span 4 / span 4; }
  :where(.grid-rows-5) { grid-template-rows: repeat(5, minmax(0, 1fr)); }
  :where(.row-span-5) { grid-row: span 5 / span 5; }
  :where(.grid-rows-6) { grid-template-rows: repeat(6, minmax(0, 1fr)); }
  :where(.row-span-6) { grid-row: span 6 / span 6; }
  :where(.col-span-full) { grid-column: 1 / -1; }
  :where(.row-span-full) { grid-row: 1 / -1; }
  :where(.grid-cols-none) { grid-template-columns: none; }
  :where(.grid-rows-none) { grid-template-rows: none; }
  :where(.grid-cols-subgrid) { grid-template-columns: subgrid; }
  :where(.grid-rows-subgrid) { grid-template-rows: subgrid; }
  :where(.auto-rows-auto) { grid-auto-rows: auto; }
  :where(.auto-cols-auto) { grid-auto-columns: auto; }

  /* Box clipping/scrolling and text-flow control - orthogonal to gap/track
     selection; the generic pairing for constrained containers (a scrollable
     table on a capped width needs both overflow-x-auto and nowrap cells). */
  :where(.overflow-x-auto) { overflow-x: auto; }
  :where(.overflow-y-auto) { overflow-y: auto; }
  :where(.overflow-auto) { overflow: auto; }
  :where(.overflow-hidden) { overflow: hidden; }
  :where(.overflow-visible) { overflow: visible; }
  :where(.overflow-clip) { overflow: clip; }
  :where(.overflow-x-hidden) { overflow-x: hidden; }
  :where(.overflow-y-hidden) { overflow-y: hidden; }
  /* Text-overflow applies to the block axis of an overflowing line box —
     pair with overflow-hidden (truncate bundles all three parts). */
  :where(.text-ellipsis) { text-overflow: ellipsis; }
  :where(.text-clip) { text-overflow: clip; }
  :where(.truncate) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Overflowing WORDS: break-word/anywhere split on demand, break-all splits
     per character, break-normal restores. `wrap-anywhere` also shrinks
     min-content - the flex min-w-0 companion that lets a long identifier wrap
     inside a shrinkable track. */
  :where(.break-normal) { overflow-wrap: normal; word-break: normal; }
  :where(.break-words) { overflow-wrap: break-word; }
  :where(.break-all) { word-break: break-all; }
  :where(.wrap-anywhere) { overflow-wrap: anywhere; }
  :where(.whitespace-nowrap) { white-space: nowrap; }
  :where(.whitespace-normal) { white-space: normal; }
  :where(.whitespace-pre-wrap) { white-space: pre-wrap; }
}