/* ============================================================
   kal0.dev — design system
   Tokens → primitives → components → layouts → pages
   Semantic colour is fixed across the whole site:
     violet = AI · blue = human · green = verified · amber = intent
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root {
  /* spacing scale (4px base) */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;

  /* radii */
  --r-sm: 8px; --r: 12px; --r-lg: 18px; --r-xl: 24px; --r-full: 999px;

  /* type */
  --sans: "Inter var", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --fs-display: clamp(40px, 6.4vw, 68px);
  --fs-h1: clamp(32px, 4.6vw, 46px);
  --fs-h2: clamp(24px, 3vw, 32px);
  --fs-h3: 19px;
  --fs-body: 16.5px;
  --fs-sm: 14.5px;
  --fs-xs: 13px;
  --fs-mono: 13px;
  --measure: 66ch;

  /* AZMX semantic palette — amber = agent/action, teal = trust/approval */
  --ai: #f5a524;        /* AI / agent authorship */
  --human: #2dd4bf;     /* human authorship & sign-off  */
  --ok: #2dd4bf;        /* verified / trusted           */
  --intent: #f5a524;    /* the "why" */
  --danger: #f4787d;

  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* dark (default) */
:root, :root[data-theme="dark"] {
  --bg: #08090c;
  --bg-elev: #0e1016;
  --surface: #12151d;
  --surface-2: #171b25;
  --line: rgba(255,255,255,.075);
  --line-strong: rgba(255,255,255,.14);
  --text: #f0f2f7;
  --text-2: #a3aab9;
  --text-3: #6c7382;
  --accent: #f5a524;
  --accent-ink: #1a1200;
  --term-bg: #0a0c11;
  --glow: radial-gradient(760px 320px at 12% -12%, rgba(245,165,36,.09), transparent 62%),
          radial-gradient(640px 300px at 88% -8%, rgba(45,212,191,.08), transparent 62%);
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 40px rgba(0,0,0,.45);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.35);
  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg: #ffffff;
  --bg-elev: #fafafa;
  --surface: #ffffff;
  --surface-2: #f6f7f9;
  --line: rgba(10,12,20,.10);
  --line-strong: rgba(10,12,20,.18);
  --text: #14161c;
  --text-2: #545c6b;
  --text-3: #858c9a;
  --accent: #b45309;
  --accent-ink: #fff8ec;
  --ai: #b45309;
  --human: #0f766e;
  --ok: #0f766e;
  --intent: #b45309;
  --term-bg: #0d1017;   /* terminals stay dark in both themes — they're terminals */
  --glow: radial-gradient(760px 320px at 12% -12%, rgba(180,83,9,.06), transparent 62%),
          radial-gradient(640px 300px at 88% -8%, rgba(15,118,110,.05), transparent 62%);
  --shadow: 0 1px 2px rgba(16,20,30,.05), 0 12px 32px rgba(16,20,30,.09);
  --shadow-sm: 0 1px 3px rgba(16,20,30,.07);
  color-scheme: light;
}

/* ---------- 2. Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg); color: var(--text);
  font-family: var(--sans); font-size: var(--fs-body); line-height: 1.68;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; }
a { color: inherit; text-decoration: none; }
p a, li a, td a { color: var(--accent); text-underline-offset: 3px; text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent); }
p a:hover, li a:hover { text-decoration-color: var(--accent); }
code, pre, kbd, .mono { font-family: var(--mono); font-variant-ligatures: none; }
::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* ---------- 3. Layout primitives ---------- */
.wrap { width: 100%; max-width: 1140px; margin-inline: auto; padding-inline: var(--s5); }
.wrap-narrow { max-width: 860px; }
.section { padding-block: var(--s9); }
.section + .section { padding-top: 0; }
.section--alt { background: var(--bg-elev); border-block: 1px solid var(--line); }
.stack > * + * { margin-top: var(--s4); }
.grid { display: grid; gap: var(--s4); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); }
.grid--split { grid-template-columns: 1.02fr .98fr; gap: var(--s7); align-items: center; }
@media (max-width: 900px) { .grid--split { grid-template-columns: 1fr; gap: var(--s6); } }

