/* Stakes marketing site: the full card library (cards.html). Linked after base.css, page.css and
   library.css, which own the type, tokens, nav, footer, page shell, the card face, the Book filter bar
   and the opened card. This sheet adds the filter plate, its menus, the grid and the detail view's
   extras.

   The look law: docs/website/site-look.md. No rounded or oval shape except a card's small corner (the
   menu's caret is a triangle cut from borders), no numbering, 44px targets, nothing that exists only
   on hover, and a hue never travels without its word. */

.tbl { max-width:var(--wrap); margin:0 auto; }

/* ========== THE FILTER PLATE ==========
   A chamfered plate with a metal edge, drawn on pseudo-elements rather than clipping the plate: the
   keyword menu hangs below the plate and a clip-path would cut it off. */
.tbl-bar { --cut:18px; position:relative; z-index:3; isolation:isolate; display:grid; gap:14px; padding:20px clamp(16px,2.4vw,30px) 22px; }
.tbl-bar::before { content:''; position:absolute; inset:0; z-index:-2; clip-path:var(--oct); background:var(--metal-edge); }
.tbl-bar::after { content:''; position:absolute; inset:1px; z-index:-1; clip-path:var(--oct); background:rgba(8,9,13,.94); }
.tbl-row { display:flex; flex-wrap:wrap; align-items:center; gap:10px; min-width:0; }
.tbl-kinds { justify-content:space-between; gap:12px 28px; }
.tbl-kinds .filters { justify-content:flex-start; }
.tbl-sort { justify-content:flex-start; }
/* one row with the search row's rhythm: the sort key, its direction (a button the width of its words,
   never a full line), and the tokens menu pushed to the row's far end, under the deck-role menu */
.tbl-sort .bv-tokenmenu { margin-left:auto; }
/* the type buttons carry words only; the Book bar's hue square would be an empty mark here */
.filters-plain button::before { display:none; }

/* ---- the search field and the menus ---- */
.bv-search { flex:1 1 280px; min-width:0; min-height:44px; padding:0 14px; border:1px solid var(--line-soft); border-radius:0; background:rgba(6,7,10,.9);
  color:var(--parchment); font:500 .95rem/1.2 var(--ui); color-scheme:dark; -webkit-appearance:none; appearance:none; transition:border-color .2s; }
.bv-search::placeholder { color:var(--dim); opacity:1; }
.bv-search:hover { border-color:var(--line); }
.bv-search:focus-visible { outline:2px solid var(--gold-hi); outline-offset:3px; border-color:var(--gold); }
.bv-menu-wrap { position:relative; flex:0 1 auto; min-width:0; }
.bv-menu-btn { display:flex; align-items:center; gap:10px; width:100%; min-height:44px; padding:0 14px; text-align:left;
  font:800 .68rem/1.15 var(--ui); letter-spacing:.16em; text-transform:uppercase; color:var(--faded);
  border:1px solid var(--line-soft); background:rgba(10,11,15,.9); transition:color .2s, border-color .2s, background .2s; }
.bv-menu-btn > span { flex:1; min-width:0; }
.bv-menu-btn:hover { color:var(--gold-hi); border-color:var(--gold); }
/* a menu doing something (not on its default) is lit by a value edge as well as its own label: a gold
   rule under it and gold text, never a hue alone */
.bv-menu-btn.on { color:var(--gold-hi); border-color:var(--gold); background:rgba(40,28,10,.95); box-shadow:inset 0 -3px 0 var(--gold); }
.bv-caret { flex:none; width:0; height:0; border:5px solid transparent; border-top:6px solid currentColor; border-bottom:0; }
.bv-menu-btn[aria-expanded="true"] .bv-caret { border-top:0; border-bottom:6px solid currentColor; }
.bv-dir { width:auto; flex:0 0 auto; white-space:nowrap; }
.bv-dir > span { flex:none; }
.bv-arrow { flex:none; font-style:normal; font-size:1rem; line-height:1; }
/* the menu's glyph sits on the dark button and list, with the soft shadow it always had */
.bv-menu-wrap .ico-kw { filter:drop-shadow(0 1px 1px rgba(0,0,0,.85)); }
.bv-swatch { flex:none; width:10px; height:10px; background:var(--kw); box-shadow:inset 0 0 0 1px rgba(0,0,0,.4); }
/* The open list: a chamfered panel with a gold metal edge (the frame's ::before) and an opaque fill
   inset by the edge's 1px (its ::after), exactly as wide as its button, with a drop shadow so it stands
   off the cards. It sits in the plate's stacking context ABOVE the grid: the plate has a z-index of its
   own (a list at z-index 40 inside a plate with none ranks only inside the plate), and every card face
   is isolated in base.css, so no Gold tab or stat row of a tile ranks against it.
   The sizer is the invisible widest option, which gives button and list one width wide enough for any
   label. A list taller than the room under its button scrolls: the bar is thin and gold, and a gold
   glow on the edge that still has options behind it says there are more. The list scrolls INSIDE a
   still band of the frame's fill top and bottom, so its foot is always a finished edge (fill, then
   the chamfered metal rim) under the glow, never options cut off at the rim. */
