/* SPAM Meta: the Card tier list tab (js/cardtiers.js). Tier rows on the ground: the tier letter in its tier colour (the card
   tier scale of DESIGN.md) as the row's anchor, the card icons beside it, a hairline between rows, no panel and no socket; the
   Tiers | Details tabs and the filters; the card preview and pinned card with the strip of the card's range; the Details
   table. Every class is prefixed ct-. */

.ct-head { margin-bottom: 0; }

/* ---------------------------------------------------------------- toolbar, filters */
.ct-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: 24px; }
/* the Tiers | Details tablist wears the site's .seg track (base.css), quieter than a switch: the selected tab lifted, not lit in
   cyan (the One Cyan Rule: the filter count is the bar's one cyan) */
.ct-tabs button:not([aria-selected="true"]) { color: var(--muted); }
.ct-tabs button[aria-selected="true"] { background: var(--panel-hi); color: var(--ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px var(--edge); }
.ct-filters { display: flex; flex-wrap: wrap; gap: 8px 24px; padding-top: 16px; }
.ct-fgroup { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ct-fgroup-l { margin-right: 4px; color: var(--muted); font: 600 14px/1.4 var(--text); }
/* while a filter is on: the count, the line of active filters (filters.css) and "Clear filters", as the Codex's result row */
.ct-fstatus { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; min-height: 44px; margin-top: 12px; }
.ct-fcount { color: var(--ink); font: 700 16px/1.4 var(--text); white-space: nowrap; }
.ct-find { margin-top: 16px; }
.ct-clear { margin-left: auto; }

/* card tier scale: one colour per tier, used only by the tier label, tier chips, swatches and the strips; "few" (not enough
   data) is Panel Lifted */
.tc-s { --tc: var(--tier-s); } .tc-a { --tc: var(--tier-a); } .tc-b { --tc: var(--tier-b); } .tc-c { --tc: var(--tier-c); }
.tc-d { --tc: var(--tier-d); } .tc-e { --tc: var(--tier-e); } .tc-f { --tc: var(--tier-f); } .tc-few { --tc: var(--panel-hi); }
.chip i.ct-sw { width: 16px; height: 16px; border-radius: 4px; background: var(--tc); }
/* Panel Lifted on a chip would vanish: the "not enough data" swatch carries a field-edge outline */
.chip i.ct-sw.tc-few { box-shadow: inset 0 0 0 1px var(--edge); }

/* ---------------------------------------------------------------- tier rows */
.ct-view { margin-top: 16px; }
.ct-list { overflow: clip; }
.ct-list:focus { outline: none; }
.ct-row { display: grid; grid-template-columns: 88px minmax(0, 1fr); }
/* a line above every row that follows a shown row, so a search that hides rows never doubles the panel's top edge */
.ct-row:not([hidden]) ~ .ct-row { border-top: 1px solid var(--line); }
/* the last row ("Not enough data") only shows when it holds cards */
.ct-row.ct-row-none { display: none; }
/* a search hides the cards that do not match and lets the rows shrink to what is left */
.ct-finding .ct-ic.dim { display: none; }
.ct-tl { padding: 16px 8px 16px 0; color: var(--tc); }
/* the letter and the count follow the scroll inside a tall row, so the tier stays named while its cards scroll by */
.ct-tl-in { position: sticky; top: calc(var(--chrome-h) + 64px); display: grid; gap: 4px; justify-items: start; }
.ct-tl-k { font: 400 40px/1 var(--display); letter-spacing: .01em; }
/* the last row's words ("Not enough data"), quiet: the caption type, two lines at most in the rail */
.ct-tl-word { font: 600 14px/1.3 var(--text); }
.ct-tl-n { color: var(--muted); font: 600 14px/1.2 var(--text); }
.ct-tl.tc-few { color: var(--muted); }
.ct-cards { position: relative; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 12px; min-height: 104px; padding: 24px 0 16px 8px; }
.ct-empty { position: absolute; left: 16px; right: 16px; top: 50%; margin: 0; transform: translateY(-50%); color: var(--muted); font: 600 14px/1.4 var(--text);
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--t-fade) var(--curve), visibility 0s linear var(--t-fade); }
.ct-cards.is-empty .ct-empty { opacity: 1; visibility: visible; transition: opacity var(--t-fade) var(--curve), visibility 0s; }
.ct-finding .ct-cards { min-height: 0; }

/* a card icon: the mini card (art and element orb) at tier-list size */
.ct-ic { position: relative; flex: none; width: 56px; aspect-ratio: 1432 / 2048; padding: 0; border: 2px solid var(--card-edge); border-radius: 4px; background: var(--card-edge); cursor: pointer;
  transition: opacity var(--t-state) var(--curve), box-shadow var(--t-state) var(--curve); }
.ct-ic-art { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border-radius: 4px; object-fit: cover; object-position: top; }
.ct-ic-art.broken { visibility: hidden; }
/* hover and pressed: the small cards' light and press (cards.css); pinned (its numbers open) keeps the ring: it is selected */
.ct-ic.pinned { box-shadow: var(--ring); }
.ct-ic:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--night), 0 0 0 4px var(--accent); }
.ct-ic.dim { opacity: .45; }
.ct-ic.dim:hover, .ct-ic.dim:focus-visible, .ct-ic.dim[aria-expanded="true"] { opacity: 1; }
.ct-ic-orb { position: absolute; left: -8px; top: -8px; width: 20px; height: 20px; background-size: contain; background-repeat: no-repeat; background-position: center; pointer-events: none; }
/* the last row (the cards with not enough data) is quieter: its icons a step smaller than the tiers' (the phone size here,
   36px on a phone), so it weighs less than the tiers */
