/* Rostify — "Position plan". Builds on sick-leave, monthly, shift-requests, leave (and .rl-split / .ex-live-head patterns). */
.pp .rl-split{grid-template-columns:repeat(3,minmax(0,1fr))}
.pp .rl-split .mr-sn{width:30px}

/* A: types, inset, list */
.pp-first{grid-template-columns:minmax(0,.6fr) minmax(0,1.4fr)}
.pp-types{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.pp-type{display:inline-flex;align-items:center;height:32px;padding:0 12px;border-radius:8px;font-size:14px;font-weight:500}
.pp-type--pos{background:light-dark(#E4EFEE,#0C1719);color:var(--ink)}
.pp-type--sup{background:light-dark(#F8EBD3,#33291A);color:light-dark(#7A5212,#E9C27E)}
.pp-type--sb{background:light-dark(#E2ECF6,#162230);color:light-dark(#29527A,#9DB7D6)}
.pp-type--brf{background:light-dark(#EEE7F6,#231A33);color:light-dark(#5B3F86,#C6B2E6)}
.pp-type--brk{background:light-dark(#ECEEEF,#1A2426);color:var(--ink2)}
.pp-inset{margin-top:14px;width:min(100%,300px)}
.pp-list{align-self:start}

/* B */
.pp-place{background:var(--paper);border-top:1px solid var(--rule)}
.pp-key{display:inline-grid;place-items:center;height:24px;padding:0 8px;margin-right:4px;border-radius:6px;border:1px solid var(--rule2);
  background:var(--paper);font-family:var(--mono);font-size:11px;font-weight:600;color:var(--ink);white-space:nowrap}
.pp-steps{margin-top:6px}

/* C: one plan, two uses */
.pp-then{border-top:1px solid var(--rule)}
.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}
.pp-flow{display:grid;grid-template-columns:minmax(0,.9fr) 80px minmax(0,1.1fr);align-items:center;gap:0}
.pp-src{padding:24px;border-radius:16px;border:1px solid var(--rule2);background:var(--paper);box-shadow:0 40px 80px -56px light-dark(rgba(14,32,35,.45),rgba(0,0,0,.85))}
.pp-src-label{display:block;margin-bottom:16px;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--teal)}
.pp-bars{position:relative;display:grid;gap:8px}
.pp-bars i{position:relative;display:block;height:14px;border-radius:5px;background:light-dark(#E4EFEE,#1A2F31)}
.pp-bars i:nth-child(1){background:var(--ink)}
.pp-bars i:nth-child(2){background:light-dark(#E7E0F2,#2A2238)}
.pp-bars i:nth-child(n+4){background:light-dark(#F4D8D8,#3A2226)}
.pp-bars{min-height:120px}
.pp-bars i{margin-left:0}
.pp-arrows svg{display:block;width:80px;height:160px;fill:none;stroke:var(--teal);stroke-width:1.6;stroke-dasharray:4 4}
.pp-uses{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.pp-use{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:start;padding:20px 22px;border-radius:16px;border:1px solid var(--rule2);background:var(--paper)}
.pp-use-no{display:grid;place-items:center;width:40px;height:40px;border-radius:11px;background:var(--ink);color:light-dark(#FFFFFF,#0A1012);font-family:var(--mono);font-size:13px;font-weight:600}
.pp-use strong{display:block;margin-bottom:4px;font-weight:600;font-size:clamp(17px,1.4vw,19px);color:var(--ink)}
.pp-use div > span{display:block;font-size:15px;line-height:1.5;color:var(--ink2)}
.pp-use a{display:inline-block;margin-top:8px;font-size:14px;font-weight:500;color:var(--teal);text-decoration:none}
.pp-use a:hover{text-decoration:underline;text-underline-offset:3px}
.pp-then .mr-related{margin-top:clamp(40px,5vw,72px)}

/* final band: occupied curve */
.pp-occ{display:flex;align-items:flex-end;gap:2px;width:min(100%,380px);height:90px}
.pp-occ i{flex:1;min-height:6%;border-radius:2px 2px 0 0;background:#9FD3D2}

@media (max-width:1000px){
  .pp-first{grid-template-columns:minmax(0,1fr)}
  .pp-flow{grid-template-columns:minmax(0,1fr)}
  .pp-arrows{display:none}
  .pp-uses{margin-top:14px}
}
@media (max-width:640px){
  .pp .rl-split{grid-template-columns:minmax(0,1fr)}
  .pp .rl-split a + a{padding-left:0;border-left:0;border-top:1px solid var(--rule2)}
  .pp .sr-wide .sl-marker{display:none}
  .ex-live-head{grid-template-columns:minmax(0,1fr)}
}