/* tokens.css */
/* ===================================================================
   mtc. brand design tokens
   v1.1 — May 2026
   Single source of truth for colour, type and icon styling.
   Import into any mtc. HTML document:  <link rel="stylesheet" href="tokens.css">
   Mirrors brand-tokens.json — keep the two in sync.
   =================================================================== */

:root {
  /* ---- Brand colours ---- */
  --blue:        #0F55C4;  /* MTC Blue — primary brand colour, headings, CTAs */
  --blue-dark:   #0A3D8F;  /* Dark Blue — reversed logo backgrounds, depth */
  --blue-light:  #3A7AE0;  /* Light Blue — accents, links, hover */
  --green:       #51C69C;  /* MTC Green — accent, highlights, success */

  /* ---- Neutrals ---- */
  --navy:        #0D1B2A;  /* Navy — dark section backgrounds */
  --charcoal:    #2F353F;  /* Charcoal — primary body text */
  --dark-grey:   #3E454B;  /* Dark Grey — secondary text on light */
  --mid-grey:    #6B7280;  /* Mid Grey — captions, meta, muted text */
  --light-grey:  #E5E7EB;  /* Light Grey — borders, dividers, fills */
  --white:       #FFFFFF;  /* White — primary background, reversed text */

  /* ---- Typography ---- */
  --font-sans: 'Google Sans Flex', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', monospace;

  /* Weights */
  --fw-extralight: 200;
  --fw-light:      300;
  --fw-regular:    400;
  --fw-medium:     500;
  --fw-semibold:   600;
  --fw-bold:       700;
  --fw-extrabold:  800;
  --fw-black:      900;

  /* Type scale (see hierarchy rules below) */
  --fs-display: clamp(36px, 5vw, 56px);
  --fs-h1:      36px;
  --fs-h2:      24px;
  --fs-h3:      18px;
  --fs-body:    16px;
  --fs-caption: 12px;
  --fs-label:   11px;

  /* Line heights */
  --lh-display: 1.1;
  --lh-heading: 1.2;
  --lh-snug:    1.3;
  --lh-body:    1.6;

  /* ---- Layout ---- */
  --radius-sm: 8px;
  --radius:    12px;
  --radius-lg: 16px;
  --sidebar-w: 280px;
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);

  /* ---- Icons (Lucide) ---- */
  --icon-stroke: 1.5;   /* mtc. uses 1.5px (lighter than Lucide's 2px default) */
}

/* ===================================================================
   Type hierarchy — apply these to headings/body in any mtc. document.
   Rule of thumb: Display/H1 = Bold 700, H2 = Semi Bold 600,
   H3 = Semi Bold 600, Body/Caption = Regular 400, Labels = Semi Bold 600 uppercase.
   =================================================================== */

.t-display { font-family: var(--font-sans); font-size: var(--fs-display); font-weight: var(--fw-bold);     line-height: var(--lh-display); letter-spacing: -1.5px; }
.t-h1      { font-family: var(--font-sans); font-size: var(--fs-h1);      font-weight: var(--fw-bold);     line-height: var(--lh-display); }
.t-h2      { font-family: var(--font-sans); font-size: var(--fs-h2);      font-weight: var(--fw-semibold); line-height: var(--lh-heading); }
.t-h3      { font-family: var(--font-sans); font-size: var(--fs-h3);      font-weight: var(--fw-semibold); line-height: var(--lh-snug); }
.t-body    { font-family: var(--font-sans); font-size: var(--fs-body);    font-weight: var(--fw-regular);  line-height: var(--lh-body); }
.t-caption { font-family: var(--font-sans); font-size: var(--fs-caption); font-weight: var(--fw-regular);  line-height: 1.4; color: var(--mid-grey); }
.t-label   { font-family: var(--font-sans); font-size: var(--fs-label);   font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: 2px; }

/* ===================================================================
   Lucide icon defaults. Inline any icon from https://lucide.dev/icons
   then add class="icon" (colour follows currentColor).
   =================================================================== */

