/* v3 layer pages (systeem, brein, handen, skills-en-agents, controlepaneel), 2026-10-21.
   Linked from those fragments only, so parallel page groups never edit site.css. Tokens come from site.css :root. */

/* Text next to one visual: a section whose message one diagram or illustration carries */
.lv-split {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--s-8);
  align-items: center;
}
.lv-split-rev > .lv-panel,
.lv-split-rev > .lv-art {
  order: -1;
}
.lv-split .label {
  margin-bottom: var(--s-3);
}
.lv-split h2 {
  margin-bottom: var(--s-4);
}
.lv-split p {
  color: var(--text-2);
  line-height: 1.6;
  max-width: 44ch;
}
.lv-split p + p,
.lv-split p + .more,
.lv-split p + .route-shape {
  margin-top: var(--s-4);
}
.lv-split .src {
  margin-top: var(--s-4);
}

/* The tinted panel that holds a coded SVG outside a step card (same ground as .flow-visual) */
.lv-panel {
  margin: 0;
  background: linear-gradient(135deg, var(--tint-violet), var(--canvas) 70%);
  border: 1px solid var(--hair);
  border-radius: var(--r-xl);
  padding: var(--s-6);
  display: grid;
  place-items: center;
}
.lv-panel svg {
  display: block;
  width: 100%;
  max-width: 440px;
  height: auto;
}
.lv-panel figcaption {
  margin-top: var(--s-4);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--text-2);
  text-align: center;
  max-width: 40ch;
}
.lv-panel figcaption b {
  display: block;
  color: var(--ink);
  font-size: var(--fs-body);
  margin-bottom: var(--s-1);
}
.lv-art {
  margin: 0;
}
.lv-art img {
  display: block;
  width: 100%;
  height: auto;
}

/* Two panels side by side: loose tools against one system */
.lv-vs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
}
.lv-vs > .lv-panel {
  align-content: start;
}
.lv-vs > .lv-panel:last-child {
  background: linear-gradient(135deg, var(--tint-magenta), var(--canvas) 70%);
}

/* Extra SVG marks for the layer pages. Colours only through tokens */
.step-svg .arrow-m {
  fill: var(--accent);
}
.step-svg .isle {
  fill: var(--surface);
  stroke: var(--hair-strong);
  stroke-width: 1.2;
  stroke-dasharray: 5 5;
}
.step-svg .brain {
  fill: var(--tint-violet);
  stroke: var(--tint-violet-line);
  stroke-width: 1.5;
}
.step-svg .layer-top {
  fill: var(--surface);
  stroke: var(--accent);
  stroke-width: 1.5;
}
.step-svg .chip-ok {
  fill: var(--green-tint);
}
.step-svg .chip-run {
  fill: var(--tint-violet);
}
.step-svg .chip-wait {
  fill: var(--amber-tint);
}
.step-svg .chip-stop {
  fill: var(--red-tint);
}
.step-svg .tx-ok {
  font-size: 14px;
  font-weight: 600;
  fill: var(--green-ink);
}
.step-svg .tx-run {
  font-size: 14px;
  font-weight: 600;
  fill: var(--violet);
}
.step-svg .tx-wait {
  font-size: 14px;
  font-weight: 600;
  fill: var(--amber-ink);
}
.step-svg .tx-stop {
  font-size: 14px;
  font-weight: 600;
  fill: var(--red-ink);
}
.step-svg .stop-node {
  fill: var(--red-tint);
  stroke: var(--red-ink);
  stroke-width: 1;
}
.step-svg .no circle {
  fill: var(--red-tint);
}
.step-svg .no path {
  fill: none;
  stroke: var(--red-ink);
  stroke-width: 2.2;
  stroke-linecap: round;
}
.step-svg .bar {
  fill: var(--sunken);
}
.step-svg .bar-hi {
  fill: var(--tint-magenta);
}
.step-svg .t-b {
  font-size: 16px;
  font-weight: 700;
  fill: var(--ink);
}
/* a caps label that heads a whole visual (handen NOOIT): one step up, so it stays above 12 px on a phone */
.step-svg .lbl-big {
  font-size: 14px;
}

/* Control panel mockup on the layer page (impeccable detect, 2026-10-21): table heads up to the 11 px floor,
   the side stripe on the check row becomes a full hairline, KPI tiles become hairline columns (no card in a card).
   Only the layer pages load this file, so the home hero mockup stays as Tim signed it off. */
.screen th {
  font-size: 11px;
}
/* fix round: the check row is a flat row under an accent rule, not a box in the mockup box (impeccable nested-cards) */
.screen-check {
  background: none;
  border: 0;
  border-top: 2px solid var(--accent);
  border-radius: 0;
  padding: 10px 0 0;
}
.screen-kpi {
  background: none;
  border-radius: 0;
  padding: 4px 10px;
}
.screen-kpi + .screen-kpi {
  border-left: 1px solid var(--hair);
}
.spark-v {
  stroke: var(--violet-bright);
}
.spark-w {
  stroke: var(--amber-ink);
}
.spark-ok {
  stroke: var(--green-ink);
}

@media (max-width: 900px) {
  .lv-split,
  .lv-vs {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-6);
  }
  .lv-split-rev > .lv-panel,
  .lv-split-rev > .lv-art {
    order: 0;
  }
  .lv-panel {
    padding: var(--s-4);
  }
  .step-svg .tx-ok,
  .step-svg .tx-run,
  .step-svg .tx-wait,
  .step-svg .tx-stop,
  .step-svg .t-badge {
    font-size: 15px;
  }
  .step-svg .lbl-big {
    font-size: 17px;
  }
}

/* systeem section 01 (D87): the home flow figure, drawn with tokens instead of hex fills and style attributes */
.fd .fd-m {
  fill: var(--accent);
}
.fd .fd-v {
  fill: var(--violet);
}
.fd .fd-brain {
  fill: var(--tint-violet);
  stroke: var(--tint-violet-line);
  stroke-width: 1.5;
}
.fd .fd-pill {
  fill: var(--surface);
  stroke: var(--tint-violet-line);
}
.fd .fd-dash {
  fill: var(--surface);
  stroke: var(--hair);
  stroke-dasharray: 4 4;
}
.fd .fd-sys {
  fill: var(--sunken);
}
.fd .fd-ctl {
  fill: var(--surface);
  stroke: var(--accent);
  stroke-width: 1.5;
}
.fd .fd-ok {
  fill: var(--green-ink);
}
.fd .fd-15 {
  font-size: 15px;
  font-weight: 600;
  fill: var(--ink);
}
.fd .fd-14 {
  font-size: 14px;
  fill: var(--text-2);
}
.fd .fd-ink {
  font-size: 13px;
  fill: var(--ink);
}
.fd .fd-btn {
  font-size: 13px;
  font-weight: 600;
  fill: var(--on-accent);
}
.fd .card {
  fill: var(--surface);
  stroke: var(--hair);
  stroke-width: 1;
}

/* control panel mockup in a page hero on a phone: the side menu wraps into rows above the KPIs; the home hero hides it the same way */
@media (max-width: 900px) {
  .page-hero .screen-side {
    display: none;
  }
}