/* design-system-minimal — two colors only */
@import url("./tokens.css");
@import url("./themes.css");
@import url("./theme-agent.css");
@import url("./theme-settings.css");

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--line);
  font-family: var(--font);
  font-size: var(--size);
  font-weight: var(--weight-body);
  letter-spacing: var(--tracking-ui);
  line-height: var(--leading-ui);
  text-transform: uppercase;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

#app {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--bg);
  user-select: none;
  -webkit-user-select: none;
}

#app textarea.node__edit {
  user-select: text;
  -webkit-user-select: text;
}

/* Ctrl held — bounding boxes + resize handles for all canvas nodes */
html.show-bboxes .node:not(.is-group) {
  outline: 1px solid rgba(255, 255, 255, 0.55);
  outline-offset: 3px;
  overflow: visible;
}

html.show-bboxes .node.is-group {
  outline: 1px dashed rgba(255, 255, 255, 0.35);
  outline-offset: 2px;
}

.node-resize {
  position: absolute;
  width: 8px;
  height: 8px;
  background: #ffffff;
  border: 1px solid #000000;
  box-sizing: border-box;
  pointer-events: none;
  opacity: 0;
  z-index: 6;
}

html.show-bboxes .node-resize {
  pointer-events: auto;
  opacity: 1;
}

.node-resize[data-handle="nw"] { left: -5px; top: -5px; cursor: nwse-resize; }
.node-resize[data-handle="n"]  { left: calc(50% - 4px); top: -5px; cursor: ns-resize; }
.node-resize[data-handle="ne"] { right: -5px; top: -5px; cursor: nesw-resize; }
.node-resize[data-handle="e"]  { right: -5px; top: calc(50% - 4px); cursor: ew-resize; }
.node-resize[data-handle="se"] { right: -5px; bottom: -5px; cursor: nwse-resize; }
.node-resize[data-handle="s"]  { left: calc(50% - 4px); bottom: -5px; cursor: ns-resize; }
.node-resize[data-handle="sw"] { left: -5px; bottom: -5px; cursor: nesw-resize; }
.node-resize[data-handle="w"]  { left: -5px; top: calc(50% - 4px); cursor: ew-resize; }

.viewport.is-resizing-node {
  cursor: grabbing;
}

/* —— chrome —— */
.topbar {
  position: absolute;
  z-index: 20;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: var(--gap-ui);
  padding: var(--pad-ui);
  padding-left: var(--pad-cell);
  padding-right: var(--pad-cell);
  pointer-events: none;
  border-bottom: var(--hairline) solid var(--line-faint);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.92), rgba(0, 0, 0, 0.55) 70%, transparent);
}

.topbar__brand {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}

.topbar__mark {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--size);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
}

.topbar__meta {
  color: var(--line-dim);
  font-size: var(--size-ui);
  letter-spacing: var(--tracking-ui);
  text-transform: uppercase;
}

.topbar__actions {
  margin-left: auto;
  display: flex;
  gap: 0.5rem;
  pointer-events: auto;
}

.btn {
  appearance: none;
  background: transparent;
  color: var(--line);
  border: var(--hairline) solid var(--line);
  padding: 0.45rem 0.85rem;
  font: inherit;
  font-size: var(--size-ui);
  font-weight: var(--weight-body);
  letter-spacing: var(--tracking-ui);
  text-transform: uppercase;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}

.btn:hover,
.btn.is-on {
  background: var(--line);
  color: var(--bg);
}

.btn:focus-visible {
  outline: 1px solid var(--line);
  outline-offset: 3px;
}

.shape-field {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  pointer-events: auto;
}

.shape-field__label {
  font-size: var(--size-ui);
  letter-spacing: var(--tracking-ui);
  text-transform: uppercase;
  color: var(--line-dim);
}