.icon {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* base.css */
/* ===================================================================
   mtc. HTML system — core/base.css
   Format-agnostic foundation. Shared by every output format
   (slides, document, …). Layout/behaviour lives in formats/*.
   Load order:  tokens.css  →  base.css  →  formats/<format>.css
   =================================================================== */

/* ===================================================================
   Semantic theme tokens — map brand colours to surfaces/text/borders so
   light + dark share one component layer. Dark mirrors the brand guide's
   .section--dark (navy bg, white text, rgba-white borders/muted text).
   Toggle by setting data-theme="dark" on <html>.
   =================================================================== */
:root {
  --surface:         var(--white);
  --surface-alt:     #F7F8FA;          /* zebra / subtle fills */
  --text:            var(--charcoal);
  --text-2:          var(--dark-grey);
  --text-muted:      var(--mid-grey);
  --border:          var(--light-grey);
  --fill:            var(--light-grey); /* media / photo placeholders */
  --accent:          var(--blue);       /* eyebrows, figures, links-as-accent */
  --table-head:      var(--charcoal);
  --table-head-text: var(--white);
}
[data-theme="dark"] {
  --surface:         var(--navy);
  --surface-alt:     rgba(255, 255, 255, 0.06);
  --text:            var(--white);
  --text-2:          rgba(255, 255, 255, 0.78);
  --text-muted:      rgba(255, 255, 255, 0.5);
  --border:          rgba(255, 255, 255, 0.13);
  --fill:            rgba(255, 255, 255, 0.07);
  --accent:          var(--blue-light);
  --table-head:      rgba(255, 255, 255, 0.10);
  --table-head-text: var(--white);
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
img, svg, video { display: block; max-width: 100%; }

/* ---- Document base ---- */
body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- Base typography ---- */
h1, h2, h3, h4 { color: var(--text); font-weight: var(--fw-bold); line-height: var(--lh-heading); }
h2, h3, h4 { font-weight: var(--fw-semibold); }
p { line-height: var(--lh-body); }
strong, b { font-weight: var(--fw-semibold); color: var(--text); }
a { color: var(--blue-light); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- The wordmark — always lowercase "mtc." with green full stop ---- */
.wordmark { font-weight: var(--fw-bold); letter-spacing: -1.5px; }
.wordmark .dot { color: var(--green); }

/* ---- Eyebrow / overline label (uppercase, tracked) ---- */
.eyebrow {
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--accent);
}

/* ---- Accent bar — short rule under a heading ---- */
.accent-bar {
  width: clamp(40px, 3.6vw, 52px);
  height: 1px;
  border-radius: 1px;
  background: var(--accent);
}

/* components.css */
/* ===================================================================
   mtc. HTML system — core/components.css
   Format-agnostic CONTENT primitives shared by every output format
   (slides, document, …). Built on the semantic theme tokens in base.css,
   so they work in light + dark automatically.
   Load order:  tokens.css → base.css → components.css → formats/<format>.css
   Format-specific LAYOUT (full-bleed slides, paged document, nav, etc.)
   lives in the format stylesheet, not here.
   =================================================================== */

/* ---------- Bullets ---------- */
ul.bullets {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.8vh, 24px);
  margin-top: clamp(16px, 2.4vh, 26px);
  max-width: 74ch;
}
ul.bullets > li {
  position: relative;
  padding-left: 30px;
  font-size: clamp(15px, 1.5vw, 21px);
  line-height: 1.45;
  color: var(--text-2);
}
ul.bullets > li::before {
  content: "";
  position: absolute; left: 0; top: 0.5em;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--accent);
}
ul.bullets li strong { color: var(--text); font-weight: var(--fw-semibold); }

/* ---------- Nested (indented) lists ----------
   Hierarchy is shown by INDENTATION, with one consistent marker system so the
   whole list reads as one on-brand thing — not a jumble of disc/circle/square.
   Nested bullets keep the brand dot (smaller + lighter as they go deeper);
   nested numbers use 1. → a. → i. Works under ul.bullets and ol, and any mix. */
ul.bullets li > ul,
ul.bullets li > ol,
ol li > ul,
ol li > ol {
  display: block;                 /* opt out of the flex layout on ul.bullets */
  margin: 0.5em 0 0.1em;
}
/* nested items — a touch smaller and tighter than their parent line */
ul.bullets li ul > li,
ul.bullets li ol > li,
ol li ul > li,
ol li ol > li {
  font-size: 0.94em;
  line-height: 1.55;
  color: var(--text-2);
  margin-bottom: 0.4em;
}

/* nested BULLETS — brand dot via ::before (not a native marker), so every
   bulleted level matches the top level; deeper = smaller + lighter */
ul.bullets li ul,
ol li ul { list-style: none; padding-left: 0; }
ul.bullets li ul > li,
ol li ul > li {
  position: relative;
  padding-left: 24px;
}
ul.bullets li ul > li::before,
ol li ul > li::before {
  content: "";
  position: absolute; left: 5px; top: 0.62em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); opacity: 0.55;
}
/* third level and deeper — a hollow ring, so depth still reads */
ul.bullets li ul ul > li::before,
ol li ul ul > li::before {
  background: transparent;
  border: 1.5px solid var(--accent); opacity: 0.6;
}

/* nested NUMBERS — themed markers, indented; 1. → a. → i. by depth */
ul.bullets li ol,
ol li ol { padding-left: 1.7em; }
ol li > ol { list-style: lower-alpha; }
ol li li > ol { list-style: lower-roman; }
ul.bullets li ol > li::marker,
ol li ol > li::marker { color: var(--accent); font-weight: var(--fw-bold); }

/* ---------- Media primitive (image OR video, interchangeable) ----------
   <div class="media"><img></div> or <video> — same box.
   Default fills the box (cover). Add .contain to show the whole asset at
   its own aspect ratio on a soft letterbox. */
.media {
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--fill);
  display: flex; align-items: center; justify-content: center;
}
.media img, .media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.media.contain { background: var(--fill); }
.media.contain img, .media.contain video { object-fit: contain; }

/* ---------- Table ----------
   Greyscale brand table: header band, hairline row rules, subtle zebra,
   optional total row, right-aligned numeric columns. */
