/* ══ THE PAGE TOP (prompt 394, BL-1797, Nov 10 2026) ══════════════
   Dan, Nov 10: "I do not understand why the titles differ across pages ...
   fix it for good ... whenever we build something new these things need to
   be remembered and implemented." About 110 templates each built their own
   title block, so every session read "smaller titles, less gray text" its own
   way. This file is now the ONLY place a page title is styled.

   Markup comes from templates/_page_top.html and nowhere else:
     page_top(title, how)     every tool, board, hub, data, plan-less page
     matchup_top(title, line) game, team and player pages (348's design)

   The numbers are copied from the Arbitrage Scanner as it stood on Nov 10
   (measured at 390 and 1280: 19px, weight 800, line height 1.2, letter
   spacing -0.6px, 18px above on a phone and 28px from 841px up, 12px to the
   first control). They are design values, not options: a page passes its
   title and its How It Works text and nothing else.

   The !important flags are deliberate. Pages carry old inline rules such as
   "h1 { font-size: 34px }" and "#page .hero h1"; the title must come out the
   same whatever a page still says. tests/_dry_test_page_top.py and
   qa/page_top_measure.py fail on any difference. */

:root {
  --tog-pt-size: 19px;
  --tog-pt-weight: 800;
  --tog-pt-lh: 1.2;
  --tog-pt-track: -0.6px;
  --tog-pt-above: 18px;
  --tog-pt-above-wide: 28px;
  --tog-pt-below: 12px;
  --tog-mt-size: 21px;
  --tog-mt-size-wide: 26px;
}

/* ── page_top ──────────────────────────────────────────────────────────── */
.tog-pt {
  display: flex; flex-wrap: wrap; align-items: center;
  column-gap: 12px; row-gap: 0;
  margin: 0 0 var(--tog-pt-below) !important;
  padding: var(--tog-pt-above) 0 0 !important;
  border: 0 !important; background: none !important;
  max-width: none; text-align: left; box-sizing: border-box;
}
@media (min-width: 841px) {
  .tog-pt { padding-top: var(--tog-pt-above-wide) !important; }
}
.tog-pt > h1 {
  font-size: var(--tog-pt-size) !important;
  font-weight: var(--tog-pt-weight) !important;
  line-height: var(--tog-pt-lh) !important;
  letter-spacing: var(--tog-pt-track) !important;
  margin: 0 !important; padding: 0 !important;
  color: var(--text, #EEEEEE) !important;
  text-align: left !important; text-transform: none !important;
  font-family: inherit !important; font-style: normal !important;
  flex: 0 1 auto; min-width: 0; overflow-wrap: anywhere;
}

/* How It Works: a native disclosure. The text is in the server-rendered HTML
   and opens with no script. display: contents lets the summary sit beside the
   title and the text open underneath at full width; an engine without the
   2024 details rendering (no ::details-content) puts the summary on its own
   line under the title instead, which still works. */
.tog-pt-how { display: contents; }
.tog-pt-how::details-content { flex-basis: 100%; }
@supports not selector(::details-content) {
  .tog-pt-how { display: block; flex-basis: 100%; }
}
.tog-pt-how > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; gap: 5px;
  /* A 44px tap that adds nothing to the row: the row stays one title line. */
  min-height: 44px; margin: -10.6px 0;
  font-size: 13px; font-weight: 700; line-height: 1.2;
  color: var(--gold, #B69862); white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.tog-pt-how > summary::-webkit-details-marker { display: none; }
.tog-pt-how > summary::marker { content: ""; }
.tog-pt-how > summary::after {
  content: ""; width: 0; height: 0;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
}
.tog-pt-how[open] > summary::after { transform: rotate(180deg); }
.tog-pt-how > summary:focus-visible { outline: 2px solid var(--gold, #B69862); outline-offset: 2px; border-radius: 4px; }
.tog-pt-desc {
  font-size: 13px; line-height: 1.45; color: var(--muted, #888888);
  margin: 6px 0 0; max-width: 640px;
}
.tog-pt-act { margin-left: auto; display: flex; align-items: center; }

/* ── matchup_top: game, team and player pages (prompt 348's approved design,
   one H1 and one summary line). Its own values, shared by all three. ───── */
.tog-mt { margin: 0 0 10px !important; padding: var(--tog-pt-above) 0 0 !important;
  border: 0 !important; background: none !important; text-align: left; box-sizing: border-box; }
@media (min-width: 841px) { .tog-mt { padding-top: var(--tog-pt-above-wide) !important; } }
.tog-mt > h1, .tog-mt > .gp-h1-fold > h1 {
  font-size: var(--tog-mt-size) !important; font-weight: var(--tog-pt-weight) !important;
  line-height: var(--tog-pt-lh) !important; letter-spacing: var(--tog-pt-track) !important;
  margin: 0 0 2px !important; padding: 0 !important; color: var(--text, #EEEEEE) !important;
  text-align: left !important; text-transform: none !important; font-family: inherit !important;
  overflow-wrap: anywhere;
}
@media (min-width: 900px) {
  .tog-mt > h1, .tog-mt > .gp-h1-fold > h1 { font-size: var(--tog-mt-size-wide) !important; }
}
.tog-mt-line { color: var(--muted, #888888); font-size: 13px; line-height: 1.4; margin: 2px 0 0; }