/* Queryboard (/queryboard). Shared tokens and .page-card/.field-label/.pill-toggle-track come from
   base.html and cs_components.css. Base rules run in page order; the 1040px and 680px blocks at the
   end hold every responsive override. Under 680px the results open first and the builder becomes a
   drawer (.qb-builder.is-open). */

/* ── Page shell and shared labels ─────────────────────────────────────────── */
.qb-shell {
  max-width: 1640px;
  margin: 0 auto;
  padding: 26px clamp(18px, 3vw, 48px) 60px;
  color: var(--cs-chalk);
  font-family: var(--f-mono, monospace);
}
.qb-eyebrow,
.qb-source {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--cs-faint);
}
.qb-kicker,
.qb-step,
.qb-section-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--cs-dim);
}
.qb-eyebrow { display: flex; align-items: center; gap: 9px; }
.qb-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cs-orange);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--cs-orange) 15%, transparent);
}

/* ── Header ───────────────────────────────────────────────────────────────── */
.qb-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--cs-line-soft);
}
.qb-head-main { min-width: 0; }
.qb-head .qb-eyebrow { color: var(--cs-orange); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; }
.qb-head h1 {
  margin: 8px 0 6px;
  font: 700 clamp(32px, 3vw, 42px)/1 var(--f-display, sans-serif);
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--cs-chalk);
}
.qb-head p { max-width: 560px; margin: 0; color: var(--cs-dim); font: 13px/1.55 var(--f-body, sans-serif); }

.qb-stats { display: flex; margin: 0; }
.qb-stats > div { padding: 0 20px; border-left: 1px solid var(--cs-line-soft); }
.qb-stats > div:last-child { padding-right: 0; }
.qb-stats dt { color: var(--cs-faint); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.qb-stats dd { margin: 5px 0 0; color: var(--cs-chalk); font: 700 24px/1 var(--f-display, sans-serif); white-space: nowrap; }
.qb-stats small { color: var(--cs-dim); font: 11px var(--f-mono, monospace); }

/* ── Preset queries and the glossary button ───────────────────────────────── */
.qb-presets { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 16px 0 18px; }
.qb-presets .qb-kicker { margin-right: 4px; text-transform: uppercase; }
.qb-presets button {
  border: 1px solid var(--cs-line-soft);
  border-radius: 999px;
  background: transparent;
  color: var(--cs-dim);
  padding: 7px 14px;
  font: 11px var(--f-mono, monospace);
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.qb-presets button:hover,
.qb-presets button:focus-visible { border-color: var(--cs-orange); color: var(--cs-chalk); }
.qb-presets .qb-glossary-trigger {
  margin-left: auto;
  border-color: color-mix(in srgb, var(--cs-orange) 45%, var(--cs-line-soft));
  color: var(--cs-orange);
}
.qb-glossary-trigger i { margin-right: 6px; }

/* ── Workspace: builder and results panels ────────────────────────────────── */
.qb-workspace {
  display: grid;
  grid-template-columns: minmax(325px, 390px) minmax(0, 1fr);
  gap: 15px;
  align-items: start;
}
.qb-builder,
.qb-results {
  padding: 0;
  overflow: hidden;
  background: var(--cs-board);
  border: 1px solid var(--cs-line-soft);
  border-radius: 9px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .11);
}
.qb-panel-heading,
.qb-results-head { padding: 22px 23px 20px; border-bottom: 1px solid var(--cs-line-soft); }
.qb-panel-heading h2,
.qb-results-head h2 { font-size: 20px; letter-spacing: -.035em; margin: 8px 0 4px; }
.qb-panel-heading p,
.qb-results-head p { margin: 0; color: var(--cs-dim); font-size: 11px; line-height: 1.5; }

/* Mobile-only controls; shown in the 680px block. */
.qb-edit-builder,
.qb-display-toggle,
.qb-close-builder,
.qb-mobile-presets { display: none; }

/* ── Builder: player pool fields ──────────────────────────────────────────── */
.qb-section { padding: 19px 22px; border-bottom: 1px solid var(--cs-line-soft); }
.qb-section-title { display: flex; justify-content: space-between; margin-bottom: 14px; }
.qb-section-title i { color: var(--cs-faint); font-size: 11px; }
.qb-section-title em { font-style: normal; color: var(--cs-faint); margin-left: 5px; }
.qb-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.qb-spaced { margin-top: 12px; }
.qb-shell .field-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--cs-dim);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .09em;
  font-weight: 700;
}
.qb-input {
  width: 100%;
  min-width: 0;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--cs-line-soft);
  border-radius: 4px;
  background: var(--cs-ink);
  color: var(--cs-chalk);
  font: 12px var(--f-mono, monospace);
  outline: none;
}
.qb-input:focus { border-color: var(--cs-orange); box-shadow: 0 0 0 2px color-mix(in srgb, var(--cs-orange) 12%, transparent); }
.qb-input option { background: var(--cs-board); color: var(--cs-chalk); }
.qb-age-field { margin-top: 12px; }
.qb-age-field span { color: var(--cs-faint); font-weight: 400; text-transform: none; letter-spacing: 0; }
.qb-age-field input { max-width: 160px; }

