/* =============================================================
   gsp.css — Baxter GSP case study exhibits
   Scoped entirely to .gsp-* so it can be loaded on every page
   (same pattern as rosie.css; soft-nav swaps only .page-grid).
   All colors/spacing reuse tokens from styles.css.
   ============================================================= */

/* ---------- shared ---------- */
.gsp-exhibit {
  grid-column: 1 / -1;
  margin-top: var(--space-6);
  border: 1px solid rgba(247,248,248,0.10);
  border-radius: 4px;
  padding: var(--space-4);
  background: rgba(247,248,248,0.02);
}
.gsp-exhibit__title {
  font-size: var(--fs-200);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--fg-tertiary);
  font-weight: 500;
  margin-bottom: var(--space-4);
}
.gsp-exhibit__foot {
  margin-top: var(--space-3);
  font-size: var(--fs-100);
  line-height: 1.5;
  color: var(--fg-tertiary);
  max-width: 64ch;
}
.gsp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- 2026 addendum banner ---------- */
.gsp-addendum {
  grid-column: 1 / -1;
  margin-top: var(--space-6);
  padding: var(--space-3) var(--space-4);
  border-left: 2px solid var(--fg);
  font-size: var(--fs-200);
  line-height: 1.5;
  color: var(--fg-secondary);
  max-width: 60ch;
}
.gsp-addendum strong { color: var(--fg); font-weight: 500; }

