/* ─────────────────────────────────────────────────────────────────────────
   The hero demo — an app window with the agent on the left and the board on
   the right, playing one turn.

   Two rules hold this together and both are load-bearing:

   1. The window keeps its own dark room on every ground. The app is dark; a
      light-themed miniature of a dark app is a lie about the product, and on
      the bone ground the dark panel reads as the product rather than as a
      section that forgot to be styled.
   2. Inside the window, LAYER colours are the board editor's own — minium
      F.Cu, probe-blue B.Cu, ENIG pads. Brand copper is spent on exactly one
      thing in here, the active chip, because everything else on the board
      belongs to the board.
   ───────────────────────────────────────────────────────────────────────── */

.demo {
  --win: #0d0f14;
  --win-2: #14171e;
  --win-line: #212734;
  --win-line-2: #2c3444;
  --win-fg: #e8ecf2;
  --win-fg-2: #97a1b2;
  --win-fg-3: #68728a;

  --cu-f: #e0653c;      /* F.Cu — minium */
  --cu-b: #3f7fc8;      /* B.Cu and the pour — probe blue */
  --enig: #e6c07c;      /* pad finish */
  --silk: #dfe5ee;
  --edge: #d8b04a;

  position: relative;
  margin-top: clamp(34px, 5vw, 54px);
}

.demo-frame {
  border-radius: 14px;
  overflow: hidden;
  background: var(--win);
  border: 1px solid var(--win-line);
  box-shadow:
    0 1px 0 rgb(255 255 255 / .05) inset,
    0 40px 80px -34px rgb(var(--shadow-rgb) / var(--plate-shadow-a, .5)),
    0 4px 14px -6px rgb(var(--shadow-rgb) / .28);
}

/* ── title bar ───────────────────────────────────────────────────────────── */

.demo-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 40px;
  padding: 0 14px;
  background: linear-gradient(180deg, var(--win-2), var(--win));
  border-bottom: 1px solid var(--win-line);
}
.demo-lights { display: flex; gap: 7px; }
.demo-lights i { width: 10px; height: 10px; border-radius: 50%; background: #2b323f; }
.demo-file {
  font-size: 12.5px;
  color: var(--win-fg-2);
  font-variation-settings: 'wdth' 92;
  letter-spacing: -.005em;
}
.demo-stat {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: -.01em;
  color: var(--win-fg-3);
  transition: color .3s var(--ease);
}
.demo-stat.ok { color: #5fc98f; }
.demo-stat.warn { color: #e0574a; }

/* ── the two halves ──────────────────────────────────────────────────────── */

.demo-body {
  display: grid;
  grid-template-columns: minmax(280px, 340px) 1fr;
  min-height: 424px;
}
@media (max-width: 900px) {
  .demo-body { grid-template-columns: 1fr; min-height: 0; }
  .demo-agent { order: 2; border-right: 0 !important; border-top: 1px solid var(--win-line); }
}

/* ── agent panel ─────────────────────────────────────────────────────────── */

.demo-agent {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--win-line);
  background: #0b0d11;
  min-width: 0;
}
.demo-ahead {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px 10px;
}
.demo-atitle {
  font-variation-settings: 'wdth' 76;
  font-weight: 640;
  font-size: 11.5px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--win-fg-3);
}
.demo-undo {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 25px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid var(--win-line-2);
  background: transparent;
  color: var(--win-fg-2);
  font: inherit;
  font-size: 11.5px;
  font-weight: 560;
  letter-spacing: -.01em;
  cursor: default;
  transition: opacity .3s var(--ease), border-color .3s var(--ease);
}
.demo-undo:disabled { opacity: .32; }
.demo-undo b { font-family: var(--mono); font-size: 10.5px; font-weight: 500; color: var(--win-fg-3); }

.demo-thread {
  flex: 1;
  min-height: 0;              /* or the flex child refuses to shrink and the
                                 thread runs straight through the composer */
  overflow-y: auto;
  padding: 0 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  scrollbar-width: none;
  mask-image: linear-gradient(180deg, transparent 0, #000 18px);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18px);
}
.demo-thread::-webkit-scrollbar { display: none; }

/* what was asked */
.demo-said {
  border-left: 2px solid rgb(var(--accent-rgb));
  padding: 2px 0 2px 12px;
  margin: 4px 0 12px;
}
.demo-said p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--win-fg);
  letter-spacing: -.008em;
}

