.roster-showcase { --roster-ease:cubic-bezier(.22,1,.36,1); padding:64px 0; position:relative; isolation:isolate; overflow:clip; background:#f8f7fe; color:#101936; }
.roster-showcase::before { content:''; position:absolute; z-index:-1; width:650px; height:520px; right:-530px; top:-140px; border-radius:50%; background:#d6c9f7; opacity:.15; pointer-events:none; }
.roster-top { display:grid; grid-template-columns:1.35fr 1fr; gap:42px; align-items:center; }
.roster-bottom { display:grid; grid-template-columns:1.45fr 1fr; gap:24px; margin-top:32px; align-items:stretch; }
.roster-panel { margin:0; min-width:0; background:#fff; border:1px solid #e5eaf6; border-radius:18px; box-shadow:0 8px 30px rgb(30 60 120 / 5%); overflow:hidden; }
.roster-panel-head { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 18px; border-bottom:1px solid #eef1f8; background:#fdfdff; }
.roster-panel-head > div { display:flex; align-items:center; gap:12px; min-width:0; }
.roster-panel-head h3 { font-size:12px; line-height:1.5; letter-spacing:.025em; text-transform:uppercase; margin:0; color:#111b3c; }
.roster-icon { display:grid; place-items:center; width:38px; height:38px; border-radius:50%; flex-shrink:0; background:#edf3ff; color:#065dff; }
.roster-icon svg { width:22px; height:22px; }
.roster-badge { display:flex; align-items:center; gap:8px; padding:7px 11px; border-radius:20px; background:#f0f4ff; color:#475c8d; font-size:9px; text-transform:uppercase; letter-spacing:.08em; white-space:nowrap; }
.roster-published { background:#e7f8f3; color:#087b6c; font-weight:600; }
.roster-published i { width:7px; height:7px; background:#05b5a0; border-radius:50%; }
.roster-week-body { padding:18px 20px 8px; }
.roster-days { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:8px; margin-bottom:20px; }
.roster-day { display:grid; justify-items:center; gap:7px; padding:13px 4px; border:1px solid #e8effd; border-radius:10px; background:#edf3ff; color:#075af2; font-size:13px; }
.roster-day strong { font-weight:600; }
.roster-day.is-selected { color:#fff; background:#2568fa; border-color:#2568fa; box-shadow:0 5px 10px rgb(32 97 225 / 20%); }
.roster-day.is-off { color:#5d6b89; background:#f4f5f9; border-color:#edf0f6; }
.roster-day { font-family:inherit; cursor:pointer; transition:background-color 200ms var(--roster-ease),color 200ms var(--roster-ease),border-color 200ms ease,box-shadow 200ms ease; }
.roster-day.is-selected.is-off { color:#fff; background:#2568fa; border-color:#2568fa; }
.roster-day:focus-visible { outline:3px solid #6a91fb; outline-offset:3px; }
.roster-day-context { margin:22px 0 -18px; color:#64749a; font-size:11px; letter-spacing:.04em; }
.roster-showcase [hidden] { display:none !important; }
.roster-off-shift { min-height:172px; display:grid; place-items:center; color:#64749a; font-size:14px; text-align:center; }
.roster-off-message { position:absolute; inset:45% 20px auto; text-align:center; color:#64749a; font-size:14px; }
.roster-is-off .roster-gauge-value strong { font-size:clamp(30px,3vw,44px); letter-spacing:-.025em; }
.roster-is-off .roster-gauge-value > span { font-size:13px; padding-inline:20px; }
.roster-data-tooltip { position:absolute; z-index:3; max-width:220px; padding:8px 11px; border:1px solid #e0e7f4; border-radius:8px; background:#fff; color:#172441; box-shadow:0 4px 12px rgb(30 60 120 / 10%); font-size:11px; pointer-events:none; }
@media (hover:hover) and (prefers-reduced-motion:no-preference) { .roster-day:hover { translate:0 -2px; border-color:#abc2fa; } .roster-day { transition:translate 200ms var(--roster-ease),scale 120ms ease,background-color 200ms var(--roster-ease),color 200ms ease,box-shadow 200ms ease; } .roster-day:active { scale:.98; } }
.roster-shift { --shift-color:#1266ff; --shift-soft:#edf3ff; display:flex; align-items:center; gap:13px; border-top:1px solid #e9edf7; padding:22px 0; }
.roster-shift-b { --shift-color:#7543ef; --shift-soft:#f3eeff; }
.roster-shift-dot { width:13px; height:13px; border-radius:50%; flex-shrink:0; background:var(--shift-color); box-shadow:0 0 0 7px var(--shift-soft); margin-inline:7px; align-self:flex-start; margin-top:6px; }
.roster-shift-copy { flex:1; min-width:0; }
.roster-shift-copy h4 { margin:0 0 10px; font-size:15px; color:#111b3c; }
.roster-shift-meta { display:flex; gap:14px; flex-wrap:wrap; font-size:12px; color:#53668c; }
.roster-shift-meta span { display:flex; align-items:center; gap:7px; white-space:nowrap; }
.roster-shift-meta span + span { border-left:1px solid #e1e7f4; padding-left:14px; }
.roster-shift-meta svg { width:17px; height:17px; }
.roster-people { display:flex; align-items:center; gap:8px; white-space:nowrap; font-size:12px; font-weight:600; padding:10px 12px; color:#17244b; background:var(--shift-soft); border-radius:24px; }
.roster-people svg { width:19px; height:19px; color:var(--shift-color); }
.roster-chevron { font-size:24px; color:#53668c; }
.roster-copy h2 { font-size:clamp(30px,3.15vw,48px); line-height:1.09; letter-spacing:-.045em; margin:16px 0; color:#0b1430; }
.roster-copy h2 > span { color:#0865ff; }
.roster-copy > p { margin:0; color:#53678b; font-size:15px; line-height:1.7; }
.roster-copy ul { list-style:none; padding:0; margin:20px 0 0; display:grid; gap:13px; }
.roster-copy li { display:flex; gap:12px; align-items:center; font-size:13px; line-height:1.6; color:#4b6087; }
.roster-copy li > span { display:grid; place-items:center; flex-shrink:0; width:25px; height:25px; border:5px solid #e2edff; border-radius:50%; background:#1474ff; color:#fff; }
.roster-copy li svg { width:12px; height:12px; }
.roster-chart-body { position:relative; padding:46px 8px 0; }
.roster-chart-svg { display:block; width:100%; height:auto; overflow:visible; }
.roster-chart-grid path { stroke:#e0e6f4; stroke-width:1; stroke-dasharray:2 3; }
.roster-chart-grid text { fill:#627298; font-size:11px; font-family:inherit; }
.roster-chart-point { fill:#1689ff; stroke:#fff; stroke-width:1.5; outline:none; }
.roster-chart-point:focus, .roster-chart-point:hover { stroke:#1d4ee9; stroke-width:3; }
.roster-chart-stat { position:absolute; top:10px; right:20px; display:grid; justify-items:center; gap:1px; padding:7px 10px; border:1px solid #e3e9f8; border-radius:11px; background:white; box-shadow:0 5px 12px rgb(30 60 120 / 7%); }
.roster-chart-stat strong { font-size:26px; line-height:1.1; letter-spacing:-.035em; }
.roster-chart-stat span { font-size:10px; color:#586c95; }
.roster-chart > figcaption { display:flex; align-items:center; gap:10px; padding:10px 20px 20px; font-size:11px; color:#64749a; line-height:1.6; }
.roster-chart > figcaption svg { width:22px; height:22px; flex-shrink:0; }
.roster-gauge-body { display:flex; flex-direction:column; align-items:center; padding:20px 24px 24px; }
.roster-gauge-visual { position:relative; width:min(100%,360px); margin:0 auto 10px; }
.roster-gauge-visual > svg { display:block; width:100%; height:auto; }
.roster-gauge-value { position:absolute; bottom:0; left:0; width:100%; text-align:center; display:grid; gap:0; }
.roster-gauge-value strong { font-size:clamp(46px,5vw,74px); line-height:1.05; letter-spacing:-.055em; color:#0d1434; font-variant-numeric:tabular-nums; }
.roster-gauge-value > span { font-size:20px; color:#586994; font-weight:600; }
.roster-gauge-people { margin:6px 0 10px; }
.roster-gauge figcaption { text-align:center; font-size:12px; line-height:1.6; color:#617399; }
.roster-motion-ready .roster-motion-item { opacity:0; }
.roster-motion-ready.roster-motion-in .roster-motion-item { animation:roster-reveal 450ms var(--roster-ease) var(--roster-delay,0ms) both; }
@keyframes roster-reveal { from { opacity:0; transform:translateY(var(--roster-distance,12px)) scale(var(--roster-scale,1)); } to { opacity:1; transform:translateY(0) scale(1); } }
.roster-motion-ready .roster-chart-line { stroke-dasharray:1; stroke-dashoffset:1; }
.roster-motion-in .roster-chart-line { animation:roster-line-draw 900ms var(--roster-ease) 650ms both; }
@keyframes roster-line-draw { to { stroke-dashoffset:0; } }
.roster-motion-ready .roster-gauge-arc { stroke-dashoffset:94; }
.roster-motion-in .roster-gauge-arc { animation:roster-line-draw 1000ms var(--roster-ease) 500ms both; }
.roster-motion-in .roster-day.is-selected { animation:roster-reveal 350ms var(--roster-ease) 220ms both, roster-active 300ms ease 700ms both; }
@keyframes roster-active { from { color:#075af2; background:#edf3ff; box-shadow:none; } to { color:#fff; background:#2568fa; box-shadow:0 5px 10px rgb(32 97 225 / 20%); } }
@media (hover:hover) and (prefers-reduced-motion:no-preference) { .roster-panel { transition:box-shadow 200ms ease, translate 200ms var(--roster-ease); } .roster-panel:hover { box-shadow:0 10px 30px rgb(30 60 120 / 8%); } .roster-week:hover { translate:0 -2px; } .roster-people:hover { filter:brightness(1.02); } }
@media (max-width:1199px) { .roster-top { grid-template-columns:1.2fr 1fr; gap:26px; } .roster-panel-head { padding-inline:13px; gap:8px; } .roster-panel-head h3 { font-size:10px; } .roster-panel-head > div { gap:8px; } .roster-badge { font-size:8px; padding:6px 8px; } .roster-shift-meta { gap:7px; } .roster-shift-meta span + span { border:0; padding:0; } .roster-week-body { padding-inline:15px; } .roster-copy h2 { font-size:34px; } .roster-people { padding:8px; font-size:11px; } }
@media (max-width:900px) { .roster-top { grid-template-columns:1fr; } .roster-copy { max-width:680px; } .roster-bottom { grid-template-columns:1fr; } .roster-gauge-body { padding-block:28px; } .roster-panel-head h3 { font-size:12px; } .roster-panel-head { padding-inline:18px; } .roster-badge { font-size:9px; } .roster-shift-meta { gap:18px; } .roster-gauge-value strong { font-size:70px; } }
@media (max-width:540px) { .roster-showcase { padding:36px 0; } .roster-days { gap:4px; } .roster-day { font-size:11px; padding:12px 1px; } .roster-week-body { padding-inline:12px; } .roster-panel-head { padding:12px; } .roster-panel-head h3 { font-size:10px; } .roster-panel-head .roster-icon { width:28px; height:28px; } .roster-panel-head .roster-icon svg { width:18px; height:18px; } .roster-badge { letter-spacing:.02em; font-size:8px; padding:6px; } .roster-shift { gap:7px; flex-wrap:wrap; } .roster-shift-dot { margin-inline:4px; width:10px; height:10px; } .roster-shift-meta { display:grid; font-size:11px; } .roster-people { font-size:10px; gap:5px; } .roster-people svg { width:16px; } .roster-chevron { display:none; } .roster-copy h2 { font-size:32px; } .roster-chart-body { overflow-x:auto; padding-top:54px; } .roster-chart-svg { min-width:480px; } .roster-chart-stat { right:14px; } .roster-gauge-value strong { font-size:60px; } .roster-gauge-value > span { font-size:17px; } }
@media (prefers-reduced-motion:reduce) { .roster-motion-ready .roster-motion-item { opacity:1; } .roster-showcase * { animation:none !important; transition:none !important; transform:none !important; } .roster-motion-ready .roster-chart-line, .roster-motion-ready .roster-gauge-arc { stroke-dashoffset:0; } }