layout-style-css 1.1.2 → 2.0.0

package/styles/layout-style-brutalism.css

@@ -1,70 +0,0 @@
-/*
-  Layout style: brutalism.
-  Full-bleed slab shell with abrupt section breaks and compressed rails. Visual
-  identity remains owned by ui-style-kit-css.
-*/
-
-@layer ly.styles.brutalism {
-  :where(.ly-root[data-layout="brutalism"], .ly-root[layout-style="brutalism"], .ly-root.ly-layout-brutalism, .ly-root.ly-style-brutalism) {
-    --ly-container-max: 100vw;
-    --ly-page-padding-inline: clamp(0.75rem, 3vw, 3rem);
-    --ly-section-padding-block: clamp(2rem, 6vw, 5rem);
-    --ly-sidebar-width: clamp(12rem, 15vw, 16rem);
-    --ly-grid-min: 12rem;
-    --ly-gap: clamp(0.75rem, 2vw, 1.5rem);
-    --ly-grid-gap: var(--ly-gap);
-    --ly-stack-gap: clamp(0.75rem, 2vw, 1.5rem);
-  }
-
-  :where(.ly-root[data-layout="brutalism"], .ly-root[layout-style="brutalism"], .ly-root.ly-layout-brutalism, .ly-root.ly-style-brutalism) .ly-app-main {
-    padding-block: 0;
-  }
-
-  :where(.ly-root[data-layout="brutalism"], .ly-root[layout-style="brutalism"], .ly-root.ly-layout-brutalism, .ly-root.ly-style-brutalism) .ly-container,
-  :where(.ly-root[data-layout="brutalism"], .ly-root[layout-style="brutalism"], .ly-root.ly-layout-brutalism, .ly-root.ly-style-brutalism) .ly-wrapper {
-    width: min(100%, var(--ly-container-max));
-  }
-
-  :where(.ly-root[data-layout="brutalism"], .ly-root[layout-style="brutalism"], .ly-root.ly-layout-brutalism, .ly-root.ly-style-brutalism) .ly-section {
-    padding-block: var(--ly-section-padding-block);
-  }
-
-  :where(.ly-root[data-layout="brutalism"], .ly-root[layout-style="brutalism"], .ly-root.ly-layout-brutalism, .ly-root.ly-style-brutalism) .ly-grid--auto {
-    grid-auto-rows: minmax(7rem, auto);
-  }
-
-  @media (min-width: 48rem) {
-    :where(.ly-root[data-layout="brutalism"], .ly-root[layout-style="brutalism"], .ly-root.ly-layout-brutalism, .ly-root.ly-style-brutalism) .ly-app-shell {
-      grid-template-areas:
-        "header header"
-        "main sidebar";
-      grid-template-columns: minmax(0, 1fr) minmax(min(100%, 12rem), 0.22fr);
-    }
-
-    :where(.ly-root[data-layout="brutalism"], .ly-root[layout-style="brutalism"], .ly-root.ly-layout-brutalism, .ly-root.ly-style-brutalism) .ly-app-sidebar {
-      display: block;
-      position: sticky;
-      top: 0;
-      height: 100svh;
-      overflow: auto;
-    }
-
-    :where(.ly-root[data-layout="brutalism"], .ly-root[layout-style="brutalism"], .ly-root.ly-layout-brutalism, .ly-root.ly-style-brutalism) .ly-sidebar-layout {
-      grid-template-columns: minmax(0, 1.55fr) minmax(min(100%, 12rem), 0.45fr);
-    }
-
-    :where(.ly-root[data-layout="brutalism"], .ly-root[layout-style="brutalism"], .ly-root.ly-layout-brutalism, .ly-root.ly-style-brutalism) .ly-split {
-      grid-template-columns: minmax(0, 1.7fr) minmax(min(100%, 12rem), 0.3fr);
-    }
-
-    :where(.ly-root[data-layout="brutalism"], .ly-root[layout-style="brutalism"], .ly-root.ly-layout-brutalism, .ly-root.ly-style-brutalism) .ly-panes--two {
-      grid-template-columns: minmax(min(100%, 12rem), 0.35fr) minmax(0, 1.65fr);
-    }
-  }
-
-  @media (min-width: 80rem) {
-    :where(.ly-root[data-layout="brutalism"], .ly-root[layout-style="brutalism"], .ly-root.ly-layout-brutalism, .ly-root.ly-style-brutalism) .ly-panes--three {
-      grid-template-columns: minmax(min(100%, 11rem), 0.28fr) minmax(0, 1.42fr) minmax(min(100%, 14rem), 0.4fr);
-    }
-  }
-}

package/styles/layout-style-cyberpunk.css

