/* ============================================================
   17b — the interactive "try it" demo.
   Built entirely from the existing design tokens: same easing
   curve, same surfaces, same accents as the rest of the site.
   Nothing here talks to the server — see demo.js.
   ============================================================ */

.demo{max-width:1180px;margin:0 auto}
.demo__grid{display:grid;grid-template-columns:0.95fr 1.05fr;gap:28px;align-items:start;margin-top:38px}

/* ---------- left: the mess ---------- */
/* The results column grows well past the height of the pile. Sticking the left
   pane keeps the source files beside their results instead of stranding the
   visitor next to a tall empty column. */
.demo__pane{border:1px solid rgba(255,255,255,.065);background:var(--surface);
  border-radius:var(--radius);box-shadow:var(--hairline),var(--shadow-sm);padding:22px;min-height:420px;
  position:sticky;top:96px}

/* what the pile says once every file has been handed over */
.demo__done{display:flex;align-items:center;gap:10px;padding:14px;border-radius:var(--radius-ctl-sm);
  border:1px dashed rgba(52,201,142,.3);background:rgba(52,201,142,.06);
  font-size:var(--text-meta);color:var(--muted)}
.demo__done b{color:#34c98e;font-weight:600}
.demo__panehead{display:flex;align-items:baseline;gap:10px;margin-bottom:var(--space-1)}
.demo__panehead h3{font-size:var(--text-body);font-weight:650;letter-spacing:-.01em}
.demo__count{font-family:var(--mono);font-size:var(--text-small);color:var(--muted);margin-left:auto}
.demo__sub{font-size:13.5px;color:var(--muted);margin-bottom:var(--space-4)}

.demo__pile{display:flex;flex-direction:column;gap:var(--space-2);min-height:60px}

.dfile{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:var(--radius-ctl-sm);
  border:1px solid var(--line);background:var(--bg-raised);cursor:grab;
  transition:transform var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),
             box-shadow var(--dur-fast) var(--ease),opacity var(--dur-fast) var(--ease)}