/* ---------- workflow flow (current vs future) ---------- */
.gsp-flow { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
@media (min-width: 960px) { .gsp-flow { grid-template-columns: 1fr 1fr; } }
.gsp-flow__lane { min-width: 0; }
.gsp-flow__lane-title {
  font-size: var(--fs-300);
  color: var(--fg);
  font-weight: 500;
  margin-bottom: var(--space-3);
}
.gsp-flow__lane-title span { color: var(--fg-tertiary); font-weight: 400; }
.gsp-flow__steps { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.375rem; }
.gsp-flow__step {
  display: grid;
  grid-template-columns: 1.5rem 1fr auto;
  gap: var(--space-2);
  align-items: baseline;
  padding: 0.625rem 0.75rem;
  border: 1px solid rgba(247,248,248,0.10);
  border-radius: 4px;
  font-size: var(--fs-200);
  color: var(--fg-secondary);
  line-height: 1.35;
}
.gsp-flow__step--hot { border-color: rgba(247,248,248,0.35); color: var(--fg); }
.gsp-flow__step--merged { border-style: dashed; }
.gsp-flow__idx { color: var(--fg-tertiary); font-variant-numeric: tabular-nums; }
.gsp-flow__time { color: var(--fg-tertiary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gsp-flow__step--hot .gsp-flow__time { color: var(--fg); }
.gsp-flow__delta { color: var(--fg); }

/* ---------- theme grid ---------- */
.gsp-themes { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr; gap: 0.375rem; counter-reset: th; }
@media (min-width: 720px) { .gsp-themes { grid-template-columns: 1fr 1fr; } }
.gsp-theme {
  counter-increment: th;
  display: grid; grid-template-columns: 1.75rem 1fr; gap: var(--space-2);
  padding: 0.625rem 0.75rem;
  border: 1px solid rgba(247,248,248,0.08);
  border-radius: 4px;
  font-size: var(--fs-200); line-height: 1.35; color: var(--fg-tertiary);
}
.gsp-theme::before { content: counter(th, decimal-leading-zero); color: var(--fg-quaternary); font-variant-numeric: tabular-nums; }
.gsp-theme--priority { color: var(--fg); border-color: rgba(247,248,248,0.30); }
.gsp-theme--priority::before { color: var(--fg-tertiary); }
.gsp-theme small { display: block; color: var(--fg-tertiary); font-size: var(--fs-100); margin-top: 0.25rem; }

/* ---------- data table ---------- */
.gsp-table { width: 100%; border-collapse: collapse; font-size: var(--fs-200); line-height: 1.35; min-width: 640px; }
.gsp-table th, .gsp-table td { text-align: left; padding: 0.625rem 0.75rem; border-bottom: 1px solid rgba(247,248,248,0.10); vertical-align: top; }
.gsp-table th { color: var(--fg-tertiary); font-weight: 500; font-size: var(--fs-100); letter-spacing: var(--tr-label); text-transform: uppercase; }
.gsp-table td { color: var(--fg-secondary); font-variant-numeric: tabular-nums; }
.gsp-table td:first-child { color: var(--fg); }
.gsp-table tr.is-hot td { color: var(--fg); background: rgba(247,248,248,0.04); }
.gsp-table td.num { text-align: right; }
.gsp-table th.num { text-align: right; }

/* ---------- autonomy matrix ---------- */
.gsp-matrix { width: 100%; border-collapse: collapse; font-size: var(--fs-200); line-height: 1.35; min-width: 760px; }
.gsp-matrix th, .gsp-matrix td { padding: 0.75rem 0.75rem; border-bottom: 1px solid rgba(247,248,248,0.10); vertical-align: top; }
.gsp-matrix th { text-align: left; color: var(--fg-tertiary); font-weight: 500; font-size: var(--fs-100); letter-spacing: var(--tr-label); text-transform: uppercase; }
.gsp-matrix th.lvl { text-align: center; width: 5.5rem; }
.gsp-matrix td.step { color: var(--fg); font-weight: 500; width: 14rem; }
.gsp-matrix td.step small { display: block; color: var(--fg-tertiary); font-weight: 400; font-size: var(--fs-100); margin-top: 0.2rem; }
.gsp-matrix td.lvl { text-align: center; color: var(--fg-quaternary); }
.gsp-matrix td.lvl::before { content: ""; display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 50%; border: 1px solid currentColor; }
.gsp-matrix td.lvl.on { color: var(--fg); }
.gsp-matrix td.lvl.on::before { background: currentColor; width: 0.75rem; height: 0.75rem; }
.gsp-matrix td.why { color: var(--fg-secondary); }
.gsp-matrix td.why em { color: var(--fg); font-style: normal; }

/* ---------- escalation ladder ---------- */
.gsp-ladder { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr; gap: 0.375rem; }
@media (min-width: 960px) { .gsp-ladder { grid-template-columns: repeat(4, 1fr); } }
.gsp-ladder__rung { padding: var(--space-3); border: 1px solid rgba(247,248,248,0.10); border-radius: 4px; position: relative; }
.gsp-ladder__lvl { font-size: var(--fs-100); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-tertiary); font-weight: 500; margin-bottom: var(--space-2); }
.gsp-ladder__who { font-size: var(--fs-300); color: var(--fg); font-weight: 500; margin-bottom: var(--space-1); }
.gsp-ladder__when { font-size: var(--fs-200); line-height: 1.45; color: var(--fg-secondary); }
.gsp-ladder__when strong { color: var(--fg); font-weight: 500; }

/* ---------- before / after metric pairs ---------- */
.gsp-metrics { display: grid; grid-template-columns: 1fr; gap: var(--space-4) var(--gutter); }
@media (min-width: 720px) { .gsp-metrics { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1200px) { .gsp-metrics { grid-template-columns: repeat(4, 1fr); } }
.gsp-metric__label { font-size: var(--fs-100); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-tertiary); font-weight: 500; margin-bottom: var(--space-2); }
.gsp-metric__row { display: flex; align-items: baseline; gap: var(--space-2); }
.gsp-metric__from { font-size: var(--fs-500); color: var(--fg-tertiary); text-decoration: line-through; text-decoration-color: rgba(247,248,248,0.25); font-variant-numeric: tabular-nums; }
.gsp-metric__to { font-size: var(--fs-600); color: var(--fg); letter-spacing: var(--tr-display); font-weight: 500; font-variant-numeric: tabular-nums; }
.gsp-metric__how { font-size: var(--fs-100); line-height: 1.5; color: var(--fg-tertiary); margin-top: var(--space-2); }

/* ---------- behavior model principles ---------- */
.gsp-rules { list-style: none; padding: 0; margin: 0; counter-reset: rule; }
.gsp-rule { counter-increment: rule; display: grid; grid-template-columns: 2.25rem 1fr; gap: var(--space-2); padding: var(--space-3) 0; border-bottom: 1px solid rgba(247,248,248,0.10); }
.gsp-rule:last-child { border-bottom: 0; }
.gsp-rule::before { content: counter(rule, decimal-leading-zero); color: var(--fg-tertiary); font-variant-numeric: tabular-nums; font-size: var(--fs-200); padding-top: 0.15rem; }
.gsp-rule__head { font-size: var(--fs-300); color: var(--fg); font-weight: 500; margin-bottom: 0.25rem; }
.gsp-rule__body { font-size: var(--fs-200); line-height: 1.5; color: var(--fg-secondary); max-width: 60ch; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) { .gsp-exhibit * { transition: none !important; } }