/* ── Builder: stat rules ──────────────────────────────────────────────────── */
.qb-rule-note,
.qb-hint { font-size: 11px; line-height: 1.6; color: var(--cs-dim); margin: 0 0 12px; }
.qb-hint { margin: 12px 0 0; }
.qb-rules { display: flex; flex-direction: column; gap: 9px; }
.qb-rule {
  border: 1px solid var(--cs-line-soft);
  border-radius: 5px;
  padding: 10px;
  background: color-mix(in srgb, var(--cs-ink) 62%, var(--cs-board));
}
.qb-rule-top { display: flex; align-items: center; gap: 7px; margin-bottom: 9px; }
.qb-rule-num { color: var(--cs-orange); font-size: 10px; font-weight: 800; flex: none; }
.qb-rule-metric-picker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex: 1;
  min-width: 0;
  min-height: 31px;
  border: 1px solid var(--cs-line-soft);
  border-radius: 4px;
  background: var(--cs-ink);
  color: var(--cs-chalk);
  padding: 5px 8px;
  text-align: left;
  font: 700 11px var(--f-mono, monospace);
  cursor: pointer;
}
.qb-rule-metric-picker:hover { border-color: var(--cs-orange); }
.qb-rule-metric-picker span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qb-rule-metric-picker i { flex: none; color: var(--cs-orange); font-size: 10px; }
.qb-rule-remove { background: none; border: 0; color: var(--cs-faint); cursor: pointer; padding: 4px; }
.qb-rule-remove:hover { color: var(--cs-orange); }
.qb-rule-def {
  margin: -2px 0 9px 24px;
  color: var(--cs-faint);
  font: 11px/1.4 var(--f-body, sans-serif);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.qb-rule-bottom { display: grid; grid-template-columns: minmax(0, 1.3fr) 62px minmax(0, .7fr); gap: 6px; }
.qb-add {
  width: 100%;
  height: 34px;
  margin-top: 10px;
  border: 1px dashed color-mix(in srgb, var(--cs-orange) 40%, var(--cs-line-soft));
  border-radius: 4px;
  background: transparent;
  color: var(--cs-orange);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.qb-add:hover { background: color-mix(in srgb, var(--cs-orange) 8%, transparent); }
.qb-add:disabled { opacity: .4; cursor: not-allowed; }
.qb-add i { margin-right: 7px; }

/* ── Builder: rate toggle, footer and errors ──────────────────────────────── */
.qb-rate { display: flex; width: 100%; padding: 3px; gap: 2px; white-space: nowrap; }
.qb-rate button { flex: 1; min-width: 0; font-size: 10px; padding: 8px 1px; cursor: pointer; }
.qb-builder-footer { display: flex; align-items: center; gap: 12px; padding: 19px 22px; }
.qb-primary {
  flex: 1;
  background: var(--cs-orange);
  color: var(--cs-ink);
  border: 0;
  border-radius: 4px;
  padding: 12px 15px;
  text-align: left;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.qb-primary i { float: right; }
.qb-primary:hover { filter: brightness(1.08); }
.qb-primary:disabled { opacity: .6; }
/* Builder edits not yet run (see updateDirty in queryboard.js). */
.qb-primary.is-dirty { box-shadow: 0 0 0 3px color-mix(in srgb, var(--cs-orange) 30%, transparent); }
.qb-reset { border: 0; background: transparent; color: var(--cs-faint); font-size: 11px; cursor: pointer; }
.qb-reset:hover { color: var(--cs-chalk); }
.qb-builder-error {
  margin: 14px 22px 0;
  padding: 10px 12px;
  border: 1px solid var(--cs-orange);
  border-radius: 4px;
  color: var(--cs-chalk);
  font-size: 11px;
  line-height: 1.4;
}
.qb-builder-error[hidden],
.qb-builder-backdrop[hidden] { display: none; }

/* ── Results header: summary, active filters, actions ─────────────────────── */
.qb-results-head { display: flex; justify-content: space-between; align-items: center; gap: 15px; min-height: 104px; }
.qb-results-head p { min-height: 17px; }
.qb-results-actions { display: flex; align-items: center; gap: 7px; }
.qb-share {
  border: 1px solid var(--cs-line-soft);
  background: transparent;
  color: var(--cs-dim);
  border-radius: 4px;
  padding: 9px 11px;
  white-space: nowrap;
  cursor: pointer;
  font-size: 11px;
}
.qb-share:hover { color: var(--cs-orange); border-color: var(--cs-orange); }
.qb-share:disabled { opacity: .45; cursor: not-allowed; }
.qb-share i { margin-right: 6px; }

.qb-context { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.qb-context > span { border: 1px solid var(--cs-line-soft); border-radius: 3px; padding: 4px 6px; color: var(--cs-dim); font-size: 10px; }
.qb-context-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  border: 1px solid color-mix(in srgb, var(--cs-orange) 42%, var(--cs-line-soft));
  border-radius: 3px;
  background: color-mix(in srgb, var(--cs-orange) 5%, var(--cs-board));
  color: var(--cs-orange);
  padding: 3px 7px;
  font: 10px var(--f-mono, monospace);
  cursor: pointer;
}
.qb-context-chip:hover { background: color-mix(in srgb, var(--cs-orange) 14%, var(--cs-board)); }
.qb-context-chip i { font-size: 9px; }

/* ── Results toolbar: stat search, sort, columns ──────────────────────────── */
.qb-results-controls { padding: 16px 22px; border-bottom: 1px solid var(--cs-line-soft); }
.qb-toolbar { display: flex; gap: 10px; }
.qb-searchbar {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--cs-line-soft);
  border-radius: 8px;
  background: var(--cs-ink);
  color: var(--cs-faint);
  font: 13px var(--f-mono, monospace);
  text-align: left;
  cursor: text;
  transition: border-color .15s, box-shadow .15s;
}
.qb-searchbar:hover,
.qb-searchbar:focus-visible {
  border-color: var(--cs-orange);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cs-orange) 14%, transparent);
  outline: none;
}
.qb-searchbar:disabled { opacity: .45; cursor: not-allowed; }
.qb-searchbar i { color: var(--cs-orange); }
.qb-searchbar span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qb-searchbar kbd { border: 1px solid var(--cs-line-soft); border-radius: 4px; padding: 1px 7px; color: var(--cs-dim); font: 11px var(--f-mono, monospace); }

