/* Pilot Workshop demo. One day, 09:00 to 17:00, drawn as a line that fills in.
   The process gets marked E, A or D; the pilot card is written as type on the page. */
.pw-h {min-height:2.06em;max-width:24ch;font:400 clamp(2.1rem,4.2vw,4.4rem)/1.03 'Fraunces','Fraunces Fallback',Georgia,serif;letter-spacing:-.025em;color:var(--ink)}
.pw-to {color:var(--oxide)}
.pw-caret {display:inline-block;width:.06em;height:.82em;margin-left:.08em;vertical-align:-.06em;background:var(--oxide);animation:pw-blink 1s steps(1) infinite}
@keyframes pw-blink {50%{opacity:0}}
.pw button:focus-visible {outline:1px solid var(--oxide);outline-offset:3px}

/* ---- The day ---- */
.pw-day {position:relative;margin-top:clamp(2rem,3.5vw,3rem)}
.pw-sessions {position:relative;height:1.6rem}
.pw-sess,.pw-lunch {position:absolute;left:calc(var(--x) * 1%);bottom:.35rem;padding:0;font:inherit;font-size:.875rem;line-height:1.2;white-space:nowrap;background:none;border:0;color:var(--ink-2)}
.pw-sess {cursor:pointer;text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1px;text-underline-offset:.35em;transition:color .3s,text-decoration-color .3s}
.pw-sess:hover {color:var(--ink);text-decoration-color:var(--rule)}
.pw-sess.is-past {color:var(--ink)}
.pw-sess[aria-pressed="true"] {color:var(--oxide);text-decoration-color:var(--oxide)}
.pw-sess[data-k="6"] {left:auto;right:0}
.pw-lunch {opacity:.6}
.pw-track {position:relative;height:9px}
.pw-track::before {content:'';position:absolute;left:0;right:0;top:4px;height:1px;background:var(--rule)}
.pw-seg {position:absolute;left:calc(var(--x) * 1%);width:calc(var(--w) * 1%);top:3px;height:3px;background:var(--ink);transform:scaleX(0);transform-origin:0 50%;transition:transform var(--dur,.6s) linear}
.pw-seg.is-done {transform:none}
.pw-seg.is-run {transform:none;background:var(--oxide)}
.pw-now {position:absolute;inset:0;transform:translateX(calc(var(--p,100) * 1%));transition:transform var(--dur,.6s) linear;pointer-events:none}
.pw-now span {position:absolute;left:-.5px;top:-6px;width:1px;height:21px;background:var(--oxide)}
.pw-now span::after {content:'';position:absolute;left:-3px;top:-3px;width:7px;height:7px;border-radius:50%;background:var(--oxide)}
.pw-ticks {position:relative;height:1.5rem;margin-top:.45rem}
.pw-tick {position:absolute;left:calc(var(--x) * 1%);transform:translateX(-50%);font-size:.75rem;color:var(--ink-2);font-variant-numeric:tabular-nums}
.pw-tick:first-child {transform:none}
.pw-tick:last-child {transform:translateX(-100%)}

/* ---- Stage ---- */
.pw-stage {display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(3rem,7vw,7.5rem);margin-top:clamp(2rem,3.5vw,3rem);padding-top:clamp(1.8rem,3vw,2.4rem);border-top:1px solid var(--rule)}
.pw-proc {position:relative;min-width:0}

.pw-cands {position:absolute;left:0;top:0;right:0;list-style:none;margin:0;padding:0;display:grid;gap:.15rem;opacity:0;pointer-events:none;transition:opacity .5s var(--ease)}
.pw-cands li {font:400 clamp(1.15rem,1.7vw,1.5rem)/1.45 'Fraunces','Fraunces Fallback',Georgia,serif;color:var(--ink);opacity:0;transform:translateY(6px);transition:opacity .45s var(--ease),transform .5s var(--ease),color .4s}
.pw-cands li span {background:linear-gradient(currentColor,currentColor) no-repeat 0 58%/0 1px;transition:background-size .5s var(--ease)}
.pw[data-k="1"] .pw-cands {opacity:1}
.pw-cands.is-in li {opacity:1;transform:none}
.pw-cands.is-in li:nth-child(2) {transition-delay:.1s}
.pw-cands.is-in li:nth-child(3) {transition-delay:.2s}
.pw-cands.is-in li:nth-child(4) {transition-delay:.3s}
.pw-cands.is-in li:nth-child(5) {transition-delay:.4s}
.pw-cands.is-chosen li:not(.is-pick) {color:var(--ink-2);transition-delay:0s}
.pw-cands.is-chosen li:not(.is-pick) span {background-size:100% 1px}
.pw-cands.is-chosen li.is-pick {color:var(--oxide)}

