/* Workflow picker, half-dial stepper and the light theme for the Redstone demo (loads after demo.css).
   Everything here is our own theme: warm white, near-black ink, one oxblood accent. No dark panels. */

/* ───── the card, light in every state ───── */
.wf{max-width:1360px;--txt:#17140f;--mut:#6b6456;--line:#e7e2d8;--line2:#d9d2c2;--cream:#17140f;--red:#a8392e;
  position:relative;isolation:isolate;background:#fbfaf7;color:#17140f;border:1px solid #e7e2d8;box-shadow:0 30px 70px -48px rgba(23,20,15,.28)}
.wf-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;overflow:hidden;transition:opacity .6s}
.wf-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 46% at 50% 0%,rgba(168,57,46,.09),transparent 70%),radial-gradient(circle at 1px 1px,rgba(23,20,15,.06) 1px,transparent 0) 0 0/22px 22px}
.wf-bg canvas{position:absolute;inset:0}
.wf[data-state="live"] .wf-bg{opacity:.45}

/* ───── picker ───── */
.wf-pick{position:relative;padding:6px 4px 4px;text-align:center}
.wf-eyebrow{display:inline-flex;align-items:center;gap:8px;font:600 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#6b6456;border:1px solid #e0d9c9;border-radius:20px;padding:6px 13px;background:#fff}
.wf-eyebrow i{width:6px;height:6px;border-radius:50%;background:#a8392e;box-shadow:0 0 10px 2px rgba(168,57,46,.45);animation:wfPulse 2.2s ease-in-out infinite}
@keyframes wfPulse{50%{transform:scale(1.5);opacity:.6}}
.wf-q{font:400 clamp(26px,3.2vw,40px)/1.15 var(--serif);color:#17140f;margin:18px 0 8px;letter-spacing:-.01em}
.wf-sub{color:#6b6456;font:400 15px var(--ui)}
.wf-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:32px;text-align:left}
.wf-card{position:relative;display:flex;flex-direction:column;gap:8px;min-height:318px;padding:22px 20px 18px;border:1px solid #e7e2d8;border-radius:16px;overflow:hidden;
  background:#fff;color:#17140f;text-align:left;box-shadow:0 1px 0 rgba(23,20,15,.03);
  transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .45s ease,filter .45s ease,border-color .3s,box-shadow .5s;animation:wfRise .85s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * 90ms)}
@keyframes wfRise{from{opacity:0;transform:translateY(22px) scale(.98)}to{opacity:1;transform:none}}
.wf-card:hover,.wf-card:focus-visible{transform:translateY(-5px);border-color:#a8392e;box-shadow:0 24px 50px -28px rgba(168,57,46,.45);outline:0}
.wf-glow{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s;background:radial-gradient(280px circle at var(--mx,50%) var(--my,0%),rgba(168,57,46,.12),transparent 62%)}
.wf-card:hover .wf-glow,.wf-card:focus-visible .wf-glow{opacity:1}
.wf-n{position:absolute;right:18px;top:18px;font:600 11px var(--mono);letter-spacing:.1em;color:#b3a995}
.wf-g{display:block;width:62px;height:62px;margin-bottom:6px}
.wf-g svg{width:100%;height:100%;overflow:visible;fill:none;stroke:#17140f;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.wf-t{font:400 26px/1.1 var(--serif);color:#17140f;position:relative}
.wf-h{font:600 14px/1.35 var(--ui);color:#3a352c;position:relative}
.wf-d{font:400 13.5px/1.5 var(--ui);color:#6b6456;position:relative}
.wf-s{margin-top:auto;padding-top:12px;border-top:1px solid #ece6d8;font:600 10.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#8a8070;position:relative}
.wf-go{font:600 12px var(--mono);letter-spacing:.06em;color:#a8392e;position:relative}
.wf-go i{display:inline-block;font-style:normal;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.wf-card:hover .wf-go i{transform:translateX(6px)}
/* glyphs: small looping line art */
.wf-g .g-dot,.wf-g .g-hub,.wf-g .g-dot2{fill:#a8392e;stroke:none}
.wf-g .g-tick{stroke:#a8392e;stroke-dasharray:30;animation:wfDraw 3.2s ease-in-out infinite}
.wf-g .g-ring{stroke-dasharray:3 5;opacity:.7}
.wf-g .g-orbit{transform-origin:32px 32px;animation:wfSpin 7s linear infinite}
.wf-card:hover .g-orbit{animation-duration:2.4s}
.wf-g .g-line{stroke-dasharray:3 5;stroke:#8a8070;animation:wfFlow 1.6s linear infinite}
.wf-g .g-hub{transform-origin:32px 32px;animation:wfBeat 2.2s ease-in-out infinite}
.wf-g .g-arc{stroke:#a8392e;opacity:.25;animation:wfWave 2.6s ease-in-out infinite}
.wf-g .a2{animation-delay:.45s}.wf-g .b1{animation-delay:.2s}.wf-g .b2{animation-delay:.65s}
.wf-g .g-layer{stroke:#8a8070}
.wf-g .l1{stroke:#17140f;animation:wfLayer 3s ease-in-out infinite}
.wf-g .l2{animation:wfLayer 3s ease-in-out .5s infinite}.wf-g .l3{animation:wfLayer 3s ease-in-out 1s infinite}
.wf-g .g-dot2{animation:wfFall 3s ease-in-out infinite}
@keyframes wfSpin{to{transform:rotate(360deg)}}
@keyframes wfDraw{0%{stroke-dashoffset:30}45%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-30}}
@keyframes wfFlow{to{stroke-dashoffset:-16}}
@keyframes wfBeat{50%{transform:scale(1.35)}}
@keyframes wfWave{0%,100%{opacity:.15}50%{opacity:1}}
@keyframes wfLayer{0%,100%{opacity:.45}50%{opacity:1}}
@keyframes wfFall{0%{transform:translateY(0);opacity:0}20%{opacity:1}80%{opacity:1}100%{transform:translateY(26px);opacity:0}}
/* opening: the chosen card lifts and glows, the others dissolve */
.wf-card.sel{transform:translateY(-8px) scale(1.025);border-color:#a8392e;box-shadow:0 0 0 1px rgba(168,57,46,.45),0 30px 70px -26px rgba(168,57,46,.5)}
.wf-card.sel .wf-glow{opacity:1}
.wf-card.out{opacity:0;filter:blur(7px);transform:translateY(18px) scale(.96);pointer-events:none;transition-delay:calc(var(--i) * 45ms)}
.wf[data-state="opening"] .wf-card{animation:none}

/* ───── the live view ───── */
.wf-live.enter{animation:wfEnter .8s cubic-bezier(.2,.8,.2,1) backwards}
@keyframes wfEnter{from{opacity:0;transform:translateY(30px);clip-path:inset(0 0 100% 0)}to{opacity:1;transform:none;clip-path:inset(0 0 0 0)}}
.wf-live.leave{opacity:0;transform:translateY(16px);filter:blur(5px);transition:opacity .38s ease,transform .38s ease,filter .38s ease}
.wf-live .dial,.wf-live .ax-split{transition:opacity .3s ease,filter .3s ease,transform .3s ease}
.wf-live.swap .dial,.wf-live.swap .ax-split{opacity:0;filter:blur(7px);transform:translateY(8px)}
.ax-stage.flip .ax-split{animation:wfFlip .55s cubic-bezier(.2,.8,.2,1)}
@keyframes wfFlip{from{opacity:.15;filter:blur(5px);transform:translateY(10px) scale(.99)}to{opacity:1;filter:none;transform:none}}
.wf-bar{display:flex;align-items:center;gap:14px;margin:0 0 14px;flex-wrap:wrap}
.wf-back{display:inline-flex;align-items:center;gap:8px;font:600 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#6b6456;padding:9px 12px;border:1px solid #e0d9c9;border-radius:999px;background:#fff;transition:color .25s,border-color .25s}
.wf-back span{display:inline-block;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.wf-back:hover{color:#17140f;border-color:#a8392e}.wf-back:hover span{transform:translateX(-4px)}
.wf-tabs{position:relative;display:flex;gap:2px;padding:4px;border:1px solid #e0d9c9;border-radius:999px;background:#fff;overflow-x:auto;scrollbar-width:none;max-width:100%}
.wf-tabs::-webkit-scrollbar{display:none}
.wf-tabs button{position:relative;z-index:1;padding:8px 16px;font:600 13px var(--ui);color:#6b6456;border-radius:999px;white-space:nowrap;transition:color .3s}
.wf-tabs button:hover{color:#17140f}.wf-tabs button.on{color:#fff}
.wf-ink{position:absolute;left:0;top:4px;bottom:4px;width:0;border-radius:999px;z-index:0;background:linear-gradient(180deg,#b9473a,#a8392e);box-shadow:0 6px 20px -8px rgba(168,57,46,.7);transition:transform .55s cubic-bezier(.2,.8,.2,1),width .55s cubic-bezier(.2,.8,.2,1)}
.wf-sweep{position:absolute;left:0;right:0;top:0;height:2px;z-index:5;opacity:0;pointer-events:none;background:linear-gradient(90deg,transparent,#d1503f,transparent);box-shadow:0 0 16px 3px rgba(209,80,63,.45)}
.wf-sweep.go{animation:wfSweep .9s cubic-bezier(.4,0,.2,1)}
@keyframes wfSweep{0%{top:0;opacity:0}15%{opacity:1}85%{opacity:1}100%{top:100%;opacity:0}}
.wf .ax-top .roadmap{font:600 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#6b6456;border:1px solid #d9d2c2;border-radius:20px;padding:5px 11px;background:#fff}
.wf .ax-top .roadmap.live-b{color:#2e7d6b;border-color:#bfe0d3}
.wf .ax-top .roadmap.soon-b{color:#a8392e;border-color:#e8c5bf}
.wf .ax-hint{color:#8a8070}
.wf .ax-cap{color:#17140f}
.wf .ax-stage{background:radial-gradient(circle at 1px 1px,rgba(23,20,15,.07) 1px,transparent 0) 0 0/18px 18px,#f3efe6;border-color:#e7e2d8}
.wf .reg{border-color:#c9bfa9}
.wf .ax-stagecol{background:transparent}
.sk-guide{display:none!important}
.ax-text{padding:0}
@media (min-width:1181px){
  .wf-bar{position:sticky;top:58px;z-index:9;margin:-10px 0 8px;padding:10px 0;background:rgba(251,250,247,.92);backdrop-filter:blur(10px)}
  .ax-stagecol{top:122px}
}

/* ───── the half dial: checkpoints sit on an arc that turns as you scroll ───── */
.dial{display:none}
.dial-m{display:none}
@media (min-width:1181px){
  .ax-chapters{grid-template-columns:minmax(300px,420px) minmax(0,1fr);gap:26px}
  .dial{display:block;position:sticky;top:122px;overflow:hidden;margin-left:-30px;width:calc(100% + 30px);height:600px;--R:190px}
}
.dial-disc{position:absolute;left:calc(-1 * var(--R));top:calc(50% - var(--R));width:calc(2 * var(--R));height:calc(2 * var(--R));border-radius:50%;border:1px solid #d9d2c2;will-change:transform;
  background:radial-gradient(circle,transparent 0 60%,rgba(168,57,46,.05) 60.3% 100%)}
.dial-disc::before{content:"";position:absolute;inset:8px;border-radius:50%;background:repeating-conic-gradient(rgba(23,20,15,.32) 0 .45deg,transparent .45deg 5deg);
  -webkit-mask:radial-gradient(circle,transparent calc(100% - 9px),#000 calc(100% - 8px));mask:radial-gradient(circle,transparent calc(100% - 9px),#000 calc(100% - 8px))}
.dial-disc::after{content:"";position:absolute;inset:38px;border-radius:50%;border:1px dashed #d9d2c2}
.dial-arm{position:absolute;left:0;top:50%;width:var(--R);height:1px;background:linear-gradient(90deg,transparent,rgba(168,57,46,.85) 78%)}
.dial-count{position:absolute;left:34px;top:4px;font:600 11px var(--mono);letter-spacing:.14em;color:#a39a86}
.dial-steps{position:absolute;inset:0;list-style:none}
.dial-steps li{position:absolute;left:0;top:0;will-change:transform,opacity}
.d-dot{position:absolute;left:-6px;top:-6px;width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid #c9bfa9;transition:background .3s,border-color .3s,box-shadow .3s}
.dial-steps li.done .d-dot{background:#a8392e;border-color:#a8392e}
.dial-steps li.act .d-dot{background:#a8392e;border-color:#a8392e;box-shadow:0 0 0 5px rgba(168,57,46,.16),0 0 16px 3px rgba(168,57,46,.35)}
.d-txt{position:absolute;left:22px;top:0;transform:translateY(-50%);width:228px;text-align:left;display:block}
.d-ch{display:block;white-space:nowrap;max-height:calc(var(--k,0) * 18px);overflow:hidden;opacity:var(--k,0);font:600 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#8a8070;font-style:normal;margin-bottom:calc(var(--k,0) * 6px)}
.d-ch u{text-decoration:none;font:700 9px/1 var(--mono);letter-spacing:.08em;background:#a8392e;color:#fff;border-radius:3px;padding:2px 5px;margin-left:6px;vertical-align:1px}
.d-t{display:block;font:400 calc(13px + 9px * var(--k,0))/1.18 var(--serif);color:#17140f;letter-spacing:-.005em}
.d-s{display:block;max-height:calc(var(--k,0) * 90px);overflow:hidden;opacity:var(--k,0);font:400 13px/1.45 var(--ui);color:#6b6456;margin-top:calc(var(--k,0) * 6px)}
.d-bar{display:block;height:2px;width:0;margin-top:calc(var(--k,0) * 10px);opacity:var(--k,0);background:linear-gradient(90deg,#a8392e,#d1503f)}
.dial-steps li:not(.act) .d-t{color:#8a8070}
/* phones and tablets: one compact line instead of the dial */
@media (max-width:1180px){
  .dial-m{display:block;position:relative;margin:2px 0 8px;padding:9px 12px 11px;border:1px solid #e7e2d8;border-radius:10px;background:#fff;overflow:hidden}
  .dial-m .m-c{font:600 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#8a8070}
  .dial-m .m-c u{text-decoration:none;font:700 9px/1 var(--mono);background:#a8392e;color:#fff;border-radius:3px;padding:2px 5px;margin-left:6px}
  .dial-m .m-t{font:400 19px/1.2 var(--serif);color:#17140f;margin-top:4px}
  .dial-m .m-s{font:400 12.5px/1.4 var(--ui);color:#6b6456;margin-top:2px}
  .dial-m .m-bar{position:absolute;left:0;bottom:0;height:2px;width:0;background:linear-gradient(90deg,#a8392e,#d1503f)}
  .dial-m.chg .m-t,.dial-m.chg .m-s,.dial-m.chg .m-c{animation:wfChap .45s cubic-bezier(.2,.8,.2,1)}
  .wf .ax-stagecol{background:#fbfaf7}
}
@keyframes wfChap{from{opacity:.4;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ───── Slack and the outside pane stay dark (people know Slack that way); everything around them is our light theme ───── */
.sk-pop{animation:skIn .55s cubic-bezier(.2,.8,.2,1)}
.sk .spot{box-shadow:0 0 0 2px #d1503f,0 0 18px 2px rgba(209,80,63,.35)}
.sk,.os{box-shadow:0 30px 60px -30px rgba(23,20,15,.45),0 0 0 1px rgba(23,20,15,.25)}
/* the whole window is visible: heights follow the screen, and the channel list keeps its names */
.sk-body,.os{height:clamp(420px,calc(100vh - 290px),600px)}
.wf .ax-stage[data-ch="1"] .sk-body{grid-template-columns:140px minmax(0,1fr) 0}
.wf .ax-stage[data-ch="1"] .sk-side{font-size:12.5px;padding-top:10px}
.wf .ax-stage[data-ch="1"] .sk-side a{display:flex;text-align:left;font-size:12.5px;padding:4px 10px;margin:0 6px}
.wf .ax-stage[data-ch="1"] .sk-side a::first-letter{font-size:inherit}
.wf .ax-stage[data-ch="1"] .sk-side .sk-badge{position:static;font-size:10px}
.wf .ax-stage[data-ch="1"] .sk-side .sk-ws{display:block;padding:4px 12px 10px;font-size:15px}
.wf .ax-stage[data-ch="1"] .sk-side .sk-sec{display:block;font-size:11.5px;padding:8px 12px 4px}
.wf .ax-stage[data-ch="1"] .sk-side .sk-app{display:flex}
.wf .ax-stage[data-ch="1"] .ax-split{grid-template-columns:minmax(0,1fr) 300px}
.wf .ax-stage[data-ch="1"] .ax-col-out .os{width:300px}
/* diagram mode: the context layer takes the whole stage */
.wf .ax-stage[data-ch="2"] .ax-split{grid-template-columns:0 minmax(0,1fr);gap:0}
.wf .ax-stage[data-ch="2"] .ax-col-slack{opacity:0;overflow:hidden;min-width:0}
.wf .ax-stage[data-ch="2"] .ax-col-out{opacity:1}
.wf .ax-stage[data-ch="2"] .ax-col-out .os{width:auto}
.wf .ax-stage[data-ch="2"] .sk-guide{display:none}
.os-map svg{display:block;width:100%;height:auto;overflow:visible}
.os-map .n rect{fill:#1f1b16;stroke:#3a352c;stroke-width:1.2;transition:fill .5s,stroke .5s}
.os-map .n text{fill:#a3977e;font:600 13px system-ui,sans-serif;transition:fill .5s}
.os-map .n .sub{font:400 11px system-ui,sans-serif;fill:#7d735f}
.os-map .n{opacity:.4;transition:opacity .5s}
.os-map .hd{fill:#7d735f;font:600 10.5px 'JetBrains Mono',monospace;letter-spacing:.12em}
.os-map .l{fill:none;stroke:#3a352c;stroke-width:1.4;stroke-dasharray:4 6;opacity:.5;transition:stroke .5s,opacity .5s}
.os-map .hub circle{fill:#1f1b16;stroke:#4a4238;stroke-width:1.4;transition:fill .5s,stroke .5s}
.os-map .hub .ring{fill:none;stroke-dasharray:3 6;stroke:#3a352c}
.os-map .hub text{fill:#a3977e;font:700 15px system-ui,sans-serif}
.os-map .hub .sub{font:400 11.5px system-ui,sans-serif;fill:#7d735f}
.os-map .hub{transform-origin:320px 190px}
.os-map[data-step="1"] .s,.os-map[data-step="2"] .s,.os-map[data-step="3"] .s{opacity:1}
.os-map[data-step="1"] .s rect,.os-map[data-step="2"] .s rect,.os-map[data-step="3"] .s rect{stroke:#d1503f;fill:#2a1d19}
.os-map[data-step="1"] .s text,.os-map[data-step="2"] .s text,.os-map[data-step="3"] .s text{fill:#f3ead6}
.os-map[data-step="1"] .li,.os-map[data-step="2"] .li,.os-map[data-step="3"] .li{stroke:#ff8a73;opacity:1;animation:wfFlow 1.2s linear infinite}
.os-map[data-step="2"] .hub circle:first-child,.os-map[data-step="3"] .hub circle:first-child{stroke:#d1503f;fill:#2a1d19}
.os-map[data-step="2"] .hub .ring,.os-map[data-step="3"] .hub .ring{stroke:#d1503f;animation:wfSpinS 14s linear infinite;transform-origin:320px 190px}
.os-map[data-step="2"] .hub text,.os-map[data-step="3"] .hub text{fill:#f3ead6}
.os-map[data-step="2"] .o0,.os-map[data-step="2"] .o1,.os-map[data-step="3"] .o{opacity:1}
.os-map[data-step="2"] .o0 rect,.os-map[data-step="2"] .o1 rect,.os-map[data-step="3"] .o rect{stroke:#7fd1a8;fill:#17261f}
.os-map[data-step="2"] .o0 text,.os-map[data-step="2"] .o1 text,.os-map[data-step="3"] .o text{fill:#f3ead6}
.os-map[data-step="2"] .lo0,.os-map[data-step="2"] .lo1,.os-map[data-step="3"] .lo{stroke:#7fd1a8;opacity:1;animation:wfFlow 1.2s linear infinite}
@keyframes wfSpinS{to{transform:rotate(360deg)}}
.os-map .os-note{margin-top:8px}

/* ───── "Do not see your workflow?" ───── */
.wf-ask{position:relative;display:grid;grid-template-columns:minmax(210px,1fr) minmax(0,1.7fr) minmax(0,1fr) auto;gap:12px;align-items:center;margin-top:28px;padding:16px 18px;border:1px solid #e7e2d8;border-radius:14px;background:#fff}
.wf-ask-l b{display:block;font:600 14px var(--ui);color:#17140f}
.wf-ask-l span{font:400 12.5px/1.45 var(--ui);color:#6b6456}
.wf-ask input[type=text],.wf-ask input[type=email]{width:100%;height:42px;padding:0 14px;border-radius:10px;border:1px solid #d9d2c2;background:#fbfaf7;color:#17140f;font:400 14px var(--ui);outline:0;transition:border-color .2s,box-shadow .2s}
.wf-ask input::placeholder{color:#a39a86}
.wf-ask input:focus{border-color:#a8392e;box-shadow:0 0 0 3px rgba(168,57,46,.14)}
.wf-ask .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.wf-ask .btn{height:42px}
.wf-note{grid-column:1/-1;font:400 12.5px var(--mono);color:#2e7d6b}
.wf-note:empty{display:none}.wf-note.err{color:#a8392e}

@media (max-width:1000px){.wf-ask{grid-template-columns:1fr 1fr}.wf-ask-l,.wf-ask .btn{grid-column:1/-1}}
@media (max-width:820px){.wf-grid{grid-template-columns:1fr}.wf-card{min-height:0}}
@media (max-width:560px){.wf-grid{grid-template-columns:1fr}.wf-card{min-height:0}.wf-ask{grid-template-columns:1fr}.wf-tabs button{padding:8px 12px}}
@media (prefers-reduced-motion:reduce){
  .wf-card,.wf-live.enter,.wf-live.leave,.ax-stage.flip .ax-split{animation:none;transition:none}
  .wf-g *,.wf-eyebrow i,.wf-sweep{animation:none!important}
  .wf-ink{transition:none}
}

@media (max-width:1180px){
  .wf .ax-stage[data-ch="2"] .ax-split{grid-template-columns:1fr}
  .wf .ax-stage[data-ch="2"] .ax-col-slack{display:none}
  .wf .ax-stage[data-ch="2"] .ax-col-out{display:flex}
}
@media (max-width:760px){.wf .ax-stage[data-ch="1"] .sk-body{grid-template-columns:0 minmax(0,1fr) 0}}

.wf .os-tabs span{padding:7px 6px;font-size:10.5px;letter-spacing:.03em}
.wf .ax-col-out .ax-cap small{display:none}

/* diagrams fit the pane: the drawing scales to the space available, so no shape is ever cut off */
.os-map-s{height:100%}
.os-map-s>.os-it{height:100%;margin:0}
.os-map{height:100%;display:flex;flex-direction:column;min-height:0}
.os-map svg{flex:1;min-height:0;width:100%;height:100%}
.os-map .os-note{flex:none;margin:6px 2px 0}
.wf .ax-stage[data-ch="2"] .os-body{padding:10px 14px;overflow:hidden}