/* Main-page visuals (dio-visuals.js, batch 2, 2026-10-22). Card styles come from answer-charts.css and answer-anim.css;
   this file adds the site tokens for pages that load shell.css only, the rested state, bare diagrams and the two interactives.
   Contrast: ink #203846 on mineral 11.4:1, steel #4c7288 on mineral 4.8:1, muted #506875 on mineral 5.5:1, silver #d1d3d3 on navy 8.1:1. */
.dio-vis{--mineral:#f5f7f7;--ink:#203846;--steel:#4c7288;--orange:#ed873c;--muted:#506875;--rule:#cad5da;--mist:#dce6ec;
  --font:'Avenir Next',Avenir,'Nunito Sans',system-ui,sans-serif;font-family:var(--font);display:block;max-width:980px;margin-inline:auto}
.dio-vis .ans-chart,.dio-vis .ans-anim,.dio-vis .ans-ix{text-align:left}
.dio-vis figure{margin-left:0;margin-right:0}
.dio-vis .ans-anim{margin:28px 0 8px;border-top:2px solid var(--steel)}
.dio-vis .ans-anim-toggle{cursor:pointer}
/* played twice: rest on the labelled still frame (base styles of the SVG) */
.dio-rested *{animation:none!important}
.dio-vis .ans-chart .span.hi{fill:var(--orange);stroke:var(--ink);stroke-width:1.5}
/* range panel axis (Daniel 2026-11-12, one scale with the axis shown): the bar axis's muted 1 px baseline and end ticks, drawn in the SVG (dio-visuals.js) */
.dio-vis .ans-chart svg .rangeaxis{fill:none;stroke:var(--muted);stroke-width:1;shape-rendering:crispEdges;vector-effect:non-scaling-stroke}
.dio-vis .dio-chart-link,.dio-vis .dio-chart-links a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);font-size:15px;font-weight:600;text-underline-offset:4px}
.dio-vis .dio-chart-links{display:flex;flex-wrap:wrap;gap:0 22px;margin:6px 0 0}
.dio-vis .ans-chart .panels:has(> :nth-child(3)){grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:900px){.dio-vis .ans-chart .panels:has(> :nth-child(3)){grid-template-columns:1fr}}
/* 2026-11-12: three panels across (Candidacy): the axis row added under the percent bars (0581a90) left each footnote at the height of its own
   bars, 31px apart. Each panel now shares the row's four lines (heading, bars, footnote, link) through a subgrid, so the footnotes start on one
   line under the tallest bars and the links sit on one line under them. The bars do not move. Without subgrid the panels stack as before. */
@media(min-width:901px){.dio-vis .ans-chart .panels:has(> :nth-child(3)){row-gap:0}
  .dio-vis .ans-chart .panels:has(> :nth-child(3))>.panel:has(>.fine){display:grid;grid-row:span 4;grid-template-rows:subgrid;align-content:start}
  .dio-vis .ans-chart .panels:has(> :nth-child(3))>.panel>*{align-self:start}}
