/* ═══════════════════════════════════════════════════════════════════════
   WORKFLOW CANVAS — styles for app-workflow-canvas.js

   Two rules drove the whole sheet:

   IT MUST BE BIG. The old canvas sat in the page flow and got whatever
   height was left over, which on a laptop was about 300px — six steps
   compacted into a strip nobody could work in. This one is sized from the
   VIEWPORT (dvh, so a phone's collapsing address bar does not cut it off)
   and has a real full-screen mode on top of that.

   IT MUST WORK WITH A THUMB. Every target is at least 32px, the canvas
   never scrolls the page while a finger is dragging on it
   (touch-action:none), and below 820px the inspector stops being a side
   panel — 320px of panel beside 340px of canvas is two unusable halves —
   and becomes a bottom sheet instead.

   Colours come from el.css tokens only, so dark mode needs nothing here.
   ═══════════════════════════════════════════════════════════════════════ */

.wf-shell {
  border: 1px solid var(--edge);
  border-radius: var(--radius-card);
  background: var(--surface);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* The page header and tab strip take roughly 260px; the rest is canvas. */
  height: calc(100dvh - 232px);
  min-height: 520px;
}
.wf-shell.full {
  position: fixed;
  inset: 0;
  z-index: 9000;
  height: 100dvh;
  border-radius: 0;
  border: 0;
}

/* ── toolbar ──────────────────────────────────────────────────────────── */
.wf-bar {
  display: flex; align-items: center; gap: .4rem;
  padding: .5rem .6rem;
  border-bottom: 1px solid var(--edge);
  background: var(--well);
  flex-wrap: wrap;
}
.wf-sp { flex: 1 1 auto; }

/* ── canvas ───────────────────────────────────────────────────────────── */
.wf-main { display: flex; flex: 1 1 auto; min-height: 0; }

.wf-vp {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  background-color: var(--bg);
  /* A grid is the cheapest way to make pan and zoom legible — without it
     a drag on empty space looks like nothing is happening. */
  background-image:
    radial-gradient(circle at 1px 1px, var(--edge) 1px, transparent 0);
  background-size: 22px 22px;
  touch-action: none;     /* a finger drags the canvas, never the page */
  cursor: grab;
}
.wf-vp:active { cursor: grabbing; }

.wf-world {
  position: absolute; left: 0; top: 0;
  transform-origin: 0 0;
  will-change: transform;
}
#wf-svg { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }

.wf-edge {
  fill: none;
  stroke: var(--ink-3);
  stroke-width: 2;
  pointer-events: stroke;
  cursor: pointer;
}
.wf-edge:hover { stroke: var(--ink); stroke-width: 3; }
.wf-edge.sel   { stroke: var(--ink); stroke-width: 3; }
.wf-edge.ghost { stroke-dasharray: 5 4; stroke: var(--ink); pointer-events: none; }

.wf-elabel {
  position: absolute;
  transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: .25rem;
  background: var(--surface);
  border: 1px solid var(--edge);
  border-radius: 999px;
  padding: .1rem .25rem .1rem .5rem;
  font-size: 11.5px; line-height: 1.5;
  color: var(--ink-2);
  white-space: nowrap;
  max-width: 190px;
  cursor: pointer;
}
.wf-elabel.sel { border-color: var(--ink); color: var(--ink); }
.wf-ex {
  border: 0; background: transparent; cursor: pointer;
  color: var(--ink-3); font-size: 15px; line-height: 1;
  padding: 0 .2rem; border-radius: 50%;
}
.wf-ex:hover { color: var(--danger); }

/* ── node ─────────────────────────────────────────────────────────────── */
.wf-node {
  position: absolute;
  background: var(--surface);
  border: 1px solid var(--edge);
  border-radius: var(--radius-card);
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  cursor: grab;
  user-select: none;
  touch-action: none;
}
.wf-node:active { cursor: grabbing; }
.wf-node.sel  { border-color: var(--ink); box-shadow: 0 0 0 2px var(--ink); }
.wf-node.bad  { border-color: var(--danger); }
.wf-node.drop { border-color: var(--ink); box-shadow: 0 0 0 3px var(--track); }
.wf-node.gl   { border-style: dashed; }