.qb-sort-control { display: flex; gap: 6px; flex: none; }
.qb-sort-picker {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 44px;
  max-width: 240px;
  padding: 0 13px;
  border: 1px solid var(--cs-line-soft);
  border-radius: 8px;
  background: var(--cs-ink);
  color: var(--cs-chalk);
  font: 12px var(--f-mono, monospace);
  cursor: pointer;
}
.qb-sort-picker small { color: var(--cs-faint); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.qb-sort-picker span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qb-sort-picker i { color: var(--cs-faint); font-size: 10px; }
.qb-direction {
  width: 44px;
  height: 44px;
  border: 1px solid var(--cs-line-soft);
  border-radius: 8px;
  background: var(--cs-ink);
  color: var(--cs-dim);
  cursor: pointer;
}
.qb-sort-picker:hover,
.qb-direction:hover { border-color: var(--cs-orange); color: var(--cs-orange); }

.qb-columns-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.qb-columns-row .qb-kicker { flex: none; text-transform: uppercase; }
.qb-columns { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.qb-columns-row .qb-columns { flex: 1; min-width: 0; margin-top: 0; }
.qb-column-chip {
  border: 1px solid var(--cs-line-soft);
  border-radius: 3px;
  background: var(--cs-ink);
  padding: 5px 7px;
  color: var(--cs-dim);
  font-size: 11px;
  cursor: pointer;
}
.qb-column-chip:hover { border-color: var(--cs-orange); color: var(--cs-orange); }
.qb-column-chip i { margin-left: 7px; font-size: 9px; }

/* ── Sort-stat distribution (pool in grey, matching seasons in orange) ────── */
.qb-distribution { position: relative; padding: 14px 22px 10px; border-bottom: 1px solid var(--cs-line-soft); }
.qb-distribution[hidden] { display: none; }
.qb-dist-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
  color: var(--cs-dim);
  font-size: 11px;
}
.qb-dist-head b { color: var(--cs-chalk); }
.qb-dist-legend { display: inline-flex; align-items: center; gap: 6px; color: var(--cs-faint); }
.qb-dist-legend i { width: 9px; height: 9px; border-radius: 2px; margin-left: 8px; }
.qb-key-match { background: var(--cs-orange); }
.qb-key-pool { background: color-mix(in srgb, var(--cs-chalk) 18%, transparent); }
.qb-dist-plot { display: block; width: 100%; height: 58px; overflow: visible; }
.qb-dist-hit { fill: transparent; }
.qb-dist-pool { fill: color-mix(in srgb, var(--cs-chalk) 18%, transparent); }
.qb-dist-match { fill: var(--cs-orange); }
.qb-dist-bin:hover .qb-dist-pool { fill: color-mix(in srgb, var(--cs-chalk) 32%, transparent); }
.qb-dist-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  border-top: 1px solid var(--cs-line-soft);
  padding-top: 4px;
  color: var(--cs-faint);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}
