barua-ui 0.13.0 → 0.14.0

package/css/base.css

@@ -15,6 +15,9 @@
   html {
     -webkit-text-size-adjust: 100%;
     tab-size: 4;
+    /* Every rem in the system answers to this: data-scale="110" on <html>
+       makes the whole interface a tenth larger, type and spacing together. */
+    font-size: calc(100% * var(--b-scale, 1));
   }
 
   body {
@@ -64,7 +67,9 @@
     color: var(--b-color-accent-text);
     text-decoration: none;
   }
-  a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
+  @media (hover: hover) {
+    a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
+  }
 
   code, kbd, samp, pre { font-family: var(--b-font-mono); font-size: 0.875em; }
   code {

package/css/components/actions.css

@@ -12,7 +12,7 @@
     align-items: center;
     justify-content: center;
     gap: var(--b-space-2);
-    height: var(--b-control-h-md);
+    height: var(--b-field-h);
     /* The border is real and transparent, the padding pays for it, and the
        rendered box does not move by a pixel. Windows High Contrast strips
        backgrounds and shadows; a button that was only a fill became bare
@@ -34,7 +34,9 @@
                 box-shadow var(--b-duration-fast) var(--b-ease-standard),
                 scale var(--b-duration-instant) var(--b-ease-standard);
   }
-  .b-btn:hover { background: var(--b-fill); text-decoration: none; }
+  @media (hover: hover) {
+    .b-btn:hover { background: var(--b-fill); text-decoration: none; }
+  }
   .b-btn:active, .b-btn.is-pressed { scale: 0.97; }
   .b-btn svg { width: 1.1em; height: 1.1em; flex: none; }
 
@@ -44,15 +46,19 @@
     background: var(--b-color-accent-fill);
     box-shadow: var(--b-shadow-xs);
   }
-  .b-btn--primary:hover { background: var(--b-color-accent-fill-hover); }
+  @media (hover: hover) {
+    .b-btn--primary:hover { background: var(--b-color-accent-fill-hover); }
+  }
   .b-btn--primary.is-active { background: var(--b-color-accent-fill-active); }
 
   .b-btn--tinted {
     color: var(--b-color-accent-text);
     background: var(--b-color-accent-soft);
   }
-  .b-btn--tinted:hover {
-    background: color-mix(in srgb, var(--b-color-accent) 22%, transparent);
+  @media (hover: hover) {
+    .b-btn--tinted:hover {
+      background: color-mix(in srgb, var(--b-color-accent) 22%, transparent);
+    }
   }
 
   /* Liquid glass primary — glossy accent pane with a light-catch */
@@ -65,10 +71,12 @@
       inset 0 0 0 1px color-mix(in srgb, var(--b-color-accent) 55%, transparent),
       var(--b-shadow-accent);
   }