/* bare: a diagram that sits straight on its band (offices header map on navy) */
.dio-vis .ans-anim.dio-bare{background:none;border-top:0;margin:18px 0 0}
.dio-vis .dio-bare figcaption{color:inherit;opacity:.85;padding-left:0}
/* stays-in toggle: the buttons crop the drawing to one view; with no script both views show side by side */
.dio-toggle{display:flex;flex-wrap:wrap;gap:8px;padding:14px 16px 0}
.dio-toggle button{min-height:44px;padding:0 18px;border:2px solid var(--steel);border-radius:6px;background:#fff;color:var(--ink);font:600 15px/1 var(--font);cursor:pointer}
.dio-toggle button[aria-pressed="true"]{background:linear-gradient(180deg,#5a7a8c 0%,#4c7288 45%,#43657a 100%);border-color:#43657a;color:#fff}
.dio-toggle button:focus-visible{outline:3px solid var(--ink);outline-offset:2px}

/* interactives: same card as the charts */
.dio-ix{position:relative;margin:34px 0 8px;padding:22px 28px 24px;background:var(--mineral);color:var(--ink);border-top:2px solid var(--steel);
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px)}
.dio-ix h3{margin:0 0 6px;font-size:21px;line-height:1.25;letter-spacing:-.02em;font-weight:600}
.dio-ix .dio-ix-lead{margin:0 0 16px;font-size:16px;line-height:1.5;color:var(--muted)}
.dio-ix figcaption{margin-top:14px;font-size:13.5px;line-height:1.55;color:var(--muted)}
.dio-ix .take{margin-top:20px;padding:2px 0 2px 18px;border-left:4px solid var(--orange);font-size:17px;line-height:1.55;font-weight:500}
.dio-ix .fine{margin-top:12px;font-size:13.5px;line-height:1.55;color:var(--muted)}
.dio-seg{display:inline-flex;gap:0;margin:0 0 18px;border:2px solid var(--steel);border-radius:8px;overflow:hidden}
.dio-seg button{min-height:44px;padding:0 18px;border:0;background:#fff;color:var(--ink);font:600 15px/1 var(--font);cursor:pointer}
.dio-seg button+button{border-left:2px solid var(--steel)}
.dio-seg button[aria-pressed="true"]{background:linear-gradient(180deg,#5a7a8c 0%,#4c7288 45%,#43657a 100%);color:#fff}
.dio-seg button:focus-visible{outline:3px solid var(--ink);outline-offset:-4px}
/* one price, one bar (cost) */
.dio-onebar{display:grid;gap:22px}
.dio-onebar h4{margin:0 0 10px;font-size:12px;line-height:1.4;letter-spacing:.12em;text-transform:uppercase;font-weight:650;color:var(--steel)}
.dio-onebar .row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:8px}
.dio-onebar .price{font-size:26px;font-weight:650;font-variant-numeric:tabular-nums}
.dio-onebar .basis{font-size:14px;color:var(--muted)}
.dio-onebar .bar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;min-height:64px;border-radius:4px;overflow:hidden;
  background:linear-gradient(180deg,#5a7a8c 0%,#4c7288 45%,#43657a 100%);box-shadow:inset 0 0 0 1.5px var(--ink)}
.dio-onebar .bar span{display:flex;align-items:center;padding:8px 10px;color:#fff;font-size:14px;line-height:1.25;font-weight:600;border-right:1px solid rgba(255,255,255,.35)}
.dio-onebar .bar span:last-child{border-right:0}
.dio-onebar .pieces{display:grid;grid-template-columns:1.2fr 1fr .8fr 1.1fr;gap:8px}
.dio-onebar .pieces span{display:flex;align-items:center;min-height:52px;padding:6px 10px;border-radius:4px;background:linear-gradient(180deg,#eceeee 0%,#e3e6e6 45%,#d9dcdc 100%);
  box-shadow:inset 0 0 0 1px rgba(32,56,70,.18);font-size:14px;line-height:1.25;color:var(--ink)}
.dio-onebar .pieces span.ask{background:#fff;box-shadow:none;border:2px dashed var(--steel);font-weight:600}
@media(max-width:700px){.dio-ix{padding:18px 16px 18px}.dio-onebar .bar{grid-template-columns:1fr 1fr}.dio-onebar .bar span:nth-child(2){border-right:0}
  .dio-onebar .bar span:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.35)}.dio-onebar .pieces{grid-template-columns:1fr 1fr}}
.dio-onebar .price{transition:opacity .25s ease}.dio-onebar.swap .price{opacity:.2}
/* cover over time (warranty) */
.dio-cover svg{display:block;width:100%;height:auto;overflow:visible}
.dio-cover svg text{font-family:var(--font);fill:var(--ink)}
/* 2026-11-11 audit: on phones the drawing was scaled to about 6px type. It now keeps its drawn width and scrolls sideways inside the card;
   the edge shadows (shown only on the side with more to see) are the cue. No change where the card is 640px or wider. */
.dio-cover-scroll{overflow-x:auto;overscroll-behavior-x:contain;padding-bottom:6px;
  background:linear-gradient(90deg,var(--mineral) 40%,rgba(245,247,247,0)) 0 0/36px 100% no-repeat local,linear-gradient(270deg,var(--mineral) 40%,rgba(245,247,247,0)) 100% 0/36px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%,rgba(32,56,70,.28),rgba(32,56,70,0)) 0 0/14px 100% no-repeat scroll,radial-gradient(farthest-side at 100% 50%,rgba(32,56,70,.28),rgba(32,56,70,0)) 100% 0/14px 100% no-repeat scroll}
.dio-cover-scroll svg{min-width:640px}
.dio-cover .lw-bar{transform-box:fill-box;transform-origin:left center;transition:transform 1.6s cubic-bezier(.22,.7,.25,1)}
.dio-cover:not(.in) .lw-bar,.dio-cover:not(.in) .two-bar{transform:scaleX(0)}
.dio-cover .two-bar{transform-box:fill-box;transform-origin:left center;transition:transform .9s cubic-bezier(.22,.7,.25,1)}
.dio-cover .dot{transition:opacity .3s ease}.dio-cover:not(.in) .dot{opacity:0}
.dio-cover .prices{display:grid;grid-template-columns:1fr 1fr;gap:10px 24px;margin:14px 0 0;font-size:15px;line-height:1.45}
.dio-cover .prices b{display:block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:650;color:var(--steel)}
@media(max-width:600px){.dio-cover .prices{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.dio-cover *{transition:none!important}.dio-onebar .price{transition:none}}
html.reduce-motion .dio-cover *,html.reduce-motion .dio-onebar .price{transition:none!important}
/* placement helpers (dio-charts-main.js V.place) */
.dio-vis.dio-wrap{width:min(980px,calc(100% - 40px));margin-inline:auto}
/* 2026-11-11 audit: a quote placed between full-width sections takes the page column (the rule above never reached it: quote hosts are not .dio-vis),
   so its bar and text start at the same left edge as the headings instead of the screen edge. Quotes placed inside a column are left alone. */
main>.dio-q.dio-wrap{width:var(--dio-col,calc(100% - 40px));margin-inline:auto}
.dio-vis.dio-q{max-width:980px}
.dio-span{grid-column:1/-1}
/* 2026-11-11 watched review: the looping drawings on main pages (yearly visit 980px, refresh 772px, materials 716px wide) are held to the same 640px
   the answer pages use, centred, so the drawn labels and the changing line under them read at the same size everywhere. Still diagrams keep their own widths. */
.dio-vis .ans-anim.dio-anim:not(.is-static){max-width:640px;margin-inline:auto}
.dio-vis.dio-wk-anim{max-width:760px;margin:8px auto 30px}
.dio-vis.dio-offices-map{max-width:760px;margin:22px 0 0}
.dio-offices-map figcaption{color:#d1d3d3!important;font-size:14px}
.dio-vis .ans-chart-head h3{margin:0}
/* week strip stops are keyboard links (2026-10-28): a visible focus ring on the stop's circle, nothing changes for the mouse */
.dio-anim svg a[tabindex="0"]{outline:none}
.dio-anim svg a[tabindex="0"]:focus-visible circle{stroke:#ed873c;stroke-width:5}
/* scoped HTML widgets on main pages: the widget draws its own card */
.dio-anim-widget{margin:0}
/* 2026-11-12 owner ruling C20: three more phone drawings keep a readable size and scroll sideways inside their card, the same rule as the
   week strip on The Process (560px, the same 800-wide drawing family) and "A day or a week" on /smile/: the drawing never goes narrower
   than 560px and a fade on the right edge (it ends past the art) shows there is more. Material joint (Zirconia), yearly visit (Care) and
   "keep your implants" (Refresh). Art untouched; at 600px and wider nothing changes. */
@media(max-width:599px){
  .dio-vis:is([data-dio-anim="material-joint"],[data-dio-anim="care-visit"],[data-dio-anim="refresh-swap"]) .ans-anim-stage{display:flex;align-items:flex-start;aspect-ratio:auto!important;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
  .dio-vis:is([data-dio-anim="material-joint"],[data-dio-anim="care-visit"],[data-dio-anim="refresh-swap"]) .ans-anim-stage>svg{flex:none;width:100%;min-width:560px;height:auto}
  .dio-vis[data-dio-anim="material-joint"] .ans-anim-stage>svg{aspect-ratio:800/450}
  .dio-vis:is([data-dio-anim="care-visit"],[data-dio-anim="refresh-swap"]) .ans-anim-stage>svg{aspect-ratio:800/540}
  .dio-vis:is([data-dio-anim="material-joint"],[data-dio-anim="care-visit"],[data-dio-anim="refresh-swap"]) .ans-anim-stage::after{content:"";flex:none;align-self:stretch;position:sticky;right:0;width:36px;margin-left:-12px;pointer-events:none;
    background:linear-gradient(90deg,rgba(245,247,247,0),var(--mineral) 85%)}
}
/* 2026-11-12 video drawing slot written in a page's HTML (the arch assembly clip before the comparison on Full-arch implants). Until the script
   fills it, the empty slot keeps the card's height, so nothing below it moves at load: same outer margins as the card (28px above, 8px below),
   2px rule + the 1280:800 stage (the card is at most 640px wide) + the line bar and caption, as measured in build b43 (Avenir Next): 101px from
   601px up; 92px at 469 to 600px; 113px at 388 to 468px; 132px at 373 to 387px; 153px at 372px and under, where the lines take more rows.
   Without scripts nothing will fill it, so it takes no room then. Once filled, the .dio-vis rules above apply. */
.dio-slot-video:empty{width:min(980px,calc(100% - 40px));margin:28px auto 8px}   /* the filled slot's own box (.dio-vis.dio-wrap), so it does not move either */
.dio-slot-video:empty::before{content:"";display:block;box-sizing:content-box;max-width:640px;margin-inline:auto;aspect-ratio:1280/800;border-top:2px solid transparent}
.dio-slot-video:empty::after{content:"";display:block;height:101px}
@media(max-width:600px){.dio-slot-video:empty::after{height:92px}}
@media(max-width:468px){.dio-slot-video:empty::after{height:113px}}
@media(max-width:387px){.dio-slot-video:empty::after{height:132px}}
@media(max-width:372px){.dio-slot-video:empty::after{height:153px}}
@media(scripting:none){.dio-slot-video:empty{display:none}}