/* Journeys, templates, outbound, links, contacts (Module 2). */

.jr-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.jr-layout > .side { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 14px; }
@media (max-width: 1100px) { .jr-layout { grid-template-columns: 1fr; } .jr-layout > .side { position: static; } }
.sim-layout { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 900px) { .sim-layout { grid-template-columns: 1fr; } }
.version-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 4px 0 18px; }
.version-bar select { width: auto; min-width: 220px; }

/* the diagram's diamonds and unused shapes (rects are styled in marketing.css) */
.jd-node polygon { stroke: var(--ink); stroke-width: 2.5; fill: #fff4d6; }
.jd-node.sel polygon { stroke: var(--pink); stroke-width: 4; }
.t-unmapped rect, .t-unmapped polygon { fill: var(--paper); stroke-dasharray: 5 4; }
.t-message polygon { fill: #fff; } .t-question polygon { fill: #dcf8fb; } .t-condition polygon { fill: #fff4d6; }
.jd-node:focus { outline: none; }
.jd-node:focus-visible rect, .jd-node:focus-visible polygon { stroke: var(--blue); stroke-width: 4; }

.bub.failed { border-style: dashed; opacity: .75; }
.bub.failed::after { content: ' (not sent)'; font-size: 11px; color: var(--red); font-weight: 700; }
.phone.read-only .wa-body { height: 520px; }

.node-card .opts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.node-card .opts span { font-size: 12px; font-weight: 700; border: 2px solid var(--ink); border-radius: 999px; padding: 1px 9px; background: var(--lime); }
.node-card .to { font-size: 12px; color: var(--muted); margin-top: 6px; }
.node-card.sel { box-shadow: 4px 4px 0 var(--pink); }
.node-card .st { margin-left: auto; font-size: 12px; font-weight: 700; }
.notes li { font-size: 13px; color: var(--muted-2); }

.spec-editor { width: 100%; min-height: 460px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; line-height: 1.45; }
.tbl td.num, .tbl th.num { text-align: right; }
.tbl .muted-row td { color: var(--muted); }
.wa-preview { background: var(--cream); border: 3px solid var(--ink); border-radius: 18px; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.wa-preview .bub { max-width: 100%; }
.dkim td { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; overflow-wrap: anywhere; }
.check-list { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.thread { display: flex; flex-direction: column; gap: 8px; max-height: 420px; overflow-y: auto; background: var(--cream); border: 3px solid var(--ink); border-radius: 16px; padding: 12px; }
.thread .meta { font-size: 10.5px; color: var(--muted); margin-top: 2px; }
.funnel-num { font-variant-numeric: tabular-nums; text-align: right; }
.rate { font-size: 11px; color: var(--muted); margin-left: 5px; }
.mb { margin-bottom: 16px; }
.tbl tr.sel td { background: #fff4d6; }
.banner .spin { display: inline-block; vertical-align: -3px; margin-right: 6px; }
.note .row input.sm { flex: 1; width: auto; min-width: 140px; }
.kw-row > input, .kw-row > select { flex: 1; width: auto; min-width: 150px; }