.timeclock-workspace{margin:0 0 24px;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--card)}
.timeclock-workspace-head{display:flex;justify-content:space-between;gap:24px;align-items:flex-end;padding:24px;border-bottom:1px solid var(--border)}
.timeclock-kicker{display:block;margin-bottom:7px;color:var(--brand);font-size:11px;font-weight:600;letter-spacing:.04em}.timeclock-workspace h3{margin:0;color:var(--text);font:600 22px/1.15 'Syne','Inter',sans-serif;letter-spacing:-.04em}.timeclock-workspace-head p{margin:8px 0 0;color:var(--dim);font-size:13px}
.timeclock-range{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.timeclock-range label{color:var(--dim);font-size:12px}.timeclock-range input{min-height:38px;max-width:145px}
.timeclock-live{display:flex;align-items:center;gap:9px;padding:13px 24px;background:var(--surface2);color:var(--dim);font-size:13px}.timeclock-live-dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px color-mix(in srgb,var(--green) 14%,transparent)}
.timeclock-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--border);border-bottom:1px solid var(--border)}.timeclock-summary article{padding:17px 24px;background:var(--card)}.timeclock-summary strong{display:block;color:var(--text);font:600 24px/1.1 'Inter',sans-serif;letter-spacing:-.05em}.timeclock-summary span{display:block;margin-top:6px;color:var(--dim);font-size:12px}
.timeclock-report{overflow-x:auto}.timeclock-table{width:100%;border-collapse:collapse}.timeclock-table th,.timeclock-table td{padding:13px 24px;text-align:left;border-bottom:1px solid var(--border);font-size:13px}.timeclock-table th{color:var(--dim);font-size:11px;font-weight:600}.timeclock-table td:last-child,.timeclock-table th:last-child{text-align:right}.timeclock-status{display:inline-flex;padding:4px 7px;border-radius:4px;background:var(--surface2);color:var(--dim);font-size:11px;font-weight:600}.timeclock-status.live{background:var(--green-lt);color:var(--green)}
@media(max-width:768px){.timeclock-workspace-head{display:block;padding:20px 16px}.timeclock-range{margin-top:18px}.timeclock-range input{flex:1 1 130px}.timeclock-range button{width:100%}.timeclock-live{padding:13px 16px}.timeclock-summary{grid-template-columns:1fr}.timeclock-summary article{padding:15px 16px}.timeclock-table th,.timeclock-table td{padding:12px 16px;white-space:nowrap}}
.timeclock-table caption{text-align:left;padding:16px 24px;font-weight:600;color:var(--text);border-top:1px solid var(--border)}.timeclock-summary strong{overflow-wrap:anywhere}.timeclock-workspace [hidden]{display:none!important}
.clock-access-row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 0;border-bottom:1px solid var(--border)}
#clock-access-result{padding:20px;margin-top:18px;border:1px solid var(--brand);border-radius:10px;background:var(--surface2)}
#clock-access-result[hidden]{display:none}
#clock-access-result p:first-of-type{font:600 22px/1.5 Inter,sans-serif;letter-spacing:.08em}
@media(max-width:600px){.clock-access-row{align-items:flex-start;flex-direction:column}}
#panel-timeclock{max-width:1320px;margin-inline:auto}
#panel-timeclock .timeclock-workspace{border-radius:14px}
.timeclock-presets{display:flex;gap:8px;padding:16px 24px;border-bottom:1px solid var(--border)}
.timeclock-presets button{min-height:40px;padding:8px 16px;border:1px solid var(--border);border-radius:7px;background:var(--surface2);color:var(--text);font:500 13px Inter,sans-serif;cursor:pointer}
.timeclock-presets button:hover{border-color:var(--dim)}
#panel-timeclock button:focus-visible,.clock-person summary:focus-visible{outline:2px solid var(--brand);outline-offset:4px}
#panel-timeclock .timeclock-summary strong{margin:10px 0 6px;font-size:32px;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
#panel-timeclock .timeclock-summary small{color:var(--dim);font-size:12px}
#timeclock-totals{padding:8px 24px 24px}
.clock-person{border:1px solid var(--border);border-radius:9px;margin-top:12px;background:var(--card);overflow:hidden}
.clock-person summary{display:flex;align-items:center;gap:20px;padding:20px;list-style:none;cursor:pointer}
.clock-person summary::-webkit-details-marker{display:none}
.clock-person summary:hover{background:var(--surface2)}
.clock-person-name{flex:1;font-weight:600;font-size:16px}
.clock-person-total{text-align:right;font-size:20px;font-weight:600;font-variant-numeric:tabular-nums}
.clock-person small{display:block;font-size:12px;font-weight:400;color:var(--dim);margin-top:6px}
.clock-chevron{color:var(--dim);transition:transform .2s}
.clock-person[open] .clock-chevron{transform:rotate(180deg)}
.clock-person-body{border-top:1px solid var(--border)}
.clock-person-body>p{padding:16px 20px;margin:0;color:var(--dim);font-size:13px}
.clock-person-body strong{color:var(--text);font-variant-numeric:tabular-nums}
.clock-person .timeclock-table td{font-variant-numeric:tabular-nums;white-space:nowrap}
.clock-person .timeclock-table th,.clock-person .timeclock-table td{padding:14px 20px}
.clock-next-day{font-size:11px!important}
.clock-empty{padding:40px 16px;text-align:center}
.clock-empty p{color:var(--dim)}
.clock-access-actions{display:flex;gap:8px;flex-wrap:wrap}
@media(max-width:600px){#timeclock-totals{padding:0 12px 16px}.timeclock-presets{padding:12px;flex-wrap:wrap}.clock-person summary{padding:16px 12px;gap:10px}.clock-person-name{font-size:14px}.clock-person-total{font-size:18px}.clock-access-actions{width:100%}.clock-access-actions button{flex:1}#panel-timeclock .timeclock-summary{grid-template-columns:1fr 1fr}#panel-timeclock .timeclock-summary article:last-child{grid-column:1/-1}}
@media(prefers-reduced-motion:reduce){.clock-chevron{transition:none}}
#panel-timeclock .timeclock-workspace-head p{margin-bottom:12px}
@media(max-width:600px){
.clock-person .timeclock-table thead{display:none}
.clock-person .timeclock-table,.clock-person .timeclock-table tbody{display:block;width:100%}
.clock-person .timeclock-table tr{display:block;padding:8px 12px;border-top:1px solid var(--border)}
.clock-person .timeclock-table td{display:flex;align-items:baseline;justify-content:space-between;gap:12px;white-space:normal;padding:8px 0;border:0;text-align:right}
.clock-person .timeclock-table td::before{content:attr(data-label);color:var(--dim);text-align:left;font-weight:400}
.clock-person .clock-next-day{margin-left:4px}
}