table.table {
  width: 100%;
  border-collapse: collapse;
  margin-top: clamp(6px, 1.4vh, 16px);
  font-size: clamp(13px, 1.25vw, 17px);
}
table.table thead th {
  background: var(--table-head);
  color: var(--table-head-text);
  font-weight: var(--fw-semibold);
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: clamp(10px, 1vw, 13px);
  padding: clamp(10px, 1.4vh, 15px) clamp(12px, 1.2vw, 20px);
}
table.table thead th:first-child { border-top-left-radius: var(--radius-sm); }
table.table thead th:last-child  { border-top-right-radius: var(--radius-sm); }
table.table td {
  padding: clamp(10px, 1.4vh, 15px) clamp(12px, 1.2vw, 20px);
  border-bottom: 1px solid var(--border);
  color: var(--text-2);
  vertical-align: top;
  line-height: 1.4;
}
table.table tbody tr:nth-child(even) { background: var(--surface-alt); }
table.table tbody tr:last-child td { border-bottom: none; }
table.table td strong { color: var(--text); font-weight: var(--fw-semibold); }
/* total row */
table.table tfoot td {
  border-top: 2px solid var(--text);
  border-bottom: none;
  padding-top: clamp(11px, 1.6vh, 17px);
  font-weight: var(--fw-semibold);
  color: var(--text);
  background: transparent;
}
table.table tfoot td:first-child { color: var(--text); font-weight: var(--fw-bold); }
table.table tfoot .num { color: var(--text); font-weight: var(--fw-bold); }
/* numeric / value columns */
table.table .num { text-align: right; font-variant-numeric: tabular-nums; }
/* horizontal scroll guard for narrow screens */
.table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- Code block ----------
   Dark navy panel, mono type, filename + language bar.
   Optional light syntax tokens: .k keyword · .s string · .c comment · .v value */
