/* Shared styles for the Pillar 1 receptor components, used by three pages:
   targets.html (per-target accordion), compound pages (per-substance
   fingerprint, D5) and compare.html (side-by-side, D6). Extracted from
   targets.html so all three render identically. All colours come from the
   theme variables in style.css / theme-overrides.css. */

/* ---- per-target accordion (targets.html) ---- */
.rc-badge { font-size: 0.72rem; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-soft); color: var(--text-soft); }
.rc-badge--accent { background: var(--accent-soft); border-color: transparent; color: var(--accent); }

.rc-controls { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0.5rem 0; padding: 10px 12px; background: var(--surface-soft); border-radius: var(--radius-sm); }
.rc-ctl-label { font-size: 0.74rem; color: var(--text-soft); }
.rc-ctl-sep { width: 1px; height: 18px; background: var(--border-strong); margin: 0 4px; }
.rc-chip { font: inherit; font-size: 0.76rem; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--text-soft); cursor: pointer; transition: background .12s, color .12s; }
.rc-chip:hover { background: var(--surface-muted); }
.rc-chip.is-active { background: var(--accent-soft); border-color: transparent; color: var(--accent); }

.rc-bandlabels, .rc-row__head { display: grid; grid-template-columns: 188px 1fr 96px 22px; gap: 10px; align-items: center; }
.rc-bandlabels { margin: 4px 0 2px; }
.rc-bands { display: grid; grid-template-columns: repeat(4, 1fr); font-size: 0.62rem; color: var(--text-muted); text-align: center; }
.rc-bands span { border-left: 1px dashed var(--border); }

.rc-row { border-top: 1px solid var(--border); }
.rc-rows .rc-row:last-child { border-bottom: 1px solid var(--border); }
.rc-row__head { width: 100%; background: transparent; border: 0; padding: 10px 2px; cursor: pointer; text-align: left; font: inherit; color: var(--text); }
.rc-row__head:hover { background: var(--surface-muted); }
.rc-info { min-width: 0; }
.rc-name { display: block; font-size: 0.92rem; font-weight: 500; }
.rc-sub { display: block; font-size: 0.72rem; color: var(--text-soft); margin-top: 1px; }
.rc-sel { font-size: 0.68rem; padding: 1px 8px; border-radius: 999px; white-space: nowrap; }
/* Selectivity pill now rides on the subline under the name (not inline with it),
   so keep it clear of the assay text that follows. */
.rc-sub .rc-sel { margin-right: 5px; vertical-align: 1px; }
.rc-track { position: relative; height: 22px; background: var(--surface-soft); border-radius: 999px; }
.rc-band { position: absolute; top: 0; height: 100%; width: 1px; background: var(--border); }

/* The potency fill (length = pKi). Agonist/activator = solid accent; antagonist/
   blocker = hollow accent outline; unspecified = neutral; functional (EC₅₀/IC₅₀)
   values render slightly dimmed. Classes (not inline styles) so all three views
   stay in sync. */
.rc-fill { height: 100%; border-radius: 999px; background: var(--accent); }
.rc-fill--block { background: transparent; border: 1.5px solid var(--accent); box-sizing: border-box; }
.rc-fill--other { background: var(--text-muted); }
.rc-fill--fn { opacity: 0.7; }

/* Bidirectional error bar (see uncertaintyMarkup in receptor-profile.js): a centred
   line spanning the pKi interval with caps that OVERSHOOT the track, so the weaker-
   end cap stays visible where it crosses the solid fill — the affinity may be weaker
   (left) or stronger (right). The point marker shows the estimate within it. */
.rc-err { position: absolute; top: -3px; height: calc(100% + 6px); z-index: 3; }
.rc-err__line { position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: var(--accent-strong); border-radius: 2px; transform: translateY(-50%); }
.rc-err__cap { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--accent-strong); border-radius: 2px; }
.rc-err__cap--lo { left: 0; }
.rc-err__cap--hi { right: 0; }
.rc-point { position: absolute; top: 50%; width: 8px; height: 8px; border-radius: 50%; background: var(--surface-elevated); border: 2px solid var(--accent-strong); transform: translate(-50%, -50%); z-index: 4; }
/* Potency value stacks over its Emax on two right-aligned lines so the compact
   accordion value column (96px) never overflows past the chevron for functional
   EC₅₀ rows that also carry an efficacy (Emax) reading. */