.shape-select {
  appearance: none;
  background: var(--bg);
  color: var(--line);
  border: var(--hairline) solid var(--line);
  padding: 0.4rem 1.7rem 0.4rem 0.65rem;
  font: inherit;
  font-size: var(--size-ui);
  letter-spacing: var(--tracking-ui);
  text-transform: uppercase;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--line) 50%),
    linear-gradient(135deg, var(--line) 50%, transparent 50%);
  background-position: calc(100% - 12px) 55%, calc(100% - 7px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.shape-select:disabled {
  opacity: 0.35;
  cursor: default;
}

.shape-select:focus-visible {
  outline: 1px solid var(--line);
  outline-offset: 3px;
}

.node[data-shape="database"] {
  border-radius: 50% / 18%;
  border-top: none;
  border-bottom: none;
  box-shadow:
    0 -1.5px 0 0 var(--line),
    0 1.5px 0 0 var(--line);
}

.hud {
  position: absolute;
  z-index: 20;
  left: var(--pad-cell);
  bottom: var(--pad-cell);
  font-size: var(--size-ui);
  letter-spacing: var(--tracking-ui);
  text-transform: uppercase;
  color: var(--line-dim);
  pointer-events: none;
}

.hint {
  position: absolute;
  z-index: 20;
  right: var(--pad-cell);
  bottom: var(--pad-cell);
  max-width: 18rem;
  text-align: right;
  font-size: var(--size-ui);
  line-height: var(--leading-ui);
  letter-spacing: var(--tracking-ui);
  text-transform: uppercase;
  color: var(--line-dim);
  pointer-events: none;
}

/* —— viewport —— */
.viewport {
  position: absolute;
  inset: 0;
  cursor: grab;
  touch-action: none;
  overflow: hidden;
}

.viewport.is-panning {
  cursor: grabbing;
}

.viewport.is-dragging-node {
  cursor: grabbing;
}

.world {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  will-change: transform;
}

.grid {
  position: absolute;
  inset: -5000px;
  width: 10000px;
  height: 10000px;
  background-image: radial-gradient(circle, var(--line-faint) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
}

.edges {
  position: absolute;
  left: 0;
  top: 0;
  overflow: visible;
  pointer-events: none;
}

.edge-hit {
  fill: none;
  stroke: transparent;
  stroke-linecap: round;
  pointer-events: stroke;
  cursor: pointer;
  vector-effect: non-scaling-stroke;
}

.edge-preview {
  opacity: 0.55;
  stroke-dasharray: 6 6;
  pointer-events: none;
}

.viewport.is-link-mode,
.viewport.is-linking {
  cursor: crosshair;
}

.viewport.is-link-mode .node:not(.is-group),
.viewport.is-linking .node:not(.is-group) {
  cursor: crosshair;
}

.edge-path {
  fill: none;
  stroke: var(--line);
  stroke-width: 1.5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.edge-path.is-selected {
  stroke: var(--line);
  filter: drop-shadow(0 0 3px var(--line));
}

/* circle-graph: stroke scales with world (matches ref proportions) */
.edge-path.is-world-stroke {
  vector-effect: none;
  stroke-linecap: butt;
}

.edge-path.is-focus {
  stroke: var(--line);
  opacity: 1;
}

.edge-path.is-dim {
  stroke: var(--line);
  opacity: 0.38;
}

.edge-path.is-world-stroke.is-focus,
.edge-path.is-world-stroke.is-dim {
  /* thickness comes from stroke-width attr — same as ref hairline */
}

.edge-mid {
  fill: var(--line);
  stroke: none;
}

.edge-path.is-dashed {
  stroke-dasharray: 10 8;
}

.edge-path.is-short-dashed {
  stroke-dasharray: 5 5;
}

.edge-path.is-long-dashed {
  stroke-dasharray: 18 10;
}

.edge-path.is-dotted {
  stroke-dasharray: 2 6;
  stroke-linecap: round;
}

.edge-label {
  fill: var(--line);
  font-family: var(--font);
  font-size: 9px;
  font-weight: var(--weight-body);
  letter-spacing: var(--tracking-ui);
  text-transform: uppercase;
}

.edge-label-bg {
  fill: var(--bg);
}

/* —— nodes —— */
.nodes {
  position: absolute;
  left: 0;
  top: 0;
}

.node {
  position: absolute;
  color: var(--line);
  border: var(--hairline) solid var(--line);
  background: var(--node-fill, var(--bg));
  display: flex;
  align-items: center;
  justify-content: center;
  /* poster cell inset ≈ 18% — overridable via settings (S) */
  padding: var(--node-pad-y, 14%) var(--node-pad-x, 16%);
  cursor: grab;
  user-select: none;
  overflow: hidden;
}

.node.is-selected:not([data-select="reticle"]):not([data-variant="dot"]) {
  outline: 1px solid var(--line);
  outline-offset: var(--outline-off, 4px);
}

/* circle / dot — SVG vector ring (not CSS border) */
.node.is-vector,
.node[data-variant="dot"] {
  padding: 0;
  overflow: visible;
  background: transparent !important;
  border: none !important;
  border-radius: 0;
  color: var(--line);
  box-shadow: none;
}

.node[data-variant="dot"] .node__body {
  display: none;
}

.node__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  display: block;
}

.node__ring,
.node__reticle-path {
  /* world-space stroke under .world transform — stays vector-sharp */
  vector-effect: none;
}

.node.is-vector .node__body {
  position: relative;
  z-index: 1;
}

.node[data-select="reticle"].is-selected,
.node[data-variant="dot"].is-selected {
  outline: none;
}

.node.is-group {
  background: transparent;
  border-style: dashed;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0.45rem 0.6rem;
  cursor: default;
  pointer-events: none;
}

.node.is-group .node__label {
  font-size: var(--size-ui);
  letter-spacing: var(--tracking-ui);
  text-transform: uppercase;
  color: var(--line-dim);
  padding: 0.35rem 0.5rem;
}

.node[data-shape="pill"] {
  border-radius: 999px;
}

.node[data-shape="circle"] {
  border-radius: 50%;
}

.node[data-shape="diamond"] {
  background: transparent;
  border: none;
  padding: 0;
}

.node[data-shape="diamond"] .node__diamond {
  position: absolute;
  inset: 12%;
  border: 1.5px solid var(--line);
  background: var(--bg);
  transform: rotate(45deg);
}

.node[data-shape="diamond"] .node__body {
  position: relative;
  z-index: 1;
  width: 70%;
  text-align: center;
}

.node[data-shape="parallelogram"] {
  transform: skewX(-12deg);
  border-radius: 0;
}

.node[data-shape="parallelogram"] .node__body {
  transform: skewX(12deg);
}

.node[data-shape="predefined-process"] {
  box-shadow:
    inset 8px 0 0 -6.5px var(--line),
    inset -8px 0 0 -6.5px var(--line);
}

.node[data-shape="document"] {
  border-bottom: none;
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - 10px),
    85% 100%,
    70% calc(100% - 10px),
    55% 100%,
    40% calc(100% - 10px),
    25% 100%,
    10% calc(100% - 10px),
    0 100%
  );
}