.code {
  margin-top: clamp(6px, 1.4vh, 16px);
  background: var(--navy);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.code .bar {
  display: flex; align-items: center; gap: 8px;
  padding: clamp(9px, 1.2vh, 13px) clamp(14px, 1.4vw, 20px);
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: clamp(11px, 1vw, 13px);
  font-weight: var(--fw-medium);
  letter-spacing: 0.3px;
  color: var(--text-muted);
}
.code .bar .lang {
  margin-left: auto;
  text-transform: uppercase; letter-spacing: 1px;
  font-size: clamp(9px, 0.9vw, 11px); font-weight: var(--fw-semibold);
  color: var(--green);
}
.code pre {
  margin: 0;
  padding: clamp(14px, 1.8vh, 22px) clamp(16px, 1.6vw, 24px);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.code code {
  font-family: var(--font-mono);
  font-size: clamp(12px, 1.1vw, 15px);
  line-height: 1.65;
  color: #D7DCE3;          /* off-white on navy */
  white-space: pre;
}
.code .k { color: var(--blue-light); }              /* keyword */
.code .s { color: var(--green); }                   /* string  */
.code .c { color: var(--text-muted); font-style: italic; } /* comment */
.code .v { color: #E0A92E; }                        /* number / value */
[data-theme="dark"] .code { background: #07111C; }  /* recessed code well vs navy surface */

/* ---------- Cards ----------
   6-col base lets cards span cleanly: .card = third, .card.wide = half.
   Lift + coloured shadow on hover (brand rollover). */
.cards {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(14px, 1.6vw, 24px);
  margin-top: clamp(14px, 2.4vh, 28px);
}
.card { grid-column: span 2; }
.card.wide { grid-column: span 3; }
.card {
  display: flex; flex-direction: column;
  gap: clamp(8px, 1.2vh, 13px);
  padding: clamp(18px, 1.9vw, 28px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 20px 60px rgba(15, 85, 196, 0.10); }
.card .badge {
  display: flex; align-items: center; justify-content: center;
  width: clamp(40px, 3.4vw, 48px); height: clamp(40px, 3.4vw, 48px);
  border-radius: var(--radius-sm);
  background: rgba(15, 85, 196, 0.10); color: var(--accent);
  margin-bottom: clamp(2px, 0.8vh, 6px);
}
.card .badge svg { width: 22px; height: 22px; }
.card h4 { font-size: clamp(16px, 1.5vw, 20px); font-weight: var(--fw-semibold); color: var(--text); }
.card p  { font-size: clamp(13px, 1.2vw, 15px); line-height: 1.5; color: var(--text-muted); }
/* inline code inside copy */
.card p code, .figure code { font-family: var(--font-mono); font-size: 0.9em; background: var(--fill); padding: 1px 6px; border-radius: 4px; }

/* ---------- Stat row (big figures) ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.4vw, 40px);
  margin-top: clamp(14px, 2.4vh, 30px);
}
.stat .v {
  font-size: clamp(38px, 5vw, 68px);
  font-weight: var(--fw-extrabold);
  letter-spacing: -2px;
  line-height: 1;
  color: var(--accent);
}
.stat .v.green { color: var(--green); }
.stat .k {
  margin-top: clamp(6px, 1vh, 10px);
  font-size: clamp(13px, 1.2vw, 16px);
  line-height: 1.4;
  color: var(--text-muted);
  max-width: 22ch;
}

/* ---------- List / TOC (ruled rows: label · item · meta) ----------
   Doubles as a styled definition list. Rows can be <a> for an interactive
   contents/agenda that jumps to a target. */
.list { display: flex; flex-direction: column; margin-top: clamp(6px, 1.4vh, 16px); }
.list-row {
  display: grid;
  grid-template-columns: clamp(48px, 6vw, 84px) 1fr auto;
  align-items: center; gap: clamp(16px, 2.4vw, 40px);
  padding: clamp(13px, 2.2vh, 24px) 0;
  border-top: 1px solid var(--border);
  color: inherit; text-decoration: none;
}
.list .list-row:last-child { border-bottom: 1px solid var(--border); }
.list-row .lbl  { font-size: clamp(11px, 1vw, 13px); font-weight: var(--fw-semibold); letter-spacing: 2px; text-transform: uppercase; color: var(--accent); }
.list-row .item { font-size: clamp(19px, 2.5vw, 32px); font-weight: var(--fw-semibold); letter-spacing: -0.5px; color: var(--text); }
.list-row .meta { font-size: clamp(12px, 1.1vw, 15px); line-height: 1.4; color: var(--text-muted); text-align: right; }
a.list-row { border-radius: 10px; transition: background 0.3s var(--ease-out); }
a.list-row:hover, a.list-row:hover .item { text-decoration: none; }
a.list-row:hover { background: rgba(15, 85, 196, 0.035); }
a.list-row:hover .item { color: var(--accent); }

/* ---------- Captioned figures (image with optional title above / caption below) ---------- */
.figures { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 1.8vw, 28px); margin-top: clamp(6px, 1.4vh, 16px); }
.figure { display: flex; flex-direction: column; gap: clamp(8px, 1vh, 12px); }
/* Default: a tidy 4:3 crop (keeps a grid of figures uniform). Override the ratio
   per-figure with style="--ratio: 16/9" (or 1/1, 3/2, 21/9 …) and it still crops
   to fill. For an image shown at its OWN proportions with no crop — screenshots,
   logos, mixed ratios — add class="natural". */
.figure img, .figure video { width: 100%; aspect-ratio: var(--ratio, 4 / 3); object-fit: cover; border-radius: var(--radius-sm); display: block; }
.figure.natural img, .figure.natural video { aspect-ratio: auto; height: auto; object-fit: fill; }
.figure .ftitle { font-size: clamp(13px, 1.3vw, 17px); font-weight: var(--fw-semibold); color: var(--text); }
.figure figcaption { font-size: clamp(12px, 1.1vw, 14px); line-height: 1.4; color: var(--text-muted); }

/* ---------- Timeline (vertical: numbered nodes on a connector; final node green) ----------
   Scales to any number of steps. Slide entrance animation (if any) is added by
   the format. */
.timeline { margin-top: clamp(18px, 3.5vh, 40px); }
.tl-step { display: grid; grid-template-columns: clamp(42px, 4.6vw, 56px) 1fr; gap: clamp(16px, 1.8vw, 28px); align-items: stretch; }
.tl-step:not(:last-child) { padding-bottom: clamp(18px, 3vh, 34px); }
.tl-marker { position: relative; display: flex; justify-content: center; }
.tl-step:not(:last-child) .tl-marker::before {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  top: clamp(42px, 4.6vw, 56px); bottom: calc(-1 * clamp(18px, 3vh, 34px));
  width: 2px; background: var(--accent);
}
.tl-step:nth-last-child(2) .tl-marker::before { background: linear-gradient(180deg, var(--accent), var(--green)); }
.tl-num {
  align-self: start; position: relative; z-index: 1;
  width: clamp(42px, 4.6vw, 56px); height: clamp(42px, 4.6vw, 56px);
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--surface); border: 2px solid var(--accent); color: var(--accent);
  font-weight: var(--fw-bold); font-size: clamp(14px, 1.4vw, 19px); font-variant-numeric: tabular-nums;
}
.tl-step:last-child .tl-num { border-color: var(--green); color: var(--green); }
.tl-content { align-self: start; padding-top: clamp(2px, 0.8vh, 8px); }
.tl-week { font-size: clamp(11px, 1.05vw, 14px); font-weight: var(--fw-semibold); letter-spacing: 1.5px; text-transform: uppercase; color: var(--accent); }
.tl-step:last-child .tl-week { color: var(--green); }
.tl-content h4 { margin-top: 5px; font-size: clamp(16px, 1.7vw, 22px); font-weight: var(--fw-semibold); color: var(--text); }
.tl-content p { margin-top: 5px; font-size: clamp(13px, 1.2vw, 15px); line-height: 1.5; color: var(--text-muted); max-width: 72ch; }

/* ---------- Callout (aside / note) ---------- */
.callout {
  display: flex; gap: 14px;
  margin: 24px 0; max-width: 66ch;
  padding: clamp(16px, 2vw, 22px) clamp(18px, 2vw, 24px);
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
}
.callout .ico { flex: none; color: var(--accent); margin-top: 1px; }
.callout p { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--text); }

/* ===================================================================
   Native diagram kit — diagrams authored directly in HTML (no image step).
   Theme-aware, responsive, on-brand. Use for non-graph visuals; use Mermaid
   (.mermaid) for genuine flow/graph/sequence diagrams.
   =================================================================== */
.diagram { margin: 24px 0; max-width: 720px; }
.diagram .dgm-cap { margin-top: 12px; font-size: 13px; line-height: 1.5; color: var(--text-muted); }

/* (a) Stack — labelled boxes */
.dgm-stack { display: flex; flex-direction: column; gap: 12px; }
.dgm-box { padding: 14px 18px; background: var(--surface-alt); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); }
.dgm-box .t { display: block; font-weight: var(--fw-semibold); color: var(--text); }
.dgm-box .m { display: block; margin-top: 4px; font-size: 0.92rem; line-height: 1.5; color: var(--text-muted); }
.dgm-box.is-2 { border-left-color: var(--green); }
.dgm-box.is-3 { border-left-color: #E0A92E; }

/* (b) Flow — numbered vertical steps with connectors */
.dgm-flow { list-style: none; display: flex; flex-direction: column; counter-reset: dgm; }
.dgm-flow li { counter-increment: dgm; position: relative; padding: 2px 0 26px 48px; }
.dgm-flow li:last-child { padding-bottom: 0; }
.dgm-flow li::before { content: counter(dgm); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: var(--fw-bold); font-size: 13px; z-index: 1; }
.dgm-flow li:not(:last-child)::after { content: ""; position: absolute; left: 15px; top: 32px; bottom: 0; width: 2px; background: var(--border); }
.dgm-flow li .s { font-size: 1rem; line-height: 1.55; color: var(--text-2); }
.dgm-flow li .s strong { color: var(--text); }

/* (c) Compare — two cards + arrow */
.dgm-compare { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(10px, 1.6vw, 22px); align-items: center; }
.dgm-col .h { margin-bottom: 8px; font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); }
.dgm-mono { font-family: var(--font-mono); font-size: 0.82rem; line-height: 1.5; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text-2); }
.dgm-mono + .dgm-mono { margin-top: 10px; }
.dgm-tag { display: inline-block; margin-top: 8px; font-size: 11px; font-weight: var(--fw-semibold); padding: 2px 9px; border-radius: 999px; }
.dgm-tag.green { background: rgba(81, 198, 156, 0.18); color: #1b7a5a; }
.dgm-tag.amber { background: rgba(224, 169, 46, 0.20); color: #8a5e10; }
.dgm-arrow { text-align: center; font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: 1px; text-transform: uppercase; color: var(--accent); }
.dgm-arrow span { display: block; font-size: 22px; line-height: 1; }
[data-theme="dark"] .dgm-tag.green { color: var(--green); }
[data-theme="dark"] .dgm-tag.amber { color: #E0A92E; }

/* (d) Mock UI panel — status rows */
.dgm-ui { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.dgm-ui .bar { padding: 11px 16px; background: var(--surface-alt); border-bottom: 1px solid var(--border); font-weight: var(--fw-semibold); font-size: 13px; color: var(--text); }
.dgm-ui .meta { padding: 12px 16px; font-size: 0.9rem; line-height: 1.5; color: var(--text-muted); border-bottom: 1px solid var(--border); }
.dgm-ui .row { display: flex; align-items: baseline; gap: 10px; padding: 9px 16px; font-size: 0.95rem; color: var(--text-2); border-bottom: 1px solid var(--border); }
.dgm-ui .row:last-child { border-bottom: none; }
.dgm-ui .row .mk { font-weight: var(--fw-bold); }
.dgm-ui .row.ok .mk { color: var(--green); }
.dgm-ui .row.warn .mk { color: #C98A12; }
.dgm-ui .row.no .mk { color: var(--text-muted); }

/* (e) Mermaid — text-defined flowcharts/graphs → SVG (self-hosted, themed in JS) */
.diagram .mermaid { display: flex; justify-content: center; margin: 0; }
.diagram .mermaid:not([data-processed="true"]) { visibility: hidden; }
.diagram .mermaid svg { max-width: 100%; height: auto; }

/* ---------- Responsive (shared primitives) ---------- */
@media (max-width: 760px) {
  .stats { grid-template-columns: 1fr 1fr; }
  .cards { grid-template-columns: 1fr; }
  .card, .card.wide { grid-column: auto; }
  .list-row { grid-template-columns: auto 1fr; gap: clamp(12px, 4vw, 18px); }
  .list-row .meta { display: none; }
  .figures { grid-template-columns: 1fr 1fr; }
  .dgm-compare { grid-template-columns: 1fr; }
  .dgm-arrow span { transform: rotate(90deg); }
}

/* document.css */
/* ===================================================================
   mtc. HTML system — formats/document/document.css
   The DOCUMENT format: a screen-first, flowing branded document
   (proposals, reports, briefs). Fixed navy sidebar for section
   navigation (à la the brand guide) + a reading column in the main area.
   Built on the shared core + theme tokens; reuses core/components.css.
   Load order: tokens.css → base.css → components.css → document.css
   =================================================================== */

:root {
  --sidebar-w: clamp(220px, 21vw, 286px);
  --side-pad: clamp(22px, 2vw, 34px);
  --main-pad: clamp(28px, 5vw, 76px);
  --content-max: 1000px;                 /* shared cap: cover header + body content align to one width */
  --measure: 68ch;                       /* prose reading width */
  --shapes-bg: url('assets/abstract-shapes-bg.jpg');
}

html { scroll-behavior: smooth; }
/* core/base.css caps html+body at height:100% so the slides format can own one
   viewport. A document is a long scrolling page — that cap would shrink the body
   box to one screen, so the responsive sticky top bar (below) can only stay stuck
   within the first screen and then scrolls away past the cover. Let the body grow
   to the full content height instead. */
html, body { height: auto; min-height: 100%; }
body { background: var(--surface); color: var(--text); }

/* ===================================================================
   Sidebar — fixed, navy, section navigation
   =================================================================== */
.doc-sidebar {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: var(--sidebar-w);
  z-index: 20;
  display: flex; flex-direction: column;
  padding: clamp(26px, 4vh, 38px) 0;
  background: var(--navy);
  color: var(--white);
  overflow: hidden;                        /* the nav scrolls, not the whole rail */
}
/* logo + label stay pinned at the top, never scroll away */
.doc-sidebar .s-logo { flex: none; height: 22px; width: auto; align-self: flex-start; margin: 0 var(--side-pad) clamp(28px, 5vh, 42px); }
.doc-sidebar .s-label {
  flex: none;
  margin: 0 var(--side-pad) 12px;
  font-size: 11px; font-weight: var(--fw-semibold);
  letter-spacing: 2px; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}
/* the section list takes the middle and scrolls on its own if it's long */
.doc-nav { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.doc-nav::-webkit-scrollbar { width: 6px; }
.doc-nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); border-radius: 3px; }
.doc-nav { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.18) transparent; }
.doc-nav a {
  position: relative;
  display: flex; align-items: baseline; gap: 14px;
  padding: 11px var(--side-pad);
  font-size: 15px; font-weight: var(--fw-medium);
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: color 0.25s ease, background 0.25s ease;
}
.doc-nav a::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--green);
  transform: scaleY(0); transform-origin: center;
  transition: transform 0.25s var(--ease-out);
}
.doc-nav a .n { min-width: 1.7em; font-size: 12px; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.35); transition: color 0.25s ease; }
.doc-nav a:hover { color: var(--white); background: rgba(255, 255, 255, 0.04); }
.doc-nav a.active { color: var(--white); }
.doc-nav a.active::before { transform: scaleY(1); }
.doc-nav a.active .n { color: var(--green); }