.ct-row.ct-few .ct-ic { width: 44px; }
.ct-row.ct-few .ct-ic-orb { left: -6px; top: -6px; width: 16px; height: 16px; }

/* ---------------------------------------------------------------- the strip (js/deckstrip.js): a card's strength on the page's
   one axis (lowest on the left) over a sunken track: its range as a soft bar in its tier colour, the strength as a tick. */
.ct-st-w { display: grid; gap: 4px; width: 100%; }
.ct-st { position: relative; display: block; height: 24px; overflow: hidden; border-radius: 4px; background: var(--socket); }
.ct-st::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: var(--sunken); pointer-events: none; }
/* the range, a soft bar in the tier colour across the track's middle, and the strength itself on it, a short Cream
   Lavender tick (the bar belongs to the number printed above) */
.ct-st-ci { position: absolute; top: 8px; bottom: 8px; display: block; min-width: 2px; border-radius: 4px; background: color-mix(in srgb, var(--tc) 60%, transparent); }
.ct-st-f { position: absolute; z-index: 2; top: 6px; bottom: 6px; display: block; width: 2px; margin-left: -1px; border-radius: 4px; background: var(--ink); }
/* 50%, an average card: a hairline across the whole track, under the bar and the tick */
.ct-st-mid { position: absolute; top: 0; bottom: 0; display: block; width: 1px; margin-left: -.5px; background: var(--muted); opacity: .5; }
.ct-st-ax { position: relative; display: flex; justify-content: space-between; color: var(--muted); font: 600 14px/1.2 var(--text); }
.ct-st-ax-mid { position: absolute; top: 0; transform: translateX(-50%); }
/* the key: a sample of the mark before its words */
.ct-st-key { display: flex; flex-wrap: wrap; gap: 4px 16px; color: var(--muted); font: 600 14px/1.2 var(--text); }
.ct-st-key > span { display: inline-flex; align-items: center; gap: 8px; }
.ct-st-k.ci { position: relative; display: block; flex: none; width: 16px; height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--tc) 60%, transparent); }
.ct-st-k.ci::after { content: ""; position: absolute; left: 7px; top: -2px; bottom: -2px; width: 2px; border-radius: 4px; background: var(--ink); }
.ct-st-k.mid { display: block; flex: none; width: 1px; height: 14px; background: var(--muted); opacity: .5; }
.ct-c-where .ct-st, .ct-th-ax { max-width: 280px; }
.ct-c-where .ct-st { height: 16px; }
.ct-c-where .ct-st-ci { top: 5px; bottom: 5px; }
.ct-c-where .ct-st-f { top: 3px; bottom: 3px; }
.ct-th-ax { display: block; margin-top: 4px; }
/* a row's own axis is for the phone, where the header is gone */
td.ct-c-where .ct-st-ax { display: none; }

/* ---------------------------------------------------------------- the card preview and pinned card */
/* z-index 11, one under the sticky toolbar (12): the card keeps clear of it (cardtiers.js follow), and a frame the scroll paints
   before the card is moved slips it under the toolbar's band, never over it */
.ct-pop { position: absolute; left: 0; top: 0; z-index: 11; width: min(352px, calc(100vw - 32px)); padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel);
  box-shadow: var(--shadow); color: var(--ink); opacity: 0; visibility: hidden; pointer-events: none; transform: scale(.96); transform-origin: var(--ox, 50%) var(--oy, 0);
  transition: opacity var(--t-press) var(--curve), transform var(--t-press) var(--curve), visibility 0s linear var(--t-press); }
