@24vlh/vds 0.1.8 → 0.1.10

package/dist/components/guidance.min.css

@@ -0,0 +1 @@
+.vds-guidance,[data-vds-guidance]{--guidance-padding-sm:var(--space-3);--guidance-padding-md:var(--space-4);--guidance-padding-lg:var(--space-6);--guidance-gap:var(--space-3);--guidance-radius:var(--radius-md);--guidance-border-width:var(--border-width-strong);--guidance-shadow:var(--shadow-xs)}:where(.guidance,.guidance-card,.guidance-strip,.guidance-step,.guidance-field,.guidance-scope__item,.guidance-brief,.guidance-row,.guidance-compare__item,.guidance-stat){--guidance-bg:var(--color-surface);--guidance-outline:var(--color-border-subtle);--guidance-rail:var(--color-accent);--guidance-tint:var(--color-surface-subtle);--guidance-text:var(--color-text);--guidance-title:var(--color-text);--guidance-muted:var(--color-text-muted);--guidance-icon:var(--color-accent);--guidance-on:var(--color-on-accent);color:var(--guidance-text)}:where(.guidance,.guidance-card,.guidance-strip,.guidance-step,.guidance-field,.guidance-scope__item,.guidance-brief,.guidance-row,.guidance-compare__item,.guidance-stat)[data-variant=info]{--guidance-rail:var(--semantic-info-border-strong,var(--color-info));--guidance-icon:var(--semantic-info-border-strong,var(--color-info));--guidance-tint:var(--semantic-info-bg-strong,var(--color-info-soft))}:where(.guidance,.guidance-card,.guidance-strip,.guidance-step,.guidance-field,.guidance-scope__item,.guidance-brief,.guidance-row,.guidance-compare__item,.guidance-stat)[data-variant=success]{--guidance-rail:var(--semantic-success-border-strong,var(--color-success));--guidance-icon:var(--semantic-success-border-strong,var(--color-success));--guidance-tint:var(--semantic-success-bg-strong,var(--color-success-soft))}:where(.guidance,.guidance-card,.guidance-strip,.guidance-step,.guidance-field,.guidance-scope__item,.guidance-brief,.guidance-row,.guidance-compare__item,.guidance-stat)[data-variant=warning]{--guidance-rail:var(--semantic-warning-border-strong,var(--color-warning));--guidance-icon:var(--semantic-warning-border-strong,var(--color-warning));--guidance-tint:var(--semantic-warning-bg-strong,var(--color-warning-soft))}:where(.guidance,.guidance-card,.guidance-strip,.guidance-step,.guidance-field,.guidance-scope__item,.guidance-brief,.guidance-row,.guidance-compare__item,.guidance-stat)[data-variant=danger]{--guidance-rail:var(--semantic-error-border-strong,var(--color-danger));--guidance-icon:var(--semantic-error-border-strong,var(--color-danger));--guidance-tint:var(--semantic-error-bg-strong,var(--color-danger-soft))}:where(.guidance,.guidance-card,.guidance-strip,.guidance-step,.guidance-field,.guidance-scope__item,.guidance-brief,.guidance-row,.guidance-compare__item,.guidance-stat)[data-variant=accent]{--guidance-rail:var(--color-accent);--guidance-icon:var(--color-accent);--guidance-tint:var(--color-accent-soft)}:where(.guidance,.guidance-card,.guidance-strip,.guidance-step,.guidance-field,.guidance-scope__item,.guidance-brief,.guidance-row,.guidance-compare__item,.guidance-stat)[data-variant=neutral]{--guidance-rail:var(--color-border-strong);--guidance-icon:var(--color-text-muted);--guidance-tint:var(--color-muted-bg)}.guidance{background-color:var(--guidance-bg);border:1px solid var(--guidance-outline);border-left:var(--guidance-border-width) solid var(--guidance-rail);border-radius:var(--radius-md);box-shadow:var(--guidance-shadow);display:flex;flex-direction:column;font-size:var(--text-sm);gap:var(--space-2);line-height:1.4;line-height:var(--line-height-relaxed,1.4);padding:var(--guidance-padding-md,var(--space-4)) var(--guidance-padding-lg,var(--space-6));position:relative}.guidance--compact{padding:var(--guidance-padding-sm,var(--space-3)) var(--guidance-padding-md,var(--space-4))}.guidance--tint{background-color:var(--guidance-tint)}.guidance__header{align-items:flex-start;display:flex;gap:var(--space-2)}.guidance__icon{align-items:center;color:var(--guidance-icon);display:flex;flex-shrink:0;height:var(--space-5);justify-content:center;width:var(--space-5)}.guidance__title{color:var(--guidance-title);font-size:var(--text-md);font-weight:600;line-height:1.2;line-height:var(--line-height-tight,1.2)}.guidance__meta{color:var(--guidance-muted);font-size:var(--text-xs)}.guidance__tag{align-items:center;background:var(--color-surface-subtle);border:1px solid var(--guidance-outline);border-radius:var(--radius-pill);color:var(--guidance-muted);display:inline-flex;font-size:var(--text-xxs);gap:var(--space-1);letter-spacing:.08em;padding:0 var(--space-2);text-transform:uppercase;white-space:nowrap}.guidance__body{color:var(--guidance-text);font-size:var(--text-sm)}.guidance__list{grid-gap:var(--space-1);display:grid;gap:var(--space-1);list-style:none;margin:0;padding:0}.guidance__list li{padding-left:var(--space-4);position:relative}.guidance__list li:before{background-color:var(--guidance-rail);border-radius:var(--radius-full);content:"";height:.4rem;left:0;position:absolute;top:.35rem;width:.4rem}.guidance__footer{align-items:center;display:flex;flex-wrap:wrap;gap:var(--space-2)}.guidance--do{--guidance-rail:var(--semantic-success-border-strong,var(--color-success));--guidance-icon:var(--semantic-success-border-strong,var(--color-success));--guidance-tint:var(--semantic-success-bg-strong,var(--color-success-soft))}.guidance--dont{--guidance-rail:var(--semantic-error-border-strong,var(--color-danger));--guidance-icon:var(--semantic-error-border-strong,var(--color-danger));--guidance-tint:var(--semantic-error-bg-strong,var(--color-danger-soft))}.guidance--how{--guidance-rail:var(--semantic-info-border-strong,var(--color-info));--guidance-icon:var(--semantic-info-border-strong,var(--color-info));--guidance-tint:var(--semantic-info-bg-strong,var(--color-info-soft))}.guidance--why{--guidance-rail:var(--color-accent);--guidance-icon:var(--color-accent);--guidance-tint:var(--color-accent-soft)}.guidance--expect{--guidance-rail:var(--semantic-warning-border-strong,var(--color-warning));--guidance-icon:var(--semantic-warning-border-strong,var(--color-warning));--guidance-tint:var(--semantic-warning-bg-strong,var(--color-warning-soft))}.guidance--recommend{--guidance-rail:var(--color-border-strong);--guidance-icon:var(--color-text);--guidance-tint:var(--color-surface-subtle)}.guidance-grid{grid-gap:var(--space-3);display:grid;gap:var(--space-3);grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}.guidance-card{background-color:var(--guidance-bg);border:1px solid var(--guidance-outline);border-radius:var(--guidance-radius);box-shadow:var(--guidance-shadow);display:flex;flex-direction:column;gap:var(--space-2);padding:var(--guidance-padding-md,var(--space-4))}.guidance-card--tint{background-color:var(--guidance-tint)}.guidance-card--rail{border-left:var(--guidance-border-width) solid var(--guidance-rail)}.guidance-card__eyebrow{color:var(--guidance-muted);font-size:var(--text-xs);letter-spacing:.08em;text-transform:uppercase}.guidance-card__title{color:var(--guidance-title);font-size:var(--text-md);font-weight:600}.guidance-card__body{font-size:var(--text-sm)}.guidance-card__footer{align-items:center;color:var(--guidance-muted);display:flex;font-size:var(--text-xs);gap:var(--space-2)}.guidance-strip{grid-gap:var(--space-3);align-items:start;background-color:var(--guidance-bg);border:1px solid var(--guidance-outline);border-radius:var(--radius-md);display:grid;gap:var(--space-3);grid-template-columns:auto 1fr auto;padding:var(--guidance-padding-sm,var(--space-3)) var(--guidance-padding-md,var(--space-4));padding-left:calc(var(--guidance-padding-md, var(--space-4)) + var(--space-1));position:relative}.guidance-strip:before{background:var(--guidance-rail);bottom:0;content:"";left:0;position:absolute;right:auto;top:0;width:4px}.guidance-strip--tint{background-color:var(--guidance-tint)}.guidance-strip__label{align-items:center;background-color:var(--color-surface);border:1px solid var(--guidance-rail);border-radius:var(--radius-pill);color:var(--guidance-title);display:inline-flex;font-size:var(--text-xs);gap:var(--space-1);letter-spacing:.06em;padding:0 var(--space-2);text-transform:uppercase}.guidance-strip__body{color:var(--guidance-text);font-size:var(--text-sm)}.guidance-strip__actions{align-items:center;display:inline-flex;gap:var(--space-2)}@media (max-width:720px){.guidance-strip{grid-template-columns:1fr}}.guidance-steps{grid-gap:var(--space-3);margin:0;padding:0}.guidance-step,.guidance-steps{display:grid;gap:var(--space-3)}.guidance-step{grid-gap:var(--space-3);background-color:var(--guidance-bg);border:1px solid var(--guidance-outline);border-radius:var(--guidance-radius);grid-template-columns:auto 1fr;padding:var(--guidance-padding-md,var(--space-4))}.guidance-step--tint{background-color:var(--guidance-tint)}.guidance-step--rail{border-left:var(--guidance-border-width) solid var(--guidance-rail)}.guidance-step__index{align-items:center;background-color:var(--guidance-rail);border-radius:var(--radius-full);color:var(--guidance-on);display:inline-flex;font-weight:600;height:var(--space-7);justify-content:center;width:var(--space-7)}.guidance-step__title{color:var(--guidance-title);font-size:var(--text-sm);font-weight:600}.guidance-step__body{color:var(--guidance-text);font-size:var(--text-sm)}.guidance-brief{grid-gap:var(--space-4);background-color:var(--guidance-bg);border:1px solid var(--guidance-outline);border-radius:var(--radius-lg);box-shadow:var(--guidance-shadow);display:grid;gap:var(--space-4);padding:var(--guidance-padding-lg,var(--space-6));position:relative}.guidance-brief--tint{background-color:var(--guidance-tint)}.guidance-brief--rail{border-left:var(--guidance-border-width) solid var(--guidance-rail)}.guidance-brief__header{align-items:center;display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4)}.guidance-brief__kicker{color:var(--guidance-muted);font-size:var(--text-xs);letter-spacing:.08em;text-transform:uppercase}.guidance-brief__title{color:var(--guidance-title);font-size:var(--text-lg);font-weight:600}.guidance-brief__meta{color:var(--guidance-muted);font-size:var(--text-sm)}.guidance-brief__grid{grid-gap:var(--space-3);display:grid;gap:var(--space-3);grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}.guidance-brief__block{grid-gap:var(--space-2);background:var(--color-surface-subtle);border:1px solid var(--guidance-outline);border-radius:var(--radius-md);display:grid;gap:var(--space-2);padding:var(--space-3)}.guidance-brief__label{color:var(--guidance-muted);font-size:var(--text-xs);letter-spacing:.08em;text-transform:uppercase}.guidance-brief__text{color:var(--guidance-text);font-size:var(--text-sm)}.guidance-brief__list{grid-gap:var(--space-1);display:grid;gap:var(--space-1);list-style:none;margin:0;padding:0}.guidance-brief__list li{font-size:var(--text-sm);padding-left:var(--space-4);position:relative}.guidance-brief__list li:before{background-color:var(--guidance-rail);border-radius:var(--radius-full);content:"";height:.4rem;left:0;position:absolute;top:.35rem;width:.4rem}.guidance-stats{display:flex;flex-wrap:wrap;gap:var(--space-3)}.guidance-stat{grid-gap:var(--space-1);background-color:var(--guidance-bg);border:1px solid var(--guidance-outline);border-radius:var(--radius-md);display:grid;gap:var(--space-1);padding:var(--space-2) var(--space-3)}.guidance-stat--tint{background-color:var(--guidance-tint)}.guidance-stat__value{color:var(--guidance-title);font-size:var(--text-lg);font-weight:600}.guidance-stat__label{color:var(--guidance-muted);font-size:var(--text-xs);letter-spacing:.08em;text-transform:uppercase}.guidance-compare{grid-gap:var(--space-3);display:grid;gap:var(--space-3);grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}.guidance-compare__item{grid-gap:var(--space-2);background-color:var(--guidance-bg);border:1px solid var(--guidance-outline);border-radius:var(--radius-md);box-shadow:var(--guidance-shadow);display:grid;gap:var(--space-2);overflow:hidden;padding:var(--guidance-padding-md,var(--space-4));position:relative}.guidance-compare__item:before{background:var(--guidance-rail);bottom:0;content:"";left:0;position:absolute;right:auto;top:0;width:4px}.guidance-compare__label{color:var(--guidance-muted);font-size:var(--text-xs);letter-spacing:.08em;text-transform:uppercase}.guidance-compare__title{color:var(--guidance-title);font-size:var(--text-md);font-weight:600}.guidance-compare__list{grid-gap:var(--space-1);display:grid;gap:var(--space-1);list-style:none;margin:0;padding:0}.guidance-compare__list li{font-size:var(--text-sm);padding-left:var(--space-4);position:relative}.guidance-compare__list li:before{background-color:var(--guidance-rail);border-radius:var(--radius-full);content:"";height:.4rem;left:0;position:absolute;top:.35rem;width:.4rem}.guidance-row{grid-gap:var(--space-3);background-color:var(--guidance-bg);border:1px solid var(--guidance-outline);border-radius:var(--radius-lg);box-shadow:var(--guidance-shadow);display:grid;gap:var(--space-3);overflow:hidden;padding:var(--guidance-padding-md,var(--space-4));position:relative}.guidance-row:before{background:var(--guidance-rail);bottom:0;content:"";left:0;position:absolute;right:auto;top:0;width:4px}.guidance-row--tint{background-color:var(--guidance-tint)}.guidance-row__header{align-items:center;display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4);justify-content:space-between}.guidance-row__title{color:var(--guidance-title);font-size:var(--text-md);font-weight:600}.guidance-row__meta{color:var(--guidance-muted);font-size:var(--text-xs)}.guidance-row__labels{display:inline-flex;flex-wrap:wrap;gap:var(--space-2)}.guidance-row__label{align-items:center;background:var(--color-surface-subtle);border:1px solid var(--guidance-outline);border-radius:var(--radius-pill);color:var(--guidance-muted);display:inline-flex;font-size:var(--text-xxs);gap:var(--space-1);letter-spacing:.06em;padding:0 var(--space-2);text-transform:uppercase}.guidance-row__glance{color:var(--guidance-muted);font-size:var(--text-sm);line-height:1.4;line-height:var(--line-height-relaxed,1.4)}.guidance-row__details{display:flex;flex-wrap:wrap;gap:var(--space-2)}.guidance-row__detail{align-items:center;background:var(--color-surface);border:1px solid var(--guidance-outline);border-radius:var(--radius-pill);color:var(--guidance-text);display:inline-flex;font-size:var(--text-xs);gap:var(--space-1);padding:var(--space-1) var(--space-2)}.guidance-row__actions{align-items:center;display:flex;flex-wrap:wrap;gap:var(--space-2)}.guidance-field{grid-gap:0;background-color:var(--guidance-bg);border:1px solid var(--guidance-outline);border-left:var(--guidance-border-width) solid var(--guidance-rail);border-radius:var(--guidance-radius);box-shadow:var(--guidance-shadow);display:grid;gap:0;overflow:hidden}.guidance-field--plain{border-left:1px solid var(--guidance-outline)}.guidance-field__frame,.guidance-field__hint{padding:var(--guidance-padding-md,var(--space-4))}.guidance-field__frame{background-color:var(--guidance-bg)}.guidance-field__hint{grid-gap:var(--space-2);background-color:var(--guidance-tint);display:grid;gap:var(--space-2)}.guidance-field__hint--plain{background-color:var(--guidance-bg)}.guidance-field__frame+.guidance-field__hint,.guidance-field__hint+.guidance-field__frame{border-top:1px solid var(--guidance-outline)}.guidance-field__kicker{color:var(--guidance-muted);font-size:var(--text-xxs);letter-spacing:.12em;text-transform:uppercase}.guidance-field__title{color:var(--guidance-title);font-size:var(--text-md);font-weight:600;line-height:1.2;line-height:var(--line-height-tight,1.2)}.guidance-field__text{color:var(--guidance-text);font-size:var(--text-sm)}.guidance-field__meta{color:var(--guidance-muted);font-size:var(--text-xs)}.guidance-field__list{grid-gap:var(--space-1);display:grid;gap:var(--space-1);list-style:none;margin:0;padding:0}.guidance-field__list li{padding-left:var(--space-4);position:relative}.guidance-field__list li:before{background-color:var(--guidance-rail);border-radius:var(--radius-full);content:"";height:.4rem;left:0;position:absolute;top:.35rem;width:.4rem}.guidance-scope{grid-gap:var(--space-3);display:grid;gap:var(--space-3);grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}.guidance-scope__item{background-color:var(--guidance-bg);border:1px solid var(--guidance-outline);border-radius:var(--guidance-radius);display:flex;flex-direction:column;gap:var(--space-2);padding:var(--guidance-padding-md,var(--space-4))}.guidance-scope__item--tint{background-color:var(--guidance-tint)}.guidance-scope__item--rail{border-left:var(--guidance-border-width) solid var(--guidance-rail)}.guidance-scope__label{color:var(--guidance-muted);font-size:var(--text-xs);letter-spacing:.08em;text-transform:uppercase}.guidance-scope__list{grid-gap:var(--space-1);display:grid;gap:var(--space-1);list-style:none;margin:0;padding:0}.guidance-scope__list li{padding-left:var(--space-4);position:relative}.guidance-scope__list li:before{background-color:var(--guidance-rail);border-radius:var(--radius-full);content:"";height:.4rem;left:0;position:absolute;top:.35rem;width:.4rem}.guidance-checklist{grid-gap:var(--space-2);display:grid;gap:var(--space-2);list-style:none;margin:0;padding:0}.guidance-checklist li{font-size:var(--text-sm);padding-left:var(--space-5);position:relative}.guidance-checklist li:before{background-color:var(--color-surface);border:var(--border-width) solid var(--guidance-rail);border-radius:var(--radius-xs);content:"";height:.8rem;left:0;position:absolute;top:.2rem;width:.8rem}.guidance-checklist li.is-done:before{background-color:var(--guidance-rail);box-shadow:inset 0 0 0 2px var(--color-surface)}[data-density=compact] .guidance,[data-density=compact] .guidance-brief,[data-density=compact] .guidance-card,[data-density=compact] .guidance-compare__item,[data-density=compact] .guidance-field,[data-density=compact] .guidance-row,[data-density=compact] .guidance-scope__item,[data-density=compact] .guidance-stat,[data-density=compact] .guidance-step,[data-density=compact] .guidance-strip{padding:var(--guidance-padding-sm,var(--space-3))!important}

