/* ------------------------------------------------------------------
   Lab429 figure plate

   The project figure sets (AWACS, Cheetah) draw with semantic classes
   and CSS variables only — there is not a single hard-coded colour in
   either charts.js. That means Lab429 can own how they look without
   editing a single diagram: we re-declare the variables here, and the
   same SVG renders in the site's warm palette instead of its own
   cool blue-grey one.

   This file is what makes every option below feel native rather than
   embedded. Each project keeps its own geometry and its own semantic
   vocabulary; Lab429 supplies one appearance for all of them.
   ------------------------------------------------------------------ */

.figure-plate {
  /* surfaces — warm paper, matching the site */
  --page: #fffefa;
  --surface: #fffefa;
  --surface-soft: #f2f1ec;
  --ink: #171716;
  --muted: #6c6b65;
  --faint: #8d8c85;
  --line: #9c9b93;
  --line-soft: rgba(23, 23, 22, .2);

  /* semantic accents — Lab429 blue leads, the rest are damped to sit
     on paper instead of on white */
  --evidence: #5063c9;
  --evidence-soft: #eceefa;
  --command: #5063c9;
  --command-soft: #eceefa;
  --action: #3d7a55;
  --action-soft: #e9f1eb;
  --return: #3d7a55;
  --return-soft: #e9f1eb;
  --attention: #9c5a24;
  --attention-soft: #f7efe6;
  --warning: #9c5a24;
  --warning-soft: #f7efe6;
  --problem: #9d3630;
  --problem-soft: #f7ecea;
  --danger: #9d3630;
  --danger-soft: #f7ecea;
  --agent: #efede6;
  --agent-line: #8a867b;
  --client: #efede6;
  --client-line: #8a867b;
  --hub: #f5f4ef;
  --server: #f5f4ef;
  --future: #6f61a4;
  --future-soft: #efedf7;

  /* Added for the AWACS timeline vocabulary. --paper is the colour a shape uses
     when it must read as "cut out of the page": a hollow signal marker, or white
     text on a filled token. --quiet is unattended time, distinct from a fault.
     --agent-accent is deliberately not --agent: in the older Cheetah vocabulary
     --agent names a pale surface a box is filled with, while AWACS uses its agent
     colour to paint a small solid badge with white letters on it. One name cannot
     do both, so the badge gets its own. */
  --paper: #fffefa;
  --quiet: #6c6b65;
  --quiet-soft: #f2f1ec;
  --agent-soft: #efede6;
  --agent-accent: #6f61a4;

  color: var(--ink);
  font-family: var(--sans);
}

/* ---- diagram element vocabulary (mirrors each project's own rules) ---- */
/* Both project figure sets name their root <svg> "diagram", and so does the site's own
   stylesheet — where .diagram is a section of a project page and carries a 112px top
   margin to separate it from the prose above. Every figure was inheriting that margin
   as dead space inside its frame. Reset it here, where the name means the drawing. */
.figure-plate .diagram { display: block; margin: 0; }
.figure-plate .diagram .boundary { fill: none; stroke: var(--line-soft); stroke-width: 2; }
.figure-plate .diagram .agent-boundary { fill: var(--agent); stroke: var(--agent-line); }
.figure-plate .diagram .hub-boundary { fill: var(--hub); stroke: var(--line); }
.figure-plate .diagram .person-boundary { fill: var(--action-soft); stroke: var(--action); }
.figure-plate .diagram .computer-boundary { fill: var(--surface-soft); stroke: var(--line); }
.figure-plate .diagram .satellite-boundary { fill: var(--evidence-soft); stroke: var(--evidence); }
.figure-plate .diagram .server-boundary { fill: var(--server); stroke: var(--line); }
.figure-plate .diagram .client-boundary { fill: var(--client); stroke: var(--client-line); }

.figure-plate .diagram .node { fill: var(--surface); stroke: var(--line); stroke-width: 1.6; }
.figure-plate .diagram .agent-node { fill: var(--agent); stroke: var(--agent-line); }
.figure-plate .diagram .client-node { fill: var(--client); stroke: var(--client-line); }
.figure-plate .diagram .evidence-node,
.figure-plate .diagram .command-node { fill: var(--evidence-soft); stroke: var(--evidence); }
.figure-plate .diagram .action-node,
.figure-plate .diagram .return-node { fill: var(--action-soft); stroke: var(--action); }
.figure-plate .diagram .attention-node,
.figure-plate .diagram .warning-node { fill: var(--attention-soft); stroke: var(--attention); }
.figure-plate .diagram .problem-node,
.figure-plate .diagram .danger-node { fill: var(--problem-soft); stroke: var(--problem); }
.figure-plate .diagram .quiet-node,
.figure-plate .diagram .optional-node { fill: var(--surface-soft); stroke: var(--line); }
.figure-plate .diagram .future-node { fill: var(--future-soft); stroke: var(--future); stroke-dasharray: 7 6; }
.figure-plate .diagram .platform-node { fill: var(--surface-soft); stroke: var(--client-line); }

