/* =============================================================================
   AgenticRail — shared stylesheet (light/earthed storefront system)
   Source of truth: ai-in-health-accountability/index.html (locked template)
   Direction: warm muka cream · Pā Kōwhai gold · breathing kōwhaiwhai · gold ekg · pare divider
   Loaded at site root as /styles.css. Asset URLs are absolute (/assets/…).
   Engine-room surfaces (dashboard, demo, receipt viewer) stay DARK — not this file.
   ============================================================================= */

/* ---- Design tokens -------------------------------------------------------- */
:root {
  --bg:#f6f1e7;            /* muka cream page */
  --surface:#fbf7ee;       /* raised panels */
  --text:#2b2620;
  --text-strong:#161210;
  --muted:#6b6358;
  --accent:#8f6300;        /* deep kōwhai gold — text-safe: labels, borders, th, h3 */
  --accent-bright:#d99a07; /* kōwhai bloom — ekg */
  --border:#e7ddc9;
  --link:#005dbb;          /* links stay blue = affordance, gold = brand */
  --gap:#6f5f3a;           /* calm earthy gap panel, NOT red alarm */
  --gap-bg:#f2ebdc;
  --success:#8a6500;       /* instrument/receipt blocks, gold-toned */
  --mech-bg:#f7efd9;
  --head-font:'Public Sans',sans-serif;  /* heading/wordmark face (Fraunces A/B deferred) */
}

/* ---- Reset + base --------------------------------------------------------- */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:17px; scroll-behavior:smooth; }
body { background:var(--bg); color:var(--text); font-family:'Public Sans',system-ui,-apple-system,'Segoe UI',sans-serif; min-height:100vh; -webkit-font-smoothing:antialiased; }

/* ---- Owned whakairo texture / motion -------------------------------------- */
/* kōwhaiwhai/puhoro tile (kk-gold.svg = kk.svg recoloured lime→gold), breathing bg */
#bg-kk { position:fixed; inset:0; background-image:url('/assets/kk-gold.svg'); background-repeat:repeat; background-size:200px auto; background-position:center top; pointer-events:none; z-index:0; opacity:0.07; animation:kk-breathe 12s ease-in-out infinite; }
@keyframes kk-breathe { 0%,100% { opacity:0.05; } 50% { opacity:0.10; } }

/* gold ekg heartbeat — JS draws into this canvas (see /site-ekg.js or per-page inline) */
#ekg-canvas { position:fixed; top:0; left:0; width:100vw; height:52px; pointer-events:none; z-index:50; }

/* pare (carved lintel) section divider */
.pare-band { width:100%; height:34px; background-image:url('/assets/pare.svg'); background-size:cover; background-position:center; opacity:0.18; filter:sepia(0.7) saturate(1.5) brightness(0.7); margin:44px 0; }

