@letsprogram/ng-oat 0.1.6 → 0.1.8

package/assets/oat/oat.css

@@ -1,7 +1,10 @@
 @layer theme, base, components, animations, utilities;
 
 @layer base {
-  *, *::before, *::after {
+
+  *,
+  *::before,
+  *::after {
     box-sizing: border-box;
     -webkit-tap-highlight-color: transparent;
   }
@@ -15,7 +18,9 @@
   }
 
   /* Top-layer elements don't inherit from body. Set explicitly. */
-  body, dialog, [popover] {
+  body,
+  dialog,
+  [popover] {
     font-family: var(--font-sans);
     font-size: var(--text-regular);
     line-height: var(--leading-normal);
@@ -29,18 +34,33 @@
   }
 
   main {
-    padding-block-start: var(--space-8);
+    padding-block-start: var(--topnav-offset);
   }
 
-  img, picture, video, canvas, svg {
+  img,
+  picture,
+  video,
+  canvas,
+  svg {
     max-width: 100%;
   }
 
-  p, h1, h2, h3, h4, h5, h6 {
+  p,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
     overflow-wrap: break-word;
   }
 
-  h1, h2, h3, h4, h5, h6 {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
     font-weight: var(--font-semibold);
     line-height: var(--leading-tight);
     text-wrap: balance;
@@ -103,11 +123,13 @@
     }
   }
 
-  strong, b {
+  strong,
+  b {
     font-weight: var(--font-semibold);
   }
 
-  em, i {
+  em,
+  i {
     font-style: italic;
   }
 
@@ -152,7 +174,8 @@
     margin: var(--space-2) 0;
   }
 
-  ul, ol {
+  ul,
+  ol {
     padding-inline-start: var(--space-6);
     margin-block-end: var(--space-4);
   }
@@ -201,19 +224,37 @@
     color: var(--prose-body);
     max-width: 65ch;
 
-    > * + * {
+    >*+* {
       margin-block-start: var(--space-5);
     }
 
-    h1, h2, h3, h4, h5, h6 {
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
       color: var(--prose-heading);
       letter-spacing: var(--tracking-tight);
     }
 
-    h1 { margin-block-start: 0; }
-    h2 { margin-block-start: var(--space-10); }
-    h3 { margin-block-start: var(--space-8); }
-    h4, h5, h6 { margin-block-start: var(--space-6); }
+    h1 {
+      margin-block-start: 0;
+    }
+
+    h2 {
+      margin-block-start: var(--space-10);
+    }
+
+    h3 {
+      margin-block-start: var(--space-8);
+    }
+
+    h4,
+    h5,
+    h6 {
+      margin-block-start: var(--space-6);
+    }
 
     a {
       color: var(--prose-link);
@@ -245,7 +286,8 @@
       font-style: italic;
     }
 
-    img, video {
+    img,
+    video {
       border-radius: var(--radius-medium);
     }
 
@@ -275,10 +317,20 @@
   }
 
   /* Prose width variants */
-  .prose-sm { max-width: 45ch; font-size: var(--text-7); }
-  .prose-lg { max-width: 75ch; }
-  .prose-full { max-width: none; }
+  .prose-sm {
+    max-width: 45ch;
+    font-size: var(--text-7);
+  }
+
+  .prose-lg {
+    max-width: 75ch;
+  }
+
+  .prose-full {
+    max-width: none;
+  }
 }
+
 @layer theme {
   :root {
     color-scheme: light dark;
@@ -315,12 +367,12 @@
     /* ── Spacing (fluid) ─────────────────────────────────────────────────── */
     --space-1: 0.25rem;
     --space-2: 0.5rem;
-    --space-3:  clamp(0.5rem,  1.5vw, 0.75rem);
-    --space-4:  clamp(0.5rem,  2vw,   1rem);
-    --space-5:  clamp(0.75rem, 2.5vw, 1.25rem);
-    --space-6:  clamp(0.75rem, 3vw,   1.5rem);
-    --space-8:  clamp(1rem,    4vw,   2rem);
-    --space-10: clamp(1.5rem,  5vw,   2.5rem);
+    --space-3: clamp(0.5rem, 1.5vw, 0.75rem);
+    --space-4: clamp(0.5rem, 2vw, 1rem);
+    --space-5: clamp(0.75rem, 2.5vw, 1.25rem);
+    --space-6: clamp(0.75rem, 3vw, 1.5rem);
+    --space-8: clamp(1rem, 4vw, 2rem);
+    --space-10: clamp(1.5rem, 5vw, 2.5rem);
     --space-12: 3rem;
     --space-14: 3.5rem;
     --space-16: 4rem;
@@ -329,7 +381,7 @@
     /* ── Border radius (fluid) ───────────────────────────────────────────── */
     --radius-small: 0.125rem;
     --radius-medium: clamp(0.25rem, 0.8vw, 0.375rem);
-    --radius-large:  clamp(0.5rem,  1.5vw, 0.75rem);
+    --radius-large: clamp(0.5rem, 1.5vw, 0.75rem);
     --radius-full: 9999px;
 
     --bar-height: 0.5rem;
@@ -382,7 +434,9 @@
     --z-modal: 200;
   }
 }
+
 @layer animations {
+
   /* Pop-in animation for modals/overlays - swings from above */
   .animate-pop-in {
     opacity: 1;
@@ -441,6 +495,7 @@
     }
   }
 }
+
 @layer base {
   label {
     display: block;
@@ -641,27 +696,28 @@
     padding: 0;
     margin: 0;
 
-    & > :is(input, textarea, select) {
+    &> :is(input, textarea, select) {
       flex: 1;
       margin-block-start: 0;
-     
+
       &:not(:focus) {
         border-inline-end-color: transparent;
       }
     }
 
-    & > :is(input, textarea, select, button) {
+    &> :is(input, textarea, select, button) {
       border-radius: 0;
+
       &:first-child {
         border-radius: var(--radius-medium) 0 0 var(--radius-medium);
       }
-      
+
       &:last-child {
         border-radius: 0 var(--radius-medium) var(--radius-medium) 0;
       }
     }
 
-    & > legend {
+    &>legend {
       float: inline-start;
       display: inline-flex;
       align-items: center;
@@ -680,7 +736,8 @@
     margin-block-end: var(--space-4);
 
     /* Hint text that succeeds an input with aria-describedby */
-    [data-hint], .error {
+    [data-hint],
+    .error {
       font-size: var(--text-8);
       font-weight: var(--font-normal);
       color: var(--muted-foreground);
@@ -698,8 +755,11 @@
     }
   }
 }
+
 @layer base {
-  :is(button, [type=submit], [type=reset], [type=button], a.button), ::file-selector-button {
+
+  :is(button, [type=submit], [type=reset], [type=button], a.button),
+  ::file-selector-button {
     --_hov: color-mix(in srgb, var(--primary), white 25%);
 
     display: inline-flex;
@@ -807,6 +867,7 @@
     color: var(--foreground);
     border: 1px solid var(--border);
   }
+
   ::file-selector-button:hover {
     /* pseudoelement:hover can't be nested and has to be a separate block. */
     background-color: var(--accent);
@@ -820,27 +881,28 @@
     display: inline-flex;
 
     /* In menu.buttons, <li> children are expected to have just one child, which is a button/or a.button */
-    & > li {
-      &:first-child > * {
+    &>li {
+      &:first-child>* {
         border-start-start-radius: var(--radius-medium);
         border-end-start-radius: var(--radius-medium);
       }
 
-      &:last-child > * {
+      &:last-child>* {
         border-start-end-radius: var(--radius-medium);
         border-end-end-radius: var(--radius-medium);
       }
 
-      & > * {
+      &>* {
         border-radius: 0;
       }
 
-      &:not(:last-child) > * {
+      &:not(:last-child)>* {
         border-inline-end: 1px solid rgb(from var(--primary-foreground) r g b / 0.2);
       }
     }
   }
 }
+
 @layer components {
   .card {
     background-color: var(--card);
@@ -888,6 +950,7 @@
     border-top: 1px solid var(--border);
   }
 }
+
 @layer components {
   .badge {
     display: inline-flex;
@@ -914,36 +977,31 @@
 
     &.success {
       color: var(--success);
-      background-color: light-dark(
-        color-mix(in srgb, var(--success) 10%, transparent),
-        color-mix(in srgb, var(--success) 30%, transparent)
-      );
+      background-color: light-dark(color-mix(in srgb, var(--success) 10%, transparent),
+          color-mix(in srgb, var(--success) 30%, transparent));
     }
 
     &.warning {
       color: var(--warning);
-      background-color: light-dark(
-        color-mix(in srgb, var(--warning) 10%, transparent),
-        color-mix(in srgb, var(--warning) 30%, transparent)
-      );
+      background-color: light-dark(color-mix(in srgb, var(--warning) 10%, transparent),
+          color-mix(in srgb, var(--warning) 30%, transparent));
     }
 
     &.danger {
       color: var(--danger);
-      background-color: light-dark(
-        color-mix(in srgb, var(--danger) 10%, transparent),
-        color-mix(in srgb, var(--danger) 30%, transparent)
-      );
+      background-color: light-dark(color-mix(in srgb, var(--danger) 10%, transparent),
+          color-mix(in srgb, var(--danger) 30%, transparent));
     }
   }
 }
+
 @layer components {
   details {
     border: 1px solid var(--border);
     border-radius: var(--radius-medium);
     overflow: hidden;
 
-    & + details {
+    &+details {
       margin-top: -1px;
       border-start-start-radius: 0;
       border-start-end-radius: 0;
@@ -974,7 +1032,8 @@
       background-color: var(--muted);
     }
 
-    &::-webkit-details-marker, &::marker {
+    &::-webkit-details-marker,
+    &::marker {
       display: none;
     }
 
@@ -995,10 +1054,11 @@
     }
   }
 
-  details > *:not(summary) {
+  details>*:not(summary) {
     margin: clamp(var(--space-2), 3vw, var(--space-4));
   }
 }
+
 @layer components {
   [role="alert"] {
     position: relative;
@@ -1017,10 +1077,8 @@
     &[data-variant="error"],
     &[data-variant="danger"] {
       color: var(--danger);
-      background-color: light-dark(
-        color-mix(in srgb, var(--danger) 8%, transparent),
-        color-mix(in srgb, var(--danger) 20%, transparent)
-      );
+      background-color: light-dark(color-mix(in srgb, var(--danger) 8%, transparent),
+          color-mix(in srgb, var(--danger) 20%, transparent));
 
       & a {
         color: var(--danger);
@@ -1029,10 +1087,8 @@
 
     &[data-variant="success"] {
       color: var(--success);
-      background-color: light-dark(
-        color-mix(in srgb, var(--success) 8%, transparent),
-        color-mix(in srgb, var(--success) 20%, transparent)
-      );
+      background-color: light-dark(color-mix(in srgb, var(--success) 8%, transparent),
+          color-mix(in srgb, var(--success) 20%, transparent));
 
       & a {
         color: var(--success);
@@ -1041,10 +1097,8 @@
 
     &[data-variant="warning"] {
       color: var(--warning);
-      background-color: light-dark(
-        color-mix(in srgb, var(--warning) 8%, transparent),
-        color-mix(in srgb, var(--warning) 20%, transparent)
-      );
+      background-color: light-dark(color-mix(in srgb, var(--warning) 8%, transparent),
+          color-mix(in srgb, var(--warning) 20%, transparent));
 
       & a {
         color: var(--warning);
@@ -1052,6 +1106,7 @@
     }
   }
 }
+
 @layer components {
   dialog {
     position: fixed;
@@ -1105,33 +1160,42 @@
       }
     }
 
-    & > header,
-    & > form > header {
+    &>header,
+    &>form>header {
       display: flex;
       flex-direction: column;
       gap: var(--space-1);
       padding: var(--space-6);
       padding-block-end: 0;
 
-      & > h1, & > h2, & > h3, & > h4, & > h5, & > h6 {
+      &>h1,
+      &>h2,
+      &>h3,
+      &>h4,
+      &>h5,
+      &>h6 {
         margin-block-end: 0;
       }
 
-      & > p {
+      &>p {
         font-size: var(--text-7);
         color: var(--muted-foreground);
         margin-block-end: 0;
       }
     }
 
-    & > p, & > div, & > section,
-    & > form > p, & > form > div, & > form > section {
+    &>p,
+    &>div,
+    &>section,
+    &>form>p,
+    &>form>div,
+    &>form>section {
       padding: var(--space-6);
       overflow-y: auto;
     }
 
-    & > footer,
-    & > form > footer {
+    &>footer,
+    &>form>footer {
       display: flex;
       justify-content: flex-end;
       gap: var(--space-2);
@@ -1140,6 +1204,7 @@
     }
   }
 }
+
 @layer components {
   ot-dropdown {
     [popover] {
@@ -1188,13 +1253,15 @@
       border-radius: var(--radius-small);
       cursor: pointer;
 
-      &:hover, &:focus {
+      &:hover,
+      &:focus {
         background-color: var(--accent);
         outline: none;
       }
     }
   }
 }
+
 @layer components {
   :root {
     --grid-cols: 12;
@@ -1219,28 +1286,83 @@
   }
 
   /* Column spans using CSS custom property */
-  .col, [class*="col-"] { grid-column-end: span var(--span, var(--grid-cols)); }
-  
-  .col-1  { --span: 1; }
-  .col-2  { --span: 2; }
-  .col-3  { --span: 3; }
-  .col-4  { --span: 4; }
-  .col-5  { --span: 5; }
-  .col-6  { --span: 6; }
-  .col-7  { --span: 7; }
-  .col-8  { --span: 8; }
-  .col-9  { --span: 9; }
-  .col-10 { --span: 10; }
-  .col-11 { --span: 11; }
-  .col-12 { --span: 12; }
+  .col,
+  [class*="col-"] {
+    grid-column-end: span var(--span, var(--grid-cols));
+  }
+
+  .col-1 {
+    --span: 1;
+  }
+
+  .col-2 {
+    --span: 2;
+  }
+
+  .col-3 {
+    --span: 3;
+  }
+
+  .col-4 {
+    --span: 4;
+  }
+
+  .col-5 {
+    --span: 5;
+  }
+
+  .col-6 {
+    --span: 6;
+  }
+
+  .col-7 {
+    --span: 7;
+  }
+
+  .col-8 {
+    --span: 8;
+  }
+
+  .col-9 {
+    --span: 9;
+  }
+
+  .col-10 {
+    --span: 10;
+  }
+
+  .col-11 {
+    --span: 11;
+  }
+
+  .col-12 {
+    --span: 12;
+  }
 
   /* Offsets via grid-column-start */
-  .offset-1  { grid-column-start: 2; }
-  .offset-2  { grid-column-start: 3; }
-  .offset-3  { grid-column-start: 4; }
-  .offset-4  { grid-column-start: 5; }
-  .offset-5  { grid-column-start: 6; }
-  .offset-6  { grid-column-start: 7; }
+  .offset-1 {
+    grid-column-start: 2;
+  }
+
+  .offset-2 {
+    grid-column-start: 3;
+  }
+
+  .offset-3 {
+    grid-column-start: 4;
+  }
+
+  .offset-4 {
+    grid-column-start: 5;
+  }
+
+  .offset-5 {
+    grid-column-start: 6;
+  }
+
+  .offset-6 {
+    grid-column-start: 7;
+  }
 
   .col-end {
     grid-column-start: span var(--span, 1);
@@ -1265,29 +1387,62 @@
     grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
   }
 
-  /* Container-query breakpoints for .grid children */
-  @container (min-width: 640px) {
-    .grid { grid-template-columns: repeat(2, 1fr); }
+  /* .grid template-columns use @media (viewport) — a container cannot query
+   * its own size via @container; those rules would query the *parent* container,
+   * causing mismatches in sidebar layouts where content width < 1024px. */
+  @media (min-width: 640px) {
+    .grid {
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
+
+  @media (min-width: 1024px) {
+    .grid {
+      grid-template-columns: repeat(var(--grid-cols, 12), 1fr);
+    }
   }
-  @container (min-width: 1024px) {
-    .grid { grid-template-columns: repeat(var(--grid-cols, 12), 1fr); }
-    .grid > * { grid-column: span var(--span, 1); }
+
+  /* Children's column span responds to the .grid container's own width */
+  @container (min-width: 640px) {
+    .grid>* {
+      grid-column: span var(--span, 1);
+    }
   }
 
   /* Allow explicit column count override on .grid: .grid.cols-2, .grid.cols-3, etc. */
-  .grid.cols-2 { --grid-cols: 2; }
-  .grid.cols-3 { --grid-cols: 3; }
-  .grid.cols-4 { --grid-cols: 4; }
+  .grid.cols-2 {
+    --grid-cols: 2;
+  }
 
-  @container (min-width: 640px) {
-    .grid.cols-2, .grid.cols-3, .grid.cols-4 {
+  .grid.cols-3 {
+    --grid-cols: 3;
+  }
+
+  .grid.cols-4 {
+    --grid-cols: 4;
+  }
+
+  @media (min-width: 640px) {
+
+    .grid.cols-2,
+    .grid.cols-3,
+    .grid.cols-4 {
       grid-template-columns: repeat(2, 1fr);
     }
   }
-  @container (min-width: 1024px) {
-    .grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
-    .grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
-    .grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
+
+  @media (min-width: 1024px) {
+    .grid.cols-2 {
+      grid-template-columns: repeat(2, 1fr);
+    }
+
+    .grid.cols-3 {
+      grid-template-columns: repeat(3, 1fr);
+    }
+
+    .grid.cols-4 {
+      grid-template-columns: repeat(4, 1fr);
+    }
   }
 
   /* ── Responsive .row breakpoints (media queries) ───────────────────────── */
@@ -1297,9 +1452,12 @@
       --grid-cols: 1;
       --grid-gap: 1rem;
     }
-    .col, [class*="col-"] {
+
+    .col,
+    [class*="col-"] {
       --span: 1;
     }
+
     [class*="offset-"] {
       grid-column-start: auto;
     }
@@ -1311,9 +1469,12 @@
       --grid-cols: 4;
       --grid-gap: 1rem;
     }
-    .col, [class*="col-"] {
+
+    .col,
+    [class*="col-"] {
       --span: 4;
     }
+
     [class*="offset-"] {
       grid-column-start: auto;
     }
@@ -1322,68 +1483,209 @@
   /* ── Responsive column classes (media queries for power users) ─────────── */
   /* sm: 640px+ */
   @media (min-width: 640px) {
-    .sm\:col-1  { --span: 1; }
-    .sm\:col-2  { --span: 2; }
-    .sm\:col-3  { --span: 3; }
-    .sm\:col-4  { --span: 4; }
-    .sm\:col-5  { --span: 5; }
-    .sm\:col-6  { --span: 6; }
-    .sm\:col-7  { --span: 7; }
-    .sm\:col-8  { --span: 8; }
-    .sm\:col-9  { --span: 9; }
-    .sm\:col-10 { --span: 10; }
-    .sm\:col-11 { --span: 11; }
-    .sm\:col-12 { --span: 12; }
+    .sm\:col-1 {
+      --span: 1;
+    }
+
+    .sm\:col-2 {
+      --span: 2;
+    }
+
+    .sm\:col-3 {
+      --span: 3;
+    }
+
+    .sm\:col-4 {
+      --span: 4;
+    }
+
+    .sm\:col-5 {
+      --span: 5;
+    }
+
+    .sm\:col-6 {
+      --span: 6;
+    }
+
+    .sm\:col-7 {
+      --span: 7;
+    }
+
+    .sm\:col-8 {
+      --span: 8;
+    }
+
+    .sm\:col-9 {
+      --span: 9;
+    }
+
+    .sm\:col-10 {
+      --span: 10;
+    }
+
+    .sm\:col-11 {
+      --span: 11;
+    }
+
+    .sm\:col-12 {
+      --span: 12;
+    }
   }
 
   /* md: 768px+ */
   @media (min-width: 768px) {
-    .md\:col-1  { --span: 1; }
-    .md\:col-2  { --span: 2; }
-    .md\:col-3  { --span: 3; }
-    .md\:col-4  { --span: 4; }
-    .md\:col-5  { --span: 5; }
-    .md\:col-6  { --span: 6; }
-    .md\:col-7  { --span: 7; }
-    .md\:col-8  { --span: 8; }
-    .md\:col-9  { --span: 9; }
-    .md\:col-10 { --span: 10; }
-    .md\:col-11 { --span: 11; }
-    .md\:col-12 { --span: 12; }
+    .md\:col-1 {
+      --span: 1;
+    }
+
+    .md\:col-2 {
+      --span: 2;
+    }
+
+    .md\:col-3 {
+      --span: 3;
+    }
+
+    .md\:col-4 {
+      --span: 4;
+    }
+
+    .md\:col-5 {
+      --span: 5;
+    }
+
+    .md\:col-6 {
+      --span: 6;
+    }
+
+    .md\:col-7 {
+      --span: 7;
+    }
+
+    .md\:col-8 {
+      --span: 8;
+    }
+
+    .md\:col-9 {
+      --span: 9;
+    }
+
+    .md\:col-10 {
+      --span: 10;
+    }
+
+    .md\:col-11 {
+      --span: 11;
+    }
+
+    .md\:col-12 {
+      --span: 12;
+    }
   }
 
   /* lg: 1024px+ */
   @media (min-width: 1024px) {
-    .lg\:col-1  { --span: 1; }
-    .lg\:col-2  { --span: 2; }
-    .lg\:col-3  { --span: 3; }
-    .lg\:col-4  { --span: 4; }
-    .lg\:col-5  { --span: 5; }
-    .lg\:col-6  { --span: 6; }
-    .lg\:col-7  { --span: 7; }
-    .lg\:col-8  { --span: 8; }
-    .lg\:col-9  { --span: 9; }
-    .lg\:col-10 { --span: 10; }
-    .lg\:col-11 { --span: 11; }
-    .lg\:col-12 { --span: 12; }
+    .lg\:col-1 {
+      --span: 1;
+    }
+
+    .lg\:col-2 {
+      --span: 2;
+    }
+
+    .lg\:col-3 {
+      --span: 3;
+    }
+
+    .lg\:col-4 {
+      --span: 4;
+    }
+
+    .lg\:col-5 {
+      --span: 5;
+    }
+
+    .lg\:col-6 {
+      --span: 6;
+    }
+
+    .lg\:col-7 {
+      --span: 7;
+    }
+
+    .lg\:col-8 {
+      --span: 8;
+    }
+
+    .lg\:col-9 {
+      --span: 9;
+    }
+
+    .lg\:col-10 {
+      --span: 10;
+    }
+
+    .lg\:col-11 {
+      --span: 11;
+    }
+
+    .lg\:col-12 {
+      --span: 12;
+    }
   }
 
   /* xl: 1280px+ */
   @media (min-width: 1280px) {
-    .xl\:col-1  { --span: 1; }
-    .xl\:col-2  { --span: 2; }
-    .xl\:col-3  { --span: 3; }
-    .xl\:col-4  { --span: 4; }
-    .xl\:col-5  { --span: 5; }
-    .xl\:col-6  { --span: 6; }
-    .xl\:col-7  { --span: 7; }
-    .xl\:col-8  { --span: 8; }
-    .xl\:col-9  { --span: 9; }
-    .xl\:col-10 { --span: 10; }
-    .xl\:col-11 { --span: 11; }
-    .xl\:col-12 { --span: 12; }
+    .xl\:col-1 {
+      --span: 1;
+    }
+
+    .xl\:col-2 {
+      --span: 2;
+    }
+
+    .xl\:col-3 {
+      --span: 3;
+    }
+
+    .xl\:col-4 {
+      --span: 4;
+    }
+
+    .xl\:col-5 {
+      --span: 5;
+    }
+
+    .xl\:col-6 {
+      --span: 6;
+    }
+
+    .xl\:col-7 {
+      --span: 7;
+    }
+
+    .xl\:col-8 {
+      --span: 8;
+    }
+
+    .xl\:col-9 {
+      --span: 9;
+    }
+
+    .xl\:col-10 {
+      --span: 10;
+    }
+
+    .xl\:col-11 {
+      --span: 11;
+    }
+
+    .xl\:col-12 {
+      --span: 12;
+    }
   }
 }
+
 @layer base {
   progress {
     appearance: none;
@@ -1459,6 +1761,7 @@
     }
   }
 }
+
 @layer components {
   [data-sidebar-layout] {
     --topnav-offset: 0px;
@@ -1468,19 +1771,19 @@
     min-height: 100dvh;
     gap: var(--space-4);
 
-    > main {
+    >main {
       min-width: 0;
     }
 
     &:has(nav[data-topnav]) {
       --topnav-offset: var(--space-12);
 
-      > main [id] {
+      >main [id] {
         scroll-margin-block-start: calc(var(--space-12) + var(--space-6));
       }
     }
 
-    > aside[data-sidebar] {
+    >aside[data-sidebar] {
       position: sticky;
       top: var(--topnav-offset);
       z-index: 1;
@@ -1497,11 +1800,11 @@
         padding: var(--space-3);
       }
 
-      > footer {
+      >footer {
         margin-block-start: auto;
       }
 
-      > nav {
+      >nav {
         flex: 1;
         min-height: 0;
         overflow-y: auto;
@@ -1539,9 +1842,18 @@
           border: none;
           overflow: visible;
 
-          & + details { margin-top: 0; }
-          &[open] summary { border-bottom: none; }
-          > ul { margin-inline-start: var(--space-4); padding: var(--space-1) 0; }
+          &+details {
+            margin-top: 0;
+          }
+
+          &[open] summary {
+            border-bottom: none;
+          }
+
+          >ul {
+            margin-inline-start: var(--space-4);
+            padding: var(--space-1) 0;
+          }
         }
 
         summary {
@@ -1571,13 +1883,13 @@
     background-color: var(--background);
     border-bottom: 1px solid var(--border);
     box-shadow: var(--shadow-small);
-    
+
     a {
       text-decoration: none;
     }
   }
 
-  nav[data-topnav] ~ main {
+  nav[data-topnav]~main {
     margin-block-start: var(--space-12);
   }
 
@@ -1600,7 +1912,7 @@
         display: inline-block;
       }
 
-      > aside[data-sidebar] {
+      >aside[data-sidebar] {
         transform: translateX(0);
         opacity: 1;
         transition: transform var(--transition), opacity var(--transition), visibility var(--transition);
@@ -1610,7 +1922,7 @@
         grid-template-columns: 0px 1fr;
         gap: 0;
 
-        > aside[data-sidebar] {
+        >aside[data-sidebar] {
           overflow: hidden;
           min-width: 0;
           transform: translateX(-100%);
@@ -1626,7 +1938,7 @@
     [data-sidebar-layout] {
       grid-template-columns: 1fr;
 
-      > aside[data-sidebar] {
+      >aside[data-sidebar] {
         position: fixed;
         left: 0;
         width: min(16rem, 80vw);
@@ -1635,11 +1947,14 @@
         box-shadow: var(--shadow-large);
       }
 
-      &[data-sidebar-open] > aside[data-sidebar] {
+      &[data-sidebar-open]>aside[data-sidebar] {
         transform: translateX(0);
       }
     }
-    [data-sidebar-toggle] { display: inline-block; }
+
+    [data-sidebar-toggle] {
+      display: inline-block;
+    }
 
     [data-sidebar-header] {
       display: flex;
@@ -1650,24 +1965,21 @@
     }
   }
 }
+
 @layer components {
   [role="status"].skeleton {
-    --_c: light-dark(
-      color-mix(in srgb, var(--muted) 30%, white),
-      color-mix(in srgb, var(--muted) 90%, var(--foreground))
-    );
+    --_c: light-dark(color-mix(in srgb, var(--muted) 30%, white),
+        color-mix(in srgb, var(--muted) 90%, var(--foreground)));
 
     margin-block-end: var(--space-3);
     background: var(--muted);
     border-radius: var(--radius-medium);
     animation: anim 2s infinite;
     background-size: 200% 100%;
-    background-image: linear-gradient(
-      90deg,
-      var(--muted) 0%,
-      var(--_c) 50%,
-      var(--muted) 100%
-    );
+    background-image: linear-gradient(90deg,
+        var(--muted) 0%,
+        var(--_c) 50%,
+        var(--muted) 100%);
 
     &.box {
       width: 4rem;
@@ -1685,10 +1997,16 @@
   }
 
   @keyframes anim {
-    from { background-position: 200% 0; }
-    to { background-position: -200% 0; }
+    from {
+      background-position: 200% 0;
+    }
+
+    to {
+      background-position: -200% 0;
+    }
   }
 }
+
 @layer components {
   [aria-busy="true"] {
     &::before {
@@ -1719,7 +2037,7 @@
     &[data-spinner~="overlay"] {
       position: relative;
 
-      > * {
+      >* {
         opacity: 0.3;
 
         /* "disable" all elements in the container while it's busy */
@@ -1741,7 +2059,9 @@
     }
   }
 }
+
 @layer base {
+
   /* Container to get horizontal scroll on small screens. */
   .table {
     min-width: 320px;
@@ -1759,7 +2079,8 @@
     border-bottom: 1px solid var(--border);
   }
 
-  th, td {
+  th,
+  td {
     overflow-wrap: break-word;
   }
 
@@ -1787,6 +2108,7 @@
     }
   }
 }
+
 @layer components {
   [role="tablist"] {
     display: inline-flex;
@@ -1838,6 +2160,7 @@
     }
   }
 }
+
 @layer components {
   .toast-container {
     position: fixed;
@@ -1870,10 +2193,12 @@
 
     /* Stack full-width on narrow screens */
     @media (max-width: 639px) {
+
       &[data-placement="top-left"],
       &[data-placement="top-right"] {
         inset: var(--space-4) var(--space-2) auto var(--space-2);
       }
+
       &[data-placement="bottom-left"],
       &[data-placement="bottom-right"] {
         inset: auto var(--space-2) var(--space-4) var(--space-2);
@@ -1920,6 +2245,7 @@
       line-height: var(--leading-tight);
       margin: 0 0 var(--space-2) 0;
     }
+
     .toast-message {
       color: var(--muted-foreground);
       font-size: var(--text-7);
@@ -1928,6 +2254,7 @@
 
     &[data-variant="success"] {
       border-inline-start-color: var(--success);
+
       .toast-title {
         color: var(--success);
       }
@@ -1935,6 +2262,7 @@
 
     &[data-variant="danger"] {
       border-inline-start-color: var(--danger);
+
       .toast-title {
         color: var(--danger);
       }
@@ -1942,12 +2270,13 @@
 
     &[data-variant="warning"] {
       border-inline-start-color: var(--warning);
+
       .toast-title {
         color: var(--warning);
       }
     }
 
-    & > [data-close] {
+    &>[data-close] {
       margin-inline-start: auto;
       background: none;
       border: none;
@@ -1977,6 +2306,7 @@
     }
   }
 }
+
 @layer components {
   [data-tooltip] {
     position: relative;
@@ -2024,6 +2354,7 @@
     transform: translateX(-50%) translateY(0);
   }
 }
+
 @layer components {
   .avatar {
     --avatar-size: 40px;
@@ -2049,9 +2380,17 @@
     object-fit: cover;
   }
 
-  .avatar-sm { --avatar-size: 32px; }
-  .avatar-lg { --avatar-size: 48px; }
-  .avatar-xl { --avatar-size: 64px; }
+  .avatar-sm {
+    --avatar-size: 32px;
+  }
+
+  .avatar-lg {
+    --avatar-size: 48px;
+  }
+
+  .avatar-xl {
+    --avatar-size: 64px;
+  }
 
   .avatar-group {
     display: inline-flex;
@@ -2062,10 +2401,11 @@
     outline: 2px solid var(--background);
   }
 
-  .avatar-group .avatar + .avatar {
+  .avatar-group .avatar+.avatar {
     margin-inline-start: calc(var(--avatar-size) * -0.3);
   }
 }
+
 @layer components {
   .file-upload {
     display: flex;
@@ -2169,6 +2509,7 @@
     height: 1rem;
   }
 }
+
 @layer components {
   .otp-group {
     display: inline-flex;
@@ -2213,6 +2554,7 @@
     font-weight: var(--font-semibold);
   }
 }
+
 @layer components {
   .search-input {
     position: relative;
@@ -2298,6 +2640,7 @@
     display: none;
   }
 }
+
 @layer components {
   .separator-vertical {
     border-top: none;
@@ -2323,6 +2666,7 @@
     border-top: 1px solid var(--border);
   }
 }
+
 @layer components {
   .toggle {
     display: inline-flex;
@@ -2394,6 +2738,7 @@
     border-end-end-radius: var(--radius-medium);
   }
 }
+
 @layer components {
   .chip {
     display: inline-flex;
@@ -2580,6 +2925,7 @@
     padding: 0;
   }
 }
+
 @layer components {
   .carousel {
     position: relative;
@@ -2691,8 +3037,13 @@
     opacity: 0.9;
   }
 
-  .carousel-prev { left: var(--space-3); }
-  .carousel-next { right: var(--space-3); }
+  .carousel-prev {
+    left: var(--space-3);
+  }
+
+  .carousel-next {
+    right: var(--space-3);
+  }
 
   .carousel-prev:hover,
   .carousel-next:hover {
@@ -2782,13 +3133,21 @@
   }
 
   /* Aspect ratios */
-  .carousel.ratio-16-9 .carousel-slide { aspect-ratio: 16 / 9; }
-  .carousel.ratio-4-3 .carousel-slide { aspect-ratio: 4 / 3; }
-  .carousel.ratio-1-1 .carousel-slide { aspect-ratio: 1 / 1; }
-
-  /* ── Card Carousel ──────────────────────────────────────────────── */
-  .card-carousel {
-    position: relative;
+  .carousel.ratio-16-9 .carousel-slide {
+    aspect-ratio: 16 / 9;
+  }
+
+  .carousel.ratio-4-3 .carousel-slide {
+    aspect-ratio: 4 / 3;
+  }
+
+  .carousel.ratio-1-1 .carousel-slide {
+    aspect-ratio: 1 / 1;
+  }
+
+  /* ── Card Carousel ──────────────────────────────────────────────── */
+  .card-carousel {
+    position: relative;
   }
 
   .card-carousel-header {
@@ -3003,114 +3362,350 @@
     }
   }
 }
+
 @layer utilities {
+
   /* ── Text alignment ──────────────────────────────────────────────────── */
-  .align-left { text-align: start; }
-  .align-center { text-align: center; }
-  .align-right { text-align: end; }
+  .align-left {
+    text-align: start;
+  }
 
-  .text-left { text-align: start; }
-  .text-center { text-align: center; }
-  .text-right { text-align: end; }
+  .align-center {
+    text-align: center;
+  }
+
+  .align-right {
+    text-align: end;
+  }
+
+  .text-left {
+    text-align: start;
+  }
+
+  .text-center {
+    text-align: center;
+  }
+
+  .text-right {
+    text-align: end;
+  }
 
   /* ── Text colors ─────────────────────────────────────────────────────── */
-  .text-light { color: var(--muted-foreground); }
-  .text-lighter { color: var(--faint-foreground); }
-  .text-danger { color: var(--danger); }
-  .text-success { color: var(--success); }
-  .text-warning { color: var(--warning); }
-  .text-primary { color: var(--primary); }
-  .text-muted { color: var(--muted-foreground); }
+  .text-light {
+    color: var(--muted-foreground);
+  }
+
+  .text-lighter {
+    color: var(--faint-foreground);
+  }
+
+  .text-danger {
+    color: var(--danger);
+  }
+
+  .text-success {
+    color: var(--success);
+  }
+
+  .text-warning {
+    color: var(--warning);
+  }
+
+  .text-primary {
+    color: var(--primary);
+  }
+
+  .text-muted {
+    color: var(--muted-foreground);
+  }
 
   /* ── Text sizes (maps to theme tokens) ───────────────────────────────── */
-  .text-1 { font-size: var(--text-1); }
-  .text-2 { font-size: var(--text-2); }
-  .text-3 { font-size: var(--text-3); }
-  .text-4 { font-size: var(--text-4); }
-  .text-5 { font-size: var(--text-5); }
-  .text-6 { font-size: var(--text-6); }
-  .text-7 { font-size: var(--text-7); }
-  .text-8 { font-size: var(--text-8); }
-
-  .text-small { font-size: var(--text-7); }
-  .text-xs { font-size: var(--text-8); }
-  .text-regular { font-size: var(--text-regular); }
+  .text-1 {
+    font-size: var(--text-1);
+  }
+
+  .text-2 {
+    font-size: var(--text-2);
+  }
+
+  .text-3 {
+    font-size: var(--text-3);
+  }
+
+  .text-4 {
+    font-size: var(--text-4);
+  }
+
+  .text-5 {
+    font-size: var(--text-5);
+  }
+
+  .text-6 {
+    font-size: var(--text-6);
+  }
+
+  .text-7 {
+    font-size: var(--text-7);
+  }
+
+  .text-8 {
+    font-size: var(--text-8);
+  }
+
+  .text-small {
+    font-size: var(--text-7);
+  }
+
+  .text-xs {
+    font-size: var(--text-8);
+  }
+
+  .text-regular {
+    font-size: var(--text-regular);
+  }
 
   /* ── Font weight ─────────────────────────────────────────────────────── */
-  .font-normal { font-weight: var(--font-normal); }
-  .font-medium { font-weight: var(--font-medium); }
-  .font-semibold { font-weight: var(--font-semibold); }
-  .font-bold { font-weight: var(--font-bold); }
+  .font-normal {
+    font-weight: var(--font-normal);
+  }
+
+  .font-medium {
+    font-weight: var(--font-medium);
+  }
+
+  .font-semibold {
+    font-weight: var(--font-semibold);
+  }
+
+  .font-bold {
+    font-weight: var(--font-bold);
+  }
 
   /* ── Font family ─────────────────────────────────────────────────────── */
-  .font-sans { font-family: var(--font-sans); }
-  .font-mono { font-family: var(--font-mono); }
+  .font-sans {
+    font-family: var(--font-sans);
+  }
+
+  .font-mono {
+    font-family: var(--font-mono);
+  }
 
   /* ── Line-height ─────────────────────────────────────────────────────── */
-  .leading-none { line-height: var(--leading-none); }
-  .leading-tight { line-height: var(--leading-tight); }
-  .leading-snug { line-height: var(--leading-snug); }
-  .leading-normal { line-height: var(--leading-normal); }
-  .leading-relaxed { line-height: var(--leading-relaxed); }
-  .leading-loose { line-height: var(--leading-loose); }
+  .leading-none {
+    line-height: var(--leading-none);
+  }
+
+  .leading-tight {
+    line-height: var(--leading-tight);
+  }
+
+  .leading-snug {
+    line-height: var(--leading-snug);
+  }
+
+  .leading-normal {
+    line-height: var(--leading-normal);
+  }
+
+  .leading-relaxed {
+    line-height: var(--leading-relaxed);
+  }
+
+  .leading-loose {
+    line-height: var(--leading-loose);
+  }
 
   /* ── Letter-spacing ──────────────────────────────────────────────────── */
-  .tracking-tighter { letter-spacing: var(--tracking-tighter); }
-  .tracking-tight { letter-spacing: var(--tracking-tight); }
-  .tracking-normal { letter-spacing: var(--tracking-normal); }
-  .tracking-wide { letter-spacing: var(--tracking-wide); }
-  .tracking-wider { letter-spacing: var(--tracking-wider); }
-  .tracking-widest { letter-spacing: var(--tracking-widest); }
+  .tracking-tighter {
+    letter-spacing: var(--tracking-tighter);
+  }
+
+  .tracking-tight {
+    letter-spacing: var(--tracking-tight);
+  }
+
+  .tracking-normal {
+    letter-spacing: var(--tracking-normal);
+  }
+
+  .tracking-wide {
+    letter-spacing: var(--tracking-wide);
+  }
+
+  .tracking-wider {
+    letter-spacing: var(--tracking-wider);
+  }
+
+  .tracking-widest {
+    letter-spacing: var(--tracking-widest);
+  }
 
   /* ── Text transform ──────────────────────────────────────────────────── */
-  .uppercase { text-transform: uppercase; }
-  .lowercase { text-transform: lowercase; }
-  .capitalize { text-transform: capitalize; }
-  .normal-case { text-transform: none; }
+  .uppercase {
+    text-transform: uppercase;
+  }
+
+  .lowercase {
+    text-transform: lowercase;
+  }
+
+  .capitalize {
+    text-transform: capitalize;
+  }
+
+  .normal-case {
+    text-transform: none;
+  }
 
   /* ── Text decoration ─────────────────────────────────────────────────── */
-  .underline { text-decoration-line: underline; }
-  .overline { text-decoration-line: overline; }
-  .line-through { text-decoration-line: line-through; }
-  .no-underline { text-decoration-line: none; }
+  .underline {
+    text-decoration-line: underline;
+  }
+
+  .overline {
+    text-decoration-line: overline;
+  }
+
+  .line-through {
+    text-decoration-line: line-through;
+  }
+
+  .no-underline {
+    text-decoration-line: none;
+  }
 
   /* ── Text wrapping ───────────────────────────────────────────────────── */
-  .text-balance { text-wrap: balance; }
-  .text-pretty { text-wrap: pretty; }
-  .text-nowrap { text-wrap: nowrap; }
+  .text-balance {
+    text-wrap: balance;
+  }
+
+  .text-pretty {
+    text-wrap: pretty;
+  }
+
+  .text-nowrap {
+    text-wrap: nowrap;
+  }
 
   /* ── White-space ─────────────────────────────────────────────────────── */
-  .whitespace-normal { white-space: normal; }
-  .whitespace-nowrap { white-space: nowrap; }
-  .whitespace-pre { white-space: pre; }
-  .whitespace-pre-line { white-space: pre-line; }
-  .whitespace-pre-wrap { white-space: pre-wrap; }
+  .whitespace-normal {
+    white-space: normal;
+  }
+
+  .whitespace-nowrap {
+    white-space: nowrap;
+  }
+
+  .whitespace-pre {
+    white-space: pre;
+  }
+
+  .whitespace-pre-line {
+    white-space: pre-line;
+  }
+
+  .whitespace-pre-wrap {
+    white-space: pre-wrap;
+  }
 
   /* ── Line clamp (multi-line truncation) ──────────────────────────────── */
-  .line-clamp-1 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; }
-  .line-clamp-2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
-  .line-clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
-  .line-clamp-4 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
-  .line-clamp-none { display: block; -webkit-box-orient: initial; -webkit-line-clamp: none; overflow: visible; }
+  .line-clamp-1 {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+    overflow: hidden;
+  }
+
+  .line-clamp-2 {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+  }
+
+  .line-clamp-3 {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+    overflow: hidden;
+  }
+
+  .line-clamp-4 {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 4;
+    overflow: hidden;
+  }
+
+  .line-clamp-none {
+    display: block;
+    -webkit-box-orient: initial;
+    -webkit-line-clamp: none;
+    overflow: visible;
+  }
 
   /* ── Word break ──────────────────────────────────────────────────────── */
-  .break-normal { overflow-wrap: normal; word-break: normal; }
-  .break-words { overflow-wrap: break-word; }
-  .break-all { word-break: break-all; }
+  .break-normal {
+    overflow-wrap: normal;
+    word-break: normal;
+  }
+
+  .break-words {
+    overflow-wrap: break-word;
+  }
+
+  .break-all {
+    word-break: break-all;
+  }
 
   /* ── Flexbox ─────────────────────────────────────────────────────────── */
-  .flex { display: flex; }
-  .flex-col { flex-direction: column; }
-  .flex-row { flex-direction: row; }
-  .flex-wrap { flex-wrap: wrap; }
-  .flex-1 { flex: 1; }
-  .items-center { align-items: center; }
-  .items-start { align-items: flex-start; }
-  .items-end { align-items: flex-end; }
-  .justify-center { justify-content: center; }
-  .justify-between { justify-content: space-between; }
-  .justify-end { justify-content: flex-end; }
-  .justify-start { justify-content: flex-start; }
+  .flex {
+    display: flex;
+  }
+
+  .flex-col {
+    flex-direction: column;
+  }
+
+  .flex-row {
+    flex-direction: row;
+  }
+
+  .flex-wrap {
+    flex-wrap: wrap;
+  }
+
+  .flex-1 {
+    flex: 1;
+  }
+
+  .items-center {
+    align-items: center;
+  }
+
+  .items-start {
+    align-items: flex-start;
+  }
+
+  .items-end {
+    align-items: flex-end;
+  }
+
+  .justify-center {
+    justify-content: center;
+  }
+
+  .justify-between {
+    justify-content: space-between;
+  }
+
+  .justify-end {
+    justify-content: flex-end;
+  }
+
+  .justify-start {
+    justify-content: flex-start;
+  }
 
   /* Bootstrap inspired. */
   .hstack {
@@ -3125,6 +3720,7 @@
       margin: 0;
     }
   }
+
   .vstack {
     display: flex;
     flex-direction: column;
@@ -3132,59 +3728,174 @@
   }
 
   /* ── Gap ──────────────────────────────────────────────────────────────── */
-  .gap-1 { gap: var(--space-1); }
-  .gap-2 { gap: var(--space-2); }
-  .gap-3 { gap: var(--space-3); }
-  .gap-4 { gap: var(--space-4); }
-  .gap-6 { gap: var(--space-6); }
-  .gap-8 { gap: var(--space-8); }
+  .gap-1 {
+    gap: var(--space-1);
+  }
+
+  .gap-2 {
+    gap: var(--space-2);
+  }
+
+  .gap-3 {
+    gap: var(--space-3);
+  }
+
+  .gap-4 {
+    gap: var(--space-4);
+  }
+
+  .gap-6 {
+    gap: var(--space-6);
+  }
+
+  .gap-8 {
+    gap: var(--space-8);
+  }
 
   /* ── Margin ──────────────────────────────────────────────────────────── */
-  .mt-0 { margin-block-start: 0; }
-  .mt-2 { margin-block-start: var(--space-2); }
-  .mt-4 { margin-block-start: var(--space-4); }
-  .mt-6 { margin-block-start: var(--space-6); }
-  .mt-8 { margin-block-start: var(--space-8); }
-
-  .mb-0 { margin-block-end: 0; }
-  .mb-2 { margin-block-end: var(--space-2); }
-  .mb-4 { margin-block-end: var(--space-4); }
-  .mb-6 { margin-block-end: var(--space-6); }
-  .mb-8 { margin-block-end: var(--space-8); }
+  .mt-0 {
+    margin-block-start: 0;
+  }
+
+  .mt-2 {
+    margin-block-start: var(--space-2);
+  }
+
+  .mt-4 {
+    margin-block-start: var(--space-4);
+  }
+
+  .mt-6 {
+    margin-block-start: var(--space-6);
+  }
+
+  .mt-8 {
+    margin-block-start: var(--space-8);
+  }
+
+  .mb-0 {
+    margin-block-end: 0;
+  }
+
+  .mb-2 {
+    margin-block-end: var(--space-2);
+  }
+
+  .mb-4 {
+    margin-block-end: var(--space-4);
+  }
+
+  .mb-6 {
+    margin-block-end: var(--space-6);
+  }
+
+  .mb-8 {
+    margin-block-end: var(--space-8);
+  }
 
   /* ── Padding ─────────────────────────────────────────────────────────── */
-  .p-0 { padding: 0; }
-  .p-2 { padding: var(--space-2); }
-  .p-4 { padding: var(--space-4); }
-  .p-6 { padding: var(--space-6); }
-  .p-8 { padding: var(--space-8); }
+  .p-0 {
+    padding: 0;
+  }
+
+  .p-2 {
+    padding: var(--space-2);
+  }
 
-  .px-2 { padding-inline: var(--space-2); }
-  .px-4 { padding-inline: var(--space-4); }
-  .py-2 { padding-block: var(--space-2); }
-  .py-4 { padding-block: var(--space-4); }
+  .p-4 {
+    padding: var(--space-4);
+  }
+
+  .p-6 {
+    padding: var(--space-6);
+  }
+
+  .p-8 {
+    padding: var(--space-8);
+  }
+
+  .px-2 {
+    padding-inline: var(--space-2);
+  }
+
+  .px-4 {
+    padding-inline: var(--space-4);
+  }
+
+  .py-2 {
+    padding-block: var(--space-2);
+  }
+
+  .py-4 {
+    padding-block: var(--space-4);
+  }
 
   /* ── Width ───────────────────────────────────────────────────────────── */
-  .w-100 { width: 100%; }
-  .w-auto { width: auto; }
-  .max-w-sm { max-width: 24rem; }
-  .max-w-md { max-width: 28rem; }
-  .max-w-lg { max-width: 32rem; }
-  .max-w-xl { max-width: 36rem; }
+  .w-100 {
+    width: 100%;
+  }
+
+  .w-auto {
+    width: auto;
+  }
+
+  .max-w-sm {
+    max-width: 24rem;
+  }
+
+  .max-w-md {
+    max-width: 28rem;
+  }
+
+  .max-w-lg {
+    max-width: 32rem;
+  }
+
+  .max-w-xl {
+    max-width: 36rem;
+  }
 
   /* ── Display ─────────────────────────────────────────────────────────── */
-  .d-none { display: none; }
-  .d-block { display: block; }
-  .d-flex { display: flex; }
-  .d-grid { display: grid; }
-  .d-inline { display: inline; }
-  .d-inline-block { display: inline-block; }
-  .d-inline-flex { display: inline-flex; }
+  .d-none {
+    display: none;
+  }
+
+  .d-block {
+    display: block;
+  }
+
+  .d-flex {
+    display: flex;
+  }
+
+  .d-grid {
+    display: grid;
+  }
+
+  .d-inline {
+    display: inline;
+  }
+
+  .d-inline-block {
+    display: inline-block;
+  }
+
+  .d-inline-flex {
+    display: inline-flex;
+  }
 
   /* ── Overflow ─────────────────────────────────────────────────────────── */
-  .overflow-auto { overflow: auto; }
-  .overflow-hidden { overflow: hidden; }
-  .overflow-x-auto { overflow-x: auto; }
+  .overflow-auto {
+    overflow: auto;
+  }
+
+  .overflow-hidden {
+    overflow: hidden;
+  }
+
+  .overflow-x-auto {
+    overflow-x: auto;
+  }
 
   /* ── Misc ─────────────────────────────────────────────────────────────── */
   .truncate {
@@ -3213,117 +3924,340 @@
 
   /* ── Responsive display utilities (media queries) ────────────────────── */
   @media (max-width: 639px) {
-    .sm\:d-none { display: none; }
-    .hide-mobile { display: none; }
+    .sm\:d-none {
+      display: none;
+    }
+
+    .hide-mobile {
+      display: none;
+    }
   }
+
   @media (min-width: 640px) {
-    .sm\:d-block { display: block; }
-    .sm\:d-flex { display: flex; }
-    .sm\:d-grid { display: grid; }
-    .sm\:d-none { display: none; }
-    .sm\:flex-row { flex-direction: row; }
-    .sm\:flex-col { flex-direction: column; }
-    .show-mobile { display: none; }
+    .sm\:d-block {
+      display: block;
+    }
+
+    .sm\:d-flex {
+      display: flex;
+    }
+
+    .sm\:d-grid {
+      display: grid;
+    }
+
+    .sm\:d-none {
+      display: none;
+    }
+
+    .sm\:flex-row {
+      flex-direction: row;
+    }
+
+    .sm\:flex-col {
+      flex-direction: column;
+    }
+
+    .show-mobile {
+      display: none;
+    }
   }
+
   @media (min-width: 768px) {
-    .md\:d-block { display: block; }
-    .md\:d-flex { display: flex; }
-    .md\:d-grid { display: grid; }
-    .md\:d-none { display: none; }
-    .md\:flex-row { flex-direction: row; }
-    .md\:flex-col { flex-direction: column; }
+    .md\:d-block {
+      display: block;
+    }
+
+    .md\:d-flex {
+      display: flex;
+    }
+
+    .md\:d-grid {
+      display: grid;
+    }
+
+    .md\:d-none {
+      display: none;
+    }
+
+    .md\:flex-row {
+      flex-direction: row;
+    }
+
+    .md\:flex-col {
+      flex-direction: column;
+    }
   }
+
   @media (min-width: 1024px) {
-    .lg\:d-block { display: block; }
-    .lg\:d-flex { display: flex; }
-    .lg\:d-grid { display: grid; }
-    .lg\:d-none { display: none; }
-    .lg\:flex-row { flex-direction: row; }
-    .lg\:flex-col { flex-direction: column; }
+    .lg\:d-block {
+      display: block;
+    }
+
+    .lg\:d-flex {
+      display: flex;
+    }
+
+    .lg\:d-grid {
+      display: grid;
+    }
+
+    .lg\:d-none {
+      display: none;
+    }
+
+    .lg\:flex-row {
+      flex-direction: row;
+    }
+
+    .lg\:flex-col {
+      flex-direction: column;
+    }
   }
+
   @media (min-width: 1280px) {
-    .xl\:d-block { display: block; }
-    .xl\:d-flex { display: flex; }
-    .xl\:d-grid { display: grid; }
-    .xl\:d-none { display: none; }
+    .xl\:d-block {
+      display: block;
+    }
+
+    .xl\:d-flex {
+      display: flex;
+    }
+
+    .xl\:d-grid {
+      display: grid;
+    }
+
+    .xl\:d-none {
+      display: none;
+    }
   }
 
   /* ── Responsive text alignment ───────────────────────────────────────── */
   @media (min-width: 640px) {
-    .sm\:text-left { text-align: start; }
-    .sm\:text-center { text-align: center; }
-    .sm\:text-right { text-align: end; }
+    .sm\:text-left {
+      text-align: start;
+    }
+
+    .sm\:text-center {
+      text-align: center;
+    }
+
+    .sm\:text-right {
+      text-align: end;
+    }
   }
+
   @media (min-width: 768px) {
-    .md\:text-left { text-align: start; }
-    .md\:text-center { text-align: center; }
-    .md\:text-right { text-align: end; }
+    .md\:text-left {
+      text-align: start;
+    }
+
+    .md\:text-center {
+      text-align: center;
+    }
+
+    .md\:text-right {
+      text-align: end;
+    }
   }
+
   @media (min-width: 1024px) {
-    .lg\:text-left { text-align: start; }
-    .lg\:text-center { text-align: center; }
-    .lg\:text-right { text-align: end; }
+    .lg\:text-left {
+      text-align: start;
+    }
+
+    .lg\:text-center {
+      text-align: center;
+    }
+
+    .lg\:text-right {
+      text-align: end;
+    }
   }
 
   /* ── Responsive text sizes ─────────────────────────────────────────── */
   @media (min-width: 640px) {
-    .sm\:text-1 { font-size: var(--text-1); }
-    .sm\:text-2 { font-size: var(--text-2); }
-    .sm\:text-3 { font-size: var(--text-3); }
-    .sm\:text-4 { font-size: var(--text-4); }
-    .sm\:text-5 { font-size: var(--text-5); }
-    .sm\:text-6 { font-size: var(--text-6); }
-    .sm\:text-7 { font-size: var(--text-7); }
-    .sm\:text-8 { font-size: var(--text-8); }
+    .sm\:text-1 {
+      font-size: var(--text-1);
+    }
+
+    .sm\:text-2 {
+      font-size: var(--text-2);
+    }
+
+    .sm\:text-3 {
+      font-size: var(--text-3);
+    }
+
+    .sm\:text-4 {
+      font-size: var(--text-4);
+    }
+
+    .sm\:text-5 {
+      font-size: var(--text-5);
+    }
+
+    .sm\:text-6 {
+      font-size: var(--text-6);
+    }
+
+    .sm\:text-7 {
+      font-size: var(--text-7);
+    }
+
+    .sm\:text-8 {
+      font-size: var(--text-8);
+    }
   }
+
   @media (min-width: 768px) {
-    .md\:text-1 { font-size: var(--text-1); }
-    .md\:text-2 { font-size: var(--text-2); }
-    .md\:text-3 { font-size: var(--text-3); }
-    .md\:text-4 { font-size: var(--text-4); }
-    .md\:text-5 { font-size: var(--text-5); }
-    .md\:text-6 { font-size: var(--text-6); }
-    .md\:text-7 { font-size: var(--text-7); }
-    .md\:text-8 { font-size: var(--text-8); }
+    .md\:text-1 {
+      font-size: var(--text-1);
+    }
+
+    .md\:text-2 {
+      font-size: var(--text-2);
+    }
+
+    .md\:text-3 {
+      font-size: var(--text-3);
+    }
+
+    .md\:text-4 {
+      font-size: var(--text-4);
+    }
+
+    .md\:text-5 {
+      font-size: var(--text-5);
+    }
+
+    .md\:text-6 {
+      font-size: var(--text-6);
+    }
+
+    .md\:text-7 {
+      font-size: var(--text-7);
+    }
+
+    .md\:text-8 {
+      font-size: var(--text-8);
+    }
   }
+
   @media (min-width: 1024px) {
-    .lg\:text-1 { font-size: var(--text-1); }
-    .lg\:text-2 { font-size: var(--text-2); }
-    .lg\:text-3 { font-size: var(--text-3); }
-    .lg\:text-4 { font-size: var(--text-4); }
-    .lg\:text-5 { font-size: var(--text-5); }
-    .lg\:text-6 { font-size: var(--text-6); }
-    .lg\:text-7 { font-size: var(--text-7); }
-    .lg\:text-8 { font-size: var(--text-8); }
+    .lg\:text-1 {
+      font-size: var(--text-1);
+    }
+
+    .lg\:text-2 {
+      font-size: var(--text-2);
+    }
+
+    .lg\:text-3 {
+      font-size: var(--text-3);
+    }
+
+    .lg\:text-4 {
+      font-size: var(--text-4);
+    }
+
+    .lg\:text-5 {
+      font-size: var(--text-5);
+    }
+
+    .lg\:text-6 {
+      font-size: var(--text-6);
+    }
+
+    .lg\:text-7 {
+      font-size: var(--text-7);
+    }
+
+    .lg\:text-8 {
+      font-size: var(--text-8);
+    }
   }
 
   /* ── Responsive gap ──────────────────────────────────────────────────── */
   @media (min-width: 640px) {
-    .sm\:gap-2 { gap: var(--space-2); }
-    .sm\:gap-4 { gap: var(--space-4); }
-    .sm\:gap-6 { gap: var(--space-6); }
-    .sm\:gap-8 { gap: var(--space-8); }
+    .sm\:gap-2 {
+      gap: var(--space-2);
+    }
+
+    .sm\:gap-4 {
+      gap: var(--space-4);
+    }
+
+    .sm\:gap-6 {
+      gap: var(--space-6);
+    }
+
+    .sm\:gap-8 {
+      gap: var(--space-8);
+    }
   }
+
   @media (min-width: 768px) {
-    .md\:gap-2 { gap: var(--space-2); }
-    .md\:gap-4 { gap: var(--space-4); }
-    .md\:gap-6 { gap: var(--space-6); }
-    .md\:gap-8 { gap: var(--space-8); }
+    .md\:gap-2 {
+      gap: var(--space-2);
+    }
+
+    .md\:gap-4 {
+      gap: var(--space-4);
+    }
+
+    .md\:gap-6 {
+      gap: var(--space-6);
+    }
+
+    .md\:gap-8 {
+      gap: var(--space-8);
+    }
   }
 
   /* ── Responsive padding ──────────────────────────────────────────────── */
   @media (min-width: 640px) {
-    .sm\:p-4 { padding: var(--space-4); }
-    .sm\:p-6 { padding: var(--space-6); }
-    .sm\:p-8 { padding: var(--space-8); }
-    .sm\:px-4 { padding-inline: var(--space-4); }
-    .sm\:px-6 { padding-inline: var(--space-6); }
+    .sm\:p-4 {
+      padding: var(--space-4);
+    }
+
+    .sm\:p-6 {
+      padding: var(--space-6);
+    }
+
+    .sm\:p-8 {
+      padding: var(--space-8);
+    }
+
+    .sm\:px-4 {
+      padding-inline: var(--space-4);
+    }
+
+    .sm\:px-6 {
+      padding-inline: var(--space-6);
+    }
   }
+
   @media (min-width: 768px) {
-    .md\:p-4 { padding: var(--space-4); }
-    .md\:p-6 { padding: var(--space-6); }
-    .md\:p-8 { padding: var(--space-8); }
-    .md\:px-4 { padding-inline: var(--space-4); }
-    .md\:px-6 { padding-inline: var(--space-6); }
+    .md\:p-4 {
+      padding: var(--space-4);
+    }
+
+    .md\:p-6 {
+      padding: var(--space-6);
+    }
+
+    .md\:p-8 {
+      padding: var(--space-8);
+    }
+
+    .md\:px-4 {
+      padding-inline: var(--space-4);
+    }
+
+    .md\:px-6 {
+      padding-inline: var(--space-6);
+    }
   }
-}
+}