.figure-plate .diagram text { fill: var(--ink); font-family: inherit; }
.figure-plate .diagram .title { font-size: 22px; font-weight: 620; letter-spacing: -.02em; }
.figure-plate .diagram .label { font-size: 17px; font-weight: 600; }
.figure-plate .diagram .body { font-size: 15px; }
.figure-plate .diagram .small { font-size: 13px; }
.figure-plate .diagram .tiny { font-size: 12px; }
.figure-plate .diagram .muted { fill: var(--muted); }
.figure-plate .diagram .faint { fill: var(--faint); }
.figure-plate .diagram .attention-text,
.figure-plate .diagram .warning-text { fill: var(--attention); }
.figure-plate .diagram .problem-text,
.figure-plate .diagram .danger-text { fill: var(--problem); }

.figure-plate .diagram .separator { stroke: var(--line-soft); stroke-width: 1; }
.figure-plate .diagram .edge { fill: none; stroke: var(--line); stroke-width: 2.2; }
.figure-plate .diagram .edge.evidence, .figure-plate .diagram .edge.command { stroke: var(--evidence); }
.figure-plate .diagram .edge.action, .figure-plate .diagram .edge.returned { stroke: var(--action); }
.figure-plate .diagram .edge.problem { stroke: var(--problem); }
.figure-plate .diagram .edge.observed { stroke-dasharray: 7 7; }
.figure-plate .diagram .step-number { fill: var(--ink); }
.figure-plate .diagram .step-text { fill: var(--surface); font-size: 13px; font-weight: 700; }

/* ---- timeline vocabulary (AWACS) ----
   A figure that argues about attention has to draw time: an axis with a grid, a
   band of work along it, and a marker at the moment something became observable.
   None of that existed while the only figure set was Cheetah's, so these are the
   parts that had no appearance yet rather than a second way of saying the same
   thing. The classes and their meanings are the project's; only the colours here
   are ours. */
.figure-plate .diagram .axis,
.figure-plate .diagram .lane-line { stroke: var(--line); stroke-width: 1.5; }
.figure-plate .diagram .grid { stroke: var(--line-soft); stroke-width: 1; stroke-dasharray: 4 7; }
.figure-plate .diagram .lane-boundary { fill: var(--evidence-soft); stroke: var(--evidence); }
.figure-plate .diagram .lane-header { fill: var(--evidence-soft); stroke: none; }
.figure-plate .diagram .evidence-boundary { fill: var(--evidence-soft); stroke: var(--evidence); }
.figure-plate .diagram .quiet-boundary { fill: var(--quiet-soft); stroke: var(--quiet); }
.figure-plate .diagram .future-boundary { fill: var(--future-soft); stroke: var(--future); stroke-dasharray: 7 7; }
.figure-plate .diagram .row-node { fill: var(--surface-soft); stroke: var(--line); }

/* A band of time. The interval says how long; its colour says what kind. */
.figure-plate .diagram .interval { stroke: none; }
.figure-plate .diagram .evidence-interval { fill: var(--evidence-soft); stroke: var(--evidence); stroke-width: 1; }
.figure-plate .diagram .action-interval { fill: var(--action-soft); stroke: var(--action); stroke-width: 1; }
.figure-plate .diagram .attention-interval { fill: var(--attention-soft); stroke: var(--attention); stroke-width: 1; }
.figure-plate .diagram .problem-interval { fill: var(--problem-soft); stroke: var(--problem); stroke-width: 1; }
.figure-plate .diagram .quiet-interval { fill: var(--quiet-soft); stroke: var(--quiet); stroke-width: 1; }

/* A signal is a moment, drawn hollow so the axis stays readable through it. */
.figure-plate .diagram .signal { fill: var(--paper); stroke-width: 2; }
.figure-plate .diagram .evidence-signal { stroke: var(--evidence); }
.figure-plate .diagram .action-signal { stroke: var(--action); }
.figure-plate .diagram .attention-signal { stroke: var(--attention); }
.figure-plate .diagram .quiet-signal { stroke: var(--quiet); }

