/* ============================================================
   CTCAE Explorer — app CSS
   /assets/apps/ae_grading/ae_grading.css

   This is the whole of the app's custom CSS. Everything else comes
   from the framework (crp.css + crp-ant.css + crp-ui.css).

   Only two things here are genuinely app-specific:
     1. the two-pane explorer grid (list beside detail)
     2. the scrollable, selectable results list

   If a rule here could be written with a framework token and a
   framework class, it does not belong in this file.
   ============================================================ */

/* ── Two-pane explorer ─────────────────────────────────────
   list 380px, detail takes the rest. The detail pane is sticky so
   grading criteria stay in view while scanning the list. */
.ae-explorer {
  display: grid;
  grid-template-columns: 380px minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: start;
}

.ae-results {
  overflow: hidden;
}

.ae-results > #resultsList {
  max-height: 68vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.ae-details {
  position: sticky;
  top: calc(var(--appbar-h) + var(--sp-4));
  min-height: 320px;
  padding: var(--sp-5);
}

/* ── Results list ──────────────────────────────────────────
   .item / .item-term / .item-soc / .active are the contract the
   page's own JS writes; the names are kept on purpose. */
.item {
  display: block;
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  border-bottom: 1px solid var(--line-soft);
  border-left: 3px solid transparent;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease),
              border-left-color var(--dur-fast) var(--ease);
}

.item:hover { background: var(--surface-2); }

.item.active {
  background: var(--brand-soft);
  border-left-color: var(--brand);
}

.item-term {
  display: block;
  margin-bottom: 2px;
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--ink);
}

.item-soc {
  font-size: var(--fs-xs);
  color: var(--ink-mute);
}

/* ── Empty states (search prompt, no results, nothing selected) */
.ae-empty {
  padding: var(--sp-8) var(--sp-5);
  text-align: center;
  color: var(--ink-mute);
  font-size: var(--fs-sm);
}

/* ── Detail pane ─────────────────────────────────────────── */
.ae-detail-head {
  padding-bottom: var(--sp-4);
  margin-bottom: var(--sp-5);
  border-bottom: 1px solid var(--line-soft);
}

.ae-detail-head .page-title { margin-block: var(--sp-2) var(--sp-3); }

.ae-definition {
  margin-block: var(--sp-2) var(--sp-6);
  line-height: 1.7;
}

.ae-grade { width: 110px; white-space: nowrap; }

/* ── Small screens ───────────────────────────────────────── */
@media (max-width: 1100px) {
  .ae-explorer { grid-template-columns: minmax(0, 1fr); }
  .ae-details { position: static; }
  .ae-results > #resultsList { max-height: none; }
}