@donotdev/ui 0.0.12 → 0.0.14

package/dist/styles/index.css

@@ -121,6 +121,15 @@
   --popover: var(--card);
   --popover-foreground: var(--card-foreground);
 
+  /*
+   * Root card snapshot — computed once on :root from --card/--card-foreground,
+   * then inherited unchanged. Variant blocks (e.g. primary) override --card but
+   * never touch these, so data-variant='default' can reset --card back to the
+   * root value even when nested inside another variant.
+   */
+  --card-base: var(--card);
+  --card-foreground-base: var(--card-foreground);
+
   /* ===========================
      BORDER RADIUS - 3 VALUES ONLY
      =========================== */
@@ -216,6 +225,16 @@
     -6px 12px 24px -6px var(--shadow-color),
     -3px 6px 12px -3px var(--shadow-color-light);
 
+  /* Root shadow snapshots — same principle as --card-base (see above) */
+  --shadow-md-base: var(--shadow-md);
+  --shadow-xl-base: var(--shadow-xl);
+
+  /* Per-variant shadows — essences override these with different colors/shapes */
+  --shadow-primary: var(--shadow-md);
+  --shadow-primary-xl: var(--shadow-xl);
+  --shadow-secondary: var(--shadow-md);
+  --shadow-secondary-xl: var(--shadow-xl);
+
   /* Interactive shadows */
   --shadow-interactive: 0 0 0 3px
     color-mix(in oklab, var(--ring) 20%, transparent);