.bv-sizer { display:grid; height:0; overflow:hidden; visibility:hidden; pointer-events:none; }
.bv-sz { display:flex; align-items:center; gap:10px; padding:0 28px; font:800 .7rem/1.2 var(--ui); letter-spacing:.16em; text-transform:uppercase; white-space:nowrap; }
.bv-menu-frame { --cut:10px; position:absolute; z-index:40; top:calc(100% + 6px); left:0; width:100%; filter:drop-shadow(0 22px 24px rgba(0,0,0,.72)); }
.bv-menu-frame::before, .bv-menu-frame::after { content:''; position:absolute; inset:0; z-index:-2; clip-path:var(--oct); background:var(--metal-edge); }
.bv-menu-frame::after { --cut:9px; inset:1px; z-index:-1; background:var(--ink-2); }
.bv-menu-frame:has(> .bv-menu[hidden]) { display:none; }
.bv-menu { position:relative; margin:7px 4px; max-height:calc(var(--menu-room, min(56vh, 460px)) - 12px); overflow:auto; overscroll-behavior:contain; padding:0 3px;
  scrollbar-width:thin; scrollbar-color:var(--gold-mid) var(--ink-3);
  background:
    linear-gradient(var(--ink-2), var(--ink-2)) 0 0 / 100% 26px no-repeat local,
    linear-gradient(var(--ink-2), var(--ink-2)) 0 100% / 100% 26px no-repeat local,
    linear-gradient(180deg, rgba(216,171,85,.5), transparent) 0 0 / 100% 26px no-repeat scroll,
    linear-gradient(0deg, rgba(216,171,85,.5), transparent) 0 100% / 100% 26px no-repeat scroll; }
.bv-menu[hidden] { display:none; }
.bv-opt { display:flex; align-items:center; gap:10px; width:100%; min-height:44px; padding:5px 12px; text-align:left;
  font:800 .7rem/1.2 var(--ui); letter-spacing:.14em; text-transform:uppercase; color:var(--text); }
.bv-opt > span { flex:1; min-width:0; }
.bv-opt:hover { background:rgba(216,171,85,.14); color:var(--gold-hi); }
.bv-opt:focus-visible { outline-offset:-3px; background:rgba(216,171,85,.14); color:var(--gold-hi); }
/* the chosen option has a gold edge down its side and brighter type: the state survives a hue-blind eye */
.bv-opt[aria-selected="true"] { background:rgba(216,171,85,.2); color:var(--gold-hi); box-shadow:inset 3px 0 0 var(--gold); }

/* ========== THE COUNT ========== */
.tbl-count { margin:22px 2px 18px; font:800 .74rem/1.5 var(--ui); letter-spacing:.16em; text-transform:uppercase; color:var(--faded); }
.tc-n { margin-right:.15em; font:900 1.5rem/1 var(--display); letter-spacing:.04em; color:var(--gold-hi); vertical-align:-.1em; }
.tc-deckable { color:var(--text); }
.tc-note { display:block; margin-top:2px; font-weight:600; letter-spacing:.06em; text-transform:none; color:var(--dim); }

/* ========== THE GRID ==========
   Every card is a real face, the same one the landing's wall deals. The tile IS the button: a hover or
   a keyboard focus lifts it, rings it in gold and lights its glint, so no single channel carries the
   state (reduced motion drops the lift and the ring remains). */
.tbl-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(158px, 1fr)); gap:clamp(14px,1.6vw,22px); padding:4px 0 8px; }
.tbl-grid .card { display:block; width:100%; padding:0; border:0; text-align:left; cursor:pointer; --card-r:8px; scroll-margin-top:calc(var(--nav-h) + 20px);
  transition:transform .35s var(--ease-out), box-shadow .3s; -webkit-tap-highlight-color:transparent; }
.tbl-grid .card:hover, .tbl-grid .card:focus-visible {
  transform:translateY(-6px);
  box-shadow:0 0 0 2px var(--gold), 0 0 26px 2px rgba(255,190,96,.4), 0 26px 40px rgba(0,0,0,.7); }
.tbl-grid .card:hover .glint, .tbl-grid .card:focus-visible .glint { opacity:1; }
.tbl-empty { grid-column:1 / -1; padding:48px 0; text-align:center; font:800 .9rem/1.4 var(--ui); letter-spacing:.16em; text-transform:uppercase; color:var(--faded); }

/* ========== CREDITS ==========
   The attribution the glyphs' licence requires, on a plate of its own at the foot of the page. */
.credits { --cut:16px; --fill:rgba(8,9,13,.94); max-width:940px; margin:clamp(48px,6vw,84px) auto 0; padding:clamp(22px,3vw,34px) clamp(20px,3.4vw,44px) clamp(24px,3vw,36px); }
.credits > :not(.grain-layer) { position:relative; z-index:1; }
.credits h2 { font:800 clamp(1.3rem,2.2vw,1.65rem)/1.1 var(--display); letter-spacing:.05em; text-transform:uppercase; color:var(--gold-hi); margin-bottom:10px; }
.credits p { color:var(--text); font-size:1rem; line-height:1.65; max-width:68ch; }
.credits a { color:var(--gold-hi); text-underline-offset:3px; }
.credits a:hover { color:var(--parchment); }

