anentrypoint-design 0.0.127 → 0.0.130

package/app-shell.css

@@ -9,6 +9,28 @@
    ============================================================ */
 * { box-sizing: border-box; }
 html, body { margin: 0; padding: 0; }
+
+/* ============================================================
+   Accessibility — Skip Link
+   ============================================================ */
+.skip-link {
+  position: absolute;
+  top: -40px;
+  left: 0;
+  background: var(--accent);
+  color: var(--accent-fg);
+  padding: 8px 16px;
+  text-decoration: none;
+  z-index: 100;
+  border-radius: var(--r-pill);
+  font-weight: 600;
+  font-size: var(--fs-sm);
+}
+.skip-link:focus {
+  top: 10px;
+  outline: 2px solid var(--fg-3);
+  outline-offset: 2px;
+}
 body {
   background: var(--bg);
   color: var(--fg);
@@ -128,6 +150,11 @@ pre .n { color: var(--green-2); }
   min-height: 100vh;
   background: var(--bg);
   color: var(--fg);
+  /* Notched-device safe area padding (no-op on devices without notches) */
+  padding-top: env(safe-area-inset-top);
+  padding-bottom: env(safe-area-inset-bottom);
+  padding-left: env(safe-area-inset-left);
+  padding-right: env(safe-area-inset-right);
 }
 
 .app-topbar {
@@ -141,7 +168,10 @@ pre .n { color: var(--green-2); }
 .app-topbar nav { display: flex; gap: 4px; font-size: var(--fs-sm); }
 .app-topbar nav a {
   color: var(--fg-2);
-  padding: 8px 14px;
+  padding: 12px 14px;
+  min-height: 44px;
+  display: flex;
+  align-items: center;
   border-radius: var(--r-pill);
   transition: background var(--dur-snap) var(--ease), color var(--dur-snap) var(--ease);
 }
@@ -168,10 +198,18 @@ pre .n { color: var(--green-2); }
 }
 .app-search .icon { opacity: 0.6; }
 .app-search input {
-  border: 0; outline: 0; background: transparent;
+  border: 0; background: transparent;
   font-family: inherit; font-size: inherit; color: var(--fg);
   width: 100%;
 }
