/* ui/kit/canvas: the platform's own diagram canvas. Shapes by role, the
   11 unit floor for canvas text, square corner handles, the round connect
   handle with its 24 px target, a bend point's diamond handle, the kit's
   focus ring and the busy note, as the Tools canvas draws them
   (docs/design/tool_canvas.py). Every colour is a brand.css token. Nothing
   here animates, so there is no motion to reduce. The canvas's menu is
   here too. */

.aucra-canvas {
  position: relative;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
}

.aucra-canvas:focus {
  outline: none;
}

.aucra-canvas:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.aucra-canvas-svg {
  display: block;
  width: 100%;
  height: clamp(480px, calc(100vh - 320px), 900px);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  /* A held finger opens the canvas's own menu, never the browser's (K12). */
  -webkit-touch-callout: none;
  /* A drag on empty space draws the selection box (K23). */
  cursor: default;
}

/* Space held shows the hand over the whole canvas, rows included, and a pan
   under way grabs (K23). */
.aucra-canvas.aucra-canvas-hand .aucra-canvas-svg,
.aucra-canvas.aucra-canvas-hand .aucra-canvas-svg * {
  cursor: grab;
}
.aucra-canvas.aucra-canvas-panning .aucra-canvas-svg,
.aucra-canvas.aucra-canvas-panning .aucra-canvas-svg * {
  cursor: grabbing;
}

/* Heard, not seen: the page draws its own status line under the canvas. */
.aucra-canvas-status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.aucra-canvas-dot { fill: var(--line); }
.aucra-canvas-ground { pointer-events: none; }
.aucra-canvas text { font-family: "IBM Plex Sans", "Segoe UI", sans-serif; fill: var(--text); pointer-events: none; }
.aucra-canvas .aucra-canvas-id { font-family: "IBM Plex Mono", monospace; font-size: 11px; fill: var(--muted); }
.aucra-tip { fill: var(--muted); }
.aucra-tip-on { fill: var(--gold-deep); }

/* Elements: an ellipse, two parallel lines or a rectangle, by role. */
.aucra-node { cursor: move; }
.aucra-node-body { fill: var(--panel); stroke: var(--ink); stroke-width: 1.5; }
.aucra-node-fill { fill: var(--panel); stroke: none; }
.aucra-shape-parallel_lines .aucra-node-body { fill: none; }
.aucra-canvas .aucra-node-label { font-size: 14px; font-weight: 500; }
.aucra-node.on .aucra-node-body { stroke: var(--gold-deep); stroke-width: 2.4; }
.aucra-node.aucra-target .aucra-node-body { stroke: var(--gold-deep); stroke-width: 2.4; fill: var(--gold-wash); }
.aucra-node.busy { opacity: 0.55; cursor: not-allowed; }
.aucra-node.busy .aucra-node-body { stroke-dasharray: 5 4; }

/* Trust boundaries: a dashed rectangle, grabbed by its edge or its name. */
.aucra-boundary-edge { fill: none; stroke: var(--muted); stroke-width: 1.3; stroke-dasharray: 7 5; pointer-events: none; }
.aucra-boundary-hit { fill: none; stroke: transparent; stroke-width: 12; pointer-events: stroke; cursor: move; }
.aucra-canvas .aucra-boundary-name { font-size: 12.5px; fill: var(--muted); pointer-events: all; cursor: move; }
.aucra-boundary.on .aucra-boundary-edge { stroke: var(--gold-deep); stroke-width: 2; }
.aucra-canvas .aucra-boundary.on .aucra-boundary-name { fill: var(--gold-deep); }
.aucra-boundary.busy { opacity: 0.55; }
.aucra-boundary.busy .aucra-boundary-hit, .aucra-canvas .aucra-boundary.busy .aucra-boundary-name { cursor: not-allowed; }

