/* Shared interaction styles: rolling numbers, screenshot accordion, bar chart, Toolkit magnify.
   Each page sets the colour tokens (--ui-ink, --ui-muted, --ui-line, --ui-bar, --ui-peak, --ui-tip-bg, --ui-tip-ink). */

/* ---------- rolling numbers ---------- */
.ui-roll{white-space:nowrap}
.ui-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
/* clip-path (not overflow) clips the digit stack, so the digit keeps sitting on the text baseline */
.ui-d{position:relative;display:inline-block;line-height:1.15;height:1.15em;clip-path:inset(0);vertical-align:baseline}
.ui-d>b{visibility:hidden;font-weight:inherit}
.ui-d>i{position:absolute;left:0;top:0;display:flex;flex-direction:column;font-style:normal;transform:translateY(0);
  transition:transform 1.1s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--k,0) * 70ms)}
.ui-d>i>span{display:block;height:1.15em;line-height:1.15}
.ui-roll.is-in .ui-d>i{transform:translateY(calc(var(--d) * -1.15em))}
@media (prefers-reduced-motion: reduce){.ui-d>i{transform:translateY(calc(var(--d) * -1.15em))!important;transition:none!important}}

/* ---------- screenshot accordion (wide screens; phones keep the normal stacked layout) ---------- */
@media (min-width: 720px){
  .ui-gal{display:flex!important;flex-direction:row!important;gap:12px!important;height:var(--gal-h,520px)}
  .ui-gal>figure{flex:1 1 0;min-width:0;cursor:pointer;transition:flex-grow .55s cubic-bezier(.2,.8,.2,1);outline:none}
  .ui-gal>figure.is-open{flex-grow:var(--gal-open,4);cursor:default}
  .ui-gal>figure>img,.ui-gal>figure>div{flex:1 1 auto;min-height:0}
  .ui-gal>figure img{height:100%!important;width:100%!important;aspect-ratio:auto!important;object-fit:cover;object-position:top left}
  .ui-gal>figure>div{overflow:hidden}
  .ui-gal>figure>figcaption{flex:0 0 auto;height:var(--gal-cap,72px);overflow:hidden;opacity:0;transition:opacity .3s ease}
  .ui-gal>figure.is-open>figcaption{opacity:1;transition-delay:.15s}
  /* wide desktop screenshots: show the whole open one, not a crop */
  .ui-gal>figure.is-open img{object-fit:var(--gal-fit,cover);object-position:var(--gal-pos,top left)}
  .ui-gal>figure:not(.is-open):hover img{filter:brightness(1.04)}
  .ui-gal>figure:focus-visible{box-shadow:0 0 0 2px var(--ui-ink);border-radius:18px}
}

/* ---------- bar chart ---------- */
.ui-chart{position:relative;padding:8px 4px 0}
.ui-chart-plot{position:relative;display:flex;align-items:flex-end;gap:10px;height:220px;border-bottom:1px solid var(--ui-line)}
.ui-chart-line{position:absolute;left:0;right:0;border-top:1.5px dashed var(--ui-muted);opacity:.6}
.ui-chart-line>span{position:absolute;right:0;bottom:4px;font-size:12px;color:var(--ui-muted)}
.ui-bar{position:relative;flex:1 1 0;height:var(--h);display:flex;justify-content:center;outline:none}
.ui-bar>i{position:absolute;inset:0;border-radius:7px 7px 0 0;background:var(--ui-bar);transform-origin:bottom;transform:scaleY(0);
  transition:transform .8s cubic-bezier(.2,.8,.2,1),filter .2s ease;transition-delay:calc(var(--k) * 60ms)}
.ui-bar.is-peak>i{background:var(--ui-peak)}
.ui-bar.is-part>i{opacity:.5}
.ui-chart.is-in .ui-bar>i{transform:scaleY(1)}
.ui-bar:hover>i,.ui-bar:focus-visible>i{filter:brightness(.92)}
.ui-bar>em{position:relative;margin-top:8px;font-style:normal;font-size:13px;font-weight:500;color:var(--ui-ink);opacity:0;transition:opacity .4s ease;transition-delay:calc(var(--k) * 60ms + .45s)}
.ui-chart.is-in .ui-bar>em{opacity:1}
.ui-tip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%,4px);padding:6px 10px;border-radius:8px;background:var(--ui-tip-bg);color:var(--ui-tip-ink);
  font-size:12px;line-height:1.35;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s ease,transform .15s ease;z-index:2}
.ui-bar:hover .ui-tip,.ui-bar:focus-visible .ui-tip{opacity:1;transform:translate(-50%,0)}
/* bars near the edges open their tooltip inward, so it never pokes past a phone screen
   (the plot's first child is the "one a day" line, so bars start at child 2) */
.ui-bar:nth-child(-n+4) .ui-tip{left:0;transform:translate(0,4px)}
.ui-bar:nth-last-child(-n+3) .ui-tip{left:auto;right:0;transform:translate(0,4px)}
.ui-bar:nth-child(-n+4):hover .ui-tip,.ui-bar:nth-child(-n+4):focus-visible .ui-tip,
.ui-bar:nth-last-child(-n+3):hover .ui-tip,.ui-bar:nth-last-child(-n+3):focus-visible .ui-tip{transform:translate(0,0)}
.ui-chart-x{display:flex;gap:10px;padding-top:8px}
.ui-chart-x>span{flex:1 1 0;text-align:center;font-size:12px;line-height:1.3;color:var(--ui-muted)}
@media (max-width: 560px){.ui-chart-plot,.ui-chart-x{gap:5px}.ui-chart-x>span{font-size:10.5px}.ui-bar>em{font-size:11.5px}}
@media (prefers-reduced-motion: reduce){.ui-bar>i{transform:scaleY(1)!important}.ui-bar>em{opacity:1!important}}

/* ---------- hero dot field ---------- */
/* sits behind the hero content, lets clicks through, and fades out towards its edges */
.m-field{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;color:var(--ui-ink);
  -webkit-mask-image:radial-gradient(ellipse 72% 78% at 50% 50%,#000 35%,transparent 80%);mask-image:radial-gradient(ellipse 72% 78% at 50% 50%,#000 35%,transparent 80%)}
.m-field ~ *{position:relative;z-index:1}

/* ---------- Toolkit magnify (pointer devices only) ---------- */
@media (hover: hover) and (pointer: fine){
  #tools .m-logo,#tools .m-logo-img{transform:translateY(calc(var(--mag,0) * -6px)) scale(calc(1 + var(--mag,0) * .45))!important;transition:transform .18s ease-out!important}
  #tools .m-tool{transition:border-color .2s ease,background .2s ease}
}