/**
 * ProfileStats base
 * Keeps the site's stylesheets out of the statistics, then gives them the base those stylesheets
 * gave, so that the statistics render from this file and pgc-profilestats.css alone. That way the
 * page and the static HTML export look the same, and whatever the statistics need has to be in
 * these files.
 *
 * Loaded before pgc-profilestats.css on the Profile stats page, and inlined before it in the
 * Default export. The Geocaching.com export leaves it out: it turns each rule into style
 * attributes, and these would land on every element.
 *
 * Every rule here has the weight of #profilestats alone, through :where(), so that each rule of
 * pgc-profilestats.css wins over it, as they did over Bootstrap's.
 */

/* Every property back to the browser's default, so that neither Bootstrap nor project-gc.css
   reaches the statistics. Some elements are left alone:
   - Those styled by HTML attributes, since the browser counts that styling as the page's own, and
     the reset would undo it: the size attributes of images and header cells, and an SVG's
     attributes, such as its shapes and colors.
   - The cells of .ps-table and .ps-table-calendar. Their rules in pgc-profilestats.css lack the
     #profilestats prefix, and so lose to the reset. They have to stay that way: the
     Geocaching.com export's inliner ignores !important, and with the prefix they would beat the
     !important utility classes on those cells there.
   - The buttons of the refresh notices: they are the site's Bootstrap buttons, and only exist on
     the page. */
#profilestats,
#profilestats :where(:not(svg, svg *, [width], [height], .ps-table td, .ps-table-calendar td, .btn)) {
  all: revert;
}

/* The box model of the site's Bootstrap. No rule of pgc-profilestats.css sets it. */
#profilestats,
#profilestats *,
#profilestats *::before,
#profilestats *::after {
  box-sizing: border-box;
}

/* The padding table cells get from the table, which the reset undoes; not for the cells it leaves
   alone. */
#profilestats :where(td:not(.ps-table td, .ps-table-calendar td), th) {
  padding: 1px;
}

/* Bootstrap's reboot, as far as the statistics use it, with its rem at the site's 13px, in whole
   pixels. */
#profilestats :where(p) {
  margin-top: 0;
  margin-bottom: 13px;
}

#profilestats :where(ol, ul) {
  margin-top: 0;
  margin-bottom: 13px;
  padding-left: 26px;
}

#profilestats :where(h1, h2, h3, h4, h5, h6) {
  margin-top: 0;
  margin-bottom: 6px;
  font-weight: 500;
  line-height: 1.2;
}

/* The heading sizes of project-gc.css. They are !important there, which the reset can't undo, so
   on the page they apply either way. */
#profilestats :where(h1) { font-size: 33px; }
#profilestats :where(h2) { font-size: 27px; }
#profilestats :where(h3) { font-size: 23px; }
#profilestats :where(h4) { font-size: 17px; }
#profilestats :where(h5) { font-size: 13px; }
#profilestats :where(h6) { font-size: 12px; }

#profilestats :where(hr) {
  margin: 13px 0;
  color: inherit;
  border: 0;
  border-top: 1px solid;
  opacity: 0.25;
}

#profilestats :where(abbr[title]) {
  text-decoration: underline dotted;
  text-decoration-skip-ink: none;
  cursor: help;
}

/* Bootstrap's alignment of images, and its sub and sup, which don't make a line taller. */
#profilestats :where(img, svg) {
  vertical-align: middle;
}

#profilestats :where(sub, sup) {
  position: relative;
  font-size: 0.75em;
  line-height: 0;
  vertical-align: baseline;
}

#profilestats :where(sub) {
  bottom: -0.25em;
}

#profilestats :where(sup) {
  top: -0.5em;
}
