/* ==========================================================================
   Workflow visuals (inc/workflows.php). Prefixed wf- so legacy page styles
   do not reach in. Uses the brand tokens from style.css and brand.css.
   ========================================================================== */

.wf {
    --wf-aqua: #8FD3CC;
    --wf-on-navy: #E6EEF1;
    --wf-on-navy-2: #A9BAC6;
    --wf-amber: #8A5A12;
    --wf-amber-soft: #FBF1DE;
    --wf-amber-line: #E9CF9F;
    margin: 0;
    container-type: inline-size;
    text-align: left;
    font-family: var(--font-primary);
    line-height: 1.5;
}

.wf *,
.wf *::before,
.wf *::after { box-sizing: border-box; }

.wf ol,
.wf ul { list-style: none; margin: 0; padding: 0; }

.wf b { font-weight: 600; }

.wf-i { width: 18px; height: 18px; flex: none; }

.wf-eyebrow {
    display: block;
    font: 600 0.72rem/1.45 var(--font-primary);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--teal-ink, #24615F);
}

.wf-code {
    display: inline-block;
    margin-top: 6px;
    font: 500 0.72rem/1 var(--font-mono);
    letter-spacing: 0.02em;
    color: var(--arasync-gray-500);
}

.wf-dot {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
}

/* ---------- Path (navy) ---------- */
.wf-path {
    padding: clamp(18px, 3vw, 28px);
    border-radius: 20px;
    background: var(--arasync-navy);
    color: var(--wf-on-navy);
    box-shadow: 0 30px 60px -34px rgba(30, 43, 58, 0.5);
}

.wf-path .wf-eyebrow { color: #9FCBC7; }

.wf-path-steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--wf-cols, 5), minmax(0, 1fr));
    gap: 12px;
    margin-top: 20px !important;
}

.wf-path-steps::before {
    content: "";
    position: absolute;
    left: 4%;
    right: 4%;
    top: 21px;
    height: 2px;
    background: rgba(143, 211, 204, 0.25);
}

.wf-node { display: grid; gap: 10px; align-content: start; }

.wf-node .wf-dot {
    background: var(--arasync-navy-light);
    border: 2px solid rgba(143, 211, 204, 0.45);
    color: var(--wf-aqua);
}

