/* ============================================================
   TRIGGERS — your tools drive Askpilot.

   Five tools down the left, each a tile that opens to show the event it
   just sent. Beams carry each event into the trigger in the middle, which
   shows the event, the filter it was checked against and the verdict:
   start a new session, continue the one that was waiting, or no match.
   A second beam carries the verdict into the open sessions on the right,
   where a new card folds open at the top or a waiting card wakes up.
   js/trg-flow.js sets data-beat / data-phase on the stage and toggles
   classes on tiles, beams and cards; everything visible is drawn here.
   ============================================================ */

.trg {
    padding: 96px 0 88px;
    background: var(--cream);
    border-top: 1px solid var(--line);
}
.trg .sec-eyebrow { color: var(--brand-magenta); }
.trg .sec-title { margin-bottom: 0; }
/* an outline around the stage, and the narration seated on its top edge,
   breaking the line the way a label breaks a section drawing: the same
   device the hero frame and the layer box use. No fill: the parts inside
   are the only cards. */
.trg-stage {
    position: relative; margin-top: 56px;
    padding: 46px 24px 24px;
    border: 1px solid #DCD3D9; border-radius: 26px;
}

/* --- the caption: the event, then what Askpilot did about it ------------
   Two halves on one line. The first half lands with the tool that sent the
   event and carries that tool's mark; the second, after an arrow and the
   Askpilot mark, lands with the verdict. So the line is never ahead of or
   behind the action beneath it: it is the action, read out. */
.trg-cap { position: absolute; top: 0; left: 0; right: 0; height: 0; margin: 0; text-align: center; }
.trg-cap p {
    position: absolute; left: 50%; top: 0; margin: 0;
    transform: translate(-50%, calc(-50% - 4px));
    display: inline-flex; align-items: center; justify-content: center; gap: 12px;
    /* explicit, or an element anchored at 50% can be no wider than the half
       of its container to the right of that point */
    width: max-content; max-width: none;
    box-sizing: border-box; height: 30px; padding: 0 16px;
    white-space: nowrap;
    /* the page's own ground, so the label cuts the outline rather than sitting on it */
    background: var(--cream);
    font-size: 0.75rem; font-weight: 800; letter-spacing: 0.11em; text-transform: uppercase;
    color: var(--ink);
    opacity: 0;
    transition: opacity 0.18s ease, transform 0.18s ease;
}
.trg-cap-in, .trg-cap-out { display: inline-flex; align-items: center; gap: 9px; }
.trg-cap-out { margin-left: -12px; padding-left: 12px; }
.trg-cap img { width: 17px; height: 17px; object-fit: contain; }
/* the outcome half takes no room until it lands, so the label grows to fit it */
/* collapsed at once when a new event lands, opened with a transition when the
   verdict does: every hidden label shares the stage's data-out, so a collapse
   that animated would show the next label shrinking as it arrived */
.trg-cap-out { color: var(--ink); max-width: 0; overflow: hidden; opacity: 0; transform: translateX(-6px); transition: none; }
.trg-cap p:not(:has(.trg-cap-out)) { gap: 0; }
.trg-cap-arr { display: inline-flex; color: var(--muted); }
.trg-cap-arr svg { width: 13px; height: 13px; }
.trg-cap-out b { font-weight: 800; color: var(--brand-magenta); }
.trg-stage[data-cap="1"] p[data-cap="1"], .trg-stage[data-cap="2"] p[data-cap="2"],
.trg-stage[data-cap="3"] p[data-cap="3"], .trg-stage[data-cap="4"] p[data-cap="4"],
.trg-stage[data-cap="5"] p[data-cap="5"], .trg-stage[data-cap="6"] p[data-cap="6"] {
    opacity: 1; transform: translate(-50%, -50%);
    transition: opacity 0.35s ease 0.12s, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.12s;
}
.trg-stage[data-out="1"] .trg-cap-out { max-width: 600px; opacity: 1; transform: none; transition: max-width 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease 0.1s, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.1s; }
/* the label warms with the verdict: green when something starts or continues, grey when nothing does */
.trg-stage[data-out="1"][data-cap="4"] .trg-cap-out b { color: var(--muted); }