.pw-flow {transition:opacity .5s var(--ease)}
.pw[data-k="0"] .pw-flow,.pw[data-k="1"] .pw-flow {opacity:0;pointer-events:none}
.pw-pt {display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding-bottom:.8rem;border-bottom:1px solid var(--rule);font:400 clamp(1.3rem,1.9vw,1.7rem)/1.2 'Fraunces','Fraunces Fallback',Georgia,serif;letter-spacing:-.02em;color:var(--ink)}
.pw-total {font:inherit;font-size:.875rem;color:var(--ink-2);white-space:nowrap}
.pw-tv {margin-right:.25rem;font:400 1.7rem/1 'Fraunces','Fraunces Fallback',Georgia,serif;color:var(--oxide);font-variant-numeric:tabular-nums}
.pw-tw {margin-left:.35rem;opacity:0;transition:opacity .5s}
.pw.is-marked .pw-tw {opacity:1}

.pw-steps {list-style:none;margin:0;padding:0}
.pw-steps li {border-bottom:1px solid var(--rule);opacity:0;transform:translateY(6px);transition:opacity .45s var(--ease),transform .5s var(--ease);transition-delay:calc(var(--i) * .12s)}
.pw-steps li.is-on {opacity:1;transform:none}
.pw-steps button {display:grid;grid-template-columns:1.6rem minmax(0,1fr) 3.4rem 1.6rem;align-items:baseline;gap:.6rem;width:100%;padding:.62rem .15rem .62rem 0;font:inherit;text-align:left;color:var(--ink);background:none;border:0;cursor:pointer}
.pw-n {font-size:.8125rem;color:var(--ink-2);font-variant-numeric:tabular-nums}
.pw-t {position:relative;display:flex;flex-wrap:wrap;align-items:baseline;gap:.15rem .7rem;transition:transform .7s var(--ease)}
.pw-st {font-size:.9375rem;line-height:1.35;text-decoration:line-through;text-decoration-thickness:1px;text-decoration-color:transparent;transition:text-decoration-color .5s var(--ease),color .4s}
.pw-own {font-size:.8125rem;color:var(--ink-2)}
.pw-own-old {background:linear-gradient(currentColor,currentColor) no-repeat 0 58%/0 1px;transition:background-size .4s var(--ease)}
.pw-own-new {margin-left:.45rem;opacity:0;transition:opacity .4s .2s}
.pw-d {display:flex;justify-content:flex-end;gap:.35rem;font-size:.875rem;font-variant-numeric:tabular-nums;color:var(--ink)}
.pw-d-old {color:var(--ink-2);text-decoration-color:transparent;transition:text-decoration-color .3s}
.pw-d-new {display:none}
.pw-mk {justify-self:end;font:500 1.25rem/1 'Fraunces','Fraunces Fallback',Georgia,serif;opacity:0;transform:scale(.6);transition:opacity .35s,transform .45s cubic-bezier(.3,1.5,.5,1)}
li[data-m="A"] .pw-mk {color:var(--oxide)}
li[data-m="D"] .pw-mk {color:var(--ink)}
li[data-m="E"] .pw-mk {color:var(--ink-2)}