+.app-search input:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+  background: var(--bg-2);
+  border-radius: var(--r-pill);
+  padding-left: 8px;
+  padding-right: 8px;
+}
 
 .app-crumb {
   padding: 0 var(--pad-x) 14px;
@@ -199,7 +237,8 @@ pre .n { color: var(--green-2); }
 .app-side a {
   display: grid; grid-template-columns: 18px 1fr auto;
   gap: 10px; align-items: center;
-  padding: 10px 14px;
+  padding: 12px 14px;
+  min-height: 44px;
   border-radius: var(--r-pill);
   color: var(--fg-2);
   margin-bottom: 2px;
@@ -516,15 +555,152 @@ table tr.clickable:hover td { background: var(--bg-2); }
   font-family: inherit; font-size: var(--fs-sm);
   padding: 12px 16px;
   background: var(--bg); color: var(--fg);
-  border: 0; border-radius: var(--r-2); outline: 0;
+  border: 0; border-radius: var(--r-2);
   box-shadow: inset 0 0 0 1px var(--rule);
 }
 .row-form input:focus,
 .row-form textarea:focus { box-shadow: inset 0 0 0 2px var(--accent); }
 
 /* ============================================================
-   Responsive
+   Responsive Design — Mobile (480px), Tablet (1024px), Desktop (1440px+)
    ============================================================ */
+
+/* ────────────────────────────────────────────────────────────────────
+   Mobile Portrait Breakpoint (480px and below)
+   ────────────────────────────────────────────────────────────────────── */
+@media (max-width: 480px) {
+  /* App Layout */
+  .app-body { grid-template-columns: 1fr !important; }
+  .app-body.no-side { grid-template-columns: 1fr; }
+  .app-side-shell { border-right: 0; border-bottom: 1px solid var(--rule); }
+  .app-side {
+    padding: var(--space-3) var(--space-2);
+    font-size: var(--fs-xs);
+    flex-direction: row; flex-wrap: wrap; gap: var(--space-2);
+  }
+  .app-side .group {
+    width: 100%; font-size: var(--fs-micro); margin-bottom: 4px;
+  }
+  .app-side a {
+    flex: 1; min-width: 100px; padding: 12px 10px; gap: 6px;
+    grid-template-columns: 14px 1fr;
+    min-height: 44px;
+  }
+  .app-side a .glyph { font-size: 12px; }
+
+  /* Topbar Navigation */
+  .app-topbar {
+    grid-template-columns: 1fr auto;
+    gap: var(--space-2); padding: 12px var(--space-3);
+  }
+  .app-topbar nav a {
+    padding: 12px 10px;
+    min-height: 44px;
+  }
+  .app-topbar nav {
+    display: none; /* Hide full nav on very small screens */
+  }
+  .brand { font-size: var(--fs-tiny); font-weight: 600; }
+
+  /* Search */
+  .app-search {
+    display: none; /* Hide search on mobile unless explicitly pinned */
+  }
+
+  /* Main Content */
+  .app-main { padding: var(--space-4) var(--space-2); }
+  .app-main.narrow { max-width: 100%; margin: 0; }
+
+  /* Typography Scaling */
+  .t-hero { font-size: clamp(28px, 8vw, 48px); }
+  .t-mega { font-size: clamp(24px, 6vw, 42px); }
+  h1, .t-h1 { font-size: clamp(22px, 6vw, 36px); }
+  h2, .t-h2 { font-size: clamp(18px, 5vw, 28px); }
+  h3, .t-h3 { font-size: clamp(16px, 4.5vw, 24px); }
+
+  /* Panel & Row */
+  .panel { margin: 0 0 var(--space-3); }
+  .panel-head { padding: var(--space-3) var(--space-2); gap: var(--space-2); }
+  .panel-body { padding: var(--space-2); }
+
+  .row {
+    grid-template-columns: minmax(0, 1fr) auto !important;
+    gap: var(--space-2); padding: 12px 16px;
+    row-gap: 4px !important;
+  }
+  .row .sub { grid-column: 1 / -1; order: 3; }
+  .row .title { font-size: var(--fs-sm); }
+
+  /* Buttons */
+  .btn, .btn-primary, .btn-ghost {
+    padding: 11px 16px; font-size: var(--fs-tiny);
+    min-height: 44px; /* Touch target minimum */
+  }
+
+  /* File Grid */
+  .ds-file-grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: var(--space-2);
+  }
+  .ds-file-row {
+    grid-template-columns: 24px 1fr auto;
+    gap: 10px; padding: 10px 12px;
+    font-size: var(--fs-xs);
+  }
+  .ds-file-row .name { font-size: var(--fs-sm); }
+  .ds-file-row .size { font-size: var(--fs-micro); }
+
+  /* Chat */
+  .chat-stack { max-width: 100%; min-width: 0; }
+  .chat-bubble {
+    max-width: clamp(200px, 85vw, 320px);
+    padding: 10px 12px; font-size: var(--fs-sm);
+  }
+  .chat-avatar { width: 28px; height: 28px; font-size: 11px; }
+  .chat-msg:hover { padding: 4px 0; margin: 0; background: transparent; }
+  .chat-composer { padding: 8px; gap: 6px; }
+  .chat-composer textarea { padding: 10px 12px; font-size: var(--fs-sm); }
+  .chat-composer .send,
+  .chat-composer button { width: 40px; height: 40px; font-size: 16px; }
+
+  /* KPI Cards */
+  .kpi {
+    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+    gap: var(--space-2);
+  }
+  .kpi-card { padding: var(--space-3); }
+  .kpi-card .num { font-size: clamp(22px, 5vw, 32px); }
+
+  /* Empty State */
+  .empty { padding: var(--space-5); font-size: var(--fs-xs); }
+
+  /* Form */
+  .row-form { gap: 10px; padding: var(--space-3); }
+  .row-form input,
+  .row-form textarea { padding: 11px 12px; font-size: var(--fs-sm); }
+
+  /* Hero Section */
+  .ds-hero { padding: var(--space-6) 0 var(--space-5); }
+  .ds-hero-title { font-size: clamp(28px, 7vw, 48px); max-width: 100%; }
+  .ds-hero-body { font-size: var(--fs-lg); max-width: 100%; }
+
+  /* Table Responsiveness */
+  table { font-size: var(--fs-xs); }
+  table th,
+  table td { padding: 10px 12px; }
+
+  /* CLI Block */
+  .cli {
+    flex-direction: column; align-items: flex-start; gap: 10px;
+    padding: 16px 12px; font-size: var(--fs-xs);
+  }
+  .cli .copy { padding: 6px 12px; font-size: var(--fs-micro); }
+}
+
+/* ────────────────────────────────────────────────────────────────────
+   Container Query Responsive (720px and below)
+   ────────────────────────────────────────────────────────────────────── */
 @container (max-width: 760px) {
   .app-body { grid-template-columns: 1fr !important; }
   .app-side-shell { border-right: 0; border-bottom: 1px solid var(--rule); }
@@ -534,25 +710,156 @@ table tr.clickable:hover td { background: var(--bg-2); }
   .row .sub { grid-column: 1 / -1; order: 3; }
 }
 
