feat(web): library poster grid with list toggle

web/src/style.css

@@ -1159,9 +1159,157 @@ body {
 }
 
 /* the toggle's own padding would inset its text past the chip column's
-   right rag; drop it so SATISFIED sits flush with the chips below */
+   right rag; with the shape toggle right of it, SATISFIED sits flush
+   against its neighbour instead of the deck edge */
 .library-bar .bucket-toggle {
   padding: 0;
+  margin-left: var(--space-2);
+}
+
+/* ---- library poster grid (§9.6, issue 151) ------------------------------ */
+
+/* the shape toggle: a joined pair, engaged side lit like any view control */
+.view-toggle {
+  margin-left: auto;
+  display: inline-flex;
+}
+
+.view-btn {
+  min-height: 1.75rem;
+  padding: 0 var(--space-2);
+  font-family: var(--font-readout);
+  font-size: var(--text-xs);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--ink-faint);
+  background: none;
+  border: 1px solid var(--line);
+  cursor: pointer;
+  transition:
+    border-color 150ms var(--ease-out),
+    color 150ms var(--ease-out);
+}
+
+.view-btn + .view-btn {
+  border-left-width: 0;
+}
+
+.view-btn:hover {
+  color: var(--accent-bright);
+}
+
+.view-btn[aria-pressed="true"] {
+  color: var(--accent-bright);
+  border-color: var(--accent);
+}
+
+/* auto-fill keeps every tile the same width down to a phone, where three
+   narrow-but-legible columns beat two oversized ones */
+.deck-rows.grid-rows {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
+  gap: var(--space-4);
+}
+
+.card {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  background: var(--panel);
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  overflow: hidden;
+  text-align: left;
+  cursor: pointer;
+  transition:
+    border-color 150ms var(--ease-out),
+    transform 150ms var(--ease-out);
+}
+
+.card:hover {
+  border-color: var(--accent);
+}
+
+.card:active {
+  transform: translateY(1px);
+}
+
+/* the poster is framed evidence, like every other image on a panel */
+.card-art {
+  display: block;
+  aspect-ratio: 2 / 3;
+}
+
+.card-poster {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  background: var(--panel-raised);
+}
+
+/* same ratio as a poster, carrying the title: the grid never has a hole */
+.card-blank {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  padding: var(--space-3);
+  background: var(--panel-raised);
+  box-shadow: inset 0 1px var(--highlight);
+}
+
+.card-blank-title {
+  font-family: var(--font-display);
+  font-size: var(--text-base);
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  text-align: center;
+  color: var(--ink-faint);
+}
+
+.card-body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  padding: var(--space-2);
+}
+
+.card-id {
+  display: flex;
+  align-items: baseline;
+  gap: var(--space-1);
+  min-width: 0;
+}
+
+.card-name {
+  flex: 1;
+  /* two clamped lines: a long title stays readable where a single
+     ellipsised line at tile width would not be */
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  font-family: var(--font-display);
+  font-size: var(--text-sm);
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  color: var(--ink);
+}
+
+.card-year {
+  flex: none;
+  font-size: var(--text-2xs);
+}
+
+.card-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-1);
 }
 
 /* ---- series detail (§4.1 + §4.2, issue 129) --------------------------- */
@@ -1625,6 +1773,19 @@ body {
     gap: var(--space-3) var(--space-4);
   }
 
+  /* the library bar wraps to two lines at phone widths: identity and count
+     on the first, shape and satisfied toggles on the second, each label
+     whole instead of squeezed into a mid-word break */
+  .library-bar {
+    flex-wrap: wrap;
+    row-gap: var(--space-2);
+  }
+
+  .library-bar .bucket-toggle,
+  .view-btn {
+    white-space: nowrap;
+  }
+
   .rail-verdict {
     flex-basis: 100%;
     order: 3;