/* agenticgovernance.net. Same family as agenticdevelopment.ai, agentmessaging.ai
   and dev.agentmesh.ai: Space Grotesk display, IBM Plex body and mono, the left
   rail. This site's accent is indigo. Light by default, dark on the toggle.

   Every text colour is measured, never eyeballed. The numbers beside each token
   are WCAG contrast ratios. Body text (--text, --text-2) clears 7:1 on every
   ground it sits on; small labels (--text-3 and the tier colours) clear 4.5:1.
   tools/contrast-gate.mjs measures the rendered pages and fails below either floor.
   Never fade text with opacity or an rgba() colour. */

/* ── Light (the default) ── */
:root{
  --bg:#FFFFFF;          /* page */
  --surface:#F4F4F0;     /* rail, cards, tables */
  --line:#D8D8D0;        /* borders only, never text */

  --text:#161B26;        /* headings and strong text  17.23 on bg, 15.63 on surface */
  --text-2:#353D4C;      /* body                      10.92 on bg,  9.90 on surface */
  --text-3:#474F5E;      /* captions and labels        8.24 on bg,  7.47 on surface */

  --accent:#2B3F9E;      /* links, current page        9.10 on bg,  8.25 on surface */
  --accent-tint:#E8ECFA; /* current-page row: --text 14.61, --accent 7.72, --text-2 9.26 */

  /* the four risk tiers: text colour and tint (label 4.5:1 floor) */
  --t1:#1F6B3A; --t1-tint:#E6F3EA;   /* 5.70 on its tint */
  --t2:#1D4FA8; --t2-tint:#E7EEFB;   /* 6.59 on its tint */
  --t3:#8A4B00; --t3-tint:#FBF0E0;   /* 6.04 on its tint */
  --t4:#A3261B; --t4-tint:#FBE9E7;   /* 6.28 on its tint */

  --disp:'Space Grotesk', sans-serif;
  --body:'IBM Plex Sans', system-ui, sans-serif;
  --wire:'IBM Plex Mono', ui-monospace, monospace;
  color-scheme:light;
}

/* ── Dark (only when the reader turns it on) ── */
:root[data-theme="dark"]{
  --bg:#10141C;
  --surface:#171D28;
  --line:#2C3445;

  --text:#E8ECF3;        /* 15.56 on bg, 14.26 on surface */
  --text-2:#C9D0DC;      /* 11.89 on bg, 10.89 on surface */
  --text-3:#AEB7C6;      /*  9.12 on bg,  8.36 on surface */

  --accent:#A9B8FF;      /*  9.65 on bg,  8.84 on surface */
  --accent-tint:#1E2747; /* --text 12.34, --accent 7.65 */

  --t1:#7FD99A; --t1-tint:#16281D;   /* 9.07 */
  --t2:#8FB8FF; --t2-tint:#172438;   /* 7.78 */
  --t3:#F2B45A; --t3-tint:#2C2416;   /* 8.35 */
  --t4:#FF9A8A; --t4-tint:#33201E;   /* 7.50 */
  color-scheme:dark;
}

*{ box-sizing:border-box; }
html,body{ margin:0; }
body{ background:var(--bg); color:var(--text); font-family:var(--body);
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-wrap:break-word; }
a{ color:var(--accent); text-underline-offset:3px; }
a:focus-visible, button:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }
h1,h2,h3,h4{ font-family:var(--disp); font-weight:700; letter-spacing:-.015em; line-height:1.18; color:var(--text); }
b, strong{ color:var(--text); font-weight:600; }
code{ font-family:var(--wire); font-size:.9em; }

/* ── shell ── */
.layout{ display:grid; grid-template-columns:280px minmax(0,1fr); min-height:100vh; }
.rail{ background:var(--surface); border-right:1px solid var(--line);
  position:sticky; top:0; align-self:start; height:100vh; overflow-y:auto;
  scrollbar-width:thin; padding:22px 18px 28px; }
.railhead{ display:flex; align-items:center; gap:10px; margin:0 0 20px; }
.brand{ display:flex; align-items:center; gap:10px; color:var(--text); text-decoration:none; min-width:0; }
.brand svg{ flex:none; }
.brand .wm{ font-family:var(--disp); font-weight:500; font-size:1.05rem; line-height:1.2; letter-spacing:-.01em; }
.brand .wm b{ font-weight:700; display:block; }
.iconbtn{ margin-left:auto; display:inline-flex; align-items:center; gap:6px; flex:none;
  font-family:var(--body); font-size:.85rem; font-weight:600; color:var(--text);
  background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:6px 10px; cursor:pointer; }
.iconbtn:hover{ border-color:var(--text-3); }
.iconbtn .to-light{ display:none; }
:root[data-theme="dark"] .iconbtn .to-dark{ display:none; }
:root[data-theme="dark"] .iconbtn .to-light{ display:inline; }
.menubtn{ display:none; }

