layout-style-css 1.1.2 → 2.0.0

package/styles/layout-base.css

@@ -1,539 +0,0 @@
-/*
-  Layout Style Library base primitives.
-  This file owns spatial composition only. Visual paint, typography, borders,
-  shadows, and theme color are intentionally delegated to ui-style-kit-css.
-*/
-
-@layer ly.tokens {
-  :where(.ly-root) {
-    --ly-space-0: 0;
-    --ly-space-1: 0.25rem;
-    --ly-space-2: 0.5rem;
-    --ly-space-3: 0.75rem;
-    --ly-space-4: 1rem;
-    --ly-space-5: 1.5rem;
-    --ly-space-6: 2rem;
-    --ly-space-7: 3rem;
-    --ly-space-8: 4rem;
-    --ly-space-9: 6rem;
-
-    --ly-container-sm: 40rem;
-    --ly-container-md: 56rem;
-    --ly-container-lg: 72rem;
-    --ly-container-xl: 88rem;
-    --ly-container-wide: 112rem;
-    --ly-container-max: var(--ly-container-lg);
-    --ly-content-readable: 68ch;
-
-    --ly-page-padding-inline: clamp(1rem, 4vw, 3rem);
-    --ly-section-padding-block: clamp(3rem, 7vw, 6rem);
-    --ly-gap: var(--ly-space-5);
-    --ly-grid-gap: var(--ly-gap);
-    --ly-stack-gap: var(--ly-space-4);
-    --ly-cluster-gap: var(--ly-space-3);
-
-    --ly-grid-columns: 12;
-    --ly-grid-min: 16rem;
-    --ly-card-grid-min: 16rem;
-    --ly-card-size-sm: 10rem;
-    --ly-card-size-md: 14rem;
-    --ly-card-size-lg: 18rem;
-    --ly-gallery-min: 12rem;
-    --ly-carousel-item-min: 16rem;
-    --ly-carousel-item-max: 28rem;
-    --ly-sidebar-min: 14rem;
-    --ly-sidebar-width: 18rem;
-    --ly-sidebar-max: 22rem;
-    --ly-pane-fixed: 22rem;
-    --ly-header-height: 4.5rem;
-
-    --ly-radius-sm: 0.5rem;
-    --ly-radius: 0.875rem;
-    --ly-radius-lg: 1.5rem;
-    --ly-radius-xl: 2.25rem;
-
-    --ly-z-header: 20;
-    --ly-z-sidebar: 10;
-  }
-}
-
-@layer ly.reset {
-  :where(.ly-root),
-  :where(.ly-root *) {
-    box-sizing: border-box;
-  }
-
-  :where(.ly-root) {
-    min-width: 0;
-    margin: 0;
-  }
-
-  :where(.ly-root img),
-  :where(.ly-root svg),
-  :where(.ly-root video),
-  :where(.ly-root canvas) {
-    max-width: 100%;
-  }
-}
-
-@layer ly.layout {
-  .ly-page {
-    min-height: 100svh;
-  }
-
-  .ly-header,
-  .ly-footer,
-  .ly-main,
-  .ly-wrapper,
-  .ly-section,
-  .ly-surface {
-    min-width: 0;
-  }
-
-  .ly-header {
-    min-height: var(--ly-header-height);
-  }
-
-  .ly-header--sticky {
-    position: sticky;
-    top: 0;
-    z-index: var(--ly-z-header);
-  }
-
-  .ly-container,
-  .ly-wrapper {
-    /* Keep wrappers resilient during viewport resizing without owning visual paint. */
-    width: min(100% - (var(--ly-page-padding-inline) * 2), var(--ly-container-max));
-    margin-inline: auto;
-  }
-
-  .ly-container--sm,
-  .ly-wrapper--sm {
-    --ly-container-max: var(--ly-container-sm);
-  }
-
-  .ly-container--md,
-  .ly-wrapper--md {
-    --ly-container-max: var(--ly-container-md);
-  }
-
-  .ly-container--lg,
-  .ly-wrapper--lg {
-    --ly-container-max: var(--ly-container-lg);
-  }
-
-  .ly-container--xl,
-  .ly-wrapper--xl {
-    --ly-container-max: var(--ly-container-xl);
-  }
-
-  .ly-container--wide,
-  .ly-wrapper--wide {
-    --ly-container-max: var(--ly-container-wide);
-  }
-
-  .ly-container--fluid,
-  .ly-wrapper--fluid {
-    width: 100%;
-    max-width: none;
-    padding-inline: var(--ly-page-padding-inline);
-  }
-
-  .ly-wrapper--readable {
-    --ly-container-max: var(--ly-content-readable);
-  }
-
-  .ly-readable {
-    max-width: var(--ly-content-readable);
-  }
-
-  .ly-section {
-    padding-block: var(--ly-section-padding-block);
-  }
-
-  .ly-section--compact {
-    --ly-section-padding-block: var(--ly-space-7);
-  }
-
-  .ly-section--flush {
-    --ly-section-padding-block: 0;
-  }
-
-  .ly-stack {
-    display: flex;
-    flex-direction: column;
-    gap: var(--ly-stack-gap);
-  }
-
-  .ly-cluster {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: var(--ly-cluster-gap);
-  }
-
-  .ly-button-group {
-    /* Button groups provide flow only; UI libraries keep button paint and states. */
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: var(--ly-cluster-gap);
-  }
-
-  .ly-button-group > * {
-    flex: 0 1 auto;
-    min-width: min(100%, var(--ly-button-min, 8rem));
-  }
-
-  .ly-grid {
-    display: grid;
-    grid-template-columns: repeat(var(--ly-grid-columns), minmax(0, 1fr));
-    gap: var(--ly-grid-gap);
-  }
-
-  .ly-grid--auto {
-    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ly-grid-min)), 1fr));
-  }
-
-  .ly-card-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ly-card-grid-min)), 1fr));
-    gap: var(--ly-grid-gap);
-  }
-
-  .ly-card-grid > * {
-    min-width: 0;
-  }
-
-  .ly-card-sm {
-    min-block-size: var(--ly-card-size-sm);
-  }
-
-  .ly-card-md {
-    min-block-size: var(--ly-card-size-md);
-  }
-
-  .ly-card-lg {
-    min-block-size: var(--ly-card-size-lg);
-  }
-
-  .ly-gallery {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ly-gallery-min)), 1fr));
-    gap: var(--ly-grid-gap);
-  }
-
-  .ly-gallery > * {
-    min-width: 0;
-  }
-
-  .ly-carousel {
-    display: grid;
-    grid-auto-flow: column;
-    grid-auto-columns: minmax(min(100%, var(--ly-carousel-item-min)), var(--ly-carousel-item-max));
-    gap: var(--ly-grid-gap);
-    overflow-x: auto;
-    overscroll-behavior-inline: contain;
-    scroll-snap-type: x proximity;
-  }
-
-  .ly-carousel > * {
-    min-width: 0;
-    scroll-snap-align: start;
-  }
-
-  .ly-row {
-    display: flex;
-    flex-wrap: wrap;
-    margin-inline: calc(var(--ly-gutter, var(--ly-gap)) * -0.5);
-  }
-
-  .ly-col {
-    flex: 1 1 0;
-    min-width: 0;
-    padding-inline: calc(var(--ly-gutter, var(--ly-gap)) * 0.5);
-  }
-
-  .ly-sidebar-layout {
-    display: grid;
-    grid-template-columns: 1fr;
-    gap: var(--ly-gap);
-  }
-
-  .ly-sidebar-layout > * {
-    min-width: 0;
-  }
-
-  .ly-sidebar {
-    min-width: 0;
-  }
-
-  .ly-content {
-    min-width: 0;
-  }
-
-  .ly-split {
-    display: grid;
-    grid-template-columns: 1fr;
-    gap: var(--ly-gap);
-    align-items: var(--ly-split-align, center);
-  }
-
-  .ly-split > * {
-    min-width: 0;
-  }
-
-  .ly-panes {
-    display: grid;
-    grid-template-columns: 1fr;
-    gap: var(--ly-gap);
-  }
-
-  .ly-panes > * {
-    min-width: 0;
-  }
-
-  .ly-surface {
-    border-radius: var(--ly-radius);
-  }
-
-  .ly-surface--raised {
-    border-radius: var(--ly-radius-lg);
-  }
-
-  .ly-divider {
-    min-height: 1px;
-    margin-block: var(--ly-space-5);
-  }
-
-  .ly-frame {
-    aspect-ratio: var(--ly-frame-ratio, 16 / 9);
-    overflow: hidden;
-  }
-
-  .ly-frame > * {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-
-  .ly-scroll-area {
-    min-height: 0;
-    overflow: auto;
-  }
-
-  .ly-app-shell {
-    min-height: 100svh;
-    display: grid;
-    grid-template-areas:
-      "header"
-      "main";
-    grid-template-columns: minmax(0, 1fr);
-    grid-template-rows: auto minmax(0, 1fr);
-  }
-
-  .ly-app-header {
-    grid-area: header;
-    min-width: 0;
-  }
-
-  .ly-app-sidebar {
-    grid-area: sidebar;
-    display: none;
-    min-width: 0;
-  }
-
-  .ly-app-main {
-    grid-area: main;
-    min-width: 0;
-  }
-
-  .ly-visually-hidden {
-    position: absolute !important;
-    width: 1px !important;
-    height: 1px !important;
-    padding: 0 !important;
-    margin: -1px !important;
-    overflow: hidden !important;
-    clip: rect(0, 0, 0, 0) !important;
-    clip-path: inset(50%) !important;
-    white-space: nowrap !important;
-  }
-}
-
-@layer ly.responsive {
-  @media (min-width: 48rem) {
-    /*
-      Fixed support tracks are capped against their container so nested layouts
-      can compress instead of forcing horizontal page overflow.
-    */
-    .ly-app-shell {
-      grid-template-areas:
-        "sidebar header"
-        "sidebar main";
-      grid-template-columns: minmax(min(100%, var(--ly-sidebar-min)), var(--ly-sidebar-width)) minmax(0, 1fr);
-    }
-
-    .ly-app-sidebar {
-      display: block;
-      position: sticky;
-      top: 0;
-      z-index: var(--ly-z-sidebar);
-      height: 100svh;
-      overflow: auto;
-    }
-
-    .ly-sidebar-layout {
-      grid-template-columns: minmax(min(100%, var(--ly-sidebar-min)), var(--ly-sidebar-max)) minmax(0, 1fr);
-      align-items: start;
-    }
-
-    .ly-sidebar-layout--right {
-      grid-template-columns: minmax(0, 1fr) minmax(min(100%, var(--ly-sidebar-min)), var(--ly-sidebar-max));
-    }
-
-    .ly-split {
-      grid-template-columns: minmax(0, var(--ly-split-primary, 1fr)) minmax(0, var(--ly-split-secondary, 1fr));
-    }
-
-    .ly-panes--two {
-      grid-template-columns: minmax(0, 1fr) minmax(min(100%, var(--ly-pane-fixed)), 0.7fr);
-    }
-  }
-
-  @media (min-width: 64rem) {
-    .ly-panes--three {
-      grid-template-columns: minmax(min(100%, 14rem), 0.35fr) minmax(0, 1fr) minmax(min(100%, 14rem), 0.35fr);
-    }
-  }
-}
-
-@layer ly.utilities {
-  .ly-cols-1 { --ly-grid-columns: 1; }
-  .ly-cols-2 { --ly-grid-columns: 2; }
-  .ly-cols-3 { --ly-grid-columns: 3; }
-  .ly-cols-4 { --ly-grid-columns: 4; }
-  .ly-cols-5 { --ly-grid-columns: 5; }
-  .ly-cols-6 { --ly-grid-columns: 6; }
-  .ly-cols-7 { --ly-grid-columns: 7; }
-  .ly-cols-8 { --ly-grid-columns: 8; }
-  .ly-cols-9 { --ly-grid-columns: 9; }
-  .ly-cols-10 { --ly-grid-columns: 10; }
-  .ly-cols-11 { --ly-grid-columns: 11; }
-  .ly-cols-12 { --ly-grid-columns: 12; }
-  .ly-cols-16 { --ly-grid-columns: 16; }
-
-  .ly-span-1 { grid-column: span 1; }
-  .ly-span-2 { grid-column: span 2; }
-  .ly-span-3 { grid-column: span 3; }
-  .ly-span-4 { grid-column: span 4; }
-  .ly-span-5 { grid-column: span 5; }
-  .ly-span-6 { grid-column: span 6; }
-  .ly-span-7 { grid-column: span 7; }
-  .ly-span-8 { grid-column: span 8; }
-  .ly-span-9 { grid-column: span 9; }
-  .ly-span-10 { grid-column: span 10; }
-  .ly-span-11 { grid-column: span 11; }
-  .ly-span-12 { grid-column: span 12; }
-  .ly-span-13 { grid-column: span 13; }
-  .ly-span-14 { grid-column: span 14; }
-  .ly-span-15 { grid-column: span 15; }
-  .ly-span-16 { grid-column: span 16; }
-  .ly-span-full { grid-column: 1 / -1; }
-
-  .ly-col-1 { flex: 0 0 auto; width: 8.333333%; padding-inline: calc(var(--ly-gutter, var(--ly-gap)) * 0.5); }
-  .ly-col-2 { flex: 0 0 auto; width: 16.666667%; padding-inline: calc(var(--ly-gutter, var(--ly-gap)) * 0.5); }
-  .ly-col-3 { flex: 0 0 auto; width: 25%; padding-inline: calc(var(--ly-gutter, var(--ly-gap)) * 0.5); }
-  .ly-col-4 { flex: 0 0 auto; width: 33.333333%; padding-inline: calc(var(--ly-gutter, var(--ly-gap)) * 0.5); }
-  .ly-col-5 { flex: 0 0 auto; width: 41.666667%; padding-inline: calc(var(--ly-gutter, var(--ly-gap)) * 0.5); }
-  .ly-col-6 { flex: 0 0 auto; width: 50%; padding-inline: calc(var(--ly-gutter, var(--ly-gap)) * 0.5); }
-  .ly-col-7 { flex: 0 0 auto; width: 58.333333%; padding-inline: calc(var(--ly-gutter, var(--ly-gap)) * 0.5); }
-  .ly-col-8 { flex: 0 0 auto; width: 66.666667%; padding-inline: calc(var(--ly-gutter, var(--ly-gap)) * 0.5); }
-  .ly-col-9 { flex: 0 0 auto; width: 75%; padding-inline: calc(var(--ly-gutter, var(--ly-gap)) * 0.5); }
-  .ly-col-10 { flex: 0 0 auto; width: 83.333333%; padding-inline: calc(var(--ly-gutter, var(--ly-gap)) * 0.5); }
-  .ly-col-11 { flex: 0 0 auto; width: 91.666667%; padding-inline: calc(var(--ly-gutter, var(--ly-gap)) * 0.5); }
-  .ly-col-12 { flex: 0 0 auto; width: 100%; padding-inline: calc(var(--ly-gutter, var(--ly-gap)) * 0.5); }
-
-  .ly-gap-0 { --ly-gap: var(--ly-space-0); --ly-grid-gap: var(--ly-space-0); --ly-stack-gap: var(--ly-space-0); --ly-cluster-gap: var(--ly-space-0); }
-  .ly-gap-1 { --ly-gap: var(--ly-space-1); --ly-grid-gap: var(--ly-space-1); --ly-stack-gap: var(--ly-space-1); --ly-cluster-gap: var(--ly-space-1); }
-  .ly-gap-2 { --ly-gap: var(--ly-space-2); --ly-grid-gap: var(--ly-space-2); --ly-stack-gap: var(--ly-space-2); --ly-cluster-gap: var(--ly-space-2); }
-  .ly-gap-3 { --ly-gap: var(--ly-space-3); --ly-grid-gap: var(--ly-space-3); --ly-stack-gap: var(--ly-space-3); --ly-cluster-gap: var(--ly-space-3); }
-  .ly-gap-4 { --ly-gap: var(--ly-space-4); --ly-grid-gap: var(--ly-space-4); --ly-stack-gap: var(--ly-space-4); --ly-cluster-gap: var(--ly-space-4); }
-  .ly-gap-5 { --ly-gap: var(--ly-space-5); --ly-grid-gap: var(--ly-space-5); --ly-stack-gap: var(--ly-space-5); --ly-cluster-gap: var(--ly-space-5); }
-  .ly-gap-6 { --ly-gap: var(--ly-space-6); --ly-grid-gap: var(--ly-space-6); --ly-stack-gap: var(--ly-space-6); --ly-cluster-gap: var(--ly-space-6); }
-  .ly-gap-7 { --ly-gap: var(--ly-space-7); --ly-grid-gap: var(--ly-space-7); --ly-stack-gap: var(--ly-space-7); --ly-cluster-gap: var(--ly-space-7); }
-  .ly-gap-8 { --ly-gap: var(--ly-space-8); --ly-grid-gap: var(--ly-space-8); --ly-stack-gap: var(--ly-space-8); --ly-cluster-gap: var(--ly-space-8); }
-  .ly-gap-9 { --ly-gap: var(--ly-space-9); --ly-grid-gap: var(--ly-space-9); --ly-stack-gap: var(--ly-space-9); --ly-cluster-gap: var(--ly-space-9); }
-
-  .ly-pad-0 { padding: var(--ly-space-0); }
-  .ly-pad-1 { padding: var(--ly-space-1); }
-  .ly-pad-2 { padding: var(--ly-space-2); }
-  .ly-pad-3 { padding: var(--ly-space-3); }
-  .ly-pad-4 { padding: var(--ly-space-4); }
-  .ly-pad-5 { padding: var(--ly-space-5); }
-  .ly-pad-6 { padding: var(--ly-space-6); }
-  .ly-pad-7 { padding: var(--ly-space-7); }
-  .ly-pad-8 { padding: var(--ly-space-8); }
-  .ly-pad-9 { padding: var(--ly-space-9); }
-
-  .ly-px-4 { padding-inline: var(--ly-space-4); }
-  .ly-px-6 { padding-inline: var(--ly-space-6); }
-  .ly-px-8 { padding-inline: var(--ly-space-8); }
-  .ly-py-4 { padding-block: var(--ly-space-4); }
-  .ly-py-6 { padding-block: var(--ly-space-6); }
-  .ly-py-8 { padding-block: var(--ly-space-8); }
-
-  .ly-mx-auto { margin-inline: auto; }
-  .ly-w-full { width: 100%; }
-  .ly-h-full { height: 100%; }
-  .ly-min-h-screen { min-height: 100svh; }
-  .ly-bleed { width: 100vw; margin-inline: calc(50% - 50vw); }
-  .ly-overflow-auto { overflow: auto; }
-  .ly-overflow-hidden { overflow: hidden; }
-
-  .ly-items-start { align-items: flex-start; }
-  .ly-items-center { align-items: center; }
-  .ly-items-end { align-items: flex-end; }
-  .ly-items-stretch { align-items: stretch; }
-  .ly-justify-start { justify-content: flex-start; }
-  .ly-justify-center { justify-content: center; }
-  .ly-justify-end { justify-content: flex-end; }
-  .ly-justify-between { justify-content: space-between; }
-
-  .ly-frame-1x1 { --ly-frame-ratio: 1 / 1; }
-  .ly-frame-2x1 { --ly-frame-ratio: 2 / 1; }
-  .ly-frame-3x2 { --ly-frame-ratio: 3 / 2; }
-  .ly-frame-4x3 { --ly-frame-ratio: 4 / 3; }
-  .ly-frame-16x9 { --ly-frame-ratio: 16 / 9; }
-  .ly-frame-21x9 { --ly-frame-ratio: 21 / 9; }
-
-  .ly-hidden { display: none !important; }
-  .ly-show-md-up,
-  .ly-show-lg-up {
-    display: none !important;
-  }
-
-  @media (min-width: 48rem) {
-    .ly-md-cols-1 { --ly-grid-columns: 1; }
-    .ly-md-cols-2 { --ly-grid-columns: 2; }
-    .ly-md-cols-3 { --ly-grid-columns: 3; }
-    .ly-md-cols-4 { --ly-grid-columns: 4; }
-    .ly-md-cols-6 { --ly-grid-columns: 6; }
-    .ly-md-cols-8 { --ly-grid-columns: 8; }
-    .ly-md-cols-12 { --ly-grid-columns: 12; }
-    .ly-md-cols-16 { --ly-grid-columns: 16; }
-    .ly-show-md-up { display: revert !important; }
-  }
-
-  @media (min-width: 64rem) {
-    .ly-lg-cols-1 { --ly-grid-columns: 1; }
-    .ly-lg-cols-2 { --ly-grid-columns: 2; }
-    .ly-lg-cols-3 { --ly-grid-columns: 3; }
-    .ly-lg-cols-4 { --ly-grid-columns: 4; }
-    .ly-lg-cols-6 { --ly-grid-columns: 6; }
-    .ly-lg-cols-8 { --ly-grid-columns: 8; }
-    .ly-lg-cols-12 { --ly-grid-columns: 12; }
-    .ly-lg-cols-16 { --ly-grid-columns: 16; }
-    .ly-show-lg-up { display: revert !important; }
-  }
-}

