Upload style.css

static/css/style.css

@@ -1586,3 +1586,141 @@ audio {
   color: var(--color-text-secondary);
   margin: 0;
 }
+
+/* ============================================================
+   12F: Component library pass + accessibility review
+   ============================================================ */
+
+/* ---- Focus rings: every interactive element needs a visible focus
+        indicator for keyboard users. Existing .btn:focus-visible covers
+        primary/secondary/provider buttons. Adding the missing cases. ---- */
+
+.filter-chip:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+}
+
+.provider .filter-chip:focus-visible {
+  outline-color: var(--color-provider-accent);
+}
+
+.queue-tab:focus-visible {
+  outline: 2px solid var(--color-provider-accent);
+  outline-offset: 2px;
+}
+
+.sort-toggle-btn:focus-visible {
+  outline: 2px solid var(--color-provider-accent);
+  outline-offset: 2px;
+}
+
+.history-row:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+}
+
+.queue-card:focus-visible {
+  outline: 2px solid var(--color-provider-accent);
+  outline-offset: 2px;
+}
+
+.audio-btn:focus-visible {
+  outline: 2px solid var(--color-primary-dark);
+  outline-offset: 2px;
+}
+
+.provider .audio-btn:focus-visible {
+  outline-color: var(--color-provider-accent-text);
+}
+
+/* ---- Disabled state for the provider Send button. btn-primary:disabled
+        already exists, this mirrors it for the rust-accent role. ---- */
+
+.btn-provider:disabled {
+  background: var(--color-border);
+  color: var(--color-text-secondary);
+  box-shadow: none;
+  cursor: not-allowed;
+}
+
+/* ---- Spinner color inside the provider Send button (explicit, not
+        relying on inheritance from the button's own text color). ---- */
+
+.btn-provider .spinner {
+  border: 2px solid rgba(255, 255, 255, 0.35);
+  border-top-color: #fff;
+}
+
+/* ---- Fix float: right on timestamps inside flex containers.
+        Float is unreliable inside flex/grid parents; push the timestamp
+        to the end of the row with margin-left: auto instead. ---- */
+
+.history-row-static .timestamp {
+  float: none;
+  margin-left: auto;
+}
+
+/* ---- Reduce result-text font-size: var(--text-lg) is over-sized for
+        a preview line in a history or result row. Match surrounding text. ---- */
+
+.result-text {
+  font-size: var(--text-base);
+  color: var(--color-text);
+}
+
+/* ---- NLU summary: remove the double bottom spacing caused by the
+        card's own padding + the element's margin-bottom. ---- */
+
+.nlu-summary {
+  margin-bottom: 0;
+}
+
+/* ---- Desktop provider: hide Back buttons in the respond pane. On
+        desktop both panes are always visible (two-column layout), so
+        Back makes no sense in either compose or read-only mode. ---- */
+
+@media (min-width: 900px) {
+  .provider-layout [data-step="respond"] #back-to-list,
+  .provider-layout [data-step="respond"] #back-to-list-readonly {
+    display: none;
+  }
+}
+
+/* ---- Visually-hidden utility: for screen-reader-only text that should
+        not appear visually but is needed for accessibility context, e.g.
+        adding " (active)" to the selected filter chip label. ---- */
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* ---- Skip link: allows keyboard users to skip past the header and
+        jump directly to the main content. Visually hidden until focused,
+        appears as a small bar at the top of the viewport on Tab. ---- */
+
+.skip-link {
+  position: absolute;
+  top: -40px;
+  left: var(--space-4);
+  background: var(--color-text);
+  color: var(--color-bg);
+  font-size: var(--text-sm);
+  font-weight: 600;
+  padding: var(--space-2) var(--space-4);
+  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
+  text-decoration: none;
+  z-index: 200;
+  transition: top 150ms ease;
+}
+
+.skip-link:focus {
+  top: 0;
+}