.figure-plate .diagram .evidence-edge { stroke: var(--evidence); }
.figure-plate .diagram .action-edge { stroke: var(--action); }
.figure-plate .diagram .problem-edge { stroke: var(--problem); }
/* Dashed means "not observed", which is not the same as broken. */
.figure-plate .diagram .unknown-edge { stroke: var(--quiet); stroke-width: 2.4; stroke-dasharray: 7 7; }
.figure-plate .diagram .blocked-edge { stroke: var(--problem); stroke-width: 2; stroke-dasharray: 6 6; }
.figure-plate .diagram .blocked-mark,
.figure-plate .diagram .problem-stroke { fill: none; stroke: var(--problem); stroke-width: 3; }
.figure-plate .diagram .arrow-evidence { fill: var(--evidence); }
.figure-plate .diagram .arrow-action { fill: var(--action); }
.figure-plate .diagram .arrow-problem { fill: var(--problem); }
/* Troveholm's set names its arrowheads and its inbound label after the command and
   return halves of the vocabulary rather than the evidence and action halves. Those
   are already synonyms everywhere else here — .command-node beside .evidence-node,
   .edge.returned beside .edge.action — but the arrow markers and the -text variant
   had only ever been given one name each. An unnamed marker falls back to SVG's
   default black fill, which is how this surfaced: every arrowhead on those edges
   rendered black while its line was correctly coloured. */
.figure-plate .diagram .arrow-command { fill: var(--command); }
.figure-plate .diagram .arrow-returned { fill: var(--return); }
.figure-plate .diagram .returned-text { fill: var(--return); }

/* Checking by hand is dashed and grey; a reading that arrived on its own is solid. */
.figure-plate .diagram .manual-check { stroke: var(--quiet); stroke-width: 1.5; stroke-dasharray: 5 5; }
.figure-plate .diagram .observed-check { stroke: var(--action); stroke-width: 2; }
.figure-plate .diagram .person-head,
.figure-plate .diagram .person-body { fill: none; stroke: var(--action); stroke-width: 3; }

.figure-plate .diagram .kicker { fill: var(--evidence); font-size: 12px; font-weight: 700; letter-spacing: .12em; }
.figure-plate .diagram .rank { fill: var(--ink); font-size: 13px; font-weight: 700; }
.figure-plate .diagram .action-text { fill: var(--action); }
.figure-plate .diagram .step { fill: var(--evidence); }
.figure-plate .diagram .agent-token { fill: var(--agent-accent); }
.figure-plate .diagram .token-text { fill: var(--paper); font-size: 13px; font-weight: 700; }

/* ---- per-set corrections ----
   Each project draws with its own semantic vocabulary, and occasionally a name means
   something different there than it does here. Correcting that is a scoped override on
   the plate, never an edit to the project's drawing.

   Troveholm's grammar is "evidence is teal, user action is blue" — where ours is
   "evidence is blue, action is the return colour". Two of its families therefore landed
   on the wrong side: a user action rendered green, which on the rest of this site means
   data coming back, and inside one figure a user-action edge and a returned-data edge
   both went green and became indistinguishable.

   The fix moves user action into the blue outbound family, where Troveholm's own palette
   already puts it, and keeps returned data green. Its evidence stays blue rather than
   gaining a third hue: evidence and command have always been synonyms here, Cheetah's
   figures read that way too, and one shared convention across the site is worth more
   than one project's internal distinction.

   Retargeting the variable is the whole correction — every rule that paints a user
   action already reads it, so nothing about the drawing or the shared rules changes. */
.figure-plate[data-figure-set="troveholm"] {
  --action: #5063c9;
  --action-soft: #eceefa;
}

/* ---- the plate itself: how a figure is mounted anywhere on the site ---- */
.figure-plate {
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: 4px;
}
.figure-plate > svg { display: block; width: 100%; height: auto; }

/* Escape hatch for reviewing the original project palette side by side. */
.original-theme .figure-plate {
  --page: #f3f5f8; --surface: #ffffff; --surface-soft: #f7f9fc;
  --ink: #14202b; --muted: #526170; --faint: #7a8794;
  --line: #8693a0; --line-soft: #cbd3dc;
  --evidence: #1768ac; --evidence-soft: #e8f2fb;
  --command: #1768ac; --command-soft: #e8f2fb;
  --action: #087f5b; --action-soft: #e6f5ef;
  --return: #087f5b; --return-soft: #e6f5ef;
  --attention: #a14717; --attention-soft: #fff3e8;
  --warning: #a14717; --warning-soft: #fff3e8;
  --problem: #a62e2e; --problem-soft: #fdecec;
  --danger: #a62e2e; --danger-soft: #fdecec;
  --agent: #f5f1ff; --agent-line: #7768a8;
  --client: #f5f1ff; --client-line: #7768a8;
  --hub: #eef3f8; --server: #eef3f8;
  --future: #6c5aa7; --future-soft: #f1edfb;
  background: #ffffff;
}