/* =============================================================================
   ConverSight Relay Diagram — relay-diagram.css
   Layout : single CSS Grid column (max-content) — all phases match the widest.
   Arrows : full-width tapered band, 90% of column, centred, 1em margin.
   Animation : sequential Phase → Arrow → Phase chain, agents cascade within.
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&display=swap');

/* ── Scope reset ─────────────────────────────────────────────────────────────── */
.cs-relay-diagram *,
.cs-relay-diagram *::before,
.cs-relay-diagram *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ── Outer shell ─────────────────────────────────────────────────────────────── */
.cs-relay-diagram {
    background: transparent;
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    width: 100%;
}

/* ── Optional header ─────────────────────────────────────────────────────────── */
.cs-relay-header {
    text-align: center;
    margin-bottom: 1.5em;
}
.cs-relay-title {
    font-size: 28px;
    font-weight: 700;
    color: #171b18;
    letter-spacing: -0.5px;
    line-height: 1.2;
    margin-bottom: 4px;
}
.cs-relay-subtitle {
    font-size: 13px;
    font-weight: 400;
    color: rgba(23, 27, 24, 0.5);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ============================================================================
   LAYOUT
   Single grid column sized to max-content so every phase card is exactly as
   wide as the widest phase (PLAN). Arrow is 90% of that column, centred.
   ============================================================================= */

.cs-relay-track {
    display: grid;
    grid-template-columns: max-content;
    justify-content: center;   /* centre the column inside the widget */
    width: 100%;
    overflow-x: auto;          /* graceful scroll on very small screens */
}

/* ── Phase card ──────────────────────────────────────────────────────────────── */
.cs-relay-phase {
    background: rgba(var(--phase-color-rgb), 0.05);
    border: 1px solid rgba(var(--phase-color-rgb), 0.28);
    border-radius: 1em;
    display: flex;
    flex-direction: column;
    align-items: center;        /* centre label + agent row */
    gap: 10px;
    padding: 1em;
    position: relative;
    width: 100%;                /* fill the grid column */
}

/* ── Full-width downward relay arrow ─────────────────────────────────────────── */
.cs-phase-sep-arrow {
    display: block;
    width: 90%;
    height: 26px;
    background: var(--sep-color);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    margin: 1em 0;
    justify-self: center;
}

/* ── Phase label ─────────────────────────────────────────────────────────────── */
.cs-phase-label {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 12px;
    line-height: 19px;
    letter-spacing: 1.44px;
    text-transform: uppercase;
    color: var(--phase-color);
    white-space: nowrap;
    text-align: center;
}

/* ── Agents row ──────────────────────────────────────────────────────────────── */
.cs-agents-row {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0;
    row-gap: 4px;
}

/* ── Agent card ──────────────────────────────────────────────────────────────── */
.cs-agent-card {
    background: #ffffff;
    border-top:    1px solid rgba(23, 27, 24, 0.10);
    border-bottom: 1px solid rgba(23, 27, 24, 0.10);
    border-left:   1px solid rgba(23, 27, 24, 0.10);
    border-right:  none;
    padding: 8px 12px;
    border-radius: 8px 0 0 8px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    transition: background 0.15s ease;
    cursor: default;
}
.cs-agent-card:hover {
    background: rgba(var(--phase-color-rgb), 0.06);
}
.cs-agent-card--last {
    border-right: 1px solid rgba(23, 27, 24, 0.10);
    border-radius: 8px;
}

.cs-agent-name {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.24px;
    color: #171b18;
    white-space: nowrap;
}

/* ── Agent-to-agent chevron ──────────────────────────────────────────────────── */
.cs-agent-sep {
    flex: 0 0 15px;
    align-self: stretch;
    position: relative;
}
.cs-agent-sep::before {
    content: '';
    position: absolute;
    left: 0;
    top: -1px;
    width: 15px;
    height: calc(100% + 2px);
    background: var(--phase-color);
    clip-path: polygon(0 0, 0 100%, 100% 50%);
}

/* ── Optional footer ─────────────────────────────────────────────────────────── */
.cs-relay-footer {
    margin-top: 20px;
    text-align: center;
}
.cs-relay-footer-rule {
    height: 1px;
    background: rgba(23, 27, 24, 0.08);
    margin-bottom: 12px;
}
.cs-relay-footer-text {
    font-size: 12px;
    color: rgba(23, 27, 24, 0.40);
    letter-spacing: 0.06em;
    margin-bottom: 10px;
}
.cs-relay-footer-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}
.cs-relay-footer-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

