diff --git a/docs/screenshots/ui-browser-defaults/role-dark-after.png b/docs/screenshots/ui-browser-defaults/role-dark-after.png
new file mode 100644
index 0000000..7c5e46c
Binary files /dev/null and b/docs/screenshots/ui-browser-defaults/role-dark-after.png differ
diff --git a/docs/screenshots/ui-browser-defaults/role-dark-before.png b/docs/screenshots/ui-browser-defaults/role-dark-before.png
new file mode 100644
index 0000000..edc1943
Binary files /dev/null and b/docs/screenshots/ui-browser-defaults/role-dark-before.png differ
diff --git a/docs/screenshots/ui-browser-defaults/role-light-after.png b/docs/screenshots/ui-browser-defaults/role-light-after.png
new file mode 100644
index 0000000..7700871
Binary files /dev/null and b/docs/screenshots/ui-browser-defaults/role-light-after.png differ
diff --git a/docs/screenshots/ui-browser-defaults/role-light-before.png b/docs/screenshots/ui-browser-defaults/role-light-before.png
new file mode 100644
index 0000000..7a2d920
Binary files /dev/null and b/docs/screenshots/ui-browser-defaults/role-light-before.png differ
diff --git a/docs/screenshots/ui-browser-defaults/search-after.png b/docs/screenshots/ui-browser-defaults/search-after.png
new file mode 100644
index 0000000..465a914
Binary files /dev/null and b/docs/screenshots/ui-browser-defaults/search-after.png differ
diff --git a/docs/screenshots/ui-browser-defaults/search-before.png b/docs/screenshots/ui-browser-defaults/search-before.png
new file mode 100644
index 0000000..7710096
Binary files /dev/null and b/docs/screenshots/ui-browser-defaults/search-before.png differ
diff --git a/src/components/account/access-panels.tsx b/src/components/account/access-panels.tsx
index ee49a63..9bf6c9c 100644
--- a/src/components/account/access-panels.tsx
+++ b/src/components/account/access-panels.tsx
@@ -1,3 +1,5 @@
+import { SearchInput } from "@/components/ui/search-input";
+import { Hint } from "@/components/ui/tooltip";
 import { useState, type ReactNode } from "react";
 import { cn } from "cn";
 import { BadgeCheck, Fingerprint, Plus, Search, Trash2 } from "lucide-react";
