/* This file is part of Chaos Accelerator, licensed under the Common Public
   Attribution License, Version 1.0 (CPAL-1.0) - see LICENSE in the project
   root, or https://chaosaccelerator.com/license for a hosted copy. */

/* ---- Global Stats ----
   The button under the gear, and the card it opens. Both deliberately
   reuse app-shell.css's own .floating-settings-btn / .settings-panel
   language rather than inventing a second one: this is the same kind of
   permanent corner control and the same kind of card, and the only things
   that genuinely differ are where the button sits and how wide the card
   has to be to hold a chart. Everything below the header is generated by
   fractal-stats-panel.js. */

/* The card itself is the shared .menu-card in fractal-grid.css - this file
   styles only what goes INSIDE it, all of which is built by
   fractal-stats-panel.js. */

/* The panel's own state line: what is being measured, or why nothing is.
   Pinned to the top of the card's scrolling body rather than scrolling away
   with it - "still waiting on a render" (and the spinner that says so) is
   exactly the kind of thing you'd otherwise lose sight of the moment you
   scroll down to a switched-on section below it. The negative margin/top
   pair cancels .menu-card-body's own 14px padding on all four sides so this
   bar reaches the card's real edges and sits flush under the header instead
   of floating with a gap above it; its own padding puts that space back for
   the text. Needs its own background (matching .menu-card's frosted look)
   and a bottom border, since without one the sections scrolling underneath
   would show straight through it. */
.stats-status {
  margin: -14px -14px 0 -14px;
  padding: 10px 14px;
  position: sticky;
  top: -14px;
  z-index: 2;
  background: var(--bg-panel-float);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--text-dim);
}
.stats-status-working { color: var(--accent); }
.stats-status-stale { color: #e0b36a; }
.stats-status-loading {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--text-dim);
}

/* The spinning ring next to "Metrics will be calculated after rendering
   completes." - text alone read as inert, easy to mistake for a dead end
   rather than a wait. */
.stats-spinner {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2.5px solid var(--border);
  border-top-color: var(--accent);
  animation: stats-spinner-spin 0.8s linear infinite;
}
@keyframes stats-spinner-spin {
  to { transform: rotate(360deg); }
}

/* The sample-resolution slider at the top of the card. Same shape as the
   grid's own .field blocks (label above, control, hint below - see
   fractal-grid.css) rather than a second idiom for the same thing. */
.stats-field {
  display: block;
  font-size: 12px;
}
.stats-field-label {
  display: block;
  margin-bottom: 6px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.stats-field input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
}
.stats-field-hint {
  display: block;
  margin-top: 5px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-dim);
}

.stats-actions {
  display: flex;
  gap: 8px;
}

/* ---- One section ----
   The switch IS the section: off means collapsed AND not measured (each
   one is a full extra pass over the sampled view), so there is no second
   collapse control to get out of step with it. */
.stats-section {
  border-top: 1px solid var(--border);
  padding-top: 10px;
}
.stats-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  cursor: pointer;
}
.stats-section-title {
  font-weight: 600;
}
.stats-section-hint {
  margin: 6px 0 0 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--text-dim);
}
.stats-section-body {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.stats-section-body[hidden] {
  display: none;
}

/* ---- Rows ----
   Label left, value right, both on one line where they fit and wrapping
   onto two where they don't - a value like a pair of world coordinates is
   routinely longer than the space a 340px card can spare for it. */
.stat-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  padding: 3px 0;
  flex-wrap: wrap;
}
.stat-label {
  color: var(--text-dim);
  white-space: pre-wrap;
}
.stat-value {
  color: var(--text);
  font-variant-numeric: tabular-nums;
  text-align: right;
  margin-left: auto;
}
.stat-note {
  margin: 6px 0 2px 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-dim);
}

/* A color chip in front of a label - the pie chart's legend lines use it
   to tie each share to its slice. */
.stat-swatch {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid var(--border);
  flex-shrink: 0;
}

/* Charts size themselves to this box's width (see prepareCanvas in
   fractal-stats-panel.js), so it must have a real width before they draw -
   which is why the panel defers every draw until its body is in the DOM. */
.stat-chart {
  margin: 6px 0;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px;
  overflow: hidden;
}
.stat-chart canvas {
  display: block;
}

