.motion-clock.staff-clock {display:grid;grid-template-columns:minmax(240px,320px) minmax(0,1fr);gap:36px;align-items:center;padding:32px;background:#17191c;border:1px solid #363a40;border-radius:16px;overflow:hidden;color:#f3f4f5}
.clock-face {position:relative;width:100%;max-width:320px;aspect-ratio:1;margin:auto}
.clock-face svg {width:100%;height:100%;overflow:visible}
.clock-track,.clock-progress {fill:none;stroke-width:5;transform:rotate(-90deg);transform-origin:160px 160px}
.clock-track {stroke:#34383e}.clock-progress {stroke:#ff9c54;stroke-linecap:round;transition:stroke-dashoffset .4s ease-out}.clock-progress.is-complete {stroke:#a3d8a6}
.clock-tick {stroke:#666c75;stroke-width:1}.clock-sweep {stroke:#ff9c54;stroke-width:3;transform-origin:160px 160px}
.motion-clock[data-state='out'] .clock-sweep,.motion-clock[data-state='paused'] .clock-sweep {opacity:0}
.clock-readout {position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;pointer-events:none}
.clock-elapsed {font-size:clamp(1.8rem,3vw,2.65rem);font-variant-numeric:tabular-nums;letter-spacing:-.03em;line-height:1.15}.clock-readout span {font-size:.875rem;color:#bac0c9}
.clock-heading {display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.motion-clock h2 {font-size:1.15rem;margin:0}.clock-status {font-size:.8rem;color:#d1d6dd;display:flex;gap:8px;align-items:center}.clock-status::before {content:'';width:7px;height:7px;border-radius:50%;background:#959ca7}.motion-clock[data-state='working'] .clock-status::before {background:#ff9c54}.motion-clock[data-state='paused'] .clock-status::before {background:#e4cd85}
.clock-countdown {display:flex;flex-direction:column;gap:4px;margin-top:22px}.clock-remaining {font-size:clamp(1.75rem,4vw,2.5rem);font-variant-numeric:tabular-nums;font-weight:600;line-height:1.15;letter-spacing:-.025em}.clock-countdown span,.clock-forecast {color:#bac0c9;font-size:.875rem}.clock-forecast {margin:12px 0 22px;line-height:1.55;min-height:1.55em}
.clock-stats {display:grid;grid-template-columns:1fr 1fr;gap:6px 24px;margin:0 0 24px;font-size:.8rem}.clock-stats dt {color:#bac0c9}.clock-stats dd {margin:0;text-align:right;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}.clock-target-help {font-size:.8rem;margin:18px 0 0;color:#bac0c9}.clock-target-help a {color:#e8b58b;text-underline-offset:3px}.clock-session {font-size:.8rem;color:#bac0c9;margin:0 0 12px}.clock-in-form {display:grid;grid-template-columns:1fr auto;gap:12px;align-items:end}.clock-in-form label {display:grid;gap:6px;font-size:.8rem}.clock-in-form details {grid-column:1/-1;grid-row:2;font-size:.8rem;color:#bac0c9}.clock-in-form summary {cursor:pointer}.clock-in-form textarea {margin-top:8px}.clock-errors:empty {display:none}.clock-errors {margin-top:14px}
.work-target-form {display:flex;gap:10px;align-items:end;flex-wrap:wrap}.work-target-form label {display:grid;gap:6px;font-size:.8rem}.work-target-form input {width:88px}.work-target-form .target-message {flex-basis:100%;font-size:.8rem}.work-target-person {padding:20px 0;border-top:1px solid var(--line,#363a40)}.work-target-person h3 {overflow-wrap:anywhere;margin:0 0 14px;font-size:1rem}.work-target-person:focus-within {scroll-margin-top:24px}.work-target-person[data-highlight] {outline:2px solid #e8b58b;outline-offset:6px;border-radius:4px}
@media(max-width:900px){.motion-clock.staff-clock {grid-template-columns:minmax(210px,260px) minmax(0,1fr);gap:24px;padding:24px}.clock-in-form {grid-template-columns:1fr}.clock-in-form details {grid-row:auto}.clock-in-form button {width:100%}}
@media(max-width:620px){.motion-clock.staff-clock {grid-template-columns:1fr;padding:20px;gap:20px}.clock-face {max-width:265px}.clock-elapsed {font-size:2.2rem}.clock-heading {gap:8px}.clock-countdown {margin-top:18px}.clock-controls .row {display:grid;grid-template-columns:1fr 1fr}.clock-controls button {min-height:44px}.clock-stats {gap:8px 12px}}
@media(prefers-reduced-motion:reduce){.clock-progress {transition:none}.clock-sweep {display:none}}
@media print{.motion-clock.staff-clock{display:none}}