/* Sourced answer charts (2026-10-22). Site tokens from styles.css; orange marks the group the takeaway is about.
   Restyle 2026-10-22 (Daniel: "match our theme", "a tiny bit of animation"). Previous version: answer-charts-old-2026-10-22-chartstyle.css.
   Card: mineral body, chamfered corners like the controls, light arch-wave header band (base #e8eff3, the dio-blue-field--light tone).
   Panel heads use the site .label style. Tracks are static silver aluminium; bars are steel aluminium; the highlight bar is orange on an ink keyline.
   Measured: ink #203846 on band #e8eff3 10.5:1, on mineral #f5f7f7 11.4:1; steel label #4c7288 on mineral 4.8:1; muted #506875 on mineral 5.5:1;
   steel bar vs silver track 3.2:1 worst stop (3.9:1 to 4.4:1 at matching stops); ink keyline vs track 7.6:1 or more, ink vs orange 4.7:1.
   Motion is finite and starts on first view (.in): bars grow 1.1 s, numbers count up with them (answer.js), one sheen crosses the highlight bar,
   the arch wave drifts across the band once. Hover replays the sheen. All of it is off under reduced motion (.still, media query, html.reduce-motion). */
.ans-chart{--alu-track:linear-gradient(180deg,#eceeee 0%,#e3e6e6 45%,#d9dcdc 100%);--alu-steel:linear-gradient(180deg,#5a7a8c 0%,#4c7288 45%,#43657a 100%);
  --alu-orange:linear-gradient(180deg,#f4a165 0%,#ed873c 42%,#e9853b 100%);--chamfer:14px;
  position:relative;margin:34px 0 8px;padding:0 28px 24px;background:var(--mineral);color:var(--ink);border-top:2px solid var(--steel);
  clip-path:polygon(var(--chamfer) 0,100% 0,100% calc(100% - var(--chamfer)),calc(100% - var(--chamfer)) 100%,0 100%,0 var(--chamfer))}

/* header band: the light arch field from the answer page header, quiet at the reading edge, a little stronger to the right */
.ans-chart-head{position:relative;isolation:isolate;margin:0 -28px;padding:22px 28px 20px;background:#e8eff3;border-bottom:1px solid var(--rule)}
.ans-chart-field{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;
  -webkit-mask-image:url(assets/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(assets/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}
/* resting state is the end frame: steel lines, the orange crest already past */
.ans-chart-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}
.ans-chart.in:not(.still) .ans-chart-field>i{animation:ans-wave 4.4s cubic-bezier(.45,.05,.35,1) .2s 1 both}
@keyframes ans-wave{from{background-position:100% 0}to{background-position:0 0}}
.ans-chart h3{font-size:21px;line-height:1.25;letter-spacing:-.02em;font-weight:600;max-width:34em}

.ans-chart .panels{display:grid;grid-template-columns:1fr 1fr;gap:34px;margin-top:24px}
.ans-chart .panels:has(> :only-child){grid-template-columns:minmax(0,600px)}
.ans-chart .panel{min-width:0}
/* the site's .label: small capitals, steel, letterspaced, with the short steel rule */
.ans-chart h4{position:relative;margin:0 0 22px;padding-bottom:9px;font-size:12px;line-height:1.4;letter-spacing:.12em;text-transform:uppercase;font-weight:650;color:var(--steel)}
.ans-chart h4::after{content:'';position:absolute;left:0;bottom:0;width:42px;height:2px;background:var(--steel);opacity:.65}

/* bar rows (HTML): label | aluminium track | value */
.ans-chart .bars{display:grid;grid-template-columns:minmax(0,var(--lw,112px)) minmax(0,1fr) auto;gap:12px 14px;align-items:center}
.ans-chart .row{display:contents}
.ans-chart .lab{font-size:15px;line-height:1.3}
.ans-chart .row.hi .lab{font-weight:600}
.ans-chart .track{position:relative;display:block;height:22px;border-radius:3px;overflow:hidden;background:var(--alu-track);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(20,40,52,.16),inset 0 0 0 1px rgba(32,56,70,.10)}
.ans-chart .bar{position:absolute;left:0;top:0;bottom:0;width:var(--w);overflow:hidden;border-radius:3px 2px 2px 3px;background:var(--alu-steel);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30),inset 0 -1px 0 rgba(0,0,0,.30);transform-origin:left center;transition:transform 1.1s var(--ease,cubic-bezier(.22,.7,.25,1))}
/* 2026-11-11 watched review: a bar for any value above zero is at least 6px wide, so the smallest ones (under 3% of the track) no longer read as empty. The printed value is unchanged. */
.ans-chart .bar.some{min-width:6px}
/* the star chart on Reviews and Smile gallery is left exactly as it was (lead, 2026-11-11: nothing on /reviews/ beyond the count clamp) */
[data-dio-chart="results-stars"] .ans-chart .bar.some{min-width:0}
.ans-chart .bar.hi{background:var(--alu-orange);box-shadow:inset 0 0 0 1.5px var(--ink),inset 0 2.5px 0 rgba(255,255,255,.35)}
.ans-chart:not(.in) .bar{transform:scaleX(0)}
/* one soft sheen crosses the highlight bar after it lands; hovering the card replays it */
.ans-chart .bar.hi::after{content:'';position:absolute;top:1.5px;bottom:1.5px;left:-50px;width:46px;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.6),rgba(255,255,255,0));opacity:0}
.ans-chart.in:not(.still) .bar.hi::after{animation:ans-sheen 1.4s ease-in-out 1.3s 1}
@media(hover:hover){.ans-chart.in:not(.still):hover .bar.hi::after{animation:ans-sheen-again 1.4s ease-in-out .1s 1}}
@keyframes ans-sheen{0%{opacity:0;left:-50px}15%{opacity:1}85%{opacity:1}100%{opacity:0;left:100%}}
@keyframes ans-sheen-again{0%{opacity:0;left:-50px}15%{opacity:1}85%{opacity:1}100%{opacity:0;left:100%}}
.ans-chart .v{font-size:16px;font-weight:650;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;min-width:3.2em}
/* percent scale (Daniel 2026-11-12: one scale per chart, with the axis shown; answer.js picks the scale): a baseline under the track column with a
   tick at each end, "0%" under the start of the track and the scale's top under its end. Muted ink at the range panel's label size; no new colours. */
.ans-chart .bars .axis{grid-column:2;position:relative;display:flex;justify-content:space-between;margin-top:-4px;padding-top:5px;border-top:1px solid var(--muted);
  font-size:12.5px;line-height:1.3;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.ans-chart .bars .axis::before,.ans-chart .bars .axis::after{content:'';position:absolute;top:-1px;width:1px;height:5px;background:var(--muted)}
.ans-chart .bars .axis::before{left:0}
.ans-chart .bars .axis::after{right:0}

/* SVG panels (range, dots) */
.ans-chart svg{width:100%;max-width:480px;height:auto;display:block;overflow:visible}
.ans-chart text{font:14px var(--font);fill:var(--ink)}
.ans-chart text.v{font-weight:650;font-variant-numeric:tabular-nums}
.ans-chart text.reflab{font-size:12.5px}
.ans-chart svg .track{fill:#e3e6e6;stroke:rgba(32,56,70,.14);stroke-width:1}
.ans-chart svg .ref{stroke:var(--ink);stroke-width:1.5;stroke-dasharray:4 3}
.ans-chart svg .span{fill:var(--steel)}
.ans-chart svg .dot{fill:var(--steel)}
.ans-chart svg .dot.hi{fill:var(--orange);stroke:var(--ink);stroke-width:1.5}
.ans-chart .late{transition:opacity .5s ease}
.ans-chart:not(.in) .late{opacity:0}

/* takeaway in the pull-quote manner (orange rule, ink type); fine print and sources like the site's disclosures */
.ans-chart .take{margin-top:26px;padding:2px 0 2px 18px;border-left:4px solid var(--orange);font-size:17px;line-height:1.55;font-weight:500;max-width:46em}
.ans-chart .fine{margin-top:14px;font-size:13.5px;line-height:1.55;color:var(--muted)}
.ans-chart .panel>.fine{margin-top:12px}
.ans-chart .ans-note{padding-left:18px;border-left:2px solid var(--rule);max-width:60em}
.ans-chart .ans-src{margin-top:18px;padding-top:14px;border-top:1px solid var(--rule)}
.ans-chart .ans-src-h{display:block;font-size:11.5px;line-height:1.4;letter-spacing:.12em;text-transform:uppercase;font-weight:650;color:var(--steel)}
.ans-chart ol{margin:6px 0 0;padding-left:18px}
.ans-chart li+li{margin-top:4px}

@media(max-width:700px){
  .ans-chart{--chamfer:10px;padding:0 16px 18px}
  .ans-chart-head{margin:0 -16px;padding:18px 16px 16px}
  .ans-chart h3{font-size:19px}
  .ans-chart .panels{grid-template-columns:1fr;gap:28px;margin-top:20px}
  .ans-chart .panels:has(> :only-child){grid-template-columns:1fr}
  /* label on its own line, then track and value */
  .ans-chart .bars{grid-template-columns:minmax(0,1fr) auto;gap:6px 12px}
  .ans-chart .lab{grid-column:1/-1;margin-top:6px}
  .ans-chart .row:first-child .lab{margin-top:0}
  .ans-chart .bars .axis{grid-column:1;margin-top:0}
  .ans-chart svg text{font-size:18px}
  .ans-chart svg text.reflab{font-size:16px}
  .ans-chart .take{font-size:16.5px;padding-left:14px}
  .ans-chart .ans-note{padding-left:12px}
}
@media(prefers-reduced-motion:reduce){.ans-chart .bar,.ans-chart .late{transition:none}.ans-chart:not(.in) .bar{transform:none}.ans-chart:not(.in) .late{opacity:1}.ans-chart *,.ans-chart *::after{animation:none!important}}
html.reduce-motion .ans-chart .bar,html.reduce-motion .ans-chart .late{transition:none!important}
html.reduce-motion .ans-chart *,html.reduce-motion .ans-chart *::after{animation:none!important}
.ans-chart.still .bar,.ans-chart.still .late{transition:none}