.wf-node.is-gate .wf-dot { background: var(--arasync-primary); border-color: var(--arasync-primary); color: #fff; }

.wf-node b { display: block; font-size: 0.95rem; line-height: 1.3; color: #fff; }
.wf-node small { display: block; margin-top: 4px; font-size: 0.82rem; line-height: 1.45; color: var(--wf-on-navy-2); }
.wf-node .wf-code { color: #9FB2BF; }

.wf-checks {
    display: grid;
    gap: 6px;
    margin-top: 8px !important;
    padding: 10px 12px !important;
    border-radius: 10px;
    background: rgba(47, 125, 122, 0.18);
    border: 1px solid rgba(143, 211, 204, 0.25);
}

.wf-checks li { display: flex; gap: 8px; margin: 0; font-size: 0.78rem; line-height: 1.35; color: #D5E7E4; }
.wf-checks .wf-i { width: 14px; height: 14px; margin-top: 1px; color: var(--wf-aqua); }

.wf-hold {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin: 18px 0 0;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(183, 121, 31, 0.14);
    border: 1px dashed rgba(242, 201, 138, 0.5);
    font-size: 0.85rem;
    color: #F2DDB8;
}

.wf-hold strong { color: #F8E7C8; font-weight: 600; }

.wf-pill {
    padding: 6px 9px;
    border-radius: 999px;
    font: 600 0.68rem/1 var(--font-primary);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.wf-pill-hold { background: rgba(183, 121, 31, 0.3); color: #F2C98A; }

.wf-foot { display: flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 0.82rem; color: var(--wf-on-navy-2); }
.wf-foot .wf-i { width: 16px; height: 16px; color: var(--wf-aqua); }

/* ---------- Chain (light) ---------- */
.wf-chain {
    padding: clamp(18px, 3vw, 26px);
    border-radius: 18px;
    background: var(--arasync-mist);
    border: 1px solid var(--arasync-line);
}

.wf-chain-steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 14px;
    margin-top: 16px !important;
}

.wf-link { display: grid; gap: 10px; align-content: start; position: relative; }

.wf-link .wf-dot { background: var(--arasync-white); border: 2px solid var(--teal-soft, #D6E9E6); color: var(--teal-ink, #24615F); }
.wf-link.is-as .wf-dot { background: var(--arasync-primary); border-color: var(--arasync-primary); color: #fff; }

/* Connector to the next step, only when the steps are an order */
.wf-chain.is-sequence .wf-link:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 50px;
    right: -6px;
    top: 21px;
    height: 2px;
    background: var(--teal-soft, #D6E9E6);
}

.wf-chain.is-set .wf-link {
    padding: 14px;
    border-radius: 12px;
    background: var(--arasync-white);
    border: 1px solid var(--arasync-line);
}

.wf-link b { display: block; font-size: 0.92rem; line-height: 1.3; color: var(--arasync-navy); }
.wf-link small { display: block; margin-top: 3px; font-size: 0.8rem; line-height: 1.45; color: var(--arasync-gray-600); }

.wf-note {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--arasync-line);
    font-size: 0.82rem;
    color: var(--arasync-gray-500);
}

/* ---------- Rail (vertical with actor tags) ---------- */
.wf-rail-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 24px 28px;
    align-items: start;
    margin-top: 16px;
}

.wf-rail {
    padding: clamp(18px, 3vw, 26px);
    border-radius: 18px;
    background: var(--arasync-white);
    border: 1px solid var(--arasync-line);
}

.wf-rstep { position: relative; display: grid; grid-template-columns: 40px 1fr; gap: 14px; padding-bottom: 20px; margin: 0; }
.wf-rstep:last-child { padding-bottom: 0; }
.wf-rstep::before { content: ""; position: absolute; left: 19px; top: 40px; bottom: 0; width: 2px; background: var(--teal-soft, #D6E9E6); }
.wf-rstep:last-child::before { display: none; }

.wf-rstep .wf-dot { width: 40px; height: 40px; background: var(--arasync-mist); border: 2px solid var(--teal-soft, #D6E9E6); color: var(--teal-ink, #24615F); }
.wf-rstep.is-as .wf-dot { background: var(--arasync-primary); border-color: var(--arasync-primary); color: #fff; }

.wf-rstep b { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 0.95rem; color: var(--arasync-navy); }
.wf-rstep p { margin: 4px 0 0; font-size: 0.88rem; line-height: 1.5; color: var(--arasync-gray-600); }

.wf-by {
    padding: 5px 8px;
    border-radius: 999px;
    font: 600 0.66rem/1 var(--font-primary);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: var(--arasync-mist);
    border: 1px solid var(--arasync-line);
    color: var(--arasync-gray-600);
}

.wf-by.is-as { background: var(--teal-soft, #D6E9E6); border-color: transparent; color: var(--teal-ink, #24615F); }

.wf-outcomes { display: grid; gap: 12px; }

.wf-outcome { padding: 16px; border-radius: 14px; background: var(--arasync-mist); border: 1px solid var(--arasync-line); }
.wf-outcome.is-warn { background: var(--wf-amber-soft); border-color: var(--wf-amber-line); }

.wf-outcome h4 { display: flex; align-items: center; gap: 8px; margin: 0; font: 600 0.95rem/1.3 var(--font-heading); color: var(--arasync-navy); }
.wf-outcome.is-warn h4 { color: var(--wf-amber); }
.wf-outcome p { margin: 6px 0 0; font-size: 0.85rem; line-height: 1.5; color: var(--arasync-gray-600); }

/* ---------- Clock ---------- */
.wf-clock {
    padding: clamp(18px, 3vw, 26px);
    border-radius: 18px;
    background: var(--arasync-mist);
    border: 1px solid var(--arasync-line);
}

.wf-axis,
.wf-row { display: grid; grid-template-columns: 170px 1fr; gap: 12px; align-items: center; }

.wf-axis { margin-top: 18px; align-items: end; }

.wf-ticks { position: relative; height: 18px; border-bottom: 1px solid var(--arasync-line); }

.wf-ticks span {
    position: absolute;
    bottom: 4px;
    transform: translateX(-50%);
    white-space: nowrap;
    font: 500 0.7rem/1 var(--font-mono);
    color: var(--arasync-gray-500);
}

.wf-ticks span:first-child { transform: none; }
.wf-ticks span.is-end { transform: translateX(-100%); }

.wf-row { margin-top: 12px; }
.wf-row-label b { display: block; font-size: 0.9rem; color: var(--arasync-navy); }
.wf-row-label span { font-size: 0.78rem; color: var(--arasync-gray-500); }

.wf-track { position: relative; height: 30px; overflow: hidden; border-radius: 8px; background: var(--arasync-white); border: 1px solid var(--arasync-line); }

.wf-bar {
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 3px;
    display: flex;
    align-items: center;
    padding-left: 10px;
    border-radius: 6px;
    background: var(--arasync-primary);
    color: #fff;
    font: 600 0.75rem/1 var(--font-primary);
    white-space: nowrap;
}

.wf-bar.is-due { background: linear-gradient(90deg, var(--arasync-primary) 0 78%, #B7791F 78% 100%); }

.wf-clock-notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 18px; }
.wf-clock-notes div { padding: 12px 14px; border-radius: 12px; background: var(--arasync-white); border: 1px solid var(--arasync-line); font-size: 0.85rem; line-height: 1.5; color: var(--arasync-gray-600); }
.wf-clock-notes b { display: block; margin-bottom: 2px; font-size: 0.9rem; color: var(--arasync-navy); }

/* ---------- Placement inside legacy page layouts ---------- */
.solution-visual .wf { width: 100%; }
.solution-visual:has(> .wf) { align-self: center; }

/* ---------- Narrow containers (phones, half-width columns) ---------- */
@container (max-width: 760px) {
    .wf-path-steps { grid-template-columns: 1fr; gap: 18px; }
    .wf-path-steps::before { left: 20px; right: auto; top: 21px; bottom: 21px; width: 2px; height: auto; }
    .wf-node { grid-template-columns: 42px 1fr; gap: 14px; }
}

@container (max-width: 600px) {
    .wf-chain.is-sequence .wf-chain-steps { grid-template-columns: 1fr; gap: 16px; }
    .wf-chain.is-sequence .wf-link { grid-template-columns: 42px 1fr; gap: 14px; align-items: center; }
    .wf-chain.is-sequence .wf-link:not(:last-child)::after { left: 20px; right: auto; top: 42px; bottom: -16px; width: 2px; height: auto; }
    .wf-rail-grid { grid-template-columns: 1fr; }
    .wf-clock-notes { grid-template-columns: 1fr; }
}

@container (max-width: 520px) {
    .wf-axis,
    .wf-row { grid-template-columns: 1fr; gap: 6px; }
    .wf-axis > div:first-child { display: none; }
    .wf-bar span { display: none; }
}

@container (max-width: 420px) {
    .wf-chain.is-set .wf-chain-steps { grid-template-columns: 1fr 1fr; }
}

/* Four-card sets: 2 x 2 rather than 3 + 1 in narrow columns */
@container (max-width: 700px) {
    .wf-chain.is-set .wf-chain-steps:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}