/* Styles for the Flowchart custom tag (distrocore/tags/Flowchart.cfm). */

:root {
    --flowchart-ink: #1A2550;
    --flowchart-outline: #000;
    --flowchart-text: #111827;
    --flowchart-text-muted: #374151;
    --flowchart-text-subtle: #6b7280;
    --flowchart-connector: #94A3B8;
    --flowchart-sky: #AAE1FB;
    --flowchart-lime: #D7E744;
    --flowchart-blue-light: #C5E9F5;
    --flowchart-blue: #80B7FB;
    --flowchart-pink-light: #F0C5E5;
    --flowchart-pink: #D895C5;
    --flowchart-orange-light: #F5D5C5;
    --flowchart-orange: #E89E7E;
}

/* ── Outer wrapper ─────────────────────────────────────────────── */
.flowchart {
    padding: 4.5rem 1rem 1.5rem;
    margin-top: 2rem;
    position: relative;
    box-sizing: border-box;
}

/* ── Heading + subtitle ────────────────────────────────────────── */
.flowchart-title {
    text-align: center;
    font-size: 1.875rem;
    font-weight: 700;
    color: var(--flowchart-text);
    line-height: 2.25rem;
    margin-bottom: 0.75rem;
}

.flowchart-subtitle {
    text-align: center;
    font-size: 1rem;
    color: var(--flowchart-text-subtle);
    line-height: 1.6;
    margin: 0 auto 2.5rem;
}

/* ── Diagram container ─────────────────────────────────────────── */
.flowchart-diagram {
    max-width: 820px;
    margin: 0 auto;
    font-weight: 500;
}

/* ── Root node ─────────────────────────────────────────────────── */
.flowchart-root-row {
    display: flex;
    justify-content: center;
}

.flowchart-root-edge {
    background: linear-gradient(135deg, var(--flowchart-sky) 0%, var(--flowchart-lime) 100%);
    border-radius: 999px;
    padding: 5px;
}

.flowchart-root-ring {
    border-radius: 999px;
    padding: 3px;
    background: var(--flowchart-ink);
}

.flowchart-root-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.8438rem 2.0625rem 0.8438rem 1.0625rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--flowchart-blue-light) 0%, var(--flowchart-blue) 100%);
    font-weight: 700;
    font-size: 1.0625rem;
    color: var(--flowchart-text);
}

/* ── Icon circles, shared by the root pill and every card ──────── */
.flowchart-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--flowchart-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.flowchart-icon-lg {
    width: 40px;
    height: 40px;
}

.flowchart-icon i {
    color: var(--flowchart-outline);
    font-size: 1.125rem;
}

.flowchart-icon-lg i {
    font-size: 1.3125rem;
}

.flowchart-root-pill .flowchart-icon i {
    font-size: 1.0625rem;
}

.flowchart-root-pill .flowchart-icon,
.flowchart-card-blue .flowchart-icon {
    background: var(--flowchart-blue);
    border: 3px solid var(--flowchart-outline);
}

.flowchart-card-pink .flowchart-icon {
    background: var(--flowchart-pink);
    border: 3px solid var(--flowchart-outline);
}

.flowchart-card-orange .flowchart-icon {
    background: var(--flowchart-orange);
    border: 3px solid var(--flowchart-outline);
}

/* ── Level: up to two nodes side by side, with their branches below ─── */
.flowchart-level {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 2.25rem;
    align-items: start;
}

/* Positions a pill + body pair and anchors the dashed stub above it. Carries no
   background or radius of its own; the pill and body pieces do the painting. */
.flowchart-node {
    position: relative;
    grid-row: 1;
}

.flowchart-node.flowchart-edge-left {
    grid-column: 1;
}

.flowchart-node.flowchart-edge-right {
    grid-column: 2;
}

/* A level holding one node keeps a column's width and sits under the stem that
   feeds it, so the dashed line runs straight down into it. */
.flowchart-level-align-left > .flowchart-node {
    grid-column: 1;
}

.flowchart-level-align-right > .flowchart-node {
    grid-column: 2;
}

.flowchart-level-align-center > .flowchart-node {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 1.125rem);
}

/* Edge colors are scoped to the pill and body pieces only, so the square
   corners of .flowchart-node never show behind the rounded shapes. */
.flowchart-node-pill.flowchart-edge-left,
.flowchart-node-body.flowchart-edge-left {
    background: linear-gradient(135deg, var(--flowchart-sky) 0%, var(--flowchart-lime) 100%);
}

.flowchart-node-pill.flowchart-edge-right,
.flowchart-node-body.flowchart-edge-right {
    background: linear-gradient(135deg, var(--flowchart-blue-light) 0%, var(--flowchart-blue) 100%);
}

/* Pill piece: sits in front of the body piece. */
.flowchart-node-pill {
    border-radius: 999px;
    padding: 5px;
    position: relative;
    z-index: 2;
    margin-left: -9px;
    margin-right: -9px;
}

.flowchart-pill-ring {
    border-radius: 999px;
    padding: 3px;
    background: var(--flowchart-ink);
}

