/* /coil and /coil/<coin>: the coin strip, the pictures, the live chart, the board and the facts. Sits beside theme.css. */
.coil-page{padding:24px 0 48px}
.coil-page section{padding:32px 0;border-top:1px solid var(--divider)}
.coil-page section:first-of-type{border-top:0;padding-top:16px}
.coil-page .lead{margin-top:16px;max-width:34em}
.coil-page .sub{margin-top:12px}
.coil-page .eyebrow{margin-bottom:12px}
/* The ticker's look and pressed state are in strip.css (shared with the home page). A coin outside the icon set gets
   a plain round initial badge; the stat row's large badge builds on this. */
.badge{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;margin-bottom:2px;border-radius:50%;background:var(--slate);color:var(--navy);font-size:15px;font-weight:700;line-height:1}
/* The pictures: candles above, the Coil below. Pixel coordinates only. */
.pic{display:block;width:100%;height:auto}
.pic .rule{stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}
.pic .wick{stroke:var(--slate);stroke-width:1;vector-effect:non-scaling-stroke}
.pic .wick.up{stroke:var(--white)}
.pic .body{fill:var(--slate);stroke:var(--slate);stroke-width:1;vector-effect:non-scaling-stroke}
.pic .body.up{fill:var(--navy);stroke:var(--white)}
.pic .ref{stroke:var(--muted);stroke-width:1;stroke-dasharray:6 6;vector-effect:non-scaling-stroke}
.pic .coil{fill:none;stroke:var(--teal);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.pic .run{fill:rgba(31,200,182,.10)}
.pic .mark{fill:var(--teal);stroke:var(--navy);stroke-width:2;vector-effect:non-scaling-stroke}
.replay{margin:0}
.replay figcaption{margin-top:12px;font-size:16px;line-height:1.45;color:var(--muted)}
/* The live chart: the static picture until the library mounts, then the canvases take its place. */
.chart{margin-top:24px;padding:16px;border:1px solid var(--line);border-radius:16px;min-height:200px}
.chart.mounted{padding:0;overflow:hidden}
.chart.mounted .pic{display:none}
.actions{display:grid;gap:16px;margin-top:24px}
.actions p{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0}
.actions .small{flex-basis:100%}
/* The board on /coil: one row per coin, quietest first. */
.rows{list-style:none;margin:24px 0 0;padding:0;counter-reset:row}
.rows li{border-top:1px solid var(--line)}
.rows li:last-child{border-bottom:1px solid var(--line)}
.rows a{display:grid;grid-template-columns:28px 1fr;gap:4px 14px;align-items:center;min-height:56px;padding:10px 0;color:var(--text);text-decoration:none}
.rows a svg{width:28px;height:28px;color:var(--slate);grid-row:1/3}
.rows a:hover .name{color:var(--teal)}
.rows .name{font-family:var(--display);font-weight:700;font-size:1.25rem;letter-spacing:-.01em;color:var(--white)}
.rows .reading{color:var(--muted);font-size:16px}
@media (min-width:48rem){.rows a{grid-template-columns:28px 14rem 1fr}.rows a svg{grid-row:1}}
/* The facts. */
.factlist{margin:24px 0 0;border-top:1px solid var(--line)}
.factlist div{display:grid;gap:4px;padding:12px 0;border-bottom:1px solid var(--line)}
.factlist dt{font-size:16px;font-weight:600;color:var(--muted)}
.factlist dd{margin:0;color:var(--text)}
.closing{margin-top:24px;color:var(--muted)}
@media (min-width:48rem){.coil-page{padding:48px 0 64px}.coil-page section{padding:48px 0}.chart{padding:24px}.chart.mounted{padding:0}.factlist div{grid-template-columns:12rem 1fr;gap:16px}}
/* The chart library lays its panes out with a table; the site's table rules (padding, stacked cells under 48rem) must not reach it. */
.chart table{display:table;width:auto;min-width:0;border-collapse:separate;border-spacing:0;font-size:inherit}
.chart tbody{display:table-row-group}
.chart tr{display:table-row;border:0;padding:0;margin:0;background:none}
.chart td,.chart th{display:table-cell;padding:0;border:0;max-width:none;vertical-align:top;white-space:normal}
.chart td+td{border-top:0}
.chart td::before{content:none}
/* Inside Telegram (coil-tg.js sets [data-tg]): only the ticker, the content and the charts. The site header with its
   hamburger, the bottom bar with Start the bot, the menu sheet and the footer are hidden; the page stays navy. */
:root[data-tg] header.top,:root[data-tg] footer,:root[data-tg] .bar,:root[data-tg] #sheet-menu,:root[data-tg] .tg-hide{display:none!important}
:root[data-tg] body{padding-bottom:env(safe-area-inset-bottom,0px)}
:root[data-tg] .coil-page{padding-top:calc(12px + env(safe-area-inset-top,0px))}
/* The /coil hub: the quietest coin, large, with one line, its Coil and a 24-hour sparkline. */
.coil-hero .hero-label{margin:24px 0 8px;font-size:16px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.hero-coin{display:inline-flex;align-items:center;gap:16px;margin-top:4px;color:var(--teal);text-decoration:none;border-radius:12px}
.hero-coin svg{width:56px;height:56px;color:var(--teal)}
.hero-coin .name{font-family:var(--display);font-weight:700;font-size:2rem;line-height:1.1;letter-spacing:-.02em}
.hero-coin.lit .name{text-decoration:underline;text-underline-offset:4px}
.hero-reading{margin-top:8px;font-size:1.25rem;font-weight:600;color:var(--white);font-variant-numeric:tabular-nums}
.spark{display:block;width:100%;max-width:24rem;height:auto;margin-top:16px}
.spark .line{fill:none;stroke:var(--teal);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.spark .ref{stroke:var(--muted);stroke-width:1;stroke-dasharray:4 4;vector-effect:non-scaling-stroke}
.spark .dot{fill:var(--teal)}
/* Each row's bar is its Coil out of 100; the quietest row has the ticker's teal ring. */
.rows a{grid-template-columns:28px 1fr;grid-template-rows:auto auto auto;padding:12px 12px;margin:0 -12px;border-radius:12px}
.rows a>svg:first-child{grid-column:1;grid-row:1/3}
.rows a .name{grid-column:2;grid-row:1}
.rows a .reading{grid-column:2;grid-row:2}
.rows .reading [data-count]{font-variant-numeric:tabular-nums}
.rows a svg.meter{grid-column:2;grid-row:3;display:block;width:100%;height:6px;margin-top:6px;color:inherit}
.meter .track{fill:rgba(255,255,255,.08)}
.meter .fill{fill:var(--teal);transform-box:fill-box;transform-origin:left center}
.rows a.quiet{box-shadow:inset 0 0 0 1px var(--teal)}
.rows a.lit{background:var(--surface-1)}
.rows a.lit .name{color:var(--teal)}
@media (min-width:48rem){.rows a{grid-template-columns:28px 14rem 1fr;grid-template-rows:auto auto}.rows a>svg:first-child{grid-row:1}.rows a .reading{grid-column:3;grid-row:1}.rows a svg.meter{grid-column:2/4;grid-row:2}}
.ten{margin:12px 0 0;padding-left:1.2em}
.ten li{margin:4px 0}
/* "How this is measured": the facts in a drawer, closed at first. */
.drawer summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:48px;cursor:pointer;list-style:none}
.drawer summary::-webkit-details-marker{display:none}
.drawer summary h2{margin:0}
.drawer summary svg{width:20px;height:20px;flex:none;color:var(--muted);transition:transform .2s var(--ease-out)}
.drawer[open] summary svg{transform:rotate(45deg)}
/* Motion: one reveal on load and nothing after. The ticker slides 24 px and settles; the bars fill left to right in
   500 ms. Nothing loops. All of it is off for people who ask for reduced motion. */
@media (prefers-reduced-motion:no-preference){
  /* backwards, not both: a held end state would override the pressed scale below. */
  .strip a{animation:strip-settle .6s var(--ease-out) backwards}
  /* The once-a-session nudge (coil.js): every tile slides 24 px left and back under the strip's fade. A transform, so
     the strip's scroll position never changes and the tap guard never mistakes it for a swipe. */
  .strip.nudging a{animation:strip-nudge .8s cubic-bezier(.45,0,.25,1)}
  .meter .fill{animation:bar-fill .5s var(--ease-out) both}
}
@keyframes strip-settle{from{transform:translateX(24px)}to{transform:none}}
@keyframes strip-nudge{45%{transform:translateX(-24px)}}
@keyframes bar-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.drawer summary svg{transition:none}}
/* The drawer's facts: a small line icon at left, then the label and the text. */
.factlist .fact{display:grid;grid-template-columns:24px 1fr;column-gap:14px;row-gap:4px;padding:14px 0;border-bottom:1px solid var(--line)}
.factlist .fact>.fi{grid-column:1;grid-row:1/3;width:24px;height:24px;margin-top:1px;color:var(--teal)}
.factlist .fact dt,.factlist .fact dd{grid-column:2}
.factlist .fact dt{color:var(--white)}
.factlist .fact dd{color:var(--muted)}
.scriptlist{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:8px}
.scriptlist li{display:flex;align-items:center;gap:10px;min-height:28px}
.scriptlist .fi{width:20px;height:20px;flex:none;color:var(--teal)}
@media (min-width:48rem){.factlist .fact{grid-template-columns:24px 16rem 1fr}.factlist .fact>.fi{grid-row:1}.factlist .fact dt{grid-column:2}.factlist .fact dd{grid-column:3}}
.fi.warm .in{transform-box:fill-box;transform-origin:left center}
.drawer.can-fill .fi.warm .in{transform:scaleX(0)}
.drawer.can-fill.filling .fi.warm .in{animation:bar-fill .8s var(--ease-out) .15s both}
/* The paid Coinbase row: the wordmark beside one line of text with the link, then the disclosure, small and muted. */
.cb-row{margin:4px 0 0;padding:14px 0 16px;border-top:1px solid var(--line)}
.cb-row .cb-note{padding-left:128px}
@media (max-width:359px){.cb-row .cb-note{padding-left:0}}
.cb-line{display:grid;grid-template-columns:auto 1fr;align-items:start;column-gap:16px;margin:0;color:var(--text)}
/* The wordmark: 20 px, as supplied, with 10 px of clear space on every side (the row's padding gives the top and bottom). */
.cb-logo{display:block;width:auto;height:20px;margin:4px 0 0}
.cb-row p{padding:0;max-width:none}
.cb-row .cb-note{margin:6px 0 0;font-size:16px;line-height:1.45;color:var(--muted)}
.source{padding-top:0!important;border-top:0!important}
.source .cb-row{margin-top:0}
/* Layer chips above each chart: one choice for both charts, kept for the session. 44 px tap targets. */
.layers{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 0}
.chip{min-height:44px;padding:0 16px;border:1px solid var(--line);border-radius:999px;background:none;color:var(--muted);font:inherit;font-size:16px;font-weight:600;cursor:pointer;-webkit-tap-highlight-color:transparent}
.chip:hover{color:var(--text);border-color:var(--line-hover)}
.chip[aria-pressed="true"]{color:var(--navy);background:var(--teal);border-color:var(--teal)}
.layer-key{margin:10px 0 0;font-size:16px;line-height:1.45;color:var(--muted);max-width:40em}
.layers+.layer-key{margin-top:12px}
.replay .chart,.layers+.layer-key~.chart{margin-top:16px}
/* Hub rows: each coin's Coil over its last 120 hours, the number beside it. */
.rows a .trend{grid-column:2;grid-row:3;display:flex;align-items:center;gap:12px;margin-top:8px;min-width:0}
.rowspark{display:block;flex:1;min-width:0;height:40px}
.rowspark .line{fill:none;stroke:var(--teal);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.rowspark .base{stroke:var(--slate);stroke-width:1;vector-effect:non-scaling-stroke}
.rowspark .ref{stroke:var(--muted);stroke-width:1;stroke-dasharray:4 4;vector-effect:non-scaling-stroke}
.rowspark .dot{fill:var(--teal)}
.spark .base{stroke:var(--slate);stroke-width:1;vector-effect:non-scaling-stroke}
.rows .sv{flex:none;min-width:5.5em;text-align:right;font-weight:600;color:var(--teal);font-variant-numeric:tabular-nums}
@media (min-width:48rem){.rows a .trend{grid-column:2/4;grid-row:2}}
.rows .trend svg.rowspark{width:auto;height:40px;flex:1;min-width:0;color:inherit}
/* Tapping a ticker slides into the coin page: a same-origin view transition between the /coil pages (both load this
   file, so both opt in). The page slides in from the right while the header, the ticker and the bottom bar stay put.
   Off for people who ask for reduced motion: the page simply changes. */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  header.top{view-transition-name:site-header}
  .strip{view-transition-name:coin-strip}
  .bar{view-transition-name:site-bar}
  ::view-transition-old(root){animation:vt-leave .2s cubic-bezier(.2,1,.2,1) both}
  ::view-transition-new(root){animation:vt-enter .32s cubic-bezier(.2,1,.2,1) both}
}
@keyframes vt-leave{to{opacity:0;transform:translateX(-24px)}}
@keyframes vt-enter{from{opacity:0;transform:translateX(48px)}}
/* The scene card on a coin page: three lines from the readings (lib/page.js sceneCard). In the markup it follows the
   h1 and the lead, which is the order search engines and screen readers get. Inside Telegram it moves above the h1 by
   flex order, so the brief is the first thing in the mini app; the card has nothing to focus, so no tab order moves. */
.scene{margin:20px 0 0;padding:14px 20px 6px;border:1px solid var(--line);border-radius:16px;background:var(--surface-1)}
.scene-title{margin:0;font-size:16px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.scene dl{margin:6px 0 0}
.scene dl div{display:grid;gap:2px;padding:10px 0;border-top:1px solid var(--line)}
.scene dt{font-size:16px;font-weight:600;color:var(--muted)}
.scene dd{margin:0;color:var(--text)}
@media (min-width:48rem){.scene{margin-top:28px;padding:18px 24px 8px}.scene dl div{grid-template-columns:9rem 1fr;gap:16px}}
:root[data-tg] .coil-page .answer{display:flex;flex-direction:column}
:root[data-tg] .answer>.scene{order:-1;margin:0 0 24px}
/* The coin page's heading block, in contrast steps: heading white, the stat teal, the reading light slate, the
   definition muted. Light slate on navy is 10.6:1, muted 7.7:1. */
.coil-page{--light-slate:#C5CAD4}
.coil-page .answer h1{color:var(--white)}
.coil-page .answer .lead{color:var(--light-slate)}
.coil-page .answer .sub{color:var(--muted)}
.coil-hero .hero-reading{color:var(--teal)}
.stat{display:grid;grid-template-columns:48px 1fr;align-items:center;column-gap:16px;margin-top:20px}
.stat>svg,.stat>.badge{width:48px;height:48px;color:var(--teal)}
.stat>.badge{font-size:24px;background:var(--teal);color:var(--navy)}
.stat-num{margin:0;font-family:var(--display);font-weight:700;font-size:clamp(2.5rem,2.2rem + 1.5vw,3.25rem);line-height:1;letter-spacing:-.02em;color:var(--teal);font-variant-numeric:tabular-nums}
.stat-num.none{font-size:1.25rem;color:var(--muted)}
.stat-bar{display:flex;align-items:center;gap:12px;margin-top:10px}
.stat-bar .meter{flex:1;min-width:0;height:8px}
.stat-bar .meter .track{fill:var(--slate);fill-opacity:.4}
.stat-bar .asof{flex:none;font-size:16px;color:var(--muted);white-space:nowrap}