.rc-val { font-family: var(--font-mono, monospace); font-size: 0.74rem; color: var(--text-soft); display: flex; flex-direction: column; align-items: flex-end; gap: 1px; line-height: 1.3; }
.rc-val__main { white-space: nowrap; }
.rc-val__emax { font-size: 0.64rem; color: var(--text-muted); white-space: nowrap; }
.rc-chev { color: var(--text-muted); justify-self: center; }

.rc-drawer { margin: 0 0 12px 198px; padding: 12px 14px; background: var(--surface-soft); border-radius: var(--radius-sm); border-left: 2px solid var(--accent); }
.rc-drawer__label { font-size: 0.78rem; color: var(--text-soft); margin-bottom: 8px; }
.rc-fp { display: flex; flex-direction: column; gap: 5px; }
.rc-fp-row { display: grid; grid-template-columns: 72px 1fr 60px; gap: 8px; align-items: center; font-family: var(--font-mono, monospace); font-size: 0.74rem; }
.rc-fp-name { color: var(--text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-fp-track { height: 14px; background: var(--surface-muted); border-radius: 4px; }
.rc-fp-val { text-align: right; color: var(--text-soft); }
.rc-drawer__meta { font-size: 0.72rem; color: var(--text-muted); margin-top: 8px; }
.rc-drawer a, .rc-name a, .rc-noki-list a { color: var(--accent); }

.rc-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 0.72rem; color: var(--text-muted); margin-top: 12px; }
.rc-legend span { display: inline-flex; align-items: center; gap: 5px; }
.rc-swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; vertical-align: middle; }
.rc-swatch--fill { background: var(--accent); }
.rc-swatch--other { background: var(--text-muted); }
.rc-swatch--hollow { border: 1.5px solid var(--accent); }
.rc-swatch--fn { background: var(--accent-strong); opacity: 0.72; }
.rc-swatch--emax { height: 5px; margin-top: 3px; background: var(--accent-strong); border-radius: 999px; opacity: 0.78; }
.rc-swatch--err { width: 16px; height: 0; border-radius: 0; border-top: 2px solid var(--accent-strong); }

