/*
 * Vendored from voice-assistant/board/hud/styles/architecture.css (Ultron HUD). Do not edit here: change the
 * design system, then refresh with node tools/vendor.mjs.
 */
/*
 * Ultron HUD, ArchitectureDiagram (bundle.css, after table.css).
 * Two things live here: the card around a drawing (the figure, the scrolling canvas and the caption), and the look of the SVG that
 * UltronHUD.architecture and UltronHUD.architectureSVG write (scripts/architecture.js, types/architecture.d.ts). The renderer writes classes
 * only, never a colour, so every stroke, fill and word below maps a class to a token.
 *
 * The drawing is 1 SVG unit to 1 px, so the sizes of SVG text are in user units: the one place a size is written outside the type styles.
 * Every word is 12 units or more, the floor of the type scale (hud-label-sm and hud-mono-sm are 0.75rem). The renderer plans its plates and
 * its squeezing with the advance of a character at these sizes (scripts/architecture.js), so a size changes there and here together.
 * Strokes stay one device pixel (vector-effect: non-scaling-stroke), and nothing here moves: the dashes that flow along async edges come
 * from .hud-flow in base.css, which is already under the reduced-motion guard.
 *
 * A 1px stroke fills one row of device pixels only when its centre is on a half unit. On a whole unit it lands on two rows at half strength,
 * about 1.7:1 on surface-panel where line-strong is 3.6:1, and a node outline or an edge, which carries meaning at 3:1, reads as a smudge.
 * So the renderer writes every hairline on a half unit, a cylinder's sides and the ends of its arcs included. Every outline, group frame and
 * edge is also orthogonal, so each is drawn with shape-rendering: crispEdges, which keeps it sharp where the drawing lands off the pixel grid
 * (a canvas scrolled by a fraction of a pixel, a page zoom). A cylinder stays smooth, because crisp edges would turn its arcs into stairs.
 *
 * Hooks, both optional and set on the figure or on any ancestor:
 *   --hud-architecture-plate  the fill behind an edge label, the colour of the plane the diagram sits on (default ground)
 *   --hud-architecture-clear  the clear space around the figure (default space-12)
 */

/* ---------- The card ---------- */

.hud-architecture {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  min-width: 0;
  margin: 0;
  padding: var(--hud-architecture-clear, var(--space-12));
}

/* The renderer's target. A drawing wider than its column scrolls here, sideways; the page never does. */
.hud-architecture__canvas {
  position: relative;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
}

.hud-architecture__svg {
  display: block;
  flex: none;
  max-width: none;
  overflow: visible;
}

.hud-architecture__caption {
  max-inline-size: var(--measure);
  color: var(--ink-secondary);
}

/* ---------- Groups: a dashed frame headed "_Name" ---------- */

.hud-architecture__group-frame {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: var(--stroke-hairline);
  stroke-dasharray: 6 4;
  shape-rendering: crispEdges;
  vector-effect: non-scaling-stroke;
}

/* mirrors hud-panel-header, at 12 units, without the bloom */
.hud-architecture__group-label {
  fill: var(--ink);
  font-family: var(--font-display);
  font-size: 12px;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.02em;
  font-synthesis: none;
}

/* ---------- Nodes ---------- */

/* Every kind is told by the shape of its outline, which the renderer draws; the stroke and the fill are the same for all. */
.hud-architecture__node-outline {
  fill: var(--surface-panel);
  stroke: var(--line-strong);
  stroke-width: var(--stroke-hairline);
  stroke-linejoin: miter;
  shape-rendering: crispEdges;
  vector-effect: non-scaling-stroke;
}

/* a cylinder is drawn with arcs, which crisp edges would turn into stairs; its sides and the flat middle of its arcs are already on half units, so they stay sharp */
.hud-architecture__node--store .hud-architecture__node-outline {
  shape-rendering: auto;
}

/* outside the system: a quieter edge and no fill */
.hud-architecture__node--external .hud-architecture__node-outline {
  fill: none;
  stroke: var(--line);
}

/* what a critique is about: lit amber, its label still ink */
.hud-architecture__node--flagged .hud-architecture__node-outline {
  stroke: var(--amber);
  filter: drop-shadow(0 0 3px var(--amber-glow));
}