@@ -1,70 +0,0 @@
-/*
-  Layout style: cyberpunk.
-  Narrow utility rail with dense command workspace and compact gutters. Visual
-  identity remains owned by ui-style-kit-css.
-*/
-
-@layer ly.styles.cyberpunk {
-  :where(.ly-root[data-layout="cyberpunk"], .ly-root[layout-style="cyberpunk"], .ly-root.ly-layout-cyberpunk, .ly-root.ly-style-cyberpunk) {
-    --ly-container-max: 104rem;
-    --ly-page-padding-inline: clamp(0.75rem, 2vw, 2rem);
-    --ly-section-padding-block: clamp(2rem, 5vw, 4rem);
-    --ly-sidebar-width: clamp(10rem, 12vw, 12.5rem);
-    --ly-grid-min: 12rem;
-    --ly-gap: clamp(0.75rem, 1.8vw, 1.25rem);
-    --ly-grid-gap: var(--ly-gap);
-    --ly-stack-gap: clamp(0.75rem, 1.5vw, 1.25rem);
-  }
-
-  :where(.ly-root[data-layout="cyberpunk"], .ly-root[layout-style="cyberpunk"], .ly-root.ly-layout-cyberpunk, .ly-root.ly-style-cyberpunk) .ly-app-main {
-    padding-block: clamp(0.75rem, 2vw, 1.5rem);
-  }
-
-  :where(.ly-root[data-layout="cyberpunk"], .ly-root[layout-style="cyberpunk"], .ly-root.ly-layout-cyberpunk, .ly-root.ly-style-cyberpunk) .ly-container,
-  :where(.ly-root[data-layout="cyberpunk"], .ly-root[layout-style="cyberpunk"], .ly-root.ly-layout-cyberpunk, .ly-root.ly-style-cyberpunk) .ly-wrapper {
-    width: min(100% - var(--ly-page-padding-inline), var(--ly-container-max));
-  }
-
-  :where(.ly-root[data-layout="cyberpunk"], .ly-root[layout-style="cyberpunk"], .ly-root.ly-layout-cyberpunk, .ly-root.ly-style-cyberpunk) .ly-section {
-    padding-block: var(--ly-section-padding-block);
-  }
-
-  :where(.ly-root[data-layout="cyberpunk"], .ly-root[layout-style="cyberpunk"], .ly-root.ly-layout-cyberpunk, .ly-root.ly-style-cyberpunk) .ly-grid--auto {
-    grid-auto-rows: minmax(7rem, auto);
-  }
-
-  @media (min-width: 48rem) {
-    :where(.ly-root[data-layout="cyberpunk"], .ly-root[layout-style="cyberpunk"], .ly-root.ly-layout-cyberpunk, .ly-root.ly-style-cyberpunk) .ly-app-shell {
-      grid-template-areas:
-        "sidebar header"
-        "sidebar main";
-      grid-template-columns: minmax(min(100%, var(--ly-sidebar-width)), var(--ly-sidebar-width)) minmax(0, 1fr);
-    }
-
-    :where(.ly-root[data-layout="cyberpunk"], .ly-root[layout-style="cyberpunk"], .ly-root.ly-layout-cyberpunk, .ly-root.ly-style-cyberpunk) .ly-app-sidebar {
-      display: block;
-      position: sticky;
-      top: 0;
-      height: 100svh;
-      overflow: auto;
-    }
-
-    :where(.ly-root[data-layout="cyberpunk"], .ly-root[layout-style="cyberpunk"], .ly-root.ly-layout-cyberpunk, .ly-root.ly-style-cyberpunk) .ly-sidebar-layout {
-      grid-template-columns: minmax(min(100%, 10rem), 0.24fr) minmax(0, 1fr);
-    }
-
-    :where(.ly-root[data-layout="cyberpunk"], .ly-root[layout-style="cyberpunk"], .ly-root.ly-layout-cyberpunk, .ly-root.ly-style-cyberpunk) .ly-split {
-      grid-template-columns: minmax(0, 1.2fr) minmax(min(100%, 16rem), 0.8fr);
-    }
-
-    :where(.ly-root[data-layout="cyberpunk"], .ly-root[layout-style="cyberpunk"], .ly-root.ly-layout-cyberpunk, .ly-root.ly-style-cyberpunk) .ly-panes--two {
-      grid-template-columns: minmax(0, 1fr) minmax(min(100%, 15rem), 0.38fr);
-    }
-  }
-
-  @media (min-width: 80rem) {
-    :where(.ly-root[data-layout="cyberpunk"], .ly-root[layout-style="cyberpunk"], .ly-root.ly-layout-cyberpunk, .ly-root.ly-style-cyberpunk) .ly-panes--three {
-      grid-template-columns: minmax(min(100%, 10rem), 0.24fr) minmax(0, 1fr) minmax(min(100%, 16rem), 0.38fr);
-    }
-  }
-}

package/styles/layout-style-f-pattern.css

