/* Tjep's digital agents — "Hoe het team samenwerkt" (OpenContent)
   Alle regels zijn gescoped onder .tjt. Kleuren via custom properties, lettertype erft van het thema. */
.tjt{
  --tjt-ink:#1B1A17; --tjt-teal:#1F5E5B; --tjt-orange:#C94F24; --tjt-grey:#7A705F;
  --tjt-paper:#FFFDF8; --tjt-line:#E3DCCD; --tjt-muted:#5A5448; --tjt-dots:#9C9281; --tjt-on-ink:#D6CDBA;
  container-type:inline-size;
  color:var(--tjt-ink); font-family:inherit; line-height:1.5;
}
.tjt *,.tjt *::before,.tjt *::after{box-sizing:border-box}
.tjt p{margin:0}
.tjt ul,.tjt ol{list-style:none;margin:0;padding:0}
.tjt-sprite{position:absolute;width:0;height:0;overflow:hidden}

/* Kop */
.tjt-head{max-width:46rem;margin:0 auto 2.5rem;text-align:center}
.tjt .tjt-eyebrow{font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tjt-muted);margin-bottom:.75rem}
.tjt-title{margin:0 0 1rem;font-size:clamp(1.75rem,4vw,2.75rem);line-height:1.08}
.tjt .tjt-intro{font-size:1.0625rem;color:#4A4439}

/* Pil */
.tjt-node{display:flex;align-items:center;gap:.75rem;min-height:60px;padding:9px 16px 9px 9px;
  background:var(--tjt-paper);border:1px solid var(--tjt-line);border-radius:999px;
  color:var(--tjt-ink);text-decoration:none;line-height:1.15;text-align:left}
a.tjt-node{transition:border-color .15s,box-shadow .15s}
a.tjt-node:hover{border-color:var(--tjt-ink);box-shadow:0 4px 14px rgba(27,26,23,.10);color:var(--tjt-ink);text-decoration:none}
a.tjt-node:focus-visible{outline:3px solid var(--tjt-teal);outline-offset:3px}
.tjt-disk{flex:0 0 42px;height:42px;border-radius:50%;display:grid;place-items:center;color:#fff;background:var(--tjt-ink)}
.tjt-c-teal .tjt-disk{background:var(--tjt-teal)}
.tjt-c-orange .tjt-disk{background:var(--tjt-orange)}
.tjt-c-grey .tjt-disk{background:var(--tjt-grey)}
.tjt-ico{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.tjt-txt{min-width:0}
.tjt-name{display:block;font-weight:700;font-size:15px;hyphens:auto;-webkit-hyphens:auto}
.tjt-sub{display:block;margin-top:2px;font-size:12.5px;color:var(--tjt-muted)}

/* Kern */
.tjt-core{background:var(--tjt-ink);color:#fff;border-radius:28px;padding:1.25rem;
  display:flex;flex-direction:column;align-items:center;gap:.75rem;text-align:center}
.tjt-core ul{display:flex;flex-direction:column;gap:8px;width:100%}
.tjt-core .tjt-node{border-color:transparent}
.tjt .tjt-core-label{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--tjt-on-ink)}
.tjt .tjt-core-caption{font-size:13px;color:var(--tjt-on-ink)}

/* Aantal stappen in de cyclus (3–12) — bepaalt de hoeken */
.tjt-cycle{--n:8}
.tjt-cycle:has(>li:nth-child(3):last-child){--n:3}
.tjt-cycle:has(>li:nth-child(4):last-child){--n:4}
.tjt-cycle:has(>li:nth-child(5):last-child){--n:5}
.tjt-cycle:has(>li:nth-child(6):last-child){--n:6}
.tjt-cycle:has(>li:nth-child(7):last-child){--n:7}
.tjt-cycle:has(>li:nth-child(8):last-child){--n:8}
.tjt-cycle:has(>li:nth-child(9):last-child){--n:9}
.tjt-cycle:has(>li:nth-child(10):last-child){--n:10}
.tjt-cycle:has(>li:nth-child(11):last-child){--n:11}
.tjt-cycle:has(>li:nth-child(12):last-child){--n:12}

/* Satellieten */
.tjt-sats{margin-top:2.5rem;text-align:center}
.tjt .tjt-sats-label{font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tjt-muted);margin-bottom:1rem}
.tjt-sats ul{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem}
.tjt-sats li{flex:1 1 15rem;max-width:20rem;display:flex;flex-direction:column;gap:.5rem;
  padding:10px;border:1.5px dashed var(--tjt-grey);border-radius:40px}
.tjt .tjt-sat-note{font-size:13px;color:var(--tjt-muted);padding:0 .75rem .25rem}
.tjt .tjt-outro{max-width:42rem;margin:2.5rem auto 0;text-align:center;color:#4A4439}

/* ---------- Smal: verticale stappenlijst ---------- */
@container (max-width: 879.98px){
  .tjt-diagram{display:flex;flex-direction:column;gap:2rem;max-width:28rem;margin:0 auto}
  .tjt-cycle{display:flex;flex-direction:column;gap:28px}
  .tjt-cycle>li{position:relative}
  .tjt-cycle>li:not(:last-child)::after{content:"";position:absolute;left:30px;top:100%;height:28px;border-left:1.5px solid var(--tjt-ink)}
  .tjt-cycle>li:not(:first-child)::before{content:"";position:absolute;left:26px;top:-13px;width:10px;height:10px;
    border-right:2.5px solid var(--tjt-orange);border-bottom:2.5px solid var(--tjt-orange);transform:rotate(45deg)}
  .tjt .tjt-loop{display:flex;align-items:center;gap:.5rem;margin-top:-1rem;padding-left:18px;font-size:14px;color:var(--tjt-muted)}
  .tjt-loop .tjt-ico{width:20px;height:20px;color:var(--tjt-orange);stroke-width:3.4}
}

/* ---------- Breed: de cirkel ---------- */
@container (min-width: 880px){
  .tjt-diagram{--r:min(33cqw,330px);--core:min(33cqw,300px);--pill:236px;
    position:relative;height:calc(var(--r) * 2 + 110px)}
  .tjt-diagram::before{content:"";position:absolute;left:50%;top:50%;
    width:calc(var(--r) * 2);height:calc(var(--r) * 2);margin:calc(var(--r) * -1) 0 0 calc(var(--r) * -1);
    border:1.5px solid var(--tjt-ink);border-radius:50%}
  .tjt-core{position:absolute;left:50%;top:50%;z-index:3;width:var(--core);height:var(--core);
    transform:translate(-50%,-50%);border-radius:50%;justify-content:center;padding:1rem 10px;gap:.5rem}
  .tjt-core ul{width:auto;align-items:center}
  .tjt-core .tjt-node{width:min(240px, calc(var(--core) - 20px));min-height:54px;padding:6px 12px 6px 6px}
  .tjt-cycle{position:absolute;inset:0}
  .tjt-cycle>li{position:absolute;left:50%;top:50%;width:0;height:0;--a:calc(var(--i,0) * 360deg / var(--n))}
  .tjt-cycle>li>.tjt-node{position:absolute;left:0;top:0;z-index:2;width:var(--pill);
    transform:translate(-50%,-50%) rotate(var(--a)) translateY(calc(var(--r) * -1)) rotate(calc(var(--a) * -1))}
  /* spaak: kern → agent */
  .tjt-cycle>li::before{content:"";position:absolute;left:0;top:0;z-index:1;width:0;
    height:calc(var(--r) - var(--core) / 2 - 34px);border-left:1.5px dotted var(--tjt-dots);
    transform-origin:0 0;transform:rotate(calc(var(--a) + 180deg)) translateY(calc(var(--core) / 2))}
  /* pijltje op de ring, halverwege naar de volgende stap */
  .tjt-cycle>li::after{content:"";position:absolute;left:0;top:0;z-index:1;width:10px;height:10px;margin:-5px 0 0 -5px;
    border-top:2.5px solid var(--tjt-orange);border-right:2.5px solid var(--tjt-orange);
    transform:rotate(calc(var(--a) + 180deg / var(--n))) translateY(calc(var(--r) * -1)) rotate(45deg)}
  .tjt-loop{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}

@media (prefers-reduced-motion: reduce){a.tjt-node{transition:none}}
@media print{.tjt-node{break-inside:avoid}}