.rail nav .grp{ font-family:var(--body); font-size:.82rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--text-3); margin:18px 10px 6px; }
.rail nav .grp:first-child{ margin-top:0; }
.rail nav a{ display:flex; align-items:baseline; gap:8px; font-size:.9375rem; line-height:1.35;
  color:var(--text-2); text-decoration:none; padding:7px 10px 7px 12px; margin:1px 0;
  border-radius:8px; border-left:3px solid transparent; }
.rail nav a .n{ font-family:var(--wire); font-size:.82rem; color:var(--text-3); min-width:1.1em; }
.rail nav a:hover{ color:var(--text); background:var(--bg); }
.rail nav a.on{ color:var(--text); font-weight:600; background:var(--accent-tint); border-left-color:var(--accent); }
.rail nav a.on .n{ color:var(--accent); }
.rail .foot{ margin-top:22px; padding:16px 10px 0; border-top:1px solid var(--line);
  font-size:.875rem; color:var(--text-3); line-height:1.55; }
.rail .foot p{ margin:0 0 10px; }
.rail .foot a{ color:var(--accent); font-weight:600; }

.main{ min-width:0; }
.wrap{ max-width:1000px; margin:0 auto; padding:0 48px; }

/* ── page head ── */
.pagehead{ padding:56px 0 34px; border-bottom:1px solid var(--line); }
.kicker{ font-size:.82rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--accent); margin:0 0 12px; }
.pagehead h1{ font-size:clamp(2rem,4.2vw,2.8rem); margin:0 0 16px; max-width:24ch; }
.lede{ color:var(--text-2); font-size:1.15rem; max-width:62ch; margin:0 0 12px; }
.adlc{ margin:18px 0 0; padding:12px 16px; border:1px solid var(--line); border-left:4px solid var(--accent);
  border-radius:10px; background:var(--surface); color:var(--text-2); font-size:.97rem; max-width:70ch; }
.adlc p{ margin:0; }

/* ── bands of prose ── */
section.band{ padding:48px 0; border-bottom:1px solid var(--line); }
section.band h2{ font-size:1.75rem; margin:0 0 14px; }
section.band h3{ font-size:1.2rem; margin:26px 0 8px; }
section.band p, section.band li{ color:var(--text-2); max-width:68ch; }
section.band ul, section.band ol{ padding-left:1.3em; }
section.band li{ margin:0 0 8px; }

/* cards in a grid */
.cards{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin:22px 0 4px; }
.cards.three{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.card{ background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:18px 20px; min-width:0; }
.card h3{ font-size:1.08rem; margin:0 0 8px; }
.card p{ margin:0 0 8px; font-size:.97rem; color:var(--text-2); }
.card p:last-child{ margin-bottom:0; }
.card ul{ margin:6px 0 0; padding-left:1.2em; font-size:.97rem; }
.card li{ margin:0 0 4px; color:var(--text-2); }
a.card{ display:block; text-decoration:none; }
a.card:hover{ border-color:var(--accent); }
a.card .go{ display:block; margin-top:10px; font-size:.9rem; font-weight:600; color:var(--accent); }
.card .label{ font-family:var(--wire); font-size:.8rem; font-weight:600; color:var(--text-3); margin:0 0 6px; display:block; }

/* the definition on the home page */
.defs{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin:24px 0 8px; }
.def{ border:1px solid var(--line); border-top:4px solid var(--accent); border-radius:12px; padding:20px 22px; background:var(--bg); }
.def h3{ margin:0 0 10px; font-size:1.25rem; }
.def p{ margin:0 0 10px; color:var(--text-2); }
.def ul{ margin:0; padding-left:1.2em; }
.def li{ color:var(--text-2); margin:0 0 6px; }

/* the framework map */
.fmap{ display:grid; gap:10px; margin:24px 0 8px; }
.fmap .layer{ border:1px solid var(--line); border-radius:10px; padding:12px 16px; background:var(--surface);
  color:var(--text); text-decoration:none; display:block; }
.fmap a.layer:hover, .fmap a.ph:hover, .fmap a.disc:hover{ border-color:var(--accent); }
.fmap .layer .num, .fmap .ph .num{ font-family:var(--wire); font-size:.8rem; font-weight:600; color:var(--accent); display:block; }
.fmap .layer b{ display:block; }
.fmap .layer span.sub{ color:var(--text-2); font-size:.95rem; }
.fmap .phases{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; }
.fmap .ph{ border:1px solid var(--line); border-top:3px solid var(--accent); border-radius:10px; padding:10px 12px;
  background:var(--bg); text-decoration:none; color:var(--text); min-width:0; }
.fmap .ph b{ display:block; font-family:var(--disp); font-size:1rem; }
.fmap .ph span.sub{ display:block; color:var(--text-2); font-size:.85rem; line-height:1.4; margin-top:4px; }
.fmap .ret{ grid-column:2 / 6; border:1.5px dashed var(--accent); border-top:0; border-radius:0 0 10px 10px;
  padding:6px 12px 8px; text-align:center; font-size:.88rem; color:var(--text-2); margin-top:-8px; }
.fmap .discs{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:8px; }
.fmap .disc{ border:1px solid var(--line); border-radius:10px; padding:10px 10px; background:var(--surface);
  text-decoration:none; color:var(--text); font-size:.9rem; font-weight:600; line-height:1.3; min-width:0; }
.fmap .cap{ font-size:.82rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-3); margin:6px 0 -2px; }

