/* ─────────────────────────────────────────────────────────────
   Hello Radio — compare view + view-router visibility
   One job: the "Compare brands" pane skin, plus the body[data-view]
   rules that swap the library chrome for a pane. Tokens only; no
   decorative borders (background tints + shadows do the work).
   ───────────────────────────────────────────────────────────── */

/* ── Pane shell — same side insets as .grid / .pagehead (32px) ── */
.viewpane {
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px 32px 56px;
}

/* ── Header ── */
.cmp-head { margin-bottom: 22px; }
.cmp-title {
  font-family: var(--font-display); font-size: var(--text-display);
  font-weight: 700; letter-spacing: -0.3px;
}
.cmp-sub { margin-top: 6px; color: var(--text-secondary); font-size: var(--text-lg); }

/* ── Two columns ── */
.cmp-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.cmp-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* Brand picker — control-bg fill, borderless, Geist, own caret */
.cmp-select {
  width: 100%; font-family: var(--font-body); font-size: var(--text-lg);
  color: var(--text); background: var(--control-bg);
  border: none; border-radius: var(--radius-sm);
  padding: 0.6rem 2rem 0.6rem 0.75rem; cursor: pointer; outline: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%2365676b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.75rem center;
  transition: background var(--dur-fast) var(--ease-out);
}
.cmp-select:hover { background-color: var(--control-bg-hover); }
.cmp-select:focus { box-shadow: 0 0 0 3px var(--focus-ring-soft); }

/* ── Stat strip ── */
.cmp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.cmp-stat {
  background: var(--surface); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card); padding: 12px 10px;
}
.cmp-stat-num {
  font-size: var(--text-display); font-weight: 700;
  letter-spacing: -0.5px; font-variant-numeric: tabular-nums; line-height: 1.1;
}
.cmp-stat-label { margin-top: 2px; color: var(--text-secondary); font-size: var(--text-sm); }

.cmp-newest { color: var(--text-secondary); font-size: var(--text-md); }

/* ── Card list — cards stack vertically ── */
.cmp-list { display: flex; flex-direction: column; gap: 14px; }

/* ── Router visibility: hide the library chrome off the library view ── */
body[data-view="compare"] .pagehead,
body[data-view="compare"] #grid,
body[data-view="boards"] .pagehead,
body[data-view="boards"] #grid { display: none; }

/* library-only toolbar controls disappear on the other views */
body[data-view="compare"] .toolwrap,
body[data-view="compare"] .toolbar-i,
body[data-view="compare"] .scope-search,
body[data-view="compare"] #pill-filters,
body[data-view="boards"] .toolwrap,
body[data-view="boards"] .toolbar-i,
body[data-view="boards"] .scope-search,
body[data-view="boards"] #pill-filters { display: none; }

/* ── Responsive: stack the two columns ── */
@media (max-width: 860px) {
  .cmp-cols { grid-template-columns: 1fr; }
}