.dfile:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.16);box-shadow:var(--shadow-sm)}
.dfile:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.dfile[aria-disabled="true"]{opacity:.32;pointer-events:none;transform:none}
.dfile.dragging{opacity:.4;cursor:grabbing}
.dfile__ic{width:26px;height:32px;flex:none;border-radius:4px;border:1px solid var(--line);
  background:linear-gradient(160deg,#222a36,#171d26);position:relative}
.dfile__ic::after{content:"";position:absolute;left:5px;right:5px;top:8px;height:1px;
  background:rgba(255,255,255,.16);box-shadow:0 5px 0 rgba(255,255,255,.12),0 10px 0 rgba(255,255,255,.08)}
.dfile__n{font-family:var(--mono);font-size:12.5px;color:var(--text);word-break:break-all;line-height:1.35}
.dfile__m{font-size:11.5px;color:var(--muted);margin-top:2px}

/* ---------- the drop target ---------- */
.demo__drop{margin-top:18px;border:1.5px dashed rgba(255,255,255,.16);border-radius:var(--radius-ctl-lg);
  padding:22px 18px;text-align:center;transition:all var(--dur-fast) var(--ease);background:transparent}
.demo__drop.over{border-color:var(--accent);background:rgba(79,140,255,.07);transform:scale(1.01)}
.demo__drop p{font-size:13.5px;color:var(--muted);margin:0 0 var(--space-3)}
.demo__drop strong{color:var(--text);font-weight:600}

/* ---------- right: the result ---------- */
.demo__out{min-height:420px}
.demo__empty{display:flex;align-items:center;justify-content:center;height:420px;
  border:1px dashed rgba(255,255,255,.09);border-radius:var(--radius);
  color:var(--muted);font-size:13.5px;text-align:center;padding:var(--space-6)}

/* a processed file, as AIDE renamed it */
.dres{border:1px solid rgba(255,255,255,.065);background:var(--surface);border-radius:var(--radius-ctl);
  box-shadow:var(--hairline);padding:13px 15px;margin-bottom:9px;
  animation:dres-in var(--dur-rise,.5s) var(--ease) both}
@keyframes dres-in{from{opacity:0;transform:translateY(9px) scale(.99)}to{opacity:1;transform:none}}
.dres__top{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.dres__name{font-family:var(--mono);font-size:12.5px;color:var(--text);word-break:break-all}
.dres__was{font-size:11.5px;color:var(--muted);margin-top:3px}
.dres__was s{opacity:.75}
.dres__path{font-size:var(--text-small);color:var(--muted);margin-top:7px;display:flex;align-items:center;gap:6px}
.dres__facts{margin:9px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.dres__facts li{font-size:11.5px;color:var(--muted);background:rgba(255,255,255,.04);
  border:1px solid var(--line);border-radius:6px;padding:3px var(--space-2)}

.dchip{font-size:var(--text-caption);font-weight:600;letter-spacing:.02em;padding:3px 9px;border-radius:var(--radius-pill);
  border:1px solid;white-space:nowrap}
.dchip--fin{color:#34c98e;border-color:rgba(52,201,142,.32);background:rgba(52,201,142,.1)}
.dchip--leg{color:#a78bfa;border-color:rgba(167,139,250,.32);background:rgba(167,139,250,.1)}
.dchip--ins{color:#38bdf8;border-color:rgba(56,189,248,.32);background:rgba(56,189,248,.1)}
.dchip--ops{color:#94a3b8;border-color:rgba(148,163,184,.32);background:rgba(148,163,184,.1)}
.dchip--dup{color:#f5b93e;border-color:rgba(245,185,62,.32);background:rgba(245,185,62,.1)}
.dchip--sec{color:#f16a6a;border-color:rgba(241,106,106,.32);background:rgba(241,106,106,.1)}
.dconf{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--muted)}
.dconf i{display:block;width:44px;height:4px;border-radius:2px;background:rgba(255,255,255,.1);position:relative}
.dconf i::after{content:"";position:absolute;inset:0;width:var(--w,0%);border-radius:2px;background:var(--ok,#34c98e)}

/* thinking state while a file is "read" */
.dthink{display:flex;align-items:center;gap:10px;padding:13px 15px;border-radius:var(--radius-ctl);
  border:1px solid var(--line);background:var(--bg-raised);margin-bottom:9px;font-size:12.5px;color:var(--muted)}
.dthink__dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none;
  animation:dpulse 1s var(--ease) infinite}
@keyframes dpulse{0%,100%{opacity:.35;transform:scale(.85)}50%{opacity:1;transform:scale(1.15)}}

/* ---------- findings ---------- */
.dfind{border-radius:var(--radius-ctl);padding:13px 15px;margin-bottom:9px;border:1px solid;
  animation:dres-in var(--dur-rise,.5s) var(--ease) both}
.dfind--dup{border-color:rgba(245,185,62,.3);background:rgba(245,185,62,.07)}
.dfind--sec{border-color:rgba(241,106,106,.3);background:rgba(241,106,106,.07)}
.dfind--date{border-color:rgba(56,189,248,.3);background:rgba(56,189,248,.07)}
.dfind__t{font-size:var(--text-meta);font-weight:650;margin-bottom:var(--space-1);display:flex;align-items:center;gap:var(--space-2)}
.dfind__t svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6}
.dfind--dup .dfind__t{color:#f5b93e}
.dfind--sec .dfind__t{color:#f16a6a}
.dfind--date .dfind__t{color:#38bdf8}
.dfind__d{font-size:12.5px;color:var(--muted);line-height:1.55}

/* ---------- the tree ---------- */
.dtree{margin-top:var(--space-1)}
.dtree__row{display:flex;align-items:center;gap:var(--space-2);padding:5px 0;font-size:12.5px;
  animation:dres-in var(--dur-rise,.5s) var(--ease) both}
.dtree__row.sub{padding-left:var(--space-5)}
.dtree__row.leaf{padding-left:var(--space-10);font-family:var(--mono);font-size:11.5px;color:var(--muted)}
.dtree__ic{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5}

/* ---------- footer / CTA ---------- */
.demo__foot{margin-top:26px;text-align:center}
.demo__note{font-size:12.5px;color:var(--muted);margin-bottom:14px}
.demo__actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

.demo__badge{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:var(--text-caption);
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--line);border-radius:var(--radius-pill);padding:5px var(--space-3);margin-bottom:14px}
.demo__badge i{width:6px;height:6px;border-radius:50%;background:var(--accent);display:block}

@media(max-width:900px){
  /* minmax(0,1fr), NOT 1fr. A bare `1fr` is minmax(auto,1fr), and `auto` here
     means min-content — so the single column could never shrink below the
     widest thing inside it. After "Let Torvane sort all six" that widest thing
     is a long mono filename in a nowrap span, and the column grew to 399px on a
     375px phone: the right 52px of every result was cut off. Measured, and
     exactly what was reported. min-width:0 on the panes is the other half of
     the same rule, for the same reason. */
  .demo__grid{grid-template-columns:minmax(0,1fr)}
  .demo__pane,.demo__out{min-width:0;max-width:100%}
  /* stacked, a sticky pane would sit on top of its own results */
  .demo__pane{position:static}
  .demo__pane,.demo__out{min-height:0}
  .demo__empty{height:200px}
  /* and let the rows themselves give way instead of pushing outward */
  .dfile,.dres{min-width:0}
  .dfile > *,.dres__top > *{min-width:0}
  /* Inherited, so it reaches every filename in the demo — including bare
     <span>s with no class, which is where the 52-character Halton contract
     name was living, 36px past the edge of a 375px screen. Filenames are
     single unbreakable "words" (underscores do not break), so without this
     they can only overflow. */
  .demo__grid{overflow-wrap:anywhere}
}

/* Respect the setting: everything lands instantly, nothing moves. */
@media (prefers-reduced-motion: reduce){
  .dres,.dfind,.dtree__row{animation:none}
  .dfile,.demo__drop{transition:none}
  .dfile:hover{transform:none}
  .dthink__dot{animation:none;opacity:1}
}