.ct-pop.on { opacity: 1; visibility: visible; transform: none; transition: opacity var(--t-press) var(--curve), transform var(--t-press) var(--curve), visibility 0s; }
.ct-pop.on.pinned { pointer-events: auto; }
/* never taller than the room under the header and the sticky toolbar (--room, cardtiers.js showPop and follow) */
.ct-pop.pinned { max-height: var(--room, calc(100vh - var(--chrome-h) - 32px)); overflow: auto; overscroll-behavior: contain; }
.ct-pop-more { margin-top: 8px; color: var(--muted); font: 600 14px/1.4 var(--text); }
.ct-pop-x { top: 4px; right: 4px; background: transparent; }
.ct-pop.pinned .ct-pop-h { padding-right: 40px; }
.ct-pop-h { display: grid; grid-template-columns: 48px minmax(0, 1fr) min-content; gap: 12px; align-items: center; }
.ct-pop-art { display: block; width: 48px; height: auto; aspect-ratio: 1432 / 2048; border: 1px solid var(--card-edge); border-radius: 4px; object-fit: cover; object-position: top; background: var(--socket); }
.ct-pop-name { font: 400 18px/1.15 var(--display); }
.ct-pop-sub { color: var(--muted); font: 600 14px/1.4 var(--text); }
/* the tier, large, at the end of the header: the first thing the eye reads after the name */
.ct-pop-tier { display: grid; justify-items: center; gap: 4px; }
.ct-pop-tier .ct-tchip { min-width: 44px; height: 36px; padding: 0 8px; border-radius: 8px; font-size: 22px; }
.ct-pop-tier > span:not(.ct-tchip) { color: var(--muted); font: 600 14px/1.2 var(--text); white-space: nowrap; }
.ct-pop-st { margin-top: 16px; }
/* the strength big with its range beside it, its games and decks under them */
.ct-pop-fig { display: grid; gap: 4px; margin-top: 16px; }
.ct-pop-big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.ct-pop-big b { color: var(--ink); font: 400 28px/1 var(--display); letter-spacing: .01em; }
.ct-pop-big span { color: var(--muted); font: 600 14px/1.3 var(--text); }
.ct-pop-big.none b { color: var(--ink-2); font-size: 22px; }
/* the range right after the strength (Soft Lavender, one step above its basis, so it reads with the number) */
.ct-pop-big .ct-pop-ci { color: var(--ink-2); white-space: nowrap; }
.ct-pop-basis { color: var(--muted); font: 600 14px/1.3 var(--text); }
/* the patch tag, a row of its own under the names and the tier */
.ct-pop-h > .tag.ptag { grid-column: 2 / -1; justify-self: start; margin-top: -4px; }
.ct-pop-pc { margin-top: 12px; color: var(--ink-2); font: 600 14px/1.4 var(--text); text-wrap: pretty; }
.ct-pop .pold { margin-top: 8px; }
.ct-pop-sugg { display: grid; gap: 4px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.ct-pop-sugg-h { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font: 400 16px/1.15 var(--display); }
.ct-pop-sugg p { color: var(--ink-2); font: 600 14px/1.4 var(--text); white-space: pre-line; }
.ct-nm-pc { display: flex; align-items: center; gap: 4px; margin-top: 4px; color: var(--muted); }
.ct-pop-act { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.ct-pop-open { width: 100%; height: 36px; font-size: 16px; }
.ct-tchip { display: inline-grid; place-items: center; min-width: 28px; height: 24px; padding: 0 4px; border-radius: 4px; background: var(--tc); color: var(--accent-ink); font: 400 16px/1 var(--display); }
/* Panel Lifted would vanish on the Details panel: the "not enough data" dash chip carries a field-edge outline */
.ct-tchip.tc-few { color: var(--ink-2); font: 600 14px/1 var(--text); box-shadow: inset 0 0 0 1px var(--edge); }

/* ---------------------------------------------------------------- details table */
.ct-dt-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.ct-sort { flex: 0 1 320px; min-width: 240px; }
.ct-dt { margin-top: 16px; padding: 8px 24px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.ct-tab { width: 100%; border-collapse: collapse; table-layout: fixed; }
.ct-tab th { padding: 12px 8px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: bottom; color: var(--muted); font: 600 14px/1.3 var(--text); }
.ct-tab td { padding: 12px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; color: var(--ink-2); font: 600 14px/1.4 var(--text); }
.ct-tab th:first-child, .ct-tab td:first-child { padding-left: 0; }
.ct-tab th:last-child, .ct-tab td:last-child { padding-right: 0; }
.ct-tab tbody tr:last-child td { border-bottom: 0; }
.ct-w-rank { width: 40px; } .ct-w-card { width: 28%; } .ct-w-tier { width: 9%; } .ct-w-fig { width: 22%; } .ct-w-where { width: 38%; }
.ct-rk { font: 400 18px/1 var(--display); color: var(--muted); }
.ct-cardc { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: center; width: 100%; margin: -4px; padding: 4px; border: 0; border-radius: 8px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
  transition: background var(--t-state) var(--curve); }
.ct-cardc:hover { background: var(--panel-hi); }
.ct-cardc:active { background: var(--socket); }
.ct-cardc:focus-visible { outline: none; box-shadow: var(--ring); }
.ct-th { display: block; width: 36px; height: auto; aspect-ratio: 1432 / 2048; border: 1px solid var(--card-edge); border-radius: 4px; object-fit: cover; object-position: top; background: var(--socket); }
.ct-th.broken { visibility: hidden; }
.ct-nm { display: block; color: var(--ink); font: 400 16px/1.15 var(--display); }
.ct-nm-sub { display: block; color: var(--muted); }
.ct-rkm { display: none; color: var(--muted); }
.ct-fig { display: block; color: var(--ink); font: 400 18px/1.15 var(--display); }
.ct-fig-n { color: var(--muted); font: 600 14px/1.3 var(--text); }
/* a card with not enough data: the words in place of the figure, its games under them */
.ct-fig.none { color: var(--ink-2); font: 600 14px/1.3 var(--text); }
/* the range under the strength, the decks under it */
.ct-ci { display: block; color: var(--ink-2); white-space: nowrap; }
.ct-c-fig .ct-fig-n { display: block; }
.ct-dt-empty { display: grid; justify-items: start; gap: 12px; padding: 24px 0; color: var(--ink-2); }

/* ---------------------------------------------------------------- tablet and phone */
@media (min-width: 760px) {
  /* the tabs and the filters stay under the header while the rows scroll */
  .ct-bar { position: sticky; top: var(--chrome-h); z-index: 12; margin-inline: calc(-1 * var(--gut)); padding: 8px var(--gut); }
  /* a card reached by keyboard is never hidden under the sticky bar */
  .ct-ic, .ct-cardc { scroll-margin-top: 64px; }
}
@media (max-width: 760px) {
  .ct-dt { padding: 0 16px; }
  .ct-tab, .ct-tab tbody, .ct-tab tr, .ct-tab td { display: block; }
  .ct-tab thead, .ct-tab colgroup { display: none; }
  .ct-tab tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
  .ct-tab tr[hidden] { display: none; }
  .ct-tab tbody tr:last-child { border-bottom: 0; }
  .ct-tab td { padding: 0; border: 0; }
  .ct-tab td.ct-c-rank { display: none; }
  /* the card across, then its tier beside its strip, then the three counts in one line */
  .ct-tab td.ct-c-card, .ct-tab td.ct-c-where { grid-column: 1 / -1; }
  .ct-tab td.ct-c-fig { grid-column: span 2; }
  .ct-c-where .ct-st { max-width: none; }
  /* no header on a phone: each strip carries its axis under it */
  td.ct-c-where .ct-st-ax { display: flex; }
  .ct-tab td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 4px; color: var(--muted); font: 600 14px/1.4 var(--text); }
  /* a card with not enough data has no strip: its cell and its label go */
  .ct-tab td.ct-c-where:empty { display: none; }
  .ct-rkm { display: inline; }
}
@media (max-width: 759px) {
  .ct-bar { gap: 8px; }
  .ct-row { grid-template-columns: 72px minmax(0, 1fr); }
  .ct-tl { padding: 16px 4px 16px 0; }
  .ct-tl-in { top: calc(var(--chrome-h) + 8px); }
  .ct-tl-k { font-size: 28px; }
  .ct-cards { min-height: 88px; padding: 16px 0 16px 4px; }
  .ct-ic { width: 44px; }
  .ct-ic-orb { left: -6px; top: -6px; width: 16px; height: 16px; }
  .ct-row.ct-few .ct-ic { width: 36px; }
  .ct-row.ct-few .ct-ic-orb { left: -5px; top: -5px; width: 14px; height: 14px; }
  .ct-sort { flex: 1 1 100%; min-width: 0; }
  .ct-pop { position: fixed; left: 8px; right: 8px; top: auto; bottom: calc(8px + env(safe-area-inset-bottom)); width: auto; max-height: min(72vh, var(--room, 72vh)); overflow: auto; overscroll-behavior: contain; transform: translateY(24px);
    transition: opacity var(--t-move) var(--curve), transform var(--t-move) var(--curve), visibility 0s linear var(--t-move); }
  .ct-pop.on { transform: none; transition: opacity var(--t-move) var(--curve), transform var(--t-move) var(--curve), visibility 0s; }
  .ct-pop.pinned { max-height: min(72vh, var(--room, 72vh)); }
}