@24vlh/vds 0.3.4 → 0.3.6

package/dist/components/inbox.css

@@ -18,7 +18,6 @@
 /* ---------------------------------------------------------
    0. ROOT (tokens + component defaults)
 --------------------------------------------------------- */
-
 [data-vds-inbox],
 .vds-inbox {
     --inbox-row-radius: var(--radius-lg, var(--radius-md));
@@ -47,7 +46,6 @@
 }
 
 /* Optional: make the whole surface slightly denser */
-
 .inbox--dense {
     --inbox-row-pad-x: var(--space-3);
     --inbox-row-pad-y: var(--space-3);
@@ -58,7 +56,6 @@
 /* ---------------------------------------------------------
    1. TOP NAV (search + tabs + actions)
 --------------------------------------------------------- */
-
 .inbox-nav {
     display: flex;
     flex-direction: column;
@@ -85,7 +82,6 @@
 }
 
 /* left / right rails */
-
 .inbox-nav__left,
 .inbox-nav__right {
     display: inline-flex;
@@ -95,7 +91,6 @@
 }
 
 /* bottom rail (optional helper row under tabs/search) */
-
 .inbox-nav__bottom {
     display: flex;
     align-items: center;
@@ -116,7 +111,6 @@
 }
 
 /* bottom alignment helpers */
-
 .inbox-nav__bottom--left {
     justify-content: flex-start;
 }
@@ -134,7 +128,6 @@
 }
 
 /* Tabs */
-
 .inbox-tabs {
     display: inline-flex;
     align-items: center;
@@ -201,7 +194,6 @@
 }
 
 /* Optional tab badge */
-
 .inbox-tab__count {
     display: inline-flex;
     align-items: center;
@@ -220,7 +212,6 @@
 }
 
 /* --- Search (icon -> expanding field) --- */
-
 .inbox-search {
     display: inline-flex;
     align-items: center;
@@ -272,7 +263,6 @@
 }
 
 /* Field wrapper starts collapsed */
-
 .inbox-search__field {
     display: inline-flex;
     align-items: center;
@@ -305,7 +295,6 @@
 }
 
 /* Open state: set on .inbox-search or on toggle via aria-expanded */
-
 .inbox-search.is-open .inbox-search__field,
 .inbox-search__toggle[aria-expanded="true"] + .inbox-search__field {
     width: 100%;
@@ -314,7 +303,6 @@
 }
 
 /* Toolbar takeover: search spans the entire nav bar */
