/* ============================================================
   Workflow — wrapping board of steps, notes pinned on connectors
   Accent: teal

   Every colour on .wf-card / .wf-conn / .wf-note resolves to a
   concrete hex (tints are computed in JS). html2canvas 1.4.1 throws
   on the color(srgb …) values that color-mix() produces, which would
   kill PNG/PDF export — so color-mix() must never appear here.
   ============================================================ */

.wf-wrap{
  flex:1; min-height:0;
  overflow-x:hidden; overflow-y:auto;
  padding:26px 22px 90px;
}

.wf-board{
  display:flex; flex-wrap:wrap; align-items:stretch;
  column-gap:0; row-gap:26px;
  width:100%;
}

.wf-slot{ display:flex; align-items:stretch; flex:none; }

/* ── Connector + note ────────────────────────────────────── */
.wf-conn{
  position:relative; flex:none;
  width:104px;
  display:flex; align-items:center; justify-content:center;
}
.wf-conn__line{
  position:relative;
  width:100%; height:2px;
  background:var(--accent-line);
  opacity:.5;
}
.wf-conn__line::after{
  content:"";
  position:absolute; right:-1px; top:50%;
  width:8px; height:8px;
  border-top:2px solid var(--accent-line);
  border-right:2px solid var(--accent-line);
  transform:translateY(-50%) rotate(45deg);
}

.wf-note-add{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:24px; height:24px;
  display:grid; place-items:center;
  border-radius:50%;
  background:var(--surface);
  border:1px solid var(--accent-border);
  color:var(--accent-ink);
  opacity:0;
  transition:opacity .14s var(--ease), transform .14s var(--ease);
  z-index:2;
}
.wf-note-add svg{ width:13px; height:13px; }
.wf-conn:hover .wf-note-add{ opacity:1; }
.wf-note-add:hover{ transform:translate(-50%,-50%) scale(1.12); }

.wf-note{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:84px; height:84px;
  display:grid; place-items:center;
  padding:9px;
  border-radius:50%;
  background:var(--accent-tint);
  border:1px solid var(--accent-border);
  box-shadow:var(--sh-1);
  z-index:3;
}
.wf-note__text{
  width:100%; height:100%;
  border:0; background:transparent;
  font-family:inherit; font-size:10.5px; line-height:1.32;
  text-align:center; color:var(--accent-ink);
  resize:none; overflow:hidden;
}
.wf-note__text:focus{ outline:none; }
.wf-note__text::placeholder{ color:var(--accent-ink); opacity:.45; }
.wf-note__del{
  position:absolute; top:-3px; right:-3px;
  width:19px; height:19px;
  display:grid; place-items:center;
  border-radius:50%;
  background:var(--surface);
  border:1px solid var(--hair-2);
  color:var(--muted);
  opacity:0;
  transition:opacity .14s var(--ease), color .14s var(--ease);
}
.wf-note__del svg{ width:10px; height:10px; }
.wf-note:hover .wf-note__del,
.wf-note__del:focus-visible{ opacity:1; }
.wf-note__del:hover{ color:var(--danger); border-color:#F0D5D3; }

/* ── Step card ───────────────────────────────────────────── */
.wf-card{
  width:250px; flex:none;
  display:flex; flex-direction:column;
  background:var(--surface);
  border:1px solid var(--hair);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
  overflow:hidden;
  animation:wf-in .22s var(--ease);
}
@keyframes wf-in{ from{ opacity:0; transform:translateY(5px) } }

.wf-card__top{
  display:flex; align-items:center; gap:6px;
  padding:8px 9px;
  border-bottom:1px solid var(--hair);
}
.wf-card__index{
  display:grid; place-items:center;
  width:21px; height:21px; flex:none;
  border-radius:50%;
  background:var(--accent-tint); color:var(--accent-ink);
  font-size:11.5px; font-weight:600;
  font-variant-numeric:tabular-nums;
}
.wf-card__tools{
  margin-left:auto; display:flex; gap:1px;
  opacity:0; transition:opacity .14s var(--ease);
}
.wf-card:hover .wf-card__tools,
.wf-card:focus-within .wf-card__tools{ opacity:1; }

.wf-card__body{ padding:10px; display:flex; flex-direction:column; gap:8px; flex:1; }

.wf-desc{
  width:100%; min-height:64px;
  padding:5px 6px; margin:0 -6px;
  border:1px solid transparent; border-radius:var(--r-sm);
  background:transparent;
  font-family:inherit; font-size:13.5px; line-height:1.5;
  resize:none; overflow:hidden;
  flex:1;
}
.wf-desc::placeholder{ color:var(--faint); }
.wf-desc:hover{ background:var(--surface-2); }
.wf-desc:focus{
  outline:none; background:var(--surface);
  border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-tint);
}

