/* The game frame: the block a final game's matchup page and result page share (2026-10-02).
   Jay: "have them look the same hero and be able to link back and forth and transition smoothly".
   Written by game_frame() in tools/build-nfl.py, used by both pages. Linked only by paired pages, so
   the view transition below runs only between two pages of a game, never on the rest of the site
   (a cross-document view transition needs both documents to opt in). Tokens only. */

.gm-paired .sh-hero-grid{grid-template-columns:minmax(0,1fr)}
/* Crumbs open the hero on both pages (Jay, 2026-10-02: "breadcrumbs should be on top always"). One line
   here, scrolling sideways if it must, so the frame under them starts at the same height on both pages. */
.gm-paired .crumbs{flex-wrap:nowrap;white-space:nowrap;overflow-x:auto;scrollbar-width:none;margin-bottom:12px}
.gm-paired .crumbs::-webkit-scrollbar{display:none}
.gm-paired .crumbs li{flex:none}
.gm-paired .crumbs a{min-width:0}
@media (max-width:380px){.gm-paired .crumbs li:nth-child(2){display:none}}
.gm-paired .lede{max-width:72ch}

.gm-frame{margin:4px 0 26px;padding:18px 22px 0;overflow:hidden;border:1px solid var(--line-2);border-radius:var(--r-lg,16px);
  background:var(--paper);box-shadow:var(--shadow)}
.gm-fsb{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:10px 32px;align-items:center}
.gm-fsc .sb-tag{margin-bottom:6px}
.gm-fsc .sb-score b{font-size:36px}
.gm-fls .ls{margin:0}
.gm-fls .ls th,.gm-fls .ls td{padding:7px 6px}
.gm-fls .ls .ls-t{font-size:20px}
.gm-fls .sb-at{margin:8px 0 0}
.ls .ls-nm{display:inline}
.ls .ls-ab{display:none}

/* Five numbers, the picks first. One grid of label, number and note rows: every cell takes it as a
   subgrid, so the five numbers share one top at every width (Mary, 2026-09-29). */
.gm-frame .gm-strip--5{margin-top:16px;grid-template-columns:repeat(5,minmax(0,1fr));grid-auto-rows:auto}
.gm-frame .gm-strip--5>div{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0}
.gm-frame .gm-strip--5 .gm-k{align-self:end}
.gm-frame .gm-strip--5 .gm-v{font-variant-numeric:tabular-nums}
.gm-frame .gm-strip--5 .gm-s{margin-top:3px;padding-top:0;text-wrap:balance}
.gm-frame .gm-strip-pick .gm-v{color:var(--ink)}

/* The tabs close the frame: everything above them is shared, so they never move between the pages.
   Same weight in both states, so the labels never change width. */
.gm-frame .pk-tabs{margin:14px -22px 0;padding:0 14px;border-top:1px solid var(--line);border-bottom:0;flex-wrap:nowrap}
.gm-frame .pk-tabs a{min-height:44px;display:inline-flex;align-items:center;justify-content:center;min-width:max-content;
  padding:0 16px;opacity:1;color:var(--ink-2);font-weight:700;border-bottom:3px solid transparent;margin-bottom:0}
.gm-frame .pk-tabs a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--brand)}
.gm-frame .pk-tabs a:hover,.gm-frame .pk-tabs a:focus-visible{color:var(--ink)}

@media (max-width:1000px){
  .gm-frame .gm-strip--5{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:760px){
  .gm-fsb{grid-template-columns:minmax(0,1fr)}
  .ls .ls-nm{display:none}
  .ls .ls-ab{display:inline}
}
/* Phones: the frame has to leave room for the headline on the first screen. The quarter table and
   venue line step out (both are in the page body), the two picks keep a row of their own with their
   notes, and the three market numbers share one row, number only. */
@media (max-width:700px){
  .gm-frame{margin-bottom:20px;padding:12px 14px 0}
  .gm-fsc .sb-score b{font-size:30px}
  .gm-fls{display:none}
  .gm-frame .gm-strip--5{margin-top:12px;grid-template-columns:repeat(6,minmax(0,1fr));column-gap:12px}
  .gm-frame .gm-strip--5>div{grid-column:span 2;padding-top:10px}
  .gm-frame .gm-strip--5>.gm-strip-pick{grid-column:span 3}
  .gm-frame .gm-strip--5>div:not(.gm-strip-pick) .gm-s{display:none}
  .gm-frame .gm-strip--5 .gm-k{font-size:10.5px;letter-spacing:.08em}
  .gm-frame .gm-strip--5 .gm-v{font-size:17px}
  .gm-frame .pk-tabs{margin:12px -14px 0;padding:0}
  .gm-frame .pk-tabs a{flex:1 1 0;min-width:0;padding:0 8px;font-size:15px;white-space:nowrap}
}
@media (max-width:380px){
  .gm-frame{padding:12px 12px 0}
  .gm-frame .pk-tabs{margin:12px -12px 0}
  .gm-frame .gm-strip--5 .gm-v{font-size:14px;white-space:nowrap}
  .gm-frame .pk-tabs a{padding:0 4px;font-size:13.5px}
}

/* Moving between the two pages: the frame is its own layer and does not animate, so it holds still;
   the rest of the page crossfades. Off for anyone who asks for less motion. Browsers without
   cross-document view transitions load the page normally. */
@view-transition{navigation:auto}
.gm-frame{view-transition-name:gm-frame}
::view-transition-group(gm-frame){animation-duration:0s}
::view-transition-old(root),::view-transition-new(root){animation-duration:160ms;animation-timing-function:ease-out}
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}