/* Rostify — "Sick leave and replacement". Measures from docs/handoff-sick-leave.md, colours in the site's tokens. */
.sl{
  --ink:light-dark(#0E2023,#E6EFEE);
  --ink2:light-dark(#43555A,#A9BABA);
  --mute:light-dark(#56676B,#8B9FA0);
  --teal:light-dark(#2F6A70,#86C3C4);
  --teal-on:light-dark(#1F4F53,#E6EFEE);
  --paper:light-dark(#FFFFFF,#10191B);
  --rule:light-dark(rgba(14,32,35,.12),rgba(230,239,238,.1));
  --rule2:light-dark(rgba(14,32,35,.22),rgba(230,239,238,.2));
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  color:var(--ink);
}
.sl-wrap{max-width:1320px;margin:0 auto}

/* 01 intro */
.sl-intro{padding:clamp(48px,7vw,104px) clamp(16px,4vw,56px) clamp(40px,5vw,72px)}
.sl-crumbs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px;font-size:13.5px;color:var(--mute)}
.sl-crumbs a{color:inherit}
.sl-crumbs a:hover{color:var(--teal);text-decoration:underline;text-underline-offset:3px}
.sl-crumbs [aria-current]{color:var(--ink)}
.sl-head{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:clamp(20px,4vw,64px);align-items:end;margin-bottom:clamp(32px,4.5vw,56px)}
.sl-chapter{display:flex;align-items:center;gap:6px;margin-bottom:26px}
.sl-chapter svg{display:block;flex:none;width:34px;height:34px}
.sl-chapter .t1{fill:light-dark(#A0D3D5,#509093)}.sl-chapter .t2{fill:light-dark(#87C1C4,#609FA2)}.sl-chapter .t3{fill:#6FAFB2}
.sl-chapter .t4{fill:light-dark(#5D9C9F,#8CC4C6)}.sl-chapter .t5{fill:light-dark(#4A8A8D,#A8D9DB)}.sl-chapter .on{fill:var(--teal-on)}
.sl-chapter div{display:grid;gap:5px;line-height:1}
.sl-no{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--mute)}
.sl-name{font-weight:600;font-size:20px;letter-spacing:-.01em;color:var(--teal)}
.sl h1{margin:0;font-stretch:80%;font-weight:700;font-size:clamp(44px,6vw,88px);line-height:.94;letter-spacing:-.018em;text-wrap:balance}
.sl-lede{margin:0;max-width:54ch;font-size:clamp(17px,1.35vw,19.5px);line-height:1.58;color:var(--ink2);text-wrap:pretty}

.sl-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:clamp(24px,4vw,56px);align-items:center}
.sl-steps ol{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.sl-steps li{display:flex;gap:12px;font-size:16px;line-height:1.45;color:var(--ink2)}
.sl-steps strong{font-weight:700;color:var(--ink)}
.sl-num{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--ink);color:light-dark(#FFFFFF,#0A1012);
  font-family:var(--mono);font-size:11.5px;font-weight:600;line-height:1}

/* figures */
.sl-fig{margin:0;overflow:hidden;background:var(--paper);border:1px solid var(--rule)}
.sl-fig--small{max-width:640px;border-radius:12px;box-shadow:0 40px 80px -40px light-dark(rgba(14,32,35,.35),rgba(0,0,0,.8))}
.sl-fig--large{border-radius:16px;box-shadow:0 50px 100px -60px light-dark(rgba(14,32,35,.5),rgba(0,0,0,.9))}
.sl-shot{position:relative;width:100%}
.sl-shot img{display:block;width:100%;height:auto}
.sl-marker{position:absolute;transform:translate(-50%,-50%);display:grid;place-items:center;width:clamp(18px,1.8vw,26px);height:clamp(18px,1.8vw,26px);
  border-radius:50%;background:#0E2023;color:#FFFFFF;font-family:var(--mono);font-size:clamp(10px,.85vw,12px);font-weight:600;line-height:1;
  box-shadow:0 0 0 3px rgba(255,255,255,.92),0 8px 18px -6px rgba(0,0,0,.5)}
.sl-missing{position:absolute;inset:0;display:grid;place-items:center;padding:12px;text-align:center;
  background:repeating-linear-gradient(135deg,transparent 0 10px,light-dark(rgba(14,32,35,.035),rgba(230,239,238,.035)) 10px 20px);
  font-family:var(--mono);font-size:11.5px;color:var(--mute)}
.sl-fig figcaption{display:flex;flex-wrap:wrap;gap:6px 24px;justify-content:space-between;align-items:baseline;padding:13px 18px;
  border-top:1px solid var(--rule);font-family:var(--mono);font-size:11.5px;letter-spacing:.02em;color:var(--mute)}
.sl-fig figcaption b{font-weight:600;color:var(--ink)}

/* 02 screenshots */
.sl-shots{padding:0 clamp(16px,4vw,56px) clamp(72px,9vw,128px)}
.sl-shots-grid{max-width:1520px;margin:0 auto;display:grid;gap:clamp(20px,2.5vw,32px)}
.sl-related{max-width:1320px;margin:clamp(48px,6vw,80px) auto 0;border-top:1px solid var(--rule2)}
.sl-related a{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--rule);color:inherit;text-decoration:none}
.sl-rno,.sl-arrow{font-family:var(--mono);font-size:12px;font-weight:600}
.sl-rno{color:var(--mute)}
.sl-rtext{font-size:clamp(15px,1.25vw,17px);line-height:1.45;color:var(--ink2)}
.sl-rtext strong{font-weight:700;color:var(--ink);transition:color .2s}
.sl-arrow{transition:color .2s,transform .2s}
.sl-related a:hover{text-decoration:none}
.sl-related a:hover strong,.sl-related a:hover .sl-arrow{color:var(--teal)}
.sl-related a:hover .sl-arrow{transform:translateX(3px)}

/* 03 next step (dark in both schemes) */
.sl-next{background:#0E2023;color:#F2F7F6;padding:clamp(64px,8vw,120px) clamp(16px,4vw,56px)}
.sl-next-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:clamp(24px,4vw,64px);align-items:end}
.sl-label{margin:0 0 18px;font-stretch:125%;font-weight:600;font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:#9FD3D2}
.sl-next h2{margin:0;font-stretch:78%;font-weight:700;font-size:clamp(40px,5.6vw,84px);line-height:.92;letter-spacing:-.02em;text-wrap:balance}
.sl-next-body{display:grid;gap:24px;justify-items:start}
.sl-next-body p{margin:0;max-width:48ch;font-size:clamp(16px,1.3vw,18.5px);line-height:1.55;color:#D2E6E4}
.sl-btn{display:inline-flex;align-items:center;gap:10px;height:50px;padding:0 24px;border-radius:999px;background:#F4FAFA;color:#0E2023!important;
  font-size:15.5px;font-weight:600;text-decoration:none!important;transition:background .2s}
.sl-btn:hover{background:#BDDEDC}