/* --- Overflow affordances: when the list is taller than the rail, fade the
   scrollable edge(s) so it's obvious there are more links above/below the fold,
   and show a gently-bobbing chevron at the bottom (classes toggled by document.js,
   chevron position set inline). The active link is also kept in view on scroll. */
.doc-nav.more-below:not(.more-above) {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 38px), transparent);
          mask-image: linear-gradient(to bottom, #000 calc(100% - 38px), transparent);
}
.doc-nav.more-above:not(.more-below) {
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 38px);
          mask-image: linear-gradient(to bottom, transparent, #000 38px);
}
.doc-nav.more-above.more-below {
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 38px, #000 calc(100% - 38px), transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 38px, #000 calc(100% - 38px), transparent);
}
.doc-nav-more {
  position: absolute; left: 0; right: 0;
  display: none; justify-content: center;
  pointer-events: none; z-index: 1;
}
.doc-nav.more-below ~ .doc-nav-more { display: flex; }
.doc-nav-more svg {
  display: block; color: var(--green);
  animation: doc-nav-bob 1.8s var(--ease-out) infinite;
}
@keyframes doc-nav-bob {
  0%, 100% { transform: translateY(0); opacity: 0.45; }
  50%      { transform: translateY(3px); opacity: 0.9; }
}
@media (prefers-reduced-motion: reduce) { .doc-nav-more svg { animation: none; opacity: 0.7; } }
.doc-sidebar .s-foot {
  flex: none; padding: clamp(20px, 3vh, 28px) var(--side-pad) 0;
  font-size: 11px; line-height: 1.8; color: rgba(255, 255, 255, 0.4);
}
.doc-sidebar .s-foot a { color: rgba(255, 255, 255, 0.6); text-decoration: none; transition: color 0.2s ease; }
.doc-sidebar .s-foot a:hover { color: var(--white); text-decoration: underline; }