.wf-app{
  display:flex; align-items:center; gap:7px;
  padding:6px 9px;
  border:1px solid var(--hair); border-radius:var(--r-sm);
  background:var(--surface-2);
  color:var(--muted);
}
.wf-app svg{ width:14px; height:14px; flex:none; }
.wf-app input{
  flex:1; min-width:0;
  border:0; background:transparent;
  font-size:12.5px; font-weight:500; color:var(--ink);
}
.wf-app input::placeholder{ color:var(--faint); font-weight:400; }
.wf-app input:focus{ outline:none; }
.wf-app:focus-within{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-tint); background:var(--surface); }

.wf-add{
  width:180px; flex:none;
  margin-left:22px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; min-height:150px;
  border:1px dashed var(--hair-2); border-radius:var(--r-lg);
  color:var(--muted); font-size:14px; font-weight:500;
  transition:background .14s var(--ease), border-color .14s var(--ease), color .14s var(--ease);
}
.wf-add:hover{ background:var(--accent-tint); border-color:var(--accent-border); color:var(--accent-ink); }
.wf-add svg{ width:19px; height:19px; }

/* hidden during html2canvas capture */
.exporting .wf-card__tools,
.exporting .wf-note-add,
.exporting .wf-add{ display:none !important; }
.exporting .wf-note.is-empty{ display:none !important; }
.exporting .wf-card{ animation:none !important; }

/* ── Gallery cover: generated mini diagram ───────────────── */
.thumb--wf{
  display:flex; align-items:center; justify-content:center; gap:5px;
}
.mini-node{
  width:26px; height:19px;
  border-radius:5px;
  background:var(--surface);
  border:1px solid var(--accent-border);
  box-shadow:var(--sh-1);
}
.mini-arrow{
  position:relative;
  width:14px; height:2px;
  background:var(--accent-line);
  opacity:.6;
}
.mini-arrow::after{
  content:"";
  position:absolute; right:0; top:50%;
  width:5px; height:5px;
  border-top:2px solid var(--accent-line);
  border-right:2px solid var(--accent-line);
  transform:translateY(-50%) rotate(45deg);
}
.mini-dot{
  width:14px; height:14px;
  border-radius:50%;
  background:var(--accent-tint2);
  border:1px solid var(--accent-border);
}

@media (max-width:640px){
  .wf-wrap{ padding:16px 12px 80px; }
  .wf-board{ flex-direction:column; row-gap:10px; }
  .wf-slot{ flex-direction:column; width:100%; }
  .wf-card{ width:100%; }
  .wf-add{ width:100%; margin-left:0; min-height:auto; padding:18px; }

  /* the connector turns vertical so notes stay on the board */
  .wf-conn{ width:100%; height:64px; }
  .wf-conn__line{ width:2px; height:100%; }
  .wf-conn__line::after{
    right:auto; top:auto; left:50%; bottom:-1px;
    transform:translateX(-50%) rotate(135deg);
  }
  .wf-slot:has(.wf-note) .wf-conn{ height:96px; }
}