/* =========================================================
   ETHOS Diagram Toolkit — editable HTML/SVG infographics
   Brand: navy #0A1F44 · gold #D4AF37 · off-white #F8F9FA
   Every animation is disabled under prefers-reduced-motion.
   ========================================================= */
.ed { --ed-navy:#0A1F44; --ed-gold:#D4AF37; --ed-gold-l:#E5C158; --ed-ink:#334155; --ed-mute:#4b5563;
      font-family: inherit; color: var(--ed-ink); }
.ed-title { text-align:center; font-weight:700; color:var(--ed-navy); font-size:1.25rem; margin-bottom:.35rem; }
.ed-sub   { text-align:center; color:var(--ed-mute); font-size:.95rem; margin-bottom:2rem; }

/* ---------- reveal (shared) ---------- */
.ed .ed-r { opacity:0; transform:translateY(14px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.ed.in-view .ed-r { opacity:1; transform:none; }
.ed.in-view .ed-r:nth-child(1){transition-delay:.05s} .ed.in-view .ed-r:nth-child(2){transition-delay:.18s}
.ed.in-view .ed-r:nth-child(3){transition-delay:.31s} .ed.in-view .ed-r:nth-child(4){transition-delay:.44s}
.ed.in-view .ed-r:nth-child(5){transition-delay:.57s} .ed.in-view .ed-r:nth-child(6){transition-delay:.70s}
.ed.in-view .ed-r:nth-child(7){transition-delay:.83s} .ed.in-view .ed-r:nth-child(8){transition-delay:.96s}
.ed.in-view .ed-r:nth-child(9){transition-delay:1.09s} .ed.in-view .ed-r:nth-child(10){transition-delay:1.22s}

/* ---------- TIMELINE ---------- */
.ed-tl { position:relative; display:grid; gap:2rem; max-width:64rem; grid-template-columns:repeat(var(--n,4),minmax(0,1fr)); list-style:none; margin:0 auto; padding:0; }
.ed-tl-item { text-align:center; position:relative; min-width:0; }
.ed-tl-year { display:inline-block; font-weight:800; font-size:.85rem; letter-spacing:.06em; color:#fff;
              background:var(--ed-navy); padding:.3rem .75rem; border-radius:999px; margin-bottom:.75rem; }
.ed-tl-item:last-child .ed-tl-year { background:var(--ed-gold); color:var(--ed-navy); }
/* track row: line segments run through the dot centres */
.ed-tl-track { position:relative; height:1.4rem; margin-bottom:.85rem; }
.ed-tl-track::before { content:""; position:absolute; top:50%; height:3px; margin-top:-1.5px; left:-1rem; right:-1rem;
                       background:#0A1F44; transform:scaleX(0); transform-origin:left;
                       transition:transform .9s cubic-bezier(.2,.7,.2,1); }
.ed-tl-item:first-child .ed-tl-track::before { left:50%; }
.ed-tl-item:last-child  .ed-tl-track::before { right:50%; background:#B8942B; }
.ed-tl-item:nth-last-child(2) .ed-tl-track::before { background:linear-gradient(90deg,#0A1F44 35%,#B8942B); }
.ed.in-view .ed-tl-track::before { transform:scaleX(1); }
.ed.in-view .ed-tl-item:nth-child(2) .ed-tl-track::before{transition-delay:.25s}
.ed.in-view .ed-tl-item:nth-child(3) .ed-tl-track::before{transition-delay:.5s}
.ed.in-view .ed-tl-item:nth-child(4) .ed-tl-track::before{transition-delay:.75s}
.ed.in-view .ed-tl-item:nth-child(5) .ed-tl-track::before{transition-delay:1s}
.ed-tl-dot { position:absolute; left:50%; top:50%; width:1.15rem; height:1.15rem; margin:-.575rem 0 0 -.575rem; border-radius:50%;
             background:#fff; border:3px solid var(--ed-navy); z-index:1; }
.ed-tl-item:last-child .ed-tl-dot { border-color:#A8861F; background:var(--ed-gold); }
.ed.in-view .ed-tl-item:last-child .ed-tl-dot { animation:ed-pulse 2.6s ease-in-out 1.4s infinite; }
.ed-tl-icon { font-size:1.35rem; color:#A8861F; margin-bottom:.45rem; }
.ed-tl-h { font-weight:700; color:var(--ed-navy); margin-bottom:.3rem; }
.ed-tl-p { font-size:.875rem; color:var(--ed-mute); line-height:1.45; margin:0; }
@keyframes ed-pulse { 0%,100%{box-shadow:0 0 0 0 rgba(212,175,55,.55)} 50%{box-shadow:0 0 0 9px rgba(212,175,55,0)} }
@media (max-width:767px){
  .ed-tl { grid-template-columns:minmax(0,1fr); gap:1.5rem; }
  .ed-tl-item { text-align:left; padding-left:2.5rem; }
  .ed-tl-track { position:absolute; left:0; top:0; bottom:-1.5rem; width:1.4rem; height:auto; margin:0; }
  .ed-tl-track::before { left:50%; right:auto; width:3px; margin:0 0 0 -1.5px; top:0; bottom:0; height:auto;
                         transform:scaleY(0); transform-origin:top; }
  .ed-tl-item:first-child .ed-tl-track::before { left:50%; top:.75rem; }
  .ed-tl-item:last-child .ed-tl-track::before { right:auto; bottom:auto; height:.75rem; background:#0A1F44; }
  .ed.in-view .ed-tl-track::before { transform:scaleY(1); }
  .ed-tl-dot { top:.75rem; }
}
/* ---------- STEP FLOW ---------- */
.ed-flow { display:grid; gap:2rem; grid-template-columns:repeat(var(--cols,4),minmax(0,1fr)); max-width:70rem; margin:0 auto; list-style:none; padding:0; }
.ed-step { background:#fff; border:1px solid #e5e7eb; border-radius:.9rem; padding:1.15rem 1.1rem 1.2rem; position:relative; overflow:visible;
           box-shadow:0 1px 2px rgba(10,31,68,.05); transition:transform .25s ease, box-shadow .25s ease, opacity .7s ease; }
.ed-step::before { content:""; position:absolute; left:0; right:0; top:0; height:4px; border-radius:.9rem .9rem 0 0; background:var(--ph,var(--ed-gold)); }
.ed-step:hover { transform:translateY(-4px); box-shadow:0 10px 24px -12px rgba(10,31,68,.35); }
.ed-step-n { width:2rem; height:2rem; border-radius:50%; display:grid; place-items:center; font-weight:800; font-size:.85rem;
             background:var(--ed-navy); color:var(--ed-gold); margin:.35rem 0 .7rem; }
.ed-step-h { font-weight:700; color:var(--ed-navy); font-size:1rem; line-height:1.3; min-height:2.6em; margin-bottom:.15rem; }
.ed-step-p { font-size:.86rem; color:var(--ed-mute); line-height:1.5; margin:0; }
.ed-step-arrow { position:absolute; right:-1.55rem; top:50%; transform:translateY(-50%); width:1.1rem; height:1.1rem;
                 color:#A8861F; font-size:.95rem; display:grid; place-items:center; z-index:2; }
.ed-flow > li:last-child .ed-step-arrow { display:none; }
@media (min-width:768px){ .ed-flow > li:nth-child(4n) .ed-step-arrow { display:none; } }
.ed-step[data-phase="1"] { --ph:#D4AF37; } .ed-step[data-phase="2"] { --ph:#0A1F44; } .ed-step[data-phase="3"] { --ph:#5b7aa8; }
.ed-phases { display:flex; flex-wrap:wrap; justify-content:center; gap:1.25rem; margin:-1rem 0 1.75rem; font-size:.82rem; color:var(--ed-ink); }
.ed-phases span { display:inline-flex; align-items:center; gap:.45rem; font-weight:600; }
.ed-phases i { width:.9rem; height:.9rem; border-radius:3px; display:inline-block; }
.ed-loop { max-width:56rem; margin:.4rem auto 0; position:relative; height:2.6rem; border:2px dashed #D4AF37; border-top:0; border-radius:0 0 1.2rem 1.2rem;
           display:flex; align-items:flex-end; justify-content:center; color:#8a6d16; font-size:.85rem; font-weight:600; }
.ed-loop span { background:#fff; padding:0 .7rem; transform:translateY(.65rem); display:inline-flex; gap:.5rem; align-items:center; }
.ed-loop::before { content:"\f062"; font-family:"Font Awesome 6 Free"; font-weight:900; position:absolute; left:-.42rem; top:-.75rem; color:#A8861F; font-size:.85rem; }
.ed.in-view .ed-loop i { animation:ed-spin 6s linear infinite; }
@media (max-width:767px){ .ed-loop{ height:auto; border:0; } .ed-loop::before{ display:none; } .ed-loop span{ transform:none; } }@media (max-width:767px){
  .ed-flow { grid-template-columns:minmax(0,1fr); gap:1.6rem; }
  .ed-flow > li .ed-step-arrow { display:grid; right:auto; left:50%; top:auto; bottom:-1.45rem; transform:translateX(-50%) rotate(90deg); }
  .ed-flow > li:last-child .ed-step-arrow { display:none; }
  .ed-step-h { min-height:0; }
}

/* ---------- PILLAR WHEEL ---------- */
.ed-wheel { display:grid; grid-template-columns:minmax(0,1fr); gap:2rem; align-items:center; justify-content:center; max-width:64rem; margin:0 auto; }
@media (min-width:1024px){ .ed-wheel{ grid-template-columns:minmax(0,26rem) minmax(0,26rem); gap:3.5rem; } }
.ed-wheel svg { width:100%; max-width:26rem; margin:0 auto; display:block; overflow:visible; }
.ed-seg { cursor:pointer; transition:transform .3s ease, filter .3s ease, opacity .6s ease; transform-origin:200px 200px; outline:none; }
.ed-seg:hover, .ed-seg.on, .ed-seg:focus-visible { transform:scale(1.045); filter:drop-shadow(0 6px 10px rgba(10,31,68,.35)); }
.ed .ed-seg { opacity:0; } .ed.in-view .ed-seg { opacity:1; }
.ed-hub-ring { transform-origin:200px 200px; }
.ed.in-view .ed-hub-ring { animation:ed-spin 40s linear infinite; }
@keyframes ed-spin { to { transform:rotate(360deg); } }
.ed-legend { list-style:none; margin:0 auto; padding:0; display:grid; gap:.2rem; max-width:26rem; width:100%; }
.ed-legend li { display:flex; gap:.8rem; align-items:center; padding:.45rem .65rem; border-radius:.6rem; transition:background .2s ease; cursor:default; }
.ed-legend li:hover, .ed-legend li.on { background:#f8f5e9; }
.ed-legend .n { flex:none; width:1.85rem; height:1.85rem; border-radius:50%; display:grid; place-items:center; font-size:.8rem;
                font-weight:800; color:#fff; font-variant-numeric:tabular-nums; line-height:1; }
.ed-legend .t { font-weight:600; color:var(--ed-navy); font-size:.93rem; line-height:1.3; }
.ed-hint-touch { display:none; } @media (hover:none){ .ed-hint-hover{display:none;} .ed-hint-touch{display:inline;} }

/* ---------- HUB & SPOKE ---------- */
.ed-hub { position:relative; max-width:46rem; margin:0 auto; }
.ed-hub svg { width:100%; height:auto; display:block; }
.ed-spoke-line { stroke:var(--ed-gold); stroke-width:2; fill:none; stroke-dasharray:6 6; }
.ed.in-view .ed-spoke-line { animation:ed-flowdash 1.4s linear infinite; }
@keyframes ed-flowdash { to { stroke-dashoffset:-24; } }

/* ---------- BRANCH MAP (trunk + branches) ---------- */
.ed-branch { display:grid; gap:.7rem; max-width:46rem; margin:0 auto; position:relative; padding-left:2rem; }
.ed-branch::before { content:""; position:absolute; left:.55rem; top:1.4rem; bottom:1.4rem; width:3px; border-radius:3px; background:#e9dcae;
                     transform:scaleY(0); transform-origin:top; transition:transform 1.1s cubic-bezier(.2,.7,.2,1); }
.ed.in-view .ed-branch::before { transform:scaleY(1); }
.ed-branch-row { position:relative; display:grid; grid-template-columns:13.5rem 1fr auto; align-items:center; gap:1.25rem;
                 background:#fff; border:1px solid #e5e7eb; border-radius:.75rem; padding:.8rem 1.1rem; box-shadow:inset 4px 0 0 var(--c,#D4AF37);
                 transition:transform .25s ease, box-shadow .25s ease, opacity .7s ease; }
.ed-branch-row::before { content:""; position:absolute; left:-1.45rem; top:50%; width:1.45rem; border-top:3px solid #e9dcae; }
.ed-branch-row::after { content:""; position:absolute; left:-1.72rem; top:50%; width:.6rem; height:.6rem; margin-top:-.3rem; border-radius:50%; background:#D4AF37; }
.ed-branch-row:hover { transform:translateX(4px); box-shadow:inset 4px 0 0 var(--c,#D4AF37), 0 8px 20px -12px rgba(10,31,68,.35); }
.ed-branch-h { font-weight:700; color:var(--ed-navy); white-space:nowrap; }
.ed-branch-p { font-size:.9rem; color:var(--ed-mute); }
.ed-stars { color:#A8861F; white-space:nowrap; font-size:.85rem; }
@media (max-width:640px){ .ed-branch-row{ grid-template-columns:1fr; gap:.2rem; } .ed-branch-h{ white-space:normal; } }
/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .ed *, .ed *::before, .ed *::after { animation:none !important; transition:none !important; }
  .ed .ed-r, .ed .ed-seg { opacity:1 !important; transform:none !important; }
  .ed-tl-track::before, .ed-branch::before { transform:none !important; }
}