-  .b-btn--liquid:hover {
-    background:
-      radial-gradient(120% 140% at 30% 12%, rgba(255, 255, 255, 0.45), transparent 44%),
-      var(--b-color-accent-hover);
+  @media (hover: hover) {
+    .b-btn--liquid:hover {
+      background:
+        radial-gradient(120% 140% at 30% 12%, rgba(255, 255, 255, 0.45), transparent 44%),
+        var(--b-color-accent-hover);
+    }
   }
   .b-btn--liquid.is-loading::after {
     border-color: rgba(255, 255, 255, 0.35);
@@ -79,10 +87,14 @@
     background: transparent;
     border-color: var(--b-border-strong);
   }
-  .b-btn--outline:hover { background: var(--b-fill-quaternary); }
+  @media (hover: hover) {
+    .b-btn--outline:hover { background: var(--b-fill-quaternary); }
+  }
 
   .b-btn--ghost { background: transparent; }
-  .b-btn--ghost:hover { background: var(--b-fill-tertiary); }
+  @media (hover: hover) {
+    .b-btn--ghost:hover { background: var(--b-fill-tertiary); }
+  }
 
   .b-btn--glass {
     position: relative;
@@ -104,9 +116,11 @@
     box-shadow: var(--b-glass-edge);
     pointer-events: none;
   }
-  .b-btn--glass:hover {
-    background: var(--b-material-regular-bg);
-    box-shadow: var(--b-glass-lensing), var(--b-glass-ambient);
+  @media (hover: hover) {
+    .b-btn--glass:hover {
+      background: var(--b-material-regular-bg);
+      box-shadow: var(--b-glass-lensing), var(--b-glass-ambient);
+    }
   }
   .b-btn--glass:active {
     scale: 0.97;
@@ -147,8 +161,10 @@
     box-shadow: var(--b-glass-edge);
     pointer-events: none;
   }
-  .b-btn--glass-clear:hover {
-    background: light-dark(rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.10));
+  @media (hover: hover) {
+    .b-btn--glass-clear:hover {
+      background: light-dark(rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.10));
+    }
   }
   .b-btn--glass-clear:active {
     scale: 0.97;
@@ -186,8 +202,10 @@
     box-shadow: var(--b-glass-edge);
     pointer-events: none;
   }
-  .b-btn--glass-prominent:hover {
-    background: light-dark(rgba(10, 122, 255, 0.18), rgba(10, 132, 255, 0.26));
+  @media (hover: hover) {
+    .b-btn--glass-prominent:hover {
+      background: light-dark(rgba(10, 122, 255, 0.18), rgba(10, 132, 255, 0.26));
+    }
   }
   .b-btn--glass-prominent:active {
     scale: 0.97;
@@ -209,11 +227,17 @@
   }
 
   .b-btn--danger { color: var(--b-color-on-accent); background: var(--b-color-danger-fill); }
-  .b-btn--danger:hover { background: color-mix(in srgb, var(--b-color-danger-fill) 85%, black); }
+  @media (hover: hover) {
+    .b-btn--danger:hover { background: color-mix(in srgb, var(--b-color-danger-fill) 85%, black); }
+  }
   .b-btn--danger-tinted { color: var(--b-color-danger-text); background: var(--b-color-danger-soft); }
-  .b-btn--danger-tinted:hover { background: color-mix(in srgb, var(--b-color-red) 22%, transparent); }
+  @media (hover: hover) {
+    .b-btn--danger-tinted:hover { background: color-mix(in srgb, var(--b-color-red) 22%, transparent); }
+  }
   .b-btn--success { color: var(--b-color-on-accent); background: var(--b-color-success-fill); }
-  .b-btn--success:hover { background: color-mix(in srgb, var(--b-color-success) 85%, black); }
+  @media (hover: hover) {
+    .b-btn--success:hover { background: color-mix(in srgb, var(--b-color-success) 85%, black); }
+  }
 
   /* Sizes */
   .b-btn--xs { height: var(--b-control-h-xs); padding-inline: calc(var(--b-space-2) - 1px); font-size: var(--b-text-caption); border-radius: var(--b-radius-sm); }
@@ -255,7 +279,7 @@
   /* ---- Floating Action Button ------------------------------------------- */
   .b-fab {
     position: fixed;
-    inset-block-end: max(var(--b-space-6), env(safe-area-inset-bottom));
+    inset-block-end: calc(var(--b-bottomnav-h, 0px) + max(var(--b-space-6), env(safe-area-inset-bottom)));
     inset-inline-end: var(--b-space-6);
     z-index: var(--b-z-sticky);
     width: 3.5rem; height: 3.5rem;
@@ -265,7 +289,9 @@
     background: var(--b-color-accent-fill);
     box-shadow: var(--b-shadow-lg), var(--b-shadow-accent);
   }
-  .b-fab:hover { background: var(--b-color-accent-hover); translate: 0 -2px; }
+  @media (hover: hover) {
+    .b-fab:hover { background: var(--b-color-accent-hover); translate: 0 -2px; }
+  }
   .b-fab--extended { width: auto; padding-inline: var(--b-space-5); gap: var(--b-space-2); }
 
   /* ---- Button Group ------------------------------------------------------ */
@@ -306,8 +332,10 @@
     color: var(--b-color-accent-text);
     background: var(--b-color-accent-soft);
   }
-  .b-toggle-btn[aria-pressed="true"]:hover {
-    background: color-mix(in srgb, var(--b-color-accent) 22%, transparent);
+  @media (hover: hover) {
+    .b-toggle-btn[aria-pressed="true"]:hover {
+      background: color-mix(in srgb, var(--b-color-accent) 22%, transparent);
+    }
   }
 
   /* ---- Link & Link Group ------------------------------------------------- */
@@ -322,9 +350,13 @@
     border: none;
     padding: 0;
   }
-  .b-link:hover { text-decoration: underline; text-underline-offset: 0.2em; }
+  @media (hover: hover) {
+    .b-link:hover { text-decoration: underline; text-underline-offset: 0.2em; }
+  }
   .b-link--muted { color: var(--b-text-secondary); }
-  .b-link--muted:hover { color: var(--b-text); }
+  @media (hover: hover) {
+    .b-link--muted:hover { color: var(--b-text); }
+  }
   .b-link--danger { color: var(--b-color-danger-text); }
   .b-link svg { width: 1em; height: 1em; }
   .b-link-group {

package/css/components/auth.css

@@ -72,7 +72,9 @@
     gap: var(--b-space-2);
     font-weight: var(--b-weight-medium);
   }
-  .b-btn--provider:hover { background: var(--b-fill-quaternary); }
+  @media (hover: hover) {
+    .b-btn--provider:hover { background: var(--b-fill-quaternary); }
+  }
 
   /* ---- OTP Input ----------------------------------------------------------------- */
   .b-otp {
@@ -147,7 +149,9 @@
     cursor: pointer;
     text-align: start;
   }
-  .b-account:hover { background: var(--b-fill-tertiary); }
+  @media (hover: hover) {
+    .b-account:hover { background: var(--b-fill-tertiary); }
+  }
   .b-account.is-active { background: var(--b-color-accent-soft); }
   .b-account__meta { flex: 1; min-width: 0; }
   .b-account__name { font-size: var(--b-text-footnote); font-weight: var(--b-weight-semibold); }
@@ -166,7 +170,9 @@
     cursor: pointer;
     transition: background var(--b-duration-fast), border-color var(--b-duration-fast);
   }
