/* Sedation dial, owner-approved and locked 2026-10-28 (Codex family-c/sedation-dial-v002, APPROVED-LOCK.json; Daniel: "ok-have the
   needle start at zero and we are locked"). Site placement of the locked style.css: every rule scoped to .dio-sedation-dial, the page's
   own main/body/header-link/footer rules and the @font-face dropped (Nunito Sans comes from the site's fonts.css), h1 shown as the
   component title (h3). Values are unchanged. Breakpoints follow the component's own width (container queries), not the screen: it sits
   in the answer header box, about 390 px wide on a computer, so it takes its phone layout there. Clinical sign-off still owed. */
.dio-sedation-dial{--font:'Avenir Next',Avenir,Nunito Sans,system-ui,sans-serif;--navy:#2f4452;--steel:#4c7288;--orange:#ed873c;--mineral:#f5f7f7;font-family:var(--font);font-synthesis:none;color:var(--navy);background:#fff;max-width:880px;margin:0 auto;container-type:inline-size}
.dio-sedation-dial *{box-sizing:border-box}
.dio-sedation-dial .sd-head{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:20px}
.dio-sedation-dial .sd-title{font:600 26px/1.3 var(--font);color:var(--navy);letter-spacing:-.025em;margin:0}
.dio-sedation-dial .sd-figure{margin:0}.dio-sedation-dial .sd-scene{background:var(--mineral);padding:28px 36px 26px}.dio-sedation-dial .sd-world{max-width:720px;margin:0 auto;--angle:0deg;--settled:1}
.dio-sedation-dial .sd-target{text-align:center;margin-bottom:0}.dio-sedation-dial .sd-target strong{display:block;font-weight:600;font-size:24px;line-height:1.3;letter-spacing:-.02em}.dio-sedation-dial .sd-target span{display:block;font-size:15px;line-height:1.5;color:#526975;margin-top:3px}
.dio-sedation-dial .sd-gauge{display:block;width:100%;height:auto;max-width:none;overflow:visible}
.dio-sedation-dial .sd-sector-0{fill:#dce6ec}.dio-sedation-dial .sd-sector-1{fill:url(#sd-steel)}.dio-sedation-dial .sd-sector-2{fill:#dce0e2}.dio-sedation-dial .sd-edge{fill:none;stroke:#526975;stroke-width:1.5}.dio-sedation-dial .sd-divider{fill:none;stroke:#f5f7f7;stroke-width:3}.dio-sedation-dial .sd-baseline{stroke:#526975;stroke-width:1.5;stroke-linecap:butt}.dio-sedation-dial .sd-stop{stroke:var(--orange);stroke-width:5;stroke-linecap:butt}
.dio-sedation-dial .sd-needle{transform-origin:360px 300px;transform:rotate(var(--angle));fill:var(--navy)}.dio-sedation-dial .sd-hub{fill:#fff;stroke:var(--navy);stroke-width:2}.dio-sedation-dial .sd-pin{fill:var(--orange)}
.dio-sedation-dial .sd-end-labels{display:flex;justify-content:space-between;margin:4px 15.2778% 0;font-size:17px;line-height:1.3;font-weight:500}.dio-sedation-dial .sd-end-labels>span:first-child{transform:translateX(-50%)}.dio-sedation-dial .sd-end-labels>span:last-child{text-align:right;transform:translateX(50%)}
.dio-sedation-dial .sd-help{margin:20px 0 0;text-align:center;font-size:17px;line-height:1.4;font-weight:400}.dio-sedation-dial .sd-phone-break{display:none}
.dio-sedation-dial .sd-figure>figcaption{width:calc(100% - 72px);margin:24px auto 0;padding:0;text-align:left;font-size:inherit;line-height:inherit;color:inherit}
.dio-sedation-dial .sd-explanation{font:400 20px/1.55 var(--font);margin:0;text-wrap:pretty}.dio-sedation-dial .sd-note{font:400 14px/1.5 var(--font);color:#526975;margin:16px 0 0}
.dio-sedation-dial .sd-controls{width:calc(100% - 72px);margin:12px auto 0;display:flex;gap:18px}.dio-sedation-dial .sd-controls[hidden]{display:none}
.dio-sedation-dial .sd-controls button{font:500 14px/1.3 var(--font);color:var(--navy);background:transparent;min-height:48px;min-width:60px;padding:8px 4px;border:0;border-bottom:1px solid #b6c5cd;border-radius:0;cursor:pointer}
.dio-sedation-dial .sd-controls button:hover{border-color:var(--orange)}.dio-sedation-dial button:focus-visible{outline:2px solid var(--navy);outline-offset:3px}.dio-sedation-dial .sd-controls button[aria-pressed=true]{border-bottom:2px solid var(--steel)}.dio-sedation-dial .sd-controls button:disabled{opacity:.55;cursor:default}
.dio-sedation-dial .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@container (max-width:700px){.dio-sedation-dial .sd-head{margin-bottom:13px}.dio-sedation-dial .sd-title{font-size:24px}.dio-sedation-dial .sd-scene{padding:24px 16px}.dio-sedation-dial .sd-target strong{font-size:21px}.dio-sedation-dial .sd-target span{font-size:14px;margin-top:2px}.dio-sedation-dial .sd-gauge{margin-top:8px}.dio-sedation-dial .sd-end-labels{font-size:15px;margin-top:5px}.dio-sedation-dial .sd-end-labels>span:last-child{text-align:center}.dio-sedation-dial .sd-phone-break{display:block}.dio-sedation-dial .sd-help{margin-top:24px;font-size:15px}.dio-sedation-dial .sd-figure>figcaption,.dio-sedation-dial .sd-controls{width:100%}.dio-sedation-dial .sd-explanation{font-size:18px;line-height:1.55}.dio-sedation-dial .sd-note{font-size:13px}.dio-sedation-dial .sd-controls{margin-top:10px}}
@container (max-width:350px){.dio-sedation-dial .sd-scene{padding:22px 12px}.dio-sedation-dial .sd-end-labels{font-size:14px}.dio-sedation-dial .sd-help{font-size:14px}.dio-sedation-dial .sd-explanation{font-size:17px}}
@media(prefers-reduced-motion:reduce){.dio-sedation-dial .sd-world{--angle:0deg!important}.dio-sedation-dial .sd-world *{animation:none!important;transition:none!important}}
html:is(.reduce-motion,.dio-alive-off) .dio-sedation-dial .sd-world{--angle:0deg!important}
@media(forced-colors:active){.dio-sedation-dial .sd-sector{fill:Canvas}.dio-sedation-dial .sd-sector-1{fill:Highlight}.dio-sedation-dial .sd-edge,.dio-sedation-dial .sd-baseline,.dio-sedation-dial .sd-hub{stroke:CanvasText}.dio-sedation-dial .sd-stop{stroke:Highlight}.dio-sedation-dial .sd-needle{fill:CanvasText}.dio-sedation-dial .sd-hub{fill:Canvas}.dio-sedation-dial .sd-pin{fill:Highlight}}
@media print{.dio-sedation-dial .sd-controls{display:none!important}.dio-sedation-dial .sd-world{--angle:0deg!important}.dio-sedation-dial .sd-figure{break-inside:avoid}}
/* 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-sedation-dial.dio-sedation-dial .sd-controls{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-sedation-dial.dio-sedation-dial .sd-controls[hidden]{display:none}
.dio-sedation-dial.dio-sedation-dial .sd-controls 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-sedation-dial.dio-sedation-dial .sd-controls button:hover{background:#f1f5f6;border-color:#4c7288;color:#203846;text-shadow:none;text-decoration:none}
.dio-sedation-dial.dio-sedation-dial .sd-controls button:focus-visible{outline:3px solid #203846;outline-offset:2px}
.dio-sedation-dial.dio-sedation-dial .sd-controls button[aria-pressed=true]{background:#e6edf0;border-color:#4c7288}
.dio-sedation-dial.dio-sedation-dial .sd-controls button:disabled{opacity:.55;color:#203846;cursor:default}
/* the row is drawn between the title and the figure although it follows the figure in the markup */
.dio-sedation-dial.dio-sedation-dial{display:flex;flex-direction:column}
.dio-sedation-dial.dio-sedation-dial .sd-head{order:-2}
.dio-sedation-dial.dio-sedation-dial .sd-controls{order:-1}
@media print{.dio-sedation-dial.dio-sedation-dial .sd-controls{display:none!important}}
/* end animation controls */