.qb-dist-tip {
  position: absolute;
  top: 6px;
  transform: translateX(-50%);
  padding: 5px 8px;
  border: 1px solid var(--cs-line-soft);
  border-radius: 4px;
  background: var(--cs-board-2);
  color: var(--cs-chalk);
  font-size: 11px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 4;
}
.qb-dist-tip[hidden] { display: none; }

/* ── Messages and the no-results recovery card ────────────────────────────── */
.qb-message { margin: 16px 22px; padding: 14px; border: 1px solid var(--cs-line-soft); border-radius: 4px; color: var(--cs-dim); font-size: 12px; }
.qb-recovery {
  margin: 16px 22px;
  padding: 17px;
  border: 1px solid color-mix(in srgb, var(--cs-orange) 40%, var(--cs-line-soft));
  border-radius: 5px;
  background: color-mix(in srgb, var(--cs-orange) 5%, var(--cs-board));
  font-size: 12px;
}
.qb-recovery[hidden] { display: none; }
.qb-recovery strong { color: var(--cs-chalk); font-size: 14px; }
.qb-recovery p { margin: 7px 0 12px; color: var(--cs-dim); }
.qb-recovery > div { display: flex; flex-wrap: wrap; gap: 7px; }
.qb-recovery button {
  border: 1px solid var(--cs-orange);
  border-radius: 4px;
  background: transparent;
  color: var(--cs-orange);
  padding: 8px 10px;
  font: 11px var(--f-mono, monospace);
  cursor: pointer;
}
.qb-recovery button:hover { background: color-mix(in srgb, var(--cs-orange) 12%, var(--cs-board)); }

