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