/* ===================================================================
   Main column
   =================================================================== */
.doc-main { margin-left: var(--sidebar-w); }

/* ---------- Cover ---------- */
.doc-cover {
  padding: clamp(72px, 15vh, 168px) var(--main-pad);
  background: var(--navy) var(--shapes-bg) center / cover no-repeat;
  color: var(--white);
}
/* match the body's CONTENT box exactly: .doc-body caps its outer box (incl. its
   own padding) at --content-max, so its text column is (--content-max − 2×main-pad).
   .inner sits inside the cover's padding already, so subtract the same to line the
   title's left AND right edges up with the content below. */
.doc-cover .inner { max-width: calc(var(--content-max) - 2 * var(--main-pad)); }
.doc-cover .eyebrow { color: var(--green); letter-spacing: 4px; margin-bottom: 16px; }
.doc-cover h1 {
  font-size: clamp(36px, 5vw, 60px);
  font-weight: var(--fw-bold);
  letter-spacing: -1.5px; line-height: 1.04;
  color: var(--white);   /* no narrow cap — title runs to the full content width below */
}
.doc-cover .sub {
  margin-top: clamp(16px, 2.2vh, 22px);
  font-size: clamp(18px, 2vw, 24px); line-height: 1.5;
  color: rgba(255, 255, 255, 0.85); max-width: 36ch;
}
.doc-cover .doc-meta { display: flex; flex-wrap: wrap; gap: clamp(28px, 4vw, 56px); margin-top: clamp(32px, 5vh, 52px); }
.doc-cover .doc-meta div { display: flex; flex-direction: column; gap: 5px; }
.doc-cover .doc-meta dt { font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: 2px; text-transform: uppercase; color: var(--green); }
.doc-cover .doc-meta dd { font-size: clamp(14px, 1.4vw, 16px); color: var(--white); }

