/* The card filters (DESIGN.md "Card filters", site/js/facets.js): the toolbar triggers and their popover from 760px, the
   bottom sheet on a phone, the line of active filters, the number ranges, the talents switch and the reasons under a card.
   Values from DESIGN.md only: chips 36px, inline chips 28px, pills 20px radius, panel 12px, the one curve and its durations. */

/* ---------------------------------------------------------------- toolbar triggers */
.fbar-w { position: relative; }
.tb-top .fbar-w { grid-column: 1 / -1; }
.ct-filters .fbar-w { flex: 1 1 100%; }
.fbar { display: flex; flex-wrap: wrap; gap: 8px; }
.fbar-b { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 8px 0 12px; border-radius: 20px; border: 1px solid var(--line);
  background: var(--panel); color: var(--ink); font: 600 14px/1 var(--text); white-space: nowrap; cursor: pointer;
  transition: background var(--t-state) var(--curve), border-color var(--t-state) var(--curve); }
.fbar-b::after { content: ""; position: absolute; inset: -4px -2px; }       /* a 44px hit area */
.fbar-b:hover { background: var(--panel-hi); }
.fbar-b:active { background: var(--socket); }
.fbar-b:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--night), 0 0 0 4px var(--accent); }
.fbar-b[aria-expanded="true"] { background: var(--panel-hi); border-color: var(--edge); }
.fbar-b .ico { color: var(--muted); transition: transform var(--t-move) var(--curve); }
.fbar-b[aria-expanded="true"] .ico { transform: rotate(180deg); color: var(--ink); }
/* how many picks a group holds: the cyan of a pressed chip, small, so "something is picked here" reads from the toolbar */
.fbar-n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 4px; border-radius: 20px; background: var(--accent); color: var(--accent-ink);
  font: 700 14px/1 var(--text); font-variant-numeric: tabular-nums; }
.fbar-n:empty { display: none; }
.fbtn .fbar-n { margin-left: -2px; }
@media (max-width: 759px) {
  .fbar-w { display: none; }
  .ct-fbtn .ico:last-child { display: none; }      /* on a phone it opens the sheet: no chevron to turn */
}

/* ---------------------------------------------------------------- the popover under a trigger */
.fpop { position: absolute; top: calc(100% + 8px); left: 0; z-index: 13; width: min(420px, 100%); max-height: calc(100vh - var(--chrome-h) - 176px); max-height: calc(100dvh - var(--chrome-h) - 176px);
  overflow: auto; overscroll-behavior: contain; padding: 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; pointer-events: none; transform: scale(.96);
  transition: opacity var(--t-press) var(--curve), transform var(--t-press) var(--curve), visibility 0s linear var(--t-press); }
.fpop.wide { width: min(640px, 100%); }
.fpop.on { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition: opacity var(--t-press) var(--curve), transform var(--t-press) var(--curve), visibility 0s; }
.fpop:focus { outline: none; }

/* ---------------------------------------------------------------- a group: title, any / all, hint, chips, foot */
.fg + .fg { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.fg-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; min-height: 36px; }
.fg-t { font: 400 18px/1.15 var(--display); letter-spacing: .01em; }
.fg-hint { margin: 4px 0 12px; color: var(--muted); font: 600 14px/1.4 var(--text); max-width: 60ch; min-height: 2.8em; }   /* two lines kept, so a chip's longer help never moves the chips */
.fg-hint.on { color: var(--ink-2); }              /* the chip under the pointer or the focus says what it means here */
/* "Any of | All of" waits for two picks: drawn quiet, never a second loud control beside the chips */
.fg-op button:disabled { opacity: .5; cursor: default; }
.fg-op button:disabled:hover { background: transparent; color: var(--ink-2); }
.fg-op button[aria-pressed="true"]:disabled:hover { background: var(--accent); color: var(--accent-ink); filter: none; }
/* the effects in five small families, each named in the caption type */
.fg-fams { display: grid; gap: 12px; }
.fg-fam { display: grid; gap: 8px; }
.fg-fam-t { color: var(--muted); font: 600 14px/1.4 var(--text); }
.fg-head + .seg { margin-top: 8px; }
.fg-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; }
.fg-foot .fg-clear { margin-left: auto; height: 36px; padding: 0 12px; font-size: 16px; }
.fg-clear, .fq-clear { position: relative; }
.fg-clear::after, .fq-clear::after { content: ""; position: absolute; inset: -4px 0; }   /* a 44px hit area */

