/* Sponsor cohort explorer — only what ../shared/brand.css does not already
   provide. Palette, typography, focus, tables, badges, cards, disclaimers,
   loading and responsiveness all come from brand.css; no raw hex here. */

/* The banner mark is drawn in Alluvion's own strata, not the Synapse parent's
   navy + amber (BRANDBOOK.md:14, :24). Fills live here rather than on the SVG
   because var() is not reliable in a presentation attribute. */
.portfolio-banner .mark .stratum   { fill: var(--riverbed-slate); }
.portfolio-banner .mark .accretion { fill: var(--iron-ochre); }
.portfolio-banner .banner-text     { flex: 1 1 12rem; }
.portfolio-banner .banner-cta      { text-decoration: none; white-space: nowrap; }

form { max-width: 44rem; }

/* ── Cohort list ─────────────────────────────────────────────────────────── */

.cohort-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--iron-ochre);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem;
  margin-bottom: .8rem;
}
.cohort-card.suppressed { background: var(--sandstone); border-left-color: var(--silt); }
.cohort-card h3 { margin-bottom: .3rem; }
.cohort-card p { margin: 0 0 .5rem; }
.cohort-card .meta { font-size: .8125rem; color: var(--text-muted); }
.disclaimer.inline { margin: .4rem 0 0; padding: .5rem .7rem; }

/* ── Charts ──────────────────────────────────────────────────────────────── */

.chart-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 1.2rem;
  margin: 1.2rem 0;
}
.chart-box {
  background: var(--sandstone);
  border-radius: var(--radius);
  padding: 1rem;
}
.chart-box h4 { margin-bottom: .6rem; font-size: .95rem; }
.chart-box canvas { max-height: 260px; }

/* ── Signal scorecard ────────────────────────────────────────────────────── */

.scorecard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 1.5rem;
  margin-bottom: 1.2rem;
}
.scorecard-list { list-style: none; margin: 0; padding: 0; }
.scorecard-list li { padding: .6rem 0; border-bottom: 1px solid var(--border); }
.scorecard-list p { margin: .2rem 0 0; }
.signal-name { font-weight: 600; text-transform: capitalize; color: var(--brand); }
.signal-value { float: right; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ── Wizard ──────────────────────────────────────────────────────────────── */

.stepper { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.2rem; padding: 0; list-style: none; }
.step-dot {
  width: 1.9rem; height: 1.9rem;
  border-radius: 50%;
  background: var(--sandstone);
  color: var(--ash);
  display: flex; align-items: center; justify-content: center;
  font-size: .8125rem; font-weight: 700;
}
.step-dot.active { background: var(--riverbed-slate); color: var(--bone); }
.step-dot.done   { background: var(--valid); color: var(--bone); }

.wizard-step h3 { margin-bottom: .6rem; }
.wizard-step fieldset { border: none; padding: 0; margin: 0 0 .875rem; }
.wizard-step legend {
  padding: 0;
  font-size: .8125rem; font-weight: 600;
  color: var(--brand);
}
.wizard-nav { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }

.code-plate {
  background: var(--slate-dark);
  color: var(--bone);
  padding: .9rem 1rem;
  margin: .6rem 0 0;
  border-radius: var(--radius-sm);
  overflow-x: auto;
  font-family: var(--f-mono);
  font-size: .8125rem;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ── Age slider ──────────────────────────────────────────────────────────── */

.dual-slider { position: relative; height: 2.5rem; }
.dual-slider input[type="range"] {
  position: absolute; width: 100%; top: .9rem;
  pointer-events: none; appearance: none; -webkit-appearance: none;
  background: transparent;
}
.dual-slider input[type="range"]::-webkit-slider-thumb {
  pointer-events: auto; appearance: none; -webkit-appearance: none;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--riverbed-slate); cursor: pointer;
}
.dual-slider input[type="range"]::-moz-range-thumb {
  pointer-events: auto;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--riverbed-slate); cursor: pointer; border: none;
}

/* ── Vocabulary combobox ─────────────────────────────────────────────────── */

.combobox-field { margin-bottom: 1.2rem; }

.suggestions {
  list-style: none;
  margin: .35rem 0 0;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--silt);
  border-radius: var(--radius-sm);
  max-height: 15rem;
  overflow-y: auto;
}
.suggestion-item {
  padding: .55rem .8rem;
  cursor: pointer;
  font-size: .9375rem;
  border-bottom: 1px solid var(--border);
}
.suggestion-item:last-child { border-bottom: none; }
.suggestion-item:hover { background: var(--sandstone); }
/* The active descendant carries real focus styling because DOM focus stays on
   the input — colour alone would not be enough of a signal. */
.suggestion-item.active {
  background: var(--riverbed-slate);
  color: var(--bone);
  outline: 2px solid var(--iron-ochre);
  outline-offset: -2px;
}
.suggestion-item.active .hint { color: var(--sandstone); }

.chip-list { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0 0; padding: 0; list-style: none; }
.chip {
  background: var(--sandstone);
  color: var(--brand);
  border: 1px solid var(--fog);
  border-radius: 999px;
  padding: .15rem .3rem .15rem .7rem;
  font-size: .8125rem;
  display: inline-flex;
  align-items: center;
  gap: .25rem;
}
.chip-remove {
  background: none;
  border: none;
  color: var(--brand);
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  min-height: 32px;
  min-width: 32px;
  padding: 0;
}
.chip-remove:hover:not(:disabled) { background: none; color: var(--reject); }

.checkbox-list { display: flex; flex-direction: column; gap: .4rem; }
.checkbox-item { display: flex; align-items: center; gap: .55rem; min-height: 32px; }
.checkbox-item input[type="checkbox"] { width: 1.15rem; height: 1.15rem; margin: 0; }
.checkbox-item label { display: inline; margin: 0; font-size: .9375rem; font-weight: 400; color: var(--text); }

@media (max-width: 760px) {
  header.app-bar h1 { flex: 1 1 100%; }
  .chart-box canvas { max-height: 220px; }
}