/* The charts room, in the door's clothes: the same black, the same candles
   behind, the same panes of glass and the same two typefaces as the door, the
   whitepaper and the terminal, so walking between them has no seam. Each
   chart is one pane with a title, a plain-words line, the drawing, and the
   figures it currently reads. */
/* No blue flash on tap: phones paint a highlight over whatever was tapped,
   and with the door's whole-page handlers that was the whole screen. */
html { -webkit-tap-highlight-color: transparent; }
:root {
  /* styles.css's own tokens, so a colour here is the door's colour */
  --bg: #000000;
  --line: #1C1C1F;
  --line-2: #2A2A2E;
  --glass: rgba(4, 5, 7, 0.5);
  --glass-edge: rgba(255, 255, 255, 0.055);
  --cell: rgba(255, 255, 255, 0.022);
  --text: #E9EDF2;
  --text-2: #A9AFB8;
  --muted: #6E7480;
  --faint: #464B54;
  --pos: #AEEB8C;
  --pos-bg: rgba(174, 235, 140, 0.15);
  --neg: #DF758B;
  --neg-bg: rgba(223, 117, 139, 0.15);
  --brand: #F7931A;
  --brand-bg: rgba(247, 147, 26, 0.07);
  --brand-line: rgba(247, 147, 26, 0.42);
  --orange: #F7931A;
  --radius: 12px;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}
