/* Dope sheet styles. Scoped to .dope-sheet container so they don't leak into other pages. Loaded only by the dope_sheet.php template (referenced via in its ) — keeps style.css from carrying single-page rules. Was previously inline in the template; extracted to a per-page CSS file so it's cacheable separately and so the template HTML reads cleaner. */ .dope-sheet { max-width: 1100px; margin: 0 auto; } /* Print-only watermark — hidden on screen. The print stylesheet (further down) flips this to display:block and absolutely positions it in the top-right of the first printed page. */ .dope-sheet .dope-print-watermark { display: none; } .dope-sheet h2 { margin-bottom: 4px; } .dope-sheet .dope-meta { color: var(--color-text-muted); font-size: 0.88rem; margin-bottom: 24px; } /* Pre-game head-to-head weather report block. Sits between the hero and franchise pair. Wrapper just provides bottom margin matching the rest of the dope-sheet rhythm — the labWidgetCard inside carries its own border/padding/shadow chrome. */ .dope-sheet .dope-h2h-weather { margin-bottom: 24px; } .dope-sheet .dope-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; } .dope-sheet .dope-block { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow); } .dope-sheet .dope-block-header { margin-bottom: 12px; } .dope-sheet .dope-block-header h3 { margin: 0 0 2px 0; font-size: 1.1rem; } .dope-sheet .dope-block-header .dope-block-sub { font-size: 0.78rem; color: var(--color-text-muted); } .dope-sheet .dope-block-header .dope-block-sub a { color: var(--color-text-muted); text-decoration: underline; } .dope-sheet .dope-mini-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } .dope-sheet .dope-mini-stat { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 4px; padding: 10px 12px; text-align: center; } .dope-sheet .dope-mini-stat .num { display: block; font-size: 1.4rem; font-weight: 700; color: var(--color-accent); line-height: 1.1; } .dope-sheet .dope-mini-stat .lbl { display: block; font-size: 0.7rem; color: var(--color-text-muted); margin-top: 3px; text-transform: uppercase; letter-spacing: 0.3px; } /* Last-doink callouts beneath each franchise's mini-stats. Mirrors the franchise page's callout pair but compacted for the dope sheet's narrower 2-column layout. Side-by-side on desktop, stacks on mobile via the existing 720px media query. */ .dope-sheet .dope-last-doinks { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--color-border); border: 1px solid var(--color-border); border-radius: 4px; overflow: hidden; margin-top: 12px; } .dope-sheet .dope-last-doink { background: var(--color-surface); padding: 10px 12px; } .dope-sheet .dope-last-doink .ld-label { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.3px; color: var(--color-text-muted); font-weight: 600; margin-bottom: 4px; } .dope-sheet .dope-last-doink .ld-game { font-size: 0.78rem; font-weight: 600; color: var(--color-text); } .dope-sheet .dope-last-doink .ld-game a { color: inherit; text-decoration: none; } .dope-sheet .dope-last-doink .ld-detail { font-size: 0.72rem; color: var(--color-text-muted); margin-top: 2px; } .dope-sheet .dope-last-doink .ld-detail a { color: var(--color-accent); } /* Kicker name on its own line, play info wraps to the next line. Forces a deterministic two-line layout instead of letting natural wrap decide where the break lands — predictable for print page-fit math and reads more cleanly on screen too. */ .dope-sheet .dope-last-doink .ld-kicker { display: block; font-weight: 600; } .dope-sheet .dope-last-doink .ld-play { display: block; margin-top: 1px; } .dope-sheet .dope-last-doink .ld-date { font-size: 0.68rem; color: var(--color-text-muted); margin-top: 3px; } .dope-sheet .dope-last-doink .ld-empty { font-size: 0.74rem; color: var(--color-text-muted); font-style: italic; } .dope-sheet .dope-context { text-align: center; font-size: 0.95rem; margin-bottom: 24px; padding: 14px 18px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); } .dope-sheet .dope-context .dope-game-line { font-size: 1.1rem; font-weight: 600; margin-bottom: 4px; } /* Scorebug for verified games. Score is the primary data: full color, larger, tabular numerals so digits align cleanly. Abbreviations and "@" sit between, smaller and quieter, as anchor labels rather than competing for attention. inline-flex keeps the parts on one baseline and lets us gap them consistently. */ .dope-sheet .dope-context .dope-scorebug { display: inline-flex; align-items: baseline; gap: 10px; } .dope-sheet .dope-context .dope-scorebug .ds-score { font-size: 1.5rem; font-weight: 700; color: var(--color-text); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } .dope-sheet .dope-context .dope-scorebug .ds-abbr { font-size: 1rem; font-weight: 600; color: var(--color-text); letter-spacing: 0.02em; } .dope-sheet .dope-context .dope-scorebug .ds-at { font-size: 0.9rem; font-weight: 400; color: var(--color-text-muted); } .dope-sheet .dope-context .dope-stadium-line { font-size: 0.85rem; color: var(--color-text-muted); } .dope-sheet .dope-context .dope-stadium-line a { color: var(--color-text); font-weight: 600; } .dope-sheet .dope-stadium-block { margin-bottom: 24px; } .dope-sheet .dope-stadium-block .dope-mini-stats { grid-template-columns: repeat(4, 1fr); } /* Widget row above kickers (H2H + Rivalry) is rendered via the {{widget-row: ...}} shortcode infrastructure — the parser brings its own .embedded-widget-row grid styling and mobile stacking (handled in style.css). We just need a wrapper margin so the row doesn't crowd the kicker pair below it. */ .dope-sheet .dope-widget-row-wrap { margin-bottom: 24px; } .dope-sheet .dope-kicker-block .stat-card { padding: 14px 12px; } .dope-sheet .dope-kicker-block .stat-number { font-size: 1.5rem; } .dope-sheet .dope-kicker-block .stat-label { font-size: 0.72rem; } .dope-sheet .dope-kicker-block .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 12px; } .dope-sheet .dope-clock-wrap { margin-top: 12px; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 4px; padding: 8px; } /* The clock widget renders inside a labWidgetCard which has its own header and styles; suppress the outer card chrome when embedded. */ .dope-sheet .dope-clock-wrap .lab-widget-card { box-shadow: none; border: none; padding: 0; background: transparent; } .dope-sheet .dope-clock-wrap .lab-widget-export-btn { display: none !IMPORTANT; } .dope-sheet .dope-actions { display: flex; gap: 12px; justify-content: center; margin-top: 24px; } .dope-sheet .dope-actions button, .dope-sheet .dope-actions a { background: transparent; border: 1px solid var(--color-border); color: var(--color-text-muted); padding: 6px 14px; font-size: 0.82rem; border-radius: 4px; text-decoration: none; cursor: pointer; } .dope-sheet .dope-actions button:hover, .dope-sheet .dope-actions a:hover { color: var(--color-text); border-color: var(--color-text-muted); } .dope-sheet .dope-warning { font-size: 0.78rem; color: #a84518; font-style: italic; margin-bottom: 8px; } /* Mode toggle: switches between snapshot ("as of game date") and live (today's stats) views. Renders as a pill-style segmented control above the franchise blocks so users see which mode the page is in immediately. The toggle itself is just two anchor links with different ?live= values — no JS, fully URL-shareable, works with the back button. */ .dope-sheet .dope-mode-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; } .dope-sheet .dope-mode-toggle { display: inline-flex; border: 1px solid var(--color-border); border-radius: 999px; overflow: hidden; background: var(--color-bg); } .dope-sheet .dope-mode-toggle a { padding: 6px 14px; font-size: 0.78rem; color: var(--color-text-muted); text-decoration: none; border-right: 1px solid var(--color-border); } .dope-sheet .dope-mode-toggle a:last-child { border-right: none; } .dope-sheet .dope-mode-toggle a.active { background: var(--color-accent); color: white; font-weight: 600; } .dope-sheet .dope-mode-help { font-size: 0.74rem; color: var(--color-text-muted); font-style: italic; } /* Verified-game checkmark: shown next to the matchup line when the (away, home, date) tuple resolves to an actual recorded game. The circle keeps the visual weight of the ✓ in check — bare unicode checks bleed too much "submitted/saved/done" connotation. */ .dope-sheet .dope-verified { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 1px 8px 1px 6px; background: rgba(64, 153, 92, 0.12); color: #2d7a47; border-radius: 999px; font-size: 0.7rem; font-weight: 600; vertical-align: middle; } .dope-sheet .dope-verified::before { content: "✓"; font-weight: 700; } /* When the verified pill is a clickable link back to the game (the common case — most games have slugs), give it the affordance of a link without losing the pill shape. text-decoration off keeps the pill clean; hover deepens the green to signal interactivity. */ .dope-sheet a.dope-verified-link { text-decoration: none; } .dope-sheet a.dope-verified-link:hover { background: rgba(64, 153, 92, 0.22); color: #1d5c34; } /* Save-as-PDF helper text shown next to the Print button. Tiny prompt that helps less-technical users — the print dialog has a "Save as PDF" destination, but they have to know to look. */ .dope-sheet .dope-print-help { font-size: 0.7rem; color: var(--color-text-muted); font-style: italic; margin-top: 8px; text-align: center; } /* Generator form */ .dope-form { max-width: 640px; margin: 0 auto; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 24px 28px; box-shadow: var(--shadow); } .dope-form .form-row { margin-bottom: 14px; } .dope-form .form-row-double { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .dope-form label { display: block; font-size: 0.78rem; color: var(--color-text-muted); font-weight: 600; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.3px; } .dope-form select, .dope-form input[type="date"] { width: 100%; padding: 8px 10px; border: 1px solid var(--color-border); border-radius: 4px; font-size: 0.92rem; background: var(--color-bg); color: var(--color-text); } .dope-form .form-submit-row { margin-top: 20px; text-align: center; } .dope-form .form-submit-row button { background: var(--color-accent); color: white; border: none; padding: 10px 24px; border-radius: 4px; font-size: 0.95rem; font-weight: 600; cursor: pointer; } .dope-form .form-submit-row button:hover { opacity: 0.9; } .dope-form .form-help { font-size: 0.78rem; color: var(--color-text-muted); margin-bottom: 16px; font-style: italic; } /* Mobile breakpoint — scoped to screen only. The print viewport on US Letter / A4 with 0.5in margins computes right at or below 720px, which without this scoping would cause the print layout to inherit the mobile single-column stacking. Forcing screen-only keeps print on the desktop multi-column layout, which is what the print stylesheet below is designed around. */ @media screen and (max-width: 720px) { .dope-sheet .dope-pair { grid-template-columns: 1fr; } .dope-sheet .dope-stadium-block .dope-mini-stats { grid-template-columns: repeat(2, 1fr); } .dope-sheet .dope-last-doinks { grid-template-columns: 1fr; } .dope-form .form-row-double { grid-template-columns: 1fr; } } /* ============== PRINT STYLES ============== Designed for users hitting Cmd/Ctrl+P → "Save as PDF" or paper. Goals: - Each major block stays together (no awkward mid-block breaks) - Site chrome (header, footer, action buttons) hidden — paper shouldn't waste space on navigation - Color accents preserved (browsers default to stripping them) - Single-column layout — paper is narrower than typical screens and 2-column layouts produce tiny unreadable text - SVG widgets (clock, rivalry, h2h) cap at reasonable widths Realistic output: 2 pages of US letter / A4 with all sections populated; 1 page if a kicker is missing or stadium is omitted. */ @media print { /* Color preservation — browsers strip backgrounds by default to save ink. Force them to print as-shown so brand orange/blue accents survive. -webkit- prefix for Chromium-family. */ * { -webkit-print-color-adjust: exact !IMPORTANT; print-color-adjust: exact !IMPORTANT; } /* Hide site chrome and dope sheet actions. The dope sheet IS the printable; nav and share buttons have no value on paper. Also hide the mode toggle and print-help — the printed output captures whichever mode was active when the user printed. Hero "Dope Sheet" title + matchup meta line are also hidden: the title is implied by the layout, and the matchup info (teams, date, verified state) repeats in the game context block further down where it has more context anyway. */ header, footer, .public-header, .public-footer, .dope-sheet h2, .dope-sheet .dope-meta, .dope-sheet .dope-actions, .dope-sheet .dope-warning, .dope-sheet .dope-mode-row, .dope-sheet .dope-print-help, /* Lab widget export buttons (download icon) on embedded H2H/rivalry */ .lab-widget-export-btn, .embedded-widget-row-export { display: none !IMPORTANT; } /* Page setup. 0.5in margins is the sweet spot for letter+A4 without overflow risk. */ @page { margin: 0.5in; } body { background: white; color: black; font-size: 10pt; } main.public-main { /* Top padding gives the print-only watermark logo (top-right corner of page 1) some clear airspace above the first content block. Other padding stays zeroed so the dope-sheet container fills the printable area edge-to-edge. */ padding: 0.5in 0 0 0 !IMPORTANT; margin: 0 !IMPORTANT; } .dope-sheet { max-width: 100%; margin: 0; } .dope-sheet .dope-pair > *, .dope-sheet .dope-last-doinks > * { margin-bottom: 8pt; } /* Last-doink cards — high-doink matchups (Eagles 70 / Bucs 65) push the kicker-detail line to wrap because "Chase McLaughlin · FG 38yd · No Good" doesn't fit at print width. Wrap adds height that cascades into a second-page overflow on the stadium block. The template puts the kicker name in its own .ld-kicker block and the play info in .ld-play below it — deterministic 2-line layout. Print just needs to size things tight enough that the date line on the next row doesn't itself wrap. */ .dope-sheet .dope-last-doink .ld-detail { font-size: 8pt !IMPORTANT; } .dope-sheet .dope-last-doink .ld-date { font-size: 6pt !IMPORTANT; } /* Margin override: .dope-last-doinks > * was adding 8pt below each grid cell, which is dead vertical space (the grid's own gap already separates the two halves visually). Zero it out for the last-doinks specifically — the .dope-pair sibling above still gets 8pt because its layout uses block flow not grid. */ .dope-sheet .dope-last-doinks > * { margin-bottom: 0 !IMPORTANT; } /* Page break protection — every major block stays together. page-break-inside: avoid is the legacy property; break-inside is the modern equivalent. Both for max browser support. Note: target both .lab-widget AND .lab-widget-card — the former is what labWidgetCard() actually emits; the latter shows up in some places (rendering paths or future renames). Using both covers everything without needing to track down the function naming inconsistency. */ .dope-sheet .dope-block, .dope-sheet .dope-context, .dope-sheet .dope-stadium-block, .dope-sheet .dope-kicker-block, .dope-sheet .dope-widget-row-wrap, .dope-sheet .dope-last-doinks, .dope-sheet .dope-clock-wrap, .dope-sheet .embedded-widget-row-cell, .dope-sheet .lab-widget, .lab-widget-card { page-break-inside: avoid; break-inside: avoid; } /* Allow page break BETWEEN major sections (encouraged, not forced). page-break-before: auto is the default; making it explicit documents the intent. Note: we previously forced a break before .dope-widget-row-wrap to recreate the original "good" layout, but with the watermark padding eating into page 1's vertical budget, that forced break caused content fragmentation (stadium block orphaned to its own page). Letting the engine flow naturally now produces a cleaner 2-page result: page 1 holds matchup context, page 2 picks up wherever it overflowed and continues to the kicker deep-dive. */ .dope-sheet .dope-pair, .dope-sheet .dope-stadium-block, .dope-sheet .dope-widget-row-wrap { page-break-before: auto; break-before: auto; } /* Print-only watermark logo. Anchored to the top-right of the first printed page. Becomes visible (was display:none on screen). Sits above the content visually but doesn't push layout — the hidden hero h2 + meta would have been here, so the corner is empty real estate. Width set in inches matches the @page 0.5in margin sensibility: ~1.4in wide watermark, scales by aspect ratio (~1.876:1 from the SVG viewBox 3100x1653) so height is ~0.75in. */ .dope-sheet .dope-print-watermark { display: block; position: absolute; /* Negative top pulls the watermark UP out of main.public-main's top padding and into the @page top margin zone. */ top: -0.5in; right: 0; width: 0.9in; height: auto; opacity: 1; pointer-events: none; } /* Make the dope-sheet container the positioning context for the absolutely-positioned watermark. Without this, the watermark would anchor to the nearest positioned ancestor (probably the viewport), which is unpredictable in print. */ .dope-sheet { position: relative; } .dope-sheet .dope-context, .dope-sheet .dope-meta, .dope-sheet .dope-pair, .dope-sheet .dope-stadium-block, .dope-sheet .dope-h2h-weather { margin-bottom: 6px; margin-top: 6px; } .dope-sheet .dope-pair { margin-bottom: -10px !IMPORTANT; } .dope-kicker-pair { margin-top: -10px !IMPORTANT; } .stat-card { padding:1px !IMPORTANT; } .embedded-widget-row-title, .lab-export-btn { display: none !IMPORTANT; } .dope-widget-row-wrap { margin-bottom: 0px !IMPORTANT; } .dope-block-sub > a { visibility: hidden; display:none; } /* Suppress block shadows and tighten borders for paper — the shadow-on-card aesthetic doesn't translate to print and just looks like a smudge. */ .dope-sheet .dope-block, .dope-sheet .dope-context, .dope-sheet .lab-widget, .lab-widget-card { box-shadow: none !IMPORTANT; border: 1px solid #ccc !IMPORTANT; } /* SVG widgets need a width cap — without it Chrome's print engine can blow them up to full page width. */ .dope-sheet svg { max-width: 100% !IMPORTANT; height: auto !IMPORTANT; } /* Doink clock specifically — it's the largest SVG and benefits from a max-height cap so it doesn't dominate the kicker block. */ .dope-sheet .dope-clock-wrap svg { max-height: 1.5in; } /* Rivalry Timeline doink list — narrow-column print layout. The widget shares an H2H row with the kicker H2H comparison (span 2 vs span 1), so on a US-letter page with 0.5in margins each column is roughly 2.25in wide. The screen-default 0.8rem font wraps "Mason Crosby"-length names in that footprint. Shrinking font + forcing nowrap on each row segment fits a typical row (● WAS Mason Crosby FG 38yd 2007) in one line. The kicker name gets the only flex-shrink so unusually long names truncate gracefully instead of pushing the year off the row. */ .dope-sheet .rivalry-doink-row { font-size: 7.5pt !IMPORTANT; gap: 4px !IMPORTANT; padding: 1px 0 !IMPORTANT; line-height: 1.2 !IMPORTANT; } .dope-sheet .rivalry-doink-row > span { white-space: nowrap; } .dope-sheet .rivalry-doink-name { overflow: hidden; text-overflow: ellipsis; min-width: 0; flex-shrink: 1; } /* Suppress the rivalry widget's subtitle in print. The dope sheet's own matchup header already names both teams + the date, and the segmented bar inside the widget restates the per-franchise count — the subtitle ("Commanders vs Packers · 8 doinks") becomes redundant noise that costs ~12pt of vertical space. Scoped via data-widget="rivalry" so other widgets keep their subtitles. */ .dope-sheet .lab-widget[data-widget="rivalry"] .lab-widget-subtitle { display: none !IMPORTANT; } }