#clock-dock-root{position:relative;z-index:70}
.clock-dock{--dock-paper:#eee8dc;--dock-line:#756c5d;--clock-color:#cba55d;color:var(--dock-paper);font-family:inherit}
.clock-dock-toggle{position:fixed;right:22px;bottom:max(22px,env(safe-area-inset-bottom));display:flex;align-items:center;gap:10px;min-height:52px;padding:10px 16px;border:1px solid #a38c66;background:#111b1c;color:#eee8dc;box-shadow:0 4px 22px #0008;cursor:pointer;font-family:inherit;font-size:.9rem;font-weight:600;z-index:2}
.clock-dock-toggle svg{width:28px;height:28px;fill:none;stroke:#d0b27f;stroke-width:1.5}.clock-dock-toggle small{color:#d0b27f}
.clock-dock-panel{position:fixed;right:22px;bottom:88px;width:290px;max-width:calc(100vw - 28px);max-height:calc(100dvh - 180px);display:flex;flex-direction:column;background:#101a1bf5;border:1px solid #84735b;border-top:2px solid #ba4236;box-shadow:0 8px 35px #0008;opacity:0;transform:translateX(calc(100% + 28px));visibility:hidden;transition:transform .23s ease,opacity .23s ease,visibility .23s}
.is-open .clock-dock-panel{opacity:1;transform:translateX(0);visibility:visible}
.clock-dock-panel>header{display:flex;justify-content:space-between;align-items:center;padding:15px 16px;border-bottom:1px solid #756c5d66}.clock-dock-panel>header strong{font:400 1.4rem Georgia,serif}.clock-dock-panel>header span{color:#bdb3a1;font-size:.8rem}
.clock-dock-scroll{overflow-y:auto;overscroll-behavior:contain;min-height:0;padding:0 14px;scrollbar-width:thin;scrollbar-color:#9e8760 #172323;scrollbar-gutter:stable}
.clock-dock-scroll::-webkit-scrollbar{width:8px}.clock-dock-scroll::-webkit-scrollbar-track{background:#172323;border-left:1px solid #756c5d44}.clock-dock-scroll::-webkit-scrollbar-thumb{background:#9e8760;border:2px solid #172323;border-radius:5px}.clock-dock-scroll::-webkit-scrollbar-thumb:hover{background:#d0b27f}.clock-dock-scroll::-webkit-scrollbar-thumb:active{background:#e15b4f}
.dock-legend{display:flex;flex-wrap:wrap;gap:6px;padding:13px 0;color:#cbc4b8}
.dock-filter{display:flex;align-items:center;gap:5px;padding:7px 8px;min-height:30px;border:1px solid #756c5d66;background:transparent;color:#c3bdb0;font:inherit;font-size:.67rem;cursor:pointer}
.dock-filter::before{content:'';display:inline-block;width:6px;height:6px;background:var(--clock-color);transform:rotate(45deg)}
.dock-filter[aria-pressed=true]{border-color:var(--clock-color);color:var(--clock-color);background:#ffffff0c}.dock-filter:hover{background:#ffffff14}.dock-filter:focus-visible,.dock-completed-toggle:focus-visible{outline:2px solid #d0b27f;outline-offset:2px}
.dock-mine{--clock-color:#62abce}
.dock-personal-mine,.dock-personal-others{--clock-color:#62abce}.dock-clock-subgroup{padding-left:9px;border-left:1px solid #62abce44;margin:8px 0 14px}.dock-clock-subgroup>.dock-group-heading{font-size:.73rem}
.dock-completed-toggle{position:relative}.dock-completed-toggle .dock-button-hint{position:absolute;right:0;top:calc(100% + 9px);width:max-content;max-width:220px;box-sizing:border-box;padding:9px 12px;background:#eee8dc;color:#182525;border:1px solid #a38c66;box-shadow:0 4px 14px #0006;text-align:left;font:400 .75rem/1.5 Arial,sans-serif;pointer-events:none;opacity:0;visibility:hidden;z-index:4;transition:opacity .15s,visibility .15s}.dock-completed-toggle:hover .dock-button-hint,.dock-completed-toggle:focus-visible .dock-button-hint{opacity:1;visibility:visible;transition-delay:1.5s}
.dock-clock-group{margin:0 0 12px}.dock-group-heading{display:flex;align-items:center;gap:8px;width:100%;min-height:38px;padding:9px 0;border:0;border-bottom:1px solid #756c5d88;background:transparent;color:var(--clock-color);text-align:left;cursor:pointer;font:inherit;font-size:.8rem}.dock-group-heading>span{flex:1}.dock-group-heading>small{font-size:.7rem;opacity:.8}.dock-group-heading>i{width:6px;height:6px;margin:0 4px 3px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg)}.dock-group-heading[aria-expanded=false]>i{transform:rotate(-45deg)}.dock-group-heading:hover{background:#ffffff0a}.dock-group-heading:focus-visible{outline:2px solid #d0b27f;outline-offset:2px}.dock-clock-group>[hidden]{display:none}.dock-clock-group .dock-clock:first-child{border-top:0}
.clock-dock-panel>header{gap:8px}.clock-dock-panel>header strong{flex:1}
.dock-completed-toggle{display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;padding:5px;background:transparent;border:1px solid #756c5d88;color:#999e96;cursor:pointer}.dock-completed-toggle.is-active{color:#d0b27f;border-color:#9e8760}.dock-completed-toggle:hover{background:#ffffff14}.dock-completed-toggle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.dock-team{--clock-color:#cba55d}.dock-personal{--clock-color:#62abce}.dock-gm{--clock-color:#e15b4f}
.dock-clock{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:13px 0;border-top:1px solid #756c5d55}.dock-clock-copy{min-width:0;display:grid;gap:6px}.dock-clock-copy strong{overflow-wrap:anywhere;font:400 1.05rem/1.35 Georgia,serif}.dock-clock-copy small{font-size:.66rem;line-height:1.45;color:var(--clock-color)}.dock-clock-copy>span{font-size:.65rem;color:#bab8ac}.dock-clock.is-complete .dock-clock-copy>span{color:var(--clock-color)}
.dock-dial{position:relative;width:86px;height:86px;flex:0 0 86px;border-radius:50%;outline-offset:3px}.dock-dial svg{display:block;width:100%;height:100%}.dock-dial path{fill:#202b2b;stroke:#101a1b;stroke-width:2;transition:fill .18s}.dock-dial path.filled{fill:var(--clock-color)}
.dock-dial-center,.dock-dial-actions{position:absolute;inset:25%;border-radius:50%;background:#111b1c;display:flex;align-items:center;justify-content:center;color:#eee8dc;font-size:.85rem}.dock-dial-actions{opacity:0;overflow:hidden;transition:opacity .15s}
.dock-dial:hover .dock-dial-actions,.dock-dial:focus-within .dock-dial-actions{opacity:1}.dock-dial-actions button{flex:1;height:100%;min-width:0;border:0;background:transparent;color:var(--clock-color);font-size:1.25rem;padding:0;cursor:pointer}.dock-dial-actions button+button{border-left:1px solid #756c5d}.dock-dial-actions button:hover,.dock-dial-actions button:focus-visible{background:#ffffff16}.dock-dial-actions button:disabled{color:#727771;cursor:default}
.clock-dock-panel>footer{padding:12px 14px;border-top:1px solid #756c5d66}.clock-dock-panel>footer button{width:100%;border:1px solid #8c7658;background:transparent;color:#e8d3ab;padding:11px;cursor:pointer;font:inherit;font-size:.8rem}.clock-dock-panel>footer button span{font-size:1.2rem;margin-right:7px}
.dock-empty{font-size:.8rem;line-height:1.7;color:#bab8ac;padding:15px 0}
.dock-create{display:grid;gap:12px;padding:14px 0;border-top:1px solid #756c5d55}.dock-create>strong{font:400 1.15rem Georgia,serif}.dock-create label{display:grid;gap:6px;font-size:.75rem}.dock-create label[hidden]{display:none}.dock-create input,.dock-create select{min-width:0;width:100%;box-sizing:border-box;padding:9px;background:#eee8dc;color:#182224;border:1px solid #a99c87;font:inherit}.dock-create>div{display:flex;gap:8px}.dock-create button{padding:9px 12px;background:#ae352e;border:1px solid #ae352e;color:#fff;cursor:pointer;font:inherit;font-size:.75rem}.dock-create button+button{background:transparent;border-color:#8c7658}.dock-create [role=status]{margin:0;font-size:.75rem;color:#efb1a7}
@media(hover:none){.dock-dial-actions{opacity:1}.dock-dial{width:100px;height:100px;flex-basis:100px}.dock-dial-actions{inset:16%}}
@media(max-width:600px){.clock-dock-panel{right:10px;bottom:80px;max-height:calc(100dvh - 150px)}.clock-dock-toggle{right:10px;bottom:max(14px,env(safe-area-inset-bottom))}}
@media(prefers-reduced-motion:reduce){.clock-dock-panel,.dock-dial path,.dock-dial-actions{transition:none}}