/* =========================================================================
   project.css — macrophage-ML viewer only.

   This file holds ONLY what is specific to this project. Everything the
   carotid-plaque walkthrough also uses now lives in the shared
   stylesheet:

     https://khosrofar.me/shared/shared.css
     (source of truth: Portfolio/_shared/shared.css)

   That file provides, among others: the masthead flex row and baseline
   alignment, .step-num, .card-header, .section-title, .toc, the
   .summary-stat block, .evidence-note and .resource-links. Do not
   redefine them here; if something is wrong with them, fix the shared
   file so both projects change together.

   LOAD ORDER
   ----------
   1. bootstrap (CDN)
   2. theme.css   — palette variables
   3. shared.css  — common layout
   4. project.css — this file, overrides the above
   ========================================================================= */

body {
  color: #243347;
}

h1, h2, h3 {
  color: #17293f;
}

.card {
  box-shadow: none;
}

.card-body p:last-child {
  margin-bottom: 0;
}


/* ── Sticky sidebar ────────────────────────────────────────────────── */

.step-nav {
  position: sticky;
  top: 1rem;
}


/* ── Held-out sample explorer ─────────────────────────────────────────
   The plaque walkthrough has an equivalent live panel but sizes its
   output differently (it renders a slope chart, not a prediction), so
   this box is this project's own. */

.result-box {
  background: #f8f9fa;
  border: 1px solid var(--line);
  padding: 1rem;
  min-height: 5rem;
  overflow-wrap: anywhere;
}

.result-box p {
  margin-bottom: .5rem;
}


/* ── Confusion matrix ─────────────────────────────────────────────────
   Centre the cells so the diagonal reads cleanly, but keep the row
   header left-aligned; centred row labels are hard to scan. */

.matrix td,
.matrix th {
  text-align: center;
  white-space: nowrap;
}

.matrix th:first-child {
  text-align: left;
}

.table caption {
  caption-side: top;
  color: #526174;
}


/* ── Small-screen adjustments ──────────────────────────────────────── */

@media (max-width: 991.98px) {
  .step-nav {
    position: static;
  }
}

@media (max-width: 480px) {
  .navbar-brand {
    white-space: normal;
  }
}

code {
  overflow-wrap: anywhere;
}

summary.card-header {
  cursor: pointer;
}

/* Visible focus for keyboard users, in the same blue the shared theme
   uses for form focus rings. */
button:focus-visible,
a:focus-visible,
select:focus-visible {
  outline: 3px solid #457ca8;
  outline-offset: 2px;
}