package/dist/components/inbox.css

@@ -73,6 +73,12 @@
     gap: var(--space-4);
 
     padding: var(--space-3) var(--space-4);
+    min-height: calc(
+        (var(--space-3) * 2) +
+        (var(--space-1) * 2) +
+        (var(--space-2) * 2) +
+        var(--text-sm)
+    );
     border: 1px solid var(--color-border-subtle);
     border-radius: var(--radius-lg);
     background: var(--color-surface);
@@ -250,6 +256,8 @@
     align-items: center;
     gap: var(--space-2);
 
+    flex: 1 1 auto;
+    min-width: 0;
     width: 0;
     opacity: 0;
     overflow: hidden;
@@ -261,7 +269,8 @@
 .vds-inbox-search__input {
     width: 100%;
     min-width: 10rem;
-    max-width: 32rem;
+    max-width: none;
+    flex: 1 1 auto;
 
     padding: var(--space-2) var(--space-3);
     border-radius: var(--radius-md);
@@ -277,18 +286,6 @@
 
 .vds-inbox-search.is-open .vds-inbox-search__field,
 .vds-inbox-search__toggle[aria-expanded="true"] + .vds-inbox-search__field {
-    width: min(36rem, 52vw);
-    opacity: 1;
-    pointer-events: auto;
-}
-
-/* Full-width search helper (mobile or on demand) */
-
-.vds-inbox-search--full {
-    width: 100%;
-}
-
-.vds-inbox-search--full .vds-inbox-search__field {
     width: 100%;
     opacity: 1;
     pointer-events: auto;
@@ -913,6 +910,14 @@ a.vds-inbox-action {
     color: var(--color-text-muted);
 }
 
+.vds-inbox-action--borderless {
+    border-color: transparent;
+}
+
+.vds-inbox-action--borderless:hover {
+    border-color: transparent;
+}
+
 .vds-inbox-action--flat:hover {
     background: var(--color-surface-subtle);
     border-color: transparent;
@@ -1199,7 +1204,7 @@ a.vds-inbox-action {
     /* Search: expand wider on small screens */
     .vds-inbox-search.is-open .vds-inbox-search__field,
     .vds-inbox-search__toggle[aria-expanded="true"] + .vds-inbox-search__field {
-        width: min(100%, 40rem);
+        width: 100%;
     }
 }
 

package/dist/components/inbox.min.css

@@ -1 +1 @@
-.vds-inbox,[data-vds-inbox]{--inbox-row-radius:var(--radius-lg,var(--radius-md));--inbox-row-border:var(--color-border-subtle);--inbox-row-bg:var(--color-surface);--inbox-row-bg-hover:var(--color-surface-subtle,var(--color-surface-hover));--inbox-row-shadow:none;--inbox-title-size:var(--text-sm);--inbox-desc-size:var(--text-xs);--inbox-icon-size:var(--icon-sm);--inbox-icon-muted:var(--color-icon-muted,var(--color-text-soft));--inbox-icon-strong:var(--color-icon-strong,var(--color-text));--inbox-action-gap:var(--space-2);--inbox-badge-gap:var(--space-2);--inbox-row-pad-x:var(--space-4);--inbox-row-pad-y:var(--space-4);--inbox-actions-min-width:0;--inbox-actions-justify:flex-end;width:100%}.vds-inbox--dense{--inbox-row-pad-x:var(--space-3);--inbox-row-pad-y:var(--space-3);--inbox-title-size:var(--text-xs);--inbox-desc-size:var(--text-xxs,var(--text-xs))}.vds-inbox-nav{display:flex;flex-direction:column;gap:var(--space-3);margin-bottom:var(--space-4)}.vds-inbox-nav__bar{align-items:center;background:var(--color-surface);border:1px solid var(--color-border-subtle);border-radius:var(--radius-lg);display:flex;gap:var(--space-4);justify-content:space-between;padding:var(--space-3) var(--space-4)}.vds-inbox-nav__left,.vds-inbox-nav__right{align-items:center;display:inline-flex;flex:0 0 auto;gap:var(--space-2)}.vds-inbox-nav__bottom{align-items:center;display:flex;gap:var(--space-3);justify-content:space-between}.vds-inbox-nav__bottom-left,.vds-inbox-nav__bottom-right{align-items:center;display:inline-flex;gap:var(--space-2)}.vds-inbox-nav__bottom-left:empty,.vds-inbox-nav__bottom-right:empty{display:none}.vds-inbox-nav__bottom--left{justify-content:flex-start}.vds-inbox-nav__bottom--center{justify-content:center}.vds-inbox-nav__bottom--right{justify-content:flex-end}.vds-inbox-nav__bottom--split{justify-content:space-between}.vds-inbox-tabs{background:var(--color-surface-subtle);border:1px solid var(--color-border-subtle);border-radius:var(--radius-lg);flex:1 1 auto;gap:var(--space-1);justify-content:center;min-width:0;padding:var(--space-1)}.vds-inbox-tab,.vds-inbox-tabs{align-items:center;display:inline-flex}.vds-inbox-tab{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;border-radius:var(--radius-md);color:var(--color-text-muted);cursor:pointer;font-size:var(--text-sm);font-weight:var(--font-weight-semibold);gap:var(--space-2);line-height:1;padding:var(--space-2) var(--space-3);-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap}.vds-inbox-tab:hover{background:var(--color-surface);color:var(--color-text)}.vds-inbox-tab.is-active,.vds-inbox-tab[aria-selected=true]{background:var(--color-surface);border:1px solid var(--color-border-subtle);color:var(--color-text)}.vds-inbox-tab:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}.vds-inbox-tab__count{align-items:center;background:var(--color-surface-subtle);border:1px solid var(--color-border-subtle);border-radius:var(--radius-pill);color:var(--color-text-muted);display:inline-flex;font-size:var(--text-xs);font-weight:var(--font-weight-semibold);height:1.5rem;justify-content:center;min-width:1.5rem;padding:0 var(--space-2)}.vds-inbox-search{align-items:center;display:inline-flex;gap:var(--space-2);min-width:0}.vds-inbox-search__toggle{align-items:center;background:var(--color-surface);border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);color:var(--color-text);display:inline-flex;height:2.25rem;height:var(--icon-container-md,2.25rem);justify-content:center;transition:background-color var(--transition-fast),border-color var(--transition-fast);width:2.25rem;width:var(--icon-container-md,2.25rem)}.vds-inbox-search__toggle:hover{background:var(--color-surface-subtle,var(--color-surface-hover));border-color:var(--color-border-strong,var(--color-border-subtle))}.vds-inbox-search__toggle svg{color:currentColor;height:1rem;height:var(--icon-xs,1rem);width:1rem;width:var(--icon-xs,1rem)}.vds-inbox-search__field{align-items:center;display:inline-flex;gap:var(--space-2);opacity:0;overflow:hidden;pointer-events:none;transition:width var(--transition-normal),opacity var(--transition-fast);width:0}.vds-inbox-search__input{background:var(--color-surface);border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);color:var(--color-text);font-size:var(--text-sm);line-height:var(--line-height-normal);max-width:32rem;min-width:10rem;padding:var(--space-2) var(--space-3);width:100%}.vds-inbox-search.is-open .vds-inbox-search__field,.vds-inbox-search__toggle[aria-expanded=true]+.vds-inbox-search__field{opacity:1;pointer-events:auto;width:min(36rem,52vw)}.vds-inbox-search--full{width:100%}.vds-inbox-search--full .vds-inbox-search__field{opacity:1;pointer-events:auto;width:100%}.vds-inbox-nav__bar--search-full .vds-inbox-nav__left,.vds-inbox-nav__bar--search-full .vds-inbox-search{flex:1 1 auto;width:100%}.vds-inbox-nav__bar--search-full .vds-inbox-search__field{opacity:1;pointer-events:auto;width:100%}.vds-inbox-nav__bar--search-full .vds-inbox-search__input{max-width:none}.vds-inbox-nav__bar--search-full .vds-inbox-nav__right,.vds-inbox-nav__bar--search-full .vds-inbox-tabs{display:none}.vds-inbox__list{display:flex;flex-direction:column;gap:var(--space-2)}.vds-inbox--flat .vds-inbox__list{border-bottom:1px solid var(--color-border-subtle);border-top:1px solid var(--color-border-subtle);gap:0}.vds-inbox--flat .vds-inbox-row{border-left:0;border-radius:0;border-right:0;border-top:0}.vds-inbox--flat .vds-inbox-row+.vds-inbox-row{border-top:1px solid var(--color-border-subtle)}.vds-inbox-row{background:var(--inbox-row-bg);border:1px solid var(--inbox-row-border);border-radius:var(--inbox-row-radius);box-shadow:var(--inbox-row-shadow);overflow:clip;position:relative;transition:background-color var(--transition-fast),border-color var(--transition-fast),transform var(--transition-fast);width:100%}.vds-inbox-row:hover{background:var(--inbox-row-bg-hover);border-color:var(--color-border-strong,var(--color-border-subtle))}.vds-inbox-row:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}.vds-inbox-row__main{background:transparent;border:0;color:inherit;display:grid;grid-template-columns:1fr;grid-template-rows:auto auto;padding:0;text-align:left;width:100%}.vds-inbox-row__inner{grid-gap:var(--space-4);align-items:start;display:grid;gap:var(--space-4);grid-column:1/-1;grid-row:1;grid-template-areas:"badges  badges" "meta    actions" "data    data";grid-template-columns:1fr auto;padding:var(--inbox-row-pad-y) var(--inbox-row-pad-x)}.vds-inbox-row__badges{grid-area:badges}.vds-inbox-row__meta{grid-area:meta}.vds-inbox-row__actions{grid-area:actions}.vds-inbox-row__data{display:flex;flex-direction:column;gap:var(--space-2);grid-area:data;min-width:0}@media (max-width:768px){.vds-inbox-row__inner{grid-template-areas:"badges" "meta" "data" "actions";grid-template-columns:1fr}.vds-inbox-row__actions{justify-content:flex-end;min-width:0;padding-top:0}}.vds-inbox-row__labels{justify-content:flex-start;margin-left:0;text-align:left}.vds-inbox-row__title{min-width:0}.vds-inbox-row--minimal .vds-inbox-row__inner{gap:var(--space-3);padding:var(--space-3) var(--space-3)}.vds-inbox-row--minimal{--inbox-title-size:var(--text-xs);--inbox-desc-size:var(--text-xxs,var(--text-xs))}.vds-inbox-row--normal .vds-inbox-row__inner{gap:var(--space-4);padding:var(--space-4) var(--space-4)}.vds-inbox-row--rich .vds-inbox-row__inner{gap:var(--space-5);padding:var(--space-5) var(--space-5)}.vds-inbox-row--rich{--inbox-title-size:var(--text-md,var(--text-sm));--inbox-desc-size:var(--text-sm)}.vds-inbox-row--mega .vds-inbox-row__inner{gap:var(--space-6);padding:var(--space-6) var(--space-6)}.vds-inbox-row--mega{--inbox-title-size:var(--text-lg,var(--text-md,var(--text-sm)));--inbox-desc-size:var(--text-sm)}.vds-inbox-row__badges{align-items:center;display:flex;flex-wrap:wrap;gap:var(--inbox-badge-gap);grid-column:1/-1;margin-bottom:var(--space-3)}.vds-inbox-badge{align-items:center;background:var(--color-surface-subtle);border:1px solid var(--color-border-subtle);border-radius:var(--radius-pill);color:var(--color-text);display:inline-flex;font-size:var(--text-xxs);font-weight:var(--font-weight-semibold);gap:var(--space-1_5);letter-spacing:.02em;line-height:1.1;padding:var(--space-1) var(--space-2_5);white-space:nowrap}.vds-inbox-badge svg{color:currentColor;height:var(--icon-xxs);width:var(--icon-xxs)}.vds-inbox-badge--accent{background:var(--color-accent-soft);border-color:var(--color-accent);color:var(--color-text)}.vds-inbox-badge--info{background:var(--semantic-info-bg,var(--color-info-soft));border-color:var(--semantic-info-border,var(--color-info));color:var(--semantic-info-text,var(--color-text))}.vds-inbox-badge--success{background:var(--semantic-success-bg,var(--color-success-soft));border-color:var(--semantic-success-border,var(--color-success));color:var(--semantic-success-text,var(--color-text))}.vds-inbox-badge--warning{background:var(--semantic-warning-bg,var(--color-warning-soft));border-color:var(--semantic-warning-border,var(--color-warning));color:var(--semantic-warning-text,var(--color-text))}.vds-inbox-badge--danger{background:var(--semantic-danger-bg,var(--color-danger-soft));border-color:var(--semantic-danger-border,var(--color-danger));color:var(--semantic-danger-text,var(--color-text))}.vds-inbox-row__meta{display:flex;flex-direction:column;gap:var(--space-2);min-width:0}.vds-inbox-row__titleline{align-items:center;display:flex;gap:var(--space-2);min-width:0}.vds-inbox-row__status{align-items:center;display:inline-flex;flex:0 0 auto;gap:var(--space-1_5)}.vds-inbox-row__status-icon{align-items:center;color:var(--inbox-icon-muted);display:inline-flex;height:var(--inbox-icon-size);justify-content:center;width:var(--inbox-icon-size)}.vds-inbox-row__status-icon svg{height:100%;width:100%}.vds-inbox-row.is-bookmarked .vds-inbox-row__status-icon--bookmark,.vds-inbox-row.is-starred .vds-inbox-row__status-icon--star{color:var(--color-accent)}.vds-inbox-row.is-flagged .vds-inbox-row__status-icon--flag{color:var(--color-danger-strong,var(--color-danger))}.vds-inbox-row__title{color:var(--color-text);flex:1 1 auto;font-size:var(--inbox-title-size);font-weight:var(--font-weight-semibold);letter-spacing:0;letter-spacing:var(--letter-tight,0);line-height:var(--line-height-snug);max-width:100%;min-width:16ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vds-inbox-row__labels{align-items:center;display:inline-flex;flex:0 0 auto;gap:var(--space-1_5);min-width:0}.vds-inbox-label{align-items:center;background:transparent;border:1px solid var(--color-border-subtle);border-radius:var(--radius-pill);color:var(--color-text-muted);display:inline-flex;font-size:var(--text-xxs);font-weight:var(--font-weight-semibold);height:1.4rem;padding:0 var(--space-2);white-space:nowrap}.vds-inbox-label--accent{background:var(--color-accent-soft);border-color:var(--color-accent);color:var(--color-text)}.vds-inbox-label--muted{background:var(--color-surface-subtle);border-color:var(--color-border-subtle);color:var(--color-text-muted)}.vds-inbox-row__glance{-webkit-box-orient:vertical;-webkit-line-clamp:2;color:var(--color-text-muted);display:-webkit-box;font-size:var(--inbox-desc-size);line-height:var(--line-height-relaxed);min-width:0;overflow:hidden}.vds-inbox-row--rich .vds-inbox-row__glance{-webkit-line-clamp:3}.vds-inbox-row--mega .vds-inbox-row__glance{-webkit-line-clamp:4}.vds-inbox-row__metafoot{align-items:center;color:var(--color-text-soft,var(--color-text-muted));display:flex;flex-wrap:wrap;font-size:var(--text-xxs,var(--text-xs));gap:var(--space-2) var(--space-4)}.vds-inbox-row__metafoot strong{color:var(--color-text-muted);font-weight:var(--font-weight-semibold)}.vds-inbox-row__details{color:var(--color-text-muted);display:flex;flex-wrap:wrap;font-size:var(--text-xs);gap:var(--space-2) var(--space-3)}.vds-inbox-row__details-item{align-items:center;background:var(--color-surface-subtle);border:1px solid var(--color-border-subtle);border-radius:var(--radius-pill);display:inline-flex;gap:var(--space-1_5);line-height:1.1;padding:var(--space-1) var(--space-2)}.vds-inbox-row__details-item svg{color:currentColor;height:var(--icon-xxs);width:var(--icon-xxs)}.vds-inbox-row__actions{align-items:flex-start;display:flex;flex-wrap:wrap;gap:var(--inbox-action-gap);justify-content:var(--inbox-actions-justify);min-width:var(--inbox-actions-min-width);padding-top:var(--space-0_5)}.vds-inbox-row--actions-below .vds-inbox-row__inner{grid-template-areas:"badges" "meta" "data" "actions";grid-template-columns:1fr}.vds-inbox-row--actions-below .vds-inbox-row__actions{justify-content:flex-start;padding-top:0}.vds-inbox-row--actions-full .vds-inbox-row__actions{grid-column:1/-1;justify-content:flex-start;padding-top:0}.vds-inbox-row__actions--left{justify-content:flex-start}.vds-inbox-row__actions--center{justify-content:center}.vds-inbox-row__actions--right{justify-content:flex-end}.vds-inbox-action{align-items:center;background:var(--color-surface);border:1px solid var(--color-border-subtle);border-radius:var(--radius-sm);color:var(--color-text);display:inline-flex;font-size:var(--text-xs);font-weight:var(--font-weight-semibold);gap:var(--space-1_5);justify-content:center;padding:var(--space-1_5) var(--space-2_5);transition:background-color var(--transition-fast),border-color var(--transition-fast),color var(--transition-fast),transform var(--transition-fast)}a.vds-inbox-action{-webkit-text-decoration:none;text-decoration:none}.vds-inbox-action svg{color:currentColor;height:var(--icon-xxs);width:var(--icon-xxs)}.vds-inbox-action:hover{background:var(--color-surface-subtle,var(--color-surface-hover));border-color:var(--color-border-strong,var(--color-border-subtle));transform:translateY(-1px)}.vds-inbox-action:active{transform:translateY(0)}.vds-inbox-action--danger{border-color:var(--color-danger,var(--color-border-strong));color:var(--color-danger-strong,var(--color-danger))}.vds-inbox-action--accent{background:var(--color-accent-soft);border-color:var(--color-accent);color:var(--color-text)}.vds-inbox-action--icon{height:2.25rem;height:var(--icon-container-md,2.25rem);padding:0;width:2.25rem;width:var(--icon-container-md,2.25rem)}.vds-inbox-action--flat{background:transparent;border-color:transparent;color:var(--color-text-muted)}.vds-inbox-action--flat:hover{background:var(--color-surface-subtle);border-color:transparent;color:var(--color-text);transform:none}.vds-inbox--actions-flat .vds-inbox-action{background:transparent;border-color:transparent;color:var(--color-text-muted);transform:none}.vds-inbox--actions-flat .vds-inbox-action:hover{background:var(--color-surface-subtle);border-color:transparent;color:var(--color-text)}.vds-inbox-row__expanded{background:var(--color-bg-soft,var(--color-surface-subtle));border-top:1px solid var(--color-border-subtle);color:var(--color-text);display:none;grid-column:1/-1;grid-row:2;padding:var(--space-4)}.vds-inbox-row--open .vds-inbox-row__expanded{display:block}.vds-inbox-row--open .vds-inbox-row__glance{-webkit-line-clamp:none;overflow:visible}.vds-inbox--flat .vds-inbox-row__expanded{background:var(--color-surface-subtle)}.vds-inbox-row__expanded.vds-is-hidden{display:none!important}.vds-inbox-row__expanded.vds-is-visible{display:block!important}.vds-inbox-row.is-flagged:before{background:var(--inbox-flag-color,var(--color-danger));bottom:0;content:"";left:0;position:absolute;right:auto;top:0;width:6px}.vds-inbox-row--flag-1{--inbox-flag-color:var(--color-danger);--inbox-flag-surface:var(--semantic-danger-bg,var(--color-danger-soft))}.vds-icon-flag--1{color:var(--color-danger)}.vds-inbox-row--flag-2{--inbox-flag-color:var(--color-warning);--inbox-flag-surface:var(--semantic-warning-bg,var(--color-warning-soft))}.vds-icon-flag--2{color:var(--color-warning)}.vds-inbox-row--flag-3{--inbox-flag-color:var(--color-info);--inbox-flag-surface:var(--semantic-info-bg,var(--color-info-soft))}.vds-icon-flag--3{color:var(--color-info)}.vds-inbox-row--flag-4{--inbox-flag-color:var(--color-success);--inbox-flag-surface:var(--semantic-success-bg,var(--color-success-soft))}.vds-icon-flag--4{color:var(--color-success)}.vds-inbox-row--flag-5{--inbox-flag-color:var(--color-accent);--inbox-flag-surface:var(--color-accent-soft)}.vds-icon-flag--5{color:var(--color-accent)}.vds-inbox-filter{align-items:center;background:var(--color-surface);border:1px solid var(--color-border-subtle);border-radius:var(--radius-lg);display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-3);padding:var(--space-3) var(--space-4)}.vds-inbox-filter__group{align-items:center;display:inline-flex;gap:var(--space-2);min-width:0}.vds-inbox-filter__label{color:var(--color-text-muted)}.vds-inbox-filter__chip,.vds-inbox-filter__label{font-size:var(--text-xs);font-weight:var(--font-weight-semibold);white-space:nowrap}.vds-inbox-filter__chip{align-items:center;background:var(--color-surface-subtle);border:1px solid var(--color-border-subtle);border-radius:var(--radius-pill);color:var(--color-text);display:inline-flex;gap:var(--space-1_5);line-height:1.1;padding:var(--space-1_5) var(--space-2_5)}.vds-inbox-filter__chip--active{background:var(--color-accent-soft);border-color:var(--color-accent)}.vds-inbox-filter__actions{margin-left:auto}.vds-inbox-cornerbar,.vds-inbox-filter__actions{align-items:center;display:inline-flex;gap:var(--space-2)}.vds-inbox-cornerbar{bottom:var(--space-6);left:auto;pointer-events:none;position:fixed;right:var(--space-6);top:auto;z-index:40}.vds-inbox-cornerbar--left{bottom:var(--space-6);left:var(--space-6);right:auto;top:auto}.vds-inbox-cornerbar__inner{align-items:center;background:var(--color-surface);border:1px solid var(--color-border-subtle);border-radius:var(--radius-xl,var(--radius-lg));box-shadow:none;box-shadow:var(--shadow-md,none);display:inline-flex;gap:var(--space-2);padding:var(--space-2);pointer-events:auto}@media (max-width:768px){.vds-inbox-row__inner{gap:var(--space-3);grid-template-columns:1fr}.vds-inbox-row__actions{justify-content:flex-start;padding-top:0}.vds-inbox-row__titleline{flex-wrap:wrap;row-gap:var(--space-1_5)}.vds-inbox-row__title{flex-basis:100%;overflow:visible;text-overflow:clip;white-space:normal}.vds-inbox-row__labels{flex-basis:100%;justify-content:flex-start}.vds-inbox-nav__bar{flex-wrap:wrap;gap:var(--space-3);justify-content:center}.vds-inbox-tabs{justify-content:center;order:1;width:100%}.vds-inbox-nav__left{order:0}.vds-inbox-nav__right{order:2}.vds-inbox-nav__bottom{align-items:stretch;flex-direction:column}.vds-inbox-nav__bottom-left,.vds-inbox-nav__bottom-right{justify-content:flex-start}.vds-inbox-search.is-open .vds-inbox-search__field,.vds-inbox-search__toggle[aria-expanded=true]+.vds-inbox-search__field{width:min(100%,40rem)}.vds-inbox__hide-sm{display:none!important}}@media (min-width:769px){.vds-inbox__show-sm{display:none!important}}@media (max-width:1024px){.vds-inbox__hide-md{display:none!important}}@media (min-width:1025px){.vds-inbox__show-md{display:none!important}}.vds-inbox__truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vds-inbox__sr-only{clip:rect(0,0,0,0)!important;border:0!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}
+.vds-inbox,[data-vds-inbox]{--inbox-row-radius:var(--radius-lg,var(--radius-md));--inbox-row-border:var(--color-border-subtle);--inbox-row-bg:var(--color-surface);--inbox-row-bg-hover:var(--color-surface-subtle,var(--color-surface-hover));--inbox-row-shadow:none;--inbox-title-size:var(--text-sm);--inbox-desc-size:var(--text-xs);--inbox-icon-size:var(--icon-sm);--inbox-icon-muted:var(--color-icon-muted,var(--color-text-soft));--inbox-icon-strong:var(--color-icon-strong,var(--color-text));--inbox-action-gap:var(--space-2);--inbox-badge-gap:var(--space-2);--inbox-row-pad-x:var(--space-4);--inbox-row-pad-y:var(--space-4);--inbox-actions-min-width:0;--inbox-actions-justify:flex-end;width:100%}.vds-inbox--dense{--inbox-row-pad-x:var(--space-3);--inbox-row-pad-y:var(--space-3);--inbox-title-size:var(--text-xs);--inbox-desc-size:var(--text-xxs,var(--text-xs))}.vds-inbox-nav{display:flex;flex-direction:column;gap:var(--space-3);margin-bottom:var(--space-4)}.vds-inbox-nav__bar{align-items:center;background:var(--color-surface);border:1px solid var(--color-border-subtle);border-radius:var(--radius-lg);display:flex;gap:var(--space-4);justify-content:space-between;min-height:calc(var(--space-3)*2 + var(--space-1)*2 + var(--space-2)*2 + var(--text-sm));padding:var(--space-3) var(--space-4)}.vds-inbox-nav__left,.vds-inbox-nav__right{align-items:center;display:inline-flex;flex:0 0 auto;gap:var(--space-2)}.vds-inbox-nav__bottom{align-items:center;display:flex;gap:var(--space-3);justify-content:space-between}.vds-inbox-nav__bottom-left,.vds-inbox-nav__bottom-right{align-items:center;display:inline-flex;gap:var(--space-2)}.vds-inbox-nav__bottom-left:empty,.vds-inbox-nav__bottom-right:empty{display:none}.vds-inbox-nav__bottom--left{justify-content:flex-start}.vds-inbox-nav__bottom--center{justify-content:center}.vds-inbox-nav__bottom--right{justify-content:flex-end}.vds-inbox-nav__bottom--split{justify-content:space-between}.vds-inbox-tabs{background:var(--color-surface-subtle);border:1px solid var(--color-border-subtle);border-radius:var(--radius-lg);flex:1 1 auto;gap:var(--space-1);justify-content:center;min-width:0;padding:var(--space-1)}.vds-inbox-tab,.vds-inbox-tabs{align-items:center;display:inline-flex}.vds-inbox-tab{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;border-radius:var(--radius-md);color:var(--color-text-muted);cursor:pointer;font-size:var(--text-sm);font-weight:var(--font-weight-semibold);gap:var(--space-2);line-height:1;padding:var(--space-2) var(--space-3);-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap}.vds-inbox-tab:hover{background:var(--color-surface);color:var(--color-text)}.vds-inbox-tab.is-active,.vds-inbox-tab[aria-selected=true]{background:var(--color-surface);border:1px solid var(--color-border-subtle);color:var(--color-text)}.vds-inbox-tab:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}.vds-inbox-tab__count{align-items:center;background:var(--color-surface-subtle);border:1px solid var(--color-border-subtle);border-radius:var(--radius-pill);color:var(--color-text-muted);display:inline-flex;font-size:var(--text-xs);font-weight:var(--font-weight-semibold);height:1.5rem;justify-content:center;min-width:1.5rem;padding:0 var(--space-2)}.vds-inbox-search{align-items:center;display:inline-flex;gap:var(--space-2);min-width:0}.vds-inbox-search__toggle{align-items:center;background:var(--color-surface);border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);color:var(--color-text);display:inline-flex;height:2.25rem;height:var(--icon-container-md,2.25rem);justify-content:center;transition:background-color var(--transition-fast),border-color var(--transition-fast);width:2.25rem;width:var(--icon-container-md,2.25rem)}.vds-inbox-search__toggle:hover{background:var(--color-surface-subtle,var(--color-surface-hover));border-color:var(--color-border-strong,var(--color-border-subtle))}.vds-inbox-search__toggle svg{color:currentColor;height:1rem;height:var(--icon-xs,1rem);width:1rem;width:var(--icon-xs,1rem)}.vds-inbox-search__field{align-items:center;display:inline-flex;flex:1 1 auto;gap:var(--space-2);min-width:0;opacity:0;overflow:hidden;pointer-events:none;transition:width var(--transition-normal),opacity var(--transition-fast);width:0}.vds-inbox-search__input{background:var(--color-surface);border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);color:var(--color-text);flex:1 1 auto;font-size:var(--text-sm);line-height:var(--line-height-normal);max-width:none;min-width:10rem;padding:var(--space-2) var(--space-3);width:100%}.vds-inbox-search.is-open .vds-inbox-search__field,.vds-inbox-search__toggle[aria-expanded=true]+.vds-inbox-search__field{opacity:1;pointer-events:auto;width:100%}.vds-inbox-nav__bar--search-full .vds-inbox-nav__left,.vds-inbox-nav__bar--search-full .vds-inbox-search{flex:1 1 auto;width:100%}.vds-inbox-nav__bar--search-full .vds-inbox-search__field{opacity:1;pointer-events:auto;width:100%}.vds-inbox-nav__bar--search-full .vds-inbox-search__input{max-width:none}.vds-inbox-nav__bar--search-full .vds-inbox-nav__right,.vds-inbox-nav__bar--search-full .vds-inbox-tabs{display:none}.vds-inbox__list{display:flex;flex-direction:column;gap:var(--space-2)}.vds-inbox--flat .vds-inbox__list{border-bottom:1px solid var(--color-border-subtle);border-top:1px solid var(--color-border-subtle);gap:0}.vds-inbox--flat .vds-inbox-row{border-left:0;border-radius:0;border-right:0;border-top:0}.vds-inbox--flat .vds-inbox-row+.vds-inbox-row{border-top:1px solid var(--color-border-subtle)}.vds-inbox-row{background:var(--inbox-row-bg);border:1px solid var(--inbox-row-border);border-radius:var(--inbox-row-radius);box-shadow:var(--inbox-row-shadow);overflow:clip;position:relative;transition:background-color var(--transition-fast),border-color var(--transition-fast),transform var(--transition-fast);width:100%}.vds-inbox-row:hover{background:var(--inbox-row-bg-hover);border-color:var(--color-border-strong,var(--color-border-subtle))}.vds-inbox-row:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}.vds-inbox-row__main{background:transparent;border:0;color:inherit;display:grid;grid-template-columns:1fr;grid-template-rows:auto auto;padding:0;text-align:left;width:100%}.vds-inbox-row__inner{grid-gap:var(--space-4);align-items:start;display:grid;gap:var(--space-4);grid-column:1/-1;grid-row:1;grid-template-areas:"badges  badges" "meta    actions" "data    data";grid-template-columns:1fr auto;padding:var(--inbox-row-pad-y) var(--inbox-row-pad-x)}.vds-inbox-row__badges{grid-area:badges}.vds-inbox-row__meta{grid-area:meta}.vds-inbox-row__actions{grid-area:actions}.vds-inbox-row__data{display:flex;flex-direction:column;gap:var(--space-2);grid-area:data;min-width:0}@media (max-width:768px){.vds-inbox-row__inner{grid-template-areas:"badges" "meta" "data" "actions";grid-template-columns:1fr}.vds-inbox-row__actions{justify-content:flex-end;min-width:0;padding-top:0}}.vds-inbox-row__labels{justify-content:flex-start;margin-left:0;text-align:left}.vds-inbox-row__title{min-width:0}.vds-inbox-row--minimal .vds-inbox-row__inner{gap:var(--space-3);padding:var(--space-3) var(--space-3)}.vds-inbox-row--minimal{--inbox-title-size:var(--text-xs);--inbox-desc-size:var(--text-xxs,var(--text-xs))}.vds-inbox-row--normal .vds-inbox-row__inner{gap:var(--space-4);padding:var(--space-4) var(--space-4)}.vds-inbox-row--rich .vds-inbox-row__inner{gap:var(--space-5);padding:var(--space-5) var(--space-5)}.vds-inbox-row--rich{--inbox-title-size:var(--text-md,var(--text-sm));--inbox-desc-size:var(--text-sm)}.vds-inbox-row--mega .vds-inbox-row__inner{gap:var(--space-6);padding:var(--space-6) var(--space-6)}.vds-inbox-row--mega{--inbox-title-size:var(--text-lg,var(--text-md,var(--text-sm)));--inbox-desc-size:var(--text-sm)}.vds-inbox-row__badges{align-items:center;display:flex;flex-wrap:wrap;gap:var(--inbox-badge-gap);grid-column:1/-1;margin-bottom:var(--space-3)}.vds-inbox-badge{align-items:center;background:var(--color-surface-subtle);border:1px solid var(--color-border-subtle);border-radius:var(--radius-pill);color:var(--color-text);display:inline-flex;font-size:var(--text-xxs);font-weight:var(--font-weight-semibold);gap:var(--space-1_5);letter-spacing:.02em;line-height:1.1;padding:var(--space-1) var(--space-2_5);white-space:nowrap}.vds-inbox-badge svg{color:currentColor;height:var(--icon-xxs);width:var(--icon-xxs)}.vds-inbox-badge--accent{background:var(--color-accent-soft);border-color:var(--color-accent);color:var(--color-text)}.vds-inbox-badge--info{background:var(--semantic-info-bg,var(--color-info-soft));border-color:var(--semantic-info-border,var(--color-info));color:var(--semantic-info-text,var(--color-text))}.vds-inbox-badge--success{background:var(--semantic-success-bg,var(--color-success-soft));border-color:var(--semantic-success-border,var(--color-success));color:var(--semantic-success-text,var(--color-text))}.vds-inbox-badge--warning{background:var(--semantic-warning-bg,var(--color-warning-soft));border-color:var(--semantic-warning-border,var(--color-warning));color:var(--semantic-warning-text,var(--color-text))}.vds-inbox-badge--danger{background:var(--semantic-danger-bg,var(--color-danger-soft));border-color:var(--semantic-danger-border,var(--color-danger));color:var(--semantic-danger-text,var(--color-text))}.vds-inbox-row__meta{display:flex;flex-direction:column;gap:var(--space-2);min-width:0}.vds-inbox-row__titleline{align-items:center;display:flex;gap:var(--space-2);min-width:0}.vds-inbox-row__status{align-items:center;display:inline-flex;flex:0 0 auto;gap:var(--space-1_5)}.vds-inbox-row__status-icon{align-items:center;color:var(--inbox-icon-muted);display:inline-flex;height:var(--inbox-icon-size);justify-content:center;width:var(--inbox-icon-size)}.vds-inbox-row__status-icon svg{height:100%;width:100%}.vds-inbox-row.is-bookmarked .vds-inbox-row__status-icon--bookmark,.vds-inbox-row.is-starred .vds-inbox-row__status-icon--star{color:var(--color-accent)}.vds-inbox-row.is-flagged .vds-inbox-row__status-icon--flag{color:var(--color-danger-strong,var(--color-danger))}.vds-inbox-row__title{color:var(--color-text);flex:1 1 auto;font-size:var(--inbox-title-size);font-weight:var(--font-weight-semibold);letter-spacing:0;letter-spacing:var(--letter-tight,0);line-height:var(--line-height-snug);max-width:100%;min-width:16ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vds-inbox-row__labels{align-items:center;display:inline-flex;flex:0 0 auto;gap:var(--space-1_5);min-width:0}.vds-inbox-label{align-items:center;background:transparent;border:1px solid var(--color-border-subtle);border-radius:var(--radius-pill);color:var(--color-text-muted);display:inline-flex;font-size:var(--text-xxs);font-weight:var(--font-weight-semibold);height:1.4rem;padding:0 var(--space-2);white-space:nowrap}.vds-inbox-label--accent{background:var(--color-accent-soft);border-color:var(--color-accent);color:var(--color-text)}.vds-inbox-label--muted{background:var(--color-surface-subtle);border-color:var(--color-border-subtle);color:var(--color-text-muted)}.vds-inbox-row__glance{-webkit-box-orient:vertical;-webkit-line-clamp:2;color:var(--color-text-muted);display:-webkit-box;font-size:var(--inbox-desc-size);line-height:var(--line-height-relaxed);min-width:0;overflow:hidden}.vds-inbox-row--rich .vds-inbox-row__glance{-webkit-line-clamp:3}.vds-inbox-row--mega .vds-inbox-row__glance{-webkit-line-clamp:4}.vds-inbox-row__metafoot{align-items:center;color:var(--color-text-soft,var(--color-text-muted));display:flex;flex-wrap:wrap;font-size:var(--text-xxs,var(--text-xs));gap:var(--space-2) var(--space-4)}.vds-inbox-row__metafoot strong{color:var(--color-text-muted);font-weight:var(--font-weight-semibold)}.vds-inbox-row__details{color:var(--color-text-muted);display:flex;flex-wrap:wrap;font-size:var(--text-xs);gap:var(--space-2) var(--space-3)}.vds-inbox-row__details-item{align-items:center;background:var(--color-surface-subtle);border:1px solid var(--color-border-subtle);border-radius:var(--radius-pill);display:inline-flex;gap:var(--space-1_5);line-height:1.1;padding:var(--space-1) var(--space-2)}.vds-inbox-row__details-item svg{color:currentColor;height:var(--icon-xxs);width:var(--icon-xxs)}.vds-inbox-row__actions{align-items:flex-start;display:flex;flex-wrap:wrap;gap:var(--inbox-action-gap);justify-content:var(--inbox-actions-justify);min-width:var(--inbox-actions-min-width);padding-top:var(--space-0_5)}.vds-inbox-row--actions-below .vds-inbox-row__inner{grid-template-areas:"badges" "meta" "data" "actions";grid-template-columns:1fr}.vds-inbox-row--actions-below .vds-inbox-row__actions{justify-content:flex-start;padding-top:0}.vds-inbox-row--actions-full .vds-inbox-row__actions{grid-column:1/-1;justify-content:flex-start;padding-top:0}.vds-inbox-row__actions--left{justify-content:flex-start}.vds-inbox-row__actions--center{justify-content:center}.vds-inbox-row__actions--right{justify-content:flex-end}.vds-inbox-action{align-items:center;background:var(--color-surface);border:1px solid var(--color-border-subtle);border-radius:var(--radius-sm);color:var(--color-text);display:inline-flex;font-size:var(--text-xs);font-weight:var(--font-weight-semibold);gap:var(--space-1_5);justify-content:center;padding:var(--space-1_5) var(--space-2_5);transition:background-color var(--transition-fast),border-color var(--transition-fast),color var(--transition-fast),transform var(--transition-fast)}a.vds-inbox-action{-webkit-text-decoration:none;text-decoration:none}.vds-inbox-action svg{color:currentColor;height:var(--icon-xxs);width:var(--icon-xxs)}.vds-inbox-action:hover{background:var(--color-surface-subtle,var(--color-surface-hover));border-color:var(--color-border-strong,var(--color-border-subtle));transform:translateY(-1px)}.vds-inbox-action:active{transform:translateY(0)}.vds-inbox-action--danger{border-color:var(--color-danger,var(--color-border-strong));color:var(--color-danger-strong,var(--color-danger))}.vds-inbox-action--accent{background:var(--color-accent-soft);border-color:var(--color-accent);color:var(--color-text)}.vds-inbox-action--icon{height:2.25rem;height:var(--icon-container-md,2.25rem);padding:0;width:2.25rem;width:var(--icon-container-md,2.25rem)}.vds-inbox-action--flat{background:transparent;color:var(--color-text-muted)}.vds-inbox-action--borderless,.vds-inbox-action--borderless:hover,.vds-inbox-action--flat{border-color:transparent}.vds-inbox-action--flat:hover{background:var(--color-surface-subtle);border-color:transparent;color:var(--color-text);transform:none}.vds-inbox--actions-flat .vds-inbox-action{background:transparent;border-color:transparent;color:var(--color-text-muted);transform:none}.vds-inbox--actions-flat .vds-inbox-action:hover{background:var(--color-surface-subtle);border-color:transparent;color:var(--color-text)}.vds-inbox-row__expanded{background:var(--color-bg-soft,var(--color-surface-subtle));border-top:1px solid var(--color-border-subtle);color:var(--color-text);display:none;grid-column:1/-1;grid-row:2;padding:var(--space-4)}.vds-inbox-row--open .vds-inbox-row__expanded{display:block}.vds-inbox-row--open .vds-inbox-row__glance{-webkit-line-clamp:none;overflow:visible}.vds-inbox--flat .vds-inbox-row__expanded{background:var(--color-surface-subtle)}.vds-inbox-row__expanded.vds-is-hidden{display:none!important}.vds-inbox-row__expanded.vds-is-visible{display:block!important}.vds-inbox-row.is-flagged:before{background:var(--inbox-flag-color,var(--color-danger));bottom:0;content:"";left:0;position:absolute;right:auto;top:0;width:6px}.vds-inbox-row--flag-1{--inbox-flag-color:var(--color-danger);--inbox-flag-surface:var(--semantic-danger-bg,var(--color-danger-soft))}.vds-icon-flag--1{color:var(--color-danger)}.vds-inbox-row--flag-2{--inbox-flag-color:var(--color-warning);--inbox-flag-surface:var(--semantic-warning-bg,var(--color-warning-soft))}.vds-icon-flag--2{color:var(--color-warning)}.vds-inbox-row--flag-3{--inbox-flag-color:var(--color-info);--inbox-flag-surface:var(--semantic-info-bg,var(--color-info-soft))}.vds-icon-flag--3{color:var(--color-info)}.vds-inbox-row--flag-4{--inbox-flag-color:var(--color-success);--inbox-flag-surface:var(--semantic-success-bg,var(--color-success-soft))}.vds-icon-flag--4{color:var(--color-success)}.vds-inbox-row--flag-5{--inbox-flag-color:var(--color-accent);--inbox-flag-surface:var(--color-accent-soft)}.vds-icon-flag--5{color:var(--color-accent)}.vds-inbox-filter{align-items:center;background:var(--color-surface);border:1px solid var(--color-border-subtle);border-radius:var(--radius-lg);display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-3);padding:var(--space-3) var(--space-4)}.vds-inbox-filter__group{align-items:center;display:inline-flex;gap:var(--space-2);min-width:0}.vds-inbox-filter__label{color:var(--color-text-muted)}.vds-inbox-filter__chip,.vds-inbox-filter__label{font-size:var(--text-xs);font-weight:var(--font-weight-semibold);white-space:nowrap}.vds-inbox-filter__chip{align-items:center;background:var(--color-surface-subtle);border:1px solid var(--color-border-subtle);border-radius:var(--radius-pill);color:var(--color-text);display:inline-flex;gap:var(--space-1_5);line-height:1.1;padding:var(--space-1_5) var(--space-2_5)}.vds-inbox-filter__chip--active{background:var(--color-accent-soft);border-color:var(--color-accent)}.vds-inbox-filter__actions{margin-left:auto}.vds-inbox-cornerbar,.vds-inbox-filter__actions{align-items:center;display:inline-flex;gap:var(--space-2)}.vds-inbox-cornerbar{bottom:var(--space-6);left:auto;pointer-events:none;position:fixed;right:var(--space-6);top:auto;z-index:40}.vds-inbox-cornerbar--left{bottom:var(--space-6);left:var(--space-6);right:auto;top:auto}.vds-inbox-cornerbar__inner{align-items:center;background:var(--color-surface);border:1px solid var(--color-border-subtle);border-radius:var(--radius-xl,var(--radius-lg));box-shadow:none;box-shadow:var(--shadow-md,none);display:inline-flex;gap:var(--space-2);padding:var(--space-2);pointer-events:auto}@media (max-width:768px){.vds-inbox-row__inner{gap:var(--space-3);grid-template-columns:1fr}.vds-inbox-row__actions{justify-content:flex-start;padding-top:0}.vds-inbox-row__titleline{flex-wrap:wrap;row-gap:var(--space-1_5)}.vds-inbox-row__title{flex-basis:100%;overflow:visible;text-overflow:clip;white-space:normal}.vds-inbox-row__labels{flex-basis:100%;justify-content:flex-start}.vds-inbox-nav__bar{flex-wrap:wrap;gap:var(--space-3);justify-content:center}.vds-inbox-tabs{justify-content:center;order:1;width:100%}.vds-inbox-nav__left{order:0}.vds-inbox-nav__right{order:2}.vds-inbox-nav__bottom{align-items:stretch;flex-direction:column}.vds-inbox-nav__bottom-left,.vds-inbox-nav__bottom-right{justify-content:flex-start}.vds-inbox-search.is-open .vds-inbox-search__field,.vds-inbox-search__toggle[aria-expanded=true]+.vds-inbox-search__field{width:100%}.vds-inbox__hide-sm{display:none!important}}@media (min-width:769px){.vds-inbox__show-sm{display:none!important}}@media (max-width:1024px){.vds-inbox__hide-md{display:none!important}}@media (min-width:1025px){.vds-inbox__show-md{display:none!important}}.vds-inbox__truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vds-inbox__sr-only{clip:rect(0,0,0,0)!important;border:0!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}