+/* ────────────────────────────────────────────────────────────────────
+   Tablet Landscape Breakpoint (768px to 1024px)
+   ────────────────────────────────────────────────────────────────────── */
+@media (min-width: 481px) and (max-width: 1024px) {
+  /* App Layout */
+  .app-body { grid-template-columns: 200px minmax(0, 1fr); }
+  .app-side {
+    padding: var(--space-4) var(--space-2);
+    font-size: var(--fs-xs);
+    flex-direction: column; gap: var(--space-3);
+  }
+  .app-side a {
+    padding: 12px 12px; gap: 8px;
+    grid-template-columns: 16px 1fr auto;
+    font-size: var(--fs-xs);
+    min-height: 44px;
+  }
+
+  /* Topbar Navigation */
+  .app-topbar {
+    grid-template-columns: auto 1fr auto;
+    gap: var(--space-3); padding: 12px var(--space-4);
+  }
+  .app-topbar nav {
+    display: flex; gap: 8px; font-size: var(--fs-xs);
+    flex-wrap: wrap;
+  }
+  .app-topbar nav a {
+    padding: 12px 12px; font-size: var(--fs-xs);
+    min-height: 44px;
+  }
+  .brand { font-size: var(--fs-sm); }
+
+  /* Search */
+  .app-search {
+    display: inline-flex;
+    max-width: 280px; font-size: var(--fs-xs);
+    padding: 8px 14px;
+  }
+
+  /* Main Content */
+  .app-main { padding: var(--space-6) var(--space-4); }
+  .app-main.narrow { max-width: 100%; }
+
+  /* Typography */
+  .t-hero { font-size: clamp(32px, 6.5cqi, 56px); }
+  .t-mega { font-size: clamp(28px, 5.5cqi, 80px); }
+  h1, .t-h1 { font-size: clamp(24px, 5cqi, 48px); }
+  h2, .t-h2 { font-size: clamp(20px, 4cqi, 36px); }
+  h3, .t-h3 { font-size: clamp(18px, 3.5cqi, 28px); }
+
+  /* File Grid — 2-3 columns on tablet */
+  .ds-file-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+    gap: var(--space-3);
+  }
+  .ds-file-row {
+    grid-template-columns: 24px 1fr auto;
+    gap: 12px; padding: 12px 14px;
+  }
+
+  /* Chat Bubbles */
+  .chat-stack { max-width: min(75%, 420px); }
+  .chat-bubble {
+    max-width: clamp(220px, 75vw, 420px);
+    padding: 11px 14px; font-size: var(--fs-sm);
+  }
+  .chat-avatar { width: 32px; height: 32px; font-size: 12px; }
+
+  /* KPI Cards */
+  .kpi {
+    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+    gap: var(--space-3);
+  }
+
+  /* Buttons */
+  .btn, .btn-primary, .btn-ghost {
+    padding: 12px 18px; font-size: var(--fs-sm);
+  }
+
+  /* Panel */
+  .panel-head { padding: var(--space-4) var(--space-4); }
+  .panel-body { padding: var(--space-2) var(--space-3); }
+
+  /* Hero */
+  .ds-hero { padding: var(--space-7) 0 var(--space-6); max-width: 100%; }
+  .ds-hero-title { font-size: clamp(32px, 6cqi, 56px); max-width: 100%; }
+
+  /* Row */
+  .row {
+    grid-template-columns: minmax(90px, 12ch) minmax(0, 1fr) auto;
+    gap: var(--space-2); padding: 14px 16px;
+  }
+}
+
+/* ────────────────────────────────────────────────────────────────────
+   Desktop Breakpoint Enhancements (1025px and up)
+   ────────────────────────────────────────────────────────────────────── */
+@media (min-width: 1025px) {
+  /* File Grid — 3-4 columns on desktop */
+  .ds-file-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+    gap: var(--space-4);
+  }
+
+  /* Chat Bubbles */
+  .chat-stack { max-width: min(70%, 480px); }
+  .chat-bubble {
+    max-width: clamp(240px, 70vw, 480px);
+  }
+
+  /* KPI Cards */
+  .kpi {
+    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+    gap: var(--space-3);
+  }
+}
+
 /* ============================================================
    Chat — minimal styles (placeholder for full chat surface)
    ============================================================ */
 .ds-chat { display: flex; flex-direction: column; gap: 12px; padding: var(--space-4); }
-.ds-chat-msg { padding: 12px 18px; background: var(--bg-2); border-radius: var(--r-3); max-width: 36em; }
+.ds-chat-msg { padding: 12px 18px; background: var(--bg-2); border-radius: var(--r-3); max-width: min(90vw, 36em); }
 .ds-chat-msg.user { background: var(--accent); color: var(--accent-fg); align-self: flex-end; }
 .ds-chat-md { font-size: var(--fs-sm); line-height: 1.6; }
 .ds-chat-composer { display: flex; gap: 8px; padding: var(--space-4); }
-.ds-chat-composer input { flex: 1; padding: 13px 18px; background: var(--bg-2); border: 0; border-radius: var(--r-pill); font-family: inherit; font-size: var(--fs-sm); color: var(--fg); outline: 0; }
+.ds-chat-composer input { flex: 1; padding: 13px 18px; background: var(--bg-2); border: 0; border-radius: var(--r-pill); font-family: inherit; font-size: var(--fs-sm); color: var(--fg); }
 .ds-chat-composer input:focus { box-shadow: inset 0 0 0 2px var(--accent); }
 
 /* ============================================================
-   File surface — minimal placeholder
+   File surface — responsive grid + row layouts
    ============================================================ */