.wf-in {
  position: absolute; top: -5px; left: 50%; transform: translateX(-50%);
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--ink-3);
}
.wf-hd {
  display: flex; align-items: center; gap: .35rem;
  padding: .5rem .6rem .25rem;
}
.wf-t { font-weight: 600; font-size: 13.5px; }
.wf-badge {
  font-size: 10px; text-transform: uppercase; letter-spacing: .04em;
  background: var(--track); color: var(--ink-2);
  border-radius: 4px; padding: .05rem .3rem;
}
.wf-badge.gl { background: var(--ink); color: var(--bg); }
.wf-x {
  margin-left: auto; border: 0; background: transparent; cursor: pointer;
  color: var(--ink-3); font-size: 17px; line-height: 1; padding: 0 .15rem;
}
.wf-x:hover { color: var(--danger); }
.wf-pv {
  padding: 0 .6rem .5rem;
  font-size: 12.5px; color: var(--ink-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.wf-ports {
  display: flex; flex-wrap: wrap; gap: .25rem;
  padding: 0 .5rem .5rem;
}
.wf-port {
  font-size: 11px;
  border: 1px solid var(--edge);
  border-radius: 999px;
  padding: .15rem .5rem;
  color: var(--ink-3);
  background: var(--well);
  cursor: crosshair;
  min-height: 22px;
  display: inline-flex; align-items: center;
  touch-action: none;
}
.wf-port.on   { color: var(--ink); border-color: var(--ink-3); }
.wf-port.cond { border-style: dashed; }
.wf-port:hover { border-color: var(--ink); color: var(--ink); }

/* ── add menu ─────────────────────────────────────────────────────────── */
.wf-menu {
  position: absolute; z-index: 20;
  background: var(--surface);
  border: 1px solid var(--edge);
  border-radius: var(--radius-card);
  box-shadow: 0 8px 28px rgba(0,0,0,.14);
  padding: .3rem;
  width: 208px;
}
.wf-menu button {
  display: block; width: 100%; text-align: left;
  border: 0; background: transparent; cursor: pointer;
  padding: .4rem .5rem; border-radius: 8px;
  font: inherit; color: var(--ink);
}
.wf-menu button:hover { background: var(--well); }
.wf-menu b  { display: block; font-size: 13px; }
.wf-menu em { display: block; font-style: normal; font-size: 11.5px; color: var(--ink-3); }

/* ── inspector ────────────────────────────────────────────────────────── */
.wf-insp {
  width: 324px; flex: 0 0 324px;
  border-left: 1px solid var(--edge);
  background: var(--surface);
  display: flex; flex-direction: column;
  min-height: 0;
}
.wf-ihd {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; padding: .6rem .7rem;
  border-bottom: 1px solid var(--edge);
}
.wf-ibody { padding: .7rem; overflow: auto; flex: 1 1 auto; }
.wf-empty { padding: 1.1rem .9rem; color: var(--ink-2); }

.wf-f { display: block; margin-bottom: .7rem; }
.wf-f > span { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: .25rem; }
.wf-f > em {
  display: block; font-style: normal;
  font-size: 11.5px; color: var(--ink-3); margin-top: .2rem;
}
.wf-f textarea, .wf-f input, .wf-out select {
  width: 100%;
  border: 1px solid var(--edge);
  border-radius: var(--radius-input);
  padding: .45rem .55rem;
  font: inherit; font-size: 13px;
  background: var(--bg); color: var(--ink);
}
.wf-f textarea { resize: vertical; }

.wf-sec {
  font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-3);
  margin: 1rem 0 .4rem;
  padding-top: .6rem; border-top: 1px solid var(--edge-soft);
}
.wf-tog {
  display: flex; align-items: center; gap: .45rem;
  font-size: 13px; margin: .3rem 0 .2rem; cursor: pointer;
}
.wf-note {
  background: var(--well); border-radius: 8px;
  padding: .5rem .6rem; font-size: 12.5px; color: var(--ink-2);
  margin: .4rem 0;
}
.wf-out { display: flex; align-items: center; gap: .4rem; margin-bottom: .35rem; }
.wf-olabel {
  font-size: 11.5px; color: var(--ink-2);
  border: 1px solid var(--edge); border-radius: 999px;
  padding: .1rem .45rem; white-space: nowrap; flex: 0 0 auto;
  max-width: 110px; overflow: hidden; text-overflow: ellipsis;
}
.wf-olabel.cond { border-style: dashed; }
.wf-edit { display: flex; align-items: center; gap: .35rem; margin-bottom: .35rem; }
.wf-edit input {
  flex: 1 1 auto; min-width: 0;
  border: 1px solid var(--edge); border-radius: var(--radius-input);
  padding: .35rem .5rem; font: inherit; font-size: 12.5px;
  background: var(--bg); color: var(--ink);
}

/* ── faults strip ─────────────────────────────────────────────────────── */
.wf-warn {
  border-top: 1px solid var(--edge);
  background: var(--well);
  padding: .4rem .6rem;
  display: flex; flex-wrap: wrap; gap: .4rem;
  max-height: 84px; overflow: auto;
}
.wf-warnrow {
  font-size: 12px; color: var(--danger);
  border: 1px solid var(--danger); border-radius: 999px;
  padding: .1rem .5rem; cursor: pointer;
}
.wf-warnrow b { color: var(--danger); }

/* ── phone ────────────────────────────────────────────────────────────── */
/* Seen on an iPhone 2026-09-17: the toolbar wrapped to two rows, the
   inspector held 46% of the height while saying "Nothing selected", the add
   menu floated over the nodes, and the canvas that was left showed the flow
   at 39%. Every one of those is a layout decision made for a desktop. */
@media (max-width: 820px) {
  .wf-shell { height: calc(100dvh - 150px); min-height: 420px; }
  .wf-main { flex-direction: column; }

  /* One row of tools that scrolls sideways, never a second row: a second
     row is 44px taken from a canvas that has none to spare. */
  .wf-bar {
    gap: .3rem; padding: .4rem;
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .wf-bar::-webkit-scrollbar { display: none; }
  .wf-bar .btn { flex: 0 0 auto; white-space: nowrap; padding-left: .55rem; padding-right: .55rem; }

  /* The inspector is a bottom sheet: a one-line handle while nothing is
     selected (the canvas gets the height), most of the screen when a step
     is being edited (the fields get the height). */
  .wf-insp {
    width: auto; flex: 0 0 58%;
    border-left: 0; border-top: 1px solid var(--edge);
  }
  .wf-insp.empty { flex: 0 0 auto; max-height: 64px; overflow: hidden; }
  .wf-insp.empty .wf-empty { padding: .45rem .8rem; }
  .wf-insp.empty .wf-empty b { display: none; }
  .wf-insp.empty .wf-empty .sub { font-size: 12px; line-height: 1.35; text-align: left; }
  .wf-ihd { position: sticky; top: 0; background: var(--surface); z-index: 1; }

  /* The add menu is a sheet at the bottom, full width, thumb-sized rows -
     not a 208px card dropped onto whichever node was under it. */
  .wf-menu.sheet {
    position: fixed; left: 8px; right: 8px; bottom: 8px; top: auto;
    width: auto; z-index: 9500;
    box-shadow: 0 -8px 28px rgba(0,0,0,.22);
    max-height: 70dvh; overflow: auto;
  }
  .wf-menu.sheet button { min-height: 48px; padding: .5rem .7rem; }
  .wf-menu.sheet b { font-size: 14.5px; }
  .wf-menu.sheet em { font-size: 12.5px; }

  .wf-port { min-height: 26px; padding: .2rem .55rem; }
  .wf-x, .wf-ex { font-size: 20px; padding: 0 .3rem; }
}