@@ -1,76 +0,0 @@
-/*
-  Layout style: f-pattern.
-  Top-led scan path with a persistent left rail and heavier early content rows.
-  Visual identity remains owned by ui-style-kit-css.
-*/
-
-@layer ly.styles.f_pattern {
-  :where(.ly-root[data-layout="f-pattern"], .ly-root[layout-style="f-pattern"], .ly-root.ly-layout-f-pattern, .ly-root.ly-style-f-pattern) {
-    --ly-container-max: 94rem;
-    --ly-page-padding-inline: clamp(1rem, 3vw, 2.75rem);
-    --ly-section-padding-block: clamp(2rem, 5vw, 4.5rem);
-    --ly-sidebar-width: clamp(13rem, 19vw, 20rem);
-    --ly-grid-min: 15rem;
-    --ly-gap: clamp(1rem, 2.25vw, 1.85rem);
-    --ly-grid-gap: var(--ly-gap);
-    --ly-stack-gap: clamp(0.875rem, 1.8vw, 1.45rem);
-  }
-
-  :where(.ly-root[data-layout="f-pattern"], .ly-root[layout-style="f-pattern"], .ly-root.ly-layout-f-pattern, .ly-root.ly-style-f-pattern) .ly-app-main {
-    padding-block: clamp(0.75rem, 2vw, 2rem);
-  }
-
-  :where(.ly-root[data-layout="f-pattern"], .ly-root[layout-style="f-pattern"], .ly-root.ly-layout-f-pattern, .ly-root.ly-style-f-pattern) .ly-container,
-  :where(.ly-root[data-layout="f-pattern"], .ly-root[layout-style="f-pattern"], .ly-root.ly-layout-f-pattern, .ly-root.ly-style-f-pattern) .ly-wrapper {
-    width: min(100% - var(--ly-page-padding-inline), var(--ly-container-max));
-  }
-
-  :where(.ly-root[data-layout="f-pattern"], .ly-root[layout-style="f-pattern"], .ly-root.ly-layout-f-pattern, .ly-root.ly-style-f-pattern) .ly-section {
-    padding-block: var(--ly-section-padding-block);
-  }
-
-  :where(.ly-root[data-layout="f-pattern"], .ly-root[layout-style="f-pattern"], .ly-root.ly-layout-f-pattern, .ly-root.ly-style-f-pattern) .ly-grid--auto {
-    grid-auto-rows: minmax(8rem, auto);
-  }
-
-  @media (min-width: 48rem) {
-    :where(.ly-root[data-layout="f-pattern"], .ly-root[layout-style="f-pattern"], .ly-root.ly-layout-f-pattern, .ly-root.ly-style-f-pattern) .ly-app-shell {
-      grid-template-areas:
-        "header header"
-        "sidebar main";
-      grid-template-columns: minmax(min(100%, 13rem), 0.3fr) minmax(0, 1fr);
-      grid-template-rows: auto 1fr;
-    }
-
-    :where(.ly-root[data-layout="f-pattern"], .ly-root[layout-style="f-pattern"], .ly-root.ly-layout-f-pattern, .ly-root.ly-style-f-pattern) .ly-app-sidebar {
-      display: block;
-      position: sticky;
-      top: 0;
-      height: 100svh;
-      overflow: auto;
-    }
-
-    :where(.ly-root[data-layout="f-pattern"], .ly-root[layout-style="f-pattern"], .ly-root.ly-layout-f-pattern, .ly-root.ly-style-f-pattern) .ly-grid--auto > :nth-child(3n + 1) {
-      grid-column: span 2;
-      min-height: 13rem;
-    }
-
-    :where(.ly-root[data-layout="f-pattern"], .ly-root[layout-style="f-pattern"], .ly-root.ly-layout-f-pattern, .ly-root.ly-style-f-pattern) .ly-sidebar-layout {
-      grid-template-columns: minmax(min(100%, 14rem), 0.34fr) minmax(0, 1fr);
-    }
-
-    :where(.ly-root[data-layout="f-pattern"], .ly-root[layout-style="f-pattern"], .ly-root.ly-layout-f-pattern, .ly-root.ly-style-f-pattern) .ly-split {
-      grid-template-columns: minmax(0, 1.35fr) minmax(min(100%, 18rem), 0.65fr);
-    }
-
-    :where(.ly-root[data-layout="f-pattern"], .ly-root[layout-style="f-pattern"], .ly-root.ly-layout-f-pattern, .ly-root.ly-style-f-pattern) .ly-panes--two {
-      grid-template-columns: minmax(min(100%, 15rem), 0.38fr) minmax(0, 1fr);
-    }
-  }
-
-  @media (min-width: 80rem) {
-    :where(.ly-root[data-layout="f-pattern"], .ly-root[layout-style="f-pattern"], .ly-root.ly-layout-f-pattern, .ly-root.ly-style-f-pattern) .ly-panes--three {
-      grid-template-columns: minmax(min(100%, 13rem), 0.28fr) minmax(0, 1.28fr) minmax(min(100%, 16rem), 0.44fr);
-    }
-  }
-}

package/styles/layout-style-maximalist.css

