chore(deps): Tailwind 4 (#5021)

Renovate's tailwindcss bump (PR #150) plus the migration it needs:

- Theme moves from tailwind.config.js into app.css as `@theme inline`,
  mapping the same FabledSword tokens. tailwind.config.js is gone.
- PostCSS runs @tailwindcss/postcss; autoprefixer is dropped, since
  Tailwind 4 prefixes through Lightning CSS.
- Class renames from @tailwindcss/upgrade 4.3.3, reviewed: outline-none
  -> outline-hidden, focus-visible:outline -> outline-solid, shadow ->
  shadow-sm, shadow-sm -> shadow-xs, flex-shrink-0 -> shrink-0. Bare
  `rounded` stays: v4 keeps it at 0.25rem, as before.
- Three v3 preflight defaults kept in a base layer so nothing changes on
  screen: gray-200 default border colour, gray-400 placeholder text and
  the pointer cursor on buttons.
- The unused class-based dark variant is not carried over; no template
  uses `dark:`.

Clears the five high and two moderate npm audit findings that came in
through Tailwind 3 (braces, chokidar, micromatch, fast-glob,
postcss-selector-parser).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

web/src/routes/admin/duplicates/+page.svelte

@@ -285,7 +285,7 @@
               class="flex items-start gap-2 border-b border-border bg-surface-hover px-4 py-3 text-xs text-text-secondary"
               data-testid="title-mismatch"
             >
-              <TriangleAlert size={14} class="mt-0.5 flex-shrink-0 text-warning-fg" aria-hidden="true" />
+              <TriangleAlert size={14} class="mt-0.5 shrink-0 text-warning-fg" aria-hidden="true" />
               <span>
                 The audio is identical, but the copies are titled {quotedList(titles)}. If those
                 name different recordings, one file is mislabelled and the other recording isn't in

web/src/routes/admin/integrations/+page.svelte

@@ -436,7 +436,7 @@
         type="text"
         bind:value={baseUrl}
         placeholder="http://lidarr.lan:8686"
-        class="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 font-mono text-sm text-text-primary placeholder:text-text-muted focus:outline-none focus:ring-2 focus:ring-accent"
+        class="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 font-mono text-sm text-text-primary placeholder:text-text-muted focus:outline-hidden focus:ring-2 focus:ring-accent"
       />
     </label>
 
@@ -448,7 +448,7 @@
         placeholder={config.data?.api_key === '***'
           ? '••• (saved — leave empty to keep)'
           : 'Paste API key'}
-        class="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 font-mono text-sm text-text-primary placeholder:text-text-muted focus:outline-none focus:ring-2 focus:ring-accent"
+        class="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 font-mono text-sm text-text-primary placeholder:text-text-muted focus:outline-hidden focus:ring-2 focus:ring-accent"
       />
     </label>
 
@@ -457,7 +457,7 @@
       <select
         bind:value={qualityId}
         disabled={!profilesEnabled && testQualityProfiles.length === 0}
-        class="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-accent disabled:opacity-50"
+        class="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-text-primary focus:outline-hidden focus:ring-2 focus:ring-accent disabled:opacity-50"
       >
         {#each (testQualityProfiles.length ? testQualityProfiles : (profiles.data ?? [])) as p (p.id)}
           <option value={p.id}>{p.name}</option>
@@ -475,7 +475,7 @@
       <select
         bind:value={metadataId}
         disabled={!profilesEnabled && testMetadataProfiles.length === 0}
-        class="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-accent disabled:opacity-50"
+        class="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-text-primary focus:outline-hidden focus:ring-2 focus:ring-accent disabled:opacity-50"
       >
         {#each (testMetadataProfiles.length ? testMetadataProfiles : (metadataProfiles.data ?? [])) as p (p.id)}
           <option value={p.id}>{p.name}</option>
@@ -493,7 +493,7 @@
       <select
         bind:value={rootPath}
         disabled={!profilesEnabled && testRootFolders.length === 0}
-        class="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 font-mono text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-accent disabled:opacity-50"
+        class="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 font-mono text-sm text-text-primary focus:outline-hidden focus:ring-2 focus:ring-accent disabled:opacity-50"
       >
         {#each (testRootFolders.length ? testRootFolders : (folders.data ?? [])) as f (f.path)}
           <option value={f.path}
@@ -597,7 +597,7 @@
                   <input id="key-{provider.id}" type="password"
                          placeholder={provider.api_key_set ? '••• (saved — leave empty to keep)' : 'Leave blank to use the public test key'}
                          bind:value={coverLocalState[provider.id].apiKey}
-                         class="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 font-mono text-sm text-text-primary placeholder:text-text-muted focus:outline-none focus:ring-2 focus:ring-accent flex-1" />
+                         class="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 font-mono text-sm text-text-primary placeholder:text-text-muted focus:outline-hidden focus:ring-2 focus:ring-accent flex-1" />
                   {#if provider.api_key_set}
                     <span class="text-xs text-text-secondary whitespace-nowrap">✓ Set</span>
                   {/if}
@@ -694,7 +694,7 @@
                   <input id="tag-key-{provider.id}" type="password"
                          placeholder={provider.api_key_set ? '••• (saved — leave empty to keep)' : 'Paste your API key to enable this source'}
                          bind:value={tagLocalState[provider.id].apiKey}
-                         class="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 font-mono text-sm text-text-primary placeholder:text-text-muted focus:outline-none focus:ring-2 focus:ring-accent flex-1" />
+                         class="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 font-mono text-sm text-text-primary placeholder:text-text-muted focus:outline-hidden focus:ring-2 focus:ring-accent flex-1" />
                   {#if provider.api_key_set}
                     <span class="text-xs text-text-secondary whitespace-nowrap">✓ Set</span>
                   {/if}
@@ -768,30 +768,30 @@
     <div class="grid gap-3 sm:grid-cols-[auto_1fr] items-center">
       <label for="smtp-host" class="text-sm text-text-secondary">Host</label>
       <input id="smtp-host" type="text" bind:value={smtpForm.host}
-             class="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 font-mono text-sm text-text-primary placeholder:text-text-muted focus:outline-none focus:ring-2 focus:ring-accent" />
+             class="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 font-mono text-sm text-text-primary placeholder:text-text-muted focus:outline-hidden focus:ring-2 focus:ring-accent" />
 
       <label for="smtp-port" class="text-sm text-text-secondary">Port</label>
       <input id="smtp-port" type="number" min="1" max="65535"
              bind:value={smtpForm.port}
-             class="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 font-mono text-sm text-text-primary placeholder:text-text-muted focus:outline-none focus:ring-2 focus:ring-accent" />
+             class="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 font-mono text-sm text-text-primary placeholder:text-text-muted focus:outline-hidden focus:ring-2 focus:ring-accent" />
 
       <label for="smtp-username" class="text-sm text-text-secondary">Username</label>
       <input id="smtp-username" type="text" bind:value={smtpForm.username}
-             class="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 font-mono text-sm text-text-primary placeholder:text-text-muted focus:outline-none focus:ring-2 focus:ring-accent" />
+             class="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 font-mono text-sm text-text-primary placeholder:text-text-muted focus:outline-hidden focus:ring-2 focus:ring-accent" />
 
       <label for="smtp-password" class="text-sm text-text-secondary">Password</label>
       <input id="smtp-password" type="password"
              placeholder={smtpForm.password === '***' ? 'Leave blank to keep current' : ''}
              bind:value={smtpPasswordInput}
-             class="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 font-mono text-sm text-text-primary placeholder:text-text-muted focus:outline-none focus:ring-2 focus:ring-accent" />
+             class="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 font-mono text-sm text-text-primary placeholder:text-text-muted focus:outline-hidden focus:ring-2 focus:ring-accent" />
 
       <label for="smtp-from" class="text-sm text-text-secondary">From address</label>
       <input id="smtp-from" type="email" bind:value={smtpForm.from_address}
-             class="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 font-mono text-sm text-text-primary placeholder:text-text-muted focus:outline-none focus:ring-2 focus:ring-accent" />
+             class="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 font-mono text-sm text-text-primary placeholder:text-text-muted focus:outline-hidden focus:ring-2 focus:ring-accent" />
 
       <label for="smtp-from-name" class="text-sm text-text-secondary">From name</label>
       <input id="smtp-from-name" type="text" bind:value={smtpForm.from_name}
-             class="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 font-mono text-sm text-text-primary placeholder:text-text-muted focus:outline-none focus:ring-2 focus:ring-accent" />
+             class="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 font-mono text-sm text-text-primary placeholder:text-text-muted focus:outline-hidden focus:ring-2 focus:ring-accent" />
 
       <span class="text-sm text-text-secondary">TLS</span>
       <label class="flex items-center gap-2 text-sm">
@@ -837,7 +837,7 @@
     bind:value={disconnectInput}
     placeholder="DISCONNECT"
     aria-label="Type DISCONNECT to confirm"
-    class="mt-3 w-full rounded-md border border-border bg-background px-3 py-2 font-mono text-sm text-text-primary placeholder:text-text-muted focus:outline-none focus:ring-2 focus:ring-accent"
+    class="mt-3 w-full rounded-md border border-border bg-background px-3 py-2 font-mono text-sm text-text-primary placeholder:text-text-muted focus:outline-hidden focus:ring-2 focus:ring-accent"
   />
   {#if disconnectError}
     <p class="mt-2 text-sm text-error-fg">Disconnect failed — {disconnectError}</p>

web/src/routes/admin/missing-files/+page.svelte

@@ -174,7 +174,7 @@
         <button
           type="button"
           class="rounded border border-border px-3 py-1.5 text-sm text-text-primary
-                 hover:bg-surface-hover focus-visible:outline focus-visible:outline-2
+                 hover:bg-surface-hover focus-visible:outline-solid focus-visible:outline-2
                  focus-visible:outline-accent disabled:cursor-not-allowed disabled:opacity-40"
           disabled={offset === 0}
           onclick={() => (offset = Math.max(0, offset - PAGE_SIZE))}
@@ -187,7 +187,7 @@
         <button
           type="button"
           class="rounded border border-border px-3 py-1.5 text-sm text-text-primary
-                 hover:bg-surface-hover focus-visible:outline focus-visible:outline-2
+                 hover:bg-surface-hover focus-visible:outline-solid focus-visible:outline-2
                  focus-visible:outline-accent disabled:cursor-not-allowed disabled:opacity-40"
           disabled={!hasMore}
           onclick={() => (offset += PAGE_SIZE)}

web/src/routes/admin/quarantine/+page.svelte

@@ -351,7 +351,7 @@
         type="text"
         bind:value={deleteLidarrInput}
         placeholder="DELETE"
-        class="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 font-mono text-sm text-text-primary placeholder:text-text-muted focus:outline-none focus:ring-2 focus:ring-accent"
+        class="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 font-mono text-sm text-text-primary placeholder:text-text-muted focus:outline-hidden focus:ring-2 focus:ring-accent"
         aria-label="Type DELETE to confirm"
       />
     </label>

web/src/routes/admin/requests/+page.svelte

@@ -291,7 +291,7 @@
     <span class="block text-sm text-text-secondary">Quality profile</span>
     <select
       bind:value={qualityOverride}
-      class="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-accent"
+      class="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-text-primary focus:outline-hidden focus:ring-2 focus:ring-accent"
     >
       <option value="">Use default</option>
       {#each profiles.data ?? [] as p (p.id)}
@@ -304,7 +304,7 @@
     <span class="block text-sm text-text-secondary">Root folder</span>
     <select
       bind:value={rootOverride}
-      class="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 font-mono text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-accent"
+      class="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 font-mono text-sm text-text-primary focus:outline-hidden focus:ring-2 focus:ring-accent"
     >
       <option value="">Use default</option>
       {#each folders.data ?? [] as f (f.path)}
@@ -346,7 +346,7 @@
       bind:value={rejectNotes}
       rows="3"
       placeholder="Optional — why this is being set aside"
-      class="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-text-primary placeholder:text-text-muted focus:outline-none focus:ring-2 focus:ring-accent"
+      class="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-text-primary placeholder:text-text-muted focus:outline-hidden focus:ring-2 focus:ring-accent"
     ></textarea>
   </label>
   <div class="mt-5 flex justify-end gap-2">

web/src/routes/admin/tuning/+page.svelte

@@ -293,7 +293,7 @@
                   type="number"
                   step="0.1"
                   bind:value={form[p.scope][f.key]}
-                  class="w-full rounded border border-border bg-background px-2 py-1 text-right text-sm tabular-nums outline-none focus:border-accent"
+                  class="w-full rounded border border-border bg-background px-2 py-1 text-right text-sm tabular-nums outline-hidden focus:border-accent"
                 />
               </div>
             {/each}
@@ -346,7 +346,7 @@
               type="number"
               step={f.key === 'half_life_days' ? '1' : '0.05'}
               bind:value={form.taste[f.key]}
-              class="w-full rounded border border-border bg-background px-2 py-1 text-right text-sm tabular-nums outline-none focus:border-accent"
+              class="w-full rounded border border-border bg-background px-2 py-1 text-right text-sm tabular-nums outline-hidden focus:border-accent"
             />
           </div>
         {/each}
@@ -402,7 +402,7 @@
               step={f.key === 'snooze_days' ? '1' : '0.1'}
               min="0"
               bind:value={form.discover[f.key]}
-              class="w-full rounded border border-border bg-background px-2 py-1 text-right text-sm tabular-nums outline-none focus:border-accent"
+              class="w-full rounded border border-border bg-background px-2 py-1 text-right text-sm tabular-nums outline-hidden focus:border-accent"
             />
           </div>
         {/each}

web/src/routes/admin/users/+page.svelte

@@ -369,7 +369,7 @@
         minlength="3"
         maxlength="32"
         bind:value={createForm.username}
-        class="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-text-primary placeholder:text-text-muted focus:outline-none focus:ring-2 focus:ring-accent"
+        class="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-text-primary placeholder:text-text-muted focus:outline-hidden focus:ring-2 focus:ring-accent"
       />
     </div>
     <div>
@@ -381,7 +381,7 @@
         type="text"
         maxlength="64"
         bind:value={createForm.display_name}
-        class="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-text-primary placeholder:text-text-muted focus:outline-none focus:ring-2 focus:ring-accent"
+        class="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-text-primary placeholder:text-text-muted focus:outline-hidden focus:ring-2 focus:ring-accent"
       />
     </div>
     <div>
@@ -392,7 +392,7 @@
         required
         minlength="8"
         bind:value={createForm.password}
-        class="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-text-primary placeholder:text-text-muted focus:outline-none focus:ring-2 focus:ring-accent"
+        class="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-text-primary placeholder:text-text-muted focus:outline-hidden focus:ring-2 focus:ring-accent"
       />
     </div>
     <div>
@@ -403,7 +403,7 @@
         required
         minlength="8"
         bind:value={createForm.confirmPassword}
-        class="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-text-primary placeholder:text-text-muted focus:outline-none focus:ring-2 focus:ring-accent"
+        class="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-text-primary placeholder:text-text-muted focus:outline-hidden focus:ring-2 focus:ring-accent"
       />
     </div>
     <label class="flex items-center gap-2 text-sm text-text-secondary">
@@ -447,7 +447,7 @@
         required
         minlength="8"
         bind:value={resetPasswordValue}
-        class="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-text-primary placeholder:text-text-muted focus:outline-none focus:ring-2 focus:ring-accent"
+        class="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-text-primary placeholder:text-text-muted focus:outline-hidden focus:ring-2 focus:ring-accent"
       />
     </div>
     <div>
@@ -458,7 +458,7 @@
         required
         minlength="8"
         bind:value={resetPasswordConfirm}
-        class="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-text-primary placeholder:text-text-muted focus:outline-none focus:ring-2 focus:ring-accent"
+        class="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-text-primary placeholder:text-text-muted focus:outline-hidden focus:ring-2 focus:ring-accent"
       />
     </div>
     <div class="flex justify-end gap-2 pt-2">