.flowchart-pill {
    border-radius: 999px;
    overflow: hidden;
}

/* Body piece: pulled up so the pill overlaps its top edge. */
.flowchart-node-body {
    border-radius: 0 0 22px 22px;
    padding: 5px;
    position: relative;
    z-index: 1;
    margin-top: -24px;
}

.flowchart-body-ring {
    border-radius: 19px;
    padding: 3px;
    background: var(--flowchart-ink);
}

.flowchart-card {
    border-radius: 18px;
    overflow: hidden;
}

.flowchart-card-blue {
    background: linear-gradient(135deg, var(--flowchart-blue-light) 0%, var(--flowchart-blue) 100%);
}

.flowchart-card-pink {
    background: linear-gradient(135deg, var(--flowchart-pink-light) 0%, var(--flowchart-pink) 100%);
}

.flowchart-card-orange {
    background: linear-gradient(135deg, var(--flowchart-orange-light) 0%, var(--flowchart-orange) 100%);
}

.flowchart-card-blue .flowchart-card-body {
    background: var(--flowchart-blue-light);
}

.flowchart-card-pink .flowchart-card-body {
    background: var(--flowchart-pink-light);
}

.flowchart-card-orange .flowchart-card-body {
    background: var(--flowchart-orange-light);
}

/* ── Pill contents ─────────────────────────────────────────────── */
.flowchart-pill-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem 0.75rem 0.625rem;
}

.flowchart-pill-header-text {
    flex: 1;
}

.flowchart-pill-title {
    display: block;
    font-weight: 700;
    font-size: 1.0625rem;
    color: var(--flowchart-text);
    line-height: 1.2;
}

.flowchart-pill-subtitle {
    display: block;
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--flowchart-text-muted);
    margin-top: 2px;
    line-height: 1.3;
}

/* ── Card body text ────────────────────────────────────────────── */
.flowchart-card-body {
    padding: 2rem 1.375rem 1.25rem;
    font-size: 0.9375rem;
    color: var(--flowchart-text);
    line-height: 1.6;
}

.flowchart-card-body p {
    margin: 0 0 0.625rem;
}

.flowchart-card-body p:last-child {
    margin-bottom: 0;
}

.flowchart-card-body a {
    color: var(--flowchart-ink);
    font-weight: 700;
}

/* ── Expandable node: <summary> is the pill, content is the body ──── */
.flowchart-toggle > summary {
    display: block;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.flowchart-toggle > summary::-webkit-details-marker {
    display: none;
}

.flowchart-toggle > summary .flowchart-pill {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem 0.875rem 0.625rem;
}

.flowchart-toggle > summary .flowchart-pill-title {
    flex: 1;
}

.flowchart-card-chevron {
    flex-shrink: 0;
    font-size: 1.125rem;
    transition: transform 0.22s ease;
    color: var(--flowchart-ink);
}

.flowchart-toggle[open] > summary .flowchart-card-chevron {
    transform: rotate(90deg);
}

.flowchart-toggle[open] .flowchart-card-body {
    animation: flowchart-fadein 0.22s ease;
}

/* ── Branch: a node's children, revealed beneath the level ─────── */

/* A branch is a grid item of its parent level and always spans the full
   diagram width, so a revealed level has the same room as the one above it. */
.flowchart-gate,
.flowchart-ungated {
    grid-column: 1 / -1;
    align-self: start;
}

/* The tag assigns these: pills on row 1, then any always-visible branches, then
   every disclosure sharing the row after them. Disclosures overlap within that
   shared row so their buttons line up; only one is ever open. */
.flowchart-grid-row-2 {
    grid-row: 2;
}

.flowchart-grid-row-3 {
    grid-row: 3;
}

.flowchart-grid-row-4 {
    grid-row: 4;
}

.flowchart-gate {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 2.25rem;
    pointer-events: none;
}

.flowchart-gate > summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-width: 165px;
    padding: 0.5rem 1.25rem 0.5rem 0.875rem;
    border-radius: 50px;
    background: linear-gradient(135deg, var(--flowchart-blue-light) 0%, var(--flowchart-blue) 100%);
    border: 2px solid var(--flowchart-ink);
    cursor: pointer;
    list-style: none;
    font-weight: 700;
    font-size: 0.9375rem;
    color: var(--flowchart-text);
    user-select: none;
    white-space: nowrap;
    justify-self: center;
}

/* The button sits under the column whose node owns it. */
.flowchart-gate.flowchart-edge-left > summary {
    grid-column: 1;
}

.flowchart-gate.flowchart-edge-right > summary {
    grid-column: 2;
}

.flowchart-gate > summary::-webkit-details-marker {
    display: none;
}

/* Overlapping gates each span the full width even when their button occupies one
   column, so a gate's empty area would otherwise swallow clicks meant for its
   sibling's button. Only the interactive parts take pointer events. */
.flowchart-gate > summary,
.flowchart-gate > .flowchart-gate-content {
    pointer-events: auto;
}

.flowchart-gate-label-closed {
    display: inline;
}

