anentrypoint-design 0.0.322 → 0.0.324

package/src/css/app-shell/states-interactions.css

@@ -0,0 +1,696 @@
+/* ============================================================
+   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. The `.is-disabled` class
+   variants cover Btn()'s anchor-rendered case (shell.js) — an <a> has no
+   :disabled pseudo-class, so a disabled link-styled button relies entirely
+   on this class selector for its visual treatment (aria-disabled + tabindex
+   are set in JS; this is the paired CSS half). */
+.btn:disabled, .btn-primary:disabled, .btn-ghost:disabled,
+.btn.is-disabled, .btn-primary.is-disabled, .btn-ghost.is-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); }
+}
+/* Reusable spin utility: rotates the element (e.g. a refresh Icon used as a
+   busy indicator) via the shared spinner-rotate keyframe. Respects reduced
+   motion. Use instead of a decorative rotation glyph. */
+.ds-spin { animation: spinner-rotate 0.8s linear infinite; transform-origin: center; }
+@media (prefers-reduced-motion: reduce) { .ds-spin { animation: none; } }
+
+.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 — transition only the properties that actually
+   change (not `all`, which animates layout and is a perf trap), and drop the
+   blanket `will-change` (it forces a permanent compositor layer per element). */
+.btn, .btn-primary, .btn-ghost,
+button, a.row, .row,
+.chip, [role="button"],
+input[type="checkbox"], input[type="radio"] {
+  transition: background-color var(--dur-snap) var(--ease),
+              color var(--dur-snap) var(--ease),
+              box-shadow var(--dur-snap) var(--ease),
+              transform var(--dur-snap) var(--ease);
+}
+
+/* Native checkbox/radio tint — browser default is UA blue, which fights the
+   single lime lead accent wherever a raw control lands outside a bespoke
+   toggle (e.g. signin's "remember me"). accent-color re-tints the native
+   control box without hand-drawing a replacement. */
+input[type="checkbox"], input[type="radio"] {
+  accent-color: var(--accent-ink);
+}
+
+/* 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 {
+  border: 2px dashed 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-ink);
+}
+
+/* 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);
+}
+.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; }
+}
+@media (prefers-reduced-motion: no-preference) {
+  .list-item.drag-before::before,
+  .list-item.drag-after::after { animation: pulse-line 0.6s ease-in-out infinite; }
+}
+
+/* ------------------------------------------------------------
+   Context Menu Styles
+   -------------------------------------------------------------- */
+
+.ds-context-menu {
+  position: absolute;
+  background: var(--bg-2);
+  border: 1px solid var(--rule);
+  border-radius: var(--r-2);
+  box-shadow: var(--shadow-overlay);
+  min-width: 160px;
+  z-index: calc(var(--z-overlay, 1000) + 1);
+  padding: 4px 0;
+}
+
+@keyframes context-menu-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95) translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+@media (prefers-reduced-motion: no-preference) {
+  .ds-context-menu { animation: context-menu-in 0.15s ease-out; }
+}
+
+.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-ink);
+}
+.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
+   -------------------------------------------------------------- */
+
+/* Base chrome for any BARE native control (outside .ds-field/.row-form/.input):
+   the same editorial tonal-fill + printed-baseline-rule as .ds-field, so a raw
+   <input> is never a browser-default white box in dark mode. The guards are
+   wrapped in :where() so they add ZERO specificity — the whole selector stays
+   at (0,1,1), exactly like `.ds-field input`, so the later .ds-field / .ds-field--sm
+   / .row-form descendant rules win by source order instead of being out-specified
+   (a bare :not(.input) counts as a class and would beat every .ds-field rule,
+   which clobbered the size variants). */
+input[type="text"]:where(:not(.input):not(.ds-search-input)),
+input[type="email"]:where(:not(.input):not(.ds-search-input)),
+input[type="password"]:where(:not(.input):not(.ds-search-input)),
+input[type="number"]:where(:not(.input):not(.ds-search-input)),
+input[type="search"]:where(:not(.input):not(.ds-search-input)),
+input[type="url"]:where(:not(.input):not(.ds-search-input)),
+input[type="tel"]:where(:not(.input):not(.ds-search-input)),
+textarea:where(:not(.input)),
+select:where(:not(.ds-select)) {
+  font: inherit; color: var(--fg);
+  background: var(--bg-2);
+  border: 0;
+  box-shadow: inset 0 0 0 var(--bw-hair, 1px) var(--rule),
+              inset 0 calc(-1 * var(--bw-rule)) 0 var(--rule-strong);
+  border-radius: var(--r-1);
+  padding: 0 var(--space-3);
+  transition: background var(--dur-snap) var(--ease),
+              border-color var(--dur-snap) var(--ease),
+              box-shadow var(--dur-snap) var(--ease);
+}
+/* Single-line bare controls snap to the field height; textarea keeps auto
+   height with symmetric padding (its content decides the box). */
+input[type="text"]:where(:not(.input):not(.ds-search-input)),
+input[type="email"]:where(:not(.input):not(.ds-search-input)),
+input[type="password"]:where(:not(.input):not(.ds-search-input)),
+input[type="number"]:where(:not(.input):not(.ds-search-input)),
+input[type="search"]:where(:not(.input):not(.ds-search-input)),
+input[type="url"]:where(:not(.input):not(.ds-search-input)),
+input[type="tel"]:where(:not(.input):not(.ds-search-input)),
+select:where(:not(.ds-select)) {
+  height: var(--field-height);
+}
+textarea:where(:not(.input)) { padding: var(--space-2) var(--space-3); min-height: calc(4 * 1.5em); }
+input[type="text"]:where(:not(.input):not(.ds-search-input)):focus-visible,
+input[type="email"]:where(:not(.input):not(.ds-search-input)):focus-visible,
+input[type="password"]:where(:not(.input):not(.ds-search-input)):focus-visible,
+input[type="number"]:where(:not(.input):not(.ds-search-input)):focus-visible,
+input[type="search"]:where(:not(.input):not(.ds-search-input)):focus-visible,
+input[type="url"]:where(:not(.input):not(.ds-search-input)):focus-visible,
+input[type="tel"]:where(:not(.input):not(.ds-search-input)):focus-visible,
+textarea:where(:not(.input)):focus-visible,
+select:where(:not(.ds-select)):focus-visible {
+  outline: none;
+  background: var(--bg);
+  box-shadow: inset 0 0 0 var(--bw-hair, 1px) var(--rule),
+              inset 0 calc(-1 * var(--bw-chunk)) 0 var(--accent);
+}
+
+input[type="text"]::placeholder,
+input[type="email"]::placeholder,
+input[type="password"]::placeholder,
+input[type="number"]::placeholder,
+input[type="search"]::placeholder,
+input[type="url"]::placeholder,
+textarea::placeholder {
+  color: var(--fg-3);
+}
+
+/* Long-form reading voice — quiet sans, generous line-height, capped to a
+   readable measure so a wide viewport never stretches body copy edge to
+   edge. Links use --accent-ink (never the bare fill, which is unreadable
+   as text). */
+.prose {
+  max-width: var(--measure);
+  font-family: var(--ff-body); font-size: var(--fs-body); line-height: 1.6;
+  color: var(--fg);
+}
+.prose p { margin: 0 0 var(--space-4) 0; }
+.prose p:last-child { margin-bottom: 0; }
+.prose a { color: var(--accent-ink); text-decoration-color: var(--rule-strong); text-underline-offset: 0.15em; }
+.prose a:hover { text-decoration-color: currentColor; }
+
+/* Rubber-stamp motif — a bordered, uppercase, letter-spaced badge with a
+   slight built-in rotation (variants may override via inline transform for
+   a stronger tilt). Max 1 per page per the component's own caption. */
+.stamp {
+  display: inline-block;
+  font-family: var(--ff-mono); font-size: var(--fs-xs); font-weight: 700;
+  text-transform: uppercase; letter-spacing: 0.08em;
+  padding: var(--space-1-5, var(--space-2)) var(--space-3);
+  border: 2px solid var(--fg);
+  border-radius: var(--r-hair);
+  color: var(--fg);
+  transform: rotate(-2deg);
+  white-space: nowrap;
+}
+.stamp.ink { background: var(--ink); border-color: var(--ink); color: var(--paper); }
+.stamp.acid { background: var(--accent); border-color: var(--accent-ink); color: var(--accent-ink); }
+.stamp.purple { border-color: var(--purple-2); color: var(--purple-2); }
+.stamp.mascot { border-color: var(--mascot); color: var(--mascot-deep); }
+
+/* Same rubber-stamp face, but a real interactive <button> — resets UA button
+   chrome so it isn't blue link text in a browser default box. */
+.btn-stamp {
+  display: inline-block; cursor: pointer;
+  font-family: var(--ff-mono); font-size: var(--fs-xs); font-weight: 700;
+  text-transform: uppercase; letter-spacing: 0.08em;
+  padding: var(--space-1-5, var(--space-2)) var(--space-3);
+  border: 2px solid var(--fg);
+  border-radius: var(--r-hair);
+  background: transparent; color: var(--fg);
+  transition: background var(--dur-snap) var(--ease), color var(--dur-snap) var(--ease);
+}
+.btn-stamp:hover { background: var(--panel-hover); }
+.btn-stamp.acid { border-color: var(--accent-ink); color: var(--accent-ink); }
+.btn-stamp.acid:hover { background: var(--accent-tint); }
+.btn-stamp.purple { border-color: var(--purple-2); color: var(--purple-2); }
+.btn-stamp.mascot { border-color: var(--mascot); color: var(--mascot-deep); }
+
+/* Structural hairlines — "no boxes, no cards, structure comes from rules."
+   Three weights: .rule (default separator), .rule-double (major section
+   break), .rule-dotted (optional/skippable). Applied to a bare <hr>, which
+   otherwise falls back to the browser's default inset groove line. */
+hr.rule, hr.rule-double, hr.rule-dotted {
+  width: 100%; height: 0; border: 0;
+}
+hr.rule { border-top: 1px solid var(--rule); }
+hr.rule-double { border-top: 3px double var(--rule-strong); }
+hr.rule-dotted { border-top: 1px dotted var(--rule-strong); }
+
+/* Hairline-only text input — no box, no fill. A single bottom rule that
+   thickens to 2px on focus, matching the row/rule zero-border aesthetic
+   instead of a browser-default boxed field. */
+.input {
+  display: block; width: 100%; box-sizing: border-box;
+  border: 0; border-bottom: 1px solid var(--rule-strong);
+  border-radius: var(--r-0);
+  background: transparent;
+  padding: var(--space-2) var(--space-1);
+  font: inherit; color: var(--fg);
+}
+.input::placeholder { color: var(--fg-3); }
+.input:focus-visible {
+  outline: none;
+  border-bottom-width: 2px;
+  border-bottom-color: var(--accent-ink);
+}
+
+/* -- Field controls: themed base for TextField / Select / SearchInput --
+   Root fix: previously only `transition` was set, so themed apps got
+   browser-default white boxes in dark mode and labels collided with inputs
+   because `.ds-field` had no layout. */
+.ds-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1, 6px);
+  align-items: stretch;
+  width: 100%;
+}
+.ds-field-label {
+  font-size: var(--fs-sm, 14px);
+  color: var(--fg-2);
+  line-height: 1.3;
+}
+.ds-field-hint {
+  font-size: var(--fs-tiny, 13px);
+  color: var(--fg-3);
+  line-height: 1.35;
+}
+.ds-field-count {
+  font-size: var(--fs-tiny, 13px);
+  color: var(--fg-3);
+  align-self: flex-end;
+}
+
+.ds-field input,
+.ds-field textarea,
+.ds-field .ds-select,
+.ds-search-input {
+  width: 100%;
+  box-sizing: border-box;
+  font: inherit;
+  color: var(--fg);
+  background: var(--bg-2);
+  border: 0;
+  /* Editorial field — tonal fill with a printed baseline rule that thickens to
+     the electric lead on focus, instead of a uniform hairline box. */
+  box-shadow: inset 0 0 0 var(--bw-hair, 1px) var(--rule),
+              inset 0 calc(-1 * var(--bw-rule)) 0 var(--rule-strong);
+  /* Tighter corner than the old --r-2 (14px): a dense pro control, not a soft
+     consumer box. Single-line controls snap to --field-height with h-only
+     padding so they align pixel-exact with buttons on the same --ctl-md rung. */
+  border-radius: var(--r-1);
+  height: var(--field-height);
+  padding: 0 var(--space-3);
+  transition: box-shadow var(--dur-snap) var(--ease), background var(--dur-snap) var(--ease);
+}
+/* textarea is multi-line: height is auto (min-height instead), keep symmetric
+   vertical padding so text doesn't sit flush to the top edge. */
+.ds-field textarea { height: auto; min-height: calc(4 * 1.5em); padding: var(--space-2) var(--space-3); resize: vertical; }
+
+/* Field size ladder (size prop on TextField/Select/SearchInput). md == base.
+   sm/lg retune height + h-padding + font off the --ctl-* ladder, matching the
+   button ladder so a form of mixed controls stays on one rhythm. */
+.ds-field--sm input, .ds-field--sm .ds-select, .ds-field--sm .ds-search-input {
+  height: var(--ctl-sm); padding: 0 var(--space-2-5); font-size: var(--fs-tiny);
+}
+.ds-field--sm textarea { height: auto; padding: var(--space-1-75) var(--space-2-5); font-size: var(--fs-tiny); }
+.ds-field--lg input, .ds-field--lg .ds-select, .ds-field--lg .ds-search-input {
+  height: var(--ctl-lg); padding: 0 var(--space-4); font-size: var(--fs-body);
+}
+.ds-field--lg textarea { height: auto; padding: var(--space-2-5) var(--space-4); font-size: var(--fs-body); }
+.ds-search-input::placeholder { color: var(--fg-3); }
+/* Only present when SearchInput is passed resultCount or has a value (clear
+   button) - transparent to any flex/grid layout the bare input previously
+   sat in directly. */
+.ds-search-input-wrap { display: contents; }
+
+/* Visible clear (X) button for SearchInput - mirrors .ds-alert-dismiss's
+   ghost-icon treatment but sized to the kit's 44px touch-target floor
+   (app-shell.css already establishes this convention for .ds-file-check /
+   .ds-density-btn / .ds-upload-act etc). Positioned by the consumer's own
+   flex/grid context (ds-search-input-wrap is display:contents), so it simply
+   sits after the input in DOM order. */
+.ds-search-clear {
+  display: inline-flex;
+  align-items: center; justify-content: center;
+  min-width: 44px; min-height: 44px;
+  flex-shrink: 0;
+  cursor: pointer;
+  color: var(--fg-3);
+  background: transparent;
+  border: 0;
+  padding: 0;
+  border-radius: var(--r-1);
+  transition: background var(--dur-snap) var(--ease), color var(--dur-snap) var(--ease);
+}
+.ds-search-clear:hover { background: var(--bg-2); color: var(--fg); }
+.ds-search-clear:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
+
+.ds-field input:focus-visible,
+.ds-field textarea:focus-visible,
+.ds-field .ds-select:focus-visible,
+.ds-search-input:focus-visible {
+  outline: none;
+  background: var(--bg);
+  /* Focus thickens the baseline to the lead accent — the printed-rule tell. */
+  box-shadow: inset 0 0 0 var(--bw-hair, 1px) var(--rule),
+              inset 0 calc(-1 * var(--bw-chunk)) 0 var(--accent);
+}
+.ds-field input:disabled,
+.ds-field textarea:disabled,
+.ds-field .ds-select:disabled {
+  opacity: .55;
+  cursor: not-allowed;
+}
+.ds-field input[aria-invalid="true"],
+.ds-field textarea[aria-invalid="true"] {
+  box-shadow: inset 0 0 0 var(--bw-hair, 1px) var(--flame);
+}
+
+/* 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
+   -------------------------------------------------------------- */
+
+/* Base focus-visible: 2px ring + 2px offset clears dark bg-3 surfaces (WCAG 1.4.11) */
+:focus-visible {
+  outline: var(--focus-w) solid var(--focus-color);
+  outline-offset: var(--focus-offset);
+}
+
+/* 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: var(--focus-w) solid var(--focus-color);
+  outline-offset: var(--focus-offset);
+}
+
+/* Skip to main content link */
+.skip-to-main {
+  position: absolute; top: -40px; left: 0;
+  background: var(--fg); color: var(--bg);
+  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 — scoped to the DS surface so it doesn't reach
+   into and neutralize the host document's own motion. */
+@media (prefers-reduced-motion: reduce) {
+  .ds-247420 *, .app * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+  /* Kill the residual paint frame of looping skeleton/shimmer placeholders and
+     give reduced-motion users a steady placeholder fill instead. */
+  .skeleton, .ds-skeleton, .ds-session-row-skeleton .ds-skel {
+    animation: none !important;
+    background: var(--bg-2) !important;
+  }
+}
+
+/* ------------------------------------------------------------
+   Performance
+   -------------------------------------------------------------- */
+
+/* Limit layout/style containment to self-contained components. `paint` is
+   intentionally omitted — it clips focus rings, tooltips and dropdowns that
+   emanate from a contained .row/.btn. */
+.panel, .row {
+  contain: layout style;
+}
+
+/* ------------------------------------------------------------
+   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"],
+  .ds-icon-btn, .composer-btn {
+    min-height: 48px;
+    min-width: 48px;
+    padding: 12px 20px;
+  }
+  /* Icon buttons stay square — the padding bump above would distort them. */
+  .ds-icon-btn, .composer-btn { padding: 0; }
+
+  /* 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;
+  }
+}
+
+/* Touch floor also for coarse-pointer devices that report hover (hybrid
+   laptops/tablets with mice) — the block above requires hover:none too. */
+@media (pointer: coarse) {
+  .ds-icon-btn, .ds-icon-btn-xs, .ds-icon-btn-sm, .ds-icon-btn-base {
+    min-width: 44px; min-height: 44px;
+  }
+  .btn, .btn-primary, .btn-ghost,
+  .app-topbar nav a, .app-side a { min-height: 44px; }
+}
+
+/* ------------------------------------------------------------
+   Theme Transition Smoothness
+   -------------------------------------------------------------- */
+
+/* Scoped to the DS wrapper so the design system never reaches out and
+   animates the host document's html/body. */
+.ds-247420, .app {
+  transition: background-color var(--dur-base) var(--ease),
+              color var(--dur-base) var(--ease);
+}
+
+/* ------------------------------------------------------------
+   Empty State & Loading States
+   -------------------------------------------------------------- */
+
+/* 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: var(--shadow-overlay);
+  z-index: calc(var(--z-overlay, 1000) + 10);
+}
+
+@keyframes toast-slide-in {
+  from {
+    opacity: 0;
+    transform: translateX(400px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+@media (prefers-reduced-motion: no-preference) {
+  .toast { animation: toast-slide-in 0.3s ease-out; }
+}
+
+.toast.error { border-color: var(--warn); }
+.toast.success { border-color: var(--green-2); }
+/* --sun measures well under 3:1 against every app background (1.1-1.5:1) -
+   a border effectively invisible in light theme; --amber is the tuned sibling
+   warning tone already used for this exact severity elsewhere. */
+.toast.warning { border-color: var(--amber); }
+
+@media (max-width: 480px) {
+  .toast {
+    bottom: 16px; right: 16px; left: 16px;
+    max-width: none;
+  }
+}