/* The blueprint, ported from the phase 2 use case concept (uc-map): the play as a HubSpot workflow, drawn the way the
   playbook draws it. Cards for actions on a line, a diamond for the branch, Yes and No pills on the two paths, and
   numbered notes beside the steps they explain. The drawing is HTML, so every label wraps and translates. Logical
   properties throughout, so Arabic mirrors. */

/* Monospace names inside running text (template names, properties, events), as in each use case section */
.uc-code { padding: 1px 6px; border-radius: 6px; background: var(--crm-bg); color: var(--crm-ink); font: 600 0.8em/1.35 var(--mono); overflow-wrap: anywhere; }

.uc-map-head { display: grid; gap: 18px; max-width: 900px; }
.uc-map-head .link { justify-self: start; }
.uc-map-sheet {
  margin-top: clamp(36px, 4.5vw, 60px);
  padding: clamp(18px, 2.6vw, 36px);
  border-radius: var(--r-lg); border: 1px solid var(--line);
  background: var(--sheet-bg); color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.uc-map-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; padding-bottom: 18px; margin-bottom: 26px; border-bottom: 1px solid var(--line); }
.uc-map-legend li { display: inline-flex; align-items: center; gap: 8px; font: 700 13px/1.2 var(--text); color: var(--ink-soft); }
.uc-map-legend .uc-map-disc { width: 24px; height: 24px; }
.uc-map-legend .uc-map-disc .i { width: 13px; height: 13px; }
.uc-map-legend .uc-map-num { width: 22px; height: 22px; font-size: 11px; }
/* The discs: trigger Harbour Blue, WhatsApp green, delay Mist, branch coral (a diamond), goal ink */
.uc-map-disc { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--btn-bg); color: var(--btn-ink); }
.uc-map-disc .i { width: 18px; height: 18px; }
.uc-map-disc.is-wa { background: var(--green); color: var(--on-bright); }
.uc-map-disc.is-delay { background: var(--surface-2); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.uc-map-disc.is-branch { border-radius: 8px; rotate: 45deg; background: var(--coral); color: var(--on-bright); scale: 0.86; }
.uc-map-disc.is-branch .i { rotate: -45deg; }
.uc-map-disc.is-goal { background: var(--ink); color: var(--ground); }
.uc-map-num { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: var(--ground); font: 800 13px/1 var(--display); font-variant-numeric: tabular-nums; }
/* Rows: the step on the start side, its note on the end side. A line runs behind the cards through every row, so the
   steps read as one sequence at any width. */
.uc-map-flow { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: clamp(28px, 4vw, 64px); }
.uc-map-row { position: relative; grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: start; padding-bottom: 22px; }
@supports not (grid-template-columns: subgrid) {
  .uc-map-row { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: clamp(28px, 4vw, 64px); }
}
.uc-map-row::before { content: ""; position: absolute; z-index: 0; inset-inline-start: 34.5px; top: 0; bottom: 0; width: 2px; background: var(--line-strong); }
.uc-map-row:first-child::before { top: 34px; }
.uc-map-node {
  position: relative; z-index: 1; grid-column: 1;
  display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 2px 14px; align-items: start;
  padding: 14px 16px 15px; border-radius: 18px;
  border: 1.5px solid var(--line); background: var(--sheet-bg);
}
.uc-map-node > .uc-map-disc { grid-row: 1 / span 3; }
.uc-map-kind { font: 700 12.5px/1.3 var(--text); color: var(--ink-soft); }
.uc-map-node b { font: 800 16px/1.3 var(--text); }
.uc-map-node p { font-size: 14px; line-height: 1.45; color: var(--ink-soft); text-wrap: pretty; }
.uc-map-node .uc-map-num { position: absolute; top: -10px; inset-inline-end: -10px; }
.uc-map-node.is-goal { border-color: var(--ink); }
/* The stop when nobody answers: a dashed note inside the wait step */
.uc-map-stop { grid-column: 2; display: flex; align-items: flex-start; gap: 8px; margin-top: 8px; padding: 8px 10px; border-radius: 12px; border: 1.5px dashed var(--line-strong); font-size: 13px; line-height: 1.4; color: var(--ink-soft); }
.uc-map-stop .i { flex: none; width: 15px; height: 15px; margin-top: 1px; }
/* Notes: numbered cards on a sky tint, joined to their step by a dashed leader */
.uc-map-note {
  position: relative; grid-column: 2; display: grid; gap: 4px;
  padding: 14px 16px 15px; padding-inline-start: 52px; border-radius: 16px;
  background: var(--field-sky); color: var(--ink);
}
.uc-map-note > .uc-map-num { position: absolute; top: 13px; inset-inline-start: 14px; }
.uc-map-note b { font: 800 15px/1.3 var(--text); }
.uc-map-note p { font-size: 14px; line-height: 1.45; color: var(--ink-soft); text-wrap: pretty; }
.uc-map-note::before { content: ""; position: absolute; inset-inline-end: 100%; top: 26px; width: clamp(28px, 4vw, 64px); border-top: 2px dashed var(--line-strong); }
.uc-map-notes { grid-column: 2; display: grid; gap: 14px; align-content: start; }
.uc-map-notes .uc-map-note { grid-column: auto; }
/* The split after the branch: a bar across, two paths down, each led by its pill */
.uc-map-row.is-split { padding-bottom: 0; }
.uc-map-row.is-split::before { bottom: auto; height: 22px; }
.uc-map-paths { position: relative; grid-column: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; padding-top: 22px; }
.uc-map-paths::before { content: ""; position: absolute; top: 20px; inset-inline-start: 34.5px; inline-size: calc(50% + 7px); height: 2px; background: var(--line-strong); }
.uc-map-path { position: relative; display: grid; gap: 14px; align-content: start; padding-top: 34px; min-width: 0; }
.uc-map-path::before { content: ""; position: absolute; z-index: 0; inset-inline-start: 32.5px; top: 0; height: 34px; width: 2px; background: var(--line-strong); }
.uc-map-path > .uc-map-node + .uc-map-node::before { content: ""; position: absolute; inset-inline-start: 31px; bottom: 100%; height: 16px; width: 2px; background: var(--line-strong); }
.uc-map-path > .uc-map-pill { position: absolute; z-index: 1; top: 4px; inset-inline-start: 14px; }
.uc-map-path .uc-map-node { padding: 12px 14px 13px; grid-template-columns: 36px minmax(0, 1fr); }
.uc-map-path .uc-map-node b { font-size: 15px; }
.uc-map-pill { display: inline-flex; align-items: center; min-height: 26px; padding: 2px 10px; border-radius: 999px; font: 800 12px/1.2 var(--text); }
.uc-map-pill.is-yes { background: var(--green); color: var(--on-bright); }
.uc-map-pill.is-no { background: var(--sheet-bg); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.uc-map-plan { display: flex; align-items: flex-start; gap: 8px; margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.45; color: var(--ink-soft); }
.uc-map-plan .i { flex: none; width: 16px; height: 16px; margin-top: 2px; }
.uc-map-plan a { color: var(--accent-ink); font-weight: 700; text-decoration-thickness: 1.5px; text-underline-offset: 0.2em; }
@media (max-width: 879px) {
  .uc-map-flow { grid-template-columns: minmax(0, 1fr); }
  .uc-map-row { grid-template-columns: minmax(0, 1fr); row-gap: 10px; }
  .uc-map-note, .uc-map-notes { grid-column: 1; margin-inline-start: 52px; }
  .uc-map-note::before { display: none; }
  .uc-map-paths { grid-template-columns: minmax(0, 1fr); row-gap: 22px; }
  .uc-map-paths::before { display: none; }
  .uc-map-path { padding-top: 34px; }
  .uc-map-notes { margin-top: 22px; padding-bottom: 4px; }
  .uc-map-row.is-split::before { height: 100%; }
}
@media (max-width: 479px) {
  .uc-map-node { grid-template-columns: 36px minmax(0, 1fr); padding-inline: 12px; gap: 2px 12px; }
  .uc-map-row::before { inset-inline-start: 30.5px; }
  .uc-map-note, .uc-map-notes { margin-inline-start: 24px; }
}