/* agent-scene.css — styles for agent-scene.js (the AI:ssociate machine).
 *
 * Every colour comes from the page tokens, so the drawing follows dark mode,
 * body.declass and the colour moods. Three local knobs can be overridden on a
 * wrapper: --as-ink (lines), --as-bg (what the fills are mixed into, so they
 * stay opaque and hide what is behind them) and --as-acc (the moving data).
 */
.agent-scene {
  --as-ink: var(--ink, #f6f1dd);
  --as-bg: var(--bg, #0b0c08);
  --as-acc: var(--yellow, #f2d22e);

  --l: var(--as-ink);
  --f: color-mix(in srgb, var(--as-ink) 7%, var(--as-bg));
  --s1: color-mix(in srgb, var(--as-ink) 16%, var(--as-bg));
  --s2: color-mix(in srgb, var(--as-ink) 27%, var(--as-bg));
  --b: color-mix(in srgb, var(--as-ink) 12%, var(--as-bg));
  --b1: color-mix(in srgb, var(--as-ink) 22%, var(--as-bg));
  --b2: color-mix(in srgb, var(--as-ink) 34%, var(--as-bg));
  --k: color-mix(in srgb, var(--as-ink) 86%, var(--as-bg));
  --k1: color-mix(in srgb, var(--as-ink) 66%, var(--as-bg));
  --k2: color-mix(in srgb, var(--as-ink) 48%, var(--as-bg));
  --cv: color-mix(in srgb, var(--as-ink) 36%, var(--as-bg));
  --cv1: color-mix(in srgb, var(--as-ink) 50%, var(--as-bg));
  --cv2: color-mix(in srgb, var(--as-ink) 26%, var(--as-bg));
  --gr: color-mix(in srgb, var(--as-ink) 11%, transparent);
  --acc: var(--as-acc);
  --acc1: color-mix(in srgb, var(--as-acc) 78%, var(--as-bg));
  --acc2: color-mix(in srgb, var(--as-acc) 60%, var(--as-bg));

  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

/* The case-file modal is a paper sheet in both themes: draw in ink on paper. */
.case-inner .agent-scene {
  --as-ink: #181712;
  --as-bg: var(--paper, #ede6d1);
  --as-acc: oklch(0.6 0.17 70);
}

.agent-scene * {
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-width: 1.1;
}
.agent-scene--card * { stroke-width: 1; }

.agent-scene .f { fill: var(--f); stroke: var(--l); }
.agent-scene .s1 { fill: var(--s1); stroke: var(--l); }
.agent-scene .s2 { fill: var(--s2); stroke: var(--l); }
.agent-scene .ns { stroke: none; }
.agent-scene .b { fill: var(--b); stroke: var(--l); }
.agent-scene .b1 { fill: var(--b1); stroke: var(--l); }
.agent-scene .b2 { fill: var(--b2); stroke: var(--l); }
.agent-scene .k { fill: var(--k); stroke: var(--l); }
.agent-scene .k1 { fill: var(--k1); stroke: var(--l); }
.agent-scene .k2 { fill: var(--k2); stroke: var(--l); }
.agent-scene .cv { fill: var(--cv); stroke: var(--l); }
.agent-scene .cv1 { fill: var(--cv1); stroke: var(--l); }
.agent-scene .cv2 { fill: var(--cv2); stroke: var(--l); }
.agent-scene .eo { fill-rule: evenodd; }
.agent-scene .ln { fill: none; stroke: var(--l); }
.agent-scene .ln.thin { stroke-width: 0.7; }
.agent-scene .dk { fill: var(--l); stroke: none; }
.agent-scene .wh { fill: var(--f); stroke: none; }
.agent-scene .tx { fill: none; stroke: var(--l); stroke-width: 1.9; stroke-linecap: butt; }
.agent-scene .tx.thin { stroke-width: 1.2; }
.agent-scene .inv { stroke: var(--f); }
.agent-scene .trace { fill: none; stroke: var(--l); stroke-width: 0.8; }
.agent-scene .post { fill: var(--f); stroke: var(--l); stroke-width: 0.9; }
.agent-scene .guide { fill: none; stroke: var(--l); stroke-width: 0.8; stroke-dasharray: 2 3; }
.agent-scene .pole { fill: none; stroke: var(--l); stroke-width: 1.8; }
.agent-scene .glass { fill: color-mix(in srgb, var(--as-bg) 55%, transparent); stroke: none; }
.agent-scene .blk { fill: var(--k2); stroke: none; }
.agent-scene .bar { fill: var(--k); stroke: none; }
.agent-scene .grid { fill: none; stroke: var(--gr); stroke-width: 1; }
.agent-scene .walk { fill: none; stroke: var(--k2); stroke-width: 1.6; stroke-dasharray: 0.1 5; }

/* the moving data */
.agent-scene .acc { fill: var(--acc); stroke: var(--l); }
.agent-scene .acc1 { fill: var(--acc1); stroke: var(--l); }
.agent-scene .acc2 { fill: var(--acc2); stroke: var(--l); }
.agent-scene .acc-tx { stroke: var(--as-bg); }
.agent-scene .acc-ln { fill: none; stroke: var(--as-bg); stroke-width: 1; }
.agent-scene .acc-bar { fill: none; stroke: var(--as-bg); stroke-width: 2.2; stroke-linecap: butt; }
.agent-scene .acc-dot { fill: var(--as-bg); stroke: none; }

/* the agents */
.agent-scene .leg { fill: none; stroke: var(--l); stroke-width: 2.2; }
.agent-scene .arm { fill: none; stroke: var(--l); stroke-width: 1.3; }
.agent-scene .shadow { fill: color-mix(in srgb, var(--as-ink) 16%, transparent); stroke: none; }
.agent-scene--card .leg { stroke-width: 1.8; }

/* labels: all of them in the modal, only query/document on the card */
.agent-scene .as-lbl {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 0.08em;
  fill: var(--l);
  stroke: var(--as-bg);
  stroke-width: 3;
  paint-order: stroke;
  vector-effect: none;
}
.agent-scene--card .as-lbl { display: none; }
.agent-scene--card .as-lbl.as-key { display: inline; font-size: 18px; }

@media (prefers-reduced-motion: reduce) {
  .agent-scene * { animation: none !important; transition: none !important; }
}