.rc-noki { margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--border-strong); }
.rc-noki-head { font-size: 0.82rem; font-weight: 600; color: var(--text-soft); }
.rc-noki-list { font-size: 0.82rem; color: var(--text-soft); line-height: 1.8; margin: 6px 0 0; }
.rc-muted { color: var(--text-muted); }
.rc-variant { display: inline-block; margin-left: 4px; padding: 0 5px; border-radius: 6px; background: var(--accent-soft, rgba(124,92,255,0.14)); color: var(--accent, #7c5cff); font-family: var(--font-sans, inherit); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.01em; vertical-align: middle; white-space: nowrap; }
.rc-empty { color: var(--text-soft); padding: 8px 0; }

/* ---- per-substance fingerprint (D5, compound pages + compare) ---- */
.rc-fpcard { margin-top: 6px; }
.rc-fpcard__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.rc-stat { background: var(--accent-soft); border-radius: var(--radius-sm); padding: 9px 12px; }
.rc-stat__l { display: block; font-size: 0.72rem; color: var(--accent); text-transform: uppercase; letter-spacing: 0.04em; }
.rc-stat__v { display: block; font-size: 1.1rem; font-weight: 600; color: var(--text); margin-top: 2px; }
.rc-fpbars { display: flex; flex-direction: column; gap: 14px; }
.rc-measure-group { border-top: 1px solid var(--border); padding-top: 12px; }
.rc-measure-group:first-child { border-top: 0; padding-top: 0; }
.rc-measure-group__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 7px; }
.rc-measure-group__head h4 { margin: 0; font-size: 0.82rem; font-weight: 600; color: var(--text); }
.rc-measure-group__head h4 .glossary { font: inherit; color: inherit; }
.rc-measure-group__head small { color: var(--text-muted); font-size: 0.68rem; text-align: right; }
/* Row = target + action/species/variant tags | potency bar | value + range + refs. */
.rc-fpbar { display: grid; grid-template-columns: minmax(130px, 200px) minmax(0, 1fr) minmax(88px, auto); gap: 14px; align-items: center; padding: 5px 0; }
/* Slimmer, subtler track for the per-substance fingerprint than the taller
   interactive accordion rows (.rc-row__head .rc-track on targets.html). */
.rc-fpbar .rc-track { height: 12px; background: var(--surface-muted); }
.rc-fpbar.is-shared { background: var(--accent-soft); border-radius: var(--radius-sm); padding: 4px 8px; margin: 0 -8px; }
.rc-fpbar__head { min-width: 0; }
.rc-fpbar__name { display: block; min-width: 0; font-size: 0.9rem; font-weight: 500; color: var(--accent); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-fpbar__name:hover { text-decoration: underline; }
.rc-fpbar__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 3px; }
.rc-fpbar__visual { min-width: 0; }
.rc-fpbar__measure { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 7px; align-items: center; }
.rc-fpbar__axis-label { color: var(--text-muted); font-family: var(--font-mono, monospace); font-size: 0.66rem; text-align: right; }
.rc-fpbar__meta { text-align: right; line-height: 1.35; }
.rc-fpbar__val { display: block; font-family: var(--font-mono, monospace); font-size: 0.76rem; color: var(--text); white-space: nowrap; }
.rc-fpbar__sub { display: block; font-size: 0.68rem; color: var(--text-muted); margin-top: 1px; }
.rc-fpbar__range { margin-right: 4px; }

/* Emax is efficacy, not another concentration. It deliberately uses its own
   0–100% track beneath the potency bar so the two quantities cannot be
   mistaken for one another. */
.rc-emax { display: grid; grid-template-columns: 40px minmax(0, 1fr) 58px; gap: 7px; align-items: center; margin-top: 5px; }
.rc-emax__label { color: var(--text-muted); font-size: 0.64rem; text-align: right; }
.rc-emax__track { height: 5px; overflow: hidden; background: var(--surface-soft); border-radius: 999px; }
.rc-emax__fill { height: 100%; background: var(--accent-strong); border-radius: inherit; opacity: 0.78; }
.rc-emax__value { color: var(--text-soft); font-family: var(--font-mono, monospace); font-size: 0.66rem; white-space: nowrap; }

/* Action / species / functional tags on a row. */
.rc-tag { font-size: 0.66rem; line-height: 1.5; padding: 1px 8px; border-radius: 999px; white-space: nowrap; font-weight: 500; }
.rc-tag--activate { background: var(--accent-soft); color: var(--accent); }
.rc-tag--block { background: transparent; border: 1px solid var(--accent); color: var(--accent); padding: 0 7px; }
.rc-tag--other { background: var(--surface-muted); color: var(--text-soft); }
.rc-tag--sp { background: transparent; padding: 0; font-weight: 400; color: var(--text-muted); }
.rc-tag--fn { background: var(--surface-muted); font-weight: 400; color: var(--text-muted); }
.rc-ref { color: var(--accent); text-decoration: none; margin-left: 2px; }
.rc-ref:hover { text-decoration: underline; }

/* Qualitative rows: acts here, no quantitative value. */
.rc-fpqual { margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--border-strong); }
.rc-fpqual__head { font-size: 0.8rem; font-weight: 600; color: var(--text-soft); margin-bottom: 8px; }
.rc-qrow { display: grid; grid-template-columns: minmax(130px, 200px) minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 5px 0; }
.rc-qrow__val { font-size: 0.72rem; color: var(--text-muted); text-align: right; white-space: nowrap; }

.rc-fplegend { font-size: 0.7rem; color: var(--text-muted); margin-top: 14px; line-height: 1.7; }
.rc-fplegend .rc-swatch { margin: 0 2px 0 6px; }
.rc-fpnoki { margin-top: 14px; padding-top: 10px; border-top: 1px dashed var(--border-strong); font-size: 0.82rem; color: var(--text-soft); line-height: 1.8; }
.rc-fpnoki strong { font-weight: 600; }
.rc-fpnoki a { color: var(--accent); }

/* ---- compare (D6) ---- */
/* Picker bar sits in its own elevated panel so the controls read as a distinct
   toolbar over the shared page background, matching the card language elsewhere. */
.cmp-pickers {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  align-items: end;
  margin: 8px 0 26px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 14px);
  box-shadow: var(--shadow);
}
.cmp-pick { min-width: 0; }
.cmp-pick label { display: block; font-size: 0.78rem; color: var(--text-soft); margin-bottom: 6px; }

