/* ============================================================
   MEDSY — DIAGRAMS
   Node/connector and relationship diagrams for slides, docs and
   product: flowcharts (incl. workflow, data-flow, decision tree),
   swimlanes, mind/concept/spider maps, bubble & brace maps, 2×2
   matrices, heat maps and horizontal timelines. All token-driven.
   ============================================================ */

/* ---------- shared node + connector vocabulary ---------- */
.dgm{font-family:var(--f-body);color:var(--ink)}
.dgm-node{
  display:flex;align-items:center;justify-content:center;gap:.5em;text-align:center;
  background:var(--surface-card);border:1.5px solid var(--line);color:var(--text-strong);
  padding:14px 20px;border-radius:var(--r-sm);font-weight:var(--fw-semibold);
  font-size:clamp(.9rem,1.1vw,1.02rem);line-height:1.35;box-shadow:var(--shadow-xs);
  max-width:300px;transition: transform var(--dur-overlay) var(--ease-spring),box-shadow var(--dur-overlay) var(--ease-standard),border-color var(--dur-overlay);
}
.dgm-node .v-icon{width:1.1em;height:1.1em;flex:none;color:var(--forest)}
.dgm-node.is-start,.dgm-node.is-end{border-radius:var(--r-pill);background:var(--grad-primary);color:#fff;border-color:transparent;box-shadow:0 6px 16px -8px rgba(6,58,40,.45)}
.dgm-node.is-start .v-icon,.dgm-node.is-end .v-icon{color:#fff}
.dgm-node.is-accent{background:var(--mint);color:var(--forest-900);border-color:transparent}
.dgm-node.is-io{background:var(--sky);border-color:rgba(31,93,138,.22);color:var(--info-ink);transform:skewX(-11deg)}
.dgm-node.is-io > *{transform:skewX(11deg)}
.dgm-node.is-muted{background:var(--mist);color:var(--ink-soft);box-shadow:none}
.dgm-node.is-interactive{cursor:pointer}
.dgm-node.is-interactive:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--line-mint)}

/* decision diamond — elongated true diamond (clip-path), straight text.
   Two stacked clip layers give a crisp hairline edge; drop-shadow follows
   the shape. Keep labels to a short question. */
.dgm-diamond{position:relative;flex:none;width:min(216px,100%);min-height:100px;display:grid;place-items:center;
  padding:20px 40px;background:none;border:none;transform:none;border-radius:0;
  filter:drop-shadow(0 3px 5px rgba(138,109,26,.16))}