/* ============================================================================
   ANIMATIONS
   JS assigns:
     --anim-order  on every direct .cs-relay-track child (phases + arrows)
     --card-delay  on every .cs-agent-card and .cs-agent-sep
   Adding .cs-relay-animated to .cs-relay-diagram starts all sequences.
   ============================================================================= */

/* — Keyframes — */

@keyframes cs-phase-in {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes cs-sep-drop {
    from { opacity: 0; transform: translateY(-20px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes cs-card-in {
    from { opacity: 0; transform: translateX(-24px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* — Pre-animation hidden state — */
.cs-relay-diagram:not(.cs-relay-animated) .cs-relay-phase {
    opacity: 0;
    transform: translateY(40px);
}
.cs-relay-diagram:not(.cs-relay-animated) .cs-phase-sep-arrow {
    opacity: 0;
    transform: translateY(-20px);
}
.cs-relay-diagram:not(.cs-relay-animated) .cs-agent-card,
.cs-relay-diagram:not(.cs-relay-animated) .cs-agent-sep {
    opacity: 0;
    transform: translateX(-24px);
}

/* — Animated: all elements use a single --anim-delay stamped by JS — */
.cs-relay-animated .cs-relay-phase {
    animation: cs-phase-in 0.25s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: var(--anim-delay, 0s);
}
.cs-relay-animated .cs-phase-sep-arrow {
    animation: cs-sep-drop 0.25s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: var(--anim-delay, 0s);
}
.cs-relay-animated .cs-agent-card,
.cs-relay-animated .cs-agent-sep {
    animation: cs-card-in 0.25s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: var(--anim-delay, 0s);
}

/* — Reduced-motion override — */
@media (prefers-reduced-motion: reduce) {
    .cs-relay-diagram:not(.cs-relay-animated) .cs-relay-phase,
    .cs-relay-diagram:not(.cs-relay-animated) .cs-phase-sep-arrow,
    .cs-relay-diagram:not(.cs-relay-animated) .cs-agent-card,
    .cs-relay-diagram:not(.cs-relay-animated) .cs-agent-sep {
        opacity: 1;
        transform: none;
    }
    .cs-relay-animated .cs-relay-phase,
    .cs-relay-animated .cs-phase-sep-arrow,
    .cs-relay-animated .cs-agent-card,
    .cs-relay-animated .cs-agent-sep {
        animation: none;
    }
}

/* ============================================================================
   RESPONSIVE — layout stays centred single-column at all widths;
   only density reduces on small screens.
   ============================================================================= */

@media (max-width: 600px) {
    .cs-relay-phase  { padding: 0.85em; }
    .cs-phase-sep-arrow { height: 20px; margin: 0.75em 0; }
    .cs-agent-card   { padding: 6px 10px; }
    .cs-agent-name   { font-size: 13px; }
}

@media (max-width: 400px) {
    .cs-relay-phase  { padding: 0.75em; }
    .cs-phase-sep-arrow { height: 16px; margin: 0.6em 0; }
    .cs-agent-name   { font-size: 12px; white-space: normal; }
    .cs-agent-sep    { display: none; }
    .cs-agent-card,
    .cs-agent-card--last {
        border-radius: 8px !important;
        border-right: 1px solid rgba(23, 27, 24, 0.10) !important;
        flex: 1 1 auto;
    }
    .cs-agents-row { gap: 6px; }
}