/* HartiiBiome Analytics (/explorer/analytics) styles. Linked only from analytics.html, after explorer.css, so the other explorer pages do not pay for them. */
/* =====================================================================================================
   HartiiBiome Analytics (/explorer/analytics). Same tokens as the rest of the explorer, no new palette.
   Every rule is prefixed an- so nothing here reaches the detail pages. Sizes are rem so text follows the
   reader's settings; card contents adapt to the card's own width (container queries), not the viewport.
   ===================================================================================================== */

.an-status { margin-top: 1.25rem; color: var(--fg-2); font-size: .875rem; }
.an-status[hidden] { display: none; }
.an-page { padding-bottom: 1.5rem; }

/* rhythm: generous air between sections, tight inside a card */
.an-section { padding-block: clamp(1.75rem, 4.5vw, 3.25rem); }
.an-section + .an-section { border-top: 1px solid var(--line); }
.an-section-head { margin-bottom: 1.25rem; }
.an-section-head h2 { font-size: clamp(1.4rem, 3.2vw, 2rem); }
.an-section-head p { margin-top: .5rem; max-width: 64ch; color: var(--fg-2); font-size: .95rem; line-height: 1.6; text-wrap: pretty; }
.an-section-head a { color: var(--fg); text-decoration-color: var(--line-2); text-underline-offset: .2em; }
.an-section-head a:hover { color: var(--red-hi); }
.an-section-head--row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 1.5rem; }
.an-sub { margin: 0; padding: .9rem 1.1rem .35rem; border-top: 1px solid var(--line); font: 500 .7rem/1.2 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); }
.an-sub--section { margin: 2rem 0 .75rem; padding: 0; border: 0; }

.an-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr)); align-items: start; }
.an-grid--wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr)); }
.an-span-all { grid-column: 1 / -1; }

/* the chain strip */
.an-stats { max-width: none; margin-top: 0; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); }
.an-stats--wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.an-body .xp-search-inline { max-width: 36rem; }
.xp-stat .v.is-dash, .an-v.is-dash, .an-step-v.is-dash { color: var(--fg-3); }
.xp-stat .v { overflow-wrap: anywhere; }
.an-tile-note { margin-top: .35rem; color: var(--fg-3); font-size: .72rem; line-height: 1.4; }
.an-tiles-src { margin: .75rem 0 0; }

/* cards */
.an-card { margin-bottom: 0; container-type: inline-size; }
.an-card-head { align-items: center; min-block-size: 3.25rem; padding-block: .6rem; }
.an-card-title { font: 500 .7rem/1.2 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--fg-3); }
.an-card-links { display: flex; flex-wrap: wrap; gap: .25rem .9rem; }
.an-card-links a { display: inline-flex; align-items: center; min-block-size: 1.75rem; }
/* standalone links on this page stay at least 24px tall (WCAG 2.2 target size), including the shared chrome */
.an-body .nav-logo { padding-block: .55rem; }
.an-body .foot-note a { display: inline-block; padding-block: .5rem; }
.an-card-source { padding: .55rem 1.1rem; border-bottom: 1px solid var(--line); }
/* one source line over a run of rows that share it, instead of the same line repeated on every row */
.an-group-src { border-top: 1px solid var(--line); }
.an-card-notes { padding: .75rem 1.1rem .9rem; border-top: 1px solid var(--line); color: var(--fg-3); font-size: .78rem; line-height: 1.55; }
.an-card-notes p + p { margin-top: .4rem; }

/* label and value rows. Written as a description list, so a screen reader hears "Price, 0.000225 QUAI". */
.an-kv { margin: 0; }
.an-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 1rem; padding: .7rem 1.1rem; border-bottom: 1px solid var(--line); }
.an-row:last-child { border-bottom: 0; }
.an-k { margin: 0; color: var(--fg-2); font-size: .875rem; line-height: 1.4; }
.an-v { margin: 0; text-align: end; color: var(--fg); font-size: .95rem; font-weight: 500; overflow-wrap: anywhere; }
.an-v.is-dash { font-weight: 400; }
/* every figure in a column sits on the same digit width, so the digits line up. The big tiles are the explorer's own
   "v mono" markup and already get tabular figures from .mono, so they look the same as the tiles in the Explorer room. */
.an-v, .an-step-v, .an-rank-v, .an-table .xp-table td:last-child { font-variant-numeric: tabular-nums; }
/* the note and the row's own source sit under the pair, across the full width */
.an-meta { grid-column: 1 / -1; display: grid; gap: .3rem; margin: .35rem 0 0; }
.an-note { display: block; color: var(--fg-3); font-size: .75rem; line-height: 1.45; text-wrap: pretty; }
.an-row.an-held { border-top: 1px dashed var(--line-2); background: rgba(255, 255, 255, .02); }
@container (max-width: 19rem) {
  .an-row { grid-template-columns: 1fr; row-gap: .15rem; }
  .an-v { text-align: start; }
}

