/* Shape catalog (G144) — the generation vocabulary as cards. The shell (filter rail, card grid, right rail) is
   the shared browse-library layout in library.css; what is catalog-specific is the reach a card reports, which
   it says twice: as a badge and in the card's own edge, so a scan of the grid separates the tiers. */

.cat-card--reachable { border-style: dashed; }
.cat-card--emitter-only { border-style: dotted; opacity: .82; }

.cat-badge--family { color: var(--accent-lighter, var(--accent)); }
.cat-badge--in-mix { color: var(--text-secondary); }
.cat-badge--reachable { color: var(--warn, #d9a441); border-color: var(--warn, #d9a441); }
.cat-badge--emitter-only { color: var(--text-muted, var(--text-secondary)); border-style: dashed; }

.cat-knob {
  padding: 0 5px; font-size: 10px; font-family: ui-monospace, monospace;
  color: var(--text-secondary); background: var(--bg-selected); border-radius: var(--radius-sm);
}

/* The knob panel's own additions: an emission that was refused, in the emitter's words. */
.cat-probe-fig--refused { border-style: dashed; border-color: var(--warn, #d9a441); }
.cat-probe-none { font-size: var(--font-xs); color: var(--text-secondary); }
.cat-probe-reject { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.cat-probe-code {
  padding: 1px 6px; font-size: 10px; font-family: ui-monospace, monospace;
  color: var(--warn, #d9a441); border: 1px solid var(--warn, #d9a441); border-radius: var(--radius-sm);
}
.cat-probe-why { margin: 0; font-size: var(--font-xs); line-height: 1.5; color: var(--text-secondary); }
.cat-probe-ok { margin: 0; font-size: var(--font-xs); line-height: 1.5; color: var(--text-secondary); font-family: ui-monospace, monospace; }

/* The knob panel — what the picked card is, in detail, and the controls that re-probe it. Two parts, and the
   split is what makes it usable: the picture is pinned at the top and only the knobs under it scroll, since
   every edit is judged by that picture and scrolling to a control must not take it off screen. */
.lib-rail {
  flex-shrink: 0; width: clamp(360px, 32vw, 560px);
  border-left: 1px solid var(--border); overflow: hidden;
  display: flex; flex-direction: column;
}
.lib-rail-pin {
  flex-shrink: 0; padding: var(--space-3); border-bottom: 1px solid var(--border);
  display: flex; flex-direction: column; gap: var(--space-2);
}
.lib-rail-body {
  flex: 1; min-height: 0; overflow-y: auto; padding: var(--space-3);
  display: flex; flex-direction: column; gap: var(--space-3);
}
/* The body scrolls, so its children must keep their own height: a flex column shrinks its items to fit
   before it will overflow, which squashes a section under a tall editor rather than scrolling past it. */
.lib-rail-body > * { flex-shrink: 0; }
.lib-rail-head { display: flex; align-items: center; justify-content: space-between; }
.lib-rail-title { font-size: var(--font-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); }
.lib-rail-x { width: 24px; height: 24px; display: grid; place-items: center; background: transparent; color: var(--text-secondary); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; }
.lib-rail-x:hover { color: var(--text-bright); border-color: var(--accent); }
.lib-rail-x svg { width: var(--icon-xs); height: var(--icon-xs); }

/* A pinned figure is measured against the viewport, not its own drawing: it never scrolls away, so on a
   short window a fixed pixel height would take the panel and leave the knobs a slit to scroll in. */
.lib-rail-pin .lib-fig { min-height: 0; }
.lib-rail-pin .lib-fig svg { max-height: min(180px, 20vh); }