@layer canvas {
  .canvas-wrap {
    grid-row: 2;
    grid-column: 2;
    min-width: 0;
    min-height: 0;
    container: balaur-content / inline-size;
  }
  .canvas {
    --map-surface: var(--balaur-surface-map);
    --map-grid: rgb(200 169 107 / 8%);
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    outline: 0;
    background-color: var(--map-surface);
    background-image:
      linear-gradient(var(--map-grid) 1px, transparent 1px),
      linear-gradient(90deg, var(--map-grid) 1px, transparent 1px),
      radial-gradient(circle at 68% 38%, rgb(104 69 33 / 13%), transparent 42%);
    background-size: 24px 24px, 24px 24px, auto;
    cursor: default;
  }
  .canvas:focus-visible {
    outline: 2px solid var(--balaur-border-focus);
    outline-offset: -2px;
  }
  .canvas.panning, .canvas.tool-pan { cursor: grab; }
  .canvas.panning { cursor: grabbing; }
  .world { position: absolute; inset: 0 auto auto 0; transform-origin: 0 0; will-change: transform; }
  .edges {
    position: absolute;
    inset: 0 auto auto 0;
    width: 1px;
    height: 1px;
    overflow: visible;
    pointer-events: none;
  }
  .edge-hit { pointer-events: stroke; cursor: pointer; }
  .edge-line {
    fill: none;
    stroke: var(--balaur-border-default);
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
  }
  .edge-hit:hover + .edge-line, .edge.selected .edge-line {
    stroke: var(--balaur-action-primary);
    stroke-width: 2;
  }
  .edge-label-bg {
    fill: var(--balaur-color-soot-900);
    stroke: var(--balaur-border-default);
    stroke-width: 1;
  }
  .edge-label {
    fill: var(--balaur-content-on-dark);
    font: 10px var(--balaur-font-body);
    text-anchor: middle;
    dominant-baseline: middle;
  }

  .canvas-node {
    --node-surface: var(--balaur-surface-parchment);
    --node-content: var(--balaur-content-on-paper);
    --node-muted: var(--balaur-content-on-paper-muted);
    position: absolute;
    overflow: hidden;
    border: 1px solid var(--balaur-border-default);
    border-radius: var(--balaur-radius-control);
    background: var(--node-surface);
    box-shadow: var(--balaur-shadow-paper);
    color: var(--node-content);
    user-select: none;
    cursor: grab;
  }
  .canvas-node:hover { border-color: var(--balaur-action-primary); }
  .canvas-node.selected:not(.group-node) { overflow: visible; border-color: var(--balaur-action-primary); }
  .group-node.selected {
    border-width: 2px;
    border-color: var(--balaur-action-primary);
    outline: 1px solid var(--balaur-action-primary);
    outline-offset: 2px;
  }
  .canvas-node.connect-source {
    border-color: var(--balaur-action-assistant);
    box-shadow: 0 0 0 2px var(--balaur-action-assistant), var(--balaur-shadow-paper);
  }
  .canvas-node.filtered { opacity: .1; pointer-events: none; }
  .canvas-node.connection-drag-source { border-color: var(--balaur-action-primary); }
  .canvas-node.connection-target {
    border-color: var(--balaur-action-assistant);
    box-shadow: 0 0 0 2px var(--balaur-action-assistant), var(--balaur-shadow-paper);
  }
  body.connection-dragging, body.connection-dragging * { cursor: crosshair !important; }
  .connection-preview { pointer-events: none; }
  .connection-preview path {
    fill: none;
    stroke: var(--balaur-action-assistant);
    stroke-width: 2;
    stroke-dasharray: 6 4;
  }

  .selection-bearing {
    position: absolute;
    inset: -7px;
    display: none;
    pointer-events: none;
    z-index: 7;
  }
  .canvas-node.selected:not(.group-node) > .selection-bearing { display: block; }
  /* Cartographic registration brackets: gold on the TL/BR corners… */
  .selection-bearing i {
    position: absolute;
    inset: 0;
    background:
      linear-gradient(var(--balaur-action-primary) 0 0) 0 0 / 14px 2px no-repeat,
      linear-gradient(var(--balaur-action-primary) 0 0) 0 0 / 2px 14px no-repeat,
      linear-gradient(var(--balaur-action-primary) 0 0) 100% 100% / 14px 2px no-repeat,
      linear-gradient(var(--balaur-action-primary) 0 0) 100% 100% / 2px 14px no-repeat;
  }
  /* …river teal on the TR/BL corners, so the frame reads as two-tone bearings. */
  .selection-bearing i + i {
    background:
      linear-gradient(var(--balaur-action-assistant) 0 0) 100% 0 / 14px 2px no-repeat,
      linear-gradient(var(--balaur-action-assistant) 0 0) 100% 0 / 2px 14px no-repeat,
      linear-gradient(var(--balaur-action-assistant) 0 0) 0 100% / 14px 2px no-repeat,
      linear-gradient(var(--balaur-action-assistant) 0 0) 0 100% / 2px 14px no-repeat;
  }

  .connection-handles {
    position: absolute;
    inset: 0;
    z-index: 8;
    opacity: 0;
    pointer-events: none;
  }
  /* Connection dots are a connect affordance, not a selection marker: show them
     on an unselected card (hover to grab an edge) or while the connect tool is
     active, but never on a card that is merely selected. */
  .canvas-node:not(.selected):hover .connection-handles,
  .canvas-node:not(.selected):focus-within .connection-handles,
  .canvas.tool-connect .canvas-node:hover .connection-handles,
  .canvas-node.connection-drag-source .connection-handles { opacity: 1; }
  .connection-handle {
    position: absolute;
    width: 14px;
    height: 14px;
    border: 2px solid var(--balaur-color-ink-900);
    border-radius: 50%;
    padding: 0;
    background: var(--balaur-action-primary);
    box-shadow: 0 0 0 1px var(--balaur-surface-parchment);
    pointer-events: auto;
    cursor: crosshair;
    touch-action: none;
  }
  .connection-handle::before { content: ""; position: absolute; inset: -12px; }
  .connection-handle:hover { background: var(--balaur-action-assistant); }
  .connection-handle.top { top: 2px; left: 50%; transform: translateX(-50%); }
  .connection-handle.right { right: 2px; top: 50%; transform: translateY(-50%); }
  .connection-handle.bottom { bottom: 2px; left: 50%; transform: translateX(-50%); }
  .connection-handle.left { left: 2px; top: 50%; transform: translateY(-50%); }

  .node-accent {
    position: absolute;
    inset: 10px 11px auto auto;
    width: 9px;
    height: 9px;
    /* The accent dot sits on the dark inked header tab, so its ring is a faint
       light halo (a dark ring would vanish); accented cards override both. */
    border: 2px solid color-mix(in oklab, var(--balaur-content-on-dark) 42%, transparent);
    border-radius: 50%;
    background: var(--balaur-content-on-dark-muted);
    z-index: 3;
  }
  /* Every content card shares the live-widget chrome: a title-bar header
     (.node-kicker) above a padded body (.node-body). */
  .node-content { display: flex; flex-direction: column; height: 100%; overflow: hidden; padding: 0; }
  .node-kicker {
    flex: 0 0 30px;
    display: flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    margin: 0;
    border-block-end: 1px solid var(--balaur-color-outline);
    padding-inline: 13px;
    /* An inked title tab: the same dark oak as the live-widget header, tinted
       with a faint wash of the card accent (currentColor). The old bar lifted
       the surface toward white, which left both the muted label and the bright
       accent codes illegible; a dark bar with light text keeps every label
       readable and makes the header read as a band clearly separate from the
       parchment body, unifying content cards with the widget chrome. */
    background:
      linear-gradient(color-mix(in oklab, currentColor 18%, transparent), color-mix(in oklab, currentColor 6%, transparent)),
      var(--balaur-surface-oak);
    color: var(--balaur-content-on-dark-muted);
    font: 600 8px var(--balaur-font-mono);
    letter-spacing: .12em;
    text-transform: uppercase;
  }
  .node-body { flex: 1 1 auto; min-height: 0; overflow: hidden; padding: 12px 14px 14px; }
  .node-kicker::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
  }
  .node-content h2, .node-content h3, .node-content p { margin: 0; }
  .node-content h2, .node-content h3, .ai-card-title {
    color: var(--node-content);
    font-family: var(--balaur-font-display);
    font-weight: 600;
  }
  .node-content h2 { font-size: 19px; line-height: 1.25; letter-spacing: -.015em; }
  .node-content h3 { font-size: 14px; line-height: 1.35; }
  .node-content p {
    margin-block-start: 8px;
    color: var(--node-muted);
    font: 10px/1.55 var(--balaur-font-body);
  }
  .node-content ul {
    margin: 9px 0 0;
    padding: 0;
    list-style: none;
    color: var(--node-muted);
    font: 10px/1.45 var(--balaur-font-body);
  }
  .node-content li { margin: 5px 0; }
  .node-content li::before { content: "○"; margin-inline-end: 7px; color: var(--balaur-border-default); }
  .node-content li.checked::before { content: "●"; color: var(--balaur-status-success); }
  .node-content code {
    border-radius: 1px;
    padding: 1px 3px;
    background: rgb(42 32 21 / 12%);
    font-family: var(--balaur-font-mono);
  }
  .progress {
    height: 3px;
    margin-block-start: 12px;
    overflow: hidden;
    background: rgb(128 100 56 / 25%);
  }
  .progress span { display: block; height: 100%; background: currentColor; }
  .canvas-node[data-color="1"] :where(.node-accent, .node-kicker) { color: var(--balaur-canvas-red); }
  .canvas-node[data-color="2"] :where(.node-accent, .node-kicker) { color: var(--balaur-canvas-orange); }
  .canvas-node[data-color="3"] :where(.node-accent, .node-kicker) { color: var(--balaur-canvas-yellow); }
  .canvas-node[data-color="4"] :where(.node-accent, .node-kicker) { color: var(--balaur-canvas-green); }
  .canvas-node[data-color="5"] :where(.node-accent, .node-kicker) { color: var(--balaur-canvas-cyan); }
  .canvas-node[data-color="6"] :where(.node-accent, .node-kicker) { color: var(--balaur-canvas-purple); }
  .canvas-node[data-color] .node-accent,
  .canvas-node.task-card .node-accent,
  .canvas-node.ai-card .node-accent,
  .canvas-node.subcanvas-node .node-accent {
    background: currentColor;
    border-color: color-mix(in oklab, currentColor 52%, var(--balaur-color-ink-900));
  }

  .canvas-node.task-card .node-accent,
  .canvas-node.task-card .node-kicker { color: var(--balaur-action-primary); }
  .canvas-node.task-card .node-body { padding-block-end: 40px; }
  .canvas-node.task-complete { opacity: .62; }
  .canvas-node.task-complete h2 { text-decoration: line-through; }
  .task-node-footer {
    position: absolute;
    inset: auto 13px 11px 17px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }
  .task-node-footer span { color: var(--node-muted); font: 8px var(--balaur-font-mono); }
  .task-node-footer button,
  .ai-run-button,
  .portal-actions button,
  .open-subcanvas-inspector {
    min-height: 28px;
    border: 1px solid var(--balaur-border-default);
    border-radius: var(--balaur-radius-control);
    padding: 4px 8px;
    background: var(--balaur-surface-parchment-raised);
    color: var(--balaur-content-on-paper);
    font: 8px var(--balaur-font-mono);
    cursor: pointer;
  }
  .task-node-footer button:hover,
  .ai-run-button:hover,
  .portal-actions button:hover,
  .open-subcanvas-inspector:hover { border-color: var(--balaur-action-primary); }
  .task-node-footer button:disabled, .ai-run-button:disabled { opacity: .55; cursor: default; }

  .canvas-node.ai-card { border-color: var(--balaur-action-assistant); }
  .canvas-node.ai-card .node-accent,
  .canvas-node.ai-card .node-kicker { color: var(--balaur-action-assistant); }
  .canvas-node.ai-card.running .node-accent {
    background: linear-gradient(90deg, var(--balaur-action-assistant), var(--balaur-action-primary), var(--balaur-action-assistant));
    background-size: 200% 100%;
  }
  .canvas-node.ai-card .node-body { padding-block-end: 44px; }
  .ai-card-title { margin: 0; font-size: 14px; }
  .ai-card-prompt {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }
  .ai-inputs { display: flex; flex-wrap: wrap; gap: 4px; margin-block-start: 10px; }
  .ai-input-chip {
    max-width: 110px;
    overflow: hidden;
    border: 1px solid var(--balaur-border-default);
    border-radius: 999px;
    padding: 3px 6px;
    color: var(--node-muted);
    font: 8px var(--balaur-font-mono);
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ai-run-row {
    position: absolute;
    inset: auto 14px 12px 17px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .ai-run-status { color: var(--node-muted); font: 8px var(--balaur-font-mono); }

  .resize-handle {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 20px;
    height: 20px;
    opacity: 0;
    cursor: nwse-resize;
  }
  .resize-handle::after {
    content: "";
    position: absolute;
    right: 4px;
    bottom: 4px;
    width: 7px;
    height: 7px;
    border-inline-end: 2px solid var(--balaur-color-ink-700);
    border-block-end: 2px solid var(--balaur-color-ink-700);
  }
  .canvas-node.selected .resize-handle { opacity: 1; }

  .group-node {
    --node-content: var(--balaur-content-on-dark);
    --node-muted: var(--balaur-content-on-dark-muted);
    border: 1px dashed var(--balaur-border-default);
    border-radius: var(--balaur-radius-panel);
    background: rgb(36 21 12 / 42%);
    box-shadow: none;
  }
  .group-node .node-content { padding: 15px; }
  .group-label {
    color: var(--node-muted);
    font: 500 10px var(--balaur-font-mono);
    letter-spacing: .1em;
    text-transform: uppercase;
  }
  .file-preview {
    display: grid;
    place-items: center;
    height: 90px;
    margin: 0 0 10px;
    border: 1px solid var(--balaur-border-default);
    background: rgb(128 100 56 / 14%);
    color: var(--node-muted);
    font-size: 25px;
  }
  .canvas-node.subcanvas-node { --node-surface: #cfb878; }
  .subcanvas-node .node-accent,
  .subcanvas-node .node-kicker { color: var(--balaur-action-assistant); }
  .subcanvas-node .node-body { padding: 13px 15px 15px; }
  .subcanvas-node h3 { font-size: 17px; }
  .subcanvas-node .node-content > p { margin-block-start: 3px; }
  .portal-preview {
    position: relative;
    height: 92px;
    margin-block-start: 11px;
    overflow: hidden;
    border: 1px solid var(--balaur-color-outline);
    border-radius: var(--balaur-radius-control);
    padding: 5px;
    background-color: var(--balaur-surface-map);
    background-image: radial-gradient(circle, rgb(200 169 107 / 22%) .7px, transparent .9px);
    background-size: 12px 12px;
  }
  .portal-preview i {
    position: absolute;
    display: block;
    min-width: 2px;
    min-height: 2px;
    border-radius: 1px;
    opacity: .75;
  }
  .portal-preview i.group { border: 1px dashed var(--balaur-border-default); background: transparent; }
  .portal-empty {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--balaur-content-on-dark-muted);
    font: 8px var(--balaur-font-mono);
    letter-spacing: .05em;
  }
  .portal-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-block-start: 10px;
  }
  .portal-actions span { color: var(--node-muted); font: 8px var(--balaur-font-mono); }

  .canvas-node.html-widget { --node-surface: var(--balaur-surface-oak-raised); }
  .canvas-node.html-widget .node-kicker {
    flex-basis: 35px;
    height: 35px;
    padding-inline: 14px;
    background: var(--balaur-surface-oak);
    color: var(--balaur-content-on-dark-muted);
    cursor: grab;
  }
  .canvas-node.html-widget .node-body { padding: 0; }
  .widget-frame { display: block; width: 100%; height: 100%; border: 0; background: #0c1016; }
  .widget-shield { display: none; position: absolute; inset: 35px 0 0; z-index: 2; }
  .canvas-node.html-widget.selected:active .widget-shield { display: block; }
  .node-link {
    display: block;
    margin-block-start: 10px;
    overflow: hidden;
    color: var(--balaur-color-ink-700);
    font-size: 10px;
    text-decoration: underline;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .canvas-tools {
    position: absolute;
    bottom: 16px;
    left: 50%;
    display: flex;
    gap: 2px;
    border: 2px solid var(--balaur-color-outline);
    border-radius: var(--balaur-radius-control);
    padding: 3px;
    background: var(--balaur-surface-oak-raised);
    box-shadow: inset 1px 1px var(--balaur-border-default);
    transform: translateX(-50%);
    transition: transform var(--balaur-duration-panel) var(--balaur-ease-standard);
  }
  .canvas-tools > span { width: 1px; margin: 5px 3px; background: var(--balaur-border-default); }
  .tool {
    width: var(--balaur-target-min);
    height: var(--balaur-target-min);
    border: 0;
    border-radius: 1px;
    background: transparent;
    color: var(--balaur-content-on-dark-muted);
    font-family: var(--balaur-font-mono);
    cursor: pointer;
  }
  .tool:hover, .tool.active { background: var(--balaur-surface-oak); color: var(--balaur-action-primary); }
  .add-menu { position: relative; }
  .add-menu-toggle[aria-expanded="true"] { background: var(--balaur-surface-oak); color: var(--balaur-action-primary); }
  .add-menu-panel {
    position: absolute;
    bottom: calc(100% + 9px);
    right: 0;
    z-index: 30;
    display: grid;
    max-height: calc(100dvh - 160px);
    overflow-y: auto;
    gap: 2px;
    min-width: 250px;
    border: 2px solid var(--balaur-color-outline);
    border-radius: var(--balaur-radius-control);
    padding: 5px;
    background: var(--balaur-surface-oak-raised);
    box-shadow: inset 1px 1px var(--balaur-border-default), var(--balaur-shadow-overlay);
  }
  .add-menu-panel[hidden],
  .add-menu-panel[popover]:not(:popover-open) { display: none; }
  .add-menu-item {
    display: grid;
    grid-template-columns: 26px 1fr;
    gap: 10px;
    align-items: center;
    border: 0;
    border-radius: 1px;
    padding: 7px 9px;
    background: transparent;
    color: var(--balaur-content-on-dark);
    text-align: start;
    cursor: pointer;
  }
  .add-menu-item:hover, .add-menu-item:focus-visible { background: var(--balaur-surface-oak); }
  .add-menu-item b { display: block; font-size: 11px; }
  .add-menu-item small { display: block; margin-block-start: 1px; color: var(--balaur-content-on-dark-muted); font-size: 9px; line-height: 1.25; }
  .add-icon { font: 500 17px var(--balaur-font-mono); }
  .note-icon { color: var(--balaur-canvas-orange); }
  .inbox-icon { color: var(--balaur-canvas-orange); }
  .goal-icon, .task-icon { color: var(--balaur-canvas-red); }
  .habit-icon, .ai-icon { color: var(--balaur-canvas-green); }
  .project-icon { color: var(--balaur-canvas-purple); }
  .widget-icon, .ai-note-icon { color: var(--balaur-canvas-cyan); }
  .reference-icon { color: var(--balaur-canvas-cyan); }
  .subcanvas-icon { color: var(--balaur-action-primary); }
  .zoom-tools {
    position: absolute;
    left: 17px;
    bottom: 17px;
    display: flex;
    border: 2px solid var(--balaur-color-outline);
    border-radius: var(--balaur-radius-control);
    padding: 3px;
    background: var(--balaur-surface-oak-raised);
  }
  .zoom-tools button {
    min-width: var(--balaur-target-min);
    height: var(--balaur-target-min);
    border: 0;
    border-inline-end: 1px solid var(--balaur-border-default);
    background: transparent;
    color: var(--balaur-content-on-dark-muted);
    font: 11px var(--balaur-font-mono);
    cursor: pointer;
  }
  .zoom-tools button:last-child { border: 0; }
  .zoom-tools button:hover { color: var(--balaur-action-primary); }
  .minimap {
    position: absolute;
    right: 17px;
    bottom: 17px;
    width: 128px;
    height: 82px;
    overflow: hidden;
    border: 2px solid var(--balaur-color-outline);
    border-radius: var(--balaur-radius-control);
    background: var(--balaur-surface-oak-raised);
    opacity: .9;
    padding: 0;
    cursor: pointer;
  }
  .mini-world { position: absolute; inset: 0; }
  .mini-node { position: absolute; border-radius: 1px; background: var(--balaur-surface-parchment); }
  .mini-node.group { border: 1px solid var(--balaur-border-default); background: transparent; }
  .mini-viewport { position: absolute; border: 1px solid var(--balaur-action-assistant); background: rgb(94 208 189 / 8%); }
  .toast {
    position: absolute;
    left: 50%;
    bottom: 25px;
    border: 1px solid var(--balaur-color-outline);
    border-radius: var(--balaur-radius-control);
    padding: 8px 13px;
    background: var(--balaur-surface-parchment-raised);
    color: var(--balaur-content-on-paper);
    font-size: 10px;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 15px);
  }
  .toast.show { opacity: 1; transform: translate(-50%, 0); }
}