+
+/* Default file grid — auto-responsive with CSS Grid */
+.ds-file-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: var(--space-4);
+  /* Responsive via container queries in media breakpoints below */
+}
+
+/* File row — linear layout (used in list view) */
 .ds-file-row {
   display: grid; grid-template-columns: 28px minmax(0, 1fr) auto auto;
   gap: 14px; align-items: center;
   padding: 12px 18px; background: var(--bg);
   border-radius: var(--r-2); color: var(--fg);
+  transition: background var(--dur-snap) var(--ease);
 }
 .ds-file-row + .ds-file-row { margin-top: 3px; }
 .ds-file-row:hover { background: var(--bg-2); }
@@ -565,10 +872,16 @@ table tr.clickable:hover td { background: var(--bg-2); }
 .ds-file-row[data-file-type="archive"]  { border-left: 3px solid var(--flame); padding-left: 11px; }
 .ds-file-row[data-file-type="document"] { border-left: 3px solid var(--sun); padding-left: 11px; }
 .ds-file-row[data-file-type="other"]    { border-left: 3px solid var(--fg-3); padding-left: 11px; }
-.ds-file-row .name { font-weight: 500; }
+.ds-file-row .name { font-weight: 500; font-size: var(--fs-sm); }
 .ds-file-row .size { font-family: var(--ff-mono); font-size: var(--fs-xs); color: var(--fg-3); }
 .ds-file-row .time { font-family: var(--ff-mono); font-size: var(--fs-xs); color: var(--fg-3); }
 
+/* File grid — data-columns attribute (explicit column override) */
+.ds-file-grid[data-columns="1"] { grid-template-columns: 1fr; }
+.ds-file-grid[data-columns="2"] { grid-template-columns: repeat(2, 1fr); }
+.ds-file-grid[data-columns="3"] { grid-template-columns: repeat(3, 1fr); }
+.ds-file-grid[data-columns="4"] { grid-template-columns: repeat(4, 1fr); }
+
 /* ============================================================
    Theme toggle (segmented + compact) — bound to src/theme.js
    ============================================================ */
@@ -643,7 +956,7 @@ table tr.clickable:hover td { background: var(--bg-2); }
 .chat-msg { display: flex; gap: 12px; align-items: flex-start; padding: 2px 0; position: relative; }
 .chat-msg.you { flex-direction: row-reverse; }
 .chat-msg.you .chat-stack { align-items: flex-end; }
-.chat-msg:hover { background: color-mix(in oklab, var(--fg) 1%, transparent); padding: 6px 8px; margin: -4px -8px; border-radius: 8px; transition: background 0.12s ease, padding 0.12s ease; }
+.chat-msg:hover { background: color-mix(in oklab, var(--fg) 1%, transparent); padding: 2px 0; margin: 0; border-radius: 8px; transition: background var(--dur-base) var(--ease); }
 
 .chat-avatar {
   width: 36px; height: 36px; flex-shrink: 0;
@@ -654,7 +967,7 @@ table tr.clickable:hover td { background: var(--bg-2); }
   transition: transform 0.12s ease, box-shadow 0.12s ease;
   position: relative;
 }
-.chat-msg:hover .chat-avatar { transform: scale(1.08); box-shadow: 0 2px 8px color-mix(in oklab, var(--fg) 10%, transparent); }
+.chat-msg:hover .chat-avatar { transform: scale(1.03); box-shadow: 0 1px 4px color-mix(in oklab, var(--fg) 6%, transparent); }
 .chat-msg.you .chat-avatar {
   background: color-mix(in oklab, var(--accent) 26%, var(--bg-3));
   color: var(--accent);
@@ -674,9 +987,10 @@ table tr.clickable:hover td { background: var(--bg-2); }
   border-radius: 14px; line-height: 1.55;
   word-wrap: break-word; overflow-wrap: anywhere;
   font-size: var(--fs-sm);
+  max-width: clamp(200px, 80vw, 480px);
   transition: transform 0.12s ease, box-shadow 0.12s ease;
 }
