/* ============================================================
   Automation — "The Ensemble" (Choreograph module)
   Steward: S9 Engineering   Page: n8n-automation-services.html
   Sprint 11 (Phase 2, v3.1, M1c) signature experience. Additive,
   scoped IIFE + this sheet, deletable unit. Does not touch
   main.js, theme.js, or any other namespace. Authored fresh: only
   the idea of the retired solutions .ops- scene ("autonomous
   execution, no one clicking") carries forward — its lead content
   and its checklist form do not.

   The defining rule: SIMULTANEITY, NOT SEQUENCE. On one intention,
   participating doers act AT ONCE (a chord, not a scale) — there
   are no links between them, no source, no travelling signal, no
   ordered 1..n stagger (that would be Connect's propagation). The
   small per-doer delay is an organic, unordered offset, so the
   attack reads like an orchestra, not a metronome. Reduced motion
   renders a completed intention's end-state, static.
   ============================================================ */

/* --- Hero soft cue --- */
.chr-soft-cue {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 32px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.2s ease, gap 0.2s ease;
}
.chr-soft-cue:hover,
.chr-soft-cue:focus-visible { color: var(--text-primary); gap: 9px; }
.chr-soft-cue i { width: 16px; height: 16px; }

/* --- sr-only for the aria-live concerted-result narration --- */
.chr-sr {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* --- Stage layout --- */
.chr-stage {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    align-items: center;
    max-width: 980px;
    margin: 40px auto 0;
}
@media (min-width: 860px) {
    .chr-stage { grid-template-columns: 1.4fr 1fr; gap: 36px; }
}

/* --- The ensemble (one shared intention above; the players below; NO links) --- */
.chr-ensemble-wrap {
    border: 1px solid var(--border-hairline, var(--border));
    border-radius: var(--radius-lg);
    background: var(--bg-elevated);
    padding: 20px 18px 16px;
}

/* the one shared intention, above the ensemble (no conductor — it comes from above) */
.chr-now {
    text-align: center;
    margin: 0 0 16px;
    min-height: 1.6em;
}
.chr-now-label {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.74rem;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    transition: color 0.2s ease;
}
.chr-now.is-set .chr-now-label { color: var(--accent-text, var(--accent)); }

/* the players: a balanced grid, deliberately un-linked (not a list, not a web) */
.chr-ensemble {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
@media (max-width: 460px) {
    .chr-ensemble { grid-template-columns: repeat(2, 1fr); }
}

.chr-doer {
    border: 1px solid var(--border-hairline, var(--border));
    border-radius: var(--radius-md);
    background: var(--surface-glass);
    padding: 12px 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-height: 64px;
    justify-content: center;
    transition: border-color 0.25s ease, background-color 0.25s ease, opacity 0.25s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.chr-doer-name { font-weight: 600; font-size: 0.9rem; color: var(--text-primary); }
.chr-doer-act {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.68rem;
    line-height: 1.35;
    color: var(--success-text);
    opacity: 0;
    transition: opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

/* a player not in this piece: at rest, quietly dimmed */
.chr-doer.is-resting { opacity: 0.4; }

/* the attack: every participating player works AT ONCE (organic, unordered
   offset via --chr-delay — never a 1..n sequence) */
.chr-doer.is-acting {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, var(--surface-glass));
    animation: chr-work 0.5s cubic-bezier(0.22, 1, 0.36, 1) var(--chr-delay, 0ms) both;
}
@keyframes chr-work {
    0% { transform: translateY(0); }
    45% { transform: translateY(-3px); }
    100% { transform: translateY(0); }
}

/* the work done */
.chr-doer.is-done {
    border-color: var(--success);
    background: color-mix(in srgb, var(--success) 8%, var(--surface-glass));
}
.chr-doer.is-done .chr-doer-act { opacity: 1; }

/* the truth-line (visible, concise) */
.chr-truth {
    text-align: center;
    margin: 16px 2px 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.76rem;
    color: var(--text-muted);
    min-height: 1.4em;
    transition: color 0.2s ease;
}
.chr-truth.is-set { color: var(--success-text); }

/* --- Controls --- */
.chr-controls-head {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 14px;
}
.chr-intents { display: flex; flex-direction: column; gap: 10px; }

.chr-intent {
    width: 100%;
    padding: 15px 18px;
    border: 1px solid var(--border-hairline, var(--border));
    border-radius: var(--radius-md);
    background: var(--surface-glass);
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
    transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.chr-intent:hover { border-color: var(--accent); transform: translateX(2px); }
.chr-intent:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.chr-intent.is-active { border-color: var(--accent); background: var(--surface-hover); }
.chr-intent-title { font-weight: 600; font-size: 1rem; color: var(--text-primary); }

.chr-belief {
    margin: 18px 0 0;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--text-secondary);
    font-style: italic;
}

/* --- Supporting notes --- */
.chr-notes { max-width: 720px; margin: 44px auto 0; display: flex; flex-direction: column; gap: 14px; }
.chr-note { display: flex; align-items: flex-start; gap: 12px; margin: 0; font-size: 0.95rem; line-height: 1.6; color: var(--text-secondary); }
.chr-note i { width: 18px; height: 18px; color: var(--accent-text, var(--accent)); flex-shrink: 0; margin-top: 2px; }
.chr-note a { color: var(--text-primary); text-decoration: underline; text-underline-offset: 2px; }

/* --- CTA --- */
.chr-cta { max-width: 640px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.chr-cta-actions { margin-top: 18px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; justify-content: center; }

/* --- Mobile sticky-CTA guard (Sprints 3-6 pattern) --- */
.chr-hide-sticky .mobile-sticky-cta { opacity: 0; pointer-events: none; transition: opacity 0.25s ease; }

@media (max-width: 600px) {
    .chr-ensemble-wrap { padding: 16px 12px 12px; }
    .chr-intent { padding: 13px 15px; }
}

@media (prefers-reduced-motion: reduce) {
    .chr-doer, .chr-doer-act, .chr-intent, .chr-soft-cue, .chr-truth, .chr-now-label { transition: none; }
    .chr-doer.is-acting { animation: none; }
}