/* Rostify — "Shift patterns". Builds on sick-leave, monthly, shift-requests, leave, positionplan. */
.sp-week{background:var(--paper);border-top:1px solid var(--rule)}

/* B: list + validity timeline */
.sp-month{border-top:1px solid var(--rule)}
.sp-first{grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);align-items:start}
.sp-month-side{display:grid;gap:clamp(20px,2.4vw,32px);min-width:0}
.sp-tl{margin:0;padding:22px 24px 18px;border-radius:16px;border:1px solid var(--rule2);background:var(--paper)}
.sp-tl figcaption{margin-bottom:16px;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--teal)}
.sp-tl-bars{position:relative;list-style:none;margin:0;padding:0;height:44px}
.sp-tl-seg{position:absolute;top:0;bottom:0;display:flex;align-items:center;padding:0 10px;border-radius:7px;overflow:hidden;
  background:light-dark(#E4EFEE,#132426);box-shadow:inset 0 0 0 1px light-dark(#C9DFDD,#23393B);margin-left:2px}
.sp-tl-seg:first-child{margin-left:0}
.sp-tl-seg:nth-child(odd){background:light-dark(#D6E8E6,#18302F)}
.sp-tl-name{font-family:var(--mono);font-size:11px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-tl-seg--one{z-index:2;min-width:22px;justify-content:center;padding:0;margin-left:0;background:var(--ink)!important;box-shadow:0 0 0 3px var(--paper)}
.sp-tl-seg--one .sp-tl-name{color:light-dark(#FFFFFF,#0A1012);overflow:visible}
.sp-tl-seg--one + .sp-tl-seg{padding-left:18px}
.sp-tl-ticks{position:relative;height:20px;margin-top:8px;border-top:1px solid var(--rule2)}
.sp-tl-ticks span{position:absolute;top:6px;font-family:var(--mono);font-size:10px;color:var(--ink3,var(--ink2))}
.sp-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* C: pattern -> three uses */
.sp-uses-text{margin:18px 0 0;max-width:62ch}
.sp-flow{grid-template-columns:minmax(0,.85fr) 80px minmax(0,1.15fr)}
.sp-flow .pp-arrows svg{height:240px}
.sp-mini{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.sp-mini b{font-family:var(--mono);font-size:10px;font-weight:600;color:var(--ink2);padding-left:4px}
.sp-mini i{display:flex;align-items:center;height:30px;padding:0 6px;border-radius:6px;font-style:normal;font-family:var(--mono);font-size:11px;font-weight:600;
  color:var(--ink);background:light-dark(#E4EFEE,#132426);box-shadow:inset 0 0 0 1px light-dark(#B9D6D3,#23393B)}

/* final band: week strip */
.sp-strip{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px;width:min(100%,340px)}
.sp-strip i{display:grid;place-items:center;height:16px;border-radius:3px;font-style:normal;font-family:var(--mono);font-size:8px;font-weight:600;
  color:rgba(255,255,255,.55);background:rgba(159,211,210,.16)}
.sp-strip i.on{background:#9FD3D2;color:#0A1012}

@media (max-width:1000px){
  .sp-first{grid-template-columns:minmax(0,1fr)}
  .sp-flow{grid-template-columns:minmax(0,1fr)}
  .sp-src{max-width:460px}
}
@media (max-width:640px){
  .sp-tl{padding:18px 16px 14px}
  .sp-tl-name{display:none}
  .sp-tl-seg--one .sp-tl-name{display:block}
  .sp-mini{gap:4px}
  .sp-mini i{height:26px;padding:0 4px;font-size:10px}
}