/* ── Results table ────────────────────────────────────────────────────────── */
.qb-table-hint { display: none; padding: 9px 14px; color: var(--cs-faint); font-size: 9px; letter-spacing: .1em; text-align: right; }
.qb-table-scroll { overflow: auto; max-height: 705px; min-height: 280px; }
.qb-table { border-collapse: collapse; min-width: 100%; width: max-content; font-size: 12px; }
.qb-table th,
.qb-table td {
  padding: 12px 13px;
  border-bottom: 1px solid color-mix(in srgb, var(--cs-line-soft) 70%, transparent);
  white-space: nowrap;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.qb-table th {
  position: sticky;
  top: 0;
  background: var(--cs-board-2);
  color: var(--cs-faint);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  z-index: 2;
  cursor: pointer;
}
.qb-table th:hover { color: var(--cs-orange); }
/* Headers with a glossary definition (shown in the title tooltip). */
.qb-table th.qb-defined { text-decoration: underline dotted color-mix(in srgb, var(--cs-faint) 70%, transparent); text-underline-offset: 4px; }
/* Player column stays put while the stats scroll sideways. */
.qb-table th:first-child,
.qb-table td:first-child { text-align: left; position: sticky; left: 0; z-index: 1; background: var(--cs-board); }
.qb-table th:first-child { z-index: 3; background: var(--cs-board-2); }
.qb-table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--cs-board-2) 35%, var(--cs-board)); }
/* Higher specificity than the hover rule below, so the sticky Player cell on even rows keeps its stripe on hover. */
.qb-table tbody tr:nth-child(even) td:first-child { background: color-mix(in srgb, var(--cs-board-2) 35%, var(--cs-board)); }
.qb-table tbody tr:hover td { background: var(--cs-board-2); }
.qb-table .qb-player { font-weight: 800; color: var(--cs-chalk); }
.qb-table .qb-player strong { font-weight: 800; }
.qb-table .qb-season { color: var(--cs-faint); }
.qb-table .qb-number { color: var(--cs-chalk); }
.qb-table .qb-active-sort { color: var(--cs-orange); }
/* Season-percentile tint; --qb-tint is set per cell. An inset shadow survives the zebra/hover backgrounds. */
.qb-table td.qb-number[style] { box-shadow: inset 0 0 0 999px color-mix(in srgb, var(--cs-orange) var(--qb-tint), transparent); }

.qb-player-link { display: inline-flex; align-items: center; gap: 7px; color: var(--cs-chalk); text-decoration: none; }
.qb-player-link i { color: var(--cs-orange); font-size: 9px; opacity: .65; }
.qb-player-link:hover,
.qb-player-link:focus-visible { color: var(--cs-orange); text-decoration: underline; }
.qb-player-link:hover i,
.qb-player-link:focus-visible i { opacity: 1; }
.qb-row-percentiles { display: flex; gap: 3px; flex-wrap: wrap; margin-top: 5px; }
.qb-row-percentiles:empty { display: none; }
.qb-percentile-badge {
  display: inline-block;
  border: 1px solid color-mix(in srgb, var(--cs-orange) 30%, var(--cs-line-soft));
  border-radius: 3px;
  padding: 2px 4px;
  color: var(--cs-orange);
  font-size: 9px;
  font-weight: 700;
  line-height: 1.25;
}
.qb-percentile-more { color: var(--cs-faint); font-size: 9px; }

/* ── Results footer: range, shade key, paging ─────────────────────────────── */
.qb-results-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 13px 20px;
  color: var(--cs-faint);
  font-size: 10px;
}
.qb-results-footer > div { display: flex; align-items: center; gap: 12px; }
.qb-results-footer button {
  border: 1px solid var(--cs-line-soft);
  border-radius: 4px;
  background: var(--cs-ink);
  color: var(--cs-dim);
  width: 28px;
  height: 26px;
  cursor: pointer;
}
.qb-results-footer button:disabled { opacity: .35; cursor: not-allowed; }
.qb-footer-left { display: flex; align-items: center; gap: 18px; }
.qb-shade-key { display: inline-flex; align-items: center; gap: 7px; flex: none; color: var(--cs-faint); font-size: 10px; cursor: help; }
.qb-shade-key i {
  width: 56px;
  height: 8px;
  border-radius: 2px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--cs-orange) 4%, transparent), color-mix(in srgb, var(--cs-orange) 40%, transparent));
}
.qb-source { margin-top: 19px; text-align: right; font-size: 9px; }

/* Phone result cards and "load more"; shown in the 680px block. */
.qb-mobile-results { display: none; }
.qb-mobile-more { display: none; }
.qb-mobile-more[hidden],
.qb-mobile-more button[hidden] { display: none; }