-  .b-profile-trigger:hover { background: var(--b-fill-tertiary); border-color: var(--b-separator); }
+  @media (hover: hover) {
+    .b-profile-trigger:hover { background: var(--b-fill-tertiary); border-color: var(--b-separator); }
+  }
 
   /* ---- System / error page scaffold ----------------------------------------------------- */
   .b-syspage {

package/css/components/charts.css

@@ -93,7 +93,9 @@
     transition: height var(--b-duration-slow) var(--b-ease-out),
                 opacity var(--b-duration-fast);
   }
-  .b-columns__bar:hover { opacity: 0.85; }
+  @media (hover: hover) {
+    .b-columns__bar:hover { opacity: 0.85; }
+  }
   .b-columns__bar::after {
     content: attr(data-label);
     position: absolute;
@@ -232,7 +234,9 @@
       calc(var(--v, 0) * 100%), var(--b-fill-quaternary));
     transition: scale var(--b-duration-fast) var(--b-ease-standard);
   }
-  .b-heatmap > i:hover { scale: 1.2; }
+  @media (hover: hover) {
+    .b-heatmap > i:hover { scale: 1.2; }
+  }
 
   /* ---- Sparkline & SVG chart styling ------------------------------------------ */
   .b-sparkline { width: 100%; height: 2rem; overflow: visible; }
@@ -269,7 +273,9 @@
     stroke-width: 1.5;
     transition: r var(--b-duration-fast);
   }
-  .b-dot:hover { r: 6; }
+  @media (hover: hover) {
+    .b-dot:hover { r: 6; }
+  }
   .b-radar-svg polygon.b-series {
     fill: color-mix(in srgb, var(--b-chart-color, var(--b-chart-1)) 22%, transparent);
     stroke: var(--b-chart-color, var(--b-chart-1));

package/css/components/content.css

@@ -217,9 +217,11 @@
     transition: translate var(--b-duration-normal) var(--b-ease-out),
                 box-shadow var(--b-duration-normal) var(--b-ease-out);
   }
