/* Rostify — "OPS schedule". Builds on sick-leave, monthly, shift-requests, leave, positionplan, patterns, optimal. */
.ops .ops-split{grid-template-columns:repeat(4,minmax(0,1fr))}

/* A: three sources -> OPS schedule */
.ops-sources{border-top:1px solid var(--rule)}
.ops-flow{display:grid;grid-template-columns:minmax(0,1fr) 80px minmax(0,.95fr);align-items:center}
.ops-arrows svg{height:240px}
.ops-in .pp-use a{font-size:13.5px}
.ops-target{padding:24px;border-radius:18px;background:light-dark(#0E2023,#E6EFEE);box-shadow:0 50px 100px -56px light-dark(rgba(14,32,35,.55),rgba(0,0,0,.9))}
.ops-target .pp-src-label{color:#9FD3D2;margin-bottom:18px}
.ops-mini{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
.ops-mini i{display:grid;place-items:center;height:28px;border-radius:6px;font-style:normal;font-family:var(--mono);font-size:11px;font-weight:600;
  color:light-dark(#DDE9E8,#26393B);background:light-dark(rgba(230,239,238,.10),rgba(14,32,35,.08))}
.ops-mini i.sup{background:light-dark(#E6EFEE,#0E2023);color:light-dark(#0E2023,#E6EFEE)}
.ops-mini i.sb{background:repeating-linear-gradient(135deg,rgba(233,194,126,.28) 0 3px,transparent 3px 7px)}
.ops-mini i.p{background:repeating-linear-gradient(135deg,rgba(159,211,210,.22) 0 3px,transparent 3px 7px)}
.ops-mini b{position:absolute;left:-6px;right:-6px;top:calc(40% + 1px);height:2px;background:#D946EF;box-shadow:0 0 0 3px rgba(217,70,239,.16)}

/* B */
.ops-steps{grid-template-columns:repeat(4,minmax(0,1fr))}

/* C: automatic */
.ops-auto{border-top:1px solid var(--rule)}
.ops-auto-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center}
.ops-rules{display:grid;gap:16px}
.ops-toolbar .sl-shot{background:#7FB5B5}
.ops-rulebox{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:22px;align-items:center;padding:22px 24px;border-radius:16px;
  border:1px solid var(--rule2);background:var(--paper)}
.ops-rule-in{display:grid;place-items:center;width:64px;height:64px;border-radius:14px;background:var(--ink);color:light-dark(#FFFFFF,#0A1012);
  font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.06em}
.ops-rulebox ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ops-rulebox li{display:flex;gap:12px;align-items:center;font-size:16px;font-weight:500;color:var(--ink)}
.ops-tick{flex:none;width:18px;height:18px;border-radius:50%;background:var(--teal);position:relative}
.ops-tick::after{content:"";position:absolute;left:6px;top:3.5px;width:4px;height:8px;border:solid light-dark(#FFFFFF,#0A1012);border-width:0 2px 2px 0;transform:rotate(45deg)}

/* D: display and record */
.ops-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.4vw,32px)}
.ops-card{display:flex;flex-direction:column;padding:clamp(20px,2.4vw,32px);border-radius:20px;border:1px solid var(--rule2);background:var(--paper)}
.ops-card h3{margin:26px 0 8px;font-stretch:84%;font-weight:700;font-size:clamp(24px,2.3vw,32px);line-height:1.02;letter-spacing:-.01em;color:var(--ink)}
.ops-card p{margin:0;max-width:46ch;font-size:16px;line-height:1.55;color:var(--ink2)}
.ops-screen{position:relative;display:grid;justify-items:center;padding:6px 0 0}
.ops-bezel{width:100%;padding:10px;border-radius:14px;background:#0E1618;box-shadow:0 40px 70px -46px rgba(0,0,0,.7)}
.ops-bezel img{display:block;width:100%;height:auto;border-radius:5px}
.ops-stand{width:22%;height:14px;background:linear-gradient(light-dark(#C9D3D4,#2A3638),light-dark(#DDE4E5,#1C2628));clip-path:polygon(18% 0,82% 0,100% 100%,0 100%)}
.ops-btn{position:absolute;top:-4px;right:-6px;display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:10px;background:var(--paper);
  border:1px solid var(--rule2);box-shadow:0 12px 24px -12px rgba(14,32,35,.4);font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.06em;color:var(--ink)}
.ops-btn i{width:8px;height:8px;border-radius:50%;background:#E9A23B}
.ops-rec{display:grid;gap:10px;padding:18px 18px 16px;border-radius:14px;background:light-dark(#F3F7F7,#0C1517);border:1px solid var(--rule)}
.ops-rec-head{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.08em;color:var(--ink)}
.ops-rec-head em{margin-left:auto;font-style:normal;font-weight:500;letter-spacing:.04em;color:var(--mute)}
.ops-rec-dot{width:9px;height:9px;border-radius:50%;background:#D5484F;box-shadow:0 0 0 4px rgba(213,72,79,.14)}
.ops-rec-row{display:grid;grid-template-columns:48px minmax(0,1fr);gap:10px;align-items:center}
.ops-rec-row b{font-family:var(--mono);font-size:10.5px;font-weight:600;color:var(--ink2)}
.ops-rec-track{position:relative;height:18px;border-radius:5px;background:light-dark(#E6EDED,#132022)}
.ops-rec-track i{position:absolute;top:3px;bottom:3px;border-radius:3px;background:var(--teal);opacity:.85}
.ops-rec-sum{display:grid;grid-template-columns:48px repeat(3,minmax(0,1fr));gap:10px;margin-top:4px;padding-top:10px;border-top:1px dashed var(--rule2)}
.ops-rec-sum i{height:6px;border-radius:3px;background:light-dark(#C9D7D8,#2A3A3C)}
.ops-rec-sum i:first-child{background:none}
.ops-display .mr-related{margin-top:clamp(40px,5vw,72px)}

/* final band */
.ops-final-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;width:min(100%,300px)}
.ops-final-grid i{display:grid;place-items:center;height:22px;border-radius:4px;font-style:normal;font-family:var(--mono);font-size:9px;font-weight:600;
  color:rgba(255,255,255,.6);background:rgba(159,211,210,.14)}
.ops-final-grid i.on{background:#9FD3D2;color:#0A1012}

@media (max-width:1000px){
  .ops .ops-split{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ops-flow{grid-template-columns:minmax(0,1fr)}
  .ops-arrows{display:none}
  .ops-target{margin-top:14px}
  .ops-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ops-auto-grid{grid-template-columns:minmax(0,1fr)}
  .ops-duo{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .ops .ops-split{grid-template-columns:minmax(0,1fr)}
  .ops .ops-split a + a{padding-left:0;border-left:0;border-top:1px solid var(--rule2)}
  .ops-steps{grid-template-columns:minmax(0,1fr)}
  .ops-rulebox{grid-template-columns:minmax(0,1fr)}
  .ops-toolbar .sl-marker{display:none}
}