/* Scoped presentation for the fictional, interactive break-clock demonstration. */
.break-demo-grid{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);gap:20px;align-items:stretch}
.break-clock-card{--clock-accent:#8dccff;--clock-line:#70b9f745;position:relative;isolation:isolate;min-width:0;padding:25px 29px 19px;border:1px solid #7697cf37;border-radius:12px;background:radial-gradient(ellipse at 50% 35%,#563b982a,transparent 54%),linear-gradient(145deg,#17213a80,#0c1425 56%,#10172b);box-shadow:inset 0 1px #bfd9ff08,0 12px 32px #0002;overflow:hidden}
.break-clock-card:before{content:"";height:1px;position:absolute;inset:0 16% auto;background:linear-gradient(90deg,transparent,#6bb5f099,#af7fe766,transparent);pointer-events:none}
.break-clock-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:23px}
.break-clock-eyebrow{color:#9aaccc;font-size:9px;line-height:1.7;letter-spacing:1.3px;font-weight:500}
.break-run-state{display:inline-flex;align-items:center;gap:7px;font-size:9px;color:#99b6d2;line-height:1.6}
.break-run-state>i{height:5px;width:5px;flex:none;border-radius:50%;background:#7bdac2;box-shadow:0 0 10px #7bdac235}
.break-clock-card h3{font-size:29px;line-height:1.18;letter-spacing:-.8px;color:#e6edff}
.break-person-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:17px;padding-bottom:3px}
.break-person-heading .roster-member{padding:0;font-size:11px;gap:9px}
.break-person-heading .roster-member .mini-avatar{height:30px;width:30px;font-size:9px;background:#3a527940;border-color:#7ca3d231;color:#a9c8ee}
.break-person-heading .roster-member small{font-size:9px}
.break-person-heading>span{color:#a0b2ce;font-size:10px;text-align:end}
.break-ring{position:relative;width:min(100%,310px);aspect-ratio:1;margin:17px auto 11px;direction:ltr;filter:drop-shadow(0 0 24px #8159dd0d)}
.break-ring-svg{display:block;width:100%;height:100%;overflow:visible}
.break-ring-ticks{stroke:#7089b143;stroke-width:1;stroke-linecap:round}
.break-ring-track{fill:none;stroke:#23314b;stroke-width:7}
.break-ring-progress{fill:none;stroke:url(#break-ring-gradient);stroke-width:7;stroke-linecap:round;transition:stroke-dashoffset 1s linear;filter:drop-shadow(0 0 4px #9684ff2b)}
.break-ring-content{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:42px;pointer-events:none;text-align:center;direction:inherit}
#break-countdown-label{font-size:11px;line-height:1.7;color:#afbbd5;margin-bottom:10px}
#break-countdown{display:block;font-family:var(--display);font-size:65px;font-weight:600;line-height:1.06;letter-spacing:-1.2px;font-variant-numeric:tabular-nums;white-space:nowrap;color:#ebf2ff;unicode-bidi:isolate;direction:ltr}
#break-ring-caption{font-size:9px;line-height:1.7;color:#91a5c6;margin-top:14px}
.break-clock-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:17px 0;border-block:1px solid #6f8fb523}
.break-clock-facts>div{text-align:center;padding-inline:5px;min-width:0}
.break-clock-facts>div+div{border-inline-start:1px solid #6f8fb525}
.break-clock-facts span{display:block;font-size:9px;color:#97aac7;margin-bottom:5px}
.break-clock-facts strong{display:block;font:500 18px/1.5 var(--font);font-variant-numeric:tabular-nums;letter-spacing:.2px;color:#dce7fb;unicode-bidi:isolate}
.break-clock-detail{font-size:10px;line-height:1.8;color:#9db3d0;min-height:38px;display:flex;align-items:center;justify-content:center;text-align:center;margin:10px 0}
.break-primary-action{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:44px;padding:12px 17px;border:1px solid #9874d76b;border-radius:7px;background:linear-gradient(115deg,#6438c8,#8351d0);box-shadow:inset 0 1px #ffffff14;font-size:12px;font-weight:500;color:#f5edff;line-height:1.6;transition:background .2s,box-shadow .2s}
.break-primary-action:hover:not(:disabled){background:linear-gradient(115deg,#7444dc,#9464df);box-shadow:0 4px 20px #7554cd22}
.break-primary-action>span:last-child{font-size:17px;line-height:1}
.break-primary-action:disabled{background:#17223a;color:#8f9fba;border-color:#6e83ac29;box-shadow:none}
.break-clock-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:10px}
.break-clock-controls>button{display:flex;justify-content:center;align-items:center;gap:6px;border:1px solid #7791b62b;border-radius:6px;min-width:0;min-height:42px;padding:9px 5px;background:#18233a75;color:#b3c2da;font-size:10px;line-height:1.7;transition:background .2s,border-color .2s}
.break-clock-controls>button>span{font-family:'General Sans',Arial,sans-serif;font-size:13px;color:#a49ace;flex:none}
.break-clock-controls>button:hover:not(:disabled){background:#273352;border-color:#a2bcea4d}
.break-clock-controls>button[aria-pressed=true]{background:#4d3d233e;border-color:#b89a5355;color:#e1c98d}
.break-clock-controls>button:disabled{opacity:.4}
.break-seed-note{margin-top:14px;text-align:center;font-size:9px;color:#8ca1be;line-height:1.8}
.break-queue-panel{display:flex;flex-direction:column;min-width:0;padding:27px 23px 22px;border:1px solid #708eb527;border-radius:12px;background:linear-gradient(150deg,#121c2e88,#0b1423);box-shadow:inset 0 1px #b3d7ff05}
.break-queue-heading{padding-bottom:23px}
.break-queue-heading h3{font-size:27px;letter-spacing:-.6px;line-height:1.2;margin-top:13px;color:#e3ecfc}
.break-queue-heading p{font-size:11px;line-height:1.8;margin-top:12px;color:#96abc8}
.break-person-list{display:grid;gap:9px}
.break-person-row{position:relative;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(65px,.85fr) minmax(62px,.65fr);align-items:center;gap:10px;min-height:79px;width:100%;border:1px solid #738bae20;border-radius:8px;padding:13px 12px;background:#15213852;color:#b8c6de;text-align:start;transition:background .2s,border-color .2s,box-shadow .2s}
.break-person-row:hover{background:#20314b77;border-color:#84aed744}
.break-person-row[aria-pressed=true]{border-color:#997ade83;background:linear-gradient(105deg,#4a34734a,#293c5d57);box-shadow:inset 3px 0 #9b76d3}
.break-person-identity{display:flex;align-items:center;gap:10px;min-width:0}
.break-person-identity .mini-avatar{width:29px;height:29px;border-radius:8px;font-size:9px;border-color:#87a9d128;background:#40648c3b;color:#bbd6f5}
.break-person-identity strong{display:block;font-size:11px;line-height:1.65;font-weight:500;color:#dbe6f8}
.break-person-identity small{display:block;font-size:9px;line-height:1.75;margin-top:3px;color:#9aafcd}
.break-row-status{font-size:9px;line-height:1.6;color:#8edcc7;text-align:center}
.break-row-status:before{content:"";display:inline-block;vertical-align:middle;width:4px;height:4px;margin-inline-end:5px;border-radius:50%;background:currentColor}
.break-person-time{text-align:end;min-width:0}
.break-person-time strong{display:block;font-family:var(--font);font-weight:500;font-size:17px;line-height:1.5;font-variant-numeric:tabular-nums;white-space:nowrap;color:#deebfd;unicode-bidi:isolate}
.break-person-time small{display:block;font-size:8px;line-height:1.7;margin-top:2px;color:#91a5c4}
.break-person-row[data-clock-mode=waiting] .break-row-status{color:#a1afc4}
.break-person-row[data-clock-mode=waiting] .break-person-time strong{color:#94a7c4}
.break-person-row[data-clock-mode=returned] .break-row-status{color:#99b3cc}
.break-person-row[data-clock-mode=returned] .break-row-status:before{width:5px;height:3px;transform:rotate(-45deg);border-radius:0;border-inline-start:1px solid currentColor;border-bottom:1px solid currentColor;background:none}
.break-person-row[data-clock-mode=overdue] .break-row-status,.break-person-row[data-clock-mode=overdue] .break-person-time strong{color:#f2a4ca}
.break-queue-bottom{margin-top:auto;padding-top:23px}
.break-queue-bottom .action-small{display:flex;align-items:center;justify-content:space-between;gap:15px;width:100%;min-height:44px;padding:12px 14px;font-size:11px;line-height:1.7;background:#19273b;border:1px solid #678eba33;border-radius:7px;color:#acccec}
.break-queue-bottom .action-small:hover:not(:disabled){background:#21334e;border-color:#83aed354}
.break-queue-bottom .action-small:disabled{opacity:.55}
.break-queue-bottom p{font-size:10px;line-height:1.85;color:#92a6c3;margin-top:14px}
.break-demo-note{margin-top:16px!important;font-size:10px!important;line-height:1.9!important;max-width:990px}
.break-clock-card[data-clock-paused=true] .break-run-state>i{background:#e2c780;box-shadow:none}
.break-clock-card[data-clock-paused=true] .break-run-state{color:#d4c394}
.break-clock-card[data-clock-mode=overdue]{border-color:#bb568963;background:radial-gradient(ellipse at 50% 35%,#8b38642a,transparent 54%),linear-gradient(145deg,#2b1c3880,#151323 56%,#1b162c)}
.break-clock-card[data-clock-mode=overdue] .break-ring-progress{stroke:#ef87bd;filter:drop-shadow(0 0 5px #d6509d42)}
.break-clock-card[data-clock-mode=overdue] #break-countdown,.break-clock-card[data-clock-mode=overdue] #break-countdown-label{color:#ffb4d5}
.break-clock-card[data-clock-mode=overdue] .break-clock-detail{color:#e4a3c2}
.break-clock-card[data-clock-mode=overdue] .break-primary-action{background:linear-gradient(110deg,#813866,#a74e7d);border-color:#d285ad71}
.break-clock-card[data-clock-mode=returned] .break-ring-progress{stroke:#78c9b6;filter:none}
.break-clock-card[data-clock-mode=returned] #break-countdown{color:#a9e0d0}
.break-clock-card[data-clock-mode=returned] .break-run-state>i{background:#78c9b6;box-shadow:none}
.break-clock-card[data-clock-mode=waiting] .break-ring-progress{stroke:#5e7395;filter:none}
.break-clock-card[data-clock-mode=waiting] .break-run-state>i{background:#8c9eba;box-shadow:none}
[dir=rtl] .break-clock-eyebrow{letter-spacing:0}
[dir=rtl] .break-clock-card h3,[dir=rtl] .break-queue-heading h3{font-size:25px;line-height:1.65;letter-spacing:0}
[dir=rtl] .break-person-row[aria-pressed=true]{box-shadow:inset -3px 0 #9b76d3}
[dir=rtl] .break-ring-content{direction:rtl}
[dir=rtl] #break-countdown{font-size:60px;letter-spacing:0}
[dir=rtl] .break-clock-controls>button{font-size:9px}
[dir=rtl] .break-person-identity strong{font-size:10px}
[dir=rtl] .break-person-identity small{font-size:8px}
[dir=rtl] .break-person-time strong{font-size:16px}
[dir=rtl] .break-row-status{font-size:8px;line-height:1.85}
[dir=rtl] .break-clock-detail{line-height:2}
[dir=rtl] .break-run-state{font-size:8px}
@media(max-width:1100px){.break-demo-grid{gap:15px}.break-clock-card{padding-inline:21px}.break-queue-panel{padding-inline:17px}.break-person-row{grid-template-columns:minmax(0,1.25fr) minmax(56px,.8fr) minmax(59px,.6fr);gap:7px;padding-inline:9px}.break-person-identity{gap:7px}.break-person-identity .mini-avatar{width:25px;height:25px;font-size:8px}.break-person-identity strong{font-size:10px}.break-person-time strong{font-size:15px}.break-row-status{font-size:8px}.break-clock-controls>button{font-size:9px}}
@media(max-width:900px){.break-demo-grid{grid-template-columns:1fr}.break-clock-card{padding:25px 29px 21px}.break-queue-panel{padding:24px}.break-ring{width:310px;margin-top:15px;margin-bottom:8px}.break-clock-top{margin-bottom:16px}.break-clock-card h3{font-size:29px}.break-clock-facts{max-width:480px;margin-inline:auto}.break-primary-action,.break-clock-controls{max-width:480px;margin-inline:auto}.break-clock-controls{margin-top:10px}.break-clock-controls>button{font-size:11px}.break-queue-heading{padding-bottom:19px}.break-person-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.break-person-row{grid-template-columns:minmax(0,1fr) auto;gap:8px;padding:14px}.break-person-identity{grid-column:1/-1}.break-person-identity strong{font-size:11px}.break-person-identity small{font-size:9px}.break-row-status{text-align:start;font-size:9px}.break-person-time{grid-column:2;grid-row:2}.break-person-time strong{font-size:18px}.break-person-time small{font-size:9px}.break-person-identity .mini-avatar{width:29px;height:29px;font-size:9px}.break-queue-bottom{padding-top:19px}[dir=rtl] .break-row-status{font-size:9px}[dir=rtl] .break-person-identity strong{font-size:11px}}
@media(max-width:540px){.break-demo-grid{gap:14px}.break-clock-card{padding:20px 15px 18px;border-radius:10px}.break-clock-top{gap:8px;margin-bottom:20px}.break-clock-eyebrow{font-size:8px;letter-spacing:.9px}.break-run-state{font-size:8px}.break-clock-card h3{font-size:27px;letter-spacing:-.6px}.break-person-heading{gap:10px;margin-top:15px}.break-person-heading .roster-member{font-size:11px;gap:7px}.break-person-heading .roster-member .mini-avatar{width:27px;height:27px;font-size:8px}.break-person-heading .roster-member small{font-size:8px}.break-person-heading>span{font-size:9px;max-width:95px}.break-ring{width:260px;max-width:100%;margin-top:16px;margin-bottom:9px}.break-ring-content{padding:38px}#break-countdown{font-size:56px}#break-countdown-label{font-size:10px;margin-bottom:8px}#break-ring-caption{font-size:8px;margin-top:12px}.break-clock-facts{padding-block:14px}.break-clock-facts span{font-size:9px}.break-clock-facts strong{font-size:17px}.break-clock-detail{font-size:10px;min-height:42px}.break-primary-action{min-height:46px;font-size:12px;padding:12px 13px}.break-clock-controls{gap:6px}.break-clock-controls>button{font-size:9px;padding:8px 5px;min-height:48px;flex-direction:column;gap:3px;line-height:1.8}.break-clock-controls>button>span{font-size:14px}.break-seed-note{font-size:8px;margin-top:13px}.break-queue-panel{padding:21px 14px 18px;border-radius:10px}.break-queue-heading h3{font-size:26px}.break-queue-heading p{font-size:10px}.break-person-list{grid-template-columns:1fr;gap:8px}.break-person-row{grid-template-columns:minmax(0,1.2fr) minmax(58px,.7fr) minmax(58px,.6fr);gap:7px;min-height:80px;padding:12px 9px}.break-person-identity{grid-column:auto;gap:7px}.break-person-identity strong{font-size:10px}.break-person-identity small{font-size:8px}.break-person-identity .mini-avatar{width:25px;height:25px;font-size:8px}.break-row-status{text-align:center;font-size:8px}.break-person-time{grid-column:auto;grid-row:auto}.break-person-time strong{font-size:16px}.break-person-time small{font-size:8px}.break-queue-bottom .action-small{font-size:11px;line-height:1.8}.break-queue-bottom p{font-size:10px;line-height:1.9}.break-demo-note{font-size:10px!important}[dir=rtl] .break-clock-card h3,[dir=rtl] .break-queue-heading h3{font-size:23px}[dir=rtl] #break-countdown{font-size:51px}[dir=rtl] .break-person-heading .roster-member{font-size:10px}[dir=rtl] .break-person-heading>span{font-size:8px}[dir=rtl] .break-person-identity strong{font-size:9px}[dir=rtl] .break-person-identity small{font-size:8px}[dir=rtl] .break-row-status{font-size:8px}[dir=rtl] .break-person-time strong{font-size:15px}[dir=rtl] .break-clock-controls>button{font-size:8px}[dir=rtl] .break-clock-facts span{font-size:8px}}
@media(max-width:380px){.break-clock-card{padding-inline:11px}.break-clock-card h3{font-size:24px}.break-clock-top{gap:6px}.break-clock-eyebrow,.break-run-state{font-size:7px}.break-person-heading .roster-member{font-size:10px}.break-person-heading>span{font-size:8px}.break-ring{width:232px}#break-countdown{font-size:50px}.break-clock-facts span{font-size:8px}.break-clock-facts strong{font-size:16px}.break-person-row{grid-template-columns:minmax(0,1.3fr) minmax(49px,.7fr) minmax(47px,.6fr);padding-inline:7px;gap:5px}.break-person-identity .mini-avatar{display:none}.break-person-time strong{font-size:14px}.break-row-status{font-size:7px}[dir=rtl] .break-clock-card h3,[dir=rtl] .break-queue-heading h3{font-size:20px}[dir=rtl] #break-countdown{font-size:46px}[dir=rtl] .break-clock-top .break-run-state{font-size:7px}}
@media(prefers-reduced-motion:reduce){.break-ring-progress,.break-primary-action,.break-clock-controls>button,.break-person-row{transition:none}}