/*
 * Agent Geheugen — [phrona_geheugen_*]
 *
 * VIER COMPONENTEN, ÉÉN IDEE
 * De pagina moet één misverstand wegnemen: dat geheugen voor een AI-agent
 * hetzelfde is als de gespreksgeschiedenis die een chatbot bijhoudt. Daarom
 * staan de vier stukken in een vaste volgorde van abstract naar concreet:
 *
 * 1. architectuur  — wie klopt er aan, en op welke laag komt iedereen uit
 * 2. niveaus       — vier niveaus, met zichtbaarheid en levensduur
 * 3. stroom        — wat er met één herinnering gebeurt, van schrijven tot teruglezen
 * 4. record        — één record uitgeschreven, zodat "gestructureerd" geen woord blijft
 *
 * WAAROM GEEN PIJLEN TUSSEN DE STROOM-STAPPEN
 * Pijlen tussen tegels breken zodra de reeks omklapt naar één kolom: dan staat er
 * een pijl naar de rand van het scherm. De stappen dragen een nummer, en een
 * nummer blijft kloppen op elke breedte. Zelfde afweging als bij de Plato-banen,
 * waar op mobiel de verbindingslijn wegvalt in plaats van verkeerd te wijzen.
 *
 * KLEUREN
 * Geen nieuwe kleuren. De niveaus gebruiken het groen, terracotta, leisteen en
 * goud dat al in de huisstijl zit, elk in een donkere variant voor tekst. De
 * contrastwaarden staan per regel vermeld en zijn gemeten, niet geschat.
 */

/* ---------------------------- architectuur ---------------------------- */

.gm-arch {
  margin: clamp(26px, 3.2vw, 40px) 0 clamp(30px, 3.6vw, 46px);
  padding: clamp(20px, 2.6vw, 30px);
  background: var(--bg-warm);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
}

.gm-arch__rij--drie {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(8px, 1.2vw, 14px);
}

.gm-arch__chip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: .1em .55em;
  padding: .7em .85em;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--green);
}
.gm-arch__chip svg { grid-row: span 2; }
.gm-arch__chipnaam {
  font-size: .92rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
}
.gm-arch__chiprol {
  font-size: max(11.5px, .72rem);
  line-height: 1.3;
  color: var(--muted);
}

/* Een streep met een pijlpunt, geen lijn met een driehoek die los raakt. */
.gm-arch__pijl {
  position: relative;
  height: 26px;
  margin-inline: auto;
  width: 1px;
  background: var(--green-line);
}
.gm-arch__pijl::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--green-line);
  border-bottom: 1.5px solid var(--green-line);
  transform: translate(-50%, -1px) rotate(45deg);
}

.gm-arch__band {
  display: grid;
  gap: .35em;
  padding: clamp(14px, 1.8vw, 20px) clamp(14px, 2vw, 22px);
  background: #fff;
  border: 1.5px solid var(--green-line);
  border-radius: 14px;
}
.gm-arch__bandtitel {
  font-family: var(--font-display);
  font-size: 1.06rem;
  line-height: 1.25;
  color: var(--ink);
}
.gm-arch__bandweg {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35em .5em;
  font-size: max(12px, .78rem);
  color: var(--muted);
}
.gm-arch__bandweg code {
  padding: .18em .45em;
  background: var(--bg-warm);
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  font-size: .95em;
  color: var(--ink-2);
}
.gm-arch__dot { color: var(--muted-2); }
.gm-arch__bandnoot {
  font-size: max(12px, .78rem);
  line-height: 1.5;
  color: var(--muted);
  max-width: 62ch;
}

.gm-arch__laag {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(8px, 1.2vw, 14px);
}

/* De Y tussen de interface en de twee lagen. Hij heeft zijn eigen hoogte en
   landt exact op de bovenranden; daarom geen marge eronder. */
.gm-arch__vork {
  height: 46px;
  margin: 0;
  color: var(--green-line);
}
.gm-arch__vork svg {
  display: block;
  width: 100%;
  height: 100%;
}
.gm-arch__vork + .gm-arch__laag { margin-top: 0; }