/* ---------- Body sections ---------- */
.doc-body { max-width: var(--content-max); padding: clamp(48px, 9vh, 90px) var(--main-pad); }
.doc-section {
  padding-bottom: clamp(40px, 7vh, 68px);
  margin-bottom: clamp(40px, 7vh, 68px);
  border-bottom: 1px solid var(--border);
  scroll-margin-top: 32px;
}
.doc-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.doc-section .overline {
  display: flex; align-items: baseline; gap: 10px;
  margin-bottom: 12px;
  font-size: 12px; font-weight: var(--fw-semibold);
  letter-spacing: 2px; text-transform: uppercase; color: var(--accent);
}
.doc-section .overline .n { color: var(--text-muted); }

.doc-content h2 {
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: var(--fw-bold);
  letter-spacing: -0.5px; line-height: 1.12;
  color: var(--text);
}
.doc-content h3 { margin: clamp(26px, 4vh, 38px) 0 10px; font-size: 1.25rem; font-weight: var(--fw-semibold); color: var(--text); }
.doc-content p { font-size: 1.0625rem; line-height: 1.75; color: var(--text-2); }
.doc-content p + p { margin-top: 1rem; }
.doc-content h2 + p, .doc-content h2 + .lead { margin-top: 16px; }
.doc-content p.lead { font-size: clamp(19px, 2vw, 24px); line-height: 1.5; font-weight: var(--fw-regular); color: var(--text); }
.doc-content a { color: var(--blue-light); text-decoration: underline; text-underline-offset: 2px; }
/* TOP-LEVEL numbered list only (direct child of the content column). Scoped with
   `.doc-content > ol` so it can't reach into nested <ol>s — a plain `.doc-content
   ol > li` also matches the direct children of a NESTED ol, which would override
   the compact nested sizing from core/components.css and make sub-steps balloon. */
.doc-content > ol { margin-top: 16px; padding-left: 1.5em; }
/* margin-bottom matches ul.bullets' flex `gap` so top-level numbered steps are
   grouped with the same breathing space as top-level bullets (a sub-list then
   gets the same bigger gap before the next main step) */
.doc-content > ol > li { font-size: 1.0625rem; line-height: 1.75; color: var(--text-2); margin-bottom: clamp(14px, 1.8vh, 24px); padding-left: 6px; }
.doc-content > ol > li::marker { color: var(--accent); font-weight: var(--fw-bold); }
.doc-content ol li strong { color: var(--text); }
/* code / ASCII diagrams use the full content column (wider than prose) and a
   slightly smaller mono size so wide diagrams fit; overflow-x scrolls the rest */
.doc-content .code { margin: 22px 0; }
.doc-content .code code { font-size: clamp(11px, 0.95vw, 13px); line-height: 1.55; }

/* rendered diagram image (real screenshot/photo) — framed, full width */
.doc-content .doc-diagram {
  display: block; width: 100%; height: auto;
  margin: 24px 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
}

/* Callout, native diagram kit (.dgm-*) and Mermaid (.mermaid) now live in
   core/components.css (shared across formats). */

/* document-tuned sizing for shared primitives (override slide viewport sizing).
   Content fills the full content column — the same width as the section dividers —
   so prose, tables, lists, callouts and figures all share one right edge. */
.doc-content .bullets { margin-top: 18px; }
/* match prose line-height (1.75) so multi-line bullets read like body paragraphs,
   not tighter — the shared component sets 1.45/1.55 which looks off next to prose */
.doc-content .bullets > li { font-size: 1.0625rem; line-height: 1.75; }   /* top level only — nested items size from components.css */
.doc-content .bullets li ul > li, .doc-content .bullets li ol > li { line-height: 1.7; }
.doc-content .table { margin-top: 22px; font-size: 0.95rem; }
/* the shared components cap bullets/callout/diagram to a reading measure for slides;
   in a document we want them flush with the section dividers, so lift those caps */
.doc-content .bullets, .doc-content .callout, .doc-content .diagram { max-width: none; }
.doc-content .table thead th { font-size: 11px; }
.doc-content .stats, .doc-content .cards { margin-top: 26px; }
.doc-content .stats .v { font-size: clamp(30px, 3.4vw, 44px); letter-spacing: -1px; }
.doc-content .figures { grid-template-columns: 1fr 1fr; margin-top: 18px; }
/* a standalone captioned figure (full-width image + caption dropped straight into
   the prose) needs breathing room above the image and below the caption, just like
   the grid of figures does */
.doc-content > .figure, .doc-content > figure { margin: clamp(22px, 3.2vh, 34px) 0; }
.doc-content .timeline { margin-top: 26px; }
/* breathing room AFTER block primitives so following text isn't cramped
   (margins collapse with a following heading's top margin, so no double gap).
   Lists scoped to direct children only — nested lists must NOT inherit this big
   gap, or every sub-list dumps 22–34px after itself and the spacing balloons. */
.doc-content .table-wrap, .doc-content .figures, .doc-content .timeline,
.doc-content .stats, .doc-content .cards,
.doc-content > ul.bullets, .doc-content > ol {
  margin-bottom: clamp(22px, 3.2vh, 34px);
}


/* mobile contents toggle — hidden on desktop, shown as a hamburger on mobile */
.s-toggle { display: none; }

/* ===================================================================
   Responsive — sidebar becomes a top bar + hamburger dropdown
   =================================================================== */