/* ---------- 4. Typography components ---------- */
.eyebrow {
  font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent); margin-bottom: var(--s3);
  display: flex; align-items: center; gap: var(--s2);
}
.eyebrow::before { content: ""; width: 18px; height: 1px; background: currentColor; opacity: .6; }
.display { font-size: var(--fs-display); line-height: 1.05; letter-spacing: -.035em; font-weight: 680; }
h1, .h1 { font-size: var(--fs-h1); line-height: 1.12; letter-spacing: -.028em; font-weight: 660; }
h2, .h2 { font-size: var(--fs-h2); line-height: 1.2; letter-spacing: -.022em; font-weight: 640; }
h3, .h3 { font-size: var(--fs-h3); line-height: 1.35; letter-spacing: -.012em; font-weight: 620; }
.lead { font-size: 18px; line-height: 1.66; color: var(--text-2); max-width: var(--measure); }
.muted { color: var(--text-2); }
.small { font-size: var(--fs-sm); }
.hl { color: var(--accent); }
.gradient-text {
  background: linear-gradient(96deg, var(--accent), var(--human) 92%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* page header — used identically on every non-home page */
.page-head { padding-block: var(--s8) var(--s6); border-bottom: 1px solid var(--line); background: var(--bg-elev); }
.page-head h1 { margin-bottom: var(--s3); }
.page-head .lead { margin-bottom: 0; }

/* ---------- 5. Buttons & chips ---------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: 11px 20px; border-radius: var(--r-full); font-size: var(--fs-sm); font-weight: 600;
  border: 1px solid transparent; cursor: pointer; transition: .18s var(--ease);
  white-space: nowrap; text-decoration: none !important;
}
.btn--primary { background: var(--accent); color: var(--accent-ink); }
.btn--primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn--ghost { border-color: var(--line-strong); color: var(--text); background: var(--surface); }
.btn--ghost:hover { border-color: var(--text-3); transform: translateY(-1px); }
.btn--sm { padding: 7px 14px; font-size: var(--fs-xs); }

.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px;
  border: 1px solid var(--line-strong); border-radius: var(--r-full);
  font-family: var(--mono); font-size: 12px; color: var(--text-2); background: var(--surface);
}
.chip b { color: var(--ok); font-weight: 700; }
.chip--ai { border-color: color-mix(in srgb, var(--ai) 45%, transparent); color: var(--ai); }
.chip--human { border-color: color-mix(in srgb, var(--human) 45%, transparent); color: var(--human); }

/* ---------- 6. Cards ---------- */
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--s5); transition: .2s var(--ease); position: relative;
}
.card--link:hover { border-color: var(--line-strong); transform: translateY(-2px); box-shadow: var(--shadow); }
.card__icon {
  width: 38px; height: 38px; border-radius: var(--r-sm); display: grid; place-items: center;
  font-size: 19px; background: var(--surface-2); border: 1px solid var(--line); margin-bottom: var(--s4);
}
.card h3 { margin-bottom: var(--s2); }
.card p { color: var(--text-2); font-size: var(--fs-sm); }
.card p + p { margin-top: var(--s3); }
.card .cb pre { font-size: 12.2px; }   /* narrow columns: keep commands on one line */
.card__arrow { color: var(--accent); font-size: var(--fs-sm); margin-top: var(--s3); display: inline-block; font-weight: 600; }