-
 .inbox-nav__bar--search-full .inbox-nav__left {
     flex: 1 1 auto;
     width: 100%;
@@ -343,7 +331,6 @@
 /* ---------------------------------------------------------
    2. LIST (rounded vs flat)
 --------------------------------------------------------- */
-
 .inbox__list {
     display: flex;
     flex-direction: column;
@@ -351,7 +338,6 @@
 }
 
 /* Flat list: separators + list border, no side borders on rows */
-
 .inbox--flat .inbox__list {
     gap: 0;
     border-top: 1px solid var(--color-border-subtle);
@@ -372,7 +358,6 @@
 /* ---------------------------------------------------------
    3. ROW BASE
 --------------------------------------------------------- */
-
 .inbox-row {
     position: relative;
     width: 100%;
@@ -396,7 +381,6 @@
 }
 
 /* Recommended clickable wrapper: <button> or <a> */
-
 .inbox-row__main {
     width: 100%;
     border: 0;
@@ -410,7 +394,6 @@
 }
 
 /* Core grid: meta left + actions right */
-
 .inbox-row__inner {
     display: grid;
     grid-template-columns: 1fr auto;
@@ -428,7 +411,6 @@
 --------------------------------------------------------- */
 
 /* Replace the simple 2-col grid with explicit areas */
-
 .inbox-row__inner {
     grid-template-columns: 1fr auto; /* keep the intent:contentReference[oaicite:2]{index=2} */
     grid-template-areas:
@@ -439,7 +421,6 @@
 
 /* Existing badges row is already full width:contentReference[oaicite:3]{index=3}.
    We map it into the grid areas as well (harmless if not present). */
-
 .inbox-row__badges {
     grid-area: badges;
 }
@@ -454,7 +435,6 @@
 }
 
 /* NEW: one container for all “row data” blocks */
-
 .inbox-row__data {
     grid-area: data;
     min-width: 0;
@@ -467,7 +447,6 @@
    (These selectors already exist in your file.):contentReference[oaicite:4]{index=4}:contentReference[oaicite:5]{index=5}:contentReference[oaicite:6]{index=6} */
 
 /* --- Mobile / narrow screens: actions must be last, full width, aligned right --- */
-
 @media (max-width: 768px) {
     .inbox-row__inner {
         grid-template-columns: 1fr;
@@ -487,7 +466,6 @@
 }
 
 /* --- Actions “full row” helper should still work; now it just reinforces the layout --- */
-
 .inbox-row--actions-full .inbox-row__actions {
     grid-column: 1 / -1; /* already in file:contentReference[oaicite:8]{index=8} */
 }
@@ -499,7 +477,6 @@
 /* The symptoms you described usually happen when labels are pushed right
    (commonly via margin-left:auto or justify-content:flex-end).
    Force labels to align left and wrap cleanly. */
-
 .inbox-row__labels {
     justify-content: flex-start;
     align-items: center;
@@ -512,7 +489,6 @@
    - title grows
    - labels sit after title but do NOT right-align internally
 */
-
 .inbox-row__title {
     min-width: 0;
     flex: 1 1 auto;
@@ -521,9 +497,7 @@
 /* ---------------------------------------------------------
    4. ROW VARIANTS (minimal / normal / rich / mega)
 --------------------------------------------------------- */
-
 /* Minimalistic: title + status + tiny actions (no extra vertical air) */
-
 .inbox-row--minimal .inbox-row__inner {
     gap: var(--space-3);
     padding: var(--space-3) var(--space-3);
@@ -535,14 +509,12 @@
 }
 
 /* Normal: default */
-
 .inbox-row--normal .inbox-row__inner {
     padding: var(--space-4) var(--space-4);
     gap: var(--space-4);
 }
 
 /* Rich: more air + larger typography */
-
 .inbox-row--rich .inbox-row__inner {
     padding: var(--space-5) var(--space-5);
     gap: var(--space-5);
@@ -554,7 +526,6 @@
 }
 
 /* Mega: “data-heavy” row */
-
 .inbox-row--mega .inbox-row__inner {
     padding: var(--space-6) var(--space-6);
     gap: var(--space-6);
@@ -568,7 +539,6 @@
 /* ---------------------------------------------------------
    5. BADGES ROW (FULL WIDTH)
 --------------------------------------------------------- */
-
 .inbox-row__badges {
     grid-column: 1 / -1;
     display: flex;
@@ -636,7 +606,6 @@
 /* ---------------------------------------------------------
    6. META AREA
 --------------------------------------------------------- */
-
 .inbox-row__meta {
     display: flex;
     flex-direction: column;
@@ -652,7 +621,6 @@
 }
 
 /* Status icons cluster (bookmark/star/flag) */
-
 .inbox-row__status {
     display: inline-flex;
     align-items: center;
@@ -675,7 +643,6 @@
 }
 
 /* state toggles (apply on row) */
-
 .inbox-row.is-bookmarked .inbox-row__status-icon--bookmark,
 .inbox-row.is-starred .inbox-row__status-icon--star {
     color: var(--color-accent);
@@ -703,7 +670,6 @@
 }
 
 /* Inline labels next to title (wide); reflow rules below */
-
 .inbox-row__labels {
     display: inline-flex;
     align-items: center;
@@ -741,7 +707,6 @@
 }
 
 /* Glance / description (clamped by default) */
-
 .inbox-row__glance {
     font-size: var(--inbox-desc-size);
     line-height: var(--line-height-relaxed);
@@ -755,7 +720,6 @@
 }
 
 /* Rich/mega can show more lines (still clamped unless row open) */
-
 .inbox-row--rich .inbox-row__glance {
     -webkit-line-clamp: 3;
 }
@@ -765,7 +729,6 @@
 }
 
 /* Optional metadata footer */
-
 .inbox-row__metafoot {
     display: flex;
     flex-wrap: wrap;
@@ -781,7 +744,6 @@
 }
 
 /* Optional “detail chips row” (horizontal list of small metadata items) */
-
 .inbox-row__details {
     display: flex;
     flex-wrap: wrap;
@@ -812,7 +774,6 @@
 /* ---------------------------------------------------------
    7. ACTIONS (right rail; can reflow below)
 --------------------------------------------------------- */
-
 .inbox-row__actions {
     display: flex;
     align-items: flex-start;
@@ -824,7 +785,6 @@
 }
 
 /* Force actions below even on wide screens */
-
 .inbox-row--actions-below .inbox-row__inner {
     grid-template-columns: 1fr;
     grid-template-areas:
@@ -840,7 +800,6 @@
 }
 
 /* Force actions to occupy a full row (even when grid is 2 cols) */
-
 .inbox-row--actions-full .inbox-row__actions {
     grid-column: 1 / -1;
     justify-content: flex-start;
@@ -848,7 +807,6 @@
 }
 
 /* Actions alignment helpers (useful on mobile / below layout) */
-
 .inbox-row__actions--left {
     justify-content: flex-start;
 }
@@ -862,7 +820,6 @@
 }
 
 /* Action button */
-
 .inbox-action {
     display: inline-flex;
     align-items: center;
@@ -915,7 +872,6 @@ a.inbox-action {
 }
 
 /* icon-only action */
-
 .inbox-action--icon {
     width: 2.25rem;
     width: var(--icon-container-md, 2.25rem);
@@ -925,7 +881,6 @@ a.inbox-action {
 }
 
 /* “Flat” action style (no border, lighter affordance) */
-
 .inbox-action--flat {
     border-color: transparent;
     background: transparent;
@@ -946,7 +901,6 @@ a.inbox-action {
 }
 
 /* Global switch: make all actions flat within an inbox */
-
 .inbox--actions-flat .inbox-action {
     border-color: transparent;
     background: transparent;
@@ -989,7 +943,6 @@ a.inbox-action.is-disabled {
 /* ---------------------------------------------------------
    8. EXPANDED CONTENT (OPEN STATE HELPERS)
 --------------------------------------------------------- */
-
 .inbox-row__expanded {
     grid-column: 1 / -1;
     grid-row: 2;
@@ -1017,7 +970,6 @@ a.inbox-action.is-disabled {
 }
 
 /* Expanded content can be made “flush” in flat list mode */
-
 .inbox--flat .inbox-row__expanded {
     background: var(--color-surface-subtle);
 }
@@ -1033,7 +985,6 @@ a.inbox-action.is-disabled {
 /* ---------------------------------------------------------
    9. FLAGS (5 COLORS)
 --------------------------------------------------------- */
-
 .inbox-row.is-flagged::before {
     content: "";
     position: absolute;
@@ -1093,7 +1044,6 @@ a.inbox-action.is-disabled {
 /* ---------------------------------------------------------
    10. FILTER TEMPLATE (lightweight)
 --------------------------------------------------------- */
-
 .inbox-filter {
     display: flex;
     flex-wrap: wrap;
@@ -1168,7 +1118,6 @@ button.inbox-filter__chip[aria-disabled="true"] {
 /* ---------------------------------------------------------
    11. BOTTOM CORNER ACTION BAR (one/two buttons)
 --------------------------------------------------------- */
-
 .inbox-cornerbar {
     position: fixed;
     top: auto;
@@ -1208,7 +1157,6 @@ button.inbox-filter__chip[aria-disabled="true"] {
 /* ---------------------------------------------------------
    12. RESPONSIVE
 --------------------------------------------------------- */
-
 @media (max-width: 768px) {
     .inbox-row__inner {
         grid-template-columns: 1fr;
@@ -1289,7 +1237,6 @@ button.inbox-filter__chip[aria-disabled="true"] {
    13. RESPONSIVE VISIBILITY HELPERS (COMPONENT-LOCAL)
    (useful for hiding icons/actions/labels by breakpoint)
 --------------------------------------------------------- */
-
 @media (max-width: 768px) {
     .inbox__hide-sm {
         display: none !important;
@@ -1317,7 +1264,6 @@ button.inbox-filter__chip[aria-disabled="true"] {
 /* ---------------------------------------------------------
    14. SMALL UTILITIES (COMPONENT-LOCAL)
 --------------------------------------------------------- */
-
 .inbox__truncate {
     overflow: hidden;
     text-overflow: ellipsis;

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%}.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))}.inbox-nav{display:flex;flex-direction:column;gap:var(--space-3);margin-bottom:var(--space-4)}.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)}.inbox-nav__left,.inbox-nav__right{align-items:center;display:inline-flex;flex:0 0 auto;gap:var(--space-2)}.inbox-nav__bottom{align-items:center;display:flex;gap:var(--space-3);justify-content:space-between}.inbox-nav__bottom-left,.inbox-nav__bottom-right{align-items:center;display:inline-flex;gap:var(--space-2)}.inbox-nav__bottom-left:empty,.inbox-nav__bottom-right:empty{display:none}.inbox-nav__bottom--left{justify-content:flex-start}.inbox-nav__bottom--center{justify-content:center}.inbox-nav__bottom--right{justify-content:flex-end}.inbox-nav__bottom--split{justify-content:space-between}.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)}.inbox-tab,.inbox-tabs{align-items:center;display:inline-flex}.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}.inbox-tab.is-active,.inbox-tab:hover:not(:disabled):not([aria-disabled=true]):not(.is-disabled),.inbox-tab[aria-selected=true]{background:var(--color-surface);color:var(--color-text)}.inbox-tab.is-active,.inbox-tab[aria-selected=true]{border:1px solid var(--color-border-subtle)}.inbox-tab:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}.inbox-tab.is-disabled,.inbox-tab:disabled,.inbox-tab[aria-disabled=true]{background:transparent;border-color:transparent;color:var(--color-text-muted);cursor:not-allowed;opacity:.6;pointer-events:none}.inbox-tab__count{background:var(--color-surface-subtle);border:1px solid var(--color-border-subtle);border-radius:var(--radius-pill);color:var(--color-text-muted);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)}.inbox-search,.inbox-tab__count{align-items:center;display:inline-flex}.inbox-search{gap:var(--space-2);min-width:0}.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)}.inbox-search__toggle:hover:not(:disabled):not([aria-disabled=true]):not(.is-disabled){background:var(--color-surface-subtle,var(--color-surface-hover));border-color:var(--color-border-strong,var(--color-border-subtle))}.inbox-search__toggle.is-disabled,.inbox-search__toggle:disabled,.inbox-search__toggle[aria-disabled=true]{background:var(--color-surface-subtle);border-color:var(--color-border-subtle);color:var(--color-text-muted);cursor:not-allowed;opacity:.6;pointer-events:none}.inbox-search__toggle svg{color:currentColor;height:1rem;height:var(--icon-xs,1rem);width:1rem;width:var(--icon-xs,1rem)}.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}.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%}.inbox-search.is-open .inbox-search__field,.inbox-search__toggle[aria-expanded=true]+.inbox-search__field{opacity:1;pointer-events:auto;width:100%}.inbox-nav__bar--search-full .inbox-nav__left,.inbox-nav__bar--search-full .inbox-search{flex:1 1 auto;width:100%}.inbox-nav__bar--search-full .inbox-search__field{opacity:1;pointer-events:auto;width:100%}.inbox-nav__bar--search-full .inbox-search__input{max-width:none}.inbox-nav__bar--search-full .inbox-nav__right,.inbox-nav__bar--search-full .inbox-tabs{display:none}.inbox__list{display:flex;flex-direction:column;gap:var(--space-2)}.inbox--flat .inbox__list{border-bottom:1px solid var(--color-border-subtle);border-top:1px solid var(--color-border-subtle);gap:0}.inbox--flat .inbox-row{border-left:0;border-radius:0;border-right:0;border-top:0}.inbox--flat .inbox-row+.inbox-row{border-top:1px solid var(--color-border-subtle)}.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%}.inbox-row__hover:hover{background:var(--inbox-row-bg-hover);border-color:var(--color-border-strong,var(--color-border-subtle))}.inbox-row__focus-visible:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}.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%}.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)}.inbox-row__badges{grid-area:badges}.inbox-row__meta{grid-area:meta}.inbox-row__actions{grid-area:actions}.inbox-row__data{display:flex;flex-direction:column;gap:var(--space-2);grid-area:data;min-width:0}@media (max-width:768px){.inbox-row__inner{grid-template-areas:"badges" "meta" "data" "actions";grid-template-columns:1fr}.inbox-row__actions{justify-content:flex-end;min-width:0;padding-top:0}}.inbox-row__labels{justify-content:flex-start;margin-left:0;text-align:left}.inbox-row__title{min-width:0}.inbox-row--minimal .inbox-row__inner{gap:var(--space-3);padding:var(--space-3) var(--space-3)}.inbox-row--minimal{--inbox-title-size:var(--text-xs);--inbox-desc-size:var(--text-xxs,var(--text-xs))}.inbox-row--normal .inbox-row__inner{gap:var(--space-4);padding:var(--space-4) var(--space-4)}.inbox-row--rich .inbox-row__inner{gap:var(--space-5);padding:var(--space-5) var(--space-5)}.inbox-row--rich{--inbox-title-size:var(--text-md,var(--text-sm));--inbox-desc-size:var(--text-sm)}.inbox-row--mega .inbox-row__inner{gap:var(--space-6);padding:var(--space-6) var(--space-6)}.inbox-row--mega{--inbox-title-size:var(--text-lg,var(--text-md,var(--text-sm)));--inbox-desc-size:var(--text-sm)}.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)}.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}.inbox-badge svg{color:currentColor;height:var(--icon-xxs);width:var(--icon-xxs)}.inbox-badge--accent{background:var(--color-accent-soft);border-color:var(--color-accent);color:var(--color-text)}.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))}.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))}.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))}.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))}.inbox-row__meta{flex-direction:column}.inbox-row__meta,.inbox-row__titleline{display:flex;gap:var(--space-2);min-width:0}.inbox-row__titleline{align-items:center}.inbox-row__status{align-items:center;display:inline-flex;flex:0 0 auto;gap:var(--space-1_5)}.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)}.inbox-row__status-icon svg{height:100%;width:100%}.inbox-row.is-bookmarked .inbox-row__status-icon--bookmark,.inbox-row.is-starred .inbox-row__status-icon--star{color:var(--color-accent)}.inbox-row.is-flagged .inbox-row__status-icon--flag{color:var(--color-danger-strong,var(--color-danger))}.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}.inbox-row__labels{flex:0 0 auto;gap:var(--space-1_5);min-width:0}.inbox-label,.inbox-row__labels{align-items:center;display:inline-flex}.inbox-label{background:transparent;border:1px solid var(--color-border-subtle);border-radius:var(--radius-pill);color:var(--color-text-muted);font-size:var(--text-xxs);font-weight:var(--font-weight-semibold);height:1.4rem;padding:0 var(--space-2);white-space:nowrap}.inbox-label--accent{background:var(--color-accent-soft);border-color:var(--color-accent);color:var(--color-text)}.inbox-label--muted{background:var(--color-surface-subtle);border-color:var(--color-border-subtle);color:var(--color-text-muted)}.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}.inbox-row--rich .inbox-row__glance{-webkit-line-clamp:3}.inbox-row--mega .inbox-row__glance{-webkit-line-clamp:4}.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)}.inbox-row__metafoot strong{color:var(--color-text-muted);font-weight:var(--font-weight-semibold)}.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)}.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)}.inbox-row__details-item svg{color:currentColor;height:var(--icon-xxs);width:var(--icon-xxs)}.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)}.inbox-row--actions-below .inbox-row__inner{grid-template-areas:"badges" "meta" "data" "actions";grid-template-columns:1fr}.inbox-row--actions-below .inbox-row__actions{justify-content:flex-start;padding-top:0}.inbox-row--actions-full .inbox-row__actions{grid-column:1/-1;justify-content:flex-start;padding-top:0}.inbox-row__actions--left{justify-content:flex-start}.inbox-row__actions--center{justify-content:center}.inbox-row__actions--right{justify-content:flex-end}.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.inbox-action{-webkit-text-decoration:none;text-decoration:none}.inbox-action svg{color:currentColor;height:var(--icon-xxs);width:var(--icon-xxs)}.inbox-action:hover:not(:disabled):not([aria-disabled=true]):not(.is-disabled){background:var(--color-surface-subtle,var(--color-surface-hover));border-color:var(--color-border-strong,var(--color-border-subtle));transform:translateY(-1px)}.inbox-action:active:not(:disabled):not([aria-disabled=true]):not(.is-disabled){transform:translateY(0)}.inbox-action--danger{border-color:var(--color-danger,var(--color-border-strong));color:var(--color-danger-strong,var(--color-danger))}.inbox-action--accent{background:var(--color-accent-soft);border-color:var(--color-accent);color:var(--color-text)}.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)}.inbox-action--flat{background:transparent}.inbox-action--borderless,.inbox-action--borderless:hover:not(:disabled):not([aria-disabled=true]):not(.is-disabled),.inbox-action--flat{border-color:transparent}.inbox-action--flat:hover:not(:disabled):not([aria-disabled=true]):not(.is-disabled){background:var(--color-surface-subtle);border-color:transparent;transform:none}.inbox--actions-flat .inbox-action{background:transparent;border-color:transparent;transform:none}.inbox--actions-flat .inbox-action:hover:not(:disabled):not([aria-disabled=true]):not(.is-disabled){background:var(--color-surface-subtle);border-color:transparent}.inbox-action.is-disabled,.inbox-action:disabled,.inbox-action[aria-disabled=true]{background:var(--color-surface-subtle);border-color:var(--color-border-subtle);color:var(--color-text-muted);cursor:not-allowed;opacity:.6;transform:none}.inbox-action--borderless.is-disabled,.inbox-action--borderless:disabled,.inbox-action--borderless[aria-disabled=true],.inbox-action--flat.is-disabled,.inbox-action--flat:disabled,.inbox-action--flat[aria-disabled=true]{background:transparent;border-color:transparent}a.inbox-action.is-disabled,a.inbox-action[aria-disabled=true]{pointer-events:none;-webkit-text-decoration:none;text-decoration:none}.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;flex-direction:column;gap:var(--space-3);grid-column:1/-1;grid-row:2;padding:var(--space-4)}.inbox-row--open .inbox-row__expanded{display:flex}.inbox-row--glance-open .inbox-row__glance,.inbox-row--open .inbox-row__glance{-webkit-line-clamp:none;overflow:visible}.inbox--flat .inbox-row__expanded{background:var(--color-surface-subtle)}.inbox-row__expanded.is-hidden{display:none!important}.inbox-row__expanded.is-visible{display:block!important}.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}.inbox-row--flag-1{--inbox-flag-color:var(--color-danger);--inbox-flag-surface:var(--semantic-danger-bg,var(--color-danger-soft))}.icon-flag--1{color:var(--color-danger)}.inbox-row--flag-2{--inbox-flag-color:var(--color-warning);--inbox-flag-surface:var(--semantic-warning-bg,var(--color-warning-soft))}.icon-flag--2{color:var(--color-warning)}.inbox-row--flag-3{--inbox-flag-color:var(--color-info);--inbox-flag-surface:var(--semantic-info-bg,var(--color-info-soft))}.icon-flag--3{color:var(--color-info)}.inbox-row--flag-4{--inbox-flag-color:var(--color-success);--inbox-flag-surface:var(--semantic-success-bg,var(--color-success-soft))}.icon-flag--4{color:var(--color-success)}.inbox-row--flag-5{--inbox-flag-color:var(--color-accent);--inbox-flag-surface:var(--color-accent-soft)}.icon-flag--5{color:var(--color-accent)}.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)}.inbox-filter__group{align-items:center;display:inline-flex;gap:var(--space-2);min-width:0}.inbox-filter__label{color:var(--color-text-muted)}.inbox-filter__chip,.inbox-filter__label{font-size:var(--text-xs);font-weight:var(--font-weight-semibold);white-space:nowrap}.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)}button.inbox-filter__chip{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;font:inherit}.inbox-filter__chip--active,.inbox-filter__chip.is-active,.inbox-filter__chip[aria-pressed=true]{background:var(--color-accent-soft);border-color:var(--color-accent)}button.inbox-filter__chip:disabled,button.inbox-filter__chip[aria-disabled=true]{cursor:not-allowed;opacity:.6}.inbox-filter__actions{margin-left:auto}.inbox-cornerbar,.inbox-filter__actions{align-items:center;display:inline-flex;gap:var(--space-2)}.inbox-cornerbar{bottom:var(--space-6);left:auto;pointer-events:none;position:fixed;right:var(--space-6);top:auto;z-index:40}.inbox-cornerbar--left{bottom:var(--space-6);left:var(--space-6);right:auto;top:auto}.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){.inbox-row__inner{gap:var(--space-3);grid-template-columns:1fr}.inbox-row__actions{justify-content:flex-start;padding-top:0}.inbox-row__titleline{flex-wrap:wrap;row-gap:var(--space-1_5)}.inbox-row__title{flex-basis:100%;overflow:visible;text-overflow:clip;white-space:normal}.inbox-row__labels{flex-basis:100%;justify-content:flex-start}.inbox-nav__bar{flex-wrap:wrap;gap:var(--space-3);justify-content:center}.inbox-tabs{justify-content:center;order:1;width:100%}.inbox-nav__left{order:0}.inbox-nav__right{order:2}.inbox-nav__bottom{align-items:stretch;flex-direction:column}.inbox-nav__bottom-left,.inbox-nav__bottom-right{justify-content:flex-start}.inbox-search.is-open .inbox-search__field,.inbox-search__toggle[aria-expanded=true]+.inbox-search__field{width:100%}.inbox-filter__group{flex-wrap:wrap}.inbox-filter__chip{flex-shrink:0}.inbox__hide-sm{display:none!important}}@media (min-width:769px){.inbox__show-sm{display:none!important}}@media (max-width:1024px){.inbox__hide-md{display:none!important}}@media (min-width:1025px){.inbox__show-md{display:none!important}}.inbox__truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.inbox__stack{display:flex;flex-direction:column;gap:var(--space-3)}.inbox__stack--tight{gap:var(--space-2)}.inbox__stack--loose{gap:var(--space-4)}.inbox__cluster{align-items:center;display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-3)}.inbox__form{flex-direction:column;min-width:0}.inbox__form,.inbox__form-row{display:flex;gap:var(--space-3)}.inbox__form-row{align-items:flex-start;flex-wrap:wrap}.inbox__form-actions{align-items:center;display:flex;flex-wrap:wrap;gap:var(--space-2)}.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%}.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))}.inbox-nav{display:flex;flex-direction:column;gap:var(--space-3);margin-bottom:var(--space-4)}.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)}.inbox-nav__left,.inbox-nav__right{align-items:center;display:inline-flex;flex:0 0 auto;gap:var(--space-2)}.inbox-nav__bottom{align-items:center;display:flex;gap:var(--space-3);justify-content:space-between}.inbox-nav__bottom-left,.inbox-nav__bottom-right{align-items:center;display:inline-flex;gap:var(--space-2)}.inbox-nav__bottom-left:empty,.inbox-nav__bottom-right:empty{display:none}.inbox-nav__bottom--left{justify-content:flex-start}.inbox-nav__bottom--center{justify-content:center}.inbox-nav__bottom--right{justify-content:flex-end}.inbox-nav__bottom--split{justify-content:space-between}.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)}.inbox-tab,.inbox-tabs{align-items:center;display:inline-flex}.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}.inbox-tab.is-active,.inbox-tab:hover:not(:disabled):not([aria-disabled=true]):not(.is-disabled),.inbox-tab[aria-selected=true]{background:var(--color-surface);color:var(--color-text)}.inbox-tab.is-active,.inbox-tab[aria-selected=true]{border:1px solid var(--color-border-subtle)}.inbox-tab:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}.inbox-tab.is-disabled,.inbox-tab:disabled,.inbox-tab[aria-disabled=true]{background:transparent;border-color:transparent;color:var(--color-text-muted);cursor:not-allowed;opacity:.6;pointer-events:none}.inbox-tab__count{background:var(--color-surface-subtle);border:1px solid var(--color-border-subtle);border-radius:var(--radius-pill);color:var(--color-text-muted);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)}.inbox-search,.inbox-tab__count{align-items:center;display:inline-flex}.inbox-search{gap:var(--space-2);min-width:0}.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)}.inbox-search__toggle:hover:not(:disabled):not([aria-disabled=true]):not(.is-disabled){background:var(--color-surface-subtle,var(--color-surface-hover));border-color:var(--color-border-strong,var(--color-border-subtle))}.inbox-search__toggle.is-disabled,.inbox-search__toggle:disabled,.inbox-search__toggle[aria-disabled=true]{background:var(--color-surface-subtle);border-color:var(--color-border-subtle);color:var(--color-text-muted);cursor:not-allowed;opacity:.6;pointer-events:none}.inbox-search__toggle svg{color:currentColor;height:1rem;height:var(--icon-xs,1rem);width:1rem;width:var(--icon-xs,1rem)}.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}.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%}.inbox-search.is-open .inbox-search__field,.inbox-search__toggle[aria-expanded=true]+.inbox-search__field{opacity:1;pointer-events:auto;width:100%}.inbox-nav__bar--search-full .inbox-nav__left,.inbox-nav__bar--search-full .inbox-search{flex:1 1 auto;width:100%}.inbox-nav__bar--search-full .inbox-search__field{opacity:1;pointer-events:auto;width:100%}.inbox-nav__bar--search-full .inbox-search__input{max-width:none}.inbox-nav__bar--search-full .inbox-nav__right,.inbox-nav__bar--search-full .inbox-tabs{display:none}.inbox__list{display:flex;flex-direction:column;gap:var(--space-2)}.inbox--flat .inbox__list{border-bottom:1px solid var(--color-border-subtle);border-top:1px solid var(--color-border-subtle);gap:0}.inbox--flat .inbox-row{border-left:0;border-radius:0;border-right:0;border-top:0}.inbox--flat .inbox-row+.inbox-row{border-top:1px solid var(--color-border-subtle)}.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%}.inbox-row__hover:hover{background:var(--inbox-row-bg-hover);border-color:var(--color-border-strong,var(--color-border-subtle))}.inbox-row__focus-visible:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}.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%}.inbox-row__inner{display:grid;grid-gap:var(--space-4);align-items:start;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)}.inbox-row__badges{grid-area:badges}.inbox-row__meta{grid-area:meta}.inbox-row__actions{grid-area:actions}.inbox-row__data{display:flex;flex-direction:column;gap:var(--space-2);grid-area:data;min-width:0}@media (max-width:768px){.inbox-row__inner{grid-template-areas:"badges" "meta" "data" "actions";grid-template-columns:1fr}.inbox-row__actions{justify-content:flex-end;min-width:0;padding-top:0}}.inbox-row__labels{justify-content:flex-start;margin-left:0;text-align:left}.inbox-row__title{min-width:0}.inbox-row--minimal .inbox-row__inner{gap:var(--space-3);padding:var(--space-3) var(--space-3)}.inbox-row--minimal{--inbox-title-size:var(--text-xs);--inbox-desc-size:var(--text-xxs,var(--text-xs))}.inbox-row--normal .inbox-row__inner{gap:var(--space-4);padding:var(--space-4) var(--space-4)}.inbox-row--rich .inbox-row__inner{gap:var(--space-5);padding:var(--space-5) var(--space-5)}.inbox-row--rich{--inbox-title-size:var(--text-md,var(--text-sm));--inbox-desc-size:var(--text-sm)}.inbox-row--mega .inbox-row__inner{gap:var(--space-6);padding:var(--space-6) var(--space-6)}.inbox-row--mega{--inbox-title-size:var(--text-lg,var(--text-md,var(--text-sm)));--inbox-desc-size:var(--text-sm)}.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)}.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}.inbox-badge svg{color:currentColor;height:var(--icon-xxs);width:var(--icon-xxs)}.inbox-badge--accent{background:var(--color-accent-soft);border-color:var(--color-accent);color:var(--color-text)}.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))}.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))}.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))}.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))}.inbox-row__meta{flex-direction:column}.inbox-row__meta,.inbox-row__titleline{display:flex;gap:var(--space-2);min-width:0}.inbox-row__titleline{align-items:center}.inbox-row__status{align-items:center;display:inline-flex;flex:0 0 auto;gap:var(--space-1_5)}.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)}.inbox-row__status-icon svg{height:100%;width:100%}.inbox-row.is-bookmarked .inbox-row__status-icon--bookmark,.inbox-row.is-starred .inbox-row__status-icon--star{color:var(--color-accent)}.inbox-row.is-flagged .inbox-row__status-icon--flag{color:var(--color-danger-strong,var(--color-danger))}.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}.inbox-row__labels{flex:0 0 auto;gap:var(--space-1_5);min-width:0}.inbox-label,.inbox-row__labels{align-items:center;display:inline-flex}.inbox-label{background:transparent;border:1px solid var(--color-border-subtle);border-radius:var(--radius-pill);color:var(--color-text-muted);font-size:var(--text-xxs);font-weight:var(--font-weight-semibold);height:1.4rem;padding:0 var(--space-2);white-space:nowrap}.inbox-label--accent{background:var(--color-accent-soft);border-color:var(--color-accent);color:var(--color-text)}.inbox-label--muted{background:var(--color-surface-subtle);border-color:var(--color-border-subtle);color:var(--color-text-muted)}.inbox-row__glance{color:var(--color-text-muted);display:-webkit-box;font-size:var(--inbox-desc-size);line-height:var(--line-height-relaxed);min-width:0;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}.inbox-row--rich .inbox-row__glance{-webkit-line-clamp:3}.inbox-row--mega .inbox-row__glance{-webkit-line-clamp:4}.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)}.inbox-row__metafoot strong{color:var(--color-text-muted);font-weight:var(--font-weight-semibold)}.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)}.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)}.inbox-row__details-item svg{color:currentColor;height:var(--icon-xxs);width:var(--icon-xxs)}.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)}.inbox-row--actions-below .inbox-row__inner{grid-template-areas:"badges" "meta" "data" "actions";grid-template-columns:1fr}.inbox-row--actions-below .inbox-row__actions{justify-content:flex-start;padding-top:0}.inbox-row--actions-full .inbox-row__actions{grid-column:1/-1;justify-content:flex-start;padding-top:0}.inbox-row__actions--left{justify-content:flex-start}.inbox-row__actions--center{justify-content:center}.inbox-row__actions--right{justify-content:flex-end}.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.inbox-action{-webkit-text-decoration:none;text-decoration:none}.inbox-action svg{color:currentColor;height:var(--icon-xxs);width:var(--icon-xxs)}.inbox-action:hover:not(:disabled):not([aria-disabled=true]):not(.is-disabled){background:var(--color-surface-subtle,var(--color-surface-hover));border-color:var(--color-border-strong,var(--color-border-subtle));transform:translateY(-1px)}.inbox-action:active:not(:disabled):not([aria-disabled=true]):not(.is-disabled){transform:translateY(0)}.inbox-action--danger{border-color:var(--color-danger,var(--color-border-strong));color:var(--color-danger-strong,var(--color-danger))}.inbox-action--accent{background:var(--color-accent-soft);border-color:var(--color-accent);color:var(--color-text)}.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)}.inbox-action--flat{background:transparent}.inbox-action--borderless,.inbox-action--borderless:hover:not(:disabled):not([aria-disabled=true]):not(.is-disabled),.inbox-action--flat{border-color:transparent}.inbox-action--flat:hover:not(:disabled):not([aria-disabled=true]):not(.is-disabled){background:var(--color-surface-subtle);border-color:transparent;transform:none}.inbox--actions-flat .inbox-action{background:transparent;border-color:transparent;transform:none}.inbox--actions-flat .inbox-action:hover:not(:disabled):not([aria-disabled=true]):not(.is-disabled){background:var(--color-surface-subtle);border-color:transparent}.inbox-action.is-disabled,.inbox-action:disabled,.inbox-action[aria-disabled=true]{background:var(--color-surface-subtle);border-color:var(--color-border-subtle);color:var(--color-text-muted);cursor:not-allowed;opacity:.6;transform:none}.inbox-action--borderless.is-disabled,.inbox-action--borderless:disabled,.inbox-action--borderless[aria-disabled=true],.inbox-action--flat.is-disabled,.inbox-action--flat:disabled,.inbox-action--flat[aria-disabled=true]{background:transparent;border-color:transparent}a.inbox-action.is-disabled,a.inbox-action[aria-disabled=true]{pointer-events:none;-webkit-text-decoration:none;text-decoration:none}.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;flex-direction:column;gap:var(--space-3);grid-column:1/-1;grid-row:2;padding:var(--space-4)}.inbox-row--open .inbox-row__expanded{display:flex}.inbox-row--glance-open .inbox-row__glance,.inbox-row--open .inbox-row__glance{-webkit-line-clamp:initial;overflow:visible}.inbox--flat .inbox-row__expanded{background:var(--color-surface-subtle)}.inbox-row__expanded.is-hidden{display:none!important}.inbox-row__expanded.is-visible{display:block!important}.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}.inbox-row--flag-1{--inbox-flag-color:var(--color-danger);--inbox-flag-surface:var(--semantic-danger-bg,var(--color-danger-soft))}.icon-flag--1{color:var(--color-danger)}.inbox-row--flag-2{--inbox-flag-color:var(--color-warning);--inbox-flag-surface:var(--semantic-warning-bg,var(--color-warning-soft))}.icon-flag--2{color:var(--color-warning)}.inbox-row--flag-3{--inbox-flag-color:var(--color-info);--inbox-flag-surface:var(--semantic-info-bg,var(--color-info-soft))}.icon-flag--3{color:var(--color-info)}.inbox-row--flag-4{--inbox-flag-color:var(--color-success);--inbox-flag-surface:var(--semantic-success-bg,var(--color-success-soft))}.icon-flag--4{color:var(--color-success)}.inbox-row--flag-5{--inbox-flag-color:var(--color-accent);--inbox-flag-surface:var(--color-accent-soft)}.icon-flag--5{color:var(--color-accent)}.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)}.inbox-filter__group{align-items:center;display:inline-flex;gap:var(--space-2);min-width:0}.inbox-filter__label{color:var(--color-text-muted)}.inbox-filter__chip,.inbox-filter__label{font-size:var(--text-xs);font-weight:var(--font-weight-semibold);white-space:nowrap}.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)}button.inbox-filter__chip{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;font:inherit}.inbox-filter__chip--active,.inbox-filter__chip.is-active,.inbox-filter__chip[aria-pressed=true]{background:var(--color-accent-soft);border-color:var(--color-accent)}button.inbox-filter__chip:disabled,button.inbox-filter__chip[aria-disabled=true]{cursor:not-allowed;opacity:.6}.inbox-filter__actions{margin-left:auto}.inbox-cornerbar,.inbox-filter__actions{align-items:center;display:inline-flex;gap:var(--space-2)}.inbox-cornerbar{bottom:var(--space-6);left:auto;pointer-events:none;position:fixed;right:var(--space-6);top:auto;z-index:40}.inbox-cornerbar--left{bottom:var(--space-6);left:var(--space-6);right:auto;top:auto}.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){.inbox-row__inner{gap:var(--space-3);grid-template-columns:1fr}.inbox-row__actions{justify-content:flex-start;padding-top:0}.inbox-row__titleline{flex-wrap:wrap;row-gap:var(--space-1_5)}.inbox-row__title{flex-basis:100%;overflow:visible;text-overflow:clip;white-space:normal}.inbox-row__labels{flex-basis:100%;justify-content:flex-start}.inbox-nav__bar{flex-wrap:wrap;gap:var(--space-3);justify-content:center}.inbox-tabs{justify-content:center;order:1;width:100%}.inbox-nav__left{order:0}.inbox-nav__right{order:2}.inbox-nav__bottom{align-items:stretch;flex-direction:column}.inbox-nav__bottom-left,.inbox-nav__bottom-right{justify-content:flex-start}.inbox-search.is-open .inbox-search__field,.inbox-search__toggle[aria-expanded=true]+.inbox-search__field{width:100%}.inbox-filter__group{flex-wrap:wrap}.inbox-filter__chip{flex-shrink:0}.inbox__hide-sm{display:none!important}}@media (min-width:769px){.inbox__show-sm{display:none!important}}@media (max-width:1024px){.inbox__hide-md{display:none!important}}@media (min-width:1025px){.inbox__show-md{display:none!important}}.inbox__truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.inbox__stack{display:flex;flex-direction:column;gap:var(--space-3)}.inbox__stack--tight{gap:var(--space-2)}.inbox__stack--loose{gap:var(--space-4)}.inbox__cluster{align-items:center;display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-3)}.inbox__form{flex-direction:column;min-width:0}.inbox__form,.inbox__form-row{display:flex;gap:var(--space-3)}.inbox__form-row{align-items:flex-start;flex-wrap:wrap}.inbox__form-actions{align-items:center;display:flex;flex-wrap:wrap;gap:var(--space-2)}.inbox__sr-only{height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;width:1px!important;clip:rect(0,0,0,0)!important;border:0!important;white-space:nowrap!important}

