/* Tech, Automations & AI · follow a lead (lead.js): the hops' labels along the route, and the CRM board laid on the
   tablet's screen (one matrix3d a frame; illustrative, labelled). Builds on ../_template/discipline.css. */
.cap-boardwrap { display: contents; }
.cap-board { position: fixed; left: 0; top: 0; transform-origin: 0 0; box-sizing: border-box; display: grid; grid-template-rows: auto 1fr; gap: 10px; padding: 18px 18px 16px; background: #0f0d14; border-radius: 6px; opacity: 0; visibility: hidden; will-change: transform; }
.cap-board .cap-chip { font-size: 11px; }
.cap-board__cols { position: relative; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.cap-board__col { display: grid; grid-template-rows: auto 1fr; gap: 8px; min-height: 0; padding: 10px 8px; border-radius: 6px; background: rgba(236, 233, 241, 0.05); border: 1px solid rgba(236, 233, 241, 0.08); }
.cap-board__h { font: 600 15px/1.1 var(--v3-title); font-stretch: 90%; color: var(--signal, #ece9f1); }
.cap-board__slot { display: block; }
/* the card: the lead, moving New -> Contacted -> Booked (--col, lead.js) */
.cap-board__card { position: absolute; left: 18px; bottom: 28px; width: calc((100% - 36px - 32px) / 5 - 16px); height: 52px; margin-left: 8px; border-radius: 5px; background: linear-gradient(180deg, rgba(201, 182, 234, 0.9), rgba(139, 69, 208, 0.75)); box-shadow: 0 0 18px rgba(201, 182, 234, 0.5); opacity: 0; transform: translateX(calc(var(--col, 0) * (100% + 24px))); transition: transform 520ms var(--ease-in-out, cubic-bezier(0.77, 0, 0.175, 1)), opacity 280ms var(--v3-ease); }
.cap-board__card.is-on { opacity: 1; }
.xp[data-story^="sig-h"] .xp__mono { max-width: 22ch; }
/* a phone: the hops as a list low in the frame, a line a hop, each staying to the act's end (lead.js: the narrow frame
   has no room for seven labels at their places) */
html[data-layout="port"] .xp[data-port^="hop"] { left: var(--g-m); right: auto; top: auto; width: auto; max-width: calc(100vw - 2 * var(--g-m)); padding: 6px 12px; }
html[data-layout="port"] .xp[data-port^="hop"] .xp__mono { max-width: none; white-space: nowrap; }
html[data-layout="port"] .xp[data-port="hop0"] { bottom: calc(var(--z-cap-bottom) + 6 * 36px); }
html[data-layout="port"] .xp[data-port="hop1"] { bottom: calc(var(--z-cap-bottom) + 5 * 36px); }
html[data-layout="port"] .xp[data-port="hop2"] { bottom: calc(var(--z-cap-bottom) + 4 * 36px); }
html[data-layout="port"] .xp[data-port="hop3"] { bottom: calc(var(--z-cap-bottom) + 3 * 36px); }
html[data-layout="port"] .xp[data-port="hop4"] { bottom: calc(var(--z-cap-bottom) + 2 * 36px); }
html[data-layout="port"] .xp[data-port="hop5"] { bottom: calc(var(--z-cap-bottom) + 1 * 36px); }
html[data-layout="port"] .xp[data-port="hop6"] { bottom: calc(var(--z-cap-bottom) + 0 * 36px); }
/* no WebGL: the board stands in the section's flow */
:is(.v3-nogl, .v3-reduced) .cap-board { transform: none !important; position: relative; width: min(100%, 560px); height: 360px; opacity: 1; visibility: visible; }