.node[data-border="dashed"] {
  border-style: dashed;
}

.node[data-border="dotted"] {
  border-style: dotted;
}

.node[data-border="invisible"] {
  border-color: transparent;
  background: transparent;
}

.node[data-align="center"] .node__body {
  text-align: center;
}

.node[data-align="right"] .node__body {
  text-align: right;
}

.node__body {
  width: 100%;
  font-size: var(--size-body);
  font-weight: var(--weight-body);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  text-transform: uppercase;
  white-space: pre-wrap;
  word-break: break-word;
}

.node__body.is-copy,
.node[data-leading="copy"] .node__body {
  line-height: var(--leading-copy);
  letter-spacing: var(--tracking-body);
}

.node__body strong,
.node__body b {
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-display);
}

.node__body h2 {
  margin: 0 0 0.35em;
  font-family: var(--font-display);
  font-size: var(--size);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-display);
  line-height: 1.15;
  text-transform: uppercase;
}

.node__body p {
  margin: 0;
}

.node__body code {
  font-family: inherit;
  letter-spacing: var(--tracking-body);
}

.node.is-editing {
  cursor: text;
  outline: 1px solid var(--line);
  outline-offset: 4px;
  z-index: 5;
}

.node__edit {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--line);
  font: inherit;
  font-size: var(--size-body);
  font-weight: var(--weight-body);
  letter-spacing: var(--tracking-body);
  line-height: var(--leading-body);
  text-transform: uppercase;
  text-align: inherit;
  resize: none;
  outline: none;
  overflow: auto;
  caret-color: var(--line);
}

.node[data-align="center"] .node__edit,
.node:not([data-align]) .node__edit {
  text-align: center;
}

.node[data-align="right"] .node__edit {
  text-align: right;
}

.node[data-shape="parallelogram"] .node__edit {
  transform: skewX(12deg);
}