package/styles/layout-style-bauhaus.css

@@ -1,70 +0,0 @@
-/*
-  Layout style: bauhaus.
-  Strict framed column shell with structural rails and measured offsets. Visual
-  identity remains owned by ui-style-kit-css.
-*/
-
-@layer ly.styles.bauhaus {
-  :where(.ly-root[data-layout="bauhaus"], .ly-root[layout-style="bauhaus"], .ly-root.ly-layout-bauhaus, .ly-root.ly-style-bauhaus) {
-    --ly-container-max: 92rem;
-    --ly-page-padding-inline: clamp(1rem, 2vw, 2rem);
-    --ly-section-padding-block: clamp(2.5rem, 5vw, 4.5rem);
-    --ly-sidebar-width: clamp(8rem, 12vw, 12rem);
-    --ly-grid-min: 13rem;
-    --ly-gap: clamp(0.75rem, 1.6vw, 1.25rem);
-    --ly-grid-gap: var(--ly-gap);
-    --ly-stack-gap: clamp(0.75rem, 1.5vw, 1.25rem);
-  }
-
-  :where(.ly-root[data-layout="bauhaus"], .ly-root[layout-style="bauhaus"], .ly-root.ly-layout-bauhaus, .ly-root.ly-style-bauhaus) .ly-app-main {
-    padding-block: clamp(0.75rem, 2vw, 1.5rem);
-  }
-
-  :where(.ly-root[data-layout="bauhaus"], .ly-root[layout-style="bauhaus"], .ly-root.ly-layout-bauhaus, .ly-root.ly-style-bauhaus) .ly-container,
-  :where(.ly-root[data-layout="bauhaus"], .ly-root[layout-style="bauhaus"], .ly-root.ly-layout-bauhaus, .ly-root.ly-style-bauhaus) .ly-wrapper {
-    width: min(100% - var(--ly-page-padding-inline), var(--ly-container-max));
-  }
-
-  :where(.ly-root[data-layout="bauhaus"], .ly-root[layout-style="bauhaus"], .ly-root.ly-layout-bauhaus, .ly-root.ly-style-bauhaus) .ly-section {
-    padding-block: var(--ly-section-padding-block);
-  }
-
-  :where(.ly-root[data-layout="bauhaus"], .ly-root[layout-style="bauhaus"], .ly-root.ly-layout-bauhaus, .ly-root.ly-style-bauhaus) .ly-grid--auto {
-    grid-auto-rows: minmax(7rem, auto);
-  }
-
-  @media (min-width: 48rem) {
-    :where(.ly-root[data-layout="bauhaus"], .ly-root[layout-style="bauhaus"], .ly-root.ly-layout-bauhaus, .ly-root.ly-style-bauhaus) .ly-app-shell {
-      grid-template-areas:
-        "sidebar header"
-        "sidebar main";
-      grid-template-columns: minmax(min(100%, 7rem), 0.18fr) minmax(0, 1fr);
-    }
-
-    :where(.ly-root[data-layout="bauhaus"], .ly-root[layout-style="bauhaus"], .ly-root.ly-layout-bauhaus, .ly-root.ly-style-bauhaus) .ly-app-sidebar {
-      display: block;
-      position: sticky;
-      top: 0;
-      height: 100svh;
-      overflow: auto;
-    }
-
-    :where(.ly-root[data-layout="bauhaus"], .ly-root[layout-style="bauhaus"], .ly-root.ly-layout-bauhaus, .ly-root.ly-style-bauhaus) .ly-sidebar-layout {
-      grid-template-columns: minmax(min(100%, 8rem), 0.22fr) minmax(0, 1fr);
-    }
-
-    :where(.ly-root[data-layout="bauhaus"], .ly-root[layout-style="bauhaus"], .ly-root.ly-layout-bauhaus, .ly-root.ly-style-bauhaus) .ly-split {
-      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
-    }
-
-    :where(.ly-root[data-layout="bauhaus"], .ly-root[layout-style="bauhaus"], .ly-root.ly-layout-bauhaus, .ly-root.ly-style-bauhaus) .ly-panes--two {
-      grid-template-columns: minmax(0, 1fr) minmax(min(100%, 12rem), 0.5fr);
-    }
-  }
-
-  @media (min-width: 80rem) {
-    :where(.ly-root[data-layout="bauhaus"], .ly-root[layout-style="bauhaus"], .ly-root.ly-layout-bauhaus, .ly-root.ly-style-bauhaus) .ly-panes--three {
-      grid-template-columns: minmax(min(100%, 10rem), 0.25fr) minmax(0, 1fr) minmax(min(100%, 10rem), 0.25fr);
-    }
-  }
-}