/* the talents switch: a sunken track, its knob slides right and the track fills cyan when on */
.switch { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px 0 4px; border: 0; border-radius: 20px; background: transparent;
  color: var(--ink-2); font: 600 14px/1 var(--text); cursor: pointer; transition: background var(--t-state) var(--curve), color var(--t-state) var(--curve); }
.switch::after { content: ""; position: absolute; inset: -4px 0; }
.switch:hover { background: rgba(255, 255, 255, .1); color: var(--ink); }
.switch:active { background: rgba(0, 0, 0, .35); }
.switch:focus-visible { outline: none; box-shadow: var(--ring); }
.sw-track { position: relative; flex: none; width: 36px; height: 20px; border-radius: 20px; background: var(--socket); box-shadow: var(--sunken), inset 0 0 0 1px var(--edge);
  transition: background var(--t-state) var(--curve); }
.sw-knob { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--ink-2); transition: transform var(--t-state) var(--curve), background var(--t-state) var(--curve); }
.switch[aria-checked="true"] .sw-track { background: var(--accent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); }
.switch[aria-checked="true"] .sw-knob { transform: translateX(16px); background: var(--accent-ink); }

/* ---------------------------------------------------------------- number ranges (two thumbs on one rail) */
.rgs { display: grid; gap: 16px; }
.rg-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.rg-l { color: var(--ink); font: 600 14px/1.4 var(--text); }
.rg-per { margin-left: 8px; color: var(--muted); }
.rg-out { color: var(--muted); font: 600 14px/1.4 var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rg-out.on { color: var(--ink); }
.rg-track { position: relative; height: 28px; cursor: pointer; }   /* a press on the rail brings the nearer thumb */
.rg-rail { position: absolute; left: 12px; right: 12px; top: 11px; height: 6px; border-radius: 4px; background: var(--socket); box-shadow: var(--sunken); }
.rg-fill { position: absolute; top: 0; bottom: 0; border-radius: 4px; background: var(--edge); }
.rg-fill.on { background: var(--accent); }       /* cyan only while the range filters */
.rg-in { position: absolute; inset: 0; width: 100%; height: 28px; margin: 0; padding: 0; background: none; -webkit-appearance: none; appearance: none; pointer-events: none; }
.rg-in:focus { outline: none; }
.rg-in::-webkit-slider-runnable-track { height: 28px; background: none; border: 0; }
.rg-in::-moz-range-track { height: 28px; background: none; border: 0; }
.rg-in::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; pointer-events: auto; width: 24px; height: 24px; margin-top: 2px; border: 0; border-radius: 50%;
  background: var(--ink); box-shadow: 0 2px 0 rgba(0, 0, 0, .35); cursor: grab; transition: background var(--t-state) var(--curve); }
.rg-in::-moz-range-thumb { pointer-events: auto; width: 24px; height: 24px; border: 0; border-radius: 50%; background: var(--ink); box-shadow: 0 2px 0 rgba(0, 0, 0, .35); cursor: grab; }
.rg-in:hover::-webkit-slider-thumb { box-shadow: 0 2px 0 rgba(0, 0, 0, .35), var(--ring); }
.rg-in:hover::-moz-range-thumb { box-shadow: 0 2px 0 rgba(0, 0, 0, .35), var(--ring); }
.rg-in:active::-webkit-slider-thumb { cursor: grabbing; background: var(--ink-2); }
.rg-in:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--night), 0 0 0 4px var(--accent); }
.rg-in:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 2px var(--night), 0 0 0 4px var(--accent); }
/* a finger gets a 44px row to grab (the rail stays 6px, centred) */
@media (pointer: coarse) {
  .rg-track, .rg-in, .rg-in::-webkit-slider-runnable-track { height: 44px; }
  .rg-in::-moz-range-track { height: 44px; }
  .rg-rail { top: 19px; }
  .rg-in::-webkit-slider-thumb { margin-top: 10px; }
  .rgs { gap: 8px; }
}

/* ---------------------------------------------------------------- the line of active filters */
.tb-q { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; min-height: 36px; flex: 1 1 320px; min-width: 0; }
.fq { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; min-width: 0; }
.fq-grp { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; }
.fq-g { margin-right: 4px; color: var(--muted); font: 600 14px/1.4 var(--text); }
.fq-or { padding: 0 4px; color: var(--muted); font: 600 14px/1 var(--text); }
.qchip { position: relative; display: inline-flex; align-items: center; gap: 4px; max-width: 100%; height: 28px; padding: 0 4px 0 8px; border: 0; border-radius: 20px;
  background: var(--socket); box-shadow: var(--sunken); color: var(--ink); font: 600 14px/1 var(--text); white-space: nowrap; cursor: pointer;
  transition: background var(--t-state) var(--curve), box-shadow var(--t-state) var(--curve); }
