/* Motus design-system tokens, base type and the presentation layer.
   Shared by the website and imported deck. Palette decisions are in README.md. */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600&family=JetBrains+Mono:wght@400;500&family=Petrona:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap');

:root {
  /* White canvas, light gray grouping, navy text. Blue identifies actions
     and meaningful relationships. Green means success; red means warning
     or failure. Keep intentional dark sections and blue evidence fields. */
  --color-bg: #ffffff;
  --color-paper: #ffffff;         /* evidence artifacts on grouped surfaces */
  --color-surface: #f4f5f7;       /* custody fields and grouped diagram regions */
  --color-surface-sunk: var(--color-surface);
  --color-text: #141c26;
  --color-text-muted: #505761;
  --color-accent: #1164b3;        /* Motus blue */
  --color-accent-deep: #00478b;   /* blue at paragraph and small-label sizes */
  --color-accent-tint: #daeafc;   /* the one tinted fill: what Motus holds */
  --color-success: #256b3a;
  --color-danger: #a72629;
  --color-divider: color-mix(in srgb, #141c26 12%, transparent);
  --color-rule: color-mix(in srgb, #141c26 28%, transparent); /* diagram hairlines */

  /* Tonal ramps — OKLCH on one shared lightness scale, so the same step of
     any role carries the same visual weight. 100-300 tinted fills and
     borders, 500 the base, 700-900 text on tinted fills. */
  --color-neutral-100: var(--color-bg);
  --color-neutral-200: var(--color-surface);
  --color-neutral-300: #d5d2cb;
  --color-neutral-400: #b8b6af;
  --color-neutral-500: #96948d;
  --color-neutral-600: #77746e;
  --color-neutral-700: #595650;
  --color-neutral-800: #3c3a35;
  --color-neutral-900: #26241f;

  --color-accent-100: #e2f2ff;
  --color-accent-200: #bee2ff;
  --color-accent-300: #a1c4ee;
  --color-accent-400: #5da2f0;
  --color-accent-500: #3e82ce;
  --color-accent-600: #1d64ad;
  --color-accent-700: #00478d;
  --color-accent-800: #002e73;
  --color-accent-900: #00195d;

  /* — type. Three roles, three families: display serif for propositions and
       short quotation, sans for everything operational, mono only for machine
       facts. Fallbacks are named so exported PPTX/PDF degrades predictably. — */
  --font-display: "Petrona", "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-body: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-heading: var(--font-display);
  --font-heading-weight: 600;

  /* — spacing. A 4px rhythm; proximity carries meaning, so the steps are
       ratios apart rather than evenly spread. Optical adjustment is allowed
       where a gap has to read as belonging. — */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;

  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-lg: 4px;

  /* Elevation, restrained: evidence artifacts may sit on the sheet, ordinary
     text never lifts. */
  --shadow-sm: 0 1px 2px color-mix(in srgb, #141c26 10%, transparent);
  --shadow-md: 0 4px 14px color-mix(in srgb, #141c26 12%, transparent);
  --shadow-lg: 0 14px 40px color-mix(in srgb, #141c26 16%, transparent);

  /* — presentation geometry (16:9, authored at 1920x1080). Safe margins are
       the slide padding; the body sits on a 12-column grid with a 48px
       gutter; --slide-unit is the vertical unit (1080 = 30 units). — */
  --slide-w: 1920px;
  --slide-h: 1080px;
  --slide-pad-x: 132px;
  --slide-pad-y: 96px;
  --slide-col-gap: 48px;
  --slide-unit: 36px;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: var(--font-heading-weight); line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-3); }
h1 { font-size: 40px; }
h2 { font-size: 30px; }
h3 { font-size: 23px; }
h4 { font-size: 19px; }
h5 { font-size: 16px; }
h6 { font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent-deep); }
p { margin: 0 0 var(--space-4); text-wrap: pretty; }
a { color: var(--color-accent-deep); text-underline-offset: 3px; }
a:hover { color: var(--color-accent); }
strong { font-weight: 600; }
em { font-style: italic; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
figcaption { font-size: 12px; margin-top: var(--space-2); color: var(--color-text-muted); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: var(--color-accent-tint); }
.hr { height: 1px; border: 0; margin: var(--space-6) 0; background: var(--color-divider); }
.text-muted { color: var(--color-text-muted); }

/* ══════════════════════════════════════════════════════════════════════════
   Presentation layer — the deck grammar. Every class below carries a slide
   size (var(--t-*), set on .slide) AND an interface fallback, so the same
   markup reads correctly in a 1920x1080 stage and in these documentation
   pages. Minimum projected size is 22px.
   ═══════════════════════════════════════════════════════════════════════ */

.slide {
  position: relative; width: var(--slide-w); height: var(--slide-h);
  display: flex; flex-direction: column;
  padding: var(--slide-pad-y) var(--slide-pad-x);
  background: var(--color-bg); color: var(--color-text);
  font-family: var(--font-body); font-size: 30px; line-height: 1.45;
  text-wrap: pretty; overflow: hidden;
  print-color-adjust: exact; -webkit-print-color-adjust: exact;
  --t-display: 112px; --t-title: 72px; --t-lede: 36px; --t-body: 30px;
  --t-small: 26px; --t-label: 22px; --t-mono: 25px;
}
/* Scaled preview: set --frame-w (unitless px) on the frame. */
.slide-frame { position: relative; width: calc(var(--frame-w, 640) * 1px); height: calc(var(--frame-w, 640) * 9px / 16); overflow: hidden; background: var(--color-bg); border: 1px solid var(--color-divider); }
.slide-frame > .slide { position: absolute; top: 0; left: 0; transform: scale(calc(var(--frame-w, 640) / 1920)); transform-origin: top left; }

.slide-grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--slide-col-gap); }
.slide-foot { position: absolute; left: var(--slide-pad-x); right: var(--slide-pad-x); bottom: calc(var(--slide-unit) * 1.2); display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-6); font-size: var(--t-label, 11px); color: var(--color-text-muted); }

/* — type roles — */
.kicker { font-family: var(--font-body); font-size: var(--t-label, 11px); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-accent-deep); }
.display { font-family: var(--font-display); font-size: var(--t-display, 44px); font-weight: 500; line-height: 1.02; letter-spacing: -0.022em; margin: 0; }
.slide-title { font-family: var(--font-display); font-size: var(--t-title, 30px); font-weight: 600; line-height: 1.08; letter-spacing: -0.015em; margin: 0; }
.lede { font-size: var(--t-lede, 17px); line-height: 1.34; margin: 0; }
.body { font-size: var(--t-body, 15px); line-height: 1.45; margin: 0; }
.small { font-size: var(--t-small, 13px); line-height: 1.45; margin: 0; }
.note { font-size: var(--t-label, 11px); line-height: 1.5; color: var(--color-text-muted); margin: 0; }
.mono { font-family: var(--font-mono); font-variant-ligatures: none; font-size: var(--t-mono, 12px); }
.em-accent { color: var(--color-accent-deep); font-style: italic; }
.measure { max-width: 30ch; }
.measure-wide { max-width: 46ch; }