.dgm-diamond::before{content:"";position:absolute;inset:0;background:rgba(138,109,26,.32);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.dgm-diamond::after{content:"";position:absolute;inset:1.5px;background:var(--butter);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.dgm-diamond > span{position:relative;z-index:1;transform:none;max-width:128px;text-align:center;
  font-weight:var(--fw-semibold);font-size:.9rem;color:var(--warn-ink);line-height:1.25}

/* connectors */
.dgm-link{display:flex;flex-direction:column;align-items:center;justify-content:center;align-self:center;color:var(--forest-300)}
.dgm-link .stem{width:2px;background:currentColor}
.dgm-link.v .stem{height:24px}
.dgm-link .chev{width:11px;height:11px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-top:-7px}
.dgm-link-label{font-family:var(--f-caps);font-size:var(--fs-micro);font-weight:700;letter-spacing:.04em;color:var(--forest);background:var(--mint-100);padding:2px 8px;border-radius:var(--r-pill);margin:3px 0}

/* ---------- FLOWCHART (vertical, with branching) ---------- */
.dgm-flow{display:flex;flex-direction:column;align-items:center}
/* T-split: a stub drops from the decision node onto a distribution bar that
   spans the branch centres (equal columns; --n = branch count from the JSX),
   and each branch's own stem hangs from that bar — fully connected paths. */
.dgm-link.stub .stem{height:16px}
.dgm-branches{position:relative;display:flex;gap:0;align-items:flex-start;justify-content:center;width:100%}
.dgm-branches::before{content:"";position:absolute;top:0;height:2px;border-radius:var(--r-pill);background:var(--forest-300);
  left:calc(50% / var(--n,2));right:calc(50% / var(--n,2))}
.dgm-branch{display:flex;flex-direction:column;align-items:center;flex:1 1 0;min-width:0;padding:0 clamp(8px,1.5vw,20px)}
/* compact entry link: bar → short stem → label → short stem → chevron → node */
.dgm-branch > .dgm-link.v:first-child .stem{height:13px}

/* ---------- SWIMLANE ---------- */
.dgm-swim{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--surface-card);box-shadow:var(--shadow-sm)}

/* cross-lane mode: one ordered process, steps hop between lane rows */
.dgm-swim-scroll{overflow-x:auto}
.dgm-swim-grid{position:relative;display:grid;min-width:min-content}
.dgm-swim-rowbg{grid-column:1/-1;border-top:1px solid var(--line-soft)}
.dgm-swim-rowbg.first{border-top:none}
.dgm-swim-grid .dgm-lane-label{grid-column:1;z-index:1;padding:14px 12px;font-size:.88rem}
.dgm-swim-links{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:1;color:var(--forest-300)}
.dgm-swim-links > path{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.dgm-swim-links marker path{fill:currentColor;stroke:none}
.dgm-swim-cell{display:grid;place-items:center;padding:15px 7px;min-width:0;z-index:2}
.dgm-swim-cell .dgm-node{position:relative;min-width:0;max-width:100%;padding:10px 12px;font-size:.88rem}
/* step order: a small numbered badge pinned to the node's corner — keeps the
   full node width for the label */
.dgm-swim-num{position:absolute;top:-8px;left:-8px;width:18px;height:18px;display:grid;place-items:center;
  font-family:var(--f-caps);font-size:var(--fs-micro);font-weight:700;line-height:1;letter-spacing:0;
  background:var(--forest);color:#fff;border-radius:50%;box-shadow:0 0 0 2px var(--surface-card);z-index:1}
.dgm-node.is-start .dgm-swim-num,.dgm-node.is-end .dgm-swim-num{background:#fff;color:var(--forest-700);box-shadow:0 0 0 2px rgba(255,255,255,.4)}
.dgm-node.is-accent .dgm-swim-num{background:var(--forest-900)}

/* legacy per-lane mode */
.dgm-lane{display:grid;grid-template-columns:150px 1fr;border-top:1px solid var(--line-soft)}
.dgm-lane:first-child{border-top:none}
.dgm-lane-label{display:flex;align-items:center;gap:10px;padding:18px 16px;background:var(--mint-50);border-right:1px solid var(--line-soft);font-weight:var(--fw-bold);font-size:.9rem;color:var(--text-strong)}
.dgm-lane-label .swatch{width:8px;align-self:stretch;border-radius:var(--r-pill);background:var(--forest);flex:none}
.dgm-lane-track{display:flex;align-items:center;gap:0;padding:18px;overflow-x:auto;flex-wrap:nowrap}
.dgm-lane-track .dgm-node{flex:none;min-width:128px}
.dgm-arrow{flex:none;display:flex;align-items:center;color:var(--forest-300);padding:0 4px}
.dgm-arrow::before{content:"";width:22px;height:2px;background:currentColor}
.dgm-arrow::after{content:"";width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);margin-left:-7px}
.dgm-arrow.gap{flex:1;min-width:20px}
.dgm-arrow.gap::before{flex:1}

/* ---------- MIND MAP / CONCEPT MAP (central + two-sided branches) ---------- */
.dgm-mind{position:relative;display:flex;align-items:center;justify-content:center;gap:0;flex-wrap:wrap}
.dgm-mind-links{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.dgm-mind-links path{fill:none;stroke-width:2.5;stroke-linecap:round;opacity:.75}
.dgm-mind-side,.dgm-mind-core{position:relative;z-index:1}
.dgm-mind-side{display:flex;flex-direction:column;gap:20px;flex:1 1 0;max-width:236px;min-width:0}
.dgm-mind-side.left{align-items:flex-end}
.dgm-mind-core{flex:none;margin:0 clamp(26px,5vw,62px);background:var(--grad-deep);color:#fff;border-radius:var(--r-lg);
  padding:24px 28px;font-family:var(--f-display);font-weight:var(--fw-bold);font-size:clamp(1.1rem,1.8vw,1.5rem);
  letter-spacing:-.02em;text-align:center;box-shadow:var(--shadow-md);max-width:240px}
.dgm-branch-card{position:relative;width:100%;border:1.5px solid var(--line);border-left-width:5px;border-radius:var(--r-sm);
  background:var(--surface-card);padding:13px 16px;box-shadow:var(--shadow-xs);max-width:240px;transition: transform var(--dur-overlay) var(--ease-spring),box-shadow var(--dur-overlay) var(--ease-standard)}
.dgm-branch-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.dgm-branch-title{font-weight:var(--fw-bold);color:var(--text-strong);font-size:.96rem;margin-bottom:4px}
.dgm-branch-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px}
.dgm-branch-list li{font-size:.86rem;color:var(--ink-soft);padding-left:14px;position:relative}
.dgm-branch-list li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:50%;background:var(--mint)}
.dgm-link-curve{flex:none;width:36px;align-self:center;color:var(--line-mint)}

/* ---------- BUBBLE / SPIDER MAP (radial) ---------- */
.dgm-bubble{position:relative;width:100%;max-width:480px;margin-inline:auto;aspect-ratio:1.15/1}
.dgm-bubble svg.links{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.dgm-bubble svg .lk{stroke:var(--mint-300);stroke-width:2}
.dgm-bubble svg .tip{fill:var(--mint)}
.dgm-bubble-core,.dgm-bubble-node{position:absolute;transform:translate(-50%,-50%);display:grid;place-items:center;text-align:center;border-radius:50%}
.dgm-bubble-core{background:var(--grad-primary);color:#fff;font-family:var(--f-display);font-weight:var(--fw-bold);
  width:30%;aspect-ratio:1;padding:10px;font-size:clamp(.9rem,1.5vw,1.15rem);letter-spacing:-.02em;box-shadow:var(--shadow-md);z-index:2}
.dgm-bubble-node{background:var(--surface-card);border:1.5px solid var(--line-mint);color:var(--text-strong);width:22%;aspect-ratio:1;
  padding:8px;font-size:clamp(.7rem,1.05vw,.88rem);font-weight:var(--fw-semibold);box-shadow:var(--shadow-sm);z-index:1;line-height:1.25;
  transition: transform var(--dur-control) var(--ease-spring),box-shadow var(--dur-control) var(--ease-standard),border-color var(--dur-control)}
.dgm-bubble-node:hover{transform:translate(-50%,-50%) scale(1.07);box-shadow:var(--shadow-md);border-color:var(--mint)}

/* ---------- BRACE MAP ---------- */
.dgm-brace{display:flex;align-items:stretch;gap:12px}
.dgm-brace-whole{display:flex;align-items:center;align-self:center;text-align:center;font-family:var(--f-display);font-weight:var(--fw-bold);
  font-size:clamp(1rem,1.5vw,1.25rem);color:var(--text-strong);background:var(--mint-100);border:1px solid var(--line-mint);
  border-radius:var(--r);padding:16px 18px;max-width:170px}
.dgm-brace-arm{flex:none;width:22px;color:var(--forest-300)}
.dgm-brace-arm svg{height:100%;width:100%}
.dgm-brace-parts{display:flex;flex-direction:column;gap:12px;justify-content:center;flex:1;min-width:0}
.dgm-brace-part{display:flex;align-items:stretch;gap:10px}
.dgm-brace-part-label{display:flex;align-items:center;background:var(--surface-card);border:1.5px solid var(--line);border-radius:var(--r-sm);
  padding:10px 14px;font-weight:var(--fw-semibold);color:var(--text-strong);font-size:.92rem;box-shadow:var(--shadow-xs);min-width:96px}
.dgm-brace-sub{flex:none;width:15px;color:var(--line-mint)}
.dgm-brace-sub svg{height:100%;width:100%}
.dgm-brace-subparts{display:flex;flex-direction:row;flex-wrap:wrap;gap:4px 12px;align-items:center;align-content:center;min-width:0}
.dgm-brace-subparts span{font-size:.85rem;color:var(--ink-soft);padding-left:12px;position:relative;white-space:nowrap}
.dgm-brace-subparts span::before{content:"";position:absolute;left:0;top:.55em;width:5px;height:5px;border-radius:50%;background:var(--mint)}

/* ---------- MATRIX (2×2 quadrants) ---------- */
.dgm-matrix{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr;gap:10px;width:100%}
.dgm-matrix-ylabel{grid-column:1;grid-row:2;writing-mode:vertical-rl;transform:rotate(180deg);text-align:center;
  font-family:var(--f-caps);font-size:var(--fs-micro);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);align-self:center}
.dgm-matrix-xlabel{grid-column:2;grid-row:3;text-align:center;font-family:var(--f-caps);font-size:var(--fs-micro);
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);padding-top:8px}
.dgm-matrix-grid{grid-column:2;grid-row:2;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:10px;min-height:210px}
.dgm-quad{border:1px solid var(--line);border-radius:var(--r);padding:15px 16px;background:var(--surface-card);display:flex;flex-direction:column;gap:10px;min-height:0;
  transition: transform var(--dur-control) var(--ease-spring),box-shadow var(--dur-control) var(--ease-standard),border-color var(--dur-control)}
.dgm-quad:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm);border-color:var(--line-mint)}
.dgm-quad.hi{background:var(--grad-soft);border-color:var(--mint);box-shadow:var(--shadow-sm)}
.dgm-quad-title{font-weight:var(--fw-bold);color:var(--text-strong);font-size:.92rem;letter-spacing:-.01em;display:flex;align-items:center;gap:8px}
.dgm-quad-title .v-icon{width:16px;height:16px;color:var(--forest)}
.dgm-quad-items{display:flex;flex-wrap:wrap;gap:6px;align-content:flex-start}
.dgm-quad-items span{font-size:.78rem;background:var(--mint-100);color:var(--forest-700);border:1px solid var(--line-mint);border-radius:var(--r-pill);padding:3px 10px;white-space:nowrap}