/* ---------- 7. Terminal ---------- */
.term {
  background: var(--term-bg); border: 1px solid var(--line-strong); border-radius: var(--r);
  overflow: hidden; box-shadow: var(--shadow); margin-block: var(--s4);
}
.term__bar {
  display: flex; align-items: center; gap: 7px; padding: 10px 14px;
  background: color-mix(in srgb, #fff 4%, var(--term-bg)); border-bottom: 1px solid rgba(255,255,255,.07);
}
.term__bar i { width: 10px; height: 10px; border-radius: 50%; display: block; opacity: .85; }
.term__bar i:nth-child(1) { background: #ff5f57; }
.term__bar i:nth-child(2) { background: #febc2e; }
.term__bar i:nth-child(3) { background: #28c840; }
.term__bar span { margin-left: auto; font-family: var(--mono); font-size: 11px; color: #5b6373; letter-spacing: .05em; }
.term pre {
  padding: var(--s4) var(--s5); overflow-x: auto; font-family: var(--mono);
  font-size: var(--fs-mono); line-height: 1.75; color: #dfe4ee; tab-size: 2;
}
.term { position: relative; }
.term::after { content: ""; position: absolute; top: 40px; right: 0; bottom: 0; width: 34px;
  background: linear-gradient(90deg, transparent, var(--term-bg)); pointer-events: none; opacity: .9; }
.term pre::-webkit-scrollbar { height: 7px; }
.term pre::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 4px; }
/* terminal token colours (also used by ANSI conversion) */
.term .p   { color: #4d5566; }
.term .c   { color: #f0f2f7; font-weight: 600; }
.term .c b { color: var(--accent); font-weight: 700; }
.term .out { color: #97a0b3; }
.a-b  { color: #f0f2f7; font-weight: 700; }
.a-dm { color: #5f6878; }
.a-g  { color: #2dd4bf; }
.a-y  { color: #f5a524; }
.a-cy { color: #5eead4; }
.term .cursor {
  display: inline-block; width: 8px; height: 14px; background: var(--accent);
  vertical-align: -2px; animation: blink 1.05s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
.term--hero pre { min-height: 268px; }

/* ---------- 8. Code block ---------- */
.cb {
  position: relative; background: var(--term-bg); border: 1px solid var(--line);
  border-radius: var(--r); margin-block: var(--s3);
}
.cb pre { padding: var(--s4) var(--s5); overflow-x: auto; font-family: var(--mono);
  font-size: var(--fs-mono); line-height: 1.75; color: #dfe4ee; }
.cb .cmt { color: #5f6878; }
.cb .kw  { color: var(--accent); }
.cb__copy {
  position: absolute; top: 8px; right: 8px; padding: 4px 10px; border-radius: var(--r-sm);
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  color: #97a0b3; font-family: var(--mono); font-size: 11px; cursor: pointer; opacity: 0;
  transition: .15s var(--ease);
}
.cb:hover .cb__copy, .cb__copy:focus-visible { opacity: 1; }
.cb__copy:hover { color: #fff; background: rgba(255,255,255,.12); }

/* ---------- 9. Callouts ---------- */
.callout {
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  background: var(--surface); border-radius: 0 var(--r) var(--r) 0;
  padding: var(--s4) var(--s5); margin-block: var(--s5); font-size: var(--fs-sm); color: var(--text-2);
}
.callout b { color: var(--text); }
.callout--ai { border-left-color: var(--ai); }
.callout--ok { border-left-color: var(--ok); }

/* ---------- 10. Tables ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
th { text-align: left; padding: 13px var(--s5); background: var(--surface-2);
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--text-3); font-weight: 650;
  border-bottom: 1px solid var(--line); }
td { padding: 13px var(--s5); border-bottom: 1px solid var(--line); color: var(--text-2); vertical-align: top; }
tr:last-child td { border-bottom: none; }
td:first-child { color: var(--text); font-weight: 500; }
td code, th code { font-size: 12.5px; color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent);
  padding: 2px 7px; border-radius: 6px; }

/* inline code in prose */
.prose code:not(pre code), .card code, li code, p code {
  font-size: .89em; padding: 2px 6px; border-radius: 6px;
  background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--text);
}

/* ---------- 11. Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--line);
}
.nav__inner { display: flex; align-items: center; gap: var(--s5); height: 62px; }
.brand { display: flex; align-items: center; gap: 9px; font-family: var(--mono); font-weight: 700; font-size: 17px; letter-spacing: -.02em; }
.brand__mark { width: 27px; height: 27px; display: grid; place-items: center; }
.mark { width: 27px; height: 27px; }
.mark path { fill: none; stroke-width: 1.7; stroke-linejoin: round; }
.mark .up { stroke: var(--accent); }
.mark .down { stroke: var(--human); opacity: .9; }
.brand__text { display: inline-flex; }          /* no flex gap inside the wordmark */
.brand__text > span { color: var(--text-3); font-weight: 500; }
.nav__links { display: flex; gap: var(--s5); margin-left: var(--s4); }
.nav__links a { font-size: var(--fs-sm); color: var(--text-2); font-weight: 500; transition: .15s; }
.nav__links a:hover, .nav__links a[aria-current] { color: var(--text); }
.nav__right { margin-left: auto; display: flex; align-items: center; gap: var(--s3); }
.icon-btn {
  width: 34px; height: 34px; border-radius: var(--r-sm); border: 1px solid var(--line);
  background: var(--surface); color: var(--text-2); display: grid; place-items: center; cursor: pointer; font-size: 15px;
}
.icon-btn:hover { color: var(--text); border-color: var(--line-strong); }
@media (max-width: 900px) {
  .nav__inner { height: auto; padding-block: 10px; flex-wrap: wrap; row-gap: 4px; }
  .nav__links {
    order: 3; width: 100%; margin-left: 0; gap: var(--s4);
    overflow-x: auto; padding-bottom: 6px; scrollbar-width: none;
  }
  .nav__links::-webkit-scrollbar { display: none; }
  .nav__links a { white-space: nowrap; }
  .nav__right { margin-left: auto; }
  html { scroll-padding-top: 116px; }
  .sidebar { top: 116px; }
}
@media (max-width: 520px) {
  .hero { padding-block: var(--s7) var(--s6); }
  .section { padding-block: var(--s7); }
  .card { padding: var(--s4); }
  .term pre, .cb pre { padding: var(--s3) var(--s4); font-size: 12px; }
  .btn { padding: 10px 16px; }
}

/* ---------- 12. Hero ---------- */
.hero { position: relative; padding-block: var(--s9) var(--s8); overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; background: var(--glow); pointer-events: none; }
.hero > * { position: relative; }
.hero .display { margin-bottom: var(--s5); }
.hero .lead { font-size: 19px; margin-bottom: var(--s6); }
.hero__cta { display: flex; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s6); }
.hero__chips { display: flex; gap: var(--s2); flex-wrap: wrap; }

/* ---------- 13. Docs layout ---------- */
.docs { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: var(--s8); padding-block: var(--s7) var(--s9); }
.sidebar { position: sticky; top: 86px; align-self: start; max-height: calc(100vh - 110px); overflow-y: auto; }
.sidebar__group { margin-bottom: var(--s5); }
.sidebar__title { font-size: 11.5px; text-transform: uppercase; letter-spacing: .11em; color: var(--text-3);
  font-weight: 650; margin-bottom: var(--s2); }
.sidebar a { display: block; padding: 5px 10px; margin-left: -10px; border-radius: var(--r-sm);
  font-size: var(--fs-sm); color: var(--text-2); }
.sidebar a:hover { color: var(--text); background: var(--surface); }
.sidebar a.is-active { color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, transparent); font-weight: 550; }
@media (max-width: 940px) {
  .docs { grid-template-columns: 1fr; gap: var(--s5); }
  .sidebar { position: static; max-height: none; padding-bottom: var(--s4); border-bottom: 1px solid var(--line); }
  .sidebar__group { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; margin-bottom: var(--s3); }
  .sidebar__title { width: 100%; }
}

/* ---------- 14. Prose (doc body) ---------- */
.prose > * { max-width: var(--measure); }
.prose > .term, .prose > .cb, .prose > .table-wrap, .prose > figure, .prose > .grid { max-width: none; }
.prose h2 { margin-top: var(--s8); margin-bottom: var(--s3); scroll-margin-top: 90px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: var(--s6); margin-bottom: var(--s2); scroll-margin-top: 90px; }
.prose p { color: var(--text-2); margin-bottom: var(--s3); }
.prose ul, .prose ol { color: var(--text-2); margin: var(--s3) 0 var(--s4) var(--s5); }
.prose li { margin-bottom: 6px; }
.prose strong, .prose b { color: var(--text); font-weight: 620; }
.prose hr { border: none; border-top: 1px solid var(--line); margin-block: var(--s7); }

/* ---------- 15. Command reference ---------- */
.cmd-filter {
  width: 100%; padding: 11px 16px; border-radius: var(--r); border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--text); font-family: var(--mono); font-size: var(--fs-sm);
  margin-bottom: var(--s5);
}
.cmd-filter::placeholder { color: var(--text-3); }
.cmd-group { margin-bottom: var(--s8); }
.cmd-group__head { display: flex; align-items: baseline; gap: var(--s3); margin-bottom: var(--s2); scroll-margin-top: 90px; }
.cmd-group__head .n { font-family: var(--mono); font-size: var(--fs-xs); color: var(--text-3); }
.cmd-group > p { color: var(--text-2); margin-bottom: var(--s5); max-width: var(--measure); }
.cmd {
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface);
  padding: var(--s5); margin-bottom: var(--s4); scroll-margin-top: 90px;
}
.cmd__head { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s3); }
.cmd__name {
  font-family: var(--mono); font-size: 15.5px; font-weight: 650; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--line); padding: 4px 12px; border-radius: var(--r-sm);
}
.cmd__name b { color: var(--accent); }
.cmd__desc { color: var(--text-2); font-size: var(--fs-sm); margin-bottom: var(--s2); max-width: var(--measure); }
.cmd__desc b { color: var(--text); }
.cmd .term { margin-bottom: 0; }
.cmd[hidden] { display: none; }

/* ---------- 16. Steps (tour) ---------- */
.step { display: grid; grid-template-columns: 46px minmax(0,1fr); gap: var(--s5); margin-bottom: var(--s8); }
.step__n {
  width: 46px; height: 46px; border-radius: var(--r); display: grid; place-items: center;
  font-family: var(--mono); font-weight: 700; font-size: 17px;
  background: var(--surface-2); border: 1px solid var(--line-strong); color: var(--accent);
}
.step h3 { margin-bottom: var(--s2); }
.step > div:last-child > p { color: var(--text-2); max-width: var(--measure); }
@media (max-width: 620px) { .step { grid-template-columns: 1fr; gap: var(--s3); } }

/* ---------- 17. Figures ---------- */
figure {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--s6) var(--s5) var(--s4); margin-block: var(--s5);
}
figure svg { width: 100%; height: auto; display: block; }
figcaption { margin-top: var(--s4); font-size: var(--fs-xs); color: var(--text-3); text-align: center; }

/* ---------- 18. Tabs ---------- */
.tabs { display: flex; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s5);
  border-bottom: 1px solid var(--line); padding-bottom: var(--s4); }
.tab {
  padding: 9px 18px; border-radius: var(--r-full); border: 1px solid var(--line);
  background: var(--surface); color: var(--text-2); font-size: var(--fs-sm); font-weight: 570; cursor: pointer;
  transition: .15s var(--ease);
}
.tab:hover { color: var(--text); }
.tab.is-active { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.tabpane { display: none; } .tabpane.is-active { display: block; animation: fade .22s var(--ease); }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } }

/* ---------- 19. Pager ---------- */
.pager { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: var(--s4);
  margin-top: var(--s9); padding-top: var(--s6); border-top: 1px solid var(--line); }
.pager a { border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s4) var(--s5); background: var(--surface); }
.pager a:hover { border-color: var(--line-strong); }
.pager .k { font-size: var(--fs-xs); color: var(--text-3); display: block; margin-bottom: 2px; }
.pager .t { font-weight: 600; color: var(--text); }

/* ---------- 20. Footer ---------- */
.footer { border-top: 1px solid var(--line); background: var(--bg-elev); padding-block: var(--s8) var(--s7); margin-top: var(--s7); }
.footer__grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--s6); }
@media (max-width: 780px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
.footer h4 { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--text-3);
  margin-bottom: var(--s3); font-weight: 650; }
.footer a { display: block; padding: 3px 0; color: var(--text-2); font-size: var(--fs-sm); }
.footer p a, .footer .brand { display: inline; padding: 0; }   /* inline links must stay inline */
.footer a:hover { color: var(--text); }
.footer__base { margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: var(--s4); flex-wrap: wrap;
  font-size: var(--fs-xs); color: var(--text-3); }

/* ---------- 21. Utilities ---------- */
.center { text-align: center; }
.center .lead, .center .eyebrow { margin-inline: auto; }
.center .eyebrow { justify-content: center; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.mt-5 { margin-top: var(--s5); } .mt-6 { margin-top: var(--s6); }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }


/* ---------- 22. Line icons (AZMX minimal iconography) ---------- */
.icon { width: 20px; height: 20px; stroke: currentColor; fill: none;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; display: block; }
.icon--lg { width: 24px; height: 24px; }
.card__icon { color: var(--accent); }
.card__icon--trust { color: var(--human); }


/* attribution semantics used in prose + captures */
.tag-ai { color: var(--ai); font-family: var(--mono); font-size: .92em; }
.tag-human { color: var(--human); font-family: var(--mono); font-size: .92em; }

/* tetrahedra motif divider */
.motif { display: flex; justify-content: center; padding-block: var(--s6); opacity: .5; }
.motif svg { width: 46px; height: 46px; stroke: var(--text-3); fill: none; stroke-width: 1.2; }