.qchip::after { content: ""; position: absolute; inset: -8px -2px; }
.qchip > span { overflow: hidden; text-overflow: ellipsis; }
.qchip i { width: 16px; height: 16px; flex: none; background-size: contain; background-repeat: no-repeat; background-position: center; }
.qchip .ico { flex: none; color: var(--muted); transition: color var(--t-state) var(--curve); }
.qchip:hover { background: var(--panel-hi); box-shadow: var(--sunken), var(--ring); }
.qchip:hover .ico { color: var(--ink); }
.qchip:active { background: var(--socket); }
.qchip:focus-visible { outline: none; box-shadow: var(--sunken), var(--ring); }
/* "and" / "or" between the picks of a group: a small outlined control (the copy button's outline), so it reads as a switch and
   never as a word that only explains itself; pressed, the group reads the other way */
.fq-op { position: relative; height: 28px; min-width: 36px; padding: 0 8px; border: 1px solid var(--edge); border-radius: 20px; background: transparent; color: var(--ink-2);
  font: 600 14px/1 var(--text); cursor: pointer; transition: background var(--t-state) var(--curve), color var(--t-state) var(--curve), border-color var(--t-state) var(--curve); }
.fq-op::after { content: ""; position: absolute; inset: -8px -4px; }
.fq-op:hover { background: var(--panel-hi); border-color: var(--muted); color: var(--ink); }
.fq-op:active { background: var(--socket); }
.fq-op:focus-visible { outline: none; box-shadow: var(--ring); }
.fq:focus { outline: none; }
.fq-clear { height: 36px; padding: 0 12px; font-size: 16px; }

/* ---------------------------------------------------------------- why a card matched (under its tile) */
.why { margin: 0; color: var(--ink-2); font: 600 14px/1.4 var(--text); text-wrap: pretty; }
.cap .why + .why, .cap .why + .snip { margin-top: 4px; }
.why-g { color: var(--muted); }
.why b { color: var(--ink); font-weight: 700; }
.why-e { color: var(--ink-2); }
.why-tl { display: inline-block; width: 16px; height: 16px; margin-right: 4px; vertical-align: -3px; background-size: contain; background-repeat: no-repeat; background-position: center; }
.why-more { color: var(--muted); }
/* the Card tier list: the line under its toolbar, and the reasons in a card's preview */
#ct-filters.open.settled > .collapse-in { overflow: visible; }
.ct-pop-why { display: grid; gap: 4px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }

/* ---------------------------------------------------------------- the phone's bottom sheet */
dialog.fsheet { width: 100%; max-width: 100%; margin: auto 0 0; max-height: 85vh; max-height: 85dvh; border-radius: 12px 12px 0 0; border-bottom: 0;
  grid-template-rows: auto minmax(0, 1fr) auto; }
dialog.fsheet[open] { display: grid; }
dialog.fsheet .close { top: 8px; right: 8px; }
.fs-head { padding: 16px 64px 8px 16px; }
.fs-head h2 { font-size: 22px; }
.fs-body { min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 0 16px 16px; }
.fs-sec { border-top: 1px solid var(--line); }
.fs-sec:first-child { border-top: 0; }
.fs-h { display: flex; align-items: center; gap: 8px; width: 100%; height: 44px; padding: 0 8px; margin: 4px -8px; width: calc(100% + 16px); border: 0; border-radius: 8px; background: transparent;
  color: var(--ink); font: 400 18px/1 var(--display); letter-spacing: .01em; text-align: start; cursor: pointer; transition: background var(--t-state) var(--curve); }
.fs-h:hover { background: rgba(255, 255, 255, .1); }
.fs-h:active { background: rgba(0, 0, 0, .35); }
.fs-h:focus-visible { outline: none; box-shadow: var(--ring); }
.fs-h .ico { margin-left: auto; color: var(--muted); transition: transform var(--t-move) var(--curve); }
.fs-h[aria-expanded="true"] .ico { transform: rotate(180deg); }
.fs-in { padding: 4px 0 16px; }   /* the chips' 44px hit areas stay inside the clip */
/* the section's own title says the group: a lone group in it keeps only its any / all switch */
.fs-in .fg:only-child > .fg-head:not(:has(.seg)) { display: none; }
.fs-in .fg:only-child > .fg-head .fg-t { display: none; }
.fs-foot { display: flex; align-items: center; gap: 12px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--panel); }
.fs-show { flex: 1 1 auto; }
dialog.fsheet.on { transform: none; }