-.chat-msg:hover .chat-bubble { transform: translateY(-1px); box-shadow: 0 4px 16px color-mix(in oklab, var(--fg) 8%, transparent); }
+.chat-msg:hover .chat-bubble { transform: translateY(-1px); box-shadow: 0 2px 8px color-mix(in oklab, var(--fg) 6%, transparent); transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); }
 .chat-msg.you .chat-bubble { background: var(--accent); color: var(--accent-fg); }
 .chat-msg.aicat .chat-bubble {
   background: color-mix(in oklab, var(--mascot) 14%, var(--bg-2));
@@ -889,28 +1203,35 @@ table tr.clickable:hover td { background: var(--bg-2); }
 .chat-typing { display: inline-flex; gap: 4px; align-items: center; }
 .chat-typing span {
   width: 6px; height: 6px; border-radius: 50%; background: var(--fg-3);
-  animation: chat-typing-bounce 1.4s infinite ease-in-out;
-}
-.chat-typing span:nth-child(1) { animation-delay: 0s; }
-.chat-typing span:nth-child(2) { animation-delay: 0.18s; }
-.chat-typing span:nth-child(3) { animation-delay: 0.36s; }
-@keyframes chat-typing-bounce {
-  0%, 60%, 100% { transform: translateY(0); opacity: 0.55; }
-  30% { transform: translateY(-5px); opacity: 1; }
 }
 
-@keyframes chat-fade-in {
-  from { opacity: 0; transform: translateY(8px); }
-  to { opacity: 1; transform: translateY(0); }
+@media (prefers-reduced-motion: no-preference) {
+  .chat-typing span {
+    animation: chat-typing-bounce 1.4s infinite ease-in-out;
+  }
+  .chat-typing span:nth-child(1) { animation-delay: 0s; }
+  .chat-typing span:nth-child(2) { animation-delay: 0.18s; }
+  .chat-typing span:nth-child(3) { animation-delay: 0.36s; }
+  @keyframes chat-typing-bounce {
+    0%, 60%, 100% { transform: translateY(0); opacity: 0.55; }
+    30% { transform: translateY(-5px); opacity: 1; }
+  }
 }
 
-.chat-msg {
-  animation: chat-fade-in 0.3s ease-out forwards;
+@media (prefers-reduced-motion: no-preference) {
+  @keyframes chat-fade-in {
+    from { opacity: 0; transform: translateY(8px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+
+  .chat-msg {
+    animation: chat-fade-in 0.3s ease-out forwards;
+  }
+  .chat-msg:nth-child(1) { animation-delay: 0s; }
+  .chat-msg:nth-child(2) { animation-delay: 0.05s; }
+  .chat-msg:nth-child(3) { animation-delay: 0.1s; }
+  .chat-msg:nth-child(n+4) { animation-delay: 0.15s; }
 }
-.chat-msg:nth-child(1) { animation-delay: 0s; }
-.chat-msg:nth-child(2) { animation-delay: 0.05s; }
-.chat-msg:nth-child(3) { animation-delay: 0.1s; }
-.chat-msg:nth-child(n+4) { animation-delay: 0.15s; }
 
 .chat-composer {
   display: flex; align-items: flex-end; gap: 8px;
@@ -923,7 +1244,7 @@ table tr.clickable:hover td { background: var(--bg-2); }
   background: var(--bg-2); color: var(--fg);
   border: 1px solid transparent; border-radius: var(--r-pill);
   font-family: inherit; font-size: var(--fs-sm);
-  line-height: 1.4; resize: none; outline: 0;
+  line-height: 1.4; resize: none;
   min-height: 44px; max-height: 200px;
 }
 .chat-composer textarea::placeholder { color: var(--fg-3); }
@@ -941,6 +1262,7 @@ table tr.clickable:hover td { background: var(--bg-2); }
   display: inline-flex; align-items: center; justify-content: center;
   flex-shrink: 0; font-family: var(--ff-body);
   transition: background var(--dur-snap, .15s) var(--ease, ease), transform .1s ease;
+  will-change: transform; contain: layout style paint;
 }
 .chat-composer .send:hover,
 .chat-composer button:hover { transform: scale(1.04); }
@@ -986,7 +1308,6 @@ table tr.clickable:hover td { background: var(--bg-2); }
     font-family: inherit;
     font-size: var(--fs-sm);
     color: var(--fg);
-    outline: 0;
     appearance: none;
     background-image: linear-gradient(45deg, transparent 50%, var(--fg-3) 50%),
         linear-gradient(135deg, var(--fg-3) 50%, transparent 50%);
@@ -1002,7 +1323,7 @@ table tr.clickable:hover td { background: var(--bg-2); }
 .chat-composer textarea {
     resize: none;
     overflow-y: auto;
-    transition: height 0.08s ease;
+    transition: height var(--dur-snap) var(--ease);
     line-height: 1.5;
 }
 .chat-composer textarea:disabled {
@@ -1020,3 +1341,543 @@ table tr.clickable:hover td { background: var(--bg-2); }
     .chat-composer { padding: 8px; }
     .chat-composer textarea { padding: 10px 12px; }
 }
+
+/* ── landscape orientation: reduce vertical space for composer ──────────── */
+@media (max-height: 500px) and (orientation: landscape) {
+    .chat-composer { padding: 6px 0; }
+    .chat-composer textarea { min-height: 36px; max-height: 120px; }
+    .chat-composer .send, .chat-composer button { width: 36px; height: 36px; font-size: 14px; }
+}
+
+/* ============================================================
+   Enhanced UX: Component States, Drag-and-Drop, Context Menus
+   Comprehensive improvements for perfect UX across all surfaces
+   ============================================================ */
+
+/* ────────────────────────────────────────────────────────────
+   Component States — Disabled, Loading, Error, Success
+   ────────────────────────────────────────────────────────────── */
+
+/* Disabled state for all interactive elements */
+.btn:disabled, .btn-primary:disabled, .btn-ghost:disabled,
+button:disabled, [disabled] {
+  opacity: 0.6;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* Loading state — spinning indicator */
+@keyframes spinner-rotate {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+.loading { position: relative; }
+.loading::after {
+  content: '';
+  position: absolute; top: 50%; right: 12px;
+  width: 16px; height: 16px;
+  border: 2px solid var(--bg-3);
+  border-top-color: var(--accent);
+  border-radius: 50%;
+  animation: spinner-rotate 0.8s linear infinite;
+}
+
+/* Error state */
+.error, [data-state="error"],
+.row.error, input.error,
+textarea.error {
+  border-color: var(--warn) !important;
+  background-color: color-mix(in oklab, var(--warn) 6%, var(--bg));
+}
+.error::placeholder { color: color-mix(in oklab, var(--warn) 60%, var(--fg-3)); }
+
+/* Success state */
+.success, [data-state="success"],
+.row.success { background-color: color-mix(in oklab, var(--green-2) 6%, var(--bg)); }
+
+/* Readonly state */
+[readonly], .readonly {
+  background: var(--bg-2);
+  cursor: default;
+  opacity: 0.8;
+}
+
+/* ────────────────────────────────────────────────────────────
+   Enhanced Button Micro-Interactions
+   ────────────────────────────────────────────────────────────── */
+
+/* Button scale feedback on active */
+.btn:active:not(:disabled),
+.btn-primary:active:not(:disabled),
+.btn-ghost:active:not(:disabled),
+button:active:not(:disabled) {
+  transform: scale(0.98);
+}
+
+/* Enhanced hover transitions */
+.btn, .btn-primary, .btn-ghost,
+button, a.row, .row,
+.chip, [role="button"],
+input[type="checkbox"], input[type="radio"] {
+  transition: all var(--dur-snap) var(--ease);
+  will-change: background-color, color, transform;
+}
+
+/* Prevent double-tap zoom on buttons (iOS) */
+.btn, .btn-primary, .btn-ghost, button {
+  -webkit-user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-touch-callout: none;
+}
+
+/* ────────────────────────────────────────────────────────────
+   Drag-and-Drop Styles
+   ────────────────────────────────────────────────────────────── */
+
+/* Draggable element */
+[draggable="true"], .draggable {
+  cursor: grab;
+  user-select: none;
+}
+[draggable="true"]:active { cursor: grabbing; }
+
+/* Drag-over state */
+.drag-over {
+  background: color-mix(in oklab, var(--accent) 12%, var(--bg));
+  border: 2px dashed var(--accent);
+  box-shadow: inset 0 0 0 1px var(--accent);
+}
+
+/* Drag-ghost (semi-transparent dragging element) */
+.drag-ghost {
+  opacity: 0.5;
+  transform: rotate(2deg) scale(0.95);
+}
+
+/* Drop-zone indicator */
+.drop-zone {
+  border: 2px dashed var(--rule-strong);
+  border-radius: var(--r-2);
+  padding: var(--space-4);
+  background: color-mix(in oklab, var(--accent) 4%, var(--bg));
+  min-height: 120px;
+  display: flex; align-items: center; justify-content: center;
+  text-align: center; color: var(--fg-3);
+  transition: all var(--dur-snap) var(--ease);
+}
+.drop-zone.active {
+  border-color: var(--accent);
+  background: color-mix(in oklab, var(--accent) 10%, var(--bg));
+  color: var(--accent);
+}
+
+/* List item reorder indicator */
+.list-item.dragging { opacity: 0.5; }
+.list-item.drag-before::before,
+.list-item.drag-after::after {
+  content: '';
+  position: absolute;
+  left: 0; right: 0; height: 2px;
+  background: var(--accent);
+  animation: pulse-line 0.6s ease-in-out infinite;
+}
+.list-item.drag-before::before { top: -2px; }
+.list-item.drag-after::after { bottom: -2px; }
+
+@keyframes pulse-line {
+  0%, 100% { opacity: 0.3; }
+  50% { opacity: 1; }
+}
+
+/* ────────────────────────────────────────────────────────────
+   Context Menu Styles
+   ────────────────────────────────────────────────────────────── */
+
+.ds-context-menu {
+  position: absolute;
+  background: var(--bg-2);
+  border: 1px solid var(--rule);
+  border-radius: var(--r-2);
+  box-shadow: 0 10px 40px color-mix(in oklab, var(--fg) 20%, transparent);
+  min-width: 160px;
+  z-index: calc(var(--z-overlay, 1000) + 1);
+  padding: 4px 0;
+  animation: context-menu-in 0.15s ease-out;
+}
+
+@keyframes context-menu-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95) translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+.ds-context-menu-item {
+  display: flex; align-items: center; gap: 10px;
+  padding: 10px 14px;
+  cursor: pointer;
+  color: var(--fg);
+  font-size: var(--fs-sm);
+  transition: background var(--dur-snap) var(--ease);
+}
+.ds-context-menu-item:hover {
+  background: var(--bg-3);
+  color: var(--accent);
+}
+.ds-context-menu-item:active {
+  background: color-mix(in oklab, var(--accent) 20%, var(--bg-3));
+}
+.ds-context-menu-item.danger {
+  color: var(--warn);
+}
+.ds-context-menu-item.danger:hover {
+  background: color-mix(in oklab, var(--warn) 12%, var(--bg));
+}
+.ds-context-menu-divider {
+  height: 1px;
+  background: var(--rule);
+  margin: 4px 0;
+}
+.ds-context-menu-icon {
+  width: 16px; height: 16px;
+  flex-shrink: 0;
+  opacity: 0.7;
+}
+
+/* Context menu trigger indicator */
+[data-has-context-menu] {
+  cursor: context-menu;
+}
+
+/* ────────────────────────────────────────────────────────────
+   Enhanced Form Inputs
+   ────────────────────────────────────────────────────────────── */
+
+input[type="text"],
+input[type="email"],
+input[type="password"],
+input[type="number"],
+textarea,
+select {
+  transition: background var(--dur-snap) var(--ease),
+              border-color var(--dur-snap) var(--ease),
+              box-shadow var(--dur-snap) var(--ease);
+}
+
+input[type="text"]::placeholder,
+input[type="email"]::placeholder,
+input[type="password"]::placeholder,
+input[type="number"]::placeholder,
+textarea::placeholder {
+  color: var(--fg-3);
+}
+
+/* Clear button for text inputs */
+input[type="text"]:not(:placeholder-shown) + .input-clear,
+input[type="email"]:not(:placeholder-shown) + .input-clear,
+input[type="password"]:not(:placeholder-shown) + .input-clear {
+  display: inline-flex;
+}
+
+.input-clear {
+  display: none;
+  align-items: center; justify-content: center;
+  width: 32px; height: 32px;
+  cursor: pointer;
+  color: var(--fg-3);
+  background: transparent;
+  border: 0;
+  padding: 0;
+  margin-right: 8px;
+  border-radius: var(--r-1);
+  transition: background var(--dur-snap) var(--ease), color var(--dur-snap) var(--ease);
+}
+.input-clear:hover {
+  background: var(--bg-2);
+  color: var(--fg);
+}
+
+/* ────────────────────────────────────────────────────────────
+   Accessibility Enhancements
+   ────────────────────────────────────────────────────────────── */
+
+/* Enhanced focus-visible for all interactive elements */
+[role="button"]:focus-visible,
+[role="link"]:focus-visible,
+[role="tab"]:focus-visible,
+.row:focus-visible,
+.row[tabindex]:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+/* Skip to main content link */
+.skip-to-main {
+  position: absolute; top: -40px; left: 0;
+  background: var(--accent); color: var(--accent-fg);
+  padding: 8px 16px; border-radius: var(--r-1);
+  text-decoration: none; z-index: var(--z-overlay, 1000);
+}
+.skip-to-main:focus { top: 10px; }
+
+/* Reduced motion preferences */
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+/* ────────────────────────────────────────────────────────────
+   Performance: GPU Acceleration & Paint Optimization
+   ────────────────────────────────────────────────────────────── */
+
+/* Promote hover-interactive elements to compositing layer */
+.btn:hover, .btn-primary:hover, .btn-ghost:hover,
+a:hover, .row:hover,
+button:hover, [role="button"]:hover {
+  transform: translateZ(0);
+}
+
+/* Contain layout repaints on self-contained components */
+.panel, .row, .chip, .btn, button {
+  contain: layout style paint;
+}
+
+/* ────────────────────────────────────────────────────────────
+   Mobile Touch Optimizations
+   ────────────────────────────────────────────────────────────── */
+
+@media (hover: none) and (pointer: coarse) {
+  /* Mobile devices: larger touch targets, faster responses */
+  .btn, .btn-primary, .btn-ghost,
+  button, a.row, [role="button"] {
+    min-height: 48px;
+    min-width: 48px;
+    padding: 12px 20px;
+  }
+
+  /* Remove hover effects on touch devices (use active instead) */
+  .btn:hover, .btn-primary:hover, .btn-ghost:hover {
+    background-color: inherit;
+  }
+
+  /* Momentum scrolling for iOS */
+  .app-side, .panel, .row {
+    -webkit-overflow-scrolling: touch;
+  }
+
+  /* Long-press feedback for drag-enabled items */
+  [draggable="true"], .draggable {
+    -webkit-user-select: none;
+    -webkit-touch-callout: none;
+  }
+}
+
+/* ────────────────────────────────────────────────────────────
+   Theme Transition Smoothness
+   ────────────────────────────────────────────────────────────── */
+
+html {
+  transition: background-color var(--dur-base) var(--ease),
+              color var(--dur-base) var(--ease);
+}
+
+body {
+  transition: background-color var(--dur-base) var(--ease),
+              color var(--dur-base) var(--ease);
+}
+
+/* ────────────────────────────────────────────────────────────
+   Empty State & Loading States
+   ────────────────────────────────────────────────────────────── */
+
+.empty-state {
+  display: flex; flex-direction: column; align-items: center; gap: var(--space-4);
+  padding: var(--space-8) var(--space-4);
+  text-align: center; color: var(--fg-3);
+}
+.empty-state-icon {
+  font-size: 48px; opacity: 0.4;
+}
+.empty-state-title {
+  font-size: var(--fs-lg); font-weight: 600; color: var(--fg-2);
+}
+.empty-state-body {
+  font-size: var(--fs-sm); max-width: 40ch;
+}
+
+/* Skeleton loading state */
+.skeleton {
+  background: linear-gradient(
+    90deg,
+    var(--bg-2) 0%,
+    var(--bg-3) 50%,
+    var(--bg-2) 100%
+  );
+  background-size: 200% 100%;
+  animation: skeleton-load 1.5s infinite;
+  border-radius: var(--r-2);
+}
+
+@keyframes skeleton-load {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+
+.skeleton-line { height: 12px; margin-bottom: 12px; }
+.skeleton-title { height: 24px; margin-bottom: 16px; width: 60%; }
+
+/* ────────────────────────────────────────────────────────────
+   Toast Notification Styles
+   ────────────────────────────────────────────────────────────── */
+
+.toast {
+  position: fixed;
+  bottom: 24px; right: 24px;
+  background: var(--bg-2);
+  border: 1px solid var(--rule);
+  border-radius: var(--r-2);
+  padding: var(--space-3) var(--space-4);
+  max-width: 320px;
+  box-shadow: 0 10px 40px color-mix(in oklab, var(--fg) 20%, transparent);
+  animation: toast-slide-in 0.3s ease-out;
+  z-index: calc(var(--z-overlay, 1000) + 10);
+}
+
+@keyframes toast-slide-in {
+  from {
+    opacity: 0;
+    transform: translateX(400px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.toast.error { border-color: var(--warn); }
+.toast.success { border-color: var(--green-2); }
+.toast.warning { border-color: var(--sun); }
+
+@media (max-width: 480px) {
+  .toast {
+    bottom: 16px; right: 16px; left: 16px;
+    max-width: none;
+  }
+}
+
+/* ============================================================
+   Spinner — animated loading indicator
+   ============================================================ */
+.ds-spinner {
+  display: inline-flex;
+  gap: 4px;
+  align-items: center;
+  height: 16px;
+}
+.ds-spinner span {
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  background: var(--accent);
+  animation: ds-bounce 1.4s infinite ease-in-out;
+}
+.ds-spinner span:nth-child(1) { animation-delay: 0s; }
+.ds-spinner span:nth-child(2) { animation-delay: 0.18s; }
+.ds-spinner span:nth-child(3) { animation-delay: 0.36s; }
+
+.ds-spinner-lg { height: 24px; gap: 6px; }
+.ds-spinner-lg span { width: 6px; height: 6px; }
+
+.ds-spinner-sm { height: 12px; gap: 2px; }
+.ds-spinner-sm span { width: 2px; height: 2px; }
+
+@keyframes ds-bounce {
+  0%, 80%, 100% { transform: translateY(0); }
+  40% { transform: translateY(-8px); }
+}
+
+/* ============================================================
+   Skeleton — animated loading placeholder
+   ============================================================ */
+.ds-skeleton-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+.ds-skeleton {
+  background: linear-gradient(90deg, var(--bg-2) 25%, var(--bg-3) 50%, var(--bg-2) 75%);
+  background-size: 200% 100%;
+  animation: ds-shimmer 1.5s infinite;
+  border-radius: var(--r-1);
+}
+
+@keyframes ds-shimmer {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+
+/* ============================================================
+   Alert — contextual message banner
+   ============================================================ */
+.ds-alert {
+  display: flex;
+  gap: var(--space-3);
+  align-items: flex-start;
+  padding: var(--space-3) var(--space-4);
+  border-radius: var(--r-1);
+  background: var(--panel-1);
+  border: 1px solid var(--rule-strong);
+  color: var(--fg);
+}
+
+.ds-alert-info { --alert-tone: var(--sky); }
+.ds-alert-success { --alert-tone: var(--green); }
+.ds-alert-warn { --alert-tone: var(--sun); }
+.ds-alert-error { --alert-tone: var(--warn); }
+
+.ds-alert-icon {
+  flex-shrink: 0;
+  color: var(--alert-tone);
+  font-weight: 600;
+  min-width: 20px;
+  text-align: center;
+}
+
+.ds-alert-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.ds-alert-title {
+  font-weight: 500;
+  font-size: var(--fs-sm);
+}
+
+.ds-alert-message {
+  font-size: var(--fs-sm);
+  color: var(--fg-2);
+}
+
+.ds-alert-dismiss {
+  flex-shrink: 0;
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--fg-3);
+  padding: 0;
+  font-size: 14px;
+  line-height: 1;
+  min-width: 20px;
+  text-align: center;
+  transition: color var(--dur-snap) var(--ease);
+}
+.ds-alert-dismiss:hover { color: var(--fg); }