/* /nfl/weekend-survivor. The game's own screens keep weekend-friends.css; this file lays
   out the page around them. Header, footer and the games/tools row: marketing-newsprint.css. */
html:has(.wsm) { color-scheme: only light; background: var(--labs-paper, #fdfdfb); }
.wsm { background: var(--labs-paper); color: var(--labs-ink); font-family: var(--labs-font-body); -webkit-font-smoothing: antialiased; }
.wsm main :where(h1, h2, h3, p, ol, ul, dl, figure, table) { margin: 0; }
.wsm :focus-visible { outline: 2px solid var(--labs-ink); outline-offset: 3px; }
.wsm-wrap { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: 48px; }
.wsm-kicker { font: 600 11px/1.3 var(--labs-font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--labs-muted); }
.wsm-h1 { font: 700 var(--np-hero-size)/1.06 var(--labs-font-display); letter-spacing: -.022em; text-wrap: balance; }
.wsm-h2 { font: 700 44px/1 var(--labs-font-display); letter-spacing: -.012em; text-wrap: balance; margin-top: 10px !important; }
.wsm-deck { font-size: 19px; line-height: 1.5; color: #3b3c37; max-width: 34ch; text-wrap: pretty; }
.wsm-note { font-size: 13px; color: var(--labs-muted); }
.wsm-text-link { font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.wsm-example { display: inline-flex; align-items: center; gap: 6px; font: 600 10.5px/1 var(--labs-font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--labs-muted); }
.wsm-example::before { content: ''; width: 7px; height: 7px; border: 1.5px solid currentColor; border-radius: 50%; }

.wsm-cta-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 22px; }
.wsm .wsm-cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 24px; border-radius: var(--labs-radius); background: var(--labs-ink); color: var(--labs-paper); font-size: 17px; font-weight: 650; text-decoration: none; white-space: nowrap; }
.wsm .wsm-cta:hover { filter: brightness(1.25); }
.wsm .wsm-cta-off { background: var(--labs-panel); color: var(--labs-muted); }
.wsm .wsm-cta-off:hover { filter: none; }
.wsm .wsm-cta-sm { min-height: 40px; padding: 0 16px; font-size: 15px; }

/* Hero: the copy beside the replay player, both about one height. */
.wsm-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 64px; align-items: center; padding-top: 52px; }
.wsm-copy { display: flex; flex-direction: column; gap: 22px; max-width: 600px; }
.wsm-status { display: flex; align-items: baseline; gap: 8px; border-top: 1px solid var(--labs-line); padding-top: 14px; font-size: 14px; color: #45463f; }
.wsm-status i { flex: none; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--labs-accent); transform: translateY(-1px); }
.wsm-status-late i { background: #977326; }
.wsm-status-unavailable i, .wsm-status-closed i { background: var(--labs-line); }
.wsm-status b { color: var(--labs-ink); }

/* The replay player: one frame, the moments down its left side and the real board (the
   game's screen at phone width, no app bar) on the right. Phones: a bar on top instead. */
.wsm-player { display: grid; grid-template-columns: 214px 390px; overflow: hidden; border: 1px solid var(--labs-line); border-radius: 20px; background: var(--labs-paper); box-shadow: 0 1px 0 #0000000a, 0 28px 56px -32px #00000059; }
.wsm .wsm-player .wsm-phone { width: auto; max-width: none; margin: 0; border: 0; border-radius: 0; box-shadow: none; }
.wsm-steps { display: flex; flex-direction: column; padding: 16px 0 16px 16px; border-right: 1px solid var(--labs-line); background: var(--labs-panel); }
.wsm-steps-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: auto; padding: 14px 16px 0 0; }
.wsm .wsm-toggle { min-height: 28px; padding: 0 12px; border: 1px solid var(--labs-input-border); border-radius: var(--labs-radius); background: var(--labs-paper); color: var(--labs-ink); font: 600 12px/1 var(--labs-font-body); cursor: pointer; }
.wsm .wsm-toggle:hover { background: var(--labs-panel); }
.wsm-tabs { display: flex; flex-direction: column; border-left: 1px solid #d9dad2; }
.wsm-tabs button { position: relative; padding: 11px 14px 12px; color: var(--labs-muted); text-align: left; cursor: pointer; }
.wsm-tabs button span { display: block; font: 600 10.5px/1.2 var(--labs-font-mono); letter-spacing: .05em; text-transform: uppercase; }
.wsm-tabs button b { display: block; margin-top: 3px; font: 700 16px/1.15 var(--labs-font-display); }
.wsm-tabs button[aria-selected="true"], .wsm-tabs button:hover { color: var(--labs-ink); }
/* The live moment's caption shows under its title; the others stay one line each. */
.wsm-tab-caption { display: none; }
.wsm-tabs button[aria-selected="true"] .wsm-tab-caption { display: block; margin-top: 6px; font: 400 13px/1.42 var(--labs-font-body); color: #3b3c37; }
.wsm-bar { position: absolute; top: 0; bottom: 0; left: -1px; width: 3px; transform-origin: top; }
.wsm-tabs button[aria-selected="true"] .wsm-bar { background: var(--labs-ink); }
[data-wsm-replay].is-playing .wsm-tabs button[aria-selected="true"] .wsm-bar { animation: wsm-fill-y var(--wsm-step-ms, 4600ms) linear both; }
@keyframes wsm-fill-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes wsm-fill-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* The live caption: always announced, shown only on phones (the rail shows it inline). */
.wsm-caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wsm-caption-time { display: block; margin-bottom: 3px; font: 600 10.5px/1.2 var(--labs-font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--labs-muted); }
.wsm-caption strong { display: block; margin-bottom: 2px; font: 700 19px/1.1 var(--labs-font-display); color: var(--labs-ink); }

/* The narrow app screen: the game at phone width, on paper. Not a device frame. */
.wsm .wsm-phone { width: 390px; max-width: 100%; min-height: 0; overflow: hidden; border: 1px solid var(--labs-line); border-radius: 20px; background: var(--labs-paper); box-shadow: 0 1px 0 #0000000a, 0 28px 56px -32px #00000059; font-size: 14px; line-height: 1.45; }
.wsm-appbar { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px 12px; border-bottom: 1px solid var(--labs-line); font-size: 13px; font-weight: 600; }
.wsm-word { display: inline-flex; height: 19px; color: var(--labs-ink); }
.wsm-word svg { height: 100%; width: auto; }
.wsm-screen { padding: 18px 14px 16px; }
.wsm-screen-head .wf-eyebrow { margin-bottom: 5px !important; }
.wsm .wsm-screen-title { font: 700 29px/1.05 var(--labs-font-display); letter-spacing: -.6px; overflow-wrap: anywhere; }
.wsm-screen [data-wsm-board] { position: relative; display: flex; flex-direction: column; }
/* A fixed-height screen: the legend sits at the bottom, spare room above it. */
.wsm-screen [data-wsm-board] > .wf-board-footer { margin-top: auto; }
.wsm-screen .wf-live-meta { margin-top: 10px; }
.wsm-screen .wf-message { margin: 12px 0 0; }
.wsm-screen .wf-finish { margin: 14px 0 6px; }
.wsm-screen .wf-board { margin-top: 14px; }
.wsm-screen .wf-board-sticky { position: static; background: transparent; }
.wsm-screen .wf-board-row { will-change: transform; }
/* Example tiles open no game sheet on this page. */
.wsm-screen .wf-tap-hint { display: none; }
/* The board's own phone-width rules (weekend-friends.css, max-width:600px), applied
   to the screen at every viewport. Keep in step with that media block. */
.wsm-screen .wf-board-head { font-size: 11px; }
.wsm-screen .wf-board-head, .wsm-screen .wf-board-row { gap: 3px; }
.wsm-screen .wf-board-cell { gap: 2px; }
.wsm-screen .wf-pick strong { font-size: 11px; }
.wsm-screen .wf-board-summary { font-size: 11px; }
.wsm-screen .wf-board-footer { flex-direction: column; justify-content: center; }
.wsm-screen .wf-legend { gap: 11px; }
.wsm-screen .wf-flow { max-width: none; }
.wsm-screen .wf-flow h1, .wsm-screen .wsm-screen-title + * { margin-top: 0; }
.wsm .wsm-phone-scroll { display: flex; flex-direction: column; height: 640px; }
.wsm-phone-scroll .wsm-screen { flex: 1; overflow-y: auto; overscroll-behavior: contain; }
.wsm-phone-scroll .wf-submit { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--labs-line); }
.wsm-screen[inert] { user-select: none; }

/* Comparison */
.wsm-compare { padding-top: 80px; }
.wsm-compare .wsm-h2 { max-width: 24ch; }
.wsm-table { width: 100%; margin-top: 30px !important; border-collapse: collapse; font-size: 16px; }
.wsm-table th, .wsm-table td { padding: 15px 20px 15px 0; border-bottom: 1px solid var(--labs-line); text-align: left; vertical-align: top; }
.wsm-table thead th { padding-bottom: 10px; border-bottom: 2px solid var(--labs-ink); font: 600 11px/1.2 var(--labs-font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--labs-muted); }
.wsm-table tbody th { width: 24%; font: 700 19px/1.2 var(--labs-font-display); }
.wsm-table td { width: 32%; color: var(--labs-muted); }
.wsm-table td:last-child, .wsm-table thead th:last-child { width: 44%; padding-left: 16px; background: var(--labs-panel); color: var(--labs-ink); }
.wsm-table td:last-child { font-weight: 600; }

/* How it works */
.wsm-how { padding-top: 104px; }
.wsm-how .wsm-h2 { max-width: 22ch; }
/* Copy and screens share rows (subgrid), so all three screens start on one line. */
.wsm-beats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto; column-gap: 32px; margin-top: 40px !important; }
.wsm-beat { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 22px; }
.wsm-beat-copy { min-height: 196px; padding-top: 14px; border-top: 2px solid var(--labs-ink); }
.wsm-beat-copy b { font: 600 12px var(--labs-font-mono); letter-spacing: .08em; color: var(--labs-muted); }
.wsm-beat-copy h3 { margin: 8px 0 10px !important; font: 700 26px/1.05 var(--labs-font-display); }
.wsm-beat-copy p { font-size: 16px; color: #3b3c37; }
.wsm-beat-visual { display: flex; justify-content: center; }
.wsm-beat-visual .wsm-phone { zoom: .9; height: 640px; display: flex; flex-direction: column; }
/* One height for all three screens; a long one fades out at the bottom. */
.wsm-beat-visual .wsm-phone:not(.wsm-phone-scroll) > .wsm-screen { position: relative; flex: 1; overflow: hidden; }
.wsm-beat-visual .wsm-phone:not(.wsm-phone-scroll) > .wsm-screen::after { content: ''; position: absolute; inset: auto 0 0; height: 64px; background: linear-gradient(transparent, var(--labs-paper)); pointer-events: none; }

/* Who plays it */
.wsm-who { padding-top: 96px; }
.wsm-who .wsm-h2 { max-width: 24ch; }
.wsm-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 30px; border-top: 2px solid var(--labs-ink); }
.wsm-tiles article { padding: 16px 22px 8px; border-left: 1px solid var(--labs-line); }
.wsm-tiles article:first-child { padding-left: 0; border-left: 0; }
.wsm-tiles h3 { margin-bottom: 8px !important; font: 700 22px/1.1 var(--labs-font-display); }
.wsm-tiles p { font-size: 15px; color: #45463f; }

/* Start band, above the rules */
.wsm-band { margin-top: 104px; padding: 72px 0; background: var(--labs-ink); color: var(--labs-paper); }
.wsm-band-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 32px; }
.wsm-band .wsm-h2 { margin-top: 0 !important; max-width: 20ch; }
.wsm-band .wsm-note { margin-top: 10px !important; font-size: 15px; color: #c9cac2; }
.wsm-band .wsm-cta { background: var(--labs-paper); color: var(--labs-ink); }
.wsm-band .wsm-cta-off { background: #3a3b36; color: #c9cac2; }

/* Rules and questions */
.wsm-rules-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 72px; align-items: start; padding-block: 92px; }
.wsm-rules { margin-top: 26px !important; border-top: 2px solid var(--labs-ink); counter-reset: rule; }
.wsm-rules li { display: grid; grid-template-columns: 36px 1fr; gap: 6px; padding: 15px 0; border-bottom: 1px solid var(--labs-line); counter-increment: rule; color: #3b3c37; }
.wsm-rules li::before { content: counter(rule); font: 700 22px/1.1 var(--labs-font-display); color: var(--labs-ink); }
.wsm-rules strong { color: var(--labs-ink); }
.wsm-faq { margin-top: 26px; border-top: 2px solid var(--labs-ink); }
.wsm-faq details { border-bottom: 1px solid var(--labs-line); }
.wsm-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; list-style: none; font-weight: 650; cursor: pointer; }
.wsm-faq summary::-webkit-details-marker { display: none; }
.wsm-faq summary::after { content: '+'; font: 400 22px/1 var(--labs-font-body); color: var(--labs-muted); }
.wsm-faq details[open] summary::after { content: '−'; }
.wsm-faq details p { max-width: 52ch; padding: 0 0 18px; color: #45463f; }

/* The Weekend Survivor bar: shown once the hero's Start button scrolls away. */
.wsm-sticky { position: fixed; z-index: 60; inset: 0 0 auto; border-bottom: 2px solid var(--labs-ink); background: var(--labs-paper); transform: translateY(-100%); transition: transform .25s ease; }
.wsm-sticky.is-on { transform: none; }
.wsm-sticky-inner { display: flex; align-items: center; gap: 18px; min-height: 60px; }
.wsm-sticky-name { font: 700 20px/1 var(--labs-font-display); white-space: nowrap; }
.wsm-sticky-status { font-size: 13px; color: var(--labs-muted); }
.wsm-sticky-link { margin-left: auto; font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 1180px) {
  .wsm-hero { grid-template-columns: minmax(0, 1fr); row-gap: 44px; padding-top: 40px; }
  .wsm-copy { max-width: 640px; }
  .wsm-player { justify-self: center; }
  .wsm-beats { grid-template-columns: 1fr; grid-template-rows: none; gap: 56px; }
  .wsm-beat { display: grid; grid-row: auto; grid-template-rows: none; grid-template-columns: minmax(0, 1fr) 390px; gap: 40px; align-items: start; }
  .wsm-beat-copy { min-height: 0; }
  .wsm-beat-visual .wsm-phone { zoom: 1; }
  .wsm-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px; }
  .wsm-tiles article:nth-child(3) { padding-left: 0; border-left: 0; }
}
@media (max-width: 880px) {
  .wsm-wrap { padding-inline: 24px; }
  .wsm-compare, .wsm-how { padding-top: 72px; }
  .wsm-who { padding-top: 72px; }
  .wsm-band { margin-top: 72px; padding: 56px 0; }
  .wsm-rules-grid { grid-template-columns: 1fr; gap: 48px; padding-block: 68px; }
}
@media (max-width: 680px) {
  /* Phones: one column. The moments become a progress bar across the top of the player,
     with the live caption under it; the board keeps the full width. */
  .wsm-player { grid-template-columns: minmax(0, 1fr); justify-self: stretch; width: 100%; max-width: 420px; margin-inline: auto; }
  .wsm-steps { padding: 12px 14px 14px; border-right: 0; border-bottom: 1px solid var(--labs-line); }
  .wsm-steps-foot { order: -1; margin: 0 0 6px; padding: 0; }
  .wsm-tabs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; border: 0; }
  .wsm-tabs button { height: 24px; padding: 0; }
  .wsm-tabs button span, .wsm-tabs button b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .wsm-tabs button[aria-selected="true"] .wsm-tab-caption { display: none; }
  .wsm-tabs button::before { content: ''; position: absolute; inset: 10px 0 auto; height: 4px; border-radius: 2px; background: var(--labs-line); }
  .wsm-bar { inset: 10px 0 auto; width: auto; height: 4px; border-radius: 2px; transform-origin: left; }
  .wsm-tabs button:has(~ button[aria-selected="true"]) .wsm-bar { background: var(--labs-ink); }
  [data-wsm-replay].is-playing .wsm-tabs button[aria-selected="true"] .wsm-bar { animation-name: wsm-fill-x; }
  .wsm-caption { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; min-height: 7.4em; margin-top: 8px !important; font-size: 13.5px; line-height: 1.45; color: #3b3c37; }
}
@media (max-width: 760px) {
  .wsm-beat { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .wsm .wsm-phone { margin-inline: auto; }
  .wsm .wsm-phone-scroll, .wsm-beat-visual .wsm-phone { height: 560px; }
  .wsm-tiles { grid-template-columns: 1fr; }
  .wsm-tiles article, .wsm-tiles article:nth-child(3) { padding: 14px 0 6px; border-left: 0; border-top: 1px solid var(--labs-line); }
  .wsm-tiles article:first-child { border-top: 0; }
  /* On phones the bar sits at the bottom, under the thumb. The page ends with room for it
     (64px plus its 2px rule), so it never covers the footer's last links. */
  body.wsm { padding-bottom: 66px; }
  .wsm-sticky { inset: auto 0 0; border-top: 2px solid var(--labs-ink); border-bottom: 0; transform: translateY(100%); }
  .wsm-sticky-status, .wsm-sticky-link { display: none; }
  .wsm-sticky-inner { justify-content: space-between; min-height: 64px; }
  .wsm-sticky-name { font-size: 17px; }
  .wsm .wsm-sticky .wsm-cta-sm { padding: 0 14px; font-size: 14px; }
}
@media (max-width: 560px) {
  .wsm-wrap { padding-inline: 20px; }
  .wsm-h2 { font-size: 34px; }
  .wsm-deck { font-size: 17.5px; }
  .wsm-hero .wsm-cta { width: 100%; }
  .wsm .wsm-phone { margin-inline: -4px; width: calc(100% + 8px); max-width: 398px; }
  .wsm-player { margin-inline: -4px; width: calc(100% + 8px); max-width: 398px; }
  .wsm-table thead { display: none; }
  .wsm-table, .wsm-table tbody { display: block; }
  .wsm-table tr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; padding: 14px 0; border-bottom: 1px solid var(--labs-line); }
  .wsm-table tbody th { grid-column: 1 / -1; width: auto; padding: 0; border: 0; font-size: 18px; }
  .wsm-table td, .wsm-table td:last-child { width: auto; padding: 8px 10px; border: 0; font-size: 14.5px; }
  .wsm-table td::before { content: attr(data-label); display: block; margin-bottom: 3px; font: 600 10px/1.3 var(--labs-font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--labs-muted); }
}
@media (prefers-reduced-motion: reduce) {
  .wsm-sticky { transition: none; }
  [data-wsm-replay].is-playing .wsm-tabs button[aria-selected="true"] .wsm-bar { animation: none; }
}