fix(reader): both toolbars showed below 768px — cascade-layer conflict

The display:none for the full toolbar lived in @layer components while
the div also carried Tailwind's flex utility (@layer utilities). Layer
order beats specificity, so the utilities layer always won and the
full bar never hid below the breakpoint (the compact row only worked
because it had no display utility of its own).

Switch to Tailwind's own responsive utilities in the markup — full
toolbar 'hidden md:flex', compact row 'flex md:hidden' — and delete
the custom rules; responsive display now resolves inside a single
layer where source order (responsive variants after base) guarantees
the right winner.

templates/reader.templ

@@ -306,8 +306,8 @@ templ ReaderChrome(metadata ReaderMetadata, progress ReadingProgress) {
 			</div>
 			<!-- Fixed-layout row (comics, PDFs, manga) -->
 			<div x-show="isFixedLayout">
-				<!-- Full toolbar: desktop/tablet (>= 768px). Wraps gracefully in between. -->
+				<!-- Full toolbar: desktop/tablet (>= 768px, md). Wraps gracefully in between. -->
-				<div class="fx-tools-full flex flex-wrap items-center gap-x-1 gap-y-1 px-1.5 py-1.5 sm:px-2 sm:py-2 sm:gap-1">
+				<div class="hidden md:flex flex-wrap items-center gap-x-1 gap-y-1 px-1.5 py-1.5 sm:px-2 sm:py-2 sm:gap-1">
 				<div class="flex items-center gap-0.5">
 					<button @click="goLeft()" class="p-1.5 sm:p-2 rounded-lg hover:bg-gray-700" title="Go Left (←)" aria-label="Go left">
 						<svg class="reader-icon" width="24" height="24" aria-hidden="true">
@@ -404,7 +404,7 @@ templ ReaderChrome(metadata ReaderMetadata, progress ReadingProgress) {
 				<!-- Compact row (phone-sized windows): single line + ⋯ overflow.
 				     Standard mobile-reader pattern: paging, slider, progress stay;
 				     power tools move into a labeled menu. -->
-				<div class="fx-compact items-center gap-1 px-1.5 py-1.5">
+				<div class="flex md:hidden items-center gap-1 px-1.5 py-1.5">
 					<button @click="goLeft()" class="p-1.5 rounded-lg hover:bg-gray-700" title="Go Left (←)" aria-label="Go left">
 						<svg class="reader-icon" width="24" height="24" aria-hidden="true">
 							<path d="M 15 6 L 9 12 L 15 18"></path>

web/static/input.css

@@ -991,21 +991,10 @@
     gap: 0.25rem;
   }
 
-  /* Fixed-layout toolbar responsiveness:
+  /* Fixed-layout toolbar responsiveness is handled with Tailwind responsive
-     - >= 768px: full toolbar (flex-wrap absorbs mid-size widths)
+     utilities in reader.templ (hidden md:flex for the full toolbar,
-     - < 768px:  compact single line + ⋯ overflow menu (mobile-reader
+     flex md:hidden for the compact row) — custom layer rules here would
-       pattern: paging/slider/progress stay, power tools get a labeled menu) */
+     lose the cascade to the flex utility anyway. */
-  .fx-compact {
-    display: none;
-  }
-  @media (max-width: 767px) {
-    .fx-tools-full {
-      display: none;
-    }
-    .fx-compact {
-      display: flex;
-    }
-  }
   .reader-tools-popover {
     position: absolute;
     bottom: 100%;