-  .b-card--interactive:hover {
-    translate: 0 -2px;
-    box-shadow: var(--b-elevation-3);
+  @media (hover: hover) {
+    .b-card--interactive:hover {
+      translate: 0 -2px;
+      box-shadow: var(--b-elevation-3);
+    }
   }
   .b-card--accent { border-top: 3px solid var(--b-color-accent); }
 
@@ -238,7 +240,7 @@
     display: flex;
     align-items: center;
     gap: var(--b-space-3);
-    padding: var(--b-space-3) var(--b-space-4);
+    padding: var(--b-row-py) var(--b-row-px);
     font-size: var(--b-text-subheadline);
     /* A row that does something is a <button>, and a <button> arrives wearing
        the browser's own face: a grey plate, a border and centred text. Left
@@ -268,7 +270,9 @@
     border-top: 1px solid var(--b-separator);
   }
   .b-list-item--interactive { cursor: pointer; transition: background var(--b-duration-fast); }
-  .b-list-item--interactive:hover { background: var(--b-fill-quaternary); }
+  @media (hover: hover) {
+    .b-list-item--interactive:hover { background: var(--b-fill-quaternary); }
+  }
   .b-list-item.is-selected { background: var(--b-color-accent-soft); }
   .b-list-item__leading { flex: none; display: flex; color: var(--b-text-secondary); }
   .b-list-item__leading svg { width: 1.25rem; height: 1.25rem; }
@@ -358,6 +362,42 @@
   .b-dl--stacked { grid-template-columns: 1fr; gap: var(--b-space-1); }
   .b-dl--stacked dd { margin-block-end: var(--b-space-3); }
 
+  /* Press feedback. Hover fills are gated to devices that can hover, so a
+     finger gets this instead: a deeper fill for exactly as long as it is
+     down, no transition, and gone the moment it lifts. Never sticky. */
+  :is(.b-list-item--interactive, a.b-list-item, button.b-list-item, .b-card--interactive):active {
+    background: var(--b-fill-secondary);
+    transition: none;
+  }
+
+  /* ---- Long lists ----------------------------------------------------------
+     Three strategies, and a rule for which is which. A console paginates: a
+     person is looking for one row and wants to say "page 4". A feed loads
+     more: a person is reading down and wants it to keep going. Never both on
+     one surface. Under either, --virtual lets a 5,000-row list lay out only
+     what is on screen: content-visibility skips the rows nobody can see and
+     --b-row-h tells the browser how tall they would have been, so the
+     scrollbar is honest. CSS only, no script, no windowing library. */
+  .b-list--virtual > .b-list-item,
+  .b-list--virtual > li,
+  .b-table--virtual tbody tr {
+    content-visibility: auto;
+    contain-intrinsic-block-size: auto var(--b-row-h, 3.5rem);
+  }
+  /* The sentinel at the end of a feed: a button, or with data-b-load-more an
+     observer that fires when it scrolls into view, then a spinner, then, when
+     there is nothing left, the end. */
+  .b-load-more {
+    display: grid;
+    place-items: center;
+    padding: var(--b-space-4);
+    min-block-size: var(--b-control-h-lg);
+  }
+  .b-load-more__busy, .b-load-more__end { display: none; }
+  .b-load-more.is-loading > .b-btn, .b-load-more.is-end > .b-btn { display: none; }
+  .b-load-more.is-loading .b-load-more__busy { display: block; }
+  .b-load-more.is-end .b-load-more__end { display: block; }
+
   /* ---- Table / Data Grid ------------------------------------------------------- */
   .b-table-wrap {
     overflow-x: auto;
@@ -415,7 +455,7 @@
     }
   }
   .b-table th {
-    padding: var(--b-space-3) var(--b-space-4);
+    padding: var(--b-cell-py) var(--b-cell-px);
     text-align: start;
     font-weight: var(--b-weight-semibold);
     color: var(--b-text-secondary);
@@ -424,12 +464,14 @@
     background: var(--b-fill-quaternary);
   }
   .b-table td {
-    padding: var(--b-space-3) var(--b-space-4);
+    padding: var(--b-cell-py) var(--b-cell-px);
     border-bottom: 1px solid var(--b-separator);
   }
   .b-table tbody tr:last-child td { border-bottom: none; }
   .b-table tbody tr { transition: background var(--b-duration-fast); }
