/* ============================================================= PROPTICS · shared design tokens & primitives Light is default; [data-theme="dark"] overrides on . ============================================================= */ @import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&display=swap'); :root { /* light theme (default) */ --bg: #F7F7F4; --bg-elev: #FFFFFF; --bg-soft: #F0EFEA; --ink: #0A0E1A; --ink-2: #1A1F2E; --dim: #555B6E; --faint: #8A8F9C; --line: rgba(10,14,26,0.10); --line-2: rgba(10,14,26,0.16); --hairline: rgba(10,14,26,0.06); --blue: #2540E8; --blue-soft: #E5E9FE; --cyan: #06B6D4; --cyan-soft: #E0F7FB; --green: #16A34A; --green-soft:#DCFCE7; --red: #DC2626; --red-soft: #FEE2E2; --amber: #D97706; --amber-soft:#FEF3C7; --over: #2540E8; --under: #DC2626; --grade-aplus-bg: #1F36C2; --grade-aplus-fg: #FFFFFF; --grade-a-bg: #2540E8; --grade-a-fg: #FFFFFF; --grade-b-bg: #06B6D4; --grade-b-fg: #062D33; --grade-c-bg: #94A3B8; --grade-c-fg: #0A0E1A; --grade-d-bg: #E2E8F0; --grade-d-fg: #475569; --heat-good-bg: rgba(22,163,74,0.18); --heat-good-fg: #15803D; --heat-bad-bg: rgba(220,38,38,0.16); --heat-bad-fg: #B91C1C; --shadow-sm: 0 1px 2px rgba(10,14,26,0.04), 0 0 0 1px rgba(10,14,26,0.04); --shadow-md: 0 1px 3px rgba(10,14,26,0.06), 0 4px 16px rgba(10,14,26,0.04); --serif-i: 'DM Serif Display', Georgia, serif; --sans: 'Inter', system-ui, -apple-system, sans-serif; --mono: 'JetBrains Mono', ui-monospace, monospace; } [data-theme="dark"] { --bg: #0A0E1A; --bg-elev: #131826; --bg-soft: #0E1320; --ink: #F4F6FF; --ink-2: #E6E9F5; --dim: rgba(244,246,255,0.62); --faint: rgba(244,246,255,0.40); --line: rgba(255,255,255,0.10); --line-2: rgba(255,255,255,0.16); --hairline: rgba(255,255,255,0.06); --blue: #6178FF; --blue-soft: rgba(97,120,255,0.18); --cyan: #38BDF8; --cyan-soft: rgba(56,189,248,0.18); --green: #22C55E; --green-soft:rgba(34,197,94,0.18); --red: #F43F5E; --red-soft: rgba(244,63,94,0.18); --amber: #F59E0B; --amber-soft:rgba(245,158,11,0.18); --over: #6178FF; --under: #F43F5E; --grade-aplus-bg: #6178FF; --grade-aplus-fg: #060A18; --grade-a-bg: #4B5BE8; --grade-a-fg: #FFFFFF; --grade-b-bg: #38BDF8; --grade-b-fg: #062D33; --grade-c-bg: #475569; --grade-c-fg: #F4F6FF; --grade-d-bg: #1F2937; --grade-d-fg: #94A3B8; --heat-good-bg: rgba(34,197,94,0.20); --heat-good-fg: #86EFAC; --heat-bad-bg: rgba(244,63,94,0.20); --heat-bad-fg: #FDA4AF; --shadow-sm: 0 1px 2px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.04); --shadow-md: 0 1px 3px rgba(0,0,0,0.4), 0 4px 16px rgba(0,0,0,0.3); } * { box-sizing: border-box; } html, body { margin:0; padding:0; } body { background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Mobile body bump: 14px is below the comfortable reading threshold on phones. 15px keeps proportions but reads cleanly on a handset. */ @media (max-width: 640px) { body { font-size: 15px; } } img { max-width: 100%; display: block; } button { font-family: inherit; } a { color: inherit; text-decoration: none; } .mono { font-family: var(--mono); font-feature-settings: 'tnum'; } .serif-i { font-family: var(--serif-i); font-style: italic; font-weight: 400; } /* ── header ─────────────────────────────────────────────── */ .pt-header { background: var(--bg-elev); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; } .pt-header-row { display: flex; align-items: center; gap: 18px; padding: 14px 28px; } .pt-logo { font-family: var(--sans); font-weight: 900; font-size: 22px; letter-spacing: -0.04em; color: var(--ink); font-style: italic; } .pt-sportpills { display: flex; gap: 4px; padding: 3px; background: var(--bg-soft); border-radius: 6px; } .pt-sportpill { padding: 5px 12px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; color: var(--dim); background: transparent; border: none; cursor: pointer; border-radius: 4px; font-family: var(--sans); } .pt-sportpill.active { background: var(--blue); color: #fff; } .pt-header-spacer { flex: 1; } .pt-header-tools { display: flex; align-items: center; gap: 10px; color: var(--dim); } .pt-icon-btn { width:32px; height:32px; border-radius:6px; background:transparent; border:none; color:var(--dim); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; } .pt-icon-btn:hover { background:var(--bg-soft); color:var(--ink); } .pt-clock { font-family: var(--mono); font-size: 11px; color: var(--dim); padding: 0 6px; } .pt-avatar { width:30px; height:30px; border-radius:50%; background: var(--blue); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:12px; } .pt-nav { display: flex; gap: 0; padding: 0 28px; border-top: 1px solid var(--hairline); } .pt-nav a { display: inline-flex; align-items: center; gap: 7px; padding: 12px 18px; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; } .pt-nav a:hover { color: var(--ink); } .pt-nav a.active { color: var(--ink); border-bottom-color: var(--ink); } .pt-nav a svg { width: 13px; height: 13px; opacity: 0.7; } .pt-nav a.active svg { opacity: 1; } /* ── page header (the section start of each page) ───────── */ .pt-pagehead { padding: 36px 32px 28px; } .pt-crumb { font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--blue); } .pt-h1 { font-family: var(--sans); font-style: italic; font-weight: 900; font-size: 44px; letter-spacing: -0.04em; line-height: 1; margin: 8px 0 0; color: var(--ink); } .pt-h1 .accent { color: var(--blue); font-style: normal; } .pt-pagehead-sub { font-family: var(--mono); font-size: 11px; color: var(--faint); letter-spacing: 0.14em; text-transform: uppercase; margin-top: 10px; } .pt-pagehead-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; } /* ── filter / control row ───────────────────────────────── */ .pt-controls { padding: 14px 32px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: var(--bg-elev); } .pt-pill-group { display: inline-flex; padding: 2px; background: var(--bg-soft); border-radius: 6px; gap: 2px; } .pt-pill { padding: 6px 14px; font-size: 12px; font-weight: 600; color: var(--dim); background: transparent; border: none; border-radius: 4px; cursor: pointer; font-family: var(--sans); white-space: nowrap; } .pt-pill.active { background: var(--ink); color: var(--bg); } .pt-chip { padding: 6px 12px; font-size: 12px; font-weight: 500; color: var(--dim); background: var(--bg-elev); border: 1px solid var(--line); border-radius: 999px; cursor: pointer; font-family: var(--sans); white-space: nowrap; } .pt-chip:hover { border-color: var(--line-2); color: var(--ink); } .pt-chip.active { background: var(--ink); color: var(--bg); border-color: var(--ink); } .pt-chip-count { color: var(--faint); margin-left: 4px; font-family: var(--mono); font-size: 11px; } .pt-chip.active .pt-chip-count { color: rgba(255,255,255,0.7); } /* ── data table ─────────────────────────────────────────── */ .pt-table { width: 100%; border-collapse: collapse; font-size: 13px; } .pt-table thead th { text-align: left; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); font-weight: 500; padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--bg-elev); position: sticky; top: 0; } .pt-table thead th.center { text-align: center; } .pt-table thead th.right { text-align: right; } .pt-table tbody td { padding: 10px 12px; border-bottom: 1px solid var(--hairline); vertical-align: middle; } .pt-table tbody td.center { text-align: center; } .pt-table tbody td.right { text-align: right; font-family: var(--mono); font-feature-settings: 'tnum'; } .pt-table tbody tr:hover td { background: var(--bg-soft); } .pt-table tbody tr.mlb-avg td { background: var(--blue-soft); color: var(--blue); font-family: var(--mono); font-size: 11px; } .pt-table tbody tr.mlb-avg td:first-child { font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } /* ── grade pill (A+, A, B, C, D, F) ──────────────────────── */ .pt-grade { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; padding: 2px 8px; border-radius: 4px; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.02em; } .pt-grade.aplus { background: var(--grade-aplus-bg); color: var(--grade-aplus-fg); } .pt-grade.a { background: var(--grade-a-bg); color: var(--grade-a-fg); } .pt-grade.b { background: var(--grade-b-bg); color: var(--grade-b-fg); } .pt-grade.c { background: var(--grade-c-bg); color: var(--grade-c-fg); } .pt-grade.d { background: var(--grade-d-bg); color: var(--grade-d-fg); } /* ── pick arrow (▲ over / ▼ under) ──────────────────────── */ .pt-pick { font-family: var(--mono); font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; } .pt-pick.over { color: var(--over); } .pt-pick.under { color: var(--under); } /* ── edge bar (inline horizontal bar in cell) ──────────── */ .pt-edge { display: inline-flex; align-items: center; gap: 8px; min-width: 80px; } .pt-edge-bar { flex: 1; height: 8px; background: var(--bg-soft); border-radius: 1px; position: relative; overflow: hidden; } .pt-edge-bar > i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--green); border-radius: 1px; } .pt-edge-bar.bad > i { background: var(--red); } .pt-edge-val { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--ink); min-width: 32px; text-align: right; } .pt-edge-val.bad { color: var(--red); } /* ── heat cell (used inside tables) ─────────────────────── */ .pt-heat { padding: 3px 6px; border-radius: 3px; font-family: var(--mono); font-feature-settings: 'tnum'; display: inline-block; min-width: 36px; text-align: center; } .pt-heat.good { background: var(--heat-good-bg); color: var(--heat-good-fg); } .pt-heat.bad { background: var(--heat-bad-bg); color: var(--heat-bad-fg); } /* ── score chip (for HR Score / Score column) ──────────── */ .pt-score { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; padding: 2px 8px; border-radius: 4px; font-family: var(--mono); font-size: 12px; font-weight: 700; } .pt-score.s90 { background: var(--red-soft); color: var(--red); } .pt-score.s75 { background: var(--amber-soft); color: var(--amber); } .pt-score.s60 { background: var(--cyan-soft); color: var(--cyan); } .pt-score.s45 { background: var(--bg-soft); color: var(--dim); } /* ── hand pill (L/R/S) ─────────────────────────────────── */ .pt-hand { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 3px; font-family: var(--mono); font-size: 9px; font-weight: 800; flex-shrink: 0; } .pt-hand.l { background: var(--cyan-soft); color: var(--cyan); } .pt-hand.r { background: var(--amber-soft); color: var(--amber); } .pt-hand.s { background: rgba(167,139,250,0.18); color: #7C3AED; } [data-theme="dark"] .pt-hand.s { color: #C4B5FD; } /* ── team glyph ────────────────────────────────────────── */ .pt-team { display: inline-flex; align-items: center; justify-content: center; border-radius: 5px; font-family: var(--mono); font-weight: 700; color: #fff; flex-shrink: 0; letter-spacing: 0; } /* ── card ───────────────────────────────────────────────── */ .pt-card { background: var(--bg-elev); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; } .pt-card-head { padding: 14px 18px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; } .pt-card-head h3 { margin: 0; font-size: 14px; font-weight: 700; letter-spacing: -0.01em; } .pt-card-head .pt-card-meta { margin-left: auto; font-family: var(--mono); font-size: 10px; color: var(--faint); letter-spacing: 0.1em; text-transform: uppercase; } .pt-card-body { padding: 14px 18px; } /* ── badge / status ─────────────────────────────────────── */ .pt-status { font-family: var(--mono); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; padding: 3px 7px; border-radius: 3px; font-weight: 600; } .pt-status.live { background: var(--green-soft); color: var(--green); } .pt-status.aplus { background: var(--grade-aplus-bg); color: var(--grade-aplus-fg); } .pt-status.muted { background: var(--bg-soft); color: var(--dim); } .pt-status.warn { background: var(--amber-soft); color: var(--amber); } /* ── slate · matchup card ───────────────────────────────── */ .pt-matchup { background: var(--bg-elev); border: 1px solid var(--line); border-top: 3px solid var(--mu-accent, var(--cyan)); border-radius: 6px; overflow: hidden; transition: box-shadow .15s, border-color .15s; } .pt-matchup:hover { box-shadow: var(--shadow-md); } .pt-matchup-head { padding: 9px 14px; border-bottom: 1px solid var(--hairline); display: flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 10px; color: var(--dim); letter-spacing: 0.06em; } .pt-matchup-head .pt-status.live { margin-left:auto; } .pt-team-row { padding: 12px 16px; display: grid; grid-template-columns: 32px 1fr auto auto; gap: 12px; align-items: center; border-bottom: 1px solid var(--hairline); } .pt-team-row:last-of-type { border-bottom: none; } .pt-team-name { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; } .pt-team-rec { font-family: var(--mono); font-size: 11px; color: var(--faint); margin-left: 6px; font-weight: 500; } .pt-team-pitcher { font-family: var(--mono); font-size: 10px; color: var(--dim); margin-top: 2px; letter-spacing: 0.02em; } .pt-team-pitcher .era-up { color: var(--red); } .pt-team-pitcher .era-dn { color: var(--green); } .pt-team-proj { font-family: var(--mono); font-size: 22px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; line-height: 1; } .pt-team-proj-label { font-family: var(--mono); font-size: 9px; color: var(--faint); letter-spacing: 0.14em; text-transform: uppercase; margin-top: 3px; text-align: right; } .pt-team-ml { font-family: var(--mono); font-size: 13px; color: var(--ink); font-weight: 600; } .pt-team-ml-label { font-family: var(--mono); font-size: 9px; color: var(--faint); letter-spacing: 0.14em; text-transform: uppercase; margin-top: 3px; text-align: right; } .pt-matchup-edges { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border-top: 1px solid var(--line); } .pt-edge-cell { padding: 11px 14px; background: var(--bg-elev); display: flex; align-items: center; gap: 10px; cursor: pointer; } .pt-edge-cell:hover { background: var(--bg-soft); } .pt-edge-cell.full { grid-column: 1 / -1; } .pt-edge-cell-grade { flex-shrink: 0; } .pt-edge-cell-pick { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.02em; color: var(--ink); } .pt-edge-cell-meta { font-family: var(--mono); font-size: 10px; color: var(--faint); margin-top: 2px; } .pt-edge-cell-pct { margin-left: auto; font-family: var(--mono); font-size: 14px; font-weight: 700; color: var(--green); } .pt-edge-cell-pct.up { color: var(--green); } .pt-edge-cell-pct.down { color: var(--red); } .pt-matchup-foot { padding: 8px 14px; border-top: 1px solid var(--line); background: var(--bg-soft); font-family: var(--mono); font-size: 10px; color: var(--dim); cursor: pointer; text-align: center; letter-spacing: 0.1em; text-transform: uppercase; } .pt-matchup-foot:hover { color: var(--ink); } /* ── section divider ───────────────────────────────────── */ .pt-section-label { padding: 22px 32px 10px; display: flex; align-items: baseline; gap: 12px; } .pt-section-label h2 { margin: 0; font-family: var(--sans); font-style: italic; font-weight: 900; font-size: 22px; letter-spacing: -0.03em; } .pt-section-label h2 .accent { color: var(--blue); font-style: normal; } .pt-section-label .pt-section-meta { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); } /* ── theme toggle nub ──────────────────────────────────── */ .pt-theme-toggle { position: relative; width: 38px; height: 22px; border-radius: 999px; background: var(--bg-soft); border: 1px solid var(--line); cursor: pointer; padding: 0; } .pt-theme-toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--ink); transition: transform 0.18s; } [data-theme="dark"] .pt-theme-toggle::after { transform: translateX(16px); background: var(--cyan); } /* ── footer ─────────────────────────────────────────────── */ .pt-footer { padding: 36px 32px; border-top: 1px solid var(--line); background: var(--bg-elev); display: flex; gap: 32px; flex-wrap: wrap; font-family: var(--mono); font-size: 11px; color: var(--faint); letter-spacing: 0.04em; margin-top: 60px; } .pt-footer .pt-foot-brand { font-family: var(--sans); font-style: italic; font-weight: 900; font-size: 16px; color: var(--ink); letter-spacing: -0.03em; } /* ── DataTable scroll affordance ──────────────────────────── Wrap a right-edge fade against any horizontally-scrolling table so users can tell there's more content off-screen. */ .pt-table-scroll { position: relative; } .pt-table-scroll::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 24px; pointer-events: none; background: linear-gradient(to right, transparent, var(--bg-elev)); opacity: 0.9; } /* ── Matchup card head grid (was inline style on schedule) ── Top row: time + status. Bottom row: venue + weather tile. On mobile the weather tile drops below the venue line so it stops being clipped by the card's overflow:hidden. */ .pt-matchup-head-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; row-gap: 4px; align-items: center; min-width: 0; } /* Slate card grid — desktop default. Min cell width gets clamped to 100% on narrow screens (CSS min()) so the card never overflows. */ .pt-matchup-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(380px, 100%), 1fr)); gap: 18px; padding: 12px 32px 24px; } @media (max-width: 640px) { .pt-matchup-grid { padding: 10px 12px 20px; gap: 14px; } } /* ── Mobile responsive layer ─────────────────────────────── Everything below applies only at ≤640px. Goal: keep the desktop design untouched while making the same .pt-* primitives readable, tappable, and non-overflowing on a 360–414px screen. */ @media (max-width: 640px) { /* Header — tighten padding, drop the clock so the right-side toolset (search, theme, avatar) actually fits. */ .pt-header-row { padding: 12px 14px; gap: 10px; } .pt-clock { display: none; } .pt-sportpill { padding: 5px 10px; font-size: 11px; } /* Sub-nav becomes a swipeable horizontal scroller. No scrollbar chrome (would dominate the tiny strip); a subtle right-edge fade is the affordance. */ .pt-nav { padding: 0 14px; overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap; white-space: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; position: relative; -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%); mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%); } .pt-nav::-webkit-scrollbar { display: none; } .pt-nav a { padding: 14px 14px; flex-shrink: 0; font-size: 11px; } /* Page-head: stack the right-side stat block below the H1 instead of forcing them onto the same line. */ .pt-pagehead { padding: 22px 14px 18px; } .pt-pagehead-row { flex-wrap: wrap; gap: 16px; align-items: flex-start; } .pt-h1 { font-size: 36px; } .pt-crumb { font-size: 10px; letter-spacing: 0.18em; } .pt-pagehead-sub { font-size: 10.5px; letter-spacing: 0.12em; } /* Control row: less padding, more usable pill/chip tap target. */ .pt-controls { padding: 12px 14px; gap: 10px; } .pt-pill { padding: 8px 14px; font-size: 12px; } .pt-chip { padding: 8px 14px; font-size: 12px; } /* Section labels (block headings like "Early.", "Evening."). */ .pt-section-label { padding: 18px 14px 8px; gap: 10px; flex-wrap: wrap; } .pt-section-label h2 { font-size: 20px; } .pt-section-label .pt-section-meta { font-size: 10px; letter-spacing: 0.14em; } /* Matchup card: tighten head, reshape head grid so weather drops to its own row, and reflow the team row so the ML column moves under the projection instead of being clipped off the card. */ .pt-matchup-head { padding: 10px 12px; font-size: 11px; } .pt-matchup-head-grid { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; } /* Force the weather tile (4th cell at gridColumn:2 / gridRow:2) onto its own row spanning full width so the diamond + direction label has room to breathe. */ .pt-matchup-head-grid > :nth-child(4) { grid-column: 1 / -1; grid-row: 3; justify-self: start; } /* Three-column, two-row grid so the projection sits on top of the moneyline in a single right-side stack — no horizontal overflow, no clipped ML column. */ .pt-team-row { grid-template-columns: 32px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 10px; row-gap: 6px; padding: 12px 12px; } .pt-team-row > :nth-child(1) { grid-column: 1; grid-row: 1 / span 2; align-self: start; } .pt-team-row > :nth-child(2) { grid-column: 2; grid-row: 1 / span 2; } .pt-team-row > :nth-child(3) { grid-column: 3; grid-row: 1; align-self: start; } .pt-team-row > :nth-child(4) { grid-column: 3; grid-row: 2; align-self: end; } .pt-team-name { font-size: 15px; } .pt-team-proj { font-size: 20px; } .pt-team-ml { font-size: 12px; } .pt-team-ml-label, .pt-team-proj-label { font-size: 8.5px; } /* Matchup edges: keep the 2-col grid but tighten padding. */ .pt-edge-cell { padding: 10px 12px; gap: 8px; } .pt-edge-cell-pick { font-size: 11px; } .pt-edge-cell-meta { font-size: 9.5px; } /* Footer reflow */ .pt-footer { padding: 28px 14px; gap: 20px; } /* Card body */ .pt-card-head { padding: 12px 14px; } .pt-card-body { padding: 12px 14px; } /* Tap-target bump for icon buttons */ .pt-icon-btn { width: 36px; height: 36px; } } /* Tweak the team-row grid so a longer ML column on the second line is right-aligned with the projection above it. */ .pt-team-row > :nth-child(4) { text-align: right; }