/* Marked: E strikes and fades, A moves into the agent's lane, D changes hands. */
li.is-m .pw-mk {opacity:1;transform:none}
li.is-m .pw-d-old {text-decoration-color:currentColor;font-size:.75rem}
li.is-m .pw-d-new {display:inline}
li.is-m[data-m="E"] .pw-st {text-decoration-color:currentColor;color:var(--ink-2)}
li.is-m[data-m="E"] .pw-own,li.is-m[data-m="E"] .pw-n,li.is-m[data-m="E"] .pw-d {opacity:.55}
li.is-m[data-m="A"] .pw-t {transform:translateX(1.2rem)}
li.is-m[data-m="A"] .pw-t::before {content:'';position:absolute;left:-.95rem;top:.5em;width:5px;height:5px;border-radius:50%;background:var(--oxide)}
.pw-d.is-same .pw-d-old {display:none!important}
li.is-m[data-m="A"] .pw-own-new,li.is-m[data-m="A"] .pw-d-new {color:var(--oxide)}
li.is-m:is([data-m="A"],[data-m="D"]) .pw-own-old {background-size:100% 1px}
li.is-m .pw-own-new {opacity:1}
.pw-steps button:hover .pw-st,.pw-steps li.is-focus .pw-st {color:var(--oxide)}
.pw-why {min-height:3.2em;margin-top:1.1rem;max-width:44ch;font:400 1.05rem/1.45 'Fraunces','Fraunces Fallback',Georgia,serif;color:var(--ink-2);opacity:0;transition:opacity .4s}
.pw.is-marked .pw-why {opacity:1}

/* ---- The pilot card: type on the page ---- */
.pw-card {min-width:0}
.pw-ct {font:400 clamp(1.6rem,2.6vw,2.4rem)/1.08 'Fraunces','Fraunces Fallback',Georgia,serif;letter-spacing:-.025em;color:var(--ink)}
.pw-rows {margin:1.2rem 0 0}
.pw-rows > div {display:grid;grid-template-columns:5.6rem minmax(0,1fr);gap:1rem;padding:.6rem 0;border-top:1px solid var(--rule)}
.pw-rows dt {font-size:.8125rem;line-height:1.5;color:var(--ink-2);transition:opacity .4s}
.pw-rows dd {margin:0;min-height:1.45em;font:400 1.02rem/1.45 'Fraunces','Fraunces Fallback',Georgia,serif;color:var(--ink);opacity:0;transition:opacity .4s}
.pw-rows > div.is-on dd {opacity:1}
.pw-rows > div:not(.is-on) dt {opacity:.5}
.pw-ready {list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.1rem 1rem;font:400 .8125rem/1.5 'Hanken Grotesk','Hanken Fallback',Arial,sans-serif;color:var(--ink-2)}
.pw-ready li {opacity:0;transition:opacity .35s;transition-delay:calc(var(--i) * .16s)}
.pw-ready li.is-on {opacity:1}
.pw-ready b {font-weight:500}
.pw-ready b[data-r="ready"] {color:var(--ink)}
.pw-ready b[data-r="partly"] {color:var(--oxide)}
.pw-sign {display:flex;align-items:flex-end;gap:1rem;margin-top:1.2rem;font-size:.8125rem;line-height:1.45;color:var(--ink-2);opacity:0;transition:opacity .4s}
.pw-sign.is-on {opacity:1}
.pw-sign svg {flex:none;width:8.5rem;height:auto;overflow:visible}
.pw-sign path {fill:none;stroke:var(--ink);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.4s var(--ease) .2s}
.pw-sign.is-on path {stroke-dashoffset:0}

@media(max-width:1000px){
 .pw-stage {grid-template-columns:1fr}
 .pw-proc {min-height:0}
}
@media(max-width:760px){
 .pw-sessions {display:flex;flex-wrap:wrap;gap:.3rem 1.1rem;height:auto;margin-bottom:.8rem}
 .pw-sess,.pw-lunch {position:static}
 .pw-lunch {display:none}
 .pw-tick:not(.is-major) {display:none}
 .pw-steps button {grid-template-columns:1.2rem minmax(0,1fr) 2.6rem 1.2rem;gap:.45rem}
 .pw-st {font-size:.875rem}
 .pw-rows > div {grid-template-columns:4.6rem minmax(0,1fr);gap:.7rem}
 .pw-ready {grid-template-columns:1fr}
 .pw-sign {flex-direction:column;align-items:flex-start;gap:.4rem}
}