-  .b-table--hover tbody tr:hover { background: var(--b-fill-quaternary); }
+  @media (hover: hover) {
+    .b-table--hover tbody tr:hover { background: var(--b-fill-quaternary); }
+  }
   .b-table--striped tbody tr:nth-child(even) { background: var(--b-fill-quaternary); }
   .b-table tr.is-selected td { background: var(--b-color-accent-soft); }
   .b-table--compact :is(th, td) { padding: var(--b-space-2) var(--b-space-3); }
@@ -461,7 +503,10 @@
     opacity: 0;
     transition: opacity var(--b-duration-fast) var(--b-ease-out);
   }
-  .b-datagrid .b-table tr:is(:hover, :focus-within) .b-row-actions { opacity: 1; }
+  .b-datagrid .b-table tr:focus-within .b-row-actions { opacity: 1; }
+  @media (hover: hover) {
+    .b-datagrid .b-table tr:hover .b-row-actions { opacity: 1; }
+  }
   /* No hover on touch, and an opacity-0 button is still tappable, so an
      invisible Delete would be a trap. */
   @media (hover: none) {
@@ -492,7 +537,9 @@
   }
   .b-tree-item[open] > summary::before { rotate: 90deg; }
   .b-tree-item__row { padding-inline-start: calc(var(--b-space-2) + 1em + var(--b-space-2)); }
-  .b-tree :is(summary, .b-tree-item__row):hover { background: var(--b-fill-tertiary); }
+  @media (hover: hover) {
+    .b-tree :is(summary, .b-tree-item__row):hover { background: var(--b-fill-tertiary); }
+  }
   .b-tree .is-selected { background: var(--b-color-accent-soft); color: var(--b-color-accent-text); }
   .b-tree svg { width: 1rem; height: 1rem; color: var(--b-text-secondary); }
 
@@ -581,7 +628,9 @@
     transition: background var(--b-duration-fast);
   }
   .b-disclosure > summary::-webkit-details-marker { display: none; }
-  .b-disclosure > summary:hover { background: var(--b-fill-quaternary); }
+  @media (hover: hover) {
+    .b-disclosure > summary:hover { background: var(--b-fill-quaternary); }
+  }
   .b-disclosure > summary::after {
     content: "⌄";
     color: var(--b-text-tertiary);
@@ -675,7 +724,9 @@
     cursor: pointer;
     transition: background var(--b-duration-fast), color var(--b-duration-fast);
   }
-  .b-chip:hover { background: var(--b-fill-secondary); }
+  @media (hover: hover) {
+    .b-chip:hover { background: var(--b-fill-secondary); }
+  }
   .b-chip.is-selected, .b-chip[aria-pressed="true"] {
     color: var(--b-color-on-accent);
     background: var(--b-color-accent-fill);
@@ -692,7 +743,9 @@
     border-radius: 50%;
     cursor: pointer;
   }