/* Searchable combobox replacing the old native <select>. */
.cmp-combo { position: relative; }
.cmp-combo__input {
  width: 100%;
  padding: 10px 34px 10px 12px;
  font-size: 0.95rem;
  color: var(--text);
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.cmp-combo__input::placeholder { color: var(--text-muted); }
.cmp-combo__input:focus-visible {
  outline: none;
  border-color: rgba(var(--accent-rgb), 0.5);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.18);
}
.cmp-combo__clear {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
}
.cmp-combo__clear:hover { background: var(--surface-soft); color: var(--text); }
.cmp-combo__list {
  position: absolute;
  z-index: 40;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 4px;
  list-style: none;
  max-height: 300px;
  overflow-y: auto;
  background: var(--surface-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}
.cmp-opt {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
}
.cmp-opt__name { color: var(--text); font-size: 0.92rem; }
.cmp-opt__sub { color: var(--text-muted); font-size: 0.72rem; white-space: nowrap; }
.cmp-opt.is-active,
.cmp-opt:hover { background: color-mix(in srgb, var(--accent-soft) 70%, var(--surface-elevated)); }
.cmp-opt.is-current .cmp-opt__name { color: var(--accent); font-weight: 600; }
.cmp-opt--empty { color: var(--text-muted); cursor: default; }
.cmp-opt--empty:hover { background: transparent; }

/* Swap A/B button between the two pickers. */
.cmp-swap {
  align-self: end;
  width: 42px;
  height: 42px;
  margin-bottom: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  color: var(--accent);
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 140ms ease, transform 140ms ease, border-color 140ms ease;
}
.cmp-swap:hover { background: var(--accent-soft); border-color: rgba(var(--accent-rgb), 0.5); }
.cmp-swap:active { transform: scale(0.94); }

.cmp-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
/* Identity band (name + structure + meta) sits above the target filter; its meta
   pills already carry a bottom margin, so keep the band's own gap tight. */
.cmp-cols--top { margin-bottom: 4px; }
.cmp-col--top .cmp-col__meta { margin-bottom: 4px; }
.cmp-col--top, .cmp-col--fp { display: block; }
.cmp-col__head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.cmp-col__name { font-size: 1.15rem; font-weight: 600; }
.cmp-col__name a { color: var(--accent); text-decoration: none; }
.cmp-col__name a:hover { text-decoration: underline; }
.cmp-col__sub { font-size: 0.76rem; color: var(--text-soft); }

/* Structure card at the top of each column. */
.cmp-col__struct {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  min-height: 150px;
  margin-bottom: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 14px);
}
.cmp-col__struct img,
.cmp-col__struct svg { max-width: 100%; max-height: 180px; height: auto; }
.cmp-col__struct--missing { color: var(--text-muted); font-size: 0.8rem; min-height: 90px; }
.cmp-col__meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.cmp-tag {
  font-size: 0.72rem;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--text-soft);
  border: 1px solid var(--border);
}
.cmp-tag--formula { font-variant-numeric: tabular-nums; }

.cmp-note { font-size: 0.8rem; color: var(--text-soft); background: var(--surface-soft); border-radius: var(--radius-sm); padding: 10px 12px; margin-top: 18px; }
.cmp-note strong { color: var(--text); }

/* Compare columns are ~half page width, too narrow for the compound-page 3-column
   fingerprint row (name | bar | value) — the bar got crushed / values clipped.
   Stack each row: name+tags and value share the top line, the bar spans full width
   underneath. Scoped to .cmp-col so the compound and targets pages are untouched. */
.cmp-col .rc-fpbar {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "head meta"
    "bar  bar";
  column-gap: 12px;
  row-gap: 7px;
  align-items: center;
  padding: 2px 0;
}
.cmp-col .rc-fpbar > .rc-fpbar__head { grid-area: head; }
.cmp-col .rc-fpbar > .rc-fpbar__visual { grid-area: bar; }
.cmp-col .rc-fpbar > .rc-fpbar__meta { grid-area: meta; text-align: right; }
.cmp-col .rc-fpbar__name { white-space: normal; }

/* Shared-target overlay: both columns tint the rows for targets the two compounds
   share, with a left accent rail + a "shared" pill, so overlaps read at a glance. */
