/* Rostify — "Optimal pattern calculation". Builds on sick-leave, monthly, shift-requests, leave, positionplan, patterns. */
.op-settings{border-top:1px solid var(--rule)}
.op-first{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:center}

/* A: input + options panel */
.op-panel{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:14px;padding:14px;border-radius:20px;border:1px solid var(--rule2);
  background:light-dark(#F3F7F7,#0C1517);box-shadow:0 50px 100px -60px light-dark(rgba(14,32,35,.45),rgba(0,0,0,.9))}
.op-src{display:flex;flex-direction:column;gap:4px;padding:20px;border-radius:14px;border:1.5px solid light-dark(#7FB9BB,#3F7C80);
  background:var(--paper);color:var(--ink);text-decoration:none}
.op-src-label,.op-opt-label{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--teal)}
.op-src strong{margin-top:8px;font-size:19px;font-weight:600}
.op-src-dates{font-family:var(--mono);font-size:12px;color:var(--ink2)}
.op-src-occ{flex:1;display:flex;align-items:flex-end;gap:1px;min-height:56px;max-height:96px;margin:auto 0 12px;padding-top:18px}
.op-first h2{hyphens:auto;overflow-wrap:break-word}
.op-src-occ i{flex:1;min-height:6%;background:light-dark(#2F6A70,#86C3C4);border-radius:1px 1px 0 0}
.op-src-meta{margin-top:auto;font-family:var(--mono);font-size:11px;color:var(--ink2)}
.op-src:hover .op-src-meta span{color:var(--teal)}
.op-opts{display:grid;gap:16px;align-content:start;padding:20px;border-radius:14px;background:var(--paper);border:1px solid var(--rule2)}
.op-opt{display:grid;gap:8px}
.op-seg{display:flex;flex-wrap:wrap;gap:3px;padding:3px;border-radius:10px;background:light-dark(#EDF2F2,#131E20);width:max-content;max-width:100%}
.op-seg span{padding:7px 12px;border-radius:7px;font-size:13.5px;font-weight:500;color:var(--ink2);white-space:nowrap}
.op-seg span.on{background:var(--paper);color:var(--ink);box-shadow:0 1px 0 light-dark(rgba(14,32,35,.08),rgba(0,0,0,.4)),0 0 0 1px var(--rule2)}
.op-example{display:flex;gap:9px;align-items:center;margin:4px 0 0;padding-top:14px;border-top:1px solid var(--rule);font-family:var(--mono);font-size:11px;line-height:1.45;color:var(--ink2)}
.op-check{flex:none;width:16px;height:16px;border-radius:50%;background:#3E9B6C;position:relative}
.op-check::after{content:"";position:absolute;left:5px;top:3px;width:4px;height:7px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}

/* B: result */
.op-result{background:var(--paper);border-top:1px solid var(--rule)}
.op-steps{list-style:none;margin:clamp(22px,2.4vw,32px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 28px}
.op-steps li{display:flex;gap:11px;align-items:flex-start;font-size:15px;line-height:1.45;color:var(--ink2)}
.op-steps .sl-num{flex:none}

/* C: figures */
.op-figures{border-top:1px solid var(--rule)}
.op-nums{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,72px);align-items:end}
.op-stats{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--rule2)}
.op-stats div{padding:20px 16px 20px 0;border-bottom:1px solid var(--rule)}
.op-stats dt{font-stretch:80%;font-weight:700;font-size:clamp(34px,3.6vw,52px);line-height:1;font-variant-numeric:tabular-nums;color:var(--ink)}
.op-stats dd{margin:8px 0 0;font-size:14px;line-height:1.4;color:var(--ink2)}
.op-bars{display:grid;gap:18px;padding:26px 24px 20px;border-radius:16px;border:1px solid var(--rule2);background:var(--paper)}
.op-bar{position:relative;display:grid;grid-template-columns:1fr auto;gap:8px;padding-bottom:22px}
.op-bar-l{font-size:15px;font-weight:600;color:var(--ink)}
.op-bar-v{font-family:var(--mono);font-size:14px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.op-bar i{position:absolute;left:0;bottom:0;height:12px;border-radius:6px;background:light-dark(#C9D7D8,#2A3A3C)}
.op-bar--opt i{background:var(--teal)}
.op-bar--opt .op-bar-v{color:var(--teal)}
.op-bar b{position:absolute;bottom:-4px;width:0;height:20px;border-left:1.5px dashed var(--ink2)}
.op-bar-unit{font-family:var(--mono);font-size:11px;color:var(--ink2)}
.op-foot{margin:16px 0 0;font-family:var(--mono);font-size:11px;line-height:1.5;color:var(--ink2)}

/* final band */
.op-morph{display:flex;align-items:center;gap:18px;width:min(100%,420px)}
.op-morph .pp-occ{width:140px;height:64px;flex:none}
.op-arrow{font-size:22px;color:#9FD3D2}
.op-strip{flex:1;width:auto}

@media (max-width:1000px){
  .op-first{grid-template-columns:minmax(0,1fr)}
  .op-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .op-nums{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .op-panel{grid-template-columns:minmax(0,1fr);padding:10px}
  .op-steps{grid-template-columns:minmax(0,1fr)}
  .op-morph .pp-occ{width:96px}
}