/*
 * analytics-page.css: /analytics on top of analytics.css (orbio's analytics module, rethemed) and pm.css.
 * Only the PonModel layer lives here: the grid behind the intro, the neon mark, the sample pill and tags,
 * blueprint rules, the footer line, phone copy swaps and touch hit areas. Layout stays orbio's.
 */

/* ---------------------------------------------------------------- page frame */
.pma-page { position: relative; isolation: isolate; }

/* orbio's analytics page is plain dark: the only motif is the orange grid, hung from the nav rule so its lines
   and the + rows fall on 48px steps below it (the first line sits on the rule itself) */
.pma-main { position: relative; }
.pma-backdrop {
  position: absolute;
  top: -1px;
  left: 50%;
  width: 100vw;
  height: 480px;
  margin-left: -50vw;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.pma-grid {
  position: absolute;
  inset: 0;
  --pm-grid-mask: radial-gradient(ellipse 70% 90% at 30% 0%, #000 18%, rgba(0, 0, 0, .4) 55%, transparent 88%);
}

/* the neon mark in place of orbio's grey orb */
.dashboard-module__g9xq_G__brand img.pm-mark { filter: drop-shadow(0 0 6px rgba(250, 109, 1, .45)); }

/* ---------------------------------------------------------------- neon */
.dashboard-module__g9xq_G__metricValue.dashboard-module__g9xq_G__lime,
.dashboard-module__g9xq_G__runRateFigures strong.dashboard-module__g9xq_G__lime { text-shadow: 0 0 22px rgba(250, 109, 1, .32); }
.dashboard-module__g9xq_G__activeRange { transform-origin: 0 50%; }
.dashboard-module__g9xq_G__rangeControl button[aria-pressed="true"] .dashboard-module__g9xq_G__activeRange {
  box-shadow: inset 0 0 0 1px rgba(250, 109, 1, .22);
}
.dashboard-module__g9xq_G__unitControl button[aria-pressed="true"] { box-shadow: inset 0 0 0 1px rgba(250, 109, 1, .22); }

/* the status pill: "Sample data until launch" in place of orbio's "Live network" */
.pma-status {
  padding: 5px 11px 5px 10px;
  border: 1px dashed var(--pm-line-strong, rgba(250, 109, 1, .32));
  border-radius: 999px;
  background: rgba(17, 13, 11, .78);
  white-space: nowrap;
}
.pma-status > i { box-shadow: 0 0 0 4px rgba(250, 109, 1, .12), 0 0 10px rgba(250, 109, 1, .7); }
.dashboard-module__g9xq_G__updated { white-space: nowrap; }

/* ---------------------------------------------------------------- sample tags: one per section */
.pma-tag {
  margin-left: 7px;
  padding: 1px 6px 2px;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: .03em;
  vertical-align: 1px;
}
.dashboard-module__g9xq_G__bookSnapshot { display: inline-flex; align-items: center; }
.dashboard-module__g9xq_G__bookSnapshot .pma-tag { vertical-align: 0; }
/* run rate: beside the title. The title row gives way (the tag wraps under the title) and the period control
   keeps its size, so "30 days" never breaks onto two lines (421 to 433px was the tight spot) */
.pma-titlerow { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 10px; flex: 1 1 auto; min-width: 0; }
.dashboard-module__g9xq_G__runRateHeader > .dashboard-module__g9xq_G__rangeControl { flex: none; }
.dashboard-module__g9xq_G__rangeControl button { white-space: nowrap; }
.pma-titlerow .pma-tag { margin-left: 0; }
/* activity: after the date range, in the section heading */
.pma-tag-toolbar { margin-left: 0; }

/* the unit after a big number sits on the same baseline */
.dashboard-module__g9xq_G__metricUnit { margin-left: 1px; white-space: nowrap; }
.pma-narrow { display: none; }

/* ---------------------------------------------------------------- blueprint rules */
.dashboard-module__g9xq_G__runRateFoot,
.dashboard-module__g9xq_G__panelFoot,
.dashboard-module__g9xq_G__modelLegend,
.dashboard-module__g9xq_G__bookStats { border-top-style: dashed; border-top-color: rgba(250, 109, 1, .2); }

/* the projection legend key matches the dashed construction line in the chart */
.dashboard-module__g9xq_G__runRateFoot i:nth-of-type(2) { background: repeating-linear-gradient(90deg, #9d725a 0 5px, transparent 5px 8px); }

/* the tooltip keeps orbio's anatomy, with a hairline of the neon */
.dashboard-module__g9xq_G__tooltip { border-color: rgba(250, 109, 1, .42); box-shadow: 0 10px 35px rgba(0, 0, 0, .55), 0 0 18px rgba(250, 109, 1, .08); }
.dashboard-module__g9xq_G__plot { cursor: crosshair; }
.dashboard-module__g9xq_G__plot[tabindex="-1"] { cursor: default; }

/* a wrapped panel detail reads as one short paragraph, not two lines 20px apart. orbio's inline detail sits in
   its parent's 21px line box, 5px under the value and 1px over the box end: padding keeps that rhythm (a
   margin would collapse into the value's 6px) */
.dashboard-module__g9xq_G__panelDetail { display: block; line-height: 1.5; padding-top: 5px; padding-bottom: 1px; }

/* ---------------------------------------------------------------- footer */
.dashboard-module__g9xq_G__footer { flex-wrap: wrap; row-gap: 18px; }
.pma-footline {
  display: flex;
  flex-basis: 100%;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  order: 4;
  padding-top: 16px;
  background: repeating-linear-gradient(90deg, rgba(250, 109, 1, .28) 0 6px, transparent 6px 11px) top left / 100% 1px no-repeat;
  color: var(--muted, #8d7b6c);
  font-family: var(--font-geist-mono), ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: .02em;
}

/* the X link (every page's footer carries it): last in the dashed row */
.pma-x { display: inline-flex; align-items: center; gap: 6px; color: var(--pm-ink-2, #c7b6a7); position: relative; }
.pma-x:hover { color: var(--pm-ink, #f6eee7); }
.pma-x::after { content: ""; position: absolute; inset: -4px -6px; }

@media (max-width: 760px) {
  .pma-backdrop { height: 360px; }
  .pma-status { padding: 4px 9px 4px 8px; }
}
@media (max-width: 420px) {
  .pma-footline { flex-direction: column; font-size: 10px; }
  /* the stacked X link reaches 40px: 5px more room above it, so its reach stops at the line before */
  .pma-x { align-self: flex-start; margin-top: 5px; }
  .pma-x::after { inset: -13px -6px; }
}

/* number-flow's box: orbio's figures are inline-blocks at line-height 1 with a mask padding of about a
   quarter em (2 x round(.125em)), which is what gives its value rows their height. PM.roll renders inside. */
[data-kpi], [data-pv], [data-book-total], [data-rr-recorded], [data-rr-projection] {
  display: inline-block;
  line-height: 1;
  padding: calc(round(nearest, .125em, 1px) * 2) 0;
  font-kerning: none;
  white-space: nowrap;
}
/* orbio sets the run-rate figures and the book total in proportional digits (its KPI and panel values are
   tabular, and analytics.css already says so); PM.roll forces tabular, so give these two their digits back */
.dashboard-module__g9xq_G__runRateFigures .pm-roll,
.dashboard-module__g9xq_G__liquidityValue .pm-roll { font-variant-numeric: normal; }

/* no data: a quiet placeholder where a figure would be */
[data-na] { color: var(--muted, #8d7b6c); text-shadow: none; }
.dashboard-module__g9xq_G__page .dashboard-module__g9xq_G__rangeControl button:disabled,
.dashboard-module__g9xq_G__page .dashboard-module__g9xq_G__unitControl button:disabled { cursor: not-allowed; }

/* phones: shorter status copy keeps the status column as narrow as orbio's, so the h1 stays on one line from
   375px; "PONMODEL" cannot share the Staking TVL value row, so the tile title names the unit and the value row
   keeps orbio's anatomy (number alone) and height */
@media (max-width: 480px) {
  .pma-long { display: none; }
  .pma-wide, .dashboard-module__g9xq_G__metricUnit { display: none; }
  .pma-narrow { display: inline; }
}

/* 360px and below: the purchases toggle cannot share a row with its title, so it drops under the header text */
@media (max-width: 360px) {
  .dashboard-module__g9xq_G__purchases .dashboard-module__g9xq_G__panelHeader { flex-wrap: wrap; row-gap: 14px; }
}

/* touch (and tablet widths): orbio's controls keep their size on screen, their hit areas grow to about 40px.
   Padding plus an equal negative margin (or an inset pseudo) changes nothing in the layout. */
@media (pointer: coarse), (max-width: 1024px) {
  .dashboard-module__g9xq_G__rangeControl button { min-width: 40px; }
  .dashboard-module__g9xq_G__unitControl button { position: relative; min-width: 40px; }
  .dashboard-module__g9xq_G__rangeControl button::after,
  .dashboard-module__g9xq_G__unitControl button::after { content: ""; position: absolute; inset: -6px 0; }
  .dashboard-module__g9xq_G__unitControl button::after { inset: -8px 0; }
  .dashboard-module__g9xq_G__chartData summary { padding: 13px 0 14px; margin: -13px 0 -14px; }
  .dashboard-module__g9xq_G__methodology summary { padding: 12px 0; margin: -12px 0; }
  .dashboard-module__g9xq_G__footer > a { padding: 13px 0; margin: -13px 0; }
  .dashboard-module__g9xq_G__brand { padding: 7px 0; margin: -7px 0; }
  .dashboard-module__g9xq_G__notice button { padding: 11px 8px; margin: -11px -8px; }
}

/* opened in a hidden tab: no arrive animations (they would wait for a frame that never comes) */
.pma-static .dashboard-module__g9xq_G__panel,
.pma-static .dashboard-module__g9xq_G__barReveal,
.pma-static .dashboard-module__g9xq_G__lineReveal { animation: none; }