/* ===========================================================================
   litepaper-rev73-premium.css

   The litepaper is already a well-built page: real display typography, a
   coherent gold/green palette, section watermarks, split bars, a scroll
   progress rail. This pass does NOT restyle any of that. It fixes four things
   that were measured on the rendered page, and then does the typographic work
   that a long-form reading document needs and a dashboard does not.

   MEASURED, at 1440px:

   1. FOUR SPLIT-BAR LABELS ARE CLIPPED MID-WORD.
        "Major"   needs 21px, has 19px
        "Mini"    needs 17px, has  7px
        "Team"    needs 17px, has 12px
        "Jackpot" needs 30px, has 16px
      These sit in the Hunt and Lucky economics bars — the two diagrams a
      reader studies most closely. A clipped word reads as a broken page, not
      as a small share.

   2. THE STICKY HEADER HIDES EVERY SECTION HEADING IT SCROLLS TO.
      .lp-top is position:sticky at 78px tall, scroll-behavior is smooth, and
      scroll-padding-top was `auto` (i.e. zero). So every click in the primary
      nav — Economy, Games, Utility, Revenue, Contracts — lands with the
      heading underneath the header. That is the document's own navigation
      failing on every use.

   3. PARAGRAPHS RUN TO 1050px.
      At the body size that is roughly 150 characters per line. Comfortable
      reading is 65-75. The median paragraph is already 554px, so this affects
      the widest few rather than the page as a whole — which is exactly why it
      had not been noticed.

   4. A FAILED CHAIN READ LEFT 27 FIGURES AS BARE EM DASHES with nothing
      explaining them. The banner styled at the end of this file is shown only
      on failure, by litepaper.js.
   =========================================================================== */

/* ── 1. never clip a label inside its own segment ─────────────────────────
   The bar is flex with `flex: var(--w)`, so a 1% share gets a 7px box and any
   label inside it is cut. Hiding the label below a usable width is correct:
   the figure is stated in the caption beneath every one of these bars, so
   nothing is lost, and the title attribute keeps it available on hover.
   `min-width` guarantees a tiny share is still visible as a colour band. */
.lp-split i { min-width: 7px; }
.lp-split i.is-narrow span { display: none; }

/* ── 2. anchor jumps must clear the sticky header ───────────────────────── */
html {
  /* 78px header + 18px of breathing room. Applies to nav clicks, in-page
     links, and browser back/forward restoring a hash. */
  scroll-padding-top: 96px;
}
/* Belt and braces for engines that honour scroll-margin on the target rather
   than scroll-padding on the scroller. */
.lp-section, .lp-section-head, [id] { scroll-margin-top: 96px; }

/* ── 3. reading measure ──────────────────────────────────────────────────
   Prose gets a comfortable line length. Tables, bars, grids and cards are
   deliberately untouched — they are not read line by line and they need the
   full column. */
.lp-section > p,
.lp-section-head > p,
.lp-callout p,
.lp-power > p {
  max-width: 74ch;
}
/* Slightly more open leading for the long explanatory passages. The page is
   read end to end, not scanned. */
.lp-section p, .lp-callout p, .lp-utility-grid p, .lp-auto-grid p {
  line-height: 1.72;
}
/* Figures inside running text should not reflow their neighbours as they tick. */
.lp-livebar b, .lp-supply-stats b, .lp-era-stats b, .lp-jack-live b,
.lp-float b, .lp-bars article > div span {
  font-variant-numeric: tabular-nums;
}

/* ── 4. the live-data state banner ──────────────────────────────────────── */
.lp-livestate {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: min(1460px, calc(100% - 34px));
  margin: 0 auto 14px;
  padding: 14px 17px;
  border: 1px solid rgba(230, 160, 60, .18);
  border-left: 3px solid #e0a13c;
  border-radius: 13px;
  background: linear-gradient(90deg, rgba(224, 161, 60, .06), rgba(0, 0, 0, .12));
}
.lp-livestate[hidden] { display: none; }
.lp-livestate > i {
  flex: none;
  width: 7px;
  height: 7px;
  margin-top: 6px;
  border-radius: 50%;
  background: #e0a13c;
  box-shadow: 0 0 9px rgba(224, 161, 60, .5);
  animation: lpPulse 1.9s ease-in-out infinite;
}
.lp-livestate b {
  display: block;
  margin-bottom: 4px;
  color: #e9c98b;
  font-size: 11.5px;
  font-weight: 600;
}
.lp-livestate span {
  color: #8d8478;
  font-size: 10.3px;
  line-height: 1.62;
}

@media (max-width: 720px) {
  html { scroll-padding-top: 78px; }
  .lp-section, .lp-section-head, [id] { scroll-margin-top: 78px; }
  .lp-livestate { width: calc(100% - 18px); padding: 12px 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .lp-livestate > i { animation: none; }
}