@@ -1,93 +0,0 @@
-/*
-  Layout style: maximalist.
-  Editorial shell with oversized hero splits and staggered supporting regions.
-  Visual identity remains owned by ui-style-kit-css.
-*/
-
-@layer ly.styles.maximalist {
-  :where(.ly-root[data-layout="maximalist"], .ly-root[layout-style="maximalist"], .ly-root.ly-layout-maximalist, .ly-root.ly-style-maximalist) {
-    --ly-container-max: 102rem;
-    --ly-page-padding-inline: clamp(1rem, 6vw, 5.5rem);
-    --ly-section-padding-block: clamp(4rem, 13vw, 10rem);
-    --ly-sidebar-width: clamp(13rem, 18vw, 20rem);
-    --ly-grid-min: 14rem;
-    --ly-gap: clamp(1.25rem, 4vw, 3rem);
-    --ly-grid-gap: var(--ly-gap);
-    --ly-stack-gap: clamp(1.5rem, 4vw, 3.5rem);
-  }
-
-  :where(.ly-root[data-layout="maximalist"], .ly-root[layout-style="maximalist"], .ly-root.ly-layout-maximalist, .ly-root.ly-style-maximalist) .ly-app-main {
-    padding-block: clamp(1rem, 3vw, 3rem);
-  }
-
-  :where(.ly-root[data-layout="maximalist"], .ly-root[layout-style="maximalist"], .ly-root.ly-layout-maximalist, .ly-root.ly-style-maximalist) .ly-container,
-  :where(.ly-root[data-layout="maximalist"], .ly-root[layout-style="maximalist"], .ly-root.ly-layout-maximalist, .ly-root.ly-style-maximalist) .ly-wrapper {
-    width: min(100% - var(--ly-page-padding-inline), var(--ly-container-max));
-  }
-
-  :where(.ly-root[data-layout="maximalist"], .ly-root[layout-style="maximalist"], .ly-root.ly-layout-maximalist, .ly-root.ly-style-maximalist) .ly-section {
-    padding-block: clamp(3.5rem, 11vw, 8rem);
-  }
-
-  :where(.ly-root[data-layout="maximalist"], .ly-root[layout-style="maximalist"], .ly-root.ly-layout-maximalist, .ly-root.ly-style-maximalist) .ly-split {
-    align-items: stretch;
-  }
-
-  :where(.ly-root[data-layout="maximalist"], .ly-root[layout-style="maximalist"], .ly-root.ly-layout-maximalist, .ly-root.ly-style-maximalist) .ly-grid--auto {
-    grid-auto-rows: minmax(10rem, auto);
-  }
-
-  @media (min-width: 48rem) {
-    :where(.ly-root[data-layout="maximalist"], .ly-root[layout-style="maximalist"], .ly-root.ly-layout-maximalist, .ly-root.ly-style-maximalist) .ly-split {
-      /* Keep the editorial stage stacked until the wider shell can carry the oversized rhythm. */
-      grid-template-columns: 1fr;
-    }
-
-    :where(.ly-root[data-layout="maximalist"], .ly-root[layout-style="maximalist"], .ly-root.ly-layout-maximalist, .ly-root.ly-style-maximalist) .ly-grid--auto > :nth-child(5n + 1) {
-      grid-column: span 2;
-      min-height: 24rem;
-    }
-
-    :where(.ly-root[data-layout="maximalist"], .ly-root[layout-style="maximalist"], .ly-root.ly-layout-maximalist, .ly-root.ly-style-maximalist) .ly-grid--auto > :nth-child(5n + 3) {
-      transform: translateY(var(--ly-space-7));
-    }
-  }
-
-  @media (min-width: 56rem) {
-    :where(.ly-root[data-layout="maximalist"], .ly-root[layout-style="maximalist"], .ly-root.ly-layout-maximalist, .ly-root.ly-style-maximalist) .ly-app-shell {
-      grid-template-areas:
-        "header header"
-        "main sidebar";
-      grid-template-columns: minmax(0, 1fr) minmax(min(100%, 13rem), 0.28fr);
-    }
-
-    :where(.ly-root[data-layout="maximalist"], .ly-root[layout-style="maximalist"], .ly-root.ly-layout-maximalist, .ly-root.ly-style-maximalist) .ly-app-sidebar {
-      display: block;
-      position: sticky;
-      top: calc(var(--ly-gap) * 1.5);
-      height: max-content;
-      margin-block: clamp(2rem, 8vw, 7rem);
-      transform: translateX(calc(var(--ly-gap) * -0.35));
-      overflow: auto;
-    }
-
-    :where(.ly-root[data-layout="maximalist"], .ly-root[layout-style="maximalist"], .ly-root.ly-layout-maximalist, .ly-root.ly-style-maximalist) .ly-sidebar-layout {
-      grid-template-columns: minmax(0, 1.55fr) minmax(min(100%, 15rem), 0.45fr);
-    }
-
-    :where(.ly-root[data-layout="maximalist"], .ly-root[layout-style="maximalist"], .ly-root.ly-layout-maximalist, .ly-root.ly-style-maximalist) .ly-split {
-      grid-template-columns: minmax(0, 1.62fr) minmax(min(100%, 16rem), 0.54fr);
-      gap: clamp(1.5rem, 6vw, 5rem);
-    }
-
-    :where(.ly-root[data-layout="maximalist"], .ly-root[layout-style="maximalist"], .ly-root.ly-layout-maximalist, .ly-root.ly-style-maximalist) .ly-panes--two {
-      grid-template-columns: minmax(min(100%, 16rem), 0.44fr) minmax(0, 1.56fr);
-    }
-  }
-
-  @media (min-width: 80rem) {
-    :where(.ly-root[data-layout="maximalist"], .ly-root[layout-style="maximalist"], .ly-root.ly-layout-maximalist, .ly-root.ly-style-maximalist) .ly-panes--three {
-      grid-template-columns: minmax(min(100%, 14rem), 0.34fr) minmax(0, 1.28fr) minmax(min(100%, 18rem), 0.58fr);
-    }
-  }
-}