package/styles/layout-style-bento.css

@@ -1,76 +0,0 @@
-/*
-  Layout style: bento.
-  Modular dashboard shell with staged mosaic zones. Visual identity remains
-  owned by ui-style-kit-css.
-*/
-
-@layer ly.styles.bento {
-  :where(.ly-root[data-layout="bento"], .ly-root[layout-style="bento"], .ly-root.ly-layout-bento, .ly-root.ly-style-bento) {
-    --ly-container-max: 104rem;
-    --ly-page-padding-inline: clamp(1rem, 3.5vw, 3rem);
-    --ly-section-padding-block: clamp(2rem, 6vw, 5rem);
-    --ly-sidebar-width: clamp(13rem, 16vw, 17rem);
-    --ly-grid-min: 14rem;
-    --ly-gap: clamp(1rem, 2.5vw, 2rem);
-    --ly-grid-gap: var(--ly-gap);
-    --ly-stack-gap: clamp(1rem, 2vw, 1.75rem);
-  }
-
-  :where(.ly-root[data-layout="bento"], .ly-root[layout-style="bento"], .ly-root.ly-layout-bento, .ly-root.ly-style-bento) .ly-app-main {
-    padding-block: clamp(1rem, 3vw, 2.5rem);
-  }
-
-  :where(.ly-root[data-layout="bento"], .ly-root[layout-style="bento"], .ly-root.ly-layout-bento, .ly-root.ly-style-bento) .ly-container,
-  :where(.ly-root[data-layout="bento"], .ly-root[layout-style="bento"], .ly-root.ly-layout-bento, .ly-root.ly-style-bento) .ly-wrapper {
-    width: min(100% - var(--ly-page-padding-inline), var(--ly-container-max));
-  }
-
-  :where(.ly-root[data-layout="bento"], .ly-root[layout-style="bento"], .ly-root.ly-layout-bento, .ly-root.ly-style-bento) .ly-section {
-    padding-block: var(--ly-section-padding-block);
-  }
-
-  :where(.ly-root[data-layout="bento"], .ly-root[layout-style="bento"], .ly-root.ly-layout-bento, .ly-root.ly-style-bento) .ly-grid--auto {
-    grid-auto-rows: minmax(9rem, auto);
-  }
-
-  @media (min-width: 48rem) {
-    :where(.ly-root[data-layout="bento"], .ly-root[layout-style="bento"], .ly-root.ly-layout-bento, .ly-root.ly-style-bento) .ly-app-shell {
-      grid-template-areas:
-        "sidebar header"
-        "sidebar main";
-      grid-template-columns: minmax(min(100%, 13rem), 0.26fr) minmax(0, 1fr);
-    }
-
-    :where(.ly-root[data-layout="bento"], .ly-root[layout-style="bento"], .ly-root.ly-layout-bento, .ly-root.ly-style-bento) .ly-app-sidebar {
-      display: block;
-      position: sticky;
-      top: var(--ly-space-3);
-      height: calc(100svh - (var(--ly-space-3) * 2));
-      margin: var(--ly-space-3) 0 var(--ly-space-3) var(--ly-space-3);
-      overflow: auto;
-    }
-
-    :where(.ly-root[data-layout="bento"], .ly-root[layout-style="bento"], .ly-root.ly-layout-bento, .ly-root.ly-style-bento) .ly-grid--auto > :nth-child(4n + 1) {
-      grid-column: span 2;
-      min-height: 14rem;
-    }
-
-    :where(.ly-root[data-layout="bento"], .ly-root[layout-style="bento"], .ly-root.ly-layout-bento, .ly-root.ly-style-bento) .ly-sidebar-layout {
-      grid-template-columns: minmax(min(100%, 12rem), 0.3fr) minmax(0, 1fr);
-    }
-
-    :where(.ly-root[data-layout="bento"], .ly-root[layout-style="bento"], .ly-root.ly-layout-bento, .ly-root.ly-style-bento) .ly-split {
-      grid-template-columns: minmax(0, 0.78fr) minmax(min(100%, 18rem), 1.22fr);
-    }
-
-    :where(.ly-root[data-layout="bento"], .ly-root[layout-style="bento"], .ly-root.ly-layout-bento, .ly-root.ly-style-bento) .ly-panes--two {
-      grid-template-columns: minmax(0, 1.18fr) minmax(min(100%, 18rem), 0.82fr);
-    }
-  }
-
-  @media (min-width: 80rem) {
-    :where(.ly-root[data-layout="bento"], .ly-root[layout-style="bento"], .ly-root.ly-layout-bento, .ly-root.ly-style-bento) .ly-panes--three {
-      grid-template-columns: minmax(min(100%, 12rem), 0.6fr) minmax(0, 1.4fr) minmax(min(100%, 14rem), 0.8fr);
-    }
-  }
-}