package/dist/components/navigation.css

@@ -19,7 +19,6 @@
 /* ---------------------------------------------------------
    1. CORE NAV PRIMITIVES
 --------------------------------------------------------- */
-
 .nav {
     display: flex;
     align-items: center;
@@ -121,7 +120,6 @@
 /* ---------------------------------------------------------
    2. BRAND / LOGO / ACTION SLOTS
 --------------------------------------------------------- */
-
 .nav__brand {
     display: inline-flex;
     align-items: center;
@@ -151,7 +149,6 @@
 /* ---------------------------------------------------------
    3. NAV TOGGLE (MOBILE HAMBURGER)
 --------------------------------------------------------- */
-
 .nav__toggle {
     display: none;
     cursor: pointer;
@@ -195,7 +192,6 @@
 /* ---------------------------------------------------------
    4. HORIZONTAL / PRIMARY NAV
 --------------------------------------------------------- */
-
 .nav--primary {
     display: flex;
     align-items: center;
@@ -222,7 +218,6 @@
 /* ---------------------------------------------------------
    5. SUB NAV (TABS) + PILL NAV
 --------------------------------------------------------- */
-
 .nav--sub {
     display: flex;
     gap: var(--space-6);
@@ -305,7 +300,6 @@
 /* ---------------------------------------------------------
    6. VERTICAL NAV + SIDEBAR
 --------------------------------------------------------- */
-
 .nav--vertical {
     display: flex;
     flex-direction: column;
@@ -413,7 +407,6 @@
 /* ---------------------------------------------------------
    7. ANNOUNCEMENT BAR
 --------------------------------------------------------- */
-
 .announcement {
     width: 100%;
     background-color: var(--color-muted-bg);
@@ -511,7 +504,6 @@
 /* ---------------------------------------------------------
    8. BREADCRUMBS
 --------------------------------------------------------- */
-
 .breadcrumbs {
     display: flex;
     align-items: center;
@@ -556,7 +548,6 @@
 /* ---------------------------------------------------------
    9. PAGINATION
 --------------------------------------------------------- */
-
 .pagination {
     --pagination-gap: var(--space-1);
     --pagination-item-height: 2rem;
@@ -689,7 +680,6 @@
 /* ---------------------------------------------------------
    10. TOOLBAR
 --------------------------------------------------------- */
-
 .toolbar {
     display: flex;
     align-items: center;
@@ -730,7 +720,6 @@
 /* ---------------------------------------------------------
    11. FOOTER NAV CONTEXT
 --------------------------------------------------------- */
-
 .footer .nav {
     display: flex;
     flex-direction: column;
@@ -765,7 +754,6 @@
 /* ---------------------------------------------------------
    12. MOBILE NAV (OVERLAY / PANEL PATTERN)
 --------------------------------------------------------- */
-
 .nav-panel {
     position: fixed;
     top: 0;
@@ -838,7 +826,6 @@
 /* ---------------------------------------------------------
    TABS (Standalone Component)
 --------------------------------------------------------- */
-
 .nav-tabs {
     display: flex;
     align-items: center;

package/dist/components/navigation.min.css

@@ -1 +1 @@
-.nav{align-items:center;display:flex;gap:var(--space-6)}.nav__item,.nav__link{align-items:center;color:var(--color-text);cursor:pointer;display:inline-flex;font-size:var(--text-sm);gap:var(--space-2);padding:var(--space-1) 0;position:relative;-webkit-text-decoration:none;text-decoration:none;transition:color .15s ease,background-color .15s ease,border-color .15s ease,box-shadow .15s ease}.nav__item:hover,.nav__link:hover{color:var(--color-text-muted)}.nav__item:active,.nav__link:active{background-color:var(--color-surface-subtle);color:var(--color-text)}.nav__item:focus-visible,.nav__link:focus-visible{border-radius:var(--radius-sm);box-shadow:0 0 0 1px var(--color-surface),0 0 0 3px var(--focus-ring-color);outline:none}.nav__item--active,.nav__item--active:hover,.nav__link--active,.nav__link--active:hover{color:var(--link-text-hover);font-weight:600;-webkit-text-decoration:none;text-decoration:none}.nav__item--disabled,.nav__link--disabled{cursor:not-allowed;opacity:.45;pointer-events:none}.nav__item svg,.nav__link svg{stroke:currentColor;fill:currentColor;height:1em;width:1em}.nav--a .nav__item,.nav--a .nav__link{padding:var(--space-2) var(--space-2)}.nav--b .nav__item,.nav--b .nav__link{padding:var(--space-1) var(--space-1)}.nav--c .nav__item,.nav--c .nav__link{font-size:var(--text-xs);gap:var(--space-1);padding:0 var(--space-1)}.nav--c .nav__item svg,.nav--c .nav__link svg{height:.875em;width:.875em}.nav-section{gap:var(--space-6)}.nav-section,.nav__brand{align-items:center;display:inline-flex}.nav__brand{gap:var(--space-3)}.nav__brand--compact{gap:var(--space-2)}.nav__logo{align-items:center;display:inline-flex;justify-content:center}.nav__logo .logo{padding:0}.nav__actions{align-items:center;display:inline-flex;gap:var(--space-3)}.nav__toggle{background-color:transparent;border:var(--border-width) solid transparent;border-radius:var(--radius-sm);color:var(--color-text);cursor:pointer;display:none;padding:var(--space-2);transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease}.nav__toggle svg{stroke:currentColor;height:24px;width:24px}.nav__toggle:hover{background-color:var(--color-surface-subtle);border-color:var(--color-border-subtle)}.nav__toggle:active{background-color:var(--color-muted-bg)}.nav__toggle:focus-visible{box-shadow:0 0 0 1px var(--color-surface),0 0 0 3px var(--focus-ring-color);outline:none}.nav__toggle--active{background-color:var(--color-accent-soft);border-color:var(--color-accent);color:var(--color-text)}.nav--primary{align-items:center;display:flex;gap:var(--space-6)}.nav--primary .nav__item,.nav--primary .nav__link{border-radius:var(--radius-sm);padding:var(--space-2) var(--space-2)}.nav--primary .nav__item:hover,.nav--primary .nav__link:hover{background-color:var(--color-surface-subtle)}.nav--primary .nav__item--active,.nav--primary .nav__link--active{background-color:var(--color-accent-soft);color:var(--color-text)}.nav--sub{border-bottom:var(--border-width) solid var(--color-border-subtle);display:flex;gap:var(--space-6);margin-bottom:var(--space-8)}.nav--sub,.nav--sub .nav__item,.nav--sub .nav__link{padding-bottom:var(--space-2)}.nav--sub .nav__item--active:after,.nav--sub .nav__link--active:after{background-color:var(--color-accent);bottom:calc(var(--border-width)*-1);content:"";height:var(--tab-indicator-height);left:0;position:absolute;width:100%}.nav--sub .nav__item--disabled,.nav--sub .nav__link--disabled{opacity:.45;pointer-events:none}.nav--sub .nav__item:focus-visible,.nav--sub .nav__link:focus-visible{border-radius:var(--radius-sm);box-shadow:0 0 0 1px var(--color-surface),0 0 0 3px var(--focus-ring-color);outline:none}.nav--pills{display:flex;flex-wrap:wrap;gap:var(--space-2)}.nav--pills .nav__item,.nav--pills .nav__link{background-color:var(--color-surface);border:var(--border-width) solid var(--color-border-subtle);border-radius:999px;font-size:var(--text-xs);padding:var(--space-1) var(--space-3)}.nav--pills .nav__item:hover,.nav--pills .nav__link:hover{background-color:var(--color-surface-subtle);border-color:var(--color-border-subtle)}.nav--pills .nav__item--active,.nav--pills .nav__link--active{background-color:var(--color-accent-soft);border-color:var(--color-accent);color:var(--color-text)}.nav--pills .nav__item--disabled,.nav--pills .nav__link--disabled{opacity:.45;pointer-events:none}.nav--pills .nav__item:focus-visible,.nav--pills .nav__link:focus-visible{box-shadow:0 0 0 1px var(--color-surface),0 0 0 3px var(--focus-ring-color);outline:none}.nav--vertical{display:flex;flex-direction:column;gap:var(--space-2)}.nav--vertical .nav__item,.nav--vertical .nav__link{padding:var(--space-1) 0}.nav--vertical .nav__item--depth-2,.nav--vertical .nav__link--depth-2{padding-left:var(--space-4)}.nav--vertical .nav__item--depth-3,.nav--vertical .nav__link--depth-3{padding-left:var(--space-6)}.sidebar{gap:var(--space-4)}.sidebar,.sidebar__section{display:flex;flex-direction:column}.sidebar__section{gap:var(--space-2)}.sidebar__section--collapsible .sidebar__section-header{align-items:center;display:flex;gap:var(--space-2);justify-content:space-between}.sidebar__section-title{color:var(--color-text-muted);font-size:var(--text-xs);letter-spacing:.04em;text-transform:uppercase}.sidebar__section-toggle-icon{align-items:center;display:inline-flex;justify-content:center;transition:transform .15s ease}.sidebar__section--expanded .sidebar__section-toggle-icon{transform:rotate(90deg)}.sidebar__section--collapsed .sidebar__nav{display:none}.sidebar__nav{display:flex;flex-direction:column;gap:var(--space-1)}.sidebar__nav .nav__item,.sidebar__nav .nav__link{border-radius:var(--radius-sm);color:var(--color-text);cursor:pointer;font-size:var(--text-sm);padding:var(--space-1) 0;-webkit-text-decoration:underline;text-decoration:underline}.sidebar__nav .nav__item:hover,.sidebar__nav .nav__link:hover{background-color:var(--color-surface-subtle);color:var(--color-text-muted);-webkit-text-decoration:none;text-decoration:none}.sidebar__nav .nav__item--active,.sidebar__nav .nav__link--active{color:var(--color-accent);font-weight:600}.sidebar__section--collapsible .sidebar__section-header{cursor:pointer}.sidebar__nav .nav__item:focus-visible,.sidebar__nav .nav__link:focus-visible{outline:2px solid var(--focus-ring-color,var(--color-accent-soft));outline-offset:var(--space-1)}.announcement{background-color:var(--color-muted-bg);border-bottom:var(--border-width) solid var(--color-muted-border);color:var(--color-text-muted);padding:var(--space-2) 0;width:100%}.announcement__inner{align-items:center;display:flex;gap:var(--space-4);justify-content:space-between;margin:0 auto;max-width:var(--content-width-xl);padding:0 var(--space-6)}.announcement__content{align-items:center;display:flex;gap:var(--space-2)}.announcement__icon{align-items:center;display:inline-flex;font-size:var(--text-sm);justify-content:center}.announcement__link,.announcement__text{font-size:var(--text-xs)}.announcement__link{color:var(--color-text);-webkit-text-decoration:none;text-decoration:none}.announcement__link:hover{-webkit-text-decoration:underline;text-decoration:underline}.announcement__close{align-items:center;background-color:transparent;border:var(--border-width) solid transparent;border-radius:var(--radius-sm);cursor:pointer;display:inline-flex;justify-content:center;padding:var(--space-1);transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease}.announcement__close:hover{background-color:var(--color-surface-subtle);border-color:var(--color-border-subtle)}.announcement__close:focus-visible{box-shadow:0 0 0 1px var(--color-surface),0 0 0 3px var(--focus-ring-color);outline:none}.announcement--info{background-color:var(--color-info-soft);color:var(--color-info-strong)}.announcement--success{background-color:var(--color-success-soft);color:var(--color-success-strong)}.announcement--warning{background-color:var(--color-warning-soft);color:var(--color-warning-strong)}.announcement--danger{background-color:var(--color-danger-soft);color:var(--color-danger-strong)}.breadcrumbs{align-items:center;color:var(--color-text-muted);display:flex;flex-wrap:wrap;font-size:var(--text-xs);gap:var(--space-2)}.breadcrumbs__item{align-items:center;display:inline-flex;gap:var(--space-1);max-width:100%}.breadcrumbs__link{color:var(--color-text);max-width:16rem;overflow:hidden;-webkit-text-decoration:underline;text-decoration:underline;text-overflow:ellipsis;white-space:nowrap}.breadcrumbs__link:hover{color:var(--color-text-muted)}.breadcrumbs__link:focus-visible{border-radius:var(--radius-sm);box-shadow:0 0 0 1px var(--color-surface),0 0 0 3px var(--focus-ring-color);outline:none}.breadcrumbs__separator{color:var(--color-text-soft)}.pagination{--pagination-gap:var(--space-1);--pagination-item-height:2rem;--pagination-item-min-width:2rem;--pagination-item-padding-x:var(--space-2);--pagination-item-radius:var(--radius-sm);--pagination-item-border:var(--border-width) solid var(--color-border-subtle);--pagination-item-bg:var(--color-surface);--pagination-item-color:var(--color-text);align-items:center;display:inline-flex;flex-wrap:wrap;font-size:var(--text-xs);gap:var(--pagination-gap)}.pagination--compact{--pagination-gap:var(--space-0_5);--pagination-item-height:1.75rem;--pagination-item-min-width:1.75rem;--pagination-item-padding-x:var(--space-1_5);font-size:var(--text-xxs)}.pagination--spacious{--pagination-gap:var(--space-2);--pagination-item-height:2.5rem;--pagination-item-min-width:2.5rem;--pagination-item-padding-x:var(--space-3);font-size:var(--text-sm)}.pagination--minimal .pagination__item{background-color:transparent;border-color:transparent}.pagination--minimal .pagination__item:hover{background-color:var(--color-surface-subtle);border-color:transparent}.pagination--back-forward{gap:var(--space-3)}.pagination--load-more{gap:var(--space-3);justify-content:center;width:100%}.pagination__meta,.pagination__status{color:var(--color-text-muted);font-size:var(--text-xs)}.pagination__item,.pagination__meta,.pagination__status{align-items:center;display:inline-flex;gap:var(--space-1);white-space:nowrap}.pagination__item{background-color:var(--pagination-item-bg);border:var(--pagination-item-border);border-radius:var(--pagination-item-radius);color:var(--pagination-item-color);cursor:pointer;height:var(--pagination-item-height);justify-content:center;min-width:var(--pagination-item-min-width);padding:0 var(--pagination-item-padding-x);-webkit-text-decoration:none;text-decoration:none;transition:background-color .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease}.pagination__item:hover{background-color:var(--color-surface-subtle);border-color:var(--color-border-subtle);color:var(--color-text)}.pagination__item:active{background-color:var(--color-muted-bg)}.pagination__item:focus-visible{box-shadow:0 0 0 1px var(--color-surface),0 0 0 3px var(--focus-ring-color);outline:none}.pagination__item--active{background-color:var(--color-accent-soft);border-color:var(--color-accent);color:var(--color-text)}.pagination__item--disabled{cursor:not-allowed;opacity:.4;pointer-events:none}.pagination__next,.pagination__prev{min-width:auto;padding:0 var(--space-2)}.pagination__ellipsis{background-color:transparent;border:none;color:var(--color-text-muted);cursor:default;min-width:auto;pointer-events:none}.toolbar{align-items:center;background-color:var(--color-surface);border:var(--border-width) solid var(--color-border-subtle);border-radius:var(--radius-md);display:flex;gap:var(--space-4);justify-content:space-between;padding:var(--space-3) var(--space-4)}.toolbar--dense{padding:var(--space-2) var(--space-3)}.toolbar--spacious{padding:var(--space-4) var(--space-5)}.toolbar__section{align-items:center;display:flex;gap:var(--space-3)}.toolbar__title{font-size:var(--text-sm);font-weight:500}.toolbar__actions{align-items:center;display:inline-flex;gap:var(--space-3)}.footer .nav{display:flex;flex-direction:column;gap:var(--space-2)}.footer .nav.nav--vertical{align-items:flex-start}.footer .nav__item,.footer .nav__link{color:var(--color-footer-text);font-size:var(--text-sm);opacity:.85;padding-left:0;padding-right:0;text-align:left}.footer .nav__item:hover,.footer .nav__link:hover{opacity:1}.footer .nav__item--active,.footer .nav__link--active{font-weight:500;opacity:1}.nav-panel{background-color:var(--color-bg-elevated);border-left:var(--border-width) solid var(--color-border-subtle);bottom:0;box-shadow:var(--shadow-2);display:flex;flex-direction:column;gap:var(--space-4);max-width:100%;opacity:0;padding:var(--space-4);pointer-events:none;position:fixed;right:0;top:0;transform:translateX(100%);transition:transform .2s ease,opacity .2s ease;width:18rem;z-index:40}.nav-panel--open{opacity:1;pointer-events:auto;transform:translateX(0)}.nav-backdrop{background-color:var(--overlay-backdrop-default);bottom:0;left:0;opacity:0;pointer-events:none;position:fixed;right:0;top:0;transition:opacity .2s ease;z-index:30}.nav-backdrop--visible{opacity:1;pointer-events:auto}.nav--mobile{display:flex;flex-direction:column;gap:var(--space-4)}.nav--mobile .nav__item,.nav--mobile .nav__link{font-size:var(--text-md);padding:var(--space-2) 0}@media (max-width:768px){.nav__toggle{align-items:center;display:inline-flex}}.nav-tabs{align-items:center;border-bottom:var(--border-width) solid var(--color-border-subtle);display:flex;gap:var(--space-6);padding-bottom:var(--space-2)}.nav-tabs__item{align-items:center;background:none;border:none;color:var(--color-text);cursor:pointer;display:inline-flex;font-size:var(--text-sm);font-weight:500;justify-content:center;padding:var(--space-1) var(--space-2);position:relative;-webkit-text-decoration:none;text-decoration:none;transition:color .15s ease,background-color .15s ease,box-shadow .15s ease}.nav-tabs__item:hover{color:var(--color-text-muted)}.nav-tabs__item:focus-visible{border-radius:var(--radius-sm);box-shadow:0 0 0 1px var(--color-surface),0 0 0 3px var(--focus-ring-color);outline:none}.nav-tabs__item--active,.nav-tabs__item[aria-selected=true]{color:var(--color-text);font-weight:600}.nav-tabs__item--active:after,.nav-tabs__item[aria-selected=true]:after{background-color:var(--color-accent);bottom:calc(var(--border-width)*-1);content:"";height:var(--tab-indicator-height);left:0;position:absolute;width:100%}.nav-tabs__item--disabled,.nav-tabs__item[disabled]{cursor:not-allowed;opacity:.45;pointer-events:none}.nav-tabs__item:hover:not(.nav-tabs__item--active):not([aria-selected=true]){background-color:var(--color-surface-subtle);border-radius:var(--radius-sm);color:var(--color-text)}.nav-tabs--compact{gap:var(--space-4);padding-bottom:var(--space-1)}.nav-tabs--compact .nav-tabs__item{font-size:var(--text-xs);padding:var(--space-0_5) 0}.nav-tabs__item{gap:var(--space-2)}.nav-tabs__icon{flex-shrink:0;height:var(--icon-sm);width:var(--icon-sm)}.nav-tabs__badge{align-items:center;background-color:var(--accent-soft-surface,var(--color-accent-soft));border-radius:var(--radius-pill);color:var(--accent-soft-on,var(--color-on-accent));display:inline-flex;flex-shrink:0;font-size:var(--text-xs);font-weight:500;height:1.25rem;justify-content:center;line-height:1;min-width:1.25rem;padding-left:var(--space-1);padding-right:var(--space-1)}.nav-tabs__item--active .nav-tabs__badge,.nav-tabs__item[aria-selected=true] .nav-tabs__badge{background-color:var(--accent-soft-surface-strong,var(--accent-soft-surface));color:var(--accent-soft-on,var(--color-on-accent))}
+.nav{align-items:center;display:flex;gap:var(--space-6)}.nav__item,.nav__link{align-items:center;color:var(--color-text);cursor:pointer;display:inline-flex;font-size:var(--text-sm);gap:var(--space-2);padding:var(--space-1) 0;position:relative;-webkit-text-decoration:none;text-decoration:none;transition:color .15s ease,background-color .15s ease,border-color .15s ease,box-shadow .15s ease}.nav__item:hover,.nav__link:hover{color:var(--color-text-muted)}.nav__item:active,.nav__link:active{background-color:var(--color-surface-subtle);color:var(--color-text)}.nav__item:focus-visible,.nav__link:focus-visible{border-radius:var(--radius-sm);box-shadow:0 0 0 1px var(--color-surface),0 0 0 3px var(--focus-ring-color);outline:none}.nav__item--active,.nav__item--active:hover,.nav__link--active,.nav__link--active:hover{color:var(--link-text-hover);font-weight:600;-webkit-text-decoration:none;text-decoration:none}.nav__item--disabled,.nav__link--disabled{cursor:not-allowed;opacity:.45;pointer-events:none}.nav__item svg,.nav__link svg{fill:currentColor;height:1em;stroke:currentColor;width:1em}.nav--a .nav__item,.nav--a .nav__link{padding:var(--space-2) var(--space-2)}.nav--b .nav__item,.nav--b .nav__link{padding:var(--space-1) var(--space-1)}.nav--c .nav__item,.nav--c .nav__link{font-size:var(--text-xs);gap:var(--space-1);padding:0 var(--space-1)}.nav--c .nav__item svg,.nav--c .nav__link svg{height:.875em;width:.875em}.nav-section{gap:var(--space-6)}.nav-section,.nav__brand{align-items:center;display:inline-flex}.nav__brand{gap:var(--space-3)}.nav__brand--compact{gap:var(--space-2)}.nav__logo{align-items:center;display:inline-flex;justify-content:center}.nav__logo .logo{padding:0}.nav__actions{align-items:center;display:inline-flex;gap:var(--space-3)}.nav__toggle{background-color:transparent;border:var(--border-width) solid transparent;border-radius:var(--radius-sm);color:var(--color-text);cursor:pointer;display:none;padding:var(--space-2);transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease}.nav__toggle svg{height:24px;stroke:currentColor;width:24px}.nav__toggle:hover{background-color:var(--color-surface-subtle);border-color:var(--color-border-subtle)}.nav__toggle:active{background-color:var(--color-muted-bg)}.nav__toggle:focus-visible{box-shadow:0 0 0 1px var(--color-surface),0 0 0 3px var(--focus-ring-color);outline:none}.nav__toggle--active{background-color:var(--color-accent-soft);border-color:var(--color-accent);color:var(--color-text)}.nav--primary{align-items:center;display:flex;gap:var(--space-6)}.nav--primary .nav__item,.nav--primary .nav__link{border-radius:var(--radius-sm);padding:var(--space-2) var(--space-2)}.nav--primary .nav__item:hover,.nav--primary .nav__link:hover{background-color:var(--color-surface-subtle)}.nav--primary .nav__item--active,.nav--primary .nav__link--active{background-color:var(--color-accent-soft);color:var(--color-text)}.nav--sub{border-bottom:var(--border-width) solid var(--color-border-subtle);display:flex;gap:var(--space-6);margin-bottom:var(--space-8)}.nav--sub,.nav--sub .nav__item,.nav--sub .nav__link{padding-bottom:var(--space-2)}.nav--sub .nav__item--active:after,.nav--sub .nav__link--active:after{background-color:var(--color-accent);bottom:calc(var(--border-width)*-1);content:"";height:var(--tab-indicator-height);left:0;position:absolute;width:100%}.nav--sub .nav__item--disabled,.nav--sub .nav__link--disabled{opacity:.45;pointer-events:none}.nav--sub .nav__item:focus-visible,.nav--sub .nav__link:focus-visible{border-radius:var(--radius-sm);box-shadow:0 0 0 1px var(--color-surface),0 0 0 3px var(--focus-ring-color);outline:none}.nav--pills{display:flex;flex-wrap:wrap;gap:var(--space-2)}.nav--pills .nav__item,.nav--pills .nav__link{background-color:var(--color-surface);border:var(--border-width) solid var(--color-border-subtle);border-radius:999px;font-size:var(--text-xs);padding:var(--space-1) var(--space-3)}.nav--pills .nav__item:hover,.nav--pills .nav__link:hover{background-color:var(--color-surface-subtle);border-color:var(--color-border-subtle)}.nav--pills .nav__item--active,.nav--pills .nav__link--active{background-color:var(--color-accent-soft);border-color:var(--color-accent);color:var(--color-text)}.nav--pills .nav__item--disabled,.nav--pills .nav__link--disabled{opacity:.45;pointer-events:none}.nav--pills .nav__item:focus-visible,.nav--pills .nav__link:focus-visible{box-shadow:0 0 0 1px var(--color-surface),0 0 0 3px var(--focus-ring-color);outline:none}.nav--vertical{display:flex;flex-direction:column;gap:var(--space-2)}.nav--vertical .nav__item,.nav--vertical .nav__link{padding:var(--space-1) 0}.nav--vertical .nav__item--depth-2,.nav--vertical .nav__link--depth-2{padding-left:var(--space-4)}.nav--vertical .nav__item--depth-3,.nav--vertical .nav__link--depth-3{padding-left:var(--space-6)}.sidebar{gap:var(--space-4)}.sidebar,.sidebar__section{display:flex;flex-direction:column}.sidebar__section{gap:var(--space-2)}.sidebar__section--collapsible .sidebar__section-header{align-items:center;display:flex;gap:var(--space-2);justify-content:space-between}.sidebar__section-title{color:var(--color-text-muted);font-size:var(--text-xs);letter-spacing:.04em;text-transform:uppercase}.sidebar__section-toggle-icon{align-items:center;display:inline-flex;justify-content:center;transition:transform .15s ease}.sidebar__section--expanded .sidebar__section-toggle-icon{transform:rotate(90deg)}.sidebar__section--collapsed .sidebar__nav{display:none}.sidebar__nav{display:flex;flex-direction:column;gap:var(--space-1)}.sidebar__nav .nav__item,.sidebar__nav .nav__link{border-radius:var(--radius-sm);color:var(--color-text);cursor:pointer;font-size:var(--text-sm);padding:var(--space-1) 0;-webkit-text-decoration:underline;text-decoration:underline}.sidebar__nav .nav__item:hover,.sidebar__nav .nav__link:hover{background-color:var(--color-surface-subtle);color:var(--color-text-muted);-webkit-text-decoration:none;text-decoration:none}.sidebar__nav .nav__item--active,.sidebar__nav .nav__link--active{color:var(--color-accent);font-weight:600}.sidebar__section--collapsible .sidebar__section-header{cursor:pointer}.sidebar__nav .nav__item:focus-visible,.sidebar__nav .nav__link:focus-visible{outline:2px solid var(--focus-ring-color,var(--color-accent-soft));outline-offset:var(--space-1)}.announcement{background-color:var(--color-muted-bg);border-bottom:var(--border-width) solid var(--color-muted-border);color:var(--color-text-muted);padding:var(--space-2) 0;width:100%}.announcement__inner{align-items:center;display:flex;gap:var(--space-4);justify-content:space-between;margin:0 auto;max-width:var(--content-width-xl);padding:0 var(--space-6)}.announcement__content{align-items:center;display:flex;gap:var(--space-2)}.announcement__icon{align-items:center;display:inline-flex;font-size:var(--text-sm);justify-content:center}.announcement__link,.announcement__text{font-size:var(--text-xs)}.announcement__link{color:var(--color-text);-webkit-text-decoration:none;text-decoration:none}.announcement__link:hover{-webkit-text-decoration:underline;text-decoration:underline}.announcement__close{align-items:center;background-color:transparent;border:var(--border-width) solid transparent;border-radius:var(--radius-sm);cursor:pointer;display:inline-flex;justify-content:center;padding:var(--space-1);transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease}.announcement__close:hover{background-color:var(--color-surface-subtle);border-color:var(--color-border-subtle)}.announcement__close:focus-visible{box-shadow:0 0 0 1px var(--color-surface),0 0 0 3px var(--focus-ring-color);outline:none}.announcement--info{background-color:var(--color-info-soft);color:var(--color-info-strong)}.announcement--success{background-color:var(--color-success-soft);color:var(--color-success-strong)}.announcement--warning{background-color:var(--color-warning-soft);color:var(--color-warning-strong)}.announcement--danger{background-color:var(--color-danger-soft);color:var(--color-danger-strong)}.breadcrumbs{align-items:center;color:var(--color-text-muted);display:flex;flex-wrap:wrap;font-size:var(--text-xs);gap:var(--space-2)}.breadcrumbs__item{align-items:center;display:inline-flex;gap:var(--space-1);max-width:100%}.breadcrumbs__link{color:var(--color-text);max-width:16rem;overflow:hidden;-webkit-text-decoration:underline;text-decoration:underline;text-overflow:ellipsis;white-space:nowrap}.breadcrumbs__link:hover{color:var(--color-text-muted)}.breadcrumbs__link:focus-visible{border-radius:var(--radius-sm);box-shadow:0 0 0 1px var(--color-surface),0 0 0 3px var(--focus-ring-color);outline:none}.breadcrumbs__separator{color:var(--color-text-soft)}.pagination{--pagination-gap:var(--space-1);--pagination-item-height:2rem;--pagination-item-min-width:2rem;--pagination-item-padding-x:var(--space-2);--pagination-item-radius:var(--radius-sm);--pagination-item-border:var(--border-width) solid var(--color-border-subtle);--pagination-item-bg:var(--color-surface);--pagination-item-color:var(--color-text);align-items:center;display:inline-flex;flex-wrap:wrap;font-size:var(--text-xs);gap:var(--pagination-gap)}.pagination--compact{--pagination-gap:var(--space-0_5);--pagination-item-height:1.75rem;--pagination-item-min-width:1.75rem;--pagination-item-padding-x:var(--space-1_5);font-size:var(--text-xxs)}.pagination--spacious{--pagination-gap:var(--space-2);--pagination-item-height:2.5rem;--pagination-item-min-width:2.5rem;--pagination-item-padding-x:var(--space-3);font-size:var(--text-sm)}.pagination--minimal .pagination__item{background-color:transparent;border-color:transparent}.pagination--minimal .pagination__item:hover{background-color:var(--color-surface-subtle);border-color:transparent}.pagination--back-forward{gap:var(--space-3)}.pagination--load-more{gap:var(--space-3);justify-content:center;width:100%}.pagination__meta,.pagination__status{color:var(--color-text-muted);font-size:var(--text-xs)}.pagination__item,.pagination__meta,.pagination__status{align-items:center;display:inline-flex;gap:var(--space-1);white-space:nowrap}.pagination__item{background-color:var(--pagination-item-bg);border:var(--pagination-item-border);border-radius:var(--pagination-item-radius);color:var(--pagination-item-color);cursor:pointer;height:var(--pagination-item-height);justify-content:center;min-width:var(--pagination-item-min-width);padding:0 var(--pagination-item-padding-x);-webkit-text-decoration:none;text-decoration:none;transition:background-color .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease}.pagination__item:hover{background-color:var(--color-surface-subtle);border-color:var(--color-border-subtle);color:var(--color-text)}.pagination__item:active{background-color:var(--color-muted-bg)}.pagination__item:focus-visible{box-shadow:0 0 0 1px var(--color-surface),0 0 0 3px var(--focus-ring-color);outline:none}.pagination__item--active{background-color:var(--color-accent-soft);border-color:var(--color-accent);color:var(--color-text)}.pagination__item--disabled{cursor:not-allowed;opacity:.4;pointer-events:none}.pagination__next,.pagination__prev{min-width:auto;padding:0 var(--space-2)}.pagination__ellipsis{background-color:transparent;border:none;color:var(--color-text-muted);cursor:default;min-width:auto;pointer-events:none}.toolbar{align-items:center;background-color:var(--color-surface);border:var(--border-width) solid var(--color-border-subtle);border-radius:var(--radius-md);display:flex;gap:var(--space-4);justify-content:space-between;padding:var(--space-3) var(--space-4)}.toolbar--dense{padding:var(--space-2) var(--space-3)}.toolbar--spacious{padding:var(--space-4) var(--space-5)}.toolbar__section{align-items:center;display:flex;gap:var(--space-3)}.toolbar__title{font-size:var(--text-sm);font-weight:500}.toolbar__actions{align-items:center;display:inline-flex;gap:var(--space-3)}.footer .nav{display:flex;flex-direction:column;gap:var(--space-2)}.footer .nav.nav--vertical{align-items:flex-start}.footer .nav__item,.footer .nav__link{color:var(--color-footer-text);font-size:var(--text-sm);opacity:.85;padding-left:0;padding-right:0;text-align:left}.footer .nav__item:hover,.footer .nav__link:hover{opacity:1}.footer .nav__item--active,.footer .nav__link--active{font-weight:500;opacity:1}.nav-panel{background-color:var(--color-bg-elevated);border-left:var(--border-width) solid var(--color-border-subtle);bottom:0;box-shadow:var(--shadow-2);display:flex;flex-direction:column;gap:var(--space-4);max-width:100%;opacity:0;padding:var(--space-4);pointer-events:none;position:fixed;right:0;top:0;transform:translateX(100%);transition:transform .2s ease,opacity .2s ease;width:18rem;z-index:40}.nav-panel--open{opacity:1;pointer-events:auto;transform:translateX(0)}.nav-backdrop{background-color:var(--overlay-backdrop-default);bottom:0;left:0;opacity:0;pointer-events:none;position:fixed;right:0;top:0;transition:opacity .2s ease;z-index:30}.nav-backdrop--visible{opacity:1;pointer-events:auto}.nav--mobile{display:flex;flex-direction:column;gap:var(--space-4)}.nav--mobile .nav__item,.nav--mobile .nav__link{font-size:var(--text-md);padding:var(--space-2) 0}@media (max-width:768px){.nav__toggle{align-items:center;display:inline-flex}}.nav-tabs{align-items:center;border-bottom:var(--border-width) solid var(--color-border-subtle);display:flex;gap:var(--space-6);padding-bottom:var(--space-2)}.nav-tabs__item{align-items:center;background:none;border:none;color:var(--color-text);cursor:pointer;display:inline-flex;font-size:var(--text-sm);font-weight:500;justify-content:center;padding:var(--space-1) var(--space-2);position:relative;-webkit-text-decoration:none;text-decoration:none;transition:color .15s ease,background-color .15s ease,box-shadow .15s ease}.nav-tabs__item:hover{color:var(--color-text-muted)}.nav-tabs__item:focus-visible{border-radius:var(--radius-sm);box-shadow:0 0 0 1px var(--color-surface),0 0 0 3px var(--focus-ring-color);outline:none}.nav-tabs__item--active,.nav-tabs__item[aria-selected=true]{color:var(--color-text);font-weight:600}.nav-tabs__item--active:after,.nav-tabs__item[aria-selected=true]:after{background-color:var(--color-accent);bottom:calc(var(--border-width)*-1);content:"";height:var(--tab-indicator-height);left:0;position:absolute;width:100%}.nav-tabs__item--disabled,.nav-tabs__item[disabled]{cursor:not-allowed;opacity:.45;pointer-events:none}.nav-tabs__item:hover:not(.nav-tabs__item--active):not([aria-selected=true]){background-color:var(--color-surface-subtle);border-radius:var(--radius-sm);color:var(--color-text)}.nav-tabs--compact{gap:var(--space-4);padding-bottom:var(--space-1)}.nav-tabs--compact .nav-tabs__item{font-size:var(--text-xs);padding:var(--space-0_5) 0}.nav-tabs__item{gap:var(--space-2)}.nav-tabs__icon{flex-shrink:0;height:var(--icon-sm);width:var(--icon-sm)}.nav-tabs__badge{align-items:center;background-color:var(--accent-soft-surface,var(--color-accent-soft));border-radius:var(--radius-pill);color:var(--accent-soft-on,var(--color-on-accent));display:inline-flex;flex-shrink:0;font-size:var(--text-xs);font-weight:500;height:1.25rem;justify-content:center;line-height:1;min-width:1.25rem;padding-left:var(--space-1);padding-right:var(--space-1)}.nav-tabs__item--active .nav-tabs__badge,.nav-tabs__item[aria-selected=true] .nav-tabs__badge{background-color:var(--accent-soft-surface-strong,var(--accent-soft-surface));color:var(--accent-soft-on,var(--color-on-accent))}