/* The view moved and these numbers describe somewhere else now. Dimmed
   rather than cleared: a visibly stale panel is far more use mid-pan than
   an empty one, and the status line says so in words at the same time. */
.stats-stale .stats-section {
  opacity: 0.45;
}

/* ---- Number lines ----
   A number line: both ends named, reference points along it, and an
   arrow showing where this view falls - for every stat whose range is fixed by the maths rather than by the
   scene (see numberLine in fractal-stats-panel.js). Four stacked strips:
   reference names above, the track, the arrows under it, and what the two
   ends mean at the bottom.

   All of it is positioned in percentages so it reflows with the card and
   needs no measuring - which is the whole reason these are DOM rather than
   another canvas. Nothing here clips: an arrow at the very end of a track
   lets its triangle bleed a couple of pixels into the card's own padding,
   which is invisible, where overflow: hidden would shave it in half. */
.stat-numline {
  width: 100%;
  /* The parent is sometimes .stat-row (row direction, wrapping) and
     sometimes the section body (column direction). `auto` keeps the basis
     out of the height in the column case; the rule below forces the wrap
     in the row one. */
  flex: 0 0 auto;
  margin: 5px 0 9px 0;
}
.stat-row > .stat-numline {
  flex-basis: 100%;
}

.stat-numline-marks {
  position: relative;
  height: 13px;
  font-size: 9.5px;
  line-height: 13px;
  color: var(--text-dim);
  white-space: nowrap;
}
.stat-numline-mark {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
}
/* Reference ticks and arrow labels both anchor rather than straddle when
   they sit at an end - see anchorClass in fractal-stats-panel.js. */
.stat-numline-mark.stat-numline-at-lo,
.stat-numline-arrow-label.stat-numline-at-lo {
  transform: translateX(0);
}
.stat-numline-mark.stat-numline-at-hi,
.stat-numline-arrow-label.stat-numline-at-hi {
  transform: translateX(-100%);
}

.stat-numline-track {
  position: relative;
  height: 6px;
  border-radius: 3px;
  background: var(--bg-input);
  border: 1px solid var(--border);
}
/* A reference tick is a hairline THROUGH the track, so it reads as a place
   on the axis rather than as another value being plotted on it. */
.stat-numline-tick {
  position: absolute;
  top: -1px;
  bottom: -1px;
  width: 1px;
  background: var(--border);
}

.stat-numline-arrows {
  position: relative;
  height: 20px;
  font-size: 9.5px;
  line-height: 12px;
  white-space: nowrap;
}
.stat-numline-arrow {
  position: absolute;
  top: 0;
  width: 0;
}
/* The arrowhead itself: a CSS triangle pointing up at the track. */
.stat-numline-point {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 5px solid var(--accent);
}
.stat-numline-arrow-label {
  position: absolute;
  top: 6px;
  left: 0;
  transform: translateX(-50%);
  color: var(--accent);
}
/* The second arrow on a shared track (the steepest step next to the
   average one). Dimmed and outlined so the two are told apart at a glance
   and the primary reading stays the primary one. */
.stat-numline-arrow-weak .stat-numline-point {
  border-bottom-color: var(--text-dim);
}
.stat-numline-arrow-weak .stat-numline-arrow-label {
  color: var(--text-dim);
}
.stat-numline-empty {
  color: var(--text-dim);
  font-style: italic;
}

/* What the two ends MEAN - the part that makes the arrow's position
   readable at all. Allowed to wrap onto two lines: "all horizontal change
   (vertical bands)" will not fit on one at the card's width, and shortening
   it to fit would lose the half that says what it looks like. */
.stat-numline-ends {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 1px;
  font-size: 9.5px;
  line-height: 1.25;
  color: var(--text-dim);
}
.stat-numline-end {
  max-width: 46%;
}
.stat-numline-end-hi {
  text-align: right;
}

/* The switch under Feature Census that draws the longest ridge and valley
   onto the map itself. A plain checkbox rather than the section switches'
   sliding toggle: those mean "measure this or don't", which costs a pass
   over the view, and this one only decides whether something already
   measured is also drawn. */
.stat-overlay-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 12px;
  color: var(--text);
}
.stat-overlay-toggle input {
  accent-color: var(--accent);
  margin: 0;
}