/* healthcare-ai-page.css — page-specific styling for /healthcare/ai only (2026-09-13 redesign).
 * Deliberately a separate file, like healthcare-mockup.css and healthcare-lightbox.css before it,
 * so this page can change without touching any other healthcare page. Every color, spacing and
 * font token below reuses the variables already declared in healthcare-style.css (--hc-primary,
 * --hc-ink, --hc-dim, --hc-edge, --hc-bg-soft, --hc-sans, --hc-mono) rather than inventing a parallel
 * set — the point of this redesign is a more visual /healthcare/ai, not a separate microsite with
 * its own visual language.
 *
 * SVG note: every diagram below is styled through the CSS classes at the bottom of this file, never
 * through fill="var(...)" / stroke="var(...)" presentation attributes — those do not reliably resolve
 * CSS custom properties in every browser. Style new diagram elements by adding/reusing a class here.
 */

/* ---------- hero: three-fact strip + posture index ---------- */
.hc-ai-hero { display: grid; grid-template-columns: 68fr 32fr; gap: 40px; align-items: start; margin-top: 8px; }
@media (max-width: 900px) { .hc-ai-hero { grid-template-columns: 1fr; gap: 24px; } }

.hc-ai-facts { display: flex; flex-wrap: wrap; border-top: 1px solid var(--hc-edge); border-bottom: 1px solid var(--hc-edge); margin-top: 22px; }
.hc-ai-facts span {
  font-family: var(--hc-mono); font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--hc-dim); padding: 12px 18px 12px 0; margin-right: 18px; border-right: 1px solid var(--hc-edge);
}
.hc-ai-facts span:last-child { border-right: 0; margin-right: 0; }

.hc-ai-posture { border: 1px solid var(--hc-edge); border-radius: 12px; overflow: hidden; }
.hc-ai-posture div { padding: 13px 16px; border-bottom: 1px solid var(--hc-edge); font-size: 13.5px; color: var(--hc-ink-soft); }
.hc-ai-posture div:last-child { border-bottom: 0; }
.hc-ai-posture .k { font-family: var(--hc-mono); font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--hc-dim); display: block; margin-bottom: 3px; }

/* ---------- the constitutional rule panel ---------- */
.hc-ai-rule {
  background: var(--hc-bg-soft); border: 1px solid var(--hc-edge); border-left: 3px solid var(--hc-primary);
  border-radius: 12px; padding: 24px 28px; max-width: 74ch;
}
.hc-ai-rule p:first-child { font-size: 18px; font-weight: 650; line-height: 1.45; margin: 0 0 12px; color: var(--hc-ink); }
.hc-ai-rule p:last-child { margin-bottom: 0; }
.hc-ai-rule p { color: var(--hc-ink-soft); }

/* ---------- Meet Blue: two matched cards (reuses .hc-grid's 2-up rhythm, fixed at 2) ---------- */
.hc-ai-cards2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; }
@media (max-width: 640px) { .hc-ai-cards2 { grid-template-columns: 1fr; } }

/* ---------- diagram + mockup scroll safety: legible at 375px without page-level overflow ---------- */
.hc-mock-scroll { overflow-x: auto; }
.hc-mock-scroll svg { min-width: 560px; display: block; }

/* ---------- the never-list: twelve drawn tiles ---------- */
.hc-ai-nevers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 22px; }
@media (max-width: 900px) { .hc-ai-nevers { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .hc-ai-nevers { grid-template-columns: 1fr; } }
.hc-ai-nv { border: 1px solid var(--hc-edge); border-radius: 12px; padding: 17px 18px; background: var(--hc-card); }
.hc-ai-nv .ix { font-family: var(--hc-mono); font-size: 10px; letter-spacing: 1.6px; color: var(--hc-dim); display: block; margin-bottom: 7px; }
.hc-ai-nv b { display: block; font-weight: 700; margin-bottom: 3px; font-size: 14.5px; color: var(--hc-ink); }
.hc-ai-nv span.d { font-size: 13.5px; color: var(--hc-ink-soft); line-height: 1.55; }

/* ---------- evidence bar ---------- */
.hc-ai-band { background: var(--hc-bg-soft); border-top: 1px solid var(--hc-edge); border-bottom: 1px solid var(--hc-edge); margin: 64px 0 0; padding: 48px 48px 52px; }
@media (max-width: 760px) { .hc-ai-band { padding: 40px 20px 44px; } }
.hc-ai-ev { display: grid; grid-template-columns: auto 1fr; gap: 32px; align-items: baseline; max-width: 980px; margin: 0 auto; }
@media (max-width: 640px) { .hc-ai-ev { grid-template-columns: 1fr; gap: 10px; } }
.hc-ai-ev .n { font-size: clamp(48px, 6vw, 76px); font-weight: 800; letter-spacing: -0.03em; line-height: 0.92; color: var(--hc-primary); font-variant-numeric: tabular-nums; }
.hc-ai-ev-bar { display: flex; height: 30px; border: 1px solid var(--hc-primary); border-radius: 6px; overflow: hidden; margin-top: 22px; max-width: 980px; }
.hc-ai-ev-bar .f { width: 44%; background: var(--hc-primary); }
.hc-ai-ev-bar .u { width: 56%; background: transparent; border-left: 1px solid var(--hc-primary); }
.hc-ai-ev-lab { display: flex; justify-content: space-between; font-family: var(--hc-mono); font-size: 10.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--hc-dim); margin-top: 8px; gap: 10px; max-width: 980px; }
.hc-ai-ev-lab b { color: var(--hc-primary); }
.hc-ai-band-prose { max-width: 74ch; margin: 26px auto 0; font-size: 15px; line-height: 1.7; color: var(--hc-ink-soft); }

