/* Epic 0068 — the schedule print page (layouts/print). EVERY rule here is scoped under .sp (the print page's ), including the ones inside @media print, and there is no @page: this file sits in app/assets, so `stylesheet_link_tag :app` also serves it on every HQ, Go and public page. Unscoped, a rule here would restyle — or reprint — pages that never asked for it. @page lives inline in the print layout instead (R7, D36). test/assets/schedule_print_css_scope_test.rb enforces both. Sizes are real-world: 1in = 96px. Type, icons and the ref line scale with --f, the score boxes with --bf; both are set per table from its court count (§4.2, D17). */ .sp { --t: 1; /* Text size (D40): names only; the layout sets it per print */ margin: 0; background: #e5e7eb; color: #111; color-scheme: light; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; -webkit-text-size-adjust: 100%; } .sp *, .sp *::before, .sp *::after { box-sizing: border-box; } /* ── screen-only toolbar ─────────────────────────────────────── */ .sp .sp-toolbar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: #111827; color: #fff; font-size: 13px; } .sp .sp-toolbar__print { font: inherit; font-weight: 700; padding: 6px 16px; border-radius: 6px; border: 0; background: #2563EB; color: #fff; cursor: pointer; } .sp .sp-toolbar__meta { color: #d1d5db; } .sp .sp-empty { margin: 48px auto; max-width: 520px; text-align: center; color: #374151; font-size: 15px; } /* ── a sheet, drawn as a page on screen ──────────────────────── */ .sp .sp-sheet { position: relative; width: 11in; min-height: 8.5in; margin: 24px auto; padding: 0.4in; background: #fff; box-shadow: 0 6px 24px rgba(17, 24, 39, 0.14); } .sp.sp--portrait .sp-sheet { width: 8.5in; min-height: 11in; } /* Every page box — a sheet, or a continuation schedule_print_page_controller split off it — is one sheet of paper, so the preview is the print. */ .sp.sp--preview .sp-sheet { margin: 24px auto; } /* ── heading ─────────────────────────────────────────────────── */ .sp .sp-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; border-bottom: 2px solid #111; padding-bottom: 4px; margin-bottom: 6px; } .sp .sp-head__title { font-size: 19px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.2; } .sp .sp-badge { display: inline-block; border: 2px solid #111; border-radius: 4px; font-size: 11px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; padding: 0 6px; margin-right: 7px; vertical-align: 3px; } .sp .sp-head__suffix { font-size: 12px; font-weight: 700; color: #444; letter-spacing: 0; margin-left: 4px; white-space: nowrap; } .sp .sp-head__right { display: flex; align-items: flex-end; gap: 12px; } .sp .sp-head__meta { font-size: 11.5px; color: #222; text-align: right; white-space: nowrap; line-height: 1.35; } .sp .sp-link { display: flex; align-items: center; gap: 7px; border-left: 1.5px solid #111; padding-left: 10px; } .sp .sp-qr { display: block; flex: none; } .sp .sp-link__text { font-size: 10.5px; line-height: 1.3; } .sp .sp-link__text strong { display: block; font-size: 11px; } .sp .sp-link__url { color: #333; overflow-wrap: anywhere; } .sp .sp-pool-note { font-size: 11px; line-height: 1.4; color: #222; border-left: 3px solid #111; padding: 2px 8px; margin-bottom: 6px; } /* ── the grid ────────────────────────────────────────────────── */ .sp .sp-grid { --f: 1; --bf: 1; width: 100%; border-collapse: collapse; table-layout: fixed; } .sp .sp-grid th { font-size: calc(14px * var(--f)); font-weight: 800; letter-spacing: 0.01em; line-height: 1.2; padding: 6px 5px; border: 1.5px solid #111; text-align: center; overflow-wrap: break-word; } .sp .sp-grid th.sp-grid__time { width: 0.9in; font-size: calc(11px * var(--f)); text-transform: uppercase; letter-spacing: 0.06em; } /* Roomy rows: air above and below each card, so slots read as separate blocks of writing space (D23). */ .sp .sp-grid td { border: 1.5px solid #111; padding: calc(8px * var(--f)) 5px; vertical-align: middle; } .sp .sp-grid td.sp-grid__time { font-size: calc(15px * var(--f)); font-weight: 800; text-align: center; line-height: 1.15; } .sp .sp-cell__split { border-top: 1px dashed #777; margin: 6px 0 5px; } /* ── a card ──────────────────────────────────────────────────── */ /* minmax(0, 1fr) + overflow-wrap is what keeps a long name out of the score boxes: without it the name column won't shrink below its longest word. */ .sp .sp-card__teams { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: calc(7px * var(--f)); } /* break-word, never anywhere: a name wraps between words and splits a word only when that one word can't fit. `anywhere` shreds "Ball Busters". */ .sp .sp-side { display: flex; align-items: center; gap: calc(6px * var(--f)); min-width: 0; font-size: calc(18px * var(--f) * var(--t)); font-weight: 800; line-height: 1.12; overflow-wrap: break-word; } .sp .sp-side--a { justify-content: flex-end; text-align: right; } /* A flex item won't shrink below its longest word unless told to, and then break-word never gets its chance: "Millennial" would spill into the next court. min-width: 0 lets the name wrap, and split a word only when that word alone is wider than the space left beside the icon. */ .sp .sp-name { min-width: 0; } /* D39 — a table whose names don't fit beside their icons (measured by schedule_print_page_controller: long words, capitals, narrow columns, highlight padding) gets sp-grid--stacked: the icon moves above the name, on both sides, and the name takes the side's full width. */ .sp .sp-grid--stacked .sp-side { flex-direction: column; gap: calc(3px * var(--f)); } .sp .sp-grid--stacked .sp-side--a { align-items: flex-end; } .sp .sp-grid--stacked .sp-side--b { align-items: flex-start; } .sp .sp-grid--stacked .sp-side > .team-icon-print { order: -1; } .sp .sp-grid--stacked .sp-side > .sp-name, .sp .sp-grid--stacked .sp-side > .sp-tbd { max-width: 100%; } .sp .sp-scores { display: flex; align-items: center; gap: calc(5px * var(--bf)); } .sp .sp-box { display: flex; align-items: center; justify-content: center; flex: none; width: calc(58px * var(--bf)); height: calc(43px * var(--bf)); border: 2.5px solid #111; border-radius: 4px; font-size: calc(24px * var(--bf)); font-weight: 800; } .sp .sp-dash { font-weight: 800; font-size: calc(16px * var(--bf)); } .sp .sp-card__label { font-size: calc(10px * var(--f)); font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: #333; margin-bottom: 3px; } /* A game's own note, in the pool note's voice: small, quiet, above the card. */ .sp .sp-card__note { font-size: calc(11px * var(--f)); line-height: 1.3; color: #222; margin-bottom: calc(5px * var(--f)); } .sp .sp-tbd { display: inline-flex; flex-direction: column; min-width: 3.5em; } .sp .sp-name--tbd { color: #444; } .sp .sp-writein { border-bottom: 2px solid #111; height: 14px; margin-top: 3px; } /* the ref line, centred under the teams (D26) */ .sp .sp-ref { display: flex; align-items: center; justify-content: center; gap: calc(7px * var(--f)); margin-top: calc(7px * var(--f)); min-width: 0; font-size: calc(16px * var(--f) * var(--t)); font-weight: 700; line-height: 1.1; overflow-wrap: break-word; } .sp .sp-ref__label { display: inline-block; flex: none; padding: 1px 7px; border-radius: 3px; background: #111; color: #fff; font-size: calc(11px * var(--f)); font-weight: 800; letter-spacing: 0.1em; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .sp .sp-ref__blank { flex: 1; max-width: 200px; height: 15px; border-bottom: 2px solid #111; } /* team icons: about half an inch (D26); the ref's smaller */ .sp .team-icon-print { display: inline-flex; align-items: center; justify-content: center; flex: none; width: calc(44px * var(--f)); height: calc(44px * var(--f)); border-radius: 50%; object-fit: cover; color: #fff; font-weight: 800; font-size: calc(19px * var(--f)); line-height: 1; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .sp .sp-ref .team-icon-print { width: calc(30px * var(--f)); height: calc(30px * var(--f)); font-size: calc(13px * var(--f)); } /* Name highlighting (D24): colours come from an inline style per name; this is the box. box-decoration-break keeps it on a wrapped second line, and the fill must be forced or browsers drop it when printing. */ .sp .sp-name--hl { padding: 1px calc(6px * var(--f)); border-radius: 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; -webkit-print-color-adjust: exact; print-color-adjust: exact; } /* ── paper ───────────────────────────────────────────────────── */ @media print { .sp { background: #fff; } .sp .sp-toolbar { display: none; } /* .sp.sp--preview is listed so this outranks the preview's centring margin: the modal prints the preview frame itself, and a 24px margin left on every page pushed rows past where the preview had broken them. */ .sp .sp-sheet, .sp.sp--preview .sp-sheet { width: auto; min-height: 0; margin: 0; padding: 0; box-shadow: none; break-after: page; } .sp .sp-sheet:last-of-type { break-after: auto; } /* The page controller has already split sheets at row boundaries; these are the browser's own fallbacks if a page box still overflows. */ .sp .sp-grid thead { display: table-header-group; } .sp .sp-grid tr { break-inside: avoid; } }