package/styles/layout-style-minimal-saas.css

@@ -1,67 +0,0 @@
-/*
-  Layout style: minimal-saas.
-  Steady left-rail SaaS shell with conservative content widths and predictable
-  workspace rhythm. Visual identity remains owned by ui-style-kit-css.
-*/
-
-@layer ly.styles.minimal_saas {
-  :where(.ly-root[data-layout="minimal-saas"], .ly-root[layout-style="minimal-saas"], .ly-root.ly-layout-minimal-saas, .ly-root.ly-style-minimal-saas) {
-    --ly-container-max: 88rem;
-    --ly-page-padding-inline: clamp(1rem, 3vw, 2.5rem);
-    --ly-section-padding-block: clamp(2rem, 5vw, 4rem);
-    --ly-sidebar-width: clamp(15rem, 18vw, 19rem);
-    --ly-grid-min: 16rem;
-    --ly-gap: clamp(1rem, 2vw, 1.75rem);
-    --ly-grid-gap: var(--ly-gap);
-    --ly-stack-gap: clamp(0.875rem, 1.6vw, 1.35rem);
-  }
-
-  :where(.ly-root[data-layout="minimal-saas"], .ly-root[layout-style="minimal-saas"], .ly-root.ly-layout-minimal-saas, .ly-root.ly-style-minimal-saas) .ly-app-main {
-    padding-block: clamp(1rem, 2vw, 2rem);
-  }
-
-  :where(.ly-root[data-layout="minimal-saas"], .ly-root[layout-style="minimal-saas"], .ly-root.ly-layout-minimal-saas, .ly-root.ly-style-minimal-saas) .ly-container,
-  :where(.ly-root[data-layout="minimal-saas"], .ly-root[layout-style="minimal-saas"], .ly-root.ly-layout-minimal-saas, .ly-root.ly-style-minimal-saas) .ly-wrapper {
-    width: min(100% - var(--ly-page-padding-inline), var(--ly-container-max));
-  }
-
-  :where(.ly-root[data-layout="minimal-saas"], .ly-root[layout-style="minimal-saas"], .ly-root.ly-layout-minimal-saas, .ly-root.ly-style-minimal-saas) .ly-section {
-    padding-block: var(--ly-section-padding-block);
-  }
-
-  :where(.ly-root[data-layout="minimal-saas"], .ly-root[layout-style="minimal-saas"], .ly-root.ly-layout-minimal-saas, .ly-root.ly-style-minimal-saas) .ly-grid--auto {
-    grid-auto-rows: minmax(8rem, auto);
-  }
-
-  @media (min-width: 48rem) {
-    :where(.ly-root[data-layout="minimal-saas"], .ly-root[layout-style="minimal-saas"], .ly-root.ly-layout-minimal-saas, .ly-root.ly-style-minimal-saas) .ly-app-shell {
-      grid-template-areas:
-        "sidebar header"
-        "sidebar main";
-      grid-template-columns: minmax(min(100%, 14rem), var(--ly-sidebar-width)) minmax(0, 1fr);
-    }
-
-    :where(.ly-root[data-layout="minimal-saas"], .ly-root[layout-style="minimal-saas"], .ly-root.ly-layout-minimal-saas, .ly-root.ly-style-minimal-saas) .ly-app-sidebar {
-      display: block;
-      position: sticky;
-      top: 0;
-      height: 100svh;
-      overflow: auto;
-    }
-
-    :where(.ly-root[data-layout="minimal-saas"], .ly-root[layout-style="minimal-saas"], .ly-root.ly-layout-minimal-saas, .ly-root.ly-style-minimal-saas) .ly-sidebar-layout {
-      grid-template-columns: minmax(min(100%, 14rem), 0.24fr) minmax(0, 1fr);
-    }
-
-    :where(.ly-root[data-layout="minimal-saas"], .ly-root[layout-style="minimal-saas"], .ly-root.ly-layout-minimal-saas, .ly-root.ly-style-minimal-saas) .ly-split,
-    :where(.ly-root[data-layout="minimal-saas"], .ly-root[layout-style="minimal-saas"], .ly-root.ly-layout-minimal-saas, .ly-root.ly-style-minimal-saas) .ly-panes--two {
-      grid-template-columns: minmax(0, 1fr) minmax(min(100%, 18rem), 0.44fr);
-    }
-  }
-
-  @media (min-width: 80rem) {
-    :where(.ly-root[data-layout="minimal-saas"], .ly-root[layout-style="minimal-saas"], .ly-root.ly-layout-minimal-saas, .ly-root.ly-style-minimal-saas) .ly-panes--three {
-      grid-template-columns: minmax(min(100%, 13rem), 0.22fr) minmax(0, 1fr) minmax(min(100%, 16rem), 0.32fr);
-    }
-  }
-}

package/styles/layout-style-mondrian.css

