/**
 * Process Demo Component
 * Self-contained CSS for the §3.1 demo animation
 */

#demo{margin-top:40px;border:1px solid var(--rule);background:var(--form)}
#demo .dm-top{display:flex;justify-content:space-between;align-items:baseline;gap:14px;flex-wrap:wrap;
  padding:12px 16px;border-bottom:1px solid var(--rule);background:var(--paper-2)}
#demo .dm-tt{font-family:var(--data);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;font-weight:600}
#demo .dm-tm{font-family:var(--data);font-size:9.5px;letter-spacing:.07em;color:var(--muted)}
#demo .dm-rail{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule-soft)}
#demo .dm-step{background:var(--form);padding:10px 14px 11px;position:relative;cursor:pointer;
  border:none;text-align:left;font:inherit;color:inherit;transition:background .3s ease}
#demo .dm-step.on{background:var(--teal-soft)}
#demo .dm-sn{font-family:var(--data);font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
#demo .dm-step.on .dm-sn{color:var(--teal)}
#demo .dm-st{font-size:13px;font-weight:500;margin-top:4px;line-height:1.3;color:var(--muted)}
#demo .dm-step.on .dm-st{color:var(--teal)}
#demo .dm-sb{position:absolute;left:0;bottom:0;height:2px;background:var(--teal);width:0}
#demo .dm-canvas{display:grid;grid-template-columns:1fr;border-top:1px solid var(--rule)}
@media(max-width:899px){
  #demo .dm-canvas{height:400px;overflow:hidden}
  #demo .dm-p{display:none;height:100%}
  #demo .dm-p.show{display:flex}
}
@media(max-width:480px){
  #demo{display:none}
}
@media(min-width:900px){
  #demo .dm-canvas{grid-template-columns:.82fr 1.02fr 1.16fr}
  #demo .dm-p{min-height:394px;border-right:1px solid var(--rule-soft)}
  #demo .dm-p:last-child{border-right:none}
}
#demo .dm-p{position:relative;overflow:hidden;flex-direction:column}
@media(min-width:900px){#demo .dm-p{display:flex}}
#demo .dm-ph{display:flex;justify-content:space-between;align-items:baseline;gap:8px;
  padding:9px 12px;border-bottom:1px solid var(--rule-soft);background:var(--paper)}
#demo .dm-pht{font-family:var(--data);font-size:9px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
#demo .dm-phm{font-family:var(--data);font-size:9px;color:var(--muted);letter-spacing:.05em}
#demo .dm-pb{padding:12px;flex:1;position:relative}
#demo .dm-doc{position:relative;height:100%;font-family:var(--data)}
#demo .dm-l{height:4px;background:var(--rule-soft);margin-bottom:6px;transition:background .35s ease}
#demo .dm-l.lit{background:var(--teal-line)}
#demo .dm-s{margin-bottom:10px}
#demo .dm-sl{font-size:7.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
#demo .dm-g{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;margin-bottom:10px}
#demo .dm-c{height:20px;background:var(--paper-2);border:1px solid var(--rule-soft);display:flex;
  align-items:center;justify-content:center;font-size:7.5px;color:var(--muted);
  transition:background .35s ease,border-color .35s ease,color .35s ease}
#demo .dm-c.lit{background:var(--teal-soft);border-color:var(--teal-line);color:var(--teal)}
#demo .dm-scan{position:absolute;left:-12px;right:-12px;height:2px;background:var(--teal);
  box-shadow:0 0 15px 3px rgba(14,90,80,.3);opacity:0;top:0}
#demo .dm-scan::before{content:"";position:absolute;left:0;right:0;top:-42px;height:42px;
  background:linear-gradient(to bottom,rgba(14,90,80,0),rgba(14,90,80,.07))}
#demo .dm-chips{position:absolute;inset:12px;pointer-events:none}
#demo .dm-chip{position:absolute;font-family:var(--data);font-size:8.5px;letter-spacing:.03em;
  background:var(--teal);color:var(--form);padding:3px 6px;white-space:nowrap;opacity:0}
#demo .dm-m{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule-soft);
  border:1px solid var(--rule-soft);margin-bottom:12px}
#demo .dm-mc{background:var(--form);padding:7px 8px}
#demo .dm-mk{font-family:var(--data);font-size:7.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
#demo .dm-mv{font-family:var(--display);font-weight:700;font-size:18px;line-height:1;margin-top:3px;font-variant-numeric:tabular-nums}
#demo .dm-mv.f{color:var(--warn)} #demo .dm-mv.m{color:var(--flag)}
#demo .dm-cg{display:grid;grid-template-columns:repeat(9,1fr);gap:3px}
#demo .dm-k{aspect-ratio:1;background:var(--paper-2);border:1px solid var(--rule-soft);
  transition:background .2s ease,border-color .2s ease,transform .2s var(--ease);position:relative;cursor:default}
#demo .dm-k[data-tip]:hover::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 4px);left:50%;
  transform:translateX(-50%);background:var(--ink);color:var(--paper);font-family:var(--data);font-size:7px;
  padding:3px 6px;white-space:nowrap;z-index:20;pointer-events:none}
