/* CA Notes — study flowcharts (shared steps, connectors, swimlanes) */
:root{
  --afc-arrow-right:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 12'%3E%3Cpath d='M0 6h22M18 1.5 26 6 18 10.5' fill='none' stroke='%23009edb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --afc-arrow-down:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 32'%3E%3Cpath d='M6 0v22M1.5 18 6 26 10.5 18' fill='none' stroke='%23009edb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

@keyframes afc-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes afc-flow-x{0%{background-position:0 0}100%{background-position:200% 0}}
@keyframes afc-flow-y{0%{background-position:0 0}100%{background-position:0 200%}}
@keyframes afc-pulse{0%,100%{box-shadow:0 6px 20px rgba(0,0,0,.08)}50%{box-shadow:0 10px 28px rgba(0,120,180,.18)}}
@keyframes afc-dash{to{stroke-dashoffset:0}}

.afc-wrap{
  --afc-a:var(--fc-accent,#009edb);
  --afc-b:var(--fc-accent2,#1565a8);
  --afc-line:#b8d4f0;
  --afc-ink:#0f1b2d;
  --afc-muted:#5a6a7d;
  position:relative;margin:14px 0 18px;padding:16px 12px 18px;border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(245,250,255,.95));
  box-shadow:0 12px 36px rgba(15,27,45,.1);
  overflow:visible;
  max-width:100%;
  box-sizing:border-box;
}
.afc-wrap,.afc-wrap *{box-sizing:border-box}
.afc-wrap .afc-step,.afc-wrap .afc-site-node,.afc-wrap .afc-decision,.afc-wrap .afc-bubble,.afc-wrap .afc-doc-step{min-width:0;max-width:100%}
.afc-wrap::before{
  content:"";position:absolute;inset:0;border-radius:18px;padding:2px;
  background:linear-gradient(110deg,var(--afc-a),var(--afc-b),#c9a227,var(--afc-a));
  background-size:220% 220%;animation:afc-flow-x 10s ease infinite;
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none
}
.afc-wrap > *{position:relative;z-index:1}
.afc-legend{
  font-size:.8rem;font-weight:600;line-height:1.4;text-align:center;
  color:var(--afc-muted);margin:0 0 12px;padding:0 6px
}

.afc-start,.afc-end{
  font-size:.76rem;font-weight:800;text-align:center;color:#fff;border-radius:999px;
  padding:10px 14px;min-width:0;max-width:100%;flex:0 1 auto;
  overflow-wrap:anywhere;word-break:break-word;
  animation:afc-rise .5s ease both,afc-pulse 3s ease-in-out infinite .4s
}
.afc-start{background:linear-gradient(135deg,#041e33,var(--afc-b))}
.afc-end{background:linear-gradient(135deg,#1b5e20,#2e7d32)}

.afc-step{
  background:#fff;border:2px solid var(--afc-line);border-radius:12px;padding:10px 12px;
  font-size:.76rem;line-height:1.45;color:var(--afc-ink);
  min-width:0;flex:1 1 140px;max-width:min(220px,100%);text-align:center;
  overflow-wrap:anywhere;word-break:break-word;
  box-shadow:0 4px 14px rgba(15,27,45,.06);animation:afc-rise .55s ease both;
  transition:border-color .2s,box-shadow .2s
}
.afc-step:hover{border-color:var(--afc-a);box-shadow:0 8px 20px rgba(0,120,180,.12)}
.afc-step b,.afc-doc-step b,.afc-pert-node b,.afc-bubble h5,
.afc-actor b,.afc-system-box b,.afc-outcome b,.afc-event b{display:block;font-size:.78rem;color:var(--afc-b);margin-bottom:4px}
.afc-bubble h5{font-size:.8rem;margin:0 0 6px}
.afc-step .afc-sub,.afc-doc-step .afc-sub,.afc-hint{display:block;font-size:.68rem;color:var(--afc-muted);font-weight:500;line-height:1.35;margin-top:2px}
.afc-start .afc-sub,.afc-end .afc-sub{color:rgba(255,255,255,.9)}

.afc-arrow-h,.afc-conn-h{
  flex:0 0 32px;width:32px;height:14px;margin:0 2px;align-self:center;
  background:var(--afc-arrow-right) center/contain no-repeat;opacity:.92
}
.afc-arrow-v,.afc-conn-v{
  flex:0 0 32px;width:14px;height:32px;margin:4px auto;
  background:var(--afc-arrow-down) center/contain no-repeat;opacity:.92
}
.afc-conn-h,.afc-conn-v{animation:none}

.afc-pipeline{
  display:flex;flex-wrap:wrap;align-items:stretch;justify-content:center;gap:8px;padding:4px 0;
  width:100%;max-width:100%;min-width:0
}
.afc-pipeline--six .afc-step{flex:1 1 88px;max-width:min(160px,48%)}
.afc-pipeline .afc-step:nth-child(4){animation-delay:.08s}
.afc-pipeline .afc-step:nth-child(6){animation-delay:.16s}
.afc-pipeline .afc-step:nth-child(8){animation-delay:.24s}
.afc-pipeline .afc-step:nth-child(10){animation-delay:.32s}

.afc-decision{
  max-width:min(280px,100%);padding:12px 16px;text-align:center;
  font-size:.74rem;font-weight:700;line-height:1.4;color:var(--afc-b);
  background:linear-gradient(180deg,#fff9e6,#fff);border:2px solid #e8c878;border-radius:12px;
  position:relative;animation:afc-rise .5s ease both .15s;
  overflow-wrap:anywhere;word-break:break-word
}
.afc-decision::before{
  content:"?";position:absolute;top:-8px;left:50%;transform:translateX(-50%);
  width:20px;height:20px;border-radius:50%;background:#e8c878;color:#fff;font-size:.7rem;line-height:20px
}
.afc-branch{
  display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:8px
}
.afc-branch-col{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;flex:1 1 120px;max-width:240px}
.afc-branch-label{font-size:.68rem;font-weight:800;color:var(--afc-muted);text-transform:uppercase}

.afc-swim{
  display:grid;gap:0;border:2px solid var(--afc-line);border-radius:14px;overflow:hidden;
  background:#fff
}
.afc-swim-hdr{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;
  background:linear-gradient(180deg,#eef6ff,#fff);border-bottom:2px solid var(--afc-line)
}
.afc-swim-hdr div{padding:8px 10px;border-right:1px solid var(--afc-line);color:var(--afc-b)}
.afc-swim-hdr div:last-child{border-right:0}
.afc-swim-row{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));min-height:72px
}
.afc-swim-cell{
  padding:10px;border-right:1px solid var(--afc-line);border-bottom:1px solid var(--afc-line);
  font-size:.74rem;line-height:1.45;display:flex;align-items:flex-start;justify-content:center;text-align:center;
  min-width:0;overflow-wrap:anywhere;word-break:break-word
}
.afc-swim-cell b{display:block;margin-bottom:4px;font-size:.76rem;color:var(--afc-b)}
.afc-swim-cell small{display:block;margin-top:4px;font-size:.68rem;color:var(--afc-muted);line-height:1.35}
.afc-swim-cell:last-child{border-right:0}
.afc-swim-row:last-child .afc-swim-cell{border-bottom:0}
.afc-swim-cell.accent{background:linear-gradient(180deg,#f0f9ff,#fff)}

.afc-workflow{display:flex;flex-direction:column;align-items:center;gap:0;padding:6px 0}
.afc-workflow .afc-step{max-width:320px;width:100%}

.afc-data{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;align-items:stretch
}
.afc-bubble{
  border-radius:16px;padding:12px;border:2px solid var(--afc-line);background:#fff;
  font-size:.76rem;line-height:1.45;animation:afc-rise .5s ease both;
  min-width:0;overflow-wrap:anywhere;word-break:break-word
}
.afc-data .afc-arrow-h{grid-column:1/-1;justify-self:center;width:60%;flex:none}

/* Readable vertical + parallel flows (ICJ, GA vote, decisions) */
.afc-decision-flow{
  display:flex;flex-direction:column;align-items:center;gap:0;width:100%;padding:6px 0
}
/* Hub: keyword → L1–L4 (2×2, equal cells — not afc-split-2 + branch-col) */
.afc-decision-flow--layers{padding:8px 4px 4px}
.afc-decision-flow--layers .afc-decision{margin-bottom:10px}
.afc-layer-matrix{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;
  width:100%;max-width:min(520px,100%);margin:0 auto;align-items:stretch
}
@media(max-width:420px){.afc-layer-matrix{grid-template-columns:1fr;max-width:360px}}
a.afc-layer-cell{
  display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:4px;
  min-width:0;min-height:88px;padding:12px 14px;text-align:left;text-decoration:none;color:var(--afc-ink);
  background:#fff;border:2px solid var(--afc-line);border-radius:12px;
  box-shadow:0 4px 14px rgba(15,27,45,.06);
  transition:border-color .2s,box-shadow .2s,transform .15s
}
a.afc-layer-cell:hover{border-color:var(--afc-a);box-shadow:0 8px 20px rgba(0,120,180,.12);transform:translateY(-1px)}
a.afc-layer-cell b{display:block;font-size:.78rem;color:var(--afc-b);line-height:1.3}
a.afc-layer-cell .afc-sub{margin-top:0;text-align:left}
.afc-decision-flow--layers .afc-hint{margin-top:12px}
.afc-decision-flow--layers .afc-hint a{color:var(--afc-b);font-weight:700;text-decoration:none}
.afc-decision-flow--layers .afc-hint a:hover{text-decoration:underline}
.afc-decision-flow .afc-step.afc-wide{max-width:min(420px,100%);width:100%}
.afc-split-2{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;width:100%;max-width:540px;margin-top:4px
}
.afc-split-3{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%;max-width:720px;margin-top:8px
}
.afc-split-2 .afc-step,.afc-split-3 .afc-step{max-width:none;width:100%}
.afc-split-2 > .afc-branch-col,.afc-split-3 > .afc-branch-col{align-items:stretch;max-width:none;width:100%}
.afc-split-2 > .afc-branch-col .afc-step,.afc-split-3 > .afc-branch-col .afc-step{width:100%;max-width:none}
.afc-hint{font-size:.68rem;color:var(--afc-muted);text-align:center;margin:6px 0 0;line-height:1.4;max-width:100%}
.afc-parallel{
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:10px;align-items:center;
  width:100%;max-width:560px;margin:4px 0
}
.afc-parallel-lane{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.afc-lane-tag{
  font-size:.66rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  color:#fff;background:var(--afc-b);padding:3px 10px;border-radius:999px
}
.afc-parallel-mid{
  font-size:.62rem;font-weight:800;text-transform:uppercase;color:var(--afc-muted);
  text-align:center;line-height:1.35;max-width:76px;overflow-wrap:anywhere
}
.afc-merge{
  font-size:.74rem;font-weight:700;text-align:center;padding:8px 12px;border-radius:12px;
  border:2px dashed var(--afc-a);background:#f0f9ff;color:var(--afc-b);max-width:min(360px,100%);
  overflow-wrap:anywhere;line-height:1.4
}
@media(max-width:520px){
  .afc-split-2,.afc-split-3,.afc-parallel{grid-template-columns:1fr}
  .afc-parallel-mid{max-width:none;padding:4px 0}
}

.afc-svg-arrows{width:100%;max-width:520px;height:48px;margin:0 auto;display:block}
.afc-svg-arrows path{
  fill:none;stroke:var(--afc-a);stroke-width:2.5;stroke-linecap:round;
  stroke-dasharray:8 6;stroke-dashoffset:28;animation:afc-dash 2s linear infinite
}

body.theme-env{--fc-accent:#0d7a6f;--fc-accent2:#1b5e45}
body.theme-io{--fc-accent:#1565a8;--fc-accent2:#0d47a1}

@media(prefers-reduced-motion:reduce){
  .afc-wrap::before,.afc-start,.afc-end,.afc-step,.afc-decision,.afc-arrow-h,.afc-arrow-v,.afc-svg-arrows path,
  .afc-doc-step,.afc-event,.afc-touch,.afc-log-col,.afc-actor,.afc-system-box,.afc-outcome{animation:none!important}
}

@media(max-width:640px){
  .afc-pipeline{flex-direction:column;align-items:center}
  .afc-pipeline .afc-arrow-h{
    width:14px;height:32px;flex:0 0 32px;
    background:var(--afc-arrow-down) center/contain no-repeat
  }
}

/* Type 9 · PERT / milestone track */
.afc-pert-track{
  display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:center;gap:4px 6px;padding:8px 2px
}
.afc-pert-node{
  flex:1 1 88px;max-width:min(120px,100%);min-width:0;text-align:center;font-size:.7rem;line-height:1.35;padding:10px 6px;
  overflow-wrap:anywhere;word-break:break-word;
  border-radius:12px;border:2px dashed var(--afc-line);background:#fff;color:var(--afc-ink);
  animation:afc-rise .5s ease both
}
.afc-pert-node b{display:block;font-size:.72rem;color:var(--afc-b);margin-bottom:3px}
.afc-pert-node.done{border-style:solid;border-color:var(--afc-a);background:linear-gradient(180deg,#f0f9ff,#fff)}
.afc-pert-node.now{border-color:#c9a227;border-style:solid;background:#fffdf6;box-shadow:0 6px 16px rgba(201,162,39,.2)}
.afc-pert-connector{
  flex:0 0 28px;width:28px;height:14px;margin-top:22px;align-self:flex-start;
  background:var(--afc-arrow-right) center/contain no-repeat;opacity:.9
}
.afc-pert-note{font-size:.74rem;color:var(--afc-muted);text-align:center;margin-top:10px;line-height:1.45}

/* Dynamic flow — animate when section is active (.is-live) */
.dyn-flow:not(.is-live) .afc-wrap::before,
.dyn-flow:not(.is-live) .afc-arrow-h,
.dyn-flow:not(.is-live) .afc-arrow-v,
.dyn-flow:not(.is-live) .afc-pert-connector,
.dyn-flow:not(.is-live) .wire-flow{animation-play-state:paused!important}
.dyn-flow.is-live .afc-step,.dyn-flow.is-live .afc-bubble{animation:afc-rise .55s ease both}

@keyframes wire-draw{from{stroke-dashoffset:120}to{stroke-dashoffset:0}}
@keyframes organ-glow{0%,100%{box-shadow:0 0 0 0 rgba(0,158,219,.35)}50%{box-shadow:0 0 0 10px rgba(0,158,219,0)}}

.organ-explorer{margin:12px 0 18px}
.organ-map{
  position:relative;padding:16px 12px 12px;border-radius:18px;
  background:linear-gradient(180deg,#f0f8ff,#fff);border:2px solid #c5d8ef
}
.organ-core{
  text-align:center;padding:12px;margin:0 auto 14px;max-width:200px;
  background:linear-gradient(135deg,#041e33,#1565a8);color:#fff;border-radius:14px;
  font-weight:800;font-size:.9rem;box-shadow:0 8px 24px rgba(10,45,74,.2)
}
.organ-core span{display:block;font-size:.72rem;font-weight:600;opacity:.9;margin-top:4px}
.organ-wires{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.55}
.organ-wires .wire-flow{
  fill:none;stroke:var(--fc-accent,#009edb);stroke-width:.6;stroke-linecap:round;
  stroke-dasharray:8 6;stroke-dashoffset:120;animation:wire-draw 2.5s ease-in-out infinite
}
.organ-ring{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;position:relative;z-index:1}
@media(max-width:520px){.organ-ring{grid-template-columns:repeat(2,1fr)}}
.organ-pill{
  appearance:none;border:2px solid #d5e3f5;background:#fff;border-radius:14px;padding:10px 8px;
  cursor:pointer;font:inherit;text-align:center;transition:border-color .2s,transform .2s,background .2s;
  min-width:0;overflow-wrap:anywhere;line-height:1.35
}
.organ-pill .ico{font-size:1.25rem;display:block;margin-bottom:4px}
.organ-pill b{display:block;font-size:.78rem;color:#0a2d4a}
.organ-pill small{display:block;font-size:.68rem;color:#5a6a7d;margin-top:2px}
.organ-pill:hover{border-color:#90caf9;transform:translateY(-2px)}
.organ-pill.active{
  border-color:var(--fc-accent,#009edb);background:linear-gradient(180deg,#e8f6ff,#fff);
  animation:organ-glow 2.5s ease-in-out infinite
}
.organ-pill.muted-org{opacity:.88;border-style:dashed}
.organ-panels{margin-top:14px;position:relative;min-height:120px}
.organ-panel{
  display:none;background:#fff;border:2px solid #c5d8ef;border-radius:16px;padding:16px 18px;
  box-shadow:0 10px 28px rgba(15,27,45,.08);animation:afc-rise .35s ease
}
.organ-panel.active{display:grid}
.organ-panel h4{font-family:"Fraunces",serif;color:#0a2d4a;margin:0 0 6px;font-size:1.05rem}
.organ-panel .sub{font-size:.78rem;color:#5a6a7d;margin-bottom:10px}
.organ-panel ul{margin:0;padding-left:18px;font-size:.84rem;line-height:1.6}
.organ-panel .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.organ-panel .tags span{font-size:.68rem;font-weight:700;padding:4px 8px;border-radius:999px;background:#eef6ff;border:1px solid #c5d8ef}

/* Figma-style organ poster + split viz / text */
.organ-chart-wrap{
  margin:0 0 12px;padding:14px 10px 8px;border-radius:18px;
  max-width:100%;overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch;
  background:
    radial-gradient(circle at 50% 0%,rgba(0,158,219,.12),transparent 55%),
    linear-gradient(180deg,#f8fbff,#fff);
  border:2px solid #c5d8ef;position:relative
}
.organ-chart-wrap::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;
  background:repeating-linear-gradient(90deg,rgba(0,158,219,.04) 0 1px,transparent 1px 24px),
    repeating-linear-gradient(0deg,rgba(0,158,219,.03) 0 1px,transparent 1px 24px)
}
.organ-chart{display:block;width:100%;max-width:640px;min-width:0;height:auto;margin:0 auto;position:relative;z-index:1}
.organ-chart .on-box{
  fill:#fff;stroke:#b8d4f0;stroke-width:2;transition:fill .2s,stroke .2s,filter .2s
}
.organ-chart .on-box.dim{fill:#f8fafc;stroke-dasharray:6 4;stroke:#94a3b8}
.organ-chart .on-ico{font-size:18px}
.organ-chart .on-label{font-size:11px;font-weight:800;fill:#0a2d4a}
.organ-chart .on-sub{font-size:8.5px;font-weight:600;fill:#5a6a7d}
.organ-chart .on-hub{fill:url(#organHubGrad);stroke:#009edb;stroke-width:2}
.organ-chart .on-hub-t{font-size:11px;font-weight:800;fill:#fff;text-anchor:middle}
.organ-chart .on-hub-s{font-size:7px;font-weight:600;fill:rgba(255,255,255,.92);text-anchor:middle}
.organ-chart .on-hub-s tspan{font-size:inherit}
.organ-chart .on-label-tight{font-size:9px}
.organ-node{cursor:pointer}
.organ-node:focus{outline:none}
.organ-node:focus .on-box,.organ-node:hover .on-box{stroke:#009edb;filter:drop-shadow(0 4px 10px rgba(0,158,219,.25))}
.organ-node.active .on-box{fill:#e8f6ff;stroke:#009edb;stroke-width:2.5}
.organ-chart .organ-trunk{stroke:#009edb;stroke-width:2}
.organ-thumb-strip{
  display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:10px 0 4px;position:relative;z-index:1
}
.organ-thumb{
  appearance:none;border:2px solid #d5e3f5;background:#fff;border-radius:999px;padding:6px 12px;
  font-size:.72rem;font-weight:700;color:#0a2d4a;cursor:pointer;font:inherit
}
.organ-thumb.active{border-color:#009edb;background:#e8f6ff}
.organ-split{
  display:grid;grid-template-columns:minmax(140px,200px) 1fr;gap:16px;align-items:start
}
@media(max-width:560px){.organ-split{grid-template-columns:1fr}}
.organ-viz{
  border-radius:14px;border:2px solid #d5e3f5;background:linear-gradient(180deg,#f0f9ff,#fff);
  padding:8px;min-height:120px
}
.organ-viz svg{display:block;width:100%;height:auto}
.organ-viz .viz-cap{font-size:.65rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;
  fill:#1565a8;text-anchor:middle}
.organ-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:8px 0 12px}
@media(max-width:480px){.organ-stats{grid-template-columns:1fr}}
.ostat{background:#f5faff;border:1px solid #d5e3f5;border-radius:10px;padding:8px 10px;text-align:center}
.ostat .olab{display:block;font-size:.62rem;font-weight:800;text-transform:uppercase;color:#5a6a7d;letter-spacing:.04em}
.ostat strong{display:block;font-size:.95rem;color:#0a2d4a;margin:2px 0 6px}
.ometer{height:5px;border-radius:99px;background:#e2e8f0;overflow:hidden}
.ometer i{display:block;height:100%;width:var(--p,50%);border-radius:99px;background:linear-gradient(90deg,#009edb,#1565a8)}
.ometer.gold i{background:linear-gradient(90deg,#c9a227,#e8b84a)}
.ometer.mute i{background:#94a3b8}
.organ-copy ul{margin:0;padding-left:18px;font-size:.84rem;line-height:1.6}

.fc-vline.dyn-pipe{position:relative}
.fc-vline.dyn-pipe::after{
  content:"";position:absolute;left:50%;top:0;width:8px;height:8px;margin-left:-4px;border-radius:50%;
  background:var(--un,#009edb);box-shadow:0 0 8px rgba(0,158,219,.8);
  animation:afc-flow-y 1.2s linear infinite
}
.dyn-flow.is-live .fc-vline.dyn-pipe::after{animation:pipe-dot 1.4s ease-in-out infinite}
@keyframes pipe-dot{0%{top:0;opacity:1}100%{top:calc(100% - 8px);opacity:.35}}

/* Type 6 · System flowchart */
.afc-system{
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:10px;align-items:center;width:100%
}
@media(max-width:560px){.afc-system{grid-template-columns:1fr}}
.afc-sys-in,.afc-sys-out{display:flex;flex-direction:column;gap:8px}
.afc-sys-io{
  font-size:.72rem;padding:8px 10px;border-radius:10px;border:2px solid var(--afc-line);
  background:#fff;text-align:center;line-height:1.35;overflow-wrap:anywhere;word-break:break-word
}
.afc-sys-io b,.afc-sys-core b{display:block;margin-bottom:3px;font-size:.74rem;color:var(--afc-b)}
.afc-sys-io .afc-sub,.afc-sys-core .afc-sub{display:block;font-size:.66rem;color:var(--afc-muted);margin-top:2px;font-weight:500}
.afc-sys-io.ext{border-color:#90caf9;background:linear-gradient(180deg,#f0f9ff,#fff)}
.afc-sys-core{
  padding:14px 12px;border-radius:16px;border:2px solid var(--afc-b);
  background:linear-gradient(180deg,#eef6ff,#fff);font-size:.76rem;text-align:center;line-height:1.4;min-width:0
}
.afc-sys-core b{display:block;color:var(--afc-b);margin-bottom:4px}
.afc-sys-mid{display:flex;flex-direction:column;align-items:center;gap:4px}
.afc-sys-mid .afc-arrow-h{width:40px}

/* Type 7 · Document flowchart */
.afc-doc{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;padding:4px 0}
.afc-doc-step{
  position:relative;padding:10px 10px 10px 16px;min-width:0;flex:1 1 100px;max-width:150px;
  font-size:.72rem;line-height:1.35;text-align:center;overflow-wrap:anywhere;
  background:#fff;border:2px solid var(--afc-line);border-radius:4px 12px 12px 4px;
  box-shadow:3px 3px 0 rgba(184,212,240,.5);animation:afc-rise .5s ease both
}
.afc-doc-step::before{
  content:"";position:absolute;left:5px;top:8px;bottom:8px;width:3px;background:var(--afc-a);border-radius:2px
}
.afc-doc-step b{display:block;font-size:.74rem;color:var(--afc-b);margin-bottom:3px}
.afc-doc .afc-arrow-h{flex:0 0 18px}

/* Type 10 · Use case */
.afc-usecase{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:stretch;width:100%
}
.afc-usecase .afc-uc-arrow{display:none}
.afc-usecase .afc-actor::after,.afc-usecase .afc-system-box::after{
  content:"→";display:block;text-align:center;margin-top:8px;font-size:1rem;color:var(--afc-a);font-weight:800
}
@media(min-width:521px){
  .afc-usecase{grid-template-columns:1fr auto 1fr auto 1fr;align-items:center}
  .afc-usecase .afc-uc-arrow{display:block}
  .afc-usecase .afc-actor::after,.afc-usecase .afc-system-box::after{display:none}
}
@media(max-width:560px){
  .afc-usecase{grid-template-columns:1fr;justify-items:center}
  .afc-uc-arrow{transform:rotate(90deg)}
}
.afc-actor,.afc-system-box,.afc-outcome{
  padding:10px 8px;border-radius:12px;font-size:.72rem;text-align:center;line-height:1.4;border:2px solid var(--afc-line);
  background:#fff;min-width:0;overflow-wrap:anywhere;animation:afc-rise .5s ease both
}
.afc-actor{border-color:#e8c878;background:linear-gradient(180deg,#fffdf6,#fff)}
.afc-system-box{border-color:var(--afc-a);background:linear-gradient(180deg,#f0f9ff,#fff)}
.afc-outcome{border-color:#66bb6a;background:linear-gradient(180deg,#f1f8f4,#fff)}

/* Event sequence (5 steps + SVG arrows between) */
.afc-events{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 2px;
  width:100%;max-width:100%;padding:8px 0 12px
}
.afc-events--seq5{
  flex-wrap:nowrap;gap:0 4px;justify-content:flex-start;
  overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch
}
@media(max-width:720px){
  .afc-events--seq5{flex-wrap:wrap;gap:8px;justify-content:center}
  .afc-events--seq5 .afc-conn-h{display:none}
  .afc-events--seq5 .afc-event{flex:1 1 calc(50% - 8px);max-width:none}
}
.afc-event{
  flex:1 1 110px;min-width:0;max-width:168px;padding:10px 10px;border-radius:10px;margin:0;
  background:#fff;border:2px solid var(--afc-line);font-size:.68rem;line-height:1.4;text-align:center;
  position:relative;animation:afc-rise .45s ease both;overflow-wrap:anywhere;word-break:break-word
}
.afc-events--seq5 .afc-event{flex:1 1 0;max-width:none;min-width:0}
.afc-event::before,.afc-event::after{display:none}
.afc-event b{display:block;font-size:.72rem;color:var(--afc-b);margin-bottom:3px;line-height:1.25}
.afc-event .afc-sub{display:block;font-size:.64rem;color:var(--afc-muted);line-height:1.35;margin-top:0;font-weight:500}
.afc-event.c1{border-top:4px solid var(--afc-a)}
.afc-event.c2{border-top:4px solid #c9a227}
.afc-event.c3{border-top:4px solid #2e7d32}
.afc-event.c4{border-top:4px solid #c62828}

/* Type 12 · Customer / stakeholder journey */
.afc-journey{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px;padding:6px 0}
.afc-touch{
  flex:0 1 76px;min-width:64px;text-align:center;font-size:.64rem;line-height:1.25;padding:10px 6px;
  border-radius:999px;border:2px solid var(--afc-line);background:#fff;margin:2px;
  animation:afc-rise .5s ease both;overflow-wrap:anywhere
}
.afc-touch strong{display:block;font-size:.68rem;color:var(--afc-b);margin-bottom:3px}
.afc-touch .afc-sub{font-size:.62rem;color:var(--afc-muted);line-height:1.25;display:block}
.afc-journey .afc-arrow-h{flex:0 0 24px;min-width:20px}
.afc-uc-arrow{
  width:32px;height:14px;margin:0 auto;
  background:var(--afc-arrow-right) center/contain no-repeat
}

/* Type 13 · Production / order flow */
.afc-prod{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;padding:4px 0}
.afc-prod .afc-step{flex:1 1 100px;max-width:160px}

/* Type 14 · Logical model (IPO + outcome) */
.afc-logical{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;align-items:stretch;width:100%}
@media(max-width:720px){.afc-logical{grid-template-columns:repeat(2,1fr)}}
.afc-log-col{
  padding:10px;border-radius:12px;border:2px solid var(--afc-line);background:#fff;min-width:0;
  animation:afc-rise .5s ease both
}
.afc-log-col h6{margin:0 0 8px;font-size:.66rem;text-transform:uppercase;letter-spacing:.06em;color:var(--afc-muted)}
.afc-log-col ul{margin:0;padding-left:16px;font-size:.71rem;line-height:1.45}
.afc-log-col.proc{border-color:var(--afc-a);background:linear-gradient(180deg,#f8fcff,#fff)}
.afc-log-col.out{border-color:#2e7d32;background:linear-gradient(180deg,#f6fff8,#fff)}

/* Type 17 · Website / study sitemap */
.afc-sitemap{display:flex;flex-direction:column;align-items:center;gap:8px;padding:8px 0}
.afc-site-row{
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px;align-items:stretch;
  width:100%;max-width:100%
}
.afc-site-node{
  flex:0 1 auto;max-width:100%;
  font-size:.72rem;font-weight:700;padding:8px 12px;border-radius:10px;
  border:2px solid var(--afc-line);background:#fff;text-decoration:none;color:var(--afc-ink);
  transition:border-color .2s,background .2s;cursor:pointer;font-family:inherit;
  text-align:center;line-height:1.35;overflow-wrap:anywhere;word-break:break-word
}
.afc-site-node:hover,.afc-site-node:focus{border-color:var(--afc-a);background:#e8f6ff;outline:none}
.afc-site-node.root{background:linear-gradient(135deg,#041e33,var(--afc-b));color:#fff;border-color:transparent}
.afc-site-node.dim{opacity:.92;border-style:dashed;font-weight:600}