@@ -1,77 +0,0 @@
-/*
-  Layout style: mondrian.
-  Asymmetrical rectangular blocks with staggered spans inspired by Mondrian
-  composition. Visual identity remains owned by ui-style-kit-css.
-*/
-
-@layer ly.styles.mondrian {
-  :where(.ly-root[data-layout="mondrian"], .ly-root[layout-style="mondrian"], .ly-root.ly-layout-mondrian, .ly-root.ly-style-mondrian) {
-    --ly-container-max: 108rem;
-    --ly-page-padding-inline: clamp(0.75rem, 2.5vw, 2rem);
-    --ly-section-padding-block: clamp(1.75rem, 4.5vw, 4rem);
-    --ly-sidebar-width: clamp(11rem, 16vw, 17rem);
-    --ly-grid-min: 11rem;
-    --ly-gap: clamp(0.75rem, 1.6vw, 1.25rem);
-    --ly-grid-gap: var(--ly-gap);
-    --ly-stack-gap: clamp(0.75rem, 1.5vw, 1.2rem);
-  }
-
-  :where(.ly-root[data-layout="mondrian"], .ly-root[layout-style="mondrian"], .ly-root.ly-layout-mondrian, .ly-root.ly-style-mondrian) .ly-app-main {
-    padding-block: clamp(0.75rem, 1.8vw, 1.5rem);
-  }
-
-  :where(.ly-root[data-layout="mondrian"], .ly-root[layout-style="mondrian"], .ly-root.ly-layout-mondrian, .ly-root.ly-style-mondrian) .ly-container,
-  :where(.ly-root[data-layout="mondrian"], .ly-root[layout-style="mondrian"], .ly-root.ly-layout-mondrian, .ly-root.ly-style-mondrian) .ly-wrapper {
-    width: min(100% - var(--ly-page-padding-inline), var(--ly-container-max));
-  }
-
-  :where(.ly-root[data-layout="mondrian"], .ly-root[layout-style="mondrian"], .ly-root.ly-layout-mondrian, .ly-root.ly-style-mondrian) .ly-section {
-    padding-block: var(--ly-section-padding-block);
-  }
-
-  :where(.ly-root[data-layout="mondrian"], .ly-root[layout-style="mondrian"], .ly-root.ly-layout-mondrian, .ly-root.ly-style-mondrian) .ly-grid--auto {
-    grid-auto-rows: minmax(7rem, auto);
-  }
-
-  @media (min-width: 48rem) {
-    :where(.ly-root[data-layout="mondrian"], .ly-root[layout-style="mondrian"], .ly-root.ly-layout-mondrian, .ly-root.ly-style-mondrian) .ly-app-shell {
-      grid-template-areas:
-        "sidebar header header"
-        "sidebar main main";
-      grid-template-columns: minmax(min(100%, 11rem), 0.28fr) minmax(0, 0.86fr) minmax(0, 1.14fr);
-      grid-template-rows: auto 1fr;
-    }
-
-    :where(.ly-root[data-layout="mondrian"], .ly-root[layout-style="mondrian"], .ly-root.ly-layout-mondrian, .ly-root.ly-style-mondrian) .ly-app-sidebar {
-      display: block;
-      position: sticky;
-      top: var(--ly-space-3);
-      height: calc(100svh - (var(--ly-space-3) * 2));
-      overflow: auto;
-    }
-
-    :where(.ly-root[data-layout="mondrian"], .ly-root[layout-style="mondrian"], .ly-root.ly-layout-mondrian, .ly-root.ly-style-mondrian) .ly-grid--auto > :nth-child(5n + 1) {
-      grid-column: span 2;
-      grid-row: span 2;
-      min-height: 15rem;
-    }
-
-    :where(.ly-root[data-layout="mondrian"], .ly-root[layout-style="mondrian"], .ly-root.ly-layout-mondrian, .ly-root.ly-style-mondrian) .ly-sidebar-layout {
-      grid-template-columns: minmax(min(100%, 11rem), 0.25fr) minmax(0, 1fr);
-    }
-
-    :where(.ly-root[data-layout="mondrian"], .ly-root[layout-style="mondrian"], .ly-root.ly-layout-mondrian, .ly-root.ly-style-mondrian) .ly-split {
-      grid-template-columns: minmax(0, 0.7fr) minmax(min(100%, 20rem), 1.3fr);
-    }
-
-    :where(.ly-root[data-layout="mondrian"], .ly-root[layout-style="mondrian"], .ly-root.ly-layout-mondrian, .ly-root.ly-style-mondrian) .ly-panes--two {
-      grid-template-columns: minmax(min(100%, 13rem), 0.46fr) minmax(0, 1.54fr);
-    }
-  }
-
-  @media (min-width: 80rem) {
-    :where(.ly-root[data-layout="mondrian"], .ly-root[layout-style="mondrian"], .ly-root.ly-layout-mondrian, .ly-root.ly-style-mondrian) .ly-panes--three {
-      grid-template-columns: minmax(min(100%, 11rem), 0.28fr) minmax(0, 1.44fr) minmax(min(100%, 13rem), 0.28fr);
-    }
-  }
-}

package/styles/layout-style-neumorphism.css

