/* Illustrated figures for the case studies (views/figures/*.ejs). Same navy
   panel, labels and caption as the before/after diagrams in case-study.css;
   each figure collapses to one column when its container is narrow. */
.wc-fig {
    --wc-navy: #1e2b3c; --wc-cream: #efe7de; --wc-coral: #e8875f;
    container-type: inline-size; margin: 28px 0 8px;
}
.wc-fig * { box-sizing: border-box; }
.wc-fig p { margin: 0; }
.wc-fig__panel {
    padding: 36px 40px; border-radius: var(--radius);
    background-color: var(--wc-navy);
    background-image:
        linear-gradient(rgba(239, 231, 222, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(239, 231, 222, .045) 1px, transparent 1px);
    background-size: 32px 32px;
    color: var(--wc-cream); font-family: var(--font-body);
}
.wc-fig .wc-fig__label {
    margin: 0 0 18px; font-family: var(--font-body); font-size: 12px; font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase; color: rgba(239, 231, 222, .62);
}
.wc-fig .wc-fig__label--accent { color: var(--wc-coral); }
.wc-fig .wc-fig__note {
    margin: 24px 0 0; padding-top: 20px; border-top: 1px solid rgba(239, 231, 222, .18);
    font-size: 14px; line-height: 1.5; color: rgba(239, 231, 222, .75);
}
.wc-fig__caption { margin-top: 14px; font-size: 13px; line-height: 1.5; color: var(--ink-3); }
@container (max-width: 640px) {
    .wc-fig__panel { padding: 24px 20px; }
}
@media (prefers-reduced-motion: reduce) {
    .wc-fig * { animation: none !important; }
}

/* Excel at the edges, execution in 3forge. */
.wc-ec {
    display: grid; align-items: stretch;
    grid-template-columns: minmax(0, .85fr) 32px minmax(0, 2.8fr) 32px minmax(0, .85fr);
}
.wc-ec .wc-fig__label { margin-bottom: 14px; white-space: nowrap; }
.wc-ec__edge { display: flex; flex-direction: column; justify-content: center; padding: 16px; border: 2px dashed rgba(239, 231, 222, .45); }
.wc-ec__items { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.wc-ec__items li {
    display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: center;
    font-size: 14px; line-height: 1.4; color: rgba(239, 231, 222, .82);
}
.wc-ec__items svg { display: block; width: 22px; height: 22px; }
/* The edge columns are too narrow at article width for icon and text side by side. */
@container (min-width: 701px) {
    .wc-ec__items li { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}
.wc-ec__core { padding: 16px 18px 18px; border: 2px solid var(--wc-cream); background: rgba(239, 231, 222, .04); }
.wc-ec__inner { display: grid; grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr) 22px minmax(0, 1fr); align-items: center; }
.wc-ec__chip { padding: 12px 14px; border: 2px solid var(--wc-coral); font-size: 14px; line-height: 1.4; }
.wc-ec__chip small { display: block; margin-top: 6px; font-size: 13px; line-height: 1.4; color: rgba(239, 231, 222, .7); }
.wc-ec__stack { display: grid; gap: 8px; }
.wc-ec__stack div { padding: 8px 10px; border: 1.5px solid rgba(239, 231, 222, .6); font-size: 14px; line-height: 1.35; }
.wc-ec__stack .wc-ec__src { border-style: dashed; border-color: rgba(239, 231, 222, .45); color: rgba(239, 231, 222, .75); font-size: 13px; }
.wc-ec__link { position: relative; align-self: center; height: 12px; }
.wc-ec__link::before {
    content: ""; position: absolute; left: 3px; right: 9px; top: 5px; height: 2px;
    background: repeating-linear-gradient(90deg, var(--wc-cream) 0 6px, transparent 6px 10px);
    background-size: 10px 2px; animation: wc-ec-flow 1s linear infinite;
}
.wc-ec__link::after {
    content: ""; position: absolute; right: 1px; top: 0;
    border-left: 9px solid var(--wc-cream); border-top: 6px solid transparent; border-bottom: 6px solid transparent;
}
@keyframes wc-ec-flow { from { background-position: 0 0; } to { background-position: 10px 0; } }
@keyframes wc-ec-flow-v { from { background-position: 0 0; } to { background-position: 0 10px; } }
.wc-ec__brackets {
    display: grid; margin-top: 14px;
    grid-template-columns: minmax(0, .85fr) 32px minmax(0, 2.8fr) 32px minmax(0, .85fr);
}
.wc-ec__bracket { height: 10px; border: 2px solid rgba(239, 231, 222, .5); border-top: 0; }
.wc-ec__bracket--core { grid-column: 3; border-color: var(--wc-coral); }
.wc-ec__bracket--out { grid-column: 5; }
.wc-ec__blabel {
    margin-top: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em;
    text-transform: uppercase; text-align: center; color: rgba(239, 231, 222, .62);
}
.wc-ec__blabel--core { grid-column: 3; color: var(--wc-coral); }
.wc-ec__blabel--out { grid-column: 5; }
@container (max-width: 700px) {
    .wc-ec, .wc-ec__inner { grid-template-columns: minmax(0, 1fr); }
    .wc-ec__link { justify-self: center; width: 12px; height: 30px; }
    .wc-ec__link::before {
        left: 5px; right: auto; top: 3px; bottom: 9px; width: 2px; height: auto;
        background: repeating-linear-gradient(180deg, var(--wc-cream) 0 6px, transparent 6px 10px);
        background-size: 2px 10px; animation-name: wc-ec-flow-v;
    }
    .wc-ec__link::after {
        right: auto; left: 0; top: auto; bottom: 1px;
        border-top: 9px solid var(--wc-cream); border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 0;
    }
    .wc-ec__inner .wc-ec__link { height: 22px; }
    .wc-ec__brackets { display: none; }
}

/* Lineage: four stages, traced back from the output. */
.wc-tr { --gap: 40px; }
.wc-tr__cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.wc-tr__card { position: relative; padding: 16px; border: 2px solid var(--wc-cream); }
.wc-tr__card svg { display: block; width: 100%; height: 56px; margin-bottom: 14px; }
.wc-tr__title { display: block; font-size: 15px; font-weight: 500; line-height: 1.35; }
.wc-tr__sub { display: block; margin-top: 6px; font-size: 14px; line-height: 1.45; color: rgba(239, 231, 222, .75); }
.wc-tr__card:not(:last-child)::after {
    content: ""; position: absolute; top: 50%; left: 100%;
    width: 32px; height: 2px; margin-top: -1px; background: var(--wc-cream);
}
.wc-tr__card:not(:last-child)::before {
    content: ""; position: absolute; top: 50%; left: calc(100% + 29px); margin-top: -6px;
    border-left: 9px solid var(--wc-cream); border-top: 6px solid transparent; border-bottom: 6px solid transparent;
}
.wc-tr__track { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.wc-tr__line {
    position: absolute; top: 29px; height: 2px;
    left: calc((100% - 3 * var(--gap)) / 8 - 22px); right: calc((100% - 3 * var(--gap)) / 8);
    background: var(--wc-coral); transform-origin: right; animation: wc-tr-line 6s ease-in-out infinite;
}
.wc-tr__head {
    position: absolute; top: 24px; left: calc((100% - 3 * var(--gap)) / 8 - 32px);
    border-right: 10px solid var(--wc-coral); border-top: 6px solid transparent; border-bottom: 6px solid transparent;
    animation: wc-tr-head 6s linear infinite;
}
.wc-tr__cell { display: flex; flex-direction: column; align-items: center; }
.wc-tr__cell::before { content: ""; width: 2px; height: 22px; background: repeating-linear-gradient(180deg, var(--wc-coral) 0 4px, transparent 4px 7px); }
.wc-tr__node {
    position: relative; z-index: 1; width: 16px; height: 16px;
    border: 2px solid var(--wc-coral); background: var(--wc-coral);
    animation: wc-tr-node 6s ease-in-out infinite;
}
.wc-tr__cell:nth-child(4) .wc-tr__node { animation-delay: 0s; }
.wc-tr__cell:nth-child(3) .wc-tr__node { animation-delay: .6s; }
.wc-tr__cell:nth-child(2) .wc-tr__node { animation-delay: 1.2s; }
.wc-tr__cell:nth-child(1) .wc-tr__node { animation-delay: 1.8s; }
.wc-fig .wc-tr__tlabel {
    margin: 12px 0 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em;
    text-transform: uppercase; text-align: center; color: var(--wc-coral);
}
@keyframes wc-tr-line { 0% { transform: scaleX(0); opacity: 1; } 40%, 85% { transform: scaleX(1); opacity: 1; } 95%, 100% { transform: scaleX(1); opacity: 0; } }
@keyframes wc-tr-head { 0%, 38% { opacity: 0; } 42%, 85% { opacity: 1; } 95%, 100% { opacity: 0; } }
@keyframes wc-tr-node { 0%, 4% { background: var(--wc-navy); } 8%, 80% { background: var(--wc-coral); } 92%, 100% { background: var(--wc-navy); } }
@container (max-width: 640px) {
    .wc-tr__cards { grid-template-columns: minmax(0, 1fr); gap: 30px; }
    .wc-tr__card:not(:last-child)::after { top: 100%; left: 50%; width: 2px; height: 20px; margin: 2px 0 0 -1px; }
    .wc-tr__card:not(:last-child)::before {
        top: calc(100% + 19px); left: 50%; margin: 0 0 0 -6px;
        border-top: 9px solid var(--wc-cream); border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 0;
    }
    .wc-tr__track, .wc-fig .wc-tr__tlabel { display: none; }
}

/* Entitlements: two overlapping scopes inside the tool schema. */
.wc-venn { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.wc-venn__art svg { display: block; width: 100%; height: auto; }
.wc-venn__m { transform-box: fill-box; transform-origin: center; animation: wc-venn-pop 6s ease-in-out infinite; }
@keyframes wc-venn-pop { 0%, 100% { transform: scale(1); } 6% { transform: scale(1.22); } 14% { transform: scale(1); } }
.wc-key { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.wc-key li {
    display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: start;
    font-size: 14px; line-height: 1.45; color: rgba(239, 231, 222, .75);
}
.wc-key b { display: block; font-weight: 500; font-size: 15px; color: var(--wc-cream); }
.wc-key__sw { display: block; margin-top: 10px; border-top: 2px solid var(--wc-cream); }
.wc-key__sw--dashed { border-top-style: dashed; }
.wc-key__sw--dotted { border-top: 2px dotted rgba(239, 231, 222, .5); }
.wc-key--outcomes { margin-top: 22px; padding-top: 22px; border-top: 1px solid rgba(239, 231, 222, .18); }
.wc-key--outcomes li { align-items: center; }
.wc-key__icon { display: block; width: 26px; height: 26px; }
@container (max-width: 640px) {
    .wc-venn { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}

/* Restart scope: whole application versus one component. */
.wc-rs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
.wc-rs__app { border: 2px solid var(--wc-cream); }
.wc-rs__bar {
    display: flex; align-items: center; justify-content: flex-end; height: 30px; padding: 0 12px;
    border-bottom: 2px solid var(--wc-cream); background: rgba(239, 231, 222, .1);
}
.wc-rs__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--wc-coral); box-shadow: 0 0 0 5px rgba(232, 135, 95, .22); }
.wc-rs__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 14px; }
.wc-rs__cell { display: flex; aspect-ratio: 4 / 3; padding: 10px; border: 2px solid rgba(239, 231, 222, .5); }
.wc-rs__cell svg { display: block; width: 100%; height: 100%; }
.wc-rs__cell--changed { border-color: var(--wc-coral); background: rgba(232, 135, 95, .16); }
.wc-rs__progress { height: 4px; margin: 0 14px 14px; background: rgba(239, 231, 222, .12); }
.wc-rs__progress--none { background: transparent; }
.wc-rs__progress span { display: block; height: 100%; background: var(--wc-coral); transform-origin: left; transform: scaleX(0); }
.wc-fig .wc-rs__note { margin: 16px 0 0; font-size: 14px; line-height: 1.5; color: rgba(239, 231, 222, .75); }
.wc-rs__side--before .wc-rs__grid { animation: wc-rs-down 6s ease-in-out infinite; }
.wc-rs__side--before .wc-rs__dot { animation: wc-rs-dot 6s ease-in-out infinite; }
.wc-rs__side--before .wc-rs__progress span { animation: wc-rs-prog 6s linear infinite; }
.wc-rs__side--after .wc-rs__cell--changed { animation: wc-rs-flash 6s ease-in-out infinite; }
@keyframes wc-rs-down { 0%, 12% { opacity: 1; } 18%, 70% { opacity: .12; } 78%, 100% { opacity: 1; } }
@keyframes wc-rs-dot {
    0%, 12% { background: var(--wc-coral); box-shadow: 0 0 0 5px rgba(232, 135, 95, .22); }
    18%, 70% { background: rgba(239, 231, 222, .25); box-shadow: 0 0 0 5px rgba(239, 231, 222, 0); }
    78%, 100% { background: var(--wc-coral); box-shadow: 0 0 0 5px rgba(232, 135, 95, .22); }
}
@keyframes wc-rs-prog { 0%, 16% { transform: scaleX(0); opacity: 1; } 70% { transform: scaleX(1); opacity: 1; } 76%, 100% { transform: scaleX(1); opacity: 0; } }
@keyframes wc-rs-flash {
    0%, 12% { border-color: rgba(239, 231, 222, .5); background: transparent; }
    15% { border-color: rgba(239, 231, 222, .5); background: transparent; opacity: .3; }
    20%, 55% { border-color: var(--wc-coral); background: rgba(232, 135, 95, .16); opacity: 1; }
    70%, 100% { border-color: rgba(239, 231, 222, .5); background: transparent; }
}
@container (max-width: 640px) {
    .wc-rs { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
@media (prefers-reduced-motion: reduce) {
    .wc-rs__side--before .wc-rs__grid { opacity: .2; }
    .wc-rs__side--before .wc-rs__dot { background: rgba(239, 231, 222, .25); box-shadow: none; }
    .wc-rs__side--before .wc-rs__progress span { transform: scaleX(.55); }
}