/* De samenkomst bovenaan: drie stammen die op één hoogte naar het midden
   buigen. Eigen hoogte, geen marge, zodat hij op de band landt. */
.gm-arch__samenkomst {
  height: 40px;
  margin: 0;
  color: var(--green-line);
}
.gm-arch__samenkomst svg { display: block; width: 100%; height: 100%; }
.gm-arch__samenkomst + .gm-arch__band { margin-top: 0; }
.gm-arch__deel {
  display: grid;
  gap: .3em;
  padding: clamp(14px, 1.8vw, 18px);
  background: var(--beige);
  border: 1px solid var(--sand);
  border-radius: 14px;
}
.gm-arch__deeltitel {
  font-size: .88rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}
.gm-arch__deeltekst {
  font-size: max(12px, .8rem);
  line-height: 1.5;
  color: #4A4038; /* 9,4:1 op --beige */
}

.gm-arch__bijschrift {
  margin-top: clamp(14px, 1.8vw, 20px);
  font-size: max(12px, .8rem);
  line-height: 1.55;
  color: var(--muted);
  text-align: center;
  text-wrap: balance;
}

/* ---------------------------- niveaus ---------------------------- */

.gm-niveaus {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 18px);
  margin: clamp(24px, 3vw, 36px) 0;
}

