/* =============================================================
   pfizer.css — medical inquiry case study exhibits
   Scoped entirely to .mi-* and loaded on every page (same pattern as
   rosie.css / gsp.css; soft-nav swaps only .page-grid). Everything the
   GSP exhibits already do (tables, flows, numbered rules, callouts)
   comes from gsp.css; this file only adds what that doesn't cover.
   ============================================================= */

/* Sub-heading inside a section (the inline margin the GSP page uses) */
.cs-section__eyebrow.mi-sub { margin-top: var(--space-7); }

/* ---------- live prototype frame ---------- */
/* The prototype is drawn at 1440px and scales itself to the iframe
   (pfizer-prototype.js, ?embed=1), so each frame only needs the screen's
   own aspect ratio. The iframe ignores the pointer; the overlay link
   opens the full prototype at that screen. */
.mi-screen { grid-column: 1 / -1; margin: var(--space-6) 0 0; }
.mi-screen__frame {
  position: relative;
  aspect-ratio: 1440 / 1040;
  border-radius: 4px;
  overflow: hidden;
  background: #EEF1F4;             /* the prototype's own ground, so a slow load doesn't flash black */
}
.mi-screen__frame--drafting { aspect-ratio: 1440 / 1080; }
.mi-screen__frame--patterns { aspect-ratio: 1440 / 1010; }
.mi-screen__frame iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0; display: block;
  pointer-events: none;
}
.mi-screen__link { position: absolute; inset: 0; z-index: 1; }
.mi-screen__cta {
  position: absolute; right: var(--space-2); bottom: var(--space-2);
  display: inline-flex; align-items: center; gap: 0.4em;
  height: 40px; padding: 0 var(--space-2);
  border-radius: 999px;
  font-size: var(--fs-200); font-weight: 500;
  color: var(--fg);
  background: rgba(22,24,26,0.72);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background var(--dur-1) var(--ease-out);
}
.mi-screen__link:hover .mi-screen__cta,
.mi-screen__link:focus-visible .mi-screen__cta { background: rgba(22,24,26,0.9); }
.mi-screen__cta .arrow { transition: transform var(--dur-1) var(--ease-out); }
.mi-screen__link:hover .mi-screen__cta .arrow { transform: translateX(3px); }
.mi-screen__link:focus-visible { outline-offset: -2px; }
.mi-screen__cap { margin-top: var(--space-3); }
.mi-screen__cap strong { display: block; margin-bottom: 0.25rem; }
@media (max-width: 599px) {
  .mi-screen__cta { right: var(--space-1); bottom: var(--space-1); height: 34px; font-size: var(--fs-100); }
}

/* Inline "open the prototype" link in body copy */
.mi-link {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: var(--fg-quaternary);
  text-underline-offset: 0.2em;
  transition: text-decoration-color var(--dur-1) var(--ease-out);
}
.mi-link:hover { text-decoration-color: var(--fg); }

/* ---------- behavior contract: may / may not / must escalate ---------- */
.mi-contract { display: grid; grid-template-columns: 1fr; gap: 0.375rem; }
@media (min-width: 960px) { .mi-contract { grid-template-columns: repeat(3, 1fr); } }
.mi-contract__col {
  padding: var(--space-3);
  border: 1px solid rgba(247,248,248,0.10);
  border-radius: 4px;
}
.mi-contract__col--escalate { border-color: rgba(247,248,248,0.35); }
.mi-contract__head {
  font-size: var(--fs-300); font-weight: 500; color: var(--fg);
  margin-bottom: var(--space-2);
}
.mi-contract ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.mi-contract li {
  position: relative;
  padding-left: 1rem;
  font-size: var(--fs-200); line-height: 1.45;
  color: var(--fg-secondary);
}
.mi-contract li::before {
  content: ""; position: absolute; left: 0; top: 0.6em;
  width: 0.3125rem; height: 0.3125rem; border-radius: 50%;
  background: var(--fg-tertiary);
}
.mi-contract li strong { color: var(--fg); font-weight: 500; }

/* ---------- flow diagrams (inline SVG, drawn on a 720-wide grid) ---------- */
.mi-dg { display: block; width: 100%; min-width: 560px; height: auto; overflow: visible; }
.mi-dg text {
  font-family: inherit; font-size: 15px; letter-spacing: var(--tr-body);
  fill: var(--fg); text-anchor: middle; dominant-baseline: central;
}
.mi-dg .mi-dg__label { font-size: 13px; fill: var(--fg-tertiary); }
.mi-dg__box { fill: rgba(247,248,248,0.03); stroke: rgba(247,248,248,0.22); stroke-width: 1; }
.mi-dg__edge { fill: none; stroke: var(--fg-tertiary); stroke-width: 1.25; }
.mi-dg__edge--loop { stroke-dasharray: 4 4; }
.mi-dg__head { fill: var(--fg-tertiary); }
.mi-dg__pill { fill: var(--bg); stroke: rgba(247,248,248,0.10); stroke-width: 1; }
/* Today / Future state, side by side on a 360-wide grid each; stacked on phones */
.mi-compare { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.mi-dg--col { min-width: 0; max-width: 400px; margin: var(--space-4) auto 0; }
/* each column renders ~0.9x its grid, so type is set up to land at the page's 15px */
.mi-dg--col text { font-size: 16.5px; }
.mi-dg--col .mi-dg__label { font-size: 14.5px; }
@media (max-width: 720px) { .mi-compare { grid-template-columns: 1fr; } }

/* ---------- disclaimer under the last section ---------- */
.mi-disclaimer {
  grid-column: 1 / -1;
  margin-top: var(--space-6);
  font-size: var(--fs-200); line-height: 1.5;
  color: var(--fg-tertiary);
  font-style: italic;
}

/* Exhibits on this page sit without a stroke; the faint fill alone groups them.
   Scoped with .mi-exhibit so the Baxter page keeps its bordered .gsp-exhibit. */
.gsp-exhibit.mi-exhibit { border: 0; }