@nadicodeai/design-system 0.10.2 → 0.12.0

package/dist/css/layout.css

@@ -1,657 +0,0 @@
-/* layout layer — page-system, 12-column field, grid guides, stage scaffolds (renamed from grid.css per D12).
- *
- * Structural-geometry foundation (kept through the Tailwind+shadcn migration; see
- * index.css). This layer owns the kernel grid and the single-owner seam model:
- * every visible border/seam at a given coordinate is drawn by exactly one rule
- * here (the frame owns top+left, one `::after` closes right+bottom; each row owns
- * its own top seam; the first row's top is suppressed so the frame's own top is
- * not doubled). Column spans, row tracks, and seam placement are computed from
- * explicit grid math — `grid-column`/`grid-row` line indices and the
- * `--nc-grid-*` track counts — never hand-placed by eye. Every dimension, gap,
- * and color references an emitted `--nc-*` token; no raw literal lives here. */
-
-/* Responsive token switching (policy per ADR 0005: breakpoints live in the
-   application layer, never in the generated token layer).
-   tokens.generated.css emits faithful per-breakpoint dimension tokens
-   (--nc-<name>-mobile/-tablet/-desktop, 1:1 with the export); these :root
-   aliases collapse each consumed name to the active breakpoint value, exactly
-   reproducing the previous diff-suppressed cascade. Aliases exist ONLY for the
-   10 collapsed names that have real src/css consumers (h-strip joined when
-   image's strip form became its first consumer). The two emitted-but-
-   unconsumed dimension families (h-visual, h-precision) get no alias —
-   an alias nothing reads is noise; their per-breakpoint tokens are still emitted
-   to satisfy the faithful-projection mandate, and a future consumer can add the
-   collapsed alias when it actually needs it. Custom-prop resolution is
-   cascade-global, so these layout-layer aliases resolve for foundation-layer
-   consumers (e.g. .nc-page max-width) regardless of import order. */
-:root {
-  --nc-page-max: var(--nc-page-max-mobile);
-  --nc-cross-size: var(--nc-cross-size-mobile);
-  --nc-h-cell-md: var(--nc-h-cell-md-mobile);
-  --nc-h-cell-lg: var(--nc-h-cell-lg-mobile);
-  --nc-h-hero: var(--nc-h-hero-mobile);
-  --nc-h-strip: var(--nc-h-strip-mobile);
-  --nc-h-action-strip: var(--nc-h-action-strip-mobile);
-  --nc-h-action-body: var(--nc-h-action-body-mobile);
-  --nc-h-feature: var(--nc-h-feature-mobile);
-  --nc-h-editorial-feature: var(--nc-h-editorial-feature-mobile);
-}
-
-@media (min-width: 600px) {
-  :root {
-    --nc-page-max: var(--nc-page-max-tablet);
-    --nc-cross-size: var(--nc-cross-size-tablet);
-    --nc-h-cell-md: var(--nc-h-cell-md-tablet);
-    --nc-h-strip: var(--nc-h-strip-tablet);
-    --nc-h-action-body: var(--nc-h-action-body-tablet);
-    --nc-h-feature: var(--nc-h-feature-tablet);
-    --nc-h-editorial-feature: var(--nc-h-editorial-feature-tablet);
-    /* h-cell-lg, h-hero, h-action-strip have no tablet token — omit, so they
-       inherit the mobile value until desktop (matching the previous cascade). */
-  }
-}
-
-@media (min-width: 960px) {
-  :root {
-    --nc-page-max: var(--nc-page-max-desktop);
-    --nc-cross-size: var(--nc-cross-size-desktop);
-    --nc-h-cell-md: var(--nc-h-cell-md-desktop);
-    --nc-h-cell-lg: var(--nc-h-cell-lg-desktop);
-    --nc-h-hero: var(--nc-h-hero-desktop);
-    --nc-h-strip: var(--nc-h-strip-desktop);
-    --nc-h-action-strip: var(--nc-h-action-strip-desktop);
-    --nc-h-feature: var(--nc-h-feature-desktop);
-    --nc-h-editorial-feature: var(--nc-h-editorial-feature-desktop);
-    /* h-action-body has no desktop token — omit, so it stays at the tablet
-       value (matching the previous cascade). */
-  }
-}
-
-.nc-page-system {
-  width: 100%;
-  padding-inline: var(--nc-page-pad);
-  /* The frame floats clear of the page chrome on both ends: a band of empty
-     canvas above (below the sticky nav) and below (above the footer) — the
-     reference container model, where the bordered module never touches a
-     chrome hairline. {spacing.4xl}, matching the nav's 64px bar. */
-  padding-block: var(--nc-4xl);
-}
-
-.nc-page-frame {
-  position: relative;
-  width: 100%;
-  max-width: var(--nc-frame-max);
-  margin-inline: auto;
-  border-top: var(--nc-guide) solid var(--nc-line);
-  border-left: var(--nc-guide) solid var(--nc-line);
-  background: var(--nc-canvas);
-}
-
-/* Single perimeter closer: the frame owns top+left; one ::after closes the
-   trailing right+bottom edges ONCE. This removes the old border-right (which
-   doubled the right edge) and supplies a single bottom owner for the whole
-   frame, so no coordinate is painted twice. */
-.nc-page-frame::after {
-  content: "";
-  position: absolute;
-  inset: 0;
-  /* Single owner of the right+bottom perimeter. It must paint ABOVE row content
-     (stage-stack z-index:1, index-card z-index:2) so the frame edge stays visible
-     where content reaches it — e.g. a terminal full-bleed row (bento as the last
-     row) whose bottom seam isn't supplied by a following row's border-top. */
-  z-index: 3;
-  border-right: var(--nc-guide) solid var(--nc-line);
-  border-bottom: var(--nc-guide) solid var(--nc-line);
-  pointer-events: none;
-}
-
-.nc-page-row {
-  --nc-row-min-height: var(--nc-h-cell-lg);
-  --nc-row-bleed-surface: var(--nc-canvas);
-  position: relative;
-  display: grid;
-  grid-template-columns: minmax(0, 1fr);
-  min-height: var(--nc-row-min-height);
-  border-top: var(--nc-guide) solid var(--nc-line);
-  background: var(--nc-canvas);
-}
-
-/* Each row owns its own top seam (one owner per inter-row line); the frame's
-   own border-top owns the very top, so suppress the first row's top to avoid
-   doubling it. The last row's bottom is owned by .nc-page-frame::after. */
-.nc-page-frame > .nc-page-row:first-child {
-  border-top: 0;
-}
-
-.nc-page-row[data-nc-bleed="surface"]::before {
-  content: "";
-  position: absolute;
-  z-index: 0;
-  inset-block: 0;
-  left: 50%;
-  width: 100vw;
-  transform: translateX(-50%);
-  background: var(--nc-row-bleed-surface);
-  pointer-events: none;
-}
-
-.nc-page-row[data-nc-bleed="surface"] > * {
-  position: relative;
-  z-index: 1;
-}
-
-.nc-row-lane {
-  display: grid;
-  min-width: 0;
-  min-height: 0;
-}
-
-.nc-row-lane[data-lane="active"],
-.nc-row-lane[data-lane="full"] {
-  grid-column: 1 / -1;
-}
-
-.nc-grid-field {
-  --nc-grid-columns: 1;
-  --nc-grid-rows: 1;
-  --nc-grid-line: var(--nc-line);
-  position: relative;
-  display: grid;
-  grid-template-columns: repeat(var(--nc-grid-columns), minmax(0, 1fr));
-  grid-template-rows: repeat(var(--nc-grid-rows), minmax(0, 1fr));
-  min-width: 0;
-  /* visible so an edge crosshair (a .nc-marker grid child placed on a perimeter
-     track line) is never clipped. A variant that must clip its payload
-     re-asserts overflow:hidden in its recipe. */
-  overflow: visible;
-  background: var(--nc-canvas);
-}
-
-.nc-grid-field[data-grid-field="full-hero"] {
-  --nc-grid-columns: 1;
-  --nc-grid-rows: 2;
-  height: var(--nc-h-hero);
-}
-
-.nc-grid-guides {
-  display: contents;
-  pointer-events: none;
-}
-
-.nc-grid-guide-v,
-.nc-grid-guide-h {
-  position: relative;
-  z-index: 1;
-  display: none;
-  min-width: 0;
-  min-height: 0;
-  pointer-events: none;
-}
-
-.nc-grid-guide-v {
-  grid-column: var(--line);
-  grid-row: 1 / -1;
-  border-left: var(--nc-guide) solid var(--nc-grid-line);
-}
-
-.nc-grid-guide-h {
-  grid-column: 1 / -1;
-  grid-row: var(--line);
-  border-top: var(--nc-guide) solid var(--nc-grid-line);
-}
-
-.nc-grid-slot {
-  position: relative;
-  z-index: 2;
-  min-width: 0;
-}
-
-.nc-side-fill {
-  display: none;
-  min-width: 0;
-  min-height: 0;
-  background: repeating-linear-gradient(
-    125deg,
-    var(--nc-canvas) 0,
-    var(--nc-canvas) 6px,
-    var(--nc-line) 6px,
-    var(--nc-line) 7px
-  );
-}
-
-/* The fill owns its single inner boundary rail so the texture is bounded on
-   both sides — frame perimeter outside, this rail inside. One owner: the lane
-   paints nothing at this coordinate. (Hidden by default; see the quiet-gutter
-   doctrine at the desktop block.) */
-.nc-side-fill[data-side="start"] {
-  grid-column: 1;
-  border-inline-end: var(--nc-guide) solid var(--nc-line);
-}
-
-.nc-side-fill[data-side="end"] {
-  grid-column: 12;
-  border-inline-start: var(--nc-guide) solid var(--nc-line);
-}
-
-.nc-row-grid {
-  display: grid;
-  min-width: 0;
-  background: var(--nc-line);
-  column-gap: var(--nc-guide);
-  row-gap: var(--nc-guide);
-  padding-inline: var(--nc-guide);
-}
-
-/* Gap-only variant for nesting: a hairline grid sitting flush inside an edge
-   another owner already draws (an outer cell-grid's column-gap, or a framed
-   lane's side rail) must contribute internal seams only. Dropping its inline
-   padding removes the perimeter line that would otherwise stack onto the owner's
-   line and render 2px. The base grid already carries no padding-block, so the
-   horizontal edges already defer to the row seams; this closes the vertical pair. */
-.nc-row-grid[data-edges="inner"] {
-  padding-inline: 0;
-}
-
-.nc-row-grid[data-grid="2"],
-.nc-row-grid[data-grid="3"],
-.nc-row-grid[data-grid="4"],
-.nc-row-grid[data-grid="5"],
-.nc-row-grid[data-grid="6"] {
-  grid-template-columns: minmax(0, 1fr);
-}
-
-.nc-index-grid {
-  --nc-index-columns: 1;
-  --nc-index-rows: auto;
-  position: relative;
-  display: grid;
-  grid-template-columns: repeat(var(--nc-index-columns), minmax(0, 1fr));
-  min-width: 0;
-}
-
-.nc-index-guides {
-  position: absolute;
-  inset: 0;
-  z-index: 1;
-  display: grid;
-  grid-template-columns: inherit;
-  pointer-events: none;
-}
-
-.nc-index-guide {
-  min-width: 0;
-  border-right: var(--nc-guide) solid var(--nc-line);
-}
-
-.nc-index-guide:last-child {
-  border-right: 0;
-}
-
-.nc-index-card {
-  position: relative;
-  z-index: 2;
-  display: grid;
-  min-width: 0;
-  min-height: var(--nc-h-cell-lg);
-  padding: var(--nc-cell-padding);
-  align-content: start;
-  gap: 14px;
-  overflow: hidden;
-  background: var(--nc-canvas);
-  color: var(--nc-ink);
-  text-decoration: none;
-}
-
-.nc-index-card[data-featured="true"] {
-  min-height: var(--nc-h-editorial-feature);
-}
-
-.nc-article-shell {
-  display: grid;
-  min-width: 0;
-  background: var(--nc-line);
-  column-gap: var(--nc-guide);
-  row-gap: var(--nc-guide);
-  padding-inline: var(--nc-guide);
-}
-
-.nc-article-header,
-.nc-article-body,
-.nc-article-side,
-.nc-article-footer {
-  display: grid;
-  min-width: 0;
-  padding: var(--nc-cell-padding);
-  gap: 12px;
-  background: var(--nc-canvas);
-}
-
-.nc-article-header {
-  min-height: 280px;
-  align-content: center;
-}
-
-.nc-article-side {
-  color: var(--nc-muted);
-}
-
-.nc-article-footer {
-  background: var(--nc-ink);
-  color: var(--nc-canvas);
-}
-
-.nc-span-12,
-.nc-span-10 {
-  grid-column: 1 / -1;
-}
-
-.nc-stage-frame {
-  --nc-stage-active-column: 1 / -1;
-  --nc-stage-frame-gutter: 0px;
-  --nc-stage-surface: var(--nc-canvas);
-  --nc-stage-frame-color: var(--nc-line);
-  --nc-stage-filler-color: var(--nc-canvas-soft-2);
-  position: relative;
-  min-width: 0;
-  background: var(--nc-stage-surface);
-}
-
-.nc-stage-frame[data-frame-lines="true"]::before,
-.nc-stage-frame[data-frame-lines="true"]::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  z-index: 2;
-  width: var(--nc-guide);
-  background: var(--nc-stage-frame-color);
-  pointer-events: none;
-}
-
-.nc-stage-frame[data-frame-lines="true"]::before {
-  left: 0;
-}
-
-.nc-stage-frame[data-frame-lines="true"]::after {
-  right: 0;
-}
-
-.nc-stage-fill {
-  position: absolute;
-  inset-inline: 0;
-  top: var(--nc-stage-fill-top, 0px);
-  bottom: var(--nc-stage-fill-bottom, 0px);
-  display: grid;
-  grid-template-columns: repeat(12, minmax(0, 1fr));
-  column-gap: var(--nc-stage-frame-gutter);
-  pointer-events: none;
-}
-
-.nc-stage-fill::before,
-.nc-stage-fill::after {
-  content: "";
-  min-width: 0;
-  background:
-    repeating-linear-gradient(
-      125deg,
-      transparent,
-      transparent 6px,
-      var(--nc-stage-filler-color) 6px,
-      var(--nc-stage-filler-color) 7px
-    ),
-    var(--nc-canvas);
-}
-
-.nc-stage-fill::before {
-  grid-column: 1;
-  margin-right: calc(var(--nc-stage-frame-gutter) * -1);
-}
-
-.nc-stage-fill::after {
-  grid-column: 12;
-  margin-left: calc(var(--nc-stage-frame-gutter) * -1);
-}
-
-.nc-stage-stack {
-  position: relative;
-  z-index: 1;
-  min-width: 0;
-}
-
-.nc-stage-grid,
-.nc-connector-strip {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr);
-  column-gap: var(--nc-stage-frame-gutter);
-  min-width: 0;
-}
-
-.nc-stage-active,
-.nc-connector-track {
-  grid-column: var(--nc-stage-active-column);
-}
-
-.nc-connector-strip {
-  height: calc(var(--nc-connector-height, var(--nc-h-action-strip)) + var(--nc-guide));
-}
-
-.nc-connector-strip[data-edge="start"] {
-  border-bottom: var(--nc-guide) solid var(--nc-connector-frame-color, var(--nc-stage-frame-color));
-}
-
-.nc-connector-strip[data-edge="end"] {
-  border-top: var(--nc-guide) solid var(--nc-connector-frame-color, var(--nc-stage-frame-color));
-}
-
-.nc-connector-track {
-  position: relative;
-  display: grid;
-  grid-template-columns: minmax(0, 1fr);
-  gap: 0;
-  height: var(--nc-connector-height, var(--nc-h-action-strip));
-  min-width: 0;
-  padding-inline: var(--nc-guide);
-  overflow: hidden;
-}
-
-.nc-connector-track > div {
-  min-width: 0;
-  height: var(--nc-connector-height, var(--nc-h-action-strip));
-}
-
-.nc-connector-track > div:nth-child(n + 2) {
-  display: none;
-}
-
-.nc-connector-strip svg {
-  color: var(--nc-connector-color, var(--nc-seam));
-  overflow: visible;
-}
-
-.nc-connector-strip line {
-  stroke: currentColor;
-  stroke-dasharray: var(--nc-connector-dash, 4 6);
-  stroke-linecap: round;
-}
-
-.nc-connector-track div svg {
-  display: block;
-  width: var(--nc-guide);
-  height: var(--nc-connector-height, var(--nc-h-action-strip));
-  margin-left: calc(var(--nc-guide) * -1);
-}
-
-.nc-connector-track > svg {
-  position: absolute;
-  top: 0;
-  right: 0;
-  display: block;
-  width: var(--nc-guide);
-  height: var(--nc-connector-height, var(--nc-h-action-strip));
-}
-
-@media (min-width: 600px) {
-  .nc-grid-field[data-grid-field="full-hero"] {
-    --nc-grid-columns: 8;
-    --nc-grid-rows: 4;
-  }
-
-  .nc-grid-guide-v,
-  .nc-grid-guide-h {
-    display: block;
-  }
-
-  .nc-grid-guide-v[data-min="desktop"],
-  .nc-grid-guide-h[data-min="desktop"] {
-    display: none;
-  }
-
-  .nc-row-grid[data-grid="2"],
-  .nc-row-grid[data-grid="3"],
-  .nc-row-grid[data-grid="4"] {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-
-  .nc-row-grid[data-grid="5"],
-  .nc-row-grid[data-grid="6"] {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
-
-  .nc-index-grid {
-    --nc-index-columns: 2;
-  }
-}
-
-@media (min-width: 960px) {
-  .nc-grid-field[data-grid-field="full-hero"] {
-    --nc-grid-columns: 12;
-    --nc-grid-rows: 8;
-  }
-
-  .nc-grid-guide-v,
-  .nc-grid-guide-h,
-  .nc-grid-guide-v[data-min="desktop"],
-  .nc-grid-guide-h[data-min="desktop"] {
-    display: block;
-  }
-
-  .nc-page-row {
-    grid-template-columns: repeat(12, minmax(0, 1fr));
-    column-gap: var(--nc-frame-gap);
-  }
-
-  .nc-row-lane[data-lane="active"] {
-    grid-column: 2 / 12;
-  }
-
-  .nc-row-lane[data-lane="full"] {
-    grid-column: 1 / -1;
-  }
-
-  /* Framed active lane: a single owner for the lane's own left/right hairlines so
-     side framing is a deliberate choice, not a side effect of whichever block
-     sits inside. Scoped to desktop because the active lane is inset (2 / 12) only
-     here; below this breakpoint the lane fills the row and the frame border
-     already owns those edges, so rails would double against it. Framed-lane
-     content must not paint its own perimeter on the same edge — nest a cell-grid
-     as data-edges="inner" so the lane owns the sides and the grid owns the
-     interior seams. */
-  .nc-row-lane[data-lane="active"][data-frame-lines="true"] {
-    position: relative;
-  }
-
-  .nc-row-lane[data-lane="active"][data-frame-lines="true"]::before,
-  .nc-row-lane[data-lane="active"][data-frame-lines="true"]::after {
-    content: "";
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    z-index: 2;
-    width: var(--nc-guide);
-    background: var(--nc-line);
-    pointer-events: none;
-  }
-
-  .nc-row-lane[data-lane="active"][data-frame-lines="true"]::before {
-    left: 0;
-  }
-
-  .nc-row-lane[data-lane="active"][data-frame-lines="true"]::after {
-    right: 0;
-  }
-
-  .nc-stage-frame {
-    --nc-stage-active-column: 2 / 12;
-    --nc-stage-frame-gutter: var(--nc-frame-gap);
-  }
-
-  .nc-stage-grid,
-  .nc-connector-strip {
-    grid-template-columns: repeat(12, minmax(0, 1fr));
-  }
-
-  /* Quiet-gutter doctrine: columns 1 and 12 are empty canvas by default — the
-     whitespace IS the margin (the reference container model: structure lives
-     inside bounded modules, never as page-length gutter texture). The diagonal
-     fill is a scarce structural accent a row opts into with
-     data-rails="hatch"; reserve it for the page's anchor rows (opening hero,
-     closing conversion), where its own inner rail and the frame perimeter
-     bound it on both sides. */
-  .nc-page-row[data-rails="hatch"] .nc-side-fill {
-    display: block;
-  }
-
-  .nc-side-fill[data-side="start"] {
-    margin-right: calc(var(--nc-frame-gap) * -1);
-  }
-
-  .nc-side-fill[data-side="end"] {
-    margin-left: calc(var(--nc-frame-gap) * -1);
-  }
-
-  .nc-row-grid[data-grid="3"] {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
-
-  .nc-row-grid[data-grid="4"] {
-    grid-template-columns: repeat(4, minmax(0, 1fr));
-  }
-
-  .nc-row-grid[data-grid="5"] {
-    grid-template-columns: repeat(5, minmax(0, 1fr));
-  }
-
-  .nc-row-grid[data-grid="6"] {
-    grid-template-columns: repeat(6, minmax(0, 1fr));
-  }
-
-  .nc-index-grid {
-    --nc-index-columns: 3;
-  }
-
-  .nc-index-card[data-featured="true"] {
-    grid-column: span 2;
-  }
-
-  .nc-article-shell {
-    grid-template-columns: repeat(12, minmax(0, 1fr));
-  }
-
-  .nc-article-header,
-  .nc-article-footer {
-    grid-column: 1 / -1;
-  }
-
-  .nc-article-side {
-    grid-column: 1 / 3;
-    grid-row: 2;
-  }
-
-  .nc-article-body {
-    grid-column: 3 / -1;
-  }
-
-  .nc-span-10 {
-    grid-column: 2 / 12;
-  }
-}