/* ==========================================================================
   AEVYX flow chart — portable component  (v1)
   Pairs with assets/flowchart.js. All classes are namespaced .afx-*.
   Self-contained on a dark surface: every colour falls back to its own value
   but picks up the host theme's variable when one exists.
   Stacking is driven by JS (.afx--stack / .afx--narrow), not media queries,
   so the same component works inside any container width.
   ========================================================================== */

.afx{
  /* theme hooks — host vars win, fallbacks keep it standalone */
  --afx-ease:cubic-bezier(.22,1,.36,1);
  --afx-mono:var(--mono,ui-monospace,SFMono-Regular,Menlo,Consolas,monospace);
  --afx-panel:var(--panel,#1c2027);
  --afx-raise:var(--raise,#272c35);
  --afx-line:var(--line,#272c35);
  --afx-line2:var(--line2,#38404c);
  --afx-ink:var(--ink,#f3f5f8);
  --afx-ink2:var(--ink2,#a8b0bc);
  --afx-ink3:var(--ink3,#6c7583);
  --afx-s2:var(--s2,#adb5c0);
  --afx-s3:var(--s3,#7b8492);
  --afx-indigo:var(--ultra,#1e3dff);
  --afx-gold:var(--gold,#ffb224);
  --afx-emerald:var(--emer,#00c26e);
  --afx-verm:var(--verm,#f23c15);
  --afx-indigo-ink:#8f9dff;
  --afx-emerald-ink:#2ee08f;
  --afx-verm-ink:#ff8a69;
  --afx-gap:34px;

  display:block;
  border:1px solid var(--afx-line);
  border-radius:20px;
  background:linear-gradient(180deg,rgba(28,32,39,.82),rgba(19,21,25,.82));
  padding:20px;
  overflow:hidden;
  color:var(--afx-ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif;
}
.afx *{box-sizing:border-box;margin:0;padding:0}
.afx--tight{--afx-gap:30px}
.afx--stack{padding:14px;border-radius:16px}

/* ---------- hint strip ---------- */
.afx-hint{
  font:650 11px/1.5 var(--afx-mono);letter-spacing:.1em;color:var(--afx-ink3);
  text-transform:uppercase;margin-bottom:16px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.afx-hint i{width:7px;height:7px;border-radius:50%;background:var(--afx-indigo);display:block;flex:0 0 auto}

/* ---------- grid of columns ---------- */
.afx-grid{position:relative;display:grid;gap:var(--afx-gap);align-items:stretch}
.afx-wires{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:visible}
.afx-wires path{fill:none;transition:opacity .28s var(--afx-ease)}
.afx-wires path.afx-base{stroke:var(--afx-line2);stroke-width:1.1;opacity:.72}
.afx-wires path.afx-hl{stroke:var(--afx-indigo);stroke-width:1.9;opacity:0}
.afx-grid.afx-focused .afx-wires path.afx-base{opacity:.14}
.afx-grid.afx-focused .afx-wires path.afx-hl.afx-on{opacity:.95}

.afx-col{display:flex;flex-direction:column;min-width:0;position:relative;z-index:1}
.afx-chead{
  font:800 10.5px/1.3 var(--afx-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--afx-s3);
  padding-bottom:12px;margin-bottom:12px;border-bottom:1px dashed var(--afx-line2);
  display:flex;gap:8px;align-items:center}
.afx-chead b{color:var(--afx-ink3);font-weight:800}
.afx-cards{flex:1;display:flex;flex-direction:column;justify-content:center;gap:8px}
.afx-col--top .afx-cards{justify-content:flex-start}

/* ---------- card ---------- */
.afx-card{
  position:relative;display:block;width:100%;text-align:left;
  border:1px solid var(--afx-line2);border-radius:11px;background:var(--afx-panel);
  padding:10px 11px;color:var(--afx-ink);cursor:pointer;font-family:inherit;
  transition:transform .25s var(--afx-ease),opacity .25s var(--afx-ease)}
.afx-card:hover,.afx-card:focus-visible{transform:translateY(-2px);outline:none}
.afx-card::after{
  content:'';position:absolute;inset:-1px;border-radius:12px;border:1px solid var(--afx-indigo);
  opacity:0;transition:opacity .25s var(--afx-ease);pointer-events:none}
.afx-card.afx-on::after{opacity:1}
.afx-grid.afx-focused .afx-card:not(.afx-on){opacity:.58}

.afx-ct{font-size:13px;font-weight:700;letter-spacing:-.012em;line-height:1.25;display:block}
.afx-cs{font:650 9.5px/1.3 var(--afx-mono);letter-spacing:.11em;text-transform:uppercase;
  color:var(--afx-ink3);margin-top:5px;display:block}
.afx-crow{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.afx-tag{font:800 10.5px/1.2 var(--afx-mono);letter-spacing:.02em;color:currentColor;white-space:nowrap}
.afx-lead{font-size:12.5px;color:var(--afx-ink2);line-height:1.5;margin-top:7px}
.afx-meta{margin-top:11px;border-top:1px dashed var(--afx-line2);padding-top:10px;display:grid;gap:6px}
.afx-mr{display:grid;grid-template-columns:86px 1fr;gap:10px;align-items:baseline}
.afx-mr dt{font:700 9.5px/1.5 var(--afx-mono);letter-spacing:.11em;text-transform:uppercase;color:var(--afx-ink3)}
.afx-mr dd{font:650 11.5px/1.5 var(--afx-mono);color:var(--afx-s2);letter-spacing:.01em}
.afx--narrow .afx-mr{grid-template-columns:1fr;gap:1px}

/* bigger card variant, for one wide "engine"-style box */
.afx-card--wide{padding:16px 17px;cursor:default}
.afx-card--wide .afx-ct{font-size:20px;font-weight:800;letter-spacing:-.035em;line-height:1.1;margin-top:9px}
.afx-card--wide .afx-cs{margin-top:0;font-size:10.5px;letter-spacing:.17em}
.afx-card--wide:hover{transform:none}

/* ---------- tones ---------- */
.afx-src{background:rgba(28,32,39,.9)}
.afx-src .afx-cs{color:var(--afx-s3)}
.afx-eng{border-color:rgba(30,61,255,.5);background:rgba(30,61,255,.1);color:var(--afx-ink)}
.afx-eng .afx-cs{color:var(--afx-indigo-ink)}
.afx-chk{border-color:rgba(255,178,36,.42);background:rgba(255,178,36,.08)}
.afx-chk .afx-cs{color:var(--afx-gold)}
.afx-alert{border-color:rgba(242,60,21,.42);background:rgba(242,60,21,.07)}
.afx-alert .afx-cs{color:var(--afx-verm-ink)}
.afx-out{border-color:rgba(0,194,110,.45);background:rgba(0,194,110,.08)}
.afx-out .afx-cs{color:var(--afx-emerald-ink)}
.afx-plain .afx-cs{color:var(--afx-ink3)}

/* per-card accent, used for the outline + tag colour */
.afx-card{--afx-accent:var(--afx-indigo)}
.afx-card::after{border-color:var(--afx-accent)}
.afx-a-emerald{--afx-accent:var(--afx-emerald);color:var(--afx-emerald-ink)}
.afx-a-gold{--afx-accent:var(--afx-gold);color:var(--afx-gold)}
.afx-a-indigo{--afx-accent:var(--afx-indigo);color:var(--afx-indigo-ink)}
.afx-a-silver{--afx-accent:var(--afx-s2);color:var(--afx-s2)}
.afx-a-vermilion{--afx-accent:var(--afx-verm);color:var(--afx-verm-ink)}
.afx-card.afx-a-emerald,.afx-card.afx-a-gold,.afx-card.afx-a-indigo,
.afx-card.afx-a-silver,.afx-card.afx-a-vermilion{color:var(--afx-ink)}
.afx-a-emerald .afx-tag{color:var(--afx-emerald-ink)}
.afx-a-gold .afx-tag{color:var(--afx-gold)}
.afx-a-indigo .afx-tag{color:var(--afx-indigo-ink)}
.afx-a-silver .afx-tag{color:var(--afx-s2)}
.afx-a-vermilion .afx-tag{color:var(--afx-verm-ink)}

/* small flag chip on a card, e.g. "I HAVE DONE THIS" */
.afx-flag{display:inline-block;margin-top:7px;
  font:800 8.5px/1 var(--afx-mono);letter-spacing:.1em;text-transform:uppercase;
  padding:5px 7px;border-radius:5px;
  background:rgba(0,194,110,.16);color:var(--afx-emerald-ink);border:1px solid rgba(0,194,110,.4)}
.afx-flag--soft{background:var(--afx-raise);color:var(--afx-ink3);border-color:var(--afx-line2)}

/* ---------- inspector ---------- */
.afx-insp{margin-top:20px;border-top:1px solid var(--afx-line);padding-top:16px;
  display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;min-height:92px}
.afx--narrow .afx-insp{grid-template-columns:1fr;min-height:120px}
.afx-ib{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;flex:0 0 auto;
  font:800 13px/1 var(--afx-mono);background:var(--afx-raise);color:var(--afx-s2);border:1px solid var(--afx-line2)}
.afx-insp h4{font-size:16px;font-weight:750;letter-spacing:-.02em}
.afx-insp p{font-size:13.5px;color:var(--afx-ink2);line-height:1.55;margin-top:5px;max-width:78ch}
.afx-fd{font:650 11px/1.5 var(--afx-mono);color:var(--afx-ink3);letter-spacing:.06em;margin-top:8px}
.afx-fd b{color:var(--afx-s2);font-weight:700}

/* ---------- stacked (narrow container) ---------- */
.afx--stack .afx-grid{grid-template-columns:1fr!important;gap:0}
.afx--stack .afx-wires{display:none}
.afx--stack .afx-col:not(:first-of-type)::before{
  content:'';display:block;width:2px;height:30px;margin:20px auto 8px;border-radius:2px;
  background:linear-gradient(to bottom,transparent,var(--afx-s3))}
.afx--stack .afx-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.afx--narrow .afx-cards{grid-template-columns:1fr}
.afx--stack .afx-card:hover,.afx--stack .afx-card:focus-visible{transform:translateY(-2px)}

@media(prefers-reduced-motion:reduce){
  .afx-card,.afx-wires path{transition:none}
  .afx-card:hover,.afx-card:focus-visible{transform:none}
}