/* Page frame: the brand bar, the per-view control bar, and the section grid.
 *
 * Both views mount into the same <main>, so anything in here is shared by
 * definition. View-specific styling belongs in components.css if it is a
 * reusable piece, and nowhere at all if it is a one-off.
 */

/* Both bars stick as one block, so the view switch stays reachable and
   neither bar needs to know the other's height. */
#chrome { position: sticky; top: 0; z-index: 30; }

/* ── Xoma bar ─────────────────────────────────────────────────── */
#brandbar {
  background: var(--brand);
  color: var(--brand-ink);
  border-bottom: 1px solid var(--brand-edge);
  padding: 0 var(--pad);
  display: flex;
  align-items: stretch;
  gap: 20px;
}
#brandbar .wordmark {
  font-size: 17px;
  font-weight: 750;
  letter-spacing: .06em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  padding: 9px 0;
  white-space: nowrap;
}

/* Segmented view switch. Tabs rather than links: the views are two faces of
   one app, not two pages. */
#viewtabs { display: flex; align-items: stretch; gap: 2px; }
#viewtabs .tab {
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  color: var(--brand-ink);
  opacity: .72;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  padding: 10px 14px 7px;
  cursor: pointer;
  white-space: nowrap;
}
#viewtabs .tab:hover { opacity: 1; }
#viewtabs .tab[aria-selected="true"] {
  opacity: 1;
  border-bottom-color: var(--brand-ink);
}
#viewtabs .tab:focus-visible { outline: 2px solid var(--brand-ink); outline-offset: -3px; }

/* ── Control bar (per view) ───────────────────────────────────── */
#appbar {
  background: var(--appbar);
  color: var(--appbar-ink);
  padding: 9px var(--pad);
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
/* The view supplies the controls; `contents` lets them sit in the bar's own
   flex row rather than in a box of their own. */
#appbar-controls { display: contents; }
#appbar h1 { font-size: 14px; font-weight: 600; letter-spacing: .01em; white-space: nowrap; }
#appbar h1 span { color: var(--appbar-muted); font-weight: 400; }
#status { font-size: 11px; color: var(--warn); margin-left: auto; white-space: nowrap; }

/* ── Sections and rows ────────────────────────────────────────── */
main { padding: 12px var(--pad) 40px; display: flex; flex-direction: column; gap: 14px; }
section { display: flex; flex-direction: column; gap: 7px; }

.sec-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.sec-head h2 {
  font-size: 12px; font-weight: 650; letter-spacing: .03em;
  text-transform: uppercase; color: var(--ink-2);
}
.sec-head .sub { font-size: 11.5px; color: var(--muted); }

.row { display: grid; gap: var(--gap); }
.row-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.row-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.row-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1500px) { .row-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1000px) {
  .row-3, .row-2 { grid-template-columns: minmax(0, 1fr); }
  .row-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .row-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

#no-data { display: none; padding: 40px var(--pad); text-align: center; color: var(--muted); }