/* World Cup 2026 Explorer — styles.css * Inherits design language from root styles.css (same font stack, CSS vars). * All colors use the same custom-property names so toggling data-theme="dark" * on works automatically. */ /* ─── Reset & base ──────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { /* Light theme — mirrors root styles.css palette */ --bg: #f4f5f7; --card: #ffffff; --card2: #eef0f5; --ink: #15181d; --muted: #5f6675; --line: #e6e8ec; --accent: #0a7d3e; --accent-ink: #ffffff; --accent-soft: #e8f3ec; --accent-pill: #cfe8d9; --accent-pill-ink: #075c2d; --brand-red: #BB0006; --warn-bg: #fff4d6; --warn-ink: #5a3d00; --shadow: 0 4px 16px rgba(0,0,0,0.07); --error: #b00020; --focus-ring: rgba(10,125,62,0.12); /* Explorer-specific tokens */ --header-h: 64px; --chip-bar-h: 0px; /* set by JS after chips render */ --sheet-z: 200; --compare-bar-z: 150; --radius-card: 12px; --radius-chip: 999px; --radius-btn: 8px; --gap: 16px; --col-min: 260px; } @media (prefers-color-scheme: dark) { :root { --bg: #0c0e12; --card: #15181f; --card2: #1b1f27; --ink: #eef1f5; --muted: #8b94a3; --line: #242a33; --accent: #19c37d; --accent-ink: #04130c; --accent-soft: rgba(25,195,125,0.14); --accent-pill: rgba(25,195,125,0.22); --accent-pill-ink: #19c37d; --brand-red: #ff6b6b; --warn-bg: #2a2410; --warn-ink: #f0c040; --shadow: 0 8px 26px rgba(0,0,0,0.45); --error: #ff6b6b; --focus-ring: rgba(25,195,125,0.22); } } /* Honour explicit [data-theme] attribute (from root site toggle) */ [data-theme="dark"] { --bg: #0c0e12; --card: #15181f; --card2: #1b1f27; --ink: #eef1f5; --muted: #8b94a3; --line: #242a33; --accent: #19c37d; --accent-ink: #04130c; --accent-soft: rgba(25,195,125,0.14); --accent-pill: rgba(25,195,125,0.22); --accent-pill-ink: #19c37d; --brand-red: #ff6b6b; --warn-bg: #2a2410; --warn-ink: #f0c040; --shadow: 0 8px 26px rgba(0,0,0,0.45); --error: #ff6b6b; --focus-ring: rgba(25,195,125,0.22); } [data-theme="light"] { --bg: #f4f5f7; --card: #ffffff; --card2: #eef0f5; --ink: #15181d; --muted: #5f6675; --line: #e6e8ec; --accent: #0a7d3e; --accent-ink: #ffffff; --accent-soft: #e8f3ec; --accent-pill: #cfe8d9; --accent-pill-ink: #075c2d; --brand-red: #BB0006; --warn-bg: #fff4d6; --warn-ink: #5a3d00; --shadow: 0 4px 16px rgba(0,0,0,0.07); --error: #b00020; --focus-ring: rgba(10,125,62,0.12); } html { scroll-behavior: smooth; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: var(--bg); color: var(--ink); line-height: 1.4; min-height: 100dvh; } /* ─── Focus ring ────────────────────────────────────────────────────────── */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } /* ─── Reduced motion ────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ─── Header ────────────────────────────────────────────────────────────── */ .site-header { background: var(--card); border-bottom: 1px solid var(--line); padding: 12px var(--gap); position: sticky; top: 0; z-index: 100; } .site-header__inner { max-width: 1400px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .site-header__title { font-size: 1.1rem; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 8px; } .site-header__badge { font-size: 0.7rem; background: var(--accent); color: var(--accent-ink); padding: 2px 7px; border-radius: var(--radius-chip); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } .site-header__tagline { font-size: 0.78rem; color: var(--muted); flex: 1 1 100%; } .site-header__actions { display: flex; align-items: center; gap: 8px; } .back-link { font-size: 0.8rem; color: var(--accent); text-decoration: none; display: flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 4px; } .back-link:hover { text-decoration: underline; } /* Preview badge */ .preview-badge { display: none; align-items: center; gap: 5px; font-size: 0.72rem; background: var(--warn-bg); color: var(--warn-ink); padding: 3px 10px; border-radius: var(--radius-chip); border: 1px solid var(--warn-ink); font-weight: 600; } .preview-badge.visible { display: flex; } /* ─── Layout shell ──────────────────────────────────────────────────────── */ .explorer-layout { max-width: 1400px; margin: 0 auto; padding: 0 var(--gap); } /* ─── Tier-1 filter bar ─────────────────────────────────────────────────── */ .filter-bar { padding: 12px 0 8px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .search-wrap { position: relative; flex: 1 1 180px; min-width: 160px; } .search-wrap svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; } .search-input { width: 100%; padding: 9px 10px 9px 34px; border: 1px solid var(--line); border-radius: var(--radius-btn); background: var(--card); color: var(--ink); font-size: 0.9rem; min-height: 44px; font-family: inherit; } .search-input::placeholder { color: var(--muted); } .search-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); } /* Multi-select pill groups (Tier 1: Nation, Position) */ .pill-group { display: flex; flex-wrap: wrap; gap: 4px; } .pill-group__label { font-size: 0.72rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; align-self: center; margin-right: 2px; white-space: nowrap; } .pill { appearance: none; background: var(--card2); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-chip); padding: 5px 12px; font-size: 0.8rem; font-family: inherit; cursor: pointer; min-height: 32px; line-height: 1; transition: background 0.15s, color 0.15s, border-color 0.15s; white-space: nowrap; user-select: none; } .pill[aria-pressed="true"], .pill.active { background: var(--accent-pill); color: var(--accent-pill-ink); border-color: var(--accent); font-weight: 600; } .pill:hover:not([aria-pressed="true"]):not(.active) { background: var(--accent-soft); border-color: var(--accent); } /* Filters & view-toggle button row */ .toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-bottom: 8px; border-bottom: 1px solid var(--line); } .toolbar__left { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; align-items: center; } .toolbar__right { display: flex; gap: 8px; align-items: center; } .btn { appearance: none; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-btn); padding: 7px 14px; font-size: 0.83rem; font-family: inherit; cursor: pointer; min-height: 36px; min-width: 44px; display: inline-flex; align-items: center; gap: 5px; transition: background 0.12s, border-color 0.12s; white-space: nowrap; } .btn:hover { background: var(--accent-soft); border-color: var(--accent); } .btn--active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } .btn--accent { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } .btn--small { padding: 4px 10px; min-height: 30px; font-size: 0.78rem; } /* Sort & Group selects */ .select-wrap { position: relative; display: inline-flex; align-items: center; } .select-wrap label { font-size: 0.75rem; color: var(--muted); margin-right: 6px; white-space: nowrap; } select.sort-select, select.group-select { appearance: none; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-btn); padding: 6px 28px 6px 10px; font-size: 0.83rem; font-family: inherit; cursor: pointer; min-height: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235f6675' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; } select.sort-select:focus, select.group-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); } /* ─── Active-filter chip bar ────────────────────────────────────────────── */ .chip-bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px 0; min-height: 0; } .chip-bar:empty { display: none; } .result-count { font-size: 0.82rem; color: var(--muted); margin-right: 4px; } .result-count strong { color: var(--ink); } .filter-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--accent-pill); color: var(--accent-pill-ink); border: 1px solid var(--accent); border-radius: var(--radius-chip); padding: 3px 6px 3px 10px; font-size: 0.78rem; font-weight: 600; white-space: nowrap; } .chip-remove { appearance: none; background: none; border: none; color: inherit; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; font-size: 0.9rem; line-height: 1; padding: 0; transition: background 0.1s; } .chip-remove:hover { background: rgba(0,0,0,0.12); } .clear-all-btn { appearance: none; background: none; border: none; color: var(--error); font-size: 0.78rem; font-family: inherit; cursor: pointer; padding: 3px 6px; min-height: 28px; border-radius: var(--radius-btn); text-decoration: underline; } .clear-all-btn:hover { background: rgba(176,0,32,0.08); } /* ─── Group section headers ─────────────────────────────────────────────── */ .group-header { font-size: 0.78rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; padding: 14px 0 6px; border-top: 1px solid var(--line); margin-top: 6px; position: sticky; top: 0; background: var(--bg); z-index: 10; } .group-header:first-child { border-top: none; margin-top: 0; } /* ─── Card grid ─────────────────────────────────────────────────────────── */ .results-area { padding: 8px 0 120px; } .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--col-min), 1fr)); gap: 12px; align-items: start; } /* Player card */ .player-card { background: var(--card); border-radius: var(--radius-card); border: 1px solid var(--line); box-shadow: var(--shadow); display: flex; flex-direction: column; overflow: hidden; position: relative; content-visibility: auto; contain-intrinsic-size: 0 180px; transition: transform 0.12s, box-shadow 0.12s; } .player-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.1); } .player-card__header { display: flex; align-items: center; gap: 10px; padding: 12px 12px 8px; } .player-card__flag { font-size: 1.6rem; line-height: 1; flex-shrink: 0; width: 32px; text-align: center; } .player-card__name { font-weight: 700; font-size: 0.95rem; line-height: 1.2; } /* Nation filter scales to 48 nations: a capped, scrollable box of pills instead of an overflowing block. Pills wrap as before; the box scrolls. */ #nationPills { max-height: 116px; overflow-y: auto; align-content: flex-start; } /* Player-name links (card + table) inherit the surface look, underline on hover. */ .player-card__link { color: inherit; text-decoration: none; } .player-card__link:hover { text-decoration: underline; } .player-card__team { font-size: 0.75rem; color: var(--muted); } .player-card__body { padding: 0 12px 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 8px; } .player-card__stat { font-size: 0.75rem; color: var(--muted); } .player-card__stat strong { color: var(--ink); font-weight: 600; } .player-card__pos { position: absolute; top: 10px; right: 10px; background: var(--card2); color: var(--muted); font-size: 0.65rem; font-weight: 700; padding: 2px 6px; border-radius: 4px; letter-spacing: 0.04em; } .player-card__shirt { position: absolute; bottom: 10px; right: 10px; color: var(--line); font-size: 0.7rem; } /* Pin / compare button */ .pin-btn { appearance: none; background: none; border: none; cursor: pointer; color: var(--muted); min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-btn); transition: color 0.12s, background 0.12s; flex-shrink: 0; margin-left: auto; } .pin-btn:hover { background: var(--accent-soft); color: var(--accent); } .pin-btn[aria-pressed="true"] { color: var(--accent); } .pin-btn[aria-pressed="true"] svg { fill: var(--accent); } /* MLS badge on card */ .mls-badge { display: inline-block; font-size: 0.6rem; font-weight: 700; background: var(--accent-soft); color: var(--accent-pill-ink); border-radius: 3px; padding: 1px 4px; margin-left: 4px; letter-spacing: 0.04em; vertical-align: middle; } /* Foreign-born badge */ .foreign-badge { display: inline-block; font-size: 0.6rem; font-weight: 600; background: var(--card2); color: var(--muted); border-radius: 3px; padding: 1px 4px; margin-left: 4px; letter-spacing: 0.03em; vertical-align: middle; } /* ─── Table view ────────────────────────────────────────────────────────── */ .player-table-wrap { overflow-x: auto; margin-top: 8px; border-radius: var(--radius-card); border: 1px solid var(--line); background: var(--card); } .player-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; } .player-table th { padding: 10px 12px; text-align: left; font-size: 0.72rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; border-bottom: 1px solid var(--line); background: var(--card2); white-space: nowrap; cursor: pointer; user-select: none; } .player-table th:hover { color: var(--accent); } .player-table th[aria-sort="ascending"]::after { content: " ▲"; font-size: 0.65rem; } .player-table th[aria-sort="descending"]::after { content: " ▼"; font-size: 0.65rem; } .player-table td { padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; white-space: nowrap; } .player-table tbody tr:last-child td { border-bottom: none; } .player-table tbody tr:hover { background: var(--accent-soft); } .player-table .pin-btn { min-width: 36px; min-height: 36px; } /* ─── Skeleton loading ──────────────────────────────────────────────────── */ @keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } } .skeleton { background: linear-gradient(90deg, var(--card2) 25%, var(--line) 50%, var(--card2) 75%); background-size: 800px 100%; animation: shimmer 1.4s infinite linear; border-radius: 6px; } .skeleton-card { background: var(--card); border-radius: var(--radius-card); border: 1px solid var(--line); height: 180px; overflow: hidden; padding: 16px; display: flex; flex-direction: column; gap: 10px; } .skeleton-line { height: 14px; border-radius: 4px; } .skeleton-line--title { width: 60%; } .skeleton-line--sub { width: 40%; height: 11px; } .skeleton-line--short { width: 30%; height: 11px; } /* ─── Empty state ───────────────────────────────────────────────────────── */ .empty-state { text-align: center; padding: 60px 20px; display: flex; flex-direction: column; align-items: center; gap: 12px; } .empty-state__icon { font-size: 2.5rem; } .empty-state__title { font-size: 1.1rem; font-weight: 700; color: var(--ink); } .empty-state__sub { font-size: 0.88rem; color: var(--muted); max-width: 320px; } /* ─── Charts section ────────────────────────────────────────────────────── */ .charts-section { padding: 16px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 700px) { .charts-section { grid-template-columns: 1fr; } } .chart-card { background: var(--card); border-radius: var(--radius-card); border: 1px solid var(--line); padding: 14px 16px; } .chart-card__title { font-size: 0.78rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 12px; } /* Bar chart (league distribution) */ .bar-chart { display: flex; flex-direction: column; gap: 6px; } .bar-row { display: grid; grid-template-columns: 110px 1fr 36px; gap: 6px; align-items: center; } .bar-label { font-size: 0.75rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bar-track { height: 16px; background: var(--card2); border-radius: 4px; overflow: hidden; } .bar-fill { height: 100%; background: var(--accent); border-radius: 4px; min-width: 4px; transition: width 0.3s ease; } .bar-count { font-size: 0.72rem; color: var(--muted); text-align: right; } /* Ranked list (birthplace) */ .ranked-list { display: flex; flex-direction: column; gap: 4px; } .ranked-row { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; } .ranked-row__rank { width: 18px; color: var(--muted); font-size: 0.7rem; font-weight: 600; text-align: right; flex-shrink: 0; } .ranked-row__label { flex: 1; color: var(--ink); } .ranked-row__count { color: var(--muted); font-size: 0.78rem; } /* ─── Bottom sheet (Tier 2 filters) ────────────────────────────────────── */ .sheet-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: calc(var(--sheet-z) - 1); opacity: 0; pointer-events: none; transition: opacity 0.2s; } .sheet-overlay.open { opacity: 1; pointer-events: all; } .bottom-sheet { position: fixed; bottom: 0; left: 0; right: 0; z-index: var(--sheet-z); background: var(--card); border-top-left-radius: 18px; border-top-right-radius: 18px; box-shadow: 0 -8px 40px rgba(0,0,0,0.18); transform: translateY(100%); transition: transform 0.28s cubic-bezier(0.4,0,0.2,1); max-height: 85dvh; display: flex; flex-direction: column; } .bottom-sheet.open { transform: translateY(0); } .sheet-handle { width: 40px; height: 4px; background: var(--line); border-radius: 2px; margin: 10px auto 0; flex-shrink: 0; } .sheet-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--line); flex-shrink: 0; } .sheet-header h2 { font-size: 1rem; font-weight: 700; } .sheet-close { appearance: none; background: none; border: none; cursor: pointer; color: var(--muted); font-size: 1.4rem; line-height: 1; min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-btn); } .sheet-close:hover { background: var(--accent-soft); color: var(--accent); } .sheet-body { overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 16px; flex: 1; } .sheet-section { display: flex; flex-direction: column; gap: 8px; } .sheet-section__label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); } /* MLS toggle */ .toggle-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; } .toggle-label { font-size: 0.88rem; color: var(--ink); flex: 1; } .toggle-switch { position: relative; width: 44px; height: 26px; flex-shrink: 0; } .toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; } .toggle-switch__track { position: absolute; inset: 0; background: var(--card2); border: 1px solid var(--line); border-radius: 13px; cursor: pointer; transition: background 0.2s, border-color 0.2s; } .toggle-switch__thumb { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; background: var(--card); border-radius: 50%; box-shadow: 0 1px 4px rgba(0,0,0,0.2); transition: transform 0.2s, background 0.2s; pointer-events: none; } .toggle-switch input:checked ~ .toggle-switch__track { background: var(--accent); border-color: var(--accent); } .toggle-switch input:checked ~ .toggle-switch__thumb { transform: translateX(18px); } .toggle-switch input:focus ~ .toggle-switch__track { box-shadow: 0 0 0 3px var(--focus-ring); } /* Range sliders */ .range-row { display: flex; flex-direction: column; gap: 6px; } .range-values { display: flex; justify-content: space-between; font-size: 0.78rem; color: var(--muted); } input[type="range"] { -webkit-appearance: none; width: 100%; height: 4px; background: var(--line); border-radius: 2px; cursor: pointer; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,0.2); } /* "More" expander in sheet */ .more-expander { border-top: 1px solid var(--line); padding-top: 12px; } .more-toggle { appearance: none; background: none; border: none; color: var(--accent); font-size: 0.82rem; font-family: inherit; cursor: pointer; padding: 4px 0; min-height: 44px; display: flex; align-items: center; gap: 4px; font-weight: 600; } .more-toggle[aria-expanded="true"] .more-arrow { transform: rotate(180deg); } .more-arrow { transition: transform 0.2s; display: inline-block; } .more-content { display: none; padding-top: 12px; display: flex; flex-direction: column; gap: 14px; } .more-content[hidden] { display: none; } .sheet-footer { padding: 12px 16px; border-top: 1px solid var(--line); display: flex; gap: 8px; flex-shrink: 0; } .sheet-footer .btn { flex: 1; justify-content: center; } /* ─── Compare bar ───────────────────────────────────────────────────────── */ .compare-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: var(--compare-bar-z); background: var(--card); border-top: 1px solid var(--line); box-shadow: 0 -4px 20px rgba(0,0,0,0.12); padding: 10px 16px; transform: translateY(100%); transition: transform 0.25s ease; } .compare-bar.visible { transform: translateY(0); } .compare-bar__inner { max-width: 1400px; margin: 0 auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .compare-bar__label { font-size: 0.8rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; flex-shrink: 0; } .compare-slot { background: var(--card2); border: 1px dashed var(--line); border-radius: var(--radius-btn); padding: 5px 12px; font-size: 0.82rem; color: var(--muted); min-height: 36px; display: flex; align-items: center; gap: 6px; min-width: 120px; } .compare-slot.filled { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); } .compare-slot__remove { appearance: none; background: none; border: none; color: var(--muted); cursor: pointer; font-size: 1rem; line-height: 1; min-width: 24px; min-height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 50%; margin-left: auto; } .compare-slot__remove:hover { background: rgba(0,0,0,0.1); } /* ─── Compare panel (side-by-side) ─────────────────────────────────────── */ .compare-panel { position: fixed; inset: 0; z-index: 300; background: var(--bg); overflow-y: auto; padding: 16px; transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.4,0,0.2,1); } .compare-panel.open { transform: translateY(0); } .compare-panel__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .compare-panel__header h2 { font-size: 1.1rem; font-weight: 700; } .compare-table-wrap { overflow-x: auto; border-radius: var(--radius-card); border: 1px solid var(--line); background: var(--card); } .compare-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; } .compare-table th { padding: 12px 16px; text-align: left; font-weight: 700; border-bottom: 1px solid var(--line); background: var(--card2); } .compare-table th.attr-col { width: 120px; font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; } .compare-table td { padding: 10px 16px; border-bottom: 1px solid var(--line); vertical-align: top; } .compare-table tbody tr:last-child td { border-bottom: none; } .compare-table tbody tr:nth-child(even) { background: var(--accent-soft); } /* ─── Share button ──────────────────────────────────────────────────────── */ .share-btn { appearance: none; background: none; border: 1px solid var(--line); border-radius: var(--radius-btn); color: var(--ink); font-size: 0.8rem; font-family: inherit; cursor: pointer; padding: 6px 12px; min-height: 36px; display: inline-flex; align-items: center; gap: 5px; transition: background 0.12s; } .share-btn:hover { background: var(--accent-soft); } .share-btn.copied { color: var(--accent); border-color: var(--accent); } /* ─── Utility ───────────────────────────────────────────────────────────── */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; } .hidden { display: none !important; } /* ─── Responsive ────────────────────────────────────────────────────────── */ @media (max-width: 520px) { :root { --col-min: 100%; } .site-header__title { font-size: 0.95rem; } .filter-bar { padding: 8px 0 4px; } .bar-row { grid-template-columns: 80px 1fr 28px; } } @media (min-width: 900px) { .site-header__tagline { flex: 0 1 auto; } .site-header__inner { flex-wrap: nowrap; } }