/* what the design lacks: dashed, empty, its words dimmed */
.hud-architecture__node--missing .hud-architecture__node-outline {
  fill: none;
  stroke-dasharray: 3 3;
}

/* under discussion: white corner brackets 8 units long, just outside the box */
.hud-architecture__brackets {
  fill: none;
  stroke: var(--mark);
  stroke-width: var(--stroke-mark);
  stroke-linejoin: miter;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 2px var(--glow-white));
}

/* mirrors hud-label, at 13 units */
.hud-architecture__node-label {
  fill: var(--ink);
  font-family: var(--font-display);
  font-size: 13px;
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-synthesis: none;
}

/* mirrors hud-caption, at 12 units */
.hud-architecture__node-sublabel {
  fill: var(--ink-secondary);
  font-family: var(--font-display);
  font-size: 12px;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.02em;
  font-synthesis: none;
}

.hud-architecture__node--missing .hud-architecture__node-label,
.hud-architecture__node--missing .hud-architecture__node-sublabel {
  fill: var(--ink-dim);
}

/* ---------- Model tags: the model's name and effort on a dim plate in its hue ---------- */

.hud-architecture__tag-plate {
  stroke: none;
  rx: var(--radius-1);
}

/* mirrors hud-label-sm, at its own 12 units; the tracking is kept under the renderer's 6.6 units a character so the words stay on the plate */
.hud-architecture__tag-label {
  font-family: var(--font-display);
  font-size: 12px;
  font-style: italic;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-synthesis: none;
}

.hud-architecture__tag--violet .hud-architecture__tag-plate {
  fill: var(--violet-dim);
}

.hud-architecture__tag--violet .hud-architecture__tag-label {
  fill: var(--violet);
}

.hud-architecture__tag--amber .hud-architecture__tag-plate {
  fill: var(--amber-dim);
}

.hud-architecture__tag--amber .hud-architecture__tag-label {
  fill: var(--amber);
}

/* ---------- Edges: hairlines with a dot at the source and a tick at the target ---------- */

.hud-architecture__edge {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: var(--stroke-hairline);
  stroke-linejoin: miter;
  shape-rendering: crispEdges;
  vector-effect: non-scaling-stroke;
}

/*
 * control: short dashes with short gaps (half ink), async: long dashes with short gaps (three quarters ink), so each reads
 * as a line at a distance, where the dots of 1 4 and the dashes of 2 6 (a fifth and a quarter ink) broke into specks.
 * hud-flow (base.css) moves the async dashes when motion is allowed. It sets a pattern of its own, and this one wins it
 * because this file loads after base.css. A period of 8 units keeps hud-flow's -16 offset a seamless loop.
 */
.hud-architecture__edge--control {
  stroke-dasharray: 2 2;
}

.hud-architecture__edge--async {
  stroke-dasharray: 6 2;
}

/* the path a critique is about */
.hud-architecture__edge--flagged {
  stroke: var(--amber);
}

/* The arrow tick is a chevron, so it takes the stroke of the system's chevrons. The dot at the source is .hud-terminal (base.css). */
.hud-architecture__edge-tick {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: var(--stroke-mark);
  stroke-linejoin: miter;
  vector-effect: non-scaling-stroke;
}

.hud-architecture__edge-tick--flagged {
  stroke: var(--amber);
}

.hud-architecture__edge-plate {
  fill: var(--hud-architecture-plate, var(--ground));
  stroke: none;
}

/* mirrors hud-mono-sm, at its own 12 units: JetBrains Mono is 0.6 em wide, the 7.2 units a character the renderer plans its plates with */
.hud-architecture__edge-label {
  fill: var(--ink-secondary);
  font-family: var(--font-mono);
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  font-synthesis: none;
}

/* ---------- Legend ---------- */

/* Its samples reuse the node and edge classes above, so a swatch always looks like the thing it names. */
.hud-architecture__legend-label {
  fill: var(--ink-secondary);
  font-family: var(--font-display);
  font-size: 12px;
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-synthesis: none;
}

/* ---------- Narrow screens: the clear space gives way to the column, and the canvas scrolls ---------- */

@media (max-width: 40rem) {
  .hud-architecture {
    padding: var(--space-4);
  }
}