.flowchart-gate-label-open {
    display: none;
}

.flowchart-gate[open] > summary .flowchart-gate-label-closed {
    display: none;
}

.flowchart-gate[open] > summary .flowchart-gate-label-open {
    display: inline;
}

.flowchart-gate-chevron {
    flex-shrink: 0;
    font-size: 1rem;
    transition: transform 0.22s ease;
    color: var(--flowchart-ink);
}

.flowchart-gate[open] > summary .flowchart-gate-chevron {
    transform: rotate(90deg);
}

.flowchart-gate > .flowchart-gate-content {
    grid-column: 1 / -1;
}

/* Chrome wraps everything but the <summary> in ::details-content. */
.flowchart-gate::details-content {
    grid-column: 1 / -1;
}

.flowchart-gate[open] > .flowchart-gate-content {
    animation: flowchart-fadein 0.22s ease;
}

/* A gate belonging to a collapsible node waits for that node to be opened, so
   the diagram reveals one level at a time rather than all at once. Both halves
   sit behind @supports: where :has() cannot be evaluated the reveal rule never
   matches, and hiding the button would strand the level it opens. */
@supports selector(:has(*)) {
    .flowchart-gate-awaits-owner {
        display: none;
    }

    .flowchart-level:has(> .flowchart-edge-left > .flowchart-toggle[open]) > .flowchart-gate-awaits-owner.flowchart-edge-left,
    .flowchart-level:has(> .flowchart-edge-right > .flowchart-toggle[open]) > .flowchart-gate-awaits-owner.flowchart-edge-right {
        display: grid;
    }
}

@media (prefers-reduced-motion: reduce) {
    .flowchart-toggle[open] .flowchart-card-body,
    .flowchart-gate[open] > .flowchart-gate-content {
        animation: none;
    }

    .flowchart-card-chevron,
    .flowchart-gate-chevron {
        transition: none;
    }
}

@keyframes flowchart-fadein {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Dashed connectors ─────────────────────────────────────────── */
.flowchart-connector {
    position: relative;
    height: 52px;

    /* Where a column's centre line falls; the stem and the horizontal run it
       meets both resolve against it. */
    --flowchart-branch-inset: calc(25% - 0.5625rem);
    --flowchart-stroke-offset: 1px;
}

.flowchart-connector::before {
    content: "";
    position: absolute;
    top: 0;
    height: 28px;
    border-left: 2px dashed var(--flowchart-connector);
}

.flowchart-connector::after {
    content: "";
    position: absolute;
    top: 28px;
    left: var(--flowchart-branch-inset);
    right: var(--flowchart-branch-inset);
    border-top: 2px dashed var(--flowchart-connector);
}

/* The stem drops from whatever the level hangs off: the root pill in the middle,
   or the disclosure button under one of the two columns. Each shifts by half its
   stroke, so the border straddles the anchor rather than starting at it. */
.flowchart-connector-center::before {
    left: 50%;
    transform: translateX(calc(-1 * var(--flowchart-stroke-offset)));
}

.flowchart-connector-left::before {
    left: var(--flowchart-branch-inset);
    transform: translateX(calc(-1 * var(--flowchart-stroke-offset)));
}

.flowchart-connector-right::before {
    right: var(--flowchart-branch-inset);
    transform: translateX(var(--flowchart-stroke-offset));
}

.flowchart-connector-single::after {
    display: none;
}

/* Short stub joining each node up to the horizontal run above it. */
.flowchart-node::before {
    content: "";
    position: absolute;
    top: -24px;
    left: 50%;
    transform: translateX(-1px);
    height: 24px;
    border-left: 2px dashed var(--flowchart-connector);
}

/* ── Mobile ────────────────────────────────────────────────────── */
@media (width <= 639px) {
    .flowchart-level {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .flowchart-level-align-center > .flowchart-node {
        justify-self: stretch;
        width: auto;
    }

    .flowchart-node,
    .flowchart-node.flowchart-edge-left,
    .flowchart-node.flowchart-edge-right,
    .flowchart-level-align-left > .flowchart-node,
    .flowchart-level-align-right > .flowchart-node,
    .flowchart-level-align-center > .flowchart-node {
        grid-column: 1;
    }

    .flowchart-node,
    .flowchart-grid-row-2,
    .flowchart-grid-row-3,
    .flowchart-grid-row-4 {
        grid-row: auto;
    }

    .flowchart-node::before {
        display: none;
    }

    .flowchart-connector {
        height: 32px;
    }

    .flowchart-connector::before {
        left: 50%;
        right: auto;
        transform: translateX(-1px);
    }

    .flowchart-connector::after {
        display: none;
    }

    .flowchart-gate {
        grid-template-columns: 1fr;
    }

    .flowchart-gate.flowchart-edge-left > summary,
    .flowchart-gate.flowchart-edge-right > summary {
        grid-column: 1;
    }

    .flowchart-root-pill {
        font-size: 0.9375rem;
    }

    .flowchart-pill-title {
        font-size: 1rem;
    }
}