/* A self-contained, local attendance demo for the comparison page. */
.ac-attendance{--attendance-ink:#253c54;--attendance-muted:#5c7585;position:relative;isolation:isolate;width:100%;max-width:510px;min-width:0;margin-inline:auto;padding:27px;background:#fff;border:1px solid #d5e5e9;border-radius:18px;box-shadow:0 22px 55px #253c5410;overflow:hidden;color:var(--attendance-ink)}
.ac-attendance *{box-sizing:border-box}
.ac-attendance [hidden]{display:none!important}
.ac-attendance:before{content:"";position:absolute;z-index:-1;top:-80px;right:-60px;width:250px;height:230px;background:radial-gradient(ellipse,#dff5f580,transparent 70%);pointer-events:none}
.ac-attendance .ac-attendance-header{display:flex;align-items:center;gap:12px;margin:0;padding:0 0 23px;border:0;background:none}
.ac-attendance-header>div{min-width:0;flex:1}
.ac-attendance .ac-attendance-icon{display:grid;place-items:center;flex-shrink:0;width:43px;height:43px;border:1px solid #d6edf0;background:#edf9fa;border-radius:12px;color:#338494}
.ac-attendance-icon svg{width:26px;height:26px}
.ac-attendance .ac-attendance-eyebrow{display:block;margin-bottom:4px;font-size:10px;font-weight:650;letter-spacing:.11em;color:#57818e}
.ac-attendance .ac-attendance-header h3{margin:0;font-size:19px;font-weight:550;line-height:1.35;letter-spacing:-.035em;color:var(--attendance-ink)}
.ac-attendance .ac-attendance-state{display:inline-flex;align-items:center;gap:6px;flex-shrink:0;padding:6px 9px;border:1px solid #dce8ec;background:#f6fafb;border-radius:20px;font-size:11px;font-weight:550;color:#587080;white-space:nowrap}
.ac-attendance-state i{height:5px;width:5px;border-radius:50%;background:currentColor}
.ac-attendance .ac-attendance-timers{display:grid;grid-template-columns:minmax(0,1fr) 120px;gap:19px;align-items:stretch;border-block:1px solid #e1edef;padding:24px 0}
.ac-attendance .ac-attendance-work{display:flex;flex-direction:column;justify-content:center;min-width:0}
.ac-attendance .ac-attendance-label{display:block;font-size:12px;line-height:1.5;color:var(--attendance-muted);font-weight:450}
.ac-attendance .ac-attendance-work output{display:block;margin-top:10px;color:var(--attendance-ink);font-size:clamp(31px,3vw,43px);line-height:1.2;font-weight:480;letter-spacing:-.045em;font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.ac-attendance .ac-attendance-work-caption{display:block;margin-top:10px;font-size:11px;line-height:1.5;color:#78929e}
.ac-attendance .ac-attendance-break{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:15px 14px;background:#f4f9fa;border:1px solid #e5eff1;border-radius:11px;min-width:0}
.ac-attendance-break svg{width:21px;height:21px;margin-bottom:10px;color:#7c98a3}
.ac-attendance .ac-attendance-break output{display:block;font-size:19px;line-height:1.4;font-weight:500;letter-spacing:-.035em;font-variant-numeric:tabular-nums;font-feature-settings:"tnum";margin-top:5px;color:#557380}
.ac-attendance .ac-attendance-status{min-height:43px;margin:19px 0 16px;font-size:13px;line-height:1.65;color:#557181}
.ac-attendance .ac-attendance-controls{display:flex;gap:10px;align-items:stretch}
.ac-attendance .ac-attendance-controls button{display:inline-flex;align-items:center;justify-content:center;flex:1;min-height:47px;padding:11px 13px;border:1px solid #253c54;border-radius:8px;font:inherit;font-size:13px;line-height:1.4;font-weight:550;cursor:pointer;transition:background .16s,border-color .16s;color:#fff;background:#253c54}
.ac-attendance .ac-attendance-controls button:hover{background:#36546d;border-color:#36546d}
.ac-attendance .ac-attendance-controls button:focus-visible{outline:3px solid #4db6c3;outline-offset:3px}
.ac-attendance .ac-attendance-controls button:disabled{opacity:.65;cursor:default}
.ac-attendance .ac-attendance-controls .ac-attendance-secondary{flex:0 1 116px;background:#fff;border-color:#d0e1e6;color:#3e6378}
.ac-attendance .ac-attendance-controls .ac-attendance-secondary:hover{background:#f1f8fa;border-color:#a7cbd4}
.ac-attendance .ac-attendance-notice{display:flex;gap:6px;justify-content:center;margin:17px 0 0;padding:0;font-size:11px;line-height:1.6;text-align:center;color:#718894}
.ac-attendance .ac-attendance-notice>span{color:#5793a1}
.ac-attendance[data-state=working] .ac-attendance-state{color:#247a59;background:#eef9f2;border-color:#c8e6d6}
.ac-attendance[data-state=working] .ac-attendance-work output{color:#23765a}
.ac-attendance[data-state=break] .ac-attendance-state{color:#966418;background:#fff8e9;border-color:#eddbad}
.ac-attendance[data-state=break] .ac-attendance-break{background:#fff9ed;border-color:#eadbad}
.ac-attendance[data-state=break] .ac-attendance-break :is(svg,output){color:#996a23}
.ac-attendance[data-state=complete] .ac-attendance-state{color:#287889;background:#eaf8fa;border-color:#c6e6ec}
@media(max-width:600px){.ac-attendance{padding:22px;max-width:460px}.ac-attendance .ac-attendance-timers{grid-template-columns:minmax(0,1fr) 105px;gap:12px}.ac-attendance .ac-attendance-work output{font-size:35px}.ac-attendance .ac-attendance-break{padding:14px 10px}.ac-attendance .ac-attendance-header h3{font-size:18px}}
@media(max-width:380px){.ac-attendance{padding:18px}.ac-attendance .ac-attendance-header{gap:9px}.ac-attendance .ac-attendance-icon{width:35px;height:35px;border-radius:10px}.ac-attendance-icon svg{width:22px;height:22px}.ac-attendance .ac-attendance-header h3{font-size:16px}.ac-attendance .ac-attendance-state{font-size:10px;padding:5px 7px}.ac-attendance .ac-attendance-timers{grid-template-columns:minmax(0,1fr) 92px;gap:10px;padding-block:20px}.ac-attendance .ac-attendance-work output{font-size:29px}.ac-attendance .ac-attendance-break output{font-size:17px}.ac-attendance .ac-attendance-controls button{padding-inline:8px;font-size:12px}.ac-attendance .ac-attendance-controls .ac-attendance-secondary{flex-basis:94px}}
@media(prefers-reduced-motion:reduce){.ac-attendance .ac-attendance-controls button{transition:none}}
@media(forced-colors:active){.ac-attendance,.ac-attendance .ac-attendance-state,.ac-attendance .ac-attendance-break{border-color:CanvasText}.ac-attendance .ac-attendance-controls button{border-color:ButtonText}.ac-attendance:before{display:none}}