package/dist/components/sections.css

@@ -22,78 +22,141 @@
 --------------------------------------------------------- */
 
 .section {
+    --section-pad-top: var(--section-spacing-md);
+    --section-pad-bottom: var(--section-spacing-md);
+    --section-inner-max: var(--layout-max-width);
+    --section-inner-pad: var(--space-6);
+    --section-inner-gap: var(--space-6);
+
     width: 100%;
-    padding-top: var(--section-spacing-md);
-    padding-bottom: var(--section-spacing-md);
+    padding-top: var(--section-pad-top);
+    padding-bottom: var(--section-pad-bottom);
     position: relative;
     background-color: var(--color-bg);
 }
 
 .section__inner {
-    max-width: var(--layout-max-width);
+    width: 100%;
+    max-width: var(--section-inner-max);
     margin: 0 auto;
-    padding: 0 var(--space-6);
+    padding: 0 var(--section-inner-pad);
 
     display: flex;
     flex-direction: column;
-    gap: var(--space-6);
+    gap: var(--section-inner-gap);
+}
+
+/* ---------------------------------------------------------
+   2. INNER WIDTH + EDGE CONTROL
+--------------------------------------------------------- */
+
+.section--tight {
+    --section-inner-max: var(--content-width-md);
+}
+
+.section--narrow {
+    --section-inner-max: var(--content-width-lg);
+}
+
+.section--relaxed {
+    --section-inner-max: 90ch;
+}
+
+.section--wide {
+    --section-inner-max: var(--content-width-2xl);
+}
+
+.section--full {
+    --section-inner-max: none;
+}
+
+.section--pad-x-sm {
+    --section-inner-pad: var(--space-4);
+}
+
+.section--pad-x-md {
+    --section-inner-pad: var(--space-6);
+}
+
+.section--pad-x-lg {
+    --section-inner-pad: var(--space-8);
+}
+
+.section--pad-x-xl {
+    --section-inner-pad: var(--space-10);
+}
+
+.section--edge {
+    --section-inner-pad: 0;
+}
+
+.section--gap-sm {
+    --section-inner-gap: var(--space-4);
+}
+
+.section--gap-lg {
+    --section-inner-gap: var(--space-10);
+}
+
+.section--gap-xl {
+    --section-inner-gap: var(--space-14);
 }
 
 /* ---------------------------------------------------------
-   2. LEGACY DENSITY SYSTEM (A / B / C / FLUSH)
+   3. LEGACY DENSITY SYSTEM (A / B / C / FLUSH)
 --------------------------------------------------------- */
 
 .section--a {
-    padding-top: var(--space-20);
-    padding-bottom: var(--space-20);
+    --section-pad-top: var(--space-20);
+    --section-pad-bottom: var(--space-20);
 }
 
 .section--b {
-    padding-top: var(--space-14);
-    padding-bottom: var(--space-14);
+    --section-pad-top: var(--space-14);
+    --section-pad-bottom: var(--space-14);
 }
 
 .section--c {
-    padding-top: var(--space-10);
-    padding-bottom: var(--space-10);
+    --section-pad-top: var(--space-10);
+    --section-pad-bottom: var(--space-10);
 }
 
 .section--flush {
-    padding-top: 0;
-    padding-bottom: 0;
+    --section-pad-top: 0;
+    --section-pad-bottom: 0;
 }
 
 /* ---------------------------------------------------------
-   3. NEW UNIVERSAL SECTION RHYTHM (XS–XL)
+   4. NEW UNIVERSAL SECTION RHYTHM (XS–XL)
 --------------------------------------------------------- */
 
 .section--xs {
-    padding-top: var(--section-spacing-xs);
-    padding-bottom: var(--section-spacing-xs);
+    --section-pad-top: var(--section-spacing-xs);
+    --section-pad-bottom: var(--section-spacing-xs);
 }
 
 .section--sm {
-    padding-top: var(--section-spacing-sm);
-    padding-bottom: var(--section-spacing-sm);
+    --section-pad-top: var(--section-spacing-sm);
+    --section-pad-bottom: var(--section-spacing-sm);
 }
 
 .section--md {
-    padding-top: var(--section-spacing-md);
-    padding-bottom: var(--section-spacing-md);
+    --section-pad-top: var(--section-spacing-md);
+    --section-pad-bottom: var(--section-spacing-md);
 }
 
 .section--lg {
-    padding-top: var(--section-spacing-lg);
-    padding-bottom: var(--section-spacing-lg);
+    --section-pad-top: var(--section-spacing-lg);
+    --section-pad-bottom: var(--section-spacing-lg);
 }
 
 .section--xl {
-    padding-top: var(--section-spacing-xl);
-    padding-bottom: var(--section-spacing-xl);
+    --section-pad-top: var(--section-spacing-xl);
+    --section-pad-bottom: var(--section-spacing-xl);
 }
 
 /* ---------------------------------------------------------
-   4. SECTION HEADER SYSTEM
+   5. SECTION HEADER SYSTEM
 --------------------------------------------------------- */
 
 .section__header {
@@ -155,7 +218,7 @@
 }
 
 /* ---------------------------------------------------------
-   5. SECTION DIVIDERS
+   6. SECTION DIVIDERS
 --------------------------------------------------------- */
 
 .section--divided {
@@ -173,17 +236,17 @@
 }
 
 /* ---------------------------------------------------------
-   6. SURFACES (surface / subtle / brand)
+   7. SURFACES (surface / subtle / brand)
 --------------------------------------------------------- */
 
 .section--surface {
+    --section-pad-top: var(--section-spacing-lg);
+    --section-pad-bottom: var(--section-spacing-lg);
+
     background-color: var(--color-surface);
     border: 1px solid var(--color-border-subtle);
     border-radius: var(--radius-md);
 
-    padding-top: var(--section-spacing-lg);
-    padding-bottom: var(--section-spacing-lg);
-
     transition: background-color 0.15s ease;
 }
 