/* — system relationships. A system is a name, what it holds and where it
     stands; only what Motus holds takes a boundary, so the boundary means
     custody rather than decoration. — */
.node { display: flex; flex-direction: column; gap: 0.3em; }
.node-name { font-size: var(--t-small, 13px); font-weight: 600; line-height: 1.2; }
.node-holds { font-size: var(--t-label, 11px); line-height: 1.4; color: var(--color-text-muted); }
.node-standing { font-size: var(--t-label, 11px); line-height: 1.3; color: var(--color-text-muted); }
.node-held { padding: 0.7em 0.85em; border: 1.5px solid var(--color-accent); border-radius: var(--radius-md); background: var(--color-accent-tint); }
.node-held .node-holds, .node-held .node-standing { color: var(--color-accent-700); }
.baseline-rail { border-top: 1px solid var(--color-rule); }

/* Custody fields — a bounded region that says who holds what. The dashed
   edge is a disclosure boundary: things cross it only when disclosed. */
.custody { position: relative; padding: 1.1em 1.2em; border: 1px solid var(--color-divider); border-radius: var(--radius-md); background: var(--color-surface); }
.custody-label { font-family: var(--font-body); font-size: var(--t-label, 11px); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-muted); }
.boundary { border-left: 1.5px dashed var(--color-rule); }
.boundary-label { font-size: var(--t-label, 11px); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-muted); }