@@ -519,7 +538,6 @@ body {
 /* Reset and base styles */
 
 :root {
-  font-family: var(--font-sans);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-rendering: optimizeLegibility;
@@ -533,9 +551,10 @@ body {
   box-sizing: border-box;
 }
 
-/* Set core body defaults */
+/* Set core body defaults — font-family here so theme tokens on :root cascade cleanly */
 
 body {
+  font-family: var(--font-family, var(--font-sans));
   min-height: 100dvh;
   line-height: var(--line-height);
   text-rendering: optimizeSpeed;
@@ -610,17 +629,21 @@ h6 {
   color: var(--foreground);
   background: transparent;
   text-wrap: balance; /* Equalize line lengths, prevent orphans */
+  text-transform: var(--text-transform-heading, none);
+  letter-spacing: var(--letter-spacing-heading, normal);
 }
 
-h1 {
+:is(h1, h2, h3, h4, h5, h6) {
   font-family: var(--font-headline);
+}
+
+h1 {
   font-size: var(--font-size-3xl);
   font-weight: var(--font-weight-bold);
   letter-spacing: -0.02em;
 }
 
 h2 {
-  font-family: var(--font-headline);
   font-size: var(--font-size-2xl);
   font-weight: var(--font-weight-bold);
   letter-spacing: -0.01em;
@@ -1051,10 +1074,20 @@ em {
    * - accent: Highlighted/active state (--accent colors, sets context for children)
    * - destructive: Error/danger state (--destructive colors)
    * 
-   * Variants only override --card and --card-foreground.
+   * Variants override --card and --card-foreground.
+   * Primary/secondary also override --shadow-md/--shadow-xl for per-variant shadows.
+   * Default resets --card from --card-base (root snapshot) so nested default cards
+   * inside other variants get the root card color, not the parent's.
    * Surface glow gradient is computed from --theme-is-dark flag and not affected by variants.
    */
 
+.dndev-surface[data-variant='default'] {
+    --card: var(--card-base);
+    --card-foreground: var(--card-foreground-base);
+    --shadow-md: var(--shadow-md-base);
+    --shadow-xl: var(--shadow-xl-base);
+  }
+
 .dndev-surface[data-variant='muted'] {
     --card: var(--muted);
     --card-foreground: var(--muted-foreground);
@@ -1064,12 +1097,16 @@ em {
 .dndev-surface[data-variant='primary'] {
     --card: var(--primary);
     --card-foreground: var(--primary-foreground);
+    --shadow-md: var(--shadow-primary);
+    --shadow-xl: var(--shadow-primary-xl);
     border-color: var(--primary);
   }
 
 .dndev-surface[data-variant='secondary'] {
     --card: var(--secondary);
     --card-foreground: var(--secondary-foreground);
+    --shadow-md: var(--shadow-secondary);
+    --shadow-xl: var(--shadow-secondary-xl);
     border-color: var(--secondary);
   }
 
@@ -1351,6 +1388,7 @@ em {
   border-radius: var(--radius-interactive);
   font-size: var(--font-size-base);
   font-weight: var(--font-weight-medium);
+  text-transform: var(--text-transform-button, none);
   transition: var(--transition-fast);
   cursor: pointer;
   border: var(--border-hairline) solid transparent;
@@ -1641,6 +1679,7 @@ em {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  text-transform: var(--text-transform-label, none);
 }
 
 /* Compact mode - always hide label */
@@ -1706,7 +1745,8 @@ em {
 
 .dndev-control[data-state='checked'],.dndev-control[data-state='on'],.dndev-control[data-pressed='true'] {
     background-color: var(--control-border);
-    color: var(--background);
+    /* --card not --background: inverted text must be opaque (--background can be transparent in some themes) */
+    color: var(--card);
   }
 
 /* CONTROL GROUP - Shared pattern for grouped controls (RadioGroup, Checkbox groups) */
@@ -2012,7 +2052,7 @@ em {
   height: var(--icon-md);
   border: 2px solid currentColor;
   border-radius: var(--radius-full);
-  border-right-color: transparent;
+  border-inline-end-color: transparent;
   animation: spin 1s linear infinite;
 }
 
@@ -2352,7 +2392,6 @@ em {
   flex-shrink: 0;
   overflow: hidden;
   border-radius: var(--radius-full);
-  border: 1px solid var(--border);
 }
 
 .dndev-avatar-image {
@@ -2809,8 +2848,7 @@ em {
 .dndev-calendar-nav {
   position: absolute;
   top: 0;
-  left: 0;
-  right: 0;
+  inset-inline: 0;
   height: var(--touch-target);
   pointer-events: none;
   z-index: 1;
@@ -2840,13 +2878,13 @@ em {
 }
 
 .dndev-calendar-nav-previous {
-  left: 0;
+  inset-inline-start: 0;
   border-start-start-radius: 0;
   border-end-start-radius: 0;
 }
 
 .dndev-calendar-nav-next {
-  right: 0;
+  inset-inline-end: 0;
   border-start-end-radius: 0;
   border-end-end-radius: 0;
 }
@@ -3092,13 +3130,10 @@ em {
   background: var(--muted);
 }
 
-.dndev-cta[data-tone='elevated'] {
-  background: var(--background);
-}
-
 .dndev-cta[data-tone='contrast'] {
   background: var(--foreground);
-  color: var(--background);
+  /* --card not --background: inverted text must be opaque (--background can be transparent in some themes) */
+  color: var(--card);
 }
 
 .dndev-cta[data-tone='accent'] {
@@ -3143,7 +3178,6 @@ em {
   flex-direction: row;
   gap: var(--gap-md);
   justify-content: center;
-
 }
 
 .dndev-cta-actions .dndev-interactive {
@@ -3154,7 +3188,8 @@ em {
 
 .dndev-cta-actions .dndev-interactive[data-variant='primary'] {
     background: var(--foreground);
-    color: var(--background);
+    /* --card not --background: inverted text must be opaque */
+    color: var(--card);
     border-color: var(--foreground);
   }
 
@@ -3172,7 +3207,8 @@ em {
 
 :is(.dndev-cta-actions .dndev-interactive[data-variant='outline']):hover {
       background: var(--foreground);
-      color: var(--background);
+      /* --card not --background: inverted text must be opaque */
+      color: var(--card);
       border-color: var(--foreground);
     }
 
@@ -3387,7 +3423,7 @@ em {
   justify-content: space-between;
   align-items: center;
   width: 100%;
-  text-align: left;
+  text-align: start;
 }
 
 .dndev-combobox-trigger button {
@@ -3729,8 +3765,9 @@ em {
 }
 
 .dndev-code-line-number {
-  line-height: inherit;
-  /* Inherit from parent */
+  line-height: 1.5;
+  min-height: 1.5em;
+  font-size: inherit;
 }
 
 .dndev-code-code {
@@ -3750,7 +3787,21 @@ em {
 .dndev-code-code code {
   line-height: inherit;
   font-size: inherit;
-  /* Match parent font-size */
+}
+
+/* Shiki wraps each line in <span class="line"> — force consistent sizing */
+
+.dndev-code-code .line {
+  display: block;
+  line-height: 1.5;
+  font-size: inherit;
+  min-height: 1.5em;
+}
+
+/* Empty Shiki lines still need height to stay in sync with line numbers */
+
+.dndev-code-code .line:empty::after {
+  content: '\00a0';
 }
 
 /* packages/components/src/atomic/Command/Command.css */
@@ -3914,7 +3965,7 @@ em {
     order: 3;
     font-size: var(--font-size-xs);
     color: var(--muted-foreground);
-    padding-left: calc(var(--icon-md) + var(--gap-sm));
+    padding-inline-start: calc(var(--icon-md) + var(--gap-sm));
   }
 
   .dndev-command-favorite-button {
@@ -4200,6 +4251,54 @@ em {
   }
 }
 
+/* Responsive templateColumns via custom properties */
+
+.dndev-grid-component[data-responsive-tpl='true'] {
+  grid-template-columns: var(--grid-tpl-mobile);
+}
+
+@media (min-width: 768px) {
+  .dndev-grid-component[data-responsive-tpl='true'] {
+    grid-template-columns: var(--grid-tpl-tablet);
+  }
+}
+
+@media (min-width: 1024px) {
+  .dndev-grid-component[data-responsive-tpl='true'] {
+    grid-template-columns: var(--grid-tpl-laptop);
+  }
+}
+
+@media (min-width: 1440px) {
+  .dndev-grid-component[data-responsive-tpl='true'] {
+    grid-template-columns: var(--grid-tpl-desktop);
+  }
+}
+
+/* Responsive grid areas via custom properties */
+
+.dndev-grid-component[data-responsive-areas='true'] {
+  grid-template-areas: var(--grid-areas-mobile);
+}
+
+@media (min-width: 768px) {
+  .dndev-grid-component[data-responsive-areas='true'] {
+    grid-template-areas: var(--grid-areas-tablet);
+  }
+}
+
+@media (min-width: 1024px) {
+  .dndev-grid-component[data-responsive-areas='true'] {
+    grid-template-areas: var(--grid-areas-laptop);
+  }
+}
+
+@media (min-width: 1440px) {
+  .dndev-grid-component[data-responsive-areas='true'] {
+    grid-template-areas: var(--grid-areas-desktop);
+  }
+}
+
 /* Spacing from CSS variables */
 
 .dndev-grid-component[data-gap='none'] {
@@ -4513,7 +4612,8 @@ em {
   height: 44px;
   border: none;
   border-radius: var(--radius-full);
-  background-color: var(--background);
+  /* --card not --background: surface must be opaque */
+  background-color: var(--card);
   color: var(--foreground);
   cursor: pointer;
   opacity: 0;
@@ -5080,7 +5180,7 @@ input[type='number'] {
   }
 
 .dndev-nav-menu-content {
-  left: 0;
+  inset-inline-start: 0;
   top: 0;
   width: 100%;
 }
@@ -5095,7 +5195,7 @@ input[type='number'] {
 
 .dndev-nav-menu-viewport-wrapper {
   position: absolute;
-  left: 0;
+  inset-inline-start: 0;
   top: 100%;
   display: flex;
   justify-content: center;
@@ -5135,7 +5235,7 @@ input[type='number'] {
   height: var(--gap-sm);
   width: var(--gap-sm);
   transform: rotate(45deg);
-  border-top-left-radius: 2px;
+  border-start-start-radius: 2px;
   background-color: var(--border);
   box-shadow: var(--shadow-md);
 }
@@ -5306,19 +5406,34 @@ input[type='number'] {
   }
 
   .dndev-pagination-size-label {
-    margin-right: var(--gap-sm);
+    margin-inline-end: var(--gap-sm);
   }
 
   .dndev-pagination-nav {
     justify-content: flex-end;
     width: auto;
-    margin-left: auto;
-    /* Push to right */
+    margin-inline-start: auto;
+    /* Push to end */
   }
 }
 
 /* packages/components/src/atomic/Popover/Popover.css */
 
+/* Popover content width constraints and wrapping */
+
+/* Targets Radix UI PopoverContent element */
+
+[data-radix-popover-content],
+.dndev-floating[data-radix-popover-content] {
+  max-width: min(90vw, 400px);
+  width: -moz-max-content;
+  width: max-content;
+  min-width: 0;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  white-space: normal;
+}
+
 /* packages/components/src/atomic/Progress/Progress.css */
 
 .dndev-progress {
@@ -5663,9 +5778,10 @@ input[type='number'] {
 /* Content wrapper: constrained + centered + padded */
 
 .dndev-section-content {
-  /* Respects PageContainer's --content-width */
+  /* Respects PageContainer's --content-width (passed through breakthrough root) */
   max-width: var(--content-width);
   margin-inline: auto;
+  min-width: 0; /* Allow shrinking so max-width wins when content would force wider */
   /* Padding with section background - responsive to match PageContainer */
   padding-inline: var(--gap-md);
   padding-top: var(--gap-lg);
@@ -5913,6 +6029,9 @@ input[type='number'] {
 
 /* Sheet positioning by side - SPATIAL METAPHOR */
 
+/* Physical properties intentional: Sheet anchors to viewport edges regardless of text direction.
+     Logical inset-inline would incorrectly swap sides in RTL for left/right sheet variants. */
+
 /* RIGHT / LEFT (Desktop Panels) */
 
 .dndev-sheet-content[data-side='right'],.dndev-sheet-content[data-side='left'] {
@@ -5953,8 +6072,7 @@ input[type='number'] {
     max-height: 92dvh;
     /* Never touch top edge */
     width: 100%;
-    margin-left: auto;
-    margin-right: auto;
+    margin-inline: auto;
 
     /* On larger screens, constrain width */
   }
@@ -5973,16 +6091,16 @@ input[type='number'] {
     top: 0;
     border-bottom: var(--border-hairline) solid var(--line-1);
     /* Rounded bottom corners only */
-    border-bottom-left-radius: var(--radius-lg);
-    border-bottom-right-radius: var(--radius-lg);
+    border-end-start-radius: var(--radius-lg);
+    border-end-end-radius: var(--radius-lg);
   }
 
 .dndev-sheet-content[data-side='bottom'] {
     bottom: 0;
     border-top: var(--border-hairline) solid var(--line-1);
     /* Rounded top corners only */
-    border-top-left-radius: var(--radius-lg);
-    border-top-right-radius: var(--radius-lg);
+    border-start-start-radius: var(--radius-lg);
+    border-start-end-radius: var(--radius-lg);
   }
 
 /* DRAG HANDLE PILL - Visual affordance for draggable sheets */
@@ -6301,7 +6419,8 @@ input[type='number'] {
   min-width: 1.25rem;
   min-height: 1.25rem;
   border-radius: var(--radius-full);
-  background-color: var(--background);
+  /* --card not --background: surface must be opaque (--background can be transparent in some themes) */
+  background-color: var(--card);
   border: 2px solid var(--primary);
   box-shadow: var(--shadow-md);
   transition: all var(--dur-fast) var(--ease-in-out);
@@ -6372,7 +6491,8 @@ input[type='number'] {
   font-size: var(--font-size-xs);
   font-weight: var(--font-weight-medium);
   color: var(--foreground);
-  background-color: var(--background);
+  /* --card not --background: surface must be opaque */
+  background-color: var(--card);
   padding: 0.125rem 0.375rem;
   border-radius: var(--radius-interactive);
   box-shadow: var(--shadow-sm);
@@ -6396,7 +6516,7 @@ input[type='number'] {
   height: 1em;
   border: 2px solid transparent;
   border-top-color: var(--primary);
-  border-right-color: var(--primary);
+  border-inline-end-color: var(--primary);
   border-radius: 50%;
   animation: spin 0.6s linear infinite;
   display: inline-block;
@@ -6406,42 +6526,42 @@ input[type='number'] {
 
 .dndev-spinner[data-variant='default'] {
   border-top-color: var(--foreground);
-  border-right-color: var(--foreground);
+  border-inline-end-color: var(--foreground);
 }
 
 .dndev-spinner[data-variant='muted'] {
   border-top-color: var(--muted-foreground);
-  border-right-color: var(--muted-foreground);
+  border-inline-end-color: var(--muted-foreground);
 }
 
 .dndev-spinner[data-variant='primary'] {
   border-top-color: var(--primary);
-  border-right-color: var(--primary);
+  border-inline-end-color: var(--primary);
 }
 
 .dndev-spinner[data-variant='secondary'] {
   border-top-color: var(--secondary);
-  border-right-color: var(--secondary);
+  border-inline-end-color: var(--secondary);
 }
 
 .dndev-spinner[data-variant='accent'] {
   border-top-color: var(--accent);
-  border-right-color: var(--accent);
+  border-inline-end-color: var(--accent);
 }
 
 .dndev-spinner[data-variant='success'] {
   border-top-color: var(--success);
-  border-right-color: var(--success);
+  border-inline-end-color: var(--success);
 }
 
 .dndev-spinner[data-variant='warning'] {
   border-top-color: var(--warning);
-  border-right-color: var(--warning);
+  border-inline-end-color: var(--warning);
 }
 
 .dndev-spinner[data-variant='destructive'] {
   border-top-color: var(--destructive);
-  border-right-color: var(--destructive);
+  border-inline-end-color: var(--destructive);
 }
 
 /* Overlay variant - full-page loading */
@@ -6725,6 +6845,8 @@ input[type='number'] {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  gap: var(--gap-md);
+  margin-top: var(--gap-md);
 }
 
 .dndev-stepper-info {
@@ -7164,19 +7286,20 @@ input[type='number'] {
   word-break: break-word;
   border: var(--border-hairline) solid var(--line-2); /* Show clickable area */
 
-  /* Fallback (no variant): inactive = primary, active = foreground/background */
+  /* Fallback (no variant): inactive = primary, active = foreground/card */
   background-color: var(--primary);
   color: var(--primary-foreground);
 }
 
 .dndev-interactive[data-role='tab-trigger'][data-state='active'] {
-    background-color: var(--background);
+    /* --card not --background: active tab surface must be opaque (--background can be transparent in some themes) */
+    background-color: var(--card);
     color: var(--foreground);
     box-shadow: var(--shadow-sm);
     border-color: var(--primary);
   }
 
-/* Default/Primary variant: inactive = primary, active = foreground/background */
+/* Default/Primary variant: inactive = primary, active = foreground/card */
 
 .dndev-interactive[data-role='tab-trigger'][data-variant='default'],.dndev-interactive[data-role='tab-trigger'][data-variant='primary'] {
     background-color: var(--primary);
@@ -7184,13 +7307,14 @@ input[type='number'] {
   }
 
 [data-state='active']:is(.dndev-interactive[data-role='tab-trigger'][data-variant='default'],.dndev-interactive[data-role='tab-trigger'][data-variant='primary']) {
-      background-color: var(--background);
+      /* --card not --background: active tab surface must be opaque */
+      background-color: var(--card);
       color: var(--foreground);
       box-shadow: var(--shadow-sm);
       border-color: var(--primary);
     }
 
-/* Secondary variant: inactive = secondary, active = foreground/background */
+/* Secondary variant: inactive = secondary, active = foreground/card */
 
 .dndev-interactive[data-role='tab-trigger'][data-variant='secondary'] {
     background-color: var(--secondary);
@@ -7198,13 +7322,14 @@ input[type='number'] {
   }
 
 .dndev-interactive[data-role='tab-trigger'][data-variant='secondary'][data-state='active'] {
-      background-color: var(--background);
+      /* --card not --background: active tab surface must be opaque */
+      background-color: var(--card);
       color: var(--foreground);
       box-shadow: var(--shadow-sm);
       border-color: var(--secondary);
     }
 
-/* Accent variant: inactive = accent, active = foreground/background */
+/* Accent variant: inactive = accent, active = foreground/card */
 
 .dndev-interactive[data-role='tab-trigger'][data-variant='accent'] {
     background-color: var(--accent);
@@ -7212,7 +7337,8 @@ input[type='number'] {
   }
 
 .dndev-interactive[data-role='tab-trigger'][data-variant='accent'][data-state='active'] {
-      background-color: var(--background);
+      /* --card not --background: active tab surface must be opaque */
+      background-color: var(--card);
       color: var(--foreground);
       box-shadow: var(--shadow-sm);
       border-color: var(--accent);
@@ -7232,7 +7358,7 @@ input[type='number'] {
       border-color: var(--primary);
     }
 
-/* Warning variant: inactive = warning, active = foreground/background */
+/* Warning variant: inactive = warning, active = foreground/card */
 
 .dndev-interactive[data-role='tab-trigger'][data-variant='warning'] {
     background-color: var(--warning);
@@ -7240,13 +7366,14 @@ input[type='number'] {
   }
 
 .dndev-interactive[data-role='tab-trigger'][data-variant='warning'][data-state='active'] {
-      background-color: var(--background);
+      /* --card not --background: active tab surface must be opaque */
+      background-color: var(--card);
       color: var(--foreground);
       box-shadow: var(--shadow-sm);
       border-color: var(--warning);
     }
 
-/* Success variant: inactive = success, active = foreground/background */
+/* Success variant: inactive = success, active = foreground/card */
 
 .dndev-interactive[data-role='tab-trigger'][data-variant='success'] {
     background-color: var(--success);
@@ -7254,13 +7381,14 @@ input[type='number'] {
   }
 
 .dndev-interactive[data-role='tab-trigger'][data-variant='success'][data-state='active'] {
-      background-color: var(--background);
+      /* --card not --background: active tab surface must be opaque */
+      background-color: var(--card);
       color: var(--foreground);
       box-shadow: var(--shadow-sm);
       border-color: var(--success);
     }
 
-/* Destructive variant: inactive = destructive, active = foreground/background */
+/* Destructive variant: inactive = destructive, active = foreground/card */
 
 .dndev-interactive[data-role='tab-trigger'][data-variant='destructive'] {
     background-color: var(--destructive);
@@ -7268,7 +7396,8 @@ input[type='number'] {
   }
 
 .dndev-interactive[data-role='tab-trigger'][data-variant='destructive'][data-state='active'] {
-      background-color: var(--background);
+      /* --card not --background: active tab surface must be opaque */
+      background-color: var(--card);
       color: var(--foreground);
       box-shadow: var(--shadow-sm);
       border-color: var(--destructive);
@@ -7315,7 +7444,7 @@ input[type='number'] {
     align-items: center;
     justify-content: center;
     padding: 0;
-    margin-left: 2px;
+    margin-inline-start: 2px;
     background: transparent;
     border: none;
     cursor: pointer;
@@ -7478,7 +7607,11 @@ input[type='number'] {
     border-radius: var(--radius-interactive);
   }
 
-/* Level overrides */
+/* Level overrides — headline font for all heading levels */
+
+.dndev-text-base[data-level^='h'] {
+    font-family: var(--font-headline);
+  }
 
 .dndev-text-base[data-level='h1'] {
     font-size: var(--font-size-3xl);
@@ -7531,6 +7664,10 @@ input[type='number'] {
     font-weight: var(--font-weight-bold);
   }
 
+.dndev-text-base[data-italic] {
+    font-style: italic;
+  }
+
 /* packages/components/src/atomic/Toaster/Toaster.css */
 
 .dndev-toast-viewport {
@@ -7730,8 +7867,9 @@ input[type='number'] {
 
 .dndev-toggle-group {
   display: inline-flex;
+  flex-wrap: wrap;
   align-items: center;
-  gap: 0;
+  gap: var(--gap-sm);
   padding: 0.125rem;
   border-radius: var(--radius-interactive);
   background-color: var(--muted);
@@ -7823,7 +7961,8 @@ input[type='number'] {
   z-index: var(--z-tooltip);
   /* Inverted colors for high contrast - industry standard (Vercel, GitHub, Stripe) */
   background: var(--foreground);
-  color: var(--background);
+  /* --card not --background: inverted text must be opaque (--background can be transparent in some themes) */
+  color: var(--card);
   box-shadow: var(--shadow-lg); /* Stronger shadow for visibility */
   padding: 0.375rem 0.5rem; /* 6px 8px - industry standard */
   font-size: var(--font-size-xs); /* 12px */
@@ -7927,12 +8066,16 @@ input[type='number'] {
 
 .dndev-video-dialog {
   max-width: 90vw;
-  max-height: 90vh;
 }
 
 .dndev-video-dialog .dndev-modal-body {
     padding: 0;
+    overflow: hidden;
+  }
+
+.dndev-video-dialog .dndev-video-frame {
     aspect-ratio: 16/9;
+    max-height: calc(90vh - 5rem);
   }
 
 /* 6. Animation keyframes */
@@ -8459,6 +8602,12 @@ input[type='number'] {
 
 /* Tone backgrounds - apply directly to section element (like CallToAction) */
 
+/* Ghost (default) - transparent, allows background images to show through */
+
+.dndev-section-full-width[data-tone='ghost'],.dndev-section-full-width:not([data-tone]) {
+    background: transparent;
+  }
+
 .dndev-section-full-width[data-tone='base'] {
     background: var(--background);
   }
@@ -8467,16 +8616,37 @@ input[type='number'] {
     background: var(--muted);
   }
 
-.dndev-section-full-width[data-tone='elevated'] {
+.dndev-section-full-width[data-tone='contrast'] {
     background: var(--background);
+    color: var(--foreground);
   }
 
-.dndev-section-full-width[data-tone='contrast'] {
+.dndev-section-full-width[data-tone='accent'] {
+    background: color-mix(in oklab, var(--accent) 5%, transparent);
+  }
+
+/* HeroSection tone backgrounds - same system as Section/CallToAction */
+
+/* Ghost (default) - transparent, allows background images to show through */
+
+.dndev-hero-section[data-tone='ghost'],.dndev-hero-section:not([data-tone]) {
+    background: transparent;
+  }
+
+.dndev-hero-section[data-tone='base'] {
+    background: var(--background);
+  }
+
+.dndev-hero-section[data-tone='muted'] {
+    background: var(--muted);
+  }
+
+.dndev-hero-section[data-tone='contrast'] {
     background: var(--background);
     color: var(--foreground);
   }
 
-.dndev-section-full-width[data-tone='accent'] {
+.dndev-hero-section[data-tone='accent'] {
     background: color-mix(in oklab, var(--accent) 5%, transparent);
   }
 
@@ -8689,10 +8859,7 @@ h4[data-variant='code'] {
 }
 
 .dndev-inset-0 {
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset: 0;
 }
 
 .dndev-inset-y-0 {
@@ -8700,8 +8867,8 @@ h4[data-variant='code'] {
   bottom: 0;
 }
 
-.dndev-left-0 {
-  left: 0;
+.dndev-inset-inline-start-0 {
+  inset-inline-start: 0;
 }
 
 .dndev-min-h-0 {
@@ -9076,6 +9243,8 @@ h4[data-variant='code'] {
   /* Narrow content (mobile-first PWA, app-like single column) - single source of truth */
   --narrow-content-max: 37.5rem;
   /* 600px */
+  --narrow-form-max: 30rem;
+  /* 480px - inner form/input width within narrow layout */
 
   /* Content Area Calculations */
   /* Header content area (excludes sidebar on some presets) */
@@ -9186,7 +9355,8 @@ main[role='main'][data-routing-animation='fade'] {
 /* Slide animation - keyframes handle opacity 0→1 */
 
 main[role='main'][data-routing-animation='slide'] {
-  animation: routeSlideIn var(--routing-default-duration, 300ms) ease-in forwards;
+  animation: routeSlideIn var(--routing-default-duration, 300ms) ease-in
+    forwards;
 }
 
 /* No animation - already visible by default, explicit for clarity */
@@ -9200,11 +9370,15 @@ main[role='main'][data-routing-animation='none'] {
 
 @media (width < 768px) {
   main[role='main'][data-routing-animation='fade'] {
-    animation: routeFadeIn var(--routing-mobile-duration, var(--routing-default-duration, 300ms)) ease-in forwards;
+    animation: routeFadeIn
+      var(--routing-mobile-duration, var(--routing-default-duration, 300ms))
+      ease-in forwards;
   }
 
   main[role='main'][data-routing-animation='slide'] {
-    animation: routeSlideIn var(--routing-mobile-duration, var(--routing-default-duration, 300ms)) ease-in forwards;
+    animation: routeSlideIn
+      var(--routing-mobile-duration, var(--routing-default-duration, 300ms))
+      ease-in forwards;
   }
 }
 
@@ -9212,11 +9386,15 @@ main[role='main'][data-routing-animation='none'] {
 
 @media (width >=768px) and (width <=1023px) {
   main[role='main'][data-routing-animation='fade'] {
-    animation: routeFadeIn var(--routing-tablet-duration, var(--routing-default-duration, 300ms)) ease-in forwards;
+    animation: routeFadeIn
+      var(--routing-tablet-duration, var(--routing-default-duration, 300ms))
+      ease-in forwards;
   }
 
   main[role='main'][data-routing-animation='slide'] {
-    animation: routeSlideIn var(--routing-tablet-duration, var(--routing-default-duration, 300ms)) ease-in forwards;
+    animation: routeSlideIn
+      var(--routing-tablet-duration, var(--routing-default-duration, 300ms))
+      ease-in forwards;
   }
 }
 
@@ -9224,11 +9402,15 @@ main[role='main'][data-routing-animation='none'] {
 
 @media (width >=1024px) and (width <=1439px) {
   main[role='main'][data-routing-animation='fade'] {
-    animation: routeFadeIn var(--routing-desktop-duration, var(--routing-default-duration, 300ms)) ease-in forwards;
+    animation: routeFadeIn
+      var(--routing-desktop-duration, var(--routing-default-duration, 300ms))
+      ease-in forwards;
   }
 
   main[role='main'][data-routing-animation='slide'] {
-    animation: routeSlideIn var(--routing-desktop-duration, var(--routing-default-duration, 300ms)) ease-in forwards;
+    animation: routeSlideIn
+      var(--routing-desktop-duration, var(--routing-default-duration, 300ms))
+      ease-in forwards;
   }
 }
 
@@ -9236,11 +9418,15 @@ main[role='main'][data-routing-animation='none'] {
 
 @media (width >=1440px) {
   main[role='main'][data-routing-animation='fade'] {
-    animation: routeFadeIn var(--routing-wide-duration, var(--routing-default-duration, 300ms)) ease-in forwards;
+    animation: routeFadeIn
+      var(--routing-wide-duration, var(--routing-default-duration, 300ms))
+      ease-in forwards;
   }
 
   main[role='main'][data-routing-animation='slide'] {
-    animation: routeSlideIn var(--routing-wide-duration, var(--routing-default-duration, 300ms)) ease-in forwards;
+    animation: routeSlideIn
+      var(--routing-wide-duration, var(--routing-default-duration, 300ms))
+      ease-in forwards;
   }
 }
 
@@ -9264,7 +9450,6 @@ main[role='main'][data-routing-animation='none'] {
 /* Mobile/Tablet: Hide sidebars - WCAG & Lighthouse best practices */
 
 @media (width <=1023px) {
-
   .dndev-layout aside[role='navigation'].sidebar,
   aside[role='navigation'].sidebar {
     display: none !important;
@@ -9288,8 +9473,10 @@ main[role='main'][data-routing-animation='none'] {
     'header header'
     'sidebar main'
     'footer footer';
-  grid-template-rows: var(--header-height) 1fr minmax(var(--footer-height),
-      auto);
+  grid-template-rows: var(--header-height) 1fr minmax(
+      var(--footer-height),
+      auto
+    );
   grid-template-columns: var(--sidebar-width) 1fr;
 }
 
@@ -9303,7 +9490,10 @@ main[role='main'][data-routing-animation='none'] {
   grid-template-rows: var(--header-height) 1fr auto;
 }
 
-.dndev-layout[data-footer-mode='scroll'] header[role='banner'] { position: sticky; top: 0; }
+.dndev-layout[data-footer-mode='scroll'] header[role='banner'] {
+    position: sticky;
+    top: 0;
+  }
 
 .dndev-layout[data-footer-mode='scroll'] aside.sidebar[role='navigation'] {
     position: sticky;
@@ -9312,14 +9502,21 @@ main[role='main'][data-routing-animation='none'] {
     align-self: start;
   }
 
-.dndev-layout[data-footer-mode='scroll'] main[role='main'] { overflow-y: visible; overflow-x: hidden; }
+.dndev-layout[data-footer-mode='scroll'] main[role='main'] {
+    overflow-y: visible;
+    overflow-x: hidden;
+    contain: style;
+  }
 
 .dndev-layout[data-footer-mode='scroll'] footer[role='contentinfo'] {
     grid-column: 2 / -1;
     height: auto;
   }
 
-:is(.dndev-layout[data-footer-mode='scroll'] footer[role='contentinfo']) > * { height: auto; min-height: var(--footer-height); }
+:is(.dndev-layout[data-footer-mode='scroll'] footer[role='contentinfo']) > * {
+      height: auto;
+      min-height: var(--footer-height);
+    }
 
 /* Mobile: footer scroll mode ON by default (same rules) */
 
@@ -9330,15 +9527,25 @@ main[role='main'][data-routing-animation='none'] {
     grid-template-rows: var(--header-height) 1fr auto;
   }
 
-    .dndev-layout header[role='banner'] { position: sticky; top: 0; }
+    .dndev-layout header[role='banner'] {
+      position: sticky;
+      top: 0;
+    }
 
-    .dndev-layout main[role='main'] { overflow-y: visible; overflow-x: hidden; }
+    .dndev-layout main[role='main'] {
+      overflow-y: visible;
+      overflow-x: hidden;
+      contain: style;
+    }
 
     .dndev-layout footer[role='contentinfo'] {
       height: auto;
     }
 
-      :is(.dndev-layout footer[role='contentinfo']) > * { height: auto; min-height: var(--footer-height); }
+      :is(.dndev-layout footer[role='contentinfo']) > * {
+        height: auto;
+        min-height: var(--footer-height);
+      }
 }
 
 /* Presets with no footer at all */
@@ -9366,6 +9573,7 @@ header[role='banner'] {
   position: relative;
   z-index: var(--z-header);
   contain: layout style;
+  overflow: visible; /* Allow absolutely positioned children's shadows to extend beyond bounds */
 
   /* Container queries support for responsive components */
   container-type: inline-size;
@@ -9401,7 +9609,11 @@ header[role='banner'] {
   height: 100%;
   max-height: 100%;
   gap: var(--gap-sm);
-  overflow: hidden;
+  overflow: visible; /* Allow shadows to show */
+  /* Theme-controlled padding for shadows that extend beyond bounds (e.g., brutalist hard-offset shadows) */
+  /* Shadows extend rightward, so only end padding needed */
+  /* Defaults to 0 for themes with diffused shadows that don't extend beyond bounds */
+  padding-inline-end: var(--header-shadow-padding, 0);
 }
 
 .header-end {
@@ -9413,7 +9625,11 @@ header[role='banner'] {
   max-height: 100%;
   margin-inline-start: auto;
   gap: var(--gap-sm);
-  overflow: hidden;
+  overflow: visible; /* Allow shadows to show */
+  /* Theme-controlled padding for shadows that extend beyond bounds (e.g., brutalist hard-offset shadows) */
+  /* Shadows extend rightward, so only end padding needed */
+  /* Defaults to 0 for themes with diffused shadows that don't extend beyond bounds */
+  padding-inline-end: var(--header-shadow-padding, 0);
 }
 
 /* Viewport-centered center content - absolutely positioned overlay */
@@ -9426,6 +9642,10 @@ header[role='banner'] .header-center {
   width: -moz-fit-content;
   width: fit-content;
   z-index: 1;
+  /* Theme-controlled padding for shadows that extend beyond bounds (e.g., brutalist hard-offset shadows) */
+  /* Shadows extend rightward, so only end padding needed */
+  /* Defaults to 0 for themes with diffused shadows that don't extend beyond bounds */
+  padding-inline-end: var(--header-shadow-padding, 0);
 }
 
 /* ===========================
@@ -9506,7 +9726,8 @@ aside[role='navigation'].sidebar .dndev-sidebar-resize-handle:focus-visible {
 
 /* Active drag state */
 
-aside[role='navigation'].sidebar[data-dragging='true'] .dndev-sidebar-resize-handle {
+aside[role='navigation'].sidebar[data-dragging='true']
+  .dndev-sidebar-resize-handle {
   background: var(--primary);
 }
 
@@ -9522,7 +9743,10 @@ aside[role='navigation'].sidebar[data-dragging='true'] .dndev-sidebar-resize-han
 /* Landing: AUTO display mode - compact below wide breakpoint (< 1440px) */
 
 @media (width < 1440px) {
-  [data-layout='landing'] header[role='banner'] [data-display='auto'] .dndev-interactive-label {
+  [data-layout='landing']
+    header[role='banner']
+    [data-display='auto']
+    .dndev-interactive-label {
     display: none;
   }
 }
@@ -9695,7 +9919,6 @@ main[role='main'] {
   contain: layout style;
 
   /* First child after breadcrumbs grows to fill space */
-
 }
 
 main[role='main'] > *:not(.breadcrumbs-container):first-of-type,main[role='main'] > .breadcrumbs-container + * {
@@ -9776,8 +9999,7 @@ footer[role='contentinfo'] a:not(.dndev-interactive):hover {
 
 .merged-bar {
   position: fixed;
-  left: 0;
-  right: 0;
+  inset-inline: 0;
   display: none;
   /* Hidden by default - CSS shows on mobile */
   align-items: center;
@@ -9786,8 +10008,8 @@ footer[role='contentinfo'] a:not(.dndev-interactive):hover {
   contain: layout style;
 
   /* Safe area padding for notched devices */
-  padding-left: max(var(--content-padding), env(safe-area-inset-left));
-  padding-right: max(var(--content-padding), env(safe-area-inset-right));
+  padding-inline-start: max(var(--content-padding), env(safe-area-inset-left));
+  padding-inline-end: max(var(--content-padding), env(safe-area-inset-right));
 }
 
 .merged-bar[data-position='top'] {
@@ -9823,7 +10045,6 @@ footer[role='contentinfo'] a:not(.dndev-interactive):hover {
 /* Mobile (<1024px): Show merged-bar, hide zones */
 
 @media (width <=1023px) {
-
   /* Presets with mergedBar: top (admin, moolti, game, docs) */
   [data-layout='admin'] .merged-bar[data-position='top'],
   [data-layout='moolti'] .merged-bar[data-position='top'],
@@ -10133,6 +10354,7 @@ footer[role='contentinfo'] a:not(.dndev-interactive):hover {
 .dndev-container {
   width: 100%;
   max-width: var(--content-width);
+  min-width: 0; /* Allow shrinking in flex so max-width wins */
   flex: 1 1 auto;
 
   /* First child spacing when enabled */
@@ -10246,10 +10468,9 @@ footer[role='contentinfo'] a:not(.dndev-interactive):hover {
 
 /* Breakthrough pattern: only applies inside PageContainer */
 
-.dndev-container>.dndev-section-full-width,
-.dndev-container>.dndev-cta,
-.dndev-container>.dndev-hero-section,
-.dndev-container>.dndev-tech-bento {
+.dndev-container > .dndev-section-full-width,
+.dndev-container > .dndev-cta,
+.dndev-container > .dndev-tech-bento {
   /* Break out of PageContainer padding and max-width constraint */
   /* Account for sidebar: --sidebar-width is 0px for presets without sidebar */
   width: calc(100dvw - var(--sidebar-width));
@@ -10258,6 +10479,19 @@ footer[role='contentinfo'] a:not(.dndev-interactive):hover {
   /* Eat gap BEFORE section only */
   margin-top: calc(-1 * var(--gap-lg));
   margin-bottom: 0;
+  /* Pass through so inner content (e.g. .dndev-section-content) can use it */
+  --content-width: var(--max-content-width, 100%);
+}
+
+/* HeroSection: only breakthrough when it has fullHeight (needs full viewport background) */
+
+.dndev-container > .dndev-hero-section[style*='height'] {
+  width: calc(100dvw - var(--sidebar-width));
+  max-width: calc(100dvw - var(--sidebar-width));
+  margin-inline: calc((-50dvw + var(--sidebar-width) / 2) + 50%);
+  margin-top: calc(-1 * var(--gap-lg));
+  margin-bottom: 0;
+  --content-width: var(--max-content-width, 100%);
 }
 
 .footer-mobile-button:hover {
@@ -10290,7 +10524,16 @@ footer[role='contentinfo'] a:not(.dndev-interactive):hover {
   width: 100%;
 }
 
-/* ScrollArea wrapper */
+/* Scroll wrapper - stretches to full width so scrollbar is at viewport edge */
+
+.dndev-game-container__scroll-wrapper {
+  flex: 1 1 0;
+  min-height: 0;
+  width: 100%;
+  align-self: stretch;
+}
+
+/* ScrollArea - fills wrapper */
 
 .dndev-game-container__scroll {
   width: 100%;
@@ -10329,20 +10572,16 @@ footer[role='contentinfo'] a:not(.dndev-interactive):hover {
   justify-content: space-between;
 }
 
-/* Narrow content wrapper - constrained by --narrow-content-max (mobile-first PWA) */
+/* Narrow content wrapper - constrained by --narrow-content-max, centered inside scroll */
+
+/* height: 100% fills the scroll viewport so children can use percentage heights.
+   Content taller than viewport still scrolls — overflow propagates to the scroll container. */
 
 .dndev-game-container__content-narrow {
   width: 100%;
   max-width: var(--narrow-content-max);
   margin-inline: auto;
-  min-height: 0;
-  flex: 1 1 auto;
-  display: flex;
-  flex-direction: column;
-}
-
-.dndev-game-container__content-narrow .dndev-game-container__scroll {
-  width: 100%;
+  height: 100%;
 }
 
 /* CTA Zone - Fixed at bottom; safe area for notched devices */
@@ -10357,6 +10596,13 @@ footer[role='contentinfo'] a:not(.dndev-interactive):hover {
 
 /* CTA Button */
 
+.dndev-game-container__cta-buttons {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+  gap: var(--gap-sm);
+  width: 100%;
+}
+
 .dndev-game-container__cta-button {
   height: var(--touch-target);
   width: 100%;