/* StatsPanel: the rows of the player's and the builder's statistics panel.
   Placement, background and the visible toggle stay with each host's class. */

/* A title that stays over a body that scrolls. The sections open to more
   rows than a phone -- or a 1080p desktop -- has room for, and the ladder
   gains a rung whenever the quality work does: the host caps the panel's height and
   whatever does not fit inside it scrolls, so no row is ever cut off the
   screen, while the title and the host's close button keep their corner. The
   touch controls draw OVER the panel during play, so scrolling it never
   costs the joystick a touch. */
.stats-panel {
  display: flex;
  flex-direction: column;
}

.stats-panel-body {
  min-height: 0; /* without this a flex item never shrinks under its rows */
  /* Up and down only: a row that runs long clips, and neither a bar nor a
     bounce sideways is ever wanted. Vertically it bounces as any list does,
     but keeps the scroll to itself at either end. (Both properties read x
     then y.) */
  overflow: hidden auto;
  overscroll-behavior: none contain;
  /* Out through half the panel's padding and the same amount back as its own,
     so the bar ends up a step from the panel's edge and a step from the rows,
     and the rows still end where the title's rule does when there is nothing
     to scroll. Reserving the gutter keeps them from shifting when a section
     opens; a browser with overlay scrollbars reserves none and needs none --
     its bar takes no width, so the padding alone spaces the rows. The bottom
     is the same trade, which also ends the bar a step above the panel's
     corner and still clears the last row of it. */
  margin-right: calc(-1 * var(--space-1));
  padding-right: var(--space-1);
  /* The same step on the left, where the chevrons hang out past the rows:
     turned sideways the arrow is wider than upright, and the body would
     otherwise clip the tip of it. */
  margin-left: calc(-1 * var(--space-1));
  padding-left: var(--space-1);
  margin-bottom: calc(-1 * var(--space-1));
  padding-bottom: var(--space-1);
  scrollbar-gutter: stable;
}

/* The site's scrollbar in the panel's colours: the same bar the rest of the
   platform draws -- one step wide, in the white the panel rules its rows with
   -- with the trough dropped. The site's own colours (an opaque surface track
   with a border, for solid panels) read as a grey slab down a HUD you can see
   the game through. The bar is the whole track here rather than a thumb inset
   inside a wider one: same bar on screen, but a track no wider than it needs
   is one a browser with overlay scrollbars costs nothing for. */
.stats-panel-body::-webkit-scrollbar {
  width: var(--space-1);
}

.stats-panel-body::-webkit-scrollbar-track {
  background: transparent;
  border: none;
}

.stats-panel-body::-webkit-scrollbar-thumb {
  background: var(--overlay-white-25);
  border: none;
}

.stats-panel-body::-webkit-scrollbar-thumb:hover {
  background: var(--overlay-white-40);
}

/* Firefox, which has no pseudo-elements for it (the same shape the site's own
   scrollbar rules take in style.css). */
@supports not selector(::-webkit-scrollbar) {
  .stats-panel-body {
    scrollbar-width: thin;
    scrollbar-color: var(--overlay-white-25) transparent;
  }
}

.stats-panel-title {
  color: var(--color-text);
  margin-bottom: var(--space-1);
  border-bottom: 1px solid var(--overlay-white-25);
  padding-bottom: var(--space-1);
}

.stats-panel-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
}

.stats-panel-value {
  text-align: right;
}

/* One line per hitch, newest at the top. A long one wraps under itself --
   the panel never scrolls sideways -- with the wrap hanging clear of the
   time that starts the line. */
.stats-panel-hitch {
  padding-left: 2ch;
  text-indent: -2ch;
}

.stats-panel-separator {
  border: none;
  border-top: 1px solid var(--overlay-white-25);
  margin: var(--space-1) 0;
}

/* Right under the ladder's status row, that row's own padding is the gap:
   no margin on top of it, so the rule sits as far below the text as the
   rule above the text sits over it. */
.gpu-ladder + .stats-panel-separator {
  margin-top: 0;
}

/* The sections: the expandable the builder's Assets panel uses, stripped to
   text. It keeps the behaviour -- a name, a chevron, one section open or shut
   at a time, the same grid collapse -- and drops the chrome: no box, no fills,
   no rules, because this panel is rows of text over a game. */
.stats-panel-section {
  border: none;
  border-radius: 0;
  margin-top: var(--space-1);
  /* There are no fills or corners left to clip, and the chevron's box hangs
     a step past this one's left edge: let it paint. */
  overflow: visible;
}

.stats-panel .expandable-part-header {
  height: auto;
  gap: var(--space-1);
  padding: 0;
  background: transparent;
  color: var(--color-text-dark);
}

.stats-panel .expandable-part-header:hover {
  background: transparent;
  color: var(--color-text);
}

/* The arrow sits at the panel's text edge: no button padding (the browser
   gives one by default), and the box pulled left by the step the artwork
   itself keeps empty on that side. Sized to the grid, so what the arrow
   opens can line up under the name beside it: box (3) less the step it is
   pulled by (1), plus the gap (1), is one step of three. */
.stats-panel .expandable-part-header > .button-bare-inst-expand {
  /* The whole box, not just the side that moves: the builder's Assets panel
     sizes this same button for its own rows (24px, inset by a negative
     margin all round), and half an override would render this panel one way
     there and another on the play page. */
  width: var(--space-3);
  height: var(--space-3);
  padding: 0;
  margin: 0 0 0 calc(-1 * var(--space-1));
}

.stats-panel .expandable-part-icon {
  width: var(--space-3);
  height: var(--space-3);
}

.stats-panel-section .expandable-part-content-inner {
  padding-left: var(--space-3);
}

/* The chevron turns from the button that holds it, the way the Assets panel
   turns its own: the shared rule only reaches an icon that is the header's
   own child. */
.stats-panel-section.expanded
  > .expandable-part-header
  > .button-bare-inst-expand
  > .expandable-part-icon {
  transform: rotate(90deg);
}

.stats-panel .expandable-part-content {
  background: transparent;
}

.stats-panel .expandable.expanded > .expandable-part-content {
  border-top: none;
}