.cmp-col .rc-fpbar.is-shared {
  background: color-mix(in srgb, var(--accent-soft) 85%, transparent);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 7px 10px 7px 9px;
  margin: 0 -10px;
}
.rc-tag--shared {
  background: var(--accent);
  color: #fff;
  border-color: transparent;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Per-column numbered reference list — the fingerprint bars cite [n] (like a
   compound page) instead of inline [PMID …]; the numbers resolve here. */
.cmp-ref-sup { font-size: 0.62rem; margin-left: 2px; white-space: nowrap; }
.cmp-ref-sup a { color: var(--accent); text-decoration: none; }
.cmp-ref-sup a:hover { text-decoration: underline; }
.cmp-refs {
  margin: 16px 0 0;
  padding-left: 1.4em;
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.5;
}
.cmp-refs li { margin: 2px 0; }
.cmp-refs a { color: var(--text-soft); text-decoration: none; }
.cmp-refs a:hover { color: var(--accent); text-decoration: underline; }
.cmp-refs__head { font-size: 0.72rem; font-weight: 600; color: var(--text-soft); margin: 16px 0 4px; text-transform: uppercase; letter-spacing: 0.04em; }

/* ---- target filter (hide/show receptors across both columns) ---- */
.cmp-filter {
  margin: 0 0 18px;
  padding: 12px 16px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 14px);
}
.cmp-filter__bar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; }
.cmp-filter__label { font-size: 0.78rem; font-weight: 600; color: var(--text-soft); text-transform: uppercase; letter-spacing: 0.04em; }
.cmp-filter__modes { display: inline-flex; gap: 2px; padding: 2px; background: var(--surface-soft); border: 1px solid var(--border); border-radius: 999px; }
.cmp-fmode {
  font-size: 0.8rem;
  padding: 4px 12px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--text-soft);
  cursor: pointer;
  transition: background 130ms ease, color 130ms ease;
}
.cmp-fmode:hover:not(:disabled):not(.is-active) { color: var(--text); }
.cmp-fmode.is-active { background: var(--accent); color: #fff; }
.cmp-fmode:disabled { opacity: 0.4; cursor: not-allowed; }
.cmp-human {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.8rem;
  color: var(--text-soft);
  cursor: pointer;
  user-select: none;
}
.cmp-human input {
  width: 15px;
  height: 15px;
  accent-color: var(--accent);
  cursor: pointer;
  margin: 0;
}
.cmp-human:hover { color: var(--text); }
.cmp-filter__count { font-size: 0.76rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.cmp-filter__collapse {
  margin-left: auto;
  font-size: 0.76rem;
  padding: 4px 8px;
  border: none;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
}
.cmp-filter__collapse:hover { text-decoration: underline; }
.cmp-filter__chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
/* An explicit display:flex above beats the UA [hidden] rule, so collapse it here. */
.cmp-filter__chips[hidden] { display: none; }
.cmp-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  padding: 4px 11px 4px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-elevated);
  color: var(--text);
  cursor: pointer;
  transition: background 130ms ease, border-color 130ms ease, color 130ms ease, opacity 130ms ease;
}
.cmp-chip__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; transition: background 130ms ease; }
.cmp-chip.is-shared { border-color: rgba(var(--accent-rgb), 0.5); }
.cmp-chip.is-shared .cmp-chip__dot { box-shadow: 0 0 0 2px var(--accent-soft); }
.cmp-chip__slot { font-size: 0.62rem; font-weight: 700; color: var(--text-muted); letter-spacing: 0.03em; }
.cmp-chip:hover { border-color: rgba(var(--accent-rgb), 0.5); }
.cmp-chip.is-off {
  background: transparent;
  color: var(--text-muted);
  border-style: dashed;
  text-decoration: line-through;
  opacity: 0.7;
}
.cmp-chip.is-off .cmp-chip__dot { background: var(--text-muted); box-shadow: none; }
.cmp-chip:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.18); }
.rc-stat__of { color: var(--text-muted); font-weight: 400; }

@media (max-width: 600px) {
  .rc-bandlabels, .rc-row__head { grid-template-columns: 120px 1fr 72px; }
  .rc-bandlabels .rc-chev, .rc-row__head .rc-chev { display: none; }
  .rc-drawer { margin-left: 0; }
  .rc-bands { font-size: 0; }
  .rc-fpcard__stats { grid-template-columns: 1fr; }
  .rc-fpbar, .rc-qrow { grid-template-columns: 108px 1fr auto; gap: 9px; }
  .rc-measure-group__head { display: block; }
  .rc-measure-group__head small { display: block; margin-top: 3px; text-align: left; }
  .cmp-pickers { grid-template-columns: 1fr; }
  .cmp-swap { justify-self: center; transform: rotate(90deg); }
  .cmp-swap:active { transform: rotate(90deg) scale(0.94); }
  .cmp-cols { grid-template-columns: 1fr; }
}