/* one tool call */
.demo-step {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 6px 0;
  border-bottom: 1px solid rgb(255 255 255 / .045);
  opacity: 0;
  transform: translateY(6px);
}
.demo-step.in {
  opacity: 1;
  transform: none;
  transition: opacity .34s var(--ease), transform .34s var(--ease);
}
.demo-tool {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: -.02em;
  color: #cf8f5f;
}
.demo-args { display: flex; gap: 8px; align-items: baseline; min-width: 0; }
.demo-arg {
  font-size: 12px;
  color: var(--win-fg-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.demo-out {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--win-fg-3);
  white-space: nowrap;
  flex: none;
}
.demo-out.ok { color: #5fc98f; }
.demo-out.warn { color: #e0574a; }

/* the composer, which here is two real asks you can press */
.demo-composer { padding: 10px 14px 14px; border-top: 1px solid var(--win-line); }
.demo-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.demo-chip {
  border: 1px solid var(--win-line-2);
  background: transparent;
  color: var(--win-fg-2);
  font: inherit;
  font-size: 12.5px;
  font-weight: 550;
  letter-spacing: -.01em;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.demo-chip:hover { color: var(--win-fg); border-color: #46516a; }
.demo-chip.on {
  color: rgb(var(--on-accent-rgb));
  background: rgb(var(--accent-rgb));
  border-color: rgb(var(--accent-rgb));
}

/* ── canvas ──────────────────────────────────────────────────────────────── */

.demo-canvas {
  position: relative;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(120% 90% at 50% 0%, #131720 0%, #0a0c10 62%, #08090c 100%);
  min-width: 0;
}
.demo-stage { flex: 1; display: flex; align-items: center; justify-content: center; padding: 14px 18px 4px; min-height: 0; }
.bsvg { width: 100%; height: auto; max-height: 420px; color: #7f8ca3; }

.demo-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  padding: 0 20px 14px;
}
.lg { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--win-fg-3); }
.lg i { width: 9px; height: 3px; border-radius: 2px; background: currentColor; }
.lg-sig i { background: var(--cu-f); }
.lg-gnd i { background: var(--cu-b); }
.lg-pad i { background: var(--enig); border-radius: 50%; height: 8px; width: 8px; }
.lg-edge i { background: var(--edge); }

/* ── the board itself ────────────────────────────────────────────────────── */

.gridline { color: #1b2029; }
.gridfill { color: #1b2029; }

.substrate { fill: #10161a; }
.edgecut { fill: none; stroke: var(--edge); stroke-width: .18; opacity: .85; }

.pour { fill: var(--cu-b); opacity: 0; transition: opacity .7s var(--ease); }
.l-pour.filled .pour { opacity: .17; }
.knock { fill: #10161a; stroke: #10161a; }
.l-pour .knock { opacity: 0; transition: opacity .7s var(--ease); }
.l-pour.filled .knock { opacity: 1; }

.ring { fill: none; stroke: var(--enig); stroke-width: .5; opacity: .8; }
.drill { fill: #05070a; }

/* A track is drawn, not faded in — the dash length is measured off the path in
   JS and handed back as --len, so the animation follows the real geometry. */
.trk { stroke-dasharray: var(--len, 60); stroke-dashoffset: var(--len, 60); }
.trk.drawn { stroke-dashoffset: 0; transition: stroke-dashoffset .62s var(--ease); }
.trk-sig { stroke: var(--cu-f); }
.trk-gnd { stroke: var(--cu-b); }

.silktext {
  fill: var(--silk);
  opacity: .5;
  font-family: var(--sans);
  font-size: 2.1px;
  font-weight: 650;
  font-variation-settings: 'wdth' 80;
  letter-spacing: .12px;
}
.refdes {
  fill: var(--silk);
  opacity: .55;
  font-family: var(--mono);
  font-size: 1.5px;
  letter-spacing: -.03px;
}

.part { opacity: 0; transform: scale(.86); transform-box: fill-box; transform-origin: center; }
.part.landed {
  opacity: 1;
  transform: none;
  transition: opacity .34s var(--ease), transform .44s cubic-bezier(.2, 1.5, .4, 1);
}
.pad { fill: var(--enig); }
.pad-1 { fill: #f0d6a4; }
.silk { stroke: var(--silk); stroke-width: .14; fill: none; opacity: .62; }
.silk.body { fill: rgb(223 229 238 / .045); }
.silk.detail { opacity: .4; }
.silk.polarity { stroke-width: .2; opacity: .8; }

.instant .part, .instant .trk, .instant .pour, .instant .knock { transition: none !important; }

/* ── the note under the window ───────────────────────────────────────────── */

.demo-note {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--fg-3);
  line-height: 1.55;
}
.demo-note a { color: var(--fg-2); border-bottom: 1px solid var(--line-2); }
.demo-note a:hover { color: var(--fg); border-color: var(--fg-3); }