/* ---------- HEAT MAP ---------- */
.dgm-heat{display:grid;gap:5px;width:100%}
.dgm-heat-cell{aspect-ratio:1;border-radius:8px;min-width:0;display:grid;place-items:center;position:relative;
  font-family:var(--f-caps);font-size:.76rem;font-weight:700;color:var(--forest-900);
  transition: transform var(--dur-control) var(--ease-spring),box-shadow var(--dur-control) var(--ease-standard)}
.dgm-heat-cell:hover{transform:scale(1.12);box-shadow:var(--shadow-sm);z-index:1}
.dgm-heat-col-label,.dgm-heat-row-label{font-family:var(--f-caps);font-size:var(--fs-micro);font-weight:600;letter-spacing:.04em;color:var(--ink-soft);display:flex;align-items:center}
.dgm-heat-col-label{justify-content:center;padding-bottom:4px}
.dgm-heat-row-label{justify-content:flex-end;padding-right:10px;white-space:nowrap}
.dgm-heat-legend{display:flex;align-items:center;gap:8px;margin-top:14px;font-family:var(--f-caps);font-size:var(--fs-micro);color:var(--ink-faint)}
/* the legend shows the same five discrete bins the cells use */
.dgm-heat-legend .scale{height:12px;width:130px;border-radius:var(--r-pill);overflow:hidden;display:flex;border:1px solid var(--line)}
.dgm-heat-legend .scale::before{content:"";flex:1;background:linear-gradient(90deg,rgb(231,252,243) 0 20%,rgb(168,235,208) 20% 40%,rgb(95,200,158) 40% 60%,rgb(23,124,84) 60% 80%,rgb(11,82,56) 80% 100%)}

