/* "Decisions before", owner-approved and locked 2026-10-28 (Codex family-c/decisions-before-v002, APPROVED-LOCK.json;
   Daniel: "perfection- submit to lead to give to claude"). Site placement of the locked style.css: every rule scoped to
   .dio-decisions-before, the page's own wrapper padding, body rules and font file dropped, h1 shown as the component title (h3) and
   the two column h2s as h4 (heading order under the answer's h2). Values are unchanged. Nunito Sans comes from the site's fonts.css.
   Root resets (line-height, font-size, colour, margins) undo the answer body's section.part p / li rules so the locked look holds.
   Breakpoints follow the component's own width (container queries), not the screen: it sits in the answer body column after
   #boring, so it takes the stacked phone composition whenever that box is narrow. Clinical sign-off is still owed. */
.dio-decisions-before{--font:'Avenir Next',Avenir,Nunito Sans,system-ui,sans-serif;--navy:#2f4452;--steel:#4c7288;--orange:#ed873c;color:var(--navy);font-family:var(--font);font-synthesis:none;background:#fff;font-size:16px;line-height:normal;max-width:1080px;margin:0 auto;container-type:inline-size}
.dio-decisions-before *{box-sizing:border-box}
.dio-decisions-before .db-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:20px}
.dio-decisions-before .db-title{font-family:var(--font);color:var(--navy);font-size:28px;font-weight:600;line-height:1.2;letter-spacing:-.025em;margin:0}
.dio-decisions-before .controls{display:flex;gap:10px}.dio-decisions-before .controls[hidden]{display:none}
.dio-decisions-before button{font:500 14px/1.2 var(--font);color:var(--navy);border:1px solid #a9b8bf;border-radius:2px;background:#fff;min-height:48px;min-width:88px;padding:10px 16px;cursor:pointer}
.dio-decisions-before button:hover{background:#f1f5f6;border-color:var(--navy)}.dio-decisions-before button:focus-visible{outline:3px solid var(--navy);outline-offset:3px}
.dio-decisions-before button[aria-pressed=true]{background:#e6edf0;border-color:var(--steel)}.dio-decisions-before button:disabled{opacity:.6;cursor:default}
.dio-decisions-before figure{margin:0}
.dio-decisions-before .scene{background:#f5f7f7;padding:20px 30px 22px}
.dio-decisions-before .narration{min-height:52px;display:flex;align-items:center;justify-content:center;text-align:center;margin:0 0 18px;font-size:18px;line-height:1.45;font-weight:500;color:inherit}
.dio-decisions-before .stage{display:grid;grid-template-columns:1fr 1fr;gap:64px;position:relative;max-width:880px;margin:auto}
.dio-decisions-before .planning,.dio-decisions-before .surgery{min-width:0}
.dio-decisions-before .db-col-head{font-family:var(--font);color:inherit;font-size:23px;font-weight:600;line-height:1.3;letter-spacing:-.02em;text-align:center;margin:0 0 19px}
.dio-decisions-before .workspace{position:relative;height:410px;width:100%}
.dio-decisions-before .clipboard{isolation:auto}
.dio-decisions-before .clipboard:before{content:'';position:absolute;inset:5px 0 0;border-radius:7px;background:linear-gradient(120deg,#dbe6eb,#b6c9d3 60%,#a3bbc8);border:1px solid #8ba5b3;box-shadow:0 5px 5px #2f445212}
.dio-decisions-before .paper{position:absolute;inset:16px 10px 12px;background:#fff;border:1px solid #d5dfe3;border-radius:2px}
.dio-decisions-before .paper:after{content:'';position:absolute;inset:47px 18px 24px;background:repeating-linear-gradient(to bottom,transparent 0,transparent 46px,#e9eff2 46px,#e9eff2 47px,transparent 47px,transparent 55px)}
.dio-decisions-before .clip{position:absolute;z-index:3;left:50%;top:0;transform:translateX(-50%);width:116px;height:32px;border:1px solid #7893a2;border-radius:4px;background:linear-gradient(180deg,#f8fbfc,#a8bfcc 48%,#dae5eb 54%,#9ab2c0);box-shadow:0 3px 2px #2f445218}
.dio-decisions-before .clip span{display:block;width:46px;height:8px;margin:7px auto;border:1px solid #8ba3b0;border-radius:6px;background:#f5f7f7}
.dio-decisions-before .decision-slots,.dio-decisions-before .origin-slots{list-style:none;margin:0;position:absolute;inset:55px 20px 22px;display:grid;grid-template-columns:1fr;grid-template-rows:repeat(6,1fr);gap:8px;padding:0}
.dio-decisions-before .decision{position:relative;z-index:4;display:flex;align-items:center;gap:11px;margin:0;color:inherit;background:#fff;border:1px solid #b2c3cc;border-radius:3px;box-shadow:0 2px 2px #2f44520b;padding:9px 11px;font-size:17px;font-weight:500;line-height:1.2;transform-origin:50% 50%;will-change:transform}
.dio-decisions-before .check{display:flex;align-items:center;justify-content:center;flex:0 0 22px;width:22px;height:22px;border:1.5px solid #9cb1bd;border-radius:50%;color:var(--steel);background:#f5f8f9}
.dio-decisions-before .check svg{width:22px;height:22px}
.dio-decisions-before .check path{fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
.dio-decisions-before .chair{position:absolute;inset:20px 0 auto;width:100%;max-width:none;height:320px;object-fit:contain;opacity:1;border-radius:0}
.dio-decisions-before .patient-focus{position:absolute;inset:auto 8px 20px;margin:0;padding:14px 10px;color:inherit;background:#fff4eb;border:1.5px solid var(--orange);font-size:21px;line-height:1.3;text-align:center;font-weight:600;opacity:1}
.dio-decisions-before .judgement{text-align:center;font-size:16px;line-height:1.5;margin:25px 0 0;color:inherit}
.dio-decisions-before .risk{text-align:center;font-size:15px;line-height:1.5;font-weight:500;margin:12px 0 0;color:inherit}
.dio-decisions-before figcaption{text-align:center;font-size:14px;line-height:1.5;color:#566874;padding:20px 10px 0}
.dio-decisions-before .sr-only{position:absolute;width:1px;height:1px;margin:0;clip-path:inset(50%);overflow:hidden;white-space:nowrap}
@container (max-width:760px){.dio-decisions-before .scene{padding:18px 20px 20px}.dio-decisions-before .stage{gap:32px}.dio-decisions-before .decision{font-size:15px;gap:8px;padding:8px}.dio-decisions-before .decision-slots,.dio-decisions-before .origin-slots{inset-inline:14px}.dio-decisions-before .db-col-head{font-size:21px}.dio-decisions-before .patient-focus{font-size:18px}.dio-decisions-before .check{flex-basis:20px;width:20px;height:20px}}
@container (max-width:600px){.dio-decisions-before .db-head{flex-wrap:wrap;gap:15px;margin-bottom:18px}.dio-decisions-before .db-title{font-size:25px}.dio-decisions-before .controls{gap:8px}.dio-decisions-before button{min-width:86px;padding-inline:14px}.dio-decisions-before .scene{padding:12px 14px 20px}.dio-decisions-before .narration{font-size:16px;min-height:47px;margin-bottom:15px}.dio-decisions-before .stage{grid-template-columns:1fr;gap:24px;max-width:410px}.dio-decisions-before .db-col-head{font-size:20px;margin-bottom:13px}.dio-decisions-before .workspace{height:246px}.dio-decisions-before .decision-slots,.dio-decisions-before .origin-slots{inset:48px 12px 15px;grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,1fr);gap:7px}.dio-decisions-before .decision{font-size:14px;line-height:1.2;padding:7px;gap:7px}.dio-decisions-before .check{flex-basis:18px;width:18px;height:18px}.dio-decisions-before .check svg{width:18px;height:18px}.dio-decisions-before .paper{inset:14px 7px 8px}.dio-decisions-before .paper:after{display:none}.dio-decisions-before .clip{width:98px;height:28px}.dio-decisions-before .clip span{height:7px;margin-top:6px}.dio-decisions-before .chair{height:204px;top:-6px}.dio-decisions-before .patient-focus{inset:auto 8px 0;font-size:19px;padding:11px 8px}.dio-decisions-before .judgement{font-size:15px;margin-top:22px;text-wrap:balance}.dio-decisions-before .risk{font-size:14px;margin-top:12px}.dio-decisions-before figcaption{font-size:13px;padding:16px 8px 0}}
@container (max-width:360px){.dio-decisions-before .scene{padding-inline:10px}.dio-decisions-before .decision-slots,.dio-decisions-before .origin-slots{inset-inline:10px}.dio-decisions-before .decision{font-size:13px;gap:5px;padding:6px}.dio-decisions-before .patient-focus{font-size:18px}.dio-decisions-before .check{flex-basis:16px;width:16px;height:16px}}
@media print{.dio-decisions-before .controls{display:none!important}.dio-decisions-before .decision{transform:none!important}.dio-decisions-before .check path{stroke-dashoffset:0!important}.dio-decisions-before .chair,.dio-decisions-before .patient-focus{opacity:1!important}}

/* Decisions resolve into the paper; the patient gets the single signature frame. */
.dio-decisions-before .decision.is-planned{background:#f0f5f7;border-color:#d8e3e8;box-shadow:none}
.dio-decisions-before .decision.is-planned .check{background:var(--steel);border-color:var(--steel);color:#fff}
.dio-decisions-before .patient-focus{border:0;background:var(--orange);padding:16px 16px;clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px)}
.dio-decisions-before .patient-focus:before{content:'';position:absolute;inset:1.5px;background:#fff;clip-path:polygon(11px 0,100% 0,100% calc(100% - 11px),calc(100% - 11px) 100%,0 100%,0 11px)}
.dio-decisions-before .patient-focus span{position:relative}
@container (max-width:600px){.dio-decisions-before .narration{margin-bottom:12px}.dio-decisions-before .stage{gap:17px}.dio-decisions-before .db-col-head{margin-bottom:10px}.dio-decisions-before .workspace{height:224px}.dio-decisions-before .decision-slots,.dio-decisions-before .origin-slots{top:43px;bottom:13px;gap:6px}.dio-decisions-before .theatre{height:208px}.dio-decisions-before .chair{height:174px;top:-8px}.dio-decisions-before .patient-focus{padding:12px 14px}.dio-decisions-before .judgement{margin-top:18px}}
/* 2026-11-11 watched review: in the stacked (phone) composition the cards travel up from "During surgery" to the clipboard and used to fly across
   that heading. The heading now sits above them on the scene's own ground colour, so each card passes under it. Nothing changes at rest. */
@container (max-width:600px){.dio-decisions-before .surgery .db-col-head{position:relative;z-index:7;background:#f5f7f7}}
/* 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-decisions-before.dio-decisions-before .controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px;width:auto;min-height:0;margin:0 0 0 auto;padding:0;border:0}
.dio-decisions-before.dio-decisions-before .controls[hidden]{display:none}
.dio-decisions-before.dio-decisions-before .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-decisions-before.dio-decisions-before .controls button:hover{background:#f1f5f6;border-color:#4c7288;color:#203846;text-shadow:none;text-decoration:none}
.dio-decisions-before.dio-decisions-before .controls button:focus-visible{outline:3px solid #203846;outline-offset:2px}
.dio-decisions-before.dio-decisions-before .controls button[aria-pressed=true]{background:#e6edf0;border-color:#4c7288}
.dio-decisions-before.dio-decisions-before .controls button:disabled{opacity:.55;color:#203846;cursor:default}
.dio-decisions-before.dio-decisions-before .db-head{flex-wrap:wrap;margin-bottom:12px}
@media print{.dio-decisions-before.dio-decisions-before .controls{display:none!important}}
/* end animation controls */