/* a source line: dot, name, how old. The dot is never the only signal: the words say "late" or "not read yet". */
.an-src { display: inline-flex; align-items: center; gap: .5rem; color: var(--fg-2); font-size: .75rem; line-height: 1.4; }
.an-src-text { overflow-wrap: anywhere; }
.an-dot { display: inline-block; flex: none; inline-size: .55rem; block-size: .55rem; border: 1px solid var(--fg-3); border-radius: 50%; background: transparent; }
.an-dot[data-state="live"] { border-color: var(--ok); background: var(--ok); animation: an-pulse 2.8s ease-out infinite; }
.an-dot[data-state="stale"] { border-color: var(--warn); background: var(--warn); }
@keyframes an-pulse {
  0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, .5); }
  70% { box-shadow: 0 0 0 .45rem rgba(74, 222, 128, 0); }
  100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}
@media (prefers-reduced-motion: reduce) { .an-dot[data-state="live"] { animation: none; } }

/* the burn table sits inside its card; the Labs card puts its rows and that table side by side when there is room */
.an-table-block { border-top: 1px solid var(--line); }
.an-table .xp-table th, .an-table .xp-table td { padding-inline: 1.1rem; }
.an-table .xp-table td { padding-block: .5rem; }
.an-table .xp-table td:last-child { text-align: end; }
.an-table-src { border-bottom: 0; border-top: 1px solid var(--line); }
@media (min-width: 52rem) {
  .an-labs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .an-labs > .an-card-head, .an-labs > .an-card-source, .an-labs > .an-card-notes { grid-column: 1 / -1; }
  .an-labs > .an-kv { grid-column: 1; align-self: start; }
  .an-labs > .an-table-block { grid-column: 2; border-top: 0; border-inline-start: 1px solid var(--line); }
}
/* The explorer flips wide tables into stacked cards under 700px. This one has two columns, so stacking
   only wastes space (and strands its caption): on phones it stays a plain two-column table. */
@media (max-width: 700px) {
  .an-table .xp-table { display: table; }
  .an-table .xp-table caption { display: table-caption; }
  .an-table .xp-table thead { display: table-header-group; }
  .an-table .xp-table tbody { display: table-row-group; }
  .an-table .xp-table tr { display: table-row; width: auto; padding: 0; border-bottom: 0; }
  .an-table .xp-table th, .an-table .xp-table td { display: table-cell; width: auto; padding: .6rem 1.1rem; text-align: start; white-space: normal; word-break: normal; border-bottom: 1px solid var(--line); }
  .an-table .xp-table td:last-child, .an-table .xp-table th:last-child { text-align: end; }
  .an-table .xp-table td::before { content: none; }
  /* The four-column sources table does flip into cards, as the explorer intends. Two of the explorer's flip rules
     do not suit it: a caption inside a block-level table shrinks to a narrow column, and break-all (made for
     hashes) splits ordinary words in two. */
  .an-sources-table .xp-table caption { display: block; inline-size: 100%; box-sizing: border-box; padding-inline: .75rem; }
  .an-sources-table .xp-table td { word-break: normal; overflow-wrap: anywhere; }
}

/* charts: bars start at zero so the picture is honest; the figcaption says the same in words */
.an-fig { margin: 1.25rem 0 0; padding: 1rem 1.1rem 1.1rem; border: 1px solid var(--line-2); border-radius: 14px; background: linear-gradient(160deg, rgba(25, 17, 19, .94), rgba(11, 7, 8, .82)); }
.an-grid > .an-fig { margin-top: 0; }
.an-fig-title { margin-bottom: .75rem; font: 500 .7rem/1.2 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--fg-3); }
.an-svg { display: block; inline-size: 100%; block-size: 7.5rem; }
.an-bar { fill: color-mix(in srgb, var(--red) 65%, var(--ink-900)); }
.an-bar.is-latest { fill: var(--red-hi); }
.an-bar:hover { fill: var(--fg); }
.an-figcap { max-inline-size: 80ch; margin-top: .75rem; color: var(--fg-2); font-size: .78rem; line-height: 1.5; text-wrap: pretty; }
.an-fig-src { margin-top: .6rem; }

/* ranked lists: a bar behind each row, with the number printed too, so nothing depends on the bar */
.an-rank { margin: 0; padding: 0; list-style: none; }
.an-rank li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .75rem; padding: .55rem 1.1rem; border-bottom: 1px solid var(--line); isolation: isolate; }
.an-rank li:last-child { border-bottom: 0; }
.an-rank li::before { content: ''; position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: var(--w, 0%); background: color-mix(in srgb, var(--red) 20%, transparent); z-index: -1; }
.an-rank-l { font-size: .85rem; overflow-wrap: anywhere; }
.an-rank-v { color: var(--fg-2); font-size: .85rem; }