-  .b-chip__remove:hover { background: color-mix(in srgb, currentColor 26%, transparent); }
+  @media (hover: hover) {
+    .b-chip__remove:hover { background: color-mix(in srgb, currentColor 26%, transparent); }
+  }
 
   /* ---- Avatar / Avatar Group ----------------------------------------------------------------- */
   .b-avatar {
@@ -768,12 +821,14 @@
   .b-icon-tile--sm { width: 1.85rem; height: 1.85rem; border-radius: var(--b-radius-sm); }
   .b-icon-tile svg { width: 1.25rem; height: 1.25rem; }
   .b-icon-tile--sm svg { width: 1.05rem; height: 1.05rem; }
-  .b-icon-tile--solid  { color: #fff; background: var(--b-color-accent); }
-  .b-icon-tile--green  { color: #fff; background: var(--b-color-green); }
-  .b-icon-tile--orange { color: #fff; background: var(--b-color-orange); }
-  .b-icon-tile--red    { color: #fff; background: var(--b-color-red); }
-  .b-icon-tile--purple { color: #fff; background: var(--b-color-purple); }
-  .b-icon-tile--teal   { color: #fff; background: var(--b-color-teal); }
+  /* A glyph on a solid tile: the fill tokens, so white holds 3:1 on every
+     one of them (white on the raw green was 2.22, on the raw teal 2.57). */
+  .b-icon-tile--solid  { color: var(--b-color-on-accent);  background: var(--b-color-accent-fill); }
+  .b-icon-tile--green  { color: var(--b-color-on-success); background: var(--b-color-success-fill); }
+  .b-icon-tile--orange { color: var(--b-color-on-warning); background: var(--b-color-warning-fill); }
+  .b-icon-tile--red    { color: var(--b-color-on-danger);  background: var(--b-color-danger-fill); }
+  .b-icon-tile--purple { color: var(--b-color-on-accent);  background: color-mix(in srgb, var(--b-color-purple) 85%, black); }
+  .b-icon-tile--teal   { color: var(--b-color-on-accent);  background: color-mix(in srgb, var(--b-color-teal) 62%, black); }
   .b-icon-tile--indigo { color: #fff; background: var(--b-color-indigo); }
   .b-icon-tile--gray   { color: #fff; background: var(--b-gray-1); }
 
@@ -826,7 +881,9 @@
     border-radius: var(--b-radius-sm);
     cursor: pointer;
   }
-  .b-code__copy:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }
+  @media (hover: hover) {
+    .b-code__copy:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }
+  }
 
   /* ---- Quote -------------------------------------------------------------------------------------- */
   .b-quote {

package/css/components/control-center.css

@@ -143,7 +143,9 @@
     cursor: pointer;
     transition: background var(--b-duration-fast);
   }
-  .b-cc__transport button:hover { background: var(--b-cc-fill); }
+  @media (hover: hover) {
+    .b-cc__transport button:hover { background: var(--b-cc-fill); }
+  }
   .b-cc__transport svg { width: 1.2rem; height: 1.2rem; }
 
   /* ---- Chunky slider (Display / Sound) ---------------------------------------
@@ -267,7 +269,9 @@
     cursor: pointer;
     transition: scale var(--b-duration-fast) var(--b-ease-bounce);
   }
-  .b-lens:hover { scale: 1.05; }
+  @media (hover: hover) {
+    .b-lens:hover { scale: 1.05; }
+  }
   .b-lens:active { scale: 0.96; }
   .b-lens svg { width: 40%; height: 40%; }
 

package/css/components/feedback.css

@@ -33,7 +33,9 @@
     padding: 0.1rem;
     border-radius: var(--b-radius-xs);
   }
-  .b-alert__close:hover { color: var(--b-text); }
+  @media (hover: hover) {
+    .b-alert__close:hover { color: var(--b-text); }
+  }
 
   /* No opinion. The default alert is info-tinted, which turns a plain
      "still working on it" strip blue and gives it a meaning it does not
@@ -96,6 +98,16 @@
     gap: var(--b-space-2);
     pointer-events: none;
   }
+  /* On a phone a toast spans the width and sits above the tab bar, not on
+     top of the Home tab, and it never fights the home indicator. */
+  @media (max-width: 639px) {
+    .b-toast-region {
+      inset-inline: var(--b-space-3);
+      align-items: stretch;
+      inset-block-end: calc(var(--b-bottomnav-h, 0px) + max(var(--b-space-3), env(safe-area-inset-bottom)));
+    }
+    .b-toast { min-width: 0; max-width: none; }
+  }
   .b-toast-region--center { inset-inline: 0; align-items: center; }
   .b-toast {
     display: flex;
@@ -201,7 +213,9 @@
     cursor: pointer;
     padding: 0.1rem;
   }
-  .b-tip__close:hover { color: var(--b-text); }
+  @media (hover: hover) {
+    .b-tip__close:hover { color: var(--b-text); }
+  }
 
   /* ---- Status Indicator --------------------------------------------------------- */
   .b-status {

package/css/components/forms.css

@@ -41,9 +41,12 @@
   /* ---- Inputs ------------------------------------------------------------ */
   .b-input, .b-textarea, .b-select {
     width: 100%;
-    height: var(--b-control-h-md);
+    height: var(--b-field-h);
     padding-inline: var(--b-space-3);
-    font-size: var(--b-text-subheadline);
+    font-size: var(--b-text-input);
+    /* A focused field scrolls clear of the sticky bar above and any action
+       bar below, so the keyboard never covers what somebody is typing. */
+    scroll-margin-block: var(--b-topbar-h) calc(var(--b-action-bar-h, 0px) + var(--b-space-4));
     color: var(--b-text);
     background: var(--b-surface);
     border: 1px solid var(--b-border);
@@ -53,13 +56,17 @@
                 background var(--b-duration-fast) var(--b-ease-standard);
   }
   .b-input::placeholder, .b-textarea::placeholder { color: var(--b-text-tertiary); }
-  .b-input:hover, .b-textarea:hover, .b-select:hover { border-color: var(--b-border-strong); }
+  @media (hover: hover) {
+    .b-input:hover, .b-textarea:hover, .b-select:hover { border-color: var(--b-border-strong); }
+  }
   .b-input:focus-visible, .b-textarea:focus-visible, .b-select:focus-visible {
     border-color: var(--b-color-accent);
   }
   .b-input--filled { background: var(--b-fill-tertiary); border-color: transparent; }
-  .b-input--filled:hover { background: var(--b-fill-secondary); }
-  .b-input--sm { height: var(--b-control-h-sm); font-size: var(--b-text-footnote); border-radius: var(--b-radius-sm); }
+  @media (hover: hover) {
+    .b-input--filled:hover { background: var(--b-fill-secondary); }
+  }
+  .b-input--sm { height: var(--b-control-h-sm); font-size: max(var(--b-text-footnote), var(--b-text-input)); border-radius: var(--b-radius-sm); }
   .b-input--lg { height: var(--b-control-h-lg); font-size: var(--b-text-callout); border-radius: var(--b-radius-lg); }
 
   .b-textarea {
@@ -105,6 +112,30 @@
   .b-input-group:has(.b-input-affix--start) > .b-input { padding-inline-start: var(--b-space-8); }
   .b-input-group:has(.b-input-affix--end) > .b-input { padding-inline-end: var(--b-space-8); }
 
+  /* ---- Money field --------------------------------------------------------
+     An amount is not a number field: type=number drops the thousands
+     separators and grows spinners, and a proportional digit column never
+     lines up. The money field is an input group whose start affix is the ISO
+     code (TZS, not a symbol, since TSh is ambiguous), the input is text with
+     inputmode=decimal so a phone shows the right keyboard, the digits are
+     tabular and end-aligned so a column of prices reads as a column, and an
+     optional __minor greys the cents. --b-money-code-w keeps the affix
+     column aligned across a form; barua.js groups thousands on blur where
+     the field carries data-b-money. */
+  .b-money-field > .b-input {
+    text-align: end;
+    font-variant-numeric: tabular-nums;
+    padding-inline-start: calc(var(--b-money-code-w, 3.25rem) + var(--b-space-3));
+  }
+  .b-money-field .b-money-field__code {
+    inline-size: var(--b-money-code-w, 3.25rem);
+    font-family: var(--b-font-mono);
+    font-size: var(--b-text-footnote);
+    font-weight: var(--b-weight-medium);
+    color: var(--b-text-secondary);
+  }
+  .b-money-field__minor { color: var(--b-text-tertiary); }
+
   /* Search field — pill + icon */
   .b-search .b-input { border-radius: var(--b-radius-full); background: var(--b-fill-tertiary); border-color: transparent; }
   .b-search .b-input:focus-visible { background: var(--b-surface); border-color: var(--b-color-accent); }
@@ -160,7 +191,9 @@
     border-radius: var(--b-radius-sm);
     cursor: pointer;
   }
-  .b-combobox__option:hover { background: var(--b-fill-quaternary); }
+  @media (hover: hover) {
+    .b-combobox__option:hover { background: var(--b-fill-quaternary); }
+  }
   .b-combobox__option.is-active { background: var(--b-fill-tertiary); }
   .b-combobox__option[aria-selected="true"] {
     color: var(--b-color-accent-text);
@@ -383,7 +416,9 @@
     cursor: pointer;
     transition: background var(--b-duration-fast) var(--b-ease-standard);
   }
-  .b-stepper-input button:hover { background: var(--b-fill-secondary); color: var(--b-text); }
+  @media (hover: hover) {
+    .b-stepper-input button:hover { background: var(--b-fill-secondary); color: var(--b-text); }
+  }
   .b-stepper-input button:first-child { border-inline-end: 1px solid var(--b-separator); }
   .b-stepper-input button:last-child { border-inline-start: 1px solid var(--b-separator); }
 
@@ -405,11 +440,18 @@
     transition: border-color var(--b-duration-fast) var(--b-ease-standard),
                 background var(--b-duration-fast) var(--b-ease-standard);
   }
-  .b-upload:hover, .b-upload.is-dragover {
+  .b-upload.is-dragover {
     border-color: var(--b-color-accent);
     background: var(--b-color-accent-soft);
     color: var(--b-color-accent-text);
   }
+  @media (hover: hover) {
+    .b-upload:hover {
+      border-color: var(--b-color-accent);
+      background: var(--b-color-accent-soft);
+      color: var(--b-color-accent-text);
+    }
+  }
   /* Keyboard focus on the wrapped input lights the zone, like a multiselect. */
   .b-upload:focus-within {
     border-color: var(--b-color-accent);
@@ -453,6 +495,26 @@
   .b-upload-item__meta { flex: 1; min-width: 0; }
   .b-upload-item__name { font-size: var(--b-text-footnote); font-weight: var(--b-weight-medium); }
   .b-upload-item__size { font-size: var(--b-text-caption); color: var(--b-text-tertiary); }
+  /* The states an upload actually has. A component whose whole job is
+     progress had one look: the file, its name, its size. Now it is
+     uploading, complete or failed, with a bar, a tick, a cancel, and a
+     reason and a Retry when it failed. */
+  .b-upload-item__progress { margin-block: var(--b-space-1); }
+  .b-upload-item:not(.is-uploading) .b-upload-item__progress { display: none; }
+  .b-upload-item__status { display: inline-flex; flex: none; color: var(--b-text-tertiary); }
+  .b-upload-item.is-uploading .b-upload-item__status { color: var(--b-color-accent-text); }
+  .b-upload-item.is-complete .b-upload-item__status { color: var(--b-color-success-text); }
+  .b-upload-item.is-error { border-color: var(--b-color-danger); }
+  .b-upload-item.is-error .b-upload-item__status { color: var(--b-color-danger-text); }
+  .b-upload-item__error { font-size: var(--b-text-caption); color: var(--b-color-danger-text); }
+  .b-upload-item__cancel { flex: none; }
+  .b-upload-queue__summary { margin-block-start: var(--b-space-2); }
+  /* A drop the zone will not take: the wrong type, too big, too many. */
+  .b-upload.is-rejected {
+    border-color: var(--b-color-danger);
+    background: var(--b-color-danger-soft);
+    color: var(--b-color-danger-text);
+  }
 
   /* ---- Color Picker ------------------------------------------------------- */
   .b-color-picker {
@@ -487,7 +549,9 @@
     cursor: pointer;
     transition: scale var(--b-duration-fast) var(--b-ease-bounce);
   }
-  .b-swatch:hover { scale: 1.12; }
+  @media (hover: hover) {
+    .b-swatch:hover { scale: 1.12; }
+  }
   .b-swatch.is-selected {
     box-shadow: 0 0 0 2px var(--b-bg), 0 0 0 4px var(--b-color-accent);
   }