@@ -1,72 +0,0 @@
-/*
-  Layout style: neumorphism.
-  Centered island shell with detached support regions. Visual identity remains
-  owned by ui-style-kit-css.
-*/
-
-@layer ly.styles.neumorphism {
-  :where(.ly-root[data-layout="neumorphism"], .ly-root[layout-style="neumorphism"], .ly-root.ly-layout-neumorphism, .ly-root.ly-style-neumorphism) {
-    --ly-container-max: 86rem;
-    --ly-page-padding-inline: clamp(1.25rem, 5vw, 4rem);
-    --ly-section-padding-block: clamp(3rem, 8vw, 6rem);
-    --ly-sidebar-width: clamp(16rem, 20vw, 20rem);
-    --ly-grid-min: 16rem;
-    --ly-gap: clamp(1.25rem, 3vw, 2.5rem);
-    --ly-grid-gap: var(--ly-gap);
-    --ly-stack-gap: clamp(1.25rem, 2.5vw, 2rem);
-  }
-
-  :where(.ly-root[data-layout="neumorphism"], .ly-root[layout-style="neumorphism"], .ly-root.ly-layout-neumorphism, .ly-root.ly-style-neumorphism) .ly-app-main {
-    padding-block: clamp(2rem, 5vw, 4rem);
-  }
-
-  :where(.ly-root[data-layout="neumorphism"], .ly-root[layout-style="neumorphism"], .ly-root.ly-layout-neumorphism, .ly-root.ly-style-neumorphism) .ly-container,
-  :where(.ly-root[data-layout="neumorphism"], .ly-root[layout-style="neumorphism"], .ly-root.ly-layout-neumorphism, .ly-root.ly-style-neumorphism) .ly-wrapper {
-    width: min(100% - var(--ly-page-padding-inline), var(--ly-container-max));
-  }
-
-  :where(.ly-root[data-layout="neumorphism"], .ly-root[layout-style="neumorphism"], .ly-root.ly-layout-neumorphism, .ly-root.ly-style-neumorphism) .ly-section {
-    padding-block: var(--ly-section-padding-block);
-  }
-
-  :where(.ly-root[data-layout="neumorphism"], .ly-root[layout-style="neumorphism"], .ly-root.ly-layout-neumorphism, .ly-root.ly-style-neumorphism) .ly-grid--auto {
-    grid-auto-rows: minmax(9rem, auto);
-  }
-
-  @media (min-width: 56rem) {
-    :where(.ly-root[data-layout="neumorphism"], .ly-root[layout-style="neumorphism"], .ly-root.ly-layout-neumorphism, .ly-root.ly-style-neumorphism) .ly-app-shell {
-      grid-template-areas:
-        "header header"
-        "main sidebar";
-      grid-template-columns: minmax(0, 1fr) minmax(min(100%, 16rem), 0.34fr);
-      align-items: start;
-    }
-
-    :where(.ly-root[data-layout="neumorphism"], .ly-root[layout-style="neumorphism"], .ly-root.ly-layout-neumorphism, .ly-root.ly-style-neumorphism) .ly-app-sidebar {
-      display: block;
-      position: sticky;
-      top: clamp(1rem, 3vw, 2rem);
-      max-height: calc(100svh - clamp(2rem, 6vw, 4rem));
-      margin: clamp(1rem, 4vw, 3rem) clamp(1rem, 4vw, 3rem) clamp(1rem, 4vw, 3rem) 0;
-      overflow: auto;
-    }
-
-    :where(.ly-root[data-layout="neumorphism"], .ly-root[layout-style="neumorphism"], .ly-root.ly-layout-neumorphism, .ly-root.ly-style-neumorphism) .ly-sidebar-layout {
-      grid-template-columns: minmax(0, 1fr) minmax(min(100%, 16rem), 0.42fr);
-    }
-
-    :where(.ly-root[data-layout="neumorphism"], .ly-root[layout-style="neumorphism"], .ly-root.ly-layout-neumorphism, .ly-root.ly-style-neumorphism) .ly-split {
-      grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
-    }
-
-    :where(.ly-root[data-layout="neumorphism"], .ly-root[layout-style="neumorphism"], .ly-root.ly-layout-neumorphism, .ly-root.ly-style-neumorphism) .ly-panes--two {
-      grid-template-columns: minmax(0, 1fr) minmax(min(100%, 17rem), 0.5fr);
-    }
-  }
-
-  @media (min-width: 80rem) {
-    :where(.ly-root[data-layout="neumorphism"], .ly-root[layout-style="neumorphism"], .ly-root.ly-layout-neumorphism, .ly-root.ly-style-neumorphism) .ly-panes--three {
-      grid-template-columns: minmax(min(100%, 15rem), 0.38fr) minmax(0, 1fr) minmax(min(100%, 15rem), 0.38fr);
-    }
-  }
-}

package/styles/layout-style-retro-glass.css

