/* components.css · styles for the data-driven tool components.
   Loaded from the <main> body of the pages that use them. */

/* ---------- The expert panel (people.html) ---------- */
.card__idrow { display: flex; align-items: center; gap: .9rem; }
.card__creds {
  font-size: .82rem; line-height: 1.55; color: rgba(36, 28, 19, .68);
  margin: .65rem 0 0;
}
.card__count {
  font-size: .78rem; letter-spacing: .04em; text-transform: uppercase;
  color: #C08040; margin: .6rem 0 0;
}
.card__interests { margin-top: .7rem; font-size: .85rem; }
.card__interests summary {
  cursor: pointer; list-style: none; color: rgba(36, 28, 19, .78);
  font-size: .78rem; letter-spacing: .05em; text-transform: uppercase;
  border-bottom: 1px solid rgba(36, 28, 19, .18); padding-bottom: .3rem;
}
.card__interests summary::-webkit-details-marker { display: none; }
.card__interests[open] summary span { visibility: hidden; }
.card__interests ul { margin: .55rem 0 0; padding-left: 1.05rem; }
.card__interests li { margin-bottom: .4rem; line-height: 1.5; }
.card__interests--none { color: rgba(36, 28, 19, .6); font-size: .8rem; margin-top: .7rem; }

/* ---------- The Guide: city filter ---------- */
.guide-filter { margin: 0 0 var(--s4, 1.6rem); }
.guide-filter__label {
  display: block; font-size: .72rem; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(36, 28, 19, .6); margin-bottom: .55rem;
}
.guide-filter__row { display: flex; flex-wrap: wrap; gap: .45rem; }
.guide-chip {
  font: inherit; font-size: .82rem; padding: .34rem .85rem; cursor: pointer;
  border: 1px solid rgba(36, 28, 19, .28); border-radius: 999px;
  background: transparent; color: inherit;
  transition: background .18s ease, border-color .18s ease;
}
.guide-chip:hover { border-color: #C08040; }
.guide-chip.is-on { background: #C08040; border-color: #C08040; color: #FDFAF5; }
.guide-chip small { opacity: .72; margin-left: .3rem; }

/* ---------- The Radar: labelled ratings + compare ---------- */
.ratings__label {
  display: block; font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(36, 28, 19, .55); margin-bottom: .1rem;
}
.compare-block { margin: var(--s4, 1.6rem) 0; }
.compare-block__head { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; margin-bottom: .8rem; }
.compare-scroll { overflow-x: auto; }
.compare-table {
  width: 100%; border-collapse: collapse; font-size: .88rem;
  background: rgba(255, 255, 255, .55); border: 1px solid rgba(36, 28, 19, .12);
}
.compare-table th, .compare-table td {
  text-align: left; vertical-align: top; padding: .65rem .8rem;
  border-bottom: 1px solid rgba(36, 28, 19, .1);
}
.compare-table thead th {
  font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(36, 28, 19, .6); border-bottom: 1px solid rgba(36, 28, 19, .25);
}
.compare-table tbody th { font-weight: 600; white-space: nowrap; }
.compare-table td b { font-variant-numeric: tabular-nums; }
.compare-drop {
  font: inherit; font-size: .74rem; border: 0; background: none; cursor: pointer;
  color: rgba(36, 28, 19, .55); text-decoration: underline; padding: 0; margin-left: .5rem;
}

/* ---------- The Compass: result comparison table ---------- */
.match-compare { margin: var(--s4, 1.6rem) 0 0; }
.match-compare .compare-table td { min-width: 10rem; }
.compare-block .kicker { display: block; margin-bottom: .2rem; }
.compare-block h3 { margin: 0 0 .7rem; }
.compare-table tbody th small,
.compare-table td small {
  display: block; font-weight: 400; font-size: .74rem;
  color: rgba(36, 28, 19, .58); white-space: normal; margin-top: .15rem;
}
.compare-table tr.is-top th, .compare-table tr.is-top td { background: rgba(231, 184, 165, .14); }
.compare-table .sun { width: 12px; height: 12px; }

/* ---------- The Scan: mode tabs ---------- */
.scan-modes {
  display: flex; gap: .5rem; flex-wrap: wrap;
  margin: 0 0 var(--s4, 1.6rem);
}
.scan-mode {
  font: inherit; font-size: .9rem; padding: .55rem 1.15rem; cursor: pointer;
  border: 1px solid rgba(36, 28, 19, .3); border-radius: 999px;
  background: transparent; color: inherit;
}
.scan-mode[aria-selected="true"] { background: #241C13; border-color: #241C13; color: #FDFAF5; }
.scan-pane[hidden] { display: none; }

/* ---------- The Verdict: labelled consensus meter ---------- */
.vd-meter-label {
  display: block; font-size: .66rem; letter-spacing: .09em;
  text-transform: uppercase; color: rgba(36, 28, 19, .55); margin-top: .25rem;
}

/* ---------- The Verdict: the best quote leads each panel ---------- */
.pnl__quote {
  margin: .9rem 0 1.1rem; padding: .2rem 0 .2rem 1rem;
  border-left: 2px solid rgba(178, 141, 66, .55);
}
.pnl__quote p {
  font-family: var(--serif, Georgia, serif); font-size: 1.02rem;
  line-height: 1.5; color: rgba(36, 28, 19, .88); margin: 0;
}
.pnl__quote cite {
  display: block; margin-top: .4rem; font-style: normal; font-size: .72rem;
  letter-spacing: .08em; text-transform: uppercase; color: rgba(36, 28, 19, .55);
}

/* ---------- Mobile, below 640px ---------- */
@media (max-width: 640px) {
  /* The Five as stacked cards, not a side scroller */
  .five-row {
    display: block; overflow-x: visible;
    margin-right: 0; padding-right: 0; padding-bottom: 0;
  }
  .five-col { width: 100%; margin: 0 0 1.4rem; }
  .five-frame img { width: 100%; height: auto; }
  /* tier tabs wrap instead of scrolling off screen */
  .tier-nav .jump-nav__scroll {
    flex-wrap: wrap; row-gap: .45rem; overflow-x: visible;
  }
  /* names never truncate */
  .pcard__name, .vd-also__name {
    white-space: normal; overflow: visible; text-overflow: clip;
  }
  .compare-table { font-size: .8rem; }
  .compare-table th, .compare-table td { padding: .5rem .55rem; }
}