/* "When to keep smoke away" smoking timeline, owner-approved and locked 2026-10-28 (Codex family-c/smoke-timeline-v002, APPROVED-LOCK.json).
   Site placement of the locked style.css: every rule scoped to .dio-smoke-timeline, the h1/h2 rules moved to the component title (h3) and
   phase headings (h4), the review shell, review note, page body/:root rules and the @font-face dropped (the site's fonts.css supplies
   Nunito Sans). Values are unchanged. The arch header is the site's own chart-card band (answer-charts.css lines 14-24): the mask is the
   site file assets/arch-tile.svg (sha256 cd8e28f9...), referenced from this sheet's folder, never a copy. Container queries are the lock's. */
.dio-smoke-timeline{font-family:"Avenir Next",Avenir,"Nunito Sans",system-ui,sans-serif;color:#203846;font-synthesis:none;font-size:16px;line-height:normal}
.dio-smoke-timeline *{box-sizing:border-box}
.dio-smoke-timeline .st-card{margin:0;container-type:inline-size}
.dio-smoke-timeline .st-surface{background:#f5f7f7}
.dio-smoke-timeline .st-head{position:relative;isolation:isolate;padding:22px 28px 20px;background:#e8eff3;border-bottom:1px solid #cad5da}
.dio-smoke-timeline .st-field{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;
 -webkit-mask-image:url(../../arch-tile.svg),linear-gradient(90deg,rgba(0,0,0,.05),rgba(0,0,0,.10) 40%,rgba(0,0,0,.45) 72%,#000);
 mask-image:url(../../arch-tile.svg),linear-gradient(90deg,rgba(0,0,0,.05),rgba(0,0,0,.10) 40%,rgba(0,0,0,.45) 72%,#000);
 -webkit-mask-size:179.4px 179.4px,100% 100%;mask-size:179.4px 179.4px,100% 100%;-webkit-mask-repeat:repeat,no-repeat;mask-repeat:repeat,no-repeat;
 -webkit-mask-composite:source-in;mask-composite:intersect}
.dio-smoke-timeline .st-field>i{position:absolute;inset:0;background:linear-gradient(115deg,rgba(76,114,136,.20) 0%,rgba(76,114,136,.20) 30%,rgba(76,114,136,.34) 40%,rgba(237,135,60,.55) 47%,rgba(76,114,136,.30) 54%,rgba(76,114,136,.20) 64%,rgba(76,114,136,.20) 100%);background-size:300% 100%;background-position:0 0}
.dio-smoke-timeline .st-head h3.st-title{font-family:inherit;color:#203846;font-size:25px;line-height:1.25;font-weight:600;letter-spacing:-.02em;margin:0}
.dio-smoke-timeline .st-timeline{list-style:none;margin:0;padding:28px;display:grid;gap:20px}
.dio-smoke-timeline .st-timeline>li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:24px;position:relative;margin:0}
.dio-smoke-timeline .st-rail{--st-cut:4px;position:relative;justify-self:center;width:16px;min-height:100%;background:linear-gradient(90deg,#e6e8e8,#d4d7d7 38%,#c9cdcd);overflow:hidden;clip-path:polygon(var(--st-cut) 0,100% 0,100% calc(100% - var(--st-cut)),calc(100% - var(--st-cut)) 100%,0 100%,0 var(--st-cut))}
.dio-smoke-timeline .st-rail>i{position:absolute;inset:0;transform-origin:center top;background:linear-gradient(90deg,#68869a 0%,#56737f 40%,#4a6573 100%);box-shadow:inset 1px 0 0 rgba(255,255,255,.3),inset -1px 0 0 rgba(16,32,42,.16)}
.dio-smoke-timeline .st-after .st-rail>i{background:linear-gradient(90deg,#f4a165 0%,#ed873c 42%,#e9853b 100%)}
.dio-smoke-timeline .st-copy h4{font-family:inherit;margin:0 0 6px;font-size:16px;line-height:1.4;font-weight:500;color:#4c7288}
.dio-smoke-timeline .st-copy p{margin:0;font-size:18px;line-height:1.55;font-weight:400;color:#203846}
.dio-smoke-timeline .st-copy .st-time{font-size:23px;line-height:1.3;font-weight:600;margin-bottom:10px;letter-spacing:-.015em}
.dio-smoke-timeline .st-copy .st-healing{margin-top:10px}
.dio-smoke-timeline .st-surgery{align-items:center;min-height:26px}
.dio-smoke-timeline .st-day-marker{--st-cut:3px;width:18px;height:12px;justify-self:center;background:linear-gradient(180deg,#68869a 0%,#56737f 40%,#4a6573 100%);clip-path:polygon(var(--st-cut) 0,100% 0,100% calc(100% - var(--st-cut)),calc(100% - var(--st-cut)) 100%,0 100%,0 var(--st-cut));box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -1px 0 rgba(16,32,42,.16)}
.dio-smoke-timeline .st-surgery p{font-size:19px;line-height:1.4;font-weight:500;margin:0;color:#203846}
.dio-smoke-timeline .st-card>figcaption{margin:16px 0 0;padding:0;text-align:left;background:none;font-size:14px;line-height:1.55;color:#506875}
.dio-smoke-timeline .st-playing .st-field>i{animation:st-wave 4.4s cubic-bezier(.45,.05,.35,1) .2s 1 both}
.dio-smoke-timeline .st-playing .st-before .st-rail>i{animation:st-grow 1.3s cubic-bezier(.22,.7,.25,1) .3s 1 both}
.dio-smoke-timeline .st-playing .st-after .st-rail>i{animation:st-grow 1.3s cubic-bezier(.22,.7,.25,1) 1.7s 1 both}
.dio-smoke-timeline .st-paused *{animation-play-state:paused!important}
@keyframes st-wave{from{background-position:100% 0}to{background-position:0 0}}
@keyframes st-grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@container(max-width:500px){
 .dio-smoke-timeline .st-head h3.st-title{font-size:23px}
 .dio-smoke-timeline .st-timeline{padding:24px;gap:18px}
 .dio-smoke-timeline .st-timeline>li{gap:18px}
 .dio-smoke-timeline .st-copy h4{font-size:16px}
 .dio-smoke-timeline .st-copy .st-time{font-size:21px;margin-bottom:8px}
 .dio-smoke-timeline .st-copy p{font-size:17px;line-height:1.5}
 .dio-smoke-timeline .st-surgery p{font-size:18px}
}
@container(max-width:340px){
 .dio-smoke-timeline .st-head h3.st-title{font-size:22px}
 .dio-smoke-timeline .st-timeline{padding:22px 20px}
 .dio-smoke-timeline .st-timeline>li{grid-template-columns:16px minmax(0,1fr);gap:14px}
 .dio-smoke-timeline .st-rail{width:14px}
 .dio-smoke-timeline .st-copy .st-time{font-size:20px}
 .dio-smoke-timeline .st-copy p{font-size:16px;line-height:1.55}
}
@media(prefers-reduced-motion:reduce){.dio-smoke-timeline .st-card *{animation:none!important}}
html:is(.reduce-motion,.dio-alive-off) .dio-smoke-timeline .st-card *,html[data-motion="reduce"] .dio-smoke-timeline .st-card *,.dio-alive-off .dio-smoke-timeline .st-card *{animation:none!important}
@media print{.dio-smoke-timeline .st-card *{animation:none!important}}
/* 2026-11-11 watched review: the two filling bars are 16px wide (14px on the narrowest phones) instead of 12px (11px), inside the same 18px (16px) column. */
/* Replay / Still view controls restored 2026-11-11 (Daniel: animations get pause or replay; GPT 21:37Z).
   Same look as the where-bar and plan-b controls: one row above the figure, right side, wrapping on narrow widths; real buttons at least 44 px
   tall with a visible focus ring; hidden in print. Every rule is scoped to this widget. */
.dio-smoke-timeline .controls{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin:0 0 12px;padding:0;max-width:none}
.dio-smoke-timeline .controls[hidden]{display:none}
/* 2026-11-11 audit: the controls take the finish of the site's animation toggle (2px steel border, 6px corners, ink focus ring) so every animation's controls match */
.dio-smoke-timeline .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;cursor:pointer}
.dio-smoke-timeline .controls button:hover{background:#f1f5f6}.dio-smoke-timeline .controls button:focus-visible{outline:3px solid #203846;outline-offset:2px}.dio-smoke-timeline .controls button[aria-pressed=true]{background:#e6edf0}.dio-smoke-timeline .controls button:disabled{opacity:.55;cursor:default}
.dio-smoke-timeline .st-status{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
@media print{.dio-smoke-timeline .controls{display:none!important}}