/* ---------- TIMELINE MAP (horizontal, alternating) ----------
   Grid rows (card / rail / card) instead of absolute positioning — the row
   sizes itself to the tallest card, so nothing clips and no stray scrollbars
   appear. Every node is 1fr·22px·1fr, so the rail lines up across nodes. */
.dgm-tmap{display:flex;gap:clamp(10px,2vw,18px);padding:6px 0;overflow-x:auto}
.dgm-tmap-node{flex:1 1 0;min-width:142px;display:grid;grid-template-rows:1fr 22px 1fr;row-gap:13px;justify-items:center}
.dgm-tmap-rail{grid-row:2;position:relative;width:100%;height:22px;display:flex;align-items:center;justify-content:center}
.dgm-tmap-rail::before{content:"";position:absolute;top:50%;transform:translateY(-50%);height:3px;border-radius:var(--r-pill);
  background:var(--mint-200);left:calc(-1.5 * clamp(10px,2vw,18px));right:calc(-1.5 * clamp(10px,2vw,18px))}
.dgm-tmap-node:first-child .dgm-tmap-rail::before{left:8%}
.dgm-tmap-node:last-child .dgm-tmap-rail::before{right:8%}
.dgm-tmap-dot{width:20px;height:20px;border-radius:50%;background:var(--forest);border:4px solid var(--surface-card);box-shadow:0 0 0 3px var(--mint-200);position:relative;z-index:1;transition: transform var(--dur-control) var(--ease-spring),box-shadow var(--dur-control) var(--ease-standard)}
.dgm-tmap-node:hover .dgm-tmap-dot{transform:scale(1.18);box-shadow:0 0 0 4px var(--mint)}
.dgm-tmap-card{position:relative;width:min(100%,210px);background:var(--surface-card);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--shadow-sm);padding:12px 14px;text-align:center;
  transition: transform var(--dur-overlay) var(--ease-spring),box-shadow var(--dur-overlay) var(--ease-standard),border-color var(--dur-overlay)}
