/* Case-study color (flagship case studies only).
   Each flagship page sets data-accent on <main>: State lilac, Tastemake pink,
   Project Health cyan. Color sits in backgrounds, borders and chips; running
   text stays ink/muted on white. Loaded last so it can override the calmer
   shared reading-page styles in site-components.css. */

html body main.case-system-page[data-accent] {
  --cc-ink: #15111a;
  --cc-rose: #ffe3ef;
  --cc-rose-ink: #8f1d53;
  --cc-lilac: #cfc7ff;
  --cc-cyan: #8fe9f4;
  --cc-acid: #f4ff52;
}
html body main.case-system-page[data-accent="state"] { --cc-accent: #cfc7ff; --cc-tint: #f5f2ff; --cc-strong: #6b5cff; }
html body main.case-system-page[data-accent="tastemake"] { --cc-accent: #ffb3d6; --cc-tint: #fff0f6; --cc-strong: #f0408f; }
html body main.case-system-page[data-accent="project-health"] { --cc-accent: #8fe9f4; --cc-tint: #ecfbfd; --cc-strong: #00bfd6; }

/* ---------- Hero ---------- */
/* Title bar in the project's accent */
html body main.case-system-page[data-accent] h1:not(.edge-body h1)::after {
  background: linear-gradient(90deg, var(--cc-strong), var(--cc-accent));
}

/* Full-width tinted band behind breadcrumb, title and the prototype card.
   Drawn by the callout's ::before at z-index -1 so it sits under all hero text. */
html body main.case-system-page[data-accent] aside.meridian-product-callout.meridian-product-callout {
  position: relative;
  margin-top: 22px;
  margin-bottom: 44px;
  padding: 18px 22px;
  border: 1.5px solid var(--cc-ink);
  border-radius: 16px;
  background: #fff;
  box-shadow: 4px 4px 0 var(--cc-ink);
}
html body main.case-system-page[data-accent] aside.meridian-product-callout.meridian-product-callout::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -2000px;
  bottom: -30px;
  left: 0;
  right: 0;
  background: var(--cc-tint);
  /* spread paints the full width as ink overflow, so no horizontal scroll */
  box-shadow: 0 0 0 100vw var(--cc-tint);
  clip-path: inset(0 -100vw);
  pointer-events: none;
}
/* "Live prototype" label as an accent chip */
html body main.case-system-page[data-accent] aside.meridian-product-callout > div > span:first-child {
  display: inline-block;
  margin-bottom: 8px;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--cc-accent);
  color: var(--cc-ink);
  font-size: 11px;
  letter-spacing: 0.08em;
}

/* ---------- Section labels as chips ---------- */
html body main.case-system-page[data-accent] .section > .kicker {
  display: inline-block;
  margin: 0 0 14px;
  padding: 5px 10px;
  border: 1.5px solid var(--cc-ink);
  border-radius: 8px;
  background: var(--cc-accent);
  box-shadow: 3px 3px 0 var(--cc-ink);
  color: var(--cc-ink) !important;
  line-height: 1.3;
}

/* ---------- Sticky-note callout (one per page) ---------- */
html body main.case-system-page[data-accent="state"] .seam-learning > h2,
html body main.case-system-page[data-accent="tastemake"] .seam-learning > p:has(> .lead-in),
html body main.case-system-page[data-accent="project-health"] .section > p:has(+ table.ph-changes) {
  max-width: 720px;
  margin: 8px 0 26px !important;
  padding: 22px 26px;
  border: 2px solid var(--cc-ink);
  border-radius: 6px;
  background: var(--cc-acid);
  box-shadow: 5px 5px 0 var(--cc-ink);
  color: var(--cc-ink);
  transform: rotate(-0.5deg);
}
html body main.case-system-page[data-accent="tastemake"] .seam-learning > p:has(> .lead-in),
html body main.case-system-page[data-accent="project-health"] .section > p:has(+ table.ph-changes) {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
}
html body main.case-system-page[data-accent="project-health"] .section > p:has(+ table.ph-changes) {
  margin-top: 22px !important;
}

/* ---------- State ---------- */
/* What AI recorded: the wrong value reads as a failure */
html body main[data-accent="state"] .uz-card.uz-recorded {
  border: 1.5px solid var(--cc-ink);
  background: var(--cc-rose);
  box-shadow: 3px 3px 0 var(--cc-ink);
}
html body main[data-accent="state"] .uz-recorded :is(.uz-label, .uz-value) { color: var(--cc-rose-ink); }
html body main[data-accent="state"] .uz-recorded .uz-meaning { color: #3b3445; }

/* Flow diagram colored by who owns each step */
html body main[data-accent="state"] .authority-map .am-steps li {
  border: 1.5px solid var(--cc-ink);
  color: var(--cc-ink);
}
html body main[data-accent="state"] .authority-map .am-steps li:nth-child(1) { background: #fff; }
html body main[data-accent="state"] .authority-map .am-steps li:nth-child(2) { background: var(--cc-lilac); }
html body main[data-accent="state"] .authority-map .am-steps li:nth-child(3) { background: var(--cc-cyan); }
html body main[data-accent="state"] .authority-map .am-steps li:nth-child(4) { background: var(--cc-acid); box-shadow: 3px 3px 0 var(--cc-ink); }
html body main[data-accent="state"] .authority-map .am-steps li:nth-child(n+2) :is(.am-owner, .am-text) { color: var(--cc-ink); }
html body main[data-accent="state"] .authority-map .am-steps li:nth-child(1) .am-owner { color: #5f5968; }
html body main[data-accent="state"] .authority-map .am-steps li + li::before { color: var(--cc-ink); font-weight: 800; }
html body main[data-accent="state"] .authority-map .am-outcomes li:first-child {
  border: 1.5px solid var(--cc-ink);
  border-top-width: 5px;
}
html body main[data-accent="state"] .authority-map .am-ask { background: var(--cc-lilac); }

/* QA table: what Ask said, tinted as the failure */
html body main[data-accent="state"] .ask-mismatch tbody td:last-child {
  padding-left: 12px;
  background: var(--cc-rose);
  color: var(--cc-rose-ink);
}

/* ---------- Tastemake ---------- */
/* Enforced today (solid) vs. not yet controlled (dashed) */
html body main[data-accent="tastemake"] .correction-split .split-yes {
  border: 1.5px solid var(--cc-ink);
  background: var(--cc-tint);
  box-shadow: 3px 3px 0 var(--cc-ink);
}
html body main[data-accent="tastemake"] .correction-split .split-not {
  border: 1.5px dashed var(--cc-ink);
  background: #fff;
}
html body main[data-accent="tastemake"] .correction-split .split-text { color: #3b3445; }
/* Two tests: the quality result reads as the drop */
html body main[data-accent="tastemake"] .test-compare {
  border: 1.5px solid var(--cc-ink);
  box-shadow: 4px 4px 0 var(--cc-ink);
}
html body main[data-accent="tastemake"] .test-compare .example-label {
  display: inline-block;
  width: fit-content;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--cc-accent);
  color: var(--cc-ink);
}
html body main[data-accent="tastemake"] .test-metric + .test-metric .metric-value { color: #a3134f; }

/* ---------- Project Health ---------- */
/* the shared grid-card rule uses !important, so these must too */
html body main[data-accent="project-health"] .grid2 > .card {
  padding: 18px 20px !important;
  border: 1.5px solid var(--cc-ink) !important;
  border-radius: 14px;
  background: var(--cc-tint) !important;
  box-shadow: 3px 3px 0 var(--cc-ink) !important;
}
html body main[data-accent="project-health"] .ph-example {
  border: 1.5px solid var(--cc-ink);
  box-shadow: 4px 4px 0 var(--cc-ink);
}
html body main[data-accent="project-health"] .ph-example .example-label {
  display: inline-block;
  width: fit-content;
  margin-bottom: 4px;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--cc-accent);
  color: var(--cc-ink);
}
html body main[data-accent="project-health"] .ph-changes td { padding: 10px 14px; }
html body main[data-accent="project-health"] .ph-changes td[data-label="Before"] { background: var(--cc-rose); }
html body main[data-accent="project-health"] .ph-changes td[data-label="After"] { background: var(--cc-tint); }
html body main[data-accent="project-health"] .ph-changes thead th { color: var(--cc-ink); }

@media (max-width: 760px) {
  html body main.case-system-page[data-accent] aside.meridian-product-callout.meridian-product-callout { padding: 16px; }
  html body main.case-system-page[data-accent="state"] .seam-learning > h2,
  html body main.case-system-page[data-accent="tastemake"] .seam-learning > p:has(> .lead-in),
  html body main.case-system-page[data-accent="project-health"] .section > p:has(+ table.ph-changes) {
    padding: 18px 18px;
    transform: none;
  }
  html body main[data-accent="project-health"] .ph-changes td { padding: 10px 12px; margin-bottom: 6px; border-radius: 10px; }
}
html body main[data-accent="project-health"] .grid2 > .card > h3:first-child { margin-top: 0; }

/* ---------- State: testing findings as separate numbered cards ---------- */
html body main[data-accent="state"] .testing-showed { counter-reset: finding; }
html body main[data-accent="state"] .testing-showed .test-finding {
  counter-increment: finding;
  max-width: 820px;
  margin: 18px 0 0;
  padding: 20px 22px 6px;
  border: 1px solid #e8e7ef;
  border-radius: 16px;
  background: #fff;
}
html body main[data-accent="state"] .testing-showed .test-finding > h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
}
html body main[data-accent="state"] .testing-showed .test-finding > h3::before {
  content: counter(finding);
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1.5px solid var(--cc-ink);
  border-radius: 50%;
  background: var(--cc-accent);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0;
}
html body main[data-accent="state"] .testing-showed .test-finding .ask-mismatch { margin: 14px 0; }

/* ---------- Tastemake: direction cues on the two test results ---------- */
html body main[data-accent="tastemake"] .test-metric h3::before {
  display: inline-block;
  margin-right: 6px;
  font-weight: 900;
}
html body main[data-accent="tastemake"] .test-metric:first-child h3::before { content: "↑" / ""; }
html body main[data-accent="tastemake"] .test-metric + .test-metric h3::before { content: "↓" / ""; color: #a3134f; }

/* ---------- Project Health: Healthy-without-evidence vs Incomplete ---------- */
html body main[data-accent="project-health"] .ph-status-compare { max-width: 820px; margin: 22px 0 6px; }
html body main[data-accent="project-health"] .ph-status-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}
html body main[data-accent="project-health"] .ph-status {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 16px 18px;
  border-radius: 14px;
  background: #fff;
}
html body main[data-accent="project-health"] .ph-status-before {
  border: 1.5px solid var(--cc-ink);
  background: var(--cc-rose);
  box-shadow: 3px 3px 0 var(--cc-ink);
}
html body main[data-accent="project-health"] .ph-status-after {
  border: 1.5px solid var(--cc-ink);
  background: var(--cc-tint);
  box-shadow: 3px 3px 0 var(--cc-ink);
}
html body main[data-accent="project-health"] .ph-status-when {
  color: #3b3445;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
html body main[data-accent="project-health"] .ph-status-pill {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
}
html body main[data-accent="project-health"] .ph-pill-healthy { background: #d6f5e3; color: #0b6b3c; border: 1px solid #0b6b3c; }
html body main[data-accent="project-health"] .ph-pill-incomplete { background: #fff4d6; color: #7a4a00; border: 1px solid #7a4a00; }
html body main[data-accent="project-health"] .ph-status-line { color: var(--cc-ink); font-size: 15.5px; line-height: 1.35; }
html body main[data-accent="project-health"] .ph-status-detail { color: #3b3445; font-size: 13.5px; }
html body main[data-accent="project-health"] .ph-status-retry {
  padding: 5px 14px;
  border: 1.5px solid var(--cc-ink);
  border-radius: 8px;
  background: #fff;
  color: var(--cc-ink);
  font-size: 13px;
  font-weight: 800;
}
html body main[data-accent="project-health"] .ph-status-arrow { align-self: center; color: var(--cc-ink); font-size: 20px; font-weight: 800; }
html body main[data-accent="project-health"] .ph-status-compare figcaption { margin-top: 12px; color: #5f5968; font-size: 13px; line-height: 1.5; }
@media (max-width: 640px) {
  html body main[data-accent="project-health"] .ph-status-pair { grid-template-columns: 1fr; gap: 8px; }
  html body main[data-accent="project-health"] .ph-status-arrow { justify-self: start; margin-left: 18px; transform: rotate(90deg); }
  html body main[data-accent="state"] .testing-showed .test-finding { padding: 16px 16px 4px; }
}