/* Flows: the server's routed path, its arrow, its label and crossings. */
.aucra-flow-hit { fill: none; stroke: transparent; stroke-width: 12; cursor: pointer; }
.aucra-flow-line { fill: none; stroke: var(--muted); stroke-width: 1.4; pointer-events: none; }
.aucra-flow.on .aucra-flow-line { stroke: var(--gold-deep); stroke-width: 2.2; }
.aucra-flow-retrieved .aucra-flow-line { stroke-dasharray: 6 4; }
.aucra-canvas .aucra-flow-label text {
  font-size: 12.5px;
  stroke: var(--wash-head);
  stroke-width: 4px;
  paint-order: stroke;
  pointer-events: all;
  cursor: pointer;
}
.aucra-canvas .aucra-flow-label.on text { fill: var(--gold-deep); font-weight: 500; }
.aucra-flow-tag { fill: var(--panel); stroke: var(--line); }

/* An AI role's badge (T1): above a model's or a tool's shape, and stacked
   with its id over a retrieved content flow's words in a box of its own. */
.aucra-badge-pill { fill: var(--gold-wash); stroke: var(--gold-deep); stroke-width: 0.8; }
/* A row's model threat count (prototype plan K18): white on the soft ink. */
.aucra-count-pill { fill: var(--ink-soft); }
.aucra-canvas .aucra-count-words,
.aucra-canvas .aucra-flow-label .aucra-count-words,
.aucra-canvas .aucra-flow-label.on .aucra-count-words {
  font-size: 11px; font-weight: 600; fill: var(--panel); stroke: none;
}
.aucra-count { pointer-events: none; }
.aucra-canvas .aucra-badge-words { font-size: 11px; font-weight: 600; fill: var(--gold-deep); }
.aucra-canvas .aucra-flow-label .aucra-flow-stacked text { stroke: none; }
.aucra-flow-stack { fill: var(--panel); stroke: var(--line); pointer-events: all; cursor: pointer; }
.aucra-flow-label.on .aucra-flow-stack { stroke: var(--gold-deep); }
/* Selected, the words turn gold as a plain label's do; the badge and the id
   keep their own weight and colour, as the mockup draws them. */
.aucra-canvas .aucra-flow-label.on .aucra-flow-stacked .aucra-badge-words { font-weight: 600; }
.aucra-canvas .aucra-flow-label.on .aucra-flow-stacked .aucra-canvas-id { fill: var(--muted); font-weight: 400; }
.aucra-crossing { fill: var(--panel); stroke: var(--gold-deep); stroke-width: 1.6; }

/* Previews: a flow whose end is moving, the link being drawn, the marquee. */
.aucra-ghost { fill: none; stroke: var(--gold-deep); stroke-width: 1.4; stroke-dasharray: 4 3; pointer-events: none; }
.aucra-marquee { fill: var(--gold-wash); fill-opacity: 0.4; stroke: var(--gold-deep); stroke-dasharray: 4 3; pointer-events: none; }

/* Handles on a selected row: square corners resize, the round one connects. */
.aucra-handle-frame { fill: none; stroke: var(--gold-deep); stroke-width: 1; stroke-dasharray: 3 3; pointer-events: none; }
.aucra-handle-hit { fill: transparent; }
.aucra-handle-corner { fill: var(--panel); stroke: var(--gold-deep); stroke-width: 1.5; pointer-events: none; }
.aucra-handle-nw, .aucra-handle-se { cursor: nwse-resize; }
.aucra-handle-ne, .aucra-handle-sw { cursor: nesw-resize; }
.aucra-connect-target { fill: var(--gold-wash); opacity: 0.9; cursor: crosshair; }
.aucra-connect-dot { fill: var(--gold-deep); stroke: var(--panel); stroke-width: 1.5; pointer-events: none; }
.aucra-canvas-ring { fill: none; stroke: var(--focus-ring); stroke-width: 2; pointer-events: none; }