.dgm-tmap-node:hover .dgm-tmap-card{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--line-mint)}
.dgm-tmap-card.top{grid-row:1;align-self:end}
.dgm-tmap-card.bottom{grid-row:3;align-self:start}
/* stem linking each card to its dot across the row gap */
.dgm-tmap-card.top::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);width:2px;height:13px;background:var(--line-mint)}
.dgm-tmap-card.bottom::after{content:"";position:absolute;bottom:100%;left:50%;transform:translateX(-50%);width:2px;height:13px;background:var(--line-mint)}
.dgm-tmap-time{font-family:var(--f-caps);font-size:var(--fs-micro);letter-spacing:.08em;text-transform:uppercase;color:var(--forest);margin-bottom:3px}
.dgm-tmap-title{font-weight:var(--fw-semibold);color:var(--text-strong);font-size:.9rem;line-height:1.3}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .dgm-node,.dgm-branch-card,.dgm-heat-cell,.dgm-tmap-card,.dgm-tmap-dot,.dgm-bubble-node,.dgm-quad{transition: none!important}
}


/* ============================================================
   PRESS STATES — nodes, cards and cells
   Hover is not feedback on a touch screen, and a control that only
   responds to hover feels dead under a finger. Every interactive
   surface here answers a press with the same vocabulary the buttons
   use: small controls sink (translateY(1px) scale(.97)), lifted
   cards press back through their lift, and data cells dip in place.
   Presses are instant by design — no transition — so the response
   lands on touch-down rather than easing in after it.
   ============================================================ */
.dgm-node.is-interactive:active,.dgm-diamond:active{transform:translateY(1px) scale(.98)}
.dgm-branch-card:active,.dgm-quad:active,.dgm-tmap-node:active .dgm-tmap-card{transform:translateY(-1px) scale(.99)}
.dgm-bubble-node:active{transform:scale(.95)}
.dgm-heat-cell:active{transform:scale(.88)}
.dgm-brace-part:active > .dgm-brace-part-label{transform:scale(.98)}