/* flow: a whiteboard sketch of a system as cards on a table. Handwriting,
   one hub. Drag the boxes about; tap one to light it and read its note.
   One component for every lesson: the page only supplies the nodes and
   arrows (see components/flow.js). Height per flow: style="--flow-h: 400px;
   --flow-h-phone: 440px" on the .flow element. */
.flow { position: relative; isolation: isolate; }
.flow-table {
  position: relative; height: var(--flow-h, 400px); border-radius: var(--radius); overflow: hidden;
  background:
    radial-gradient(circle, rgb(var(--shadow) / 0.1) 0.8px, transparent 0.9px) 0 0 / 16px 16px,
    var(--gray-200);
  box-shadow: inset 0 0 0 1px rgb(var(--shadow) / 0.06);
  user-select: none; -webkit-user-select: none;
}
.flow-edges { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.flow-edges path { fill: none; stroke: var(--gray-1100); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.flow-edges text { font-family: var(--mono); font-size: 10px; fill: var(--gray-1000); }
.flow-card {
  position: absolute; left: 0; top: 0; width: var(--tw); height: var(--th);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  padding: 6px; border-radius: 10px; background: var(--surface); box-shadow: var(--elevation-raised);
  transform: translate(var(--x), var(--y)) rotate(var(--r, 0deg)); z-index: 2;
}
.flow-card-title { font-size: 11px; font-weight: var(--weight-medium); color: var(--gray-1200); text-align: center; line-height: 1.2; text-wrap: balance; }
/* the note anchor sits exactly over its card; neat-annotations draws the
   arrow and the handwriting off it. The lesson shell measures every
   .ann-e / .ann-w against the page margin; inside the table those
   measurements are pinned so the note stays beside its card. */
.flow .flow-anchor {
  position: absolute; left: 0; top: 0; width: var(--tw); height: var(--th); display: block; pointer-events: none; z-index: 6;
  transform: translate(var(--x), var(--y));
  --ann-reach: 0px !important; --ann-room: 200px !important; --ann-text-y: 5px !important; --ann-arrow-y: 0px !important;
}
.flow-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0;
  border: 0; border-radius: 999px; background: var(--surface); color: var(--gray-1100); box-shadow: var(--elevation-raised);
  cursor: pointer; touch-action: manipulation;
  transition: color 150ms ease-out, box-shadow 150ms ease-out, transform 150ms ease-out, opacity 150ms ease-out;
}
.flow-btn:active { transform: scale(0.96); }
.flow-btn:disabled { opacity: 0.35; cursor: default; transform: none; }
.flow-btn svg { display: block; }
.flow-btn-ink { background: var(--gray-1200); color: var(--on-ink); }
.flow-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (hover: hover) and (pointer: fine) {
  .flow-btn:not(:disabled):hover { color: var(--gray-1200); box-shadow: var(--elevation-raised-hover); }
  .flow-btn-ink:not(:disabled):hover { background: var(--ink-hover); color: var(--on-ink); }
}
/* card-sketch: boxes like a whiteboard sketch. No icon, the title in the
   course's handwriting, a blue ring on the node marked "hub": true. */
.flow-card-title { font-family: 'Shantell Sans', cursive; font-size: 14px; font-weight: 500; line-height: 1.25; }
.flow-card.is-hub { box-shadow: 0 0 0 1.5px #3b72c4, var(--elevation-raised); }
.flow-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 12px; min-height: 40px; }
/* the phone gets its own layout, not a squeezed copy of the desktop one:
   the loop zig-zags down instead of running across. positions come from each
   node's "mobile" pair, chosen at the same breakpoint as this height. */
@media (max-width: 559px) { .flow-table { height: var(--flow-h-phone, 440px); } }
.flow-card { cursor: grab; will-change: transform; touch-action: none; transition: box-shadow 150ms ease-out; }
.flow-card.is-dragging { cursor: grabbing; z-index: 5; box-shadow: var(--elevation-raised-hover), 0 12px 24px -10px rgb(0 0 0 / 0.18); }
.flow-card.is-settling { transition: transform 260ms cubic-bezier(0.32, 0.72, 0, 1), box-shadow 150ms ease-out; }
.flow-card.is-moving { transition: transform 420ms cubic-bezier(0.77, 0, 0.175, 1), box-shadow 150ms ease-out; }
.flow-card.is-lit { box-shadow: 0 0 0 1.5px #e0a94a, var(--elevation-raised); }
.flow-card:focus-visible { outline: 2px solid var(--gray-1200); outline-offset: 3px; }
.flow-edges path { opacity: 0.85; }
.flow .flow-anchor { --ann-label-max-width: 170px; --ann-room: 220px !important; }
.flow .flow-anchor.is-moving { transition: transform 420ms cubic-bezier(0.77, 0, 0.175, 1); }
@media (prefers-reduced-motion: reduce) {
  .flow-card, .flow-card.is-settling, .flow-card.is-moving, .flow .flow-anchor.is-moving, .flow-btn { transition: none; }
}

/* states a flow can give a node ("state": "kept" | "dropped") or an arrow
   ("tone": "kept"), and words on an arrow ("label") */
.flow-card.is-kept { box-shadow: 0 0 0 1.5px #3f9d5a, var(--elevation-raised); }
.flow-card.is-dropped::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(to top right, transparent calc(50% - 1px), #d9423a calc(50% - 1px), #d9423a calc(50% + 1px), transparent calc(50% + 1px)),
              linear-gradient(to bottom right, transparent calc(50% - 1px), #d9423a calc(50% - 1px), #d9423a calc(50% + 1px), transparent calc(50% + 1px)); }
.flow-card.is-dropped .flow-card-title { color: var(--gray-1000); }
.flow-edges path.is-kept { stroke: #3f9d5a; opacity: 1; }
.flow-edges text.flow-edge-label { font-family: 'Shantell Sans', cursive; font-size: 13px; fill: var(--gray-1100); paint-order: stroke; stroke: var(--gray-200); stroke-width: 6px; stroke-linejoin: round; }
/* the note under the table. Below 1280 the margin notes are hidden, so every
   flow shows the lit card's note here; "noteUnder": true shows it at every
   width. It keeps room for its lines, so tapping never moves the page. */
.flow-note { margin: 0; flex: 1; font-size: 13px; line-height: 1.5; color: var(--gray-1100); min-height: 3em; }
.flow:not(.is-note-under) .flow-note { display: none; }
@media (max-width: 1279px) { .flow:not(.is-note-under) .flow-note, .flow .flow-note { display: block; min-height: 6em; } }
.flow:not(.has-notes) .flow-note { display: none !important; }