* { box-sizing: border-box; }
html { background: var(--bg); max-width: 100%; overflow-x: clip; }
html, body { margin: 0; color: var(--text); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
body { min-height: 100vh; background: var(--bg); }
a { color: inherit; }
.dim { color: var(--muted); }
/* BTC2's 2 in orange and BTC1's 1 in bold white, as the door letters them */
.t2 { color: var(--brand); font-weight: inherit; }
.t1 { color: var(--text); font-weight: 700; }

/* ---- the candles behind --------------------------------------------------
   Fixed, so the page scrolls over them as the whitepaper scrolls over the
   door. Softened and held back: the charts on the panes are what is read. */
.backdrop { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.9; }
.backdrop canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#bg-candles { filter: blur(0.6px); }
#bg-glow { filter: blur(6px) opacity(0.6); }

/* ---- header: the terminal's bar ------------------------------------------ */
.bar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 12px;
  padding: 12px clamp(14px, 3vw, 28px);
  background: rgba(0, 0, 0, 0.78);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand-mark { width: 28px; height: 28px; display: block; }
/* the door's two pills: grey for Home, orange for the way on to the chart */
.pill {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  padding: 7px 12px; border-radius: 999px; line-height: 1;
  border: 1px solid var(--line-2); background: rgba(0, 0, 0, 0.6); color: var(--text-2);
  font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; text-decoration: none;
  transition: color .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.pill.home span[aria-hidden] { color: var(--brand); letter-spacing: 0; font-size: 13px; }
.pill.home:hover { color: var(--text); border-color: var(--brand); }
.pill.chart { color: var(--brand); border-color: var(--brand-line); background: var(--brand-bg); letter-spacing: 0.06em; padding: 9px 13px; }
.pill.chart:hover { color: #FFB15C; border-color: rgba(247, 147, 26, 0.75); box-shadow: 0 0 16px rgba(247, 147, 26, 0.18); }
.path {
  font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted);
}
.ticker { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); }
.ticker .tk { font-size: 10px; font-weight: 700; letter-spacing: 0.16em; color: var(--text-2); }
.ticker .tk b { color: var(--brand); font-weight: 800; }
.ticker > b { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
/* the door's change badge */
.chg {
  display: inline-flex; align-items: center; font-style: normal;
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  padding: 3px 8px; border-radius: 6px; white-space: nowrap;
}
.chg.up { color: var(--pos); background: var(--pos-bg); }
.chg.down { color: var(--neg); background: var(--neg-bg); }
.chg:empty { display: none; }

/* ---- the deck ------------------------------------------------------------ */
.wrap { position: relative; z-index: 2; max-width: 1500px; margin: 0 auto; padding: 26px clamp(12px, 2.4vw, 28px) 72px; }
/* the whitepaper's voice: mono, small, light grey */
.lede {
  margin: 2px 0 22px; max-width: 78ch; font-family: var(--mono); font-size: 13.5px; line-height: 1.8;
  letter-spacing: 0.02em; color: var(--text-2);
}
.deck { display: grid; gap: clamp(14px, 2vw, 22px); grid-template-columns: repeat(auto-fill, minmax(min(100%, 560px), 1fr)); }
/* a chart that needs the room takes the whole row */
.ch.wide { grid-column: 1 / -1; }
/* A PANE OF GLASS, as the door's BTC2 / BTC1 panes and the whitepaper's text
   are: dark enough that a chart reads cleanly on it, light enough that the
   candles behind still show through. */
.ch {
  display: flex; flex-direction: column; min-width: 0;
  border: 1px solid var(--glass-edge); border-radius: var(--radius); background: var(--glass);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  overflow: hidden; padding: clamp(20px, 3vw, 32px) clamp(18px, 3vw, 34px) clamp(16px, 2vw, 22px);
}
.ch-head { padding: 0; border: 0; }
/* the door's headline face: "69.85 Million times cheaper" */
.ch-head h2 {
  margin: 0; font-weight: 700; letter-spacing: -0.025em; line-height: 1.08;
  font-size: clamp(24px, 3.4vw, 38px);
}
.ch-head h2 .t1 { font-weight: 800; }
/* and the whitepaper's paragraph */
.ch-head p {
  margin: 12px 0 0; color: var(--text-2); font-family: var(--mono); font-weight: 400; line-height: 1.8;
  letter-spacing: 0.02em; font-size: clamp(12px, 1.2vw, 13.5px); max-width: 68ch;
}
.ch-plot { position: relative; padding: clamp(14px, 2.4vw, 26px) 0 4px; }
/* OUR MARK, BEHIND THE CHART. The posted cards carry it; a chart lifted off
   this page should say where it came from without anybody adding a caption.
   Behind the drawing and never over it, so it cannot cost a reading. */
.ch-plot::before {
  content: ''; position: absolute; inset: clamp(14px, 2.4vw, 26px) 0 4px;
  background: url('/assets/watermark.webp') center / auto 56% no-repeat;
  /* A watermark, not a third data series. The asset is white, which on this
     background reads as a bright mark however far the opacity comes down — so
     it is knocked back to grey as well as made faint. */
  opacity: 0.08; filter: grayscale(1) brightness(0.72); pointer-events: none;
}
.ch-plot svg { display: block; width: 100%; height: auto; overflow: visible; position: relative; }
/* the axis furniture */
.ax { font-size: 11px; }
.plot-label { font-size: 11.5px; }
/* and a size down on a phone, where the same figures are a far bigger share
   of the drawing than they are on a monitor */
@media (max-width: 560px) {
  .ax { font-size: 9.5px; }
  .plot-label { font-size: 10px; }
}
/* The figures the chart reads, in the door's pane layout: the label small and
   spaced over the figure, the figure in the mono face the door's prices use. */
.ch-read {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px clamp(18px, 3vw, 34px);
  margin-top: auto; padding: clamp(14px, 2vw, 20px) 0 0; border-top: 1px solid rgba(255, 255, 255, 0.07);
  color: var(--muted);
}
.ch-read .stat { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ch-read .stat i {
  font-style: normal; font-family: var(--mono); font-weight: 600;
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap;
}
.ch-read .stat b {
  color: var(--text); font-family: var(--mono); font-weight: 600; letter-spacing: -0.02em; white-space: nowrap;
  font-variant-numeric: tabular-nums; font-size: clamp(17px, 2.2vw, 24px);
}
/* the signature off the posted cards, so a screenshot of one still says where it came from */
.ch-read .site {
  margin-left: auto; align-self: flex-end; font-family: var(--mono); font-weight: 600;
  font-size: clamp(11px, 1.1vw, 13px); letter-spacing: 0.12em; color: var(--muted);
}
.ch-read .site i { font-style: normal; color: var(--orange); }
/* the card's verdict, in the door's orange pill */
.ch-read .tag {
  padding: 5px 10px; border: 1px solid var(--brand-line); border-radius: 999px;
  background: var(--brand-bg); color: var(--brand); line-height: 1;
  font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
}
.ch-empty { padding: 40px 16px; text-align: center; color: var(--faint); font-family: var(--mono); font-size: 12.5px; }
/* the drawing's own furniture */
.ax { fill: var(--muted); font-family: var(--mono); }
.ax-line { stroke: rgba(255, 255, 255, 0.06); stroke-width: 1; }
.plot-label { fill: var(--muted); font-family: var(--mono); }
.foot {
  margin: 26px 0 0; font-family: var(--mono); font-size: 12px; line-height: 1.8;
  letter-spacing: 0.02em; color: var(--muted);
}
.foot a { color: var(--text-2); text-decoration-color: var(--brand-line); text-underline-offset: 3px; }
.foot a:hover { color: var(--brand); }

@media (max-width: 900px) {
  .deck { grid-template-columns: minmax(0, 1fr); }
  .ticker > b { font-size: 14px; }
}
@media (max-width: 560px) {
  .path, .ticker .tk { display: none; }
  .pill.chart { padding: 8px 11px; }
}
@media (max-width: 480px) {
  .bar { gap: 8px; padding: 10px 12px; }
  .pill.home { padding: 7px 10px; }
  .chg { font-size: 11px; padding: 2px 6px; }
  .ticker { gap: 7px; }
  .ch-plot { padding: 10px 0 2px; }
}
@media (max-width: 380px) {
  .pill.home { font-size: 0; gap: 0; }
  .pill.home span[aria-hidden] { font-size: 13px; }
}

/* ---- the crosshair -------------------------------------------------------
   A reading at the pointer, because a line against time that cannot say what
   it was worth on a given day is a picture rather than a chart. */
.cross-line { stroke: rgba(233, 237, 242, 0.34); stroke-width: 1; stroke-dasharray: 3 4; }
.cross-dot { fill: var(--orange); stroke: var(--bg); stroke-width: 2; }
/* out past the last reading: hollow, because it is the fit talking and not a price */
.cross-dot.ahead { fill: var(--bg); stroke: var(--orange); stroke-width: 2.5; }
.ch-tip {
  position: absolute; top: 2px; z-index: 3; pointer-events: none;
  display: flex; flex-direction: column; gap: 3px; white-space: nowrap;
  padding: 8px 11px; border: 1px solid var(--line-2); border-radius: 10px;
  background: rgba(0, 0, 0, 0.88); box-shadow: 0 8px 26px rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.ch-tip[hidden] { display: none; }
.ch-tip i {
  font-style: normal; font-family: var(--mono); font-weight: 600; font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
}
.ch-tip b { font-family: var(--mono); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); font-variant-numeric: tabular-nums; }
/* a row per line, for the cards that race two coins against each other */
.ch-tip .row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.ch-tip .row em {
  font-style: normal; font-family: var(--mono); font-weight: 600; font-size: 10.5px;
  letter-spacing: 0.1em; color: var(--text-2);
}
.ch-tip .row b { font-size: 14px; }

/* ---- the month, day by day -----------------------------------------------
   The posted card's calendar, fluid. The cells keep their aspect so the grid
   stays a grid at any width, and the figures shrink with the card rather than
   wrapping or spilling. */
.cal-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: clamp(4px, 0.8vw, 10px); margin-bottom: 8px; }
.cal-dow div {
  font-family: var(--mono); font-weight: 600; font-size: clamp(8.5px, 1vw, 11px);
  letter-spacing: 0.16em; color: var(--muted); text-align: center;
}
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: clamp(4px, 0.8vw, 10px); }
.cal-cell {
  aspect-ratio: 1 / 0.82; border-radius: clamp(6px, 1vw, 12px);
  background: var(--cell); border: 1px solid var(--glass-edge);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; min-width: 0; overflow: hidden;
}
.cal-cell.blank { background: transparent; border-color: transparent; }
.cal-cell .d {
  font-family: var(--mono); font-weight: 600; color: var(--muted);
  font-size: clamp(8.5px, 1vw, 12px);
}
.cal-cell .p {
  font-family: var(--mono); font-weight: 600; letter-spacing: -0.02em; color: var(--text);
  font-variant-numeric: tabular-nums; font-size: clamp(9.5px, 1.5vw, 19px);
}
.cal-cell.on { border-color: transparent; }
.cal-cell.on .d { color: rgba(255, 255, 255, 0.72); }
.cal-cell.on .p { color: #fff; }
.cal-cell.on.lit .d { color: rgba(0, 0, 0, 0.6); }
.cal-cell.on.lit .p { color: #000; }

/* ---- the five firsts, as a list ------------------------------------------
   What the chart says in its margins when there is room for margins. On a
   phone there is not, so the dots stay on the drawing and the words come down
   here where they can be read. */
.firsts { list-style: none; margin: 14px 0 2px; padding: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.firsts li { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: baseline; padding: 9px 11px; background: #050506; }
.firsts b { font-family: var(--mono); font-weight: 600; font-size: 12.5px; color: var(--text); letter-spacing: -0.01em; white-space: nowrap; }
.firsts span { font-family: var(--mono); font-size: 11px; line-height: 1.5; color: var(--muted); min-width: 0; }
.firsts i { font-style: normal; display: block; color: var(--text-2); font-weight: 600; }
.firsts u { text-decoration: none; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em; color: var(--faint); white-space: nowrap; }

/* the same list, carrying a colour swatch for the bar it belongs to */
.firsts.key li { grid-template-columns: 12px 1fr auto; }
.firsts.key em { display: block; width: 12px; height: 12px; border-radius: 3px; align-self: center; }
.firsts.key u { color: var(--text-2); font-size: 11px; font-weight: 600; letter-spacing: 0; }

/* Between the rooms (the door, /arb/, /charts/, /terminal/): the browser's own
   page transition, a cross-fade, with the BTC2 coin in the header carried
   across (view-transition-name btc2-coin). Every room opts in. */
@view-transition { navigation: auto; }
.brand-mark { view-transition-name: btc2-coin; }
::view-transition-group(*) { animation-duration: .45s; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none; } }