@@ -1,82 +0,0 @@
-/*
-  Layout style: retro-glass.
-  Top-framed content shell with a floating right utility rail. Visual identity
-  remains owned by ui-style-kit-css.
-*/
-
-@layer ly.styles.retro_glass {
-  :where(.ly-root[data-layout="retro-glass"], .ly-root[layout-style="retro-glass"], .ly-root.ly-layout-retro-glass, .ly-root.ly-style-retro-glass) {
-    --ly-container-max: 96rem;
-    --ly-page-padding-inline: clamp(1rem, 4vw, 3rem);
-    --ly-section-padding-block: clamp(3rem, 8vw, 6rem);
-    --ly-sidebar-width: 18rem;
-    --ly-grid-min: 15rem;
-    --ly-gap: clamp(1rem, 2.6vw, 2rem);
-    --ly-grid-gap: var(--ly-gap);
-    --ly-stack-gap: clamp(1rem, 2vw, 1.75rem);
-  }
-
-  :where(.ly-root[data-layout="retro-glass"], .ly-root[layout-style="retro-glass"], .ly-root.ly-layout-retro-glass, .ly-root.ly-style-retro-glass) .ly-app-main {
-    padding: clamp(1rem, 3vw, 2rem);
-  }
-
-  :where(.ly-root[data-layout="retro-glass"], .ly-root[layout-style="retro-glass"], .ly-root.ly-layout-retro-glass, .ly-root.ly-style-retro-glass) .ly-container,
-  :where(.ly-root[data-layout="retro-glass"], .ly-root[layout-style="retro-glass"], .ly-root.ly-layout-retro-glass, .ly-root.ly-style-retro-glass) .ly-wrapper {
-    width: min(100%, var(--ly-container-max));
-  }
-
-  :where(.ly-root[data-layout="retro-glass"], .ly-root[layout-style="retro-glass"], .ly-root.ly-layout-retro-glass, .ly-root.ly-style-retro-glass) .ly-section {
-    padding-block: clamp(2rem, 6vw, 5rem);
-  }
-
-  :where(.ly-root[data-layout="retro-glass"], .ly-root[layout-style="retro-glass"], .ly-root.ly-layout-retro-glass, .ly-root.ly-style-retro-glass) .ly-split {
-    align-items: stretch;
-  }
-
-  :where(.ly-root[data-layout="retro-glass"], .ly-root[layout-style="retro-glass"], .ly-root.ly-layout-retro-glass, .ly-root.ly-style-retro-glass) .ly-grid--auto {
-    grid-auto-rows: minmax(9rem, auto);
-  }
-
-  @media (min-width: 48rem) {
-    :where(.ly-root[data-layout="retro-glass"], .ly-root[layout-style="retro-glass"], .ly-root.ly-layout-retro-glass, .ly-root.ly-style-retro-glass) .ly-split {
-      /* Keep glass feature panels stacked until the floating rail has enough horizontal room. */
-      grid-template-columns: 1fr;
-    }
-
-    :where(.ly-root[data-layout="retro-glass"], .ly-root[layout-style="retro-glass"], .ly-root.ly-layout-retro-glass, .ly-root.ly-style-retro-glass) .ly-panes--two {
-      grid-template-columns: minmax(0, 1fr) minmax(min(100%, 16rem), 0.62fr);
-    }
-  }
-
-  @media (min-width: 56rem) {
-    :where(.ly-root[data-layout="retro-glass"], .ly-root[layout-style="retro-glass"], .ly-root.ly-layout-retro-glass, .ly-root.ly-style-retro-glass) .ly-app-shell {
-      grid-template-areas:
-        "header header"
-        "main sidebar";
-      grid-template-columns: minmax(0, 1fr) minmax(min(100%, 16rem), var(--ly-sidebar-width));
-    }
-
-    :where(.ly-root[data-layout="retro-glass"], .ly-root[layout-style="retro-glass"], .ly-root.ly-layout-retro-glass, .ly-root.ly-style-retro-glass) .ly-app-sidebar {
-      display: block;
-      position: sticky;
-      top: var(--ly-space-4);
-      height: calc(100svh - (var(--ly-space-4) * 2));
-      margin: var(--ly-space-4) var(--ly-space-4) var(--ly-space-4) 0;
-      overflow: auto;
-    }
-
-    :where(.ly-root[data-layout="retro-glass"], .ly-root[layout-style="retro-glass"], .ly-root.ly-layout-retro-glass, .ly-root.ly-style-retro-glass) .ly-sidebar-layout {
-      grid-template-columns: minmax(0, 1fr) minmax(min(100%, 16rem), 0.48fr);
-    }
-
-    :where(.ly-root[data-layout="retro-glass"], .ly-root[layout-style="retro-glass"], .ly-root.ly-layout-retro-glass, .ly-root.ly-style-retro-glass) .ly-split {
-      grid-template-columns: minmax(0, 1.1fr) minmax(min(100%, 18rem), 0.9fr);
-    }
-  }
-
-  @media (min-width: 78rem) {
-    :where(.ly-root[data-layout="retro-glass"], .ly-root[layout-style="retro-glass"], .ly-root.ly-layout-retro-glass, .ly-root.ly-style-retro-glass) .ly-panes--three {
-      grid-template-columns: minmax(min(100%, 15rem), 0.4fr) minmax(0, 1fr) minmax(min(100%, 18rem), 0.52fr);
-    }
-  }
-}