.gm-niveau {
  --gm-accent: #3F5D52;
  display: grid;
  gap: .5em;
  align-content: start;
  padding: clamp(16px, 2.2vw, 24px);
  background: #fff;
  border: 1px solid var(--line);
  border-top: 3px solid var(--gm-accent);
  border-radius: 4px 4px 14px 14px;
}
.gm-niveau--brein      { --gm-accent: #3F5D52; } /* 6,9:1 */
.gm-niveau--persoonlijk { --gm-accent: #6D4A38; } /* 7,4:1 */
.gm-niveau--sessie     { --gm-accent: #40596B; } /* 7,0:1 */
.gm-niveau--gedeeld    { --gm-accent: #7A5A2E; } /* 6,1:1 */

.gm-niveau__naam {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 400;
  line-height: 1.25;
  color: var(--ink);
}
.gm-niveau__tekst {
  margin: 0;
  font-size: .92rem;
  line-height: 1.6;
  color: var(--body, #3C443F);
}

.gm-niveau__feiten {
  display: grid;
  gap: .45em;
  margin: .35em 0 0;
  padding-top: .8em;
  border-top: 1px solid var(--line-soft);
}
.gm-niveau__feiten > div {
  display: grid;
  grid-template-columns: 9.5em minmax(0, 1fr);
  gap: .5em;
  align-items: baseline;
}
.gm-niveau__feiten dt {
  font-size: max(11px, .7rem);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.gm-niveau__feiten dd {
  margin: 0;
  font-size: max(12px, .8rem);
  line-height: 1.4;
  color: var(--ink-2);
}

/* ---------------------------- stroom ---------------------------- */

.gm-stroom {
  display: grid;
  /*
   * DRIE KOLOMMEN, NIET ZES — en dat is een correctie op een meting.
   *
   * Zes stappen naast elkaar op 1144px geeft per kaart 97px, waarvan 32px
   * padding: 65px voor de tekst. "Actualiseren" is 85px bij .88rem en loopt er
   * dus uit, en een toelichting van twee regels wordt een kolom van vijf
   * woorden. De meting wees precies die vijf kaarten aan.
   *
   * Drie kolommen geven twee rijen van drie met leesbare kaarten. De nummers
   * maken de volgorde duidelijk; daar zijn ze voor.
   */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(8px, 1vw, 12px);
  margin: clamp(24px, 3vw, 36px) 0;
  padding: 0;
  list-style: none;
  counter-reset: gm;
}

.gm-stroom__stap {
  display: grid;
  gap: .4em;
  align-content: start;
  /* Zonder min-width:0 dwingt de min-content-breedte van één lang woord de
     hele gridkolom open, en dan loopt de kaart buiten het raster. */
  min-width: 0;
  padding: clamp(12px, 1.5vw, 16px);
  background: var(--bg-warm);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
}
.gm-stroom__naam,
.gm-stroom__tekst {
  min-width: 0;
  overflow-wrap: break-word;
  hyphens: auto;
}
.gm-stroom__num {
  display: inline-grid;
  place-items: center;
  width: 1.6em;
  height: 1.6em;
  font-size: .78rem;
  font-weight: 600;
  color: #fff;
  background: var(--green);
  border-radius: 50%;
}
.gm-stroom__naam {
  font-size: .88rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
}
.gm-stroom__tekst {
  font-size: max(12px, .78rem);
  line-height: 1.5;
  color: var(--muted);
}

/* ---------------------------- record ---------------------------- */

.gm-record {
  margin: clamp(26px, 3.2vw, 40px) 0;
  padding: clamp(18px, 2.4vw, 28px);
  background: #fff;
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: 4px 14px 14px 4px;
}

.gm-record__kop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6em;
  margin-bottom: .9em;
}
.gm-record__type {
  padding: .2em .6em;
  font-size: max(11px, .7rem);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  background: var(--green);
  border-radius: 100px;
}
.gm-record__id {
  font-size: max(11.5px, .72rem);
  letter-spacing: .04em;
  color: var(--muted);
}

.gm-record__inhoud {
  margin: 0 0 1.2em;
  font-family: var(--font-display);
  font-size: clamp(1.02rem, 1.4vw, 1.18rem);
  line-height: 1.5;
  color: var(--ink);
  text-wrap: pretty;
}

.gm-record__velden {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .9em clamp(14px, 2vw, 26px);
  margin: 0 0 1.1em;
  padding: 1.1em 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.gm-record__velden > div { display: grid; gap: .2em; }
.gm-record__velden dt {
  font-size: max(11px, .7rem);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.gm-record__velden dd {
  margin: 0;
  font-size: .88rem;
  line-height: 1.45;
  color: var(--ink-2);
}

.gm-record__historie {
  margin: 0;
  font-size: max(12.5px, .84rem);
  line-height: 1.6;
  color: var(--muted);
}
.gm-record__bijschrift {
  margin-top: 1em;
  font-size: max(11.5px, .72rem);
  line-height: 1.5;
  color: var(--muted-2);
}

/* ---------------------------- smal ---------------------------- */

@media (max-width: 760px) {
  .gm-arch__rij--drie { grid-template-columns: minmax(0, 1fr); }
  .gm-arch__laag { grid-template-columns: minmax(0, 1fr); }
  .gm-niveaus { grid-template-columns: minmax(0, 1fr); }
  .gm-stroom { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gm-record__velden { grid-template-columns: minmax(0, 1fr); }
  .gm-niveau__feiten > div { grid-template-columns: minmax(0, 1fr); gap: .1em; }

  /*
   * De twee SVG's hierboven zijn getekend voor drie kolommen naast elkaar. Op
   * smalle schermen stapelen de blokken, en dan wijzen die takken naar posities
   * waar niets meer staat: twee lijntjes die in de leegte beginnen. Dus geen
   * SVG maar één rechte lijn -- dezelfde eerlijke vorm als bij de Plato-banen.
   */
  .gm-arch__samenkomst svg,
  .gm-arch__vork svg { display: none; }
  .gm-arch__samenkomst,
  .gm-arch__vork {
    height: 22px;
    width: 1px;
    margin-inline: auto;
    background: var(--green-line);
  }
  .gm-arch__samenkomst { position: relative; }
  .gm-arch__samenkomst::after,
  .gm-arch__vork::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 6px;
    height: 6px;
    border-right: 1.5px solid var(--green-line);
    border-bottom: 1.5px solid var(--green-line);
    transform: translate(-50%, -1px) rotate(45deg);
  }
  .gm-arch__vork { position: relative; }
}

@media (max-width: 420px) {
  .gm-stroom { grid-template-columns: minmax(0, 1fr); }
}

@media print {
  .gm-arch, .gm-niveau, .gm-record, .gm-stroom__stap {
    background: #fff;
    border-color: #bbb;
  }
  .gm-arch__chip, .gm-arch__band { border-color: #999; }
  .gm-niveau { break-inside: avoid; }
  .gm-stroom__stap { break-inside: avoid; }
}