/* ── Stat picker and glossary dialog ──────────────────────────────────────── */
.qb-metric-picker {
  width: min(520px, calc(100vw - 24px));
  max-height: min(670px, calc(100dvh - 32px));
  margin: auto;
  padding: 0;
  border: 1px solid var(--cs-line-soft);
  border-radius: 9px;
  background: var(--cs-board);
  color: var(--cs-chalk);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .55);
  font-family: var(--f-mono, monospace);
}
.qb-metric-picker.is-glossary { width: min(680px, calc(100vw - 24px)); }
.qb-metric-picker::backdrop { background: rgba(3, 9, 16, .75); backdrop-filter: blur(4px); }
.qb-picker-heading { display: flex; align-items: start; justify-content: space-between; padding: 20px 22px 13px; }
.qb-picker-heading h2 { margin: 6px 0 0; font-size: 19px; }
.qb-picker-heading button {
  border: 1px solid var(--cs-line-soft);
  border-radius: 4px;
  background: var(--cs-ink);
  color: var(--cs-dim);
  width: 29px;
  height: 29px;
  cursor: pointer;
}
.qb-picker-search-wrap {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 22px;
  border: 1px solid var(--cs-orange);
  border-radius: 5px;
  background: var(--cs-ink);
  padding: 0 12px;
  color: var(--cs-orange);
}
.qb-picker-search-wrap input {
  min-width: 0;
  width: 100%;
  height: 42px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--cs-chalk);
  font: 13px var(--f-mono, monospace);
}
.qb-picker-search-wrap input::placeholder { color: var(--cs-faint); }
.qb-picker-count { padding: 13px 22px 8px; color: var(--cs-dim); font-size: 11px; }
.qb-picker-list { overflow: auto; max-height: 420px; padding: 0 14px 18px; }
.qb-picker-group h3 { margin: 15px 8px 6px; color: var(--cs-orange); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.qb-picker-option {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  gap: 4px;
  width: 100%;
  padding: 11px 9px;
  border: 0;
  border-bottom: 1px solid var(--cs-line-soft);
  background: transparent;
  color: var(--cs-chalk);
  text-align: left;
  font: 12px var(--f-mono, monospace);
  cursor: pointer;
}
.qb-picker-option:hover,
.qb-picker-option:focus { background: var(--cs-board-2); outline: none; }
.qb-option-name { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.qb-option-name small { color: var(--cs-faint); font-size: 10px; white-space: nowrap; }
.qb-option-def {
  color: var(--cs-dim);
  font: 11px/1.45 var(--f-body, sans-serif);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.qb-picker-empty { padding: 25px 10px; color: var(--cs-dim); font-size: 12px; }
.qb-glossary-entry { padding: 12px 9px; border-bottom: 1px solid var(--cs-line-soft); font-size: 12px; }
.qb-glossary-entry p { margin: 6px 0 0; color: var(--cs-dim); font: 12px/1.55 var(--f-body, sans-serif); }
.qb-glossary-entry p.qb-undefined { color: var(--cs-faint); font-style: italic; }
.qb-glossary-entry a { display: inline-block; margin-top: 6px; color: var(--cs-orange); font-size: 11px; text-decoration: none; }
.qb-glossary-entry a:hover { text-decoration: underline; }
.qb-glossary-entry a i { font-size: 9px; margin-left: 3px; }
.qb-draft {
  display: inline-block;
  margin: 6px 10px 0 0;
  border: 1px solid var(--cs-line-soft);
  border-radius: 3px;
  padding: 1px 5px;
  color: var(--cs-faint);
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ── Tablet: builder sits above the results in two columns ────────────────── */
@media (max-width: 1040px) {
  .qb-workspace { grid-template-columns: 1fr; }
  .qb-builder { display: grid; grid-template-columns: 1fr 1fr; }
  .qb-panel-heading,
  .qb-builder-footer { grid-column: 1 / -1; }
  .qb-section { border-right: 1px solid var(--cs-line-soft); }
}

/* ── Phone: results first, builder as a drawer, cards instead of the table ── */
@media (max-width: 680px) {
  body.qb-builder-open { overflow: hidden; }
  .qb-shell { padding: 26px 13px 35px; }

  /* Header and presets */
  .qb-head { flex-direction: column; align-items: flex-start; gap: 12px; padding-bottom: 14px; }
  .qb-head h1 { font-size: 30px; }
  .qb-head p { display: none; }
  .qb-stats > div { padding: 0 14px; }
  .qb-stats > div:first-child { padding-left: 0; border-left: 0; }
  .qb-stats dd { font-size: 18px; }
  .qb-stats .qb-stat-note { display: none; }
  .qb-presets { margin: 10px 0 0; }
  .qb-presets > [data-preset],
  .qb-presets .qb-kicker { display: none; }
  .qb-presets .qb-glossary-trigger { margin-left: 0; }

  .qb-workspace { display: block; margin-top: 12px; }
  .qb-results { width: 100%; }
  .qb-input { font-size: 13px; }

  /* Builder drawer */
  .qb-builder-backdrop { display: block; position: fixed; inset: 0; z-index: 1990; background: rgba(3, 9, 16, .78); backdrop-filter: blur(3px); }
  .qb-builder {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1991;
    width: 100%;
    max-height: 100dvh;
    overflow-y: auto;
    overflow-x: hidden;
    border-radius: 0;
    box-shadow: 0 -12px 55px rgba(0, 0, 0, .5);
    visibility: hidden;
    pointer-events: none;
    transform: translateY(100%);
    transition: transform .22s ease, visibility .22s;
  }
  .qb-builder.is-open { visibility: visible; pointer-events: auto; transform: translateY(0); }
  .qb-builder .qb-step { font-size: 0; }
  .qb-builder .qb-step::after { content: "QUERY BUILDER"; font-size: 11px; }
  .qb-panel-heading { position: sticky; top: 0; z-index: 3; background: var(--cs-board); padding: 17px 22px 14px; }
  .qb-panel-heading h2 { margin-top: 5px; }
  .qb-close-builder {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 18px;
    top: 16px;
    width: 32px;
    height: 32px;
    border: 1px solid var(--cs-line-soft);
    border-radius: 4px;
    background: var(--cs-ink);
    color: var(--cs-chalk);
    cursor: pointer;
  }
  .qb-mobile-presets { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 13px 22px; border-bottom: 1px solid var(--cs-line-soft); }
  .qb-mobile-presets .qb-kicker { width: 100%; margin-bottom: 2px; }
  .qb-mobile-presets button {
    border: 1px solid var(--cs-line-soft);
    border-radius: 4px;
    background: var(--cs-ink);
    color: var(--cs-dim);
    padding: 7px 8px;
    font: 11px var(--f-mono, monospace);
    cursor: pointer;
  }
  .qb-mobile-presets button:hover { border-color: var(--cs-orange); color: var(--cs-orange); }
  .qb-section { border-right: 0; padding: 17px 22px; }
  .qb-builder-footer {
    position: sticky;
    bottom: 0;
    z-index: 3;
    border-top: 1px solid var(--cs-line-soft);
    background: var(--cs-board);
    padding: 12px 22px max(12px, env(safe-area-inset-bottom));
  }
  .qb-builder-error { margin-bottom: 12px; }

  /* Results header and actions */
  .qb-results-head { display: block; align-items: start; min-height: 0; padding: 17px 16px 15px; }
  .qb-results-head h2 { font-size: 18px; }
  .qb-results .qb-step { font-size: 0; }
  .qb-results .qb-step::after { content: "RESULTS"; font-size: 11px; }
  .qb-results-actions { margin-top: 12px; }
  .qb-edit-builder {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 1;
    min-height: 39px;
    border: 1px solid var(--cs-orange);
    border-radius: 4px;
    background: color-mix(in srgb, var(--cs-orange) 12%, var(--cs-board));
    color: var(--cs-orange);
    font: 700 12px var(--f-mono, monospace);
    cursor: pointer;
  }
  .qb-display-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 39px;
    padding: 0 9px;
    border: 1px solid var(--cs-line-soft);
    border-radius: 4px;
    background: var(--cs-ink);
    color: var(--cs-dim);
    font: 700 11px var(--f-mono, monospace);
    cursor: pointer;
  }
  .qb-display-toggle[aria-expanded="true"] { border-color: var(--cs-orange); color: var(--cs-orange); }
  /* Icon-only share and export buttons */
  .qb-share { font-size: 0; min-width: 39px; min-height: 39px; }
  .qb-share i { font-size: 12px; margin: 0; }
  #qb-export { font-size: 0; }
  #qb-export i { font-size: 12px; }
  /* Active filters scroll sideways in one line */
  .qb-context {
    flex-wrap: nowrap;
    gap: 4px;
    margin-top: 9px;
    margin-right: -16px;
    padding: 0 16px 4px 0;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .qb-context::-webkit-scrollbar { display: none; }
  .qb-context > span,
  .qb-context-chip { flex: none; white-space: nowrap; }

  /* Toolbar sits behind the Display button */
  .qb-results-controls { display: none; }
  .qb-results-controls.is-open { display: block; }
  .qb-toolbar { flex-wrap: wrap; }
  .qb-searchbar { flex-basis: 100%; }
  .qb-searchbar kbd { display: none; }
  .qb-sort-control { flex: 1; }
  .qb-sort-picker { flex: 1; max-width: none; }
  .qb-columns-row { align-items: flex-start; flex-direction: column; gap: 6px; }
  .qb-distribution { padding: 12px 16px 8px; }

  /* Cards replace the table */
  .qb-table-scroll { display: none; }
  .qb-results-footer { display: none; }
  .qb-shade-key { display: none; }
  .qb-mobile-results { display: grid; gap: 8px; padding: 12px; background: color-mix(in srgb, var(--cs-ink) 35%, var(--cs-board)); }
  .qb-result-card { border: 1px solid var(--cs-line-soft); border-radius: 6px; background: var(--cs-board); padding: 13px; }
  .qb-card-top { display: flex; align-items: flex-start; gap: 9px; }
  .qb-card-rank { padding-top: 2px; color: var(--cs-orange); font-size: 11px; font-weight: 800; }
  .qb-card-identity { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
  .qb-card-identity strong { color: var(--cs-chalk); font-size: 13px; line-height: 1.2; }
  .qb-card-identity > span { color: var(--cs-dim); font-size: 11px; }
  .qb-card-identity .qb-player-link { max-width: 100%; font-size: 13px; }
  .qb-card-identity .qb-player-link strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .qb-card-feature { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; max-width: 105px; text-align: right; }
  .qb-card-feature small { color: var(--cs-dim); font-size: 10px; line-height: 1.15; }
  .qb-card-feature b { color: var(--cs-orange); font-size: 17px; line-height: 1.1; }
  .qb-card-percentiles { display: flex; flex-wrap: wrap; gap: 4px; margin: 10px 0 0 24px; }
  .qb-card-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin: 12px 0 0 24px; }
  .qb-card-stats > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 6px;
    border-top: 1px solid var(--cs-line-soft);
    padding-top: 7px;
  }
  .qb-card-stats span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--cs-dim); font-size: 10px; }
  .qb-card-stats b { flex: none; color: var(--cs-chalk); font-size: 12px; }
  .qb-card-more { margin: 9px 0 0 24px; color: var(--cs-orange); font-size: 11px; }
  .qb-card-more summary { cursor: pointer; }
  .qb-card-more .qb-card-stats { margin: 7px 0 0; }
  .qb-mobile-more {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    padding: 15px 16px 18px;
    color: var(--cs-dim);
    font-size: 11px;
  }
  .qb-mobile-more button {
    width: 100%;
    min-height: 41px;
    border: 1px solid var(--cs-orange);
    border-radius: 4px;
    background: color-mix(in srgb, var(--cs-orange) 10%, var(--cs-board));
    color: var(--cs-orange);
    font: 700 12px var(--f-mono, monospace);
    cursor: pointer;
  }
  .qb-mobile-more button:hover { background: color-mix(in srgb, var(--cs-orange) 18%, var(--cs-board)); }
  .qb-mobile-more button:disabled { opacity: .5; cursor: wait; }

  /* Dialog fits the phone */
  .qb-metric-picker { max-height: calc(100dvh - 18px); }
  .qb-picker-list { max-height: calc(100dvh - 185px); }
}

@media (max-width: 680px) and (prefers-reduced-motion: reduce) {
  .qb-builder { transition: none; }
}