/* tool funnels */
.an-steps { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: .9rem 1.1rem 1.1rem; list-style: none; }
.an-steps li { flex: 1 1 7rem; padding: .6rem .75rem; border: 1px solid var(--line-2); border-radius: 10px; }
.an-step-l { display: block; color: var(--fg-3); font-size: .72rem; line-height: 1.35; }
.an-step-v { display: block; margin-top: .15rem; font-size: 1.15rem; font-weight: 600; }

/* traffic: range switch, the plain-words callout and the privacy statement */
.an-range { display: inline-flex; border: 1px solid var(--line-2); border-radius: 11px; overflow: hidden; }
.an-range button { min-block-size: 2.75rem; min-inline-size: 4.75rem; padding: 0 1rem; border: 0; border-inline-start: 1px solid var(--line-2); background: transparent; color: var(--fg-2); font: 500 .85rem/1 var(--body); cursor: pointer; }
.an-range button:first-child { border-inline-start: 0; }
.an-range button:hover { color: var(--fg); background: rgba(255, 255, 255, .05); }
.an-range button[aria-pressed="true"] { background: var(--red); color: #fff; }
/* the group clips to its rounded corners, so the keyboard ring sits inside the button (the global ring sits 3px outside and would be cut off) */
.an-range button:focus-visible { outline: 2px solid var(--red-hi); outline-offset: -4px; border-radius: 0; }
.an-range button[aria-pressed="true"]:focus-visible { outline-color: #fff; }
.an-callout { margin: 0 0 1rem; padding: .85rem 1.1rem; border: 1px solid var(--line-2); border-radius: 12px; background: rgba(255, 255, 255, .03); color: var(--fg-2); font-size: .9rem; line-height: 1.5; }
.an-privacy { margin-top: 2.25rem; padding: 1.1rem 1.25rem 1.25rem; border: 1px solid var(--line-2); border-radius: 14px; background: rgba(255, 255, 255, .02); }
.an-privacy h3 { margin-bottom: .6rem; font: 500 .7rem/1.2 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--fg-3); }
.an-privacy ul { display: grid; gap: .55rem; margin: 0; padding-inline-start: 1.1rem; max-width: 70ch; color: var(--fg-2); font-size: .875rem; line-height: 1.6; }
.an-privacy p { margin-top: .9rem; font-size: .85rem; }
.an-privacy a { display: inline-block; padding-block: .4rem; color: var(--fg); text-underline-offset: .2em; }
.an-privacy a:hover { color: var(--red-hi); }

/* wide screens: two balanced columns with named areas instead of three cards of different heights with holes between
   them (HBOME: market over on chain, burns beside them; ecosystem: Labs across the top, Games over Gallery, QuaiAxe
   beside them), and the privacy statement in two columns instead of one narrow strip. The area rules live only
   here, because a grid-area in a grid that does not name it would create stray tracks. */
@media (min-width: 56rem) {
  .an-grid--hbome { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "market burns" "onchain buybacks"; }
  .an-grid--eco { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "labs labs" "games quaiaxe" "gallery quaiaxe"; }
  .an-area-market { grid-area: market; }
  .an-area-onchain { grid-area: onchain; }
  .an-area-burns { grid-area: burns; }
  .an-area-buybacks { grid-area: buybacks; }
  .an-area-labs { grid-area: labs; }
  .an-area-games { grid-area: games; }
  .an-area-gallery { grid-area: gallery; }
  .an-area-quaiaxe { grid-area: quaiaxe; }
  .an-privacy ul { display: block; columns: 2; column-gap: 2.5rem; max-width: none; }
  .an-privacy li { break-inside: avoid; margin-bottom: .55rem; }
}

/* phones: tap targets reach 44px, text keeps 16px-equivalent line lengths, nothing scrolls sideways */
@media (max-width: 760px) {
  .an-card-links a { min-block-size: 2.75rem; display: inline-flex; align-items: center; }
  .an-section-head a { padding-block: .35rem; display: inline-block; }
  .an-privacy a { padding-block: .6rem; }
  .an-range { inline-size: 100%; }
  .an-range button { flex: 1 1 0; min-inline-size: 0; }
}

/* high contrast mode strips backgrounds, so bars and dots fall back to system colours */
@media (forced-colors: active) {
  .an-bar, .an-bar.is-latest { fill: Highlight; }
  .an-bar:hover { fill: CanvasText; }
  .an-dot { forced-color-adjust: none; border-color: CanvasText; }
  .an-dot[data-state="live"] { background: Highlight; border-color: Highlight; }
  .an-dot[data-state="stale"] { background: GrayText; border-color: GrayText; }
  .an-rank li::before { display: none; }
  .an-range button[aria-pressed="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  .an-range button:focus-visible { outline-color: CanvasText; }
  .an-range button[aria-pressed="true"]:focus-visible { outline-color: HighlightText; }
}