/* Relationship lines. Plain hairlines are relationships; an arrowhead means
   an artifact actually moves. Nothing else gets an arrow. */
.rel { position: relative; height: 1px; background: var(--color-rule); }
.rel-accent { background: var(--color-accent); }
.rel-returns { height: 0; background: none; border-top: 1.5px dashed var(--color-rule); }
.rel-moves::after { content: ""; position: absolute; right: -1px; top: 50%; translate: 0 -50%; border: 0.42em solid transparent; border-left-color: var(--color-accent); border-right: 0; }
.rel-v { width: 1px; background: var(--color-rule); }
.rel-v.rel-moves::after { right: 50%; top: auto; bottom: -1px; translate: 50% 0; border: 0.42em solid transparent; border-top-color: var(--color-accent); border-bottom: 0; border-left-color: transparent; }

/* — evidence. Artifacts have physical presence; the record is set in mono
     because it is machine fact, the explanation in the serif's italic
     because a person wrote it. — */
.artifact { background: var(--color-paper); border: 1px solid var(--color-divider); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: 1.1em 1.25em; }
.artifact-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; padding-bottom: 0.6em; margin-bottom: 0.8em; border-bottom: 1px solid var(--color-divider); font-family: var(--font-mono); font-size: var(--t-label, 11px); color: var(--color-text-muted); }
.record { display: grid; grid-template-columns: max-content 1fr; gap: 0.45em 1.4em; margin: 0; font-family: var(--font-mono); font-size: var(--t-mono, 12px); line-height: 1.4; }
.record dt { color: var(--color-text-muted); }
.record dd { margin: 0; }
.authored { font-family: var(--font-display); font-style: italic; font-size: var(--t-body, 15px); line-height: 1.35; padding-left: 0.7em; border-left: 2px solid var(--color-accent); margin: 0; }
.provenance { font-size: var(--t-label, 11px); line-height: 1.45; color: var(--color-text-muted); margin: 0; }
.placeholder { display: grid; place-items: center; text-align: center; padding: 1.2em; border: 1px solid var(--color-divider); border-radius: var(--radius-sm); background: repeating-linear-gradient(135deg, var(--color-surface) 0 7px, var(--color-surface-sunk) 7px 14px); font-family: var(--font-mono); font-size: var(--t-label, 11px); color: var(--color-text-muted); }

/* — status. Shape first, color second: the mark reads in grayscale and in a
     projected room. Released, demonstrated privately, proposed, unknown. — */