/* A bend point on the selected flow (routing plan R7): a diamond 24 px
   corner to corner over a round hit area 24 px across, so it never reads as
   the round connect dot; selected, the kit's ring follows the diamond. */
.aucra-bend { cursor: move; }
.aucra-bend-hit { fill: transparent; }
.aucra-bend-wash { fill: var(--gold-wash); opacity: 0.9; pointer-events: none; }
.aucra-bend-mark { fill: var(--gold-deep); stroke: var(--panel); stroke-width: 1.5; pointer-events: none; }
.aucra-bend:hover .aucra-bend-wash, .aucra-bend.on .aucra-bend-wash { opacity: 1; stroke: var(--gold-deep); stroke-width: 1; }
.aucra-bend-ring { fill: none; stroke: var(--focus-ring); stroke-width: 2; stroke-linejoin: round; pointer-events: none; }

/* The busy note over a row another window holds (C10). */
.aucra-busy-note { pointer-events: none; }
.aucra-busy-pill { fill: var(--gold-wash); stroke: var(--gold-deep); }
.aucra-busy-face { fill: var(--ink-soft); }
.aucra-canvas .aucra-busy-initial { font-size: 11px; font-weight: 600; fill: var(--panel); }
.aucra-canvas .aucra-busy-words { font-size: 12px; font-weight: 500; fill: var(--gold-deep); }

.aucra-canvas-readonly .aucra-node,
.aucra-canvas-readonly .aucra-boundary-hit,
.aucra-canvas-readonly .aucra-boundary-name { cursor: pointer; }

/* The canvas's own menu (threat model prototype plan K9, artboards 17 and
   19): fixed to the window so the card never clips it, kept inside it by
   the component; under 640 px a sheet from the bottom with 44 px rows. */
.aucra-canvas-menu {
  position: fixed;
  z-index: 5000;
  width: 236px;
  box-sizing: border-box;
  padding: 5px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(28, 33, 38, 0.18);
  color: var(--text);
  font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
}
.aucra-canvas-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 32px;
  padding: 0 12px;
  border-radius: 4px;
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
  outline: none;
}
.aucra-canvas-menu-item .q-icon { color: var(--muted); }
.aucra-canvas-menu-item:focus,
.aucra-canvas-menu-item:hover { background: var(--gold-wash); }
.aucra-canvas-menu-item:focus-visible { box-shadow: inset 0 0 0 2px var(--focus-ring); }
.aucra-canvas-menu-item.off { color: var(--placeholder); cursor: default; }
.aucra-canvas-menu-item.off .q-icon { color: var(--placeholder); }
.aucra-canvas-menu-rule { height: 1px; margin: 4px 6px; background: var(--line); }
.aucra-canvas-scrim {
  position: fixed;
  inset: 0;
  z-index: 4999;
  background: rgba(28, 33, 38, 0.32);
}
.aucra-canvas-menu.aucra-canvas-sheet {
  left: 0;
  right: 0;
  bottom: 0;
  width: auto;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  padding: 8px 8px 16px;
  border-radius: 12px 12px 0 0;
  box-shadow: 0 -8px 24px rgba(28, 33, 38, 0.18);
}
.aucra-canvas-sheet .aucra-canvas-menu-items { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.aucra-canvas-sheet .aucra-canvas-menu-item { height: 44px; font-size: 14px; }
/* On the sheet only the focused row is shaded: a finger's last touch leaves a
   hover behind on the row under it (the round 2 review's S14). */
.aucra-canvas-sheet .aucra-canvas-menu-item:hover:not(:focus) { background: none; }
.aucra-canvas-sheet-head {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px;
  font-size: 14px;
  font-weight: 600;
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
}
.aucra-canvas-sheet-head .aucra-canvas-id { font-family: "IBM Plex Mono", monospace; font-size: 11.5px; font-weight: 400; color: var(--muted); }
.aucra-canvas-menu-item.aucra-canvas-menu-cancel {
  justify-content: center;
  margin-top: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-weight: 500;
}