@media (prefers-reduced-motion: reduce) { #bg-kk { animation:none; } }

/* ---- Layout --------------------------------------------------------------- */
.wrap { max-width:880px; margin:0 auto; padding:0 24px; position:relative; z-index:1; }
article { padding:48px 0 80px; max-width:720px; }

/* ---- Nav ------------------------------------------------------------------ */
nav { display:flex; align-items:center; justify-content:space-between; padding:24px 0; border-bottom:1px solid var(--border); }
.logo { font-family:var(--head-font); font-weight:800; font-size:1.3rem; letter-spacing:-0.02em; color:var(--text-strong); text-decoration:none; flex-shrink:0; }
.logo span { color:var(--accent); }
nav a { color:var(--muted); text-decoration:none; font-size:0.82rem; letter-spacing:0.01em; }
nav a:hover { color:var(--text-strong); }

/* ---- Breadcrumb ----------------------------------------------------------
   Two-levels-deep pages only. A one-level page has the logo as its way back,
   so a trail there is noise; the hierarchy still reaches machines through the
   BreadcrumbList schema, which every page carries whether or not it shows one.
   Added to the shared sheet 2026-08-06: 17 pages carried their own inline copy
   and /blog/bots/ had none, so its trail rendered unstyled. Inline copies come
   after this file in the cascade and still win, so nothing else changes. */
.breadcrumb { font-size:0.68rem; color:var(--muted); padding:20px 0 0; letter-spacing:0.04em; }
.breadcrumb a { color:var(--muted); text-decoration:none; }
.breadcrumb a:hover { color:var(--accent); }
.breadcrumb span { color:var(--border); margin:0 6px; }
.nav-links { display:flex; gap:24px; align-items:center; }

/* ---- Typography ----------------------------------------------------------- */
h1 { font-family:var(--head-font); font-weight:700; font-size:clamp(1.7rem,3.4vw,2.3rem); letter-spacing:-0.02em; line-height:1.15; margin-bottom:14px; color:var(--text-strong); }
h2 { font-family:var(--head-font); font-weight:700; font-size:1.3rem; letter-spacing:-0.01em; margin:48px 0 16px; color:var(--text-strong); border-bottom:1px solid var(--border); padding-bottom:10px; }
h3 { font-family:var(--head-font); font-weight:600; font-size:0.8rem; margin:26px 0 8px; color:var(--accent); letter-spacing:0.06em; text-transform:uppercase; }
.subtitle { font-size:1.02rem; color:var(--muted); margin-bottom:44px; line-height:1.65; border-left:4px solid var(--accent); padding-left:18px; }
p { font-size:1.02rem; line-height:1.7; color:var(--text); margin-bottom:16px; }
p strong { color:var(--text-strong); font-weight:600; }
a { color:var(--link); text-decoration:underline; text-underline-offset:2px; }
a:hover { color:#003e8a; }

/* ---- Code / data (Plex Mono = proof) -------------------------------------- */
code { font-family:'IBM Plex Mono',monospace; font-size:0.86rem; color:#7d5800; background:var(--surface); padding:2px 6px; border-radius:3px; }
pre { background:var(--surface); border:1px solid var(--border); border-radius:4px; padding:18px 22px; margin:16px 0; overflow-x:auto; font-size:0.84rem; line-height:1.7; color:#333; }

/* ---- Components: document meta ------------------------------------------- */
.doc-meta { border:1px solid var(--border); border-left:4px solid var(--accent); border-radius:4px; padding:22px 26px; margin-bottom:44px; font-size:0.9rem; line-height:1.9; color:var(--muted); background:var(--surface); }
.doc-meta strong { color:var(--text-strong); display:inline-block; width:140px; font-weight:600; }
.doc-meta .accent { color:var(--accent); font-weight:600; }

/* ---- Components: gap (problem) panel — earthy, not alarm ------------------ */
.gap-block { border-left:4px solid var(--gap); border-radius:4px; padding:18px 22px; margin:22px 0; background:var(--gap-bg); }
.gap-label { font-size:0.68rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--gap); margin-bottom:8px; font-weight:600; }

/* ---- Components: mechanism (instrument) panel + receipt ------------------- */
.mech-block { border-left:4px solid var(--success); border-radius:4px; padding:18px 22px; margin:22px 0; background:var(--mech-bg); }
.mech-label { font-size:0.68rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--success); margin-bottom:10px; font-weight:600; }
.receipt { font-family:'IBM Plex Mono',monospace; font-size:0.88rem; line-height:1.95; color:#2b2620; }
.receipt .k { color:var(--success); display:inline-block; min-width:150px; font-weight:500; }
.receipt .v { color:var(--text-strong); }

/* ---- Components: small uppercase badge ------------------------------------ */
.surface-badge { display:inline-block; font-size:0.58rem; letter-spacing:0.14em; text-transform:uppercase; padding:3px 8px; border:1px solid var(--border); color:var(--muted); margin-bottom:12px; }

/* ---- Components: numbered rule list --------------------------------------- */
.rule-list { list-style:none; margin:16px 0 24px; }
.rule-list li { display:flex; gap:16px; padding:10px 0; border-bottom:1px solid var(--border); font-size:1rem; line-height:1.7; color:var(--text); }
.rule-list li:last-child { border-bottom:none; }
.rule-list li strong { color:var(--text-strong); font-weight:600; }
.rule-num { color:var(--accent); font-weight:600; flex-shrink:0; width:20px; }

/* ---- Components: tables --------------------------------------------------- */
table { width:100%; border-collapse:collapse; margin:22px 0; font-size:0.94rem; }
th { text-align:left; padding:12px 14px; border-bottom:2px solid var(--accent); color:var(--accent); font-size:0.7rem; letter-spacing:0.08em; text-transform:uppercase; font-weight:700; }
td { padding:12px 14px; border-bottom:1px solid var(--border); color:var(--text); vertical-align:top; line-height:1.6; }
td strong { color:var(--text-strong); font-weight:600; }
tr:last-child td { border-bottom:none; }
tr:nth-child(even) td { background:#f3ede0; }

/* ---- Components: references block ----------------------------------------- */
.ref-block { background:var(--surface); border:1px solid var(--border); border-radius:4px; padding:22px 26px; margin:32px 0 0; font-size:0.92rem; line-height:1.95; color:var(--muted); }
.ref-block strong { color:var(--text-strong); font-weight:600; }

/* ---- Components: document fingerprint ------------------------------------- */
.fingerprint-block { background:var(--mech-bg); border:1px solid var(--accent); border-radius:4px; padding:28px 32px; margin:48px 0 0; }
.fingerprint-label { font-size:0.68rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--accent); margin-bottom:16px; font-weight:700; }
.fingerprint-hash { font-family:'IBM Plex Mono',monospace; font-size:0.82rem; color:var(--text-strong); word-break:break-all; line-height:1.8; margin-bottom:16px; }
.fingerprint-meta { font-size:0.84rem; color:var(--muted); line-height:1.8; }

/* ---- Footer --------------------------------------------------------------- */
footer { border-top:1px solid var(--border); padding:32px 0; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; }
.footer-left { font-size:0.82rem; color:var(--muted); }
.footer-right { display:flex; gap:24px; }
.footer-right a { font-size:0.82rem; color:var(--muted); text-decoration:underline; text-underline-offset:3px; }
.footer-right a:hover { color:var(--text-strong); }

/* ---- Print ---------------------------------------------------------------- */
@media print {
  body { background:#fff; color:#000; }
  nav, footer { display:none; }
  a { color:#000; }
}