.status { display: inline-flex; align-items: baseline; gap: 0.55em; font-family: var(--font-body); font-size: var(--t-label, 11px); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.status::before { content: ""; width: 0.62em; height: 0.62em; flex: none; border: 1.5px solid currentColor; translate: 0 -0.02em; }
.status-released { color: var(--color-success); }
.status-released::before { background: currentColor; }
.status-private { color: var(--color-accent-deep); }
.status-private::before { background: linear-gradient(135deg, currentColor 0 50%, transparent 50% 100%); }
.status-proposed { color: var(--color-text-muted); }
.status-unknown { color: var(--color-text-muted); }
.status-unknown::before { width: 0.8em; height: 0; border: 0; border-top: 1.5px solid currentColor; translate: 0 -0.3em; }
.status-failed { color: var(--color-danger); }
.status-failed::before { background: linear-gradient(to bottom, transparent 0 44%, currentColor 44% 56%, transparent 56%); }

/* Review aid: the safe area, the six-unit title zone and the 12 columns as
   one background, for checking alignment across a sequence. */
.grid-overlay { position: absolute; inset: var(--slide-pad-y) var(--slide-pad-x); pointer-events: none; z-index: 5; outline: 1px dashed var(--color-accent-400);
  background: linear-gradient(color-mix(in srgb, var(--color-accent) 5%, transparent), color-mix(in srgb, var(--color-accent) 5%, transparent)) top left / 100% calc(var(--slide-unit) * 6) no-repeat,
    repeating-linear-gradient(to right, color-mix(in srgb, var(--color-accent) 8%, transparent) 0 94px, transparent 94px 142px); }

/* — diagram compositions. Sized in em so one class works at slide scale and
     at documentation scale. Each pattern has its own shape on purpose. — */

/* Authority rail: systems that keep their own authority share a hairline;
   only what Motus holds is enclosed. */
.authority { display: grid; grid-template-columns: repeat(var(--authority-cols, 5), 1fr); column-gap: 1.5em; align-items: start; }
.authority > * { display: grid; gap: 0.45em; align-content: start; }
.authority > .on-rail { border-top: 1px solid var(--color-rule); padding-top: 0.55em; }
.authority > .held-cell { margin-top: -1px; }

/* Reuse ladder: stages of one piece of work, with a dashed return. */
.loop { position: relative; display: grid; gap: 1.1em; padding: 0 0 2.6em 2.4em; }
.loop-step { display: grid; grid-template-columns: 1.2em 1fr; column-gap: 0.8em; align-items: baseline; }
.loop-n { font-family: var(--font-mono); font-size: var(--t-small, 13px); color: var(--color-accent); }
.loop-return { position: absolute; left: 0.55em; top: 0.6em; bottom: 1.6em; border-left: 1.5px dashed var(--color-rule); }
.loop-return::before, .loop-return::after { content: ""; position: absolute; left: 0; width: 0.95em; border-top: 1.5px dashed var(--color-rule); }
.loop-return::before { bottom: 0; }
.loop-return::after { top: 0; }
.loop-return .arrow { position: absolute; left: 0.95em; top: -0.28em; border: 0.3em solid transparent; border-left-color: var(--color-neutral-500); border-right: 0; }
.loop-return .back { position: absolute; left: 1.2em; bottom: -1.7em; white-space: nowrap; }
.aside-box { padding: 0.85em 1em; border: 1px dashed var(--color-rule); border-radius: var(--radius-md); }

/* Disclosure crossing: two custody fields, one boundary, one artifact that
   moves. Set --cross-mid to widen the boundary column. */
.cross { display: grid; grid-template-columns: 1fr var(--cross-mid, 7em) 1fr; align-items: start; }
.cross-mid { position: relative; align-self: stretch; }
.cross-mid .line { position: absolute; left: 50%; top: 0; bottom: 0; border-left: 1.5px dashed var(--color-rule); }
.cross-mid .move { position: absolute; left: 0.5em; right: 0.5em; }
.cross-mid .move .note { position: absolute; left: 0; bottom: 0.45em; white-space: nowrap; }
.checks { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.3em; font-size: var(--t-label, 11px); line-height: 1.35; }
.checks li { position: relative; padding-left: 1.1em; }
.checks li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 0.5em; height: 1px; background: var(--color-rule); }
.cross-mid > p { position: relative; background: var(--color-bg); padding: 0.3em 0; }

/* — restrained table, for appendices and comparisons — */
.table { width: 100%; border-collapse: collapse; font-size: var(--t-small, 13px); }
.table th { text-align: left; font-size: var(--t-label, 11px); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-muted); padding: 0 1.2em 0.5em 0; border-bottom: 1px solid var(--color-rule); }
.table td { padding: 0.6em 1.2em 0.6em 0; border-bottom: 1px solid var(--color-divider); vertical-align: baseline; }
.table tr > *:last-child { padding-right: 0; }
.table .num { font-family: var(--font-mono); text-align: right; font-variant-numeric: tabular-nums; }
.table caption { caption-side: bottom; margin-top: var(--space-3); text-align: left; font-size: var(--t-label, 11px); color: var(--color-text-muted); }

/* — labels — */
.tag { display: inline-flex; align-items: center; font-size: var(--t-label, 11px); letter-spacing: 0.02em; padding: 0.2em 0.6em; border-radius: var(--radius-sm); background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-neutral { background: var(--color-neutral-200); color: var(--color-neutral-800); }
.tag-outline { background: transparent; border: 1px solid var(--color-rule); color: var(--color-text-muted); }
.wordmark { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; }