/* Rostify — "Exchange". Builds on sick-leave, monthly, shift-requests and leave CSS. */
.ex{--mine:light-dark(#EAF6E0,#1E3318);--mine-b:light-dark(#8CC56A,#6FA84E);--partner:light-dark(#EAF0F8,#162230);--partner-b:light-dark(#9DB7D6,#5F7FA6)}

/* hero: the swap in four steps */
.ex-flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--rule2);border-bottom:1px solid var(--rule2)}
.ex-step{position:relative;display:grid;gap:4px;padding:18px clamp(12px,1.6vw,24px) 20px 0}
.ex-step + .ex-step{padding-left:clamp(12px,1.6vw,24px);border-left:1px solid var(--rule2)}
.ex-step-no{font-family:var(--mono);font-size:11px;font-weight:600;color:var(--teal)}
.ex-step strong{font-weight:600;font-size:clamp(17px,1.5vw,20px);letter-spacing:-.01em;color:var(--ink)}
.ex-step span:last-child{font-size:14.5px;line-height:1.45;color:var(--ink2)}
.ex-step + .ex-step::before{content:'→';position:absolute;left:-9px;top:18px;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;
  background:var(--bg,light-dark(#EEF0F1,#0A1012));font-size:11px;color:var(--teal)}
.ex-step--3 strong{color:var(--teal)}

/* keys echo the grid legend */
.ex-key{display:inline-grid;place-items:center;min-width:44px;height:24px;padding:0 8px;margin-right:4px;border-radius:6px;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.02em}
.ex-key--1{background:var(--mine);border:1.5px solid var(--mine-b);color:var(--ink)}
.ex-key--2{background:var(--paper);border:1.5px solid var(--partner-b);color:var(--ink)}
.ex-key--3{background:light-dark(#ECEEF1,#1A2426);color:var(--mute)}
.ex-key--pl1{background:light-dark(#FBE4EA,#3A1E26);color:light-dark(#A3354F,#F2A8BA)}
.ex-key--pl2{background:var(--mine);color:light-dark(#3C6E1F,#A9DB8A)}
.ex-key--live1{background:light-dark(#FBE4EA,#3A1E26);border:1.5px solid light-dark(#E8A1AE,#7A3442);color:light-dark(#A3354F,#F2A8BA)}
.ex-key--live2{background:light-dark(#FBE4EA,#3A1E26);color:light-dark(#A3354F,#F2A8BA);font-size:10px;letter-spacing:.06em;text-transform:uppercase}
.ex-steps{margin-top:6px}

/* B: confirm */
.ex-confirm{background:var(--paper);border-top:1px solid var(--rule)}
.ex-check{grid-template-columns:auto minmax(0,1fr)}
.ex-shield{display:grid;place-items:center;width:40px;height:40px;border-radius:11px;background:var(--paper)}
.ex-shield svg{width:22px;height:22px;fill:none;stroke:var(--teal);stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.ex-check .mr-kicker{margin-bottom:6px}
.ex-check p:not(.mr-kicker){margin:0;font-size:15.5px;line-height:1.5;color:var(--ink2)}
.ex-dialog{max-width:680px;justify-self:end}

/* C: live */
.ex-live{border-top:1px solid var(--rule)}
.ex-pulse{position:relative;border-radius:50%;background:#D2404D}
.ex-pulse::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:2px solid #D2404D;animation:ex-pulse 2s ease-out infinite}
@keyframes ex-pulse{0%{opacity:.8;transform:scale(.6)}100%{opacity:0;transform:scale(1.6)}}

.ex-live-head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(20px,3.4vw,56px);align-items:end;margin-bottom:clamp(32px,4vw,56px)}
.ex-live-head h2{margin:0;font-stretch:80%;font-weight:700;font-size:clamp(36px,4.6vw,68px);line-height:.95;letter-spacing:-.018em;text-wrap:balance}
.ex-planner{grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr)}
.ex-plfig{max-width:860px;justify-self:end}
.ex-sup{margin-top:clamp(48px,6vw,88px);display:grid;gap:clamp(18px,2vw,28px)}
.ex-sup-text{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:baseline}
.ex-sup-text .lv-p{max-width:60ch}

/* final band: the swap itself */
.ex-swap{display:flex;align-items:center;gap:14px}
.ex-swap svg{width:34px;height:34px;fill:none;stroke:#9FD3D2;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ex-sw{display:grid;place-items:center;min-width:76px;height:60px;border-radius:12px;font-family:var(--mono);font-size:20px;font-weight:600}
.ex-sw--a{background:#DCF0CC;color:#2F5E16;border:2px solid #8CC56A}
.ex-sw--b{background:#E3ECF7;color:#1F3B5C;border:2px solid #9DB7D6}

@media (max-width:1000px){
  .ex-flow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ex-step:nth-child(3){padding-left:0;border-left:0;border-top:1px solid var(--rule2)}
  .ex-step:nth-child(3)::before{display:none}
  .ex-step:nth-child(4){border-top:1px solid var(--rule2)}
  .ex-dialog{justify-self:stretch;max-width:none}
  .ex-planner{grid-template-columns:minmax(0,1fr)}
  .ex-plfig{justify-self:stretch;max-width:none}
}
@media (max-width:640px){
  .ex-flow{grid-template-columns:minmax(0,1fr)}
  .ex-step + .ex-step{padding-left:0;border-left:0;border-top:1px solid var(--rule2)}
  .ex-step + .ex-step::before{display:none}
  .ex .sr-wide .sl-marker{display:none}
  .ex-live-head,.ex-sup-text{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){.ex-pulse::after{animation:none}}