/* ========== THE OPENED CARD, IN DETAIL ==========
   library.css owns the dialog; the table's version adds the card's type beside its Book, the keywords
   with their rules, the deck roles and the cards it makes or is made by. */
.cv-tags { display:flex; flex-wrap:wrap; gap:6px; }
/* a type tag has no hue to carry: its word is all it says */
.chip-plain::before { display:none; }
.kws-def { display:grid; gap:8px; }
.kw-def { display:grid; grid-template-columns:minmax(0,max-content) minmax(0,1fr); gap:6px 16px; align-items:start; }
.kw-def .kw { font-size:.7rem; padding:7px 9px; }
.kw-def p { font-size:.95rem; line-height:1.5; color:var(--faded); padding-top:4px; }
.cv-more { display:grid; gap:14px; padding-top:16px; border-top:1px solid var(--line-soft); }
.cv-more[hidden] { display:none; }
.cv-sec h4 { font:800 .64rem/1 var(--ui); letter-spacing:.18em; text-transform:uppercase; color:var(--faded); margin-bottom:10px; }
/* the deck roles sit two to a line where the column is wide enough, which is most of the height the section took */
.cv-sec-roles { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap:0 28px; }
.cv-sec-roles h4 { grid-column:1 / -1; }
.cv-role { display:grid; align-content:start; gap:2px; margin-bottom:10px; font-size:.95rem; line-height:1.5; color:var(--faded); }
.cv-role b { display:inline-flex; align-items:center; gap:8px; font:800 .8rem/1.2 var(--ui); letter-spacing:.14em; text-transform:uppercase; }
.cv-role em { font-style:normal; color:var(--dim); }
.cv-rels { display:flex; flex-wrap:wrap; gap:8px; }
.cv-rel { display:inline-flex; align-items:center; gap:10px; min-height:52px; padding:4px 14px 4px 4px; text-align:left; color:var(--parchment);
  font:800 .74rem/1.15 var(--ui); letter-spacing:.12em; text-transform:uppercase; border:1px solid var(--line-soft); background:rgba(6,7,10,.7); transition:border-color .2s, background .2s; }
.cv-rel img { width:36px; height:44px; flex:none; object-fit:cover; }
.cv-rel:hover { border-color:var(--gold); background:rgba(40,28,10,.9); color:var(--gold-hi); }

/* On a wide screen a card with deck roles or related cards sets them in a second column beside its
   keywords and effect text, under the head, so the whole card fits the screen's height instead of
   scrolling. Narrower, they stack as before. The second column spans the keyword and effect rows;
   the effect row is the flexible one, so when that column is the taller the spare height falls under
   the effect text, at the column's foot, and never opens a gap between the keywords and the rules. */
@media (min-width:1100px) {
  .cv-body:has(.cv-more:not([hidden])) { display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); grid-template-rows:auto auto 1fr; gap:18px 36px; align-content:safe center; align-items:start; }
  .cv-body:has(.cv-more:not([hidden])) > .cv-head { grid-column:1 / -1; }
  .cv-body:has(.cv-more:not([hidden])) > .kws, .cv-body:has(.cv-more:not([hidden])) > .skills { grid-column:1; }
  .cv-body:has(.cv-more:not([hidden])) > .skills { margin-top:0; }
  .cv-body > .cv-more:not([hidden]) { grid-column:2; grid-row:2 / span 2; padding-top:0; border-top:0; }
  .cv-body:has(.cv-more:not([hidden])):has(.kws[hidden]) { grid-template-rows:auto 1fr; }
  .cv-body:has(.kws[hidden]) > .cv-more:not([hidden]) { grid-row:2; }
}

/* ========== RESPONSIVE ========== */
@media (max-width:760px) {
  .tbl-kinds { flex-direction:column; align-items:stretch; }
  .tbl-kinds .filters { justify-content:center; }
  /* the keyword and role menus pair up under the search; the sort key and its direction share a line
     while their words fit it (each label stays on one line, so when they do not the direction takes a
     line of its own), and the tokens menu takes a whole one */
  .tbl-tools { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; }
  .bv-search { grid-column:1 / -1; }
  .tbl-sort .bv-menu-wrap, .tbl-sort .bv-dir { flex:1 1 auto; }
  .tbl-sort .bv-dir { min-width:max-content; }
  .tbl-sort .bv-tokenmenu { flex:1 1 100%; margin-left:0; }
  .kw-def { grid-template-columns:1fr; }
}
@media (max-width:560px) {
  .tbl-grid { grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }
  .tbl-bar { padding:16px 14px 18px; }
  .filters button { padding:0 11px; letter-spacing:.12em; }
}
@media (prefers-reduced-motion: reduce) {
  /* no lift: the gold ring and the lit glint are what remain */
  .tbl-grid .card:hover, .tbl-grid .card:focus-visible { transform:none; }
}