@@ -200,7 +263,7 @@
 }
 
 /* ---------------------------------------------------------
-   7. ALTERNATE BACKGROUND
+   8. ALTERNATE BACKGROUND
 --------------------------------------------------------- */
 
 .section--alt {
@@ -208,7 +271,7 @@
 }
 
 /* ---------------------------------------------------------
-   8. SPLIT SECTIONS - CLEAN GRID REVERSAL
+   9. SPLIT SECTIONS - CLEAN GRID REVERSAL
 --------------------------------------------------------- */
 
 .section--split .section__inner {
@@ -234,7 +297,7 @@
 }
 
 /* ---------------------------------------------------------
-   9. INSET SECTIONS (Base + SM/LG)
+   10. INSET SECTIONS (Base + SM/LG)
 --------------------------------------------------------- */
 
 .section--inset .section__inner {
@@ -253,7 +316,7 @@
 }
 
 /* ---------------------------------------------------------
-   10. COLUMN GRIDS (2/3/4/5/6/auto) + GAP VARIANTS
+   11. COLUMN GRIDS (2/3/4/5/6/auto) + GAP VARIANTS
 --------------------------------------------------------- */
 
 .section__grid-2,
@@ -304,7 +367,7 @@
 }
 
 /* ---------------------------------------------------------
-   11. CONTENT STACKS (VERTICAL)
+   12. CONTENT STACKS (VERTICAL)
 --------------------------------------------------------- */
 
 .section__stack {
@@ -326,7 +389,7 @@
 }
 
 /* ---------------------------------------------------------
-   12. INLINE STACKS (HORIZONTAL)
+   13. INLINE STACKS (HORIZONTAL)
 --------------------------------------------------------- */
 
 .section__inline {
@@ -351,7 +414,7 @@
 }
 
 /* ---------------------------------------------------------
-   13. VALUE / LIST SECTIONS
+   14. VALUE / LIST SECTIONS
 --------------------------------------------------------- */
 
 .section__list {
@@ -387,7 +450,7 @@
 }
 
 /* ---------------------------------------------------------
-   14. RESPONSIVE BEHAVIOUR
+   15. RESPONSIVE BEHAVIOUR
 --------------------------------------------------------- */
 
 @media (max-width: 1280px) {
@@ -423,8 +486,33 @@
     .section--a,
     .section--b,
     .section--c {
-        padding-top: var(--space-10);
-        padding-bottom: var(--space-10);
+        --section-pad-top: var(--space-10);
+        --section-pad-bottom: var(--space-10);
+    }
+
+    .section--xs {
+        --section-pad-top: var(--section-spacing-xs);
+        --section-pad-bottom: var(--section-spacing-xs);
+    }
+
+    .section--sm {
+        --section-pad-top: var(--section-spacing-sm);
+        --section-pad-bottom: var(--section-spacing-sm);
+    }
+
+    .section--md {
+        --section-pad-top: var(--section-spacing-md);
+        --section-pad-bottom: var(--section-spacing-md);
+    }
+
+    .section--lg {
+        --section-pad-top: var(--section-spacing-lg);
+        --section-pad-bottom: var(--section-spacing-lg);
+    }
+
+    .section--xl {
+        --section-pad-top: var(--section-spacing-xl);
+        --section-pad-bottom: var(--section-spacing-xl);
     }
 
     .section__grid-2,
@@ -448,3 +536,55 @@
         padding: var(--space-6);
     }
 }