/* tier summary table, also used on the Operating Model page */
table.grid{ width:100%; border-collapse:collapse; margin:20px 0 6px; font-size:.97rem; }
table.grid th, table.grid td{ text-align:left; vertical-align:top; padding:10px 12px; border-top:1px solid var(--line); }
table.grid thead th{ font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; color:var(--text-3);
  border-top:0; border-bottom:2px solid var(--line); }
table.grid td{ color:var(--text-2); }
table.grid td:first-child, table.grid th[scope="row"]{ color:var(--text); font-weight:600; }

/* the tier badge */
.tier{ display:inline-block; font-family:var(--wire); font-size:.8rem; font-weight:600; line-height:1.3;
  padding:2px 8px; border-radius:6px; white-space:nowrap; }
.tier.t1{ color:var(--t1); background:var(--t1-tint); }
.tier.t2{ color:var(--t2); background:var(--t2-tint); }
.tier.t3{ color:var(--t3); background:var(--t3-tint); }
.tier.t4{ color:var(--t4); background:var(--t4-tint); }

/* a note set apart from the prose */
.note{ border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:10px;
  background:var(--surface); padding:14px 18px; margin:20px 0; max-width:72ch; }
.note p{ margin:0 0 8px; color:var(--text-2); }
.note p:last-child{ margin:0; }
pre.code{ background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:14px 16px;
  font-family:var(--wire); font-size:.86rem; line-height:1.6; color:var(--text); white-space:pre-wrap; overflow-wrap:anywhere; margin:16px 0; }

/* ── control objectives ── */
.objs{ display:grid; gap:18px; margin:24px 0 8px; }
.obj{ border:1px solid var(--line); border-radius:12px; background:var(--bg); padding:20px 22px 18px; scroll-margin-top:16px; }
.obj > header{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin:0 0 8px; }
.obj .oid{ font-family:var(--wire); font-weight:600; font-size:.9rem; color:var(--accent); }
.obj h3{ font-size:1.2rem; margin:0; }
.obj .stmt{ margin:0 0 14px; color:var(--text-2); max-width:none; }
.obj .facts{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 18px; margin:0 0 14px; }
.obj .facts div{ min-width:0; }
.obj dt{ font-size:.8rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-3); margin:0 0 2px; }
.obj dd{ margin:0; color:var(--text-2); font-size:.97rem; }
.obj .tiers{ list-style:none; margin:0 0 14px; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px; }
.obj .tiers li{ background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:10px 12px;
  font-size:.93rem; line-height:1.5; color:var(--text-2); margin:0; min-width:0; max-width:none; }
.obj .tiers .tier{ display:inline-block; margin:0 0 6px; }
.obj .tierhead{ font-size:.8rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-3); margin:0 0 8px; }
.obj .tierhead a{ color:var(--accent); text-transform:none; letter-spacing:0; font-weight:600; }
.obj .proof{ display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:10px 18px; margin:0;
  padding:12px 0 0; border-top:1px solid var(--line); }
.obj .proof div{ min-width:0; }

/* quick reference */
table.qref{ width:100%; border-collapse:collapse; margin:18px 0 6px; font-size:.95rem; }
table.qref th, table.qref td{ text-align:left; vertical-align:top; padding:9px 10px; border-top:1px solid var(--line); }
table.qref thead th{ font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; color:var(--text-3); border-top:0;
  border-bottom:2px solid var(--line); }
table.qref td{ color:var(--text-2); }
table.qref td a{ font-family:var(--wire); font-weight:600; white-space:nowrap; }

/* previous and next */
.pager{ display:grid; grid-template-columns:1fr 1fr; gap:14px; padding:36px 0 8px; }
.pager a{ display:block; border:1px solid var(--line); border-radius:12px; padding:14px 18px; text-decoration:none;
  background:var(--surface); color:var(--text); }
.pager a:hover{ border-color:var(--accent); }
.pager a small{ display:block; font-size:.82rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-3); }
.pager a span{ font-family:var(--disp); font-weight:700; font-size:1.05rem; }
.pager .next{ text-align:right; grid-column:2; }

