/* "Your daily try-ins: made right in your office", the night shift office animation, owner-approved and locked 2026-10-28
   (Codex family-c/night-shift-v002, APPROVED-LOCK.json; Daniel: "yees- go ahead and submit the office animation to lead to give to claude
   for website...."). Replaces assets/anim/night-shift.svg. Office scene only: the parked Boca final-teeth scene is not mounted.
   Site placement of the locked style.css: every rule scoped to .dio-night-shift, the review page shell (body, main, page heading and
   footer, print shell) and the font-face dropped (Nunito Sans comes from the site's fonts.css), the dormant final-scene rules (lab media,
   delivery case and labels) dropped because no final scene is mounted, h1 shown as the component title (h3). Values are unchanged.
   Breakpoints follow the component's own width (container queries on .dio-night-shift), not the screen: it sits in the answer header
   box, so it takes its phone layout and phone drawing there. A few guards (heading font, figcaption padding, paragraph colour, button
   corners) only stop site rules reaching in. */
.dio-night-shift{--ink:#203846;--navy:#2f4452;--steel:#4c7288;--muted:#506875;--paper:#f5f7f7;--orange:#ed873c;font-family:'Avenir Next',Avenir,'Nunito Sans',system-ui,sans-serif;color:var(--ink);background:#fff;font-synthesis:none;font-size:16px;line-height:normal;text-align:left;container-type:inline-size}
.dio-night-shift *{box-sizing:border-box}
.dio-night-shift .chapter-heading{margin:0 0 22px}.dio-night-shift .chapter-kicker{font-size:16px;margin:0 0 5px;color:var(--muted);font-weight:500}.dio-night-shift .ns-title{font-family:inherit;color:var(--ink);font-size:30px;line-height:1.2;letter-spacing:-.025em;font-weight:600;margin:0}.dio-night-shift figure{margin:0}.dio-night-shift p{color:inherit}.dio-night-shift .scene{position:relative;isolation:isolate;aspect-ratio:1000/550;overflow:hidden;background:var(--paper);clip-path:polygon(20px 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%,0 20px)}.dio-night-shift .world{position:absolute;width:100%;height:100%;max-width:none;inset:0;overflow:visible}.dio-night-shift .phone-world{display:none}.dio-night-shift .building-label{position:absolute;margin:0;font-size:20px;font-weight:600;line-height:1.3;text-align:center}.dio-night-shift .local-building{left:25%;width:50%;top:21.45%}.dio-night-shift .room-label{position:absolute;text-align:center;line-height:1.3}.dio-night-shift .room-label strong{display:block;font-size:17px;font-weight:600}.dio-night-shift .room-label span{display:block;font-size:14px;margin-top:3px;color:var(--muted)}.dio-night-shift .moon{opacity:0}.dio-night-shift :is(.sun,.moon,.office-facade,.printer-glow,.trial-build,.print-signal,.ready-teeth,.ready-check){will-change:transform,opacity}.dio-night-shift .print-signal{stroke-dasharray:1;stroke-dashoffset:0}.dio-night-shift .playback{display:flex;align-items:center;gap:10px;margin-top:16px;min-height:48px}.dio-night-shift .playback[hidden]{display:none}.dio-night-shift button{min-height:48px;padding:10px 18px;border:1px solid #c1cdd4;color:var(--ink);background:#fff;font:500 15px/1.25 'Avenir Next',Avenir,'Nunito Sans',system-ui,sans-serif;cursor:pointer;border-radius:2px}.dio-night-shift button:hover{border-color:var(--steel);background:#f5f7f7}.dio-night-shift button[aria-pressed=true]{background:#e8eef2;border-color:#8da4b2}.dio-night-shift button:focus-visible{outline:2px solid var(--steel);outline-offset:4px}.dio-night-shift button:disabled{cursor:default;opacity:.65}.dio-night-shift .playback-status{font-size:13px;color:var(--muted);margin:0 0 0 auto;text-align:right}.dio-night-shift .narration{font-size:19px;line-height:1.5;text-align:center;margin:22px auto 28px;max-width:760px;min-height:57px}.dio-night-shift .story-steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding:22px 0 0;margin:0;border-top:1px solid #d6dfe4;font-size:17px;line-height:1.4}.dio-night-shift .story-steps li{position:relative;margin:0}.dio-night-shift .story-steps li+li:before{content:'→';position:absolute;left:-21px;color:#8da4b2}.dio-night-shift .story-steps span{display:block;font-size:13px;color:var(--muted);margin-bottom:5px}.dio-night-shift figure figcaption{font-size:13px;line-height:1.5;color:var(--muted);margin:22px 0 0;padding:0;text-align:left}.dio-night-shift .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@container (max-width:700px){.dio-night-shift .chapter-heading{margin-bottom:17px}.dio-night-shift .chapter-kicker{font-size:15px}.dio-night-shift .ns-title{font-size:26px;line-height:1.25}.dio-night-shift .local-scene{aspect-ratio:400/540}.dio-night-shift .desktop-world{display:none}.dio-night-shift .phone-world{display:block}.dio-night-shift .local-building{left:10%;width:80%;top:30.74%;font-size:18px}.dio-night-shift .room-label strong{font-size:12px}.dio-night-shift .room-label span{font-size:10.5px}.dio-night-shift .playback{flex-wrap:wrap;gap:8px;margin-top:12px}.dio-night-shift button{font-size:14px;min-height:48px;padding:9px 16px}.dio-night-shift .playback-status{flex-basis:100%;font-size:12px;text-align:left;margin:2px 0 0}.dio-night-shift .narration{font-size:17px;line-height:1.5;margin:20px 0 24px;min-height:77px;text-align:left}.dio-night-shift .story-steps{gap:14px;font-size:14px;padding-top:18px}.dio-night-shift .story-steps span{font-size:11px;margin-bottom:6px}.dio-night-shift .story-steps li+li:before{display:none}.dio-night-shift figure figcaption{font-size:12px;margin-top:20px}}
@container (max-width:359px){.dio-night-shift .ns-title{font-size:24px}.dio-night-shift .room-label strong{font-size:12px}.dio-night-shift .room-label span{font-size:11px}.dio-night-shift .story-steps{font-size:13px;gap:10px}}
@media(prefers-reduced-motion:reduce){.dio-night-shift *,.dio-night-shift *:before,.dio-night-shift *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media print{.dio-night-shift .playback{display:none!important}.dio-night-shift .scene{clip-path:none}}

.dio-night-shift .ready-check{stroke-dasharray:1;stroke-dashoffset:0}.dio-night-shift .trial-build{opacity:0}

.dio-night-shift :is(.office-facade,.exterior-dimming,.printer-glow){opacity:0}.dio-night-shift .office-interior{opacity:1}

/* One process caption spans the open rear wall, with room for the arrival above the chair. */
.dio-night-shift .process-label{left:35.015%;width:28.675%;top:44.22%}.dio-night-shift .process-label strong{white-space:nowrap}
@container (max-width:700px){.dio-night-shift .process-label{left:23.675%;width:50.375%;top:48.815%}}
@container (max-width:359px){.dio-night-shift .process-label strong{font-size:11px}}
/* 2026-11-11 audit, animation controls: one look and one place on every animation. The row is a right-aligned row above the figure, 12px above it; each control has the
   finish of the site's animation toggle (answer-anim.css .ans-anim-toggle): 44px tall, 2px steel border, white ground, 6px corners, ink focus ring,
   mist fill when "Still view" is on. Looks and placement only: no markup, wording, timing or logic changes. The doubled root class outranks the
   widget's older control rules above, which stay as they were. */
.dio-night-shift.dio-night-shift .playback{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px;width:auto;min-height:0;margin:0 0 12px;padding:0;border:0}
.dio-night-shift.dio-night-shift .playback[hidden]{display:none}
.dio-night-shift.dio-night-shift .playback button{font:500 14px/1.2 'Avenir Next',Avenir,'Nunito Sans',system-ui,sans-serif;min-height:44px;min-width:82px;margin:0;padding:10px 16px;background:#fff;color:#203846;border:2px solid #4c7288;border-radius:6px;box-shadow:none;text-shadow:none;text-transform:none;letter-spacing:normal;text-decoration:none;clip-path:none;cursor:pointer}
.dio-night-shift.dio-night-shift .playback button:hover{background:#f1f5f6;border-color:#4c7288;color:#203846;text-shadow:none;text-decoration:none}
.dio-night-shift.dio-night-shift .playback button:focus-visible{outline:3px solid #203846;outline-offset:2px}
.dio-night-shift.dio-night-shift .playback button[aria-pressed=true]{background:#e6edf0;border-color:#4c7288}
.dio-night-shift.dio-night-shift .playback button:disabled{opacity:.55;color:#203846;cursor:default}
/* the row is drawn above the scene although it follows it in the markup; the time-of-day line keeps its words and sits at the row's left */
.dio-night-shift.dio-night-shift .experience{display:flex;flex-direction:column}
.dio-night-shift.dio-night-shift .playback{order:-1}
.dio-night-shift.dio-night-shift .playback-status{order:-1;flex:1 1 0;min-width:0;margin:0;text-align:left}
@media print{.dio-night-shift.dio-night-shift .playback{display:none!important}}
/* end animation controls */
/* 2026-11-11 audit (regression review): on phones the status line was squeezed into a 60px column beside the buttons; it takes its own line under them */
@media(max-width:560px){.dio-night-shift.dio-night-shift .playback-status{order:1;flex:1 1 100%;text-align:right}}