/* The coin ticker, one component for the coin pages (lib/page.js strip()) and the home page (index.html, filled by
   site.js): ten coins with their Coil now. Loaded after theme.css. The coin pages' load reveal and once-a-session nudge
   stay in coil.css; this file is the look and the pressed state only, so on the home page the ticker sits still. */
.strip{--light-slate:#C5CAD4}
/* Ten coins with their Coil now. One row that scrolls sideways inside its own box below 48rem (the page
   never does); ten columns above. The quietest coin's icon and label are teal; the open coin has a white ring. */
.strip{display:flex;gap:4px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;margin:0 calc(var(--gutter) * -1);padding:0 var(--gutter);scroll-padding:0 var(--gutter)}
.strip::-webkit-scrollbar{display:none}
.strip a{position:relative;flex:0 0 64px;scroll-snap-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:72px;padding:8px 0;border-radius:12px;color:var(--muted);font-size:16px;font-weight:600;line-height:1.25;text-decoration:none;transition:color .12s ease-out,background-color .12s ease-out}
.strip a svg{width:28px;height:28px;margin-bottom:2px;color:var(--slate)}
.strip .val{font-weight:400;font-variant-numeric:tabular-nums}
.strip a:hover{color:var(--text);background:var(--surface-1)}
.strip a{-webkit-tap-highlight-color:transparent}
.strip a:hover svg{color:currentColor}
/* The open coin (aria-current) is the only tile with a box: a white outline, its icon and ticker white. The quietest
   coin has no box: a teal number and a small teal dot above its icon. The same at every width and inside Telegram. */
.strip a{padding-top:14px}
.strip a[aria-current]{color:var(--white);box-shadow:inset 0 0 0 1.5px var(--white)}
.strip a[aria-current] svg{color:var(--white)}
.strip a.quiet .val{color:var(--teal);font-weight:600}
.qdot{position:absolute;top:5px;left:50%;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:var(--teal)}
.strip a.lit{color:var(--white);background:var(--surface-1)}
.strip a.lit svg{color:currentColor}
/* A coin outside the icon set: its initial in a plain round badge, the same size as an icon. Scoped to the ticker, so
   the home page's own .badge (the Break chip in theme.css) is never touched. */
.strip .badge{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:0;margin-bottom:2px;border-radius:50%;background:var(--slate);color:var(--navy);font-size:15px;font-weight:700;line-height:1}
.strip a:hover .badge,.strip a.lit .badge,.strip a[aria-current] .badge{background:var(--white)}
/* Pressed: every tile, the open and the quietest included, turns a neutral light grey (light slate) with navy contents,
   never teal, and sinks a little under the finger (below), so a tap feels taken before the next page
   arrives. After the states above so it wins over them while pressed. */
.strip a:active,.strip a[aria-current]:active,.strip a.lit:active{color:var(--navy);background:var(--light-slate)}
.strip a:active svg,.strip a:active .val{color:var(--navy)}
.strip a:active .badge{background:var(--navy);color:var(--light-slate)}
.strip a:active .qdot{background:var(--navy)}
/* Below 48rem the tiles are sized so four and a half show: the half tile cut off at the right edge, under a long fade,
   reads as "there is more". The strip's content box is the page width inside the gutters; the visible part runs from
   there to the screen edge, so 4.5 tiles + 4 gaps = 100% + one gutter. Tiles stop growing at 96 px (from about 470 px
   wide), so tablets show more tiles instead of bigger ones. The left edge fades only a little. */
@media (max-width:47.99rem){
  .strip a{flex-basis:min(96px,calc((100% + var(--gutter) - 16px) / 4.5))}
  .strip{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 16px,#000 calc(100% - 88px),rgba(0,0,0,.45) calc(100% - 40px),transparent calc(100% - 4px));mask-image:linear-gradient(to right,transparent 0,#000 16px,#000 calc(100% - 88px),rgba(0,0,0,.45) calc(100% - 40px),transparent calc(100% - 4px))}
}
@media (min-width:48rem){.strip{display:grid;grid-template-columns:repeat(10,1fr);overflow:visible;margin:0;padding:0}.strip a{min-width:0}}
@media (prefers-reduced-motion:no-preference){
  .strip a{transition:color .12s ease-out,background-color .12s ease-out,transform .12s ease-out}
  .strip a:active{transform:scale(.95)}
}