@media (max-width: 880px) {
  .doc-sidebar {
    position: sticky; top: 0; bottom: auto;
    width: auto; flex-direction: row; align-items: center;
    padding: 10px var(--main-pad);
    overflow: visible;                       /* let the dropdown escape */
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }
  .doc-sidebar .s-logo { margin: 0; height: 18px; align-self: center; }
  .doc-sidebar .s-label, .doc-sidebar .s-foot { display: none; }
  .s-toggle {
    margin-left: auto; display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border: none; background: transparent;
    color: var(--white); cursor: pointer;
  }
  /* full vertical list as a drop-down panel, toggled open */
  .doc-nav {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column;
    background: var(--navy);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.35);
    max-height: 72vh; overflow-y: auto;
    padding: 8px 0;
  }
  .doc-sidebar.open .doc-nav { display: flex; }
  .doc-nav a { padding: 13px var(--main-pad); }
  /* the desktop edge-fade + chevron don't belong on the floating dropdown — the
     mask would fade the panel to transparent and reveal the white page behind it.
     The dropdown is a plain scroll panel instead. */
  .doc-nav.more-above, .doc-nav.more-below {
    -webkit-mask-image: none !important; mask-image: none !important;
  }
  .doc-nav-more { display: none !important; }
  .doc-main { margin-left: 0; }
}

/* ===================================================================
   Print / PDF button — floating, screen-only (hidden in @media print)
   =================================================================== */
.print-btn {
  position: fixed; z-index: 40;
  right: clamp(18px, 3vw, 30px); bottom: clamp(18px, 3vh, 30px);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border: none; border-radius: 999px;
  background: var(--navy); color: var(--white);
  font: inherit; font-size: 13px; font-weight: var(--fw-semibold); letter-spacing: 0.3px;
  cursor: pointer;
  box-shadow: 0 6px 22px rgba(13, 27, 42, 0.28);
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out), background 0.2s ease;
}
.print-btn svg { display: block; }
.print-btn:hover { transform: translateY(-2px); background: var(--accent); box-shadow: 0 10px 28px rgba(15, 85, 196, 0.32); }
.print-btn:active { transform: translateY(0); }

/* ===================================================================
   Print / PDF — A4, brand colours preserved, sensible page breaks
   Mirrors the old PDF styler's behaviour: a title page, headings never
   stranded at a page foot, and tight blocks/table-rows kept whole.
   =================================================================== */
@media print {
  /* print brand backgrounds & colours faithfully (navy cover, table heads,
     callout, stat figures, mermaid) rather than letting the browser drop them */
  *, *::before, *::after { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  @page { size: A4; margin: 16mm 14mm; }
  /* the cover gets its own zero-margin page so it bleeds to all four edges,
     while every content page keeps its margins */
  @page cover-page { margin: 0; }
  html { scroll-behavior: auto; }
  body { background: #fff; }

  /* drop the screen chrome */
  .doc-sidebar, .print-btn, .s-toggle { display: none !important; }

  /* the reading column reclaims the full page width (page margin does the rest) */
  .doc-main { margin-left: 0; }
  .doc-body { max-width: none; padding: 0; }

  /* cover = full-bleed title page: fills the whole first page, edge to edge */
  .doc-cover {
    page: cover-page;
    box-sizing: border-box;
    height: 100vh; overflow: hidden;
    padding: 30mm 18mm;
    display: flex; flex-direction: column; justify-content: center;
    break-after: page;
  }
  .doc-cover h1 { font-size: 30pt; line-height: 1.05; }
  .doc-cover .sub { font-size: 13pt; }

  /* every top-level section starts on a fresh page; the first one follows the
     full-bleed cover, so it doesn't need its own forced break (avoids a blank page) */
  .doc-section { break-before: page; padding-bottom: 10mm; margin-bottom: 0; border-bottom: none; }
  .doc-body .doc-section:first-of-type { break-before: auto; }

  /* never strand a heading at the foot of a page — keep it with what follows */
  .doc-content h2, .doc-content h3, .doc-content h4,
  .doc-section .overline { break-after: avoid; break-inside: avoid; }
  .doc-section .overline { margin-top: 4mm; }

  /* don't split tight blocks across a page boundary */
  .callout, .card, .stat, .figure, figure, .tl-step, .dgm-box,
  .price-card, .member, .diagram, .stats { break-inside: avoid; }

  /* tables: long tables break gracefully across pages. The on-screen
     horizontal-scroll wrapper (.table-wrap { overflow-x: auto }) MUST be reset
     to visible here — an overflow ancestor turns the table into a scroll box
     the browser refuses to paginate, which silently breaks every rule below
     (the table gets crammed onto one page / clipped, header never repeats). */
  .table-wrap { overflow: visible; }
  table.table { break-inside: auto; }
  table.table thead { display: table-header-group; }   /* header repeats atop each page of a split table */
  table.table tfoot { display: table-row-group; }       /* totals print once, at the natural end — NOT repeated on every page */
  table.table tr { break-inside: avoid; }               /* never split a row across the page boundary */

  /* tidy paragraph breaks */
  .doc-content p, .doc-content li { orphans: 3; widows: 3; }

  /* keep links readable in print (no bright blue, no broken underlines) */
  .doc-content a { color: var(--text); }

  /* stop a single image or diagram from swallowing a whole page */
  .doc-content .figure img, .doc-content .doc-diagram { max-height: 150mm; }
}