@@ -73,20 +75,20 @@ export function GroupsPanel({ groups }: { groups: AccountDetails["groups"] }) {
       {groups.length ? (
         <ul className="flex flex-wrap gap-2 px-5 py-4">
           {groups.map((group) => (
-            <li
-              key={group.key}
-              title={group.description ?? undefined}
-              className={cn(
-                "inline-flex items-center gap-1.5 rounded-full py-1.5 text-sm font-medium",
-                group.automatic
-                  ? "bg-primary pr-3 pl-2 text-primary-foreground"
-                  : "border bg-muted/40 px-3",
-              )}
-            >
-              {group.automatic && <BadgeCheck className="size-4" aria-hidden="true" />}
-              {group.name}
-              {group.automatic && <span className="sr-only">(automatic)</span>}
-            </li>
+            <Hint content={group.description ?? undefined} key={group.key}>
+              <li
+                className={cn(
+                  "inline-flex items-center gap-1.5 rounded-full py-1.5 text-sm font-medium",
+                  group.automatic
+                    ? "bg-primary pr-3 pl-2 text-primary-foreground"
+                    : "border bg-muted/40 px-3",
+                )}
+              >
+                {group.automatic && <BadgeCheck className="size-4" aria-hidden="true" />}
+                {group.name}
+                {group.automatic && <span className="sr-only">(automatic)</span>}
+              </li>
+            </Hint>
           ))}
         </ul>
       ) : (
@@ -146,18 +148,14 @@ export function PermissionsPanel({ permissions }: { permissions: Permission[] })
             className="pointer-events-none absolute top-1/2 left-2.5 size-4 -translate-y-1/2 text-muted-foreground"
             aria-hidden="true"
           />
-          <input
-            type="search"
+          <SearchInput
             value={search}
-            onChange={(event) => setSearch(event.target.value)}
-            onKeyDown={(event) => {
-              if (event.key === "Escape") setSearch("");
-            }}
+            onValueChange={setSearch}
             aria-label="Search permissions"
             placeholder="Search"
             autoComplete="off"
             spellCheck={false}
-            className="h-9 w-full rounded-md border bg-background pr-2.5 pl-8 text-base outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 sm:text-sm dark:bg-input/30"
+            className="h-9 w-full rounded-md border bg-background pl-8 text-base outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 sm:text-sm dark:bg-input/30"
           />
         </div>
         {matching.length ? (
diff --git a/src/components/account/account-cards.tsx b/src/components/account/account-cards.tsx
index 8b309be..84ff258 100644
--- a/src/components/account/account-cards.tsx
+++ b/src/components/account/account-cards.tsx
@@ -1,3 +1,4 @@
+import { Hint } from "@/components/ui/tooltip";
 import { useRouter } from "@tanstack/react-router";
 import { useState, type ReactNode } from "react";
 import { cn } from "cn";
@@ -67,17 +68,19 @@ function UnlinkAction({
   onClick: () => void;
 }) {
   return (
-    <span title={reason} className="block">
-      <Button
-        variant="destructive-soft"
-        className={cardButton}
-        disabled={disabled}
-        onClick={onClick}
-      >
-        {busy ? <Spinner /> : <Unlink />}
-        Unlink
-      </Button>
-    </span>
+    <Hint content={reason}>
+      <span className="block">
+        <Button
+          variant="destructive-soft"
+          className={cardButton}
+          disabled={disabled}
+          onClick={onClick}
+        >
+          {busy ? <Spinner /> : <Unlink />}
+          Unlink
+        </Button>
+      </span>
+    </Hint>
   );
 }
 
@@ -295,6 +298,7 @@ function StudentVerification({ onDone }: { onDone: () => void }) {
 
   return (
     <form
+      noValidate
       className="grid gap-2"
       onSubmit={(event) => {
         event.preventDefault();
diff --git a/src/components/account/mcp-panel.tsx b/src/components/account/mcp-panel.tsx
index 5bcfdd9..256dd42 100644
--- a/src/components/account/mcp-panel.tsx
+++ b/src/components/account/mcp-panel.tsx
@@ -1,3 +1,4 @@
+import { Hint } from "@/components/ui/tooltip";
 import { useState } from "react";
 import { Bot, Unplug } from "lucide-react";
 import type { AccountDetails } from "@/auth/account.functions";
@@ -54,17 +55,19 @@ export function McpPanel({ mcp, actions }: { mcp: Mcp; actions: AccountActions }
                   Active <TimeAgo value={agent.lastUsedAt} />
                 </p>
               </div>
-              <Button
-                variant="destructive-soft"
-                size="icon-sm"
-                className="border-0"
-                aria-label={`Disconnect ${name}`}
-                title="Disconnect"
-                disabled={locked}
-                onClick={() => setPending({ clientId: agent.clientId, name })}
-              >
-                {actions.busy === agent.clientId ? <Spinner /> : <Unplug />}
-              </Button>
+              <Hint content="Disconnect">
+                <Button
+                  variant="destructive-soft"
+                  size="icon-sm"
+                  className="border-0"
+                  aria-label={`Disconnect ${name}`}
+
+                  disabled={locked}
+                  onClick={() => setPending({ clientId: agent.clientId, name })}
+                >
+                  {actions.busy === agent.clientId ? <Spinner /> : <Unplug />}
+                </Button>
+              </Hint>
             </li>
           );
         })}
diff --git a/src/components/account/secret-text.tsx b/src/components/account/secret-text.tsx
index d77dca1..23ddc5a 100644
--- a/src/components/account/secret-text.tsx
+++ b/src/components/account/secret-text.tsx
@@ -1,3 +1,4 @@
+import { Hint } from "@/components/ui/tooltip";
 import { useEffect, useState } from "react";
 import { cn } from "cn";
 import { CopyButton } from "@/components/copy-button";
@@ -57,26 +58,28 @@ export function SecretText({
 
   return (
     <span className="inline-flex max-w-full min-w-0 items-center gap-1">
-      <button
-        type="button"
-        aria-label={shown ? `Hide ${label}` : `Show ${label}`}
-        title={shown ? "Click to hide" : "Click to reveal"}
-        onClick={() => setShown((value) => !value)}
-        className="min-w-0 cursor-pointer rounded-sm text-left font-mono text-xs break-all select-none outline-none focus-visible:ring-2 focus-visible:ring-ring"
-      >
-        <span
-          aria-hidden={!revealed}
-          className={cn(
-            "transition-[filter,color] motion-reduce:transition-none",
-            // The value leaves faster than it arrives.
-            blurred
-              ? "text-muted-foreground blur-[4px] duration-100 ease-in"
-              : "text-foreground blur-0 duration-200 ease-out",
-          )}
+      <Hint content={shown ? "Click to hide" : "Click to reveal"}>
+        <button
+          type="button"
+          aria-label={shown ? `Hide ${label}` : `Show ${label}`}
+
+          onClick={() => setShown((value) => !value)}
+          className="min-w-0 cursor-pointer rounded-sm text-left font-mono text-xs break-all select-none outline-none focus-visible:ring-2 focus-visible:ring-ring"
         >
-          {truncate(revealed ? value : scramble(value), maxChars)}
-        </span>
-      </button>
+          <span
+            aria-hidden={!revealed}
+            className={cn(
+              "transition-[filter,color] motion-reduce:transition-none",
+              // The value leaves faster than it arrives.
+              blurred
+                ? "text-muted-foreground blur-[4px] duration-100 ease-in"
+                : "text-foreground blur-0 duration-200 ease-out",
+            )}
+          >
+            {truncate(revealed ? value : scramble(value), maxChars)}
+          </span>
+        </button>
+      </Hint>
       <CopyButton value={value} label={`Copy ${label}`} className="shrink-0" />
     </span>
   );
diff --git a/src/components/account/sessions-panel.tsx b/src/components/account/sessions-panel.tsx
index 78a887b..84b6c54 100644
--- a/src/components/account/sessions-panel.tsx
+++ b/src/components/account/sessions-panel.tsx
@@ -1,3 +1,4 @@
+import { Hint } from "@/components/ui/tooltip";
 import { useState } from "react";
 import { LogOut, Monitor, Smartphone } from "lucide-react";
 import type { AccountDetails } from "@/auth/account.functions";
@@ -105,17 +106,19 @@ export function SessionsPanel({
                 </p>
               </div>
               {!entry.current && (
-                <Button
-                  variant="destructive-soft"
-                  size="icon-sm"
-                  className="border-0"
-                  aria-label={`Sign out of ${agent.label}`}
-                  title="Sign out"
-                  disabled={locked}
-                  onClick={() => setPending({ kind: "one", id: entry.id, label: agent.label })}
-                >
-                  {actions.busy === entry.id ? <Spinner /> : <LogOut />}
-                </Button>
+                <Hint content="Sign out">
+                  <Button
+                    variant="destructive-soft"
+                    size="icon-sm"
+                    className="border-0"
+                    aria-label={`Sign out of ${agent.label}`}
+
+                    disabled={locked}
+                    onClick={() => setPending({ kind: "one", id: entry.id, label: agent.label })}
+                  >
+                    {actions.busy === entry.id ? <Spinner /> : <LogOut />}
+                  </Button>
+                </Hint>
               )}
             </li>
           );
diff --git a/src/components/copy-button.tsx b/src/components/copy-button.tsx
index 05646aa..01f6fb8 100644
--- a/src/components/copy-button.tsx
+++ b/src/components/copy-button.tsx
@@ -1,3 +1,4 @@
+import { Hint } from "@/components/ui/tooltip";
 import { useEffect, useState } from "react";
 import { Check, Copy } from "lucide-react";
 import { Button } from "@/components/ui/button";
@@ -20,24 +21,30 @@ export function CopyButton({
     return () => clearTimeout(timer);
   }, [copied]);
   return (
-    <Button
-      type="button"
-      variant="ghost"
-      size={size}
-      className={className}
-      aria-label={copied ? "Copied" : label}
-      title={copied ? "Copied" : label}
-      onClick={async () => {
-        try {
-          await navigator.clipboard.writeText(value);
-          setCopied(true);
-        } catch {
-          /* Clipboard unavailable: the value stays visible for manual copy. */
-        }
-      }}
-    >
-      {copied ? <Check className="text-primary" aria-hidden="true" /> : <Copy aria-hidden="true" />}
-      {size === "sm" && (copied ? "Copied" : "Copy")}
-    </Button>
+    <Hint content={copied ? "Copied" : label}>
+      <Button
+        type="button"
+        variant="ghost"
+        size={size}
+        className={className}
+        aria-label={copied ? "Copied" : label}
+
+        onClick={async () => {
+          try {
+            await navigator.clipboard.writeText(value);
+            setCopied(true);
+          } catch {
+            /* Clipboard unavailable: the value stays visible for manual copy. */
+          }
+        }}
+      >
+        {copied ? (
+          <Check className="text-primary" aria-hidden="true" />
+        ) : (
+          <Copy aria-hidden="true" />
+        )}
+        {size === "sm" && (copied ? "Copied" : "Copy")}
+      </Button>
+    </Hint>
   );
 }
diff --git a/src/components/oidc/form-fields.tsx b/src/components/oidc/form-fields.tsx
index d9e72f4..3da7c0e 100644
--- a/src/components/oidc/form-fields.tsx
+++ b/src/components/oidc/form-fields.tsx
@@ -1,3 +1,4 @@
+import { Hint } from "@/components/ui/tooltip";
 // Fields shared by the new-application wizard and the application settings page.
 import { useEffect, useId, useRef, useState, type KeyboardEvent, type ReactNode } from "react";
 import { cn } from "cn";
@@ -136,27 +137,28 @@ export function LogoPreview({ url, dark }: { url: string; dark?: boolean }) {
   }, [url]);
   const broken = !!src && failed === src;
   return (
-    <div
-      title={broken ? "This image couldn't be loaded" : undefined}
-      className={cn(
-        // `dark` swaps in the dark theme tokens, whatever the page theme is.
-        "flex size-9 shrink-0 items-center justify-center overflow-hidden rounded-md border p-1",
-        dark ? "dark bg-background" : "bg-white",
-      )}
-    >
-      {broken ? (
-        <ImageOff className="size-4 text-muted-foreground" aria-hidden="true" />
-      ) : src ? (
-        <img
-          key={src}
-          src={src}
-          alt=""
-          referrerPolicy="no-referrer"
-          className="size-full object-contain"
-          onError={() => setFailed(src)}
-        />
-      ) : null}
-    </div>
+    <Hint content={broken ? "This image couldn't be loaded" : undefined}>
+      <div
+        className={cn(
+          // `dark` swaps in the dark theme tokens, whatever the page theme is.
+          "flex size-9 shrink-0 items-center justify-center overflow-hidden rounded-md border p-1",
+          dark ? "dark bg-background" : "bg-white",
+        )}
+      >
+        {broken ? (
+          <ImageOff className="size-4 text-muted-foreground" aria-hidden="true" />
+        ) : src ? (
+          <img
+            key={src}
+            src={src}
+            alt=""
+            referrerPolicy="no-referrer"
+            className="size-full object-contain"
+            onError={() => setFailed(src)}
+          />
+        ) : null}
+      </div>
+    </Hint>
   );
 }
 
@@ -535,36 +537,37 @@ export function IdentityScopeList({
           const checkboxId = `${id}-${scope.id}`;
           return (
             <li key={scope.id}>
-              <label
-                htmlFor={checkboxId}
-                title={dense ? scope.description : undefined}
-                className={cn(
-                  "flex gap-3 px-4",
-                  dense ? "items-center py-2.5" : "items-start py-3",
-                  !scope.required && "cursor-pointer",
-                )}
-              >
-                <Checkbox
-                  id={checkboxId}
-                  checked={scope.required || api.draft.scopes.includes(scope.id)}
-                  disabled={scope.required}
-                  className={dense ? undefined : "mt-0.5"}
-                  onCheckedChange={(value) => api.toggleScope("scopes", scope.id, value === true)}
-                />
-                <span className="min-w-0 flex-1">
-                  <span className="flex flex-wrap items-center gap-2 text-sm font-medium">
-                    {scope.label}
-                    <code className="rounded bg-muted px-1.5 py-0.5 font-mono text-[11px] font-normal text-muted-foreground">
-                      {scope.id}
-                    </code>
-                  </span>
-                  {!dense && (
-                    <span className="mt-1 block text-xs leading-5 text-muted-foreground">
-                      {scope.description}
-                    </span>
+              <Hint content={dense ? scope.description : undefined}>
+                <label
+                  htmlFor={checkboxId}
+                  className={cn(
+                    "flex gap-3 px-4",
+                    dense ? "items-center py-2.5" : "items-start py-3",
+                    !scope.required && "cursor-pointer",
                   )}
-                </span>
-              </label>
+                >
+                  <Checkbox
+                    id={checkboxId}
+                    checked={scope.required || api.draft.scopes.includes(scope.id)}
+                    disabled={scope.required}
+                    className={dense ? undefined : "mt-0.5"}
+                    onCheckedChange={(value) => api.toggleScope("scopes", scope.id, value === true)}
+                  />
+                  <span className="min-w-0 flex-1">
+                    <span className="flex flex-wrap items-center gap-2 text-sm font-medium">
+                      {scope.label}
+                      <code className="rounded bg-muted px-1.5 py-0.5 font-mono text-[11px] font-normal text-muted-foreground">
+                        {scope.id}
+                      </code>
+                    </span>
+                    {!dense && (
+                      <span className="mt-1 block text-xs leading-5 text-muted-foreground">
+                        {scope.description}
+                      </span>
+                    )}
+                  </span>
+                </label>
+              </Hint>
             </li>
           );
         })}
@@ -742,37 +745,39 @@ export function ApiAccessTable({
             {apiScopes
               .filter((scope) => scope.resource === resource.id)
               .map((scope) => (
-                <tr key={scope.id} title={scope.description} className="border-t">
-                  <th scope="row" className="py-2.5 pr-3 text-left font-normal">
-                    <span className="flex flex-wrap items-center gap-2">
-                      {scope.label}
-                      <code className="rounded bg-muted px-1.5 py-0.5 font-mono text-[11px] text-muted-foreground">
-                        {scope.id}
-                      </code>
-                    </span>
-                  </th>
-                  {columns.map((column) => (
-                    <td key={column.list} className="py-1 text-center">
-                      <label
-                        htmlFor={`${id}-${column.list}-${scope.id}`}
-                        className={cn(
-                          "inline-flex size-10 items-center justify-center rounded-md",
-                          !locked && "cursor-pointer hover:bg-accent/50",
-                        )}
-                      >
-                        <Checkbox
-                          id={`${id}-${column.list}-${scope.id}`}
-                          checked={draft[column.list].includes(scope.id)}
-                          disabled={locked}
-                          aria-label={`${scope.label}, ${column.label.toLowerCase()}`}
-                          onCheckedChange={(value) =>
-                            api.toggleScope(column.list, scope.id, value === true)
-                          }
-                        />
-                      </label>
-                    </td>
-                  ))}
-                </tr>
+                <Hint content={scope.description} key={scope.id}>
+                  <tr className="border-t">
+                    <th scope="row" className="py-2.5 pr-3 text-left font-normal">
+                      <span className="flex flex-wrap items-center gap-2">
+                        {scope.label}
+                        <code className="rounded bg-muted px-1.5 py-0.5 font-mono text-[11px] text-muted-foreground">
+                          {scope.id}
+                        </code>
+                      </span>
+                    </th>
+                    {columns.map((column) => (
+                      <td key={column.list} className="py-1 text-center">
+                        <label
+                          htmlFor={`${id}-${column.list}-${scope.id}`}
+                          className={cn(
+                            "inline-flex size-10 items-center justify-center rounded-md",
+                            !locked && "cursor-pointer hover:bg-accent/50",
+                          )}
+                        >
+                          <Checkbox
+                            id={`${id}-${column.list}-${scope.id}`}
+                            checked={draft[column.list].includes(scope.id)}
+                            disabled={locked}
+                            aria-label={`${scope.label}, ${column.label.toLowerCase()}`}
+                            onCheckedChange={(value) =>
+                              api.toggleScope(column.list, scope.id, value === true)
+                            }
+                          />
+                        </label>
+                      </td>
+                    ))}
+                  </tr>
+                </Hint>
               ))}
           </tbody>
         ))}
diff --git a/src/components/rbac/catalog-search.tsx b/src/components/rbac/catalog-search.tsx
index 2ea49df..1487aab 100644
--- a/src/components/rbac/catalog-search.tsx
+++ b/src/components/rbac/catalog-search.tsx
@@ -1,9 +1,8 @@
-import { useRef, type ReactNode } from "react";
-import { Search, X } from "lucide-react";
+import { type ReactNode } from "react";
+import { Search } from "lucide-react";
 import { cn } from "cn";
-import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
-import { Input } from "@/components/ui/input";
+import { SearchInput } from "@/components/ui/search-input";
 
 /** The search box on its own, for pages that lay out the rest of the toolbar themselves. */
 export function SearchField({
@@ -19,40 +18,19 @@ export function SearchField({
   className?: string;
   inputClassName?: string;
 }) {
-  const input = useRef<HTMLInputElement>(null);
-
   return (
     <div className={cn("relative min-w-0", className)}>
       <Search
         className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground"
         aria-hidden="true"
       />
-      <Input
-        ref={input}
-        type="search"
+      <SearchInput
         value={query}
-        onChange={(event) => onQueryChange(event.target.value)}
+        onValueChange={onQueryChange}
         placeholder={`Search ${kind}…`}
         aria-label={`Search ${kind}`}
-        className={cn(
-          "pr-10 pl-9 [&::-webkit-search-cancel-button]:appearance-none",
-          inputClassName,
-        )}
+        className={cn("pr-10 pl-9", inputClassName)}
       />
-      {query && (
-        <Button
-          variant="ghost"
-          size="icon"
-          className="absolute top-1/2 right-1 size-7 -translate-y-1/2 text-muted-foreground"
-          aria-label="Clear search"
-          onClick={() => {
-            onQueryChange("");
-            input.current?.focus();
-          }}
-        >
-          <X className="size-3.5" aria-hidden="true" />
-        </Button>
-      )}
     </div>
   );
 }
diff --git a/src/components/rbac/pick-list.tsx b/src/components/rbac/pick-list.tsx
index 9bf9a55..1dc3900 100644
--- a/src/components/rbac/pick-list.tsx
+++ b/src/components/rbac/pick-list.tsx
@@ -4,6 +4,7 @@ import { cn } from "cn";
 import { Search } from "lucide-react";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Input } from "@/components/ui/input";
+import { ScrollArea } from "@/components/ui/scroll-area";
 
 export type PickOption = {
   key: string;
@@ -72,50 +73,50 @@ export function PickList({
           />
         </div>
       )}
-      <div
-        className={cn(
-          "max-h-72 divide-y overflow-y-auto rounded-xl border",
-          error && "border-destructive",
-        )}
+      <ScrollArea
+        viewportLabel={legend}
+        className={cn("max-h-72 rounded-xl border", error && "border-destructive")}
         aria-describedby={error ? errorId : undefined}
       >
-        {visible.length === 0 ? (
-          <p className="px-4 py-6 text-center text-xs text-muted-foreground">
-            {options.length === 0 ? emptyText : "Nothing matches that filter."}
-          </p>
-        ) : (
-          visible.map((option) => {
-            const checked = selected.includes(option.key);
-            return (
-              <label
-                key={option.key}
-                className={cn(
-                  "flex cursor-pointer items-start gap-3 px-4 py-3 transition-colors",
-                  option.disabled ? "cursor-not-allowed opacity-60" : "hover:bg-accent/50",
-                )}
-              >
-                <Checkbox
-                  className="mt-0.5"
-                  checked={checked}
-                  disabled={option.disabled}
-                  onCheckedChange={(value) => toggle(option.key, value === true)}
-                />
-                <span className="min-w-0 flex-1">
-                  <span className="flex flex-wrap items-baseline gap-x-2">
-                    <span className="text-sm font-medium">{option.label}</span>
-                    <code className="font-mono text-xs text-muted-foreground">{option.key}</code>
-                  </span>
-                  {(option.disabled && option.disabledReason) || option.hint ? (
-                    <span className="mt-0.5 block text-xs leading-5 text-muted-foreground">
-                      {option.disabled ? option.disabledReason : option.hint}
+        <div className="divide-y">
+          {visible.length === 0 ? (
+            <p className="px-4 py-6 text-center text-xs text-muted-foreground">
+              {options.length === 0 ? emptyText : "Nothing matches that filter."}
+            </p>
+          ) : (
+            visible.map((option) => {
+              const checked = selected.includes(option.key);
+              return (
+                <label
+                  key={option.key}
+                  className={cn(
+                    "flex cursor-pointer items-start gap-3 px-4 py-3 transition-colors",
+                    option.disabled ? "cursor-not-allowed opacity-60" : "hover:bg-accent/50",
+                  )}
+                >
+                  <Checkbox
+                    className="mt-0.5"
+                    checked={checked}
+                    disabled={option.disabled}
+                    onCheckedChange={(value) => toggle(option.key, value === true)}
+                  />
+                  <span className="min-w-0 flex-1">
+                    <span className="flex flex-wrap items-baseline gap-x-2">
+                      <span className="text-sm font-medium">{option.label}</span>
+                      <code className="font-mono text-xs text-muted-foreground">{option.key}</code>
                     </span>
-                  ) : null}
-                </span>
-              </label>
-            );
-          })
-        )}
-      </div>
+                    {(option.disabled && option.disabledReason) || option.hint ? (
+                      <span className="mt-0.5 block text-xs leading-5 text-muted-foreground">
+                        {option.disabled ? option.disabledReason : option.hint}
+                      </span>
+                    ) : null}
+                  </span>
+                </label>
+              );
+            })
+          )}
+        </div>
+      </ScrollArea>
       {error && (
         <p id={errorId} role="alert" className="text-xs text-destructive">
           {error}
diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
index 86342c1..8ab754c 100644
--- a/src/components/ui/input.tsx
+++ b/src/components/ui/input.tsx
@@ -7,7 +7,7 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
       type={type}
       data-slot="input"
       className={cn(
-        "h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30",
+        "h-9 w-full min-w-0 appearance-none rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:mr-3 file:rounded-sm file:bg-secondary file:px-2 file:text-secondary-foreground file:text-sm file:font-medium placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30",
         "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
         "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40",
         className,
diff --git a/src/components/ui/scroll-area.tsx b/src/components/ui/scroll-area.tsx
new file mode 100644
index 0000000..e2ba50b
--- /dev/null
+++ b/src/components/ui/scroll-area.tsx
@@ -0,0 +1,54 @@
+import type { ComponentProps } from "react";
+import { ScrollArea as ScrollAreaPrimitive } from "radix-ui";
+import { cn } from "cn";
+
+/** Styled scrollbars with native wheel, touch and keyboard scrolling. */
+export function ScrollArea({
+  children,
+  className,
+  viewportLabel,
+  ...props
+}: ComponentProps<typeof ScrollAreaPrimitive.Root> & { viewportLabel?: string }) {
+  return (
+    <ScrollAreaPrimitive.Root
+      data-slot="scroll-area"
+      type="auto"
+      className={cn("relative overflow-hidden", className)}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Viewport
+        data-slot="scroll-area-viewport"
+        role="region"
+        aria-label={viewportLabel}
+        tabIndex={0}
+        className="size-full max-h-[inherit] rounded-[inherit] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:ring-inset"
+      >
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar />
+      <ScrollBar orientation="horizontal" />
+      <ScrollAreaPrimitive.Corner className="bg-muted" />
+    </ScrollAreaPrimitive.Root>
+  );
+}
+
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}: ComponentProps<typeof ScrollAreaPrimitive.Scrollbar>) {
+  return (
+    <ScrollAreaPrimitive.Scrollbar
+      data-slot="scroll-area-scrollbar"
+      orientation={orientation}
+      className={cn(
+        "flex touch-none bg-muted p-0.5 select-none",
+        orientation === "vertical" ? "h-full w-2.5" : "h-2.5 flex-col",
+        className,
+      )}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Thumb className="relative flex-1 rounded-full bg-muted-foreground hover:bg-foreground" />
+    </ScrollAreaPrimitive.Scrollbar>
+  );
+}
diff --git a/src/components/ui/search-input.tsx b/src/components/ui/search-input.tsx
new file mode 100644
index 0000000..a7c3b29
--- /dev/null
+++ b/src/components/ui/search-input.tsx
@@ -0,0 +1,52 @@
+import { useRef, type ComponentProps } from "react";
+import { X } from "lucide-react";
+import { cn } from "cn";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+
+/** A consistent clear control instead of the browser's search decoration. */
+export function SearchInput({
+  value,
+  onValueChange,
+  className,
+  ...props
+}: Omit<ComponentProps<typeof Input>, "type" | "value" | "onChange" | "ref"> & {
+  value: string;
+  onValueChange: (value: string) => void;
+}) {
+  const input = useRef<HTMLInputElement>(null);
+  return (
+    <>
+      <Input
+        {...props}
+        ref={input}
+        type="search"
+        value={value}
+        onChange={(event) => onValueChange(event.target.value)}
+        onKeyDown={(event) => {
+          props.onKeyDown?.(event);
+          if (!event.defaultPrevented && !props.readOnly && event.key === "Escape") {
+            event.preventDefault();
+            onValueChange("");
+          }
+        }}
+        className={cn("pr-10", className)}
+      />
+      {value && !props.disabled && !props.readOnly && (
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          className="absolute top-1/2 right-1 size-7 -translate-y-1/2 text-muted-foreground"
+          aria-label="Clear search"
+          onClick={() => {
+            onValueChange("");
+            input.current?.focus();
+          }}
+        >
+          <X className="size-3.5" aria-hidden="true" />
+        </Button>
+      )}
+    </>
+  );
+}
diff --git a/src/components/ui/textarea.tsx b/src/components/ui/textarea.tsx
index 741a012..cc8853d 100644
--- a/src/components/ui/textarea.tsx
+++ b/src/components/ui/textarea.tsx
@@ -6,7 +6,7 @@ function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
     <textarea
       data-slot="textarea"
       className={cn(
-        "flex field-sizing-content min-h-16 w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:ring-destructive/40",
+        "flex field-sizing-content min-h-16 w-full resize-none appearance-none rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:ring-destructive/40",
         className,
       )}
       {...props}
diff --git a/src/components/ui/tooltip.tsx b/src/components/ui/tooltip.tsx
index 066dc4f..af23b35 100644
--- a/src/components/ui/tooltip.tsx
+++ b/src/components/ui/tooltip.tsx
@@ -51,4 +51,21 @@ function TooltipContent({
   );
 }
 
-export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };
+/** Preserves the child's layout and HTML semantics, including list items and table rows. */
+function Hint({ content, children }: { content?: string; children: React.ReactElement }) {
+  if (!content) return children;
+  return (
+    <Tooltip>
+      <TooltipTrigger
+        asChild
+        tabIndex={0}
+        className="rounded-sm outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+      >
+        {children}
+      </TooltipTrigger>
+      <TooltipContent className="max-w-xs">{content}</TooltipContent>
+    </Tooltip>
+  );
+}
+
+export { Hint, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };
diff --git a/src/components/users/traits.tsx b/src/components/users/traits.tsx
index f5084b4..c39c5b0 100644
--- a/src/components/users/traits.tsx
+++ b/src/components/users/traits.tsx
@@ -1,3 +1,4 @@
+import { Hint } from "@/components/ui/tooltip";
 import type { ComponentType } from "react";
 import { BadgeCheck, Crown, Fingerprint, GraduationCap, Send } from "lucide-react";
 import { cn } from "cn";
@@ -51,19 +52,19 @@ export function StatusBadges({
       {shown.map((trait) => {
         const Icon = TRAIT_ICONS[trait.key];
         return (
-          <Badge
-            key={trait.key}
-            title={trait.description}
-            className={cn(
-              "py-0.5",
-              trait.key === "student"
-                ? "border-transparent bg-secondary text-secondary-foreground"
-                : "border-primary/30 bg-primary/10 text-primary",
-            )}
-          >
-            <Icon className="size-3" aria-hidden="true" />
-            {trait.label}
-          </Badge>
+          <Hint content={trait.description} key={trait.key}>
+            <Badge
+              className={cn(
+                "py-0.5",
+                trait.key === "student"
+                  ? "border-transparent bg-secondary text-secondary-foreground"
+                  : "border-primary/30 bg-primary/10 text-primary",
+              )}
+            >
+              <Icon className="size-3" aria-hidden="true" />
+              {trait.label}
+            </Badge>
+          </Hint>
         );
       })}
     </div>
@@ -78,19 +79,22 @@ export function SignInIcons({ held }: { held: (trait: UserTrait) => boolean }) {
         const Icon = TRAIT_ICONS[trait.key];
         const has = held(trait.key);
         return (
-          <li
+          <Hint
+            content={has ? trait.description : `No ${trait.label.toLowerCase()}`}
             key={trait.key}
-            title={has ? trait.description : `No ${trait.label.toLowerCase()}`}
-            className={cn(
-              "flex",
-              has ? "text-foreground" : "text-muted-foreground opacity-30 grayscale",
-            )}
           >
-            <Icon className="size-4" aria-hidden="true" />
-            <span className="sr-only">
-              {trait.label}: {has ? "yes" : "no"}
-            </span>
-          </li>
+            <li
+              className={cn(
+                "flex",
+                has ? "text-foreground" : "text-muted-foreground opacity-30 grayscale",
+              )}
+            >
+              <Icon className="size-4" aria-hidden="true" />
+              <span className="sr-only">
+                {trait.label}: {has ? "yes" : "no"}
+              </span>
+            </li>
+          </Hint>
         );
       })}
     </ul>
diff --git a/src/components/users/user-roles.tsx b/src/components/users/user-roles.tsx
index 3134e36..88d5817 100644
--- a/src/components/users/user-roles.tsx
+++ b/src/components/users/user-roles.tsx
@@ -1,3 +1,4 @@
+import { Hint } from "@/components/ui/tooltip";
 import { Link, useRouter } from "@tanstack/react-router";
 import { useState } from "react";
 import { LoaderCircle, ShieldCheck, Sparkles, UserMinus, UserPlus } from "lucide-react";
@@ -104,25 +105,30 @@ export function UserRoles({
                   </p>
                 </div>
                 {canWrite && (
-                  <Button
-                    size="sm"
-                    variant="ghost"
-                    className="text-destructive"
-                    disabled={busy !== "" || !mayGrant(entry.key)}
-                    title={
+                  <Hint
+                    content={
                       mayGrant(entry.key)
                         ? undefined
                         : "This role grants permissions you do not hold. Ask Master Admin."
                     }
-                    onClick={() => void change("unassign", entry.key)}
                   >
-                    {busy === entry.key ? (
-                      <LoaderCircle className="animate-spin" aria-hidden="true" />
-                    ) : (
-                      <UserMinus aria-hidden="true" />
-                    )}
-                    Remove
-                  </Button>
+                    <span className="inline-flex">
+                      <Button
+                        size="sm"
+                        variant="ghost"
+                        className="text-destructive"
+                        disabled={busy !== "" || !mayGrant(entry.key)}
+                        onClick={() => void change("unassign", entry.key)}
+                      >
+                        {busy === entry.key ? (
+                          <LoaderCircle className="animate-spin" aria-hidden="true" />
+                        ) : (
+                          <UserMinus aria-hidden="true" />
+                        )}
+                        Remove
+                      </Button>
+                    </span>
+                  </Hint>
                 )}
               </li>
             );
diff --git a/src/routes/access/roles/index.tsx b/src/routes/access/roles/index.tsx
index de46a8a..c006ee0 100644
--- a/src/routes/access/roles/index.tsx
+++ b/src/routes/access/roles/index.tsx
@@ -1,4 +1,5 @@
 import { matchesSearch } from "@/lib/search";
+import { Hint } from "@/components/ui/tooltip";
 import { useState } from "react";
 import { createFileRoute, Link } from "@tanstack/react-router";
 import { ShieldCheck } from "lucide-react";
@@ -75,28 +76,30 @@ function BuiltInRoleCard({ role, effective }: { role: RoleSummary; effective: nu
   return (
     <li>
       <Card className="h-47 transition-colors has-[a:hover]:bg-accent/50 has-[a:focus-visible]:bg-accent/50">
-        <Link
-          to="/access/roles/$roleId"
-          params={{ roleId: role.id }}
-          title={staticRole(role.key)?.evidence}
-          className="flex size-full flex-col items-center px-3 pt-7 pb-3.5 text-center outline-none"
-        >
-          <span className="flex size-[42px] items-center justify-center">
-            <BuiltInRoleIcon roleKey={role.key} />
-          </span>
-          <h3 className="mt-3 max-w-full truncate text-base">{role.name}</h3>
-          <span className="mt-1.5 max-w-full truncate">
-            <KeyChip>{role.key}</KeyChip>
-          </span>
-          <span className="mt-auto flex items-center gap-1.5 text-xs text-muted-foreground">
-            <PermissionsIcon />
-            {effective === null ? (
-              <span className="font-mono">ALL</span>
-            ) : (
-              plural(effective, "permission", "permissions")
-            )}
-          </span>
-        </Link>
+        <Hint content={staticRole(role.key)?.evidence}>
+          <Link
+            to="/access/roles/$roleId"
+            params={{ roleId: role.id }}
+
+            className="flex size-full flex-col items-center px-3 pt-7 pb-3.5 text-center outline-none"
+          >
+            <span className="flex size-[42px] items-center justify-center">
+              <BuiltInRoleIcon roleKey={role.key} />
+            </span>
+            <h3 className="mt-3 max-w-full truncate text-base">{role.name}</h3>
+            <span className="mt-1.5 max-w-full truncate">
+              <KeyChip>{role.key}</KeyChip>
+            </span>
+            <span className="mt-auto flex items-center gap-1.5 text-xs text-muted-foreground">
+              <PermissionsIcon />
+              {effective === null ? (
+                <span className="font-mono">ALL</span>
+              ) : (
+                plural(effective, "permission", "permissions")
+              )}
+            </span>
+          </Link>
+        </Hint>
       </Card>
     </li>
   );
diff --git a/src/routes/users/$userId.tsx b/src/routes/users/$userId.tsx
index 32c2bfb..7860225 100644
--- a/src/routes/users/$userId.tsx
+++ b/src/routes/users/$userId.tsx
@@ -1,3 +1,4 @@
+import { Hint } from "@/components/ui/tooltip";
 import { createFileRoute, Link, useNavigate, useRouter } from "@tanstack/react-router";
 import { ArrowLeft, Clock, KeyRound, Mail, RefreshCw } from "lucide-react";
 import { emptyCatalog } from "@/auth/rbac";
@@ -190,9 +191,11 @@ function UserDetailPage() {
                 {person.permissions.length ? (
                   <ul className="flex flex-wrap gap-2" aria-label="Permissions">
                     {person.permissions.map((key) => (
-                      <li key={key} title={permissionName(key)}>
-                        <KeyChip>{key}</KeyChip>
-                      </li>
+                      <Hint content={permissionName(key)} key={key}>
+                        <li>
+                          <KeyChip>{key}</KeyChip>
+                        </li>
+                      </Hint>
                     ))}
                   </ul>
                 ) : (
@@ -236,9 +239,9 @@ function UserDetailPage() {
                   <KeyRound className="size-4 shrink-0 text-muted-foreground" aria-hidden="true" />
                   <dt className="text-muted-foreground">User ID</dt>
                   <dd className="ml-auto flex min-w-0 items-center gap-1">
-                    <span className="truncate font-mono text-xs" title={person.id}>
-                      {person.id}
-                    </span>
+                    <Hint content={person.id}>
+                      <span className="truncate font-mono text-xs">{person.id}</span>
+                    </Hint>
                     <CopyButton value={person.id} label="Copy user ID" size="icon-xs" />
                   </dd>
                 </div>
diff --git a/src/routes/users/index.tsx b/src/routes/users/index.tsx
index cda2202..2d0f8af 100644
--- a/src/routes/users/index.tsx
+++ b/src/routes/users/index.tsx
@@ -1,3 +1,4 @@
+import { Hint } from "@/components/ui/tooltip";
 import {
   createFileRoute,
   Link,
@@ -36,7 +37,7 @@ import { SignInIcons, STATUS_TRAITS, TRAIT_ICONS } from "@/components/users/trai
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
-import { Input } from "@/components/ui/input";
+import { SearchInput } from "@/components/ui/search-input";
 import {
   Select,
   SelectContent,
@@ -70,18 +71,20 @@ const ANY_ROLE = "any";
 function HeldMark({ label, held }: { label: string; held: boolean }) {
   const Mark = held ? Check : X;
   return (
-    <span className="flex justify-center" title={held ? label : `Not ${label}`}>
-      <Mark
-        className={cn(
-          "size-4",
-          held ? "text-emerald-600 dark:text-emerald-400" : "text-muted-foreground/40",
-        )}
-        aria-hidden="true"
-      />
-      <span className="sr-only">
-        {label}: {held ? "yes" : "no"}
+    <Hint content={held ? label : `Not ${label}`}>
+      <span className="flex justify-center">
+        <Mark
+          className={cn(
+            "size-4",
+            held ? "text-emerald-600 dark:text-emerald-400" : "text-muted-foreground/40",
+          )}
+          aria-hidden="true"
+        />
+        <span className="sr-only">
+          {label}: {held ? "yes" : "no"}
+        </span>
       </span>
-    </span>
+    </Hint>
   );
 }
 
@@ -141,25 +144,27 @@ function TraitFilter({
   const state = presenceState(value);
   const next = presenceState(cyclePresence(value, false));
   return (
-    <button
-      type="button"
-      onClick={(event) => onChange(cyclePresence(value, event.shiftKey))}
-      aria-label={`${trait.label}: ${state.label}`}
-      title={`${trait.description}. Click for “${next.label}”, Shift-click to go back.`}
-      className={cn(
-        "inline-flex h-7 items-center gap-1.5 rounded-full border py-0 pr-2.5 pl-1 text-xs font-medium transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background",
-        state.pill,
-      )}
-    >
-      <span
-        className={cn("flex size-5 items-center justify-center rounded-full", state.glyph)}
-        aria-hidden="true"
+    <Hint content={`${trait.description}. Click for “${next.label}”, Shift-click to go back.`}>
+      <button
+        type="button"
+        onClick={(event) => onChange(cyclePresence(value, event.shiftKey))}
+        aria-label={`${trait.label}: ${state.label}`}
+
+        className={cn(
+          "inline-flex h-7 items-center gap-1.5 rounded-full border py-0 pr-2.5 pl-1 text-xs font-medium transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+          state.pill,
+        )}
       >
-        <state.Glyph className="size-3" strokeWidth={3} />
-      </span>
-      <Icon className="size-3.5" aria-hidden="true" />
-      {trait.label}
-    </button>
+        <span
+          className={cn("flex size-5 items-center justify-center rounded-full", state.glyph)}
+          aria-hidden="true"
+        >
+          <state.Glyph className="size-3" strokeWidth={3} />
+        </span>
+        <Icon className="size-3.5" aria-hidden="true" />
+        {trait.label}
+      </button>
+    </Hint>
   );
 }
 
@@ -279,10 +284,9 @@ function UsersIndex() {
               className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground"
               aria-hidden="true"
             />
-            <Input
-              type="search"
+            <SearchInput
               value={query}
-              onChange={(event) => setQuery(event.target.value)}
+              onValueChange={setQuery}
               placeholder="Name, email, @Telegram, ID, role, or account status"
               aria-label="Search users"
               className="pl-9"
diff --git a/src/styles.css b/src/styles.css
index bde9ee3..9897e0d 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -96,6 +96,8 @@
 @layer base {
   * {
     @apply border-border outline-ring/50;
+    scrollbar-width: thin;
+    scrollbar-color: var(--muted-foreground) var(--muted);
   }
   body {
     @apply m-0 bg-background font-sans text-foreground antialiased;
@@ -116,6 +118,63 @@
     color: #152347;
   }
 }
+/* Theme every scrolling surface, including the document, portals, editors and tables.
+   Firefox uses the standard properties above; WebKit exposes arrow buttons too. */
+@supports selector(::-webkit-scrollbar) {
+  * {
+    scrollbar-width: auto;
+    scrollbar-color: auto;
+  }
+  ::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+  }
+  ::-webkit-scrollbar-track,
+  ::-webkit-scrollbar-corner {
+    background: var(--muted);
+  }
+  ::-webkit-scrollbar-thumb {
+    min-height: 32px;
+    border: 2px solid var(--muted);
+    border-radius: 999px;
+    background: var(--muted-foreground);
+  }
+  ::-webkit-scrollbar-thumb:hover {
+    background: var(--foreground);
+  }
+  ::-webkit-scrollbar-button {
+    display: none;
+    width: 0;
+    height: 0;
+  }
+}
+
+input::-webkit-search-decoration,
+input::-webkit-search-cancel-button,
+input::-webkit-search-results-button,
+input::-webkit-search-results-decoration {
+  appearance: none;
+}
+input::-ms-reveal,
+input::-ms-clear {
+  display: none;
+}
+
+@media (forced-colors: active) {
+  * {
+    scrollbar-color: auto;
+    scrollbar-width: auto;
+  }
+  ::-webkit-scrollbar-thumb {
+    background: ButtonText;
+    border-color: Canvas;
+  }
+  ::-webkit-scrollbar-track,
+  ::-webkit-scrollbar-corner {
+    background: Canvas;
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
   *,
   *::before,