/*
 * ── Cards view (browse and print) ──────────────────────────────
 * The catalogue: every printed card, grouped and filtered however the reader
 * wants, tap for what the face deliberately does not say.
 *
 * Only the browser's own blocks live here. Shared primitives (.chip, .seg,
 * .btn, .panel, .sk-card sizing in cards.css) stay where they are, and nothing
 * here declares fill or stroke on a card internal: cards.css sizes faces and
 * never paints them, because a stylesheet fill beats the SVG's own attribute
 * and that is how a whole print run of life cards once came out white.
 */

/* Below the content-mode header (sticky, opaque, z 200), never underneath it:
   pinned at 0 the deck chips and Print buttons sat behind the bar, unclickable. */
.cards-toolbar {
  position: sticky; top: var(--header-h, 68px); z-index: 5;
  background: var(--bg); padding: var(--space-3) 0;
  display: flex; flex-direction: column; gap: var(--space-2);
}
/* position:relative so an open menu's panel stacks over the grid it filters
   rather than relying on the sticky block's z-index alone. */
.cards-toolbar__row { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
/* The sort control. .field is the shared vertical label-over-input; here the
   label sits beside it so the row stays one line high. */
.cards-toolbar .field--inline { flex-direction: row; align-items: center; gap: var(--space-2); }
.cards-toolbar .field--inline > span { color: var(--text-muted); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; }
/* The print controls sit ABOVE the sticky toolbar and scroll away with the page.
   Inside it they wrapped onto four lines at 390px and made the sticky block
   385px tall, which is half a phone screen. */
.cards-print { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding-bottom: var(--space-2); }
/* The one sentence that keeps a reader from assuming the sheet follows the
   screen. It is copy, not decoration, so it never truncates: it wraps. */
.cards-print__note { flex: 1 1 20ch; min-width: 20ch; }

/* ── The filter bar ────────────────────────────────────────── */
/* Deck, Element, Tier and Class were four rows of chips: 256px of controls
   between the header and the first card at 1440x900, on a page whose whole job
   is showing cards. They are four menus on one line now, and the chips moved
   inside them unchanged, counts and all. */
.cards-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

.filter-menu { position: relative; }
/* Built to read as a control, not as a disclosure triangle: the native marker
   goes (two properties, Safari still wants the pseudo-element) and the caret is
   drawn as text so it can turn when the menu opens. */
.filter-menu__button {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: var(--control-height-sm); padding: 0 var(--space-3);
  border: 2px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface-1); color: var(--text-primary);
  cursor: pointer; list-style: none; user-select: none;
  font-size: var(--text-sm); font-weight: 600; white-space: nowrap;
  transition: background-color var(--dur) var(--ease-out), border-color var(--dur);
}
.filter-menu__button::-webkit-details-marker { display: none; }
.filter-menu__button:hover { background: var(--surface-2); }
.filter-menu__button:focus-visible { outline: 3px solid var(--gold-deep); outline-offset: 2px; }
.filter-menu__button::after {
  content: '\25BE'; color: var(--text-muted); font-size: 0.8em;
  transition: transform var(--dur) var(--ease-out);
}
.filter-menu[open] > .filter-menu__button::after { transform: rotate(180deg); }
.filter-menu__label { color: var(--text-muted); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
/* A filter that is doing something says so from the closed bar, so the reader
   never has to open four menus to find out why the grid is short. */
.filter-menu[data-on="true"] > .filter-menu__button { border-color: var(--text-primary); box-shadow: inset 0 -3px 0 var(--gold); }
.filter-menu[data-on="true"] .filter-menu__value { font-weight: 800; }

/* max-content, then clamped: the values sit on one line while they fit and wrap
   into a block after that, instead of stacking one per line inside a panel no
   wider than the button that opened it. */
.filter-menu__panel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 10;
  width: max-content; min-width: 100%; max-width: min(90vw, 34rem);
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3);
  background: var(--surface-1); border: 2px solid var(--border-strong);
  border-radius: var(--radius); box-shadow: 0 6px 0 var(--border-strong);
}
.filter-menu__title { color: var(--text-muted); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.filter-menu .chip { white-space: nowrap; }
.filter-menu .chip .muted { font-weight: 700; opacity: 0.75; }
/* A value that would empty the grid keeps its 0 and stops being pickable. It is
   not hidden: the count is the answer to "are there any", and a control that
   vanishes leaves the reader hunting for it. */
.filter-menu .chip:disabled { opacity: 0.4; cursor: not-allowed; }
.filter-menu .chip:disabled:hover { background: var(--surface-1); }
.chip[aria-pressed="true"] .muted { color: inherit; }

/* ── The grid ──────────────────────────────────────────────── */
.deck-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-4); }
.deck-grid .card-btn {
  background: none; border: 0; padding: 0; cursor: pointer; border-radius: 10px;
  transition: transform var(--dur) var(--ease-out);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font: inherit; color: var(--text-muted); font-size: var(--text-xs); font-weight: 700;
}
.deck-grid .card-btn:hover { transform: translateY(-4px); }
.deck-grid .card-btn:focus-visible { outline: 3px solid var(--gold-deep); outline-offset: 4px; }
.deck-grid .card-btn svg { width: 100%; height: auto; filter: drop-shadow(0 2px 0 var(--border-strong)); }
.deck-grid .card-btn .copies { background: var(--surface-2); border-radius: 999px; padding: 0 8px; }
.deck-head { display: flex; align-items: baseline; gap: var(--space-3); margin: var(--space-6) 0 var(--space-3); }
.deck-head h3 { font-size: var(--text-xl); font-weight: 900; }
.deck-head span { color: var(--text-muted); font-size: var(--text-sm); }

/* A filter combination that matches nothing says so, and offers the way out. */
.cards-empty { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-top: var(--space-4); }

/* ── The detail sheet ──────────────────────────────────────── */
.card-detail { display: grid; grid-template-columns: 300px 1fr; gap: var(--space-6); align-items: start; }
/* Face and back side by side: the back is half of what a player prints, and
   before this it was visible nowhere except inside the print sheet. */
.card-detail__art { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.card-detail__art figure { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.card-detail__art figcaption {
  color: var(--text-muted); font-size: var(--text-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; text-align: center;
}
.card-detail svg { width: 100%; height: auto; }
.card-detail h3 { font-size: var(--text-2xl); font-weight: 900; }
.card-detail dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: var(--text-sm); margin-top: var(--space-3); }
.card-detail dt { color: var(--text-muted); font-weight: 700; }
.card-detail .say { margin-top: var(--space-4); padding: var(--space-3); background: var(--surface-2); border-radius: var(--radius-sm); font-size: var(--text-sm); }
.card-detail .say b { font-size: var(--text-lg); }
@media (max-width: 520px) { .card-detail { grid-template-columns: 1fr; } .card-detail__art { max-width: 320px; } }

/* ── Phone (390px) ─────────────────────────────────────────── */
/* The bar wraps here rather than scrolling sideways, which puts the sticky
   block at 200px at 390px, down from the 224px the four chip rows cost. The
   uppercase label on each button goes: the chosen value already names the
   filter ("Any element" is not mistakable for a tier), and dropping it is most
   of the saving. A panel is pinned to the toolbar's own edges instead of the
   button's, because a menu opened from a right-hand button would otherwise
   hang off the screen. */
@media (max-width: 700px) {
  .filter-menu__label { display: none; }
  .filter-menu { position: static; }
  .filter-menu__panel { left: 0; right: 0; width: auto; max-width: none; }
  .cards-print__note { flex-basis: 100%; }
  .deck-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--space-3); }
}