/* "Three routes to final teeth" (two-routes v002), owner-approved and locked 2026-10-28 (Daniel: "much better- send it"; Codex two-routes v002,
   floating Surgery / About a week / Months row removed). Site placement of the locked style.css: every rule scoped to .dio-two-routes, values unchanged.
   Dropped: @font-face (site fonts.css supplies Nunito Sans), :root/body rules, the private review shell and note, the page media rule. The h1/h2 rules
   style the h3/h4 the site uses. The arch band masks with the site's own assets/arch-tile.svg (resolved from this stylesheet's folder); one 4.4 s pass
   after .2 s ending 0 0; tracks and checks settle by 2.6 s. Keyframes renamed trw- so no other page rule can collide. */
.dio-two-routes{font-family:"Avenir Next",Avenir,"Nunito Sans",system-ui,sans-serif;color:#2f4452;font-synthesis:none}
.dio-two-routes *{box-sizing:border-box}
.dio-two-routes .tr-card{margin:0;container-type:inline-size}.dio-two-routes .tr-surface{background:#f5f7f7}
.dio-two-routes .tr-head{position:relative;isolation:isolate;padding:22px 28px 20px;background:#e8eff3;border-bottom:1px solid #cad5da}
.dio-two-routes .tr-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-two-routes .tr-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-two-routes .tr-head h3{font-size:25px;line-height:1.25;font-weight:600;letter-spacing:-.02em;margin:0}.dio-two-routes .tr-routes{padding:26px 30px 28px}.dio-two-routes .tr-axis{position:relative;height:24px;margin:0 10px 28px;font-size:14px;line-height:1.2;color:#506875}.dio-two-routes .tr-axis span{position:absolute;top:0;white-space:nowrap}.dio-two-routes .tr-axis-start{left:0}.dio-two-routes .tr-axis-day{left:23%;transform:translateX(-50%)}.dio-two-routes .tr-axis-week{left:32%;transform:translateX(-50%)}.dio-two-routes .tr-axis-months{right:0}
.dio-two-routes .tr-route h4{font-size:20px;font-weight:500;line-height:1.3;margin:0 0 6px}.dio-two-routes .tr-description{font-size:16px;line-height:1.45;color:#506875;margin:0}.dio-two-routes .tr-route+.tr-route{margin-top:24px}.dio-two-routes .tr-plot{position:relative;height:88px;margin:5px 10px 0}.dio-two-routes .tr-progress{position:absolute;left:0;top:30px;width:var(--end);height:6px;background:linear-gradient(#68869a,#56737f 45%,#4a6573);transform-origin:0 50%;clip-path:polygon(3px 0,100% 0,100% calc(100% - 3px),calc(100% - 3px) 100%,0 100%,0 3px)}
.dio-two-routes .tr-origin,.dio-two-routes .tr-fixed,.dio-two-routes .tr-visit{position:absolute;top:33px;transform:translate(-50%,-50%);border-radius:50%;background:#f5f7f7;border:1.5px solid #4c7288;width:13px;height:13px}.dio-two-routes .tr-origin{left:0;background:#56737f;border-color:#344d5b;box-shadow:0 0 0 4px #f5f7f7}.dio-two-routes .tr-fixed{width:12px;height:12px}.dio-two-routes .tr-visit{width:10px;height:10px;border:0;background:#4c7288;box-shadow:0 0 0 3px #f5f7f7}.dio-two-routes .tr-plot-old .tr-progress{background:linear-gradient(#e1e7ea,#d3dde2)}.dio-two-routes .tr-plot-old .tr-progress:before{content:"";position:absolute;inset:0 28% 0 0;background:linear-gradient(#68869a,#56737f 45%,#4a6573)}
.dio-two-routes .tr-finish{display:grid;place-items:center;position:absolute;left:var(--end);top:33px;transform:translate(-50%,-50%);width:24px;height:24px;background:linear-gradient(#f4a165,#ed873c 45%,#e9853b);clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px);box-shadow:0 0 0 4px #f5f7f7}.dio-two-routes .tr-finish svg{width:20px;height:20px;fill:none;stroke:#2f4452;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dio-two-routes .tr-result{position:absolute;left:var(--end);top:55px;transform:translateX(-50%);font-size:15px;font-weight:500;line-height:1.25;text-align:center;white-space:nowrap}.dio-two-routes .tr-first-label{position:absolute;left:10%;top:55px;transform:translateX(-50%);font-size:14px;line-height:1.25;text-align:center;width:72px}.dio-two-routes .tr-result-old{left:auto;right:-10px;transform:none}.dio-two-routes .tr-stage{position:absolute;top:6px;font-size:14px;color:#506875;white-space:nowrap;line-height:1.2}.dio-two-routes .tr-first-day{left:10%;transform:translateX(-50%)}.dio-two-routes .tr-heal-label{left:36%;transform:translateX(-50%)}.dio-two-routes .tr-visits-label{left:84%;transform:translateX(-50%)}.dio-two-routes .tr-refine-label{left:41%;transform:translateX(-50%)}
.dio-two-routes .tr-tradeoff{font-size:15px;line-height:1.45;color:#506875;margin:2px 0 0}.dio-two-routes .tr-tradeoff strong{font-weight:500;color:#2f4452}
.dio-two-routes .tr-notes{border-top:1px solid #d5dfe3;padding-top:18px;margin-top:8px}.dio-two-routes .tr-notes p{font-size:15px;line-height:1.55;color:#506875;margin:0}.dio-two-routes .tr-notes strong{font-size:16px;line-height:1.45;font-weight:500;color:#2f4452;display:block;margin-bottom:7px}.dio-two-routes .tr-notes p+p{margin-top:8px;font-size:13px}.dio-two-routes figcaption{margin:16px 0 0;font-size:14px;line-height:1.55;color:#506875}.dio-two-routes .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.dio-two-routes .tr-playing .tr-field>i{animation:trw-wave 4.4s cubic-bezier(.45,.05,.35,1) .2s 1 both}
/* 2026-11-11 watched review: the three lines leave together at .3 s and are drawn at one constant speed (the full track in 2.6 s), so the 24-hour line (10% of
   the track) arrives after .26 s, the DIO week (32%) after .83 s and the older method after 2.6 s; each check appears as its line arrives. Before, each line had
   its own eased duration (.5 s, 1.4 s, 1 s) and all three were done within about a second of each other. Lengths, order and drawing unchanged. */
.dio-two-routes .tr-playing .tr-progress{animation:trw-grow 2.6s linear .3s both}.dio-two-routes .tr-playing .tr-day .tr-progress{animation-duration:.26s}.dio-two-routes .tr-playing .tr-week .tr-progress{animation-duration:.83s}.dio-two-routes .tr-playing .tr-finish{animation:trw-arrive .35s ease both}.dio-two-routes .tr-playing .tr-old .tr-finish{animation-delay:2.9s}.dio-two-routes .tr-playing .tr-day .tr-finish{animation-delay:.56s}.dio-two-routes .tr-playing .tr-week .tr-finish{animation-delay:1.13s}.dio-two-routes .tr-paused *{animation-play-state:paused!important}@keyframes trw-wave{from{background-position:100% 0}to{background-position:0 0}}@keyframes trw-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes trw-arrive{from{opacity:0}to{opacity:1}}
@container(max-width:520px){.dio-two-routes .tr-head h3{font-size:23px}.dio-two-routes .tr-routes{padding:24px}.dio-two-routes .tr-route h4{font-size:19px}.dio-two-routes .tr-description{font-size:15px}.dio-two-routes .tr-axis{font-size:12px;margin-bottom:27px}.dio-two-routes .tr-axis-week{white-space:normal!important;width:65px;text-align:center}.dio-two-routes .tr-axis-months{top:0}.dio-two-routes .tr-route+.tr-route{margin-top:18px}.dio-two-routes .tr-result{font-size:14px}.dio-two-routes .tr-stage{font-size:12px}.dio-two-routes .tr-finish{width:22px;height:22px}.dio-two-routes .tr-finish svg{width:18px;height:18px}.dio-two-routes .tr-plot{height:85px}}
@container(max-width:340px){.dio-two-routes .tr-head{padding:22px 20px 20px}.dio-two-routes .tr-head h3{font-size:22px}.dio-two-routes .tr-routes{padding:22px 18px}.dio-two-routes .tr-axis{font-size:11px;margin-left:7px;margin-right:7px}.dio-two-routes .tr-axis-day{width:38px;text-align:center;white-space:normal!important}.dio-two-routes .tr-axis-week{width:56px}.dio-two-routes .tr-plot{margin-left:7px;margin-right:7px}.dio-two-routes .tr-description{font-size:15px}.dio-two-routes .tr-result{font-size:13px}.dio-two-routes .tr-first-label{font-size:12px;width:62px}.dio-two-routes .tr-stage{font-size:11px}.dio-two-routes .tr-visits-label{left:83%}.dio-two-routes .tr-notes strong{font-size:15px}}
@media(prefers-reduced-motion:reduce){.dio-two-routes .tr-card *{animation:none!important}}html.reduce-motion .dio-two-routes .tr-card *,html[data-motion="reduce"] .dio-two-routes .tr-card *,.dio-alive-off .dio-two-routes .tr-card *,.dio-two-routes .tr-card.dio-alive-off *{animation:none!important}@media print{.dio-two-routes .tr-card *{animation:none!important}}

/* site guards: answer-body rules (section.part p/li, .ans-anim figcaption, h3/h4) must not reach in; values as locked */
.dio-two-routes .tr-head h3,.dio-two-routes .tr-route h4{font-family:inherit;color:#2f4452;text-transform:none;padding:0}
.dio-two-routes p{max-width:none}
.dio-two-routes .tr-card figcaption{padding:0;background:none;text-align:left}
.dio-two-routes .tr-finish svg{max-width:none}
.dio-two-routes .sr-only{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}
/* 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-two-routes .controls{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin:0 0 12px;padding:0;max-width:none}
.dio-two-routes .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-two-routes .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-two-routes .controls button:hover{background:#f1f5f6}.dio-two-routes .controls button:focus-visible{outline:3px solid #203846;outline-offset:2px}.dio-two-routes .controls button[aria-pressed=true]{background:#e6edf0}.dio-two-routes .controls button:disabled{opacity:.55;cursor:default}
.dio-two-routes .tr-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-two-routes .controls{display:none!important}}