@syscore/ui-library 1.25.0 → 2.0.0

package/client/global.css

@@ -1311,21 +1311,319 @@ body {
   }
 }
 
+/* ============================================================
+   Layout Primitives — Stack, Grid, Container, Section
+   ============================================================ */
+
+/* Stack */
+.stack {
+  display: flex;
+  flex-direction: column;
+}
+
+.stack--horizontal {
+  flex-direction: row;
+}
+
+.stack--wrap {
+  flex-wrap: wrap;
+}
+
+.stack--align-start    { align-items: flex-start; }
+.stack--align-center   { align-items: center; }
+.stack--align-end      { align-items: flex-end; }
+.stack--align-stretch  { align-items: stretch; }
+.stack--align-baseline { align-items: baseline; }
+
+.stack--justify-start   { justify-content: flex-start; }
+.stack--justify-center  { justify-content: center; }
+.stack--justify-end     { justify-content: flex-end; }
+.stack--justify-between { justify-content: space-between; }
+.stack--justify-around  { justify-content: space-around; }
+.stack--justify-evenly  { justify-content: space-evenly; }
+
+/* Grid */
+.grid-layout {
+  display: grid;
+}
+
+.grid-layout--cols-1  { grid-template-columns: repeat(1, minmax(0, 1fr)); }
+.grid-layout--cols-2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+.grid-layout--cols-3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+.grid-layout--cols-4  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+.grid-layout--cols-6  { grid-template-columns: repeat(6, minmax(0, 1fr)); }
+.grid-layout--cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
+
+@media (min-width: 640px) {
+  .grid-layout--sm-cols-1  { grid-template-columns: repeat(1, minmax(0, 1fr)); }
+  .grid-layout--sm-cols-2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .grid-layout--sm-cols-3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+  .grid-layout--sm-cols-4  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+  .grid-layout--sm-cols-6  { grid-template-columns: repeat(6, minmax(0, 1fr)); }
+  .grid-layout--sm-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
+}
+
+@media (min-width: 768px) {
+  .grid-layout--md-cols-1  { grid-template-columns: repeat(1, minmax(0, 1fr)); }
+  .grid-layout--md-cols-2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .grid-layout--md-cols-3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+  .grid-layout--md-cols-4  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+  .grid-layout--md-cols-6  { grid-template-columns: repeat(6, minmax(0, 1fr)); }
+  .grid-layout--md-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
+}
+
+@media (min-width: 1024px) {
+  .grid-layout--lg-cols-1  { grid-template-columns: repeat(1, minmax(0, 1fr)); }
+  .grid-layout--lg-cols-2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .grid-layout--lg-cols-3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+  .grid-layout--lg-cols-4  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+  .grid-layout--lg-cols-6  { grid-template-columns: repeat(6, minmax(0, 1fr)); }
+  .grid-layout--lg-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
+}
+
+/* Container */
+.container-layout {
+  width: 100%;
+}
+
+.container-layout--center {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.container-layout--padded {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+@media (min-width: 640px) {
+  .container-layout--padded {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .container-layout--padded {
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+}
+
+.container-layout--sm  { max-width: 640px; }
+.container-layout--md  { max-width: 768px; }
+.container-layout--lg  { max-width: 1024px; }
+.container-layout--xl  { max-width: 1280px; }
+.container-layout--2xl { max-width: 1536px; }
+.container-layout--full { max-width: 100%; }
+
+/* Section */
+.section-layout {
+  width: 100%;
+}
+
+.section-layout--sm  { padding-top: 2rem;    padding-bottom: 2rem; }
+.section-layout--md  { padding-top: 3rem;    padding-bottom: 3rem; }
+.section-layout--lg  { padding-top: 4rem;    padding-bottom: 4rem; }
+.section-layout--xl  { padding-top: 6rem;    padding-bottom: 6rem; }
+
+@media (min-width: 768px) {
+  .section-layout--sm  { padding-top: 3rem;    padding-bottom: 3rem; }
+  .section-layout--md  { padding-top: 4rem;    padding-bottom: 4rem; }
+  .section-layout--lg  { padding-top: 6rem;    padding-bottom: 6rem; }
+  .section-layout--xl  { padding-top: 8rem;    padding-bottom: 8rem; }
+}
+
+/* Columns */
+.columns-layout {
+  display: grid;
+}
+
+@media (max-width: 639px) {
+  .columns-layout--collapse-sm { grid-template-columns: 1fr !important; }
+}
+@media (max-width: 767px) {
+  .columns-layout--collapse-md { grid-template-columns: 1fr !important; }
+}
+@media (max-width: 1023px) {
+  .columns-layout--collapse-lg { grid-template-columns: 1fr !important; }
+}
+
+/* AppShell */
+.app-shell {
+  --app-shell-header-height: 4rem;
+  --app-shell-sidebar-width: 17.5rem;
+  display: grid;
+  min-height: 100vh;
+  grid-template-rows: var(--app-shell-header-height) 1fr;
+  grid-template-columns: var(--app-shell-sidebar-width) 1fr;
+  grid-template-areas:
+    "header header"
+    "sidebar main";
+}
+
+.app-shell-header {
+  grid-area: header;
+  position: sticky;
+  top: 0;
+  z-index: 40;
+  background-color: hsl(var(--background));
+  border-bottom: 1px solid var(--color-gray-100, #eff1f2);
+  display: flex;
+  align-items: center;
+  padding: 0 1.5rem;
+}
+
+.app-shell-sidebar {
+  grid-area: sidebar;
+  position: sticky;
+  top: var(--app-shell-header-height);
+  height: calc(100vh - var(--app-shell-header-height));
+  overflow-y: auto;
+  border-right: 1px solid var(--color-gray-100, #eff1f2);
+  background-color: hsl(var(--background));
+}
+
+.app-shell-main {
+  grid-area: main;
+  overflow-y: auto;
+  min-height: 0;
+}
+
+.app-shell-footer {
+  grid-area: footer;
+  border-top: 1px solid var(--color-gray-100, #eff1f2);
+}
+
+/* Show / Hide — responsive visibility */
+.show-above-sm { display: none; }
+@media (min-width: 640px)  { .show-above-sm  { display: revert; } }
+
+.show-above-md { display: none; }
+@media (min-width: 768px)  { .show-above-md  { display: revert; } }
+
+.show-above-lg { display: none; }
+@media (min-width: 1024px) { .show-above-lg  { display: revert; } }
+
+.show-above-xl { display: none; }
+@media (min-width: 1280px) { .show-above-xl  { display: revert; } }
+
+.show-below-sm { display: revert; }
+@media (min-width: 640px)  { .show-below-sm  { display: none; } }
+
+.show-below-md { display: revert; }
+@media (min-width: 768px)  { .show-below-md  { display: none; } }
+
+.show-below-lg { display: revert; }
+@media (min-width: 1024px) { .show-below-lg  { display: none; } }
+
+.show-below-xl { display: revert; }
+@media (min-width: 1280px) { .show-below-xl  { display: none; } }
+
+.hide-above-sm { display: revert; }
+@media (min-width: 640px)  { .hide-above-sm  { display: none; } }
+
+.hide-above-md { display: revert; }
+@media (min-width: 768px)  { .hide-above-md  { display: none; } }
+
+.hide-above-lg { display: revert; }
+@media (min-width: 1024px) { .hide-above-lg  { display: none; } }
+
+.hide-above-xl { display: revert; }
+@media (min-width: 1280px) { .hide-above-xl  { display: none; } }
+
+.hide-below-sm { display: none; }
+@media (min-width: 640px)  { .hide-below-sm  { display: revert; } }
+
+.hide-below-md { display: none; }
+@media (min-width: 768px)  { .hide-below-md  { display: revert; } }
+
+.hide-below-lg { display: none; }
+@media (min-width: 1024px) { .hide-below-lg  { display: revert; } }
+
+.hide-below-xl { display: none; }
+@media (min-width: 1280px) { .hide-below-xl  { display: revert; } }
+
+/* Positioned */
+.positioned--relative { position: relative; }
+.positioned--absolute { position: absolute; }
+.positioned--fixed    { position: fixed; }
+.positioned--sticky   { position: sticky; }
+
+/* ============================================================ */
+
 /* Card Styles */
 .card {
   border-radius: var(--radius-lg, 12px);
-  border: 1px solid var(--color-gray-100, #eff1f2);
-  background-color: var(--color-cyan-50, #fafeff);
   padding: 1.5rem;
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
+  position: relative;
+  overflow: hidden;
+}
+
+/* Card Variants */
+.card--default {
+  border: 1px solid var(--color-gray-100, #eff1f2);
+  background-color: var(--color-cyan-50, #fafeff);
+}
+
+.card--outlined {
+  border: 1px solid var(--color-gray-200, #dedfe3);
+  background-color: var(--color-white, #fff);
+}
+
+.card--elevated {
+  border: none;
+  background-color: var(--color-white, #fff);
+  box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(16, 24, 40, 0.1), 0 2px 4px -2px rgba(16, 24, 40, 0.1));
+}
+
+.card--filled {
+  border: none;
+  background-color: var(--color-gray-900, #171820);
+  color: var(--color-white, #fff);
+}
+
+.card--filled .card-title,
+.card--filled .card-description,
+.card--filled .card-content,
+.card--filled .card-footer {
+  color: var(--color-white, #fff);
+}
+
+.card--filled .card-description,
+.card--filled .card-footer {
+  color: var(--color-gray-300, #cbcdd2);
+}
+
+.card--interactive {
+  border: 1px solid var(--color-gray-100, #eff1f2);
+  background-color: var(--color-white, #fff);
+  cursor: pointer;
+  transition:
+    transform 200ms ease-in-out,
+    border-color 200ms ease-in-out,
+    box-shadow 200ms ease-in-out;
+  will-change: transform;
+}
+
+.card--interactive:hover {
+  transform: scale(1.02);
+  border-color: var(--color-gray-200, #dedfe3);
+  box-shadow: var(--shadow-sm, 0 1px 3px 0 rgba(16, 24, 40, 0.1));
+}
+
+.card--interactive:active {
+  transform: scale(0.99);
 }
 
+/* Card Sub-components */
 .card-header {
   display: flex;
   flex-direction: column;
-  gap: 1.5rem;
+  gap: 0.5rem;
 }
 
 .card-title {
@@ -1333,7 +1631,7 @@ body {
 }
 
 .card-description {
-  color: var(--color-gray-800, #282a31);
+  color: var(--color-gray-600, #52545d);
 }
 
 .card-content {
@@ -1346,20 +1644,111 @@ body {
   color: var(--color-gray-800, #282a31);
 }
 
-.card-with-icon {
-  border: 1px solid var(--color-gray-100, #eff1f2);
-  background-color: var(--color-white, #fff);
-  padding: 1.5rem;
-  gap: 1.5rem;
-  transition:
-    transform 200ms ease-in-out,
-    border-color 200ms ease-in-out;
-  will-change: transform;
+/* Card Media */
+.card-media {
+  margin: -1.5rem -1.5rem 0 -1.5rem;
+  overflow: hidden;
 }
 
-.card-with-icon:hover {
-  transform: scale(1.02);
-  border-color: var(--color-gray-200, #dedfe3);
+.card-media__img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+/* Card Badge */
+.card-badge {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  display: inline-flex;
+  align-items: center;
+  padding: 0.25rem 0.625rem;
+  border-radius: 999px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  line-height: 1.25;
+}
+
+.card-badge--default {
+  background-color: var(--color-gray-100, #eff1f2);
+  color: var(--color-gray-700, #3e4049);
+}
+
+.card-badge--success {
+  background-color: #dcfce7;
+  color: #166534;
+}
+
+.card-badge--warning {
+  background-color: #fef9c3;
+  color: #854d0e;
+}
+
+.card-badge--error {
+  background-color: #fee2e2;
+  color: #991b1b;
+}
+
+.card-badge--info {
+  background-color: var(--color-cyan-100, #d6f4fb);
+  color: var(--color-cyan-800, #0f748a);
+}
+
+/* Card Actions */
+.card-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding-top: 0.5rem;
+  border-top: 1px solid var(--color-gray-100, #eff1f2);
+  margin-top: auto;
+}
+
+/* Card Metric */
+.card-metric {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.card-metric__value {
+  font-size: 2.25rem;
+  font-weight: 700;
+  line-height: 1;
+  color: var(--color-gray-900, #171820);
+}
+
+.card-metric__label {
+  font-size: 0.875rem;
+  color: var(--color-gray-500, #71747d);
+}
+
+.card-metric__trend {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  margin-top: 0.25rem;
+}
+
+.card-metric__trend--up {
+  color: #16a34a;
+}
+
+.card-metric__trend--down {
+  color: #dc2626;
+}
+
+.card-metric__trend--neutral {
+  color: var(--color-gray-500, #71747d);
+}
+
+/* Card With Icon */
+.card-with-icon {
+  gap: 1.5rem;
 }
 
 .card-with-icon__header {
@@ -1654,42 +2043,165 @@ body {
   line-height: 1.625;
 }
 
-/* Avatar Styles */
-.avatar {
+/* Banner Styles */
+.banner {
   position: relative;
+  width: 100%;
   display: flex;
-  height: 2.5rem;
-  width: 2.5rem;
-  flex-shrink: 0;
-  overflow: hidden;
-  border-radius: 9999px;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
 }
 
-.avatar-image {
-  aspect-ratio: 1 / 1;
-  height: 100%;
-  width: 100%;
+.banner--sticky {
+  position: sticky;
+  top: 0;
+  z-index: 40;
 }
 
-.avatar-fallback {
+.banner-content {
+  flex: 1;
   display: flex;
-  height: 100%;
-  width: 100%;
   align-items: center;
-  justify-content: center;
-  border-radius: 9999px;
-  background-color: hsl(var(--muted));
+  gap: 0.75rem;
+  flex-wrap: wrap;
 }
 
-/* Tag Styles */
-.status-tag {
-  display: inline-flex;
+.banner-icon {
+  display: flex;
   align-items: center;
-  padding: 8px;
-  border-radius: calc(var(--radius-sm, 6px));
-  width: fit-content;
-  cursor: pointer;
-  transition: all 0.2s ease-in-out;
+  flex-shrink: 0;
+}
+
+.banner-icon svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+.banner-text {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+  flex: 1;
+}
+
+.banner-title {
+  font-weight: 600;
+  margin: 0;
+}
+
+.banner-description {
+  margin: 0;
+  opacity: 0.9;
+}
+
+.banner-action {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.25rem 0.75rem;
+  border-radius: var(--radius-sm, 6px);
+  font-size: 0.8125rem;
+  font-weight: 500;
+  border: 1px solid currentColor;
+  background: transparent;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: opacity 0.15s ease;
+}
+
+.banner-action:hover {
+  opacity: 0.8;
+}
+
+.banner-close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 1.5rem;
+  height: 1.5rem;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  border-radius: var(--radius-sm, 4px);
+  opacity: 0.7;
+  transition: opacity 0.15s ease;
+  color: inherit;
+  padding: 0;
+}
+
+.banner-close:hover {
+  opacity: 1;
+}
+
+/* Banner Variants */
+.banner--default {
+  background-color: hsl(var(--foreground));
+  color: hsl(var(--background));
+}
+
+.banner--info {
+  background-color: hsl(var(--primary) / 0.12);
+  color: hsl(var(--primary));
+  border-left: 3px solid hsl(var(--primary));
+}
+
+.banner--success {
+  background-color: hsl(142 71% 45% / 0.12);
+  color: hsl(142 71% 29%);
+  border-left: 3px solid hsl(142 71% 45%);
+}
+
+.banner--warning {
+  background-color: hsl(38 92% 50% / 0.12);
+  color: hsl(38 92% 30%);
+  border-left: 3px solid hsl(38 92% 50%);
+}
+
+.banner--destructive {
+  background-color: hsl(var(--destructive) / 0.12);
+  color: hsl(var(--destructive));
+  border-left: 3px solid hsl(var(--destructive));
+}
+
+/* Avatar Styles */
+.avatar {
+  position: relative;
+  display: flex;
+  height: 2.5rem;
+  width: 2.5rem;
+  flex-shrink: 0;
+  overflow: hidden;
+  border-radius: 9999px;
+}
+
+.avatar-image {
+  aspect-ratio: 1 / 1;
+  height: 100%;
+  width: 100%;
+}
+
+.avatar-fallback {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+  background-color: hsl(var(--muted));
+}
+
+/* Tag Styles */
+.status-tag {
+  display: inline-flex;
+  align-items: center;
+  padding: 8px;
+  border-radius: calc(var(--radius-sm, 6px));
+  width: fit-content;
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
 }
 
 .status-tag:focus-visible {
@@ -7647,3 +8159,1754 @@ body {
 .navigation-account__icon--dark {
   color: var(--color-bronze-100, #fbf8f3);
 }
+
+/* File Upload Styles */
+.file-upload {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  width: 100%;
+}
+
+.file-upload-zone {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  border: 1.5px dashed var(--color-gray-200, #d5d9dc);
+  border-radius: 0.75rem;
+  background-color: var(--color-gray-50, #f7f8f9);
+  cursor: pointer;
+  transition: border-color 0.15s ease, background-color 0.15s ease;
+  outline: none;
+  padding: 2rem 1.5rem;
+}
+
+.file-upload-zone:hover:not(.file-upload-zone--disabled),
+.file-upload-zone:focus-visible:not(.file-upload-zone--disabled) {
+  border-color: var(--color-cyan-400, #22d3ee);
+  background-color: var(--color-cyan-50, #fafeff);
+}
+
+.file-upload-zone--dragging {
+  border-color: var(--color-cyan-400, #22d3ee);
+  background-color: var(--color-cyan-50, #fafeff);
+}
+
+.file-upload-zone--compact {
+  padding: 1rem 1.5rem;
+  border-radius: 0.5rem;
+}
+
+.file-upload-zone--disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+  background-color: var(--color-gray-100, #eff1f2);
+}
+
+.file-upload-input {
+  display: none;
+}
+
+/* Default variant inner layout */
+.file-upload-default-inner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.75rem;
+  text-align: center;
+}
+
+.file-upload-icon-circle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 9999px;
+  background-color: var(--color-cyan-100, #cffafe);
+  color: var(--color-cyan-600, #0891b2);
+  font-size: 1.125rem;
+}
+
+.file-upload-zone-body {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  align-items: center;
+}
+
+/* Compact variant inner layout */
+.file-upload-compact-inner {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.file-upload-icon {
+  font-size: 1rem;
+  color: var(--color-gray-400, #9ba6af);
+}
+
+.file-upload-zone-text {
+  font-size: 0.875rem;
+  color: var(--color-gray-600, #5c6a74);
+  line-height: 1.4;
+}
+
+.file-upload-zone-link {
+  color: var(--color-cyan-600, #0891b2);
+  font-weight: 500;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.file-upload-hint {
+  font-size: 0.75rem;
+  color: var(--color-gray-400, #9ba6af);
+}
+
+/* File list */
+.file-upload-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.file-upload-item {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.625rem 0.875rem;
+  border-radius: 0.5rem;
+  border: 1px solid var(--color-gray-100, #eff1f2);
+  background-color: var(--color-white, #fff);
+}
+
+.file-upload-item--error {
+  border-color: var(--color-red-200, #fecaca);
+  background-color: var(--color-red-50, #fef2f2);
+}
+
+.file-upload-item-icon {
+  font-size: 1.25rem;
+  flex-shrink: 0;
+  line-height: 1;
+}
+
+.file-upload-item-info {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+  flex: 1;
+  min-width: 0;
+}
+
+.file-upload-item-name {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--color-gray-800, #2d3c46);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.file-upload-item-size {
+  font-size: 0.75rem;
+  color: var(--color-gray-400, #9ba6af);
+}
+
+.file-upload-item-error {
+  font-size: 0.75rem;
+  color: var(--color-red-500, #ef4444);
+}
+
+.file-upload-item-remove {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  border-radius: 9999px;
+  border: none;
+  background: transparent;
+  color: var(--color-gray-400, #9ba6af);
+  font-size: 0.75rem;
+  cursor: pointer;
+  transition: background-color 0.15s ease, color 0.15s ease;
+  line-height: 1;
+}
+
+.file-upload-item-remove:hover {
+  background-color: var(--color-gray-100, #eff1f2);
+  color: var(--color-gray-700, #3f5260);
+}
+
+/* DatePicker Styles */
+.date-picker-trigger {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  width: 100%;
+  height: 3rem;
+  padding: 0 1rem;
+  border: 1px solid var(--color-gray-200, #d5d9dc);
+  border-radius: 0.5rem;
+  background-color: var(--color-white, #fff);
+  font-size: 0.875rem;
+  color: var(--color-gray-800, #2d3c46);
+  cursor: pointer;
+  text-align: left;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+  outline: none;
+}
+
+.date-picker-trigger:hover:not(.date-picker-trigger--disabled) {
+  border-color: var(--color-gray-400, #9ba6af);
+}
+
+.date-picker-trigger:focus-visible:not(.date-picker-trigger--disabled) {
+  border-color: var(--color-cyan-400, #22d3ee);
+  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.15);
+}
+
+.date-picker-trigger--placeholder .date-picker-value {
+  color: var(--color-gray-400, #9ba6af);
+}
+
+.date-picker-trigger--disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+  background-color: var(--color-gray-50, #f7f8f9);
+}
+
+.date-picker-icon {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  color: var(--color-gray-400, #9ba6af);
+}
+
+.date-picker-value {
+  flex: 1;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.date-picker-chevron {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  color: var(--color-gray-400, #9ba6af);
+  margin-left: auto;
+}
+
+.date-picker-popover {
+  padding: 0;
+  width: auto;
+}
+
+/* Stepper Styles */
+.stepper {
+  display: flex;
+  width: 100%;
+}
+
+.stepper--horizontal {
+  flex-direction: row;
+  align-items: flex-start;
+}
+
+.stepper--vertical {
+  flex-direction: column;
+}
+
+/* Size tokens */
+.stepper--sm { --stepper-indicator-size: 1.5rem; --stepper-font-size: 0.75rem; }
+.stepper--md { --stepper-indicator-size: 2rem;   --stepper-font-size: 0.875rem; }
+.stepper--lg { --stepper-indicator-size: 2.5rem; --stepper-font-size: 1rem; }
+
+/* ---------------------------------------------------------------------------
+   Stepper Item
+--------------------------------------------------------------------------- */
+.stepper-item {
+  display: flex;
+  position: relative;
+}
+
+/* Horizontal: each item is a column (indicator on top, label below) */
+.stepper--horizontal .stepper-item {
+  flex-direction: column;
+  align-items: center;
+  flex: 1;
+}
+
+/* Vertical: each item is a row (indicator on left, label on right) */
+.stepper--vertical .stepper-item {
+  flex-direction: row;
+  align-items: flex-start;
+  gap: 0.75rem;
+}
+
+/* ---------------------------------------------------------------------------
+   Indicator Row (holds the circle + connector line)
+--------------------------------------------------------------------------- */
+.stepper-indicator-row {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  position: relative;
+}
+
+.stepper--vertical .stepper-indicator-row {
+  flex-direction: column;
+  align-items: center;
+  width: auto;
+}
+
+/* ---------------------------------------------------------------------------
+   Indicator (the circle)
+--------------------------------------------------------------------------- */
+.stepper-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--stepper-indicator-size);
+  height: var(--stepper-indicator-size);
+  border-radius: 9999px;
+  border: 2px solid transparent;
+  font-size: var(--stepper-font-size);
+  font-weight: 600;
+  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
+  cursor: default;
+  background: none;
+  padding: 0;
+  line-height: 1;
+  z-index: 1;
+}
+
+/* Complete */
+.stepper-indicator--complete.stepper-indicator--default {
+  background-color: var(--color-cyan-600, #0891b2);
+  border-color: var(--color-cyan-600, #0891b2);
+  color: #fff;
+}
+.stepper-indicator--complete.stepper-indicator--outlined {
+  background-color: transparent;
+  border-color: var(--color-cyan-600, #0891b2);
+  color: var(--color-cyan-600, #0891b2);
+}
+
+/* Current */
+.stepper-indicator--current.stepper-indicator--default {
+  background-color: var(--color-cyan-600, #0891b2);
+  border-color: var(--color-cyan-600, #0891b2);
+  color: #fff;
+}
+.stepper-indicator--current.stepper-indicator--outlined {
+  background-color: transparent;
+  border-color: var(--color-cyan-600, #0891b2);
+  color: var(--color-cyan-600, #0891b2);
+}
+
+/* Upcoming */
+.stepper-indicator--upcoming.stepper-indicator--default {
+  background-color: var(--color-gray-100, #eff1f2);
+  border-color: var(--color-gray-200, #d5d9dc);
+  color: var(--color-gray-400, #9ba6af);
+}
+.stepper-indicator--upcoming.stepper-indicator--outlined {
+  background-color: transparent;
+  border-color: var(--color-gray-300, #bec6cb);
+  color: var(--color-gray-400, #9ba6af);
+}
+
+.stepper-indicator--clickable {
+  cursor: pointer;
+}
+.stepper-indicator--clickable:hover {
+  opacity: 0.8;
+}
+
+.stepper-indicator-number {
+  line-height: 1;
+}
+
+/* ---------------------------------------------------------------------------
+   Connector line
+--------------------------------------------------------------------------- */
+.stepper-connector {
+  background-color: var(--color-gray-200, #d5d9dc);
+  transition: background-color 0.2s ease;
+}
+
+.stepper-connector--complete {
+  background-color: var(--color-cyan-600, #0891b2);
+}
+
+/* Horizontal connector */
+.stepper-connector--horizontal {
+  flex: 1;
+  height: 2px;
+  margin: 0 0.5rem;
+}
+
+/* Vertical connector */
+.stepper-connector--vertical {
+  width: 2px;
+  flex: 1;
+  min-height: 2rem;
+  margin: 0.25rem 0;
+}
+
+/* ---------------------------------------------------------------------------
+   Label
+--------------------------------------------------------------------------- */
+.stepper-label {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+}
+
+.stepper--horizontal .stepper-label {
+  align-items: center;
+  text-align: center;
+  margin-top: 0.5rem;
+  padding: 0 0.25rem;
+}
+
+.stepper--vertical .stepper-label {
+  padding-bottom: 1.5rem;
+}
+
+.stepper-title {
+  font-size: var(--stepper-font-size);
+  font-weight: 600;
+  line-height: 1.4;
+  transition: color 0.15s ease;
+}
+
+.stepper-title--complete  { color: var(--color-gray-700, #3f5260); }
+.stepper-title--current   { color: var(--color-gray-900, #1a282f); }
+.stepper-title--upcoming  { color: var(--color-gray-400, #9ba6af); }
+
+.stepper-description {
+  font-size: calc(var(--stepper-font-size) - 0.0625rem);
+  line-height: 1.4;
+}
+
+.stepper-description--complete  { color: var(--color-gray-400, #9ba6af); }
+.stepper-description--current   { color: var(--color-gray-500, #6b7a84); }
+.stepper-description--upcoming  { color: var(--color-gray-300, #bec6cb); }
+
+/* ─── AppBar ──────────────────────────────────────────────────────────────── */
+
+.app-bar {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: var(--z-app-bar, 100);
+  background-color: var(--app-bar-bg, var(--color-surface, #ffffff));
+  color: var(--app-bar-color, var(--color-on-surface, #1a1a1a));
+  border-bottom: 1px solid var(--app-bar-border, var(--color-border, #e5e7eb));
+  padding-inline: var(--app-bar-px, 0.75rem);
+  gap: var(--app-bar-gap, 0.25rem);
+  overflow: hidden; /* keeps image layer clipped to bar bounds */
+  transition:
+    box-shadow 200ms ease,
+    height 200ms ease,
+    background-color 200ms ease;
+}
+
+/* ─── Position variants ──────────────────────────────────────────────────── */
+
+.app-bar--fixed    { position: fixed; }
+.app-bar--sticky   { position: sticky; }
+.app-bar--relative { position: relative; }
+.app-bar--static   { position: static; }
+
+/* ─── Color variants ─────────────────────────────────────────────────────── */
+
+.app-bar--primary {
+  background-color: var(--color-primary, #2563eb);
+  color: var(--color-on-primary, #ffffff);
+  border-bottom-color: transparent;
+}
+
+.app-bar--primary .app-bar-nav-icon,
+.app-bar--primary .app-bar-action-btn {
+  color: var(--color-on-primary, #ffffff);
+}
+
+.app-bar--transparent {
+  background-color: transparent;
+  border-bottom-color: transparent;
+}
+
+/* ─── Density ────────────────────────────────────────────────────────────── */
+
+.app-bar--comfortable {
+  padding-inline: var(--app-bar-px-comfortable, 0.75rem);
+}
+
+.app-bar--compact {
+  padding-inline: var(--app-bar-px-compact, 0.5rem);
+}
+
+.app-bar--compact .app-bar-title {
+  font-size: var(--app-bar-title-size-compact, 1rem);
+}
+
+/* ─── Prominent ──────────────────────────────────────────────────────────── */
+/*
+  Prominent bars are taller (128px via inline style).
+  The inner wrapper uses a column layout so the top row holds
+  the nav/actions and the title flows to the bottom.
+*/
+
+.app-bar--prominent {
+  align-items: stretch;
+  padding-inline: 0;
+}
+
+.app-bar-prominent-inner {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 100%;
+  padding-block: 0.25rem 0.75rem;
+  padding-inline: var(--app-bar-px, 0.75rem);
+  position: relative;
+  z-index: 1;
+}
+
+/* Top row: prepend + append sit at the top of the prominent bar */
+.app-bar--prominent .app-bar-prepend {
+  align-self: flex-start;
+}
+
+.app-bar--prominent .app-bar-append {
+  align-self: flex-start;
+  /* keep append pinned to the right inside the top row */
+  margin-inline-start: auto;
+}
+
+/* Title flows to the bottom of the prominent bar */
+.app-bar--prominent .app-bar-title {
+  font-size: var(--app-bar-title-size-prominent, 1.25rem);
+  font-weight: var(--app-bar-title-weight-prominent, 600);
+  padding-inline-start: 0.25rem;
+  align-self: flex-end;
+  width: 100%;
+}
+
+/*
+  The prominent bar's top row (prepend + append) needs to be a flex row.
+  We achieve this by making the first flex layer of prominent-inner a row,
+  then the title breaks to the bottom via flex-wrap or an explicit row wrapper.
+  Since children are prepend / title / append we use a top-row wrapper approach
+  via CSS: wrap the first row items and push title to the bottom.
+*/
+.app-bar-prominent-inner {
+  /* Use a 2-row grid: top row auto, bottom row fills remaining */
+  display: grid;
+  grid-template-rows: auto 1fr;
+  grid-template-columns: 1fr;
+  height: 100%;
+}
+
+.app-bar-prominent-top {
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+.app-bar-prominent-bottom {
+  display: flex;
+  align-items: flex-end;
+  width: 100%;
+  padding-bottom: 0.25rem;
+}
+
+/* ─── Elevation ──────────────────────────────────────────────────────────── */
+
+.app-bar--elevated {
+  border-bottom-color: transparent;
+  box-shadow: var(
+    --app-bar-shadow,
+    0 1px 3px 0 rgb(0 0 0 / 0.1),
+    0 1px 2px -1px rgb(0 0 0 / 0.1)
+  );
+}
+
+/* ─── Flat ───────────────────────────────────────────────────────────────── */
+
+.app-bar--flat {
+  border-bottom-color: transparent;
+  box-shadow: none;
+}
+
+/* ─── Rounded ────────────────────────────────────────────────────────────── */
+
+.app-bar--rounded {
+  border-radius: var(--app-bar-radius, 0.75rem);
+  margin: var(--app-bar-rounded-margin, 0.5rem);
+  width: calc(100% - var(--app-bar-rounded-margin, 0.5rem) * 2);
+}
+
+/* ─── Collapse ───────────────────────────────────────────────────────────── */
+
+.app-bar--collapse .app-bar-title,
+.app-bar--collapse .app-bar-content,
+.app-bar--collapse .app-bar-append {
+  opacity: 0;
+  pointer-events: none;
+  width: 0;
+  overflow: hidden;
+  transition: opacity 200ms ease, width 200ms ease;
+}
+
+/* ─── Image ──────────────────────────────────────────────────────────────── */
+
+.app-bar--image {
+  /* When an image is set, ensure text stays readable */
+  color: var(--color-on-primary, #ffffff);
+  border-bottom-color: transparent;
+}
+
+.app-bar--image .app-bar-nav-icon,
+.app-bar--image .app-bar-action-btn {
+  color: var(--color-on-primary, #ffffff);
+}
+
+/* The image sits behind all content via absolute positioning */
+.app-bar-image-layer {
+  position: absolute;
+  inset: 0;
+  background-size: cover;
+  background-position: center;
+  z-index: 0;
+}
+
+/* Optional gradient overlay on top of the image */
+.app-bar-image-overlay {
+  position: absolute;
+  inset: 0;
+}
+
+/*
+  All direct children of .app-bar need z-index: 1 when an image is present
+  so they render above the image layer.
+*/
+.app-bar--image > .app-bar-prepend,
+.app-bar--image > .app-bar-title,
+.app-bar--image > .app-bar-content,
+.app-bar--image > .app-bar-append {
+  position: relative;
+  z-index: 1;
+}
+
+/* ─── Prepend slot ───────────────────────────────────────────────────────── */
+
+.app-bar-prepend {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  gap: 0.25rem;
+}
+
+/* ─── Nav Icon button ────────────────────────────────────────────────────── */
+
+.app-bar-nav-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: var(--radius-full, 9999px);
+  border: none;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  transition: background-color 150ms ease;
+  flex-shrink: 0;
+}
+
+.app-bar-nav-icon:hover {
+  background-color: var(--color-muted, rgba(0, 0, 0, 0.06));
+}
+
+.app-bar-nav-icon:focus-visible {
+  outline: 2px solid var(--color-primary, #2563eb);
+  outline-offset: 2px;
+}
+
+/* ─── Title ──────────────────────────────────────────────────────────────── */
+
+.app-bar-title {
+  flex: 1;
+  font-size: var(--app-bar-title-size, 1.125rem);
+  font-weight: var(--app-bar-title-weight, 600);
+  line-height: 1.25;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  transition: opacity 200ms ease, width 200ms ease;
+}
+
+/* ─── Content ────────────────────────────────────────────────────────────── */
+
+.app-bar-content {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  transition: opacity 200ms ease, width 200ms ease;
+}
+
+/* ─── Append slot ────────────────────────────────────────────────────────── */
+
+.app-bar-append {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  gap: 0.25rem;
+  margin-inline-start: auto;
+  transition: opacity 200ms ease, width 200ms ease;
+}
+
+/* ─── Action button ──────────────────────────────────────────────────────── */
+
+.app-bar-action-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: var(--radius-full, 9999px);
+  border: none;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  transition: background-color 150ms ease;
+  flex-shrink: 0;
+}
+
+.app-bar-action-btn:hover {
+  background-color: var(--color-muted, rgba(0, 0, 0, 0.06));
+}
+
+.app-bar-action-btn:focus-visible {
+  outline: 2px solid var(--color-primary, #2563eb);
+  outline-offset: 2px;
+}
+
+/* ─── Search input ───────────────────────────────────────────────────────── */
+
+.app-bar-search {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  max-width: 28rem;
+}
+
+.app-bar-search-icon {
+  position: absolute;
+  left: 0.75rem;
+  color: var(--color-muted-foreground, #9ca3af);
+  pointer-events: none;
+  flex-shrink: 0;
+}
+
+.app-bar-search-input {
+  width: 100%;
+  height: 2.25rem;
+  padding-inline: 2.25rem 0.75rem;
+  border-radius: var(--radius-md, 0.5rem);
+  border: 1px solid var(--color-border, #e5e7eb);
+  background: var(--color-muted-bg, rgba(0, 0, 0, 0.04));
+  font-size: 0.875rem;
+  color: inherit;
+  outline: none;
+  transition: border-color 150ms ease, background-color 150ms ease;
+}
+
+.app-bar-search-input::placeholder {
+  color: var(--color-muted-foreground, #9ca3af);
+}
+
+.app-bar-search-input:focus {
+  border-color: var(--color-primary, #2563eb);
+  background: var(--color-surface, #ffffff);
+}
+
+/* ─── BottomNavigation ───────────────────────────────────────────────────── */
+
+.bottom-nav {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+  background-color: var(--bottom-nav-bg, var(--color-surface, #ffffff));
+  border-top: 1px solid var(--bottom-nav-border, var(--color-border, #e5e7eb));
+  z-index: var(--z-bottom-nav, 100);
+  transform: translateY(0);
+  transition: transform 250ms ease, background-color 200ms ease;
+}
+
+.bottom-nav--hidden {
+  transform: translateY(100%);
+}
+
+.bottom-nav--elevated {
+  box-shadow:
+    0 -1px 3px 0 rgb(0 0 0 / 0.08),
+    0 -1px 8px 0 rgb(0 0 0 / 0.06);
+  border-top-color: transparent;
+}
+
+/* ─── Group ──────────────────────────────────────────────────────────────── */
+
+.bottom-nav-group {
+  display: flex;
+  align-items: stretch;
+  height: var(--bottom-nav-height, 56px);
+  width: 100%;
+}
+
+/* ─── Item (button) ──────────────────────────────────────────────────────── */
+
+.bottom-nav-item {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.125rem;
+  min-width: 80px;
+  padding-inline: 0.75rem;
+  border: none;
+  background: transparent;
+  color: var(--bottom-nav-item-color, var(--color-gray-500, #71747d));
+  cursor: pointer;
+  font-size: 0.6875rem; /* 11px label */
+  font-weight: 500;
+  line-height: 1.2;
+  text-align: center;
+  transition:
+    color 150ms ease,
+    background-color 150ms ease;
+  position: relative;
+  overflow: hidden;
+  -webkit-tap-highlight-color: transparent;
+}
+
+/* Ripple placeholder on click */
+.bottom-nav-item::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: currentColor;
+  opacity: 0;
+  transition: opacity 200ms ease;
+  border-radius: inherit;
+  pointer-events: none;
+}
+
+.bottom-nav-item:hover::after {
+  opacity: 0.06;
+}
+
+.bottom-nav-item:active::after {
+  opacity: 0.12;
+}
+
+/* Active state — color driven by CSS variable set via inline style */
+.bottom-nav-item--active {
+  color: var(--bottom-nav-active-color, var(--color-primary, #2563eb));
+}
+
+/* Icon inside item — inherits color */
+.bottom-nav-item svg {
+  flex-shrink: 0;
+  transition: color 150ms ease;
+}
+
+/* Label inside item */
+.bottom-nav-item span {
+  display: block;
+  transition: opacity 150ms ease, max-height 150ms ease;
+}
+
+/* ─── Grow ───────────────────────────────────────────────────────────────── */
+/* Each item fills available space, capped at 168px per MD spec */
+
+.bottom-nav--grow .bottom-nav-group {
+  justify-content: stretch;
+}
+
+.bottom-nav-item--grow {
+  flex: 1;
+  max-width: 168px;
+}
+
+/* ─── Horizontal ─────────────────────────────────────────────────────────── */
+/* Icon and label sit side-by-side */
+
+.bottom-nav-item--horizontal {
+  flex-direction: row;
+  gap: 0.375rem;
+  font-size: 0.8125rem; /* slightly larger for inline layout */
+}
+
+/* ─── Shift ──────────────────────────────────────────────────────────────── */
+/* Inactive items: icon only (label hidden). Active item: icon + label. */
+
+.bottom-nav-item--shift span {
+  max-height: 0;
+  opacity: 0;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.bottom-nav-item--shift.bottom-nav-item--active span {
+  max-height: 2rem;
+  opacity: 1;
+  pointer-events: auto;
+}
+
+/* Inactive icons in shift mode are slightly smaller */
+.bottom-nav-item--shift:not(.bottom-nav-item--active) svg {
+  transform: scale(0.85);
+  transition: transform 150ms ease, color 150ms ease;
+}
+
+.bottom-nav-item--shift.bottom-nav-item--active svg {
+  transform: scale(1);
+}
+
+/* ─── Footer ─────────────────────────────────────────────────────────────── */
+
+.footer {
+  width: 100%;
+  background-color: var(--footer-bg, var(--color-surface, #ffffff));
+  color: var(--footer-color, var(--color-on-surface, #1a1a1a));
+  padding: var(--footer-padding, 1rem 1.5rem);
+  display: flex;
+  flex-direction: column;
+  gap: var(--footer-gap, 0.75rem);
+}
+
+/* ─── Variants ───────────────────────────────────────────────────────────── */
+
+.footer--bordered {
+  border-top: 1px solid var(--footer-border-color, var(--color-border, #e5e7eb));
+}
+
+.footer--rounded {
+  border-radius: var(--footer-radius, 0.75rem);
+}
+
+.footer--elevated {
+  box-shadow:
+    0 -1px 3px 0 rgb(0 0 0 / 0.06),
+    0 -1px 8px 0 rgb(0 0 0 / 0.04);
+}
+
+/* ─── Color-specific overrides ───────────────────────────────────────────── */
+
+/* Indigo footer — text should contrast against the light indigo bg */
+.footer--indigo {
+  color: var(--color-gray-800, #2d2f36);
+  text-align: center;
+  align-items: center;
+}
+
+/* Teal footer — white text on dark teal bg */
+.footer--teal {
+  color: #ffffff;
+}
+
+/* ─── FooterRow ──────────────────────────────────────────────────────────── */
+
+.footer-row {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.footer-row--center {
+  justify-content: center;
+}
+
+.footer-row--space-between {
+  justify-content: space-between;
+}
+
+.footer-row--padded {
+  padding: 0.5rem 0;
+}
+
+.footer-row--gap {
+  gap: 0.25rem;
+}
+
+/* ─── FooterLinks ────────────────────────────────────────────────────────── */
+
+.footer-links {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+}
+
+/* ─── FooterLink ─────────────────────────────────────────────────────────── */
+
+.footer-link {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.375rem 0.875rem;
+  border-radius: 9999px;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--footer-link-color, var(--color-gray-600, #52545d));
+  text-decoration: none;
+  transition: background-color 150ms ease, color 150ms ease;
+}
+
+.footer-link:hover {
+  background-color: var(--color-gray-100, #eff1f2);
+  color: var(--color-gray-800, #2d2f36);
+}
+
+.footer-link:focus-visible {
+  outline: 2px solid var(--color-primary, #2563eb);
+  outline-offset: 2px;
+}
+
+/* ─── FooterIconButton ───────────────────────────────────────────────────── */
+
+.footer-icon-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.25rem;
+  height: 2.25rem;
+  border-radius: 9999px;
+  border: none;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  transition: background-color 150ms ease;
+  flex-shrink: 0;
+}
+
+.footer-icon-btn:hover {
+  background-color: rgba(0, 0, 0, 0.08);
+}
+
+.footer-icon-btn:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+}
+
+.footer-icon-btn--small {
+  width: 1.875rem;
+  height: 1.875rem;
+}
+
+/* Plain variant — no hover background, slightly muted */
+.footer-icon-btn--plain {
+  opacity: 0.85;
+}
+
+.footer-icon-btn--plain:hover {
+  opacity: 1;
+  background-color: rgba(255, 255, 255, 0.12);
+}
+
+/* ─── FooterDivider ──────────────────────────────────────────────────────── */
+
+.footer-divider {
+  border: none;
+  border-top: 1px solid var(--footer-divider-color, var(--color-border, #e5e7eb));
+  width: 100%;
+  margin: 0.25rem 0;
+  align-self: center;
+}
+
+.footer-divider--thick {
+  border-top-width: 2px;
+}
+
+/* ─── FooterCopyright ────────────────────────────────────────────────────── */
+
+.footer-copyright {
+  font-size: 0.875rem;
+  color: var(--footer-copyright-color, var(--color-gray-500, #71747d));
+  text-align: center;
+  width: 100%;
+}
+
+/* ─── FooterBand ─────────────────────────────────────────────────────────── */
+/* Full-width bottom accent band — used in the teal footer variant */
+
+.footer-band {
+  width: 100%;
+  background-color: rgba(0, 0, 0, 0.15);
+  border-radius: var(--footer-band-radius, 0.5rem);
+  padding: 0.625rem 1rem;
+  text-align: center;
+}
+
+.footer-band .footer-copyright {
+  color: inherit;
+  opacity: 0.9;
+}
+
+/* ─── FooterBodyText ─────────────────────────────────────────────────────── */
+
+.footer-body-text {
+  font-size: 0.8125rem;
+  line-height: 1.6;
+  opacity: 0.7;
+  text-align: center;
+  max-width: 64ch;
+  margin: 0 auto;
+}
+
+/* ─── FooterTagline ──────────────────────────────────────────────────────── */
+
+.footer-tagline {
+  font-size: 0.9375rem;
+  font-weight: 600;
+}
+
+/* ─── SystemBar ──────────────────────────────────────────────────────────── */
+
+.system-bar {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding-inline: 0.5rem;
+  gap: 0.375rem;
+  background-color: var(--system-bar-bg, var(--color-gray-800, #2d2f36));
+  color: var(--system-bar-color, var(--color-white, #ffffff));
+  font-size: 0.6875rem; /* 11px — tight status bar text */
+  font-weight: 500;
+  letter-spacing: 0.01em;
+  user-select: none;
+  position: relative;
+  z-index: var(--z-system-bar, 110); /* sits above app-bar */
+}
+
+/* When a custom color is set, force white text for legibility */
+.system-bar--colored {
+  color: #ffffff;
+}
+
+/* ─── Window variant ─────────────────────────────────────────────────────── */
+
+.system-bar--window {
+  background-color: var(--system-bar-window-bg, var(--color-gray-100, #eff1f2));
+  color: var(--system-bar-window-color, var(--color-gray-700, #3d3f47));
+  padding-inline: 0.625rem;
+  font-size: 0.8125rem;
+  gap: 0.25rem;
+  border-bottom: 1px solid var(--color-border, #e5e7eb);
+}
+
+/* ─── Icon wrapper ───────────────────────────────────────────────────────── */
+
+.system-bar-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  line-height: 1;
+}
+
+.system-bar-icon svg {
+  display: block;
+}
+
+/* ─── Spacer ─────────────────────────────────────────────────────────────── */
+
+.system-bar-spacer {
+  flex: 1;
+}
+
+/* ─── Clock / time text ──────────────────────────────────────────────────── */
+
+.system-bar-time {
+  font-size: 0.6875rem;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+/* ─── Label (window mode) ────────────────────────────────────────────────── */
+
+.system-bar-label {
+  font-size: 0.8125rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* ─── Window action buttons ──────────────────────────────────────────────── */
+
+.system-bar-action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  border-radius: var(--radius-sm, 0.25rem);
+  border: none;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: background-color 120ms ease;
+}
+
+.system-bar-action:hover {
+  background-color: var(--color-gray-200, #dedfe3);
+}
+
+.system-bar-action:focus-visible {
+  outline: 2px solid var(--color-primary, #2563eb);
+  outline-offset: -2px;
+}
+
+/* Close button gets a red hover */
+.system-bar-action--close:hover {
+  background-color: #ef4444;
+  color: #ffffff;
+}
+
+/* ─── EmptyState ─────────────────────────────────────────────────────────── */
+
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: var(--empty-state-padding, 3rem 1.5rem);
+  gap: var(--empty-state-gap, 0.5rem);
+  width: 100%;
+  max-width: var(--empty-state-max-width, 560px);
+  margin-inline: auto;
+}
+
+/* ─── Media ──────────────────────────────────────────────────────────────── */
+
+.empty-state-media {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 0.75rem;
+}
+
+.empty-state-image {
+  max-width: 100%;
+  max-height: var(--empty-state-image-max-height, 240px);
+  object-fit: contain;
+  border-radius: var(--radius-md, 0.5rem);
+}
+
+.empty-state-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--empty-state-icon-color, var(--color-gray-400, #9ca3af));
+}
+
+/* ─── Headline ───────────────────────────────────────────────────────────── */
+
+.empty-state-headline {
+  font-size: var(--empty-state-headline-size, 2.5rem);
+  font-weight: var(--empty-state-headline-weight, 300);
+  line-height: 1.15;
+  color: var(--empty-state-headline-color, var(--color-gray-600, #52545d));
+  letter-spacing: -0.01em;
+}
+
+/* ─── Title ──────────────────────────────────────────────────────────────── */
+
+.empty-state-title {
+  font-size: var(--empty-state-title-size, 1.125rem);
+  font-weight: var(--empty-state-title-weight, 600);
+  line-height: 1.3;
+  color: var(--empty-state-title-color, var(--color-gray-800, #2d2f36));
+}
+
+/* ─── Subtitle ───────────────────────────────────────────────────────────── */
+
+.empty-state-subtitle {
+  font-size: 0.9375rem;
+  font-weight: 500;
+  color: var(--color-gray-600, #52545d);
+}
+
+/* ─── Body text ──────────────────────────────────────────────────────────── */
+
+.empty-state-text {
+  font-size: var(--empty-state-text-size, 0.875rem);
+  line-height: 1.6;
+  color: var(--empty-state-text-color, var(--color-gray-500, #71747d));
+  max-width: 48ch;
+}
+
+/* ─── Default slot ───────────────────────────────────────────────────────── */
+
+.empty-state-default {
+  width: 100%;
+  margin-top: 0.5rem;
+}
+
+/* ─── Actions ────────────────────────────────────────────────────────────── */
+
+.empty-state-actions {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  margin-top: 0.75rem;
+}
+
+/* ─── Action button ──────────────────────────────────────────────────────── */
+
+.empty-state-action-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 2.25rem;
+  padding-inline: 1.25rem;
+  border-radius: var(--radius-md, 0.5rem);
+  border: 1px solid var(--color-border, #e5e7eb);
+  background-color: var(--color-white, #ffffff);
+  color: var(--color-gray-700, #3d3f47);
+  font-size: 0.875rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background-color 150ms ease, border-color 150ms ease;
+  white-space: nowrap;
+}
+
+.empty-state-action-btn:hover {
+  background-color: var(--color-gray-50, #f9f9fa);
+  border-color: var(--color-gray-300, #cbcdd2);
+}
+
+.empty-state-action-btn:focus-visible {
+  outline: 2px solid var(--color-primary, #2563eb);
+  outline-offset: 2px;
+}
+
+/* Primary variant */
+.empty-state-action-btn--primary {
+  background-color: var(--color-primary, #2563eb);
+  color: var(--color-white, #ffffff);
+  border-color: transparent;
+}
+
+.empty-state-action-btn--primary:hover {
+  background-color: var(--color-blue-700, #286495);
+  border-color: transparent;
+}
+
+/* Outline variant */
+.empty-state-action-btn--outline {
+  background-color: transparent;
+  border-color: var(--color-gray-300, #cbcdd2);
+  color: var(--color-gray-700, #3d3f47);
+}
+
+.empty-state-action-btn--outline:hover {
+  background-color: var(--color-gray-50, #f9f9fa);
+}
+
+/* ─── SlotDefault card grid helper ───────────────────────────────────────── */
+
+.empty-state-card {
+  border: 1px solid var(--color-border, #e5e7eb);
+  border-radius: var(--radius-md, 0.5rem);
+  padding: 1rem;
+  text-align: left;
+  background-color: var(--color-surface, #ffffff);
+  transition: box-shadow 150ms ease;
+}
+
+.empty-state-card:hover {
+  box-shadow:
+    0 1px 3px 0 rgb(0 0 0 / 0.08),
+    0 1px 8px 0 rgb(0 0 0 / 0.06);
+}
+
+.empty-state-card-title {
+  font-size: 0.9375rem;
+  font-weight: 600;
+  color: var(--color-gray-800, #2d2f36);
+  margin-bottom: 0.25rem;
+}
+
+.empty-state-card-desc {
+  font-size: 0.8125rem;
+  color: var(--color-gray-500, #71747d);
+  line-height: 1.5;
+}
+
+/* ─── Timeline ───────────────────────────────────────────────────────────── */
+
+.timeline {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  padding-block: 0.5rem;
+}
+
+/* ─── Horizontal direction ───────────────────────────────────────────────── */
+
+.timeline--horizontal {
+  flex-direction: row;
+  align-items: flex-start;
+  overflow-x: auto;
+}
+
+.timeline--horizontal .timeline-item {
+  flex-direction: column;
+  align-items: center;
+  flex: 1;
+  min-width: 160px;
+}
+
+.timeline--horizontal .timeline-item-stem {
+  flex-direction: row;
+  width: 100%;
+  height: auto;
+  align-items: center;
+}
+
+.timeline--horizontal .timeline-item-stem-line {
+  flex: 1;
+  width: auto;
+  height: 2px;
+}
+
+.timeline--horizontal .timeline-item-opposite {
+  order: -1; /* above the stem in horizontal mode */
+  text-align: center;
+  padding-block: 0 0.5rem;
+  width: 100%;
+}
+
+.timeline--horizontal .timeline-item-body {
+  text-align: center;
+  padding-top: 0.5rem;
+  width: 100%;
+}
+
+/* ─── Compact density ────────────────────────────────────────────────────── */
+
+.timeline--compact .timeline-item {
+  margin-bottom: 0.5rem;
+}
+
+/* ─── Timeline Item ──────────────────────────────────────────────────────── */
+
+.timeline-item {
+  display: flex;
+  align-items: center; /* overridden by --align-start */
+  gap: 0.75rem;
+  margin-bottom: 1rem;
+  position: relative;
+}
+
+/* Align-start: content aligns to top of dot */
+.timeline-item--align-start {
+  align-items: flex-start;
+}
+
+/* ─── Side: alternate (default) ──────────────────────────────────────────── */
+/*
+  In "alternate" mode odd items: opposite left, stem center, body right.
+  Even items flip. We achieve this by controlling the order of the three
+  columns inside each .timeline-item.
+*/
+
+.timeline--side-alternate .timeline-item:nth-child(even) .timeline-item-opposite {
+  order: 2;
+  text-align: left;
+}
+
+.timeline--side-alternate .timeline-item:nth-child(even) .timeline-item-stem {
+  order: 1;
+}
+
+.timeline--side-alternate .timeline-item:nth-child(even) .timeline-item-body {
+  order: 0;
+  text-align: right;
+}
+
+/* ─── Side: end — all content on the right ───────────────────────────────── */
+
+.timeline--side-end .timeline-item-opposite {
+  display: none;
+}
+
+/* ─── Side: start — all content on the left ─────────────────────────────── */
+
+.timeline--side-start .timeline-item-opposite {
+  display: none;
+}
+
+.timeline--side-start .timeline-item-body {
+  order: -1;
+}
+
+/* ─── Opposite slot ──────────────────────────────────────────────────────── */
+
+.timeline-item-opposite {
+  flex: 1;
+  text-align: right;
+  font-size: 0.875rem;
+  color: var(--color-gray-500, #71747d);
+  min-width: 0;
+}
+
+/* ─── Stem column (line + dot) ───────────────────────────────────────────── */
+
+.timeline-item-stem {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex-shrink: 0;
+  align-self: stretch;
+}
+
+.timeline-item-stem-line {
+  width: 2px;
+  background-color: var(--timeline-line-color, var(--color-gray-200, #dedfe3));
+  flex: 1;
+  min-height: 8px;
+}
+
+/* Hide the "before" line on the very first item */
+.timeline-item:first-child .timeline-item-stem-line--before {
+  visibility: hidden;
+}
+
+/* Hide the "after" line on the very last item */
+.timeline-item:last-child .timeline-item-stem-line--after {
+  visibility: hidden;
+}
+
+/* ─── Dot ────────────────────────────────────────────────────────────────── */
+
+.timeline-item-dot {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background-color: var(--color-surface, #ffffff);
+  border: 2px solid var(--color-gray-300, #cbcdd2);
+  flex-shrink: 0;
+  position: relative;
+  z-index: 1;
+  transition: background-color 150ms ease, border-color 150ms ease;
+  overflow: hidden; /* keeps avatar images clipped to circle */
+}
+
+/* Size variants — dot diameter */
+.timeline-item--size-x-small .timeline-item-dot { width: 12px;  height: 12px; }
+.timeline-item--size-small   .timeline-item-dot { width: 16px;  height: 16px; }
+.timeline-item--size-default .timeline-item-dot { width: 24px;  height: 24px; }
+.timeline-item--size-large   .timeline-item-dot { width: 32px;  height: 32px; }
+.timeline-item--size-x-large .timeline-item-dot { width: 40px;  height: 40px; }
+
+/* fillDot — solid background instead of ring */
+.timeline-item--fill-dot .timeline-item-dot {
+  border-color: transparent;
+}
+
+/* When dotColor is set via inline style it automatically fills */
+.timeline-item-dot[style] {
+  border-color: transparent;
+}
+
+/* ─── Dot icon ───────────────────────────────────────────────────────────── */
+
+.timeline-item-dot-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--timeline-icon-color, #ffffff);
+  font-size: 0.625rem;
+  font-weight: 700;
+  width: 100%;
+  height: 100%;
+  line-height: 1;
+}
+
+/* ─── Body ───────────────────────────────────────────────────────────────── */
+
+.timeline-item-body {
+  flex: 1;
+  min-width: 0;
+  padding-block: 0.25rem;
+  font-size: 0.875rem;
+}
+
+/* ─── hideDot ────────────────────────────────────────────────────────────── */
+
+.timeline-item--hide-dot .timeline-item-dot {
+  display: none;
+}
+
+.timeline-item--hide-dot .timeline-item-stem-line {
+  visibility: hidden;
+}
+
+/* ─── Story helpers (used in .stories.tsx only) ──────────────────────────── */
+
+.timeline-story-card {
+  border: 1px solid var(--color-border, #e5e7eb);
+  border-radius: var(--radius-md, 0.5rem);
+  padding: 0.875rem 1rem;
+  background: var(--color-surface, #ffffff);
+}
+
+.timeline-story-card strong {
+  display: block;
+  font-size: 1rem;
+  margin-bottom: 0.25rem;
+}
+
+.timeline-story-card p {
+  font-size: 0.875rem;
+  color: var(--color-gray-500, #71747d);
+  margin: 0;
+  line-height: 1.5;
+}
+
+.timeline-story-sub {
+  font-size: 0.8125rem;
+  color: var(--color-gray-500, #71747d);
+  margin-top: 0.125rem;
+}
+
+.timeline-story-opposite {
+  font-size: 0.875rem;
+  color: var(--color-gray-500, #71747d);
+  font-style: italic;
+}
+
+.timeline-story-btn {
+  margin-top: 0.75rem;
+  display: inline-flex;
+  align-items: center;
+  height: 2rem;
+  padding-inline: 1rem;
+  border-radius: var(--radius-md, 0.5rem);
+  border: 1px solid var(--color-gray-300, #cbcdd2);
+  background: transparent;
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 150ms ease;
+}
+
+.timeline-story-btn:hover {
+  background-color: var(--color-gray-50, #f9f9fa);
+}
+
+.timeline-alert {
+  padding: 0.75rem 1rem;
+  border-radius: var(--radius-md, 0.5rem);
+  font-size: 0.875rem;
+  line-height: 1.5;
+}
+
+.timeline-alert--info {
+  background-color: #eff6ff;
+  border: 1px solid #bfdbfe;
+  color: #1d4ed8;
+}
+
+.timeline-alert--error {
+  background-color: #fef2f2;
+  border: 1px solid #fecaca;
+  color: #b91c1c;
+}
+
+.timeline-alert p {
+  margin: 0.25rem 0 0;
+}
+
+/* Chip used in OrderActivity story */
+.timeline-chip {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.125rem 0.5rem;
+  border-radius: 9999px;
+  background-color: #7c3aed;
+  color: #ffffff;
+  font-size: 0.625rem;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  vertical-align: middle;
+  margin-right: 0.25rem;
+}
+
+/* Comment input + button */
+.timeline-comment-input {
+  flex: 1;
+  height: 2.25rem;
+  padding-inline: 0.75rem;
+  border: 1px solid var(--color-border, #e5e7eb);
+  border-radius: var(--radius-md, 0.5rem);
+  font-size: 0.875rem;
+  outline: none;
+  transition: border-color 150ms ease;
+}
+
+.timeline-comment-input:focus {
+  border-color: var(--color-primary, #2563eb);
+}
+
+.timeline-comment-btn {
+  height: 2.25rem;
+  padding-inline: 0.875rem;
+  border: none;
+  background: transparent;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--color-primary, #2563eb);
+  cursor: pointer;
+  border-radius: var(--radius-md, 0.5rem);
+  transition: background-color 150ms ease;
+}
+
+.timeline-comment-btn:hover {
+  background-color: var(--color-blue-50, #fbfdfe);
+}