footer.sitefoot{ padding:26px 0 60px; }
footer.sitefoot .wrap{ font-size:.9rem; color:var(--text-3); display:flex; gap:8px 22px; flex-wrap:wrap;
  border-top:1px solid var(--line); padding-top:20px; }
footer.sitefoot a{ color:var(--accent); font-weight:600; }

/* ── smaller screens ── */
@media (max-width: 1180px){
  .fmap .discs{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .obj .tiers{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 900px){
  .layout{ grid-template-columns:1fr; }
  .rail{ position:static; height:auto; border-right:0; border-bottom:1px solid var(--line); padding:12px 16px; }
  .railhead{ margin:0; }
  .menubtn{ display:inline-flex; margin-left:8px; }
  .railhead .iconbtn.theme{ margin-left:auto; }
  .rail nav, .rail .foot{ display:none; }
  .rail.open nav, .rail.open .foot{ display:block; }
  .rail.open nav{ margin-top:14px; }
  .wrap{ padding:0 24px; }
  .cards.three{ grid-template-columns:1fr 1fr; }
  .fmap .phases{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .fmap .ret{ grid-column:1 / -1; margin-top:0; border-top:1.5px dashed var(--accent); border-radius:10px; }
}
@media (max-width: 640px){
  body{ font-size:16px; }
  .wrap{ padding:0 16px; }
  .pagehead{ padding:32px 0 26px; }
  section.band{ padding:36px 0; }
  section.band h2{ font-size:1.5rem; }
  .cards, .cards.three, .defs{ grid-template-columns:1fr; }
  .fmap .phases{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .fmap .discs{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .obj{ padding:16px 14px 14px; }
  .obj .facts, .obj .proof, .obj .tiers{ grid-template-columns:1fr; }
  .pager{ grid-template-columns:1fr; }
  .pager .next{ grid-column:1; }
  /* tables become stacked rows so nothing scrolls sideways */
  table.grid, table.qref, table.grid tbody, table.qref tbody, table.grid tr, table.qref tr,
  table.grid td, table.qref td, table.grid th[scope="row"]{ display:block; width:100%; }
  table.grid thead, table.qref thead{ display:none; }
  table.grid tr, table.qref tr{ border-top:1px solid var(--line); padding:8px 0; }
  table.grid td, table.qref td, table.grid th[scope="row"]{ border:0; padding:2px 0; }
  table.grid td[data-h]::before, table.qref td[data-h]::before{ content:attr(data-h) ": "; font-weight:600; color:var(--text-3); }
}
@media print{
  .rail{ display:none; }
  .layout{ display:block; }
}

/* Signal board figure on the home page: one dark look by design, the same in both themes */
.sb-fig{margin:28px 0 36px;border-radius:16px;overflow:hidden;background:#0D1220}
.sb-fig svg{display:block;width:100%;height:auto}
.sb-fig .sb-narrow{display:none}
@media (max-width:620px){.sb-fig .sb-wide{display:none}.sb-fig .sb-narrow{display:block}}
@media (prefers-reduced-motion: reduce){.sb-pulse{display:none}}
.sb-panel{fill:#0D1220}.sb-gdot{fill:#1E2740}
.sb-lane{stroke-width:2.4;fill:none}.sb-glow{stroke-width:9;fill:none;opacity:.28}
.sb-lg{stroke:#7C8CFF}.sb-lm{stroke:#C9D0DC}.sb-la{stroke:#6FD394}.sb-lo{stroke:#F2A65A}
.sb-lgf{fill:#7C8CFF}.sb-lmf{fill:#C9D0DC}.sb-laf{fill:#6FD394}.sb-lof{fill:#F2A65A}
.sb-node{fill:#121A2B;stroke-width:1.4}
.sb-nt{font-family:'IBM Plex Sans','Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:12.5px;font-weight:500;fill:#E8ECF3}
.sb-ll{font-family:'IBM Plex Mono','Martian Mono',ui-monospace,Menlo,monospace;font-size:13px;font-weight:600;letter-spacing:.14em}
.sb-ls{font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:12.5px;fill:#9AA5B8}
.sb-tr{fill:none;stroke-width:1.6}
.sb-tl{font-family:'IBM Plex Mono','Martian Mono',ui-monospace,Menlo,monospace;font-size:11px;font-weight:600;letter-spacing:.12em}
.sb-cap{font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:11.5px;fill:#9AA5B8}
.sb-title{font-family:'Space Grotesk','Bricolage Grotesque',system-ui,sans-serif;font-size:31px;font-weight:700;letter-spacing:-.01em;fill:#F2A65A}
.sb-by{font-family:'IBM Plex Mono','Martian Mono',ui-monospace,monospace;font-size:11.5px;letter-spacing:.1em;fill:#F2A65A}