/* ---------- build list, grouped by kind ---------- */
.hc-ai-grp { border-top: 1px solid var(--hc-edge); padding-top: 18px; margin-top: 26px; }
.hc-ai-grp .k { font-family: var(--hc-mono); font-size: 10.5px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--hc-primary); margin-bottom: 13px; }
.hc-ai-items { display: grid; grid-template-columns: repeat(2, 1fr); gap: 13px 26px; }
@media (max-width: 640px) { .hc-ai-items { grid-template-columns: 1fr; } }
.hc-ai-it { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start; }
.hc-ai-it .n { font-family: var(--hc-mono); font-size: 11px; font-weight: 700; color: var(--hc-dim); padding-top: 3px; }
.hc-ai-it b { font-weight: 650; color: var(--hc-ink); }
.hc-ai-it span.dsc { display: block; font-size: 13.5px; color: var(--hc-ink-soft); margin-top: 1px; line-height: 1.55; }
.hc-ai-tag {
  display: inline-block; font-family: var(--hc-mono); font-size: 9.5px; letter-spacing: 1px; text-transform: uppercase;
  border: 1px solid var(--hc-edge); border-radius: 3px; padding: 1px 6px; color: var(--hc-dim); margin-left: 6px;
  white-space: nowrap; vertical-align: 2px;
}

/* ---------- where Blue runs (three cards) + no-fallback rule ---------- */
.hc-ai-three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 20px; }
@media (max-width: 640px) { .hc-ai-three { grid-template-columns: 1fr; } }
.hc-ai-nofb {
  border: 1px solid var(--hc-ink); border-radius: 12px; padding: 16px 20px; margin-top: 16px; font-weight: 650;
  background: var(--hc-card); color: var(--hc-ink);
}
.hc-ai-nofb span { display: block; font-weight: 400; color: var(--hc-ink-soft); font-size: 14px; margin-top: 4px; }

/* ---------- patient record note ---------- */
.hc-ai-note { background: var(--hc-bg-soft); border: 1px solid var(--hc-edge); border-radius: 12px; padding: 22px 24px; max-width: 74ch; }
.hc-ai-note .k { font-family: var(--hc-mono); font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--hc-dim); margin-bottom: 10px; }
.hc-ai-note q { font-size: 16.5px; line-height: 1.55; display: block; quotes: none; color: var(--hc-ink); }

/* ---------- shared diagram SVG classes (fills/strokes via class, never inline var()) ---------- */
svg.hc-ai-dia text { font-family: var(--hc-sans); fill: var(--hc-ink); }
svg.hc-ai-dia .mono { font-family: var(--hc-mono); }
svg.hc-ai-dia .m { fill: var(--hc-ink-soft); }
svg.hc-ai-dia .faint { fill: var(--hc-dim); }
svg.hc-ai-dia .box { fill: var(--hc-card); stroke: var(--hc-edge); }
svg.hc-ai-dia .cand { fill: none; stroke: var(--hc-primary); stroke-width: 1.1; }
svg.hc-ai-dia .gate { fill: none; stroke: var(--hc-ink); stroke-width: 2; }
svg.hc-ai-dia .doc { fill: var(--hc-bg-soft); stroke: var(--hc-ink); stroke-width: 1.4; }
svg.hc-ai-dia .arrow { stroke: var(--hc-dim); stroke-width: 1.2; fill: none; }
svg.hc-ai-dia .pri { fill: var(--hc-primary); }
svg.hc-ai-dia .pri-stroke { stroke: var(--hc-primary); }
svg.hc-ai-dia .ink-fill { fill: var(--hc-ink); }
svg.hc-ai-dia .ink-stroke { stroke: var(--hc-ink); }
svg.hc-ai-dia .bg-fill { fill: var(--hc-bg-soft); }
svg.hc-ai-dia .accept-fill { fill: #EEFBF3; }
svg.hc-ai-dia .accept-stroke { stroke: #0B5A2E; }
svg.hc-ai-dia .accept-text { fill: #0B5A2E; }
svg.hc-ai-dia .reject-fill { fill: #FDF1F1; }
svg.hc-ai-dia .reject-stroke { stroke: #7A2C2C; }
svg.hc-ai-dia .reject-text { fill: #7A2C2C; }
svg.hc-ai-dia .undecided-fill { fill: #F3F4F6; }
svg.hc-ai-dia .undecided-stroke { stroke: #4A4E58; }
svg.hc-ai-dia .undecided-text { fill: #4A4E58; }