#demo .dm-k.pass{background:#B4BAB2;border-color:#B4BAB2}
#demo .dm-k.warn{background:var(--warn);border-color:var(--warn)}
#demo .dm-k.flag{background:var(--flag);border-color:var(--flag);transform:scale(1.15);animation:dm-pulse .4s ease}
@keyframes dm-pulse{0%{box-shadow:0 0 0 0 rgba(166,56,44,.6)}70%{box-shadow:0 0 0 8px rgba(166,56,44,0)}100%{box-shadow:0 0 0 0 rgba(166,56,44,0)}}
#demo .dm-flabel{position:absolute;font-family:var(--data);font-size:7px;letter-spacing:.05em;
  background:var(--flag);color:var(--form);padding:2px 5px;white-space:nowrap;opacity:0;
  bottom:calc(100% + 3px);left:50%;transform:translateX(-50%) translateY(4px);
  transition:opacity .3s ease,transform .3s ease;pointer-events:none;z-index:10}
#demo .dm-flabel.show{opacity:1;transform:translateX(-50%) translateY(0)}
/* Stagger adjacent labels to prevent overlap */
#demo .dm-k:nth-child(29) .dm-flabel{bottom:calc(100% + 14px)}
#demo .dm-k:nth-child(31) .dm-flabel{bottom:calc(100% + 14px)}
#demo .dm-f{margin-top:12px;display:flex;flex-wrap:wrap;gap:3px}
#demo .dm-f > span{font-family:var(--data);font-size:8px;letter-spacing:.03em;color:var(--muted);
  border:1px solid var(--rule-soft);padding:3px 5px;opacity:.35;transition:opacity .3s ease,color .3s ease,border-color .3s ease}
#demo .dm-f > span.on{opacity:1;color:var(--teal);border-color:var(--teal-line)}
#demo .dm-r{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:start;
  padding:8px 0;border-bottom:1px solid var(--rule-soft);opacity:0}
#demo .dm-d{width:6px;height:6px;border-radius:50%;margin-top:5px}
#demo .dm-d.hi{background:var(--flag)} #demo .dm-d.md{background:var(--warn)} #demo .dm-d.lo{background:#B4BAB2}
#demo .dm-ri{font-family:var(--data);font-size:7.5px;letter-spacing:.08em;color:var(--muted);display:block;margin-bottom:2px}
#demo .dm-rn{font-size:12px;font-weight:500;line-height:1.3}
#demo .dm-ra{font-family:var(--data);font-size:11px;font-weight:600;font-variant-numeric:tabular-nums;
  white-space:nowrap;text-align:right;padding-top:8px}
#demo .dm-ra.hi{color:var(--flag)} #demo .dm-ra.md{color:var(--warn)} #demo .dm-ra.lo{color:var(--muted)}
#demo .dm-res{margin-top:12px;padding:12px;background:var(--teal-soft);border:1px solid var(--teal-line);opacity:0}
#demo .dm-rk{font-family:var(--data);font-size:8px;letter-spacing:.13em;text-transform:uppercase;color:var(--teal);opacity:.9}
#demo .dm-rv{font-family:var(--display);font-weight:700;font-size:28px;line-height:1;margin-top:5px;
  color:var(--teal);font-variant-numeric:tabular-nums}
#demo .dm-rs{font-family:var(--data);font-size:9px;color:var(--teal);margin-top:7px;line-height:1.6}
#demo .dm-link{display:block;margin-top:12px;font-family:var(--data);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--teal);text-decoration:none;opacity:0;transition:opacity .3s ease}
#demo .dm-link:hover{text-decoration:underline}
#demo .dm-link.show{opacity:1}
#demo .dm-tr{display:flex;align-items:center;gap:14px;padding:13px 16px;border-top:1px solid var(--rule);flex-wrap:wrap}
#demo .dm-time{flex-shrink:0}
@media(max-width:420px){#demo .dm-track{min-width:110px}}
#demo .dm-play{width:34px;height:34px;border:1px solid var(--ink);background:transparent;cursor:pointer;
  display:grid;place-items:center;flex-shrink:0;color:var(--ink);transition:background .2s ease,color .2s ease}
#demo .dm-play:hover{background:var(--ink);color:var(--form)}
#demo .dm-track{flex:1;min-width:160px;height:24px;position:relative;cursor:pointer}
#demo .dm-tl{position:absolute;left:0;right:0;top:11px;height:2px;background:var(--rule)}
#demo .dm-tf{position:absolute;left:0;top:11px;height:2px;background:var(--teal);width:0}
#demo .dm-th{position:absolute;top:6px;width:2px;height:12px;background:var(--teal);left:0}
#demo .dm-tick{position:absolute;top:11px;width:1px;height:7px;background:var(--rule)}
#demo .dm-tml{position:absolute;top:10px;left:50%;transform:translateX(-50%);font-family:var(--data);
  font-size:7px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);white-space:nowrap;opacity:0;
  transition:opacity .2s ease}
#demo .dm-track:hover .dm-tml{opacity:1}
#demo .dm-time{font-family:var(--data);font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
@media(prefers-reduced-motion:reduce){#demo .dm-scan{display:none}}

/* ===== JS FAILSAFE =====
   If JS fails, show final demo state rather than empty panels */
html:not(.js) #demo .dm-p{display:flex}
html:not(.js) #demo .dm-r{opacity:1;transform:none}
html:not(.js) #demo .dm-res{opacity:1}
html:not(.js) #demo .dm-step:last-child{background:var(--teal-soft)}
html:not(.js) #demo .dm-step:last-child .dm-sn,
html:not(.js) #demo .dm-step:last-child .dm-st{color:var(--teal)}