+
+/* ---------------------------------------------------------
+   16. PADDING OVERRIDES (TOP / BOTTOM)
+--------------------------------------------------------- */
+
+.section--pad-top-none {
+    --section-pad-top: 0;
+}
+
+.section--pad-top-xs {
+    --section-pad-top: var(--section-spacing-xs);
+}
+
+.section--pad-top-sm {
+    --section-pad-top: var(--section-spacing-sm);
+}
+
+.section--pad-top-md {
+    --section-pad-top: var(--section-spacing-md);
+}
+
+.section--pad-top-lg {
+    --section-pad-top: var(--section-spacing-lg);
+}
+
+.section--pad-top-xl {
+    --section-pad-top: var(--section-spacing-xl);
+}
+
+.section--pad-bottom-none {
+    --section-pad-bottom: 0;
+}
+
+.section--pad-bottom-xs {
+    --section-pad-bottom: var(--section-spacing-xs);
+}
+
+.section--pad-bottom-sm {
+    --section-pad-bottom: var(--section-spacing-sm);
+}
+
+.section--pad-bottom-md {
+    --section-pad-bottom: var(--section-spacing-md);
+}
+
+.section--pad-bottom-lg {
+    --section-pad-bottom: var(--section-spacing-lg);
+}
+
+.section--pad-bottom-xl {
+    --section-pad-bottom: var(--section-spacing-xl);
+}