/* --- the row ------------------------------------------------------------ */
.trg-grid {
    display: grid;
    grid-template-columns: 250px 64px 250px 64px minmax(0, 1fr);
    align-items: start;
}

/* --- the tools: tiles that open to show the event they sent ------------- */
.trg-tools { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.trg-tool {
    position: relative; box-sizing: border-box; height: 74px;
    display: flex; align-items: center; gap: 11px;
    padding: 0 14px 0 12px;
    border: 1px solid #E6E1E8; border-radius: 14px; background: #fff;
    box-shadow: 0 1px 2px rgba(22, 18, 26, 0.04), 0 12px 28px -24px rgba(22, 18, 26, 0.28);
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.trg-av {
    flex: none; width: 34px; height: 34px; border-radius: 10px;
    display: grid; place-items: center;
    background: #F7F5F9; border: 1px solid #ECE7EE;
    transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}
.trg-av img { width: 19px; height: 19px; object-fit: contain; }
.trg-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.trg-tool b { font-size: 0.8125rem; font-weight: 700; color: var(--ink); line-height: 1.25; }
/* the event, in the tool's own words: name as a code chip, then the detail */
.trg-ev {
    display: none; margin-top: 4px; min-width: 0;
    font-size: 0.6875rem; line-height: 1.3; color: var(--body);
}
.trg-ev code {
    display: inline-block; margin-bottom: 2px; padding: 1px 6px; border-radius: 5px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.625rem;
    background: #F6F2F8; border: 1px solid #EADFEC; color: #5B3F73;
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.trg-tool.is-on .trg-ev code { background: var(--pink-wash); border-color: #F0C8F0; color: var(--pink-deep); }
.trg-ev i { display: block; font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trg-tool.is-on .trg-ev.is-now, .trg-tool.is-done .trg-ev.is-last { display: block; animation: trg-pop 0.35s cubic-bezier(0.16, 1, 0.3, 1) both; }
.trg-tool.is-on {
    border-color: var(--brand-magenta);
    box-shadow: 0 0 0 3px rgba(213, 59, 213, 0.12), 0 12px 26px -16px rgba(22, 18, 26, 0.3);
    transform: translateX(4px);
}
.trg-tool.is-on .trg-av { background: #fff; border-color: #F0D9F0; transform: scale(1.06); }
@keyframes trg-pop { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }

/* --- the beams ----------------------------------------------------------- */
.trg-beams { display: block; width: 64px; height: 410px; overflow: visible; }
.trg-beam { fill: none; stroke: #DCD3D9; stroke-width: 1.5; stroke-dasharray: 3 4; transition: stroke 0.3s ease; }
.trg-beam.is-on { stroke: #C9B5CF; }
.trg-beam-run {
    fill: none; stroke: var(--brand-magenta); stroke-width: 2.5; stroke-linecap: round;
    stroke-dasharray: 14 100; stroke-dashoffset: 14;
    opacity: 0;
}
.trg-beam-run.is-on { animation: trg-run 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
@keyframes trg-run {
    0% { opacity: 0; stroke-dashoffset: 14; }
    12% { opacity: 1; }
    88% { opacity: 1; }
    100% { opacity: 0; stroke-dashoffset: -100; }
}

/* --- the trigger: event, filter, verdict --------------------------------- */
.trg-h {
    display: flex; align-items: center; gap: 8px; margin: 0 0 12px;
    font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink);
}
.trg-h img { width: 16px; height: 16px; }
.trg-h span { margin-left: auto; padding: 2px 8px; border-radius: 999px; background: #F3F1F6; font-size: 0.5625rem; letter-spacing: 0.08em; color: var(--muted); }
/* a compact node, centred on the line the beams converge on, rather than a
   column-high card with the rule marooned in the middle of it */
.trg-hub {
    box-sizing: border-box; align-self: center; padding: 18px;
    display: flex; flex-direction: column;
    border: 1px solid #E6E1E8; border-radius: 18px; background: #fff;
    box-shadow: 0 1px 2px rgba(22, 18, 26, 0.04), 0 18px 40px -28px rgba(22, 18, 26, 0.3);
}
.trg-rules { position: relative; height: 236px; }
.trg-r {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; justify-content: flex-start; gap: 8px;
    opacity: 0; transform: translateY(6px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.trg-stage[data-beat="1"] .trg-r[data-b="1"], .trg-stage[data-beat="2"] .trg-r[data-b="2"],
.trg-stage[data-beat="3"] .trg-r[data-b="3"], .trg-stage[data-beat="4"] .trg-r[data-b="4"],
.trg-stage[data-beat="5"] .trg-r[data-b="5"], .trg-stage[data-beat="6"] .trg-r[data-b="6"] {
    opacity: 1; transform: none;
    transition: opacity 0.35s ease 0.1s, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
}
.trg-r-row {
    display: flex; flex-direction: column; gap: 3px;
    padding: 9px 12px; border-radius: 10px;
    background: #FAF8FB; border: 1px solid #EFEBF2;
    transition: background 0.3s ease, border-color 0.3s ease;
}
.trg-r-row em { display: flex; align-items: center; gap: 5px; font-style: normal; font-size: 0.5625rem; font-weight: 800; letter-spacing: 0.11em; text-transform: uppercase; color: var(--muted); }
.trg-r-row em svg { width: 12px; height: 12px; }
.trg-r-row code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.6875rem; color: var(--ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.trg-r-row b { font-size: 0.75rem; font-weight: 700; color: var(--ink); line-height: 1.3; }
/* the filter row turns green on a match and red when it does not */
.trg-stage[data-phase="verdict"] .trg-r[data-v="start"] .trg-r-row:nth-child(2):not(:last-of-type),
.trg-stage[data-phase="act"] .trg-r[data-v="start"] .trg-r-row:nth-child(2):not(:last-of-type),
.trg-stage[data-phase="verdict"] .trg-r[data-v="resume"] .trg-r-row:nth-child(2),
.trg-stage[data-phase="act"] .trg-r[data-v="resume"] .trg-r-row:nth-child(2) { background: #ECFDF3; border-color: #BBF7D0; }
.trg-stage[data-phase="verdict"] .trg-r[data-v="none"] .trg-r-row:nth-child(2),
.trg-stage[data-phase="act"] .trg-r[data-v="none"] .trg-r-row:nth-child(2) { background: #FEF2F2; border-color: #FECACA; }
.trg-stage[data-phase="verdict"] .trg-r[data-v="none"] .trg-r-row:nth-child(2) code,
.trg-stage[data-phase="act"] .trg-r[data-v="none"] .trg-r-row:nth-child(2) code { text-decoration: line-through; color: #991B1B; }
.trg-verdict {
    display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
    margin-top: 4px; padding: 5px 10px; border-radius: 999px;
    font-size: 0.6875rem; font-weight: 700;
    opacity: 0; transform: translateY(4px);
    transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.trg-verdict::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.trg-r[data-v="start"] .trg-verdict { background: var(--ok-bg); color: var(--ok-fg); }
.trg-r[data-v="resume"] .trg-verdict { background: var(--pink-wash); color: var(--pink-deep); }
.trg-r[data-v="none"] .trg-verdict { background: #F4F1F5; color: var(--muted); }
.trg-stage[data-phase="verdict"] .trg-verdict, .trg-stage[data-phase="act"] .trg-verdict { opacity: 1; transform: none; }

/* --- the sessions: what the trigger does in Askpilot ---------------------- */
.trg-sess {
    box-sizing: border-box; min-height: 410px; padding: 16px 16px 14px;
    border: 1px solid #E6E1E8; border-radius: 18px; background: #fff;
    box-shadow: 0 1px 2px rgba(22, 18, 26, 0.04), 0 18px 40px -28px rgba(22, 18, 26, 0.3);
}
.trg-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.trg-s {
    display: flex; align-items: center; gap: 11px;
    box-sizing: border-box; height: 58px; padding: 0 12px 0 10px;
    border: 1px solid #EDE8EF; border-radius: 12px; background: #FDFCFE;
    font-size: 0.8125rem;
    transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease, height 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease 0.15s;
}
.trg-s-av { flex: none; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: #F7F5F9; border: 1px solid #ECE7EE; }
.trg-s-av img { width: 17px; height: 17px; object-fit: contain; }
.trg-s-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.trg-s-txt b { font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trg-s-txt span { font-size: 0.75rem; color: var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trg-s-st i {
    display: none; align-items: center; gap: 6px;
    padding: 3px 8px; border-radius: 999px;
    font-style: normal; font-size: 0.5625rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase;
    animation: trg-pop 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.trg-s-st i::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.trg-s-st i[data-s="started"] { color: var(--ok-fg); background: var(--ok-bg); }
.trg-s-st i[data-s="waiting"] { color: var(--muted); background: #F4F1F5; }
.trg-s-st i[data-s="resumed"] { color: var(--pink-deep); background: var(--pink-wash); }
.trg-s-st i[data-s="resumed"]::before { animation: trg-beat 1.6s ease-out infinite; }
.trg-s[data-state="started"] .trg-s-st i[data-s="started"],
.trg-s[data-state="waiting"] .trg-s-st i[data-s="waiting"],
.trg-s[data-state="resumed"] .trg-s-st i[data-s="resumed"] { display: inline-flex; }
/* the card being touched */
.trg-s.is-hot { border-color: var(--brand-magenta); background: #FFF7FF; box-shadow: 0 0 0 3px rgba(213, 59, 213, 0.12); }
/* a session that does not exist yet keeps its place, folded shut */
.trg-s--new { height: 0; opacity: 0; overflow: hidden; border-width: 0; padding-top: 0; padding-bottom: 0; margin-bottom: -8px; }
.trg-s--new.is-in { height: 58px; opacity: 1; border-width: 1px; margin-bottom: 0; }
@keyframes trg-beat { 0% { box-shadow: 0 0 0 0 rgba(213, 59, 213, 0.45); } 70%, 100% { box-shadow: 0 0 0 7px rgba(213, 59, 213, 0); } }

/* --- a motion for each stage ---------------------------------------------
   The tool's chip rings once as it sends. The trigger's mark turns while the
   rule is read and the card rings as the verdict lands. The session's chip
   pops as it starts or wakes. Each is a one-shot keyed to the class or phase
   that already marks the moment, so nothing keeps its own clock. */
.trg-tool.is-on .trg-av { animation: trg-emit 0.9s cubic-bezier(0.2, 1, 0.3, 1) both; }
@keyframes trg-emit {
    0%   { box-shadow: 0 0 0 0 rgba(213, 59, 213, 0.45); transform: scale(1); }
    35%  { transform: scale(1.14); }
    100% { box-shadow: 0 0 0 16px rgba(213, 59, 213, 0); transform: scale(1.06); }
}
.trg-tool.is-on .trg-av img { animation: trg-tilt 0.9s ease-in-out both; }
@keyframes trg-tilt { 0%, 100% { transform: none; } 30% { transform: rotate(-10deg); } 65% { transform: rotate(8deg); } }
.trg-hub .trg-h img { transition: transform 0.3s ease; }
.trg-stage[data-phase="rule"] .trg-hub .trg-h img { animation: trg-turn 0.9s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
@keyframes trg-turn { to { transform: rotate(360deg); } }
.trg-stage[data-phase="verdict"] .trg-hub { animation: trg-hubring 0.9s ease-out both; }
@keyframes trg-hubring {
    0%   { box-shadow: 0 0 0 0 rgba(213, 59, 213, 0.35), 0 1px 2px rgba(22, 18, 26, 0.04), 0 18px 40px -28px rgba(22, 18, 26, 0.3); }
    100% { box-shadow: 0 0 0 18px rgba(213, 59, 213, 0), 0 1px 2px rgba(22, 18, 26, 0.04), 0 18px 40px -28px rgba(22, 18, 26, 0.3); }
}
.trg-s.is-hot .trg-s-av { animation: trg-wake 0.6s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
@keyframes trg-wake { 0% { transform: scale(0.7); } 60% { transform: scale(1.14); } 100% { transform: none; } }
.trg-s.is-hot .trg-s-av img { animation: trg-tilt 0.7s ease-in-out both; }

/* --- narrower --------------------------------------------------------------- */
@media (max-width: 1100px) {
    .trg-grid { grid-template-columns: 214px 48px 220px 48px minmax(0, 1fr); }
    .trg-beams { width: 48px; }
}
@media (max-width: 900px) {
    .trg-grid { grid-template-columns: minmax(0, 1fr); row-gap: 14px; }
    .trg-beams { display: none; }
    .trg-tools { flex-direction: row; flex-wrap: wrap; gap: 8px; }
    .trg-tool { height: 40px; gap: 8px; padding: 0 10px 0 6px; }
    .trg-av { width: 28px; height: 28px; border-radius: 8px; }
    .trg-av img { width: 16px; height: 16px; }
    .trg-ev, .trg-tool.is-on .trg-ev.is-now, .trg-tool.is-done .trg-ev.is-last { display: none; }
    .trg-tool.is-on { transform: none; }
    .trg-hub { align-self: stretch; }
    .trg-rules { height: 200px; }
    .trg-sess { min-height: 0; }
    /* the caption may take two lines here, and the dot would sit at the top
       of the first, so the words carry the line on their own */
    .trg-stage { padding: 40px 12px 12px; border-radius: 20px; }
    .trg-cap p { position: absolute; left: 12px; right: 12px; top: 0; width: auto; transform: translateY(-50%); height: auto; min-height: 30px; padding: 6px 12px; flex-wrap: wrap; gap: 6px 10px; white-space: normal; font-size: 0.6875rem; letter-spacing: 0.08em; }
    .trg-stage[data-cap="1"] p[data-cap="1"], .trg-stage[data-cap="2"] p[data-cap="2"],
    .trg-stage[data-cap="3"] p[data-cap="3"], .trg-stage[data-cap="4"] p[data-cap="4"],
    .trg-stage[data-cap="5"] p[data-cap="5"], .trg-stage[data-cap="6"] p[data-cap="6"] { transform: translateY(-50%); }
    .trg-cap-out { margin-left: 0; padding-left: 0; }
    .trg-cap img { width: 15px; height: 15px; }
    /* narrower pills so the session names keep their room */
    .trg-s { height: 52px; padding: 0 10px 0 8px; gap: 9px; }
    .trg-s-av { width: 28px; height: 28px; border-radius: 8px; }
    .trg-s-av img { width: 15px; height: 15px; }
    .trg-s-st i { font-size: 0.5rem; padding: 3px 6px; letter-spacing: 0.04em; gap: 5px; }
    .trg-s-st i::before { width: 5px; height: 5px; }
    .trg-s--new.is-in { height: 52px; }
}
@media (max-width: 600px) {
    .trg { padding: 64px 0 60px; }
    .trg-stage { margin-top: 48px; }
}
@media (prefers-reduced-motion: reduce) {
    .trg-cap p, .trg-cap-out, .trg-tool, .trg-av, .trg-r, .trg-verdict, .trg-s, .trg-beam { transition: none; }
    .trg-ev, .trg-s-st i, .trg-beam-run.is-on, .trg-s-st i[data-s="resumed"]::before, .trg-av, .trg-av img, .trg-h img, .trg-hub, .trg-s-av, .trg-s-av img { animation: none !important; }
}