/* ZXM Diagnostic Loop v1.0.0 — animated diagnostic consulting approach diagram.
   All rules are scoped to .zxm-dl. Fonts come from the Elementor kit (Instrument Sans,
   Bricolage Grotesque, DM Mono). */

/* Elementor column containers centre their children; stretch the widget that holds us. */
.elementor-widget:has(.zxm-dl) { align-self: stretch; width: 100%; max-width: 100%; }

.zxm-dl { position: relative; margin: 0; width: 100%; }
.zxm-dl svg { display: block; width: 100%; height: auto; overflow: visible; }
.zxm-dl text { font-family: "Instrument Sans", sans-serif; fill: #0A1628; }
.zxm-dl .t-h   { font-weight: 700; font-size: 38px; letter-spacing: -.01em; text-anchor: middle; }
.zxm-dl .t-sub { font-size: 21px; text-anchor: middle; }
.zxm-dl .t-ch  { font-weight: 700; font-size: 21px; text-anchor: middle; }
.zxm-dl .t-cs  { font-size: 16.5px; text-anchor: middle; }
.zxm-dl .t-title    { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 36px; fill: #fff; }
.zxm-dl .t-subtitle { font-size: 23px; fill: rgba(255,255,255,.72); }
.zxm-dl .t-lbl  { font-weight: 700; font-size: 25px; text-anchor: middle; fill: #fff; }
.zxm-dl .t-lbls { font-size: 20px; text-anchor: middle; fill: rgba(255,255,255,.72); }
.zxm-dl .t-copy { font-size: 12.5px; fill: rgba(255,255,255,.55); }
.zxm-dl .t-mark { font-family: "DM Mono", monospace; font-size: 13px; letter-spacing: .2em; fill: rgba(255,255,255,.6); text-anchor: end; }

.zxm-dl .box      { fill: #fff; stroke-width: 2.5; }
.zxm-dl .box-gold { stroke: #B8860B; }
.zxm-dl .box-grey { stroke: #8C99AB; }
.zxm-dl .box-navy { stroke: #0A1628; stroke-width: 2; }
.zxm-dl .card-cream { fill: #FBEBC6; }
.zxm-dl .card-grey  { fill: #D5DAE3; }
.zxm-dl .loop { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.zxm-dl .loop-other { stroke: #C9D3E0; stroke-width: 7; }
.zxm-dl .loop-zxm   { stroke: #B8860B; stroke-width: 8; }
.zxm-dl .ring { fill: none; stroke-width: 6; opacity: 0; }
.zxm-dl .glow { opacity: 0; }

.zxm-dl .zxm-dl-replay {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 12px;
  font: 13px/1 "DM Mono", monospace; letter-spacing: .12em; text-transform: uppercase;
  color: #D4A017; background: transparent; border: 1px solid rgba(212,160,23,.5);
  border-radius: 4px; padding: 10px 14px; cursor: pointer;
}
.zxm-dl .zxm-dl-replay:hover,
.zxm-dl .zxm-dl-replay:focus-visible { background: rgba(212,160,23,.12); outline: none; border-color: #D4A017; color: #D4A017; }
.zxm-dl .zxm-dl-replay[hidden] { display: none; }

/* Armed = JavaScript present and motion allowed. Without it the finished diagram shows. */
.zxm-dl.is-armed [data-s] { opacity: 0; }
.zxm-dl.is-armed .draw { stroke-dasharray: 1; stroke-dashoffset: 1; }

.zxm-dl.is-playing [data-s]      { animation: zxmdl-rise .55s cubic-bezier(.2,.7,.2,1) var(--d,0s) both; }
.zxm-dl.is-playing .tri[data-s]  { animation: zxmdl-tri .6s cubic-bezier(.3,1.6,.5,1) var(--d,0s) both; transform-box: fill-box; transform-origin: center; }
.zxm-dl.is-playing .fade[data-s] { animation: zxmdl-fade .6s ease var(--d,0s) both; }
.zxm-dl.is-playing .draw[data-s] { opacity: 1; animation: zxmdl-draw var(--len,1.2s) cubic-bezier(.45,.05,.35,1) var(--d,0s) both; }
.zxm-dl.is-playing .head[data-s] { animation: zxmdl-fade .25s ease var(--d,0s) both; }
.zxm-dl.is-playing .ring[data-s] { animation: zxmdl-ring 1.6s ease-out var(--d,0s) both; }
.zxm-dl.is-playing .glow[data-s] { animation: zxmdl-glow 2.2s ease-in-out var(--d,0s) both; }

@keyframes zxmdl-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes zxmdl-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes zxmdl-tri  { from { opacity: 0; transform: translateX(-14px) scale(.4); } to { opacity: 1; transform: none; } }
@keyframes zxmdl-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes zxmdl-ring { 0% { opacity: 0; } 20% { opacity: .9; } 100% { opacity: 0; } }
@keyframes zxmdl-glow { 0% { opacity: 0; } 35% { opacity: 1; } 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .zxm-dl.is-armed [data-s] { opacity: 1 !important; animation: none !important; }
  .zxm-dl.is-armed .draw { stroke-dashoffset: 0 !important; }
  .zxm-dl.is-armed .ring, .zxm-dl.is-armed .glow { opacity: 0 !important; }
  .zxm-dl .zxm-dl-replay { display: none !important; }
}