package/dist/components/sections.min.css

@@ -1 +1 @@
-.section{background-color:var(--color-bg);padding-bottom:var(--section-spacing-md);padding-top:var(--section-spacing-md);position:relative;width:100%}.section__inner{display:flex;flex-direction:column;gap:var(--space-6);margin:0 auto;max-width:var(--layout-max-width);padding:0 var(--space-6)}.section--a{padding-bottom:var(--space-20);padding-top:var(--space-20)}.section--b{padding-bottom:var(--space-14);padding-top:var(--space-14)}.section--c{padding-bottom:var(--space-10);padding-top:var(--space-10)}.section--flush{padding-bottom:0;padding-top:0}.section--xs{padding-bottom:var(--section-spacing-xs);padding-top:var(--section-spacing-xs)}.section--sm{padding-bottom:var(--section-spacing-sm);padding-top:var(--section-spacing-sm)}.section--md{padding-bottom:var(--section-spacing-md);padding-top:var(--section-spacing-md)}.section--lg{padding-bottom:var(--section-spacing-lg);padding-top:var(--section-spacing-lg)}.section--xl{padding-bottom:var(--section-spacing-xl);padding-top:var(--section-spacing-xl)}.section__header{display:flex;flex-direction:column;gap:var(--space-3);max-width:70ch}.section__eyebrow{color:var(--section-brand-eyebrow,var(--color-text-muted));font-size:var(--text-xs);font-weight:600;letter-spacing:.05em;text-transform:uppercase}.section__title{color:var(--section-brand-title,var(--color-text));font-size:var(--text-2xl);font-weight:600;line-height:1.2}.section__subtitle{color:var(--section-brand-subtitle,var(--color-text-muted));font-size:var(--text-sm);max-width:60ch}.section--a .section__title{font-size:var(--text-3xl)}.section--b .section__title{font-size:var(--text-2xl)}.section--c .section__title{font-size:var(--text-xl)}.section--center .section__header{align-items:center;text-align:center}.section--right .section__header{align-items:flex-end;text-align:right}.section__header--tight{gap:var(--space-2)}.section__header--wide{gap:var(--space-6)}.section--divided{border-top:1px solid var(--color-border-subtle)}.section--divided+.section--divided{border-bottom:1px solid var(--color-border-subtle);border-top:none}.section--divided-x{border-left:1px solid var(--color-border-subtle);border-right:1px solid var(--color-border-subtle)}.section--surface{background-color:var(--color-surface);border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);padding-bottom:var(--section-spacing-lg);padding-top:var(--section-spacing-lg);transition:background-color .15s ease}.section--surface:hover{background-color:var(--color-surface-hover)}.section--subtle{background-color:var(--color-surface-subtle)}.section--brand{background-color:var(--color-accent-soft)}.section--alt{background-color:var(--color-bg-soft)}.section--split .section__inner,.section--split-reverse .section__inner{grid-gap:var(--space-12);display:grid;gap:var(--space-12);grid-template-columns:1fr 1fr}.section--split-reverse .section__inner>:first-child{order:2}.section--split-reverse .section__inner>:last-child{order:1}.section--inset .section__inner{background-color:var(--color-surface);border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);padding:var(--space-10)}.section--inset-sm .section__inner{padding:var(--space-6)}.section--inset-lg .section__inner{padding:var(--space-14)}.section__grid-2,.section__grid-3,.section__grid-4,.section__grid-5,.section__grid-6,.section__grid-auto{grid-gap:var(--space-10);display:grid;gap:var(--space-10)}.section__grid-2{grid-template-columns:repeat(2,1fr)}.section__grid-3{grid-template-columns:repeat(3,1fr)}.section__grid-4{grid-template-columns:repeat(4,1fr)}.section__grid-5{grid-template-columns:repeat(5,1fr)}.section__grid-6{grid-template-columns:repeat(6,1fr)}.section__grid-auto{grid-template-columns:repeat(auto-fit,minmax(var(--grid-min),1fr))}.section__grid-sm{gap:var(--space-4)}.section__grid-md{gap:var(--space-6)}.section__grid-lg{gap:var(--space-14)}.section__stack{display:flex;flex-direction:column;gap:var(--space-6)}.section__stack-sm{display:flex;flex-direction:column;gap:var(--space-4)}.section__stack-lg{display:flex;flex-direction:column;gap:var(--space-10)}.section__inline{gap:var(--space-3)}.section__inline,.section__inline-sm{align-items:center;display:flex;flex-direction:row}.section__inline-sm{gap:var(--space-2)}.section__inline-lg{align-items:center;display:flex;flex-direction:row;gap:var(--space-4)}.section__list{display:flex;flex-direction:column;gap:var(--space-3)}.section__list-item{align-items:flex-start;color:var(--color-text);display:flex;font-size:var(--text-sm);gap:var(--space-3)}.section__list-item svg{stroke:var(--color-accent);fill:none;flex-shrink:0;height:1.25em;width:1.25em}.section__list-item-title{color:var(--color-text);font-weight:600}.section__list-item-desc{color:var(--color-text-muted);font-size:var(--text-sm)}@media (max-width:1280px){.section__grid-2,.section__grid-3,.section__grid-4,.section__grid-5,.section__grid-6,.section__grid-auto{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}}@media (max-width:1024px){.section--split .section__inner,.section--split-reverse .section__inner{grid-template-columns:1fr}.section__grid-2,.section__grid-3,.section__grid-4,.section__grid-5,.section__grid-6,.section__grid-auto{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}}@media (max-width:768px){.section,.section--a,.section--b,.section--c{padding-bottom:var(--space-10);padding-top:var(--space-10)}.section__grid-2,.section__grid-3,.section__grid-4,.section__grid-5,.section__grid-6,.section__grid-auto{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}.section__title{font-size:var(--text-xl)}.section__subtitle{font-size:var(--text-sm)}.section--inset .section__inner{padding:var(--space-6)}}
+.section{--section-pad-top:var(--section-spacing-md);--section-pad-bottom:var(--section-spacing-md);--section-inner-max:var(--layout-max-width);--section-inner-pad:var(--space-6);--section-inner-gap:var(--space-6);background-color:var(--color-bg);padding-bottom:var(--section-pad-bottom);padding-top:var(--section-pad-top);position:relative;width:100%}.section__inner{display:flex;flex-direction:column;gap:var(--section-inner-gap);margin:0 auto;max-width:var(--section-inner-max);padding:0 var(--section-inner-pad);width:100%}.section--tight{--section-inner-max:var(--content-width-md)}.section--narrow{--section-inner-max:var(--content-width-lg)}.section--relaxed{--section-inner-max:90ch}.section--wide{--section-inner-max:var(--content-width-2xl)}.section--full{--section-inner-max:none}.section--pad-x-sm{--section-inner-pad:var(--space-4)}.section--pad-x-md{--section-inner-pad:var(--space-6)}.section--pad-x-lg{--section-inner-pad:var(--space-8)}.section--pad-x-xl{--section-inner-pad:var(--space-10)}.section--edge{--section-inner-pad:0}.section--gap-sm{--section-inner-gap:var(--space-4)}.section--gap-lg{--section-inner-gap:var(--space-10)}.section--gap-xl{--section-inner-gap:var(--space-14)}.section--a{--section-pad-top:var(--space-20);--section-pad-bottom:var(--space-20)}.section--b{--section-pad-top:var(--space-14);--section-pad-bottom:var(--space-14)}.section--c{--section-pad-top:var(--space-10);--section-pad-bottom:var(--space-10)}.section--flush{--section-pad-top:0;--section-pad-bottom:0}.section--xs{--section-pad-top:var(--section-spacing-xs);--section-pad-bottom:var(--section-spacing-xs)}.section--sm{--section-pad-top:var(--section-spacing-sm);--section-pad-bottom:var(--section-spacing-sm)}.section--md{--section-pad-top:var(--section-spacing-md);--section-pad-bottom:var(--section-spacing-md)}.section--lg{--section-pad-top:var(--section-spacing-lg);--section-pad-bottom:var(--section-spacing-lg)}.section--xl{--section-pad-top:var(--section-spacing-xl);--section-pad-bottom:var(--section-spacing-xl)}.section__header{display:flex;flex-direction:column;gap:var(--space-3);max-width:70ch}.section__eyebrow{color:var(--section-brand-eyebrow,var(--color-text-muted));font-size:var(--text-xs);font-weight:600;letter-spacing:.05em;text-transform:uppercase}.section__title{color:var(--section-brand-title,var(--color-text));font-size:var(--text-2xl);font-weight:600;line-height:1.2}.section__subtitle{color:var(--section-brand-subtitle,var(--color-text-muted));font-size:var(--text-sm);max-width:60ch}.section--a .section__title{font-size:var(--text-3xl)}.section--b .section__title{font-size:var(--text-2xl)}.section--c .section__title{font-size:var(--text-xl)}.section--center .section__header{align-items:center;text-align:center}.section--right .section__header{align-items:flex-end;text-align:right}.section__header--tight{gap:var(--space-2)}.section__header--wide{gap:var(--space-6)}.section--divided{border-top:1px solid var(--color-border-subtle)}.section--divided+.section--divided{border-bottom:1px solid var(--color-border-subtle);border-top:none}.section--divided-x{border-left:1px solid var(--color-border-subtle);border-right:1px solid var(--color-border-subtle)}.section--surface{--section-pad-top:var(--section-spacing-lg);--section-pad-bottom:var(--section-spacing-lg);background-color:var(--color-surface);border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);transition:background-color .15s ease}.section--surface:hover{background-color:var(--color-surface-hover)}.section--subtle{background-color:var(--color-surface-subtle)}.section--brand{background-color:var(--color-accent-soft)}.section--alt{background-color:var(--color-bg-soft)}.section--split .section__inner,.section--split-reverse .section__inner{grid-gap:var(--space-12);display:grid;gap:var(--space-12);grid-template-columns:1fr 1fr}.section--split-reverse .section__inner>:first-child{order:2}.section--split-reverse .section__inner>:last-child{order:1}.section--inset .section__inner{background-color:var(--color-surface);border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);padding:var(--space-10)}.section--inset-sm .section__inner{padding:var(--space-6)}.section--inset-lg .section__inner{padding:var(--space-14)}.section__grid-2,.section__grid-3,.section__grid-4,.section__grid-5,.section__grid-6,.section__grid-auto{grid-gap:var(--space-10);display:grid;gap:var(--space-10)}.section__grid-2{grid-template-columns:repeat(2,1fr)}.section__grid-3{grid-template-columns:repeat(3,1fr)}.section__grid-4{grid-template-columns:repeat(4,1fr)}.section__grid-5{grid-template-columns:repeat(5,1fr)}.section__grid-6{grid-template-columns:repeat(6,1fr)}.section__grid-auto{grid-template-columns:repeat(auto-fit,minmax(var(--grid-min),1fr))}.section__grid-sm{gap:var(--space-4)}.section__grid-md{gap:var(--space-6)}.section__grid-lg{gap:var(--space-14)}.section__stack{display:flex;flex-direction:column;gap:var(--space-6)}.section__stack-sm{display:flex;flex-direction:column;gap:var(--space-4)}.section__stack-lg{display:flex;flex-direction:column;gap:var(--space-10)}.section__inline{gap:var(--space-3)}.section__inline,.section__inline-sm{align-items:center;display:flex;flex-direction:row}.section__inline-sm{gap:var(--space-2)}.section__inline-lg{align-items:center;display:flex;flex-direction:row;gap:var(--space-4)}.section__list{display:flex;flex-direction:column;gap:var(--space-3)}.section__list-item{align-items:flex-start;color:var(--color-text);display:flex;font-size:var(--text-sm);gap:var(--space-3)}.section__list-item svg{stroke:var(--color-accent);fill:none;flex-shrink:0;height:1.25em;width:1.25em}.section__list-item-title{color:var(--color-text);font-weight:600}.section__list-item-desc{color:var(--color-text-muted);font-size:var(--text-sm)}@media (max-width:1280px){.section__grid-2,.section__grid-3,.section__grid-4,.section__grid-5,.section__grid-6,.section__grid-auto{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}}@media (max-width:1024px){.section--split .section__inner,.section--split-reverse .section__inner{grid-template-columns:1fr}.section__grid-2,.section__grid-3,.section__grid-4,.section__grid-5,.section__grid-6,.section__grid-auto{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}}@media (max-width:768px){.section,.section--a,.section--b,.section--c{--section-pad-top:var(--space-10);--section-pad-bottom:var(--space-10)}.section--xs{--section-pad-top:var(--section-spacing-xs);--section-pad-bottom:var(--section-spacing-xs)}.section--sm{--section-pad-top:var(--section-spacing-sm);--section-pad-bottom:var(--section-spacing-sm)}.section--md{--section-pad-top:var(--section-spacing-md);--section-pad-bottom:var(--section-spacing-md)}.section--lg{--section-pad-top:var(--section-spacing-lg);--section-pad-bottom:var(--section-spacing-lg)}.section--xl{--section-pad-top:var(--section-spacing-xl);--section-pad-bottom:var(--section-spacing-xl)}.section__grid-2,.section__grid-3,.section__grid-4,.section__grid-5,.section__grid-6,.section__grid-auto{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}.section__title{font-size:var(--text-xl)}.section__subtitle{font-size:var(--text-sm)}.section--inset .section__inner{padding:var(--space-6)}}.section--pad-top-none{--section-pad-top:0}.section--pad-top-xs{--section-pad-top:var(--section-spacing-xs)}.section--pad-top-sm{--section-pad-top:var(--section-spacing-sm)}.section--pad-top-md{--section-pad-top:var(--section-spacing-md)}.section--pad-top-lg{--section-pad-top:var(--section-spacing-lg)}.section--pad-top-xl{--section-pad-top:var(--section-spacing-xl)}.section--pad-bottom-none{--section-pad-bottom:0}.section--pad-bottom-xs{--section-pad-bottom:var(--section-spacing-xs)}.section--pad-bottom-sm{--section-pad-bottom:var(--section-spacing-sm)}.section--pad-bottom-md{--section-pad-bottom:var(--section-spacing-md)}.section--pad-bottom-lg{--section-pad-bottom:var(--section-spacing-lg)}.section--pad-bottom-xl{--section-pad-bottom:var(--section-spacing-xl)}