/* =========================================================================
   shared.css — the common look for Rasa's portfolio walkthroughs.

   Loaded by both:
     plaquering/templates/index.html      (macrophage.khosrofar.me)
     macrophage-ml/templates/index.html  (macrophage-ml.khosrofar.me)

   WHY THIS FILE EXISTS
   --------------------
   The two walkthroughs were built independently and ended up with the
   same palette and the same layout rules in three different places:
   duplicated theme.css, an inline <style> block in the plaque template,
   and a project.css in the ML template. They drifted, and the drift was
   invisible to any check that only compared class names — the navbar
   rendered differently while every selector still "existed".

   This file is the single source for everything they share. Anything
   used by only one project belongs in that project's own stylesheet, not
   here. If you change a rule here, both sites change; that is the point.

   LOAD ORDER
   ----------
   1. bootstrap        (CDN, both projects, same version)
   2. theme.css        (palette variables, masthead colours, buttons)
   3. shared.css       (this file: layout primitives both projects use)
   4. project.css      (optional, per-project additions)

   Later files win, so a project can always override without editing this.
   ========================================================================= */


/* ── Masthead ──────────────────────────────────────────────────────────
   A plain .navbar with an h1 brand on the left and a metadata span on the
   right. Bootstrap's default navbar does not lay these out as a row, so
   the flex row and the baseline alignment are explicit. Without them the
   title and the metadata sit at different heights and the bar reads as
   broken rather than deliberate. */

.navbar .container-fluid {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.navbar-brand {
  font-size: 1.25rem;
  margin-bottom: 0;
}

.navbar-meta {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  white-space: nowrap;
}


/* ── Section headers ──────────────────────────────────────────────────
   Numbered steps use a small navy square instead of a text number, so the
   header stays compact and the number aligns with wrapped titles. */

.card-header {
  display: flex;
  align-items: center;
}

.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  background: var(--navy);
  color: #fff;
  font-size: .8rem;
  margin-right: .5rem;
  flex: none;
}

.section-title {
  font: inherit;
  font-weight: 600;
  margin: 0;
}


/* ── Sticky table of contents ───────────────────────────────────────── */

.toc a {
  text-decoration: none;
  font-size: .85rem;
  display: block;
  padding: .15rem 0;
}

.toc a:hover {
  color: var(--brick);
}


/* ── At-a-glance summary block ──────────────────────────────────────── */

.summary-answer {
  font-size: 1.08rem;
  line-height: 1.55;
}

.summary-stat {
  border-left: 3px solid var(--navy);
  padding-left: .7rem;
}

.summary-stat .value {
  display: block;
  color: var(--navy);
  font-size: 1.25rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.summary-stat .label {
  display: block;
  color: #6c757d;
  font-size: .76rem;
}


/* ── Caveat / evidence callout ────────────────────────────────────────
   Both projects state their main limitation this way, so a reader learns
   to recognise it. Keep the two visually identical. */

.evidence-note {
  border-left: 3px solid var(--navy);
  background: #f5f7f9;
  padding: .7rem .85rem;
  font-size: .86rem;
}


/* ── Action buttons ─────────────────────────────────────────────────── */

.resource-links {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.resource-links .btn {
  white-space: nowrap;
}


/* ── Misc ───────────────────────────────────────────────────────────── */

.num {
  font-variant-numeric: tabular-nums;
}

main section {
  scroll-margin-top: 1rem;
}


/* ── Narrow viewports ─────────────────────────────────────────────────
   Below the large breakpoint the masthead stacks: brand on one line,
   metadata beneath it. The sidebar also stops being sticky, because a
   sticky element with nowhere to stick just eats the viewport. */

@media (max-width: 991.98px) {
  .navbar .container-fluid {
    align-items: flex-start;
    gap: .5rem;
  }

  .navbar-meta {
    display: block;
    width: 100%;
    white-space: normal;
  }

  .position-sticky {
    position: static !important;
  }
}